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

package/dist/domain/section-label/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * SectionLabel — THE canonical uppercase tracked sans label of the console.
+ *
+ * Every panel heading, section title, and caption is uppercase, tracked
+ * (0.08em) muted-foreground — the recessive foil that lets the mono figures be
+ * loud. The class itself lives in `@/lib/typography` (`SECTION_LABEL_CLASS`,
+ * an alias of `LABEL_VOICE_CLASS`) and is NEVER re-stated here, so the voice
+ * cannot drift between this component and the `ui/` layer that shares it.
+ *
+ * Renders an `<h2>` by default (the ledger-sheet cell heading), but `as` lets
+ * it become a `<p>`/`<span>`/`<dt>` for captions and inline labels.
+ */
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
+export type SectionLabelProps = {
+    children: ReactNode;
+    className?: string;
+    /** Render element. Defaults to `h2` (the ledger-sheet cell heading). */
+    as?: ElementType;
+} & Omit<HTMLAttributes<HTMLElement>, 'children' | 'className'>;
+export declare function SectionLabel({ children, className, as: Tag, ...rest }: SectionLabelProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/domain/section-label/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/domain/section-label/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKnE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,wEAAwE;IACxE,EAAE,CAAC,EAAE,WAAW,CAAA;CACjB,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC,CAAA;AAE/D,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,GAAU,EACd,GAAG,IAAI,EACR,EAAE,iBAAiB,+BAUnB"}

package/dist/domain/section-label/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionLabel = SectionLabel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const typography_1 = require("../../lib/typography");
+const utils_1 = require("../../lib/utils");
+function SectionLabel({ children, className, as: Tag = 'h2', ...rest }) {
+    // The remaining element props reach the rendered tag, so a panel can point
+    // `aria-labelledby` at this heading via `id`, and tests can hang a `data-*`
+    // hook off it. Without the spread there was no way to reference the heading
+    // from its own container.
+    return ((0, jsx_runtime_1.jsx)(Tag, { className: (0, utils_1.cn)(typography_1.SECTION_LABEL_CLASS, className), ...rest, children: children }));
+}

package/dist/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/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/domain/status-rail/index.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusRail = StatusRail;
+exports.Dot = Dot;
+exports.LivePulse = LivePulse;
+const jsx_runtime_1 = require("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.
+ */
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils");
+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 ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.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 ? ((0, jsx_runtime_1.jsx)("span", { className: "text-foreground font-medium", children: lead })) : null, items.map((item, i) => ((0, jsx_runtime_1.jsx)(RailFragment, { hasLead: hasLead || i > 0, children: item.label != null ? ((0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-1.5", children: [(0, jsx_runtime_1.jsx)("span", { className: "tracking-[0.08em] uppercase", children: item.label }), item.value] })) : ((0, jsx_runtime_1.jsx)("span", { className: "flex items-center gap-1.5", children: item.value })) }, item.id ?? i))), chips.length ? ((0, jsx_runtime_1.jsx)("span", { className: "ml-auto flex flex-wrap items-center gap-x-3 gap-y-1.5", children: chips.map((chip, i) => ((0, jsx_runtime_1.jsxs)("span", { className: "inline-flex items-center gap-1.5", children: [(0, jsx_runtime_1.jsx)("span", { className: "tracking-[0.08em] uppercase", children: chip.label }), (0, jsx_runtime_1.jsxs)("span", { className: (0, utils_1.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 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.TriangleAlert, { "aria-hidden": true, className: "size-3" }), (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasLead ? (0, jsx_runtime_1.jsx)(Dot, {}) : null, children] }));
+}
+/** Decorative dot separator — muted, so the tape reads as punctuated, not broken. */
+function Dot() {
+    return ((0, jsx_runtime_1.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.
+ */
+function LivePulse() {
+    return ((0, jsx_runtime_1.jsxs)("span", { className: "relative flex size-2", "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-system-success/60 absolute inline-flex size-2 rounded-full motion-safe:animate-ping" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-system-success relative inline-flex size-2 rounded-full" })] }));
+}

package/dist/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/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/domain/threshold-gauge/index.js

@@ -0,0 +1,157 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.gaugeBand = gaugeBand;
+exports.ThresholdGauge = ThresholdGauge;
+const jsx_runtime_1 = require("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.
+ */
+const lucide_react_1 = require("lucide-react");
+const typography_1 = require("../../lib/typography");
+const utils_1 = require("../../lib/utils");
+const figure_1 = require("../figure");
+const format_1 = require("../format");
+const money_text_1 = require("../money-text");
+/** 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: lucide_react_1.ShieldCheck,
+        tint: 'text-system-success',
+        word: 'Dentro do limite'
+    },
+    warn: {
+        Icon: lucide_react_1.TriangleAlert,
+        tint: 'text-system-alert',
+        word: 'Próximo do limite'
+    },
+    breach: {
+        Icon: lucide_react_1.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.
+ */
+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 format_1.NO_VALUE;
+    if (format === 'money') {
+        return ((0, jsx_runtime_1.jsx)(money_text_1.MoneyText, { amount: value, currency: currency, signColor: false, locale: locale }));
+    }
+    if (format === 'percent')
+        return (0, format_1.formatPercent)(value, { unit: 'percent', locale });
+    if (format === 'ratio')
+        return (0, format_1.formatPercent)(value, { unit: 'ratio', locale });
+    return (0, format_1.formatCount)(value, locale);
+}
+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 ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('flex flex-col gap-2', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-baseline justify-between gap-3", children: [caption != null ? ((0, jsx_runtime_1.jsx)("span", { className: typography_1.LABEL_VOICE_CLASS, children: caption })) : ((0, jsx_runtime_1.jsx)("span", {})), (0, jsx_runtime_1.jsxs)("span", { className: (0, utils_1.cn)('inline-flex items-center gap-1.5', tint), children: [(0, jsx_runtime_1.jsx)(Icon, { "aria-hidden": true, className: "size-4 shrink-0" }), (0, jsx_runtime_1.jsxs)("span", { className: "sr-only", children: [word, ": "] }), (0, jsx_runtime_1.jsx)(figure_1.Figure, { size: "row", className: tint, children: readout(displayValue ?? value, format, currency, locale) })] })] }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("div", { "aria-hidden": true, className: (0, utils_1.cn)('absolute inset-y-0 left-0 rounded-full', BAND_FILL[band]), style: { width: `${valuePct}%` } }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": true, className: "bg-system-alert absolute inset-y-0 w-px", style: { left: `${warnPct}%` } }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": true, className: "bg-destructive absolute inset-y-0 w-px", style: { left: `${breachPct}%` } })] })] }));
+}

package/dist/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/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/enterprise/alert-banner/index.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertBanner = AlertBanner;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../lib/utils");
+/** 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'
+};
+function AlertBanner({ tone = 'neutral', title, children, detail, icon, className }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { role: "alert", "data-tone": tone, className: (0, utils_1.cn)('flex gap-3 rounded-md border px-4 py-3', TONE_CONTAINER[tone], className), children: [icon != null ? ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('mt-0.5 shrink-0', TONE_TITLE[tone]), "aria-hidden": true, children: icon })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1 space-y-1", children: [title != null ? ((0, jsx_runtime_1.jsx)("p", { className: (0, utils_1.cn)('text-sm font-medium', TONE_TITLE[tone]), children: title })) : null, children != null ? ((0, jsx_runtime_1.jsx)("div", { className: "text-foreground text-xs leading-relaxed", children: children })) : null, detail != null ? ((0, jsx_runtime_1.jsx)("pre", { className: "text-muted-foreground overflow-x-auto font-mono text-xs break-words whitespace-pre-wrap", children: detail })) : null] })] }));
+}

package/dist/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/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/enterprise/app-shell/index.js

@@ -0,0 +1,87 @@
+'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.AppShell = void 0;
+const jsx_runtime_1 = require("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.
+ */
+const React = __importStar(require("react"));
+const sidebar_1 = require("../../components/ui/sidebar");
+const utils_1 = require("../../lib/utils");
+exports.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 ((0, jsx_runtime_1.jsx)(sidebar_1.SidebarProvider, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('flex h-svh w-full overflow-hidden', className), children: [skipToContentLabel ? ((0, jsx_runtime_1.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, (0, jsx_runtime_1.jsxs)("div", { "data-slot": "sidebar-inset", className: "bg-background relative flex w-full min-w-0 flex-1 flex-col", children: [header ? ((0, jsx_runtime_1.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, (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('mx-auto w-full max-w-7xl px-6 py-8 lg:px-8', contentClassName), children: children }) })] })] }) }));
+});
+exports.AppShell.displayName = 'AppShell';