@charcuterie/ui 3.22.0 → 3.24.0

package/dist/Nav/useNavLayout.js

@@ -0,0 +1,114 @@
+import { useMediaQuery } from "@charcuterie/logic";
+import { matchMediaMatcher } from "@charcuterie/logic/browser";
+import { useState } from "react";
+const DEFAULT_ICONS_BELOW = "64rem";
+const DEFAULT_MENU_BELOW = "48rem";
+const isNavLayoutMode = (value) => value === "auto" ||
+    value === "collapsed" ||
+    value === "expanded";
+/**
+ * `localStorage`, wrapped both ways.
+ *
+ * It throws in a sandboxed iframe and in some privacy modes, and it
+ * does not exist at all while a page renders on a server — a rail
+ * that cannot remember its width should still have one.
+ *
+ * `@charcuterie/logic/browser`'s `localStoragePersistence` is the
+ * same shape and is deliberately **not** reused: it validates what
+ * it reads with `isColorSchemeMode`, so it answers `null` for every
+ * value this hook stores.
+ */
+const readStoredMode = (key) => {
+    try {
+        const stored = window.localStorage.getItem(key);
+        return isNavLayoutMode(stored) ? stored : null;
+    }
+    catch {
+        return null;
+    }
+};
+const writeStoredMode = (key, mode) => {
+    try {
+        window.localStorage.setItem(key, mode);
+    }
+    catch {
+        // A page that cannot persist still switches for this session.
+    }
+};
+/**
+ * The width rule for a rail-shaped navigation, written once.
+ *
+ * Three states, and the app chooses none of them:
+ *
+ * | Width | Layout | What the app renders |
+ * | --- | --- | --- |
+ * | `>= iconsBelow` | `rail` | a `Rail` holding a `Nav` |
+ * | `>= menuBelow` | `railIcons` | the same `Rail`, narrower |
+ * | below that | `menu` | a trigger in the `Header` |
+ *
+ * ### Why the app still places it
+ *
+ * Because the placement genuinely differs and the rule does not. The
+ * `menu` state puts a control in the header — a different corner of
+ * the page from a side rail — and no amount of restyling moves an
+ * element across `Shell`'s grid. So the library owns *which* state
+ * is right, at what width, with what override and where the override
+ * is remembered; the app owns two `if`s. That is the half that was
+ * being rewritten per app, and rewritten differently: Docket's nav
+ * wraps to three lines on a phone, mail-sifter collapses at `40rem`,
+ * and QueuePilot at `760px`, all of them arrived at alone.
+ *
+ * ### The override does not reach the narrow state
+ *
+ * `expanded` on a 390px screen would be a 212px rail beside 178px of
+ * content. The width wins there, and the remembered choice is *kept*
+ * rather than cleared — rotating a tablet back to landscape restores
+ * the rail the reader asked for, instead of silently forgetting it.
+ *
+ * ### It is a hook, not CSS
+ *
+ * The same reason `usePanelItemSize` is: a media query can restyle a
+ * rail, but it cannot move a control into the header, and it cannot
+ * tell the trigger whether to render at all. A resize re-renders;
+ * a scheme or density change still does not.
+ */
+export const useNavLayout = ({ iconsBelow = DEFAULT_ICONS_BELOW, menuBelow = DEFAULT_MENU_BELOW, storageKey, } = {}) => {
+    // Read once, lazily — a `useState` initialiser, so the stored
+    // choice is in place for the first paint and the rail does not
+    // open wide and then snap shut.
+    const [mode, setStoredMode] = useState(() => (storageKey === undefined
+        ? null
+        : readStoredMode(storageKey)) ?? "auto");
+    const { isMatching: isBelowMenu } = useMediaQuery({
+        matcher: matchMediaMatcher(`(width < ${menuBelow})`),
+    });
+    const { isMatching: isBelowIcons } = useMediaQuery({
+        matcher: matchMediaMatcher(`(width < ${iconsBelow})`),
+    });
+    const setMode = (nextMode) => {
+        setStoredMode(nextMode);
+        if (storageKey !== undefined) {
+            writeStoredMode(storageKey, nextMode);
+        }
+    };
+    const autoLayout = isBelowIcons
+        ? "railIcons"
+        : "rail";
+    const layout = isBelowMenu
+        ? "menu"
+        : mode === "auto"
+            ? autoLayout
+            : mode === "collapsed"
+                ? "railIcons"
+                : "rail";
+    return {
+        isCollapsed: layout === "railIcons",
+        layout,
+        mode,
+        setMode,
+        toggle: () => {
+            setMode(layout === "rail" ? "collapsed" : "expanded");
+        },
+    };
+};
+//# sourceMappingURL=useNavLayout.js.map

