@siyahi/ui 0.1.9-next.22 → 0.1.9-next.23

package/agents/examples/distribution-bar-tug.tsx

@@ -11,17 +11,17 @@ import {
   type DistributionSegment,
 } from "@siyahi/ui";
 
-// Each closed position's net realized, ₹; made-up figures.
-const positions = [
-  { name: "INFY", value: 61000 },
-  { name: "TCS", value: 38000 },
-  { name: "HDFCBANK", value: 17000 },
-  { name: "ITC", value: -26000 },
-  { name: "WIPRO", value: -14000 },
-  { name: "SBIN", value: -6000 },
+// Each finished marketing campaign's net return, ₹: sales it brought in less what it cost; made-up figures.
+const campaigns = [
+  { name: "Festive sale", value: 61000 },
+  { name: "Referrals", value: 38000 },
+  { name: "Email win-back", value: 17000 },
+  { name: "Billboards", value: -26000 },
+  { name: "Podcast ads", value: -14000 },
+  { name: "Trade fair", value: -6000 },
 ];
-const won = positions.filter((p) => p.value > 0).reduce((sum, p) => sum + p.value, 0);
-const lost = positions.filter((p) => p.value < 0).reduce((sum, p) => sum + p.value, 0);
+const won = campaigns.filter((c) => c.value > 0).reduce((sum, c) => sum + c.value, 0);
+const lost = campaigns.filter((c) => c.value < 0).reduce((sum, c) => sum + c.value, 0);
 // One scale both ways, so whichever side reaches farther is the net.
 const reach = Math.max(won, -lost);
 
@@ -31,7 +31,7 @@ export default function DistributionBarTugExample() {
     <Card>
       <CardHeader>
         <CardTitle>The tug-of-war</CardTitle>
-        <CardDescription>Each closed position, losses left of break-even and gains right</CardDescription>
+        <CardDescription>Each finished campaign, losses left of break-even and gains right</CardDescription>
       </CardHeader>
       <CardContent>
         <div className="flex flex-col gap-2">
@@ -42,7 +42,7 @@ export default function DistributionBarTugExample() {
             markers={[{ at: 0 }]}
             highlighted={focus?.name ?? null}
             onHover={setFocus}
-            segments={positions.map(({ name, value }) => ({
+            segments={campaigns.map(({ name, value }) => ({
               name,
               value,
               color: value > 0 ? "var(--positive)" : "var(--negative)",
@@ -50,11 +50,11 @@ export default function DistributionBarTugExample() {
           />
           <div className="grid grid-cols-3 text-xs text-muted-foreground tabular-nums">
             <span>
-              losers <Delta value={lost} format="money" />
+              lost <Delta value={lost} format="money" />
             </span>
             <span className="text-center">break-even</span>
             <span className="text-right">
-              winners <Delta value={won} format="money" />
+              earned <Delta value={won} format="money" />
             </span>
           </div>
         </div>
@@ -66,7 +66,7 @@ export default function DistributionBarTugExample() {
             <Delta value={focus.value} format="money" />
           </p>
         ) : (
-          <p className="text-muted-foreground">Hover a band to see its position.</p>
+          <p className="text-muted-foreground">Hover a band to see its campaign.</p>
         )}
       </CardFooter>
     </Card>

package/agents/examples/dropdown-menu.tsx

@@ -19,8 +19,8 @@ export default function DropdownMenuExample() {
       </DropdownMenuTrigger>
       <DropdownMenuContent>
         <DropdownMenuGroup>
-          <DropdownMenuLabel>Holding</DropdownMenuLabel>
-          <DropdownMenuItem>View lots</DropdownMenuItem>
+          <DropdownMenuLabel>Order</DropdownMenuLabel>
+          <DropdownMenuItem>View parcels</DropdownMenuItem>
           <DropdownMenuItem>Export CSV</DropdownMenuItem>
         </DropdownMenuGroup>
         <DropdownMenuSeparator />

package/agents/examples/heatmap-calendar.tsx

@@ -13,7 +13,7 @@ import {
   CardTitle,
 } from "@siyahi/ui";
 
-// A year of trading days with a count of trades on each.
+// A year of working days with a count of production deploys on each.
 const data = Array.from({ length: 365 }, (_, i) => {
   const day = new Date(Date.UTC(2025, 9, 20 + i));
   const weekday = day.getUTCDay();
@@ -29,11 +29,11 @@ export default function HeatmapCalendarExample() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Trades per day</CardTitle>
+        <CardTitle>Deploys per day</CardTitle>
         <CardDescription>The last 12 months; counts use a single-hue fade of --chart-1</CardDescription>
       </CardHeader>
       <CardContent>
-        <CalendarHeatmap data={data} labels={{ heatmapLabel: "Trades per day over the last 12 months" }}>
+        <CalendarHeatmap data={data} labels={{ heatmapLabel: "Deploys per day over the last 12 months" }}>
           <CalendarHeatmapBody>
             {({ activity, dayIndex, weekIndex }) => (
               <CalendarHeatmapBlock
@@ -49,10 +49,10 @@ export default function HeatmapCalendarExample() {
             <div className="flex w-full flex-wrap items-center justify-between gap-x-6 gap-y-2">
               <p aria-live="polite" className="text-sm">
                 {picked
-                  ? `${picked.date}: ${count(picked.value)} trades`
-                  : "Select a day for its trade count. Use arrow keys to move between days."}
+                  ? `${picked.date}: ${count(picked.value)} deploys`
+                  : "Select a day for its deploy count. Use arrow keys to move between days."}
               </p>
-              <CalendarHeatmapLegend labels={{ less: "0 trades", more: `${count(busiest)} trades` }} />
+              <CalendarHeatmapLegend labels={{ less: "0 deploys", more: `${count(busiest)} deploys` }} />
             </div>
           </CalendarHeatmapFooter>
         </CalendarHeatmap>

package/agents/examples/heatmap-status.tsx

@@ -26,7 +26,7 @@ export default function HeatmapStatusExample() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Price feed</CardTitle>
+        <CardTitle>Checkout API</CardTitle>
         <CardDescription>Daily health: healthy, degraded or critical</CardDescription>
       </CardHeader>
       <CardContent>

package/agents/examples/heatmap-weekday.tsx

@@ -12,7 +12,7 @@ import {
   WeekdayHeatmapLegend,
 } from "@siyahi/ui";
 
-// Orders placed by weekday and hour of the trading session.
+// Support tickets opened by weekday and office hour; the overnight queue lands at 9.
 const data = [1, 2, 3, 4, 5].flatMap((weekday) =>
   [9, 10, 11, 12, 13, 14, 15].map((hour) => ({
     weekday,
@@ -33,8 +33,8 @@ export default function HeatmapWeekdayExample() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>When orders are placed</CardTitle>
-        <CardDescription>Weekday by hour in India Standard Time, market hours only</CardDescription>
+        <CardTitle>When support tickets arrive</CardTitle>
+        <CardDescription>Weekday by hour in India Standard Time, office hours only</CardDescription>
       </CardHeader>
       {/* Seven hours by five days is a small grid: capped, it keeps square cells, and the legend and the answer
           sit beside it instead of a wide empty card. */}
@@ -53,15 +53,15 @@ export default function HeatmapWeekdayExample() {
             <div className="flex flex-col items-start gap-3 text-sm">
               <WeekdayHeatmapLegend
                 className="ml-0"
-                labels={{ less: "0 orders", more: `${count(busiest.value)} orders an hour` }}
+                labels={{ less: "0 tickets", more: `${count(busiest.value)} tickets an hour` }}
               />
               <p>
-                Busiest: {DAYS[busiest.weekday]} at {hourLabel(busiest.hour)}, {count(busiest.value)} orders
+                Busiest: {DAYS[busiest.weekday]} at {hourLabel(busiest.hour)}, {count(busiest.value)} tickets
               </p>
               <p aria-live="polite" className="text-muted-foreground">
                 {picked
-                  ? `${DAYS[picked.weekday]}, ${hourLabel(picked.hour)} IST: ${count(picked.value)} orders`
-                  : "Select a cell for its order count. Use arrow keys to move between cells."}
+                  ? `${DAYS[picked.weekday]}, ${hourLabel(picked.hour)} IST: ${count(picked.value)} tickets`
+                  : "Select a cell for its ticket count. Use arrow keys to move between cells."}
               </p>
             </div>
           </div>

package/agents/examples/input-states.tsx

@@ -10,23 +10,23 @@ export default function InputStatesExample() {
         </label>
         <Input id="budget" inputMode="numeric" defaultValue="25,000" aria-describedby="budget-hint" />
         <p id="budget-hint" className="text-sm text-muted-foreground">
-          In rupees, before brokerage
+          In rupees, before tax
         </p>
       </div>
       <div className="grid gap-1.5">
-        <label htmlFor="folio" className="text-sm font-medium">
-          Folio number
+        <label htmlFor="pin" className="text-sm font-medium">
+          PIN code
         </label>
-        <Input id="folio" defaultValue="12/34" aria-invalid aria-describedby="folio-error" />
-        <p id="folio-error" className="text-sm text-destructive">
-          A folio is digits only, such as 1234567
+        <Input id="pin" defaultValue="56/001" aria-invalid aria-describedby="pin-error" />
+        <p id="pin-error" className="text-sm text-destructive">
+          A PIN code is six digits, such as 560001
         </p>
       </div>
       <div className="grid gap-1.5">
-        <label htmlFor="broker" className="text-sm font-medium text-muted-foreground">
-          Broker
+        <label htmlFor="team" className="text-sm font-medium text-muted-foreground">
+          Team
         </label>
-        <Input id="broker" defaultValue="Kite" disabled />
+        <Input id="team" defaultValue="Finance" disabled />
       </div>
     </div>
   );

package/agents/examples/input.tsx

@@ -4,14 +4,14 @@ import { SearchIcon } from "lucide-react";
 export default function InputExample() {
   return (
     <div className="flex max-w-sm flex-col gap-3">
-      <Input placeholder="Folio number" aria-label="Folio number" />
+      <Input placeholder="Order number" aria-label="Order number" />
       <InputGroup>
         <InputGroupAddon>
           <SearchIcon />
         </InputGroupAddon>
-        <InputGroupInput placeholder="Search symbols" aria-label="Search symbols" />
+        <InputGroupInput placeholder="Search customers" aria-label="Search customers" />
       </InputGroup>
-      <Textarea placeholder="Note for this trade" aria-label="Note" />
+      <Textarea placeholder="Note for this order" aria-label="Note" />
     </div>
   );
 }

package/agents/examples/local-time.tsx

@@ -4,7 +4,7 @@ export default function LocalTimeExample() {
   return (
     <>
       <p>
-        Prices as of <LocalTime value="2026-10-20T10:00:00Z" />. Hover the time to see it on your own clock.
+        Figures as of <LocalTime value="2026-10-20T10:00:00Z" />. Hover the time to see it on your own clock.
       </p>
       <p>
         Daily snapshot of <LocalTime value="2026-06-26T04:11:00Z" withDate />.

package/agents/examples/metric-strip.tsx

@@ -5,33 +5,33 @@ export default function MetricStripExample() {
   // trend is each figure's month-end run, oldest first.
   const items: MetricStripItem[] = [
     {
-      label: "Portfolio value",
+      label: "Revenue",
       value: money(4512300),
       change: 0.031,
       note: "vs Sep",
       trend: [3820000, 3950000, 4110000, 4020000, 4380000, 4512300],
     },
     {
-      label: "Invested",
+      label: "Target",
       value: moneyCompact(4025000),
       change: 85000,
       changeFormat: "money",
       trend: [3600000, 3685000, 3770000, 3855000, 3940000, 4025000],
     },
-    { label: "XIRR", value: pct(0.142), change: -0.004, trend: [0.151, 0.149, 0.152, 0.144, 0.146, 0.142] },
+    { label: "Gross margin", value: pct(0.142), change: -0.004, trend: [0.151, 0.149, 0.152, 0.144, 0.146, 0.142] },
     {
-      label: "Realised",
+      label: "Cash flow",
       value: moneyCompact(-61200),
       change: -61200,
       changeFormat: "money",
       trend: [14200, -3800, 9100, 2600, -18400, -61200],
     },
-    { label: "Dividends", value: moneyCompact(38400), change: 0.18, trend: [4100, 0, 12800, 3300, 9900, 8300] },
-    { label: "Holdings", value: count(42), note: "3 bought in Oct", trend: [38, 39, 39, 40, 39, 42] },
+    { label: "Gift cards", value: moneyCompact(38400), change: 0.18, trend: [4100, 0, 12800, 3300, 9900, 8300] },
+    { label: "Products", value: count(42), note: "3 added in Oct", trend: [38, 39, 39, 40, 39, 42] },
   ];
   return (
     <MetricStrip
-      title="Portfolio up 3.1% in October"
+      title="Revenue up 3.1% in October"
       description="Month-end figures with the six-month run behind each"
       action={
         <ToggleGroup defaultValue={["1M"]} variant="outline" size="sm" aria-label="Period">
@@ -40,7 +40,7 @@ export default function MetricStripExample() {
         </ToggleGroup>
       }
       items={items}
-      footer={<p className="text-muted-foreground">Valued at the last close, 31 Oct 2026</p>}
+      footer={<p className="text-muted-foreground">Booked up to 31 Oct 2026</p>}
     />
   );
 }

package/agents/examples/page-hero.tsx

@@ -19,8 +19,8 @@ export default function PageHeroExample() {
     <PageHero
       eyebrow="@siyahi/ui"
       title="Siyahi"
-      lead="Ink for numbers. A design system for pages people read figures from: portfolios, ledgers, research."
-      detail="Stock shadcn/ui on Base UI and Tailwind v4, with a finance theme, charts and tables that fit a phone, Indian-aware formatters and a lint. Siyahi is Hindi for ink."
+      lead="Ink for numbers. A design system for pages people read figures from: dashboards, ledgers, reports."
+      detail="Stock shadcn/ui on Base UI and Tailwind v4, with a theme for figures, charts and tables that fit a phone, Indian-aware formatters and a lint. Siyahi is Hindi for ink."
       actions={
         <>
           <Button nativeButton={false} render={<a href="#/data" />}>

package/agents/examples/popover.tsx

@@ -11,11 +11,11 @@ import {
 export default function PopoverExample() {
   return (
     <Popover>
-      <PopoverTrigger render={<Button variant="outline" className="w-fit" />}>How is this priced?</PopoverTrigger>
+      <PopoverTrigger render={<Button variant="outline" className="w-fit" />}>How is this counted?</PopoverTrigger>
       <PopoverContent align="start">
         <PopoverHeader>
-          <PopoverTitle>Last close</PopoverTitle>
-          <PopoverDescription>Holdings are valued at the exchange's last closing price.</PopoverDescription>
+          <PopoverTitle>Paid orders</PopoverTitle>
+          <PopoverDescription>Revenue counts paid orders, less refunds, on the day each was placed.</PopoverDescription>
         </PopoverHeader>
       </PopoverContent>
     </Popover>

package/agents/examples/price-chart.tsx

@@ -1,6 +1,6 @@
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, PriceChart } from "@siyahi/ui";
 
-// A made-up daily close series for one year.
+// A made-up daily series for one year: the average order value, in rupees.
 const data = Array.from({ length: 250 }, (_, i) => {
   const day = new Date(Date.UTC(2025, 9, 20 + Math.floor((i * 7) / 5)));
   return { time: day.toISOString().slice(0, 10), value: 1500 + i * 1.2 + Math.sin(i / 9) * 60 + Math.sin(i / 3) * 18 };
@@ -10,8 +10,8 @@ export default function PriceChartExample() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>INFY</CardTitle>
-        <CardDescription>Daily close, one year</CardDescription>
+        <CardTitle>Average order value</CardTitle>
+        <CardDescription>Daily, one year, ₹</CardDescription>
       </CardHeader>
       <CardContent>
         <PriceChart data={data} height={256} />

package/agents/examples/progress-tone.tsx

@@ -1,22 +1,23 @@
 import { ToneProgress, useFormat } from "@siyahi/ui";
 
-const positions = [
-  { symbol: "INFY", realized: 84200, share: 0.41 },
-  { symbol: "ITC", realized: -61200, share: 0.3 },
-  { symbol: "TCS", realized: 21000, share: 0.1 },
+// Each sales channel's profit or loss this quarter, and its share of all the profit and loss booked; made-up figures.
+const channels = [
+  { channel: "Online", profit: 84200, share: 0.41 },
+  { channel: "Retail", profit: -61200, share: 0.3 },
+  { channel: "Export", profit: 21000, share: 0.1 },
 ];
 
 export default function ProgressToneExample() {
   const { pct } = useFormat();
   return (
     <div className="flex max-w-sm flex-col gap-3 text-sm">
-      {positions.map((p) => (
-        <div key={p.symbol} className="flex items-center gap-3">
-          <span className="w-16 font-medium">{p.symbol}</span>
+      {channels.map((p) => (
+        <div key={p.channel} className="flex items-center gap-3">
+          <span className="w-16 font-medium">{p.channel}</span>
           <ToneProgress
-            tone={p.realized >= 0 ? "positive" : "negative"}
+            tone={p.profit >= 0 ? "positive" : "negative"}
             value={p.share * 100}
-            aria-label={`${p.symbol}'s share of the booked P&L`}
+            aria-label={`${p.channel}'s share of the quarter's profit and loss`}
             getAriaValueText={() => pct(p.share)}
             className="w-24"
           />

package/agents/examples/progress.tsx

@@ -3,7 +3,7 @@ import { Progress, ProgressLabel, ProgressValue } from "@siyahi/ui";
 export default function ProgressExample() {
   return (
     <Progress value={64} className="max-w-sm">
-      <ProgressLabel>Statements imported</ProgressLabel>
+      <ProgressLabel>Orders imported</ProgressLabel>
       <ProgressValue />
     </Progress>
   );

package/agents/examples/range-position-table.tsx

@@ -16,61 +16,61 @@ import {
   type DataTableColumnDef,
 } from "@siyahi/ui";
 
-interface Holding {
-  symbol: string;
-  /** Last close and the 52-week low and high closes, in rupees; made-up figures. */
-  close: number;
+interface Service {
+  service: string;
+  /** Today's 95th-percentile response time and the fastest and slowest day of the last 30, in ms; made-up figures. */
+  today: number;
   low: number;
   high: number;
-  /** How far up its range the close sits, 0 at the low and 1 at the high, so the column sorts. */
+  /** How far up its range today sits, 0 at the fastest day and 1 at the slowest, so the column sorts. */
   position: number;
 }
 
-const holding = (symbol: string, close: number, low: number, high: number): Holding => ({
-  symbol,
-  close,
+const service = (name: string, today: number, low: number, high: number): Service => ({
+  service: name,
+  today,
   low,
   high,
-  position: (close - low) / (high - low),
+  position: (today - low) / (high - low),
 });
 
-const holdings: Holding[] = [
-  holding("NIFTYBEES", 284, 241.2, 291.8),
-  holding("INFY", 1870, 1307, 2006.45),
-  holding("ICICIBANK", 1290, 1051.05, 1362.35),
-  holding("TCS", 4150, 3591.5, 4592.25),
-  holding("ITC", 460, 399.35, 528.5),
-  holding("HDFCBANK", 1750, 1613.6, 2027.4),
+const services: Service[] = [
+  service("search", 284, 241, 292),
+  service("catalogue", 187, 131, 201),
+  service("checkout", 329, 265, 342),
+  service("images", 415, 359, 459),
+  service("payments", 460, 399, 529),
+  service("login", 175, 161, 203),
 ];
 
-function Price({ amount }: { amount: number }) {
-  return useFormat().money(amount, 2);
+function Milliseconds({ value }: { value: number }) {
+  return `${useFormat().count(value)} ms`;
 }
 
 const header = () => <DataTableSortHeader />;
 
-const columns: DataTableColumnDef<Holding>[] = [
-  { accessorKey: "symbol", header, size: 130, meta: { label: "Symbol", compact: true } },
+const columns: DataTableColumnDef<Service>[] = [
+  { accessorKey: "service", header, size: 130, meta: { label: "Service", compact: true } },
   {
-    accessorKey: "close",
+    accessorKey: "today",
     header,
     size: 120,
-    meta: { label: "Close", variant: "number" },
-    cell: ({ row }) => <Price amount={row.original.close} />,
+    meta: { label: "p95 today", variant: "number" },
+    cell: ({ row }) => <Milliseconds value={row.original.today} />,
   },
   {
     accessorKey: "position",
     header,
     size: 200,
-    meta: { label: "52-week range", compact: true },
+    meta: { label: "30-day range", compact: true },
     cell: ({ row }) => (
       <RangePosition
         variant="compact"
         low={row.original.low}
         high={row.original.high}
-        value={row.original.close}
-        lowLabel="52-week low"
-        highLabel="52-week high"
+        value={row.original.today}
+        lowLabel="30-day fastest"
+        highLabel="30-day slowest"
       />
     ),
   },
@@ -80,17 +80,17 @@ export default function RangePositionTableExample() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>NIFTYBEES trades near its 52-week high, HDFCBANK near its low</CardTitle>
+        <CardTitle>Search is near its slowest of the month, login near its fastest</CardTitle>
         <CardDescription>
-          Each close on a track from the year's low close to its high; sort to rank them
+          Each service's response time today on a track from its fastest day to its slowest; sort to rank them
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <DataTableRoot data={holdings} columns={columns}>
+        <DataTableRoot data={services} columns={columns}>
           <DataTableToolbarSection>
             <DataTableCompactColumnsToggle />
           </DataTableToolbarSection>
-          <DataTable aria-label="Holdings in their 52-week range">
+          <DataTable aria-label="Services in their 30-day range">
             <DataTableHeader />
             <DataTableBody />
           </DataTable>

package/agents/examples/range-position.tsx

@@ -10,42 +10,42 @@ import {
   useFormat,
 } from "@siyahi/ui";
 
-// HDFCBANK over the last 52 weeks; made-up figures.
-const low = 1613.6;
-const high = 2027.4;
-const close = 1750.0;
+// Checkout's daily 95th-percentile response time over the last 30 days, in ms; made-up figures.
+const low = 161;
+const high = 203;
+const today = 175;
 
 export default function RangePositionExample() {
   const f = useFormat();
-  const price = (value: number) => f.money(value, 2);
+  const ms = (value: number) => `${f.count(value)} ms`;
   return (
     // Side by side once the card, not the screen, has room: in a narrow panel on a wide screen they stack.
     <Card className="@container/range">
       <CardHeader>
-        <CardTitle>HDFCBANK sits {f.pct((close - low) / (high - low), 0)} of the way up its 52-week range</CardTitle>
-        <CardDescription>The last close against the year's lowest and highest close</CardDescription>
+        <CardTitle>Checkout sits {f.pct((today - low) / (high - low), 0)} of the way up its 30-day range</CardTitle>
+        <CardDescription>Today's response time against the month's fastest and slowest day</CardDescription>
       </CardHeader>
       <CardContent>
         <div className="flex flex-col gap-8 @xl/range:flex-row @xl/range:items-end">
           <DataList className="@xl/range:w-56 @xl/range:shrink-0">
-            <DataListItem label="52-week low, 7 months ago">
-              <span className="tabular-nums">{price(low)}</span>
+            <DataListItem label="Fastest day, 3 weeks ago">
+              <span className="tabular-nums">{ms(low)}</span>
             </DataListItem>
-            <DataListItem label="52-week high, 11 weeks ago">
-              <span className="tabular-nums">{price(high)}</span>
+            <DataListItem label="Slowest day, 9 days ago">
+              <span className="tabular-nums">{ms(high)}</span>
             </DataListItem>
-            <DataListItem label="Last close">
-              <span className="tabular-nums">{price(close)}</span>
+            <DataListItem label="Today, 95th percentile">
+              <span className="tabular-nums">{ms(today)}</span>
             </DataListItem>
           </DataList>
           <RangePosition
             low={low}
             high={high}
-            value={close}
-            lowLabel="52-week low"
-            highLabel="52-week high"
-            caption="of the way up the 52-week range"
-            valueFormatter={price}
+            value={today}
+            lowLabel="30-day fastest"
+            highLabel="30-day slowest"
+            caption="of the way up the 30-day range"
+            valueFormatter={ms}
             className="@xl/range:flex-1"
           />
         </div>

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

@@ -1,25 +1,26 @@
 import { Delta, SectionCards, SiyahiProvider, useFormat, type SectionCard } from "@siyahi/ui";
 import { useState } from "react";
 
-const classes = [
-  { label: "All", net: 110200, positions: 181 },
-  { label: "Equity", net: 171400, positions: 164 },
-  { label: "Gold bonds", net: 0, positions: 0 },
-  { label: "F&O", net: -61200, positions: 17 },
+// Each sales channel's profit this quarter and its orders; made-up figures.
+const channels = [
+  { label: "All", net: 110200, orders: 181 },
+  { label: "Online", net: 171400, orders: 164 },
+  { label: "Wholesale", net: 0, orders: 0 },
+  { label: "Marketplace", net: -61200, orders: 17 },
 ];
 
 export default function SectionCardsSelectExample() {
   const [scope, setScope] = useState("All");
   const { count } = useFormat();
-  const items: SectionCard[] = classes.map((c) => ({
+  const items: SectionCard[] = channels.map((c) => ({
     label: c.label,
     value: <Delta value={c.net} format="money" />,
-    detail: `${count(c.positions)} positions`,
-    // Nothing to show for a class with no positions, so it cannot be picked.
-    disabled: c.positions === 0,
+    detail: `${count(c.orders)} orders`,
+    // Nothing to show for a channel with no orders, so it cannot be picked.
+    disabled: c.orders === 0,
   }));
   return (
-    // On a ruled surface the tiles part with hairlines, as on a trading screen, instead of sitting as cards.
+    // On a ruled surface the tiles part with hairlines, as on a dense operations screen, instead of sitting as cards.
     <SiyahiProvider surface="ruled">
       <div className="flex flex-col gap-3">
         <SectionCards items={items} selected={scope} onSelect={setScope} />

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

@@ -4,14 +4,14 @@ export default function SectionCardsTrendExample() {
   const { money, moneyCompact } = useFormat();
   const items: SectionCard[] = [
     {
-      label: "Portfolio value",
+      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: "Realised this year",
+      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.
@@ -19,11 +19,11 @@ export default function SectionCardsTrendExample() {
       detail: "Running total since April",
     },
     {
-      label: "Dividends this year",
+      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: "Credited each month",
+      detail: "Sold each month",
     },
   ];
   return <SectionCards items={items} />;