npm - @spark-apps/piclet - Versions diffs - 1.0.0 → 1.0.3 - Mend

@spark-apps/piclet 1.0.0 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/LICENSE +661 -21
package/{Readme.md → README.md} +31 -6
package/dist/cli.js +3027 -1191
package/dist/cli.js.map +1 -1
package/dist/gui/border.html +229 -0
package/dist/gui/css/theme.css +88 -88
package/dist/gui/extract-frames.html +156 -0
package/dist/gui/filter.html +180 -0
package/dist/gui/iconpack.html +113 -113
package/dist/gui/js/piclet.js +10 -1
package/dist/gui/loading.hta +8 -17
package/dist/gui/piclet.html +1529 -998
package/dist/gui/recolor.html +243 -0
package/dist/gui/remove-bg.html +178 -178
package/dist/gui/storepack.html +179 -179
package/dist/gui/transform.html +202 -0
package/package.json +2 -2

package/dist/gui/piclet.html CHANGED Viewed

@@ -1,998 +1,1529 @@
-<!DOCTYPE html>
-<html data-piclet data-width="540" data-height="960">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <title>PicLet</title>
-  <link rel="stylesheet" href="/css/theme.css">
-  <script src="/js/piclet.js"></script>
-  <style>
-    .app{display:flex;flex-direction:column;height:100%}
-    .main{display:flex;flex:1;gap:12px;overflow:hidden}
-    /* Left panel - Preview */
-    .preview-panel{flex:1;min-width:200px;display:flex;flex-direction:column;gap:8px}
-    .preview-area{flex:1;display:flex;align-items:center;justify-content:center;background:var(--bg2);border-radius:6px;overflow:auto;position:relative;min-height:180px;transition:border-color .2s}
-    .preview-area::before{content:'';position:absolute;inset:0;background:repeating-conic-gradient(#1a1a1d 0% 25%, #222 0% 50%) 50%/16px 16px;z-index:0}
-    .preview-area.dragover{border:2px dashed var(--acc);background:rgba(255,204,0,0.05)}
-    .preview-area img{max-width:100%;max-height:100%;object-fit:contain;position:relative;z-index:1;transform-origin:center;cursor:grab}
-    .preview-area img.panning{cursor:grabbing}
-    .preview-area .placeholder{position:relative;z-index:1;font-size:11px;color:var(--txt3);text-align:center;padding:12px}
-    .preview-area .mini-sp{width:20px;height:20px;border:2px solid var(--bg3);border-top-color:var(--acc);border-radius:50%;animation:s .5s linear infinite;position:relative;z-index:1}
-    .preview-info{font-size:10px;color:var(--txt3);text-align:center}
-    .preview-zoom{display:flex;align-items:center;justify-content:center;gap:4px}
-    .preview-zoom button{width:22px;height:22px;padding:0;font-size:14px;background:var(--bg2);border:1px solid var(--brd);border-radius:4px;color:var(--txt2);cursor:pointer;display:flex;align-items:center;justify-content:center}
-    .preview-zoom button:hover{border-color:var(--acc);color:var(--acc)}
-    .preview-zoom span{font-size:10px;color:var(--txt3);min-width:40px;text-align:center}
-    .load-btn{width:100%;padding:8px;font-size:11px;background:var(--bg2);border:1px dashed var(--brd);border-radius:6px;color:var(--txt3);cursor:pointer;transition:all .2s}
-    .load-btn:hover{border-color:var(--acc);color:var(--acc)}
-    /* Resizable divider */
-    .divider{width:6px;cursor:col-resize;background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin:0 -2px}
-    .divider:hover,.divider.dragging{background:var(--bg3)}
-    .divider::after{content:'';width:2px;height:40px;background:var(--brd);border-radius:1px;transition:background .2s}
-    .divider:hover::after,.divider.dragging::after{background:var(--acc)}
-    /* Right panel - Tools */
-    .tools-panel{width:300px;flex-shrink:0;display:flex;flex-direction:column;gap:6px;overflow-y:auto;padding-right:4px;align-self:flex-start;max-height:100%}
-    /* Tool sections */
-    .tool{background:var(--bg2);border-radius:6px;border:1px solid var(--brd);overflow:hidden}
-    .tool.disabled{opacity:0.35;pointer-events:none}
-    .tool.active{border-color:var(--acc)}
-    .tool-header{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;user-select:none}
-    .tool-header:hover{background:rgba(255,255,255,0.02)}
-    .tool-header img{width:18px;height:18px;opacity:0.7}
-    .tool.active .tool-header img{opacity:1}
-    .tool-header .name{flex:1;font-size:12px;color:var(--txt2)}
-    .tool.active .tool-header .name{color:var(--txt);font-weight:500}
-    .tool-header input[type="checkbox"]{display:none}
-    .tool-header .toggle{width:16px;height:16px;border:1.5px solid var(--brd);border-radius:4px;display:flex;align-items:center;justify-content:center}
-    .tool-header .toggle svg{width:10px;height:10px;fill:none;stroke:var(--acc);stroke-width:2.5;opacity:0}
-    .tool.active .tool-header .toggle{border-color:var(--acc);background:var(--acc)}
-    .tool.active .tool-header .toggle svg{opacity:1;stroke:#000}
-    .tool-body{display:none;padding:6px 10px 10px;border-top:1px solid var(--brd)}
-    .tool.active .tool-body{display:block}
-    #t-removebg .tool-body{min-height:70px}
-    #t-scale .tool-body{min-height:95px}
-    #t-icons .tool-body{min-height:85px}
-    #t-storepack .tool-body{min-height:170px}
-    /* Tool options */
-    .tool-opts{display:flex;flex-direction:column;gap:6px}
-    .tool-row{display:flex;align-items:center;gap:8px}
-    .tool-row label{font-size:10px;color:var(--txt3);width:55px;flex-shrink:0}
-    .tool-row input[type="number"]{width:45px;padding:4px 6px;font-size:11px}
-    .tool-row input[type="range"]{flex:1;height:4px}
-    .tool-row .val{width:45px;font-size:10px;color:var(--acc2);text-align:right}
-    .tool-row select{flex:1;padding:6px 8px;font-size:11px;background:var(--bg3);color:var(--txt);border:1px solid var(--brd);border-radius:4px;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M3 4l3 4 3-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;padding-right:24px}
-    .tool-row select:hover{border-color:var(--acc)}
-    .tool-row select:focus{outline:none;border-color:var(--acc)}
-    .tool-row select option{background:var(--bg2);color:var(--txt);padding:8px}
-    .tool-opts .opt{font-size:10px;padding:2px 0}
-    .tool-opts .opt .box{width:12px;height:12px}
-    .platforms{display:flex;gap:4px}
-    .platforms .opt{flex:1;padding:6px 8px;background:var(--bg3);border-radius:4px;font-size:10px;white-space:nowrap}
-    .platform-info{display:none}
-    /* Dimension list */
-    .dim-list{display:flex;flex-wrap:wrap;gap:4px;max-height:80px;overflow-y:auto;margin-bottom:6px}
-    .dim-item{display:flex;align-items:center;gap:4px;padding:3px 6px;background:var(--bg3);border-radius:4px;font-size:10px;color:var(--txt2)}
-    .dim-item .dim-x{color:var(--txt3);font-size:9px}
-    .dim-item .dim-rm{width:12px;height:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--txt3);border-radius:2px;margin-left:2px}
-    .dim-item .dim-rm:hover{background:rgba(255,100,100,0.2);color:#f66}
-    .dim-add{display:flex;align-items:center;gap:4px;margin-bottom:8px}
-    .dim-add input{width:50px;padding:4px 6px;font-size:10px;background:var(--bg3);border:1px solid var(--brd);border-radius:4px;color:var(--txt);-moz-appearance:textfield}
-    .dim-add input::-webkit-outer-spin-button,.dim-add input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
-    .dim-add span{color:var(--txt3);font-size:10px}
-    .dim-add-btn{width:22px;height:22px;padding:0;font-size:14px;background:var(--acc);border:none;border-radius:4px;color:#000;cursor:pointer;font-weight:bold}
-    .dim-add-btn:hover{background:var(--acc2)}
-    .preset-actions{display:flex;gap:4px}
-    .preset-actions input{flex:1;padding:5px 8px;font-size:10px;background:var(--bg3);border:1px solid var(--brd);border-radius:4px;color:var(--txt)}
-    .btn-sm{padding:5px 10px;font-size:10px;background:var(--bg3);border:1px solid var(--brd);border-radius:4px;color:var(--txt);cursor:pointer}
-    .btn-sm:hover{border-color:var(--acc);color:var(--acc)}
-    .btn-sm.btn-del{color:#a66}
-    .btn-sm.btn-del:hover{border-color:#c44;color:#c44}
-    /* Bottom bar */
-    .bottom-bar{display:flex;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--brd)}
-    .bottom-bar .btn{flex:1}
-    .apply-btn{background:var(--acc)!important;color:#000!important;font-weight:600}
-    .apply-btn:disabled{opacity:0.5;cursor:not-allowed}
-    /* Header branding */
-    .hd{flex-direction:column;align-items:flex-start;gap:2px;padding-bottom:10px}
-    .hd-top{display:flex;align-items:center;gap:8px;width:100%}
-    .hd-brand{display:flex;flex-direction:column}
-    .hd-title{display:flex;align-items:baseline;gap:6px}
-    .hd-title b{font-size:18px;background:linear-gradient(135deg,#eab308 0%,#fbbf24 50%,#f59e0b 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-0.5px}
-    .hd-subtitle{font-size:10px;color:var(--acc2);font-weight:600;text-transform:uppercase;letter-spacing:1px}
-    .hd-desc{font-size:10px;color:var(--txt3);margin-top:2px}
-    .hd-link{margin-left:auto;font-size:9px;color:var(--txt3);text-decoration:none;padding:4px 8px;background:var(--bg2);border:1px solid var(--brd);border-radius:4px;transition:all .2s}
-    .hd-link:hover{color:var(--acc);border-color:var(--acc);background:rgba(234,179,8,0.05)}
-    .hd-file{font-size:11px;color:var(--txt2);margin-top:4px;padding-top:6px;border-top:1px solid var(--brd);width:100%}
-    .hd-file span{color:var(--txt3)}
-    /* States */
-    .main.hide{display:none}
-    .bottom-bar.hide{display:none}
-    /* Themed alert modal */
-    .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity .2s}
-    .modal-overlay.on{opacity:1;pointer-events:auto}
-    .modal{background:var(--bg2);border:1px solid var(--brd);border-radius:8px;padding:16px 20px;min-width:200px;max-width:300px;text-align:center}
-    .modal-msg{font-size:12px;color:var(--txt);margin-bottom:12px}
-    .modal-btns{display:flex;gap:8px;justify-content:center}
-    .modal-btn{padding:6px 20px;font-size:11px;background:var(--acc);border:none;border-radius:4px;color:#000;cursor:pointer;font-weight:500}
-    .modal-btn:hover{background:var(--acc2)}
-    .modal-btn.danger{background:#c44;color:#fff}
-    .modal-btn.danger:hover{background:#a33}
-    .modal-btn.secondary{background:var(--bg3);color:var(--txt);border:1px solid var(--brd)}
-    .modal-btn.secondary:hover{border-color:var(--acc)}
-  </style>
-</head>
-<body>
-<div class="app">
-  <div class="hd">
-    <div class="hd-top">
-      <div class="hd-brand">
-        <div class="hd-title">
-          <b>PicLet</b>
-          <span class="hd-subtitle">Edit. Scale. Ship.</span>
-        </div>
-        <span class="hd-desc">Lightweight image tools for content creators</span>
-      </div>
-      <a href="https://piclet.app" class="hd-link" onclick="PicLet.shell('https://piclet.app');return false">piclet.app</a>
-    </div>
-    <div class="hd-file"><span>File:</span> <span id="fileName">-</span></div>
-  </div>
-  <div class="meta">
-    <div>Original<b id="origSize">-</b></div>
-    <div>Output<b id="outSize">-</b></div>
-  </div>
-  <!-- Main content -->
-  <div class="main" id="M">
-    <!-- Preview panel -->
-    <div class="preview-panel">
-      <div class="preview-area" id="pA">
-        <span class="placeholder">Enable tools to preview</span>
-      </div>
-      <div class="preview-info" id="pI"></div>
-      <div class="preview-zoom">
-        <button onclick="zoomOut()" title="Zoom out">−</button>
-        <span id="zoomLevel">100%</span>
-        <button onclick="zoomIn()" title="Zoom in">+</button>
-        <button onclick="zoomReset()" title="Reset zoom" style="font-size:10px;width:28px">Fit</button>
-      </div>
-      <button class="load-btn" onclick="loadNewImage()">Load Different Image...</button>
-      <input type="file" id="fileInput" accept=".png,.jpg,.jpeg,.gif,.bmp,.ico" style="display:none" onchange="handleFileSelect(event)">
-    </div>
-    <!-- Resizable divider -->
-    <div class="divider" id="divider"></div>
-    <!-- Tools panel -->
-    <div class="tools-panel">
-      <!-- Remove Background -->
-      <div class="tool" id="t-removebg" data-tool="removebg" data-ext=".png,.jpg,.jpeg,.ico">
-        <div class="tool-header" onclick="toggleTool('removebg')">
-          <img src="/icons/removebg.ico" alt="">
-          <span class="name">Remove Background</span>
-          <span class="toggle"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>
-        </div>
-        <div class="tool-body">
-          <div class="tool-opts">
-            <div class="tool-row">
-              <label>Tolerance</label>
-              <input type="range" id="rb-fuzz" min="0" max="100" value="10" oninput="$('rb-fuzzV').textContent=this.value+'%'" onchange="schedulePreview()">
-              <span class="val" id="rb-fuzzV">10%</span>
-            </div>
-            <label class="opt"><input type="checkbox" id="rb-trim" checked onchange="schedulePreview()"><span class="box"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>Auto-trim edges</label>
-            <label class="opt"><input type="checkbox" id="rb-edges" onchange="schedulePreview()"><span class="box"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>Border only (preserve inner)</label>
-          </div>
-        </div>
-      </div>
-      <!-- Scale Image -->
-      <div class="tool" id="t-scale" data-tool="scale" data-ext=".png,.jpg,.jpeg,.gif,.bmp,.ico">
-        <div class="tool-header" onclick="toggleTool('scale')">
-          <img src="/icons/rescale.ico" alt="">
-          <span class="name">Scale Image</span>
-          <span class="toggle"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>
-        </div>
-        <div class="tool-body">
-          <div class="tool-opts">
-            <div class="tool-row">
-              <label>Width</label>
-              <input type="range" id="sc-w" min="16" max="512" value="512" oninput="scaleSlide('w')" onchange="schedulePreview()">
-              <span class="val" id="sc-wV">512px</span>
-            </div>
-            <div class="tool-row" id="sc-hRow">
-              <label>Height</label>
-              <input type="range" id="sc-h" min="16" max="512" value="512" oninput="scaleSlide('h')" onchange="schedulePreview()">
-              <span class="val" id="sc-hV">512px</span>
-            </div>
-            <label class="opt"><input type="checkbox" id="sc-lock" onchange="toggleRatioLock()"><span class="box"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>Lock aspect ratio</label>
-            <label class="opt"><input type="checkbox" id="sc-sq" onchange="schedulePreview()"><span class="box"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>Square output (add padding)</label>
-          </div>
-        </div>
-      </div>
-      <!-- Generate Icons (combined ICO + Icon Pack) -->
-      <div class="tool" id="t-icons" data-tool="icons" data-ext=".png,.jpg,.jpeg,.ico">
-        <div class="tool-header" onclick="toggleTool('icons')">
-          <img src="/icons/iconpack.ico" alt="">
-          <span class="name">Generate Icons</span>
-          <span class="toggle"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>
-        </div>
-        <div class="tool-body">
-          <div class="tool-opts">
-            <label class="opt"><input type="checkbox" id="ic-trim" checked onchange="schedulePreview()"><span class="box"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>Auto-trim transparent edges</label>
-            <label class="opt"><input type="checkbox" id="ic-sq" checked onchange="schedulePreview()"><span class="box"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>Make square before generating</label>
-          </div>
-          <div style="font-size:9px;color:var(--txt3);margin:6px 0 4px;text-transform:uppercase">Output Formats</div>
-          <div class="platforms">
-            <label class="opt"><input type="checkbox" id="ic-ico" checked><span class="box"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>ICO</label>
-            <label class="opt"><input type="checkbox" id="ic-web"><span class="box"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>Web</label>
-            <label class="opt"><input type="checkbox" id="ic-android"><span class="box"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>Android</label>
-            <label class="opt"><input type="checkbox" id="ic-ios"><span class="box"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>iOS</label>
-          </div>
-        </div>
-      </div>
-      <!-- Generate Store Assets -->
-      <div class="tool" id="t-storepack" data-tool="storepack" data-ext=".png,.jpg,.jpeg">
-        <div class="tool-header" onclick="toggleTool('storepack')">
-          <img src="/icons/storepack.ico" alt="">
-          <span class="name">Generate Store Assets</span>
-          <span class="toggle"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>
-        </div>
-        <div class="tool-body">
-          <div class="tool-opts">
-            <div class="tool-row">
-              <label>Preset</label>
-              <select id="sp-preset" onchange="onPresetChange()"></select>
-            </div>
-            <div class="tool-row">
-              <label>Scale</label>
-              <select id="sp-mode">
-                <option value="fit">Fit (letterbox)</option>
-                <option value="fill">Fill (crop)</option>
-                <option value="stretch">Stretch</option>
-              </select>
-            </div>
-          </div>
-          <div style="font-size:9px;color:var(--txt3);margin:8px 0 4px;text-transform:uppercase">Output Sizes</div>
-          <div class="dim-list" id="sp-dims"></div>
-          <div class="dim-add">
-            <input type="number" id="sp-newW" placeholder="W" min="1" max="9999">
-            <span>×</span>
-            <input type="number" id="sp-newH" placeholder="H" min="1" max="9999">
-            <button class="dim-add-btn" onclick="addDimension()">+</button>
-          </div>
-          <div class="preset-actions">
-            <input type="text" id="sp-name" placeholder="Preset name...">
-            <button class="btn-sm" onclick="saveCurrentPreset()">Save</button>
-            <button class="btn-sm btn-del" onclick="deleteCurrentPreset()">Delete</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <!-- Bottom bar -->
-  <div class="bottom-bar" id="B">
-    <button class="btn btn-g" onclick="PicLet.close()">Close</button>
-    <button class="btn apply-btn" id="applyBtn" onclick="apply()" disabled>Apply</button>
-  </div>
-  <!-- Loading state -->
-  <div class="ld" id="L"><div class="sp"></div><span id="lT">Processing...</span></div>
-  <!-- Log -->
-  <div class="log" id="G"></div>
-  <!-- Done state -->
-  <div class="dn" id="D">
-    <h4 id="dT"></h4>
-    <p id="dM"></p>
-    <div class="btns" style="width:100%;margin-top:8px">
-      <button class="btn btn-g" onclick="reset()">Back</button>
-      <button class="btn btn-p" onclick="PicLet.close()">Done</button>
-    </div>
-  </div>
-</div>
-<!-- Themed alert/confirm modal -->
-<div class="modal-overlay" id="modal" onclick="hideModal(event)">
-  <div class="modal">
-    <div class="modal-msg" id="modalMsg"></div>
-    <div class="modal-btns" id="modalBtns">
-      <button class="modal-btn" onclick="hideModal()">OK</button>
-    </div>
-  </div>
-</div>
-<script>
-const { $, log, fetchJson, postJson } = PicLet;
-// Themed alert/confirm
-let modalCallback = null;
-function showAlert(msg) {
-  $('modalMsg').textContent = msg;
-  $('modalBtns').innerHTML = '<button class="modal-btn" onclick="hideModal()">OK</button>';
-  $('modal').classList.add('on');
-  modalCallback = null;
-}
-function showConfirm(msg, onConfirm, dangerText = 'Delete') {
-  $('modalMsg').textContent = msg;
-  $('modalBtns').innerHTML = `
-    <button class="modal-btn secondary" onclick="hideModal()">Cancel</button>
-    <button class="modal-btn danger" onclick="confirmModal()">${dangerText}</button>
-  `;
-  $('modal').classList.add('on');
-  modalCallback = onConfirm;
-}
-function hideModal(e) {
-  if (!e || e.target === $('modal')) {
-    $('modal').classList.remove('on');
-    modalCallback = null;
-  }
-}
-function confirmModal() {
-  $('modal').classList.remove('on');
-  if (modalCallback) modalCallback();
-  modalCallback = null;
-}
-const pA = $('pA'), pI = $('pI');
-// Zoom and pan state
-let zoomScale = 1;
-const ZOOM_MIN = 0.25;
-const ZOOM_MAX = 4;
-const ZOOM_STEP = 0.25;
-function updateZoom() {
-  const img = pA.querySelector('img');
-  if (img) {
-    img.style.transform = `scale(${zoomScale})`;
-    // Remove max constraints when zoomed in
-    if (zoomScale > 1) {
-      img.style.maxWidth = 'none';
-      img.style.maxHeight = 'none';
-    } else {
-      img.style.maxWidth = '100%';
-      img.style.maxHeight = '100%';
-    }
-  }
-  $('zoomLevel').textContent = Math.round(zoomScale * 100) + '%';
-}
-function zoomIn() {
-  zoomScale = Math.min(ZOOM_MAX, zoomScale + ZOOM_STEP);
-  updateZoom();
-}
-function zoomOut() {
-  zoomScale = Math.max(ZOOM_MIN, zoomScale - ZOOM_STEP);
-  updateZoom();
-}
-function zoomReset() {
-  zoomScale = 1;
-  pA.scrollLeft = 0;
-  pA.scrollTop = 0;
-  updateZoom();
-}
-// Mouse wheel zoom (no modifier key needed)
-pA.addEventListener('wheel', (e) => {
-  e.preventDefault();
-  if (e.deltaY < 0) zoomIn();
-  else zoomOut();
-}, { passive: false });
-// Mouse drag panning
-let isPanning = false;
-let panStart = { x: 0, y: 0 };
-let scrollStart = { x: 0, y: 0 };
-pA.addEventListener('mousedown', (e) => {
-  // Only pan on left click and if there's an image
-  if (e.button !== 0 || !pA.querySelector('img')) return;
-  isPanning = true;
-  panStart = { x: e.clientX, y: e.clientY };
-  scrollStart = { x: pA.scrollLeft, y: pA.scrollTop };
-  const img = pA.querySelector('img');
-  if (img) img.classList.add('panning');
-  e.preventDefault();
-});
-document.addEventListener('mousemove', (e) => {
-  if (!isPanning) return;
-  const dx = e.clientX - panStart.x;
-  const dy = e.clientY - panStart.y;
-  pA.scrollLeft = scrollStart.x - dx;
-  pA.scrollTop = scrollStart.y - dy;
-});
-document.addEventListener('mouseup', () => {
-  if (isPanning) {
-    isPanning = false;
-    const img = pA.querySelector('img');
-    if (img) img.classList.remove('panning');
-  }
-});
-let imageInfo = {};
-let previewTimeout = null;
-let activeTools = new Set();
-let presets = [];
-let currentDimensions = []; // Editable dimensions for storepack
-// Toggle tool active state
-function toggleTool(tool) {
-  const el = $('t-' + tool);
-  if (!el || el.classList.contains('disabled')) return;
-  if (activeTools.has(tool)) {
-    activeTools.delete(tool);
-    el.classList.remove('active');
-  } else {
-    activeTools.add(tool);
-    el.classList.add('active');
-  }
-  updateApplyButton();
-  schedulePreview();
-}
-// Update apply button state
-function updateApplyButton() {
-  $('applyBtn').disabled = activeTools.size === 0;
-}
-// Filter tools by file extension
-function filterTools(ext) {
-  document.querySelectorAll('.tool').forEach(el => {
-    const exts = el.dataset.ext.split(',');
-    el.classList.toggle('disabled', !exts.includes(ext));
-    if (!exts.includes(ext)) {
-      activeTools.delete(el.dataset.tool);
-      el.classList.remove('active');
-    }
-  });
-}
-// Scale slider update with aspect ratio lock
-let aspectRatio = 1;
-let scaleDebounce = null;
-function scaleSlide(dim) {
-  const locked = $('sc-lock').checked;
-  const w = $('sc-w'), h = $('sc-h');
-  if (locked) {
-    // When locked, only width slider is used - calculate height from ratio
-    const newW = +w.value;
-    const newH = Math.round(newW / aspectRatio);
-    h.value = Math.min(newH, +h.max);
-    $('sc-wV').textContent = newW + 'px';
-    $('sc-hV').textContent = h.value + 'px';
-  } else {
-    // Independent sliders
-    $('sc-' + dim + 'V').textContent = $('sc-' + dim).value + 'px';
-  }
-  // Debounced preview update while sliding
-  if (scaleDebounce) clearTimeout(scaleDebounce);
-  scaleDebounce = setTimeout(schedulePreview, 150);
-}
-function toggleRatioLock() {
-  const locked = $('sc-lock').checked;
-  $('sc-hRow').style.display = locked ? 'none' : 'flex';
-  if (locked) {
-    // Recalculate height based on current width and aspect ratio
-    const newH = Math.round(+$('sc-w').value / aspectRatio);
-    $('sc-h').value = Math.min(newH, +$('sc-h').max);
-    $('sc-hV').textContent = $('sc-h').value + 'px';
-  }
-  schedulePreview();
-}
-// Get combined options for all active tools
-function getOptions() {
-  const opts = { tools: Array.from(activeTools) };
-  if (activeTools.has('removebg')) {
-    opts.removebg = {
-      fuzz: +$('rb-fuzz').value,
-      trim: $('rb-trim').checked,
-      preserveInner: $('rb-edges').checked
-    };
-  }
-  if (activeTools.has('scale')) {
-    opts.scale = {
-      width: +$('sc-w').value,
-      height: +$('sc-h').value,
-      makeSquare: $('sc-sq').checked
-    };
-  }
-  if (activeTools.has('icons')) {
-    opts.icons = {
-      trim: $('ic-trim').checked,
-      makeSquare: $('ic-sq').checked,
-      ico: $('ic-ico').checked,
-      web: $('ic-web').checked,
-      android: $('ic-android').checked,
-      ios: $('ic-ios').checked
-    };
-  }
-  if (activeTools.has('storepack')) {
-    const presetSel = $('sp-preset');
-    const presetName = presetSel.value || $('sp-name').value.trim() || 'custom';
-    opts.storepack = {
-      dimensions: currentDimensions,
-      scaleMode: $('sp-mode').value,
-      presetName: presetName
-    };
-  }
-  return opts;
-}
-// Schedule preview
-function schedulePreview() {
-  if (previewTimeout) clearTimeout(previewTimeout);
-  previewTimeout = setTimeout(generatePreview, 300);
-}
-// Show original image
-async function showOriginal() {
-  pA.innerHTML = '<div class="mini-sp"></div>';
-  try {
-    const result = await postJson('/api/preview', { tools: [], original: true });
-    if (result.success && result.imageData) {
-      const img = document.createElement('img');
-      img.src = result.imageData;
-      pA.innerHTML = '';
-      pA.appendChild(img);
-      pI.textContent = `${imageInfo.width} × ${imageInfo.height}`;
-      updateZoom(); // Apply current zoom
-    }
-  } catch (e) {
-    pA.innerHTML = '<span class="placeholder">Failed to load image</span>';
-  }
-}
-// Generate preview
-async function generatePreview() {
-  if (activeTools.size === 0) {
-    showOriginal();
-    $('outSize').textContent = '-';
-    return;
-  }
-  // Icon pack and store pack don't have meaningful previews (icons does though - shows trimmed/squared source)
-  const previewableTools = ['removebg', 'scale', 'icons'];
-  const hasPreviewable = Array.from(activeTools).some(t => previewableTools.includes(t));
-  if (!hasPreviewable) {
-    showOriginal();
-    $('outSize').textContent = '(multiple files)';
-    return;
-  }
-  pA.innerHTML = '<div class="mini-sp"></div>';
-  pI.textContent = '';
-  try {
-    const result = await postJson('/api/preview', getOptions());
-    if (result.success && result.imageData) {
-      const img = document.createElement('img');
-      img.src = result.imageData;
-      pA.innerHTML = '';
-      pA.appendChild(img);
-      if (result.width && result.height) {
-        pI.textContent = `${result.width} × ${result.height}`;
-        $('outSize').textContent = `${result.width}×${result.height}`;
-      }
-      updateZoom(); // Apply current zoom
-    } else {
-      pA.innerHTML = '<span class="placeholder">' + (result.error || 'Preview failed') + '</span>';
-    }
-  } catch (e) {
-    pA.innerHTML = '<span class="placeholder">Preview error</span>';
-  }
-}
-// Load new image
-function loadNewImage() {
-  $('fileInput').click();
-}
-async function handleFileSelect(e) {
-  const file = e.target.files[0];
-  if (!file) return;
-  await loadImageFile(file);
-  e.target.value = '';
-}
-// Load image file (shared by file input and drag/drop)
-async function loadImageFile(file) {
-  const reader = new FileReader();
-  reader.onload = async () => {
-    try {
-      const base64 = reader.result.split(',')[1]; // Remove data URL prefix
-      const result = await postJson('/api/load', {
-        fileName: file.name,
-        data: base64,
-        mimeType: file.type
-      });
-      if (result.success) {
-        imageInfo = result;
-        updateImageInfo();
-        zoomReset(); // Reset zoom for new image
-        showOriginal();
-      } else {
-        showAlert('Failed to load image: ' + (result.error || 'Unknown error'));
-      }
-    } catch (err) {
-      showAlert('Failed to load image: ' + err.message);
-    }
-  };
-  reader.readAsDataURL(file);
-}
-// Drag and drop handlers (only for external file drops)
-function setupDragDrop() {
-  const area = pA;
-  area.addEventListener('dragenter', (e) => {
-    // Only respond to file drags from outside
-    if (e.dataTransfer?.types?.includes('Files')) {
-      e.preventDefault();
-      area.classList.add('dragover');
-    }
-  });
-  area.addEventListener('dragover', (e) => {
-    if (e.dataTransfer?.types?.includes('Files')) {
-      e.preventDefault();
-    }
-  });
-  area.addEventListener('dragleave', (e) => {
-    // Only remove if actually leaving the area
-    if (!area.contains(e.relatedTarget)) {
-      area.classList.remove('dragover');
-    }
-  });
-  area.addEventListener('drop', (e) => {
-    e.preventDefault();
-    area.classList.remove('dragover');
-    const files = e.dataTransfer?.files;
-    if (files && files.length > 0) {
-      const file = files[0];
-      // Check if it's an image
-      if (file.type.startsWith('image/') || /\.(png|jpg|jpeg|gif|bmp|ico)$/i.test(file.name)) {
-        loadImageFile(file);
-      }
-    }
-  });
-}
-// Update displayed image info
-function updateImageInfo() {
-  $('fileName').textContent = imageInfo.fileName;
-  $('origSize').textContent = imageInfo.width + '×' + imageInfo.height;
-  const ext = '.' + imageInfo.fileName.split('.').pop().toLowerCase();
-  filterTools(ext);
-  // Calculate aspect ratio
-  aspectRatio = imageInfo.width / imageInfo.height;
-  // Set scale sliders max to image dimensions (can't upscale)
-  $('sc-w').max = imageInfo.width;
-  $('sc-h').max = imageInfo.height;
-  $('sc-w').value = imageInfo.width;
-  $('sc-h').value = imageInfo.height;
-  $('sc-wV').textContent = imageInfo.width + 'px';
-  $('sc-hV').textContent = imageInfo.height + 'px';
-}
-// ── Store Assets Preset Management ──
-// Handle preset selection change
-function onPresetChange() {
-  const sel = $('sp-preset');
-  const preset = presets.find(p => p.id === sel.value);
-  console.log('Selected preset:', sel.value, preset);
-  if (preset && preset.icons && preset.icons.length > 0) {
-    currentDimensions = preset.icons.map(i => ({ width: i.width, height: i.height, filename: i.filename }));
-    $('sp-name').value = preset.name;
-    console.log('Loaded dimensions:', currentDimensions);
-  } else {
-    currentDimensions = [];
-    $('sp-name').value = sel.value ? (preset?.name || '') : '';
-  }
-  // Hide delete button for unsaved custom presets
-  document.querySelector('.btn-del').style.display = sel.value ? '' : 'none';
-  renderDimensions();
-}
-// Render dimension chips
-function renderDimensions() {
-  const container = $('sp-dims');
-  container.innerHTML = currentDimensions.map((d, i) =>
-    `<div class="dim-item"><span>${d.width}</span><span class="dim-x">×</span><span>${d.height}</span><span class="dim-rm" onclick="removeDimension(${i})">×</span></div>`
-  ).join('');
-}
-// Add a new dimension
-function addDimension() {
-  const w = +$('sp-newW').value;
-  const h = +$('sp-newH').value;
-  console.log('Adding dimension:', w, h);
-  if (w > 0 && h > 0) {
-    // Avoid duplicates
-    if (!currentDimensions.some(d => d.width === w && d.height === h)) {
-      currentDimensions.push({ width: w, height: h, filename: `${w}x${h}.png` });
-      console.log('Current dimensions:', currentDimensions);
-      renderDimensions();
-    }
-    $('sp-newW').value = '';
-    $('sp-newH').value = '';
-  } else {
-    console.log('Invalid dimensions - w or h not > 0');
-  }
-}
-// Remove a dimension
-function removeDimension(idx) {
-  currentDimensions.splice(idx, 1);
-  renderDimensions();
-}
-// Save current dimensions as preset
-async function saveCurrentPreset() {
-  console.log('Saving preset, currentDimensions:', currentDimensions);
-  const name = $('sp-name').value.trim();
-  if (!name) {
-    showAlert('Please enter a preset name');
-    return;
-  }
-  if (currentDimensions.length === 0) {
-    showAlert('Please add at least one dimension');
-    return;
-  }
-  // Use selected preset ID if editing, otherwise generate from name
-  const selectedId = $('sp-preset').value;
-  const id = selectedId || name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
-  const preset = {
-    id,
-    name,
-    description: 'Custom preset',
-    icons: currentDimensions.map(d => ({
-      filename: d.filename || `${d.width}x${d.height}.png`,
-      width: d.width,
-      height: d.height
-    }))
-  };
-  const btn = document.querySelector('.preset-actions .btn-sm');
-  btn.disabled = true;
-  btn.textContent = 'Saving...';
-  try {
-    const result = await postJson('/api/save-preset', preset);
-    if (result.success) {
-      // Update presets list and select the new one
-      const existing = presets.findIndex(p => p.id === id);
-      if (existing >= 0) {
-        presets[existing] = preset;
-      } else {
-        presets.push(preset);
-        const opt = document.createElement('option');
-        opt.value = id;
-        opt.textContent = name;
-        $('sp-preset').appendChild(opt);
-      }
-      $('sp-preset').value = id;
-      // Show delete button now that preset is saved
-      document.querySelector('.btn-del').style.display = '';
-      // Show success feedback
-      btn.textContent = 'Saved!';
-      btn.style.borderColor = '#4c6';
-      btn.style.color = '#4c6';
-      setTimeout(() => {
-        btn.textContent = 'Save Preset';
-        btn.style.borderColor = '';
-        btn.style.color = '';
-        btn.disabled = false;
-      }, 1500);
-    } else {
-      btn.textContent = 'Failed';
-      btn.style.borderColor = '#f66';
-      btn.style.color = '#f66';
-      setTimeout(() => {
-        btn.textContent = 'Save Preset';
-        btn.style.borderColor = '';
-        btn.style.color = '';
-        btn.disabled = false;
-      }, 1500);
-    }
-  } catch (e) {
-    btn.textContent = 'Error';
-    btn.style.borderColor = '#f66';
-    btn.style.color = '#f66';
-    setTimeout(() => {
-      btn.textContent = 'Save Preset';
-      btn.style.borderColor = '';
-      btn.style.color = '';
-      btn.disabled = false;
-    }, 1500);
-  }
-}
-// Delete current preset
-function deleteCurrentPreset() {
-  const selectedId = $('sp-preset').value;
-  if (!selectedId) {
-    showAlert('No preset selected to delete');
-    return;
-  }
-  const preset = presets.find(p => p.id === selectedId);
-  const presetName = preset?.name || selectedId;
-  showConfirm(`Delete preset "${presetName}"?\n\nThis cannot be undone.`, async () => {
-    try {
-      const result = await postJson('/api/delete-preset', { id: selectedId });
-      if (result.success) {
-        // Remove from local presets array
-        const idx = presets.findIndex(p => p.id === selectedId);
-        if (idx >= 0) presets.splice(idx, 1);
-        // Remove from dropdown and reset
-        const sel = $('sp-preset');
-        const opt = sel.querySelector(`option[value="${selectedId}"]`);
-        if (opt) opt.remove();
-        sel.value = '';
-        onPresetChange();
-        showAlert('Preset deleted');
-      } else {
-        showAlert('Failed to delete: ' + (result.error || 'Unknown error'));
-      }
-    } catch (e) {
-      showAlert('Failed to delete: ' + e.message);
-    }
-  });
-}
-// Apply all selected tools
-async function apply() {
-  if (activeTools.size === 0) return;
-  $('M').classList.add('hide');
-  $('B').classList.add('hide');
-  $('L').classList.add('on');
-  $('G').classList.add('on');
-  $('G').innerHTML = '';
-  const toolNames = Array.from(activeTools).map(t => {
-    const names = { removebg: 'Remove BG', scale: 'Scale', icons: 'Icons', storepack: 'Store Assets' };
-    return names[t] || t;
-  });
-  $('lT').textContent = toolNames.join(' → ') + '...';
-  try {
-    const result = await postJson('/api/process', getOptions());
-    if (result.logs) {
-      result.logs.forEach(l => log('G', l.type[0], l.message));
-    }
-    $('L').classList.remove('on');
-    $('D').classList.add('on', result.success ? 'ok' : 'err');
-    $('dT').textContent = result.success ? 'Done' : 'Failed';
-    $('dM').textContent = result.success ? result.output : result.error;
-  } catch (e) {
-    log('G', 'e', e.message);
-    $('L').classList.remove('on');
-    $('D').classList.add('on', 'err');
-    $('dT').textContent = 'Error';
-    $('dM').textContent = e.message;
-  }
-}
-// Reset to main view
-function reset() {
-  $('D').classList.remove('on', 'ok', 'err');
-  $('G').classList.remove('on');
-  $('M').classList.remove('hide');
-  $('B').classList.remove('hide');
-}
-// Init
-setupDragDrop();
-setupDivider();
-// Resizable divider
-function setupDivider() {
-  const divider = $('divider');
-  const toolsPanel = document.querySelector('.tools-panel');
-  const main = $('M');
-  let isDragging = false;
-  divider.addEventListener('mousedown', (e) => {
-    isDragging = true;
-    divider.classList.add('dragging');
-    document.body.style.cursor = 'col-resize';
-    document.body.style.userSelect = 'none';
-    e.preventDefault();
-  });
-  document.addEventListener('mousemove', (e) => {
-    if (!isDragging) return;
-    const mainRect = main.getBoundingClientRect();
-    // Tools width = distance from cursor to right edge
-    const toolsWidth = mainRect.right - e.clientX;
-    // Clamp: min 240px for tools, leave at least 150px for preview
-    const maxTools = mainRect.width - 150;
-    const clampedWidth = Math.max(240, Math.min(maxTools, toolsWidth));
-    toolsPanel.style.width = clampedWidth + 'px';
-  });
-  document.addEventListener('mouseup', () => {
-    if (isDragging) {
-      isDragging = false;
-      divider.classList.remove('dragging');
-      document.body.style.cursor = '';
-      document.body.style.userSelect = '';
-    }
-  });
-}
-fetchJson('/api/info').then(d => {
-  imageInfo = d;
-  updateImageInfo();
-  // Load presets for store pack (full preset data)
-  const presetData = d.defaults?.presets || d.presets || [];
-  console.log('Loaded presets:', presetData);
-  if (presetData.length > 0) {
-    presets = presetData;
-    const sel = $('sp-preset');
-    sel.innerHTML = '<option value="">Custom...</option>';
-    presets.forEach(p => {
-      const opt = document.createElement('option');
-      opt.value = p.id;
-      opt.textContent = p.name;
-      sel.appendChild(opt);
-    });
-  }
-  // Hide delete button initially (Custom... selected)
-  document.querySelector('.btn-del').style.display = 'none';
-  // Show original image immediately
-  showOriginal();
-});
-</script>
-</body>
-</html>
+<!DOCTYPE html>
+<html data-piclet data-width="560" data-height="960">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>PicLet</title>
+  <link rel="stylesheet" href="/css/theme.css">
+  <script src="/js/piclet.js"></script>
+  <style>
+    .app{display:flex;flex-direction:column;height:100%}
+    .main{display:flex;flex:1;gap:12px;overflow:hidden;margin-top:10px}
+    /* Left panel - Preview */
+    .preview-panel{flex:1;min-width:200px;display:flex;flex-direction:column;gap:8px}
+    .preview-area{flex:1;display:flex;align-items:center;justify-content:center;background:var(--bg2);border-radius:6px;overflow:auto;position:relative;min-height:180px;transition:border-color .2s}
+    .preview-area::before{content:'';position:absolute;inset:0;background:repeating-conic-gradient(#1a1a1d 0% 25%, #222 0% 50%) 50%/16px 16px;z-index:0}
+    .preview-area.dragover{border:2px dashed var(--acc);background:rgba(255,204,0,0.05)}
+    .preview-area img{max-width:100%;max-height:100%;object-fit:contain;position:relative;z-index:1;transform-origin:center;cursor:grab}
+    .preview-area img.panning{cursor:grabbing}
+    .preview-area .placeholder{position:relative;z-index:1;font-size:11px;color:var(--txt3);text-align:center;padding:12px}
+    .preview-area .mini-sp{width:20px;height:20px;border:2px solid var(--bg3);border-top-color:var(--acc);border-radius:50%;animation:s .5s linear infinite;position:relative;z-index:1}
+    .preview-info{font-size:10px;color:var(--txt3);text-align:center}
+    .preview-zoom{display:flex;align-items:center;justify-content:center;gap:4px}
+    .preview-zoom button{width:22px;height:22px;padding:0;font-size:14px;background:var(--bg2);border:1px solid var(--brd);border-radius:4px;color:var(--txt2);cursor:pointer;display:flex;align-items:center;justify-content:center}
+    .preview-zoom button:hover{border-color:var(--acc);color:var(--acc)}
+    .preview-zoom span{font-size:10px;color:var(--txt3);min-width:40px;text-align:center}
+    .preview-zoom .zoom-sep{width:1px;height:16px;background:var(--brd);margin:0 6px;min-width:1px}
+    .play-controls{display:none;align-items:center;gap:4px}
+    .play-controls.show{display:flex}
+    .play-controls button{width:26px;font-size:10px}
+    .play-controls button.playing{background:var(--acc);border-color:var(--acc);color:#000}
+    .play-controls select{padding:3px 4px;font-size:10px;background:var(--bg2);color:var(--txt2);border:1px solid var(--brd);border-radius:4px;cursor:pointer}
+    .play-controls select:hover{border-color:var(--acc)}
+    .load-btn{width:100%;padding:8px;font-size:11px;background:var(--bg2);border:1px dashed var(--brd);border-radius:6px;color:var(--txt3);cursor:pointer;transition:all .2s}
+    .load-btn:hover{border-color:var(--acc);color:var(--acc)}
+    /* Resizable divider */
+    .divider{width:6px;cursor:col-resize;background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin:0 -2px}
+    .divider:hover,.divider.dragging{background:var(--bg3)}
+    .divider::after{content:'';width:2px;height:40px;background:var(--brd);border-radius:1px;transition:background .2s}
+    .divider:hover::after,.divider.dragging::after{background:var(--acc)}
+    /* Right panel - Tools */
+    .tools-panel{width:300px;min-width:240px;flex-shrink:0;display:flex;flex-direction:column;gap:6px;overflow-y:auto;overflow-x:hidden;padding-right:4px;align-self:flex-start;max-height:100%;box-sizing:border-box}
+    /* Tool sections */
+    .tool{background:var(--bg2);border-radius:6px;border:1px solid var(--brd);overflow:hidden;min-width:0}
+    .tool.disabled{opacity:0.35;pointer-events:none}
+    .tool.active{border-color:var(--acc)}
+    .tool-header{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;user-select:none}
+    .tool-header:hover{background:rgba(255,255,255,0.02)}
+    .tool-header img{width:18px;height:18px;opacity:0.7}
+    .tool.active .tool-header img{opacity:1}
+    .tool-header .name{flex:1;font-size:12px;color:var(--txt2)}
+    .tool.active .tool-header .name{color:var(--txt);font-weight:500}
+    .tool-header input[type="checkbox"]{display:none}
+    .tool-header .toggle{width:16px;height:16px;border:1.5px solid var(--brd);border-radius:4px;display:flex;align-items:center;justify-content:center}
+    .tool-header .toggle svg{width:10px;height:10px;fill:none;stroke:var(--acc);stroke-width:2.5;opacity:0}
+    .tool.active .tool-header .toggle{border-color:var(--acc);background:var(--acc)}
+    .tool.active .tool-header .toggle svg{opacity:1;stroke:#000}
+    .tool-body{display:none;padding:6px 10px 10px;border-top:1px solid var(--brd);min-width:0;overflow:hidden}
+    .tool.active .tool-body{display:block}
+    #t-removebg .tool-body{min-height:70px}
+    #t-scale .tool-body{min-height:95px}
+    #t-icons .tool-body{min-height:85px}
+    #t-storepack .tool-body{min-height:170px}
+    /* Tool options */
+    .tool-opts{display:flex;flex-direction:column;gap:6px}
+    .tool-row{display:flex;align-items:center;gap:8px}
+    .tool-row label{font-size:10px;color:var(--txt3);width:55px;flex-shrink:0}
+    .tool-row input[type="number"]{width:45px;padding:4px 6px;font-size:11px}
+    .tool-row input[type="range"]{flex:1;height:4px}
+    .tool-row .val{width:45px;font-size:10px;color:var(--acc2);text-align:right}
+    .tool-row select{flex:1;padding:6px 8px;font-size:11px;background:var(--bg3);color:var(--txt);border:1px solid var(--brd);border-radius:4px;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M3 4l3 4 3-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;padding-right:24px}
+    .tool-row select:hover{border-color:var(--acc)}
+    .tool-row select:focus{outline:none;border-color:var(--acc)}
+    .tool-row select option{background:var(--bg2);color:var(--txt);padding:8px}
+    .tool-opts .opt{font-size:10px;padding:2px 0}
+    .tool-opts .opt .box{width:12px;height:12px}
+    .platforms{display:flex;gap:4px}
+    .platforms .opt{flex:1;padding:6px 8px;background:var(--bg3);border-radius:4px;font-size:10px;white-space:nowrap}
+    .platform-info{display:none}
+    /* Dimension list */
+    .dim-list{display:flex;flex-wrap:wrap;gap:4px;max-height:80px;overflow-y:auto;margin-bottom:6px}
+    .dim-item{display:flex;align-items:center;gap:4px;padding:3px 6px;background:var(--bg3);border-radius:4px;font-size:10px;color:var(--txt2)}
+    .dim-item .dim-x{color:var(--txt3);font-size:9px}
+    .dim-item .dim-rm{width:12px;height:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--txt3);border-radius:2px;margin-left:2px}
+    .dim-item .dim-rm:hover{background:rgba(255,100,100,0.2);color:#f66}
+    .dim-add{display:flex;align-items:center;gap:4px;margin-bottom:8px}
+    .dim-add input{width:50px;padding:4px 6px;font-size:10px;background:var(--bg3);border:1px solid var(--brd);border-radius:4px;color:var(--txt);-moz-appearance:textfield}
+    .dim-add input::-webkit-outer-spin-button,.dim-add input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
+    .dim-add span{color:var(--txt3);font-size:10px}
+    .dim-add-btn{width:22px;height:22px;padding:0;font-size:14px;background:var(--acc);border:none;border-radius:4px;color:#000;cursor:pointer;font-weight:bold}
+    .dim-add-btn:hover{background:var(--acc2)}
+    .preset-actions{display:flex;gap:4px}
+    .preset-actions input{flex:1;padding:5px 8px;font-size:10px;background:var(--bg3);border:1px solid var(--brd);border-radius:4px;color:var(--txt)}
+    .btn-sm{padding:5px 10px;font-size:10px;background:var(--bg3);border:1px solid var(--brd);border-radius:4px;color:var(--txt);cursor:pointer}
+    .btn-sm:hover{border-color:var(--acc);color:var(--acc)}
+    .btn-sm.btn-del{color:#a66}
+    .btn-sm.btn-del:hover{border-color:#c44;color:#c44}
+    /* Bottom bar */
+    .bottom-bar{display:flex;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--brd)}
+    .bottom-bar .btn{flex:1}
+    .apply-btn{background:var(--acc)!important;color:#000!important;font-weight:600}
+    .apply-btn:disabled{opacity:0.5;cursor:not-allowed}
+    /* Header branding */
+    .hd{flex-direction:column;align-items:stretch;gap:0;padding-bottom:8px;border-bottom:1px solid var(--brd);position:relative}
+    .hd-top{display:flex;align-items:center;gap:10px;width:100%}
+    .hd-brand{display:flex;flex-direction:column;gap:2px}
+    .hd-title{display:flex;align-items:baseline;gap:8px}
+    .hd-title b{font-size:20px;color:#eab308;letter-spacing:-0.5px;font-weight:700}
+    .hd-subtitle{font-size:9px;color:var(--acc);font-weight:600;text-transform:uppercase;letter-spacing:1.5px;opacity:0.9}
+    .hd-desc{font-size:10px;color:var(--txt3);margin-top:1px}
+    .hd-links{margin-left:auto;display:flex;gap:6px;align-items:center}
+    .hd-link{font-size:9px;color:var(--acc);text-decoration:none;padding:5px 10px;background:rgba(234,179,8,0.1);border:1px solid rgba(234,179,8,0.3);border-radius:4px;transition:all .2s;font-weight:500}
+    .hd-link:hover{color:#000;border-color:var(--acc);background:var(--acc)}
+    .hd-coffee{display:flex;align-items:center;gap:4px;font-size:9px;color:#ffdd00;text-decoration:none;padding:5px 8px;background:rgba(255,221,0,0.1);border:1px solid rgba(255,221,0,0.25);border-radius:4px;transition:all .2s;font-weight:500}
+    .hd-coffee:hover{color:#000;border-color:#ffdd00;background:#ffdd00}
+    .hd-coffee svg{width:12px;height:12px;fill:currentColor}
+    .hd-meta{display:flex;align-items:center;gap:12px;font-size:10px;color:var(--txt3);margin-top:8px;padding-top:8px;border-top:1px solid var(--brd);width:100%}
+    .hd-meta b{color:var(--txt2);font-weight:500;margin-left:3px}
+    /* States */
+    .main.hide{display:none}
+    .bottom-bar.hide{display:none}
+    /* Themed alert modal */
+    .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity .2s}
+    .modal-overlay.on{opacity:1;pointer-events:auto}
+    .modal{background:var(--bg2);border:1px solid var(--brd);border-radius:8px;padding:16px 20px;min-width:200px;max-width:300px;text-align:center}
+    .modal-msg{font-size:12px;color:var(--txt);margin-bottom:12px}
+    .modal-btns{display:flex;gap:8px;justify-content:center}
+    .modal-btn{padding:6px 20px;font-size:11px;background:var(--acc);border:none;border-radius:4px;color:#000;cursor:pointer;font-weight:500}
+    .modal-btn:hover{background:var(--acc2)}
+    .modal-btn.danger{background:#c44;color:#fff}
+    .modal-btn.danger:hover{background:#a33}
+    .modal-btn.secondary{background:var(--bg3);color:var(--txt);border:1px solid var(--brd)}
+    .modal-btn.secondary:hover{border-color:var(--acc)}
+    /* GIF Frame Strip - Left vertical panel */
+    .frame-panel{display:none;width:80px;min-width:60px;flex-shrink:0;flex-direction:column;gap:6px;background:var(--bg2);border-radius:6px;padding:8px;overflow:hidden}
+    .frame-panel.show{display:flex}
+    .frame-panel-header{font-size:9px;color:var(--txt3);text-align:center;padding-bottom:6px;border-bottom:1px solid var(--brd)}
+    .frame-panel-header b{color:var(--acc2);display:block;font-size:11px}
+    .frame-strip-scroll{display:flex;flex-direction:column;gap:4px;overflow-y:auto;flex:1;padding:4px 0;scrollbar-width:thin}
+    .frame-strip-scroll::-webkit-scrollbar{width:4px}
+    .frame-strip-scroll::-webkit-scrollbar-track{background:var(--bg3);border-radius:2px}
+    .frame-strip-scroll::-webkit-scrollbar-thumb{background:var(--brd);border-radius:2px}
+    .frame-strip-scroll::-webkit-scrollbar-thumb:hover{background:var(--txt3)}
+    .frame-thumb{flex-shrink:0;width:100%;aspect-ratio:1;border:2px solid var(--brd);border-radius:4px;overflow:hidden;cursor:pointer;position:relative;background:repeating-conic-gradient(#1a1a1d 0% 25%, #222 0% 50%) 50%/8px 8px}
+    .frame-thumb:hover{border-color:var(--txt3)}
+    .frame-thumb.selected{border-color:var(--acc)}
+    .frame-thumb img{width:100%;height:100%;object-fit:contain}
+    .frame-thumb .frame-num{position:absolute;bottom:1px;right:2px;font-size:8px;color:#fff;text-shadow:0 0 2px #000,0 0 2px #000}
+    .frame-thumb.processing::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center}
+    .frame-thumb.processing::before{content:'';position:absolute;top:50%;left:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border:2px solid var(--bg3);border-top-color:var(--acc);border-radius:50%;animation:s .5s linear infinite;z-index:1}
+    .gif-export-btn{display:none;width:100%;padding:8px 4px;font-size:10px;background:var(--acc);border:none;border-radius:4px;color:#000;cursor:pointer;font-weight:600;margin-top:6px}
+    .gif-export-btn.show{display:block}
+    .gif-export-btn:hover{background:var(--acc2)}
+    /* Export modal */
+    .export-modal{background:var(--bg2);border:1px solid var(--brd);border-radius:8px;padding:16px 20px;min-width:280px;max-width:320px}
+    .export-modal h3{font-size:14px;color:var(--txt);margin:0 0 12px;font-weight:600}
+    .export-options{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
+    .export-opt{display:flex;align-items:flex-start;gap:10px;padding:10px;background:var(--bg3);border:1px solid var(--brd);border-radius:6px;cursor:pointer;transition:all .2s}
+    .export-opt:hover{border-color:var(--txt3)}
+    .export-opt.selected{border-color:var(--acc);background:rgba(234,179,8,0.1)}
+    .export-opt input{display:none}
+    .export-opt .radio{width:16px;height:16px;border:2px solid var(--brd);border-radius:50%;flex-shrink:0;margin-top:2px;position:relative}
+    .export-opt.selected .radio{border-color:var(--acc)}
+    .export-opt.selected .radio::after{content:'';position:absolute;top:3px;left:3px;width:6px;height:6px;background:var(--acc);border-radius:50%}
+    .export-opt-content{flex:1;min-width:0}
+    .export-opt-title{font-size:12px;color:var(--txt);font-weight:500;margin-bottom:2px}
+    .export-opt-desc{font-size:10px;color:var(--txt3)}
+    .export-opt-thumb{width:40px;height:40px;border-radius:4px;overflow:hidden;flex-shrink:0;background:repeating-conic-gradient(#1a1a1d 0% 25%, #222 0% 50%) 50%/8px 8px}
+    .export-opt-thumb img{width:100%;height:100%;object-fit:contain}
+    .export-modal-btns{display:flex;gap:8px;justify-content:flex-end}
+    .export-modal-btns button{padding:8px 16px;font-size:11px;border-radius:4px;cursor:pointer;font-weight:500}
+    .export-modal-btns .cancel{background:var(--bg3);border:1px solid var(--brd);color:var(--txt)}
+    .export-modal-btns .cancel:hover{border-color:var(--acc)}
+    .export-modal-btns .confirm{background:var(--acc);border:none;color:#000}
+    .export-modal-btns .confirm:hover{background:var(--acc2)}
+    /* Left divider for frame panel */
+    .divider-left{display:none;width:6px;cursor:col-resize;background:transparent;align-items:center;justify-content:center;flex-shrink:0;margin:0 -2px}
+    .divider-left.show{display:flex}
+    .divider-left:hover,.divider-left.dragging{background:var(--bg3)}
+    .divider-left::after{content:'';width:2px;height:40px;background:var(--brd);border-radius:1px;transition:background .2s}
+    .divider-left:hover::after,.divider-left.dragging::after{background:var(--acc)}
+  </style>
+</head>
+<body>
+<div class="app">
+  <div class="hd">
+    <div class="hd-top">
+      <div class="hd-brand">
+        <div class="hd-title">
+          <b>PicLet</b>
+          <span class="hd-subtitle">Edit. Scale. Ship.</span>
+        </div>
+        <span class="hd-desc">Lightweight image tools for content creators</span>
+      </div>
+      <div class="hd-links">
+        <a href="https://buymeacoffee.com/spark88" class="hd-coffee" onclick="PicLet.openUrl('https://buymeacoffee.com/spark88');return false">
+          <svg viewBox="0 0 24 24"><path d="M20.216 6.415l-.132-.666c-.119-.598-.388-1.163-1.001-1.379-.197-.069-.42-.098-.57-.241-.152-.143-.196-.366-.231-.572-.065-.378-.125-.756-.192-1.133-.057-.325-.102-.69-.25-.987-.195-.4-.597-.634-.996-.788a5.723 5.723 0 00-.626-.194c-1-.263-2.05-.36-3.077-.416a25.834 25.834 0 00-3.7.062c-.915.083-1.88.184-2.75.5-.318.116-.646.256-.888.501-.297.302-.393.77-.177 1.146.154.267.415.456.692.58.36.162.737.284 1.123.366 1.075.238 2.189.331 3.287.37 1.218.05 2.437.01 3.65-.118.299-.033.598-.073.896-.119.352-.054.578-.513.474-.834-.124-.383-.457-.531-.834-.473-.466.074-.96.108-1.382.146-1.177.08-2.358.082-3.536.006a22.228 22.228 0 01-1.157-.107c-.086-.01-.18-.025-.258-.036-.243-.036-.484-.08-.724-.13-.111-.027-.111-.185 0-.212h.005c.277-.06.557-.108.838-.147h.002c.131-.009.263-.032.394-.048a25.076 25.076 0 013.426-.12c.674.019 1.347.067 2.017.144l.228.031c.267.04.533.088.798.145.392.085.895.113 1.07.542.055.137.08.288.111.431l.319 1.484a.237.237 0 01-.199.284h-.003c-.037.006-.075.01-.112.015a36.704 36.704 0 01-4.743.295 37.059 37.059 0 01-4.699-.304c-.14-.017-.293-.042-.417-.06-.326-.048-.649-.108-.973-.161-.393-.065-.768-.032-1.123.161-.29.16-.527.404-.675.701-.154.316-.199.66-.267 1-.069.34-.176.707-.135 1.056.087.753.613 1.365 1.37 1.502a39.69 39.69 0 0011.343.376.483.483 0 01.535.53l-.071.697-1.018 9.907c-.041.41-.047.832-.125 1.237-.122.637-.553 1.028-1.182 1.171-.577.131-1.165.2-1.756.205-.656.004-1.31-.025-1.966-.022-.699.004-1.556-.06-2.095-.58-.475-.458-.54-1.174-.605-1.793l-.731-7.013-.322-3.094c-.037-.351-.286-.695-.678-.678-.336.015-.718.3-.678.679l.228 2.185.949 9.112c.147 1.344 1.174 2.068 2.446 2.272.742.12 1.503.144 2.257.156.966.016 1.942.053 2.892-.122 1.408-.258 2.465-1.198 2.616-2.657.34-3.332.683-6.663 1.024-9.995l.215-2.087a.484.484 0 01.39-.426c.402-.078.787-.212 1.074-.518.455-.488.546-1.124.385-1.766zm-1.478.772c-.145.137-.363.201-.578.233-2.416.359-4.866.54-7.308.46-1.748-.06-3.477-.254-5.207-.498-.17-.024-.353-.055-.47-.18-.22-.236-.111-.71-.054-.995.052-.26.152-.609.463-.646.484-.057 1.046.148 1.526.22.577.088 1.156.159 1.737.212 2.48.226 5.002.19 7.472-.14.45-.06.899-.13 1.345-.21.399-.072.84-.206 1.08.206.166.281.188.657.162.974a.544.544 0 01-.169.364z"/></svg>
+          Donate
+        </a>
+        <a href="https://piclet.app" class="hd-link" onclick="PicLet.openUrl('https://piclet.app');return false">piclet.app</a>
+      </div>
+    </div>
+    <div class="hd-meta">
+      <div>File<b id="fileName">-</b></div>
+      <div>Original<b id="origSize">-</b></div>
+    </div>
+  </div>
+  <!-- Main content -->
+  <div class="main" id="M">
+    <!-- GIF Frame Panel (left) -->
+    <div class="frame-panel" id="framePanel">
+      <div class="frame-panel-header">
+        <b id="frameCount">0</b>
+        <span>Frames</span>
+      </div>
+      <div class="frame-strip-scroll" id="frameScroll"></div>
+      <button class="gif-export-btn" id="gifExportBtn" onclick="showExportModal()">Export</button>
+    </div>
+    <!-- Left divider (for frame panel) -->
+    <div class="divider-left" id="dividerLeft"></div>
+    <!-- Preview panel -->
+    <div class="preview-panel">
+      <div class="preview-area" id="pA">
+        <span class="placeholder">Enable tools to preview</span>
+      </div>
+      <div class="preview-info" id="pI"></div>
+      <div class="preview-zoom">
+        <button onclick="zoomOut()" title="Zoom out">−</button>
+        <span id="zoomLevel">100%</span>
+        <button onclick="zoomIn()" title="Zoom in">+</button>
+        <button id="fitBtn" onclick="zoomReset()" title="Reset zoom" style="font-size:10px;width:28px;display:none">Fit</button>
+        <span class="zoom-sep"></span>
+        <div class="play-controls" id="playControls">
+          <button id="playBtn" onclick="togglePlayback()" title="Play/Pause">▶</button>
+          <select id="playSpeed" onchange="setPlaySpeed(this.value)" title="Playback speed">
+            <option value="200">0.5×</option>
+            <option value="100" selected>1×</option>
+            <option value="50">2×</option>
+            <option value="33">3×</option>
+          </select>
+        </div>
+      </div>
+      <button class="load-btn" onclick="loadNewImage()">Load Different Image...</button>
+      <input type="file" id="fileInput" accept=".png,.jpg,.jpeg,.gif,.bmp,.ico" style="display:none" onchange="handleFileSelect(event)">
+    </div>
+    <!-- Resizable divider -->
+    <div class="divider" id="divider"></div>
+    <!-- Tools panel -->
+    <div class="tools-panel">
+      <!-- Remove Background -->
+      <div class="tool" id="t-removebg" data-tool="removebg" data-ext=".png,.jpg,.jpeg,.ico,.gif">
+        <div class="tool-header" onclick="toggleTool('removebg')">
+          <img src="/icons/removebg.ico" alt="">
+          <span class="name">Remove Background</span>
+          <span class="toggle"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>
+        </div>
+        <div class="tool-body">
+          <div class="tool-opts">
+            <div class="tool-row">
+              <label>Tolerance</label>
+              <input type="range" id="rb-fuzz" min="0" max="100" value="10" oninput="$('rb-fuzzV').textContent=this.value+'%'" onchange="schedulePreview()">
+              <span class="val" id="rb-fuzzV">10%</span>
+            </div>
+            <label class="opt"><input type="checkbox" id="rb-trim" checked onchange="schedulePreview()"><span class="box"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>Auto-trim edges</label>
+            <label class="opt"><input type="checkbox" id="rb-edges" onchange="schedulePreview()"><span class="box"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>Border only (preserve inner)</label>
+          </div>
+        </div>
+      </div>
+      <!-- Scale Image -->
+      <div class="tool" id="t-scale" data-tool="scale" data-ext=".png,.jpg,.jpeg,.gif,.bmp,.ico">
+        <div class="tool-header" onclick="toggleTool('scale')">
+          <img src="/icons/rescale.ico" alt="">
+          <span class="name">Scale Image</span>
+          <span class="toggle"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>
+        </div>
+        <div class="tool-body">
+          <div class="tool-opts">
+            <div class="tool-row">
+              <label>Width</label>
+              <input type="range" id="sc-w" min="16" max="512" value="512" oninput="scaleSlide('w')" onchange="schedulePreview()">
+              <span class="val" id="sc-wV">512px</span>
+            </div>
+            <div class="tool-row" id="sc-hRow">
+              <label>Height</label>
+              <input type="range" id="sc-h" min="16" max="512" value="512" oninput="scaleSlide('h')" onchange="schedulePreview()">
+              <span class="val" id="sc-hV">512px</span>
+            </div>
+            <label class="opt"><input type="checkbox" id="sc-lock" onchange="toggleRatioLock()"><span class="box"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>Lock aspect ratio</label>
+            <label class="opt"><input type="checkbox" id="sc-sq" onchange="schedulePreview()"><span class="box"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>Square output (add padding)</label>
+          </div>
+        </div>
+      </div>
+      <!-- Generate Icons (combined ICO + Icon Pack) -->
+      <div class="tool" id="t-icons" data-tool="icons" data-ext=".png,.jpg,.jpeg,.ico,.gif">
+        <div class="tool-header" onclick="toggleTool('icons')">
+          <img src="/icons/iconpack.ico" alt="">
+          <span class="name">Generate Icons</span>
+          <span class="toggle"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>
+        </div>
+        <div class="tool-body">
+          <div class="tool-opts">
+            <label class="opt"><input type="checkbox" id="ic-trim" checked onchange="schedulePreview()"><span class="box"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>Auto-trim transparent edges</label>
+            <label class="opt"><input type="checkbox" id="ic-sq" checked onchange="schedulePreview()"><span class="box"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>Make square before generating</label>
+          </div>
+          <div style="font-size:9px;color:var(--txt3);margin:6px 0 4px;text-transform:uppercase">Output Formats</div>
+          <div class="platforms">
+            <label class="opt"><input type="checkbox" id="ic-ico" checked><span class="box"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>ICO</label>
+            <label class="opt"><input type="checkbox" id="ic-web"><span class="box"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>Web</label>
+            <label class="opt"><input type="checkbox" id="ic-android"><span class="box"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>Android</label>
+            <label class="opt"><input type="checkbox" id="ic-ios"><span class="box"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>iOS</label>
+          </div>
+        </div>
+      </div>
+      <!-- Generate Store Assets -->
+      <div class="tool" id="t-storepack" data-tool="storepack" data-ext=".png,.jpg,.jpeg,.gif">
+        <div class="tool-header" onclick="toggleTool('storepack')">
+          <img src="/icons/storepack.ico" alt="">
+          <span class="name">Generate Store Assets</span>
+          <span class="toggle"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>
+        </div>
+        <div class="tool-body">
+          <div class="tool-opts">
+            <div class="tool-row">
+              <label>Preset</label>
+              <select id="sp-preset" onchange="onPresetChange()"></select>
+            </div>
+            <div class="tool-row">
+              <label>Scale</label>
+              <select id="sp-mode">
+                <option value="fit">Fit (letterbox)</option>
+                <option value="fill">Fill (crop)</option>
+                <option value="stretch">Stretch</option>
+              </select>
+            </div>
+          </div>
+          <div style="font-size:9px;color:var(--txt3);margin:8px 0 4px;text-transform:uppercase">Output Sizes</div>
+          <div class="dim-list" id="sp-dims"></div>
+          <div class="dim-add">
+            <input type="number" id="sp-newW" placeholder="W" min="1" max="9999">
+            <span>×</span>
+            <input type="number" id="sp-newH" placeholder="H" min="1" max="9999">
+            <button class="dim-add-btn" onclick="addDimension()">+</button>
+          </div>
+          <div class="preset-actions">
+            <input type="text" id="sp-name" placeholder="Preset name...">
+            <button class="btn-sm" onclick="saveCurrentPreset()">Save</button>
+            <button class="btn-sm btn-del" onclick="deleteCurrentPreset()">Delete</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Bottom bar -->
+  <div class="bottom-bar" id="B">
+    <button class="btn btn-g" onclick="tryClose()">Close</button>
+    <button class="btn apply-btn" id="applyBtn" onclick="apply()" disabled>Apply</button>
+  </div>
+  <!-- Loading state -->
+  <div class="ld" id="L"><div class="sp"></div><span id="lT">Processing...</span></div>
+  <!-- Log -->
+  <div class="log" id="G"></div>
+  <!-- Done state -->
+  <div class="dn" id="D">
+    <h4 id="dT"></h4>
+    <p id="dM"></p>
+    <div class="btns" style="width:100%;margin-top:8px">
+      <button class="btn btn-g" onclick="reset()">Back</button>
+      <button class="btn" onclick="openOutputFolder()" id="openFolderBtn" style="display:none">Open Folder</button>
+      <button class="btn btn-p" onclick="PicLet.close()">Done</button>
+    </div>
+  </div>
+</div>
+<!-- Themed alert/confirm modal -->
+<div class="modal-overlay" id="modal" onclick="hideModal(event)">
+  <div class="modal">
+    <div class="modal-msg" id="modalMsg"></div>
+    <div class="modal-btns" id="modalBtns">
+      <button class="modal-btn" onclick="hideModal()">OK</button>
+    </div>
+  </div>
+</div>
+<!-- Export modal -->
+<div class="modal-overlay" id="exportModal" onclick="hideExportModal(event)">
+  <div class="export-modal" onclick="event.stopPropagation()">
+    <h3>Export GIF</h3>
+    <div class="export-options">
+      <label class="export-opt selected" onclick="selectExportOption('frame')">
+        <input type="radio" name="exportType" value="frame" checked>
+        <span class="radio"></span>
+        <div class="export-opt-content">
+          <div class="export-opt-title">Current Frame</div>
+          <div class="export-opt-desc">Save frame <span id="exportFrameNum">1</span> as PNG</div>
+        </div>
+        <div class="export-opt-thumb" id="exportThumb"></div>
+      </label>
+      <label class="export-opt" onclick="selectExportOption('all-frames')">
+        <input type="radio" name="exportType" value="all-frames">
+        <span class="radio"></span>
+        <div class="export-opt-content">
+          <div class="export-opt-title">All Frames (ZIP)</div>
+          <div class="export-opt-desc">Save all <span id="exportTotalFrames">0</span> frames as PNG in a ZIP file</div>
+        </div>
+      </label>
+      <label class="export-opt" onclick="selectExportOption('gif')">
+        <input type="radio" name="exportType" value="gif">
+        <span class="radio"></span>
+        <div class="export-opt-content">
+          <div class="export-opt-title">Processed GIF</div>
+          <div class="export-opt-desc">Save as animated GIF with all effects applied</div>
+        </div>
+      </label>
+    </div>
+    <div class="export-modal-btns">
+      <button class="cancel" onclick="hideExportModal()">Cancel</button>
+      <button class="confirm" onclick="confirmExport()">Export</button>
+    </div>
+  </div>
+</div>
+<script>
+const { $, log, fetchJson, postJson } = PicLet;
+// Themed alert/confirm
+let modalCallback = null;
+function showAlert(msg) {
+  $('modalMsg').textContent = msg;
+  $('modalBtns').innerHTML = '<button class="modal-btn" onclick="hideModal()">OK</button>';
+  $('modal').classList.add('on');
+  modalCallback = null;
+}
+function showConfirm(msg, onConfirm, dangerText = 'Delete') {
+  $('modalMsg').textContent = msg;
+  $('modalBtns').innerHTML = `
+    <button class="modal-btn secondary" onclick="hideModal()">Cancel</button>
+    <button class="modal-btn danger" onclick="confirmModal()">${dangerText}</button>
+  `;
+  $('modal').classList.add('on');
+  modalCallback = onConfirm;
+}
+function hideModal(e) {
+  if (!e || e.target === $('modal')) {
+    $('modal').classList.remove('on');
+    modalCallback = null;
+  }
+}
+function confirmModal() {
+  $('modal').classList.remove('on');
+  if (modalCallback) modalCallback();
+  modalCallback = null;
+}
+const pA = $('pA'), pI = $('pI');
+// Zoom and pan state
+let zoomScale = 1;
+const ZOOM_MIN = 0.25;
+const ZOOM_MAX = 4;
+const ZOOM_STEP = 0.25;
+function updateZoom() {
+  const img = pA.querySelector('img');
+  if (img) {
+    img.style.transform = `scale(${zoomScale})`;
+    // Remove max constraints when zoomed in
+    if (zoomScale > 1) {
+      img.style.maxWidth = 'none';
+      img.style.maxHeight = 'none';
+    } else {
+      img.style.maxWidth = '100%';
+      img.style.maxHeight = '100%';
+    }
+  }
+  $('zoomLevel').textContent = Math.round(zoomScale * 100) + '%';
+  // Show Fit button only when zoomed in or out
+  $('fitBtn').style.display = zoomScale !== 1 ? '' : 'none';
+}
+function zoomIn() {
+  zoomScale = Math.min(ZOOM_MAX, zoomScale + ZOOM_STEP);
+  updateZoom();
+}
+function zoomOut() {
+  zoomScale = Math.max(ZOOM_MIN, zoomScale - ZOOM_STEP);
+  updateZoom();
+}
+function zoomReset() {
+  zoomScale = 1;
+  pA.scrollLeft = 0;
+  pA.scrollTop = 0;
+  updateZoom();
+}
+// Mouse wheel zoom (no modifier key needed)
+pA.addEventListener('wheel', (e) => {
+  e.preventDefault();
+  if (e.deltaY < 0) zoomIn();
+  else zoomOut();
+}, { passive: false });
+// Mouse drag panning
+let isPanning = false;
+let panStart = { x: 0, y: 0 };
+let scrollStart = { x: 0, y: 0 };
+pA.addEventListener('mousedown', (e) => {
+  // Only pan on left click and if there's an image
+  if (e.button !== 0 || !pA.querySelector('img')) return;
+  isPanning = true;
+  panStart = { x: e.clientX, y: e.clientY };
+  scrollStart = { x: pA.scrollLeft, y: pA.scrollTop };
+  const img = pA.querySelector('img');
+  if (img) img.classList.add('panning');
+  e.preventDefault();
+});
+document.addEventListener('mousemove', (e) => {
+  if (!isPanning) return;
+  const dx = e.clientX - panStart.x;
+  const dy = e.clientY - panStart.y;
+  pA.scrollLeft = scrollStart.x - dx;
+  pA.scrollTop = scrollStart.y - dy;
+});
+document.addEventListener('mouseup', () => {
+  if (isPanning) {
+    isPanning = false;
+    const img = pA.querySelector('img');
+    if (img) img.classList.remove('panning');
+  }
+});
+let imageInfo = {};
+let previewTimeout = null;
+let activeTools = new Set();
+let lastOutputSuccess = false;
+let hasChanges = false;
+let presets = [];
+let currentDimensions = []; // Editable dimensions for storepack
+// GIF frame state
+let isGifFile = false;
+let gifFrames = []; // Array of { index, thumbnail (base64) }
+let selectedFrameIndex = 0;
+let framePreviewCache = {}; // Cache processed frame previews
+// Toggle tool active state
+function toggleTool(tool) {
+  const el = $('t-' + tool);
+  if (!el || el.classList.contains('disabled')) return;
+  if (activeTools.has(tool)) {
+    activeTools.delete(tool);
+    el.classList.remove('active');
+  } else {
+    activeTools.add(tool);
+    el.classList.add('active');
+    hasChanges = true;
+  }
+  updateApplyButton();
+  schedulePreview();
+}
+// Update apply button state
+function updateApplyButton() {
+  $('applyBtn').disabled = activeTools.size === 0;
+}
+// Filter tools by file extension
+function filterTools(ext) {
+  document.querySelectorAll('.tool').forEach(el => {
+    const exts = el.dataset.ext.split(',');
+    el.classList.toggle('disabled', !exts.includes(ext));
+    if (!exts.includes(ext)) {
+      activeTools.delete(el.dataset.tool);
+      el.classList.remove('active');
+    }
+  });
+}
+// Scale slider update with aspect ratio lock
+let aspectRatio = 1;
+let scaleDebounce = null;
+function scaleSlide(dim) {
+  const locked = $('sc-lock').checked;
+  const w = $('sc-w'), h = $('sc-h');
+  if (locked) {
+    // When locked, only width slider is used - calculate height from ratio
+    const newW = +w.value;
+    const newH = Math.round(newW / aspectRatio);
+    h.value = Math.min(newH, +h.max);
+    $('sc-wV').textContent = newW + 'px';
+    $('sc-hV').textContent = h.value + 'px';
+  } else {
+    // Independent sliders
+    $('sc-' + dim + 'V').textContent = $('sc-' + dim).value + 'px';
+  }
+  // Debounced preview update while sliding
+  if (scaleDebounce) clearTimeout(scaleDebounce);
+  scaleDebounce = setTimeout(schedulePreview, 150);
+}
+function toggleRatioLock() {
+  const locked = $('sc-lock').checked;
+  $('sc-hRow').style.display = locked ? 'none' : 'flex';
+  if (locked) {
+    // Recalculate height based on current width and aspect ratio
+    const newH = Math.round(+$('sc-w').value / aspectRatio);
+    $('sc-h').value = Math.min(newH, +$('sc-h').max);
+    $('sc-hV').textContent = $('sc-h').value + 'px';
+  }
+  schedulePreview();
+}
+// Get combined options for all active tools
+function getOptions() {
+  const opts = { tools: Array.from(activeTools) };
+  if (activeTools.has('removebg')) {
+    opts.removebg = {
+      fuzz: +$('rb-fuzz').value,
+      trim: $('rb-trim').checked,
+      preserveInner: $('rb-edges').checked
+    };
+  }
+  if (activeTools.has('scale')) {
+    opts.scale = {
+      width: +$('sc-w').value,
+      height: +$('sc-h').value,
+      makeSquare: $('sc-sq').checked
+    };
+  }
+  if (activeTools.has('icons')) {
+    opts.icons = {
+      trim: $('ic-trim').checked,
+      makeSquare: $('ic-sq').checked,
+      ico: $('ic-ico').checked,
+      web: $('ic-web').checked,
+      android: $('ic-android').checked,
+      ios: $('ic-ios').checked
+    };
+  }
+  if (activeTools.has('storepack')) {
+    const presetSel = $('sp-preset');
+    const presetName = presetSel.value || $('sp-name').value.trim() || 'custom';
+    opts.storepack = {
+      dimensions: currentDimensions,
+      scaleMode: $('sp-mode').value,
+      presetName: presetName
+    };
+  }
+  return opts;
+}
+// Schedule preview
+function schedulePreview() {
+  if (previewTimeout) clearTimeout(previewTimeout);
+  previewTimeout = setTimeout(generatePreview, 300);
+}
+// Show original image
+async function showOriginal() {
+  // For GIFs with frames loaded, show selected frame directly
+  if (isGifFile && gifFrames.length > 0 && gifFrames[selectedFrameIndex]) {
+    const frame = gifFrames[selectedFrameIndex];
+    pA.innerHTML = '';
+    const img = document.createElement('img');
+    img.src = frame.thumbnail;
+    pA.appendChild(img);
+    pI.textContent = `${imageInfo.width} × ${imageInfo.height} (Frame ${selectedFrameIndex + 1} of ${imageInfo.frameCount})`;
+    updateZoom();
+    return;
+  }
+  pA.innerHTML = '<div class="mini-sp"></div>';
+  try {
+    const opts = { tools: [], original: true };
+    if (isGifFile) {
+      opts.frameIndex = selectedFrameIndex;
+    }
+    const result = await postJson('/api/preview', opts);
+    if (result.success && result.imageData) {
+      const img = document.createElement('img');
+      img.src = result.imageData;
+      pA.innerHTML = '';
+      pA.appendChild(img);
+      const frameInfo = isGifFile && imageInfo.frameCount > 1 ? ` (Frame ${selectedFrameIndex + 1} of ${imageInfo.frameCount})` : '';
+      pI.textContent = `${imageInfo.width} × ${imageInfo.height}${frameInfo}`;
+      updateZoom(); // Apply current zoom
+    }
+  } catch (e) {
+    pA.innerHTML = '<span class="placeholder">Failed to load image</span>';
+  }
+}
+// Generate preview
+async function generatePreview() {
+  if (activeTools.size === 0) {
+    showOriginal();
+    // Reset frame thumbnails to original if GIF
+    if (isGifFile && gifFrames.length > 0) {
+      updateFramePreviews();
+    }
+    return;
+  }
+  // Icon pack and store pack don't have meaningful previews (icons does though - shows trimmed/squared source)
+  const previewableTools = ['removebg', 'scale', 'icons'];
+  const hasPreviewable = Array.from(activeTools).some(t => previewableTools.includes(t));
+  if (!hasPreviewable) {
+    showOriginal();
+    return;
+  }
+  pA.innerHTML = '<div class="mini-sp"></div>';
+  pI.textContent = '';
+  try {
+    // For GIFs, preview the selected frame
+    const opts = getOptions();
+    if (isGifFile) {
+      opts.frameIndex = selectedFrameIndex;
+    }
+    const result = await postJson('/api/preview', opts);
+    if (result.success && result.imageData) {
+      const img = document.createElement('img');
+      img.src = result.imageData;
+      pA.innerHTML = '';
+      pA.appendChild(img);
+      if (result.width && result.height) {
+        const frameInfo = isGifFile ? ` (Frame ${selectedFrameIndex + 1})` : '';
+        pI.textContent = `${result.width} × ${result.height}${frameInfo}`;
+      }
+      updateZoom(); // Apply current zoom
+    } else {
+      pA.innerHTML = '<span class="placeholder">' + (result.error || 'Preview failed') + '</span>';
+    }
+    // Update all frame thumbnails for GIFs (in background)
+    if (isGifFile && gifFrames.length > 0) {
+      updateFramePreviews();
+    }
+  } catch (e) {
+    pA.innerHTML = '<span class="placeholder">Preview error</span>';
+  }
+}
+// Load new image
+function loadNewImage() {
+  $('fileInput').click();
+}
+async function handleFileSelect(e) {
+  const file = e.target.files[0];
+  if (!file) return;
+  await loadImageFile(file);
+  e.target.value = '';
+}
+// Load image file (shared by file input and drag/drop)
+async function loadImageFile(file) {
+  const reader = new FileReader();
+  reader.onload = async () => {
+    try {
+      const base64 = reader.result.split(',')[1]; // Remove data URL prefix
+      const result = await postJson('/api/load', {
+        fileName: file.name,
+        data: base64,
+        mimeType: file.type
+      });
+      if (result.success) {
+        imageInfo = result;
+        updateImageInfo();
+        zoomReset(); // Reset zoom for new image
+        showOriginal();
+      } else {
+        showAlert('Failed to load image: ' + (result.error || 'Unknown error'));
+      }
+    } catch (err) {
+      showAlert('Failed to load image: ' + err.message);
+    }
+  };
+  reader.readAsDataURL(file);
+}
+// Drag and drop handlers (only for external file drops)
+function setupDragDrop() {
+  const area = pA;
+  area.addEventListener('dragenter', (e) => {
+    // Only respond to file drags from outside
+    if (e.dataTransfer?.types?.includes('Files')) {
+      e.preventDefault();
+      area.classList.add('dragover');
+    }
+  });
+  area.addEventListener('dragover', (e) => {
+    if (e.dataTransfer?.types?.includes('Files')) {
+      e.preventDefault();
+    }
+  });
+  area.addEventListener('dragleave', (e) => {
+    // Only remove if actually leaving the area
+    if (!area.contains(e.relatedTarget)) {
+      area.classList.remove('dragover');
+    }
+  });
+  area.addEventListener('drop', (e) => {
+    e.preventDefault();
+    area.classList.remove('dragover');
+    const files = e.dataTransfer?.files;
+    if (files && files.length > 0) {
+      const file = files[0];
+      // Check if it's an image
+      if (file.type.startsWith('image/') || /\.(png|jpg|jpeg|gif|bmp|ico)$/i.test(file.name)) {
+        loadImageFile(file);
+      }
+    }
+  });
+}
+// Update displayed image info
+function updateImageInfo() {
+  $('fileName').textContent = imageInfo.fileName;
+  $('origSize').textContent = imageInfo.width + '×' + imageInfo.height;
+  const ext = '.' + imageInfo.fileName.split('.').pop().toLowerCase();
+  filterTools(ext);
+  // Check if GIF
+  isGifFile = ext === '.gif';
+  if (isGifFile && imageInfo.frameCount > 1) {
+    showFrameStrip();
+  } else {
+    hideFrameStrip();
+  }
+  // Calculate aspect ratio
+  aspectRatio = imageInfo.width / imageInfo.height;
+  // Set scale sliders max to image dimensions (can't upscale)
+  $('sc-w').max = imageInfo.width;
+  $('sc-h').max = imageInfo.height;
+  $('sc-w').value = imageInfo.width;
+  $('sc-h').value = imageInfo.height;
+  $('sc-wV').textContent = imageInfo.width + 'px';
+  $('sc-hV').textContent = imageInfo.height + 'px';
+}
+// ── GIF Frame Strip Functions ──
+// Animation playback state
+let isPlaying = false;
+let playInterval = null;
+let playSpeed = 100; // ms per frame
+function showFrameStrip() {
+  $('framePanel').classList.add('show');
+  $('dividerLeft').classList.add('show');
+  $('playControls').classList.add('show');
+  $('gifExportBtn').classList.add('show');
+  $('frameCount').textContent = imageInfo.frameCount;
+  selectedFrameIndex = 0;
+  gifFrames = [];
+  framePreviewCache = {};
+  loadFrameThumbnails();
+}
+function hideFrameStrip() {
+  $('framePanel').classList.remove('show');
+  $('dividerLeft').classList.remove('show');
+  $('playControls').classList.remove('show');
+  $('gifExportBtn').classList.remove('show');
+  stopPlayback();
+  gifFrames = [];
+  framePreviewCache = {};
+  $('frameScroll').innerHTML = '';
+}
+// Export modal
+let selectedExportOption = 'frame';
+function showExportModal() {
+  stopPlayback();
+  // Update modal with current frame info
+  $('exportFrameNum').textContent = selectedFrameIndex + 1;
+  $('exportTotalFrames').textContent = imageInfo.frameCount;
+  // Set thumbnail preview
+  const thumbContainer = $('exportThumb');
+  thumbContainer.innerHTML = '';
+  if (gifFrames[selectedFrameIndex] && gifFrames[selectedFrameIndex].thumbnail) {
+    const img = document.createElement('img');
+    img.src = gifFrames[selectedFrameIndex].thumbnail;
+    thumbContainer.appendChild(img);
+  }
+  // Reset selection to first option
+  selectedExportOption = 'frame';
+  document.querySelectorAll('.export-opt').forEach(opt => {
+    const input = opt.querySelector('input');
+    opt.classList.toggle('selected', input.value === 'frame');
+    input.checked = input.value === 'frame';
+  });
+  $('exportModal').classList.add('on');
+}
+function hideExportModal(e) {
+  if (!e || e.target === $('exportModal')) {
+    $('exportModal').classList.remove('on');
+  }
+}
+function selectExportOption(value) {
+  selectedExportOption = value;
+  document.querySelectorAll('.export-opt').forEach(opt => {
+    const input = opt.querySelector('input');
+    opt.classList.toggle('selected', input.value === value);
+    input.checked = input.value === value;
+  });
+}
+function confirmExport() {
+  hideExportModal();
+  switch (selectedExportOption) {
+    case 'frame':
+      exportSelectedFrame();
+      break;
+    case 'all-frames':
+      exportAllFrames();
+      break;
+    case 'gif':
+      exportAsGif();
+      break;
+  }
+}
+function togglePlayback() {
+  if (isPlaying) {
+    stopPlayback();
+  } else {
+    startPlayback();
+  }
+}
+function startPlayback() {
+  if (gifFrames.length < 2) return;
+  isPlaying = true;
+  $('playBtn').textContent = '⏸';
+  $('playBtn').classList.add('playing');
+  playInterval = setInterval(() => {
+    selectedFrameIndex = (selectedFrameIndex + 1) % gifFrames.length;
+    updatePlaybackFrame();
+  }, playSpeed);
+}
+function stopPlayback() {
+  isPlaying = false;
+  if (playInterval) {
+    clearInterval(playInterval);
+    playInterval = null;
+  }
+  $('playBtn').textContent = '▶';
+  $('playBtn').classList.remove('playing');
+}
+function setPlaySpeed(ms) {
+  playSpeed = parseInt(ms, 10);
+  if (isPlaying) {
+    stopPlayback();
+    startPlayback();
+  }
+}
+function updatePlaybackFrame() {
+  // Update thumbnail selection (no scrolling during playback - it's distracting)
+  document.querySelectorAll('.frame-thumb').forEach((thumb, i) => {
+    thumb.classList.toggle('selected', i === selectedFrameIndex);
+  });
+  // Update main preview
+  const frame = gifFrames[selectedFrameIndex];
+  if (frame && frame.thumbnail) {
+    const img = pA.querySelector('img');
+    if (img) {
+      img.src = frame.thumbnail;
+    } else {
+      pA.innerHTML = '';
+      const newImg = document.createElement('img');
+      newImg.src = frame.thumbnail;
+      pA.appendChild(newImg);
+      updateZoom();
+    }
+    pI.textContent = `Frame ${selectedFrameIndex + 1} of ${imageInfo.frameCount}`;
+  }
+}
+async function loadFrameThumbnails() {
+  const scroll = $('frameScroll');
+  scroll.innerHTML = '';
+  // Create placeholder thumbnails first
+  for (let i = 0; i < imageInfo.frameCount; i++) {
+    const thumb = document.createElement('div');
+    thumb.className = 'frame-thumb' + (i === 0 ? ' selected' : '');
+    thumb.dataset.index = i;
+    thumb.innerHTML = `<span class="frame-num">${i + 1}</span>`;
+    thumb.onclick = () => selectFrame(i);
+    scroll.appendChild(thumb);
+  }
+  // Load thumbnails in batches
+  for (let i = 0; i < imageInfo.frameCount; i++) {
+    try {
+      const result = await postJson('/api/frame-thumbnail', { frameIndex: i });
+      if (result.success && result.imageData) {
+        const thumb = scroll.children[i];
+        const img = document.createElement('img');
+        img.src = result.imageData;
+        thumb.insertBefore(img, thumb.firstChild);
+        gifFrames[i] = { index: i, thumbnail: result.imageData };
+      }
+    } catch (e) {
+      console.error('Failed to load frame', i, e);
+    }
+  }
+}
+function selectFrame(index) {
+  // Stop playback on manual selection
+  stopPlayback();
+  selectedFrameIndex = index;
+  // Update selection UI
+  document.querySelectorAll('.frame-thumb').forEach((thumb, i) => {
+    thumb.classList.toggle('selected', i === index);
+  });
+  // Show selected frame in main preview
+  showSelectedFrame();
+}
+async function showSelectedFrame() {
+  if (activeTools.size === 0) {
+    // Show original frame
+    const frame = gifFrames[selectedFrameIndex];
+    if (frame && frame.thumbnail) {
+      pA.innerHTML = '';
+      const img = document.createElement('img');
+      img.src = frame.thumbnail;
+      pA.appendChild(img);
+      pI.textContent = `Frame ${selectedFrameIndex + 1} of ${imageInfo.frameCount}`;
+      updateZoom();
+    }
+  } else {
+    // Regenerate preview for selected frame
+    generatePreview();
+  }
+}
+// Update frame thumbnails with processed preview
+async function updateFramePreviews() {
+  if (!isGifFile || gifFrames.length === 0) return;
+  const opts = getOptions();
+  if (activeTools.size === 0) {
+    // Reset to original thumbnails
+    document.querySelectorAll('.frame-thumb').forEach((thumb, i) => {
+      thumb.classList.remove('processing');
+      const img = thumb.querySelector('img');
+      if (img && gifFrames[i]) {
+        img.src = gifFrames[i].thumbnail;
+      }
+    });
+    return;
+  }
+  // Show processing state on all thumbnails
+  document.querySelectorAll('.frame-thumb').forEach(thumb => {
+    thumb.classList.add('processing');
+  });
+  // Process frames (limit concurrent requests)
+  for (let i = 0; i < gifFrames.length; i++) {
+    try {
+      const result = await postJson('/api/frame-preview', {
+        frameIndex: i,
+        ...opts
+      });
+      const thumb = document.querySelector(`.frame-thumb[data-index="${i}"]`);
+      if (thumb) {
+        thumb.classList.remove('processing');
+        if (result.success && result.imageData) {
+          let img = thumb.querySelector('img');
+          if (!img) {
+            img = document.createElement('img');
+            thumb.insertBefore(img, thumb.firstChild);
+          }
+          img.src = result.imageData;
+        }
+      }
+    } catch (e) {
+      const thumb = document.querySelector(`.frame-thumb[data-index="${i}"]`);
+      if (thumb) thumb.classList.remove('processing');
+    }
+  }
+}
+// Export functions
+async function exportSelectedFrame() {
+  const opts = getOptions();
+  opts.exportMode = 'frame';
+  opts.frameIndex = selectedFrameIndex;
+  await runExport(opts, `Exporting frame ${selectedFrameIndex + 1}...`);
+}
+async function exportAllFrames() {
+  const opts = getOptions();
+  opts.exportMode = 'all-frames';
+  await runExport(opts, 'Exporting all frames...');
+}
+async function exportAsGif() {
+  const opts = getOptions();
+  opts.exportMode = 'gif';
+  await runExport(opts, 'Processing and exporting GIF...');
+}
+async function runExport(opts, message) {
+  $('M').classList.add('hide');
+  $('B').classList.add('hide');
+  $('L').classList.add('on');
+  $('G').classList.add('on');
+  $('G').innerHTML = '';
+  $('lT').textContent = message;
+  try {
+    const result = await postJson('/api/process', opts);
+    if (result.logs) {
+      result.logs.forEach(l => log('G', l.type[0], l.message));
+    }
+    showDone(result.success, result.success ? 'Done' : 'Failed', result.success ? result.output : result.error);
+  } catch (e) {
+    log('G', 'e', e.message);
+    showDone(false, 'Error', e.message);
+  }
+}
+// ── Store Assets Preset Management ──
+// Handle preset selection change
+function onPresetChange() {
+  const sel = $('sp-preset');
+  const preset = presets.find(p => p.id === sel.value);
+  console.log('Selected preset:', sel.value, preset);
+  if (preset && preset.icons && preset.icons.length > 0) {
+    currentDimensions = preset.icons.map(i => ({ width: i.width, height: i.height, filename: i.filename }));
+    $('sp-name').value = preset.name;
+    console.log('Loaded dimensions:', currentDimensions);
+  } else {
+    currentDimensions = [];
+    $('sp-name').value = sel.value ? (preset?.name || '') : '';
+  }
+  // Hide delete button for unsaved custom presets
+  document.querySelector('.btn-del').style.display = sel.value ? '' : 'none';
+  renderDimensions();
+}
+// Render dimension chips
+function renderDimensions() {
+  const container = $('sp-dims');
+  container.innerHTML = currentDimensions.map((d, i) =>
+    `<div class="dim-item"><span>${d.width}</span><span class="dim-x">×</span><span>${d.height}</span><span class="dim-rm" onclick="removeDimension(${i})">×</span></div>`
+  ).join('');
+}
+// Add a new dimension
+function addDimension() {
+  const w = +$('sp-newW').value;
+  const h = +$('sp-newH').value;
+  console.log('Adding dimension:', w, h);
+  if (w > 0 && h > 0) {
+    // Avoid duplicates
+    if (!currentDimensions.some(d => d.width === w && d.height === h)) {
+      currentDimensions.push({ width: w, height: h, filename: `${w}x${h}.png` });
+      console.log('Current dimensions:', currentDimensions);
+      renderDimensions();
+    }
+    $('sp-newW').value = '';
+    $('sp-newH').value = '';
+  } else {
+    console.log('Invalid dimensions - w or h not > 0');
+  }
+}
+// Remove a dimension
+function removeDimension(idx) {
+  currentDimensions.splice(idx, 1);
+  renderDimensions();
+}
+// Save current dimensions as preset
+async function saveCurrentPreset() {
+  console.log('Saving preset, currentDimensions:', currentDimensions);
+  const name = $('sp-name').value.trim();
+  if (!name) {
+    showAlert('Please enter a preset name');
+    return;
+  }
+  if (currentDimensions.length === 0) {
+    showAlert('Please add at least one dimension');
+    return;
+  }
+  // Use selected preset ID if editing, otherwise generate from name
+  const selectedId = $('sp-preset').value;
+  const id = selectedId || name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+  const preset = {
+    id,
+    name,
+    description: 'Custom preset',
+    icons: currentDimensions.map(d => ({
+      filename: d.filename || `${d.width}x${d.height}.png`,
+      width: d.width,
+      height: d.height
+    }))
+  };
+  const btn = document.querySelector('.preset-actions .btn-sm');
+  btn.disabled = true;
+  btn.textContent = 'Saving...';
+  try {
+    const result = await postJson('/api/save-preset', preset);
+    if (result.success) {
+      // Update presets list and select the new one
+      const existing = presets.findIndex(p => p.id === id);
+      if (existing >= 0) {
+        presets[existing] = preset;
+      } else {
+        presets.push(preset);
+        const opt = document.createElement('option');
+        opt.value = id;
+        opt.textContent = name;
+        $('sp-preset').appendChild(opt);
+      }
+      $('sp-preset').value = id;
+      // Show delete button now that preset is saved
+      document.querySelector('.btn-del').style.display = '';
+      // Show success feedback
+      btn.textContent = 'Saved!';
+      btn.style.borderColor = '#4c6';
+      btn.style.color = '#4c6';
+      setTimeout(() => {
+        btn.textContent = 'Save Preset';
+        btn.style.borderColor = '';
+        btn.style.color = '';
+        btn.disabled = false;
+      }, 1500);
+    } else {
+      btn.textContent = 'Failed';
+      btn.style.borderColor = '#f66';
+      btn.style.color = '#f66';
+      setTimeout(() => {
+        btn.textContent = 'Save Preset';
+        btn.style.borderColor = '';
+        btn.style.color = '';
+        btn.disabled = false;
+      }, 1500);
+    }
+  } catch (e) {
+    btn.textContent = 'Error';
+    btn.style.borderColor = '#f66';
+    btn.style.color = '#f66';
+    setTimeout(() => {
+      btn.textContent = 'Save Preset';
+      btn.style.borderColor = '';
+      btn.style.color = '';
+      btn.disabled = false;
+    }, 1500);
+  }
+}
+// Delete current preset
+function deleteCurrentPreset() {
+  const selectedId = $('sp-preset').value;
+  if (!selectedId) {
+    showAlert('No preset selected to delete');
+    return;
+  }
+  const preset = presets.find(p => p.id === selectedId);
+  const presetName = preset?.name || selectedId;
+  showConfirm(`Delete preset "${presetName}"?\n\nThis cannot be undone.`, async () => {
+    try {
+      const result = await postJson('/api/delete-preset', { id: selectedId });
+      if (result.success) {
+        // Remove from local presets array
+        const idx = presets.findIndex(p => p.id === selectedId);
+        if (idx >= 0) presets.splice(idx, 1);
+        // Remove from dropdown and reset
+        const sel = $('sp-preset');
+        const opt = sel.querySelector(`option[value="${selectedId}"]`);
+        if (opt) opt.remove();
+        sel.value = '';
+        onPresetChange();
+        showAlert('Preset deleted');
+      } else {
+        showAlert('Failed to delete: ' + (result.error || 'Unknown error'));
+      }
+    } catch (e) {
+      showAlert('Failed to delete: ' + e.message);
+    }
+  });
+}
+// Apply all selected tools
+async function apply() {
+  if (activeTools.size === 0) return;
+  $('M').classList.add('hide');
+  $('B').classList.add('hide');
+  $('L').classList.add('on');
+  $('G').classList.add('on');
+  $('G').innerHTML = '';
+  const toolNames = Array.from(activeTools).map(t => {
+    const names = { removebg: 'Remove BG', scale: 'Scale', icons: 'Icons', storepack: 'Store Assets' };
+    return names[t] || t;
+  });
+  $('lT').textContent = toolNames.join(' → ') + '...';
+  try {
+    const result = await postJson('/api/process', getOptions());
+    if (result.logs) {
+      result.logs.forEach(l => log('G', l.type[0], l.message));
+    }
+    showDone(result.success, result.success ? 'Done' : 'Failed', result.success ? result.output : result.error);
+  } catch (e) {
+    log('G', 'e', e.message);
+    showDone(false, 'Error', e.message);
+  }
+}
+// Reset to main view
+function reset() {
+  $('D').classList.remove('on', 'ok', 'err');
+  $('G').classList.remove('on');
+  $('M').classList.remove('hide');
+  $('B').classList.remove('hide');
+  $('openFolderBtn').style.display = 'none';
+  lastOutputSuccess = false;
+}
+// Close with unsaved changes warning
+function tryClose() {
+  if (hasChanges && activeTools.size > 0) {
+    showConfirm('You have unsaved changes. Close anyway?', () => PicLet.close(), 'Close');
+  } else {
+    PicLet.close();
+  }
+}
+// Open output folder in Explorer
+function openOutputFolder() {
+  postJson('/api/open-folder', {});
+}
+// Show done state with optional folder button
+function showDone(success, title, message) {
+  $('L').classList.remove('on');
+  $('D').classList.add('on', success ? 'ok' : 'err');
+  $('dT').textContent = title;
+  $('dM').textContent = message;
+  lastOutputSuccess = success;
+  $('openFolderBtn').style.display = success ? '' : 'none';
+  if (success) hasChanges = false;
+}
+// Init
+setupDragDrop();
+setupDivider();
+// Resizable dividers
+function setupDivider() {
+  const divider = $('divider');
+  const dividerLeft = $('dividerLeft');
+  const toolsPanel = document.querySelector('.tools-panel');
+  const framePanel = $('framePanel');
+  const main = $('M');
+  let isDraggingRight = false;
+  let isDraggingLeft = false;
+  // Right divider (tools panel)
+  divider.addEventListener('mousedown', (e) => {
+    isDraggingRight = true;
+    divider.classList.add('dragging');
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+    e.preventDefault();
+  });
+  // Left divider (frame panel)
+  dividerLeft.addEventListener('mousedown', (e) => {
+    isDraggingLeft = true;
+    dividerLeft.classList.add('dragging');
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+    e.preventDefault();
+  });
+  document.addEventListener('mousemove', (e) => {
+    const mainRect = main.getBoundingClientRect();
+    if (isDraggingRight) {
+      // Tools width = distance from cursor to right edge
+      const toolsWidth = mainRect.right - e.clientX;
+      // Clamp: min 240px for tools, leave at least 150px for preview
+      const maxTools = mainRect.width - 150;
+      const clampedWidth = Math.max(240, Math.min(maxTools, toolsWidth));
+      toolsPanel.style.width = clampedWidth + 'px';
+    }
+    if (isDraggingLeft) {
+      // Frame panel width = distance from left edge to cursor
+      const frameWidth = e.clientX - mainRect.left;
+      // Clamp: min 60px, max 150px for frame panel
+      const clampedWidth = Math.max(60, Math.min(150, frameWidth));
+      framePanel.style.width = clampedWidth + 'px';
+    }
+  });
+  document.addEventListener('mouseup', () => {
+    if (isDraggingRight) {
+      isDraggingRight = false;
+      divider.classList.remove('dragging');
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    }
+    if (isDraggingLeft) {
+      isDraggingLeft = false;
+      dividerLeft.classList.remove('dragging');
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    }
+  });
+}
+fetchJson('/api/info').then(d => {
+  imageInfo = d;
+  updateImageInfo();
+  // Load presets for store pack (full preset data)
+  const presetData = d.defaults?.presets || d.presets || [];
+  console.log('Loaded presets:', presetData);
+  if (presetData.length > 0) {
+    presets = presetData;
+    const sel = $('sp-preset');
+    sel.innerHTML = '<option value="">Custom...</option>';
+    presets.forEach(p => {
+      const opt = document.createElement('option');
+      opt.value = p.id;
+      opt.textContent = p.name;
+      sel.appendChild(opt);
+    });
+  }
+  // Hide delete button initially (Custom... selected)
+  document.querySelector('.btn-del').style.display = 'none';
+  // Show original image immediately
+  showOriginal();
+});
+</script>
+</body>
+</html>