Pixel Art Studio

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_480":481,"_482":483},"routes/_app.x.$handle.$name",{"_97":96,"_32":46,"_105":87,"_27":106,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":-5,"_119":25,"_120":121,"_122":59,"_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",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":25},"version",242,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/components/Canvas.tsx","latestPath","fileId","9a7b6472-429d-11f0-8188-76b3cceeab13","name","Canvas.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useRef, useEffect, useState, useCallback } from 'https://esm.sh/react@18.2.0?deps=react@18.2.0,react-dom@18.2.0';\nimport type { CanvasState, Tool } from '../../shared/types.ts';\nimport { getPixelKey, getAllVisiblePixels, getActiveLayer } from '../utils/canvas.ts';\n\ninterface CanvasProps {\n canvas: CanvasState;\n selectedTool: Tool;\n selectedColor: string;\n secondaryColor: string;\n showGrid: boolean;\n brushSize: number;\n opacity: number;\n onPixelChange: (x: number, y: number, color: string) => void;\n onBrushDraw: (x: number, y: number, size: number, color: string) => void;\n onFloodFill: (x: number, y: number, color: string) => void;\n onLineDraw: (x0: number, y0: number, x1: number, y1: number, color: string) => void;\n onRectangleDraw: (x0: number, y0: number, x1: number, y1: number, color: string, filled: boolean) => void;\n onCircleDraw: (centerX: number, centerY: number, radius: number, color: string, filled: boolean) => void;\n onColorPick: (color: string) => void;\n}\n\nexport default function Canvas({\n canvas,\n selectedTool,\n selectedColor,\n secondaryColor,\n showGrid,\n brushSize,\n opacity,\n onPixelChange,\n onBrushDraw,\n onFloodFill,\n onLineDraw,\n onRectangleDraw,\n onCircleDraw,\n onColorPick,\n}: CanvasProps) {\n const canvasRef = useRef(null);\n const [isDrawing, setIsDrawing] = useState(false);\n const [startPixel, setStartPixel] = useState<{ x: number; y: number } | null>(null);\n const [currentPixel, setCurrentPixel] = useState<{ x: number; y: number } | null>(null);\n const [lastPixel, setLastPixel] = useState<{ x: number; y: number } | null>(null);\n const [previewCanvas, setPreviewCanvas] = useState(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 setStartPixel(pixel);\n setIsDrawing(true);\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 allPixels = getAllVisiblePixels(canvas);\n const color = allPixels.get(key) || '#000000';\n onColorPick(color);\n } else if (selectedTool === 'brush' || selectedTool === 'pencil') {\n setLastPixel(pixel);\n const color = selectedColor;\n onBrushDraw(pixel.x, pixel.y, brushSize, color);\n } else if (selectedTool === 'eraser') {\n setLastPixel(pixel);\n onBrushDraw(pixel.x, pixel.y, brushSize, 'transparent');\n }\n }, [getPixelFromEvent, selectedTool, selectedColor, brushSize, onFloodFill, onColorPick, canvas.pixels, onBrushDraw]);\n\n const handleMouseMove = useCallback((event: React.MouseEvent) => {\n const pixel = getPixelFromEvent(event);\n if (!pixel) return;\n\n setCurrentPixel(pixel);\n\n if (!isDrawing) return;\n\n if (selectedTool === 'brush' || selectedTool === 'pencil' || selectedTool === 'eraser') {\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 onBrushDraw(pixel.x, pixel.y, brushSize, color);\n }\n }\n // For line, rectangle, and circle tools, we'll show preview during drag\n }, [isDrawing, selectedTool, getPixelFromEvent, lastPixel, selectedColor, brushSize, onBrushDraw]);\n\n const handleMouseUp = useCallback((event: React.MouseEvent) => {\n if (!isDrawing || !startPixel) {\n setIsDrawing(false);\n setStartPixel(null);\n setLastPixel(null);\n return;\n }\n\n const pixel = getPixelFromEvent(event);\n if (!pixel) {\n setIsDrawing(false);\n setStartPixel(null);\n setCurrentPixel(null);\n setLastPixel(null);\n return;\n }\n\n if (selectedTool === 'line') {\n onLineDraw(startPixel.x, startPixel.y, pixel.x, pixel.y, selectedColor);\n } else if (selectedTool === 'rectangle') {\n const filled = event.shiftKey; // Hold shift for filled rectangle\n onRectangleDraw(startPixel.x, startPixel.y, pixel.x, pixel.y, selectedColor, filled);\n } else if (selectedTool === 'circle') {\n const radius = Math.sqrt((pixel.x - startPixel.x) ** 2 + (pixel.y - startPixel.y) ** 2);\n const filled = event.shiftKey; // Hold shift for filled circle\n onCircleDraw(startPixel.x, startPixel.y, radius, selectedColor, filled);\n }\n\n setIsDrawing(false);\n setStartPixel(null);\n setCurrentPixel(null);\n setLastPixel(null);\n }, [isDrawing, startPixel, getPixelFromEvent, selectedTool, selectedColor, onLineDraw, onRectangleDraw, onCircleDraw]);\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 from all visible layers\n const allPixels = getAllVisiblePixels(canvas);\n for (const [key, color] of allPixels) {\n const [x, y] = key.split(',').map(Number);\n if (color) {\n ctx.fillStyle = color;\n ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);\n }\n }\n\n // Draw preview for shape tools\n if (isDrawing && startPixel && currentPixel && (selectedTool === 'line' || selectedTool === 'rectangle' || selectedTool === 'circle')) {\n ctx.strokeStyle = selectedColor;\n ctx.fillStyle = selectedColor;\n ctx.globalAlpha = 0.7;\n ctx.lineWidth = 1;\n\n if (selectedTool === 'line') {\n // Draw preview line\n ctx.beginPath();\n ctx.moveTo(startPixel.x * pixelSize + pixelSize/2, startPixel.y * pixelSize + pixelSize/2);\n ctx.lineTo(currentPixel.x * pixelSize + pixelSize/2, currentPixel.y * pixelSize + pixelSize/2);\n ctx.stroke();\n } else if (selectedTool === 'rectangle') {\n // Draw preview rectangle\n const x = Math.min(startPixel.x, currentPixel.x) * pixelSize;\n const y = Math.min(startPixel.y, currentPixel.y) * pixelSize;\n const width = Math.abs(currentPixel.x - startPixel.x + 1) * pixelSize;\n const height = Math.abs(currentPixel.y - startPixel.y + 1) * pixelSize;\n \n ctx.strokeRect(x, y, width, height);\n } else if (selectedTool === 'circle') {\n // Draw preview circle\n const centerX = startPixel.x * pixelSize + pixelSize/2;\n const centerY = startPixel.y * pixelSize + pixelSize/2;\n const radius = Math.sqrt((currentPixel.x - startPixel.x) ** 2 + (currentPixel.y - startPixel.y) ** 2) * pixelSize;\n \n ctx.beginPath();\n ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);\n ctx.stroke();\n }\n \n ctx.globalAlpha = 1;\n }\n\n // Draw grid\n if (showGrid) {\n ctx.strokeStyle = '#e5e7eb';\n ctx.lineWidth = 1;\n\n // Only draw grid if pixels are large enough\n if (pixelSize >= 4) {\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 }\n }, [canvas, pixelSize, canvasWidth, canvasHeight, showGrid, isDrawing, startPixel, currentPixel, selectedTool, selectedColor]);\n\n const getCursorStyle = () => {\n switch (selectedTool) {\n case 'brush':\n case 'pencil':\n case 'eraser':\n case 'fill':\n case 'eyedropper':\n case 'line':\n case 'rectangle':\n case 'circle':\n case 'select':\n case 'move':\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 paint'}\n {selectedTool === 'pencil' && 'Click and drag to draw precise pixels'}\n {selectedTool === 'eraser' && 'Click and drag to erase'}\n {selectedTool === 'fill' && 'Click to fill connected area'}\n {selectedTool === 'eyedropper' && 'Click to sample color'}\n {selectedTool === 'line' && 'Click and drag to draw line'}\n {selectedTool === 'rectangle' && 'Click and drag to draw rectangle (Shift for filled)'}\n {selectedTool === 'circle' && 'Click and drag to draw circle (Shift for filled)'}\n {selectedTool === 'select' && 'Click and drag to select area'}\n {selectedTool === 'move' && 'Click and drag to move selection'}\n

