@alfadocs/ui-kit 0.69.0 → 0.71.0

package/dist/components/tooth-scheme/tooth-data.d.ts

@@ -10,6 +10,35 @@ export interface ToothState {
     notes?: string;
 }
 export type ToothChart = Record<FdiId, ToothState>;
+/** Radiograph (x-ray) type. `'periapical'` is the intraoral *endorale*. */
+export type RadiographKind = 'periapical' | 'bitewing' | 'panoramic' | 'other';
+/**
+ * A single radiograph attached to a tooth. Image urls are opaque,
+ * consumer-hosted strings, interpolated into an SVG `<image href>` / `<img src>`
+ * (which cannot execute scripts) — never bundled and never runtime-validated.
+ * Real radiographs are PHI: stories and demos must use synthetic placeholders.
+ */
+export interface Radiograph {
+    /** Stable id — keys the archive list and the imperative open call. */
+    id: string;
+    /** Full-resolution image url. */
+    url: string;
+    /** Optional smaller preview url (falls back to `url`). */
+    thumbnailUrl?: string;
+    /** ISO acquisition date (`YYYY-MM-DD`). */
+    date?: string;
+    /** Free-text clinical note. */
+    note?: string;
+    /** Radiograph type. Default `'periapical'` (an *endorale*). */
+    kind?: RadiographKind;
+    /**
+     * Accessible description for the FULL-SIZE image, consumed by a downstream
+     * viewer (e.g. the Dental Imaging Hub archive `<img>`). The chart's slot
+     * render is decorative (`aria-hidden` — the tooth's accessible name carries
+     * the radiograph count), so `alt` is intentionally not read by the chart.
+     */
+    alt?: string;
+}
 export type Anatomy = 'incisor' | 'canine' | 'premolar' | 'molar';
 export type Arch = 'upper' | 'lower';
 export type Side = 'right' | 'left';
