@widgetic/canvas 0.5.6 → 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;
 
@@ -1149,6 +1153,37 @@
         };
     }
 
+    /** 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.
@@ -1406,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'];
     }
@@ -1447,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.
@@ -2056,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.
@@ -2081,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' },
@@ -2102,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);
                     }
                 }
                 
@@ -2131,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.
@@ -3073,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.
@@ -4369,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;
@@ -4583,9 +4641,8 @@
                     exitGroupEdit(false);
                 }
                 canvasLog('Canvas: Selection cleared');
-                if (onNonWidgetSelected) {
-                    onNonWidgetSelected();
-                }
+                // 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);
@@ -5461,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);
         }
@@ -11080,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}
@@ -11098,6 +11162,7 @@ function checkAndAddNewShapeToFrame(shape: any) {
         hasUnsavedChanges={_hasUnsavedChanges}
         onSave={saveNow}
     />
+    </div>
     {/if}
 
     <!-- Canvas -->
@@ -11156,6 +11221,7 @@ function checkAndAddNewShapeToFrame(shape: any) {
         onToggleStickyTool={() => { stickyToolEnabled = !stickyToolEnabled; }}
         {onInsertLibraryShape}
         {onSelectLibraryShapeTool}
+        {advancedFeatures}
     />    
     {/if}
 
@@ -11294,5 +11360,5 @@ function checkAndAddNewShapeToFrame(shape: any) {
 -->
 
 <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)}}
+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>

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;
@@ -60,6 +61,16 @@ declare const __propDef: {
             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>;
@@ -132,6 +143,16 @@ export default class Canvas extends SvelteComponentTyped<CanvasProps, CanvasEven
         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>;

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 -->

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 {

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

@@ -568,7 +568,7 @@
                     <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"/>
@@ -1550,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 {
@@ -1669,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;
@@ -1695,14 +1702,18 @@
         border: 1px solid #fecaca;
         border-radius: 4px;
         cursor: pointer;
-        width: fit-content;
+        width: 100%;
+        box-sizing: border-box;
+        justify-content: center;
     }
     .set-primary-btn:hover {
         background: #fee2e2;
         border-color: #f87171;
     }
     .primary-widget-badge {
-        display: inline-block;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         margin-top: 4px;
         padding: 3px 8px;
         font-size: 11px;
@@ -1711,7 +1722,9 @@
         background: #fef2f2;
         border: 1px solid #fecaca;
         border-radius: 4px;
-        width: fit-content;
+        width: 100%;
+        box-sizing: border-box;
+        text-align: center;
     }
 
     .widget-orphan-notice {

package/package.json

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