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

package/styles/siyahi.css

@@ -24,6 +24,21 @@
  */
 @custom-variant dark (@media (prefers-color-scheme: dark));
 
+/*
+ * Nothing casts a drop shadow (DESIGN.md, "Floating surfaces lie flat"): every shadow size is transparent, so
+ * shadow-md and the rest draw nothing, on a component added later as on the ones here. The sizes stay defined, so
+ * a stock shadow class is still a known utility to Tailwind and the lint.
+ */
+@theme {
+  --shadow-2xs: 0 0 #0000;
+  --shadow-xs: 0 0 #0000;
+  --shadow-sm: 0 0 #0000;
+  --shadow-md: 0 0 #0000;
+  --shadow-lg: 0 0 #0000;
+  --shadow-xl: 0 0 #0000;
+  --shadow-2xl: 0 0 #0000;
+}
+
 @theme inline {
   --font-sans: "Geist Variable", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
   --font-mono: "Geist Mono Variable", "Geist Mono Fallback", ui-monospace, monospace;
@@ -160,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);
@@ -174,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
@@ -310,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
@@ -325,7 +340,13 @@
   [data-slot="calendar"],
   [data-slot="toggle-group"],
   [data-slot="code-block"],
-  [data-slot="price-chart"]
+  [data-slot="price-chart"],
+  [data-slot="button-group"],
+  [data-slot="input-otp-group"],
+  [data-slot="resizable-panel-group"],
+  [data-slot="attachment"],
+  [data-slot="bubble"],
+  [data-slot="questionnaire"]
 ) {
   isolation: isolate;
 }
@@ -409,11 +430,20 @@
   [role="alertdialog"],
   [role="menu"],
   [role="listbox"],
-  [data-slot="input"],
-  [data-slot="textarea"],
-  [data-slot="select-trigger"],
-  [data-slot="input-group-control"],
-  [data-slot="command-input"]
+  input:not(
+    [type="checkbox"],
+    [type="radio"],
+    [type="range"],
+    [type="hidden"],
+    [type="file"],
+    [type="button"],
+    [type="submit"],
+    [type="reset"],
+    [type="color"]
+  ),
+  textarea,
+  select,
+  [data-slot="select-trigger"]
 ),
 [data-slot="slider-thumb"]:has(input:focus-visible) {
   outline: none;
@@ -421,14 +451,74 @@
     inset 0 0 0 2px var(--ring),
     inset 0 0 0 4px var(--background);
 }
