@openrails/contentkit-ui 0.104.0-rc.1 → 0.104.0-rc.3

package/dist/components/sortable-list.js

@@ -1,121 +1,137 @@
 import { useMessages as e } from "../i18n/context.js";
 import { ContentKitUiRoot as t } from "../scope.js";
-import { useMemo as n, useState as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { cn as o } from "cn";
-import { DragDropVerticalIcon as s } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon as c } from "@hugeicons/react";
-import { DndContext as l, DragOverlay as u, KeyboardSensor as d, PointerSensor as f, closestCenter as p, useSensor as m, useSensors as h } from "@dnd-kit/core";
-import { SortableContext as g, sortableKeyboardCoordinates as _, useSortable as v } from "@dnd-kit/sortable";
+import { Fragment as n, useMemo as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { cn as s } from "cn";
+import { DragDropVerticalIcon as c } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as l } from "@hugeicons/react";
+import { DndContext as u, DragOverlay as d, KeyboardSensor as f, PointerSensor as p, closestCenter as m, useSensor as h, useSensors as g } from "@dnd-kit/core";
+import { SortableContext as _, sortableKeyboardCoordinates as v, useSortable as y } from "@dnd-kit/sortable";
 //#region src/components/sortable-list.tsx
-var y = () => null, b = "inline-flex size-8 shrink-0 cursor-grab touch-none items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing disabled:cursor-default disabled:opacity-50";
-function x({ items: v, id: x, name: C, onMove: w, layout: T = "list", disabled: E, row: D, children: O, className: k, label: A, appearance: j }) {
-	let { t: M } = e(), N = h(m(f, { activationConstraint: { distance: 4 } }), m(d, { coordinateGetter: _ })), P = n(() => v.map(x), [v, x]), [F, I] = r(null), [L, R] = r(null), z = (e) => P.indexOf(String(e)), B = (e) => {
-		let t = z(e);
-		return t < 0 ? "" : C(v[t]);
-	}, V = P.length, H = {
-		onDragStart: ({ active: e }) => M("sortable.pickedUp", {
-			name: B(e.id),
-			position: z(e.id) + 1,
-			total: V
+var b = {
+	start: ["Space"],
+	cancel: ["Escape"],
+	end: ["Space"]
+}, x = () => null, S = "inline-flex size-8 shrink-0 cursor-grab touch-none items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing disabled:cursor-default disabled:opacity-50";
+function C({ items: y, id: C, name: T, onMove: E, layout: D = "list", disabled: O, row: k, children: A, className: j, label: M, appearance: N, wholeItem: P, trailing: F }) {
+	let { t: I } = e(), L = g(h(p, { activationConstraint: { distance: 4 } }), h(f, {
+		coordinateGetter: v,
+		...P ? { keyboardCodes: b } : {}
+	})), R = r(() => y.map(C), [y, C]), [z, B] = i(null), [V, H] = i(null), U = (e) => R.indexOf(String(e)), W = (e) => {
+		let t = U(e);
+		return t < 0 ? "" : T(y[t]);
+	}, G = R.length, K = {
+		onDragStart: ({ active: e }) => I("sortable.pickedUp", {
+			name: W(e.id),
+			position: U(e.id) + 1,
+			total: G
 		}),
-		onDragOver: ({ active: e, over: t }) => t ? M("sortable.over", {
-			name: B(e.id),
-			position: z(t.id) + 1,
-			total: V
+		onDragOver: ({ active: e, over: t }) => t ? I("sortable.over", {
+			name: W(e.id),
+			position: U(t.id) + 1,
+			total: G
 		}) : void 0,
-		onDragEnd: ({ active: e, over: t }) => t ? M("sortable.dropped", {
-			name: B(e.id),
-			position: z(t.id) + 1,
-			total: V
-		}) : M("sortable.droppedAway", { name: B(e.id) }),
-		onDragCancel: ({ active: e }) => M("sortable.canceled", { name: B(e.id) })
-	}, U = { draggable: M("sortable.instructions") }, W = F ? z(F) : -1, G = L ? z(L) : -1, K = W >= 0 ? v[W] : void 0, q = T === "grid", J = (e, t) => /* @__PURE__ */ i("ol", {
-		className: o(q ? "grid grid-cols-[repeat(auto-fill,minmax(8rem,1fr))] gap-2" : "grid gap-1", k),
-		"aria-label": t ? void 0 : A,
+		onDragEnd: ({ active: e, over: t }) => t ? I("sortable.dropped", {
+			name: W(e.id),
+			position: U(t.id) + 1,
+			total: G
+		}) : I("sortable.droppedAway", { name: W(e.id) }),
+		onDragCancel: ({ active: e }) => I("sortable.canceled", { name: W(e.id) })
+	}, q = { draggable: I(P ? "sortable.instructionsTile" : "sortable.instructions") }, J = z ? U(z) : -1, Y = V ? U(V) : -1, X = J >= 0 ? y[J] : void 0, Z = D === "grid", Q = (e, t) => /* @__PURE__ */ a("ol", {
+		className: s(Z ? "grid grid-cols-[repeat(auto-fill,minmax(8rem,1fr))] gap-2" : "grid gap-1", j),
+		"aria-label": t ? void 0 : M,
 		"data-ckui": "sortable-list",
-		"data-layout": T,
+		"data-layout": D,
 		"data-overlay": t ? "" : void 0,
 		children: e
 	});
-	return /* @__PURE__ */ i(t, {
-		appearance: j,
+	return /* @__PURE__ */ a(t, {
+		appearance: N,
 		className: "contents",
-		children: /* @__PURE__ */ a(l, {
-			sensors: N,
-			collisionDetection: p,
+		children: /* @__PURE__ */ o(u, {
+			sensors: L,
+			collisionDetection: m,
 			accessibility: {
-				announcements: H,
-				screenReaderInstructions: U
+				announcements: K,
+				screenReaderInstructions: q
 			},
-			onDragStart: (e) => I(String(e.active.id)),
-			onDragOver: (e) => R(e.over ? String(e.over.id) : null),
+			onDragStart: (e) => B(String(e.active.id)),
+			onDragOver: (e) => H(e.over ? String(e.over.id) : null),
 			onDragCancel: () => {
-				I(null), R(null);
+				B(null), H(null);
 			},
 			onDragEnd: (e) => {
-				I(null), R(null);
-				let t = z(e.active.id), n = e.over ? z(e.over.id) : -1;
-				t >= 0 && n >= 0 && t !== n && w(t, n);
+				B(null), H(null);
+				let t = U(e.active.id), n = e.over ? U(e.over.id) : -1;
+				t >= 0 && n >= 0 && t !== n && E(t, n);
 			},
-			children: [/* @__PURE__ */ i(g, {
-				items: P,
-				strategy: y,
-				disabled: E,
-				children: J(v.map((e, t) => /* @__PURE__ */ i(S, {
-					id: P[t],
-					label: M("sortable.handle", { name: C(e) }),
-					attrs: D?.(e),
-					disabled: E,
-					grid: q,
-					dragging: t === W,
-					drop: W >= 0 && t === G && G !== W ? G > W ? "after" : "before" : void 0,
-					render: (n) => O(e, n, t)
-				}, P[t])))
-			}), /* @__PURE__ */ i(u, {
+			children: [/* @__PURE__ */ a(_, {
+				items: R,
+				strategy: x,
+				disabled: O,
+				children: Q(y.map((e, t) => /* @__PURE__ */ a(w, {
+					id: R[t],
+					label: I("sortable.handle", { name: T(e) }),
+					attrs: k?.(e),
+					disabled: O,
+					grid: Z,
+					whole: P,
+					dragging: t === J,
+					drop: J >= 0 && t === Y && Y !== J ? Y > J ? "after" : "before" : void 0,
+					render: (n) => A(e, n, t)
+				}, R[t])).concat(F ? [/* @__PURE__ */ a(n, { children: F }, "trailing")] : []))
+			}), /* @__PURE__ */ a(d, {
 				dropAnimation: null,
-				children: K === void 0 ? null : J(/* @__PURE__ */ i("li", {
-					...D?.(K),
-					className: o(D?.(K).className, "cursor-grabbing rounded-md bg-background shadow-lg ring-1 ring-border"),
-					children: O(K, /* @__PURE__ */ i("span", {
-						className: b,
-						children: /* @__PURE__ */ i(c, {
-							icon: s,
+				children: X === void 0 ? null : Q(/* @__PURE__ */ a("li", {
+					...k?.(X),
+					className: s(k?.(X).className, "cursor-grabbing rounded-md bg-background shadow-lg ring-1 ring-border"),
+					children: A(X, P ? null : /* @__PURE__ */ a("span", {
+						className: S,
+						children: /* @__PURE__ */ a(l, {
+							icon: c,
 							strokeWidth: 2,
 							className: "size-4.5"
 						})
-					}), W)
+					}), J)
 				}), !0)
 			})]
 		})
 	});
 }
-function S({ id: e, label: t, attrs: n, disabled: r, grid: a, dragging: l, drop: u, render: d }) {
-	let { attributes: f, listeners: p, setNodeRef: m, setActivatorNodeRef: h } = v({ id: e }), g = /* @__PURE__ */ i("button", {
+function w({ id: e, label: t, attrs: n, disabled: r, grid: i, whole: o, dragging: u, drop: d, render: f }) {
+	let { attributes: p, listeners: m, setNodeRef: h, setActivatorNodeRef: g } = y({ id: e }), _ = o ? null : /* @__PURE__ */ a("button", {
 		type: "button",
-		ref: h,
-		className: b,
+		ref: g,
+		className: S,
 		"aria-label": t,
 		disabled: r,
 		"data-ckui": "sort-handle",
-		...f,
 		...p,
-		children: /* @__PURE__ */ i(c, {
-			icon: s,
+		...m,
+		children: /* @__PURE__ */ a(l, {
+			icon: c,
 			strokeWidth: 2,
 			className: "size-4.5"
 		})
 	});
-	return /* @__PURE__ */ i("li", {
+	return /* @__PURE__ */ a("li", {
 		...n,
-		ref: m,
-		className: o(n?.className, "relative data-dragging:opacity-40 before:pointer-events-none before:absolute before:rounded-full before:bg-primary before:opacity-0", a ? "before:inset-y-0 before:w-0.5 data-[drop=before]:before:-left-[5px] data-[drop=before]:before:opacity-100 data-[drop=after]:before:-right-[5px] data-[drop=after]:before:opacity-100" : "before:inset-x-0 before:h-0.5 data-[drop=before]:before:-top-[3px] data-[drop=before]:before:opacity-100 data-[drop=after]:before:-bottom-[3px] data-[drop=after]:before:opacity-100"),
-		"data-drop": u,
-		"data-dragging": l || void 0,
-		children: d(g)
+		...o && !r ? {
+			...p,
+			...m,
+			onKeyDown: (e) => {
+				m?.onKeyDown?.(e), n?.onKeyDown?.(e);
+			},
+			"aria-label": t
+		} : {},
+		ref: h,
+		className: s(n?.className, "relative data-dragging:opacity-40 before:pointer-events-none before:absolute before:rounded-full before:bg-primary before:opacity-0", i ? "before:inset-y-0 before:w-0.5 data-[drop=before]:before:-left-[5px] data-[drop=before]:before:opacity-100 data-[drop=after]:before:-right-[5px] data-[drop=after]:before:opacity-100" : "before:inset-x-0 before:h-0.5 data-[drop=before]:before:-top-[3px] data-[drop=before]:before:opacity-100 data-[drop=after]:before:-bottom-[3px] data-[drop=after]:before:opacity-100"),
+		"data-drop": d,
+		"data-dragging": u || void 0,
+		children: f(_)
 	});
 }
 //#endregion
-export { x as SortableList };
+export { C as SortableList };
 
 //# sourceMappingURL=sortable-list.js.map

package/dist/components/sortable-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"sortable-list.js","names":[],"sources":["../../src/components/sortable-list.tsx"],"sourcesContent":["import {\n  DndContext,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  closestCenter,\n  useSensor,\n  useSensors,\n  type Announcements,\n  type ScreenReaderInstructions,\n} from \"@dnd-kit/core\";\nimport { SortableContext, sortableKeyboardCoordinates, useSortable } from \"@dnd-kit/sortable\";\nimport { DragDropVerticalIcon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cn } from \"cn\";\nimport { useMemo, useState, type HTMLAttributes, type ReactNode } from \"react\";\nimport type { ContentKitUiAppearance } from \"../appearance.js\";\nimport { useMessages } from \"../i18n/context.js\";\nimport { ContentKitUiRoot } from \"../scope.js\";\n\nexport interface SortableListProps<T> {\n  items: readonly T[];\n  /** A stable key per item. */\n  id: (item: T) => string;\n  /** The item's spoken name in announcements and the handle's label. */\n  name: (item: T) => string;\n  /** Called once per drop with the old and new index. */\n  onMove: (from: number, to: number) => void;\n  /** Rows (default) or a wrapping grid of tiles. */\n  layout?: \"list\" | \"grid\";\n  disabled?: boolean;\n  /** Attributes of an item's `<li>`. */\n  row?: (item: T) => HTMLAttributes<HTMLLIElement> & Record<`data-${string}`, unknown>;\n  /** An item's content; place `handle` (its drag handle) where it belongs. */\n  children: (item: T, handle: ReactNode, index: number) => ReactNode;\n  className?: string;\n  /** Accessible name of the list. */\n  label?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\n// Items stay put while dragging; a bar marks where the item will land.\nconst noShift = () => null;\nconst handleClass =\n  \"inline-flex size-8 shrink-0 cursor-grab touch-none items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing disabled:cursor-default disabled:opacity-50\";\n\n/**\n * A reorderable list or grid (dnd-kit): drag an item by its handle with a\n * mouse, a finger or the keyboard (Space or Enter lifts, arrows move, Space\n * or Enter drops, Escape cancels), with localized screen reader\n * announcements. onMove gets the old and new index once, on drop.\n */\nexport function SortableList<T>({ items, id, name, onMove, layout = \"list\", disabled, row, children, className, label, appearance }: SortableListProps<T>) {\n  const { t } = useMessages();\n  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));\n  const ids = useMemo(() => items.map(id), [items, id]);\n  const [active, setActive] = useState<string | null>(null);\n  const [over, setOver] = useState<string | null>(null);\n  const at = (key: unknown) => ids.indexOf(String(key));\n  const spoken = (key: unknown) => {\n    const i = at(key);\n    return i < 0 ? \"\" : name(items[i]!);\n  };\n  const total = ids.length;\n  const announcements: Announcements = {\n    onDragStart: ({ active }) => t(\"sortable.pickedUp\", { name: spoken(active.id), position: at(active.id) + 1, total }),\n    onDragOver: ({ active, over }) => (over ? t(\"sortable.over\", { name: spoken(active.id), position: at(over.id) + 1, total }) : undefined),\n    onDragEnd: ({ active, over }) =>\n      over ? t(\"sortable.dropped\", { name: spoken(active.id), position: at(over.id) + 1, total }) : t(\"sortable.droppedAway\", { name: spoken(active.id) }),\n    onDragCancel: ({ active }) => t(\"sortable.canceled\", { name: spoken(active.id) }),\n  };\n  const instructions: ScreenReaderInstructions = { draggable: t(\"sortable.instructions\") };\n  const from = active ? at(active) : -1;\n  const to = over ? at(over) : -1;\n  const dragged = from >= 0 ? items[from] : undefined;\n  const grid = layout === \"grid\";\n  const list = (inner: ReactNode, overlay?: boolean) => (\n    <ol\n      className={cn(grid ? \"grid grid-cols-[repeat(auto-fill,minmax(8rem,1fr))] gap-2\" : \"grid gap-1\", className)}\n      aria-label={overlay ? undefined : label}\n      data-ckui=\"sortable-list\"\n      data-layout={layout}\n      data-overlay={overlay ? \"\" : undefined}\n    >\n      {inner}\n    </ol>\n  );\n  return (\n    <ContentKitUiRoot appearance={appearance} className=\"contents\">\n      <DndContext\n        sensors={sensors}\n        collisionDetection={closestCenter}\n        accessibility={{ announcements, screenReaderInstructions: instructions }}\n        onDragStart={(e) => setActive(String(e.active.id))}\n        onDragOver={(e) => setOver(e.over ? String(e.over.id) : null)}\n        onDragCancel={() => {\n          setActive(null);\n          setOver(null);\n        }}\n        onDragEnd={(e) => {\n          setActive(null);\n          setOver(null);\n          const a = at(e.active.id);\n          const b = e.over ? at(e.over.id) : -1;\n          if (a >= 0 && b >= 0 && a !== b) onMove(a, b);\n        }}\n      >\n        <SortableContext items={ids} strategy={noShift} disabled={disabled}>\n          {list(\n            items.map((item, i) => (\n              <Item\n                key={ids[i]}\n                id={ids[i]!}\n                label={t(\"sortable.handle\", { name: name(item) })}\n                attrs={row?.(item)}\n                disabled={disabled}\n                grid={grid}\n                dragging={i === from}\n                drop={from >= 0 && i === to && to !== from ? (to > from ? \"after\" : \"before\") : undefined}\n                render={(handle) => children(item, handle, i)}\n              />\n            )),\n          )}\n        </SortableContext>\n        <DragOverlay dropAnimation={null}>\n          {dragged !== undefined\n            ? list(\n                <li {...row?.(dragged)} className={cn(row?.(dragged).className, \"cursor-grabbing rounded-md bg-background shadow-lg ring-1 ring-border\")}>\n                  {children(\n                    dragged,\n                    <span className={handleClass}>\n                      <HugeiconsIcon icon={DragDropVerticalIcon} strokeWidth={2} className=\"size-4.5\" />\n                    </span>,\n                    from,\n                  )}\n                </li>,\n                true,\n              )\n            : null}\n        </DragOverlay>\n      </DndContext>\n    </ContentKitUiRoot>\n  );\n}\n\nfunction Item({\n  id,\n  label,\n  attrs,\n  disabled,\n  grid,\n  dragging,\n  drop,\n  render,\n}: {\n  id: string;\n  label: string;\n  attrs?: HTMLAttributes<HTMLLIElement>;\n  disabled?: boolean;\n  grid: boolean;\n  dragging: boolean;\n  drop?: \"before\" | \"after\";\n  render: (handle: ReactNode) => ReactNode;\n}) {\n  const { attributes, listeners, setNodeRef, setActivatorNodeRef } = useSortable({ id });\n  const handle = (\n    <button type=\"button\" ref={setActivatorNodeRef} className={handleClass} aria-label={label} disabled={disabled} data-ckui=\"sort-handle\" {...attributes} {...listeners}>\n      <HugeiconsIcon icon={DragDropVerticalIcon} strokeWidth={2} className=\"size-4.5\" />\n    </button>\n  );\n  return (\n    <li\n      {...attrs}\n      ref={setNodeRef}\n      className={cn(\n        attrs?.className,\n        \"relative data-dragging:opacity-40 before:pointer-events-none before:absolute before:rounded-full before:bg-primary before:opacity-0\",\n        grid\n          ? \"before:inset-y-0 before:w-0.5 data-[drop=before]:before:-left-[5px] data-[drop=before]:before:opacity-100 data-[drop=after]:before:-right-[5px] data-[drop=after]:before:opacity-100\"\n          : \"before:inset-x-0 before:h-0.5 data-[drop=before]:before:-top-[3px] data-[drop=before]:before:opacity-100 data-[drop=after]:before:-bottom-[3px] data-[drop=after]:before:opacity-100\",\n      )}\n      data-drop={drop}\n      data-dragging={dragging || undefined}\n    >\n      {render(handle)}\n    </li>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"sortable-list.js","names":[],"sources":["../../src/components/sortable-list.tsx"],"sourcesContent":["import {\n  DndContext,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  closestCenter,\n  useSensor,\n  useSensors,\n  type Announcements,\n  type ScreenReaderInstructions,\n} from \"@dnd-kit/core\";\nimport { SortableContext, sortableKeyboardCoordinates, useSortable } from \"@dnd-kit/sortable\";\nimport { DragDropVerticalIcon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cn } from \"cn\";\nimport { Fragment, useMemo, useState, type HTMLAttributes, type KeyboardEvent, type ReactNode } from \"react\";\nimport type { ContentKitUiAppearance } from \"../appearance.js\";\nimport { useMessages } from \"../i18n/context.js\";\nimport { ContentKitUiRoot } from \"../scope.js\";\n\nexport interface SortableListProps<T> {\n  items: readonly T[];\n  /** A stable key per item. */\n  id: (item: T) => string;\n  /** The item's spoken name in announcements and the handle's label. */\n  name: (item: T) => string;\n  /** Called once per drop with the old and new index. */\n  onMove: (from: number, to: number) => void;\n  /** Rows (default) or a wrapping grid of tiles. */\n  layout?: \"list\" | \"grid\";\n  disabled?: boolean;\n  /** Attributes of an item's `<li>`. */\n  row?: (item: T) => HTMLAttributes<HTMLLIElement> & Record<`data-${string}`, unknown>;\n  /** An item's content; place `handle` (its drag handle) where it belongs. */\n  children: (item: T, handle: ReactNode, index: number) => ReactNode;\n  className?: string;\n  /** Accessible name of the list. */\n  label?: string;\n  /** The whole item is the drag handle (Space lifts and drops; Enter is left to the item). */\n  wholeItem?: boolean;\n  /** Unsortable entries after the items, in the same list (e.g. uploads in progress). */\n  trailing?: ReactNode;\n  appearance?: ContentKitUiAppearance;\n}\n\nconst SPACE_ONLY = { start: [\"Space\"], cancel: [\"Escape\"], end: [\"Space\"] };\n\n// Items stay put while dragging; a bar marks where the item will land.\nconst noShift = () => null;\nconst handleClass =\n  \"inline-flex size-8 shrink-0 cursor-grab touch-none items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing disabled:cursor-default disabled:opacity-50\";\n\n/**\n * A reorderable list or grid (dnd-kit): drag an item by its handle with a\n * mouse, a finger or the keyboard (Space or Enter lifts, arrows move, Space\n * or Enter drops, Escape cancels), with localized screen reader\n * announcements. onMove gets the old and new index once, on drop.\n */\nexport function SortableList<T>({ items, id, name, onMove, layout = \"list\", disabled, row, children, className, label, appearance, wholeItem, trailing }: SortableListProps<T>) {\n  const { t } = useMessages();\n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates, ...(wholeItem ? { keyboardCodes: SPACE_ONLY } : {}) }),\n  );\n  const ids = useMemo(() => items.map(id), [items, id]);\n  const [active, setActive] = useState<string | null>(null);\n  const [over, setOver] = useState<string | null>(null);\n  const at = (key: unknown) => ids.indexOf(String(key));\n  const spoken = (key: unknown) => {\n    const i = at(key);\n    return i < 0 ? \"\" : name(items[i]!);\n  };\n  const total = ids.length;\n  const announcements: Announcements = {\n    onDragStart: ({ active }) => t(\"sortable.pickedUp\", { name: spoken(active.id), position: at(active.id) + 1, total }),\n    onDragOver: ({ active, over }) => (over ? t(\"sortable.over\", { name: spoken(active.id), position: at(over.id) + 1, total }) : undefined),\n    onDragEnd: ({ active, over }) =>\n      over ? t(\"sortable.dropped\", { name: spoken(active.id), position: at(over.id) + 1, total }) : t(\"sortable.droppedAway\", { name: spoken(active.id) }),\n    onDragCancel: ({ active }) => t(\"sortable.canceled\", { name: spoken(active.id) }),\n  };\n  const instructions: ScreenReaderInstructions = { draggable: t(wholeItem ? \"sortable.instructionsTile\" : \"sortable.instructions\") };\n  const from = active ? at(active) : -1;\n  const to = over ? at(over) : -1;\n  const dragged = from >= 0 ? items[from] : undefined;\n  const grid = layout === \"grid\";\n  const list = (inner: ReactNode, overlay?: boolean) => (\n    <ol\n      className={cn(grid ? \"grid grid-cols-[repeat(auto-fill,minmax(8rem,1fr))] gap-2\" : \"grid gap-1\", className)}\n      aria-label={overlay ? undefined : label}\n      data-ckui=\"sortable-list\"\n      data-layout={layout}\n      data-overlay={overlay ? \"\" : undefined}\n    >\n      {inner}\n    </ol>\n  );\n  return (\n    <ContentKitUiRoot appearance={appearance} className=\"contents\">\n      <DndContext\n        sensors={sensors}\n        collisionDetection={closestCenter}\n        accessibility={{ announcements, screenReaderInstructions: instructions }}\n        onDragStart={(e) => setActive(String(e.active.id))}\n        onDragOver={(e) => setOver(e.over ? String(e.over.id) : null)}\n        onDragCancel={() => {\n          setActive(null);\n          setOver(null);\n        }}\n        onDragEnd={(e) => {\n          setActive(null);\n          setOver(null);\n          const a = at(e.active.id);\n          const b = e.over ? at(e.over.id) : -1;\n          if (a >= 0 && b >= 0 && a !== b) onMove(a, b);\n        }}\n      >\n        <SortableContext items={ids} strategy={noShift} disabled={disabled}>\n          {list(\n            items.map((item, i) => (\n              <Item\n                key={ids[i]}\n                id={ids[i]!}\n                label={t(\"sortable.handle\", { name: name(item) })}\n                attrs={row?.(item)}\n                disabled={disabled}\n                grid={grid}\n                whole={wholeItem}\n                dragging={i === from}\n                drop={from >= 0 && i === to && to !== from ? (to > from ? \"after\" : \"before\") : undefined}\n                render={(handle) => children(item, handle, i)}\n              />\n            )).concat(trailing ? [<Fragment key=\"trailing\">{trailing}</Fragment>] : []),\n          )}\n        </SortableContext>\n        <DragOverlay dropAnimation={null}>\n          {dragged !== undefined\n            ? list(\n                <li {...row?.(dragged)} className={cn(row?.(dragged).className, \"cursor-grabbing rounded-md bg-background shadow-lg ring-1 ring-border\")}>\n                  {children(\n                    dragged,\n                    wholeItem ? null : (\n                      <span className={handleClass}>\n                        <HugeiconsIcon icon={DragDropVerticalIcon} strokeWidth={2} className=\"size-4.5\" />\n                      </span>\n                    ),\n                    from,\n                  )}\n                </li>,\n                true,\n              )\n            : null}\n        </DragOverlay>\n      </DndContext>\n    </ContentKitUiRoot>\n  );\n}\n\nfunction Item({\n  id,\n  label,\n  attrs,\n  disabled,\n  grid,\n  whole,\n  dragging,\n  drop,\n  render,\n}: {\n  id: string;\n  label: string;\n  attrs?: HTMLAttributes<HTMLLIElement>;\n  disabled?: boolean;\n  grid: boolean;\n  whole?: boolean;\n  dragging: boolean;\n  drop?: \"before\" | \"after\";\n  render: (handle: ReactNode) => ReactNode;\n}) {\n  const { attributes, listeners, setNodeRef, setActivatorNodeRef } = useSortable({ id });\n  const handle = whole ? null : (\n    <button type=\"button\" ref={setActivatorNodeRef} className={handleClass} aria-label={label} disabled={disabled} data-ckui=\"sort-handle\" {...attributes} {...listeners}>\n      <HugeiconsIcon icon={DragDropVerticalIcon} strokeWidth={2} className=\"size-4.5\" />\n    </button>\n  );\n  return (\n    <li\n      {...attrs}\n      {...(whole && !disabled\n        ? {\n            ...attributes,\n            ...listeners,\n            onKeyDown: (e: KeyboardEvent<HTMLLIElement>) => {\n              listeners?.onKeyDown?.(e);\n              attrs?.onKeyDown?.(e);\n            },\n            \"aria-label\": label,\n          }\n        : {})}\n      ref={setNodeRef}\n      className={cn(\n        attrs?.className,\n        \"relative data-dragging:opacity-40 before:pointer-events-none before:absolute before:rounded-full before:bg-primary before:opacity-0\",\n        grid\n          ? \"before:inset-y-0 before:w-0.5 data-[drop=before]:before:-left-[5px] data-[drop=before]:before:opacity-100 data-[drop=after]:before:-right-[5px] data-[drop=after]:before:opacity-100\"\n          : \"before:inset-x-0 before:h-0.5 data-[drop=before]:before:-top-[3px] data-[drop=before]:before:opacity-100 data-[drop=after]:before:-bottom-[3px] data-[drop=after]:before:opacity-100\",\n      )}\n      data-drop={drop}\n      data-dragging={dragging || undefined}\n    >\n      {render(handle)}\n    </li>\n  );\n}\n"],"mappings":"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"}

package/dist/index.d.ts

@@ -30,7 +30,7 @@ export { GroupManager, useGroupManagerAccess, type GroupManagerProps } from './c
 export { MediaItemPanel, VideoMediaEditor, videoPaths, type MediaItemPanelProps, type VideoMediaEditorProps } from './components/admin/media-item-panel.js';
 export { StatsDashboard, type StatsDashboardProps } from './components/admin/stats-dashboard.js';
 export { ReaderManifestEditor, type ReaderManifestEditorProps } from './components/admin/reader-manifest.js';
-export { PageReview, type PageReviewProps } from './components/admin/page-review.js';
+export { PageNotices, type PageNoticesProps } from './components/admin/page-notices.js';
 export { UploadQueue, type UploadQueueProps } from './components/admin/upload-queue.js';
 export { NoAccess, Pager, useConfirm, type AdminFlowProps, type AdminRouteProps, type ConfirmOptions, type ContentKitGuard } from './components/admin/shell.js';
 export type { AdminNavigation, ContentKitAuth, StaffAccess, StaffArea } from './react/admin.js';