[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_308":309,"_310":311},"routes/_app.x.$handle.$name",{"_96":95,"_32":46,"_104":86,"_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":58,"_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",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_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",14,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":38,"_36":37,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","backend/index.ts","latestPath","fileId","b7cbdef8-429d-11f0-b327-76b3cceeab13","name","index.ts","fileType","script","content","import { Hono } from 'https://esm.sh/hono@3.11.7';\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve the main application\napp.get(\"/\", async c => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// Serve frontend files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve shared files\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Health check endpoint\napp.get(\"/health\", c => {\n return c.json({ \n status: \"ok\", \n timestamp: new Date().toISOString(),\n service: \"Pixel Art Studio\"\n });\n});\n\n// API endpoint for canvas data (future enhancement)\napp.get(\"/api/canvas/:id\", c => {\n const id = c.req.param(\"id\");\n return c.json({ \n message: \"Canvas loading not implemented yet\",\n id \n });\n});\n\n// API endpoint to save canvas data (future enhancement)\napp.post(\"/api/canvas\", async c => {\n return c.json({ \n message: \"Canvas saving not implemented yet\",\n saved: false \n });\n});\n\n// 404 handler\napp.notFound(c => {\n return c.text(\"Page not found\", 404);\n});\n\nexport default app;","http","createdAt",["D",1749190564166],"branchVersion","branchId","15ace734-429d-11f0-a0da-76b3cceeab13","id","15ac9522-429d-11f0-a0da-76b3cceeab13","pixelart",["D",1749190288939],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","c7d91915-4070-4350-8e28-6c792ff73b1c","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",1,"orgId","9ee5b56c-6e87-47cb-98e4-c31219468b31","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_96":95,"_103":99},"org",{"_96":95,"_97":-5,"_98":99,"_18":55,"_100":101,"_102":25},"branch",{"_13":85,"_32":86,"_44":43,"_87":45,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":46,"_94":95},"isOwned",252,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","loading","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaTFCT2UzVDJHbzF6RjhPTnpBd3p6VEJHZEQifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":304,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_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":305,"_80":306,"_82":307,"_84":25},"tree",[176,178,190,192,193],"files",[176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193],"counts",{"_166":137,"_167":62,"_168":62,"_169":170,"_171":172},"contents",[126,127,128,129,130],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":160,"_32":161,"_30":162,"_134":-5,"_42":43,"_41":163,"_135":58,"_39":164,"_13":137,"_34":152,"_36":-5,"_24":25,"_138":-5,"_27":165},{"_44":154,"_32":155,"_30":156,"_134":-5,"_42":43,"_41":157,"_135":58,"_39":158,"_13":137,"_34":152,"_36":-5,"_24":25,"_138":-5,"_27":159},{"_44":147,"_32":148,"_30":149,"_134":-5,"_42":43,"_41":150,"_135":58,"_39":151,"_13":137,"_34":152,"_36":-5,"_24":25,"_138":-5,"_27":153},{"_44":140,"_32":141,"_30":142,"_134":-5,"_42":43,"_41":143,"_135":25,"_39":144,"_13":137,"_34":20,"_36":145,"_24":25,"_138":-5,"_27":146},{"_44":131,"_32":132,"_30":133,"_134":-5,"_42":43,"_41":62,"_135":25,"_39":136,"_13":137,"_34":35,"_36":105,"_24":25,"_138":-5,"_27":139},"15aea664-429d-11f0-a0da-76b3cceeab13","main.tsx","15aea70e-429d-11f0-a0da-76b3cceeab13","parentId","latest",["D",1749190288949],0,"label",[132],"558141de-429d-11f0-beee-76b3cceeab13","README.md","558142ce-429d-11f0-beee-76b3cceeab13",2,["D",1749190396026],"# Pixel Art Studio\n\nA professional pixel art editor built with React and TailwindCSS featuring:\n\n## Features\n\n- **Canvas Drawing**: Click and drag to draw pixels\n- **Color Palette**: Built-in color picker with preset colors\n- **Tools**: Brush, eraser, fill bucket, eyedropper\n- **Grid System**: Customizable canvas size (8x8 to 64x64)\n- **Theme Support**: Automatic light/dark mode based on system preference\n- **Export Options**: Save as PNG or SVG\n- **Responsive Design**: Works on desktop and mobile devices\n\n## Project Structure\n\n```\n├── frontend/\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # React entry point\n│ ├── components/\n│ │ ├── App.tsx # Main application component\n│ │ ├── Canvas.tsx # Drawing canvas component\n│ │ ├── Toolbar.tsx # Tools and controls\n│ │ ├── ColorPalette.tsx # Color selection\n│ │ └── ExportPanel.tsx # Export functionality\n│ └── utils/\n│ ├── canvas.ts # Canvas utilities\n│ └── export.ts # Export utilities\n├── backend/\n│ └── index.ts # Static file server\n└── shared/\n └── types.ts # Shared TypeScript types\n```\n\n## Usage\n\n1. Select a tool from the toolbar\n2. Choose a color from the palette\n3. Click or drag on the canvas to draw\n4. Use the export panel to save your artwork\n5. Adjust canvas size and grid settings as needed\n\n## Development\n\nThe app uses:\n- React 18.2.0 with TypeScript\n- TailwindCSS for styling\n- HTML5 Canvas for drawing\n- System media queries for theme detection",[141],"5b2fadaa-429d-11f0-824b-76b3cceeab13","shared","b80fb4f5-cf48-44f8-aa98-994530ad4980",3,["D",1749190405552],"directory",[148],"63fb7536-429d-11f0-ba4c-76b3cceeab13","frontend","14a1e83a-7a59-4420-8b80-5bad1461df87",4,["D",1749190420310],[155],"b7cbe600-429d-11f0-b327-76b3cceeab13","backend","40b96a62-9370-4245-a5e8-8d868c8b437d",13,["D",1749190560928],[161],"pulls","branches","forks","envVars",{"_173":137,"_175":137},"connections",{"_173":137,"_174":137},"count","unfilledCount","emptyCount",{"_44":160,"_32":161,"_30":162,"_134":-5,"_42":43,"_41":163,"_135":58,"_39":301,"_13":137,"_34":152,"_36":-5,"_24":25,"_138":-5,"_195":302,"_27":303},{"_44":297,"_32":33,"_30":31,"_134":162,"_42":43,"_41":14,"_135":25,"_39":298,"_13":62,"_34":38,"_36":37,"_24":25,"_138":46,"_195":299,"_27":300},{"_44":154,"_32":155,"_30":156,"_134":-5,"_42":43,"_41":157,"_135":58,"_39":294,"_13":137,"_34":152,"_36":-5,"_24":25,"_138":-5,"_195":295,"_27":296},{"_44":290,"_32":257,"_30":251,"_134":156,"_42":43,"_41":269,"_135":58,"_39":291,"_13":137,"_34":152,"_36":-5,"_24":25,"_138":-5,"_195":292,"_27":293},{"_44":282,"_32":283,"_30":284,"_134":251,"_42":43,"_41":285,"_135":25,"_39":286,"_13":137,"_34":35,"_36":287,"_24":25,"_138":-5,"_195":288,"_27":289},{"_44":274,"_32":275,"_30":276,"_134":251,"_42":43,"_41":277,"_135":25,"_39":278,"_13":137,"_34":35,"_36":279,"_24":25,"_138":-5,"_195":280,"_27":281},{"_44":266,"_32":267,"_30":268,"_134":251,"_42":43,"_41":269,"_135":25,"_39":270,"_13":137,"_34":35,"_36":271,"_24":25,"_138":-5,"_195":272,"_27":273},{"_44":258,"_32":259,"_30":260,"_134":251,"_42":43,"_41":261,"_135":25,"_39":262,"_13":137,"_34":35,"_36":263,"_24":25,"_138":-5,"_195":264,"_27":265},{"_44":248,"_32":249,"_30":250,"_134":251,"_42":43,"_41":252,"_135":25,"_39":253,"_13":137,"_34":35,"_36":254,"_24":25,"_138":-5,"_195":255,"_27":256},{"_44":244,"_32":236,"_30":230,"_134":156,"_42":43,"_41":157,"_135":58,"_39":245,"_13":137,"_34":152,"_36":-5,"_24":25,"_138":-5,"_195":246,"_27":247},{"_44":237,"_32":238,"_30":239,"_134":230,"_42":43,"_41":157,"_135":25,"_39":240,"_13":137,"_34":35,"_36":241,"_24":25,"_138":-5,"_195":242,"_27":243},{"_44":227,"_32":228,"_30":229,"_134":230,"_42":43,"_41":231,"_135":25,"_39":232,"_13":137,"_34":35,"_36":233,"_24":25,"_138":-5,"_195":234,"_27":235},{"_44":219,"_32":220,"_30":221,"_134":156,"_42":43,"_41":222,"_135":25,"_39":223,"_13":137,"_34":20,"_36":224,"_24":25,"_138":-5,"_195":225,"_27":226},{"_44":211,"_32":212,"_30":213,"_134":156,"_42":43,"_41":214,"_135":25,"_39":215,"_13":137,"_34":35,"_36":216,"_24":25,"_138":-5,"_195":217,"_27":218},{"_44":147,"_32":148,"_30":149,"_134":-5,"_42":43,"_41":150,"_135":58,"_39":208,"_13":137,"_34":152,"_36":-5,"_24":25,"_138":-5,"_195":209,"_27":210},{"_44":201,"_32":202,"_30":203,"_134":149,"_42":43,"_41":150,"_135":25,"_39":204,"_13":137,"_34":35,"_36":205,"_24":25,"_138":-5,"_195":206,"_27":207},{"_44":140,"_32":141,"_30":142,"_134":-5,"_42":43,"_41":143,"_135":25,"_39":198,"_13":137,"_34":20,"_36":145,"_24":25,"_138":-5,"_195":199,"_27":200},{"_44":131,"_32":132,"_30":133,"_134":-5,"_42":43,"_41":62,"_135":25,"_39":194,"_13":137,"_34":35,"_36":105,"_24":25,"_138":-5,"_195":196,"_27":197},["D",1749190288949],"children",[],[132],["D",1749190396026],[],[141],"5b2fa468-429d-11f0-824b-76b3cceeab13","types.ts","5b2fa544-429d-11f0-824b-76b3cceeab13",["D",1749190405552],"export interface PixelData {\n x: number;\n y: number;\n color: string;\n}\n\nexport interface CanvasState {\n width: number;\n height: number;\n pixels: Map;\n history: Map[];\n historyIndex: number;\n}\n\nexport type Tool = 'brush' | 'eraser' | 'fill' | 'eyedropper';\n\nexport interface AppState {\n selectedTool: Tool;\n selectedColor: string;\n canvasSize: number;\n showGrid: boolean;\n canvas: CanvasState;\n}\n\nexport interface ExportOptions {\n format: 'png' | 'svg';\n scale: number;\n includeGrid: boolean;\n}",[],[148,202],["D",1749190405552],[191],[148],"a9ad46cc-429d-11f0-abaa-76b3cceeab13","index.tsx","a9ad479e-429d-11f0-abaa-76b3cceeab13",11,["D",1749190537241],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0';\nimport { createRoot } from 'https://esm.sh/react-dom@18.2.0/client';\nimport App from './components/App.tsx';\n\nconst root = createRoot(document.getElementById('root')!);\nroot.render();",[],[155,212],"b2b38902-429d-11f0-abaa-76b3cceeab13","index.html","b2b389ca-429d-11f0-abaa-76b3cceeab13",12,["D",1749190552384],"\n\n\n \n \n Pixel Art Studio\n \n \n \n \n \n \n \n \n \n \n\n\n

