@flanksource/clicky-ui 0.3.27 → 0.3.29

package/dist/layout/AppShell.nav.drag.cjs

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const NAV_DRAG_TYPE = "application/x-clicky-nav";
+const NAV_DRAG_ROW_CLASS = "data-[nav-drag=source]:opacity-40 data-[nav-drop=over]:bg-sidebar-accent data-[nav-drop=over]:ring-1 data-[nav-drop=over]:ring-inset data-[nav-drop=over]:ring-sidebar-primary";
+const NAV_DRAG_ZONE_CLASS = "data-[nav-drop=over]:rounded-md data-[nav-drop=over]:outline-1 data-[nav-drop=over]:outline-dashed data-[nav-drop=over]:outline-sidebar-primary";
+function sameTarget(left, right) {
+  return left !== null && right !== void 0 && left.key === right.key && left.kind === right.kind;
+}
+function useNavDrag(drag) {
+  const sourceRef = react.useRef(null);
+  const [source, setSource] = react.useState(null);
+  const [over, setOver] = react.useState(null);
+  const reset = () => {
+    sourceRef.current = null;
+    setSource(null);
+    setOver(null);
+  };
+  const props = ({
+    drag: from,
+    drop: to
+  }) => {
+    var _a;
+    const identity = to ?? from;
+    if (!drag || !identity) return void 0;
+    const draggable = from !== void 0 && (((_a = drag.canDrag) == null ? void 0 : _a.call(drag, from)) ?? true);
+    const accepted = (target) => {
+      var _a2;
+      const dragged = sourceRef.current;
+      return dragged !== null && !sameTarget(dragged, target) && (((_a2 = drag.canDrop) == null ? void 0 : _a2.call(drag, dragged, target)) ?? true) ? dragged : null;
+    };
+    const enterOrOver = (target) => (event) => {
+      event.stopPropagation();
+      if (!accepted(target)) {
+        setOver(null);
+        return;
+      }
+      event.preventDefault();
+      event.dataTransfer.dropEffect = "move";
+      setOver(target);
+    };
+    return {
+      "data-nav-row": identity.kind,
+      ...draggable && from ? {
+        draggable: true,
+        "data-nav-drag": sameTarget(source, from) ? "source" : void 0,
+        onDragStart: (event) => {
+          event.stopPropagation();
+          event.dataTransfer.effectAllowed = "move";
+          event.dataTransfer.setData(NAV_DRAG_TYPE, from.key);
+          event.dataTransfer.setData("text/plain", from.key);
+          sourceRef.current = from;
+          setSource(from);
+        },
+        onDragEnd: reset
+      } : {},
+      ...to !== void 0 ? {
+        "data-nav-drop": sameTarget(over, to) ? "over" : void 0,
+        // A drop target has to cancel dragenter AND dragover — cancelling
+        // only the latter leaves the row a drop target in Chrome but not
+        // for every drag source, so both run the same admission check.
+        onDragEnter: enterOrOver(to),
+        onDragOver: enterOrOver(to),
+        onDragLeave: (event) => {
+          const next = event.relatedTarget;
+          if (next instanceof Node && event.currentTarget.contains(next)) {
+            return;
+          }
+          setOver((current) => sameTarget(current, to) ? null : current);
+        },
+        onDrop: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          const dragged = accepted(to);
+          if (dragged) drag.onDrop(dragged, to);
+          reset();
+        }
+      } : {}
+    };
+  };
+  return { props };
+}
+exports.NAV_DRAG_ROW_CLASS = NAV_DRAG_ROW_CLASS;
+exports.NAV_DRAG_ZONE_CLASS = NAV_DRAG_ZONE_CLASS;
+exports.useNavDrag = useNavDrag;
+//# sourceMappingURL=AppShell.nav.drag.cjs.map

