From 6f67b133fc0dc17c45222318a2af6d2bab2020ed Mon Sep 17 00:00:00 2001
From: Corey Johnson <probablycorey@gmail.com>
Date: Tue, 6 Jan 2026 13:42:21 -0800
Subject: [PATCH] feat: persist last loaded spritesheet in localStorage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Stores the image as a data URL so it survives page reloads.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/dev/app.tsx | 44 +++++++++++++++++++++++++++++++++-----------
 1 file changed, 33 insertions(+), 11 deletions(-)

diff --git a/src/dev/app.tsx b/src/dev/app.tsx
index d2135ba..e33dce8 100644
--- a/src/dev/app.tsx
+++ b/src/dev/app.tsx
@@ -1,10 +1,26 @@
-import { useState } from "hono/jsx"
+import { useState, useEffect } from "hono/jsx"
 import { render } from "hono/jsx/dom"
 
+const STORAGE_KEY = "tiny-sprites-last-file"
+
+const loadFromStorage = () => {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY)
+    if (stored) return JSON.parse(stored)
+  } catch {}
+}
+
+const saveToStorage = (data: { dataUrl: string; width: number; height: number }) => {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(data))
+  } catch {}
+}
+
 const App = () => {
-  const [spriteUrl, setSpriteUrl] = useState("")
-  const [imageWidth, setImageWidth] = useState(0)
-  const [imageHeight, setImageHeight] = useState(0)
+  const stored = loadFromStorage()
+  const [spriteUrl, setSpriteUrl] = useState(stored?.dataUrl || "")
+  const [imageWidth, setImageWidth] = useState(stored?.width || 0)
+  const [imageHeight, setImageHeight] = useState(stored?.height || 0)
   const [frames, setFrames] = useState(4)
   const [columns, setColumns] = useState<number | undefined>()
   const [frameDuration, setFrameDuration] = useState(100)
@@ -13,14 +29,20 @@ const App = () => {
   const handleFileChange = (e: Event) => {
     const file = (e.target as HTMLInputElement).files?.[0]
     if (!file) return
-    const url = URL.createObjectURL(file)
-    const img = new Image()
-    img.onload = () => {
-      setImageWidth(img.width)
-      setImageHeight(img.height)
-      setSpriteUrl(url)
+
+    const reader = new FileReader()
+    reader.onload = () => {
+      const dataUrl = reader.result as string
+      const img = new Image()
+      img.onload = () => {
+        setImageWidth(img.width)
+        setImageHeight(img.height)
+        setSpriteUrl(dataUrl)
+        saveToStorage({ dataUrl, width: img.width, height: img.height })
+      }
+      img.src = dataUrl
     }
-    img.src = url
+    reader.readAsDataURL(file)
   }
 
   // Auto-calculate frame dimensions from image size and frame count