@widgetic/canvas 0.5.4

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

@@ -0,0 +1,54 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        style?: string;
+        activeTool?: "select" | "rect" | "erase" | "draw" | "arrow" | "text" | "circle" | "circle-true" | "triangle" | "frame" | "pan" | "image" | "library-shape";
+        activeClass?: string;
+        inactiveClass?: string;
+        buttonClass?: string;
+        onSelectSelectTool?: () => void;
+        onSelectEraseTool?: () => void;
+        onSelectDrawTool?: () => void;
+        onSelectShapeTool?: (shapeType: "rect" | "circle" | "circle-true" | "triangle") => void;
+        onSelectFrameTool?: () => void;
+        onSelectTextTool?: () => void;
+        onSelectPanTool?: () => void;
+        onSelectImageTool?: () => void;
+        onZoomIn?: () => void;
+        onZoomOut?: () => void;
+        onZoomReset?: () => void;
+        onZoomFit?: () => void;
+        onGroupSelection?: () => void;
+        onUngroupSelection?: () => void;
+        onDuplicateSelection?: () => void;
+        onSelectAllObjects?: () => void;
+        onClearAllObjects?: () => void;
+        onUndo?: () => void;
+        onRedo?: () => void;
+        /** Disables the Undo button when there is no prior state to go back to. */ canUndo?: boolean;
+        /** Disables the Redo button when there is no future state to redo to. */ canRedo?: boolean;
+        /** When true, the drawing tool stays active after placing a shape. */ stickyToolEnabled?: boolean;
+        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;
+        addText?: () => void;
+        addRect?: () => void;
+        addTriangle?: () => void;
+        addCircle?: () => void;
+        addFrame?: () => void;
+        addImage?: () => void;
+        shortcutsPanelOpen?: boolean;
+        onShortcutsToggle?: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CanvasToolbarProps = typeof __propDef.props;
+export type CanvasToolbarEvents = typeof __propDef.events;
+export type CanvasToolbarSlots = typeof __propDef.slots;
+export default class CanvasToolbar extends SvelteComponentTyped<CanvasToolbarProps, CanvasToolbarEvents, CanvasToolbarSlots> {
+}
+export {};

package/dist/canvas/ContextMenu.svelte

