@widgetic/canvas 0.5.4 → 0.5.7

package/dist/canvas/Canvas.svelte.d.ts

@@ -22,6 +22,7 @@ declare const __propDef: {
         }) => void) | null;
         panZoomPosition?: "TL" | "TC" | "TR" | "BL" | "BC" | "BR";
         wireframeMode?: boolean;
+        advancedFeatures?: boolean;
         onReady?: (() => void) | null;
         isExternalDataLoading?: boolean;
         onBeforeUnmount?: ((json: string | null) => void) | null;
@@ -36,17 +37,40 @@ declare const __propDef: {
         onWidgetShapeDeleting?: ((widgetId: string) => Promise<boolean>) | null;
         onWidgetRename?: ((widgetId: string, newName: string) => void) | null;
         onRefreshScreenshot?: ((widgetId: string) => void) | null;
+        /** Host persists canvases.primary_widget_id after Canvas paints the red stroke. */ onSetPrimaryWidget?: ((widgetId: string) => void) | null;
         getWidgetName?: ((widgetId: string) => string | null) | null;
         /** Returns true when widgetId still exists in the host widget list. */ isWidgetKnown?: ((widgetId: string) => boolean) | null;
         showLogs?: boolean;
         shapeFillColor?: () => string;
         deselectAll?: () => void;
+        duplicateSelectedObjects?: () => Promise<void>;
+        deleteSelectedObjects?: () => Promise<void>;
         markSelectedAsDuplicating?: () => void;
         linkObjectToWidget?: (fabricObject: any, widgetId: string, widgetName?: string | null) => void;
         linkFrameToWidget?: (objectId: string, widgetId: string) => void;
         replaceObjectWithWidgetImage?: (objectId: string, widgetId: string, screenshotDataUrl: string) => Promise<string | null>;
         updateWidgetImage?: (widgetId: string, newScreenshotDataUrl: string) => void;
         selectWidgetShape?: (widgetId: string) => boolean;
+        getWidgetShapeScreenRect?: (widgetId: string) => {
+            left: number;
+            top: number;
+            width: number;
+            height: number;
+            viewportLeft: number;
+            viewportTop: number;
+            viewportWidth: number;
+            viewportHeight: number;
+        } | null;
+        getObjectScreenRect?: (objectId: string) => {
+            left: number;
+            top: number;
+            width: number;
+            height: number;
+            viewportLeft: number;
+            viewportTop: number;
+            viewportWidth: number;
+            viewportHeight: number;
+        } | null;
         getWidgetShapeDataUrl?: (widgetId: string) => string | null;
         addWidgetShape?: (widgetId: string, widgetName?: string, gridIndex?: number, totalCount?: number, previewImageUrl?: string | null) => string | null;
         getLinkedWidgetIds?: () => Set<string>;
@@ -64,6 +88,8 @@ declare const __propDef: {
         onSelectArrowTool?: () => void;
         onSelectShapeTool?: (shapeType: "rect" | "circle" | "circle-true" | "triangle" | "arrow") => void;
         onSelectFrameTool?: () => void;
+        setPrimaryWidgetShape?: (widgetId: string) => boolean;
+        getPrimaryWidgetId?: () => string | null;
         onSelectImageTool?: () => void;
         onSelectPanTool?: () => void;
         zoomIn?: () => void;
@@ -71,10 +97,11 @@ declare const __propDef: {
         zoomTo?: (percent: number) => void;
         zoomReset?: () => void;
         zoomFit?: () => void;
-        onGroupSelection?: () => void;
+        onGroupSelection?: () => string | null;
         onUngroupSelection?: () => void;
         onSelectAllObjects?: () => void;
         onDeselectAllObjects?: () => void;
+        saveNow?: () => void;
         undo?: () => Promise<void>;
         redo?: () => Promise<void>;
         saveCanvas?: () => string | null;
@@ -98,12 +125,34 @@ export type CanvasSlots = typeof __propDef.slots;
 export default class Canvas extends SvelteComponentTyped<CanvasProps, CanvasEvents, CanvasSlots> {
     get shapeFillColor(): () => string;
     get deselectAll(): () => void;
+    get duplicateSelectedObjects(): () => Promise<void>;
+    get deleteSelectedObjects(): () => Promise<void>;
     get markSelectedAsDuplicating(): () => void;
     get linkObjectToWidget(): (fabricObject: any, widgetId: string, widgetName?: string | null) => void;
     get linkFrameToWidget(): (objectId: string, widgetId: string) => void;
     get replaceObjectWithWidgetImage(): (objectId: string, widgetId: string, screenshotDataUrl: string) => Promise<string | null>;
     get updateWidgetImage(): (widgetId: string, newScreenshotDataUrl: string) => void;
     get selectWidgetShape(): (widgetId: string) => boolean;
+    get getWidgetShapeScreenRect(): (widgetId: string) => {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        viewportLeft: number;
+        viewportTop: number;
+        viewportWidth: number;
+        viewportHeight: number;
+    } | null;
+    get getObjectScreenRect(): (objectId: string) => {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        viewportLeft: number;
+        viewportTop: number;
+        viewportWidth: number;
+        viewportHeight: number;
+    } | null;
     get getWidgetShapeDataUrl(): (widgetId: string) => string | null;
     get addWidgetShape(): (widgetId: string, widgetName?: string, gridIndex?: number, totalCount?: number, previewImageUrl?: string | null) => string | null;
     get getLinkedWidgetIds(): () => Set<string>;
@@ -121,6 +170,8 @@ export default class Canvas extends SvelteComponentTyped<CanvasProps, CanvasEven
     get onSelectArrowTool(): () => void;
     get onSelectShapeTool(): (shapeType: "rect" | "circle" | "circle-true" | "triangle" | "arrow") => void;
     get onSelectFrameTool(): () => void;
+    get setPrimaryWidgetShape(): (widgetId: string) => boolean;
+    get getPrimaryWidgetId(): () => string | null;
     get onSelectImageTool(): () => void;
     get onSelectPanTool(): () => void;
     get zoomIn(): () => void;
@@ -128,10 +179,11 @@ export default class Canvas extends SvelteComponentTyped<CanvasProps, CanvasEven
     get zoomTo(): (percent: number) => void;
     get zoomReset(): () => void;
     get zoomFit(): () => void;
-    get onGroupSelection(): () => void;
+    get onGroupSelection(): () => string | null;
     get onUngroupSelection(): () => void;
     get onSelectAllObjects(): () => void;
     get onDeselectAllObjects(): () => void;
+    get saveNow(): () => void;
     get undo(): () => Promise<void>;
     get redo(): () => Promise<void>;
     get saveCanvas(): () => string | null;

package/dist/canvas/CanvasToolbar.svelte

@@ -63,6 +63,9 @@
     /** Draw-to-place: activates library shape tool so user clicks-and-drags to size it. */
     export let onSelectLibraryShapeTool: (shapeKey: string, pathData: string) => void = () => {};
 
+    /** Extra tools (undo/redo/lock, frame, image, shape library). Code stays; UI is gated. */
+    export let advancedFeatures: boolean = false;
+
     // Pre-group shapes for the dropdown
     const libraryShapesByCategory = getShapesByCategory();
 
@@ -385,12 +388,12 @@
             case 'D': event.preventDefault(); onSelectDrawTool(); break;
             case 'H': event.preventDefault(); onSelectPanTool(); break;
             case 'A': event.preventDefault(); selectShape('arrow'); break;
-            case 'R': event.preventDefault(); selectShape('rect'); break;
-            case 'G': event.preventDefault(); selectShape('triangle'); break;
-            case 'O': event.preventDefault(); selectShape('circle'); break;
-            case 'F': event.preventDefault(); onSelectFrameTool(); break;
+            case 'R': if (advancedFeatures) { event.preventDefault(); selectShape('rect'); } break;
+            case 'G': if (advancedFeatures) { event.preventDefault(); selectShape('triangle'); } break;
+            case 'O': if (advancedFeatures) { event.preventDefault(); selectShape('circle'); } break;
+            case 'F': if (advancedFeatures) { event.preventDefault(); onSelectFrameTool(); } break;
             case 'T': event.preventDefault(); onSelectTextTool(); break;
-            case 'I': event.preventDefault(); onSelectImageTool(); break;
+            case 'I': if (advancedFeatures) { event.preventDefault(); onSelectImageTool(); } break;
         }
     }
 
@@ -464,6 +467,7 @@
         <!-- Scrollable container for tools — overflow-x-auto clips absolute children,
              so dropdowns and tooltips are rendered as siblings OUTSIDE this div -->
         <div class="tools-ct flex flex-row">
+            {#if advancedFeatures}
             <!-- ── Utility cluster: Undo, Redo, Hand, Lock | Divider ── -->
             <Tooltip text="Undo  (Ctrl+Z)">
                 <div class="disabled-tooltip-wrap">
@@ -528,6 +532,7 @@
             </Tooltip>
 
             <div class="toolbar-divider"></div>
+            {/if}
 
             <!-- ══ Illustrated tools: Pencil & Eraser — "pulled from sheath" on select ══ -->
             <!-- Each tool is wrapped in a mask container that clips its body at rest.
@@ -623,6 +628,7 @@
                 </button>
             </Tooltip>
 
+            {#if advancedFeatures}
             <div class="toolbar-divider"></div>
 
             <Tooltip text="Frame  (F)">
@@ -678,6 +684,7 @@
                     </button>
                 </Tooltip>
             </div>
+            {/if}
         </div>
     </div>
 
@@ -708,7 +715,7 @@
      dropdownOpenAbove=true: appears above the trigger (toolbar at bottom).
      dropdownOpenAbove=false: appears below (toolbar at top).
      ═══════════════════════════════════════════════════════════════ -->
-{#if shapesDropdownOpen}
+{#if shapesDropdownOpen && advancedFeatures}
     <!-- position:absolute within .canvas-container (position:relative) so the dropdown
          is correctly positioned regardless of any CSS transform on ancestors. -->
     <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -974,6 +981,11 @@ button:disabled {
     color: white !important;
     box-shadow: 0 2px 8px rgba(26, 58, 42, 0.25);
 }
+.wdg-tool-active :global(svg),
+.wdg-tool-active :global(svg *) {
+    color: white !important;
+    stroke: currentColor !important;
+}
 .wdg-tool-active:hover {
     background: #244b36 !important;
     color: white !important;

package/dist/canvas/CanvasToolbar.svelte.d.ts

@@ -32,6 +32,7 @@ declare const __propDef: {
         onToggleStickyTool?: () => void;
         /** Called when user clicks a library shape. Canvas inserts it as a Path. */ onInsertLibraryShape?: (shapeKey: string, pathData: string) => void;
         /** Draw-to-place: activates library shape tool so user clicks-and-drags to size it. */ onSelectLibraryShapeTool?: (shapeKey: string, pathData: string) => void;
+        /** Extra tools (undo/redo/lock, frame, image, shape library). Code stays; UI is gated. */ advancedFeatures?: boolean;
         addText?: () => void;
         addRect?: () => void;
         addTriangle?: () => void;

package/dist/canvas/PanZoomPanel.svelte

@@ -27,6 +27,9 @@
     // Reflects open state so the button can show an active style
     export let shortcutsOpen: boolean = false;
 
+    /** Extra view controls (grid, pan, 1:1, fit, shortcuts). Zoom ± / % and save stay available. */
+    export let advancedFeatures: boolean = false;
+
     // Save button: visible when showSaveButton is true
     export let showSaveButton: boolean = false;
     export let hasUnsavedChanges: boolean = false;
@@ -56,9 +59,29 @@
             (e.target as HTMLInputElement).blur();
         }
     }
+
+    let isMinimized = true;
+
+    function toggleMinimized() {
+        isMinimized = !isMinimized;
+        console.log('[PanZoomPanel] minimized:', isMinimized);
+    }
 </script>
 
-<div class="{className ? className + ' ' : ''}pan-zoom-panel" style={style}>
+<div class="pan-zoom-panel-ct {className ? className + ' ' : ''}pan-zoom-panel {isMinimized ? 'pan-zoom-panel-minimized' : ''}" style={style}>
+    {#if isMinimized}
+        <Tooltip text="Zoom {zoomLevel}% — click to expand" position="above">
+            <button
+                type="button"
+                class="panel-btn pan-zoom-expand-btn"
+                onclick={toggleMinimized}
+                aria-label="Expand zoom controls"
+            >
+                <span class="text-btn">{zoomLevel}%</span>
+            </button>
+        </Tooltip>
+    {:else}
+    {#if advancedFeatures}
     <!-- Grid Toggle -->
     <Tooltip text="Toggle Grid  [G]" position="above">
         <button
@@ -92,6 +115,7 @@
     </Tooltip>
 
     <div class="divider"></div>
+    {/if}
 
     <!-- Zoom Out -->
     <Tooltip text="Zoom Out  [Ctrl/Cmd] + [−]" position="above">
@@ -138,6 +162,7 @@
         </button>
     </Tooltip>
 
+    {#if advancedFeatures}
     <div class="divider"></div>
 
     <!-- Reset Zoom (100%) -->
@@ -181,6 +206,7 @@
             </svg>
         </button>
     </Tooltip>
+    {/if}
 
     {#if showSaveButton}
         <div class="divider"></div>
@@ -201,18 +227,66 @@
             </button>
         </Tooltip>
     {/if}
+
+    <div class="pan-zoom-minimize-anchor">
+        <Tooltip text="Minimize zoom" position="above">
+            <button
+                type="button"
+                class="panel-btn pan-zoom-minimize-btn"
+                onclick={toggleMinimized}
+                aria-label="Minimize zoom controls"
+            >
+                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="4 14 10 14 10 20"/>
+                    <polyline points="20 10 14 10 14 4"/>
+                    <line x1="14" y1="10" x2="21" y2="3"/>
+                    <line x1="3" y1="21" x2="10" y2="14"/>
+                </svg>
+            </button>
+        </Tooltip>
+    </div>
+    {/if}
 </div>
 
 <style>
     .pan-zoom-panel {
+        position: relative;
         display: flex;
         align-items: center;
         gap: 4px;
+        width: max-content;
+        max-width: 100%;
         padding: 6px 10px;
         background: white;
         border: 2px solid #e5e7eb;
         border-radius: 8px;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        overflow: visible;
+    }
+
+    .pan-zoom-minimize-anchor {
+        position: absolute;
+        top: -8px;
+        right: -8px;
+        z-index: 2;
+    }
+
+    .pan-zoom-minimize-btn {
+        width: 18px;
+        height: 18px;
+        background: white;
+        border: 1px solid #e5e7eb;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+    }
+
+    .pan-zoom-panel-minimized {
+        padding: 4px;
+    }
+
+    .pan-zoom-expand-btn {
+        min-width: 44px;
+        width: auto;
+        padding: 0 8px;
     }
 
     .panel-btn {
@@ -241,13 +315,26 @@
 
     .panel-btn.active {
         background: var(--main-color, #314F2F);
-        color: white;
+        color: white !important;
         border-color: var(--main-color, #314F2F);
     }
 
+    /* Host apps (widget-creator / site) may set a global svg color; force icons to follow the button. */
+    .panel-btn.active :global(svg),
+    .panel-btn.active :global(svg *) {
+        color: white !important;
+        stroke: currentColor !important;
+    }
+
     .panel-btn.active:hover {
         background: var(--main-color-hover, #263d24);
-        color: white;
+        color: white !important;
+    }
+
+    .panel-btn.active:hover :global(svg),
+    .panel-btn.active:hover :global(svg *) {
+        color: white !important;
+        stroke: currentColor !important;
     }
 
     .panel-btn:disabled {

package/dist/canvas/PanZoomPanel.svelte.d.ts

@@ -15,6 +15,7 @@ declare const __propDef: {
         onGridToggle?: () => void;
         onShortcutsToggle?: () => void;
         shortcutsOpen?: boolean;
+        /** Extra view controls (grid, pan, 1:1, fit, shortcuts). Zoom ± / % and save stay available. */ advancedFeatures?: boolean;
         showSaveButton?: boolean;
         hasUnsavedChanges?: boolean;
         onSave?: (() => void) | null;

package/dist/canvas/props-panel/PropsPanel.svelte

@@ -27,6 +27,11 @@
     export let onStrokeTypeChange: (type: 'solid' | 'dashed' | 'dotted') => void = () => {};
     export let onOpacityChange: (opacity: number) => void = () => {};
     export let onFillOpacityChange: (opacity: number) => void = () => {};
+    export let onGroupFillChange: (color: string) => void = () => {};
+    export let onGroupFillOpacityChange: (opacity: number) => void = () => {};
+    export let onGroupStrokeChange: (color: string) => void = () => {};
+    export let onGroupStrokeWidthChange: (width: number) => void = () => {};
+    export let onGroupStrokeTypeChange: (type: 'solid' | 'dashed' | 'dotted') => void = () => {};
     export let onBackgroundColorChange: (color: string) => void = () => {};
     export let onBackgroundOpacityChange: (opacity: number) => void = () => {};
     
@@ -81,6 +86,7 @@
 
     // Callback: fires when the user requests a screenshot refresh for the linked widget
     export let onRefreshScreenshot: ((widgetId: string) => void) | null = null;
+    export let onSetAsPrimary: ((widgetId: string) => void) | null = null;
 
     // Widget name resolver: given a widgetId, returns the widget name (or null)
     export let getWidgetName: ((widgetId: string) => string | null) | null = null;
@@ -133,6 +139,7 @@
     // FrameShape objects have type === 'FrameShape', not 'group', so isGroup is always false for them.
     // isMultiSelect is only true for plain Groups and ActiveSelections (not Frames).
     $: isMultiSelect = (isGroup && !isFrame) || isActiveSelection;
+    $: isPlainGroup = isGroup && !isFrame;
     $: isLine = objectType === 'line';
     $: isImage = objectType === 'image' || customType === 'image';
     // Widget link: true when the selected object has already been converted to a widget
@@ -220,7 +227,6 @@
     // For Frames (Group-based), read fill/stroke from custom properties (_frameFill, _frameStroke)
     // because the actual fill/stroke is on the background Rect child, not the Group itself
     $: currentFill = isFrame ? (selectedObject?._frameFill ?? '#FFFFFF') : (selectedObject?.fill ?? '#FFFFFF');
-    // Fill opacity is stored as custom property _fillOpacity (0-1), display as percentage
     $: currentFillOpacity = Math.round((selectedObject?._fillOpacity ?? 1) * 100);
     $: currentStroke = isFrame ? (selectedObject?._frameStroke ?? '#000000') : (selectedObject?.stroke ?? '#000000');
     $: currentStrokeWidth = isFrame ? (selectedObject?._frameStrokeWidth ?? 1) : (selectedObject?.strokeWidth ?? 1);
@@ -238,6 +244,11 @@
             ? (selectedObject as any)?._frameStrokeDashArray
             : selectedObject?.strokeDashArray
     );
+    $: groupFill = selectedObject?._groupFill ?? '#FFFFFF';
+    $: groupFillOpacity = Math.round((selectedObject?._groupFillOpacity ?? 1) * 100);
+    $: groupStroke = selectedObject?._groupStroke ?? '#000000';
+    $: groupStrokeWidth = selectedObject?._groupStrokeWidth ?? 0;
+    $: groupStrokeType = getStrokeType((selectedObject as any)?._groupStrokeDashArray);
     
     // Text properties - for groups, get from first textbox
     $: firstTextboxInGroup = (selectedObject?.type === 'group' || selectedObject?.type === 'activeSelection' || selectedObject?.type === 'activeselection') 
@@ -538,12 +549,26 @@
                             Refresh Widget Preview
                         </button>
                     {/if}
+                    {#if onSetAsPrimary && widgetId}
+                        {#if selectedObject?._isPrimaryWidget}
+                            <span class="primary-widget-badge">Primary widget</span>
+                        {:else}
+                            <button
+                                class="set-primary-btn"
+                                type="button"
+                                title="Use this widget as the canvas primary (red stroke)"
+                                onclick={() => onSetAsPrimary && widgetId && onSetAsPrimary(widgetId)}
+                            >
+                                Set as primary
+                            </button>
+                        {/if}
+                    {/if}
                     {/if}
                 {:else}
                     <span class="prop-label">Convert to Widget</span>
                     <div class="capture-section">
                         <button class="convert-widget-btn" onclick={onConvertToWidget}>
-                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <svg class="convert-widget-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                 <rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/>
                                 <line x1="7" y1="2" x2="7" y2="22"/>
                                 <line x1="17" y1="2" x2="17" y2="22"/>
@@ -1115,6 +1140,81 @@
         {/if}
     {/if}
 
+    <!-- ==================== GROUP BOX (chrome around children, like Frame) ==================== -->
+    {#if isPlainGroup && !isWidgetImage}
+        <div class="section-divider">
+            <span class="section-title">Group Box</span>
+        </div>
+        {#if wireframeMode || !isMinimized}
+        <div class="prop-section">
+            <ColorIC
+                label="Group Fill Color"
+                value={groupFill || '#FFFFFF'}
+                onChange={onGroupFillChange}
+                showPicker={!wireframeMode}
+                presets={wireframeMode ? wireframeColorValues : null}
+            />
+        </div>
+        {/if}
+        <SliderUnitIC
+            label="Group Fill Opacity"
+            value={groupFillOpacity}
+            min={0}
+            max={100}
+            step={1}
+            unit="%"
+            onChange={onGroupFillOpacityChange}
+        />
+        {#if wireframeMode || !isMinimized}
+        <div class="prop-section">
+            <ColorIC
+                label="Group Stroke Color"
+                value={groupStroke || '#000000'}
+                onChange={onGroupStrokeChange}
+                showPicker={!wireframeMode}
+                presets={wireframeMode ? wireframeColorValues : null}
+            />
+        </div>
+        {/if}
+        <SliderUnitIC
+            label="Group Stroke Width"
+            value={groupStrokeWidth}
+            min={0}
+            max={20}
+            step={1}
+            unit="px"
+            onChange={onGroupStrokeWidthChange}
+        />
+        {#if !isMinimized}
+        <div class="prop-section">
+            <span class="prop-label">Group Stroke Type</span>
+            <div class="stroke-type-buttons">
+                <button
+                    class="stroke-type-btn {groupStrokeType === 'solid' ? 'active' : ''}"
+                    onclick={() => onGroupStrokeTypeChange('solid')}
+                >
+                    <span class="stroke-preview solid"></span>
+                    Solid
+                </button>
+                <button
+                    class="stroke-type-btn {groupStrokeType === 'dashed' ? 'active' : ''}"
+                    onclick={() => onGroupStrokeTypeChange('dashed')}
+                >
+                    <span class="stroke-preview dashed"></span>
+                    Dashed
+                </button>
+                <button
+                    class="stroke-type-btn {groupStrokeType === 'dotted' ? 'active' : ''}"
+                    onclick={() => onGroupStrokeTypeChange('dotted')}
+                >
+                    <span class="stroke-preview dotted"></span>
+                    Dotted
+                </button>
+            </div>
+        </div>
+        {/if}
+    {/if}
+
     <!-- ==================== TEXT PROPERTIES (for selection/group containing textboxes or frames) ==================== -->
     {#if !isMinimized && hasTextboxInSelection}
         <div class="section-divider">
@@ -1450,9 +1550,14 @@
         box-shadow: 0 2px 4px rgba(49, 79, 47, 0.3);
     }
 
-    .convert-widget-btn svg {
+    /* Host apps (site / DS) leak global svg fill/stroke; keep this icon white on the green button. */
+    .convert-widget-btn :global(svg),
+    .convert-widget-btn :global(svg *) {
         width: 16px;
         height: 16px;
+        color: #ffffff !important;
+        fill: none !important;
+        stroke: currentColor !important;
     }
 
     .widget-linked-section {
@@ -1569,7 +1674,9 @@
         border-radius: 4px;
         cursor: pointer;
         transition: all 0.15s;
-        width: fit-content;
+        width: 100%;
+        box-sizing: border-box;
+        justify-content: center;
     }
     .refresh-screenshot-btn:hover {
         color: #166534;
@@ -1583,6 +1690,43 @@
         flex-shrink: 0;
     }
 
+    .set-primary-btn {
+        display: flex;
+        align-items: center;
+        margin-top: 4px;
+        padding: 3px 8px;
+        font-size: 11px;
+        font-weight: 500;
+        color: #991b1b;
+        background: #fef2f2;
+        border: 1px solid #fecaca;
+        border-radius: 4px;
+        cursor: pointer;
+        width: 100%;
+        box-sizing: border-box;
+        justify-content: center;
+    }
+    .set-primary-btn:hover {
+        background: #fee2e2;
+        border-color: #f87171;
+    }
+    .primary-widget-badge {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 4px;
+        padding: 3px 8px;
+        font-size: 11px;
+        font-weight: 600;
+        color: #991b1b;
+        background: #fef2f2;
+        border: 1px solid #fecaca;
+        border-radius: 4px;
+        width: 100%;
+        box-sizing: border-box;
+        text-align: center;
+    }
+
     .widget-orphan-notice {
         font-size: 11px;
         line-height: 1.45;

package/dist/canvas/props-panel/PropsPanel.svelte.d.ts

@@ -12,6 +12,11 @@ declare const __propDef: {
         onStrokeTypeChange?: (type: "solid" | "dashed" | "dotted") => void;
         onOpacityChange?: (opacity: number) => void;
         onFillOpacityChange?: (opacity: number) => void;
+        onGroupFillChange?: (color: string) => void;
+        onGroupFillOpacityChange?: (opacity: number) => void;
+        onGroupStrokeChange?: (color: string) => void;
+        onGroupStrokeWidthChange?: (width: number) => void;
+        onGroupStrokeTypeChange?: (type: "solid" | "dashed" | "dotted") => void;
         onBackgroundColorChange?: (color: string) => void;
         onBackgroundOpacityChange?: (opacity: number) => void;
         onFontSizeChange?: (size: number) => void;
@@ -44,6 +49,7 @@ declare const __propDef: {
         onWidgetClick?: ((widgetId: string) => void) | null;
         onWidgetRename?: ((widgetId: string, newName: string) => void) | null;
         onRefreshScreenshot?: ((widgetId: string) => void) | null;
+        onSetAsPrimary?: ((widgetId: string) => void) | null;
         getWidgetName?: ((widgetId: string) => string | null) | null;
         /** Returns false when the linked widget was deleted or moved off this canvas. */ isWidgetKnown?: ((widgetId: string) => boolean) | null;
         /** Remove the selected orphaned widget shape from the canvas. */ onRemoveOrphanedShape?: (() => void) | null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/canvas",
-	"version": "0.5.4",
+	"version": "0.5.7",
 	"type": "module",
 	"svelte": "./dist/index.js",
 	"module": "./dist/index.js",