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

package/styles/siyahi.css

@@ -175,7 +175,7 @@
   --chart-1: oklch(0.4 0.17 275);
   --chart-2: oklch(0.66 0.13 70);
   --chart-3: oklch(0.38 0.13 335);
-  --chart-4: oklch(0.65 0.11 235);
+  --chart-4: oklch(0.64 0.11 235);
   --chart-5: oklch(0.36 0.06 205);
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
@@ -189,8 +189,8 @@
   @variant dark {
     /*
      * The canvas lifts just off black and text sits a step below white:
-     * near-white on near-black (19:1) blurs for many readers, and with the
-     * cards' grey gone on a ruled page the canvas is what text sits on.
+     * near-white on near-black (19:1) blurs for many readers, and on an open
+     * page, where cards have no fill, the canvas is what text sits on.
      * Claude Code (#181818, about #e8e8e8 text) and T3 Code (#0a0a0a, about
      * #bebebe) both narrow that gap; this sits between them, at 14.9:1.
      * Cards sit one step above the canvas, so data reads as raised, as the
@@ -325,7 +325,7 @@
 
 /*
  * A component that lifts a part of itself with a z-index is a stacking context
- * of its own: SectionCards' picker button, an avatar's badge, a calendar's
+ * of its own: MetricStrip's picker buttons, an avatar's badge, a calendar's
  * days, a focused toggle, a code block's buttons, a price chart's layers. The
  * lifted part then ranks only against the rest of its component, and can never
  * sit over, or take a tap from, a page's sticky header or section strip (also
@@ -757,13 +757,13 @@ svg :is(rect, circle, path)[tabindex]:focus-visible,
 }
 
 /*
- * An exception the page marks, a stat tile (SectionCard's tone), a MetricStrip
- * figure (its item's tone) or a table row (<TableRow data-tone="negative">, a
- * DataTableBody's getRowTone), takes a faint wash of its colour over the card,
- * and a tile or figure an outline of it, so the one figure needing attention
- * stands out of a run of neutral ones. Unlayered, to outrank a row's hover band.
+ * An exception the page marks, a MetricStrip figure (its item's tone) or a
+ * table row (<TableRow data-tone="negative">, a DataTableBody's getRowTone),
+ * takes a faint wash of its colour over the card, and a figure an outline of
+ * it, so the one figure needing attention stands out of a run of neutral
+ * ones. Unlayered, to outrank a row's hover band.
  */
-:is([data-slot="card"], [data-slot="metric-strip-item"], [data-slot="table-row"]) {
+:is([data-slot="metric-strip-item"], [data-slot="table-row"]) {
   &[data-tone="negative"] {
     --exception: var(--negative);
   }
@@ -771,24 +771,22 @@ svg :is(rect, circle, path)[tabindex]:focus-visible,
     --exception: var(--warning);
   }
 }
-:is([data-slot="card"], [data-slot="metric-strip-item"]):is([data-tone="negative"], [data-tone="warning"]) {
-  background-color: color-mix(in oklab, var(--exception) var(--wash), var(--card));
-}
-[data-slot="card"]:is([data-tone="negative"], [data-tone="warning"]) {
-  --tw-ring-color: color-mix(in oklab, var(--exception) var(--wash-edge), transparent);
-}
 /*
- * A figure's outline lies on the four hairlines around it, as a tile's ring does: its neighbours' rules before and
- * above it, and its own end and bottom rules, which sit outside the padding box the inset counts from.
+ * A MetricStrip figure has no padding of its own, so its text lines up with its neighbours'; its wash and outline
+ * reach 8px past it, into the gap, as a picked figure's outline does. --figure-wash is the wash the whole box takes.
  */
-[data-slot="metric-strip-item"]:is([data-tone="negative"], [data-tone="warning"]) {
-  position: relative;
-  &::after {
-    content: "";
-    position: absolute;
-    inset: -1px;
-    border: 1px solid color-mix(in oklab, var(--exception) var(--wash-edge), transparent);
-    pointer-events: none;
+[data-slot="metric-strip-item"] {
+  --figure-reach: calc(var(--spacing) * 2);
+  &:is([data-tone="negative"], [data-tone="warning"]) {
+    --figure-wash: color-mix(in oklab, var(--exception) var(--wash), var(--card));
+    background-color: var(--figure-wash);
+    box-shadow: 0 0 0 var(--figure-reach) var(--figure-wash);
+    outline: 1px solid color-mix(in oklab, var(--exception) var(--wash-edge), transparent);
+    outline-offset: var(--figure-reach);
+  }
+  &[data-picked] {
+    outline: 2px solid var(--primary);
+    outline-offset: var(--figure-reach);
   }
 }
 /* A pinned cell paints the card under itself (niko-table's lib/styles), so it lays the row's wash over that. */
@@ -830,11 +828,10 @@ svg :is(rect, circle, path)[tabindex]:focus-visible,
 }
 
 /*
- * A data table inside a card drops its own border: the card's ring or the
- * ruled page's hairlines already frame it. On an open page, with no frame,
- * it keeps its border.
+ * A data table inside a boxed card drops its own border: the card's ring
+ * already frames it. On an open page, with no frame, it keeps its border.
  */
-@scope (:root, [data-surface="ruled"], [data-surface="card"]) to ([data-surface="open"]) {
+@scope ([data-surface="card"]) to ([data-surface="open"]) {
   [data-slot="card"] [data-slot="table-container"] {
     border-color: transparent;
   }
@@ -888,21 +885,22 @@ svg :is(rect, circle, path)[tabindex]:focus-visible,
 }
 
 /*
- * A block the page marks stale (stale on a chart card or a SectionCards tile)
- * loses its colour: its chart, sparkline and badge turn grey, and a tile's
- * figure and badge turn muted. The chart and sparkline also draw at 65%, so a
+ * A block the page marks stale (stale on a chart card or a MetricStrip figure)
+ * loses its colour: its chart, sparkline and badge turn grey, and a figure
+ * turns muted. The chart and sparkline also draw at 65%, so a
  * dark slot's line does not read heavier than a fresh one: a stale block is
  * meant to be harder to read, so its marks are exempt from the 3:1 mark bar.
  * The small "Stale · 3 Nov" note under the title and the figure keep their
  * text contrast.
  */
-[data-slot="card"][data-stale] :is([data-slot="chart"], [data-slot="sparkline"], [data-slot="badge"]) {
+:is([data-slot="card"], [data-slot="metric-strip-item"])[data-stale]
+  :is([data-slot="chart"], [data-slot="sparkline"], [data-slot="badge"], [data-slot="delta"]) {
   filter: grayscale(1);
 }
-[data-slot="card"][data-stale] :is([data-slot="chart"], [data-slot="sparkline"]) {
+:is([data-slot="card"], [data-slot="metric-strip-item"])[data-stale] :is([data-slot="chart"], [data-slot="sparkline"]) {
   opacity: 0.65;
 }
-[data-slot="section-card"] [data-slot="card"][data-stale] :is([data-slot="card-title"], [data-slot="badge"]) {
+[data-slot="metric-strip-item"][data-stale] [data-slot="metric-strip-value"] {
   color: var(--muted-foreground);
 }
 
@@ -1002,40 +1000,39 @@ div[data-slot="sidebar"]:not([data-side], [data-mobile]) {
 }
 
 /*
- * Surfaces, from SiyahiProvider's surface prop. Ruled, the default, keeps
- * every card's fill and drops its ring: PanelGrid and SectionCards fill their
- * grid with the card colour and draw hairlines between the blocks, with a rule
- * above and below the group and none on its left and right edges, and a card
- * that stands alone, such as a MetricStrip or a table's card, takes those
- * rules above and below itself. Card is a filled square card with a hairline
- * ring and no shadow, 8px from the next, for a page of separate blocks. Open
- * takes the box off every core Card: no fill, no ring, no tinted footer band,
- * and no padding, so a block's content sits level with the page's text. Each
- * scope stops at a provider that says otherwise. Unlayered, like the rules
- * above, to outrank the core components' utility classes; a picked
- * SectionCards tile keeps its ring, which is important, and an exception
- * keeps its outline, which is more specific.
+ * Surfaces, from SiyahiProvider's surface prop. Open, the default, takes the
+ * box off every core Card: no fill, no ring, no tinted footer band, and no
+ * padding, so a block's content sits level with the page's text and space,
+ * not a box or a rule, parts it from the next. Card is a filled square card
+ * with a hairline ring and no shadow, 8px from the next, for a page of
+ * separate blocks. Each scope stops at a provider that says otherwise.
+ * Unlayered, like the rules above, to outrank the core components' utility
+ * classes.
  */
-@scope (:root, [data-surface="ruled"]) to ([data-surface="card"], [data-surface="open"]) {
-  [data-slot="card"] {
-    --tw-ring-color: transparent;
-  }
-  /*
-   * A card inside a panel or a tile's cell, or nested in another card, is ruled by what holds it; only a holder
-   * inside this scope counts, so a ruled provider inside a card starts its own lone cards afresh.
-   */
-  [data-slot="card"]:not(
-    :scope :is([data-slot="panel"], [data-slot="section-card"], [data-slot="card"]) [data-slot="card"]
-  ) {
-    border-block: 1px solid var(--border);
-  }
+/*
+ * An open card renames --card to the page colour for everything inside it, and a custom property inherits past a
+ * scope's end, so a card provider nested in an open card would fill its boxes with the page colour. --card-fill keeps
+ * the theme's card colour, set once at the root, and each card provider takes it back.
+ */
+:root {
+  --card-fill: var(--card);
+}
+[data-surface="card"] {
+  --card: var(--card-fill);
 }
 
-@scope ([data-surface="open"]) to ([data-surface="ruled"], [data-surface="card"]) {
+@scope (:root, [data-surface="open"]) to ([data-surface="card"]) {
   [data-slot="table-container"] {
     --table-fill: var(--background);
   }
+  /*
+   * With no fill, what lies under a card's marks is the page, so --card names the page colour inside it: a forecast's
+   * halos, a dot's ring, a bar's tint and an exception's wash mix into the canvas, not into a grey no box shows.
+   */
   [data-slot="card"] {
+    --card: var(--background);
+    /* No box, so no edge to clip at: a figure's wash or picker reaching past its text into the gap stays whole. */
+    overflow: visible;
     background: none;
     --tw-ring-color: transparent;
     --card-spacing: 0px;

package/agents/examples/section-cards-trend.tsx

@@ -1,32 +0,0 @@
-import { Delta, SectionCards, Sparkline, useFormat, type SectionCard } from "@siyahi/ui";
-
-export default function SectionCardsTrendExample() {
-  const { money, moneyCompact } = useFormat();
-  const items: SectionCard[] = [
-    {
-      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",
-    },
-    {
-      label: "Cash flow this year",
-      value: moneyCompact(-61200),
-      badge: <Delta value={-61200} format="money" />,
-      // A run of losses: the meaning colour, not a chart slot.
-      trend: <Sparkline data={[0, -8200, -14100, -30400, -52800, -61200]} color="var(--negative)" />,
-      detail: "Running total since April",
-      // 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),
-      badge: <Delta value={0.18} />,
-      trend: <Sparkline data={[4100, 0, 12800, 3300, 9900, 8300]} variant="line" curve="linear" />,
-      detail: "Sold each month",
-    },
-  ];
-  return <SectionCards items={items} />;
-}

package/agents/examples/section-cards.tsx

@@ -1,48 +0,0 @@
-import { Delta, SectionCards, type SectionCard, useFormat } from "@siyahi/ui";
-
-export default function SectionCardsExample() {
-  const { money, moneyCompact } = useFormat();
-  const items: SectionCard[] = [
-    {
-      label: "Revenue",
-      value: money(4512300),
-      badge: <Delta value={0.031} />,
-      headline: "Up for the third month",
-      detail: "Paid orders, less refunds",
-    },
-    {
-      label: "Target",
-      value: money(4025000),
-      headline: "Set at the start of the quarter",
-      detail: "Across 4 stores",
-    },
-    {
-      label: "Ahead of target",
-      value: moneyCompact(487300),
-      badge: <Delta value={0.121} />,
-      headline: "Gross margin 14.2%",
-      detail: "Since April",
-    },
-    {
-      label: "Cash flow this year",
-      value: moneyCompact(-61200),
-      badge: <Delta value={-61200} format="money" />,
-      headline: "Two large inventory buys",
-      detail: "Before tax",
-    },
-    {
-      label: "Gift cards this year",
-      value: moneyCompact(38400),
-      badge: <Delta value={0.18} />,
-      headline: "Sold in 11 stores",
-      detail: "Paid at purchase",
-    },
-  ];
-  return (
-    <div className="flex flex-col gap-6">
-      <SectionCards items={items.slice(0, 3)} />
-      <SectionCards items={items.slice(0, 4)} />
-      <SectionCards items={items} />
-    </div>
-  );
-}

package/dist/components/registry/dashboard-01/section-cards.d.ts

@@ -1,30 +0,0 @@
-import * as React$1 from "react";
-//#region src/components/registry/dashboard-01/section-cards.d.ts
-export interface SectionCard {
-  /** Muted label above the value. */
-  label: string;
-  value: React$1.ReactNode;
-  /** Outline badge, top right; usually a <Delta />. */
-  badge?: React$1.ReactNode;
-  /** A small chart under the value, usually a <Sparkline /> of the recent run. */
-  trend?: React$1.ReactNode;
-  /** Bold first footer line. */
-  headline?: React$1.ReactNode;
-  /** Muted second footer line. */
-  detail?: React$1.ReactNode;
-  /** In a picker, a tile that cannot be picked, such as one with nothing in it: faded, and its button disabled. */
-  disabled?: boolean | undefined;
-  /** Marks the tile as the exception on the page: a faint wash of the colour and an outline of it. */
-  tone?: "negative" | "warning" | undefined;
-  /** Marks the tile's data as old, with since when, such as "3 Nov": the tile greys out and says so. */
-  stale?: React$1.ReactNode;
-}
-export interface SectionCardsProps {
-  items: SectionCard[];
-  /** The label of the picked tile. */
-  selected?: string | undefined;
-  /** Makes each tile one button, so keep tile content non-interactive; gets the label of the tile picked. */
-  onSelect?: ((label: string) => void) | undefined;
-}
-export declare function SectionCards({ items, selected, onSelect }: SectionCardsProps): React$1.JSX.Element;
-//#endregion

package/dist/components/registry/dashboard-01/section-cards.js

@@ -1,74 +0,0 @@
-"use client";
-import { Badge } from "../../ui/badge.js";
-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 { useSurface } from "../../siyahi/siyahi-provider.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import "react";
-//#region src/components/registry/dashboard-01/section-cards.tsx
-const COLUMNS = {
-	2: "@xl/main:grid-cols-2",
-	3: "@3xl/main:grid-cols-3",
-	4: "@xl/main:grid-cols-2 @5xl/main:grid-cols-4",
-	5: "@3xl/main:grid-cols-3 @7xl/main:grid-cols-5",
-	6: "@3xl/main:grid-cols-3"
-};
-function SectionCards({ items, selected, onSelect }) {
-	const surface = useSurface();
-	const ruled = surface === "ruled";
-	return /* @__PURE__ */ jsx("div", {
-		"data-surface": surface,
-		className: cn("@container/main", ruled && "overflow-hidden border-y"),
-		children: /* @__PURE__ */ jsx("div", {
-			className: cn("grid grid-cols-1", ruled ? "-me-px -mb-px bg-card" : surface === "open" ? "gap-4" : "gap-2", COLUMNS[items.length] ?? COLUMNS[4]),
-			children: items.map((item) => /* @__PURE__ */ jsx("div", {
-				"data-slot": "section-card",
-				className: cn("min-w-0", ruled && "border-e border-b"),
-				children: /* @__PURE__ */ jsxs(Card, {
-					"data-tone": item.tone,
-					"data-stale": item.stale ? "" : void 0,
-					className: cn("@container/card h-full [--card-spacing:--spacing(3)]", onSelect && "relative", item.label === selected && "ring-2 ring-primary!", item.label === selected && ruled && "ring-inset", 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-0 z-10 rounded-[inherit] outline-none focus-visible:ring-3 focus-visible:ring-ring focus-visible:ring-inset"
-						}),
-						/* @__PURE__ */ jsxs(CardHeader, { children: [
-							/* @__PURE__ */ jsx(CardDescription, {
-								className: "font-mono text-2xs tracking-wider uppercase",
-								children: item.label
-							}),
-							item.stale && /* @__PURE__ */ jsx(StaleNote, { since: item.stale }),
-							/* @__PURE__ */ jsx(CardTitle, {
-								className: "text-2xl font-semibold tabular-nums",
-								children: item.value
-							}),
-							item.badge && /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Badge, {
-								variant: "outline",
-								children: item.badge
-							}) })
-						] }),
-						item.trend && /* @__PURE__ */ jsx(CardContent, { children: item.trend }),
-						(item.headline || item.detail) && /* @__PURE__ */ jsxs(CardFooter, {
-							className: "flex-col items-start gap-1 font-mono text-2xs tracking-wider uppercase",
-							children: [item.headline && /* @__PURE__ */ jsx("div", {
-								className: "flex flex-wrap gap-2 font-medium",
-								children: item.headline
-							}), item.detail && /* @__PURE__ */ jsx("div", {
-								className: "text-muted-foreground",
-								children: item.detail
-							})]
-						})
-					]
-				})
-			}, item.label))
-		})
-	});
-}
-//#endregion
-export { SectionCards };