@@ -0,0 +1,279 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+
+    // ── Position & visibility ──────────────────────────────────────────────────
+    export let x: number = 0;
+    export let y: number = 0;
+    export let visible: boolean = false;
+
+    // ── Context: what was right-clicked ───────────────────────────────────────
+    export let hasSelection: boolean = false;
+    export let selectionCount: number = 0;
+    export let canGroup: boolean = false;
+    export let canUngroup: boolean = false;
+    export let canPaste: boolean = false;
+
+    // ── Action callbacks ──────────────────────────────────────────────────────
+    export let onCut: () => void = () => {};
+    export let onCopy: () => void = () => {};
+    export let onPaste: () => void = () => {};
+    export let onDuplicate: () => void = () => {};
+    export let onDelete: () => void = () => {};
+    export let onGroup: () => void = () => {};
+    export let onUngroup: () => void = () => {};
+    export let onBringToFront: () => void = () => {};
+    export let onSendToBack: () => void = () => {};
+    export let onBringForward: () => void = () => {};
+    export let onSendBackward: () => void = () => {};
+    export let onSelectAll: () => void = () => {};
+    export let onClose: () => void = () => {};
+
+    let menuEl: HTMLDivElement;
+
+    // Close on click outside or Escape
+    function handleKeydown(e: KeyboardEvent) {
+        if (e.key === 'Escape' && visible) {
+            onClose();
+        }
+    }
+
+    function handlePointerDown(e: PointerEvent) {
+        if (visible && menuEl && !menuEl.contains(e.target as Node)) {
+            onClose();
+        }
+    }
+
+    // Use onMount's return function for cleanup — both the setup and teardown are
+    // browser-only. onDestroy runs during SSR where window is not defined.
+    onMount(() => {
+        window.addEventListener('keydown', handleKeydown);
+        window.addEventListener('pointerdown', handlePointerDown, { capture: true });
+
+        return () => {
+            window.removeEventListener('keydown', handleKeydown);
+            window.removeEventListener('pointerdown', handlePointerDown, true);
+        };
+    });
+
+    // Keep menu inside viewport
+    $: safeX = x;
+    $: safeY = y;
+
+    function adjustPosition(el: HTMLDivElement) {
+        if (!el) return;
+        const rect = el.getBoundingClientRect();
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        if (rect.right > vw) safeX = Math.max(0, x - rect.width);
+        if (rect.bottom > vh) safeY = Math.max(0, y - rect.height);
+    }
+
+    $: if (visible && menuEl) {
+        // Run after DOM update so getBoundingClientRect is accurate
+        requestAnimationFrame(() => adjustPosition(menuEl));
+    }
+
+    function handleAction(fn: () => void) {
+        fn();
+        onClose();
+    }
+</script>
+
+{#if visible}
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+    bind:this={menuEl}
+    class="context-menu-el"
+    style="left: {safeX}px; top: {safeY}px;"
+    oncontextmenu={(e) => e.preventDefault()}
+>
+    <!-- Selection actions -->
+    {#if hasSelection}
+        <button class="item" onclick={() => handleAction(onCut)}>
+            <span class="icon">✂️</span>
+            <span class="label">Cut</span>
+            <span class="shortcut">⌘X</span>
+        </button>
+        <button class="item" onclick={() => handleAction(onCopy)}>
+            <span class="icon">📋</span>
+            <span class="label">Copy</span>
+            <span class="shortcut">⌘C</span>
+        </button>
+    {/if}
+
+    <button class="item" class:disabled={!canPaste} onclick={() => canPaste && handleAction(onPaste)}>
+        <span class="icon">📌</span>
+        <span class="label">Paste</span>
+        <span class="shortcut">⌘V</span>
+    </button>
+
+    {#if hasSelection}
+        <button class="item" onclick={() => handleAction(onDuplicate)}>
+            <span class="icon">⧉</span>
+            <span class="label">Duplicate</span>
+            <span class="shortcut">⌘D</span>
+        </button>
+
+        <div class="divider"></div>
+
+        <!-- Grouping -->
+        {#if canGroup}
+            <button class="item" onclick={() => handleAction(onGroup)}>
+                <span class="icon">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <rect x="2" y="2" width="8" height="8" rx="1"/><rect x="14" y="2" width="8" height="8" rx="1"/>
+                        <rect x="2" y="14" width="8" height="8" rx="1"/><rect x="14" y="14" width="8" height="8" rx="1"/>
+                    </svg>
+                </span>
+                <span class="label">Group</span>
+                <span class="shortcut">⌘G</span>
+            </button>
+        {/if}
+        {#if canUngroup}
+            <button class="item" onclick={() => handleAction(onUngroup)}>
+                <span class="icon">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <rect x="2" y="2" width="8" height="8" rx="1" stroke-dasharray="3 2"/><rect x="14" y="2" width="8" height="8" rx="1" stroke-dasharray="3 2"/>
+                        <rect x="2" y="14" width="8" height="8" rx="1" stroke-dasharray="3 2"/><rect x="14" y="14" width="8" height="8" rx="1" stroke-dasharray="3 2"/>
+                    </svg>
+                </span>
+                <span class="label">Ungroup</span>
+                <span class="shortcut">⌘⇧G</span>
+            </button>
+        {/if}
+
+        <div class="divider"></div>
+
+        <!-- Layer order -->
+        <button class="item" onclick={() => handleAction(onBringToFront)}>
+            <span class="icon">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="3" y="3" width="13" height="13"/><rect x="8" y="8" width="13" height="13" fill="white"/>
+                    <path d="M12 4v4M14 6l-2-2-2 2"/>
+                </svg>
+            </span>
+            <span class="label">Bring to Front</span>
+            <span class="shortcut">⌘]</span>
+        </button>
+        <button class="item" onclick={() => handleAction(onBringForward)}>
+            <span class="icon">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="3" y="8" width="13" height="13"/><rect x="8" y="3" width="13" height="13" fill="white" stroke="currentColor"/>
+                    <path d="M12 5v3M14 6l-2-2-2 2"/>
+                </svg>
+            </span>
+            <span class="label">Bring Forward</span>
+            <span class="shortcut">]</span>
+        </button>
+        <button class="item" onclick={() => handleAction(onSendBackward)}>
+            <span class="icon">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="8" y="3" width="13" height="13"/><rect x="3" y="8" width="13" height="13" fill="white" stroke="currentColor"/>
+                    <path d="M12 16v3M10 18l2 2 2-2"/>
+                </svg>
+            </span>
+            <span class="label">Send Backward</span>
+            <span class="shortcut">[</span>
+        </button>
+        <button class="item" onclick={() => handleAction(onSendToBack)}>
+            <span class="icon">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="8" y="8" width="13" height="13"/><rect x="3" y="3" width="13" height="13" fill="white"/>
+                    <path d="M12 17v3M10 19l2 2 2-2"/>
+                </svg>
+            </span>
+            <span class="label">Send to Back</span>
+            <span class="shortcut">⌘[</span>
+        </button>
+
+        <div class="divider"></div>
+
+        <button class="item danger" onclick={() => handleAction(onDelete)}>
+            <span class="icon">🗑</span>
+            <span class="label">Delete</span>
+            <span class="shortcut">⌫</span>
+        </button>
+    {:else}
+        <!-- No selection: only canvas-level actions -->
+        <div class="divider"></div>
+        <button class="item" onclick={() => handleAction(onSelectAll)}>
+            <span class="icon">⊹</span>
+            <span class="label">Select All</span>
+            <span class="shortcut">⌘A</span>
+        </button>
+    {/if}
+</div>
+{/if}
+
+<style>
+    .context-menu-el {
+        position: fixed;
+        z-index: 9999;
+        background: white;
+        border: 1px solid #e5e7eb;
+        border-radius: 8px;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
+        padding: 4px;
+        min-width: 180px;
+        font-size: 13px;
+        user-select: none;
+    }
+
+    .item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        width: 100%;
+        padding: 6px 10px;
+        border: none;
+        background: transparent;
+        border-radius: 5px;
+        cursor: pointer;
+        color: #111827;
+        text-align: left;
+        transition: background 0.1s;
+    }
+
+    .item:hover:not(.disabled) {
+        background: #f3f4f6;
+    }
+
+    .item.disabled {
+        opacity: 0.4;
+        cursor: default;
+    }
+
+    .item.danger {
+        color: #dc2626;
+    }
+
+    .item.danger:hover {
+        background: #fef2f2;
+    }
+
+    .icon {
+        width: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        font-size: 12px;
+    }
+
+    .label {
+        flex: 1;
+        font-weight: 400;
+    }
+
+    .shortcut {
+        color: #9ca3af;
+        font-size: 11px;
+        margin-left: auto;
+    }
+
+    .divider {
+        height: 1px;
+        background: #e5e7eb;
+        margin: 3px 0;
+    }
+</style>

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

@@ -0,0 +1,36 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        x?: number;
+        y?: number;
+        visible?: boolean;
+        hasSelection?: boolean;
+        selectionCount?: number;
+        canGroup?: boolean;
+        canUngroup?: boolean;
+        canPaste?: boolean;
+        onCut?: () => void;
+        onCopy?: () => void;
+        onPaste?: () => void;
+        onDuplicate?: () => void;
+        onDelete?: () => void;
+        onGroup?: () => void;
+        onUngroup?: () => void;
+        onBringToFront?: () => void;
+        onSendToBack?: () => void;
+        onBringForward?: () => void;
+        onSendBackward?: () => void;
+        onSelectAll?: () => void;
+        onClose?: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ContextMenuProps = typeof __propDef.props;
+export type ContextMenuEvents = typeof __propDef.events;
+export type ContextMenuSlots = typeof __propDef.slots;
+export default class ContextMenu extends SvelteComponentTyped<ContextMenuProps, ContextMenuEvents, ContextMenuSlots> {
+}
+export {};

package/dist/canvas/PanZoomPanel.svelte

@@ -0,0 +1,315 @@
+<script lang="ts">
+    // Pan Zoom Panel - Canvas navigation and view controls
+    import Tooltip from '../components/Tooltip.svelte';
+
+    let className = '';
+    export { className as class };
+    export let style = '';
+    
+    // Current zoom level (percentage)
+    export let zoomLevel: number = 100;
+    
+    // Is pan tool active
+    export let isPanActive: boolean = false;
+    
+    // Is grid visible
+    export let showGrid: boolean = false;
+    
+    // Callbacks
+    export let onPanToggle: () => void = () => {};
+    export let onZoomIn: () => void = () => {};
+    export let onZoomOut: () => void = () => {};
+    export let onZoomReset: () => void = () => {};
+    export let onZoomFit: () => void = () => {};
+    export let onZoomChange: (percent: number) => void = () => {};
+    export let onGridToggle: () => void = () => {};
+    export let onShortcutsToggle: () => void = () => {};
+    // Reflects open state so the button can show an active style
+    export let shortcutsOpen: boolean = false;
+
+    // Save button: visible when showSaveButton is true
+    export let showSaveButton: boolean = false;
+    export let hasUnsavedChanges: boolean = false;
+    export let onSave: (() => void) | null = null;
+    
+    // Editable zoom input
+    let zoomInputValue = zoomLevel.toString();
+    $: zoomInputValue = zoomLevel.toString();
+    
+    function handleZoomInputChange(e: Event) {
+        const input = e.target as HTMLInputElement;
+        zoomInputValue = input.value;
+    }
+    
+    function handleZoomInputBlur() {
+        const value = parseInt(zoomInputValue);
+        if (!isNaN(value) && value >= 10 && value <= 500) {
+            onZoomChange(value);
+        } else {
+            zoomInputValue = zoomLevel.toString();
+        }
+    }
+    
+    function handleZoomInputKeydown(e: KeyboardEvent) {
+        if (e.key === 'Enter') {
+            handleZoomInputBlur();
+            (e.target as HTMLInputElement).blur();
+        }
+    }
+</script>
+
+<div class="{className ? className + ' ' : ''}pan-zoom-panel" style={style}>
+    <!-- Grid Toggle -->
+    <Tooltip text="Toggle Grid  [G]" position="above">
+        <button
+            class="panel-btn grid-btn {showGrid ? 'active' : ''}"
+            onclick={onGridToggle}
+        >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="3" y="3" width="7" height="7"/>
+                <rect x="14" y="3" width="7" height="7"/>
+                <rect x="14" y="14" width="7" height="7"/>
+                <rect x="3" y="14" width="7" height="7"/>
+            </svg>
+        </button>
+    </Tooltip>
+
+    <div class="divider"></div>
+
+    <!-- Pan Tool -->
+    <Tooltip text="Hand / Pan  [H]" position="above">
+        <button
+            class="panel-btn pan-btn {isPanActive ? 'active' : ''}"
+            onclick={onPanToggle}
+        >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M18 11V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v0"/>
+                <path d="M14 10V4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v2"/>
+                <path d="M10 10.5V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v8"/>
+                <path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"/>
+            </svg>
+        </button>
+    </Tooltip>
+
+    <div class="divider"></div>
+
+    <!-- Zoom Out -->
+    <Tooltip text="Zoom Out  [Ctrl/Cmd] + [−]" position="above">
+        <button
+            class="panel-btn"
+            onclick={onZoomOut}
+            disabled={zoomLevel <= 10}
+        >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="11" cy="11" r="8"/>
+                <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+                <line x1="8" y1="11" x2="14" y2="11"/>
+            </svg>
+        </button>
+    </Tooltip>
+
+    <!-- Zoom Level Input -->
+    <div class="zoom-level">
+        <input
+            type="text"
+            class="zoom-input"
+            value={zoomInputValue}
+            oninput={handleZoomInputChange}
+            onblur={handleZoomInputBlur}
+            onkeydown={handleZoomInputKeydown}
+            maxlength="3"
+        />
+        <span class="zoom-unit">%</span>
+    </div>
+
+    <!-- Zoom In -->
+    <Tooltip text="Zoom In  [Ctrl/Cmd] + [+]" position="above">
+        <button
+            class="panel-btn"
+            onclick={onZoomIn}
+            disabled={zoomLevel >= 500}
+        >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="11" cy="11" r="8"/>
+                <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+                <line x1="11" y1="8" x2="11" y2="14"/>
+                <line x1="8" y1="11" x2="14" y2="11"/>
+            </svg>
+        </button>
+    </Tooltip>
+
+    <div class="divider"></div>
+
+    <!-- Reset Zoom (100%) -->
+    <Tooltip text="Reset Zoom 100%  [Ctrl/Cmd] + [0]" position="above">
+        <button
+            class="panel-btn"
+            onclick={onZoomReset}
+        >
+            <span class="text-btn">1:1</span>
+        </button>
+    </Tooltip>
+
+    <!-- Fit to View -->
+    <Tooltip text="Fit Content to View  [Ctrl/Cmd] + [9]" position="above">
+        <button
+            class="panel-btn"
+            onclick={onZoomFit}
+        >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M8 3H5a2 2 0 0 0-2 2v3"/>
+                <path d="M21 8V5a2 2 0 0 0-2-2h-3"/>
+                <path d="M3 16v3a2 2 0 0 0 2 2h3"/>
+                <path d="M16 21h3a2 2 0 0 0 2-2v-3"/>
+            </svg>
+        </button>
+    </Tooltip>
+
+    <div class="divider"></div>
+
+    <!-- Keyboard Shortcuts — moved here from toolbar so it lives with view controls, not drawing tools -->
+    <Tooltip text="Keyboard Shortcuts  [?]" position="above">
+        <button
+            class="panel-btn shortcuts-btn {shortcutsOpen ? 'active' : ''}"
+            onclick={onShortcutsToggle}
+            aria-label="Toggle keyboard shortcuts panel"
+        >
+            <!-- Keyboard icon — larger so it's clearly readable -->
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="2" y="6" width="20" height="13" rx="2"/>
+                <path d="M6 10h.01M10 10h.01M14 10h.01M18 10h.01M8 14h8M6 14h.01M18 14h.01"/>
+            </svg>
+        </button>
+    </Tooltip>
+
+    {#if showSaveButton}
+        <div class="divider"></div>
+        <Tooltip text={hasUnsavedChanges ? 'Unsaved changes — click to save  [Cmd+S]' : 'All changes saved  [Cmd+S]'} position="above">
+            <button
+                class="panel-btn save-btn {hasUnsavedChanges ? 'save-btn--dirty' : ''}"
+                onclick={() => onSave?.()}
+            >
+                {#if hasUnsavedChanges}
+                    <span class="save-dirty-dot">●</span>
+                {:else}
+                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+                        <path d="M2 2h8l2 2v8a1 1 0 01-1 1H3a1 1 0 01-1-1V2z" stroke="currentColor" stroke-width="1.3"/>
+                        <rect x="4.5" y="2" width="3" height="3.5" rx="0.5" stroke="currentColor" stroke-width="1.2"/>
+                        <rect x="3" y="7.5" width="8" height="4" rx="0.5" stroke="currentColor" stroke-width="1.2"/>
+                    </svg>
+                {/if}
+            </button>
+        </Tooltip>
+    {/if}
+</div>
+
+<style>
+    .pan-zoom-panel {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 6px 10px;
+        background: white;
+        border: 2px solid #e5e7eb;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    .panel-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        padding: 0;
+        border: 1px solid transparent;
+        border-radius: 6px;
+        background: transparent;
+        color: #6b7280;
+        cursor: pointer;
+        transition: all 0.15s ease;
+    }
+
+    .panel-btn:hover:not(:disabled) {
+        background: #f3f4f6;
+        color: #374151;
+    }
+
+    .panel-btn:active:not(:disabled) {
+        background: #e5e7eb;
+    }
+
+    .panel-btn.active {
+        background: var(--main-color, #314F2F);
+        color: white;
+        border-color: var(--main-color, #314F2F);
+    }
+
+    .panel-btn.active:hover {
+        background: var(--main-color-hover, #263d24);
+        color: white;
+    }
+
+    .panel-btn:disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+    }
+
+    /* Keyboard shortcuts button — slightly bigger to ensure the icon is clearly readable */
+    .shortcuts-btn {
+        width: 36px;
+        height: 36px;
+    }
+
+    .text-btn {
+        font-size: 11px;
+        font-weight: 600;
+        letter-spacing: -0.5px;
+    }
+
+    .divider {
+        width: 1px;
+        height: 24px;
+        background: #e5e7eb;
+        margin: 0 4px;
+    }
+
+    .zoom-level {
+        display: flex;
+        align-items: center;
+        border: 1px solid #e5e7eb;
+        border-radius: 4px;
+        overflow: hidden;
+        background: #f9fafb;
+    }
+
+    .zoom-input {
+        width: 36px;
+        padding: 4px 6px;
+        border: none;
+        background: transparent;
+        font-size: 12px;
+        font-weight: 500;
+        text-align: right;
+        outline: none;
+    }
+
+    .zoom-input:focus {
+        background: white;
+    }
+
+    .zoom-unit {
+        padding: 4px 6px 4px 0;
+        font-size: 11px;
+        color: #6b7280;
+    }
+
+    .save-btn--dirty {
+        color: #ef4444 !important;
+    }
+
+    .save-dirty-dot {
+        font-size: 16px;
+        line-height: 1;
+    }
+</style>