@nadicodeai/ui 12.1.101 → 12.1.103

package/dist/components/page-actions.d.ts

@@ -1,19 +1,40 @@
 import { type MouseEvent, type ReactElement, type ReactNode } from "react";
 import { type MenuCommand, type RecordMenu } from "./action-menu.js";
+import { type TextButtonProps } from "./button.js";
 export type PageCommandAction = {
     onClick: (event: MouseEvent<HTMLElement>) => void;
+    link?: never;
     render?: never;
 }
 /**
- * The element the command is, such as the product's router link, which keeps
- * its own role and behaviour and takes the slot's look.
+ * The product's router link, such as `<Link href="/agents" />`: it keeps its
+ * own behaviour and is drawn as a link with the button's look.
+ */
+ | {
+    link: ReactElement;
+    onClick?: never;
+    render?: never;
+}
+/**
+ * An element that is itself a command, such as a component that renders a
+ * `Button` and opens a dialog: it takes the button's look and props.
  */
  | {
     render: ReactElement;
     onClick?: never;
+    link?: never;
+};
+/** Running: the pair travels together, so a command that can be pending always has the word to say. */
+export type PendingWord = {
+    /** Running: the button keeps its place, size and icon and says `pendingLabel`, with aria-busy. */
+    pending?: boolean | undefined;
+    pendingLabel: string;
+} | {
+    pending?: false | undefined;
+    pendingLabel?: string | undefined;
 };
 /** A command drawn as a button: on the title row, in an empty state, in a row. Its icon leads the label. */
