pendentive 0.1.1

package/dist/components/field/NumberField.d.ts

@@ -0,0 +1,42 @@
+import type { IconInput } from '../../svg/types';
+/** Options accepted by the `NumberField` factory. */
+export interface NumberFieldOptions {
+    /** Label rendered above the input. */
+    label?: string;
+    /** Optional icon rendered before the label. */
+    icon?: IconInput;
+    /** Minimum allowed value. */
+    min?: number;
+    /** Maximum allowed value. */
+    max?: number;
+    /** Step increment used by the native spinner arrows. Defaults to `1`. */
+    step?: number;
+    /** Controlled value. */
+    value?: number;
+    /** Uncontrolled initial value, used only if `value` is omitted. Defaults to `0`. */
+    defaultValue?: number;
+    /** Disables the input. Defaults to `false`. */
+    disabled?: boolean;
+    /** Called on every valid numeric change. */
+    onChange?: (value: number) => void;
+}
+/** The runtime control surface attached to every `NumberField` element. */
+export interface NumberFieldApi {
+    /** Returns the current numeric value. */
+    getValue: () => number;
+    /** Programmatically sets the value, clamped to `[min, max]` if provided. */
+    setValue: (value: number) => void;
+    /** Enables/disables the input. */
+    setDisabled: (disabled: boolean) => void;
+    /** Detaches the field from the DOM and its internal listener. */
+    destroy: () => void;
+}
+/** A `NumberField` is a real `HTMLDivElement` (the field wrapper) extended with `NumberFieldApi`. */
+export type NumberFieldElement = HTMLDivElement & NumberFieldApi;
+/**
+ * Creates a labeled numeric input, supporting controlled and uncontrolled usage.
+ *
+ * This component has no CSS of its own -- it's fully covered by the shared `field-base`
+ * and `text-input` blocks, so it registers those keys and nothing else.
+ */
+export declare function NumberField(options?: NumberFieldOptions): NumberFieldElement;

package/dist/components/field/TextArea.d.ts

@@ -0,0 +1,35 @@
+import type { IconInput } from '../../svg/types';
+/** Options accepted by the `TextArea` factory. */
+export interface TextAreaOptions {
+    /** Label rendered above the textarea. */
+    label?: string;
+    /** Optional icon rendered before the label. */
+    icon?: IconInput;
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Visible row count. Defaults to `3`. */
+    rows?: number;
+    /** Controlled value. */
+    value?: string;
+    /** Uncontrolled initial value, used only if `value` is omitted. */
+    defaultValue?: string;
+    /** Disables the textarea. Defaults to `false`. */
+    disabled?: boolean;
+    /** Called on every keystroke with the new value. */
+    onChange?: (value: string) => void;
+}
+/** The runtime control surface attached to every `TextArea` element. */
+export interface TextAreaApi {
+    /** Returns the current value. */
+    getValue: () => string;
+    /** Programmatically sets the value (does not trigger `onChange`). */
+    setValue: (value: string) => void;
+    /** Enables/disables the textarea. */
+    setDisabled: (disabled: boolean) => void;
+    /** Detaches the field from the DOM and its internal listener. */
+    destroy: () => void;
+}
+/** A `TextArea` is a real `HTMLDivElement` (the field wrapper) extended with `TextAreaApi`. */
+export type TextAreaElement = HTMLDivElement & TextAreaApi;
+/** Creates a labeled multi-line text input, supporting controlled and uncontrolled usage. */
+export declare function TextArea(options?: TextAreaOptions): TextAreaElement;

package/dist/components/field/TextField.d.ts

@@ -0,0 +1,39 @@
+import type { IconInput } from '../../svg/types';
+/** Options accepted by the `TextField` factory. */
+export interface TextFieldOptions {
+    /** Label rendered above the input. */
+    label?: string;
+    /** Optional icon rendered before the label. */
+    icon?: IconInput;
+    /** Native input type. Defaults to `'text'`. */
+    type?: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Controlled value. When provided together with `onChange`, you own the state. */
+    value?: string;
+    /** Uncontrolled initial value, used only if `value` is omitted. */
+    defaultValue?: string;
+    /** Disables the input. Defaults to `false`. */
+    disabled?: boolean;
+    /** Called on every keystroke with the new value. */
+    onChange?: (value: string) => void;
+    /** Called when Enter is pressed. */
+    onEnter?: (value: string) => void;
+}
+/** The runtime control surface attached to every `TextField` element. */
+export interface TextFieldApi {
+    /** Returns the current input value. */
+    getValue: () => string;
+    /** Programmatically sets the value (does not trigger `onChange`). */
+    setValue: (value: string) => void;
+    /** Enables/disables the input. */
+    setDisabled: (disabled: boolean) => void;
+    /** Focuses the underlying input. */
+    focus: () => void;
+    /** Detaches the field from the DOM and its internal listeners. */
+    destroy: () => void;
+}
+/** A `TextField` is a real `HTMLDivElement` (the field wrapper) extended with `TextFieldApi`. */
+export type TextFieldElement = HTMLDivElement & TextFieldApi;
+/** Creates a labeled single-line text input, supporting controlled and uncontrolled usage. */
+export declare function TextField(options?: TextFieldOptions): TextFieldElement;