package/dist/Nav/useNavLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNavLayout.js","sourceRoot":"","sources":["../../src/Nav/useNavLayout.ts"],"names":[],"mappings":"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"}

package/dist/NavBar/NavBar.d.ts

@@ -1,130 +1,56 @@
 import type { ControlSize } from "@charcuterie/tokens";
 import type { Placement } from "@floating-ui/react";
 import type { ReactNode } from "react";
-export type NavBarItem = {
-    /**
-     * Where it goes. Routed through the injected `RouterLink` when it
-     * is this app's own path, and left to the platform when it is not.
-     */
-    href: string;
-    /** Decoration beside the label. Never the accessible name. */
-    icon?: ReactNode;
-    /** Defaults to `href`, which is already unique in a nav. */
-    key?: string;
-    /** The visible text, and the accessible name. */
-    label: string;
-};
+import type { NavItem } from "../Nav/navItems.ts";
+/**
+ * @deprecated Use `Nav`'s `NavItem`. Removed in the next major.
+ */
+export type NavBarItem = NavItem;
+/**
+ * @deprecated Use `NavProps` with `layout="bar"`. Removed in the
+ * next major.
+ */
 export type NavBarProps = {
     className?: string;
-    /**
-     * Where the reader is — `useLocation().pathname` in a
-     * react-router app. `aria-current="page"` is derived from it by
-     * `getIsCurrentHref`, which matches a parent path for its
-     * children and treats `/` as exact.
-     *
-     * Omitted means nothing is current, which is the honest answer on
-     * a route no destination owns.
-     */
     currentHref?: string;
-    /**
-     * **Initial** only, and the bar owns it from then on — the same
-     * uncontrolled contract every other component here has. It exists
-     * so a story (and a screenshot) can show the menu open; an app
-     * almost never passes it.
-     */
     isMenuVisible?: boolean;
     items: readonly NavBarItem[];
-    /**
-     * Required, and it becomes the `<nav>`'s `aria-label`. Two unnamed
-     * navigation landmarks in one page is axe's `landmark-unique`, and
-     * more to the point it is a screen reader announcing "navigation"
-     * twice with no way to tell which is the main one.
-     */
     label: string;
-    /**
-     * Where the trigger sits in the bar's track once the row has
-     * folded. `"end"` when the header puts its own actions at the
-     * far edge, so the fold control joins them instead of hugging
-     * the wordmark with the whole track empty after it.
-     *
-     * It reaches **only** the folded row, which holds exactly one
-     * item — so it cannot disturb where the links sit when the bar
-     * is whole, and there is deliberately no prop that can.
-     */
     menuAlign?: "end" | "start";
-    /**
-     * The collapsed trigger's glyph. **No default** — the library
-     * ships no icons, and `☰` renders as nothing where the font lacks
-     * it. With no icon the trigger is a text button reading
-     * `menuLabel`, which works everywhere.
-     */
     menuIcon?: ReactNode;
-    /**
-     * Names the trigger and, through it, the panel it opens. A
-     * `role="dialog"` takes no accessible name from its content.
-     */
     menuLabel?: string;
     menuPlacement?: Placement;
     size?: ControlSize;
 };
 /**
- * The app's destinations as real links, in one line — folding into a
- * single menu button, whole, when that line does not fit.
- *
- * ## Why this is not `Toolbar`
- *
- * `Toolbar` already solves collapse-into-an-overflow, and this
- * component **reuses its measurement** (`useToolbarOverflow`) rather
- * than growing a second one. What it cannot reuse is the rendering:
- * a `ToolbarAction` is `{ label, onSelect }` and a collapsed one
- * becomes a `MenuItem`, so a nav folded into a `Toolbar` is a row of
- * `<button>`s. Navigation is an `<a href>` — see `NavBarLink`.
- *
- * The overflow is a `Popover` (`role="dialog"`) rather than a `Menu`
- * for the same reason: `role="menu"` permits only the `menuitem`
- * family, and a `menuitem` is something you *do*, not somewhere you
- * *go*.
- *
- * ## It folds WHOLE, and that is the decision
- *
- * `Toolbar` collapses **progressively** — items drop off the end one
- * at a time — because its items are ranked: the two things you do to
- * a running job matter more than the two you do to the deck. A nav
- * is not ranked. Its order is the shape of the product (Docket's
- * reads as the pipeline: Triage → Backlog → Phases → Board →
- * Archives), and a half-collapsed one splits that shape across two
- * places with no rule the reader can learn — "some of the app is up
- * here and the rest is behind a button" is worse than either whole
- * answer. So the bar shows **every** destination or **none**, and
- * the menu, when it opens, is the complete list in the product's own
- * order.
- *
- * ## Measured, not breakpointed
- *
- * There is no `collapseAt` prop and no media query. The bar reads
- * the width its links actually have and folds when their sum stops
- * fitting, so a longer label, a tenth destination, a
- * `data-density="kiosk"` or a reader at 175% browser zoom each move
- * the fold on their own. A hardcoded pixel number is wrong the first
- * time any of those changes — mux-magic collapses at `480px` and
- * plex-channels at `760px`, and neither number has a reason.
- *
- * ⚠️ **The bar must not be sized by its own contents.** It measures
- * its own box to decide what to draw in it, so a container that
- * shrink-wraps makes the answer its own input: put it in a
- * `minmax(0, 1fr)` grid track or a `flex-1 min-w-0` row. The root
- * carries `min-w-0 flex-1` for the flex case; a grid track is the
- * caller's to declare. Same trap `useAdaptiveColumns` documents from
- * the other end.
- *
- * ## Mounted exactly once
- *
- * A destination is in the bar or in the panel, never both. The
- * fleet's habit is to render the whole nav twice and hide one copy
- * with `hidden md:flex` — mux-magic's `PageHeader` across two
- * ~55-line blocks, mail-sifter's `TriageQueue` again — which puts
- * every link in the DOM at every width, so an agent driving the page
- * finds two of each and cannot tell which one a human can see.
+ * @deprecated Use `Nav` with `layout="bar"` — which is `Nav`'s
+ * default, so `<Nav activeHref={…} items={…} label="Main" />` is the
+ * whole migration. **Removed in the next major.**
+ *
+ * This is now a thin adapter over `Nav` and keeps every behaviour it
+ * shipped with: the measured whole-row fold, the real `<a href>` in
+ * both the bar and the panel, and the same props under the same
+ * names. Only two things differ, and both are fixes:
+ *
+ * 1. `currentHref` is `activeHref` on `Nav`.
+ * 2. **Two items can no longer both be current.** This component
+ *    asked the question once per item, so a bar holding `/settings`
+ *    and `/settings/labels` marked *both* while the reader was on
+ *    the deeper one — against its own decision record, which says a
+ *    nav with two current items has stopped saying anything. `Nav`
+ *    takes the deepest match. If an app was relying on the parent
+ *    also lighting up, it was relying on a defect.
+ *
+ * ## Why it went away
+ *
+ * It answered half the question. A horizontal row that folds is one
+ * shape an app's destinations take; a labelled side rail, a
+ * collapsed icon rail and a Narrow-View bottom strip are the others,
+ * and this component could not become any of them — so an app that
+ * wanted a rail was back to hand-rolling, which is the state this
+ * was built to end. `Nav` is the same list drawn in whichever of the
+ * five places fits, and `useNavLayout` is the width rule that says
+ * which.
  */
 export declare const NavBar: ({ className, currentHref, isMenuVisible, items, label, menuAlign, menuIcon, menuLabel, menuPlacement, size, }: NavBarProps) => ReactNode;
 //# sourceMappingURL=NavBar.d.ts.map

