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

package/agents/manifest.json

@@ -100,26 +100,26 @@
       ]
     },
     {
-      "need": "Headline figures with their change",
-      "guidance": "`SectionCards`, with a `Delta` in each badge",
+      "need": "Headline figures, or many figures of equal weight, each with its change and recent run",
+      "guidance": "`MetricStrip`",
       "components": [
-        "SectionCards",
-        "Delta"
+        "MetricStrip"
       ]
     },
     {
-      "need": "Many figures of equal weight, each with its change and recent run",
-      "guidance": "`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"
+        "MetricStrip",
+        "PageHeader"
       ]
     },
     {
       "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"
       ]
     },
     {
@@ -228,10 +228,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"
       ]
     },
     {
@@ -288,13 +288,6 @@
         "PanelGrid"
       ]
     },
-    {
-      "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\"`",
-      "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",
@@ -309,10 +302,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"
       ]
     },
@@ -1026,6 +1019,28 @@
         "LocalTime"
       ]
     },
+    {
+      "file": "agents/examples/metric-strip-headline.tsx",
+      "components": [
+        "MetricStrip",
+        "useFormat"
+      ]
+    },
+    {
+      "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": [
@@ -1186,31 +1201,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": [
@@ -1279,9 +1269,7 @@
       "file": "agents/examples/stale-blocks.tsx",
       "components": [
         "AreaChartCard",
-        "Delta",
-        "SectionCards",
-        "Sparkline",
+        "MetricStrip",
         "useFormat"
       ]
     },
@@ -1296,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

@@ -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,18 @@ 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;
+  /**
+   * "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 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, variant, className, ...props }: MetricStripProps): React$1.JSX.Element;
 //#endregion
 export { MetricStrip };

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

@@ -1,18 +1,20 @@
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../../ui/card.js";
 import { cn } from "../../../lib/utils.js";
+import { StaleNote } from "../../siyahi/stale-note.js";
 import { Delta } from "../../siyahi/delta.js";
 import { Sparkline } from "./sparkline.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 //#region src/components/registry/dashboardcn/kpi-row-card.tsx
 const COLUMNS = {
-	1: "basis-full",
-	2: "basis-full @2xs/strip:basis-1/2",
-	3: "basis-full @lg/strip:basis-1/3",
-	4: "basis-full @2xs/strip:basis-1/2 @3xl/strip:basis-1/4",
-	5: "basis-full @2xs/strip:basis-1/2 @3xl/strip:basis-1/5",
-	6: "basis-full @2xs/strip:basis-1/2 @xl/strip:basis-1/3 @5xl/strip:basis-1/6",
-	8: "basis-full @2xs/strip:basis-1/2 @3xl/strip:basis-1/4 @7xl/strip:basis-1/8"
+	1: "",
+	2: "@2xs/strip:grid-cols-2",
+	3: "@lg/strip:grid-cols-3",
+	4: "@2xs/strip:grid-cols-2 @3xl/strip:grid-cols-4",
+	5: "@lg/strip:grid-cols-3 @3xl/strip:grid-cols-5",
+	6: "@2xs/strip:grid-cols-2 @xl/strip:grid-cols-3 @5xl/strip:grid-cols-6",
+	7: "@2xl/strip:grid-cols-4 @7xl/strip:grid-cols-7",
+	8: "@2xs/strip:grid-cols-2 @3xl/strip:grid-cols-4 @7xl/strip:grid-cols-8"
 };
 function trendColor(change) {
 	if (change === void 0) return "var(--chart-1)";
@@ -20,9 +22,10 @@ function trendColor(change) {
 	if (change < 0) return "var(--negative)";
 	return "var(--muted-foreground)";
 }
-/** A card holding a row of small figures, each with its change and a sparkline: more numbers in less room than stat tiles. */
-function MetricStrip({ title, description, action, items, footer, className, ...props }) {
+/** 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, 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,
@@ -34,40 +37,56 @@ function MetricStrip({ title, description, action, items, footer, className, ...
 			] }),
 			/* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", {
 				"data-slot": "metric-strip",
-				className: "@container/strip -mx-4 -my-3 overflow-hidden",
+				"data-variant": variant,
+				className: "@container/strip",
 				children: /* @__PURE__ */ jsx("div", {
-					className: "-me-px -mb-px flex flex-wrap",
+					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,
-						className: cn("flex min-w-0 flex-col gap-1.5 border-e border-b px-4 py-4", columns),
-						children: [/* @__PURE__ */ jsx("div", {
-							className: "truncate font-mono text-2xs tracking-wider text-muted-foreground uppercase",
-							children: item.label
-						}), /* @__PURE__ */ jsxs("div", {
-							className: "flex flex-wrap items-end justify-between gap-x-3 gap-y-1",
-							children: [/* @__PURE__ */ jsxs("div", {
-								className: "flex min-w-0 flex-col gap-0.5",
-								children: [/* @__PURE__ */ jsx("div", {
-									className: "text-xl font-semibold tracking-tight tabular-nums",
-									children: item.value
-								}), (item.change !== void 0 || item.note) && /* @__PURE__ */ jsxs("div", {
-									className: "flex flex-wrap items-center gap-x-1.5 text-xs",
-									children: [item.change !== void 0 && /* @__PURE__ */ jsx(Delta, {
+						"data-tone": blocks ? void 0 : item.tone,
+						"data-stale": item.stale ? "" : void 0,
+						"data-picked": onSelect && item.label === selected ? "" : void 0,
+						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",
+								"aria-label": item.label,
+								"aria-pressed": item.label === selected,
+								disabled: item.disabled,
+								onClick: () => onSelect(item.label),
+								className: "absolute -inset-2 z-10 outline-none focus-visible:ring-2 focus-visible:ring-ring"
+							}),
+							/* @__PURE__ */ jsx("div", {
+								"data-slot": "metric-strip-label",
+								className: "font-mono text-2xs tracking-wider break-words text-muted-foreground uppercase",
+								children: item.label
+							}),
+							/* @__PURE__ */ jsx("div", {
+								"data-slot": "metric-strip-value",
+								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", {
+								className: "flex flex-wrap items-center gap-x-1.5 gap-y-1 self-start text-xs",
+								children: [
+									item.change !== void 0 && /* @__PURE__ */ jsx(Delta, {
 										value: item.change,
 										format: item.changeFormat
-									}), item.note && /* @__PURE__ */ jsx("span", {
+									}),
+									item.note && /* @__PURE__ */ jsx("span", {
 										className: "text-muted-foreground",
 										children: item.note
-									})]
-								})]
-							}), item.trend && item.trend.length > 1 && /* @__PURE__ */ jsx(Sparkline, {
+									}),
+									item.stale && /* @__PURE__ */ jsx(StaleNote, { since: item.stale })
+								]
+							}),
+							blocks ? null : item.trend && item.trend.length > 1 ? /* @__PURE__ */ jsx(Sparkline, {
 								data: item.trend,
 								variant: "line",
 								color: trendColor(item.change),
-								className: "h-9 w-20 shrink-0"
-							})]
-						})]
+								className: "mt-1 h-8 w-full"
+							}) : /* @__PURE__ */ jsx("div", {})
+						]
 					}, item.label))
 				})
 			}) }),

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

