@siyahi/ui 0.1.9-next.36 → 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
@@ -62,19 +63,13 @@ a meaning:
 
 ## Surfaces
 
-`SiyahiProvider`'s `surface` sets how a data block sits on the page. The page
-and card colours are fixed: never tint the canvas.
-
-- **`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`. Ask for it with
-  `surface="card"`.
+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.
 
 ## Density
 
@@ -102,24 +97,30 @@ 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
 
@@ -127,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,
@@ -210,13 +217,9 @@ from the catalogue.
 
 ## Labels and totals
 
-- **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
-  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
 
@@ -259,13 +262,11 @@ from the catalogue.
 
 ## 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
 
@@ -278,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,22 +98,13 @@ and support one keyboard entry with arrow navigation. `WeekdayHeatmap` accepts
 
 ## Surfaces
 
-`SiyahiProvider` sets how data blocks sit on the page:
+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.
 
-- `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.
-
-`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` 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
+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.

package/THIRD_PARTY_NOTICES.md

@@ -21,10 +21,11 @@ file as copied; `packages/ui/registry.lock.json` lists them all and
 
 ## 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/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/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,29 +82,3 @@ function Dashboard() {
     </div>
   );
 }
-
-export default function SurfacesExample() {
-  const [surface, setSurface] = useState<Surface>("open");
-  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="open">Open</ToggleGroupItem>
-        <ToggleGroupItem value="card">Card</ToggleGroupItem>
-      </ToggleGroup>
-      {/* A nested provider sets the surface for its part of the page. */}
-      <SiyahiProvider surface={surface}>
-        <Dashboard />
-      </SiyahiProvider>
-    </div>
-  );
-}

package/agents/manifest.json

@@ -106,6 +106,14 @@
         "MetricStrip"
       ]
     },
+    {
+      "need": "The two to four figures a page leads with, set large at its top",
+      "guidance": "`MetricStrip` with `variant=\"blocks\"`, once per page, under the `PageHeader`",
+      "components": [
+        "MetricStrip",
+        "PageHeader"
+      ]
+    },
     {
       "need": "A run of values beside a figure, in a tile, a strip or a table cell",
       "guidance": "`Sparkline`; in a strip, `MetricStrip`'s `trend`",
@@ -280,13 +288,6 @@
         "PanelGrid"
       ]
     },
-    {
-      "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"
-      ]
-    },
     {
       "need": "A forecast stretch after the latest actual figure, or a marker for today",
       "guidance": "`LineChartCard` or `AreaChartCard` with `forecastFrom` and `today` set to x values",
@@ -1018,6 +1019,13 @@
         "LocalTime"
       ]
     },
+    {
+      "file": "agents/examples/metric-strip-headline.tsx",
+      "components": [
+        "MetricStrip",
+        "useFormat"
+      ]
+    },
     {
       "file": "agents/examples/metric-strip-select.tsx",
       "components": [
@@ -1276,15 +1284,12 @@
         "CardTitle",
         "MetricStrip",
         "PanelGrid",
-        "SiyahiProvider",
         "Table",
         "TableBody",
         "TableCell",
         "TableHead",
         "TableHeader",
         "TableRow",
-        "ToggleGroup",
-        "ToggleGroupItem",
         "useFormat"
       ]
     },

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

@@ -32,8 +32,14 @@ export interface MetricStripProps extends Omit<React$1.ComponentProps<typeof Car
   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;
+  /**
+   * "strip", the default: figures on the page with their sparklines. "blocks": the page's headline, two to four
+   * figures each on a solid block with a large value; it draws no sparkline and no tone, so mark an exception in a
+   * strip below it. One per page.
+   */
+  variant?: "strip" | "blocks" | undefined;
 }
 /** 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;
+declare function MetricStrip({ title, description, action, items, footer, selected, onSelect, variant, className, ...props }: MetricStripProps): React$1.JSX.Element;
 //#endregion
 export { MetricStrip };

package/dist/components/registry/dashboardcn/kpi-row-card.js

@@ -23,8 +23,9 @@ function trendColor(change) {
 	return "var(--muted-foreground)";
 }
 /** A row of figures, each with its change and recent run, optionally a picker that scopes the page. */
