@widgetic/canvas 0.5.6 → 0.5.9

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

@@ -22,6 +22,8 @@ declare const __propDef: {
         }) => void) | null;
         panZoomPosition?: "TL" | "TC" | "TR" | "BL" | "BC" | "BR";
         wireframeMode?: boolean;
+        advancedFeatures?: boolean;
+        /** When true and advanced is on, Frame/Image/Video stay on the toolbar. Default true. */ mediaBtsOnBar?: boolean;
         onReady?: (() => void) | null;
         isExternalDataLoading?: boolean;
         onBeforeUnmount?: ((json: string | null) => void) | null;
@@ -60,6 +62,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>;
@@ -80,6 +92,7 @@ declare const __propDef: {
         setPrimaryWidgetShape?: (widgetId: string) => boolean;
         getPrimaryWidgetId?: () => string | null;
         onSelectImageTool?: () => void;
+        onSelectVideoTool?: () => void;
         onSelectPanTool?: () => void;
         zoomIn?: () => void;
         zoomOut?: () => void;
@@ -132,6 +145,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>;
@@ -152,6 +175,7 @@ export default class Canvas extends SvelteComponentTyped<CanvasProps, CanvasEven
     get setPrimaryWidgetShape(): (widgetId: string) => boolean;
     get getPrimaryWidgetId(): () => string | null;
     get onSelectImageTool(): () => void;
+    get onSelectVideoTool(): () => void;
     get onSelectPanTool(): () => void;
     get zoomIn(): () => void;
     get zoomOut(): () => void;

package/dist/canvas/CanvasToolbar.svelte

@@ -7,7 +7,7 @@
      * COMPONENT PROPS
      */
     // Tool type definition
-    type ToolName = 'select' | 'erase' | 'draw' | 'arrow' | 'text' | 'rect' | 'circle' | 'circle-true' | 'triangle' | 'frame' | 'pan' | 'image' | 'library-shape';
+    type ToolName = 'select' | 'erase' | 'draw' | 'arrow' | 'text' | 'rect' | 'circle' | 'circle-true' | 'triangle' | 'frame' | 'pan' | 'image' | 'video' | 'library-shape';
     // Shape tool sub-type for the shapes dropdown (Arrow is a dedicated button, not in dropdown)
     type ShapeToolName = 'rect' | 'circle' | 'circle-true' | 'triangle';
 
@@ -31,6 +31,7 @@
     export let onSelectTextTool: () => void = () => {};
     export let onSelectPanTool: () => void = () => {};
     export let onSelectImageTool: () => void = () => {};
+    export let onSelectVideoTool: () => void = () => {};
     // Zoom callbacks — optional, used for Ctrl+/Ctrl- shortcuts
     export let onZoomIn: () => void = () => {};
     export let onZoomOut: () => void = () => {};
@@ -63,6 +64,17 @@
     /** 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). Code stays; UI is gated. */
+    export let advancedFeatures: boolean = false;
+    /**
+     * When true (default) and advancedFeatures is on, Frame / Image / Video sit on the toolbar.
+     * When false, they leave the bar and appear under More Shapes → Media Shapes.
+     */
+    export let mediaBtsOnBar: boolean = true;
+
+    $: showMediaOnBar = advancedFeatures && mediaBtsOnBar;
+    $: showMediaInDropdown = !showMediaOnBar;
+
     // Pre-group shapes for the dropdown
     const libraryShapesByCategory = getShapesByCategory();
 
@@ -76,7 +88,7 @@
 
     // ─── Shapes + Image dropdown state ───
     // The last-selected tool within the dropdown (shapes, image, OR library shape).
-    type DropdownToolName = ShapeToolName | 'image' | 'library-shape';
+    type DropdownToolName = ShapeToolName | 'image' | 'video' | 'frame' | 'library-shape';
     let lastSelectedDropdownTool: DropdownToolName = 'rect';
     // When a library shape was last selected, store its info for the trigger button
     let lastSelectedLibraryShape: LibraryShape | null = null;
@@ -134,12 +146,29 @@
     };
     
     // The currently displayed tool in the dropdown button (active tool if it's a dropdown tool, else last selected)
