@anzusystems/common-admin 1.49.0 → 2.0.0-rc.2

package/dist/domains/listEditor/composables/useContainerWidth.d.ts

@@ -0,0 +1,5 @@
+import { ComputedRef, Ref } from 'vue';
+export declare function useContainerWidth(el: Ref<HTMLElement | null | undefined>, threshold?: number): {
+    width: Ref<number>;
+    isNarrow: ComputedRef<boolean>;
+};

package/dist/domains/listEditor/composables/useContainerWidth.js

@@ -0,0 +1,14 @@
+import { computed as e } from "vue";
+import { useElementSize as t } from "@vueuse/core";
+//#region src/domains/listEditor/composables/useContainerWidth.ts
+function n(n, r = 769) {
+	let { width: i } = t(n);
+	return {
+		width: i,
+		isNarrow: e(() => i.value > 0 && i.value < r)
+	};
+}
+//#endregion
+export { n as useContainerWidth };
+
+//# sourceMappingURL=useContainerWidth.js.map

package/dist/domains/listEditor/composables/useContainerWidth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContainerWidth.js","names":["useContainerWidth","useElementSize","el","computed","width","threshold"],"sources":["../../../../src/domains/listEditor/composables/useContainerWidth.ts"],"sourcesContent":["import { computed, type ComputedRef, type Ref } from 'vue'\nimport { useElementSize } from '@vueuse/core'\n\n// Aligns JS-driven layout decisions (close button variant, mobile title icon)\n// with the CSS `@container le-shell` queries which fire on the editor's own\n// width rather than the viewport. Default threshold matches the 768/769 split\n// in `_shared.scss` and per-component narrow-container blocks.\nexport function useContainerWidth(\n  el: Ref<HTMLElement | null | undefined>,\n  threshold = 769\n): { width: Ref<number>; isNarrow: ComputedRef<boolean> } {\n  const { width } = useElementSize(el)\n  const isNarrow = computed(() => width.value > 0 && width.value < threshold)\n  return { width, isNarrow }\n}\n"],"mappings":";;;AAOA,SAAgBA,EACd,GACA,IAAY,KAC4C;CACxD,IAAM,EAAE,aAAUC,EAAeC,CAAE;CAEnC,OAAO;EAAE;EAAO,UADCC,QAAeC,EAAM,QAAQ,KAAKA,EAAM,QAAQC,CACjD;CAAS;AAC3B"}

package/dist/domains/listEditor/composables/useDeleteDialog.d.ts

@@ -0,0 +1,51 @@
+import { Ref } from 'vue';
+export interface UseDeleteDialogOptions<TItem, ViewItem> {
+    /**
+     * Confirm hook — called before any destructive work. Returning `false`
+     * aborts the delete silently; rejecting is treated the same as the caller's
+     * `onDelete` rejecting (error message surfaced in the dialog).
+     */
+    onDeleteConfirm?: (item: TItem) => Promise<boolean> | boolean;
+    /**
+     * Destructive work hook — consumer-side deletion (e.g. API call). If it
+     * throws, the error is surfaced in the dialog and the local state is not
+     * mutated.
+     */
+    onDelete?: (item: TItem) => Promise<void> | void;
+    /**
+     * Called once the delete has succeeded end-to-end. The consumer performs
+     * the editor mutation + clears component-local state here (editingKeys,
+     * editingSnapshots, expanded flags, etc.). Keeping this step outside the
+     * composable is deliberate — it lets each editor variant own its
+     * per-component state shape without leaking it into the shared code.
+     */
+    onDeleted: (item: ViewItem) => void;
+    /**
+     * Runs at click time. When true, the confirmation dialog is skipped and
+     * delete proceeds immediately. Lets callers bypass the dialog for
+     * specific modes (e.g. chips) without threading a prop through.
+     */
+    disableDeleteConfirm: () => boolean;
+}
+export interface UseDeleteDialogApi<ViewItem> {
+    deleteDialog: Ref<boolean>;
+    deleteTarget: Ref<ViewItem | null>;
+    deleteInFlight: Ref<boolean>;
+    deleteError: Ref<string | null>;
+    performDelete: (vi: ViewItem) => Promise<boolean>;
+    onDeleteClick: (vi: ViewItem) => Promise<void>;
+    onDeleteDialogConfirm: () => Promise<void>;
+    onDeleteDialogCancel: () => void;
+}
+/**
+ * Delete-flow state + handlers shared across list-editor variants. Owns the
+ * dialog boolean, the target row, the in-flight flag and the error string;
+ * dispatches to the caller's confirm/delete/deleted hooks in the right order.
+ *
+ * Pure behaviour — no template, no editor dependency. The dialog markup
+ * stays in each component (it references component-local slots and refs).
+ */
+export declare function useDeleteDialog<TItem extends Record<string, any>, ViewItem extends {
+    key: string | number;
+    raw: TItem;
+}>(options: UseDeleteDialogOptions<TItem, ViewItem>): UseDeleteDialogApi<ViewItem>;

package/dist/domains/listEditor/composables/useDeleteDialog.js

@@ -0,0 +1,37 @@
+import { ref as e } from "vue";
+//#region src/domains/listEditor/composables/useDeleteDialog.ts
+function t(t) {
+	let n = e(!1), r = e(null), i = e(!1), a = e(null), o = async (e) => {
+		if (a.value = null, t.onDeleteConfirm && !await t.onDeleteConfirm(e.raw)) return !1;
+		if (t.onDelete) {
+			i.value = !0;
+			try {
+				await t.onDelete(e.raw);
+			} catch (e) {
+				return i.value = !1, a.value = e instanceof Error ? e.message : String(e), !1;
+			}
+			i.value = !1;
+		}
+		return t.onDeleted(e), !0;
+	};
+	return {
+		deleteDialog: n,
+		deleteTarget: r,
+		deleteInFlight: i,
+		deleteError: a,
+		performDelete: o,
+		onDeleteClick: async (e) => {
+			t.disableDeleteConfirm() ? await o(e) : (r.value = e, a.value = null, n.value = !0);
+		},
+		onDeleteDialogConfirm: async () => {
+			r.value && await o(r.value) && (n.value = !1, r.value = null);
+		},
+		onDeleteDialogCancel: () => {
+			i.value || (n.value = !1, r.value = null, a.value = null);
+		}
+	};
+}
+//#endregion
+export { t as useDeleteDialog };
+
+//# sourceMappingURL=useDeleteDialog.js.map

