@nadicodeai/ui 12.1.96 → 12.1.97

package/dist/components/carousel.d.ts

@@ -20,6 +20,18 @@ type CarouselContextProps = {
     canScrollNext: boolean;
 } & CarouselProps;
 declare function useCarousel(): CarouselContextProps;
+/**
+ * A rail of slides moved with Previous and Next.
+ *
+ * @family Other
+ * @when A controlled rail of like items on the website: screens, testimonials.
+ * @instead A product's records are a list or a table, never a carousel. One overflowing row is
+ * `ScrollArea`.
+ * @behaviour Slides move by swipe, drag or the Previous and Next buttons; the buttons disable at
+ * the ends. Arrow keys move when the carousel holds focus.
+ * @words The buttons name their move: *Previous slide*, *Next slide*.
+ * @access A `region` described as a carousel; each slide is a `group` described as a slide.
+ */
 declare function Carousel({ orientation, opts, setApi, plugins, className, children, ...props }: React.ComponentProps<"div"> & CarouselProps): React.JSX.Element;
 declare function CarouselContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CarouselItem({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../src/components/carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,gBAAgB,EAAE,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAGnF,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,KAAK,WAAW,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAC;AAC3C,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AACjE,KAAK,eAAe,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC;AAChD,KAAK,cAAc,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC;AAE/C,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAC;CACrC,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,WAAW,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;IACpD,GAAG,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5C,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;CACxB,GAAG,aAAa,CAAC;AAIlB,iBAAS,WAAW,yBAQnB;AAED,iBAAS,QAAQ,CAAC,EAChB,WAA0B,EAC1B,IAAI,EACJ,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,aAAa,qBAgF7C;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW5E;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAgBzE;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,qBAwBrC;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,qBAwBrC;AAED,OAAO,EACL,KAAK,WAAW,EAChB,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,WAAW,GACZ,CAAC"}
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../src/components/carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,gBAAgB,EAAE,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAGnF,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,KAAK,WAAW,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAC;AAC3C,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AACjE,KAAK,eAAe,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC;AAChD,KAAK,cAAc,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC;AAE/C,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAC;CACrC,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,WAAW,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;IACpD,GAAG,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5C,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;CACxB,GAAG,aAAa,CAAC;AAIlB,iBAAS,WAAW,yBAQnB;AAED;;;;;;;;;;;GAWG;AACH,iBAAS,QAAQ,CAAC,EAChB,WAA0B,EAC1B,IAAI,EACJ,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,aAAa,qBAgF7C;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW5E;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAgBzE;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,qBAwBrC;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,qBAwBrC;AAED,OAAO,EACL,KAAK,WAAW,EAChB,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,WAAW,GACZ,CAAC"}

package/dist/components/carousel.js

@@ -13,6 +13,18 @@ function useCarousel() {
     }
     return context;
 }
+/**
+ * A rail of slides moved with Previous and Next.
+ *
+ * @family Other
+ * @when A controlled rail of like items on the website: screens, testimonials.
+ * @instead A product's records are a list or a table, never a carousel. One overflowing row is
+ * `ScrollArea`.
+ * @behaviour Slides move by swipe, drag or the Previous and Next buttons; the buttons disable at
+ * the ends. Arrow keys move when the carousel holds focus.
+ * @words The buttons name their move: *Previous slide*, *Next slide*.
+ * @access A `region` described as a carousel; each slide is a `group` described as a slide.
+ */
 function Carousel({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }) {
     const [carouselRef, api] = useEmblaCarousel({
         ...opts,

package/dist/components/catalog-drawer.d.ts

@@ -0,0 +1,29 @@
+import type { CatalogSection } from "./catalog-entry.js";
+import { type CollectionSearchProps } from "./collection-search.js";
+import { type EmptyStateKind } from "./empty-state.js";
+import { type FormSurfaceProps } from "./form-drawer.js";
+export type CatalogDrawerProps = Omit<FormSurfaceProps, "children"> & {
+    search: CollectionSearchProps;
+    /** Already searched; undefined while the catalogue loads. */
+    sections: readonly CatalogSection[] | undefined;
+    loadingLabel: string;
+    failed?: EmptyStateKind<"failed">;
+    /** The catalogue holds nothing at all. */
+    empty: EmptyStateKind<"nothingYet">;
+    /** Offered only while the search holds text; otherwise a catalogue with nothing in it is `empty`. */
+    noMatch?: Omit<EmptyStateKind<"noResults">, "kind">;
+    /** The footer's one button, which closes the drawer: "Done". */
+    done: string;
+};
+/**
+ * A catalogue to choose from in the right-side drawer, each entry added from its own row.
+ *
+ * @family Compositions
+ * @when A person picks one or more things from a list too long for a dialog, the page still behind it: add a skill, add an app to a new Agent.
+ * @instead The shelf of everything the company holds, on its own page, is a `LibraryShelf`; a setup in steps is a `FormDrawer` with `job="steps"`; a new record from a few fields is a `FormDialog`.
+ * @behaviour The header holds the title, the description and Close; the body holds the search, then the entries in one column under their section titles. It draws one state at a time: the failure with its retry, three still entries while the catalogue loads, no match with a way to clear the search, nothing at all, or the entries. An entry already held shows a muted check and its word in place of Add. The footer's one button closes the drawer.
+ * @words The title names the job: "Add a skill". The search names what it finds: "Search the hub". Each entry's button is "Add"; the held word is "Added"; the footer's is "Done".
+ * @access A modal dialog named by its title; focus starts in the search, Escape and Close close it, and focus returns to the opener. The loading entries are one status named by `loadingLabel`.
+ */
+export declare function CatalogDrawer({ search, sections, loadingLabel, failed, empty, noMatch, done, ...surface }: CatalogDrawerProps): import("react").JSX.Element;
+//# sourceMappingURL=catalog-drawer.d.ts.map

package/dist/components/catalog-drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"catalog-drawer.d.ts","sourceRoot":"","sources":["../../src/components/catalog-drawer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC9F,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,0BAA0B,CAAC;AAIlC,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,GAAG;IACpE,MAAM,EAAE,qBAAqB,CAAC;IAC9B,6DAA6D;IAC7D,QAAQ,EAAE,SAAS,cAAc,EAAE,GAAG,SAAS,CAAC;IAChD,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC,0CAA0C;IAC1C,KAAK,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;IACpC,qGAAqG;IACrG,OAAO,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,CAAC;IACpD,gEAAgE;IAChE,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,KAAK,EACL,OAAO,EACP,IAAI,EACJ,GAAG,OAAO,EACX,EAAE,kBAAkB,+BAoBpB"}

package/dist/components/catalog-drawer.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "./button.js";
+import { CollectionSearch } from "./collection-search.js";
+import { EmptyState } from "./empty-state.js";
+import { FormDrawer, FormDrawerBody, FormDrawerFooter, } from "./form-drawer.js";
+import { SheetClose } from "./sheet.js";
+import { CatalogList, CatalogSkeleton, catalogIsEmpty } from "../internal/catalog-list.js";
+/**
+ * A catalogue to choose from in the right-side drawer, each entry added from its own row.
+ *
+ * @family Compositions
+ * @when A person picks one or more things from a list too long for a dialog, the page still behind it: add a skill, add an app to a new Agent.
+ * @instead The shelf of everything the company holds, on its own page, is a `LibraryShelf`; a setup in steps is a `FormDrawer` with `job="steps"`; a new record from a few fields is a `FormDialog`.
+ * @behaviour The header holds the title, the description and Close; the body holds the search, then the entries in one column under their section titles. It draws one state at a time: the failure with its retry, three still entries while the catalogue loads, no match with a way to clear the search, nothing at all, or the entries. An entry already held shows a muted check and its word in place of Add. The footer's one button closes the drawer.
+ * @words The title names the job: "Add a skill". The search names what it finds: "Search the hub". Each entry's button is "Add"; the held word is "Added"; the footer's is "Done".
+ * @access A modal dialog named by its title; focus starts in the search, Escape and Close close it, and focus returns to the opener. The loading entries are one status named by `loadingLabel`.
+ */
+export function CatalogDrawer({ search, sections, loadingLabel, failed, empty, noMatch, done, ...surface }) {
+    return (_jsxs(FormDrawer, { ...surface, job: "catalog", children: [_jsx("div", { className: "px-nadicode-lg", "data-slot": "catalog-drawer-search", children: _jsx(CollectionSearch, { ...search }) }), _jsx(FormDrawerBody, { className: "pb-nadicode-lg", children: _jsx(CatalogBody, { empty: empty, failed: failed, loadingLabel: loadingLabel, noMatch: search.value ? noMatch : undefined, sections: sections }) }), _jsx(FormDrawerFooter, { children: _jsx(SheetClose, { render: _jsx(Button, { type: "button" }), children: done }) })] }));
+}
+function CatalogBody({ sections, loadingLabel, failed, empty, noMatch, }) {
+    if (failed)
+        return _jsx(EmptyState, { scope: "card", ...failed });
+    if (!sections)
+        return _jsx(CatalogSkeleton, { columns: 1, label: loadingLabel });
+    if (catalogIsEmpty(sections)) {
+        return noMatch ? (_jsx(EmptyState, { scope: "card", kind: "noResults", ...noMatch })) : (_jsx(EmptyState, { scope: "card", ...empty }));
+    }
+    return _jsx(CatalogList, { columns: 1, sections: sections });
+}

package/dist/components/catalog-entry.d.ts

@@ -1,34 +1,57 @@
-import type * as React from "react";
-import { type RowMessage } from "../internal/row-message.js";
+import { type LucideIcon } from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+import type { MenuCommand } from "./action-menu.js";
+import type { IdentityMarkProps } from "./identity-mark.js";
+import type { PageCommand } from "./page-actions.js";
+import type { RowMessage } from "../internal/row-message.js";
 export type { RowMessage };
 /**
  * The line icon a catalog entry names. A name outside `CATALOG_ICONS`, or
- * none, draws the sparkles every unnamed entry shares.
+ * none, takes its kind's own icon, the one the Skills or Plugins section has.
  */
-export declare function CatalogIcon({ name }: {
-    name: string | null | undefined;
-}): React.JSX.Element;
+export declare function catalogIcon(name: string | null | undefined, kind: "skill" | "plugin"): LucideIcon;
+export type CatalogEntryAdd = PageCommand & {
+    /** The entry is held here already: a muted check and this word instead of the button. */
+    added?: {
+        label: string;
+    };
+};
 /**
- * The entries of a Library shelf (DESIGN.md "Page compositions"): one column,
- * or two from `md` where the shelf has the page's width.
+ * One entry of a Library shelf or of the drawer that adds from it: its kind's
+ * tile, its name, one line, one fact, and the one control that adds it.
+ *
+ * @family Data
+ * @when A reusable thing a person can add: a skill, a plugin or an app, on a Library shelf (`LibraryShelf`) or in the drawer that adds one to an Agent (`CatalogDrawer`).
+ * @instead A record the person already holds is a row of its collection (`CollectionPage`). An Agent template is its `AgentCard`. Figures compared across entries are a `DataTable`.
+ * @behaviour The kind's tile at 40: purple for a skill, blue for a plugin, an app's own logo. The name is the link to its own page. One Add control, outline with a leading plus; once held, a muted check and `added`'s word take its place. A menu of one command that is not destructive, with no Add, is that command's outline button; otherwise the three dots. A failed or refused add puts its message in the line's place, with its retry before the entry's own controls.
+ * @words The name as the catalogue gives it; one line saying what it does, a sentence: "Classifies incoming requests and prepares the next step." The control is a verb: "Add".
+ * @access The tile is decorative; the name is the link's text. A failed add's message is announced as an alert.
  */
-export declare function CatalogEntryList({ children, className, columns, }: {
-    children: React.ReactNode;
-    className?: string;
-    columns?: 1 | 2;
-}): React.JSX.Element;
-/**
- * One entry of a Library shelf: its kind's tile, its name, one line of
- * description, and at the trailing end what the viewer can do with it. When
- * that action failed or cannot run, `state` puts its message in the
- * description's place and its actions before the entry's own, inside the entry. The
- * caller writes the entry's `<li>`.
- */
-export declare function CatalogEntryRow({ actions, description, media, state, title, }: {
-    actions?: React.ReactNode;
-    description: React.ReactNode;
-    media: React.ReactNode;
+export type CatalogEntryProps = {
+    id: string;
+    /** The kind's tile at 40: { kind: "record", icon: catalogIcon(name, "skill"), tone: "skill" }, or an app's logo. */
+    mark: IdentityMarkProps;
+    name: string;
+    link?: {
+        href: string;
+        renderLink?: (props: ComponentProps<"a"> & {
+            href: string;
+        }) => ReactNode;
+    };
+    description: ReactNode;
+    /** One categorical fact, a Tag: the audience, the owner. */
+    fact?: ReactNode;
+    add?: CatalogEntryAdd;
+    menu?: {
+        label: string;
+        commands: readonly MenuCommand[];
+    };
+    /** The add failed or cannot run: its message in the description's place. */
     state?: RowMessage | null;
-    title: React.ReactNode;
-}): React.JSX.Element;
+};
+export type CatalogSection = {
+    id: string;
+    title?: string;
+    entries: readonly CatalogEntryProps[];
+};
 //# sourceMappingURL=catalog-entry.d.ts.map

package/dist/components/catalog-entry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"catalog-entry.d.ts","sourceRoot":"","sources":["../../src/components/catalog-entry.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAYpC,OAAO,EAAE,KAAK,UAAU,EAAqC,MAAM,wBAAwB,CAAC;AAE5F,YAAY,EAAE,UAAU,EAAE,CAAC;AAoC3B;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;CAAE,qBAGxE;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,OAAW,GACZ,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CACjB,qBASA;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,WAAW,EACX,KAAK,EACL,KAAK,EACL,KAAK,GACN,EAAE;IACD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,qBAyBA"}
+{"version":3,"file":"catalog-entry.d.ts","sourceRoot":"","sources":["../../src/components/catalog-entry.ts"],"names":[],"mappings":"AAAA,OAAO,EAaL,KAAK,UAAU,EAiBhB,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAE5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEzD,YAAY,EAAE,UAAU,EAAE,CAAC;AAwC3B;;;GAGG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAEjG;AAED,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG;IAC1C,yFAAyF;IACzF,KAAK,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,oHAAoH;IACpH,IAAI,EAAE,iBAAiB,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,GAAG;YAAE,IAAI,EAAE,MAAM,CAAA;SAAE,KAAK,SAAS,CAAC;KAC3E,CAAC;IACF,WAAW,EAAE,SAAS,CAAC;IACvB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,GAAG,CAAC,EAAE,eAAe,CAAC;IACtB,IAAI,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,SAAS,WAAW,EAAE,CAAA;KAAE,CAAC;IAC3D,4EAA4E;IAC5E,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,SAAS,iBAAiB,EAAE,CAAC;CACvC,CAAC"}

package/dist/components/catalog-entry.js

@@ -1,8 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { BookOpen, Briefcase, Calculator, Calendar, FileCheck, FileSearch, FileText, Globe, Inbox, Landmark, Languages, ListChecks, Mail, MessageCircle, Mic, NotebookPen, Phone, Presentation, Receipt, Scale, Send, ShieldCheck, Sparkles, Truck, Users, Wallet, } from "lucide-react";
-import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle, } from "./item.js";
-import { RowMessageActions, RowMessageLine } from "../internal/row-message.js";
-import { cn } from "../lib/utils.js";
+import { BookOpen, Briefcase, Calculator, Calendar, FileCheck, FileSearch, FileText, Globe, Inbox, Landmark, Languages, ListChecks, Mail, MessageCircle, Mic, NotebookPen, Package, Phone, Presentation, Receipt, Scale, Send, ShieldCheck, Sparkles, Truck, Users, Wallet, Wrench, } from "lucide-react";
 const ICONS = {
     "book-open": BookOpen,
     briefcase: Briefcase,
@@ -31,32 +27,14 @@ const ICONS = {
     users: Users,
     wallet: Wallet,
 };
+const FALLBACK_ICONS = { skill: Wrench, plugin: Package };
 function isCatalogIcon(name) {
     return Object.hasOwn(ICONS, name);
 }
 /**
  * The line icon a catalog entry names. A name outside `CATALOG_ICONS`, or
- * none, draws the sparkles every unnamed entry shares.
+ * none, takes its kind's own icon, the one the Skills or Plugins section has.
  */
-export function CatalogIcon({ name }) {
-    const Icon = name && isCatalogIcon(name) ? ICONS[name] : Sparkles;
-    return _jsx(Icon, { "aria-hidden": "true" });
-}
-/**
- * The entries of a Library shelf (DESIGN.md "Page compositions"): one column,
- * or two from `md` where the shelf has the page's width.
- */
-export function CatalogEntryList({ children, className, columns = 1, }) {
-    return (_jsx(ItemGroup, { className: cn("grid gap-x-6 gap-y-2", columns === 2 && "md:grid-cols-2", className), render: _jsx("ul", {}), children: children }));
-}
-/**
- * One entry of a Library shelf: its kind's tile, its name, one line of
- * description, and at the trailing end what the viewer can do with it. When
- * that action failed or cannot run, `state` puts its message in the
- * description's place and its actions before the entry's own, inside the entry. The
- * caller writes the entry's `<li>`.
- */
-export function CatalogEntryRow({ actions, description, media, state, title, }) {
-    const controls = state ? (_jsxs(_Fragment, { children: [_jsx(RowMessageActions, { state: state }), actions] })) : (actions);
-    return (_jsxs(Item, { children: [_jsx(ItemMedia, { children: media }), _jsxs(ItemContent, { className: "min-w-0", children: [_jsx(ItemTitle, { children: title }), state ? (_jsx(ItemDescription, { whole: true, children: _jsx(RowMessageLine, { state: state }) })) : (_jsx(ItemDescription, { className: "line-clamp-1", children: description }))] }), controls ? _jsx(ItemActions, { children: controls }) : null] }));
+export function catalogIcon(name, kind) {
+    return name && isCatalogIcon(name) ? ICONS[name] : FALLBACK_ICONS[kind];
 }

package/dist/components/channel-view.d.ts

@@ -1,4 +1,27 @@
 import type { ReactNode } from "react";
+/**
+ * A work-chat channel, as presentation only: the channel's header, the day it
+ * opens on, the messages in it, the replies gathered under a message, a file
+ * left in the conversation, and the card a voice call leaves behind.
+ *
+ * It carries no data, no state and no store, so a product mounts it with its own
+ * members and messages. Every member's picture arrives as a slot: a person is
+ * the package `Avatar`, a digital colleague is its `AgentOrb`, which is the one
+ * Agent picture in every product (`DESIGN.md`, "Agent orbs").
+ *
+ * @family Other
+ * @when Showing a channel of Alveare's work chat: its header, its days, messages, replies, files
+ * and calls.
+ * @instead An Agent's conversation is the Agents interface (`@nadicodeai/ui/agents`). A list of
+ * records is a list or table.
+ * @behaviour A 36 px member column, a 10 px gap to the text, the author and the time on one
+ * baseline; replies gather in a pill under their message, and cards sit at the resting fill inside
+ * the line: Alveare's channel geometry.
+ * @words The product's members and messages; every label (members, replies, reactions) comes from
+ * its catalogue.
+ * @access A person's picture is `role="img"` named by their name; the member stack is named by
+ * `membersLabel`; a reaction is named by its `label`, its glyph hidden.
+ */
 export declare function ChannelView({ children, className, header, }: {
     children: ReactNode;
     className?: string;

package/dist/components/channel-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"channel-view.d.ts","sourceRoot":"","sources":["../../src/components/channel-view.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"channel-view.d.ts","sourceRoot":"","sources":["../../src/components/channel-view.tsx"],"names":[],"mappings":"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"}

package/dist/components/channel-view.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Download, FileText, Hash, Headphones, Users } from "lucide-react";
 import { Avatar, AvatarFallback } from "./avatar.js";
 import { cn } from "../lib/utils.js";
+const MEMBER_COLUMN = "flex w-9 shrink-0 justify-center";
 /**
  * A work-chat channel, as presentation only: the channel's header, the day it
  * opens on, the messages in it, the replies gathered under a message, a file
@@ -12,11 +13,19 @@ import { cn } from "../lib/utils.js";
  * the package `Avatar`, a digital colleague is its `AgentOrb`, which is the one
  * Agent picture in every product (`DESIGN.md`, "Agent orbs").
  *
- * The geometry is Alveare's channel geometry: a 36 px member column, a 10 px gap
- * to the text, the author and the time on one baseline, replies gathered in a
- * pill under their message, and cards at the resting fill inside the line.
+ * @family Other
+ * @when Showing a channel of Alveare's work chat: its header, its days, messages, replies, files
+ * and calls.
+ * @instead An Agent's conversation is the Agents interface (`@nadicodeai/ui/agents`). A list of
+ * records is a list or table.
+ * @behaviour A 36 px member column, a 10 px gap to the text, the author and the time on one
+ * baseline; replies gather in a pill under their message, and cards sit at the resting fill inside
+ * the line: Alveare's channel geometry.
+ * @words The product's members and messages; every label (members, replies, reactions) comes from
+ * its catalogue.
+ * @access A person's picture is `role="img"` named by their name; the member stack is named by
+ * `membersLabel`; a reaction is named by its `label`, its glyph hidden.
  */
-const MEMBER_COLUMN = "flex w-9 shrink-0 justify-center";
 export function ChannelView({ children, className, header, }) {
     return (_jsxs("div", { className: cn("grid min-h-0 min-w-0 grid-cols-[minmax(0,1fr)] grid-rows-[auto_minmax(0,1fr)] bg-background", className), children: [header, _jsx("div", { className: "flex min-h-0 min-w-0 flex-col justify-end overflow-hidden px-2 pb-4", children: children })] }));
 }

package/dist/components/chart-area-stacked.d.ts

@@ -1,4 +1,14 @@
 import { type ChartCardProps } from "./chart-card.js";
-declare function ChartAreaStacked({ title, description, action, summary, aside, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter, axisFormatter, otherLabel, emptyState, size, className, }: ChartCardProps): import("react").JSX.Element;
+/**
+ * A continuous volume building up over time, as stacked areas.
+ *
+ * @family Charts
+ * @when A continuous volume building up over time, in three series or fewer: Included usage against Extra usage.
+ * @instead More than three series, or discrete daily totals, use `ChartBarStacked`. A cap reading is `Progress`.
+ * @behaviour Stacked natural curves, each filled with its entity's hue at 40% and stroked at full strength. Value axis and dashed grid as every chart.
+ * @words Series named for what the person buys: "Included usage", "Extra usage". Axis scale in M; the tooltip prints the exact token count.
+ * @access Named by its title. A delta that is neither good nor bad, like volume, takes the neutral tone.
+ */
+declare function ChartAreaStacked({ title, period, controls, summary, aside, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter, axisFormatter, otherLabel, emptyState, size, className, }: ChartCardProps): import("react").JSX.Element;
 export { ChartAreaStacked };
 //# sourceMappingURL=chart-area-stacked.d.ts.map

package/dist/components/chart-area-stacked.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-area-stacked.d.ts","sourceRoot":"","sources":["../../src/components/chart-area-stacked.tsx"],"names":[],"mappings":"AAcA,OAAO,EAOL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAGjC,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,WAAW,EACX,MAAM,EACN,OAAO,EACP,KAAK,EACL,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,cAAc,EACd,cAAsC,EACtC,aAAa,EACb,UAAoB,EACpB,UAAU,EACV,IAAgB,EAChB,SAAS,GACV,EAAE,cAAc,+BA0EhB;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"chart-area-stacked.d.ts","sourceRoot":"","sources":["../../src/components/chart-area-stacked.tsx"],"names":[],"mappings":"AAcA,OAAO,EAOL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAGjC;;;;;;;;;GASG;AACH,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,OAAO,EACP,KAAK,EACL,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,cAAc,EACd,cAAsC,EACtC,aAAa,EACb,UAAU,EACV,UAAU,EACV,IAAgB,EAChB,SAAS,GACV,EAAE,cAAc,+BA0EhB;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/chart-area-stacked.js

@@ -7,11 +7,21 @@ import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartToo
 import { CHART_Y_AXIS_TICK_COUNT, niceAxisTicks, stackedAxisMax } from "./chart-axis.js";
 import { CHART_LEGEND_CLASS, ChartCard, chartPlotClassName, chartSeriesConfig, defaultValueFormatter, foldOtherSeries, } from "./chart-card.js";
 import { entityColor } from "./chart-entity-colors.js";
-function ChartAreaStacked({ title, description, action, summary, aside, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter = defaultValueFormatter, axisFormatter, otherLabel = "Other", emptyState, size = "default", className, }) {
+/**
+ * A continuous volume building up over time, as stacked areas.
+ *
+ * @family Charts
+ * @when A continuous volume building up over time, in three series or fewer: Included usage against Extra usage.
+ * @instead More than three series, or discrete daily totals, use `ChartBarStacked`. A cap reading is `Progress`.
+ * @behaviour Stacked natural curves, each filled with its entity's hue at 40% and stroked at full strength. Value axis and dashed grid as every chart.
+ * @words Series named for what the person buys: "Included usage", "Extra usage". Axis scale in M; the tooltip prints the exact token count.
+ * @access Named by its title. A delta that is neither good nor bad, like volume, takes the neutral tone.
+ */
+function ChartAreaStacked({ title, period, controls, summary, aside, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter = defaultValueFormatter, axisFormatter, otherLabel, emptyState, size = "default", className, }) {
     const folded = foldOtherSeries(series, data, entityColorMap, otherLabel);
     const chartConfig = chartSeriesConfig(folded.series, entityColorMap);
     const domainMax = stackedAxisMax(folded.data, folded.series.map((entry) => entry.id));
-    return (_jsx(ChartCard, { title: title, description: description, action: action, summary: summary, aside: aside, footer: footer, ...(headingLevel ? { headingLevel } : {}), className: className, children: (titleId) => emptyState && data.length === 0 ? (emptyState) : (_jsx(ChartContainer, { config: chartConfig, className: chartPlotClassName(size), children: _jsxs(AreaChart, { accessibilityLayer: true, "aria-labelledby": titleId, data: folded.data, margin: {
+    return (_jsx(ChartCard, { title: title, period: period, controls: controls, summary: summary, aside: aside, ...(footer ? { footer } : {}), ...(headingLevel ? { headingLevel } : {}), className: className, children: (titleId) => emptyState && data.length === 0 ? (emptyState) : (_jsx(ChartContainer, { config: chartConfig, className: chartPlotClassName(size), children: _jsxs(AreaChart, { accessibilityLayer: true, "aria-labelledby": titleId, data: folded.data, margin: {
                     left: 12,
                     right: 12,
                 }, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: xKey, tickLine: false, axisLine: false, tickMargin: 8 }), _jsx(YAxis, { width: "auto", tickLine: false, axisLine: false, tickMargin: 8, tickCount: CHART_Y_AXIS_TICK_COUNT, ...(domainMax === undefined

package/dist/components/chart-bar-horizontal.d.ts

@@ -3,7 +3,17 @@ declare function signedAxis(data: readonly Record<string, number | string>[], va
     domain: readonly [number, number];
     ticks: number[];
 };
-declare function ChartBarHorizontal({ title, description, action, summary, aside, footer, headingLevel, data, xKey, valueKey, displayKey, categoryDisplayKey, positiveLabel, negativeLabel, valueFormatter, axisFormatter, emptyState, size, className, }: Omit<ChartCardProps, "series" | "entityColorMap"> & {
+/**
+ * A signed comparison across entities: profit to the right, loss to the left of a zero line.
+ *
+ * @family Charts
+ * @when Which Customers contribute profit or loss: a signed comparison across entities.
+ * @instead Never encode a loss as a share. An unsigned ranking is the compact `Progress` ranking or a `DataTable`.
+ * @behaviour Horizontal bars from a 1.5 px zero line: favourable values to the right in success with right corners rounded, unfavourable to the left in destructive with left corners rounded.
+ * @words The money unit in the period or the axis. Losses stay negative, written with a true minus: −€360.
+ * @access Each bar's sign is in its position and its tooltip, never only its colour. Category labels are text, readable without hue.
+ */
+declare function ChartBarHorizontal({ title, period, controls, summary, aside, footer, headingLevel, data, xKey, valueKey, displayKey, categoryDisplayKey, positiveLabel, negativeLabel, valueFormatter, axisFormatter, emptyState, size, className, }: Omit<ChartCardProps, "series" | "entityColorMap" | "otherLabel"> & {
     valueKey: string;
     displayKey?: string;
     categoryDisplayKey?: string;

package/dist/components/chart-bar-horizontal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-bar-horizontal.d.ts","sourceRoot":"","sources":["../../src/components/chart-bar-horizontal.tsx"],"names":[],"mappings":"AAaA,OAAO,EAKL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAOjC,iBAAS,UAAU,CAAC,IAAI,EAAE,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,EAAE,EAAE,QAAQ,EAAE,MAAM;;;EAqCrF;AAED,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,WAAW,EACX,MAAM,EACN,OAAO,EACP,KAAK,EACL,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,aAAa,EACb,cAAsC,EACtC,aAAa,EACb,UAAU,EACV,IAAgB,EAChB,SAAS,GACV,EAAE,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,gBAAgB,CAAC,GAAG;IACrD,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;CACvB,+BA4GA;AAED,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"chart-bar-horizontal.d.ts","sourceRoot":"","sources":["../../src/components/chart-bar-horizontal.tsx"],"names":[],"mappings":"AAaA,OAAO,EAKL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAOjC,iBAAS,UAAU,CAAC,IAAI,EAAE,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,EAAE,EAAE,QAAQ,EAAE,MAAM;;;EAqCrF;AAED;;;;;;;;;GASG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,OAAO,EACP,KAAK,EACL,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,aAAa,EACb,cAAsC,EACtC,aAAa,EACb,UAAU,EACV,IAAgB,EAChB,SAAS,GACV,EAAE,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,gBAAgB,GAAG,YAAY,CAAC,GAAG;IACpE,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;CACvB,+BA4GA;AAED,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/chart-bar-horizontal.js

@@ -38,7 +38,17 @@ function signedAxis(data, valueKey) {
     const ticks = [...negativeTicks, 0, ...positiveTicks];
     return { domain: [ticks[0] ?? minimum, ticks.at(-1) ?? maximum], ticks };
 }
-function ChartBarHorizontal({ title, description, action, summary, aside, footer, headingLevel, data, xKey, valueKey, displayKey, categoryDisplayKey, positiveLabel, negativeLabel, valueFormatter = defaultValueFormatter, axisFormatter, emptyState, size = "default", className, }) {
+/**
+ * A signed comparison across entities: profit to the right, loss to the left of a zero line.
+ *
+ * @family Charts
+ * @when Which Customers contribute profit or loss: a signed comparison across entities.
+ * @instead Never encode a loss as a share. An unsigned ranking is the compact `Progress` ranking or a `DataTable`.
+ * @behaviour Horizontal bars from a 1.5 px zero line: favourable values to the right in success with right corners rounded, unfavourable to the left in destructive with left corners rounded.
+ * @words The money unit in the period or the axis. Losses stay negative, written with a true minus: −€360.
+ * @access Each bar's sign is in its position and its tooltip, never only its colour. Category labels are text, readable without hue.
+ */
+function ChartBarHorizontal({ title, period, controls, summary, aside, footer, headingLevel, data, xKey, valueKey, displayKey, categoryDisplayKey, positiveLabel, negativeLabel, valueFormatter = defaultValueFormatter, axisFormatter, emptyState, size = "default", className, }) {
     const axis = signedAxis(data, valueKey);
     const signedData = data.map((datum) => {
         const value = datum[valueKey];
@@ -54,7 +64,7 @@ function ChartBarHorizontal({ title, description, action, summary, aside, footer
         [POSITIVE_KEY]: { label: positiveLabel, color: POSITIVE_BAR_COLOR },
         [NEGATIVE_KEY]: { label: negativeLabel, color: NEGATIVE_BAR_COLOR },
     };
-    return (_jsx(ChartCard, { title: title, description: description, action: action, summary: summary, aside: aside, footer: footer, ...(headingLevel ? { headingLevel } : {}), className: className, children: (titleId) => emptyState && data.length === 0 ? (emptyState) : (_jsx(ChartContainer, { config: chartConfig, className: chartPlotClassName(size), children: _jsxs(BarChart, { accessibilityLayer: true, "aria-labelledby": titleId, data: signedData, layout: "vertical", margin: { left: 8, right: 16 }, children: [_jsx(CartesianGrid, { horizontal: false, strokeDasharray: "3 3" }), _jsx(XAxis, { type: "number", domain: axis.domain, ticks: axis.ticks, tickLine: false, axisLine: false, tickMargin: 8, tickFormatter: (value) => (axisFormatter ?? valueFormatter)(Number(value)) }), _jsx(YAxis, { type: "category", dataKey: xKey, width: 112, tickLine: false, axisLine: false, tickMargin: 8 }), _jsx(ReferenceLine, { x: 0, stroke: "var(--border)", strokeWidth: 1.5 }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { indicator: "line", labelFormatter: (_label, payload) => {
+    return (_jsx(ChartCard, { title: title, period: period, controls: controls, summary: summary, aside: aside, ...(footer ? { footer } : {}), ...(headingLevel ? { headingLevel } : {}), className: className, children: (titleId) => emptyState && data.length === 0 ? (emptyState) : (_jsx(ChartContainer, { config: chartConfig, className: chartPlotClassName(size), children: _jsxs(BarChart, { accessibilityLayer: true, "aria-labelledby": titleId, data: signedData, layout: "vertical", margin: { left: 8, right: 16 }, children: [_jsx(CartesianGrid, { horizontal: false, strokeDasharray: "3 3" }), _jsx(XAxis, { type: "number", domain: axis.domain, ticks: axis.ticks, tickLine: false, axisLine: false, tickMargin: 8, tickFormatter: (value) => (axisFormatter ?? valueFormatter)(Number(value)) }), _jsx(YAxis, { type: "category", dataKey: xKey, width: 112, tickLine: false, axisLine: false, tickMargin: 8 }), _jsx(ReferenceLine, { x: 0, stroke: "var(--border)", strokeWidth: 1.5 }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { indicator: "line", labelFormatter: (_label, payload) => {
                                 const exact = categoryDisplayKey
                                     ? payload?.[0]?.payload?.[categoryDisplayKey]
                                     : undefined;

package/dist/components/chart-bar-multiple.d.ts

@@ -1,9 +1,14 @@
 import { type ChartCardProps } from "./chart-card.js";
 /**
- * Grouped bars: two or more measures side by side per period, on ONE axis in
- * one unit. A rate over those measures (a margin percentage) is a KPI card, not
- * a second axis on this plot.
+ * Grouped bars: two or more measures side by side per period, on one axis in one unit.
+ *
+ * @family Charts
+ * @when Two money measures compared period by period: monthly recurring revenue against model cost.
+ * @instead Never a second axis: a ratio such as gross margin is a `KpiCard` beside it. One measure split by entity is `ChartBarStacked`.
+ * @behaviour Bars side by side in series order, 4 px gap, every corner 4 px, at most 48 px wide, one shared value axis on nice steps.
+ * @words Series named in full: "Monthly recurring revenue", "Model cost". Months as short names on the axis, the full month in the tooltip.
+ * @access The plot is named by its title; each bar's figure is in the tooltip and, where the page needs it, a table.
  */
-declare function ChartBarMultiple({ title, description, action, summary, aside, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter, axisFormatter, otherLabel, emptyState, size, className, }: ChartCardProps): import("react").JSX.Element;
+declare function ChartBarMultiple({ title, period, controls, summary, aside, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter, axisFormatter, otherLabel, emptyState, size, className, }: ChartCardProps): import("react").JSX.Element;
 export { ChartBarMultiple };
 //# sourceMappingURL=chart-bar-multiple.d.ts.map

package/dist/components/chart-bar-multiple.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-bar-multiple.d.ts","sourceRoot":"","sources":["../../src/components/chart-bar-multiple.tsx"],"names":[],"mappings":"AAcA,OAAO,EAOL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAGjC;;;;GAIG;AACH,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,WAAW,EACX,MAAM,EACN,OAAO,EACP,KAAK,EACL,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,cAAc,EACd,cAAsC,EACtC,aAAa,EACb,UAAoB,EACpB,UAAU,EACV,IAAgB,EAChB,SAAS,GACV,EAAE,cAAc,+BAgEhB;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"chart-bar-multiple.d.ts","sourceRoot":"","sources":["../../src/components/chart-bar-multiple.tsx"],"names":[],"mappings":"AAcA,OAAO,EAOL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAGjC;;;;;;;;;GASG;AACH,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,OAAO,EACP,KAAK,EACL,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,cAAc,EACd,cAAsC,EACtC,aAAa,EACb,UAAU,EACV,UAAU,EACV,IAAgB,EAChB,SAAS,GACV,EAAE,cAAc,+BAgEhB;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/chart-bar-multiple.js

@@ -8,15 +8,20 @@ import { CHART_Y_AXIS_TICK_COUNT, niceAxisTicks, seriesAxisMax } from "./chart-a
 import { CHART_LEGEND_CLASS, ChartCard, chartPlotClassName, chartSeriesConfig, defaultValueFormatter, foldOtherSeries, } from "./chart-card.js";
 import { entityColor } from "./chart-entity-colors.js";
 /**
- * Grouped bars: two or more measures side by side per period, on ONE axis in
- * one unit. A rate over those measures (a margin percentage) is a KPI card, not
- * a second axis on this plot.
+ * Grouped bars: two or more measures side by side per period, on one axis in one unit.
+ *
+ * @family Charts
+ * @when Two money measures compared period by period: monthly recurring revenue against model cost.
+ * @instead Never a second axis: a ratio such as gross margin is a `KpiCard` beside it. One measure split by entity is `ChartBarStacked`.
+ * @behaviour Bars side by side in series order, 4 px gap, every corner 4 px, at most 48 px wide, one shared value axis on nice steps.
+ * @words Series named in full: "Monthly recurring revenue", "Model cost". Months as short names on the axis, the full month in the tooltip.
+ * @access The plot is named by its title; each bar's figure is in the tooltip and, where the page needs it, a table.
  */
-function ChartBarMultiple({ title, description, action, summary, aside, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter = defaultValueFormatter, axisFormatter, otherLabel = "Other", emptyState, size = "default", className, }) {
+function ChartBarMultiple({ title, period, controls, summary, aside, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter = defaultValueFormatter, axisFormatter, otherLabel, emptyState, size = "default", className, }) {
     const folded = foldOtherSeries(series, data, entityColorMap, otherLabel);
     const chartConfig = chartSeriesConfig(folded.series, entityColorMap);
     const domainMax = seriesAxisMax(folded.data, folded.series.map((entry) => entry.id));
-    return (_jsx(ChartCard, { title: title, description: description, action: action, summary: summary, aside: aside, footer: footer, ...(headingLevel ? { headingLevel } : {}), className: className, children: (titleId) => emptyState && data.length === 0 ? (emptyState) : (_jsx(ChartContainer, { config: chartConfig, className: chartPlotClassName(size), children: _jsxs(BarChart, { accessibilityLayer: true, "aria-labelledby": titleId, data: folded.data, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: xKey, tickLine: false, tickMargin: 10, axisLine: false }), _jsx(YAxis, { width: "auto", tickLine: false, axisLine: false, tickMargin: 8, tickCount: CHART_Y_AXIS_TICK_COUNT, ...(domainMax === undefined
+    return (_jsx(ChartCard, { title: title, period: period, controls: controls, summary: summary, aside: aside, ...(footer ? { footer } : {}), ...(headingLevel ? { headingLevel } : {}), className: className, children: (titleId) => emptyState && data.length === 0 ? (emptyState) : (_jsx(ChartContainer, { config: chartConfig, className: chartPlotClassName(size), children: _jsxs(BarChart, { accessibilityLayer: true, "aria-labelledby": titleId, data: folded.data, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: xKey, tickLine: false, tickMargin: 10, axisLine: false }), _jsx(YAxis, { width: "auto", tickLine: false, axisLine: false, tickMargin: 8, tickCount: CHART_Y_AXIS_TICK_COUNT, ...(domainMax === undefined
                             ? {}
                             : {
                                 domain: [0, domainMax],

package/dist/components/chart-bar-stacked.d.ts

@@ -1,5 +1,15 @@
 import { type ChartCardProps } from "./chart-card.js";
-declare function ChartBarStacked({ title, description, action, summary, aside, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter, axisFormatter, otherLabel, emptyState, size, share, className, }: ChartCardProps & {
+/**
+ * One total over time, each bar split by entity; with `share`, one bar split to 100%.
+ *
+ * @family Charts
+ * @when How a total moved over time split by Customer, member account or model; with `share`, what part of one total each holds, with no time axis.
+ * @instead For a continuous volume in three series or fewer use `ChartAreaStacked`. Two measures side by side use `ChartBarMultiple`. Exact lookup is a table.
+ * @behaviour Stacked in series order, bottom segment rounded below and top above at 4 px, bars at most 48 px. The Portal names five entities and folds the rest into "Everything else". The share plot is 64 px, legend included.
+ * @words Entity names as the reader knows them, never ids. The neutral remainder is "Everything else". Values through the page's shared money formatter.
+ * @access The plot is an image named by the card title; the tooltip and legend are read with it. The share bar sits above the full-width table that carries each figure.
+ */
+declare function ChartBarStacked({ title, period, controls, summary, aside, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter, axisFormatter, otherLabel, emptyState, size, share, className, }: ChartCardProps & {
     /**
      * One bar across the card, each entity a segment of 100%: the share of a
      * total with no time axis. `data` is then a single row keyed by series id.

package/dist/components/chart-bar-stacked.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-bar-stacked.d.ts","sourceRoot":"","sources":["../../src/components/chart-bar-stacked.tsx"],"names":[],"mappings":"AAcA,OAAO,EAOL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAmBjC,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,WAAW,EACX,MAAM,EACN,OAAO,EACP,KAAK,EACL,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,cAAc,EACd,cAAsC,EACtC,aAAa,EACb,UAAoB,EACpB,UAAU,EACV,IAAgB,EAChB,KAAa,EACb,SAAS,GACV,EAAE,cAAc,GAAG;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,+BAgGA;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"chart-bar-stacked.d.ts","sourceRoot":"","sources":["../../src/components/chart-bar-stacked.tsx"],"names":[],"mappings":"AAcA,OAAO,EAOL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAmBjC;;;;;;;;;GASG;AACH,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,OAAO,EACP,KAAK,EACL,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,cAAc,EACd,cAAsC,EACtC,aAAa,EACb,UAAU,EACV,UAAU,EACV,IAAgB,EAChB,KAAa,EACb,SAAS,GACV,EAAE,cAAc,GAAG;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,+BAgGA;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/chart-bar-stacked.js

@@ -27,11 +27,21 @@ function shareRadius(index, count) {
         return [0, 4, 4, 0];
     return [0, 0, 0, 0];
 }
-function ChartBarStacked({ title, description, action, summary, aside, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter = defaultValueFormatter, axisFormatter, otherLabel = "Other", emptyState, size = "default", share = false, className, }) {
+/**
+ * One total over time, each bar split by entity; with `share`, one bar split to 100%.
+ *
+ * @family Charts
+ * @when How a total moved over time split by Customer, member account or model; with `share`, what part of one total each holds, with no time axis.
+ * @instead For a continuous volume in three series or fewer use `ChartAreaStacked`. Two measures side by side use `ChartBarMultiple`. Exact lookup is a table.
+ * @behaviour Stacked in series order, bottom segment rounded below and top above at 4 px, bars at most 48 px. The Portal names five entities and folds the rest into "Everything else". The share plot is 64 px, legend included.
+ * @words Entity names as the reader knows them, never ids. The neutral remainder is "Everything else". Values through the page's shared money formatter.
+ * @access The plot is an image named by the card title; the tooltip and legend are read with it. The share bar sits above the full-width table that carries each figure.
+ */
+function ChartBarStacked({ title, period, controls, summary, aside, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter = defaultValueFormatter, axisFormatter, otherLabel, emptyState, size = "default", share = false, className, }) {
     const folded = foldOtherSeries(series, data, entityColorMap, otherLabel);
     const chartConfig = chartSeriesConfig(folded.series, entityColorMap);
     const domainMax = stackedAxisMax(folded.data, folded.series.map((entry) => entry.id));
-    return (_jsx(ChartCard, { title: title, description: description, action: action, summary: summary, aside: aside, footer: footer, ...(headingLevel ? { headingLevel } : {}), className: className, children: (titleId) => emptyState && data.length === 0 ? (emptyState) : share ? (_jsx(ChartContainer, { config: chartConfig, className: "aspect-auto h-16 w-full", children: _jsxs(BarChart, { accessibilityLayer: true, "aria-labelledby": titleId, data: folded.data, layout: "vertical", stackOffset: "expand", children: [_jsx(XAxis, { type: "number", hide: true }), _jsx(YAxis, { type: "category", dataKey: xKey, hide: true }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { hideLabel: true, indicator: "line", valueFormatter: valueFormatter }) }), _jsx(ChartLegend, { itemSorter: null, content: _jsx(ChartLegendContent, { className: CHART_LEGEND_CLASS }) }), folded.series.map((entry, index) => (_jsx(Bar, { dataKey: entry.id, stackId: "a", fill: entityColor(entityColorMap, entry.id), radius: shareRadius(index, folded.series.length) }, entry.id)))] }) })) : (_jsx(ChartContainer, { config: chartConfig, className: chartPlotClassName(size), children: _jsxs(BarChart, { accessibilityLayer: true, "aria-labelledby": titleId, data: folded.data, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: xKey, tickLine: false, tickMargin: 10, axisLine: false }), _jsx(YAxis, { width: "auto", tickLine: false, axisLine: false, tickMargin: 8, tickCount: CHART_Y_AXIS_TICK_COUNT, ...(domainMax === undefined
+    return (_jsx(ChartCard, { title: title, period: period, controls: controls, summary: summary, aside: aside, ...(footer ? { footer } : {}), ...(headingLevel ? { headingLevel } : {}), className: className, children: (titleId) => emptyState && data.length === 0 ? (emptyState) : share ? (_jsx(ChartContainer, { config: chartConfig, className: "aspect-auto h-16 w-full", children: _jsxs(BarChart, { accessibilityLayer: true, "aria-labelledby": titleId, data: folded.data, layout: "vertical", stackOffset: "expand", children: [_jsx(XAxis, { type: "number", hide: true }), _jsx(YAxis, { type: "category", dataKey: xKey, hide: true }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { hideLabel: true, indicator: "line", valueFormatter: valueFormatter }) }), _jsx(ChartLegend, { itemSorter: null, content: _jsx(ChartLegendContent, { className: CHART_LEGEND_CLASS }) }), folded.series.map((entry, index) => (_jsx(Bar, { dataKey: entry.id, stackId: "a", fill: entityColor(entityColorMap, entry.id), radius: shareRadius(index, folded.series.length) }, entry.id)))] }) })) : (_jsx(ChartContainer, { config: chartConfig, className: chartPlotClassName(size), children: _jsxs(BarChart, { accessibilityLayer: true, "aria-labelledby": titleId, data: folded.data, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: xKey, tickLine: false, tickMargin: 10, axisLine: false }), _jsx(YAxis, { width: "auto", tickLine: false, axisLine: false, tickMargin: 8, tickCount: CHART_Y_AXIS_TICK_COUNT, ...(domainMax === undefined
                             ? {}
                             : {
                                 domain: [0, domainMax],