@hackcove/ui-react 0.10.7 → 0.10.9

package/dist/AppShell.d.ts

@@ -78,21 +78,33 @@ export declare function AppShellHideBelow({ breakpoint, children, ...rest }: Pas
  * reachable and nothing scrolls sideways. The menu is a native `<details>`, so it works with the
  * keyboard, with a screen reader and on a page that never hydrates. From `md` the header is the
  * row, and the `subnav` row, as they are.
+ *
+ * `controls` stay in the row at every width, so keep them few (a theme toggle, the viewer's avatar);
+ * on a phone a crowded `controls` clips, and the Menu button is never the part cut off. Pickers and
+ * actions that do not fit a phone row go in `menuControls`: rendered once, they sit in the row after
+ * `controls` from `md`, and below `md` at the top of the Menu, above `nav` and `subnav`.
  */
-export declare function AppShell({ brand, nav, controls, header, subnav, menuLabel, footer, bleed, hideChromeInPrint, children, ...rest }: {
+export declare function AppShell({ brand, nav, controls, menuControls, header, subnav, menuLabel, footer, bleed, hideChromeInPrint, children, ...rest }: {
     /** The brand: a logo and a name, in the header's brand type, with the gap between them. `AppShellBrand` makes both one link. */
     brand?: ReactNode;
     /** The main navigation, e.g. a `Tabs variant="pill"` of links (it is already a `<nav>`). Below `md` it is in the menu. */
     nav?: ReactNode;
     /** The end of the row: a picker, a theme toggle. Gap-2, vertically centred; no child shrinks, and a full-width control (a `Select` at its default) sizes to its content. */
     controls?: ReactNode;
+    /**
+     * Pickers and actions that do not fit a phone row, such as a project `Select` and a Sign out
+     * `Button`. From `md` they sit in the row after `controls`; below `md` they are at the top of the
+     * Menu, above `nav` and `subnav`. Rendered once, so a field keeps its state and ids stay unique.
+     * `controls` stay in the row at every width, so keep those few.
+     */
+    menuControls?: ReactNode;
     /** The escape hatch: a free node in the header row, after `brand` and `nav`. */
     header?: ReactNode;
     /** A second fixed-height row under the header from `md`, e.g. a `Tabs variant="pill"` of links. Below `md` it is in the menu with `nav`. */
     subnav?: ReactNode;
     /**
      * The phone menu button's name, for an app in another language. Only drawn below `md`, and only
-     * when `nav` or `subnav` is given.
+     * when `nav`, `subnav` or `menuControls` is given.
      * @default Menu
      */
     menuLabel?: string;

package/dist/AppShell.js

@@ -62,17 +62,20 @@ function ScrollRow({ className, children }) {
     return (_jsx(ContainerFrame, { elementRef: setRow, className: cx(ROW, FADE, className), children: children }));
 }
 /**
- * The header row's slots in order: brand, nav (from `md`), the free `children`, then controls and,
- * below `md`, the menu at the end.
+ * The header row's slots in order: brand, nav (from `md`), the free `children`, then `controls` and
+ * the menu at the end. `controls` have a wrapper of their own that shrinks and clips, and the menu
+ * sits beside it, so a crowded `controls` never pushes the Menu off a phone screen. From `md` the
+ * menu is the inline row of `menuControls` after `controls`.
  */
-function HeaderSlots({ brand, nav, controls, menu, children, }) {
-    return (_jsxs(_Fragment, { children: [brand && (_jsx("div", { className: "flex items-center gap-2 text-base font-bold tracking-tight text-slate-900", children: brand })), nav && _jsx("div", { className: "hidden items-center gap-4 *:shrink-0 md:flex", children: nav }), children, (controls || menu) && (_jsxs("div", { className: controls
-                    ? "ml-auto flex items-center gap-2 *:shrink-0 [&>.w-full]:w-auto"
-                    : "ml-auto flex items-center gap-2 *:shrink-0 md:hidden", children: [controls, menu] }))] }));
+function HeaderSlots({ brand, nav, controls, menu, menuInline, children, }) {
+    return (_jsxs(_Fragment, { children: [brand && (_jsx("div", { className: "flex items-center gap-2 text-base font-bold tracking-tight text-slate-900", children: brand })), nav && _jsx("div", { className: "hidden items-center gap-4 *:shrink-0 md:flex", children: nav }), children, (controls || menu) && (_jsxs("div", { className: cx(
+                // Below `md` this wrapper may shrink (the row's `*:shrink-0` is overridden), so a crowded
+                // `controls` clips inside its own box; from `md` it keeps its width and the row scrolls.
+                "ml-auto flex min-w-0 items-center gap-2 max-md:shrink!", !controls && !menuInline && "md:hidden"), children: [controls && (_jsx("div", { className: "flex min-w-0 items-center gap-2 *:shrink-0 max-md:-mx-1 max-md:overflow-x-clip max-md:px-1 [&>.w-full]:w-auto", children: controls })), menu] }))] }));
 }
 /** The sticky header: the one-row slots, and from `md` the `subnav` row under them. */
-function AppShellHeader({ brand, nav, controls, subnav, menuLabel, hideChromeInPrint, children, }) {
-    return (_jsxs("header", { className: cx("sticky top-0 z-10 border-b border-slate-200 bg-white", hideChromeInPrint && "print:hidden"), children: [_jsx(ScrollRow, { className: "flex h-14", children: _jsx(HeaderSlots, { brand: brand, nav: nav, controls: controls, menu: (nav || subnav) && (_jsxs(AppShellMenu, { label: menuLabel, children: [nav, subnav] })), children: children }) }), subnav && _jsx(ScrollRow, { className: "hidden h-12 md:flex", children: subnav })] }));
+function AppShellHeader({ brand, nav, controls, menuControls, subnav, menuLabel, hideChromeInPrint, children, }) {
+    return (_jsxs("header", { className: cx("sticky top-0 z-10 border-b border-slate-200 bg-white", hideChromeInPrint && "print:hidden"), children: [_jsx(ScrollRow, { className: "flex h-14", children: _jsx(HeaderSlots, { brand: brand, nav: nav, controls: controls, menuInline: !!menuControls, menu: (nav || subnav || menuControls) && (_jsxs(AppShellMenu, { label: menuLabel, controls: menuControls, children: [nav, subnav] })), children: children }) }), subnav && _jsx(ScrollRow, { className: "hidden h-12 md:flex", children: subnav })] }));
 }
 /**
  * The page frame: it paints the page canvas and sets the type face, ink and font smoothing
@@ -93,10 +96,15 @@ function AppShellHeader({ brand, nav, controls, subnav, menuLabel, hideChromeInP
  * reachable and nothing scrolls sideways. The menu is a native `<details>`, so it works with the
  * keyboard, with a screen reader and on a page that never hydrates. From `md` the header is the
  * row, and the `subnav` row, as they are.
+ *
+ * `controls` stay in the row at every width, so keep them few (a theme toggle, the viewer's avatar);
+ * on a phone a crowded `controls` clips, and the Menu button is never the part cut off. Pickers and
+ * actions that do not fit a phone row go in `menuControls`: rendered once, they sit in the row after
+ * `controls` from `md`, and below `md` at the top of the Menu, above `nav` and `subnav`.
  */
-export function AppShell({ brand, nav, controls, header, subnav, menuLabel = "Menu", footer, bleed = false, hideChromeInPrint = false, children, ...rest }) {
+export function AppShell({ brand, nav, controls, menuControls, header, subnav, menuLabel = "Menu", footer, bleed = false, hideChromeInPrint = false, children, ...rest }) {
     return (_jsxs("div", { ...rest, className: cx("flex min-h-dvh flex-col bg-gray-50 font-sans text-slate-900 antialiased", 
         // The sticky header's height (its rows and the bottom border), for a bar that sticks under it.
         // Below `md` it is one row whatever the slots are: the subnav is in the menu.
-        "[--app-header:calc(3.5rem+1px)]", subnav ? "md:[--app-header:calc(6.5rem+1px)]" : undefined), children: [_jsx(AppShellHeader, { brand: brand, nav: nav, controls: controls, subnav: subnav, menuLabel: menuLabel, hideChromeInPrint: hideChromeInPrint, children: header }), _jsx("main", { className: "flex flex-1 flex-col", children: bleed ? (children) : (_jsx(ContainerFrame, { className: cx("py-8", hideChromeInPrint && "print:p-0"), children: children })) }), footer && (_jsx("footer", { className: cx("border-t border-slate-200", hideChromeInPrint && "print:hidden"), children: _jsx(ContainerFrame, { className: "py-6 text-sm text-slate-500", children: footer }) }))] }));
+        "[--app-header:calc(3.5rem+1px)]", subnav ? "md:[--app-header:calc(6.5rem+1px)]" : undefined), children: [_jsx(AppShellHeader, { brand: brand, nav: nav, controls: controls, menuControls: menuControls, subnav: subnav, menuLabel: menuLabel, hideChromeInPrint: hideChromeInPrint, children: header }), _jsx("main", { className: "flex flex-1 flex-col", children: bleed ? (children) : (_jsx(ContainerFrame, { className: cx("py-8", hideChromeInPrint && "print:p-0"), children: children })) }), footer && (_jsx("footer", { className: cx("border-t border-slate-200", hideChromeInPrint && "print:hidden"), children: _jsx(ContainerFrame, { className: "py-6 text-sm text-slate-500", children: footer }) }))] }));
 }

package/dist/AppShellMenu.d.ts

@@ -6,8 +6,15 @@ import { type ReactElement, type ReactNode } from "react";
  * is out of flow (it hangs under the header, `top-full`), so the header keeps its one height open
  * or closed. With script it also closes on Escape (focus returns to the button) and when a link in
  * it is followed, for a router that changes the page without a reload.
+ *
+ * `controls` (AppShell's `menuControls`) sit at the top of the panel, above the links. From `md`
+ * the `<details>` drops its own box and shows only them, inline at the row's end, whether it is
+ * open or not: the summary and the link copies are hidden (the links render in their own rows from
+ * `md`) and the panel is a plain row. They are rendered once, so a field keeps its state.
  */
-export declare function AppShellMenu({ label, children, }: {
+export declare function AppShellMenu({ label, controls, children, }: {
     label: string;
+    /** Rendered once: at the top of the panel below `md`, inline in the row from `md`. */
+    controls?: ReactNode;
     children: ReactNode;
 }): ReactElement;

package/dist/AppShellMenu.js

@@ -21,8 +21,13 @@ const ICON = {
  * is out of flow (it hangs under the header, `top-full`), so the header keeps its one height open
  * or closed. With script it also closes on Escape (focus returns to the button) and when a link in
  * it is followed, for a router that changes the page without a reload.
+ *
+ * `controls` (AppShell's `menuControls`) sit at the top of the panel, above the links. From `md`
+ * the `<details>` drops its own box and shows only them, inline at the row's end, whether it is
+ * open or not: the summary and the link copies are hidden (the links render in their own rows from
+ * `md`) and the panel is a plain row. They are rendered once, so a field keeps its state.
  */
-export function AppShellMenu({ label, children, }) {
+export function AppShellMenu({ label, controls, children, }) {
     const details = useRef(null);
     const close = (focusButton) => {
         const el = details.current;
@@ -32,11 +37,17 @@ export function AppShellMenu({ label, children, }) {
         if (focusButton)
             el.querySelector("summary")?.focus();
     };
-    return (_jsxs("details", { ref: details, className: "group md:hidden", onKeyDown: (event) => {
-            if (event.key === "Escape")
+    return (_jsxs("details", { ref: details, className: cx("group shrink-0", controls
+            ? "md:contents md:[&::details-content]:contents md:[&::details-content]:[content-visibility:visible]"
+            : "md:hidden"), onKeyDown: (event) => {
+            // A dialog opened from a control in the menu takes its own Escape; the menu stays open.
+            if (event.key === "Escape" &&
+                !(event.target instanceof Element && event.target.closest("dialog")))
                 close(true);
-        }, children: [_jsxs("summary", { className: cx("flex cursor-pointer list-none items-center gap-2 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 select-none hover:bg-slate-50 [&::-webkit-details-marker]:hidden", focusRing), children: [_jsx("svg", { ...ICON, className: cx(ICON.className, "group-open:hidden"), children: _jsx("path", { d: "M3 5.5h14M3 10h14M3 14.5h14" }) }), _jsx("svg", { ...ICON, className: cx(ICON.className, "hidden group-open:block"), children: _jsx("path", { d: "M5 5l10 10M15 5L5 15" }) }), label] }), _jsx("div", { className: "absolute inset-x-0 top-full max-h-[calc(100dvh-var(--app-header))] overflow-y-auto overscroll-contain border-y border-slate-200 bg-white shadow-lg", onClick: (event) => {
+        }, children: [_jsxs("summary", { className: cx("flex cursor-pointer list-none md:hidden items-center gap-2 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 select-none hover:bg-slate-50 [&::-webkit-details-marker]:hidden", focusRing), children: [_jsx("svg", { ...ICON, className: cx(ICON.className, "group-open:hidden"), children: _jsx("path", { d: "M3 5.5h14M3 10h14M3 14.5h14" }) }), _jsx("svg", { ...ICON, className: cx(ICON.className, "hidden group-open:block"), children: _jsx("path", { d: "M5 5l10 10M15 5L5 15" }) }), label] }), _jsx("div", { 
+                // From `md` the panel draws no box (`contents`), so its dropdown look applies below `md` only.
+                className: "absolute inset-x-0 top-full max-h-[calc(100dvh-var(--app-header))] overflow-y-auto overscroll-contain border-y border-slate-200 bg-white shadow-lg md:contents", onClick: (event) => {
                     if (event.target instanceof Element && event.target.closest("a[href]"))
                         close(false);
-                }, children: _jsx(ContainerFrame, { className: "flex flex-col gap-3 py-3", children: children }) })] }));
+                }, children: _jsxs(ContainerFrame, { className: "flex flex-col gap-3 py-3 md:contents", children: [controls && (_jsx("div", { className: "flex flex-wrap items-center gap-2 md:flex-nowrap md:*:shrink-0 md:[&>.w-full]:w-auto", children: controls })), _jsx("div", { className: "flex flex-col gap-3 md:hidden", children: children })] }) })] }));
 }

package/dist/SortableList.d.ts

@@ -0,0 +1,81 @@
+import { type AriaAttributes, type ReactElement, type ReactNode } from "react";
+import { type DropTarget, type Key } from "react-aria-components";
+import type { DataAttributes } from "./link.js";
+/** A move the user made: which item, the section it lands in, and the item it lands next to. */
+export type SortableMove = {
+    /** The `id` of the item that moved. */
+    id: string;
+    /** The `id` of the `SortableSection` the item lands in. Set whenever the list has sections. */
+    section?: string;
+    /**
+     * The item it was dropped before or after. Absent only for a drop into an empty section, where
+     * there is no item to land next to.
+     */
+    target?: {
+        id: string;
+        position: "before" | "after";
+    };
+};
+/** What a part takes through to its element: `data-*` (an e2e hook) and a description. */
+type Through = DataAttributes & Pick<AriaAttributes, "aria-describedby" | "aria-details">;
+/** A row's section and title; a tail row also lists its section's items, in order. */
+type Place = {
+    section?: string;
+    title: string;
+    tail?: string[];
+};
+/** Only a drop between two rows is a move; a drop on a row's centre, or on the list itself, is not. */
+export declare function dropOperation(target: DropTarget): "move" | "cancel";
+/**
+ * The move react-aria reported, as the app's `SortableMove`, or nothing when it is not one (a drop
+ * on a row's centre, or next to the item itself). A drop at a section's tail lands after the
+ * section's last other item, or with no target when it has none.
+ */
+export declare function moveOf(places: Map<string, Place>, keys: Iterable<Key>, target: DropTarget): SortableMove | null;
+/**
+ * A list the user puts in order: items under section headings, moved by dragging a row or from the
+ * keyboard (each row's grip handle, Enter, the arrow keys, Enter to drop, Escape to cancel). A drop
+ * reports `onReorder` with the item, the section it lands in and the item it lands next to; the app
+ * applies it to its own data. The list never reorders itself: it shows what its children say.
+ *
+ * Its children are `SortableSection`s, or `SortableItem`s directly for a list with no sections, each
+ * a direct child (map your data straight to them). Moving an item into another section is how the
+ * app changes its group, such as a ticket's priority. Two lists on one page never take each other's
+ * items.
+ */
+export declare function SortableList({ label, onReorder, children, ...rest }: {
+    /** The list's accessible name, read by a screen reader. */
+    label: string;
+    /** Called once per drop with the move; apply it to your data. */
+    onReorder: (move: SortableMove) => void;
+    /** `SortableSection`s, or `SortableItem`s for a list with no sections. */
+    children: ReactNode;
+} & Through): ReactElement;
+type SortableSectionProps = {
+    /** The section's id, reported as `section` in a move that lands in it. */
+    id: string;
+    /** The heading over its items. */
+    title: string;
+    /** Its `SortableItem`s, each a direct child. With none it shows a quiet "Drop here" row. */
+    children?: ReactNode;
+};
+/**
+ * One group of a `SortableList` under a heading that shows its title and how many items it holds.
+ * An empty section still takes a drop: it shows a quiet "Drop here" row in place of items.
+ */
+export declare function SortableSection({ id, title, children, ...rest }: SortableSectionProps & Through): ReactElement;
+type SortableItemProps = {
+    /** The item's id, reported in a move. */
+    id: string;
+    /** Its one line; also what a screen reader announces while it is dragged. */
+    title: string;
+    /** A meta line under the title: `Pill`s, an `Avatar`. */
+    children?: ReactNode;
+};
+/**
+ * One row of a `SortableList`: a grip handle, the title, and an optional meta line under it. A
+ * pointer drags the row itself; the handle ("Reorder <title>") is how a keyboard or screen reader
+ * starts a move.
+ */
+export declare function SortableItem({ id, title, children, ...rest }: SortableItemProps & Through): ReactElement;
+export {};

package/dist/SortableList.js

@@ -0,0 +1,186 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, isValidElement, useId, useMemo, } from "react";
+import { Button, DropIndicator, GridList, GridListHeader, GridListItem, GridListSection, useDragAndDrop, } from "react-aria-components";
+import { cx, focusRing } from "./cx.js";
+/** The list's box: the Card's border, fill and shadow, clipped to its radius. */
+const FRAME = "w-full overflow-hidden rounded-xl border border-slate-200/70 bg-white shadow-sm outline-none";
+/**
+ * A hairline above every row that follows another row (an item, a heading, a drop line), so the
+ * first row of the list sits flush under the frame's own border. The line's colour is set apart.
+ */
+const AFTER_ROW = "border-slate-200/70 [[role=row]+&]:border-t";
+/** A section after another section gets the same hairline above its heading. */
+const AFTER_SECTION = "border-slate-200/70 [[role=rowgroup]+&]:border-t";
+const HEADING = "flex items-center justify-between gap-3 bg-slate-50 px-4 py-2 text-xs font-medium tracking-wide text-slate-600 uppercase";
+const ITEM = "flex w-full cursor-grab items-center gap-3 px-4 py-3 text-left text-sm text-slate-900 outline-none hover:bg-slate-50";
+/** The keyboard cursor: the focus ring, drawn inside the row. */
+const ITEM_FOCUSED = "outline-2 -outline-offset-2 outline-violet-600";
+/** An empty section's "Drop here" row. */
+const PLACEHOLDER = "px-4 py-3 text-sm text-slate-500 outline-none";
+/** The tail row of a section with items: takes no room and shows nothing but the drop line. */
+const TAIL = "h-0 overflow-hidden outline-none";
+/** A marker on every row a pointer can drop next to: the items and each section's tail row. */
+const ROW_MARK = "data-sortable-row";
+/**
+ * react-aria drops an `aria-describedby` or `aria-details` it is handed on a row or a section, and
+ * sets its own describedby on a row. This draws the element with both: its own ids and the app's.
+ */
+function describedBy({ "aria-describedby": described, "aria-details": details, ...data }) {
+    return {
+        ...data,
+        render: (props) => (_jsx("div", { ...props, "aria-describedby": [props["aria-describedby"], described].filter(Boolean).join(" ") || undefined, "aria-details": details ?? props["aria-details"] })),
+    };
+}
+/**
+ * The key of a section's tail row. Every section ends with one: in an empty section it is the "Drop
+ * here" row, in one with items it is an empty row of no height. A drop before it is a drop at the
+ * end of the section. react-aria's keyboard drop moves cannot step from "after the last item" of a
+ * section into the next one (it wraps to the top), but they do step from "before" a row to "before"
+ * the next row across sections, so with a tail row the end of each section is a "before" target.
+ */
+function tailKey(section) {
+    return `hackcove-sortable-end:${section}`;
+}
+/** The `SortableItem` children of a section, the ones its count counts. */
+function itemsOf(children) {
+    return Children.toArray(children).filter((child) => isValidElement(child) && child.type === SortableItem);
+}
+/** Every row's key mapped to its section (and, for a tail row, the section's items), read from the children. */
+function placesOf(children) {
+    const places = new Map();
+    for (const child of Children.toArray(children)) {
+        if (isValidElement(child) && child.type === SortableItem) {
+            const { id, title } = child.props;
+            places.set(id, { title });
+        }
+        else if (isValidElement(child) && child.type === SortableSection) {
+            const { id: section, children: items } = child.props;
+            const own = itemsOf(items);
+            for (const item of own)
+                places.set(item.props.id, { section, title: item.props.title });
+            places.set(tailKey(section), { section, title: "", tail: own.map((item) => item.props.id) });
+        }
+    }
+    return places;
+}
+/**
+ * Where a pointer drops: before or after the row it is over, by which half it is in. Over a section
+ * heading, or in a gap, it is before the next row below (the first item of that section, or its
+ * "Drop here" row), and below every row it is after the last. Never "on" a row.
+ */
+function dropTargetAt(list, y) {
+    if (!list)
+        return null;
+    const top = y + list.getBoundingClientRect().top;
+    const rows = [...list.querySelectorAll(`[${ROW_MARK}]`)];
+    for (const row of rows) {
+        const key = row.dataset.key;
+        if (key == null)
+            continue;
+        const box = row.getBoundingClientRect();
+        if (top < box.top)
+            return { type: "item", key, dropPosition: "before" };
+        if (top <= box.bottom) {
+            return {
+                type: "item",
+                key,
+                dropPosition: top < box.top + box.height / 2 ? "before" : "after",
+            };
+        }
+    }
+    const last = rows.at(-1)?.dataset.key;
+    return last == null ? null : { type: "item", key: last, dropPosition: "after" };
+}
+/** react-aria's pointer drop delegate, aware of sections (the stock one sees only top-level items). */
+function sectionDelegate(listId) {
+    return {
+        getDropTargetFromPoint: (_x, y) => dropTargetAt(document.getElementById(listId), y),
+    };
+}
+/** Only a drop between two rows is a move; a drop on a row's centre, or on the list itself, is not. */
+export function dropOperation(target) {
+    return target.type === "item" && target.dropPosition !== "on" ? "move" : "cancel";
+}
+/**
+ * The move react-aria reported, as the app's `SortableMove`, or nothing when it is not one (a drop
+ * on a row's centre, or next to the item itself). A drop at a section's tail lands after the
+ * section's last other item, or with no target when it has none.
+ */
+export function moveOf(places, keys, target) {
+    const [key] = keys;
+    if (key == null || target.type !== "item" || target.dropPosition === "on")
+        return null;
+    const place = places.get(String(target.key));
+    if (!place)
+        return null;
+    const id = String(key);
+    if (String(target.key) === id)
+        return null;
+    const section = place.section === undefined ? {} : { section: place.section };
+    if (place.tail) {
+        const last = place.tail.filter((item) => item !== id).at(-1);
+        return last === undefined
+            ? { id, ...section }
+            : { id, ...section, target: { id: last, position: "after" } };
+    }
+    return {
+        id,
+        ...section,
+        target: { id: String(target.key), position: target.dropPosition },
+    };
+}
+/**
+ * A list the user puts in order: items under section headings, moved by dragging a row or from the
+ * keyboard (each row's grip handle, Enter, the arrow keys, Enter to drop, Escape to cancel). A drop
+ * reports `onReorder` with the item, the section it lands in and the item it lands next to; the app
+ * applies it to its own data. The list never reorders itself: it shows what its children say.
+ *
+ * Its children are `SortableSection`s, or `SortableItem`s directly for a list with no sections, each
+ * a direct child (map your data straight to them). Moving an item into another section is how the
+ * app changes its group, such as a ticket's priority. Two lists on one page never take each other's
+ * items.
+ */
+export function SortableList({ label, onReorder, children, ...rest }) {
+    const listId = useId();
+    const dragType = `application/x-hackcove-sortable-${useId()
+        .replace(/[^a-z0-9]/gi, "")
+        .toLowerCase()}`;
+    const places = placesOf(children);
+    const delegate = useMemo(() => sectionDelegate(listId), [listId]);
+    const { dragAndDropHooks } = useDragAndDrop({
+        getItems: (keys) => [...keys].map((key) => ({
+            "text/plain": places.get(String(key))?.title ?? String(key),
+            [dragType]: String(key),
+        })),
+        acceptedDragTypes: [dragType],
+        getDropOperation: dropOperation,
+        dropTargetDelegate: delegate,
+        onMove: (e) => {
+            const move = moveOf(places, e.keys, e.target);
+            if (move)
+                onReorder(move);
+        },
+        renderDropIndicator: (target) => (_jsx(DropIndicator, { target: target, className: "relative h-0 outline-none", children: ({ isDropTarget }) => (_jsx("span", { "aria-hidden": "true", className: cx("absolute inset-x-0 -top-px z-10 block h-0.5", isDropTarget && "bg-violet-600") })) })),
+    });
+    return (_jsx(GridList, { ...describedBy(rest), id: listId, "aria-label": label, dragAndDropHooks: dragAndDropHooks, disabledBehavior: "all", className: FRAME, children: children }));
+}
+/**
+ * One group of a `SortableList` under a heading that shows its title and how many items it holds.
+ * An empty section still takes a drop: it shows a quiet "Drop here" row in place of items.
+ */
+export function SortableSection({ id, title, children, ...rest }) {
+    const count = itemsOf(children).length;
+    return (_jsxs(GridListSection, { ...describedBy(rest), 
+        // Sections and items share react-aria's key space; this keeps a section id from colliding with an item's.
+        id: `hackcove-sortable-section:${id}`, "aria-label": title, className: AFTER_SECTION, children: [_jsxs(GridListHeader, { className: HEADING, children: [_jsx("span", { children: title }), _jsx("span", { className: "tabular-nums text-slate-500", children: count })] }), children, _jsxs(GridListItem, { id: tailKey(id), textValue: count > 0 ? `End of ${title}` : "Drop here", isDisabled: true, [ROW_MARK]: "", className: count > 0 ? TAIL : cx(PLACEHOLDER, AFTER_ROW), children: [_jsx(Button, { slot: "drag", className: "hidden" }), count === 0 && "Drop here"] })] }));
+}
+/** The six-dot grip on each row's handle. */
+const GRIP = (_jsxs("svg", { viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", className: "h-4 w-4", children: [_jsx("circle", { cx: "6", cy: "4", r: "1.25" }), _jsx("circle", { cx: "10", cy: "4", r: "1.25" }), _jsx("circle", { cx: "6", cy: "8", r: "1.25" }), _jsx("circle", { cx: "10", cy: "8", r: "1.25" }), _jsx("circle", { cx: "6", cy: "12", r: "1.25" }), _jsx("circle", { cx: "10", cy: "12", r: "1.25" })] }));
+/**
+ * One row of a `SortableList`: a grip handle, the title, and an optional meta line under it. A
+ * pointer drags the row itself; the handle ("Reorder <title>") is how a keyboard or screen reader
+ * starts a move.
+ */
+export function SortableItem({ id, title, children, ...rest }) {
+    return (_jsxs(GridListItem, { ...describedBy(rest), id: id, textValue: title, [ROW_MARK]: "", className: ({ isFocusVisible, isDragging }) => cx(ITEM, AFTER_ROW, isFocusVisible && ITEM_FOCUSED, isDragging && "opacity-50"), children: [_jsx(Button, { slot: "drag", "aria-label": `Reorder ${title}`, className: cx("shrink-0 rounded p-0.5 text-slate-400", focusRing), children: GRIP }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate", children: title }), children != null && (_jsx("div", { className: "mt-1 flex flex-wrap items-center gap-2 text-xs text-slate-500", children: children }))] })] }));
+}

package/dist/index.d.ts

@@ -28,6 +28,7 @@ export { Breadcrumbs, type Crumb } from "./Breadcrumbs.js";
 export { BulletList } from "./BulletList.js";
 export { Callout, type CalloutTone } from "./Callout.js";
 export { ListRow, type ListRowProps } from "./ListRow.js";
+export { SortableItem, SortableList, type SortableMove, SortableSection } from "./SortableList.js";
 export { OutlineRegion, RegionFrame, type RegionRect } from "./OutlineRegion.js";
 export { type CellTone, type RowTone, Table, TableBody, TableCell, TableFoot, TableGroupRow, TableHead, TableHeaderCell, TableRow, } from "./Table.js";
 export { InlineEdit } from "./InlineEdit.js";

package/dist/index.js

@@ -28,6 +28,7 @@ export { Breadcrumbs } from "./Breadcrumbs.js";
 export { BulletList } from "./BulletList.js";
 export { Callout } from "./Callout.js";
 export { ListRow } from "./ListRow.js";
+export { SortableItem, SortableList, SortableSection } from "./SortableList.js";
 export { OutlineRegion, RegionFrame } from "./OutlineRegion.js";
 export { Table, TableBody, TableCell, TableFoot, TableGroupRow, TableHead, TableHeaderCell, TableRow, } from "./Table.js";
 export { InlineEdit } from "./InlineEdit.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hackcove/ui-react",
-  "version": "0.10.7",
+  "version": "0.10.9",
   "description": "Hack Cove React components: primitives, typography roles and a safe Markdown renderer, written against Tailwind v4 utilities. Pair with a theme from @hackcove/themes.",
   "keywords": [
     "components",