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

package/dist/esm/domain/status-rail/index.d.ts

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+export type StatusRailItem = {
+    /** Optional stable key for dynamic (reordered/filtered) rails; falls back to index. */
+    id?: string;
+    /** Optional uppercase label rendered inline before the value. */
+    label?: ReactNode;
+    value: ReactNode;
+};
+export type StatusRailChip = {
+    /** Optional stable key for dynamic (reordered/filtered) rails; falls back to index. */
+    id?: string;
+    label: ReactNode;
+    value: ReactNode;
+    /** Escalate the chip to destructive styling when a count is in alarm. */
+    alarm?: boolean;
+};
+export type StatusRailProps = {
+    /** Foreground identity token, rendered first (e.g. context name). */
+    lead?: ReactNode;
+    /** Dot-separated mono tape items. */
+    items?: StatusRailItem[];
+    /** Right-pinned count chips. */
+    chips?: StatusRailChip[];
+    className?: string;
+};
+export declare function StatusRail({ lead, items, chips, className }: StatusRailProps): import("react").JSX.Element;
+/** Decorative dot separator — muted, so the tape reads as punctuated, not broken. */
+export declare function Dot(): import("react").JSX.Element;
+/**
+ * The live auto-refresh pulse: a success dot with a reduced-motion-gated ping
+ * ring. Place it inside a tape item value, e.g. `<><LivePulse /> Live</>`.
+ *
+ * The ring rides Tailwind's built-in `ping` keyframe under the `motion-safe:`
+ * variant (`@media (prefers-reduced-motion: no-preference)`), so a
+ * reduced-motion reader sees only the static dot — same gating as the
+ * hand-rolled `status-rail-pulse` keyframe it replaces, with no stylesheet of
+ * its own.
+ */
+export declare function LivePulse(): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/domain/status-rail/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/domain/status-rail/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,MAAM,MAAM,cAAc,GAAG;IAC3B,uFAAuF;IACvF,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,iEAAiE;IACjE,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,KAAK,EAAE,SAAS,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,uFAAuF;IACvF,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,KAAK,EAAE,SAAS,CAAA;IAChB,yEAAyE;IACzE,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,qEAAqE;IACrE,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,qCAAqC;IACrC,KAAK,CAAC,EAAE,cAAc,EAAE,CAAA;IACxB,gCAAgC;IAChC,KAAK,CAAC,EAAE,cAAc,EAAE,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAU,EACV,KAAU,EACV,SAAS,EACV,EAAE,eAAe,+BAwEjB;AAkBD,qFAAqF;AACrF,wBAAgB,GAAG,gCAMlB;AAED;;;;;;;;;GASG;AACH,wBAAgB,SAAS,gCAOxB"}

