@nadicodeai/ui 12.1.101 → 12.1.103

package/dist/internal/assistant-ui/reasoning.d.ts

@@ -20,7 +20,7 @@ export type ReasoningRootProps = Omit<React.ComponentProps<typeof Collapsible>,
     streaming?: boolean;
 };
 declare function ReasoningRoot({ className, variant, open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, streaming, children, ...props }: ReasoningRootProps): import("react").JSX.Element;
-declare function ReasoningTrigger({ active, duration, className, ...props }: React.ComponentProps<typeof CollapsibleTrigger> & {
+declare function ReasoningTrigger({ active, duration, className, ...props }: Omit<React.ComponentProps<typeof CollapsibleTrigger>, "children"> & {
     active?: boolean;
     duration?: number;
 }): import("react").JSX.Element;

package/dist/internal/assistant-ui/reasoning.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reasoning.d.ts","sourceRoot":"","sources":["../../../src/internal/assistant-ui/reasoning.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAiB,KAAK,6BAA6B,EAAE,MAAM,qBAAqB,CAAC;AAExF,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAM/F,QAAA,MAAM,iBAAiB;;8EAWrB,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EACxC,MAAM,GAAG,cAAc,CACxB,GACC,YAAY,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACvC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEJ,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,OAAO,EACP,IAAI,EAAE,cAAc,EACpB,YAAY,EAAE,sBAAsB,EACpC,WAAmB,EACnB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAuDpB;AAkCD,iBAAS,gBAAgB,CAAC,EACxB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,GAAG;IACnD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,+BAmCA;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,+BAmBjD;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BA6DpF;AAID,QAAA,MAAM,SAAS,EAAE,6BAAmD,CAAC;AAIrE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"reasoning.d.ts","sourceRoot":"","sources":["../../../src/internal/assistant-ui/reasoning.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAiB,KAAK,6BAA6B,EAAE,MAAM,qBAAqB,CAAC;AAExF,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAM/F,QAAA,MAAM,iBAAiB;;8EAWrB,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EACxC,MAAM,GAAG,cAAc,CACxB,GACC,YAAY,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACvC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEJ,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,OAAO,EACP,IAAI,EAAE,cAAc,EACpB,YAAY,EAAE,sBAAsB,EACpC,WAAmB,EACnB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAuDpB;AAkCD,iBAAS,gBAAgB,CAAC,EACxB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,EAAE,UAAU,CAAC,GAAG;IACrE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,+BAmCA;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,+BAmBjD;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BA6DpF;AAID,QAAA,MAAM,SAAS,EAAE,6BAAmD,CAAC;AAIrE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAE,CAAC"}

package/dist/internal/assistant-ui/tool-fallback.js

@@ -138,7 +138,7 @@ function ToolFallbackApproval({ className, addResult, resume, interrupt, approva
         // oxlint-disable-next-line anti-slop/no-runtime-typeof -- an approval option's confirm is a boolean or a details object; only typeof tells them apart.
         const confirmMeta = typeof confirming.confirm === "object" ? confirming.confirm : undefined;
         const confirmDescription = confirmMeta?.description ?? confirming.description;
-        return (_jsxs("div", { "data-slot": "tool-fallback-approval-confirm", className: cn("aui-tool-fallback-approval-confirm flex flex-col gap-2 pt-1", className), ...props, children: [_jsx("p", { className: "aui-tool-fallback-approval-confirm-title font-semibold", children: confirmMeta?.title ?? `${approvalOptionLabel(confirming)}?` }), confirmDescription && (_jsx("p", { className: "aui-tool-fallback-approval-confirm-description text-muted-foreground", children: confirmDescription })), confirming.grants && confirming.grants.length > 0 && (_jsx("ul", { className: "aui-tool-fallback-approval-confirm-grants flex flex-col gap-1", children: confirming.grants.map((grant) => (_jsx("li", { children: _jsx("code", { className: "aui-tool-fallback-approval-confirm-grant bg-muted rounded px-1.5 py-0.5 text-xs", children: grant }) }, grant))) })), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { size: "sm", className: pressable, onClick: () => respondWithOption(confirming), disabled: submitted, children: "Confirm" }), _jsx(Button, { size: "sm", variant: "outline", className: pressable, onClick: () => setConfirmingId(null), disabled: submitted, children: "Back" })] })] }));
+        return (_jsxs("div", { "data-slot": "tool-fallback-approval-confirm", className: cn("aui-tool-fallback-approval-confirm flex flex-col gap-2 pt-1", className), ...props, children: [_jsx("p", { className: "aui-tool-fallback-approval-confirm-title font-semibold", children: confirmMeta?.title ?? `${approvalOptionLabel(confirming)}?` }), confirmDescription && (_jsx("p", { className: "aui-tool-fallback-approval-confirm-description text-muted-foreground", children: confirmDescription })), confirming.grants && confirming.grants.length > 0 && (_jsx("ul", { className: "aui-tool-fallback-approval-confirm-grants flex flex-col gap-1", children: confirming.grants.map((grant) => (_jsx("li", { children: _jsx("code", { className: "aui-tool-fallback-approval-confirm-grant bg-muted rounded px-1.5 py-0.5 text-xs", children: grant }) }, grant))) })), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { size: "sm", className: pressable, onClick: () => respondWithOption(confirming), disabled: submitted, children: approvalOptionLabel(confirming) }), _jsx(Button, { size: "sm", variant: "outline", className: pressable, onClick: () => setConfirmingId(null), disabled: submitted, children: "Back" })] })] }));
     }
     if (declaredOptions && declaredOptions.length > 0) {
         const allowOptions = options?.filter((o) => isAllowKind(o.kind)) ?? [];

package/dist/internal/assistant-ui/tool-group.d.ts

@@ -9,7 +9,7 @@ export type ToolGroupRootProps = Omit<React.ComponentProps<typeof Collapsible>,
     defaultOpen?: boolean;
 };
 declare function ToolGroupRoot({ className, variant, open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, children, ...props }: ToolGroupRootProps): import("react").JSX.Element;
