[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_275":276,"_277":278},"routes/_app.x.$handle.$name",{"_107":106,"_37":50,"_116":93,"_32":117,"_13":14,"_118":-5,"_11":119,"_120":121,"_122":123,"_124":125,"_126":127,"_26":-5,"_128":129,"_130":131,"_132":30,"_133":134,"_135":65,"_136":-5,"_137":-5,"_138":139},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_37":50,"_43":51,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":58,"_59":60,"_19":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":30},"version",8,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","1a170602-89c2-49a3-8dfa-bc6c0fd44f65","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":14,"_46":47,"_29":30},"previous","deleted",false,"deletedHere","path","frontend/components/Vision.tsx","latestPath","fileId","4e11e1ee-6b76-11f1-bc27-1607ee4eb77e","name","Vision.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Reveal } from \"./Reveal.tsx\";\n\nconst STATS = [\n [\"12+\", \"Disciplines under one roof\"],\n [\"2030\", \"Designing for the decade ahead\"],\n [\"100%\", \"Human-centered by principle\"],\n];\n\nexport function Vision() {\n return (\n

\n \n 01 — Vision\n \n\n \n

\n We believe a space should\n anticipate, not just\n contain.\n

\n \n\n

\n \n

\n ONZE Design is a New York studio working at the intersection of\n architecture, interior design, and intelligence. We craft\n environments that sense context, adapt to rhythm, and dissolve the\n line between the built world and the digital one.\n

\n Every project begins with people — how they move, rest, gather, and\n feel — then layers in IoT, spatial computing, and ambient\n intelligence so the technology recedes and the experience leads.\n

\n \n\n \n

\n {STATS.map(([num, label]) => (\n

{num}

{label}

\n ))}\n

\n \n

