@spectral_labs/ui 1.3.0 → 1.3.1

package/dist/components/grid-list/__tests__/GridListTest.svelte

@@ -38,7 +38,7 @@
   {onSelectionChange}
   aria-label="Test grid"
 >
-  {#snippet item(itemData: TestItem)}
+  {#snippet item(itemData)}
     <Item id={itemData.id} textValue={itemData.label}>
       {itemData.label}
     </Item>

package/dist/components/grid-list/components/grid-list-root.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="T extends GridListItemData">
   import type { GridListItemData, GridListProps } from '../types.js'
   import { dragSession } from '../../../internal/drag-drop/index.js'
   import { isBrowser } from '../../../internal/helpers/index.js'
@@ -27,7 +27,7 @@
     onSelectionChange,
     item: itemSnippet,
     empty: emptySnippet,
-  }: GridListProps<GridListItemData> = $props()
+  }: GridListProps<T> = $props()
 
   let containerEl: HTMLElement | undefined = $state()
   let indicatorPortalEl: HTMLDivElement | null = null

package/dist/components/grid-list/components/grid-list-root.svelte.d.ts

@@ -1,5 +1,26 @@
 import type { GridListItemData, GridListProps } from '../types.js';
-declare const GridListRoot: import("svelte").Component<GridListProps<GridListItemData>, {}, "selectedKeys">;
-type GridListRoot = ReturnType<typeof GridListRoot>;
+declare function $$render<T extends GridListItemData>(): {
+    props: GridListProps<T>;
+    exports: {};
+    bindings: "selectedKeys";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends GridListItemData> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "selectedKeys";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends GridListItemData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends GridListItemData>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const GridListRoot: $$IsomorphicComponent;
+type GridListRoot<T extends GridListItemData> = InstanceType<typeof GridListRoot<T>>;
 export default GridListRoot;
 //# sourceMappingURL=grid-list-root.svelte.d.ts.map

package/dist/components/grid-list/components/grid-list-root.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grid-list-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/grid-list/components/grid-list-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AA2KlE,QAAA,MAAM,YAAY,iFAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"grid-list-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/grid-list/components/grid-list-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAIlE,iBAAS,QAAQ,CAAC,CAAC,SAAS,gBAAgB;WAsKf,aAAa,CAAC,CAAC,CAAC;;;;;EAAwF;AACrI,cAAM,iBAAiB,CAAC,CAAC,SAAS,gBAAgB;IAC9C,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS,gBAAgB,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACrZ,CAAC,CAAC,SAAS,gBAAgB,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACpJ,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,YAAY,EAAE,qBAAmC,CAAC;AACtC,KAAK,YAAY,CAAC,CAAC,SAAS,gBAAgB,IAAI,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AACvF,eAAe,YAAY,CAAC"}

