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

package/dist/components/siyahi/page-hero.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+//#region src/components/siyahi/page-hero.d.ts
+export interface PageHeroProps {
+  /** A short line above the title in the link colour, such as a package or a section name. */
+  eyebrow?: ReactNode;
+  /** The page's h1, set large. */
+  title: ReactNode;
+  /** What the page is, in a sentence or two, in the body colour. */
+  lead?: ReactNode;
+  /** Muted detail under the lead: scope, sources, what is left out. */
+  detail?: ReactNode;
+  /** The one or two places a reader goes next, usually a primary Button and an outline one. */
+  actions?: ReactNode;
+  /**
+   * A large decorative mark drawn faintly in the accent behind the top right, such as the product's logo as an
+   * SVG that paints with currentColor. It is hidden from assistive technology.
+   */
+  mark?: ReactNode;
+}
+/**
+ * The introduction at the top of a front page or a long explainer: a large title, what the page is, and where to
+ * go next, on a card with an optional watermark. One per page, above everything else; a section uses PageSection.
+ */
+export declare function PageHero({ eyebrow, title, lead, detail, actions, mark }: PageHeroProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/page-hero.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/page-hero.tsx
+/**
+* The introduction at the top of a front page or a long explainer: a large title, what the page is, and where to
+* go next, on a card with an optional watermark. One per page, above everything else; a section uses PageSection.
+*/
+function PageHero({ eyebrow, title, lead, detail, actions, mark }) {
+	return /* @__PURE__ */ jsxs("header", {
+		"data-slot": "page-hero",
+		className: "relative isolate flex flex-col gap-4 overflow-hidden rounded-2xl border bg-card px-6 py-8 sm:px-10 sm:py-10",
+		children: [
+			mark && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: "pointer-events-none absolute -top-8 -right-10 -z-10 size-80 text-chart-1 opacity-10 sm:-top-12 sm:right-4 [&>svg]:size-full",
+				children: mark
+			}),
+			eyebrow && /* @__PURE__ */ jsx("p", {
+				className: "font-mono text-xs text-link",
+				children: eyebrow
+			}),
+			/* @__PURE__ */ jsx("h1", {
+				className: "text-5xl font-semibold tracking-tighter text-balance sm:text-6xl",
+				children: title
+			}),
+			lead && /* @__PURE__ */ jsx("div", {
+				className: "max-w-xl text-lg text-pretty",
+				children: lead
+			}),
+			detail && /* @__PURE__ */ jsx("div", {
+				className: "max-w-xl text-pretty text-muted-foreground",
+				children: detail
+			}),
+			actions && /* @__PURE__ */ jsx("div", {
+				className: "mt-2 flex flex-wrap gap-2",
+				children: actions
+			})
+		]
+	});
+}
+//#endregion
+export { PageHero };

package/dist/components/siyahi/page-toc.d.ts

