@lerianstudio/sindarian-ui 1.2.0 → 1.3.0-beta.1

package/dist/enterprise/status-badge/index.js

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_STATUS_VARIANTS = void 0;
+exports.StatusBadge = StatusBadge;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * StatusBadge maps a status/severity string to a Badge variant and a humanized
+ * label. Unknown values fall back to a neutral "outline" badge with a
+ * title-cased label, so new server enum values never render raw or crash.
+ *
+ * The variant map is injectable (`variantMap`) and shallow-merges over a
+ * generic lifecycle default, so apps extend it with their own domain statuses
+ * without forking the component.
+ *
+ * INVARIANT (WCAG 1.4.1): the bare badge is color-only — the variant tint is the
+ * sole carrier of severity. That is a non-color-cue failure for a severity badge
+ * (a CRITICAL risk band must read as critical in grayscale and to a color-blind
+ * reader). `withIcon` opts the badge into the non-color canon: a leading
+ * severity GLYPH plus an sr-only severity word, with the tint as reinforcement
+ * only. It is opt-in so existing color-only usage is unaffected.
+ *
+ * Pure display: no directive, no interactivity. A leading lucide glyph is
+ * server-safe, so the component stays RSC-safe for the consuming Next.js app.
+ */
+const lucide_react_1 = require("lucide-react");
+const badge_1 = require("../../components/ui/badge");
+const utils_1 = require("../../lib/utils");
+/**
+ * Generic lifecycle defaults — extend per-app via the `variantMap` prop.
+ *
+ * The KEYS are the frozen legacy contract (apps merge their own domain statuses
+ * into this map). The VALUES are sindarian-ui Badge variants: sindarian-ui is
+ * senior, so the legacy `muted`/`warning` variants resolve to sindarian-ui's
+ * `inactive`/`alert`.
+ */
+exports.DEFAULT_STATUS_VARIANTS = {
+    DRAFT: 'inactive',
+    ACTIVE: 'success',
+    ENABLED: 'success',
+    INACTIVE: 'inactive',
+    DISABLED: 'inactive',
+    PAUSED: 'alert',
+    ARCHIVED: 'inactive',
+    QUEUED: 'secondary',
+    PENDING: 'alert',
+    PROCESSING: 'alert',
+    RUNNING: 'alert',
+    COMPLETE: 'success',
+    COMPLETED: 'success',
+    SUCCEEDED: 'success',
+    SUCCESS: 'success',
+    FAILED: 'destructive',
+    ERROR: 'destructive',
+    CANCELED: 'inactive',
+    CANCELLED: 'inactive',
+    EXPIRED: 'inactive',
+    OPEN: 'alert',
+    RESOLVED: 'success',
+    REJECTED: 'destructive',
+    CONFIRMED: 'success',
+    LOW: 'inactive',
+    MEDIUM: 'secondary',
+    HIGH: 'alert',
+    CRITICAL: 'destructive'
+};
+/**
+ * Variant → non-color severity cue: a distinct glyph + an sr-only severity word.
+ * This is the load-bearing cue when `withIcon` is set; the Badge's own tint only
+ * reinforces it, so severity survives grayscale and color-vision deficiency.
+ *
+ * A constant lookup keyed on the Badge variant — the variant already encodes the
+ * severity, so the glyph follows the variant rather than re-deriving severity
+ * from the raw status. `secondary` is a neutral bucket (e.g. MEDIUM/QUEUED) and,
+ * like `inactive`, carries the calm dash glyph. The pure color-carrier variants
+ * and the unknown `outline` fallback have no severity semantics, so they render
+ * no glyph.
+ */
+const SEVERITY_CUE = {
+    success: { Icon: lucide_react_1.Check, word: 'OK' },
+    alert: { Icon: lucide_react_1.TriangleAlert, word: 'Warning' },
+    destructive: { Icon: lucide_react_1.OctagonX, word: 'Critical' },
+    inactive: { Icon: lucide_react_1.Minus, word: 'Neutral' },
+    secondary: { Icon: lucide_react_1.Minus, word: 'Neutral' }
+};
+/**
+ * Merge a caller's map over the defaults, upper-casing its KEYS.
+ *
+ * Lookup has always upper-cased the incoming `status`, but sindarian-x merged
+ * `variantMap` verbatim — so `{ reconciled: 'success' }` could never match and
+ * fell through to the neutral `outline` badge, silently. That was an unstated
+ * requirement rather than a design choice: lender's own call sites work around
+ * it by hand (`variantMap={{ [reason.toUpperCase()]: 'destructive' }}`).
+ * Normalising here is strictly additive — already-uppercase keys are unchanged.
+ */
+function mergeVariants(variantMap) {
+    if (!variantMap)
+        return exports.DEFAULT_STATUS_VARIANTS;
+    const merged = { ...exports.DEFAULT_STATUS_VARIANTS };
+    for (const [key, variant] of Object.entries(variantMap)) {
+        merged[key.toUpperCase()] = variant;
+    }
+    return merged;
+}
+function humanize(value) {
+    return value
+        .toLowerCase()
+        .split(/[_\s]+/)
+        .map((w) => (w[0] ? w[0].toUpperCase() + w.slice(1) : w))
+        .join(' ');
+}
+function StatusBadge({ status, label, variantMap, withIcon = false, unknownLabel = 'Unknown', className }) {
+    if (!status) {
+        return ((0, jsx_runtime_1.jsx)(badge_1.Badge, { variant: "outline", className: (0, utils_1.cn)('text-muted-foreground', className), children: label ?? unknownLabel }));
+    }
+    const variant = mergeVariants(variantMap)[status.toUpperCase()] ?? 'outline';
+    // The glyph follows the resolved variant; an unknown/non-severity variant has
+    // no cue, so the badge gracefully renders label-only even with withIcon set.
+    const cue = withIcon ? SEVERITY_CUE[variant] : undefined;
+    return ((0, jsx_runtime_1.jsxs)(badge_1.Badge, { variant: variant, className: (0, utils_1.cn)('gap-1', className), children: [cue ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(cue.Icon, { "aria-hidden": true, className: "size-3.5 shrink-0" }), (0, jsx_runtime_1.jsxs)("span", { className: "sr-only", children: [cue.word, ": "] })] })) : null, label ?? humanize(status)] }));
+}