\n \n \n \n\n",[],[155,220],"6ccece6a-429d-11f0-957e-76b3cceeab13","export.ts","6ccecef6-429d-11f0-957e-76b3cceeab13","c24bc297-9c8d-497f-a41e-147a2232661b",5,["D",1749190435121],"import type { CanvasState, ExportOptions } from '../../shared/types.ts';\nimport { getPixelKey } from './canvas.ts';\n\nexport function exportToPNG(canvas: CanvasState, options: ExportOptions): void {\n const { scale = 10, includeGrid = false } = options;\n const canvasElement = document.createElement('canvas');\n const ctx = canvasElement.getContext('2d')!;\n \n const pixelSize = scale;\n const totalSize = canvas.width * pixelSize;\n \n canvasElement.width = totalSize;\n canvasElement.height = totalSize;\n \n // Fill background with transparent\n ctx.clearRect(0, 0, totalSize, totalSize);\n \n // Draw pixels\n for (let y = 0; y < canvas.height; y++) {\n for (let x = 0; x < canvas.width; x++) {\n const key = getPixelKey(x, y);\n const color = canvas.pixels.get(key);\n \n if (color) {\n ctx.fillStyle = color;\n ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);\n }\n }\n }\n \n // Draw grid if requested\n if (includeGrid) {\n ctx.strokeStyle = '#00000020';\n ctx.lineWidth = 1;\n \n for (let i = 0; i <= canvas.width; i++) {\n ctx.beginPath();\n ctx.moveTo(i * pixelSize, 0);\n ctx.lineTo(i * pixelSize, totalSize);\n ctx.stroke();\n }\n \n for (let i = 0; i <= canvas.height; i++) {\n ctx.beginPath();\n ctx.moveTo(0, i * pixelSize);\n ctx.lineTo(totalSize, i * pixelSize);\n ctx.stroke();\n }\n }\n \n // Download the image\n canvasElement.toBlob((blob) => {\n if (blob) {\n const url = URL.createObjectURL(blob);\n const link = document.createElement('a');\n link.href = url;\n link.download = `pixel-art-${Date.now()}.png`;\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n URL.revokeObjectURL(url);\n }\n });\n}\n\nexport function exportToSVG(canvas: CanvasState, options: ExportOptions): void {\n const { scale = 10, includeGrid = false } = options;\n const pixelSize = scale;\n const totalSize = canvas.width * pixelSize;\n \n let svg = `';\n \n // Download the SVG\n const blob = new Blob([svg], { type: 'image/svg+xml' });\n const url = URL.createObjectURL(blob);\n const link = document.createElement('a');\n link.href = url;\n link.download = `pixel-art-${Date.now()}.svg`;\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n URL.revokeObjectURL(url);\n}",[],[155,236,228],"utils","63fb6820-429d-11f0-ba4c-76b3cceeab13","canvas.ts","63fb68e8-429d-11f0-ba4c-76b3cceeab13",["D",1749190420310],"import type { CanvasState, PixelData } from '../../shared/types.ts';\n\nexport function createEmptyCanvas(size: number): CanvasState {\n return {\n width: size,\n height: size,\n pixels: new Map(),\n history: [new Map()],\n historyIndex: 0,\n };\n}\n\nexport function getPixelKey(x: number, y: number): string {\n return `${x},${y}`;\n}\n\nexport function setPixel(canvas: CanvasState, x: number, y: number, color: string): CanvasState {\n const newPixels = new Map(canvas.pixels);\n const key = getPixelKey(x, y);\n \n if (color === 'transparent' || color === '') {\n newPixels.delete(key);\n } else {\n newPixels.set(key, color);\n }\n\n const newHistory = canvas.history.slice(0, canvas.historyIndex + 1);\n newHistory.push(new Map(newPixels));\n\n return {\n ...canvas,\n pixels: newPixels,\n history: newHistory,\n historyIndex: newHistory.length - 1,\n };\n}\n\nexport function floodFill(canvas: CanvasState, startX: number, startY: number, newColor: string): CanvasState {\n const startKey = getPixelKey(startX, startY);\n const originalColor = canvas.pixels.get(startKey) || 'transparent';\n \n if (originalColor === newColor) return canvas;\n\n const newPixels = new Map(canvas.pixels);\n const stack: [number, number][] = [[startX, startY]];\n const visited = new Set();\n\n while (stack.length > 0) {\n const [x, y] = stack.pop()!;\n const key = getPixelKey(x, y);\n\n if (visited.has(key) || x < 0 || x >= canvas.width || y < 0 || y >= canvas.height) {\n continue;\n }\n\n const currentColor = newPixels.get(key) || 'transparent';\n if (currentColor !== originalColor) {\n continue;\n }\n\n visited.add(key);\n \n if (newColor === 'transparent') {\n newPixels.delete(key);\n } else {\n newPixels.set(key, newColor);\n }\n\n // Add adjacent pixels to stack\n stack.push([x + 1, y], [x - 1, y], [x, y + 1], [x, y - 1]);\n }\n\n const newHistory = canvas.history.slice(0, canvas.historyIndex + 1);\n newHistory.push(new Map(newPixels));\n\n return {\n ...canvas,\n pixels: newPixels,\n history: newHistory,\n historyIndex: newHistory.length - 1,\n };\n}\n\nexport function undo(canvas: CanvasState): CanvasState {\n if (canvas.historyIndex > 0) {\n const newIndex = canvas.historyIndex - 1;\n return {\n ...canvas,\n pixels: new Map(canvas.history[newIndex]),\n historyIndex: newIndex,\n };\n }\n return canvas;\n}\n\nexport function redo(canvas: CanvasState): CanvasState {\n if (canvas.historyIndex < canvas.history.length - 1) {\n const newIndex = canvas.historyIndex + 1;\n return {\n ...canvas,\n pixels: new Map(canvas.history[newIndex]),\n historyIndex: newIndex,\n };\n }\n return canvas;\n}\n\nexport function clearCanvas(canvas: CanvasState): CanvasState {\n const newHistory = canvas.history.slice(0, canvas.historyIndex + 1);\n newHistory.push(new Map());\n\n return {\n ...canvas,\n pixels: new Map(),\n history: newHistory,\n historyIndex: newHistory.length - 1,\n };\n}\n\nexport function resizeCanvas(canvas: CanvasState, newSize: number): CanvasState {\n const newPixels = new Map();\n \n // Copy existing pixels that fit in the new size\n for (const [key, color] of canvas.pixels) {\n const [x, y] = key.split(',').map(Number);\n if (x < newSize && y < newSize) {\n newPixels.set(key, color);\n }\n }\n\n return {\n width: newSize,\n height: newSize,\n pixels: newPixels,\n history: [new Map(newPixels)],\n historyIndex: 0,\n };\n}",[],[155,236,238],"63fb775c-429d-11f0-ba4c-76b3cceeab13",["D",1749190420310],[186,187],[155,236],"81494dc0-429d-11f0-9a38-76b3cceeab13","Toolbar.tsx","81494e9c-429d-11f0-9a38-76b3cceeab13","a5a14528-e727-466e-93ac-c128c0aba4a2",7,["D",1749190469479],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0';\nimport type { Tool } from '../../shared/types.ts';\n\ninterface ToolbarProps {\n selectedTool: Tool;\n onToolSelect: (tool: Tool) => void;\n canvasSize: number;\n onCanvasSizeChange: (size: number) => void;\n showGrid: boolean;\n onToggleGrid: () => void;\n onUndo: () => void;\n onRedo: () => void;\n onClear: () => void;\n canUndo: boolean;\n canRedo: boolean;\n}\n\nconst TOOLS = [\n { id: 'brush' as Tool, name: 'Brush', icon: '🖌️', description: 'Draw pixels' },\n { id: 'eraser' as Tool, name: 'Eraser', icon: '🧹', description: 'Erase pixels' },\n { id: 'fill' as Tool, name: 'Fill', icon: '🪣', description: 'Fill area' },\n { id: 'eyedropper' as Tool, name: 'Eyedropper', icon: '💧', description: 'Pick color' },\n];\n\nconst CANVAS_SIZES = [8, 16, 24, 32, 48, 64];\n\nexport default function Toolbar({\n selectedTool,\n onToolSelect,\n canvasSize,\n onCanvasSizeChange,\n showGrid,\n onToggleGrid,\n onUndo,\n onRedo,\n onClear,\n canUndo,\n canRedo,\n}: ToolbarProps) {\n return (\n

Tools

\n \n {/* Tools */}\n

\n {TOOLS.map((tool) => (\n onToolSelect(tool.id)}\n className={`p-3 rounded-lg border-2 transition-all hover:scale-105 ${\n selectedTool === tool.id\n ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300'\n : 'border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:border-gray-400 dark:hover:border-gray-500'\n }`}\n title={tool.description}\n >\n

{tool.icon}

{tool.name}

\n \n ))}\n

