@nadicodeai/ui 12.1.95 → 12.1.97

package/dist/components/theme-mode-switcher.js

@@ -12,6 +12,16 @@ const themeModeIcons = {
     dark: MoonIcon,
     system: MonitorIcon,
 };
+/**
+ * The three appearances side by side, each with its glyph and its name.
+ *
+ * @family Choices
+ * @when An Appearance setting on a settings page, where the choice has room to show its names.
+ * @instead Inside a menu, the same choice is ThemeModeMenu; a choice that is not the appearance is a RadioGroup or a ToggleGroup.
+ * @behaviour Exclusive: one mode is selected, and choosing one applies it at once with no Save. The order is System, Light, Dark everywhere.
+ * @words The setting's name, then each mode's name from the product's catalogue: "System", "Light", "Dark".
+ * @access A radio group named by `aria-label`; each mode is a radio with its name, moved through with the arrow keys.
+ */
 function ThemeModeSwitcher({ "aria-label": ariaLabel, className, compact = false, disabled, itemClassName, labels, onValueChange, renderItem, value, ...props }) {
     return (_jsx(RadioGroup, { "aria-label": ariaLabel, className: cn("max-w-full grid-cols-3", className), disabled: disabled, onValueChange: (nextMode) => {
             if (isThemeMode(nextMode)) {
@@ -25,8 +35,20 @@ function ThemeModeSwitcher({ "aria-label": ariaLabel, className, compact = false
         }) }));
 }
 export { ThemeModeSwitcher };
+/**
+ * The appearance as one row of a menu: its name and the current mode's glyph
+ * leading, the three modes as compact choices at its end.
+ *
+ * @family Menus
+ * @when The account menu's Theme row, in the Portal and in Nadia.
+ * @instead On a settings page the choice is ThemeModeSwitcher, with its names shown.
+ * @behaviour Choosing a mode applies it at once and keeps the menu open, so the result shows without reopening it. The order is System, Light, Dark.
+ * @words The row's name ("Theme") and each mode's name, read as the choice's accessible name and tooltip.
+ * @access A radio group inside the menu, named by the row's label; each mode is a menu radio item with its name.
+ */
 export function ThemeModeMenu({ label, labels, value, onValueChange, disabled, }) {
-    return (_jsx(MenuChoiceRow, { "data-slot": "theme-mode-menu", label: label, disabled: disabled, value: value, onValueChange: onValueChange, options: ["system", "light", "dark"].map((mode) => {
+    const CurrentModeIcon = themeModeIcons[value];
+    return (_jsx(MenuChoiceRow, { "data-slot": "theme-mode-menu", icon: _jsx(CurrentModeIcon, { "aria-hidden": "true" }), label: label, disabled: disabled, value: value, onValueChange: onValueChange, options: themeModes.map((mode) => {
             const Icon = themeModeIcons[mode];
             return {
                 value: mode,

package/dist/components/toggle-group.d.ts

@@ -3,6 +3,19 @@ import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
 import { type VariantProps } from "class-variance-authority";
 import { toggleVariants } from "./toggle.js";
+/**
+ * Pressed buttons that belong together.
+ *
+ * @family Choices
+ * @when Pressed buttons that belong together: a list or grid view, which details a chat shows.
+ * @instead A segmented control that sets a value, such as the theme or a period, is a `RadioGroup`
+ * drawn with the toggle classes, as `ThemeModeSwitcher` does. Panels of one object are `Tabs`.
+ * @behaviour Spacing 0 joins the members into one outline with one seam; spacing 2 keeps them 8 px
+ * apart. Single or multiple pressed. Arrow keys move between members; Space presses.
+ * @words Text members are short words of equal weight. Icon members always carry a name: *List*,
+ * *Grid*.
+ * @access `role="group"` with a name; each member a button with `aria-pressed`.
+ */
 declare function ToggleGroup({ className, variant, size, spacing, orientation, style, children, ...props }: ToggleGroupPrimitive.Props & VariantProps<typeof toggleVariants> & {
     spacing?: number;
     orientation?: "horizontal" | "vertical";

package/dist/components/toggle-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../src/components/toggle-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG7D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAcrD,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAW,EACX,WAA0B,EAC1B,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,KAAK,GAC3B,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,qBA0BF;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,qBAsB7D;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../src/components/toggle-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG7D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAcrD;;;;;;;;;;;;GAYG;AACH,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAW,EACX,WAA0B,EAC1B,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,KAAK,GAC3B,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,qBA2BF;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,qBAsB7D;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/toggle-group.js

@@ -11,8 +11,23 @@ const ToggleGroupContext = React.createContext({
     spacing: 2,
     orientation: "horizontal",
 });
+/**
+ * Pressed buttons that belong together.
+ *
+ * @family Choices
+ * @when Pressed buttons that belong together: a list or grid view, which details a chat shows.
+ * @instead A segmented control that sets a value, such as the theme or a period, is a `RadioGroup`
+ * drawn with the toggle classes, as `ThemeModeSwitcher` does. Panels of one object are `Tabs`.
+ * @behaviour Spacing 0 joins the members into one outline with one seam; spacing 2 keeps them 8 px
+ * apart. Single or multiple pressed. Arrow keys move between members; Space presses.
+ * @words Text members are short words of equal weight. Icon members always carry a name: *List*,
+ * *Grid*.
+ * @access `role="group"` with a name; each member a button with `aria-pressed`.
+ */
 function ToggleGroup({ className, variant, size, spacing = 2, orientation = "horizontal", style, children, ...props }) {
-    return (_jsx(ToggleGroupPrimitive, { "data-slot": "toggle-group", "data-variant": variant, "data-size": size, "data-spacing": spacing, "data-orientation": orientation, orientation: orientation, style: {
+    return (_jsx(ToggleGroupPrimitive, { "data-slot": "toggle-group", "data-variant": variant, "data-size": size, "data-spacing": spacing, "data-orientation": orientation, orientation: orientation, 
+        // SAFETY: CSSProperties lists only standard properties; React sets each `--` custom property key here through style.setProperty.
+        style: {
             ...style,
             "--gap": spacing,
         }, className: cn("group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-sm data-vertical:flex-col data-vertical:items-stretch", className), ...props, children: _jsx(ToggleGroupContext.Provider, { value: { variant, size, spacing, orientation }, children: children }) }));

package/dist/components/toggle.d.ts

@@ -4,6 +4,20 @@ declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * A button that stays pressed.
+ *
+ * @family Choices
+ * @when A button that stays pressed, where pressing is the action: pin a chat, mute a thread, show
+ * hidden rows in a toolbar.
+ * @instead A setting saved with its section is a `Switch`. Choosing one value of several is a
+ * `RadioGroup`, drawn segmented when it is short.
+ * @behaviour Space or Enter flips `aria-pressed`. Pressed takes the accent fill and weight 600; the
+ * label does not change. Hover is the muted fill. Disabled is 50%.
+ * @words The label is the action and stays the same in both states: *Pin*, never *Pinned* or
+ * *Unpin*.
+ * @access A `button` with `aria-pressed`. An icon-only toggle names what it does: *Pin chat*.
+ */
 declare function Toggle({ className, variant, size, ...props }: TogglePrimitive.Props & VariantProps<typeof toggleVariants>): import("react").JSX.Element;
 export { Toggle, toggleVariants };
 //# sourceMappingURL=toggle.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/components/toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,cAAc;;;8EAoBnB,CAAC;AAEF,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,+BAQ7D;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/components/toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,cAAc;;;8EAoBnB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,+BAQ7D;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/toggle.js

@@ -20,6 +20,20 @@ const toggleVariants = cva("group/toggle inline-flex min-h-touch-target min-w-to
         size: "default",
     },
 });
+/**
+ * A button that stays pressed.
+ *
+ * @family Choices
+ * @when A button that stays pressed, where pressing is the action: pin a chat, mute a thread, show
+ * hidden rows in a toolbar.
+ * @instead A setting saved with its section is a `Switch`. Choosing one value of several is a
+ * `RadioGroup`, drawn segmented when it is short.
+ * @behaviour Space or Enter flips `aria-pressed`. Pressed takes the accent fill and weight 600; the
+ * label does not change. Hover is the muted fill. Disabled is 50%.
+ * @words The label is the action and stays the same in both states: *Pin*, never *Pinned* or
+ * *Unpin*.
+ * @access A `button` with `aria-pressed`. An icon-only toggle names what it does: *Pin chat*.
+ */
 function Toggle({ className, variant = "default", size = "default", ...props }) {
     return (_jsx(TogglePrimitive, { "data-slot": "toggle", className: cn(toggleVariants({ variant, size, className })), ...props }));
 }

package/dist/components/tool-icon.d.ts

@@ -1,8 +1,18 @@
-import type * as React from "react";
-export interface ToolIconProps extends Omit<React.ComponentProps<"svg">, "name"> {
+import { type LucideProps } from "lucide-react";
+export interface ToolIconProps extends Omit<LucideProps, "name" | "ref"> {
+    /** The tool's kind as the conversation names it; an unknown one draws the question mark. */
     name: string;
-    size?: number | string;
 }
-declare function ToolIcon({ className, name, size, style, ...props }: ToolIconProps): React.JSX.Element;
+/**
+ * The mark of a tool an Agent used, at the head of its row in the conversation.
+ *
+ * @family Other
+ * @when A tool call's row in an Agent's conversation: running a command, reading or editing a file, searching, browsing.
+ * @instead A file in a list takes its `FileTypeIcon`; an app takes its brand mark in `AppMark`; an Agent is her `AgentOrb`.
+ * @behaviour Lucide's glyph for the tool's kind, 1.5 px line in the text colour, 14 px unless `size` says otherwise. An unknown kind draws the question mark, so a new tool still has a mark.
+ * @words None. The tool's title stands beside it.
+ * @access Hidden: the row's title is the name.
+ */
+declare function ToolIcon({ className, name, size, ...props }: ToolIconProps): import("react").JSX.Element;
 export { ToolIcon };
 //# sourceMappingURL=tool-icon.d.ts.map

package/dist/components/tool-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool-icon.d.ts","sourceRoot":"","sources":["../../src/components/tool-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AA6BpC,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAC9E,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AACD,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAiB,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,qBAevF;AACD,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"tool-icon.d.ts","sourceRoot":"","sources":["../../src/components/tool-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAUL,KAAK,WAAW,EAKjB,MAAM,cAAc,CAAC;AAmBtB,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,KAAK,CAAC;IACtE,4FAA4F;IAC5F,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;GASG;AACH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAiB,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BAahF;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/tool-icon.js

@@ -1,23 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { CircleQuestionMark, Clock, Eye, File as FileIcon, FileDiff, FileImage, Files, Globe, Pencil, Search, SquareTerminal, Wrench, } from "lucide-react";
 import { cn } from "../lib/utils.js";
-const FILE_PATH = "M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM152,88V44l44,44Z";
-const QUESTION_PATH = "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,168a12,12,0,1,1,12-12A12,12,0,0,1,128,192Zm8-48.72V144a8,8,0,0,1-16,0v-8a8,8,0,0,1,8-8c13.23,0,24-9,24-20s-10.77-20-24-20-24,9-24,20v4a8,8,0,0,1-16,0v-4c0-19.85,17.94-36,40-36s40,16.15,40,36C168,125.38,154.24,139.93,136,143.28Z";
-const TOOL_ICON_PATHS = {
-    diff: "M118.18,213.08A8,8,0,0,1,112,216H64a8,8,0,0,1,0-16H92.69L55,162.34a23.85,23.85,0,0,1-7-17V95a32,32,0,1,1,16,0v50.38A8,8,0,0,0,66.34,151L104,188.69V160a8,8,0,0,1,16,0v48a8,8,0,0,1-1.82,5.08ZM208,161V110.63a23.85,23.85,0,0,0-7-17L163.31,56H192a8,8,0,0,0,0-16H144a8,8,0,0,0-8,8V96a8,8,0,0,0,16,0V67.31L189.66,105a8,8,0,0,1,2.34,5.66V161a32,32,0,1,0,16,0Z",
-    edit: "M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM192,108.68,147.31,64l24-24L216,84.68Z",
-    eye: "M247.31,124.76C246.96,123.97,213,48,128,48S9,123.97,8.69,124.76a8,8,0,0,0,0,6.5C9,132.05,43,208,128,208s119-75.95,119.31-76.74a8,8,0,0,0,0-6.5ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z",
-    file: FILE_PATH,
-    "file-media": FILE_PATH,
-    files: FILE_PATH,
-    globe: "M128,24a104,104,0,1,0,104,104A104.12,104.12,0,0,0,128,24Zm0,19c10,11,19,27,26,45h-52c7-18,16-34,26-45Zm0,170c-10-11-19-27-26-45h52c-7,18-16,34-26,45Zm-30-61a141,141,0,0,1,0-48h60a141,141,0,0,1,0,48Z",
-    question: QUESTION_PATH,
-    search: "M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z",
-    terminal: "M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm-91,94.25-40,32a8,8,0,1,1-10-12.5L107.19,128,75,102.25a8,8,0,1,1,10-12.5l40,32a8,8,0,0,1,0,12.5ZM176,168H136a8,8,0,0,1,0-16h40a8,8,0,0,1,0,16Z",
-    tools: "M232,96a72,72,0,0,1-100.94,66L79,222.22a32,32,0,0,1-45.65-44.84L94,124.94a72.07,72.07,0,0,1,83.54-98.78,8,8,0,0,1,3.93,13.19L144,80l5.66,26.35L176,112l40.65-37.52a8,8,0,0,1,13.19,3.93A72.6,72.6,0,0,1,232,96Z",
-    watch: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm56,112H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48a8,8,0,0,1,0,16Z",
-};
-function ToolIcon({ className, name, size = "0.875rem", style, ...props }) {
-    const path = TOOL_ICON_PATHS[name] ?? QUESTION_PATH;
-    return (_jsx("svg", { "aria-hidden": "true", className: cn("shrink-0", className), "data-slot": "tool-icon", fill: "currentColor", style: { height: size, width: size, ...style }, viewBox: "0 0 256 256", ...props, children: _jsx("path", { d: path }) }));
+const TOOL_ICONS = Object.fromEntries([
+    ["diff", FileDiff],
+    ["edit", Pencil],
+    ["eye", Eye],
+    ["file", FileIcon],
+    ["file-media", FileImage],
+    ["files", Files],
+    ["globe", Globe],
+    ["question", CircleQuestionMark],
+    ["search", Search],
+    ["terminal", SquareTerminal],
+    ["tools", Wrench],
+    ["watch", Clock],
+]);
+/**
+ * The mark of a tool an Agent used, at the head of its row in the conversation.
+ *
+ * @family Other
+ * @when A tool call's row in an Agent's conversation: running a command, reading or editing a file, searching, browsing.
+ * @instead A file in a list takes its `FileTypeIcon`; an app takes its brand mark in `AppMark`; an Agent is her `AgentOrb`.
+ * @behaviour Lucide's glyph for the tool's kind, 1.5 px line in the text colour, 14 px unless `size` says otherwise. An unknown kind draws the question mark, so a new tool still has a mark.
+ * @words None. The tool's title stands beside it.
+ * @access Hidden: the row's title is the name.
+ */
+function ToolIcon({ className, name, size = "0.875rem", ...props }) {
+    const Icon = TOOL_ICONS[name] ?? CircleQuestionMark;
+    return (_jsx(Icon, { "aria-hidden": "true", className: cn("shrink-0", className), "data-slot": "tool-icon", "data-tool": name, size: size, strokeWidth: 1.5, ...props }));
 }
 export { ToolIcon };

package/dist/components/tooltip.d.ts

@@ -1,5 +1,20 @@
 import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
 declare function TooltipProvider({ delay, ...props }: TooltipPrimitive.Provider.Props): import("react").JSX.Element;
+/**
+ * A short, optional fact about its trigger.
+ *
+ * @family Feedback
+ * @when A short, optional fact the visible label cannot hold: why a value looks as it does, or an
+ * icon-only button's name, a shortcut only when one is bound.
+ * @instead For a preview with several facts use `HoverCard`. Help with a link uses a popover. A
+ * disabled command's reason is written under it, never only here.
+ * @behaviour Opens on hover and focus with no delay, above by default, 4 px off. Escape closes it.
+ * Never interactive; never the only home of a warning, a price or a reason.
+ * @words One phrase, sentence case, no full stop: *Resets on 1 November*. Never repeats the visible
+ * label (*Save* on Save).
+ * @access The trigger keeps its own name; the tooltip describes it. An icon-only button carries
+ * `aria-label` whether or not the tooltip is open.
+ */
 declare function Tooltip({ ...props }: TooltipPrimitive.Root.Props): import("react").JSX.Element;
 declare function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props): import("react").JSX.Element;
 declare function TooltipContent({ className, side, sideOffset, align, alignOffset, children, ...props }: TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): import("react").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAKrE,iBAAS,eAAe,CAAC,EAAE,KAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,QAAQ,CAAC,KAAK,+BAEhF;AAED,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,+BAEzD;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,+BAEnE;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,IAAY,EACZ,UAAc,EACd,KAAgB,EAChB,WAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAC7B,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAAC,+BAyBzF;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAKrE,iBAAS,eAAe,CAAC,EAAE,KAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,QAAQ,CAAC,KAAK,+BAEhF;AAED;;;;;;;;;;;;;;GAcG;AACH,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,+BAEzD;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,+BAEnE;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,IAAY,EACZ,UAAc,EACd,KAAgB,EAChB,WAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAC7B,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAAC,+BAyBzF;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/tooltip.js

@@ -5,6 +5,21 @@ import { anchoredOverlayMotion } from "../lib/motion.js";
 function TooltipProvider({ delay = 0, ...props }) {
     return _jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delay: delay, ...props });
 }
+/**
+ * A short, optional fact about its trigger.
+ *
+ * @family Feedback
+ * @when A short, optional fact the visible label cannot hold: why a value looks as it does, or an
+ * icon-only button's name, a shortcut only when one is bound.
+ * @instead For a preview with several facts use `HoverCard`. Help with a link uses a popover. A
+ * disabled command's reason is written under it, never only here.
+ * @behaviour Opens on hover and focus with no delay, above by default, 4 px off. Escape closes it.
+ * Never interactive; never the only home of a warning, a price or a reason.
+ * @words One phrase, sentence case, no full stop: *Resets on 1 November*. Never repeats the visible
+ * label (*Save* on Save).
+ * @access The trigger keeps its own name; the tooltip describes it. An icon-only button carries
+ * `aria-label` whether or not the tooltip is open.
+ */
 function Tooltip({ ...props }) {
     return _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
 }

package/dist/components/trend-badge.d.ts

@@ -9,13 +9,28 @@ type TrendDirection = "up" | "down" | "flat";
 type TrendTone = "positive" | "negative" | "neutral";
 /** Direction crossed with whether up is good here. A flat or neutral change takes no tone. */
 declare function trendTone(direction: TrendDirection, upIsGood?: boolean, neutral?: boolean): TrendTone;
+/**
+ * A change against a stated period, as an outline badge with its direction.
+ *
+ * @family Charts
+ * @when A change against a stated period: on a `KpiCard` top right, in a chart's summary, on a
+ * Trending row. A figure with no comparison shows no badge.
+ * @instead A level that crosses a threshold is the card's own tone; crossing it is a notification.
+ * Status is a `StatusBadge`, never a delta.
+ * @behaviour Direction crossed with whether up is good (`trendTone`) sets the icon's tone: success
+ * green or blocked red; flat or a neutral measure stays grey. The badge text stays ink.
+ * @words Signed value with a true minus and its unit (+12.4%, −€360), then *vs previous 30 days* or
+ * *vs August 2026*. Never bare signed text, colour alone or a triangle glyph.
+ * @access The icon is hidden and the direction is read as a word (*up*, *down*, *unchanged*) in the
+ * reader's language; tabular figures keep the digits aligned.
+ */
 declare function TrendBadge({ value, direction, tone, directionLabel, }: {
     /** The formatted change, e.g. "+12.5%". */
     value: React.ReactNode;
     direction: TrendDirection;
     tone: TrendTone;
     /** The direction in the reader's language, because an arrow alone is not a reading. */
-    directionLabel?: string;
+    directionLabel: string;
 }): React.JSX.Element;
 export { TrendBadge, trendTone };
 export type { TrendDirection, TrendTone };

package/dist/components/trend-badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"trend-badge.d.ts","sourceRoot":"","sources":["../../src/components/trend-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAKpC;;;;;GAKG;AAEH,KAAK,cAAc,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;AAC7C,KAAK,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AAqBrD,8FAA8F;AAC9F,iBAAS,SAAS,CAAC,SAAS,EAAE,cAAc,EAAE,QAAQ,UAAO,EAAE,OAAO,UAAQ,GAAG,SAAS,CAGzF;AAED,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,SAAS,EACT,IAAI,EACJ,cAAc,GACf,EAAE;IACD,2CAA2C;IAC3C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,EAAE,cAAc,CAAC;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,uFAAuF;IACvF,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,qBAeA;AAED,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC;AACjC,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"trend-badge.d.ts","sourceRoot":"","sources":["../../src/components/trend-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAKpC;;;;;GAKG;AAEH,KAAK,cAAc,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;AAC7C,KAAK,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AAcrD,8FAA8F;AAC9F,iBAAS,SAAS,CAAC,SAAS,EAAE,cAAc,EAAE,QAAQ,UAAO,EAAE,OAAO,UAAQ,GAAG,SAAS,CAGzF;AAED;;;;;;;;;;;;;;GAcG;AACH,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,SAAS,EACT,IAAI,EACJ,cAAc,GACf,EAAE;IACD,2CAA2C;IAC3C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,EAAE,cAAc,CAAC;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,uFAAuF;IACvF,cAAc,EAAE,MAAM,CAAC;CACxB,qBAeA;AAED,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC;AACjC,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/trend-badge.js

@@ -6,12 +6,6 @@ const TREND_ICONS = {
     down: TrendingDownIcon,
     flat: MinusIcon,
 };
-/** The fallback reading for a caller with no dictionary; a localized caller passes `directionLabel`. */
-const TREND_DIRECTION_TEXT = {
-    up: "up",
-    down: "down",
-    flat: "unchanged",
-};
 const TREND_TONE_CLASS = {
     positive: "text-(--nc-state-complete)",
     negative: "text-(--nc-state-blocked)",
@@ -23,8 +17,23 @@ function trendTone(direction, upIsGood = true, neutral = false) {
         return "neutral";
     return (direction === "up") === upIsGood ? "positive" : "negative";
 }
+/**
+ * A change against a stated period, as an outline badge with its direction.
+ *
+ * @family Charts
+ * @when A change against a stated period: on a `KpiCard` top right, in a chart's summary, on a
+ * Trending row. A figure with no comparison shows no badge.
+ * @instead A level that crosses a threshold is the card's own tone; crossing it is a notification.
+ * Status is a `StatusBadge`, never a delta.
+ * @behaviour Direction crossed with whether up is good (`trendTone`) sets the icon's tone: success
+ * green or blocked red; flat or a neutral measure stays grey. The badge text stays ink.
+ * @words Signed value with a true minus and its unit (+12.4%, −€360), then *vs previous 30 days* or
+ * *vs August 2026*. Never bare signed text, colour alone or a triangle glyph.
+ * @access The icon is hidden and the direction is read as a word (*up*, *down*, *unchanged*) in the
+ * reader's language; tabular figures keep the digits aligned.
+ */
 function TrendBadge({ value, direction, tone, directionLabel, }) {
     const Icon = TREND_ICONS[direction];
-    return (_jsxs(Badge, { "data-slot": "trend-badge", "data-direction": direction, "data-tone": tone, variant: "outline", className: "tabular-nums", children: [_jsx(Icon, { "aria-hidden": "true", className: TREND_TONE_CLASS[tone] }), _jsx("span", { className: "sr-only", children: directionLabel ?? TREND_DIRECTION_TEXT[direction] }), value] }));
+    return (_jsxs(Badge, { "data-slot": "trend-badge", "data-direction": direction, "data-tone": tone, variant: "outline", className: "tabular-nums", children: [_jsx(Icon, { "aria-hidden": "true", className: TREND_TONE_CLASS[tone] }), _jsx("span", { className: "sr-only", children: directionLabel }), value] }));
 }
 export { TrendBadge, trendTone };

package/dist/components/update-card.d.ts

@@ -0,0 +1,36 @@
+import { type PageCommand } from "./page-actions.js";
+export type UpdateCardProps = {
+    state: "available";
+    /** "Update available". */
+    title: string;
+    /** The version on offer: "Nadia 0.42.0". */
+    version: string;
+    /** "Update and restart", with its pending word while it runs. */
+    action: PageCommand;
+    /** The rail is too narrow for words: one icon button. */
+    narrow?: boolean;
+} | {
+    state: "updated";
+    /** "Nadia is up to date". */
+    title: string;
+    /** The version now running. */
+    version: string;
+    /** Closes the card: its label names the ghost close. */
+    dismiss: {
+        label: string;
+        onClick: () => void;
+    };
+    narrow?: boolean;
+};
+/**
+ * The update offer at the foot of a desktop app's sidebar, above the account.
+ *
+ * @family Feedback
+ * @when Nadia's and Alveare's sidebar foot, only while an update is on offer or has just been installed.
+ * @instead A failed update or a download that needs the person is a NoticeBanner; the Portal's way to get the app is its Downloads row.
+ * @behaviour Available: the title, the version and one full-width command that keeps its place and says its pending word while it runs. Updated: the title, the version and a close. Narrow, the card is one icon button whose tooltip shows the title and the version. Nothing else in the window offers the update.
+ * @words The title says what happened ("Update available"), the version names the product and its number ("Nadia 0.42.0"), and the command says its result ("Update and restart").
+ * @access The card is a region named by its title. The narrow button is named by its command and the version ("Update and restart: Nadia 0.42.0"), and the close carries its label; a running command is aria-busy.
+ */
+export declare function UpdateCard(props: UpdateCardProps): import("react").JSX.Element;
+//# sourceMappingURL=update-card.d.ts.map

package/dist/components/update-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"update-card.d.ts","sourceRoot":"","sources":["../../src/components/update-card.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAqB,KAAK,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGhF,MAAM,MAAM,eAAe,GACvB;IACE,KAAK,EAAE,WAAW,CAAC;IACnB,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,OAAO,EAAE,MAAM,CAAC;IAChB,iEAAiE;IACjE,MAAM,EAAE,WAAW,CAAC;IACpB,yDAAyD;IACzD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,GACD;IACE,KAAK,EAAE,SAAS,CAAC;IACjB,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEN;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,+BAoChD"}

package/dist/components/update-card.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDownToLine, CircleCheck, X } from "lucide-react";
+import { Button } from "./button.js";
+import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle, } from "./card.js";
+import { PageCommandButton } from "./page-actions.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+/**
+ * The update offer at the foot of a desktop app's sidebar, above the account.
+ *
+ * @family Feedback
+ * @when Nadia's and Alveare's sidebar foot, only while an update is on offer or has just been installed.
+ * @instead A failed update or a download that needs the person is a NoticeBanner; the Portal's way to get the app is its Downloads row.
+ * @behaviour Available: the title, the version and one full-width command that keeps its place and says its pending word while it runs. Updated: the title, the version and a close. Narrow, the card is one icon button whose tooltip shows the title and the version. Nothing else in the window offers the update.
+ * @words The title says what happened ("Update available"), the version names the product and its number ("Nadia 0.42.0"), and the command says its result ("Update and restart").
+ * @access The card is a region named by its title. The narrow button is named by its command and the version ("Update and restart: Nadia 0.42.0"), and the close carries its label; a running command is aria-busy.
+ */
+export function UpdateCard(props) {
+    if (props.narrow)
+        return _jsx(NarrowUpdate, { ...props });
+    return (_jsxs(Card, { "aria-label": props.title, className: "mx-1 mb-1", "data-state": props.state, render: _jsx("section", {}), size: "sm", surface: "outlined", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: props.title }), _jsx(CardDescription, { children: props.version }), props.state === "updated" ? (_jsx(CardAction, { children: _jsx(Button, { "aria-label": props.dismiss.label, onClick: props.dismiss.onClick, size: "icon-sm", type: "button", variant: "ghost", children: _jsx(X, { "aria-hidden": "true" }) }) })) : null] }), props.state === "available" ? (_jsx(CardContent, { className: "grid *:w-full", children: _jsx(PageCommandButton, { command: props.action, variant: "default" }) })) : null] }));
+}
+function NarrowUpdate(props) {
+    const button = props.state === "available" ? (_jsx(Button, { "aria-busy": props.action.pending || undefined, "aria-label": `${props.action.pending ? (props.action.pendingLabel ?? props.action.label) : props.action.label}: ${props.version}`, disabled: props.action.disabled || props.action.pending, size: "icon", variant: "ghost", ...(props.action.render
+            ? { render: props.action.render, nativeButton: false }
+            : { onClick: props.action.onClick, type: "button" }), children: _jsx(ArrowDownToLine, { "aria-hidden": "true" }) })) : (_jsx(Button, { "aria-label": `${props.dismiss.label}: ${props.title}`, onClick: props.dismiss.onClick, size: "icon", type: "button", variant: "ghost", children: _jsx(CircleCheck, { "aria-hidden": "true" }) }));
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: button }), _jsxs(TooltipContent, { side: "right", children: [props.title, ", ", props.version] })] }));
+}

package/dist/components/usage-meter.d.ts

@@ -1,4 +1,19 @@
 import * as React from "react";
+/**
+ * Consumption against an allowance in a dense spot.
+ *
+ * @family Data
+ * @when `UsageMeter`: consumption against an allowance in a dense spot, such as a run's tokens and
+ * cost.
+ * @instead A known amount against a real maximum with its label is `Progress`. An unknown wait is
+ * the waiting line, never a bar with an invented percentage. A single figure is a `KpiCard`.
+ * @behaviour The fill moves only when the reading changes, on `transition`; still under reduced
+ * motion. The tone is the product's threshold, never derived from the value. Past the maximum the
+ * bar fills and turns red.
+ * @words Print the work and its unit: *620 of 1,000*. The meter's fields are short and set in
+ * uppercase mono by the stylesheet, so they are written in sentence case.
+ * @access The meter's printed figures are the reading; its track is decorative.
+ */
 declare function UsageMeter({ className, fields, trailing, usage, children, ...props }: Omit<React.ComponentProps<"div">, "children"> & {
     fields?: string[];
     trailing?: string;

package/dist/components/usage-meter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usage-meter.d.ts","sourceRoot":"","sources":["../../src/components/usage-meter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,MAAW,EACX,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACjD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,qBAmCA;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"usage-meter.d.ts","sourceRoot":"","sources":["../../src/components/usage-meter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;;;;;;GAcG;AACH,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,MAAW,EACX,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACjD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,qBAqCA;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/usage-meter.js

@@ -1,8 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../lib/utils.js";
+/**
+ * Consumption against an allowance in a dense spot.
+ *
+ * @family Data
+ * @when `UsageMeter`: consumption against an allowance in a dense spot, such as a run's tokens and
+ * cost.
+ * @instead A known amount against a real maximum with its label is `Progress`. An unknown wait is
+ * the waiting line, never a bar with an invented percentage. A single figure is a `KpiCard`.
+ * @behaviour The fill moves only when the reading changes, on `transition`; still under reduced
+ * motion. The tone is the product's threshold, never derived from the value. Past the maximum the
+ * bar fills and turns red.
+ * @words Print the work and its unit: *620 of 1,000*. The meter's fields are short and set in
+ * uppercase mono by the stylesheet, so they are written in sentence case.
+ * @access The meter's printed figures are the reading; its track is decorative.
+ */
 function UsageMeter({ className, fields = [], trailing, usage, children, ...props }) {
     const hasMeta = fields.length > 0 || trailing != null || children != null;
-    return (_jsxs("div", { "data-slot": "usage-meter", className: cn("nc-usage-meter", className), ...props, children: [hasMeta && (_jsxs("div", { className: "nc-usage-meter-meta", children: [fields.map((field, index) => (_jsxs(React.Fragment, { children: [index > 0 && _jsx("span", { className: "nc-usage-meter-sep", children: "/" }), _jsx("span", { children: field })] }, index))), trailing != null && (_jsxs(_Fragment, { children: [_jsx("span", { className: "nc-usage-meter-spacer" }), _jsx("span", { children: trailing })] })), children != null && _jsx("span", { "data-slot": "usage-meter-slot", children: children })] })), usage != null && (_jsx("div", { className: "nc-usage-meter-track", children: _jsx("div", { className: "nc-usage-meter-fill", style: { "--nc-usage": typeof usage === "number" ? `${usage}%` : usage } }) }))] }));
+    return (_jsxs("div", { "data-slot": "usage-meter", className: cn("nc-usage-meter", className), ...props, children: [hasMeta && (_jsxs("div", { className: "nc-usage-meter-meta", children: [fields.map((field, index) => (_jsxs(React.Fragment, { children: [index > 0 && _jsx("span", { className: "nc-usage-meter-sep", children: "/" }), _jsx("span", { children: field })] }, index))), trailing != null && (_jsxs(_Fragment, { children: [_jsx("span", { className: "nc-usage-meter-spacer" }), _jsx("span", { children: trailing })] })), children != null && _jsx("span", { "data-slot": "usage-meter-slot", children: children })] })), usage != null && (_jsx("div", { className: "nc-usage-meter-track", children: _jsx("div", { className: "nc-usage-meter-fill", 
+                    // SAFETY: CSSProperties lists only standard properties; React sets each `--` custom property key here through style.setProperty.
+                    style: 
+                    // oxlint-disable-next-line anti-slop/no-runtime-typeof -- usage is our own number | string prop: a number is a percentage, a string a CSS length.
+                    { "--nc-usage": typeof usage === "number" ? `${usage}%` : usage } }) }))] }));
 }
 export { UsageMeter };

package/dist/components/waiting-line.d.ts

@@ -13,17 +13,20 @@ type WaitingLineProps = Omit<React.ComponentProps<"div">, "children"> & ({
     label: string;
 });
 /**
- * The one moving thing a system wait may show: a 2 px ink track with a 32%
- * segment crossing it linearly, after a second of waiting. Under reduced
- * motion the whole line breathes in opacity instead of travelling.
+ * The one moving thing a system wait may show: a 2 px ink line, after a second.
  *
- * The track takes its 2 px from the moment the wait starts and stays empty and
- * unannounced until that second is up, so the line arriving moves nothing
- * around it. The interface answers briefly: one thing moves, and only the one
- * the person is waiting for.
- *
- * An Agent's work is not a system wait: it shows that Agent's orb in its state
- * and a sentence saying what it is doing.
+ * @family Feedback
+ * @when A system wait the person asked for that runs past a second: a save, a connection, a
+ * download without a count.
+ * @instead Under a second the `PendingLabel` alone. A known amount is a progress line with a count.
+ * A page load is `Skeleton`. An Agent working is her orb and a sentence.
+ * @behaviour Takes its 2 px from the start and stays empty until 1 s, so its arrival moves nothing.
+ * No track colour; the segment is ink, never info blue, crossing at 32% width. Under reduced motion
+ * it breathes.
+ * @words None of its own. The control beside it carries the pending word; a standalone line takes a
+ * `label` naming the work: *Connecting Telegram*.
+ * @access With a label: `role="status"`, announced once after the second. `decorative` when the
+ * control beside it already says it. The segment is hidden.
  */
 declare function WaitingLine({ className, decorative, label, ...props }: WaitingLineProps): React.JSX.Element;
 export { WaitingLine, WAITING_LINE_DELAY_MS };

package/dist/components/waiting-line.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"waiting-line.d.ts","sourceRoot":"","sources":["../../src/components/waiting-line.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;GAIG;AACH,QAAA,MAAM,qBAAqB,OAAO,CAAC;AAEnC,KAAK,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GACnE,CAAC;IAAE,UAAU,EAAE,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG;IAAE,UAAU,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAEhF;;;;;;;;;;;;GAYG;AACH,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,UAAkB,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,qBA0BxF;AAED,OAAO,EAAE,WAAW,EAAE,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"waiting-line.d.ts","sourceRoot":"","sources":["../../src/components/waiting-line.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;GAIG;AACH,QAAA,MAAM,qBAAqB,OAAO,CAAC;AAEnC,KAAK,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GACnE,CAAC;IAAE,UAAU,EAAE,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG;IAAE,UAAU,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAEhF;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,UAAkB,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,qBA0BxF;AAED,OAAO,EAAE,WAAW,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/components/waiting-line.js

@@ -9,17 +9,20 @@ import { cn } from "../lib/utils.js";
  */
 const WAITING_LINE_DELAY_MS = 1000;
 /**
- * The one moving thing a system wait may show: a 2 px ink track with a 32%
- * segment crossing it linearly, after a second of waiting. Under reduced
- * motion the whole line breathes in opacity instead of travelling.
+ * The one moving thing a system wait may show: a 2 px ink line, after a second.
  *
- * The track takes its 2 px from the moment the wait starts and stays empty and
- * unannounced until that second is up, so the line arriving moves nothing
- * around it. The interface answers briefly: one thing moves, and only the one
- * the person is waiting for.
- *
- * An Agent's work is not a system wait: it shows that Agent's orb in its state
- * and a sentence saying what it is doing.
+ * @family Feedback
+ * @when A system wait the person asked for that runs past a second: a save, a connection, a
+ * download without a count.
+ * @instead Under a second the `PendingLabel` alone. A known amount is a progress line with a count.
+ * A page load is `Skeleton`. An Agent working is her orb and a sentence.
+ * @behaviour Takes its 2 px from the start and stays empty until 1 s, so its arrival moves nothing.
+ * No track colour; the segment is ink, never info blue, crossing at 32% width. Under reduced motion
+ * it breathes.
+ * @words None of its own. The control beside it carries the pending word; a standalone line takes a
+ * `label` naming the work: *Connecting Telegram*.
+ * @access With a label: `role="status"`, announced once after the second. `decorative` when the
+ * control beside it already says it. The segment is hidden.
  */
 function WaitingLine({ className, decorative = false, label, ...props }) {
     const [elapsed, setElapsed] = React.useState(false);