\n \n\n\n",[],[67,106],"23602900-3e8b-11f1-b0d3-42b51c65c3df","components","cdd7ed5c-a2f8-467a-8c4f-54c4f3873da2",6,["D",1776890273995],[119,120,121],[67,113],{"_35":138,"_13":139,"_38":140,"_40":114,"_41":42,"_43":115,"_45":46,"_47":141,"_17":63,"_50":87,"_52":142,"_54":55,"_56":-5,"_76":143,"_18":144},{"_35":130,"_13":131,"_38":132,"_40":114,"_41":42,"_43":133,"_45":46,"_47":134,"_17":63,"_50":87,"_52":135,"_54":55,"_56":-5,"_76":136,"_18":137},{"_35":122,"_13":123,"_38":124,"_40":114,"_41":42,"_43":125,"_45":46,"_47":126,"_17":63,"_50":87,"_52":127,"_54":55,"_56":-5,"_76":128,"_18":129},"3215f3f8-3e8b-11f1-a57d-42b51c65c3df","BreedModal.tsx","3215f6be-3e8b-11f1-a57d-42b51c65c3df",8,["D",1776890298677],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface BreedDetail {\n id: string;\n name: string;\n emoji: string;\n origin: string;\n lifespan: string;\n weight: string;\n temperament: string[];\n energy: number;\n affection: number;\n grooming: number;\n intelligence: number;\n description: string;\n funFact: string;\n coat: string;\n hypoallergenic: boolean;\n color: string;\n}\n\nfunction StatBar({ label, value }: { label: string; value: number }) {\n return (\n

\n {label}\n {value}/5\n

\n \n

\n );\n}\n\nexport function BreedModal({ id, onClose }: { id: string; onClose: () => void }) {\n const [breed, setBreed] = useState(null);\n\n useEffect(() => {\n fetch(`/api/breeds/${id}`)\n .then((r) => r.json())\n .then(setBreed);\n }, [id]);\n\n useEffect(() => {\n const esc = (e: KeyboardEvent) => e.key === \"Escape\" && onClose();\n document.addEventListener(\"keydown\", esc);\n document.body.style.overflow = \"hidden\";\n return () => {\n document.removeEventListener(\"keydown\", esc);\n document.body.style.overflow = \"\";\n };\n }, [onClose]);\n\n return (\n \n e.stopPropagation()}\n >\n {!breed ? (\n

\n ) : (\n <>\n {/* Header */}\n \n \n ×\n \n

{breed.emoji}

{breed.name}

\n 📍 {breed.origin}\n ·\n ⏳ {breed.lifespan}\n ·\n ⚖️ {breed.weight}\n

\n \n\n {/* Body */}\n

\n {/* Description */}\n

{breed.description}

\n\n {/* Tags */}\n

\n Personality\n

\n {breed.temperament.map((t) => (\n \n {t}\n \n ))}\n

\n\n {/* Stats */}\n

\n Traits\n

\n \n \n \n \n

\n\n {/* Specs */}\n

\n Coat\n

{breed.coat}

\n Hypoallergenic\n

\n {breed.hypoallergenic ? \"Yes ✓\" : \"No\"}\n

\n\n {/* Fun fact */}\n

\n 💡 Fun fact\n

{breed.funFact}

\n \n )}\n \n \n );\n}\n",[],[67,113,123],"27b8958c-3e8b-11f1-a57d-42b51c65c3df","BreedCard.tsx","27b8969a-3e8b-11f1-a57d-42b51c65c3df",7,["D",1776890281290],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\ninterface BreedSummary {\n id: string;\n name: string;\n emoji: string;\n origin: string;\n coat: string;\n temperament: string[];\n hypoallergenic: boolean;\n color: string;\n}\n\nexport function BreedCard({\n breed,\n onClick,\n}: {\n breed: BreedSummary;\n onClick: () => void;\n}) {\n return (\n \n \n

{breed.emoji}

{breed.name}

{breed.origin}

\n {breed.temperament.slice(0, 3).map((t) => (\n \n {t}\n \n ))}\n

\n \n \n {breed.coat} coat\n \n {breed.hypoallergenic && (\n ✓ Hypoallergenic\n )}\n

