[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_250":251,"_252":253},"routes/_app.x.$handle.$name",{"_101":100,"_32":46,"_110":91,"_27":111,"_13":14,"_112":-5,"_11":113,"_114":115,"_116":117,"_118":119,"_120":121,"_20":-5,"_122":-5,"_123":-5,"_124":25,"_125":126,"_127":60,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":25},"version",14,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/components/App.tsx","latestPath","fileId","01a05cfa-f041-726f-9bb7-91080749f8f0","name","App.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\n/**\n * Adres email tej aplikacji. Odczytany z API Val Town (pole links.email\n * pliku email.ts), nie wymyslony. Nie jest sekretem, wiec moze byc w kodzie.\n */\nconst ADRES = \"dominikmurasicki-eb00bad6a60211f1a11e1607ee4eb77e@valtown.email\";\n\ntype Zdjecie = {\n id: string;\n od: string;\n temat: string;\n nazwaPliku: string;\n typ: string;\n rozmiar: number;\n kiedy: string;\n czarny_kot: boolean;\n co_widac: string;\n komentarz: string;\n};\n\nexport function App() {\n const [zdjecia, setZdjecia] = useState(null);\n const [blad, setBlad] = useState(null);\n const [skopiowane, setSkopiowane] = useState(false);\n\n async function pobierz() {\n try {\n const odpowiedz = await fetch(\"/api/photos\");\n if (!odpowiedz.ok) throw new Error(`HTTP ${odpowiedz.status}`);\n const dane = await odpowiedz.json();\n setZdjecia(Array.isArray(dane) ? dane : []);\n setBlad(null);\n } catch (e) {\n setBlad(String(e));\n }\n }\n\n useEffect(() => {\n pobierz();\n // Odswiezanie co 8 sekund, zeby po wyslaniu maila zdjecie pojawilo sie\n // samo, bez przeladowywania strony.\n const zegar = setInterval(pobierz, 8000);\n return () => clearInterval(zegar);\n }, []);\n\n function kopiujAdres() {\n navigator.clipboard?.writeText(ADRES);\n setSkopiowane(true);\n setTimeout(() => setSkopiowane(false), 2000);\n }\n\n return (\n

\n \n \n\n {blad && }\n {!blad && zdjecia === null && }\n {!blad && zdjecia?.length === 0 && }\n\n {zdjecia && zdjecia.length > 0 && (\n

\n {zdjecia.map((z) => )}\n

\n )}\n\n \n

