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

package/DESIGN.md

@@ -13,9 +13,12 @@ a meaning:
 - **Ink indigo** is the accent: links, focus rings, the selected sidebar item,
   the first chart series and an `accent` `Callout`. Buttons, badges and toggles
   stay monochrome.
-- **Green and red** mean a gain and a loss, always with ▲ or ▼ (`Delta`).
+- **Green and red** mean a gain and a loss. A signed figure is `Delta`: the figure in the text colour with its
+  `+` or `−`, and only a small trend icon in green or red. In plain text (labels, tooltips) write the sign; never
+  colour a run of figures green and red.
   **Amber** means caution. None of them decorates.
-- **Emphasis tints the whole surface.** A caution is `WarningAlert`; a point set
+- **Emphasis tints the whole surface.** A notice is `StatusAlert` in its tone (an
+  error reads like a warning, only red); a state is `StatusBadge`; a point set
   apart is `Callout` (`neutral`, `accent`, `warning`, `positive`,
   `negative`); a quotation is `Quote`. Each takes a faint wash of its colour
   inside a 1px border of the same colour all round. Large marks follow the same
@@ -25,6 +28,16 @@ a meaning:
   with a left (or any single-side) coloured border; tint the box or add an
   icon. 1px neutral dividers between columns are separators, not accents, and
   are fine.
-- Categories (a broker, a sector, an asset class) stay neutral: outline badges,
+- **Edges that matter reach 3:1; the rest stay faint.** A field's edge (input,
+  textarea, select, input group, the command search) is `--input`, at 3:1 on the
+  canvas and the card; dividers, card rings, gridlines and the outlines of
+  buttons, toggles and code blocks are the faint `--border`. Focus is an opaque
+  `--ring`, or the opaque destructive red on a destructive control. A selected
+  toggle or pill tab fills with the foreground. A chart bar that a selection
+  dims keeps its full-colour outline and fades only inside.
+- **Destructive is not loss.** `--destructive` (delete, an invalid field) is a
+  deeper red than `--negative` (a loss figure), so its label reads on its own
+  tint; never use one for the other.
+- Categories (a team, a region, a product line) stay neutral: outline badges,
   never a hue each. Ordered buckets (largest 5, next 5, rest) use steps of one
   colour, not separate hues.

package/agents/examples/accordion.tsx

