@marktiderman/genesis-ui 2.6.0 → 2.8.0

package/dist/chunk-PKFDGGZV.js

@@ -0,0 +1,65 @@
+"use client";
+import { useIsMobile } from './chunk-VFO3I7PV.js';
+import { useCallback, useSyncExternalStore, useState } from 'react';
+import { useStorage } from '@marktiderman/genesis-core';
+
+var VIEW_MODES = ["grid", "table", "list"];
+function isViewMode(value) {
+  return typeof value === "string" && VIEW_MODES.includes(value);
+}
+var listeners = /* @__PURE__ */ new Set();
+function subscribe(onChange) {
+  listeners.add(onChange);
+  window.addEventListener("storage", onChange);
+  return () => {
+    listeners.delete(onChange);
+    window.removeEventListener("storage", onChange);
+  };
+}
+function getServerSnapshot() {
+  return null;
+}
+var choiceKey = (key) => `genesis-view-choice-${key}`;
+var legacyKey = (key) => `genesis-view-${key}`;
+function useViewPreference(key, defaultMode = "grid") {
+  const storage = useStorage();
+  const storageKey = choiceKey(key);
+  const isMobile = useIsMobile();
+  const responsive = typeof defaultMode !== "string";
+  const getSnapshot = useCallback(
+    () => storage.getItem(storageKey),
+    [storage, storageKey]
+  );
+  const getLegacySnapshot = useCallback(
+    () => responsive ? null : storage.getItem(legacyKey(key)),
+    [storage, key, responsive]
+  );
+  const stored = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  const legacy = useSyncExternalStore(
+    subscribe,
+    getLegacySnapshot,
+    getServerSnapshot
+  );
+  const chosen = isViewMode(stored) ? stored : isViewMode(legacy) ? legacy : void 0;
+  const fallback = !responsive ? defaultMode : isMobile ? defaultMode.mobile : defaultMode.desktop;
+  const [unsaved, setUnsaved] = useState(void 0);
+  const setMode = useCallback(
+    (mode) => {
+      let saved = null;
+      try {
+        storage.setItem(storageKey, mode);
+        saved = storage.getItem(storageKey);
+      } catch {
+        saved = null;
+      }
+      setUnsaved(saved === mode ? void 0 : mode);
+      for (const listener of listeners) listener();
+    },
+    [storage, storageKey]
+  );
+  return [unsaved ?? chosen ?? fallback, setMode];
+}
+
+export { useViewPreference };
+//# sourceMappingURL=chunk-PKFDGGZV.js.map
+//# sourceMappingURL=chunk-PKFDGGZV.js.map