package/dist/esm/domain/status-rail/index.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * StatusRail — Row 0 of every console screen. A thin, full-width recessed strip
+ * that reads "the terminal is live": a dot-separated mono tape on the recessed
+ * page surface (`bg-body-surface`), with optional right-pinned count chips.
+ *
+ *   <StatusRail
+ *     lead={contextName}
+ *     items={[
+ *       { value: '90d' },
+ *       { label: 'Updated', value: '12:04 UTC' },
+ *       { value: <><LivePulse /> Live</> }
+ *     ]}
+ *     chips={[
+ *       { label: 'Open', value: '12' },
+ *       { label: 'Pending overdue', value: '3', alarm: true }
+ *     ]}
+ *   />
+ *
+ * The first token (`lead`) is `text-foreground font-medium`. Tape items are
+ * dot-separated; an item with a `label` renders the uppercase label inline
+ * before its value. Chips pin right via `ml-auto`; `alarm` escalates a chip to
+ * destructive.
+ */
+import { TriangleAlert } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+export function StatusRail({ lead, items = [], chips = [], className }) {
+    // ONE test, used by both the lead span and the first item's separator. Two
+    // separate tests (`lead !== undefined && lead !== null` vs `lead != null`)
+    // agreed on null/undefined and diverged on a ReactNode that RENDERS NOTHING,
+    // which produced an empty lead span while the first item still got its
+    // leading dot — the rail opened with a stray `·`. React renders BOTH booleans
+    // as nothing, so `true` is as empty as `false`; the typeof check covers the
+    // pair rather than naming one of them.
+    const hasLead = lead != null && lead !== '' && typeof lead !== 'boolean';
+    return (_jsxs("div", { className: cn(
+        // Recessed instrument strip: the page surface inside a hairline border
+        // whose top edge runs one step darker — light-from-above recession
+        // without any inner shadow.
+        'border-border border-t-foreground/10 bg-body-surface text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1.5 rounded-lg border px-4 py-2 font-mono text-xs tabular-nums', className), children: [hasLead ? (_jsx("span", { className: "text-foreground font-medium", children: lead })) : null, items.map((item, i) => (_jsx(RailFragment, { hasLead: hasLead || i > 0, children: item.label != null ? (_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "tracking-[0.08em] uppercase", children: item.label }), item.value] })) : (_jsx("span", { className: "flex items-center gap-1.5", children: item.value })) }, item.id ?? i))), chips.length ? (_jsx("span", { className: "ml-auto flex flex-wrap items-center gap-x-3 gap-y-1.5", children: chips.map((chip, i) => (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("span", { className: "tracking-[0.08em] uppercase", children: chip.label }), _jsxs("span", { className: cn(
+                            // Tiny mono token: raised a hair off the sunken tape by the
+                            // card surface + whisper shadow.
+                            'inline-flex items-center gap-1 rounded-sm border px-1.5 py-0.5 shadow-sm', chip.alarm
+                                ? 'border-destructive/40 bg-destructive/10 text-destructive'
+                                : 'border-border bg-card text-foreground'), children: [chip.alarm ? (_jsxs(_Fragment, { children: [_jsx(TriangleAlert, { "aria-hidden": true, className: "size-3" }), _jsx("span", { className: "sr-only", children: "(alarme)" })] })) : null, chip.value] })] }, chip.id ?? i))) })) : null] }));
+}
+/** A tape item preceded by a separator dot when it is not the first token. */
+function RailFragment({ children, hasLead }) {
+    return (_jsxs(_Fragment, { children: [hasLead ? _jsx(Dot, {}) : null, children] }));
+}
+/** Decorative dot separator — muted, so the tape reads as punctuated, not broken. */
+export function Dot() {
+    return (_jsx("span", { "aria-hidden": true, className: "text-muted-foreground/50", children: "\u00B7" }));
+}
+/**
+ * The live auto-refresh pulse: a success dot with a reduced-motion-gated ping
+ * ring. Place it inside a tape item value, e.g. `<><LivePulse /> Live</>`.
+ *
+ * The ring rides Tailwind's built-in `ping` keyframe under the `motion-safe:`
+ * variant (`@media (prefers-reduced-motion: no-preference)`), so a
+ * reduced-motion reader sees only the static dot — same gating as the
+ * hand-rolled `status-rail-pulse` keyframe it replaces, with no stylesheet of
+ * its own.
+ */
+export function LivePulse() {
+    return (_jsxs("span", { className: "relative flex size-2", "aria-hidden": true, children: [_jsx("span", { className: "bg-system-success/60 absolute inline-flex size-2 rounded-full motion-safe:animate-ping" }), _jsx("span", { className: "bg-system-success relative inline-flex size-2 rounded-full" })] }));
+}

package/dist/esm/domain/threshold-gauge/index.d.ts