-function MetricStrip({ title, description, action, items, footer, selected, onSelect, className, ...props }) {
+function MetricStrip({ title, description, action, items, footer, selected, onSelect, variant = "strip", className, ...props }) {
 	const columns = COLUMNS[Math.min(items.length, 8)] ?? COLUMNS[8];
+	const blocks = variant === "blocks";
 	return /* @__PURE__ */ jsxs(Card, {
 		className: cn("gap-4", className),
 		...props,
@@ -36,15 +37,16 @@ function MetricStrip({ title, description, action, items, footer, selected, onSe
 			] }),
 			/* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", {
 				"data-slot": "metric-strip",
+				"data-variant": variant,
 				className: "@container/strip",
 				children: /* @__PURE__ */ jsx("div", {
-					className: cn("grid grid-cols-1 gap-x-6 gap-y-5", columns),
+					className: cn("grid grid-cols-1", blocks ? "gap-0" : "gap-4", columns),
 					children: items.map((item) => /* @__PURE__ */ jsxs("div", {
 						"data-slot": "metric-strip-item",
-						"data-tone": item.tone,
+						"data-tone": blocks ? void 0 : item.tone,
 						"data-stale": item.stale ? "" : void 0,
 						"data-picked": onSelect && item.label === selected ? "" : void 0,
-						className: cn("relative row-span-4 grid min-w-0 grid-rows-subgrid gap-y-1", onSelect && item.disabled && "opacity-60"),
+						className: cn("relative grid min-w-0 grid-rows-subgrid gap-y-1", blocks ? "row-span-3 p-4" : "row-span-4", onSelect && item.disabled && "opacity-60"),
 						children: [
 							onSelect && /* @__PURE__ */ jsx("button", {
 								type: "button",
@@ -61,7 +63,7 @@ function MetricStrip({ title, description, action, items, footer, selected, onSe
 							}),
 							/* @__PURE__ */ jsx("div", {
 								"data-slot": "metric-strip-value",
-								className: "text-xl font-semibold tracking-tight tabular-nums",
+								className: cn("font-semibold tabular-nums", blocks ? "mt-2 text-4xl leading-none tracking-tighter" : "text-lg tracking-tight"),
 								children: item.value
 							}),
 							/* @__PURE__ */ jsxs("div", {
@@ -78,7 +80,7 @@ function MetricStrip({ title, description, action, items, footer, selected, onSe
 									item.stale && /* @__PURE__ */ jsx(StaleNote, { since: item.stale })
 								]
 							}),
-							item.trend && item.trend.length > 1 ? /* @__PURE__ */ jsx(Sparkline, {
+							blocks ? null : item.trend && item.trend.length > 1 ? /* @__PURE__ */ jsx(Sparkline, {
 								data: item.trend,
 								variant: "line",
 								color: trendColor(item.change),

package/dist/components/siyahi/callout.js

@@ -21,9 +21,10 @@ function Callout({ tone = "neutral", icon, title, className, children, ...props
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex min-w-0 flex-col gap-1",
 			children: [title && /* @__PURE__ */ jsx("p", {
-				className: "font-medium",
+				className: "font-heading font-medium",
 				children: title
 			}), /* @__PURE__ */ jsx("div", {
+				"data-slot": "callout-description",
 				className: "text-pretty text-muted-foreground [&_strong]:text-foreground",
 				children
 			})]

package/dist/components/siyahi/inline-code.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 //#region src/components/siyahi/inline-code.d.ts
-/** A command, file name or identifier inside prose, in Geist Mono on a muted chip, at the size of the text around it. */
+/** A command, file name or identifier inside prose, in the mono face on a muted chip, at the size of the text around it. */
 export declare function InlineCode({ children }: {
   children: ReactNode;
 }): import("react").JSX.Element;

package/dist/components/siyahi/inline-code.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 //#region src/components/siyahi/inline-code.tsx
-/** A command, file name or identifier inside prose, in Geist Mono on a muted chip, at the size of the text around it. */
+/** A command, file name or identifier inside prose, in the mono face on a muted chip, at the size of the text around it. */
 function InlineCode({ children }) {
 	return /* @__PURE__ */ jsx("code", {
 		className: "rounded-sm bg-muted px-1 font-mono",

package/dist/components/siyahi/page-header.js

@@ -25,6 +25,7 @@ function PageHeader({ eyebrow, title, lead, detail, actions, mark }) {
 					children: title
 				}),
 				(lead || detail) && /* @__PURE__ */ jsxs("div", {
+					"data-slot": "page-header-description",
 					className: "text-sm text-pretty text-muted-foreground",
 					children: [
 						lead,

package/dist/components/siyahi/panel-grid.d.ts

@@ -17,9 +17,8 @@ export interface PanelGridProps {
   className?: string | undefined;
 }
 /**
- * Data blocks side by side: chart cards, tables, a MetricStrip. On an open surface, the default, space parts the
- * blocks: 24px across and 16px down, no box and no rule. A card surface sets them 8px apart, each in its own box. The
- * theme numbers each block's card title 01, 02.
+ * Data blocks side by side: chart cards, tables, a MetricStrip. Space parts the blocks, 16px across and 12px down,
+ * with no box and no rule. The theme numbers each block's card title 01, 02.
  */
 export declare function PanelGrid({ columns, children, className }: PanelGridProps): import("react").JSX.Element;
 //#endregion

package/dist/components/siyahi/panel-grid.js

@@ -1,4 +1,3 @@
-import { useSurface } from "./siyahi-provider.js";
 import { cn } from "cn";
 import { jsx } from "react/jsx-runtime";
 import { Children } from "react";
@@ -12,20 +11,17 @@ const COLUMNS = {
 const WIDE_THREE = "@min-[140rem]/panels:grid-cols-3";
 const WIDE_FOUR = "@min-[180rem]/panels:grid-cols-4";
 /**
-* Data blocks side by side: chart cards, tables, a MetricStrip. On an open surface, the default, space parts the
-* blocks: 24px across and 16px down, no box and no rule. A card surface sets them 8px apart, each in its own box. The
-* theme numbers each block's card title 01, 02.
+* Data blocks side by side: chart cards, tables, a MetricStrip. Space parts the blocks, 16px across and 12px down,
+* with no box and no rule. The theme numbers each block's card title 01, 02.
 */
 function PanelGrid({ columns = 2, children, className }) {
-	const surface = useSurface();
 	const blocks = Children.toArray(children).length;
 	const wide = cn(columns === 2 && blocks >= 3 && WIDE_THREE, (columns === 2 || columns === 3) && blocks >= 4 && WIDE_FOUR);
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "panel-grid",
-		"data-surface": surface,
 		className: cn("@container/panels", className),
 		children: /* @__PURE__ */ jsx("div", {
-			className: cn("grid grid-cols-1", COLUMNS[columns], wide, surface === "open" ? "gap-x-6 gap-y-4" : "gap-2"),
+			className: cn("grid grid-cols-1 gap-x-4 gap-y-3", COLUMNS[columns], wide),
 			children: Children.map(children, (child) => /* @__PURE__ */ jsx("div", {
 				"data-slot": "panel",
 				className: "min-w-0",

package/dist/components/siyahi/scatter-chart.js

@@ -19,7 +19,7 @@ const NAME_BAND = 42;
 const TICK = { className: "fill-muted-foreground font-mono" };
 const AXIS_TITLE = "fill-muted-foreground text-xs";
 const keyOf = (point) => point.key ?? point.name;
-const MONO_WIDTH = 7.2;
+const MONO_WIDTH = 6;
 /** Two measures per item as dots, such as size against growth, with the leading names beside their dots. */
 function ScatterChartCard({ title, description, action, points, height: fixedHeight, xLabel, yLabel, xScale = "linear", xScaleToggle = false, yScale = "linear", yScaleToggle = false, xFormatter, yFormatter, labels = 12, details, selected = null, onSelect, footer, quadrants, sizeLabel = "Size", sizeFormatter }) {
 	const { numberLocale } = useLocale();

package/dist/components/siyahi/siyahi-provider.d.ts

@@ -2,24 +2,15 @@ import { Optional } from "../../lib/optional.js";
 import { SiyahiLocale } from "../../lib/locale.js";
 import { ReactNode } from "react";
 //#region src/components/siyahi/siyahi-provider.d.ts
-/**
- * How a data block sits on the page. "open", the default: no fill, no lines and no padding, the block's content level
- * with the page's text and parted from the next by space. "card": a filled square card in a hairline ring, 8px from
- * the next, for a page of separate blocks.
- */
-export type Surface = "open" | "card";
 export interface SiyahiProviderProps {
   /** Any setting left out keeps its default: en-IN, INR, Asia/Kolkata. */
   locale?: Optional<SiyahiLocale> | undefined;
-  /**
-   * Set it on a nested provider for one part of a page. Left out, a provider keeps the surface around it, so a
-   * provider that only changes the locale changes nothing else; the outermost default is "open".
-   */
-  surface?: Surface | undefined;
   children: ReactNode;
 }
-/** Wrap the app once. Carries the locale, the surface and the tooltip provider shadcn asks for. */
-export declare function SiyahiProvider({ locale, surface, children }: SiyahiProviderProps): import("react").JSX.Element;
+/**
+ * Wrap the app once. Carries the locale and the tooltip provider shadcn asks for, and draws no element of its own, so
+ * a provider that changes the locale for a table's rows can sit inside a <tbody>.
+ */
+export declare function SiyahiProvider({ locale, children }: SiyahiProviderProps): import("react").JSX.Element;
 export declare function useLocale(): SiyahiLocale;
-export declare function useSurface(): Surface;
 //#endregion

package/dist/components/siyahi/siyahi-provider.js

@@ -4,9 +4,11 @@ import { jsx } from "react/jsx-runtime";
 import { createContext, use, useMemo } from "react";
 //#region src/components/siyahi/siyahi-provider.tsx
 const LocaleContext = createContext(defaultLocale);
-const SurfaceContext = createContext("open");
-/** Wrap the app once. Carries the locale, the surface and the tooltip provider shadcn asks for. */
-function SiyahiProvider({ locale, surface, children }) {
+/**
+* Wrap the app once. Carries the locale and the tooltip provider shadcn asks for, and draws no element of its own, so
+* a provider that changes the locale for a table's rows can sit inside a <tbody>.
+*/
+function SiyahiProvider({ locale, children }) {
 	const { numberLocale = defaultLocale.numberLocale, currency = defaultLocale.currency, timeZone = defaultLocale.timeZone } = locale ?? {};
 	const value = useMemo(() => ({
 		numberLocale,
@@ -17,25 +19,13 @@ function SiyahiProvider({ locale, surface, children }) {
 		currency,
 		timeZone
 	]);
-	const around = use(SurfaceContext);
 	return /* @__PURE__ */ jsx(LocaleContext, {
 		value,
-		children: /* @__PURE__ */ jsx(SurfaceContext, {
-			value: surface ?? around,
-			children: /* @__PURE__ */ jsx(TooltipProvider, { children: surface ? /* @__PURE__ */ jsx("div", {
-				"data-slot": "siyahi-provider",
-				"data-surface": surface,
-				className: "contents",
-				children
-			}) : children })
-		})
+		children: /* @__PURE__ */ jsx(TooltipProvider, { children })
 	});
 }
 function useLocale() {
 	return use(LocaleContext);
 }
-function useSurface() {
-	return use(SurfaceContext);
-}
 //#endregion
-export { SiyahiProvider, useLocale, useSurface };
+export { SiyahiProvider, useLocale };