Sprite Forge — sprite sheet animator

[{"_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",{"_94":93,"_32":44,"_103":84,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":121,"_122":-5,"_123":-5,"_124":125},"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":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":25},"version",12,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":20,"_34":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":20,"_34":35},"deleted",false,"deletedHere","path","style.css","latestPath","fileId","fa062fd2-5e38-11f1-bf27-1607ee4eb77e","name","fileType","content",":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",":root {\n --bg: #0b0e17;\n --panel: #141a2b;\n --panel-2: #0f1422;\n --border: #2a3450;\n --border-bright: #3a4straw;\n --ink: #e7ecf6;\n --ink-dim: #8b97b5;\n --green: #5be38b;\n --green-deep: #2f8f59;\n --magenta: #ff5da2;\n --shadow: #05070d;\n}\n\n* { box-sizing: border-box; }\n\nhtml, body {\n margin: 0;\n background:\n radial-gradient(1200px 600px at 80% -10%, #1a2238 0%, transparent 60%),\n var(--bg);\n color: var(--ink);\n font-family: \"IBM Plex Mono\", ui-monospace, monospace;\n font-size: 14px;\n line-height: 1.5;\n min-height: 100vh;\n}\n\n/* CRT scanline overlay */\n.scanlines {\n position: fixed;\n inset: 0;\n pointer-events: none;\n z-index: 9999;\n background: repeating-linear-gradient(\n to bottom,\n rgba(0, 0, 0, 0) 0,\n rgba(0, 0, 0, 0) 2px,\n rgba(0, 0, 0, 0.06) 3px,\n rgba(0, 0, 0, 0.06) 3px\n );\n mix-blend-mode: multiply;\n}\n\nimg, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }\n\n/* ---------- buttons ---------- */\n.btn {\n font-family: \"Press Start 2P\", monospace;\n font-size: 9px;\n letter-spacing: 0.5px;\n color: var(--ink);\n background: var(--panel);\n border: 2px solid var(--border);\n border-radius: 6px;\n padding: 10px 12px;\n cursor: pointer;\n box-shadow: 3px 3px 0 var(--shadow);\n transition: transform 0.05s ease, box-shadow 0.05s ease, background 0.12s ease;\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n line-height: 1.4;\n}\n.btn:hover { background: #1b2236; }\n.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--shadow); }\n.btn.full { width: 100%; justify-content: center; }\n.btn-accent { color: #06210f; background: var(--green); border-color: var(--green-deep); }\n.btn-accent:hover { background: #6ff0a0; }\n.btn-ghost { background: transparent; color: var(--ink-dim); }\n.btn-ghost:hover { color: var(--ink); background: #161d2f; }\n\n/* ---------- topbar ---------- */\n.topbar {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: 16px;\n padding: 22px clamp(16px, 4vw, 40px) 14px;\n border-bottom: 2px solid var(--border);\n flex-wrap: wrap;\n animation: fade 0.4s both;\n}\n.brand h1 {\n font-family: \"Press Start 2P\", monospace;\n font-size: clamp(18px, 3.4vw, 30px);\n margin: 0;\n color: var(--green);\n text-shadow: 0 0 10px rgba(91, 227, 139, 0.35), 3px 3px 0 var(--shadow);\n}\n.brand h1 span { color: var(--magenta); text-shadow: 0 0 10px rgba(255, 93, 162, 0.35), 3px 3px 0 var(--shadow); }\n.tagline { margin: 8px 0 0; color: var(--ink-dim); font-size: 12px; }\n.topbar-actions { display: flex; gap: 10px; }\n\n/* ---------- layout ---------- */\n.layout {\n display: grid;\n grid-template-columns: minmax(0, 1fr) 320px;\n gap: 18px;\n padding: 18px clamp(16px, 4vw, 40px) 48px;\n align-items: start;\n}\n@media (max-width: 820px) {\n .layout { grid-template-columns: 1fr; }\n}\n\n.panel {\n background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);\n border: 2px solid var(--border);\n border-radius: 12px;\n padding: 16px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);\n animation: fade 0.5s both;\n}\n.side-panel { animation-delay: 0.08s; }\n\n.panel-head {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n margin-bottom: 14px;\n flex-wrap: wrap;\n}\n.panel-head h2 {\n font-family: \"Press Start 2P\", monospace;\n font-size: 11px;\n margin: 0;\n color: var(--ink);\n}\n\n/* ---------- segmented toggles ---------- */\n.seg { display: inline-flex; border: 2px solid var(--border); border-radius: 6px; overflow: hidden; }\n.seg.full { display: flex; width: 100%; margin-bottom: 14px; }\n.seg.full .seg-btn { flex: 1; }\n.seg-btn {\n font-family: \"Press Start 2P\", monospace;\n font-size: 8px;\n color: var(--ink-dim);\n background: var(--panel-2);\n border: 0;\n border-right: 2px solid var(--border);\n padding: 8px 10px;\n cursor: pointer;\n transition: background 0.12s, color 0.12s;\n}\n.seg-btn:last-child { border-right: 0; }\n.seg-btn:hover { color: var(--ink); }\n.seg-btn.is-on { color: #06210f; background: var(--green); }\n\n/* ---------- stage ---------- */\n.stage {\n position: relative;\n display: grid;\n place-items: center;\n min-height: 320px;\n border: 2px solid var(--border);\n border-radius: 10px;\n padding: 24px;\n overflow: hidden;\n}\n.stage[data-bg=\"checker\"] {\n background:\n repeating-conic-gradient(#1b2236 0% 25%, #232d46 0% 50%) 50% / 22px 22px;\n}\n.stage[data-bg=\"dark\"] { background: #0c1018; }\n.stage[data-bg=\"light\"] { background: #d9dee8; }\n#canvas {\n display: block;\n filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));\n max-width: 100%;\n}\n\n/* ---------- transport ---------- */\n.transport {\n display: flex;\n align-items: center;\n gap: 14px;\n margin: 14px 0 4px;\n flex-wrap: wrap;\n}\n.readout {\n font-size: 12px;\n color: var(--ink-dim);\n background: var(--panel-2);\n border: 1px solid var(--border);\n border-radius: 5px;\n padding: 5px 9px;\n}\n.readout.dim { color: var(--green); }\n\n/* ---------- frame strip ---------- */\n.strip-wrap { margin-top: 14px; }\n.strip-head {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n margin-bottom: 10px;\n flex-wrap: wrap;\n}\n.strip-label { font-family: \"Press Start 2P\", monospace; font-size: 9px; color: var(--ink-dim); }\n.strip {\n display: grid;\n grid-auto-flow: column;\n grid-auto-columns: 54px;\n gap: 8px;\n overflow-x: auto;\n padding: 6px 2px 12px;\n scrollbar-width: thin;\n scrollbar-color: var(--border) transparent;\n}\n.frame-cell {\n position: relative;\n width: 54px;\n height: 54px;\n border: 2px solid var(--border);\n border-radius: 6px;\n background-color: #0c1018;\n background-repeat: no-repeat;\n cursor: pointer;\n transition: border-color 0.1s, transform 0.1s, box-shadow 0.1s;\n}\n.frame-cell:hover { transform: translateY(-2px); border-color: #44starw; }\n.frame-cell.in-row { border-color: rgba(91, 227, 139, 0.5); }\n.frame-cell.current {\n border-color: var(--magenta);\n box-shadow: 0 0 0 2px rgba(255, 93, 162, 0.35), 0 0 14px rgba(255, 93, 162, 0.45);\n}\n.frame-cell .idx {\n position: absolute;\n bottom: 2px;\n right: 3px;\n font-size: 9px;\n color: var(--ink-dim);\n background: rgba(8, 11, 20, 0.7);\n padding: 0 3px;\n border-radius: 3px;\n}\n.hint { color: var(--ink-dim); font-size: 11px; margin: 2px 0 0; }\n\n/* ---------- side controls ---------- */\n.control-block { margin-bottom: 20px; }\n.control-block:last-child { margin-bottom: 0; }\n.control-block h3 {\n font-family: \"Press Start 2P\", monospace;\n font-size: 9px;\n color: var(--magenta);\n margin: 0 0 12px;\n letter-spacing: 0.5px;\n}\n\n.stepper-row { display: flex; gap: 12px; }\n.stepper-label { flex: 1; font-size: 11px; color: var(--ink-dim); display: block; }\n.stepper {\n display: flex;\n margin-top: 6px;\n border: 2px solid var(--border);\n border-radius: 6px;\n overflow: hidden;\n}\n.stepper button {\n width: 30px;\n border: 0;\n background: var(--panel-2);\n color: var(--green);\n font-size: 16px;\n cursor: pointer;\n font-family: \"IBM Plex Mono\", monospace;\n}\n.stepper button:hover { background: #1b2236; }\n.stepper input {\n flex: 1;\n width: 0;\n text-align: center;\n border: 0;\n border-left: 2px solid var(--border);\n border-right: 2px solid var(--border);\n background: #0c1018;\n color: var(--ink);\n font-family: \"IBM Plex Mono\", monospace;\n font-size: 14px;\n padding: 7px 0;\n}\n.stepper input::-webkit-outer-spin-button,\n.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n.stepper input { -moz-appearance: textfield; }\n\n.slider { display: block; margin-bottom: 14px; }\n.slider:last-child { margin-bottom: 0; }\n.slider span {\n display: flex;\n justify-content: space-between;\n font-size: 11px;\n color: var(--ink-dim);\n margin-bottom: 7px;\n}\n.slider b { color: var(--green); font-weight: 600; }\ninput[type=\"range\"] {\n width: 100%;\n accent-color: var(--green);\n height: 6px;\n cursor: pointer;\n}\n\n.save-status { display: block; margin-top: 8px; font-size: 11px; color: var(--green); min-height: 14px; }\n\n/* ---------- gallery ---------- */\n.gallery { display: flex; flex-direction: column; gap: 8px; }\n.sheet-card {\n position: relative;\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px;\n border: 2px solid var(--border);\n border-radius: 8px;\n background: var(--panel-2);\n cursor: pointer;\n transition: border-color 0.12s, background 0.12s;\n}\n.sheet-card:hover { background: #1b2236; }\n.sheet-card.active { border-color: var(--green); box-shadow: 0 0 0 1px rgba(91, 227, 139, 0.4) inset; }\n.sheet-thumb {\n width: 40px;\n height: 40px;\n flex: 0 0 40px;\n border: 1px solid var(--border);\n border-radius: 4px;\n background-color: #0c1018;\n background-repeat: no-repeat;\n}\n.sheet-info { min-width: 0; flex: 1; }\n.sheet-name {\n font-size: 12px;\n color: var(--ink);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.sheet-meta { font-size: 10px; color: var(--ink-dim); }\n.sheet-del {\n border: 0;\n background: transparent;\n color: var(--ink-dim);\n cursor: pointer;\n font-size: 14px;\n padding: 4px 6px;\n border-radius: 4px;\n}\n.sheet-del:hover { color: var(--magenta); background: rgba(255, 93, 162, 0.12); }\n.sheet-tag {\n font-size: 8px;\n font-family: \"Press Start 2P\", monospace;\n color: var(--green);\n border: 1px solid var(--green-deep);\n border-radius: 4px;\n padding: 2px 4px;\n}\n\n/* ---------- modal ---------- */\n.modal {\n position: fixed;\n inset: 0;\n z-index: 1000;\n display: grid;\n place-items: center;\n padding: 20px;\n background: rgba(5, 7, 13, 0.78);\n backdrop-filter: blur(3px);\n animation: fade 0.18s both;\n}\n.modal[hidden] { display: none; }\n.modal-card {\n width: min(560px, 100%);\n background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);\n border: 2px solid var(--border);\n border-radius: 14px;\n padding: 18px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);\n}\n.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }\n.modal-head h2 { font-family: \"Press Start 2P\", monospace; font-size: 12px; margin: 0; color: var(--green); }\n.x { border: 0; background: transparent; color: var(--ink-dim); font-size: 16px; cursor: pointer; }\n.x:hover { color: var(--magenta); }\n\n.drop {\n display: grid;\n place-items: center;\n min-height: 180px;\n border: 2px dashed var(--border);\n border-radius: 10px;\n padding: 16px;\n cursor: pointer;\n text-align: center;\n transition: border-color 0.12s, background 0.12s;\n}\n.drop:hover, .drop.dragging { border-color: var(--green); background: rgba(91, 227, 139, 0.06); }\n.drop-text { color: var(--ink-dim); font-size: 12px; }\n.preview-wrap { position: relative; display: inline-block; line-height: 0; }\n.preview-wrap img { max-width: 100%; max-height: 220px; border-radius: 6px; }\n.preview-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }\n\n.modal-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n margin: 16px 0 4px;\n}\n.modal-grid label { font-size: 11px; color: var(--ink-dim); display: flex; flex-direction: column; gap: 6px; }\n.modal-grid input {\n background: #0c1018;\n border: 2px solid var(--border);\n border-radius: 6px;\n color: var(--ink);\n font-family: \"IBM Plex Mono\", monospace;\n font-size: 14px;\n padding: 8px 10px;\n}\n.modal-grid input:focus { outline: none; border-color: var(--green); }\n.m-error { color: var(--magenta); font-size: 12px; min-height: 16px; margin: 8px 0 0; }\n.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }\n\n@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }\n","createdAt",["D",1780374936037],"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",{"_94":93,"_102":98},"org",{"_94":93,"_95":96,"_97":98,"_18":54,"_99":100,"_101":25},"branch",{"_13":83,"_32":84,"_42":41,"_85":43,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":44,"_92":93},"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=1789559999&sig=78019e07e4ced3d68c9df61b037dd9640810f47ba2d971eaac41b98f18b7827c","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_32":44,"_37":212,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":213,"_78":214,"_80":215,"_82":25},"tree",[187,188,189,190,191,192],"files",[187,188,189,190,191,192],"counts",{"_177":60,"_178":144,"_179":60,"_180":181,"_182":183},"contents",[126,127,128,129,130,131],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_42":170,"_32":171,"_30":172,"_133":-5,"_40":41,"_39":173,"_134":25,"_37":174,"_13":60,"_33":20,"_34":175,"_24":25,"_137":-5,"_27":176},{"_42":163,"_32":164,"_30":165,"_133":-5,"_40":41,"_39":166,"_134":25,"_37":167,"_13":60,"_33":160,"_34":168,"_24":25,"_137":-5,"_27":169},{"_42":155,"_32":156,"_30":157,"_133":-5,"_40":41,"_39":158,"_134":121,"_37":159,"_13":136,"_33":160,"_34":161,"_24":25,"_137":-5,"_27":162},{"_42":148,"_32":149,"_30":150,"_133":-5,"_40":41,"_39":151,"_134":25,"_37":152,"_13":144,"_33":20,"_34":153,"_24":25,"_137":-5,"_27":154},{"_42":139,"_32":140,"_30":141,"_133":-5,"_40":41,"_39":142,"_134":121,"_37":143,"_13":144,"_33":145,"_34":146,"_24":25,"_137":-5,"_27":147},{"_42":132,"_32":28,"_30":31,"_133":-5,"_40":41,"_39":14,"_134":25,"_37":135,"_13":136,"_33":20,"_34":36,"_24":25,"_137":-5,"_27":138},"7fcfe15a-5e3c-11f1-bd36-1607ee4eb77e","parentId","latest",["D",1780374936037],2,"label",[28],"f2e4f438-5e3b-11f1-880a-1607ee4eb77e","main.ts","a0f721e0-5e37-11f1-b6c6-1607ee4eb77e",10,["D",1780374699593],1,"http","// 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",[140],"5fafbcc4-5e3c-11f1-8d50-1607ee4eb77e","index.html","edce9aba-5e38-11f1-9839-1607ee4eb77e",11,["D",1780374882139],"\n\n\n\n\nSprite Forge — sprite sheet animator\n\n\n\n\n\n\n\n\n

\n\n\n\n

Sample · walk cycle

\n \n \n \n

\n\n

\n \n frame 0 / 0\n — px\n

\n\n

\n Frames\n

\n \n \n

Click a frame to play that row.

\n\n \n

\n\n\n\n\n\n\n",[149],"b96c395a-5e3b-11f1-9366-1607ee4eb77e","default-sprite.js","e689993a-5e38-11f1-8147-1607ee4eb77e",9,["D",1780374603199],"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",[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","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":60,"_186":60},"connections",{"_184":60,"_185":60},"count","unfilledCount","emptyCount",{"_42":170,"_32":171,"_30":172,"_133":-5,"_40":41,"_39":173,"_134":25,"_37":209,"_13":60,"_33":20,"_34":175,"_24":25,"_137":-5,"_194":210,"_27":211},{"_42":163,"_32":164,"_30":165,"_133":-5,"_40":41,"_39":166,"_134":25,"_37":206,"_13":60,"_33":160,"_34":168,"_24":25,"_137":-5,"_194":207,"_27":208},{"_42":155,"_32":156,"_30":157,"_133":-5,"_40":41,"_39":158,"_134":121,"_37":203,"_13":136,"_33":160,"_34":161,"_24":25,"_137":-5,"_194":204,"_27":205},{"_42":148,"_32":149,"_30":150,"_133":-5,"_40":41,"_39":151,"_134":25,"_37":200,"_13":144,"_33":20,"_34":153,"_24":25,"_137":-5,"_194":201,"_27":202},{"_42":139,"_32":140,"_30":141,"_133":-5,"_40":41,"_39":142,"_134":121,"_37":197,"_13":144,"_33":145,"_34":146,"_24":25,"_137":-5,"_194":198,"_27":199},{"_42":132,"_32":28,"_30":31,"_133":-5,"_40":41,"_39":14,"_134":25,"_37":193,"_13":136,"_33":20,"_34":36,"_24":25,"_137":-5,"_194":195,"_27":196},["D",1780374936037],"children",[],[28],["D",1780374699593],[],[140],["D",1780374882139],[],[149],["D",1780374603199],[],[156],["D",1780373507028],[],[164],["D",1780374496179],[],[171],["D",1780372844162],{"_94":93,"_102":98},{"_94":93,"_95":96,"_97":98,"_18":54,"_99":100,"_101":25},{"_13":83,"_32":84,"_42":41,"_85":43,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":44,"_92":93},"ctx",{"_76":-5,"_123":249,"_250":251,"_252":253,"_254":25,"_255":25,"_256":25,"_257":121,"_258":-5,"_259":-7,"_260":-7,"_261":60,"_262":25,"_263":25,"_264":-5,"_265":25,"_266":25,"_267":25,"_268":-5},"ENV",{"_220":221,"_222":223,"_224":84,"_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"]

Sample · walk cycle

Add a sprite sheet

Diff · v12