package/dist/components/field/shared.d.ts

@@ -0,0 +1,9 @@
+/**
+ * CSS shared by every labeled field-style component (TextField, TextArea, NumberField,
+ * ColorField, ChipInput, DatePicker, Select, Combobox, Slider, RangeSlider, Switch).
+ *
+ * Every one of those calls `ensureComponentStyles('field-base', fieldBaseCss)` before its
+ * own specific CSS -- the key dedupes, so this is injected once no matter how many
+ * field-style components an app uses.
+ */
+export declare const fieldBaseCss = "\n.linteau-field { display: flex; flex-direction: column; gap: 6px; width: 100% }\n.linteau-field-row { display: flex; align-items: center; justify-content: space-between }\n.linteau-field-label { display: flex; align-items: center; gap: 6px; color: var(--linteau-foreground) }\n.linteau-field-value { color: var(--linteau-muted-foreground); font-variant-numeric: tabular-nums }\n.linteau-field-header { display: flex; justify-content: space-between; align-items: center; font-size: 12px }\n";

package/dist/components/field/textInput.css.d.ts

@@ -0,0 +1,5 @@
+/**
+ * CSS shared by every plain text-style input (TextField, TextArea, NumberField, and the
+ * text inputs inside Combobox/DatePicker). Registered under the `text-input` key.
+ */
+export declare const textInputCss = "\n.linteau-text-input, .linteau-textarea {\n  width: 100%;\n  background: var(--linteau-secondary);\n  color: var(--linteau-foreground);\n  border: 1px solid var(--linteau-border);\n  border-radius: var(--linteau-radius-sm);\n  padding: 8px 10px;\n  font-size: 12px;\n  font-family: inherit;\n  transition: border-color 120ms ease;\n}\n.linteau-text-input:focus, .linteau-textarea:focus {\n  outline: none;\n  border-color: var(--linteau-ring);\n  box-shadow: 0 0 0 2px color-mix(in oklch, var(--linteau-ring) 20%, transparent);\n}\n.linteau-text-input:disabled, .linteau-textarea:disabled { opacity: 0.5; cursor: not-allowed }\n.linteau-textarea { resize: vertical; min-height: 72px }\n";

package/dist/components/hovercard/HoverCard.d.ts

@@ -0,0 +1,35 @@
+import type { FloatingPlacement } from '../../core/overlay';
+import type { Destroyable } from '../../core/types';
+/** Options accepted by the `HoverCard` factory. */
+export interface HoverCardOptions {
+    /** The element that triggers the card on hover/focus. */
+    anchor: HTMLElement;
+    /** Initial card content -- can hold interactive elements, unlike `Tooltip`. */
+    content: HTMLElement | string;
+    /** Side of the anchor the card appears on. Defaults to `'bottom'`. */
+    placement?: FloatingPlacement;
+    /** Milliseconds to wait before showing, after hover/focus starts. Defaults to `300`. */
+    openDelay?: number;
+    /** Milliseconds to wait before hiding, after the pointer leaves both the anchor and the card. Defaults to `150`. */
+    closeDelay?: number;
+}
+/**
+ * The runtime control surface returned by `HoverCard`. Like `Tooltip`, this is a plain
+ * controller -- not an element -- since it attaches behavior to an existing anchor.
+ */
+export interface HoverCardApi extends Destroyable {
+    /** Replaces the card's content. */
+    setContent: (content: HTMLElement | string) => void;
+    /** Opens the card immediately, bypassing `openDelay`. */
+    open: () => void;
+    /** Closes the card immediately, bypassing `closeDelay`. */
+    close: () => void;
+}
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const hoverCardCss = "\n.linteau-hover-card { position: fixed; z-index: 1200; width: 280px; background: var(--linteau-card); border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-md); padding: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); font-size: 12px; color: var(--linteau-foreground) }\n";
+/**
+ * Attaches a floating rich-content card to `anchor`, shown on hover/focus with a delay in
+ * each direction. Unlike `Tooltip`, the card stays open while the pointer moves into it --
+ * so it can safely contain links, buttons, or other interactive content.
+ */
+export declare function HoverCard(options: HoverCardOptions): HoverCardApi;

package/dist/components/input/ChipInput.d.ts