package/dist/layout/AppShell.nav.drag.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.nav.drag.cjs","sources":["../../src/layout/AppShell.nav.drag.tsx"],"sourcesContent":["import { useRef, useState, type DragEvent, type HTMLAttributes } from \"react\";\n\n// Drag-and-drop for the nav rail, kept structural: this module knows about rows,\n// folders and a section root, never about what a consumer moves between them.\n// Native HTML5 drag events are what a sidebar wants — a nav row is an <a>, which\n// the browser already makes draggable, so the alternative is fighting it.\n\n/** Which kind of nav row a drag endpoint is. */\nexport type AppShellNavDropKind = \"item\" | \"group\" | \"section\";\n\n/** One end of a drag: a row's `key` plus what that row is. */\nexport type AppShellNavDropTarget = {\n  key: string;\n  kind: AppShellNavDropKind;\n};\n\nexport type AppShellNavDrag = {\n  /** Rows the user may pick up. Defaults to every row in the section. */\n  canDrag?: (source: AppShellNavDropTarget) => boolean;\n  /** Whether `source` may land on `target`. Defaults to any row but itself. */\n  canDrop?: (\n    source: AppShellNavDropTarget,\n    target: AppShellNavDropTarget,\n  ) => boolean;\n  /** Commits the move. */\n  onDrop: (\n    source: AppShellNavDropTarget,\n    target: AppShellNavDropTarget,\n  ) => void;\n  /**\n   * Key reported for a drop on the section's own space (the heading and the\n   * gaps around the rows) — the tree root in a tree-shaped section. Defaults\n   * to the empty string.\n   */\n  rootKey?: string;\n};\n\n/**\n * Marks the payload as a nav drag so a row cannot be \"dropped\" from an\n * unrelated source; the key rides along for consumers that read the transfer.\n */\nconst NAV_DRAG_TYPE = \"application/x-clicky-nav\";\n\nexport type NavDragProps = HTMLAttributes<HTMLElement> & {\n  /** What this row is — a stable hook for tests and consumer styling. */\n  \"data-nav-row\": AppShellNavDropKind;\n  // `| undefined` is deliberate — exactOptionalPropertyTypes forbids assigning\n  // undefined to a plain optional, and both states are expressed by absence.\n  \"data-nav-drag\"?: \"source\" | undefined;\n  \"data-nav-drop\"?: \"over\" | undefined;\n};\n\nexport type NavDragEndpoints = {\n  /** Identity this row hands over when dragged. Omit for a drop-only zone. */\n  drag?: AppShellNavDropTarget;\n  /** Identity this row accepts drops as. Omit for a drag-only row. */\n  drop?: AppShellNavDropTarget;\n};\n\nexport type NavDragState = {\n  /** Props for one row, or `undefined` when the section has no drag config. */\n  props: (endpoints: NavDragEndpoints) => NavDragProps | undefined;\n};\n\n/** Row styling for both drag states; spread beside the row's own classes. */\nexport const NAV_DRAG_ROW_CLASS =\n  \"data-[nav-drag=source]:opacity-40 data-[nav-drop=over]:bg-sidebar-accent data-[nav-drop=over]:ring-1 data-[nav-drop=over]:ring-inset data-[nav-drop=over]:ring-sidebar-primary\";\n\n/** Section styling: a dashed outline so the root reads as a drop zone. */\nexport const NAV_DRAG_ZONE_CLASS =\n  \"data-[nav-drop=over]:rounded-md data-[nav-drop=over]:outline-1 data-[nav-drop=over]:outline-dashed data-[nav-drop=over]:outline-sidebar-primary\";\n\nfunction sameTarget(\n  left: AppShellNavDropTarget | null,\n  right: AppShellNavDropTarget | undefined,\n): boolean {\n  return (\n    left !== null &&\n    right !== undefined &&\n    left.key === right.key &&\n    left.kind === right.kind\n  );\n}\n\n/**\n * Owns one section's drag state. Called once per section — the rail and the\n * mobile drawer each render their own, which is correct: a drag lives entirely\n * inside the rendering the pointer started in.\n *\n * There is no keyboard equivalent here: a move is a destructive-ish action, and\n * the row's context menu (right-click / Shift+F10) is the accessible path to it.\n */\nexport function useNavDrag(drag: AppShellNavDrag | undefined): NavDragState {\n  // The ref decides, the state only paints. A browser can fire the first\n  // dragover in the same frame as dragstart, so a drop that waited for the\n  // re-render carrying the new source would be refused for the first stretch\n  // of a fast drag — and refusing a dragover means no drop event at all.\n  const sourceRef = useRef<AppShellNavDropTarget | null>(null);\n  const [source, setSource] = useState<AppShellNavDropTarget | null>(null);\n  const [over, setOver] = useState<AppShellNavDropTarget | null>(null);\n\n  const reset = () => {\n    sourceRef.current = null;\n    setSource(null);\n    setOver(null);\n  };\n\n  const props = ({\n    drag: from,\n    drop: to,\n  }: NavDragEndpoints): NavDragProps | undefined => {\n    // No endpoints means the row neither moves nor receives — nothing to wire.\n    const identity = to ?? from;\n    if (!drag || !identity) return undefined;\n    const draggable = from !== undefined && (drag.canDrag?.(from) ?? true);\n    /** The row being dragged, if it may land here — read at event time. */\n    const accepted = (target: AppShellNavDropTarget) => {\n      const dragged = sourceRef.current;\n      return dragged !== null &&\n        !sameTarget(dragged, target) &&\n        (drag.canDrop?.(dragged, target) ?? true)\n        ? dragged\n        : null;\n    };\n    const enterOrOver =\n      (target: AppShellNavDropTarget) => (event: DragEvent<HTMLElement>) => {\n        // stopPropagation runs even for a refused row: the row under the\n        // pointer is the answer, so a \"no\" here must not bubble up and let an\n        // ancestor zone (the section root) accept the drop behind it.\n        // preventDefault is what actually arms a drop, so it only runs for a\n        // row that accepts.\n        event.stopPropagation();\n        if (!accepted(target)) {\n          setOver(null);\n          return;\n        }\n        event.preventDefault();\n        event.dataTransfer.dropEffect = \"move\";\n        setOver(target);\n      };\n\n    return {\n      \"data-nav-row\": identity.kind,\n      ...(draggable && from\n        ? {\n            draggable: true,\n            \"data-nav-drag\": sameTarget(source, from) ? \"source\" : undefined,\n            onDragStart: (event: DragEvent<HTMLElement>) => {\n              // A nested row must not also start its ancestor folder's drag.\n              event.stopPropagation();\n              event.dataTransfer.effectAllowed = \"move\";\n              // Overwrites the URL payload the browser puts on an anchor drag.\n              event.dataTransfer.setData(NAV_DRAG_TYPE, from.key);\n              event.dataTransfer.setData(\"text/plain\", from.key);\n              sourceRef.current = from;\n              setSource(from);\n            },\n            onDragEnd: reset,\n          }\n        : {}),\n      ...(to !== undefined\n        ? {\n            \"data-nav-drop\": sameTarget(over, to) ? \"over\" : undefined,\n            // A drop target has to cancel dragenter AND dragover — cancelling\n            // only the latter leaves the row a drop target in Chrome but not\n            // for every drag source, so both run the same admission check.\n            onDragEnter: enterOrOver(to),\n            onDragOver: enterOrOver(to),\n            onDragLeave: (event: DragEvent<HTMLElement>) => {\n              // dragleave also fires when the pointer crosses into a child of\n              // this row; only a leave that exits the row should clear it.\n              const next = event.relatedTarget;\n              if (next instanceof Node && event.currentTarget.contains(next)) {\n                return;\n              }\n              setOver((current) => (sameTarget(current, to) ? null : current));\n            },\n            onDrop: (event: DragEvent<HTMLElement>) => {\n              event.preventDefault();\n              event.stopPropagation();\n              const dragged = accepted(to);\n              if (dragged) drag.onDrop(dragged, to);\n              reset();\n            },\n          }\n        : {}),\n    };\n  };\n\n  return { props };\n}\n"],"names":["useRef","useState","_a"],"mappings":";;;AAyCA,MAAM,gBAAgB;AAwBf,MAAM,qBACX;AAGK,MAAM,sBACX;AAEF,SAAS,WACP,MACA,OACS;AACT,SACE,SAAS,QACT,UAAU,UACV,KAAK,QAAQ,MAAM,OACnB,KAAK,SAAS,MAAM;AAExB;AAUO,SAAS,WAAW,MAAiD;AAK1E,QAAM,YAAYA,MAAAA,OAAqC,IAAI;AAC3D,QAAM,CAAC,QAAQ,SAAS,IAAIC,MAAAA,SAAuC,IAAI;AACvE,QAAM,CAAC,MAAM,OAAO,IAAIA,MAAAA,SAAuC,IAAI;AAEnE,QAAM,QAAQ,MAAM;AAClB,cAAU,UAAU;AACpB,cAAU,IAAI;AACd,YAAQ,IAAI;AAAA,EACd;AAEA,QAAM,QAAQ,CAAC;AAAA,IACb,MAAM;AAAA,IACN,MAAM;AAAA,EAAA,MAC0C;;AAEhD,UAAM,WAAW,MAAM;AACvB,QAAI,CAAC,QAAQ,CAAC,SAAU,QAAO;AAC/B,UAAM,YAAY,SAAS,aAAc,UAAK,YAAL,8BAAe,UAAS;AAEjE,UAAM,WAAW,CAAC,WAAkC;;AAClD,YAAM,UAAU,UAAU;AAC1B,aAAO,YAAY,QACjB,CAAC,WAAW,SAAS,MAAM,QAC1BC,MAAA,KAAK,YAAL,gBAAAA,IAAA,WAAe,SAAS,YAAW,QAClC,UACA;AAAA,IACN;AACA,UAAM,cACJ,CAAC,WAAkC,CAAC,UAAkC;AAMpE,YAAM,gBAAA;AACN,UAAI,CAAC,SAAS,MAAM,GAAG;AACrB,gBAAQ,IAAI;AACZ;AAAA,MACF;AACA,YAAM,eAAA;AACN,YAAM,aAAa,aAAa;AAChC,cAAQ,MAAM;AAAA,IAChB;AAEF,WAAO;AAAA,MACL,gBAAgB,SAAS;AAAA,MACzB,GAAI,aAAa,OACb;AAAA,QACE,WAAW;AAAA,QACX,iBAAiB,WAAW,QAAQ,IAAI,IAAI,WAAW;AAAA,QACvD,aAAa,CAAC,UAAkC;AAE9C,gBAAM,gBAAA;AACN,gBAAM,aAAa,gBAAgB;AAEnC,gBAAM,aAAa,QAAQ,eAAe,KAAK,GAAG;AAClD,gBAAM,aAAa,QAAQ,cAAc,KAAK,GAAG;AACjD,oBAAU,UAAU;AACpB,oBAAU,IAAI;AAAA,QAChB;AAAA,QACA,WAAW;AAAA,MAAA,IAEb,CAAA;AAAA,MACJ,GAAI,OAAO,SACP;AAAA,QACE,iBAAiB,WAAW,MAAM,EAAE,IAAI,SAAS;AAAA;AAAA;AAAA;AAAA,QAIjD,aAAa,YAAY,EAAE;AAAA,QAC3B,YAAY,YAAY,EAAE;AAAA,QAC1B,aAAa,CAAC,UAAkC;AAG9C,gBAAM,OAAO,MAAM;AACnB,cAAI,gBAAgB,QAAQ,MAAM,cAAc,SAAS,IAAI,GAAG;AAC9D;AAAA,UACF;AACA,kBAAQ,CAAC,YAAa,WAAW,SAAS,EAAE,IAAI,OAAO,OAAQ;AAAA,QACjE;AAAA,QACA,QAAQ,CAAC,UAAkC;AACzC,gBAAM,eAAA;AACN,gBAAM,gBAAA;AACN,gBAAM,UAAU,SAAS,EAAE;AAC3B,cAAI,QAAS,MAAK,OAAO,SAAS,EAAE;AACpC,gBAAA;AAAA,QACF;AAAA,MAAA,IAEF,CAAA;AAAA,IAAC;AAAA,EAET;AAEA,SAAO,EAAE,MAAA;AACX;;;;"}

