[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_216":217,"_218":219},"routes/_app.x.$handle.$name",{"_95":94,"_32":45,"_104":85,"_27":105,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":25,"_119":120,"_121":122,"_123":-5,"_124":-5,"_125":126},"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":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",10,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.ts","latestPath","fileId","a0f721e0-5e37-11f1-b6c6-1607ee4eb77e","name","fileType","http","content","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","// Sprite Forge — server.\n// Serves the static frontend and a small JSON API for sprite sheets.\n// Uploaded sheets are stored in std/blob; the built-in sample is embedded.\n\nimport { Hono } from \"npm:hono@4\";\nimport { serveFile, parseVal } from \"https://esm.town/v/std/utils/index.ts\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { decodeBase64, encodeBase64 } from \"jsr:@std/encoding@1/base64\";\nimport { SAMPLE_B64, SAMPLE_META } from \"./default-sprite.js\";\n\ntype SheetMeta = {\n id: string;\n name: string;\n cols: number;\n rows: number;\n fps: number;\n contentType: string;\n builtin?: boolean;\n createdAt: number;\n};\n\nconst INDEX_KEY = \"sprite:index\";\nconst metaKey = (id: string) => `sprite:meta:${id}`;\nconst imgKey = (id: string) => `sprite:img:${id}`;\n\nasync function getIndex(): Promise {\n try {\n const v = await blob.getJSON(INDEX_KEY);\n return Array.isArray(v) ? v : [];\n } catch {\n return [];\n }\n}\nconst setIndex = (ids: string[]) => blob.setJSON(INDEX_KEY, ids);\n\nasync function listSheets(): Promise {\n const ids = await getIndex();\n const out: SheetMeta[] = [];\n for (const id of ids) {\n try {\n const m = (await blob.getJSON(metaKey(id))) as SheetMeta | null;\n if (m) out.push(m);\n } catch {\n /* skip a missing/corrupt entry */\n }\n }\n out.sort((a, b) => b.createdAt - a.createdAt);\n return [SAMPLE_META as SheetMeta, ...out];\n}\n\nfunction clampInt(v: unknown, lo: number, hi: number, dflt: number): number {\n const n = parseInt(String(v ?? \"\"), 10);\n if (Number.isNaN(n)) return dflt;\n return Math.min(hi, Math.max(lo, n));\n}\n\nconst IMG_HEADERS = { \"cache-control\": \"public, max-age=31536000, immutable\" };\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err));\n\napp.get(\"/api/sheets\", async (c) => c.json(await listSheets()));\n\napp.get(\"/api/sheets/:id/image\", async (c) => {\n const id = c.req.param(\"id\");\n if (id === \"sample\") {\n return new Response(decodeBase64(SAMPLE_B64), {\n headers: { ...IMG_HEADERS, \"content-type\": SAMPLE_META.contentType },\n });\n }\n try {\n const [meta, stored] = await Promise.all([\n blob.getJSON(metaKey(id)) as Promise,\n blob.getJSON(imgKey(id)) as Promise<{ b64: string } | null>,\n ]);\n if (!meta || !stored?.b64) return c.notFound();\n return new Response(decodeBase64(stored.b64), {\n headers: { ...IMG_HEADERS, \"content-type\": meta.contentType },\n });\n } catch {\n return c.notFound();\n }\n});\n\napp.post(\"/api/sheets\", async (c) => {\n let form: FormData;\n try {\n form = await c.req.formData();\n } catch {\n return c.json({ error: \"Expected multipart form data with a file\" }, 400);\n }\n const file = form.get(\"file\");\n if (!(file instanceof File)) return c.json({ error: \"No image file provided\" }, 400);\n\n const bytes = new Uint8Array(await file.arrayBuffer());\n if (bytes.byteLength === 0) return c.json({ error: \"That file is empty\" }, 400);\n if (bytes.byteLength > 8 * 1024 * 1024) {\n return c.json({ error: \"Image too large (8 MB max)\" }, 413);\n }\n\n const meta: SheetMeta = {\n id: crypto.randomUUID().slice(0, 8),\n name: String(form.get(\"name\") ?? \"\").trim() || file.name || \"Untitled sheet\",\n cols: clampInt(form.get(\"cols\"), 1, 64, 4),\n rows: clampInt(form.get(\"rows\"), 1, 64, 4),\n fps: clampInt(form.get(\"fps\"), 1, 60, 6),\n contentType: file.type || \"image/png\",\n createdAt: Date.now(),\n };\n\n await blob.setJSON(imgKey(meta.id), { b64: encodeBase64(bytes) });\n await blob.setJSON(metaKey(meta.id), meta);\n await setIndex([meta.id, ...(await getIndex())]);\n return c.json(meta, 201);\n});\n\napp.patch(\"/api/sheets/:id\", async (c) => {\n const id = c.req.param(\"id\");\n if (id === \"sample\") return c.json({ error: \"The sample sheet can't be edited\" }, 400);\n const meta = (await blob.getJSON(metaKey(id))) as SheetMeta | null;\n if (!meta) return c.notFound();\n const body = await c.req.json().catch(() => ({} as Record));\n const next: SheetMeta = {\n ...meta,\n name: typeof body.name === \"string\" && body.name.trim() ? body.name.trim() : meta.name,\n cols: body.cols != null ? clampInt(body.cols, 1, 64, meta.cols) : meta.cols,\n rows: body.rows != null ? clampInt(body.rows, 1, 64, meta.rows) : meta.rows,\n fps: body.fps != null ? clampInt(body.fps, 1, 60, meta.fps) : meta.fps,\n };\n await blob.setJSON(metaKey(id), next);\n return c.json(next);\n});\n\napp.delete(\"/api/sheets/:id\", async (c) => {\n const id = c.req.param(\"id\");\n if (id === \"sample\") return c.json({ error: \"The sample sheet can't be deleted\" }, 400);\n await Promise.all([\n blob.delete(imgKey(id)).catch(() => {}),\n blob.delete(metaKey(id)).catch(() => {}),\n ]);\n await setIndex((await getIndex()).filter((x) => x !== id));\n return c.json({ ok: true });\n});\n\napp.get(\"/source\", (c) => c.redirect(parseVal(import.meta.url).links.self.val));\n\n// static assets\napp.get(\"/\", () => serveFile(\"/index.html\"));\napp.get(\"/app.js\", () => serveFile(\"/app.js\"));\napp.get(\"/style.css\", () => serveFile(\"/style.css\"));\n\nexport default app.fetch;\n","createdAt",["D",1780374699593],"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",{"_95":94,"_103":99},"org",{"_95":94,"_96":97,"_98":99,"_18":55,"_100":101,"_102":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"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=1789570799&sig=bfafc9de3f25d020766c1a418088d2aa7a118e3408c10bafe80b0604dafaeba0","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":212,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":213,"_79":214,"_81":215,"_83":25},"tree",[187,188,189,190,191,192],"files",[187,188,189,190,191,192],"counts",{"_177":61,"_178":140,"_179":61,"_180":181,"_182":183},"contents",[127,128,129,130,131,132],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_43":170,"_32":171,"_30":172,"_136":-5,"_41":42,"_40":173,"_138":25,"_38":174,"_13":61,"_33":20,"_35":175,"_24":25,"_142":-5,"_27":176},{"_43":163,"_32":164,"_30":165,"_136":-5,"_41":42,"_40":166,"_138":25,"_38":167,"_13":61,"_33":160,"_35":168,"_24":25,"_142":-5,"_27":169},{"_43":154,"_32":155,"_30":156,"_136":-5,"_41":42,"_40":157,"_138":122,"_38":158,"_13":159,"_33":160,"_35":161,"_24":25,"_142":-5,"_27":162},{"_43":147,"_32":148,"_30":149,"_136":-5,"_41":42,"_40":150,"_138":25,"_38":151,"_13":61,"_33":20,"_35":152,"_24":25,"_142":-5,"_27":153},{"_43":144,"_32":28,"_30":31,"_136":-5,"_41":42,"_40":14,"_138":122,"_38":145,"_13":140,"_33":34,"_35":37,"_24":25,"_142":-5,"_27":146},{"_43":133,"_32":134,"_30":135,"_136":-5,"_41":42,"_40":137,"_138":25,"_38":139,"_13":140,"_33":20,"_35":141,"_24":25,"_142":-5,"_27":143},"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",[134],"f2e4f438-5e3b-11f1-880a-1607ee4eb77e",["D",1780374699593],[28],"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",[148],"b96c395a-5e3b-11f1-9366-1607ee4eb77e","default-sprite.js","e689993a-5e38-11f1-8147-1607ee4eb77e",9,["D",1780374603199],2,"script","// Built-in sample sprite sheet.\n// A 64x96 PNG: 4 columns x 4 rows (16x24 px cells) walk cycle, recovered to\n// native pixel resolution and embedded as base64 so the app works on first\n// load with no upload required.\n// Rows (top -> bottom): walk-down, walk-up, walk-side, walk-side(alt).\n\nexport const SAMPLE_META = {\n id: \"sample\",\n name: \"Sample \\u00b7 walk cycle\",\n cols: 4,\n rows: 4,\n fps: 6,\n contentType: \"image/png\",\n builtin: true,\n createdAt: 0,\n};\n\nexport const SAMPLE_B64 =\n \"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\";\n",[155],"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","README.md","79a2feda-5e3b-11f1-b956-1607ee4eb77e",8,["D",1780374496179],"# 🎞️ 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",[171],"pulls","branches","forks","envVars",{"_184":61,"_186":61},"connections",{"_184":61,"_185":61},"count","unfilledCount","emptyCount",{"_43":170,"_32":171,"_30":172,"_136":-5,"_41":42,"_40":173,"_138":25,"_38":209,"_13":61,"_33":20,"_35":175,"_24":25,"_142":-5,"_194":210,"_27":211},{"_43":163,"_32":164,"_30":165,"_136":-5,"_41":42,"_40":166,"_138":25,"_38":206,"_13":61,"_33":160,"_35":168,"_24":25,"_142":-5,"_194":207,"_27":208},{"_43":154,"_32":155,"_30":156,"_136":-5,"_41":42,"_40":157,"_138":122,"_38":203,"_13":159,"_33":160,"_35":161,"_24":25,"_142":-5,"_194":204,"_27":205},{"_43":147,"_32":148,"_30":149,"_136":-5,"_41":42,"_40":150,"_138":25,"_38":200,"_13":61,"_33":20,"_35":152,"_24":25,"_142":-5,"_194":201,"_27":202},{"_43":144,"_32":28,"_30":31,"_136":-5,"_41":42,"_40":14,"_138":122,"_38":197,"_13":140,"_33":34,"_35":37,"_24":25,"_142":-5,"_194":198,"_27":199},{"_43":133,"_32":134,"_30":135,"_136":-5,"_41":42,"_40":137,"_138":25,"_38":193,"_13":140,"_33":20,"_35":141,"_24":25,"_142":-5,"_194":195,"_27":196},["D",1780373431584],"children",[],[134],["D",1780374699593],[],[28],["D",1780373402599],[],[148],["D",1780374603199],[],[155],["D",1780373507028],[],[164],["D",1780374496179],[],[171],["D",1780372844162],{"_95":94,"_103":99},{"_95":94,"_96":97,"_98":99,"_18":55,"_100":101,"_102":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"ctx",{"_77":-5,"_124":249,"_250":251,"_252":253,"_254":25,"_255":25,"_256":25,"_257":122,"_258":-5,"_259":-7,"_260":-7,"_261":61,"_262":25,"_263":25,"_264":-5,"_265":25,"_266":25,"_267":25,"_268":-5},"ENV",{"_220":221,"_222":223,"_224":85,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248},"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 · v10