@@ -0,0 +1,31 @@
+import type { IconInput } from '../../svg/types';
+/** Options accepted by the `ChipInput` factory. */
+export interface ChipInputOptions {
+    /** Label rendered above the field. */
+    label?: string;
+    /** Optional icon rendered before the label. */
+    icon?: IconInput;
+    /** Controlled list of chip values. */
+    value?: string[];
+    /** Uncontrolled initial values, used only if `value` is omitted. */
+    defaultValue?: string[];
+    /** Placeholder shown in the text input. */
+    placeholder?: string;
+    /** Called whenever a chip is added or removed. */
+    onChange?: (value: string[]) => void;
+}
+/** The runtime control surface attached to every `ChipInput` element. */
+export interface ChipInputApi {
+    /** Returns the current list of chip values. */
+    getValue: () => string[];
+    /** Programmatically replaces the chip list (does not trigger `onChange`). */
+    setValue: (value: string[]) => void;
+    /** Detaches the field from the DOM and its internal listeners. */
+    destroy: () => void;
+}
+/** A `ChipInput` is a real `HTMLDivElement` (the field wrapper) extended with `ChipInputApi`. */
+export type ChipInputElement = HTMLDivElement & ChipInputApi;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const chipInputCss = "\n.linteau-chip-field { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; background: var(--linteau-secondary); border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-sm) }\n.linteau-chip-field:focus-within { border-color: var(--linteau-ring) }\n.linteau-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--linteau-accent); color: var(--linteau-accent-foreground); border-radius: 999px; padding: 3px 8px; font-size: 11px }\n.linteau-chip-remove { background: transparent; border: none; color: inherit; cursor: pointer; display: flex; padding: 0 }\n.linteau-chip-input { flex: 1; min-width: 80px; background: transparent; border: none; color: var(--linteau-foreground); font-size: 12px; font-family: inherit; outline: none }\n";
+/** Creates a labeled tag/chip input: press Enter to add the typed text as a removable chip. */
+export declare function ChipInput(options?: ChipInputOptions): ChipInputElement;

package/dist/components/input/DatePicker.d.ts

