\n {/* Header */}\n

Pixel Art Studio

Create beautiful pixel art

\n 🎨\n Professional Pixel Editor\n

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

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

\n \n \n \n

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

\n \n

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

\n \n

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

\n );\n}",[],[184,191,198],{"_104":207,"_95":208,"_154":209,"_156":192,"_157":139,"_158":210,"_160":22,"_106":211,"_100":212,"_163":202,"_165":213,"_166":22,"_167":-5,"_168":214,"_98":215},"cec78e20-429f-11f0-aedd-76b3cceeab13","Canvas.tsx","9a7b6472-429d-11f0-8188-76b3cceeab13",70,["D",1749191458477],10,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useRef, useEffect, useState, useCallback } from 'https://esm.sh/react@18.2.0';\nimport type { CanvasState, Tool } from '../../shared/types.ts';\nimport { getPixelKey } from '../utils/canvas.ts';\n\ninterface CanvasProps {\n canvas: CanvasState;\n selectedTool: Tool;\n selectedColor: string;\n secondaryColor: string;\n showGrid: boolean;\n brushSize: number;\n opacity: number;\n ditherPattern: string;\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 onSprayDraw: (x: number, y: number, radius: number, density: number, color: string) => void;\n onDitherDraw: (x: number, y: number, color: string, pattern: string) => void;\n onFilterApply: (x: number, y: number, filter: string, strength: number) => void;\n onMirror: (axis: 'horizontal' | 'vertical') => void;\n onRotate: (degrees: number) => void;\n onColorPick: (color: string) => void;\n}\n\nexport default function Canvas({\n canvas,\n selectedTool,\n selectedColor,\n showGrid,\n brushSize,\n onPixelChange,\n onBrushDraw,\n onFloodFill,\n onLineDraw,\n onRectangleDraw,\n onCircleDraw,\n onSprayDraw,\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 [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 color = canvas.pixels.get(key) || '#000000';\n onColorPick(color);\n } else if (selectedTool === 'brush') {\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 } else if (selectedTool === 'spray') {\n const color = selectedColor;\n onSprayDraw(pixel.x, pixel.y, brushSize, 0.3, color);\n }\n }, [getPixelFromEvent, selectedTool, selectedColor, brushSize, onFloodFill, onColorPick, canvas.pixels, onBrushDraw, onSprayDraw]);\n\n const handleMouseMove = useCallback((event: React.MouseEvent) => {\n const pixel = getPixelFromEvent(event);\n if (!pixel) return;\n\n if (!isDrawing) return;\n\n if (selectedTool === 'brush' || 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 } else if (selectedTool === 'spray') {\n const color = selectedColor;\n onSprayDraw(pixel.x, pixel.y, brushSize, 0.3, color);\n }\n // For line, rectangle, and circle tools, we'll show preview during drag\n }, [isDrawing, selectedTool, getPixelFromEvent, lastPixel, selectedColor, brushSize, onBrushDraw, onSprayDraw]);\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 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 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\n for (let y = 0; y < canvas.height; y++) {\n for (let x = 0; x < canvas.width; x++) {\n const key = getPixelKey(x, y);\n const color = canvas.pixels.get(key);\n\n if (color) {\n ctx.fillStyle = color;\n ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);\n }\n }\n }\n\n // Draw grid\n if (showGrid) {\n ctx.strokeStyle = '#e5e7eb';\n ctx.lineWidth = 1;\n\n // 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]);\n\n const getCursorStyle = () => {\n switch (selectedTool) {\n case 'brush':\n return 'crosshair';\n case 'eraser':\n return 'crosshair';\n case 'fill':\n return 'crosshair';\n case 'eyedropper':\n return 'crosshair';\n default:\n return 'default';\n }\n };\n\n return (\n

Canvas

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

\n \n

\n {selectedTool === 'brush' && 'Click and drag to draw'}\n {selectedTool === 'eraser' && 'Click and drag to erase'}\n {selectedTool === 'fill' && 'Click to fill area'}\n {selectedTool === 'eyedropper' && 'Click to pick color'}\n {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 === 'spray' && 'Click and drag to spray paint'}\n