package/dist/enterprise/use-is-mobile.d.ts

@@ -0,0 +1,20 @@
+/** The one breakpoint the hook subscribes at. Exported so its tests can bind to
+ *  it instead of re-stating the number. */
+export declare const MOBILE_BREAKPOINT = 768;
+/**
+ * True while the viewport is narrower than the 768px mobile breakpoint.
+ *
+ * Always false on the FIRST render, server and client alike, so a narrow
+ * viewport can never produce a hydration mismatch. The correction lands in a
+ * `useEffect`, which runs AFTER the browser paints: on a narrow viewport the
+ * first painted frame therefore shows the desktop branch and the mobile branch
+ * appears on the next frame. That one frame is the deliberate price of
+ * hydration safety — a layout effect would remove it but would also change the
+ * render timing every existing consumer is built on.
+ *
+ * Every reading comes from the media query itself rather than a mix of
+ * `matchMedia` and `window.innerWidth`, so the initial value and the change
+ * events can never disagree at the breakpoint boundary.
+ */
+export declare function useIsMobile(): boolean;
+//# sourceMappingURL=use-is-mobile.d.ts.map

package/dist/enterprise/use-is-mobile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-is-mobile.d.ts","sourceRoot":"","sources":["../../src/enterprise/use-is-mobile.ts"],"names":[],"mappings":"AAIA;2CAC2C;AAC3C,eAAO,MAAM,iBAAiB,MAAM,CAAA;AAEpC;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,YAY1B"}

package/dist/enterprise/use-is-mobile.js

