@widgetic/canvas 0.5.4 → 0.5.7

package/dist/canvas/Canvas.svelte

@@ -153,6 +153,10 @@
     // (white fill, dark stroke) on all newly created objects
     export let wireframeMode: boolean = true;
 
+    // Extra canvas chrome (undo/redo/lock, frame, image, shape library).
+    // Default off for the sketch MVP. Same pattern as wireframeMode: keep the code, hide the UI.
+    export let advancedFeatures: boolean = false;
+
     // Callback fired once when Fabric canvas is fully initialized and ready
     export let onReady: (() => void) | null = null;
 
@@ -213,6 +217,9 @@
     // Callback: fires when the user requests a screenshot refresh for the linked widget.
     export let onRefreshScreenshot: ((widgetId: string) => void) | null = null;
 
+    /** Host persists canvases.primary_widget_id after Canvas paints the red stroke. */
+    export let onSetPrimaryWidget: ((widgetId: string) => void) | null = null;
+
     // Widget name resolver: given a widgetId, returns the widget name (or null).
     // Used by PropsPanel to display the linked widget's name.
     export let getWidgetName: ((widgetId: string) => string | null) | null = null;
@@ -305,7 +312,7 @@
     let activeEditingTextbox: Textbox | null = null;
 
     const MIN_DRAW_DISTANCE = 4;
-    const MIN_TEXTBOX_WIDTH = 120;
+    const MIN_TEXTBOX_WIDTH = 15;
 
     // Clipboard for copy/paste functionality
     let clipboard: any = null;
@@ -361,6 +368,237 @@
         return `${Date.now().toString(36)}-${Math.random().toString(36).substr(2, 9)}`;
     }
 
+    /** Regular Fabric Group currently in double-click edit mode (children selectable). */
+    let activeEditingGroup: any = null;
+    let isExitingGroupEdit = false;
+    let isRedirectingGroupSelection = false;
+
+    function isRegularGroup(obj: any): boolean {
+        if (!obj || isFrameShape(obj)) return false;
+        if ((obj as any)._isWidgetImage) return false;
+        return String(obj.type || '').toLowerCase() === 'group';
+    }
+
+    const GROUP_IDLE_STROKE = '#64748b';
+    const GROUP_IDLE_DASH = [8, 5];
+    const GROUP_IDLE_STROKE_WIDTH = 1.5;
+    /** Hide the idle dashed outline during toDataURL / convert screenshots. */
+    let skipGroupIdleOutline = false;
+
+    /** Stamp top-level paint order before ActiveSelection swallows children. */
+    function stampTopLevelPaintOrder() {
+        if (!canvas) return;
+        canvas.getObjects().forEach((obj: any, i: number) => {
+            const t = String(obj.type || '').toLowerCase();
+            if (t === 'activeselection' || t === 'activeSelection') return;
+            obj._canvasPaintOrder = i;
+        });
+    }
+
+    function isGroupActivelySelected(group: any): boolean {
+        if (!canvas || !group) return false;
+        const active = canvas.getActiveObject() as any;
+        if (!active) return false;
+        if (active === group) return true;
+        const type = String(active.type || '').toLowerCase();
+        if ((type === 'activeselection' || type === 'activeSelection') && typeof active.getObjects === 'function') {
+            return active.getObjects().includes(group);
+        }
+        return false;
+    }
+
+    /** Group chrome (fill/stroke behind-or-around children) + idle dashed outline.
+     *  Idle dashes are skipped while the group is selected and during screenshots. */
+    function applyGroupIdleOutlineRender(group: any) {
+        if (!isRegularGroup(group) || (group as any)._hasGroupOutlineRender) return;
+        (group as any)._hasGroupOutlineRender = true;
+        const originalDrawObject = group.drawObject.bind(group);
+        group.drawObject = function (ctx: CanvasRenderingContext2D, forClipping?: boolean, context?: any) {
+            const w = this.width;
+            const h = this.height;
+            const scale = Math.max(this.scaleX || 1, this.scaleY || 1);
+            const groupFill = (this as any)._groupFill;
+            const fillOpacity = (this as any)._groupFillOpacity ?? 1;
+            if (w && h && groupFill && groupFill !== '' && groupFill !== 'transparent') {
+                ctx.save();
+                ctx.fillStyle = fillOpacity < 1 ? colorToRgba(groupFill, fillOpacity) : groupFill;
+                ctx.fillRect(-w / 2, -h / 2, w, h);
+                ctx.restore();
+            }
+            originalDrawObject(ctx, forClipping, context);
+            if (forClipping || !w || !h) return;
+
+            const groupStroke = (this as any)._groupStroke;
+            const groupStrokeWidth = (this as any)._groupStrokeWidth ?? 0;
+            if (groupStroke && groupStrokeWidth > 0) {
+                ctx.save();
+                ctx.strokeStyle = groupStroke;
+                ctx.lineWidth = groupStrokeWidth / scale;
+                const dash = (this as any)._groupStrokeDashArray;
+                ctx.setLineDash(Array.isArray(dash) && dash.length ? dash : []);
+                ctx.beginPath();
+                ctx.rect(-w / 2, -h / 2, w, h);
+                ctx.stroke();
+                ctx.restore();
+                return;
+            }
+
+            if (skipGroupIdleOutline || isGroupActivelySelected(this)) return;
+            ctx.save();
+            ctx.strokeStyle = GROUP_IDLE_STROKE;
+            ctx.lineWidth = GROUP_IDLE_STROKE_WIDTH / scale;
+            ctx.setLineDash(GROUP_IDLE_DASH);
+            ctx.beginPath();
+            ctx.rect(-w / 2, -h / 2, w, h);
+            ctx.stroke();
+            ctx.restore();
+        };
+    }
+
+    /** Regular Groups stay uncached so children remain visible. `interactive` is
+     *  false by default (click selects the group). Double-click enters edit mode. */
+    function applyInteractiveGroupFlags(group: any) {
+        if (!group || isFrameShape(group)) return;
+        if (!isRegularGroup(group)) return;
+        group.subTargetCheck = true;
+        group.objectCaching = false;
+        if (!(group as any)._groupEditMode) {
+            group.interactive = false;
+        }
+        applyGroupIdleOutlineRender(group);
+        group.getObjects?.()?.forEach((child: any) => applyInteractiveGroupFlags(child));
+    }
+
+    function snapshotGroupChildrenWorld(group: any): Array<{ obj: any; world: number[] }> {
+        return (group.getObjects?.() || []).map((obj: any) => ({
+            obj,
+            world: obj.calcTransformMatrix().slice(),
+        }));
+    }
+
+    function copyRegularGroupIdentity(fromGroup: any, toGroup: any) {
+        toGroup._objectId = fromGroup._objectId;
+        toGroup._customType = fromGroup._customType || 'group';
+        toGroup._groupFill = fromGroup._groupFill;
+        toGroup._groupStroke = fromGroup._groupStroke;
+        toGroup._groupStrokeWidth = fromGroup._groupStrokeWidth;
+        toGroup._groupFillOpacity = fromGroup._groupFillOpacity;
+        toGroup._groupStrokeDashArray = fromGroup._groupStrokeDashArray;
+        toGroup._canvasPaintOrder = fromGroup._canvasPaintOrder;
+        toGroup.set({ fill: '', stroke: '', strokeWidth: 0, backgroundColor: '' });
+        applyInteractiveGroupFlags(toGroup);
+    }
+
+    /**
+     * Leave children in canvas-absolute (world) space without FitContentLayout
+     * re-offsetting them. `removeAll()` would apply the *old* group matrix again.
+     */
+    function detachGroupChildrenAtWorld(
+        group: any,
+        snapshots: Array<{ obj: any; world: number[] }>,
+    ) {
+        const applyTransformToObject = (fabricUtil as any).applyTransformToObject;
+        group._activeObjects = [];
+        for (const { obj, world } of snapshots) {
+            if (typeof group._watchObject === 'function') {
+                group._watchObject(false, obj);
+            }
+            // Unset parent first — applyTransformToObject writes the object's
+            // own matrix; if `group` is still set, world = group * own (double).
+            obj._set?.('group', undefined);
+            obj._set?.('parent', undefined);
+            obj.group = undefined;
+            obj.parent = undefined;
+            applyTransformToObject(obj, world);
+            obj.setCoords?.();
+        }
+        group._objects = [];
+    }
+
+    /**
+     * Ungroup at current world positions, then Group() again (same path as
+     * onGroupSelection). Avoids the interactive-exit snap-back.
+     */
+    function rebuildRegularGroupFromWorld(
+        group: any,
+        snapshots = snapshotGroupChildrenWorld(group),
+    ): any {
+        if (!canvas || !group) return group;
+        if (!snapshots.length) return group;
+        const children = snapshots.map((entry) => entry.obj);
+        if (group.group) {
+            canvasLog('Canvas: skip group rebuild inside parent', group.group._customType);
+            return group;
+        }
+        const stackIndex = canvas.getObjects().indexOf(group);
+
+        detachGroupChildrenAtWorld(group, snapshots);
+        canvas.remove(group);
+
+        const newGroup = new Group(children, {
+            subTargetCheck: true,
+            interactive: false,
+            objectCaching: false,
+            fill: '',
+            stroke: '',
+            strokeWidth: 0,
+            backgroundColor: '',
+        });
+        copyRegularGroupIdentity(group, newGroup);
+        canvas.add(newGroup);
+        if (stackIndex >= 0 && typeof (canvas as any).moveObjectTo === 'function') {
+            (canvas as any).moveObjectTo(newGroup, stackIndex);
+        }
+        stampTopLevelPaintOrder();
+        canvasLog('Canvas: rebuilt group after edit', {
+            children: children.length,
+            objectId: newGroup._objectId,
+        });
+        return newGroup;
+    }
+
+    function exitGroupEdit(reselectGroup = false) {
+        const group = activeEditingGroup;
+        if (!group || isExitingGroupEdit) return;
+        isExitingGroupEdit = true;
+        // World matrices BEFORE discard — deselect remaps against the old box.
+        const snapshots = snapshotGroupChildrenWorld(group);
+        // Clear before discard: selection:cleared would otherwise re-enter
+        // exitGroupEdit and snapshot already-remapped (snapped) coords.
+        activeEditingGroup = null;
+        (group as any)._groupEditMode = false;
+        try {
+            if (canvas) {
+                const active = canvas.getActiveObject();
+                if (active && active !== group) {
+                    canvas.discardActiveObject();
+                }
+            }
+            group.interactive = false;
+            const rebuilt = rebuildRegularGroupFromWorld(group, snapshots);
+            canvasLog('Canvas: exited group edit');
+            if (reselectGroup && canvas && rebuilt) {
+                canvas.setActiveObject(rebuilt);
+            }
+            canvas?.requestRenderAll();
+        } finally {
+            isExitingGroupEdit = false;
+        }
+    }
+
+    function enterGroupEdit(group: any) {
+        if (!group || !isRegularGroup(group)) return;
+        if (activeEditingGroup && activeEditingGroup !== group) {
+            exitGroupEdit(false);
+        }
+        (group as any)._groupEditMode = true;
+        group.interactive = true;
+        group.subTargetCheck = true;
+        group.objectCaching = false;
+        activeEditingGroup = group;
+        canvasLog('Canvas: entered group edit', { children: group.getObjects?.()?.length });
+    }
+
     // Text settings
     let textBoxPlaceholder = 'Type here';
     let textFontSize = 20;
