[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_328":329,"_330":331},"routes/_app.x.$handle.$name",{"_100":99,"_32":45,"_109":87,"_27":110,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_20":-5,"_121":122,"_123":124,"_125":25,"_126":127,"_128":59,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":25},"version",175,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":20,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":20,"_35":36},"deleted",false,"deletedHere","path","css/base.css","latestPath","fileId","8d681f3a-3287-11f0-959f-569c3dd06744","name","base.css","fileType","content","* { box-sizing: border-box }\n\nbody {\n font-family: system-ui, sans-serif;\n line-height: 1.5;\n margin: 0;\n color: black;\n background-color: white;\n}\n\n.container {\n max-width: 1024px;\n margin: 0 auto;\n padding: 32px;\n}\n.container.small {\n max-width: 768px;\n}\n\nbutton {\n appearance: none;\n display: inline-flex;\n align-items: center;\n font-family: inherit;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n border-radius: 2px;\n font-weight: bold;\n color: white;\n background-color: black;\n padding: 6px 12px;\n border: 0;\n}\nbutton:hover {\n background-color: cyan;\n}","* { box-sizing: border-box }\n\nbody {\n font-family: system-ui, sans-serif;\n line-height: 1.5;\n margin: 0;\n color: black;\n background-color: white;\n}\n\n.container {\n max-width: 1024px;\n margin: 0 auto;\n padding: 32px;\n}\n.container.small {\n max-width: 768px;\n}\n\nbutton {\n appearance: none;\n display: inline-flex;\n align-items: center;\n font-family: inherit;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n border-radius: 2px;\n font-weight: bold;\n color: white;\n background-color: black;\n padding: 6px 12px;\n border: 0;\n}\nbutton:hover {\n color: black;\n background-color: cyan;\n}","createdAt",["D",1747423372849],"branchVersion","branchId","7c696510-327b-11f0-b5f6-569c3dd06744","id","7c6732c2-327b-11f0-b5f6-569c3dd06744","vectors",["D",1747416639792],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Generative SVG prototypes","imageUrl","5e11e267-23cd-4ee4-86f4-3bf2a5ed69d7","pinnedFileId","0a757b7c-b040-11f0-a966-0224a6c84d84","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","62a75f8d-be32-4eaa-989a-23f3433a7d42","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_108":104},"org",{"_100":99,"_101":102,"_103":104,"_18":55,"_105":106,"_107":25},"branch",{"_13":86,"_32":87,"_43":42,"_88":44,"_89":90,"_91":92,"_93":50,"_94":95,"_96":65,"_97":45,"_98":99},"isOwned",315,"main","projectId","forkedBranchId","3f6d7dac-3197-11f0-bd56-569c3dd06744","forkedBranchVersion",31,"forkedProjectPrivacy","forkedProjectId","3f6981c0-3197-11f0-bd56-569c3dd06744","forkedProjectOrgId","projectName","userHandle","jxnblk","handle","displayName","Brent Jackson","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/fca87e60-4ad1-453c-af10-2782c6823400/square512?exp=1789541999&sig=cd7ab82d7a2c251c2954a6081b82296502810d9ea0d3ea85e441f8b36f960103","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":324,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":325,"_81":326,"_83":327,"_85":25},"tree",[212,214,216,221,225,226,227],"files",[212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227],"counts",{"_202":63,"_203":167,"_204":63,"_205":206,"_207":208},"contents",[143,144,145,146,147,148,149],"upstreamProject",{"_43":95,"_32":139,"_52":140,"_54":141,"_49":50,"_79":142},"upstreamBranch",{"_43":90,"_38":133,"_134":135,"_32":87,"_88":95,"_13":136,"_89":-5,"_91":-5,"_137":138,"_47":-5,"_85":25,"_49":50,"_98":99,"_64":65,"_97":139},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1747318612210],"updatedAt",["D",1779898921971],34,"lockfileKey","1786296728251-esm.town_v_jxnblk_react-router-hono-starter@34-main","react-router-hono-starter","Minimal React Router + Hono starter example","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c6ac4b2d-2d7e-4ea8-c2bf-7e369bfdb600/square512?exp=1789541999&sig=0cf519b8f263840e867ddef5cfc364bdbc87f8b62086762b2ee40ed269b9b41d",{"_100":99,"_108":104},{"_43":196,"_32":197,"_30":198,"_153":-5,"_41":42,"_40":199,"_155":59,"_38":200,"_13":176,"_34":183,"_35":-5,"_24":25,"_160":-5,"_27":201},{"_43":191,"_32":192,"_30":193,"_153":-5,"_41":42,"_40":92,"_155":59,"_38":194,"_13":174,"_34":183,"_35":-5,"_24":25,"_160":-5,"_27":195},{"_43":185,"_32":186,"_30":187,"_153":-5,"_41":42,"_40":188,"_155":59,"_38":189,"_13":176,"_34":183,"_35":-5,"_24":25,"_160":-5,"_27":190},{"_43":179,"_32":45,"_30":180,"_153":-5,"_41":42,"_40":181,"_155":59,"_38":182,"_13":176,"_34":183,"_35":-5,"_24":25,"_160":-5,"_27":184},{"_43":171,"_32":172,"_30":173,"_153":-5,"_41":42,"_40":174,"_155":25,"_38":175,"_13":176,"_34":20,"_35":177,"_24":25,"_160":-5,"_27":178},{"_43":162,"_32":163,"_30":164,"_153":-5,"_41":42,"_40":165,"_155":59,"_38":166,"_13":167,"_34":168,"_35":169,"_24":25,"_160":-5,"_27":170},{"_43":150,"_32":151,"_30":152,"_153":-5,"_41":42,"_40":154,"_155":25,"_38":156,"_13":157,"_34":158,"_35":159,"_24":25,"_160":-5,"_27":161},"3a49018e-3287-11f0-b21c-569c3dd06744","server.tsx","999db588-d86e-4793-b415-ef4c24e621d4","parentId",128,"latest",["D",1747421682823],4,"http","/** @jsxImportSource ./jsx */\nimport { Hono } from \"npm:hono@4\";\nimport * as React from \"https://esm.sh/react@19\";\nimport ReactDOMServer from \"https://esm.sh/react-dom@19/server\";\nimport {\n createStaticHandler,\n createStaticRouter,\n StaticRouterProvider,\n} from \"https://esm.sh/react-router\";\nimport routes from \"./routes/index.tsx\";\n\nconst CLIENT_MODULE = import.meta.resolve(\"./client.tsx\");\n\nconst app = new Hono();\n\n// api server\napp.get(\"/api\", async (c) => {\n return c.json({ hello: \"hi\" });\n});\n\n// react app\napp.get(\"*\", async (c) => {\n const { query, dataRoutes } = createStaticHandler(routes);\n const context = await query(c.req.raw);\n const router = createStaticRouter(dataRoutes, context);\n \n let html = await ReactDOMServer.renderToReadableStream(\n \n , {\n bootstrapModules: [ CLIENT_MODULE ],\n });\n\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });\n});\n\nexport default app.fetch;","label",[151],"4cbb30bc-327d-11f0-87a9-569c3dd06744","client.tsx","ae786305-32cc-4754-89be-cd264f5cec93",39,["D",1747417418803],3,"script","/** @jsxImportSource ./jsx */\nimport React from \"https://esm.sh/react@19\";\nimport ReactDOM from \"https://esm.sh/react-dom@19/client\";\nimport { createBrowserRouter, RouterProvider } from \"https://esm.sh/react-router\";\nimport routes from \"./routes/index.tsx\";\n\nconst router = createBrowserRouter(routes);\n\nReactDOM.hydrateRoot(\n document, \n \n);",[163],"829058b8-327b-11f0-a78d-569c3dd06744","README.md","d5a8023a-ec40-4846-bce4-66ec0a83d0e1",2,["D",1747416650126],1,"# Vectors",[172],"dbf501c8-327c-11f0-8a51-569c3dd06744","da202f1c-327c-11f0-9586-569c3dd06744",25,["D",1747417229598],"directory",[45],"8ab3fb9e-327b-11f0-9ca3-569c3dd06744","routes","8990300c-327b-11f0-9661-569c3dd06744",5,["D",1747416663781],[186],"09eea174-327d-11f0-87a9-569c3dd06744","jsx","022b0c66-327d-11f0-8082-569c3dd06744",["D",1747417306732],[192],"8bb73c70-3287-11f0-8b66-569c3dd06744","css","8a84b09e-3287-11f0-8760-569c3dd06744",130,["D",1747421819441],[197],"pulls","branches","forks","envVars",{"_209":63,"_211":63},"connections",{"_209":63,"_210":63},"count","unfilledCount","emptyCount",{"_43":196,"_32":197,"_30":198,"_153":-5,"_41":42,"_40":199,"_155":59,"_38":321,"_13":176,"_34":183,"_35":-5,"_24":25,"_160":-5,"_229":322,"_27":323},{"_43":316,"_32":33,"_30":31,"_153":198,"_41":42,"_40":14,"_155":25,"_38":317,"_13":318,"_34":20,"_35":37,"_24":25,"_160":-5,"_229":319,"_27":320},{"_43":191,"_32":192,"_30":193,"_153":-5,"_41":42,"_40":92,"_155":59,"_38":313,"_13":174,"_34":183,"_35":-5,"_24":25,"_160":-5,"_229":314,"_27":315},{"_43":305,"_32":306,"_30":307,"_153":193,"_41":42,"_40":308,"_155":25,"_38":309,"_13":167,"_34":168,"_35":310,"_24":25,"_160":-5,"_229":311,"_27":312},{"_43":185,"_32":186,"_30":187,"_153":-5,"_41":42,"_40":188,"_155":59,"_38":302,"_13":176,"_34":183,"_35":-5,"_24":25,"_160":-5,"_229":303,"_27":304},{"_43":293,"_32":294,"_30":295,"_153":187,"_41":42,"_40":296,"_155":25,"_38":297,"_13":298,"_34":168,"_35":299,"_24":25,"_160":-5,"_229":300,"_27":301},{"_43":284,"_32":285,"_30":286,"_153":187,"_41":42,"_40":287,"_155":25,"_38":288,"_13":289,"_34":168,"_35":290,"_24":25,"_160":-5,"_229":291,"_27":292},{"_43":275,"_32":276,"_30":277,"_153":187,"_41":42,"_40":278,"_155":25,"_38":279,"_13":280,"_34":168,"_35":281,"_24":25,"_160":-5,"_229":282,"_27":283},{"_43":267,"_32":268,"_30":269,"_153":187,"_41":42,"_40":270,"_155":59,"_38":271,"_13":243,"_34":168,"_35":272,"_24":25,"_160":-5,"_229":273,"_27":274},{"_43":179,"_32":45,"_30":180,"_153":-5,"_41":42,"_40":181,"_155":59,"_38":264,"_13":176,"_34":183,"_35":-5,"_24":25,"_160":-5,"_229":265,"_27":266},{"_43":255,"_32":256,"_30":257,"_153":180,"_41":42,"_40":258,"_155":59,"_38":259,"_13":260,"_34":168,"_35":261,"_24":25,"_160":-5,"_229":262,"_27":263},{"_43":247,"_32":248,"_30":249,"_153":180,"_41":42,"_40":250,"_155":59,"_38":251,"_13":174,"_34":168,"_35":252,"_24":25,"_160":-5,"_229":253,"_27":254},{"_43":238,"_32":239,"_30":240,"_153":180,"_41":42,"_40":241,"_155":25,"_38":242,"_13":243,"_34":168,"_35":244,"_24":25,"_160":-5,"_229":245,"_27":246},{"_43":171,"_32":172,"_30":173,"_153":-5,"_41":42,"_40":174,"_155":25,"_38":235,"_13":176,"_34":20,"_35":177,"_24":25,"_160":-5,"_229":236,"_27":237},{"_43":162,"_32":163,"_30":164,"_153":-5,"_41":42,"_40":165,"_155":59,"_38":232,"_13":167,"_34":168,"_35":169,"_24":25,"_160":-5,"_229":233,"_27":234},{"_43":150,"_32":151,"_30":152,"_153":-5,"_41":42,"_40":154,"_155":25,"_38":228,"_13":157,"_34":158,"_35":159,"_24":25,"_160":-5,"_229":230,"_27":231},["D",1747421682823],"children",[],[151],["D",1747417418803],[],[163],["D",1747416650126],[],[172],"bfc862b6-328a-11f0-a68f-569c3dd06744","identicon.tsx","aa69e960-3282-11f0-93c5-569c3dd06744",167,["D",1747423195284],43,"/** @jsxImportSource ../jsx */\nimport { useState } from \"https://esm.sh/react@19\";\nimport { useParams, useSearchParams, useNavigate } from \"https://esm.sh/react-router\";\nimport MD5 from \"https://esm.sh/js-md5\";\nimport chroma from \"https://esm.sh/chroma-js\";\n\nexport const path = \"identicon/:name?\";\n\nfunction negate (color: string) {\n const rgb = chroma(color).rgb();\n const neg = rgb.map((val) => 255 - val);\n return chroma(neg);\n}\n\nfunction toBinary (hex: string) {\n let bin = \"\";\n for (let i = 0; i < hex.length; i++) {\n const d = parseInt(hex[i], 16);\n const b = d.toString(2).padStart(4, \"0\");\n bin += b;\n }\n return bin;\n}\n\nconst size = 256;\nconst resolution = 5;\nconst viewBox = `0 0 ${size} ${size}`;\nconst cell = size / resolution;\nconst radius = cell / 2;\n\nfunction getPoints (pattern: string) {\n const points: { x: number, y: number }[] = [];\n const half = resolution / 2;\n for (let y = 0; y < resolution; y++) {\n for (let x = 0; x < half; x++) {\n const index = y * half + x;\n if (pattern[index] === \"1\") {\n points.push({ x, y });\n if (x < Math.floor(resolution / 2)) {\n const x2 = resolution - 1 - x;\n points.push({ x: x2, y });\n }\n }\n }\n }\n return points;\n}\n\n\nexport function Component () {\n const { name } = useParams();\n const [searchParams] = useSearchParams();\n\n const hash = MD5(name ?? \"\");\n const color = \"#\" + hash.substring(0, 6);\n const comp = negate(color).hex();\n const pattern = toBinary(hash.substring(6));\n const points = getPoints(pattern);\n const background = searchParams.has(\"background\");\n console.log({\n hash,\n pattern,\n points,\n });\n\n return (\n