package/dist/chunk-PKFDGGZV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-view-preference.ts"],"names":[],"mappings":";;;;AAwBA,IAAM,UAAA,GAAkC,CAAC,MAAA,EAAQ,OAAA,EAAS,MAAM,CAAA;AAEhE,SAAS,WAAW,KAAA,EAAmC;AACrD,EAAA,OAAO,OAAO,KAAA,KAAU,QAAA,IAAa,UAAA,CAAiC,SAAS,KAAK,CAAA;AACtF;AAkBA,IAAM,SAAA,uBAAgB,GAAA,EAAgB;AAEtC,SAAS,UAAU,QAAA,EAAkC;AACnD,EAAA,SAAA,CAAU,IAAI,QAAQ,CAAA;AACtB,EAAA,MAAA,CAAO,gBAAA,CAAiB,WAAW,QAAQ,CAAA;AAC3C,EAAA,OAAO,MAAM;AACX,IAAA,SAAA,CAAU,OAAO,QAAQ,CAAA;AACzB,IAAA,MAAA,CAAO,mBAAA,CAAoB,WAAW,QAAQ,CAAA;AAAA,EAChD,CAAA;AACF;AAGA,SAAS,iBAAA,GAA0B;AACjC,EAAA,OAAO,IAAA;AACT;AAWA,IAAM,SAAA,GAAY,CAAC,GAAA,KAAgB,CAAA,oBAAA,EAAuB,GAAG,CAAA,CAAA;AAC7D,IAAM,SAAA,GAAY,CAAC,GAAA,KAAgB,CAAA,aAAA,EAAgB,GAAG,CAAA,CAAA;AAE/C,SAAS,iBAAA,CACd,GAAA,EACA,WAAA,GAA+B,MAAA,EACO;AACtC,EAAA,MAAM,UAAU,UAAA,EAAW;AAC3B,EAAA,MAAM,UAAA,GAAa,UAAU,GAAG,CAAA;AAChC,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM,UAAA,GAAa,OAAO,WAAA,KAAgB,QAAA;AAO1C,EAAA,MAAM,WAAA,GAAc,WAAA;AAAA,IAClB,MAAM,OAAA,CAAQ,OAAA,CAAQ,UAAU,CAAA;AAAA,IAChC,CAAC,SAAS,UAAU;AAAA,GACtB;AACA,EAAA,MAAM,iBAAA,GAAoB,WAAA;AAAA,IACxB,MAAO,UAAA,GAAa,IAAA,GAAO,QAAQ,OAAA,CAAQ,SAAA,CAAU,GAAG,CAAC,CAAA;AAAA,IACzD,CAAC,OAAA,EAAS,GAAA,EAAK,UAAU;AAAA,GAC3B;AACA,EAAA,MAAM,MAAA,GAAS,oBAAA,CAAqB,SAAA,EAAW,WAAA,EAAa,iBAAiB,CAAA;AAC7E,EAAA,MAAM,MAAA,GAAS,oBAAA;AAAA,IACb,SAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,MAAM,MAAA,GAAS,WAAW,MAAM,CAAA,GAC5B,SACA,UAAA,CAAW,MAAM,IACf,MAAA,GACA,MAAA;AAEN,EAAA,MAAM,WAAW,CAAC,UAAA,GACd,cACA,QAAA,GACI,WAAA,CAAY,SACZ,WAAA,CAAY,OAAA;AAKpB,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAA+B,MAAS,CAAA;AAEtE,EAAA,MAAM,OAAA,GAAU,WAAA;AAAA,IACd,CAAC,IAAA,KAAmB;AAClB,MAAA,IAAI,KAAA,GAAuB,IAAA;AAC3B,MAAA,IAAI;AACF,QAAA,OAAA,CAAQ,OAAA,CAAQ,YAAY,IAAI,CAAA;AAChC,QAAA,KAAA,GAAQ,OAAA,CAAQ,QAAQ,UAAU,CAAA;AAAA,MACpC,CAAA,CAAA,MAAQ;AACN,QAAA,KAAA,GAAQ,IAAA;AAAA,MACV;AACA,MAAA,UAAA,CAAW,KAAA,KAAU,IAAA,GAAO,MAAA,GAAY,IAAI,CAAA;AAC5C,MAAA,KAAA,MAAW,QAAA,IAAY,WAAW,QAAA,EAAS;AAAA,IAC7C,CAAA;AAAA,IACA,CAAC,SAAS,UAAU;AAAA,GACtB;AAEA,EAAA,OAAO,CAAC,OAAA,IAAW,MAAA,IAAU,QAAA,EAAU,OAAO,CAAA;AAChD","file":"chunk-PKFDGGZV.js","sourcesContent":["\"use client\";\n\nimport { useState, useCallback, useSyncExternalStore } from \"react\";\nimport { useStorage } from \"@marktiderman/genesis-core\";\nimport type { ViewMode } from \"../components/patterns/view-toggle\";\nimport { useIsMobile } from \"./use-mobile\";\n\n/**\n * A default view that depends on the viewport: cards on a phone, a table on\n * a desktop. Only the DEFAULT is responsive — once the user picks a view it\n * is theirs on every screen size.\n *\n * @stability Beta\n */\nexport interface ResponsiveViewMode {\n  /** Below the mobile breakpoint (768px). */\n  mobile: ViewMode;\n  /** At or above the mobile breakpoint. */\n  desktop: ViewMode;\n}\n\n/** @stability Beta */\nexport type ViewModeDefault = ViewMode | ResponsiveViewMode;\n\nconst VIEW_MODES: readonly ViewMode[] = [\"grid\", \"table\", \"list\"];\n\nfunction isViewMode(value: unknown): value is ViewMode {\n  return typeof value === \"string\" && (VIEW_MODES as readonly string[]).includes(value);\n}\n\n/**\n * The user's view mode for a list, persisted under `genesis-view-choice-<key>`.\n *\n * Only an explicit choice is written. The default is never stored: writing\n * it on mount would turn \"cards on phones\" into a stored choice the first\n * time the page rendered on a phone, and the desktop would then open in\n * cards too — the default would stop being a default. Likewise a later\n * change to the default reaches every user who has not chosen.\n *\n * SSR: the server renders the desktop default (it has no viewport), and a\n * phone switches to its mobile default right after hydration — the same\n * contract as `useIsMobile`, so there is no hydration mismatch.\n */\n// Same-tab subscribers: a choice made by one hook instance reaches every\n// other instance reading the same key (two lists of one resource, a header\n// toggle and a page body). Other tabs arrive through the `storage` event.\nconst listeners = new Set<() => void>();\n\nfunction subscribe(onChange: () => void): () => void {\n  listeners.add(onChange);\n  window.addEventListener(\"storage\", onChange);\n  return () => {\n    listeners.delete(onChange);\n    window.removeEventListener(\"storage\", onChange);\n  };\n}\n\n/** The server has no stored preference; hydrate against the default. */\nfunction getServerSnapshot(): null {\n  return null;\n}\n\n/**\n * Storage keys. Earlier versions wrote the DEFAULT to `genesis-view-<key>`\n * on mount, so a value there may be a real choice or just a stale default —\n * there is no telling which. Explicit choices now go to their own key. The\n * legacy key is still honoured for a plain default (where a stale default\n * and the default agree, so reading it changes nothing), but not for a\n * responsive one, which it would otherwise pin to whatever the first device\n * stored.\n */\nconst choiceKey = (key: string) => `genesis-view-choice-${key}`;\nconst legacyKey = (key: string) => `genesis-view-${key}`;\n\nexport function useViewPreference(\n  key: string,\n  defaultMode: ViewModeDefault = \"grid\",\n): [ViewMode, (mode: ViewMode) => void] {\n  const storage = useStorage();\n  const storageKey = choiceKey(key);\n  const isMobile = useIsMobile();\n  const responsive = typeof defaultMode !== \"string\";\n\n  // `useSyncExternalStore` rather than a `useState` initializer: the server\n  // renders with no stored value, so reading storage during the client's\n  // first render would mismatch the server's HTML. React hydrates against\n  // `getServerSnapshot` and then re-renders with the stored choice; a\n  // client-only render reads storage directly, with no flash.\n  const getSnapshot = useCallback(\n    () => storage.getItem(storageKey),\n    [storage, storageKey],\n  );\n  const getLegacySnapshot = useCallback(\n    () => (responsive ? null : storage.getItem(legacyKey(key))),\n    [storage, key, responsive],\n  );\n  const stored = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n  const legacy = useSyncExternalStore(\n    subscribe,\n    getLegacySnapshot,\n    getServerSnapshot,\n  );\n  // `undefined` = the user has not chosen; fall through to the default.\n  const chosen = isViewMode(stored)\n    ? stored\n    : isViewMode(legacy)\n      ? legacy\n      : undefined;\n\n  const fallback = !responsive\n    ? defaultMode\n    : isMobile\n        ? defaultMode.mobile\n        : defaultMode.desktop;\n\n  // Holds a choice storage did not keep (quota, private mode, a no-op\n  // adapter), so it still applies for this hook's lifetime. Adapters\n  // swallow write errors, so the write is checked by reading it back.\n  const [unsaved, setUnsaved] = useState<ViewMode | undefined>(undefined);\n\n  const setMode = useCallback(\n    (mode: ViewMode) => {\n      let saved: string | null = null;\n      try {\n        storage.setItem(storageKey, mode);\n        saved = storage.getItem(storageKey);\n      } catch {\n        saved = null;\n      }\n      setUnsaved(saved === mode ? undefined : mode);\n      for (const listener of listeners) listener();\n    },\n    [storage, storageKey],\n  );\n\n  return [unsaved ?? chosen ?? fallback, setMode];\n}\n"]}

