@nadicodeai/ui 12.1.142 → 12.1.144

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -8,7 +8,7 @@ type CardVariant = "default" | "interactive" | "link";
8
8
  * @family Data
9
9
  * @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.
10
10
  * @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`.
11
- * @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. `surface` defaults to `resting`, the resting height of "Elevation & Depth" in DESIGN.md. `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, a sparkline, the three dots), as Vercel keeps a card's Add on its title row on a phone, and moves under the description in a header narrower than 28rem when it holds several (the header's own width, not the viewport's); `CardFooter` is a strip in the `recessed` role, one tone off the card body inside the card's edge, behind one seam in the border colour: `canvas-soft` below the white card in light, and `dark-canvas` below the resting body in dark; on the left one short muted line, only where it says something specific to that card (a limit such as *Please use 32 characters at maximum.*, what a value is for, the plan a feature needs or a link to learn more) and never one sentence every card repeats, on the right at most one button or link, the section's action. 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`.
11
+ * @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. `surface` defaults to `resting`, the resting height of "Elevation & Depth" in DESIGN.md. `CardHeader` lays out title, description and one `CardAction`. An action of one control (a button, a badge, a sparkline, the three dots) stands at the title's right, as Vercel keeps a card's Add on its title row on a phone; on a card narrower than 28rem the description runs under both, and the control moves under the title only when the title's longest word would not fit beside it, so it never covers it. An action of several controls moves under the description in a header narrower than 28rem (the header's own width, not the viewport's); `CardFooter` is a strip in the `recessed` role, one tone off the card body inside the card's edge, behind one seam in the border colour: `canvas-soft` below the white card in light, and `dark-canvas` below the resting body in dark; on the left one short muted line, only where it says something specific to that card (a limit such as *Please use 32 characters at maximum.*, what a value is for, the plan a feature needs or a link to learn more) and never one sentence every card repeats, on the right at most one button or link, the section's action. 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`.
12
12
  * @words The title is a noun phrase naming what the card holds; the description one sentence directly under it, only when it adds something.
13
13
  * @access A plain container; give it `render={<section />}` with a heading when it is a region of the page.
14
14
  */
@@ -17,7 +17,15 @@ declare function Card({ className, render, size, surface, variant, ...props }: u
17
17
  surface?: CardSurface;
18
18
  variant?: CardVariant;
19
19
  }): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
20
- declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
20
+ declare function CardHeader({ className, narrowAction, ...props }: React.ComponentProps<"div"> & {
21
+ /**
22
+ * Where the action stands on a card narrower than 28rem. Left out, one control keeps the
23
+ * title's row while the title's longest word fits beside it and several move under the
24
+ * description; `title-row` keeps any action there that way; `own` leaves it to the composition's
25
+ * own classes.
26
+ */
27
+ narrowAction?: "title-row" | "own";
28
+ }): React.JSX.Element;
21
29
  declare function CardTitle({ className, focusTarget, ...props }: React.ComponentProps<"div"> & {
22
30
  focusTarget?: boolean;
23
31
  }): React.JSX.Element;
@@ -1 +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;;;;;;;;;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"}
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;;;;;;;;;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,EAClB,SAAS,EACT,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,WAAW,GAAG,KAAK,CAAC;CACpC,qBAgBA;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"}
@@ -8,7 +8,7 @@ import { cn } from "../lib/utils.js";
8
8
  * @family Data
9
9
  * @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.
10
10
  * @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`.
11
- * @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. `surface` defaults to `resting`, the resting height of "Elevation & Depth" in DESIGN.md. `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, a sparkline, the three dots), as Vercel keeps a card's Add on its title row on a phone, and moves under the description in a header narrower than 28rem when it holds several (the header's own width, not the viewport's); `CardFooter` is a strip in the `recessed` role, one tone off the card body inside the card's edge, behind one seam in the border colour: `canvas-soft` below the white card in light, and `dark-canvas` below the resting body in dark; on the left one short muted line, only where it says something specific to that card (a limit such as *Please use 32 characters at maximum.*, what a value is for, the plan a feature needs or a link to learn more) and never one sentence every card repeats, on the right at most one button or link, the section's action. 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`.
11
+ * @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. `surface` defaults to `resting`, the resting height of "Elevation & Depth" in DESIGN.md. `CardHeader` lays out title, description and one `CardAction`. An action of one control (a button, a badge, a sparkline, the three dots) stands at the title's right, as Vercel keeps a card's Add on its title row on a phone; on a card narrower than 28rem the description runs under both, and the control moves under the title only when the title's longest word would not fit beside it, so it never covers it. An action of several controls moves under the description in a header narrower than 28rem (the header's own width, not the viewport's); `CardFooter` is a strip in the `recessed` role, one tone off the card body inside the card's edge, behind one seam in the border colour: `canvas-soft` below the white card in light, and `dark-canvas` below the resting body in dark; on the left one short muted line, only where it says something specific to that card (a limit such as *Please use 32 characters at maximum.*, what a value is for, the plan a feature needs or a link to learn more) and never one sentence every card repeats, on the right at most one button or link, the section's action. 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`.
12
12
  * @words The title is a noun phrase naming what the card holds; the description one sentence directly under it, only when it adds something.
13
13
  * @access A plain container; give it `render={<section />}` with a heading when it is a region of the page.
14
14
  */
@@ -25,8 +25,10 @@ function Card({ className, render, size = "default", surface = "resting", varian
25
25
  state: { size, slot: "card", surface, variant },
26
26
  });
27
27
  }
28
- function CardHeader({ className, ...props }) {
29
- 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 }));
28
+ function CardHeader({ className, narrowAction, ...props }) {
29
+ // A container query never styles its own container, and the header is the one its children
30
+ // read: `components.css` wraps the header on a narrow card by the frame's width.
31
+ return (_jsx("div", { "data-slot": "card-header-frame", className: "@container/card-header-frame rounded-t-[inherit]", children: _jsx("div", { "data-slot": "card-header", "data-narrow-action": narrowAction, 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 }) }));
30
32
  }
31
33
  function CardTitle({ className, focusTarget = false, ...props }) {
32
34
  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 }));