-export type PageCommand = PageCommandAction & {
+export type PageCommand = PageCommandAction & PendingWord & {
     label: string;
     icon?: ReactElement | undefined;
     /** Read instead of the label when the label alone does not name the target: "Sign in to Notion". */
@@ -21,9 +42,6 @@ export type PageCommand = PageCommandAction & {
     /** Opens outside the product: the arrow after the label. */
     external?: boolean | undefined;
     disabled?: boolean | undefined;
-    /** Running: the button keeps its place, size and icon and says `pendingLabel`, with aria-busy. */
-    pending?: boolean | undefined;
-    pendingLabel?: string | undefined;
 };
 /** The page's three dots, which open only for two commands or more. */
 export type PageMenu = Omit<RecordMenu, "commands"> & {
@@ -37,8 +55,10 @@ export type PageActionsProps = {
     menu?: PageMenu | undefined;
 };
 type CommandVariant = "default" | "outline" | "ghost" | "link";
-export declare function PageCommandButton({ command, variant, }: {
+export declare function PageCommandButton({ command, shape, size, variant, }: {
     command: PageCommand;
+    shape?: TextButtonProps["shape"];
+    size?: TextButtonProps["size"];
     variant: CommandVariant;
 }): import("react").JSX.Element;
 /** The row of a page's actions where it stands, for a page whose header is its own card. */
@@ -61,7 +81,7 @@ export declare function PageActionsSlot(): import("react").JSX.Element;
  * @family Actions
  * @when The actions of a collection, an object or an overview page, on the title's row at its trailing edge. A Configuration page has none: each section saves from its footer.
  * @instead A row's actions are the row's one button and its `ActionMenu`. A collection toolbar holds search and filters, never a page action.
- * @behaviour Takes `period`, `secondary`, `primary` and `menu` and draws their order and variants itself: the period, outline, default, then the three dots last. The menu needs two commands or more; a single extra command is the secondary. A destination outside the product ends in the arrow. A running command keeps its place and icon, says its pending word and holds.
+ * @behaviour Takes `period`, `secondary`, `primary` and `menu` and draws their order and variants itself: the period, outline, default, then the three dots last. The menu needs two commands or more; a single extra command is the secondary. A destination outside the product ends in the arrow. A running command (`pending`) keeps its place and icon, says its pending word and holds, and the type requires `pendingLabel` whenever `pending` is set. A command here is never destructive or warning: those sit in the danger zone of the page, in a card.
  * @words The primary is the page's main job as verb and noun: "Invite member", "New Agent". The pending word is its -ing form: "Inviting member". The menu names the page's record at its top and keeps the destructive command last, after a divider.
  * @access DOM order is visual order. A command whose label does not name its target carries `accessibleName`. A running command is `aria-busy` and keeps focus. The three dots carry "More for {record}"; the menu returns focus to them when it closes.
  */

package/dist/components/page-actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-actions.d.ts","sourceRoot":"","sources":["../../src/components/page-actions.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAc,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAI9E,MAAM,MAAM,iBAAiB,GACzB;IAAE,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE;AACvE;;;GAGG;GACD;IAAE,MAAM,EAAE,YAAY,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAE9C,4GAA4G;AAC5G,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAChC,oGAAoG;IACpG,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,kGAAkG;IAClG,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACnC,CAAC;AAEF,uEAAuE;AACvE,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG;IACpD,QAAQ,EAAE,SAAS,CAAC,WAAW,EAAE,WAAW,EAAE,GAAG,WAAW,EAAE,CAAC,CAAC;CACjE,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qGAAqG;IACrG,MAAM,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACpC,OAAO,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IAClC,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC7B,CAAC;AAEF,KAAK,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AA8B/D,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,OAAO,GACR,EAAE;IACD,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,EAAE,cAAc,CAAC;CACzB,+BAqCA;AAED,4FAA4F;AAC5F,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,gBAAgB,sCAUpF;AAYD;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAa5E;AAED,yFAAyF;AACzF,wBAAgB,eAAe,gCAS9B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,sCAuBlD"}
+{"version":3,"file":"page-actions.d.ts","sourceRoot":"","sources":["../../src/components/page-actions.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAc,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAsB,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAEpE,MAAM,MAAM,iBAAiB,GACzB;IAAE,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE;AACrF;;;GAGG;GACD;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE;AACzD;;;GAGG;GACD;IAAE,MAAM,EAAE,YAAY,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAE5D,uGAAuG;AACvG,MAAM,MAAM,WAAW,GACnB;IACE,kGAAkG;IAClG,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;CACtB,GACD;IAAE,OAAO,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,CAAC;AAEvE,4GAA4G;AAC5G,MAAM,MAAM,WAAW,GAAG,iBAAiB,GACzC,WAAW,GAAG;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAChC,oGAAoG;IACpG,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC,CAAC;AAEJ,uEAAuE;AACvE,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG;IACpD,QAAQ,EAAE,SAAS,CAAC,WAAW,EAAE,WAAW,EAAE,GAAG,WAAW,EAAE,CAAC,CAAC;CACjE,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qGAAqG;IACrG,MAAM,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACpC,OAAO,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IAClC,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC7B,CAAC;AAEF,KAAK,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAE/D,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,KAAK,EACL,IAAI,EACJ,OAAO,GACR,EAAE;IACD,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,OAAO,EAAE,cAAc,CAAC;CACzB,+BA+BA;AAED,4FAA4F;AAC5F,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,gBAAgB,sCAUpF;AAYD;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAa5E;AAED,yFAAyF;AACzF,wBAAgB,eAAe,gCAS9B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,sCAuBlD"}

package/dist/components/page-actions.js

@@ -1,38 +1,35 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRender } from "@base-ui/react/use-render";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowUpRight } from "lucide-react";
 import { createContext, useCallback, useContext, useEffect, useId, useState, } from "react";
 import { createPortal } from "react-dom";
 import { ActionMenu } from "./action-menu.js";
-import { Button, buttonVariants } from "./button.js";
-import { PendingLabel } from "./pending-label.js";
-function CommandElement({ accessibleName, busy, children, disabled, element, variant, }) {
-    return useRender({
-        render: element,
-        props: {
-            "aria-busy": busy || undefined,
-            "aria-disabled": disabled || undefined,
-            "aria-label": accessibleName,
-            children,
-            className: buttonVariants({ variant }),
-            "data-slot": "button",
-        },
-    });
-}
-export function PageCommandButton({ command, variant, }) {
-    const pending = command.pending === true;
-    const content = (_jsxs(_Fragment, { children: [command.icon ? _jsx("span", { "data-icon": "inline-start", children: command.icon }) : null, _jsx(PendingLabel, { pending: pending, pendingLabel: command.pendingLabel ?? command.label, children: command.label }), command.external ? _jsx(ArrowUpRight, { "aria-hidden": "true", "data-icon": "inline-end" }) : null] }));
+import { Button, ButtonLink } from "./button.js";
+export function PageCommandButton({ command, shape, size, variant, }) {
+    const look = {
+        "aria-label": command.accessibleName,
+        disabled: command.disabled,
+        loading: command.pending === true,
+        loadingLabel: command.pendingLabel ?? command.label,
+        prefix: command.icon,
+        shape,
+        size,
+        suffix: command.external ? _jsx(ArrowUpRight, { "aria-hidden": "true" }) : undefined,
+        variant,
+    };
+    if (command.link) {
+        return (_jsx(ButtonLink, { ...look, render: command.link, children: command.label }));
+    }
     if (command.render) {
-        return (_jsx(CommandElement, { accessibleName: command.accessibleName, busy: pending, disabled: pending || command.disabled === true, element: command.render, variant: variant, children: content }));
+        return (_jsx(Button, { ...look, render: command.render, children: command.label }));
     }
-    return (_jsx(Button, { "aria-busy": pending || undefined, "aria-label": command.accessibleName, disabled: pending || command.disabled, focusableWhenDisabled: pending, onClick: command.onClick, type: "button", variant: variant, children: content }));
+    return (_jsx(Button, { ...look, onClick: command.onClick, type: "button", children: command.label }));
 }
 /** The row of a page's actions where it stands, for a page whose header is its own card. */
 export function PageActionsRow({ period, primary, secondary, menu }) {
     if (!period && !primary && !secondary && !menu)
         return null;
-    return (_jsxs("div", { "data-slot": "page-actions", className: "flex shrink-0 flex-wrap items-center gap-2", children: [period, secondary ? _jsx(PageCommandButton, { command: secondary, variant: "outline" }) : null, primary ? _jsx(PageCommandButton, { command: primary, variant: "default" }) : null, menu ? _jsx(ActionMenu, { ...menu }) : null] }));
+    return (_jsxs("div", { "data-slot": "page-actions", className: "flex max-w-full min-w-0 flex-wrap items-center gap-2", children: [period, secondary ? _jsx(PageCommandButton, { command: secondary, variant: "outline" }) : null, primary ? _jsx(PageCommandButton, { command: primary, variant: "default" }) : null, menu ? _jsx(ActionMenu, { ...menu }) : null] }));
 }
 const PageActionsHostContext = createContext(null);
 /**
@@ -50,7 +47,7 @@ export function PageActionsHostProvider({ children }) {
 /** The element on `PageHeader`'s title row that the page's `PageActions` render into. */
 export function PageActionsSlot() {
     const host = useContext(PageActionsHostContext);
-    return (_jsx("div", { "data-slot": "page-header-actions", className: "flex shrink-0 items-center empty:hidden", ref: host?.attach }));
+    return (_jsx("div", { "data-slot": "page-header-actions", className: "flex max-w-full min-w-0 items-center empty:hidden", ref: host?.attach }));
 }
 /**
  * A page's actions, drawn on its title's row. Only the page shown last owns
@@ -60,7 +57,7 @@ export function PageActionsSlot() {
  * @family Actions
  * @when The actions of a collection, an object or an overview page, on the title's row at its trailing edge. A Configuration page has none: each section saves from its footer.
  * @instead A row's actions are the row's one button and its `ActionMenu`. A collection toolbar holds search and filters, never a page action.
- * @behaviour Takes `period`, `secondary`, `primary` and `menu` and draws their order and variants itself: the period, outline, default, then the three dots last. The menu needs two commands or more; a single extra command is the secondary. A destination outside the product ends in the arrow. A running command keeps its place and icon, says its pending word and holds.
+ * @behaviour Takes `period`, `secondary`, `primary` and `menu` and draws their order and variants itself: the period, outline, default, then the three dots last. The menu needs two commands or more; a single extra command is the secondary. A destination outside the product ends in the arrow. A running command (`pending`) keeps its place and icon, says its pending word and holds, and the type requires `pendingLabel` whenever `pending` is set. A command here is never destructive or warning: those sit in the danger zone of the page, in a card.
  * @words The primary is the page's main job as verb and noun: "Invite member", "New Agent". The pending word is its -ing form: "Inviting member". The menu names the page's record at its top and keeps the destructive command last, after a divider.
  * @access DOM order is visual order. A command whose label does not name its target carries `accessibleName`. A running command is `aria-busy` and keeps focus. The three dots carry "More for {record}"; the menu returns focus to them when it closes.
  */

package/dist/components/page-header.d.ts

@@ -7,13 +7,20 @@ import * as React from "react";
  * the trailing edge of its row.
  * @instead An object's own header is `ObjectPage`'s. The path above it is the top bar's
  * `Breadcrumb`; filters, search and sort sit in the toolbar below.
- * @behaviour Nothing explains the page under its title. The actions arrive through the
- * `PageActions` slot, so the page draws its commands once.
- * @words The title is the page's name as the sidebar writes it: *Customers*, *Agents*.
+ * @behaviour The title is always there and the actions arrive through the `PageActions` slot, so
+ * the page draws its commands once. On a phone the title keeps its row with one action, as Vercel's
+ * does; it gives way, and the actions wrap under it, only when they leave it less than 128 px. Under the title only the `description` may sit: one muted line
+ * saying what the page's records are for, for a page whose kind needs explaining. It ends in a link
+ * to learn more when there is one, and never counts or introduces anything else. The description
+ * is neutral; no hue sits in the header.
+ * @words The title is the page's name as the sidebar writes it: *Customers*, *Agents*. The
+ * description is one sentence in the product's words, without a full stop when it ends in a link.
  * @access The title is the page's `h1`; DOM order is visual order.
  */
-declare function PageHeader({ title, headingProps, className, ...props }: Omit<React.ComponentProps<"header">, "title" | "children"> & {
+declare function PageHeader({ title, description, headingProps, className, ...props }: Omit<React.ComponentProps<"header">, "title" | "children"> & {
     title: React.ReactNode;
+    /** One muted line under the title; a link to learn more may end it. */
+    description?: React.ReactNode;
     headingProps?: Omit<React.ComponentProps<"h1">, "children">;
 }): React.JSX.Element;
 export { PageHeader };

package/dist/components/page-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-header.d.ts","sourceRoot":"","sources":["../../src/components/page-header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B;;;;;;;;;;;;GAYG;AACH,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC9D,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;CAC7D,qBAiBA;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"page-header.d.ts","sourceRoot":"","sources":["../../src/components/page-header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B;;;;;;;;;;;;;;;;;GAiBG;AACH,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC9D,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,uEAAuE;IACvE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;CAC7D,qBAyBA;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/page-header.js

@@ -9,12 +9,17 @@ import { PageActionsSlot } from "./page-actions.js";
  * the trailing edge of its row.
  * @instead An object's own header is `ObjectPage`'s. The path above it is the top bar's
  * `Breadcrumb`; filters, search and sort sit in the toolbar below.
- * @behaviour Nothing explains the page under its title. The actions arrive through the
- * `PageActions` slot, so the page draws its commands once.
- * @words The title is the page's name as the sidebar writes it: *Customers*, *Agents*.
+ * @behaviour The title is always there and the actions arrive through the `PageActions` slot, so
+ * the page draws its commands once. On a phone the title keeps its row with one action, as Vercel's
+ * does; it gives way, and the actions wrap under it, only when they leave it less than 128 px. Under the title only the `description` may sit: one muted line
+ * saying what the page's records are for, for a page whose kind needs explaining. It ends in a link
+ * to learn more when there is one, and never counts or introduces anything else. The description
+ * is neutral; no hue sits in the header.
+ * @words The title is the page's name as the sidebar writes it: *Customers*, *Agents*. The
+ * description is one sentence in the product's words, without a full stop when it ends in a link.
  * @access The title is the page's `h1`; DOM order is visual order.
  */
-function PageHeader({ title, headingProps, className, ...props }) {
-    return (_jsx("header", { "data-slot": "page-header", className: cn("min-w-0", className), ...props, children: _jsxs("div", { className: "flex min-h-9 min-w-0 flex-wrap items-center justify-between gap-x-6 gap-y-3", children: [_jsx("h1", { ...headingProps, className: cn("min-w-0 flex-1 basis-48 truncate text-heading-md text-foreground outline-none", headingProps?.className), children: title }), _jsx(PageActionsSlot, {})] }) }));
+function PageHeader({ title, description, headingProps, className, ...props }) {
+    return (_jsxs("header", { "data-slot": "page-header", className: cn("min-w-0", className), ...props, children: [_jsxs("div", { className: "flex min-h-9 min-w-0 flex-wrap items-center justify-between gap-x-6 gap-y-3", children: [_jsx("h1", { ...headingProps, className: cn("min-w-0 flex-1 basis-32 truncate text-heading-md text-foreground outline-none", headingProps?.className), children: title }), _jsx(PageActionsSlot, {})] }), description ? (_jsx("div", { "data-slot": "page-header-description", className: "mt-1 min-w-0 text-body-sm text-muted-foreground", children: description })) : null] }));
 }
 export { PageHeader };

package/dist/components/pending-label.d.ts

@@ -3,13 +3,14 @@ import type * as React from "react";
  * A control's own label while the system works on what it was asked to do.
  *
  * @family Feedback
- * @when Every control that starts work the system does: from the press until the result, whatever
- * the wait. Under about a second it is the only sign. Every save in a footer goes through it.
+ * @when A control that is not a button and starts work the system does, such as a menu row: from
+ * the press until the result, whatever the wait. A `Button` or `ButtonLink` never uses it by hand:
+ * `loading` and `loadingLabel` draw it.
  * @instead Past a second add one `WaitingLine` beside the control. An Agent's work is never this:
  * it is her orb and a sentence. A queued or paused request is a status.
- * @behaviour Swaps the word, nothing else: same place, size and icon. The caller sets `disabled`
- * (50% opacity) and `aria-busy` and blocks a second submit, because only the caller knows which
- * element the wait belongs to. Failure returns the rest label.
+ * @behaviour Swaps the word, nothing else: same place, size and icon; a text label keeps the width of the longer of its two words. The caller sets `aria-busy`
+ * and blocks a second press, because only the caller knows which element the wait belongs to.
+ * Failure returns the rest label.
  * @words The rest label's verb in its -ing form with the same noun: *Remove mailbox* to *Removing
  * mailbox*. No ellipsis, no *Please wait*.
  * @access `aria-busy` on the control; its name changes to the pending word and is read once. Focus

package/dist/components/pending-label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pending-label.d.ts","sourceRoot":"","sources":["../../src/components/pending-label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B,qBAWA;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"pending-label.d.ts","sourceRoot":"","sources":["../../src/components/pending-label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B,qBAsBA;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/pending-label.js

@@ -4,19 +4,27 @@ import { cn } from "../lib/utils.js";
  * A control's own label while the system works on what it was asked to do.
  *
  * @family Feedback
- * @when Every control that starts work the system does: from the press until the result, whatever
- * the wait. Under about a second it is the only sign. Every save in a footer goes through it.
+ * @when A control that is not a button and starts work the system does, such as a menu row: from
+ * the press until the result, whatever the wait. A `Button` or `ButtonLink` never uses it by hand:
+ * `loading` and `loadingLabel` draw it.
  * @instead Past a second add one `WaitingLine` beside the control. An Agent's work is never this:
  * it is her orb and a sentence. A queued or paused request is a status.
- * @behaviour Swaps the word, nothing else: same place, size and icon. The caller sets `disabled`
- * (50% opacity) and `aria-busy` and blocks a second submit, because only the caller knows which
- * element the wait belongs to. Failure returns the rest label.
+ * @behaviour Swaps the word, nothing else: same place, size and icon; a text label keeps the width of the longer of its two words. The caller sets `aria-busy`
+ * and blocks a second press, because only the caller knows which element the wait belongs to.
+ * Failure returns the rest label.
  * @words The rest label's verb in its -ing form with the same noun: *Remove mailbox* to *Removing
  * mailbox*. No ellipsis, no *Please wait*.
  * @access `aria-busy` on the control; its name changes to the pending word and is read once. Focus
  * stays on it.
  */
 function PendingLabel({ children, className, pending, pendingLabel, ...props }) {
-    return (_jsx("span", { ...props, className: cn(className), "data-pending": pending || undefined, "data-slot": "pending-label", children: pending ? pendingLabel : children }));
+    // The word not shown is laid out unseen under it at no height, so the swap keeps the width;
+    // as a hidden pseudo-element it stays out of the text and the accessible name. The grid comes
+    // after the caller's classes: a caller's flex would set the two words side by side.
+    // oxlint-disable-next-line anti-slop/no-runtime-typeof -- labels are ReactNodes; only a pair of words can be reserved as generated content.
+    const words = typeof children === "string" && typeof pendingLabel === "string";
+    const reserved = words ? (pending ? children : pendingLabel) : undefined;
+    return (_jsx("span", { ...props, className: cn(className, reserved !== undefined &&
+            "inline-grid gap-0 after:invisible after:h-0 after:overflow-hidden after:content-[attr(data-reserved)]"), "data-pending": pending || undefined, "data-reserved": reserved, "data-slot": "pending-label", children: pending ? pendingLabel : children }));
 }
 export { PendingLabel };

package/dist/components/picture-label.d.ts

@@ -9,8 +9,8 @@ import type { ReactNode } from "react";
  * (absence), or a request the product stopped (fault). `PictureLabel` is its label.
  * @instead For one region that failed inside a working page use `EmptyState failed`; the rest of
  * the page stays. Never turn the whole page into an error because one card failed.
- * @behaviour Picture 256 px, 320 from sm, 384 from lg. The label moves beside the base at lg with
- * an empty column of the same width opposite, so the picture keeps the centre line. Still.
+ * @behaviour Picture 256 px, 320 from sm, 384 from lg. The label stands centred under the picture at
+ * every width, on the same centre line as the words below. Still.
  * @words Never apologise, never name the mechanism. The label's title says what the picture is
  * doing; the second line gives its materials and year.
  * @access The picture is decorative; the label is a `figcaption`, read once. The page's heading is

package/dist/components/picture-label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"picture-label.d.ts","sourceRoot":"","sources":["../../src/components/picture-label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,4DAA4D;IAC5D,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAeA;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,+BASlF"}
+{"version":3,"file":"picture-label.d.ts","sourceRoot":"","sources":["../../src/components/picture-label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,4DAA4D;IAC5D,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAUA;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,+BASlF"}

package/dist/components/picture-label.js

@@ -10,15 +10,15 @@ import { cn } from "../lib/utils.js";
  * (absence), or a request the product stopped (fault). `PictureLabel` is its label.
  * @instead For one region that failed inside a working page use `EmptyState failed`; the rest of
  * the page stays. Never turn the whole page into an error because one card failed.
- * @behaviour Picture 256 px, 320 from sm, 384 from lg. The label moves beside the base at lg with
- * an empty column of the same width opposite, so the picture keeps the centre line. Still.
+ * @behaviour Picture 256 px, 320 from sm, 384 from lg. The label stands centred under the picture at
+ * every width, on the same centre line as the words below. Still.
  * @words Never apologise, never name the mechanism. The label's title says what the picture is
  * doing; the second line gives its materials and year.
  * @access The picture is decorative; the label is a `figcaption`, read once. The page's heading is
  * its `h1`; its actions are real links.
  */
 export function LabelledPicture({ children, label, className, }) {
-    return (_jsxs("figure", { className: cn("m-0 grid w-full max-w-4xl justify-items-center gap-4 lg:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] lg:items-end lg:gap-8", className), "data-slot": "labelled-picture", children: [_jsx("div", { className: "lg:col-start-2 lg:row-start-1", children: children }), _jsx("figcaption", { className: "max-w-72 text-center lg:col-start-3 lg:row-start-1 lg:justify-self-start lg:pb-6 lg:text-start", children: label })] }));
+    return (_jsxs("figure", { className: cn("m-0 grid w-full max-w-4xl justify-items-center gap-4", className), "data-slot": "labelled-picture", children: [_jsx("div", { children: children }), _jsx("figcaption", { className: "max-w-72 text-center", children: label })] }));
 }
 export function PictureLabel({ title, details }) {
     return (_jsxs("span", { className: "grid gap-1", children: [_jsx("span", { className: "text-body-sm text-balance font-medium", children: title }), _jsx("span", { className: "font-label-mono text-label-mono text-balance text-muted-foreground", children: details })] }));

package/dist/components/portal-sidebar-frame.d.ts

@@ -14,30 +14,18 @@ export type PortalSidebarBand = {
     items: PortalSidebarItem[];
 };
 /**
- * The Portal's navigation frame, without the Portal's routing: the wordmark and
- * the section name over the collapse control, the Find control with its
- * shortcut, the labelled nav bands, the band that leads out of the Portal, and
- * the account at the foot.
+ * The website's sample of the Portal's navigation column, drawn from data and without the Portal's routing.
  *
- * Its regions are separated by the 1 px guide over the line colour, as the
- * Portal's own shell separates them, so a sidebar region takes no border of its
- * own.
- *
- * The frame carries geometry and brand imagery only. Every word, icon and
- * active marking arrives as a prop, so the Portal can pass its nav model and
- * the website can pass a sample of it.
+ * The sample holds the geometry and the brand imagery only: every word, icon and selected row
+ * arrives as a prop, so the website can pass a sample of the Portal's own navigation. The Portal
+ * and Nadia draw their columns with the same `Sidebar`, `SidebarFrame` and rows.
  *
  * @family Navigation
- * @when `PortalSidebarFrame` is the Portal's whole left column, and the website's sample of it.
- * @instead Nadia's left column belongs to `DesktopAppShell`. Both draw their rows with the same
- * `SidebarMenuButton` and end with the same `AccountMenu`; neither paints its own selected fill or
- * its own account block.
- * @behaviour Wordmark and product name over the collapse control, then Find, the bands, the way out
- * (Get Nadia) and the account, split by 1 px guides.
- * @words Find is one word beside ⌘K. Bands are short nouns; items are nouns, one or two words,
- * sentence case.
- * @access The column is a labelled `nav`. Find is a button named with its shortcut. The wordmark is
- * `role="img"` named nadicode.
+ * @when A static picture of the Portal's column on the website; all of `account`, `bands`, `findLabel`, `subtitle` and `toggleLabel` are required.
+ * @instead A product's own navigation is a `Sidebar` filled by `SidebarFrame`, never this sample.
+ * @behaviour Wordmark and product name beside the collapse control, then Find with ⌘K, the groups, the way out (Get Nadia) and the account; 1 px rules sit under the header and above the way out and the account, none between groups. The selected row takes the selection fill; every other row stays neutral.
+ * @words Find is one word beside ⌘K. Bands are short nouns; items are nouns, one or two words, sentence case.
+ * @access The collapse control is named by `toggleLabel` and Find by `findLabel`; the wordmark is decorative beside the product name.
  */
 export declare function PortalSidebarFrame({ account, bands, className, findLabel, footerItem, subtitle, toggleLabel, }: {
     account: AccountIdentity;

package/dist/components/portal-sidebar-frame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"portal-sidebar-frame.d.ts","sourceRoot":"","sources":["../../src/components/portal-sidebar-frame.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAuB,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAkBtF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,iBAAiB,EAAE,CAAC;CAC5B,CAAC;AAiBF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,KAAK,EACL,SAAS,EACT,SAAS,EACT,UAAU,EACV,QAAQ,EACR,WAAW,GACZ,EAAE;IACD,OAAO,EAAE,eAAe,CAAC;IACzB,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,SAAS,EAAE,MAAM,CAAC;IAClB,qFAAqF;IACrF,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,oEAAoE;IACpE,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB,+BAwEA"}
+{"version":3,"file":"portal-sidebar-frame.d.ts","sourceRoot":"","sources":["../../src/components/portal-sidebar-frame.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAuB,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAiBtF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,iBAAiB,EAAE,CAAC;CAC5B,CAAC;AAaF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,KAAK,EACL,SAAS,EACT,SAAS,EACT,UAAU,EACV,QAAQ,EACR,WAAW,GACZ,EAAE;IACD,OAAO,EAAE,eAAe,CAAC;IACzB,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,SAAS,EAAE,MAAM,CAAC;IAClB,qFAAqF;IACrF,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,oEAAoE;IACpE,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB,+BAgDA"}

package/dist/components/portal-sidebar-frame.js

@@ -1,40 +1,26 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronsUpDown, Search } from "lucide-react";
 import { AccountMenuIdentity } from "./account-menu.js";
-import { BrandWordmark } from "./brand.js";
-import { Kbd, KbdGroup } from "./kbd.js";
-import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarTrigger, } from "./sidebar.js";
+import { Kbd } from "./kbd.js";
+import { Sidebar, SidebarBrand, SidebarFind, SidebarFrame, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarTrigger, } from "./sidebar.js";
 import { cn } from "../lib/utils.js";
 function ItemRow({ item, variant }) {
-    return (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { isActive: item.current, tooltip: item.label, ...(variant ? { variant } : {}), children: [item.icon, _jsx("span", { className: "truncate", children: item.label })] }) }));
+    return (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { isActive: item.current, tooltip: item.label, variant: variant, children: [item.icon, _jsx("span", { className: "truncate", children: item.label })] }) }));
 }
 /**
- * The Portal's navigation frame, without the Portal's routing: the wordmark and
- * the section name over the collapse control, the Find control with its
- * shortcut, the labelled nav bands, the band that leads out of the Portal, and
- * the account at the foot.
+ * The website's sample of the Portal's navigation column, drawn from data and without the Portal's routing.
  *
- * Its regions are separated by the 1 px guide over the line colour, as the
- * Portal's own shell separates them, so a sidebar region takes no border of its
- * own.
- *
- * The frame carries geometry and brand imagery only. Every word, icon and
- * active marking arrives as a prop, so the Portal can pass its nav model and
- * the website can pass a sample of it.
+ * The sample holds the geometry and the brand imagery only: every word, icon and selected row
+ * arrives as a prop, so the website can pass a sample of the Portal's own navigation. The Portal
+ * and Nadia draw their columns with the same `Sidebar`, `SidebarFrame` and rows.
  *
  * @family Navigation
- * @when `PortalSidebarFrame` is the Portal's whole left column, and the website's sample of it.
- * @instead Nadia's left column belongs to `DesktopAppShell`. Both draw their rows with the same
- * `SidebarMenuButton` and end with the same `AccountMenu`; neither paints its own selected fill or
- * its own account block.
- * @behaviour Wordmark and product name over the collapse control, then Find, the bands, the way out
- * (Get Nadia) and the account, split by 1 px guides.
- * @words Find is one word beside ⌘K. Bands are short nouns; items are nouns, one or two words,
- * sentence case.
- * @access The column is a labelled `nav`. Find is a button named with its shortcut. The wordmark is
- * `role="img"` named nadicode.
+ * @when A static picture of the Portal's column on the website; all of `account`, `bands`, `findLabel`, `subtitle` and `toggleLabel` are required.
+ * @instead A product's own navigation is a `Sidebar` filled by `SidebarFrame`, never this sample.
+ * @behaviour Wordmark and product name beside the collapse control, then Find with ⌘K, the groups, the way out (Get Nadia) and the account; 1 px rules sit under the header and above the way out and the account, none between groups. The selected row takes the selection fill; every other row stays neutral.
+ * @words Find is one word beside ⌘K. Bands are short nouns; items are nouns, one or two words, sentence case.
+ * @access The collapse control is named by `toggleLabel` and Find by `findLabel`; the wordmark is decorative beside the product name.
  */
 export function PortalSidebarFrame({ account, bands, className, findLabel, footerItem, subtitle, toggleLabel, }) {
-    return (_jsx(Sidebar, { collapsible: "none", className: cn("h-auto shrink-0", className), children: _jsxs("div", { className: "grid min-h-0 flex-1 grid-rows-[auto_minmax(0,1fr)_auto_auto] bg-border *:min-w-0", children: [_jsxs("div", { className: "grid grid-rows-[3.5rem_auto] gap-px bg-border *:bg-sidebar", children: [_jsxs(SidebarHeader, { className: "h-full flex-row items-center justify-between gap-1 px-3 py-0", children: [_jsxs("div", { className: "grid min-w-0 flex-1 gap-0", children: [_jsx(BrandWordmark, { alt: "", className: "h-5 w-28 max-w-full" }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: subtitle })] }), _jsx(SidebarTrigger, { "aria-label": toggleLabel, className: "shrink-0" })] }), _jsx("div", { className: "p-2", children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { variant: "outline", children: [_jsx(Search, { "aria-hidden": "true", className: "text-muted-foreground" }), _jsx("span", { className: "min-w-0 flex-1 truncate text-left text-muted-foreground", children: findLabel }), _jsxs(KbdGroup, { className: "ml-auto", children: [_jsx(Kbd, { children: "\u2318" }), _jsx(Kbd, { children: "K" })] })] }) }) }) })] }), _jsx(SidebarContent, { className: "bg-sidebar", children: bands.map((band) => (_jsxs(SidebarGroup, { children: [band.label ? (_jsx(SidebarGroupLabel, { render: _jsx("h2", {}), children: band.label })) : null, _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: band.items.map((item) => (_jsx(ItemRow, { item: item }, item.id))) }) })] }, band.id))) }), footerItem ? (_jsx(SidebarGroup, { className: "border-t bg-sidebar", children: _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: _jsx(ItemRow, { item: footerItem, variant: "outline" }) }) }) })) : null, _jsx(SidebarFooter, { className: "border-t bg-sidebar", children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { size: "lg", children: [_jsx(AccountMenuIdentity, { className: "flex-1", identity: account }), _jsx(ChevronsUpDown, { "aria-hidden": "true", className: "ml-auto size-4 text-muted-foreground" })] }) }) }) })] }) }));
+    return (_jsx(Sidebar, { collapsible: "none", className: cn("h-auto shrink-0", className), children: _jsx(SidebarFrame, { account: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { className: "group/account flex min-h-9 items-center pr-2 pl-2.5", children: _jsx(AccountMenuIdentity, { identity: account }) }) }), band: footerItem ? (_jsx(SidebarMenu, { children: _jsx(ItemRow, { item: footerItem, variant: "outline" }) })) : undefined, find: _jsx(SidebarFind, { label: findLabel, shortcut: _jsx(Kbd, { meta: true, size: "sm", children: "K" }) }), header: _jsx(SidebarBrand, { subtitle: subtitle }), toggle: _jsx(SidebarTrigger, { "aria-label": toggleLabel, className: "shrink-0" }), children: bands.map((band) => (_jsxs(SidebarGroup, { children: [band.label ? (_jsx(SidebarGroupLabel, { render: _jsx("h2", {}), children: band.label })) : null, _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: band.items.map((item) => (_jsx(ItemRow, { item: item }, item.id))) }) })] }, band.id))) }) }));
 }

