@nadicodeai/ui 12.1.95 → 12.1.97

package/dist/components/model-identity.d.ts

@@ -18,11 +18,24 @@ export type ModelIdentityProps = Omit<ComponentPropsWithoutRef<"span">, "childre
 };
 /**
  * A model as every surface reads it: the maker's mark, one name, the muted
- * maker. Callers pass the id and nothing else about its shape — the split, the
- * name form and the mark all belong here, so a ranked list, a routing table and
- * a settings row cannot drift into three readings of the same model. A product
+ * maker.
+ *
+ * Callers pass the id and nothing else about its shape — the split, the name
+ * form and the mark all belong here, so a ranked list, a routing table and a
+ * settings row cannot drift into three readings of the same model. A product
  * whose runtime names its models itself, as Hermes does in Nadia, passes that
  * `name` so a model reads the same in its settings as in its chat.
+ *
+ * @family Status
+ * @when Any place a model is shown: a ranked list, a routing table, a settings row, an option in
+ * `ModelSelect`.
+ * @instead A maker's mark with a name already in hand is `ModelMark`. Choosing a model is
+ * `ModelSelect`.
+ * @behaviour The caller passes the id and nothing else about its shape: the split, the name form
+ * and the mark all belong here. An id with no maker prefix falls back to the neutral tile.
+ * @words The maker's own spelling when the table has it (*Claude Opus 5*), else the id without its
+ * maker prefix; a product whose runtime names models passes that `name`.
+ * @access The name is text; the mark beside it is decorative.
  */
 export declare function ModelIdentity({ model, name, markSize, ...props }: ModelIdentityProps): import("react").JSX.Element;
 //# sourceMappingURL=model-identity.d.ts.map

