[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_434":435,"_436":437},"routes/_app.x.$handle.$name",{"_113":112,"_34":63,"_122":103,"_29":71,"_13":14,"_123":-5,"_11":124,"_125":126,"_127":128,"_129":130,"_131":132,"_22":-5,"_133":-5,"_134":-5,"_135":27,"_136":137,"_138":139,"_140":-5,"_141":-5,"_142":143},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_61":62,"_34":63,"_41":64,"_65":-5,"_66":27,"_67":68,"_69":68,"_70":71,"_72":-5,"_18":73,"_74":-5,"_75":27,"_76":-5,"_77":-5,"_78":79,"_80":81,"_82":-5,"_83":-5,"_84":-5,"_85":-5,"_86":87,"_88":87,"_89":90,"_91":90,"_92":90,"_93":87,"_94":87,"_95":96,"_97":98,"_99":100,"_101":27},"version",5,"changes",[19,20,21],"aiChatInfo","userId",{"_22":53,"_24":54,"_26":27,"_28":27,"_29":55,"_31":55},{"_22":46,"_24":47,"_26":27,"_28":27,"_29":48,"_31":48},{"_22":23,"_24":25,"_26":27,"_28":27,"_29":30,"_31":30},"file",{"_32":33,"_34":35,"_36":37,"_38":40,"_41":42,"_43":14,"_44":45,"_26":27},"previous",{"_32":33,"_34":35,"_36":37,"_38":39},"deleted",false,"deletedHere","path","components/CultureShelf.tsx","latestPath","fileId","ba4d6d80-1b15-11f1-9492-42dde27851f2","name","CultureShelf.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport type { CultureShelfItem } from \"../types.ts\";\nimport { LANG_BORDER, LANG_BADGE_COLORS, LANG_LABELS } from \"../lang.ts\";\n\ninterface CultureShelfProps {\n items: CultureShelfItem[];\n}\n\nconst typeIcons: Record = {\n quote: \"\\u201C\",\n note: \"\\uD83D\\uDCDD\",\n link: \"\\uD83D\\uDD17\",\n};\n\nexport function CultureShelf({ items }: CultureShelfProps) {\n return (\n

\n {items.map((item, i) => {\n const borderClass = LANG_BORDER[item.lang];\n const badgeClass = LANG_BADGE_COLORS[item.lang];\n\n return (\n \n

\n {typeIcons[item.type]}\n \n {LANG_LABELS[item.lang]}\n \n

{item.title}

{item.content}

\n {item.source && (\n

\n — {item.source}\n

\n )}\n

\n );\n })}\n \n );\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport type { CultureShelfItem } from \"../types.ts\";\nimport { LANG_BORDER, LANG_BADGE_COLORS, LANG_LABELS } from \"../lang.ts\";\n\ninterface CultureShelfProps {\n items: CultureShelfItem[];\n}\n\nconst typeIcons: Record = {\n quote: \"\\u201C\",\n note: \"\\uD83D\\uDCDD\",\n link: \"\\uD83D\\uDD17\",\n};\n\nexport function CultureShelf({ items }: CultureShelfProps) {\n return (\n

\n {items.map((item, i) => {\n const borderClass = LANG_BORDER[item.lang];\n const badgeClass = LANG_BADGE_COLORS[item.lang];\n\n return (\n \n

\n {typeIcons[item.type]}\n \n {LANG_LABELS[item.lang]}\n \n

{item.title}

{item.content}

\n {item.source && (\n

\n — {item.source}\n

\n )}\n

\n );\n })}\n \n );\n}\n","createdAt",["D",1773420245163],"branchVersion","branchId","ad30d28e-1b12-11f1-9d9e-42dde27851f2",{"_32":49,"_34":48,"_36":37,"_38":51,"_41":52,"_43":14,"_44":45,"_26":27},{"_32":49,"_34":48,"_36":37,"_38":50},"index.tsx","019cce74-2a39-76a3-acb5-b9adada3fea0","/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { Button } from \"./components/Button.tsx\";\nimport { Notification } from \"./components/Notification.tsx\";\nimport { Container } from \"./components/ui/index.ts\";\nimport { CultureShelf } from \"./components/CultureShelf.tsx\";\nimport { wordOfTheWeek } from \"./data.ts\";\nimport { LANG_BADGE_COLORS, LANG_BG_LIGHT, LANG_BORDER, LANG_LABELS, LANG_TEXT } from \"./lang.ts\";\nimport type { Language, WordMeaning } from \"./types.ts\";\n\nconst LANG_FLAGS: Record = {\n en: \"\\u{1F1EC}\\u{1F1E7}\",\n nl: \"\\u{1F1F3}\\u{1F1F1}\",\n tr: \"\\u{1F1F9}\\u{1F1F7}\",\n};\n\nfunction FitText({ text, className }: { text: string; className?: string }) {\n const ref = useRef(null);\n\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n el.style.fontSize = \"\";\n let size = parseFloat(getComputedStyle(el).fontSize);\n while (el.scrollWidth > el.clientWidth && size > 16) {\n size -= 1;\n el.style.fontSize = `${size}px`;\n }\n }, [text]);\n\n return

{text}