@@ -141,11 +170,93 @@ export interface PositionedTooth {
  * is preserved: the patient's right sits on the viewer's left in both
  * arches, regardless of document direction.
  */
-export declare function layoutTeeth(dentition: Dentition, slotHeight?: number): {
+export declare function layoutTeeth(dentition: Dentition, slotHeight?: number, options?: {
+    arch?: Arch;
+}): {
     teeth: PositionedTooth[];
     width: number;
     height: number;
 };
+export type SpecialElementKind = 'quadrant' | 'sextant' | 'arch' | 'general';
+export interface SpecialElement {
+    /**
+     * Stable id — a chart key and the value emitted by `onSelect`. Permanent:
+     * `Q1`–`Q4`, `S1`–`S6`, `AS`, `AI`, `general`. Primary mirrors with an `m`
+     * prefix: `mQ1`…, `mS1`…, `mAS`, `mAI`, `mGeneral`.
+     */
+    id: string;
+    kind: SpecialElementKind;
+    arch: Arch;
+    dentition: 'permanent' | 'primary';
+    /** i18n token under `toothScheme.special.*` for the accessible name. */
+    labelKey: 'quadrant' | 'sextant' | 'archUpper' | 'archLower' | 'general';
+    /** Interpolated into the `{{n}}` of quadrant / sextant labels (e.g. `1`). */
+    labelIndex?: number;
+    /** Short code shown in the slot, e.g. `Q1`, `S3`, `AS`, `Gen.`. */
+    code: string;
+    /**
+     * Member teeth (FDI) — informational for consumers that highlight or expand a
+     * region. Selection itself keys on `id`; the platform expands membership
+     * server-side. Sextants follow the WHO/CPITN convention.
+     */
+    teeth: FdiId[];
+    /**
+     * Column within the special-element block. Quadrant and its paired sextant
+     * share a column so they stack (Q1↕S1, Q2↕S2, AS↕S3 / S4↕Q4, S5↕Q3, S6↕AI).
+     */
+    column: number;
+    /** Row the element attaches to: side (quadrant/arch/general) or plan (sextant). */
+    row: Projection;
+}
+/** Every special element, flat — permanent then primary. */
+export declare const SPECIAL_ELEMENTS: SpecialElement[];
+/** Lookup a special element by its id (`Q1`, `mS3`, `AS`, `general`…). */
+export declare const SPECIAL_BY_ID: Record<string, SpecialElement>;
+/** True when an id names a special element rather than a tooth. */
+export declare function isSpecialElement(id: string): boolean;
+/**
+ * The special-element SLOTS that attach to a given row, ordered by column.
+ * Quadrant / arch live on the `side` row; sextants on the `plan` row. The
+ * whole-mouth `general` element is excluded — it renders as a switch beneath the
+ * chart (see `generalElement`), not as a column. Mixed dentition reuses the
+ * permanent set (the platform has no mixed view).
+ */
+export declare function specialsForRow(dentition: Dentition, arch: Arch, projection: Projection): SpecialElement[];
+/**
+ * The whole-mouth `general` element for a dentition. It is rendered as a switch
+ * beneath the chart rather than as a cramped icon column (the platform's vertical
+ * "GENERALE" glyph is illegible at column width).
+ */
+export declare function generalElement(dentition: Dentition): SpecialElement;
+/** A special-element slot placed in an SVG, to the inline-end of the teeth. */
+export interface PositionedSpecial {
+    element: SpecialElement;
+    x: number;
+    y: number;
+}
+/** Special-element slot block-size — matches a tooth slot so icons read clearly. */
+export declare const SPECIAL_SLOT_WIDTH = 36;
+/**
+ * Resolve the photoreal icon URL for a special element, or `null` when it has
+ * none (sextants are label-only — the platform ships no sextant icon). Icons
+ * live in the `global/` sibling of the `teeth/` render folder; quadrants and
+ * arches reuse their code as the file stem (`Q1`, `AS`, …), general resolves to
+ * `general`, and primary elements reuse the permanent art.
+ */
+export declare function specialIconUrl(element: SpecialElement, assetBaseUrl: string): string | null;
+/** Gap between the last tooth and the first special-element column. */
+export declare const SPECIAL_GAP = 8;
+/** Column pitch within the special-element block. */
+export declare const SPECIAL_PITCH: number;
+/**
+ * Place a row's special elements after the teeth (inline-end) and report the
+ * total row width. Columns are derived from `element.column`, so a quadrant and
+ * its paired sextant share an x and stack across the two rows.
+ */
+export declare function layoutSpecials(specials: SpecialElement[], teethWidth: number): {
+    specials: PositionedSpecial[];
+    width: number;
+};
 export declare function labelFor(id: FdiId, numbering: Numbering): string;
 export declare function emptyChart(): ToothChart;
 export declare function chartFromConditions(conditions: Partial<Record<FdiId, ToothCondition[]>>): ToothChart;

package/dist/components/tooth-scheme/tooth-scheme.agent.d.ts

@@ -1,6 +1,6 @@
 import type { AgentAdapter } from '../../agent/types';
 import type { ToothSchemeHandle } from './tooth-scheme';
-import type { Surface, ToothCondition } from './tooth-data';
+import type { Radiograph, Surface, ToothCondition } from './tooth-data';
 export declare const toothSchemeAgent: AgentAdapter<ToothSchemeHandle>;
-export type { Surface, ToothCondition };
+export type { Radiograph, Surface, ToothCondition };
 //# sourceMappingURL=tooth-scheme.agent.d.ts.map

package/dist/components/tooth-scheme/tooth-scheme.d.ts

@@ -1,4 +1,4 @@
-import { PERMANENT_TEETH, PRIMARY_TEETH, type ViewMode, type Dentition, type FdiId, type Numbering, type Surface, type ToothChart, type ToothCondition, type ToothMode } from './tooth-data';
+import { PERMANENT_TEETH, PRIMARY_TEETH, type Arch, type ViewMode, type Dentition, type FdiId, type Numbering, type Radiograph, type Surface, type ToothChart, type ToothCondition, type ToothMode } from './tooth-data';
 export interface ToothSchemeProps {
     /** Opaque instance id — emitted as `data-component-id` for the agent registry. */
     id?: string;
@@ -10,21 +10,59 @@ export interface ToothSchemeProps {
     mode?: ToothMode;
     /**
      * `'side'` shows the facial view (whole-tooth findings); `'plan'` shows the
-     * occlusal view (per-surface caries / fillings); `'both'` stacks the side
-     * chart above an interactive occlusal companion that shares the chart data.
-     * Default `'side'`.
+     * occlusal view (per-surface caries / fillings); `'both'` lays the two facial
+     * rows on the outside with the two occlusal rows between them (upper side →
+     * upper occlusal → lower occlusal → lower side), bracketed by tooth numbers
+     * above and below. Default `'side'`.
      */
     projection?: ViewMode;
+    /**
+     * Show the selectable special-element slots (quadrants, sextants, arches,
+     * whole-mouth) to the inline-end of each arch row. When unset, they show in
+     * `both` view and hide in the single side / plan views; pass `true` / `false`
+     * to force it. They share the chart data and emit `onSelect` like a tooth.
+     */
+    specialElements?: boolean;
     /** Controlled chart state — the full `Record<FdiId, ToothState>`. */
     value?: ToothChart;
     /** Uncontrolled initial chart state. */
     defaultValue?: ToothChart;
     /** Fired whenever the chart changes — always emits FDI ids. */
     onChange?: (next: ToothChart) => void;
-    /** Fired when a tooth is focused or clicked. */
+    /**
+     * Fired when a tooth OR special element is focused / clicked. Special
+     * elements emit their id (`Q1`, `S3`, `AS`, `general`, …).
+     */
     onSelect?: (toothId: FdiId) => void;
     /** Shortcut for pre-populating conditions: `{ '16': ['caries'], '36': ['filled'] }`. */
     conditions?: Partial<Record<FdiId, ToothCondition[]>>;
+    /**
+     * Per-tooth radiographs (x-rays / *endorali*), keyed by FDI id — mirrors the
+     * `conditions` shape. Teeth carrying at least one radiograph get a corner
+     * count badge; in `radiographDisplay="thumbnail"` the most-recent film also
+     * fills the slot. Image urls are opaque / consumer-hosted — never bundle real
+     * scans (PHI).
+     */
+    radiographs?: Partial<Record<FdiId, Radiograph[]>>;
+    /**
+     * How a tooth carrying radiographs is marked. `'badge'` (default) keeps the
+     * photoreal tooth render and adds a corner count badge; `'thumbnail'` shows
+     * the most-recent radiograph inset in the slot (still badged).
+     */
+    radiographDisplay?: 'badge' | 'thumbnail';
+    /**
+     * Fired when a tooth's radiograph archive is opened — i.e. a tooth is
+     * activated (click / Enter / Space) in `mode="display"`. Wire this to a
+     * Sheet/Dialog that manages the tooth's films. Setting this makes display-mode
+     * teeth focusable buttons; it is mutually exclusive with interactive
+     * findings-editing (`mode="interactive"` / `activeCondition`).
+     *
+     * EVERY tooth becomes an open-archive button — including unfilmed teeth, so the
+     * user can add the first film to an empty tooth (matching a real imaging hub).
+     * Filmed teeth are distinguished by the radiograph count folded into their
+     * accessible name and tooltip.
+     */
+    onOpenRadiographs?: (toothId: FdiId) => void;
     /**
      * The finding a tooth-click applies in interactive mode (the selected
      * tool in a Findings / "Stato dentale" panel). Clicking a tooth toggles
@@ -49,17 +87,46 @@ export interface ToothSchemeProps {
     legend?: boolean;
     /**
      * Render a built-in options affordance: a gear button that opens a popover
-     * letting the END USER toggle the legend and switch dentition / numbering /
-     * projection. Opt-in — when on, those four become user-overridable (seeded
-     * from the props); when off, the props drive the chart directly. Default
-     * `false`.
+     * letting the END USER toggle the legend + special elements and switch
+     * dentition / numbering / projection. Opt-in — when on, those become
+     * user-overridable (seeded from the props); when off, the props drive the
+     * chart directly. Default `false`.
      */
     controls?: boolean;
+    /**
+     * Where to render the `controls` gear. `undefined` (default) renders it
+     * inline at the top-end of the chart. Pass a DOM element (e.g. a ref'd slot in
+     * your card header) to portal the gear + its popover into that slot instead,
+     * so the chart options can sit on the title line. While the slot is mounting
+     * the prop will be `null`; the gear renders nothing until the element exists,
+     * so it never flashes inline first. No effect unless `controls` is on.
+     */
+    controlsContainer?: HTMLElement | null;
     /** Accessible label override for the chart region. */
     ariaLabel?: string;
     /** Extra class names on the wrapper. */
     className?: string;
 }
+/** Number-label placement for a sub-chart. */
+type NumbersPosition = 'between' | 'above' | 'below' | 'none';
+/**
+ * Internal-only props (prefixed `_`) used when the component composes itself
+ * into the four-row `both` view — never part of the public API.
+ */
+interface ToothSchemeInternalProps {
+    /** Render a single arch (the `both` view stacks one arch per sub-chart). */
+    _arch?: Arch;
+    /** Number-label placement for this sub-chart. */
+    _numbersPosition?: NumbersPosition;
+    /** Render only the `<svg>` (no region wrapper, controls, legend, or chrome). */
+    _inner?: boolean;
+    /**
+     * Force the SVG content width (the `both` view shares one width across all
+     * four sub-charts so they scale identically and stay column-aligned —
+     * otherwise rows with fewer special-element columns would scale up larger).
+     */
+    _contentWidth?: number;
+}
 export interface ToothSchemeHandle {
     /** Programmatically focus a tooth by FDI id. */
     focusTooth: (id: FdiId) => void;
@@ -75,9 +142,15 @@ export interface ToothSchemeHandle {
     removeFinding: (id: FdiId, condition: ToothCondition) => void;
     /** Clear every finding from a tooth. */
     clearTooth: (id: FdiId) => void;
+    /** Read the radiographs attached to one tooth (empty array if none). */
+    getRadiographs: (id: FdiId) => Radiograph[];
+    /** Read the FDI ids of every tooth carrying at least one radiograph. */
+    teethWithRadiographs: () => FdiId[];
+    /** Focus a tooth and open its radiograph archive (fires `onOpenRadiographs`). */
+    openRadiographs: (id: FdiId) => void;
 }
 declare const rootVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const ToothScheme: import("react").ForwardRefExoticComponent<ToothSchemeProps & import("react").RefAttributes<ToothSchemeHandle>>;
+export declare const ToothScheme: import("react").ForwardRefExoticComponent<ToothSchemeProps & ToothSchemeInternalProps & import("react").RefAttributes<ToothSchemeHandle>>;
 export { rootVariants as toothSchemeVariants, PERMANENT_TEETH, PRIMARY_TEETH };
-export type { Dentition, FdiId, Numbering, ToothChart, ToothCondition, ToothMode, ToothState, } from './tooth-data';
+export type { Dentition, FdiId, Numbering, SpecialElement, ToothChart, ToothCondition, ToothMode, ToothState, } from './tooth-data';
 //# sourceMappingURL=tooth-scheme.d.ts.map

package/dist/components/transaction-chip/index.js

@@ -1,4 +1,4 @@
-import { T as r } from "../../_chunks/transaction-chip-DK84XCBU.js";
+import { T as r } from "../../_chunks/transaction-chip-CscoQbxF.js";
 export {
   r as TransactionChip
 };

package/dist/components/transaction-chip/transaction-chip.d.ts

@@ -1,8 +1,8 @@
 import { type HTMLAttributes } from 'react';
 import { type VariantProps } from 'class-variance-authority';
-export type TransactionState = 'debt' | 'credit' | 'to-invoice' | 'to-deliver' | 'settled';
+export type TransactionState = 'debt' | 'credit' | 'to-invoice' | 'to-deliver' | 'settled' | 'discount';
 declare const chipVariants: (props?: ({
-    state?: "debt" | "credit" | "to-invoice" | "to-deliver" | "settled" | null | undefined;
+    state?: "debt" | "credit" | "to-invoice" | "to-deliver" | "settled" | "discount" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     bold?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/transcript-panel/index.js

@@ -1,4 +1,4 @@
-import { T as t, t as n } from "../../_chunks/transcript-panel-3THQX6nJ.js";
+import { T as t, t as n } from "../../_chunks/transcript-panel-CHGHHHdT.js";
 export {
   t as TranscriptPanel,
   n as transcriptPanelAgent

package/dist/components/transcript-panel/transcript-panel.d.ts

@@ -18,7 +18,7 @@ export interface TranscriptPanelHandle {
     /** Copy the turn's text to the clipboard. */
     copyTurn: (id: string) => Promise<void> | void;
 }
-export interface TranscriptPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, VariantProps<typeof rootVariants> {
+export interface TranscriptPanelProps extends Omit<HTMLAttributes<HTMLElement>, 'children'>, VariantProps<typeof rootVariants> {
     lines: TranscriptLine[];
     /** Current playback time in seconds — drives the active line highlight. */
     currentTime?: number;
@@ -29,6 +29,6 @@ export interface TranscriptPanelProps extends Omit<HTMLAttributes<HTMLDivElement
 declare const rootVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const TranscriptPanel: import("react").ForwardRefExoticComponent<TranscriptPanelProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TranscriptPanel: import("react").ForwardRefExoticComponent<TranscriptPanelProps & import("react").RefAttributes<HTMLElement>>;
 export {};
 //# sourceMappingURL=transcript-panel.d.ts.map

package/dist/components/unit-converter/index.js

@@ -1,4 +1,4 @@
-import { C as r, U as t, a as U, b as e, c as n } from "../../_chunks/unit-converter-YEpD9evj.js";
+import { C as r, U as t, a as U, b as e, c as n } from "../../_chunks/unit-converter-CwlZbfdn.js";
 export {
   r as CATEGORIES,
   t as UNITS,

package/dist/components/warning-stack/index.js

@@ -1,4 +1,4 @@
-import { W as n } from "../../_chunks/warning-stack-BsgaEbL8.js";
+import { W as n } from "../../_chunks/warning-stack--sTrrBDA.js";
 export {
   n as WarningStack
 };

package/dist/components/warning-stack/warning-stack.d.ts

@@ -11,7 +11,6 @@ export interface WarningStackItem {
     dismissible?: boolean;
 }
 declare const stackVariants: (props?: ({
-    size?: "sm" | "md" | null | undefined;
     stretch?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface WarningStackProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role' | 'title'>, VariantProps<typeof stackVariants> {
@@ -26,17 +25,21 @@ export interface WarningStackProps extends Omit<HTMLAttributes<HTMLDivElement>,
     title?: ReactNode;
     /** Optional short description rendered under the title. */
     description?: ReactNode;
-    /** Cap on visible items before a "Show N more" toggle appears. */
+    /** Cap on visible items before a "Show N more" toggle appears. Defaults to
+     *  `2`; pass a larger number (or `Infinity`) to show more before collapsing. */
     maxVisible?: number;
     /** Whether the stack starts collapsed when items exceed `maxVisible`. */
     defaultCollapsed?: boolean;
     /** Fires when a dismissible item's close control is activated. */
     onDismiss?: (item: WarningStackItem) => void;
-    /** When provided, a close control is rendered at the top inline-end of the
-     *  header that clears the whole stack at once. Activating it dismisses every
-     *  currently-visible notice (folding the region away) and then fires this
-     *  callback so the consumer can mirror the bulk dismissal into its store.
-     *  Opt-in: omit it when the stack carries notices that must not be bulk-cleared. */
+    /** Whether the whole-stack close control is shown at the header's inline-end.
+     *  Defaults to `true` — the tray is closable. Set `false` for stacks that
+     *  carry notices which must not be bulk-cleared (e.g. hard compliance blocks). */
+    closable?: boolean;
+    /** Fires when the whole-stack close control is activated, after every
+     *  currently-visible notice has been dismissed (folding the region away).
+     *  Optional — the fold happens internally regardless; supply this only to
+     *  mirror the bulk dismissal into the consumer's own store. */
     onDismissAll?: () => void;
     /** Accessible label for the whole-stack close control. Defaults to the
      *  localised "Dismiss all notices". */

package/dist/components/workflow/index.js

@@ -1,4 +1,4 @@
-import { C as r, W as e, a as s, b as d, c as w, i as t, l as f, m as l, r as i, w as k, d as n, e as A, f as C } from "../../_chunks/workflow-map-Bdam9pGp.js";
+import { C as r, W as e, a as s, b as d, c as w, i as t, l as f, m as l, r as i, w as k, d as n, e as A, f as C } from "../../_chunks/workflow-map-M8MBBHQm.js";
 export {
   r as CORE_PATIENT_FIELDS,
   e as WorkflowCard,

package/dist/hooks/index.d.ts

@@ -16,6 +16,7 @@ export { useFocusTrap, type UseFocusTrapOptions } from './use-focus-trap';
 export { useDirection, useDocumentDirection, type Direction, } from './use-direction';
 export { usePersistentState } from './use-persistent-state';
 export { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
+export { useOverflowCollapse, type UseOverflowCollapseReturn, } from './use-overflow-collapse';
 export { useWebOtp, type UseWebOtpOptions } from './use-web-otp';
 export { useEdgeResize, type UseEdgeResizeOptions, type UseEdgeResizeReturn, type EdgeResizeSeparatorProps, } from './use-edge-resize';
 export { useSigningSession, type SigningField, type SigningFieldBase, type UseSigningSessionReturn, } from './use-signing-session';

package/dist/hooks/index.js

@@ -1,7 +1,7 @@
-import { u as v } from "../_chunks/use-prefers-reduced-motion-BMwIQRjB.js";
+import { u as A } from "../_chunks/use-prefers-reduced-motion-BMwIQRjB.js";
 import { u as D } from "../_chunks/use-media-query-CcAx5SMM.js";
-import { u as g, a as _ } from "../_chunks/use-signing-session-CyOZWinp.js";
-import { u as I } from "../_chunks/use-count-up-BLLetaZ8.js";
+import { u as g, a as w } from "../_chunks/use-signing-session-CyOZWinp.js";
+import { u as _ } from "../_chunks/use-count-up-BLLetaZ8.js";
 import { u as R } from "../_chunks/use-locale-BkCIHujH.js";
 import { A as K, T as H, a as M, r as Y, t as q, u as B } from "../_chunks/use-theme-CAuo6EYT.js";
 import { u as P } from "../_chunks/use-controllable-state-BiY4xTzM.js";
@@ -9,12 +9,13 @@ import { u as V } from "../_chunks/use-copy-to-clipboard-Cyfc_dlv.js";
 import { u as z } from "../_chunks/use-debounced-callback-BisrB-Fq.js";
 import { useState as x, useRef as b, useEffect as E } from "react";
 import { u as W, a as J } from "../_chunks/use-direction-Dp8h70PP.js";
-import { u as X } from "../_chunks/use-persistent-state-i23OWy6G.js";
+import { u as X } from "../_chunks/use-persistent-state-nZwZAnE9.js";
 import { u as $ } from "../_chunks/use-isomorphic-layout-effect-BGfaCOP1.js";
-import { u as te } from "../_chunks/use-web-otp-D_utzp6S.js";
-import { u as oe } from "../_chunks/use-edge-resize-ZnGG7gyO.js";
-import { u as ne } from "../_chunks/use-countdown-Yd6ts0_a.js";
-function h(e, o) {
+import { u as te } from "../_chunks/use-overflow-collapse-BIOzKbni.js";
+import { u as oe } from "../_chunks/use-web-otp-D_utzp6S.js";
+import { u as ne } from "../_chunks/use-edge-resize-ZnGG7gyO.js";
+import { u as ae } from "../_chunks/use-countdown-Yd6ts0_a.js";
+function C(e, o) {
   const [t, i] = x(e), u = b(null);
   return E(() => {
     if (o <= 0) {
@@ -51,7 +52,7 @@ function p(e) {
     return !0;
   });
 }
-function C(e, o = {}) {
+function h(e, o = {}) {
   const { enabled: t = !0, autoFocus: i = !0, restoreFocus: u = !0 } = o, s = b(null);
   E(() => {
     if (!t) return;
@@ -61,7 +62,7 @@ function C(e, o = {}) {
       const n = p(a)[0] ?? (a.tabIndex >= -1 ? a : null);
       n == null || n.focus();
     }
-    function l(r) {
+    function f(r) {
       if (r.key !== "Tab") return;
       const n = e.current;
       if (!n) return;
@@ -70,11 +71,11 @@ function C(e, o = {}) {
         r.preventDefault();
         return;
       }
-      const d = c[0], m = c[c.length - 1], f = document.activeElement;
-      r.shiftKey ? (f === d || !n.contains(f)) && (r.preventDefault(), m.focus()) : (f === m || !n.contains(f)) && (r.preventDefault(), d.focus());
+      const m = c[0], d = c[c.length - 1], l = document.activeElement;
+      r.shiftKey ? (l === m || !n.contains(l)) && (r.preventDefault(), d.focus()) : (l === d || !n.contains(l)) && (r.preventDefault(), m.focus());
     }
-    return a.addEventListener("keydown", l), () => {
-      if (a.removeEventListener("keydown", l), u && s.current) {
+    return a.addEventListener("keydown", f), () => {
+      if (a.removeEventListener("keydown", f), u && s.current) {
         const r = s.current;
         requestAnimationFrame(() => {
           r.isConnected && r.focus();
@@ -91,22 +92,23 @@ export {
   q as themeClassList,
   P as useControllableState,
   V as useCopyToClipboard,
-  I as useCountUp,
-  ne as useCountdown,
+  _ as useCountUp,
+  ae as useCountdown,
   z as useDebouncedCallback,
-  h as useDebouncedValue,
+  C as useDebouncedValue,
   W as useDirection,
   J as useDocumentDirection,
-  oe as useEdgeResize,
-  C as useFocusTrap,
+  ne as useEdgeResize,
+  h as useFocusTrap,
   $ as useIsomorphicLayoutEffect,
   R as useLocale,
   D as useMediaQuery,
+  te as useOverflowCollapse,
   X as usePersistentState,
-  v as usePrefersReducedMotion,
+  A as usePrefersReducedMotion,
   g as useScrollToFirstError,
-  _ as useSigningSession,
+  w as useSigningSession,
   B as useTheme,
-  te as useWebOtp
+  oe as useWebOtp
 };
 //# sourceMappingURL=index.js.map

package/dist/hooks/use-clamp-overflow.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Reports whether a CSS line-clamped element is actually overflowing — i.e.
+ * its content is taller than the clamped box (`scrollHeight > clientHeight`).
+ *
+ * Used to drive "show the affordance only when the text is really cut":
+ * a tooltip on a clamped title, a "Read more" toggle on a clamped body.
+ * Because line-clamp keeps the full text in the DOM, this is purely a
+ * sighted-user convenience — assistive tech reads the full text regardless.
+ *
+ * Re-measures on element resize (a narrower column wraps more, so a title
+ * that fit at full width may clip in a two-column grid). `enabled` lets the
+ * caller switch measurement off — e.g. while a description is expanded, there
+ * is nothing to measure.
+ */
+export declare function useClampOverflow<T extends HTMLElement>(enabled: boolean): {
+    ref: import("react").RefObject<T | null>;
+    isOverflowing: boolean;
+};
+//# sourceMappingURL=use-clamp-overflow.d.ts.map

package/dist/hooks/use-edge-resize.d.ts

@@ -1,6 +1,6 @@
 /**
  * Pixel-based edge-resize for fixed-width chrome surfaces (the Sidebar's
- * inline-end edge, the AiToolsRail panel's inner edge). Mirrors the
+ * inline-end edge, the ToolRail panel's inner edge). Mirrors the
  * separator semantics of `Resizable`'s Handle — `role="separator"`,
  * arrow keys with RTL flip, Shift for coarse steps, Home/End to the
  * extremes, Enter or double-click to reset — but sizes a single target
@@ -19,7 +19,7 @@ export interface UseEdgeResizeOptions {
     /**
      * Which logical edge of the target carries the handle. `inline-end`
      * for a start-docked surface (Sidebar); `inline-start` for an
-     * end-docked one (AiToolsRail panel with `side="end"`).
+     * end-docked one (ToolRail panel with `side="end"`).
      */
     edge: 'inline-start' | 'inline-end';
     /** The element being resized. The width override lands on its style. */

package/dist/hooks/use-overflow-collapse.d.ts

@@ -0,0 +1,46 @@
+import { type RefObject } from 'react';
+export interface UseOverflowCollapseReturn<C extends HTMLElement, N extends HTMLElement> {
+    /**
+     * Attach to the element whose inner width caps the content — the available
+     * space. It must stay mounted in BOTH the expanded and the collapsed render
+     * (it is the only thing left to measure once the content is swapped out).
+     */
+    containerRef: RefObject<C | null>;
+    /**
+     * Attach (as `ref={contentRef}`) to the natural-width content — its
+     * `scrollWidth` is the space it needs. A callback ref, so the hook re-measures
+     * the instant the content mounts or unmounts. Present only while expanded; the
+     * hook remembers its last width so the collapsed branch keeps a threshold.
+     */
+    contentRef: (node: N | null) => void;
+    /** The content does not fit the container — swap to the compact form. */
+    isOverflowing: boolean;
+}
+/**
+ * Reports whether a row of content is wider than the box it lives in, so a
+ * caller can swap an overflowing strip for a compact form (a horizontal nav for
+ * a dropdown, a toolbar for a "more" menu). Unlike a viewport media query, this
+ * reacts to the CONTAINER — the same strip collapses in a narrow column on a
+ * wide screen (e.g. a page squeezed between two sidebars) as on a small one.
+ *
+ * The catch with collapse-on-overflow is reversibility: once the content is
+ * swapped out there is nothing left to measure, so a naive check can never
+ * un-collapse. This remembers the content's width from the last frame it was
+ * mounted (`naturalWidthRef`) — captured at the moment it overflowed, that is
+ * its true min-content width — and keeps comparing it against the still-mounted
+ * container, so the strip restores the instant the container grows back.
+ *
+ * The content is tracked as STATE via a callback ref (not a plain ref), so the
+ * measurement effect re-subscribes whenever the content mounts/unmounts — for
+ * ANY reason, not just an overflow-driven flip. A caller may collapse on a
+ * second signal this hook can't see (a viewport media query *as well as*
+ * overflow); keying re-subscription on the actual content node, rather than on
+ * `isOverflowing`, keeps the observer attached across those transitions too.
+ * `enabled` switches it off — e.g. when the host never collapses this strip —
+ * clearing the flag so it renders expanded.
+ *
+ * Purely a layout decision; the content swap it drives stays fully in the DOM
+ * and keyboard-reachable in either form, so assistive tech is unaffected.
+ */
+export declare function useOverflowCollapse<C extends HTMLElement, N extends HTMLElement>(enabled?: boolean): UseOverflowCollapseReturn<C, N>;
+//# sourceMappingURL=use-overflow-collapse.d.ts.map

package/dist/hooks/use-persistent-state.d.ts

@@ -11,6 +11,12 @@
  *
  * SSR-safe and quota-safe (swallows serialise / storage errors so a
  * disabled-storage or quota-exceeded write never throws into render).
+ *
+ * Pass `{ disabled: true }` to make it behave like a plain `useState` seeded
+ * from `initial` — no read, no write. Use this when the value is controlled
+ * elsewhere (e.g. a controlled prop), so the hook never touches `localStorage`.
  */
-export declare function usePersistentState<T>(storageKey: string, initial: T | (() => T)): [T, (value: T | ((prev: T) => T)) => void];
+export declare function usePersistentState<T>(storageKey: string, initial: T | (() => T), options?: {
+    disabled?: boolean;
+}): [T, (value: T | ((prev: T) => T)) => void];
 //# sourceMappingURL=use-persistent-state.d.ts.map

package/dist/hooks/use-scroll-overflow.d.ts

@@ -0,0 +1,36 @@
+import { type RefObject } from 'react';
+export interface UseScrollOverflowReturn<T extends HTMLElement> {
+    /** Attach to the horizontally-scrollable element (the `overflow-x-auto` box). */
+    ref: RefObject<T | null>;
+    /** Content is hidden past the inline-START edge (scrolled away from the start). */
+    canScrollStart: boolean;
+    /** Content is hidden past the inline-END edge (more to reveal toward the end). */
+    canScrollEnd: boolean;
+    /**
+     * Scroll by ~one viewport toward the inline start (`-1`) or end (`+1`),
+     * smoothly unless the user prefers reduced motion. Direction-agnostic: works
+     * in both LTR and RTL.
+     */
+    scrollByPage: (direction: -1 | 1) => void;
+}
+/**
+ * Reports whether a horizontally-scrollable element has hidden content at its
+ * inline-start / inline-end edges, and exposes a paged scroll action — the
+ * plumbing behind a scroll strip's edge affordances (fade + chevron buttons).
+ *
+ * Direction-agnostic: distance-from-start is read as `Math.abs(scrollLeft)`,
+ * which is correct in both LTR (`0…max`) and modern RTL (`0…-max`), so the two
+ * edges are reported on the right logical side without branching. `scrollByPage`
+ * flips its physical sign from the element's computed `direction`.
+ *
+ * Re-measures on element resize AND on content-size change (a tab added past the
+ * fold widens the content without changing the container) by observing both the
+ * scroll box and its first child. `enabled` switches measurement off — e.g. when
+ * the host collapses the strip into a menu and there is nothing to scroll.
+ *
+ * Because the scrolled content stays in the DOM and is reachable by keyboard
+ * (focus scrolls it into view), the affordance this drives is a sighted-pointer
+ * convenience; assistive tech is unaffected.
+ */
+export declare function useScrollOverflow<T extends HTMLElement>(enabled?: boolean): UseScrollOverflowReturn<T>;
+//# sourceMappingURL=use-scroll-overflow.d.ts.map