@widgetic/canvas 0.5.4

package/dist/canvas/shapes/ShapeLibrary.js

@@ -0,0 +1,526 @@
+/**
+ * ShapeLibrary.ts
+ *
+ * Pre-defined SVG path data for special shapes (media controls, UI icons, etc.).
+ * All paths are normalized to a 100×100 viewBox so Fabric.js scales them uniformly.
+ *
+ * cornerRadiusMode per shape:
+ *   'none'        – shape already curved (circle, heart) → hide Corner Radius slider
+ *   'clipPath'    – clip bounding-box rect to rounded rect (arrows, …)
+ *   'strokeRound' – apply round linecap / linejoin (line-only: check, X, +, -)
+ *   'pathRegen'   – regenerate sub-shape path data with rounded corners (rects & polygons)
+ */
+// ── Path-regen helpers ────────────────────────────────────────────────────────
+/** Generate SVG path data for a rounded rectangle. */
+export function roundedRectPath(x, y, w, h, r) {
+    r = Math.min(r, w / 2, h / 2);
+    const x2 = x + w, y2 = y + h;
+    return [
+        `M ${x + r} ${y}`,
+        `L ${x2 - r} ${y}`, `Q ${x2} ${y} ${x2} ${y + r}`,
+        `L ${x2} ${y2 - r}`, `Q ${x2} ${y2} ${x2 - r} ${y2}`,
+        `L ${x + r} ${y2}`, `Q ${x} ${y2} ${x} ${y2 - r}`,
+        `L ${x} ${y + r}`, `Q ${x} ${y} ${x + r} ${y}`,
+        'Z',
+    ].join(' ');
+}
+/**
+ * Generate SVG path data for a convex polygon with rounded corners.
+ * @param points – vertices in order (any winding)
+ * @param r      – corner radius in path units
+ */
+export function roundedPolygonPath(points, r) {
+    if (r <= 0) {
+        return (points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p[0]} ${p[1]}`).join(' ') + ' Z');
+    }
+    const n = points.length;
+    // Cap r to 45% of the shortest edge to stay inside the polygon
+    let minEdge = Infinity;
+    for (let i = 0; i < n; i++) {
+        const a = points[i], b = points[(i + 1) % n];
+        const d = Math.sqrt((b[0] - a[0]) ** 2 + (b[1] - a[1]) ** 2);
+        if (d < minEdge)
+            minEdge = d;
+    }
+    const rClamped = Math.min(r, minEdge * 0.45);
+    let d = '';
+    for (let i = 0; i < n; i++) {
+        const prev = points[(i - 1 + n) % n];
+        const curr = points[i];
+        const next = points[(i + 1) % n];
+        // Unit vectors from corner toward its neighbours
+        const pLen = Math.sqrt((prev[0] - curr[0]) ** 2 + (prev[1] - curr[1]) ** 2) || 1;
+        const nLen = Math.sqrt((next[0] - curr[0]) ** 2 + (next[1] - curr[1]) ** 2) || 1;
+        const pn = [(prev[0] - curr[0]) / pLen, (prev[1] - curr[1]) / pLen];
+        const nn = [(next[0] - curr[0]) / nLen, (next[1] - curr[1]) / nLen];
+        // Points along each edge, distance rClamped from the corner vertex
+        const p1 = [curr[0] + pn[0] * rClamped, curr[1] + pn[1] * rClamped];
+        const p2 = [curr[0] + nn[0] * rClamped, curr[1] + nn[1] * rClamped];
+        d += i === 0
+            ? `M ${p1[0].toFixed(2)} ${p1[1].toFixed(2)} `
+            : `L ${p1[0].toFixed(2)} ${p1[1].toFixed(2)} `;
+        d += `Q ${curr[0]} ${curr[1]} ${p2[0].toFixed(2)} ${p2[1].toFixed(2)} `;
+    }
+    return d + 'Z';
+}
+/**
+ * Regenerate the full SVG path string for a library shape at the given roundness (0-100 %).
+ * Returns null for shapes that don't use pathRegen.
+ */
+export function generatePathForShape(shape, roundnessPercent) {
+    // Special case: curved-arrow has a Bezier-curve body that cannot be expressed as polygon
+    // regenData. Each L-command corner and the two C-to-L junctions are rounded individually
+    // using Quadratic Bezier arcs so the entire shape looks smooth at high roundness values.
+    if (shape.key === 'curved-arrow') {
+        const t = (roundnessPercent / 100) * 8; // max 8-unit radius at 100%
+        if (t < 0.1)
+            return null;
+        // Round a corner at (cx,cy): px/py is the INCOMING reference point, nx/ny is OUTGOING.
+        // For C commands use the adjacent control point as the reference direction.
+        // Returns { s: arcStart, e: arcEnd } strings for "…s Q cx cy e…" insertion.
+        const rc = (px, py, cx, cy, nx, ny) => {
+            const dx1 = px - cx, dy1 = py - cy;
+            const l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1) || 1;
+            const dx2 = nx - cx, dy2 = ny - cy;
+            const l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2) || 1;
+            const r = Math.min(t, l1 * 0.45, l2 * 0.45);
+            return {
+                s: `${(cx + dx1 / l1 * r).toFixed(1)} ${(cy + dy1 / l1 * r).toFixed(1)}`,
+                e: `${(cx + dx2 / l2 * r).toFixed(1)} ${(cy + dy2 / l2 * r).toFixed(1)}`,
+            };
+        };
+        // Corners with reference points for tangent direction:
+        // C0: M/Z corner at (80,20)  — see detailed note below
+        // C1: arrowhead TIP      (95,35)  prev=(80,20)  next=(80,50)
+        // C2: outer lower wing   (80,50)  prev=(95,35)  next=(80,40)
+        // C3: inner shoulder     (80,40)  prev=(80,50)  next=C cp1=(50,40)
+        // C4: C-to-L junction    (30,80)  prev=C cp2=(30,55) next=(15,80)  [modifies C endpoint]
+        // C5: tail end           (15,80)  prev=(30,80)  next=C cp1=(15,45)
+        //
+        // C0 corner at M(80,20) — ASYMMETRIC arc approach:
+        //
+        // Constraint: the Z-line (from C endpoint (80,25) to M(80,20)) is only 5px, so a symmetric
+        // rc() would cap the radius to 2.25px. Moving the C endpoint to get more room (previous
+        // attempts) either deformed the shape (moved horizontally) or changed the 0% base shape
+        // (moved vertically by changing pathData).
+        //
+        // Solution: use a fixed incoming side (C endpoint NEVER changes, always stays at (80,25))
+        // and a scaling outgoing side (M moves along the first-L edge toward (95,35) with t).
+        // — c0_s is always (80,25): the Z-line start, no modification to the C command at all.
+        // — c0_e scales with t: at t=0 → M=(80,20) = exact original path; at t=8 → M=(85.7,25.7).
+        // The Q arc from (80,25) Q(80,20) to c0_e smoothly rounds the top corner with up to 8px
+        // effective radius on the outgoing side, while the shape stays correct at any % level.
+        const r0 = Math.min(t, 21.2 * 0.45); // cap only by first-L edge length (21.2px × 0.45)
+        const c0_s = '80.0 25.0'; // original C endpoint — Z-line start, never moves
+        const c0_dirX = 15 / 21.2, c0_dirY = 15 / 21.2; // unit direction (80,20)→(95,35)
+        const c0_e = `${(80 + c0_dirX * r0).toFixed(1)} ${(20 + c0_dirY * r0).toFixed(1)}`;
+        const c1 = rc(80, 20, 95, 35, 80, 50); // arrowhead tip
+        const c2 = rc(95, 35, 80, 50, 80, 40); // outer lower arrowhead wing
+        const c3 = rc(80, 50, 80, 40, 50, 40); // inner shoulder (L→C, use C cp1 as direction)
+        const c4 = rc(30, 55, 30, 80, 15, 80); // C-to-L junction (C cp2 as incoming direction)
+        const c5 = rc(30, 80, 15, 80, 15, 45); // tail end (L→C, use C cp1 as direction)
+        return [
+            `M ${c0_e}`, // start at c0 arc end (Z closes back here)
+            `L ${c1.s} Q 95 35 ${c1.e}`, // arrowhead tip
+            `L ${c2.s} Q 80 50 ${c2.e}`, // outer lower arrowhead wing
+            `L ${c3.s} Q 80 40 ${c3.e}`, // inner shoulder
+            `C 50 40 30 55 ${c4.s} Q 30 80 ${c4.e}`, // curve body + C→L junction
+            `L ${c5.s} Q 15 80 ${c5.e}`, // tail end
+            `C 15 45 40 25 ${c0_s} Q 80 20 ${c0_e} Z`, // return C (endpoint unchanged) + M arc
+        ].join(' ');
+    }
+    // ── Shield: quadratic-arc rounding of 5 angular corners, bezier bottom preserved ──
+    // Path: M 50 5 L 90 20 L 90 55 C 90 75 70 90 50 95 C 30 90 10 75 10 55 L 10 20 Z
+    // Corners: P0=(50,5) P1=(90,20) P2=(90,55) P4=(10,55) P5=(10,20)
+    // At 0%, returns null so the original pathData is used exactly (no shape change).
+    if (shape.key === 'shield') {
+        const maxT = 10; // max arc radius in path units at 100% roundness
+        const t = (roundnessPercent / 100) * maxT;
+        if (t < 0.1)
+            return null;
+        // rc: quadratic bezier arc at (cx,cy), optional tMax clamps radius for corners
+        // adjacent to bezier curves to limit distortion of the bezier endpoints.
+        const rc2 = (px, py, cx, cy, nx, ny, tMax = t) => {
+            const tEff = Math.min(t, tMax);
+            const dx1 = px - cx, dy1 = py - cy;
+            const l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1) || 1;
+            const dx2 = nx - cx, dy2 = ny - cy;
+            const l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2) || 1;
+            const r = Math.min(tEff, l1 * 0.45, l2 * 0.45);
+            return {
+                s: `${(cx + dx1 / l1 * r).toFixed(1)} ${(cy + dy1 / l1 * r).toFixed(1)}`,
+                e: `${(cx + dx2 / l2 * r).toFixed(1)} ${(cy + dy2 / l2 * r).toFixed(1)}`,
+            };
+        };
+        // c0: top point (50,5) — prev is (10,20) via Z-line, next is (90,20)
+        // c1: top-right shoulder (90,20) — prev (50,5), next (90,55)
+        // c2: right side base (90,55) — limited tMax=4 to minimize bezier bottom distortion
+        // c3: bottom point (50,95) — junction of two bezier curves; reference points are
+        //     the last cp of C1 (70,90) and the first cp of C2 (30,90)
+        // c4: left side base (10,55)  — limited tMax=4 to minimize bezier bottom distortion
+        // c5: top-left shoulder (10,20) — prev (10,55), next (50,5)
+        const c0 = rc2(10, 20, 50, 5, 90, 20);
+        const c1 = rc2(50, 5, 90, 20, 90, 55);
+        const c2 = rc2(90, 20, 90, 55, 90, 75, 4); // cap arc size near bezier
+        const c3 = rc2(70, 90, 50, 95, 30, 90, 6); // bottom point (bezier junction, cap=6)
+        const c4 = rc2(10, 75, 10, 55, 10, 20, 4); // cap arc size near bezier
+        const c5 = rc2(10, 55, 10, 20, 50, 5);
+        // The top corner arc (c0) is placed LAST, just before Z, so the path visits:
+        // M(c0.e) → c1 arc → c2 arc → bezier1 (shortened to c3.s) → c3 Q arc →
+        // bezier2 (from c3.e, shortened) → c4 arc → c5 arc → c0 arc → Z
+        return [
+            `M ${c0.e}`, // start past top-point toward P1
+            `L ${c1.s} Q 90 20 ${c1.e}`, // arc at top-right shoulder
+            `L ${c2.s} Q 90 55 ${c2.e}`, // arc at right base (limited radius)
+            `C 90 75 70 90 ${c3.s}`, // bottom-right bezier, shortened to c3 arc entry
+            `Q 50 95 ${c3.e}`, // arc at bottom point
+            `C 30 90 10 75 ${c4.s}`, // bottom-left bezier, shortened to c4 arc entry
+            `Q 10 55 ${c4.e}`, // arc at left base (limited radius)
+            `L ${c5.s} Q 10 20 ${c5.e}`, // arc at top-left shoulder
+            `L ${c0.s} Q 50 5 ${c0.e}`, // arc at top point
+            `Z`, // zero-distance close back to M (c0.e)
+        ].join(' ');
+    }
+    if (shape.cornerRadiusMode !== 'pathRegen' || !shape.regenData)
+        return null;
+    return shape.regenData.map(sub => {
+        if (sub.type === 'fixed')
+            return sub.path;
+        if (sub.type === 'rect') {
+            const maxR = Math.min(sub.w, sub.h) / 2;
+            const r = (roundnessPercent / 100) * maxR;
+            return roundedRectPath(sub.x, sub.y, sub.w, sub.h, r);
+        }
+        // polygon
+        const pts = sub.points;
+        const n = pts.length;
+        let minEdge = Infinity;
+        for (let i = 0; i < n; i++) {
+            const a = pts[i], b = pts[(i + 1) % n];
+            minEdge = Math.min(minEdge, Math.sqrt((b[0] - a[0]) ** 2 + (b[1] - a[1]) ** 2));
+        }
+        const maxR = minEdge * 0.45;
+        const r = (roundnessPercent / 100) * maxR;
+        return roundedPolygonPath(pts, r);
+    }).join(' ');
+}
+// ── Geometric Shapes (library) ─────────────────────────────────────────────
+const GEOMETRIC_SHAPES = [
+    {
+        key: 'hexagon',
+        label: 'Hexagon',
+        category: 'Geometric Shapes',
+        pathData: 'M 50 3 L 93 27 L 93 73 L 50 97 L 7 73 L 7 27 Z',
+        iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><polygon points="12,2 21.5,7 21.5,17 12,22 2.5,17 2.5,7" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>`,
+        cornerRadiusMode: 'pathRegen',
+        regenData: [
+            { type: 'polygon', points: [[50, 3], [93, 27], [93, 73], [50, 97], [7, 73], [7, 27]] },
+        ],
+        lockAspectRatio: true,
+    },
+    {
+        key: 'oval',
+        label: 'Oval',
+        category: 'Geometric Shapes',
+        // Capsule/stadium shape: wide rounded rect with max corner radius (half the height).
+        // 160×90 content area, corner radius = 45 (half of 90). Produces semicircle caps like a pill.
+        pathData: 'M 50 5 L 110 5 Q 155 5 155 50 L 155 50 Q 155 95 110 95 L 50 95 Q 5 95 5 50 L 5 50 Q 5 5 50 5 Z',
+        iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="7" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>`,
+        cornerRadiusMode: 'none',
+        lockAspectRatio: false,
+    },
+];
+// ── Media Icons ──────────────────────────────────────────────────────────────
+const MEDIA_SHAPES = [
+    {
+        key: 'play',
+        label: 'Play',
+        category: 'Media Icons',
+        pathData: 'M 10 5 L 10 95 L 90 50 Z',
+        iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><polygon points="5,3 5,21 20,12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>`,
+        cornerRadiusMode: 'pathRegen',
+        regenData: [
+            { type: 'polygon', points: [[10, 5], [10, 95], [90, 50]] },
+        ],
+    },
+    {
+        key: 'pause',
+        label: 'Pause',
+        category: 'Media Icons',
+        pathData: 'M 15 5 L 15 95 L 35 95 L 35 5 Z M 65 5 L 65 95 L 85 95 L 85 5 Z',
+        iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><rect x="6" y="4" width="4" height="16" rx="1" fill="none" stroke="currentColor" stroke-width="1.5"/><rect x="14" y="4" width="4" height="16" rx="1" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>`,
+        cornerRadiusMode: 'pathRegen',
+        regenData: [
+            { type: 'rect', x: 15, y: 5, w: 20, h: 90 },
+            { type: 'rect', x: 65, y: 5, w: 20, h: 90 },
+        ],
+    },
+    {
+        key: 'stop',
+        label: 'Stop',
+        category: 'Media Icons',
+        pathData: 'M 10 10 L 10 90 L 90 90 L 90 10 Z',
+        iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="14" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>`,
+        cornerRadiusMode: 'pathRegen',
+        regenData: [
+            { type: 'rect', x: 10, y: 10, w: 80, h: 80 },
+        ],
+    },
+    {
+        key: 'rewind',
+        label: 'Rewind',
+        category: 'Media Icons',
+        pathData: 'M 50 5 L 50 95 L 5 50 Z M 95 5 L 95 95 L 50 50 Z',
+        iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><polygon points="12,3 12,21 3,12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><polygon points="21,3 21,21 12,12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>`,
+        cornerRadiusMode: 'pathRegen',
+        regenData: [
+            { type: 'polygon', points: [[50, 5], [50, 95], [5, 50]] },
+            { type: 'polygon', points: [[95, 5], [95, 95], [50, 50]] },
+        ],
+    },
+    {
+        key: 'fast-forward',
+        label: 'Fast Forward',
+        category: 'Media Icons',
+        pathData: 'M 5 5 L 5 95 L 50 50 Z M 50 5 L 50 95 L 95 50 Z',
+        iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><polygon points="3,3 3,21 12,12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><polygon points="12,3 12,21 21,12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>`,
+        cornerRadiusMode: 'pathRegen',
+        regenData: [
+            { type: 'polygon', points: [[5, 5], [5, 95], [50, 50]] },
+            { type: 'polygon', points: [[50, 5], [50, 95], [95, 50]] },
+        ],
+    },
+    {
+        key: 'record',
+        label: 'Record',
+        category: 'Media Icons',
+        // Already a circle — no corner rounding needed
+        pathData: 'M 50 5 A 45 45 0 1 1 49.999 5 Z',
+        iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><circle cx="12" cy="12" r="7" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>`,
+        cornerRadiusMode: 'none',
+    },
+];
+// ── Arrow Shapes ─────────────────────────────────────────────────────────────
+const ARROW_SHAPES = [
+    {
+        key: 'arrow-right',
+        label: 'Arrow Right',
+        category: 'Arrow Shapes',
+        pathData: 'M 5 40 L 65 40 L 65 20 L 95 50 L 65 80 L 65 60 L 5 60 Z',
+        iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M5 12 H19 M13 6 L19 12 L13 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+        cornerRadiusMode: 'pathRegen',
+        regenData: [{ type: 'polygon', points: [[5, 40], [65, 40], [65, 20], [95, 50], [65, 80], [65, 60], [5, 60]] }],
+    },
+    {
+        key: 'arrow-left',
+        label: 'Arrow Left',
+        category: 'Arrow Shapes',
+        pathData: 'M 95 40 L 35 40 L 35 20 L 5 50 L 35 80 L 35 60 L 95 60 Z',
+        iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M19 12 H5 M11 6 L5 12 L11 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+        cornerRadiusMode: 'pathRegen',
+        regenData: [{ type: 'polygon', points: [[95, 40], [35, 40], [35, 20], [5, 50], [35, 80], [35, 60], [95, 60]] }],
+    },
+    {
+        key: 'arrow-up',
+        label: 'Arrow Up',
+        category: 'Arrow Shapes',
+        pathData: 'M 40 95 L 40 35 L 20 35 L 50 5 L 80 35 L 60 35 L 60 95 Z',
+        iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M12 19 V5 M6 11 L12 5 L18 11" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+        cornerRadiusMode: 'pathRegen',
+        regenData: [{ type: 'polygon', points: [[40, 95], [40, 35], [20, 35], [50, 5], [80, 35], [60, 35], [60, 95]] }],
+    },
+    {
+        key: 'arrow-down',
+        label: 'Arrow Down',
+        category: 'Arrow Shapes',
+        pathData: 'M 60 5 L 60 65 L 80 65 L 50 95 L 20 65 L 40 65 L 40 5 Z',
+        iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M12 5 V19 M6 13 L12 19 L18 13" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+        cornerRadiusMode: 'pathRegen',
+        regenData: [{ type: 'polygon', points: [[60, 5], [60, 65], [80, 65], [50, 95], [20, 65], [40, 65], [40, 5]] }],
+    },
+    {
+        key: 'double-arrow',
+        label: 'Double Arrow',
+        category: 'Arrow Shapes',
+        pathData: 'M 30 20 L 5 50 L 30 80 L 30 62 L 70 62 L 70 80 L 95 50 L 70 20 L 70 38 L 30 38 Z',
+        iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M7 12 H17 M5 8 L1 12 L5 16 M19 8 L23 12 L19 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+        cornerRadiusMode: 'pathRegen',
+        regenData: [{ type: 'polygon', points: [[30, 20], [5, 50], [30, 80], [30, 62], [70, 62], [70, 80], [95, 50], [70, 20], [70, 38], [30, 38]] }],
+    },
+    {
+        key: 'curved-arrow',
+        label: 'Curved Arrow',
+        category: 'Arrow Shapes',
+        // Uses pathRegen mode: generatePathForShape() has a special case for 'curved-arrow'
+        // that rounds only the arrowhead tip via a Quadratic Bezier. clipPath was avoided
+        // because it clips the bounding box, cutting off arrowhead tips at high roundness.
+        // strokeRound was avoided because it only affects the stroke outline, not the fill corners.
+        pathData: 'M 80 20 L 95 35 L 80 50 L 80 40 C 50 40 30 55 30 80 L 15 80 C 15 45 40 25 80 25 Z',
+        iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M17 4 L21 8 L17 12 M21 8 C15 8 9 11 9 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+        cornerRadiusMode: 'pathRegen',
+        // regenData is intentionally omitted — generatePathForShape handles this shape directly.
+    },
+];
+// ── UI Icons ─────────────────────────────────────────────────────────────────
+const UI_ICON_SHAPES = [
+    {
+        key: 'check',
+        label: 'Check Mark',
+        category: 'UI Icons',
+        // Open path — round by setting strokeLineCap/strokeLineJoin
+        pathData: 'M 5 55 L 35 85 L 95 15',
+        iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M4 13 L9 18 L20 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+        cornerRadiusMode: 'strokeRound',
+    },
+    {
+        key: 'cross',
+        label: 'Cross / X',
+        category: 'UI Icons',
+        pathData: 'M 10 10 L 90 90 M 90 10 L 10 90',
+        iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M5 5 L19 19 M19 5 L5 19" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>`,
+        cornerRadiusMode: 'strokeRound',
+    },
+    {
+        key: 'plus',
+        label: 'Plus',
+        category: 'UI Icons',
+        pathData: 'M 50 10 L 50 90 M 10 50 L 90 50',
+        iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M12 5 V19 M5 12 H19" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>`,
+        cornerRadiusMode: 'strokeRound',
+    },
+    {
+        key: 'minus',
+        label: 'Minus',
+        category: 'UI Icons',
+        pathData: 'M 10 50 L 90 50',
+        iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M5 12 H19" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>`,
+        cornerRadiusMode: 'strokeRound',
+    },
+    {
+        key: 'info',
+        label: 'Info',
+        category: 'UI Icons',
+        // Outer circle is already curved — no corner rounding
+        pathData: 'M 50 5 A 45 45 0 1 1 49.999 5 Z M 50 30 L 50 32 M 50 42 L 50 72',
+        iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M12 8 V8.5 M12 11 V16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>`,
+        cornerRadiusMode: 'none',
+    },
+    {
+        key: 'warning',
+        label: 'Warning',
+        category: 'UI Icons',
+        // Outer triangle + inner ! lines (inner lines kept fixed)
+        pathData: 'M 50 5 L 95 90 L 5 90 Z M 50 40 L 50 60 M 50 70 L 50 72',
+        iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M12 3 L22 20 H2 Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M12 10 V14 M12 17 V17.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>`,
+        cornerRadiusMode: 'pathRegen',
+        regenData: [
+            { type: 'polygon', points: [[50, 5], [95, 90], [5, 90]] },
+            { type: 'fixed', path: 'M 50 40 L 50 60 M 50 70 L 50 72' },
+        ],
+    },
+];
+// ── Symbol Shapes ─────────────────────────────────────────────────────────────
+const SYMBOL_SHAPES = [
+    {
+        key: 'star',
+        label: 'Star',
+        category: 'Symbol Shapes',
+        pathData: 'M 50 5 L 61 35 L 95 35 L 68 57 L 79 91 L 50 70 L 21 91 L 32 57 L 5 35 L 39 35 Z',
+        iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>`,
+        // pathRegen rounds each polygon corner individually (outer tips + inner concave vertices)
+        cornerRadiusMode: 'pathRegen',
+        regenData: [
+            { type: 'polygon', points: [[50, 5], [61, 35], [95, 35], [68, 57], [79, 91], [50, 70], [21, 91], [32, 57], [5, 35], [39, 35]] },
+        ],
+    },
+    {
+        key: 'heart',
+        label: 'Heart',
+        category: 'Symbol Shapes',
+        // Already curved — no corner rounding
+        pathData: 'M 50 85 C 5 55 5 20 25 15 C 35 12 45 17 50 25 C 55 17 65 12 75 15 C 95 20 95 55 50 85 Z',
+        iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M12 21C12 21 3 14 3 8.5A4.5 4.5 0 0 1 12 6.5 4.5 4.5 0 0 1 21 8.5C21 14 12 21 12 21Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>`,
+        cornerRadiusMode: 'none',
+    },
+    {
+        key: 'speech-bubble',
+        label: 'Speech Bubble',
+        category: 'Symbol Shapes',
+        pathData: 'M 10 10 L 10 65 L 35 65 L 50 90 L 65 65 L 90 65 L 90 10 Z',
+        iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M4 4 H20 A2 2 0 0 1 22 6 V15 A2 2 0 0 1 20 17 H9 L4 21 V17 A2 2 0 0 1 2 15 V6 A2 2 0 0 1 4 4 Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>`,
+        // pathRegen rounds box corners; the tail corner also softens slightly
+        cornerRadiusMode: 'pathRegen',
+        regenData: [
+            { type: 'polygon', points: [[10, 10], [10, 65], [35, 65], [50, 90], [65, 65], [90, 65], [90, 10]] },
+        ],
+        // Speech bubbles are intentionally rectangular — allow free resize to set width/height
+        lockAspectRatio: false,
+    },
+    {
+        key: 'diamond',
+        label: 'Rhombus',
+        category: 'Symbol Shapes',
+        pathData: 'M 50 5 L 95 50 L 50 95 L 5 50 Z',
+        iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><polygon points="12,2 22,12 12,22 2,12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>`,
+        cornerRadiusMode: 'pathRegen',
+        regenData: [
+            { type: 'polygon', points: [[50, 5], [95, 50], [50, 95], [5, 50]] },
+        ],
+        lockAspectRatio: false,
+    },
+    {
+        key: 'lightning',
+        label: 'Lightning',
+        category: 'Symbol Shapes',
+        pathData: 'M 55 5 L 20 52 L 45 52 L 38 95 L 80 42 L 55 42 Z',
+        iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M13 2 L5 13 H11 L9 22 L19 9 H13 Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>`,
+        cornerRadiusMode: 'pathRegen',
+        regenData: [
+            { type: 'polygon', points: [[55, 5], [20, 52], [45, 52], [38, 95], [80, 42], [55, 42]] },
+        ],
+        lockAspectRatio: false,
+    },
+    {
+        key: 'shield',
+        label: 'Shield',
+        category: 'Symbol Shapes',
+        pathData: 'M 50 5 L 90 20 L 90 55 C 90 75 70 90 50 95 C 30 90 10 75 10 55 L 10 20 Z',
+        iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M12 3 L20 7 V13 C20 17.5 16.5 21 12 22 C7.5 21 4 17.5 4 13 V7 Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>`,
+        cornerRadiusMode: 'pathRegen',
+        lockAspectRatio: false,
+    },
+];
+/** All library shapes, grouped by category (Geometric first, then Arrows) */
+export const SHAPE_LIBRARY = [
+    ...GEOMETRIC_SHAPES,
+    ...ARROW_SHAPES,
+    ...MEDIA_SHAPES,
+    ...UI_ICON_SHAPES,
+    ...SYMBOL_SHAPES,
+];
+/**
+ * Keyed shape index: single canonical id→shape lookup, built once at module
+ * load. Replaces the repeated `SHAPE_LIBRARY.find(s => s.key === ...)`
+ * linear scans across Canvas.svelte. Keys are unique by construction
+ * (categories partition the array); a duplicate would be an authoring bug.
+ */
+const SHAPE_LIBRARY_BY_KEY = new Map(SHAPE_LIBRARY.map(shape => [shape.key, shape]));
+/**
+ * Look up a library shape definition by its stable key.
+ * Returns undefined for unknown keys (dynamic/legacy shape keys).
+ */
+export function getShapeByKey(key) {
+    if (!key)
+        return undefined;
+    return SHAPE_LIBRARY_BY_KEY.get(key);
+}
+/** Shapes grouped by category for rendering in the UI */
+export function getShapesByCategory() {
+    const map = new Map();
+    for (const shape of SHAPE_LIBRARY) {
+        const existing = map.get(shape.category) ?? [];
+        existing.push(shape);
+        map.set(shape.category, existing);
+    }
+    return map;
+}

package/dist/canvas/shapes/WidgetShape.d.ts

@@ -0,0 +1,21 @@
+import { ImageShape } from './ImageShape';
+export declare const WIDGET_SHAPE_EXTRA_PROPS: string[];
+export declare const WIDGET_SHAPE_CUSTOM_PROPS: string[];
+export declare class WidgetShape extends ImageShape {
+    static type: string;
+    _isWidgetImage: boolean;
+    _widgetId: string | null;
+    _widgetName: string | null;
+    /** True when _widgetId no longer exists in the host widget list (deleted or moved). */
+    _widgetOrphaned: boolean;
+    /** Custom placeholder overlay: replace generic "Drop image" text with the widget name. */
+    _render(ctx: CanvasRenderingContext2D): void;
+    private _renderWidgetPlaceholder;
+    toObject(propertiesToInclude?: any[]): any;
+    static fromObject(object: Record<string, unknown>, options?: Record<string, unknown>): Promise<WidgetShape>;
+}
+/**
+ * Upgrades an ImageShape to a WidgetShape by swapping the prototype chain.
+ * Called when user clicks "Convert to Widget".
+ */
+export declare function upgradeToWidgetShape(obj: any): WidgetShape | null;