\n \n {background && (\n \n )}\n {points.map((p, i) => (\n \n ))}\n \n \n

\n )\n \n}\n\nfunction NameForm () {\n const params = useParams();\n const navigate = useNavigate();\n const [name, setName] = useState(params.name ?? \"\");\n const [searchParams, setSearchParams] = useSearchParams();\n const bg = searchParams.has(\"background\");\n\n const toggleBackground = () => {\n if (searchParams.has(\"background\")) {\n searchParams.delete(\"background\");\n } else {\n searchParams.append(\"background\", \"1\");\n }\n setSearchParams(searchParams);\n }\n\n return (\n {\n e.preventDefault();\n console.log(\"submit\", name);\n navigate(`/vector/identicon/${name}`);\n }}>\n \n Name\n \n {\n setName(e.target.value);\n }}\n />\n \n\n \n \n \n )\n}",[],[45,239],"c7ab5782-3284-11f0-91c4-569c3dd06744","comp-color.tsx","41538ec0-3284-11f0-8125-569c3dd06744",110,["D",1747420631536],"import chroma from \"https://esm.sh/chroma-js\";\n\nexport const negate = (color: string) => {\n const rgb = chroma(color).rgb();\n const neg = rgb.map((val) => 255 - val);\n return chroma(neg);\n}",[],[45,248],"6e3d4574-3280-11f0-9821-569c3dd06744","circle","dec13f3e-327c-11f0-87a9-569c3dd06744",82,["D",1747418763507],8,"/** @jsxImportSource ../jsx */\n\nexport function Component () {\n return (\n \n \n \n \n );\n}",[],[45,256],["D",1747417229598],[222,223,224],[45],"3177d898-328a-11f0-bc28-569c3dd06744","vector.tsx","92b6539e-327d-11f0-85fe-569c3dd06744",158,["D",1747422956521],"/** @jsxImportSource ../jsx */\nimport { useLoaderData, Outlet } from \"https://esm.sh/react-router\";\nimport * as ident from \"../vectors/identicon.tsx\";\n\nexport const path = \"vector\";\n\nexport async function loader (_args) {\n return {\n };\n}\n\nexport function Component () {\n const data = useLoaderData();\n\n return (\n

Vector

\n \n\n

{JSON.stringify(data, null, 2)}

\n );\n}\n\nexport const children = [\n {\n path: \"circle\",\n lazy: async () => await import(\"../vectors/circle\"),\n },\n {\n path: \"lazy-identicon/:name?\",\n lazy: async () => await import(\"../vectors/identicon.tsx\"),\n },\n ident,\n];",[],[186,268],"9e98dd8c-328a-11f0-834f-569c3dd06744","root.tsx","8de6d93a-327b-11f0-a8de-569c3dd06744",164,["D",1747423139609],16,"/** @jsxImportSource ../jsx */\nimport React from \"https://esm.sh/react@19\";\nimport { useLoaderData, Link, Outlet } from \"https://esm.sh/react-router@7\";\n\nconst STYLESHEET = import.meta.resolve(\"../css/base.css\").replace(\"esm.town\", \"juicy.town\");\n\nfunction HTML ({ children }: {\n children: React.ReactNode;\n}) {\n return (\n \n \n vectors\n \n \n \n \n \n {children}\n \n \n )\n}\n\nexport default function Layout () {\n return (\n \n

\n \n

\n \n );\n}",[],[186,276],"c5140eb4-3280-11f0-96a0-569c3dd06744","index.tsx","c3c5d6fa-327b-11f0-a8de-569c3dd06744",91,["D",1747418909201],11,"import Root from \"./root.tsx\";\nimport * as home from \"./home.tsx\";\nimport * as vector from \"./vector.tsx\";\n\n// vectors\nimport Circle from \"../vectors/circle\";\n\nexport const routes = [\n {\n Component: Root,\n children: [\n home,\n vector,\n ]\n },\n]\n\nexport default routes;",[],[186,285],"b60d39cc-3280-11f0-85b6-569c3dd06744","home.tsx","de53692e-327b-11f0-81fa-569c3dd06744",89,["D",1747418883992],6,"/** @jsxImportSource ../jsx */\nexport const index = true;\n\nexport function Component () {\n return (\n