\n );\n}","/** @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, getAllVisiblePixels, getActiveLayer } from '../utils/canvas.ts';\n\ninterface CanvasProps {\n canvas: CanvasState;\n selectedTool: Tool;\n selectedColor: string;\n secondaryColor: string;\n showGrid: boolean;\n brushSize: number;\n opacity: number;\n onPixelChange: (x: number, y: number, color: string) => void;\n onBrushDraw: (x: number, y: number, size: number, color: string) => void;\n onFloodFill: (x: number, y: number, color: string) => void;\n onLineDraw: (x0: number, y0: number, x1: number, y1: number, color: string) => void;\n onRectangleDraw: (x0: number, y0: number, x1: number, y1: number, color: string, filled: boolean) => void;\n onCircleDraw: (centerX: number, centerY: number, radius: number, color: string, filled: boolean) => void;\n onColorPick: (color: string) => void;\n}\n\nexport default function Canvas({\n canvas,\n selectedTool,\n selectedColor,\n secondaryColor,\n showGrid,\n brushSize,\n opacity,\n onPixelChange,\n onBrushDraw,\n onFloodFill,\n onLineDraw,\n onRectangleDraw,\n onCircleDraw,\n onColorPick,\n}: CanvasProps) {\n const canvasRef = useRef(null);\n const [isDrawing, setIsDrawing] = useState(false);\n const [startPixel, setStartPixel] = useState<{ x: number; y: number } | null>(null);\n const [currentPixel, setCurrentPixel] = useState<{ x: number; y: number } | null>(null);\n const [lastPixel, setLastPixel] = useState<{ x: number; y: number } | null>(null);\n const [previewCanvas, setPreviewCanvas] = useState(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 setStartPixel(pixel);\n setIsDrawing(true);\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 allPixels = getAllVisiblePixels(canvas);\n const color = allPixels.get(key) || '#000000';\n onColorPick(color);\n } else if (selectedTool === 'brush' || selectedTool === 'pencil') {\n setLastPixel(pixel);\n const color = selectedColor;\n onBrushDraw(pixel.x, pixel.y, brushSize, color);\n } else if (selectedTool === 'eraser') {\n setLastPixel(pixel);\n onBrushDraw(pixel.x, pixel.y, brushSize, 'transparent');\n }\n }, [getPixelFromEvent, selectedTool, selectedColor, brushSize, onFloodFill, onColorPick, canvas.pixels, onBrushDraw]);\n\n const handleMouseMove = useCallback((event: React.MouseEvent) => {\n const pixel = getPixelFromEvent(event);\n if (!pixel) return;\n\n setCurrentPixel(pixel);\n\n if (!isDrawing) return;\n\n if (selectedTool === 'brush' || selectedTool === 'pencil' || selectedTool === 'eraser') {\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 onBrushDraw(pixel.x, pixel.y, brushSize, color);\n }\n }\n // For line, rectangle, and circle tools, we'll show preview during drag\n }, [isDrawing, selectedTool, getPixelFromEvent, lastPixel, selectedColor, brushSize, onBrushDraw]);\n\n const handleMouseUp = useCallback((event: React.MouseEvent) => {\n if (!isDrawing || !startPixel) {\n setIsDrawing(false);\n setStartPixel(null);\n setLastPixel(null);\n return;\n }\n\n const pixel = getPixelFromEvent(event);\n if (!pixel) {\n setIsDrawing(false);\n setStartPixel(null);\n setCurrentPixel(null);\n setLastPixel(null);\n return;\n }\n\n if (selectedTool === 'line') {\n onLineDraw(startPixel.x, startPixel.y, pixel.x, pixel.y, selectedColor);\n } else if (selectedTool === 'rectangle') {\n const filled = event.shiftKey; // Hold shift for filled rectangle\n onRectangleDraw(startPixel.x, startPixel.y, pixel.x, pixel.y, selectedColor, filled);\n } else if (selectedTool === 'circle') {\n const radius = Math.sqrt((pixel.x - startPixel.x) ** 2 + (pixel.y - startPixel.y) ** 2);\n const filled = event.shiftKey; // Hold shift for filled circle\n onCircleDraw(startPixel.x, startPixel.y, radius, selectedColor, filled);\n }\n\n setIsDrawing(false);\n setStartPixel(null);\n setCurrentPixel(null);\n setLastPixel(null);\n }, [isDrawing, startPixel, getPixelFromEvent, selectedTool, selectedColor, onLineDraw, onRectangleDraw, onCircleDraw]);\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 from all visible layers\n const allPixels = getAllVisiblePixels(canvas);\n for (const [key, color] of allPixels) {\n const [x, y] = key.split(',').map(Number);\n if (color) {\n ctx.fillStyle = color;\n ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);\n }\n }\n\n // Draw preview for shape tools\n if (isDrawing && startPixel && currentPixel && (selectedTool === 'line' || selectedTool === 'rectangle' || selectedTool === 'circle')) {\n ctx.strokeStyle = selectedColor;\n ctx.fillStyle = selectedColor;\n ctx.globalAlpha = 0.7;\n ctx.lineWidth = 1;\n\n if (selectedTool === 'line') {\n // Draw preview line\n ctx.beginPath();\n ctx.moveTo(startPixel.x * pixelSize + pixelSize/2, startPixel.y * pixelSize + pixelSize/2);\n ctx.lineTo(currentPixel.x * pixelSize + pixelSize/2, currentPixel.y * pixelSize + pixelSize/2);\n ctx.stroke();\n } else if (selectedTool === 'rectangle') {\n // Draw preview rectangle\n const x = Math.min(startPixel.x, currentPixel.x) * pixelSize;\n const y = Math.min(startPixel.y, currentPixel.y) * pixelSize;\n const width = Math.abs(currentPixel.x - startPixel.x + 1) * pixelSize;\n const height = Math.abs(currentPixel.y - startPixel.y + 1) * pixelSize;\n \n ctx.strokeRect(x, y, width, height);\n } else if (selectedTool === 'circle') {\n // Draw preview circle\n const centerX = startPixel.x * pixelSize + pixelSize/2;\n const centerY = startPixel.y * pixelSize + pixelSize/2;\n const radius = Math.sqrt((currentPixel.x - startPixel.x) ** 2 + (currentPixel.y - startPixel.y) ** 2) * pixelSize;\n \n ctx.beginPath();\n ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);\n ctx.stroke();\n }\n \n ctx.globalAlpha = 1;\n }\n\n // Draw grid\n if (showGrid) {\n ctx.strokeStyle = '#e5e7eb';\n ctx.lineWidth = 1;\n\n // Only draw grid if pixels are large enough\n if (pixelSize >= 4) {\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 }\n }, [canvas, pixelSize, canvasWidth, canvasHeight, showGrid, isDrawing, startPixel, currentPixel, selectedTool, selectedColor]);\n\n const getCursorStyle = () => {\n switch (selectedTool) {\n case 'brush':\n case 'pencil':\n case 'eraser':\n case 'fill':\n case 'eyedropper':\n case 'line':\n case 'rectangle':\n case 'circle':\n case 'select':\n case 'move':\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 );\n}","createdAt",["D",1749503844016],"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","b7cbdef8-429d-11f0-b327-76b3cceeab13","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",{"_97":96,"_104":100},"org",{"_97":96,"_98":-5,"_99":100,"_18":55,"_101":102,"_103":25},"branch",{"_13":86,"_32":87,"_44":43,"_88":45,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":46,"_95":96},"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":476,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":477,"_81":478,"_83":479,"_85":25},"tree",[180,188,212,214,215],"files",[180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215],"counts",{"_170":155,"_171":63,"_172":63,"_173":174,"_175":176},"contents",[127,128,129,130,131],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":164,"_32":165,"_30":166,"_135":-5,"_42":43,"_41":167,"_137":59,"_39":168,"_13":155,"_34":156,"_36":-5,"_24":25,"_140":-5,"_27":169},{"_44":158,"_32":159,"_30":160,"_135":-5,"_42":43,"_41":161,"_137":59,"_39":162,"_13":155,"_34":156,"_36":-5,"_24":25,"_140":-5,"_27":163},{"_44":150,"_32":151,"_30":152,"_135":-5,"_42":43,"_41":153,"_137":59,"_39":154,"_13":155,"_34":156,"_36":-5,"_24":25,"_140":-5,"_27":157},{"_44":142,"_32":143,"_30":144,"_135":-5,"_42":43,"_41":145,"_137":59,"_39":146,"_13":147,"_34":20,"_36":148,"_24":25,"_140":-5,"_27":149},{"_44":132,"_32":133,"_30":134,"_135":-5,"_42":43,"_41":136,"_137":59,"_39":138,"_13":63,"_34":35,"_36":139,"_24":25,"_140":-5,"_27":141},"c2544da6-429d-11f0-a0fd-76b3cceeab13","main.tsx","15aea70e-429d-11f0-a0da-76b3cceeab13","parentId",16,"latest",["D",1749190578555],"// This file is not used - the main application is served from /backend/index.ts\n// Visit the application at the root URL to use the Pixel Art Studio","label",[133],"bf63a08c-443d-11f0-a99a-76b3cceeab13","README.md","558142ce-429d-11f0-beee-76b3cceeab13",220,["D",1749369244307],23,"# Pixel Art Studio\n\nA professional pixel art editor built with React and TailwindCSS featuring a modern interface inspired by Illustrator and Figma.\n\n## ✨ **Key Features**\n\n### 🎨 **Professional Drawing Tools**\n- **Selection Tool**: Select and manipulate areas of your artwork\n- **Move Tool**: Move selected areas around the canvas\n- **Brush**: Paint with customizable brush size and opacity\n- **Pencil**: Draw precise single pixels with pixel-perfect accuracy\n- **Eraser**: Remove pixels with adjustable size\n- **Fill Bucket**: Flood fill connected areas with color\n- **Eyedropper**: Sample colors directly from the canvas\n- **Line Tool**: Draw perfect straight lines\n- **Rectangle Tool**: Draw rectangles (hold Shift for filled)\n- **Circle Tool**: Draw circles (hold Shift for filled)\n\n### 🖥️ **Professional Interface**\n- **Illustrator-Style Toolbar**: Vertical tool palette with tooltips and keyboard shortcuts\n- **Top Menu Bar**: Professional menu system with quick actions and canvas info\n- **Tabbed Sidebar**: Organized panels for Colors, Layers, Properties, and Export\n- **Canvas Settings Bar**: Quick access to canvas size, brush settings, and tool options\n- **Modern Design**: Clean, professional interface with proper spacing and typography\n\n### 📐 **Advanced Canvas System**\n- **Flexible Sizing**: Choose from presets (8×8 to 128×128) or custom dimensions (4×4 to 512×512)\n- **Independent Dimensions**: Set width and height separately for non-square canvases\n- **Smart Grid**: Automatically hides when pixels are too small to see clearly\n- **Zoom-Adaptive**: Canvas scales intelligently based on size\n\n### 🎨 **Professional Color System**\n- **Primary/Secondary Colors**: Left-click for primary, right-click for secondary\n- **Color Picker**: HTML5 color picker with hex input\n- **32 Preset Colors**: Carefully curated color palette\n- **Eyedropper Sampling**: Pick colors directly from your artwork\n- **Transparent Support**: Full transparency support for layered artwork\n\n### 🏗️ **Panel System**\n- **Colors Panel**: Primary/secondary colors with 32 preset colors and color picker\n- **Layers Panel**: Visual layer management with opacity and visibility controls\n- **Properties Panel**: Context-sensitive tool properties and canvas information\n- **Export Panel**: Professional export options with scaling and format choices\n\n### 📤 **Export System**\n- **PNG Export**: High-quality raster images (1-20px per pixel)\n- **SVG Export**: Scalable vector graphics\n- **Grid Export**: Optional grid lines in exported images\n- **Custom Scaling**: Adjust output resolution for any use case\n\n### 🌙 **Enhanced Dark Mode**\n- **Deep Dark Theme**: Professional dark interface (#0d1117 background)\n- **System Integration**: Automatic switching based on OS preference\n- **Smooth Transitions**: Animated theme changes\n- **Enhanced Contrast**: Optimized for extended creative sessions\n\n## 🎯 **Professional Workspace**\n\nThe interface is designed to feel familiar to users of professional design tools:\n\n### Layout Structure\n- **Top Menu Bar**: File, Edit, View, Layer, Filter menus with undo/redo and grid toggle\n- **Canvas Settings Bar**: Quick access to canvas size, brush settings, and tool properties\n- **Left Toolbar**: Vertical tool palette with keyboard shortcuts (V, M, B, P, E, G, I, L, R, O)\n- **Center Canvas**: Clean, focused workspace with professional canvas presentation\n- **Right Sidebar**: Tabbed panels for Colors, Layers, Properties, and Export\n\n### Keyboard Shortcuts\n- **V**: Select tool\n- **M**: Move tool\n- **B**: Brush tool\n- **P**: Pencil tool\n- **E**: Eraser tool\n- **G**: Fill bucket tool\n- **I**: Eyedropper tool\n- **L**: Line tool\n- **R**: Rectangle tool\n- **O**: Circle tool\n- **Ctrl+Z**: Undo\n- **Ctrl+Y**: Redo\n- **Ctrl+G**: Toggle grid\n\n## 🛠️ **Tool Usage**\n\n### Basic Drawing\n1. Select **Brush** or **Pencil** tool from the left toolbar\n2. Choose your color from the Colors panel\n3. Adjust brush size and opacity in the canvas settings bar\n4. Click and drag on canvas to draw\n\n### Shape Tools\n- **Line**: Click and drag to draw straight lines\n- **Rectangle**: Click and drag to draw rectangles (Shift for filled)\n- **Circle**: Click and drag from center outward (Shift for filled)\n\n### Selection Tools\n- **Select**: Click and drag to select rectangular areas\n- **Move**: Drag selected areas to new positions\n- **Eyedropper**: Click any pixel to sample its color\n\n### Advanced Features\n- **Fill Bucket**: Click to fill connected areas with the same color\n- **Undo/Redo**: Full history support for all operations\n- **Grid Toggle**: Show/hide pixel grid for precision work\n- **Custom Canvas**: Set any dimensions up to 512×512 pixels\n\n## 🎨 **Professional Workflow**\n\n1. **Set Canvas Size**: Use the canvas settings dropdown to choose presets or custom dimensions\n2. **Select Tools**: Use keyboard shortcuts or click tools in the left toolbar\n3. **Manage Colors**: Use the Colors tab in the right sidebar\n4. **Organize Layers**: Switch to the Layers tab for complex artwork\n5. **Adjust Properties**: Use the Properties tab for tool-specific settings\n6. **Export**: Use the Export tab to save your work with custom scaling\n\n## 🔧 **Technical Features**\n\n- **React 18.2.0** with TypeScript for type safety\n- **Professional UI Components** with proper SVG icons and tooltips\n- **TailwindCSS** with custom dark theme and professional styling\n- **HTML5 Canvas** for high-performance drawing\n- **Advanced Algorithms**: Bresenham's line drawing, flood fill\n- **Responsive Design**: Works on all screen sizes\n- **Memory Efficient**: Optimized pixel storage and history\n\n## 📱 **Browser Support**\n\n- Modern browsers with HTML5 Canvas support\n- Automatic fallbacks for older browsers\n- Touch support for mobile devices\n- Keyboard shortcuts for power users\n\n## 🎨 **Perfect For**\n\n- **Game Development**: Sprites, tiles, and game assets\n- **Icon Design**: Clean, pixel-perfect icons\n- **Digital Art**: Retro-style artwork and animations\n- **Prototyping**: Quick mockups and concepts\n- **Education**: Learning pixel art fundamentals\n\nThe application provides a truly professional pixel art editing experience with a modern interface that feels familiar to users of industry-standard design tools like Illustrator and Figma.",[143],"5b2fadaa-429d-11f0-824b-76b3cceeab13","shared","b80fb4f5-cf48-44f8-aa98-994530ad4980",3,["D",1749190405552],0,"directory",[151],"63fb7536-429d-11f0-ba4c-76b3cceeab13","frontend","14a1e83a-7a59-4420-8b80-5bad1461df87",4,["D",1749190420310],[159],"b7cbe600-429d-11f0-b327-76b3cceeab13","backend","40b96a62-9370-4245-a5e8-8d868c8b437d",13,["D",1749190560928],[165],"pulls","branches","forks","envVars",{"_177":155,"_179":155},"connections",{"_177":155,"_178":155},"count","unfilledCount","emptyCount",{"_44":164,"_32":165,"_30":166,"_135":-5,"_42":43,"_41":167,"_137":59,"_39":473,"_13":155,"_34":156,"_36":-5,"_24":25,"_140":-5,"_217":474,"_27":475},{"_44":469,"_32":452,"_30":446,"_135":166,"_42":43,"_41":456,"_137":59,"_39":470,"_13":155,"_34":156,"_36":-5,"_24":25,"_140":-5,"_217":471,"_27":472},{"_44":461,"_32":462,"_30":463,"_135":446,"_42":43,"_41":464,"_137":59,"_39":465,"_13":155,"_34":35,"_36":466,"_24":25,"_140":-5,"_217":467,"_27":468},{"_44":453,"_32":454,"_30":455,"_135":446,"_42":43,"_41":456,"_137":59,"_39":457,"_13":155,"_34":35,"_36":458,"_24":25,"_140":-5,"_217":459,"_27":460},{"_44":443,"_32":444,"_30":445,"_135":446,"_42":43,"_41":447,"_137":59,"_39":448,"_13":155,"_34":35,"_36":449,"_24":25,"_140":-5,"_217":450,"_27":451},{"_44":439,"_32":268,"_30":433,"_135":166,"_42":43,"_41":434,"_137":59,"_39":440,"_13":155,"_34":156,"_36":-5,"_24":25,"_140":-5,"_217":441,"_27":442},{"_44":430,"_32":431,"_30":432,"_135":433,"_42":43,"_41":434,"_137":59,"_39":435,"_13":155,"_34":35,"_36":436,"_24":25,"_140":-5,"_217":437,"_27":438},{"_44":422,"_32":423,"_30":57,"_135":166,"_42":43,"_41":424,"_137":59,"_39":425,"_13":381,"_34":426,"_36":427,"_24":25,"_140":46,"_217":428,"_27":429},{"_44":158,"_32":159,"_30":160,"_135":-5,"_42":43,"_41":161,"_137":59,"_39":419,"_13":155,"_34":156,"_36":-5,"_24":25,"_140":-5,"_217":420,"_27":421},{"_44":415,"_32":298,"_30":292,"_135":160,"_42":43,"_41":381,"_137":59,"_39":416,"_13":155,"_34":156,"_36":-5,"_24":25,"_140":-5,"_217":417,"_27":418},{"_44":406,"_32":407,"_30":408,"_135":292,"_42":43,"_41":409,"_137":25,"_39":410,"_13":411,"_34":35,"_36":412,"_24":25,"_140":-5,"_217":413,"_27":414},{"_44":398,"_32":399,"_30":400,"_135":292,"_42":43,"_41":401,"_137":25,"_39":402,"_13":155,"_34":35,"_36":403,"_24":25,"_140":-5,"_217":404,"_27":405},{"_44":393,"_32":33,"_30":31,"_135":292,"_42":43,"_41":14,"_137":25,"_39":394,"_13":395,"_34":35,"_36":38,"_24":25,"_140":-5,"_217":396,"_27":397},{"_44":385,"_32":386,"_30":387,"_135":292,"_42":43,"_41":388,"_137":59,"_39":389,"_13":372,"_34":35,"_36":390,"_24":25,"_140":-5,"_217":391,"_27":392},{"_44":376,"_32":377,"_30":378,"_135":292,"_42":43,"_41":379,"_137":59,"_39":380,"_13":381,"_34":35,"_36":382,"_24":25,"_140":-5,"_217":383,"_27":384},{"_44":367,"_32":368,"_30":369,"_135":292,"_42":43,"_41":370,"_137":59,"_39":371,"_13":372,"_34":35,"_36":373,"_24":25,"_140":-5,"_217":374,"_27":375},{"_44":359,"_32":360,"_30":361,"_135":292,"_42":43,"_41":362,"_137":59,"_39":363,"_13":329,"_34":35,"_36":364,"_24":25,"_140":-5,"_217":365,"_27":366},{"_44":350,"_32":351,"_30":352,"_135":292,"_42":43,"_41":353,"_137":59,"_39":354,"_13":355,"_34":35,"_36":356,"_24":25,"_140":-5,"_217":357,"_27":358},{"_44":341,"_32":342,"_30":343,"_135":292,"_42":43,"_41":344,"_137":25,"_39":345,"_13":346,"_34":35,"_36":347,"_24":25,"_140":-5,"_217":348,"_27":349},{"_44":333,"_32":334,"_30":335,"_135":292,"_42":43,"_41":336,"_137":59,"_39":337,"_13":329,"_34":35,"_36":338,"_24":25,"_140":-5,"_217":339,"_27":340},{"_44":324,"_32":325,"_30":326,"_135":292,"_42":43,"_41":327,"_137":25,"_39":328,"_13":329,"_34":35,"_36":330,"_24":25,"_140":-5,"_217":331,"_27":332},{"_44":316,"_32":317,"_30":318,"_135":292,"_42":43,"_41":319,"_137":25,"_39":320,"_13":155,"_34":35,"_36":321,"_24":25,"_140":-5,"_217":322,"_27":323},{"_44":307,"_32":308,"_30":309,"_135":292,"_42":43,"_41":310,"_137":59,"_39":311,"_13":312,"_34":35,"_36":313,"_24":25,"_140":-5,"_217":314,"_27":315},{"_44":299,"_32":300,"_30":301,"_135":292,"_42":43,"_41":302,"_137":25,"_39":303,"_13":153,"_34":35,"_36":304,"_24":25,"_140":-5,"_217":305,"_27":306},{"_44":289,"_32":290,"_30":291,"_135":292,"_42":43,"_41":293,"_137":25,"_39":294,"_13":155,"_34":35,"_36":295,"_24":25,"_140":-5,"_217":296,"_27":297},{"_44":285,"_32":268,"_30":262,"_135":160,"_42":43,"_41":161,"_137":59,"_39":286,"_13":155,"_34":156,"_36":-5,"_24":25,"_140":-5,"_217":287,"_27":288},{"_44":277,"_32":278,"_30":279,"_135":262,"_42":43,"_41":280,"_137":59,"_39":281,"_13":161,"_34":35,"_36":282,"_24":25,"_140":-5,"_217":283,"_27":284},{"_44":269,"_32":270,"_30":271,"_135":262,"_42":43,"_41":272,"_137":59,"_39":273,"_13":153,"_34":35,"_36":274,"_24":25,"_140":-5,"_217":275,"_27":276},{"_44":259,"_32":260,"_30":261,"_135":262,"_42":43,"_41":263,"_137":59,"_39":264,"_13":63,"_34":35,"_36":265,"_24":25,"_140":-5,"_217":266,"_27":267},{"_44":251,"_32":252,"_30":253,"_135":160,"_42":43,"_41":254,"_137":59,"_39":255,"_13":155,"_34":20,"_36":256,"_24":25,"_140":-5,"_217":257,"_27":258},{"_44":242,"_32":243,"_30":244,"_135":160,"_42":43,"_41":245,"_137":59,"_39":246,"_13":247,"_34":20,"_36":248,"_24":25,"_140":-5,"_217":249,"_27":250},{"_44":234,"_32":235,"_30":236,"_135":160,"_42":43,"_41":237,"_137":59,"_39":238,"_13":153,"_34":35,"_36":239,"_24":25,"_140":-5,"_217":240,"_27":241},{"_44":150,"_32":151,"_30":152,"_135":-5,"_42":43,"_41":153,"_137":59,"_39":231,"_13":155,"_34":156,"_36":-5,"_24":25,"_140":-5,"_217":232,"_27":233},{"_44":223,"_32":224,"_30":225,"_135":152,"_42":43,"_41":226,"_137":59,"_39":227,"_13":136,"_34":35,"_36":228,"_24":25,"_140":-5,"_217":229,"_27":230},{"_44":142,"_32":143,"_30":144,"_135":-5,"_42":43,"_41":145,"_137":59,"_39":220,"_13":147,"_34":20,"_36":148,"_24":25,"_140":-5,"_217":221,"_27":222},{"_44":132,"_32":133,"_30":134,"_135":-5,"_42":43,"_41":136,"_137":59,"_39":216,"_13":63,"_34":35,"_36":139,"_24":25,"_140":-5,"_217":218,"_27":219},["D",1749190578555],"children",[],[133],["D",1749369244307],[],[143],"d473f8b4-4442-11f0-a87d-76b3cceeab13","types.ts","5b2fa544-429d-11f0-824b-76b3cceeab13",228,["D",1749371427129],"export interface Layer {\n id: string;\n name: string;\n visible: boolean;\n opacity: number;\n pixels: Map;\n}\n\nexport interface CanvasState {\n width: number;\n height: number;\n layers: Layer[];\n activeLayerId: string;\n history: {\n layers: Layer[];\n activeLayerId: string;\n }[];\n historyIndex: number;\n}\n\nexport type Tool = \n | 'brush' \n | 'pencil'\n | 'eraser' \n | 'fill' \n | 'eyedropper' \n | 'line' \n | 'rectangle' \n | 'circle' \n | 'select'\n | 'move';\n\nexport type LayoutMode = 'professional';\n\nexport type Theme = 'light' | 'dark' | 'darker' | 'system';\n\nexport interface AppState {\n selectedTool: Tool;\n selectedColor: string;\n secondaryColor: string;\n canvasSize: number;\n customCanvasWidth: number;\n customCanvasHeight: number;\n useCustomSize: boolean;\n showGrid: boolean;\n brushSize: number;\n opacity: number;\n layoutMode: LayoutMode;\n showLayers: boolean;\n showProperties: boolean;\n theme: Theme;\n canvas: CanvasState;\n selection?: {\n x: number;\n y: number;\n width: number;\n height: number;\n pixels: Map;\n };\n user?: User;\n}\n\nexport interface ExportOptions {\n format: 'png' | 'svg';\n scale: number;\n includeGrid: boolean;\n}\n\n// User System Types\nexport interface User {\n id: number;\n username: string;\n email: string;\n display_name?: string;\n avatar_url?: string;\n}\n\nexport interface Artwork {\n id: number;\n user_id: number;\n title: string;\n description?: string;\n canvas_data: string; // JSON string of CanvasState\n canvas_width: number;\n canvas_height: number;\n thumbnail_data?: string;\n is_public: boolean;\n tags?: string; // JSON array\n created_at: string;\n updated_at: string;\n}\n\nexport interface AuthResponse {\n user?: User;\n error?: string;\n}\n\nexport interface ArtworkResponse {\n artwork?: Artwork;\n artworks?: Artwork[];\n total?: number;\n error?: string;\n}",[],[151,224],["D",1749190405552],[213],[151],"1685a984-4577-11f0-be3e-76b3cceeab13","index.tsx","a9ad479e-429d-11f0-abaa-76b3cceeab13",240,["D",1749503822967],"/** @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();",[],[159,235],"87ee05d4-4442-11f0-bcbd-76b3cceeab13","index.html","b2b389ca-429d-11f0-abaa-76b3cceeab13",222,["D",1749371298740],11,"\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",[],[159,243],"c8467838-429d-11f0-ad23-76b3cceeab13","favicon.svg","c84678e2-429d-11f0-ad23-76b3cceeab13",17,["D",1749190588558],"",[],[159,252],"4abcc8bc-4370-11f0-8e81-76b3cceeab13","theme.ts","75f64680-436f-11f0-a73c-76b3cceeab13","c24bc297-9c8d-497f-a41e-147a2232661b",173,["D",1749281001763],"import type { Theme } from '../../shared/types.ts';\n\nexport const applyTheme = (theme: Theme) => {\n const root = document.documentElement;\n \n // Remove existing theme classes\n root.classList.remove('light', 'dark', 'darker');\n \n if (theme === 'system') {\n // Use system preference\n const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n root.classList.add(prefersDark ? 'darker' : 'light');\n } else {\n root.classList.add(theme);\n }\n \n // Save to localStorage\n localStorage.setItem('pixelart-theme', theme);\n};\n\nexport const getSystemTheme = (): 'light' | 'darker' => {\n return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'darker' : 'light';\n};\n\nexport const getSavedTheme = (): Theme => {\n const saved = localStorage.getItem('pixelart-theme');\n if (saved && ['light', 'dark', 'darker', 'system'].includes(saved)) {\n return saved as Theme;\n }\n return 'darker'; // Default theme\n};\n\nexport const initializeTheme = (theme?: Theme) => {\n const themeToUse = theme || getSavedTheme();\n applyTheme(themeToUse);\n \n // Listen for system theme changes\n if (themeToUse === 'system') {\n const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n mediaQuery.addEventListener('change', () => {\n applyTheme('system');\n });\n }\n \n return themeToUse;\n};",[],[159,268,260],"utils","4661c336-42a2-11f0-b8bb-76b3cceeab13","export.ts","6ccecef6-429d-11f0-957e-76b3cceeab13",115,["D",1749192518127],"import type { CanvasState, ExportOptions } from '../../shared/types.ts';\nimport { getPixelKey, getAllVisiblePixels } 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 from all visible layers\n const allPixels = getAllVisiblePixels(canvas);\n for (const [key, color] of allPixels) {\n const [x, y] = key.split(',').map(Number);\n if (color) {\n ctx.fillStyle = color;\n ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);\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}",[],[159,268,270],"00ec7184-42a2-11f0-965e-76b3cceeab13","canvas.ts","63fb68e8-429d-11f0-ba4c-76b3cceeab13",102,["D",1749192401600],"import type { CanvasState, Layer } from '../../shared/types.ts';\n\nexport function createEmptyCanvas(width: number, height: number): CanvasState {\n const backgroundLayer: Layer = {\n id: 'background',\n name: 'Background',\n visible: true,\n opacity: 1,\n pixels: new Map(),\n };\n\n const layer1: Layer = {\n id: 'layer1',\n name: 'Layer 1',\n visible: true,\n opacity: 1,\n pixels: new Map(),\n };\n\n return {\n width,\n height,\n layers: [backgroundLayer, layer1],\n activeLayerId: 'layer1',\n history: [{\n layers: [backgroundLayer, layer1],\n activeLayerId: 'layer1',\n }],\n historyIndex: 0,\n };\n}\n\nexport function getPixelKey(x: number, y: number): string {\n return `${x},${y}`;\n}\n\nexport function getActiveLayer(canvas: CanvasState): Layer | undefined {\n return canvas.layers.find(layer => layer.id === canvas.activeLayerId);\n}\n\nexport function getAllVisiblePixels(canvas: CanvasState): Map {\n const allPixels = new Map();\n \n // Render layers from bottom to top\n for (const layer of canvas.layers) {\n if (!layer.visible) continue;\n \n for (const [key, color] of layer.pixels) {\n if (layer.opacity < 1) {\n // Simple opacity handling - in a real app you'd blend colors properly\n allPixels.set(key, color);\n } else {\n allPixels.set(key, color);\n }\n }\n }\n \n return allPixels;\n}\n\nexport function setPixel(canvas: CanvasState, x: number, y: number, color: string): CanvasState {\n const activeLayer = getActiveLayer(canvas);\n if (!activeLayer) return canvas;\n\n const newLayers = canvas.layers.map(layer => {\n if (layer.id === canvas.activeLayerId) {\n const newPixels = new Map(layer.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 return { ...layer, pixels: newPixels };\n }\n return layer;\n });\n\n const newHistory = canvas.history.slice(0, canvas.historyIndex + 1);\n newHistory.push({\n layers: newLayers.map(layer => ({ ...layer, pixels: new Map(layer.pixels) })),\n activeLayerId: canvas.activeLayerId,\n });\n\n return {\n ...canvas,\n layers: newLayers,\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 activeLayer = getActiveLayer(canvas);\n if (!activeLayer) return canvas;\n\n const startKey = getPixelKey(startX, startY);\n const originalColor = activeLayer.pixels.get(startKey) || 'transparent';\n \n if (originalColor === newColor) return canvas;\n\n const newPixels = new Map(activeLayer.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 newLayers = canvas.layers.map(layer => {\n if (layer.id === canvas.activeLayerId) {\n return { ...layer, pixels: newPixels };\n }\n return layer;\n });\n\n const newHistory = canvas.history.slice(0, canvas.historyIndex + 1);\n newHistory.push({\n layers: newLayers.map(layer => ({ ...layer, pixels: new Map(layer.pixels) })),\n activeLayerId: canvas.activeLayerId,\n });\n\n return {\n ...canvas,\n layers: newLayers,\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 const historyState = canvas.history[newIndex];\n return {\n ...canvas,\n layers: historyState.layers.map(layer => ({ ...layer, pixels: new Map(layer.pixels) })),\n activeLayerId: historyState.activeLayerId,\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 const historyState = canvas.history[newIndex];\n return {\n ...canvas,\n layers: historyState.layers.map(layer => ({ ...layer, pixels: new Map(layer.pixels) })),\n activeLayerId: historyState.activeLayerId,\n historyIndex: newIndex,\n };\n }\n return canvas;\n}\n\nexport function clearCanvas(canvas: CanvasState): CanvasState {\n const newLayers = canvas.layers.map(layer => {\n if (layer.id === canvas.activeLayerId) {\n return { ...layer, pixels: new Map() };\n }\n return layer;\n });\n\n const newHistory = canvas.history.slice(0, canvas.historyIndex + 1);\n newHistory.push({\n layers: newLayers.map(layer => ({ ...layer, pixels: new Map(layer.pixels) })),\n activeLayerId: canvas.activeLayerId,\n });\n\n return {\n ...canvas,\n layers: newLayers,\n history: newHistory,\n historyIndex: newHistory.length - 1,\n };\n}\n\nexport function resizeCanvas(canvas: CanvasState, newWidth: number, newHeight: number): CanvasState {\n const newLayers = canvas.layers.map(layer => {\n const newPixels = new Map();\n \n // Copy existing pixels that fit in the new size\n for (const [key, color] of layer.pixels) {\n const [x, y] = key.split(',').map(Number);\n if (x < newWidth && y < newHeight) {\n newPixels.set(key, color);\n }\n }\n\n return { ...layer, pixels: newPixels };\n });\n\n return {\n width: newWidth,\n height: newHeight,\n layers: newLayers,\n activeLayerId: canvas.activeLayerId,\n history: [{\n layers: newLayers.map(layer => ({ ...layer, pixels: new Map(layer.pixels) })),\n activeLayerId: canvas.activeLayerId,\n }],\n historyIndex: 0,\n };\n}\n\nexport function addLayer(canvas: CanvasState, name: string): CanvasState {\n const newLayer: Layer = {\n id: `layer_${Date.now()}`,\n name,\n visible: true,\n opacity: 1,\n pixels: new Map(),\n };\n\n const newLayers = [...canvas.layers, newLayer];\n\n const newHistory = canvas.history.slice(0, canvas.historyIndex + 1);\n newHistory.push({\n layers: newLayers.map(layer => ({ ...layer, pixels: new Map(layer.pixels) })),\n activeLayerId: newLayer.id,\n });\n\n return {\n ...canvas,\n layers: newLayers,\n activeLayerId: newLayer.id,\n history: newHistory,\n historyIndex: newHistory.length - 1,\n };\n}\n\nexport function deleteLayer(canvas: CanvasState, layerId: string): CanvasState {\n if (canvas.layers.length <= 1) return canvas; // Don't delete the last layer\n\n const newLayers = canvas.layers.filter(layer => layer.id !== layerId);\n let newActiveLayerId = canvas.activeLayerId;\n\n // If we deleted the active layer, switch to another one\n if (layerId === canvas.activeLayerId) {\n newActiveLayerId = newLayers[newLayers.length - 1].id;\n }\n\n const newHistory = canvas.history.slice(0, canvas.historyIndex + 1);\n newHistory.push({\n layers: newLayers.map(layer => ({ ...layer, pixels: new Map(layer.pixels) })),\n activeLayerId: newActiveLayerId,\n });\n\n return {\n ...canvas,\n layers: newLayers,\n activeLayerId: newActiveLayerId,\n history: newHistory,\n historyIndex: newHistory.length - 1,\n };\n}\n\nexport function setActiveLayer(canvas: CanvasState, layerId: string): CanvasState {\n return {\n ...canvas,\n activeLayerId: layerId,\n };\n}\n\nexport function toggleLayerVisibility(canvas: CanvasState, layerId: string): CanvasState {\n const newLayers = canvas.layers.map(layer => {\n if (layer.id === layerId) {\n return { ...layer, visible: !layer.visible };\n }\n return layer;\n });\n\n return {\n ...canvas,\n layers: newLayers,\n };\n}\n\nexport function setLayerOpacity(canvas: CanvasState, layerId: string, opacity: number): CanvasState {\n const newLayers = canvas.layers.map(layer => {\n if (layer.id === layerId) {\n return { ...layer, opacity: Math.max(0, Math.min(1, opacity)) };\n }\n return layer;\n });\n\n return {\n ...canvas,\n layers: newLayers,\n };\n}\n\n// Drawing functions that work with the active layer\nexport function drawLine(canvas: CanvasState, x0: number, y0: number, x1: number, y1: number, color: string): CanvasState {\n const activeLayer = getActiveLayer(canvas);\n if (!activeLayer) return canvas;\n\n const newPixels = new Map(activeLayer.pixels);\n \n // Bresenham's line algorithm\n const dx = Math.abs(x1 - x0);\n const dy = Math.abs(y1 - y0);\n const sx = x0 < x1 ? 1 : -1;\n const sy = y0 < y1 ? 1 : -1;\n let err = dx - dy;\n\n let x = x0;\n let y = y0;\n\n while (true) {\n if (x >= 0 && x < canvas.width && y >= 0 && y < canvas.height) {\n const key = getPixelKey(x, y);\n if (color === 'transparent') {\n newPixels.delete(key);\n } else {\n newPixels.set(key, color);\n }\n }\n\n if (x === x1 && y === y1) break;\n \n const e2 = 2 * err;\n if (e2 > -dy) {\n err -= dy;\n x += sx;\n }\n if (e2 < dx) {\n err += dx;\n y += sy;\n }\n }\n\n const newLayers = canvas.layers.map(layer => {\n if (layer.id === canvas.activeLayerId) {\n return { ...layer, pixels: newPixels };\n }\n return layer;\n });\n\n const newHistory = canvas.history.slice(0, canvas.historyIndex + 1);\n newHistory.push({\n layers: newLayers.map(layer => ({ ...layer, pixels: new Map(layer.pixels) })),\n activeLayerId: canvas.activeLayerId,\n });\n\n return {\n ...canvas,\n layers: newLayers,\n history: newHistory,\n historyIndex: newHistory.length - 1,\n };\n}\n\nexport function drawRectangle(canvas: CanvasState, x0: number, y0: number, x1: number, y1: number, color: string, filled: boolean = false): CanvasState {\n const activeLayer = getActiveLayer(canvas);\n if (!activeLayer) return canvas;\n\n const newPixels = new Map(activeLayer.pixels);\n \n const minX = Math.min(x0, x1);\n const maxX = Math.max(x0, x1);\n const minY = Math.min(y0, y1);\n const maxY = Math.max(y0, y1);\n\n for (let y = minY; y <= maxY; y++) {\n for (let x = minX; x <= maxX; x++) {\n if (x >= 0 && x < canvas.width && y >= 0 && y < canvas.height) {\n const isEdge = x === minX || x === maxX || y === minY || y === maxY;\n \n if (filled || isEdge) {\n const key = getPixelKey(x, y);\n if (color === 'transparent') {\n newPixels.delete(key);\n } else {\n newPixels.set(key, color);\n }\n }\n }\n }\n }\n\n const newLayers = canvas.layers.map(layer => {\n if (layer.id === canvas.activeLayerId) {\n return { ...layer, pixels: newPixels };\n }\n return layer;\n });\n\n const newHistory = canvas.history.slice(0, canvas.historyIndex + 1);\n newHistory.push({\n layers: newLayers.map(layer => ({ ...layer, pixels: new Map(layer.pixels) })),\n activeLayerId: canvas.activeLayerId,\n });\n\n return {\n ...canvas,\n layers: newLayers,\n history: newHistory,\n historyIndex: newHistory.length - 1,\n };\n}\n\nexport function drawCircle(canvas: CanvasState, centerX: number, centerY: number, radius: number, color: string, filled: boolean = false): CanvasState {\n const activeLayer = getActiveLayer(canvas);\n if (!activeLayer) return canvas;\n\n const newPixels = new Map(activeLayer.pixels);\n \n for (let y = centerY - radius; y <= centerY + radius; y++) {\n for (let x = centerX - radius; x <= centerX + radius; x++) {\n if (x >= 0 && x < canvas.width && y >= 0 && y < canvas.height) {\n const distance = Math.sqrt((x - centerX) ** 2 + (y - centerY) ** 2);\n \n if (filled ? distance <= radius : Math.abs(distance - radius) < 0.5) {\n const key = getPixelKey(x, y);\n if (color === 'transparent') {\n newPixels.delete(key);\n } else {\n newPixels.set(key, color);\n }\n }\n }\n }\n }\n\n const newLayers = canvas.layers.map(layer => {\n if (layer.id === canvas.activeLayerId) {\n return { ...layer, pixels: newPixels };\n }\n return layer;\n });\n\n const newHistory = canvas.history.slice(0, canvas.historyIndex + 1);\n newHistory.push({\n layers: newLayers.map(layer => ({ ...layer, pixels: new Map(layer.pixels) })),\n activeLayerId: canvas.activeLayerId,\n });\n\n return {\n ...canvas,\n layers: newLayers,\n history: newHistory,\n historyIndex: newHistory.length - 1,\n };\n}\n\nexport function drawBrush(canvas: CanvasState, x: number, y: number, size: number, color: string): CanvasState {\n const activeLayer = getActiveLayer(canvas);\n if (!activeLayer) return canvas;\n\n const newPixels = new Map(activeLayer.pixels);\n const radius = Math.floor(size / 2);\n \n for (let dy = -radius; dy <= radius; dy++) {\n for (let dx = -radius; dx <= radius; dx++) {\n const px = x + dx;\n const py = y + dy;\n \n if (px >= 0 && px < canvas.width && py >= 0 && py < canvas.height) {\n const distance = Math.sqrt(dx * dx + dy * dy);\n if (distance <= radius) {\n const key = getPixelKey(px, py);\n if (color === 'transparent') {\n newPixels.delete(key);\n } else {\n newPixels.set(key, color);\n }\n }\n }\n }\n }\n\n const newLayers = canvas.layers.map(layer => {\n if (layer.id === canvas.activeLayerId) {\n return { ...layer, pixels: newPixels };\n }\n return layer;\n });\n\n const newHistory = canvas.history.slice(0, canvas.historyIndex + 1);\n newHistory.push({\n layers: newLayers.map(layer => ({ ...layer, pixels: new Map(layer.pixels) })),\n activeLayerId: canvas.activeLayerId,\n });\n\n return {\n ...canvas,\n layers: newLayers,\n history: newHistory,\n historyIndex: newHistory.length - 1,\n };\n}",[],[159,268,278],"63fb775c-429d-11f0-ba4c-76b3cceeab13",["D",1749190420310],[206,207,208],[159,268],"fcf966fc-4442-11f0-8dec-76b3cceeab13","WorkspacePanel.tsx","fcf967a6-4442-11f0-8dec-76b3cceeab13","a5a14528-e727-466e-93ac-c128c0aba4a2",230,["D",1749371495116],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from 'https://esm.sh/react@18.2.0?deps=react@18.2.0';\nimport type { User, Artwork, CanvasState } from '../../shared/types.ts';\n\ninterface WorkspacePanelProps {\n user: User | null;\n currentCanvas: CanvasState;\n onLoadCanvas: (canvas: CanvasState) => void;\n onShowAuth: () => void;\n}\n\nexport default function WorkspacePanel({ user, currentCanvas, onLoadCanvas, onShowAuth }: WorkspacePanelProps) {\n const [artworks, setArtworks] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [saveTitle, setSaveTitle] = useState('');\n const [saveDescription, setSaveDescription] = useState('');\n const [isPublic, setIsPublic] = useState(false);\n const [showSaveDialog, setShowSaveDialog] = useState(false);\n const [isSaving, setIsSaving] = useState(false);\n\n useEffect(() => {\n if (user) {\n loadUserArtworks();\n }\n }, [user]);\n\n const loadUserArtworks = async () => {\n if (!user) return;\n \n setIsLoading(true);\n try {\n const response = await fetch('/api/artworks/my');\n const data = await response.json();\n \n if (response.ok && data.artworks) {\n setArtworks(data.artworks);\n }\n } catch (error) {\n console.error('Failed to load artworks:', error);\n } finally {\n setIsLoading(false);\n }\n };\n\n const generateThumbnail = (canvas: CanvasState): string => {\n // Create a small canvas for thumbnail\n const thumbnailCanvas = document.createElement('canvas');\n const ctx = thumbnailCanvas.getContext('2d');\n if (!ctx) return '';\n\n const size = 64; // Thumbnail size\n thumbnailCanvas.width = size;\n thumbnailCanvas.height = size;\n\n // Fill background\n ctx.fillStyle = '#ffffff';\n ctx.fillRect(0, 0, size, size);\n\n // Calculate pixel size for thumbnail\n const pixelSize = Math.min(size / canvas.width, size / canvas.height);\n\n // Draw pixels from all visible layers\n canvas.layers.forEach(layer => {\n if (layer.visible) {\n layer.pixels.forEach((color, key) => {\n const [x, y] = key.split(',').map(Number);\n if (color && color !== 'transparent') {\n ctx.fillStyle = color;\n ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);\n }\n });\n }\n });\n\n return thumbnailCanvas.toDataURL();\n };\n\n const handleSave = async () => {\n if (!user || !saveTitle.trim()) return;\n\n setIsSaving(true);\n try {\n const thumbnail = generateThumbnail(currentCanvas);\n \n const response = await fetch('/api/artworks', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n title: saveTitle.trim(),\n description: saveDescription.trim() || undefined,\n canvas_data: currentCanvas,\n thumbnail_data: thumbnail,\n is_public: isPublic,\n tags: []\n })\n });\n\n if (response.ok) {\n setShowSaveDialog(false);\n setSaveTitle('');\n setSaveDescription('');\n setIsPublic(false);\n loadUserArtworks();\n } else {\n const data = await response.json();\n alert(data.error || 'Failed to save artwork');\n }\n } catch (error) {\n console.error('Save error:', error);\n alert('Failed to save artwork');\n } finally {\n setIsSaving(false);\n }\n };\n\n const handleLoad = async (artwork: Artwork) => {\n try {\n const canvasData = JSON.parse(artwork.canvas_data) as CanvasState;\n \n // Convert pixel data back to Maps\n canvasData.layers = canvasData.layers.map(layer => ({\n ...layer,\n pixels: new Map(Object.entries(layer.pixels as any))\n }));\n \n // Convert history pixel data back to Maps\n canvasData.history = canvasData.history.map(historyItem => ({\n ...historyItem,\n layers: historyItem.layers.map(layer => ({\n ...layer,\n pixels: new Map(Object.entries(layer.pixels as any))\n }))\n }));\n\n onLoadCanvas(canvasData);\n } catch (error) {\n console.error('Load error:', error);\n alert('Failed to load artwork');\n }\n };\n\n const handleDelete = async (artworkId: number) => {\n if (!confirm('Are you sure you want to delete this artwork?')) return;\n\n try {\n const response = await fetch(`/api/artworks/${artworkId}`, {\n method: 'DELETE'\n });\n\n if (response.ok) {\n loadUserArtworks();\n } else {\n const data = await response.json();\n alert(data.error || 'Failed to delete artwork');\n }\n } catch (error) {\n console.error('Delete error:', error);\n alert('Failed to delete artwork');\n }\n };\n\n const formatDate = (dateString: string) => {\n return new Date(dateString).toLocaleDateString();\n };\n\n if (!user) {\n return (\n

\n \n

\n Save Your Artwork\n

\n Sign in to save your pixel art creations and access them from anywhere.\n

\n \n Sign In / Sign Up\n \n

\n );\n }\n\n return (\n

\n My Workspace\n

\n setShowSaveDialog(true)}\n className=\"bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium py-1 px-3 rounded transition-colors\"\n >\n Save\n \n

\n\n {showSaveDialog && (\n

Save Artwork

\n \n

\n Title *\n setSaveTitle(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 darker:bg-dark-200\"\n placeholder=\"Enter artwork title\"\n />\n

\n \n

\n Description\n setSaveDescription(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 darker:bg-dark-200\"\n rows={3}\n placeholder=\"Describe your artwork (optional)\"\n />\n

\n \n

\n setIsPublic(e.target.checked)}\n className=\"mr-2\"\n />\n \n Make this artwork public\n \n

\n\n

\n setShowSaveDialog(false)}\n className=\"flex-1 bg-gray-300 hover:bg-gray-400 text-gray-700 py-2 px-4 rounded transition-colors\"\n >\n Cancel\n \n \n {isSaving ? 'Saving...' : 'Save'}\n \n

\n )}\n\n

\n {isLoading ? (\n

\n ) : artworks.length === 0 ? (\n

\n No saved artworks yet. Create something amazing!\n

\n ) : (\n artworks.map((artwork) => (\n \n

\n {artwork.thumbnail_data && (\n \n )}\n \n

\n {artwork.title}\n

\n {artwork.canvas_width}×{artwork.canvas_height} • {formatDate(artwork.updated_at)}\n

\n {artwork.description && (\n

\n {artwork.description}\n

\n )}\n

\n \n

\n handleLoad(artwork)}\n className=\"p-1 text-blue-600 hover:bg-blue-100 dark:hover:bg-blue-900 rounded\"\n title=\"Load\"\n >\n \n \n handleDelete(artwork.id)}\n className=\"p-1 text-red-600 hover:bg-red-100 dark:hover:bg-red-900 rounded\"\n title=\"Delete\"\n >\n \n \n

\n ))\n )}\n

\n \n );\n}",[],[159,298,290],"components","ed66943e-456f-11f0-876f-76b3cceeab13","TopMenuBar.tsx","8bfe6706-436e-11f0-abc5-76b3cceeab13",237,["D",1749500747497],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from 'https://esm.sh/react@18.2.0?deps=react@18.2.0,react-dom@18.2.0';\nimport type { Theme, User } from '../../shared/types.ts';\nimport SettingsModal from './SettingsModal.tsx';\n\ninterface TopMenuBarProps {\n canvasWidth: number;\n canvasHeight: number;\n showGrid: boolean;\n onToggleGrid: () => void;\n onUndo: () => void;\n onRedo: () => void;\n onClear: () => void;\n canUndo: boolean;\n canRedo: boolean;\n theme: Theme;\n onThemeChange: (theme: Theme) => void;\n onNewCanvas: () => void;\n onExportPNG: () => void;\n onExportSVG: () => void;\n user: User | null;\n onShowAuth: () => void;\n onLogout: () => void;\n}\n\nexport default function TopMenuBar({\n canvasWidth,\n canvasHeight,\n showGrid,\n onToggleGrid,\n onUndo,\n onRedo,\n onClear,\n canUndo,\n canRedo,\n theme,\n onThemeChange,\n onNewCanvas,\n onExportPNG,\n onExportSVG,\n user,\n onShowAuth,\n onLogout\n}: TopMenuBarProps) {\n const [showSettings, setShowSettings] = useState(false);\n const [activeMenu, setActiveMenu] = useState(null);\n\n const handleMenuClick = (menu: string) => {\n setActiveMenu(activeMenu === menu ? null : menu);\n };\n\n const handleMenuAction = (action: string) => {\n setActiveMenu(null);\n \n switch (action) {\n case 'new':\n onNewCanvas();\n break;\n case 'export-png':\n onExportPNG();\n break;\n case 'export-svg':\n onExportSVG();\n break;\n case 'clear':\n onClear();\n break;\n case 'settings':\n setShowSettings(true);\n break;\n case 'logout':\n onLogout();\n break;\n }\n };\n\n return (\n <>\n

\n {/* Logo/Title */}\n