@@ -0,0 +1,66 @@
+import type { IconInput } from '../../svg/types';
+/** Which single day of the week a calendar week starts on. `0` = Sunday, `1` = Monday. */
+export type WeekStartsOn = 0 | 1;
+/** A `from`/`to` date pair used when `mode` is `'range'`. `to` is `undefined` while the second endpoint hasn't been picked yet. */
+export interface DateRange {
+    /** The earlier bound of the range. */
+    from: Date;
+    /** The later bound of the range, or `undefined` mid-selection. */
+    to?: Date;
+}
+/** Options accepted by the `DatePicker` factory. */
+export interface DatePickerOptions {
+    /** Label rendered above the field. */
+    label?: string;
+    /** Optional icon rendered before the label. */
+    icon?: IconInput;
+    /** `'single'` picks one date; `'range'` picks a `from`/`to` pair. Defaults to `'single'`. */
+    mode?: 'single' | 'range';
+    /** Controlled selected value -- a `Date` in `'single'` mode, a `DateRange` in `'range'` mode. */
+    value?: Date | DateRange;
+    /** Uncontrolled initial value, used only if `value` is omitted. */
+    defaultValue?: Date | DateRange;
+    /** Earliest selectable date, inclusive. */
+    min?: Date;
+    /** Latest selectable date, inclusive. */
+    max?: Date;
+    /** Which day starts each calendar week. Defaults to `0` (Sunday). */
+    weekStartsOn?: WeekStartsOn;
+    /** Formats a single date for display. Defaults to `Date.prototype.toLocaleDateString`. */
+    format?: (date: Date) => string;
+    /** Placeholder shown when nothing is selected. Defaults to `'Select a date'` (or `'Select a date range'` in range mode). */
+    placeholder?: string;
+    /** Disables the whole field. Defaults to `false`. */
+    disabled?: boolean;
+    /** Shows a "Today" quick-jump button in the footer. Defaults to `true`. */
+    showTodayButton?: boolean;
+    /** Shows a "Clear" button in the footer once a value is selected. Defaults to `true`. */
+    showClearButton?: boolean;
+    /** Called whenever the selection changes (including clears, which pass `undefined`). */
+    onChange?: (value: Date | DateRange | undefined) => void;
+}
+/** The runtime control surface attached to every `DatePicker` element. */
+export interface DatePickerApi {
+    /** Returns the currently selected value, if any. */
+    getValue: () => Date | DateRange | undefined;
+    /** Programmatically sets the value (does not trigger `onChange`). */
+    setValue: (value: Date | DateRange | undefined) => void;
+    /** Opens the calendar popover. */
+    open: () => void;
+    /** Closes the calendar popover. */
+    close: () => void;
+    /** Returns whether the calendar popover is currently open. */
+    isOpen: () => boolean;
+    /** Detaches the field from the DOM and its internal listeners. */
+    destroy: () => void;
+}
+/** A `DatePicker` is a real `HTMLDivElement` (the field wrapper) extended with `DatePickerApi`. */
+export type DatePickerElement = HTMLDivElement & DatePickerApi;
+/** This component's own CSS -- the calendar popover, weekday header, range highlighting, and footer actions. Depends on `.linteau-combobox` (registered via the imported `comboboxCss`). */
+export declare const calendarCss = "\n.linteau-calendar { position: fixed; z-index: 1200; width: 280px; background: var(--linteau-card); border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-lg); padding: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) }\n.linteau-calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px }\n.linteau-calendar-nav { background: transparent; border: none; color: var(--linteau-foreground); cursor: pointer; display: flex; padding: 4px; border-radius: var(--linteau-radius-sm) }\n.linteau-calendar-nav:hover:not(:disabled) { background: var(--linteau-accent) }\n.linteau-calendar-nav:disabled { opacity: 0.35; cursor: not-allowed }\n.linteau-calendar-month { font-size: 12px; font-weight: 600 }\n.linteau-calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 2px }\n.linteau-calendar-weekday { height: 20px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: var(--linteau-muted-foreground); text-transform: uppercase }\n.linteau-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px }\n.linteau-calendar-day { height: 28px; display: flex; align-items: center; justify-content: center; font-size: 11px; border-radius: var(--linteau-radius-sm); background: transparent; border: none; color: var(--linteau-foreground); cursor: pointer; font-family: inherit }\n.linteau-calendar-day:hover:not(:disabled) { background: var(--linteau-accent) }\n.linteau-calendar-day:disabled { opacity: 0.35; cursor: not-allowed }\n.linteau-calendar-day:focus-visible { outline: 2px solid var(--linteau-ring); outline-offset: 1px }\n.linteau-calendar-day-outside { opacity: 0.35 }\n.linteau-calendar-day-selected { background: var(--linteau-primary); color: var(--linteau-primary-foreground) }\n.linteau-calendar-day-today:not(.linteau-calendar-day-selected) { box-shadow: inset 0 0 0 1px var(--linteau-ring) }\n.linteau-calendar-day-in-range { background: var(--linteau-accent); border-radius: 0 }\n.linteau-calendar-day-range-start { background: var(--linteau-primary); color: var(--linteau-primary-foreground); border-radius: var(--linteau-radius-sm) 0 0 var(--linteau-radius-sm) }\n.linteau-calendar-day-range-end { background: var(--linteau-primary); color: var(--linteau-primary-foreground); border-radius: 0 var(--linteau-radius-sm) var(--linteau-radius-sm) 0 }\n.linteau-calendar-footer { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linteau-border) }\n.linteau-calendar-footer-button { flex: 1; padding: 6px 8px; font-size: 11px; border-radius: var(--linteau-radius-sm); border: 1px solid var(--linteau-border); background: transparent; color: var(--linteau-foreground); cursor: pointer; font-family: inherit }\n.linteau-calendar-footer-button:hover { background: var(--linteau-accent) }\n.linteau-combobox-input-clearable { padding-right: 46px }\n.linteau-combobox-clear { position: absolute; right: 26px; color: var(--linteau-muted-foreground); background: transparent; border: none; cursor: pointer; display: flex; padding: 2px }\n.linteau-combobox-clear:hover { color: var(--linteau-foreground) }\n";
+/**
+ * Creates a labeled date (or date-range) field backed by a floating month-grid calendar
+ * popover with weekday headers, outside-month days, range selection with hover preview,
+ * full keyboard navigation, and Today/Clear quick actions.
+ */
+export declare function DatePicker(options?: DatePickerOptions): DatePickerElement;

package/dist/components/input/FileDropzone.d.ts

@@ -0,0 +1,26 @@
+/** Options accepted by the `FileDropzone` factory. */
+export interface FileDropzoneOptions {
+    /** Label text shown inside the drop area. Defaults to `'Drop files here or click to browse'`. */
+    label?: string;
+    /** Comma-separated MIME types/extensions passed to the underlying file input. */
+    accept?: string;
+    /** Allows selecting multiple files. Defaults to `false`. */
+    multiple?: boolean;
+    /** Disables interaction. Defaults to `false`. */
+    disabled?: boolean;
+    /** Called with the selected/dropped files. */
+    onFiles: (files: File[]) => void;
+}
+/** The runtime control surface attached to every `FileDropzone` element. */
+export interface FileDropzoneApi {
+    /** Clears the underlying file input's selection. */
+    reset: () => void;
+    /** Detaches the dropzone from the DOM and its internal listeners. */
+    destroy: () => void;
+}
+/** A `FileDropzone` is a real `HTMLDivElement` extended with `FileDropzoneApi`. */
+export type FileDropzoneElement = HTMLDivElement & FileDropzoneApi;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const dropzoneCss = "\n.linteau-dropzone { border: 1px dashed var(--linteau-border); border-radius: var(--linteau-radius-lg); padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; cursor: pointer; color: var(--linteau-muted-foreground); transition: border-color 120ms ease, background 120ms ease }\n.linteau-dropzone:hover, .linteau-dropzone-active { border-color: var(--linteau-ring); background: var(--linteau-accent) }\n.linteau-dropzone-disabled { opacity: 0.5; cursor: not-allowed }\n.linteau-dropzone-label { font-size: 12px }\n";
+/** Creates a drag-and-drop file upload zone with a click-to-browse fallback. */
+export declare function FileDropzone(options: FileDropzoneOptions): FileDropzoneElement;

