`, 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

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_262":263,"_264":265},"routes/_app.x.$handle.$name",{"_104":103,"_32":49,"_113":94,"_27":114,"_13":14,"_115":-5,"_11":116,"_117":118,"_119":120,"_121":122,"_123":124,"_21":-5,"_125":-5,"_126":-5,"_127":25,"_128":129,"_130":63,"_131":-5,"_132":-5,"_133":134},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_47":48,"_32":49,"_36":50,"_51":-5,"_52":25,"_53":54,"_55":54,"_56":57,"_58":-5,"_18":59,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":25},"version",5,"changes",[19,20],"aiChatInfo","userId",{"_21":41,"_23":-7,"_24":25,"_26":25,"_27":42,"_29":42},{"_21":22,"_23":-7,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":-5,"_36":37,"_38":14,"_39":40,"_24":25},"previous","deleted",false,"deletedHere","path","data","latestPath","fileId","d219fab1-7b46-494f-bb14-422f9722d89a","name","fileType","directory","content","createdAt",["D",1789325607059],"branchVersion","branchId","b5973051-b776-4cf7-b052-057af2879abb",{"_30":43,"_32":44,"_33":21,"_35":45,"_36":46,"_38":14,"_39":40,"_24":25},"data/situations.txt","6779b8ce-afa4-11f1-8b3e-1607ee4eb77e","situations.txt","[{\"+\"\"n\"\"+\": 1, \"text\": \"Situation 1 Beschreibung: Sie arbeiten in einer Konditorei. Heute haben Sie Würmer/ kleine Tierchen im Mehl im Lager gefunden. Es muss schnell eine Lösung gefunden werden. Jetzt können Sie damit nicht backen, aber Sie haben wie immer viele Vorbestellungen für Kuchen. Stichpunkte: 1. Chef: Wie kontaktieren? 2. Kunden: Wie informieren? Was anbieten? 3. Lager: Was tun? 4. Neues Mehl: Woher nehmen? Wo lagern? ____________________________________\"}, {\"n\": 2, \"text\": \"Situation 2 Beschreibung: Sie arbeiten in einer Bäckerei. Der Backofen ist kaputt, und Sie müssen entscheiden, wie der Betrieb fortgesetzt wird. Stichpunkte: 1. Den Laden öffnen. 2. Wen anrufen? 3. Was verkaufen? Preise. 4. Langfristig: Welche andere Handwerksfirma? ____________________________________\"}, {\"n\": 3, \"text\": \"Situation 3 Beschreibung: Sie arbeiten in einem Produktionsunternehmen, und es gibt ständige Konflikte zwischen drei Mitarbeiterinnen im Team. Dies beeinträchtigt das Arbeitsklima und die Arbeitsleistung. Stichpunkte: 1. Mit wem Gespräche führen. 2. Jobrotation möglich. 3. Produktionsleiter ansprechen. 4. Wie Atmosphäre verbessern. 5. Gruppenaktivitäten. ___________________________________ 186\"}, {\"n\": 4, \"text\": \"Situation 4 Beschreibung: Sie arbeiten in einem Altenheim. Einige Bewohner beschweren sich über das (geschmackliche) Essen, was dazu führt, dass sie weniger essen und abnehmen. Stichpunkte: 1. Gespräch mit dem Küchenchef. 2. Neue Rezeptideen. 3. Lieblingsgericht der Bewohner erfragen. 4. Lebensmittel: Wo einkaufen? 5. Vegetarische oder vegane Speisen. ____________________________________\"}, {\"n\": 5, \"text\": \"Situation 5 Beschreibung: Sie arbeiten bei einem Fastfood-Service und nutzen neue Transportboxen. Diese öffnen sich beim Transport, und das Essen kommt kalt bei den Kunden an. / Sie arbeiten in einem Pizzaservice und haben seit einiger Zeit neue Transportboxen im Einsatz. Leider gehen diese während des Transports leicht auf, sodass das Essen kalt bei den Kunden ankommt. Stichpunkte: 1. Kurzfristig: Wie Ware transportieren? 2. Kunden: Wie kontaktieren und was anbieten? 3. Hersteller: Was verlangen (fordern)? 4. Langfristig: andere Transportboxen suchen. ____________________________________\"}, {\"n\": 6, \"text\": \"Situation 6 Beschreibung: Sie arbeiten in einem Restaurant, und am Abend ist eine Großveranstaltung geplant. Leider gibt es einen Wasserschaden, weshalb die Veranstaltung abgesagt werden muss. Stichpunkte: 1. Wasserschaden: Was tun? Handwerker: Wie finden? 2. Kunden: Wie informieren und was anbieten? 3. Lebensmittel: Was damit tun? 4. Aushilfskräfte: Wie kontaktieren? 5. Langfristige Problemlösungen. ____________________________________\"}, {\"n\": 7, \"text\": \"Situation 7 Beschreibung: Ein Mitarbeiter hat eine Heizung für einen Kunden installiert, aber sie funktioniert nicht richtig. (In allen Wohnungen die Batterien nicht funktionieren) Stichpunkte: 1. Was macht die Firma? 2. Was kann der Mitarbeiter anbieten? 3. Langfristige Lösung. 4. Was fordern? ____________________________________\"}, {\"n\": 8, \"text\": \"Situation 8 Beschreibung: Sie arbeiten in einem Möbelunternehmen und verarbeiten Online-Bestellungen. Die neu installierte Bestellsoftware hat technische Fehler, wodurch viele Aufträge verloren gegangen sind. Stichpunkte: 1. Verlorene Bestellungen: Was tun? 2. Kunden: Wie informieren und was anbieten? 3. Software-Firma: Wie kontaktieren und was fordern? 4. Langfristig: andere Softwarelösungen in Betracht ziehen. 187\"}, {\"n\": 9, \"text\": \"Situation 9 Beschreibung: Sie arbeiten in einem Krankenhaus, und es gibt eine Beschwerde von Patienten. (Patienten beschweren sich über einen Kollegen.) Stichpunkte: 1. Wo liegt die Beschwerde? 2. Was anbieten? 3. Kurzfristige Lösung. 4. Langfristige Lösung. ____________________________________\"}, {\"n\": 10, \"text\": \"Situation 10 Beschreibung: Sie arbeiten in einer Reinigungsfirma, und ein wichtiges Reinigungsgerät (ein Gerät für Teppichboden) ist kaputt. Es gibt jedoch dringende Aufträge. Stichpunkte: 1. Kunden: Was anbieten? 2. Vorübergehende Lösung? 3. Alternative Geräte? 4. Langfristige Lösung. ____________________________________\"}, {\"n\": 11, \"text\": \"Situation 11 Beschreibung: Sie arbeiten in einem Café, und Kunden beschweren sich über die Unfreundlichkeit eines Kollegen oder einer Kollegin. Stichpunkte: 1. Problem ansprechen. 2. Chef informieren. 3. Kunden die Situation erklären. 4. Unterstützung für den Kollegen oder die Kollegin. ____________________________________\"}, {\"n\": 12, \"text\": \"Situation 12 Beschreibung: Sie leiten einen Supermarkt, und Kunden beschweren sich über fehlende oder falsch einsortierte Lebensmittel. Stichpunkte: 1. Beschwerden: welche Regale betroffen? 2. Teambesprechung: Wie ist die Maßnahmen zur Verbesserung. 3. Kunden: Kommunikation. ____________________________________\"}, {\"n\": 13, \"text\": \"Situation 13 Beschreibung: Sie arbeiten in einem Restaurant, und der Geschirrspüler ist defekt. Das Geschirr muss manuell nachgespült werden. / Sie arbeiten zusammen in einem Café. Meist hat das Geschirr nach der Reinigung mit dem Geschirrspüler noch Rückstände, sodass man es noch einmal mit der Hand spülen muss. Stichpunkte: 1. Geschirrspüler defekt: Reparatur. 2. Neuen Geschirrspüler kaufen. 3. Alternatives Reinigungsmittel. 4. Aushilfen besser anlernen. ____________________________________\"}, {\"n\": 14, \"text\": \"Situation 14 Beschreibung: Sie arbeiten bei einem Pizza-Lieferdienst, und Kunden beschweren sich über falsche oder kalte Lieferungen. Stichpunkte: 1. Falsche oder späte Lieferungen: Was tun? 2. Kunden: Wie reagieren und was anbieten? 3. Langfristig: Was tun, damit Pizzen richtig und pünktlich geliefert werden? 188 ____________________________________\"}, {\"n\": 15, \"text\": \"Situation 15 Beschreibung: Der Drucker in Ihrem Geschäft funktioniert nicht, und es gibt viele Kunden. Stichpunkte: 1. Kunden: Wie reagieren? 2. Kunden: Was anbieten? 3. Techniker kontaktieren. ____________________________________\"}, {\"n\": 16, \"text\": \"Situation 16 Beschreibung: Sie arbeiten in einem großen Hotel. Manche Gäste haben sich beschwert, dass der Zimmerservice seine Arbeit nicht gut macht. Im Badezimmer werden schmutzige Handtücher oft nicht ausgetauscht, und die Betten sind oft nicht ordentlich hergerichtet. Stichpunkte: 1. Schlechter Zimmerservice: Was tun? 2. Gäste: Wie kontaktieren? 3. Entschädigung anbieten? 4. Langfristig: Was tun, damit Zimmer stets ordentlich geputzt und aufgeräumt werden? ____________________________________\"}, {\"n\": 17, \"text\": \"Situation 17 Beschreibung: Sie arbeiten in einem kleinen Lebensmittelgeschäft. Manche Kunden und Kundinnen haben sich darüber beschwert, dass gekaufte Lebensmittel nicht mehr haltbar waren. Stichpunkte: 1. Lebensmittel: Was tun? 2. Kunden und Kundinnen: Wie kontaktieren? 3. Entschädigung anbieten? 4. Langfristig: Was tun, damit Haltbarkeit stets gewährleistet ist? _____________________________________\"}, {\"n\": 18, \"text\": \"Situation 18 Beschreibung: Sie arbeiten bei einem Malerbetrieb und sollten das Wohnzimmer einer Kundin streichen. Die Kundin hat sich beschwert, dass die Arbeiten sehr schlecht ausgeführt wurden. Es gibt an einigen Stellen an der Wand Flecken. Außerdem ist bei den Malerarbeiten eine Lampe der Kundin kaputtgegangen. Stichpunkte: 1. Schlecht ausgeführte Arbeit: Was tun? 2. Kaputte Lampe: Ersetzen? 3. Wie bei Kundin entschuldigen? 4. Langfristig: Wie Beschwerden vermeiden? ____________________________________\"}, {\"n\": 19, \"text\": \"Situation 19 Beschreibung: Sie arbeiten in einem kleinen Café. Einige Gäste haben sich beschwert, dass der Kaffee dort in letzter Zeit überhaupt nicht mehr schmeckt. Sie möchten den Kaffee am Ende nicht bezahlen und sind sehr unzufrieden. Stichpunkte: 1. Kaffee: Was tun? 2. Kaffeeautomaten kontrollieren? 3. Wie bei Gästen entschuldigen? 4. Langfristig: Wie Qualität gewährleisten? ____________________________________ 189\"}, {\"n\": 20, \"text\": \"Situation 20 Beschreibung: Sie arbeiten bei einem städtischen Verkehrsbetrieb. Einige Fahrgäste haben sich beschwert, dass die Busfahrer und Busfahrerinnen oft zu früh losfahren, manchmal schon 3 Minuten vor der angegebenen Zeit. Dadurch verpassen viele Fahrgäste ihren Bus. Stichpunkte: 1. Zu frühe Abfahrtszeiten: Was tun? 2. Mit Busfahrern / -fahrerinnen sprechen? 3. Wie bei Fahrgästen entschuldigen? 4. Langfristig: Wie Zeiten einhalten? ____________________________________\"}, {\"n\": 21, \"text\": \"Situation 21 Beschreibung: Sie arbeiten bei einer Sprachschule. Einige Schüler und Schülerinnen haben sich beschwert, dass es oft sehr laut ist, weil es draußen eine Baustelle gibt. Deshalb können sie sich nicht gut konzentrieren. Stichpunkte: 1. Lärm von Baustelle: Was tun? 2. Andere Räume? 3. Wie bei Schülern / Schülerinnen entschuldigen? 4. Langfristig: Wie Lärm / Störungen vermeiden? ____________________________________\"}, {\"n\": 22, \"text\": \"Situation 22 Beschreibung: Sie arbeiten bei einem Elektrofachgeschäft. Einige Kunden und Kundinnen haben sich beschwert, dass sie oft keinen Verkäufer oder keine Verkäuferin finden, wenn sie Hilfe brauchen. Auch die Beratung sei oft schlecht. Stichpunkte: 1. Zu wenig Verkäufer/innen: Was tun? 2. Schlechte Beratung: Was tun? 3. Wie bei Kund/innen entschuldigen? 4. Langfristig: Wie Service verbessern? _____________________________________\"}, {\"n\": 23, \"text\": \"Situation 23 Beschreibung: Sie arbeiten bei einem Kindergarten. Einige Eltern haben sich beschwert, dass ein neuer Erzieher sehr unfreundlich zu den Kindern ist. Die Kinder haben teilweise sogar Angst, in den Kindergarten zu gehen. Stichpunkte: 1. Unfreundlicher Erzieher: Was tun? 2. Kündigung? / Neuen Erzieher einstellen? 3. Wie bei Eltern entschuldigen? 4. Wie mit Kindern umgehen? _____________________________________\"}, {\"n\": 24, \"text\": \"Situation 24 Beschreibung: Sie arbeiten in einer großen Firma. Einige Kunden und Kundinnen haben sich beschwert, dass der Kaffeeautomat nicht funktioniert. Außerdem funktioniert auch der Aufzug oft nicht. Stichpunkte: 1. Kaffeeautomat: Was tun? 2. Aufzug: Techniker rufen? 3. Wie bei Kunden / Kundinnen entschuldigen? 4. Langfristig: Wie Probleme vermeiden? ____________________________________ 190\"}, {\"n\": 25, \"text\": \"Situation 25 Beschreibung: Sie arbeiten in einem Hotel. Einige Gäste haben sich beschwert, dass das Essen vom Buffet oft kalt ist. Außerdem gibt es auf den Zimmern manchmal kein WLAN und die Gäste können nicht im Internet surfen. Stichpunkte: 1. Kaltes Essen: Was tun? 2. Kein WLAN: Welche Lösung? 3. Entschädigung / Rabatt für Gäste? 4. Langfristig: Wie Service verbessern? ____________________________________\"}, {\"n\": 26, \"text\": \"Situation 26 Beschreibung: Sie arbeiten in einem Altenheim. Einige Bewohner haben sich beschwert, dass das Essen immer gleich ist und oft nicht schmeckt. Stichpunkte: 1. Essen: Was tun? 2. Bewohner: Umfragen? Wie kontaktieren? 3. Wie entschuldigen? 4. Langfristig: Menü ändern? Neue Rezepte finden? ________________________________________\"}, {\"n\": 27, \"text\": \"Situation 27 Beschreibung: Sie arbeiten zusammen für einen Onlineshop. Einige Kunden und Kundinnen haben sich darüber beschwert, dass bestellte Ware schlecht verpackt oder in beschädigtem Zustand bei ihnen angekommen ist. Stichpunkte: 1. Beschädigte Ware: Was tun? 2. Kunden und Kundinnen: Wie kontaktieren? Was als Entschädigung anbieten? 3. Langfristig: Was tun, damit Ware in einwandfreiem Zustand ankommt? ___________________________________\"}, {\"n\": 28, \"text\": \"Situation 28 Beschreibung: Sie arbeiten in einem kleinen Fitnessstudio. Einige Kundinnen und Kunden haben sich beschwert, dass die Fitness-Geräte zu alt sind und schlechte Qualität haben. Außerdem findet man oft keine/n Trainer/in, wenn man eine Frage hat. Stichpunkte: 1. Fitness-Geräte: Was tun? 2. Wie Service im Studio verbessern? 3. Wie entschuldigen? Entschädigung anbieten? 4. Langfristig: Was tun, damit Kundinnen und Kunden zufrieden sind? ____________________________________\"}, {\"n\": 29, \"text\": \"Situation 29 Beschreibung: Sie sind in einem großen Produktionsbetrieb tätig. Ein bedeutender ausländischer Kunde plant nächsten Monat einen viertägigen Aufenthalt in Ihrer Stadt. Ihr Vorgesetzter hat Sie beauftragt, die Organisation dieses Aufenthalts zu übernehmen. Stichpunkte: 1. Übernachtungsmöglichkeiten? 2. Wie abholen? 3. Wen treffen? 4. Was zeigen? Abendprogramm? ____________________________________ 191\"}, {\"n\": 30, \"text\": \"Situation 30 Beschreibung: Sie arbeiten zusammen in einer Bäckerei, und einer Ihrer Kolleginnen kommt morgens immer wieder zu spät, obwohl Sie sie bereits mehrmals darauf hingewiesen haben. Die Arbeit zu zweit zu bewältigen, wird dadurch zu einer Herausforderung. Stichpunkte: 1. Kollegin: Was tun? 2. Chef*in: Wie Problem ansprechen? 3. Kurzfristig: Wie reagieren? 4. Arbeitsablauf: Was umorganisieren? 5. Langfristig: Was ändern? ____________________________________\"}, {\"n\": 31, \"text\": \"Situation 31 Beschreibung: Sie arbeiten zusammen in einem großen Frisörsalon und benutzen seit einiger Zeit neue Produkte (Haarfarben). Einige Kundinnen und Kunden haben sich beschwert, dass die Haarfarben nicht lange halten und schnell verblassen. Stichpunkte: 1. Haarfarben: Was tun? 2. Kunden und Kundinnen: Wie kontaktieren? 3. Entschädigung anbieten? 4. Langfristig: Welche Produkte/Haarfarben im Salon. _____________________________________\"}, {\"n\": 32, \"text\": \"Situation 32 Beschreibung: Sie arbeiten als Kellner/in in einem Restaurant. Seit einiger Zeit steht eine neue Orangenlimonade auf der Getränkekarte, die den meisten Gästen nicht schmeckt. Stichpunkte: 1. Limonade: Was tun? 2. Kunden: Wie reagieren? Was anbieten? 3. Lieferanten: Wie kontaktieren? Was fordern? 4. Langfristig: Welche Limonade? 5. Welcher Lieferant? ____________________________________\"}, {\"n\": 33, \"text\": \"Situation 33 Beschreibung: Sie arbeiten in einem Restaurant, das ein „All you can eat“-Buffet anbietet. Einige Kunden haben sich darüber beschwert, dass es zu wenig Auswahl gibt und fast alle Gerichte mit Fleisch sind. Stichpunkte: 1. Buffet: Um welche Speisen erweitern? 2. Kunden: Wie Wünsche erfragen? 3. Koch: Alternativen besprechen? 4. Langfristig: Lieferant für Gemüse/Obst ansprechen? _____________________________________\"}, {\"n\": 34, \"text\": \"Situation 34 Beschreibung: Sie leiten einen Supermarkt und arbeiten oft mit Aushilfskräften. Kunden beschweren sich, dass in den Regalen oft Lebensmittel fehlen oder falsch eingeordnet sind. Stichpunkte: 1. Beschwerden: Welche Regale? 2. Teambesprechung: Wie ist die Situation? 3. Maßnahmen/Verbesserungen: Welche? Wie? 4. Kunden: Situation erklären? ____________________________________ 192\"}, {\"n\": 35, \"text\": \"Situation 35 Beschreibung: Sie arbeiten in einem Großraumbüro. In letzter Zeit gab es wegen der hohen Lautstärke oft Beschwerden von Kollegen, die sich nicht auf ihre Arbeit konzentrieren konnten. Stichpunkte: 1. Kollegen: Was stört? 2. Andere Kollegen: Wie ansprechen? Was tun? 3. Büro: Alternative? 4. Langfristig: Wie Lärm reduzieren? 5. Wie konzentriert arbeiten? _____________________________________\"}, {\"n\": 36, \"text\": \"Situation 36 Beschreibung: Sie arbeiten in einem Kindergarten. Einige Eltern haben sich über das Essen des neuen Lieferanten beschwert, weil immer eine ungesunde Süßspeise wie Pudding enthalten ist. Stichpunkte: 1. Zu viel Zucker: Was tun? 2. Eltern: Wie ansprechen? 3. Einzeln oder zusammen? 4. Lieferanten: Was fordern? 5. Langfristig: Welcher Lieferant? ________________________________\"}]",["D",1789325607059],"id","c749b40f-7278-4bfc-83e9-6974490c73b3","dtb-b2-pruefungstrainer",["D",1789323849335],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","DTB B2 Prüfungstrainer mit Wortschatz","imageUrl","8c33d99c-cc31-46f4-a129-e6d98b973d4a","pinnedFileId","01a09c03-3284-7774-b28c-6141506b5175","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","01a09bf4-5307-72fc-81b7-e47b8faddca9","tursoName","c749b40f72784bfc83e96974490c73b3","tursoHostname","c749b40f72784bfc83e96974490c73b3-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789498929834],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_104":103,"_112":108},"org",{"_104":103,"_105":106,"_107":108,"_18":59,"_109":110,"_111":25},"branch",{"_13":93,"_32":94,"_47":40,"_95":48,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":49,"_102":103},"isOwned",27,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","namiko","handle","displayName","Анастасия Герасименко","avatar","https://lh3.googleusercontent.com/a/ACg8ocLqR2mKHWCHT25UMGhM4m4R5FrH48n20lCvxWsDHoikwFonX_Me=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_47":48,"_32":49,"_36":257,"_51":-5,"_52":25,"_53":54,"_55":54,"_56":57,"_58":-5,"_18":59,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":258,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":259,"_88":260,"_90":261,"_92":25},"tree",[181,183,190,191,192],"files",[181,182,183,184,185,186,187,188,189,190,191,192],"counts",{"_171":67,"_172":146,"_173":67,"_174":175,"_176":177},"contents",[135,136,137,138,139],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_47":168,"_32":28,"_30":31,"_142":-5,"_39":40,"_38":14,"_144":63,"_36":169,"_13":67,"_33":34,"_35":-5,"_24":25,"_149":-5,"_27":170},{"_47":163,"_32":164,"_30":165,"_142":-5,"_39":40,"_38":146,"_144":63,"_36":166,"_13":67,"_33":34,"_35":-5,"_24":25,"_149":-5,"_27":167},{"_47":157,"_32":158,"_30":159,"_142":-5,"_39":40,"_38":146,"_144":63,"_36":160,"_13":67,"_33":21,"_35":161,"_24":25,"_149":-5,"_27":162},{"_47":151,"_32":152,"_30":153,"_142":-5,"_39":40,"_38":146,"_144":63,"_36":154,"_13":67,"_33":21,"_35":155,"_24":25,"_149":-5,"_27":156},{"_47":140,"_32":141,"_30":61,"_142":-5,"_39":40,"_38":143,"_144":25,"_36":145,"_13":146,"_33":147,"_35":148,"_24":25,"_149":-5,"_27":150},"03abde38-0f31-47d6-9ba3-92b9b3cc5b53","index.ts","parentId",2,"latest",["D",1789324047542],1,"http","import { parseVal, serveFile, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\n\napp.get(\"/\", (c) => c.html(Root()));\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path));\n\napp.get(\"/api/translate\", async (c) => {\n const q = (c.req.query(\"q\") || \"\").trim();\n if (!q) return c.json({ error: \"Missing q\" }, 400);\n try {\n const r = await fetch(`https://api.mymemory.translated.net/get?q=${encodeURIComponent(q)}&langpair=de|ru`);\n const data = await r.json();\n const translated = data?.responseData?.translatedText || \"\";\n return c.json({ source: q, translation: translated });\n } catch (e) {\n return c.json({ error: \"Translation service unavailable\" }, 502);\n }\n});\n\napp.onError((err) => Promise.reject(err));\nexport default app.fetch;\n","label",[141],"ff7b69e8-3dd0-48d8-b61f-4364fd4b70b4","README.md","01a09c03-3284-7774-b28c-5f66369bbf24",["D",1789323849335],"# 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",[152],"34bf620a-b868-49cb-a033-3d034d489dbf","CHANGELOG.md","01a09c03-3284-7774-b28c-599d301570a4",["D",1789323849335],"# 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 · v5