@@ -0,0 +1,20 @@
+//#region src/components/siyahi/page-toc.d.ts
+export interface PageTocItem {
+  /** The `id` of the PageSection it jumps to. */
+  id: string;
+  title: string;
+}
+export interface PageTocProps {
+  items: PageTocItem[];
+  /** Names the navigation for screen readers. */
+  label?: string;
+  /** Layout only, such as `top-14` under a sticky page header. */
+  className?: string;
+}
+/**
+ * A long page's sections as one sticky "On this page" index. It stays at the top while the reader scrolls,
+ * underlines the section in view in the link colour, and scrolls sideways on a phone with the current link kept
+ * in sight.
+ */
+export declare function PageToc({ items, label, className }: PageTocProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/page-toc.js

@@ -0,0 +1,76 @@
+import { cn } from "cn";
+import { ChevronRightIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+//#region src/components/siyahi/page-toc.tsx
+/**
+* A long page's sections as one sticky "On this page" index. It stays at the top while the reader scrolls,
+* underlines the section in view in the link colour, and scrolls sideways on a phone with the current link kept
+* in sight.
+*/
+function PageToc({ items, label = "On this page", className }) {
+	const nav = useRef(null);
+	const active = useActiveSection(items, nav);
+	const strip = useRef(null);
+	useEffect(() => {
+		const link = strip.current?.querySelector(`a[href="#${CSS.escape(active ?? "")}"]`);
+		const box = strip.current;
+		if (!link || !box) return;
+		const left = link.offsetLeft - box.clientWidth / 2 + link.offsetWidth / 2;
+		box.scrollTo({
+			left,
+			behavior: "smooth"
+		});
+	}, [active]);
+	return /* @__PURE__ */ jsx("nav", {
+		ref: nav,
+		"aria-label": label,
+		"data-slot": "page-toc",
+		className: cn("sticky top-0 z-10 -mx-4 border-b bg-background px-4 sm:mx-0 sm:px-0", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: strip,
+			className: "flex items-baseline gap-x-4 overflow-x-auto py-2.5 mask-r-from-90% [scrollbar-width:none] sm:mask-none",
+			children: [/* @__PURE__ */ jsxs("span", {
+				"aria-hidden": true,
+				className: "flex shrink-0 cursor-default items-center gap-1 self-center text-[0.6875rem] font-medium tracking-wider text-muted-foreground uppercase select-none",
+				children: [label, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-3.5" })]
+			}), items.map((item) => /* @__PURE__ */ jsx("a", {
+				href: `#${item.id}`,
+				"aria-current": item.id === active ? "location" : void 0,
+				onClick: (event) => {
+					event.preventDefault();
+					document.getElementById(item.id)?.scrollIntoView({ behavior: "smooth" });
+				},
+				className: "shrink-0 text-sm whitespace-nowrap text-muted-foreground decoration-2 underline-offset-[6px] transition-colors hover:text-foreground hover:underline hover:decoration-border aria-[current=location]:font-medium aria-[current=location]:text-link aria-[current=location]:underline aria-[current=location]:decoration-current",
+				children: item.title
+			}, item.id))]
+		})
+	});
+}
+function useActiveSection(items, strip) {
+	const [active, setActive] = useState(items[0]?.id);
+	const ids = items.map((item) => item.id).join(" ");
+	useEffect(() => {
+		const sections = ids.split(" ").flatMap((id) => document.getElementById(id) ?? []);
+		if (sections.length === 0) return;
+		const update = () => {
+			const stripBottom = strip.current?.getBoundingClientRect().bottom ?? 0;
+			const line = (section) => Math.max(stripBottom, Number.parseFloat(getComputedStyle(section).scrollMarginTop) || 0, innerHeight * .3);
+			const reached = sections.filter((section) => section.getBoundingClientRect().top <= line(section) + 1);
+			setActive((reached.at(-1) ?? sections[0]).id);
+		};
+		update();
+		addEventListener("scroll", update, {
+			passive: true,
+			capture: true
+		});
+		addEventListener("resize", update);
+		return () => {
+			removeEventListener("scroll", update, { capture: true });
+			removeEventListener("resize", update);
+		};
+	}, [ids, strip]);
+	return active;
+}
+//#endregion
+export { PageToc };

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

@@ -0,0 +1,12 @@
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/siyahi/quote.d.ts
+export interface QuoteProps extends ComponentProps<"blockquote"> {
+  /** Who said it, or where it is from, set under the quote. */
+  source?: ReactNode;
+}
+/**
+ * A quotation set apart from the prose on a muted panel, with its source under it. The panel is the whole box, not a
+ * stripe down one side.
+ */
+export declare function Quote({ source, className, children, ...props }: QuoteProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/quote.js

@@ -0,0 +1,23 @@
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/quote.tsx
+/**
+* A quotation set apart from the prose on a muted panel, with its source under it. The panel is the whole box, not a
+* stripe down one side.
+*/
+function Quote({ source, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("figure", {
+		"data-slot": "quote",
+		className: cn("flex flex-col gap-2 rounded-lg bg-muted/60 px-4 py-3", className),
+		children: [/* @__PURE__ */ jsx("blockquote", {
+			className: "text-pretty italic",
+			...props,
+			children
+		}), source && /* @__PURE__ */ jsx("figcaption", {
+			className: "text-sm text-muted-foreground",
+			children: source
+		})]
+	});
+}
+//#endregion
+export { Quote };

package/dist/components/siyahi/range-position.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+//#region src/components/siyahi/range-position.d.ts
+export interface RangePositionProps {
+  low: number;
+  high: number;
+  value: number;
+  /** Names the low end: "52-week low". */
+  lowLabel?: string;
+  highLabel?: string;
+  /** Follows the percentage in the full variant: "of the way up the 52-week range". */
+  caption?: ReactNode;
+  /** Writes low, high and value; useFormat().money by default. */
+  valueFormatter?: (value: number) => string;
+  /** compact fits a table cell: the ends' figures either side of the track, nothing above it. */
+  variant?: "full" | "compact";
+  className?: string;
+}
+/**
+ * How far a value sits between a low and a high, such as a price in its 52-week range: a track filled to the value
+ * with a hollow thumb on it, the ends labelled, and in the full variant the share written large with the value over
+ * the thumb.
+ */
+export declare function RangePosition({ low, high, value, lowLabel, highLabel, caption, valueFormatter, variant, className }: RangePositionProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/range-position.js

@@ -0,0 +1,105 @@
+import { useFormat } from "../../lib/format.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/range-position.tsx
+/**
+* How far a value sits between a low and a high, such as a price in its 52-week range: a track filled to the value
+* with a hollow thumb on it, the ends labelled, and in the full variant the share written large with the value over
+* the thumb.
+*/
+function RangePosition({ low, high, value, lowLabel = "Low", highLabel = "High", caption = "of the way up the range", valueFormatter, variant = "full", className }) {
+	const f = useFormat();
+	const write = valueFormatter ?? f.money;
+	const share = high > low ? Math.min(1, Math.max(0, (value - low) / (high - low))) : 0;
+	const at = `${(share * 100).toFixed(2)}%`;
+	const track = /* @__PURE__ */ jsxs("div", {
+		role: "meter",
+		"aria-label": `${lowLabel} to ${highLabel}`,
+		"aria-valuemin": low,
+		"aria-valuemax": high,
+		"aria-valuenow": value,
+		"aria-valuetext": `${write(value)}, ${f.pct(share, 0)} of the way from ${write(low)} to ${write(high)}`,
+		className: "relative h-1.5 min-w-12 flex-1 rounded-full bg-muted",
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-slot": "range-fill",
+			className: "absolute inset-y-0 left-0 rounded-full bg-foreground",
+			style: { width: at }
+		}), /* @__PURE__ */ jsx("div", {
+			"data-slot": "range-thumb",
+			className: cn("absolute top-1/2 -translate-1/2 rounded-full border-2 border-foreground bg-card", variant === "full" ? "size-3.5" : "size-2.5"),
+			style: { left: at }
+		})]
+	});
+	if (variant === "compact") return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "range-position",
+		className: cn("flex items-center gap-2 text-xs text-muted-foreground tabular-nums", className),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-12 text-right",
+				children: write(low)
+			}),
+			track,
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-12",
+				children: write(high)
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "range-position",
+		className: cn("grid gap-3", className),
+		children: [/* @__PURE__ */ jsxs("p", {
+			className: "flex flex-wrap items-baseline gap-x-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-4xl font-semibold tracking-tight tabular-nums",
+				children: f.pct(share, 0)
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-sm text-muted-foreground",
+				children: caption
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "grid gap-1.5",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "relative h-5",
+					children: /* @__PURE__ */ jsx("span", {
+						"data-slot": "range-value",
+						className: "absolute text-sm font-semibold whitespace-nowrap tabular-nums",
+						style: {
+							left: at,
+							transform: `translateX(-${at})`
+						},
+						children: write(value)
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex",
+					children: track
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "mt-1 flex justify-between gap-4 text-xs text-muted-foreground",
+					children: [/* @__PURE__ */ jsxs("span", { children: [
+						lowLabel,
+						" ",
+						/* @__PURE__ */ jsx("span", {
+							className: "text-foreground tabular-nums",
+							children: write(low)
+						})
+					] }), /* @__PURE__ */ jsxs("span", {
+						className: "text-right",
+						children: [
+							highLabel,
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								className: "text-foreground tabular-nums",
+								children: write(high)
+							})
+						]
+					})]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { RangePosition };

package/dist/components/siyahi/siyahi-provider.d.ts

@@ -11,7 +11,7 @@ export interface SiyahiProviderProps {
   locale?: Partial<SiyahiLocale>;
   /**
    * Set it on a nested provider for one part of a page. Left out, a provider keeps the surface around it, so a
-   * provider that only changes the locale changes nothing else; the outermost default is "ruled".
+   * provider that only changes the locale changes nothing else; the outermost default is "card".
    */
   surface?: Surface;
   children: ReactNode;

package/dist/components/siyahi/siyahi-provider.js

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 import { createContext, use, useMemo } from "react";
 //#region src/components/siyahi/siyahi-provider.tsx
 const LocaleContext = createContext(defaultLocale);
-const SurfaceContext = createContext("ruled");
+const SurfaceContext = createContext("card");
 /** Wrap the app once. Carries the locale, the surface and the tooltip provider shadcn asks for. */
 function SiyahiProvider({ locale, surface, children }) {
 	const { numberLocale, currency, timeZone } = {

package/dist/components/siyahi/target-rows.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from "react";
+//#region src/components/siyahi/target-rows.d.ts
+/** Where a row stands against its target. A warning is for a real problem, not merely a miss. */
+export interface TargetStatus {
+  kind: "met" | "missed" | "warning";
+  /** A few words: "On target", "2.1 pts under", "Rebalance". */
+  label: string;
+}
+export interface TargetRow {
+  label: ReactNode;
+  /** A muted line under the label, such as the asset class. */
+  detail?: ReactNode;
+  value: number;
+  target: number;
+  /** Qualitative ranges behind the bar as [from, to]; each later band draws a grey step darker, so nest them. */
+  bands?: [number, number][];
+  status?: TargetStatus;
+  /** Tells rows apart when labels are not plain unique text. */
+  key?: string;
+}
+export interface TargetRowsProps {
+  rows: TargetRow[];
+  /** The scale every row shares; by default 0 to the largest value, target or band edge. */
+  domain?: [number, number];
+  /** Writes the value and the target; useFormat().count by default. */
+  valueFormatter?: (value: number) => string;
+  className?: string;
+}
+/**
+ * Bullet rows: each row's label, value and status beside a track where the value is a solid bar, the target a tall
+ * tick and the qualitative ranges grey bands. On a narrow card the label and value stack above the track.
+ */
+export declare function TargetRows({ rows, domain, valueFormatter, className }: TargetRowsProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/target-rows.js

@@ -0,0 +1,97 @@
+import { useFormat } from "../../lib/format.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/target-rows.tsx
+const GLYPH = {
+	met: "✓",
+	missed: "—",
+	warning: "⚠"
+};
+const BAND_DEPTH = [
+	14,
+	26,
+	38
+];
+/**
+* Bullet rows: each row's label, value and status beside a track where the value is a solid bar, the target a tall
+* tick and the qualitative ranges grey bands. On a narrow card the label and value stack above the track.
+*/
+function TargetRows({ rows, domain, valueFormatter, className }) {
+	const f = useFormat();
+	const write = valueFormatter ?? f.count;
+	const [low, high] = domain ?? [0, Math.max(...rows.flatMap((row) => [
+		row.value,
+		row.target,
+		...row.bands?.flat() ?? []
+	]))];
+	const at = (value) => `${(Math.min(1, Math.max(0, (value - low) / (high - low || 1))) * 100).toFixed(2)}%`;
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "target-rows",
+		className: cn("@container/target divide-y", className),
+		children: rows.map((row, index) => /* @__PURE__ */ jsxs("li", {
+			"data-slot": "target-row",
+			className: "flex flex-col gap-3 py-3 @lg/target:flex-row @lg/target:items-center @lg/target:gap-6",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-col text-sm @lg/target:w-64 @lg/target:shrink-0",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-baseline justify-between gap-3",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate font-medium",
+							children: row.label
+						}), /* @__PURE__ */ jsx("span", {
+							className: "shrink-0 text-base font-semibold tabular-nums",
+							children: write(row.value)
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex justify-between gap-3 text-muted-foreground",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: row.detail
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "shrink-0 tabular-nums",
+							children: ["Target ", write(row.target)]
+						})]
+					}),
+					row.status && /* @__PURE__ */ jsxs("span", {
+						"data-slot": "target-status",
+						"data-kind": row.status.kind,
+						className: "mt-1 flex gap-1.5",
+						children: [/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: cn("w-4 text-center", row.status.kind === "warning" && "text-warning", row.status.kind === "missed" && "text-muted-foreground"),
+							children: GLYPH[row.status.kind]
+						}), row.status.label]
+					})
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				"aria-hidden": "true",
+				className: "relative h-5 rounded-sm bg-muted @lg/target:flex-1",
+				children: [
+					row.bands?.map(([from, to], step) => /* @__PURE__ */ jsx("div", {
+						"data-slot": "target-band",
+						className: "absolute inset-y-0",
+						style: {
+							left: at(Math.min(from, to)),
+							right: `calc(100% - ${at(Math.max(from, to))})`,
+							background: `color-mix(in oklab, var(--foreground) ${BAND_DEPTH[Math.min(step, BAND_DEPTH.length - 1)]}%, var(--muted))`
+						}
+					}, `${from}:${to}`)),
+					/* @__PURE__ */ jsx("div", {
+						"data-slot": "target-value",
+						className: "absolute inset-y-1.5 left-0 bg-foreground",
+						style: { width: at(row.value) }
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"data-slot": "target-tick",
+						className: "absolute -inset-y-1 w-0.5 -translate-x-1/2 bg-foreground ring-1 ring-card",
+						style: { left: at(row.target) }
+					})
+				]
+			})]
+		}, row.key ?? (typeof row.label === "string" ? row.label : index)))
+	});
+}
+//#endregion
+export { TargetRows };

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