@@ -1 +1 @@
1
- {"version":3,"file":"chart-card.d.ts","sourceRoot":"","sources":["../../src/components/chart-card.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"chart-card.d.ts","sourceRoot":"","sources":["../../src/components/chart-card.tsx"],"names":[],"mappings":"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"}
@@ -69,7 +69,7 @@ function foldOtherSeries(series, data, entityColorMap, otherLabel) {
69
69
  */
70
70
  function ChartCard({ variant = "default", title, period, controls, link, summary, aside, footer, headingLevel = 2, className, children, }) {
71
71
  const titleId = React.useId();
72
- return (_jsxs(Card, { "data-slot": "chart-card", className: cn("@container/chart-card", className), children: [_jsxs(CardHeader, { className: cn(variant === "summary"
72
+ return (_jsxs(Card, { "data-slot": "chart-card", className: cn("@container/chart-card", className), children: [_jsxs(CardHeader, { narrowAction: variant === "summary" || controls ? "own" : undefined, className: cn(variant === "summary"
73
73
  ? "flex flex-wrap items-center gap-3"
74
74
  : controls && CONTROLS_UNDER_TITLE_WHEN_NARROW), children: [_jsx(CardTitle, { id: titleId, role: "heading", "aria-level": headingLevel, className: variant === "summary" ? "text-heading-xs" : undefined, children: title }), variant === "summary" ? controls : null, period && variant !== "summary" ? _jsx(CardDescription, { children: period }) : null, (variant === "summary" ? link : controls || link) ? (_jsxs(CardAction, { className: cn("flex flex-wrap items-center gap-2", variant === "summary" && "ml-auto"), children: [variant === "summary" ? null : controls, link ? (_jsx(ButtonLink, { variant: "ghost", size: "sm", suffix: _jsx(ChevronRight, { "aria-hidden": "true" }), "aria-label": link.accessibleName, render: link.link, children: link.label })) : null] })) : null] }), summary && variant !== "summary" ? (_jsx("div", { "data-slot": "chart-card-summary", className: "px-(--card-spacing)", children: summary })) : null, _jsxs(CardContent, { className: cn(aside &&
75
75
  "grid min-w-0 gap-(--card-spacing) @3xl/chart-card:grid-cols-[minmax(0,2fr)_minmax(16rem,1fr)]"), children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-4", children: [variant === "summary" && (summary || period) ? (_jsxs("div", { "data-slot": "chart-card-summary", className: "flex flex-wrap items-start justify-between gap-3", children: [summary, period ? _jsx(CardDescription, { children: period }) : null] })) : null, children(titleId)] }), aside ? (_jsx("aside", { "data-slot": "chart-card-aside", className: "min-w-0 border-t border-border pt-(--card-spacing) @3xl/chart-card:border-t-0 @3xl/chart-card:border-l @3xl/chart-card:pt-0 @3xl/chart-card:pl-(--card-spacing)", children: aside })) : null] }), footer ? (_jsx(FooterStrip, { hint: footer.reading, hintSlot: "chart-card-reading", children: footer.link ? _jsx(PageCommandButton, { command: footer.link, variant: "ghost" }) : null })) : null] }));
@@ -189,7 +189,7 @@ export type RecordListWithout<TRecord extends RowData, Key extends PropertyKey>
189
189
  * @instead “For tabular data with sortable columns and shared row shape, use `Table` instead.” (https://vercel.com/geist/entity)
190
190
  * “For a static key/value metadata block on a detail page, use `Description`.” (https://vercel.com/geist/entity)
191
191
  * Ours: Geist's `Table` is a `DataTable`: this list has no visible headings and at most three facts, so a fourth fact is a table, and anything more than a few facts lives on the record's page. A screen gives `RecordList` the records and what each one says, never its own toolbar, table, rows or menus, and nothing else draws a record row. Its `Description` is `ObjectFacts`. Events in time are an `ActivityFeed`. Reusable things a person adds from a catalogue are a `LibraryShelf`. A descriptive row with prose is an `Item`.
192
- * @behaviour One bordered card, a 1 px rule between records and none after the last. A row is 72 px, with 16 px above and below, and its columns stand left to right at the widths the list declares, so a person reads every list the same way: the `select` box (40 px, only when the list is picked from, an optional column), the identity (the rest: the one column without a size), the facts (each its `size`), the status (`status.size`), the time (`time.size`, tabular), the `checklist` ring (52 px, only when the record has steps to be ready) and the commands (`commandsSize`; left out, 64 px for the three dots alone). A `checklist` puts the record's `ProgressChecklist` ring just before its commands, where Vercel ends a project's row with its Production Checklist; the ring opens its own drawer, never the row. Every row has its 32 px mark, its name (600) and, under it, one muted 14 px line; `name` and the mark are required; a record with nothing to say under its name leaves the line out and is the name alone, never a dash. Give every column a `size` in pixels; the name takes the rest. With `layout="line"`, as on Vercel's Projects page, the facts and the status share one muted line, joined by a middle dot, in a column as wide as the name's, and the row stays one line (mark, name over its line, that summary, the time, the ring, the three dots) on a card from 448 px, and on a narrower card the summary and the time move under the name as muted text joined by a middle dot that wraps, in the same row, their labels read by assistive technology only. Rows of `columns` follow the same rule once the card is narrower than their columns: the facts and the time leave the row for that muted text, wrapping so every value stays readable, never a labelled list, and the status stands beside the name, which ends in an ellipsis before it, so the exception is never the part a phone's line cuts. `facts` takes at most three. A menu of one command that is not destructive, with no row command, is that command's button, except in a `line` row, which keeps it in the three dots as Vercel's project row does; without a `commandsSize` the column is as wide as the widest such button, so its label is never cut. Status is only for the exception, empty for the usual record, and its column stands only while a record in the list shows one, so the name and its line keep the room; the commands column likewise stands only while a record has a command, a menu or a message, or the rows open, and it widens for a failed action's next steps only while a row shows one. Never the three dots before the button, a decorative icon for the record's mark, a status on every row, or a destructive button on every row: a destructive command stays in the three dots. A `line` row's summary joins only the facts the record has, so it never ends in a dot. A failed or refused action of the record shows as its catalogue message inside its own row, never a notice under the row: it replaces the detail line, with its next steps beside its commands, or under the message on a card too narrow for the row's columns. With `open` the whole row is one target and takes the `accent` hover, and a row that only opens ends in a muted chevron; a row that opens nothing never reacts to hover. With `editor` the record's row opens its form under its line. `empty` is required: `null` is the choice to draw nothing for a list with no records, and any other value is the state it draws. A note about the whole list is `footer.note`: one muted line, an optional *Learn more* after it at the left and one secondary action at the right, in a strip of its own under the count and the paging, as Vercel ends its deployments list ("Deployment retention is enabled. Learn more", *View recently deleted*). Colour is neutral, the name in ink and every other cell in the body grey, except the status badge and a failed action's message.
192
+ * @behaviour One bordered card, a 1 px rule between records and none after the last. A row is 72 px, with 16 px above and below, and its columns stand left to right at the widths the list declares, so a person reads every list the same way: the `select` box (40 px, only when the list is picked from, an optional column), the identity (the rest: the one column without a size), the facts (each its `size`), the status (`status.size`), the time (`time.size`, tabular), the `checklist` ring (52 px, only when the record has steps to be ready) and the commands (`commandsSize`; left out, 64 px for the three dots alone). A `checklist` puts the record's `ProgressChecklist` ring just before its commands, where Vercel ends a project's row with its Production Checklist; the ring opens its own drawer, never the row. Every row has its 32 px mark, its name (600) and, under it, one muted 14 px line; `name` and the mark are required; a record with nothing to say under its name leaves the line out and is the name alone, never a dash. Give every column a `size` in pixels; the name takes the rest. With `layout="line"`, as on Vercel's Projects page, the facts and the status share one muted line, joined by a middle dot, in a column as wide as the name's, and the row stays one line (mark, name over its line, that summary, the time, the ring, the three dots) on a card from 448 px, and on a narrower card the summary and the time move under the name as muted text joined by a middle dot that wraps, the status keeping its mark whole and breaking between its words only when it alone is wider than the line, in the same row, their labels read by assistive technology only. Rows of `columns` follow the same rule once the card is narrower than their columns: the facts and the time leave the row for that muted text, wrapping so every value stays readable, never a labelled list, and the status stands beside the name, which ends in an ellipsis before it, so the exception is never the part a phone's line cuts. `facts` takes at most three. A menu of one command that is not destructive, with no row command, is that command's button, except in a `line` row, which keeps it in the three dots as Vercel's project row does; without a `commandsSize` the column is as wide as the widest such button, so its label is never cut. Status is only for the exception, empty for the usual record, and its column stands only while a record in the list shows one, so the name and its line keep the room; the commands column likewise stands only while a record has a command, a menu or a message, or the rows open, and it widens for a failed action's next steps only while a row shows one. Never the three dots before the button, a decorative icon for the record's mark, a status on every row, or a destructive button on every row: a destructive command stays in the three dots. A `line` row's summary joins only the facts the record has, so it never ends in a dot. A failed or refused action of the record shows as its catalogue message inside its own row, never a notice under the row: it replaces the detail line, with its next steps beside its commands, or under the message on a card too narrow for the row's columns. With `open` the whole row is one target and takes the `accent` hover, and a row that only opens ends in a muted chevron; a row that opens nothing never reacts to hover. With `editor` the record's row opens its form under its line. `empty` is required: `null` is the choice to draw nothing for a list with no records, and any other value is the state it draws. A note about the whole list is `footer.note`: one muted line, an optional *Learn more* after it at the left and one secondary action at the right, in a strip of its own under the count and the paging, as Vercel ends its deployments list ("Deployment retention is enabled. Learn more", *View recently deleted*). Colour is neutral, the name in ink and every other cell in the body grey, except the status badge and a failed action's message.
193
193
  * “Pick the variant by what the user needs: no-results for a filtered list that returned zero rows, blank slate or informational for a resource the user hasn’t created, cleared for completed work, permission for role or tier denials, error for a failed load.” (https://vercel.com/geist/empty-state)
194
194
  * Ours: `failed`, `noMatch` and `empty` are those variants, drawn inside the card.
195
195
  * “The right column holds at most one or two controls. If the row needs more, move secondary actions into a `Dots Menu`.” (https://vercel.com/geist/entity)
@@ -250,7 +250,7 @@ function RecordRows(props) {
250
250
  * @instead “For tabular data with sortable columns and shared row shape, use `Table` instead.” (https://vercel.com/geist/entity)
251
251
  * “For a static key/value metadata block on a detail page, use `Description`.” (https://vercel.com/geist/entity)
252
252
  * Ours: Geist's `Table` is a `DataTable`: this list has no visible headings and at most three facts, so a fourth fact is a table, and anything more than a few facts lives on the record's page. A screen gives `RecordList` the records and what each one says, never its own toolbar, table, rows or menus, and nothing else draws a record row. Its `Description` is `ObjectFacts`. Events in time are an `ActivityFeed`. Reusable things a person adds from a catalogue are a `LibraryShelf`. A descriptive row with prose is an `Item`.
253
- * @behaviour One bordered card, a 1 px rule between records and none after the last. A row is 72 px, with 16 px above and below, and its columns stand left to right at the widths the list declares, so a person reads every list the same way: the `select` box (40 px, only when the list is picked from, an optional column), the identity (the rest: the one column without a size), the facts (each its `size`), the status (`status.size`), the time (`time.size`, tabular), the `checklist` ring (52 px, only when the record has steps to be ready) and the commands (`commandsSize`; left out, 64 px for the three dots alone). A `checklist` puts the record's `ProgressChecklist` ring just before its commands, where Vercel ends a project's row with its Production Checklist; the ring opens its own drawer, never the row. Every row has its 32 px mark, its name (600) and, under it, one muted 14 px line; `name` and the mark are required; a record with nothing to say under its name leaves the line out and is the name alone, never a dash. Give every column a `size` in pixels; the name takes the rest. With `layout="line"`, as on Vercel's Projects page, the facts and the status share one muted line, joined by a middle dot, in a column as wide as the name's, and the row stays one line (mark, name over its line, that summary, the time, the ring, the three dots) on a card from 448 px, and on a narrower card the summary and the time move under the name as muted text joined by a middle dot that wraps, in the same row, their labels read by assistive technology only. Rows of `columns` follow the same rule once the card is narrower than their columns: the facts and the time leave the row for that muted text, wrapping so every value stays readable, never a labelled list, and the status stands beside the name, which ends in an ellipsis before it, so the exception is never the part a phone's line cuts. `facts` takes at most three. A menu of one command that is not destructive, with no row command, is that command's button, except in a `line` row, which keeps it in the three dots as Vercel's project row does; without a `commandsSize` the column is as wide as the widest such button, so its label is never cut. Status is only for the exception, empty for the usual record, and its column stands only while a record in the list shows one, so the name and its line keep the room; the commands column likewise stands only while a record has a command, a menu or a message, or the rows open, and it widens for a failed action's next steps only while a row shows one. Never the three dots before the button, a decorative icon for the record's mark, a status on every row, or a destructive button on every row: a destructive command stays in the three dots. A `line` row's summary joins only the facts the record has, so it never ends in a dot. A failed or refused action of the record shows as its catalogue message inside its own row, never a notice under the row: it replaces the detail line, with its next steps beside its commands, or under the message on a card too narrow for the row's columns. With `open` the whole row is one target and takes the `accent` hover, and a row that only opens ends in a muted chevron; a row that opens nothing never reacts to hover. With `editor` the record's row opens its form under its line. `empty` is required: `null` is the choice to draw nothing for a list with no records, and any other value is the state it draws. A note about the whole list is `footer.note`: one muted line, an optional *Learn more* after it at the left and one secondary action at the right, in a strip of its own under the count and the paging, as Vercel ends its deployments list ("Deployment retention is enabled. Learn more", *View recently deleted*). Colour is neutral, the name in ink and every other cell in the body grey, except the status badge and a failed action's message.
253
+ * @behaviour One bordered card, a 1 px rule between records and none after the last. A row is 72 px, with 16 px above and below, and its columns stand left to right at the widths the list declares, so a person reads every list the same way: the `select` box (40 px, only when the list is picked from, an optional column), the identity (the rest: the one column without a size), the facts (each its `size`), the status (`status.size`), the time (`time.size`, tabular), the `checklist` ring (52 px, only when the record has steps to be ready) and the commands (`commandsSize`; left out, 64 px for the three dots alone). A `checklist` puts the record's `ProgressChecklist` ring just before its commands, where Vercel ends a project's row with its Production Checklist; the ring opens its own drawer, never the row. Every row has its 32 px mark, its name (600) and, under it, one muted 14 px line; `name` and the mark are required; a record with nothing to say under its name leaves the line out and is the name alone, never a dash. Give every column a `size` in pixels; the name takes the rest. With `layout="line"`, as on Vercel's Projects page, the facts and the status share one muted line, joined by a middle dot, in a column as wide as the name's, and the row stays one line (mark, name over its line, that summary, the time, the ring, the three dots) on a card from 448 px, and on a narrower card the summary and the time move under the name as muted text joined by a middle dot that wraps, the status keeping its mark whole and breaking between its words only when it alone is wider than the line, in the same row, their labels read by assistive technology only. Rows of `columns` follow the same rule once the card is narrower than their columns: the facts and the time leave the row for that muted text, wrapping so every value stays readable, never a labelled list, and the status stands beside the name, which ends in an ellipsis before it, so the exception is never the part a phone's line cuts. `facts` takes at most three. A menu of one command that is not destructive, with no row command, is that command's button, except in a `line` row, which keeps it in the three dots as Vercel's project row does; without a `commandsSize` the column is as wide as the widest such button, so its label is never cut. Status is only for the exception, empty for the usual record, and its column stands only while a record in the list shows one, so the name and its line keep the room; the commands column likewise stands only while a record has a command, a menu or a message, or the rows open, and it widens for a failed action's next steps only while a row shows one. Never the three dots before the button, a decorative icon for the record's mark, a status on every row, or a destructive button on every row: a destructive command stays in the three dots. A `line` row's summary joins only the facts the record has, so it never ends in a dot. A failed or refused action of the record shows as its catalogue message inside its own row, never a notice under the row: it replaces the detail line, with its next steps beside its commands, or under the message on a card too narrow for the row's columns. With `open` the whole row is one target and takes the `accent` hover, and a row that only opens ends in a muted chevron; a row that opens nothing never reacts to hover. With `editor` the record's row opens its form under its line. `empty` is required: `null` is the choice to draw nothing for a list with no records, and any other value is the state it draws. A note about the whole list is `footer.note`: one muted line, an optional *Learn more* after it at the left and one secondary action at the right, in a strip of its own under the count and the paging, as Vercel ends its deployments list ("Deployment retention is enabled. Learn more", *View recently deleted*). Colour is neutral, the name in ink and every other cell in the body grey, except the status badge and a failed action's message.
254
254
  * “Pick the variant by what the user needs: no-results for a filtered list that returned zero rows, blank slate or informational for a resource the user hasn’t created, cleared for completed work, permission for role or tier denials, error for a failed load.” (https://vercel.com/geist/empty-state)
255
255
  * Ours: `failed`, `noMatch` and `empty` are those variants, drawn inside the card.
256
256
  * “The right column holds at most one or two controls. If the row needs more, move secondary actions into a `Dots Menu`.” (https://vercel.com/geist/entity)
@@ -1 +1 @@
1
- {"version":3,"file":"settings-section.d.ts","sourceRoot":"","sources":["../../src/components/settings-section.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"settings-section.d.ts","sourceRoot":"","sources":["../../src/components/settings-section.tsx"],"names":[],"mappings":"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"}
@@ -14,12 +14,6 @@ const toneClassNames = {
14
14
  error: "border border-destructive *:data-[slot=card-footer]:border-destructive *:data-[slot=card-footer]:bg-destructive-soft *:data-[slot=card-footer]:*:data-[slot=settings-section-hint]:text-destructive-soft-foreground",
15
15
  warning: "border border-warning *:data-[slot=card-footer]:border-warning *:data-[slot=card-footer]:bg-warning-soft *:data-[slot=card-footer]:*:data-[slot=settings-section-hint]:text-warning-soft-foreground",
16
16
  };
17
- /**
18
- * Below a 28 rem card the actions keep the title's row while the title's longest word fits beside
19
- * them, and move under the title when it does not, so they never cover it; the description takes
20
- * the card's width under both.
21
- */
22
- const ACTIONS_ON_TITLE_ROW_WHEN_NARROW = "@max-md/settings-section:flex @max-md/settings-section:flex-wrap @max-md/settings-section:[&>[data-slot=card-title]]:grow @max-md/settings-section:[&>[data-slot=card-title]]:basis-[min-content] @max-md/settings-section:[&>[data-slot=card-action]]:order-1 @max-md/settings-section:[&>[data-slot=card-description]]:order-2 @max-md/settings-section:[&>[data-slot=card-description]]:basis-full";
23
17
  /**
24
18
  * A card of one setting that says what changing it does and ends in a footer.
25
19
  *
@@ -34,7 +28,7 @@ function SettingsSection({ title, description, actions, tone, children, classNam
34
28
  const titleId = React.useId();
35
29
  const locked = lockedReason !== undefined;
36
30
  const fields = children != null ? (_jsx(CardContent, { children: _jsx(FieldGroup, { "data-slot": "settings-section-fields", inert: locked, className: cn(locked && "**:text-muted-foreground"), children: children }) })) : null;
37
- return (_jsxs(Card, { render: _jsx("section", { ...props, "data-slot": "settings-section", "data-tone": tone, "data-locked": locked || undefined }), className: cn("@container/settings-section min-w-0", tone && toneClassNames[tone], locked && "cursor-not-allowed *:data-[slot=card-footer]:cursor-default", className), children: [_jsxs(CardHeader, { className: cn(ACTIONS_ON_TITLE_ROW_WHEN_NARROW, !title && "has-data-[slot=card-description]:grid-rows-none"), children: [title ? (_jsx(CardTitle, { children: _jsx("h2", { id: titleId, children: title }) })) : null, _jsx(CardDescription, { children: description }), actions ? _jsx(CardAction, { children: actions }) : null] }), save ? (_jsx(SettingsSaveForm, { save: save, titleId: titleId, children: fields })) : (_jsxs(_Fragment, { children: [fields, _jsx(FooterStrip, { hint: locked ? lockedReason : footerHint, hintSlot: "settings-section-hint", children: locked ? unlock : footer })] }))] }));
31
+ return (_jsxs(Card, { render: _jsx("section", { ...props, "data-slot": "settings-section", "data-tone": tone, "data-locked": locked || undefined }), className: cn("min-w-0", tone && toneClassNames[tone], locked && "cursor-not-allowed *:data-[slot=card-footer]:cursor-default", className), children: [_jsxs(CardHeader, { narrowAction: "title-row", className: cn(!title && "has-data-[slot=card-description]:grid-rows-none"), children: [title ? (_jsx(CardTitle, { children: _jsx("h2", { id: titleId, children: title }) })) : null, _jsx(CardDescription, { children: description }), actions ? _jsx(CardAction, { children: actions }) : null] }), save ? (_jsx(SettingsSaveForm, { save: save, titleId: titleId, children: fields })) : (_jsxs(_Fragment, { children: [fields, _jsx(FooterStrip, { hint: locked ? lockedReason : footerHint, hintSlot: "settings-section-hint", children: locked ? unlock : footer })] }))] }));
38
32
  }
39
33
  function controlPropsOf({ id, info, error, invalid, disabled, required, }) {
40
34
  return {
@@ -27,8 +27,6 @@ const AUTH_CALLS = new Set([
27
27
  "getPortalSession",
28
28
  "installationActionContext",
29
29
  "pageActor",
30
- "requirePlatformAdminViewer",
31
- "requirePlatformOrPartnerViewer",
32
30
  "requirePortalAdmin",
33
31
  "requirePortalViewer",
34
32
  "requireViewerForPage",
@@ -11,8 +11,7 @@ export type TableDetailFact = {
11
11
  };
12
12
  /** A facts line reads a `Tag` as its text and a block value inline. */
13
13
  export declare const detailFactsLine = "[&_[data-slot=tag]]:contents [&>span>:is(div,p,.block,.grid,.flex)]:inline";
14
- /** A facts line that wraps breaks every value between its words, except a badge, which stands whole. */
15
- export declare const detailFactsWrap = "[&_:not(.sr-only,[data-slot=badge],[data-slot=badge]_*,[data-slot=status-badge],[data-slot=status-badge]_*)]:whitespace-normal";
14
+ export declare const detailFactsWrap = "[&_:not(.sr-only,[data-slot=badge],[data-slot=badge]_*)]:whitespace-normal";
16
15
  export declare function DetailFacts({ facts, leadingSeparator, }: {
17
16
  facts: readonly TableDetailFact[];
18
17
  leadingSeparator?: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"table-compact-line.d.ts","sourceRoot":"","sources":["../../src/internal/table-compact-line.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAuB,KAAK,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAG1F,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4HAA4H;IAC5H,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wGAAwG;IACxG,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,eAAe,+EACkD,CAAC;AAE/E,wGAAwG;AACxG,eAAO,MAAM,eAAe,mIACsG,CAAC;AAEnI,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,gBAAwB,GACzB,EAAE;IACD,KAAK,EAAE,SAAS,eAAe,EAAE,CAAC;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,uBAQA;AAED,KAAK,qBAAqB,GAAG;IAAE,MAAM,EAAE,kBAAkB,CAAC;IAAC,KAAK,EAAE,SAAS,eAAe,EAAE,CAAA;CAAE,CAAC;AAI/F,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAEvD;AAED,4IAA4I;AAC5I,wBAAgB,iBAAiB,6BAahC;AAED,2KAA2K;AAC3K,wBAAgB,qBAAqB,6BAkBpC;AAID;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAEA;AAED,wBAAgB,sBAAsB,IAAI,OAAO,CAEhD"}
1
+ {"version":3,"file":"table-compact-line.d.ts","sourceRoot":"","sources":["../../src/internal/table-compact-line.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAuB,KAAK,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAG1F,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4HAA4H;IAC5H,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wGAAwG;IACxG,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,eAAe,+EACkD,CAAC;AAE/E,eAAO,MAAM,eAAe,+EACkD,CAAC;AAE/E,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,gBAAwB,GACzB,EAAE;IACD,KAAK,EAAE,SAAS,eAAe,EAAE,CAAC;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,uBAQA;AAED,KAAK,qBAAqB,GAAG;IAAE,MAAM,EAAE,kBAAkB,CAAC;IAAC,KAAK,EAAE,SAAS,eAAe,EAAE,CAAA;CAAE,CAAC;AAI/F,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAEvD;AAED,4IAA4I;AAC5I,wBAAgB,iBAAiB,6BAahC;AAED,2KAA2K;AAC3K,wBAAgB,qBAAqB,6BAkBpC;AAID;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAEA;AAED,wBAAgB,sBAAsB,IAAI,OAAO,CAEhD"}
@@ -5,8 +5,7 @@ import { tableCompactLayouts } from "../components/table-layouts.js";
5
5
  import { cn } from "../lib/utils.js";
6
6
  /** A facts line reads a `Tag` as its text and a block value inline. */
7
7
  export const detailFactsLine = "[&_[data-slot=tag]]:contents [&>span>:is(div,p,.block,.grid,.flex)]:inline";
8
- /** A facts line that wraps breaks every value between its words, except a badge, which stands whole. */
9
- export const detailFactsWrap = "[&_:not(.sr-only,[data-slot=badge],[data-slot=badge]_*,[data-slot=status-badge],[data-slot=status-badge]_*)]:whitespace-normal";
8
+ export const detailFactsWrap = "[&_:not(.sr-only,[data-slot=badge],[data-slot=badge]_*)]:whitespace-normal";
10
9
  export function DetailFacts({ facts, leadingSeparator = false, }) {
11
10
  return facts.map((fact, index) => (_jsxs("span", { children: [index > 0 || leadingSeparator ? _jsx("span", { "aria-hidden": "true", children: " \u00B7 " }) : null, _jsxs("span", { className: "sr-only", children: [fact.label, ": "] }), fact.value] }, fact.id)));
12
11
  }
@@ -1 +1 @@
1
- {"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/data.tsx"],"names":[],"mappings":"AA4HA,iBAAS,iBAAiB,gCAczB;AAsCD,iBAAS,iBAAiB,gCAkDzB;AAUD,iBAAS,eAAe,gCASvB;AAED,iBAAS,YAAY,gCAoCpB;AAED,iBAAS,WAAW,gCA6BnB;AAQD,iBAAS,gBAAgB,gCAqBxB;AAED,iBAAS,qBAAqB,gCAc7B;AAED,iBAAS,UAAU,gCAqClB;AAED,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;CAkNU,CAAC"}
1
+ {"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/data.tsx"],"names":[],"mappings":"AA4HA,iBAAS,iBAAiB,gCAczB;AAsCD,iBAAS,iBAAiB,gCAkDzB;AAUD,iBAAS,eAAe,gCASvB;AAED,iBAAS,YAAY,gCAoCpB;AAED,iBAAS,WAAW,gCA6BnB;AAQD,iBAAS,gBAAgB,gCAqBxB;AAED,iBAAS,qBAAqB,gCAc7B;AAED,iBAAS,UAAU,gCAqClB;AAED,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;CAgOU,CAAC"}
@@ -156,7 +156,7 @@ function UsageTable() {
156
156
  }
157
157
  export const DATA = {
158
158
  AgentCard: () => (_jsx("div", { className: "max-w-xs", children: _jsx(AgentCard, { action: _jsx(Button, { prefix: _jsx(Plus, {}), children: "Create agent" }), job: "Writes quotes from the price list", meta: "3 skills \u00B7 2 tasks \u00B7 v1.2.0", name: "Acme Quotes", visual: _jsx(AgentOrb, { color: COBALTO, decorative: true, form: "orbit", size: 96 }) }) })),
159
- Card: () => (_jsxs("div", { className: "grid max-w-md gap-6", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Billing contact" }), _jsx(CardDescription, { children: "Who receives invoices and payment reminders." }), _jsx(CardAction, { children: _jsx(Button, { size: "sm", variant: "outline", children: "Edit" }) })] }), _jsx(CardContent, { className: "text-sm", children: "amministrazione@acme.it" }), _jsx(CardFooter, { children: "Changed on 2 October" })] }), _jsxs(Card, { surface: "raised", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Payment method" }), _jsx(CardDescription, { children: "The card charged for Agents and extra seats." }), _jsx(CardAction, { children: _jsx(Button, { size: "sm", variant: "outline", children: "Change" }) })] }), _jsx(CardContent, { className: "text-sm", children: "Visa ending 4242" })] })] })),
159
+ Card: () => (_jsxs("div", { className: "grid max-w-md gap-6", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Billing contact" }), _jsx(CardDescription, { children: "Who receives invoices and payment reminders." }), _jsx(CardAction, { children: _jsx(Button, { size: "sm", variant: "outline", children: "Edit" }) })] }), _jsx(CardContent, { className: "text-sm", children: "amministrazione@acme.it" }), _jsx(CardFooter, { children: "Changed on 2 October" })] }), _jsxs(Card, { surface: "raised", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Payment method" }), _jsx(CardDescription, { children: "The card charged for Agents and extra seats." }), _jsx(CardAction, { children: _jsx(Button, { size: "sm", variant: "outline", children: "Change" }) })] }), _jsx(CardContent, { className: "text-sm", children: "Visa ending 4242" })] }), _jsx("div", { className: "max-w-72", children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Personalizzazione" }), _jsx(CardDescription, { children: "Il nome e i colori che vedono i Clienti." }), _jsx(CardAction, { children: _jsx(Button, { size: "sm", variant: "outline", children: "Modifica" }) })] }), _jsx(CardContent, { className: "text-sm", children: "Acme Servizi" })] }) })] })),
160
160
  CardRow: () => (_jsx(CardRow, { columns: 5, children: ["Runs", "Approvals", "Cost", "Tokens", "Cache hit rate"].map((title, index) => (_jsx(Card, { children: _jsxs(CardHeader, { children: [_jsx(CardTitle, { children: title }), _jsx(CardDescription, { children: index === 1 ? "A longer line shows every card keeps the tallest's height." : "—" })] }) }, title))) })),
161
161
  CodeBlock: CodeBlockSpecimen,
162
162
  DataTable: DataTableSpecimen,
@@ -186,7 +186,7 @@ export const USAGE = [
186
186
  summary: "Entity rows: objects a person opens or acts on, one line each on one resting card: the identity mark and name over what it is, a few facts, a status only for the exception, when it happened, at most two row commands, and the three dots last.",
187
187
  when: "“Use `<Entity>` for a row of descriptive content paired with one or two controls (member rows, integration rows, domain rows).” (https://vercel.com/geist/entity) Ours: the records are things a person opens or acts on and that name themselves: projects, deployments, domains, members, integrations, Agents, Skills, mailboxes. A list inside another page: an Overview's exceptions, an object page's \"Needs attention\". A page whose whole job is the list is a `CollectionPage`, which draws this. Values edited in place (a domain, an environment variable) are the same rows with an `editor`: the row expands into its form. Of the three kinds of list, entity rows and rows edited in place are this; records compared across columns are a `DataTable`.",
188
188
  instead: "“For tabular data with sortable columns and shared row shape, use `Table` instead.” (https://vercel.com/geist/entity) “For a static key/value metadata block on a detail page, use `Description`.” (https://vercel.com/geist/entity) Ours: Geist's `Table` is a `DataTable`: this list has no visible headings and at most three facts, so a fourth fact is a table, and anything more than a few facts lives on the record's page. A screen gives `RecordList` the records and what each one says, never its own toolbar, table, rows or menus, and nothing else draws a record row. Its `Description` is `ObjectFacts`. Events in time are an `ActivityFeed`. Reusable things a person adds from a catalogue are a `LibraryShelf`. A descriptive row with prose is an `Item`.",
189
- behaviour: "One bordered card, a 1 px rule between records and none after the last. A row is 72 px, with 16 px above and below, and its columns stand left to right at the widths the list declares, so a person reads every list the same way: the `select` box (40 px, only when the list is picked from, an optional column), the identity (the rest: the one column without a size), the facts (each its `size`), the status (`status.size`), the time (`time.size`, tabular), the `checklist` ring (52 px, only when the record has steps to be ready) and the commands (`commandsSize`; left out, 64 px for the three dots alone). A `checklist` puts the record's `ProgressChecklist` ring just before its commands, where Vercel ends a project's row with its Production Checklist; the ring opens its own drawer, never the row. Every row has its 32 px mark, its name (600) and, under it, one muted 14 px line; `name` and the mark are required; a record with nothing to say under its name leaves the line out and is the name alone, never a dash. Give every column a `size` in pixels; the name takes the rest. With `layout=\"line\"`, as on Vercel's Projects page, the facts and the status share one muted line, joined by a middle dot, in a column as wide as the name's, and the row stays one line (mark, name over its line, that summary, the time, the ring, the three dots) on a card from 448 px, and on a narrower card the summary and the time move under the name as muted text joined by a middle dot that wraps, in the same row, their labels read by assistive technology only. Rows of `columns` follow the same rule once the card is narrower than their columns: the facts and the time leave the row for that muted text, wrapping so every value stays readable, never a labelled list, and the status stands beside the name, which ends in an ellipsis before it, so the exception is never the part a phone's line cuts. `facts` takes at most three. A menu of one command that is not destructive, with no row command, is that command's button, except in a `line` row, which keeps it in the three dots as Vercel's project row does; without a `commandsSize` the column is as wide as the widest such button, so its label is never cut. Status is only for the exception, empty for the usual record, and its column stands only while a record in the list shows one, so the name and its line keep the room; the commands column likewise stands only while a record has a command, a menu or a message, or the rows open, and it widens for a failed action's next steps only while a row shows one. Never the three dots before the button, a decorative icon for the record's mark, a status on every row, or a destructive button on every row: a destructive command stays in the three dots. A `line` row's summary joins only the facts the record has, so it never ends in a dot. A failed or refused action of the record shows as its catalogue message inside its own row, never a notice under the row: it replaces the detail line, with its next steps beside its commands, or under the message on a card too narrow for the row's columns. With `open` the whole row is one target and takes the `accent` hover, and a row that only opens ends in a muted chevron; a row that opens nothing never reacts to hover. With `editor` the record's row opens its form under its line. `empty` is required: `null` is the choice to draw nothing for a list with no records, and any other value is the state it draws. A note about the whole list is `footer.note`: one muted line, an optional *Learn more* after it at the left and one secondary action at the right, in a strip of its own under the count and the paging, as Vercel ends its deployments list (\"Deployment retention is enabled. Learn more\", *View recently deleted*). Colour is neutral, the name in ink and every other cell in the body grey, except the status badge and a failed action's message. “Pick the variant by what the user needs: no-results for a filtered list that returned zero rows, blank slate or informational for a resource the user hasn’t created, cleared for completed work, permission for role or tier denials, error for a failed load.” (https://vercel.com/geist/empty-state) Ours: `failed`, `noMatch` and `empty` are those variants, drawn inside the card. “The right column holds at most one or two controls. If the row needs more, move secondary actions into a `Dots Menu`.” (https://vercel.com/geist/entity) Ours: one or two row commands (outline buttons of 32 px) stand before the three dots (36 px), the Dots Menu. “Render the Skeleton variant (`entity-with-skeleton`) during load instead of an empty row, and swap to real content once data resolves.” (https://vercel.com/geist/entity) Ours: three still skeleton rows hold the place, in a region that announces what replaces them; then the first that holds: the failed read, no match, the empty state, the rows.",
189
+ behaviour: "One bordered card, a 1 px rule between records and none after the last. A row is 72 px, with 16 px above and below, and its columns stand left to right at the widths the list declares, so a person reads every list the same way: the `select` box (40 px, only when the list is picked from, an optional column), the identity (the rest: the one column without a size), the facts (each its `size`), the status (`status.size`), the time (`time.size`, tabular), the `checklist` ring (52 px, only when the record has steps to be ready) and the commands (`commandsSize`; left out, 64 px for the three dots alone). A `checklist` puts the record's `ProgressChecklist` ring just before its commands, where Vercel ends a project's row with its Production Checklist; the ring opens its own drawer, never the row. Every row has its 32 px mark, its name (600) and, under it, one muted 14 px line; `name` and the mark are required; a record with nothing to say under its name leaves the line out and is the name alone, never a dash. Give every column a `size` in pixels; the name takes the rest. With `layout=\"line\"`, as on Vercel's Projects page, the facts and the status share one muted line, joined by a middle dot, in a column as wide as the name's, and the row stays one line (mark, name over its line, that summary, the time, the ring, the three dots) on a card from 448 px, and on a narrower card the summary and the time move under the name as muted text joined by a middle dot that wraps, the status keeping its mark whole and breaking between its words only when it alone is wider than the line, in the same row, their labels read by assistive technology only. Rows of `columns` follow the same rule once the card is narrower than their columns: the facts and the time leave the row for that muted text, wrapping so every value stays readable, never a labelled list, and the status stands beside the name, which ends in an ellipsis before it, so the exception is never the part a phone's line cuts. `facts` takes at most three. A menu of one command that is not destructive, with no row command, is that command's button, except in a `line` row, which keeps it in the three dots as Vercel's project row does; without a `commandsSize` the column is as wide as the widest such button, so its label is never cut. Status is only for the exception, empty for the usual record, and its column stands only while a record in the list shows one, so the name and its line keep the room; the commands column likewise stands only while a record has a command, a menu or a message, or the rows open, and it widens for a failed action's next steps only while a row shows one. Never the three dots before the button, a decorative icon for the record's mark, a status on every row, or a destructive button on every row: a destructive command stays in the three dots. A `line` row's summary joins only the facts the record has, so it never ends in a dot. A failed or refused action of the record shows as its catalogue message inside its own row, never a notice under the row: it replaces the detail line, with its next steps beside its commands, or under the message on a card too narrow for the row's columns. With `open` the whole row is one target and takes the `accent` hover, and a row that only opens ends in a muted chevron; a row that opens nothing never reacts to hover. With `editor` the record's row opens its form under its line. `empty` is required: `null` is the choice to draw nothing for a list with no records, and any other value is the state it draws. A note about the whole list is `footer.note`: one muted line, an optional *Learn more* after it at the left and one secondary action at the right, in a strip of its own under the count and the paging, as Vercel ends its deployments list (\"Deployment retention is enabled. Learn more\", *View recently deleted*). Colour is neutral, the name in ink and every other cell in the body grey, except the status badge and a failed action's message. “Pick the variant by what the user needs: no-results for a filtered list that returned zero rows, blank slate or informational for a resource the user hasn’t created, cleared for completed work, permission for role or tier denials, error for a failed load.” (https://vercel.com/geist/empty-state) Ours: `failed`, `noMatch` and `empty` are those variants, drawn inside the card. “The right column holds at most one or two controls. If the row needs more, move secondary actions into a `Dots Menu`.” (https://vercel.com/geist/entity) Ours: one or two row commands (outline buttons of 32 px) stand before the three dots (36 px), the Dots Menu. “Render the Skeleton variant (`entity-with-skeleton`) during load instead of an empty row, and swap to real content once data resolves.” (https://vercel.com/geist/entity) Ours: three still skeleton rows hold the place, in a region that announces what replaces them; then the first that holds: the failed read, no match, the empty state, the rows.",
190
190
  words: '“Lead the left column with a scannable identifier: an `Avatar` or icon, a Title Case label, then sentence-case secondary metadata (`Member since Mar 14, 2026`).” (https://vercel.com/geist/entity) Ours: the name is the record\'s own and the labels around it are sentence case, not Title Case. “Keep right-column buttons Verb + Noun (`Remove Member`, `Resend Invite`). Bare verbs like `Remove` or `Confirm` lose context once the row scrolls offscreen.” (https://vercel.com/geist/entity) Ours: every string is the product\'s: `label` names the list, a time\'s `phrase` writes its sentence ("Updated {when}"), `missing` is what a screen reader hears for a record with no time, the menu\'s `label` reads "More for {record}". A row command names its result in sentence case ("Edit domain"). A status is the exception\'s word ("Needs attention"), never "Active" on every row.',
191
191
  access: '“Wrap the loading region in `aria-busy="true"` and announce completion with `aria-live="polite"` on the destination container, not the skeleton itself.” (https://vercel.com/geist/skeleton) Ours: the loading rows sit in one `SkeletonRegion` that is busy while they stand and announces what replaces them. A table named by `label`, its column headings read by assistive technology only. The row link carries `open.label`; the three dots carry the menu\'s `label`, and the menu\'s first line names the record. The loading rows are a status named by `loadingLabel`, inside the one live region that announces what replaces them. “For multi-select rows, the leading `Checkbox` carries `aria-label="Select {entity name}"` so the row is selectable without relying on the visual label.” (https://vercel.com/geist/entity) Ours: each box is named by `select.label`, which reads "Select {record}".',
192
192
  },
@@ -989,7 +989,7 @@ export const USAGE = [
989
989
  summary: "The surface of every card; on its own only a container inside a composition.",
990
990
  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.',
991
991
  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`.",
992
- 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. `surface` defaults to `resting`, the resting height of \"Elevation & Depth\" in DESIGN.md. `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, a sparkline, the three dots), as Vercel keeps a card's Add on its title row on a phone, and moves under the description in a header narrower than 28rem when it holds several (the header's own width, not the viewport's); `CardFooter` is a strip in the `recessed` role, one tone off the card body inside the card's edge, behind one seam in the border colour: `canvas-soft` below the white card in light, and `dark-canvas` below the resting body in dark; on the left one short muted line, only where it says something specific to that card (a limit such as *Please use 32 characters at maximum.*, what a value is for, the plan a feature needs or a link to learn more) and never one sentence every card repeats, on the right at most one button or link, the section's action. 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`.",
992
+ 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. `surface` defaults to `resting`, the resting height of \"Elevation & Depth\" in DESIGN.md. `CardHeader` lays out title, description and one `CardAction`. An action of one control (a button, a badge, a sparkline, the three dots) stands at the title's right, as Vercel keeps a card's Add on its title row on a phone; on a card narrower than 28rem the description runs under both, and the control moves under the title only when the title's longest word would not fit beside it, so it never covers it. An action of several controls moves under the description in a header narrower than 28rem (the header's own width, not the viewport's); `CardFooter` is a strip in the `recessed` role, one tone off the card body inside the card's edge, behind one seam in the border colour: `canvas-soft` below the white card in light, and `dark-canvas` below the resting body in dark; on the left one short muted line, only where it says something specific to that card (a limit such as *Please use 32 characters at maximum.*, what a value is for, the plan a feature needs or a link to learn more) and never one sentence every card repeats, on the right at most one button or link, the section's action. 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`.",
993
993
  words: "The title is a noun phrase naming what the card holds; the description one sentence directly under it, only when it adds something.",
994
994
  access: "A plain container; give it `render={<section />}` with a heading when it is a region of the page.",
995
995
  },
@@ -228,6 +228,43 @@
228
228
  }
229
229
  }
230
230
 
231
+ @container card-header-frame (width < 28rem) {
232
+ [data-slot="card-header"]:is(
233
+ [data-narrow-action="title-row"],
234
+ :not([data-narrow-action]):has(
235
+ > [data-slot="card-action"]
236
+ > :only-child:is(
237
+ [data-slot="badge"],
238
+ [data-slot="status-badge"],
239
+ [data-slot="trend-badge"],
240
+ [data-slot="chart-sparkline"],
241
+ [data-slot="button"],
242
+ [data-slot="dropdown-menu-trigger"][aria-label]
243
+ )
244
+ )
245
+ ):has(> [data-slot="card-title"]:first-child):not(
246
+ :has(
247
+ > :not([data-slot="card-title"], [data-slot="card-description"], [data-slot="card-action"])
248
+ )
249
+ ) {
250
+ display: flex;
251
+ flex-wrap: wrap;
252
+
253
+ & > [data-slot="card-title"] {
254
+ flex: 1 1 min-content;
255
+ }
256
+
257
+ & > [data-slot="card-action"] {
258
+ order: 1;
259
+ }
260
+
261
+ & > [data-slot="card-description"] {
262
+ order: 2;
263
+ flex-basis: 100%;
264
+ }
265
+ }
266
+ }
267
+
231
268
  /*
232
269
  * Nadia's entry screen, contained (`components/entry-scene.tsx`,
233
270
  * `components/nadia-presence.tsx`).
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nadicodeai/ui",
3
- "version": "12.1.142",
3
+ "version": "12.1.144",
4
4
  "type": "module",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -83,7 +83,7 @@
83
83
  "@base-ui/react": "^1.9.0",
84
84
  "@iconify-icons/logos": "^2.0.3",
85
85
  "@iconify/react": "^6.0.2",
86
- "@nadicodeai/design-system": "12.1.142",
86
+ "@nadicodeai/design-system": "12.1.144",
87
87
  "@tanstack/react-table": "^9.3.1",
88
88
  "@vgpu/wgsl": "0.6.0",
89
89
  "class-variance-authority": "^0.7.1",
@@ -133,6 +133,7 @@
133
133
  "jsdom": "^30.1.3",
134
134
  "oxlint": "1.88.0",
135
135
  "postcss": "^8.5.30",
136
+ "proper-lockfile": "^4.1.2",
136
137
  "publint": "^0.3.25",
137
138
  "react": "19.3.1",
138
139
  "react-dom": "19.3.1",