@siyahi/ui 0.1.9-next.34 → 0.1.9-next.36

package/DESIGN.md

@@ -51,12 +51,13 @@ a meaning:
 - Categories (a team, a region, a product line) stay neutral: outline badges,
   never a hue each. Ordered buckets (largest 5, next 5, rest) use steps of one
   colour, not separate hues.
-- **Colour marks exceptions.** The one stat tile or table row that needs a look
-  is marked by the page: `tone: "negative"` or `"warning"` on a `SectionCards`
-  or `MetricStrip` item, `data-tone="negative"` or `"warning"` on a `TableRow`,
+- **Colour marks exceptions.** The one figure or table row that needs a look
+  is marked by the page: `tone: "negative"` or `"warning"` on a `MetricStrip`
+  item, `data-tone="negative"` or `"warning"` on a `TableRow`,
   and `getRowTone` on a `DataTableBody`, returning the tone for the row. It
   takes a faint wash of the colour over the card (7% in light, 12% in dark),
-  and a tile or figure an outline of it. The page decides, never the sign: a falling cost is good news.
+  and a figure an outline of it, reaching 8px past the figure so its text
+  stays in line with its neighbours'. The page decides, never the sign: a falling cost is good news.
   Mark one or two; a page where every row is washed marks nothing.
 
 ## Surfaces
@@ -64,20 +65,37 @@ a meaning:
 `SiyahiProvider`'s `surface` sets how a data block sits on the page. The page
 and card colours are fixed: never tint the canvas.
 
