@spectral_labs/ui 1.7.0 → 1.8.0-next.0

package/dist/internal/drag-drop/__tests__/drag-source.test.svelte.js

@@ -1,130 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { dragSession } from '../drag-session.svelte.js';
-import { DragSourceState } from '../drag-source.svelte.js';
-function createSourceConfig(id, overrides = {}) {
-    return {
-        id,
-        getItems: () => [{ 'test-type': id, 'text/plain': `Item ${id}` }],
-        onDragStart: vi.fn(),
-        onDragEnd: vi.fn(),
-        ...overrides,
-    };
-}
-function createElement(parent = document.body) {
-    const el = document.createElement('div');
-    Object.defineProperty(el, 'getBoundingClientRect', {
-        value: () => ({
-            top: 0,
-            left: 0,
-            bottom: 100,
-            right: 200,
-            width: 200,
-            height: 100,
-            x: 0,
-            y: 0,
-            toJSON() { },
-        }),
-    });
-    el.setPointerCapture = vi.fn();
-    el.releasePointerCapture = vi.fn();
-    parent.appendChild(el);
-    return el;
-}
-/** Polyfill PointerEvent for jsdom. */
-function ensurePointerEventPolyfill() {
-    if (typeof globalThis.PointerEvent === 'undefined') {
-        ;
-        globalThis.PointerEvent = class PointerEvent extends MouseEvent {
-            pointerId;
-            pointerType;
-            constructor(type, init = {}) {
-                super(type, init);
-                this.pointerId = init.pointerId ?? 0;
-                this.pointerType = init.pointerType ?? '';
-            }
-        };
-    }
-}
-function createMousePointerEvent(type, x, y) {
-    return new PointerEvent(type, {
-        clientX: x,
-        clientY: y,
-        pointerId: 1,
-        pointerType: 'mouse',
-        bubbles: true,
-    });
-}
-describe('dragSourceState', () => {
-    beforeEach(() => {
-        dragSession._resetForTests();
-        ensurePointerEventPolyfill();
-    });
-    describe('nested sources (#190)', () => {
-        it('the innermost source claims the pointerdown — the ancestor never sees it', () => {
-            const outerEl = createElement();
-            const innerEl = createElement(outerEl);
-            const outerConfig = createSourceConfig('outer');
-            const innerConfig = createSourceConfig('inner');
-            const outer = new DragSourceState(outerConfig);
-            const inner = new DragSourceState(innerConfig);
-            outer.attach(outerEl);
-            inner.attach(innerEl);
-            // pointerdown on the inner element bubbles through the outer element
-            innerEl.dispatchEvent(createMousePointerEvent('pointerdown', 100, 100));
-            expect(dragSession.sourceId).toBe('inner');
-            // Crossing the threshold starts the drag for the inner source only
-            innerEl.dispatchEvent(createMousePointerEvent('pointermove', 110, 110));
-            expect(dragSession.isDragging).toBe(true);
-            expect(dragSession.sourceId).toBe('inner');
-            expect(inner.isDragging).toBe(true);
-            expect(outer.isDragging).toBe(false);
-            expect(innerConfig.onDragStart).toHaveBeenCalled();
-            expect(outerConfig.onDragStart).not.toHaveBeenCalled();
-            // The session ends cleanly on pointerup — no stuck ghost
-            innerEl.dispatchEvent(createMousePointerEvent('pointerup', 110, 110));
-            expect(dragSession.isDragging).toBe(false);
-            expect(dragSession.sourceId).toBeNull();
-            expect(document.querySelector('.sp-drag-ghost')).toBeNull();
-            inner.detach();
-            outer.detach();
-            outerEl.remove();
-        });
-        it('dragging the outer source directly still works', () => {
-            const outerEl = createElement();
-            const innerEl = createElement(outerEl);
-            const outerConfig = createSourceConfig('outer-direct');
-            const innerConfig = createSourceConfig('inner-direct');
-            const outer = new DragSourceState(outerConfig);
-            const inner = new DragSourceState(innerConfig);
-            outer.attach(outerEl);
-            inner.attach(innerEl);
-            // pointerdown on the outer element itself (not inside the inner source)
-            outerEl.dispatchEvent(createMousePointerEvent('pointerdown', 100, 100));
-            expect(dragSession.sourceId).toBe('outer-direct');
-            outerEl.dispatchEvent(createMousePointerEvent('pointermove', 110, 110));
-            expect(dragSession.isDragging).toBe(true);
-            expect(outer.isDragging).toBe(true);
-            outerEl.dispatchEvent(createMousePointerEvent('pointerup', 110, 110));
-            expect(dragSession.isDragging).toBe(false);
-            inner.detach();
-            outer.detach();
-            outerEl.remove();
-        });
-        it('a disabled inner source lets the outer source claim the event', () => {
-            const outerEl = createElement();
-            const innerEl = createElement(outerEl);
-            const outerConfig = createSourceConfig('outer-en');
-            const innerConfig = createSourceConfig('inner-dis', { isDisabled: true });
-            const outer = new DragSourceState(outerConfig);
-            const inner = new DragSourceState(innerConfig);
-            outer.attach(outerEl);
-            inner.attach(innerEl);
-            innerEl.dispatchEvent(createMousePointerEvent('pointerdown', 100, 100));
-            expect(dragSession.sourceId).toBe('outer-en');
-            dragSession.cancel();
-            inner.detach();
-            outer.detach();
-            outerEl.remove();
-        });
-    });
-});