package/dist/NavBar/NavBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavBar.d.ts","sourceRoot":"","sources":["../../src/NavBar/NavBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAWtC,MAAM,MAAM,UAAU,GAAG;IACvB;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ,8DAA8D;IAC9D,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,4DAA4D;IAC5D,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,KAAK,EAAE,SAAS,UAAU,EAAE,CAAA;IAC5B;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,CAAA;IAC3B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,eAAO,MAAM,MAAM,GAAI,+GAWpB,WAAW,KAAG,SAsHhB,CAAA"}
+{"version":3,"file":"NavBar.d.ts","sourceRoot":"","sources":["../../src/NavBar/NavBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAEjD;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,CAAA;AAEhC;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,KAAK,EAAE,SAAS,UAAU,EAAE,CAAA;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,CAAA;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,MAAM,GAAI,+GAWpB,WAAW,KAAG,SAchB,CAAA"}

package/dist/NavBar/NavBar.js

@@ -1,114 +1,34 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useVisibility } from "@charcuterie/logic";
-import { Button } from "../Button/Button.js";
-import { IconButton } from "../IconButton/IconButton.js";
-import { usePanelItemSize } from "../Overlay/usePanelItemSize.js";
-import { Popover } from "../Popover/Popover.js";
-import { useToolbarOverflow } from "../Toolbar/useToolbarOverflow.js";
-import { toClassName } from "../toClassName.js";
-import { NavBarLink } from "./NavBarLink.js";
-import { getIsCurrentHref } from "./navBarCurrent.js";
+import { Nav } from "../Nav/Nav.js";
 /**
- * The app's destinations as real links, in one line — folding into a
- * single menu button, whole, when that line does not fit.
- *
- * ## Why this is not `Toolbar`
- *
- * `Toolbar` already solves collapse-into-an-overflow, and this
- * component **reuses its measurement** (`useToolbarOverflow`) rather
- * than growing a second one. What it cannot reuse is the rendering:
- * a `ToolbarAction` is `{ label, onSelect }` and a collapsed one
- * becomes a `MenuItem`, so a nav folded into a `Toolbar` is a row of
- * `<button>`s. Navigation is an `<a href>` — see `NavBarLink`.
- *
- * The overflow is a `Popover` (`role="dialog"`) rather than a `Menu`
- * for the same reason: `role="menu"` permits only the `menuitem`
- * family, and a `menuitem` is something you *do*, not somewhere you
- * *go*.
- *
- * ## It folds WHOLE, and that is the decision
- *
- * `Toolbar` collapses **progressively** — items drop off the end one
- * at a time — because its items are ranked: the two things you do to
- * a running job matter more than the two you do to the deck. A nav
- * is not ranked. Its order is the shape of the product (Docket's
- * reads as the pipeline: Triage → Backlog → Phases → Board →
- * Archives), and a half-collapsed one splits that shape across two
- * places with no rule the reader can learn — "some of the app is up
- * here and the rest is behind a button" is worse than either whole
- * answer. So the bar shows **every** destination or **none**, and
- * the menu, when it opens, is the complete list in the product's own
- * order.
- *
- * ## Measured, not breakpointed
- *
- * There is no `collapseAt` prop and no media query. The bar reads
- * the width its links actually have and folds when their sum stops
- * fitting, so a longer label, a tenth destination, a
- * `data-density="kiosk"` or a reader at 175% browser zoom each move
- * the fold on their own. A hardcoded pixel number is wrong the first
- * time any of those changes — mux-magic collapses at `480px` and
- * plex-channels at `760px`, and neither number has a reason.
- *
- * ⚠️ **The bar must not be sized by its own contents.** It measures
- * its own box to decide what to draw in it, so a container that
- * shrink-wraps makes the answer its own input: put it in a
- * `minmax(0, 1fr)` grid track or a `flex-1 min-w-0` row. The root
- * carries `min-w-0 flex-1` for the flex case; a grid track is the
- * caller's to declare. Same trap `useAdaptiveColumns` documents from
- * the other end.
- *
- * ## Mounted exactly once
- *
- * A destination is in the bar or in the panel, never both. The
- * fleet's habit is to render the whole nav twice and hide one copy
- * with `hidden md:flex` — mux-magic's `PageHeader` across two
- * ~55-line blocks, mail-sifter's `TriageQueue` again — which puts
- * every link in the DOM at every width, so an agent driving the page
- * finds two of each and cannot tell which one a human can see.
+ * @deprecated Use `Nav` with `layout="bar"` — which is `Nav`'s
+ * default, so `<Nav activeHref={…} items={…} label="Main" />` is the
+ * whole migration. **Removed in the next major.**
+ *
+ * This is now a thin adapter over `Nav` and keeps every behaviour it
+ * shipped with: the measured whole-row fold, the real `<a href>` in
+ * both the bar and the panel, and the same props under the same
+ * names. Only two things differ, and both are fixes:
+ *
+ * 1. `currentHref` is `activeHref` on `Nav`.
+ * 2. **Two items can no longer both be current.** This component
+ *    asked the question once per item, so a bar holding `/settings`
+ *    and `/settings/labels` marked *both* while the reader was on
+ *    the deeper one — against its own decision record, which says a
+ *    nav with two current items has stopped saying anything. `Nav`
+ *    takes the deepest match. If an app was relying on the parent
+ *    also lighting up, it was relying on a defect.
+ *
+ * ## Why it went away
+ *
+ * It answered half the question. A horizontal row that folds is one
+ * shape an app's destinations take; a labelled side rail, a
+ * collapsed icon rail and a Narrow-View bottom strip are the others,
+ * and this component could not become any of them — so an app that
+ * wanted a rail was back to hand-rolling, which is the state this
+ * was built to end. `Nav` is the same list drawn in whichever of the
+ * five places fits, and `useNavLayout` is the width rule that says
+ * which.
  */