-declare function ToolGroupTrigger({ count, active, className, ...props }: React.ComponentProps<typeof CollapsibleTrigger> & {
+declare function ToolGroupTrigger({ count, active, className, ...props }: Omit<React.ComponentProps<typeof CollapsibleTrigger>, "children"> & {
     count: number;
     active?: boolean;
 }): import("react").JSX.Element;

package/dist/internal/assistant-ui/tool-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool-group.d.ts","sourceRoot":"","sources":["../../../src/internal/assistant-ui/tool-group.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAI/F,QAAA,MAAM,iBAAiB;;8EASrB,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EACxC,MAAM,GAAG,cAAc,CACxB,GACC,YAAY,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACvC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEJ,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,OAAO,EACP,IAAI,EAAE,cAAc,EACpB,YAAY,EAAE,sBAAsB,EACpC,WAAmB,EACnB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAsCpB;AAED,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,MAAc,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,GAAG;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,+BAwCA;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,+BAyBjD;AAED,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"tool-group.d.ts","sourceRoot":"","sources":["../../../src/internal/assistant-ui/tool-group.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAI/F,QAAA,MAAM,iBAAiB;;8EASrB,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EACxC,MAAM,GAAG,cAAc,CACxB,GACC,YAAY,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACvC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEJ,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,OAAO,EACP,IAAI,EAAE,cAAc,EACpB,YAAY,EAAE,sBAAsB,EACpC,WAAmB,EACnB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAsCpB;AAED,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,MAAc,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,EAAE,UAAU,CAAC,GAAG;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,+BAwCA;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,+BAyBjD;AAED,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/internal/assistant-ui/tooltip-icon-button.d.ts

@@ -1,6 +1,5 @@
-import { type ComponentPropsWithRef } from "react";
-import { Button } from "../../components/button.js";
-export type TooltipIconButtonProps = ComponentPropsWithRef<typeof Button> & {
+import { type IconButtonPartProps } from "../../components/button.js";
+export type TooltipIconButtonProps = Omit<IconButtonPartProps, "aria-label" | "aria-labelledby"> & {
     tooltip: string;
     side?: "top" | "bottom" | "left" | "right";
 };

package/dist/internal/assistant-ui/tooltip-icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-icon-button.d.ts","sourceRoot":"","sources":["../../../src/internal/assistant-ui/tooltip-icon-button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAG/D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,MAAM,sBAAsB,GAAG,qBAAqB,CAAC,OAAO,MAAM,CAAC,GAAG;IAC1E,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,iBAAiB,mIAwB7B,CAAC"}
+{"version":3,"file":"tooltip-icon-button.d.ts","sourceRoot":"","sources":["../../../src/internal/assistant-ui/tooltip-icon-button.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAGvE,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,mBAAmB,EAAE,YAAY,GAAG,iBAAiB,CAAC,GAAG;IACjG,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,iBAAiB,mIAwB7B,CAAC"}

package/dist/internal/assistant-ui/tooltip-icon-button.js

@@ -5,6 +5,6 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../
 import { Button } from "../../components/button.js";
 import { cn } from "../../lib/utils.js";
 export const TooltipIconButton = forwardRef(({ children, tooltip, side = "bottom", className, ...rest }, ref) => {
-    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsxs(TooltipTrigger, { render: _jsx(Button, { variant: "ghost", size: "icon", ...rest, className: cn("aui-button-icon p-1", className), ref: ref }), children: [children, _jsx("span", { className: "aui-sr-only sr-only", children: tooltip })] }), _jsx(TooltipContent, { side: side, children: tooltip })] }) }));
+    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Button, { variant: "ghost", size: "icon", ...rest, "aria-label": tooltip, className: cn("aui-button-icon p-1", className), ref: ref }), children: children }), _jsx(TooltipContent, { side: side, children: tooltip })] }) }));
 });
 TooltipIconButton.displayName = "TooltipIconButton";

package/dist/internal/catalog-list.js

@@ -5,7 +5,7 @@ import { useId } from "react";
 import { ActionMenu } from "../components/action-menu.js";
 import { IdentityMark } from "../components/identity-mark.js";
 import { PageCommandButton } from "../components/page-actions.js";
-import { Skeleton } from "../components/skeleton.js";
+import { Skeleton, SkeletonRegion } from "../components/skeleton.js";
 import { textLinkVariants } from "../components/text-link.js";
 import { soleMenuButton } from "./record-menu-items.js";
 import { RowMessageActions, RowMessageLine } from "./row-message.js";
