@nadicodeai/ui 12.1.96 → 12.1.98

package/dist/components/page-actions.js

@@ -2,38 +2,37 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 import { ArrowUpRight } from "lucide-react";
-import { createContext, isValidElement, useCallback, useContext, useEffect, useId, useState, } from "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 { DropdownMenuItem, DropdownMenuSeparator } from "./dropdown-menu.js";
-function CommandElement({ children, disabled, element, variant, }) {
+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",
         },
     });
 }
-/** One command as a button in a given slot's variant. */
 export function PageCommandButton({ command, variant, }) {
-    const content = (_jsxs(_Fragment, { children: [command.icon ? _jsx("span", { "data-icon": "inline-start", children: command.icon }) : null, command.label, command.external ? _jsx(ArrowUpRight, { "aria-hidden": "true", "data-icon": "inline-end" }) : null] }));
+    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] }));
     if (command.render) {
-        return (_jsx(CommandElement, { disabled: command.disabled, element: command.render, variant: variant, children: content }));
+        return (_jsx(CommandElement, { accessibleName: command.accessibleName, busy: pending, disabled: pending || command.disabled === true, element: command.render, variant: variant, children: content }));
     }
-    return (_jsx(Button, { disabled: command.disabled, onClick: command.onClick, type: "button", variant: variant, children: content }));
-}
-function MenuCommand({ command }) {
-    return (_jsxs(_Fragment, { children: [command.destructive ? _jsx(DropdownMenuSeparator, {}) : null, _jsxs(DropdownMenuItem, { disabled: command.disabled, variant: command.destructive ? "destructive" : "default", ...(command.render ? { render: command.render } : { onClick: command.onClick }), children: [command.label, command.icon ? (_jsx("span", { "aria-hidden": "true", className: "ml-auto flex items-center", children: command.icon })) : null] })] }));
+    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 }));
 }
 /** The row of a page's actions where it stands, for a page whose header is its own card. */