\n \n

\n Pixel Studio\n

\n\n {/* Menu Items */}\n

\n {/* File Menu */}\n

\n \n {activeMenu === 'file' && (\n

\n handleMenuAction('new')}\n className=\"w-full px-4 py-2 text-left text-sm text-gray-700 dark:text-gray-300 darker:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 darker:hover:bg-dark-200 first:rounded-t-lg\"\n >\n New Canvas\n \n

\n handleMenuAction('export-png')}\n className=\"w-full px-4 py-2 text-left text-sm text-gray-700 dark:text-gray-300 darker:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 darker:hover:bg-dark-200\"\n >\n Export as PNG\n \n handleMenuAction('export-svg')}\n className=\"w-full px-4 py-2 text-left text-sm text-gray-700 dark:text-gray-300 darker:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 darker:hover:bg-dark-200 last:rounded-b-lg\"\n >\n Export as SVG\n \n

\n )}\n

\n\n {/* Edit Menu */}\n

\n \n {activeMenu === 'edit' && (\n

\n { onUndo(); setActiveMenu(null); }}\n disabled={!canUndo}\n className=\"w-full px-4 py-2 text-left text-sm text-gray-700 dark:text-gray-300 darker:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 darker:hover:bg-dark-200 disabled:opacity-50 disabled:cursor-not-allowed first:rounded-t-lg\"\n >\n Undo\n \n { onRedo(); setActiveMenu(null); }}\n disabled={!canRedo}\n className=\"w-full px-4 py-2 text-left text-sm text-gray-700 dark:text-gray-300 darker:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 darker:hover:bg-dark-200 disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n Redo\n \n

\n handleMenuAction('clear')}\n className=\"w-full px-4 py-2 text-left text-sm text-red-600 dark:text-red-400 darker:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 darker:hover:bg-red-900/30 last:rounded-b-lg\"\n >\n Clear Canvas\n \n

