@siyahi/ui 0.1.9-next.17 → 0.1.9-next.19

package/agents/examples/card.tsx

@@ -0,0 +1,34 @@
+import {
+  Button,
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  useFormat,
+} from "@siyahi/ui";
+import { DownloadIcon } from "lucide-react";
+
+export default function CardExample() {
+  const { money } = useFormat();
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Portfolio value</CardTitle>
+        <CardDescription>Across all accounts</CardDescription>
+        <CardAction>
+          <Button variant="outline" size="sm">
+            <DownloadIcon />
+            CSV
+          </Button>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <p className="text-3xl font-semibold">{money(4512300)}</p>
+      </CardContent>
+      <CardFooter className="text-muted-foreground">Updated after the market close</CardFooter>
+    </Card>
+  );
+}

package/agents/examples/chart-area.tsx

@@ -0,0 +1,38 @@
+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 },
+];
+
+// Drawn in this order, so value sits over the money put in.
+const series: ChartSeries<(typeof data)[number]> = [
+  { key: "invested", label: "Invested", color: "var(--chart-2)" },
+  { key: "value", label: "Value", color: "var(--chart-1)" },
+];
+
+export default function ChartAreaExample() {
+  const { money, moneyCompact } = useFormat();
+  return (
+    <AreaChartCard
+      title="Portfolio value"
+      description="Month-end value against money put in"
+      action={
+        <ToggleGroup defaultValue={["6M"]} variant="outline" size="sm" aria-label="Range">
+          <ToggleGroupItem value="6M">6M</ToggleGroupItem>
+          <ToggleGroupItem value="1Y">1Y</ToggleGroupItem>
+        </ToggleGroup>
+      }
+      data={data}
+      xKey="month"
+      series={series}
+      valueFormatter={money}
+      yTickFormatter={moneyCompact}
+      height={256}
+    />
+  );
+}

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

@@ -0,0 +1,31 @@
+import { BarChartCard, useFormat, type ChartSeries } from "@siyahi/ui";
+
+// Money into and out of the account each month; out is negative. Made-up figures.
+const data = [
+  { month: "Jul", in: 84000, out: -52000 },
+  { month: "Aug", in: 61000, out: -73000 },
+  { month: "Sep", in: 92000, out: -48000 },
+  { month: "Oct", in: 70000, out: -66000 },
+];
+
+const series: ChartSeries<(typeof data)[number]> = [
+  { key: "in", label: "In", color: "var(--positive)" },
+  { key: "out", label: "Out", color: "var(--negative)" },
+];
+
+export default function ChartBarFlowsExample() {
+  const { money, moneyCompact } = useFormat();
+  return (
+    <BarChartCard
+      title="Cash in and out by month"
+      description="Money in above the line, money out below it"
+      data={data}
+      xKey="month"
+      series={series}
+      stacked
+      valueFormatter={money}
+      yTickFormatter={moneyCompact}
+      height={256}
+    />
+  );
+}

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

@@ -0,0 +1,28 @@
+import { BarChartCard } from "@siyahi/ui";
+
+// Market hours in IST; each row is the hour an order was placed in.
+const data = [
+  { hour: 9, orders: 42 },
+  { hour: 10, orders: 31 },
+  { hour: 11, orders: 18 },
+  { hour: 12, orders: 12 },
+  { hour: 13, orders: 15 },
+  { hour: 14, orders: 24 },
+  { hour: 15, orders: 38 },
+];
+
+export default function ChartBarHourlyExample() {
+  return (
+    <BarChartCard
+      title="Orders by hour"
+      description="Last 30 days, by the hour each order was placed"
+      data={data}
+      xKey="hour"
+      xFormatter={(hour) => `${String(hour).padStart(2, "0")}:00`}
+      xLabel="Hour of day (IST)"
+      yLabel="Orders"
+      series={[{ key: "orders", label: "Orders", color: "var(--chart-1)" }]}
+      height={256}
+    />
+  );
+}

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

@@ -0,0 +1,29 @@
+import { BarChartCard, useFormat, type ChartSeries } from "@siyahi/ui";
+
+// F&O net realized per financial year, a loss every year; made-up figures.
+const data = [
+  { fy: "FY23", net: -48000 },
+  { fy: "FY24", net: -91000 },
+  { fy: "FY25", net: -27000 },
+  { fy: "FY26", net: -63000 },
+];
+
+const series: ChartSeries<(typeof data)[number]> = [
+  { key: "net", label: "F&O net realized", color: "var(--positive)", negativeColor: "var(--negative)" },
+];
+
+export default function ChartBarLossesExample() {
+  const { money, moneyCompact } = useFormat();
+  return (
+    <BarChartCard
+      title="F&O realized by financial year"
+      description="A loss every year, so every bar runs down from zero"
+      data={data}
+      xKey="fy"
+      series={series}
+      valueFormatter={money}
+      yTickFormatter={moneyCompact}
+      height={240}
+    />
+  );
+}

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

