@lostgradient/cinder 0.2.0 → 0.3.0

package/src/_internal/anchored-overlay.svelte.ts

@@ -1,12 +1,4 @@
 import type { Middleware, Placement, ReferenceElement } from '@floating-ui/dom';
-import {
-  arrow as arrowMiddleware,
-  autoUpdate,
-  computePosition,
-  flip,
-  offset as offsetMiddleware,
-  shift,
-} from '@floating-ui/dom';
 
 export type AnchoredOverlayWidthMode = 'content' | 'match-anchor' | 'menu' | 'none';
 
@@ -80,6 +72,17 @@ function getArrowStyle(placement: Placement, data: { x?: number; y?: number } |
     .join(' ');
 }
 
+function reportAnchoredOverlaySetupError(error: unknown): void {
+  if (typeof globalThis.reportError === 'function') {
+    globalThis.reportError(error);
+    return;
+  }
+
+  setTimeout(() => {
+    throw error;
+  }, 0);
+}
+
 export function createAnchoredOverlay(options: AnchoredOverlayOptions) {
   let positionReady = $state(false);
   let positionStyle = $state('');
@@ -114,53 +117,74 @@ export function createAnchoredOverlay(options: AnchoredOverlayOptions) {
     const widthMode = options.widthMode?.() ?? 'content';
     let cancelled = false;
     let generation = 0;
+    let stopAutoUpdate: (() => void) | undefined;
+
+    void (async () => {
+      const {
+        arrow: arrowMiddleware,
+        autoUpdate,
+        computePosition,
+        flip,
+        offset: offsetMiddleware,
+        shift,
+      } = await import('@floating-ui/dom');
 
-    const middleware: Middleware[] = [
-      offsetMiddleware(offset),
-      flip(),
-      shift({ padding: shiftPadding, crossAxis: shiftCrossAxis }),
-    ];
-    if (showArrow && arrow) {
-      middleware.push(arrowMiddleware({ element: arrow, padding: arrowPadding }));
-    }
-
-    const stop = autoUpdate(anchor, panel, async () => {
       if (cancelled) return;
-      const currentGeneration = ++generation;
-      let result: Awaited<ReturnType<typeof computePosition>>;
-      try {
-        result = await computePosition(anchor, panel, {
-          placement,
-          middleware,
-          strategy: 'fixed',
-        });
-      } catch {
-        if (cancelled || currentGeneration !== generation) return;
-        positionReady = false;
-        positionStyle = '';
-        arrowStyle = '';
-        resolvedPlacement = placement;
-        return;
+
+      const middleware: Middleware[] = [
+        offsetMiddleware(offset),
+        flip(),
+        shift({ padding: shiftPadding, crossAxis: shiftCrossAxis }),
+      ];
+      if (showArrow && arrow) {
+        middleware.push(arrowMiddleware({ element: arrow, padding: arrowPadding }));
       }
-      if (cancelled || currentGeneration !== generation) return;
-
-      const widthStyle = getAnchoredOverlayWidthStyle(widthMode, anchor.getBoundingClientRect());
-      positionStyle = [
-        'position: fixed;',
-        `left: ${result.x}px;`,
-        `top: ${result.y}px;`,
-        widthStyle,
-      ]
-        .filter(Boolean)
-        .join(' ');
-      resolvedPlacement = result.placement;
-      arrowStyle = showArrow ? getArrowStyle(result.placement, result.middlewareData.arrow) : '';
-      positionReady = true;
+
+      stopAutoUpdate = autoUpdate(anchor, panel, async () => {
+        if (cancelled) return;
+        const currentGeneration = ++generation;
+        let result: Awaited<ReturnType<typeof computePosition>>;
+        try {
+          result = await computePosition(anchor, panel, {
+            placement,
+            middleware,
+            strategy: 'fixed',
+          });
+        } catch {
+          if (cancelled || currentGeneration !== generation) return;
+          positionReady = false;
+          positionStyle = '';
+          arrowStyle = '';
+          resolvedPlacement = placement;
+          return;
+        }
+        if (cancelled || currentGeneration !== generation) return;
+
+        const widthStyle = getAnchoredOverlayWidthStyle(widthMode, anchor.getBoundingClientRect());
+        positionStyle = [
+          'position: fixed;',
+          `left: ${result.x}px;`,
+          `top: ${result.y}px;`,
+          widthStyle,
+        ]
+          .filter(Boolean)
+          .join(' ');
+        resolvedPlacement = result.placement;
+        arrowStyle = showArrow ? getArrowStyle(result.placement, result.middlewareData.arrow) : '';
+        positionReady = true;
+      });
+    })().catch((error) => {
+      if (cancelled) return;
+      positionReady = false;
+      positionStyle = '';
+      arrowStyle = '';
+      resolvedPlacement = placement;
+      reportAnchoredOverlaySetupError(error);
     });
 
     return () => {
       cancelled = true;
-      stop();
+      stopAutoUpdate?.();
       positionReady = false;
       positionStyle = '';
       arrowStyle = '';

package/src/_internal/overlay.ts

@@ -78,23 +78,36 @@ export function useHydrated(): { value: boolean } {
  * Stack of ESC handlers. Top-most overlay handles ESC; lower overlays ignore
  * the event. Each overlay registers a handler on open and unregisters on close.
  *
- * The stack lives in module scope so all Cinder overlays share it. This is
- * fine for tests (each test runs against a fresh module instance) and fine
- * for production (a real app has at most a handful of stacked overlays at
- * once). The stack is also keyed-set semantics: pushing the same handler
- * twice is a no-op; popping a handler not on the stack is a no-op.
+ * The stack lives in module scope so all Cinder overlays share it. It persists
+ * for the lifetime of the JS module — under bun:test that means it is shared
+ * across every test in a file, so suites that leave handlers registered must
+ * call `_resetEscapeStack()` between cases to avoid leaking state. In
+ * production this is fine (a real app has at most a handful of stacked overlays
+ * at once). It is a plain LIFO stack: each `pushEscapeHandler` call appends one
+ * entry and returns a one-shot `release` token that removes that entry's most
+ * recent occurrence. Overlays push exactly once per open and release via the
+ * returned token, so duplicates don't arise in practice; releasing a token
+ * twice (or releasing a handler already gone) is a no-op.
  */
-const escapeStack: Array<() => void> = [];
+/**
+ * An escape-stack handler. Receives the originating `KeyboardEvent` so a
+ * handler that owns the keystroke (e.g. a nested interactive popup closing on
+ * Escape) can call `event.preventDefault()` to stop the key from also reaching
+ * the page's default action. Most overlays ignore the argument and just close.
+ */
+type EscapeHandler = (event: KeyboardEvent) => void;
+
+const escapeStack: EscapeHandler[] = [];
 
 /**
  * Register a handler to be called when ESC is pressed and this overlay is at
- * the top of the stack. Returns a `release` function the overlay must call
- * on close.
+ * the top of the stack. The handler receives the originating `KeyboardEvent`.
+ * Returns a `release` function the overlay must call on close.
  *
  * The first handler pushed installs the global keydown listener; the last
  * handler popped removes it.
  */
-export function pushEscapeHandler(handler: () => void): () => void {
+export function pushEscapeHandler(handler: EscapeHandler): () => void {
   escapeStack.push(handler);
   if (escapeStack.length === 1 && typeof window !== 'undefined') {
     window.addEventListener('keydown', onEscapeKeydown, { capture: true });
@@ -115,9 +128,11 @@ function onEscapeKeydown(event: KeyboardEvent): void {
   if (event.key !== 'Escape') return;
   const handler = escapeStack.at(-1);
   if (!handler) return;
-  // Don't preventDefault — native dialog ESC and consumer keydown handlers
-  // may want to react too. We just invoke the topmost overlay's close.
-  handler();
+  // We don't preventDefault here — whether the keystroke should be swallowed is
+  // the topmost handler's call, so we pass the event through and let it decide
+  // (a nested popup that owns Escape calls event.preventDefault(); a plain
+  // overlay that's fine letting native dialog ESC also fire does not).
+  handler(event);
 }
 
 /**

package/src/_internal/toast-context.ts

@@ -45,6 +45,12 @@ export type ToastOptions = {
    * and variant, never by the icon alone.
    */
   icon?: Snippet;
+  /**
+   * When true, renders a per-variant default icon before the message. Defaults
+   * to false. Has no effect when a custom icon snippet is provided via the icon
+   * prop.
+   */
+  showIcon?: boolean;
   /**
    * Optional action paired with the message. Renders a button after the
    * message text and invokes `onAction` when clicked. The toast is dismissed
@@ -61,6 +67,8 @@ export type ToastItem = {
   variant: ToastVariant;
   duration: number;
   dismissible: boolean;
+  /** Normalized from ToastOptions.showIcon; defaults to false. */
+  showIcon: boolean;
   icon?: Snippet;
   action?: { label: string; onAction: () => void; keepOpen?: boolean };
 };

package/src/_internal/tree-context.ts

@@ -2,6 +2,7 @@ import { createContext } from 'svelte';
 
 import type { TreeSelectionState } from '../components/tree/tree-selection.ts';
 import { optionalContext } from './optional-context.ts';
+import type { TreeDragController } from './tree-drag-controller.svelte.ts';
 import type { TreeNodeRegistration } from './tree-registry.svelte.ts';
 
 // Inline the selection mode type here to avoid a circular import with
@@ -33,9 +34,19 @@ export type TreeContext = {
   readonly selectedIds: readonly string[];
   /** Reactive getter — reading inside $derived registers cross-component dependency. */
   readonly focusedId: string | null;
+  readonly filtering: boolean;
+  readonly filterValue: string;
+  readonly hasRegisteredItems: boolean;
+  readonly expandableBranchCount: number;
+  readonly hasExpandedItems: boolean;
+  readonly dragController: TreeDragController | null;
+  readonly dragInstructionsId: string;
   isExpanded(id: string): boolean;
   isSelected(id: string): boolean;
   isFocused(id: string): boolean;
+  isVisible(id: string): boolean;
+  hasVisibleDescendant(id: string): boolean;
+  matchesFilter(label: string, id: string): boolean;
   checkboxSelectionActive(): boolean;
   selectionStateFor(id: string): TreeItemSelectionState;
   toggleSelectionScope(id: string): void;
@@ -47,9 +58,16 @@ export type TreeContext = {
     includeDescendants: boolean,
   ): readonly string[];
   setExpanded(id: string, next: boolean): void;
+  expandAll(): Promise<void>;
+  collapseAll(): void;
+  expandOneLevel(): void;
+  focusItem(id: string): void;
+  expandToItem(id: string): Promise<void>;
+  scrollToRow(id: string, options?: ScrollIntoViewOptions): void;
   toggleSelected(id: string, event: KeyboardEvent | MouseEvent | null): void;
   register(node: TreeNodeRegistration): () => void;
   focusVisibleDelta(currentId: string, delta: number): void;
+  canFocusVisibleDelta(currentId: string, delta: number): boolean;
   focusFirstVisible(): void;
   focusLastVisible(): void;
   focusParent(currentId: string): void;

package/src/_internal/tree-data.ts

@@ -0,0 +1,91 @@
+export type TreeDataItem = {
+  id: string;
+  label: string;
+  disabled?: boolean;
+  children?: readonly TreeDataItem[];
+};
+
+export type FlattenedTreeDataItem = {
+  id: string;
+  label: string;
+  disabled: boolean;
+  parentId: string | null;
+  level: number;
+  branch: boolean;
+  index: number;
+  posInSet: number;
+  setSize: number;
+  ancestorIds: readonly string[];
+};
+
+export type TreeDataFilterPredicate = (item: FlattenedTreeDataItem) => boolean;
+
+export function flattenTreeDataItems(items: readonly TreeDataItem[]): FlattenedTreeDataItem[] {
+  const flattenedItems: FlattenedTreeDataItem[] = [];
+
+  const visit = (
+    children: readonly TreeDataItem[],
+    parentId: string | null,
+    level: number,
+    ancestorIds: readonly string[],
+  ): void => {
+    const setSize = children.length;
+    children.forEach((item, siblingIndex) => {
+      const branch = (item.children?.length ?? 0) > 0;
+      const flattenedItem: FlattenedTreeDataItem = {
+        id: item.id,
+        label: item.label,
+        disabled: item.disabled ?? false,
+        parentId,
+        level,
+        branch,
+        index: flattenedItems.length,
+        posInSet: siblingIndex + 1,
+        setSize,
+        ancestorIds,
+      };
+      flattenedItems.push(flattenedItem);
+      if (branch) {
+        visit(item.children ?? [], item.id, level + 1, [...ancestorIds, item.id]);
+      }
+    });
+  };
+
+  visit(items, null, 1, []);
+  return flattenedItems;
+}
+
+export function visibleTreeDataItems(
+  flattenedItems: readonly FlattenedTreeDataItem[],
+  expandedIds: readonly string[],
+  filterPredicate?: TreeDataFilterPredicate,
+): FlattenedTreeDataItem[] {
+  if (filterPredicate) {
+    const byId = new Map(flattenedItems.map((item) => [item.id, item]));
+    const retainedIds = new Set<string>();
+    for (const item of flattenedItems) {
+      if (!filterPredicate(item)) continue;
+      retainedIds.add(item.id);
+      for (const ancestorId of item.ancestorIds) {
+        if (byId.has(ancestorId)) retainedIds.add(ancestorId);
+      }
+    }
+    return flattenedItems.filter((item) => retainedIds.has(item.id));
+  }
+
+  const expandedIdSet = new Set(expandedIds);
+  return flattenedItems.filter((item) =>
+    item.ancestorIds.every((ancestorId) => expandedIdSet.has(ancestorId)),
+  );
+}
+
+export function descendantTreeDataIds(
+  flattenedItems: readonly FlattenedTreeDataItem[],
+  parentId: string,
+): string[] {
+  const parent = flattenedItems.find((item) => item.id === parentId);
+  if (!parent) return [];
+  return flattenedItems
+    .filter((item) => item.ancestorIds.includes(parentId) && item.level > parent.level)
+    .map((item) => item.id);
+}

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

@@ -0,0 +1,328 @@
+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;
+}
+
+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;
+    }
+  }
+
+  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;
+      }
+    }
+  }
+
+  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;
+    }
+    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;
+    }
+    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);
+    }
+    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;
+}
+
+function unchangedMoveResult<Node extends TreeMoveNode>(nodes: Node[]): Node[] {
+  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 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 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;
+}