\n );\n}\n\nfunction Naglowek() {\n return (\n

\n {/*\n Zdjecie lezy w magazynie blobow pod kluczem \"hero\", a trasa /hero.jpg\n w index.ts je stamtad wyciaga.\n\n h-auto zamiast stalej wysokosci: przegladarka sama liczy wysokosc\n z proporcji pliku, wiec nic nie jest przycinane. Wczesniejsza wersja\n miala object-cover na sztywnej wysokosci i ucinala Marlence pysk.\n */}\n \n {/* Tytul POD zdjeciem, nie na nim, zeby nic nie zaslanial. */}\n

\n Marlenka\n

\n Wyslij zdjecie mailem, a sztuczna inteligencja oceni, czy to nasza czarna\n Marlenka, i powie, co o tym sadzi.\n

\n );\n}\n\nfunction PanelWysylki(\n { adres, skopiowane, onKopiuj }: { adres: string; skopiowane: boolean; onKopiuj: () => void },\n) {\n return (\n

\n ✉\n

\n Wyslij zdjecie jako zalacznik na ten adres\n

\n \n {adres}\n \n \n {skopiowane ? \"Skopiowano\" : \"Kopiuj\"}\n \n

\n Formaty JPEG, PNG, GIF, WEBP. Jesli masz iPhone, przelacz aparat na\n format \"Najbardziej zgodny\", bo HEIC nie jest obslugiwany.\n Galeria odswieza sie sama co kilka sekund.\n

\n );\n}\n\nfunction Karta({ zdjecie }: { zdjecie: Zdjecie }) {\n const jestMarlenka = zdjecie.czarny_kot;\n\n return (\n

\n \n

\n\n

\n \n \n {jestMarlenka ? \"Czarny kot\" : \"Nie Marlenka\"}\n \n\n

\n {zdjecie.komentarz}\n

\n\n {zdjecie.co_widac && (\n

\n {zdjecie.co_widac}\n

\n )}\n\n

\n {zdjecie.od}\n {sformatujDate(zdjecie.kiedy)}\n

\n \n );\n}\n\nfunction PustaGaleria() {\n return (\n

📭

Jeszcze nic nie przyszlo.

\n Wyslij pierwsze zdjecie na adres powyzej.\n

\n );\n}\n\nfunction Komunikat({ rodzaj, tresc }: { rodzaj: \"blad\" | \"ladowanie\"; tresc: string }) {\n const styl = rodzaj === \"blad\"\n ? \"border-red-900/50 bg-red-950/30 text-red-300\"\n : \"border-zinc-800 bg-zinc-900/50 text-zinc-500\";\n return (\n

\n {tresc}\n

\n \n \n\n {blad && }\n {!blad && zdjecia === null && }\n {!blad && zdjecia?.length === 0 && }\n\n {zdjecia && zdjecia.length > 0 && (\n

\n {zdjecia.map((z) => )}\n

\n )}\n\n \n

\n );\n}\n\nfunction Naglowek() {\n return (\n

\n Marlenka\n

\n Wyslij zdjecie mailem, a sztuczna inteligencja oceni, czy to nasza czarna\n Marlenka, i powie, co o tym sadzi.\n

\n );\n}\n\nfunction PanelWysylki(\n { adres, skopiowane, onKopiuj }: { adres: string; skopiowane: boolean; onKopiuj: () => void },\n) {\n return (\n

\n ✉\n

\n Wyslij zdjecie jako zalacznik na ten adres\n

\n \n {adres}\n \n \n {skopiowane ? \"Skopiowano\" : \"Kopiuj\"}\n \n

\n Formaty JPEG, PNG, GIF, WEBP. Jesli masz iPhone, przelacz aparat na\n format \"Najbardziej zgodny\", bo HEIC nie jest obslugiwany.\n Galeria odswieza sie sama co kilka sekund.\n

\n );\n}\n\nfunction Karta({ zdjecie }: { zdjecie: Zdjecie }) {\n const jestMarlenka = zdjecie.czarny_kot;\n\n return (\n

\n \n

\n\n

\n \n \n {jestMarlenka ? \"Czarny kot\" : \"Nie Marlenka\"}\n \n\n

\n {zdjecie.komentarz}\n

\n\n {zdjecie.co_widac && (\n

\n {zdjecie.co_widac}\n

\n )}\n\n

\n {zdjecie.od}\n {sformatujDate(zdjecie.kiedy)}\n

\n \n );\n}\n\nfunction PustaGaleria() {\n return (\n

📭

Jeszcze nic nie przyszlo.

\n Wyslij pierwsze zdjecie na adres powyzej.\n

\n {tresc}\n

\n );\n}\n\nfunction Stopka({ liczba }: { liczba: number }) {\n return (\n \n );\n}\n\nfunction sformatujDate(iso: string): string {\n try {\n return new Date(iso).toLocaleString(\"pl-PL\", {\n day: \"numeric\",\n month: \"short\",\n hour: \"2-digit\",\n minute: \"2-digit\",\n });\n } catch {\n return iso;\n }\n}\n","createdAt",["D",1788268481947],"branchVersion","branchId","809e46e6-0e44-43fc-9e41-5e7fa4810485","id","e4d13f93-d252-4c55-a21a-6bd2d097e784","marlenka",["D",1788266344374],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Galeria zdjec kotow z mejla, oceniana przez Claude","imageUrl","68182d7f-e015-4c52-be93-35158f503cd7","pinnedFileId","01a05cfa-f041-726f-9bb7-b53f02988ce7","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","01a05cef-3c1e-72a8-bfe8-2fddf7c0fce2","tursoName","e4d13f93d2524c55a21a6bd2d097e784","tursoHostname","e4d13f93d2524c55a21a6bd2d097e784-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789480235853],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_109":105},"org",{"_101":100,"_102":103,"_104":105,"_18":56,"_106":107,"_108":25},"branch",{"_13":90,"_32":91,"_44":43,"_92":45,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":46,"_99":100},"isOwned",18,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","dominikmurasicki","handle","displayName","Dominik Murasicki","avatar","https://lh3.googleusercontent.com/a/ACg8ocIXcqRXtSdrlKoCSThAVgKUT87vrUycop4YyjLeW9JuAsvG8E80=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":245,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":246,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":247,"_85":248,"_87":249,"_89":25},"tree",[187,193,194,195,196],"files",[187,188,189,190,191,192,193,194,195,196],"counts",{"_177":64,"_178":161,"_179":64,"_180":181,"_182":183},"contents",[132,133,134,135,136],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":171,"_32":172,"_30":173,"_139":-5,"_42":43,"_41":161,"_141":60,"_39":174,"_13":64,"_34":175,"_36":-5,"_24":25,"_146":-5,"_27":176},{"_44":165,"_32":166,"_30":167,"_139":-5,"_42":43,"_41":161,"_141":60,"_39":168,"_13":64,"_34":20,"_36":169,"_24":25,"_146":-5,"_27":170},{"_44":158,"_32":159,"_30":160,"_139":-5,"_42":43,"_41":161,"_141":60,"_39":162,"_13":64,"_34":20,"_36":163,"_24":25,"_146":-5,"_27":164},{"_44":149,"_32":150,"_30":151,"_139":-5,"_42":43,"_41":152,"_141":25,"_39":153,"_13":154,"_34":155,"_36":156,"_24":25,"_146":-5,"_27":157},{"_44":137,"_32":138,"_30":58,"_139":-5,"_42":43,"_41":140,"_141":60,"_39":142,"_13":143,"_34":144,"_36":145,"_24":25,"_146":147,"_27":148},"f4221557-db32-4922-8f46-fd4455034185","index.ts","parentId",8,"latest",["D",1788267373939],2,"http","/**\n * Serwer aplikacji. Trzy zadania:\n * GET / strona z galeria\n * GET /api/photos lista zdjec z ocenami, jako JSON\n * GET /photo/:id pojedynczy obrazek, prosto z magazynu\n *\n * Zdjec nie wystawiamy jako plikow statycznych, bo nie leza na dysku.\n * Val Town nie ma dysku; siedza w magazynie blobow i ta sciezka je stamtad\n * wyciaga i oddaje przegladarce z wlasciwym typem zawartosci.\n */\n\nimport { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\n\n// Powloka HTML, nigdy nie cache'owana.\napp.get(\"/\", (c) => c.html(Root()));\n\n// Pliki frontendu pod adresami z numerem wersji, cache'owane na zawsze.\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n\n// Podglad zrodla.\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n/**\n * Lista zdjec z ocenami, najnowsze pierwsze.\n *\n * Klucze zawieraja znacznik czasu, wiec sortowanie malejaco po nazwie\n * daje kolejnosc od najnowszego. Zadnej bazy danych do tego nie potrzeba.\n */\napp.get(\"/api/photos\", async (c) => {\n const wpisy = await blob.list(\"meta:\");\n const posortowane = wpisy.sort((a, b) => b.key.localeCompare(a.key));\n\n const zdjecia = [];\n for (const wpis of posortowane) {\n const opis = await blob.getJSON(wpis.key);\n if (opis) zdjecia.push(opis);\n }\n\n return c.json(zdjecia);\n});\n\n/**\n * Pojedynczy obrazek.\n *\n * Typ zawartosci bierzemy z zapisanego opisu, a nie zgadujemy z rozszerzenia.\n * Naglowek cache jest agresywny, bo obrazek pod danym identyfikatorem\n * nigdy sie nie zmienia: nowe zdjecie dostaje nowy identyfikator.\n */\napp.get(\"/photo/:id\", async (c) => {\n const id = c.req.param(\"id\");\n try {\n const odpowiedz = await blob.get(`foto:${id}`);\n const bajty = await odpowiedz.arrayBuffer();\n const opis: any = await blob.getJSON(`meta:${id}`);\n\n return new Response(bajty, {\n headers: {\n \"Content-Type\": opis?.typ ?? \"image/jpeg\",\n \"Cache-Control\": \"public, max-age=31536000, immutable\",\n },\n });\n } catch {\n return c.notFound();\n }\n});\n\n/**\n * Zdjecie naglowkowe (portret Marlenki).\n *\n * Lezy w magazynie pod stalym kluczem \"hero\", a nie wsrod przyslanych zdjec.\n * Dzieki temu sprzatanie starych wpisow (ktore patrzy tylko na klucze\n * z przedrostkiem \"meta:\") nigdy go nie skasuje.\n */\napp.get(\"/hero.jpg\", async (c) => {\n try {\n const odpowiedz = await blob.get(\"hero\");\n const bajty = await odpowiedz.arrayBuffer();\n return new Response(bajty, {\n headers: {\n \"Content-Type\": \"image/jpeg\",\n \"Cache-Control\": \"public, max-age=86400\",\n },\n });\n } catch {\n return c.notFound();\n }\n});\n\n// Bez tej linii kazdy blad zamienia sie w gole \"Internal Server Error\"\n// i tracisz caly slad stosu w logach.\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","label","marlenka-galeria",[138],"fafcb2f6-f25c-43a9-9e70-23f6f7beff8a","email.ts","eb00bad6-a602-11f1-a11e-1607ee4eb77e",13,["D",1788268479971],4,"email","/**\n * Odbiornik poczty. Uruchamia sie, gdy ktos wysle maila na adres tego vala.\n *\n * Co robi po kolei:\n * 1. wyciaga z maila pierwszy zalacznik bedacy obrazkiem\n * 2. pyta Claude, czy to czarny kot, i prosi o komentarz\n * 3. zapisuje zdjecie i ocene w magazynie plikow\n * 4. kasuje najstarsze wpisy, zeby zmiescic sie w limicie darmowego planu\n *\n * Adresu email tego vala NIE wpisujemy tu recznie. Nadaje go platforma\n * i odczytuje sie go z API (pole links.email).\n */\n\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\nimport Anthropic from \"npm:@anthropic-ai/sdk\";\n\n/**\n * Darmowy plan Val Town daje 10 MB magazynu na CALE konto.\n *\n * Pierwsza wersja trzymala szesc najnowszych zdjec. Test na realnych plikach\n * (2026-09-01) pokazal, ze to zla miara: cztery zdjecia z telefonu zajely\n * 6,9 MB, wiec szosc przekroczylaby limit. Zdjecia roznia sie rozmiarem\n * kilkukrotnie, wiec liczymy BAJTY, nie sztuki.\n *\n * 7 MB, a nie 10, zeby zostawic zapas na zdjecie naglowkowe i na to,\n * ze nowy plik zapisujemy PRZED sprzataniem.\n */\nconst LIMIT_BAJTOW = 7 * 1024 * 1024;\n\n/**\n * Claude przyjmuje tylko te formaty obrazow. Wazne w praktyce: iPhone\n * domyslnie wysyla HEIC, ktorego na tej liscie nie ma. Takie zdjecie\n * i tak zapiszemy, ale bez oceny, z jawna informacja dlaczego.\n */\nconst FORMATY_DLA_AI = [\"image/jpeg\", \"image/png\", \"image/gif\", \"image/webp\"];\n\nexport default async function (e: Email) {\n console.log(`Mail od ${e.from}, temat: ${e.subject ?? \"(brak)\"}`);\n console.log(`Zalacznikow: ${e.attachments?.length ?? 0}`);\n\n const zalaczniki = e.attachments ?? [];\n const obrazek = zalaczniki.find((p) => (p.type ?? \"\").startsWith(\"image/\"));\n\n if (!obrazek) {\n // Glosno, nie po cichu. Bez tego wpisu w logach nie wiedzialbys,\n // czy mail nie doszedl, czy doszedl bez zdjecia.\n console.log(\"Brak zalacznika bedacego obrazkiem. Nic nie zapisuje.\");\n return;\n }\n\n const bajty = new Uint8Array(await obrazek.arrayBuffer());\n console.log(`Obrazek: ${obrazek.name}, typ ${obrazek.type}, ${bajty.length} bajtow`);\n\n const ocena = FORMATY_DLA_AI.includes(obrazek.type)\n ? await ocenZdjecie(bajty, obrazek.type)\n : {\n czarny_kot: false,\n co_widac: `Format ${obrazek.type} nie jest obslugiwany przez model`,\n komentarz:\n \"Nie umiem ocenic tego formatu. Wyslij jako JPEG albo PNG (iPhone: ustawienia aparatu, format Najbardziej zgodny).\",\n };\n\n const id = Date.now().toString();\n\n // Zdjecie jako surowe bajty, opis osobno jako JSON. Dwa klucze,\n // wspolny przyrostek, dzieki czemu latwo je potem sparowac.\n await blob.set(`foto:${id}`, bajty);\n await blob.setJSON(`meta:${id}`, {\n id,\n od: e.from,\n temat: e.subject ?? \"\",\n nazwaPliku: obrazek.name,\n typ: obrazek.type,\n rozmiar: bajty.length,\n kiedy: new Date().toISOString(),\n ...ocena,\n });\n\n console.log(`Zapisano ${id}. Werdykt: czarny kot = ${ocena.czarny_kot}`);\n console.log(`Komentarz: ${ocena.komentarz}`);\n\n await zwolnijMiejsce();\n}\n\n/**\n * Pyta Claude o zdjecie i zwraca ustrukturyzowana ocene.\n *\n * Uzywamy wymuszonego formatu odpowiedzi zamiast prosic o JSON w tresci\n * polecenia. Roznica jest istotna: przy zwyklej prosbie model czasem doda\n * zdanie wstepu i parsowanie sie wywroci. Wymuszony format gwarantuje\n * ksztalt, wiec kod nizej nie musi zgadywac.\n */\nasync function ocenZdjecie(bajty: Uint8Array, typ: string) {\n const klucz = Deno.env.get(\"ANTHROPIC_API_KEY\");\n if (!klucz) {\n return {\n czarny_kot: false,\n co_widac: \"Brak klucza API\",\n komentarz: \"Nie ustawiono ANTHROPIC_API_KEY w zmiennych srodowiskowych vala.\",\n };\n }\n\n const client = new Anthropic({ apiKey: klucz });\n\n try {\n const odpowiedz = await client.messages.create({\n model: \"claude-opus-5\",\n max_tokens: 1024,\n // effort low, bo to prosta klasyfikacja. Domyslne ustawienie jest\n // wyzsze i kosztowaloby wiecej bez zysku na tym zadaniu.\n output_config: { effort: \"low\" },\n system:\n \"Ogladasz zdjecia przyslane do galerii kota o imieniu Marlenka. \" +\n \"Marlenka jest CZARNYM kotem. \" +\n \"Odpowiadasz wylacznie obiektem JSON z polami: \" +\n \"czarny_kot (true/false), co_widac (krotki opis po polsku), \" +\n \"komentarz (jedno zdanie po polsku). \" +\n \"Jesli na zdjeciu jest CZARNY kot, komentarz ma brzmiec doslownie: \" +\n \"\\\"O jaka piekna Marlenka!\\\". \" +\n \"Jesli to kot, ale INNEGO koloru niz czarny, komentarz ma brzmiec doslownie: \" +\n \"\\\"Co to za podrabianiec!!\\\". \" +\n \"Jesli to w ogole nie kot, powiedz zartobliwie, co widzisz. \" +\n \"Zadnego tekstu poza obiektem JSON.\",\n messages: [\n {\n role: \"user\",\n content: [\n {\n type: \"image\",\n source: { type: \"base64\", media_type: typ as any, data: doBase64(bajty) },\n },\n { type: \"text\", text: \"Czy to czarny kot? Odpowiedz obiektem JSON.\" },\n ],\n },\n ],\n });\n\n const tekst = odpowiedz.content\n .filter((b: any) => b.type === \"text\")\n .map((b: any) => b.text)\n .join(\"\")\n .trim();\n\n // Model poproszony o czysty JSON zwykle go daje, ale zabezpieczamy sie\n // na wypadek otoczenia go markdownem.\n const wyciety = tekst.replace(/^```(?:json)?/i, \"\").replace(/```$/, \"\").trim();\n const wynik = JSON.parse(wyciety);\n\n return {\n czarny_kot: Boolean(wynik.czarny_kot),\n co_widac: String(wynik.co_widac ?? \"\"),\n komentarz: String(wynik.komentarz ?? \"\"),\n };\n } catch (blad) {\n // Blad zapisujemy jako tresc oceny, zeby byl widoczny na stronie.\n // Cicha porazka wygladalaby jak zdjecie bez komentarza i szukalbys\n // przyczyny w zlym miejscu.\n console.error(\"Blad przy ocenie:\", blad);\n return {\n czarny_kot: false,\n co_widac: \"Nie udalo sie ocenic\",\n komentarz: `Blad po stronie AI: ${String(blad).slice(0, 200)}`,\n };\n }\n}\n\n/**\n * Zamienia bajty na base64.\n *\n * Naiwna wersja (btoa(String.fromCharCode(...bajty))) przewraca sie na\n * wiekszych plikach, bo przekazanie miliona argumentow do funkcji przepelnia\n * stos. Dlatego przerabiamy porcjami.\n */\nfunction doBase64(bajty: Uint8Array): string {\n let tekst = \"\";\n const PORCJA = 0x8000;\n for (let i = 0; i < bajty.length; i += PORCJA) {\n tekst += String.fromCharCode(...bajty.subarray(i, i + PORCJA));\n }\n return btoa(tekst);\n}\n\n/**\n * Trzyma najnowsze zdjecia do wyczerpania budzetu bajtow, starsze kasuje.\n *\n * Listujemy klucze \"foto:\", bo tylko one niosa realny rozmiar (opisy w JSON\n * waza tyle, co nic). Klucze zawieraja znacznik czasu, wiec sortowanie po\n * nazwie malejaco daje kolejnosc od najnowszego.\n *\n * Zdjecie naglowkowe ma klucz \"hero\", bez przedrostka, wiec ta funkcja\n * nigdy go nie dotknie. To nie przypadek, tylko powod, dla ktorego\n * przedrostki w kluczach maja sens.\n */\nasync function zwolnijMiejsce() {\n const zdjecia = await blob.list(\"foto:\");\n const najnowszeNajpierw = zdjecia.sort((a, b) => b.key.localeCompare(a.key));\n\n let suma = 0;\n const doUsuniecia: typeof najnowszeNajpierw = [];\n\n for (const wpis of najnowszeNajpierw) {\n suma += wpis.size;\n if (suma > LIMIT_BAJTOW) doUsuniecia.push(wpis);\n }\n\n if (doUsuniecia.length === 0) {\n console.log(`Magazyn: ${(suma / 1048576).toFixed(1)} MB, mieszczymy sie w limicie.`);\n return;\n }\n\n for (const wpis of doUsuniecia) {\n const id = wpis.key.replace(\"foto:\", \"\");\n await blob.delete(wpis.key);\n try {\n await blob.delete(`meta:${id}`);\n } catch {\n // Brak opisu przy istniejacym pliku to nie powod do przerywania.\n }\n console.log(\n `Usunieto ${id} (${(wpis.size / 1048576).toFixed(1)} MB), zeby zmiescic sie w limicie.`,\n );\n }\n}\n",[150],"6e6d52f6-52dd-4756-b1c8-1f4161c387d2","README.md","01a05cfa-f041-726f-9bb7-b0a756b5c2bb",1,["D",1788266344374],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"root.tsx\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n root.tsx ← HTML shell (stamps immutable asset URLs)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/root.tsx`** is the HTML shell — it loads Twind and stamps\n immutable asset URLs for the favicon and React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n\nTemplate updates and upgrade paths for existing remixes: [CHANGELOG.md](/CHANGELOG.md)\n",[159],"60338e85-0b1a-4f06-ac0c-a0aac3e324f9","CHANGELOG.md","01a05cfa-f041-726f-9bb7-ac96b5df0968",["D",1788266344374],"# Changelog\n\n## 2026-07-30 — Immutable asset caching\n\nFrontend files are now served at version-addressed URLs\n(`/__immutable/45/frontend/index.tsx`) with\n`Cache-Control: public, max-age=31536000, immutable`, so repeat visits load the\nwhole client graph from the browser cache — roughly 3× faster (~665ms → ~157ms\nmeasured). Publishing your val bumps its version, which changes every URL, so\ncaches invalidate automatically. Old-version URLs return 404 after a publish\n(like Next.js build assets); a reload picks up the new version.\n\nWhat changed in the template:\n\n- `frontend/index.html` → [`frontend/root.tsx`](/frontend/root.tsx): the HTML\n shell is now JSX and stamps asset URLs with `immutableFileUrl()`\n- [`index.ts`](/index.ts): serves `Root()` at `/`, and one\n `app.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path))` route\n serves all frontend files\n\n### Upgrading an existing remix\n\nYour copy of this template doesn't update automatically. Two options:\n\n**Minimal (most of the benefit):** point both routes at `serveImmutableFile` —\nyour existing bare URLs redirect into versioned space, the new route serves\nthem, and the whole module graph gets cached (costs one redirect per page view):\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\n\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/frontend/**/*\", (c) => serveImmutableFile(c.req.path)); // was serveFile\n```\n\n**Full upgrade (also removes the redirect):** three self-contained steps —\nno other files needed. Adjust the ``, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter\n

Diff · v14