@@ -15,7 +15,10 @@ export interface TreemapProps<T extends TreemapItem> {
   height: number;
   /** ±range: the change, as a fraction, that takes the deepest heat step. Default 0.05 (±5%); a range that is not a positive number uses the default. */
   range?: number;
-  /** Gets the item under the pointer, and null when the pointer moves onto a group's name or leaves the map. */
+  /**
+   * Gets the item under a mouse, and null when it moves onto a group's name or leaves the map. A tap fires no hover:
+   * on a touch screen it selects, so the page shows the tile in place rather than in a card at the finger.
+   */
   onHover?: (item: T | null) => void;
   /** The selected item, matched by key, whose tile carries a ring. Pass back what onSelect gave. */
   selected?: T | null;

package/dist/components/siyahi/treemap.js

@@ -1,21 +1,16 @@
 import { useFormat } from "../../lib/format.js";
+import { useElementWidth } from "../../lib/use-element-width.js";
 import { heat, heatFill, heatRange, layout } from "../../lib/treemap.js";
 import { cn } from "cn";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useEffectEvent, useLayoutEffect, useMemo, useRef, useState } from "react";
+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. */
 function Treemap({ items, height, range, onHover, selected, onSelect }) {
-	const ref = useRef(null);
-	const [width, setWidth] = useState(0);
+	const [ref, width] = useElementWidth();
 	const [focusedKey, setFocusedKey] = useState(null);
 	const selectedKey = selected ? selected.key ?? selected.name : null;
 	const { pct } = useFormat();
-	useLayoutEffect(() => {
-		const observer = new ResizeObserver(([entry]) => setWidth(entry?.contentRect.width ?? 0));
-		if (ref.current) observer.observe(ref.current);
-		return () => observer.disconnect();
-	}, []);
 	const clearOutside = useEffectEvent((event) => {
 		const tile = event.target instanceof Element ? event.target.closest("[data-slot=\"treemap-tile\"]") : null;
 		if (!ref.current?.contains(tile)) onSelect?.(null);
@@ -43,22 +38,26 @@ function Treemap({ items, height, range, onHover, selected, onSelect }) {
 			role: onSelect ? "group" : "img",
 			"aria-label": "Treemap of holdings by weight and change",
 			className: "text-xs",
-			onPointerLeave: () => onHover?.(null),
+			onPointerLeave: (event) => event.pointerType === "mouse" && onHover?.(null),
 			children: [groups.map(({ group, ...box }) => /* @__PURE__ */ jsxs("svg", {
 				...box,
 				"data-slot": "treemap-group",
-				onPointerEnter: () => onHover?.(null),
-				children: [/* @__PURE__ */ jsx("rect", {
-					width: "100%",
-					height: "100%",
-					fill: "none",
-					pointerEvents: "all"
-				}), /* @__PURE__ */ jsx("text", {
-					x: 2,
-					y: 12,
-					className: "fill-muted-foreground font-medium",
-					children: group
-				})]
+				onPointerEnter: (event) => event.pointerType === "mouse" && onHover?.(null),
+				children: [
+					/* @__PURE__ */ jsx("rect", {
+						width: "100%",
+						height: "100%",
+						fill: "none",
+						pointerEvents: "all"
+					}),
+					/* @__PURE__ */ jsx("title", { children: group }),
+					textWidth(group) <= box.width - 4 && /* @__PURE__ */ jsx("text", {
+						x: 2,
+						y: 12,
+						className: "fill-muted-foreground font-medium",
+						children: group
+					})
+				]
 			}, group)), tiles.map(({ item, ...box }, index) => {
 				const key = item.key ?? item.name;
 				return /* @__PURE__ */ jsxs("svg", {
@@ -101,7 +100,7 @@ function Treemap({ items, height, range, onHover, selected, onSelect }) {
 							ref.current?.querySelectorAll("[data-slot=\"treemap-tile\"]")[next]?.focus();
 						}
 					},
-					onPointerEnter: () => onHover?.(item),
+					onPointerEnter: (event) => event.pointerType === "mouse" && onHover?.(item),
 					onClick: () => onSelect?.(key === selectedKey ? null : item),
 					children: [
 						/* @__PURE__ */ jsx("rect", {
@@ -120,14 +119,14 @@ function Treemap({ items, height, range, onHover, selected, onSelect }) {
 							strokeWidth: 2,
 							className: "stroke-foreground"
 						}),
-						box.width > 56 && box.height > 36 && /* @__PURE__ */ jsxs("text", {
+						box.width >= MIN_LABEL_WIDTH && box.height >= MIN_LABEL_HEIGHT && /* @__PURE__ */ jsxs("text", {
 							x: 8,
 							y: 18,
 							className: "fill-foreground",
 							children: [/* @__PURE__ */ jsx("tspan", {
 								className: "font-medium",
-								children: item.name
-							}), /* @__PURE__ */ jsx("tspan", {
+								children: fit(item.name, box.width - 16)
+							}), box.height >= TWO_LINE_HEIGHT && /* @__PURE__ */ jsx("tspan", {
 								x: 8,
 								dy: 16,
 								children: change(item.change)
@@ -139,6 +138,15 @@ function Treemap({ items, height, range, onHover, selected, onSelect }) {
 		})
 	});
 }
+const CHAR_PX = 6.6;
+const textWidth = (text) => text.length * CHAR_PX;
+function fit(text, width) {
+	const room = Math.floor(width / CHAR_PX);
+	return text.length <= room ? text : `${text.slice(0, Math.max(room - 1, 1)).trimEnd()}…`;
+}
+const MIN_LABEL_WIDTH = 56;
+const MIN_LABEL_HEIGHT = 28;
+const TWO_LINE_HEIGHT = 44;
 function Swatch({ label, fill }) {
 	return /* @__PURE__ */ jsxs("svg", {
 		"data-slot": "treemap-legend-swatch",

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

@@ -0,0 +1,10 @@
+import { Alert } from "../ui/alert.js";
+import { ComponentProps } from "react";
+//#region src/components/siyahi/warning-alert.d.ts
+/**
+ * An Alert for a caution the reader must not miss, such as withdrawn results or incomplete data: the whole card
+ * takes a faint amber wash inside an amber border, with the warning triangle. Never mark a warning with a single
+ * coloured edge; the tint is the card. Put an AlertTitle and an AlertDescription inside.
+ */
+export declare function WarningAlert({ className, children, ...props }: ComponentProps<typeof Alert>): import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,20 @@
+import { Alert } from "../ui/alert.js";
+import { cn } from "cn";
+import { TriangleAlertIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/warning-alert.tsx
+/**
+* An Alert for a caution the reader must not miss, such as withdrawn results or incomplete data: the whole card
+* takes a faint amber wash inside an amber border, with the warning triangle. Never mark a warning with a single
+* coloured edge; the tint is the card. Put an AlertTitle and an AlertDescription inside.
+*/
+function WarningAlert({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Alert, {
+		"data-tone": "warning",
+		className: cn("gap-x-3 border-warning/45 bg-warning/10 px-4 py-3 [&>svg]:text-warning!", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(TriangleAlertIcon, {}), children]
+	});
+}
+//#endregion
+export { WarningAlert };