@lostgradient/cinder 0.6.0 → 0.7.0

package/src/_internal/strict-stable-context.ts

@@ -0,0 +1,27 @@
+import { getContext, setContext } from 'svelte';
+
+/**
+ * Create a required context pair keyed by a stable package-level symbol.
+ *
+ * Use this only when a public parent/leaf family can be loaded through separate
+ * package entries in the same app. Svelte's `createContext` intentionally owns
+ * an unexported per-module key; a stable key keeps split package entries on the
+ * same context channel while preserving the strict getter contract.
+ */
+export function strictStableContext<T>(
+  key: string,
+  missingMessage: string,
+): [getContextStrict: () => T, setContextStrict: (context: T) => T] {
+  const contextKey = Symbol.for(key);
+
+  return [
+    () => {
+      const context = getContext<T | undefined>(contextKey);
+      if (context === undefined) {
+        throw new Error(`missing_context: ${missingMessage}`);
+      }
+      return context;
+    },
+    (context: T) => setContext(contextKey, context),
+  ];
+}

package/src/_internal/tree-drag-controller.svelte.ts

@@ -1,328 +1,269 @@
-import type { TreeNodeRegistration } from './tree-registry.svelte.ts';
-
-export type TreeDropPosition = 'before' | 'after' | 'child';
-
-export type TreeDropTarget = {
-  id: string;
-  position: TreeDropPosition;
-};
-
-export type TreeReorderTarget = TreeDropTarget & {
-  fromParentId: string | null;
-  toParentId: string | null;
-};
-
-export type TreeDragSource = 'keyboard' | 'pointer';
-
-export type TreeMoveNode = {
-  id: string;
-  parentId: string | null;
-};
-
-type TreeDragControllerOptions = {
-  getVisibleIds: () => readonly string[];
-  getNode: (id: string) => TreeNodeRegistration | undefined;
-  getParentId: (id: string) => string | null | undefined;
-  isBranch: (id: string) => boolean;
-  focus: (id: string) => void;
-  announce: (message: string) => void;
-  commit: (draggedId: string, target: TreeReorderTarget) => void;
-};
-
-function reversedVisibleIds(visibleIds: readonly string[]): string[] {
-  const reversedIds: string[] = [];
-  for (let index = visibleIds.length - 1; index >= 0; index -= 1) {
-    const id = visibleIds[index];
-    if (id !== undefined) reversedIds.push(id);
-  }
-  return reversedIds;
+function reversedVisibleIds(visibleIds) {
+    const reversedIds = [];
+    for (let index = visibleIds.length - 1; index >= 0; index -= 1) {
+        const id = visibleIds[index];
+        if (id !== undefined)
+            reversedIds.push(id);
+    }
+    return reversedIds;
 }
-
 export class TreeDragController {
-  phase = $state<'idle' | 'dragging'>('idle');
-  draggedId = $state<string | null>(null);
-  dropTarget = $state<TreeDropTarget | null>(null);
-  dragSource = $state<TreeDragSource | null>(null);
-
-  readonly #options: TreeDragControllerOptions;
-
-  constructor(options: TreeDragControllerOptions) {
-    this.#options = options;
-  }
-
-  get dragging(): boolean {
-    return this.phase === 'dragging';
-  }
-
-  get pointerDragging(): boolean {
-    return this.dragging && this.dragSource === 'pointer';
-  }
-
-  isDragging(id: string): boolean {
-    return this.draggedId === id;
-  }
-
-  isDropTarget(id: string, position?: TreeDropPosition): boolean {
-    if (this.dropTarget?.id !== id) return false;
-    return position === undefined || this.dropTarget.position === position;
-  }
-
-  lift(id: string, source: TreeDragSource): void {
-    if (this.phase !== 'idle') return;
-    this.phase = 'dragging';
-    this.draggedId = id;
-    this.dropTarget = null;
-    this.dragSource = source;
-    const visibleIds = this.#options.getVisibleIds();
-    const position = Math.max(1, visibleIds.indexOf(id) + 1);
-    this.#options.announce(
-      `${this.#labelFor(id)}, lifted. Position ${position} of ${visibleIds.length} ${this.#parentPhrase(id)}. Arrow keys to move, Space to drop, Escape to cancel.`,
-    );
-  }
-
-  moveBy(delta: 1 | -1): void {
-    if (this.phase !== 'dragging' || !this.draggedId) return;
-    const visibleIds = this.#options.getVisibleIds();
-    if (visibleIds.length === 0) return;
-    const currentId = this.dropTarget?.id ?? this.draggedId;
-    const currentIndex = this.#currentVisibleIndex(currentId, visibleIds);
-    if (currentIndex < 0) return;
-    let nextIndex = currentIndex + delta;
-    while (nextIndex >= 0 && nextIndex < visibleIds.length) {
-      const nextId = visibleIds[nextIndex];
-      const target: TreeDropTarget | null = nextId
-        ? { id: nextId, position: delta > 0 ? 'after' : 'before' }
-        : null;
-      if (target && this.#setValidDropTarget(target)) {
-        this.#options.announce(
-          `${this.#labelFor(this.draggedId)}, moved ${this.#targetPhrase(target)}.`,
-        );
-        return;
-      }
-      nextIndex += delta;
+    phase = $state('idle');
+    draggedId = $state(null);
+    dropTarget = $state(null);
+    dragSource = $state(null);
+    #options;
+    constructor(options) {
+        this.#options = options;
+    }
+    get dragging() {
+        return this.phase === 'dragging';
+    }
+    get pointerDragging() {
+        return this.dragging && this.dragSource === 'pointer';
+    }
+    isDragging(id) {
+        return this.draggedId === id;
+    }
+    isDropTarget(id, position) {
+        if (this.dropTarget?.id !== id)
+            return false;
+        return position === undefined || this.dropTarget.position === position;
+    }
+    lift(id, source) {
+        if (this.phase !== 'idle')
+            return;
+        this.phase = 'dragging';
+        this.draggedId = id;
+        this.dropTarget = null;
+        this.dragSource = source;
+        const visibleIds = this.#options.getVisibleIds();
+        const position = Math.max(1, visibleIds.indexOf(id) + 1);
+        this.#options.announce(`${this.#labelFor(id)}, lifted. Position ${position} of ${visibleIds.length} ${this.#parentPhrase(id)}. Arrow keys to move, Space to drop, Escape to cancel.`);
+    }
+    moveBy(delta) {
+        if (this.phase !== 'dragging' || !this.draggedId)
+            return;
+        const visibleIds = this.#options.getVisibleIds();
+        if (visibleIds.length === 0)
+            return;
+        const currentId = this.dropTarget?.id ?? this.draggedId;
+        const currentIndex = this.#currentVisibleIndex(currentId, visibleIds);
+        if (currentIndex < 0)
+            return;
+        let nextIndex = currentIndex + delta;
+        while (nextIndex >= 0 && nextIndex < visibleIds.length) {
+            const nextId = visibleIds[nextIndex];
+            const target = nextId
+                ? { id: nextId, position: delta > 0 ? 'after' : 'before' }
+                : null;
+            if (target && this.#setValidDropTarget(target)) {
+                this.#options.announce(`${this.#labelFor(this.draggedId)}, moved ${this.#targetPhrase(target)}.`);
+                return;
+            }
+            nextIndex += delta;
+        }
+    }
+    moveToEdge(edge) {
+        if (this.phase !== 'dragging' || !this.draggedId)
+            return;
+        const visibleIds = this.#options.getVisibleIds();
+        const candidates = edge === 'first' ? visibleIds : reversedVisibleIds(visibleIds);
+        for (const targetId of candidates) {
+            const target = {
+                id: targetId,
+                position: edge === 'first' ? 'before' : 'after',
+            };
+            if (this.#setValidDropTarget(target)) {
+                this.#options.announce(`${this.#labelFor(this.draggedId)}, moved ${this.#targetPhrase(target)}.`);
+                return;
+            }
+        }
+    }
+    moveIntoPreviousBranch() {
+        if (this.phase !== 'dragging' || !this.draggedId)
+            return;
+        const visibleIds = this.#options.getVisibleIds();
+        const currentId = this.dropTarget?.id ?? this.draggedId;
+        const currentIndex = this.#currentVisibleIndex(currentId, visibleIds);
+        if (currentIndex < 0)
+            return;
+        const before = reversedVisibleIds(visibleIds.slice(0, Math.max(0, currentIndex)));
+        const branchId = before.find((id) => this.#isValidDropTarget({ id, position: 'child' }) && this.#options.isBranch(id));
+        if (!branchId || !this.#setValidDropTarget({ id: branchId, position: 'child' }))
+            return;
+        this.#options.announce(`${this.#labelFor(this.draggedId)}, moved into ${this.#labelFor(branchId)}.`);
+    }
+    moveOut() {
+        if (this.phase !== 'dragging' || !this.draggedId)
+            return;
+        const parentId = this.#options.getParentId(this.draggedId);
+        if (!parentId)
+            return;
+        if (!this.#setValidDropTarget({ id: parentId, position: 'after' }))
+            return;
+        this.#options.announce(`${this.#labelFor(this.draggedId)}, moved out after ${this.#labelFor(parentId)}.`);
     }
-  }
-
-  moveToEdge(edge: 'first' | 'last'): void {
-    if (this.phase !== 'dragging' || !this.draggedId) return;
-    const visibleIds = this.#options.getVisibleIds();
-    const candidates = edge === 'first' ? visibleIds : reversedVisibleIds(visibleIds);
-    for (const targetId of candidates) {
-      const target: TreeDropTarget = {
-        id: targetId,
-        position: edge === 'first' ? 'before' : 'after',
-      };
-      if (this.#setValidDropTarget(target)) {
-        this.#options.announce(
-          `${this.#labelFor(this.draggedId)}, moved ${this.#targetPhrase(target)}.`,
-        );
-        return;
-      }
+    setDropTarget(target) {
+        if (this.phase !== 'dragging')
+            return;
+        this.#setValidDropTarget(target);
     }
-  }
-
-  moveIntoPreviousBranch(): void {
-    if (this.phase !== 'dragging' || !this.draggedId) return;
-    const visibleIds = this.#options.getVisibleIds();
-    const currentId = this.dropTarget?.id ?? this.draggedId;
-    const currentIndex = this.#currentVisibleIndex(currentId, visibleIds);
-    if (currentIndex < 0) return;
-    const before = reversedVisibleIds(visibleIds.slice(0, Math.max(0, currentIndex)));
-    const branchId = before.find(
-      (id) => this.#isValidDropTarget({ id, position: 'child' }) && this.#options.isBranch(id),
-    );
-    if (!branchId || !this.#setValidDropTarget({ id: branchId, position: 'child' })) return;
-    this.#options.announce(
-      `${this.#labelFor(this.draggedId)}, moved into ${this.#labelFor(branchId)}.`,
-    );
-  }
-
-  moveOut(): void {
-    if (this.phase !== 'dragging' || !this.draggedId) return;
-    const parentId = this.#options.getParentId(this.draggedId);
-    if (!parentId) return;
-    if (!this.#setValidDropTarget({ id: parentId, position: 'after' })) return;
-    this.#options.announce(
-      `${this.#labelFor(this.draggedId)}, moved out after ${this.#labelFor(parentId)}.`,
-    );
-  }
-
-  setDropTarget(target: TreeDropTarget | null): void {
-    if (this.phase !== 'dragging') return;
-    this.#setValidDropTarget(target);
-  }
-
-  drop(): void {
-    if (this.phase !== 'dragging' || !this.draggedId) return;
-    if (!this.#isValidDropTarget(this.dropTarget)) {
-      const focusId = this.draggedId;
-      this.#options.announce(`${this.#labelFor(focusId)}, no reorder target selected.`);
-      this.#reset();
-      this.#options.focus(focusId);
-      return;
+    drop() {
+        if (this.phase !== 'dragging' || !this.draggedId)
+            return;
+        if (!this.#isValidDropTarget(this.dropTarget)) {
+            const focusId = this.draggedId;
+            this.#options.announce(`${this.#labelFor(focusId)}, no reorder target selected.`);
+            this.#reset();
+            this.#options.focus(focusId);
+            return;
+        }
+        const target = this.#reorderTarget(this.draggedId, this.dropTarget);
+        this.#options.commit(this.draggedId, target);
+        this.#options.announce(`${this.#labelFor(this.draggedId)}, dropped ${this.#targetPhrase(this.dropTarget)}.`);
+        const focusId = this.draggedId;
+        this.#reset();
+        this.#options.focus(focusId);
     }
-    const target = this.#reorderTarget(this.draggedId, this.dropTarget);
-    this.#options.commit(this.draggedId, target);
-    this.#options.announce(
-      `${this.#labelFor(this.draggedId)}, dropped ${this.#targetPhrase(this.dropTarget)}.`,
-    );
-    const focusId = this.draggedId;
-    this.#reset();
-    this.#options.focus(focusId);
-  }
-
-  cancel(): void {
-    if (this.phase !== 'dragging') return;
-    const focusId = this.draggedId;
-    const label = focusId ? this.#labelFor(focusId) : 'Item';
-    this.#options.announce(`${label}, reorder cancelled.`);
-    this.#reset();
-    if (focusId) this.#options.focus(focusId);
-  }
-
-  targetFromPointer(pointerY: number, element: HTMLElement): TreeDropTarget | null {
-    const item = element.closest<HTMLElement>('[data-cinder-tree-item-id]');
-    if (!item) return null;
-    const id = item.dataset['cinderTreeItemId'];
-    if (!id || id === this.draggedId) return null;
-    const rect = item.getBoundingClientRect();
-    const offset = pointerY - rect.top;
-    const topThreshold = rect.height * 0.25;
-    const bottomThreshold = rect.height * 0.75;
-    const target =
-      offset < topThreshold
-        ? { id, position: 'before' as const }
-        : offset > bottomThreshold
-          ? { id, position: 'after' as const }
-          : this.#options.isBranch(id)
-            ? { id, position: 'child' as const }
-            : { id, position: 'after' as const };
-    return this.#isValidDropTarget(target) ? target : null;
-  }
-
-  #setValidDropTarget(target: TreeDropTarget | null): boolean {
-    if (!target) {
-      this.dropTarget = null;
-      return true;
+    cancel() {
+        if (this.phase !== 'dragging')
+            return;
+        const focusId = this.draggedId;
+        const label = focusId ? this.#labelFor(focusId) : 'Item';
+        this.#options.announce(`${label}, reorder cancelled.`);
+        this.#reset();
+        if (focusId)
+            this.#options.focus(focusId);
     }
-    if (!this.#isValidDropTarget(target)) return false;
-    this.dropTarget = target;
-    return true;
-  }
-
-  #isValidDropTarget(target: TreeDropTarget | null): target is TreeDropTarget {
-    if (!this.draggedId || !target || target.id === this.draggedId) return false;
-    let currentId: string | null | undefined = target.id;
-    while (currentId) {
-      if (currentId === this.draggedId) return false;
-      currentId = this.#options.getParentId(currentId);
+    targetFromPointer(pointerY, element) {
+        const item = element.closest('[data-cinder-tree-item-id]');
+        if (!item)
+            return null;
+        const id = item.dataset['cinderTreeItemId'];
+        if (!id || id === this.draggedId)
+            return null;
+        const rect = item.getBoundingClientRect();
+        const offset = pointerY - rect.top;
+        const topThreshold = rect.height * 0.25;
+        const bottomThreshold = rect.height * 0.75;
+        const target = offset < topThreshold
+            ? { id, position: 'before' }
+            : offset > bottomThreshold
+                ? { id, position: 'after' }
+                : this.#options.isBranch(id)
+                    ? { id, position: 'child' }
+                    : { id, position: 'after' };
+        return this.#isValidDropTarget(target) ? target : null;
+    }
+    #setValidDropTarget(target) {
+        if (!target) {
+            this.dropTarget = null;
+            return true;
+        }
+        if (!this.#isValidDropTarget(target))
+            return false;
+        this.dropTarget = target;
+        return true;
+    }
+    #isValidDropTarget(target) {
+        if (!this.draggedId || !target || target.id === this.draggedId)
+            return false;
+        let currentId = target.id;
+        while (currentId) {
+            if (currentId === this.draggedId)
+                return false;
+            currentId = this.#options.getParentId(currentId);
+        }
+        return true;
+    }
+    #reorderTarget(draggedId, dropTarget) {
+        const fromParentId = this.#options.getParentId(draggedId) ?? null;
+        const toParentId = dropTarget.position === 'child'
+            ? dropTarget.id
+            : (this.#options.getParentId(dropTarget.id) ?? null);
+        return { ...dropTarget, fromParentId, toParentId };
+    }
+    #labelFor(id) {
+        return this.#options.getNode(id)?.label() ?? id;
+    }
+    #parentPhrase(id) {
+        const parentId = this.#options.getParentId(id);
+        return parentId ? `in ${this.#labelFor(parentId)}` : 'in root';
+    }
+    #targetPhrase(target) {
+        if (target.position === 'child')
+            return `into ${this.#labelFor(target.id)}`;
+        return `${target.position} ${this.#labelFor(target.id)}`;
+    }
+    #currentVisibleIndex(currentId, visibleIds) {
+        const currentIndex = visibleIds.indexOf(currentId);
+        if (currentIndex !== -1)
+            return currentIndex;
+        return this.draggedId ? visibleIds.indexOf(this.draggedId) : -1;
+    }
+    #reset() {
+        this.phase = 'idle';
+        this.draggedId = null;
+        this.dropTarget = null;
+        this.dragSource = null;
     }
