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

package/agents/examples/chart-bar.tsx

@@ -2,20 +2,20 @@ import { useState } from "react";
 import { BarChartCard, ToggleGroup, ToggleGroupItem, useFormat, type ChartSeries } from "@siyahi/ui";
 
 const data = [
-  { quarter: "Q1", equity: 120000, debt: 40000, gold: 15000, cash: 9000, reits: 4000 },
-  { quarter: "Q2", equity: 95000, debt: 52000, gold: 20000, cash: 6000, reits: 3000 },
-  { quarter: "Q3", equity: 140000, debt: 38000, gold: 12000, cash: 11000, reits: 5000 },
-  { quarter: "Q4", equity: 160000, debt: 45000, gold: 25000, cash: 7000, reits: 2000 },
+  { quarter: "Q1", online: 120000, retail: 40000, wholesale: 15000, marketplace: 9000, events: 4000 },
+  { quarter: "Q2", online: 95000, retail: 52000, wholesale: 20000, marketplace: 6000, events: 3000 },
+  { quarter: "Q3", online: 140000, retail: 38000, wholesale: 12000, marketplace: 11000, events: 5000 },
+  { quarter: "Q4", online: 160000, retail: 45000, wholesale: 25000, marketplace: 7000, events: 2000 },
 ];
 
 // Series take the slots in order: neighbours differ in lightness, slots two
 // apart differ in hue.
 const series: ChartSeries<(typeof data)[number]> = [
-  { key: "equity", label: "Equity", color: "var(--chart-1)" },
-  { key: "debt", label: "Debt", color: "var(--chart-2)" },
-  { key: "gold", label: "Gold", color: "var(--chart-3)" },
-  { key: "cash", label: "Cash", color: "var(--chart-4)" },
-  { key: "reits", label: "REITs", color: "var(--chart-5)" },
+  { key: "online", label: "Online", color: "var(--chart-1)" },
+  { key: "retail", label: "Retail", color: "var(--chart-2)" },
+  { key: "wholesale", label: "Wholesale", color: "var(--chart-3)" },
+  { key: "marketplace", label: "Marketplace", color: "var(--chart-4)" },
+  { key: "events", label: "Events", color: "var(--chart-5)" },
 ];
 
 export default function ChartBarExample() {
@@ -23,7 +23,7 @@ export default function ChartBarExample() {
   const [layout, setLayout] = useState("grouped");
   return (
     <BarChartCard
-      title="Money invested by quarter"
+      title="Revenue by channel and quarter"
       description={
         layout === "grouped"
           ? "All five chart colours side by side, in series order"

package/agents/examples/chart-category-ticks.tsx

@@ -30,15 +30,15 @@ export default function ChartCategoryTicksExample() {
         height={300}
       />
       <BarChartCard
-        title="Orders by sector"
+        title="Orders by category"
         description="Demo orders; one long category label on a narrow chart"
         data={[
-          { sector: "Information Technology and Services", orders: 100 },
-          { sector: "Other", orders: 50 },
-          { sector: "Third", orders: 70 },
+          { category: "Home Appliances and Kitchen Equipment", orders: 100 },
+          { category: "Other", orders: 50 },
+          { category: "Third", orders: 70 },
         ]}
-        xKey="sector"
-        xTicks={["Information Technology and Services"]}
+        xKey="category"
+        xTicks={["Home Appliances and Kitchen Equipment"]}
         series={[{ key: "orders", label: "Orders", color: "var(--chart-1)" }]}
         horizontal
         height={220}

package/agents/examples/chart-line.tsx

@@ -2,26 +2,26 @@ import { useState } from "react";
 import { LineChartCard, ToggleGroup, ToggleGroupItem, useFormat, type ChartSeries } from "@siyahi/ui";
 
 const cumulative = [
-  { month: "May", portfolio: 0.012, index: 0.008 },
-  { month: "Jun", portfolio: 0.021, index: 0.015 },
-  { month: "Jul", portfolio: 0.034, index: 0.029 },
-  { month: "Aug", portfolio: -0.006, index: 0.004 },
-  { month: "Sep", portfolio: 0.041, index: 0.031 },
-  { month: "Oct", portfolio: 0.052, index: 0.036 },
+  { month: "May", store: 0.012, category: 0.008 },
+  { month: "Jun", store: 0.021, category: 0.015 },
+  { month: "Jul", store: 0.034, category: 0.029 },
+  { month: "Aug", store: -0.006, category: 0.004 },
+  { month: "Sep", store: 0.041, category: 0.031 },
+  { month: "Oct", store: 0.052, category: 0.036 },
 ];
 
 const monthly = [
-  { month: "May", portfolio: 0.012, index: 0.008 },
-  { month: "Jun", portfolio: 0.009, index: 0.007 },
-  { month: "Jul", portfolio: 0.013, index: 0.014 },
-  { month: "Aug", portfolio: -0.039, index: -0.024 },
-  { month: "Sep", portfolio: 0.047, index: 0.027 },
-  { month: "Oct", portfolio: 0.011, index: 0.005 },
+  { month: "May", store: 0.012, category: 0.008 },
+  { month: "Jun", store: 0.009, category: 0.007 },
+  { month: "Jul", store: 0.013, category: 0.014 },
+  { month: "Aug", store: -0.039, category: -0.024 },
+  { month: "Sep", store: 0.047, category: 0.027 },
+  { month: "Oct", store: 0.011, category: 0.005 },
 ];
 
 const series: ChartSeries<(typeof cumulative)[number]> = [
-  { key: "portfolio", label: "Portfolio", color: "var(--chart-1)" },
-  { key: "index", label: "Nifty 50", color: "var(--chart-2)" },
+  { key: "store", label: "Our store", color: "var(--chart-1)" },
+  { key: "category", label: "Category average", color: "var(--chart-2)" },
 ];
 
 export default function ChartLineExample() {
@@ -29,7 +29,7 @@ export default function ChartLineExample() {
   const [mode, setMode] = useState("cumulative");
   return (
     <LineChartCard
-      title="Return against the index"
+      title="Sales growth against the category"
       description={mode === "cumulative" ? "Cumulative, from the start of May" : "Each month on its own"}
       action={
         <ToggleGroup
@@ -42,8 +42,8 @@ export default function ChartLineExample() {
           size="sm"
           aria-label="Mode"
         >
-          <ToggleGroupItem value="cumulative">Cumulative return</ToggleGroupItem>
-          <ToggleGroupItem value="monthly">Monthly return</ToggleGroupItem>
+          <ToggleGroupItem value="cumulative">Cumulative growth</ToggleGroupItem>
+          <ToggleGroupItem value="monthly">Monthly growth</ToggleGroupItem>
         </ToggleGroup>
       }
       data={mode === "cumulative" ? cumulative : monthly}

package/agents/examples/collapsible.tsx

@@ -6,10 +6,12 @@ export default function CollapsibleExample() {
     <Collapsible className="flex max-w-sm flex-col gap-2">
       <CollapsibleTrigger render={<Button variant="outline" className="w-fit" />}>
         <ChevronsUpDownIcon />
-        How lots are matched
+        How refunds are counted
       </CollapsibleTrigger>
       <CollapsibleContent>
-        <p className="text-muted-foreground">Sells are matched to the oldest buy first, as the tax rules require.</p>
+        <p className="text-muted-foreground">
+          A refund comes off the month the order was placed in, not the month it was paid.
+        </p>
       </CollapsibleContent>
     </Collapsible>
   );

package/agents/examples/command.tsx

@@ -1,5 +1,5 @@
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@siyahi/ui";
-import { ChartLineIcon, LandmarkIcon, WalletIcon } from "lucide-react";
+import { ChartLineIcon, PackageIcon, UsersIcon } from "lucide-react";
 
 export default function CommandExample() {
   return (
@@ -10,16 +10,16 @@ export default function CommandExample() {
           <CommandEmpty>No page matches.</CommandEmpty>
           <CommandGroup heading="Pages">
             <CommandItem>
-              <WalletIcon />
-              Holdings
+              <PackageIcon />
+              Orders
             </CommandItem>
             <CommandItem>
               <ChartLineIcon />
-              Realized
+              Revenue
             </CommandItem>
             <CommandItem>
-              <LandmarkIcon />
-              Cash flow
+              <UsersIcon />
+              Customers
             </CommandItem>
           </CommandGroup>
         </CommandList>

package/agents/examples/context-menu.tsx

@@ -9,8 +9,8 @@ export default function ContextMenuExample() {
         </div>
       </ContextMenuTrigger>
       <ContextMenuContent>
-        <ContextMenuItem>Copy symbol</ContextMenuItem>
-        <ContextMenuItem>Open chart</ContextMenuItem>
+        <ContextMenuItem>Copy order number</ContextMenuItem>
+        <ContextMenuItem>Open order</ContextMenuItem>
       </ContextMenuContent>
     </ContextMenu>
   );

package/agents/examples/data-bar.tsx

@@ -15,36 +15,27 @@ import {
   type DataTableColumnDef,
 } from "@siyahi/ui";
 
-interface Holding {
-  symbol: string;
-  value: number;
-  gain: number;
-  /** Closing prices over the last ten sessions, oldest first. */
-  closes: number[];
+interface Store {
+  store: string;
+  /** This month's sales, and their change on last month, in rupees; made-up figures. */
+  sales: number;
+  change: number;
+  /** Orders on each of the last ten days, oldest first. */
+  daily: number[];
 }
 
-const holdings: Holding[] = [
-  { symbol: "ITC", value: 276000, gain: -18400, closes: [478, 474, 470, 471, 466, 463, 465, 461, 459, 460] },
-  {
-    symbol: "HDFCBANK",
-    value: 262500,
-    gain: 21300,
-    closes: [1712, 1718, 1726, 1720, 1731, 1744, 1739, 1748, 1752, 1750],
-  },
-  {
-    symbol: "ICICIBANK",
-    value: 258000,
-    gain: 44100,
-    closes: [1250, 1262, 1258, 1271, 1266, 1280, 1284, 1279, 1288, 1290],
-  },
-  { symbol: "NIFTYBEES", value: 255600, gain: 12800, closes: [281, 282, 280, 283, 284, 283, 285, 284, 286, 284] },
-  { symbol: "INFY", value: 224400, gain: 30900, closes: [1820, 1834, 1829, 1841, 1852, 1848, 1860, 1855, 1866, 1870] },
-  { symbol: "TCS", value: 166000, gain: -2600, closes: [4180, 4172, 4165, 4170, 4158, 4150, 4161, 4155, 4148, 4150] },
+const stores: Store[] = [
+  { store: "Delhi", sales: 276000, change: -18400, daily: [478, 474, 470, 471, 466, 463, 465, 461, 459, 460] },
+  { store: "Bengaluru", sales: 262500, change: 21300, daily: [312, 318, 326, 320, 331, 344, 339, 348, 352, 350] },
+  { store: "Chennai", sales: 258000, change: 44100, daily: [250, 262, 258, 271, 266, 280, 284, 279, 288, 290] },
+  { store: "Kolkata", sales: 255600, change: 12800, daily: [281, 282, 280, 283, 284, 283, 285, 284, 286, 284] },
+  { store: "Mumbai", sales: 224400, change: 30900, daily: [220, 234, 229, 241, 252, 248, 260, 255, 266, 270] },
+  { store: "Pune", sales: 166000, change: -2600, daily: [180, 172, 165, 170, 158, 150, 161, 155, 148, 150] },
 ];
 
 // Each bar is a share of its column's largest figure, so the rows draw to one scale.
-const largestValue = Math.max(...holdings.map((h) => h.value));
-const largestGain = Math.max(...holdings.map((h) => Math.abs(h.gain)));
+const largestSales = Math.max(...stores.map((s) => s.sales));
+const largestChange = Math.max(...stores.map((s) => Math.abs(s.change)));
 
 function Money({ amount }: { amount: number }) {
   return useFormat().money(amount);
@@ -52,41 +43,41 @@ function Money({ amount }: { amount: number }) {
 
 const header = () => <DataTableSortHeader />;
 
-const columns: DataTableColumnDef<Holding>[] = [
-  { accessorKey: "symbol", header, size: 120, meta: { label: "Symbol" } },
+const columns: DataTableColumnDef<Store>[] = [
+  { accessorKey: "store", header, size: 120, meta: { label: "Store" } },
   {
-    accessorKey: "value",
+    accessorKey: "sales",
     header,
     size: 170,
-    meta: { label: "Value", variant: "number" },
+    meta: { label: "Sales", variant: "number" },
     cell: ({ row }) => (
-      <DataBar value={row.original.value} max={largestValue}>
-        <Money amount={row.original.value} />
+      <DataBar value={row.original.sales} max={largestSales}>
+        <Money amount={row.original.sales} />
       </DataBar>
     ),
   },
   {
-    accessorKey: "gain",
+    accessorKey: "change",
     header,
     size: 170,
-    meta: { label: "Gain", variant: "number" },
+    meta: { label: "vs last month", variant: "number" },
     cell: ({ row }) => (
-      <DataBar value={row.original.gain} max={largestGain} tone="sign">
-        <Money amount={row.original.gain} />
+      <DataBar value={row.original.change} max={largestChange} tone="sign">
+        <Money amount={row.original.change} />
       </DataBar>
     ),
   },
   {
-    id: "closes",
+    id: "daily",
     header: "10 days",
     size: 110,
     enableSorting: false,
     cell: ({ row }) => {
-      const { closes } = row.original;
-      const rising = (closes.at(-1) ?? 0) >= (closes[0] ?? 0);
+      const { daily } = row.original;
+      const rising = (daily.at(-1) ?? 0) >= (daily[0] ?? 0);
       return (
         <Sparkline
-          data={closes}
+          data={daily}
           variant="line"
           color={rising ? "var(--positive)" : "var(--negative)"}
           animate={false}
@@ -101,15 +92,11 @@ export default function DataBarExample() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Holdings</CardTitle>
+        <CardTitle>Stores</CardTitle>
         <CardDescription>Bars give each figure's size against the column's largest</CardDescription>
       </CardHeader>
       <CardContent>
-        <DataTableRoot
-          data={holdings}
-          columns={columns}
-          initialState={{ columnPinning: { start: ["symbol"], end: [] } }}
-        >
+        <DataTableRoot data={stores} columns={columns} initialState={{ columnPinning: { start: ["store"], end: [] } }}>
           <DataTable>
             <DataTableHeader />
             <DataTableBody />

package/agents/examples/data-table-compact.tsx

@@ -18,52 +18,53 @@ import {
   type DataTableColumnDef,
 } from "@siyahi/ui";
 
-interface Holding {
-  symbol: string;
-  sector: string;
-  quantity: number;
-  value: number;
+interface Product {
+  product: string;
+  category: string;
+  /** Units sold and revenue this month; change is the revenue against last week. Made-up figures. */
+  units: number;
+  revenue: number;
   change: number;
 }
 
-const holdings: Holding[] = [
-  { symbol: "INFY", sector: "IT", quantity: 120, value: 224400, change: 0.018 },
-  { symbol: "HDFCBANK", sector: "Banks", quantity: 150, value: 262500, change: -0.006 },
-  { symbol: "TCS", sector: "IT", quantity: 40, value: 166000, change: 0.004 },
-  { symbol: "ITC", sector: "Fast Moving Consumer Goods", quantity: 600, value: 276000, change: -0.012 },
+const products: Product[] = [
+  { product: "Standing desk", category: "Furniture", units: 120, revenue: 224400, change: 0.018 },
+  { product: "Office chair", category: "Seating", units: 150, revenue: 262500, change: -0.006 },
+  { product: "Bookshelf", category: "Furniture", units: 40, revenue: 166000, change: 0.004 },
+  { product: "Dinner set", category: "Kitchen, Dining & Tableware", units: 600, revenue: 276000, change: -0.012 },
 ];
 
 const header = () => <DataTableSortHeader />;
 
-// While the Day column is hidden to fit, the day's move rides under the value it belongs to.
-function ValueCell({ holding }: { holding: Holding }) {
+// While the Week column is hidden to fit, the week's change rides under the revenue it belongs to.
+function RevenueCell({ product }: { product: Product }) {
   const format = useFormat();
-  const { compactColumns } = useDataTable<Holding>();
-  if (!compactColumns?.hidden.has("change")) return format.money(holding.value);
+  const { compactColumns } = useDataTable<Product>();
+  if (!compactColumns?.hidden.has("change")) return format.money(product.revenue);
   return (
     <div className="flex flex-col items-end">
-      {format.money(holding.value)}
-      <Delta value={holding.change} />
+      {format.money(product.revenue)}
+      <Delta value={product.change} />
     </div>
   );
 }
 
-const columns: DataTableColumnDef<Holding>[] = [
-  { accessorKey: "symbol", header, size: 140, meta: { label: "Symbol", compact: true } },
-  { accessorKey: "sector", header, size: 120, meta: { label: "Sector" } },
-  { accessorKey: "quantity", header, size: 100, meta: { label: "Qty", variant: "number" } },
+const columns: DataTableColumnDef<Product>[] = [
+  { accessorKey: "product", header, size: 140, meta: { label: "Product", compact: true } },
+  { accessorKey: "category", header, size: 120, meta: { label: "Category" } },
+  { accessorKey: "units", header, size: 100, meta: { label: "Units", variant: "number" } },
   {
-    accessorKey: "value",
+    accessorKey: "revenue",
     header,
     size: 140,
-    meta: { label: "Value", variant: "number", compact: true },
-    cell: ({ row }) => <ValueCell holding={row.original} />,
+    meta: { label: "Revenue", variant: "number", compact: true },
+    cell: ({ row }) => <RevenueCell product={row.original} />,
   },
   {
     accessorKey: "change",
     header,
     size: 110,
-    meta: { label: "Day", variant: "number" },
+    meta: { label: "Week", variant: "number" },
     cell: ({ row }) => <Delta value={row.original.change} />,
   },
 ];
@@ -72,19 +73,19 @@ export default function DataTableCompactExample() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Holdings on a phone</CardTitle>
+        <CardTitle>Products on a phone</CardTitle>
         <CardDescription>
-          Symbol and value are the key columns. When the columns do not fit, the others hide from the right, and the
-          day's move rides under the value once its column is gone; All columns brings back the rest
+          Product and revenue are the key columns. When the columns do not fit, the others hide from the right, and the
+          week's change rides under the revenue once its column is gone; All columns brings back the rest
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <DataTableRoot data={holdings} columns={columns}>
+        <DataTableRoot data={products} columns={columns}>
           <DataTableToolbarSection>
             <DataTableCompactColumnsToggle />
-            <DataTableRowCount unit="holdings" />
+            <DataTableRowCount unit="products" />
           </DataTableToolbarSection>
-          <DataTable aria-label="Holdings on a phone">
+          <DataTable aria-label="Products on a phone">
             <DataTableHeader />
             <DataTableBody />
           </DataTable>

package/agents/examples/data-table-filters.tsx

@@ -26,30 +26,30 @@ import {
   type DataTableColumnDef,
 } from "@siyahi/ui";
 
-interface Holding {
-  symbol: string;
-  sector: string;
-  broker: string;
+interface Order {
+  order: string;
+  status: string;
+  warehouse: string;
 }
-const data: Holding[] = [
-  { symbol: "INFY", sector: "Information technology", broker: "Kite" },
-  { symbol: "HDFCBANK", sector: "Banks", broker: "Dhan" },
-  { symbol: "TCS", sector: "Information technology", broker: "Dhan" },
+const data: Order[] = [
+  { order: "ORD-1042", status: "Out for delivery", warehouse: "Bhiwandi" },
+  { order: "ORD-1043", status: "Packed", warehouse: "Hosur" },
+  { order: "ORD-1044", status: "Out for delivery", warehouse: "Hosur" },
 ];
 const header = () => <DataTableSortHeader />;
-const columns: DataTableColumnDef<Holding>[] = [
-  { accessorKey: "symbol", header, size: 140, meta: { label: "Instrument" } },
-  { accessorKey: "sector", header, meta: { label: "Sector" } },
-  { accessorKey: "broker", header, meta: { label: "Broker" } },
+const columns: DataTableColumnDef<Order>[] = [
+  { accessorKey: "order", header, size: 140, meta: { label: "Order" } },
+  { accessorKey: "status", header, meta: { label: "Status" } },
+  { accessorKey: "warehouse", header, meta: { label: "Warehouse" } },
 ];
 
 function Filters() {
-  const { table, isCompact } = useDataTable<Holding>();
+  const { table, isCompact } = useDataTable<Order>();
   const active = table.state.columnFilters.length;
   const controls = (
     <div className="flex flex-wrap gap-2">
-      <DataTableFacetedFilter accessorKey="sector" title="Sector" />
-      <DataTableFacetedFilter accessorKey="broker" title="Broker" />
+      <DataTableFacetedFilter accessorKey="status" title="Status" />
+      <DataTableFacetedFilter accessorKey="warehouse" title="Warehouse" />
     </div>
   );
   if (!isCompact) return controls;
@@ -58,7 +58,7 @@ function Filters() {
       <SheetTrigger render={<Button variant="outline" size="sm" />}>Filters{active ? ` (${active})` : ""}</SheetTrigger>
       <SheetContent>
         <SheetHeader>
-          <SheetTitle>Holding filters</SheetTitle>
+          <SheetTitle>Order filters</SheetTitle>
           <SheetDescription>Selections stay applied when this panel closes.</SheetDescription>
         </SheetHeader>
         <div className="overflow-y-auto px-4">{controls}</div>
@@ -77,7 +77,7 @@ export default function DataTableFiltersExample() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Holdings with compact filters</CardTitle>
+        <CardTitle>Orders with compact filters</CardTitle>
         <CardDescription>Search stays visible; secondary filters move into a panel in narrow space.</CardDescription>
       </CardHeader>
       <CardContent>
@@ -86,13 +86,13 @@ export default function DataTableFiltersExample() {
           <DataTableToolbarSection>
             <DataTableSearchFilter
               label="Search compact example"
-              placeholder="Search holdings…"
+              placeholder="Search orders…"
               className="w-full flex-none sm:w-64"
             />
             <Filters />
-            <DataTableRowCount unit="holdings" />
+            <DataTableRowCount unit="orders" />
           </DataTableToolbarSection>
-          <DataTable aria-label="Holdings with compact filters">
+          <DataTable aria-label="Orders with compact filters">
             <DataTableHeader />
             <DataTableBody />
           </DataTable>

package/agents/examples/data-table.tsx

@@ -18,21 +18,22 @@ import {
   type DataTableColumnDef,
 } from "@siyahi/ui";
 
-interface Holding {
-  symbol: string;
-  sector: string;
-  quantity: number;
-  value: number;
+interface Product {
+  product: string;
+  category: string;
+  /** Units sold and revenue this month; change is the revenue against last week. Made-up figures. */
+  units: number;
+  revenue: number;
   change: number;
 }
 
-const holdings: Holding[] = [
-  { symbol: "INFY", sector: "IT", quantity: 120, value: 224400, change: 0.018 },
-  { symbol: "HDFCBANK", sector: "Banks", quantity: 150, value: 262500, change: -0.006 },
-  { symbol: "TCS", sector: "IT", quantity: 40, value: 166000, change: 0.004 },
-  { symbol: "ITC", sector: "Fast Moving Consumer Goods", quantity: 600, value: 276000, change: -0.012 },
-  { symbol: "ICICIBANK", sector: "Banks", quantity: 200, value: 258000, change: 0.022 },
-  { symbol: "NIFTYBEES", sector: "ETF", quantity: 900, value: 255600, change: 0.009 },
+const products: Product[] = [
+  { product: "Standing desk", category: "Furniture", units: 120, revenue: 224400, change: 0.018 },
+  { product: "Office chair", category: "Seating", units: 150, revenue: 262500, change: -0.006 },
+  { product: "Bookshelf", category: "Furniture", units: 40, revenue: 166000, change: 0.004 },
+  { product: "Dinner set", category: "Kitchen, Dining & Tableware", units: 600, revenue: 276000, change: -0.012 },
+  { product: "Kids chair", category: "Seating", units: 200, revenue: 258000, change: 0.022 },
+  { product: "Desk lamp", category: "Lighting", units: 900, revenue: 255600, change: 0.009 },
 ];
 
 // One click sorts largest (or Z) first; the title comes from meta.label.
@@ -42,22 +43,22 @@ function Money({ amount }: { amount: number }) {
   return useFormat().money(amount);
 }
 
-const columns: DataTableColumnDef<Holding>[] = [
-  { accessorKey: "symbol", header, size: 140, meta: { label: "Symbol" } },
-  { accessorKey: "sector", header, size: 120, meta: { label: "Sector" } },
-  { accessorKey: "quantity", header, size: 100, meta: { label: "Qty", variant: "number" } },
+const columns: DataTableColumnDef<Product>[] = [
+  { accessorKey: "product", header, size: 140, meta: { label: "Product" } },
+  { accessorKey: "category", header, size: 120, meta: { label: "Category" } },
+  { accessorKey: "units", header, size: 100, meta: { label: "Units", variant: "number" } },
   {
-    accessorKey: "value",
+    accessorKey: "revenue",
     header,
     size: 140,
-    meta: { label: "Value", variant: "number" },
-    cell: ({ row }) => <Money amount={row.original.value} />,
+    meta: { label: "Revenue", variant: "number" },
+    cell: ({ row }) => <Money amount={row.original.revenue} />,
   },
   {
     accessorKey: "change",
     header,
     size: 110,
-    meta: { label: "Day", variant: "number" },
+    meta: { label: "Week", variant: "number" },
     cell: ({ row }) => <Delta value={row.original.change} />,
   },
 ];
@@ -66,28 +67,28 @@ export default function DataTableExample() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Holdings</CardTitle>
+        <CardTitle>Products</CardTitle>
         <CardDescription>
-          Search every column, filter by sector, sort any column in one click; the symbol stays put when the table
-          scrolls in wide panels. In narrow panels every column scrolls, leaving room for the values
+          Search every column, filter by category, sort any column in one click; the product stays put when the table
+          scrolls in wide panels. In narrow panels every column scrolls, leaving room for the figures
         </CardDescription>
       </CardHeader>
       <CardContent>
         <DataTableRoot
-          data={holdings}
+          data={products}
           columns={columns}
-          initialState={{ columnPinning: { start: ["symbol"], end: [] } }}
+          initialState={{ columnPinning: { start: ["product"], end: [] } }}
         >
           <DataTableToolbarSection>
             <DataTableSearchFilter
-              placeholder="Search holdings…"
-              label="Filter holdings"
+              placeholder="Search products…"
+              label="Filter products"
               className="flex-none sm:w-64"
             />
-            <DataTableFacetedFilter accessorKey="sector" title="Sector" />
-            <DataTableRowCount unit="holdings" />
+            <DataTableFacetedFilter accessorKey="category" title="Category" />
+            <DataTableRowCount unit="products" />
           </DataTableToolbarSection>
-          <DataTable aria-label="Holdings">
+          <DataTable aria-label="Products">
             <DataTableHeader />
             <DataTableBody />
           </DataTable>

package/agents/examples/dialog.tsx

@@ -13,11 +13,11 @@ import {
 export default function DialogExample() {
   return (
     <Dialog>
-      <DialogTrigger render={<Button variant="outline" className="w-fit" />}>Show fills</DialogTrigger>
+      <DialogTrigger render={<Button variant="outline" className="w-fit" />}>Show parcels</DialogTrigger>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Fills for this sell</DialogTitle>
-          <DialogDescription>Each lot this sale was matched against, oldest first.</DialogDescription>
+          <DialogTitle>Parcels for this order</DialogTitle>
+          <DialogDescription>Each parcel this order was split into, earliest first.</DialogDescription>
         </DialogHeader>
         <DialogFooter>
           <DialogClose render={<Button variant="outline" />}>Close</DialogClose>