@@ -0,0 +1,68 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MOBILE_BREAKPOINT = void 0;
+exports.useIsMobile = useIsMobile;
+const React = __importStar(require("react"));
+/** The one breakpoint the hook subscribes at. Exported so its tests can bind to
+ *  it instead of re-stating the number. */
+exports.MOBILE_BREAKPOINT = 768;
+/**
+ * True while the viewport is narrower than the 768px mobile breakpoint.
+ *
+ * Always false on the FIRST render, server and client alike, so a narrow
+ * viewport can never produce a hydration mismatch. The correction lands in a
+ * `useEffect`, which runs AFTER the browser paints: on a narrow viewport the
+ * first painted frame therefore shows the desktop branch and the mobile branch
+ * appears on the next frame. That one frame is the deliberate price of
+ * hydration safety — a layout effect would remove it but would also change the
+ * render timing every existing consumer is built on.
+ *
+ * Every reading comes from the media query itself rather than a mix of
+ * `matchMedia` and `window.innerWidth`, so the initial value and the change
+ * events can never disagree at the breakpoint boundary.
+ */
+function useIsMobile() {
+    const [isMobile, setIsMobile] = React.useState(false);
+    React.useEffect(() => {
+        const mql = window.matchMedia(`(max-width: ${exports.MOBILE_BREAKPOINT - 1}px)`);
+        const onChange = () => setIsMobile(mql.matches);
+        onChange();
+        mql.addEventListener('change', onChange);
+        return () => mql.removeEventListener('change', onChange);
+    }, []);
+    return isMobile;
+}

package/dist/enterprise/virtualized-table/index.d.ts

@@ -0,0 +1,26 @@
+import { type ColumnDef } from '@tanstack/react-table';
+export type VirtualizedTableProps<TData> = {
+    /** Same shape as DataTable: standard TanStack `ColumnDef<T>`. */
+    columns: ColumnDef<TData, unknown>[];
+    /** The full dataset, already in memory. Only the visible window renders. */
+    data: TData[];
+    /**
+     * Row height in px, fed to the virtualizer's `estimateSize`. Rows are
+     * rendered at this FIXED height — content taller than `rowHeight` will clip
+     * (cells use `truncate`). Use only for flat, single-line rows; this is not a
+     * variable-height table. Defaults to 40.
+     */
+    rowHeight?: number;
+    /**
+     * Max height of the scroll viewport (the inner overflow container, NOT the
+     * outer wrapper). A `number` is treated as px; a `string` is used verbatim
+     * (e.g. `'60vh'`). Defaults to `480` → `480px`.
+     */
+    maxHeight?: number | string;
+    /** Accessible name announced for the viewport while it is scrollable. */
+    scrollAreaLabel?: string;
+    /** Applied to the outer wrapper (the scroll container's parent). */
+    className?: string;
+};
+export declare function VirtualizedTable<TData>({ columns, data, rowHeight, maxHeight, scrollAreaLabel, className }: VirtualizedTableProps<TData>): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/enterprise/virtualized-table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/enterprise/virtualized-table/index.tsx"],"names":[],"mappings":"AA+BA,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,uBAAuB,CAAA;AAK9B,MAAM,MAAM,qBAAqB,CAAC,KAAK,IAAI;IACzC,iEAAiE;IACjE,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,CAAA;IACpC,4EAA4E;IAC5E,IAAI,EAAE,KAAK,EAAE,CAAA;IACb;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,yEAAyE;IACzE,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAKD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,EACtC,OAAO,EACP,IAAI,EACJ,SAAc,EACd,SAAe,EACf,eAAyC,EACzC,SAAS,EACV,EAAE,qBAAqB,CAAC,KAAK,CAAC,+BAiM9B"}

package/dist/enterprise/virtualized-table/index.js