@@ -0,0 +1,84 @@
+export type GaugeBand = 'low' | 'warn' | 'breach';
+/** higher-is-worse: value climbs into danger (warn < breach) — utilization.
+ *  lower-is-worse: value falls into danger (breach < warn) — coverage ratio. */
+export type GaugeDirection = 'higher-is-worse' | 'lower-is-worse';
+/** How the numeric readout is formatted. 'ratio' is a 0..1 share shown as a
+ *  percent; 'percent' is an already-scaled 0..100; 'count' a plain integer;
+ *  'money' an ISO-4217 amount via MoneyText. */
+export type GaugeFormat = 'percent' | 'ratio' | 'count' | 'money';
+/** Whether a value sitting exactly ON a threshold escalates.
+ *  'strict' (default) — it stays in the calmer band; escalation needs the value
+ *  strictly past the edge. 'inclusive' — being ON the edge already escalates,
+ *  for consumers whose enforcement is inclusive (a quota that blocks at
+ *  `used >= limit`: a tenant exactly at the cap is already blocked). */
+export type GaugeEdges = 'strict' | 'inclusive';
+export interface GaugeThresholds {
+    /** The warn edge — crossing it escalates low → warn. */
+    warn: number;
+    /** The breach edge — crossing it escalates to breach. */
+    breach: number;
+    /** Whether a value exactly ON a threshold escalates. Defaults to 'strict'. */
+    edges?: GaugeEdges;
+}
+export interface ThresholdGaugeProps {
+    /** The observed value, in the same unit as `min`/`max`/`warn`/`breach`. It
+     *  drives the band, the track fill and every ARIA attribute. */
+    value: number;
+    /** The figure to PRINT, when it differs from `value`. A consumer that must
+     *  keep `aria-valuenow` inside [min, max] has to clamp `value` — pass the true
+     *  (unclamped) figure here so the readout does not contradict the number the
+     *  consumer renders beside the gauge. Band and ARIA still follow `value`.
+     *  Omitted → the readout formats `value`. */
+    displayValue?: number;
+    /** Bottom of the track. Defaults to 0. */
+    min?: number;
+    /** Top of the track. */
+    max: number;
+    /** Warn edge (see `GaugeThresholds`). */
+    warn: number;
+    /** Breach edge (see `GaugeThresholds`). */
+    breach: number;
+    /** On-edge behaviour (see `GaugeEdges`). Defaults to 'strict'. */
+    edges?: GaugeEdges;
+    /** Which way is danger — mandatory, the numbers alone do not say. */
+    direction: GaugeDirection;
+    /** Numeric readout format. Defaults to 'percent'. */
+    format?: GaugeFormat;
+    /** ISO 4217 code for `format='money'`, e.g. "BRL". */
+    currency?: string;
+    /** BCP 47 locale for figure grouping/decimal marks. */
+    locale?: string;
+    /** Quiet caption above the gauge (e.g. "Utilização do limite"). */
+    label?: string;
+    /** Accessible name for the meter when no visible `label` is rendered, or when
+     *  the meter needs a fuller name than the caption. A meter with no name is
+     *  announced as a bare number, so this resolves `ariaLabel ?? label ?? the
+     *  band word`, which is never empty. Additive — existing call sites that pass
+     *  only `label` are unaffected. */
+    ariaLabel?: string;
+    /** Override the accessible band word, per band, in the consumer's own locale.
+     *  Shallow-merged over the pt-BR defaults, so `{ breach: 'Limit exceeded' }`
+     *  leaves low/warn untouched. The band word is the ONLY non-chromatic carrier
+     *  of the band (the glyph and the tint are decorative), so a consumer serving
+     *  en/es MUST be able to translate it — see WCAG 1.4.1 note above. */
+    bandLabels?: Partial<Record<GaugeBand, string>>;
+    className?: string;
+}
+/**
+ * Resolve which band a value occupies. Pure — the testable heart of the atom.
+ *
+ * STRICT edges by default: a value exactly ON a threshold stays in the CALMER
+ * band; escalation needs the value strictly past.
+ *
+ *  - higher-is-worse: `value > breach` → breach; `value > warn` → warn; else low.
+ *  - lower-is-worse:  `value < breach` → breach; `value < warn` → warn; else low.
+ *
+ * `thresholds.edges = 'inclusive'` opts into `>=` / `<=` instead, for a consumer
+ * whose enforcement is inclusive. Omitted or 'strict' → the behaviour above.
+ *
+ * Non-finite input degrades to 'low' rather than throwing — a missing reading is
+ * not, by itself, an alarm.
+ */
+export declare function gaugeBand(value: number, thresholds: GaugeThresholds, direction: GaugeDirection): GaugeBand;
+export declare function ThresholdGauge({ value, displayValue, min, max, warn, breach, edges, direction, format, currency, locale, label, ariaLabel, bandLabels, className }: ThresholdGaugeProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/domain/threshold-gauge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/domain/threshold-gauge/index.tsx"],"names":[],"mappings":"AAiDA,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,CAAA;AAEjD;gFACgF;AAChF,MAAM,MAAM,cAAc,GAAG,iBAAiB,GAAG,gBAAgB,CAAA;AAEjE;;gDAEgD;AAChD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAA;AAEjE;;;;wEAIwE;AACxE,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,WAAW,CAAA;AAE/C,MAAM,WAAW,eAAe;IAC9B,wDAAwD;IACxD,IAAI,EAAE,MAAM,CAAA;IACZ,yDAAyD;IACzD,MAAM,EAAE,MAAM,CAAA;IACd,8EAA8E;IAC9E,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB;AAED,MAAM,WAAW,mBAAmB;IAClC;oEACgE;IAChE,KAAK,EAAE,MAAM,CAAA;IACb;;;;iDAI6C;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,wBAAwB;IACxB,GAAG,EAAE,MAAM,CAAA;IACX,yCAAyC;IACzC,IAAI,EAAE,MAAM,CAAA;IACZ,2CAA2C;IAC3C,MAAM,EAAE,MAAM,CAAA;IACd,kEAAkE;IAClE,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,qEAAqE;IACrE,SAAS,EAAE,cAAc,CAAA;IACzB,qDAAqD;IACrD,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;uCAImC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;0EAIsE;IACtE,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAA;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAmCD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,MAAM,EACb,UAAU,EAAE,eAAe,EAC3B,SAAS,EAAE,cAAc,GACxB,SAAS,CAUX;AA+CD,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,YAAY,EACZ,GAAO,EACP,GAAG,EACH,IAAI,EACJ,MAAM,EACN,KAAK,EACL,SAAS,EACT,MAAkB,EAClB,QAAQ,EACR,MAAM,EACN,KAAK,EACL,SAAS,EACT,UAAU,EACV,SAAS,EACV,EAAE,mBAAmB,+BA8ErB"}

package/dist/esm/domain/threshold-gauge/index.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ThresholdGauge — where a value sits across ordered, NAMED bands.
+ *
+ * A metric is rarely interesting in isolation; what matters is which band it has
+ * crossed. A credit utilization of 95% is a breach; a liquidity coverage ratio
+ * of 95% may be perfectly calm. So a gauge that paints a smooth red→green
+ * gradient is lying by implication — it suggests a continuum where the business
+ * has hard thresholds. This atom STATES the thresholds: it resolves the current
+ * band (low / warn / breach), names it with a glyph + an sr-only word + a tint,
+ * and marks the band edges on the bar so the reader sees the line the value
+ * crossed, not a vibe.
+ *
+ *   <ThresholdGauge value={0.92} max={1} warn={0.8} breach={0.9} format="percent"
+ *     direction="higher-is-worse" label="Utilização do limite" />   // breach
+ *   <ThresholdGauge value={1.18} max={2} warn={1} breach={0.9} format="ratio"
+ *     direction="lower-is-worse" label="Índice de cobertura" />      // low (calm)
+ *
+ * DIRECTION is mandatory because the same numbers mean opposite things:
+ *  - higher-is-worse: the value climbs INTO danger (warn < breach). Utilization,
+ *    concentration, error rate.
+ *  - lower-is-worse: the value FALLS into danger (breach < warn). Coverage,
+ *    liquidity, capital adequacy.
+ *
+ * INVARIANT (strict edges by DEFAULT): a band escalation requires the value to
+ * be STRICTLY beyond the edge. A value sitting exactly ON a threshold belongs to
+ * the calmer band, not the louder one — `gaugeBand` encodes this so an on-edge
+ * utilization of exactly the breach line still reads as warn, never a surprise
+ * breach. A consumer whose own enforcement is INCLUSIVE (a quota blocking at
+ * `used >= limit`) opts out with `edges="inclusive"`, which escalates ON the
+ * edge in both directions.
+ *
+ * The current band is the load-bearing signal and it never rides on color alone
+ * (WCAG 1.4.1): a glyph leads, an sr-only word names it, the tint only
+ * reinforces. The numeric position reads via a mono `Figure`, never inferred
+ * from the bar geometry — and a consumer forced to clamp `value` to keep
+ * `aria-valuenow` in range can still print the true figure via `displayValue`.
+ *
+ * Pure display: server-safe, no directive.
+ */
+import { OctagonX, ShieldCheck, TriangleAlert } from 'lucide-react';
+import { LABEL_VOICE_CLASS } from '../../lib/typography.js';
+import { cn } from '../../lib/utils.js';
+import { Figure } from '../figure/index.js';
+import { formatCount, formatPercent, NO_VALUE } from '../format.js';
+import { MoneyText } from '../money-text/index.js';
+/** Band → glyph + tint + accessible word. The glyph and sr-only word are the
+ *  load-bearing cue; the tint only reinforces, so the band survives grayscale
+ *  and color-vision deficiency. The words are pt-BR defaults — a consumer in
+ *  another locale overrides them via the `bandLabels` prop. */
+const BAND = {
+    low: {
+        Icon: ShieldCheck,
+        tint: 'text-system-success',
+        word: 'Dentro do limite'
+    },
+    warn: {
+        Icon: TriangleAlert,
+        tint: 'text-system-alert',
+        word: 'Próximo do limite'
+    },
+    breach: {
+        Icon: OctagonX,
+        tint: 'text-destructive',
+        word: 'Limite ultrapassado'
+    }
+};
+/** Track fill tint per band — kept distinct from the glyph tint so the bar can
+ *  use the softer wash while the glyph carries the full tint. */
+const BAND_FILL = {
+    low: 'bg-system-success',
+    warn: 'bg-system-alert',
+    breach: 'bg-destructive'
+};
+/**
+ * Resolve which band a value occupies. Pure — the testable heart of the atom.
+ *
+ * STRICT edges by default: a value exactly ON a threshold stays in the CALMER
+ * band; escalation needs the value strictly past.
+ *
+ *  - higher-is-worse: `value > breach` → breach; `value > warn` → warn; else low.
+ *  - lower-is-worse:  `value < breach` → breach; `value < warn` → warn; else low.
+ *
+ * `thresholds.edges = 'inclusive'` opts into `>=` / `<=` instead, for a consumer
+ * whose enforcement is inclusive. Omitted or 'strict' → the behaviour above.
+ *
+ * Non-finite input degrades to 'low' rather than throwing — a missing reading is
+ * not, by itself, an alarm.
+ */
+export function gaugeBand(value, thresholds, direction) {
+    if (!Number.isFinite(value))
+        return 'low';
+    const { warn, breach, edges = 'strict' } = thresholds;
+    const beyond = direction === 'higher-is-worse'
+        ? (edge) => (edges === 'inclusive' ? value >= edge : value > edge)
+        : (edge) => (edges === 'inclusive' ? value <= edge : value < edge);
+    if (beyond(breach))
+        return 'breach';
+    if (beyond(warn))
+        return 'warn';
+    return 'low';
+}
+/**
+ * An empty or whitespace-only string is not a name. `??` only skips null and
+ * undefined, so `ariaLabel=""` or `bandLabels={{ breach: '' }}` won the fallback
+ * chain and produced an EMPTY accessible name — worse than the missing one it
+ * was meant to fix, because `aria-label=""` also suppresses the element's other
+ * naming routes. Normalizing to undefined lets the chain fall through properly.
+ */
+function nonEmpty(value) {
+    return value != null && value.trim() !== '' ? value : undefined;
+}
+/** Clamp a value into [min, max] then normalize to a 0..1 fraction of the
+ *  track. A zero-width track (max <= min) collapses to 0 rather than dividing by
+ *  zero. */
+function trackFraction(value, min, max) {
+    if (!Number.isFinite(value) || max <= min)
+        return 0;
+    const clamped = Math.max(min, Math.min(max, value));
+    return (clamped - min) / (max - min);
+}
+/** Format the value for the mono readout per `format`. Money routes through
+ *  MoneyText (never a hand-rolled string); the rest through the format helpers. */
+function readout(value, format, currency, locale) {
+    if (!Number.isFinite(value))
+        return NO_VALUE;
+    if (format === 'money') {
+        return (_jsx(MoneyText, { amount: value, currency: currency, signColor: false, locale: locale }));
+    }
+    if (format === 'percent')
+        return formatPercent(value, { unit: 'percent', locale });
+    if (format === 'ratio')
+        return formatPercent(value, { unit: 'ratio', locale });
+    return formatCount(value, locale);
+}
+export function ThresholdGauge({ value, displayValue, min = 0, max, warn, breach, edges, direction, format = 'percent', currency, locale, label, ariaLabel, bandLabels, className }) {
+    const band = gaugeBand(value, { warn, breach, edges }, direction);
+    const { Icon, tint } = BAND[band];
+    // The sr-only word is the band's only non-chromatic cue, so it is also the
+    // string a trilingual consumer has to translate. pt-BR default, override wins.
+    // Every rung of the naming chain is normalized: an empty override must fall
+    // through to the next source rather than win with a blank string.
+    const word = nonEmpty(bandLabels?.[band]) ?? BAND[band].word;
+    const caption = nonEmpty(label);
+    // A `role="meter"` with no accessible name is announced as a naked number.
+    // The band word is always present and always meaningful, so the meter is named
+    // even when a consumer renders the gauge without a visible caption.
+    const meterName = nonEmpty(ariaLabel) ?? caption ?? word;
+    const valuePct = trackFraction(value, min, max) * 100;
+    const warnPct = trackFraction(warn, min, max) * 100;
+    const breachPct = trackFraction(breach, min, max) * 100;
+    return (_jsxs("div", { className: cn('flex flex-col gap-2', className), children: [_jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [caption != null ? (_jsx("span", { className: LABEL_VOICE_CLASS, children: caption })) : (_jsx("span", {})), _jsxs("span", { className: cn('inline-flex items-center gap-1.5', tint), children: [_jsx(Icon, { "aria-hidden": true, className: "size-4 shrink-0" }), _jsxs("span", { className: "sr-only", children: [word, ": "] }), _jsx(Figure, { size: "row", className: tint, children: readout(displayValue ?? value, format, currency, locale) })] })] }), _jsxs("div", { role: "meter", "aria-valuenow": Number.isFinite(value) ? value : undefined, "aria-valuemin": min, "aria-valuemax": max, "aria-label": meterName, className: "border-border bg-muted relative h-2 w-full overflow-hidden rounded-full border", children: [_jsx("div", { "aria-hidden": true, className: cn('absolute inset-y-0 left-0 rounded-full', BAND_FILL[band]), style: { width: `${valuePct}%` } }), _jsx("span", { "aria-hidden": true, className: "bg-system-alert absolute inset-y-0 w-px", style: { left: `${warnPct}%` } }), _jsx("span", { "aria-hidden": true, className: "bg-destructive absolute inset-y-0 w-px", style: { left: `${breachPct}%` } })] })] }));
+}