@@ -0,0 +1,70 @@
+import { useState } from "react";
+import { BarChartCard, ToggleGroup, ToggleGroupItem, useFormat, type ChartSeries } from "@siyahi/ui";
+
+// Share of equity by sector against an index's weights; made-up figures.
+const WEIGHTS = {
+  "Nifty 50": [
+    { sector: "Financial Services", you: 0.34, index: 0.37 },
+    { sector: "Information Technology", you: 0.21, index: 0.13 },
+    { sector: "Oil, Gas & Consumable Fuels", you: 0.06, index: 0.1 },
+    { sector: "Fast Moving Consumer Goods", you: 0.12, index: 0.08 },
+    { sector: "Automobile and Auto Components", you: 0.09, index: 0.07 },
+    { sector: "Healthcare", you: 0.08, index: 0.04 },
+  ],
+  "Nifty 500": [
+    { sector: "Financial Services", you: 0.34, index: 0.31 },
+    { sector: "Information Technology", you: 0.21, index: 0.1 },
+    { sector: "Oil, Gas & Consumable Fuels", you: 0.06, index: 0.08 },
+    { sector: "Fast Moving Consumer Goods", you: 0.12, index: 0.07 },
+    { sector: "Automobile and Auto Components", you: 0.09, index: 0.07 },
+    { sector: "Healthcare", you: 0.08, index: 0.06 },
+  ],
+};
+type Index = keyof typeof WEIGHTS;
+type Row = (typeof WEIGHTS)[Index][number];
+
+export default function ChartBarSectorsExample() {
+  const { pct } = useFormat();
+  const [index, setIndex] = useState<Index>("Nifty 50");
+  const rows = WEIGHTS[index];
+  const series: ChartSeries<Row> = [
+    { key: "you", label: "You", color: "var(--chart-1)" },
+    { key: "index", label: index, color: "var(--chart-2)" },
+  ];
+  const gap = (row: Row) => {
+    const points = Math.abs(row.you - row.index) * 100;
+    return row.you >= row.index ? `▲${points.toFixed(1)} pts over` : `▼${points.toFixed(1)} pts under`;
+  };
+  return (
+    <BarChartCard
+      title="Sectors against the index"
+      description="Share of your equity and of the index, by sector"
+      action={
+        <ToggleGroup
+          value={[index]}
+          onValueChange={([next]) => {
+            // Pressing the selected index again would leave none selected; keep it.
+            if (next) setIndex(next as Index);
+          }}
+          variant="outline"
+          size="sm"
+          aria-label="Index"
+        >
+          <ToggleGroupItem value="Nifty 50">Nifty 50</ToggleGroupItem>
+          <ToggleGroupItem value="Nifty 500">Nifty 500</ToggleGroupItem>
+        </ToggleGroup>
+      }
+      horizontal
+      data={rows}
+      xKey="sector"
+      xTickDetail={(row) => `${pct(row.you)} vs ${pct(row.index)} · ${gap(row)}`}
+      series={series}
+      valueFormatter={(v) => pct(v)}
+      // Sideways, y is still the value: the axis runs 0 to 40% and the cap is a value level.
+      yDomain={[0, 0.4]}
+      referenceLines={[{ y: 0.3, label: "cap 30%", labelPosition: "insideBottomRight" }]}
+      height={rows.length * 56 + 48}
+      footer={<p className="text-muted-foreground">Company shares only; ETFs and funds are left out.</p>}
+    />
+  );
+}

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