\n\n {/* Canvas Size */}\n

\n Canvas Size\n onCanvasSizeChange(Number(e.target.value))}\n className=\"w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\"\n >\n {CANVAS_SIZES.map((size) => (\n \n ))}\n \n

\n\n {/* Grid Toggle */}\n

\n \n {showGrid ? '🔲' : '⬜'} {showGrid ? 'Hide' : 'Show'} Grid\n \n

\n\n {/* Actions */}\n

\n \n ↶ Undo\n \n \n ↷ Redo\n \n

\n \n 🗑️ Clear Canvas\n \n

\n );\n}",[],[155,257,249],"components","8c333390-429d-11f0-8dc7-76b3cceeab13","ExportPanel.tsx","8c333462-429d-11f0-8dc7-76b3cceeab13",8,["D",1749190487788],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from 'https://esm.sh/react@18.2.0';\nimport type { CanvasState, ExportOptions } from '../../shared/types.ts';\nimport { exportToPNG, exportToSVG } from '../utils/export.ts';\n\ninterface ExportPanelProps {\n canvas: CanvasState;\n}\n\nexport default function ExportPanel({ canvas }: ExportPanelProps) {\n const [exportOptions, setExportOptions] = useState({\n format: 'png',\n scale: 10,\n includeGrid: false,\n });\n\n const handleExport = () => {\n if (exportOptions.format === 'png') {\n exportToPNG(canvas, exportOptions);\n } else {\n exportToSVG(canvas, exportOptions);\n }\n };\n\n const hasPixels = canvas.pixels.size > 0;\n\n return (\n