package/dist/esm/enterprise/alert-banner/index.d.ts

@@ -0,0 +1,30 @@
+/**
+ * AlertBanner — the console's semantic message box. A rounded, hairline-bordered
+ * panel with a tinted background whose tone escalates by severity. The title
+ * carries the tone color (font-medium); the body stays foreground for
+ * readability; an optional `detail` slot renders mono diagnostic text (an error
+ * code, a failed id) below the body.
+ *
+ *   <AlertBanner tone="destructive" title="Import failed">
+ *     The file could not be parsed. No rows were ingested.
+ *   </AlertBanner>
+ *
+ * Renders `role="alert"`. Tones map to sindarian-ui's `system-*` semantic token
+ * families, so they track the active light/dark palette automatically.
+ */
+import type { ReactNode } from 'react';
+export type AlertBannerTone = 'destructive' | 'warning' | 'info' | 'success' | 'neutral';
+export type AlertBannerProps = {
+    tone?: AlertBannerTone;
+    /** Bold lead line, carries the tone color. */
+    title?: ReactNode;
+    /** Body copy (foreground, for readability). */
+    children?: ReactNode;
+    /** Optional mono diagnostic detail rendered below the body. */
+    detail?: ReactNode;
+    /** Optional leading icon (e.g. a lucide glyph), aligned to the title. */
+    icon?: ReactNode;
+    className?: string;
+};
+export declare function AlertBanner({ tone, title, children, detail, icon, className }: AlertBannerProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/enterprise/alert-banner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/alert-banner/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,MAAM,MAAM,eAAe,GACzB,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;AAoB5D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,yEAAyE;IACzE,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAgB,EAChB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,SAAS,EACV,EAAE,gBAAgB,+BAmClB"}

package/dist/esm/enterprise/alert-banner/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+/** Container tint + border per tone. The title color is applied separately so
+ *  the body copy stays high-contrast foreground. */
+const TONE_CONTAINER = {
+    destructive: 'border-system-error-border bg-system-error-surface',
+    warning: 'border-system-alert-border bg-system-alert-surface',
+    info: 'border-system-info-border bg-system-info-surface',
+    success: 'border-system-success-border bg-system-success-surface',
+    neutral: 'border-border bg-muted/50'
+};
+const TONE_TITLE = {
+    destructive: 'text-system-error-text',
+    warning: 'text-system-alert-text',
+    info: 'text-system-info-text',
+    success: 'text-system-success-text',
+    neutral: 'text-foreground'
+};
+export function AlertBanner({ tone = 'neutral', title, children, detail, icon, className }) {
+    return (_jsxs("div", { role: "alert", "data-tone": tone, className: cn('flex gap-3 rounded-md border px-4 py-3', TONE_CONTAINER[tone], className), children: [icon != null ? (_jsx("span", { className: cn('mt-0.5 shrink-0', TONE_TITLE[tone]), "aria-hidden": true, children: icon })) : null, _jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [title != null ? (_jsx("p", { className: cn('text-sm font-medium', TONE_TITLE[tone]), children: title })) : null, children != null ? (_jsx("div", { className: "text-foreground text-xs leading-relaxed", children: children })) : null, detail != null ? (_jsx("pre", { className: "text-muted-foreground overflow-x-auto font-mono text-xs break-words whitespace-pre-wrap", children: detail })) : null] })] }));
+}