package/dist/layout/AppShell.nav.drag.d.ts

@@ -0,0 +1,52 @@
+import { HTMLAttributes } from '../../../../node_modules/@types/react/index.d.ts';
+/** Which kind of nav row a drag endpoint is. */
+export type AppShellNavDropKind = "item" | "group" | "section";
+/** One end of a drag: a row's `key` plus what that row is. */
+export type AppShellNavDropTarget = {
+    key: string;
+    kind: AppShellNavDropKind;
+};
+export type AppShellNavDrag = {
+    /** Rows the user may pick up. Defaults to every row in the section. */
+    canDrag?: (source: AppShellNavDropTarget) => boolean;
+    /** Whether `source` may land on `target`. Defaults to any row but itself. */
+    canDrop?: (source: AppShellNavDropTarget, target: AppShellNavDropTarget) => boolean;
+    /** Commits the move. */
+    onDrop: (source: AppShellNavDropTarget, target: AppShellNavDropTarget) => void;
+    /**
+     * Key reported for a drop on the section's own space (the heading and the
+     * gaps around the rows) — the tree root in a tree-shaped section. Defaults
+     * to the empty string.
+     */
+    rootKey?: string;
+};
+export type NavDragProps = HTMLAttributes<HTMLElement> & {
+    /** What this row is — a stable hook for tests and consumer styling. */
+    "data-nav-row": AppShellNavDropKind;
+    "data-nav-drag"?: "source" | undefined;
+    "data-nav-drop"?: "over" | undefined;
+};
+export type NavDragEndpoints = {
+    /** Identity this row hands over when dragged. Omit for a drop-only zone. */
+    drag?: AppShellNavDropTarget;
+    /** Identity this row accepts drops as. Omit for a drag-only row. */
+    drop?: AppShellNavDropTarget;
+};
+export type NavDragState = {
+    /** Props for one row, or `undefined` when the section has no drag config. */
+    props: (endpoints: NavDragEndpoints) => NavDragProps | undefined;
+};
+/** Row styling for both drag states; spread beside the row's own classes. */
+export declare const NAV_DRAG_ROW_CLASS = "data-[nav-drag=source]:opacity-40 data-[nav-drop=over]:bg-sidebar-accent data-[nav-drop=over]:ring-1 data-[nav-drop=over]:ring-inset data-[nav-drop=over]:ring-sidebar-primary";
+/** Section styling: a dashed outline so the root reads as a drop zone. */
+export declare const NAV_DRAG_ZONE_CLASS = "data-[nav-drop=over]:rounded-md data-[nav-drop=over]:outline-1 data-[nav-drop=over]:outline-dashed data-[nav-drop=over]:outline-sidebar-primary";
+/**
+ * Owns one section's drag state. Called once per section — the rail and the
+ * mobile drawer each render their own, which is correct: a drag lives entirely
+ * inside the rendering the pointer started in.
+ *
+ * There is no keyboard equivalent here: a move is a destructive-ish action, and
+ * the row's context menu (right-click / Shift+F10) is the accessible path to it.
+ */
+export declare function useNavDrag(drag: AppShellNavDrag | undefined): NavDragState;
+//# sourceMappingURL=AppShell.nav.drag.d.ts.map

