[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_212":213,"_214":215},"routes/_app.x.$handle.$name",{"_92":91,"_31":42,"_101":82,"_26":102,"_13":14,"_103":-5,"_11":104,"_105":106,"_107":108,"_109":110,"_111":112,"_20":-5,"_113":-5,"_114":-5,"_115":24,"_116":117,"_118":119,"_120":-5,"_121":-5,"_122":123},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_40":41,"_31":42,"_35":43,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":50,"_51":-5,"_18":52,"_53":-5,"_54":24,"_55":-5,"_56":-5,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":-5,"_64":-5,"_65":66,"_67":66,"_68":69,"_70":69,"_71":69,"_72":66,"_73":66,"_74":75,"_76":77,"_78":79,"_80":24},"version",8,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":27,"_32":20,"_33":34,"_35":36,"_37":14,"_38":39,"_23":24},"previous","deleted",false,"deletedHere","path","README.md","latestPath","fileId","79a2feda-5e3b-11f1-b956-1607ee4eb77e","name","fileType","content","# 🎞️ sprite-animator\n\nA browser-based sprite-sheet animator. Loads a default sheet, lets you set the grid\n(columns × rows), pick a row to play, and scrub the walk cycle. Drag-drop, paste, or\nupload any other sheet to animate it instead.\n\n**Live:** \n\n## Use it\n- **Columns / Rows** — match the sheet's grid. Frame size is derived automatically.\n- **Play** — animate a single row, or `All` to run every frame left-to-right, top-to-bottom.\n- **Direction** — `Loop` or `Ping-pong` (good for 3-frame RPG-Maker-style cycles).\n- **Speed / Zoom** — fps and nearest-neighbour scale (pixels stay crisp).\n- **Upload / drag-drop / paste** an image to swap sheets. Click a thumbnail to freeze a frame.\n\nThe bundled default is a 4×4 sheet — rows are **down / up / left / right**.\n\n## How it works\n\n```mermaid\nflowchart LR\n B[Browser] -->|GET /| M[main.ts · Hono]\n M -->|index.html| B\n M -->|app.js| B\n M -->|style.css| B\n M -->|default-sprite.js| B\n subgraph client [app.js]\n L[requestAnimationFrame loop] --> C[\"canvas drawImage()
source-rect per frame\"]\n end\n B --> client\n```\n\n| File | Role |\n| --- | --- |\n| `main.ts` | Hono server — serves the static files, `/source` redirect |\n| `index.html` | Markup + controls |\n| `style.css` | Styles |\n| `app.js` | All animation logic (geometry, loop, strip, upload/paste) |\n| `default-sprite.js` | Bundled default sheet as a base64 data-URI |\n\n## Swap the default sheet\nReplace the data-URI string exported from `default-sprite.js`. Anything an\n`` can load works (PNG/JPEG/GIF/WebP, data-URI or URL).\n","createdAt",["D",1780374496179],"branchVersion","branchId","a0f2d68a-5e37-11f1-b6c6-1607ee4eb77e","id","a0f20bce-5e37-11f1-b6c6-1607ee4eb77e","sprite-animator",["D",1780372844162],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Sprite sheet animator web app","imageUrl","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","d663a026-6449-42f6-9156-1d4a2d64d38c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_92":91,"_100":96},"org",{"_92":91,"_93":94,"_95":96,"_18":52,"_97":98,"_99":24},"branch",{"_13":81,"_31":82,"_40":39,"_83":41,"_84":-5,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":42,"_90":91},"isOwned",18,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","dcm31","handle","displayName","Charlie","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3e904faa-3764-4629-c475-f561a49b0000/square512?exp=1789567199&sig=e06d2452d15457d897c29ee2d4a45d8ac5b1a1a7b6bc3ec1d7706c1f90e23fa3","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_40":41,"_31":42,"_35":208,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":50,"_51":-5,"_18":52,"_53":-5,"_54":24,"_55":-5,"_56":-5,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":-5,"_64":-5,"_65":66,"_67":66,"_68":69,"_70":69,"_71":69,"_72":66,"_73":66,"_74":209,"_76":210,"_78":211,"_80":24},"tree",[183,184,185,186,187,188],"files",[183,184,185,186,187,188],"counts",{"_173":58,"_174":137,"_175":58,"_176":177,"_178":179},"contents",[124,125,126,127,128,129],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_40":170,"_31":27,"_29":30,"_133":-5,"_38":39,"_37":14,"_135":24,"_35":171,"_13":58,"_32":20,"_33":34,"_23":24,"_139":-5,"_26":172},{"_40":163,"_31":164,"_29":165,"_133":-5,"_38":39,"_37":166,"_135":24,"_35":167,"_13":58,"_32":160,"_33":168,"_23":24,"_139":-5,"_26":169},{"_40":155,"_31":156,"_29":157,"_133":-5,"_38":39,"_37":158,"_135":24,"_35":159,"_13":137,"_32":160,"_33":161,"_23":24,"_139":-5,"_26":162},{"_40":148,"_31":149,"_29":150,"_133":-5,"_38":39,"_37":151,"_135":24,"_35":152,"_13":58,"_32":20,"_33":153,"_23":24,"_139":-5,"_26":154},{"_40":141,"_31":142,"_29":143,"_133":-5,"_38":39,"_37":137,"_135":24,"_35":144,"_13":58,"_32":145,"_33":146,"_23":24,"_139":-5,"_26":147},{"_40":130,"_31":131,"_29":132,"_133":-5,"_38":39,"_37":134,"_135":24,"_35":136,"_13":137,"_32":20,"_33":138,"_23":24,"_139":-5,"_26":140},"ff159364-5e38-11f1-b79e-1607ee4eb77e","style.css","fa062fd2-5e38-11f1-bf27-1607ee4eb77e","parentId",5,"latest",["D",1780373431584],1,":root {\n --bg: #0f1117;\n --panel: #181b24;\n --panel-2: #20242f;\n --line: #2c3140;\n --text: #e7e9ee;\n --muted: #9aa3b2;\n --accent: #6ea8ff;\n --accent-press: #3f7ce0;\n}\n\n* { box-sizing: border-box; }\n\nbody {\n margin: 0;\n background: var(--bg);\n color: var(--text);\n font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n -webkit-font-smoothing: antialiased;\n}\n\nheader {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--line);\n}\nh1 { font-size: 18px; margin: 0; letter-spacing: .2px; }\n.src { color: var(--muted); font-size: 13px; text-decoration: none; }\n.src:hover { color: var(--accent); }\n\nmain {\n max-width: 720px;\n margin: 0 auto;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n/* ---- stage ---- */\n#stage {\n position: relative;\n display: grid;\n place-items: center;\n min-height: 240px;\n padding: 24px;\n border: 1px solid var(--line);\n border-radius: 14px;\n background:\n repeating-conic-gradient(#1b1f29 0% 25%, #161a22 0% 50%) 0 / 24px 24px;\n}\n#stage.drag { outline: 2px dashed var(--accent); outline-offset: -8px; }\n\n#view {\n image-rendering: pixelated;\n image-rendering: crisp-edges;\n display: block;\n border-radius: 4px;\n}\n\n#dropOverlay {\n position: absolute;\n inset: 0;\n display: none;\n place-items: center;\n font-weight: 600;\n color: var(--accent);\n background: rgba(15, 17, 23, .7);\n border-radius: 14px;\n}\n#stage.drag #dropOverlay { display: grid; }\n\n/* ---- meta ---- */\n#meta {\n display: flex;\n justify-content: space-between;\n gap: 12px;\n margin: 0;\n font-size: 13px;\n color: var(--muted);\n}\n\n/* ---- frames strip ---- */\n#stripWrap { overflow-x: auto; }\n#strip {\n display: flex;\n gap: 6px;\n padding: 6px;\n min-height: 56px;\n}\n.thumb {\n image-rendering: pixelated;\n height: 48px;\n width: auto;\n background: #0c0e14;\n border: 1px solid var(--line);\n border-radius: 6px;\n cursor: pointer;\n flex: 0 0 auto;\n opacity: .55;\n transition: opacity .12s, border-color .12s, transform .12s;\n}\n.thumb:hover { opacity: .85; }\n.thumb.active {\n opacity: 1;\n border-color: var(--accent);\n transform: translateY(-2px);\n}\n\n/* ---- controls ---- */\n.controls {\n display: flex;\n flex-direction: column;\n gap: 14px;\n padding: 16px;\n background: var(--panel);\n border: 1px solid var(--line);\n border-radius: 14px;\n}\n.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }\n\nbutton, .file {\n font: inherit;\n color: var(--text);\n background: var(--panel-2);\n border: 1px solid var(--line);\n padding: 9px 14px;\n border-radius: 9px;\n cursor: pointer;\n user-select: none;\n}\nbutton:hover, .file:hover { border-color: var(--muted); }\nbutton:active { transform: translateY(1px); }\n.primary { background: var(--accent); border-color: var(--accent); color: #08111f; font-weight: 600; }\n.primary:hover { background: var(--accent-press); border-color: var(--accent-press); }\n\n.grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n gap: 12px;\n}\nlabel {\n display: flex;\n flex-direction: column;\n gap: 5px;\n font-size: 12px;\n color: var(--muted);\n}\nlabel span { color: var(--text); font-variant-numeric: tabular-nums; }\n\ninput[type=\"number\"], select {\n font: inherit;\n color: var(--text);\n background: var(--panel-2);\n border: 1px solid var(--line);\n border-radius: 8px;\n padding: 8px 10px;\n}\ninput[type=\"range\"] { accent-color: var(--accent); width: 100%; }\n\n.hint { margin: 0; font-size: 12px; color: var(--muted); }\n.hint strong { color: var(--text); font-weight: 600; }\n","label",[131],"a0f71ec0-5e37-11f1-b6c6-1607ee4eb77e","main.ts","a0f721e0-5e37-11f1-b6c6-1607ee4eb77e",["D",1780372844180],"http","import { Hono } from \"npm:hono\";\nimport { serveFile, parseVal } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err));\n\napp.get(\"/\", () => serveFile(\"/index.html\"));\napp.get(\"/source\", (c) => c.redirect(parseVal(import.meta.url).links.self.val));\napp.get(\"/*\", (c) => serveFile(c.req.path));\n\nexport default app.fetch;\n",[142],"edce99e8-5e38-11f1-9839-1607ee4eb77e","index.html","edce9aba-5e38-11f1-9839-1607ee4eb77e",3,["D",1780373402599],"\n\n\n \n \n Sprite Animator\n \n \n\n\n