\n )}\n

\n\n {/* View Menu */}\n

\n \n {activeMenu === 'view' && (\n

\n { onToggleGrid(); setActiveMenu(null); }}\n className=\"w-full px-4 py-2 text-left text-sm text-gray-700 dark:text-gray-300 darker:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 darker:hover:bg-dark-200 first:rounded-t-lg last:rounded-b-lg\"\n >\n {showGrid ? 'Hide Grid' : 'Show Grid'}\n \n

\n )}\n

\n\n {/* Settings */}\n \n

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

\n \n \n \n \n \n \n \n

\n \n \n \n \n

\n\n {/* Right Side Info */}\n

\n {canvasWidth} × {canvasHeight}\n

\n 100%\n

\n \n {/* User Section */}\n {user ? (\n

\n handleMenuClick('user')}\n className=\"flex items-center gap-2 hover:bg-gray-100 dark:hover:bg-gray-800 darker:hover:bg-dark-200 rounded-lg p-1 transition-colors\"\n >\n

\n \n {user.display_name?.[0]?.toUpperCase() || user.username[0].toUpperCase()}\n \n

\n \n \n \n {activeMenu === 'user' && (\n

\n {user.display_name || user.username}\n

\n {user.email}\n

\n handleMenuAction('logout')}\n className=\"w-full px-4 py-2 text-left text-sm text-red-600 dark:text-red-400 darker:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 darker:hover:bg-red-900/30 rounded-b-lg\"\n >\n Sign Out\n \n

\n )}\n

\n ) : (\n \n Sign In\n \n )}\n

\n\n {/* Click outside to close menus */}\n {activeMenu && (\n

setActiveMenu(null)}\n />\n )}\n