package/dist/components/progress-checklist.d.ts

@@ -0,0 +1,46 @@
+import type { IconComponent } from "./identity-mark.js";
+import { type PageCommand } from "./page-actions.js";
+/** The ground of a step's icon tile: a hue says which kind of step it is, never whether it is done. */
+export type ChecklistStepTone = "neutral" | "blue" | "green" | "amber" | "purple" | "teal" | "pink";
+export type ChecklistStep = {
+    id: string;
+    /** What the step asks for, as a done thing reads: "Company details confirmed". */
+    title: string;
+    /** One line: what the step gives, or what is missing. */
+    description: string;
+    icon: IconComponent;
+    tone?: ChecklistStepTone;
+    /** Derived from what exists, never remembered: the thing the step asks for is there. */
+    done: boolean;
+    /** Where the step is done, for a step still to do: a link, drawn as an outline button. */
+    action?: PageCommand;
+};
+export type ProgressChecklistProps = {
+    /** The checklist's name, in the tooltip and as the drawer's title: "Customer setup". */
+    title: string;
+    /** One line under the drawer's title. */
+    description: string;
+    /** The ring's accessible name, whose and how far: "Studio Rossi's setup, 2 of 4 done". */
+    label: string;
+    steps: readonly ChecklistStep[];
+    /** The chip on a done step: "Done". */
+    doneLabel: string;
+    /** The drawer's ×. */
+    closeLabel: string;
+    /** The drawer's footer button, which closes it: "Done". */
+    finishLabel: string;
+};
+/**
+ * How far one record is through the steps that make it ready: a blue ring at the end of its row
+ * that opens the steps in a drawer at the right edge.
+ *
+ * @family Status
+ * @when “Production Checklist”, the ring at the end of a project's row on Vercel's Projects page, which opens the steps that make a project ready for production. (https://vercel.com/dashboard)
+ * Ours: the steps a Customer or a Partner takes before nadicode's work runs for them, each one a fact the Portal can read (company details confirmed, a plan, Nadia connected, an Agent at work), at the end of the record's row.
+ * @instead Steps a person follows on a page, one after the other, are `NumberedSteps`; a setup with a wait is `FormDrawer job="steps"`. A ratio with no steps behind it is a `Gauge`. One state of a record is a `StatusBadge`.
+ * @behaviour The ring is a 24 px `Gauge` in blue with the double check inside in ink, so the glyph reads at a glance, on a 36 px ghost button whose tooltip names the checklist and how far it is ("Customer setup 3/4"). It opens a drawer from the right: the ring again, the title, one line, then one card per step: its icon on a tile of its tone, its title, one line, and the outline button that goes where the step is done; every card is the same hairline card, and a done step differs only by its blue Done chip after its title, with no button, so the steps still to do, with their buttons, draw the eye. The footer's button closes it. A step is done because the thing it asks for exists, so the checklist has no Skip and remembers nothing.
+ * @words Every string is the product's. The title names the checklist ("Customer setup"); a step's title reads as the thing done ("Plan chosen"); its button names where it goes ("Open billing").
+ * @access The ring's button is named by `label`, which says whose checklist and how many steps are done; the ring itself is hidden from assistive technology. The drawer is a dialog named by its title; Escape, × and the footer's button close it and give focus back to the ring. The steps are a list.
+ */
+export declare function ProgressChecklist({ title, description, label, steps, doneLabel, closeLabel, finishLabel, }: ProgressChecklistProps): import("react").JSX.Element;
+//# sourceMappingURL=progress-checklist.d.ts.map

