Add deep color on groups/vectors + Pathfinder boolean ops

- Color now applies recursively into groups, traced vectors and
multi-selections (setStyleDeep) so every child path recolors at once,
even while grouped; right panel + panel-switch updated for groups.
- Pathfinder (paper.js): Unite / Subtract / Intersect / Exclude in the
Arrange menu. Combines 2+ shapes into one editable fabric.Path; subtract
is bottom-minus-top (Illustrator "Minus Front").

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

WORKLOG.md

@@ -58,6 +58,11 @@ curl -sL https://mlmihjaz-ltm.static.hf.space/ | grep -c <some-unique-string-you
 - **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.
 
+## Features implemented (2026-06-16 session #3 — deep color + Pathfinder)
+- **Deep color on groups/vectors:** `setStyleDeep(obj,prop,val)` recurses into `group`/`activeSelection` children so a fill applies to every path of a traced vector or grouped shapes (even while grouped). `updateActiveShape` routes groups/selections through it; `updateRightPanel` syncs `sh-fill` for groups (first child with a real fill); `onSelectionChange` opens the Shapes panel for `group` too. Colors survive ungroup→recolor→regroup.
+- **Pathfinder boolean ops (paper.js):** added **paper-core** CDN (`paper@0.12.17`, global `paper`, `ensurePaper()` lazy-inits an offscreen project). `pathfinder(op)` for **unite/subtract/intersect/exclude** in the Arrange menu (`[data-pf]`). Must select 2+ objects; it **discards the activeSelection first** so children are in absolute canvas coords, converts each to a paper path via `obj.toSVG()`→`importSVG` (sub-paths united in `objToPaperPath`), runs the op (subtract = bottom minus the ones above, Illustrator "Minus Front"), then rebuilds one `fabric.Path` from `result.pathData` (fillRule evenodd, inherits bottom shape's style) and removes the originals.
+- Verified: `node --check` clean, both CDNs 200, all fns/wiring resolve. Browser-test boolean edge cases (holes/winding) + tune if needed.
+
 ## 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

@@ -7,6 +7,7 @@
 <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>
+<script src="https://cdn.jsdelivr.net/npm/paper@0.12.17/dist/paper-core.min.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}
@@ -352,6 +353,13 @@ input[type="file"]{display:none}
     <div class="arr-sep"></div>
     <button class="arr-wide" data-arr="group">⛶ Group <span class="arr-kbd">Ctrl+G</span></button>
     <button class="arr-wide" data-arr="ungroup">⛗ Ungroup <span class="arr-kbd">Ctrl+Shift+G</span></button>
+    <div class="arr-label" style="margin-top:9px">Combine · Pathfinder</div>
+    <div class="arr-grid two">
+      <button data-pf="unite" title="Merge shapes into one outline">⬣ Unite</button>
+      <button data-pf="subtract" title="Bottom shape minus the ones on top">◑ Subtract</button>
+      <button data-pf="intersect" title="Keep only the overlapping area">◎ Intersect</button>
+      <button data-pf="exclude" title="Keep everything except the overlap">⊗ Exclude</button>
+    </div>
   </div>
 
   <!-- CENTER PROMO STRIP -->
@@ -1344,7 +1352,7 @@ function onSelectionChange() {
   // Auto-switch the left panel to match what's selected
   if (obj && !penMode && obj.type !== 'activeSelection') {
     if (obj.type === 'i-text' || obj.type === 'text') openPanel('text');
-    else if (SHAPE_TYPES.includes(obj.type)) openPanel('elements');
+    else if (SHAPE_TYPES.includes(obj.type) || obj.type === 'group') openPanel('elements');
   }
 }
 
@@ -1682,9 +1690,12 @@ function updateRightPanel(obj) {
     $i('txt-underline').classList.toggle('active', underlineOn);
   }
 
-  // Shape style sync
-  if (['rect','circle','ellipse','triangle','polygon','path','line'].includes(obj.type)) {
-    if ($i('sh-fill')) $i('sh-fill').value = (obj.fill && obj.fill !== 'transparent') ? obj.fill : '#7c3aed';
+  // Shape style sync (groups/vectors included so their colors are editable)
+  const isGroupish = obj.type === 'group' || obj.type === 'activeSelection';
+  if (['rect','circle','ellipse','triangle','polygon','path','line'].includes(obj.type) || isGroupish) {
+    let curFill = obj.fill;
+    if (isGroupish) { const fc = obj.getObjects().find(c => c.fill && c.fill !== 'transparent'); curFill = fc ? fc.fill : null; }
+    if ($i('sh-fill')) $i('sh-fill').value = (curFill && typeof curFill === 'string' && curFill !== 'transparent') ? curFill : '#7c3aed';
     if ($i('sh-no-fill')) $i('sh-no-fill').checked = !obj.fill || obj.fill === 'transparent';
     if ($i('sh-stroke') && obj.stroke) $i('sh-stroke').value = obj.stroke;
     if ($i('sh-stroke-w')) $i('sh-stroke-w').value = obj.strokeWidth || 0;
@@ -1706,14 +1717,27 @@ function updateRightPanel(obj) {
   $i('img-info').innerHTML = `Type: ${obj.type}<br>W: ${Math.round(obj.getScaledWidth())}px<br>H: ${Math.round(obj.getScaledHeight())}px<br>X: ${Math.round(obj.left)} Y: ${Math.round(obj.top)}`;
 }
 
-function updateActiveShape(prop, val) {
-  const obj = canvas.getActiveObject();
-  if (obj && ['rect','circle','ellipse','triangle','polygon','path','line'].includes(obj.type)) {
+const BARE_SHAPES = ['rect','circle','ellipse','triangle','polygon','polyline','path','line'];
+// Apply a style prop deep into groups/multi-selections so every child (e.g. each
+// path of a traced vector) gets recolored — even while grouped.
+function setStyleDeep(obj, prop, val) {
+  if (obj.type === 'group' || obj.type === 'activeSelection') {
+    obj.getObjects().forEach(c => setStyleDeep(c, prop, val));
+    obj.dirty = true;
+  } else {
     obj.set(prop, val);
-    canvas.renderAll();
-    saveHist();
+    obj.dirty = true;
   }
 }
+function updateActiveShape(prop, val) {
+  const obj = canvas.getActiveObject();
+  if (!obj) return;
+  if (BARE_SHAPES.includes(obj.type)) obj.set(prop, val);
+  else if (obj.type === 'group' || obj.type === 'activeSelection') setStyleDeep(obj, prop, val);
+  else return;
+  canvas.renderAll();
+  saveHist();
+}
 
 // ============================================================
 // LAYERS
@@ -2210,6 +2234,55 @@ function ungroupSelection() {
   canvas.requestRenderAll(); updateLayers(); saveHist(); toast('Ungrouped', 'ok');
 }
 
+// ============================================================
+// PATHFINDER — boolean ops (unite / subtract / intersect / exclude) via paper.js
+// ============================================================
+let paperReady = false;
+function ensurePaper() {
+  if (paperReady) return true;
+  if (typeof paper === 'undefined') { toast('Pathfinder still loading — try again in a second', 'warn'); return false; }
+  paper.setup(document.createElement('canvas')); paperReady = true; return true;
+}
+// Turn a Fabric object into ONE paper path (its sub-paths united). The object
+// must already be in absolute canvas coords (discard the activeSelection first).
+function objToPaperPath(obj) {
+  try {
+    const svg = '<svg xmlns="http://www.w3.org/2000/svg">' + obj.toSVG() + '</svg>';
+    const item = paper.project.importSVG(svg, { expandShapes: true, insert: true });
+    const arr = [];
+    (function gather(it) { if (!it) return; const cn = it.className; if (cn === 'Path' || cn === 'CompoundPath') arr.push(it); if (it.children) it.children.forEach(gather); })(item);
+    if (!arr.length) return null;
+    let r = arr[0]; for (let i = 1; i < arr.length; i++) r = r.unite(arr[i]);
+    return r;
+  } catch (e) { console.error(e); return null; }
+}
+function pathfinder(op) {
+  const ao = canvas.getActiveObject();
+  if (!ao || ao.type !== 'activeSelection' || ao.getObjects().length < 2) { toast('Select 2 or more shapes first', 'warn'); return; }
+  if (!ensurePaper()) return;
+  const objs = ao.getObjects().slice();            // bottom-to-top stacking order
+  const style = { fill: (objs[0].fill && objs[0].fill !== 'transparent') ? objs[0].fill : '#7c3aed', stroke: objs[0].stroke || null, strokeWidth: objs[0].strokeWidth || 0 };
+  canvas.discardActiveObject(); canvas.requestRenderAll();   // restore absolute coords
+  paper.project.clear();
+  const paths = objs.map(objToPaperPath).filter(Boolean);
+  if (paths.length < 2) { toast('Could not read those shapes', 'err'); return; }
+  let result;
+  try {
+    if (op === 'unite') result = paths.reduce((a, b) => a.unite(b));
+    else if (op === 'intersect') result = paths.reduce((a, b) => a.intersect(b));
+    else if (op === 'exclude') result = paths.reduce((a, b) => a.exclude(b));
+    else { result = paths[0]; for (let i = 1; i < paths.length; i++) result = result.subtract(paths[i]); } // subtract = bottom minus the ones above
+  } catch (e) { console.error(e); toast('Operation failed on these shapes', 'err'); return; }
+  const d = result && result.pathData;
+  if (!d) { toast('Result was empty', 'warn'); return; }
+  objs.forEach(o => canvas.remove(o));
+  const path = new fabric.Path(d, { fill: style.fill, stroke: style.stroke, strokeWidth: style.strokeWidth, fillRule: 'evenodd' });
+  path._name = 'Combined'; path._type = 'shape';
+  canvas.add(path); canvas.setActiveObject(path); canvas.requestRenderAll();
+  updateLayers(); saveHist();
+  toast(({ unite: 'United', subtract: 'Subtracted', intersect: 'Intersected', exclude: 'Excluded' })[op] + ' into one shape', 'ok');
+}
+
 // ============================================================
 // SAVE / LOAD PROJECTS  (autosave to localStorage + .json export/import)
 // ============================================================
@@ -2725,6 +2798,7 @@ document.addEventListener('DOMContentLoaded', () => {
   document.addEventListener('click', e => { if (!arrMenu.contains(e.target) && e.target.id !== 'btn-arrange') arrMenu.classList.remove('open'); });
   qsa('#arrange-menu [data-align]').forEach(b => b.onclick = () => alignObjects(b.dataset.align));
   qsa('#arrange-menu [data-arr]').forEach(b => b.onclick = () => { b.dataset.arr === 'group' ? groupSelection() : ungroupSelection(); arrMenu.classList.remove('open'); });
+  qsa('#arrange-menu [data-pf]').forEach(b => b.onclick = () => { pathfinder(b.dataset.pf); arrMenu.classList.remove('open'); });
 
   // SAVE / OPEN / NEW PROJECT
   $i('btn-save-proj').onclick = saveProjectFile;