@@ -0,0 +1,40 @@
+import { useState } from "react";
+import { BarChartCard, useFormat, type ChartSeries } from "@siyahi/ui";
+
+// Net realized gain per financial year (April to March); made-up figures.
+const data = [
+  { fy: "FY22", net: 142000 },
+  { fy: "FY23", net: 186000 },
+  { fy: "FY24", net: -164000 },
+  { fy: "FY25", net: 128000 },
+  { fy: "FY26", net: -121000 },
+];
+
+// A gain and a loss take the meaning colours; the arrow in each tick says the same without colour.
+const series: ChartSeries<(typeof data)[number]> = [
+  { key: "net", label: "Net realized", color: "var(--positive)", negativeColor: "var(--negative)" },
+];
+
+export default function ChartBarYearsExample() {
+  const { money, moneyCompact } = useFormat();
+  // The page owns the pick, so it can narrow the rest of the page to that year.
+  const [year, setYear] = useState<string | null>(null);
+  const signed = (v: number) => `${v < 0 ? "▼" : "▲"}${moneyCompact(Math.abs(v))}`;
+  return (
+    <BarChartCard
+      title="Realized by financial year"
+      description={
+        year ? `${year} picked; click it again for every year` : "April to March, gross. Click a year to pick it."
+      }
+      data={data}
+      xKey="fy"
+      xTickDetail={(row) => signed(row.net)}
+      selected={year}
+      onSelect={setYear}
+      series={series}
+      valueFormatter={money}
+      yTickFormatter={moneyCompact}
+      height={272}
+    />
+  );
+}

package/agents/examples/chart-bar.tsx

@@ -0,0 +1,56 @@
+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 },
+];
+
+// 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)" },
+];
+
+export default function ChartBarExample() {
+  const { money, moneyCompact } = useFormat();
+  const [layout, setLayout] = useState("grouped");
+  return (
+    <BarChartCard
+      title="Money invested by quarter"
+      description={
+        layout === "grouped"
+          ? "All five chart colours side by side, in series order"
+          : "All five chart colours stacked into the quarter's total"
+      }
+      action={
+        <ToggleGroup
+          value={[layout]}
+          onValueChange={([next]) => {
+            // Pressing the selected layout again would leave none selected; keep it.
+            if (next) setLayout(next);
+          }}
+          variant="outline"
+          size="sm"
+          aria-label="Layout"
+        >
+          <ToggleGroupItem value="grouped">Grouped</ToggleGroupItem>
+          <ToggleGroupItem value="stacked">Stacked</ToggleGroupItem>
+        </ToggleGroup>
+      }
+      data={data}
+      xKey="quarter"
+      series={series}
+      stacked={layout === "stacked"}
+      valueFormatter={money}
+      yTickFormatter={moneyCompact}
+      height={256}
+    />
+  );
+}

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

@@ -0,0 +1,50 @@
+import { AreaChartCard, BarChartCard, LineChartCard, type SeriesChartProps } from "@siyahi/ui";
+
+const data = Array.from({ length: 84 }, (_, index) => ({
+  month: `${2019 + Math.floor(index / 12)}-${String((index % 12) + 1).padStart(2, "0")}`,
+  orders: 20 + ((index * 7) % 31),
+}));
+const props: SeriesChartProps<(typeof data)[number], "month"> = {
+  title: "Monthly orders, bars",
+  description: "Demo orders per month, 2019–2025; only April is labelled",
+  data,
+  xKey: "month",
+  xTicks: data.filter(({ month }) => month.endsWith("-04")).map(({ month }) => month),
+  xFormatter: (month) => `Apr ${month.slice(2, 4)}`,
+  xTooltipFormatter: (month) => month,
+  series: [{ key: "orders", label: "Orders", color: "var(--chart-1)" }],
+  height: 200,
+};
+
+export default function ChartCategoryTicksExample() {
+  return (
+    <div className="flex flex-col gap-4">
+      <BarChartCard {...props} />
+      <BarChartCard
+        {...props}
+        title="Monthly orders, sideways"
+        description="Demo orders per month in 2019; only April is labelled"
+        data={data.slice(0, 12)}
+        xTicks={["2019-04"]}
+        horizontal
+        height={300}
+      />
+      <BarChartCard
+        title="Orders by sector"
+        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 },
+        ]}
+        xKey="sector"
+        xTicks={["Information Technology and Services"]}
+        series={[{ key: "orders", label: "Orders", color: "var(--chart-1)" }]}
+        horizontal
+        height={220}
+      />
+      <LineChartCard {...props} title="Monthly orders, line" />
+      <AreaChartCard {...props} title="Monthly orders, area" />
+    </div>
+  );
+}

package/agents/examples/chart-line-events.tsx