\n );\n}\n","createdAt",["D",1781829128517],"branchVersion","branchId","a72f0af2-f928-4b4f-928e-62e05a4b8cec","id","d2b682d9-0acf-455f-ad63-713096eed1f2","onze-design",["D",1781829062348],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789739638&sig=a04c9aef4a039051a97f380d545580acd9ccc3b8bedea92f522860d3a56877c5","cfcec6a8-3ac9-4a8d-9e80-06269c13710c","pinnedFileId","019edd49-cf47-77da-bcf5-b065e78fec93","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019edcfb-9acb-730e-976c-b18b93e2146e","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_107":106,"_115":111},"org",{"_107":106,"_108":109,"_110":111,"_19":61,"_112":113,"_114":30},"branch",{"_13":92,"_37":93,"_48":47,"_94":49,"_95":96,"_97":98,"_99":55,"_100":101,"_102":103,"_104":50,"_105":106},"isOwned",16,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",89,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","huiyichen","handle","displayName","Huiyi Chen","avatar","https://lh3.googleusercontent.com/a/ACg8ocKcvnKesQOhxk6RpFlvfII1aVl78dXHVoigJacgq_fiz1OoKIc=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_37":50,"_43":271,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":58,"_59":60,"_19":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":272,"_87":273,"_89":274,"_91":30},"tree",[185,195,196],"files",[185,186,187,188,189,190,191,192,193,194,195,196],"counts",{"_175":69,"_176":156,"_177":69,"_178":179,"_180":181},"contents",[150,151,152],"upstreamProject",{"_48":101,"_37":147,"_57":58,"_59":60,"_54":55,"_85":148},"upstreamBranch",{"_48":96,"_43":140,"_141":142,"_37":93,"_94":101,"_13":143,"_95":-5,"_97":-5,"_144":145,"_52":-5,"_91":30,"_54":55,"_105":146,"_70":103,"_104":147},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter",{"_107":146,"_115":149},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789739638&sig=4d052563389318cbcae87b3f03975c8ea83268a72ff6277d6efa47b8c8e01d69",{"_48":169,"_37":170,"_35":171,"_155":-5,"_46":47,"_45":156,"_157":65,"_43":172,"_13":69,"_39":173,"_41":-5,"_29":30,"_161":-5,"_32":174},{"_48":163,"_37":164,"_35":165,"_155":-5,"_46":47,"_45":156,"_157":30,"_43":166,"_13":69,"_39":26,"_41":167,"_29":30,"_161":-5,"_32":168},{"_48":153,"_37":154,"_35":63,"_155":-5,"_46":47,"_45":156,"_157":65,"_43":158,"_13":69,"_39":159,"_41":160,"_29":30,"_161":50,"_32":162},"a8c27349-88e6-4cf4-b681-42bb0d88b3be","index.ts","parentId",1,"latest",["D",1781829062348],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","label",[154],"83fb1152-2dc2-486b-afb6-c16223ab254f","README.md","019edd49-cf47-77da-bcf5-ad15b99e91e8",["D",1781829062348],"# 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[\"index.html\"]\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 index.html ← HTML shell (loads Twind + React)\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/index.html`** loads Twind and the 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",[164],"934d61e3-43a5-45f0-867f-b0d90a5ebf33","frontend","019edd49-cf47-77da-bcf5-a8b0b77637f0",["D",1781829062348],"directory",[170],"pulls","branches","forks","envVars",{"_182":69,"_184":69},"connections",{"_182":69,"_183":69},"count","unfilledCount","emptyCount",{"_48":169,"_37":170,"_35":171,"_155":-5,"_46":47,"_45":156,"_157":65,"_43":268,"_13":69,"_39":173,"_41":-5,"_29":30,"_161":-5,"_198":269,"_32":270},{"_48":264,"_37":232,"_35":228,"_155":171,"_46":47,"_45":156,"_157":65,"_43":265,"_13":69,"_39":173,"_41":-5,"_29":30,"_161":-5,"_198":266,"_32":267},{"_48":257,"_37":258,"_35":259,"_155":228,"_46":47,"_45":156,"_157":30,"_43":260,"_13":69,"_39":40,"_41":261,"_29":30,"_161":-5,"_198":262,"_32":263},{"_48":249,"_37":250,"_35":251,"_155":228,"_46":47,"_45":252,"_157":30,"_43":253,"_13":69,"_39":40,"_41":254,"_29":30,"_161":-5,"_198":255,"_32":256},{"_48":241,"_37":242,"_35":243,"_155":228,"_46":47,"_45":244,"_157":65,"_43":245,"_13":69,"_39":40,"_41":246,"_29":30,"_161":-5,"_198":247,"_32":248},{"_48":233,"_37":234,"_35":235,"_155":228,"_46":47,"_45":236,"_157":65,"_43":237,"_13":69,"_39":40,"_41":238,"_29":30,"_161":-5,"_198":239,"_32":240},{"_48":227,"_37":38,"_35":36,"_155":228,"_46":47,"_45":14,"_157":65,"_43":229,"_13":69,"_39":40,"_41":42,"_29":30,"_161":-5,"_198":230,"_32":231},{"_48":219,"_37":220,"_35":221,"_155":171,"_46":47,"_45":222,"_157":65,"_43":223,"_13":156,"_39":26,"_41":224,"_29":30,"_161":-5,"_198":225,"_32":226},{"_48":211,"_37":212,"_35":213,"_155":171,"_46":47,"_45":214,"_157":65,"_43":215,"_13":156,"_39":26,"_41":216,"_29":30,"_161":-5,"_198":217,"_32":218},{"_48":204,"_37":205,"_35":206,"_155":171,"_46":47,"_45":156,"_157":65,"_43":207,"_13":69,"_39":40,"_41":208,"_29":30,"_161":-5,"_198":209,"_32":210},{"_48":163,"_37":164,"_35":165,"_155":-5,"_46":47,"_45":156,"_157":30,"_43":201,"_13":69,"_39":26,"_41":167,"_29":30,"_161":-5,"_198":202,"_32":203},{"_48":153,"_37":154,"_35":63,"_155":-5,"_46":47,"_45":156,"_157":65,"_43":197,"_13":69,"_39":159,"_41":160,"_29":30,"_161":50,"_198":199,"_32":200},["D",1781829062348],"children",[],[154],["D",1781829062348],[],[164],"a864fa5f-ce56-49ee-abe9-9eeebf85188f","index.tsx","019edd49-cf47-77da-bcf5-a7b853bf8a6d",["D",1781829062348],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[170,205],"31839070-1821-4d35-961a-1912d5311ca7","index.html","019edd49-cf47-77da-bcf5-a22e0d3b6900",2,["D",1781829075789],"\n\n \n \n \n ONZE Design — Designing Spaces That Understand You\n \n \n \n \n \n \n \n \n \n \n \n