-export const NavBar = ({ className, currentHref, isMenuVisible = false, items, label, menuAlign = "start", menuIcon, menuLabel = "Menu", menuPlacement = "bottom-start", size = "sm", }) => {
-    const itemKeys = items.map((item) => item.key ?? item.href);
-    const { containerRef, trackItem, visibleCount } = useToolbarOverflow({ itemKeys });
-    /**
-     * All or nothing. `visibleCount` is the progressive answer and
-     * this is the only thing read off it: the moment one link stops
-     * fitting, every link goes into the menu together.
-     *
-     * The hook's `trackTrigger` is deliberately not wired up, and the
-     * missing measurement costs nothing here. It exists so a
-     * progressive bar can ask "how many fit **beside a trigger**",
-     * which is a question this bar never asks: either every link fits
-     * with no trigger at all, or the row is one trigger and nothing
-     * else. `chooseVisibleCount` tests the whole-row case first and
-     * with the trigger costed at zero, so that branch is exact.
-     */
-    const isCollapsed = visibleCount < items.length;
-    const { hide, isVisible, toggle } = useVisibility({
-        isVisible: isMenuVisible,
-    });
-    const panelItemSize = usePanelItemSize("lg");
-    const renderLink = (item, placement) => (_jsx(NavBarLink, { isCurrent: getIsCurrentHref({
-            currentHref,
-            href: item.href,
-        }), item: item, onNavigate: placement === "panel" ? hide : undefined, placement: placement, size: placement === "bar" ? size : panelItemSize, trackElement: placement === "bar" ? trackItem : undefined }, item.key ?? item.href));
-    const trigger = menuIcon === undefined ? (_jsx(Button, { appearance: "ghost", intent: "neutral", onClick: toggle, size: size, children: menuLabel })) : (_jsx(IconButton, { appearance: "ghost", intent: "neutral", label: menuLabel, onClick: toggle, size: size, children: menuIcon }));
-    return (_jsx("nav", { "aria-label": label, className: toClassName("flex min-w-0 flex-1 items-center gap-1", 
-        // Two written-out entries rather than one interpolated
-        // string: Tailwind's scanner cannot see a class that
-        // exists only at runtime.
-        isCollapsed && menuAlign === "end"
-            ? "justify-end"
-            : "justify-start", className), ref: containerRef, children: isCollapsed ? (_jsx(Popover
-        // The default panel is `max-w-xs p-3` — sized for a
-        // paragraph of prose. This one holds full-bleed rows that
-        // bring their own inset, so the padding shrinks to the
-        // gutter around them and the width is left to the list.
-        , { 
-            // The default panel is `max-w-xs p-3` — sized for a
-            // paragraph of prose. This one holds full-bleed rows that
-            // bring their own inset, so the padding shrinks to the
-            // gutter around them and the width is left to the list.
-            className: "max-w-none p-1", heading: menuLabel, isVisible: isVisible, onDismiss: hide, placement: menuPlacement, trigger: trigger, children: _jsx("ul", { className: "flex min-w-48 list-none flex-col gap-0.5", children: items.map((item) => (_jsx("li", { children: renderLink(item, "panel") }, item.key ?? item.href))) }) })) : (items.map((item) => renderLink(item, "bar"))) }));
-};
+export const NavBar = ({ className, currentHref, isMenuVisible, items, label, menuAlign, menuIcon, menuLabel, menuPlacement, size, }) => (_jsx(Nav, { activeHref: currentHref, className: className, isMenuVisible: isMenuVisible, items: items, label: label, layout: "bar", menuAlign: menuAlign, menuIcon: menuIcon, menuLabel: menuLabel, menuPlacement: menuPlacement, size: size }));
 //# sourceMappingURL=NavBar.js.map