package/dist/domains/listEditor/composables/useDeleteDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDeleteDialog.js","names":["useDeleteDialog","deleteDialog","ref","deleteTarget","deleteInFlight","deleteError","performDelete","options","vi","err"],"sources":["../../../../src/domains/listEditor/composables/useDeleteDialog.ts"],"sourcesContent":["import { ref, type Ref } from 'vue'\n\nexport interface UseDeleteDialogOptions<TItem, ViewItem> {\n  /**\n   * Confirm hook — called before any destructive work. Returning `false`\n   * aborts the delete silently; rejecting is treated the same as the caller's\n   * `onDelete` rejecting (error message surfaced in the dialog).\n   */\n  onDeleteConfirm?: (item: TItem) => Promise<boolean> | boolean\n  /**\n   * Destructive work hook — consumer-side deletion (e.g. API call). If it\n   * throws, the error is surfaced in the dialog and the local state is not\n   * mutated.\n   */\n  onDelete?: (item: TItem) => Promise<void> | void\n  /**\n   * Called once the delete has succeeded end-to-end. The consumer performs\n   * the editor mutation + clears component-local state here (editingKeys,\n   * editingSnapshots, expanded flags, etc.). Keeping this step outside the\n   * composable is deliberate — it lets each editor variant own its\n   * per-component state shape without leaking it into the shared code.\n   */\n  onDeleted: (item: ViewItem) => void\n  /**\n   * Runs at click time. When true, the confirmation dialog is skipped and\n   * delete proceeds immediately. Lets callers bypass the dialog for\n   * specific modes (e.g. chips) without threading a prop through.\n   */\n  disableDeleteConfirm: () => boolean\n}\n\nexport interface UseDeleteDialogApi<ViewItem> {\n  deleteDialog: Ref<boolean>\n  deleteTarget: Ref<ViewItem | null>\n  deleteInFlight: Ref<boolean>\n  deleteError: Ref<string | null>\n  performDelete: (vi: ViewItem) => Promise<boolean>\n  onDeleteClick: (vi: ViewItem) => Promise<void>\n  onDeleteDialogConfirm: () => Promise<void>\n  onDeleteDialogCancel: () => void\n}\n\n/**\n * Delete-flow state + handlers shared across list-editor variants. Owns the\n * dialog boolean, the target row, the in-flight flag and the error string;\n * dispatches to the caller's confirm/delete/deleted hooks in the right order.\n *\n * Pure behaviour — no template, no editor dependency. The dialog markup\n * stays in each component (it references component-local slots and refs).\n */\nexport function useDeleteDialog<\n  TItem extends Record<string, any>,\n  ViewItem extends { key: string | number; raw: TItem },\n>(options: UseDeleteDialogOptions<TItem, ViewItem>): UseDeleteDialogApi<ViewItem> {\n  const deleteDialog = ref(false)\n  const deleteTarget = ref<ViewItem | null>(null) as Ref<ViewItem | null>\n  const deleteInFlight = ref(false)\n  const deleteError = ref<string | null>(null)\n\n  const performDelete = async (vi: ViewItem): Promise<boolean> => {\n    deleteError.value = null\n    if (options.onDeleteConfirm) {\n      const ok = await options.onDeleteConfirm(vi.raw)\n      if (!ok) return false\n    }\n    if (options.onDelete) {\n      deleteInFlight.value = true\n      try {\n        await options.onDelete(vi.raw)\n      } catch (err) {\n        deleteInFlight.value = false\n        deleteError.value = err instanceof Error ? err.message : String(err)\n        return false\n      }\n      deleteInFlight.value = false\n    }\n    options.onDeleted(vi)\n    return true\n  }\n\n  const onDeleteClick = async (vi: ViewItem) => {\n    if (options.disableDeleteConfirm()) {\n      await performDelete(vi)\n      return\n    }\n    deleteTarget.value = vi\n    deleteError.value = null\n    deleteDialog.value = true\n  }\n\n  const onDeleteDialogConfirm = async () => {\n    if (!deleteTarget.value) return\n    const ok = await performDelete(deleteTarget.value as ViewItem)\n    if (ok) {\n      deleteDialog.value = false\n      deleteTarget.value = null\n    }\n  }\n\n  const onDeleteDialogCancel = () => {\n    if (deleteInFlight.value) return\n    deleteDialog.value = false\n    deleteTarget.value = null\n    deleteError.value = null\n  }\n\n  return {\n    deleteDialog,\n    deleteTarget,\n    deleteInFlight,\n    deleteError,\n    performDelete,\n    onDeleteClick,\n    onDeleteDialogConfirm,\n    onDeleteDialogCancel,\n  }\n}\n"],"mappings":";;AAkDA,SAAgBA,EAGd,GAAgF;CAChF,IAAMC,IAAeC,EAAI,EAAK,GACxBC,IAAeD,EAAqB,IAAI,GACxCE,IAAiBF,EAAI,EAAK,GAC1BG,IAAcH,EAAmB,IAAI,GAErCI,IAAgB,OAAO,MAAmC;EAE9D,IADA,EAAY,QAAQ,MAChBC,EAAQ,mBAEN,CAAC,MADYA,EAAQ,gBAAgBC,EAAG,GAAG,GACtC,OAAO;EAElB,IAAID,EAAQ,UAAU;GACpB,EAAe,QAAQ;GACvB,IAAI;IACF,MAAMA,EAAQ,SAASC,EAAG,GAAG;GAC/B,SAASC,GAAK;IAGZ,OAFA,EAAe,QAAQ,IACvB,EAAY,QAAQA,aAAe,QAAQA,EAAI,UAAU,OAAOA,CAAG,GAC5D;GACT;GACA,EAAe,QAAQ;EACzB;EAEA,OADAF,EAAQ,UAAUC,CAAE,GACb;CACT;CA4BA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA,sBAhC2B,MAAiB;GAC5C,AAAID,EAAQ,qBAAqB,IAC/B,MAAMD,EAAcE,CAAE,KAGxB,EAAa,QAAQA,GACrB,EAAY,QAAQ,MACpB,EAAa,QAAQ;EACvB;EAyBE,mCAvBwC;GACxC,AAAKL,EAAa,SAEd,MADaG,EAAcH,EAAa,KAAiB,MAE3D,EAAa,QAAQ,IACrB,EAAa,QAAQ;EAEzB;EAiBE,4BAfiC;GACjC,AAAIC,EAAe,UACnB,EAAa,QAAQ,IACrB,EAAa,QAAQ,MACrB,EAAY,QAAQ;EACtB;CAWA;AACF"}

package/dist/domains/listEditor/composables/useDragInstruction.d.ts

@@ -0,0 +1,61 @@
+import { ListEditorKey } from '../types/listEditorTypes';
+import { NestedViewItem } from './useNestedListEditor';
+/**
+ * Drop instruction — where the dragged item will land + how to paint the line.
+ *
+ * Outliner model (dnd-kit / Workflowy style):
+ *   - Pointer Y picks which gap the drop lands in: the upper 50% of the
+ *     hovered row = the gap above it, the lower 50% = the gap below.
+ *   - Pointer X picks the depth within that gap. Depth is measured in indent
+ *     columns of `indentPx` each, rounded to the nearest column, and clamped
+ *     to `[0, anchor.depth + 1]` where `anchor` is the visible row immediately
+ *     above the target gap. You can never skip more than one level deeper
+ *     than what's already on the row above — same rule as dnd-kit's
+ *     SortableTree — which keeps the tree structure coherent.
+ *
+ * `makeChild: true` when the chosen depth is one level deeper than the
+ * anchor. The target becomes a new parent and the consumer should
+ * auto-expand `parentKey` so the inserted row stays visible.
+ *
+ * `blocked` wraps the would-be instruction when the move would breach
+ * `maxDepth` — the overlay keeps rendering the line in a warning colour
+ * so the intent stays legible but the mutation is refused.
+ */
+export type ExecutableInstruction = {
+    type: 'insert';
+    refKey: ListEditorKey;
+    refEdge: 'top' | 'bottom';
+    parentKey: ListEditorKey | null;
+    index: number;
+    depth: number;
+    makeChild: boolean;
+    levelRowKey: ListEditorKey | null;
+};
+export type Instruction = ExecutableInstruction | {
+    type: 'blocked';
+    desired: ExecutableInstruction;
+    reason: 'maxDepth';
+};
+export interface HoveredRow {
+    key: ListEditorKey;
+    rect: DOMRect;
+    depth: number;
+    parentKey: ListEditorKey | null;
+    siblingIndex: number;
+    siblingCount: number;
+}
+export interface ComputeInstructionArgs {
+    pointer: {
+        x: number;
+        y: number;
+    };
+    hoveredRow: HoveredRow;
+    sourceKey: ListEditorKey;
+    sourceSubtreeDepth: number;
+    viewItems: NestedViewItem<any>[];
+    maxDepth: number;
+    indentPx: number;
+    containerLeft: number;
+    containerPaddingLeft: number;
+}
+export declare const computeInstruction: (args: ComputeInstructionArgs) => Instruction | null;

package/dist/domains/listEditor/composables/useDragInstruction.js