@@ -399,6 +637,18 @@
         scaled: fabric.IEventHandler<Event>;
     } | null = null;
 
+    /**
+     * Pending multi-selection conversions, keyed by the selection's _objectId.
+     * convertObjectToWidget snapshots children + bounds here; the later
+     * replaceObjectWithWidgetImage consumes the entry. Needed because Fabric 6
+     * ActiveSelection empties itself on deselect (onDeselect → removeAll), so
+     * the selection state cannot be relied on after the convert click.
+     */
+    const pendingSelectionConversions = new Map<
+        string,
+        { children: any[]; bounds: { left: number; top: number; width: number; height: number } }
+    >();
+
     /**
      * HELPER FUNCTIONS
      */
@@ -406,45 +656,49 @@
     // Capture screenshot of selected object(s)
     async function captureObjectScreenshot(target: any): Promise<string> {
         if (!canvas) return '';
-        
+
+        // Fabric 6 hazard: ActiveSelection.onDeselect() calls removeAll(), which
+        // EMPTIES the selection. Read everything we need from the selection
+        // BEFORE any discardActiveObject(), and never discard mid-capture.
+        const isMultiSelection =
+            target.type === 'activeSelection' || target.type === 'activeselection';
+        const selectionChildren = isMultiSelection ? target.getObjects() : [];
+        const selectionBounds = target.getBoundingRect();
+
+        skipGroupIdleOutline = true;
         try {
-            // Deselect object temporarily to capture without selection controls
-            const activeObject = canvas.getActiveObject();
-            canvas.discardActiveObject();
-            canvas.renderAll();
-            
             let dataUrl = '';
-            
-            // For activeSelection (multiple objects), we need to handle differently
-            if (target.type === 'activeSelection' || target.type === 'activeselection') {
-                // Clone objects to a temporary canvas
-                const objects = target.getObjects();
-                const tempCanvas = new fabric.Canvas(null, {
-                    width: target.width + 40,
-                    height: target.height + 40,
-                    backgroundColor: null
-                });
-                
-                // Clone and add each object
-                for (const obj of objects) {
-                    const cloned = await obj.clone();
-                    // Adjust position relative to group center
-                    cloned.set({
-                        left: (tempCanvas.width / 2) + (obj.left - target.left),
-                        top: (tempCanvas.height / 2) + (obj.top - target.top)
-                    });
-                    tempCanvas.add(cloned);
+
+            if (isMultiSelection) {
+                // Multi-selection: capture on the REAL canvas — hide everything
+                // outside the selection, render, crop the selection's bounds.
+                // Do NOT discard the selection: in Fabric 6 discarding empties it
+                // (onDeselect → removeAll) and the children would vanish. Selection
+                // controls live on the upper canvas, so toDataURL never shows them.
+                const childSet = new Set(selectionChildren);
+                const isHidden: Array<[any, boolean]> = [];
+                for (const o of canvas.getObjects()) {
+                    if (!childSet.has(o) && o.visible) {
+                        o.visible = false;
+                        isHidden.push([o, true]);
+                    }
                 }
-                
-                tempCanvas.renderAll();
-                dataUrl = tempCanvas.toDataURL({
+                canvas.renderAll();
+                dataUrl = canvas.toDataURL({
                     format: 'png',
-                    multiplier: 2
+                    multiplier: 2,
+                    left: Math.floor(selectionBounds.left),
+                    top: Math.floor(selectionBounds.top),
+                    width: Math.max(1, Math.ceil(selectionBounds.width)),
+                    height: Math.max(1, Math.ceil(selectionBounds.height))
                 });
-                tempCanvas.dispose();
+                for (const [o, wasVisible] of isHidden) {
+                    if (wasVisible) o.visible = true;
+                }
+                canvas.requestRenderAll();
             } else {
-                // Single object - use toDataURL directly on the object
-                // This exports only the object with transparency preserved
+                // Single object — toDataURL exports only the object with
+                // transparency preserved, no deselect needed either.
                 dataUrl = target.toDataURL({
                     format: 'png',
                     multiplier: 2,
@@ -452,19 +706,16 @@
                     withoutShadow: false
                 });
             }
-            
-            canvasLog('Capture completed for:', target.type);
-            
-            // Restore selection
-            if (activeObject) {
-                canvas.setActiveObject(activeObject);
-                canvas.renderAll();
-            }
-            
+
+            canvasLog('Capture completed for:', target.type, '| dataUrl length:', dataUrl.length);
+
             return dataUrl;
         } catch (e) {
             console.error('Error capturing screenshot:', e);
             return '';
+        } finally {
+            skipGroupIdleOutline = false;
+            canvas.requestRenderAll();
         }
     }
     
@@ -539,8 +790,33 @@
         const isFrame = isFrameShape(obj);
         const children = isFrame ? getFrameChildren(obj) : [];
         const bounds = obj.getBoundingRect();
+        const isMultiSelection =
+            obj.type === 'activeSelection' || obj.type === 'activeselection';
+
+        // A multi-selection has no stable _objectId (it is a transient container).
+        // Allocate one so the host's replace step can resolve what to remove —
+        // without it the payload carried an invented obj_<timestamp> id that
+        // matched nothing and the original sketch shapes stayed on the canvas.
+        if (isMultiSelection && !(obj as any)._objectId) {
+            (obj as any)._objectId = generateObjectId();
+        }
 
         try {
+            // Snapshot multi-selection children + bounds BEFORE anything can
+            // deselect the selection (onDeselect empties it in Fabric 6).
+            // replaceObjectWithWidgetImage consumes this by selection id.
+            if (isMultiSelection) {
+                pendingSelectionConversions.set((obj as any)._objectId, {
+                    children: [...obj.getObjects()],
+                    bounds: {
+                        left: bounds.left,
+                        top: bounds.top,
+                        width: bounds.width,
+                        height: bounds.height
+                    }
+                });
+            }
+
             const screenshot = await captureObjectScreenshot(obj);
 
             const objectName = isFrame
@@ -579,8 +855,6 @@
                 ShapeTypes: payload.metadata.shapeTypes,
             });
 
-            obj._isConverting = true;
-            selectedObject = selectedObject;
             onConvertToWidget(payload);
         } catch (err) {
             console.error('Canvas: convertObjectToWidget failed', err);
@@ -595,6 +869,16 @@
         selectedObject = null;
     }
 
+    /** Same as Ctrl+D / context Duplicate — clones selection (widget shapes notify host). */
+    export function duplicateSelectedObjects() {
+        return _duplicateSelected();
+    }
+
+    /** Same as Delete key / context Delete. */
+    export function deleteSelectedObjects() {
+        return _deleteActiveObjects();
+    }
+
     /** Re-link a cloned object to a new widget (called by host after duplicateWidget API).
      *  Selects the object on canvas so Props Panel updates with the correct widget info. */
     /** Mark the currently selected object as "duplicating in progress" so PropsPanel shows a loader. */
@@ -652,32 +936,77 @@
     ): Promise<string | null> {
         if (!canvas) return null;
 
-        const obj = canvas.getObjects().find((o: any) => o._objectId === objectId);
-        if (!obj) {
+        // Convert registry — convertObjectToWidget snapshots the selection's
+        // children + bounds under the selection's _objectId BEFORE anything can
+        // deselect it (Fabric 6 ActiveSelection.onDeselect() → removeAll() empties
+        // the selection, so live lookups are unreliable by replace time).
+        const pendingConversion = pendingSelectionConversions.get(objectId);
+        pendingSelectionConversions.delete(objectId);
+
+        // Resolve a single (non-selection) source object by id, if any.
+        let obj = canvas.getObjects().find((o: any) => o._objectId === objectId);
+        let selectionChildren: any[] = [];
+        if (pendingConversion) {
+            // Registry path: still-present children are removed below.
+            selectionChildren = pendingConversion.children.filter((c: any) =>
+                canvas!.getObjects().includes(c)
+            );
+        } else if (!obj) {
+            const active = canvas.getActiveObject();
+            if (
+                active &&
+                (active.type === 'activeSelection' || active.type === 'activeselection') &&
+                (active as any)._objectId === objectId
+            ) {
+                selectionChildren = (active as any).getObjects();
+            } else {
+                // Last resort: a top-level object whose children match (group)
+                const byChild = canvas.getObjects().find((o: any) =>
+                    typeof o.getObjects === 'function' &&
+                    o.getObjects().some((c: any) => c._objectId === objectId)
+                );
+                obj = byChild;
+            }
+        }
+        if (!obj && selectionChildren.length === 0) {
             canvasWarn('Canvas: replaceObjectWithWidgetImage — object not found', objectId);
             return null;
         }
 
         try {
-            const bounds = obj.getBoundingRect();
-            const isFrame = isFrameShape(obj);
+            const isFrame = obj ? isFrameShape(obj) : false;
+            const bounds = pendingConversion?.bounds ??
+                (obj
+                    ? obj.getBoundingRect()
+                    : (() => {
+                        const a = canvas.getActiveObject() as any;
+                        return a ? a.getBoundingRect() : { left: 0, top: 0, width: 200, height: 200 };
+                    })());
 
             // Preserve original visual properties before removing
-            const originalStroke = (obj as any).stroke || '#94a3b8';
-            const originalStrokeWidth = (obj as any).strokeWidth ?? 2;
-            const originalStrokeDashArray = (obj as any).strokeDashArray || null;
-            const originalRx = (obj as any).rx || 0;
-            const originalRy = (obj as any).ry || 0;
-            const originalOpacity = (obj as any).opacity ?? 1;
-            const originalFill = (obj as any).fill || null;
-
-            if (isFrame) {
-                const children = getFrameChildren(obj);
-                const bg = getFrameBackground(obj);
+            const originalStroke = (obj as any)?.stroke || '#94a3b8';
+            const originalStrokeWidth = (obj as any)?.strokeWidth ?? 2;
+            const originalStrokeDashArray = (obj as any)?.strokeDashArray || null;
+            const originalRx = (obj as any)?.rx || 0;
+            const originalRy = (obj as any)?.ry || 0;
+            const originalOpacity = (obj as any)?.opacity ?? 1;
+            const originalFill = (obj as any)?.fill || null;
+
+            if (isFrame && obj) {
+                const children = getFrameChildren(obj as any);
+                const bg = getFrameBackground(obj as any);
                 for (const child of children) canvas.remove(child);
                 if (bg) canvas.remove(bg);
             }
-            canvas.remove(obj);
+            // Multi-selection: remove every child shape so the sketch is absorbed
+            // into the single WidgetShape (F4 — no duplicate shapes left).
+            if (selectionChildren.length > 0) {
+                // Deselect first so Fabric doesn't re-add children on discard.
+                // After this point nothing reads from the (now emptied) selection.
+                canvas.discardActiveObject();
+                for (const child of selectionChildren) canvas.remove(child);
+            }
+            if (obj) canvas.remove(obj);
 
             const widgetImage = createImagePlaceholder({
                 left: bounds.left,
@@ -708,12 +1037,16 @@
 
             canvas.add(widgetImage);
 
+            // Set image fields SYNCHRONOUSLY: an autosave that runs before the
+            // <img> loads must still persist the screenshot URL (previously the
+            // JSON saved a bare placeholder and the sketch was lost on reload).
+            widgetImage._imageUrl = screenshotDataUrl;
+            widgetImage._hasImage = true;
+            widgetImage._originalFilename = 'widget-screenshot.png';
+
             const img = new Image();
             img.onload = () => {
                 widgetImage._imageElement = img;
-                widgetImage._hasImage = true;
-                widgetImage._imageUrl = screenshotDataUrl;
-                widgetImage._originalFilename = 'widget-screenshot.png';
                 widgetImage._originalAspectRatio = img.width / img.height;
                 widgetImage.dirty = true;
                 canvas.requestRenderAll();
@@ -786,6 +1119,71 @@
         return false;
     }
 
+    /**
+     * Screen-space box of a widget shape plus the canvas element viewport.
+     * Used to park Widget Details left/right of the shape.
+     */
+    export function getWidgetShapeScreenRect(widgetId: string): {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        viewportLeft: number;
+        viewportTop: number;
+        viewportWidth: number;
+        viewportHeight: number;
+    } | null {
+        if (!canvas || !canvasEl || !widgetId) return null;
+        const obj = canvas.getObjects().find((o: any) => o._widgetId === widgetId);
+        if (!obj) {
+            canvasLog('Canvas: getWidgetShapeScreenRect — no shape for', widgetId);
+            return null;
+        }
+        const bbox = obj.getBoundingRect();
+        const canvasRect = canvasEl.getBoundingClientRect();
+        return {
+            left: canvasRect.left + bbox.left,
+            top: canvasRect.top + bbox.top,
+            width: bbox.width,
+            height: bbox.height,
+            viewportLeft: canvasRect.left,
+            viewportTop: canvasRect.top,
+            viewportWidth: canvasRect.width,
+            viewportHeight: canvasRect.height,
+        };
+    }
+
+    /** Screen-space box for any canvas object id (convert drafts use the grouped sketch). */
+    export function getObjectScreenRect(objectId: string): {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        viewportLeft: number;
+        viewportTop: number;
+        viewportWidth: number;
+        viewportHeight: number;
+    } | null {
+        if (!canvas || !canvasEl || !objectId) return null;
+        const obj = canvas.getObjects().find((o: any) => o._objectId === objectId);
+        if (!obj) {
+            canvasLog('Canvas: getObjectScreenRect — no object for', objectId);
+            return null;
+        }
+        const bbox = obj.getBoundingRect();
+        const canvasRect = canvasEl.getBoundingClientRect();
+        return {
+            left: canvasRect.left + bbox.left,
+            top: canvasRect.top + bbox.top,
+            width: bbox.width,
+            height: bbox.height,
+            viewportLeft: canvasRect.left,
+            viewportTop: canvasRect.top,
+            viewportWidth: canvasRect.width,
+            viewportHeight: canvasRect.height,
+        };
+    }
+
     /**
      * Get the current image data URL of a widget shape on the canvas.
      * Returns the base64 data URL or null if the shape is not found or has no image.
@@ -1043,12 +1441,12 @@
     function getPanZoomPositionClass(position: string): string {
         canvasLog('getPanZoomPositionClass: ', position);
         const positions: Record<string, string> = {
-            'TL': 'top-4 left-4',
-            'TC': 'top-4 left-1/2 -translate-x-1/2',
-            'TR': 'top-4 right-4',
-            'BL': 'bottom-20 left-4',
-            'BC': 'bottom-20 left-1/2 -translate-x-1/2',
-            'BR': 'bottom-20 right-4'
+            'TL': 'absolute z-10 top-4 left-4',
+            'TC': 'absolute z-10 top-4 left-1/2 -translate-x-1/2',
+            'TR': 'absolute z-10 top-4 right-4',
+            'BL': 'absolute z-10 bottom-20 left-4',
+            'BC': 'absolute z-10 bottom-20 left-1/2 -translate-x-1/2',
+            'BR': 'absolute z-10 bottom-20 right-4'
         };
         return positions[position] || positions['TL'];
     }
@@ -1084,6 +1482,10 @@
             // Let Fabric handle Shift+corner = proportional resize natively.
             // For _lockAspectRatio shapes, before:transform sets uniformScaling=true.
             (canvas as any).uniScaleKey = 'shiftKey';
+            // Free corner resize (not from center). Keep Alt off Fabric's centeredKey —
+            // Option is used for frame children, and a stuck altKey used to explode scales.
+            canvas.centeredScaling = false;
+            (canvas as any).centeredKey = null;
             
             // Set 'move' cursor as default hover cursor on ALL objects.
             // Set on both canvas level and prototype level for full coverage.
@@ -1693,8 +2095,10 @@
             let altKeyCurrentlyHeld = false;
             const trackAltKeyDown = (e: KeyboardEvent) => { if (e.altKey) altKeyCurrentlyHeld = true; };
             const trackAltKeyUp = (e: KeyboardEvent) => { if (!e.altKey) altKeyCurrentlyHeld = false; };
+            const trackAltKeyBlur = () => { altKeyCurrentlyHeld = false; };
             window.addEventListener('keydown', trackAltKeyDown);
             window.addEventListener('keyup', trackAltKeyUp);
+            window.addEventListener('blur', trackAltKeyBlur);
 
             // ── Custom right-click context menu ───────────────────────────────────
             // Prevent the browser default context menu on the canvas and show ours.
@@ -1718,12 +2122,17 @@
                 const transform = opt.transform;
                 if (!transform) return;
                 
-                // Disable Alt/Option-triggered centered scaling for Frame objects.
-                // Alt is used for "preserve children" resize on frames, not center-scale.
-                // The centeredKey check happens BEFORE before:transform, so we can't prevent it.
-                // Instead, override the transform origin from 'center' back to the correct corner.
-                if (isFrameShape(transform.target) && transform.originX === 'center' && transform.originY === 'center') {
-                    // Map corner handle to the correct opposite origin
+                // Only remap when Fabric forced origin=center on an object that is NOT
+                // natively center-origin (library icons / groups already use origin center).
+                // Remapping those made corner resize look like Alt-deflate.
+                const targetObj = transform.target as any;
+                const nativeCenterOrigin =
+                    targetObj?.originX === 'center' && targetObj?.originY === 'center';
+                if (
+                    !nativeCenterOrigin &&
+                    transform.originX === 'center' &&
+                    transform.originY === 'center'
+                ) {
                     const cornerOriginMap: Record<string, { x: string; y: string }> = {
                         tl: { x: 'right', y: 'bottom' },
                         tr: { x: 'left', y: 'bottom' },
@@ -1739,7 +2148,7 @@
                     if (origin) {
                         transform.originX = origin.x;
                         transform.originY = origin.y;
-                        canvasLog('Frame: overrode centered scaling origin for corner', corner, '→', origin);
+                        canvasLog('Canvas: overrode accidental centered origin for corner', corner, '→', origin);
                     }
                 }
                 
@@ -1768,13 +2177,19 @@
                         // Store the original corners BEFORE any transformation
                         // This ensures we have accurate positions to work with
                         const target = scalingTarget as any;
-                        const w = target.width * target.scaleX;
-                        const h = target.height * target.scaleY;
+                        const w = (target.width ?? 0) * (target.scaleX ?? 1);
+                        const h = (target.height ?? 0) * (target.scaleY ?? 1);
+                        const originX = target.originX ?? 'left';
+                        const originY = target.originY ?? 'top';
+                        const left = target.left ?? 0;
+                        const top = target.top ?? 0;
+                        const tlX = originX === 'center' ? left - w / 2 : originX === 'right' ? left - w : left;
+                        const tlY = originY === 'center' ? top - h / 2 : originY === 'bottom' ? top - h : top;
                         target._originalCorners = {
-                            tl: { x: target.left, y: target.top },
-                            tr: { x: target.left + w, y: target.top },
-                            bl: { x: target.left, y: target.top + h },
-                            br: { x: target.left + w, y: target.top + h }
+                            tl: { x: tlX, y: tlY },
+                            tr: { x: tlX + w, y: tlY },
+                            bl: { x: tlX, y: tlY + h },
+                            br: { x: tlX + w, y: tlY + h }
                         };
                         
                         // For frames: store original children metrics for Alt/Option key resize.
@@ -1917,6 +2332,15 @@
                 if ((obj as any)._customType === 'image') {
                     // Upgrade old Rect-based image placeholders to ImageShape (backward compat)
                     upgradeToImageShape(obj);
+                    if ((obj as any)._isWidgetImage) {
+                        if ((obj as any)._isPrimaryWidget) {
+                            obj.set({
+                                stroke: PRIMARY_WIDGET_STROKE,
+                                strokeWidth: PRIMARY_WIDGET_STROKE_WIDTH,
+                                strokeDashArray: null,
+                            });
+                        }
+                    }
                     canvasLog('Canvas: object:added — upgraded image shape for', (obj as any)._objectId || 'image');
                 }
 
@@ -2054,7 +2478,7 @@
                             // Textboxes use backgroundColor for their box fill.
                             // Default to white so the box fill opacity slider is visible.
                             obj.set({ backgroundColor: '#ffffff' });
-                        } else {
+                        } else if (String(obj.type || '').toLowerCase() !== 'group') {
                             obj.set({
                                 fill: WIREFRAME_FILL,
                                 stroke: WIREFRAME_STROKE,
@@ -2065,8 +2489,11 @@
                         canvasLog('Canvas: Wireframe defaults applied to new object', obj._objectId);
                     }
                 }
+                stampTopLevelPaintOrder();
             });
 
+            canvas.on('mouse:down:before', stampTopLevelPaintOrder);
+
             // ── Proportional resize lock: handled via canvas.uniformScaling in before:transform ──
             // Edge handles (ml/mr/mt/mb) are hidden for _lockAspectRatio shapes (see object:added).
             // canvas.uniformScaling=true is set in before:transform for the drag duration, which
@@ -2698,6 +3125,10 @@
                     isAltHeld = false;
                 }
             };
+            const handleGlobalAltBlur = () => {
+                isAltHeld = false;
+            };
+            window.addEventListener('blur', handleGlobalAltBlur);
             
             // Shared helper: delete whatever is currently active on the canvas.
             // Used by both the Delete key handler and the Cut (Ctrl+X) handler.
@@ -3012,6 +3443,13 @@
                     if (activeTool !== 'select') {
                         activateSelectTool();
                     }
+
+                    // Escape while inside a group exits edit mode and keeps the group selected
+                    if (activeEditingGroup) {
+                        exitGroupEdit(true);
+                        canvasLog('Canvas: Escape - Exited group edit');
+                        return;
+                    }
                     
                     // Deselect all objects
                     canvas.discardActiveObject();
@@ -3042,6 +3480,11 @@
                 '_textPadding',
                 // Text stroke properties
                 '_textStrokeColor', '_textStrokeWidth',
+                // Group chrome (fill/stroke around children, like Frame)
+                '_groupFill', '_groupStroke', '_groupStrokeWidth',
+                '_groupFillOpacity', '_groupStrokeDashArray',
+                '_canvasPaintOrder',
+                '_isPrimaryWidget',
             ];
             
             // Apply custom Image render to a cloned object
@@ -3982,6 +4425,8 @@
             (canvas as any)._globalShiftKeyupHandler = handleGlobalShiftKeyup;
             (canvas as any)._globalAltKeydownHandler = handleGlobalAltKeydown;
             (canvas as any)._globalAltKeyupHandler = handleGlobalAltKeyup;
+            (canvas as any)._globalAltBlurHandler = handleGlobalAltBlur;
+            (canvas as any)._altTrackBlur = trackAltKeyBlur;
             (canvas as any)._deleteKeyHandler = handleDeleteKeydown;
             (canvas as any)._arrowKeyHandler = handleArrowKeydown;
             (canvas as any)._selectAllHandler = handleSelectAllKeydown;
@@ -4084,6 +4529,28 @@
                     canvas.setActiveObject(activeObj.group);
                     return activeObj.group;
                 }
+
+                // Regular group children: only selectable in double-click edit mode.
+                // Otherwise promote the click to the parent group (tldraw-like).
+                const parent = activeObj.group;
+                if (parent && isRegularGroup(parent)) {
+                    if (activeEditingGroup === parent && parent.interactive) {
+                        return activeObj;
+                    }
+                    if (!isRedirectingGroupSelection) {
+                        isRedirectingGroupSelection = true;
+                        try {
+                            canvas.setActiveObject(parent);
+                        } finally {
+                            isRedirectingGroupSelection = false;
+                        }
+                    }
+                    return parent;
+                }
+
+                if (activeEditingGroup && activeObj !== activeEditingGroup) {
+                    exitGroupEdit(false);
+                }
                 
                 return activeObj;
             };
@@ -4170,10 +4637,12 @@
             
             const handleSelectionCleared = () => {
                 selectedObject = null;
-                canvasLog('Canvas: Selection cleared');
-                if (onNonWidgetSelected) {
-                    onNonWidgetSelected();
+                if (activeEditingGroup) {
+                    exitGroupEdit(false);
                 }
+                canvasLog('Canvas: Selection cleared');
+                // Do not close Widget Details here — Fabric also clears selection when
+                // switching from widget A to widget B, which reopened the previous panel.
             };
             
             canvas.on('selection:created', handleSelectionCreated);
@@ -4200,6 +4669,27 @@
                     return;
                 }
                 
+                // Regular Group: double-click enters edit mode (tldraw-like).
+                // Single click always selects the group; children are only
+                // selectable after this enter.
+                if (
+                    String(target.type || '').toLowerCase() === 'group' &&
+                    !isFrameShape(target) &&
+                    !(target as any)._isWidgetImage
+                ) {
+                    enterGroupEdit(target);
+                    const sub = Array.isArray(e.subTargets) ? e.subTargets[0] : null;
+                    if (sub && sub !== target) {
+                        canvas.setActiveObject(sub);
+                    }
+                    canvas.requestRenderAll();
+                    canvasLog('Canvas: entered group via double-click', {
+                        children: target.getObjects?.()?.length,
+                        subType: sub?.type,
+                    });
+                    return;
+                }
+
                 // Widget Image (linked to a widget): open WidgetDetails panel
                 // Must be checked BEFORE generic WidgetShape — widget shapes also have _customType === 'image'
                 if (onWidgetImageClick && (target as any)?._isWidgetImage && (target as any)?._widgetId) {
@@ -5028,6 +5518,12 @@
         if (canvas && (canvas as any)._altTrackUp) {
             window.removeEventListener('keyup', (canvas as any)._altTrackUp);
         }
+        if (canvas && (canvas as any)._altTrackBlur) {
+            window.removeEventListener('blur', (canvas as any)._altTrackBlur);
+        }
+        if (canvas && (canvas as any)._globalAltBlurHandler) {
+            window.removeEventListener('blur', (canvas as any)._globalAltBlurHandler);
+        }
         if (canvas && (canvas as any)._contextMenuHandler && (canvas as any)._contextMenuTarget) {
             (canvas as any)._contextMenuTarget.removeEventListener('contextmenu', (canvas as any)._contextMenuHandler);
         }
@@ -5061,6 +5557,9 @@
         if (canvas && (canvas as any)._frameInteriorMouseDownHandler) {
             canvas.off('mouse:down:before', (canvas as any)._frameInteriorMouseDownHandler);
         }
+        if (canvas) {
+            canvas.off('mouse:down:before', stampTopLevelPaintOrder);
+        }
         if (canvas && (canvas as any)._frameInteriorMouseUpHandler) {
             canvas.off('mouse:up', (canvas as any)._frameInteriorMouseUpHandler);
         }
@@ -5203,13 +5702,25 @@
         };
     };
 
-    const estimatePlaceholderWidth = () => {
-        if (!textBoxPlaceholder) {
-            return MIN_TEXTBOX_WIDTH;
+    /** Width that fits the current default/placeholder text on one line.
+     *  measureText is the wrap width; padding is drawn outside that, so only a
+     *  small extra is needed (avoid double-counting create padding). */
+    const measureDefaultTextboxWidth = () => {
+        const text = textBoxPlaceholder || '';
+        const extra = 2;
+        if (!text) return MIN_TEXTBOX_WIDTH;
+        try {
+            const fabricCtx = canvas && typeof canvas.getContext === 'function' ? canvas.getContext() : null;
+            const ctx = fabricCtx ?? document.createElement('canvas').getContext('2d');
+            if (ctx) {
+                ctx.font = `${textFontSize}px ${textFontFamily}`;
+                const measured = ctx.measureText(text).width;
+                return Math.max(MIN_TEXTBOX_WIDTH, Math.ceil(measured + extra));
+            }
+        } catch {
+            /* fall through to heuristic */
         }
-
-        const estimatedWidth = textBoxPlaceholder.length * textFontSize * 0.6;
-        return Math.max(MIN_TEXTBOX_WIDTH, estimatedWidth);
+        return Math.max(MIN_TEXTBOX_WIDTH, Math.ceil(text.length * textFontSize * 0.6 + extra));
     };
 
     const createArrowGeometry = (
@@ -6238,7 +6749,7 @@ function checkAndAddNewShapeToFrame(shape: any) {
                             previewObject = new Textbox(textBoxPlaceholder, {
                                 left: drawingStartPoint.x,
                                 top: drawingStartPoint.y,
-                                width: estimatePlaceholderWidth() + 12,
+                                width: measureDefaultTextboxWidth(),
                                 fontSize: textFontSize,
                                 fontFamily: textFontFamily,
                                 fill: textFillColor,
@@ -6262,7 +6773,7 @@ function checkAndAddNewShapeToFrame(shape: any) {
                         }
                     }
 
-                    const minWidth = 50;
+                    const minWidth = MIN_TEXTBOX_WIDTH;
                     const desiredWidth = Math.max(width, minWidth);
                     const left = Math.min(pointer.x, drawingStartPoint.x);
                     const top = Math.min(pointer.y, drawingStartPoint.y);
@@ -6290,8 +6801,9 @@ function checkAndAddNewShapeToFrame(shape: any) {
                     // On quick click (no drag), use the estimated placeholder width
                     // so the text fits nicely without wrapping.
                     const width = Math.abs(pointer.x - drawingStartPoint.x);
-                    const placeholderWidth = estimatePlaceholderWidth() + 12;
-                    const textboxWidth = width < MIN_DRAW_DISTANCE ? placeholderWidth : Math.max(width, 50);
+                    const textboxWidth = width < MIN_DRAW_DISTANCE
+                        ? measureDefaultTextboxWidth()
+                        : Math.max(width, MIN_TEXTBOX_WIDTH);
                     
                     // Calculate position (support drag in any direction)
                     const left = Math.min(pointer.x, drawingStartPoint.x);
@@ -6787,8 +7299,61 @@ function checkAndAddNewShapeToFrame(shape: any) {
     }
 
     /** No visible Fabric stroke on widget shapes — preview image may supply its own border. */
+    const PRIMARY_WIDGET_STROKE = '#DC2626';
+    const PRIMARY_WIDGET_STROKE_WIDTH = 2;
+
+    /** Red stroke marks the canvas primary widget; others stay borderless. */
+    function applyPrimaryWidgetStrokes(primaryWidgetId: string | null) {
+        if (!canvas) return;
+        for (const obj of canvas.getObjects()) {
+            const anyObj = obj as any;
+            if (!anyObj._isWidgetImage) continue;
+            const isPrimary = !!(primaryWidgetId && anyObj._widgetId === primaryWidgetId);
+            anyObj._isPrimaryWidget = isPrimary;
+            if (isPrimary) {
+                obj.set({
+                    stroke: PRIMARY_WIDGET_STROKE,
+                    strokeWidth: PRIMARY_WIDGET_STROKE_WIDTH,
+                    strokeDashArray: null,
+                });
+            } else {
+                obj.set({ stroke: 'transparent', strokeWidth: 0, strokeDashArray: null });
+            }
+            obj.dirty = true;
+        }
+        canvas.requestRenderAll();
+        canvasLog('Canvas: applied primary widget stroke', primaryWidgetId);
+    }
+
+    export function setPrimaryWidgetShape(widgetId: string): boolean {
+        if (!widgetId) return false;
+        applyPrimaryWidgetStrokes(widgetId);
+        selectedObject = selectedObject;
+        return true;
+    }
+
+    function handleSetPrimaryFromPanel(widgetId: string) {
+        setPrimaryWidgetShape(widgetId);
+        onSetPrimaryWidget?.(widgetId);
+    }
+
+    export function getPrimaryWidgetId(): string | null {
+        if (!canvas) return null;
+        const primary = canvas.getObjects().find((o: any) => o._isWidgetImage && o._isPrimaryWidget);
+        return (primary as any)?._widgetId ?? null;
+    }
+
+    /** No visible Fabric stroke on widget shapes unless this one is primary. */
     function clearWidgetShapeDefaultBorder(obj: any): void {
-        obj.set({ stroke: 'transparent', strokeWidth: 0, strokeDashArray: null });
+        if (obj._isPrimaryWidget) {
+            obj.set({
+                stroke: PRIMARY_WIDGET_STROKE,
+                strokeWidth: PRIMARY_WIDGET_STROKE_WIDTH,
+                strokeDashArray: null,
+            });
+        } else {
+            obj.set({ stroke: 'transparent', strokeWidth: 0, strokeDashArray: null });
+        }
         obj.dirty = true;
     }
 
@@ -7567,63 +8132,76 @@ function checkAndAddNewShapeToFrame(shape: any) {
      * They are used to test the canvas and the fabric.js library.
      * */
     // Group selection method
-    export function onGroupSelection() {
+    export function onGroupSelection(): string | null {
         if (!canvas) {
-            return;
+            return null;
         }
 
         const activeObject = canvas.getActiveObject();
         if (!activeObject) {
-            return;
+            return null;
         }
 
         // check if the active object is an active selection
-        if (activeObject.type !== 'activeSelection' && 
+        if (activeObject.type !== 'activeSelection' &&
             activeObject.type !== 'activeselection') {
-            return;
-        }
-
-        // Get objects from selection
-        const objects = activeObject.getObjects();
+            // Already a single object (e.g. re-convert of an existing group) —
+            // return its id so the host can replace it later.
+            const single = activeObject as any;
+            if (!single._objectId) single._objectId = generateObjectId();
+            return single._objectId as string;
+        }
+
+        // Copy — getObjects() returns the live _objects array.
+        // Sort by canvas paint order (bottom → top) so grouping does not reverse z-index.
+        const objects = [...activeObject.getObjects()].sort((a: any, b: any) => {
+            const ia = a._canvasPaintOrder;
+            const ib = b._canvasPaintOrder;
+            if (typeof ia === 'number' && typeof ib === 'number') return ia - ib;
+            return 0;
+        });
         if (objects.length === 0) {
-            return;
+            return null;
         }
 
-        // Remove objects from canvas
+        // Fabric 6: ActiveSelection.onDeselect() → removeAll() applies the
+        // selection transform so children return to canvas-absolute coords.
+        // This MUST run while objects are still on the canvas. Removing them
+        // first, then discarding, double-applies the transform — children
+        // collapse behind the bounding rect (the Sep 2025 grouping bug).
+        canvas.discardActiveObject();
+
         objects.forEach((obj: any) => {
             canvas.remove(obj);
+            if (!obj._objectId) obj._objectId = generateObjectId();
         });
 
-        // Discard the active selection
-        canvas.discardActiveObject();
-
-        // Create group with all objects
+        // Group constructor + FitContentLayout converts canvas-absolute coords
+        // into group-local and places the group at the former selection bounds.
         const group = new Group(objects, {
-            canvas: canvas
+            subTargetCheck: true,
+            interactive: false,
+            objectCaching: false,
+            fill: '',
+            stroke: '',
+            strokeWidth: 0,
+            backgroundColor: '',
         });
+        applyInteractiveGroupFlags(group);
+        (group as any)._objectId = generateObjectId();
+        (group as any)._customType = 'group';
+        group.set({ fill: '', stroke: '', strokeWidth: 0, backgroundColor: '' });
 
-        // Disable object caching if group contains children with custom render overrides.
-        // Frame labels are drawn outside the bounding box (clipped by cache).
-        // Image placeholders use manual transforms that conflict with cache context.
-        const hasCustomRenderChild = objects.some((obj: any) => 
-            isFrameShape(obj) || (obj as any)._customType === 'image'
-        );
-        if (hasCustomRenderChild) {
-            group.objectCaching = false;
-        }
-
-        // add the group to the canvas
         canvas.add(group);
-
-        // set the group as the active object
         canvas.setActiveObject(group);
-
-        // request a render all
         canvas.requestRenderAll();
         takeHistorySnapshot();
 
-        // log the group creation
-        canvasLog('Group selection created', { Group: group, objectCount: objects.length, hasFrameChild });
+        canvasLog('Group selection created', {
+            objectCount: objects.length,
+            objectId: (group as any)._objectId,
+        });
+        return (group as any)._objectId as string;
     }
     
     // Ungroup selection method - using native Fabric.js approach
@@ -7651,6 +8229,9 @@ function checkAndAddNewShapeToFrame(shape: any) {
         }
 
         const group = activeObject as Group;
+        if (activeEditingGroup === group) {
+            exitGroupEdit(false);
+        }
         
         canvasLog('Ungroup: Starting with', group.getObjects().length, 'objects');
         
@@ -7769,6 +8350,10 @@ function checkAndAddNewShapeToFrame(shape: any) {
         '_widgetId',
         // Widget Image: converted widget placeholder on canvas
         '_isWidgetImage',
+        '_groupFill', '_groupStroke', '_groupStrokeWidth',
+        '_groupFillOpacity', '_groupStrokeDashArray',
+        '_canvasPaintOrder',
+        '_isPrimaryWidget',
     ];
 
     // ── History: capture / restore ───────────────────────────────────────────
@@ -7830,8 +8415,8 @@ function checkAndAddNewShapeToFrame(shape: any) {
         }, autosaveDelayMs);
     }
 
-    /** Force an immediate save (used by Cmd+S and the save button). */
-    function saveNow() {
+    /** Force an immediate save (used by Cmd+S, the save button, and host post-replace flushes). */
+    export function saveNow() {
         if (_autoSaveTimer) clearTimeout(_autoSaveTimer);
         _autoSaveTimer = null;
         const json = saveCanvas();
@@ -7880,6 +8465,7 @@ function checkAndAddNewShapeToFrame(shape: any) {
                             syncTextboxFabricPadding(obj);
                         }
                     }
+                    applyInteractiveGroupFlags(obj);
                 } catch (reviverErr) {
                     canvasWarn('Canvas: restoreHistorySnapshot reviver error', obj?.type, reviverErr);
                 }
@@ -7896,6 +8482,13 @@ function checkAndAddNewShapeToFrame(shape: any) {
                     });
                 } else if (obj._customType === 'image' || obj._hasImage || obj._imageUrl) {
                     upgradeToImageShape(obj);
+                } else {
+                    applyInteractiveGroupFlags(obj);
+                    obj.getObjects?.()?.forEach((child: any) => {
+                        if (child._customType === 'image' || child._hasImage || child._imageUrl) {
+                            upgradeToImageShape(child);
+                        }
+                    });
                 }
             });
             canvas.discardActiveObject();
@@ -8021,6 +8614,7 @@ function checkAndAddNewShapeToFrame(shape: any) {
                             syncTextboxFabricPadding(obj);
                         }
                     }
+                    applyInteractiveGroupFlags(obj);
                 } catch (reviverErr) {
                     canvasWarn('Canvas: loadCanvas reviver error for object', obj?.type, reviverErr);
                 }
@@ -8051,6 +8645,9 @@ function checkAndAddNewShapeToFrame(shape: any) {
                         };
                         img.src = obj._imageUrl;
                     }
+                } else if (String(obj.type || '').toLowerCase() === 'group') {
+                    applyInteractiveGroupFlags(obj);
+                    (obj.getObjects?.() || []).forEach(restoreObject);
                 }
             };
             allObjects.forEach(restoreObject);
@@ -8090,7 +8687,8 @@ function checkAndAddNewShapeToFrame(shape: any) {
                 const spatialOrphans = canvas.getObjects().filter((obj: any) =>
                     !isFrameShape(obj) &&
                     !(obj as any)._isFrameBackground &&
-                    !obj.group  // not already inside any group
+                    !obj.group &&  // not already inside any group
+                    String(obj.type || '').toLowerCase() !== 'group'
                 );
                 for (const obj of spatialOrphans) {
                     const center = obj.getCenterPoint();
@@ -8430,7 +9028,6 @@ function checkAndAddNewShapeToFrame(shape: any) {
         }
         
         // If it's a plain group or activeSelection (NOT a Frame), apply to all children.
-        // Frames are caught above and returned early — this guard prevents accidental Group-path execution.
         if (!isFrameShape(selectedObject) && (selectedObject.type === 'group' || selectedObject.type === 'activeSelection' || selectedObject.type === 'activeselection')) {
             const group = selectedObject as Group;
             group.getObjects().forEach((obj: any) => {
@@ -8473,6 +9070,74 @@ function checkAndAddNewShapeToFrame(shape: any) {
         selectedObject = temp;
         canvasLog('Canvas: Updated fill color to', color);
     }
+
+    function refreshSelectedObjectUi() {
+        const temp = selectedObject;
+        selectedObject = null;
+        selectedObject = temp;
+    }
+
+    /** Group box chrome (behind/around children). Does not paint children. */
+    function updateGroupFill(color: string) {
+        if (!canvas || !isRegularGroup(selectedObject)) return;
+        (selectedObject as any)._groupFill = color;
+        selectedObject.dirty = true;
+        canvas.requestRenderAll();
+        refreshSelectedObjectUi();
+        canvasLog('Canvas: Updated group chrome fill to', color);
+    }
+
+    function updateGroupFillOpacity(opacityPercent: number) {
+        if (!canvas || !isRegularGroup(selectedObject)) return;
+        (selectedObject as any)._groupFillOpacity = opacityPercent / 100;
+        selectedObject.dirty = true;
+        canvas.requestRenderAll();
+        refreshSelectedObjectUi();
+        canvasLog('Canvas: Updated group chrome fill opacity to', opacityPercent + '%');
+    }
+
+    function updateGroupStroke(color: string) {
+        if (!canvas || !isRegularGroup(selectedObject)) return;
+        (selectedObject as any)._groupStroke = color;
+        if (!(selectedObject as any)._groupStrokeWidth) {
+            (selectedObject as any)._groupStrokeWidth = 2;
+        }
+        selectedObject.dirty = true;
+        canvas.requestRenderAll();
+        refreshSelectedObjectUi();
+        canvasLog('Canvas: Updated group chrome stroke to', color);
+    }
+
+    function updateGroupStrokeWidth(width: number) {
+        if (!canvas || !isRegularGroup(selectedObject)) return;
+        (selectedObject as any)._groupStrokeWidth = width;
+        if (width > 0 && !(selectedObject as any)._groupStroke) {
+            (selectedObject as any)._groupStroke = '#000000';
+        }
+        selectedObject.dirty = true;
+        canvas.requestRenderAll();
+        refreshSelectedObjectUi();
+        debouncedHistorySnapshot();
+        canvasLog('Canvas: Updated group chrome stroke width to', width);
+    }
+
+    function updateGroupStrokeType(type: 'solid' | 'dashed' | 'dotted') {
+        if (!canvas || !isRegularGroup(selectedObject)) return;
+        let dashArray: number[] | null = null;
+        if (type === 'dashed') dashArray = [10, 5];
+        else if (type === 'dotted') dashArray = [2, 4];
+        (selectedObject as any)._groupStrokeDashArray = dashArray;
+        if (!(selectedObject as any)._groupStroke) {
+            (selectedObject as any)._groupStroke = '#000000';
+        }
+        if (!(selectedObject as any)._groupStrokeWidth) {
+            (selectedObject as any)._groupStrokeWidth = 2;
+        }
+        selectedObject.dirty = true;
+        canvas.requestRenderAll();
+        refreshSelectedObjectUi();
+        canvasLog('Canvas: Updated group chrome stroke type to', type);
+    }
     
     // Helper to convert any color to rgba with specified alpha
     function colorToRgba(color: string, alpha: number): string {
@@ -8567,7 +9232,6 @@ function checkAndAddNewShapeToFrame(shape: any) {
             }
             // Set on container too for UI reflection
             selectedObject._fillOpacity = alpha;
-        // If it's a regular group or activeSelection, apply to all children
         } else if (selectedObject.type === 'group' || selectedObject.type === 'activeSelection' || selectedObject.type === 'activeselection') {
             const group = selectedObject as Group;
             group.getObjects().forEach((obj: any) => {
@@ -9196,48 +9860,61 @@ function checkAndAddNewShapeToFrame(shape: any) {
         canvasLog('Canvas: Reordered in frame', { direction, from: idx, to: newIdx });
     }
     
-    function bringToFront() {
+    function reorderInGroup(group: any, obj: any, direction: 'front' | 'forward' | 'backward' | 'back') {
+        const objects = group._objects as any[];
+        const idx = objects.indexOf(obj);
+        if (idx === -1) return;
+        const minIndex = 0;
+        const maxIndex = objects.length - 1;
+        objects.splice(idx, 1);
+        let newIdx: number;
+        switch (direction) {
+            case 'front':   newIdx = maxIndex; break;
+            case 'forward':  newIdx = Math.min(idx + 1, maxIndex); break;
+            case 'backward': newIdx = Math.max(idx - 1, minIndex); break;
+            case 'back':     newIdx = minIndex; break;
+        }
+        objects.splice(newIdx, 0, obj);
+        group.dirty = true;
+        group.objectCaching = false;
+        canvasLog('Canvas: Reordered in group', { direction, from: idx, to: newIdx });
+    }
+
+    function applyLayerOrder(direction: 'front' | 'forward' | 'backward' | 'back') {
         if (!selectedObject || !canvas) return;
-        if (selectedObject.group && isFrameShape(selectedObject.group)) {
-            reorderInFrame(selectedObject.group, selectedObject, 'front');
-        } else {
+        const parent = selectedObject.group;
+        if (parent && isFrameShape(parent)) {
+            reorderInFrame(parent, selectedObject, direction);
+        } else if (parent && isRegularGroup(parent)) {
+            reorderInGroup(parent, selectedObject, direction);
+        } else if (direction === 'front') {
             canvas.bringObjectToFront(selectedObject);
+        } else if (direction === 'forward') {
+            canvas.bringObjectForward(selectedObject);
+        } else if (direction === 'backward') {
+            canvas.sendObjectBackwards(selectedObject);
+        } else {
+            canvas.sendObjectToBack(selectedObject);
         }
+        stampTopLevelPaintOrder();
         canvas.requestRenderAll();
         takeHistorySnapshot();
     }
+
+    function bringToFront() {
+        applyLayerOrder('front');
+    }
     
     function bringForward() {
-        if (!selectedObject || !canvas) return;
-        if (selectedObject.group && isFrameShape(selectedObject.group)) {
-            reorderInFrame(selectedObject.group, selectedObject, 'forward');
-        } else {
-            canvas.bringObjectForward(selectedObject);
-        }
-        canvas.requestRenderAll();
-        takeHistorySnapshot();
+        applyLayerOrder('forward');
     }
     
     function sendBackward() {
-        if (!selectedObject || !canvas) return;
-        if (selectedObject.group && isFrameShape(selectedObject.group)) {
-            reorderInFrame(selectedObject.group, selectedObject, 'backward');
-        } else {
-            canvas.sendObjectBackwards(selectedObject);
-        }
-        canvas.requestRenderAll();
-        takeHistorySnapshot();
+        applyLayerOrder('backward');
     }
     
     function sendToBack() {
-        if (!selectedObject || !canvas) return;
-        if (selectedObject.group && isFrameShape(selectedObject.group)) {
-            reorderInFrame(selectedObject.group, selectedObject, 'back');
-        } else {
-            canvas.sendObjectToBack(selectedObject);
-        }
-        canvas.requestRenderAll();
-        takeHistorySnapshot();
+        applyLayerOrder('back');
     }
     
     /**
@@ -10466,11 +11143,12 @@ function checkAndAddNewShapeToFrame(shape: any) {
 
     <!-- Pan/Zoom Panel: Position configurable via panZoomPosition prop -->
     {#if !isCanvasLoading}
-    <PanZoomPanel 
-        class="absolute {getPanZoomPositionClass(panZoomPosition)} z-10"
+    <div class="canvas-pan-zoom-overlay {getPanZoomPositionClass(panZoomPosition)}">
+    <PanZoomPanel
         {zoomLevel}
         isPanActive={activeTool === 'pan'}
         {showGrid}
+        {advancedFeatures}
         onPanToggle={() => activeTool === 'pan' ? onSelectSelectTool() : onSelectPanTool()}
         onZoomIn={zoomIn}
         onZoomOut={zoomOut}
@@ -10484,6 +11162,7 @@ function checkAndAddNewShapeToFrame(shape: any) {
         hasUnsavedChanges={_hasUnsavedChanges}
         onSave={saveNow}
     />
+    </div>
     {/if}
 
     <!-- Canvas -->
@@ -10542,6 +11221,7 @@ function checkAndAddNewShapeToFrame(shape: any) {
         onToggleStickyTool={() => { stickyToolEnabled = !stickyToolEnabled; }}
         {onInsertLibraryShape}
         {onSelectLibraryShapeTool}
+        {advancedFeatures}
     />    
     {/if}
 
@@ -10552,6 +11232,11 @@ function checkAndAddNewShapeToFrame(shape: any) {
             {wireframeMode}
             onFillChange={updateSelectedFill}
             onFillOpacityChange={updateSelectedFillOpacity}
+            onGroupFillChange={updateGroupFill}
+            onGroupFillOpacityChange={updateGroupFillOpacity}
+            onGroupStrokeChange={updateGroupStroke}
+            onGroupStrokeWidthChange={updateGroupStrokeWidth}
+            onGroupStrokeTypeChange={updateGroupStrokeType}
             onBackgroundColorChange={updateSelectedBackgroundColor}
             onBackgroundOpacityChange={updateSelectedBackgroundOpacity}
             onStrokeChange={updateSelectedStroke}
@@ -10589,6 +11274,7 @@ function checkAndAddNewShapeToFrame(shape: any) {
             onWidgetClick={onWidgetImageClick}
             {onWidgetRename}
             {onRefreshScreenshot}
+            onSetAsPrimary={handleSetPrimaryFromPanel}
             {getWidgetName}
             {isWidgetKnown}
             onRemoveOrphanedShape={() => { _deleteActiveObjects(); }}
@@ -10673,6 +11359,6 @@ function checkAndAddNewShapeToFrame(shape: any) {
   max-w-[calc(100%-1rem)] w-11/12
 -->
 
-<style>/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-button{cursor:pointer}.canvas-container{-webkit-user-select:none;user-select:none}.canvas-container input,.canvas-container textarea{-webkit-user-select:text;user-select:text}.canvas-loader-spinner{border:3px solid #e5e7eb;border-top-color:#374151;border-radius:50%;width:36px;height:36px;animation:.8s linear infinite canvas-spin}@keyframes canvas-spin{to{transform:rotate(360deg)}}
+<style>/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
+button{cursor:pointer}.canvas-container{-webkit-user-select:none;user-select:none}.canvas-container input,.canvas-container textarea{-webkit-user-select:text;user-select:text}.canvas-loader-spinner{border:3px solid #e5e7eb;border-top-color:#374151;border-radius:50%;width:36px;height:36px;animation:.8s linear infinite canvas-spin}@keyframes canvas-spin{to{transform:rotate(360deg)}}.canvas-pan-zoom-overlay{width:max-content;max-width:calc(100% - 2rem);overflow:visible}
 </style>