@spectral_labs/ui 1.3.0 → 1.4.0

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/pin-input/__tests__/pin-input.test.svelte.js

@@ -1,4 +1,4 @@
-import { mount, unmount } from 'svelte';
+import { flushSync, mount, unmount } from 'svelte';
 import { afterEach, describe, expect, it } from 'vitest';
 import PinInput from '../pin-input.svelte';
 describe('pin-input', () => {
@@ -23,4 +23,49 @@ describe('pin-input', () => {
         setup({ length: 6 });
         expect(target.querySelectorAll('input').length).toBe(6);
     });
+    it('uses the inputmode prop on slots', () => {
+        setup({ length: 4, inputmode: 'text' });
+        const input = target.querySelector('input');
+        expect(input.getAttribute('inputmode')).toBe('text');
+    });
+    it('defaults inputmode to numeric (backward compat)', () => {
+        setup({ length: 4 });
+        const input = target.querySelector('input');
+        expect(input.getAttribute('inputmode')).toBe('numeric');
+    });
+    it('uses ariaLabelPrefix in slot aria-labels', () => {
+        setup({ length: 4, ariaLabelPrefix: 'Character' });
+        const input = target.querySelector('input');
+        expect(input.getAttribute('aria-label')).toBe('Character 1 of 4');
+    });
+    it('pasteTransformer strips separators before distributing', () => {
+        setup({ length: 6, pasteTransformer: (raw) => raw.replace(/[^0-9A-Z]/gi, '').toUpperCase() });
+        const input = target.querySelector('input');
+        const ev = new Event('paste', { bubbles: true });
+        Object.defineProperty(ev, 'clipboardData', { value: { getData: () => 'ab-cd-ef' } });
+        input.dispatchEvent(ev);
+        flushSync();
+        const joined = Array.from(target.querySelectorAll('input')).map((i) => i.value).join('');
+        expect(joined).toBe('ABCDEF');
+    });
+    it('charTransformer uppercases typed input', () => {
+        setup({ length: 4, charTransformer: (c) => c.toUpperCase() });
+        const input = target.querySelector('input');
+        input.value = 'a';
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        flushSync();
+        expect(target.querySelectorAll('input')[0].value).toBe('A');
+    });
+    it('allowedPattern rejects disallowed typed characters', () => {
+        setup({ length: 4, allowedPattern: /[2-9A-HJKMNP-Z]/i });
+        const input = target.querySelector('input');
+        input.value = '0';
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        flushSync();
+        expect(target.querySelectorAll('input')[0].value).toBe('');
+    });
+    it('renders group separators when groupSize is set', () => {
+        setup({ length: 8, groupSize: 4 });
+        expect(target.querySelectorAll('.sp-pin-input-separator').length).toBe(1);
+    });
 });

package/dist/components/pin-input/pin-input.svelte

@@ -12,19 +12,27 @@
     name,
     required = false,
     class: className,
+    inputmode = 'numeric',
+    ariaLabelPrefix = 'Digit',
+    pasteTransformer,
+    charTransformer,
+    allowedPattern,
   }: PinInputProps = $props()
 
   const inputs: HTMLInputElement[] = $state.raw([])
 
   function handleInput(index: number, event: Event) {
     const target = event.target as HTMLInputElement
-    const char = target.value.slice(-1)
+    let char = target.value.slice(-1)
+    if (char && allowedPattern && !allowedPattern.test(char)) {
+      target.value = value[index] ?? '' // reject: value state unchanged ⇒ Svelte won't re-render this slot
+      return
+    }
+    if (char && charTransformer) char = charTransformer(char)
     const chars = value.split('')
     chars[index] = char
     value = chars.join('').slice(0, length)
-
     if (char && index < length - 1) inputs[index + 1]?.focus()
-
     if (value.length === length) onComplete?.(value)
   }
 