@@ -0,0 +1,87 @@
+//#region src/domains/listEditor/composables/useDragInstruction.ts
+var e = (e, t) => e.find((e) => e.key === t) ?? null, t = (t, n, r) => {
+	let i = e(t, r);
+	for (; i && i.parentKey !== null;) {
+		if (i.parentKey === n) return !0;
+		i = e(t, i.parentKey);
+	}
+	return !1;
+}, n = (t, n, r) => {
+	let i = e(t, n);
+	for (; i && i.depth > r;) {
+		if (i.parentKey === null) return null;
+		i = e(t, i.parentKey);
+	}
+	return i && i.depth === r ? i : null;
+}, r = (e, n, r) => r === n || t(e, n, r), i = (e, t, n, i) => {
+	for (let a = t; a >= 0 && a < e.length; a += n) {
+		let t = e[a];
+		if (!r(e, i, t.key)) return t;
+	}
+	return null;
+}, a = (e) => {
+	let { pointer: r, hoveredRow: a, sourceKey: o, sourceSubtreeDepth: s, viewItems: c, maxDepth: l, indentPx: u, containerLeft: d, containerPaddingLeft: f } = e;
+	if (a.key === o || t(c, o, a.key)) return null;
+	let p = r.y - a.rect.top < a.rect.height / 2, m = p ? "top" : "bottom", h = c.findIndex((e) => e.key === a.key), g = p ? i(c, h - 1, -1, o) : i(c, h, -1, o), _ = p ? i(c, h, 1, o) : i(c, h + 1, 1, o), v = r.x - d - f, y = Math.round(v / u), b = g ? g.depth + 1 : 0, x = _ ? _.depth : 0, S = Math.max(x, Math.min(y, b)), C;
+	if (!g) C = {
+		type: "insert",
+		refKey: a.key,
+		refEdge: "top",
+		parentKey: null,
+		index: 0,
+		depth: 0,
+		makeChild: !1,
+		levelRowKey: null
+	};
+	else if (S === g.depth + 1) C = {
+		type: "insert",
+		refKey: a.key,
+		refEdge: m,
+		parentKey: g.key,
+		index: 0,
+		depth: S,
+		makeChild: !0,
+		levelRowKey: null
+	};
+	else if (S === g.depth) C = {
+		type: "insert",
+		refKey: a.key,
+		refEdge: m,
+		parentKey: g.parentKey,
+		index: g.siblingIndex + 1,
+		depth: S,
+		makeChild: !1,
+		levelRowKey: g.key
+	};
+	else {
+		let e = n(c, g.key, S);
+		C = e ? {
+			type: "insert",
+			refKey: a.key,
+			refEdge: m,
+			parentKey: e.parentKey,
+			index: e.siblingIndex + 1,
+			depth: S,
+			makeChild: !1,
+			levelRowKey: e.key
+		} : {
+			type: "insert",
+			refKey: a.key,
+			refEdge: m,
+			parentKey: g.parentKey,
+			index: g.siblingIndex + 1,
+			depth: g.depth,
+			makeChild: !1,
+			levelRowKey: g.key
+		};
+	}
+	return C.depth + s - 1 >= l ? {
+		type: "blocked",
+		desired: C,
+		reason: "maxDepth"
+	} : C;
+};
+//#endregion
+export { a as computeInstruction };
+
+//# sourceMappingURL=useDragInstruction.js.map