-    const dropdownTools: DropdownToolName[] = ['rect', 'circle', 'circle-true', 'triangle', 'image', 'library-shape'];
-    const dropdownToolsWithoutImage = dropdownTools.filter(t => t !== 'image');
-    $: activeDropdownTool = dropdownToolsWithoutImage.includes(activeTool as DropdownToolName)
+    const mediaToolInfo: Record<'frame' | 'image' | 'video', { iconSvg: string; label: string; key: string }> = {
+        frame: {
+            iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 3v6"/></svg>`,
+            label: 'Frame',
+            key: 'F',
+        },
+        image: {
+            iconSvg: imageDropdownInfo.iconSvg,
+            label: 'Image',
+            key: 'I',
+        },
+        video: {
+            iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="6" width="14" height="12" rx="2"/><path d="M16 10l6-3v10l-6-3z"/></svg>`,
+            label: 'Video',
+            key: '',
+        },
+    };
+
+    const dropdownTools: DropdownToolName[] = ['rect', 'circle', 'circle-true', 'triangle', 'image', 'video', 'frame', 'library-shape'];
+    $: activeDropdownTool = dropdownTools.includes(activeTool as DropdownToolName)
         ? (activeTool as DropdownToolName)
         : lastSelectedDropdownTool;
-    $: activeDropdownIsActive = dropdownToolsWithoutImage.includes(activeTool as DropdownToolName);
+    $: activeDropdownIsActive = dropdownTools.includes(activeTool as DropdownToolName);
 
     // Backwards-compat aliases used in template
     $: activeShapeInDropdown = activeDropdownTool as ShapeToolName;
@@ -152,10 +181,23 @@
     }
 
     function selectImageFromDropdown() {
+        lastSelectedDropdownTool = 'image';
         if (!KEEP_SHAPES_DROPDOWN_OPEN) shapesDropdownOpen = false;
         onSelectImageTool();
     }
 
+    function selectFrameFromDropdown() {
+        lastSelectedDropdownTool = 'frame';
+        if (!KEEP_SHAPES_DROPDOWN_OPEN) shapesDropdownOpen = false;
+        onSelectFrameTool();
+    }
+
+    function selectVideoFromDropdown() {
+        lastSelectedDropdownTool = 'video';
+        if (!KEEP_SHAPES_DROPDOWN_OPEN) shapesDropdownOpen = false;
+        onSelectVideoTool();
+    }
+
     function selectLibraryShape(shape: LibraryShape) {
         lastSelectedDropdownTool = 'library-shape';
         lastSelectedLibraryShape = shape;
@@ -167,14 +209,26 @@
     function activateDropdownTool() {
         if (activeDropdownTool === 'library-shape' && lastSelectedLibraryShape) {
             selectLibraryShape(lastSelectedLibraryShape);
+        } else if (activeDropdownTool === 'image') {
+            selectImageFromDropdown();
+        } else if (activeDropdownTool === 'video') {
+            selectVideoFromDropdown();
+        } else if (activeDropdownTool === 'frame') {
+            selectFrameFromDropdown();
         } else {
             selectShape(activeDropdownTool as ShapeToolName);
         }
     }
 
+    $: mediaTrigger = (activeDropdownTool === 'frame' || activeDropdownTool === 'image' || activeDropdownTool === 'video')
+        ? mediaToolInfo[activeDropdownTool]
+        : null;
+
     // Tooltip text for the main dropdown button
     $: dropdownButtonTooltip = activeDropdownTool === 'library-shape' && lastSelectedLibraryShape
             ? lastSelectedLibraryShape.label
+            : mediaTrigger
+                ? (mediaTrigger.key ? `${mediaTrigger.label}  (${mediaTrigger.key})` : mediaTrigger.label)
             : shapeInfo[activeDropdownTool as ShapeToolName]?.label
                 ? (shapeInfo[activeDropdownTool as ShapeToolName].key
                     ? `${shapeInfo[activeDropdownTool as ShapeToolName].label}  (${shapeInfo[activeDropdownTool as ShapeToolName].key})`
@@ -464,6 +518,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 +583,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 +679,7 @@
                 </button>
             </Tooltip>
 
+            {#if showMediaOnBar}
             <div class="toolbar-divider"></div>
 
             <Tooltip text="Frame  (F)">
@@ -649,7 +706,19 @@
                 </button>
             </Tooltip>
 
-            <!-- Shapes: tldraw-style split — left activates tool, right opens dropdown -->
+            <Tooltip text="Video">
+                <button class="video-bt {buttonClass} {activeTool === 'video' ? activeClass : inactiveClass}"
+                    onclick={onSelectVideoTool}
+                    aria-label="Video">
+                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <rect x="2" y="6" width="14" height="12" rx="2"/>
+                        <path d="M16 10l6-3v10l-6-3z"/>
+                    </svg>
+                </button>
+            </Tooltip>
+            {/if}
+
+            <!-- Shapes: tldraw-style split — left activates tool, right opens dropdown. Always available. -->
             <div class="shapes-split-ct" bind:this={dropdownTriggerEl}>
                 <Tooltip text={dropdownButtonTooltip}>
                     <button
@@ -659,6 +728,8 @@
                     >
                         {#if activeDropdownTool === 'library-shape' && lastSelectedLibraryShape}
                             {@html lastSelectedLibraryShape.iconSvg}
+                        {:else if mediaTrigger}
+                            {@html mediaTrigger.iconSvg}
                         {:else if shapeInfo[activeDropdownTool as ShapeToolName]}
                             {@html shapeInfo[activeDropdownTool as ShapeToolName].iconSvg}
                         {:else}
@@ -722,6 +793,29 @@
         use:overlayScrollbar
         style={shapesDropdownNeedsScroll ? 'margin-right: -6px' : ''}
     >
+        <!-- Media Shapes — first so Frame / Image / Video are easy to reach when not on the bar -->
+        {#if showMediaInDropdown}
+        <div class="shapes-category-label">Media Shapes</div>
+        <div class="shapes-library-grid">
+            <Tooltip text="Frame  (F)" position="above">
+                <button class="shape-library-bt {activeTool === 'frame' ? 'active' : ''}" onclick={selectFrameFromDropdown} aria-label="Frame">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 3v6"/></svg>
+                </button>
+            </Tooltip>
+            <Tooltip text="Image  (I)" position="above">
+                <button class="shape-library-bt {activeTool === 'image' ? 'active' : ''}" onclick={selectImageFromDropdown} aria-label="Image">
+                    {@html imageDropdownInfo.iconSvg}
+                </button>
+            </Tooltip>
+            <Tooltip text="Video" position="above">
+                <button class="shape-library-bt {activeTool === 'video' ? 'active' : ''}" onclick={selectVideoFromDropdown} aria-label="Video">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="6" width="14" height="12" rx="2"/><path d="M16 10l6-3v10l-6-3z"/></svg>
+                </button>
+            </Tooltip>
+        </div>
+        <div class="shapes-dropdown-divider"></div>
+        {/if}
+
         <!-- Geometric Shapes — 3×2 grid -->
         <div class="shapes-category-label">Geometric Shapes</div>
         <div class="shapes-library-grid">
@@ -761,21 +855,6 @@
             {/each}
         </div>
 
-        <!-- Media (hidden — Image tool moved to main toolbar) -->
-        {#if false}
-        <div class="shapes-dropdown-divider"></div>
-        <div class="shapes-category-label">Media</div>
-        <Tooltip text="Image  (I)" position="above">
-            <button
-                class="shape-option-bt {activeTool === 'image' ? 'active' : ''}"
-                onclick={selectImageFromDropdown}
-            >
-                {@html imageDropdownInfo.iconSvg}
-                {imageDropdownInfo.label}
-            </button>
-        </Tooltip>
-        {/if}
-
         <!-- Library shape categories (skip Geometric, already rendered above) -->
         {#each [...libraryShapesByCategory.entries()].filter(([cat]) => cat !== 'Geometric Shapes') as [category, shapes]}
             <div class="shapes-dropdown-divider"></div>
@@ -894,6 +973,13 @@
     background: transparent !important;
     box-shadow: none !important;
 }
+.canvas-toolbar-el :global(button:focus),
+.canvas-toolbar-el :global(button:focus-visible),
+.canvas-toolbar-el :global(a:focus),
+.canvas-toolbar-el :global(a:focus-visible) {
+    outline: none !important;
+    box-shadow: none !important;
+}
 
 /* ── "Sheath" — the white container holding all buttons ── */
 .tools-ct {
@@ -901,7 +987,7 @@
     border-radius: 1.25rem;
     box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
     height: 80px;
-    padding: 0 12px;
+    padding: 0 24px;
     gap: 4px;
     align-items: center;
     overflow: visible;
@@ -919,9 +1005,10 @@ button {
     background: transparent;
 }
 
-button:focus {
-    outline: none;
-    box-shadow: none;
+button:focus,
+button:focus-visible {
+    outline: none !important;
+    box-shadow: none !important;
 }
 
 button:disabled {

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

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         class?: string;
         style?: string;
-        activeTool?: "select" | "rect" | "erase" | "draw" | "arrow" | "text" | "circle" | "circle-true" | "triangle" | "frame" | "pan" | "image" | "library-shape";
+        activeTool?: "select" | "video" | "rect" | "erase" | "draw" | "arrow" | "text" | "circle" | "circle-true" | "triangle" | "frame" | "pan" | "image" | "library-shape";
         activeClass?: string;
         inactiveClass?: string;
         buttonClass?: string;
@@ -15,6 +15,7 @@ declare const __propDef: {
         onSelectTextTool?: () => void;
         onSelectPanTool?: () => void;
         onSelectImageTool?: () => void;
+        onSelectVideoTool?: () => void;
         onZoomIn?: () => void;
         onZoomOut?: () => void;
         onZoomReset?: () => void;
@@ -32,6 +33,11 @@ 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). Code stays; UI is gated. */ advancedFeatures?: boolean;
+        /**
+             * When true (default) and advancedFeatures is on, Frame / Image / Video sit on the toolbar.
+             * When false, they leave the bar and appear under More Shapes → Media Shapes.
+             */ mediaBtsOnBar?: 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">
@@ -110,6 +134,19 @@
 
     <!-- Zoom Level Input -->
     <div class="zoom-level">
+        <Tooltip text="Reset zoom to 100%  [Ctrl/Cmd] + [0]" position="above">
+            <button
+                type="button"
+                class="zoom-reset-in-input"
+                onclick={onZoomReset}
+                aria-label="Reset zoom to 100%"
+            >
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <polyline points="1 4 1 10 7 10"/>
+                    <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>
+                </svg>
+            </button>
+        </Tooltip>
         <input
             type="text"
             class="zoom-input"
@@ -138,6 +175,7 @@
         </button>
     </Tooltip>
 
+    {#if advancedFeatures}
     <div class="divider"></div>
 
     <!-- Reset Zoom (100%) -->
@@ -181,8 +219,9 @@
             </svg>
         </button>
     </Tooltip>
+    {/if}
 
-    {#if showSaveButton}
+        {#if showSaveButton && advancedFeatures}
         <div class="divider"></div>
         <Tooltip text={hasUnsavedChanges ? 'Unsaved changes — click to save  [Cmd+S]' : 'All changes saved  [Cmd+S]'} position="above">
             <button
@@ -201,18 +240,77 @@
             </button>
         </Tooltip>
     {/if}
+
+    <div class="pan-zoom-minimize-anchor">
+        <Tooltip text="Minimize Zoom Panel" position="above">
+            <button
+                type="button"
+                class="pan-zoom-minimize-btn"
+                onclick={toggleMinimized}
+                aria-label="Minimize Zoom Panel"
+            >
+                <svg width="8" height="8" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+                    <rect x="2" y="5.25" width="8" height="1.5" rx="0.25" fill="currentColor"/>
+                </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 {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 14px;
+        height: 14px;
+        padding: 0;
+        border-radius: 9999px;
+        background: #ffffff;
+        border: 1px solid #9ca3af;
+        color: #9ca3af;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
+        cursor: pointer;
+        transition: color 0.15s ease, border-color 0.15s ease;
+    }
+
+    .pan-zoom-minimize-btn:hover:not(:disabled) {
+        background: #ffffff;
+        border-color: #111827;
+        color: #111827;
+    }
+
+    .pan-zoom-panel-minimized {
+        padding: 4px;
+    }
+
+    .pan-zoom-expand-btn {
+        min-width: 44px;
+        width: auto;
+        padding: 0 8px;
     }
 
     .panel-btn {
@@ -268,6 +366,14 @@
         cursor: not-allowed;
     }
 
+    .pan-zoom-panel button:focus,
+    .pan-zoom-panel button:focus-visible,
+    .pan-zoom-panel input:focus,
+    .pan-zoom-panel input:focus-visible {
+        outline: none;
+        box-shadow: none;
+    }
+
     /* Keyboard shortcuts button — slightly bigger to ensure the icon is clearly readable */
     .shortcuts-btn {
         width: 36px;
@@ -296,14 +402,34 @@
         background: #f9fafb;
     }
 
+    .zoom-reset-in-input {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 18px;
+        height: 24px;
+        padding: 0;
+        margin: 0 0 0 2px;
+        border: none;
+        background: transparent;
+        color: #6b7280;
+        cursor: pointer;
+        flex-shrink: 0;
+    }
+
+    .zoom-reset-in-input:hover {
+        color: #111827;
+        background: #f3f4f6;
+    }
+
     .zoom-input {
-        width: 36px;
-        padding: 4px 6px;
+        width: 28px;
+        padding: 4px 0;
         border: none;
         background: transparent;
         font-size: 12px;
         font-weight: 500;
-        text-align: right;
+        text-align: center;
         outline: none;
     }
 
@@ -312,9 +438,13 @@
     }
 
     .zoom-unit {
-        padding: 4px 6px 4px 0;
+        width: 18px;
+        padding: 4px 0;
+        margin: 0 2px 0 0;
         font-size: 11px;
         color: #6b7280;
+        text-align: center;
+        flex-shrink: 0;
     }
 
     .save-btn--dirty {

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;