@widgetic/canvas 0.5.4

package/dist/canvas/CanvasToolbar.svelte

@@ -0,0 +1,1422 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import Tooltip from '../components/Tooltip.svelte';
+    import { SHAPE_LIBRARY, getShapesByCategory, type LibraryShape } from './shapes/ShapeLibrary';
+
+    /**
+     * COMPONENT PROPS
+     */
+    // Tool type definition
+    type ToolName = 'select' | 'erase' | 'draw' | 'arrow' | 'text' | 'rect' | 'circle' | 'circle-true' | 'triangle' | 'frame' | 'pan' | 'image' | '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';
+
+    // Class
+    let className = '';
+    export { className as class };
+    // Style
+    export let style = '';
+    // component state props
+    export let activeTool: ToolName = 'select';
+    export let activeClass: string = 'wdg-tool-active';
+    export let inactiveClass: string = 'wdg-tool-inactive';
+    export let buttonClass: string = 'wdg-tool-bt';
+    
+    // tools handler functions
+    export let onSelectSelectTool: () => void = () => {};
+    export let onSelectEraseTool: () => void = () => {};
+    export let onSelectDrawTool: () => void = () => {};
+    export let onSelectShapeTool: (shapeType: ShapeToolName) => void = () => {};
+    export let onSelectFrameTool: () => void = () => {};
+    export let onSelectTextTool: () => void = () => {};
+    export let onSelectPanTool: () => void = () => {};
+    export let onSelectImageTool: () => void = () => {};
+    // Zoom callbacks — optional, used for Ctrl+/Ctrl- shortcuts
+    export let onZoomIn: () => void = () => {};
+    export let onZoomOut: () => void = () => {};
+    export let onZoomReset: () => void = () => {};
+    export let onZoomFit: () => void = () => {};
+
+    // actions handler functions
+    export let onGroupSelection: () => void = () => {};
+    export let onUngroupSelection: () => void = () => {};
+    export let onDuplicateSelection: () => void = () => {};
+    export let onSelectAllObjects: () => void = () => {};
+    export let onClearAllObjects: () => void = () => {};
+
+    // ── Undo / Redo ────────────────────────────────────────────────────────────
+    export let onUndo: () => void = () => {};
+    export let onRedo: () => void = () => {};
+    /** Disables the Undo button when there is no prior state to go back to. */
+    export let canUndo: boolean = false;
+    /** Disables the Redo button when there is no future state to redo to. */
+    export let canRedo: boolean = false;
+
+    // ── Sticky tool mode ────────────────────────────────────────────────────────
+    /** When true, the drawing tool stays active after placing a shape. */
+    export let stickyToolEnabled: boolean = false;
+    export let onToggleStickyTool: () => void = () => {};
+
+    // ── Shape library (special shapes: media, arrows, UI) ────────────────────
+    /** Called when user clicks a library shape. Canvas inserts it as a Path. */
+    export let onInsertLibraryShape: (shapeKey: string, pathData: string) => void = () => {};
+    /** Draw-to-place: activates library shape tool so user clicks-and-drags to size it. */
+    export let onSelectLibraryShapeTool: (shapeKey: string, pathData: string) => void = () => {};
+
+    // Pre-group shapes for the dropdown
+    const libraryShapesByCategory = getShapesByCategory();
+
+    // add shapes handler functions
+    export let addText: () => void = () => {};
+    export let addRect: () => void = () => {};
+    export let addTriangle: () => void = () => {};
+    export let addCircle: () => void = () => {};
+    export let addFrame: () => void = () => {};
+    export let addImage: () => void = () => {};
+
+    // ─── Shapes + Image dropdown state ───
+    // The last-selected tool within the dropdown (shapes, image, OR library shape).
+    type DropdownToolName = ShapeToolName | 'image' | '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;
+    let shapesDropdownOpen = false;
+    let shapesDropdownNeedsScroll = false;
+    // DEV FLAG: when true the dropdown stays open after selecting a shape so
+    // multiple shapes can be placed in a row. Set to false for production.
+    const KEEP_SHAPES_DROPDOWN_OPEN = true;
+    // Position for the dropdown (absolute within canvas-container)
+    let dropdownLeft = 0;
+    // When opening ABOVE: distance from the container's bottom edge (CSS 'bottom' property)
+    let dropdownBottomOffset = 0;
+    // When opening BELOW: distance from the container's top edge (CSS 'top' property)
+    let dropdownTopOffset = 0;
+    // Minimum width of the dropdown — at least as wide as the trigger button
+    let dropdownMinWidth = 0;
+    let dropdownMaxHeight = 400;
+    // True when the dropdown should open ABOVE the button (toolbar is at bottom of canvas)
+    let dropdownOpenAbove = false;
+    let dropdownTriggerEl: HTMLElement | null = null;
+
+    // Map shape type to display info (Arrow is a dedicated button, not in this map).
+    const shapeInfo: Record<ShapeToolName, { icon: string; iconSvg: string; label: string; key: string }> = {
+        rect: {
+            icon: '⬜',
+            iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="1" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>`,
+            label: 'Rectangle',
+            key: 'R',
+        },
+        triangle: {
+            icon: '△',
+            iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><polygon points="12,3 22,21 2,21" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>`,
+            label: 'Triangle',
+            key: 'G',
+        },
+        circle: {
+            icon: '⚪',
+            iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><ellipse cx="12" cy="12" rx="10" ry="7" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>`,
+            label: 'Ellipse',
+            key: 'O',
+        },
+        'circle-true': {
+            icon: '⚪',
+            iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>`,
+            label: 'Circle',
+            key: '',
+        },
+    };
+
+    // Image dropdown entry — placed at the bottom of the shapes dropdown with a divider
+    const imageDropdownInfo = {
+        iconSvg: `<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="1" y="2" width="14" height="12" rx="1.5" fill="white" stroke="#9ca3af" stroke-width="1.5"/><polyline points="1.5,10.5 5,6.5 8,9 11,6.5 14.5,10.5" fill="none" stroke="#9ca3af" stroke-width="1.2"/><circle cx="11.5" cy="5" r="1.2" fill="#9ca3af"/></svg>`,
+        label: 'Image',
+        key: 'I',
+    };
+    
+    // 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)
+        ? (activeTool as DropdownToolName)
+        : lastSelectedDropdownTool;
+    $: activeDropdownIsActive = dropdownToolsWithoutImage.includes(activeTool as DropdownToolName);
+
+    // Backwards-compat aliases used in template
+    $: activeShapeInDropdown = activeDropdownTool as ShapeToolName;
+    $: activeShapeIsActive = activeDropdownIsActive;
+
+    function selectShape(shape: ShapeToolName) {
+        lastSelectedDropdownTool = shape;
+        if (!KEEP_SHAPES_DROPDOWN_OPEN) shapesDropdownOpen = false;
+        onSelectShapeTool(shape);
+    }
+
+    function selectImageFromDropdown() {
+        if (!KEEP_SHAPES_DROPDOWN_OPEN) shapesDropdownOpen = false;
+        onSelectImageTool();
+    }
+
+    function selectLibraryShape(shape: LibraryShape) {
+        lastSelectedDropdownTool = 'library-shape';
+        lastSelectedLibraryShape = shape;
+        if (!KEEP_SHAPES_DROPDOWN_OPEN) shapesDropdownOpen = false;
+        onSelectLibraryShapeTool(shape.key, shape.pathData);
+    }
+
+    // Click action for the main dropdown button (left part)
+    function activateDropdownTool() {
+        if (activeDropdownTool === 'library-shape' && lastSelectedLibraryShape) {
+            selectLibraryShape(lastSelectedLibraryShape);
+        } else {
+            selectShape(activeDropdownTool as ShapeToolName);
+        }
+    }
+
+    // Tooltip text for the main dropdown button
+    $: dropdownButtonTooltip = activeDropdownTool === 'library-shape' && lastSelectedLibraryShape
+            ? lastSelectedLibraryShape.label
+            : shapeInfo[activeDropdownTool as ShapeToolName]?.label
+                ? (shapeInfo[activeDropdownTool as ShapeToolName].key
+                    ? `${shapeInfo[activeDropdownTool as ShapeToolName].label}  (${shapeInfo[activeDropdownTool as ShapeToolName].key})`
+                    : shapeInfo[activeDropdownTool as ShapeToolName].label)
+                : 'Shapes';
+
+    // Dropdown width — sized to fit 3 × 40px icon grid with minimal side padding
+    const DROPDOWN_WIDTH = 152;
+
+    function computeDropdownPosition() {
+        if (!dropdownTriggerEl) return;
+        const rect = dropdownTriggerEl.getBoundingClientRect();
+        const containerEl = dropdownTriggerEl.closest('.canvas-container') as HTMLElement | null;
+        const containerRect = containerEl
+            ? containerEl.getBoundingClientRect()
+            : { left: 0, top: 0, bottom: window.innerHeight, height: window.innerHeight };
+
+        const estimatedDropdownHeight = 150;
+        dropdownOpenAbove = rect.top > estimatedDropdownHeight;
+
+        // Center the dropdown horizontally relative to the trigger button
+        const buttonCenterX = rect.left + rect.width / 2 - containerRect.left;
+        dropdownLeft = Math.max(4, buttonCenterX - DROPDOWN_WIDTH / 2);
+
+        if (dropdownOpenAbove) {
+            dropdownBottomOffset = containerRect.height - (rect.top - containerRect.top) + 8;
+            dropdownMaxHeight = rect.top - containerRect.top - 16;
+        } else {
+            dropdownTopOffset = rect.bottom - containerRect.top + 8;
+            dropdownMaxHeight = containerRect.bottom - rect.bottom - 16;
+        }
+
+        dropdownMinWidth = DROPDOWN_WIDTH;
+    }
+
+    function toggleShapesDropdown(e?: MouseEvent) {
+        e?.stopPropagation();
+        e?.preventDefault();
+        if (!shapesDropdownOpen) {
+            computeDropdownPosition();
+        }
+        shapesDropdownOpen = !shapesDropdownOpen;
+    }
+
+    // Close dropdown when clicking outside
+    function handleOutsideClick(e: MouseEvent) {
+        const target = e.target as HTMLElement;
+        if (!target.closest('.shapes-split-ct') && !target.closest('.shapes-dropdown-menu-fixed')) {
+            shapesDropdownOpen = false;
+        }
+    }
+
+    // Reposition dropdown on window resize so it stays aligned with the trigger
+    function handleWindowResize() {
+        if (shapesDropdownOpen) computeDropdownPosition();
+    }
+
+    // ─── Keyboard shortcuts panel state ───
+    // Exported so Canvas.svelte can lift state and share it with PanZoomPanel's toggle button
+    export let shortcutsPanelOpen = false;
+    export let onShortcutsToggle: () => void = () => { shortcutsPanelOpen = !shortcutsPanelOpen; };
+
+    // Shortcut key data structure:
+    //   string value  → rendered as a key badge  <kbd>
+    //   null          → rendered as a '+' separator (plain text between badges)
+    // Using null instead of '+' avoids ambiguity when '+' itself is a shortcut key.
+    const shortcutGroups: { title: string; shortcuts: { keys: (string | null)[]; label: string }[] }[] = [
+        {
+            title: 'Tools',
+            shortcuts: [
+                { keys: ['V'],              label: 'Select' },
+                { keys: ['H'],              label: 'Hand / Pan' },
+                { keys: ['E'],              label: 'Erase' },
+                { keys: ['D'],              label: 'Draw' },
+                { keys: ['A'],              label: 'Arrow' },
+                { keys: ['R'],              label: 'Rectangle' },
+                { keys: ['G'],              label: 'Triangle' },
+                { keys: ['O'],              label: 'Ellipse' },
+                { keys: ['F'],              label: 'Frame' },
+                { keys: ['T'],              label: 'Text' },
+                { keys: ['I'],              label: 'Image' },
+            ],
+        },
+        {
+            title: 'Selection',
+            shortcuts: [
+                { keys: ['Ctrl/Cmd', null, 'A'],                      label: 'Select All' },
+                { keys: ['Alt', null, 'Click'],                       label: 'Drill-through Select' },
+                { keys: ['Ctrl/Cmd', null, 'D'],                      label: 'Duplicate' },
+                { keys: ['Ctrl/Cmd', null, 'C'],                      label: 'Copy' },
+                { keys: ['Ctrl/Cmd', null, 'V'],                      label: 'Paste' },
+                { keys: ['Del'],                                       label: 'Delete' },
+                { keys: ['Ctrl/Cmd', null, 'G'],                      label: 'Group' },
+                { keys: ['Ctrl/Cmd', null, 'Shift', null, 'G'],       label: 'Ungroup' },
+            ],
+        },
+        {
+            title: 'History',
+            shortcuts: [
+                { keys: ['Ctrl/Cmd', null, 'Z'],                      label: 'Undo' },
+                { keys: ['Ctrl/Cmd', null, 'Shift', null, 'Z'],       label: 'Redo' },
+                { keys: ['Ctrl/Cmd', null, 'Y'],                      label: 'Redo (alt)' },
+                { keys: ['Ctrl/Cmd', null, 'S'],                      label: 'Save' },
+            ],
+        },
+        {
+            title: 'Zoom & Canvas',
+            shortcuts: [
+                // null = '+' separator; the final '+' here is the actual key badge
+                { keys: ['Ctrl/Cmd', null, '+'],                      label: 'Zoom In' },
+                { keys: ['Ctrl/Cmd', null, '−'],                      label: 'Zoom Out' },
+                { keys: ['Ctrl/Cmd', null, '0'],                      label: 'Reset Zoom (100%)' },
+                { keys: ['Ctrl/Cmd', null, '9'],                      label: 'Fit to screen' },
+                { keys: ['Space', null, 'Drag'],                      label: 'Pan canvas' },
+                // Four arrow keys shown as individual square badges (no separator between them)
+                { keys: ['↑', '↓', '←', '→'],                       label: 'Move selected (1px)' },
+                { keys: ['Shift', null, '↑', '↓', '←', '→'],        label: 'Move selected (10px)' },
+            ],
+        },
+        {
+            title: 'Layer Order',
+            shortcuts: [
+                { keys: [']'],                                         label: 'Bring Forward' },
+                { keys: ['['],                                         label: 'Send Backward' },
+                { keys: ['Ctrl/Cmd', null, ']'],                       label: 'Bring to Front' },
+                { keys: ['Ctrl/Cmd', null, '['],                       label: 'Send to Back' },
+            ],
+        },
+        {
+            title: 'Frame',
+            shortcuts: [
+                { keys: ['Alt', null, 'Drag corner'],                 label: 'Resize, keep children size' },
+                { keys: ['Double-click'],                             label: 'Enter / exit frame edit' },
+            ],
+        },
+    ];
+
+    /**
+     * Handle keyboard shortcuts
+     */
+    function handleKeydown(event: KeyboardEvent) {
+        // Toggle shortcuts panel with '?'
+        if (event.key === '?' && !event.ctrlKey && !event.metaKey) {
+            const activeElement = document.activeElement as HTMLElement | null;
+            if (activeElement) {
+                const tagName = activeElement.tagName;
+                if (tagName === 'INPUT' || tagName === 'TEXTAREA' || activeElement.isContentEditable) {
+                    return;
+                }
+            }
+            event.preventDefault();
+            onShortcutsToggle();
+            return;
+        }
+        
+        // Close panel / dropdown with Escape
+        if (event.key === 'Escape') {
+            shortcutsPanelOpen = false;
+            shapesDropdownOpen = false;
+        }
+
+        // Ctrl / Cmd + zoom shortcuts
+        if (event.ctrlKey || event.metaKey) {
+            const key = event.key;
+            if (key === '+' || key === '=' || key === 'Add') {
+                event.preventDefault();
+                onZoomIn();
+                return;
+            }
+            if (key === '-' || key === 'Subtract') {
+                event.preventDefault();
+                onZoomOut();
+                return;
+            }
+            if (key === '0') {
+                event.preventDefault();
+                onZoomReset();
+                return;
+            }
+            if (key === '9') {
+                event.preventDefault();
+                onZoomFit();
+                return;
+            }
+            // Other Ctrl/Cmd shortcuts are handled in Canvas.svelte — skip here
+            return;
+        }
+        
+        // Skip if focus is on text input
+        const activeElement = document.activeElement as HTMLElement | null;
+        if (activeElement) {
+            const tagName = activeElement.tagName;
+            const isTextInput = tagName === 'INPUT' || tagName === 'TEXTAREA';
+            if (isTextInput || activeElement.isContentEditable) {
+                return;
+            }
+        }
+        
+        // Skip other alt combinations (handled in Canvas.svelte)
+        if (event.altKey) return;
+        
+        const key = event.key.toUpperCase();
+        
+        // Map keys to handlers — using current prop references
+        switch (key) {
+            case 'V': event.preventDefault(); onSelectSelectTool(); break;
+            case 'E': event.preventDefault(); onSelectEraseTool(); break;
+            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 'T': event.preventDefault(); onSelectTextTool(); break;
+            case 'I': event.preventDefault(); onSelectImageTool(); break;
+        }
+    }
+
+    // Capture-phase handler to prevent browser zoom (Cmd/Ctrl + = / - / 0 / 9).
+    // Must use capture:true to intercept before the browser handles it natively.
+    // We check both event.key (character-based) AND event.code (physical key-based)
+    // so this works across keyboard layouts and Numpad keys.
+    function preventBrowserZoom(event: KeyboardEvent) {
+        if (event.ctrlKey || event.metaKey) {
+            const key = event.key;
+            const code = event.code;
+            const isZoomKey =
+                // Character-based (varies by layout)
+                key === '=' || key === '+' || key === '-' ||
+                key === '0' || key === '9' ||
+                key === 'Add' || key === 'Subtract' ||
+                // Physical key codes (layout-independent) — covers Numpad keys too
+                code === 'Equal' || code === 'Minus' ||
+                code === 'Digit0' || code === 'Digit9' ||
+                code === 'NumpadAdd' || code === 'NumpadSubtract' || code === 'NumpadEqual';
+            if (isZoomKey) {
+                event.preventDefault();
+            }
+        }
+    }
+
+    // Prevent browser pinch-to-zoom and Ctrl+wheel zoom (trackpad gesture).
+    // passive:false is required so we can call preventDefault().
+    function preventWheelZoom(event: WheelEvent) {
+        if (event.ctrlKey || event.metaKey) {
+            event.preventDefault();
+        }
+    }
+
+    // Use onMount's return function for cleanup — this only runs in browser
+    onMount(() => {
+        window.addEventListener('keydown', handleKeydown);
+        window.addEventListener('click', handleOutsideClick);
+        window.addEventListener('resize', handleWindowResize);
+        // Capture phase: intercept browser zoom keys before the browser acts on them
+        document.addEventListener('keydown', preventBrowserZoom, { capture: true });
+        // Non-passive wheel listener to block Ctrl/Cmd + scroll (trackpad pinch zoom)
+        document.addEventListener('wheel', preventWheelZoom as EventListener, { passive: false });
+
+        return () => {
+            window.removeEventListener('keydown', handleKeydown);
+            window.removeEventListener('click', handleOutsideClick);
+            window.removeEventListener('resize', handleWindowResize);
+            document.removeEventListener('keydown', preventBrowserZoom, { capture: true } as EventListenerOptions);
+            document.removeEventListener('wheel', preventWheelZoom as EventListener);
+        };
+    });
+
+    /** Svelte action: applies negative right margin only when scrollable,
+     *  so the scrollbar overlays the parent padding zone. */
+    function overlayScrollbar(node: HTMLElement) {
+        function check() {
+            shapesDropdownNeedsScroll = node.scrollHeight > node.clientHeight;
+        }
+        const ro = new ResizeObserver(check);
+        ro.observe(node);
+        check();
+        return { destroy() { ro.disconnect(); } };
+    }
+
+</script>
+
+<div class="{className ? className + ' ' : ''}canvas-toolbar-el flex flex-col justify-between gap-2" style={style}>
+    <!-- Tools Bar -->
+    <div class="tools-bar-el flex flex-row gap-2 w-full">
+        <!-- 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">
+            <!-- ── Utility cluster: Undo, Redo, Hand, Lock | Divider ── -->
+            <Tooltip text="Undo  (Ctrl+Z)">
+                <div class="disabled-tooltip-wrap">
+                    <button
+                        class="undo-bt {buttonClass} {inactiveClass}"
+                        onclick={onUndo}
+                        disabled={!canUndo}
+                        aria-label="Undo"
+                    >
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M3 7v6h6"/>
+                            <path d="M3 13C3 13 5.5 7 12 7c4.42 0 8 3.13 8 7s-3.58 7-8 7a8.23 8.23 0 0 1-5.66-2.34"/>
+                        </svg>
+                    </button>
+                </div>
+            </Tooltip>
+            <Tooltip text="Redo  (Ctrl+Shift+Z)">
+                <div class="disabled-tooltip-wrap">
+                    <button
+                        class="redo-bt {buttonClass} {inactiveClass}"
+                        onclick={onRedo}
+                        disabled={!canRedo}
+                        aria-label="Redo"
+                    >
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M21 7v6h-6"/>
+                            <path d="M21 13C21 13 18.5 7 12 7c-4.42 0-8 3.13-8 7s3.58 7 8 7a8.23 8.23 0 0 0 5.66-2.34"/>
+                        </svg>
+                    </button>
+                </div>
+            </Tooltip>
+            <!-- Hand / Pan — hidden (available in zoom panel) -->
+            <!-- <Tooltip text="Hand / Pan  (H)">
+                <button class="hand-bt {buttonClass} {activeTool === 'pan' ? activeClass : inactiveClass}"
+                    onclick={onSelectPanTool}
+                    aria-label="Hand / Pan">
+                    <svg width="22" height="22" 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> -->
+            <Tooltip text={stickyToolEnabled ? 'Tool Lock: ON — drawing tool stays active' : 'Tool Lock: OFF — reverts to Select after placing'}>
+                <button class="sticky-tool-bt {buttonClass} {stickyToolEnabled ? activeClass : inactiveClass}"
+                    onclick={onToggleStickyTool}
+                    aria-label="Toggle sticky tool mode"
+                    aria-pressed={stickyToolEnabled}>
+                    {#if stickyToolEnabled}
+                        <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="3" y="11" width="18" height="11" rx="2" ry="2"/>
+                            <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+                        </svg>
+                    {:else}
+                        <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="3" y="11" width="18" height="11" rx="2" ry="2"/>
+                            <path d="M7 11V7a5 5 0 0 1 9.9-1"/>
+                        </svg>
+                    {/if}
+                </button>
+            </Tooltip>
+
+            <div class="toolbar-divider"></div>
+
+            <!-- ══ Illustrated tools: Pencil & Eraser — "pulled from sheath" on select ══ -->
+            <!-- Each tool is wrapped in a mask container that clips its body at rest.
+                 When active, overflow becomes visible so the tool "pops out" above the toolbar. -->
+            <div class="wdg-illustrated-mask {activeTool === 'draw' ? 'wdg-illustrated-mask-active' : ''}">
+                <Tooltip text="Draw  (D)" offsetY={8}>
+                    <!-- svelte-ignore a11y-click-events-have-key-events -->
+                    <!-- svelte-ignore a11y-no-static-element-interactions -->
+                    <div class="wdg-illustrated-bt {activeTool === 'draw' ? 'wdg-illustrated-active' : ''}"
+                        onclick={onSelectDrawTool}
+                        role="button"
+                        tabindex="-1"
+                        aria-label="Draw">
+                        <svg class="wdg-pencil-svg" viewBox="0 0 32 159" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M20.8823 15.927L18.439 3.29447C17.3288 0.137968 14.6702 0.137967 13.5604 3.29374L11.114 15.927H20.8823Z" fill="#4A4A4C"/>
+                            <path d="M32 88.8211L32 68.6342C32 66.2211 31.7486 63.9551 31.3079 61.9972L20.8785 15.927H11.1176L0.841019 61.3789L0.692138 61.9972C0.251452 63.9551 6.10352e-05 66.2211 6.10352e-05 68.6342L0.000481631 88.8221L32 88.8211Z" fill="url(#pencilBody)"/>
+                            <path d="M8.00006 158.93L7.99997 69.1565C7.99997 66.1271 6.20959 61.6724 4.00002 61.6724C2.58481 61.6724 1.34125 62.6801 0.630773 64.2001L0.519114 64.4521C0.188602 65.2499 6.10352e-05 68.1732 6.10352e-05 69.1565L0.000150606 158.93H8.00006Z" fill="#A4A3A8"/>
+                            <path d="M15.4888 61.6724C11.347 61.6724 7.98895 66.1279 7.98895 69.1565V158.93H22.9888L22.9888 69.1565C22.9888 66.1279 19.6306 61.6724 15.4888 61.6724Z" fill="#707477"/>
+                            <path d="M32 158.93L32 68.1565C32 67.1732 31.7879 64.2499 31.4161 63.4521L31.2908 63.2006C30.4915 61.6806 29.0921 61.6724 27.5 61.6724C25.0142 61.6724 23 66.1271 23 69.1565L23 158.93H32Z" fill="#5E6064"/>
+                            <defs>
+                                <linearGradient id="pencilBody" x1="2.45" y1="53.89" x2="38.29" y2="57.66" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.145" stop-color="#EFDBCC"/><stop offset="0.185" stop-color="#FBDDCB"/>
+                                    <stop offset="0.25" stop-color="#E2B8A4"/><stop offset="0.44" stop-color="#C49F8F"/>
+                                    <stop offset="0.77" stop-color="#AF9280"/>
+                                </linearGradient>
+                            </defs>
+                        </svg>
+                    </div>
+                </Tooltip>
+            </div>
+            <div class="wdg-illustrated-mask {activeTool === 'erase' ? 'wdg-illustrated-mask-active' : ''}">
+                <Tooltip text="Erase  (E)" offsetY={8}>
+                    <!-- svelte-ignore a11y-click-events-have-key-events -->
+                    <!-- svelte-ignore a11y-no-static-element-interactions -->
+                    <div class="wdg-illustrated-bt {activeTool === 'erase' ? 'wdg-illustrated-active' : ''}"
+                        onclick={onSelectEraseTool}
+                        role="button"
+                        tabindex="-1"
+                        aria-label="Erase">
+                        <svg class="wdg-eraser-svg" viewBox="0 0 32 127" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M31.9959 29.9282L1.3e-06 29.9282L0 36.9282L31.9959 36.9282L31.9959 29.9282Z" fill="#ABB1B4"/>
+                            <path d="M4.4e-05 36.9241L0 36.5283H10.6654V36.9241L4.4e-05 36.9241Z" fill="white"/>
+                            <path d="M10.6655 36.9241V36.5283L21.3307 36.5283V36.9241L10.6655 36.9241Z" fill="white"/>
+                            <path d="M21.3305 36.9242L21.3305 36.5283L31.9958 36.5284L31.9958 36.9242H21.3305Z" fill="white"/>
+                            <path d="M1.58716 36.5284L1.58716 29.9282H10.1257L10.1257 36.5284H1.58716Z" fill="#858E92"/>
+                            <path d="M0.003 36.93L8.003 36.93V126.93H0.003V36.93Z" fill="#A4A3A8"/>
+                            <path d="M8.003 36.93L23.003 36.93V126.93H8.003V36.93Z" fill="#707477"/>
+                            <path d="M23.003 36.93L32 36.93V126.93H23.003V36.93Z" fill="#5E6064"/>
+                            <path d="M23.362 36.5284L23.362 29.9282L30.6204 29.9283L30.6204 36.5284H23.362Z" fill="#858E92"/>
+                            <path d="M20.0186 29.9282H14.8553L14.8553 36.5284L20.0186 36.5284L20.0186 29.9282Z" fill="#E4EBED"/>
+                            <path d="M-2.1e-05 29.9282L31.9959 29.9283L31.9959 10.7812C31.9959 5.34073 27.7514 0.930376 22.5156 0.93042H9.48026C4.24447 0.93042 1.9e-05 5.34073 1.9e-05 10.7811L-2.1e-05 29.9282Z" fill="url(#eraserHead)"/>
+                            <path opacity="0.4" d="M31.9959 29.9278L31.9959 10.7812C31.9959 10.7649 31.9959 10.7485 31.9958 10.7322C31.9948 10.5134 31.9869 10.2957 31.9723 10.0804L31.9701 10.0488L31.969 10.0331C31.601 4.94215 27.5092 0.93042 22.5156 0.93042L14.6346 0.93042C19.0593 0.978238 22.6318 4.71971 22.6318 9.32859L22.6318 29.9278L31.9959 29.9278Z" fill="#A04B5C"/>
+                            <path d="M31.9959 30.324L4.3e-05 30.324L0 29.9283L31.9959 29.9282V30.324Z" fill="white"/>
+                            <defs>
+                                <linearGradient id="eraserHead" x1="-2.1e-05" y1="29.9283" x2="31.9959" y2="29.9283" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.215" stop-color="#ED95A1"/><stop offset="0.33" stop-color="#E77E8D"/>
+                                    <stop offset="0.667" stop-color="#BA5C6E"/><stop offset="1" stop-color="#863F4E"/>
+                                </linearGradient>
+                            </defs>
+                        </svg>
+                    </div>
+                </Tooltip>
+            </div>
+
+            <!-- ══ Standard icon-only tool buttons ══ -->
+            <Tooltip text="Select  (V)">
+                <button class="select-bt {buttonClass} {activeTool === 'select' ? activeClass : inactiveClass}"
+                    onclick={onSelectSelectTool}
+                    aria-label="Select">
+                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M5 3L5 18.5L9.5 14L14.5 21L17 19.5L12 12.5L18 12.5L5 3Z" fill="currentColor" stroke="currentColor" stroke-width="1" stroke-linejoin="round"/>
+                    </svg>
+                </button>
+            </Tooltip>
+            <Tooltip text="Arrow  (A)">
+                <button class="arrow-bt {buttonClass} {activeTool === 'arrow' ? activeClass : inactiveClass}"
+                    onclick={() => onSelectShapeTool('arrow')}
+                    aria-label="Arrow">
+                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M6 18C6 18 6.06617 12.5162 8.00001 10.5521C10.862 7.64522 19 9 19 9M19 9L15 5M19 9L15 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </button>
+            </Tooltip>
+            <Tooltip text="Text  (T)">
+                <button class="text-bt {buttonClass} {activeTool === 'text' ? activeClass : inactiveClass}"
+                    onclick={onSelectTextTool}
+                    aria-label="Text">
+                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M6 7V5H18V7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        <path d="M12 5V19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        <path d="M14 19H10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </button>
+            </Tooltip>
+
+            <div class="toolbar-divider"></div>
+
+            <Tooltip text="Frame  (F)">
+                <button class="frame-bt {buttonClass} {activeTool === 'frame' ? activeClass : inactiveClass}"
+                    onclick={onSelectFrameTool}
+                    aria-label="Frame">
+                    <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="3" y="3" width="18" height="18" rx="2"/>
+                        <path d="M3 9h18"/>
+                        <path d="M9 3v6"/>
+                    </svg>
+                </button>
+            </Tooltip>
+
+            <Tooltip text="Image  (I)">
+                <button class="image-bt {buttonClass} {activeTool === 'image' ? activeClass : inactiveClass}"
+                    onclick={() => { onSelectImageTool(); }}
+                    aria-label="Image">
+                    <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="3" y="3" width="18" height="18" rx="2"/>
+                        <circle cx="8.5" cy="8.5" r="1.5"/>
+                        <path d="M21 15l-5-5L5 21"/>
+                    </svg>
+                </button>
+            </Tooltip>
+
+            <!-- Shapes: tldraw-style split — left activates tool, right opens dropdown -->
+            <div class="shapes-split-ct" bind:this={dropdownTriggerEl}>
+                <Tooltip text={dropdownButtonTooltip}>
+                    <button
+                        class="shapes-main-bt {buttonClass} {activeDropdownIsActive ? activeClass : inactiveClass}"
+                        onclick={activateDropdownTool}
+                        aria-label={activeDropdownTool === 'library-shape' && lastSelectedLibraryShape ? lastSelectedLibraryShape.label : shapeInfo[activeDropdownTool as ShapeToolName]?.label ?? 'Shapes'}
+                    >
+                        {#if activeDropdownTool === 'library-shape' && lastSelectedLibraryShape}
+                            {@html lastSelectedLibraryShape.iconSvg}
+                        {:else if shapeInfo[activeDropdownTool as ShapeToolName]}
+                            {@html shapeInfo[activeDropdownTool as ShapeToolName].iconSvg}
+                        {:else}
+                            {@html shapeInfo['rect'].iconSvg}
+                        {/if}
+                    </button>
+                </Tooltip>
+                <Tooltip text="More Shapes" disabled={shapesDropdownOpen}>
+                    <button
+                        class="shapes-caret-bt {buttonClass} {activeDropdownIsActive ? activeClass : inactiveClass}"
+                        onclick={(e) => toggleShapesDropdown(e)}
+                        aria-label="More shapes"
+                    >
+                        <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+                            <path d="M2 4L5 7L8 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                    </button>
+                </Tooltip>
+            </div>
+        </div>
+    </div>
+
+    <!-- Actions Bar (hidden by default, kept for future use) -->
+    <div class="actions-bar-el relative hidden flex-row gap-2 w-full">
+        <div class="actions-ct flex flex-row gap-2 overflow-x-auto rounded-xl p-2 bg-white/80 shadow-md border border-gray-100">
+            <!-- Grouping Actions -->
+            <button class="add-group-selection-bt {buttonClass}" onclick={onGroupSelection}><span class="icon">📦</span> Group</button>
+            <button class="add-ungroup-selection-bt {buttonClass}" onclick={onUngroupSelection}><span class="icon">📤</span> Ungroup</button>
+            <button class="add-duplicate-selection-bt {buttonClass}" onclick={onDuplicateSelection}><span class="icon">📋</span> Duplicate</button>
+            <button class="add-select-all-bt {buttonClass}" onclick={onSelectAllObjects}><span class="icon">🎯</span> Select All</button>        
+            <button class="add-clear-all-bt {buttonClass}" onclick={onClearAllObjects}><span class="icon">🗑️</span> Clear All</button>
+
+            <!-- Add Objects Actions -->
+            <button class="add-text-bt {buttonClass}" onclick={addText}><span class="icon">📝</span> Text</button>
+            <button class="add-rext-bt {buttonClass}" onclick={addRect}><span class="icon">⬜</span> Rectangle</button>
+            <button class="add-triangle-bt {buttonClass}" onclick={addTriangle}><span class="icon">🔺</span> Triangle</button>
+            <button class="add-circle-bt {buttonClass}" onclick={addCircle}><span class="icon">🔴</span> Circle</button>
+            <button class="add-frame-bt {buttonClass}" onclick={addFrame}><span class="icon frame-icon">▢</span> Frame</button>
+            <button class="add-image-bt {buttonClass}" onclick={addImage}><span class="icon">🖼️</span> Image</button>
+        </div>
+    </div>
+</div>
+
+<!-- ═══════════════════════════════════════════════════════════════
+     Shapes Dropdown Menu — rendered as sibling (outside overflow),
+     uses position:fixed with coordinates from getBoundingClientRect.
+     dropdownOpenAbove=true: appears above the trigger (toolbar at bottom).
+     dropdownOpenAbove=false: appears below (toolbar at top).
+     ═══════════════════════════════════════════════════════════════ -->
+{#if shapesDropdownOpen}
+    <!-- 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 -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div
+        class="shapes-dropdown-menu-fixed"
+        style="position:absolute; left:{dropdownLeft}px; {dropdownOpenAbove ? `bottom:${dropdownBottomOffset}px` : `top:${dropdownTopOffset}px`}; width:{dropdownMinWidth}px; max-height:{dropdownMaxHeight}px; z-index:9999;"
+    >
+    <div
+        class="shapes-dropdown-scroll"
+        use:overlayScrollbar
+        style={shapesDropdownNeedsScroll ? 'margin-right: -6px' : ''}
+    >
+        <!-- Geometric Shapes — 3×2 grid -->
+        <div class="shapes-category-label">Geometric Shapes</div>
+        <div class="shapes-library-grid">
+            <Tooltip text="Triangle  (G)" position="above">
+                <button class="shape-library-bt" onclick={() => selectShape('triangle')} aria-label="Triangle">
+                    {@html shapeInfo.triangle.iconSvg}
+                </button>
+            </Tooltip>
+            <Tooltip text="Rectangle  (R)" position="above">
+                <button class="shape-library-bt" onclick={() => selectShape('rect')} aria-label="Rectangle">
+                    {@html shapeInfo.rect.iconSvg}
+                </button>
+            </Tooltip>
+            {#each (libraryShapesByCategory.get('Geometric Shapes') ?? []).filter(s => s.key === 'hexagon') as shape}
+                <Tooltip text={shape.label} position="above">
+                    <button class="shape-library-bt" onclick={() => selectLibraryShape(shape)} aria-label={shape.label}>
+                        {@html shape.iconSvg}
+                    </button>
+                </Tooltip>
+            {/each}
+            <Tooltip text="Circle" position="above">
+                <button class="shape-library-bt" onclick={() => selectShape('circle-true')} aria-label="Circle">
+                    {@html shapeInfo['circle-true'].iconSvg}
+                </button>
+            </Tooltip>
+            <Tooltip text="Ellipse  (O)" position="above">
+                <button class="shape-library-bt" onclick={() => selectShape('circle')} aria-label="Ellipse">
+                    {@html shapeInfo.circle.iconSvg}
+                </button>
+            </Tooltip>
+            {#each (libraryShapesByCategory.get('Geometric Shapes') ?? []).filter(s => s.key === 'oval') as shape}
+                <Tooltip text={shape.label} position="above">
+                    <button class="shape-library-bt" onclick={() => selectLibraryShape(shape)} aria-label={shape.label}>
+                        {@html shape.iconSvg}
+                    </button>
+                </Tooltip>
+            {/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>
+            <div class="shapes-category-label">{category}</div>
+            <div class="shapes-library-grid">
+                {#each shapes as shape}
+                    <Tooltip text={shape.label} position="above">
+                        <button
+                            class="shape-library-bt"
+                            onclick={() => selectLibraryShape(shape)}
+                            aria-label={shape.label}
+                        >
+                            {@html shape.iconSvg}
+                        </button>
+                    </Tooltip>
+                {/each}
+            </div>
+        {/each}
+    </div><!-- end shapes-dropdown-scroll -->
+    </div><!-- end shapes-dropdown-menu-fixed -->
+{/if}
+
+<!-- ═══════════════════════════════════════════════════════════════
+     Keyboard Shortcuts Panel — rendered as sibling in canvas-container,
+     uses position:absolute (relative to canvas-container) so it is
+     always centered within the canvas area, not the viewport.
+     ═══════════════════════════════════════════════════════════════ -->
+{#if shortcutsPanelOpen}
+    <!-- Backdrop — covers the canvas area -->
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div class="shortcuts-backdrop" onclick={() => shortcutsPanelOpen = false}></div>
+    
+    <!-- Shortcuts Panel Overlay -->
+    <div class="shortcuts-panel">
+        <div class="shortcuts-panel-header">
+            <div class="shortcuts-panel-title-ct">
+                <span class="shortcuts-panel-icon">⌨</span>
+                <h2 class="shortcuts-panel-title">Keyboard Shortcuts</h2>
+            </div>
+            <button
+                class="close-shortcuts-bt"
+                onclick={() => shortcutsPanelOpen = false}
+            >✕</button>
+        </div>
+        
+        <div class="shortcuts-panel-body">
+            <div class="shortcuts-column">
+                {#each shortcutGroups.filter((_, i) => i % 2 === 0) as group}
+                    <div class="shortcut-group">
+                        <h3 class="shortcut-group-title">{group.title}</h3>
+                        <ul class="shortcut-list">
+                            {#each group.shortcuts as shortcut}
+                                <li class="shortcut-row">
+                                    <span class="shortcut-label">{shortcut.label}</span>
+                                    <div class="shortcut-keys">
+                                        {#each shortcut.keys as k}
+                                            {#if k === null}
+                                                <span class="shortcut-sep">+</span>
+                                            {:else}
+                                                <kbd class="shortcut-key">{k}</kbd>
+                                            {/if}
+                                        {/each}
+                                    </div>
+                                </li>
+                            {/each}
+                        </ul>
+                    </div>
+                {/each}
+            </div>
+            <div class="shortcuts-column">
+                {#each shortcutGroups.filter((_, i) => i % 2 === 1) as group}
+                    <div class="shortcut-group">
+                        <h3 class="shortcut-group-title">{group.title}</h3>
+                        <ul class="shortcut-list">
+                            {#each group.shortcuts as shortcut}
+                                <li class="shortcut-row">
+                                    <span class="shortcut-label">{shortcut.label}</span>
+                                    <div class="shortcut-keys">
+                                        {#each shortcut.keys as k}
+                                            {#if k === null}
+                                                <span class="shortcut-sep">+</span>
+                                            {:else}
+                                                <kbd class="shortcut-key">{k}</kbd>
+                                            {/if}
+                                        {/each}
+                                    </div>
+                                </li>
+                            {/each}
+                        </ul>
+                    </div>
+                {/each}
+            </div>
+        </div>
+        
+        <div class="shortcuts-panel-footer flex items-center justify-center gap-2">
+            Press <kbd class="shortcut-key font-medium">?</kbd> <span class="shortcuts-footer-hint">(Shift + /)</span> or click <kbd class="shortcut-key" style="font-size: 31px;">⌨</kbd> in the zoom panel to toggle
+        </div>
+    </div>
+{/if}
+
+<style>
+/* ══════════════════════════════════════════════════════════════
+   Widgetic Canvas Toolbar — custom design
+   • "Sheath" container: 80px height, white bg + shadow
+   • All buttons 48×48 px, icons fill proportionally
+   • Inactive: gray bg. Active: dark green. Hover: pale green.
+   • Pencil/Eraser: illustrated, extend above, pull-up on select
+   • Shapes: split button (shape + caret), dropdown centered
+   ══════════════════════════════════════════════════════════════ */
+
+/* ── Toolbar outer wrapper — transparent, no own shadow ── */
+.canvas-toolbar-el {
+    border-radius: 1.25rem;
+    overflow: visible;
+    background: transparent !important;
+    box-shadow: none !important;
+}
+
+/* ── "Sheath" — the white container holding all buttons ── */
+.tools-ct {
+    background: white;
+    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;
+    gap: 4px;
+    align-items: center;
+    overflow: visible;
+    position: relative;
+}
+
+/* ── Base button reset ── */
+button {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0;
+    border: none;
+    background: transparent;
+}
+
+button:focus {
+    outline: none;
+    box-shadow: none;
+}
+
+button:disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+/* ── Uniform tool button — ALL buttons 48×48, no border ── */
+.wdg-tool-bt {
+    width: 48px;
+    height: 48px;
+    padding: 0;
+    border-radius: 12px;
+    border: none;
+    background: #f0f0f0;
+    color: #374151;
+    transition: all 0.15s ease;
+    flex-shrink: 0;
+    box-shadow: none;
+}
+/* Scale icon SVGs inside tool buttons to fill them nicely */
+.wdg-tool-bt :global(svg) {
+    width: 24px !important;
+    height: 24px !important;
+}
+/* Utility buttons (undo, redo, lock) — slightly smaller icons */
+.undo-bt :global(svg),
+.redo-bt :global(svg),
+.sticky-tool-bt :global(svg) {
+    width: 20px !important;
+    height: 20px !important;
+}
+
+/* Inactive state — light gray bg */
+.wdg-tool-inactive {
+    background: #f0f0f0;
+    color: #374151;
+}
+
+/* Hover — pale green */
+.wdg-tool-bt:hover {
+    background: #e6f0eb !important;
+    color: #1a3a2a !important;
+}
+
+/* Active (selected) — dark green bg, white icon */
+.wdg-tool-active {
+    background: #1a3a2a !important;
+    color: white !important;
+    box-shadow: 0 2px 8px rgba(26, 58, 42, 0.25);
+}
+.wdg-tool-active:hover {
+    background: #244b36 !important;
+    color: white !important;
+}
+
+/* Wrapper to intercept hover events on disabled buttons for tooltip.
+   display:inline-flex ensures the div is a visible box that receives mouseenter. */
+.disabled-tooltip-wrap {
+    display: inline-flex;
+}
+
+/* ── Divider ── */
+.toolbar-divider {
+    width: 1px;
+    height: 32px;
+    align-self: center;
+    background-color: #e5e7eb;
+    margin: 0 2px;
+    flex-shrink: 0;
+}
+
+/* ══ Illustrated tool mask container ══
+   Clips the pencil/eraser body so only the tip peeks out at rest.
+   When active, overflow becomes visible so the full tool is revealed above the sheath. */
+.wdg-illustrated-mask {
+    width: 36px;
+    position: relative;
+    align-self: stretch;
+    flex-shrink: 0;
+    z-index: 0;
+    /* Allow tip to extend above, clip at sides and bottom */
+    clip-path: inset(-100px 0 0 0);
+}
+.wdg-illustrated-mask-active {
+    /* Active: allow tall extension above (−200px top), but still clip at bottom (0) */
+    clip-path: inset(-200px 0 0 0);
+    z-index: 3;
+}
+
+/* ══ Illustrated tool buttons (Pencil & Eraser) ══
+   SVGs are taller than the 80px mask. At rest they are pushed down so only
+   the tip peeks ~15px above the toolbar top edge. On active, translateY(0)
+   reveals the full extent above the mask. */
+.wdg-illustrated-bt {
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    width: 36px;
+    cursor: pointer;
+    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
+                filter 0.2s ease;
+    flex-shrink: 0;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    filter: none;
+}
+/* Pencil: SVG ~149px tall, mask 48px.
+   Rest: translateY(54px) → tip peeks ~15px above toolbar.
+   Active: translateY(18px) → shows most of pencil without going too high.
+   Active:hover: translateY(16px) → subtle 2px lift. */
+.wdg-illustrated-bt:has(.wdg-pencil-svg) {
+    transform: translateY(54px);
+}
+.wdg-illustrated-bt:has(.wdg-pencil-svg):hover {
+    transform: translateY(46px);
+}
+.wdg-illustrated-bt:has(.wdg-pencil-svg).wdg-illustrated-active {
+    transform: translateY(18px);
+    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.22));
+}
+.wdg-illustrated-bt:has(.wdg-pencil-svg).wdg-illustrated-active:hover {
+    transform: translateY(16px);
+}
+/* Eraser: SVG ~127px tall, mask 48px.
+   Rest: translateY(32px) → tip peeks ~15px above toolbar.
+   Active: translateY(10px) → shows most of eraser without going too high.
+   Active:hover: translateY(8px) → subtle 2px lift. */
+.wdg-illustrated-bt:has(.wdg-eraser-svg) {
+    transform: translateY(32px);
+}
+.wdg-illustrated-bt:has(.wdg-eraser-svg):hover {
+    transform: translateY(24px);
+}
+.wdg-illustrated-bt:has(.wdg-eraser-svg).wdg-illustrated-active {
+    transform: translateY(10px);
+    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.22));
+}
+.wdg-illustrated-bt:has(.wdg-eraser-svg).wdg-illustrated-active:hover {
+    transform: translateY(8px);
+}
+/* Click feedback (both tools) */
+.wdg-illustrated-bt:active {
+    transition-duration: 0.08s;
+}
+
+.wdg-pencil-svg {
+    width: 30px;
+    height: auto;
+}
+.wdg-eraser-svg {
+    width: 32px;
+    height: auto;
+}
+
+/* ── Shapes split button container (tldraw-style) ── */
+.shapes-split-ct {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 2px;
+    flex-shrink: 0;
+}
+
+/* Left: shape icon button — same size as other tool buttons */
+.shapes-main-bt {
+    /* Inherits .wdg-tool-bt 48×48 */
+}
+/* When active, give all shape SVGs a semi-transparent fill for visual weight */
+.shapes-main-bt.wdg-tool-active :global(svg rect),
+.shapes-main-bt.wdg-tool-active :global(svg circle),
+.shapes-main-bt.wdg-tool-active :global(svg ellipse),
+.shapes-main-bt.wdg-tool-active :global(svg polygon),
+.shapes-main-bt.wdg-tool-active :global(svg path) {
+    fill: rgba(255, 255, 255, 0.2);
+}
+
+/* Right: small caret button to open dropdown */
+.shapes-caret-bt {
+    width: 24px !important;
+    height: 48px !important;
+    border-radius: 8px !important;
+    padding: 0 !important;
+}
+.shapes-caret-bt :global(svg) {
+    width: 10px !important;
+    height: 10px !important;
+}
+
+/* ── Shortcuts footer hint text ── */
+.shortcuts-footer-hint {
+    font-size: 0.75rem;
+    opacity: 0.6;
+}
+
+/* ── Shapes dropdown menu — centered above trigger (tldraw-style) ── */
+.shapes-dropdown-menu-fixed {
+    background: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 12px;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
+    padding: 6px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+/* Inner scrollable wrapper — margin-right set dynamically when overflowing */
+.shapes-dropdown-scroll {
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0,0,0,0.15) transparent;
+}
+.shapes-dropdown-scroll::-webkit-scrollbar {
+    width: 4px;
+}
+.shapes-dropdown-scroll::-webkit-scrollbar-track {
+    background: transparent;
+}
+.shapes-dropdown-scroll::-webkit-scrollbar-thumb {
+    background: rgba(0,0,0,0.15);
+    border-radius: 4px;
+}
+.shapes-dropdown-scroll::-webkit-scrollbar-thumb:hover {
+    background: rgba(0,0,0,0.25);
+}
+.shapes-dropdown-menu-fixed .shape-option-bt {
+    width: 100%;
+    justify-content: flex-start;
+    padding: 8px 10px;
+    background: transparent;
+    border: none;
+    border-radius: 8px;
+    font-size: 0.875rem;
+    color: #374151;
+    box-shadow: none;
+    gap: 8px;
+    white-space: nowrap;
+}
+.shapes-dropdown-menu-fixed .shape-option-bt:hover {
+    background: #f3f4f6;
+    color: #111827;
+}
+.shapes-dropdown-menu-fixed .shape-option-bt.active {
+    background: #eff6ff;
+    color: #2563eb;
+    font-weight: 500;
+}
+.shapes-dropdown-menu-fixed .shape-option-bt.active:hover {
+    background: #dbeafe;
+    color: #1d4ed8;
+}
+/* Divider between shapes and image in the dropdown */
+.shapes-dropdown-divider {
+    height: 1px;
+    background: #e5e7eb;
+    margin: 4px 0;
+}
+
+/* Category label for library shape sections */
+.shapes-category-label {
+    padding: 4px 8px 2px;
+    font-size: 9px;
+    font-weight: 600;
+    text-transform: uppercase;
+    white-space: nowrap;
+    letter-spacing: 0.05em;
+    color: #9ca3af;
+}
+
+/* Grid layout for library shapes (icon-only buttons, 3 columns) */
+.shapes-library-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2px;
+    padding: 4px 2px;
+}
+
+.shape-library-bt {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    color: #374151;
+    cursor: pointer;
+    transition: background 0.1s;
+}
+/* Scale SVG icons inside library shape buttons */
+.shape-library-bt :global(svg) {
+    width: 20px;
+    height: 20px;
+}
+
+.shape-library-bt:hover {
+    background: #f3f4f6;
+    color: #111827;
+}
+
+/* ── Keyboard Shortcuts Panel ── */
+/* position:absolute so it centers within the canvas-container (position:relative),
+   not the viewport — avoids issues with transformed ancestors. */
+.shortcuts-backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(0,0,0,0.3);
+    z-index: 40;
+    animation: backdrop-fade 0.1s ease-out forwards;
+}
+@keyframes backdrop-fade {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+.shortcuts-panel {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: white;
+    border-radius: 0.75rem;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.1);
+    z-index: 50;
+    width: min(580px, 90%);
+    /* Panel has no own scroll — only the body section scrolls */
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    max-height: 85%;
+    /* Fade and slide in — starts invisible to prevent flash */
+    opacity: 0;
+    animation: panel-appear 0.15s ease-out 0.02s forwards;
+}
+@keyframes panel-appear {
+    from { opacity: 0; transform: translate(-50%, -48%); }
+    to   { opacity: 1; transform: translate(-50%, -50%); }
+}
+
+.shortcuts-panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 16px;
+    border-bottom: 1px solid #f3f4f6;
+    flex-shrink: 0;
+}
+.shortcuts-panel-title-ct {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.shortcuts-panel-title {
+    font-size: 0.9375rem;
+    font-weight: 600;
+    color: #111827;
+    margin: 0;
+}
+.close-shortcuts-bt {
+    color: #9ca3af;
+    width: 28px;
+    height: 28px;
+    border: none;
+    border-radius: 6px;
+    padding: 0;
+    background: transparent;
+    box-shadow: none;
+    font-size: 0.875rem;
+    justify-content: center;
+    flex-shrink: 0;
+}
+.close-shortcuts-bt:hover {
+    background: #f3f4f6;
+    color: #374151;
+}
+/* Scrollable section — only this part scrolls */
+.shortcuts-panel-body {
+    display: flex;
+    gap: 20px;
+    padding: 8px 16px;
+    overflow-y: auto;
+    flex: 1 1 auto;
+}
+.shortcuts-column {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+/* Custom scrollbar inside the panel body */
+.shortcuts-panel-body::-webkit-scrollbar {
+    width: 4px;
+}
+.shortcuts-panel-body::-webkit-scrollbar-track {
+    background: transparent;
+}
+.shortcuts-panel-body::-webkit-scrollbar-thumb {
+    background: rgba(0,0,0,0.15);
+    border-radius: 4px;
+}
+.shortcut-group {
+    margin-bottom: 2px;
+}
+/* Remove extra bottom margin on the last group so panel body padding handles spacing */
+.shortcut-group:last-child {
+    margin-bottom: 0;
+}
+.shortcut-group-title {
+    font-size: 0.6875rem;
+    font-weight: 700;
+    color: #1f2937;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    margin-bottom: 4px;
+}
+.shortcut-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+.shortcut-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 3px 0;
+}
+.shortcut-label {
+    font-size: 0.8125rem;
+    color: #4b5563;
+}
+.shortcut-keys {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    flex-shrink: 0;
+    margin-left: 8px;
+}
+.shortcut-sep {
+    font-size: 0.6875rem;
+    color: #9ca3af;
+    font-weight: 500;
+    padding: 0 1px;
+}
+/* Key badge — single-char keys get equal width for a square look */
+.shortcut-key {
+    background: #f3f4f6;
+    color: #374151;
+    font-size: 0.6875rem;
+    font-family: ui-monospace, 'SFMono-Regular', monospace;
+    padding: 3px 6px;
+    border-radius: 4px;
+    border: 1px solid #d1d5db;
+    box-shadow: 0 1px 1px rgba(0,0,0,0.08);
+    white-space: nowrap;
+    min-width: 22px;
+    height: 22px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+.shortcuts-panel-footer {
+    padding: 10px 16px 14px;
+    text-align: center;
+    font-size: 0.75rem;
+    color: #9ca3af;
+    border-top: 1px solid #f3f4f6;
+    flex-shrink: 0;
+}
+
+/* Custom scrollbar for tools and actions containers */
+.tools-ct::-webkit-scrollbar,
+.actions-ct::-webkit-scrollbar {
+    height: 4px;
+}
+.tools-ct::-webkit-scrollbar-track,
+.actions-ct::-webkit-scrollbar-track {
+    background: transparent;
+}
+.tools-ct::-webkit-scrollbar-thumb,
+.actions-ct::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+}
+.tools-ct::-webkit-scrollbar-thumb:hover,
+.actions-ct::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.25);
+}
+/* Firefox scrollbar */
+.tools-ct,
+.actions-ct {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
+}
+</style>