-    return true;
-  }
-
-  #reorderTarget(draggedId: string, dropTarget: TreeDropTarget): TreeReorderTarget {
-    const fromParentId = this.#options.getParentId(draggedId) ?? null;
-    const toParentId =
-      dropTarget.position === 'child'
-        ? dropTarget.id
-        : (this.#options.getParentId(dropTarget.id) ?? null);
-    return { ...dropTarget, fromParentId, toParentId };
-  }
-
-  #labelFor(id: string): string {
-    return this.#options.getNode(id)?.label() ?? id;
-  }
-
-  #parentPhrase(id: string): string {
-    const parentId = this.#options.getParentId(id);
-    return parentId ? `in ${this.#labelFor(parentId)}` : 'in root';
-  }
-
-  #targetPhrase(target: TreeDropTarget): string {
-    if (target.position === 'child') return `into ${this.#labelFor(target.id)}`;
-    return `${target.position} ${this.#labelFor(target.id)}`;
-  }
-
-  #currentVisibleIndex(currentId: string, visibleIds: readonly string[]): number {
-    const currentIndex = visibleIds.indexOf(currentId);
-    if (currentIndex !== -1) return currentIndex;
-    return this.draggedId ? visibleIds.indexOf(this.draggedId) : -1;
-  }
-
-  #reset(): void {
-    this.phase = 'idle';
-    this.draggedId = null;
-    this.dropTarget = null;
-    this.dragSource = null;
-  }
 }