\n Learn more →\n

\n \n );\n}\n",[],[67,113,131],"235fe5bc-3e8b-11f1-b0d3-42b51c65c3df","App.tsx","235fe684-3e8b-11f1-b0d3-42b51c65c3df",["D",1776890273995],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport { BreedCard } from \"./BreedCard.tsx\";\nimport { BreedModal } from \"./BreedModal.tsx\";\n\ninterface BreedSummary {\n id: string;\n name: string;\n emoji: string;\n origin: string;\n coat: string;\n temperament: string[];\n hypoallergenic: boolean;\n color: string;\n}\n\nconst COATS = [\"All\", \"Short\", \"Medium\", \"Long\", \"Hairless\"];\n\nexport function App() {\n const [breeds, setBreeds] = useState([]);\n const [loading, setLoading] = useState(true);\n const [search, setSearch] = useState(\"\");\n const [coatFilter, setCoatFilter] = useState(\"All\");\n const [hypoOnly, setHypoOnly] = useState(false);\n const [selectedId, setSelectedId] = useState(null);\n\n useEffect(() => {\n fetch(\"/api/breeds\")\n .then((r) => r.json())\n .then((data) => {\n setBreeds(data);\n setLoading(false);\n });\n }, []);\n\n const filtered = useMemo(() => {\n return breeds.filter((b) => {\n if (coatFilter !== \"All\" && b.coat !== coatFilter) return false;\n if (hypoOnly && !b.hypoallergenic) return false;\n if (search) {\n const q = search.toLowerCase();\n const hay = `${b.name} ${b.origin} ${b.temperament.join(\" \")}`.toLowerCase();\n if (!hay.includes(q)) return false;\n }\n return true;\n });\n }, [breeds, search, coatFilter, hypoOnly]);\n\n return (\n

\n {/* Header */}\n

\n 🐈\n \n Cat Breed Explorer\n \n

\n Find your purrfect companion\n

\n Browse {breeds.length || \"a dozen\"} of the world's most beloved cat breeds — their\n personalities, origins, and quirks.\n

\n\n {/* Filters */}\n

\n setSearch(e.target.value)}\n className=\"flex-1 min-w-[200px] px-4 py-2 border border-stone-200 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-transparent\"\n />\n

\n {COATS.map((c) => (\n setCoatFilter(c)}\n className={`px-3 py-1 text-sm rounded-full transition ${\n coatFilter === c\n ? \"bg-white text-stone-900 shadow-sm font-semibold\"\n : \"text-stone-500 hover:text-stone-900\"\n }`}\n >\n {c}\n \n ))}\n

\n \n setHypoOnly(e.target.checked)}\n className=\"w-4 h-4 accent-orange-500\"\n />\n Hypoallergenic only\n \n

\n\n {/* Grid */}\n

\n {loading ? (\n

Loading breeds... 🐾

\n ) : filtered.length === 0 ? (\n

🙀

No breeds match your filters.

\n ) : (\n <>\n

\n Showing {filtered.length}{\" \"}\n {filtered.length === 1 ? \"breed\" : \"breeds\"}\n

\n {filtered.map((b) => (\n setSelectedId(b.id)} />\n ))}\n

\n \n )}\n

\n\n {/* Footer */}\n \n\n {/* Modal */}\n {selectedId && setSelectedId(null)} />}\n