Export

\n \n {/* Format Selection */}\n

\n Format\n

\n setExportOptions(prev => ({ ...prev, format: 'png' }))}\n className={`px-3 py-2 rounded-lg border-2 transition-colors text-sm font-medium ${\n exportOptions.format === 'png'\n ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300'\n : 'border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:border-gray-400 dark:hover:border-gray-500'\n }`}\n >\n PNG\n \n setExportOptions(prev => ({ ...prev, format: 'svg' }))}\n className={`px-3 py-2 rounded-lg border-2 transition-colors text-sm font-medium ${\n exportOptions.format === 'svg'\n ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300'\n : 'border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:border-gray-400 dark:hover:border-gray-500'\n }`}\n >\n SVG\n \n

\n\n {/* Scale */}\n

\n \n Pixel Size: {exportOptions.scale}px\n \n setExportOptions(prev => ({ ...prev, scale: Number(e.target.value) }))}\n className=\"w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer\"\n />\n

\n 1px\n 20px\n

\n\n {/* Include Grid */}\n

\n \n setExportOptions(prev => ({ ...prev, includeGrid: e.target.checked }))}\n className=\"w-4 h-4 text-blue-600 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 dark:focus:ring-blue-600\"\n />\n Include grid lines\n \n

\n\n {/* Preview Info */}\n