package/dist/NavBar/NavBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavBar.js","sourceRoot":"","sources":["../../src/NavBar/NavBar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"NavBar.js","sourceRoot":"","sources":["../../src/NavBar/NavBar.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAgB,CAAA;AAyBpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,SAAS,EACT,WAAW,EACX,aAAa,EACb,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,EACR,SAAS,EACT,aAAa,EACb,IAAI,GACQ,EAAa,EAAE,CAAC,CAC5B,KAAC,GAAG,IACF,UAAU,EAAE,WAAW,EACvB,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,MAAM,EAAC,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,aAAa,EAC5B,IAAI,EAAE,IAAI,GACV,CACH,CAAA"}

package/dist/ReorderList/ReorderList.d.ts

@@ -0,0 +1,131 @@
+import type { ReactNode, Ref } from "react";
+export type ReorderListItem = {
+    key: string;
+    /**
+     * Plain text, and it is not optional. Every accessible name the
+     * component writes is built from it — "Move <label> earlier" —
+     * and so is the sentence the live region reads after a move. A
+     * button announced as "↑" names nothing.
+     */
+    label: string;
+};
+export type ReorderListRenderArguments<TItem extends ReorderListItem> = {
+    /**
+     * Spread onto whatever the host wants the drag to start FROM.
+     * Absent — as an empty object — when the list is too short to
+     * reorder, so a one-row list has no dead handle on it.
+     *
+     * It is a **handle**, never the whole row: a row holds links,
+     * and a link is draggable already.
+     */
+    gripProps: {
+        onPointerDown?: (event: {
+            clientX: number;
+            clientY: number;
+            currentTarget: EventTarget & Element;
+            pointerId: number;
+        }) => void;
+        style?: {
+            touchAction: "none";
+        };
+        title?: string;
+    };
+    index: number;
+    isDragged: boolean;
+    isFirst: boolean;
+    isLast: boolean;
+    item: TItem;
+    /**
+     * The KEYBOARD path, and it is the primary one. The host draws
+     * the two buttons because only the host knows where they sit in
+     * its own row; the component supplies what they do and whether
+     * each end is disabled.
+     */
+    moveBy: (offset: -1 | 1) => void;
+    /** 1-based, for printing. */
+    position: number;
+};
+export type ReorderListProps<TItem extends ReorderListItem> = {
+    className?: string;
+    /**
+     * The container element. `ul` by default, because an ordered
+     * pile of rows is a list; `div` for a host whose own CSS grid
+     * owns the shape and would have to undo list semantics to get
+     * it.
+     */
+    elementType?: "div" | "ol" | "ul";
+    /**
+     * The container element, for a host that needs it too.
+     *
+     * The component keeps its own hold on that element — the drag
+     * measures its rows off it — so this is MERGED rather than
+     * forwarded. Docket plays a FLIP animation off the same
+     * element, and without this the two uses would have to fight
+     * over one `ref`.
+     */
+    elementRef?: Ref<HTMLElement>;
+    itemClassName?: string;
+    items: readonly TItem[];
+    /** The list's accessible name. */
+    label: string;
+    /**
+     * `fromIndex` and `toIndex` are both indexes into `items`, and
+     * `toIndex` is already corrected for the row's own removal — so
+     * a handler is `splice(from, 1)` then `splice(to, 0, row)` with
+     * no arithmetic of its own.
+     */
+    onReorder: (fromIndex: number, toIndex: number) => void;
+    renderItem: (renderArguments: ReorderListRenderArguments<TItem>) => ReactNode;
+};
+/**
+ * A vertical list whose rows can be put in a different order — by
+ * two buttons, or by dragging a handle.
+ *
+ * ### Why it is not a fourth hand-rolled reorder
+ *
+ * Docket wrote this twice: a subtask checklist on HTML5
+ * `draggable`, and a phase queue with the buttons and no drag at
+ * all. `Board` wrote a third, properly, on Pointer Events. Three
+ * implementations of one shape is the case the workspace's
+ * component rule exists for, so the geometry here is **`Board`'s
+ * own** — `useBoardDrag` with a single registered lane and the
+ * item selector pointed at this component's rows. Nothing about
+ * the measuring, the snapshot, the threshold or the pointer
+ * capture is written twice.
+ *
+ * ### The buttons are primary, the drag is the enhancement
+ *
+ * WCAG 2.5.7 requires a single-pointer alternative to any dragging
+ * movement, and the board's decision already argues the stronger
+ * version: the buttons are not a fallback bolted onto a drag, they
+ * are the only path that works from a keyboard, under a screen
+ * reader, or under a thumb in the Narrow View. So `renderItem`
+ * receives `moveBy` before it receives `gripProps`, and a host
+ * that draws no handle at all is a supported host.
+ *
+ * ### It takes no drag-and-drop dependency
+ *
+ * The board priced four libraries at 7–32 KB gzipped and took none
+ * of them, because a published library's dependency list is
+ * inherited by every consumer
+ * ([decision](../../../docs/decisions/2026-08-19-the-board-owns-the-move-and-takes-no-drag-and-drop-dependency.md)).
+ * This adds nothing to that arithmetic — it is the same 1.4 KB,
+ * called twice.
+ *
+ * ### `draggable="true"` is the instinct this replaces
+ *
+ * Native HTML5 drag-and-drop **does not fire on touch at all**, so
+ * the checklist Docket shipped on it cannot be reordered on the
+ * tablet its owner reads it on. Pointer Events are one code path
+ * for mouse, touch and pen, and `setPointerCapture` keeps the drag
+ * alive once the row has moved out from under the finger.
+ *
+ * ### What it deliberately does not do
+ *
+ * It renders no row, no handle, no buttons and no glyph. The host
+ * renders all four through `renderItem`, which is what lets one
+ * component serve a checklist, a queue and a card list whose CSS
+ * grids have nothing in common.
+ */
+export declare const ReorderList: <TItem extends ReorderListItem>({ className, elementRef, elementType, itemClassName, items, label, onReorder, renderItem, }: ReorderListProps<TItem>) => ReactNode;
+//# sourceMappingURL=ReorderList.d.ts.map