@@ -45,38 +53,31 @@
 
   function handlePaste(event: ClipboardEvent) {
     event.preventDefault()
-    const pasted = event.clipboardData?.getData('text')?.slice(0, length) ?? ''
-    value = pasted
-    const nextIndex = Math.min(pasted.length, length - 1)
+    const raw = event.clipboardData?.getData('text') ?? ''
+    const cleaned = pasteTransformer ? pasteTransformer(raw) : raw
+    value = cleaned.slice(0, length)
+    const nextIndex = Math.min(value.length, length - 1)
     inputs[nextIndex]?.focus()
-    if (pasted.length === length) onComplete?.(pasted)
+    if (value.length === length) onComplete?.(value)
   }
 </script>
 
 <div class="sp-pin-input {className ?? ''}" role="group">
   {#each { length } as _, i (i)}
     {#if groupSize > 0 && i > 0 && i % groupSize === 0}
-      <span class="sp-pin-input-separator" aria-hidden="true">
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12" /></svg
-        >
-      </span>
+      <span class="sp-pin-input-separator" aria-hidden="true"></span>
     {/if}
     <input
       bind:this={inputs[i]}
       class="sp-pin-input-slot"
       type={mask ? 'password' : 'text'}
-      inputmode="numeric"
+      inputmode={inputmode}
       maxlength={1}
       autocomplete="off"
       {placeholder}
       {disabled}
       value={value[i] ?? ''}
-      aria-label={`Digit ${i + 1} of ${length}`}
+      aria-label={`${ariaLabelPrefix} ${i + 1} of ${length}`}
       oninput={(e) => handleInput(i, e)}
       onkeydown={(e) => handleKeydown(i, e)}
       onpaste={handlePaste}
@@ -96,14 +97,14 @@
   }
 
   .sp-pin-input-separator {
-    display: flex;
-    align-items: center;
-    color: var(--sp-sys-color-outline);
-  }
-
-  .sp-pin-input-separator svg {
-    width: 16px;
-    height: 16px;
+    /* A reliable CSS dash between groups. The previous inline <svg viewBox> rendered at 0 width
+       (no intrinsic size), so groupSize separators were invisible. */
+    flex: 0 0 auto;
+    align-self: center;
+    width: 0.75rem;
+    height: 2px;
+    border-radius: 999px;
+    background-color: var(--sp-sys-color-outline);
   }
 
   .sp-pin-input-slot {
@@ -132,6 +133,12 @@
     opacity: 0.5;
   }
 
+  /* Empty focused slot: hide the placeholder so the caret never overlaps the ○.
+     Stable class hook (.sp-pin-input-slot), no generated s-... classes. */
+  .sp-pin-input-slot:focus::placeholder {
+    color: transparent;
+  }
+
   .sp-pin-input-slot:disabled {
     opacity: 0.38;
     cursor: not-allowed;

package/dist/components/pin-input/pin-input.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pin-input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/pin-input/pin-input.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AA4EhD,QAAA,MAAM,QAAQ,wDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"pin-input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/pin-input/pin-input.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAmFhD,QAAA,MAAM,QAAQ,wDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/pin-input/types.d.ts

@@ -19,5 +19,15 @@ export interface PinInputProps {
     required?: boolean;
     /** Additional CSS class. */
     class?: string;
+    /** Virtual-keyboard hint applied to every slot. Default 'numeric' (PIN). Use 'text' for alphanumeric codes. */
+    inputmode?: 'numeric' | 'text' | 'tel' | 'email' | 'url' | 'decimal' | 'search' | 'none';
+    /** Noun used in each slot's aria-label: `${ariaLabelPrefix} N of M`. Default 'Digit'. */
+    ariaLabelPrefix?: string;
+    /** Transform pasted clipboard text BEFORE distributing into slots (e.g. strip separators, uppercase). */
+    pasteTransformer?: (raw: string) => string;
+    /** Transform each typed character before storing (e.g. uppercase). Applied only to characters accepted by `allowedPattern`. */
+    charTransformer?: (char: string) => string;
+    /** When set, a typed character is accepted only if it matches this pattern (paste is filtered by pasteTransformer instead). */
+    allowedPattern?: RegExp;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/components/pin-input/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/pin-input/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,gGAAgG;IAChG,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/pin-input/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,gGAAgG;IAChG,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,+GAA+G;IAC/G,SAAS,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAA;IACxF,yFAAyF;IACzF,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,yGAAyG;IACzG,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IAC1C,+HAA+H;IAC/H,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IAC1C,+HAA+H;IAC/H,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB"}

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.4.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"