@siyahi/ui 0.1.9-next.35 → 0.1.9-next.37

package/DESIGN.md

@@ -10,13 +10,14 @@ component; this file says how to use them.
 Colour is placed, not spread. A page is neutral greys plus colour that carries
 a meaning:
 
-- **Ink indigo** is the accent: links, the selected sidebar item, the first
-  chart series, a chart's "today" rule and an `accent` `Callout`. Buttons, badges, toggles and focus
-  stay monochrome.
+- **Terminal amber** is the accent: links, the page's eyebrow and panel
+  numbers, the selected sidebar item and an `accent` `Callout`. Buttons,
+  badges, toggles and focus stay monochrome. Charts keep their own five-hue
+  palette, indigo first.
 - **Green and red** mean a gain and a loss. A signed figure is `Delta`: the figure in the text colour with its
   `+` or `−`, and only a small trend icon in green or red. In plain text (labels, tooltips) write the sign; never
   colour a run of figures green and red.
-  **Amber** means caution. None of them decorates.
+  **Yellow** means caution, kept apart from the amber accent. None of them decorates.
 - **Emphasis tints the whole surface.** A notice is `StatusAlert` in its tone (an
   error reads like a warning, only red); a state is `StatusBadge`; a point set
   apart is `Callout` (`neutral`, `accent`, `warning`, `positive`,
@@ -42,8 +43,8 @@ a meaning:
   fill alike. A field shows it as its own edge, 2px in the text colour; a chart
   mark as a dashed stroke, apart from a picked mark's solid one. A destructive
   control and an invalid field focus in the destructive red. Menu items show
-  focus as their highlight. A selected
-  toggle or pill tab fills with the foreground. A chart bar that a selection
+  focus as their highlight. A selected toggle or pill tab fills with the
+  foreground, as stock's faint grey cannot be told from the rest. A chart bar that a selection
   dims keeps its full-colour outline and fades only inside.
 - **Destructive is not loss.** `--destructive` (delete, an invalid field) is a
   deeper red than `--negative` (a loss figure), so its label reads on its own
@@ -51,57 +52,75 @@ 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
 
-`SiyahiProvider`'s `surface` sets how a data block sits on the page. The page
-and card colours are fixed: never tint the canvas.
+A data block sits open on the page: a `Card` has no fill, no ring and no
+padding, so its content sits level with the page's text. Space, not a box or a
+rule, parts the blocks: 16px across and 12px down in a `PanelGrid`, 16px
+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. `--card` is the
+page colour, so what a block's marks mix into is what lies under them. The
+page colour is 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.
-- **`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.
+## 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.
 
 ## Shape
 
-- **Square corners everywhere**: panels, cards, buttons, fields, badges,
-  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 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.** 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`),
-  beside its title or alone, never floating over the code, where it would
-  cover the end of a line. An untitled snippet takes the extra row.
+- **The look is shadcn's, set by tokens.** Siyahi sets colours, fonts,
+  `--radius` and shadows; stock components keep the shape and states shadcn
+  gives them. Beyond the terminal's type (Type, below), the theme restyles a
+  stock component only to fix a measured problem (contrast, clipping, touch
+  targets, density), never for taste.
+- **Square corners**: `--radius` is 0, so every corner a component takes from
+  the theme is square. A part shadcn rounds fully (a dot, a pill, a switch)
+  stays round. Never add a `rounded-*` class to a box.
+- **Floating surfaces lie flat.** Nothing casts a drop shadow: every shadow
+  size is transparent.
 - Badges stay boxed (an outline), the primary button and the pressed toggle
-  black (white in dark), titles in the sans face, at normal spacing.
+  black (white in dark).
+
+## Type
+
+Siyahi reads as a terminal. The page is set in M PLUS 1 Code, a mono half a
+font size wide, so a table fits its columns and a row its words on one line:
+figures, labels, controls, titles and tables share one grid. Tables set it at
+13px. Text that reads as sentences, a
+paragraph, a quote or a description, is set in Geist, where mono
+tires the eye over a line; the theme switches it by element, so a page writes
+no font classes. Labels over data (a `MetricStrip` figure's label, a table's
+column heads, a sidebar group's label, a group's label in a menu) are small
+capitals, muted. Never set a figure or a title in them.
 
 ## Page header
 
@@ -109,6 +128,12 @@ An app page opens on its masthead, `PageHeader`: a small mark and eyebrow in the
 mono face and link colour, the title, one muted line saying what the page is,
 the actions at the right, and a hairline under it. One per page; no hero card.
 
+A page may lead with its two to four main figures as a headline, under the
+masthead: `MetricStrip` with `variant="blocks"`, each figure on a solid block
+(the headline orange, then the text colour, then a grey), touching, its value
+large and every word in the block's own ink. One per page. It draws no
+sparkline and no tone, so an exception goes in a strip below it.
+
 ## Words
 
 A page is read by someone who acts on its figures. Its words are plain English,
@@ -192,14 +217,9 @@ 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
-  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
-  never set a figure or a title in it.
-- **A total row reads as a ledger's**: in `TableFooter`, one rule above it and
-  a double rule under it in the text colour, no band.
+- **Labels over data are small capitals** (Type, above). The components and
+  the theme set them; never set a label in this style by hand.
+- **A total row** goes in `TableFooter`.
 
 ## Charts
 
@@ -235,21 +255,18 @@ 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.
 
 ## Tables
 