\n );\n}\n",[],[67,113,139],"efc6f038-3e8a-11f1-b699-42b51c65c3df",["D",1776890187437],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Explore different cat breeds","imageUrl","userId","4bd2cae1-acd4-4949-a41a-c29c19fb964d","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","019d5969-aad7-7319-bc6a-364c0e94949a","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_198":19},"org",{"_11":12,"_192":193,"_194":19,"_155":-5,"_195":196,"_197":46},"branch",{"_17":125,"_13":16,"_35":42,"_184":145,"_185":-5,"_186":-5,"_187":-5,"_188":-5,"_189":-5,"_190":14,"_191":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Casual Collab","avatar","tier","business","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":145,"_13":14,"_47":262,"_147":-5,"_148":55,"_149":150,"_151":150,"_152":153,"_154":-5,"_155":156,"_157":39,"_158":46,"_159":-5,"_160":-5,"_161":63,"_162":163,"_164":-5,"_165":-5,"_166":-5,"_167":-5,"_168":169,"_170":169,"_171":172,"_173":172,"_174":172,"_175":169,"_176":169,"_177":263,"_179":264,"_181":265,"_183":55},[232,239,241],"files",[232,233,234,235,236,237,238,239,240,241],"counts",{"_223":63,"_224":49,"_225":63,"_31":226,"_227":228},[217,218,219],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_35":66,"_13":67,"_38":68,"_40":-5,"_41":42,"_43":69,"_45":46,"_47":70,"_17":63,"_50":64,"_52":-5,"_54":55,"_56":-5,"_18":222},{"_35":58,"_13":59,"_38":60,"_40":-5,"_41":42,"_43":61,"_45":46,"_47":62,"_17":63,"_50":64,"_52":-5,"_54":55,"_56":-5,"_18":221},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_18":220},[37],[59],[67],"pulls","branches","forks",{"_229":63,"_231":63},"connections",{"_229":63,"_230":63},"count","unfilledCount","emptyCount",{"_35":66,"_13":67,"_38":68,"_40":-5,"_41":42,"_43":69,"_45":46,"_47":91,"_17":63,"_50":64,"_52":-5,"_54":55,"_56":-5,"_76":260,"_18":261},{"_35":112,"_13":113,"_38":114,"_40":68,"_41":42,"_43":115,"_45":46,"_47":116,"_17":63,"_50":64,"_52":-5,"_54":55,"_56":-5,"_76":258,"_18":259},{"_35":138,"_13":139,"_38":140,"_40":114,"_41":42,"_43":115,"_45":46,"_47":141,"_17":63,"_50":87,"_52":142,"_54":55,"_56":-5,"_76":256,"_18":257},{"_35":130,"_13":131,"_38":132,"_40":114,"_41":42,"_43":133,"_45":46,"_47":134,"_17":63,"_50":87,"_52":135,"_54":55,"_56":-5,"_76":254,"_18":255},{"_35":122,"_13":123,"_38":124,"_40":114,"_41":42,"_43":125,"_45":46,"_47":126,"_17":63,"_50":87,"_52":127,"_54":55,"_56":-5,"_76":252,"_18":253},{"_35":105,"_13":106,"_38":107,"_40":68,"_41":42,"_43":69,"_45":46,"_47":108,"_17":63,"_50":24,"_52":109,"_54":55,"_56":-5,"_76":250,"_18":251},{"_35":97,"_13":98,"_38":99,"_40":68,"_41":42,"_43":100,"_45":46,"_47":101,"_17":63,"_50":87,"_52":102,"_54":55,"_56":-5,"_76":248,"_18":249},{"_35":58,"_13":59,"_38":60,"_40":-5,"_41":42,"_43":61,"_45":46,"_47":79,"_17":63,"_50":64,"_52":-5,"_54":55,"_56":-5,"_76":246,"_18":247},{"_35":83,"_13":84,"_38":85,"_40":60,"_41":42,"_43":61,"_45":46,"_47":86,"_17":63,"_50":87,"_52":88,"_54":55,"_56":-5,"_76":244,"_18":245},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":75,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_76":242,"_18":243},[],[37],[],[59,84],[240],[59],[],[67,98],[],[67,106],[],[67,113,123],[],[67,113,131],[],[67,113,139],[234,235,236],[67,113],[233,237,238],[67],["D",1776890187437],{"_11":12,"_198":19},{"_11":12,"_192":193,"_194":19,"_155":-5,"_195":196,"_197":46},{"_17":125,"_13":16,"_35":42,"_184":145,"_185":-5,"_186":-5,"_187":-5,"_188":-5,"_189":-5,"_190":14,"_191":12},"ctx",{"_177":-5,"_214":299,"_300":301,"_302":303,"_304":55,"_305":55,"_306":55,"_307":46,"_308":-5,"_309":-7,"_310":-7,"_311":63,"_312":55,"_313":55,"_314":-5,"_315":55,"_316":55,"_317":55,"_318":-5},"ENV",{"_270":271,"_272":273,"_274":16,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292,"_293":294,"_295":296,"_297":298},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]

Code