Upload folder using huggingface_hub

index.html

@@ -147,6 +147,17 @@
     .btn-primary:hover {
       background: #9187fa;
       border-color: #9187fa;
+      color: #fff;
+    }
+
+    .btn-danger {
+      background: var(--red);
+      color: #fff;
+      border: 1px solid transparent;
+    }
+
+    .btn-danger:hover {
+      background: #e85555;
     }
 
     .workspace {
@@ -198,6 +209,7 @@
       font-size: 9px;
       cursor: pointer;
       height: 55px;
+      font-family: var(--mono);
     }
 
     .tool-btn:hover {
@@ -212,7 +224,7 @@
       color: var(--accent);
     }
 
-    .tool-btn svg {
+    .tool-btn svg, .tool-btn i {
       width: 18px;
       height: 18px;
     }
@@ -246,7 +258,6 @@
       border-radius: 2px;
       transition: transform 0.1s;
       background: transparent;
-      /* Transform origin center for zoom */
       transform-origin: center center;
     }
 
@@ -290,7 +301,7 @@
 
     .tab:hover {
       color: var(--text);
-      background: rgba(255,255,255,0.02);
+      background: rgba(255, 255, 255, 0.02);
     }
 
     .tab.active {
@@ -331,7 +342,7 @@
       text-align: right;
     }
 
