Add advanced vector tracing + persistent Library

- Image -> Vector tracing via ImageTracer.js: new Vector tab with B&W,
1-color silhouette, and 2/3/4/5-color quantized modes + detail slider.
Source from selected image, clipboard paste, or upload. Result is an
editable vector group (ungroup to edit each color).
- My Library tab: save any object/vector (with thumbnail) to localStorage,
click to re-add, delete, and Export/Import the whole library as JSON.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

WORKLOG.md

@@ -53,6 +53,11 @@ curl -sL https://mlmihjaz-ltm.static.hf.space/ | grep -c <some-unique-string-you
 - **Save / Load projects:** `.dfp.json` export (**💾 Save** / Ctrl+S) + **📂 Open** import; **autosave** to `localStorage df_autosave` (debounced 800ms via `scheduleAutosave` in `onCanvasChange`), **restored on load** (`restoreAutosave`); **✲ New** clears. Project shape: `{app,v,name,w,h,json}`.
 - Verified: JS `node --check` clean, all new IDs/functions resolve, served page contains them. Browser-tested visuals = snap lines + arrange menu.
 
+## Features implemented (2026-06-16 session #2 — vector tracing + library)
+- **Vector tracing (raster→SVG):** uses **ImageTracer.js** (CDN: `cdn.jsdelivr.net/gh/jankovicsandras/imagetracerjs@master/imagetracer_v1.2.6.js`, global `ImageTracer`). New **Vector** left tab (`sec-trace`). Source = selected canvas image / paste / upload (`traceSourceEl`). Color modes: **B&W**, **1 color** (silhouette), **2–5 color** (`numberofcolors`). `runTrace(mode)`: downscale to ≤900px → `imagedataToSVG` → `fabric.loadSVGFromString` → `groupSVGElements` → add as `_type:'vector'` group (ungroup to edit each color). B&W/1-color pre-threshold the imagedata + use a black/white `pal`; 1-color also drops near-white paths. Detail slider maps to `ltres`/`pathomit`. Wrapped in `setTimeout` so the UI can paint a "Tracing…" status. Cross-origin/tainted images are caught + toasted.
+- **My Library (persistent):** new **Library** tab (`sec-library`), `localStorage df_library`. `addToLibrary()` serializes the active object (auto-groups an activeSelection) via `toObject(['_name','_type'])` + a PNG thumbnail (`obj.toDataURL`). `renderLibrary()` grid (click=add via `fabric.util.enlivenObjects`, hover ×=delete). **Export/Import** the whole library as JSON ("for future versions"). Quota errors are caught.
+- Verified: `node --check` clean, all new IDs/functions resolve, ImageTracer CDN 200. Browser-test the trace quality / tune detault detail.
+
 ## Known notes / next ideas
 - Templates are placeholders — biggest remaining "real Canva" feature.
 - Counter relies on a 3rd-party free service; if it dies, swap for a tiny Gradio/Docker Space hosting a JSON counter.

index.html

@@ -6,6 +6,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>DesignForge Pro</title>
 <script src="https://cdn.jsdelivr.net/npm/fabric@5.3.0/dist/fabric.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/jankovicsandras/imagetracerjs@master/imagetracer_v1.2.6.js"></script>
 <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
 <style>
 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