@@ -0,0 +1,47 @@
+import { LineChartCard, type ChartSeries } from "@siyahi/ui";
+
+// A sample every 15 s from 19:33:58; the numbers are made up for the catalogue.
+const START = (19 * 60 + 33) * 60 + 58;
+const PRESSURE = [
+  4, 18, 41, 58, 63, 66, 61, 70, 72, 68, 64, 71, 74, 69, 66, 62, 67, 73, 70, 65, 68, 71, 66, 63, 69, 72,
+];
+const data = PRESSURE.map((pressure, i) => ({ second: i * 15, pressure }));
+
+const series: ChartSeries<(typeof data)[number]> = [
+  { key: "pressure", label: "Full pressure", color: "var(--chart-1)" },
+];
+
+const pad = (n: number) => String(n).padStart(2, "0");
+
+function clock(second: number) {
+  const t = START + second;
+  return `${Math.floor(t / 3600)}:${pad(Math.floor(t / 60) % 60)}:${pad(t % 60)}`;
+}
+
+export default function ChartLineEventsExample() {
+  return (
+    <LineChartCard
+      title="Memory pressure of a test group, %"
+      description="avg10, sampled every 15 s"
+      data={data}
+      xKey="second"
+      // A numeric axis: ticks fall on whole minutes, 2 s after the first sample.
+      xDomain={[0, 390]}
+      xTicks={[2, 62, 122, 182, 242, 302, 362]}
+      xFormatter={(second) => clock(second).slice(0, 5)}
+      xTooltipFormatter={(second) => `${clock(second)} IST, 10 s average`}
+      series={series}
+      curve="linear"
+      valueFormatter={(v) => `${v}%`}
+      yDomain={[0, 100]}
+      yTicks={[0, 25, 50, 75, 100]}
+      referenceLines={[
+        { y: 80, label: "old limit, 80%" },
+        { y: 50, label: "new limit, 50%", emphasis: "strong" },
+        { x: 313, label: "limit 50%", labelPosition: "insideBottomRight" },
+        { x: 367, label: "killed", emphasis: "strong", labelPosition: "insideTopRight" },
+      ]}
+      height={224}
+    />
+  );
+}

package/agents/examples/chart-line-timeline.tsx

@@ -0,0 +1,41 @@
+import { LineChartCard, type ChartSeries } from "@siyahi/ui";
+
+// A sar sample every 10 minutes from 15:00; the numbers are made up for the catalogue.
+const data = [
+  { minute: 0, used: 4.1, anon: 2.9 },
+  { minute: 10, used: 4.3, anon: 3.1 },
+  { minute: 20, used: 4.6, anon: 3.4 },
+  { minute: 30, used: 5.2, anon: 4.2 },
+  { minute: 40, used: 7.8, anon: 7.1 },
+  { minute: 50, used: 8.1, anon: 7.6 },
+  { minute: 60, used: 6.2, anon: 5.3 },
+  { minute: 70, used: 4.4, anon: 3.2 },
+];
+
+const series: ChartSeries<(typeof data)[number]> = [
+  { key: "used", label: "Used", color: "var(--chart-1)" },
+  { key: "anon", label: "Anon", color: "var(--chart-2)" },
+];
+
+const clock = (minute: number) => `${Math.floor(15 + minute / 60)}:${String(minute % 60).padStart(2, "0")}`;
+
+export default function ChartLineTimelineExample() {
+  return (
+    <LineChartCard
+      title="Memory in use, GiB"
+      description="sar -r. Used excludes cache; anon is program memory."
+      data={data}
+      xKey="minute"
+      // Ticks on both ends of the domain: the first sits at the plot's left edge.
+      xDomain={[0, 70]}
+      xTicks={[0, 10, 20, 30, 40, 50, 60, 70]}
+      xFormatter={clock}
+      xTooltipFormatter={(minute) => `${clock(minute)} IST, 10-min average`}
+      series={series}
+      valueFormatter={(v) => v.toFixed(1)}
+      yTickFormatter={(v) => v.toFixed(0)}
+      curve="linear"
+      height={192}
+    />
+  );
+}

package/agents/examples/chart-line.tsx