\n \n \n\n",[],[170,212],"84f762a3-2091-428b-95e7-a287cd0b24bc","favicon.svg","019edd49-cf46-74de-b0ae-061b10a57cf9",4,["D",1781829087389],"\n\n",[],[170,220],"912818c3-4a19-432e-af2b-394a9efff49c","019edd49-cf46-74de-b0ae-02a0c418bccf",["D",1781829128517],[],[170,232,38],"components","382527ae-d1b7-4d3d-a656-70b44a0c3da0","Reveal.tsx","346e5d26-6b76-11f1-8759-1607ee4eb77e",3,["D",1781829085504],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\n/**\n * Wraps children in a div that fades + slides up when scrolled into view.\n * `delay` (ms) staggers grouped elements.\n */\nexport function Reveal(\n { children, delay = 0, className = \"\" }: {\n children: any;\n delay?: number;\n className?: string;\n },\n) {\n const ref = useRef(null);\n const [shown, setShown] = useState(false);\n\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n const io = new IntersectionObserver(\n ([entry]) => {\n if (entry.isIntersecting) {\n setShown(true);\n io.disconnect();\n }\n },\n { threshold: 0.15 },\n );\n io.observe(el);\n return () => io.disconnect();\n }, []);\n\n return (\n \n {children}\n \n );\n}\n",[],[170,232,234],"6cca57d3-86e5-4be8-b9ac-a7ad752b1f06","Nav.tsx","3f832db8-6b76-11f1-8251-1607ee4eb77e",6,["D",1781829104090],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\nconst LINKS = [\n [\"Vision\", \"#vision\"],\n [\"Experiences\", \"#experiences\"],\n [\"Projects\", \"#projects\"],\n [\"Technologies\", \"#technologies\"],\n [\"About\", \"#about\"],\n [\"Contact\", \"#contact\"],\n];\n\nexport function Nav() {\n const [scrolled, setScrolled] = useState(false);\n const [open, setOpen] = useState(false);\n\n useEffect(() => {\n const onScroll = () => setScrolled(window.scrollY > 24);\n onScroll();\n window.addEventListener(\"scroll\", onScroll, { passive: true });\n return () => window.removeEventListener(\"scroll\", onScroll);\n }, []);\n\n return (\n \n

\n \n \n \n \n \n ONZE\n \n\n \n\n \n Start a project\n \n\n setOpen((o) => !o)}\n aria-label=\"Menu\"\n >\n \n \n \n \n

\n\n {open && (\n

\n {LINKS.map(([label, href]) => (\n setOpen(false)}\n class=\"text-lg text-white/80 hover:text-white\"\n >\n {label}\n \n ))}\n

\n )}\n \n );\n}\n",[],[170,232,242],"ed154dfb-bdc3-47c0-bfec-608ecefb58b0","Hero.tsx","463e9c32-6b76-11f1-833b-1607ee4eb77e",7,["D",1781829115386],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport function Hero() {\n return (\n

\n {/* Architectural backdrop */}\n

\n \n

\n\n

\n \n \n New York · Smart Space Design Studio\n \n

\n\n \n Designing Spaces
That Understand You\n \n\n \n Architecture, intelligence, and human-centered technology for the next\n generation of living.\n

\n\n \n \n Explore our work\n →\n \n \n Our vision\n \n

\n \n\n {/* Scroll cue */}\n

\n Scroll\n \n

\n );\n}\n",[],[170,232,250],"d987fecc-1a18-48d9-b256-5a75e2a336be","App.tsx","019edd49-cf46-74de-b0ad-fbde43c26370",["D",1781829062348],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Counter } from \"./Counter.tsx\";\n\nexport function App() {\n return (\n

React + Hono Starter

\n \n

\n View source\n

\n );\n}\n",[],[170,232,258],"6b6ade74-a64e-485e-8ede-b5e75a896d32",["D",1781829062348],[187,188,189,190,191],[170,232],["D",1781829062348],[186,192,193,194],[170],["D",1781829062348],{"_107":106,"_115":111},{"_107":106,"_108":109,"_110":111,"_19":61,"_112":113,"_114":30},{"_13":92,"_37":93,"_48":47,"_94":49,"_95":96,"_97":98,"_99":55,"_100":101,"_102":103,"_104":50,"_105":106},"ctx",{"_85":-5,"_137":308,"_309":310,"_311":312,"_313":30,"_314":30,"_315":30,"_316":65,"_317":-5,"_318":-7,"_319":-7,"_320":69,"_321":30,"_322":30,"_323":-5,"_324":30,"_325":30,"_326":30,"_327":-5},"ENV",{"_279":280,"_281":282,"_283":93,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","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 · v8