-export function PageActionsRow({ primary, secondary, menu }) {
-    if (!primary && !secondary && !menu)
+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: [secondary ? _jsx(PageCommandButton, { command: secondary, variant: "outline" }) : null, primary ? _jsx(PageCommandButton, { command: primary, variant: "default" }) : null, isValidElement(menu) ? (menu) : menu ? (_jsx(ActionMenu, { label: menu.label, children: menu.commands.map((command) => (_jsx(MenuCommand, { command: command }, command.label))) })) : 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] }));
 }
 const PageActionsHostContext = createContext(null);
 /**
@@ -57,13 +56,20 @@ export function PageActionsSlot() {
  * A page's actions, drawn on its title's row. Only the page shown last owns
  * the row: a page kept hidden for a quick return gives the row back. Outside a
  * `PageActionsHostProvider`, they render where they stand.
+ *
+ * @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.
+ * @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.
  */
 export function PageActions(props) {
     const host = useContext(PageActionsHostContext);
     const id = useId();
     const claim = host?.claim;
     const release = host?.release;
-    const hasActions = Boolean(props.primary || props.secondary || props.menu);
+    const hasActions = Boolean(props.period || props.primary || props.secondary || props.menu);
     useEffect(() => {
         if (!hasActions)
             return;

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

@@ -1,10 +1,16 @@
 import * as React from "react";
 /**
- * The top of a product page (DESIGN.md "Page compositions"): its title at
- * heading size on the left, the page's actions on the title's row at the right,
- * which the page draws with `PageActions`. Nothing explains the page under its
- * title. The path above it is the top bar's; the toolbar below it holds only
- * filters, search and sort.
+ * The top of a product page: its title, and the page's actions on the title's row.
+ *
+ * @family Compositions
+ * @when The top of every collection and working page: the title at heading size, `PageActions` at
+ * 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*.
+ * @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"> & {
     title: React.ReactNode;

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;;;;;;GAMG;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;;;;;;;;;;;;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"}

package/dist/components/page-header.js

@@ -2,11 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 import { PageActionsSlot } from "./page-actions.js";
 /**
- * The top of a product page (DESIGN.md "Page compositions"): its title at
- * heading size on the left, the page's actions on the title's row at the right,
- * which the page draws with `PageActions`. Nothing explains the page under its
- * title. The path above it is the top bar's; the toolbar below it holds only
- * filters, search and sort.
+ * The top of a product page: its title, and the page's actions on the title's row.
+ *
+ * @family Compositions
+ * @when The top of every collection and working page: the title at heading size, `PageActions` at
+ * 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*.
+ * @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, {})] }) }));

package/dist/components/pagination.d.ts

@@ -1,5 +1,20 @@
 import * as React from "react";
 import { Button } from "./button.js";
+/**
+ * Numbered sibling pages with Previous and Next.
+ *
+ * @family Navigation
+ * @when `Pagination` for numbered sibling pages. A table of server pages takes `DataTable`'s own
+ * Previous and Next under its card; the card's footer strip holds the count or the paging.
+ * @instead Appending rows in place is a `Button` with `PendingLabel` (*Load more*). A fixed
+ * comparison passes `pagination={false}` and stays whole.
+ * @behaviour Boundaries are disabled. While the next page loads both buttons disable and the rows
+ * stay. The order and the page live in the URL. The labels hide under `sm`, leaving the chevrons.
+ * @words *Previous*, *Next*. The footer is a count with its noun or *Page 1 of 6*, never a help
+ * sentence.
+ * @access A labelled `nav`; the current page has `aria-current="page"`; the arrows read *Go to
+ * previous page*; a pending button is `aria-busy`.
+ */
 declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
 declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
 declare function PaginationItem({ ...props }: React.ComponentProps<"li">): React.JSX.Element;

package/dist/components/pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../src/components/pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBASvE;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAQ7E;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAE/D;AAED,KAAK,mBAAmB,GAAG;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,CAAC,GACnD,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AAE5B,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAa,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,qBAiB5F;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,IAAiB,EACjB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,qBAYjE;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,IAAa,EACb,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,qBAYjE;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAehF;AAED,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,cAAc,EACd,kBAAkB,GACnB,CAAC"}
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../src/components/pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C;;;;;;;;;;;;;;GAcG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBASvE;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAQ7E;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAE/D;AAED,KAAK,mBAAmB,GAAG;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,CAAC,GACnD,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AAE5B,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAa,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,qBAiB5F;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,IAAiB,EACjB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,qBAYjE;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,IAAa,EACb,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,qBAYjE;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAehF;AAED,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,cAAc,EACd,kBAAkB,GACnB,CAAC"}

package/dist/components/pagination.js

@@ -2,6 +2,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+/**
+ * Numbered sibling pages with Previous and Next.
+ *
+ * @family Navigation
+ * @when `Pagination` for numbered sibling pages. A table of server pages takes `DataTable`'s own
+ * Previous and Next under its card; the card's footer strip holds the count or the paging.
+ * @instead Appending rows in place is a `Button` with `PendingLabel` (*Load more*). A fixed
+ * comparison passes `pagination={false}` and stays whole.
+ * @behaviour Boundaries are disabled. While the next page loads both buttons disable and the rows
+ * stay. The order and the page live in the URL. The labels hide under `sm`, leaving the chevrons.
+ * @words *Previous*, *Next*. The footer is a count with its noun or *Page 1 of 6*, never a help
+ * sentence.
+ * @access A labelled `nav`; the current page has `aria-current="page"`; the arrows read *Go to
+ * previous page*; a pending button is `aria-busy`.
+ */
 function Pagination({ className, ...props }) {
     return (_jsx("nav", { "aria-label": "pagination", "data-slot": "pagination", className: cn("mx-auto flex w-full justify-center", className), ...props }));
 }

package/dist/components/pairing-code.d.ts

@@ -6,10 +6,21 @@ export type PairingCodeProps = Omit<React.ComponentProps<"div">, "children" | "r
     label: string;
 };
 /**
- * The short code two screens show at once so a person can tell they are
- * talking to each other, such as the four digits Nadia and Alveare Server both
- * show while a Nadia asks to join. Each digit stands in its own cell, large
- * enough to compare from across a desk. The caller places it.
+ * The short code two screens show at once so a person can tell they are talking
+ * to each other, such as the four digits Nadia and Alveare Server both show
+ * while a Nadia asks to join.
+ *
+ * Each digit stands in its own cell, large enough to compare from across a
+ * desk. The caller places it.
+ *
+ * @family Data
+ * @when Pairing two devices or apps a person can see side by side: the four digits Nadia and
+ * Alveare Server both show while a Nadia asks to join.
+ * @instead A code a person types is `InputOTP`. A link another device scans is `QrCode`.
+ * @behaviour Each digit in its own cell, large enough to compare from across a desk. A leading zero
+ * is a digit.
+ * @words The label says what the code is: *Pairing code*.
+ * @access `role="img"` named by the label and the digits read one by one.
  */
 declare function PairingCode({ code, label, className, ...props }: PairingCodeProps): React.JSX.Element;
 export { PairingCode };

package/dist/components/pairing-code.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pairing-code.d.ts","sourceRoot":"","sources":["../../src/components/pairing-code.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAAG;IACtF,+EAA+E;IAC/E,IAAI,EAAE,MAAM,CAAC;IACb,8FAA8F;IAC9F,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;GAKG;AACH,iBAAS,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,qBAsB1E;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"pairing-code.d.ts","sourceRoot":"","sources":["../../src/components/pairing-code.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAAG;IACtF,+EAA+E;IAC/E,IAAI,EAAE,MAAM,CAAC;IACb,8FAA8F;IAC9F,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,qBAsB1E;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/pairing-code.js

@@ -1,10 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 /**
- * The short code two screens show at once so a person can tell they are
- * talking to each other, such as the four digits Nadia and Alveare Server both
- * show while a Nadia asks to join. Each digit stands in its own cell, large
- * enough to compare from across a desk. The caller places it.
+ * The short code two screens show at once so a person can tell they are talking
+ * to each other, such as the four digits Nadia and Alveare Server both show
+ * while a Nadia asks to join.
+ *
+ * Each digit stands in its own cell, large enough to compare from across a
+ * desk. The caller places it.
+ *
+ * @family Data
+ * @when Pairing two devices or apps a person can see side by side: the four digits Nadia and
+ * Alveare Server both show while a Nadia asks to join.
+ * @instead A code a person types is `InputOTP`. A link another device scans is `QrCode`.
+ * @behaviour Each digit in its own cell, large enough to compare from across a desk. A leading zero
+ * is a digit.
+ * @words The label says what the code is: *Pairing code*.
+ * @access `role="img"` named by the label and the digits read one by one.
  */
 function PairingCode({ code, label, className, ...props }) {
     const digits = [...code];

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

@@ -1,11 +1,19 @@
 import type * as React from "react";
 /**
  * A control's own label while the system works on what it was asked to do.
- * The word changes and nothing moves; the control keeps its place, its icon
- * and its size. The caller owns `disabled` and `aria-busy` on the control
- * itself, because only the caller knows which element the wait belongs to.
  *
- * Work that runs past a second adds one `WaitingLine` beside the control.
+ * @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.
+ * @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.
+ * @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.
  */
 declare function PendingLabel({ children, className, pending, pendingLabel, ...props }: React.ComponentProps<"span"> & {
     pending: boolean;

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;;;;;;;GAOG;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;;;;;;;;;;;;;;;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"}

package/dist/components/pending-label.js

@@ -2,11 +2,19 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 /**
  * A control's own label while the system works on what it was asked to do.
- * The word changes and nothing moves; the control keeps its place, its icon
- * and its size. The caller owns `disabled` and `aria-busy` on the control
- * itself, because only the caller knows which element the wait belongs to.
  *
- * Work that runs past a second adds one `WaitingLine` beside the control.
+ * @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.
+ * @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.
+ * @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 }));

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

@@ -1,12 +1,20 @@
 import type { ReactNode } from "react";
 /**
- * A failure page's picture with its label
- * ([Failure surfaces](../../../design-system/DESIGN.md#failure-surfaces)): the
- * way a museum labels a work, the title says what the picture is doing, which
- * is the page's joke, and the second line gives its materials and year. From
- * `lg` the label stands beside the picture's base, with an empty column of the
- * same width on the other side so the picture stays on the page's centre line;
- * below that it stands centred under the picture.
+ * A failure page's picture with its label, the way a museum labels a work.
+ *
+ * DESIGN.md: [Failure surfaces](../../../design-system/DESIGN.md#failure-surfaces).
+ *
+ * @family Feedback
+ * @when A page that cannot show what was asked for: an address or record that is not there
+ * (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.
+ * @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 declare function LabelledPicture({ children, label, className, }: {
     children: ReactNode;

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;;;;;;;;GAQG;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,+BAeA;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

@@ -1,13 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 /**
- * A failure page's picture with its label
- * ([Failure surfaces](../../../design-system/DESIGN.md#failure-surfaces)): the
- * way a museum labels a work, the title says what the picture is doing, which
- * is the page's joke, and the second line gives its materials and year. From
- * `lg` the label stands beside the picture's base, with an empty column of the
- * same width on the other side so the picture stays on the page's centre line;
- * below that it stands centred under the picture.
+ * A failure page's picture with its label, the way a museum labels a work.
+ *
+ * DESIGN.md: [Failure surfaces](../../../design-system/DESIGN.md#failure-surfaces).
+ *
+ * @family Feedback
+ * @when A page that cannot show what was asked for: an address or record that is not there
+ * (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.
+ * @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 })] }));

package/dist/components/platform-mark.d.ts

@@ -27,9 +27,18 @@ type PlatformMarkProps = Omit<IconProps, "children" | "icon" | "ref"> & {
     size?: number;
 };
 /**
- * A platform's genuine mark, drawn at once on the server and in the browser.
- * It always sits beside the name that reads it, so assistive technology skips
- * it.
+ * A platform's genuine mark: an operating system, a messaging channel or a sign-in provider.
+ *
+ * @family Status
+ * @when Naming a platform beside its word: *Continue with Google*, a Telegram channel, the macOS
+ * download.
+ * @instead A connected app in its tile is `AppMark`. A model's maker is `ModelMark`. The company is
+ * `BrandMark`.
+ * @behaviour Drawn at once on the server and in the browser from Iconify's `logos` set, one module
+ * per mark; Alveare by its own. A silhouette takes the text colour; a coloured mark keeps its
+ * paint.
+ * @words None of its own; the platform's name always stands beside it.
+ * @access Always `aria-hidden`: the name beside it is the reading.
  */
 declare function PlatformMark({ platform, size, ...props }: PlatformMarkProps): React.JSX.Element;
 export { PlatformMark, isPlatform };

package/dist/components/platform-mark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"platform-mark.d.ts","sourceRoot":"","sources":["../../src/components/platform-mark.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAWhF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B;;;;GAIG;AACH,QAAA,MAAM,SAAS;;;;;;;;;;;;CAYwB,CAAC;AAExC,KAAK,YAAY,GAAG,MAAM,OAAO,SAAS,CAAC;AAE3C,qFAAqF;AACrF,iBAAS,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,IAAI,YAAY,CAEtD;AAOD,KAAK,iBAAiB,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,MAAM,GAAG,KAAK,CAAC,GAAG;IACtE,QAAQ,EAAE,YAAY,CAAC;IACvB,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;GAIG;AACH,iBAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,IAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,qBAgBzE;AAED,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC;AACpC,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"platform-mark.d.ts","sourceRoot":"","sources":["../../src/components/platform-mark.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAWhF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B;;;;GAIG;AACH,QAAA,MAAM,SAAS;;;;;;;;;;;;CAYwB,CAAC;AAExC,KAAK,YAAY,GAAG,MAAM,OAAO,SAAS,CAAC;AAE3C,qFAAqF;AACrF,iBAAS,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,IAAI,YAAY,CAEtD;AAOD,KAAK,iBAAiB,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,MAAM,GAAG,KAAK,CAAC,GAAG;IACtE,QAAQ,EAAE,YAAY,CAAC;IACvB,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,iBAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,IAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,qBAgBzE;AAED,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC;AACpC,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/platform-mark.js

@@ -53,9 +53,18 @@ function silhouette(icon) {
     return !/\b(?:fill|stroke|stop-color)=/.test(icon.body);
 }
 /**
- * A platform's genuine mark, drawn at once on the server and in the browser.
- * It always sits beside the name that reads it, so assistive technology skips
- * it.
+ * A platform's genuine mark: an operating system, a messaging channel or a sign-in provider.
+ *
+ * @family Status
+ * @when Naming a platform beside its word: *Continue with Google*, a Telegram channel, the macOS
+ * download.
+ * @instead A connected app in its tile is `AppMark`. A model's maker is `ModelMark`. The company is
+ * `BrandMark`.
+ * @behaviour Drawn at once on the server and in the browser from Iconify's `logos` set, one module
+ * per mark; Alveare by its own. A silhouette takes the text colour; a coloured mark keeps its
+ * paint.
+ * @words None of its own; the platform's name always stands beside it.
+ * @access Always `aria-hidden`: the name beside it is the reading.
  */
 function PlatformMark({ platform, size = 24, ...props }) {
     const icon = PLATFORMS[platform];

package/dist/components/plugin-slot-boundary.d.ts

@@ -21,6 +21,21 @@ type PluginSlotBoundaryProps = Omit<React.ComponentProps<"section">, "title"> &
     contentLabel?: string;
     contentClassName?: string;
 };
+/**
+ * The frame around content a plugin draws inside a product.
+ *
+ * @family Other
+ * @when Any surface a plugin renders into: it names the plugin, its permissions and its state
+ * around the plugin's own content.
+ * @instead The product's own sections are `SettingsSection` or `ObjectSection`.
+ * @behaviour A title and description, the permissions with their levels, a warning or an error when
+ * given, then the plugin's content in a labelled region and its footer. `disabled` dims the
+ * content.
+ * @words The plugin's title as the plugin names itself; permissions are short nouns with a sentence
+ * each.
+ * @access The permissions are a labelled list and the plugin's content a region labelled
+ * `contentLabel`, so a reader knows where the plugin begins and ends.
+ */
 declare function PluginSlotBoundary({ title, description, status, permissions, warning, error, redactionGuidance, actions, footer, children, contentLabel, className, contentClassName, ...props }: PluginSlotBoundaryProps): React.JSX.Element;
 export { PluginSlotBoundary };
 export type { PluginPermission, PluginPermissionLevel, PluginSlotBoundaryProps, PluginSlotBoundaryStatus, };

package/dist/components/plugin-slot-boundary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin-slot-boundary.d.ts","sourceRoot":"","sources":["../../src/components/plugin-slot-boundary.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,KAAK,wBAAwB,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;AAC3E,KAAK,qBAAqB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEnE,KAAK,gBAAgB,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B,CAAC;AAEF,KAAK,uBAAuB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,GAAG;IAC9E,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,wBAAwB,CAAC;IAClC,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACjC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAeF,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,WAAW,EACX,MAAgB,EAChB,WAAgB,EAChB,OAAO,EACP,KAAK,EACL,iBAA4C,EAC5C,OAAO,EACP,MAAM,EACN,QAAQ,EACR,YAA+B,EAC/B,SAAS,EACT,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,uBAAuB,qBAoGzB;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAC9B,YAAY,EACV,gBAAgB,EAChB,qBAAqB,EACrB,uBAAuB,EACvB,wBAAwB,GACzB,CAAC"}
+{"version":3,"file":"plugin-slot-boundary.d.ts","sourceRoot":"","sources":["../../src/components/plugin-slot-boundary.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,KAAK,wBAAwB,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;AAC3E,KAAK,qBAAqB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEnE,KAAK,gBAAgB,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B,CAAC;AAEF,KAAK,uBAAuB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,GAAG;IAC9E,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,wBAAwB,CAAC;IAClC,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACjC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAeF;;;;;;;;;;;;;;GAcG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,WAAW,EACX,MAAgB,EAChB,WAAgB,EAChB,OAAO,EACP,KAAK,EACL,iBAA4C,EAC5C,OAAO,EACP,MAAM,EACN,QAAQ,EACR,YAA+B,EAC/B,SAAS,EACT,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,uBAAuB,qBAoGzB;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAC9B,YAAY,EACV,gBAAgB,EAChB,qBAAqB,EACrB,uBAAuB,EACvB,wBAAwB,GACzB,CAAC"}

package/dist/components/plugin-slot-boundary.js

@@ -12,6 +12,21 @@ const permissionBadgeVariants = {
     denied: "destructive",
 };
 const defaultRedactionGuidance = "Plugin content should be synthetic or redacted. Do not render secrets, environment variable values, raw terminal output, or hidden reasoning.";
+/**
+ * The frame around content a plugin draws inside a product.
+ *
+ * @family Other
+ * @when Any surface a plugin renders into: it names the plugin, its permissions and its state
+ * around the plugin's own content.
+ * @instead The product's own sections are `SettingsSection` or `ObjectSection`.
+ * @behaviour A title and description, the permissions with their levels, a warning or an error when
+ * given, then the plugin's content in a labelled region and its footer. `disabled` dims the
+ * content.
+ * @words The plugin's title as the plugin names itself; permissions are short nouns with a sentence
+ * each.
+ * @access The permissions are a labelled list and the plugin's content a region labelled
+ * `contentLabel`, so a reader knows where the plugin begins and ends.
+ */
 function PluginSlotBoundary({ title, description, status = "ready", permissions = [], warning, error, redactionGuidance = defaultRedactionGuidance, actions, footer, children, contentLabel = "Plugin content", className, contentClassName, ...props }) {
     const statusIcon = status === "error" ? (_jsx(ShieldAlertIcon, { "data-icon": true, className: "size-4" })) : status === "warning" ? (_jsx(AlertTriangleIcon, { "data-icon": true, className: "size-4" })) : status === "disabled" ? (_jsx(LockKeyholeIcon, { "data-icon": true, className: "size-4" })) : (_jsx(ShieldCheckIcon, { "data-icon": true, className: "size-4" }));
     return (_jsx("section", { "data-slot": "plugin-slot-boundary", "data-status": status, className: className, ...props, children: _jsxs(Card, { className: "overflow-hidden", children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { className: "grid min-w-0 gap-1", children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: [statusIcon, _jsx("span", { className: "min-w-0 truncate", children: title })] }), description && _jsx(CardDescription, { children: description })] }), actions && (_jsx("div", { "data-slot": "plugin-slot-boundary-actions", className: "flex shrink-0 items-center gap-2", children: actions }))] }), permissions.length > 0 && (_jsx("div", { "data-slot": "plugin-slot-boundary-permissions", className: "flex flex-wrap items-center gap-2", "aria-label": "Plugin permissions", children: permissions.map((permission) => {

package/dist/components/popover.d.ts

@@ -1,5 +1,20 @@
 import * as React from "react";
 import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+/**
+ * A small control set tied to its trigger, on glass.
+ *
+ * @family Menus
+ * @when A small control set tied to its trigger: filters, a scope chooser, a date range, a feedback
+ * form. The page stays live behind it.
+ * @instead For commands use `DropdownMenu`. For a form that adds a record use `FormDialog`. For one
+ * phrase use `Tooltip`; for facts on hover use `HoverCard`.
+ * @behaviour Glass floating surface, 12 px padding and gap. Opens on click, closes on Escape or
+ * outside press, focus returns to the trigger. Applies at once; no Save inside.
+ * @words Title names the control's job (*Filter skills*); an optional one-line description. Options
+ * are nouns.
+ * @access Trigger has a visible name and `aria-expanded`. The popup is a labelled dialog that does
+ * not trap focus; Tab leaves it in order.
+ */
 declare function Popover({ ...props }: PopoverPrimitive.Root.Props): React.JSX.Element;
 declare function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props): React.JSX.Element;
 declare function PopoverContent({ className, align, alignOffset, side, sideOffset, anchor, ...props }: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "anchor" | "side" | "sideOffset">): React.JSX.Element;

package/dist/components/popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/components/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAKrE,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,qBAEzD;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,qBAEnE;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,KAAgB,EAChB,WAAe,EACf,IAAe,EACf,UAAc,EACd,MAAM,EACN,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAC7B,IAAI,CACF,gBAAgB,CAAC,UAAU,CAAC,KAAK,EACjC,OAAO,GAAG,aAAa,GAAG,QAAQ,GAAG,MAAM,GAAG,YAAY,CAC3D,qBAuBF;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ1E;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,qBAQ1E;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,WAAW,CAAC,KAAK,qBAQtF;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/components/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAKrE;;;;;;;;;;;;;;GAcG;AACH,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,qBAEzD;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,qBAEnE;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,KAAgB,EAChB,WAAe,EACf,IAAe,EACf,UAAc,EACd,MAAM,EACN,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAC7B,IAAI,CACF,gBAAgB,CAAC,UAAU,CAAC,KAAK,EACjC,OAAO,GAAG,aAAa,GAAG,QAAQ,GAAG,MAAM,GAAG,YAAY,CAC3D,qBAwBF;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ1E;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,qBAQ1E;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,WAAW,CAAC,KAAK,qBAQtF;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/popover.js

@@ -2,6 +2,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
 import { cn } from "../lib/utils.js";
 import { anchoredOverlayMotion } from "../lib/motion.js";
+/**
+ * A small control set tied to its trigger, on glass.
+ *
+ * @family Menus
+ * @when A small control set tied to its trigger: filters, a scope chooser, a date range, a feedback
+ * form. The page stays live behind it.
+ * @instead For commands use `DropdownMenu`. For a form that adds a record use `FormDialog`. For one
+ * phrase use `Tooltip`; for facts on hover use `HoverCard`.
+ * @behaviour Glass floating surface, 12 px padding and gap. Opens on click, closes on Escape or
+ * outside press, focus returns to the trigger. Applies at once; no Save inside.
+ * @words Title names the control's job (*Filter skills*); an optional one-line description. Options
+ * are nouns.
+ * @access Trigger has a visible name and `aria-expanded`. The popup is a labelled dialog that does
+ * not trap focus; Tab leaves it in order.
+ */
 function Popover({ ...props }) {
     return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
 }
@@ -9,7 +24,7 @@ function PopoverTrigger({ ...props }) {
     return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverContent({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, anchor, ...props }) {
-    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, anchor: anchor, className: "isolate z-50", children: _jsx(PopoverPrimitive.Popup, { "data-slot": "popover-content", className: cn("z-50 flex w-72 flex-col gap-control-padding-inline rounded-lg border-0 nc-glass p-control-padding-inline text-sm text-popover-foreground nc-elevation-floating outline-hidden", anchoredOverlayMotion, className), ...props }) }) }));
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, anchor: anchor, className: "isolate z-50", children: _jsx(PopoverPrimitive.Popup, { "data-slot": "popover-content", className: cn("pointer-events-auto", "z-50 flex w-72 flex-col gap-control-padding-inline rounded-lg border-0 nc-glass p-control-padding-inline text-sm text-popover-foreground nc-elevation-floating outline-hidden", anchoredOverlayMotion, className), ...props }) }) }));
 }
 function PopoverHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "popover-header", className: cn("flex flex-col gap-0.5 text-sm", className), ...props }));

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

@@ -1,17 +1,5 @@
 import type { ReactNode } from "react";
 import { type AccountIdentity } from "./account-menu.js";
-/**
- * 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. 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.
- */
 export type PortalSidebarItem = {
     id: string;
     label: string;
@@ -25,6 +13,32 @@ export type PortalSidebarBand = {
     label?: string;
     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.
+ *
+ * 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.
+ *
+ * @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.
+ */
 export declare function PortalSidebarFrame({ account, bands, className, findLabel, footerItem, subtitle, toggleLabel, }: {
     account: AccountIdentity;
     bands: PortalSidebarBand[];

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;;;;;;;;;;;GAWG;AAEH,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,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;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"}