package/dist/chunk-S7NXD37O.js

@@ -0,0 +1,321 @@
+"use client";
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from './chunk-QJ6P2DW6.js';
+import { cn } from './chunk-NZ5WBA4R.js';
+import * as React from 'react';
+import { GripVertical, MoreVertical } from 'lucide-react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var DRAG_TYPE = "application/x-genesis-sortable-item";
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
+function moved(keys, from, to) {
+  const next = keys.slice();
+  const [key] = next.splice(from, 1);
+  next.splice(to, 0, key);
+  return next;
+}
+function SortableList({
+  items,
+  getKey,
+  getItemLabel,
+  renderItem,
+  onReorder,
+  label,
+  disabled,
+  moveMenu = true,
+  className,
+  itemClassName
+}) {
+  const [armed, setArmed] = React.useState(null);
+  const [dragging, setDragging] = React.useState(null);
+  const [dropAt, setDropAt] = React.useState(null);
+  const [grabbed, setGrabbed] = React.useState(null);
+  const [preview, setPreview] = React.useState(null);
+  const [pending, setPending] = React.useState(false);
+  const pendingRef = React.useRef(false);
+  const [announcement, setAnnouncement] = React.useState("");
+  const handles = React.useRef(/* @__PURE__ */ new Map());
+  const restoreFocus = React.useRef(null);
+  const instructionsId = React.useId();
+  const byKey = new Map(items.map((item) => [getKey(item), item]));
+  const itemKeys = items.map(getKey);
+  const keys = preview && preview.length === itemKeys.length && preview.every((k) => byKey.has(k)) ? preview : itemKeys;
+  const total = keys.length;
+  const nameOf = (key) => {
+    const item = byKey.get(key);
+    return item === void 0 ? "Item" : getItemLabel(item);
+  };
+  const announce = (message) => setAnnouncement((previous) => previous === message ? `${message}\xA0` : message);
+  const keepFocus = () => {
+    const active = typeof document === "undefined" ? null : document.activeElement;
+    restoreFocus.current = active instanceof HTMLElement && active !== document.body ? active : null;
+  };
+  useIsomorphicLayoutEffect(() => {
+    const element = restoreFocus.current;
+    restoreFocus.current = null;
+    if (!element || !element.isConnected) return;
+    const active = document.activeElement;
+    if (active !== element && (active === null || active === document.body)) element.focus();
+  });
+  React.useEffect(() => {
+    if (disabled && (grabbed || armed || dragging)) {
+      setGrabbed(null);
+      setArmed(null);
+      setDragging(null);
+      setDropAt(null);
+      if (!pendingRef.current) setPreview(null);
+      return;
+    }
+    if (dragging && !byKey.has(dragging)) {
+      setDragging(null);
+      setDropAt(null);
+      setArmed(null);
+    }
+    if (grabbed && !byKey.has(grabbed.key)) {
+      setGrabbed(null);
+      setPreview(null);
+    }
+  });
+  const commit = (key, from, to, message) => {
+    if (from === to) return;
+    pendingRef.current = true;
+    setPending(true);
+    setPreview(moved(itemKeys, from, to));
+    let result;
+    try {
+      result = onReorder(from, to, { key });
+    } catch (error) {
+      result = Promise.reject(error);
+    }
+    Promise.resolve(result).then(
+      () => announce(message),
+      () => announce(`Couldn\u2019t move ${nameOf(key)}.`)
+    ).finally(() => {
+      keepFocus();
+      pendingRef.current = false;
+      setPending(false);
+      setPreview(null);
+    });
+  };
+  const move = (key, to) => {
+    if (disabled || pendingRef.current || grabbed) return;
+    if (!Number.isFinite(to)) return;
+    const from = itemKeys.indexOf(key);
+    const target = Math.max(0, Math.min(total - 1, Math.round(to)));
+    if (from < 0 || target === from) return;
+    keepFocus();
+    commit(key, from, target, `${nameOf(key)} moved to position ${target + 1} of ${total}.`);
+  };
+  const pickUp = (key) => {
+    if (disabled || pendingRef.current) return;
+    const from = itemKeys.indexOf(key);
+    if (from < 0) return;
+    setGrabbed({ key, from });
+    setPreview(itemKeys);
+    announce(
+      `${nameOf(key)} picked up, position ${from + 1} of ${total}. Use the up and down arrow keys to move, Space to drop, Escape to cancel.`
+    );
+  };
+  const drop = (key) => {
+    if (!grabbed) return;
+    const to = keys.indexOf(key);
+    const from = grabbed.from;
+    setGrabbed(null);
+    if (to === from) {
+      setPreview(null);
+      announce(`${nameOf(key)} dropped at position ${to + 1} of ${total}.`);
+      return;
+    }
+    keepFocus();
+    commit(key, from, to, `${nameOf(key)} dropped at position ${to + 1} of ${total}.`);
+  };
+  const cancel = (key) => {
+    if (!grabbed) return;
+    const from = grabbed.from;
+    keepFocus();
+    setGrabbed(null);
+    setPreview(null);
+    announce(`Move cancelled. ${nameOf(key)} is back at position ${from + 1} of ${total}.`);
+  };
+  const step = (key, to) => {
+    const index = keys.indexOf(key);
+    const target = Math.max(0, Math.min(total - 1, to));
+    if (index < 0 || target === index) return;
+    keepFocus();
+    setPreview(moved(keys, index, target));
+    announce(`${nameOf(key)} moved to position ${target + 1} of ${total}.`);
+  };
+  React.useEffect(() => {
+    if (!grabbed) return;
+    const onKey = (event) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      event.stopPropagation();
+      cancel(grabbed.key);
+    };
+    window.addEventListener("keydown", onKey, true);
+    return () => window.removeEventListener("keydown", onKey, true);
+  });
+  React.useEffect(() => {
+    if (!armed || dragging) return;
+    const disarm = () => setArmed(null);
+    const events = ["pointerup", "pointercancel", "contextmenu", "blur"];
+    for (const type of events) window.addEventListener(type, disarm, { once: true });
+    return () => {
+      for (const type of events) window.removeEventListener(type, disarm);
+    };
+  }, [armed, dragging]);
+  const onHandleKeyDown = (event, key) => {
+    if (disabled) return;
+    const isGrabbed = grabbed?.key === key;
+    const index = keys.indexOf(key);
+    const delta = event.key === "ArrowUp" ? -1 : event.key === "ArrowDown" ? 1 : 0;
+    if (isGrabbed) {
+      if (delta) {
+        event.preventDefault();
+        step(key, index + delta);
+      } else if (event.key === "Home" || event.key === "End") {
+        event.preventDefault();
+        step(key, event.key === "Home" ? 0 : total - 1);
+      }
+      return;
+    }
+    if (delta && event.altKey) {
+      event.preventDefault();
+      move(key, index + delta);
+    }
+  };
+  const onHandleClick = (event, key) => {
+    if (disabled || event.detail !== 0) return;
+    if (grabbed?.key === key) drop(key);
+    else if (!grabbed) pickUp(key);
+  };
+  const onDragOver = (event, key) => {
+    if (!dragging) return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "move";
+    const rect = event.currentTarget.getBoundingClientRect();
+    const edge = event.clientY < rect.top + rect.height / 2 ? "before" : "after";
+    if (dropAt?.key !== key || dropAt.edge !== edge) setDropAt({ key, edge });
+  };
+  const endDrag = () => {
+    setDragging(null);
+    setDropAt(null);
+    setArmed(null);
+  };
+  const onDrop = (event) => {
+    event.preventDefault();
+    const key = event.dataTransfer.getData(DRAG_TYPE) || dragging;
+    const target = dropAt;
+    endDrag();
+    if (!key || !target || pendingRef.current || grabbed) return;
+    const from = itemKeys.indexOf(key);
+    const over = itemKeys.indexOf(target.key);
+    if (from < 0 || over < 0) return;
+    let to = target.edge === "before" ? over : over + 1;
+    if (from < to) to -= 1;
+    commit(key, from, to, `${nameOf(key)} dropped at position ${to + 1} of ${total}.`);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("ul", { "aria-label": label, "aria-busy": pending || void 0, className: cn("flex flex-col gap-1", className), children: keys.map((key, index) => {
+      const item = byKey.get(key);
+      const itemLabel = getItemLabel(item);
+      const isGrabbed = grabbed?.key === key;
+      const isDragging = dragging === key;
+      const handle = disabled ? null : /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          ref: (node) => {
+            if (node) handles.current.set(key, node);
+            else handles.current.delete(key);
+          },
+          "aria-label": `Reorder ${itemLabel}`,
+          "aria-describedby": instructionsId,
+          "data-grabbed": isGrabbed || void 0,
+          className: cn(
+            "inline-flex h-7 w-5 shrink-0 cursor-grab items-center justify-center rounded text-muted-foreground",
+            "hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            isGrabbed && "bg-accent text-foreground"
+          ),
+          onPointerDown: () => {
+            if (!pendingRef.current && !grabbed) setArmed(key);
+          },
+          onPointerCancel: () => setArmed(null),
+          onClick: (event) => onHandleClick(event, key),
+          onKeyDown: (event) => onHandleKeyDown(event, key),
+          onBlur: () => {
+            if (isGrabbed && restoreFocus.current !== handles.current.get(key)) cancel(key);
+          },
+          children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4", "aria-hidden": true })
+        }
+      );
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          "data-sortable-key": key,
+          draggable: !disabled && armed === key || void 0,
+          className: cn(
+            "relative rounded-md",
+            moveMenu && !disabled && "pr-8",
+            isDragging && "opacity-50",
+            isGrabbed && "ring-2 ring-primary/50",
+            itemClassName
+          ),
+          onDragStart: (event) => {
+            if (disabled || armed !== key) return;
+            event.dataTransfer.setData(DRAG_TYPE, key);
+            event.dataTransfer.effectAllowed = "move";
+            setDragging(key);
+          },
+          onDragEnd: endDrag,
+          onDragOver: (event) => onDragOver(event, key),
+          onDrop,
+          children: [
+            dropAt?.key === key && dragging !== key && /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: cn(
+                  "pointer-events-none absolute inset-x-0 h-0.5 rounded bg-primary",
+                  dropAt.edge === "before" ? "-top-0.5" : "-bottom-0.5"
+                )
+              }
+            ),
+            renderItem(item, {
+              index,
+              handle,
+              isDragging,
+              isGrabbed,
+              moveUp: () => move(key, index - 1),
+              moveDown: () => move(key, index + 1),
+              moveTo: (to) => move(key, to)
+            }),
+            moveMenu && !disabled && total > 1 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+              /* @__PURE__ */ jsx(
+                DropdownMenuTrigger,
+                {
+                  "aria-label": `Move ${itemLabel}`,
+                  className: "absolute right-1 top-1 rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-4 w-4", "aria-hidden": true })
+                }
+              ),
+              /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+                /* @__PURE__ */ jsx(DropdownMenuItem, { disabled: index === 0, onSelect: () => move(key, index - 1), children: "Move up" }),
+                /* @__PURE__ */ jsx(DropdownMenuItem, { disabled: index === total - 1, onSelect: () => move(key, index + 1), children: "Move down" }),
+                /* @__PURE__ */ jsx(DropdownMenuItem, { disabled: index === 0, onSelect: () => move(key, 0), children: "Move to top" }),
+                /* @__PURE__ */ jsx(DropdownMenuItem, { disabled: index === total - 1, onSelect: () => move(key, total - 1), children: "Move to bottom" })
+              ] })
+            ] })
+          ]
+        },
+        key
+      );
+    }) }),
+    /* @__PURE__ */ jsx("p", { id: instructionsId, hidden: true, children: "Space or Enter picks the item up. Up and down arrows, Home and End move it. Space or Enter drops it, Escape puts it back. Alt with an arrow moves it one step." }),
+    /* @__PURE__ */ jsx("div", { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: announcement })
+  ] });
+}
+
+export { SortableList };
+//# sourceMappingURL=chunk-S7NXD37O.js.map
+//# sourceMappingURL=chunk-S7NXD37O.js.map