package/dist/ReorderList/ReorderList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReorderList.d.ts","sourceRoot":"","sources":["../../src/ReorderList/ReorderList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AA0B3C,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,EAAE,MAAM,CAAA;IACX;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,0BAA0B,CACpC,KAAK,SAAS,eAAe,IAC3B;IACF;;;;;;;OAOG;IACH,SAAS,EAAE;QACT,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE;YACtB,OAAO,EAAE,MAAM,CAAA;YACf,OAAO,EAAE,MAAM,CAAA;YACf,aAAa,EAAE,WAAW,GAAG,OAAO,CAAA;YACpC,SAAS,EAAE,MAAM,CAAA;SAClB,KAAK,IAAI,CAAA;QACV,KAAK,CAAC,EAAE;YAAE,WAAW,EAAE,MAAM,CAAA;SAAE,CAAA;QAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;KACf,CAAA;IACD,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,OAAO,CAAA;IACf,IAAI,EAAE,KAAK,CAAA;IACX;;;;;OAKG;IACH,MAAM,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,CAAA;IAChC,6BAA6B;IAC7B,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,gBAAgB,CAC1B,KAAK,SAAS,eAAe,IAC3B;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,CAAA;IACjC;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAA;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,EAAE,SAAS,KAAK,EAAE,CAAA;IACvB,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACvD,UAAU,EAAE,CACV,eAAe,EAAE,0BAA0B,CAAC,KAAK,CAAC,KAC/C,SAAS,CAAA;CACf,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,eAAO,MAAM,WAAW,GAAI,KAAK,SAAS,eAAe,EAAE,6FASxD,gBAAgB,CAAC,KAAK,CAAC,KAAG,SAgK5B,CAAA"}