\n );\n}",[],[184,191,208],{"_104":217,"_95":218,"_154":219,"_156":192,"_157":139,"_158":220,"_160":22,"_106":221,"_100":186,"_163":202,"_165":222,"_166":22,"_167":-5,"_168":223,"_98":224},"9197ca42-429f-11f0-b0cc-76b3cceeab13","ColorPalette.tsx","7536956a-429d-11f0-a766-76b3cceeab13",59,["D",1749191355825],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0';\n\ninterface ColorPaletteProps {\n selectedColor: string;\n 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}",[],[184,191,218],{"_104":226,"_95":227,"_154":228,"_156":192,"_157":139,"_158":229,"_160":22,"_106":230,"_100":119,"_163":202,"_165":231,"_166":22,"_167":-5,"_168":232,"_98":233},"59bd9ecc-429e-11f0-a88f-76b3cceeab13","ExportPanel.tsx","8c333462-429d-11f0-8dc7-76b3cceeab13",30,["D",1749190832625],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from 'https://esm.sh/react@18.2.0';\nimport type { CanvasState, ExportOptions } from '../../shared/types.ts';\nimport { exportToPNG, exportToSVG } from '../utils/export.ts';\n\ninterface ExportPanelProps {\n canvas: CanvasState;\n}\n\nexport default function ExportPanel({ canvas }: ExportPanelProps) {\n const [exportOptions, setExportOptions] = useState({\n format: 'png',\n scale: 10,\n includeGrid: false,\n });\n\n const handleExport = () => {\n if (exportOptions.format === 'png') {\n exportToPNG(canvas, exportOptions);\n } else {\n exportToSVG(canvas, exportOptions);\n }\n };\n\n const hasPixels = canvas.pixels.size > 0;\n\n return (\n

Export

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

\n Format\n

\n setExportOptions(prev => ({ ...prev, format: 'png' }))}\n className={`px-3 py-2 rounded-lg border-2 transition-colors text-sm font-medium ${\n exportOptions.format === 'png'\n ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300'\n : 'border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-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: {canvas.pixels.size}

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

\n );\n}",[],[184,191,227],{"_104":235,"_95":236,"_154":237,"_156":192,"_157":139,"_158":238,"_160":22,"_106":239,"_100":32,"_163":202,"_165":240,"_166":22,"_167":-5,"_168":241,"_98":242},"1ba17d64-42a0-11f0-887c-76b3cceeab13","LayersPanel.tsx","1ba17e36-42a0-11f0-887c-76b3cceeab13",74,["D",1749191587418],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0';\n\ninterface LayersPanelProps {\n visible: boolean;\n}\n\nconst LayerIcon = () => (\n \n);\n\nconst VisibilityIcon = () => (\n \n);\n\nexport default function LayersPanel({ visible }: LayersPanelProps) {\n if (!visible) return null;\n\n return (\n

\n \n Layers\n

\n \n

\n {/* Layer 1 - Active */}\n

\n \n

Layer 1

Pixel Layer

\n\n {/* Background Layer */}\n

\n \n

Background

Background Layer

\n\n

\n \n \n

\n );\n}",[],[184,191,236],{"_104":244,"_95":245,"_154":246,"_156":192,"_157":139,"_158":247,"_160":22,"_106":248,"_100":32,"_163":202,"_165":249,"_166":22,"_167":-5,"_168":250,"_98":251},"105e1516-42a0-11f0-9c4d-76b3cceeab13","LayoutSettings.tsx","105e15c0-42a0-11f0-9c4d-76b3cceeab13",73,["D",1749191568521],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0';\nimport type { LayoutMode } from '../../shared/types.ts';\n\ninterface LayoutSettingsProps {\n layoutMode: LayoutMode;\n onLayoutModeChange: (mode: LayoutMode) => void;\n showLayers: boolean;\n onToggleLayers: () => void;\n showProperties: boolean;\n onToggleProperties: () => void;\n}\n\nconst LayoutIcon = () => (\n \n);\n\nconst LayersIcon = () => (\n \n);\n\nconst PropertiesIcon = () => (\n \n);\n\nexport default function LayoutSettings({\n layoutMode,\n onLayoutModeChange,\n showLayers,\n onToggleLayers,\n showProperties,\n onToggleProperties,\n}: LayoutSettingsProps) {\n return (\n

\n \n Layout\n

\n \n {/* Layout Mode */}\n

\n Layout Mode\n

\n onLayoutModeChange('classic')}\n className={`px-3 py-2 rounded border text-sm transition-colors ${\n layoutMode === 'classic'\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 Classic\n \n onLayoutModeChange('illustrator')}\n className={`px-3 py-2 rounded border text-sm transition-colors ${\n layoutMode === 'illustrator'\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 Illustrator Style\n \n onLayoutModeChange('compact')}\n className={`px-3 py-2 rounded border text-sm transition-colors ${\n layoutMode === 'compact'\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 Compact\n \n

\n\n {/* Panel Toggles */}\n

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

\n\n {/* Layout Descriptions */}\n

\n {layoutMode === 'classic' && (\n

Traditional layout with sidebars

\n )}\n {layoutMode === 'illustrator' && (\n

Professional layout with floating panels and toolbar

\n )}\n {layoutMode === 'compact' && (\n

Minimal layout for small screens

\n )}\n

\n );\n}",[],[184,191,245],{"_104":253,"_95":254,"_154":255,"_156":192,"_157":139,"_158":256,"_160":22,"_106":257,"_100":32,"_163":202,"_165":258,"_166":22,"_167":-5,"_168":259,"_98":260},"2936ad96-42a0-11f0-9eb6-76b3cceeab13","PropertiesPanel.tsx","2936ae68-42a0-11f0-9eb6-76b3cceeab13",75,["D",1749191610207],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0';\nimport type { Tool } from '../../shared/types.ts';\n\ninterface 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 return (\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}",[],[184,191,254],{"_104":262,"_95":263,"_154":264,"_156":192,"_157":139,"_158":265,"_160":22,"_106":266,"_100":159,"_163":202,"_165":267,"_166":22,"_167":-5,"_168":268,"_98":269},"8336d9ce-42a0-11f0-a41f-76b3cceeab13","Toolbar.tsx","81494e9c-429d-11f0-9a38-76b3cceeab13",79,["D",1749191761195],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0';\nimport type { Tool } from '../../shared/types.ts';\n\ninterface ToolbarProps {\n selectedTool: Tool;\n onToolSelect: (tool: Tool) => void;\n canvasSize: number;\n onCanvasSizeChange: (size: number) => void;\n 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}",[],[184,191,263],[184,191],{"_104":272,"_95":273,"_154":274,"_156":185,"_157":139,"_158":186,"_160":161,"_106":275,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":276,"_98":296},"63fb775c-429d-11f0-ba4c-76b3cceeab13","utils","c24bc297-9c8d-497f-a41e-147a2232661b",["D",1749190420310],[277,287],{"_104":278,"_95":279,"_154":280,"_156":274,"_157":139,"_158":281,"_160":22,"_106":282,"_100":283,"_163":202,"_165":284,"_166":22,"_167":-5,"_168":285,"_98":286},"a4028474-429f-11f0-b582-76b3cceeab13","canvas.ts","63fb68e8-429d-11f0-ba4c-76b3cceeab13",60,["D",1749191386722],3,"import type { CanvasState, PixelData } from '../../shared/types.ts';\n\nexport function createEmptyCanvas(width: number, height: number): CanvasState {\n return {\n width,\n height,\n pixels: new Map(),\n history: [new Map()],\n historyIndex: 0,\n };\n}\n\nexport function getPixelKey(x: number, y: number): string {\n return `${x},${y}`;\n}\n\nexport function setPixel(canvas: CanvasState, x: number, y: number, color: string): CanvasState {\n const newPixels = new Map(canvas.pixels);\n const key = getPixelKey(x, y);\n \n if (color === 'transparent' || color === '') {\n newPixels.delete(key);\n } else {\n newPixels.set(key, color);\n }\n\n const newHistory = canvas.history.slice(0, canvas.historyIndex + 1);\n newHistory.push(new Map(newPixels));\n\n return {\n ...canvas,\n pixels: newPixels,\n history: newHistory,\n historyIndex: newHistory.length - 1,\n };\n}\n\nexport function floodFill(canvas: CanvasState, startX: number, startY: number, newColor: string): CanvasState {\n const startKey = getPixelKey(startX, startY);\n const originalColor = canvas.pixels.get(startKey) || 'transparent';\n \n if (originalColor === newColor) return canvas;\n\n const newPixels = new Map(canvas.pixels);\n const stack: [number, number][] = [[startX, startY]];\n const visited = new Set();\n\n while (stack.length > 0) {\n const [x, y] = stack.pop()!;\n const key = getPixelKey(x, y);\n\n if (visited.has(key) || x < 0 || x >= canvas.width || y < 0 || y >= canvas.height) {\n continue;\n }\n\n const currentColor = newPixels.get(key) || 'transparent';\n if (currentColor !== originalColor) {\n continue;\n }\n\n visited.add(key);\n \n if (newColor === 'transparent') {\n newPixels.delete(key);\n } else {\n newPixels.set(key, newColor);\n }\n\n // Add adjacent pixels to stack\n stack.push([x + 1, y], [x - 1, y], [x, y + 1], [x, y - 1]);\n }\n\n const newHistory = canvas.history.slice(0, canvas.historyIndex + 1);\n newHistory.push(new Map(newPixels));\n\n return {\n ...canvas,\n pixels: newPixels,\n history: newHistory,\n historyIndex: newHistory.length - 1,\n };\n}\n\nexport function undo(canvas: CanvasState): CanvasState {\n if (canvas.historyIndex > 0) {\n const newIndex = canvas.historyIndex - 1;\n return {\n ...canvas,\n pixels: new Map(canvas.history[newIndex]),\n historyIndex: newIndex,\n };\n }\n return canvas;\n}\n\nexport function redo(canvas: CanvasState): CanvasState {\n if (canvas.historyIndex < canvas.history.length - 1) {\n const newIndex = canvas.historyIndex + 1;\n return {\n ...canvas,\n pixels: new Map(canvas.history[newIndex]),\n historyIndex: newIndex,\n };\n }\n return canvas;\n}\n\nexport function clearCanvas(canvas: CanvasState): CanvasState {\n const newHistory = canvas.history.slice(0, canvas.historyIndex + 1);\n newHistory.push(new Map());\n\n return {\n ...canvas,\n pixels: new Map(),\n history: newHistory,\n historyIndex: newHistory.length - 1,\n };\n}\n\nexport function resizeCanvas(canvas: CanvasState, newWidth: number, newHeight: number): CanvasState {\n const newPixels = new Map();\n \n // Copy existing pixels that fit in the new size\n for (const [key, color] of canvas.pixels) {\n const [x, y] = key.split(',').map(Number);\n if (x < newWidth && y < newHeight) {\n newPixels.set(key, color);\n }\n }\n\n return {\n width: newWidth,\n height: newHeight,\n pixels: newPixels,\n history: [new Map(newPixels)],\n historyIndex: 0,\n };\n}\n\nexport function drawLine(canvas: CanvasState, x0: number, y0: number, x1: number, y1: number, color: string): CanvasState {\n const newPixels = new Map(canvas.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 newHistory = canvas.history.slice(0, canvas.historyIndex + 1);\n newHistory.push(new Map(newPixels));\n\n return {\n ...canvas,\n pixels: newPixels,\n history: newHistory,\n historyIndex: newHistory.length - 1,\n };\n}\n\nexport function drawRectangle(canvas: CanvasState, x0: number, y0: number, x1: number, y1: number, color: string, filled: boolean = false): CanvasState {\n const newPixels = new Map(canvas.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 newHistory = canvas.history.slice(0, canvas.historyIndex + 1);\n newHistory.push(new Map(newPixels));\n\n return {\n ...canvas,\n pixels: newPixels,\n history: newHistory,\n historyIndex: newHistory.length - 1,\n };\n}\n\nexport function drawCircle(canvas: CanvasState, centerX: number, centerY: number, radius: number, color: string, filled: boolean = false): CanvasState {\n const newPixels = new Map(canvas.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 newHistory = canvas.history.slice(0, canvas.historyIndex + 1);\n newHistory.push(new Map(newPixels));\n\n return {\n ...canvas,\n pixels: newPixels,\n history: newHistory,\n historyIndex: newHistory.length - 1,\n };\n}\n\nexport function drawSpray(canvas: CanvasState, centerX: number, centerY: number, radius: number, density: number, color: string): CanvasState {\n const newPixels = new Map(canvas.pixels);\n \n const numDots = Math.floor(radius * radius * density);\n \n for (let i = 0; i < numDots; i++) {\n const angle = Math.random() * 2 * Math.PI;\n const distance = Math.random() * radius;\n const x = Math.round(centerX + distance * Math.cos(angle));\n const y = Math.round(centerY + distance * Math.sin(angle));\n \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\n const newHistory = canvas.history.slice(0, canvas.historyIndex + 1);\n newHistory.push(new Map(newPixels));\n\n return {\n ...canvas,\n pixels: newPixels,\n history: newHistory,\n historyIndex: newHistory.length - 1,\n };\n}\n\nexport function drawBrush(canvas: CanvasState, x: number, y: number, size: number, color: string): CanvasState {\n const newPixels = new Map(canvas.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 newHistory = canvas.history.slice(0, canvas.historyIndex + 1);\n newHistory.push(new Map(newPixels));\n\n return {\n ...canvas,\n pixels: newPixels,\n history: newHistory,\n historyIndex: newHistory.length - 1,\n };\n}\n\nexport function applyDither(canvas: CanvasState, x: number, y: number, color: string, pattern: string): CanvasState {\n const newPixels = new Map(canvas.pixels);\n \n let shouldDraw = false;\n \n switch (pattern) {\n case 'bayer2x2':\n const bayer2x2 = [[0, 2], [3, 1]];\n shouldDraw = bayer2x2[y % 2][x % 2] < 2;\n break;\n case 'bayer4x4':\n const bayer4x4 = [\n [0, 8, 2, 10],\n [12, 4, 14, 6],\n [3, 11, 1, 9],\n [15, 7, 13, 5]\n ];\n shouldDraw = bayer4x4[y % 4][x % 4] < 8;\n break;\n case 'random':\n shouldDraw = Math.random() < 0.5;\n break;\n default:\n shouldDraw = true;\n }\n \n if (shouldDraw && 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 const newHistory = canvas.history.slice(0, canvas.historyIndex + 1);\n newHistory.push(new Map(newPixels));\n\n return {\n ...canvas,\n pixels: newPixels,\n history: newHistory,\n historyIndex: newHistory.length - 1,\n };\n}\n\nexport function applyFilter(canvas: CanvasState, x: number, y: number, filter: string, strength: number = 1): CanvasState {\n const newPixels = new Map(canvas.pixels);\n \n if (x < 0 || x >= canvas.width || y < 0 || y >= canvas.height) return canvas;\n \n const key = getPixelKey(x, y);\n const currentColor = canvas.pixels.get(key);\n \n if (!currentColor || currentColor === 'transparent') return canvas;\n \n // Convert hex to RGB\n const hex = currentColor.replace('#', '');\n let r = parseInt(hex.substr(0, 2), 16);\n let g = parseInt(hex.substr(2, 2), 16);\n let b = parseInt(hex.substr(4, 2), 16);\n \n switch (filter) {\n case 'lighten':\n r = Math.min(255, r + (255 - r) * strength * 0.3);\n g = Math.min(255, g + (255 - g) * strength * 0.3);\n b = Math.min(255, b + (255 - b) * strength * 0.3);\n break;\n case 'darken':\n r = Math.max(0, r - r * strength * 0.3);\n g = Math.max(0, g - g * strength * 0.3);\n b = Math.max(0, b - b * strength * 0.3);\n break;\n case 'noise':\n const noise = (Math.random() - 0.5) * 100 * strength;\n r = Math.max(0, Math.min(255, r + noise));\n g = Math.max(0, Math.min(255, g + noise));\n b = Math.max(0, Math.min(255, b + noise));\n break;\n }\n \n // Convert back to hex\n const newColor = '#' + \n Math.round(r).toString(16).padStart(2, '0') +\n Math.round(g).toString(16).padStart(2, '0') +\n Math.round(b).toString(16).padStart(2, '0');\n \n newPixels.set(key, newColor);\n\n const newHistory = canvas.history.slice(0, canvas.historyIndex + 1);\n newHistory.push(new Map(newPixels));\n\n return {\n ...canvas,\n pixels: newPixels,\n history: newHistory,\n historyIndex: newHistory.length - 1,\n };\n}\n\nexport function createSelection(canvas: CanvasState, x: number, y: number, width: number, height: number) {\n const pixels = new Map();\n \n for (let py = y; py < y + height; py++) {\n for (let px = x; px < x + width; px++) {\n if (px >= 0 && px < canvas.width && py >= 0 && py < canvas.height) {\n const key = getPixelKey(px, py);\n const color = canvas.pixels.get(key);\n if (color) {\n pixels.set(getPixelKey(px - x, py - y), color);\n }\n }\n }\n }\n \n return { x, y, width, height, pixels };\n}\n\nexport function mirrorCanvas(canvas: CanvasState, axis: 'horizontal' | 'vertical'): CanvasState {\n const newPixels = new Map(canvas.pixels);\n \n for (const [key, color] of canvas.pixels) {\n const [x, y] = key.split(',').map(Number);\n let mirrorX = x;\n let mirrorY = y;\n \n if (axis === 'horizontal') {\n mirrorX = canvas.width - 1 - x;\n } else {\n mirrorY = canvas.height - 1 - y;\n }\n \n if (mirrorX >= 0 && mirrorX < canvas.width && mirrorY >= 0 && mirrorY < canvas.height) {\n const mirrorKey = getPixelKey(mirrorX, mirrorY);\n newPixels.set(mirrorKey, color);\n }\n }\n\n const newHistory = canvas.history.slice(0, canvas.historyIndex + 1);\n newHistory.push(new Map(newPixels));\n\n return {\n ...canvas,\n pixels: newPixels,\n history: newHistory,\n historyIndex: newHistory.length - 1,\n };\n}\n\nexport function rotateCanvas(canvas: CanvasState, degrees: number): CanvasState {\n if (degrees % 90 !== 0) return canvas; // Only support 90-degree rotations\n \n const newPixels = new Map();\n const rotations = (degrees / 90) % 4;\n \n for (const [key, color] of canvas.pixels) {\n const [x, y] = key.split(',').map(Number);\n let newX = x;\n let newY = y;\n \n for (let i = 0; i < rotations; i++) {\n const tempX = newX;\n newX = canvas.height - 1 - newY;\n newY = tempX;\n }\n \n if (newX >= 0 && newX < canvas.width && newY >= 0 && newY < canvas.height) {\n const newKey = getPixelKey(newX, newY);\n newPixels.set(newKey, color);\n }\n }\n\n const newHistory = canvas.history.slice(0, canvas.historyIndex + 1);\n newHistory.push(new Map(newPixels));\n\n return {\n ...canvas,\n pixels: newPixels,\n history: newHistory,\n historyIndex: newHistory.length - 1,\n };\n}",[],[184,273,279],{"_104":288,"_95":289,"_154":290,"_156":274,"_157":139,"_158":291,"_160":22,"_106":292,"_100":32,"_163":202,"_165":293,"_166":22,"_167":-5,"_168":294,"_98":295},"6ccece6a-429d-11f0-957e-76b3cceeab13","export.ts","6ccecef6-429d-11f0-957e-76b3cceeab13",5,["D",1749190435121],"import type { CanvasState, ExportOptions } from '../../shared/types.ts';\nimport { getPixelKey } from './canvas.ts';\n\nexport function exportToPNG(canvas: CanvasState, options: ExportOptions): void {\n const { scale = 10, includeGrid = false } = options;\n const canvasElement = document.createElement('canvas');\n const ctx = canvasElement.getContext('2d')!;\n \n const pixelSize = scale;\n const totalSize = canvas.width * pixelSize;\n \n canvasElement.width = totalSize;\n canvasElement.height = totalSize;\n \n // Fill background with transparent\n ctx.clearRect(0, 0, totalSize, totalSize);\n \n // Draw pixels\n for (let y = 0; y < canvas.height; y++) {\n for (let x = 0; x < canvas.width; x++) {\n const key = getPixelKey(x, y);\n const color = canvas.pixels.get(key);\n \n if (color) {\n ctx.fillStyle = color;\n ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);\n }\n }\n }\n \n // Draw grid if requested\n if (includeGrid) {\n ctx.strokeStyle = '#00000020';\n ctx.lineWidth = 1;\n \n for (let i = 0; i <= canvas.width; i++) {\n ctx.beginPath();\n ctx.moveTo(i * pixelSize, 0);\n ctx.lineTo(i * pixelSize, totalSize);\n ctx.stroke();\n }\n \n for (let i = 0; i <= canvas.height; i++) {\n ctx.beginPath();\n ctx.moveTo(0, i * pixelSize);\n ctx.lineTo(totalSize, i * pixelSize);\n ctx.stroke();\n }\n }\n \n // Download the image\n canvasElement.toBlob((blob) => {\n if (blob) {\n const url = URL.createObjectURL(blob);\n const link = document.createElement('a');\n link.href = url;\n link.download = `pixel-art-${Date.now()}.png`;\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n URL.revokeObjectURL(url);\n }\n });\n}\n\nexport function exportToSVG(canvas: CanvasState, options: ExportOptions): void {\n const { scale = 10, includeGrid = false } = options;\n const pixelSize = scale;\n const totalSize = canvas.width * pixelSize;\n \n let svg = `';\n \n // Download the SVG\n const blob = new Blob([svg], { type: 'image/svg+xml' });\n const url = URL.createObjectURL(blob);\n const link = document.createElement('a');\n link.href = url;\n link.download = `pixel-art-${Date.now()}.svg`;\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n URL.revokeObjectURL(url);\n}",[],[184,273,289],[184,273],{"_104":298,"_95":299,"_154":300,"_156":185,"_157":139,"_158":301,"_160":161,"_106":302,"_100":32,"_163":303,"_165":304,"_166":22,"_167":-5,"_168":305,"_98":306},"c8467838-429d-11f0-ad23-76b3cceeab13","favicon.svg","c84678e2-429d-11f0-ad23-76b3cceeab13",17,["D",1749190588558],"file","",[],[184,299],{"_104":308,"_95":309,"_154":310,"_156":185,"_157":139,"_158":201,"_160":22,"_106":311,"_100":283,"_163":303,"_165":312,"_166":22,"_167":-5,"_168":313,"_98":314},"06326d8c-429e-11f0-94c1-76b3cceeab13","index.html","b2b389ca-429d-11f0-abaa-76b3cceeab13",["D",1749190692460],"\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",[],[184,309],{"_104":316,"_95":317,"_154":318,"_156":185,"_157":139,"_158":319,"_160":22,"_106":320,"_100":32,"_163":202,"_165":321,"_166":22,"_167":-5,"_168":322,"_98":323},"a9ad46cc-429d-11f0-abaa-76b3cceeab13","index.tsx","a9ad479e-429d-11f0-abaa-76b3cceeab13",11,["D",1749190537241],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0';\nimport { createRoot } from 'https://esm.sh/react-dom@18.2.0/client';\nimport App from './components/App.tsx';\n\nconst root = createRoot(document.getElementById('root')!);\nroot.render();",[],[184,317],[184],{"_104":326,"_95":327,"_154":328,"_156":-5,"_157":139,"_158":283,"_160":161,"_106":329,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":330,"_98":340},"5b2fadaa-429d-11f0-824b-76b3cceeab13","shared","b80fb4f5-cf48-44f8-aa98-994530ad4980",["D",1749190405552],[331],{"_104":332,"_95":333,"_154":334,"_156":328,"_157":139,"_158":335,"_160":22,"_106":336,"_100":193,"_163":202,"_165":337,"_166":22,"_167":-5,"_168":338,"_98":339},"021b3fce-42a0-11f0-8cd3-76b3cceeab13","types.ts","5b2fa544-429d-11f0-824b-76b3cceeab13",72,["D",1749191544591],"export interface PixelData {\n x: number;\n y: number;\n color: string;\n}\n\nexport interface CanvasState {\n width: number;\n height: number;\n pixels: Map;\n history: Map[];\n historyIndex: number;\n}\n\nexport type Tool = \n | 'brush' \n | 'pencil'\n | 'eraser' \n | 'fill' \n | 'eyedropper' \n | 'line' \n | 'rectangle' \n | 'circle' \n | 'select'\n | 'move';\n\nexport type LayoutMode = 'classic' | 'illustrator' | 'compact';\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 canvas: CanvasState;\n selection?: {\n x: number;\n y: number;\n width: number;\n height: number;\n pixels: Map;\n };\n}\n\nexport interface ExportOptions {\n format: 'png' | 'svg';\n scale: number;\n includeGrid: boolean;\n}",[],[327,333],[327],{"_104":342,"_95":343,"_154":344,"_156":-5,"_157":139,"_158":345,"_160":22,"_106":346,"_100":119,"_163":303,"_165":347,"_166":22,"_167":-5,"_168":348,"_98":349},"e06982b0-429e-11f0-8824-76b3cceeab13","README.md","558142ce-429d-11f0-beee-76b3cceeab13",50,["D",1749191058562],"# Pixel Art Studio\n\nA professional pixel art editor built with React and TailwindCSS featuring:\n\n## Features\n\n### Drawing Tools\n- **Brush**: Draw with customizable brush size (1-10px)\n- **Eraser**: Erase pixels with customizable size\n- **Fill Bucket**: Flood fill areas with color\n- **Eyedropper**: Pick colors from existing pixels\n- **Line Tool**: Draw straight lines\n- **Rectangle Tool**: Draw rectangles (hold Shift for filled)\n- **Circle Tool**: Draw circles (hold Shift for filled)\n- **Spray Paint**: Spray paint effect with adjustable radius\n\n### Canvas Features\n- **Flexible Canvas Size**: Choose from presets (8x8 to 128x128) or custom dimensions (4x4 to 256x256)\n- **Custom Dimensions**: Set width and height independently\n- **Grid System**: Toggle grid visibility for precise pixel placement\n- **Undo/Redo**: Full history support for all drawing operations\n- **Clear Canvas**: Reset the entire canvas\n\n### Color System\n- **Color Palette**: 32 preset colors for quick access\n- **Custom Color Picker**: HTML5 color picker with hex input\n- **Eyedropper Tool**: Sample colors directly from the canvas\n- **Transparent/Eraser**: Special transparent color for erasing\n\n### Theme Support\n- **Dark Mode**: Automatic switching based on system preference\n- **Enhanced Dark Theme**: Deeper blacks and better contrast\n- **Smooth Transitions**: Animated theme switching\n\n### Export Options\n- **PNG Export**: High-quality raster images with customizable pixel scale (1-20px)\n- **SVG Export**: Vector format for scalable graphics\n- **Grid Export**: Option to include grid lines in exported images\n- **Custom Scale**: Adjust output resolution\n\n### User Experience\n- **Responsive Design**: Works on desktop and mobile devices\n- **Professional UI**: Clean, modern interface with intuitive controls\n- **Real-time Preview**: See changes instantly as you draw\n- **Tool Tips**: Helpful descriptions for all tools and features\n\n## Project Structure\n\n```\n├── frontend/\n│ ├── index.html # Main HTML template with dark theme support\n│ ├── index.tsx # React entry point\n│ ├── components/\n│ │ ├── App.tsx # Main application component\n│ │ ├── Canvas.tsx # Drawing canvas with all tool support\n│ │ ├── Toolbar.tsx # Tools, canvas size, and controls\n│ │ ├── ColorPalette.tsx # Color selection and picker\n│ │ └── ExportPanel.tsx # Export functionality\n│ └── utils/\n│ ├── canvas.ts # Canvas utilities and drawing algorithms\n│ └── export.ts # PNG/SVG export utilities\n├── backend/\n│ └── index.ts # Static file server with API endpoints\n└── shared/\n └── types.ts # Shared TypeScript types\n```\n\n## Tool Usage\n\n### Basic Drawing\n1. Select **Brush** tool and choose a color\n2. Adjust brush size if needed (1-10px)\n3. 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 (hold Shift for filled)\n- **Circle**: Click and drag from center to edge (hold Shift for filled)\n\n### Advanced Tools\n- **Fill Bucket**: Click to fill connected areas with the same color\n- **Spray Paint**: Click and drag for spray paint effect\n- **Eyedropper**: Click any pixel to sample its color\n\n### Canvas Management\n- **Preset Sizes**: Quick selection from 8x8 to 128x128\n- **Custom Size**: Toggle custom mode for independent width/height (4-256px)\n- **Grid Toggle**: Show/hide pixel grid for precision work\n- **Undo/Redo**: Navigate through drawing history\n- **Clear**: Reset entire canvas (with confirmation)\n\n### Export Process\n1. Choose format (PNG or SVG)\n2. Set pixel scale (1-20px per pixel)\n3. Optionally include grid lines\n4. Click export to download\n\n## Technical Features\n\n- **React 18.2.0** with TypeScript for type safety\n- **TailwindCSS** with custom dark theme colors\n- **HTML5 Canvas** for high-performance drawing\n- **Bresenham's Algorithm** for smooth line drawing\n- **Flood Fill Algorithm** for bucket tool\n- **System Media Queries** for automatic theme detection\n- **Responsive Grid Layout** for all screen sizes\n\n## Keyboard Shortcuts\n\n- **Shift + Rectangle/Circle**: Draw filled shapes\n- **System Dark Mode**: Automatic theme switching\n\n## Browser Compatibility\n\n- Modern browsers with HTML5 Canvas support\n- Automatic fallbacks for older browsers\n- Mobile touch support for drawing",[],[343],{"_104":351,"_95":352,"_154":353,"_156":-5,"_157":139,"_158":354,"_160":161,"_106":355,"_100":119,"_163":202,"_165":356,"_166":22,"_167":-5,"_168":357,"_98":358},"c2544da6-429d-11f0-a0fd-76b3cceeab13","main.tsx","15aea70e-429d-11f0-a0da-76b3cceeab13",16,["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",[],[352],"files",[151,170,182,189,196,206,216,225,234,243,252,261,271,277,287,297,307,315,325,331,341,350],"counts",{"_363":32,"_364":119,"_365":119,"_366":32},"pulls","branches","forks","envVars","contents",[],{"_104":171,"_95":172,"_154":173,"_156":155,"_157":139,"_158":174,"_160":22,"_106":370,"_100":176,"_163":177,"_165":178,"_166":22,"_167":96,"_98":371},["D",1749190567411],[153,172],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":380,"_149":385,"_359":452,"_303":453,"_367":455,"_456":-5,"_457":22,"_458":-5,"_459":-5,"_460":-5,"_461":462},{"_104":105,"_95":96,"_106":381,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":119,"_16":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":382,"_133":383,"_136":384,"_148":22},["D",1749190288939],{"_93":94,"_131":132},{"_93":94,"_135":132},{"_100":138,"_95":43,"_104":139,"_140":105,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":96,"_147":94},[386,392,440,446,449],{"_104":152,"_95":153,"_154":155,"_156":-5,"_157":139,"_158":159,"_160":161,"_106":162,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":387,"_98":391},[388],{"_104":171,"_95":172,"_154":173,"_156":155,"_157":139,"_158":174,"_160":22,"_106":175,"_100":176,"_163":177,"_165":178,"_166":22,"_167":96,"_168":389,"_98":390},[],[153,172],[153],{"_104":183,"_95":184,"_154":185,"_156":-5,"_157":139,"_158":186,"_160":161,"_106":187,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":393,"_98":439},[394,421,430,433,436],{"_104":190,"_95":191,"_154":192,"_156":185,"_157":139,"_158":193,"_160":161,"_106":194,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":395,"_98":420},[396,399,402,405,408,411,414,417],{"_104":197,"_95":198,"_154":199,"_156":192,"_157":139,"_158":101,"_160":22,"_106":200,"_100":201,"_163":202,"_165":203,"_166":22,"_167":-5,"_168":397,"_98":398},[],[184,191,198],{"_104":207,"_95":208,"_154":209,"_156":192,"_157":139,"_158":210,"_160":22,"_106":211,"_100":212,"_163":202,"_165":213,"_166":22,"_167":-5,"_168":400,"_98":401},[],[184,191,208],{"_104":217,"_95":218,"_154":219,"_156":192,"_157":139,"_158":220,"_160":22,"_106":221,"_100":186,"_163":202,"_165":222,"_166":22,"_167":-5,"_168":403,"_98":404},[],[184,191,218],{"_104":226,"_95":227,"_154":228,"_156":192,"_157":139,"_158":229,"_160":22,"_106":230,"_100":119,"_163":202,"_165":231,"_166":22,"_167":-5,"_168":406,"_98":407},[],[184,191,227],{"_104":235,"_95":236,"_154":237,"_156":192,"_157":139,"_158":238,"_160":22,"_106":239,"_100":32,"_163":202,"_165":240,"_166":22,"_167":-5,"_168":409,"_98":410},[],[184,191,236],{"_104":244,"_95":245,"_154":246,"_156":192,"_157":139,"_158":247,"_160":22,"_106":248,"_100":32,"_163":202,"_165":249,"_166":22,"_167":-5,"_168":412,"_98":413},[],[184,191,245],{"_104":253,"_95":254,"_154":255,"_156":192,"_157":139,"_158":256,"_160":22,"_106":257,"_100":32,"_163":202,"_165":258,"_166":22,"_167":-5,"_168":415,"_98":416},[],[184,191,254],{"_104":262,"_95":263,"_154":264,"_156":192,"_157":139,"_158":265,"_160":22,"_106":266,"_100":159,"_163":202,"_165":267,"_166":22,"_167":-5,"_168":418,"_98":419},[],[184,191,263],[184,191],{"_104":272,"_95":273,"_154":274,"_156":185,"_157":139,"_158":186,"_160":161,"_106":275,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":422,"_98":429},[423,426],{"_104":278,"_95":279,"_154":280,"_156":274,"_157":139,"_158":281,"_160":22,"_106":282,"_100":283,"_163":202,"_165":284,"_166":22,"_167":-5,"_168":424,"_98":425},[],[184,273,279],{"_104":288,"_95":289,"_154":290,"_156":274,"_157":139,"_158":291,"_160":22,"_106":292,"_100":32,"_163":202,"_165":293,"_166":22,"_167":-5,"_168":427,"_98":428},[],[184,273,289],[184,273],{"_104":298,"_95":299,"_154":300,"_156":185,"_157":139,"_158":301,"_160":161,"_106":302,"_100":32,"_163":303,"_165":304,"_166":22,"_167":-5,"_168":431,"_98":432},[],[184,299],{"_104":308,"_95":309,"_154":310,"_156":185,"_157":139,"_158":201,"_160":22,"_106":311,"_100":283,"_163":303,"_165":312,"_166":22,"_167":-5,"_168":434,"_98":435},[],[184,309],{"_104":316,"_95":317,"_154":318,"_156":185,"_157":139,"_158":319,"_160":22,"_106":320,"_100":32,"_163":202,"_165":321,"_166":22,"_167":-5,"_168":437,"_98":438},[],[184,317],[184],{"_104":326,"_95":327,"_154":328,"_156":-5,"_157":139,"_158":283,"_160":161,"_106":329,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":441,"_98":445},[442],{"_104":332,"_95":333,"_154":334,"_156":328,"_157":139,"_158":335,"_160":22,"_106":336,"_100":193,"_163":202,"_165":337,"_166":22,"_167":-5,"_168":443,"_98":444},[],[327,333],[327],{"_104":342,"_95":343,"_154":344,"_156":-5,"_157":139,"_158":345,"_160":22,"_106":346,"_100":119,"_163":303,"_165":347,"_166":22,"_167":-5,"_168":447,"_98":448},[],[343],{"_104":351,"_95":352,"_154":353,"_156":-5,"_157":139,"_158":354,"_160":161,"_106":355,"_100":119,"_163":202,"_165":356,"_166":22,"_167":-5,"_168":450,"_98":451},[],[352],[386,388,392,394,396,399,402,405,408,411,414,417,421,423,426,430,433,436,440,442,446,449],{"_104":171,"_95":172,"_154":173,"_156":155,"_157":139,"_158":174,"_160":22,"_106":370,"_100":176,"_163":177,"_165":178,"_166":22,"_167":96,"_98":454},[153,172],[],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]

loading

pixelart