Vectors

\n );\n}",[],[186,294],["D",1747416663781],[217,218,219,220],[186],"44aaa088-327d-11f0-9fe0-569c3dd06744","jsx-runtime","0b887622-327d-11f0-87a9-569c3dd06744",38,["D",1747417405273],"export { jsx, jsxs } from 'https://esm.sh/react@19/jsx-runtime';\nexport { Fragment } from \"https://esm.sh/react@19\";",[],[192,306],["D",1747417306732],[215],[192],"299e6e92-328b-11f0-a284-569c3dd06744",["D",1747423372849],15,[],[197,33],["D",1747421819441],[213],[197],["D",1747416639792],{"_100":99,"_108":104},{"_100":99,"_101":102,"_103":104,"_18":55,"_105":106,"_107":25},{"_13":86,"_32":87,"_43":42,"_88":44,"_89":90,"_91":92,"_93":50,"_94":95,"_96":65,"_97":45,"_98":99},"ctx",{"_79":-5,"_130":361,"_362":363,"_364":365,"_366":25,"_367":25,"_368":25,"_369":59,"_370":-5,"_371":-7,"_372":-7,"_373":63,"_374":25,"_375":25,"_376":-5,"_377":25,"_378":25,"_379":25,"_380":-5},"ENV",{"_332":333,"_334":335,"_336":87,"_337":338,"_339":340,"_341":342,"_343":344,"_345":346,"_347":348,"_349":350,"_351":352,"_353":354,"_355":356,"_357":358,"_359":360},"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"]

Diff · v175