Output size: {canvas.width * exportOptions.scale} × {canvas.height * exportOptions.scale}px

Pixels drawn: {canvas.pixels.size}

\n\n {/* Export Button */}\n \n {hasPixels ? `📥 Export ${exportOptions.format.toUpperCase()}` : 'Draw something first!'}\n \n

\n );\n}",[],[155,257,259],"75369470-429d-11f0-a766-76b3cceeab13","ColorPalette.tsx","7536956a-429d-11f0-a766-76b3cceeab13",6,["D",1749190449219],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0';\n\ninterface ColorPaletteProps {\n selectedColor: string;\n onColorSelect: (color: string) => void;\n}\n\nconst PRESET_COLORS = [\n '#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF',\n '#800000', '#008000', '#000080', '#808000', '#800080', '#008080', '#C0C0C0', '#808080',\n '#FF8080', '#80FF80', '#8080FF', '#FFFF80', '#FF80FF', '#80FFFF', '#FFC080', '#C080FF',\n '#FF4040', '#40FF40', '#4040FF', '#FFFF40', '#FF40FF', '#40FFFF', '#FF8040', '#8040FF',\n];\n\nexport default function ColorPalette({ selectedColor, onColorSelect }: ColorPaletteProps) {\n return (\n

Colors

\n \n {/* Custom Color Picker */}\n