-Tables are dense, as a ledger is: compact rows, a 1px rule in the text colour
-under the column heads, the first column (what the row is) in medium weight,
-and figures in the mono face. A figure is a cell marked `data-numeric`, which
-also right-aligns it (the data table marks its number columns; a plain
-`TableCell` or `TableHead` takes the attribute), and any `Delta` in a cell.
-Alignment alone is not a figure. Row hairlines stay; never stripes, never
-column rules.
+Tables are dense: compact rows, and column heads in small muted capitals.
+A number column is marked
+`data-numeric`, which right-aligns it, so figures line up by their units (the
+data table marks its number columns; a plain `TableCell` or `TableHead` takes
+the attribute). Row hairlines stay; never stripes, never column rules.
 
 ## Forms
 
@@ -262,5 +279,5 @@ column rules.
 ## Sidebar
 
 The sidebar is parted from the page by a hairline on its page-side edge, its
-group labels are small monospaced capitals and its rows are compact. Its fill,
-icons and the current page's mark stay as shadcn draws them.
+group labels are small capitals and its rows are compact. Everything else
+stays as shadcn draws it.

package/README.md

@@ -56,7 +56,7 @@ createRoot(root).render(
 );
 ```
 
-`preloadFonts()` loads Geist and Geist Mono with the scripts. Add `lucide-react`
+`preloadFonts()` loads Geist and M PLUS 1 Code 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. To host one page as a single
 HTML file, build it with `siyahi-page` from `@siyahi/tools`.
@@ -98,26 +98,15 @@ and support one keyboard entry with arrow navigation. `WeekdayHeatmap` accepts
 
 ## Surfaces
 
-`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="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
-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
+Data blocks sit open on the page: a `Card` has no fill, box or rule, and no
+padding, so a block's content sits level with the page's text. Space parts
+the blocks: 16px across and 12px down in a `PanelGrid`. The rest of the look
+is stock shadcn, set by the theme's tokens; `DESIGN.md` has the masthead and
+exception tones.
+
+Stack `PageSection` blocks with
+`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

package/THIRD_PARTY_NOTICES.md

@@ -8,24 +8,24 @@ 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                                                         | Licence                                            | Note                                                                                                                                      |
-| --------------------------------------------------------------- | -------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
-| `lightweight-charts` (TradingView)                              | Apache-2.0                                         | `PriceChart` keeps the library's attribution logo on by default; see https://github.com/tradingview/lightweight-charts/blob/master/NOTICE |
-| `@fontsource-variable/geist`, `@fontsource-variable/geist-mono` | SIL Open Font License 1.1 (fonts), MIT (packaging) | Geist by Vercel                                                                                                                           |
+| Package                              | Licence                                            | Note                                                                                                                                      |
+| ------------------------------------ | -------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| `lightweight-charts` (TradingView)   | Apache-2.0                                         | `PriceChart` keeps the library's attribution logo on by default; see https://github.com/tradingview/lightweight-charts/blob/master/NOTICE |
+| `@fontsource-variable/geist`         | SIL Open Font License 1.1 (fonts), MIT (packaging) | Geist by Vercel                                                                                                                           |
+| `@fontsource-variable/m-plus-1-code` | SIL Open Font License 1.1 (fonts), MIT (packaging) | M PLUS 1 Code by The M+ FONTS Project Authors                                                                                             |
 
 Every other dependency is installed from npm under its own licence and is not
 copied into this repository.

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/metric-strip-headline.tsx

@@ -0,0 +1,12 @@
+import { MetricStrip, useFormat, type MetricStripItem } from "@siyahi/ui";
+
+export default function MetricStripHeadlineExample() {
+  const { money, moneyCompact } = useFormat();
+  // The page's headline: three figures on solid blocks. An exception goes in a strip below, not here.
+  const items: MetricStripItem[] = [
+    { label: "Net worth", value: moneyCompact(4185700), change: 0.091, note: "on the year" },
+    { label: "Equity share", value: "74%", note: "plan 65%" },
+    { label: "Cash flow this year", value: money(-61200), note: "since April" },
+  ];
+  return <MetricStrip variant="blocks" items={items} />;
+}

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

@@ -7,20 +7,15 @@ import {
   CardTitle,
   MetricStrip,
   PanelGrid,
-  SiyahiProvider,
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableHeader,
   TableRow,
-  ToggleGroup,
-  ToggleGroupItem,
   useFormat,
   type MetricStripItem,
-  type Surface,
 } from "@siyahi/ui";
-import { useState } from "react";
 
 const orders = [
   { hour: 9, orders: 42 },
@@ -38,7 +33,7 @@ const products = [
   { product: "Bookshelf", revenue: 166000 },
 ];
 
-function Dashboard() {
+export default function SurfacesExample() {
   const { money, moneyCompact, pct } = useFormat();
   const kpis: MetricStripItem[] = [
     { label: "Revenue", value: money(4512300), change: 0.031 },
@@ -87,30 +82,3 @@ function Dashboard() {
     </div>
   );
 }
-
-export default function SurfacesExample() {
-  const [surface, setSurface] = useState<Surface>("ruled");
-  return (
-    <div className="flex flex-col gap-4">
-      <ToggleGroup
-        value={[surface]}
-        onValueChange={([next]) => {
-          // Pressing the selected surface again would leave none selected; keep it.
-          if (next) setSurface(next as Surface);
-        }}
-        variant="outline"
-        size="sm"
-        aria-label="Surface"
-      >
-        {/* The default first. */}
-        <ToggleGroupItem value="ruled">Ruled</ToggleGroupItem>
-        <ToggleGroupItem value="card">Card</ToggleGroupItem>
-        <ToggleGroupItem value="open">Open</ToggleGroupItem>
-      </ToggleGroup>
-      {/* A nested provider sets the surface for its part of the page. */}
-      <SiyahiProvider surface={surface}>
-        <Dashboard />
-      </SiyahiProvider>
-    </div>
-  );
-}