package/dist/components/layout/Card.d.ts

@@ -0,0 +1,24 @@
+/** Options accepted by the `Card` factory. All slots are optional. */
+export interface CardOptions {
+    /** Content rendered in the header slot (a border-separated top strip). */
+    header?: HTMLElement | string;
+    /** Content rendered in the footer slot (a border-separated bottom strip). */
+    footer?: HTMLElement | string;
+}
+/** The runtime control surface attached to every `Card` element. */
+export interface CardApi {
+    /** The main content container -- append anything here. */
+    body: HTMLElement;
+    /** Replaces the header slot content (pass `null` to remove it). */
+    setHeader: (content: HTMLElement | string | null) => void;
+    /** Replaces the footer slot content (pass `null` to remove it). */
+    setFooter: (content: HTMLElement | string | null) => void;
+    /** Detaches the card from the DOM. */
+    destroy: () => void;
+}
+/** A `Card` is a real `HTMLDivElement` extended with `CardApi`. */
+export type CardElement = HTMLDivElement & CardApi;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const cardCss = "\n.linteau-card { border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-lg); background: var(--linteau-card); color: var(--linteau-card-foreground); overflow: hidden }\n.linteau-card-header { padding: 14px 16px; border-bottom: 1px solid var(--linteau-border); font-weight: 600 }\n.linteau-card-body { padding: 16px }\n.linteau-card-footer { padding: 12px 16px; border-top: 1px solid var(--linteau-border) }\n";
+/** Creates a bordered, sectioned surface with optional header/footer slots and a body you fill freely. */
+export declare function Card(options?: CardOptions): CardElement;

package/dist/components/layout/Section.d.ts

@@ -0,0 +1,33 @@
+import type { IconInput } from '../../svg/types';
+/** Options accepted by the `Section` factory. */
+export interface SectionOptions {
+    /** Optional icon rendered before the title. */
+    icon?: IconInput;
+    /** When `true`, the header becomes clickable and toggles the body. Defaults to `false`. */
+    collapsible?: boolean;
+    /** Initial collapsed state when `collapsible` is `true`. Defaults to `false`. */
+    defaultCollapsed?: boolean;
+    /** Extra elements (e.g. buttons) rendered on the right side of the header. */
+    actions?: HTMLElement[];
+}
+/** The runtime control surface attached to every `Section` element. */
+export interface SectionApi {
+    /** The header element, exposed for advanced customization. */
+    header: HTMLElement;
+    /** The body container -- append your fields/content here. */
+    body: HTMLElement;
+    /** Updates the section title text. */
+    setTitle: (title: string) => void;
+    /** Programmatically collapses/expands the section (only relevant when `collapsible`). */
+    setCollapsed: (collapsed: boolean) => void;
+    /** Returns whether the section is currently collapsed. */
+    isCollapsed: () => boolean;
+    /** Detaches the section from the DOM and its internal listeners. */
+    destroy: () => void;
+}
+/** A `Section` is a real `HTMLDivElement` extended with `SectionApi`. */
+export type SectionElement = HTMLDivElement & SectionApi;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const sectionCss = "\n.linteau-section { border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-lg); background: var(--linteau-muted); overflow: hidden; width: 100% }\n.linteau-section-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--linteau-border); color: var(--linteau-muted-foreground); cursor: default }\n.linteau-section-header.linteau-section-collapsible { cursor: pointer }\n.linteau-section-header h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; flex: 1 }\n.linteau-section-actions { display: flex; align-items: center; gap: 6px }\n.linteau-section-body { padding: 12px; display: flex; flex-direction: column; gap: 12px }\n.linteau-section-body.linteau-collapsed { display: none }\n.linteau-section-chevron { transition: transform 150ms ease }\n.linteau-section-chevron.linteau-collapsed { transform: rotate(-90deg) }\n";
+/** Creates a titled, bordered container -- the primary layout grouping primitive of the library. */
+export declare function Section(title: string, options?: SectionOptions): SectionElement;

package/dist/components/layout/Separator.d.ts