;\n}\n\nfunction LangCard({\n meaning,\n isActive,\n onClick,\n}: {\n meaning: WordMeaning;\n isActive: boolean;\n onClick: () => void;\n}) {\n const borderClass = LANG_BORDER[meaning.lang];\n const badgeClass = LANG_BADGE_COLORS[meaning.lang];\n const textClass = LANG_TEXT[meaning.lang];\n const bgLightClass = LANG_BG_LIGHT[meaning.lang];\n\n return (\n \n {/* Active content */}\n \n \n {LANG_LABELS[meaning.lang]}\n \n \n

\n \n {meaning.phonetic.ipa}\n \n

\n {meaning.phonetic.approximate}\n

\n \n {meaning.partOfSpeech}\n \n \n {/* Inactive content */}\n \n {LANG_FLAGS[meaning.lang]}\n {LANG_LABELS[meaning.lang]}\n {meaning.word}\n \n \n );\n}\n\nfunction MeaningPanel({ meaning }: { meaning: WordMeaning }) {\n const badgeClass = LANG_BADGE_COLORS[meaning.lang];\n\n return (\n

\n \n {meaning.partOfSpeech}\n \n {meaning.article && (\n \n {meaning.article}\n \n )}\n {meaning.gender && (\n ({meaning.gender})\n )}\n

{meaning.definition}

\n {meaning.examples.map((ex, i) => (\n \n

{ex.text}

\n {ex.translation && (\n

\n {ex.translation}\n

\n )}\n \n ))}\n

\n );\n}\n\nfunction App() {\n const [activeLang, setActiveLang] = useState(wordOfTheWeek.primary.lang);\n const [notification, setNotification] = useState<{\n message: string;\n type: \"success\" | \"info\" | \"warning\";\n } | null>(null);\n\n const allMeanings: WordMeaning[] = [\n wordOfTheWeek.primary,\n ...wordOfTheWeek.translations,\n ];\n const activeMeaning = allMeanings.find((m) => m.lang === activeLang)!;\n const filteredCultureItems = wordOfTheWeek.cultureShelf.filter(\n (item) => item.lang === activeLang,\n );\n\n return (\n \n {/* Word display: stable layout — selected expands, others shrink */}\n

\n {allMeanings.map((m) => (\n setActiveLang(m.lang)}\n />\n ))}\n

\n\n

\n \n

\n\n {/* Culture Shelf */}\n {filteredCultureItems.length > 0 && (\n \n )}\n\n {/* Bottom bar */}\n

\n \n \n \n setNotification({ message: \"Share link copied!\", type: \"success\" })\n }\n variant=\"primary\"\n >\n Share\n \n

\n\n {notification && (\n setNotification(null)}\n />\n )}\n \n );\n}\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { Button } from \"./components/Button.tsx\";\nimport { Notification } from \"./components/Notification.tsx\";\nimport { Container } from \"./components/ui/index.ts\";\nimport { CultureShelf } from \"./components/CultureShelf.tsx\";\nimport { wordOfTheWeek } from \"./data.ts\";\nimport { LANG_BADGE_COLORS, LANG_BG_LIGHT, LANG_BORDER, LANG_LABELS, LANG_TEXT } from \"./lang.ts\";\nimport type { Language, WordMeaning } from \"./types.ts\";\n\nconst LANG_FLAGS: Record = {\n en: \"\\u{1F1EC}\\u{1F1E7}\",\n nl: \"\\u{1F1F3}\\u{1F1F1}\",\n tr: \"\\u{1F1F9}\\u{1F1F7}\",\n};\n\nfunction FitText({ text, className }: { text: string; className?: string }) {\n const ref = useRef(null);\n\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n el.style.fontSize = \"\";\n let size = parseFloat(getComputedStyle(el).fontSize);\n while (el.scrollWidth > el.clientWidth && size > 16) {\n size -= 1;\n el.style.fontSize = `${size}px`;\n }\n }, [text]);\n\n return

{text}

\n \n {meaning.phonetic.ipa}\n \n

\n {meaning.phonetic.approximate}\n