package/dist/esm/enterprise/app-shell/index.d.ts

@@ -0,0 +1,61 @@
+/**
+ * AppShell — the console frame: a sidebar rail, an optional sticky header row,
+ * and a centered, scrollable content column. This is the whole screen, not a
+ * fragment, so it deliberately OWNS the SidebarProvider — the consumer drops a
+ * sindarian-ui sidebar (`SidebarRoot` + its parts) into `sidebar` and a
+ * `SidebarExpandButton` into `header`, and the collapse behavior comes free,
+ * no extra wrapper required.
+ *
+ * Landmark contract (the a11y-correct frame):
+ *   SidebarProvider
+ *     div (the shell ROW — carries `className`)
+ *       a.sr-only (skip link, if labelled)    // FIRST focusable in the document,
+ *                                             //   targets <main> — bypasses the nav
+ *       {sidebar}
+ *       div[data-slot=sidebar-inset]          // the inset COLUMN — a plain div
+ *         header (banner, if given)           // SIBLING of <main>, not nested
+ *         main#<id> tabIndex=-1               // the ONE main: skip-linkable + ref-able
+ *           div (centered content container) → {children}
+ *
+ * The skip link is the FIRST child inside the shell row — before the sidebar —
+ * so a keyboard user's very first Tab lands on it and Enter jumps past the
+ * entire nav to the content <main>. That is the whole point of WCAG 2.4.1
+ * "Bypass Blocks": a skip link placed AFTER the nav would be reached only after
+ * tabbing through every nav item, defeating its purpose. The inset column is a
+ * <div>, not a <main>, so AppShell can own the single inner <main> for the
+ * content. The page header passed via `header` becomes a top-level banner
+ * SIBLING of <main> (one banner); a PageHeader rendered inside `children` lands
+ * inside <main> and is content, not a top-level landmark.
+ *
+ * Client by construction: it calls React.useId() to wire the skip link to the
+ * content <main>, and forwards a ref to that <main> so a consumer can focus it
+ * on route change — both are client concerns, hence the "use client" directive.
+ */
+import * as React from 'react';
+export type AppShellProps = {
+    sidebar?: React.ReactNode;
+    /**
+     * App-bar CONTENT, rendered INSIDE the shell's <header> banner landmark. Pass
+     * banner content only — the sidebar trigger, a screen title, header actions.
+     *
+     * Do NOT pass an element that renders its OWN <header>/landmark (e.g.
+     * <PageHeader>, which is itself a <header>). Nesting a <header> in this banner
+     * produces a SECOND banner — a <header> is not sectioning content, so the
+     * inner one stays body-scoped — which violates WCAG's at-most-one-banner rule.
+     * Page-level title blocks (<PageHeader>) belong in `children`, where they land
+     * inside <main> and are correctly page content, not a top-level landmark.
+     */
+    header?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+    contentClassName?: string;
+    /**
+     * When set, renders a "skip to content" link as the FIRST focusable element;
+     * activating it jumps focus to the content <main>. Omit it and no skip link
+     * renders. The link/target wiring (the <main> id) is internal — generated with
+     * React.useId() so it is stable and unique without a required id prop.
+     */
+    skipToContentLabel?: string;
+};
+export declare const AppShell: React.ForwardRefExoticComponent<AppShellProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/enterprise/app-shell/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/app-shell/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,QAAQ,mFAgEpB,CAAA"}