package/dist/layout/AppShell.nav.drag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.nav.drag.d.ts","sourceRoot":"","sources":["../../src/layout/AppShell.nav.drag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoC,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAO9E,gDAAgD;AAChD,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAE/D,8DAA8D;AAC9D,MAAM,MAAM,qBAAqB,GAAG;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,mBAAmB,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,uEAAuE;IACvE,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,OAAO,CAAC;IACrD,6EAA6E;IAC7E,OAAO,CAAC,EAAE,CACR,MAAM,EAAE,qBAAqB,EAC7B,MAAM,EAAE,qBAAqB,KAC1B,OAAO,CAAC;IACb,wBAAwB;IACxB,MAAM,EAAE,CACN,MAAM,EAAE,qBAAqB,EAC7B,MAAM,EAAE,qBAAqB,KAC1B,IAAI,CAAC;IACV;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAQF,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACvD,uEAAuE;IACvE,cAAc,EAAE,mBAAmB,CAAC;IAGpC,eAAe,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACvC,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,4EAA4E;IAC5E,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAC7B,oEAAoE;IACpE,IAAI,CAAC,EAAE,qBAAqB,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,6EAA6E;IAC7E,KAAK,EAAE,CAAC,SAAS,EAAE,gBAAgB,KAAK,YAAY,GAAG,SAAS,CAAC;CAClE,CAAC;AAEF,6EAA6E;AAC7E,eAAO,MAAM,kBAAkB,mLACmJ,CAAC;AAEnL,0EAA0E;AAC1E,eAAO,MAAM,mBAAmB,oJACmH,CAAC;AAcpJ;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,eAAe,GAAG,SAAS,GAAG,YAAY,CAkG1E"}

package/dist/layout/AppShell.nav.drag.js

@@ -0,0 +1,86 @@
+import { useRef, useState } from "react";
+const NAV_DRAG_TYPE = "application/x-clicky-nav";
+const NAV_DRAG_ROW_CLASS = "data-[nav-drag=source]:opacity-40 data-[nav-drop=over]:bg-sidebar-accent data-[nav-drop=over]:ring-1 data-[nav-drop=over]:ring-inset data-[nav-drop=over]:ring-sidebar-primary";
+const NAV_DRAG_ZONE_CLASS = "data-[nav-drop=over]:rounded-md data-[nav-drop=over]:outline-1 data-[nav-drop=over]:outline-dashed data-[nav-drop=over]:outline-sidebar-primary";
+function sameTarget(left, right) {
+  return left !== null && right !== void 0 && left.key === right.key && left.kind === right.kind;
+}
+function useNavDrag(drag) {
+  const sourceRef = useRef(null);
+  const [source, setSource] = useState(null);
+  const [over, setOver] = useState(null);
+  const reset = () => {
+    sourceRef.current = null;
+    setSource(null);
+    setOver(null);
+  };
+  const props = ({
+    drag: from,
+    drop: to
+  }) => {
+    var _a;
+    const identity = to ?? from;
+    if (!drag || !identity) return void 0;
+    const draggable = from !== void 0 && (((_a = drag.canDrag) == null ? void 0 : _a.call(drag, from)) ?? true);
+    const accepted = (target) => {
+      var _a2;
+      const dragged = sourceRef.current;
+      return dragged !== null && !sameTarget(dragged, target) && (((_a2 = drag.canDrop) == null ? void 0 : _a2.call(drag, dragged, target)) ?? true) ? dragged : null;
+    };
+    const enterOrOver = (target) => (event) => {
+      event.stopPropagation();
+      if (!accepted(target)) {
+        setOver(null);
+        return;
+      }
+      event.preventDefault();
+      event.dataTransfer.dropEffect = "move";
+      setOver(target);
+    };
+    return {
+      "data-nav-row": identity.kind,
+      ...draggable && from ? {
+        draggable: true,
+        "data-nav-drag": sameTarget(source, from) ? "source" : void 0,
+        onDragStart: (event) => {
+          event.stopPropagation();
+          event.dataTransfer.effectAllowed = "move";
+          event.dataTransfer.setData(NAV_DRAG_TYPE, from.key);
+          event.dataTransfer.setData("text/plain", from.key);
+          sourceRef.current = from;
+          setSource(from);
+        },
+        onDragEnd: reset
+      } : {},
+      ...to !== void 0 ? {
+        "data-nav-drop": sameTarget(over, to) ? "over" : void 0,
+        // A drop target has to cancel dragenter AND dragover — cancelling
+        // only the latter leaves the row a drop target in Chrome but not
+        // for every drag source, so both run the same admission check.
+        onDragEnter: enterOrOver(to),
+        onDragOver: enterOrOver(to),
+        onDragLeave: (event) => {
+          const next = event.relatedTarget;
+          if (next instanceof Node && event.currentTarget.contains(next)) {
+            return;
+          }
+          setOver((current) => sameTarget(current, to) ? null : current);
+        },
+        onDrop: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          const dragged = accepted(to);
+          if (dragged) drag.onDrop(dragged, to);
+          reset();
+        }
+      } : {}
+    };
+  };
+  return { props };
+}
+export {
+  NAV_DRAG_ROW_CLASS,
+  NAV_DRAG_ZONE_CLASS,
+  useNavDrag
+};
+//# sourceMappingURL=AppShell.nav.drag.js.map