\n\n {/* Settings Modal */}\n setShowSettings(false)}\n theme={theme}\n onThemeChange={onThemeChange}\n />\n \n );\n}",[],[159,298,300],"216c9fca-436e-11f0-a0dd-76b3cceeab13","Toolbar.tsx","81494e9c-429d-11f0-9a38-76b3cceeab13",140,["D",1749280073461],14,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0?deps=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 customCanvasWidth: number;\n customCanvasHeight: number;\n useCustomSize: boolean;\n onCustomSizeChange: (width: number, height: number) => void;\n onToggleCustomSize: () => void;\n showGrid: boolean;\n onToggleGrid: () => void;\n brushSize: number;\n onBrushSizeChange: (size: number) => void;\n opacity: number;\n onOpacityChange: (opacity: number) => void;\n onUndo: () => void;\n onRedo: () => void;\n onClear: () => void;\n canUndo: boolean;\n canRedo: boolean;\n layoutMode: string;\n}\n\n// SVG Icon Components\nconst BrushIcon = () => (\n \n);\n\nconst PencilIcon = () => (\n \n);\n\nconst EraserIcon = () => (\n \n);\n\nconst FillIcon = () => (\n \n);\n\nconst EyedropperIcon = () => (\n \n);\n\nconst LineIcon = () => (\n \n);\n\nconst RectangleIcon = () => (\n \n);\n\nconst CircleIcon = () => (\n \n);\n\nconst SprayIcon = () => (\n \n);\n\nconst SelectIcon = () => (\n \n);\n\nconst MoveIcon = () => (\n \n);\n\nconst DitherIcon = () => (\n \n);\n\nconst LightenIcon = () => (\n \n);\n\nconst DarkenIcon = () => (\n \n);\n\nconst BlurIcon = () => (\n \n);\n\nconst SharpenIcon = () => (\n \n);\n\nconst NoiseIcon = () => (\n \n);\n\nconst MirrorIcon = () => (\n \n);\n\nconst RotateIcon = () => (\n \n);\n\nconst TOOLS = [\n { id: 'select' as Tool, name: 'Select', icon: SelectIcon, description: 'Select area' },\n { id: 'move' as Tool, name: 'Move', icon: MoveIcon, description: 'Move selection' },\n { id: 'brush' as Tool, name: 'Brush', icon: BrushIcon, description: 'Paint with brush' },\n { id: 'pencil' as Tool, name: 'Pencil', icon: PencilIcon, description: 'Draw precise pixels' },\n { id: 'eraser' as Tool, name: 'Eraser', icon: EraserIcon, description: 'Erase pixels' },\n { id: 'fill' as Tool, name: 'Fill', icon: FillIcon, description: 'Fill connected area' },\n { id: 'eyedropper' as Tool, name: 'Eyedropper', icon: EyedropperIcon, description: 'Sample color' },\n { id: 'line' as Tool, name: 'Line', icon: LineIcon, description: 'Draw straight line' },\n { id: 'rectangle' as Tool, name: 'Rectangle', icon: RectangleIcon, description: 'Draw rectangle' },\n { id: 'circle' as Tool, name: 'Circle', icon: CircleIcon, description: 'Draw circle' },\n];\n\nconst CANVAS_SIZES = [8, 16, 24, 32, 48, 64, 96, 128];\n\nexport default function Toolbar({\n selectedTool,\n onToolSelect,\n canvasSize,\n onCanvasSizeChange,\n customCanvasWidth,\n customCanvasHeight,\n useCustomSize,\n onCustomSizeChange,\n onToggleCustomSize,\n showGrid,\n onToggleGrid,\n brushSize,\n onBrushSizeChange,\n opacity,\n onOpacityChange,\n onUndo,\n onRedo,\n onClear,\n canUndo,\n canRedo,\n layoutMode,\n}: ToolbarProps) {\n \n // Illustrator-style vertical toolbar\n if (layoutMode === 'illustrator') {\n return (\n

\n {TOOLS.map((tool) => {\n const IconComponent = tool.icon;\n return (\n onToolSelect(tool.id)}\n className={`w-8 h-8 rounded flex items-center justify-center transition-all ${\n selectedTool === tool.id\n ? 'bg-blue-500 text-white shadow-md'\n : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'\n }`}\n title={tool.description}\n >\n \n \n );\n })}\n

\n );\n }\n\n // Compact horizontal toolbar\n if (layoutMode === 'compact') {\n return (\n

\n );\n }\n // Classic layout (original)\n return (\n

Tools

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

\n {TOOLS.map((tool) => {\n const IconComponent = tool.icon;\n return (\n onToolSelect(tool.id)}\n className={`p-2 rounded border 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-800 text-gray-700 dark:text-gray-300 hover:border-gray-400 dark:hover:border-gray-500'\n }`}\n title={tool.description}\n >\n

\n \n

{tool.name}

\n \n );\n })}\n

\n\n {/* Tool-specific Controls */}\n {(selectedTool === 'brush' || selectedTool === 'pencil' || selectedTool === 'eraser') && (\n

\n \n Brush Size: {brushSize}px\n \n onBrushSizeChange(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\n {/* Opacity Control */}\n {(selectedTool === 'brush' || selectedTool === 'pencil') && (\n

\n \n Opacity: {Math.round(opacity * 100)}%\n \n onOpacityChange(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 10%\n 100%\n

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

\n \n \n {useCustomSize ? 'Custom Size' : 'Preset Size'}\n \n\n {useCustomSize ? (\n

\n Width\n onCustomSizeChange(Number(e.target.value), customCanvasHeight)}\n className=\"w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100\"\n />\n

\n Height\n onCustomSizeChange(customCanvasWidth, 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-800 text-gray-900 dark:text-gray-100\"\n />\n

\n ) : (\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-800 text-gray-900 dark:text-gray-100\"\n >\n {CANVAS_SIZES.map((size) => (\n \n ))}\n \n

\n )}\n

\n\n {/* Grid Toggle */}\n \n \n {showGrid ? 'Hide Grid' : 'Show Grid'}\n \n\n {/* Actions */}\n

\n \n \n Undo\n \n \n \n Redo\n \n

\n \n \n Clear Canvas\n \n

\n );\n}",[],[159,298,308],"888a3220-436f-11f0-87e0-76b3cceeab13","SettingsModal.tsx","888a32d4-436f-11f0-87e0-76b3cceeab13",160,["D",1749280675961],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0?deps=react@18.2.0';\nimport type { Theme } from '../../shared/types.ts';\n\ninterface SettingsModalProps {\n isOpen: boolean;\n onClose: () => void;\n theme: Theme;\n onThemeChange: (theme: Theme) => void;\n}\n\nconst themes = [\n { id: 'light' as Theme, name: 'Light', description: 'Clean light interface' },\n { id: 'dark' as Theme, name: 'Dark', description: 'Standard dark theme' },\n { id: 'darker' as Theme, name: 'Darker', description: 'Deep dark theme (default)' },\n { id: 'system' as Theme, name: 'System', description: 'Follow system preference' }\n];\n\nexport default function SettingsModal({ isOpen, onClose, theme, onThemeChange }: SettingsModalProps) {\n if (!isOpen) return null;\n\n return (\n

\n {/* Header */}\n

Settings

\n \n \n \n

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

\n {/* Theme Selection */}\n

\n Color Theme\n

\n {themes.map((themeOption) => (\n onThemeChange(themeOption.id)}\n className={`w-full p-3 rounded-lg border text-left transition-colors ${\n theme === themeOption.id\n ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 darker:bg-blue-900/30'\n : 'border-gray-200 dark:border-gray-700 darker:border-gray-800 hover:border-gray-300 dark:hover:border-gray-600 darker:hover:border-gray-700'\n }`}\n >\n

\n {themeOption.name}\n

\n {themeOption.description}\n

\n {theme === themeOption.id && (\n \n )}\n

\n \n ))}\n

\n\n {/* Theme Preview */}\n

\n Preview\n

\n Sample Interface\n

\n This is how your interface will look with the selected theme.\n

\n\n {/* Additional Settings */}\n

\n Interface\n

\n \n \n \n Show tool tooltips\n \n \n \n \n \n Enable keyboard shortcuts\n \n \n \n \n \n Auto-save projects\n \n \n

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

\n \n Close\n \n

\n );\n}",[],[159,298,317],"f4e97dac-456f-11f0-9950-76b3cceeab13","RightSidebar.tsx","9a2a3878-436e-11f0-8806-76b3cceeab13",238,["D",1749500760103],2,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from 'https://esm.sh/react@18.2.0?deps=react@18.2.0,react-dom@18.2.0';\nimport type { CanvasState, Tool, User } from '../../shared/types.ts';\nimport ColorPalette from './ColorPalette.tsx';\nimport LayersPanel from './LayersPanel.tsx';\nimport PropertiesPanel from './PropertiesPanel.tsx';\nimport ExportPanel from './ExportPanel.tsx';\nimport WorkspacePanel from './WorkspacePanel.tsx';\n\ninterface RightSidebarProps {\n selectedTool: Tool;\n selectedColor: string;\n secondaryColor: string;\n onColorSelect: (color: string) => void;\n onSecondaryColorSelect: (color: string) => void;\n brushSize: number;\n onBrushSizeChange: (size: number) => void;\n opacity: number;\n onOpacityChange: (opacity: number) => void;\n canvas: CanvasState;\n onAddLayer: () => void;\n onDeleteLayer: (layerId: string) => void;\n onSetActiveLayer: (layerId: string) => void;\n onToggleLayerVisibility: (layerId: string) => void;\n onSetLayerOpacity: (layerId: string, opacity: number) => void;\n user: User | null;\n onLoadCanvas: (canvas: CanvasState) => void;\n onShowAuth: () => void;\n}\n\ntype TabType = 'workspace' | 'colors' | 'layers' | 'properties' | 'export';\n\nexport default function RightSidebar({\n selectedTool,\n selectedColor,\n secondaryColor,\n onColorSelect,\n onSecondaryColorSelect,\n brushSize,\n onBrushSizeChange,\n opacity,\n onOpacityChange,\n canvas,\n onAddLayer,\n onDeleteLayer,\n onSetActiveLayer,\n onToggleLayerVisibility,\n onSetLayerOpacity,\n user,\n onLoadCanvas,\n onShowAuth\n}: RightSidebarProps) {\n const [activeTab, setActiveTab] = useState('workspace');\n\n const tabs = [\n {\n id: 'workspace' as TabType,\n name: 'Workspace',\n icon: (\n \n )\n },\n {\n id: 'colors' as TabType,\n name: 'Colors',\n icon: (\n \n )\n },\n {\n id: 'layers' as TabType,\n name: 'Layers',\n icon: (\n \n )\n },\n {\n id: 'properties' as TabType,\n name: 'Properties',\n icon: (\n \n )\n },\n {\n id: 'export' as TabType,\n name: 'Export',\n icon: (\n \n )\n }\n ];\n\n return (\n

\n {/* Tab Headers */}\n

\n {tabs.map((tab) => (\n setActiveTab(tab.id)}\n className={`flex-1 flex items-center justify-center gap-2 px-2 py-3 text-sm font-medium transition-colors ${\n activeTab === tab.id\n ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400 bg-blue-50 dark:bg-blue-900/10 darker:bg-blue-900/20'\n : 'text-gray-600 dark:text-gray-400 darker:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 darker:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800 darker:hover:bg-dark-200'\n }`}\n >\n {tab.icon}\n {tab.name}\n \n ))}\n

\n\n {/* Tab Content */}\n

\n {activeTab === 'workspace' && (\n \n )}\n \n {activeTab === 'colors' && (\n

\n \n

\n )}\n \n {activeTab === 'layers' && (\n

\n \n

\n )}\n \n {activeTab === 'properties' && (\n

\n \n

\n )}\n \n {activeTab === 'export' && (\n

\n \n

\n )}\n

\n );\n}",[],[159,298,325],"3a0076ec-436e-11f0-8b8b-76b3cceeab13","PropertiesPanel.tsx","2936ae68-42a0-11f0-9eb6-76b3cceeab13",144,["D",1749280114698],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0?deps=react@18.2.0';\nimport type { Tool } from '../../shared/types.ts';\n\ninterface PropertiesPanelProps {\n visible: boolean;\n selectedTool: Tool;\n brushSize: number;\n onBrushSizeChange: (size: number) => void;\n opacity: number;\n onOpacityChange: (opacity: number) => void;\n canvasWidth: number;\n canvasHeight: number;\n}\n\nconst PropertiesIcon = () => (\n \n);\n\nexport default function PropertiesPanel({\n visible,\n selectedTool,\n brushSize,\n onBrushSizeChange,\n opacity,\n onOpacityChange,\n canvasWidth,\n canvasHeight,\n}: PropertiesPanelProps) {\n if (!visible) return null;\n\n const isFloating = visible && document.querySelector('.absolute'); // Check if it's in a floating context\n\n return (\n

\n {isFloating && (\n

\n \n Properties\n

\n )}\n \n

\n {!isFloating && (\n

\n \n Properties\n

\n )}\n \n {/* Tool Properties */}\n

\n {selectedTool} Tool\n

\n \n {(selectedTool === 'brush' || selectedTool === 'pencil' || selectedTool === 'eraser') && (\n

\n \n Size: {brushSize}px\n \n onBrushSizeChange(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 1\n 20\n

\n \n {selectedTool !== 'eraser' && (\n

\n \n Opacity: {Math.round(opacity * 100)}%\n \n onOpacityChange(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 10%\n 100%\n

\n )}\n

\n )}\n \n {selectedTool === 'select' && (\n

\n Click and drag to select an area\n

\n )}\n \n {selectedTool === 'fill' && (\n

\n Click to fill connected pixels\n

\n )}\n \n {selectedTool === 'eyedropper' && (\n

\n Click to sample color from canvas\n

\n )}\n

\n\n {/* Canvas Info */}\n

\n Canvas\n

\n Dimensions:\n {canvasWidth} × {canvasHeight}\n

\n Total Pixels:\n {(canvasWidth * canvasHeight).toLocaleString()}\n

\n Aspect Ratio:\n {(canvasWidth / canvasHeight).toFixed(2)}:1\n

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

\n Quick Actions\n

\n \n \n \n \n

\n );\n}",[],[159,298,334],"d96c676a-456f-11f0-9b0f-76b3cceeab13","ProfessionalToolbar.tsx","7d78ac5a-436e-11f0-89b7-76b3cceeab13",236,["D",1749500713982],8,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0?deps=react@18.2.0,react-dom@18.2.0';\nimport type { Tool } from '../../shared/types.ts';\n\ninterface ProfessionalToolbarProps {\n selectedTool: Tool;\n onToolSelect: (tool: Tool) => void;\n}\n\n// Tool definitions with professional icons\nconst TOOLS = [\n { \n id: 'select' as Tool, \n name: 'Select', \n icon: () => (\n \n ),\n shortcut: 'V'\n },\n { \n id: 'move' as Tool, \n name: 'Move', \n icon: () => (\n \n ),\n shortcut: 'M'\n },\n { \n id: 'brush' as Tool, \n name: 'Brush', \n icon: () => (\n \n ),\n shortcut: 'B'\n },\n { \n id: 'pencil' as Tool, \n name: 'Pencil', \n icon: () => (\n \n ),\n shortcut: 'P'\n },\n { \n id: 'eraser' as Tool, \n name: 'Eraser', \n icon: () => (\n \n ),\n shortcut: 'E'\n },\n { \n id: 'fill' as Tool, \n name: 'Fill', \n icon: () => (\n \n ),\n shortcut: 'G'\n },\n { \n id: 'eyedropper' as Tool, \n name: 'Eyedropper', \n icon: () => (\n \n ),\n shortcut: 'I'\n },\n { \n id: 'line' as Tool, \n name: 'Line', \n icon: () => (\n \n ),\n shortcut: 'L'\n },\n { \n id: 'rectangle' as Tool, \n name: 'Rectangle', \n icon: () => (\n \n ),\n shortcut: 'R'\n },\n { \n id: 'circle' as Tool, \n name: 'Circle', \n icon: () => (\n \n ),\n shortcut: 'O'\n }\n];\n\nexport default function ProfessionalToolbar({ selectedTool, onToolSelect }: ProfessionalToolbarProps) {\n return (\n

\n {/* Tools */}\n

\n {TOOLS.map((tool) => {\n const IconComponent = tool.icon;\n return (\n onToolSelect(tool.id)}\n className={`w-10 h-10 rounded-lg flex items-center justify-center transition-all group relative ${\n selectedTool === tool.id\n ? 'bg-blue-500 text-white shadow-md'\n : 'text-gray-600 dark:text-gray-400 darker:text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700 darker:hover:bg-gray-800'\n }`}\n title={`${tool.name} (${tool.shortcut})`}\n >\n \n \n {/* Tooltip */}\n

\n {tool.name} ({tool.shortcut})\n

\n \n );\n })}\n

\n \n {/* Spacer */}\n