@@ -0,0 +1,18 @@
+/** Options accepted by the `Separator` factory. */
+export interface SeparatorOptions {
+    /** Layout direction. Defaults to `'horizontal'`. */
+    orientation?: 'horizontal' | 'vertical';
+}
+/** The runtime control surface attached to every `Separator` element. */
+export interface SeparatorApi {
+    /** Switches orientation, updating classes in place. */
+    setOrientation: (orientation: 'horizontal' | 'vertical') => void;
+    /** Detaches the separator from the DOM. */
+    destroy: () => void;
+}
+/** A `Separator` is a real `HTMLHRElement` extended with `SeparatorApi`. */
+export type SeparatorElement = HTMLHRElement & SeparatorApi;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const separatorCss = "\n.linteau-separator { background: var(--linteau-border); border: none; flex-shrink: 0 }\n.linteau-separator-horizontal { width: 100%; height: 1px }\n.linteau-separator-vertical { width: 1px; height: 100% }\n";
+/** Creates a thin dividing line, horizontal or vertical. */
+export declare function Separator(options?: SeparatorOptions): SeparatorElement;

package/dist/components/misc/ModeCard.d.ts

@@ -0,0 +1,35 @@
+import type { IconInput } from '../../svg/types';
+/** Options accepted by the `ModeCard` factory. */
+export interface ModeCardOptions {
+    /** Title text. */
+    label: string;
+    /** Description text, hidden and replaced by a lock message when `locked` is `true`. */
+    description: string;
+    /** Icon shown at the top of the card (replaced by a lock icon when `locked`). */
+    icon: IconInput;
+    /** Disables selection and shows a lock icon/message. Defaults to `false`. */
+    locked?: boolean;
+    /** Message shown instead of `description` when locked. Defaults to `'Coming in the next update'`. */
+    lockedMessage?: string;
+    /** Initial selected visual state. Defaults to `false`. */
+    selected?: boolean;
+    /** Called when the (unlocked) card is clicked. */
+    onSelect?: () => void;
+}
+/** The runtime control surface attached to every `ModeCard` element. */
+export interface ModeCardApi {
+    /** Returns whether the card is currently marked as selected. */
+    isSelected: () => boolean;
+    /** Programmatically toggles the selected visual state. */
+    setSelected: (selected: boolean) => void;
+    /** Programmatically locks/unlocks the card. */
+    setLocked: (locked: boolean) => void;
+    /** Detaches the card from the DOM and its internal listener. */
+    destroy: () => void;
+}
+/** A `ModeCard` is a real `HTMLButtonElement` extended with `ModeCardApi`. */
+export type ModeCardElement = HTMLButtonElement & ModeCardApi;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const modeCardCss = "\n.linteau-mode-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; background: var(--linteau-card); border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-lg); color: var(--linteau-foreground); cursor: pointer; text-align: left; font-family: inherit; transition: border-color 120ms ease, transform 120ms ease }\n.linteau-mode-card:hover:not(.linteau-locked) { border-color: var(--linteau-ring); transform: translateY(-2px) }\n.linteau-mode-card.linteau-selected { border-color: var(--linteau-primary); box-shadow: 0 0 0 1px var(--linteau-primary) }\n.linteau-mode-card.linteau-locked { opacity: 0.45; cursor: not-allowed }\n.linteau-mode-card-icon { color: var(--linteau-foreground) }\n.linteau-mode-card-title { font-weight: 600; font-size: 13px }\n.linteau-mode-card-description { font-size: 11px; color: var(--linteau-muted-foreground) }\n";
+/** Creates a selectable, optionally lockable option card -- typically used in mode/menu pickers. */
+export declare function ModeCard(options: ModeCardOptions): ModeCardElement;

package/dist/components/navigation/Accordion.d.ts

@@ -0,0 +1,42 @@
+import type { IconInput } from '../../svg/types';
+/** A single collapsible section within an `Accordion`. */
+export interface AccordionItem {
+    /** Visible header label. */
+    label: string;
+    /** Unique value identifying this section. */
+    value: string;
+    /** Optional icon rendered before the label. */
+    icon?: IconInput;
+    /** Content revealed when this section is open. */
+    content: HTMLElement;
+}
+/** Options accepted by the `Accordion` factory. */
+export interface AccordionOptions {
+    /** The sections to render. */
+    items: AccordionItem[];
+    /** Allows more than one section open at once. Defaults to `false`. */
+    multiple?: boolean;
+    /** Values open by default. */
+    defaultOpen?: string[];
+    /** Called whenever the set of open sections changes. */
+    onChange?: (openValues: string[]) => void;
+}
+/** The runtime control surface attached to every `Accordion` element. */
+export interface AccordionApi {
+    /** Returns the values of currently open sections. */
+    getOpen: () => string[];
+    /** Opens a section by value. */
+    open: (value: string) => void;
+    /** Closes a section by value. */
+    close: (value: string) => void;
+    /** Toggles a section by value. */
+    toggle: (value: string) => void;
+    /** Detaches the accordion from the DOM and its internal listeners. */
+    destroy: () => void;
+}
+/** An `Accordion` is a real `HTMLDivElement` extended with `AccordionApi`. */
+export type AccordionElement = HTMLDivElement & AccordionApi;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const accordionCss = "\n.linteau-accordion { display: flex; flex-direction: column; gap: 8px; width: 100% }\n.linteau-accordion-item { border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-lg); overflow: hidden }\n.linteau-accordion-header { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px; background: var(--linteau-muted); border: none; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--linteau-foreground); font-family: inherit }\n.linteau-accordion-chevron { margin-left: auto; transition: transform 150ms ease }\n.linteau-accordion-chevron.linteau-open { transform: rotate(180deg) }\n.linteau-accordion-content { padding: 12px }\n.linteau-accordion-content.linteau-collapsed { display: none }\n";
+/** Creates a set of collapsible sections, single- or multi-open. */
+export declare function Accordion(options: AccordionOptions): AccordionElement;