package/dist/layout/AppShell.nav.drag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.nav.drag.js","sources":["../../src/layout/AppShell.nav.drag.tsx"],"sourcesContent":["import { useRef, useState, type DragEvent, type HTMLAttributes } from \"react\";\n\n// Drag-and-drop for the nav rail, kept structural: this module knows about rows,\n// folders and a section root, never about what a consumer moves between them.\n// Native HTML5 drag events are what a sidebar wants — a nav row is an <a>, which\n// the browser already makes draggable, so the alternative is fighting it.\n\n/** Which kind of nav row a drag endpoint is. */\nexport type AppShellNavDropKind = \"item\" | \"group\" | \"section\";\n\n/** One end of a drag: a row's `key` plus what that row is. */\nexport type AppShellNavDropTarget = {\n  key: string;\n  kind: AppShellNavDropKind;\n};\n\nexport type AppShellNavDrag = {\n  /** Rows the user may pick up. Defaults to every row in the section. */\n  canDrag?: (source: AppShellNavDropTarget) => boolean;\n  /** Whether `source` may land on `target`. Defaults to any row but itself. */\n  canDrop?: (\n    source: AppShellNavDropTarget,\n    target: AppShellNavDropTarget,\n  ) => boolean;\n  /** Commits the move. */\n  onDrop: (\n    source: AppShellNavDropTarget,\n    target: AppShellNavDropTarget,\n  ) => void;\n  /**\n   * Key reported for a drop on the section's own space (the heading and the\n   * gaps around the rows) — the tree root in a tree-shaped section. Defaults\n   * to the empty string.\n   */\n  rootKey?: string;\n};\n\n/**\n * Marks the payload as a nav drag so a row cannot be \"dropped\" from an\n * unrelated source; the key rides along for consumers that read the transfer.\n */\nconst NAV_DRAG_TYPE = \"application/x-clicky-nav\";\n\nexport type NavDragProps = HTMLAttributes<HTMLElement> & {\n  /** What this row is — a stable hook for tests and consumer styling. */\n  \"data-nav-row\": AppShellNavDropKind;\n  // `| undefined` is deliberate — exactOptionalPropertyTypes forbids assigning\n  // undefined to a plain optional, and both states are expressed by absence.\n  \"data-nav-drag\"?: \"source\" | undefined;\n  \"data-nav-drop\"?: \"over\" | undefined;\n};\n\nexport type NavDragEndpoints = {\n  /** Identity this row hands over when dragged. Omit for a drop-only zone. */\n  drag?: AppShellNavDropTarget;\n  /** Identity this row accepts drops as. Omit for a drag-only row. */\n  drop?: AppShellNavDropTarget;\n};\n\nexport type NavDragState = {\n  /** Props for one row, or `undefined` when the section has no drag config. */\n  props: (endpoints: NavDragEndpoints) => NavDragProps | undefined;\n};\n\n/** Row styling for both drag states; spread beside the row's own classes. */\nexport const NAV_DRAG_ROW_CLASS =\n  \"data-[nav-drag=source]:opacity-40 data-[nav-drop=over]:bg-sidebar-accent data-[nav-drop=over]:ring-1 data-[nav-drop=over]:ring-inset data-[nav-drop=over]:ring-sidebar-primary\";\n\n/** Section styling: a dashed outline so the root reads as a drop zone. */\nexport const NAV_DRAG_ZONE_CLASS =\n  \"data-[nav-drop=over]:rounded-md data-[nav-drop=over]:outline-1 data-[nav-drop=over]:outline-dashed data-[nav-drop=over]:outline-sidebar-primary\";\n\nfunction sameTarget(\n  left: AppShellNavDropTarget | null,\n  right: AppShellNavDropTarget | undefined,\n): boolean {\n  return (\n    left !== null &&\n    right !== undefined &&\n    left.key === right.key &&\n    left.kind === right.kind\n  );\n}\n\n/**\n * Owns one section's drag state. Called once per section — the rail and the\n * mobile drawer each render their own, which is correct: a drag lives entirely\n * inside the rendering the pointer started in.\n *\n * There is no keyboard equivalent here: a move is a destructive-ish action, and\n * the row's context menu (right-click / Shift+F10) is the accessible path to it.\n */\nexport function useNavDrag(drag: AppShellNavDrag | undefined): NavDragState {\n  // The ref decides, the state only paints. A browser can fire the first\n  // dragover in the same frame as dragstart, so a drop that waited for the\n  // re-render carrying the new source would be refused for the first stretch\n  // of a fast drag — and refusing a dragover means no drop event at all.\n  const sourceRef = useRef<AppShellNavDropTarget | null>(null);\n  const [source, setSource] = useState<AppShellNavDropTarget | null>(null);\n  const [over, setOver] = useState<AppShellNavDropTarget | null>(null);\n\n  const reset = () => {\n    sourceRef.current = null;\n    setSource(null);\n    setOver(null);\n  };\n\n  const props = ({\n    drag: from,\n    drop: to,\n  }: NavDragEndpoints): NavDragProps | undefined => {\n    // No endpoints means the row neither moves nor receives — nothing to wire.\n    const identity = to ?? from;\n    if (!drag || !identity) return undefined;\n    const draggable = from !== undefined && (drag.canDrag?.(from) ?? true);\n    /** The row being dragged, if it may land here — read at event time. */\n    const accepted = (target: AppShellNavDropTarget) => {\n      const dragged = sourceRef.current;\n      return dragged !== null &&\n        !sameTarget(dragged, target) &&\n        (drag.canDrop?.(dragged, target) ?? true)\n        ? dragged\n        : null;\n    };\n    const enterOrOver =\n      (target: AppShellNavDropTarget) => (event: DragEvent<HTMLElement>) => {\n        // stopPropagation runs even for a refused row: the row under the\n        // pointer is the answer, so a \"no\" here must not bubble up and let an\n        // ancestor zone (the section root) accept the drop behind it.\n        // preventDefault is what actually arms a drop, so it only runs for a\n        // row that accepts.\n        event.stopPropagation();\n        if (!accepted(target)) {\n          setOver(null);\n          return;\n        }\n        event.preventDefault();\n        event.dataTransfer.dropEffect = \"move\";\n        setOver(target);\n      };\n\n    return {\n      \"data-nav-row\": identity.kind,\n      ...(draggable && from\n        ? {\n            draggable: true,\n            \"data-nav-drag\": sameTarget(source, from) ? \"source\" : undefined,\n            onDragStart: (event: DragEvent<HTMLElement>) => {\n              // A nested row must not also start its ancestor folder's drag.\n              event.stopPropagation();\n              event.dataTransfer.effectAllowed = \"move\";\n              // Overwrites the URL payload the browser puts on an anchor drag.\n              event.dataTransfer.setData(NAV_DRAG_TYPE, from.key);\n              event.dataTransfer.setData(\"text/plain\", from.key);\n              sourceRef.current = from;\n              setSource(from);\n            },\n            onDragEnd: reset,\n          }\n        : {}),\n      ...(to !== undefined\n        ? {\n            \"data-nav-drop\": sameTarget(over, to) ? \"over\" : undefined,\n            // A drop target has to cancel dragenter AND dragover — cancelling\n            // only the latter leaves the row a drop target in Chrome but not\n            // for every drag source, so both run the same admission check.\n            onDragEnter: enterOrOver(to),\n            onDragOver: enterOrOver(to),\n            onDragLeave: (event: DragEvent<HTMLElement>) => {\n              // dragleave also fires when the pointer crosses into a child of\n              // this row; only a leave that exits the row should clear it.\n              const next = event.relatedTarget;\n              if (next instanceof Node && event.currentTarget.contains(next)) {\n                return;\n              }\n              setOver((current) => (sameTarget(current, to) ? null : current));\n            },\n            onDrop: (event: DragEvent<HTMLElement>) => {\n              event.preventDefault();\n              event.stopPropagation();\n              const dragged = accepted(to);\n              if (dragged) drag.onDrop(dragged, to);\n              reset();\n            },\n          }\n        : {}),\n    };\n  };\n\n  return { props };\n}\n"],"names":["_a"],"mappings":";AAyCA,MAAM,gBAAgB;AAwBf,MAAM,qBACX;AAGK,MAAM,sBACX;AAEF,SAAS,WACP,MACA,OACS;AACT,SACE,SAAS,QACT,UAAU,UACV,KAAK,QAAQ,MAAM,OACnB,KAAK,SAAS,MAAM;AAExB;AAUO,SAAS,WAAW,MAAiD;AAK1E,QAAM,YAAY,OAAqC,IAAI;AAC3D,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAuC,IAAI;AACvE,QAAM,CAAC,MAAM,OAAO,IAAI,SAAuC,IAAI;AAEnE,QAAM,QAAQ,MAAM;AAClB,cAAU,UAAU;AACpB,cAAU,IAAI;AACd,YAAQ,IAAI;AAAA,EACd;AAEA,QAAM,QAAQ,CAAC;AAAA,IACb,MAAM;AAAA,IACN,MAAM;AAAA,EAAA,MAC0C;;AAEhD,UAAM,WAAW,MAAM;AACvB,QAAI,CAAC,QAAQ,CAAC,SAAU,QAAO;AAC/B,UAAM,YAAY,SAAS,aAAc,UAAK,YAAL,8BAAe,UAAS;AAEjE,UAAM,WAAW,CAAC,WAAkC;;AAClD,YAAM,UAAU,UAAU;AAC1B,aAAO,YAAY,QACjB,CAAC,WAAW,SAAS,MAAM,QAC1BA,MAAA,KAAK,YAAL,gBAAAA,IAAA,WAAe,SAAS,YAAW,QAClC,UACA;AAAA,IACN;AACA,UAAM,cACJ,CAAC,WAAkC,CAAC,UAAkC;AAMpE,YAAM,gBAAA;AACN,UAAI,CAAC,SAAS,MAAM,GAAG;AACrB,gBAAQ,IAAI;AACZ;AAAA,MACF;AACA,YAAM,eAAA;AACN,YAAM,aAAa,aAAa;AAChC,cAAQ,MAAM;AAAA,IAChB;AAEF,WAAO;AAAA,MACL,gBAAgB,SAAS;AAAA,MACzB,GAAI,aAAa,OACb;AAAA,QACE,WAAW;AAAA,QACX,iBAAiB,WAAW,QAAQ,IAAI,IAAI,WAAW;AAAA,QACvD,aAAa,CAAC,UAAkC;AAE9C,gBAAM,gBAAA;AACN,gBAAM,aAAa,gBAAgB;AAEnC,gBAAM,aAAa,QAAQ,eAAe,KAAK,GAAG;AAClD,gBAAM,aAAa,QAAQ,cAAc,KAAK,GAAG;AACjD,oBAAU,UAAU;AACpB,oBAAU,IAAI;AAAA,QAChB;AAAA,QACA,WAAW;AAAA,MAAA,IAEb,CAAA;AAAA,MACJ,GAAI,OAAO,SACP;AAAA,QACE,iBAAiB,WAAW,MAAM,EAAE,IAAI,SAAS;AAAA;AAAA;AAAA;AAAA,QAIjD,aAAa,YAAY,EAAE;AAAA,QAC3B,YAAY,YAAY,EAAE;AAAA,QAC1B,aAAa,CAAC,UAAkC;AAG9C,gBAAM,OAAO,MAAM;AACnB,cAAI,gBAAgB,QAAQ,MAAM,cAAc,SAAS,IAAI,GAAG;AAC9D;AAAA,UACF;AACA,kBAAQ,CAAC,YAAa,WAAW,SAAS,EAAE,IAAI,OAAO,OAAQ;AAAA,QACjE;AAAA,QACA,QAAQ,CAAC,UAAkC;AACzC,gBAAM,eAAA;AACN,gBAAM,gBAAA;AACN,gBAAM,UAAU,SAAS,EAAE;AAC3B,cAAI,QAAS,MAAK,OAAO,SAAS,EAAE;AACpC,gBAAA;AAAA,QACF;AAAA,MAAA,IAEF,CAAA;AAAA,IAAC;AAAA,EAET;AAEA,SAAO,EAAE,MAAA;AACX;"}