\n \n {/* Bottom tools */}\n

\n \n

\n );\n}",[],[159,298,342],"23cb19a8-436f-11f0-b44f-76b3cceeab13","LayoutSettings.tsx","105e15c0-42a0-11f0-9c4d-76b3cceeab13",156,["D",1749280506934],5,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\n\ninterface LayoutSettingsProps {\n showLayers: boolean;\n onToggleLayers: () => void;\n showProperties: boolean;\n onToggleProperties: () => void;\n}\n\nexport default function LayoutSettings({\n showLayers,\n onToggleLayers,\n showProperties,\n onToggleProperties,\n}: LayoutSettingsProps) {\n return (\n

\n \n Layout\n

\n\n

\n \n \n {showLayers ? \"Hide Layers\" : \"Show Layers\"}\n \n\n \n \n {showProperties ? \"Hide Properties\" : \"Show Properties\"}\n \n

\n\n

Professional layout inspired by Illustrator and Figma

\n );\n}",[],[159,298,351],"322bfa04-436e-11f0-8747-76b3cceeab13","LayersPanel.tsx","1ba17e36-42a0-11f0-887c-76b3cceeab13",143,["D",1749280101560],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0?deps=react@18.2.0';\nimport type { CanvasState, Layer } from '../../shared/types.ts';\n\ninterface LayersPanelProps {\n visible: boolean;\n canvas: CanvasState;\n onAddLayer: () => void;\n onDeleteLayer: (layerId: string) => void;\n onSetActiveLayer: (layerId: string) => void;\n onToggleLayerVisibility: (layerId: string) => void;\n onSetLayerOpacity: (layerId: string, opacity: number) => void;\n}\n\nconst LayerIcon = () => (\n \n);\n\nconst VisibilityIcon = ({ visible }: { visible: boolean }) => (\n \n);\n\nexport default function LayersPanel({ \n visible, \n canvas, \n onAddLayer, \n onDeleteLayer, \n onSetActiveLayer, \n onToggleLayerVisibility,\n onSetLayerOpacity \n}: LayersPanelProps) {\n if (!visible) return null;\n\n return (\n

\n \n Layers\n

\n \n

\n {/* Render layers in reverse order (top to bottom) */}\n {[...canvas.layers].reverse().map((layer) => (\n

onSetActiveLayer(layer.id)}\n >\n \n \n

\n {layer.name}\n

\n {layer.pixels.size} pixels • {Math.round(layer.opacity * 100)}%\n

\n \n

\n {/* Mini preview of layer content */}\n {layer.pixels.size > 0 && (\n

\n )}\n

\n ))}\n

\n\n

\n \n \n

\n );\n}",[],[159,298,360],"2cae9154-436e-11f0-af3b-76b3cceeab13","ExportPanel.tsx","8c333462-429d-11f0-8dc7-76b3cceeab13",142,["D",1749280092350],7,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from 'https://esm.sh/react@18.2.0?deps=react@18.2.0';\nimport type { CanvasState, ExportOptions } from '../../shared/types.ts';\nimport { exportToPNG, exportToSVG } from '../utils/export.ts';\nimport { getAllVisiblePixels } from '../utils/canvas.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 = getAllVisiblePixels(canvas).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-800 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-800 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-800 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: {getAllVisiblePixels(canvas).size}

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

\n );\n}",[],[159,298,368],"272b3ac0-436e-11f0-b329-76b3cceeab13","ColorPalette.tsx","7536956a-429d-11f0-a766-76b3cceeab13",141,["D",1749280083100],6,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0?deps=react@18.2.0';\n\ninterface ColorPaletteProps {\n selectedColor: string;\n secondaryColor: string;\n onColorSelect: (color: string) => void;\n onSecondaryColorSelect: (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, secondaryColor, onColorSelect, onSecondaryColorSelect }: ColorPaletteProps) {\n return (\n

Colors

\n \n {/* Primary and Secondary Colors */}\n

{/* Color picker will handle this */}}\n title=\"Primary Color\"\n />\n

onSecondaryColorSelect(selectedColor)}\n title=\"Secondary Color (Right-click to use)\"\n />\n

Primary

\n onColorSelect(e.target.value)}\n className=\"w-full px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-mono\"\n placeholder=\"#000000\"\n />\n

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

\n Color Picker\n onColorSelect(e.target.value)}\n className=\"w-full h-8 rounded border border-gray-300 dark:border-gray-600 cursor-pointer\"\n />\n

\n\n {/* Eraser */}\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-800 text-gray-700 dark:text-gray-300 hover:border-gray-400 dark:hover:border-gray-500'\n }`}\n >\n \n Transparent\n \n\n {/* Preset Colors */}\n

\n Preset Colors\n

\n {PRESET_COLORS.map((color) => (\n {\n if (e.button === 2) { // Right click\n e.preventDefault();\n onSecondaryColorSelect(color);\n } else {\n onColorSelect(color);\n }\n }}\n onContextMenu={(e) => {\n e.preventDefault();\n onSecondaryColorSelect(color);\n }}\n className={`w-6 h-6 rounded border-2 transition-all hover:scale-110 ${\n selectedColor === color\n ? 'border-blue-500 shadow-lg'\n : secondaryColor === color\n ? 'border-orange-500 shadow-md'\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} (Right-click for secondary)`}\n />\n ))}\n

\n Left-click: Primary • Right-click: Secondary\n

\n );\n}",[],[159,298,377],"94876452-443d-11f0-a7f7-76b3cceeab13","CanvasSettings.tsx","b65564c8-436e-11f0-b8ba-76b3cceeab13",213,["D",1749369172399],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from 'https://esm.sh/react@18.2.0?deps=react@18.2.0';\n\ninterface CanvasSettingsProps {\n canvasSize: number;\n onCanvasSizeChange: (size: number) => void;\n customCanvasWidth: number;\n customCanvasHeight: number;\n useCustomSize: boolean;\n onCustomSizeChange: (width: number, height: number) => void;\n onToggleCustomSize: () => void;\n brushSize: number;\n onBrushSizeChange: (size: number) => void;\n opacity: number;\n onOpacityChange: (opacity: number) => void;\n selectedTool: string;\n}\n\nconst CANVAS_PRESETS = [\n { name: '8×8', size: 8 },\n { name: '16×16', size: 16 },\n { name: '24×24', size: 24 },\n { name: '32×32', size: 32 },\n { name: '48×48', size: 48 },\n { name: '64×64', size: 64 },\n { name: '96×96', size: 96 },\n { name: '128×128', size: 128 }\n];\n\nexport default function CanvasSettings({\n canvasSize,\n onCanvasSizeChange,\n customCanvasWidth,\n customCanvasHeight,\n useCustomSize,\n onCustomSizeChange,\n onToggleCustomSize,\n brushSize,\n onBrushSizeChange,\n opacity,\n onOpacityChange,\n selectedTool\n}: CanvasSettingsProps) {\n const [showCanvasSettings, setShowCanvasSettings] = useState(false);\n\n return (\n

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

\n setShowCanvasSettings(!showCanvasSettings)}\n className=\"flex items-center gap-2 px-3 py-1.5 text-sm bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-colors\"\n >\n \n {useCustomSize ? `${customCanvasWidth}×${customCanvasHeight}` : `${canvasSize}×${canvasSize}`}\n \n \n \n {showCanvasSettings && (\n

\n \n Canvas Size\n \n

\n {CANVAS_PRESETS.map((preset) => (\n {\n onCanvasSizeChange(preset.size);\n if (useCustomSize) onToggleCustomSize();\n setShowCanvasSettings(false);\n }}\n className={`px-2 py-1 text-xs rounded transition-colors ${\n !useCustomSize && canvasSize === preset.size\n ? 'bg-blue-500 text-white'\n : 'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600'\n }`}\n >\n {preset.name}\n \n ))}\n

\n \n

\n \n Custom Size\n \n

\n onCustomSizeChange(Number(e.target.value), customCanvasHeight)}\n className=\"w-16 px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800\"\n placeholder=\"W\"\n />\n ×\n onCustomSizeChange(customCanvasWidth, Number(e.target.value))}\n className=\"w-16 px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800\"\n placeholder=\"H\"\n />\n {\n if (!useCustomSize) onToggleCustomSize();\n setShowCanvasSettings(false);\n }}\n className=\"px-2 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n >\n Apply\n \n

\n )}\n

\n\n {/* Tool Settings */}\n {(selectedTool === 'brush' || selectedTool === 'pencil' || selectedTool === 'eraser') && (\n <>\n

\n Size:\n onBrushSizeChange(Number(e.target.value))}\n className=\"w-16 h-1 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer\"\n />\n {brushSize}\n

\n \n {selectedTool !== 'eraser' && (\n

\n Opacity:\n onOpacityChange(Number(e.target.value))}\n className=\"w-16 h-1 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer\"\n />\n {Math.round(opacity * 100)}%\n

\n )}\n \n )}\n

\n );\n}",[],[159,298,386],"2311c692-4577-11f0-be4e-76b3cceeab13",["D",1749503844016],37,[],[159,298,33],"e2d8f8a0-4442-11f0-8956-76b3cceeab13","AuthModal.tsx","e2d8f990-4442-11f0-8956-76b3cceeab13",229,["D",1749371451282],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from 'https://esm.sh/react@18.2.0?deps=react@18.2.0';\nimport type { User } from '../../shared/types.ts';\n\ninterface AuthModalProps {\n isOpen: boolean;\n onClose: () => void;\n onLogin: (user: User) => void;\n}\n\nexport default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps) {\n const [isLoginMode, setIsLoginMode] = useState(true);\n const [formData, setFormData] = useState({\n username: '',\n email: '',\n password: '',\n display_name: ''\n });\n const [error, setError] = useState('');\n const [isLoading, setIsLoading] = useState(false);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setError('');\n setIsLoading(true);\n\n try {\n const endpoint = isLoginMode ? '/api/auth/login' : '/api/auth/register';\n const body = isLoginMode \n ? { username: formData.username, password: formData.password }\n : formData;\n\n const response = await fetch(endpoint, {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(body)\n });\n\n const data = await response.json();\n\n if (response.ok && data.user) {\n onLogin(data.user);\n onClose();\n setFormData({ username: '', email: '', password: '', display_name: '' });\n } else {\n setError(data.error || 'Authentication failed');\n }\n } catch (err) {\n setError('Network error. Please try again.');\n } finally {\n setIsLoading(false);\n }\n };\n\n const handleInputChange = (e: React.ChangeEvent) => {\n setFormData(prev => ({\n ...prev,\n [e.target.name]: e.target.value\n }));\n };\n\n if (!isOpen) return null;\n\n return (\n

\n {isLoginMode ? 'Sign In' : 'Create Account'}\n

\n \n \n \n

\n\n

\n \n Username\n \n \n

\n\n {!isLoginMode && (\n <>\n

\n \n Email\n \n \n

\n\n

\n \n Display Name (Optional)\n \n \n

\n \n )}\n\n

\n \n Password\n \n \n

\n\n {error && (\n

\n {error}\n

\n )}\n\n \n {isLoading ? 'Please wait...' : (isLoginMode ? 'Sign In' : 'Create Account')}\n \n \n\n

\n {\n setIsLoginMode(!isLoginMode);\n setError('');\n setFormData({ username: '', email: '', password: '', display_name: '' });\n }}\n className=\"text-blue-600 dark:text-blue-400 hover:underline text-sm\"\n >\n {isLoginMode ? \"Don't have an account? Sign up\" : \"Already have an account? Sign in\"}\n \n

\n );\n}",[],[159,298,399],"1d04d06e-4577-11f0-a0f1-76b3cceeab13","App.tsx","a7171b9a-429d-11f0-8a6b-76b3cceeab13",241,["D",1749503833865],46,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useCallback, useEffect } from 'https://esm.sh/react@18.2.0';\nimport type { AppState, Tool, Theme, User, CanvasState } from '../../shared/types.ts';\nimport { createEmptyCanvas, setPixel, floodFill, undo, redo, clearCanvas, resizeCanvas, drawLine, drawRectangle, drawCircle, drawBrush, addLayer, deleteLayer, setActiveLayer, toggleLayerVisibility, setLayerOpacity } from '../utils/canvas.ts';\nimport { applyTheme, initializeTheme } from '../utils/theme.ts';\nimport { exportToPNG, exportToSVG } from '../utils/export.ts';\nimport Canvas from './Canvas.tsx';\nimport ProfessionalToolbar from './ProfessionalToolbar.tsx';\nimport TopMenuBar from './TopMenuBar.tsx';\nimport CanvasSettings from './CanvasSettings.tsx';\nimport RightSidebar from './RightSidebar.tsx';\nimport AuthModal from './AuthModal.tsx';\n\nexport default function App() {\n const [appState, setAppState] = useState(() => ({\\n selectedTool: 'brush',\\n selectedColor: '#000000',\\n secondaryColor: '#ffffff',\\n canvasSize: 16,\\n customCanvasWidth: 32,\\n customCanvasHeight: 32,\\n useCustomSize: false,\\n showGrid: true,\\n brushSize: 1,\\n opacity: 1,\\n layoutMode: 'professional',\\n showLayers: true,\\n showProperties: true,\\n theme: 'darker', // This will be overridden by saved theme\\n canvas: createEmptyCanvas(16, 16),\\n user: undefined\\n }));\\n\\n const [showAuthModal, setShowAuthModal] = useState(false);\\n\\n // Initialize theme and user on mount\\n useEffect(() => {\\n const savedTheme = initializeTheme();\\n setAppState(prev => ({ ...prev, theme: savedTheme }));\\n\\n // Check if user data was injected by server\\n if (typeof window !== 'undefined' && (window as any).__USER_DATA__) {\\n setAppState(prev => ({ ...prev, user: (window as any).__USER_DATA__ }));\\n }\\n }, []);\\n\\n const handleLogin = useCallback((user: User) => {\\n setAppState(prev => ({ ...prev, user }));\\n }, []);\\n\\n const handleLogout = useCallback(async () => {\\n try {\\n await fetch('/api/auth/logout', { method: 'POST' });\\n setAppState(prev => ({ ...prev, user: undefined }));\\n // Reload page to clear any cached data\\n window.location.reload();\\n } catch (error) {\\n console.error('Logout error:', error);\\n }\\n }, []);\\n\\n const handleLoadCanvas = useCallback((canvas: CanvasState) => {\\n setAppState(prev => ({ ...prev, canvas }));\\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, size),\\n }));\\n }, []);\\n\\n const handleCustomSizeChange = useCallback((width: number, height: number) => {\\n setAppState(prev => ({\\n ...prev,\\n customCanvasWidth: width,\\n customCanvasHeight: height,\\n canvas: prev.useCustomSize ? resizeCanvas(prev.canvas, width, height) : prev.canvas,\\n }));\\n }, []);\\n\\n const handleToggleCustomSize = useCallback(() => {\\n setAppState(prev => {\\n const newUseCustomSize = !prev.useCustomSize;\\n return {\\n ...prev,\\n useCustomSize: newUseCustomSize,\\n canvas: newUseCustomSize \\n ? resizeCanvas(prev.canvas, prev.customCanvasWidth, prev.customCanvasHeight)\\n : resizeCanvas(prev.canvas, prev.canvasSize, prev.canvasSize),\\n };\\n });\\n }, []);\\n\\n const handleToggleGrid = useCallback(() => {\\n setAppState(prev => ({ ...prev, showGrid: !prev.showGrid }));\\n }, []);\\n\\n const handleSecondaryColorSelect = useCallback((color: string) => {\\n setAppState(prev => ({ ...prev, secondaryColor: color }));\\n }, []);\\n\\n const handleOpacityChange = useCallback((opacity: number) => {\\n setAppState(prev => ({ ...prev, opacity }));\\n }, []);\\n\\n const handleThemeChange = useCallback((theme: Theme) => {\\n setAppState(prev => ({ ...prev, theme }));\\n applyTheme(theme);\\n }, []);\\n\\n const handleNewCanvas = useCallback(() => {\\n if (confirm('Create a new canvas? This will clear your current work.')) {\\n setAppState(prev => ({\\n ...prev,\\n canvas: createEmptyCanvas(prev.canvas.width, prev.canvas.height),\\n }));\\n }\\n }, []);\\n\\n const handleExportPNG = useCallback(() => {\\n exportToPNG(appState.canvas, { format: 'png', scale: 10, includeGrid: false });\\n }, [appState.canvas]);\\n\\n const handleExportSVG = useCallback(() => {\\n exportToSVG(appState.canvas, { format: 'svg', scale: 10, includeGrid: false });\\n }, [appState.canvas]);\\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 handleBrushDraw = useCallback((x: number, y: number, size: number, color: string) => {\\n setAppState(prev => ({\\n ...prev,\\n canvas: drawBrush(prev.canvas, x, y, size, 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 handleLineDraw = useCallback((x0: number, y0: number, x1: number, y1: number, color: string) => {\\n setAppState(prev => ({\\n ...prev,\\n canvas: drawLine(prev.canvas, x0, y0, x1, y1, color),\\n }));\\n }, []);\\n\\n const handleRectangleDraw = useCallback((x0: number, y0: number, x1: number, y1: number, color: string, filled: boolean) => {\\n setAppState(prev => ({\\n ...prev,\\n canvas: drawRectangle(prev.canvas, x0, y0, x1, y1, color, filled),\\n }));\\n }, []);\\n\\n const handleCircleDraw = useCallback((centerX: number, centerY: number, radius: number, color: string, filled: boolean) => {\\n setAppState(prev => ({\\n ...prev,\\n canvas: drawCircle(prev.canvas, centerX, centerY, radius, color, filled),\\n }));\\n }, []);\\n\\n const handleBrushSizeChange = useCallback((size: number) => {\\n setAppState(prev => ({ ...prev, brushSize: size }));\\n }, []);\\n\\n const handleAddLayer = useCallback(() => {\\n const layerName = `Layer ${appState.canvas.layers.length}`;\\n setAppState(prev => ({\\n ...prev,\\n canvas: addLayer(prev.canvas, layerName),\\n }));\\n }, []);\\n\\n const handleDeleteLayer = useCallback((layerId: string) => {\\n setAppState(prev => ({\\n ...prev,\\n canvas: deleteLayer(prev.canvas, layerId),\\n }));\\n }, []);\\n\\n const handleSetActiveLayer = useCallback((layerId: string) => {\\n setAppState(prev => ({\\n ...prev,\\n canvas: setActiveLayer(prev.canvas, layerId),\\n }));\\n }, []);\\n\\n const handleToggleLayerVisibility = useCallback((layerId: string) => {\\n setAppState(prev => ({\\n ...prev,\\n canvas: toggleLayerVisibility(prev.canvas, layerId),\\n }));\\n }, []);\\n\\n const handleSetLayerOpacity = useCallback((layerId: string, opacity: number) => {\\n setAppState(prev => ({\\n ...prev,\\n canvas: setLayerOpacity(prev.canvas, layerId, opacity),\\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 active layer?')) {\\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 {/* Top Menu Bar */}\\n setShowAuthModal(true)}\\n onLogout={handleLogout}\\n />\\n\\n {/* Canvas Settings Bar */}\\n \\n\\n {/* Main Workspace */}\\n