\n \n {meaning.partOfSpeech}\n \n \n {/* Inactive content */}\n \n {LANG_FLAGS[meaning.lang]}\n {LANG_LABELS[meaning.lang]}\n {meaning.word}\n \n \n );\n}\n\nfunction MobileTabBar({\n meanings,\n activeLang,\n onSelect,\n}: {\n meanings: WordMeaning[];\n activeLang: Language;\n onSelect: (lang: Language) => void;\n}) {\n return (\n

\n {meanings.map((m) => {\n const isActive = m.lang === activeLang;\n return (\n onSelect(m.lang)}\n className={[\n \"flex-1 py-3 text-center text-sm font-medium border-b-2 transition-colors\",\n isActive\n ? `${LANG_BORDER[m.lang]} ${LANG_TEXT[m.lang]}`\n : \"text-gray-400 border-transparent\",\n ].join(\" \")}\n >\n {LANG_FLAGS[m.lang]} {m.lang.toUpperCase()}\n \n );\n })}\n

\n );\n}\n\nfunction MobileCard({ meaning }: { meaning: WordMeaning }) {\n const borderClass = LANG_BORDER[meaning.lang];\n const badgeClass = LANG_BADGE_COLORS[meaning.lang];\n\n return (\n

\n \n {LANG_LABELS[meaning.lang]}\n \n \n

\n {meaning.phonetic.ipa}\n

{meaning.phonetic.approximate}

\n \n {meaning.partOfSpeech}\n \n

\n );\n}\n\nfunction MeaningPanel({ meaning }: { meaning: WordMeaning }) {\n const badgeClass = LANG_BADGE_COLORS[meaning.lang];\n\n return (\n

\n \n {meaning.partOfSpeech}\n \n {meaning.article && (\n \n {meaning.article}\n \n )}\n {meaning.gender && (\n ({meaning.gender})\n )}\n

{meaning.definition}

\n {meaning.examples.map((ex, i) => (\n \n

{ex.text}

\n {ex.translation && (\n

\n {ex.translation}\n

\n )}\n \n ))}\n

\n \n \n

\n\n {/* Desktop: side-by-side cards */}\n

\n {allMeanings.map((m) => (\n setActiveLang(m.lang)}\n />\n ))}\n

\n\n

\n \n

\n\n {/* Culture Shelf */}\n {filteredCultureItems.length > 0 && (\n \n )}\n\n {/* Bottom bar */}\n

\n \n \n \n setNotification({ message: \"Share link copied!\", type: \"success\" })\n }\n variant=\"primary\"\n >\n Share\n \n

\n\n {notification && (\n setNotification(null)}\n />\n )}\n \n );\n}\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();\n",["D",1773420245163],{"_32":56,"_34":57,"_36":37,"_38":59,"_41":60,"_43":14,"_44":45,"_26":27},{"_32":56,"_34":57,"_36":37,"_38":58},"components/ui/Container.tsx","019cce74-2a39-76a3-acb5-7c54d0cc5265","Container.tsx","/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface ContainerProps {\n children: React.ReactNode;\n size?: \"md\" | \"lg\";\n className?: string;\n}\n\nconst sizeClasses = {\n md: \"max-w-2xl mx-auto p-8\",\n lg: \"max-w-5xl mx-auto p-4\",\n};\n\nexport function Container({ children, size = \"md\", className = \"\" }: ContainerProps) {\n return (\n

\n {children}\n

\n );\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface ContainerProps {\n children: React.ReactNode;\n size?: \"md\" | \"lg\";\n className?: string;\n}\n\nconst sizeClasses = {\n md: \"max-w-2xl mx-auto p-4 sm:p-8\",\n lg: \"max-w-5xl mx-auto p-4\",\n};\n\nexport function Container({ children, size = \"md\", className = \"\" }: ContainerProps) {\n return (\n

\n {children}\n

\n );\n}\n",["D",1773420245163],"id","ace732c8-1b12-11f1-9d9e-42dde27851f2","wow",["D",1772990244836],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","0b86c720-ddc6-11ef-94bf-d1c3ffb48162","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","7018ec7d-7a8e-4e8f-93d1-ab6a7334ca50","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_113":112,"_121":117},"org",{"_113":112,"_114":115,"_116":117,"_18":73,"_118":119,"_120":27},"branch",{"_13":102,"_34":103,"_61":45,"_104":62,"_105":-5,"_106":-5,"_107":-5,"_108":-5,"_109":-5,"_110":63,"_111":112},"isOwned",6,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","cricks_unmixed4u","handle","displayName","ozan","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJzSEJuSGdYT2dQSmprejVnU0VqalpDaWhKUSJ9","tier","pro","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_61":62,"_34":63,"_41":430,"_65":-5,"_66":27,"_67":68,"_69":68,"_70":71,"_72":-5,"_18":73,"_74":-5,"_75":27,"_76":-5,"_77":-5,"_78":79,"_80":81,"_82":-5,"_83":-5,"_84":-5,"_85":-5,"_86":87,"_88":87,"_89":90,"_91":90,"_92":90,"_93":87,"_94":87,"_95":431,"_97":432,"_99":433,"_101":27},"tree",[248,250,267,268,269,270,271,272,273,274,275,276,277],"files",[248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277],"counts",{"_238":79,"_239":172,"_240":79,"_241":242,"_243":244},"contents",[144,145,146,147,148,149,150,151,152,153,154,155,156],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_61":233,"_34":234,"_32":235,"_160":-5,"_44":45,"_43":164,"_162":139,"_41":236,"_13":79,"_36":231,"_38":-5,"_26":27,"_166":-5,"_29":237},{"_61":227,"_34":228,"_32":229,"_160":-5,"_44":45,"_43":172,"_162":139,"_41":230,"_13":79,"_36":231,"_38":-5,"_26":27,"_166":-5,"_29":232},{"_61":221,"_34":222,"_32":223,"_160":-5,"_44":45,"_43":164,"_162":139,"_41":224,"_13":79,"_36":22,"_38":225,"_26":27,"_166":-5,"_29":226},{"_61":215,"_34":216,"_32":217,"_160":-5,"_44":45,"_43":164,"_162":139,"_41":218,"_13":79,"_36":22,"_38":219,"_26":27,"_166":-5,"_29":220},{"_61":209,"_34":210,"_32":211,"_160":-5,"_44":45,"_43":164,"_162":139,"_41":212,"_13":79,"_36":22,"_38":213,"_26":27,"_166":-5,"_29":214},{"_61":203,"_34":204,"_32":205,"_160":-5,"_44":45,"_43":172,"_162":139,"_41":206,"_13":79,"_36":22,"_38":207,"_26":27,"_166":-5,"_29":208},{"_61":197,"_34":198,"_32":199,"_160":-5,"_44":45,"_43":161,"_162":139,"_41":200,"_13":172,"_36":37,"_38":201,"_26":27,"_166":-5,"_29":202},{"_61":191,"_34":192,"_32":193,"_160":-5,"_44":45,"_43":164,"_162":139,"_41":194,"_13":79,"_36":22,"_38":195,"_26":27,"_166":-5,"_29":196},{"_61":185,"_34":186,"_32":187,"_160":-5,"_44":45,"_43":161,"_162":139,"_41":188,"_13":172,"_36":22,"_38":189,"_26":27,"_166":-5,"_29":190},{"_61":181,"_34":48,"_32":49,"_160":-5,"_44":45,"_43":14,"_162":139,"_41":182,"_13":183,"_36":37,"_38":51,"_26":27,"_166":-5,"_29":184},{"_61":175,"_34":176,"_32":177,"_160":-5,"_44":45,"_43":161,"_162":139,"_41":178,"_13":172,"_36":37,"_38":179,"_26":27,"_166":-5,"_29":180},{"_61":168,"_34":169,"_32":170,"_160":-5,"_44":45,"_43":164,"_162":139,"_41":171,"_13":172,"_36":22,"_38":173,"_26":27,"_166":-5,"_29":174},{"_61":157,"_34":158,"_32":159,"_160":-5,"_44":45,"_43":161,"_162":27,"_41":163,"_13":164,"_36":37,"_38":165,"_26":27,"_166":-5,"_29":167},"1b2e562e-1c7d-11f1-a323-42dde27851f2","types.ts","019cce74-2a39-76a3-acb5-c02ca89e918d","parentId",3,"latest",["D",1773145907744],2,"export type NotificationTypes = \"success\" | \"info\" | \"warning\";\n\nexport type Language = \"en\" | \"nl\" | \"tr\";\n\nexport interface PhoneticInfo {\n ipa: string;\n approximate: string;\n}\n\nexport interface ExampleSentence {\n text: string;\n translation?: string;\n}\n\nexport interface WordMeaning {\n lang: Language;\n word: string;\n partOfSpeech: string;\n gender?: string;\n article?: string;\n phonetic: PhoneticInfo;\n definition: string;\n examples: ExampleSentence[];\n}\n\nexport interface CultureShelfItem {\n type: \"quote\" | \"note\" | \"link\";\n title: string;\n content: string;\n source?: string;\n url?: string;\n lang: Language;\n}\n\nexport interface WordOfTheWeek {\n id: string;\n weekOf: string;\n primary: WordMeaning;\n translations: WordMeaning[];\n cultureShelf: CultureShelfItem[];\n}\n","label",[158],"ba4ddb94-1b15-11f1-9492-42dde27851f2","style.css","019cce74-2a39-76a3-acb5-bee07ac82ceb",["D",1772991555869],1,"/* Utility classes */\n\n.hide-scrollbar {\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n.hide-scrollbar::-webkit-scrollbar {\n display: none;\n}\n\n.line-clamp-3 {\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* Notification animations */\n\n.notification {\n animation: slideIn 0.3s ease-out;\n}\n\n.slide-out {\n animation: slideOut 0.3s ease-in forwards;\n}\n\n@keyframes slideIn {\n from {\n transform: translateX(100%);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n\n@keyframes slideOut {\n from {\n transform: translateX(0);\n opacity: 1;\n }\n to {\n transform: translateX(100%);\n opacity: 0;\n }\n}\n",[169],"1b2e4d78-1c7d-11f1-a323-42dde27851f2","lang.ts","ba4db3b2-1b15-11f1-9492-42dde27851f2",["D",1773145907744],"import type { Language } from \"./types.ts\";\n\nexport const LANG_LABELS: Record = {\n en: \"English\",\n nl: \"Nederlands\",\n tr: \"Türkçe\",\n};\n\nexport const LANG_BADGE_COLORS: Record = {\n en: \"bg-blue-100 text-blue-700\",\n nl: \"bg-orange-100 text-orange-700\",\n tr: \"bg-red-100 text-red-700\",\n};\n\nexport const LANG_BG: Record = {\n en: \"bg-blue-500\",\n nl: \"bg-orange-500\",\n tr: \"bg-red-500\",\n};\n\nexport const LANG_BORDER: Record = {\n en: \"border-blue-400\",\n nl: \"border-orange-400\",\n tr: \"border-red-400\",\n};\n\nexport const LANG_TEXT: Record = {\n en: \"text-blue-700\",\n nl: \"text-orange-700\",\n tr: \"text-red-700\",\n};\n\nexport const LANG_BG_LIGHT: Record = {\n en: \"bg-blue-50\",\n nl: \"bg-orange-50\",\n tr: \"bg-red-50\",\n};\n",[176],"d90514f0-1efb-11f1-8a97-42dde27851f2",["D",1773420245163],4,[48],"1b2e23a2-1c7d-11f1-a323-42dde27851f2","index.html","019cce74-2a39-76a3-acb5-b6ed04e6c6f6",["D",1773145907744],"\n\n \n \n \n\n \n Word of the Week\n\n \n \n \n\n \n \n\n \n \n\n \n

\n \n \n\n",[186],"ba4dad9a-1b15-11f1-9492-42dde27851f2","deno.json","ba4dae1c-1b15-11f1-9492-42dde27851f2",["D",1772991555869],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/98f62cee78e85bfc47c62ed703777c6bc8794f1c/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": true,\n \"types\": [\"https://www.val.town/types/valtown.d.ts\"],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"include\": [\"deno:/https/esm.town/**/*\"],\n \"rules\": {\n \"exclude\": [\"no-explicit-any\"]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}",[192],"1b2e07a0-1c7d-11f1-a323-42dde27851f2","data.ts","ba4d9274-1b15-11f1-9492-42dde27851f2",["D",1773145907744],"import type { WordOfTheWeek } from \"./types.ts\";\n\nexport const wordOfTheWeek: WordOfTheWeek = {\n id: \"wotw-2026-10\",\n weekOf: \"2026-03-08\",\n primary: {\n lang: \"en\",\n word: \"Serendipity\",\n partOfSpeech: \"noun\",\n phonetic: {\n ipa: \"/ˌsɛr.ənˈdɪp.ɪ.ti/\",\n approximate: \"ser-uhn-DIP-ih-tee\",\n },\n definition:\n \"The occurrence of finding pleasant or valuable things by chance, without actively searching for them.\",\n examples: [\n {\n text: \"It was pure serendipity that we met at the bookshop that rainy afternoon.\",\n },\n {\n text: \"Many scientific discoveries have been made through serendipity rather than deliberate research.\",\n },\n ],\n },\n translations: [\n {\n lang: \"nl\",\n word: \"Serendipiteit\",\n partOfSpeech: \"zelfstandig naamwoord\",\n gender: \"feminine\",\n article: \"de\",\n phonetic: {\n ipa: \"/ˌseː.rɛn.diˈpi.tɛit/\",\n approximate: \"say-ren-dee-pee-TAIT\",\n },\n definition:\n \"Het onverwacht ontdekken van iets waardevols of aangenaams terwijl je naar iets anders op zoek bent.\",\n examples: [\n {\n text: \"De ontdekking van penicilline was een geval van serendipiteit.\",\n translation:\n \"The discovery of penicillin was a case of serendipity.\",\n },\n {\n text: \"Soms leidt serendipiteit tot de mooiste vriendschappen.\",\n translation:\n \"Sometimes serendipity leads to the most beautiful friendships.\",\n },\n ],\n },\n {\n lang: \"tr\",\n word: \"Tesadüfi keşif\",\n partOfSpeech: \"isim\",\n phonetic: {\n ipa: \"/te.sæ.dyˈfi keˈʃif/\",\n approximate: \"teh-sa-dü-FEE keh-SHEEF\",\n },\n definition:\n \"Bir şeyi ararken, beklenmedik bir şekilde değerli veya hoş başka bir şey bulma durumu.\",\n examples: [\n {\n text: \"Hayatımdaki en güzel anılar tesadüfi keşiflerle dolu.\",\n translation:\n \"The most beautiful memories in my life are full of serendipitous discoveries.\",\n },\n {\n text: \"Bu restoran tamamen bir tesadüfi keşifti.\",\n translation:\n \"This restaurant was a complete serendipitous discovery.\",\n },\n ],\n },\n ],\n cultureShelf: [\n {\n type: \"quote\",\n title: \"Horace Walpole\",\n content:\n \"Serendipity — the faculty of making happy and unexpected discoveries by accident.\",\n source: \"Letter to Horace Mann, 1754\",\n lang: \"en\",\n },\n {\n type: \"note\",\n title: \"Etymology\",\n content:\n \"Coined by Horace Walpole in 1754, inspired by the Persian fairy tale 'The Three Princes of Serendip' (Sri Lanka), whose heroes were always making discoveries by accidents and sagacity.\",\n lang: \"en\",\n },\n {\n type: \"note\",\n title: \"Nederlandse context\",\n content:\n \"Het woord 'serendipiteit' wordt in het Nederlands steeds vaker gebruikt, maar 'toevalstreffer' blijft het meer gangbare alternatief in dagelijks taalgebruik.\",\n lang: \"nl\",\n },\n {\n type: \"note\",\n title: \"Türkçe bağlam\",\n content:\n \"Türkçede doğrudan bir karşılığı olmayan bu kavram, genellikle 'şans eseri buluş' veya 'tesadüfi keşif' olarak ifade edilir.\",\n lang: \"tr\",\n },\n ],\n};\n",[198],"ad51947e-1b12-11f1-9d9e-42dde27851f2","README.md","019cce74-2a39-76a3-acb5-b0f0768ca2ef",["D",1772990244836],"The starter template is designed for static serving (Twind shim + esm.sh imports, no build step), so it maps to Val Town pretty directly. Here's the approach:\n\n**1. Create an HTTP val that serves the HTML**\n\n```ts\n// your-app.ts (HTTP val)\nexport default async function(req: Request): Promise {\n const url = new URL(req.url);\n \n // Serve component files from companion vals\n if (url.pathname === \"/style.css\") {\n return new Response(styleCSS, { headers: { \"content-type\": \"text/css\" } });\n }\n if (url.pathname === \"/index.tsx\") {\n return new Response(indexTSX, { headers: { \"content-type\": \"application/typescript\" } });\n }\n \n return new Response(indexHTML, { headers: { \"content-type\": \"text/html\" } });\n}\n```\n\n**2. The challenge: multi-file structure**\n\nVal Town vals are single files, so you have two options:\n\n- **Inline everything** — Collapse the components into one or two vals. This is simplest but loses the nice file structure.\n- **Use Val Town's module imports** — Publish each component as its own val, then change the import paths in `index.tsx` to `https://esm.town/v/yourname/Button` etc.\n\n**3. Practical steps**\n\n1. Create a new HTTP val\n2. Paste the `index.html` content as a template string, updating the `\n \n`;\n\nexport default () => new Response(html, { headers: { \"content-type\": \"text/html\" } });\n```\n\nThe esm.sh React imports and Twind CDN shim will work as-is in Val Town since they're already URL-based. The main adaptation is flattening the file structure to fit Val Town's single-file-per-val model.\n",[204],"ba4d59c6-1b15-11f1-9492-42dde27851f2","CLAUDE.md","ba4d5a52-1b15-11f1-9492-42dde27851f2",["D",1772991555869],"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Project Overview\n\nThis is a **Val Town project** — a React component library starter template that runs on the Val Town platform (serverless Deno environment, not Node.js). It uses no build step: Twind shim for CSS-in-JS and esm.sh for imports, served statically.\n\n## Runtime & Platform\n\n- **Runtime:** Deno (Val Town serverless), configured via `deno.json`\n- **Imports:** All dependencies come from `https://esm.sh` (works in both browser and server)\n- **React:** Pinned to 18.2.0 — all React dependencies and sub-dependencies must use `?deps=react@18.2.0,react-dom@18.2.0`\n- **JSX:** Every TSX file must start with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- **Styling:** TailwindCSS via Twind shim (`` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n \n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n\n",[216],"ba4cdae6-1b15-11f1-9492-42dde27851f2",".vtignore","ba4cdba4-1b15-11f1-9492-42dde27851f2",["D",1772991555869],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[222],"ad519316-1b12-11f1-9d9e-42dde27851f2","components","019cce74-2a39-76a3-acb5-aeccea3cb030",["D",1772990244836],"directory",[228],"ba4dbb1e-1b15-11f1-9492-42dde27851f2","backend","019cce88-291d-7570-a18e-51269a7b6a2f",["D",1772991555869],[234],"pulls","branches","forks","envVars",{"_245":79,"_247":79},"connections",{"_245":79,"_246":79},"count","unfilledCount","emptyCount",{"_61":233,"_34":234,"_32":235,"_160":-5,"_44":45,"_43":164,"_162":139,"_41":427,"_13":79,"_36":231,"_38":-5,"_26":27,"_166":-5,"_279":428,"_29":429},{"_61":420,"_34":366,"_32":421,"_160":235,"_44":45,"_43":164,"_162":139,"_41":422,"_13":79,"_36":423,"_38":424,"_26":27,"_166":63,"_279":425,"_29":426},{"_61":227,"_34":228,"_32":229,"_160":-5,"_44":45,"_43":172,"_162":139,"_41":417,"_13":79,"_36":231,"_38":-5,"_26":27,"_166":-5,"_279":418,"_29":419},{"_61":413,"_34":373,"_32":368,"_160":229,"_44":45,"_43":172,"_162":139,"_41":414,"_13":79,"_36":231,"_38":-5,"_26":27,"_166":-5,"_279":415,"_29":416},{"_61":406,"_34":407,"_32":408,"_160":368,"_44":45,"_43":164,"_162":139,"_41":409,"_13":172,"_36":37,"_38":410,"_26":27,"_166":-5,"_279":411,"_29":412},{"_61":402,"_34":57,"_32":56,"_160":368,"_44":45,"_43":14,"_162":139,"_41":403,"_13":164,"_36":37,"_38":59,"_26":27,"_166":-5,"_279":404,"_29":405},{"_61":395,"_34":396,"_32":397,"_160":368,"_44":45,"_43":172,"_162":139,"_41":398,"_13":79,"_36":37,"_38":399,"_26":27,"_166":-5,"_279":400,"_29":401},{"_61":388,"_34":389,"_32":390,"_160":368,"_44":45,"_43":172,"_162":139,"_41":391,"_13":79,"_36":37,"_38":392,"_26":27,"_166":-5,"_279":393,"_29":394},{"_61":381,"_34":382,"_32":383,"_160":368,"_44":45,"_43":172,"_162":139,"_41":384,"_13":79,"_36":37,"_38":385,"_26":27,"_166":-5,"_279":386,"_29":387},{"_61":374,"_34":375,"_32":376,"_160":368,"_44":45,"_43":172,"_162":139,"_41":377,"_13":79,"_36":37,"_38":378,"_26":27,"_166":-5,"_279":379,"_29":380},{"_61":365,"_34":366,"_32":367,"_160":368,"_44":45,"_43":172,"_162":139,"_41":369,"_13":79,"_36":37,"_38":370,"_26":27,"_166":-5,"_279":371,"_29":372},{"_61":358,"_34":359,"_32":360,"_160":229,"_44":45,"_43":172,"_162":139,"_41":361,"_13":79,"_36":37,"_38":362,"_26":27,"_166":-5,"_279":363,"_29":364},{"_61":351,"_34":352,"_32":353,"_160":229,"_44":45,"_43":172,"_162":139,"_41":354,"_13":79,"_36":37,"_38":355,"_26":27,"_166":-5,"_279":356,"_29":357},{"_61":347,"_34":35,"_32":33,"_160":229,"_44":45,"_43":14,"_162":139,"_41":348,"_13":164,"_36":37,"_38":40,"_26":27,"_166":-5,"_279":349,"_29":350},{"_61":340,"_34":341,"_32":342,"_160":229,"_44":45,"_43":161,"_162":139,"_41":343,"_13":172,"_36":37,"_38":344,"_26":27,"_166":-5,"_279":345,"_29":346},{"_61":333,"_34":334,"_32":335,"_160":229,"_44":45,"_43":172,"_162":139,"_41":336,"_13":79,"_36":37,"_38":337,"_26":27,"_166":-5,"_279":338,"_29":339},{"_61":326,"_34":327,"_32":328,"_160":229,"_44":45,"_43":172,"_162":139,"_41":329,"_13":79,"_36":37,"_38":330,"_26":27,"_166":-5,"_279":331,"_29":332},{"_61":319,"_34":320,"_32":321,"_160":229,"_44":45,"_43":172,"_162":139,"_41":322,"_13":79,"_36":37,"_38":323,"_26":27,"_166":-5,"_279":324,"_29":325},{"_61":312,"_34":313,"_32":314,"_160":229,"_44":45,"_43":161,"_162":139,"_41":315,"_13":172,"_36":37,"_38":316,"_26":27,"_166":-5,"_279":317,"_29":318},{"_61":221,"_34":222,"_32":223,"_160":-5,"_44":45,"_43":164,"_162":139,"_41":309,"_13":79,"_36":22,"_38":225,"_26":27,"_166":-5,"_279":310,"_29":311},{"_61":215,"_34":216,"_32":217,"_160":-5,"_44":45,"_43":164,"_162":139,"_41":306,"_13":79,"_36":22,"_38":219,"_26":27,"_166":-5,"_279":307,"_29":308},{"_61":209,"_34":210,"_32":211,"_160":-5,"_44":45,"_43":164,"_162":139,"_41":303,"_13":79,"_36":22,"_38":213,"_26":27,"_166":-5,"_279":304,"_29":305},{"_61":203,"_34":204,"_32":205,"_160":-5,"_44":45,"_43":172,"_162":139,"_41":300,"_13":79,"_36":22,"_38":207,"_26":27,"_166":-5,"_279":301,"_29":302},{"_61":197,"_34":198,"_32":199,"_160":-5,"_44":45,"_43":161,"_162":139,"_41":297,"_13":172,"_36":37,"_38":201,"_26":27,"_166":-5,"_279":298,"_29":299},{"_61":191,"_34":192,"_32":193,"_160":-5,"_44":45,"_43":164,"_162":139,"_41":294,"_13":79,"_36":22,"_38":195,"_26":27,"_166":-5,"_279":295,"_29":296},{"_61":185,"_34":186,"_32":187,"_160":-5,"_44":45,"_43":161,"_162":139,"_41":291,"_13":172,"_36":22,"_38":189,"_26":27,"_166":-5,"_279":292,"_29":293},{"_61":181,"_34":48,"_32":49,"_160":-5,"_44":45,"_43":14,"_162":139,"_41":288,"_13":183,"_36":37,"_38":51,"_26":27,"_166":-5,"_279":289,"_29":290},{"_61":175,"_34":176,"_32":177,"_160":-5,"_44":45,"_43":161,"_162":139,"_41":285,"_13":172,"_36":37,"_38":179,"_26":27,"_166":-5,"_279":286,"_29":287},{"_61":168,"_34":169,"_32":170,"_160":-5,"_44":45,"_43":164,"_162":139,"_41":282,"_13":172,"_36":22,"_38":173,"_26":27,"_166":-5,"_279":283,"_29":284},{"_61":157,"_34":158,"_32":159,"_160":-5,"_44":45,"_43":161,"_162":27,"_41":278,"_13":164,"_36":37,"_38":165,"_26":27,"_166":-5,"_279":280,"_29":281},["D",1773145907744],"children",[],[158],["D",1772991555869],[],[169],["D",1773145907744],[],[176],["D",1773420245163],[],[48],["D",1773145907744],[],[186],["D",1772991555869],[],[192],["D",1773145907744],[],[198],["D",1772990244836],[],[204],["D",1772991555869],[],[210],["D",1772991555869],[],[216],["D",1772991555869],[],[222],"1b2df594-1c7d-11f1-a323-42dde27851f2","TranslationStrip.tsx","ba4d850e-1b15-11f1-9492-42dde27851f2",["D",1773145907744],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport type { Language, WordMeaning } from \"../types.ts\";\nimport { LANG_BADGE_COLORS, LANG_BORDER, LANG_LABELS } from \"../lang.ts\";\n\ninterface TranslationStripProps {\n translations: WordMeaning[];\n onSelect?: (lang: Language) => void;\n}\n\nexport function TranslationStrip({ translations, onSelect }: TranslationStripProps) {\n return (\n

\n {translations.map((t) => {\n const badgeClass = LANG_BADGE_COLORS[t.lang];\n const borderClass = LANG_BORDER[t.lang];\n\n return (\n onSelect?.(t.lang)}\n className={`flex-1 min-w-[140px] bg-white rounded-lg border-2 ${borderClass} px-5 py-4 ${onSelect ? \"cursor-pointer hover:shadow-md transition-shadow\" : \"\"}`}\n >\n \n {LANG_LABELS[t.lang]}\n \n

{t.word}

{t.phonetic.ipa}

\n {t.article && (\n \n {t.article}\n \n )}\n

\n );\n })}\n \n );\n}\n",[],[228,313],"ad5186e6-1b12-11f1-9d9e-42dde27851f2","Notification.tsx","019cce74-2a39-76a3-acb5-a9180821df43",["D",1772990244836],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { getAsset, type NotificationTypes } from \"./Icons.tsx\";\n\ninterface NotificationProps {\n message: string;\n type: NotificationTypes;\n onClose: () => void;\n}\n\nexport function Notification({ message, type, onClose }: NotificationProps) {\n const [isClosing, setIsClosing] = useState(false);\n const notificationRef = useRef(null);\n\n const handleClose = () => {\n setIsClosing(true);\n setTimeout(() => {\n onClose();\n }, 300);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n handleClose();\n }\n };\n\n useEffect(() => {\n const timer = setTimeout(handleClose, 3000);\n\n return () => clearTimeout(timer);\n }, []);\n\n const icon = getAsset(type);\n\n const notificationColors = {\n success: \"bg-[#ecfdf3] border border-[#bffcd9] text-[#008a2e]\",\n info: \"bg-[#f0f8ff] border border-[#dde7fd] text-[#0973dc]\",\n warning: \"bg-[#fffcf0] border border-[#fbeeb1] text-[#dc7609]\",\n };\n\n return (\n \n