package/dist/esm/enterprise/app-shell/index.js

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AppShell — the console frame: a sidebar rail, an optional sticky header row,
+ * and a centered, scrollable content column. This is the whole screen, not a
+ * fragment, so it deliberately OWNS the SidebarProvider — the consumer drops a
+ * sindarian-ui sidebar (`SidebarRoot` + its parts) into `sidebar` and a
+ * `SidebarExpandButton` into `header`, and the collapse behavior comes free,
+ * no extra wrapper required.
+ *
+ * Landmark contract (the a11y-correct frame):
+ *   SidebarProvider
+ *     div (the shell ROW — carries `className`)
+ *       a.sr-only (skip link, if labelled)    // FIRST focusable in the document,
+ *                                             //   targets <main> — bypasses the nav
+ *       {sidebar}
+ *       div[data-slot=sidebar-inset]          // the inset COLUMN — a plain div
+ *         header (banner, if given)           // SIBLING of <main>, not nested
+ *         main#<id> tabIndex=-1               // the ONE main: skip-linkable + ref-able
+ *           div (centered content container) → {children}
+ *
+ * The skip link is the FIRST child inside the shell row — before the sidebar —
+ * so a keyboard user's very first Tab lands on it and Enter jumps past the
+ * entire nav to the content <main>. That is the whole point of WCAG 2.4.1
+ * "Bypass Blocks": a skip link placed AFTER the nav would be reached only after
+ * tabbing through every nav item, defeating its purpose. The inset column is a
+ * <div>, not a <main>, so AppShell can own the single inner <main> for the
+ * content. The page header passed via `header` becomes a top-level banner
+ * SIBLING of <main> (one banner); a PageHeader rendered inside `children` lands
+ * inside <main> and is content, not a top-level landmark.
+ *
+ * Client by construction: it calls React.useId() to wire the skip link to the
+ * content <main>, and forwards a ref to that <main> so a consumer can focus it
+ * on route change — both are client concerns, hence the "use client" directive.
+ */
+import * as React from 'react';
+import { SidebarProvider } from '../../components/ui/sidebar/index.js';
+import { cn } from '../../lib/utils.js';
+export const AppShell = React.forwardRef(function AppShell({ sidebar, header, children, className, contentClassName, skipToContentLabel }, ref) {
+    // The content <main> id — wires the skip link to its target and gives the
+    // <main> a stable, focusable anchor. Internal: no consumer-facing id prop.
+    const mainId = React.useId();
+    // sindarian-ui's SidebarProvider is context-only (it renders no DOM and
+    // takes no className), so the shell owns the flex row itself and `className`
+    // lands on it — the same element the legacy provider's className reached.
+    return (_jsx(SidebarProvider, { children: _jsxs("div", { className: cn('flex h-svh w-full overflow-hidden', className), children: [skipToContentLabel ? (_jsx("a", { href: `#${mainId}`, className: "focus:bg-background focus:text-foreground sr-only focus:not-sr-only focus:absolute focus:z-50 focus:m-2 focus:rounded focus:px-3 focus:py-2 focus:shadow", children: skipToContentLabel })) : null, sidebar, _jsxs("div", { "data-slot": "sidebar-inset", className: "bg-background relative flex w-full min-w-0 flex-1 flex-col", children: [header ? (_jsx("header", { className: "border-border bg-background sticky top-0 z-10 flex items-center gap-3 border-b px-6 py-3", children: header })) : null, _jsx("main", { id: mainId, ref: ref, tabIndex: -1, 
+                            // min-h-0 lets this flex child shrink below its content height —
+                            // without it `flex-1` keeps min-height:auto and nothing scrolls.
+                            className: "min-h-0 flex-1 overflow-y-auto outline-none", children: _jsx("div", { className: cn('mx-auto w-full max-w-7xl px-6 py-8 lg:px-8', contentClassName), children: children }) })] })] }) }));
+});
+AppShell.displayName = 'AppShell';