@@ -46,7 +46,7 @@ export function CatalogList({ columns, headingLevel = 3, sections, }) {
             .map(({ id, title, entries }) => title ? (_jsx(TitledSection, { columns: columns, entries: entries, headingLevel: headingLevel, id: id, title: title }, id)) : (_jsx(EntryList, { columns: columns, entries: entries }, id))) }));
 }
 export function CatalogSkeleton({ columns, label }) {
-    return (_jsx("div", { "aria-busy": "true", "aria-label": label, className: cn("grid gap-3", columns === 2 && "md:grid-cols-2"), role: "status", children: Array.from({ length: columns * 3 }, (_, index) => (_jsxs("div", { "aria-hidden": "true", className: ENTRY_FRAME, children: [_jsx(Skeleton, { className: "size-10 shrink-0" }), _jsxs("div", { className: "grid flex-1 gap-1.5 pt-0.5", children: [_jsx(Skeleton, { className: "h-4 w-32" }), _jsx(Skeleton, { className: "h-3.5 w-full" })] }), _jsx(Skeleton, { className: "h-control-height w-16 shrink-0" })] }, index))) }));
+    return (_jsx(SkeletonRegion, { "aria-label": label, busy: true, className: cn("grid gap-3", columns === 2 && "md:grid-cols-2"), role: "status", children: Array.from({ length: columns * 3 }, (_, index) => (_jsxs("div", { "aria-hidden": "true", className: ENTRY_FRAME, children: [_jsx(Skeleton, { className: "size-10 shrink-0" }), _jsxs("div", { className: "grid flex-1 gap-1.5 pt-0.5", children: [_jsx(Skeleton, { className: "h-4 w-32" }), _jsx(Skeleton, { className: "h-3.5 w-full" })] }), _jsx(Skeleton, { className: "h-control-height w-16 shrink-0" })] }, index))) }));
 }
 export function catalogIsEmpty(sections) {
     return sections.every((section) => section.entries.length === 0);

package/dist/internal/collection-note.d.ts

@@ -0,0 +1,23 @@
+import type { ReactElement } from "react";
+import { type PageCommand } from "../components/page-actions.js";
+/**
+ * The note under a whole list: one muted line about it, a way to read more, and the one
+ * secondary action that belongs to it. "Deleted deployments are kept for 30 days. Learn more",
+ * with "View recently deleted" at the right.
+ */
+export type CollectionNote = {
+    /** One short line, sentence case: what applies to every record in the list. */
+    text: string;
+    /** The line's way to read more, after it: the product's router link, such as `<Link href="/docs" />`. */
+    learnMore?: {
+        label: string;
+        link: ReactElement;
+    } | undefined;
+    /** The one secondary action, at the right. */
+    action?: PageCommand | undefined;
+};
+/** The note's strip, under a collection card's count and paging. */
+export declare function CollectionNoteStrip({ note }: {
+    note: CollectionNote;
+}): import("react").JSX.Element;
+//# sourceMappingURL=collection-note.d.ts.map

package/dist/internal/collection-note.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collection-note.d.ts","sourceRoot":"","sources":["../../src/internal/collection-note.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAqB,KAAK,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAIhF;;;;GAIG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,+EAA+E;IAC/E,IAAI,EAAE,MAAM,CAAC;IACb,yGAAyG;IACzG,SAAS,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,YAAY,CAAA;KAAE,GAAG,SAAS,CAAC;IAC9D,8CAA8C;IAC9C,MAAM,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;CAClC,CAAC;AAUF,oEAAoE;AACpE,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,cAAc,CAAA;CAAE,+BAcrE"}

package/dist/internal/collection-note.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { PageCommandButton } from "../components/page-actions.js";
+import { textLinkVariants } from "../components/text-link.js";
+import { FooterStrip } from "./footer-strip.js";
+function LearnMore({ label, link }) {
+    return useRender({
+        defaultTagName: "a",
+        render: link,
+        props: { className: textLinkVariants({ kind: "quiet" }), children: label },
+    });
+}
+/** The note's strip, under a collection card's count and paging. */
+export function CollectionNoteStrip({ note }) {
+    return (_jsx(FooterStrip, { hint: _jsxs("span", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: [note.text, note.learnMore ? _jsx(LearnMore, { ...note.learnMore }) : null] }), hintSlot: "table-card-note", children: note.action ? _jsx(PageCommandButton, { command: note.action, variant: "outline" }) : null }));
+}

package/dist/internal/collection-rail.d.ts