package/dist/domains/listEditor/composables/useDragInstruction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragInstruction.js","names":["findByKey","viewItems","v","key","isDescendantOf","current","candidateKey","ancestorKey","findAncestorAtDepth","startKey","targetDepth","isInSourceSubtree","sourceKey","findSiblingNotInSource","i","startIdx","dir","vi","computeInstruction","args","hoveredRow","inTopHalf","pointer","refEdge","flatIdx","prev","next","pointerRelX","containerLeft","containerPaddingLeft","rawDepth","indentPx","depthCeiling","depthFloor","clampedDepth","desired","ancestor","sourceSubtreeDepth","maxDepth"],"sources":["../../../../src/domains/listEditor/composables/useDragInstruction.ts"],"sourcesContent":["import type { ListEditorKey } from '@/domains/listEditor/types/listEditorTypes'\nimport type { NestedViewItem } from '@/domains/listEditor/composables/useNestedListEditor'\n\n/**\n * Drop instruction — where the dragged item will land + how to paint the line.\n *\n * Outliner model (dnd-kit / Workflowy style):\n *   - Pointer Y picks which gap the drop lands in: the upper 50% of the\n *     hovered row = the gap above it, the lower 50% = the gap below.\n *   - Pointer X picks the depth within that gap. Depth is measured in indent\n *     columns of `indentPx` each, rounded to the nearest column, and clamped\n *     to `[0, anchor.depth + 1]` where `anchor` is the visible row immediately\n *     above the target gap. You can never skip more than one level deeper\n *     than what's already on the row above — same rule as dnd-kit's\n *     SortableTree — which keeps the tree structure coherent.\n *\n * `makeChild: true` when the chosen depth is one level deeper than the\n * anchor. The target becomes a new parent and the consumer should\n * auto-expand `parentKey` so the inserted row stays visible.\n *\n * `blocked` wraps the would-be instruction when the move would breach\n * `maxDepth` — the overlay keeps rendering the line in a warning colour\n * so the intent stays legible but the mutation is refused.\n */\n\nexport type ExecutableInstruction = {\n  type: 'insert'\n  refKey: ListEditorKey\n  refEdge: 'top' | 'bottom'\n  parentKey: ListEditorKey | null\n  index: number\n  depth: number\n  makeChild: boolean\n  // Row whose level the inserted item will match — the sibling we're\n  // inserting after (sibling case) or the ancestor we're joining as sibling\n  // of (reparent case). `null` for make-child (creating a brand new deeper\n  // level, no existing peer to anchor against) and the root-top fallback.\n  // Consumers render a thin connector from the drop line up to this row so\n  // the user can see which row dictates the new level.\n  levelRowKey: ListEditorKey | null\n}\n\nexport type Instruction =\n  | ExecutableInstruction\n  | {\n      type: 'blocked'\n      desired: ExecutableInstruction\n      reason: 'maxDepth'\n    }\n\nexport interface HoveredRow {\n  key: ListEditorKey\n  rect: DOMRect\n  depth: number\n  parentKey: ListEditorKey | null\n  siblingIndex: number\n  siblingCount: number\n}\n\nexport interface ComputeInstructionArgs {\n  pointer: { x: number; y: number }\n  hoveredRow: HoveredRow\n  sourceKey: ListEditorKey\n  sourceSubtreeDepth: number\n  viewItems: NestedViewItem<any>[]\n  maxDepth: number\n  indentPx: number\n  containerLeft: number\n  containerPaddingLeft: number\n}\n\nconst findByKey = (viewItems: NestedViewItem<any>[], key: ListEditorKey): NestedViewItem<any> | null =>\n  viewItems.find((v) => v.key === key) ?? null\n\nconst isDescendantOf = (\n  viewItems: NestedViewItem<any>[],\n  ancestorKey: ListEditorKey,\n  candidateKey: ListEditorKey\n): boolean => {\n  let current = findByKey(viewItems, candidateKey)\n  while (current && current.parentKey !== null) {\n    if (current.parentKey === ancestorKey) return true\n    current = findByKey(viewItems, current.parentKey)\n  }\n  return false\n}\n\nconst findAncestorAtDepth = (\n  viewItems: NestedViewItem<any>[],\n  startKey: ListEditorKey,\n  targetDepth: number\n): NestedViewItem<any> | null => {\n  let current = findByKey(viewItems, startKey)\n  while (current && current.depth > targetDepth) {\n    if (current.parentKey === null) return null\n    current = findByKey(viewItems, current.parentKey)\n  }\n  return current && current.depth === targetDepth ? current : null\n}\n\nconst isInSourceSubtree = (\n  viewItems: NestedViewItem<any>[],\n  sourceKey: ListEditorKey,\n  candidateKey: ListEditorKey\n): boolean => candidateKey === sourceKey || isDescendantOf(viewItems, sourceKey, candidateKey)\n\n// Walk the flat view-items list in `dir` (±1) starting at `startIdx`, skipping\n// any row that belongs to the dragged subtree — those rows aren't visible drop\n// targets so they shouldn't define the gap boundaries for depth clamping.\nconst findSiblingNotInSource = (\n  viewItems: NestedViewItem<any>[],\n  startIdx: number,\n  dir: 1 | -1,\n  sourceKey: ListEditorKey\n): NestedViewItem<any> | null => {\n  for (let i = startIdx; i >= 0 && i < viewItems.length; i += dir) {\n    const vi = viewItems[i]!\n    if (!isInSourceSubtree(viewItems, sourceKey, vi.key)) return vi\n  }\n  return null\n}\n\nexport const computeInstruction = (args: ComputeInstructionArgs): Instruction | null => {\n  const {\n    pointer,\n    hoveredRow,\n    sourceKey,\n    sourceSubtreeDepth,\n    viewItems,\n    maxDepth,\n    indentPx,\n    containerLeft,\n    containerPaddingLeft,\n  } = args\n\n  if (hoveredRow.key === sourceKey) return null\n  if (isDescendantOf(viewItems, sourceKey, hoveredRow.key)) return null\n\n  const y = pointer.y - hoveredRow.rect.top\n  const h = hoveredRow.rect.height\n  const inTopHalf = y < h / 2\n  const refEdge: 'top' | 'bottom' = inTopHalf ? 'top' : 'bottom'\n\n  // The gap between two flat-adjacent rows frames the drop. `prev` is the\n  // row immediately above the gap, `next` is the row immediately below it.\n  // Rows belonging to the dragged subtree don't exist for clamping purposes —\n  // they'll disappear from the flat list once the move completes, so they\n  // can't define the depth bounds of the drop.\n  const flatIdx = viewItems.findIndex((v) => v.key === hoveredRow.key)\n  const prev: NestedViewItem<any> | null = inTopHalf\n    ? findSiblingNotInSource(viewItems, flatIdx - 1, -1, sourceKey)\n    : findSiblingNotInSource(viewItems, flatIdx, -1, sourceKey)\n  const next: NestedViewItem<any> | null = inTopHalf\n    ? findSiblingNotInSource(viewItems, flatIdx, 1, sourceKey)\n    : findSiblingNotInSource(viewItems, flatIdx + 1, 1, sourceKey)\n\n  // Depth bounds for this gap:\n  //   maxDepth = prev.depth + 1 (you can nest one level deeper than prev).\n  //   minDepth = next.depth     (shallower would insert AFTER next's parent\n  //                              subtree, i.e., at a different Y than the\n  //                              user is pointing at — so that's not a valid\n  //                              option for THIS gap).\n  // If prev is missing (gap at top of tree) or next is missing (bottom of\n  // tree), the missing side defaults to 0.\n  const pointerRelX = pointer.x - containerLeft - containerPaddingLeft\n  const rawDepth = Math.round(pointerRelX / indentPx)\n  const depthCeiling = prev ? prev.depth + 1 : 0\n  const depthFloor = next ? next.depth : 0\n  const clampedDepth = Math.max(depthFloor, Math.min(rawDepth, depthCeiling))\n\n  let desired: ExecutableInstruction\n\n  if (!prev) {\n    // Gap at the very top of the tree — only landing is root index 0.\n    desired = {\n      type: 'insert',\n      refKey: hoveredRow.key,\n      refEdge: 'top',\n      parentKey: null,\n      index: 0,\n      depth: 0,\n      makeChild: false,\n      levelRowKey: null,\n    }\n  } else if (clampedDepth === prev.depth + 1) {\n    desired = {\n      type: 'insert',\n      refKey: hoveredRow.key,\n      refEdge,\n      parentKey: prev.key,\n      index: 0,\n      depth: clampedDepth,\n      makeChild: true,\n      levelRowKey: null,\n    }\n  } else if (clampedDepth === prev.depth) {\n    desired = {\n      type: 'insert',\n      refKey: hoveredRow.key,\n      refEdge,\n      parentKey: prev.parentKey,\n      index: prev.siblingIndex + 1,\n      depth: clampedDepth,\n      makeChild: false,\n      levelRowKey: prev.key,\n    }\n  } else {\n    // clampedDepth < prev.depth → reparent to ancestor at clampedDepth.\n    const ancestor = findAncestorAtDepth(viewItems, prev.key, clampedDepth)\n    if (ancestor) {\n      desired = {\n        type: 'insert',\n        refKey: hoveredRow.key,\n        refEdge,\n        parentKey: ancestor.parentKey,\n        index: ancestor.siblingIndex + 1,\n        depth: clampedDepth,\n        makeChild: false,\n        levelRowKey: ancestor.key,\n      }\n    } else {\n      // Shouldn't hit with clampedDepth ≥ 0 but keep a safe fallback.\n      desired = {\n        type: 'insert',\n        refKey: hoveredRow.key,\n        refEdge,\n        parentKey: prev.parentKey,\n        index: prev.siblingIndex + 1,\n        depth: prev.depth,\n        makeChild: false,\n        levelRowKey: prev.key,\n      }\n    }\n  }\n\n  if (desired.depth + sourceSubtreeDepth - 1 >= maxDepth) {\n    return { type: 'blocked', desired, reason: 'maxDepth' }\n  }\n\n  return desired\n}\n"],"mappings":"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"}

package/dist/domains/listEditor/composables/useInlineEditing.d.ts

@@ -0,0 +1,40 @@
+import { ComputedRef, Ref } from 'vue';
+import { ListEditorKey } from '../types/listEditorTypes';
+export interface UseInlineEditingOptions<TItem> {
+    /** Scrolling container; scopes the auto-scroll `querySelector` to this instance. */
+    rowsContainer: Ref<HTMLElement | null>;
+    /** Per-row selector to scroll into view (flat `.a-le-row`, nested `.a-le-row-wrapper`); needs a `[data-id]`. */
+    rowSelector: string;
+    /** When false, auto-open-on-add is a no-op (e.g. chips mode, or no `#item` slot). */
+    isInlineEdit: ComputedRef<boolean>;
+    /** Revert callback — the flat/nested `updateItem` signatures differ, so the consumer applies the snapshot. */
+    restoreSnapshot: (key: ListEditorKey, data: TItem) => void;
+    /** Watch source: keys the auto-open reacts to (flat maps modelValue, nested walks the tree). */
+    watchKeys: () => ListEditorKey[];
+    /** Resolve raw data for a key to snapshot before editing; `null` aborts the auto-open. */
+    findEntry: (key: ListEditorKey) => {
+        data: TItem;
+    } | null;
+    /** Nested-only: expand ancestors so the auto-opened row is visible. */
+    afterAutoOpen?: (key: ListEditorKey) => void;
+}
+export interface UseInlineEditingApi<TItem, ViewItem> {
+    editingKeys: Ref<Set<ListEditorKey>>;
+    editingSnapshots: Ref<Map<ListEditorKey, TItem>>;
+    pendingAutoOpen: Ref<boolean>;
+    clearEditing: () => void;
+    beginEdit: (vi: ViewItem) => void;
+    cancelEdit: (vi: ViewItem) => void;
+    commitEdit: (vi: ViewItem) => void;
+    closeEdit: (vi: ViewItem) => void;
+    requestAutoOpen: () => void;
+}
+/**
+ * Inline-edit lifecycle shared across list-editor variants: the editing-key
+ * set, per-key revert snapshots, and the auto-open + scroll-into-view of a
+ * newly appended row. Agnostic of the editor composable via `restoreSnapshot`.
+ */
+export declare function useInlineEditing<TItem extends Record<string, any>, ViewItem extends {
+    key: ListEditorKey;
+    raw: TItem;
+}>(options: UseInlineEditingOptions<TItem>): UseInlineEditingApi<TItem, ViewItem>;

package/dist/domains/listEditor/composables/useInlineEditing.js

@@ -0,0 +1,48 @@
+import { cloneDeep as e } from "../../../shared/utils/common.js";
+import { nextTick as t, ref as n, watch as r } from "vue";
+//#region src/domains/listEditor/composables/useInlineEditing.ts
+function i(i) {
+	let a = n(/* @__PURE__ */ new Set()), o = n(/* @__PURE__ */ new Map()), s = n(!1);
+	return r(i.watchKeys, (n, r) => {
+		if (!s.value) return;
+		s.value = !1;
+		let c = new Set(r ?? []), l = n.find((e) => !c.has(e));
+		if (l === void 0 || !i.isInlineEdit.value) return;
+		let u = i.findEntry(l);
+		u && (o.value.has(l) || o.value.set(l, e(u.data)), a.value.add(l), i.afterAutoOpen?.(l), t(() => {
+			t(() => {
+				(i.rowsContainer.value?.querySelector(`${i.rowSelector}[data-id="${CSS.escape(String(l))}"]`))?.scrollIntoView({
+					block: "center",
+					behavior: "smooth"
+				});
+			});
+		}));
+	}), {
+		editingKeys: a,
+		editingSnapshots: o,
+		pendingAutoOpen: s,
+		clearEditing: () => {
+			a.value.clear(), o.value.clear();
+		},
+		beginEdit: (t) => {
+			o.value.has(t.key) || o.value.set(t.key, e(t.raw)), a.value.add(t.key);
+		},
+		cancelEdit: (e) => {
+			let t = o.value.get(e.key);
+			t && i.restoreSnapshot(e.key, t), a.value.delete(e.key), o.value.delete(e.key);
+		},
+		commitEdit: (e) => {
+			a.value.delete(e.key), o.value.delete(e.key);
+		},
+		closeEdit: (e) => {
+			a.value.delete(e.key), o.value.delete(e.key);
+		},
+		requestAutoOpen: () => {
+			s.value = !0;
+		}
+	};
+}
+//#endregion
+export { i as useInlineEditing };
+
+//# sourceMappingURL=useInlineEditing.js.map

package/dist/domains/listEditor/composables/useInlineEditing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInlineEditing.js","names":["useInlineEditing","editingKeys","ref","editingSnapshots","pendingAutoOpen","watch","options","oldSet","oldKeys","addedKey","newKeys","k","entry","cloneDeep","nextTick","vi","snap"],"sources":["../../../../src/domains/listEditor/composables/useInlineEditing.ts"],"sourcesContent":["import { nextTick, ref, watch, type ComputedRef, type Ref } from 'vue'\nimport { cloneDeep } from '@/shared/utils/common'\nimport type { ListEditorKey } from '@/domains/listEditor/types/listEditorTypes'\n\nexport interface UseInlineEditingOptions<TItem> {\n  /** Scrolling container; scopes the auto-scroll `querySelector` to this instance. */\n  rowsContainer: Ref<HTMLElement | null>\n  /** Per-row selector to scroll into view (flat `.a-le-row`, nested `.a-le-row-wrapper`); needs a `[data-id]`. */\n  rowSelector: string\n  /** When false, auto-open-on-add is a no-op (e.g. chips mode, or no `#item` slot). */\n  isInlineEdit: ComputedRef<boolean>\n  /** Revert callback — the flat/nested `updateItem` signatures differ, so the consumer applies the snapshot. */\n  restoreSnapshot: (key: ListEditorKey, data: TItem) => void\n  /** Watch source: keys the auto-open reacts to (flat maps modelValue, nested walks the tree). */\n  watchKeys: () => ListEditorKey[]\n  /** Resolve raw data for a key to snapshot before editing; `null` aborts the auto-open. */\n  findEntry: (key: ListEditorKey) => { data: TItem } | null\n  /** Nested-only: expand ancestors so the auto-opened row is visible. */\n  afterAutoOpen?: (key: ListEditorKey) => void\n}\n\nexport interface UseInlineEditingApi<TItem, ViewItem> {\n  editingKeys: Ref<Set<ListEditorKey>>\n  editingSnapshots: Ref<Map<ListEditorKey, TItem>>\n  pendingAutoOpen: Ref<boolean>\n  clearEditing: () => void\n  beginEdit: (vi: ViewItem) => void\n  cancelEdit: (vi: ViewItem) => void\n  commitEdit: (vi: ViewItem) => void\n  closeEdit: (vi: ViewItem) => void\n  requestAutoOpen: () => void\n}\n\n/**\n * Inline-edit lifecycle shared across list-editor variants: the editing-key\n * set, per-key revert snapshots, and the auto-open + scroll-into-view of a\n * newly appended row. Agnostic of the editor composable via `restoreSnapshot`.\n */\nexport function useInlineEditing<\n  TItem extends Record<string, any>,\n  ViewItem extends { key: ListEditorKey; raw: TItem },\n>(options: UseInlineEditingOptions<TItem>): UseInlineEditingApi<TItem, ViewItem> {\n  const editingKeys = ref<Set<ListEditorKey>>(new Set())\n  const editingSnapshots = ref(new Map<ListEditorKey, TItem>()) as Ref<Map<ListEditorKey, TItem>>\n  const pendingAutoOpen = ref(false)\n\n  const clearEditing = () => {\n    editingKeys.value.clear()\n    editingSnapshots.value.clear()\n  }\n\n  const beginEdit = (vi: ViewItem) => {\n    if (!editingSnapshots.value.has(vi.key)) {\n      editingSnapshots.value.set(vi.key, cloneDeep(vi.raw) as TItem)\n    }\n    editingKeys.value.add(vi.key)\n  }\n\n  const cancelEdit = (vi: ViewItem) => {\n    const snap = editingSnapshots.value.get(vi.key)\n    if (snap) {\n      options.restoreSnapshot(vi.key, snap as TItem)\n    }\n    editingKeys.value.delete(vi.key)\n    editingSnapshots.value.delete(vi.key)\n  }\n\n  const commitEdit = (vi: ViewItem) => {\n    editingKeys.value.delete(vi.key)\n    editingSnapshots.value.delete(vi.key)\n  }\n\n  const closeEdit = (vi: ViewItem) => {\n    editingKeys.value.delete(vi.key)\n    editingSnapshots.value.delete(vi.key)\n  }\n\n  const requestAutoOpen = () => {\n    pendingAutoOpen.value = true\n  }\n\n  watch(options.watchKeys, (newKeys, oldKeys) => {\n    if (!pendingAutoOpen.value) return\n    pendingAutoOpen.value = false\n    const oldSet = new Set(oldKeys ?? [])\n    const addedKey = newKeys.find((k) => !oldSet.has(k))\n    if (addedKey === undefined) return\n    if (!options.isInlineEdit.value) return\n    const entry = options.findEntry(addedKey)\n    if (!entry) return\n    if (!editingSnapshots.value.has(addedKey)) {\n      editingSnapshots.value.set(addedKey, cloneDeep(entry.data) as TItem)\n    }\n    editingKeys.value.add(addedKey)\n    options.afterAutoOpen?.(addedKey)\n    // Double nextTick so the inline-edit body has rendered before we scroll;\n    // `block: 'center'` since `'nearest'` no-ops on partially-visible rows.\n    nextTick(() => {\n      nextTick(() => {\n        const el = options.rowsContainer.value?.querySelector<HTMLElement>(\n          `${options.rowSelector}[data-id=\"${CSS.escape(String(addedKey))}\"]`\n        )\n        el?.scrollIntoView({ block: 'center', behavior: 'smooth' })\n      })\n    })\n  })\n\n  return {\n    editingKeys,\n    editingSnapshots,\n    pendingAutoOpen,\n    clearEditing,\n    beginEdit,\n    cancelEdit,\n    commitEdit,\n    closeEdit,\n    requestAutoOpen,\n  }\n}\n"],"mappings":";;;AAsCA,SAAgBA,EAGd,GAA+E;CAC/E,IAAMC,IAAcC,kBAAwB,IAAI,IAAI,CAAC,GAC/CC,IAAmBD,kBAAI,IAAI,IAA0B,CAAC,GACtDE,IAAkBF,EAAI,EAAK;CA+DjC,OA1BAG,EAAMC,EAAQ,YAAY,GAAS,MAAY;EAC7C,IAAI,CAACF,EAAgB,OAAO;EAC5B,EAAgB,QAAQ;EACxB,IAAMG,IAAS,IAAI,IAAIC,KAAW,CAAC,CAAC,GAC9BC,IAAWC,EAAQ,MAAM,MAAM,CAACH,EAAO,IAAII,CAAC,CAAC;EAEnD,IADIF,MAAa,KAAA,KACb,CAACH,EAAQ,aAAa,OAAO;EACjC,IAAMM,IAAQN,EAAQ,UAAUG,CAAQ;EACxC,AAAKG,MACAT,EAAiB,MAAM,IAAIM,CAAQ,KACtCN,EAAiB,MAAM,IAAIM,GAAUI,EAAUD,EAAM,IAAI,CAAU,GAErEX,EAAY,MAAM,IAAIQ,CAAQ,GAC9BH,EAAQ,gBAAgBG,CAAQ,GAGhCK,QAAe;GACb,QAAe;IAIb,CAHWR,EAAQ,cAAc,OAAO,cACtC,GAAGA,EAAQ,YAAY,YAAY,IAAI,OAAO,OAAOG,CAAQ,CAAC,EAAE,GAClE,EAAA,EACI,eAAe;KAAE,OAAO;KAAU,UAAU;IAAS,CAAC;GAC5D,CAAC;EACH,CAAC;CACH,CAAC,GAEM;EACL;EACA;EACA;EACA,oBAjEyB;GAEzB,AADAR,EAAY,MAAM,MAAM,GACxBE,EAAiB,MAAM,MAAM;EAC/B;EA+DE,YA7DiB,MAAiB;GAIlC,AAHKA,EAAiB,MAAM,IAAIY,EAAG,GAAG,KACpCZ,EAAiB,MAAM,IAAIY,EAAG,KAAKF,EAAUE,EAAG,GAAG,CAAU,GAE/Dd,EAAY,MAAM,IAAIc,EAAG,GAAG;EAC9B;EAyDE,aAvDkB,MAAiB;GACnC,IAAMC,IAAOb,EAAiB,MAAM,IAAIY,EAAG,GAAG;GAK9C,AAJIC,KACFV,EAAQ,gBAAgBS,EAAG,KAAKC,CAAa,GAE/Cf,EAAY,MAAM,OAAOc,EAAG,GAAG,GAC/BZ,EAAiB,MAAM,OAAOY,EAAG,GAAG;EACtC;EAiDE,aA/CkB,MAAiB;GAEnC,AADAd,EAAY,MAAM,OAAOc,EAAG,GAAG,GAC/BZ,EAAiB,MAAM,OAAOY,EAAG,GAAG;EACtC;EA6CE,YA3CiB,MAAiB;GAElC,AADAd,EAAY,MAAM,OAAOc,EAAG,GAAG,GAC/BZ,EAAiB,MAAM,OAAOY,EAAG,GAAG;EACtC;EAyCE,uBAvC4B;GAC5B,EAAgB,QAAQ;EAC1B;CAsCA;AACF"}

package/dist/domains/listEditor/composables/useIsTouchDevice.d.ts

@@ -0,0 +1,3 @@
+import { ComputedRef } from 'vue';
+export declare function useIsTouchDevice(): ComputedRef<boolean>;
+export declare function useHasCoarsePointer(): ComputedRef<boolean>;

package/dist/domains/listEditor/composables/useIsTouchDevice.js

@@ -0,0 +1,15 @@
+import { computed as e } from "vue";
+import { useMediaQuery as t } from "@vueuse/core";
+//#region src/domains/listEditor/composables/useIsTouchDevice.ts
+function n() {
+	let n = t("(any-pointer: fine)");
+	return e(() => !n.value);
+}
+function r() {
+	let n = t("(any-pointer: coarse)");
+	return e(() => n.value);
+}
+//#endregion
+export { r as useHasCoarsePointer, n as useIsTouchDevice };
+
+//# sourceMappingURL=useIsTouchDevice.js.map

package/dist/domains/listEditor/composables/useIsTouchDevice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsTouchDevice.js","names":["useIsTouchDevice","hasFinePointer","useMediaQuery","computed","useHasCoarsePointer","coarsePointer"],"sources":["../../../../src/domains/listEditor/composables/useIsTouchDevice.ts"],"sourcesContent":["import { computed, type ComputedRef } from 'vue'\nimport { useMediaQuery } from '@vueuse/core'\n\n// Which reorder affordances does this device get? The two questions are deliberately independent,\n// because a device can answer yes to both — and then it gets both.\n//\n// The rule (Pointer Events / dnd-kit / pragmatic-drag-and-drop all land here): never detect a device\n// in order to HIDE a way to act. A hybrid — a touchscreen laptop, a convertible, a stylus tablet —\n// switches input mid-session, so any prediction strands the user at the exact moment they reach for\n// the row: fold the laptop, try to drag with a finger, and the page scrolls instead. Offering both\n// removes that moment entirely, and it is what the rest of this library already does — outside the\n// chips layout the arrows are always present in reorder mode and the handle is an addition to them.\n\n// Can the user press-grab-move-release the way a mouse does? `(any-pointer: fine)` is true when ANY\n// available input is precise — a mouse, a trackpad or a pen, all of which can drag. Its negation is\n// \"coarse input only\", the one case where dragging genuinely does not work.\n//\n// Note this is NOT \"is it a phone\": a laptop with a touchscreen driven by a mouse must keep its\n// handle. Asking `(any-pointer: coarse)` here instead took it away, and two users on identical\n// browsers saw different affordances purely because one laptop had a touch panel.\n//\n// Where matchMedia is unavailable the query reads false → treated as touch → arrows, the safe\n// direction: the fallback always works.\nexport function useIsTouchDevice(): ComputedRef<boolean> {\n  const hasFinePointer = useMediaQuery('(any-pointer: fine)')\n\n  return computed<boolean>(() => !hasFinePointer.value)\n}\n\n// Could a finger be used here at all? Deliberately NOT the inverse of the above — a hybrid answers\n// true to both. Layouts that would otherwise swap the arrows out for the handle keep them wherever\n// this is true, so a user who puts the mouse down is never left with an affordance they cannot use.\nexport function useHasCoarsePointer(): ComputedRef<boolean> {\n  const coarsePointer = useMediaQuery('(any-pointer: coarse)')\n\n  return computed<boolean>(() => coarsePointer.value)\n}\n"],"mappings":";;;AAuBA,SAAgBA,IAAyC;CACvD,IAAMC,IAAiBC,EAAc,qBAAqB;CAE1D,OAAOC,QAAwB,CAACF,EAAe,KAAK;AACtD;AAKA,SAAgBG,IAA4C;CAC1D,IAAMC,IAAgBH,EAAc,uBAAuB;CAE3D,OAAOC,QAAwBE,EAAc,KAAK;AACpD"}

package/dist/domains/listEditor/composables/useKeyboardNav.d.ts

@@ -0,0 +1,42 @@
+import { ComputedRef, Ref } from 'vue';
+import { ListEditorKey } from '../types/listEditorTypes';
+export interface KeyboardNavViewItem {
+    key: ListEditorKey;
+    expanded?: boolean;
+    canExpand?: boolean;
+    canIndent?: boolean;
+    canOutdent?: boolean;
+}
+export type KeyboardNavVariant = 'flat' | 'sortable' | 'nested';
+export interface KeyboardNavOptions {
+    viewItems: ComputedRef<KeyboardNavViewItem[]>;
+    variant: KeyboardNavVariant;
+    isReorderMode: Ref<boolean> | ComputedRef<boolean>;
+    disabled?: Ref<boolean> | ComputedRef<boolean>;
+    isEditing: (key: ListEditorKey) => boolean;
+    onToggleEdit?: (key: ListEditorKey) => void;
+    onCancelEdit?: (key: ListEditorKey) => void;
+    onMoveUp?: (key: ListEditorKey) => void;
+    onMoveDown?: (key: ListEditorKey) => void;
+    onMoveTop?: (key: ListEditorKey) => void;
+    onMoveBottom?: (key: ListEditorKey) => void;
+    onIndent?: (key: ListEditorKey) => void;
+    onOutdent?: (key: ListEditorKey) => void;
+    onToggleChildren?: (key: ListEditorKey, expand: boolean) => void;
+    onCancelReorder?: () => void;
+}
+export interface KeyboardNavApi {
+    focusedKey: Ref<ListEditorKey | null>;
+    grabbedKey: Ref<ListEditorKey | null>;
+    /** 0-based index of the grabbed row in the current ordering, or -1 if no grab. */
+    grabbedIndex: ComputedRef<number>;
+    /** Total count of rows currently in the editor. */
+    totalCount: ComputedRef<number>;
+    isFocused: (key: ListEditorKey) => boolean;
+    isGrabbed: (key: ListEditorKey) => boolean;
+    rowTabindex: (key: ListEditorKey) => number;
+    setFocus: (key: ListEditorKey | null) => void;
+    releaseGrab: () => void;
+    handleKeydown: (key: ListEditorKey, e: KeyboardEvent) => void;
+}
+export declare function useKeyboardNav(options: KeyboardNavOptions): KeyboardNavApi;

package/dist/domains/listEditor/composables/useKeyboardNav.js

@@ -0,0 +1,106 @@
+import { computed as e, ref as t, watch as n } from "vue";
+//#region src/domains/listEditor/composables/useKeyboardNav.ts
+function r(r) {
+	let i = t(null), a = t(null), o = e(() => r.viewItems.value.map((e) => e.key)), s = (e) => i.value === e, c = (e) => a.value === e, l = e(() => a.value === null ? -1 : o.value.indexOf(a.value)), u = e(() => o.value.length);
+	function d(e) {
+		let t = o.value;
+		return t.length === 0 ? -1 : i.value === null ? t[0] === e ? 0 : -1 : i.value === e ? 0 : -1;
+	}
+	function f(e) {
+		e !== null && typeof document < "u" && Promise.resolve().then(() => {
+			document.querySelector(`[data-id="${CSS.escape(String(e))}"]`)?.focus();
+		});
+	}
+	function p(e) {
+		i.value = e, f(e);
+	}
+	let m = [...o.value];
+	n(o, (e) => {
+		if (i.value === null || e.includes(i.value)) {
+			m = [...e];
+			return;
+		}
+		if (e.length === 0) {
+			i.value = null, m = [];
+			return;
+		}
+		let t = m.indexOf(i.value);
+		p(e[Math.min(Math.max(t, 0), e.length - 1)]), m = [...e];
+	}), n(o, (e) => {
+		a.value !== null && !e.includes(a.value) && (a.value = null);
+	});
+	function h() {
+		a.value = null;
+	}
+	function g(e) {
+		return !!e?.matches?.("input, textarea, select, [contenteditable], [contenteditable=\"true\"]");
+	}
+	function _(e, t) {
+		if (r.disabled?.value) return;
+		let n = o.value, i = n.indexOf(e);
+		if (i < 0) return;
+		let s = r.viewItems.value[i], c = r.isReorderMode.value, l = a.value === e, u = a.value !== null, d = g(t.target);
+		switch (t.key) {
+			case "ArrowUp":
+				if (d) return;
+				t.preventDefault(), c && l ? r.onMoveUp?.(e) : i > 0 && p(n[i - 1]);
+				return;
+			case "ArrowDown":
+				if (d) return;
+				t.preventDefault(), c && l ? r.onMoveDown?.(e) : i < n.length - 1 && p(n[i + 1]);
+				return;
+			case "Home":
+				if (d) return;
+				t.preventDefault(), c && l ? r.onMoveTop?.(e) : n.length > 0 && p(n[0]);
+				return;
+			case "End":
+				if (d) return;
+				t.preventDefault(), c && l ? r.onMoveBottom?.(e) : n.length > 0 && p(n[n.length - 1]);
+				return;
+			case "ArrowLeft":
+				if (r.variant !== "nested" || d) return;
+				t.preventDefault(), c && l && s.canOutdent ? r.onOutdent?.(e) : s.expanded && r.onToggleChildren?.(e, !1);
+				return;
+			case "ArrowRight":
+				if (r.variant !== "nested" || d) return;
+				t.preventDefault(), c && l && s.canIndent ? r.onIndent?.(e) : s.canExpand && !s.expanded && r.onToggleChildren?.(e, !0);
+				return;
+			case "Enter":
+			case " ":
+				if (d) return;
+				t.preventDefault(), c ? l ? a.value = null : a.value = e : r.onToggleEdit?.(e);
+				return;
+			case "Escape":
+				if (u) {
+					t.preventDefault(), a.value = null;
+					return;
+				}
+				if (c) {
+					t.preventDefault(), r.onCancelReorder?.();
+					return;
+				}
+				if (r.isEditing(e)) {
+					t.preventDefault(), r.onCancelEdit?.(e);
+					return;
+				}
+				return;
+			default: return;
+		}
+	}
+	return {
+		focusedKey: i,
+		grabbedKey: a,
+		grabbedIndex: l,
+		totalCount: u,
+		isFocused: s,
+		isGrabbed: c,
+		rowTabindex: d,
+		setFocus: p,
+		releaseGrab: h,
+		handleKeydown: _
+	};
+}
+//#endregion
+export { r as useKeyboardNav };
+
+//# sourceMappingURL=useKeyboardNav.js.map

package/dist/domains/listEditor/composables/useKeyboardNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardNav.js","names":["el","useKeyboardNav","focusedKey","ref","grabbedKey","orderedKeys","computed","options","v","isFocused","key","isGrabbed","grabbedIndex","totalCount","rowTabindex","ordered","focusRowElement","setFocus","prevOrderedKeys","watch","now","oldIndex","releaseGrab","isFormField","target","handleKeydown","focusedItem","inReorder","isGrabbedNow","grabbedSomewhere","onFormField","e"],"sources":["../../../../src/domains/listEditor/composables/useKeyboardNav.ts"],"sourcesContent":["import { computed, ref, watch, type ComputedRef, type Ref } from 'vue'\nimport type { ListEditorKey } from '@/domains/listEditor/types/listEditorTypes'\n\nexport interface KeyboardNavViewItem {\n  key: ListEditorKey\n  expanded?: boolean\n  canExpand?: boolean\n  canIndent?: boolean\n  canOutdent?: boolean\n}\n\nexport type KeyboardNavVariant = 'flat' | 'sortable' | 'nested'\n\nexport interface KeyboardNavOptions {\n  viewItems: ComputedRef<KeyboardNavViewItem[]>\n  variant: KeyboardNavVariant\n  isReorderMode: Ref<boolean> | ComputedRef<boolean>\n  disabled?: Ref<boolean> | ComputedRef<boolean>\n\n  isEditing: (key: ListEditorKey) => boolean\n\n  onToggleEdit?: (key: ListEditorKey) => void\n  onCancelEdit?: (key: ListEditorKey) => void\n\n  onMoveUp?: (key: ListEditorKey) => void\n  onMoveDown?: (key: ListEditorKey) => void\n  onMoveTop?: (key: ListEditorKey) => void\n  onMoveBottom?: (key: ListEditorKey) => void\n\n  onIndent?: (key: ListEditorKey) => void\n  onOutdent?: (key: ListEditorKey) => void\n  onToggleChildren?: (key: ListEditorKey, expand: boolean) => void\n\n  onCancelReorder?: () => void\n}\n\nexport interface KeyboardNavApi {\n  focusedKey: Ref<ListEditorKey | null>\n  grabbedKey: Ref<ListEditorKey | null>\n  /** 0-based index of the grabbed row in the current ordering, or -1 if no grab. */\n  grabbedIndex: ComputedRef<number>\n  /** Total count of rows currently in the editor. */\n  totalCount: ComputedRef<number>\n  isFocused: (key: ListEditorKey) => boolean\n  isGrabbed: (key: ListEditorKey) => boolean\n  rowTabindex: (key: ListEditorKey) => number\n  setFocus: (key: ListEditorKey | null) => void\n  releaseGrab: () => void\n  handleKeydown: (key: ListEditorKey, e: KeyboardEvent) => void\n}\n\n// Roving tabindex + keyboard navigation for list-editor rows. Single tabstop\n// per editor; arrow keys move an internal pointer; reorder mode adds a \"grab\"\n// state where Enter/Space picks up the focused row and arrows move it.\nexport function useKeyboardNav(options: KeyboardNavOptions): KeyboardNavApi {\n  const focusedKey = ref<ListEditorKey | null>(null)\n  const grabbedKey = ref<ListEditorKey | null>(null)\n\n  const orderedKeys = computed<ListEditorKey[]>(() => options.viewItems.value.map((v) => v.key))\n\n  const isFocused = (key: ListEditorKey): boolean => focusedKey.value === key\n  const isGrabbed = (key: ListEditorKey): boolean => grabbedKey.value === key\n\n  const grabbedIndex = computed<number>(() => {\n    if (grabbedKey.value === null) return -1\n    return orderedKeys.value.indexOf(grabbedKey.value)\n  })\n\n  const totalCount = computed<number>(() => orderedKeys.value.length)\n\n  function rowTabindex(key: ListEditorKey): number {\n    const ordered = orderedKeys.value\n    if (ordered.length === 0) return -1\n    if (focusedKey.value === null) return ordered[0] === key ? 0 : -1\n    return focusedKey.value === key ? 0 : -1\n  }\n\n  function focusRowElement(key: ListEditorKey | null) {\n    if (key === null || typeof document === 'undefined') return\n    void Promise.resolve().then(() => {\n      const el = document.querySelector<HTMLElement>(`[data-id=\"${CSS.escape(String(key))}\"]`)\n      el?.focus()\n    })\n  }\n\n  function setFocus(key: ListEditorKey | null) {\n    focusedKey.value = key\n    focusRowElement(key)\n  }\n\n  // When the focused row is removed (e.g. via delete), fall to the row that\n  // took its slot, or to the new last row if it was at the end. Without this,\n  // focus vanishes to <body> after a delete and the user has to Tab back in.\n  // We snapshot the previous ordering so we can look up where the focused key\n  // *was* — by the time the watcher fires, the key is already gone from `now`.\n  // eslint-disable-next-line vue/no-ref-object-reactivity-loss\n  let prevOrderedKeys: ListEditorKey[] = [...orderedKeys.value]\n  watch(orderedKeys, (now) => {\n    if (focusedKey.value === null) {\n      prevOrderedKeys = [...now]\n      return\n    }\n    if (now.includes(focusedKey.value)) {\n      prevOrderedKeys = [...now]\n      return\n    }\n    if (now.length === 0) {\n      focusedKey.value = null\n      prevOrderedKeys = []\n      return\n    }\n    const oldIndex = prevOrderedKeys.indexOf(focusedKey.value)\n    const fallbackIndex = Math.min(Math.max(oldIndex, 0), now.length - 1)\n    setFocus(now[fallbackIndex]!)\n    prevOrderedKeys = [...now]\n  })\n\n  // Releasing a grab when the grabbed row is no longer in the list — keeps the\n  // grab state consistent if the row gets removed externally.\n  watch(orderedKeys, (now) => {\n    if (grabbedKey.value !== null && !now.includes(grabbedKey.value)) {\n      grabbedKey.value = null\n    }\n  })\n\n  function releaseGrab() {\n    grabbedKey.value = null\n  }\n\n  function isFormField(target: EventTarget | null): boolean {\n    const el = target as HTMLElement | null\n    return !!el?.matches?.('input, textarea, select, [contenteditable], [contenteditable=\"true\"]')\n  }\n\n  function handleKeydown(key: ListEditorKey, e: KeyboardEvent) {\n    if (options.disabled?.value) return\n\n    const ordered = orderedKeys.value\n    const i = ordered.indexOf(key)\n    if (i < 0) return\n\n    // `ordered` is these view items' keys, so `i` indexes them too.\n    const focusedItem = options.viewItems.value[i]!\n    const inReorder = options.isReorderMode.value\n    const isGrabbedNow = grabbedKey.value === key\n    const grabbedSomewhere = grabbedKey.value !== null\n\n    // Form fields keep native key behavior (cursor, newlines, selection) for\n    // every key except Escape. Esc still closes the edit panel even mid-typing.\n    const onFormField = isFormField(e.target)\n\n    switch (e.key) {\n      case 'ArrowUp':\n        if (onFormField) return\n        e.preventDefault()\n        if (inReorder && isGrabbedNow) {\n          options.onMoveUp?.(key)\n        } else if (i > 0) {\n          setFocus(ordered[i - 1]!)\n        }\n        return\n\n      case 'ArrowDown':\n        if (onFormField) return\n        e.preventDefault()\n        if (inReorder && isGrabbedNow) {\n          options.onMoveDown?.(key)\n        } else if (i < ordered.length - 1) {\n          setFocus(ordered[i + 1]!)\n        }\n        return\n\n      case 'Home':\n        if (onFormField) return\n        e.preventDefault()\n        if (inReorder && isGrabbedNow) {\n          options.onMoveTop?.(key)\n        } else if (ordered.length > 0) {\n          setFocus(ordered[0]!)\n        }\n        return\n\n      case 'End':\n        if (onFormField) return\n        e.preventDefault()\n        if (inReorder && isGrabbedNow) {\n          options.onMoveBottom?.(key)\n        } else if (ordered.length > 0) {\n          setFocus(ordered[ordered.length - 1]!)\n        }\n        return\n\n      case 'ArrowLeft':\n        if (options.variant !== 'nested' || onFormField) return\n        e.preventDefault()\n        if (inReorder && isGrabbedNow && focusedItem.canOutdent) {\n          options.onOutdent?.(key)\n        } else if (focusedItem.expanded) {\n          options.onToggleChildren?.(key, false)\n        }\n        return\n\n      case 'ArrowRight':\n        if (options.variant !== 'nested' || onFormField) return\n        e.preventDefault()\n        if (inReorder && isGrabbedNow && focusedItem.canIndent) {\n          options.onIndent?.(key)\n        } else if (focusedItem.canExpand && !focusedItem.expanded) {\n          options.onToggleChildren?.(key, true)\n        }\n        return\n\n      case 'Enter':\n      case ' ': // Space\n        if (onFormField) return\n        e.preventDefault()\n        if (inReorder) {\n          if (isGrabbedNow) {\n            grabbedKey.value = null\n          } else {\n            grabbedKey.value = key\n          }\n        } else {\n          options.onToggleEdit?.(key)\n        }\n        return\n\n      case 'Escape':\n        if (grabbedSomewhere) {\n          e.preventDefault()\n          grabbedKey.value = null\n          return\n        }\n        if (inReorder) {\n          e.preventDefault()\n          options.onCancelReorder?.()\n          return\n        }\n        if (options.isEditing(key)) {\n          e.preventDefault()\n          options.onCancelEdit?.(key)\n          return\n        }\n        return\n\n      default:\n        return\n    }\n  }\n\n  return {\n    focusedKey,\n    grabbedKey,\n    grabbedIndex,\n    totalCount,\n    isFocused,\n    isGrabbed,\n    rowTabindex,\n    setFocus,\n    releaseGrab,\n    handleKeydown,\n  }\n}\n"],"mappings":"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"}