@@ -9,18 +9,16 @@ declare const COLUMNS: {
 export interface PanelGridProps {
   /**
    * Blocks across from a 42rem grid, so three short ones fit a reading column (an article's 55rem); 4 goes two across
-   * there and four from 64rem. Below 42rem they sit one under another.
+   * there and four from 64rem. Below 42rem they sit one under another. From 140rem a grid of 2 takes a third across,
+   * and from 180rem a grid of 2 or 3 a fourth, when it holds that many blocks; 1 stays one.
    */
   columns?: keyof typeof COLUMNS | undefined;
   children: ReactNode;
   className?: string | undefined;
 }
 /**
- * Data blocks side by side: chart cards, tables, a MetricStrip. On a ruled surface, the default, the grid is filled
- * with the card colour and a hairline parts the blocks across and down, with a rule above and below the grid and none
- * on its sides; open leaves whitespace between them, and card an 8px gap between boxes. Each block's bottom and end
- * edges carry its rules and the grid clips the ones on its own edges, so an empty cell at the end of a short last row
- * is a blank stretch of the sheet, ruled off like the rest. 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";
@@ -9,25 +8,23 @@ const COLUMNS = {
 	3: "@2xl/panels:grid-cols-3",
 	4: "@2xl/panels:grid-cols-2 @5xl/panels:grid-cols-4"
 };
+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 a ruled surface, the default, the grid is filled
-* with the card colour and a hairline parts the blocks across and down, with a rule above and below the grid and none
-* on its sides; open leaves whitespace between them, and card an 8px gap between boxes. Each block's bottom and end
-* edges carry its rules and the grid clips the ones on its own edges, so an empty cell at the end of a short last row
-* is a blank stretch of the sheet, ruled off like the rest. 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 ruled = surface === "ruled";
+	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", ruled && "overflow-clip border-y", className),
+		className: cn("@container/panels", className),
 		children: /* @__PURE__ */ jsx("div", {
-			className: cn("grid grid-cols-1", COLUMNS[columns], ruled ? "-me-px -mb-px bg-card" : surface === "open" ? "gap-x-8 gap-y-6" : "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: cn("min-w-0", ruled && "border-e border-b"),
+				className: "min-w-0",
 				children: child
 			}))
 		})

