@happyvertical/smrt-svelte 0.55.1 → 0.55.2

package/dist/components/sortable/Sortable.svelte

@@ -0,0 +1,359 @@
+<script lang="ts" generics="Item extends SortableItem, Container extends SortableContainer">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../../i18n/strings.sortable.js';
+import {
+  createSortable,
+  type SortableAnnouncement,
+} from './controller.svelte.js';
+import type {
+  SortableContainer,
+  SortableItem,
+  SortableProps,
+} from './types.js';
+
+let {
+  containers,
+  items,
+  label,
+  reorderContainers = false,
+  allowSameContainerReorder = true,
+  item: itemSnippet,
+  containerHeader,
+  onmove,
+  oncontainermove,
+}: SortableProps<Item, Container> = $props();
+
+const { t } = useI18n();
+const instanceId = $props.id();
+const itemLiveId = `${instanceId}-item-live`;
+const containerLiveId = `${instanceId}-container-live`;
+const LIST_ID = '__smrt-sortable-containers__';
+let root: HTMLElement;
+
+// Fixed containers lead (in the order given); the rest follow. With
+// reordering off, the owner's order is used as is.
+const fixed = $derived(
+  reorderContainers ? containers.filter((container) => container.fixed) : [],
+);
+const movable = $derived(
+  reorderContainers
+    ? containers.filter((container) => !container.fixed)
+    : containers,
+);
+const ordered = $derived([...fixed, ...movable]);
+const itemsByContainer = $derived.by(() => {
+  const next = new Map<string, Item[]>();
+  for (const container of containers) next.set(container.id, []);
+  for (const entry of items) next.get(entry.containerId)?.push(entry);
+  return next;
+});
+const itemsById = $derived(new Map(items.map((entry) => [entry.id, entry])));
+const containersById = $derived(
+  new Map(containers.map((container) => [container.id, container])),
+);
+
+function itemMessage(announcement: SortableAnnouncement): string {
+  switch (announcement.type) {
+    case 'pickup':
+      return t(M['ui.sortable.pickup'], {
+        item: announcement.item,
+        destinations: announcement.destinations.join(', '),
+      });
+    case 'position':
+      return t(M['ui.sortable.position'], {
+        item: announcement.item,
+        container: announcement.container,
+        position: announcement.position,
+        count: announcement.count,
+      });
+    case 'drop':
+      return t(M['ui.sortable.drop'], {
+        item: announcement.item,
+        container: announcement.container,
+        position: announcement.position,
+        count: announcement.count,
+      });
+    case 'unavailable':
+      return t(M['ui.sortable.unavailable'], {
+        container: announcement.container,
+      });
+    case 'failed':
+      return t(M['ui.sortable.failed'], { item: announcement.item });
+    case 'cancel':
+      return t(M['ui.sortable.cancel'], { item: announcement.item });
+  }
+}
+
+const itemSortable = createSortable({
+  root: () => root,
+  selectors: {
+    container: '[data-smrt-sortable-container-id]',
+    containerKey: 'smrtSortableContainerId',
+    item: '[data-smrt-sortable-item-id]',
+    itemKey: 'smrtSortableItemId',
+  },
+  containers: () => ordered,
+  itemIds: (containerId) =>
+    (itemsByContainer.get(containerId) ?? []).map((entry) => entry.id),
+  itemLabel: (itemId) => itemsById.get(itemId)?.label,
+  allowSameContainerReorder: () => allowSameContainerReorder,
+  enabled: () => onmove !== undefined,
+  orientation: () => 'vertical',
+  announce: itemMessage,
+  focusTarget: (element) =>
+    element.querySelector<HTMLElement>('[data-smrt-sortable-handle="item"]'),
+  async commit(move) {
+    const moving = itemsById.get(move.itemId);
+    const sourceContainer = containersById.get(move.source.containerId);
+    const targetContainer = containersById.get(move.target.containerId);
+    if (!moving || !sourceContainer || !targetContainer) return;
+    await onmove?.({
+      item: moving,
+      source: move.source,
+      target: move.target,
+      sourceContainer,
+      targetContainer,
+    });
+  },
+});
+
+// Containers are sorted by a second engine whose single "container" is the
+// list of movable containers and whose "items" are those containers.
+const containerSortable = createSortable({
+  root: () => root,
+  selectors: {
+    container: '[data-smrt-sortable-container-list]',
+    containerKey: 'smrtSortableContainerList',
+    item: '[data-smrt-sortable-container-item]',
+    itemKey: 'smrtSortableContainerItem',
+  },
+  containers: () => [
+    { id: LIST_ID, label: label ?? t(M['ui.sortable.label']) },
+  ],
+  itemIds: () => movable.map((container) => container.id),
+  itemLabel: (id) => containersById.get(id)?.label,
+  allowSameContainerReorder: () => true,
+  enabled: () => reorderContainers && oncontainermove !== undefined,
+  orientation: () => 'vertical',
+  announce: itemMessage,
+  focusTarget: (element) =>
+    Array.from(element.children)
+      .find((child) => child.tagName === 'HEADER')
+      ?.querySelector<HTMLElement>('[data-smrt-sortable-handle="container"]') ??
+    null,
+  async commit(move) {
+    const moving = containersById.get(move.itemId);
+    if (!moving) return;
+    await oncontainermove?.({
+      container: moving,
+      source: move.source.index,
+      target: move.target.index,
+    });
+  },
+});
+
+/** Items of `containerId` with the drop marker's slot, for rendering. */
+function markerBefore(containerId: string, rank: number): boolean {
+  const target = itemSortable.drag?.target;
+  return target?.containerId === containerId && target.index === rank;
+}
+
+function nonDraggedRank(list: readonly Item[], index: number): number {
+  const dragged = itemSortable.drag?.itemId;
+  let rank = 0;
+  for (let i = 0; i < index; i += 1) if (list[i].id !== dragged) rank += 1;
+  return rank;
+}
+
+function containerMarkerBefore(rank: number): boolean {
+  return containerSortable.drag?.target.index === rank;
+}
+
+function containerRank(id: string): number {
+  const dragged = containerSortable.drag?.itemId;
+  let rank = 0;
+  for (const container of movable) {
+    if (container.id === id) break;
+    if (container.id !== dragged) rank += 1;
+  }
+  return rank;
+}
+</script>
+
+{#snippet containerBody(container: Container)}
+  {@const list = itemsByContainer.get(container.id) ?? []}
+  {@const dragged = itemSortable.drag?.itemId}
+  {@const count = list.length}
+  <div
+    class="smrt-sortable__items"
+    role="list"
+    aria-label={t(M['ui.sortable.group'], { label: container.label, count })}
+  >
+    {#each list as entry, index (entry.id)}
+      {#if markerBefore(container.id, nonDraggedRank(list, index)) && entry.id !== dragged}
+        <div class="smrt-sortable__marker" aria-hidden="true"></div>
+      {/if}
+      <div
+        role="listitem"
+        class="smrt-sortable__item"
+        class:smrt-sortable__item--dragging={dragged === entry.id}
+        data-smrt-sortable-item-id={entry.id}
+        ondragover={(event) => event.preventDefault()}
+        ondrop={(event) => {
+          if (!itemSortable.drag) return;
+          event.stopPropagation();
+          itemSortable.dropOnItem(event, container.id, index);
+        }}
+      >
+        <!-- raw-primitive-allow: native button owns keyboard pickup and HTML drag/drop -->
+        <button
+          type="button"
+          class="smrt-sortable__handle"
+          data-smrt-sortable-handle="item"
+          draggable={itemSortable.nativeDraggable}
+          aria-label={t(M['ui.sortable.move'], { item: entry.label })}
+          aria-pressed={dragged === entry.id}
+          aria-describedby={dragged === entry.id ? itemLiveId : undefined}
+          onclick={() => itemSortable.consumeClick(entry.id)}
+          onkeydown={(event) => itemSortable.keydown(event, entry.id)}
+          onblur={(event) => itemSortable.blur(event, entry.id)}
+          onpointerdown={(event) => itemSortable.pointerDown(event, entry.id)}
+          onpointermove={(event) => itemSortable.pointerMove(event)}
+          onpointerup={(event) => itemSortable.pointerUp(event)}
+          onpointercancel={(event) => itemSortable.pointerCancel(event)}
+          ondragstart={(event) => itemSortable.dragStart(event, entry.id)}
+          ondragend={() => itemSortable.dragEnd()}
+        ><span aria-hidden="true">⠿</span></button>
+        <div class="smrt-sortable__content">
+          {@render itemSnippet({
+            item: entry,
+            container,
+            index,
+            isDragging: dragged === entry.id,
+          })}
+        </div>
+      </div>
+    {:else}
+      <div role="listitem" class="smrt-sortable__empty">
+        {t(M['ui.sortable.empty'], { container: container.label })}
+      </div>
+    {/each}
+    {#if markerBefore(container.id, list.filter((entry) => entry.id !== dragged).length)}
+      <div class="smrt-sortable__marker" aria-hidden="true"></div>
+    {/if}
+  </div>
+{/snippet}
+
+{#snippet containerBlock(container: Container, sortableContainer: boolean)}
+  {@const count = (itemsByContainer.get(container.id) ?? []).length}
+  {@const draggingContainer = containerSortable.drag?.itemId === container.id}
+  <section
+    class="smrt-sortable__container"
+    class:smrt-sortable__container--disabled={container.disabled}
+    class:smrt-sortable__container--dragging={draggingContainer}
+    data-smrt-sortable-container-id={container.id}
+    data-smrt-sortable-container-item={sortableContainer ? container.id : undefined}
+    aria-label={container.label}
+    ondragover={(event) => event.preventDefault()}
+    ondrop={(event) => {
+      if (itemSortable.drag) {
+        itemSortable.dropOnContainer(event, container.id);
+      } else if (sortableContainer) {
+        containerSortable.dropOnItem(
+          event,
+          LIST_ID,
+          movable.findIndex((candidate) => candidate.id === container.id),
+        );
+      }
+    }}
+  >
+    <header class="smrt-sortable__header">
+      {#if sortableContainer}
+        <!-- raw-primitive-allow: native button owns keyboard pickup and HTML drag/drop -->
+        <button
+          type="button"
+          class="smrt-sortable__handle"
+          data-smrt-sortable-handle="container"
+          draggable={containerSortable.nativeDraggable}
+          aria-label={t(M['ui.sortable.move'], { item: container.label })}
+          aria-pressed={draggingContainer}
+          aria-describedby={draggingContainer ? containerLiveId : undefined}
+          onclick={() => containerSortable.consumeClick(container.id)}
+          onkeydown={(event) => containerSortable.keydown(event, container.id)}
+          onblur={(event) => containerSortable.blur(event, container.id)}
+          onpointerdown={(event) => containerSortable.pointerDown(event, container.id)}
+          onpointermove={(event) => containerSortable.pointerMove(event)}
+          onpointerup={(event) => containerSortable.pointerUp(event)}
+          onpointercancel={(event) => containerSortable.pointerCancel(event)}
+          ondragstart={(event) => containerSortable.dragStart(event, container.id)}
+          ondragend={() => containerSortable.dragEnd()}
+        ><span aria-hidden="true">⠿</span></button>
+      {/if}
+      <div class="smrt-sortable__content">
+        {#if containerHeader}
+          {@render containerHeader({ container, count, isDragging: draggingContainer })}
+        {:else}
+          <strong>{container.label}</strong>
+        {/if}
+      </div>
+    </header>
+    {@render containerBody(container)}
+  </section>
+{/snippet}
+
+<div
+  bind:this={root}
+  class="smrt-sortable"
+  role="group"
+  aria-label={label ?? t(M['ui.sortable.label'])}
+>
+  {#each fixed as container (container.id)}
+    {@render containerBlock(container, false)}
+  {/each}
+  {#if reorderContainers}
+    <div
+      class="smrt-sortable__containers"
+      role="list"
+      data-smrt-sortable-container-list={LIST_ID}
+    >
+      {#each movable as container (container.id)}
+        {#if containerMarkerBefore(containerRank(container.id)) && containerSortable.drag?.itemId !== container.id}
+          <div class="smrt-sortable__marker" aria-hidden="true"></div>
+        {/if}
+        <div role="listitem" class="smrt-sortable__container-slot">
+          {@render containerBlock(container, true)}
+        </div>
+      {/each}
+      {#if containerMarkerBefore(movable.filter((c) => c.id !== containerSortable.drag?.itemId).length)}
+        <div class="smrt-sortable__marker" aria-hidden="true"></div>
+      {/if}
+    </div>
+  {:else}
+    {#each movable as container (container.id)}
+      {@render containerBlock(container, false)}
+    {/each}
+  {/if}
+  <div id={itemLiveId} class="smrt-sortable__live" aria-live="assertive" aria-atomic="true">{itemSortable.announcement}</div>
+  <div id={containerLiveId} class="smrt-sortable__live" aria-live="assertive" aria-atomic="true">{containerSortable.announcement}</div>
+</div>
+
+<style>
+  .smrt-sortable { display: grid; gap: var(--smrt-spacing-3); min-width: 0; position: relative; }
+  .smrt-sortable__containers { display: grid; gap: var(--smrt-spacing-3); }
+  .smrt-sortable__container { display: grid; gap: var(--smrt-spacing-2); padding: var(--smrt-spacing-3); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-md); background: var(--smrt-color-surface-container); min-width: 0; }
+  .smrt-sortable__container--disabled { opacity: 0.6; }
+  .smrt-sortable__container--dragging { opacity: 0.55; }
+  .smrt-sortable__header { display: flex; align-items: center; gap: var(--smrt-spacing-2); min-block-size: 2.25rem; }
+  .smrt-sortable__content { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--smrt-spacing-2); }
+  .smrt-sortable__items { display: grid; gap: var(--smrt-spacing-1); min-block-size: 2.25rem; }
+  .smrt-sortable__item { display: flex; align-items: center; gap: var(--smrt-spacing-2); padding: var(--smrt-spacing-1) var(--smrt-spacing-2); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-sm); background: var(--smrt-color-surface); min-width: 0; }
+  .smrt-sortable__item--dragging { opacity: 0.55; }
+  .smrt-sortable__handle { display: inline-grid; place-items: center; flex: 0 0 auto; inline-size: 2rem; block-size: 2rem; padding: 0; border: 0; border-radius: var(--smrt-radius-sm); background: transparent; color: var(--smrt-color-on-surface-variant); cursor: grab; touch-action: none; }
+  .smrt-sortable__handle:active { cursor: grabbing; }
+  .smrt-sortable__handle:hover { background: var(--smrt-color-surface-container-high); }
+  .smrt-sortable__handle:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
+  .smrt-sortable__handle[aria-pressed='true'] { background: var(--smrt-color-primary-container, var(--smrt-color-surface-container-high)); color: var(--smrt-color-on-primary-container, inherit); }
+  .smrt-sortable__marker { block-size: 0.1875rem; border-radius: var(--smrt-radius-full); background: var(--smrt-color-primary); }
+  .smrt-sortable__empty { margin: 0; padding: var(--smrt-spacing-2); color: var(--smrt-color-on-surface-variant); font: var(--smrt-typography-body-small-font); }
+  .smrt-sortable__live { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
+</style>

package/dist/components/sortable/Sortable.svelte.d.ts

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

package/dist/components/sortable/Sortable.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sortable.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/Sortable.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACd,MAAM,YAAY,CAAC;AACpB,iBAAS,QAAQ,CAAC,IAAI,SAAS,YAAY,EAAE,SAAS,SAAS,iBAAiB;WAiRnD,aAAa,CAAC,IAAI,EAAE,SAAS,CAAC;;;;;EAA4E;AACvI,cAAM,iBAAiB,CAAC,IAAI,SAAS,YAAY,EAAC,SAAS,SAAS,iBAAiB;IACjF,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;IAC7D,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC/D,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;IAC7D,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,IAAI,SAAS,YAAY,EAAC,SAAS,SAAS,iBAAiB,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACtgB,CAAC,IAAI,SAAS,YAAY,EAAC,SAAS,SAAS,iBAAiB,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACjN,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,EAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACrE;AACD,QAAA,MAAM,QAAQ,EAAE,qBAAmC,CAAC;AAClC,KAAK,QAAQ,CAAC,IAAI,SAAS,YAAY,EAAC,SAAS,SAAS,iBAAiB,IAAI,YAAY,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,CAAC;AAC/H,eAAe,QAAQ,CAAC"}

package/dist/components/sortable/controller.svelte.d.ts

@@ -0,0 +1,152 @@
+/** Where an item sits: a container and a zero-based index within it. */
+export interface SortablePosition {
+    containerId: string;
+    index: number;
+}
+/**
+ * A drop, as ids. `target.index` is counted after removing the item from
+ * `source`, so it is directly usable with an immutable list update.
+ */
+export interface SortableMove {
+    itemId: string;
+    source: SortablePosition;
+    target: SortablePosition;
+}
+/** The minimum a container exposes to the engine. */
+export interface SortableContainerInfo {
+    id: string;
+    label: string;
+    /** Items cannot be dropped into a disabled container. */
+    disabled?: boolean;
+}
+/** What the engine wants announced; the host turns it into localized text. */
+export type SortableAnnouncement = {
+    type: 'pickup';
+    item: string;
+    destinations: string[];
+} | {
+    type: 'position';
+    item: string;
+    container: string;
+    position: number;
+    count: number;
+} | {
+    type: 'unavailable';
+    container: string;
+} | {
+    type: 'failed';
+    item: string;
+} | {
+    type: 'drop';
+    item: string;
+    container: string;
+    position: number;
+    count: number;
+} | {
+    type: 'cancel';
+    item: string;
+};
+/** How the host marks its DOM so pointer hit-testing can find ids. */
+export interface SortableSelectors {
+    /** CSS selector of a container's list element. */
+    container: string;
+    /** `dataset` key holding the container id. */
+    containerKey: string;
+    /** CSS selector of an item element. */
+    item: string;
+    /** `dataset` key holding the item id. */
+    itemKey: string;
+}
+export interface SortableControllerOptions {
+    /** The element hit-testing is confined to (never escapes it). */
+    root: () => HTMLElement | undefined;
+    selectors: SortableSelectors;
+    containers: () => readonly SortableContainerInfo[];
+    /** Ids in a container, in display order. */
+    itemIds: (containerId: string) => readonly string[];
+    /** Accessible label of an item, or `undefined` when it no longer exists. */
+    itemLabel: (itemId: string) => string | undefined;
+    /** Whether items may be reordered within their current container. */
+    allowSameContainerReorder: () => boolean;
+    /** Whether moving is allowed at all (e.g. a read-only list is not). */
+    enabled: () => boolean;
+    /**
+     * `horizontal` (default): Left/Right choose the container, Up/Down the
+     * position. `vertical`: Up/Down walk the whole list, crossing into the
+     * adjacent container at either end.
+     */
+    orientation?: () => 'horizontal' | 'vertical';
+    /**
+     * Persist a move. May be async; a rejection restores the presentation and
+     * is announced. The engine allows the next move only after it settles.
+     */
+    commit: (move: SortableMove) => void | Promise<void>;
+    announce: (announcement: SortableAnnouncement) => string;
+    /** Element to focus for an item (default: the item element itself). */
+    focusTarget?: (itemElement: HTMLElement) => HTMLElement | null;
+}
+interface DragState {
+    itemId: string;
+    source: SortablePosition;
+    target: SortablePosition;
+    mode: 'keyboard' | 'pointer';
+}
+export declare class SortableController {
+    private readonly options;
+    drag: DragState | undefined;
+    announcement: string;
+    private focusItemId;
+    private suppressedSelectionId;
+    private pending;
+    private pointerSession;
+    constructor(options: SortableControllerOptions);
+    /** Whether a new move may start now. */
+    get movable(): boolean;
+    /** Whether native HTML drag should be offered (not while a pointer session runs). */
+    get nativeDraggable(): boolean;
+    private get containers();
+    private itemsIn;
+    private findContainer;
+    private positionFor;
+    private label;
+    private say;
+    pickup(itemId: string, mode: DragState['mode']): void;
+    private announcePosition;
+    private moveKeyboardTarget;
+    drop(): Promise<void>;
+    /** Cancel the move in flight. Focus returns to the item when `restoreFocus`. */
+    cancel(announce?: boolean, restoreFocus?: boolean): void;
+    private suppressSelection;
+    /**
+     * Keyboard pick-up and native drag gestures can both dispatch a click after
+     * their key/pointer sequence. Returns `true` when this click must be
+     * consumed so a move never doubles as an application-level activation.
+     */
+    consumeClick(itemId: string): boolean;
+    keydown(event: KeyboardEvent, itemId: string): void;
+    /**
+     * Focus left the item while a keyboard move was in flight: abandon it so
+     * the item is not left "picked up" with no way to steer it.
+     */
+    blur(event: FocusEvent, itemId: string): void;
+    dragStart(event: DragEvent, itemId: string): void;
+    dragEnd(): void;
+    pointerDown(event: PointerEvent, itemId: string): void;
+    private elementAtPointer;
+    private setPointerTargetFromElement;
+    /** Index to insert at when hovering item `rawIndex`, after removing the dragged item. */
+    private insertionIndex;
+    private finishPointerSession;
+    pointerUp(event: PointerEvent): void;
+    pointerCancel(event: PointerEvent): void;
+    pointerMove(event: PointerEvent): void;
+    private pointerTarget;
+    /** Native drop on an item (`rawIndex` is its index in its container). */
+    dropOnItem(event: DragEvent, containerId: string, rawIndex: number): void;
+    /** Native drop on a container's empty space: append. */
+    dropOnContainer(event: DragEvent, containerId: string): void;
+}
+/** Create a controller; call during component initialization. */
+export declare function createSortable(options: SortableControllerOptions): SortableController;
+export {};
+//# sourceMappingURL=controller.svelte.d.ts.map

package/dist/components/sortable/controller.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"controller.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/controller.svelte.ts"],"names":[],"mappings":"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"}