@nadicodeai/ui 12.1.101 → 12.1.103

package/dist/components/card.d.ts

@@ -3,20 +3,14 @@ import { useRender } from "@base-ui/react/use-render";
 type CardSurface = "plain" | "resting" | "raised" | "outlined";
 type CardVariant = "default" | "interactive" | "link";
 /**
- * A resting surface that holds one thing: a header, content and a recessed footer.
+ * The surface of every card; on its own only a container inside a composition.
  *
  * @family Data
- * @when A bounded piece of a page that stands on its own: a settings section, a KPI, a chart, a
- * table. Usually reached through the composition that owns that job.
- * @instead A page's own header is never in a card. A row of a list is `Item`. A plane of brand
- * colour is `BrandField`.
- * @behaviour The resting material: 6 px corners and the rest shadow, no border of its own.
- * `CardHeader` lays out title, description and one `CardAction`; `CardFooter` is the recessed strip
- * behind one seam. `size="sm"` for a compact card in a side column.
- * @words The title is a noun phrase naming what the card holds; the description one sentence, only
- * when it adds something.
- * @access A plain container; give it `render={<section />}` with a heading when it is a region of
- * the page.
+ * @when "For in-product cards and dashboard tiles, use `Card`; Book is too decorative for repeated UI rows." (https://vercel.com/geist/book) Ours: only inside a composition that owns the job: the object card of an `ObjectPage`, the setting card of a `SettingsSection`, a KPI, a chart, a table. A new kind of card is a new composition, never a `Card` assembled at a call site.
+ * @instead "Groups related form controls inside a bordered card with optional footer actions." (https://vercel.com/geist/fieldset) Ours: that card, a title and description, one control and a footer with help at the start and one action at the end, is `SettingsSection`. An object's card (a header bar with its name and commands, a body of facts, rows that open, a footer hint with one link elsewhere) is `ObjectPage`. The page's title row is never in a card. A row of a list is `Item`. A plane of brand colour is `BrandField`.
+ * @behaviour "One Note per concept." (https://vercel.com/geist/note) "Stacking three Notes on a card means the page architecture, not the Note copy, is wrong." (https://vercel.com/geist/note) "Use the Error component as a block surface when a section or page-level resource failed to load: a panel, a dashboard card, a route boundary." (https://vercel.com/geist/error) Ours: the corner and shadow come with `surface`: a raised card takes the larger corner. Never set a corner at the call site. `CardHeader` lays out title, description and one `CardAction`, which stays at the title's right at every width when it is one control (a button, a badge, the three dots) and moves under the description in a header narrower than 28rem when it holds several; `CardFooter` is the recessed strip behind one seam: on the left one short muted line (a hint, a constraint, the plan a feature needs), on the right at most one button or link. It is 56 px high whether or not it holds a button, and as high as its lines in a `size="sm"` card, the compact card of a side column or a figure. The two kinds differ in what their header and footer hold: an object card's header holds the object's commands and its footer only a link, so it never saves; a setting card's header holds a title, a description and at most a switch that applies on change, and its footer holds the Save. A card is neutral; colour enters only through a status inside it or a section's `tone`.
+ * @words The title is a noun phrase naming what the card holds; the description one sentence directly under it, only when it adds something.
+ * @access A plain container; give it `render={<section />}` with a heading when it is a region of the page.
  */
 declare function Card({ className, render, size, surface, variant, ...props }: useRender.ComponentProps<"div"> & {
     size?: "default" | "sm";

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

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/components/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAItD,KAAK,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAC/D,KAAK,WAAW,GAAG,SAAS,GAAG,aAAa,GAAG,MAAM,CAAC;AAEtD;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,MAAM,EACN,IAAgB,EAChB,OAAmB,EACnB,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IACnC,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,0EAsBA;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWvE;AAED,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,qBAazD;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ5E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQvE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAIxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWvE;AAED,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,EACX,KAAK,WAAW,EAChB,KAAK,WAAW,GACjB,CAAC"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/components/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAItD,KAAK,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAC/D,KAAK,WAAW,GAAG,SAAS,GAAG,aAAa,GAAG,MAAM,CAAC;AAEtD;;;;;;;;;GASG;AACH,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,MAAM,EACN,IAAgB,EAChB,OAAmB,EACnB,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IACnC,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,0EAwBA;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWvE;AAED,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,qBAazD;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ5E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQvE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAIxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWvE;AAED,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,EACX,KAAK,WAAW,EAChB,KAAK,WAAW,GACjB,CAAC"}

package/dist/components/card.js

@@ -3,26 +3,21 @@ import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { cn } from "../lib/utils.js";
 /**
- * A resting surface that holds one thing: a header, content and a recessed footer.
+ * The surface of every card; on its own only a container inside a composition.
  *
  * @family Data
- * @when A bounded piece of a page that stands on its own: a settings section, a KPI, a chart, a
- * table. Usually reached through the composition that owns that job.
- * @instead A page's own header is never in a card. A row of a list is `Item`. A plane of brand
- * colour is `BrandField`.
- * @behaviour The resting material: 6 px corners and the rest shadow, no border of its own.
- * `CardHeader` lays out title, description and one `CardAction`; `CardFooter` is the recessed strip
- * behind one seam. `size="sm"` for a compact card in a side column.
- * @words The title is a noun phrase naming what the card holds; the description one sentence, only
- * when it adds something.
- * @access A plain container; give it `render={<section />}` with a heading when it is a region of
- * the page.
+ * @when "For in-product cards and dashboard tiles, use `Card`; Book is too decorative for repeated UI rows." (https://vercel.com/geist/book) Ours: only inside a composition that owns the job: the object card of an `ObjectPage`, the setting card of a `SettingsSection`, a KPI, a chart, a table. A new kind of card is a new composition, never a `Card` assembled at a call site.
+ * @instead "Groups related form controls inside a bordered card with optional footer actions." (https://vercel.com/geist/fieldset) Ours: that card, a title and description, one control and a footer with help at the start and one action at the end, is `SettingsSection`. An object's card (a header bar with its name and commands, a body of facts, rows that open, a footer hint with one link elsewhere) is `ObjectPage`. The page's title row is never in a card. A row of a list is `Item`. A plane of brand colour is `BrandField`.
+ * @behaviour "One Note per concept." (https://vercel.com/geist/note) "Stacking three Notes on a card means the page architecture, not the Note copy, is wrong." (https://vercel.com/geist/note) "Use the Error component as a block surface when a section or page-level resource failed to load: a panel, a dashboard card, a route boundary." (https://vercel.com/geist/error) Ours: the corner and shadow come with `surface`: a raised card takes the larger corner. Never set a corner at the call site. `CardHeader` lays out title, description and one `CardAction`, which stays at the title's right at every width when it is one control (a button, a badge, the three dots) and moves under the description in a header narrower than 28rem when it holds several; `CardFooter` is the recessed strip behind one seam: on the left one short muted line (a hint, a constraint, the plan a feature needs), on the right at most one button or link. It is 56 px high whether or not it holds a button, and as high as its lines in a `size="sm"` card, the compact card of a side column or a figure. The two kinds differ in what their header and footer hold: an object card's header holds the object's commands and its footer only a link, so it never saves; a setting card's header holds a title, a description and at most a switch that applies on change, and its footer holds the Save. A card is neutral; colour enters only through a status inside it or a section's `tone`.
+ * @words The title is a noun phrase naming what the card holds; the description one sentence directly under it, only when it adds something.
+ * @access A plain container; give it `render={<section />}` with a heading when it is a region of the page.
  */
 function Card({ className, render, size = "default", surface = "resting", variant = "default", ...props }) {
     const structure = cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden bg-card py-(--card-spacing) text-sm text-card-foreground [--card-spacing:var(--spacing-nadicode-card-padding)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:var(--spacing-nadicode-md)] data-[size=sm]:has-data-[slot=card-footer]:pb-0", variant === "interactive" && "cursor-pointer", variant === "link" && "nc-transition-paint");
+    const corner = surface === "raised" ? "rounded-lg" : "rounded-sm";
     const surfaceClassName = surface === "outlined"
-        ? cn(structure, "rounded-sm border border-border", className)
-        : cn(structure, "rounded-sm border-0 *:[img:first-child]:rounded-t-sm *:[img:last-child]:rounded-b-sm", surface === "resting" && "nc-elevation-resting", surface === "raised" && "nc-elevation-raised", className);
+        ? cn(structure, corner, "border border-border", className)
+        : cn(structure, corner, "border-0 *:[img:first-child]:rounded-t-[inherit] *:[img:last-child]:rounded-b-[inherit]", surface === "resting" && "nc-elevation-resting", surface === "raised" && "nc-elevation-raised", className);
     return useRender({
         defaultTagName: "div",
         props: mergeProps({ className: surfaceClassName }, props),
@@ -31,7 +26,7 @@ function Card({ className, render, size = "default", surface = "resting", varian
     });
 }
 function CardHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card-header", className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-sm px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[minmax(0,1fr)_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] *:data-[slot=card-description]:col-start-1 *:data-[slot=card-title]:col-start-1 [.border-b]:pb-(--card-spacing)", className), ...props }));