package/dist/components/siyahi/scatter-chart.d.ts

@@ -25,8 +25,8 @@ export interface ScatterChartCardProps<T extends ScatterPoint> {
   action?: ReactNode;
   /** Most important first: earlier points take the labels. */
   points: T[];
-  /** Height of the plot, in pixels. */
-  height: number;
+  /** Height of the plot, in pixels. Left out, it follows the plot's width (fittedChartHeight). */
+  height?: number | undefined;
   /** What the x axis measures, under it, such as "Share of sales". */
   xLabel: string;
   /** What the y axis measures, beside it, such as "Growth on last year". */
@@ -64,6 +64,6 @@ export interface ScatterChartCardProps<T extends ScatterPoint> {
   sizeFormatter?: ((value: number) => string) | undefined;
 }
 /** Two measures per item as dots, such as size against growth, with the leading names beside their dots. */
-export declare function ScatterChartCard<T extends ScatterPoint>({ title, description, action, points, height, xLabel, yLabel, xScale, xScaleToggle, yScale, yScaleToggle, xFormatter, yFormatter, labels, details, selected, onSelect, footer, quadrants, sizeLabel, sizeFormatter }: ScatterChartCardProps<T>): import("react").JSX.Element;
+export declare function ScatterChartCard<T extends ScatterPoint>({ title, description, action, points, height: fixedHeight, xLabel, yLabel, xScale, xScaleToggle, yScale, yScaleToggle, xFormatter, yFormatter, labels, details, selected, onSelect, footer, quadrants, sizeLabel, sizeFormatter }: ScatterChartCardProps<T>): import("react").JSX.Element;
 //#endregion
 export type { ScatterQuadrants };

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

@@ -2,7 +2,9 @@ import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader,
 import { ChartContainer } from "../ui/chart.js";
 import { LOG_BLOCKED, useAxisScale } from "./scale-toggle.js";
 import { useLocale } from "./siyahi-provider.js";
+import { fittedChartHeight } from "../../lib/chart-series.js";
 import { fitsLog, ticksFor } from "../../lib/ticks.js";
+import { useElementWidth } from "../../lib/use-element-width.js";
 import { fontLoads, useRenderWhenFontsLoad } from "../../lib/use-render-when-fonts-load.js";
 import { corners, dotSizes, placeLabels, quadrantSplit } from "../../lib/scatter.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -17,11 +19,12 @@ 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, xLabel, yLabel, xScale = "linear", xScaleToggle = false, yScale = "linear", yScaleToggle = false, xFormatter, yFormatter, labels = 12, details, selected = null, onSelect, footer, quadrants, sizeLabel = "Size", sizeFormatter }) {
+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();
-	const plotRef = useRef(null);
+	const [plotRef, plotWidth] = useElementWidth();
+	const height = fixedHeight ?? fittedChartHeight(plotWidth);
 	const [focusedKey, setFocusedKey] = useState(null);
 	const keyed = useRef(null);
 	useEffect(() => {

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

@@ -2,25 +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. "ruled", the default: blocks filled with the card colour and parted by hairlines,
- * with a rule above and below each group and none on its sides. "card": a filled square card in a hairline ring, 8px
- * from the next, for a page of separate blocks. "open": no fill and no lines, the block's content level with the
- * page's text.
- */
-export type Surface = "ruled" | "card" | "open";
 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 "ruled".
-   */
-  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("ruled");
-/** 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 };