package/dist/internal/drag-drop/__tests__/drop-delegate.test.js

@@ -1,223 +0,0 @@
-import { beforeEach, describe, expect, it } from 'vitest';
-import { DropDelegate } from '../drop-delegate.svelte.js';
-function createContainer(orientation, itemCount, itemSize = 50, gap = 0) {
-    const container = document.createElement('div');
-    // Mock getBoundingClientRect for the container
-    const containerHeight = orientation === 'vertical' ? itemCount * itemSize + (itemCount - 1) * gap : itemSize;
-    const containerWidth = orientation === 'horizontal' ? itemCount * itemSize + (itemCount - 1) * gap : 200;
-    Object.defineProperty(container, 'getBoundingClientRect', {
-        value: () => ({
-            top: 0,
-            left: 0,
-            bottom: containerHeight,
-            right: containerWidth,
-            width: containerWidth,
-            height: containerHeight,
-            x: 0,
-            y: 0,
-            toJSON() { },
-        }),
-    });
-    for (let i = 0; i < itemCount; i++) {
-        const item = document.createElement('div');
-        item.dataset.dndKey = `item-${i}`;
-        const offset = i * (itemSize + gap);
-        if (orientation === 'vertical') {
-            Object.defineProperty(item, 'getBoundingClientRect', {
-                value: () => ({
-                    top: offset,
-                    bottom: offset + itemSize,
-                    left: 0,
-                    right: 200,
-                    width: 200,
-                    height: itemSize,
-                    x: 0,
-                    y: offset,
-                    toJSON() { },
-                }),
-            });
-        }
-        else {
-            Object.defineProperty(item, 'getBoundingClientRect', {
-                value: () => ({
-                    top: 0,
-                    bottom: itemSize,
-                    left: offset,
-                    right: offset + itemSize,
-                    width: itemSize,
-                    height: itemSize,
-                    x: offset,
-                    y: 0,
-                    toJSON() { },
-                }),
-            });
-        }
-        container.appendChild(item);
-    }
-    return container;
-}
-describe('dropDelegate', () => {
-    describe('vertical orientation', () => {
-        let delegate;
-        let container;
-        beforeEach(() => {
-            delegate = new DropDelegate({ orientation: 'vertical' });
-            container = createContainer('vertical', 3, 50); // 3 items, 50px each
-        });
-        it('returns root for empty container', () => {
-            const empty = document.createElement('div');
-            const target = delegate.getDropTargetFromPoint(empty, 100, 100);
-            expect(target).toEqual({ type: 'root' });
-        });
-        it('returns "before" within 5px of item top edge', () => {
-            const target = delegate.getDropTargetFromPoint(container, 100, 2);
-            expect(target).toEqual({ type: 'item', key: 'item-0', dropPosition: 'before' });
-        });
-        it('returns "after" within 5px of item bottom edge', () => {
-            const target = delegate.getDropTargetFromPoint(container, 100, 48);
-            expect(target).toEqual({ type: 'item', key: 'item-0', dropPosition: 'after' });
-        });
-        it('returns "before" for midpoint split in upper half (no allowDropOn)', () => {
-            // Center of first item = 25px, point at 15px is in upper half
-            const target = delegate.getDropTargetFromPoint(container, 100, 15);
-            expect(target).toEqual({ type: 'item', key: 'item-0', dropPosition: 'before' });
-        });
-        it('returns "after" for midpoint split in lower half (no allowDropOn)', () => {
-            // Center of first item = 25px, point at 35px is in lower half
-            const target = delegate.getDropTargetFromPoint(container, 100, 35);
-            expect(target).toEqual({ type: 'item', key: 'item-0', dropPosition: 'after' });
-        });
-        it('returns "on" when allowDropOn is true and point is in center', () => {
-            const onDelegate = new DropDelegate({ orientation: 'vertical', allowDropOn: true });
-            const target = onDelegate.getDropTargetFromPoint(container, 100, 25);
-            expect(target).toEqual({ type: 'item', key: 'item-0', dropPosition: 'on' });
-        });
-        it('still returns "before" at top edge even with allowDropOn', () => {
-            const onDelegate = new DropDelegate({ orientation: 'vertical', allowDropOn: true });
-            const target = onDelegate.getDropTargetFromPoint(container, 100, 2);
-            expect(target).toEqual({ type: 'item', key: 'item-0', dropPosition: 'before' });
-        });
-        it('targets second item correctly', () => {
-            const target = delegate.getDropTargetFromPoint(container, 100, 65);
-            expect(target).toEqual({ type: 'item', key: 'item-1', dropPosition: 'before' });
-        });
-        it('targets last item', () => {
-            const target = delegate.getDropTargetFromPoint(container, 100, 135);
-            expect(target).toEqual({ type: 'item', key: 'item-2', dropPosition: 'after' });
-        });
-        it('returns "before" first item when above all items', () => {
-            // Point above all items (negative y wouldn't happen in practice, but testing edge)
-            const target = delegate.getDropTargetFromPoint(container, 100, -10);
-            expect(target).toEqual({ type: 'item', key: 'item-0', dropPosition: 'before' });
-        });
-        it('returns "after" last item when below all items', () => {
-            const target = delegate.getDropTargetFromPoint(container, 100, 200);
-            expect(target).toEqual({ type: 'item', key: 'item-2', dropPosition: 'after' });
-        });
-        it('getItems returns items sorted by position', () => {
-            const items = delegate.getItems(container);
-            expect(items.map((el) => el.dataset.dndKey)).toEqual(['item-0', 'item-1', 'item-2']);
-        });
-    });
-    describe('horizontal orientation', () => {
-        let delegate;
-        let container;
-        beforeEach(() => {
-            delegate = new DropDelegate({ orientation: 'horizontal' });
-            container = createContainer('horizontal', 3, 50);
-        });
-        it('returns "before" within 5px of left edge', () => {
-            const target = delegate.getDropTargetFromPoint(container, 2, 25);
-            expect(target).toEqual({ type: 'item', key: 'item-0', dropPosition: 'before' });
-        });
-        it('returns "after" within 5px of right edge', () => {
-            const target = delegate.getDropTargetFromPoint(container, 48, 25);
-            expect(target).toEqual({ type: 'item', key: 'item-0', dropPosition: 'after' });
-        });
-        it('returns midpoint split for center', () => {
-            const target = delegate.getDropTargetFromPoint(container, 15, 25);
-            expect(target).toEqual({ type: 'item', key: 'item-0', dropPosition: 'before' });
-        });
-        it('returns "after" last item when past all items', () => {
-            const target = delegate.getDropTargetFromPoint(container, 200, 25);
-            expect(target).toEqual({ type: 'item', key: 'item-2', dropPosition: 'after' });
-        });
-    });
-    describe('rTL direction', () => {
-        let delegate;
-        let container;
-        beforeEach(() => {
-            delegate = new DropDelegate({ orientation: 'horizontal', direction: 'rtl' });
-            container = createContainer('horizontal', 3, 50);
-        });
-        it('returns "before" at right edge in RTL', () => {
-            const target = delegate.getDropTargetFromPoint(container, 48, 25);
-            expect(target).toEqual({ type: 'item', key: 'item-0', dropPosition: 'before' });
-        });
-        it('returns "after" at left edge in RTL', () => {
-            const target = delegate.getDropTargetFromPoint(container, 2, 25);
-            expect(target).toEqual({ type: 'item', key: 'item-0', dropPosition: 'after' });
-        });
-    });
-    describe('getDropTargetFromIndex', () => {
-        it('returns target for valid index', () => {
-            const delegate = new DropDelegate({ orientation: 'vertical' });
-            const container = createContainer('vertical', 3, 50);
-            const target = delegate.getDropTargetFromIndex(container, 1, 'before');
-            expect(target).toEqual({ type: 'item', key: 'item-1', dropPosition: 'before' });
-        });
-        it('clamps index to valid range', () => {
-            const delegate = new DropDelegate({ orientation: 'vertical' });
-            const container = createContainer('vertical', 3, 50);
-            const target = delegate.getDropTargetFromIndex(container, 10, 'after');
-            expect(target).toEqual({ type: 'item', key: 'item-2', dropPosition: 'after' });
-        });
-        it('returns root for empty container', () => {
-            const delegate = new DropDelegate({ orientation: 'vertical' });
-            const empty = document.createElement('div');
-            const target = delegate.getDropTargetFromIndex(empty, 0, 'before');
-            expect(target).toEqual({ type: 'root' });
-        });
-    });
-    describe('getIndicatorRect', () => {
-        it('returns horizontal line for vertical list "before"', () => {
-            const delegate = new DropDelegate({ orientation: 'vertical' });
-            const container = createContainer('vertical', 3, 50);
-            const rect = delegate.getIndicatorRect(container, {
-                type: 'item',
-                key: 'item-1',
-                dropPosition: 'before',
-            });
-            expect(rect).not.toBeNull();
-            expect(rect.y).toBe(50); // top of item-1
-            expect(rect.height).toBe(2);
-        });
-        it('returns horizontal line for vertical list "after"', () => {
-            const delegate = new DropDelegate({ orientation: 'vertical' });
-            const container = createContainer('vertical', 3, 50);
-            const rect = delegate.getIndicatorRect(container, {
-                type: 'item',
-                key: 'item-1',
-                dropPosition: 'after',
-            });
-            expect(rect).not.toBeNull();
-            expect(rect.y).toBe(100); // bottom of item-1
-        });
-        it('returns null for root target', () => {
-            const delegate = new DropDelegate({ orientation: 'vertical' });
-            const container = createContainer('vertical', 3, 50);
-            const rect = delegate.getIndicatorRect(container, { type: 'root' });
-            expect(rect).toBeNull();
-        });
-        it('returns null for unknown key', () => {
-            const delegate = new DropDelegate({ orientation: 'vertical' });
-            const container = createContainer('vertical', 3, 50);
-            const rect = delegate.getIndicatorRect(container, {
-                type: 'item',
-                key: 'nonexistent',
-                dropPosition: 'before',
-            });
-            expect(rect).toBeNull();
-        });
-    });
-});