@@ -0,0 +1,57 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { type EmptyStateKind } from "../components/empty-state.js";
+import { type IdentityMarkProps } from "../components/identity-mark.js";
+import { type PageCommand } from "../components/page-actions.js";
+import { type StatusBadgeTone } from "../components/status-badge.js";
+export type CollectionRailLinkProps = Omit<ComponentProps<"a">, "href"> & {
+    href: string;
+};
+export type CollectionRailItem = {
+    id: string;
+    /** The record's identity mark, drawn at 24 as on a feed line; a figure line has none. */
+    mark?: IdentityMarkProps;
+    title: string;
+    /** One muted line under the title: why it is here, or when. */
+    detail?: ReactNode;
+    /** A figure at the trailing edge, as Vercel's Usage card lists its amounts. */
+    value?: ReactNode;
+    /** Only for the exception, as in a row: the item's state word. */
+    status?: {
+        label: string;
+        tone: StatusBadgeTone;
+    };
+    /** Opens the record the item names. */
+    href?: string;
+};
+export type CollectionRailSection = {
+    id: string;
+    /** The card's name, set above it: "Needs attention". */
+    title: string;
+    /** Undefined while the column's read is in flight: the card holds its place with placeholder lines. */
+    items: readonly CollectionRailItem[] | undefined;
+    /** What the card says with no items: `cleared` for work that is done, `nothingYet` for a list that fills by itself. */
+    empty: EmptyStateKind<"cleared"> | EmptyStateKind<"nothingYet">;
+} & ({
+    /** One muted line at the card's top, such as the cycle: "October · 4 of 9 statements issued". */
+    summary: ReactNode;
+    /** One outline button at the summary's end, as Vercel's Usage card carries Billing beside its cycle. */
+    action?: PageCommand;
+} | {
+    summary?: undefined;
+    action?: never;
+});
+export type CollectionRail = {
+    /** Names the column for assistive technology: "About your customers". */
+    label: string;
+    sections: readonly CollectionRailSection[];
+    /** The column's read failed: one card says so in place of the sections, while the records beside it stay. */
+    failed?: EmptyStateKind<"failed">;
+    /** The product's router link for an item that opens its record. */
+    renderLink?: (props: CollectionRailLinkProps) => ReactNode;
+};
+/** The left column of a collection: titled cards of what matters about the records beside it. */
+export declare function CollectionRailColumn({ rail, className, }: {
+    rail: CollectionRail;
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=collection-rail.d.ts.map

package/dist/internal/collection-rail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collection-rail.d.ts","sourceRoot":"","sources":["../../src/internal/collection-rail.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAGnE,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAClF,OAAO,EAAE,KAAK,WAAW,EAAqB,MAAM,2BAA2B,CAAC;AAEhF,OAAO,EAAe,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAG9E,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3F,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,yFAAyF;IACzF,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kEAAkE;IAClE,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,eAAe,CAAA;KAAE,CAAC;IAClD,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,uGAAuG;IACvG,KAAK,EAAE,SAAS,kBAAkB,EAAE,GAAG,SAAS,CAAC;IACjD,uHAAuH;IACvH,KAAK,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG,cAAc,CAAC,YAAY,CAAC,CAAC;CACjE,GAAG,CACA;IACE,iGAAiG;IACjG,OAAO,EAAE,SAAS,CAAC;IACnB,wGAAwG;IACxG,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB,GACD;IAAE,OAAO,CAAC,EAAE,SAAS,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,CAC1C,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,qBAAqB,EAAE,CAAC;IAC3C,6GAA6G;IAC7G,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC,mEAAmE;IACnE,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,SAAS,CAAC;CAC5D,CAAC;AA8FF,iGAAiG;AACjG,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EACJ,SAAS,GACV,EAAE;IACD,IAAI,EAAE,cAAc,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAsBA"}

package/dist/internal/collection-rail.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId } from "react";
+import { Card } from "../components/card.js";
+import { EmptyState } from "../components/empty-state.js";
+import { IdentityMark } from "../components/identity-mark.js";
+import { PageCommandButton } from "../components/page-actions.js";
+import { Skeleton, SkeletonRegion } from "../components/skeleton.js";
+import { StatusBadge } from "../components/status-badge.js";
+import { cn } from "../lib/utils.js";
+function defaultLink(props) {
+    return _jsx("a", { ...props });
+}
+function RailItem({ item, renderLink, }) {
+    const body = (_jsxs(_Fragment, { children: [item.mark ? _jsx(IdentityMark, { ...item.mark, size: 24 }) : null, _jsxs("span", { className: "grid min-w-0 flex-1", children: [_jsx("span", { className: "truncate font-medium text-foreground", title: item.title, children: item.title }), item.detail ? (_jsx("span", { className: "line-clamp-2 text-body-sm break-words text-muted-foreground", children: item.detail })) : null] }), item.status ? _jsx(StatusBadge, { label: item.status.label, tone: item.status.tone }) : null, item.value === undefined ? null : (_jsx("span", { className: "shrink-0 text-right text-foreground tabular-nums", children: item.value }))] }));
+    const row = "flex min-h-9 min-w-0 items-center gap-3 px-4 py-2 text-sm";
+    return (_jsx("li", { "data-slot": "collection-rail-item", children: item.href ? (renderLink({
+            href: item.href,
+            className: cn(row, "nc-transition-paint hover:bg-accent"),
+            children: body,
+        })) : (_jsx("div", { className: row, children: body })) }));
+}
+const LOADING_LINES = ["first", "second", "third"];
+function RailSection({ section, renderLink, }) {
+    const headingId = useId();
+    return (_jsxs("section", { "aria-labelledby": headingId, className: "grid min-w-0 gap-3", "data-slot": "rail-section", children: [_jsx("h2", { className: "text-heading-xs", id: headingId, children: section.title }), _jsxs(Card, { className: "gap-0 py-0", size: "sm", children: [section.summary ? (_jsxs("div", { className: "flex min-h-11 items-center justify-between gap-3 border-b border-border px-4 py-1.5 text-body-sm text-muted-foreground", children: [_jsx("span", { className: "min-w-0", children: section.summary }), section.action ? (_jsx(PageCommandButton, { command: section.action, size: "sm", variant: "outline" })) : null] })) : null, section.items === undefined ? (_jsx("ul", { "aria-hidden": "true", className: "divide-y divide-border", children: LOADING_LINES.map((line) => (_jsx("li", { className: "flex min-h-11 items-center px-4", children: _jsx(Skeleton, { className: "h-4 w-full" }) }, line))) })) : section.items.length > 0 ? (_jsx("ul", { className: "divide-y divide-border", children: section.items.map((item) => (_jsx(RailItem, { item: item, renderLink: renderLink }, item.id))) })) : (_jsx(EmptyState, { ...section.empty, headingLevel: 3, scope: "line" }))] })] }));
+}
+/** The left column of a collection: titled cards of what matters about the records beside it. */
+export function CollectionRailColumn({ rail, className, }) {
+    const renderLink = rail.renderLink ?? defaultLink;
+    const loading = !rail.failed && rail.sections.some((section) => section.items === undefined);
+    return (_jsx("aside", { "aria-label": rail.label, className: cn("grid min-w-0 content-start gap-6", className), "data-slot": "collection-rail", children: _jsx(SkeletonRegion, { busy: loading, className: "contents", children: rail.failed ? (_jsx(Card, { className: "gap-0 py-0", size: "sm", children: _jsx(EmptyState, { ...rail.failed, headingLevel: 2, scope: "card" }) })) : (rail.sections.map((section) => (_jsx(RailSection, { renderLink: renderLink, section: section }, section.id)))) }) }));
+}

package/dist/internal/company-logo.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+/**
+ * A company's logo on its tile, and `fallback`, its initials, when the stored logo does not load,
+ * so a broken address never leaves an empty tile.
+ */
+export declare function CompanyLogo({ logo, colourTile, size, naming, fallback, }: {
+    logo: string;
+    colourTile: boolean;
+    size: number;
+    naming: {
+        role: "img";
+        "aria-label": string;
+    } | {
+        "aria-hidden": true;
+    };
+    fallback: ReactNode;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+//# sourceMappingURL=company-logo.d.ts.map

package/dist/internal/company-logo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"company-logo.d.ts","sourceRoot":"","sources":["../../src/internal/company-logo.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAIjD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,MAAM,EACN,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE;QAAE,IAAI,EAAE,KAAK,CAAC;QAAC,YAAY,EAAE,MAAM,CAAA;KAAE,GAAG;QAAE,aAAa,EAAE,IAAI,CAAA;KAAE,CAAC;IACxE,QAAQ,EAAE,SAAS,CAAC;CACrB,+TAwBA"}

package/dist/internal/company-logo.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../lib/utils.js";
+/**
+ * A company's logo on its tile, and `fallback`, its initials, when the stored logo does not load,
+ * so a broken address never leaves an empty tile.
+ */
+export function CompanyLogo({ logo, colourTile, size, naming, fallback, }) {
+    const [failedLogo, setFailedLogo] = useState(null);
+    if (failedLogo === logo)
+        return fallback;
+    return (_jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center overflow-hidden", colourTile ? null : "bg-nc-identity-ink ring-1 ring-border ring-inset", size >= 40 ? "rounded-md" : "rounded-sm"), "data-kind": "company", "data-slot": "identity-mark", style: { width: size, height: size }, ...naming, children: _jsx("img", { alt: "", className: colourTile ? "size-full object-cover" : "max-h-[60%] max-w-[78%] object-contain", "data-slot": "identity-mark-logo", onError: () => setFailedLogo(logo), src: logo }) }));
+}

package/dist/internal/control-name.d.ts

@@ -0,0 +1,12 @@
+export type ControlName = {
+    "aria-label": string;
+    "aria-labelledby"?: undefined;
+} | {
+    "aria-labelledby": string;
+    "aria-label"?: undefined;
+} | {
+    id: string;
+    "aria-label"?: undefined;
+    "aria-labelledby"?: undefined;
+};
+//# sourceMappingURL=control-name.d.ts.map

package/dist/internal/control-name.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-name.d.ts","sourceRoot":"","sources":["../../src/internal/control-name.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GACnB;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAAE,GACvD;IAAE,iBAAiB,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,SAAS,CAAA;CAAE,GACvD;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,SAAS,CAAC;IAAC,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC"}

package/dist/internal/control-name.js

@@ -0,0 +1 @@
+export {};

package/dist/internal/diff-line.d.ts

@@ -0,0 +1,9 @@
+export declare const DIFF_ROW: {
+    readonly added: "bg-success-soft text-success-soft-foreground";
+    readonly removed: "bg-destructive-soft text-destructive-soft-foreground";
+};
+export declare const DIFF_MARK: {
+    readonly added: "+";
+    readonly removed: "−";
+};
+//# sourceMappingURL=diff-line.d.ts.map

package/dist/internal/diff-line.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diff-line.d.ts","sourceRoot":"","sources":["../../src/internal/diff-line.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;;CAGX,CAAC;AAEX,eAAO,MAAM,SAAS;;;CAGZ,CAAC"}

package/dist/internal/diff-line.js

@@ -0,0 +1,8 @@
+export const DIFF_ROW = {
+    added: "bg-success-soft text-success-soft-foreground",
+    removed: "bg-destructive-soft text-destructive-soft-foreground",
+};
+export const DIFF_MARK = {
+    added: "+",
+    removed: "−",
+};

package/dist/internal/empty.d.ts

@@ -1,10 +1,14 @@
-type EmptyScope = "page" | "region" | "card";
-declare function Empty({ className, scope, ...props }: React.ComponentProps<"div"> & {
+/** `line` is a card that lists a few items, such as a collection rail's: the absence is one row like an item. */
+type EmptyScope = "page" | "region" | "card" | "line";
+type EmptyTone = "neutral" | "error";
+declare function Empty({ className, scope, tone, ...props }: React.ComponentProps<"div"> & {
     scope?: EmptyScope;
+    tone?: EmptyTone;
 }): import("react").JSX.Element;
 declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+type EmptyMediaVariant = "picture" | "tile" | "error";
 declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<"div"> & {
-    variant: "picture" | "warning";
+    variant: EmptyMediaVariant;
 }): import("react").JSX.Element;
 type EmptyPictureSize = "page" | "card";
 declare function EmptyPicture({ size, src }: {
@@ -14,5 +18,5 @@ declare function EmptyPicture({ size, src }: {
 declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
 declare function EmptyDescription({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
 declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
-export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia, EmptyPicture, type EmptyPictureSize, type EmptyScope, };
+export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia, EmptyPicture, type EmptyPictureSize, type EmptyScope, type EmptyTone, };
 //# sourceMappingURL=empty.d.ts.map

package/dist/internal/empty.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"empty.d.ts","sourceRoot":"","sources":["../../src/internal/empty.tsx"],"names":[],"mappings":"AAIA,KAAK,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE7C,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,KAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,UAAU,CAAA;CAAE,+BActD;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQxE;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,OAAO,EAAE,SAAS,GAAG,SAAS,CAAA;CAAE,+BAelE;AAED,KAAK,gBAAgB,GAAG,MAAM,GAAG,MAAM,CAAC;AAExC,iBAAS,YAAY,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE;IAAE,IAAI,EAAE,gBAAgB,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,+BA0B3E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQvE;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAW7E;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQzE;AAED,OAAO,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,KAAK,gBAAgB,EACrB,KAAK,UAAU,GAChB,CAAC"}
+{"version":3,"file":"empty.d.ts","sourceRoot":"","sources":["../../src/internal/empty.tsx"],"names":[],"mappings":"AAIA,iHAAiH;AACjH,KAAK,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AACtD,KAAK,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAOrC,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,KAAgB,EAChB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,+BAkBxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQxE;AAED,KAAK,iBAAiB,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAEtD,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,OAAO,EAAE,iBAAiB,CAAA;CAAE,+BAgB9D;AAED,KAAK,gBAAgB,GAAG,MAAM,GAAG,MAAM,CAAC;AAExC,iBAAS,YAAY,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE;IAAE,IAAI,EAAE,gBAAgB,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,+BA6B3E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQvE;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAW7E;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQzE;AAED,OAAO,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,KAAK,gBAAgB,EACrB,KAAK,UAAU,EACf,KAAK,SAAS,GACf,CAAC"}

package/dist/internal/empty.js

@@ -1,18 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
 import { cn } from "../lib/utils.js";
-function Empty({ className, scope = "region", ...props }) {
-    return (_jsx("div", { "data-slot": "empty", className: cn("flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center", scope === "page" ? "px-6 pt-10 pb-11" : "px-5 py-7", scope !== "card" && "rounded-sm bg-card nc-elevation-resting", className), ...props, "data-scope": scope }));
+const FRAME = {
+    error: "rounded-sm border border-destructive-soft-foreground/25 bg-destructive-soft",
+    neutral: "rounded-sm bg-card nc-elevation-resting",
+};
+function Empty({ className, scope = "region", tone = "neutral", ...props }) {
+    return (_jsx("div", { "data-slot": "empty", className: cn("flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-6 text-center", scope === "card" && "px-5 py-8", scope === "line" && "min-h-11 flex-row justify-start gap-2 px-4 py-2.5 text-left", (scope === "page" || scope === "region") && "px-17.5 py-12", tone === "error" && "gap-2 p-4 text-destructive-soft-foreground", (scope === "page" || scope === "region") && FRAME[tone], className), ...props, "data-scope": scope, "data-tone": tone }));
 }
 function EmptyHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "empty-header", className: cn("flex max-w-sm min-w-0 flex-col items-center gap-4", className), ...props }));
+    return (_jsx("div", { "data-slot": "empty-header", className: cn("flex max-w-sm min-w-0 flex-col items-center gap-6", className), ...props }));
 }
 function EmptyMedia({ className, variant, ...props }) {
-    return (_jsx("div", { "data-slot": "empty-icon", "data-variant": variant, className: cn("flex shrink-0 justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", variant === "warning" &&
-            "size-9 items-center rounded-md bg-destructive-soft text-destructive [&_svg:not([class*='size-'])]:size-4", variant === "picture" && "items-end", className), ...props }));
+    return (_jsx("div", { "data-slot": "empty-icon", "data-variant": variant, className: cn("flex shrink-0 justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", variant === "tile" &&
+            "size-13.5 items-center rounded-md border border-border bg-card text-muted-foreground [&_svg:not([class*='size-'])]:size-8", variant === "error" && "items-center [&_svg:not([class*='size-'])]:size-4", variant === "picture" && "items-end", className), ...props }));
 }
 function EmptyPicture({ size, src }) {
     const [loaded, setLoaded] = useState(false);
+    const [waiting, setWaiting] = useState(false);
     const arriveOnLoad = useCallback((img) => {
         if (!img)
             return;
@@ -20,17 +25,18 @@ function EmptyPicture({ size, src }) {
             setLoaded(true);
             return;
         }
+        setWaiting(true);
         const show = () => setLoaded(true);
         img.addEventListener("load", show, { once: true });
         return () => img.removeEventListener("load", show);
     }, []);
-    return (_jsx(EmptyMedia, { className: size === "page" ? "h-44 w-60" : "h-36 w-50", variant: "picture", children: _jsx("img", { alt: "", className: "max-h-full max-w-full object-contain object-bottom select-none", "data-loaded": loaded ? "" : undefined, "data-size": size, "data-slot": "empty-picture", draggable: false, ref: arriveOnLoad, src: src }) }));
+    return (_jsx(EmptyMedia, { className: size === "page" ? "h-44 w-60" : "h-36 w-50", variant: "picture", children: _jsx("img", { alt: "", className: "max-h-full max-w-full object-contain object-bottom select-none", "data-loaded": loaded ? "" : undefined, "data-waiting": waiting ? "" : undefined, "data-size": size, "data-slot": "empty-picture", draggable: false, ref: arriveOnLoad, src: src }) }));
 }
 function EmptyTitle({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "empty-title", className: cn("text-heading-xs text-foreground", className), ...props }));
+    return (_jsx("div", { "data-slot": "empty-title", className: cn("text-body-md font-medium text-foreground", className), ...props }));
 }
 function EmptyDescription({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "empty-description", className: cn("max-w-[38ch] text-body-sm text-balance text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className), ...props }));
+    return (_jsx("div", { "data-slot": "empty-description", className: cn("max-w-85 text-body-sm text-balance text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className), ...props }));
 }
 function EmptyContent({ className, ...props }) {
     return (_jsx("div", { "data-slot": "empty-content", className: cn("flex min-w-0 flex-wrap items-center justify-center gap-2", className), ...props }));

package/dist/internal/field-frame.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import type { AccessibleName } from "../components/button.js";
+import type { FieldSize } from "./input-box.js";
+export type FieldAria = Pick<React.AriaAttributes, "aria-invalid" | "aria-describedby">;
+/**
+ * Every field has a name. A visible `label` is tied to its control by `id`; where the name is
+ * drawn elsewhere on the screen (a toolbar's search, a cell of a table), `aria-label` or
+ * `aria-labelledby` carries it. A field with none of the three does not compile.
+ */
+export type FieldName = {
+    label: string;
+    id: string;
+    "aria-label"?: undefined;
+    "aria-labelledby"?: undefined;
+} | (AccessibleName & {
+    label?: undefined;
+});
+type FieldControl = Pick<React.ComponentProps<"input">, "id" | "aria-invalid" | "aria-describedby">;
+/**
+ * The `label`, `description` and `error` props of a field: the `Field` parts drawn around the
+ * control, the description as one muted sentence under it. The control takes back the
+ * `aria-invalid` and `aria-describedby` that join it to the description and the error.
+ */
+export declare function FieldFrame({ label, description, error, size, control, children, }: {
+    label: string | undefined;
+    description?: string | undefined;
+    error: string | undefined;
+    size?: FieldSize;
+    control: FieldControl;
+    children: (aria: FieldAria) => React.ReactNode;
+}): string | number | bigint | boolean | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+export {};
+//# sourceMappingURL=field-frame.d.ts.map

package/dist/internal/field-frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-frame.d.ts","sourceRoot":"","sources":["../../src/internal/field-frame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,cAAc,GAAG,kBAAkB,CAAC,CAAC;AAExF;;;;GAIG;AACH,MAAM,MAAM,SAAS,GACjB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,SAAS,CAAC;IAAC,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAAE,GACtF,CAAC,cAAc,GAAG;IAAE,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC,CAAC;AAE7C,KAAK,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,IAAI,GAAG,cAAc,GAAG,kBAAkB,CAAC,CAAC;AAEpG;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,KAAK,EACL,IAAgB,EAChB,OAAO,EACP,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,YAAY,CAAC;IACtB,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;CAChD,mSAsBA"}

package/dist/internal/field-frame.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Field, FieldDescription, FieldError, FieldLabel } from "../components/field.js";
+/**
+ * The `label`, `description` and `error` props of a field: the `Field` parts drawn around the
+ * control, the description as one muted sentence under it. The control takes back the
+ * `aria-invalid` and `aria-describedby` that join it to the description and the error.
+ */
+export function FieldFrame({ label, description, error, size = "default", control, children, }) {
+    const descriptionId = React.useId();
+    const errorId = React.useId();
+    const invalid = error ? true : control["aria-invalid"];
+    const describedBy = [control["aria-describedby"], description && descriptionId, error && errorId]
+        .filter(Boolean)
+        .join(" ") || undefined;
+    const field = children({ "aria-invalid": invalid, "aria-describedby": describedBy });
+    if (!label && !description && !error)
+        return field;
+    return (_jsxs(Field, { "data-invalid": error ? true : undefined, children: [label ? _jsx(FieldLabel, { htmlFor: control.id, children: label }) : null, field, description ? _jsx(FieldDescription, { id: descriptionId, children: description }) : null, error ? (_jsx(FieldError, { id: errorId, size: size === "lg" ? "lg" : "default", children: error })) : null] }));
+}

package/dist/internal/final-focus.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Where focus goes when a dialog or sheet closes: back to its opener after every close but a pointer
+ * one, so a keyboard user or a close from the caller's own state (a save, a pick, Finish) keeps their
+ * place, and nowhere after a pointer close, so the opener does not keep a ring that reads as selected
+ * (as Vercel's dialogs do). Base UI leaves the close type empty when the caller closes through `open`.
+ */
+export declare function returnFocusUnlessPointer(closeType: string): boolean;
+//# sourceMappingURL=final-focus.d.ts.map

package/dist/internal/final-focus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"final-focus.d.ts","sourceRoot":"","sources":["../../src/internal/final-focus.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAEnE"}

package/dist/internal/final-focus.js

@@ -0,0 +1,10 @@
+const POINTER_CLOSES = new Set(["mouse", "touch", "pen"]);
+/**
+ * Where focus goes when a dialog or sheet closes: back to its opener after every close but a pointer
+ * one, so a keyboard user or a close from the caller's own state (a save, a pick, Finish) keeps their
+ * place, and nowhere after a pointer close, so the opener does not keep a ring that reads as selected
+ * (as Vercel's dialogs do). Base UI leaves the close type empty when the caller closes through `open`.
+ */
+export function returnFocusUnlessPointer(closeType) {
+    return !POINTER_CLOSES.has(closeType);
+}

package/dist/internal/footer-strip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"footer-strip.d.ts","sourceRoot":"","sources":["../../src/internal/footer-strip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,4BAeA;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"footer-strip.d.ts","sourceRoot":"","sources":["../../src/internal/footer-strip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,4BA6BA;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/internal/footer-strip.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CardFooter } from "../components/card.js";
+import { cn } from "../lib/utils.js";
 function FooterStrip({ hint, hintSlot, children, }) {
     if (!hint && !children) {
         return null;
     }
-    return (_jsxs(CardFooter, { children: [hint && (_jsx("div", { "data-slot": hintSlot, className: "min-w-0 flex-1 text-muted-foreground", children: hint })), children && _jsx("div", { className: "ml-auto flex flex-wrap items-center gap-3", children: children })] }));
+    const stacksWhenNarrow = hintSlot === "settings-section-hint";
+    return (_jsxs(CardFooter, { children: [hint && (_jsx("div", { "data-slot": hintSlot, className: cn("min-w-0 flex-1", stacksWhenNarrow && "max-sm:basis-full"), children: hint })), children && (_jsx("div", { className: cn("ml-auto flex flex-wrap items-center gap-3", stacksWhenNarrow && "max-sm:ml-0 max-sm:w-full max-sm:*:flex-1"), children: children }))] }));
 }
 export { FooterStrip };

package/dist/internal/form-submit.d.ts

@@ -2,15 +2,19 @@ import type { ComponentProps, ReactNode } from "react";
 /** The save of a drawer's, a dialog's or a row's form. */
 export type FormSubmit = {
     label: string;
-    /** The button's own word while the save runs. */
-    pendingLabel?: string;
-    /** The save is running: the button says so and holds, and the waiting line follows. */
-    pending?: boolean;
     /** Nothing to save yet, or a field still needs an answer. */
     disabled?: boolean;
     /** The id of the line that says why the save cannot run yet. */
     describedBy?: string;
-};
+} & ({
+    pending?: undefined;
+    pendingLabel?: string;
+} | {
+    /** The save is running: the button says so and holds, and the waiting line follows. */
+    pending: boolean;
+    /** The button's own word while the save runs: the label's -ing form, *Saving*. */
+    pendingLabel: string;
+});
 export type FormProps = Omit<ComponentProps<"form">, "children" | "className"> & {
     cancelLabel: string;
     submit: FormSubmit;

package/dist/internal/form-submit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-submit.d.ts","sourceRoot":"","sources":["../../src/internal/form-submit.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvD,0DAA0D;AAC1D,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC,GAAG;IAC/E,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,UAAU,CAAC;IACnB,iFAAiF;IACjF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,UAAU,CAAA;CAAE,+BAclE"}
+{"version":3,"file":"form-submit.d.ts","sourceRoot":"","sources":["../../src/internal/form-submit.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,0DAA0D;AAC1D,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,CACA;IAAE,OAAO,CAAC,EAAE,SAAS,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,GAC9C;IACE,uFAAuF;IACvF,OAAO,EAAE,OAAO,CAAC;IACjB,kFAAkF;IAClF,YAAY,EAAE,MAAM,CAAC;CACtB,CACJ,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC,GAAG;IAC/E,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,UAAU,CAAC;IACnB,iFAAiF;IACjF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAoCF,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,UAAU,CAAA;CAAE,+BAclE"}