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

package/agents/examples/treemap.tsx

@@ -14,42 +14,45 @@ import {
 } from "@siyahi/ui";
 import { useState } from "react";
 
-interface Holding extends TreemapItem {
-  broker: string;
+interface City extends TreemapItem {
+  channel: string;
 }
 
-// change is the return since bought; LT came in as a transfer, with no cost basis.
-const holdings: Holding[] = [
-  { name: "INFY", key: "INFY-kite", broker: "Kite", group: "IT", weight: 224400, change: 0.38 },
-  { name: "INFY", key: "INFY-dhan", broker: "Dhan", group: "IT", weight: 152000, change: 0.12 },
-  { name: "TCS", broker: "Kite", group: "IT", weight: 166000, change: 0.09 },
-  { name: "WIPRO", broker: "Dhan", group: "IT", weight: 98000, change: -0.21 },
-  { name: "HDFCBANK", broker: "Kite", group: "Banks", weight: 262500, change: -0.06 },
-  { name: "ICICIBANK", broker: "Kite", group: "Banks", weight: 258000, change: 0.44 },
-  { name: "SBIN", broker: "Dhan", group: "Banks", weight: 87000, change: 0.58 },
-  { name: "ITC", broker: "Kite", group: "FMCG", weight: 276000, change: 0.27 },
-  { name: "ASIANPAINT", broker: "Dhan", group: "FMCG", weight: 64000, change: -0.33 },
-  { name: "NIFTYBEES", broker: "Kite", group: "ETF", weight: 255600, change: 0.16 },
-  { name: "LT", broker: "Dhan", group: "Construction", weight: 52000, change: null },
+// weight is the month's sales in ₹ and change their growth on the same month last year; Guwahati opened this year,
+// so it has no last year to grow from. Mumbai sells online and in stores, so it draws two tiles under one name.
+const cities: City[] = [
+  { name: "Mumbai", key: "mumbai-online", channel: "Online", group: "West", weight: 224400, change: 0.38 },
+  { name: "Mumbai", key: "mumbai-stores", channel: "Stores", group: "West", weight: 152000, change: 0.12 },
+  { name: "Pune", channel: "Stores", group: "West", weight: 166000, change: 0.09 },
+  { name: "Surat", channel: "Online", group: "West", weight: 98000, change: -0.21 },
+  { name: "Bengaluru", channel: "Stores", group: "South", weight: 262500, change: -0.06 },
+  { name: "Chennai", channel: "Stores", group: "South", weight: 258000, change: 0.44 },
+  { name: "Kochi", channel: "Online", group: "South", weight: 87000, change: 0.58 },
+  { name: "Delhi", channel: "Stores", group: "North", weight: 276000, change: 0.27 },
+  { name: "Jaipur", channel: "Online", group: "North", weight: 64000, change: -0.33 },
+  { name: "Kolkata", channel: "Stores", group: "East", weight: 255600, change: 0.16 },
+  { name: "Guwahati", channel: "Online", group: "Northeast", weight: 52000, change: null },
 ];
 
 export default function TreemapExample() {
-  const [hovered, setHovered] = useState<Holding | null>(null);
-  const [selected, setSelected] = useState<Holding | null>(null);
+  const [hovered, setHovered] = useState<City | null>(null);
+  const [selected, setSelected] = useState<City | null>(null);
   const { money, pct } = useFormat();
-  const figures = (h: Holding) =>
-    `${money(h.weight)} · ${h.change === null ? "no cost basis" : `${h.change < 0 ? "▼" : "▲"} ${pct(Math.abs(h.change))}`}`;
+  const figures = (c: City) =>
+    `${money(c.weight)} · ${c.change === null ? "new this year" : `${c.change < 0 ? "\u2212" : "+"}${pct(Math.abs(c.change))}`}`;
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Holdings by sector</CardTitle>
-        <CardDescription>Area is the holding's value; colour is its return, deepest at ±60%</CardDescription>
+        <CardTitle>Sales by region</CardTitle>
+        <CardDescription>
+          Area is the city's sales this month; colour is its growth on last year, deepest at ±60%
+        </CardDescription>
       </CardHeader>
       <CardContent>
         <Tooltip open={hovered !== null} trackCursorAxis="both">
           <TooltipTrigger render={<div />}>
             <Treemap
-              items={holdings}
+              items={cities}
               height={320}
               range={0.6}
               onHover={setHovered}
@@ -57,16 +60,18 @@ export default function TreemapExample() {
               onSelect={setSelected}
             />
           </TooltipTrigger>
-          <TooltipContent side="bottom" className="flex-col items-start gap-0 tabular-nums">
-            {hovered && (
-              <>
-                <span className="font-medium">
-                  {hovered.name} · {hovered.broker}
-                </span>
-                <span>{hovered.group}</span>
-                <span>{figures(hovered)}</span>
-              </>
-            )}
+          <TooltipContent side="bottom">
+            <div className="flex flex-col items-start">
+              {hovered && (
+                <>
+                  <span className="font-medium">
+                    {hovered.name} · {hovered.channel}
+                  </span>
+                  <span>{hovered.group}</span>
+                  <span>{figures(hovered)}</span>
+                </>
+              )}
+            </div>
           </TooltipContent>
         </Tooltip>
         <TreemapLegend range={0.6} className="mt-3 ml-auto" />
@@ -74,7 +79,7 @@ export default function TreemapExample() {
           {selected ? (
             <>
               <span className="font-medium">
-                {selected.name} · {selected.broker}
+                {selected.name} · {selected.channel}
               </span>{" "}
               · {selected.group} · {figures(selected)}
             </>

package/agents/manifest.json

@@ -16,7 +16,7 @@
   },
   "needs": [
     {
-      "need": "Values over time or another ordered axis (months, hours, price buckets)",
+      "need": "Values over time or another ordered axis (months, hours, size buckets)",
       "guidance": "`BarChartCard`, `AreaChartCard` or `LineChartCard`",
       "components": [
         "BarChartCard",
@@ -32,14 +32,14 @@
       ]
     },
     {
-      "need": "A running level, such as a portfolio's value against money put in",
+      "need": "A running level, such as revenue against its target",
       "guidance": "`AreaChartCard`",
       "components": [
         "AreaChartCard"
       ]
     },
     {
-      "need": "Series compared point by point, such as a return against an index",
+      "need": "Series compared point by point, such as growth against a benchmark",
       "guidance": "`LineChartCard`",
       "components": [
         "LineChartCard"
@@ -53,7 +53,7 @@
       ]
     },
     {
-      "need": "Long category names, such as sectors",
+      "need": "Long category names, such as teams or product categories",
       "guidance": "`BarChartCard` with `horizontal`",
       "components": [
         "BarChartCard"
@@ -118,28 +118,28 @@
       ]
     },
     {
-      "need": "Figures against their targets, such as allocation against plan",
+      "need": "Figures against their targets, such as spend against budget",
       "guidance": "`TargetRows`, with neutral `bands` and a `status` per row",
       "components": [
         "TargetRows"
       ]
     },
     {
-      "need": "Where a value sits in its range, such as a price in its 52-week range",
+      "need": "Where a value sits in its range, such as today's response time in its 30-day range",
       "guidance": "`RangePosition`; `variant=\"compact\"` in a table cell",
       "components": [
         "RangePosition"
       ]
     },
     {
-      "need": "One instrument's price history",
+      "need": "A long daily series, such as a price or an order value",
       "guidance": "`PriceChart`",
       "components": [
         "PriceChart"
       ]
     },
     {
-      "need": "Holdings sized by weight and coloured by change",
+      "need": "Items sized by weight and coloured by change, such as sales by city",
       "guidance": "`Treemap`",
       "components": [
         "Treemap"
@@ -304,10 +304,9 @@
     {
       "file": "agents/examples/alert.tsx",
       "components": [
-        "Alert",
         "AlertDescription",
         "AlertTitle",
-        "WarningAlert"
+        "StatusAlert"
       ]
     },
     {
@@ -328,7 +327,8 @@
       "file": "agents/examples/badge.tsx",
       "components": [
         "Badge",
-        "Delta"
+        "Delta",
+        "StatusBadge"
       ]
     },
     {
@@ -401,11 +401,11 @@
     {
       "file": "agents/examples/callout.tsx",
       "components": [
+        "AlertDescription",
+        "AlertTitle",
         "Callout",
         "Quote",
-        "WarningAlert",
-        "AlertDescription",
-        "AlertTitle"
+        "StatusAlert"
       ]
     },
     {
@@ -472,7 +472,7 @@
       ]
     },
     {
-      "file": "agents/examples/chart-bar-sectors.tsx",
+      "file": "agents/examples/chart-bar-teams.tsx",
       "components": [
         "BarChartCard",
         "ToggleGroup",

package/dist/components/registry/charts/bar-chart-card.d.ts

@@ -3,7 +3,7 @@ import { SeriesChartProps } from "../../../lib/chart-series.js";
 export interface BarChartCardProps<T extends object, K extends keyof T> extends SeriesChartProps<T, K> {
   /** Stack the series in one bar per point instead of side by side. */
   stacked?: boolean;
-  /** Bars run sideways, categories down the left: for long names, such as sectors. */
+  /** Bars run sideways, categories down the left: for long names, such as product categories. */
   horizontal?: boolean;
   /** The picked category's x value: its bars stay solid and the rest fade. */
   selected?: T[K] | null;

package/dist/components/registry/charts/bar-chart-card.js

@@ -42,9 +42,13 @@ function BarChartCard({ stacked = false, selected = null, onSelect, ...props })
 					const tone = negativeColor && Number(row[key]) < 0 ? negativeColor : color;
 					return negativeColor ? /* @__PURE__ */ jsx(Cell, {
 						fill: signedFill(tone, isSelected),
-						stroke: dimUnselected(tone, isSelected),
+						stroke: tone,
 						strokeWidth: 1.5
-					}, i) : /* @__PURE__ */ jsx(Cell, { fill: dimUnselected(tone, isSelected) }, i);
+					}, i) : /* @__PURE__ */ jsx(Cell, {
+						fill: dimUnselected(tone, isSelected),
+						stroke: tone,
+						strokeWidth: 1.5
+					}, i);
 				})
 			}, key);
 		})

package/dist/components/registry/charts/line-chart-card.d.ts

@@ -3,6 +3,6 @@ import { ChartCurve, NumericXProps, SeriesChartProps } from "../../../lib/chart-
 export interface LineChartCardProps<T extends object, K extends keyof T> extends SeriesChartProps<T, K>, NumericXProps {
   curve?: ChartCurve;
 }
-/** Values over an ordered axis as lines: one series, or several to compare, such as a portfolio against its index. */
+/** Values over an ordered axis as lines: one series, or several to compare, such as sales against a target. */
 export declare function LineChartCard<T extends object, K extends keyof T>({ curve, ...props }: LineChartCardProps<T, K>): import("react").JSX.Element;
 //#endregion

package/dist/components/registry/charts/line-chart-card.js

@@ -3,7 +3,7 @@ import { ChartFrame, endDot } from "../../../lib/chart-frame.js";
 import { jsx } from "react/jsx-runtime";
 import { Line, LineChart } from "recharts";
 //#region src/components/registry/charts/line-chart-card.tsx
-/** Values over an ordered axis as lines: one series, or several to compare, such as a portfolio against its index. */
+/** Values over an ordered axis as lines: one series, or several to compare, such as sales against a target. */
 function LineChartCard({ curve = "monotone", ...props }) {
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		chart: LineChart,

package/dist/components/registry/dashboard-01/section-cards.js

@@ -31,7 +31,7 @@ function SectionCards({ items, selected, onSelect }) {
 							"aria-pressed": item.label === selected,
 							disabled: item.disabled,
 							onClick: () => onSelect(item.label),
-							className: "absolute inset-0 z-10 rounded-[inherit] outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset"
+							className: "absolute inset-0 z-10 rounded-[inherit] outline-none focus-visible:ring-3 focus-visible:ring-ring focus-visible:ring-inset"
 						}),
 						/* @__PURE__ */ jsxs(CardHeader, { children: [
 							/* @__PURE__ */ jsx(CardDescription, { children: item.label }),

package/dist/components/registry/dashboardcn/distribution-bar.js

@@ -66,12 +66,14 @@ function DistributionBar({ segments, valueFormatter, showLegend = true, showValu
 					onMouseLeave: onHover ? () => onHover(null) : void 0,
 					children: resolved.map((segment) => segment.width > 0 ? /* @__PURE__ */ jsx("div", {
 						"data-slot": "distribution-segment",
-						className: "border-card absolute inset-y-0 border-x transition-[width,left,opacity] duration-300",
+						className: "border-card absolute inset-y-0 border-x transition-[width,left,background-color] duration-300",
 						style: {
 							left: `${segment.left}%`,
 							width: `${segment.width}%`,
-							backgroundColor: segment.color,
-							opacity: highlighted === null || highlighted === segment.key ? 1 : .35
+							...highlighted === null || highlighted === segment.key ? { backgroundColor: segment.color } : {
+								backgroundColor: `color-mix(in oklab, ${segment.color} 35%, var(--card))`,
+								boxShadow: `inset 0 0 0 1px ${segment.color}`
+							}
 						},
 						onMouseEnter: onHover ? () => onHover(segment) : void 0
 					}, segment.key) : null)

package/dist/components/registry/heatmap/status-heatmap.js

@@ -322,7 +322,7 @@ const StatusHeatmapLegend = ({ labels: labelsProp, className, children, ...props
 	return /* @__PURE__ */ jsx("fieldset", {
 		"data-slot": "status-heatmap-legend",
 		"aria-label": labels.legendLabel ?? "Status legend",
-		className: cn("ml-auto flex items-center gap-1", className),
+		className: cn("ml-auto flex items-center gap-3", className),
 		...props,
 		children: statuses.map((status) => children ? /* @__PURE__ */ jsx(Fragment$1, { children: children({
 			value: status.value,

package/dist/components/siyahi/callout.d.ts

@@ -1,24 +1,17 @@
+import { Tone } from "../../lib/tone.js";
 import { ComponentProps, ReactNode } from "react";
 //#region src/components/siyahi/callout.d.ts
-declare const TONES: {
-  readonly neutral: "border-border bg-muted/50 [&_[data-slot=callout-icon]]:text-muted-foreground";
-  readonly accent: "border-chart-1/35 bg-chart-1/8 [&_[data-slot=callout-icon]]:text-link";
-  readonly warning: "border-warning/45 bg-warning/10 [&_[data-slot=callout-icon]]:text-warning";
-  readonly positive: "border-positive/40 bg-positive/8 [&_[data-slot=callout-icon]]:text-positive";
-  readonly negative: "border-negative/40 bg-negative/8 [&_[data-slot=callout-icon]]:text-negative";
-};
 export interface CalloutProps extends Omit<ComponentProps<"aside">, "title"> {
   /** neutral for an aside, accent for a key point, warning for a caution, positive or negative for a gain or a loss. */
-  tone?: keyof typeof TONES;
+  tone?: Tone;
   /** A lucide icon, drawn in the tone's colour. */
   icon?: ReactNode;
   title?: ReactNode;
 }
 /**
  * A point set apart from the prose: a takeaway, a caveat, a definition. The whole box takes the tone, a faint wash
- * inside a border of the same colour; never a single coloured edge. For a notice that interrupts, use Alert or
- * WarningAlert instead.
+ * inside a border of the same colour; never a single coloured edge. For a notice that interrupts, use StatusAlert
+ * instead.
  */
 export declare function Callout({ tone, icon, title, className, children, ...props }: CalloutProps): import("react").JSX.Element;
-//#endregion
-export {};
+//#endregion

package/dist/components/siyahi/callout.js

@@ -1,28 +1,22 @@
+import { TONES } from "../../lib/tone.js";
 import { cn } from "cn";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/siyahi/callout.tsx
-const TONES = {
-	neutral: "border-border bg-muted/50 [&_[data-slot=callout-icon]]:text-muted-foreground",
-	accent: "border-chart-1/35 bg-chart-1/8 [&_[data-slot=callout-icon]]:text-link",
-	warning: "border-warning/45 bg-warning/10 [&_[data-slot=callout-icon]]:text-warning",
-	positive: "border-positive/40 bg-positive/8 [&_[data-slot=callout-icon]]:text-positive",
-	negative: "border-negative/40 bg-negative/8 [&_[data-slot=callout-icon]]:text-negative"
-};
 /**
 * A point set apart from the prose: a takeaway, a caveat, a definition. The whole box takes the tone, a faint wash
-* inside a border of the same colour; never a single coloured edge. For a notice that interrupts, use Alert or
-* WarningAlert instead.
+* inside a border of the same colour; never a single coloured edge. For a notice that interrupts, use StatusAlert
+* instead.
 */
 function Callout({ tone = "neutral", icon, title, className, children, ...props }) {
 	return /* @__PURE__ */ jsxs("aside", {
 		"data-slot": "callout",
 		"data-tone": tone,
-		className: cn("flex gap-3 rounded-lg border px-4 py-3 text-sm", TONES[tone], className),
+		className: cn("flex gap-3 rounded-lg border px-4 py-3 text-sm", TONES[tone].box, className),
 		...props,
 		children: [icon && /* @__PURE__ */ jsx("span", {
 			"data-slot": "callout-icon",
 			"aria-hidden": true,
-			className: "mt-0.5 shrink-0 [&>svg]:size-4",
+			className: cn("mt-0.5 shrink-0 [&>svg]:size-4", TONES[tone].ink),
 			children: icon
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex min-w-0 flex-col gap-1",

package/dist/components/siyahi/delta.d.ts

@@ -5,6 +5,10 @@ export interface DeltaProps {
   format?: "pct" | "money";
   className?: string;
 }
-/** A signed figure: ▲ in --positive, ▼ in --negative, so colour is never the only cue. */
+/**
+ * A signed change: the figure in the surrounding text colour with its sign, and a trend icon in --positive or
+ * --negative. The sign and the icon's shape carry the direction, so colour is never the only cue, and a column of
+ * changes reads as figures rather than a wall of red and green.
+ */
 export declare function Delta({ value, format, className }: DeltaProps): import("react").JSX.Element;
 //#endregion

package/dist/components/siyahi/delta.js

@@ -1,24 +1,29 @@
 import { useFormat } from "../../lib/format.js";
 import { cn } from "cn";
+import { MinusIcon, TrendingDownIcon, TrendingUpIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/siyahi/delta.tsx
-/** A signed figure: ▲ in --positive, ▼ in --negative, so colour is never the only cue. */
+const MINUS = "−";
+/**
+* A signed change: the figure in the surrounding text colour with its sign, and a trend icon in --positive or
+* --negative. The sign and the icon's shape carry the direction, so colour is never the only cue, and a column of
+* changes reads as figures rather than a wall of red and green.
+*/
 function Delta({ value, format = "pct", className }) {
 	const f = useFormat();
 	const size = format === "money" ? f.money(Math.abs(value)) : f.pct(Math.abs(value));
-	const direction = value > 0 ? "up" : value < 0 ? "down" : null;
+	const direction = value > 0 ? "up" : value < 0 ? "down" : "none";
+	const Icon = direction === "up" ? TrendingUpIcon : direction === "down" ? TrendingDownIcon : MinusIcon;
 	return /* @__PURE__ */ jsxs("span", {
 		"data-slot": "delta",
-		className: cn("inline-flex items-center gap-1 tabular-nums", direction === "up" && "text-positive", direction === "down" && "text-negative", direction === null && "text-muted-foreground", className),
+		"data-direction": direction,
+		className: cn("inline-flex items-center gap-1 whitespace-nowrap", className),
 		children: [
-			direction && /* @__PURE__ */ jsx("span", {
+			/* @__PURE__ */ jsx(Icon, {
 				"aria-hidden": "true",
-				children: direction === "up" ? "▲" : "▼"
-			}),
-			direction && /* @__PURE__ */ jsx("span", {
-				className: "sr-only",
-				children: direction
+				className: cn("size-3.5 shrink-0", direction === "up" && "text-positive", direction === "down" && "text-negative", direction === "none" && "text-muted-foreground")
 			}),
+			direction === "up" ? "+" : direction === "down" ? MINUS : "",
 			size
 		]
 	});

package/dist/components/siyahi/status-alert.d.ts

@@ -0,0 +1,15 @@
+import { Tone } from "../../lib/tone.js";
+import { Alert } from "../ui/alert.js";
+import { ComponentProps } from "react";
+//#region src/components/siyahi/status-alert.d.ts
+export interface StatusAlertProps extends Omit<ComponentProps<typeof Alert>, "variant"> {
+  /** neutral for information, warning for a caution, negative for an error, positive for a success. */
+  tone?: Tone;
+}
+/**
+ * A notice the reader must not miss: the whole card takes its tone, a faint wash inside a border of the same colour,
+ * with the tone's icon. Title and description stay in the text colours so they read on the wash. Never mark a notice
+ * with a single coloured edge. Put an AlertTitle and an AlertDescription inside.
+ */
+export declare function StatusAlert({ tone, className, children, ...props }: StatusAlertProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/status-alert.js

@@ -0,0 +1,29 @@
+import { Alert } from "../ui/alert.js";
+import { TONES } from "../../lib/tone.js";
+import { cn } from "cn";
+import { CircleAlertIcon, CircleCheckIcon, InfoIcon, LightbulbIcon, TriangleAlertIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/status-alert.tsx
+const ICONS = {
+	neutral: InfoIcon,
+	accent: LightbulbIcon,
+	warning: TriangleAlertIcon,
+	positive: CircleCheckIcon,
+	negative: CircleAlertIcon
+};
+/**
+* A notice the reader must not miss: the whole card takes its tone, a faint wash inside a border of the same colour,
+* with the tone's icon. Title and description stay in the text colours so they read on the wash. Never mark a notice
+* with a single coloured edge. Put an AlertTitle and an AlertDescription inside.
+*/
+function StatusAlert({ tone = "neutral", className, children, ...props }) {
+	const Icon = ICONS[tone];
+	return /* @__PURE__ */ jsxs(Alert, {
+		"data-tone": tone,
+		className: cn("gap-x-3 px-4 py-3", TONES[tone].box, className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Icon, { className: TONES[tone].ink }), children]
+	});
+}
+//#endregion
+export { StatusAlert };

package/dist/components/siyahi/status-badge.d.ts

@@ -0,0 +1,15 @@
+import { Tone } from "../../lib/tone.js";
+import { Badge } from "../ui/badge.js";
+import { ComponentProps } from "react";
+//#region src/components/siyahi/status-badge.d.ts
+export interface StatusBadgeProps extends Omit<ComponentProps<typeof Badge>, "variant"> {
+  /** positive for done or paid, warning for pending, negative for failed, accent for new, neutral for a draft. */
+  tone?: Tone;
+}
+/**
+ * A state, such as Paid, Pending or Failed: the badge takes its tone's wash and border, and a dot in the tone's
+ * colour marks it. The label stays in the text colour, since small coloured text on its own wash falls under 4.5:1.
+ * Categories (a team, a region) are not states: they stay outline badges.
+ */
+export declare function StatusBadge({ tone, className, children, ...props }: StatusBadgeProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/status-badge.js

@@ -0,0 +1,24 @@
+import { Badge } from "../ui/badge.js";
+import { TONES } from "../../lib/tone.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/status-badge.tsx
+/**
+* A state, such as Paid, Pending or Failed: the badge takes its tone's wash and border, and a dot in the tone's
+* colour marks it. The label stays in the text colour, since small coloured text on its own wash falls under 4.5:1.
+* Categories (a team, a region) are not states: they stay outline badges.
+*/
+function StatusBadge({ tone = "neutral", className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Badge, {
+		variant: "outline",
+		"data-tone": tone,
+		className: cn(TONES[tone].box, className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: cn("size-1.5 rounded-full", TONES[tone].dot)
+		}), children]
+	});
+}
+//#endregion
+export { StatusBadge };

package/dist/components/siyahi/tone-progress.d.ts

@@ -9,7 +9,7 @@ export interface ToneProgressProps extends ComponentProps<typeof Progress> {
   /** The meaning colour of the bar: a gain's share in --positive, a loss's in --negative. */
   tone: keyof typeof TONE;
 }
-/** shadcn's Progress with its bar in a meaning colour, such as each position's share of the booked P&L. */
+/** shadcn's Progress with its bar in a meaning colour, such as each channel's share of profit or loss. */
 export declare function ToneProgress({ tone, className, ...props }: ToneProgressProps): import("react").JSX.Element;
 //#endregion
 export {};

package/dist/components/siyahi/tone-progress.js

@@ -6,7 +6,7 @@ const TONE = {
 	positive: "**:data-[slot=progress-indicator]:bg-positive",
 	negative: "**:data-[slot=progress-indicator]:bg-negative"
 };
-/** shadcn's Progress with its bar in a meaning colour, such as each position's share of the booked P&L. */
+/** shadcn's Progress with its bar in a meaning colour, such as each channel's share of profit or loss. */
 function ToneProgress({ tone, className, ...props }) {
 	return /* @__PURE__ */ jsx(Progress, {
 		"data-tone": tone,

package/dist/components/siyahi/treemap.d.ts

@@ -1,13 +1,13 @@
 //#region src/components/siyahi/treemap.d.ts
 export interface TreemapItem {
   name: string;
-  /** Tile area, such as the holding's value. Zero, negative and non-finite weights draw no tile. */
+  /** Tile area, such as a city's sales. Zero, negative and non-finite weights draw no tile. */
   weight: number;
   /** Signed change as a fraction; sets the heat. `null` when unknown: a muted tile marked "—". */
   change: number | null;
-  /** Unique key when names repeat, such as one symbol held at two brokers. Defaults to `name`. */
+  /** Unique key when names repeat, such as one city sold to online and in stores. Defaults to `name`. */
   key?: string;
-  /** Tiles of one group, such as a sector, sit together under the group's name, even a group of one. */
+  /** Tiles of one group, such as a region, sit together under the group's name, even a group of one. */
   group?: string;
 }
 export interface TreemapProps<T extends TreemapItem> {
@@ -29,7 +29,7 @@ export interface TreemapProps<T extends TreemapItem> {
    */
   onSelect?: (item: T | null) => void;
 }
-/** Holdings heat map: area by weight, colour by signed change, optionally grouped; hand-drawn SVG. */
+/** Heat map of parts of a whole: area by weight, colour by signed change, optionally grouped; hand-drawn SVG. */
 export declare function Treemap<T extends TreemapItem>({ items, height, range, onHover, selected, onSelect }: TreemapProps<T>): import("react").JSX.Element;
 export interface TreemapLegendProps {
   /** The Treemap's own range, so each swatch matches its tiles. */

package/dist/components/siyahi/treemap.js

@@ -5,7 +5,7 @@ import { cn } from "cn";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useEffectEvent, useMemo, useState } from "react";
 //#region src/components/siyahi/treemap.tsx
-/** Holdings heat map: area by weight, colour by signed change, optionally grouped; hand-drawn SVG. */
+/** Heat map of parts of a whole: area by weight, colour by signed change, optionally grouped; hand-drawn SVG. */
 function Treemap({ items, height, range, onHover, selected, onSelect }) {
 	const [ref, width] = useElementWidth();
 	const [focusedKey, setFocusedKey] = useState(null);
@@ -27,7 +27,7 @@ function Treemap({ items, height, range, onHover, selected, onSelect }) {
 		height
 	]);
 	const focusKey = tiles.some(({ item }) => (item.key ?? item.name) === focusedKey) ? focusedKey : tiles[0]?.item.key ?? tiles[0]?.item.name;
-	const change = (value) => value === null ? "—" : `${value > 0 ? "▲ " : value < 0 ? "▼ " : ""}${pct(Math.abs(value))}`;
+	const change = (value) => value === null ? "—" : `${value > 0 ? "+" : value < 0 ? "−" : ""}${pct(Math.abs(value))}`;
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-slot": "treemap",
@@ -36,7 +36,7 @@ function Treemap({ items, height, range, onHover, selected, onSelect }) {
 			width,
 			height,
 			role: onSelect ? "group" : "img",
-			"aria-label": "Treemap of holdings by weight and change",
+			"aria-label": "Treemap by weight and change",
 			className: "text-xs",
 			onPointerLeave: (event) => event.pointerType === "mouse" && onHover?.(null),
 			children: [groups.map(({ group, ...box }) => /* @__PURE__ */ jsxs("svg", {
@@ -193,9 +193,9 @@ function TreemapLegend({ range, className }) {
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex justify-between gap-2 tabular-nums",
 				children: [
-					/* @__PURE__ */ jsxs("span", { children: ["▼ over ", over] }),
+					/* @__PURE__ */ jsxs("span", { children: ["down over ", over] }),
 					/* @__PURE__ */ jsxs("span", { children: [pct(step, digits), " a step"] }),
-					/* @__PURE__ */ jsxs("span", { children: ["▲ over ", over] })
+					/* @__PURE__ */ jsxs("span", { children: ["up over ", over] })
 				]
 			}),
 			/* @__PURE__ */ jsxs("p", {