-    input[type=range] {
+    input[type="range"] {
       -webkit-appearance: none;
       width: 100%;
       height: 3px;
@@ -341,7 +352,7 @@
       cursor: pointer;
     }
 
-    input[type=range]::-webkit-slider-thumb {
+    input[type="range"]::-webkit-slider-thumb {
       -webkit-appearance: none;
       width: 12px;
       height: 12px;
@@ -351,10 +362,18 @@
       transition: transform 0.1s;
     }
 
-    input[type=range]:hover::-webkit-slider-thumb {
+    input[type="range"]:hover::-webkit-slider-thumb {
       transform: scale(1.2);
     }
 
+    input[type="color"] {
+      width: 100%;
+      height: 30px;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+    }
+
     select {
       width: 100%;
       background: var(--panel2);
@@ -381,6 +400,7 @@
       font-size: 10px;
       color: var(--muted);
       line-height: 1.5;
+      margin: 0;
     }
 
     .model-info {
@@ -390,7 +410,6 @@
       font-style: italic;
     }
 
-    /* Layer Styling */
     .layer-list {
       display: flex;
       flex-direction: column;
@@ -406,6 +425,7 @@
       border-radius: 4px;
       border: 1px solid var(--border);
       position: relative;
+      cursor: pointer;
     }
 
     .layer-item.active {
@@ -419,6 +439,7 @@
       background: #000;
       object-fit: cover;
       border: 1px solid var(--border);
+      border-radius: 2px;
     }
 
     .layer-info {
@@ -451,6 +472,11 @@
       color: var(--text);
     }
 
+    .layer-opacity {
+      width: 40px;
+      height: 3px;
+    }
+
     .drop-zone {
       position: absolute;
       inset: 0;
@@ -507,7 +533,7 @@
       pointer-events: none;
       z-index: 100;
       white-space: nowrap;
-      box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
     }
 
     #toast.on {
@@ -548,16 +574,19 @@
       color: var(--accent);
     }
 
-    /* Modal for Text */
     .modal {
       position: absolute;
-      top: 0; left: 0; width: 100%; height: 100%;
-      background: rgba(0,0,0,0.7);
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.7);
       z-index: 50;
       display: none;
       align-items: center;
       justify-content: center;
     }
+
     .modal-content {
       background: var(--panel);
       padding: 20px;
@@ -565,6 +594,135 @@
       border-radius: var(--radius);
       width: 300px;
     }
+
+    .modal-content h3 {
+      margin: 0 0 10px 0;
+      font-family: var(--display);
+      font-size: 14px;
+    }
+
+    .modal-content input[type="text"] {
+      width: 100%;
+      background: var(--panel2);
+      border: 1px solid var(--border);
+      color: var(--text);
+      padding: 8px;
+      margin-bottom: 10px;
+      font-family: var(--mono);
+      border-radius: var(--radius);
+    }
+
+    .modal-content button {
+      width: 100%;
+      margin-bottom: 5px;
+    }
+
+    .progress-bar {
+      width: 100%;
+      height: 4px;
+      background: var(--border);
+      border-radius: 2px;
+      margin-top: 8px;
+      overflow: hidden;
+    }
+
+    .progress-fill {
+      height: 100%;
+      background: var(--accent);
+      width: 0%;
+      transition: width 0.3s;
+    }
+
+    .color-presets {
+      display: flex;
+      gap: 4px;
+      flex-wrap: wrap;
+      margin-top: 4px;
+    }
+
+    .color-preset {
+      width: 20px;
+      height: 20px;
+      border-radius: 3px;
+      cursor: pointer;
+      border: 1px solid var(--border);
+    }
+
+    .color-preset:hover {
+      border-color: var(--accent);
+    }
+
+    .brush-preview {
+      width: 100%;
+      height: 40px;
+      background: var(--panel2);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 8px;
+    }
+
+    .brush-preview canvas {
+      border-radius: 50%;
+    }
+
+    .tool-options {
+      display: flex;
+      gap: 6px;
+      margin-bottom: 12px;
+    }
+
+    .tool-option-btn {
+      flex: 1;
+      padding: 6px;
+      font-size: 9px;
+    }
+
+    .tool-option-btn.active {
+      background: var(--accent);
+      color: #fff;
+      border-color: var(--accent);
+    }
+
+    .shortcut-hint {
+      position: absolute;
+      right: 5px;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 8px;
+      color: var(--muted);
+      font-family: var(--mono);
+    }
+
+    .status-text {
+      font-size: 9px;
+      color: var(--muted);
+      margin-top: 5px;
+      min-height: 12px;
+    }
+
+    .image-info {
+      display: flex;
+      gap: 10px;
+      font-size: 9px;
+      color: var(--muted);
+      margin-bottom: 10px;
+      padding: 6px;
+      background: var(--panel2);
+      border-radius: var(--radius);
+    }
+
+    .info-item {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .info-item span:first-child {
+      color: var(--text);
+      font-weight: 500;
+    }
   </style>
 </head>
 
@@ -575,9 +733,9 @@
     <div class="logo">perchance <span>//</span> img.edit</div>
     <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with anycoder</a>
     <div class="header-actions">
-      <button onclick="history.undo()" title="Undo (Ctrl+Z)"><phosphor-icon name="arrow-u-left"></phosphor-icon> Undo</button>
-      <button onclick="history.redo()" title="Redo (Ctrl+Y)"><phosphor-icon name="arrow-u-right"></phosphor-icon> Redo</button>
-      <button class="btn-primary" onclick="exportImage()" title="Export"><phosphor-icon name="download"></phosphor-icon> Export</button>
+      <button onclick="undo()" title="Undo (Ctrl+Z)"><i class="ph ph-arrow-u-up-left"></i> Undo</button>
+      <button onclick="redo()" title="Redo (Ctrl+Y)"><i class="ph ph-arrow-u-up-right"></i> Redo</button>
+      <button class="btn-primary" onclick="exportImage()" title="Export"><i class="ph ph-download"></i> Export</button>
     </div>
   </header>
 
@@ -589,29 +747,42 @@
       <div class="label-caps">Tools</div>
       <div class="tool-grid">
         <button class="tool-btn active" onclick="setTool('move')" title="Pan/Select">
-          <phosphor-icon name="cursor"></phosphor-icon> Move
+          <i class="ph ph-cursor"></i> Move
         </button>
         <button class="tool-btn" onclick="setTool('draw')" title="Brush">
-          <phosphor-icon name="brush"></phosphor-icon> Draw
+          <i class="ph ph-paint-brush"></i> Draw
         </button>
         <button class="tool-btn" onclick="setTool('erase')" title="Eraser">
-          <phosphor-icon name="eraser"></phosphor-icon> Erase
+          <i class="ph ph-eraser"></i> Erase
         </button>
         <button class="tool-btn" onclick="setTool('text')" title="Add Text">
-          <phosphor-icon name="text-t"></phosphor-icon> Text
+          <i class="ph ph-text-t"></i> Text
         </button>
         <button class="tool-btn" onclick="setTool('rect')" title="Rectangle">
-          <phosphor-icon name="rectangle"></phosphor-icon> Rect
+          <i class="ph ph-rectangle"></i> Rect
         </button>
-        <button class="tool-btn" onclick="flipH()" title="Flip Horizontal">
-          <phosphor-icon name="arrows-horizontal"></phosphor-icon> Flip
+        <button class="tool-btn" onclick="setTool('circle')" title="Circle">
+          <i class="ph ph-circle"></i> Circle
+        </button>
+        <button class="tool-btn" onclick="setTool('line')" title="Line">
+          <i class="ph ph-line-segment"></i> Line
+        </button>
+        <button class="tool-btn" onclick="setTool('fill')" title="Fill">
+          <i class="ph ph-drop"></i> Fill
         </button>
       </div>
 
-      <div class="label-caps">Properties</div>
+      <div class="label-caps">Brush Settings</div>
+      <div class="brush-preview">
+        <canvas id="brushPreview" width="30" height="30"></canvas>
+      </div>
       <div class="frow">
-        <div class="flabel"><span>Size</span><span class="fval" id="bSizeVal">5px</span></div>
-        <input type="range" id="brushSize" min="1" max="100" value="5" oninput="updateBrush()">
+        <div class="flabel"><span>Size</span><span class="fval" id="bSizeVal">10px</span></div>
+        <input type="range" id="brushSize" min="1" max="100" value="10" oninput="updateBrush()">
+      </div>
+      <div class="frow">
+        <div class="flabel"><span>Hardness</span><span class="fval" id="bHardVal">100%</span></div>
+        <input type="range" id="brushHardness" min="0" max="100" value="100" oninput="updateBrush()">
       </div>
       <div class="frow">
         <div class="flabel"><span>Opacity</span><span class="fval" id="bOpVal">100%</span></div>
@@ -619,56 +790,93 @@
       </div>
       <div class="frow">
         <div class="flabel"><span>Color</span></div>
-        <input type="color" id="brushColor" value="#ffffff" style="width:100%;height:30px;border:none;background:transparent;">
+        <input type="color" id="brushColor" value="#ffffff" oninput="updateBrush()">
+      </div>
+      <div class="color-presets">
+        <div class="color-preset" style="background:#fff" onclick="setColor('#ffffff')"></div>
+        <div class="color-preset" style="background:#000" onclick="setColor('#000000')"></div>
+        <div class="color-preset" style="background:#f76f6f" onclick="setColor('#f76f6f')"></div>
+        <div class="color-preset" style="background:#f7a26f" onclick="setColor('#f7a26f')"></div>
+        <div class="color-preset" style="background:#5de8a0" onclick="setColor('#5de8a0')"></div>
+        <div class="color-preset" style="background:#7c6ff7" onclick="setColor('#7c6ff7')"></div>
       </div>
+
+      <div class="label-caps">Text Settings</div>
       <div class="frow">
         <div class="flabel"><span>Font Size</span><span class="fval" id="fontSizeVal">24px</span></div>
-        <input type="range" id="fontSize" min="10" max="200" value="24" oninput="updateBrush()">
+        <input type="range" id="fontSize" min="10" max="200" value="24" oninput="updateTextSettings()">
+      </div>
+      <div class="frow">
+        <div class="flabel"><span>Font</span></div>
+        <select id="fontFamily" onchange="updateTextSettings()">
+          <option value="DM Mono">DM Mono</option>
+          <option value="Syne">Syne</option>
+          <option value="Arial">Arial</option>
+          <option value="Times New Roman">Times New Roman</option>
+          <option value="Courier New">Courier New</option>
+        </select>
+      </div>
+      <div class="frow">
+        <div class="flabel"><span>Style</span></div>
+        <select id="fontStyle" onchange="updateTextSettings()">
+          <option value="normal">Normal</option>
+          <option value="bold">Bold</option>
+          <option value="italic">Italic</option>
+        </select>
       </div>
-
     </div>
 
     <!-- CANVAS -->
     <div class="canvas-area" id="canvasArea" oncontextmenu="return false;">
       <div class="drop-zone" id="dropZone">
-        <div class="dz-ring"><phosphor-icon name="image"></phosphor-icon></div>
+        <div class="dz-ring"><i class="ph ph-image"></i></div>
         <div style="font-family:var(--display);font-weight:700;">Drop Image</div>
         <button class="btn-primary" onclick="document.getElementById('fileInput').click()">Browse Files</button>
       </div>
 
       <div class="canvas-centerer">
         <div class="canvas-wrap" id="canvasWrap">
-          <!-- Main Composite Canvas -->
           <canvas id="mainCanvas"></canvas>
         </div>
       </div>
 
       <div class="zoom-bar" id="zoomBar">
-        <button onclick="zoom(-0.1)">-</button>
+        <button onclick="zoomOut()">-</button>
         <span id="zoomLabel">100%</span>
-        <button onclick="zoom(0.1)">+</button>
+        <button onclick="zoomIn()">+</button>
         <button onclick="fitCanvas()">Fit</button>
+        <button onclick="zoom1()">1:1</button>
       </div>
     </div>
 
     <!-- RIGHT PANEL -->
     <div class="panel-right">
       <div class="tab-row">
-        <button class="tab active" onclick="switchTab('layers')" data-tooltip="Manage visibility & order">Layers</button>
-        <button class="tab" onclick="switchTab('adjust')" data-tooltip="Basic color correction">Adjust</button>
-        <button class="tab" onclick="switchTab('upscale')" data-tooltip="AI & Algorithmic Upscaling">Upscale</button>
-        <button class="tab" onclick="switchTab('bg')" data-tooltip="Remove backgrounds">Remove BG</button>
+        <button class="tab active" onclick="switchTab('layers')">Layers</button>
+        <button class="tab" onclick="switchTab('adjust')">Adjust</button>
+        <button class="tab" onclick="switchTab('upscale')">Upscale</button>
+        <button class="tab" onclick="switchTab('bg')">Remove BG</button>
+        <button class="tab" onclick="switchTab('crop')">Crop</button>
       </div>
 
       <!-- Layers Tab -->
       <div class="tab-panel active" id="tab-layers">
-        <div class="label-caps">Layer Stack</div>
-        <div style="margin-bottom:10px;">
-          <button class="btn-primary" style="width:100%" onclick="addNewLayer()">+ New Layer</button>
+        <div class="image-info" id="imageInfo" style="display:none;">
+          <div class="info-item">
+            <span>Width</span>
+            <span id="imgWidth">0px</span>
+          </div>
+          <div class="info-item">
+            <span>Height</span>
+            <span id="imgHeight">0px</span>
+          </div>
         </div>
-        <div class="layer-list" id="layerList">
-          <!-- Layers injected here -->
+        <div class="label-caps">Layer Stack</div>
+        <div style="margin-bottom:10px;display:flex;gap:6px;">
+          <button style="flex:1" onclick="addNewLayer()">+ New Layer</button>
+          <button onclick="duplicateLayer()"><i class="ph ph-copy"></i></button>
         </div>
+        <div class="layer-list" id="layerList"></div>
       </div>
 
       <!-- Adjust Tab -->
@@ -694,6 +902,10 @@
           <div class="flabel"><span>Hue Rotate</span><span class="fval" id="val-hue">0deg</span></div>
           <input type="range" id="hue" min="-180" max="180" value="0" oninput="applyFilters()">
         </div>
+        <div class="frow">
+          <div class="flabel"><span>Invert</span><span class="fval" id="val-invert">0%</span></div>
+          <input type="range" id="invert" min="0" max="100" value="0" oninput="applyFilters()">
+        </div>
         <div class="frow">
           <div class="flabel"><span>Presets</span></div>
           <select onchange="applyPreset(this.value)">
@@ -702,6 +914,9 @@
             <option value="cool">Cool Tone</option>
             <option value="bw">Black & White</option>
             <option value="vintage">Vintage</option>
+            <option value="sepia">Sepia</option>
+            <option value="vibrant">Vibrant</option>
+            <option value="dramatic">Dramatic</option>
           </select>
         </div>
         <button class="btn" style="width:100%" onclick="resetFilters()">Reset All</button>
@@ -739,17 +954,52 @@
         </div>
 
         <button class="btn-primary" style="width:100%" onclick="runUpscale()">Run Upscale</button>
-        <div id="upscaleStatus" style="font-size:9px;color:var(--muted);margin-top:5px;min-height:14px;"></div>
+        <div id="upscaleStatus" class="status-text"></div>
+        <div class="progress-bar" id="upscaleProgress" style="display:none;">
+          <div class="progress-fill" id="upscaleProgressFill"></div>
+        </div>
       </div>
 
       <!-- Remove BG Tab -->
       <div class="tab-panel" id="tab-bg">
         <div class="label-caps">Background Removal</div>
         <div class="ai-card">
-          <p>Uses @imgly/background-removal. Runs locally.</p>
+          <p>Uses @imgly/background-removal. Runs locally in browser.</p>
         </div>
         <button class="btn-primary" style="width:100%" onclick="removeBackground()">Remove Background</button>
-        <div id="bgStatus" style="font-size:9px;color:var(--muted);margin-top:5px;"></div>
+        <div id="bgStatus" class="status-text"></div>
+        <div class="progress-bar" id="bgProgress" style="display:none;">
+          <div class="progress-fill" id="bgProgressFill"></div>
+        </div>
+      </div>
+
+      <!-- Crop Tab -->
+      <div class="tab-panel" id="tab-crop">
+        <div class="label-caps">Crop & Transform</div>
+        <div class="frow">
+          <div class="flabel"><span>Width</span><span class="fval" id="cropW">0</span></div>
+          <input type="range" id="cropWidth" min="1" max="100" value="100" oninput="updateCropPreview()">
+        </div>
+        <div class="frow">
+          <div class="flabel"><span>Height</span><span class="fval" id="cropH">0</span></div>
+          <input type="range" id="cropHeight" min="1" max="100" value="100" oninput="updateCropPreview()">
+        </div>
+        <div class="tool-options">
+          <button class="tool-option-btn active" onclick="setCropAnchor('tl')">TL</button>
+          <button class="tool-option-btn" onclick="setCropAnchor('tc')">TC</button>
+          <button class="tool-option-btn" onclick="setCropAnchor('tr')">TR</button>
+          <button class="tool-option-btn" onclick="setCropAnchor('ml')">ML</button>
+          <button class="tool-option-btn" onclick="setCropAnchor('mc')">MC</button>
+          <button class="tool-option-btn" onclick="setCropAnchor('mr')">MR</button>
+          <button class="tool-option-btn" onclick="setCropAnchor('bl')">BL</button>
+          <button class="tool-option-btn" onclick="setCropAnchor('bc')">BC</button>
+          <button class="tool-option-btn" onclick="setCropAnchor('br')">BR</button>
+        </div>
+        <button class="btn-primary" style="width:100%" onclick="applyCrop()">Apply Crop</button>
+        <button style="width:100%;margin-top:8px;" onclick="rotateCanvas(-90)">Rotate -90°</button>
+        <button style="width:100%;margin-top:4px;" onclick="rotateCanvas(90)">Rotate +90°</button>
+        <button style="width:100%;margin-top:4px;" onclick="flipHorizontal()">Flip Horizontal</button>
+        <button style="width:100%;margin-top:4px;" onclick="flipVertical()">Flip Vertical</button>
       </div>
     </div>
   </div>
@@ -757,10 +1007,10 @@
   <!-- MODALS -->
   <div class="modal" id="textModal">
     <div class="modal-content">
-      <h3 style="margin:0 0 10px 0; font-family:var(--display)">Add Text</h3>
-      <input type="text" id="textInput" placeholder="Enter text..." style="width:100%; background:var(--panel2); border:1px solid var(--border); color:var(--text); padding:8px; margin-bottom:10px; font-family:var(--mono)">
-      <button class="btn-primary" style="width:100%" onclick="addTextToCanvas()">Add Text</button>
-      <button style="width:100%; margin-top:5px;" onclick="document.getElementById('textModal').style.display='none'; setTool('move')">Cancel</button>
+      <h3>Add Text</h3>
+      <input type="text" id="textInput" placeholder="Enter text...">
+      <button class="btn-primary" onclick="addTextToCanvas()">Add Text</button>
+      <button style="margin-top:5px;" onclick="closeModal('textModal'); setTool('move')">Cancel</button>
     </div>
   </div>
 
@@ -770,309 +1020,200 @@
   <script>
     // --- UTILS ---
     const getEl = id => document.getElementById(id);
-    const toast = msg => {
+    const toast = (msg, duration = 3000) => {
       const t = getEl('toast');
       t.textContent = msg;
       t.classList.add('on');
-      setTimeout(() => t.classList.remove('on'), 3000);
+      setTimeout(() => t.classList.remove('on'), duration);
     };
 
-    // --- HISTORY SYSTEM ---
+    // --- STATE ---
+    let layers = [];
+    let activeLayerId = null;
+    let zoomLevel = 1;
+    let panStart = null;
+    let panScroll = null;
+    let isPanning = false;
+    let currentTool = 'move';
+    let isDrawing = false;
+    let drawingLayer = null;
+    let shapeStart = null;
+    let lastPoint = null;
+    let cropAnchor = 'tl';
+
+    // --- HISTORY ---
     const history = {
       stack: [],
       pointer: -1,
+      maxSize: 50,
       push: function(state) {
-        this.stack.push(state);
-        this.pointer++;
+        if (this.pointer < this.stack.length - 1) {
+          this.stack = this.stack.slice(0, this.pointer + 1);
+        }
+        this.stack.push(JSON.stringify(state));
+        if (this.stack.length > this.maxSize) {
+          this.stack.shift();
+        }
+        this.pointer = this.stack.length - 1;
       },
       undo: function() {
         if (this.pointer > 0) {
           this.pointer--;
-          restoreState(this.stack[this.pointer]);
+          restoreState(JSON.parse(this.stack[this.pointer]));
           toast('Undo');
         }
       },
       redo: function() {
         if (this.pointer < this.stack.length - 1) {
           this.pointer++;
-          restoreState(this.stack[this.pointer]);
+          restoreState(JSON.parse(this.stack[this.pointer]));
           toast('Redo');
         }
       }
     };
 
     function saveState() {
-      // Save current layer stack data
       const state = layers.map(l => ({
         id: l.id,
         type: l.type,
-        data: l.canvas.toDataURL(),
-        x: l.x, y: l.y,
+        name: l.name,
+        data: l.canvas.toDataURL('image/png'),
+        x: l.x,
+        y: l.y,
         visible: l.visible,
-        opacity: l.opacity,
-        text: l.text
+        opacity: l.opacity
       }));
       history.push(state);
     }
 
     function restoreState(state) {
-      layers = state.map(l => {
-        const img = new Image();
-        img.src = l.data;
-        const canvas = document.createElement('canvas');
-        canvas.width = img.width;
-        canvas.height = img.height;
-        canvas.getContext('2d').drawImage(img, 0, 0);
-        
-        return {
-          id: l.id,
-          type: l.type,
-          canvas: canvas,
-          x: l.x, y: l.y,
-          visible: l.visible,
-          opacity: l.opacity,
-          text: l.text
-        };
+      const loadPromises = state.map(l => {
+        return new Promise((resolve) => {
+          const img = new Image();
+          img.onload = () => {
+            const canvas = document.createElement('canvas');
+            canvas.width = img.width;
+            canvas.height = img.height;
+            const ctx = canvas.getContext('2d');
+            ctx.drawImage(img, 0, 0);
+            resolve({
+              id: l.id,
+              type: l.type,
+              name: l.name,
+              canvas: canvas,
+              x: l.x,
+              y: l.y,
+              visible: l.visible,
+              opacity: l.opacity
+            });
+          };
+          img.src = l.data;
+        });
       });
-      renderLayers();
-      renderLayersList();
-      fitCanvas();
-    }
 
-    // --- STATE ---
-    let layers = []; // Array of layer objects
-    let activeLayerId = null;
-    let zoom = 1;
-    let panStart = null;
-    let panScroll = null;
-    let isPanning = false;
-    let currentTool = 'move';
-    let isDrawing = false;
-    let drawingLayer = null; // The layer currently being drawn on
-    let shapeStart = null; // For rectangle tool
+      Promise.all(loadPromises).then(loadedLayers => {
+        layers = loadedLayers;
+        activeLayerId = layers[0]?.id || null;
+        renderLayersList();
+        renderLayers();
+        updateImageInfo();
+      });
+    }
 
     // --- INIT ---
     function init() {
-      const wrap = getEl('canvasWrap');
       getEl('canvasArea').addEventListener('contextmenu', e => e.preventDefault());
 
-      // Pan Logic (Mouse)
-      getEl('canvasArea').addEventListener('mousedown', e => {
-        if (e.button === 1 || (currentTool === 'move' && e.button === 0)) {
-          e.preventDefault();
-          isPanning = true;
-          panStart = { x: e.clientX, y: e.clientY };
-          panScroll = { x: getEl('canvasArea').scrollLeft, y: getEl('canvasArea').scrollTop };
-          getEl('canvasArea').style.cursor = 'grabbing';
-        } else if (currentTool === 'draw' && activeLayerId) {
-          startDrawing(e);
-        } else if (currentTool === 'rect' && activeLayerId) {
-          startShape(e);
-        }
-      });
-
-      getEl('canvasArea').addEventListener('mousemove', e => {
-        if (isPanning && panStart && panScroll) {
-          getEl('canvasArea').scrollLeft = panScroll.x - (e.clientX - panStart.x);
-          getEl('canvasArea').scrollTop = panScroll.y - (e.clientY - panStart.y);
-        }
+      // Pan & Draw handlers
+      getEl('canvasArea').addEventListener('mousedown', handleMouseDown);
+      getEl('canvasArea').addEventListener('mousemove', handleMouseMove);
+      getEl('canvasArea').addEventListener('mouseup', handleMouseUp);
+      getEl('canvasArea').addEventListener('mouseleave', handleMouseUp);
 
-        if (currentTool === 'draw' && isDrawing && drawingLayer) {
-          const pt = getMousePos(drawingLayer.canvas, e);
-          const ctx = drawingLayer.canvas.getContext('2d');
-          ctx.lineTo(pt.x, pt.y);
-          ctx.stroke();
-        }
+      // Wheel zoom
+      getEl('canvasArea').addEventListener('wheel', handleWheel);
 
-        if (currentTool === 'rect' && isDrawing && drawingLayer) {
-           // Update preview rect
-           const ctx = drawingLayer.canvas.getContext('2d');
-           // Clear and redraw logic would be needed for a true preview, 
-           // but for simplicity we just draw directly here (destructive in this simple impl)
-           // A better way is to have a temp canvas, but we'll stick to direct drawing for this snippet size
-        }
-      });
-
-      getEl('canvasArea').addEventListener('mouseup', () => {
-        if (isPanning) {
-          isPanning = false;
-          panStart = null;
-          panScroll = null;
-          getEl('canvasArea').style.cursor = 'default';
-        }
-        if (isDrawing) {
-          isDrawing = false;
-          drawingLayer.canvas.getContext('2d').closePath();
-          saveState();
-          drawingLayer = null;
-        }
-        if (currentTool === 'rect' && shapeStart) {
-           // finalize shape
-           shapeStart = null;
-           saveState();
-           drawingLayer = null;
-        }
-      });
-
-      // Drop Zone
+      // Drop zone
       window.addEventListener('dragover', e => e.preventDefault());
       window.addEventListener('drop', e => {
         e.preventDefault();
         if (e.dataTransfer.files[0]) loadImage(e.dataTransfer.files[0]);
       });
 
-      // Keyboard shortcuts
-      window.addEventListener('keydown', e => {
-        if ((e.ctrlKey || e.metaKey) && e.key === 'z') history.undo();
-        if ((e.ctrlKey || e.metaKey) && e.key === 'y') history.redo();
-      });
+      // Keyboard
+      window.addEventListener('keydown', handleKeyDown);
 
       updateBrush();
       updateUpscaleInfo();
+      updateTextSettings();
     }
 
-    // --- LAYER SYSTEM ---
-    function addNewLayer() {
-      if (!layers.length) {
-        toast("Please load an image first");
-        return;
+    function handleMouseDown(e) {
+      if (e.button === 1 || (currentTool === 'move' && e.button === 0)) {
+        e.preventDefault();
+        isPanning = true;
+        panStart = { x: e.clientX, y: e.clientY };
+        panScroll = { x: getEl('canvasArea').scrollLeft, y: getEl('canvasArea').scrollTop };
+        getEl('canvasArea').style.cursor = 'grabbing';
+      } else if (e.button === 0 && activeLayerId) {
+        if (currentTool === 'draw' || currentTool === 'erase') {
+          startDrawing(e);
+        } else if (currentTool === 'rect' || currentTool === 'circle' || currentTool === 'line') {
+          startShape(e);
+        } else if (currentTool === 'fill') {
+          floodFill(e);
+        } else if (currentTool === 'text') {
+          showTextModal(e);
+        }
       }
-      const baseL = layers[0]; // Reference size
-      const newCanvas = document.createElement('canvas');
-      newCanvas.width = baseL.canvas.width;
-      newCanvas.height = baseL.canvas.height;
-      
-      const newLayer = {
-        id: Date.now(),
-        type: 'draw',
-        canvas: newCanvas,
-        x: 0, y: 0,
-        visible: true,
-        opacity: 1,
-        name: `Layer ${layers.length + 1}`
-      };
-      
-      layers.push(newLayer);
-      activeLayerId = newLayer.id;
-      renderLayersList();
-      renderLayers();
-      saveState();
-      toast('New Layer Added');
-    }
-
-    function renderLayersList() {
-      const list = getEl('layerList');
-      list.innerHTML = '';
-      
-      // Reverse to show top layer at top
-      [...layers].reverse().forEach((l, index) => {
-        const realIndex = layers.length - 1 - index;
-        const div = document.createElement('div');
-        div.className = `layer-item ${l.id === activeLayerId ? 'active' : ''}`;
-        div.onclick = () => { activeLayerId = l.id; renderLayersList(); renderLayers(); };
-        
-        // Thumbnail
-        const thumb = document.createElement('canvas');
-        thumb.className = 'layer-thumb';
-        thumb.width = 32; thumb.height = 32;
-        const tCtx = thumb.getContext('2d');
-        tCtx.drawImage(l.canvas, 0, 0, 32, 32);
-
-        div.innerHTML = `
-          <phosphor-icon name="eye" style="color:${l.visible ? 'var(--text)' : 'var(--muted)}" onclick="toggleLayerVisibility(${l.id})"></phosphor-icon>
-          <canvas width="32" height="32" class="layer-thumb"></canvas>
-          <div class="layer-info">
-            <div class="layer-name">${l.name || l.type}</div>
-            <div class="layer-controls">
-               <input type="range" min="0" max="1" step="0.1" value="${l.opacity}" style="width:40px" onchange="updateLayerOpacity(${l.id}, this.value)">
-               <button class="layer-btn" onclick="deleteLayer(${l.id})"><phosphor-icon name="trash"></phosphor-icon></button>
-            </div>
-          </div>
-        `;
-        
-        // Copy thumb content
-        const thumbCanvas = div.querySelector('canvas');
-        thumbCanvas.getContext('2d').drawImage(l.canvas, 0, 0, 32, 32);
-
-        list.appendChild(div);
-      });
     }
 
-    function toggleLayerVisibility(id) {
-      const l = layers.find(x => x.id === id);
-      if(l) {
-        l.visible = !l.visible;
-        renderLayersList();
-        renderLayers();
+    function handleMouseMove(e) {
+      if (isPanning && panStart && panScroll) {
+        getEl('canvasArea').scrollLeft = panScroll.x - (e.clientX - panStart.x);
+        getEl('canvasArea').scrollTop = panScroll.y - (e.clientY - panStart.y);
       }
-    }
 
-    function deleteLayer(id) {
-      layers = layers.filter(l => l.id !== id);
-      if(layers.length === 0) activeLayerId = null;
-      else activeLayerId = layers[0].id;
-      renderLayersList();
-      renderLayers();
-      saveState();
-    }
-
-    function updateLayerOpacity(id, val) {
-      const l = layers.find(x => x.id === id);
-      if(l) {
-        l.opacity = parseFloat(val);
+      if (isDrawing && drawingLayer) {
+        const pt = getMousePos(drawingLayer.canvas, e);
+        const ctx = drawingLayer.canvas.getContext('2d');
+        
+        if (currentTool === 'draw') {
+          ctx.lineCap = 'round';
+          ctx.lineJoin = 'round';
+          ctx.strokeStyle = getEl('brushColor').value;
+          ctx.lineWidth = getEl('brushSize').value;
+          ctx.globalAlpha = getEl('brushOpacity').value / 100;
+          
+          if (lastPoint) {
+            ctx.beginPath();
+            ctx.moveTo(lastPoint.x, lastPoint.y);
+            ctx.lineTo(pt.x, pt.y);
+            ctx.stroke();
+          }
+          lastPoint = pt;
+        } else if (currentTool === 'erase') {
+          ctx.globalCompositeOperation = 'destination-out';
+          ctx.lineCap = 'round';
+          ctx.lineJoin = 'round';
+          ctx.lineWidth = getEl('brushSize').value;
+          
+          if (lastPoint) {
+            ctx.beginPath();
+            ctx.moveTo(lastPoint.x, lastPoint.y);
+            ctx.lineTo(pt.x, pt.y);
+            ctx.stroke();
+          }
+          lastPoint = pt;
+          ctx.globalCompositeOperation = 'source-over';
+        }
         renderLayers();
       }
     }
 
-    function renderLayers() {
-      const main = getEl('mainCanvas');
-      if(layers.length === 0) return;
-
-      // Set main canvas size to match base layer
-      const base = layers[0];
-      main.width = base.canvas.width;
-      main.height = base.canvas.height;
-      const ctx = main.getContext('2d');
-      ctx.clearRect(0, 0, main.width, main.height);
-
-      // Apply global filters to context
-      const b = getEl('brightness').value;
-      const c = getEl('contrast').value;
-      const s = getEl('saturation').value;
-      const bl = getEl('blur').value;
-      const h = getEl('hue').value;
-      ctx.filter = `brightness(${1 + b/100}) contrast(${1 + c/100}) saturate(${1 + s/100}) blur(${bl}px) hue(${h}deg)`;
-
-      // Composite layers
-      layers.forEach(l => {
-        if(l.visible) {
-          ctx.globalAlpha = l.opacity;
-          ctx.drawImage(l.canvas, l.x, l.y);
-        }
-      });
-      ctx.globalAlpha = 1;
-    }
-
-    // --- CORE IMAGE LOGIC ---
-    function loadImage(file) {
-      const reader = new FileReader();
-      reader.onload = e => {
-        const img = new Image();
-        img.onload = () => {
-          getEl('dropZone').classList.add('hidden');
-          getEl('zoomBar').classList.add('on');
-
-          // Create Base Layer
-          const baseCanvas = document.createElement('canvas');
-          baseCanvas.width = img.width;
-          baseCanvas.height = img.height;
-          const ctx = baseCanvas.getContext('2d');
-          ctx.drawImage(img, 0, 0);
-
-          layers = [{
-            id: 'base',
-            type: 'base',
-            canvas: baseCanvas,
-            x: 0, y: 0,
-            visible: true,
-            opacity: 1,
+    function handleMouseUp() {
+      if (isPanning) {
+        isPanning = false;
+        panStart = null;
+        panScroll = null;
+        get