@syntrologie/adapt-content 2.4.0 → 2.5.1

package/node_modules/@syntrologie/shared-editor-ui/dist/__tests__/EditorPanelShell.test.js

@@ -1,8 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { render } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
+import { act, fireEvent, render } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { EditorPanelShell } from '../components/EditorPanelShell';
-// Mock ResizeObserver and pointer capture for jsdom
+// jsdom does not support PointerEvent; polyfill it so fireEvent creates events
+// with clientX/clientY/pointerId correctly.
+if (typeof globalThis.PointerEvent === 'undefined') {
+    class PointerEventPolyfill extends MouseEvent {
+        constructor(type, init = {}) {
+            super(type, init);
+            this.pointerId = init.pointerId ?? 0;
+            this.pointerType = init.pointerType ?? '';
+        }
+    }
+    vi.stubGlobal('PointerEvent', PointerEventPolyfill);
+}
 vi.stubGlobal('ResizeObserver', class {
     observe() { }
     unobserve() { }
@@ -10,16 +21,476 @@ vi.stubGlobal('ResizeObserver', class {
 });
 Element.prototype.setPointerCapture = vi.fn();
 Element.prototype.releasePointerCapture = vi.fn();
+// Node 25+ exposes a native `localStorage` that shadows jsdom's when
+// `--localstorage-file` is absent. Stub with a proper in-memory Storage.
+const storageMap = new Map();
+vi.stubGlobal('localStorage', {
+    getItem: (key) => storageMap.get(key) ?? null,
+    setItem: (key, value) => storageMap.set(key, value),
+    removeItem: (key) => storageMap.delete(key),
+    clear: () => storageMap.clear(),
+    get length() {
+        return storageMap.size;
+    },
+    key: (index) => [...storageMap.keys()][index] ?? null,
+});
 describe('EditorPanelShell', () => {
-    it('applies antialiased font smoothing to the panel', () => {
-        const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, position: "right", children: _jsx("div", { children: "Content" }) }));
+    beforeEach(() => {
+        localStorage.clear();
+        // Set default viewport dimensions
+        Object.defineProperty(window, 'innerWidth', { value: 1280, writable: true });
+        Object.defineProperty(window, 'innerHeight', { value: 800, writable: true });
+    });
+    it('renders panel docked left by default', () => {
+        const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
         const panel = container.querySelector('[data-syntro-editor-panel]');
         expect(panel).toBeTruthy();
-        expect(panel.className).toContain('se-antialiased');
+        expect(panel.style.left).toBe('0px');
+        expect(panel.style.top).toBe('0px');
+    });
+    it('renders panel with minimum width of 480px', () => {
+        const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+        const panel = container.querySelector('[data-syntro-editor-panel]');
+        expect(panel.style.width).toBe('480px');
+    });
+    it('renders FAB when panel is open', () => {
+        const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+        const fab = container.querySelector('[data-syntro-fab]');
+        expect(fab).toBeTruthy();
     });
-    it('does not render panel when closed', () => {
+    it('renders FAB when panel is closed (minimized)', () => {
         const { container } = render(_jsx(EditorPanelShell, { isOpen: false, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+        const fab = container.querySelector('[data-syntro-fab]');
+        expect(fab).toBeTruthy();
         const panel = container.querySelector('[data-syntro-editor-panel]');
         expect(panel).toBeNull();
     });
+    it('renders 8 resize handles when panel is open', () => {
+        const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+        const handles = container.querySelectorAll('[data-syntro-editor-ui^="resize-"]');
+        expect(handles.length).toBe(8);
+    });
+    it('does not render resize handles when closed', () => {
+        const { container } = render(_jsx(EditorPanelShell, { isOpen: false, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+        const handles = container.querySelectorAll('[data-syntro-editor-ui^="resize-"]');
+        expect(handles.length).toBe(0);
+    });
+    it('saves geometry to localStorage on mount', () => {
+        render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+        const stored = localStorage.getItem('syntro:editor-panel');
+        expect(stored).toBeTruthy();
+        const geo = JSON.parse(stored);
+        expect(geo.width).toBe(480);
+        expect(geo.docked).toBe('left');
+    });
+    it('loads geometry from localStorage', () => {
+        localStorage.setItem('syntro:editor-panel', JSON.stringify({ x: 100, y: 50, width: 600, height: 500, docked: null }));
+        const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+        const panel = container.querySelector('[data-syntro-editor-panel]');
+        expect(panel.style.left).toBe('100px');
+        expect(panel.style.top).toBe('50px');
+        expect(panel.style.width).toBe('600px');
+    });
+    it('applies antialiased font smoothing', () => {
+        const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+        const panel = container.querySelector('[data-syntro-editor-panel]');
+        expect(panel.className).toContain('se-antialiased');
+    });
+    it('applies rounded corners when undocked', () => {
+        localStorage.setItem('syntro:editor-panel', JSON.stringify({ x: 100, y: 50, width: 600, height: 500, docked: null }));
+        const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+        const panel = container.querySelector('[data-syntro-editor-panel]');
+        expect(panel.className).toContain('se-rounded-lg');
+    });
+    it('applies edge border when docked left', () => {
+        const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+        const panel = container.querySelector('[data-syntro-editor-panel]');
+        expect(panel.className).toContain('se-border-r');
+    });
+    it('uses namespaced localStorage key when panelId is provided', () => {
+        render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, panelId: "my-panel", children: _jsx("div", { children: "Content" }) }));
+        const stored = localStorage.getItem('syntro:editor-panel:my-panel');
+        expect(stored).toBeTruthy();
+        const geo = JSON.parse(stored);
+        expect(geo.width).toBe(480);
+        expect(geo.docked).toBe('left');
+    });
+    it('loads geometry from namespaced localStorage key when panelId is provided', () => {
+        localStorage.setItem('syntro:editor-panel:my-panel', JSON.stringify({ x: 200, y: 75, width: 700, height: 550, docked: null }));
+        const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, panelId: "my-panel", children: _jsx("div", { children: "Content" }) }));
+        const panel = container.querySelector('[data-syntro-editor-panel]');
+        expect(panel.style.left).toBe('200px');
+        expect(panel.style.top).toBe('75px');
+        expect(panel.style.width).toBe('700px');
+    });
+    it('does not use default key when panelId is provided', () => {
+        render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, panelId: "my-panel", children: _jsx("div", { children: "Content" }) }));
+        const defaultStored = localStorage.getItem('syntro:editor-panel');
+        expect(defaultStored).toBeNull();
+    });
+    it('FAB zIndex matches panel zIndex prop', () => {
+        const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, zIndex: 10000, children: _jsx("div", { children: "Content" }) }));
+        const fab = container.querySelector('[data-syntro-fab]');
+        const panel = container.querySelector('[data-syntro-editor-panel]');
+        expect(fab.style.zIndex).toBe('10000');
+        expect(panel.style.zIndex).toBe('10000');
+    });
+    it('resize handles have data-resize-dir attributes', () => {
+        const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+        const handles = container.querySelectorAll('[data-resize-dir]');
+        expect(handles.length).toBe(8);
+        const dirs = Array.from(handles).map((h) => h.dataset.resizeDir);
+        expect(dirs).toContain('n');
+        expect(dirs).toContain('se');
+        expect(dirs).toContain('nw');
+    });
+    it('renders docked right with left border and correct position', () => {
+        localStorage.setItem('syntro:editor-panel', JSON.stringify({ x: 0, y: 0, width: 500, height: 800, docked: 'right' }));
+        const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+        const panel = container.querySelector('[data-syntro-editor-panel]');
+        expect(panel.className).toContain('se-border-l');
+        expect(panel.style.right).toBe('0px');
+    });
+    it('gracefully handles corrupt localStorage data', () => {
+        localStorage.setItem('syntro:editor-panel', 'not-valid-json');
+        const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+        const panel = container.querySelector('[data-syntro-editor-panel]');
+        // Falls back to default geometry
+        expect(panel).toBeTruthy();
+        expect(panel.style.width).toBe('480px');
+    });
+    it('enforces minimum width when localStorage has smaller value', () => {
+        localStorage.setItem('syntro:editor-panel', JSON.stringify({ x: 0, y: 0, width: 100, height: 200, docked: null }));
+        const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+        const panel = container.querySelector('[data-syntro-editor-panel]');
+        // Width should be clamped to MIN_WIDTH (480)
+        expect(panel.style.width).toBe('480px');
+    });
+    it('enforces minimum height when localStorage has smaller value', () => {
+        localStorage.setItem('syntro:editor-panel', JSON.stringify({ x: 0, y: 0, width: 600, height: 100, docked: null }));
+        const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+        const panel = container.querySelector('[data-syntro-editor-panel]');
+        // Height should be clamped to MIN_HEIGHT (400)
+        expect(panel.style.height).toBe('400px');
+    });
+    it('handles localStorage data with missing fields by using defaults', () => {
+        localStorage.setItem('syntro:editor-panel', JSON.stringify({ docked: null }));
+        const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+        const panel = container.querySelector('[data-syntro-editor-panel]');
+        expect(panel).toBeTruthy();
+        // x/y should default to 0, width to MIN_WIDTH, height to max(MIN_HEIGHT, innerHeight)
+        expect(panel.style.left).toBe('0px');
+        expect(panel.style.top).toBe('0px');
+        expect(panel.style.width).toBe('480px');
+    });
+    describe('FAB drag handlers', () => {
+        it('calls onToggle on FAB click (pointerDown + pointerUp without move)', () => {
+            const onToggle = vi.fn();
+            const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: onToggle, children: _jsx("div", { children: "Content" }) }));
+            const fab = container.querySelector('[data-syntro-fab]');
+            fireEvent.pointerDown(fab, { clientX: 100, clientY: 100, pointerId: 1 });
+            fireEvent.pointerUp(fab, { clientX: 100, clientY: 100, pointerId: 1 });
+            expect(onToggle).toHaveBeenCalledTimes(1);
+        });
+        it('does not call onToggle when FAB is dragged beyond threshold', () => {
+            const onToggle = vi.fn();
+            const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: onToggle, children: _jsx("div", { children: "Content" }) }));
+            const fab = container.querySelector('[data-syntro-fab]');
+            fireEvent.pointerDown(fab, { clientX: 100, clientY: 100, pointerId: 1 });
+            // Move beyond DRAG_THRESHOLD (5px)
+            fireEvent.pointerMove(fab, { clientX: 200, clientY: 200, pointerId: 1 });
+            fireEvent.pointerUp(fab, { clientX: 200, clientY: 200, pointerId: 1 });
+            expect(onToggle).not.toHaveBeenCalled();
+        });
+        it('does not count as drag when movement is below threshold', () => {
+            const onToggle = vi.fn();
+            const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: onToggle, children: _jsx("div", { children: "Content" }) }));
+            const fab = container.querySelector('[data-syntro-fab]');
+            fireEvent.pointerDown(fab, { clientX: 100, clientY: 100, pointerId: 1 });
+            // Move less than DRAG_THRESHOLD (5px)
+            fireEvent.pointerMove(fab, { clientX: 102, clientY: 102, pointerId: 1 });
+            fireEvent.pointerUp(fab, { clientX: 102, clientY: 102, pointerId: 1 });
+            // Still treated as click
+            expect(onToggle).toHaveBeenCalledTimes(1);
+        });
+        it('ignores pointerMove when not dragging', () => {
+            const onToggle = vi.fn();
+            const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: onToggle, children: _jsx("div", { children: "Content" }) }));
+            const fab = container.querySelector('[data-syntro-fab]');
+            // Move without pointerDown should be ignored
+            fireEvent.pointerMove(fab, { clientX: 200, clientY: 200, pointerId: 1 });
+            // Panel should not have moved
+            const panel = container.querySelector('[data-syntro-editor-panel]');
+            expect(panel.style.left).toBe('0px');
+        });
+        it('moves panel DOM directly during drag for performance', () => {
+            const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+            const fab = container.querySelector('[data-syntro-fab]');
+            const panel = container.querySelector('[data-syntro-editor-panel]');
+            fireEvent.pointerDown(fab, { clientX: 12, clientY: 12, pointerId: 1 });
+            // Move beyond threshold
+            fireEvent.pointerMove(fab, { clientX: 112, clientY: 112, pointerId: 1 });
+            // Panel DOM should be updated directly
+            expect(panel.style.left).toBe('100px');
+            expect(panel.style.top).toBe('100px');
+            expect(panel.style.right).toBe('auto');
+        });
+        it('updates FAB position during drag', () => {
+            const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+            const fab = container.querySelector('[data-syntro-fab]');
+            fireEvent.pointerDown(fab, { clientX: 12, clientY: 12, pointerId: 1 });
+            fireEvent.pointerMove(fab, { clientX: 112, clientY: 112, pointerId: 1 });
+            // FAB should be positioned with FAB_INSET (12px) offset from panel top-left
+            expect(fab.style.left).toBe('112px'); // 100 + 12
+            expect(fab.style.top).toBe('112px'); // 100 + 12
+        });
+        it('snaps to left edge when dragged close to left boundary', () => {
+            localStorage.setItem('syntro:editor-panel', JSON.stringify({ x: 200, y: 100, width: 500, height: 600, docked: null }));
+            const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+            const fab = container.querySelector('[data-syntro-fab]');
+            // Start drag from the panel's position
+            fireEvent.pointerDown(fab, { clientX: 212, clientY: 112, pointerId: 1 });
+            // Move to near left edge (x < SNAP_THRESHOLD=20)
+            fireEvent.pointerMove(fab, { clientX: 22, clientY: 112, pointerId: 1 });
+            fireEvent.pointerUp(fab, { clientX: 22, clientY: 112, pointerId: 1 });
+            // After snap, should be docked left
+            const stored = JSON.parse(localStorage.getItem('syntro:editor-panel'));
+            expect(stored.docked).toBe('left');
+        });
+        it('snaps to right edge when dragged close to right boundary', () => {
+            localStorage.setItem('syntro:editor-panel', JSON.stringify({ x: 200, y: 100, width: 500, height: 600, docked: null }));
+            const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+            const fab = container.querySelector('[data-syntro-fab]');
+            // Start drag
+            fireEvent.pointerDown(fab, { clientX: 212, clientY: 112, pointerId: 1 });
+            // Move to near right edge (x + width >= innerWidth - SNAP_THRESHOLD)
+            // Panel width is 500, innerWidth is 1280: need x >= 1280 - 20 - 500 = 760
+            fireEvent.pointerMove(fab, { clientX: 982, clientY: 112, pointerId: 1 });
+            fireEvent.pointerUp(fab, { clientX: 982, clientY: 112, pointerId: 1 });
+            const stored = JSON.parse(localStorage.getItem('syntro:editor-panel'));
+            expect(stored.docked).toBe('right');
+        });
+        it('sets undocked geometry when dragged to middle of screen', () => {
+            const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+            const fab = container.querySelector('[data-syntro-fab]');
+            fireEvent.pointerDown(fab, { clientX: 12, clientY: 12, pointerId: 1 });
+            // Move to center area (not near edges)
+            fireEvent.pointerMove(fab, { clientX: 312, clientY: 112, pointerId: 1 });
+            fireEvent.pointerUp(fab, { clientX: 312, clientY: 112, pointerId: 1 });
+            const stored = JSON.parse(localStorage.getItem('syntro:editor-panel'));
+            expect(stored.docked).toBeNull();
+            expect(stored.x).toBe(300);
+            expect(stored.y).toBe(100);
+        });
+    });
+    describe('resize handlers', () => {
+        it('resizes panel east (wider)', () => {
+            localStorage.setItem('syntro:editor-panel', JSON.stringify({ x: 100, y: 50, width: 500, height: 600, docked: null }));
+            const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+            const handle = container.querySelector('[data-resize-dir="e"]');
+            const panel = container.querySelector('[data-syntro-editor-panel]');
+            fireEvent.pointerDown(handle, { clientX: 600, clientY: 300, pointerId: 1 });
+            fireEvent.pointerMove(handle, { clientX: 700, clientY: 300, pointerId: 1 });
+            // Width should increase by 100
+            expect(panel.style.width).toBe('600px');
+            fireEvent.pointerUp(handle, { clientX: 700, clientY: 300, pointerId: 1 });
+            const stored = JSON.parse(localStorage.getItem('syntro:editor-panel'));
+            expect(stored.width).toBe(600);
+        });
+        it('resizes panel south (taller)', () => {
+            localStorage.setItem('syntro:editor-panel', JSON.stringify({ x: 100, y: 50, width: 500, height: 600, docked: null }));
+            const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+            const handle = container.querySelector('[data-resize-dir="s"]');
+            const panel = container.querySelector('[data-syntro-editor-panel]');
+            fireEvent.pointerDown(handle, { clientX: 300, clientY: 650, pointerId: 1 });
+            fireEvent.pointerMove(handle, { clientX: 300, clientY: 750, pointerId: 1 });
+            expect(panel.style.height).toBe('700px');
+            fireEvent.pointerUp(handle, { clientX: 300, clientY: 750, pointerId: 1 });
+        });
+        it('resizes panel west (moves left edge)', () => {
+            localStorage.setItem('syntro:editor-panel', JSON.stringify({ x: 200, y: 50, width: 500, height: 600, docked: null }));
+            const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+            const handle = container.querySelector('[data-resize-dir="w"]');
+            const panel = container.querySelector('[data-syntro-editor-panel]');
+            fireEvent.pointerDown(handle, { clientX: 200, clientY: 300, pointerId: 1 });
+            fireEvent.pointerMove(handle, { clientX: 100, clientY: 300, pointerId: 1 });
+            // Width increases by 100, x decreases by 100
+            expect(panel.style.width).toBe('600px');
+            expect(panel.style.left).toBe('100px');
+            fireEvent.pointerUp(handle, { clientX: 100, clientY: 300, pointerId: 1 });
+        });
+        it('resizes panel north (moves top edge)', () => {
+            localStorage.setItem('syntro:editor-panel', JSON.stringify({ x: 100, y: 200, width: 500, height: 600, docked: null }));
+            const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+            const handle = container.querySelector('[data-resize-dir="n"]');
+            const panel = container.querySelector('[data-syntro-editor-panel]');
+            fireEvent.pointerDown(handle, { clientX: 300, clientY: 200, pointerId: 1 });
+            fireEvent.pointerMove(handle, { clientX: 300, clientY: 100, pointerId: 1 });
+            expect(panel.style.height).toBe('700px');
+            expect(panel.style.top).toBe('100px');
+            fireEvent.pointerUp(handle, { clientX: 300, clientY: 100, pointerId: 1 });
+        });
+        it('resizes panel southeast (corner)', () => {
+            localStorage.setItem('syntro:editor-panel', JSON.stringify({ x: 100, y: 50, width: 500, height: 600, docked: null }));
+            const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+            const handle = container.querySelector('[data-resize-dir="se"]');
+            const panel = container.querySelector('[data-syntro-editor-panel]');
+            fireEvent.pointerDown(handle, { clientX: 600, clientY: 650, pointerId: 1 });
+            fireEvent.pointerMove(handle, { clientX: 700, clientY: 750, pointerId: 1 });
+            expect(panel.style.width).toBe('600px');
+            expect(panel.style.height).toBe('700px');
+            fireEvent.pointerUp(handle, { clientX: 700, clientY: 750, pointerId: 1 });
+        });
+        it('resizes panel northwest (corner, moves both edges)', () => {
+            localStorage.setItem('syntro:editor-panel', JSON.stringify({ x: 200, y: 200, width: 500, height: 600, docked: null }));
+            const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+            const handle = container.querySelector('[data-resize-dir="nw"]');
+            const panel = container.querySelector('[data-syntro-editor-panel]');
+            fireEvent.pointerDown(handle, { clientX: 200, clientY: 200, pointerId: 1 });
+            fireEvent.pointerMove(handle, { clientX: 100, clientY: 100, pointerId: 1 });
+            expect(panel.style.width).toBe('600px');
+            expect(panel.style.height).toBe('700px');
+            expect(panel.style.left).toBe('100px');
+            expect(panel.style.top).toBe('100px');
+            fireEvent.pointerUp(handle, { clientX: 100, clientY: 100, pointerId: 1 });
+        });
+        it('enforces minimum width during resize', () => {
+            localStorage.setItem('syntro:editor-panel', JSON.stringify({ x: 100, y: 50, width: 500, height: 600, docked: null }));
+            const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+            const handle = container.querySelector('[data-resize-dir="e"]');
+            const panel = container.querySelector('[data-syntro-editor-panel]');
+            fireEvent.pointerDown(handle, { clientX: 600, clientY: 300, pointerId: 1 });
+            // Try to shrink below MIN_WIDTH (480)
+            fireEvent.pointerMove(handle, { clientX: 200, clientY: 300, pointerId: 1 });
+            expect(panel.style.width).toBe('480px');
+            fireEvent.pointerUp(handle, { clientX: 200, clientY: 300, pointerId: 1 });
+        });
+        it('enforces minimum height during resize', () => {
+            localStorage.setItem('syntro:editor-panel', JSON.stringify({ x: 100, y: 50, width: 500, height: 600, docked: null }));
+            const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+            const handle = container.querySelector('[data-resize-dir="s"]');
+            const panel = container.querySelector('[data-syntro-editor-panel]');
+            fireEvent.pointerDown(handle, { clientX: 300, clientY: 650, pointerId: 1 });
+            // Try to shrink below MIN_HEIGHT (400)
+            fireEvent.pointerMove(handle, { clientX: 300, clientY: 100, pointerId: 1 });
+            expect(panel.style.height).toBe('400px');
+            fireEvent.pointerUp(handle, { clientX: 300, clientY: 100, pointerId: 1 });
+        });
+        it('undocks panel when resize is started on a docked panel', () => {
+            // Start with docked left
+            const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+            const handle = container.querySelector('[data-resize-dir="e"]');
+            fireEvent.pointerDown(handle, { clientX: 480, clientY: 300, pointerId: 1 });
+            // After starting resize on docked panel, it should undock
+            const stored = JSON.parse(localStorage.getItem('syntro:editor-panel'));
+            expect(stored.docked).toBeNull();
+        });
+        it('ignores pointerMove when no resize is active', () => {
+            localStorage.setItem('syntro:editor-panel', JSON.stringify({ x: 100, y: 50, width: 500, height: 600, docked: null }));
+            const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+            const handle = container.querySelector('[data-resize-dir="e"]');
+            const panel = container.querySelector('[data-syntro-editor-panel]');
+            // Move without pointerDown
+            fireEvent.pointerMove(handle, { clientX: 700, clientY: 300, pointerId: 1 });
+            // Width should not change
+            expect(panel.style.width).toBe('500px');
+        });
+        it('updates FAB position during resize', () => {
+            localStorage.setItem('syntro:editor-panel', JSON.stringify({ x: 100, y: 50, width: 500, height: 600, docked: null }));
+            const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+            const handle = container.querySelector('[data-resize-dir="s"]');
+            const fab = container.querySelector('[data-syntro-fab]');
+            fireEvent.pointerDown(handle, { clientX: 300, clientY: 650, pointerId: 1 });
+            fireEvent.pointerMove(handle, { clientX: 300, clientY: 750, pointerId: 1 });
+            // FAB top should stay at top-left of panel during resize
+            // FAB top = y + FAB_INSET = 50 + 12 = 62
+            expect(fab.style.top).toBe('62px');
+            // FAB left = x + FAB_INSET = 100 + 12 = 112
+            expect(fab.style.left).toBe('112px');
+            fireEvent.pointerUp(handle, { clientX: 300, clientY: 750, pointerId: 1 });
+        });
+        it('does not commit geometry on pointerUp when no pending geo exists', () => {
+            localStorage.setItem('syntro:editor-panel', JSON.stringify({ x: 100, y: 50, width: 500, height: 600, docked: null }));
+            const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+            const handle = container.querySelector('[data-resize-dir="e"]');
+            // pointerDown then immediate pointerUp without pointerMove
+            fireEvent.pointerDown(handle, { clientX: 600, clientY: 300, pointerId: 1 });
+            fireEvent.pointerUp(handle, { clientX: 600, clientY: 300, pointerId: 1 });
+            const stored = JSON.parse(localStorage.getItem('syntro:editor-panel'));
+            // Should remain undocked with original dimensions (but undocked since it was docked)
+            expect(stored.docked).toBeNull();
+        });
+        it('resizes northeast corner correctly', () => {
+            localStorage.setItem('syntro:editor-panel', JSON.stringify({ x: 100, y: 200, width: 500, height: 600, docked: null }));
+            const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+            const handle = container.querySelector('[data-resize-dir="ne"]');
+            const panel = container.querySelector('[data-syntro-editor-panel]');
+            fireEvent.pointerDown(handle, { clientX: 600, clientY: 200, pointerId: 1 });
+            fireEvent.pointerMove(handle, { clientX: 700, clientY: 100, pointerId: 1 });
+            // East: width increases by 100
+            expect(panel.style.width).toBe('600px');
+            // North: height increases by 100, top decreases by 100
+            expect(panel.style.height).toBe('700px');
+            expect(panel.style.top).toBe('100px');
+            fireEvent.pointerUp(handle, { clientX: 700, clientY: 100, pointerId: 1 });
+        });
+        it('resizes southwest corner correctly', () => {
+            localStorage.setItem('syntro:editor-panel', JSON.stringify({ x: 200, y: 50, width: 500, height: 600, docked: null }));
+            const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+            const handle = container.querySelector('[data-resize-dir="sw"]');
+            const panel = container.querySelector('[data-syntro-editor-panel]');
+            fireEvent.pointerDown(handle, { clientX: 200, clientY: 650, pointerId: 1 });
+            fireEvent.pointerMove(handle, { clientX: 100, clientY: 750, pointerId: 1 });
+            // West: width increases by 100, left decreases by 100
+            expect(panel.style.width).toBe('600px');
+            expect(panel.style.left).toBe('100px');
+            // South: height increases by 100
+            expect(panel.style.height).toBe('700px');
+            fireEvent.pointerUp(handle, { clientX: 100, clientY: 750, pointerId: 1 });
+        });
+    });
+    describe('viewport clamping', () => {
+        it('clamps panel position on window resize', () => {
+            localStorage.setItem('syntro:editor-panel', JSON.stringify({ x: 1200, y: 700, width: 500, height: 600, docked: null }));
+            render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+            // Shrink viewport
+            Object.defineProperty(window, 'innerWidth', { value: 800, writable: true });
+            Object.defineProperty(window, 'innerHeight', { value: 600, writable: true });
+            act(() => {
+                window.dispatchEvent(new Event('resize'));
+            });
+            const stored = JSON.parse(localStorage.getItem('syntro:editor-panel'));
+            // x should be clamped so FAB stays visible
+            expect(stored.x).toBeLessThanOrEqual(800 - 56); // vw - FAB_SIZE
+        });
+        it('does not clamp docked panels on window resize', () => {
+            // Docked panels ignore clampToViewport
+            render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+            act(() => {
+                window.dispatchEvent(new Event('resize'));
+            });
+            const stored = JSON.parse(localStorage.getItem('syntro:editor-panel'));
+            expect(stored.docked).toBe('left');
+        });
+    });
+    it('sets id attribute on panel when panelId is provided', () => {
+        const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, panelId: "test-panel", children: _jsx("div", { children: "Content" }) }));
+        const panel = container.querySelector('#test-panel');
+        expect(panel).toBeTruthy();
+    });
+    it('does not set id attribute on panel when panelId is not provided', () => {
+        const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+        const panel = container.querySelector('[data-syntro-editor-panel]');
+        expect(panel.id).toBe('');
+    });
+    it('FAB title is "Minimize panel" when open', () => {
+        const { container } = render(_jsx(EditorPanelShell, { isOpen: true, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+        const fab = container.querySelector('[data-syntro-fab]');
+        expect(fab.title).toBe('Minimize panel');
+    });
+    it('FAB title is "Open panel" when closed', () => {
+        const { container } = render(_jsx(EditorPanelShell, { isOpen: false, onToggle: () => { }, children: _jsx("div", { children: "Content" }) }));
+        const fab = container.querySelector('[data-syntro-fab]');
+        expect(fab.title).toBe('Open panel');
+    });
 });

package/node_modules/@syntrologie/shared-editor-ui/dist/__tests__/ElementHighlight.test.js

@@ -119,4 +119,58 @@ describe('ElementHighlight', () => {
         const removeBtn = document.body.querySelector('[data-syntro-highlight-remove]');
         expect(removeBtn).toBeNull();
     });
+    it('calls onClick when Enter key is pressed', () => {
+        const onClick = vi.fn();
+        render(_jsx(ElementHighlight, { element: mockElement, color: "#3b82f6", onClick: onClick }));
+        const overlay = document.body.querySelector('[data-syntro-highlight]');
+        fireEvent.keyDown(overlay, { key: 'Enter' });
+        expect(onClick).toHaveBeenCalledTimes(1);
+    });
+    it('calls onClick when Space key is pressed', () => {
+        const onClick = vi.fn();
+        render(_jsx(ElementHighlight, { element: mockElement, color: "#3b82f6", onClick: onClick }));
+        const overlay = document.body.querySelector('[data-syntro-highlight]');
+        fireEvent.keyDown(overlay, { key: ' ' });
+        expect(onClick).toHaveBeenCalledTimes(1);
+    });
+    it('does not fire onClick on other key presses', () => {
+        const onClick = vi.fn();
+        render(_jsx(ElementHighlight, { element: mockElement, color: "#3b82f6", onClick: onClick }));
+        const overlay = document.body.querySelector('[data-syntro-highlight]');
+        fireEvent.keyDown(overlay, { key: 'Tab' });
+        expect(onClick).not.toHaveBeenCalled();
+    });
+    it('does not attach onKeyDown when onClick is not provided', () => {
+        render(_jsx(ElementHighlight, { element: mockElement, color: "#3b82f6" }));
+        const overlay = document.body.querySelector('[data-syntro-highlight]');
+        // Should not throw and should have no role/tabIndex
+        expect(overlay.getAttribute('role')).toBeNull();
+        expect(overlay.getAttribute('tabindex')).toBeNull();
+    });
+    it('has role="button" and tabIndex when onClick is provided', () => {
+        render(_jsx(ElementHighlight, { element: mockElement, color: "#3b82f6", onClick: () => { } }));
+        const overlay = document.body.querySelector('[data-syntro-highlight]');
+        expect(overlay.getAttribute('role')).toBe('button');
+        expect(overlay.getAttribute('tabindex')).toBe('0');
+    });
+    it('sets pointer cursor when onClick is provided', () => {
+        render(_jsx(ElementHighlight, { element: mockElement, color: "#3b82f6", onClick: () => { } }));
+        const overlay = document.body.querySelector('[data-syntro-highlight]');
+        expect(overlay.style.cursor).toBe('pointer');
+    });
+    it('sets default cursor when onClick is not provided', () => {
+        render(_jsx(ElementHighlight, { element: mockElement, color: "#3b82f6" }));
+        const overlay = document.body.querySelector('[data-syntro-highlight]');
+        expect(overlay.style.cursor).toBe('default');
+    });
+    it('sets pointerEvents to auto when onClick is provided', () => {
+        render(_jsx(ElementHighlight, { element: mockElement, color: "#3b82f6", onClick: () => { } }));
+        const overlay = document.body.querySelector('[data-syntro-highlight]');
+        expect(overlay.style.pointerEvents).toBe('auto');
+    });
+    it('sets pointerEvents to none when no onClick or onRemove', () => {
+        render(_jsx(ElementHighlight, { element: mockElement, color: "#3b82f6" }));
+        const overlay = document.body.querySelector('[data-syntro-highlight]');
+        expect(overlay.style.pointerEvents).toBe('none');
+    });
 });

package/node_modules/@syntrologie/shared-editor-ui/dist/__tests__/selectorGenerator.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=selectorGenerator.test.d.ts.map

package/node_modules/@syntrologie/shared-editor-ui/dist/__tests__/selectorGenerator.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectorGenerator.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/selectorGenerator.test.ts"],"names":[],"mappings":""}