🎞️ Sprite Animator

\n view source\n

\n\n

Drop sprite sheet

\n\n

\n loading…\n \n

\n\n

\n \n \n ⬆ Upload sheet\n \n \n \n

\n\n

\n Columns\n \n \n Rows\n \n \n Play\n \n \n Direction\n \n \n Speed 8 fps\n \n \n Zoom 2×\n \n \n

\n\n

Tip: you can also drag & drop or paste an image to load a new sheet. Set columns/rows to match its grid.

\n\n \n\n\n",[149],"5ef81bce-5e3b-11f1-b1ba-1607ee4eb77e","default-sprite.js","e689993a-5e38-11f1-8147-1607ee4eb77e",7,["D",1780374451443],"script","export default \"data:image/png;base64,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\";\n",[156],"2c0cc7d4-5e39-11f1-a35a-1607ee4eb77e","app.js","2c0cc892-5e39-11f1-a35a-1607ee4eb77e",6,["D",1780373507028],"import defaultSprite from \"/default-sprite.js\";\n\nconst $ = (id) => document.getElementById(id);\nconst clampInt = (v, lo, hi) => Math.min(hi, Math.max(lo, Math.round(+v) || lo));\n\nconst canvas = $(\"view\");\nconst ctx = canvas.getContext(\"2d\");\nconst stage = $(\"stage\");\nconst stripEl = $(\"strip\");\n\nconst state = {\n img: null,\n cols: 4,\n rows: 4,\n fps: 8,\n scale: 2,\n mode: \"loop\", // \"loop\" | \"pingpong\"\n row: \"all\", // \"all\" | number\n playing: true,\n};\n\nlet frameIndex = 0;\nlet dir = 1;\nlet last = 0;\nlet acc = 0;\nlet raf = null;\n\n// ---------- geometry ----------\nfunction frameSize() {\n return {\n w: state.img.naturalWidth / state.cols,\n h: state.img.naturalHeight / state.rows,\n };\n}\n\nfunction activeCells() {\n if (state.row === \"all\") {\n const out = [];\n for (let r = 0; r < state.rows; r++)\n for (let c = 0; c < state.cols; c++) out.push([r, c]);\n return out;\n }\n return Array.from({ length: state.cols }, (_, c) => [state.row, c]);\n}\n\nfunction sequence() {\n const { w, h } = frameSize();\n return activeCells().map(([r, c]) => ({ sx: c * w, sy: r * h, sw: w, sh: h }));\n}\n\n// ---------- rendering ----------\nfunction applyScale() {\n const { w, h } = frameSize();\n canvas.style.width = Math.round(w * state.scale) + \"px\";\n canvas.style.height = Math.round(h * state.scale) + \"px\";\n}\n\nfunction resizeCanvas() {\n const { w, h } = frameSize();\n canvas.width = Math.round(w);\n canvas.height = Math.round(h);\n applyScale();\n}\n\nfunction render() {\n if (!state.img) return;\n const seq = sequence();\n if (!seq.length) return;\n if (frameIndex >= seq.length) frameIndex = 0;\n const f = seq[frameIndex];\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.imageSmoothingEnabled = false;\n ctx.drawImage(state.img, f.sx, f.sy, f.sw, f.sh, 0, 0, canvas.width, canvas.height);\n highlightStrip();\n $(\"frameLabel\").textContent = `frame ${frameIndex + 1} / ${seq.length}`;\n}\n\n// ---------- frames strip ----------\nfunction buildStrip() {\n const { w, h } = frameSize();\n stripEl.innerHTML = \"\";\n activeCells().forEach(([r, c], i) => {\n const cv = document.createElement(\"canvas\");\n cv.width = Math.round(w);\n cv.height = Math.round(h);\n const cx = cv.getContext(\"2d\");\n cx.imageSmoothingEnabled = false;\n cx.drawImage(state.img, c * w, r * h, w, h, 0, 0, cv.width, cv.height);\n cv.className = \"thumb\";\n cv.title = `frame ${i + 1}`;\n cv.addEventListener(\"click\", () => {\n pause();\n frameIndex = i;\n render();\n });\n stripEl.appendChild(cv);\n });\n highlightStrip();\n}\n\nfunction highlightStrip() {\n [...stripEl.children].forEach((el, i) => el.classList.toggle(\"active\", i === frameIndex));\n}\n\n// ---------- animation loop ----------\nfunction tick(t) {\n if (!state.playing) return;\n if (!last) last = t;\n acc += (t - last) / 1000;\n last = t;\n const seq = sequence();\n const spf = 1 / state.fps;\n let advanced = false;\n while (acc >= spf) {\n acc -= spf;\n advanced = true;\n if (state.mode === \"pingpong\") {\n frameIndex += dir;\n if (frameIndex >= seq.length - 1) {\n frameIndex = seq.length - 1;\n dir = -1;\n } else if (frameIndex <= 0) {\n frameIndex = 0;\n dir = 1;\n }\n } else {\n frameIndex = (frameIndex + 1) % seq.length;\n }\n }\n if (advanced) render();\n raf = requestAnimationFrame(tick);\n}\n\nfunction startLoop() {\n if (!state.playing || !state.img) return;\n cancelAnimationFrame(raf);\n last = 0;\n raf = requestAnimationFrame(tick);\n}\nfunction play() {\n state.playing = true;\n $(\"playBtn\").textContent = \"⏸ Pause\";\n startLoop();\n}\nfunction pause() {\n state.playing = false;\n cancelAnimationFrame(raf);\n raf = null;\n $(\"playBtn\").textContent = \"▶ Play\";\n}\nconst toggle = () => (state.playing ? pause() : play());\n\n// ---------- row selector ----------\nfunction rebuildRowSelect() {\n const sel = $(\"rowSel\");\n const prev = sel.value;\n sel.innerHTML = ``;\n for (let r = 0; r < state.rows; r++) {\n const o = document.createElement(\"option\");\n o.value = String(r);\n o.textContent = `Row ${r + 1}`;\n sel.appendChild(o);\n }\n if (prev === \"all\" || (prev !== \"\" && +prev < state.rows)) sel.value = prev;\n else sel.value = \"all\";\n state.row = sel.value === \"all\" ? \"all\" : +sel.value;\n}\n\nfunction refresh() {\n if (!state.img) return;\n resizeCanvas();\n buildStrip();\n render();\n}\n\n// ---------- image loading ----------\nfunction loadImage(src, name) {\n const img = new Image();\n img.onload = () => {\n state.img = img;\n const { w, h } = { w: img.naturalWidth / state.cols, h: img.naturalHeight / state.rows };\n state.scale = clampInt(Math.round(180 / Math.max(w, h)), 1, 16);\n $(\"scale\").value = state.scale;\n $(\"scaleVal\").textContent = state.scale + \"×\";\n $(\"sheetName\").textContent = `${name} · ${img.naturalWidth}×${img.naturalHeight}`;\n frameIndex = 0;\n dir = 1;\n refresh();\n startLoop();\n };\n img.onerror = () => alert(\"Couldn't load that image.\");\n img.src = src;\n}\n\nfunction handleFile(file) {\n if (!file || !file.type.startsWith(\"image/\")) return;\n const reader = new FileReader();\n reader.onload = () => loadImage(reader.result, file.name);\n reader.readAsDataURL(file);\n}\n\n// ---------- controls ----------\nfunction bindControls() {\n $(\"cols\").addEventListener(\"input\", (e) => {\n state.cols = clampInt(e.target.value, 1, 64);\n frameIndex = 0;\n rebuildRowSelect();\n refresh();\n });\n $(\"rows\").addEventListener(\"input\", (e) => {\n state.rows = clampInt(e.target.value, 1, 64);\n frameIndex = 0;\n rebuildRowSelect();\n refresh();\n });\n $(\"fps\").addEventListener(\"input\", (e) => {\n state.fps = +e.target.value;\n $(\"fpsVal\").textContent = state.fps + \" fps\";\n });\n $(\"scale\").addEventListener(\"input\", (e) => {\n if (!state.img) return;\n state.scale = +e.target.value;\n $(\"scaleVal\").textContent = state.scale + \"×\";\n applyScale();\n });\n $(\"mode\").addEventListener(\"change\", (e) => {\n state.mode = e.target.value;\n dir = 1;\n });\n $(\"rowSel\").addEventListener(\"change\", (e) => {\n state.row = e.target.value === \"all\" ? \"all\" : +e.target.value;\n frameIndex = 0;\n refresh();\n });\n $(\"playBtn\").addEventListener(\"click\", toggle);\n $(\"resetBtn\").addEventListener(\"click\", () => {\n state.cols = 4;\n state.rows = 4;\n $(\"cols\").value = 4;\n $(\"rows\").value = 4;\n rebuildRowSelect();\n loadImage(defaultSprite, \"default sprite\");\n });\n}\n\nfunction bindDropAndPaste() {\n $(\"file\").addEventListener(\"change\", (e) => handleFile(e.target.files[0]));\n [\"dragenter\", \"dragover\"].forEach((ev) =>\n stage.addEventListener(ev, (e) => {\n e.preventDefault();\n stage.classList.add(\"drag\");\n })\n );\n [\"dragleave\", \"drop\"].forEach((ev) =>\n stage.addEventListener(ev, (e) => {\n e.preventDefault();\n stage.classList.remove(\"drag\");\n })\n );\n stage.addEventListener(\"drop\", (e) => handleFile(e.dataTransfer.files[0]));\n window.addEventListener(\"paste\", (e) => {\n const item = [...(e.clipboardData?.items || [])].find((i) => i.type.startsWith(\"image/\"));\n if (item) handleFile(item.getAsFile());\n });\n}\n\n// ---------- init ----------\nbindControls();\nbindDropAndPaste();\nrebuildRowSelect();\nloadImage(defaultSprite, \"default sprite\");\n",[164],"79a2fde0-5e3b-11f1-b956-1607ee4eb77e",["D",1780374496179],[27],"pulls","branches","forks","envVars",{"_180":58,"_182":58},"connections",{"_180":58,"_181":58},"count","unfilledCount","emptyCount",{"_40":170,"_31":27,"_29":30,"_133":-5,"_38":39,"_37":14,"_135":24,"_35":205,"_13":58,"_32":20,"_33":34,"_23":24,"_139":-5,"_190":206,"_26":207},{"_40":163,"_31":164,"_29":165,"_133":-5,"_38":39,"_37":166,"_135":24,"_35":202,"_13":58,"_32":160,"_33":168,"_23":24,"_139":-5,"_190":203,"_26":204},{"_40":155,"_31":156,"_29":157,"_133":-5,"_38":39,"_37":158,"_135":24,"_35":199,"_13":137,"_32":160,"_33":161,"_23":24,"_139":-5,"_190":200,"_26":201},{"_40":148,"_31":149,"_29":150,"_133":-5,"_38":39,"_37":151,"_135":24,"_35":196,"_13":58,"_32":20,"_33":153,"_23":24,"_139":-5,"_190":197,"_26":198},{"_40":141,"_31":142,"_29":143,"_133":-5,"_38":39,"_37":137,"_135":24,"_35":193,"_13":58,"_32":145,"_33":146,"_23":24,"_139":-5,"_190":194,"_26":195},{"_40":130,"_31":131,"_29":132,"_133":-5,"_38":39,"_37":134,"_135":24,"_35":189,"_13":137,"_32":20,"_33":138,"_23":24,"_139":-5,"_190":191,"_26":192},["D",1780373431584],"children",[],[131],["D",1780372844180],[],[142],["D",1780373402599],[],[149],["D",1780374451443],[],[156],["D",1780373507028],[],[164],["D",1780374496179],[],[27],["D",1780372844162],{"_92":91,"_100":96},{"_92":91,"_93":94,"_95":96,"_18":52,"_97":98,"_99":24},{"_13":81,"_31":82,"_40":39,"_83":41,"_84":-5,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":42,"_90":91},"ctx",{"_74":-5,"_121":245,"_246":247,"_248":249,"_250":24,"_251":24,"_252":24,"_253":119,"_254":-5,"_255":-7,"_256":-7,"_257":58,"_258":24,"_259":24,"_260":-5,"_261":24,"_262":24,"_263":24,"_264":-5},"ENV",{"_216":217,"_218":219,"_220":82,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244},"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 · v8