@@ -0,0 +1,114 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VirtualizedTable = VirtualizedTable;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * VirtualizedTable — a windowed table for very large, flat datasets.
+ *
+ * Mirrors DataTable's column/data API (standard TanStack `ColumnDef<T>`, cells
+ * receive the row's `original`), so screens reuse the exact same column
+ * definitions. The difference is the rendering strategy: where DataTable
+ * renders every row, VirtualizedTable renders only the rows inside (and just
+ * past) the scroll viewport via `@tanstack/react-virtual`. Tens of thousands of
+ * rows stay scroll-smooth because the DOM only ever holds the visible window.
+ *
+ * Layout is div-based (role="table"/"row"/"cell"), not a real `<table>`:
+ * absolute positioning by `virtualItem.start` is incompatible with table
+ * layout, so a windowed table cannot use `<tbody>`. The header is a sibling
+ * above the scroll region: it stays put by layout (it simply sits above an
+ * overflow box), not via `position: sticky`. Inside the scroll container an
+ * inner spacer sized to `getTotalSize()` reserves the full scroll height, and
+ * each virtual row is absolutely positioned within that spacer.
+ *
+ * Rows are fixed-height (= `rowHeight`): cell content taller than `rowHeight`
+ * will clip — cells use `truncate`. This component is for flat, single-line
+ * datasets only; it does NOT measure rows, so it is not suitable for
+ * variable-height content.
+ *
+ * This is deliberately leaner than DataTable: no pagination, selection,
+ * keyboard nav, loading or empty affordances — it is the right tool only when
+ * the whole dataset is already in memory and the row count is the problem.
+ * For server-paged lists, reach for DataTable + CursorPager instead.
+ */
+const react_1 = require("react");
+const react_table_1 = require("@tanstack/react-table");
+const react_virtual_1 = require("@tanstack/react-virtual");
+const utils_1 = require("../../lib/utils");
+/** Rows rendered just outside the viewport to keep fast scrolls smooth. */
+const OVERSCAN = 8;
+function VirtualizedTable({ columns, data, rowHeight = 40, maxHeight = 480, scrollAreaLabel = 'Scrollable table rows', className }) {
+    const scrollRef = (0, react_1.useRef)(null);
+    const [isScrollable, setIsScrollable] = (0, react_1.useState)(false);
+    // A number is px; a string is used verbatim (e.g. '60vh').
+    const viewportMaxHeight = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;
+    const table = (0, react_table_1.useReactTable)({
+        data,
+        columns,
+        getCoreRowModel: (0, react_table_1.getCoreRowModel)()
+    });
+    const rows = table.getRowModel().rows;
+    // Grouped columns (a ColumnDef with nested `columns`) render one header row
+    // per depth level, so the header is not always a single row.
+    const headerGroups = table.getHeaderGroups();
+    const headerRowCount = headerGroups.length;
+    // The table's real column geometry is its LEAF columns: a grouped ColumnDef
+    // contributes one spanning header cell but no column of its own, so counting
+    // top-level defs both under-reports aria-colcount and misplaces every
+    // aria-colindex to its right.
+    const leafColumns = table.getVisibleLeafColumns();
+    const leafPosition = new Map(leafColumns.map((column, i) => [column.id, i]));
+    const virtualizer = (0, react_virtual_1.useVirtualizer)({
+        count: rows.length,
+        getScrollElement: () => scrollRef.current,
+        estimateSize: () => rowHeight,
+        overscan: OVERSCAN
+    });
+    const virtualRows = virtualizer.getVirtualItems();
+    const totalSize = virtualizer.getTotalSize();
+    // `estimateSize` is read through a closure the virtualizer caches per item, so
+    // changing rowHeight leaves every already-measured row at its old size until
+    // the cache is dropped explicitly.
+    (0, react_1.useEffect)(() => {
+        virtualizer.measure();
+    }, [rowHeight, virtualizer]);
+    (0, react_1.useEffect)(() => {
+        const viewport = scrollRef.current;
+        if (!viewport)
+            return;
+        const updateScrollability = () => {
+            const nextIsScrollable = viewport.scrollHeight > viewport.clientHeight ||
+                viewport.scrollWidth > viewport.clientWidth;
+            setIsScrollable((current) => current === nextIsScrollable ? current : nextIsScrollable);
+        };
+        updateScrollability();
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(updateScrollability);
+        observer.observe(viewport);
+        const content = viewport.firstElementChild;
+        if (content)
+            observer.observe(content);
+        return () => observer.disconnect();
+    }, [totalSize, viewportMaxHeight]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('border-border bg-card text-card-foreground rounded-lg border', className), children: (0, jsx_runtime_1.jsxs)("div", { role: "table", "aria-rowcount": rows.length + headerRowCount, "aria-colcount": leafColumns.length, children: [(0, jsx_runtime_1.jsx)("div", { role: "rowgroup", className: "bg-card z-10", children: headerGroups.map((headerGroup, groupIndex) => ((0, jsx_runtime_1.jsx)("div", { role: "row", "aria-rowindex": groupIndex + 1, className: "border-border flex border-b", children: headerGroup.headers.map((header) => {
+                            // Anchor the cell on its leftmost leaf column, so a spanning
+                            // group reports the column it actually starts at rather than
+                            // its position among its siblings.
+                            const firstLeaf = header.column.getLeafColumns()[0];
+                            const start = leafPosition.get(firstLeaf?.id ?? header.column.id);
+                            return ((0, jsx_runtime_1.jsx)("div", { role: "columnheader", "aria-colindex": (start ?? 0) + 1, "aria-colspan": header.colSpan > 1 ? header.colSpan : undefined, style: { flex: `${header.colSpan} 1 0%` }, 
+                                // Header height is independent of rowHeight: pinning it to a
+                                // small rowHeight (32) clipped the uppercase label against its
+                                // own padding. Padding sizes it; min-h keeps a stable rule.
+                                className: "text-muted-foreground min-h-10 px-4 py-2.5 text-left text-xs font-medium tracking-wide uppercase", children: header.isPlaceholder
+                                    ? null
+                                    : (0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()) }, header.id));
+                        }) }, headerGroup.id))) }), (0, jsx_runtime_1.jsx)("div", { ref: scrollRef, role: "rowgroup", "data-testid": "virtualized-table-viewport", "aria-label": isScrollable ? scrollAreaLabel : undefined, tabIndex: isScrollable ? 0 : undefined, className: "focus-visible:ring-ring relative overflow-auto focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none", style: { maxHeight: viewportMaxHeight }, children: (0, jsx_runtime_1.jsx)("div", { role: "presentation", className: "relative w-full", style: { height: totalSize }, children: virtualRows.map((virtualItem) => {
+                            const row = rows[virtualItem.index];
+                            return ((0, jsx_runtime_1.jsx)("div", { role: "row", "aria-rowindex": virtualItem.index + headerRowCount + 1, "data-index": virtualItem.index, className: "border-border absolute left-0 flex w-full items-center border-b text-sm", style: {
+                                    height: virtualItem.size,
+                                    transform: `translateY(${virtualItem.start}px)`
+                                }, children: row.getVisibleCells().map((cell, i) => ((0, jsx_runtime_1.jsx)("div", { role: "cell", "aria-colindex": i + 1, className: "flex-1 truncate px-4", children: (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id));
+                        }) }) })] }) }));
+}

package/dist/esm/charts/chart.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Recharts wrapper family (shadcn canon).
+ *
+ * `ChartContainer` takes a `ChartConfig` keyed by series name and injects one
+ * `--color-<key>` CSS variable per series, scoped to that chart instance and
+ * emitted twice — once for light, once under `.dark` — so a chart re-colors
+ * with the theme without a re-render. Recharts series then reference
+ * `var(--color-<key>)`.
+ *
+ * Series colors come from the design tokens: pass `color: 'var(--color-chart-1)'`
+ * (the Tailwind `@theme` name, already wrapped in `hsl()`), never the raw
+ * `var(--chart-1)` triple, which is not a usable color value on its own.
+ */
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+import type { TooltipValueType } from 'recharts';
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+type TooltipNameType = number | string;
+export type ChartConfig = Record<string, {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+} & ({
+    color?: string;
+    theme?: never;
+} | {
+    color?: never;
+    theme: Record<keyof typeof THEMES, string>;
+})>;
+declare function ChartContainer({ id, className, children, config, ariaLabel, initialDimension, ...props }: React.ComponentProps<'div'> & {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];
+    /**
+     * Accessible name for the chart. A non-empty string applies
+     * `role="img"` + `aria-label`; `false` marks the chart purely decorative
+     * with `aria-hidden`. `undefined` is treated as no name (no a11y attrs).
+     */
+    ariaLabel?: string | false;
+    initialDimension?: {
+        width: number;
+        height: number;
+    };
+}): React.JSX.Element;
+declare const ChartStyle: ({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}) => React.JSX.Element | null;
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<'div'> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: 'line' | 'dot' | 'dashed';
+    nameKey?: string;
+    labelKey?: string;
+} & Omit<RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>, 'accessibilityLayer'>): React.JSX.Element | null;
+declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey }: React.ComponentProps<'div'> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+} & RechartsPrimitive.DefaultLegendContentProps): React.JSX.Element | null;
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle };
+//# sourceMappingURL=chart.d.ts.map