@@ -0,0 +1,57 @@
+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 },
+];
+
+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 },
+];
+
+const series: ChartSeries<(typeof cumulative)[number]> = [
+  { key: "portfolio", label: "Portfolio", color: "var(--chart-1)" },
+  { key: "index", label: "Nifty 50", color: "var(--chart-2)" },
+];
+
+export default function ChartLineExample() {
+  const { pct } = useFormat();
+  const [mode, setMode] = useState("cumulative");
+  return (
+    <LineChartCard
+      title="Return against the index"
+      description={mode === "cumulative" ? "Cumulative, from the start of May" : "Each month on its own"}
+      action={
+        <ToggleGroup
+          value={[mode]}
+          onValueChange={([next]) => {
+            // Pressing the selected mode again would leave none selected; keep it.
+            if (next) setMode(next);
+          }}
+          variant="outline"
+          size="sm"
+          aria-label="Mode"
+        >
+          <ToggleGroupItem value="cumulative">Cumulative return</ToggleGroupItem>
+          <ToggleGroupItem value="monthly">Monthly return</ToggleGroupItem>
+        </ToggleGroup>
+      }
+      data={mode === "cumulative" ? cumulative : monthly}
+      xKey="month"
+      series={series}
+      // A formatter goes in as it is: the card calls it with the value alone.
+      valueFormatter={pct}
+      height={256}
+    />
+  );
+}

package/agents/examples/code-block.tsx

@@ -0,0 +1,38 @@
+import {
+  CodeBlock,
+  CodeBlockActions,
+  CodeBlockContent,
+  CodeBlockCopyButton,
+  CodeBlockHeader,
+  CodeBlockTitle,
+} from "@siyahi/ui";
+
+const CHECK = "openssl s_client -connect example.com:443 -servername example.com -showcerts </dev/null";
+
+const LOG = Array.from(
+  { length: 24 },
+  (_, i) =>
+    `19:${String(33 + Math.floor(i / 4)).padStart(2, "0")}:${String((i * 15) % 60).padStart(2, "0")}  memory.pressure some avg10=${(12 + i * 3.1).toFixed(2)}`,
+).join("\n");
+
+export default function CodeBlockExample() {
+  return (
+    <div className="flex flex-col gap-4">
+      <CodeBlock>
+        <CodeBlockHeader>
+          <CodeBlockTitle>Show the chain a server sends</CodeBlockTitle>
+          <CodeBlockActions>
+            <CodeBlockCopyButton value={CHECK} />
+          </CodeBlockActions>
+        </CodeBlockHeader>
+        <CodeBlockContent wrap>{CHECK}</CodeBlockContent>
+      </CodeBlock>
+      <CodeBlock size="sm">
+        <CodeBlockActions>
+          <CodeBlockCopyButton value={LOG} />
+        </CodeBlockActions>
+        <CodeBlockContent className="max-h-48">{LOG}</CodeBlockContent>
+      </CodeBlock>
+    </div>
+  );
+}

package/agents/examples/collapsible.tsx

@@ -0,0 +1,16 @@
+import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger } from "@siyahi/ui";
+import { ChevronsUpDownIcon } from "lucide-react";
+
+export default function CollapsibleExample() {
+  return (
+    <Collapsible className="flex max-w-sm flex-col gap-2">
+      <CollapsibleTrigger render={<Button variant="outline" className="w-fit" />}>
+        <ChevronsUpDownIcon />
+        How lots are matched
+      </CollapsibleTrigger>
+      <CollapsibleContent className="text-muted-foreground">
+        Sells are matched to the oldest buy first, as the tax rules require.
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

package/agents/examples/command.tsx

@@ -0,0 +1,27 @@
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@siyahi/ui";
+import { ChartLineIcon, LandmarkIcon, WalletIcon } from "lucide-react";
+
+export default function CommandExample() {
+  return (
+    <Command className="rounded-lg border">
+      <CommandInput placeholder="Jump to a page" />
+      <CommandList>
+        <CommandEmpty>No page matches.</CommandEmpty>
+        <CommandGroup heading="Pages">
+          <CommandItem>
+            <WalletIcon />
+            Holdings
+          </CommandItem>
+          <CommandItem>
+            <ChartLineIcon />
+            Realized
+          </CommandItem>
+          <CommandItem>
+            <LandmarkIcon />
+            Cash flow
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  );
+}

package/agents/examples/context-menu.tsx

@@ -0,0 +1,15 @@
+import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@siyahi/ui";
+
+export default function ContextMenuExample() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex h-24 w-full items-center justify-center rounded-lg border border-dashed text-muted-foreground">
+        Right-click or long-press here
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem>Copy symbol</ContextMenuItem>
+        <ContextMenuItem>Open chart</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}

package/agents/examples/copy-button.tsx

@@ -0,0 +1,8 @@
+import { CopyButton } from "@siyahi/ui";
+
+// Every command on a setup page, for a reader who wants them all at once.
+const ALL = ["brew install node@24", "corepack enable", "pnpm install"].join("\n");
+
+export default function CopyButtonExample() {
+  return <CopyButton value={ALL} label="Copy all" />;
+}