\n Custom Color\n

\n onColorSelect(e.target.value)}\n className=\"w-8 h-8 rounded border border-gray-300 dark:border-gray-600 cursor-pointer\"\n />\n onColorSelect(e.target.value)}\n className=\"flex-1 px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\"\n placeholder=\"#000000\"\n />\n

\n\n {/* Eraser */}\n

\n onColorSelect('transparent')}\n className={`w-full h-8 border-2 rounded flex items-center justify-center text-xs font-medium transition-colors ${\n selectedColor === 'transparent'\n ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300'\n : 'border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:border-gray-400 dark:hover:border-gray-500'\n }`}\n >\n 🧹 Eraser\n \n

\n\n {/* Preset Colors */}\n

\n {PRESET_COLORS.map((color) => (\n onColorSelect(color)}\n className={`w-6 h-6 rounded border-2 transition-all hover:scale-110 ${\n selectedColor === color\n ? 'border-blue-500 shadow-lg'\n : 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500'\n }`}\n style={{ backgroundColor: color }}\n title={color}\n />\n ))}\n

\n );\n}",[],[155,257,267],"9a7b6378-429d-11f0-8188-76b3cceeab13","Canvas.tsx","9a7b6472-429d-11f0-8188-76b3cceeab13",9,["D",1749190511749],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useRef, useEffect, useState, useCallback } from 'https://esm.sh/react@18.2.0';\nimport type { CanvasState, Tool } from '../../shared/types.ts';\nimport { getPixelKey } from '../utils/canvas.ts';\n\ninterface CanvasProps {\n canvas: CanvasState;\n selectedTool: Tool;\n selectedColor: string;\n showGrid: boolean;\n onPixelChange: (x: number, y: number, color: string) => void;\n onFloodFill: (x: number, y: number, color: string) => void;\n onColorPick: (color: string) => void;\n}\n\nexport default function Canvas({\n canvas,\n selectedTool,\n selectedColor,\n showGrid,\n onPixelChange,\n onFloodFill,\n onColorPick,\n}: CanvasProps) {\n const canvasRef = useRef(null);\n const [isDrawing, setIsDrawing] = useState(false);\n const [lastPixel, setLastPixel] = useState<{ x: number; y: number } | null>(null);\n\n const pixelSize = Math.min(400 / canvas.width, 400 / canvas.height);\n const canvasWidth = canvas.width * pixelSize;\n const canvasHeight = canvas.height * pixelSize;\n\n const getPixelFromEvent = useCallback((event: React.MouseEvent) => {\n const rect = canvasRef.current?.getBoundingClientRect();\n if (!rect) return null;\n\n const x = Math.floor((event.clientX - rect.left) / pixelSize);\n const y = Math.floor((event.clientY - rect.top) / pixelSize);\n\n if (x >= 0 && x < canvas.width && y >= 0 && y < canvas.height) {\n return { x, y };\n }\n return null;\n }, [pixelSize, canvas.width, canvas.height]);\n\n const handleMouseDown = useCallback((event: React.MouseEvent) => {\n const pixel = getPixelFromEvent(event);\n if (!pixel) return;\n\n if (selectedTool === 'fill') {\n onFloodFill(pixel.x, pixel.y, selectedColor);\n } else if (selectedTool === 'eyedropper') {\n const key = getPixelKey(pixel.x, pixel.y);\n const color = canvas.pixels.get(key) || '#000000';\n onColorPick(color);\n } else {\n setIsDrawing(true);\n setLastPixel(pixel);\n const color = selectedTool === 'eraser' ? 'transparent' : selectedColor;\n onPixelChange(pixel.x, pixel.y, color);\n }\n }, [getPixelFromEvent, selectedTool, selectedColor, onFloodFill, onColorPick, canvas.pixels, onPixelChange]);\n\n const handleMouseMove = useCallback((event: React.MouseEvent) => {\n if (!isDrawing || selectedTool === 'fill' || selectedTool === 'eyedropper') return;\n\n const pixel = getPixelFromEvent(event);\n if (!pixel) return;\n\n // Only draw if we moved to a different pixel\n if (!lastPixel || pixel.x !== lastPixel.x || pixel.y !== lastPixel.y) {\n setLastPixel(pixel);\n const color = selectedTool === 'eraser' ? 'transparent' : selectedColor;\n onPixelChange(pixel.x, pixel.y, color);\n }\n }, [isDrawing, selectedTool, getPixelFromEvent, lastPixel, selectedColor, onPixelChange]);\n\n const handleMouseUp = useCallback(() => {\n setIsDrawing(false);\n setLastPixel(null);\n }, []);\n\n // Draw the canvas\n useEffect(() => {\n const canvasElement = canvasRef.current;\n if (!canvasElement) return;\n\n const ctx = canvasElement.getContext('2d');\n if (!ctx) return;\n\n // Clear canvas\n ctx.clearRect(0, 0, canvasWidth, canvasHeight);\n\n // Fill background\n ctx.fillStyle = '#ffffff';\n ctx.fillRect(0, 0, canvasWidth, canvasHeight);\n\n // Draw pixels\n for (let y = 0; y < canvas.height; y++) {\n for (let x = 0; x < canvas.width; x++) {\n const key = getPixelKey(x, y);\n const color = canvas.pixels.get(key);\n\n if (color) {\n ctx.fillStyle = color;\n ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);\n }\n }\n }\n\n // Draw grid\n if (showGrid) {\n ctx.strokeStyle = '#e5e7eb';\n ctx.lineWidth = 1;\n\n for (let i = 0; i <= canvas.width; i++) {\n ctx.beginPath();\n ctx.moveTo(i * pixelSize, 0);\n ctx.lineTo(i * pixelSize, canvasHeight);\n ctx.stroke();\n }\n\n for (let i = 0; i <= canvas.height; i++) {\n ctx.beginPath();\n ctx.moveTo(0, i * pixelSize);\n ctx.lineTo(canvasWidth, i * pixelSize);\n ctx.stroke();\n }\n }\n }, [canvas, pixelSize, canvasWidth, canvasHeight, showGrid]);\n\n const getCursorStyle = () => {\n switch (selectedTool) {\n case 'brush':\n return 'crosshair';\n case 'eraser':\n return 'crosshair';\n case 'fill':\n return 'crosshair';\n case 'eyedropper':\n return 'crosshair';\n default:\n return 'default';\n }\n };\n\n return (\n

