[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_351":352,"_353":354},"routes/_app.x.$handle.$name",{"_97":96,"_32":44,"_106":85,"_27":107,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":119,"_120":121,"_122":25,"_123":124,"_125":58,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":58,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",3,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","server.tsx","latestPath","fileId","0198e849-fc51-72c8-9417-2f4ab139b385","name","fileType","http","content","/** @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;","createdAt",["D",1787605021340],"branchVersion","branchId","dd704b24-82c3-11f0-9698-0224a6c84d84","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",{"_97":96,"_105":101},"org",{"_97":96,"_98":99,"_100":101,"_18":54,"_102":103,"_104":25},"branch",{"_13":14,"_32":85,"_42":41,"_86":43,"_87":88,"_89":90,"_91":49,"_92":43,"_93":64,"_94":44,"_95":96},"isOwned","diff-test","projectId","forkedBranchId","7c696510-327b-11f0-b5f6-569c3dd06744","forkedBranchVersion",307,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","jxnblk","handle","displayName","Brent Jackson","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/fca87e60-4ad1-453c-af10-2782c6823400/square512?exp=1789588398&sig=8e758838c2cf0bf4aa00ec5f61c77d14c976fed56de3096590d2da708f7aeead","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_32":44,"_37":347,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":58,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":348,"_80":349,"_82":350,"_84":25},"tree",[216,218,220,226,232,233,234,235,236],"files",[216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236],"counts",{"_206":62,"_207":14,"_208":62,"_209":210,"_211":212},"contents",[144,145,146,147,148,149,150,151,152],"upstreamProject",{"_42":139,"_32":140,"_51":141,"_53":142,"_48":49,"_78":143},"upstreamBranch",{"_42":88,"_37":130,"_131":132,"_32":133,"_86":43,"_13":134,"_87":135,"_89":136,"_137":138,"_46":-5,"_84":25,"_48":49,"_95":96,"_63":64,"_94":44},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1747416639792],"updatedAt",["D",1761244958535],"main",315,"3f6d7dac-3197-11f0-bd56-569c3dd06744",31,"lockfileKey","1787605018187-esm.town_v_jxnblk_vectors@315-main","3f6981c0-3197-11f0-bd56-569c3dd06744","react-router-hono-starter","Minimal React Router + Hono starter example","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c6ac4b2d-2d7e-4ea8-c2bf-7e369bfdb600/square512?exp=1789588398&sig=9cf81843dc5d7fd155bb60ec45a1c1ef52f87a1632a13c178016081f7381037e",{"_97":96,"_105":101},{"_42":201,"_32":202,"_30":203,"_154":-5,"_40":41,"_39":157,"_155":58,"_37":204,"_13":62,"_33":189,"_35":-5,"_24":25,"_158":-5,"_27":205},{"_42":196,"_32":197,"_30":198,"_154":-5,"_40":41,"_39":157,"_155":58,"_37":199,"_13":62,"_33":189,"_35":-5,"_24":25,"_158":-5,"_27":200},{"_42":191,"_32":192,"_30":193,"_154":-5,"_40":41,"_39":157,"_155":58,"_37":194,"_13":62,"_33":189,"_35":-5,"_24":25,"_158":-5,"_27":195},{"_42":186,"_32":44,"_30":187,"_154":-5,"_40":41,"_39":157,"_155":58,"_37":188,"_13":62,"_33":189,"_35":-5,"_24":25,"_158":-5,"_27":190},{"_42":180,"_32":181,"_30":182,"_154":-5,"_40":41,"_39":157,"_155":58,"_37":183,"_13":62,"_33":20,"_35":184,"_24":25,"_158":-5,"_27":185},{"_42":173,"_32":174,"_30":175,"_154":-5,"_40":41,"_39":157,"_155":58,"_37":176,"_13":62,"_33":177,"_35":178,"_24":25,"_158":-5,"_27":179},{"_42":166,"_32":167,"_30":168,"_154":-5,"_40":41,"_39":169,"_155":58,"_37":170,"_13":157,"_33":34,"_35":171,"_24":25,"_158":-5,"_27":172},{"_42":160,"_32":161,"_30":162,"_154":-5,"_40":41,"_39":157,"_155":58,"_37":163,"_13":62,"_33":34,"_35":164,"_24":25,"_158":-5,"_27":165},{"_42":153,"_32":28,"_30":31,"_154":-5,"_40":41,"_39":14,"_155":58,"_37":156,"_13":157,"_33":34,"_35":36,"_24":25,"_158":-5,"_27":159},"134d2504-1a9c-4272-8cef-b08c1954041e","parentId","latest",["D",1787605021340],1,"label",[28],"dd93c144-82c3-11f0-803b-0224a6c84d84","identicon.png.tsx","0198e849-fc51-72c8-9417-29bd184b9de6",["D",1756243819605],"/** @jsxImportSource ./jsx */\nimport { Identicon2D } from \"./vectors/identicon.tsx\";\nimport { renderToString } from \"npm:react-dom@19/server\";\nimport { render } from \"https://deno.land/x/resvg_wasm@0.2.0/mod.ts\";\n\n\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n const name = url.searchParams.get(\"name\");\n const svg = renderToString();\n const png = await render(svg);\n \n return new Response(png, {\n headers: {\n \"Content-Type\": \"image/png\",\n },\n });\n \n // return new Response(svg, {\n // headers: {\n // \"Content-Type\": \"image/svg+xml\",\n // },\n // });\n}",[161],"e3fd73b8-82c3-11f0-9698-0224a6c84d84","identicon-square.png.tsx","0198e849-fc51-72c8-9417-256fade72f1c",2,["D",1756243830365],"/** @jsxImportSource ./jsx */\nimport { Identicon2D } from \"./vectors/identicon-square.tsx\";\nimport { renderToString } from \"npm:react-dom@19/server\";\nimport { render } from \"https://deno.land/x/resvg_wasm@0.2.0/mod.ts\";\n\n\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n const name = url.searchParams.get(\"name\");\n const svg = renderToString();\n const png = await render(svg);\n \n return new Response(png, {\n headers: {\n \"Content-Type\": \"image/png\",\n },\n });\n}",[167],"dd93bf14-82c3-11f0-803b-0224a6c84d84","client.tsx","0198e849-fc51-72c8-9417-22863fe2aba8",["D",1756243819605],"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);",[174],"dd93be10-82c3-11f0-803b-0224a6c84d84","README.md","0198e849-fc51-72c8-9417-1d72a7881f01",["D",1756243819605],"# Vectors\n\n",[181],"dd93bcee-82c3-11f0-803b-0224a6c84d84","0198e849-fc51-72c8-9417-196921712f08",["D",1756243819605],"directory",[44],"dd93a678-82c3-11f0-803b-0224a6c84d84","routes","0198e849-fc51-72c8-9417-00b4ca2cc6c0",["D",1756243819605],[192],"dd939890-82c3-11f0-803b-0224a6c84d84","jsx","0198e849-fc50-7425-a0f7-1127732d596f",["D",1756243819605],[197],"dd93953e-82c3-11f0-803b-0224a6c84d84","css","0198e849-fc50-7425-a0f7-0a547632c8bb",["D",1756243819605],[202],"pulls","branches","forks","envVars",{"_213":62,"_215":62},"connections",{"_213":62,"_214":62},"count","unfilledCount","emptyCount",{"_42":201,"_32":202,"_30":203,"_154":-5,"_40":41,"_39":157,"_155":58,"_37":344,"_13":62,"_33":189,"_35":-5,"_24":25,"_158":-5,"_238":345,"_27":346},{"_42":337,"_32":338,"_30":339,"_154":203,"_40":41,"_39":157,"_155":58,"_37":340,"_13":62,"_33":20,"_35":341,"_24":25,"_158":-5,"_238":342,"_27":343},{"_42":196,"_32":197,"_30":198,"_154":-5,"_40":41,"_39":157,"_155":58,"_37":334,"_13":62,"_33":189,"_35":-5,"_24":25,"_158":-5,"_238":335,"_27":336},{"_42":327,"_32":328,"_30":329,"_154":198,"_40":41,"_39":157,"_155":58,"_37":330,"_13":62,"_33":177,"_35":331,"_24":25,"_158":-5,"_238":332,"_27":333},{"_42":191,"_32":192,"_30":193,"_154":-5,"_40":41,"_39":157,"_155":58,"_37":324,"_13":62,"_33":189,"_35":-5,"_24":25,"_158":-5,"_238":325,"_27":326},{"_42":317,"_32":318,"_30":319,"_154":193,"_40":41,"_39":157,"_155":58,"_37":320,"_13":62,"_33":177,"_35":321,"_24":25,"_158":-5,"_238":322,"_27":323},{"_42":311,"_32":260,"_30":312,"_154":193,"_40":41,"_39":157,"_155":58,"_37":313,"_13":62,"_33":177,"_35":314,"_24":25,"_158":-5,"_238":315,"_27":316},{"_42":304,"_32":305,"_30":306,"_154":193,"_40":41,"_39":157,"_155":58,"_37":307,"_13":62,"_33":177,"_35":308,"_24":25,"_158":-5,"_238":309,"_27":310},{"_42":297,"_32":298,"_30":299,"_154":193,"_40":41,"_39":157,"_155":58,"_37":300,"_13":62,"_33":177,"_35":301,"_24":25,"_158":-5,"_238":302,"_27":303},{"_42":290,"_32":291,"_30":292,"_154":193,"_40":41,"_39":157,"_155":58,"_37":293,"_13":62,"_33":177,"_35":294,"_24":25,"_158":-5,"_238":295,"_27":296},{"_42":186,"_32":44,"_30":187,"_154":-5,"_40":41,"_39":157,"_155":58,"_37":287,"_13":62,"_33":189,"_35":-5,"_24":25,"_158":-5,"_238":288,"_27":289},{"_42":280,"_32":281,"_30":282,"_154":187,"_40":41,"_39":157,"_155":58,"_37":283,"_13":62,"_33":177,"_35":284,"_24":25,"_158":-5,"_238":285,"_27":286},{"_42":273,"_32":274,"_30":275,"_154":187,"_40":41,"_39":157,"_155":58,"_37":276,"_13":62,"_33":177,"_35":277,"_24":25,"_158":-5,"_238":278,"_27":279},{"_42":266,"_32":267,"_30":268,"_154":187,"_40":41,"_39":157,"_155":58,"_37":269,"_13":62,"_33":177,"_35":270,"_24":25,"_158":-5,"_238":271,"_27":272},{"_42":259,"_32":260,"_30":261,"_154":187,"_40":41,"_39":157,"_155":58,"_37":262,"_13":62,"_33":177,"_35":263,"_24":25,"_158":-5,"_238":264,"_27":265},{"_42":253,"_32":254,"_30":255,"_154":187,"_40":41,"_39":157,"_155":58,"_37":256,"_13":62,"_33":177,"_35":107,"_24":25,"_158":-5,"_238":257,"_27":258},{"_42":180,"_32":181,"_30":182,"_154":-5,"_40":41,"_39":157,"_155":58,"_37":250,"_13":62,"_33":20,"_35":184,"_24":25,"_158":-5,"_238":251,"_27":252},{"_42":173,"_32":174,"_30":175,"_154":-5,"_40":41,"_39":157,"_155":58,"_37":247,"_13":62,"_33":177,"_35":178,"_24":25,"_158":-5,"_238":248,"_27":249},{"_42":166,"_32":167,"_30":168,"_154":-5,"_40":41,"_39":169,"_155":58,"_37":244,"_13":157,"_33":34,"_35":171,"_24":25,"_158":-5,"_238":245,"_27":246},{"_42":160,"_32":161,"_30":162,"_154":-5,"_40":41,"_39":157,"_155":58,"_37":241,"_13":62,"_33":34,"_35":164,"_24":25,"_158":-5,"_238":242,"_27":243},{"_42":153,"_32":28,"_30":31,"_154":-5,"_40":41,"_39":14,"_155":58,"_37":237,"_13":157,"_33":34,"_35":36,"_24":25,"_158":-5,"_238":239,"_27":240},["D",1787605021340],"children",[],[28],["D",1756243819605],[],[161],["D",1756243830365],[],[167],["D",1756243819605],[],[174],["D",1756243819605],[],[181],"dd93bb9a-82c3-11f0-803b-0224a6c84d84","temp.tsx","0198e849-fc51-72c8-9417-17ea055bfd71",["D",1756243819605],[],[44,254],"dd93b514-82c3-11f0-803b-0224a6c84d84","identicon.tsx","0198e849-fc51-72c8-9417-10832d02f770",["D",1756243819605],"/** @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\nfunction toDecimal (hex: string) {\n let nums = [];\n for (let i = 0; i < hex.length; i++) {\n const d = parseInt(hex[i], 16);\n nums.push(d);\n }\n return nums;\n}\n\nfunction toB4 (hex: string) {\n let b4 = []\n for (let i = 0; i < hex.length; i++) {\n const d = parseInt(hex[i], 16);\n const a = (d >> 2) & 3;\n const b = d & 3;\n b4.push(a, b);\n }\n return b4;\n}\n\nfunction to2D (hex: string) {\n let arr = []\n for (let i = 0; i < hex.length; i++) {\n const d = parseInt(hex[i], 16);\n const a = (d >> 2) & 3;\n const b = d & 3;\n arr.push([a, b]);\n }\n return arr;\n}\n\nconst size = 256;\nconst resolution = 5;\nconst viewBox = `0 0 ${size} ${size}`;\nconst cell = size / (resolution + 1);\nconst radius = cell / 2;\n\nfunction getPoints (pattern: number[]) {\n const points: { x: number, y: number, size: number }[] = [];\n const half = Math.ceil(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] > 0) {\n const size = pattern[index];\n points.push({ x, y, size });\n if (x < Math.floor(resolution / 2)) {\n const x2 = resolution - 1 - x;\n points.push({ x: x2, y, size });\n }\n }\n }\n }\n return points;\n}\nfunction get2DPoints (pattern: number[][]) {\n const points: { x: number, y: number, size: number, shift }[] = [];\n const half = Math.ceil(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 const [size, shift] = pattern[index];\n if (size > 0) {\n points.push({ x, y, size, shift });\n if (x < Math.floor(resolution / 2)) {\n const x2 = resolution - 1 - x;\n points.push({ x: x2, y, size, shift });\n }\n }\n }\n }\n return points;\n}\n\n\nexport function Component () {\n const { name } = useParams();\n const [searchParams] = useSearchParams();\n\n const background = searchParams.has(\"background\");\n\n // \n return (\n

Identicon

\n \n \n

\n )\n}\n\nexport function Identicon ({ name, background }: {\n name: string;\n background: boolean;\n}) {\n const hash = MD5(name ?? \"\");\n const color = \"#\" + hash.substring(0, 6);\n const comp = negate(color).hex();\n const tail = hash.substring(6);\n const pattern = toB4(tail);\n const points = getPoints(pattern);\n \n return (\n \n {background && (\n \n )}\n {points.map((p, i) => (\n \n ))}\n \n );\n}\n\nexport function Identicon2D ({ name, background, size = 256 }: {\n name: string;\n background: boolean;\n size: number;\n}) {\n const hash = MD5(name ?? \"\");\n const color = \"#\" + hash.substring(0, 6);\n const comp = negate(color).hex();\n const tail = hash.substring(6);\n const pattern = to2D(tail);\n const points = get2DPoints(pattern);\n \n return (\n \n {background && (\n \n )}\n {points.map((p, i) => (\n \n ))}\n \n );\n}\n\nfunction getXShift (n: number, x: number) {\n if (n !== 3) return 0;\n const center = Math.floor(resolution / 2);\n const left = x < center;\n const right = x > center;\n if (left) return cell * 0.2;\n if (right) return cell * -0.2;\n return 0;\n}\n\nfunction getYShift (n: number) {\n if (n === 1) return cell * 0.2;\n if (n === 2) return cell * -0.2;\n return 0;\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 const randomValue = () => {\n const next = generateRandomString();\n navigate(`/vector/identicon/${next}?${searchParams.toString()}`);\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 )\n}\n\nconst CHARS = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\";\nfunction generateRandomString(minLength = 4, maxLength = 32): string {\n const length = Math.floor(Math.random() * (maxLength - minLength + 1)) + minLength;\n let result = \"\";\n for (let i = 0; i < length; i++) {\n const randomIndex = Math.floor(Math.random() * CHARS.length);\n result += CHARS.charAt(randomIndex);\n }\n return result;\n}",[],[44,260],"dd93a95c-82c3-11f0-803b-0224a6c84d84","identicon-square.tsx","0198e849-fc51-72c8-9417-0ee68105220c",["D",1756243819605],"/** @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, desat : number = 0) {\n const rgb = chroma(color)\n .desaturate(desat)\n .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\nfunction toDecimal (hex: string) {\n let nums = [];\n for (let i = 0; i < hex.length; i++) {\n const d = parseInt(hex[i], 16);\n nums.push(d);\n }\n return nums;\n}\n\nfunction toB4 (hex: string) {\n let b4 = []\n for (let i = 0; i < hex.length; i++) {\n const d = parseInt(hex[i], 16);\n const a = (d >> 2) & 3;\n const b = d & 3;\n b4.push(a, b);\n }\n return b4;\n}\n\nfunction to2D (hex: string) {\n let arr = []\n for (let i = 0; i < hex.length; i++) {\n const d = parseInt(hex[i], 16);\n const a = (d >> 2) & 3;\n const b = d & 3;\n arr.push([a, b]);\n }\n return arr;\n}\n\nconst size = 256;\nconst resolution = 5;\nconst viewBox = `0 0 ${size} ${size}`;\nconst cell = size / (resolution + 1);\nconst off = cell / 2;\n\nfunction getPoints (pattern: number[]) {\n const points: { x: number, y: number, size: number }[] = [];\n const half = Math.ceil(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] > 0) {\n const size = pattern[index];\n points.push({ x, y, size });\n if (x < Math.floor(resolution / 2)) {\n const x2 = resolution - 1 - x;\n points.push({ x: x2, y, size });\n }\n }\n }\n }\n return points;\n}\nfunction get2DPoints (pattern: number[][]) {\n const points: { x: number, y: number, size: number, shift }[] = [];\n const half = Math.ceil(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 const [size, shift] = pattern[index];\n if (size > 0) {\n points.push({ x, y, size, shift });\n if (x < Math.floor(resolution / 2)) {\n const x2 = resolution - 1 - x;\n points.push({ x: x2, y, size, shift });\n }\n }\n }\n }\n return points;\n}\n\n\nexport function Component () {\n const { name } = useParams();\n const [searchParams] = useSearchParams();\n\n const background = searchParams.has(\"background\");\n\n // \n return (\n

Identicon

\n \n \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];",[],[192,291],"dd93a43e-82c3-11f0-803b-0224a6c84d84","root.tsx","0198e849-fc51-72c8-9416-fbe5c2ed42fe",["D",1756243819605],"/** @jsxImportSource ../jsx */\nimport React from \"https://esm.sh/react@19\";\nimport { useLoaderData, Link, Outlet, useParams } 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 const params = useParams();\n const name = params.name ?? \"identicon\";\n const image = `https://identicon.val.run/?name=${name}`;\n \n return (\n \n \n vectors\n \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}",[],[192,298],"dd93a2ea-82c3-11f0-803b-0224a6c84d84","index.tsx","0198e849-fc51-72c8-9416-f6c0556b3750",["D",1756243819605],"import Root from \"./root.tsx\";\nimport * as home from \"./home.tsx\";\nimport * as vector from \"./vector.tsx\";\nimport * as identicon from \"./identicon.tsx\";\n\n// vectors\nimport Circle from \"../vectors/circle\";\n\nexport const routes = [\n {\n Component: Root,\n children: [\n home,\n identicon,\n vector,\n ]\n },\n]\n\nexport default routes;",[],[192,305],"dd939b9c-82c3-11f0-803b-0224a6c84d84","0198e849-fc51-72c8-9416-f0fd9cbb3a30",["D",1756243819605],"/** @jsxImportSource ../jsx */\nimport { useState } from \"https://esm.sh/react@19\";\nimport { useParams, useSearchParams, useNavigate } from \"https://esm.sh/react-router\";\nimport { Identicon2D } from \"../vectors/identicon.tsx\";\n\nexport const path = \"id/:name?\";\n\nexport function Component () {\n const params = useParams();\n const [searchParams, setSearchParams] = useSearchParams();\n const background = searchParams.has(\"background\");\n \n return (\n

Identicon

\n \n \n

\n );\n}\n\nfunction NameForm () {\n const params = useParams();\n const navigate = useNavigate();\n const [name, setName] = useState(params.name ?? \"hello\");\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 const randomValue = () => {\n const next = generateRandomString();\n navigate(`/id/${next}?${searchParams.toString()}`);\n }\n\n return (\n {\n e.preventDefault();\n navigate(`/id/${name}?${searchParams.toString()}`);\n }}>\n \n Name\n \n {\n setName(e.target.value);\n }}\n />\n \n\n \n \n \n \n )\n}\n\nconst CHARS = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\";\nfunction generateRandomString(minLength = 4, maxLength = 32): string {\n const length = Math.floor(Math.random() * (maxLength - minLength + 1)) + minLength;\n let result = \"\";\n for (let i = 0; i < length; i++) {\n const randomIndex = Math.floor(Math.random() * CHARS.length);\n result += CHARS.charAt(randomIndex);\n }\n return result;\n}",[],[192,260],"dd939a3e-82c3-11f0-803b-0224a6c84d84","home.tsx","0198e849-fc50-7425-a0f7-15264e11ef3f",["D",1756243819605],"/** @jsxImportSource ../jsx */\nimport { Link } from \"https://esm.sh/react-router\";\nimport { Identicon2D } from \"../vectors/identicon.tsx\";\n\nexport const index = true;\n\nexport function Component () {\n return (\n

Vectors

\n \n \n \n

\n );\n}",[],[192,318],["D",1756243819605],[221,222,223,224,225],[192],"dd9396f6-82c3-11f0-803b-0224a6c84d84","jsx-runtime","0198e849-fc50-7425-a0f7-0e51fab2033c",["D",1756243819605],"export { jsx, jsxs } from 'https://esm.sh/react@19/jsx-runtime';\nexport { Fragment } from \"https://esm.sh/react@19\";",[],[197,328],["D",1756243819605],[219],[197],"dd938c42-82c3-11f0-803b-0224a6c84d84","base.css","0198e849-fc50-7425-a0f7-077f4ac1681c",["D",1756243819605],"* { 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\ninput[type=text] {\n font-family: inherit;\n font-size: 14px;\n padding: 4px 8px;\n border: 0;\n border-radius: 2px;\n background-color: #bff;\n color: black;\n}\ninput[type=text]:focus {\n color: #066;\n background-color: cyan;\n outline: none;\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 cursor: pointer;\n}\nbutton:hover {\n color: #044;\n background-color: cyan;\n}",[],[202,338],["D",1756243819605],[217],[202],["D",1747416639792],{"_97":96,"_105":101},{"_97":96,"_98":99,"_100":101,"_18":54,"_102":103,"_104":25},{"_13":14,"_32":85,"_42":41,"_86":43,"_87":88,"_89":90,"_91":49,"_92":43,"_93":64,"_94":44,"_95":96},"ctx",{"_78":-5,"_127":384,"_385":386,"_387":388,"_389":25,"_390":25,"_391":25,"_392":58,"_393":-5,"_394":-7,"_395":-7,"_396":62,"_397":25,"_398":25,"_399":-5,"_400":25,"_401":25,"_402":25,"_403":-5},"ENV",{"_355":356,"_357":358,"_359":133,"_360":361,"_362":363,"_364":365,"_366":367,"_368":369,"_370":371,"_372":373,"_374":375,"_376":377,"_378":379,"_380":381,"_382":383},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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 · v3