package/dist/components/navigation/Breadcrumb.d.ts

@@ -0,0 +1,25 @@
+/** A single crumb in a `Breadcrumb`. The last item in the list is rendered as the non-interactive current page. */
+export interface BreadcrumbItem {
+    /** Visible label. */
+    label: string;
+    /** Called when the crumb is clicked (ignored for the last/current item). */
+    onClick?: () => void;
+}
+/** Options accepted by the `Breadcrumb` factory. */
+export interface BreadcrumbOptions {
+    /** The trail of crumbs, in order from root to current page. */
+    items: BreadcrumbItem[];
+}
+/** The runtime control surface attached to every `Breadcrumb` element. */
+export interface BreadcrumbApi {
+    /** Replaces the full trail. */
+    setItems: (items: BreadcrumbItem[]) => void;
+    /** Detaches the breadcrumb from the DOM and its internal listeners. */
+    destroy: () => void;
+}
+/** A `Breadcrumb` is a real `HTMLElement` (`<nav>`) extended with `BreadcrumbApi`. */
+export type BreadcrumbElement = HTMLElement & BreadcrumbApi;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const breadcrumbCss = "\n.linteau-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--linteau-muted-foreground) }\n.linteau-breadcrumb-item { background: transparent; border: none; color: var(--linteau-muted-foreground); cursor: pointer; font: inherit; padding: 0 }\n.linteau-breadcrumb-item:hover { color: var(--linteau-foreground) }\n.linteau-breadcrumb-current { color: var(--linteau-foreground); font-weight: 500 }\n";
+/** Creates a navigational trail of crumbs separated by chevrons. */
+export declare function Breadcrumb(options: BreadcrumbOptions): BreadcrumbElement;

package/dist/components/navigation/Pagination.d.ts

@@ -0,0 +1,30 @@
+/** Options accepted by the `Pagination` factory. */
+export interface PaginationOptions {
+    /** Controlled current page (1-indexed). */
+    page?: number;
+    /** Uncontrolled initial page, used only if `page` is omitted. Defaults to `1`. */
+    defaultPage?: number;
+    /** Total number of pages. */
+    pageCount: number;
+    /** Page buttons shown on each side of the current page before collapsing into an ellipsis. Defaults to `1`. */
+    siblingCount?: number;
+    /** Called whenever the user navigates to a new page. */
+    onChange?: (page: number) => void;
+}
+/** The runtime control surface attached to every `Pagination` element. */
+export interface PaginationApi {
+    /** Returns the current page. */
+    getPage: () => number;
+    /** Programmatically navigates to a page (does not trigger `onChange`). */
+    setPage: (page: number) => void;
+    /** Updates the total page count and re-renders. */
+    setPageCount: (pageCount: number) => void;
+    /** Detaches the control from the DOM and its internal listeners. */
+    destroy: () => void;
+}
+/** A `Pagination` is a real `HTMLDivElement` extended with `PaginationApi`. */
+export type PaginationElement = HTMLDivElement & PaginationApi;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const paginationCss = "\n.linteau-pagination { display: flex; align-items: center; gap: 4px }\n.linteau-pagination-item { min-width: 28px; height: 28px; padding: 0 6px; display: flex; align-items: center; justify-content: center; border-radius: var(--linteau-radius-sm); border: 1px solid transparent; background: transparent; color: var(--linteau-muted-foreground); font-size: 12px; cursor: pointer; font-family: inherit }\n.linteau-pagination-item:hover:not(:disabled) { background: var(--linteau-accent) }\n.linteau-pagination-item:disabled { opacity: 0.4; cursor: not-allowed }\n.linteau-pagination-item-active { background: var(--linteau-primary); color: var(--linteau-primary-foreground) }\n.linteau-pagination-ellipsis { color: var(--linteau-muted-foreground); padding: 0 4px }\n";
+/** Creates a page-number navigator with previous/next controls and smart ellipsis collapsing. */
+export declare function Pagination(options: PaginationOptions): PaginationElement;

package/dist/components/navigation/Tabs.d.ts