-:is([data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"]):focus-visible,
-[data-slot="input-group"]:has(:is([data-slot="input-group-control"], [data-slot="command-input"]):focus-visible) {
+/*
+ * A field is what HTML makes one, a text input, a textarea or a select, plus Base UI's select trigger, so a field in
+ * a component added later is covered without naming it. A field inside a box that holds it (an input group, a
+ * combobox's chips) shows its state on that box.
+ */
+:is(
+    input:not(
+      [type="checkbox"],
+      [type="radio"],
+      [type="range"],
+      [type="hidden"],
+      [type="file"],
+      [type="button"],
+      [type="submit"],
+      [type="reset"],
+      [type="color"]
+    ),
+    textarea,
+    select,
+    [data-slot="select-trigger"]
+  ):not(:is([data-slot="input-group"], [data-slot="combobox-chips"]) *):focus-visible,
+:is([data-slot="input-group"], [data-slot="combobox-chips"]):has(
+  :is(
+    input:not(
+      [type="checkbox"],
+      [type="radio"],
+      [type="range"],
+      [type="hidden"],
+      [type="file"],
+      [type="button"],
+      [type="submit"],
+      [type="reset"],
+      [type="color"]
+    ),
+    textarea,
+    select,
+    [data-slot="select-trigger"]
+  ):focus-visible
+) {
   outline: none;
   border-color: var(--ring);
   box-shadow: inset 0 0 0 1px var(--ring);
 }
-:is([data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"])[aria-invalid="true"]:focus-visible,
-[data-slot="input-group"]:has([data-slot="input-group-control"][aria-invalid="true"]:focus-visible) {
+:is(
+    input:not(
+      [type="checkbox"],
+      [type="radio"],
+      [type="range"],
+      [type="hidden"],
+      [type="file"],
+      [type="button"],
+      [type="submit"],
+      [type="reset"],
+      [type="color"]
+    ),
+    textarea,
+    select,
+    [data-slot="select-trigger"]
+  ):not(:is([data-slot="input-group"], [data-slot="combobox-chips"]) *)[aria-invalid="true"]:focus-visible,
+/* Names the field as the focus rule above does, so this rule outranks it rather than losing on specificity. */
+:is([data-slot="input-group"], [data-slot="combobox-chips"]):has(
+  :is(
+    input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="color"]),
+    textarea,
+    select,
+    [data-slot="select-trigger"]
+  )[aria-invalid="true"]:focus-visible
+) {
   border-color: var(--destructive);
   box-shadow: inset 0 0 0 1px var(--destructive);
 }
@@ -460,17 +550,43 @@ svg :is(rect, circle, path)[tabindex]:focus-visible,
 [class~="group/button"][class~="text-destructive"]:focus-visible,
 [data-slot="code-block"][data-variant="destructive"]:has(> [data-slot="code-block-content"]:focus-visible),
 :is(
-  [data-slot="input"],
-  [data-slot="textarea"],
-  [data-slot="select-trigger"],
-  [class~="group/button"]
-)[aria-invalid="true"],
-[data-slot="input-group"]:has([data-slot][aria-invalid="true"]) {
+    input:not(
+      [type="checkbox"],
+      [type="radio"],
+      [type="range"],
+      [type="hidden"],
+      [type="file"],
+      [type="button"],
+      [type="submit"],
+      [type="reset"],
+      [type="color"]
+    ),
+    textarea,
+    select,
+    [data-slot="select-trigger"]
+  ):not(:is([data-slot="input-group"], [data-slot="combobox-chips"]) *)[aria-invalid="true"],
+[class~="group/button"][aria-invalid="true"],
+:is([data-slot="input-group"], [data-slot="combobox-chips"]):has([aria-invalid="true"]) {
   border-color: var(--destructive);
 }
 /* An invalid field also takes a faint wash of the red, so it reads as the one to fix before its message is read. */
-:is([data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"])[aria-invalid="true"],
-[data-slot="input-group"]:has([data-slot][aria-invalid="true"]) {
+:is(
+    input:not(
+      [type="checkbox"],
+      [type="radio"],
+      [type="range"],
+      [type="hidden"],
+      [type="file"],
+      [type="button"],
+      [type="submit"],
+      [type="reset"],
+      [type="color"]
+    ),
+    textarea,
+    select,
+    [data-slot="select-trigger"]
+  ):not(:is([data-slot="input-group"], [data-slot="combobox-chips"]) *)[aria-invalid="true"],
+:is([data-slot="input-group"], [data-slot="combobox-chips"]):has([aria-invalid="true"]) {
   background-color: color-mix(in oklab, var(--destructive) var(--field-wash), var(--card));
 }
 
@@ -485,48 +601,86 @@ svg :is(rect, circle, path)[tabindex]:focus-visible,
   @apply font-mono text-2xs tracking-wider text-muted-foreground uppercase;
 }
 
-/* A group's label in a menu, a select's list or the command palette is a label over its items, set as one. */
+/*
+ * A group's label in a menu (dropdown, context, menubar), a select's or a combobox's list or the
+ * command palette is a label over its items, set as one.
+ */
 :is(
-  [data-slot="dropdown-menu-label"],
-  [data-slot="context-menu-label"],
+  [data-slot$="menu-label"],
+  [data-slot="menubar-label"],
   [data-slot="select-label"],
+  [data-slot="combobox-label"],
   [data-slot="command-group"] [cmdk-group-heading]
 ) {
   @apply font-mono text-2xs tracking-wider text-muted-foreground uppercase;
 }
 
 /*
- * A menu, a select's list, a popover, a dialog, a sheet and a chart's tooltip read as a sheet of the page, not a
- * bubble floating over it: no drop shadow, and the card's hairline for an edge (stock rings them fainter).
+ * A floating surface reads as a sheet of the page, not a bubble over it: no shadow (the theme has none) and the
+ * card's hairline for an edge. Stock shadcn edges a menu, a list, a popover, a dialog or a card with a fainter ring
+ * (ring-foreground/10, also behind a variant such as data-open:); it takes the hairline wherever it appears, on
+ * a component added later too. The
+ * chart's tooltip, which Recharts draws, is named.
  */
-:is(
-  [data-slot="dropdown-menu-content"],
-  [data-slot="dropdown-menu-sub-content"],
-  [data-slot="context-menu-content"],
-  [data-slot="context-menu-sub-content"],
-  [data-slot="select-content"],
-  [data-slot="popover-content"],
-  [data-slot="dialog-content"],
-  [data-slot="sheet-content"],
-  [data-slot="chart"] .recharts-tooltip-wrapper > div
-) {
-  --tw-shadow: 0 0 #0000;
+[class*="ring-foreground/10"] {
   --tw-ring-color: var(--border);
+}
+[data-slot="chart"] .recharts-tooltip-wrapper > div {
   border-color: var(--border);
 }
 
 /*
- * Square as every box is: progress, a slider's track and thumb, a scrollbar's thumb, and the colour chips core's
- * chart tooltip and legend draw at a fixed 2px, which no radius token reaches.
+ * Square corners everywhere (DESIGN.md): every element and its ::before and ::after are square, whatever rounding
+ * a component asks for (rounded-full, rounded-[4px], hover:rounded-full, after:rounded-full), on a component added
+ * later too. Only what is round by nature stays round, by what it is rather than its classes: an avatar, a radio
+ * and a radio's dot (a questionnaire's radio choice too), a status dot and a spinner. A chart draws its round marks
+ * in SVG, which this does not touch.
+ */
+:not(
+  [data-slot^="avatar"],
+  [data-slot="message-avatar"],
+  [role="radio"],
+  [role="radio"] *,
+  [data-type="radio"] [data-slot$="indicator"],
+  [data-type="radio"] [data-slot$="indicator-dot"],
+  [data-slot="status-dot"],
+  .animate-spin
+),
+:not(
+  [data-slot^="avatar"],
+  [data-slot="message-avatar"],
+  [role="radio"],
+  [role="radio"] *,
+  [data-type="radio"] [data-slot$="indicator"],
+  [data-type="radio"] [data-slot$="indicator-dot"],
+  [data-slot="status-dot"],
+  .animate-spin
+)::before,
+:not(
+  [data-slot^="avatar"],
+  [data-slot="message-avatar"],
+  [role="radio"],
+  [role="radio"] *,
+  [data-type="radio"] [data-slot$="indicator"],
+  [data-type="radio"] [data-slot$="indicator-dot"],
+  [data-slot="status-dot"],
+  .animate-spin
+)::after {
+  border-radius: 0;
+}
+
+/*
+ * Muted text is already the faintest that reads at 4.5:1 (contrast.mjs). Stock shadcn fades it further on some
+ * parts (text-muted-foreground/70 on a trace's description), under that bar, so a faded muted class reads as the
+ * muted colour itself.
  */
 :is(
-  [data-slot="progress-track"],
-  [data-slot="slider-track"],
-  [data-slot="slider-thumb"],
-  [data-slot="scroll-area-thumb"],
-  [data-slot="chart"] :is(.recharts-tooltip-wrapper, .recharts-legend-wrapper) [class~="rounded-[2px]"]
+  [class~="text-muted-foreground/50"],
+  [class~="text-muted-foreground/60"],
+  [class~="text-muted-foreground/70"],
+  [class~="text-muted-foreground/80"]
 ) {
-  border-radius: 0;
+  color: var(--muted-foreground);
 }
 
 /*
@@ -603,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);
   }
@@ -617,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. */
@@ -676,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;
   }
@@ -734,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);
 }
 
@@ -808,6 +960,7 @@ div[data-slot="sidebar"]:not([data-side], [data-mobile]) {
     [data-slot="toggle"],
     [data-slot="toggle-group-item"],
     [data-slot="select-trigger"],
+    [data-slot="native-select"],
     [data-slot="tabs-trigger"],
     [data-slot="input-group-button"]
   ) {
@@ -847,44 +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.
  */
-[data-slot="card"] {
-  --tw-ring-color: 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);
 }
-
-@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);
-  }
+[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/agents/report-rules.json

@@ -1,7 +0,0 @@
-[
-  "Never paint html or body beyond the base styles report.css sets.",
-  "Fluid width. No outer card and no banner title.",
-  "A panel with its own background gets 16px padding and var(--radius).",
-  "Charts get fixed pixel heights.",
-  "Never use 100vh."
-]

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