-- **`ruled`** (the default, with or without a provider): ruled on white. The
-  blocks of a `PanelGrid`, the tiles of a `SectionCards` row and the figures
-  of a `MetricStrip` are filled with the card colour and parted by hairlines,
-  with a rule above and below the group and none on its left and right edges.
-  A card standing alone (a `MetricStrip`, a table's card) takes the same rules
-  above and below itself. A short last row ends in a blank cell, ruled off
-  like the rest. A stat tile keeps its footer's top rule and faint band. Set
-  nothing to get it.
+- **`open`** (the default, with or without a provider): no fill, no ring and
+  no padding, so a block's content sits level with the page's text. Space, not
+  a box or a rule, parts the blocks: 24px across and 16px down in a
+  `PanelGrid`, 24px between `MetricStrip` figures. A lighter box on the canvas
+  cuts off abruptly and spends room on its own padding, so data sits on the
+  page. Set nothing to get it.
 - **`card`**: tight square cards, for a page of separate blocks, such as an
   index of links. Each block is filled with the card colour inside a hairline
-  ring, with no shadow, 8px from the next in a `PanelGrid` or a row of
-  `SectionCards`. Ask for it with `surface="card"`.
-- **`open`**: no fill, no lines and no padding, so a block sits level with the
-  page's text, for pages read top to bottom.
+  ring, with no shadow, 8px from the next in a `PanelGrid`. Ask for it with
+  `surface="card"`.
+
+## Density
+
+A page is read on a phone, a laptop and a large monitor, and each gets more of
+the page, not bigger type.
+
+- **Lay out by the room, not the device.** `PanelGrid` and the tile rows step
+  their columns by their own width (container queries), so a block inside a
+  sidebar layout or a one-file page steps the same way. Below 42rem blocks
+  stack; from 42rem they sit two or three across.
+- **A large monitor shows more blocks, not wider ones.** From a 140rem grid a
+  `PanelGrid` of 2 takes a third block across, and from 180rem a grid of 2 or
+  3 a fourth, when it holds that many. Text stays at its size.
+- **A chart's height follows its width** unless the page fixes one: 45% of
+  its width, from 240px on a phone to 420px, so a chart on a wide screen
+  stays a chart and one on a phone keeps room for its marks. Fix a height
+  only where the block must line up with a neighbour.
+- **Gaps are set, not invented.** Stack a page's blocks 16px apart
+  (`gap-4`) and its `PageSection`s 24px apart (`gap-6`), the room each
+  section keeps under its rule; add no padding or gap of your own around a
+  block.
 
 Every `PanelGrid` numbers its blocks 01, 02 before their card title, in the
 mono face and the link colour, so the text can point to one.
@@ -88,12 +106,13 @@ mono face and the link colour, so the text can point to one.
   toggles, menus, bars and tracks (data bars, progress, a slider's track and
   thumb, a scrollbar's thumb), heatmap cells, treemap tiles and the colour
   chips of charts and legends alike (`--radius` is 0). Only what is round by
-  nature stays round: an avatar, a status dot, a line's end dot, a spinner,
-  and a signed calendar heatmap's loss day, whose shape carries its sign.
+  nature stays round: an avatar, a radio, a status dot, a line's end dot, a
+  spinner, and a signed calendar heatmap's loss day, whose shape carries its
+  sign. The theme squares every other rounding, on any component.
   Never add a `rounded-*` class to a box.
-- **Floating surfaces lie flat.** A menu, a select's list, a popover, a
-  dialog, a sheet and a chart's tooltip take no drop shadow and the card's
-  hairline for their edge, so they read as a sheet of the page.
+- **Floating surfaces lie flat.** Nothing casts a drop shadow: a menu, a
+  list, a popover, a dialog, a sheet, a hover card and a chart's tooltip take
+  the card's hairline for their edge, so they read as a sheet of the page.
 - **Joined toggles.** The items of a `ToggleGroup` sit flush and share their
   borders, one control; the pressed item fills with the foreground.
 - **A code block's copy button sits in a header row** (`CodeBlockHeader`),
@@ -191,8 +210,7 @@ from the catalogue.
 
 ## Labels and totals
 
-- **Labels are small monospaced capitals**: a stat tile's label and footer
-  lines, a `MetricStrip` label, a table's column heads, a sidebar group's
+- **Labels are small monospaced capitals**: a `MetricStrip` figure's label, a table's column heads, a sidebar group's
   label, a group's label in a menu, a select's list or the command palette,
   and a form field's label (muted, above the field). The components and
   the theme set them; never set a label in this style by hand elsewhere, and
@@ -234,9 +252,8 @@ from the catalogue.
   each end dot as its line finishes; bars fade in rather than grow. Reduced
   motion shows them at once.
 - **Stale data is marked by the page**: `stale` on a chart card or a
-  `SectionCards` tile, with since when ("3 Nov"). The block greys and its
-  chart or sparkline draws at about 65% strength, a tile's figure and badge
-  turn muted, and a small "Stale · 3 Nov" note says so. A stale block is meant
+  `MetricStrip` item, with since when ("3 Nov"). The block greys and its
+  chart or sparkline draws at about 65% strength, a figure turns muted, and a small "Stale · 3 Nov" note says so. A stale block is meant
   to be harder to read, so its marks are exempt from the 3:1 mark bar; the
   note and the figure keep their text contrast. Never infer it from dates.
 

package/README.md

@@ -58,8 +58,8 @@ createRoot(root).render(
 
 `preloadFonts()` loads Geist and Geist Mono with the scripts. Add `lucide-react`
 only when your own code imports icons. Next.js compiles the stylesheet through
-`@tailwindcss/postcss` instead of the Vite plugin. Static HTML reports inline the
-package's `report.css` and follow `agents/report-rules.json`.
+`@tailwindcss/postcss` instead of the Vite plugin. To host one page as a single
+HTML file, build it with `siyahi-page` from `@siyahi/tools`.
 
 If npm is unreachable, both package tarballs are attached to
 [GitHub releases](https://github.com/jatinbansal1998/siyahi/releases).
@@ -100,24 +100,22 @@ and support one keyboard entry with arrow navigation. `WeekdayHeatmap` accepts
 
 `SiyahiProvider` sets how data blocks sit on the page:
 
-- `surface="ruled"` (default, even outside a provider): ruled on white.
-  `PanelGrid`, `SectionCards` and `MetricStrip` fill their blocks with the card
-  colour and part them with hairlines, with a rule above and below each group
-  and none on the sides; a card standing alone takes the rules above and below
-  itself.
+- `surface="open"` (default, even outside a provider): no fill, box or rule,
+  and no card padding, so a block's content sits level with the page's text.
+  Space parts the blocks: 24px across and 16px down in a `PanelGrid`.
 - `surface="card"`: tight square cards, each filled inside a hairline, 8px
   apart, no shadow, for a page of separate blocks.
-- `surface="open"`: no fill, boxes or rules; card padding is removed.
 
 `DESIGN.md` has the rest of the look: square corners, mono capital labels,
 ledger totals, the masthead and exception tones.
 
 Nest a provider to change one section. A dialog, sheet or popover renders
-outside the page's provider element: `PanelGrid` and `SectionCards` carry
-their surface into it, but a lone `Card` there is ruled unless the popup's
+outside the page's provider element: `PanelGrid` carries
+their surface into it, but a lone `Card` there is open unless the popup's
 content sits in its own provider with an explicit surface, such as
 `<SiyahiProvider surface="card">`; a provider without one draws no element. Stack `PageSection` blocks with
-`flex flex-col gap-6`; use `PanelGrid` for blocks side by side. Categories use
+`flex flex-col gap-6` and the blocks inside one with `gap-4`; use `PanelGrid`
+for blocks side by side. Categories use
 neutral outline badges, leaving colour for meaning and chart series.
 
 ## Dark mode
@@ -136,8 +134,8 @@ Set `color-scheme` on `<html>` as well so native controls match.
 ## Tools
 
 `@siyahi/tools` provides theme lint rules, font preload, layout screenshots
-(`siyahi-shots`), loading-shift checks (`siyahi-cls`) and contrast checks
-(`siyahi-contrast`). See the
+(`siyahi-shots`), loading-shift checks (`siyahi-cls`), contrast checks
+(`siyahi-contrast`) and a one-file page build (`siyahi-page`). See the
 [tools guide](https://github.com/jatinbansal1998/siyahi/blob/main/packages/tools/README.md)
 for configuration and commands.
 
@@ -146,7 +144,7 @@ for configuration and commands.
 ```sh
 pnpm install
 pnpm --filter @siyahi/tools exec playwright install chromium
-pnpm check
+pnpm check:static   # the full suite runs on each pull request's CI
 pnpm dev
 ```
 

package/THIRD_PARTY_NOTICES.md

@@ -8,17 +8,16 @@ file as copied; `packages/ui/registry.lock.json` lists them all and
 
 ## Copied into `@siyahi/ui`
 
-| What                                                                                                | Where in the package                                     | Origin                                                                                                                                                                                                                                                                                                                                                              | Licence                                                                             |
-| --------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
-| shadcn/ui core components (installed with `shadcn add`, never edited)                               | `src/components/ui/*`, `src/hooks/use-mobile.ts`         | https://github.com/shadcn-ui/ui                                                                                                                                                                                                                                                                                                                                     | MIT, Copyright (c) 2023 shadcn                                                      |
-| shadcn `tailwind.css` (variants and utilities the components use)                                   | `styles/shadcn.css`                                      | https://github.com/shadcn-ui/ui/tree/main/packages/shadcn                                                                                                                                                                                                                                                                                                           | MIT, Copyright (c) 2023 shadcn                                                      |
-| shadcn block `sidebar-07`                                                                           | `src/components/registry/sidebar-07/*`                   | https://ui.shadcn.com/r/styles/base-vega/sidebar-07.json                                                                                                                                                                                                                                                                                                            | MIT, Copyright (c) 2023 shadcn                                                      |
-| shadcn block `dashboard-01`, `SectionCards` only                                                    | `src/components/registry/dashboard-01/section-cards.tsx` | https://ui.shadcn.com/r/styles/base-vega/dashboard-01.json                                                                                                                                                                                                                                                                                                          | MIT, Copyright (c) 2023 shadcn                                                      |
-| Heatmaps: calendar, weekday by hour, status timeline                                                | `src/components/registry/heatmap/*`                      | https://shadcn-heatmap.pages.dev/r/calendar-heatmap.json, https://shadcn-heatmap.pages.dev/r/weekday-heatmap.json, https://shadcn-heatmap.pages.dev/r/status-heatmap.json (source: https://github.com/rutopio/shadcn-heatmap)                                                                                                                                       | MIT, Copyright (c) 2026 ChingRu                                                     |
-| niko-table data table on TanStack Table                                                             | `src/components/registry/niko-table/*`                   | https://niko-table.com/r/data-table.json, https://niko-table.com/r/data-table-core.json, https://niko-table.com/r/data-table-ui.json, https://niko-table.com/r/data-table-faceted-filter.json, https://niko-table.com/r/data-table-column-sort.json, https://niko-table.com/r/data-table-search-filter.json (source: https://github.com/Semkoo/niko-table-registry) | MIT, Copyright (c) 2025 Semir N.; original work Copyright (c) 2025 WebDevSimplified |
-| shadcn chart blocks `chart-bar-multiple`, `chart-area-stacked`, `chart-line-multiple`               | `src/components/registry/charts/*`                       | https://ui.shadcn.com/r/styles/new-york-v4/chart-bar-multiple.json, https://ui.shadcn.com/r/styles/new-york-v4/chart-area-stacked.json, https://ui.shadcn.com/r/styles/new-york-v4/chart-line-multiple.json                                                                                                                                                         | MIT, Copyright (c) 2023 shadcn                                                      |
-| dashboardcn ranked list (`BarList`), stacked bar (`DistributionBar`), `Sparkline` and `MetricStrip` | `src/components/registry/dashboardcn/*`                  | https://dashboardcn.com/r/bar-list.json, https://dashboardcn.com/r/distribution-bar.json, https://dashboardcn.com/r/sparkline.json, https://dashboardcn.com/r/kpi-row-card.json (source: https://github.com/NoahGdev/dashboardcn)                                                                                                                                   | MIT, Copyright (c) 2026 dashboardcn contributors                                    |
-| MiniDev copy button (`CopyButton`)                                                                  | `src/components/registry/minidev/copy-button.tsx`        | https://ui.minidev.pro/r/copy-button.json (source: https://github.com/amankaushik481/minidev-ui)                                                                                                                                                                                                                                                                    | MIT, Copyright (c) 2026 MiniDev                                                     |
+| What                                                                                                | Where in the package                              | Origin                                                                                                                                                                                                                                                                                                                                                              | Licence                                                                             |
+| --------------------------------------------------------------------------------------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
+| shadcn/ui core components (installed with `shadcn add`, never edited)                               | `src/components/ui/*`, `src/hooks/use-mobile.ts`  | https://github.com/shadcn-ui/ui                                                                                                                                                                                                                                                                                                                                     | MIT, Copyright (c) 2023 shadcn                                                      |
+| shadcn `tailwind.css` (variants and utilities the components use)                                   | `styles/shadcn.css`                               | https://github.com/shadcn-ui/ui/tree/main/packages/shadcn                                                                                                                                                                                                                                                                                                           | MIT, Copyright (c) 2023 shadcn                                                      |
+| shadcn block `sidebar-07`                                                                           | `src/components/registry/sidebar-07/*`            | https://ui.shadcn.com/r/styles/base-vega/sidebar-07.json                                                                                                                                                                                                                                                                                                            | MIT, Copyright (c) 2023 shadcn                                                      |
+| Heatmaps: calendar, weekday by hour, status timeline                                                | `src/components/registry/heatmap/*`               | https://shadcn-heatmap.pages.dev/r/calendar-heatmap.json, https://shadcn-heatmap.pages.dev/r/weekday-heatmap.json, https://shadcn-heatmap.pages.dev/r/status-heatmap.json (source: https://github.com/rutopio/shadcn-heatmap)                                                                                                                                       | MIT, Copyright (c) 2026 ChingRu                                                     |
+| niko-table data table on TanStack Table                                                             | `src/components/registry/niko-table/*`            | https://niko-table.com/r/data-table.json, https://niko-table.com/r/data-table-core.json, https://niko-table.com/r/data-table-ui.json, https://niko-table.com/r/data-table-faceted-filter.json, https://niko-table.com/r/data-table-column-sort.json, https://niko-table.com/r/data-table-search-filter.json (source: https://github.com/Semkoo/niko-table-registry) | MIT, Copyright (c) 2025 Semir N.; original work Copyright (c) 2025 WebDevSimplified |
+| shadcn chart blocks `chart-bar-multiple`, `chart-area-stacked`, `chart-line-multiple`               | `src/components/registry/charts/*`                | https://ui.shadcn.com/r/styles/new-york-v4/chart-bar-multiple.json, https://ui.shadcn.com/r/styles/new-york-v4/chart-area-stacked.json, https://ui.shadcn.com/r/styles/new-york-v4/chart-line-multiple.json                                                                                                                                                         | MIT, Copyright (c) 2023 shadcn                                                      |
+| dashboardcn ranked list (`BarList`), stacked bar (`DistributionBar`), `Sparkline` and `MetricStrip` | `src/components/registry/dashboardcn/*`           | https://dashboardcn.com/r/bar-list.json, https://dashboardcn.com/r/distribution-bar.json, https://dashboardcn.com/r/sparkline.json, https://dashboardcn.com/r/kpi-row-card.json (source: https://github.com/NoahGdev/dashboardcn)                                                                                                                                   | MIT, Copyright (c) 2026 dashboardcn contributors                                    |
+| MiniDev copy button (`CopyButton`)                                                                  | `src/components/registry/minidev/copy-button.tsx` | https://ui.minidev.pro/r/copy-button.json (source: https://github.com/amankaushik481/minidev-ui)                                                                                                                                                                                                                                                                    | MIT, Copyright (c) 2026 MiniDev                                                     |
 
 ## Runtime dependencies with attribution terms
 

package/agents/examples/app-sidebar.tsx

@@ -3,7 +3,6 @@ import {
   BlocksIcon,
   ChartAreaIcon,
   CodeIcon,
-  FileTextIcon,
   HouseIcon,
   LayersIcon,
   PaletteIcon,
@@ -18,7 +17,6 @@ const views = [
   { title: "Inputs and overlays", url: "#/inputs", icon: <SlidersHorizontalIcon /> },
   { title: "Data", url: "#/data", icon: <ChartAreaIcon /> },
   { title: "Blocks", url: "#/blocks", icon: <BlocksIcon />, isActive: true },
-  { title: "Reports", url: "#/reports", icon: <FileTextIcon /> },
   // linkProps go onto the anchor: here a new tab, in an app often onMouseEnter to prefetch the view's data.
   {
     title: "Source",

package/agents/examples/chart-panels.tsx

@@ -56,7 +56,6 @@ export default function ChartPanelsExample() {
         today="Oct"
         forecastFrom="Oct"
         valueFormatter={pct}
-        height={256}
       />
       <AreaChartCard
         title="Value by kind"
@@ -66,7 +65,6 @@ export default function ChartPanelsExample() {
         series={kinds}
         valueFormatter={money}
         yTickFormatter={moneyCompact}
-        height={256}
       />
       <BarChartCard
         title="Money added by kind and quarter"
@@ -76,7 +74,6 @@ export default function ChartPanelsExample() {
         series={kinds}
         valueFormatter={money}
         yTickFormatter={moneyCompact}
-        height={256}
       />
       <BarChartCard
         title="Money added by kind and quarter"
@@ -87,7 +84,6 @@ export default function ChartPanelsExample() {
         stacked
         valueFormatter={money}
         yTickFormatter={moneyCompact}
-        height={256}
       />
     </PanelGrid>
   );

package/agents/examples/{section-cards-select.tsx → metric-strip-select.tsx}

@@ -1,4 +1,4 @@
-import { Delta, SectionCards, useFormat, type SectionCard } from "@siyahi/ui";
+import { Delta, MetricStrip, useFormat, type MetricStripItem } from "@siyahi/ui";
 import { useState } from "react";
 
 // Each sales channel's profit this quarter and its orders; made-up figures.
@@ -9,19 +9,19 @@ const channels = [
   { label: "Marketplace", net: -61200, orders: 17 },
 ];
 
-export default function SectionCardsSelectExample() {
+export default function MetricStripSelectExample() {
   const [scope, setScope] = useState("All");
   const { count } = useFormat();
-  const items: SectionCard[] = channels.map((c) => ({
+  const items: MetricStripItem[] = channels.map((c) => ({
     label: c.label,
     value: <Delta value={c.net} format="money" />,
-    detail: `${count(c.orders)} orders`,
+    note: `${count(c.orders)} orders`,
     // Nothing to show for a channel with no orders, so it cannot be picked.
     disabled: c.orders === 0,
   }));
   return (
     <div className="flex flex-col gap-3">
-      <SectionCards items={items} selected={scope} onSelect={setScope} />
+      <MetricStrip items={items} selected={scope} onSelect={setScope} />
       <p className="text-sm text-muted-foreground">Showing {scope}</p>
     </div>
   );

package/agents/examples/metric-strip-trend.tsx

@@ -0,0 +1,33 @@
+import { MetricStrip, useFormat, type MetricStripItem } from "@siyahi/ui";
+
+export default function MetricStripTrendExample() {
+  const { money, moneyCompact } = useFormat();
+  // trend is each figure's run, oldest first; its change's sign colours it.
+  const items: MetricStripItem[] = [
+    {
+      label: "Revenue",
+      value: money(4512300),
+      change: 0.031,
+      note: "month-end, last six months",
+      trend: [3820000, 3950000, 4110000, 4020000, 4380000, 4512300],
+    },
+    {
+      label: "Cash flow this year",
+      value: moneyCompact(-61200),
+      change: -61200,
+      changeFormat: "money",
+      note: "running total since April",
+      trend: [0, -8200, -14100, -30400, -52800, -61200],
+      // The one figure on the page that needs a look, marked by the page: a falling cost would not be.
+      tone: "negative",
+    },
+    {
+      label: "Gift cards this year",
+      value: moneyCompact(38400),
+      change: 0.18,
+      note: "sold each month",
+      trend: [4100, 0, 12800, 3300, 9900, 8300],
+    },
+  ];
+  return <MetricStrip items={items} />;
+}

package/agents/examples/overview-dashboard.tsx

@@ -26,7 +26,7 @@ import {
 import { DownloadIcon, LightbulbIcon, PlusIcon } from "lucide-react";
 import { useState } from "react";
 import ChartArea from "./chart-area";
-import SectionCardsTrend from "./section-cards-trend";
+import MetricStripTrend from "./metric-strip-trend";
 
 interface Holding {
   name: string;
@@ -119,8 +119,8 @@ function Holdings({ rows }: { rows: Holding[] }) {
   );
 }
 
-// An app page on the default, ruled surface: masthead, controls, stat tiles, a chart and a table in a PanelGrid, and
-// the takeaway. It sets no surface: ruled on white is what a page gets.
+// An app page on the default, open surface: masthead, controls, stat tiles, a chart and a table in a PanelGrid, and
+// the takeaway. It sets no surface: blocks on the page with space between them is what a page gets.
 export default function OverviewDashboard() {
   const [query, setQuery] = useState("");
   const shown = holdings.filter((row) => row.name.toLowerCase().includes(query.trim().toLowerCase()));
@@ -166,7 +166,7 @@ export default function OverviewDashboard() {
           </a>
         </p>
       </div>
-      <SectionCardsTrend />
+      <MetricStripTrend />
       <PanelGrid>
         <ChartArea />
         <Holdings rows={shown} />

package/agents/examples/scatter-chart.tsx

@@ -43,7 +43,6 @@ export default function ScatterChartExample() {
       description="Across is the store's share of sales, up its growth on last year. Log spreads out the small stores; Linear shows how far ahead the largest are."
       action={<Badge variant="outline">This month</Badge>}
       points={stores}
-      height={360}
       xLabel="Share of sales"
       yLabel="Growth"
       // Log is selected first; the buttons in the header let the reader switch.

package/agents/examples/stale-blocks.tsx

@@ -1,4 +1,4 @@
-import { AreaChartCard, Delta, SectionCards, Sparkline, useFormat, type SectionCard } from "@siyahi/ui";
+import { AreaChartCard, MetricStrip, useFormat, type MetricStripItem } from "@siyahi/ui";
 
 const value = [
   { month: "May", equity: 2150000, debt: 600000, gold: 320000, intl: 390000, cash: 150000 },
@@ -20,26 +20,26 @@ const kinds = [
 // loses its colour and says since when. The page decides; nothing is inferred from dates.
 export default function StaleBlocksExample() {
   const { money, moneyCompact } = useFormat();
-  const tiles: SectionCard[] = [
+  const figures: MetricStripItem[] = [
     {
       label: "Revenue",
       value: money(4512300),
-      badge: <Delta value={0.031} />,
-      trend: <Sparkline data={[3820000, 3950000, 4110000, 4020000, 4380000, 4512300]} />,
-      detail: "Month-end, last six months",
+      change: 0.031,
+      note: "month-end, last six months",
+      trend: [3820000, 3950000, 4110000, 4020000, 4380000, 4512300],
     },
     {
       label: "Gift cards this year",
       value: moneyCompact(38400),
-      badge: <Delta value={0.18} />,
-      trend: <Sparkline data={[4100, 0, 12800, 3300, 9900, 8300]} variant="line" curve="linear" />,
-      detail: "Sold each month",
+      change: 0.18,
+      note: "sold each month",
+      trend: [4100, 0, 12800, 3300, 9900, 8300],
       stale: "3 Nov",
     },
   ];
   return (
     <div className="flex flex-col gap-6">
-      <SectionCards items={tiles} />
+      <MetricStrip items={figures} />
       <AreaChartCard
         title="Value by kind"
         description="Month-end value of each kind of holding"

package/agents/examples/surfaces.tsx

@@ -89,7 +89,7 @@ function Dashboard() {
 }
 
 export default function SurfacesExample() {
-  const [surface, setSurface] = useState<Surface>("ruled");
+  const [surface, setSurface] = useState<Surface>("open");
   return (
     <div className="flex flex-col gap-4">
       <ToggleGroup
@@ -103,9 +103,8 @@ export default function SurfacesExample() {
         aria-label="Surface"
       >
         {/* The default first. */}
-        <ToggleGroupItem value="ruled">Ruled</ToggleGroupItem>
-        <ToggleGroupItem value="card">Card</ToggleGroupItem>
         <ToggleGroupItem value="open">Open</ToggleGroupItem>
+        <ToggleGroupItem value="card">Card</ToggleGroupItem>
       </ToggleGroup>
       {/* A nested provider sets the surface for its part of the page. */}
       <SiyahiProvider surface={surface}>

package/agents/manifest.json

@@ -4,8 +4,6 @@
   "props": "dist/index.d.ts",
   "setup": "README.md#install",
   "layout": "README.md#surfaces",
-  "report": "report.css",
-  "reportRules": "agents/report-rules.json",
   "recipes": {
     "dashboard": "agents/examples/surfaces.tsx",
     "table": "agents/examples/data-table.tsx",
@@ -102,15 +100,7 @@
       ]
     },
     {
-      "need": "Headline figures with their change",
-      "guidance": "`SectionCards`, with a `Delta` in each badge",
-      "components": [
-        "SectionCards",
-        "Delta"
-      ]
-    },
-    {
-      "need": "Many figures of equal weight, each with its change and recent run",
+      "need": "Headline figures, or many figures of equal weight, each with its change and recent run",
       "guidance": "`MetricStrip`",
       "components": [
         "MetricStrip"
@@ -118,10 +108,10 @@
     },
     {
       "need": "A run of values beside a figure, in a tile, a strip or a table cell",
-      "guidance": "`Sparkline`; in a tile, `SectionCards`' `trend`",
+      "guidance": "`Sparkline`; in a strip, `MetricStrip`'s `trend`",
       "components": [
         "Sparkline",
-        "SectionCards"
+        "MetricStrip"
       ]
     },
     {
@@ -230,10 +220,10 @@
       ]
     },
     {
-      "need": "Stat tiles that pick a scope for the page",
-      "guidance": "`SectionCards` with `selected` and `onSelect`",
+      "need": "Figures that pick a scope for the page",
+      "guidance": "`MetricStrip` with `selected` and `onSelect`",
       "components": [
-        "SectionCards"
+        "MetricStrip"
       ]
     },
     {
@@ -291,8 +281,8 @@
       ]
     },
     {
-      "need": "Separate square cards instead of the default ruled panels, or no lines at all, for a page or a part of one",
-      "guidance": "`SiyahiProvider` with `surface=\"card\"` or `surface=\"open\"`",
+      "need": "Separate square cards instead of the default open blocks, for a page or a part of one",
+      "guidance": "`SiyahiProvider` with `surface=\"card\"`",
       "components": [
         "SiyahiProvider"
       ]
@@ -311,10 +301,10 @@
       "components": []
     },
     {
-      "need": "A chart or stat tile whose data is old",
-      "guidance": "`stale` on the chart card or the `SectionCards` item, with since when (\"3 Nov\"); `StaleNote` for another kind of block",
+      "need": "A chart or figure whose data is old",
+      "guidance": "`stale` on the chart card or the `MetricStrip` item, with since when (\"3 Nov\"); `StaleNote` for another kind of block",
       "components": [
-        "SectionCards",
+        "MetricStrip",
         "StaleNote"
       ]
     },
@@ -1028,6 +1018,21 @@
         "LocalTime"
       ]
     },
+    {
+      "file": "agents/examples/metric-strip-select.tsx",
+      "components": [
+        "Delta",
+        "MetricStrip",
+        "useFormat"
+      ]
+    },
+    {
+      "file": "agents/examples/metric-strip-trend.tsx",
+      "components": [
+        "MetricStrip",
+        "useFormat"
+      ]
+    },
     {
       "file": "agents/examples/metric-strip.tsx",
       "components": [
@@ -1188,31 +1193,6 @@
         "Separator"
       ]
     },
-    {
-      "file": "agents/examples/section-cards-select.tsx",
-      "components": [
-        "Delta",
-        "SectionCards",
-        "useFormat"
-      ]
-    },
-    {
-      "file": "agents/examples/section-cards-trend.tsx",
-      "components": [
-        "Delta",
-        "SectionCards",
-        "Sparkline",
-        "useFormat"
-      ]
-    },
-    {
-      "file": "agents/examples/section-cards.tsx",
-      "components": [
-        "Delta",
-        "SectionCards",
-        "useFormat"
-      ]
-    },
     {
       "file": "agents/examples/select.tsx",
       "components": [
@@ -1281,9 +1261,7 @@
       "file": "agents/examples/stale-blocks.tsx",
       "components": [
         "AreaChartCard",
-        "Delta",
-        "SectionCards",
-        "Sparkline",
+        "MetricStrip",
         "useFormat"
       ]
     },

package/dist/components/registry/dashboardcn/kpi-row-card.d.ts

@@ -2,21 +2,25 @@ import { Card } from "../../ui/card.js";
 import * as React$1 from "react";
 //#region src/components/registry/dashboardcn/kpi-row-card.d.ts
 export interface MetricStripItem {
-  /** Muted label above the figure. */
+  /** Small capital label above the figure; it also names the figure's button in a picker. */
   label: string;
   /** The figure, formatted by the page: money(4512300). */
   value: React$1.ReactNode;
   /** The signed change, drawn as a Delta under the figure; its sign colours the trend. For "pct", a fraction. */
   change?: number | undefined;
   changeFormat?: "pct" | "money" | undefined;
-  /** Muted words after the change, such as "vs last month". */
+  /** Muted words after the change, such as "vs last month", or what the figure covers. */
   note?: React$1.ReactNode;
-  /** Recent values, oldest first, drawn as a sparkline beside the figure. */
+  /** Recent values, oldest first, drawn as a sparkline under the figure. */
   trend?: number[] | undefined;
   /** Marks the figure as the exception on the page: a faint wash of the colour and an outline of it. */
   tone?: "negative" | "warning" | undefined;
+  /** Marks the figure's data as old, with since when, such as "3 Nov": it greys out and says so. */
+  stale?: React$1.ReactNode;
+  /** In a picker, a figure that cannot be picked, such as one with nothing in it: faded, its button disabled. */
+  disabled?: boolean | undefined;
 }
-export interface MetricStripProps extends Omit<React$1.ComponentProps<typeof Card>, "title"> {
+export interface MetricStripProps extends Omit<React$1.ComponentProps<typeof Card>, "title" | "onSelect"> {
   title?: React$1.ReactNode;
   description?: React$1.ReactNode;
   /** A range toggle, top right, that changes every figure. */
@@ -24,8 +28,12 @@ export interface MetricStripProps extends Omit<React$1.ComponentProps<typeof Car
   items: MetricStripItem[];
   /** Lines under the strip, such as what the figures cover. */
   footer?: React$1.ReactNode;
+  /** The label of the picked figure. */
+  selected?: string | undefined;
+  /** Makes each figure one button, so keep figure content non-interactive; gets the label of the figure picked. */
+  onSelect?: ((label: string) => void) | undefined;
 }
-/** A card holding a row of small figures, each with its change and a sparkline: more numbers in less room than stat tiles. */
-declare function MetricStrip({ title, description, action, items, footer, className, ...props }: MetricStripProps): React$1.JSX.Element;
+/** A row of figures, each with its change and recent run, optionally a picker that scopes the page. */
+declare function MetricStrip({ title, description, action, items, footer, selected, onSelect, className, ...props }: MetricStripProps): React$1.JSX.Element;
 //#endregion
 export { MetricStrip };