package/dist/chunk-S7NXD37O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/patterns/sortable-list.tsx"],"names":[],"mappings":"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","file":"chunk-S7NXD37O.js","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { GripVertical, MoreVertical } from \"lucide-react\";\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from \"../ui/dropdown-menu\";\nimport { cn } from \"../../utils\";\n\nexport interface SortableListItemContext {\n  /** The item's position as shown, from 0. */\n  index: number;\n  /**\n   * The drag handle: drag it with a pointer, or focus it and press Space or\n   * Enter to pick the item up, the arrow keys to move it and Space or Enter\n   * again to drop it. Render it somewhere in the row.\n   */\n  handle: React.ReactNode;\n  /** True while this item is being dragged with a pointer. */\n  isDragging: boolean;\n  /** True while this item is picked up from the keyboard. */\n  isGrabbed: boolean;\n  /** Move this item without dragging, for a row menu of your own. */\n  moveUp: () => void;\n  moveDown: () => void;\n  moveTo: (index: number) => void;\n}\n\nexport interface SortableListReorder {\n  /** Key of the item that moved. */\n  key: string;\n}\n\nexport interface SortableListProps<T> {\n  items: readonly T[];\n  /** A stable key per item. Required: dragging finds the item again by key. */\n  getKey: (item: T) => string;\n  /** A name for an item, for the handle's label and announcements (\"Week 1\"). */\n  getItemLabel: (item: T) => string;\n  renderItem: (item: T, context: SortableListItemContext) => React.ReactNode;\n  /**\n   * Move the item at `from` to `to` (both from 0, `to` counted after the item\n   * is taken out). Each finished move calls this once: a keyboard pick-up\n   * that wanders and comes back calls nothing.\n   *\n   * The list shows the new order straight away and keeps showing it until the\n   * returned promise settles; by then `items` must be in the new order. A\n   * synchronous handler must update `items` in the same tick. A rejected\n   * promise puts the old order back and announces that the move failed. Other\n   * moves wait until this one settles.\n   */\n  onReorder: (from: number, to: number, move: SortableListReorder) => void | Promise<void>;\n  /** Accessible name of the list (\"Course steps\"). */\n  label: string;\n  /** Turns off dragging and every kind of move. */\n  disabled?: boolean | undefined;\n  /**\n   * A \"Move\" menu on each row (up, down, to top, to bottom), on by default so\n   * touch and screen-reader users always have a way to move an item. Turn it\n   * off only when the row offers `moveUp` / `moveDown` / `moveTo` itself.\n   */\n  moveMenu?: boolean | undefined;\n  className?: string | undefined;\n  itemClassName?: string | undefined;\n}\n\ntype DropAt = { key: string; edge: \"before\" | \"after\" };\n\nconst DRAG_TYPE = \"application/x-genesis-sortable-item\";\n\n// useLayoutEffect warns during server rendering; nothing needs refocusing there.\nconst useIsomorphicLayoutEffect = typeof window === \"undefined\" ? React.useEffect : React.useLayoutEffect;\n\nfunction moved(keys: readonly string[], from: number, to: number) {\n  const next = keys.slice();\n  const [key] = next.splice(from, 1);\n  next.splice(to, 0, key!);\n  return next;\n}\n\n/**\n * A vertical list the user can rearrange: course steps, lesson blocks, form\n * fields.\n *\n * Every way to move an item is equivalent, so dragging is never the only one\n * (the same stance as KanbanBoard's \"Move to…\" menu):\n * - drag the handle with a pointer;\n * - focus the handle, Space or Enter to pick up, ↑/↓ and Home/End to move,\n *   Space or Enter to drop, Escape to put it back (tabbing away also puts it\n *   back); Alt+↑/↓ moves one step without picking up;\n * - the row's \"Move\" menu, or `moveUp` / `moveDown` / `moveTo` from the render\n *   context.\n *\n * Moves are announced in a polite live region once they succeed. Native drag\n * and drop needs no dependency and Radix has none to offer (docs/FRAMEWORK.md\n * rule 3).\n *\n * @stability Beta\n */\nexport function SortableList<T>({\n  items,\n  getKey,\n  getItemLabel,\n  renderItem,\n  onReorder,\n  label,\n  disabled,\n  moveMenu = true,\n  className,\n  itemClassName,\n}: SortableListProps<T>) {\n  const [armed, setArmed] = React.useState<string | null>(null);\n  const [dragging, setDragging] = React.useState<string | null>(null);\n  const [dropAt, setDropAt] = React.useState<DropAt | null>(null);\n  // While a key is grabbed, `preview` is the order on screen; nothing is\n  // written until the drop.\n  const [grabbed, setGrabbed] = React.useState<{ key: string; from: number } | null>(null);\n  // The order to show instead of `items`: during a keyboard pick-up, and from\n  // a committed move until its promise settles.\n  const [preview, setPreview] = React.useState<string[] | null>(null);\n  const [pending, setPending] = React.useState(false);\n  // The same, readable within one tick: two moves fired back to back must\n  // not both start from the old order.\n  const pendingRef = React.useRef(false);\n  const [announcement, setAnnouncement] = React.useState(\"\");\n  const handles = React.useRef(new Map<string, HTMLButtonElement>());\n  // The element that had focus when a move started, to put focus back on if\n  // the DOM move drops it to the body. Cleared after every commit.\n  const restoreFocus = React.useRef<HTMLElement | null>(null);\n  const instructionsId = React.useId();\n\n  const byKey = new Map(items.map((item) => [getKey(item), item] as const));\n  const itemKeys = items.map(getKey);\n  const keys = preview && preview.length === itemKeys.length && preview.every((k) => byKey.has(k)) ? preview : itemKeys;\n  const total = keys.length;\n  const nameOf = (key: string) => {\n    const item = byKey.get(key);\n    return item === undefined ? \"Item\" : getItemLabel(item);\n  };\n\n  // A live region only speaks when its text changes, so the same message\n  // twice in a row is told apart by a trailing no-break space.\n  const announce = (message: string) =>\n    setAnnouncement((previous) => (previous === message ? `${message} ` : message));\n\n  // Moving a focused element in the DOM drops focus to the body in real\n  // browsers. Remember what had focus, the handle or a row's own button, and\n  // put it back after the commit.\n  const keepFocus = () => {\n    const active = typeof document === \"undefined\" ? null : document.activeElement;\n    restoreFocus.current = active instanceof HTMLElement && active !== document.body ? active : null;\n  };\n  useIsomorphicLayoutEffect(() => {\n    const element = restoreFocus.current;\n    restoreFocus.current = null;\n    if (!element || !element.isConnected) return;\n    const active = document.activeElement;\n    if (active !== element && (active === null || active === document.body)) element.focus();\n  });\n\n  // An item that disappears mid-gesture, or the list turning disabled, ends\n  // the gesture.\n  React.useEffect(() => {\n    if (disabled && (grabbed || armed || dragging)) {\n      setGrabbed(null);\n      setArmed(null);\n      setDragging(null);\n      setDropAt(null);\n      if (!pendingRef.current) setPreview(null);\n      return;\n    }\n    if (dragging && !byKey.has(dragging)) {\n      setDragging(null);\n      setDropAt(null);\n      setArmed(null);\n    }\n    if (grabbed && !byKey.has(grabbed.key)) {\n      setGrabbed(null);\n      setPreview(null);\n    }\n  });\n\n  const commit = (key: string, from: number, to: number, message: string) => {\n    if (from === to) return;\n    pendingRef.current = true;\n    setPending(true);\n    setPreview(moved(itemKeys, from, to));\n    // Called synchronously, so a synchronous handler updates `items` in the\n    // same tick as the preview.\n    let result: void | Promise<void>;\n    try {\n      result = onReorder(from, to, { key });\n    } catch (error) {\n      result = Promise.reject(error);\n    }\n    Promise.resolve(result)\n      .then(\n        () => announce(message),\n        () => announce(`Couldn’t move ${nameOf(key)}.`),\n      )\n      .finally(() => {\n        // A rejected move reverts the order, which moves rows again.\n        keepFocus();\n        pendingRef.current = false;\n        setPending(false);\n        setPreview(null);\n      });\n  };\n\n  const move = (key: string, to: number) => {\n    if (disabled || pendingRef.current || grabbed) return;\n    if (!Number.isFinite(to)) return;\n    const from = itemKeys.indexOf(key);\n    const target = Math.max(0, Math.min(total - 1, Math.round(to)));\n    if (from < 0 || target === from) return;\n    keepFocus();\n    commit(key, from, target, `${nameOf(key)} moved to position ${target + 1} of ${total}.`);\n  };\n\n  const pickUp = (key: string) => {\n    if (disabled || pendingRef.current) return;\n    const from = itemKeys.indexOf(key);\n    if (from < 0) return;\n    setGrabbed({ key, from });\n    setPreview(itemKeys);\n    announce(\n      `${nameOf(key)} picked up, position ${from + 1} of ${total}. Use the up and down arrow keys to move, Space to drop, Escape to cancel.`,\n    );\n  };\n\n  const drop = (key: string) => {\n    if (!grabbed) return;\n    const to = keys.indexOf(key);\n    const from = grabbed.from;\n    setGrabbed(null);\n    if (to === from) {\n      setPreview(null);\n      announce(`${nameOf(key)} dropped at position ${to + 1} of ${total}.`);\n      return;\n    }\n    keepFocus();\n    commit(key, from, to, `${nameOf(key)} dropped at position ${to + 1} of ${total}.`);\n  };\n\n  const cancel = (key: string) => {\n    if (!grabbed) return;\n    const from = grabbed.from;\n    keepFocus();\n    setGrabbed(null);\n    setPreview(null);\n    announce(`Move cancelled. ${nameOf(key)} is back at position ${from + 1} of ${total}.`);\n  };\n\n  const step = (key: string, to: number) => {\n    const index = keys.indexOf(key);\n    const target = Math.max(0, Math.min(total - 1, to));\n    if (index < 0 || target === index) return;\n    keepFocus();\n    setPreview(moved(keys, index, target));\n    announce(`${nameOf(key)} moved to position ${target + 1} of ${total}.`);\n  };\n\n  // Escape while an item is picked up must not also close a surrounding\n  // Dialog or Sheet, which listen before the handle does.\n  React.useEffect(() => {\n    if (!grabbed) return;\n    const onKey = (event: KeyboardEvent) => {\n      if (event.key !== \"Escape\") return;\n      event.preventDefault();\n      event.stopPropagation();\n      cancel(grabbed.key);\n    };\n    window.addEventListener(\"keydown\", onKey, true);\n    return () => window.removeEventListener(\"keydown\", onKey, true);\n  });\n\n  // A press on the handle arms its row for native dragging; any release or\n  // cancel, wherever it lands, disarms it.\n  React.useEffect(() => {\n    if (!armed || dragging) return;\n    const disarm = () => setArmed(null);\n    // A context menu or a release outside the window never sends pointerup.\n    const events = [\"pointerup\", \"pointercancel\", \"contextmenu\", \"blur\"] as const;\n    for (const type of events) window.addEventListener(type, disarm, { once: true });\n    return () => {\n      for (const type of events) window.removeEventListener(type, disarm);\n    };\n  }, [armed, dragging]);\n\n  const onHandleKeyDown = (event: React.KeyboardEvent, key: string) => {\n    if (disabled) return;\n    const isGrabbed = grabbed?.key === key;\n    const index = keys.indexOf(key);\n    const delta = event.key === \"ArrowUp\" ? -1 : event.key === \"ArrowDown\" ? 1 : 0;\n    if (isGrabbed) {\n      if (delta) {\n        event.preventDefault();\n        step(key, index + delta);\n      } else if (event.key === \"Home\" || event.key === \"End\") {\n        event.preventDefault();\n        step(key, event.key === \"Home\" ? 0 : total - 1);\n      }\n      return;\n    }\n    if (delta && event.altKey) {\n      event.preventDefault();\n      move(key, index + delta);\n    }\n  };\n\n  // Space and Enter reach the handle as a click with `detail === 0`, as do\n  // screen readers' activations; a pointer click is a press for dragging.\n  const onHandleClick = (event: React.MouseEvent, key: string) => {\n    if (disabled || event.detail !== 0) return;\n    if (grabbed?.key === key) drop(key);\n    else if (!grabbed) pickUp(key);\n  };\n\n  const onDragOver = (event: React.DragEvent<HTMLLIElement>, key: string) => {\n    if (!dragging) return;\n    event.preventDefault();\n    event.dataTransfer.dropEffect = \"move\";\n    const rect = event.currentTarget.getBoundingClientRect();\n    const edge = event.clientY < rect.top + rect.height / 2 ? \"before\" : \"after\";\n    if (dropAt?.key !== key || dropAt.edge !== edge) setDropAt({ key, edge });\n  };\n\n  const endDrag = () => {\n    setDragging(null);\n    setDropAt(null);\n    setArmed(null);\n  };\n\n  const onDrop = (event: React.DragEvent) => {\n    event.preventDefault();\n    const key = event.dataTransfer.getData(DRAG_TYPE) || dragging;\n    const target = dropAt;\n    endDrag();\n    if (!key || !target || pendingRef.current || grabbed) return;\n    const from = itemKeys.indexOf(key);\n    const over = itemKeys.indexOf(target.key);\n    if (from < 0 || over < 0) return;\n    // `to` counts positions after the dragged item is taken out.\n    let to = target.edge === \"before\" ? over : over + 1;\n    if (from < to) to -= 1;\n    commit(key, from, to, `${nameOf(key)} dropped at position ${to + 1} of ${total}.`);\n  };\n\n  return (\n    <>\n      <ul aria-label={label} aria-busy={pending || undefined} className={cn(\"flex flex-col gap-1\", className)}>\n        {keys.map((key, index) => {\n          const item = byKey.get(key)!;\n          const itemLabel = getItemLabel(item);\n          const isGrabbed = grabbed?.key === key;\n          const isDragging = dragging === key;\n          const handle = disabled ? null : (\n            <button\n              type=\"button\"\n              ref={(node) => {\n                if (node) handles.current.set(key, node);\n                else handles.current.delete(key);\n              }}\n              aria-label={`Reorder ${itemLabel}`}\n              aria-describedby={instructionsId}\n              data-grabbed={isGrabbed || undefined}\n              className={cn(\n                \"inline-flex h-7 w-5 shrink-0 cursor-grab items-center justify-center rounded text-muted-foreground\",\n                \"hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n                isGrabbed && \"bg-accent text-foreground\",\n              )}\n              onPointerDown={() => {\n                if (!pendingRef.current && !grabbed) setArmed(key);\n              }}\n              onPointerCancel={() => setArmed(null)}\n              onClick={(event) => onHandleClick(event, key)}\n              onKeyDown={(event) => onHandleKeyDown(event, key)}\n              onBlur={() => {\n                // A DOM move during the pick-up blurs the handle for a moment;\n                // that is not the user leaving.\n                if (isGrabbed && restoreFocus.current !== handles.current.get(key)) cancel(key);\n              }}\n            >\n              <GripVertical className=\"h-4 w-4\" aria-hidden />\n            </button>\n          );\n          return (\n            <li\n              key={key}\n              data-sortable-key={key}\n              draggable={(!disabled && armed === key) || undefined}\n              className={cn(\n                \"relative rounded-md\",\n                moveMenu && !disabled && \"pr-8\",\n                isDragging && \"opacity-50\",\n                isGrabbed && \"ring-2 ring-primary/50\",\n                itemClassName,\n              )}\n              onDragStart={(event) => {\n                if (disabled || armed !== key) return;\n                event.dataTransfer.setData(DRAG_TYPE, key);\n                event.dataTransfer.effectAllowed = \"move\";\n                setDragging(key);\n              }}\n              onDragEnd={endDrag}\n              onDragOver={(event) => onDragOver(event, key)}\n              onDrop={onDrop}\n            >\n              {dropAt?.key === key && dragging !== key && (\n                <span\n                  aria-hidden\n                  className={cn(\n                    \"pointer-events-none absolute inset-x-0 h-0.5 rounded bg-primary\",\n                    dropAt.edge === \"before\" ? \"-top-0.5\" : \"-bottom-0.5\",\n                  )}\n                />\n              )}\n              {renderItem(item, {\n                index,\n                handle,\n                isDragging,\n                isGrabbed,\n                moveUp: () => move(key, index - 1),\n                moveDown: () => move(key, index + 1),\n                moveTo: (to) => move(key, to),\n              })}\n              {moveMenu && !disabled && total > 1 && (\n                <DropdownMenu>\n                  <DropdownMenuTrigger\n                    aria-label={`Move ${itemLabel}`}\n                    className=\"absolute right-1 top-1 rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n                  >\n                    <MoreVertical className=\"h-4 w-4\" aria-hidden />\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem disabled={index === 0} onSelect={() => move(key, index - 1)}>\n                      Move up\n                    </DropdownMenuItem>\n                    <DropdownMenuItem disabled={index === total - 1} onSelect={() => move(key, index + 1)}>\n                      Move down\n                    </DropdownMenuItem>\n                    <DropdownMenuItem disabled={index === 0} onSelect={() => move(key, 0)}>\n                      Move to top\n                    </DropdownMenuItem>\n                    <DropdownMenuItem disabled={index === total - 1} onSelect={() => move(key, total - 1)}>\n                      Move to bottom\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              )}\n            </li>\n          );\n        })}\n      </ul>\n      <p id={instructionsId} hidden>\n        Space or Enter picks the item up. Up and down arrows, Home and End move it. Space or Enter drops it, Escape puts\n        it back. Alt with an arrow moves it one step.\n      </p>\n      <div aria-live=\"polite\" aria-atomic=\"true\" className=\"sr-only\">\n        {announcement}\n      </div>\n    </>\n  );\n}\n"]}