Canvas

\n \n {canvas.width} × {canvas.height}\n \n

\n \n

\n {selectedTool === 'brush' && 'Click and drag to draw'}\n {selectedTool === 'eraser' && 'Click and drag to erase'}\n {selectedTool === 'fill' && 'Click to fill area'}\n {selectedTool === 'eyedropper' && 'Click to pick color'}\n

\n );\n}",[],[155,257,275],"a7171a78-429d-11f0-8a6b-76b3cceeab13","App.tsx","a7171b9a-429d-11f0-8a6b-76b3cceeab13",10,["D",1749190532902],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useCallback } from 'https://esm.sh/react@18.2.0';\nimport type { AppState, Tool } from '../../shared/types.ts';\nimport { createEmptyCanvas, setPixel, floodFill, undo, redo, clearCanvas, resizeCanvas } from '../utils/canvas.ts';\nimport Canvas from './Canvas.tsx';\nimport Toolbar from './Toolbar.tsx';\nimport ColorPalette from './ColorPalette.tsx';\nimport ExportPanel from './ExportPanel.tsx';\n\nexport default function App() {\n const [appState, setAppState] = useState(() => ({\n selectedTool: 'brush',\n selectedColor: '#000000',\n canvasSize: 16,\n showGrid: true,\n canvas: createEmptyCanvas(16),\n }));\n\n const handleToolSelect = useCallback((tool: Tool) => {\n setAppState(prev => ({ ...prev, selectedTool: tool }));\n }, []);\n\n const handleColorSelect = useCallback((color: string) => {\n setAppState(prev => ({ ...prev, selectedColor: color }));\n }, []);\n\n const handleCanvasSizeChange = useCallback((size: number) => {\n setAppState(prev => ({\n ...prev,\n canvasSize: size,\n canvas: resizeCanvas(prev.canvas, size),\n }));\n }, []);\n\n const handleToggleGrid = useCallback(() => {\n setAppState(prev => ({ ...prev, showGrid: !prev.showGrid }));\n }, []);\n\n const handlePixelChange = useCallback((x: number, y: number, color: string) => {\n setAppState(prev => ({\n ...prev,\n canvas: setPixel(prev.canvas, x, y, color),\n }));\n }, []);\n\n const handleFloodFill = useCallback((x: number, y: number, color: string) => {\n setAppState(prev => ({\n ...prev,\n canvas: floodFill(prev.canvas, x, y, color),\n }));\n }, []);\n\n const handleColorPick = useCallback((color: string) => {\n setAppState(prev => ({ ...prev, selectedColor: color }));\n }, []);\n\n const handleUndo = useCallback(() => {\n setAppState(prev => ({\n ...prev,\n canvas: undo(prev.canvas),\n }));\n }, []);\n\n const handleRedo = useCallback(() => {\n setAppState(prev => ({\n ...prev,\n canvas: redo(prev.canvas),\n }));\n }, []);\n\n const handleClear = useCallback(() => {\n if (confirm('Are you sure you want to clear the canvas?')) {\n setAppState(prev => ({\n ...prev,\n canvas: clearCanvas(prev.canvas),\n }));\n }\n }, []);\n\n const canUndo = appState.canvas.historyIndex > 0;\n const canRedo = appState.canvas.historyIndex < appState.canvas.history.length - 1;\n\n return (\n