package/dist/esm/enterprise/cursor-pager/index.d.ts

@@ -0,0 +1,21 @@
+export type CursorPagerProps = {
+    /** From the page envelope: more pages exist after this one. */
+    hasMore?: boolean;
+    /** From the page envelope: cursor for the next page. */
+    nextCursor?: string | null;
+    /** From the page envelope: cursor for the previous page. */
+    prevCursor?: string | null;
+    /** Called with the cursor to load (undefined => first page). */
+    onCursorChange: (cursor: string | undefined) => void;
+    /** Disable both controls (e.g. while fetching). */
+    disabled?: boolean;
+    /** Optional summary, e.g. "50 per page" or a loaded-count string. */
+    summary?: string;
+    /** Label for the previous-page control. Defaults to "Previous". */
+    previousLabel?: string;
+    /** Label for the next-page control. Defaults to "Next". */
+    nextLabel?: string;
+    className?: string;
+};
+export declare function CursorPager({ hasMore, nextCursor, prevCursor, onCursorChange, disabled, summary, previousLabel, nextLabel, className }: CursorPagerProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/enterprise/cursor-pager/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/cursor-pager/index.tsx"],"names":[],"mappings":"AAoBA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,+DAA+D;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wDAAwD;IACxD,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,4DAA4D;IAC5D,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,gEAAgE;IAChE,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAA;IACpD,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,UAAU,EACV,UAAU,EACV,cAAc,EACd,QAAgB,EAChB,OAAO,EACP,aAA0B,EAC1B,SAAkB,EAClB,SAAS,EACV,EAAE,gBAAgB,+BAmClB"}

package/dist/esm/enterprise/cursor-pager/index.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CursorPager drives the cursor-pagination envelope
+ *   { items, hasMore, nextCursor, prevCursor, limit }
+ * shared by the console's cursor-paged list endpoints (do not use it on
+ * offset-based endpoints).
+ *
+ * It is controlled: the parent owns the active cursor (the value it passes to
+ * the list hook) and reacts to `onCursorChange`. Pass the page envelope's
+ * `hasMore`, `nextCursor`, `prevCursor`. "Previous" is enabled when the page
+ * reports a `prevCursor`; "Next" when `hasMore` and a `nextCursor` exist.
+ *
+ * `onCursorChange(undefined)` requests the first page (no cursor).
+ */
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Button } from '../../components/ui/button/index.js';
+import { cn } from '../../lib/utils.js';
+export function CursorPager({ hasMore, nextCursor, prevCursor, onCursorChange, disabled = false, summary, previousLabel = 'Previous', nextLabel = 'Next', className }) {
+    const canPrev = !disabled && !!prevCursor;
+    const canNext = !disabled && !!hasMore && !!nextCursor;
+    return (_jsxs("div", { className: cn('flex items-center justify-between gap-4 pt-3', className), children: [_jsx("p", { className: "text-muted-foreground text-xs", children: summary ?? '' }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "outline", size: "small", icon: _jsx(ChevronLeft, { "aria-hidden": true }), iconPlacement: "start", disabled: !canPrev, onClick: () => onCursorChange(prevCursor ?? undefined), children: previousLabel }), _jsx(Button, { type: "button", variant: "outline", size: "small", icon: _jsx(ChevronRight, { "aria-hidden": true }), iconPlacement: "end", disabled: !canNext, onClick: () => onCursorChange(nextCursor ?? undefined), children: nextLabel })] })] }));
+}