@@ -1,13 +1,13 @@
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@siyahi/ui";
 
 const questions = [
+  ["refresh", "When are the figures refreshed?", "Every night at midnight IST, and every minute for today's orders."],
   [
-    "prices",
-    "When are prices updated?",
-    "At the exchange close each trading day, and every minute while markets are open.",
+    "refunds",
+    "How are refunds counted?",
+    "A refund comes off the month the order was placed in, not the month it was paid.",
   ],
-  ["lots", "How are lots matched?", "Sells are matched to the oldest buy first, as the tax rules require."],
-  ["brokers", "Can I add a second broker?", "Yes. Each broker is its own account, and the totals add them up."],
+  ["stores", "Can I add a second store?", "Yes. Each store is its own workspace, and the totals add them up."],
 ] as const;
 
 function Questions() {
@@ -24,13 +24,13 @@ export default function AccordionExample() {
     <div className="grid gap-6 md:grid-cols-2">
       <div className="flex flex-col gap-2">
         <p className="text-sm text-muted-foreground">One open at a time</p>
-        <Accordion aria-label="One open at a time" defaultValue={["prices"]}>
+        <Accordion aria-label="One open at a time" defaultValue={["refresh"]}>
           <Questions />
         </Accordion>
       </div>
       <div className="flex flex-col gap-2">
         <p className="text-sm text-muted-foreground">Several open</p>
-        <Accordion aria-label="Several open" multiple defaultValue={["prices", "lots"]}>
+        <Accordion aria-label="Several open" multiple defaultValue={["refresh", "refunds"]}>
           <Questions />
         </Accordion>
       </div>

package/agents/examples/alert.tsx

@@ -1,23 +1,24 @@
-import { Alert, AlertDescription, AlertTitle, WarningAlert } from "@siyahi/ui";
-import { CircleAlertIcon, InfoIcon } from "lucide-react";
+import { AlertDescription, AlertTitle, StatusAlert } from "@siyahi/ui";
 
 export default function AlertExample() {
   return (
     <div className="flex flex-col gap-3">
-      <Alert>
-        <InfoIcon />
-        <AlertTitle>Prices are delayed</AlertTitle>
-        <AlertDescription>Quotes refresh every fifteen minutes during market hours.</AlertDescription>
-      </Alert>
-      <WarningAlert>
-        <AlertTitle>Two trades are unmatched</AlertTitle>
-        <AlertDescription>The contract notes list trades the ledger does not have yet.</AlertDescription>
-      </WarningAlert>
-      <Alert variant="destructive">
-        <CircleAlertIcon />
+      <StatusAlert>
+        <AlertTitle>Figures are delayed</AlertTitle>
+        <AlertDescription>Sales figures refresh every fifteen minutes during opening hours.</AlertDescription>
+      </StatusAlert>
+      <StatusAlert tone="warning">
+        <AlertTitle>Two payments are unmatched</AlertTitle>
+        <AlertDescription>The bank statement lists payments no order accounts for yet.</AlertDescription>
+      </StatusAlert>
+      <StatusAlert tone="negative">
         <AlertTitle>Import failed</AlertTitle>
-        <AlertDescription>The statement could not be read. Download it again and retry.</AlertDescription>
-      </Alert>
+        <AlertDescription>The CSV could not be read. Export it again and retry.</AlertDescription>
+      </StatusAlert>
+      <StatusAlert tone="positive">
+        <AlertTitle>Refunds are settled</AlertTitle>
+        <AlertDescription>All 14 refunds from last week have reached the customers' accounts.</AlertDescription>
+      </StatusAlert>
     </div>
   );
 }

package/agents/examples/app-sidebar.tsx

@@ -32,7 +32,9 @@ export default function AppSidebarExample() {
   return (
     // In an app, AppSidebar sits fixed at the edge; collapsible="none" draws it in place here.
     <SidebarProvider className="min-h-0">
-      <AppSidebar collapsible="none" navMain={views} navLabel="Views" className="rounded-lg border" />
+      <div className="flex overflow-hidden rounded-lg border">
+        <AppSidebar collapsible="none" navMain={views} navLabel="Views" />
+      </div>
     </SidebarProvider>
   );
 }

package/agents/examples/badge.tsx

@@ -1,18 +1,26 @@
-import { Badge, Delta } from "@siyahi/ui";
+import { Badge, Delta, StatusBadge } from "@siyahi/ui";
 
 export default function BadgeExample() {
   return (
-    <div className="flex flex-wrap items-center gap-2">
-      <Badge>Equity</Badge>
-      <Badge variant="secondary">Mutual fund</Badge>
-      <Badge variant="outline">Zerodha</Badge>
-      <Badge variant="destructive">Failed</Badge>
-      <Badge variant="outline">
-        <Delta value={0.042} />
-      </Badge>
-      <Badge variant="outline">
-        <Delta value={-0.013} />
-      </Badge>
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-wrap items-center gap-2">
+        <StatusBadge tone="positive">Paid</StatusBadge>
+        <StatusBadge tone="warning">Pending</StatusBadge>
+        <StatusBadge tone="negative">Failed</StatusBadge>
+        <StatusBadge tone="accent">New</StatusBadge>
+        <StatusBadge>Draft</StatusBadge>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Badge>Active</Badge>
+        <Badge variant="secondary">Archived</Badge>
+        <Badge variant="outline">Engineering</Badge>
+        <Badge variant="outline">
+          <Delta value={0.042} />
+        </Badge>
+        <Badge variant="outline">
+          <Delta value={-0.013} />
+        </Badge>
+      </div>
     </div>
   );
 }

package/agents/examples/bar-list-labels.tsx

@@ -1,9 +1,9 @@
 import { BarList, Card, CardContent, CardDescription, CardHeader, CardTitle, useFormat } from "@siyahi/ui";
 
-const sectors = [
-  { name: "Information Technology and Services", value: 100 },
-  { name: "Fast Moving Consumer Goods", value: 70 },
-  { name: "Automobile and Auto Components", value: 50 },
+const categories = [
+  { name: "Home Appliances and Kitchen Equipment", value: 100 },
+  { name: "Health, Beauty and Personal Care", value: 70 },
+  { name: "Books, Stationery and Office Supplies", value: 50 },
 ];
 
 export default function BarListLabelsExample() {
@@ -11,11 +11,11 @@ export default function BarListLabelsExample() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Orders by sector, ranked</CardTitle>
+        <CardTitle>Orders by category, ranked</CardTitle>
         <CardDescription>Full labels and order counts stay readable in narrow panels</CardDescription>
       </CardHeader>
       <CardContent>
-        <BarList data={sectors} valueFormatter={count} />
+        <BarList data={categories} valueFormatter={count} />
       </CardContent>
     </Card>
   );

package/agents/examples/bar-list-sides.tsx

@@ -1,14 +1,14 @@
 import { BarList, Card, CardContent, CardDescription, CardHeader, CardTitle, useFormat } from "@siyahi/ui";
 
-// The biggest unrealised gains and losses; made-up figures.
+// This quarter's revenue against last quarter's, by city: the biggest rises and falls; made-up figures.
 const gains = [
-  { name: "INFY", value: 84000 },
-  { name: "TCS", value: 52000 },
-  { name: "HDFCBANK", value: 31000 },
+  { name: "Mumbai", value: 84000 },
+  { name: "Bengaluru", value: 52000 },
+  { name: "Pune", value: 31000 },
 ];
 const losses = [
-  { name: "ITC", value: 18400 },
-  { name: "WIPRO", value: 7600 },
+  { name: "Kolkata", value: 18400 },
+  { name: "Jaipur", value: 7600 },
 ];
 
 export default function BarListSidesExample() {
@@ -18,19 +18,21 @@ export default function BarListSidesExample() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>What drives the P&L</CardTitle>
-        <CardDescription>The biggest ₹ gains and losses, on one scale</CardDescription>
+        <CardTitle>What moved revenue</CardTitle>
+        <CardDescription>The biggest ₹ rises and falls by city, on one scale</CardDescription>
       </CardHeader>
       {/* Each list is a column of its own, headed and ruled off, with its figures at its own right edge, so a
           gain's figure never reads as the label of the loss beside it. */}
-      <CardContent className="grid gap-6 md:grid-cols-2 md:gap-0 md:divide-x">
-        <div className="md:pr-6">
-          <h3 className="text-muted-foreground mb-2 text-xs font-medium">Gains</h3>
-          <BarList data={gains} max={max} color="var(--positive)" valueFormatter={(v) => money(v)} />
-        </div>
-        <div className="md:pl-6">
-          <h3 className="text-muted-foreground mb-2 text-xs font-medium">Losses</h3>
-          <BarList data={losses} max={max} color="var(--negative)" valueFormatter={(v) => money(v)} />
+      <CardContent>
+        <div className="grid gap-6 md:grid-cols-2 md:gap-0 md:divide-x">
+          <div className="md:pr-6">
+            <h3 className="text-muted-foreground mb-2 text-xs font-medium">Gains</h3>
+            <BarList data={gains} max={max} color="var(--positive)" valueFormatter={(v) => money(v)} />
+          </div>
+          <div className="md:pl-6">
+            <h3 className="text-muted-foreground mb-2 text-xs font-medium">Losses</h3>
+            <BarList data={losses} max={max} color="var(--negative)" valueFormatter={(v) => money(v)} />
+          </div>
         </div>
       </CardContent>
     </Card>

package/agents/examples/bar-list.tsx

@@ -1,11 +1,11 @@
 import { BarList, Card, CardContent, CardDescription, CardHeader, CardTitle, Delta, useFormat } from "@siyahi/ui";
 
-// detail is the loss as a share of what the holding cost.
-const largestLosses = [
-  { name: "ITC", value: 18400, detail: <Delta value={-0.062} /> },
-  { name: "HDFCBANK", value: 12900, detail: <Delta value={-0.047} /> },
-  { name: "WIPRO", value: 7600, detail: <Delta value={-0.072} /> },
-  { name: "Asian Paints (India)", value: 4100, detail: <Delta value={-0.06} /> },
+// value is the drop in a customer's monthly spend; detail is that drop as a share of last month's.
+const largestDrops = [
+  { name: "Sharma Textiles", value: 18400, detail: <Delta value={-0.062} /> },
+  { name: "Bluepine Logistics", value: 12900, detail: <Delta value={-0.047} /> },
+  { name: "Lakeview Clinics", value: 7600, detail: <Delta value={-0.072} /> },
+  { name: "Coastal Foods (India)", value: 4100, detail: <Delta value={-0.06} /> },
 ];
 
 export default function BarListExample() {
@@ -14,10 +14,10 @@ export default function BarListExample() {
     <Card>
       <CardHeader>
         <CardTitle>Needs attention</CardTitle>
-        <CardDescription>Largest unrealised losses</CardDescription>
+        <CardDescription>Customers whose spend fell most this month</CardDescription>
       </CardHeader>
       <CardContent>
-        <BarList data={largestLosses} valueFormatter={(v) => money(v)} showPercentage />
+        <BarList data={largestDrops} valueFormatter={(v) => money(v)} showPercentage />
       </CardContent>
     </Card>
   );

package/agents/examples/breadcrumb.tsx

@@ -12,15 +12,15 @@ export default function BreadcrumbExample() {
     <Breadcrumb>
       <BreadcrumbList>
         <BreadcrumbItem>
-          <BreadcrumbLink href="#/components">Portfolio</BreadcrumbLink>
+          <BreadcrumbLink href="#/components">Projects</BreadcrumbLink>
         </BreadcrumbItem>
         <BreadcrumbSeparator />
         <BreadcrumbItem>
-          <BreadcrumbLink href="#/components">Equity</BreadcrumbLink>
+          <BreadcrumbLink href="#/components">Website</BreadcrumbLink>
         </BreadcrumbItem>
         <BreadcrumbSeparator />
         <BreadcrumbItem>
-          <BreadcrumbPage>INFY</BreadcrumbPage>
+          <BreadcrumbPage>Checkout redesign</BreadcrumbPage>
         </BreadcrumbItem>
       </BreadcrumbList>
     </Breadcrumb>

package/agents/examples/calendar.tsx

@@ -4,12 +4,8 @@ import { useState } from "react";
 export default function CalendarExample() {
   const [date, setDate] = useState<Date | undefined>(new Date(2026, 9, 20));
   return (
-    <Calendar
-      mode="single"
-      selected={date}
-      onSelect={setDate}
-      defaultMonth={new Date(2026, 9, 1)}
-      className="w-fit rounded-lg border"
-    />
+    <div className="w-fit rounded-lg border">
+      <Calendar mode="single" selected={date} onSelect={setDate} defaultMonth={new Date(2026, 9, 1)} />
+    </div>
   );
 }

package/agents/examples/callout.tsx

@@ -1,33 +1,33 @@
-import { Callout, Quote, WarningAlert, AlertDescription, AlertTitle } from "@siyahi/ui";
+import { AlertDescription, AlertTitle, Callout, Quote, StatusAlert } from "@siyahi/ui";
 import { LightbulbIcon, InfoIcon, TriangleAlertIcon, TrendingUpIcon, TrendingDownIcon } from "lucide-react";
 
 export default function CalloutExample() {
   return (
     <div className="grid max-w-2xl gap-3">
       <Callout tone="accent" icon={<LightbulbIcon />} title="The takeaway">
-        Two of eleven gold rules made a profit in the final test; <strong>none</strong> held up in both metals.
+        Two of eleven pricing tests raised revenue; <strong>none</strong> held up in both regions.
       </Callout>
-      <Callout icon={<InfoIcon />} title="How the test was run">
-        One mini lot per trade, after charges and a harsher assumed execution cost.
+      <Callout icon={<InfoIcon />} title="How the tests were run">
+        Four weeks each on a random tenth of new visitors, with refunds and payment fees taken off.
       </Callout>
       <Callout tone="warning" icon={<TriangleAlertIcon />} title="Do not use the combined result">
-        Its test used later information, so its profit claims are withdrawn.
+        It counted orders placed before the test began, so its revenue claims are withdrawn.
       </Callout>
       <div className="grid gap-3 sm:grid-cols-2">
-        <Callout tone="positive" icon={<TrendingUpIcon />} title="Best rule">
-          A failed range break reverses: <strong>▲₹10,616</strong>.
+        <Callout tone="positive" icon={<TrendingUpIcon />} title="Best test">
+          Annual plan shown first: <strong className="whitespace-nowrap">+₹10,616</strong> a week.
         </Callout>
-        <Callout tone="negative" icon={<TrendingDownIcon />} title="Worst rule">
-          Break the first-hour range: <strong>▼₹70,679</strong>.
+        <Callout tone="negative" icon={<TrendingDownIcon />} title="Worst test">
+          Free delivery only above ₹999: <strong className="whitespace-nowrap">−₹70,679</strong> a week.
         </Callout>
       </div>
-      <Quote source="eMudhra's incident notice, 21 Oct 2026">
-        The affected intermediate keys were generated with insufficient entropy and have been revoked.
+      <Quote source="The hosting provider's incident report, 21 Oct 2026">
+        Requests to the Mumbai region failed for 42 minutes after a configuration change, which has been rolled back.
       </Quote>
-      <WarningAlert>
-        <AlertTitle>Ledger history is incomplete</AlertTitle>
-        <AlertDescription>Dhan's cash ledger starts in April 2024; earlier flows are missing.</AlertDescription>
-      </WarningAlert>
+      <StatusAlert tone="warning">
+        <AlertTitle>Order history is incomplete</AlertTitle>
+        <AlertDescription>The old shop's export starts in April 2024; earlier orders are missing.</AlertDescription>
+      </StatusAlert>
     </div>
   );
 }

package/agents/examples/card.tsx

@@ -16,8 +16,8 @@ export default function CardExample() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Portfolio value</CardTitle>
-        <CardDescription>Across all accounts</CardDescription>
+        <CardTitle>Revenue this quarter</CardTitle>
+        <CardDescription>Across all stores</CardDescription>
         <CardAction>
           <Button variant="outline" size="sm">
             <DownloadIcon />
@@ -28,7 +28,9 @@ export default function CardExample() {
       <CardContent>
         <p className="text-3xl font-semibold">{money(4512300)}</p>
       </CardContent>
-      <CardFooter className="text-muted-foreground">Updated after the market close</CardFooter>
+      <CardFooter>
+        <p className="text-muted-foreground">Updated every night at midnight</p>
+      </CardFooter>
     </Card>
   );
 }

package/agents/examples/change-bar.tsx

@@ -17,33 +17,33 @@ import {
   type DataTableColumnDef,
 } from "@siyahi/ui";
 
-interface Holding {
-  symbol: string;
-  /** Value at the close of 31 January and of 28 February, in rupees; made-up figures. */
+interface Region {
+  region: string;
+  /** Revenue in January and in February, in rupees; made-up figures. */
   january: number;
   february: number;
   change: number;
 }
 
-const holding = (symbol: string, january: number, february: number): Holding => ({
-  symbol,
+const region = (name: string, january: number, february: number): Region => ({
+  region: name,
   january,
   february,
   change: february / january - 1,
 });
 
-const holdings: Holding[] = [
-  holding("ICICIBANK", 231900, 258000),
-  holding("HDFCBANK", 248300, 262500),
-  holding("TCS", 161300, 166000),
-  holding("NIFTYBEES", 250400, 255600),
-  holding("ITC", 283100, 276000),
-  holding("INFY", 241800, 224400),
+const regions: Region[] = [
+  region("West", 231900, 258000),
+  region("South", 248300, 262500),
+  region("Central", 161300, 166000),
+  region("East", 250400, 255600),
+  region("Northeast", 283100, 276000),
+  region("North", 241800, 224400),
 ];
 
 // Every bar is a share of the column's largest move, and the column holds gains and losses, so the bars diverge.
-const largestChange = Math.max(...holdings.map((h) => Math.abs(h.change)));
-const diverging = holdings.some((h) => h.change < 0) && holdings.some((h) => h.change > 0);
+const largestChange = Math.max(...regions.map((r) => Math.abs(r.change)));
+const diverging = regions.some((r) => r.change < 0) && regions.some((r) => r.change > 0);
 
 function Money({ amount, muted = false }: { amount: number; muted?: boolean }) {
   const text = useFormat().money(amount);
@@ -52,20 +52,20 @@ function Money({ amount, muted = false }: { amount: number; muted?: boolean }) {
 
 const header = () => <DataTableSortHeader />;
 
-const columns: DataTableColumnDef<Holding>[] = [
-  { accessorKey: "symbol", header, size: 130, meta: { label: "Holding", compact: true } },
+const columns: DataTableColumnDef<Region>[] = [
+  { accessorKey: "region", header, size: 130, meta: { label: "Region", compact: true } },
   {
     accessorKey: "january",
     header,
     size: 130,
-    meta: { label: "31 Jan", variant: "number" },
+    meta: { label: "January", variant: "number" },
     cell: ({ row }) => <Money amount={row.original.january} muted />,
   },
   {
     accessorKey: "february",
     header,
     size: 130,
-    meta: { label: "28 Feb", variant: "number", compact: true },
+    meta: { label: "February", variant: "number", compact: true },
     cell: ({ row }) => <Money amount={row.original.february} />,
   },
   {
@@ -81,11 +81,11 @@ export default function ChangeBarExample() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>ICICIBANK rose 11.3% in February, INFY fell 7.2%</CardTitle>
-        <CardDescription>Each holding's value at the end of February against the end of January</CardDescription>
+        <CardTitle>The West grew 11.3% in February, the North fell 7.2%</CardTitle>
+        <CardDescription>Each region's revenue in February against January</CardDescription>
       </CardHeader>
       <CardContent>
-        <DataTableRoot data={holdings} columns={columns}>
+        <DataTableRoot data={regions} columns={columns}>
           <DataTableToolbarSection>
             <DataTableCompactColumnsToggle />
           </DataTableToolbarSection>

package/agents/examples/chart-area.tsx

@@ -1,27 +1,27 @@
 import { AreaChartCard, ToggleGroup, ToggleGroupItem, useFormat, type ChartSeries } from "@siyahi/ui";
 
 const data = [
-  { month: "May", value: 3820000, invested: 3600000 },
-  { month: "Jun", value: 3950000, invested: 3685000 },
-  { month: "Jul", value: 4110000, invested: 3770000 },
-  { month: "Aug", value: 4020000, invested: 3855000 },
-  { month: "Sep", value: 4380000, invested: 3940000 },
-  { month: "Oct", value: 4512300, invested: 4025000 },
+  { month: "May", revenue: 3820000, target: 3600000 },
+  { month: "Jun", revenue: 3950000, target: 3685000 },
+  { month: "Jul", revenue: 4110000, target: 3770000 },
+  { month: "Aug", revenue: 4020000, target: 3855000 },
+  { month: "Sep", revenue: 4380000, target: 3940000 },
+  { month: "Oct", revenue: 4512300, target: 4025000 },
 ];
 
 // The title states the finding, not the measure: what the reader would say after looking.
-// The first series fills; the money put in draws as a line over it.
+// The first series fills; the target draws as a line over it.
 const series: ChartSeries<(typeof data)[number]> = [
-  { key: "value", label: "Value", color: "var(--chart-1)" },
-  { key: "invested", label: "Invested", color: "var(--chart-2)" },
+  { key: "revenue", label: "Revenue", color: "var(--chart-1)" },
+  { key: "target", label: "Target", color: "var(--chart-2)" },
 ];
 
 export default function ChartAreaExample() {
   const { money, moneyCompact } = useFormat();
   return (
     <AreaChartCard
-      title="₹4.9L ahead of the money put in"
-      description="Portfolio value against money invested, at each month end"
+      title="October revenue ₹4.9L ahead of target"
+      description="Each month's revenue against its target"
       action={
         <ToggleGroup defaultValue={["6M"]} variant="outline" size="sm" aria-label="Range">
           <ToggleGroupItem value="6M">6M</ToggleGroupItem>

package/agents/examples/chart-bar-flows.tsx

@@ -1,6 +1,6 @@
 import { BarChartCard, useFormat, type ChartSeries } from "@siyahi/ui";
 
-// Money into and out of the account each month; out is negative. Made-up figures.
+// Money into and out of a shop's bank account each month; out is negative. Made-up figures.
 const data = [
   { month: "Jul", in: 84000, out: -52000 },
   { month: "Aug", in: 61000, out: -73000 },

package/agents/examples/chart-bar-hourly.tsx

@@ -1,6 +1,6 @@
 import { BarChartCard } from "@siyahi/ui";
 
-// Market hours in IST; each row is the hour an order was placed in.
+// Opening hours in IST; each row is the hour an order was placed in.
 const data = [
   { hour: 9, orders: 42 },
   { hour: 10, orders: 31 },

package/agents/examples/chart-bar-losses.tsx

@@ -1,6 +1,6 @@
 import { BarChartCard, useFormat, type ChartSeries } from "@siyahi/ui";
 
-// F&O net realized per financial year, a loss every year; made-up figures.
+// A new product line's operating result per financial year, a loss every year; made-up figures.
 const data = [
   { fy: "FY23", net: -48000 },
   { fy: "FY24", net: -91000 },
@@ -9,14 +9,14 @@ const data = [
 ];
 
 const series: ChartSeries<(typeof data)[number]> = [
-  { key: "net", label: "F&O net realized", color: "var(--positive)", negativeColor: "var(--negative)" },
+  { key: "net", label: "Operating result", color: "var(--positive)", negativeColor: "var(--negative)" },
 ];
 
 export default function ChartBarLossesExample() {
   const { money, moneyCompact } = useFormat();
   return (
     <BarChartCard
-      title="F&O realized by financial year"
+      title="Operating loss by financial year"
       description="A loss every year, so every bar runs down from zero"
       data={data}
       xKey="fy"