\n {/* Header */}\n

Pixel Art Studio

Create beautiful pixel art

\n 🎨\n Professional Pixel Editor\n

\n\n {/* Main Content */}\n

\n {/* Left Sidebar - Tools */}\n

\n \n \n \n

\n\n {/* Center - Canvas */}\n

\n \n

\n\n {/* Right Sidebar - Export */}\n

\n \n

\n\n {/* Footer */}\n \n

\n );\n}",[],[155,257,283],"7536a2f8-429d-11f0-a766-76b3cceeab13",["D",1749190449219],[180,181,182,183,184],[155,257],["D",1749190420310],[179,185,188,189],[155],"b9ba3886-429d-11f0-8fcd-76b3cceeab13",["D",1749190564166],[],[161,33],["D",1749190560928],[177],[161],["D",1749190288939],{"_96":95,"_103":99},{"_96":95,"_97":-5,"_98":99,"_18":55,"_100":101,"_102":25},{"_13":85,"_32":86,"_44":43,"_87":45,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":46,"_94":95},"ctx",{"_78":-5,"_123":341,"_342":343,"_344":345,"_346":25,"_347":25,"_348":25,"_349":58,"_350":-5,"_351":-7,"_352":-7,"_353":137,"_354":25,"_355":25,"_356":-5,"_357":25,"_358":25,"_359":25,"_360":-5},"ENV",{"_312":313,"_314":315,"_316":86,"_317":318,"_319":320,"_321":322,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332,"_333":334,"_335":336,"_337":338,"_339":340},"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 · v14