package/dist/esm/charts/chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../../src/charts/chart.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,iBAAiB,MAAM,UAAU,CAAA;AAC7C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAKhD,QAAA,MAAM,MAAM;;;CAAwC,CAAA;AAqCpD,KAAK,eAAe,GAAG,MAAM,GAAG,MAAM,CAAA;AAEtC,MAAM,MAAM,WAAW,GAAG,MAAM,CAC9B,MAAM,EACN;IACE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC3B,GAAG,CACA;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GACjC;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC,MAAM,OAAO,MAAM,EAAE,MAAM,CAAC,CAAA;CAAE,CAChE,CACF,CAAA;AAkBD,iBAAS,cAAc,CAAC,EACtB,EAAE,EACF,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,EACT,gBAAoC,EACpC,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,MAAM,EAAE,WAAW,CAAA;IACnB,QAAQ,EAAE,KAAK,CAAC,cAAc,CAC5B,OAAO,iBAAiB,CAAC,mBAAmB,CAC7C,CAAC,UAAU,CAAC,CAAA;IACb;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;IAC1B,gBAAgB,CAAC,EAAE;QACjB,KAAK,EAAE,MAAM,CAAA;QACb,MAAM,EAAE,MAAM,CAAA;KACf,CAAA;CACF,qBAoCA;AAED,QAAA,MAAM,UAAU,GAAI,gBAAgB;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,WAAW,CAAA;CAAE,6BAqCtE,CAAA;AAED,QAAA,MAAM,YAAY,kCAA4B,CAAA;AAE9C,iBAAS,mBAAmB,CAAC,EAC3B,MAAM,EACN,OAAO,EACP,SAAS,EACT,SAAiB,EACjB,SAAiB,EACjB,aAAqB,EACrB,KAAK,EACL,cAAc,EACd,cAAc,EACd,SAAS,EACT,KAAK,EACL,OAAO,EACP,QAAQ,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,OAAO,CAAC,GACvD,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAA;IACrC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,GAAG,IAAI,CACN,iBAAiB,CAAC,0BAA0B,CAC1C,gBAAgB,EAChB,eAAe,CAChB,EACD,oBAAoB,CACrB,4BA6HF;AAED,QAAA,MAAM,WAAW,sGAA2B,CAAA;AAE5C,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,QAAgB,EAChB,OAAO,EACP,aAAwB,EACxB,OAAO,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,GAAG,iBAAiB,CAAC,yBAAyB,4BA4C9C;AAuCD,OAAO,EACL,cAAc,EACd,YAAY,EACZ,mBAAmB,EACnB,WAAW,EACX,kBAAkB,EAClB,UAAU,EACX,CAAA"}