\n {icon}\n {message}\n

\n \n );\n}\n",[],[228,320],"ad5183da-1b12-11f1-9d9e-42dde27851f2","Link.tsx","019cce74-2a39-76a3-acb5-a754dcb1094d",["D",1772990244836],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\n\nexport const Link = ({\n children,\n href,\n className = \"\",\n}: {\n children: React.ReactNode;\n href: string;\n className?: string;\n}) => (\n \n {children}\n \n);\n",[],[228,327],"ad517a3e-1b12-11f1-9d9e-42dde27851f2","Icons.tsx","019cce74-2a39-76a3-acb5-a3f37b3fb0b5",["D",1772990244836],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport type { NotificationTypes } from \"../types.ts\";\n\nconst Icon = ({\n children,\n title,\n className,\n}: {\n children: React.ReactNode;\n title: string;\n className?: string;\n}) => (\n \n {title}\n {children}\n \n);\n\nexport const getAsset = (type: NotificationTypes): JSX.Element | null => {\n switch (type) {\n case \"success\":\n return SuccessIcon;\n\n case \"info\":\n return InfoIcon;\n\n case \"warning\":\n return WarningIcon;\n\n default:\n return null;\n }\n};\n\nconst SuccessIcon = (\n \n \n \n \n);\n\nconst WarningIcon = (\n \n \n \n \n \n);\n\nconst InfoIcon = (\n \n \n \n \n \n);\n",[],[228,334],"1b2de07c-1c7d-11f1-a323-42dde27851f2","HeroWord.tsx","ba4d778a-1b15-11f1-9492-42dde27851f2",["D",1773145907744],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport type { WordMeaning } from \"../types.ts\";\nimport { LANG_BADGE_COLORS, LANG_LABELS } from \"../lang.ts\";\n\ninterface HeroWordProps {\n meaning: WordMeaning;\n onSpeakerClick: () => void;\n className?: string;\n}\n\nexport function HeroWord({ meaning, onSpeakerClick, className = \"\" }: HeroWordProps) {\n const badgeClass = LANG_BADGE_COLORS[meaning.lang];\n\n return (\n