package/dist/components/progress-checklist.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-checklist.d.ts","sourceRoot":"","sources":["../../src/components/progress-checklist.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,KAAK,WAAW,EAAqB,MAAM,2BAA2B,CAAC;AAYhF,uGAAuG;AACvG,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpG,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,kFAAkF;IAClF,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,wFAAwF;IACxF,IAAI,EAAE,OAAO,CAAC;IACd,0FAA0F;IAC1F,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,wFAAwF;IACxF,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,WAAW,EAAE,MAAM,CAAC;IACpB,0FAA0F;IAC1F,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,aAAa,EAAE,CAAC;IAChC,uCAAuC;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,sBAAsB;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,2DAA2D;IAC3D,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAuDF;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,KAAK,EACL,KAAK,EACL,SAAS,EACT,UAAU,EACV,WAAW,GACZ,EAAE,sBAAsB,+BAyDxB"}

package/dist/components/progress-checklist.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Check, CheckCheck } from "lucide-react";
+import { useState } from "react";
+import { Button } from "./button.js";
+import { Gauge } from "./gauge.js";
+import { PageCommandButton } from "./page-actions.js";
+import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, } from "./sheet.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+import { cn } from "../lib/utils.js";
+const TILE_TONES = {
+    neutral: "bg-card text-muted-foreground ring-1 ring-border ring-inset",
+    blue: "bg-info-soft text-info-soft-foreground",
+    green: "bg-success-soft text-success-soft-foreground",
+    amber: "bg-warning-soft text-warning-soft-foreground",
+    purple: "bg-category-purple text-category-purple-foreground",
+    teal: "bg-category-teal text-category-teal-foreground",
+    pink: "bg-category-pink text-category-pink-foreground",
+};
+function ratio(steps) {
+    if (steps.length === 0)
+        return 0;
+    return (steps.filter((step) => step.done).length / steps.length) * 100;
+}
+function StepCard({ step, doneLabel }) {
+    const tileTone = TILE_TONES[step.tone ?? "neutral"];
+    return (_jsxs("li", { className: cn("flex min-w-0 items-start gap-3 rounded-sm p-4 ring-1 ring-border ring-inset"), "data-done": step.done || undefined, "data-slot": "checklist-step", children: [_jsx("span", { "aria-hidden": "true", className: cn("inline-flex size-8 shrink-0 items-center justify-center rounded-sm", tileTone), children: _jsx(step.icon, { "aria-hidden": "true", size: 16 }) }), _jsxs("span", { className: "grid min-w-0 flex-1 gap-1", children: [_jsxs("span", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx("span", { className: "min-w-0 font-medium break-words text-foreground", children: step.title }), step.done ? (_jsxs("span", { className: "inline-flex h-5 items-center gap-1 rounded-full bg-info px-2 text-[11px] leading-5 font-medium text-info-foreground", children: [_jsx(Check, { "aria-hidden": "true", className: "size-3" }), doneLabel] })) : null] }), _jsx("span", { className: "text-body-sm break-words text-muted-foreground", children: step.description }), !step.done && step.action ? (_jsx("span", { className: "pt-2", children: _jsx(PageCommandButton, { command: step.action, size: "sm", variant: "outline" }) })) : null] })] }));
+}
+/**
+ * How far one record is through the steps that make it ready: a blue ring at the end of its row
+ * that opens the steps in a drawer at the right edge.
+ *
+ * @family Status
+ * @when “Production Checklist”, the ring at the end of a project's row on Vercel's Projects page, which opens the steps that make a project ready for production. (https://vercel.com/dashboard)
+ * Ours: the steps a Customer or a Partner takes before nadicode's work runs for them, each one a fact the Portal can read (company details confirmed, a plan, Nadia connected, an Agent at work), at the end of the record's row.
+ * @instead Steps a person follows on a page, one after the other, are `NumberedSteps`; a setup with a wait is `FormDrawer job="steps"`. A ratio with no steps behind it is a `Gauge`. One state of a record is a `StatusBadge`.
+ * @behaviour The ring is a 24 px `Gauge` in blue with the double check inside in ink, so the glyph reads at a glance, on a 36 px ghost button whose tooltip names the checklist and how far it is ("Customer setup 3/4"). It opens a drawer from the right: the ring again, the title, one line, then one card per step: its icon on a tile of its tone, its title, one line, and the outline button that goes where the step is done; every card is the same hairline card, and a done step differs only by its blue Done chip after its title, with no button, so the steps still to do, with their buttons, draw the eye. The footer's button closes it. A step is done because the thing it asks for exists, so the checklist has no Skip and remembers nothing.
+ * @words Every string is the product's. The title names the checklist ("Customer setup"); a step's title reads as the thing done ("Plan chosen"); its button names where it goes ("Open billing").
+ * @access The ring's button is named by `label`, which says whose checklist and how many steps are done; the ring itself is hidden from assistive technology. The drawer is a dialog named by its title; Escape, × and the footer's button close it and give focus back to the ring. The steps are a list.
+ */
+export function ProgressChecklist({ title, description, label, steps, doneLabel, closeLabel, finishLabel, }) {
+    const [open, setOpen] = useState(false);
+    const value = ratio(steps);
+    const done = steps.filter((step) => step.done).length;
+    return (_jsxs(_Fragment, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Button, { "aria-label": label, "data-slot": "progress-checklist", onClick: () => setOpen(true), size: "icon", variant: "ghost" }), children: _jsx(Gauge, { "aria-hidden": "true", "aria-label": title, className: "size-6", size: "xs", tone: "info", value: value, children: _jsx(CheckCheck, { className: "text-foreground" }) }) }), _jsxs(TooltipContent, { children: [title, " ", done, "/", steps.length] })] }), _jsx(Sheet, { onOpenChange: setOpen, open: open, children: _jsxs(SheetContent, { closeLabel: closeLabel, side: "right", children: [_jsxs(SheetHeader, { className: "items-center pt-10 text-center", children: [_jsx(Gauge, { "aria-hidden": "true", "aria-label": title, size: "sm", tone: "info", value: value, children: _jsx(CheckCheck, { className: "size-4" }) }), _jsx(SheetTitle, { className: "pt-3", children: title }), _jsx(SheetDescription, { children: description })] }), _jsx("ol", { className: "grid min-h-0 flex-1 content-start gap-3 overflow-y-auto px-nadicode-lg", "data-slot": "checklist-steps", children: steps.map((step) => (_jsx(StepCard, { doneLabel: doneLabel, step: step }, step.id))) }), _jsx(SheetFooter, { children: _jsx(Button, { onClick: () => setOpen(false), children: finishLabel }) })] }) })] }));
+}