package/dist/layout/AppShell.nav.js

@@ -4,13 +4,13 @@ import { Icon } from "../data/Icon.js";
 import { cn } from "../lib/utils.js";
 import { ContextMenu } from "../overlay/ContextMenu.js";
 import { useRouter } from "../rpc/router.js";
+import { useNavDrag, NAV_DRAG_ZONE_CLASS, NAV_DRAG_ROW_CLASS } from "./AppShell.nav.drag.js";
 function NavSections({
   sections,
   collapsed,
   groupState,
   onNavigate
 }) {
-  const { renderLink } = useRouter();
   return /* @__PURE__ */ jsx(
     "nav",
     {
@@ -18,66 +18,90 @@ function NavSections({
         "flex flex-col gap-0.5",
         collapsed ? "px-2" : "px-density-2"
       ),
-      children: sections.map((section, index) => {
-        var _a, _b, _c;
-        return /* @__PURE__ */ jsxs(
-          "div",
+      children: sections.map((section, index) => /* @__PURE__ */ jsx(
+        NavSection,
+        {
+          section,
+          collapsed,
+          groupState,
+          ...onNavigate ? { onNavigate } : {}
+        },
+        section.label ?? `section-${index}`
+      ))
+    }
+  );
+}
+function NavSection({
+  section,
+  collapsed,
+  groupState,
+  onNavigate
+}) {
+  var _a, _b, _c, _d;
+  const { renderLink } = useRouter();
+  const dragState = useNavDrag(collapsed ? void 0 : section.drag);
+  const rootDrop = dragState.props({
+    drop: { key: ((_a = section.drag) == null ? void 0 : _a.rootKey) ?? "", kind: "section" }
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex flex-col", rootDrop && NAV_DRAG_ZONE_CLASS),
+      ...rootDrop,
+      children: [
+        section.label && (collapsed ? /* @__PURE__ */ jsx("div", { className: "mx-2 mb-1 mt-3 border-t border-sidebar-border first:mt-1" }) : /* @__PURE__ */ jsx("div", { className: "mb-0.5 mt-3 px-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-sidebar-foreground/55 first:mt-1", children: section.label })),
+        section.variant !== "tree" && ((_b = section.items) == null ? void 0 : _b.map((item) => /* @__PURE__ */ jsx(
+          NavItemRow,
           {
-            className: "flex flex-col",
-            children: [
-              section.label && (collapsed ? /* @__PURE__ */ jsx("div", { className: "mx-2 mb-1 mt-3 border-t border-sidebar-border first:mt-1" }) : /* @__PURE__ */ jsx("div", { className: "mb-0.5 mt-3 px-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-sidebar-foreground/55 first:mt-1", children: section.label })),
-              section.variant !== "tree" && ((_a = section.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ jsx(
-                NavItemRow,
-                {
-                  item,
-                  collapsed,
-                  renderLink,
-                  ...onNavigate ? { onNavigate } : {}
-                },
-                item.key
-              ))),
-              (_b = section.groups) == null ? void 0 : _b.map(
-                (group) => (
-                  // A collapsed rail has no room for group headings, so the whole
-                  // subtree flattens into the icon strip rather than hiding behind
-                  // toggles the user cannot see.
-                  collapsed ? flattenGroup(group).map((item) => /* @__PURE__ */ jsx(
-                    NavItemRow,
-                    {
-                      item,
-                      collapsed: true,
-                      renderLink,
-                      ...onNavigate ? { onNavigate } : {}
-                    },
-                    item.key
-                  )) : /* @__PURE__ */ jsx(
-                    NavGroupRows,
-                    {
-                      group,
-                      variant: section.variant ?? "list",
-                      renderLink,
-                      groupState,
-                      ...onNavigate ? { onNavigate } : {}
-                    },
-                    group.key
-                  )
-                )
-              ),
-              section.variant === "tree" && ((_c = section.items) == null ? void 0 : _c.map((item) => /* @__PURE__ */ jsx(
-                NavItemRow,
-                {
-                  item,
-                  collapsed,
-                  renderLink,
-                  ...onNavigate ? { onNavigate } : {}
-                },
-                item.key
-              )))
-            ]
+            item,
+            collapsed,
+            renderLink,
+            dragState,
+            ...onNavigate ? { onNavigate } : {}
           },
-          section.label ?? `section-${index}`
-        );
-      })
+          item.key
+        ))),
+        (_c = section.groups) == null ? void 0 : _c.map(
+          (group) => (
+            // A collapsed rail has no room for group headings, so the whole
+            // subtree flattens into the icon strip rather than hiding behind
+            // toggles the user cannot see.
+            collapsed ? flattenGroup(group).map((item) => /* @__PURE__ */ jsx(
+              NavItemRow,
+              {
+                item,
+                collapsed: true,
+                renderLink,
+                dragState,
+                ...onNavigate ? { onNavigate } : {}
+              },
+              item.key
+            )) : /* @__PURE__ */ jsx(
+              NavGroupRows,
+              {
+                group,
+                variant: section.variant ?? "list",
+                renderLink,
+                groupState,
+                dragState,
+                ...onNavigate ? { onNavigate } : {}
+              },
+              group.key
+            )
+          )
+        ),
+        section.variant === "tree" && ((_d = section.items) == null ? void 0 : _d.map((item) => /* @__PURE__ */ jsx(
+          NavItemRow,
+          {
+            item,
+            collapsed,
+            renderLink,
+            dragState,
+            ...onNavigate ? { onNavigate } : {}
+          },
+          item.key
+        )))
+      ]
     }
   );
 }
@@ -93,11 +117,18 @@ function NavGroupRows({
   variant,
   renderLink,
   groupState,
+  dragState,
   onNavigate
 }) {
   var _a, _b;
   const [contextTarget, setContextTarget] = useState(null);
   const hasChildren = group.items.length > 0 || (((_a = group.groups) == null ? void 0 : _a.length) ?? 0) > 0;
+  const folder = { key: group.key, kind: "group" };
+  const folderDrag = dragState.props({ drag: folder, drop: folder });
+  const leafFolderDrag = group.item ? dragState.props({
+    drag: { key: group.item.key, kind: "item" },
+    drop: folder
+  }) : void 0;
   const fallback = group.defaultCollapsed ?? false;
   const collapsed = !group.forceExpanded && groupState.isCollapsed(group.key, fallback);
   const toggle = () => groupState.toggle(group.key, fallback);
@@ -114,7 +145,11 @@ function NavGroupRows({
         "div",
         {
           ref: setContextTarget,
-          className: "flex items-center gap-2.5 rounded-md px-density-2 py-1.5 text-[13px] text-sidebar-foreground",
+          className: cn(
+            "flex items-center gap-2.5 rounded-md px-density-2 py-1.5 text-[13px] text-sidebar-foreground",
+            folderDrag && NAV_DRAG_ROW_CLASS
+          ),
+          ...folderDrag,
           children: [
             groupIcon,
             /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children: group.label }),
@@ -140,6 +175,7 @@ function NavGroupRows({
           item: group.item,
           collapsed: false,
           renderLink,
+          dragState,
           ...onNavigate ? { onNavigate } : {}
         }
       ) }),
@@ -155,7 +191,11 @@ function NavGroupRows({
         "div",
         {
           ref: setContextTarget,
-          className: "group/nav flex items-center gap-1",
+          className: cn(
+            "group/nav flex items-center gap-1",
+            leafFolderDrag && NAV_DRAG_ROW_CLASS
+          ),
+          ...leafFolderDrag,
           children: [
             /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
               NavItemRow,
@@ -199,8 +239,10 @@ function NavGroupRows({
           "aria-expanded": !collapsed,
           className: cn(
             "flex items-center gap-2.5 rounded-md px-density-2 py-1.5 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-            variant === "tree" ? "text-[13px] text-sidebar-foreground" : "text-[11px] font-semibold uppercase tracking-[0.14em] text-sidebar-foreground/55"
+            variant === "tree" ? "text-[13px] text-sidebar-foreground" : "text-[11px] font-semibold uppercase tracking-[0.14em] text-sidebar-foreground/55",
+            folderDrag && NAV_DRAG_ROW_CLASS
           ),
+          ...folderDrag,
           children: [
             groupIcon,
             /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children: group.label }),
@@ -225,6 +267,7 @@ function NavGroupRows({
           item,
           collapsed: false,
           renderLink,
+          dragState,
           ...onNavigate ? { onNavigate } : {}
         },
         item.key
@@ -236,6 +279,7 @@ function NavGroupRows({
           variant,
           renderLink,
           groupState,
+          dragState,
           ...onNavigate ? { onNavigate } : {}
         },
         child.key
@@ -246,6 +290,7 @@ function NavGroupRows({
           item,
           collapsed: false,
           renderLink,
+          dragState,
           ...onNavigate ? { onNavigate } : {}
         },
         item.key
@@ -257,9 +302,12 @@ function NavItemRow({
   item,
   collapsed,
   renderLink,
+  dragState,
   onNavigate
 }) {
   const [contextTarget, setContextTarget] = useState(null);
+  const target = { key: item.key, kind: "item" };
+  const dragProps = dragState == null ? void 0 : dragState.props({ drag: target, drop: target });
   const className = cn(
     "flex w-full items-center gap-2.5 rounded-md px-density-2 py-1.5 text-left text-[13px] text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
     collapsed && "justify-center px-0",
@@ -289,18 +337,26 @@ function NavItemRow({
         children
       }
     );
-    if (!item.contextMenu) return externalLink;
-    return /* @__PURE__ */ jsxs("div", { ref: setContextTarget, className: "w-full", children: [
-      externalLink,
-      /* @__PURE__ */ jsx(
-        ContextMenu,
-        {
-          contextTarget,
-          menuLabel: item.contextMenuLabel ?? `${String(item.label)} actions`,
-          menuItems: item.contextMenu
-        }
-      )
-    ] });
+    if (!item.contextMenu && !dragProps) return externalLink;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: setContextTarget,
+        className: cn("w-full", dragProps && NAV_DRAG_ROW_CLASS),
+        ...dragProps,
+        children: [
+          externalLink,
+          item.contextMenu && /* @__PURE__ */ jsx(
+            ContextMenu,
+            {
+              contextTarget,
+              menuLabel: item.contextMenuLabel ?? `${String(item.label)} actions`,
+              menuItems: item.contextMenu
+            }
+          )
+        ]
+      }
+    );
   }
   const link = renderLink({
     key: item.key,
@@ -309,13 +365,14 @@ function NavItemRow({
     children,
     ...title ? { title } : {}
   });
-  if (!onNavigate && !item.contextMenu) return link;
+  if (!onNavigate && !item.contextMenu && !dragProps) return link;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: item.contextMenu ? setContextTarget : void 0,
-      className: "w-full",
+      className: cn("w-full", dragProps && NAV_DRAG_ROW_CLASS),
       ...onNavigate ? { onClick: onNavigate } : {},
+      ...dragProps,
       children: [
         link,
         item.contextMenu && /* @__PURE__ */ jsx(