package/dist/components/model-identity.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"model-identity.d.ts","sourceRoot":"","sources":["../../src/components/model-identity.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAItD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAGjD;AAUD;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAKtD;AAED,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,wBAAwB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACpF,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,+BASpF"}
+{"version":3,"file":"model-identity.d.ts","sourceRoot":"","sources":["../../src/components/model-identity.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAItD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAGjD;AAUD;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAKtD;AAED,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,wBAAwB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACpF,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,+BASpF"}

package/dist/components/model-identity.js

@@ -30,11 +30,24 @@ export function modelDisplayName(model) {
 }
 /**
  * A model as every surface reads it: the maker's mark, one name, the muted
- * maker. Callers pass the id and nothing else about its shape — the split, the
- * name form and the mark all belong here, so a ranked list, a routing table and
- * a settings row cannot drift into three readings of the same model. A product
+ * maker.
+ *
+ * Callers pass the id and nothing else about its shape — the split, the name
+ * form and the mark all belong here, so a ranked list, a routing table and a
+ * settings row cannot drift into three readings of the same model. A product
  * whose runtime names its models itself, as Hermes does in Nadia, passes that
  * `name` so a model reads the same in its settings as in its chat.
+ *
+ * @family Status
+ * @when Any place a model is shown: a ranked list, a routing table, a settings row, an option in
+ * `ModelSelect`.
+ * @instead A maker's mark with a name already in hand is `ModelMark`. Choosing a model is
+ * `ModelSelect`.
+ * @behaviour The caller passes the id and nothing else about its shape: the split, the name form
+ * and the mark all belong here. An id with no maker prefix falls back to the neutral tile.
+ * @words The maker's own spelling when the table has it (*Claude Opus 5*), else the id without its
+ * maker prefix; a product whose runtime names models passes that `name`.
+ * @access The name is text; the mark beside it is decorative.
  */
 export function ModelIdentity({ model, name, markSize, ...props }) {
     return (_jsx(ModelMark, { author: modelAuthor(model), name: name ?? modelDisplayName(model), ...(markSize === undefined ? {} : { size: markSize }), ...props }));

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

@@ -15,8 +15,21 @@ type ModelMarkProps = Omit<React.ComponentProps<"span">, "children"> & {
 };
 /**
  * A model's maker as LobeHub draws it, in the tile every mark shares, with the
- * model's name beside it when one is given. A maker LobeHub has no mark for
- * keeps its initials and is named in words.
+ * model's name beside it when one is given.
+ *
+ * A maker LobeHub has no mark for keeps its initials and is named in words.
+ *
+ * @family Status
+ * @when A maker's mark beside a name the caller already has, such as a usage row reporting an
+ * author slug.
+ * @instead A model read from its id is `ModelIdentity`, which splits the id and names it. An app is
+ * `AppMark`. A platform is `PlatformMark`.
+ * @behaviour Looks the maker up in LobeHub's set by its slug, through the one table of names that
+ * differ. While the mark loads the tile keeps its size; a maker with no mark keeps its initials.
+ * The glyph is 62% of the tile, 24 px by default.
+ * @words The model's name as the product reads it; the maker is never spelled by this component.
+ * @access Decorative beside the name. A bare mark takes `label` and becomes `role="img"`; with no
+ * name it stays hidden.
  */
 declare function ModelMark({ author, name, size, label, className, ...props }: ModelMarkProps): React.JSX.Element;
 export { ModelMark };

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

@@ -1 +1 @@
-{"version":3,"file":"model-mark.d.ts","sourceRoot":"","sources":["../../src/components/model-mark.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqG/B,KAAK,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACrE,6EAA6E;IAC7E,MAAM,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4FAA4F;IAC5F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA+DF;;;;GAIG;AACH,iBAAS,SAAS,CAAC,EACjB,MAAM,EACN,IAAI,EACJ,IAAsB,EACtB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,qBAsChB;AAED,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"model-mark.d.ts","sourceRoot":"","sources":["../../src/components/model-mark.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqG/B,KAAK,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACrE,6EAA6E;IAC7E,MAAM,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4FAA4F;IAC5F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA+DF;;;;;;;;;;;;;;;;;GAiBG;AACH,iBAAS,SAAS,CAAC,EACjB,MAAM,EACN,IAAI,EACJ,IAAsB,EACtB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,qBAsChB;AAED,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/model-mark.js

@@ -5,26 +5,26 @@ import { cn } from "../lib/utils.js";
  * The one table of names: an OpenRouter author slug whose maker LobeHub's icon
  * set files under another name. Every other author is looked up by its slug.
  */
-const LOBEHUB_NAMES = {
-    "aion-labs": "aionlabs",
-    amazon: "nova",
-    anthropic: "claude",
-    "arcee-ai": "arcee",
-    "bytedance-seed": "bytedance",
-    cognitivecomputations: "dolphin",
-    "dots-studio": "dotsstudio",
-    google: "gemini",
-    "ibm-granite": "ibm",
-    "inference-net": "inference",
-    meituan: "longcat",
-    "meta-llama": "meta",
-    mistralai: "mistral",
-    moonshotai: "moonshot",
-    rekaai: "reka",
-    "x-ai": "grok",
-    xiaomi: "xiaomimimo",
-    "z-ai": "zai",
-};
+const LOBEHUB_NAMES = new Map([
+    ["aion-labs", "aionlabs"],
+    ["amazon", "nova"],
+    ["anthropic", "claude"],
+    ["arcee-ai", "arcee"],
+    ["bytedance-seed", "bytedance"],
+    ["cognitivecomputations", "dolphin"],
+    ["dots-studio", "dotsstudio"],
+    ["google", "gemini"],
+    ["ibm-granite", "ibm"],
+    ["inference-net", "inference"],
+    ["meituan", "longcat"],
+    ["meta-llama", "meta"],
+    ["mistralai", "mistral"],
+    ["moonshotai", "moonshot"],
+    ["rekaai", "reka"],
+    ["x-ai", "grok"],
+    ["xiaomi", "xiaomimimo"],
+    ["z-ai", "zai"],
+]);
 /** The shape of every file name in LobeHub's set, without its variant suffix. */
 const LOBEHUB_NAME = /^[a-z0-9]+$/;
 const MODEL_MARK_SIZE = 24;
@@ -34,7 +34,7 @@ function normalizedAuthor(author) {
     return author.trim().toLowerCase().replace(/^~+/, "");
 }
 function lobehubName(slug) {
-    const name = Object.hasOwn(LOBEHUB_NAMES, slug) ? LOBEHUB_NAMES[slug] : slug;
+    const name = LOBEHUB_NAMES.get(slug) ?? slug;
     return name && LOBEHUB_NAME.test(name) ? name : undefined;
 }
 function authorInitials(author) {
@@ -96,8 +96,21 @@ function LoadedReading({ mark, ...reading }) {
 }
 /**
  * A model's maker as LobeHub draws it, in the tile every mark shares, with the
- * model's name beside it when one is given. A maker LobeHub has no mark for
- * keeps its initials and is named in words.
+ * model's name beside it when one is given.
+ *
+ * A maker LobeHub has no mark for keeps its initials and is named in words.
+ *
+ * @family Status
+ * @when A maker's mark beside a name the caller already has, such as a usage row reporting an
+ * author slug.
+ * @instead A model read from its id is `ModelIdentity`, which splits the id and names it. An app is
+ * `AppMark`. A platform is `PlatformMark`.
+ * @behaviour Looks the maker up in LobeHub's set by its slug, through the one table of names that
+ * differ. While the mark loads the tile keeps its size; a maker with no mark keeps its initials.
+ * The glyph is 62% of the tile, 24 px by default.
+ * @words The model's name as the product reads it; the maker is never spelled by this component.
+ * @access Decorative beside the name. A bare mark takes `label` and becomes `role="img"`; with no
+ * name it stays hidden.
  */
 function ModelMark({ author, name, size = MODEL_MARK_SIZE, label, className, ...props }) {
     const slug = normalizedAuthor(author);

package/dist/components/nadia-presence.d.ts

@@ -12,11 +12,17 @@ export type NadiaPresenceProps = {
 /** The arrival curve: a trace at the start, not a ribbon already half-built. */
 export declare function arrivalOpacity(reveal: number): number;
 /**
- * Nadia at an entry screen.
+ * Nadia at an entry screen: her ribbon, arriving through the picture behind her.
  *
- * `reveal` drives one opacity, so the value a Customer sees is the value
- * assistive technology is told. The ribbon itself carries the celebration at
- * `state="ready"`, so the screen spends no colour of its own on the moment.
+ * @family Other
+ * @when Nadia's entry, sign-in and update screens, standing in the middle of `EntryScene`.
+ * @instead Nadia anywhere else is her `AgentOrb`. A system wait is the waiting line.
+ * @behaviour `reveal` drives one opacity from a trace to whole; each presence state maps to her
+ * orb's state, so a person sees whether she is working, waiting, finished or stopped. 160 px unless
+ * the scene sets its size.
+ * @words The label names the arrival: *Nadia is getting ready*.
+ * @access A hidden `progressbar` named by `label` carries the same value the person sees; the
+ * ribbon is decorative.
  */
 export declare function NadiaPresence({ className, label, reveal, state, motionKey, }: NadiaPresenceProps): import("react").JSX.Element;
 //# sourceMappingURL=nadia-presence.d.ts.map

package/dist/components/nadia-presence.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nadia-presence.d.ts","sourceRoot":"","sources":["../../src/components/nadia-presence.tsx"],"names":[],"mappings":"AAsBA,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAYlG,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,aAAa,CAAC;IACrB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAIF,gFAAgF;AAChF,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAErD;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,KAAK,EACL,MAAM,EACN,KAAK,EACL,SAAa,GACd,EAAE,kBAAkB,+BAgCpB"}
+{"version":3,"file":"nadia-presence.d.ts","sourceRoot":"","sources":["../../src/components/nadia-presence.tsx"],"names":[],"mappings":"AAsBA,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAYlG,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,aAAa,CAAC;IACrB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAIF,gFAAgF;AAChF,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAErD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,KAAK,EACL,MAAM,EACN,KAAK,EACL,SAAa,GACd,EAAE,kBAAkB,+BAgCpB"}

package/dist/components/nadia-presence.js

@@ -33,11 +33,17 @@ export function arrivalOpacity(reveal) {
     return ARRIVAL_FLOOR + (1 - ARRIVAL_FLOOR) * clampUnit(reveal) ** ARRIVAL_CURVE;
 }
 /**
- * Nadia at an entry screen.
+ * Nadia at an entry screen: her ribbon, arriving through the picture behind her.
  *
- * `reveal` drives one opacity, so the value a Customer sees is the value
- * assistive technology is told. The ribbon itself carries the celebration at
- * `state="ready"`, so the screen spends no colour of its own on the moment.
+ * @family Other
+ * @when Nadia's entry, sign-in and update screens, standing in the middle of `EntryScene`.
+ * @instead Nadia anywhere else is her `AgentOrb`. A system wait is the waiting line.
+ * @behaviour `reveal` drives one opacity from a trace to whole; each presence state maps to her
+ * orb's state, so a person sees whether she is working, waiting, finished or stopped. 160 px unless
+ * the scene sets its size.
+ * @words The label names the arrival: *Nadia is getting ready*.
+ * @access A hidden `progressbar` named by `label` carries the same value the person sees; the
+ * ribbon is decorative.
  */
 export function NadiaPresence({ className, label, reveal, state, motionKey = 0, }) {
     const value = clampUnit(reveal);

package/dist/components/native-select.d.ts

@@ -2,6 +2,22 @@ import * as React from "react";
 type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
     size?: "sm" | "default";
 };
+/**
+ * The platform's own select, drawn as our input box.
+ *
+ * @family Inputs
+ * @when A long fixed list inside a native form, where the platform's own picker serves best: a time
+ * zone, a country.
+ * @instead Two or three options are radios or a segmented control. Up to about ten, drawn in our
+ * style, is `Select`. A list people type into is `Combobox`.
+ * @behaviour Same box as `Input`, the chevron 10 px from the edge in the muted grey. It opens the
+ * system's list, with native keyboard and typing. As an uncontrolled field it keeps a saved value
+ * instead of snapping back to the page's first default.
+ * @words The label names the thing chosen (*Time zone*). A placeholder option is distinct from a
+ * real one and never preselected as if chosen.
+ * @access A real `select` with a visible label; option groups are `optgroup`. The chevron is
+ * decorative.
+ */
 declare function NativeSelect({ className, size, ref, ...props }: NativeSelectProps): React.JSX.Element;
 declare function NativeSelectOption({ className, ...props }: React.ComponentProps<"option">): React.JSX.Element;
 declare function NativeSelectOptGroup({ className, ...props }: React.ComponentProps<"optgroup">): React.JSX.Element;

package/dist/components/native-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"native-select.d.ts","sourceRoot":"","sources":["../../src/components/native-select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,KAAK,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG;IACtE,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;CACzB,CAAC;AAEF,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,IAAgB,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,qBA4DtF;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,qBAQlF;AAED,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,qBAQtF;AAED,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"native-select.d.ts","sourceRoot":"","sources":["../../src/components/native-select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,KAAK,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG;IACtE,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,IAAgB,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,qBAiEtF;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,qBAQlF;AAED,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,qBAQtF;AAED,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/native-select.js

@@ -3,17 +3,37 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../lib/utils.js";
 import { ChevronDownIcon } from "lucide-react";
+/**
+ * The platform's own select, drawn as our input box.
+ *
+ * @family Inputs
+ * @when A long fixed list inside a native form, where the platform's own picker serves best: a time
+ * zone, a country.
+ * @instead Two or three options are radios or a segmented control. Up to about ten, drawn in our
+ * style, is `Select`. A list people type into is `Combobox`.
+ * @behaviour Same box as `Input`, the chevron 10 px from the edge in the muted grey. It opens the
+ * system's list, with native keyboard and typing. As an uncontrolled field it keeps a saved value
+ * instead of snapping back to the page's first default.
+ * @words The label names the thing chosen (*Time zone*). A placeholder option is distinct from a
+ * real one and never preselected as if chosen.
+ * @access A real `select` with a visible label; option groups are `optgroup`. The chevron is
+ * decorative.
+ */
 function NativeSelect({ className, size = "default", ref, ...props }) {
     const select = React.useRef(null);
     const setRef = React.useCallback((node) => {
         select.current = node;
+        // oxlint-disable-next-line anti-slop/no-runtime-typeof -- React.Ref is a callback | RefObject | null union and a callback ref may return a cleanup; only typeof tells them apart.
         const cleanup = typeof ref === "function" ? ref(node) : undefined;
+        // oxlint-disable-next-line anti-slop/no-runtime-typeof -- React.Ref is a callback | RefObject | null union and a callback ref may return a cleanup; only typeof tells them apart.
         if (ref && typeof ref !== "function")
             ref.current = node;
         return () => {
             select.current = null;
+            // oxlint-disable-next-line anti-slop/no-runtime-typeof -- React.Ref is a callback | RefObject | null union and a callback ref may return a cleanup; only typeof tells them apart.
             if (typeof cleanup === "function")
                 cleanup();
+            // oxlint-disable-next-line anti-slop/no-runtime-typeof -- React.Ref is a callback | RefObject | null union and a callback ref may return a cleanup; only typeof tells them apart.
             else if (typeof ref === "function")
                 ref(null);
             else if (ref)
@@ -34,6 +54,7 @@ function NativeSelect({ className, size = "default", ref, ...props }) {
         const options = [...node.options];
         const shown = options.flatMap((option) => (option.selected ? [option.value] : []));
         const stillShowsOldDefault = JSON.stringify(shown) === appliedDefault.current;
+        // SAFETY: defaultKey is JSON.stringify of an array of String() values, built above, so it parses back to a string[].
         const wanted = new Set(JSON.parse(defaultKey));
         for (const option of options)
             option.defaultSelected = wanted.has(option.value);

package/dist/components/navigation-menu.d.ts

@@ -1,4 +1,18 @@
 import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
+/**
+ * A website header's top-level links, some opening a panel of links.
+ *
+ * @family Navigation
+ * @when The website's header: a few top-level destinations, where one may open a panel of related
+ * pages.
+ * @instead A product's navigation is its `Sidebar`. Commands are a menu; sibling views are tabs.
+ * @behaviour Opens on hover and on click; one panel at a time, positioned under its trigger. Escape
+ * closes it and returns focus.
+ * @words Nouns, one or two words, sentence case. A panel's links name their page and may carry one
+ * short line.
+ * @access A labelled `nav`; triggers expose `aria-expanded`; links are real anchors with
+ * `aria-current="page"` on the current one.
+ */
 declare function NavigationMenu({ align, className, children, ...props }: NavigationMenuPrimitive.Root.Props & Pick<NavigationMenuPrimitive.Positioner.Props, "align">): import("react").JSX.Element;
 declare function NavigationMenuList({ className, ...props }: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>): import("react").JSX.Element;
 declare function NavigationMenuItem({ className, ...props }: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>): import("react").JSX.Element;

package/dist/components/navigation-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-menu.d.ts","sourceRoot":"","sources":["../../src/components/navigation-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,IAAI,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AAM3F,iBAAS,cAAc,CAAC,EACtB,KAAe,EACf,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,uBAAuB,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,uBAAuB,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,CAAC,+BAc9F;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,qBAAqB,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,+BAQlE;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,qBAAqB,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,+BAQlE;AAED,QAAA,MAAM,0BAA0B,oFAE/B,CAAC;AAEF,iBAAS,qBAAqB,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,uBAAuB,CAAC,OAAO,CAAC,KAAK,+BAcvC;AAED,iBAAS,qBAAqB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,CAAC,OAAO,CAAC,KAAK,+BAW5F;AAED,iBAAS,wBAAwB,CAAC,EAChC,SAAS,EACT,IAAe,EACf,UAAc,EACd,KAAe,EACf,WAAe,EACf,GAAG,KAAK,EACT,EAAE,uBAAuB,CAAC,UAAU,CAAC,KAAK,+BAoB1C;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,CAAC,IAAI,CAAC,KAAK,+BAWtF;AAED,iBAAS,uBAAuB,CAAC,EAC/B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,qBAAqB,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,+BAWlE;AAED,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,uBAAuB,EACvB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,0BAA0B,EAC1B,wBAAwB,GACzB,CAAC"}
+{"version":3,"file":"navigation-menu.d.ts","sourceRoot":"","sources":["../../src/components/navigation-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,IAAI,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AAM3F;;;;;;;;;;;;;GAaG;AACH,iBAAS,cAAc,CAAC,EACtB,KAAe,EACf,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,uBAAuB,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,uBAAuB,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,CAAC,+BAc9F;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,qBAAqB,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,+BAQlE;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,qBAAqB,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,+BAQlE;AAED,QAAA,MAAM,0BAA0B,oFAE/B,CAAC;AAEF,iBAAS,qBAAqB,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,uBAAuB,CAAC,OAAO,CAAC,KAAK,+BAcvC;AAED,iBAAS,qBAAqB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,CAAC,OAAO,CAAC,KAAK,+BAW5F;AAED,iBAAS,wBAAwB,CAAC,EAChC,SAAS,EACT,IAAe,EACf,UAAc,EACd,KAAe,EACf,WAAe,EACf,GAAG,KAAK,EACT,EAAE,uBAAuB,CAAC,UAAU,CAAC,KAAK,+BAoB1C;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,CAAC,IAAI,CAAC,KAAK,+BAWtF;AAED,iBAAS,uBAAuB,CAAC,EAC/B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,qBAAqB,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,+BAWlE;AAED,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,uBAAuB,EACvB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,0BAA0B,EAC1B,wBAAwB,GACzB,CAAC"}

package/dist/components/navigation-menu.js

@@ -3,6 +3,20 @@ import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/naviga
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils.js";
 import { ChevronDownIcon } from "lucide-react";
+/**
+ * A website header's top-level links, some opening a panel of links.
+ *
+ * @family Navigation
+ * @when The website's header: a few top-level destinations, where one may open a panel of related
+ * pages.
+ * @instead A product's navigation is its `Sidebar`. Commands are a menu; sibling views are tabs.
+ * @behaviour Opens on hover and on click; one panel at a time, positioned under its trigger. Escape
+ * closes it and returns focus.
+ * @words Nouns, one or two words, sentence case. A panel's links name their page and may carry one
+ * short line.
+ * @access A labelled `nav`; triggers expose `aria-expanded`; links are real anchors with
+ * `aria-current="page"` on the current one.
+ */
 function NavigationMenu({ align = "start", className, children, ...props }) {
     return (_jsxs(NavigationMenuPrimitive.Root, { "data-slot": "navigation-menu", className: cn("group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", className), ...props, children: [children, _jsx(NavigationMenuPositioner, { align: align })] }));
 }

package/dist/components/notice-banner.d.ts

@@ -2,7 +2,8 @@ import type { ComponentProps, ReactElement, ReactNode } from "react";
 export type NoticeBannerTone = "neutral" | "info" | "warning" | "destructive";
 export type NoticeBannerLiveRegion = "off" | "polite";
 export type NoticeBannerProps = {
-    action?: ReactElement;
+    /** The fix the page offers, as a button or a link. Required: a condition is shown with its fix. */
+    action: ReactElement;
     className?: string;
     description?: ReactNode;
     detail?: ReactNode;
@@ -11,8 +12,14 @@ export type NoticeBannerProps = {
     tone: NoticeBannerTone;
 } & Omit<ComponentProps<"div">, "children" | "title">;
 /**
- * Non-blocking operational, stale-data, replacement, and read-only guidance, and
- * a section that cannot be shown.
+ * A condition of the whole page, the account or the service, with its fix.
+ *
+ * @family Feedback
+ * @when A condition of the whole page, the account or the service that the page itself can resolve, with that resolving action on the banner. One at a time, above the page's content, under its title.
+ * @instead For one section use `MessageNotice placement="section"`. For a measured level use a `KpiCard` with its tone; crossing a threshold is a notification in the inbox, not a banner.
+ * @behaviour Tone `neutral` (the plain card fill), `info`, `warning`, `destructive`: a soft ground, deep text, the 1 px line edge, 6 px corners; neutral and info take the Info mark, warning and destructive the TriangleAlert. No close button on an unresolved condition. No action, no banner: `action` is required.
+ * @words Title names the condition, description what it stops, the action the fix as verb and noun: "Open Slack settings", "Sign in". Sentence case, no "Please". The words come from the product's catalogue code.
+ * @access `liveRegion="polite"` gives `role="status"`, announced once when it appears; `"off"` gives `role="note"` for one already there at load. The mark is hidden.
  */
 export declare function NoticeBanner({ action, className, description, detail, liveRegion, title, tone, ...props }: NoticeBannerProps): import("react").JSX.Element;
 //# sourceMappingURL=notice-banner.d.ts.map

package/dist/components/notice-banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notice-banner.d.ts","sourceRoot":"","sources":["../../src/components/notice-banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrE,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,CAAC;AAC9E,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEtD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,EAAE,gBAAgB,CAAC;CACxB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,CAAC;AAEtD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,SAAS,EACT,WAAW,EACX,MAAM,EACN,UAAU,EACV,KAAK,EACL,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAyBnB"}
+{"version":3,"file":"notice-banner.d.ts","sourceRoot":"","sources":["../../src/components/notice-banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrE,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,CAAC;AAC9E,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEtD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,mGAAmG;IACnG,MAAM,EAAE,YAAY,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,EAAE,gBAAgB,CAAC;CACxB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,CAAC;AAEtD;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,SAAS,EACT,WAAW,EACX,MAAM,EACN,UAAU,EACV,KAAK,EACL,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAyBnB"}

package/dist/components/notice-banner.js

@@ -2,11 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Info, TriangleAlert } from "lucide-react";
 import { Alert, AlertAction, AlertDescription, AlertTitle } from "./alert.js";
 /**
- * Non-blocking operational, stale-data, replacement, and read-only guidance, and
- * a section that cannot be shown.
+ * A condition of the whole page, the account or the service, with its fix.
+ *
+ * @family Feedback
+ * @when A condition of the whole page, the account or the service that the page itself can resolve, with that resolving action on the banner. One at a time, above the page's content, under its title.
+ * @instead For one section use `MessageNotice placement="section"`. For a measured level use a `KpiCard` with its tone; crossing a threshold is a notification in the inbox, not a banner.
+ * @behaviour Tone `neutral` (the plain card fill), `info`, `warning`, `destructive`: a soft ground, deep text, the 1 px line edge, 6 px corners; neutral and info take the Info mark, warning and destructive the TriangleAlert. No close button on an unresolved condition. No action, no banner: `action` is required.
+ * @words Title names the condition, description what it stops, the action the fix as verb and noun: "Open Slack settings", "Sign in". Sentence case, no "Please". The words come from the product's catalogue code.
+ * @access `liveRegion="polite"` gives `role="status"`, announced once when it appears; `"off"` gives `role="note"` for one already there at load. The mark is hidden.
  */
 export function NoticeBanner({ action, className, description, detail, liveRegion, title, tone, ...props }) {
     const Icon = tone === "warning" || tone === "destructive" ? TriangleAlert : Info;
     const isLive = liveRegion === "polite";
-    return (_jsxs(Alert, { "aria-atomic": isLive ? "true" : undefined, "aria-live": isLive ? "polite" : undefined, className: className, "data-live-region": liveRegion, "data-notice-banner": true, "data-tone": tone, role: isLive ? "status" : "note", variant: tone === "neutral" ? "default" : tone, ...props, children: [_jsx(Icon, { "aria-hidden": "true" }), _jsx(AlertTitle, { children: title }), _jsxs(AlertDescription, { className: "min-w-0 flex flex-col gap-2", children: [description ? _jsx("div", { "data-notice-description": true, children: description }) : null, detail ? _jsx("div", { "data-notice-detail": true, children: detail }) : null] }), action ? _jsx(AlertAction, { "data-notice-action": true, children: action }) : null] }));
+    return (_jsxs(Alert, { "aria-atomic": isLive ? "true" : undefined, "aria-live": isLive ? "polite" : undefined, className: className, "data-live-region": liveRegion, "data-notice-banner": true, "data-tone": tone, role: isLive ? "status" : "note", variant: tone === "neutral" ? "default" : tone, ...props, children: [_jsx(Icon, { "aria-hidden": "true" }), _jsx(AlertTitle, { children: title }), _jsxs(AlertDescription, { className: "min-w-0 flex flex-col gap-2", children: [description ? _jsx("div", { "data-notice-description": true, children: description }) : null, detail ? _jsx("div", { "data-notice-detail": true, children: detail }) : null] }), _jsx(AlertAction, { "data-notice-action": true, children: action })] }));
 }

package/dist/components/numbered-steps.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+export type NumberedStep = {
+    id: string;
+    /** The person's step, or a finished one in the past tense. */
+    title: string;
+    description?: ReactNode;
+    /** The step's own action, under it, with its platform line. */
+    action?: ReactNode;
+};
+export type NumberedStepsProps = {
+    /** "How to start" */
+    label: string;
+    steps: readonly NumberedStep[];
+    /** Where the sequence tracks real progress: the current step and its word, "Now". Instructions leave it out. */
+    current?: {
+        id: string;
+        label: string;
+    };
+    /** One bordered list with a seam between steps. */
+    framed?: boolean;
+};
+/**
+ * Steps a person follows, each with its number, its words and its own action.
+ *
+ * @family Other
+ * @when A short sequence the person does: installing Nadia from Downloads, connecting Teams, the Dashboard's setup guide; or a sequence whose real progress the page tracks, such as the company check.
+ * @instead Stages the system runs on an entry screen are the EntryStageList; the steps of an Agent's run are a RunTimeline; a setup with a wait is a FormDrawer with its "Step 2 of 3" line.
+ * @behaviour Each step is a 28 px square number in label-mono, its title, one muted description and, under it, the step's own action. Instructions mark no step and every number stays muted, because the page cannot know which one the person is on. Where the page tracks real progress, `current` turns that step's number to ink and writes its word beside the title. `framed` draws one bordered list with a seam between steps. It is the one owner of a drawn step number.
+ * @words The title is what the person does, in the imperative ("Install Nadia"), or a finished step in the past tense ("Sofia looked up acme.it"). The current step's word is short: "Now". An action names its verb and carries its platform line ("macOS · 2.14.0 · Apple silicon").
+ * @access An ordered list named by `label`, so assistive technology reads the count and position; the drawn numbers are hidden. The current step carries `aria-current="step"`. The titles are not headings, so the list never breaks the page's heading order.
+ */
+export declare function NumberedSteps({ label, steps, current, framed }: NumberedStepsProps): import("react").JSX.Element;
+//# sourceMappingURL=numbered-steps.d.ts.map

package/dist/components/numbered-steps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"numbered-steps.d.ts","sourceRoot":"","sources":["../../src/components/numbered-steps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,gHAAgH;IAChH,OAAO,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,mDAAmD;IACnD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAc,EAAE,EAAE,kBAAkB,+BAsD1F"}

package/dist/components/numbered-steps.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+/**
+ * Steps a person follows, each with its number, its words and its own action.
+ *
+ * @family Other
+ * @when A short sequence the person does: installing Nadia from Downloads, connecting Teams, the Dashboard's setup guide; or a sequence whose real progress the page tracks, such as the company check.
+ * @instead Stages the system runs on an entry screen are the EntryStageList; the steps of an Agent's run are a RunTimeline; a setup with a wait is a FormDrawer with its "Step 2 of 3" line.
+ * @behaviour Each step is a 28 px square number in label-mono, its title, one muted description and, under it, the step's own action. Instructions mark no step and every number stays muted, because the page cannot know which one the person is on. Where the page tracks real progress, `current` turns that step's number to ink and writes its word beside the title. `framed` draws one bordered list with a seam between steps. It is the one owner of a drawn step number.
+ * @words The title is what the person does, in the imperative ("Install Nadia"), or a finished step in the past tense ("Sofia looked up acme.it"). The current step's word is short: "Now". An action names its verb and carries its platform line ("macOS · 2.14.0 · Apple silicon").
+ * @access An ordered list named by `label`, so assistive technology reads the count and position; the drawn numbers are hidden. The current step carries `aria-current="step"`. The titles are not headings, so the list never breaks the page's heading order.
+ */
+export function NumberedSteps({ label, steps, current, framed = false }) {
+    return (_jsx("ol", { "aria-label": label, className: framed
+            ? "grid divide-y divide-border rounded-md border border-border bg-card"
+            : "grid gap-6", "data-slot": "numbered-steps", children: steps.map((step, index) => {
+            const word = current && step.id === current.id ? current.label : undefined;
+            const isCurrent = word !== undefined;
+            return (_jsxs("li", { "aria-current": isCurrent ? "step" : undefined, className: cn("grid grid-cols-[1.75rem_minmax(0,1fr)] gap-x-3 gap-y-1", framed && "p-4"), children: [_jsx("span", { "aria-hidden": "true", className: isCurrent
+                            ? "flex size-7 items-center justify-center rounded-md bg-foreground font-label-mono text-label-mono tabular-nums text-background"
+                            : "flex size-7 items-center justify-center rounded-md bg-muted font-label-mono text-label-mono tabular-nums text-muted-foreground", children: index + 1 }), _jsxs("div", { className: "flex min-h-7 min-w-0 flex-wrap items-center gap-2", children: [_jsx("span", { className: "text-body-sm font-medium text-foreground", children: step.title }), isCurrent ? (_jsx("span", { className: "font-label-mono text-label-mono uppercase text-muted-foreground", children: word })) : null] }), step.description ? (_jsx("div", { className: "col-start-2 text-body-sm text-muted-foreground", children: step.description })) : null, step.action ? (_jsx("div", { className: "col-start-2 grid justify-items-start gap-1.5 pt-3", children: step.action })) : null] }, step.id));
+        }) }));
+}

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

@@ -0,0 +1,37 @@
+import type { ComponentProps, ReactElement, ReactNode } from "react";
+import { type IdentityMarkProps } from "./identity-mark.js";
+import { type PageCommand, type PageMenu } from "./page-actions.js";
+export type ObjectPageProps = {
+    /** The object's mark, drawn at 64. */
+    mark: IdentityMarkProps;
+    name: string;
+    /** Given where the name is the page's h1 (the product's chrome draws no title row here). */
+    headingProps?: Omit<ComponentProps<"h1">, "children">;
+    /** One line saying what it is: "Customer of Partner Alpha · since 3 August 2026". */
+    description?: ReactNode;
+    /** Key facts as labelled values in one row. */
+    facts?: readonly {
+        label: string;
+        value: ReactNode;
+    }[];
+    /** On the name's row: one secondary action, then the three dots. */
+    actions?: {
+        secondary?: PageCommand;
+        menu?: PageMenu;
+    };
+    /** The sections, each a card that owns a decision: ObjectSection, RecordList with a heading, SettingsSection, ActivityFeed. */
+    children: ReactNode;
+};
+/**
+ * One object's page: its mark, name, one line and key facts on the page ground, its commands on the name's row, then
+ * its sections as cards.
+ *
+ * @family Compositions
+ * @when One thing a person opened from a list and now reads or acts on: a customer, a partner, an Installation, a Library entry.
+ * @instead A list of records is a CollectionPage; a page of settings only is a SettingsPage; an Agent opens on its AgentProfileCard, the documented exception.
+ * @behaviour The header sits on the page, never in a card: the mark at 64, the name, one line, the facts in one row, and at the trailing edge one secondary action then the three dots; below `md` the actions wrap under the name. The sections follow, 24 apart, each drawing its own states.
+ * @words The name as the object is called everywhere else; the line says what it is and whose ("Customer of Partner Alpha · since 3 August 2026"); a fact's label is a noun ("Plan"), its value the figure; the menu's trigger reads "More for {name}".
+ * @access With `headingProps` the name is the page's h1; without them it is text, for a product whose chrome already titles the page. The facts are a description list; the mark is decorative beside the name.
+ */
+export declare function ObjectPage({ mark, name, headingProps, description, facts, actions, children, }: ObjectPageProps): ReactElement;
+//# sourceMappingURL=object-page.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"object-page.d.ts","sourceRoot":"","sources":["../../src/components/object-page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrE,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAkB,MAAM,gBAAgB,CAAC;AAEjF,MAAM,MAAM,eAAe,GAAG;IAC5B,sCAAsC;IACtC,IAAI,EAAE,iBAAiB,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,4FAA4F;IAC5F,YAAY,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;IACtD,qFAAqF;IACrF,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,SAAS;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,EAAE,CAAC;IACvD,oEAAoE;IACpE,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,WAAW,CAAC;QAAC,IAAI,CAAC,EAAE,QAAQ,CAAA;KAAE,CAAC;IACvD,+HAA+H;IAC/H,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,KAAK,EACL,OAAO,EACP,QAAQ,GACT,EAAE,eAAe,GAAG,YAAY,CA6ChC"}

package/dist/components/object-page.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { IdentityMark } from "./identity-mark.js";
+import { PageActionsRow } from "./page-actions.js";
+/**
+ * One object's page: its mark, name, one line and key facts on the page ground, its commands on the name's row, then
+ * its sections as cards.
+ *
+ * @family Compositions
+ * @when One thing a person opened from a list and now reads or acts on: a customer, a partner, an Installation, a Library entry.
+ * @instead A list of records is a CollectionPage; a page of settings only is a SettingsPage; an Agent opens on its AgentProfileCard, the documented exception.
+ * @behaviour The header sits on the page, never in a card: the mark at 64, the name, one line, the facts in one row, and at the trailing edge one secondary action then the three dots; below `md` the actions wrap under the name. The sections follow, 24 apart, each drawing its own states.
+ * @words The name as the object is called everywhere else; the line says what it is and whose ("Customer of Partner Alpha · since 3 August 2026"); a fact's label is a noun ("Plan"), its value the figure; the menu's trigger reads "More for {name}".
+ * @access With `headingProps` the name is the page's h1; without them it is text, for a product whose chrome already titles the page. The facts are a description list; the mark is decorative beside the name.
+ */
+export function ObjectPage({ mark, name, headingProps, description, facts, actions, children, }) {
+    const nameClass = "text-heading-md break-words text-foreground";
+    return (_jsxs("div", { className: "grid min-w-0 gap-6", "data-slot": "object-page", children: [_jsxs("header", { className: "flex min-w-0 flex-wrap items-start gap-x-5 gap-y-4", "data-slot": "object-page-header", children: [_jsx(IdentityMark, { ...mark, size: 64 }), _jsxs("div", { className: "grid min-w-0 flex-1 basis-60 gap-1", children: [headingProps ? (_jsx("h1", { ...headingProps, className: cn(nameClass, "outline-none", headingProps.className), children: name })) : (_jsx("p", { className: nameClass, children: name })), description ? (_jsx("div", { className: "min-w-0 text-body-sm text-muted-foreground", children: description })) : null, facts && facts.length > 0 ? (_jsx("dl", { className: "mt-3 flex min-w-0 flex-wrap gap-x-8 gap-y-2", "data-slot": "object-page-facts", children: facts.map((fact) => (_jsxs("div", { className: "grid min-w-0 gap-1", children: [_jsx("dt", { className: "text-label-sm text-muted-foreground", children: fact.label }), _jsx("dd", { className: "min-w-0 text-label font-medium break-words text-foreground", children: fact.value })] }, fact.label))) })) : null] }), actions?.secondary || actions?.menu ? (_jsx("div", { className: "flex basis-full md:basis-auto md:justify-end", children: _jsx(PageActionsRow, { ...actions }) })) : null] }), children] }));
+}