\\n {/* Left Toolbar */}\\n \\n\\n {/* Canvas Area */}\\n

\\n

\\n \\n

\\n

\\n\\n {/* Right Sidebar */}\\n setShowAuthModal(true)}\\n />\\n

\\n\\n {/* Auth Modal */}\\n setShowAuthModal(false)}\\n onLogin={handleLogin}\\n />\\n

\\n );\\n}",[],[159,298,407],"7536a2f8-429d-11f0-a766-76b3cceeab13",["D",1749190449219],[190,191,192,193,194,195,196,197,198,199,200,201,202,203,204],[159,298],["D",1749190420310],[189,205,209,210,211],[159],"cab5aa84-4442-11f0-89c9-76b3cceeab13","index.ts",227,["D",1749371410782],"http","import { Hono } from 'https://esm.sh/hono@3.11.7';\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { initializeDatabase, cleanupExpiredSessions } from './database/schema.ts';\nimport { \n createUser, \n getUserByUsername, \n getUserByEmail, \n getUserWithPassword, \n getUserById,\n updateLastLogin,\n createSession,\n getSession,\n deleteSession\n} from './database/users.ts';\nimport {\n createArtwork,\n getArtworkById,\n getArtworksByUserId,\n getPublicArtworks,\n updateArtwork,\n deleteArtwork,\n searchArtworks,\n getArtworkCountByUserId\n} from './database/artworks.ts';\nimport {\n hashPassword,\n verifyPassword,\n isValidEmail,\n isValidUsername,\n isValidPassword,\n getSessionFromCookie,\n createSessionCookie,\n createLogoutCookie\n} from './utils/auth.ts';\n\nconst app = new Hono();\n\n// Initialize database on startup\ninitializeDatabase().catch(console.error);\n\n// Clean up expired sessions periodically\nsetInterval(cleanupExpiredSessions, 60 * 60 * 1000); // Every hour\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Middleware to get current user from session\nasync function getCurrentUser(c: any) {\n const sessionId = getSessionFromCookie(c.req.header('cookie'));\n if (!sessionId) return null;\n\n const session = await getSession(sessionId);\n if (!session) return null;\n\n return await getUserById(session.user_id);\n}\n\n// Serve the main application\napp.get(\"/\", async c => {\n try {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject user data if logged in\n const user = await getCurrentUser(c);\n if (user) {\n const userData = {\n id: user.id,\n username: user.username,\n email: user.email,\n display_name: user.display_name,\n avatar_url: user.avatar_url\n };\n \n const userScript = ``;\n \n html = html.replace(\"\", `${userScript}`);\n }\n \n return c.html(html);\n } catch (error) {\n console.error(\"Error serving index.html:\", error);\n return c.text(\"Error loading Pixel Art Studio\", 500);\n }\n});\n\n// Authentication Routes\n\n// Register\napp.post(\"/api/auth/register\", async c => {\n try {\n const { username, email, password, display_name } = await c.req.json();\n\n // Validation\n if (!isValidUsername(username)) {\n return c.json({ error: \"Invalid username. Must be 3-20 characters, alphanumeric and underscores only.\" }, 400);\n }\n\n if (!isValidEmail(email)) {\n return c.json({ error: \"Invalid email format.\" }, 400);\n }\n\n if (!isValidPassword(password)) {\n return c.json({ error: \"Password must be at least 6 characters long.\" }, 400);\n }\n\n // Check if user already exists\n const existingUser = await getUserByUsername(username);\n if (existingUser) {\n return c.json({ error: \"Username already exists.\" }, 400);\n }\n\n const existingEmail = await getUserByEmail(email);\n if (existingEmail) {\n return c.json({ error: \"Email already registered.\" }, 400);\n }\n\n // Create user\n const passwordHash = await hashPassword(password);\n const user = await createUser({\n username,\n email,\n password_hash: passwordHash,\n display_name: display_name || username\n });\n\n // Create session\n const session = await createSession(user.id);\n await updateLastLogin(user.id);\n\n // Set cookie and return user data\n c.header('Set-Cookie', createSessionCookie(session.id));\n \n return c.json({\n user: {\n id: user.id,\n username: user.username,\n email: user.email,\n display_name: user.display_name,\n avatar_url: user.avatar_url\n }\n });\n } catch (error) {\n console.error(\"Registration error:\", error);\n return c.json({ error: \"Registration failed. Please try again.\" }, 500);\n }\n});\n\n// Login\napp.post(\"/api/auth/login\", async c => {\n try {\n const { username, password } = await c.req.json();\n\n if (!username || !password) {\n return c.json({ error: \"Username and password are required.\" }, 400);\n }\n\n // Get user with password\n const user = await getUserWithPassword(username);\n if (!user) {\n return c.json({ error: \"Invalid username or password.\" }, 401);\n }\n\n // Verify password\n const isValid = await verifyPassword(password, user.password_hash);\n if (!isValid) {\n return c.json({ error: \"Invalid username or password.\" }, 401);\n }\n\n // Create session\n const session = await createSession(user.id);\n await updateLastLogin(user.id);\n\n // Set cookie and return user data\n c.header('Set-Cookie', createSessionCookie(session.id));\n \n return c.json({\n user: {\n id: user.id,\n username: user.username,\n email: user.email,\n display_name: user.display_name,\n avatar_url: user.avatar_url\n }\n });\n } catch (error) {\n console.error(\"Login error:\", error);\n return c.json({ error: \"Login failed. Please try again.\" }, 500);\n }\n});\n\n// Logout\napp.post(\"/api/auth/logout\", async c => {\n try {\n const sessionId = getSessionFromCookie(c.req.header('cookie'));\n if (sessionId) {\n await deleteSession(sessionId);\n }\n \n c.header('Set-Cookie', createLogoutCookie());\n return c.json({ success: true });\n } catch (error) {\n console.error(\"Logout error:\", error);\n return c.json({ error: \"Logout failed.\" }, 500);\n }\n});\n\n// Get current user\napp.get(\"/api/auth/me\", async c => {\n try {\n const user = await getCurrentUser(c);\n if (!user) {\n return c.json({ error: \"Not authenticated.\" }, 401);\n }\n\n return c.json({\n user: {\n id: user.id,\n username: user.username,\n email: user.email,\n display_name: user.display_name,\n avatar_url: user.avatar_url\n }\n });\n } catch (error) {\n console.error(\"Get user error:\", error);\n return c.json({ error: \"Failed to get user data.\" }, 500);\n }\n});\n\n// Artwork Routes\n\n// Create artwork\napp.post(\"/api/artworks\", async c => {\n try {\n const user = await getCurrentUser(c);\n if (!user) {\n return c.json({ error: \"Authentication required.\" }, 401);\n }\n\n const { title, description, canvas_data, thumbnail_data, is_public, tags } = await c.req.json();\n\n if (!title || !canvas_data) {\n return c.json({ error: \"Title and canvas data are required.\" }, 400);\n }\n\n const artwork = await createArtwork({\n user_id: user.id,\n title,\n description,\n canvas_data,\n thumbnail_data,\n is_public: is_public || false,\n tags: tags || []\n });\n\n return c.json({ artwork });\n } catch (error) {\n console.error(\"Create artwork error:\", error);\n return c.json({ error: \"Failed to save artwork.\" }, 500);\n }\n});\n\n// Get user's artworks\napp.get(\"/api/artworks/my\", async c => {\n try {\n const user = await getCurrentUser(c);\n if (!user) {\n return c.json({ error: \"Authentication required.\" }, 401);\n }\n\n const limit = parseInt(c.req.query('limit') || '50');\n const offset = parseInt(c.req.query('offset') || '0');\n\n const artworks = await getArtworksByUserId(user.id, limit, offset);\n const total = await getArtworkCountByUserId(user.id);\n\n return c.json({ artworks, total });\n } catch (error) {\n console.error(\"Get user artworks error:\", error);\n return c.json({ error: \"Failed to get artworks.\" }, 500);\n }\n});\n\n// Get public artworks\napp.get(\"/api/artworks/public\", async c => {\n try {\n const limit = parseInt(c.req.query('limit') || '50');\n const offset = parseInt(c.req.query('offset') || '0');\n\n const artworks = await getPublicArtworks(limit, offset);\n return c.json({ artworks });\n } catch (error) {\n console.error(\"Get public artworks error:\", error);\n return c.json({ error: \"Failed to get public artworks.\" }, 500);\n }\n});\n\n// Get artwork by ID\napp.get(\"/api/artworks/:id\", async c => {\n try {\n const id = parseInt(c.req.param('id'));\n const artwork = await getArtworkById(id);\n \n if (!artwork) {\n return c.json({ error: \"Artwork not found.\" }, 404);\n }\n\n // Check if user can access this artwork\n const user = await getCurrentUser(c);\n if (!artwork.is_public && (!user || user.id !== artwork.user_id)) {\n return c.json({ error: \"Access denied.\" }, 403);\n }\n\n return c.json({ artwork });\n } catch (error) {\n console.error(\"Get artwork error:\", error);\n return c.json({ error: \"Failed to get artwork.\" }, 500);\n }\n});\n\n// Update artwork\napp.put(\"/api/artworks/:id\", async c => {\n try {\n const user = await getCurrentUser(c);\n if (!user) {\n return c.json({ error: \"Authentication required.\" }, 401);\n }\n\n const id = parseInt(c.req.param('id'));\n const updateData = await c.req.json();\n\n const artwork = await updateArtwork(id, user.id, updateData);\n if (!artwork) {\n return c.json({ error: \"Artwork not found or access denied.\" }, 404);\n }\n\n return c.json({ artwork });\n } catch (error) {\n console.error(\"Update artwork error:\", error);\n return c.json({ error: \"Failed to update artwork.\" }, 500);\n }\n});\n\n// Delete artwork\napp.delete(\"/api/artworks/:id\", async c => {\n try {\n const user = await getCurrentUser(c);\n if (!user) {\n return c.json({ error: \"Authentication required.\" }, 401);\n }\n\n const id = parseInt(c.req.param('id'));\n const success = await deleteArtwork(id, user.id);\n \n if (!success) {\n return c.json({ error: \"Artwork not found or access denied.\" }, 404);\n }\n\n return c.json({ success: true });\n } catch (error) {\n console.error(\"Delete artwork error:\", error);\n return c.json({ error: \"Failed to delete artwork.\" }, 500);\n }\n});\n\n// Search artworks\napp.get(\"/api/artworks/search\", async c => {\n try {\n const query = c.req.query('q');\n if (!query) {\n return c.json({ error: \"Search query is required.\" }, 400);\n }\n\n const limit = parseInt(c.req.query('limit') || '50');\n const offset = parseInt(c.req.query('offset') || '0');\n\n const artworks = await searchArtworks(query, true, limit, offset);\n return c.json({ artworks });\n } catch (error) {\n console.error(\"Search artworks error:\", error);\n return c.json({ error: \"Search failed.\" }, 500);\n }\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 - Professional Edition with User System\"\n });\n});\n\n// 404 handler\napp.notFound(c => {\n return c.text(\"Page not found\", 404);\n});\n\nexport default app.fetch;",[],[165,423],"afebd20a-4442-11f0-bc5b-76b3cceeab13","auth.ts","afebd2e6-4442-11f0-bc5b-76b3cceeab13","532625a5-cfa9-4084-b13a-5b45b96eb2b7",226,["D",1749371365836],"// Simple password hashing using Web Crypto API\nexport async function hashPassword(password: string): Promise {\n const encoder = new TextEncoder();\n const data = encoder.encode(password);\n const hashBuffer = await crypto.subtle.digest('SHA-256', data);\n const hashArray = Array.from(new Uint8Array(hashBuffer));\n return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');\n}\n\n// Verify password against hash\nexport async function verifyPassword(password: string, hash: string): Promise {\n const passwordHash = await hashPassword(password);\n return passwordHash === hash;\n}\n\n// Validate email format\nexport function isValidEmail(email: string): boolean {\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n return emailRegex.test(email);\n}\n\n// Validate username format\nexport function isValidUsername(username: string): boolean {\n // Username must be 3-20 characters, alphanumeric and underscores only\n const usernameRegex = /^[a-zA-Z0-9_]{3,20}$/;\n return usernameRegex.test(username);\n}\n\n// Validate password strength\nexport function isValidPassword(password: string): boolean {\n // Password must be at least 6 characters\n return password.length >= 6;\n}\n\n// Extract session ID from cookie header\nexport function getSessionFromCookie(cookieHeader: string | null): string | null {\n if (!cookieHeader) return null;\n \n const cookies = cookieHeader.split(';').map(c => c.trim());\n const sessionCookie = cookies.find(c => c.startsWith('session='));\n \n return sessionCookie ? sessionCookie.split('=')[1] : null;\n}\n\n// Create session cookie\nexport function createSessionCookie(sessionId: string): string {\n const expires = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000); // 7 days\n return `session=${sessionId}; HttpOnly; Secure; SameSite=Strict; Expires=${expires.toUTCString()}; Path=/`;\n}\n\n// Create logout cookie\nexport function createLogoutCookie(): string {\n return 'session=; HttpOnly; Secure; SameSite=Strict; Expires=Thu, 01 Jan 1970 00:00:00 GMT; Path=/';\n}",[],[165,268,431],"afebe164-4442-11f0-bc5b-76b3cceeab13",["D",1749371365836],[186],[165,268],"9b782954-4442-11f0-a1a0-76b3cceeab13","users.ts","9b782a76-4442-11f0-a1a0-76b3cceeab13","c2009741-52a8-43db-88c9-3d474d518681",224,["D",1749371331528],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { TABLES } from './schema.ts';\n\nexport interface User {\n id: number;\n username: string;\n email: string;\n display_name?: string;\n avatar_url?: string;\n created_at: string;\n updated_at: string;\n last_login?: string;\n is_active: boolean;\n}\n\nexport interface CreateUserData {\n username: string;\n email: string;\n password_hash: string;\n display_name?: string;\n}\n\nexport interface Session {\n id: string;\n user_id: number;\n expires_at: string;\n created_at: string;\n}\n\n// Create a new user\nexport async function createUser(userData: CreateUserData): Promise {\n try {\n const result = await sqlite.execute(`\n INSERT INTO ${TABLES.USERS} (username, email, password_hash, display_name)\n VALUES (?, ?, ?, ?)\n `, [userData.username, userData.email, userData.password_hash, userData.display_name || userData.username]);\n\n const user = await getUserById(result.lastInsertRowid as number);\n if (!user) {\n throw new Error('Failed to create user');\n }\n return user;\n } catch (error) {\n console.error('Error creating user:', error);\n throw error;\n }\n}\n\n// Get user by ID\nexport async function getUserById(id: number): Promise {\n try {\n const result = await sqlite.execute(`\n SELECT id, username, email, display_name, avatar_url, created_at, updated_at, last_login, is_active\n FROM ${TABLES.USERS}\n WHERE id = ? AND is_active = 1\n `, [id]);\n\n return result.rows.length > 0 ? result.rows[0] as User : null;\n } catch (error) {\n console.error('Error getting user by ID:', error);\n return null;\n }\n}\n\n// Get user by username\nexport async function getUserByUsername(username: string): Promise {\n try {\n const result = await sqlite.execute(`\n SELECT id, username, email, display_name, avatar_url, created_at, updated_at, last_login, is_active\n FROM ${TABLES.USERS}\n WHERE username = ? AND is_active = 1\n `, [username]);\n\n return result.rows.length > 0 ? result.rows[0] as User : null;\n } catch (error) {\n console.error('Error getting user by username:', error);\n return null;\n }\n}\n\n// Get user by email\nexport async function getUserByEmail(email: string): Promise {\n try {\n const result = await sqlite.execute(`\n SELECT id, username, email, display_name, avatar_url, created_at, updated_at, last_login, is_active\n FROM ${TABLES.USERS}\n WHERE email = ? AND is_active = 1\n `, [email]);\n\n return result.rows.length > 0 ? result.rows[0] as User : null;\n } catch (error) {\n console.error('Error getting user by email:', error);\n return null;\n }\n}\n\n// Get user with password hash for authentication\nexport async function getUserWithPassword(username: string): Promise<(User & { password_hash: string }) | null> {\n try {\n const result = await sqlite.execute(`\n SELECT id, username, email, password_hash, display_name, avatar_url, created_at, updated_at, last_login, is_active\n FROM ${TABLES.USERS}\n WHERE username = ? AND is_active = 1\n `, [username]);\n\n return result.rows.length > 0 ? result.rows[0] as (User & { password_hash: string }) : null;\n } catch (error) {\n console.error('Error getting user with password:', error);\n return null;\n }\n}\n\n// Update user's last login\nexport async function updateLastLogin(userId: number): Promise {\n try {\n await sqlite.execute(`\n UPDATE ${TABLES.USERS}\n SET last_login = datetime('now')\n WHERE id = ?\n `, [userId]);\n } catch (error) {\n console.error('Error updating last login:', error);\n }\n}\n\n// Create a session\nexport async function createSession(userId: number): Promise {\n try {\n const sessionId = crypto.randomUUID();\n const expiresAt = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000); // 7 days\n\n await sqlite.execute(`\n INSERT INTO ${TABLES.SESSIONS} (id, user_id, expires_at)\n VALUES (?, ?, ?)\n `, [sessionId, userId, expiresAt.toISOString()]);\n\n return {\n id: sessionId,\n user_id: userId,\n expires_at: expiresAt.toISOString(),\n created_at: new Date().toISOString()\n };\n } catch (error) {\n console.error('Error creating session:', error);\n throw error;\n }\n}\n\n// Get session\nexport async function getSession(sessionId: string): Promise {\n try {\n const result = await sqlite.execute(`\n SELECT id, user_id, expires_at, created_at\n FROM ${TABLES.SESSIONS}\n WHERE id = ? AND expires_at > datetime('now')\n `, [sessionId]);\n\n return result.rows.length > 0 ? result.rows[0] as Session : null;\n } catch (error) {\n console.error('Error getting session:', error);\n return null;\n }\n}\n\n// Delete session (logout)\nexport async function deleteSession(sessionId: string): Promise {\n try {\n await sqlite.execute(`\n DELETE FROM ${TABLES.SESSIONS}\n WHERE id = ?\n `, [sessionId]);\n } catch (error) {\n console.error('Error deleting session:', error);\n }\n}\n\n// Delete all sessions for a user\nexport async function deleteUserSessions(userId: number): Promise {\n try {\n await sqlite.execute(`\n DELETE FROM ${TABLES.SESSIONS}\n WHERE user_id = ?\n `, [userId]);\n } catch (error) {\n console.error('Error deleting user sessions:', error);\n }\n}",[],[165,452,444],"database","8fc4183e-4442-11f0-b5e8-76b3cceeab13","schema.ts","8fc418e8-4442-11f0-b5e8-76b3cceeab13",223,["D",1749371311893],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\n// Database table names with versioning for schema changes\nexport const TABLES = {\n USERS: 'pixelart_users_v1',\n ARTWORKS: 'pixelart_artworks_v1',\n SESSIONS: 'pixelart_sessions_v1'\n};\n\n// Initialize database tables\nexport async function initializeDatabase() {\n try {\n // Users table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TABLES.USERS} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT UNIQUE NOT NULL,\n email TEXT UNIQUE NOT NULL,\n password_hash TEXT NOT NULL,\n display_name TEXT,\n avatar_url TEXT,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n last_login DATETIME,\n is_active BOOLEAN DEFAULT 1\n )\n `);\n\n // Artworks table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TABLES.ARTWORKS} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n user_id INTEGER NOT NULL,\n title TEXT NOT NULL,\n description TEXT,\n canvas_data TEXT NOT NULL, -- JSON string of canvas state\n canvas_width INTEGER NOT NULL,\n canvas_height INTEGER NOT NULL,\n thumbnail_data TEXT, -- Base64 encoded thumbnail\n is_public BOOLEAN DEFAULT 0,\n tags TEXT, -- JSON array of tags\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n FOREIGN KEY (user_id) REFERENCES ${TABLES.USERS}(id) ON DELETE CASCADE\n )\n `);\n\n // Sessions table for user authentication\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TABLES.SESSIONS} (\n id TEXT PRIMARY KEY,\n user_id INTEGER NOT NULL,\n expires_at DATETIME NOT NULL,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n FOREIGN KEY (user_id) REFERENCES ${TABLES.USERS}(id) ON DELETE CASCADE\n )\n `);\n\n // Create indexes for better performance\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_artworks_user_id ON ${TABLES.ARTWORKS}(user_id)`);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_artworks_public ON ${TABLES.ARTWORKS}(is_public)`);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_artworks_created_at ON ${TABLES.ARTWORKS}(created_at)`);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_sessions_user_id ON ${TABLES.SESSIONS}(user_id)`);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_sessions_expires_at ON ${TABLES.SESSIONS}(expires_at)`);\n\n console.log('Database initialized successfully');\n } catch (error) {\n console.error('Error initializing database:', error);\n throw error;\n }\n}\n\n// Clean up expired sessions\nexport async function cleanupExpiredSessions() {\n try {\n await sqlite.execute(`\n DELETE FROM ${TABLES.SESSIONS} \n WHERE expires_at < datetime('now')\n `);\n } catch (error) {\n console.error('Error cleaning up expired sessions:', error);\n }\n}",[],[165,452,454],"a9ddf23a-4442-11f0-9e70-76b3cceeab13","artworks.ts","a9ddf30c-4442-11f0-9e70-76b3cceeab13",225,["D",1749371355680],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { TABLES } from './schema.ts';\nimport type { CanvasState } from '../../shared/types.ts';\n\nexport interface Artwork {\n id: number;\n user_id: number;\n title: string;\n description?: string;\n canvas_data: string; // JSON string\n canvas_width: number;\n canvas_height: number;\n thumbnail_data?: string;\n is_public: boolean;\n tags?: string; // JSON array\n created_at: string;\n updated_at: string;\n}\n\nexport interface CreateArtworkData {\n user_id: number;\n title: string;\n description?: string;\n canvas_data: CanvasState;\n thumbnail_data?: string;\n is_public?: boolean;\n tags?: string[];\n}\n\nexport interface UpdateArtworkData {\n title?: string;\n description?: string;\n canvas_data?: CanvasState;\n thumbnail_data?: string;\n is_public?: boolean;\n tags?: string[];\n}\n\n// Create a new artwork\nexport async function createArtwork(artworkData: CreateArtworkData): Promise {\n try {\n const canvasDataJson = JSON.stringify(artworkData.canvas_data);\n const tagsJson = artworkData.tags ? JSON.stringify(artworkData.tags) : null;\n\n const result = await sqlite.execute(`\n INSERT INTO ${TABLES.ARTWORKS} (\n user_id, title, description, canvas_data, canvas_width, canvas_height,\n thumbnail_data, is_public, tags\n )\n VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)\n `, [\n artworkData.user_id,\n artworkData.title,\n artworkData.description || null,\n canvasDataJson,\n artworkData.canvas_data.width,\n artworkData.canvas_data.height,\n artworkData.thumbnail_data || null,\n artworkData.is_public ? 1 : 0,\n tagsJson\n ]);\n\n const artwork = await getArtworkById(result.lastInsertRowid as number);\n if (!artwork) {\n throw new Error('Failed to create artwork');\n }\n return artwork;\n } catch (error) {\n console.error('Error creating artwork:', error);\n throw error;\n }\n}\n\n// Get artwork by ID\nexport async function getArtworkById(id: number): Promise {\n try {\n const result = await sqlite.execute(`\n SELECT * FROM ${TABLES.ARTWORKS}\n WHERE id = ?\n `, [id]);\n\n return result.rows.length > 0 ? result.rows[0] as Artwork : null;\n } catch (error) {\n console.error('Error getting artwork by ID:', error);\n return null;\n }\n}\n\n// Get artworks by user ID\nexport async function getArtworksByUserId(userId: number, limit = 50, offset = 0): Promise {\n try {\n const result = await sqlite.execute(`\n SELECT * FROM ${TABLES.ARTWORKS}\n WHERE user_id = ?\n ORDER BY updated_at DESC\n LIMIT ? OFFSET ?\n `, [userId, limit, offset]);\n\n return result.rows as Artwork[];\n } catch (error) {\n console.error('Error getting artworks by user ID:', error);\n return [];\n }\n}\n\n// Get public artworks\nexport async function getPublicArtworks(limit = 50, offset = 0): Promise {\n try {\n const result = await sqlite.execute(`\n SELECT * FROM ${TABLES.ARTWORKS}\n WHERE is_public = 1\n ORDER BY created_at DESC\n LIMIT ? OFFSET ?\n `, [limit, offset]);\n\n return result.rows as Artwork[];\n } catch (error) {\n console.error('Error getting public artworks:', error);\n return [];\n }\n}\n\n// Update artwork\nexport async function updateArtwork(id: number, userId: number, updateData: UpdateArtworkData): Promise {\n try {\n const updates: string[] = [];\n const values: any[] = [];\n\n if (updateData.title !== undefined) {\n updates.push('title = ?');\n values.push(updateData.title);\n }\n\n if (updateData.description !== undefined) {\n updates.push('description = ?');\n values.push(updateData.description);\n }\n\n if (updateData.canvas_data !== undefined) {\n updates.push('canvas_data = ?', 'canvas_width = ?', 'canvas_height = ?');\n values.push(\n JSON.stringify(updateData.canvas_data),\n updateData.canvas_data.width,\n updateData.canvas_data.height\n );\n }\n\n if (updateData.thumbnail_data !== undefined) {\n updates.push('thumbnail_data = ?');\n values.push(updateData.thumbnail_data);\n }\n\n if (updateData.is_public !== undefined) {\n updates.push('is_public = ?');\n values.push(updateData.is_public ? 1 : 0);\n }\n\n if (updateData.tags !== undefined) {\n updates.push('tags = ?');\n values.push(updateData.tags ? JSON.stringify(updateData.tags) : null);\n }\n\n if (updates.length === 0) {\n return await getArtworkById(id);\n }\n\n updates.push('updated_at = datetime(\\'now\\')');\n values.push(id, userId);\n\n await sqlite.execute(`\n UPDATE ${TABLES.ARTWORKS}\n SET ${updates.join(', ')}\n WHERE id = ? AND user_id = ?\n `, values);\n\n return await getArtworkById(id);\n } catch (error) {\n console.error('Error updating artwork:', error);\n throw error;\n }\n}\n\n// Delete artwork\nexport async function deleteArtwork(id: number, userId: number): Promise {\n try {\n const result = await sqlite.execute(`\n DELETE FROM ${TABLES.ARTWORKS}\n WHERE id = ? AND user_id = ?\n `, [id, userId]);\n\n return (result.changes || 0) > 0;\n } catch (error) {\n console.error('Error deleting artwork:', error);\n return false;\n }\n}\n\n// Search artworks\nexport async function searchArtworks(query: string, isPublicOnly = true, limit = 50, offset = 0): Promise {\n try {\n const searchPattern = `%${query}%`;\n const publicFilter = isPublicOnly ? 'AND is_public = 1' : '';\n\n const result = await sqlite.execute(`\n SELECT * FROM ${TABLES.ARTWORKS}\n WHERE (title LIKE ? OR description LIKE ? OR tags LIKE ?)\n ${publicFilter}\n ORDER BY updated_at DESC\n LIMIT ? OFFSET ?\n `, [searchPattern, searchPattern, searchPattern, limit, offset]);\n\n return result.rows as Artwork[];\n } catch (error) {\n console.error('Error searching artworks:', error);\n return [];\n }\n}\n\n// Get artwork count for user\nexport async function getArtworkCountByUserId(userId: number): Promise {\n try {\n const result = await sqlite.execute(`\n SELECT COUNT(*) as count FROM ${TABLES.ARTWORKS}\n WHERE user_id = ?\n `, [userId]);\n\n return (result.rows[0] as any).count || 0;\n } catch (error) {\n console.error('Error getting artwork count:', error);\n return 0;\n }\n}",[],[165,452,462],"8fc42964-4442-11f0-b5e8-76b3cceeab13",["D",1749371311893],[182,183,184],[165,452],["D",1749190560928],[181,185,187],[165],["D",1749190288939],{"_97":96,"_104":100},{"_97":96,"_98":-5,"_99":100,"_18":55,"_101":102,"_103":25},{"_13":86,"_32":87,"_44":43,"_88":45,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":46,"_95":96},"ctx",{"_79":-5,"_124":513,"_514":515,"_516":517,"_518":25,"_519":25,"_520":25,"_521":59,"_522":-5,"_523":-7,"_524":-7,"_525":155,"_526":25,"_527":25,"_528":-5,"_529":25,"_530":25,"_531":25,"_532":-5},"ENV",{"_484":485,"_486":487,"_488":87,"_489":490,"_491":492,"_493":494,"_495":496,"_497":498,"_499":500,"_501":502,"_503":504,"_505":506,"_507":508,"_509":510,"_511":512},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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"]

Canvas

Canvas

\n Save Your Artwork\n

\n My Workspace\n

Save Artwork

\n {artwork.title}\n

Tools

Settings

\n Color Theme\n

\n Preview\n

\n Interface\n

\n \n Properties\n

\n \n Properties\n

\n {selectedTool} Tool\n

\n Canvas\n

\n Quick Actions\n

\n \n \n \n Layout\n

\n \n Layers\n

Export

Colors

\n {isLoginMode ? 'Sign In' : 'Create Account'}\n

\n \n Layout\n

Diff · v242