@@ -130,6 +131,11 @@ body{font-family:var(--sans);background:var(--bg);color:var(--txt);height:100vh;
 .thumb-item{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;cursor:pointer;position:relative;background:var(--surf3);border:1.5px solid transparent;transition:all .12s}
 .thumb-item:hover{border-color:var(--acc);transform:scale(1.02);box-shadow:var(--sh)}
 .thumb-item img{width:100%;height:100%;object-fit:cover;display:block}
+.p-btn.tr-mode.sel{background:var(--acc);color:#fff;border-color:transparent}
+.lib-item img{object-fit:contain;background:repeating-conic-gradient(#e9e9ef 0% 25%,#fff 0% 50%) 50%/14px 14px}
+.lib-del{position:absolute;top:3px;right:3px;width:18px;height:18px;border:none;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:12px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0}
+.thumb-item:hover .lib-del{display:flex}
+.lib-name{position:absolute;left:0;right:0;bottom:0;font-size:9px;padding:2px 4px;background:rgba(0,0,0,.5);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .thumb-item .thumb-label{position:absolute;bottom:0;left:0;right:0;padding:4px 6px;background:linear-gradient(transparent,rgba(0,0,0,.55));color:#fff;font-size:9px;font-weight:600}
 
 /* SHAPES — category grid */
@@ -402,6 +408,14 @@ input[type="file"]{display:none}
       <svg viewBox="0 0 20 20" fill="none"><path d="M3 14l4-4 4 4 4-6 3 6H3z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><circle cx="6" cy="7" r="2" stroke="currentColor" stroke-width="1.5"/></svg>
       <span class="tab-label">BG</span>
     </div>
+    <div class="tab-icon" data-panel="trace">
+      <svg viewBox="0 0 20 20" fill="none"><path d="M3 16c4-1 4-11 8-11 3 0 2 6 5 6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><circle cx="3" cy="16" r="1.6" fill="currentColor"/><circle cx="16" cy="11" r="1.6" fill="currentColor"/></svg>
+      <span class="tab-label">Vector</span>
+    </div>
+    <div class="tab-icon" data-panel="library">
+      <svg viewBox="0 0 20 20" fill="none"><path d="M4 3v14M7 3v14M11 4l4 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><rect x="2.5" y="3" width="3" height="14" rx="1" stroke="currentColor" stroke-width="1.3"/></svg>
+      <span class="tab-label">Library</span>
+    </div>
     <div style="flex:1"></div>
     <div class="tab-icon" data-panel="layers">
       <svg viewBox="0 0 20 20" fill="none"><path d="M3 7l7-4 7 4-7 4-7-4zM3 13l7 4 7-4M3 10l7 4 7-4" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
@@ -630,6 +644,44 @@ input[type="file"]{display:none}
       </div>
 
       <!-- LAYERS -->
+      <!-- VECTORIZE / TRACE -->
+      <div class="panel-section" id="sec-trace">
+        <div class="sec-label">Image → Vector <span class="badge green">Trace</span></div>
+        <p style="font-size:11px;color:var(--txt3);margin:0 0 10px">Convert a photo or logo into clean, scalable vector shapes. Pick how many colors to keep.</p>
+        <div class="sec-label">1 · Choose source</div>
+        <button class="p-btn full" id="tr-use-sel" style="margin-bottom:5px">🎯 Use selected image</button>
+        <button class="p-btn full" id="tr-paste" style="margin-bottom:5px">⎘ Paste image from clipboard</button>
+        <button class="p-btn full" id="tr-upload">⬆ Upload an image</button>
+        <input type="file" id="tr-file" accept="image/*" hidden>
+        <div class="sec-label" style="margin-top:12px">2 · Color mode</div>
+        <div id="tr-modes" style="display:grid;grid-template-columns:repeat(3,1fr);gap:6px">
+          <button class="p-btn tr-mode" data-mode="bw">B&amp;W</button>
+          <button class="p-btn tr-mode" data-mode="1">1 color</button>
+          <button class="p-btn tr-mode" data-mode="2">2 color</button>
+          <button class="p-btn tr-mode" data-mode="3">3 color</button>
+          <button class="p-btn tr-mode" data-mode="4">4 color</button>
+          <button class="p-btn tr-mode" data-mode="5">5 color</button>
+        </div>
+        <div class="sec-label" style="margin-top:12px">Detail</div>
+        <input type="range" id="tr-detail" min="0" max="3" step="1" value="1" style="width:100%">
+        <div style="display:flex;justify-content:space-between;font-size:10px;color:var(--txt3)"><span>Smooth</span><span>Detailed</span></div>
+        <div id="tr-status" style="font-size:11px;color:var(--acc);margin-top:10px;display:none"></div>
+        <p style="font-size:10.5px;color:var(--txt3);margin-top:12px">Tip: after tracing, ungroup (Ctrl+Shift+G) to edit each color shape, or save it to your Library →</p>
+      </div>
+
+      <!-- LIBRARY -->
+      <div class="panel-section" id="sec-library">
+        <div class="sec-label">My Library <span class="badge green">Saved</span></div>
+        <button class="p-btn acc full" id="lib-save" style="margin-bottom:8px">＋ Save selection to Library</button>
+        <div style="display:flex;gap:6px;margin-bottom:10px">
+          <button class="p-btn" id="lib-export" style="flex:1">⬇ Export</button>
+          <button class="p-btn" id="lib-import-btn" style="flex:1">⬆ Import</button>
+          <input type="file" id="lib-file" accept=".json,application/json" hidden>
+        </div>
+        <div id="lib-empty" style="font-size:11px;color:var(--txt3);margin-bottom:8px">Nothing saved yet. Select any object (or a traced vector) and tap “Save to Library”.</div>
+        <div class="thumb-grid" id="lib-grid"></div>
+      </div>
+
       <div class="panel-section" id="sec-layers">
         <div id="layers-list"></div>
         <div style="display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:8px">
@@ -2205,11 +2257,129 @@ function newDesign() {
   toast('New design', 'ok');
 }
 
+// ============================================================
+// VECTOR TRACING  (raster -> SVG via ImageTracer.js) + MY LIBRARY
+// ============================================================
+let traceSourceEl = null; // HTMLImageElement queued for tracing
+
+function getSelectedImageEl() {
+  const o = canvas.getActiveObject();
+  return (o && o.type === 'image') ? (o._element || o.getElement()) : null;
+}
+function setTraceSourceFromFile(file) {
+  const r = new FileReader();
+  r.onload = () => { const im = new Image(); im.onload = () => { traceSourceEl = im; toast('Source ready — pick a color mode', 'ok'); }; im.src = r.result; };
+  r.readAsDataURL(file);
+}
+function imageToImageData(imgEl, maxDim) {
+  let w = imgEl.naturalWidth || imgEl.width, h = imgEl.naturalHeight || imgEl.height;
+  const s = Math.min(1, maxDim / Math.max(w, h));
+  w = Math.max(1, Math.round(w * s)); h = Math.max(1, Math.round(h * s));
+  const c = document.createElement('canvas'); c.width = w; c.height = h;
+  const ctx = c.getContext('2d'); ctx.drawImage(imgEl, 0, 0, w, h);
+  return ctx.getImageData(0, 0, w, h);
+}
+function thresholdImageData(imgd) {
+  const d = imgd.data;
+  for (let i = 0; i < d.length; i += 4) {
+    const lum = 0.299 * d[i] + 0.587 * d[i + 1] + 0.114 * d[i + 2];
+    const v = lum < 128 ? 0 : 255; d[i] = d[i + 1] = d[i + 2] = v; d[i + 3] = 255;
+  }
+  return imgd;
+}
+function traceOptionsFor(mode, detail) {
+  const ltres = [3, 1.5, 1, 0.5][detail] != null ? [3, 1.5, 1, 0.5][detail] : 1;
+  const pathomit = [16, 8, 4, 1][detail] != null ? [16, 8, 4, 1][detail] : 8;
+  const base = { ltres, qtres: ltres, pathomit, strokewidth: 0, linefilter: true, scale: 1, roundcoords: 1, viewbox: false, desc: false, colorsampling: 2, colorquantcycles: 3, blurradius: 0 };
+  const blackWhitePal = [{ r: 0, g: 0, b: 0, a: 255 }, { r: 255, g: 255, b: 255, a: 255 }];
+  if (mode === 'bw') return Object.assign(base, { numberofcolors: 2, pal: blackWhitePal, _bw: true });
+  if (mode === '1')  return Object.assign(base, { numberofcolors: 2, pal: blackWhitePal, _one: true });
+  return Object.assign(base, { numberofcolors: parseInt(mode) });
+}
+function runTrace(mode) {
+  if (typeof ImageTracer === 'undefined') { toast('Tracer still loading — try again in a second', 'warn'); return; }
+  const el = traceSourceEl || getSelectedImageEl();
+  if (!el) { toast('Choose a source image first', 'warn'); return; }
+  const detail = parseInt($i('tr-detail').value) || 1;
+  const opts = traceOptionsFor(mode, detail);
+  const st = $i('tr-status'); st.style.display = 'block'; st.textContent = '⏳ Tracing… this can take a moment';
+  setStatus('Tracing image…');
+  setTimeout(() => {
+    try {
+      let imgd = imageToImageData(el, 900);
+      if (opts._bw || opts._one) imgd = thresholdImageData(imgd);
+      const svgstr = ImageTracer.imagedataToSVG(imgd, opts);
+      fabric.loadSVGFromString(svgstr, (objects, options) => {
+        let objs = (objects || []).filter(Boolean);
+        if (opts._one) objs = objs.filter(o => { const f = new fabric.Color(o.fill || '#000').getSource(); return (f[0] + f[1] + f[2]) < 384; });
+        if (!objs.length) { st.style.display = 'none'; setStatus('Ready'); toast('Nothing traceable in this image', 'warn'); return; }
+        const g = fabric.util.groupSVGElements(objs, options);
+        const sc = Math.min(canvas.width * 0.6 / (g.width || 1), canvas.height * 0.6 / (g.height || 1), 4);
+        g.set({ left: canvas.width / 2, top: canvas.height / 2, originX: 'center', originY: 'center', scaleX: sc, scaleY: sc });
+        g._name = 'Vector (' + (mode === 'bw' ? 'B&W' : mode + ' color') + ')'; g._type = 'vector';
+        canvas.add(g); canvas.setActiveObject(g); canvas.requestRenderAll();
+        updateLayers(); saveHist();
+        st.style.display = 'none'; setStatus('Ready'); toast('Vectorized! 🎉', 'ok');
+      });
+    } catch (e) {
+      console.error(e); st.style.display = 'none'; setStatus('Ready');
+      toast('Trace failed — the image may be cross-origin protected. Try Upload/Paste.', 'err');
+    }
+  }, 40);
+}
+
+// ---- My Library (persistent, localStorage) -------------------------------
+function loadLib() { try { return JSON.parse(localStorage.getItem('df_library') || '[]'); } catch (e) { return []; } }
+function saveLib(arr) { try { localStorage.setItem('df_library', JSON.stringify(arr)); return true; } catch (e) { toast('Library storage full — export & remove some items', 'warn'); return false; } }
+function addToLibrary() {
+  let o = canvas.getActiveObject();
+  if (!o) { toast('Select an object to save first', 'warn'); return; }
+  if (o.type === 'activeSelection') { o.toGroup(); canvas.requestRenderAll(); o = canvas.getActiveObject(); }
+  const json = o.toObject(['_name', '_type']);
+  let thumb = '';
+  try { thumb = o.toDataURL({ format: 'png', multiplier: Math.min(1, 90 / Math.max(o.getScaledWidth(), o.getScaledHeight())) }); } catch (e) {}
+  const arr = loadLib();
+  arr.unshift({ id: 'L' + Date.now(), name: o._name || o.type || 'Item', json, thumb, ts: Date.now() });
+  if (saveLib(arr)) { renderLibrary(); toast('Saved to Library', 'ok'); }
+}
+function addLibraryItemToCanvas(item) {
+  fabric.util.enlivenObjects([item.json], objs => {
+    const o = objs[0]; if (!o) return;
+    o.set({ left: canvas.width / 2, top: canvas.height / 2, originX: 'center', originY: 'center' });
+    o._name = item.name; canvas.add(o); canvas.setActiveObject(o); canvas.requestRenderAll();
+    updateLayers(); saveHist(); toast('Added from Library', 'ok');
+  });
+}
+function renderLibrary() {
+  const arr = loadLib(), grid = $i('lib-grid'), empty = $i('lib-empty');
+  if (!grid) return;
+  grid.innerHTML = ''; empty.style.display = arr.length ? 'none' : 'block';
+  arr.forEach(item => {
+    const d = document.createElement('div'); d.className = 'thumb-item lib-item'; d.title = item.name;
+    const safe = (item.name || '').replace(/[<>&"]/g, '');
+    d.innerHTML = `<img src="${item.thumb || ''}" alt=""><span class="lib-name">${safe}</span><button class="lib-del" title="Delete">×</button>`;
+    d.querySelector('img').onclick = () => addLibraryItemToCanvas(item);
+    d.querySelector('.lib-del').onclick = e => { e.stopPropagation(); saveLib(loadLib().filter(x => x.id !== item.id)); renderLibrary(); };
+    grid.appendChild(d);
+  });
+}
+function exportLibrary() {
+  const blob = new Blob([JSON.stringify(loadLib())], { type: 'application/json' });
+  const u = URL.createObjectURL(blob); const a = document.createElement('a');
+  a.href = u; a.download = 'designforge-library.json'; a.click(); URL.revokeObjectURL(u);
+  toast('Library exported', 'ok');
+}
+function importLibrary(file) {
+  const r = new FileReader();
+  r.onload = () => { try { const inc = JSON.parse(r.result); if (!Array.isArray(inc)) throw 0; const cur = loadLib(); const ids = new Set(cur.map(x => x.id)); inc.forEach(x => { if (!ids.has(x.id)) cur.push(x); }); saveLib(cur); renderLibrary(); toast('Library imported', 'ok'); } catch (e) { toast('Invalid library file', 'err'); } };
+  r.readAsText(file);
+}
+
 // ============================================================
 // PANEL SWITCHING
 // ============================================================
 let activePanelId = 'upload';
-const PANEL_TITLES = { upload:'Upload', templates:'Templates', photos:'Photos', elements:'Shapes', text:'Text', background:'Background', layers:'Layers' };
+const PANEL_TITLES = { upload:'Upload', templates:'Templates', photos:'Photos', elements:'Shapes', text:'Text', background:'Background', trace:'Vectorize', library:'My Library', layers:'Layers' };
 // Always open the given panel (used by auto-switch on selection)
 function openPanel(id) {
   qsa('.tab-icon').forEach(t => t.classList.remove('active'));
@@ -2562,6 +2732,23 @@ document.addEventListener('DOMContentLoaded', () => {
   $i('btn-open-proj').onclick = () => $i('proj-file-input').click();
   $i('proj-file-input').addEventListener('change', e => { if (e.target.files[0]) openProjectFile(e.target.files[0]); e.target.value = ''; });
 
+  // VECTOR TRACE
+  $i('tr-use-sel').onclick = () => { const el = getSelectedImageEl(); if (!el) { toast('Select an image on the canvas first', 'warn'); return; } traceSourceEl = el; toast('Source set — pick a color mode', 'ok'); };
+  $i('tr-upload').onclick = () => $i('tr-file').click();
+  $i('tr-file').addEventListener('change', e => { if (e.target.files[0]) setTraceSourceFromFile(e.target.files[0]); e.target.value = ''; });
+  $i('tr-paste').onclick = async () => {
+    try { const items = await navigator.clipboard.read(); for (const it of items) for (const t of it.types) if (t.startsWith('image/')) { setTraceSourceFromFile(await it.getType(t)); return; } toast('No image in clipboard', 'err'); }
+    catch { toast('Clipboard blocked — use Upload instead', 'err'); }
+  };
+  qsa('#tr-modes .tr-mode').forEach(b => b.onclick = () => { qsa('#tr-modes .tr-mode').forEach(x => x.classList.remove('sel')); b.classList.add('sel'); runTrace(b.dataset.mode); });
+
+  // LIBRARY
+  $i('lib-save').onclick = addToLibrary;
+  $i('lib-export').onclick = exportLibrary;
+  $i('lib-import-btn').onclick = () => $i('lib-file').click();
+  $i('lib-file').addEventListener('change', e => { if (e.target.files[0]) importLibrary(e.target.files[0]); e.target.value = ''; });
+  renderLibrary();
+
   // VISITOR COUNTER (counterapi.dev — free, no auth; display = base + live count)
   (function visitorCounter() {
     const BASE = 0, NS = 'designforge-ltm-mlmihjaz', KEY = 'visits'; // server counter seeded at 1990