@@ -0,0 +1,38 @@
+import type { IconInput } from '../../svg/types';
+/** A single tab: its trigger label/icon and the panel content it reveals. */
+export interface TabItem {
+    /** Visible trigger label. */
+    label: string;
+    /** Unique value identifying this tab. */
+    value: string;
+    /** Optional icon rendered before the label. */
+    icon?: IconInput;
+    /** Content shown in the panel while this tab is active. */
+    content: HTMLElement;
+}
+/** Options accepted by the `Tabs` factory. */
+export interface TabsOptions {
+    /** The tabs to render. */
+    items: TabItem[];
+    /** Controlled active value. */
+    value?: string;
+    /** Uncontrolled initial value, used only if `value` is omitted. Defaults to the first item. */
+    defaultValue?: string;
+    /** Called whenever the active tab changes. */
+    onChange?: (value: string) => void;
+}
+/** The runtime control surface attached to every `Tabs` element. */
+export interface TabsApi {
+    /** Returns the currently active tab's value. */
+    getValue: () => string;
+    /** Programmatically activates a tab (does not trigger `onChange`). */
+    setValue: (value: string) => void;
+    /** Detaches the tabs from the DOM and their internal listeners. */
+    destroy: () => void;
+}
+/** A `Tabs` is a real `HTMLDivElement` extended with `TabsApi`. */
+export type TabsElement = HTMLDivElement & TabsApi;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const tabsCss = "\n.linteau-tabs { display: flex; flex-direction: column; gap: 12px; width: 100% }\n.linteau-tabs-list { display: flex; gap: 4px; border-bottom: 1px solid var(--linteau-border) }\n.linteau-tabs-trigger { background: transparent; border: none; border-bottom: 2px solid transparent; padding: 8px 12px; font-size: 12px; font-weight: 500; color: var(--linteau-muted-foreground); cursor: pointer; display: flex; align-items: center; gap: 6px; font-family: inherit }\n.linteau-tabs-trigger:hover { color: var(--linteau-foreground) }\n.linteau-tabs-trigger-active { color: var(--linteau-foreground); border-bottom-color: var(--linteau-primary) }\n.linteau-tabs-panel { width: 100% }\n";
+/** Creates a tabbed container: a trigger list plus a panel that swaps content per active tab. */
+export declare function Tabs(options: TabsOptions): TabsElement;

package/dist/components/overlay/AlertDialog.d.ts

@@ -0,0 +1,37 @@
+import type { Destroyable } from '../../core/types';
+/** Options accepted by the `AlertDialog` factory. */
+export interface AlertDialogOptions {
+    /** Title shown in the header. */
+    title: string;
+    /** Supporting description text shown in the body. */
+    description?: string;
+    /** Label for the dismiss action. Defaults to `'Cancel'`. */
+    cancelText?: string;
+    /** Label for the confirm action. Defaults to `'Continue'`. */
+    confirmText?: string;
+    /** Renders the confirm button in the destructive color -- use for irreversible actions. Defaults to `false`. */
+    destructive?: boolean;
+    /** Called when the user confirms. */
+    onConfirm?: () => void;
+    /** Called when the user cancels (via the Cancel button or Escape). */
+    onCancel?: () => void;
+}
+/**
+ * The runtime control surface returned by `AlertDialog`. A thin wrapper over `Dialog` that
+ * enforces the confirm-or-cancel pattern: unlike `Dialog`, clicking the backdrop never
+ * dismisses it -- the user must explicitly choose.
+ */
+export interface AlertDialogApi extends Destroyable {
+    /** Opens the alert dialog. */
+    open: () => void;
+    /** Closes the alert dialog (equivalent to cancelling). */
+    close: () => void;
+    /** Returns whether the alert dialog is currently open. */
+    isOpen: () => boolean;
+}
+/**
+ * Creates a modal confirmation dialog for actions that need explicit user consent (deleting
+ * a resource, discarding changes) -- built entirely on top of `Dialog` and `Button`, so it
+ * ships no CSS of its own.
+ */
+export declare function AlertDialog(options: AlertDialogOptions): AlertDialogApi;

package/dist/components/overlay/ContextMenu.d.ts

@@ -0,0 +1,19 @@
+import type { MenuEntry } from './DropdownMenu';
+import type { Destroyable } from '../../core/types';
+/** Options accepted by the `ContextMenu` factory. */
+export interface ContextMenuOptions {
+    /** The element that opens the menu on right-click. */
+    target: HTMLElement;
+    /** The menu's items/separators. */
+    items: MenuEntry[];
+    /** Called when an enabled item is chosen. */
+    onSelect?: (value: string) => void;
+}
+/**
+ * The runtime control surface returned by `ContextMenu`. This is a plain controller -- not
+ * an element -- because it attaches behavior to an existing `target` rather than creating
+ * a new one to place in your layout.
+ */
+export type ContextMenuApi = Destroyable;
+/** Replaces the native right-click menu on `target` with a styled `ContextMenu`. Shares `.linteau-menu` CSS with `DropdownMenu` -- the `menu` key dedupes. */
+export declare function ContextMenu(options: ContextMenuOptions): ContextMenuApi;