package/dist/components/sortable-list/__tests__/NestedSortableListTest.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import * as SortableList from '../index.js'
+
+  interface Block {
+    id: string
+    label: string
+  }
+
+  interface OuterBlock extends Block {
+    children?: Block[]
+  }
+
+  let {
+    items = $bindable<OuterBlock[]>([
+      { id: 'title', label: 'Title' },
+      {
+        id: 'container',
+        label: 'Container',
+        children: [
+          { id: 'inner-1', label: 'Inner 1' },
+          { id: 'inner-2', label: 'Inner 2' },
+        ],
+      },
+      { id: 'author', label: 'Author' },
+      { id: 'place', label: 'Place' },
+    ]),
+  }: {
+    items?: OuterBlock[]
+  } = $props()
+</script>
+
+<SortableList.Root bind:items group="nested-blocks" aria-label="Outer list">
+  {#snippet item(data: OuterBlock)}
+    <SortableList.Item id={data.id}>
+      {data.label}
+      {#if data.children}
+        <SortableList.Root
+          items={data.children}
+          group="nested-blocks"
+          aria-label="Inner list"
+        >
+          {#snippet item(child: Block)}
+            <SortableList.Item id={child.id}>{child.label}</SortableList.Item>
+          {/snippet}
+        </SortableList.Root>
+      {/if}
+    </SortableList.Item>
+  {/snippet}
+</SortableList.Root>

package/dist/components/sortable-list/__tests__/SortableListTest.svelte

@@ -33,7 +33,7 @@
   {onReorder}
   aria-label="Sortable test"
 >
-  {#snippet item(data: Item)}
+  {#snippet item(data)}
     <SortableList.Item id={data.id}>
       <SortableList.Handle>&#x22EE;&#x22EE;</SortableList.Handle>
       {data.label}

package/dist/components/sortable-list/__tests__/sortable-list.nested.test.svelte.js

@@ -0,0 +1,112 @@
+/**
+ * SortableList nested lists — regression lock for #190.
+ *
+ * A Root nested inside an Item (same group) used to freeze the ghost:
+ * the pointerdown bubbled from the inner item to the outer item (both drag
+ * sources), and the second beginPointerDrag clobbered the pending session
+ * before the movement threshold was met.
+ *
+ * These tests drive the pointer path far enough in jsdom to lock the claim
+ * semantics (innermost source wins) and the clean end of the session.
+ * Full spatial behavior (drop positions, indicators) stays in Playwright.
+ */
+import { flushSync, mount, unmount } from 'svelte';
+import { afterEach, beforeAll, describe, expect, it } from 'vitest';
+import { dragSession } from '../../../internal/drag-drop/index.js';
+import NestedSortableListTest from './NestedSortableListTest.svelte';
+// Polyfill browser APIs absent from jsdom
+if (typeof 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('sortableList — nested Root inside an Item (#190)', () => {
+    let target;
+    let instance;
+    beforeAll(() => {
+        if (!HTMLElement.prototype.setPointerCapture) {
+            HTMLElement.prototype.setPointerCapture = () => { };
+            HTMLElement.prototype.releasePointerCapture = () => { };
+        }
+    });
+    function setup() {
+        dragSession._resetForTests();
+        target = document.createElement('div');
+        document.body.appendChild(target);
+        instance = mount(NestedSortableListTest, { target, props: {} });
+        flushSync();
+    }
+    afterEach(() => {
+        if (instance) {
+            unmount(instance);
+        }
+        instance = undefined;
+        target?.remove();
+        dragSession._resetForTests();
+    });
+    function getItem(id) {
+        const el = target.querySelector(`[data-dnd-key="${id}"]`);
+        if (!el)
+            throw new Error(`item ${id} not found`);
+        return el;
+    }
+    it('renders both lists (outer 4 items, inner 2 items)', () => {
+        setup();
+        const lists = target.querySelectorAll('.sp-sortable-list');
+        expect(lists).toHaveLength(2);
+        expect(target.querySelectorAll('[data-dnd-key]')).toHaveLength(6);
+    });
+    it('pointerdown on an inner item claims the inner source, not the outer item', () => {
+        setup();
+        const inner = getItem('inner-1');
+        inner.dispatchEvent(createMousePointerEvent('pointerdown', 100, 100));
+        expect(dragSession.sourceId).not.toBeNull();
+        expect(dragSession.sourceId.endsWith('-item-inner-1')).toBe(true);
+        dragSession.cancel();
+    });
+    it('dragging an inner item past the threshold starts and ends a clean session', () => {
+        setup();
+        const inner = getItem('inner-1');
+        inner.dispatchEvent(createMousePointerEvent('pointerdown', 100, 100));
+        inner.dispatchEvent(createMousePointerEvent('pointermove', 112, 112));
+        expect(dragSession.isDragging).toBe(true);
+        expect(dragSession.sourceId.endsWith('-item-inner-1')).toBe(true);
+        expect(dragSession.draggingKeys.has('inner-1')).toBe(true);
+        expect(document.querySelector('.sp-drag-ghost')).not.toBeNull();
+        // Releasing the pointer must end the session — this is where the ghost
+        // used to stay frozen on screen before the fix.
+        inner.dispatchEvent(createMousePointerEvent('pointerup', 112, 112));
+        expect(dragSession.isDragging).toBe(false);
+        expect(dragSession.sourceId).toBeNull();
+        expect(document.querySelector('.sp-drag-ghost')).toBeNull();
+    });
+    it('dragging an outer item (the container itself) still works', () => {
+        setup();
+        const container = getItem('container');
+        // pointerdown directly on the container item, outside the inner list
+        container.dispatchEvent(createMousePointerEvent('pointerdown', 100, 100));
+        expect(dragSession.sourceId.endsWith('-item-container')).toBe(true);
+        container.dispatchEvent(createMousePointerEvent('pointermove', 112, 112));
+        expect(dragSession.isDragging).toBe(true);
+        expect(dragSession.draggingKeys.has('container')).toBe(true);
+        container.dispatchEvent(createMousePointerEvent('pointerup', 112, 112));
+        expect(dragSession.isDragging).toBe(false);
+        expect(document.querySelector('.sp-drag-ghost')).toBeNull();
+    });
+});

package/dist/components/sortable-list/components/sortable-list-root.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="T extends SortableItem">
   import type { SortableItem, SortableListProps } from '../types.js'
   import { dragSession } from '../../../internal/drag-drop/index.js'
   import { createSortableList, setSortableListContext } from '../sortable-list.svelte.js'
@@ -20,7 +20,7 @@
     onRemove,
     item: itemSnippet,
     empty: emptySnippet,
-  }: SortableListProps<SortableItem> = $props()
+  }: SortableListProps<T> = $props()
 
   let containerEl: HTMLElement | undefined = $state()
 

package/dist/components/sortable-list/components/sortable-list-root.svelte.d.ts

@@ -1,5 +1,26 @@
 import type { SortableItem, SortableListProps } from '../types.js';
-declare const SortableListRoot: import("svelte").Component<SortableListProps<SortableItem>, {}, "items">;
-type SortableListRoot = ReturnType<typeof SortableListRoot>;
+declare function $$render<T extends SortableItem>(): {
+    props: SortableListProps<T>;
+    exports: {};
+    bindings: "items";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends SortableItem> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "items";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends SortableItem>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends SortableItem>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const SortableListRoot: $$IsomorphicComponent;
+type SortableListRoot<T extends SortableItem> = InstanceType<typeof SortableListRoot<T>>;
 export default SortableListRoot;
 //# sourceMappingURL=sortable-list-root.svelte.d.ts.map

package/dist/components/sortable-list/components/sortable-list-root.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sortable-list-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/sortable-list/components/sortable-list-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AA0ElE,QAAA,MAAM,gBAAgB,0EAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"sortable-list-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/sortable-list/components/sortable-list-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAGlE,iBAAS,QAAQ,CAAC,CAAC,SAAS,YAAY;WAsEX,iBAAiB,CAAC,CAAC,CAAC;;;;;EAAiF;AAClI,cAAM,iBAAiB,CAAC,CAAC,SAAS,YAAY;IAC1C,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS,YAAY,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACjZ,CAAC,CAAC,SAAS,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAChJ,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,gBAAgB,EAAE,qBAAmC,CAAC;AAC1C,KAAK,gBAAgB,CAAC,CAAC,SAAS,YAAY,IAAI,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;AAC3F,eAAe,gBAAgB,CAAC"}

package/dist/components/virtualizer/components/virtualizer-root.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="T extends SizedItem">
   import type { Rect, SizedItem, VirtualizerProps } from '../types.js'
   import { isBrowser } from '../../../internal/helpers/index.js'
 
@@ -8,7 +8,7 @@
     overscan = 300,
     class: className,
     item: itemSnippet,
-  }: VirtualizerProps<SizedItem> = $props()
+  }: VirtualizerProps<T> = $props()
 
   let containerEl: HTMLElement | undefined = $state()
   let containerWidth = $state(0)

package/dist/components/virtualizer/components/virtualizer-root.svelte.d.ts

@@ -1,5 +1,26 @@
 import type { SizedItem, VirtualizerProps } from '../types.js';
-declare const VirtualizerRoot: import("svelte").Component<VirtualizerProps<SizedItem>, {}, "">;
-type VirtualizerRoot = ReturnType<typeof VirtualizerRoot>;
+declare function $$render<T extends SizedItem>(): {
+    props: VirtualizerProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends SizedItem> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends SizedItem>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends SizedItem>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const VirtualizerRoot: $$IsomorphicComponent;
+type VirtualizerRoot<T extends SizedItem> = InstanceType<typeof VirtualizerRoot<T>>;
 export default VirtualizerRoot;
 //# sourceMappingURL=virtualizer-root.svelte.d.ts.map

package/dist/components/virtualizer/components/virtualizer-root.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"virtualizer-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/virtualizer/components/virtualizer-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAQ,SAAS,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AA2FpE,QAAA,MAAM,eAAe,iEAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"virtualizer-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/virtualizer/components/virtualizer-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAQ,SAAS,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAEpE,iBAAS,QAAQ,CAAC,CAAC,SAAS,SAAS;WAwFR,gBAAgB,CAAC,CAAC,CAAC;;;;;EAA4E;AAC5H,cAAM,iBAAiB,CAAC,CAAC,SAAS,SAAS;IACvC,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS,SAAS,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC9Y,CAAC,CAAC,SAAS,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC7I,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,eAAe,EAAE,qBAAmC,CAAC;AACzC,KAAK,eAAe,CAAC,CAAC,SAAS,SAAS,IAAI,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;AACtF,eAAe,eAAe,CAAC"}

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

@@ -34,6 +34,21 @@ function createElement() {
     document.body.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 ?? '';
+            }
+        };
+    }
+}
 describe('dragSession', () => {
     beforeEach(() => {
         dragSession._resetForTests();
@@ -265,19 +280,7 @@ describe('dragSession', () => {
     describe('touch long-press', () => {
         beforeEach(() => {
             vi.useFakeTimers();
-            // Polyfill PointerEvent for jsdom
-            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 ?? '';
-                    }
-                };
-            }
+            ensurePointerEventPolyfill();
         });
         afterEach(() => {
             vi.useRealTimers();
@@ -432,6 +435,89 @@ describe('dragSession', () => {
             expect(dragSession.isDragging).toBe(false);
         });
     });
+    describe('pointer drag re-entrance (#190)', () => {
+        beforeEach(() => {
+            ensurePointerEventPolyfill();
+        });
+        function createMousePointerEvent(type, x, y) {
+            return new PointerEvent(type, {
+                clientX: x,
+                clientY: y,
+                pointerId: 1,
+                pointerType: 'mouse',
+                bubbles: true,
+            });
+        }
+        function registerSource(id) {
+            const config = createSourceConfig(id);
+            const el = createElement();
+            el.setPointerCapture = vi.fn();
+            el.releasePointerCapture = vi.fn();
+            dragSession.registerSource(config, el);
+            return { config, el };
+        }
+        it('a second beginPointerDrag while one is pending does not clobber the first', () => {
+            const inner = registerSource('inner-src');
+            const outer = registerSource('outer-src');
+            // Same pointerdown delivered to both sources (bubbling in a nested DOM)
+            const down = createMousePointerEvent('pointerdown', 100, 100);
+            dragSession.beginPointerDrag('inner-src', down);
+            expect(dragSession.sourceId).toBe('inner-src');
+            dragSession.beginPointerDrag('outer-src', down);
+            expect(dragSession.sourceId).toBe('inner-src'); // first claim wins
+            // Crossing the threshold activates the drag for the FIRST source
+            inner.el.dispatchEvent(createMousePointerEvent('pointermove', 110, 110));
+            expect(dragSession.isDragging).toBe(true);
+            expect(dragSession.sourceId).toBe('inner-src');
+            expect(inner.config.onDragStart).toHaveBeenCalled();
+            expect(outer.config.onDragStart).not.toHaveBeenCalled();
+            // And the session ends cleanly — no stuck ghost
+            inner.el.dispatchEvent(createMousePointerEvent('pointerup', 110, 110));
+            expect(dragSession.isDragging).toBe(false);
+            expect(dragSession.sourceId).toBeNull();
+            expect(document.querySelector('.sp-drag-ghost')).toBeNull();
+            inner.el.remove();
+            outer.el.remove();
+        });
+        it('releasing before the threshold clears the pending claim for the next drag', () => {
+            const a = registerSource('pending-a');
+            const b = registerSource('pending-b');
+            dragSession.beginPointerDrag('pending-a', createMousePointerEvent('pointerdown', 100, 100));
+            a.el.dispatchEvent(createMousePointerEvent('pointerup', 100, 100));
+            expect(dragSession.sourceId).toBeNull();
+            dragSession.beginPointerDrag('pending-b', createMousePointerEvent('pointerdown', 100, 100));
+            expect(dragSession.sourceId).toBe('pending-b');
+            dragSession.cancel();
+            a.el.remove();
+            b.el.remove();
+        });
+        it('keyboard drag cannot start while a pointer drag is pending', () => {
+            const a = registerSource('kb-block-a');
+            const b = registerSource('kb-block-b');
+            dragSession.beginPointerDrag('kb-block-a', createMousePointerEvent('pointerdown', 100, 100));
+            dragSession.beginKeyboardDrag('kb-block-b');
+            expect(dragSession.isDragging).toBe(false);
+            expect(dragSession.sourceId).toBe('kb-block-a');
+            dragSession.cancel();
+            a.el.remove();
+            b.el.remove();
+        });
+        it('pagehide during a pending claim resets it so future drags are not blocked', () => {
+            const src = registerSource('ph-pending');
+            // Pointer down, threshold NOT crossed — claim is pending
+            dragSession.beginPointerDrag('ph-pending', createMousePointerEvent('pointerdown', 100, 100));
+            expect(dragSession.isDragging).toBe(false);
+            expect(dragSession.sourceId).toBe('ph-pending');
+            // Page navigates during the pending claim
+            window.dispatchEvent(new Event('pagehide'));
+            expect(dragSession.sourceId).toBeNull();
+            // The re-entrance guard must not block the next drag
+            dragSession.beginPointerDrag('ph-pending', createMousePointerEvent('pointerdown', 100, 100));
+            expect(dragSession.sourceId).toBe('ph-pending');
+            dragSession.cancel();
+            src.el.remove();
+        });
+    });
     describe('async onDrop (F-001)', () => {
         it('awaits async onDrop callback before cleanup', async () => {
             let dropResolved = false;

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

@@ -0,0 +1,130 @@
+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/drag-session.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drag-session.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/internal/drag-drop/drag-session.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EACV,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAGhB,UAAU,EACV,gBAAgB,EAEjB,MAAM,YAAY,CAAA;AAOnB,UAAU,gBAAgB;IACxB,MAAM,EAAE,gBAAgB,CAAA;IACxB,OAAO,EAAE,WAAW,CAAA;CACrB;AAED,UAAU,gBAAgB;IACxB,MAAM,EAAE,gBAAgB,CAAA;IACxB,OAAO,EAAE,WAAW,CAAA;IACpB,+EAA+E;IAC/E,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CACjD;AA4QD,eAAO,MAAM,WAAW;;;;;;;;;;;2BAmCC,gBAAgB,WAAW,WAAW,GAAG,MAAM,IAAI;2BAQhE,gBAAgB,WACf,WAAW,oBACF,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,GAC/C,MAAM,IAAI;kBASC,MAAM,IAAI,GAAG,MAAM,IAAI;+BASV,MAAM,KAAK,YAAY,GAAG,IAAI;gCAqG7B,MAAM,GAAG,IAAI;IAazC,gDAAgD;uBAC7B,IAAI;IAYvB,0DAA0D;uBACvC,IAAI;IAYvB,mFAAmF;0BAC7D,UAAU,GAAG,IAAI;YAQ/B,OAAO,CAAC,IAAI,CAAC;cAIX,IAAI;IAMd,uDAAuD;sCACrB,MAAM,QAAQ,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI;IAKlE,+FAA+F;iCAClE,MAAM,GAAG,OAAO;IAI7C,+FAA+F;6CACtD,MAAM,GAAG,OAAO;IAIzD,mCAAmC;kBACrB,MAAM,GAAG,gBAAgB,GAAG,SAAS;IAInD,mCAAmC;kBACrB,MAAM,GAAG,gBAAgB,GAAG,SAAS;IAInD,gBAAgB;sBACE,IAAI;CAMvB,CAAA"}
+{"version":3,"file":"drag-session.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/internal/drag-drop/drag-session.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EACV,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAGhB,UAAU,EACV,gBAAgB,EAEjB,MAAM,YAAY,CAAA;AAOnB,UAAU,gBAAgB;IACxB,MAAM,EAAE,gBAAgB,CAAA;IACxB,OAAO,EAAE,WAAW,CAAA;CACrB;AAED,UAAU,gBAAgB;IACxB,MAAM,EAAE,gBAAgB,CAAA;IACxB,OAAO,EAAE,WAAW,CAAA;IACpB,+EAA+E;IAC/E,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CACjD;AA4QD,eAAO,MAAM,WAAW;;;;;;;;;;;2BAmCC,gBAAgB,WAAW,WAAW,GAAG,MAAM,IAAI;2BAQhE,gBAAgB,WACf,WAAW,oBACF,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,GAC/C,MAAM,IAAI;kBASC,MAAM,IAAI,GAAG,MAAM,IAAI;+BASV,MAAM,KAAK,YAAY,GAAG,IAAI;gCA4G7B,MAAM,GAAG,IAAI;IAezC,gDAAgD;uBAC7B,IAAI;IAYvB,0DAA0D;uBACvC,IAAI;IAYvB,mFAAmF;0BAC7D,UAAU,GAAG,IAAI;YAQ/B,OAAO,CAAC,IAAI,CAAC;cAIX,IAAI;IAMd,uDAAuD;sCACrB,MAAM,QAAQ,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI;IAKlE,+FAA+F;iCAClE,MAAM,GAAG,OAAO;IAI7C,+FAA+F;6CACtD,MAAM,GAAG,OAAO;IAIzD,mCAAmC;kBACrB,MAAM,GAAG,gBAAgB,GAAG,SAAS;IAInD,mCAAmC;kBACrB,MAAM,GAAG,gBAAgB,GAAG,SAAS;IAInD,gBAAgB;sBACE,IAAI;CAMvB,CAAA"}

package/dist/internal/drag-drop/drag-session.svelte.js

@@ -304,7 +304,10 @@ export const dragSession = {
     },
     // ── Start drag (pointer) ─────────────────────────────────────────────
     beginPointerDrag(sourceId, e) {
-        if (_isDragging || !isBrowser)
+        // _sourceId is non-null while a pointer drag is still pending (before the
+        // movement threshold) — refuse re-entry so a second claim cannot clobber
+        // the pending session's source and leave a stuck ghost.
+        if (_isDragging || _sourceId !== null || !isBrowser)
             return;
         const source = registeredSources.get(sourceId);
         if (!source || source.config.isDisabled)
@@ -314,6 +317,8 @@ export const dragSession = {
         _startY = e.clientY;
         _dragThresholdMet = false;
         _sourceId = sourceId;
+        // Guard the pending claim against page navigation (see onPageHide)
+        startPageHideListener();
         const el = source.element;
         el.setPointerCapture(e.pointerId);
         function cleanup() {
@@ -354,6 +359,7 @@ export const dragSession = {
                     }
                     cleanup();
                     _sourceId = null;
+                    stopPageHideListener();
                     return;
                 }
                 // Still waiting for long-press timer — don't do anything yet
@@ -383,6 +389,7 @@ export const dragSession = {
             }
             else {
                 _sourceId = null;
+                stopPageHideListener();
             }
         };
         const onCancel = () => {
@@ -395,7 +402,9 @@ export const dragSession = {
     },
     // ── Start drag (keyboard) ───────────────────────────────────────────
     beginKeyboardDrag(sourceId) {
-        if (_isDragging || !isBrowser)
+        // Same re-entrance rule as beginPointerDrag: a pending pointer drag
+        // (pointer down, threshold not yet met) blocks a keyboard start.
+        if (_isDragging || _sourceId !== null || !isBrowser)
             return;
         const source = registeredSources.get(sourceId);
         if (!source || source.config.isDisabled)
@@ -479,7 +488,9 @@ export const dragSession = {
 // If the page navigates during a drag (SvelteKit routing), the module-level
 // state would be left in a broken state. Listen for pagehide to force cleanup.
 function onPageHide() {
-    if (_isDragging) {
+    // Also reset a PENDING claim (_sourceId set, threshold not met): leaving it
+    // behind would make the re-entrance guard block every future drag.
+    if (_isDragging || _sourceId !== null) {
         resetSession();
     }
 }

package/dist/internal/drag-drop/drag-source.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drag-source.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/internal/drag-drop/drag-source.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAIlD,qBAAa,eAAe;;gBAKd,MAAM,EAAE,gBAAgB;IAIpC,+DAA+D;IAC/D,IAAI,UAAU,IAAI,OAAO,CAExB;IAED,4BAA4B;IAC5B,IAAI,EAAE,IAAI,MAAM,CAEf;IAED;;;OAGG;IACH,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAmBlC;;OAEG;IACH,MAAM,IAAI,IAAI;CA2Bf"}
+{"version":3,"file":"drag-source.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/internal/drag-drop/drag-source.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAIlD,qBAAa,eAAe;;gBAKd,MAAM,EAAE,gBAAgB;IAIpC,+DAA+D;IAC/D,IAAI,UAAU,IAAI,OAAO,CAExB;IAED,4BAA4B;IAC5B,IAAI,EAAE,IAAI,MAAM,CAEf;IAED;;;OAGG;IACH,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAmBlC;;OAEG;IACH,MAAM,IAAI,IAAI;CA+Bf"}

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

@@ -61,6 +61,10 @@ export class DragSourceState {
         // Only primary button
         if (e.button !== 0)
             return;
+        // Claim the gesture: with nested sources (e.g. a sortable list inside
+        // another list's item) the same pointerdown bubbles to every ancestor
+        // source — the innermost one wins, ancestors must never see it.
+        e.stopPropagation();
         dragSession.beginPointerDrag(this.#config.id, e);
     };
     #onKeyDown = (e) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spectral_labs/ui",
   "type": "module",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"