+    return (_jsx("div", { "data-slot": "card-header", className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-x-1 gap-y-2 rounded-t-[inherit] px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[minmax(0,1fr)_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] *:data-[slot=card-description]:col-start-1 *:data-[slot=card-title]:col-start-1 [.border-b]:pb-(--card-spacing)", className), ...props }));
 }
 function CardTitle({ className, focusTarget = false, ...props }) {
     return (_jsx("div", { "data-slot": "card-title", "data-focus-target": focusTarget || undefined, className: cn("text-heading-sm group-data-[size=sm]/card:text-heading-xs", focusTarget && "rounded-sm", className), ...props }));
@@ -46,6 +41,6 @@ function CardContent({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card-content", className: cn("px-(--card-spacing)", className), ...props }));
 }
 function CardFooter({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card-footer", className: cn("flex flex-wrap items-center gap-3 border-t border-border bg-recessed px-(--card-spacing) py-3", className), ...props }));
+    return (_jsx("div", { "data-slot": "card-footer", className: cn("mt-auto flex min-h-14 flex-wrap items-center gap-3 border-t border-border bg-recessed px-(--card-spacing) py-3 text-sm text-muted-foreground group-data-[size=sm]/card:min-h-0", className), ...props }));
 }
 export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/components/carousel.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
-import { Button } from "./button.js";
+import { type IconButtonPartProps } from "./button.js";
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
 type CarouselOptions = UseCarouselParameters[0];
@@ -35,7 +35,7 @@ declare function useCarousel(): CarouselContextProps;
 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;
-declare function CarouselPrevious({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
-declare function CarouselNext({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function CarouselPrevious({ className, variant, size, "aria-label": ariaLabel, ...props }: IconButtonPartProps): React.JSX.Element;
+declare function CarouselNext({ className, variant, size, "aria-label": ariaLabel, ...props }: IconButtonPartProps): React.JSX.Element;
 export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, useCarousel, };
 //# sourceMappingURL=carousel.d.ts.map

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;;;;;;;;;;;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"}
+{"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,EAAU,KAAK,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAGvE,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,YAAY,EAAE,SAA4B,EAC1C,GAAG,KAAK,EACT,EAAE,mBAAmB,qBAuBrB;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,YAAY,EAAE,SAAwB,EACtC,GAAG,KAAK,EACT,EAAE,mBAAmB,qBAuBrB;AAED,OAAO,EACL,KAAK,WAAW,EAChB,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,WAAW,GACZ,CAAC"}

package/dist/components/carousel.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import useEmblaCarousel from "embla-carousel-react";
 import { cn } from "../lib/utils.js";
@@ -89,16 +89,16 @@ function CarouselItem({ className, ...props }) {
     const { orientation } = useCarousel();
     return (_jsx("div", { role: "group", "aria-roledescription": "slide", "data-slot": "carousel-item", className: cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className), ...props }));
 }
-function CarouselPrevious({ className, variant = "outline", size = "icon-sm", ...props }) {
+function CarouselPrevious({ className, variant = "outline", size = "icon-sm", "aria-label": ariaLabel = "Previous slide", ...props }) {
     const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-    return (_jsxs(Button, { "data-slot": "carousel-previous", variant: variant, size: size, className: cn("absolute touch-manipulation", orientation === "horizontal"
+    return (_jsx(Button, { "data-slot": "carousel-previous", "aria-label": ariaLabel, variant: variant, size: size, className: cn("absolute touch-manipulation", orientation === "horizontal"
             ? "inset-y-0 -left-12 my-auto"
-            : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollPrev, onClick: scrollPrev, ...props, children: [_jsx(ChevronLeftIcon, {}), _jsx("span", { className: "sr-only", children: "Previous slide" })] }));
+            : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollPrev, onClick: scrollPrev, ...props, children: _jsx(ChevronLeftIcon, {}) }));
 }
-function CarouselNext({ className, variant = "outline", size = "icon-sm", ...props }) {
+function CarouselNext({ className, variant = "outline", size = "icon-sm", "aria-label": ariaLabel = "Next slide", ...props }) {
     const { orientation, scrollNext, canScrollNext } = useCarousel();
-    return (_jsxs(Button, { "data-slot": "carousel-next", variant: variant, size: size, className: cn("absolute touch-manipulation", orientation === "horizontal"
+    return (_jsx(Button, { "data-slot": "carousel-next", "aria-label": ariaLabel, variant: variant, size: size, className: cn("absolute touch-manipulation", orientation === "horizontal"
             ? "inset-y-0 -right-12 my-auto"
-            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollNext, onClick: scrollNext, ...props, children: [_jsx(ChevronRightIcon, {}), _jsx("span", { className: "sr-only", children: "Next slide" })] }));
+            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollNext, onClick: scrollNext, ...props, children: _jsx(ChevronRightIcon, {}) }));
 }
 export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, useCarousel, };

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

@@ -2,7 +2,7 @@ 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"> & {
+export type CatalogDrawerProps = Omit<FormSurfaceProps, "children" | "unsaved"> & {
     search: CollectionSearchProps;
     /** Already searched; undefined while the catalogue loads. */
     sections: readonly CatalogSection[] | undefined;
@@ -16,14 +16,14 @@ export type CatalogDrawerProps = Omit<FormSurfaceProps, "children"> & {
     done: string;
 };
 /**
- * A catalogue to choose from in the right-side drawer, each entry added from its own row.
+ * A catalogue to choose from in the right-side sheet, 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`.
+ * @when Ours: 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 "Don’t use Sheet to confirm destructive actions. The default `modal=false` keeps the page interactive, which weakens severity for a delete or revoke." (https://vercel.com/geist/sheet) Ours: 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 "Outside-click does not auto-close, so always render an explicit close affordance and honor Escape." (https://vercel.com/geist/sheet) Ours: a modal sheet from the right, as `FormDrawer`. 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 "Title is Title Case and names the entity (`Deployment Details`, `Member Profile`), not the page action." (https://vercel.com/geist/sheet) "Cancel literal stays `Cancel`. Acknowledgment-only Modals (after a key reveal, after a one-time-show) use `Done`, never `OK` or `Close`." (https://vercel.com/geist/modal) Ours: the title is sentence case and 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 "Trap focus inside the sheet while it’s open and return focus to the trigger row on close so keyboard users keep their place in the list." (https://vercel.com/geist/sheet) "Provide a visible close button labeled `Close` (or an icon button with `aria-label="Close"`) since clicking outside doesn’t dismiss." (https://vercel.com/geist/sheet) Ours: a modal dialog named by its title; focus starts in the search. 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

@@ -1 +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"}
+{"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,GAAG,SAAS,CAAC,GAAG;IAChF,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

@@ -7,14 +7,14 @@ 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.
+ * A catalogue to choose from in the right-side sheet, 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`.
+ * @when Ours: 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 "Don’t use Sheet to confirm destructive actions. The default `modal=false` keeps the page interactive, which weakens severity for a delete or revoke." (https://vercel.com/geist/sheet) Ours: 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 "Outside-click does not auto-close, so always render an explicit close affordance and honor Escape." (https://vercel.com/geist/sheet) Ours: a modal sheet from the right, as `FormDrawer`. 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 "Title is Title Case and names the entity (`Deployment Details`, `Member Profile`), not the page action." (https://vercel.com/geist/sheet) "Cancel literal stays `Cancel`. Acknowledgment-only Modals (after a key reveal, after a one-time-show) use `Done`, never `OK` or `Close`." (https://vercel.com/geist/modal) Ours: the title is sentence case and 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 "Trap focus inside the sheet while it’s open and return focus to the trigger row on close so keyboard users keep their place in the list." (https://vercel.com/geist/sheet) "Provide a visible close button labeled `Close` (or an icon button with `aria-label="Close"`) since clicking outside doesn’t dismiss." (https://vercel.com/geist/sheet) Ours: a modal dialog named by its title; focus starts in the search. 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 }) })] }));

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

@@ -9,6 +9,6 @@ import { type ChartCardProps } from "./chart-card.js";
  * @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;
+declare function ChartAreaStacked({ title, period, controls, link, 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;;;;;;;;;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"}
+{"version":3,"file":"chart-area-stacked.d.ts","sourceRoot":"","sources":["../../src/components/chart-area-stacked.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAOL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAGjC;;;;;;;;;GASG;AACH,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,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,+BAiFhB;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

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

@@ -4,7 +4,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
 import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from "./chart.js";
-import { CHART_Y_AXIS_TICK_COUNT, niceAxisTicks, stackedAxisMax } from "./chart-axis.js";
+import { CHART_X_AXIS_TICKS, 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";
 /**
@@ -17,14 +17,14 @@ import { entityColor } from "./chart-entity-colors.js";
  * @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, }) {
+function ChartAreaStacked({ title, period, controls, link, 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, 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: {
+    return (_jsx(ChartCard, { title: title, period: period, controls: controls, ...(link ? { link } : {}), 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
+                }, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: xKey, tickLine: false, axisLine: false, tickMargin: 8, ...CHART_X_AXIS_TICKS }), _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-axis.d.ts

@@ -8,6 +8,19 @@
  * y axis of five ticks whose maximum is rounded up to a step a reader counts
  * in: 1, 2, 2.5, 5 or 10 per order of magnitude.
  */
+/**
+ * The category axis labels every Nth period from the first, the same N across
+ * the plot: every second day where the labels fit, as OpenRouter's daily charts
+ * do, and every third or fourth in a half-width card. Recharts' default fits
+ * labels by their own widths, so a short "Oct 1" squeezed in beside "Oct 2"
+ * while "Sep 30" was dropped. Anchoring the step on the latest period instead
+ * left a half-width chart with that one label, cut by the card's edge, because
+ * Recharts always draws the anchor and the latest label overflows the plot.
+ */
+declare const CHART_X_AXIS_TICKS: {
+    readonly interval: "equidistantPreserveStart";
+    readonly minTickGap: 12;
+};
 /** Ticks the y axis draws, ends included. */
 declare const CHART_Y_AXIS_TICK_COUNT = 5;
 declare function niceStep(rawStep: number): number;
@@ -34,5 +47,5 @@ declare function stackedAxisMax(data: readonly AxisDatum[], keys: readonly strin
  * a zero-based one.
  */
 declare function seriesAxisMax(data: readonly AxisDatum[], keys: readonly string[]): number | undefined;
-export { CHART_Y_AXIS_TICK_COUNT, niceAxisMax, niceAxisTicks, niceStep, seriesAxisMax, stackedAxisMax, };
+export { CHART_X_AXIS_TICKS, CHART_Y_AXIS_TICK_COUNT, niceAxisMax, niceAxisTicks, niceStep, seriesAxisMax, stackedAxisMax, };
 //# sourceMappingURL=chart-axis.d.ts.map

package/dist/components/chart-axis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-axis.d.ts","sourceRoot":"","sources":["../../src/components/chart-axis.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,6CAA6C;AAC7C,QAAA,MAAM,uBAAuB,IAAI,CAAC;AAKlC,iBAAS,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAMzC;AAED;;;;GAIG;AACH,iBAAS,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAIpD;AAED;;;;;GAKG;AACH,iBAAS,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,EAAE,GAAG,SAAS,CAOpE;AAED,KAAK,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAEjD,0EAA0E;AAC1E,iBAAS,cAAc,CAAC,IAAI,EAAE,SAAS,SAAS,EAAE,EAAE,IAAI,EAAE,SAAS,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,CAY/F;AAED;;;;;GAKG;AACH,iBAAS,aAAa,CAAC,IAAI,EAAE,SAAS,SAAS,EAAE,EAAE,IAAI,EAAE,SAAS,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,CAY9F;AAED,OAAO,EACL,uBAAuB,EACvB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,aAAa,EACb,cAAc,GACf,CAAC"}
+{"version":3,"file":"chart-axis.d.ts","sourceRoot":"","sources":["../../src/components/chart-axis.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH;;;;;;;;GAQG;AACH,QAAA,MAAM,kBAAkB;;;CAAoE,CAAC;AAE7F,6CAA6C;AAC7C,QAAA,MAAM,uBAAuB,IAAI,CAAC;AAKlC,iBAAS,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAMzC;AAED;;;;GAIG;AACH,iBAAS,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAIpD;AAED;;;;;GAKG;AACH,iBAAS,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,EAAE,GAAG,SAAS,CAOpE;AAED,KAAK,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAEjD,0EAA0E;AAC1E,iBAAS,cAAc,CAAC,IAAI,EAAE,SAAS,SAAS,EAAE,EAAE,IAAI,EAAE,SAAS,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,CAY/F;AAED;;;;;GAKG;AACH,iBAAS,aAAa,CAAC,IAAI,EAAE,SAAS,SAAS,EAAE,EAAE,IAAI,EAAE,SAAS,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,CAY9F;AAED,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,aAAa,EACb,cAAc,GACf,CAAC"}

package/dist/components/chart-axis.js

@@ -8,6 +8,16 @@
  * y axis of five ticks whose maximum is rounded up to a step a reader counts
  * in: 1, 2, 2.5, 5 or 10 per order of magnitude.
  */
+/**
+ * The category axis labels every Nth period from the first, the same N across
+ * the plot: every second day where the labels fit, as OpenRouter's daily charts
+ * do, and every third or fourth in a half-width card. Recharts' default fits
+ * labels by their own widths, so a short "Oct 1" squeezed in beside "Oct 2"
+ * while "Sep 30" was dropped. Anchoring the step on the latest period instead
+ * left a half-width chart with that one label, cut by the card's edge, because
+ * Recharts always draws the anchor and the latest label overflows the plot.
+ */
+const CHART_X_AXIS_TICKS = { interval: "equidistantPreserveStart", minTickGap: 12 };
 /** Ticks the y axis draws, ends included. */
 const CHART_Y_AXIS_TICK_COUNT = 5;
 /** The steps a reader counts in, per order of magnitude. */
@@ -82,4 +92,4 @@ function seriesAxisMax(data, keys) {
     }
     return niceAxisMax(max);
 }
-export { CHART_Y_AXIS_TICK_COUNT, niceAxisMax, niceAxisTicks, niceStep, seriesAxisMax, stackedAxisMax, };
+export { CHART_X_AXIS_TICKS, CHART_Y_AXIS_TICK_COUNT, niceAxisMax, niceAxisTicks, niceStep, seriesAxisMax, stackedAxisMax, };

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

@@ -11,9 +11,9 @@ declare function signedAxis(data: readonly Record<string, number | string>[], va
  * @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: every category keeps its label on one line, a long one cut with an ellipsis and whole in the tooltip.
+ * @access Each bar's sign is in its position and its tooltip, never only its colour. Category labels are text, readable without hue: the axis is as wide as the longest label up to 128 px, a longer one wraps to a second line and only past that is cut with an ellipsis, whole in the tooltip.
  */
-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"> & {
+declare function ChartBarHorizontal({ title, period, controls, link, 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;AAsBjC,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,+BA8GA;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;AAoCjC,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,IAAI,EACJ,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,+BA+GA;AAED,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC"}

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

@@ -11,10 +11,19 @@ const POSITIVE_BAR_COLOR = "var(--success)";
 const NEGATIVE_BAR_COLOR = "var(--destructive)";
 /**
  * Recharts keeps only SVG attributes from a `tick` object, so `maxLines` reaches
- * its `Text` only through a tick it renders: one line, cut with an ellipsis.
+ * its `Text` only through a tick it renders: up to two lines, then an ellipsis.
  */
 function CategoryTick({ payload, ...props }) {
-    return (_jsx(Text, { ...props, maxLines: 1, children: payload.value }));
+    return (_jsx(Text, { ...props, maxLines: 2, children: payload.value }));
+}
+/** About one 12 px character, and the bounds that keep a name whole on two lines without starving the bars. */
+const CATEGORY_CHAR_WIDTH = 6.6;
+const CATEGORY_AXIS_MIN = 64;
+const CATEGORY_AXIS_MAX = 128;
+/** The category axis as wide as its longest name up to the bound; a longer name wraps to a second line. */
+function categoryAxisWidth(data, xKey) {
+    const longest = data.reduce((most, datum) => Math.max(most, String(datum[xKey] ?? "").length), 0);
+    return Math.min(CATEGORY_AXIS_MAX, Math.max(CATEGORY_AXIS_MIN, Math.ceil(longest * CATEGORY_CHAR_WIDTH) + 16));
 }
 function signedAxis(data, valueKey) {
     const values = data.flatMap((datum) => {
@@ -53,9 +62,9 @@ function signedAxis(data, valueKey) {
  * @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: every category keeps its label on one line, a long one cut with an ellipsis and whole in the tooltip.
+ * @access Each bar's sign is in its position and its tooltip, never only its colour. Category labels are text, readable without hue: the axis is as wide as the longest label up to 128 px, a longer one wraps to a second line and only past that is cut with an ellipsis, whole in the tooltip.
  */
-function ChartBarHorizontal({ title, period, controls, summary, aside, footer, headingLevel, data, xKey, valueKey, displayKey, categoryDisplayKey, positiveLabel, negativeLabel, valueFormatter = defaultValueFormatter, axisFormatter, emptyState, size = "default", className, }) {
+function ChartBarHorizontal({ title, period, controls, link, 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];
@@ -71,7 +80,7 @@ function ChartBarHorizontal({ title, period, controls, summary, aside, footer, h
         [POSITIVE_KEY]: { label: positiveLabel, color: POSITIVE_BAR_COLOR },
         [NEGATIVE_KEY]: { label: negativeLabel, color: NEGATIVE_BAR_COLOR },
     };
-    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, interval: 0, tick: CategoryTick, 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, ...(link ? { link } : {}), 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: categoryAxisWidth(data, xKey), interval: 0, tick: CategoryTick, 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

@@ -9,6 +9,6 @@ import { type ChartCardProps } from "./chart-card.js";
  * @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, period, controls, 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, link, 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;;;;;;;;;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"}
+{"version":3,"file":"chart-bar-multiple.d.ts","sourceRoot":"","sources":["../../src/components/chart-bar-multiple.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAOL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAGjC;;;;;;;;;GASG;AACH,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,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,+BAuEhB;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

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

@@ -4,7 +4,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
 import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from "./chart.js";
-import { CHART_Y_AXIS_TICK_COUNT, niceAxisTicks, seriesAxisMax } from "./chart-axis.js";
+import { CHART_X_AXIS_TICKS, CHART_Y_AXIS_TICK_COUNT, niceAxisTicks, seriesAxisMax, } from "./chart-axis.js";
 import { CHART_LEGEND_CLASS, ChartCard, chartPlotClassName, chartSeriesConfig, defaultValueFormatter, foldOtherSeries, } from "./chart-card.js";
 import { entityColor } from "./chart-entity-colors.js";
 /**
@@ -17,11 +17,11 @@ import { entityColor } from "./chart-entity-colors.js";
  * @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, period, controls, summary, aside, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter = defaultValueFormatter, axisFormatter, otherLabel, emptyState, size = "default", className, }) {
+function ChartBarMultiple({ title, period, controls, link, 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, 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
+    return (_jsx(ChartCard, { title: title, period: period, controls: controls, ...(link ? { link } : {}), 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, ...CHART_X_AXIS_TICKS }), _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

@@ -9,7 +9,7 @@ import { type ChartCardProps } from "./chart-card.js";
  * @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 & {
+declare function ChartBarStacked({ title, period, controls, link, 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;;;;;;;;;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"}
+{"version":3,"file":"chart-bar-stacked.d.ts","sourceRoot":"","sources":["../../src/components/chart-bar-stacked.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAOL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAmBjC;;;;;;;;;GASG;AACH,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,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,+BAuGA;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

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

@@ -4,7 +4,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
 import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from "./chart.js";
-import { CHART_Y_AXIS_TICK_COUNT, niceAxisTicks, stackedAxisMax } from "./chart-axis.js";
+import { CHART_X_AXIS_TICKS, 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";
 /** Stock stacked-bar corner radius: the bottom bar rounds down, the top bar up. */
@@ -37,11 +37,11 @@ function shareRadius(index, count) {
  * @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, }) {
+function ChartBarStacked({ title, period, controls, link, 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, 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
+    return (_jsx(ChartCard, { title: title, period: period, controls: controls, ...(link ? { link } : {}), 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, ...CHART_X_AXIS_TICKS }), _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-card.d.ts

@@ -25,13 +25,22 @@ type ChartSummaryProps = {
     trend?: ChartSummaryTrend;
     status?: React.ReactNode;
 };
-/** The footer strip: when the reading was taken, left; the way to its owner, right. */
+/** The footer strip: when the reading was taken, left; a command on the reading itself, right. */
 type ChartCardFooter = {
     /** "Read at 12:42", "Updated 4 minutes ago". */
     reading: React.ReactNode;
-    /** "Open in Analytics". */
+    /** A command on the reading, such as Refresh; the way to its owner is the header's `link`. */
     link?: PageCommand;
 };
+/** The way to the reading's owner, at the header's trailing edge: OpenRouter's "Explore ›". */
+type ChartCardLink = {
+    /** "Explore", "Open in Analytics". */
+    label: string;
+    /** Read instead of the label when it alone does not name the target: "Explore Usage by model". */
+    accessibleName?: string;
+    /** The app's link element, e.g. `<Link href="/analytics/explore?…" />`. */
+    link: React.ReactElement;
+};
 type ChartCardProps = {
     /** Names the measure and its split: "Model spend by Customer". */
     title: React.ReactNode;
@@ -41,6 +50,8 @@ type ChartCardProps = {
     headingLevel?: 2 | 3 | 4;
     /** At the header's trailing edge: the metric `ToggleGroup`, and a period `Select` where the page has none. */
     controls?: React.ReactNode;
+    /** After the controls at the header's trailing edge: the way to the reading's owner. */
+    link?: ChartCardLink;
     /** A `ChartSummary` between the header and the plot. */
     summary?: React.ReactNode;
     /** A ranking beside the plot on wide cards, never a second card. */
@@ -86,11 +97,11 @@ declare function foldOtherSeries(series: readonly ChartSeries[], data: readonly
  * @family Charts
  * @when Every chart and every reading built around one: the frame a page never builds by hand. A chart is a named section of its page.
  * @instead A single figure is a `KpiCard`, never nested inside a chart. A ranking beside the plot goes in the card's `aside`, not a second card.
- * @behaviour Header grid: title and period in the first column, controls in the second from a 28 rem card width, under the title below it. Summary, plot, legend, footer in that order. An empty dataset shows its `emptyState` in the plot's place. The footer is a recessed strip behind a hairline: the reading's time left, the link to its owner right.
- * @words Title names the measure and its split: "Model spend by Customer". Period as dates. Footer: the reading's time, "Updated 4 minutes ago" or "Read at 12:42", and the way to its owner, "Open in Analytics". Sentence case throughout.
+ * @behaviour Header grid: title and period in the first column, controls and then the link to the reading's owner (a small ghost button ending in a chevron, as OpenRouter's "Explore ›") in the second from a 28 rem card width, under the title below it; a link with no controls stays at the trailing edge at every width. Summary, plot, legend, footer in that order. An empty dataset shows its `emptyState` in the plot's place. The footer is a recessed strip behind a hairline: the reading's time left, a command on the reading (Refresh) right.
+ * @words Title names the measure and its split: "Model spend by Customer". Period as dates. The link: "Explore", or "Open in Analytics" where the owner is another page. Footer: the reading's time, "Updated 4 minutes ago" or "Read at 12:42". Sentence case throughout.
  * @access The title is a heading at the page's level (default 2) and labels the plot. The plot is focusable and shows the 2 px focus outline only on keyboard focus.
  */
-declare function ChartCard({ title, period, controls, summary, aside, footer, headingLevel, className, children, }: Pick<ChartCardProps, "title" | "period" | "controls" | "summary" | "aside" | "footer" | "headingLevel" | "className"> & {
+declare function ChartCard({ title, period, controls, link, summary, aside, footer, headingLevel, className, children, }: Pick<ChartCardProps, "title" | "period" | "controls" | "link" | "summary" | "aside" | "footer" | "headingLevel" | "className"> & {
     /** Receives the title's id, which the plot takes as `aria-labelledby`. */
     children: (titleId: string) => React.ReactNode;
 }): React.JSX.Element;
@@ -106,5 +117,5 @@ declare const CHART_FOCUS_CLASS = "[&_.recharts-surface:focus-visible]:nc-focus-
 /** Legend below the plot, left-aligned, wrapping to a second line. */
 declare const CHART_LEGEND_CLASS = "flex-wrap justify-start";
 export { CHART_FOCUS_CLASS, CHART_LEGEND_CLASS, ChartCard, ChartSummary, chartPlotClassName, chartSeriesConfig, defaultValueFormatter, foldOtherSeries, };
-export type { ChartCardFooter, ChartCardProps, ChartCardSize, ChartDatum, ChartSeries, ChartSummaryProps, ChartSummaryTrend, };
+export type { ChartCardFooter, ChartCardLink, ChartCardProps, ChartCardSize, ChartDatum, ChartSeries, ChartSummaryProps, ChartSummaryTrend, };
 //# sourceMappingURL=chart-card.d.ts.map