\n \n {LANG_LABELS[meaning.lang]}\n \n

{meaning.word}

\n \n {meaning.phonetic.ipa}\n \n \n \n \n \n \n \n \n

\n {meaning.phonetic.approximate}\n

\n \n {meaning.partOfSpeech}\n \n

\n );\n}\n",[],[228,341],"d904e35e-1efb-11f1-8a97-42dde27851f2",["D",1773420245163],[],[228,35],"ad5175c0-1b12-11f1-9d9e-42dde27851f2","Card.tsx","019cce74-2a39-76a3-acb5-9d795139433f",["D",1772990244836],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface CardProps {\n children: React.ReactNode;\n className?: string;\n}\n\nexport function CardHeader({ children, className = \"\" }: CardProps) {\n return

{children}

;\n}\n\nexport function Card({ children, className = \"\" }: CardProps) {\n return (\n \n {children}\n \n );\n}\n",[],[228,352],"ad516ac6-1b12-11f1-9d9e-42dde27851f2","Button.tsx","019cce74-2a39-76a3-acb5-9a8234e8b154",["D",1772990244836],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface ButtonProps {\n children: React.ReactNode;\n onClick: () => void;\n variant?:\n | \"primary\"\n | \"secondary\"\n | \"info\"\n | \"warning\"\n | \"purple\"\n | \"danger\"\n | \"neutral\";\n size?: \"sm\" | \"md\" | \"lg\";\n className?: string;\n type?: \"button\" | \"submit\" | \"reset\";\n title?: string;\n disabled?: boolean;\n}\n\nexport function Button({\n children,\n onClick,\n variant = \"primary\",\n size = \"md\",\n className = \"\",\n type = \"button\",\n title,\n disabled = false,\n}: ButtonProps) {\n const baseClasses =\n \"border-2 border-black text-black font-semibold rounded-lg transition-colors\";\n\n const variantClasses = {\n primary: \"bg-green(300 hover:400)\",\n secondary: \"bg-gray(100 hover:200)\",\n info: \"bg-blue(300 hover:400)\",\n warning: \"bg-yellow(300 hover:400)\",\n purple: \"bg-purple(300 hover:400)\",\n danger: \"bg-red(300 hover:400)\",\n neutral: \"\",\n };\n\n const sizeClasses = {\n sm: \"py-2 px-4 text-sm\",\n md: \"py-3 px-6\",\n lg: \"py-3 px-6 text-lg\",\n };\n\n return (\n \n {children}\n \n );\n}\n",[],[228,359],"ad516512-1b12-11f1-9d9e-42dde27851f2","index.ts","019cce74-2a39-76a3-acb5-90bb214f42c1","019cce74-2a39-76a3-acb5-96695935014e",["D",1772990244836],"export { Input } from \"./Input.tsx\";\nexport { Table } from \"./Table.tsx\";\nexport type { Column } from \"./Table.tsx\";\nexport { Tabs } from \"./Tabs.tsx\";\nexport { Label } from \"./Label.tsx\";\nexport { Container } from \"./Container.tsx\";\nexport { Badge } from \"./Badge.tsx\";\n",[],[228,373,366],"ui","ad515db0-1b12-11f1-9d9e-42dde27851f2","Tabs.tsx","019cce74-2a39-76a3-acb5-8c9c989511fc",["D",1772990244836],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface Tab {\n id: string;\n label: string;\n}\n\ninterface TabsProps {\n tabs: Tab[];\n activeTab: string;\n onTabChange: (id: string) => void;\n variant?: \"underline\" | \"pill\";\n className?: string;\n}\n\nexport function Tabs({\n tabs,\n activeTab,\n onTabChange,\n variant = \"underline\",\n className = \"\",\n}: TabsProps) {\n if (variant === \"pill\") {\n return (\n

\n {tabs.map((t) => (\n onTabChange(t.id)}\n className={`px-3 py-1 text-sm rounded ${\n activeTab === t.id\n ? \"bg-gray-800 text-white\"\n : \"bg-gray-100 text-gray-600 hover:bg-gray-200\"\n }`}\n >\n {t.label}\n \n ))}\n

\n );\n }\n\n return (\n

\n {tabs.map((t) => (\n onTabChange(t.id)}\n className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${\n activeTab === t.id\n ? \"border-blue-600 text-blue-600\"\n : \"border-transparent text-gray-500 hover:text-gray-700\"\n }`}\n >\n {t.label}\n \n ))}\n

\n );\n}\n",[],[228,373,375],"ad5155ea-1b12-11f1-9d9e-42dde27851f2","Table.tsx","019cce74-2a39-76a3-acb5-89af702a3ec4",["D",1772990244836],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport interface Column {\n key: string;\n header: string;\n render?: (row: T) => React.ReactNode;\n className?: string;\n}\n\ninterface TableProps {\n columns: Column[];\n data: T[];\n rowKey: (row: T) => string | number;\n emptyMessage?: string;\n loading?: boolean;\n loadingMessage?: string;\n}\n\nexport function Table({\n columns,\n data,\n rowKey,\n emptyMessage = \"No data.\",\n loading = false,\n loadingMessage = \"Loading...\",\n}: TableProps) {\n if (loading) return

{loadingMessage}

;\n if (data.length === 0) return

{emptyMessage}

;\n\n return (\n

\n \n \n \n {columns.map((col) => (\n \n ))}\n \n \n \n {data.map((row) => (\n \n {columns.map((col) => (\n \n ))}\n \n ))}\n \n

\n {col.header}\n
\n {col.render ? col.render(row) : (row as any)[col.key]}\n

\n );\n}\n",[],[228,373,382],"ad51520c-1b12-11f1-9d9e-42dde27851f2","Label.tsx","019cce74-2a39-76a3-acb5-87a4e4e8dcc5",["D",1772990244836],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface LabelProps {\n children: React.ReactNode;\n htmlFor?: string;\n hint?: string;\n className?: string;\n}\n\nexport function Label({ children, htmlFor, hint, className = \"\" }: LabelProps) {\n return (\n <>\n \n {children}\n \n {hint &&

{hint}

}\n \n );\n}\n",[],[228,373,389],"ad514ae6-1b12-11f1-9d9e-42dde27851f2","Input.tsx","019cce74-2a39-76a3-acb5-821a1dd745a2",["D",1772990244836],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface InputProps {\n type?: \"text\" | \"password\" | \"number\";\n value: string;\n onChange: (value: string) => void;\n onKeyDown?: (e: React.KeyboardEvent) => void;\n placeholder?: string;\n size?: \"sm\" | \"md\";\n autoFocus?: boolean;\n step?: string;\n list?: string;\n className?: string;\n disabled?: boolean;\n}\n\nconst sizeClasses = {\n sm: \"py-1 px-2 text-sm\",\n md: \"py-2 px-3\",\n};\n\nexport function Input({\n type = \"text\",\n value,\n onChange,\n onKeyDown,\n placeholder,\n size = \"md\",\n autoFocus,\n step,\n list,\n className = \"\",\n disabled,\n}: InputProps) {\n const baseClasses =\n \"border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\";\n\n return (\n onChange(e.target.value)}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n className={`${baseClasses} ${sizeClasses[size]} ${className}`}\n autoFocus={autoFocus}\n step={step}\n list={list}\n disabled={disabled}\n />\n );\n}\n",[],[228,373,396],"d9050ca8-1efb-11f1-8a97-42dde27851f2",["D",1773420245163],[],[228,373,57],"ba4dbcd6-1b15-11f1-9492-42dde27851f2","Badge.tsx","019cce74-2a39-76a3-acb5-782817f69bac",["D",1772991555869],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ntype BadgeColor = \"green\" | \"blue\" | \"gray\" | \"red\" | \"yellow\" | \"purple\" | \"orange\";\n\ninterface BadgeProps {\n children?: React.ReactNode;\n color?: BadgeColor;\n variant?: \"dot\" | \"label\";\n className?: string;\n}\n\nconst dotColorClasses: Record = {\n green: \"bg-green-500\",\n blue: \"bg-blue-500\",\n gray: \"bg-gray-400\",\n red: \"bg-red-500\",\n yellow: \"bg-yellow-500\",\n purple: \"bg-purple-500\",\n orange: \"bg-orange-500\",\n};\n\nconst labelColorClasses: Record = {\n green: \"bg-green-100 text-green-700\",\n blue: \"bg-blue-100 text-blue-700\",\n gray: \"bg-gray-100 text-gray-700\",\n red: \"bg-red-100 text-red-700\",\n yellow: \"bg-yellow-100 text-yellow-700\",\n purple: \"bg-purple-100 text-purple-700\",\n orange: \"bg-orange-100 text-orange-700\",\n};\n\nexport function Badge({\n children,\n color = \"gray\",\n variant = \"dot\",\n className = \"\",\n}: BadgeProps) {\n if (variant === \"dot\") {\n return (\n \n );\n }\n\n return (\n \n {children}\n \n );\n}\n",[],[228,373,407],"ad51694a-1b12-11f1-9d9e-42dde27851f2",["D",1772990244836],[252,253,254,255,256,257,258],[228,373],["D",1772990244836],[251,259,260,261,262,263,264,265,266],[228],"ba4d4828-1b15-11f1-9492-42dde27851f2","ba4d48be-1b15-11f1-9492-42dde27851f2",["D",1772991555869],"http","import { Hono } from \"https://esm.sh/hono@4.7.0\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve frontend files\napp.get(\"/components/*\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/style.css\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/index.tsx\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/types.ts\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/lang.ts\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/data.ts\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Serve index.html at root\napp.get(\"/\", async (c) => {\n const html = await readFile(\"/index.html\", import.meta.url);\n return c.html(html);\n});\n\nexport default app.fetch;\n",[],[234,366],["D",1772991555869],[249],[234],["D",1772990244836],{"_113":112,"_121":117},{"_113":112,"_114":115,"_116":117,"_18":73,"_118":119,"_120":27},{"_13":102,"_34":103,"_61":45,"_104":62,"_105":-5,"_106":-5,"_107":-5,"_108":-5,"_109":-5,"_110":63,"_111":112},"ctx",{"_95":-5,"_141":467,"_468":469,"_470":471,"_472":27,"_473":27,"_474":27,"_475":139,"_476":-5,"_477":-7,"_478":-7,"_479":79,"_480":27,"_481":27,"_482":-5,"_483":27,"_484":27,"_485":27,"_486":-5},"ENV",{"_438":439,"_440":441,"_442":103,"_443":444,"_445":446,"_447":448,"_449":450,"_451":452,"_453":454,"_455":456,"_457":458,"_459":460,"_461":462,"_463":464,"_465":466},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v5