package/dist/internal/drag-drop/__tests__/types.test.js

@@ -1,20 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { DROP_OPERATION } from '../types.js';
-describe('dROP_OPERATION', () => {
-    it('has cancel as 0', () => {
-        expect(DROP_OPERATION.cancel).toBe(0);
-    });
-    it('has move as 1', () => {
-        expect(DROP_OPERATION.move).toBe(1);
-    });
-    it('has copy as 2', () => {
-        expect(DROP_OPERATION.copy).toBe(2);
-    });
-    it('has link as 4', () => {
-        expect(DROP_OPERATION.link).toBe(4);
-    });
-    it('has all as 7 (move | copy | link)', () => {
-        expect(DROP_OPERATION.all).toBe(7);
-        expect(DROP_OPERATION.all).toBe(DROP_OPERATION.move | DROP_OPERATION.copy | DROP_OPERATION.link);
-    });
-});

package/dist/internal/escape-layer/__tests__/escape-layer.test.js

@@ -1,113 +0,0 @@
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { EscapeLayerState, resetEscapeLayerStack } from '../escape-layer.svelte.js';
-describe('escapeLayer', () => {
-    afterEach(() => {
-        resetEscapeLayerStack();
-    });
-    it('calls onEscapeKeydown when Escape is pressed', () => {
-        const onEscape = vi.fn();
-        const layer = new EscapeLayerState({ enabled: true, onEscapeKeydown: onEscape });
-        layer.mount();
-        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
-        expect(onEscape).toHaveBeenCalledOnce();
-        layer.unmount();
-    });
-    it('ignores non-Escape keys', () => {
-        const onEscape = vi.fn();
-        const layer = new EscapeLayerState({ enabled: true, onEscapeKeydown: onEscape });
-        layer.mount();
-        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
-        expect(onEscape).not.toHaveBeenCalled();
-        layer.unmount();
-    });
-    it('only the topmost layer handles Escape (stack)', () => {
-        const onEscape1 = vi.fn();
-        const onEscape2 = vi.fn();
-        const layer1 = new EscapeLayerState({ enabled: true, onEscapeKeydown: onEscape1 });
-        const layer2 = new EscapeLayerState({ enabled: true, onEscapeKeydown: onEscape2 });
-        layer1.mount();
-        layer2.mount();
-        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
-        expect(onEscape1).not.toHaveBeenCalled();
-        expect(onEscape2).toHaveBeenCalledOnce();
-        layer2.unmount();
-        layer1.unmount();
-    });
-    it('respects ignore behavior', () => {
-        const onEscape = vi.fn();
-        const layer = new EscapeLayerState({
-            enabled: true,
-            onEscapeKeydown: onEscape,
-            behavior: 'ignore',
-        });
-        layer.mount();
-        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
-        expect(onEscape).not.toHaveBeenCalled();
-        layer.unmount();
-    });
-    it('defer-otherwise-close falls through to bottom', () => {
-        const onEscape1 = vi.fn();
-        const onEscape2 = vi.fn();
-        const layer1 = new EscapeLayerState({
-            enabled: true,
-            onEscapeKeydown: onEscape1,
-            behavior: 'defer-otherwise-close',
-        });
-        const layer2 = new EscapeLayerState({
-            enabled: true,
-            onEscapeKeydown: onEscape2,
-            behavior: 'defer-otherwise-close',
-        });
-        layer1.mount();
-        layer2.mount();
-        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
-        expect(onEscape1).toHaveBeenCalledOnce();
-        expect(onEscape2).not.toHaveBeenCalled();
-        layer2.unmount();
-        layer1.unmount();
-    });
-    it('does not mount when enabled is false', () => {
-        const onEscape = vi.fn();
-        const layer = new EscapeLayerState({ enabled: false, onEscapeKeydown: onEscape });
-        layer.mount();
-        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
-        expect(onEscape).not.toHaveBeenCalled();
-        layer.unmount();
-    });
-    it('cleans up when all layers unmount', () => {
-        const layer = new EscapeLayerState({ enabled: true, onEscapeKeydown: vi.fn() });
-        layer.mount();
-        layer.unmount();
-        // Should not throw after cleanup
-        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
-    });
-    it('resolves behavior at keydown time (getter can flip between keypresses)', () => {
-        // A layer may pass `behavior` as a getter and decide per keypress — the
-        // submenu layer closes itself only when focus lives inside its content,
-        // and defers to the parent menu layer otherwise.
-        let topBehavior = 'close';
-        const onBottom = vi.fn();
-        const onTop = vi.fn();
-        const bottom = new EscapeLayerState({ enabled: true, onEscapeKeydown: onBottom });
-        const top = new EscapeLayerState({
-            enabled: true,
-            get behavior() {
-                return topBehavior;
-            },
-            onEscapeKeydown: onTop,
-        });
-        bottom.mount();
-        top.mount();
-        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
-        expect(onTop).toHaveBeenCalledOnce();
-        expect(onBottom).not.toHaveBeenCalled();
-        // Same mounted layer, new answer from the getter: the keypress falls
-        // through to the bottom layer in the SAME stack state.
-        topBehavior = 'defer-otherwise-close';
-        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
-        expect(onTop).toHaveBeenCalledOnce();
-        expect(onBottom).toHaveBeenCalledOnce();
-        top.unmount();
-        bottom.unmount();
-    });
-});