-
-export function moveTreeNode<Node extends TreeMoveNode>(
-  nodes: Node[],
-  draggedId: string,
-  target: TreeDropTarget,
-): Node[] {
-  const dragged = nodes.find((node) => node.id === draggedId);
-  const targetNode = nodes.find((node) => node.id === target.id);
-  if (!dragged || !targetNode) return unchangedMoveResult(nodes);
-
-  const subtreeIds = descendantIds(nodes, draggedId);
-  subtreeIds.add(draggedId);
-  if (subtreeIds.has(target.id)) return unchangedMoveResult(nodes);
-
-  const withoutSubtree = nodes.filter((node) => !subtreeIds.has(node.id));
-  const subtree = nodes.filter((node) => subtreeIds.has(node.id));
-  const nextParentId = target.position === 'child' ? target.id : targetNode.parentId;
-  const movedSubtree = subtree.map((node) =>
-    node.id === draggedId ? ({ ...node, parentId: nextParentId } as Node) : node,
-  );
-
-  const insertionIndex = insertionIndexFor(withoutSubtree, target);
-  const nextNodes = [
-    ...withoutSubtree.slice(0, insertionIndex),
-    ...movedSubtree,
-    ...withoutSubtree.slice(insertionIndex),
-  ];
-  if (dragged.parentId === nextParentId && hasSameNodeOrder(nodes, nextNodes)) {
-    return unchangedMoveResult(nodes);
-  }
-  return nextNodes;
+export function moveTreeNode(nodes, draggedId, target) {
+    const dragged = nodes.find((node) => node.id === draggedId);
+    const targetNode = nodes.find((node) => node.id === target.id);
+    if (!dragged || !targetNode)
+        return unchangedMoveResult(nodes);
+    const subtreeIds = descendantIds(nodes, draggedId);
+    subtreeIds.add(draggedId);
+    if (subtreeIds.has(target.id))
+        return unchangedMoveResult(nodes);
+    const withoutSubtree = nodes.filter((node) => !subtreeIds.has(node.id));
+    const subtree = nodes.filter((node) => subtreeIds.has(node.id));
+    const nextParentId = target.position === 'child' ? target.id : targetNode.parentId;
+    const movedSubtree = subtree.map((node) => node.id === draggedId ? { ...node, parentId: nextParentId } : node);
+    const insertionIndex = insertionIndexFor(withoutSubtree, target);
+    const nextNodes = [
+        ...withoutSubtree.slice(0, insertionIndex),
+        ...movedSubtree,
+        ...withoutSubtree.slice(insertionIndex),
+    ];
+    if (dragged.parentId === nextParentId && hasSameNodeOrder(nodes, nextNodes)) {
+        return unchangedMoveResult(nodes);
+    }
+    return nextNodes;
 }
-
-function unchangedMoveResult<Node extends TreeMoveNode>(nodes: Node[]): Node[] {
-  return nodes;
+function unchangedMoveResult(nodes) {
+    return nodes;
 }
-
-function hasSameNodeOrder(
-  currentNodes: readonly TreeMoveNode[],
-  nextNodes: readonly TreeMoveNode[],
-): boolean {
-  return (
-    currentNodes.length === nextNodes.length &&
-    currentNodes.every((node, index) => node.id === nextNodes[index]?.id)
-  );
+function hasSameNodeOrder(currentNodes, nextNodes) {
+    return (currentNodes.length === nextNodes.length &&
+        currentNodes.every((node, index) => node.id === nextNodes[index]?.id));
 }
-
-function descendantIds(nodes: readonly TreeMoveNode[], id: string): Set<string> {
-  const descendants = new Set<string>();
-  const visit = (parentId: string) => {
-    for (const node of nodes) {
-      if (node.parentId !== parentId || descendants.has(node.id)) continue;
-      descendants.add(node.id);
-      visit(node.id);
-    }
-  };
-  visit(id);
-  return descendants;
+function descendantIds(nodes, id) {
+    const descendants = new Set();
+    const visit = (parentId) => {
+        for (const node of nodes) {
+            if (node.parentId !== parentId || descendants.has(node.id))
+                continue;
+            descendants.add(node.id);
+            visit(node.id);
+        }
+    };
+    visit(id);
+    return descendants;
 }
-
-function insertionIndexFor(nodes: readonly TreeMoveNode[], target: TreeDropTarget): number {
-  const targetIndex = nodes.findIndex((node) => node.id === target.id);
-  if (targetIndex < 0) return nodes.length;
-  if (target.position === 'before') return targetIndex;
-  if (target.position === 'child') return targetIndex + 1;
-  const targetSubtree = descendantIds(nodes, target.id);
-  let index = targetIndex + 1;
-  while (index < nodes.length && targetSubtree.has(nodes[index]!.id)) index += 1;
-  return index;
+function insertionIndexFor(nodes, target) {
+    const targetIndex = nodes.findIndex((node) => node.id === target.id);
+    if (targetIndex < 0)
+        return nodes.length;
+    if (target.position === 'before')
+        return targetIndex;
+    if (target.position === 'child')
+        return targetIndex + 1;
+    const targetSubtree = descendantIds(nodes, target.id);
+    let index = targetIndex + 1;
+    while (index < nodes.length && targetSubtree.has(nodes[index].id))
+        index += 1;
+    return index;
 }