package/dist/esm/charts/chart.js

@@ -0,0 +1,191 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Recharts wrapper family (shadcn canon).
+ *
+ * `ChartContainer` takes a `ChartConfig` keyed by series name and injects one
+ * `--color-<key>` CSS variable per series, scoped to that chart instance and
+ * emitted twice — once for light, once under `.dark` — so a chart re-colors
+ * with the theme without a re-render. Recharts series then reference
+ * `var(--color-<key>)`.
+ *
+ * Series colors come from the design tokens: pass `color: 'var(--color-chart-1)'`
+ * (the Tailwind `@theme` name, already wrapped in `hsl()`), never the raw
+ * `var(--chart-1)` triple, which is not a usable color value on its own.
+ */
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+import { cn } from '../lib/utils.js';
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: '', dark: '.dark' };
+/**
+ * ChartStyle writes a stylesheet through `dangerouslySetInnerHTML`, so every
+ * interpolated value is an injection sink: `</style>` inside a config key, id,
+ * or color would close the element and let arbitrary markup follow. Config
+ * often carries server data (series names from an API), so these are validated
+ * rather than trusted.
+ *
+ * CSS_IDENT — the chart id, which lands in an UNQUOTED attribute selector and
+ * so may not lead with a digit.
+ * CONFIG_KEY — series keys, which become `--color-<key>` custom-property names.
+ * Custom properties DO allow a leading digit, so a numeric series (a year, say)
+ * must pass; only CSS syntax is excluded.
+ */
+const CSS_IDENT = /^[A-Za-z_][\w-]*$/;
+const CONFIG_KEY = /^[\w-]+$/;
+/**
+ * A deliberately conservative character allowlist covering hex, named, `var(…)`,
+ * `rgb()/hsl()/color-mix()` and slash-alpha forms. It admits no `<`, `>`, `{`,
+ * `}`, `;`, `:`, quote, backslash, `@`, `*` or `!`, which rules out tag-closing,
+ * rule termination, comments, at-rules and `!important`.
+ *
+ * `url(…)` is rejected separately: the allowlist alone would pass an unquoted
+ * `url(//evil.test/pixel.png)` — no colon or quote required — which the browser
+ * would fetch, leaking the viewer's IP and referrer to a third party. The
+ * whitespace tolerance covers `url (…)` variants.
+ */
+const CSS_COLOR = /^[\w\s#%.,()/-]+$/;
+const CSS_URL = /url\s*\(/i;
+function isSafeColor(color) {
+    return CSS_COLOR.test(color) && !CSS_URL.test(color);
+}
+const INITIAL_DIMENSION = { width: 320, height: 200 };
+const ChartContext = React.createContext(null);
+function useChart() {
+    const context = React.useContext(ChartContext);
+    if (!context) {
+        throw new Error('useChart must be used within a <ChartContainer />');
+    }
+    return context;
+}
+function ChartContainer({ id, className, children, config, ariaLabel, initialDimension = INITIAL_DIMENSION, ...props }) {
+    const uniqueId = React.useId();
+    // chartId lands in BOTH a DOM attribute and a CSS attribute selector, so the
+    // two must agree and neither may carry syntax — strip to [\w-] once, here.
+    const chartId = `chart-${(id ?? uniqueId).replace(/[^\w-]/g, '')}`;
+    // Resolve the accessibility contract for the container element:
+    // named → expose as an image with that name; false → hide from a11y tree.
+    const a11yProps = typeof ariaLabel === 'string' && ariaLabel.length > 0
+        ? { role: 'img', 'aria-label': ariaLabel }
+        : ariaLabel === false
+            ? { 'aria-hidden': true }
+            : {};
+    return (_jsx(ChartContext.Provider, { value: { config }, children: _jsxs("div", { "data-slot": "chart", "data-chart": chartId, ...a11yProps, className: cn("[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className), ...props, children: [_jsx(ChartStyle, { id: chartId, config: config }), _jsx(RechartsPrimitive.ResponsiveContainer, { initialDimension: initialDimension, children: children })] }) }));
+}
+const ChartStyle = ({ id, config }) => {
+    // An id that cannot be written as a CSS identifier cannot be scoped safely,
+    // and an unscoped rule would leak across every chart on the page.
+    if (!CSS_IDENT.test(id)) {
+        return null;
+    }
+    const colorConfig = Object.entries(config).filter(([key, config]) => CONFIG_KEY.test(key) && (config.theme ?? config.color));
+    if (!colorConfig.length) {
+        return null;
+    }
+    return (_jsx("style", { dangerouslySetInnerHTML: {
+            __html: Object.entries(THEMES)
+                .map(([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+                .map(([key, itemConfig]) => {
+                const color = itemConfig.theme?.[theme] ??
+                    itemConfig.color;
+                return color && isSafeColor(color) ? `  --color-${key}: ${color};` : null;
+            })
+                .join('\n')}
+}
+`)
+                .join('\n')
+        } }));
+};
+const ChartTooltip = RechartsPrimitive.Tooltip;
+function ChartTooltipContent({ active, payload, className, indicator = 'dot', hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey }) {
+    const { config } = useChart();
+    const tooltipLabel = React.useMemo(() => {
+        if (hideLabel || !payload?.length) {
+            return null;
+        }
+        const [item] = payload;
+        const key = `${labelKey ?? item?.dataKey ?? item?.name ?? 'value'}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        const value = !labelKey && typeof label === 'string'
+            ? (config[label]?.label ?? label)
+            : itemConfig?.label;
+        if (labelFormatter) {
+            return (_jsx("div", { className: cn('font-medium', labelClassName), children: labelFormatter(value, payload) }));
+        }
+        if (!value) {
+            return null;
+        }
+        return _jsx("div", { className: cn('font-medium', labelClassName), children: value });
+    }, [
+        label,
+        labelFormatter,
+        payload,
+        hideLabel,
+        labelClassName,
+        config,
+        labelKey
+    ]);
+    if (!active || !payload?.length) {
+        return null;
+    }
+    const nestLabel = payload.length === 1 && indicator !== 'dot';
+    return (_jsxs("div", { className: cn('border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl', className), children: [!nestLabel ? tooltipLabel : null, _jsx("div", { className: "grid gap-1.5", children: payload
+                    .filter((item) => item.type !== 'none')
+                    .map((item, index) => {
+                    const key = `${nameKey ?? item.name ?? item.dataKey ?? 'value'}`;
+                    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+                    const indicatorColor = color ?? item.payload?.fill ?? item.color;
+                    return (_jsx("div", { className: cn('[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5', indicator === 'dot' && 'items-center'), children: formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (_jsxs(_Fragment, { children: [itemConfig?.icon ? (_jsx(itemConfig.icon, {})) : (!hideIndicator && (_jsx("div", { className: cn('shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)', {
+                                        'h-2.5 w-2.5': indicator === 'dot',
+                                        'w-1': indicator === 'line',
+                                        'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',
+                                        'my-0.5': nestLabel && indicator === 'dashed'
+                                    }), style: {
+                                        '--color-bg': indicatorColor,
+                                        '--color-border': indicatorColor
+                                    } }))), _jsxs("div", { className: cn('flex flex-1 justify-between leading-none', nestLabel ? 'items-end' : 'items-center'), children: [_jsxs("div", { className: "grid gap-1.5", children: [nestLabel ? tooltipLabel : null, _jsx("span", { className: "text-muted-foreground", children: itemConfig?.label ?? item.name })] }), item.value != null && (_jsx("span", { className: "text-foreground font-mono font-medium tabular-nums", children: typeof item.value === 'number'
+                                                ? item.value.toLocaleString()
+                                                : String(item.value) }))] })] })) }, index));
+                }) })] }));
+}
+const ChartLegend = RechartsPrimitive.Legend;
+function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey }) {
+    const { config } = useChart();
+    if (!payload?.length) {
+        return null;
+    }
+    return (_jsx("div", { className: cn('flex items-center justify-center gap-4', verticalAlign === 'top' ? 'pb-3' : 'pt-3', className), children: payload
+            .filter((item) => item.type !== 'none')
+            .map((item, index) => {
+            const key = `${nameKey ?? item.dataKey ?? 'value'}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            return (_jsxs("div", { className: cn('[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3'), children: [itemConfig?.icon && !hideIcon ? (_jsx(itemConfig.icon, {})) : (_jsx("div", { className: "h-2 w-2 shrink-0 rounded-[2px]", style: {
+                            backgroundColor: item.color
+                        } })), itemConfig?.label] }, index));
+        }) }));
+}
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(config, payload, key) {
+    if (typeof payload !== 'object' || payload === null) {
+        return undefined;
+    }
+    const payloadPayload = 'payload' in payload &&
+        typeof payload.payload === 'object' &&
+        payload.payload !== null
+        ? payload.payload
+        : undefined;
+    let configLabelKey = key;
+    if (key in payload &&
+        typeof payload[key] === 'string') {
+        configLabelKey = payload[key];
+    }
+    else if (payloadPayload &&
+        key in payloadPayload &&
+        typeof payloadPayload[key] === 'string') {
+        configLabelKey = payloadPayload[key];
+    }
+    return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle };

package/dist/esm/charts/index.d.ts

@@ -0,0 +1,3 @@
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent } from './chart.js';
+export type { ChartConfig } from './chart.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/charts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/charts/index.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,cAAc,EACd,YAAY,EACZ,mBAAmB,EACnB,WAAW,EACX,kBAAkB,EACnB,MAAM,SAAS,CAAA;AAChB,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA"}

package/dist/esm/charts/index.js

@@ -0,0 +1,3 @@
+// Owned by lane theme-toasts-charts — see docs/plans/2026-08-26-sindarian-x-retirement/
+// ChartStyle stays internal: it is an implementation detail of ChartContainer.
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent } from './chart.js';

package/dist/esm/components/breadcrumb/get-breadcrumb-paths.d.ts

@@ -0,0 +1,10 @@
+import { BreadcrumbPath } from './index.js';
+type BreadcrumbPathTabs = (BreadcrumbPath & {
+    active?: () => boolean;
+})[];
+export declare function getBreadcrumbPaths(paths: BreadcrumbPathTabs): {
+    name: string;
+    href?: string;
+}[];
+export {};
+//# sourceMappingURL=get-breadcrumb-paths.d.ts.map