domma-js 0.56.0 → 0.58.0

package/assets/types/elements.d.ts

@@ -1,1168 +0,0 @@
-/**
- * Domma Elements Module - TypeScript Declarations
- * UI Components: Card, Modal, Tabs, Accordion, Tooltip, Badge, Dropdown, Toast, Carousel, BackToTop
- */
-
-// ============================================
-// Common Types
-// ============================================
-
-export type AnimationType = 'fade' | 'slide' | 'zoom' | 'none';
-export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
-export type DropdownPosition = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
-export type ToastPosition = 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';
-export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info';
-export type BadgeVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
-export type BadgeSize = 'small' | 'medium' | 'large';
-export type ShadowSize = 'none' | 'small' | 'medium' | 'large';
-export type BackToTopPosition = 'bottom-right' | 'bottom-left';
-
-// ============================================
-// Base Component
-// ============================================
-
-export interface ComponentInstance {
-    /** The DOM element this component is attached to */
-    element: HTMLElement | null;
-    /** Component options */
-    options: Record<string, any>;
-
-    /** Update component options at runtime */
-    setOptions(newOptions: Record<string, any>): this;
-
-    /**
-     * Listen for a component event - the name of an `onX` option without `on`, lower-cased
-     * ('change', 'open', 'beforeclose'). The handler gets the same arguments as the option;
-     * returning false from a `before...` handler cancels. The same event is dispatched on
-     * `element` as `dm:<component>:<event>` with `detail = {instance, args}`.
-     */
-    on(event: string, handler: (...args: any[]) => any): this;
-    /** Listen once */
-    once(event: string, handler: (...args: any[]) => any): this;
-    /** Stop listening (every handler for the event when none is given) */
-    off(event: string, handler?: (...args: any[]) => any): this;
-
-    /** Destroy the component and cleanup event listeners */
-    destroy(): void;
-}
-
-// ============================================
-// Card Component
-// ============================================
-
-export interface CardOptions {
-    /** Enable hover effects */
-    hoverable?: boolean;
-    /** Shadow size: 'none', 'small', 'medium', 'large' */
-    shadow?: ShadowSize;
-    /** Apply border radius */
-    rounded?: boolean;
-    /** Enable animations */
-    animation?: boolean;
-    /** Animation duration in ms */
-    animationDuration?: number;
-    /** Callback on mouse enter */
-    onHover?: (event: MouseEvent, card: CardInstance) => void;
-    /** Callback on mouse leave */
-    onLeave?: (event: MouseEvent, card: CardInstance) => void;
-    /** Callback on click */
-    onClick?: (event: MouseEvent, card: CardInstance) => void;
-}
-
-export interface CardInstance extends ComponentInstance {
-    /** Set the shadow size */
-    setShadow(size: ShadowSize): this;
-}
-
-// ============================================
-// Modal Component
-// ============================================
-
-export interface ModalOptions {
-    /** Show backdrop overlay */
-    backdrop?: boolean;
-    /** Close modal when clicking backdrop */
-    backdropClose?: boolean;
-    /** Close modal on Escape key */
-    keyboard?: boolean;
-    /** Animation type: 'fade', 'slide', 'zoom' */
-    animation?: AnimationType;
-    /** Animation duration in ms */
-    animationDuration?: number;
-    /** Show close button */
-    closeButton?: boolean;
-    /** Return false to keep the modal closed (also `.on('beforeopen')`, `dm:modal:beforeopen`) */
-    onBeforeOpen?: (modal: ModalInstance) => boolean | void;
-    /** Return false to keep the modal open (also `.on('beforeclose')`, `dm:modal:beforeclose`) */
-    onBeforeClose?: (modal: ModalInstance) => boolean | void;
-    /** Modal content (HTML, sanitised like $().html() unless `safe: false`) */
-    content?: string;
-    /** false: insert `content` as trusted markup */
-    safe?: boolean;
-    /** Callback before opening */
-    onOpen?: (modal: ModalInstance) => void;
-    /** Callback after open animation completes */
-    onOpened?: (modal: ModalInstance) => void;
-    /** Callback before closing */
-    onClose?: (modal: ModalInstance) => void;
-    /** Callback after close animation completes */
-    onClosed?: (modal: ModalInstance) => void;
-}
-
-export interface ModalInstance extends ComponentInstance {
-    /** Open the modal */
-    open(): this;
-
-    /** Close the modal */
-    close(): this;
-
-    /** Toggle modal visibility */
-    toggle(): this;
-
-    /** Check if modal is currently open */
-    isOpen(): boolean;
-}
-
-// ============================================
-// Tabs Component
-// ============================================
-
-export interface TabChangeEvent {
-    index: number;
-    oldIndex: number;
-    tab: HTMLElement;
-    panel: HTMLElement;
-}
-
-export interface TabsOptions {
-    /** Initially active tab index */
-    active?: number;
-    /** Animation type */
-    animation?: 'fade' | 'none';
-    /** Animation duration in ms */
-    animationDuration?: number;
-    /** Selector for tab items */
-    tabSelector?: string;
-    /** Selector for tab panels */
-    panelSelector?: string;
-    /** CSS class for active state */
-    activeClass?: string;
-    /** Callback when tab changes */
-    onChange?: (event: TabChangeEvent) => void;
-}
-
-export interface TabsInstance extends ComponentInstance {
-    /** Activate a tab by index */
-    activate(index: number): this;
-
-    /** Alias for activate */
-    show(index: number): this;
-
-    /** Get the current active tab index */
-    getActive(): number;
-
-    /** Go to the next tab */
-    next(): this;
-
-    /** Go to the previous tab */
-    prev(): this;
-}
-
-// ============================================
-// Accordion Component
-// ============================================
-
-export interface AccordionChangeEvent {
-    index: number;
-    isOpen: boolean;
-    header: HTMLElement;
-    content: HTMLElement;
-}
-
-export interface AccordionOptions {
-    /** Allow multiple panels open at once */
-    allowMultiple?: boolean;
-    /** Alias for allowMultiple */
-    multiExpand?: boolean;
-    /** Initially open panel index(es) */
-    activeIndex?: number | number[] | null;
-    /** Enable animations */
-    animation?: boolean;
-    /** Animation duration in ms */
-    animationDuration?: number;
-    /** Selector for accordion headers */
-    headerSelector?: string;
-    /** Selector for accordion content */
-    contentSelector?: string;
-    /** CSS class for active state */
-    activeClass?: string;
-    /** Callback when panel state changes */
-    onChange?: (event: AccordionChangeEvent) => void;
-}
-
-export interface AccordionInstance extends ComponentInstance {
-    /** Toggle a panel by index */
-    toggle(index: number): this;
-
-    /** Open a panel by index */
-    open(index: number): this;
-
-    /** Close a panel by index */
-    close(index: number): this;
-
-    /** Open all panels */
-    openAll(): this;
-
-    /** Close all panels */
-    closeAll(): this;
-}
-
-// ============================================
-// Tooltip Component
-// ============================================
-
-export interface TooltipDelay {
-    show: number;
-    hide: number;
-}
-
-export interface TooltipOptions {
-    /** Tooltip content */
-    content?: string;
-    /** Position relative to element */
-    position?: TooltipPosition;
-    /** How to trigger: 'hover', 'click', 'focus' */
-    trigger?: 'hover' | 'click' | 'focus';
-    /** Show/hide delay in ms */
-    delay?: TooltipDelay;
-    /** Enable animations */
-    animation?: boolean;
-    /** Animation duration in ms */
-    animationDuration?: number;
-    /** Allow HTML content */
-    html?: boolean;
-    /** Position offset [x, y] */
-    offset?: [number, number];
-    /** Container element for tooltip */
-    container?: HTMLElement | null;
-    /** Callback when tooltip shows */
-    onShow?: (tooltip: TooltipInstance) => void;
-    /** Callback when tooltip hides */
-    onHide?: (tooltip: TooltipInstance) => void;
-}
-
-export interface TooltipInstance extends ComponentInstance {
-    /** Show the tooltip */
-    show(): this;
-
-    /** Hide the tooltip */
-    hide(): this;
-
-    /** Toggle tooltip visibility */
-    toggle(): this;
-
-    /** Update tooltip content */
-    setContent(content: string): this;
-}
-
-// ============================================
-// Badge Component
-// ============================================
-
-export interface BadgeOptions {
-    /** Badge variant/colour */
-    variant?: BadgeVariant;
-    /** Badge size */
-    size?: BadgeSize;
-    /** Use pill/rounded style */
-    pill?: boolean;
-    /** Use outline style */
-    outline?: boolean;
-    /** Show remove button */
-    removable?: boolean;
-    /** Callback on click */
-    onClick?: (event: MouseEvent, badge: BadgeInstance) => void;
-    /** Callback on remove */
-    onRemove?: (event: MouseEvent, badge: BadgeInstance) => void;
-}
-
-export interface BadgeInstance extends ComponentInstance {
-    /** Set the badge variant */
-    setVariant(variant: BadgeVariant): this;
-
-    /** Set the badge text */
-    setText(text: string): this;
-
-    /** Remove the badge from DOM */
-    remove(): void;
-}
-
-/** Number badge colour variant */
-export type NumberBadgeVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
-
-export interface NumberBadgeOptions {
-    /** Initial count to display */
-    count?: number;
-    /** Colour variant (default: 'danger') */
-    variant?: NumberBadgeVariant;
-    /** Show as dot indicator instead of number */
-    dot?: boolean;
-    /** Enable pulse animation */
-    pulse?: boolean;
-    /** Custom border ring colour */
-    borderColor?: string;
-}
-
-export interface NumberBadgeInstance {
-    /** The wrapper web component element */
-    element: HTMLElement;
-
-    /** Set the badge count */
-    setCount(count: number): this;
-
-    /** Increment the badge count */
-    increment(by?: number): this;
-
-    /** Decrement the badge count (min 0) */
-    decrement(by?: number): this;
-
-    /** Toggle dot mode */
-    setDot(dot: boolean): this;
-
-    /** Set the colour variant */
-    setVariant(variant: NumberBadgeVariant): this;
-
-    /** Toggle pulse animation */
-    setPulse(pulse: boolean): this;
-
-    /** Get the current count */
-    getCount(): number;
-
-    /** Remove the badge and unwrap the element */
-    remove(): void;
-
-    /** Destroy the component */
-    destroy(): void;
-}
-
-// ============================================
-// Dropdown Component
-// ============================================
-
-export interface DropdownItem {
-    /** Display text */
-    label?: string;
-    /** Alternative to label */
-    text?: string;
-    /** Alternative to label */
-    name?: string;
-    /** Value when selected */
-    value?: any;
-    /** Icon HTML */
-    icon?: string;
-    /** Disable item */
-    disabled?: boolean;
-    /** Render as divider */
-    divider?: boolean;
-    /** Render as header */
-    header?: string;
-}
-
-export interface DropdownSelectEvent {
-    item: DropdownItem | string;
-    index: number;
-    value: any;
-}
-
-export interface DropdownOptions {
-    /** How to trigger: 'click' or 'hover' */
-    trigger?: 'click' | 'hover';
-    /** Menu position */
-    position?: DropdownPosition;
-    /** Position offset [x, y] */
-    offset?: [number, number];
-    /** Enable animations */
-    animation?: boolean;
-    /** Animation duration in ms */
-    animationDuration?: number;
-    /** Close menu after item selection */
-    closeOnSelect?: boolean;
-    /** Close menu when clicking outside */
-    closeOnClickOutside?: boolean;
-    /** Menu items */
-    items?: (DropdownItem | string)[];
-    /** Bind to a Domma Model */
-    model?: any;
-    /** Model key for items array */
-    modelKey?: string;
-    /** Custom item template function */
-    itemTemplate?: (item: DropdownItem, index: number) => string;
-    /** Callback when menu opens */
-    onOpen?: (dropdown: DropdownInstance) => void;
-    /** Callback when menu closes */
-    onClose?: (dropdown: DropdownInstance) => void;
-    /** Callback when item is selected */
-    onSelect?: (event: DropdownSelectEvent, dropdown: DropdownInstance) => void;
-}
-
-export interface DropdownInstance extends ComponentInstance {
-    /** Open the dropdown menu */
-    open(): this;
-
-    /** Close the dropdown menu */
-    close(): this;
-
-    /** Toggle dropdown visibility */
-    toggle(): this;
-
-    /** Check if dropdown is open */
-    isOpen(): boolean;
-
-    /** Set menu items */
-    setItems(items: (DropdownItem | string)[]): this;
-
-    /** Add a menu item */
-    addItem(item: DropdownItem | string): this;
-
-    /** Remove item by index */
-    removeItem(index: number): this;
-
-    /** Get currently selected value */
-    getSelected(): any;
-}
-
-// ============================================
-// Toast Component
-// ============================================
-
-export interface ToastAction {
-    /** Button label */
-    label: string;
-    /** Click handler */
-    onClick?: (toast: ToastInstance) => void;
-    /** Close toast on click */
-    closeOnClick?: boolean;
-    /** Primary style */
-    primary?: boolean;
-}
-
-export interface ToastOptions {
-    /** Toast position */
-    position?: ToastPosition;
-    /** Auto-dismiss duration in ms (0 = no auto-dismiss) */
-    duration?: number;
-    /** Pause countdown on hover */
-    pauseOnHover?: boolean;
-    /** Show progress bar */
-    showProgress?: boolean;
-    /** Animation style */
-    animation?: 'slide' | 'fade';
-    /** Animation duration in ms */
-    animationDuration?: number;
-    /** Show close button */
-    closable?: boolean;
-    /** Maximum number of toasts */
-    maxToasts?: number;
-    /** Toast type */
-    type?: ToastType;
-    /** Toast title */
-    title?: string;
-    /** Custom icon HTML */
-    icon?: string;
-    /** Allow HTML content */
-    html?: boolean;
-    /** Action buttons */
-    actions?: ToastAction[];
-    /** Callback when toast closes */
-    onClose?: (toast: ToastInstance) => void;
-}
-
-export interface ToastInstance {
-    /** Close the toast */
-    close(): void;
-
-    /** Update toast message */
-    update(message: string, options?: { html?: boolean }): this;
-}
-
-export interface ToastStatic {
-    /** Default options */
-    defaults: ToastOptions;
-
-    /** Show a toast message */
-    show(message: string, options?: ToastOptions): ToastInstance;
-
-    /** Show success toast */
-    success(message: string, options?: ToastOptions): ToastInstance;
-
-    /** Show error toast */
-    error(message: string, options?: ToastOptions): ToastInstance;
-
-    /** Show warning toast */
-    warning(message: string, options?: ToastOptions): ToastInstance;
-
-    /** Show info toast */
-    info(message: string, options?: ToastOptions): ToastInstance;
-
-    /** Close all toasts */
-    closeAll(): void;
-}
-
-// ============================================
-// Carousel Component
-// ============================================
-
-export interface CarouselChangeEvent {
-    index: number;
-    oldIndex: number;
-    slide: HTMLElement;
-}
-
-export interface CarouselOptions {
-    /** Enable autoplay */
-    autoplay?: boolean;
-    /** Autoplay interval in ms */
-    interval?: number;
-    /** Pause autoplay on hover */
-    pauseOnHover?: boolean;
-    /** Loop back to start */
-    loop?: boolean;
-    /** Animation type */
-    animation?: 'slide' | 'fade' | 'crossfade';
-    /** Use the shortest scaled image height, or the midpoint of shortest and tallest */
-    heightMode?: 'crop' | 'average';
-    /** Optional fixed viewport height in pixels */
-    height?: number;
-    /** Animation duration in ms */
-    animationDuration?: number;
-    /** Show navigation arrows */
-    showArrows?: boolean;
-    /** Show indicator dots */
-    showIndicators?: boolean;
-    /** Selector for slide elements */
-    slideSelector?: string;
-    /** CSS class for active state */
-    activeClass?: string;
-    /** Callback when slide changes */
-    onChange?: (event: CarouselChangeEvent) => void;
-}
-
-export interface CarouselInstance extends ComponentInstance {
-    /** Go to a specific slide */
-    goTo(index: number): this;
-
-    /** Go to next slide */
-    next(): this;
-
-    /** Go to previous slide */
-    prev(): this;
-
-    /** Start autoplay */
-    play(): this;
-
-    /** Stop autoplay */
-    pause(): this;
-
-    /** Get current slide index */
-    getIndex(): number;
-
-    /** Get slide element by index */
-    getSlide(index?: number): HTMLElement;
-}
-
-// ============================================
-// BackToTop Component
-// ============================================
-
-export interface BackToTopScrollEvent {
-    scrollY: number;
-    isVisible: boolean;
-}
-
-export interface BackToTopShowEvent {
-    button: HTMLElement;
-}
-
-export interface BackToTopOptions {
-    /** Scroll distance to show button (null = viewport height) */
-    showAfter?: number | null;
-    /** Scroll animation duration in ms */
-    duration?: number;
-    /** Button position */
-    position?: BackToTopPosition;
-    /** Distance from edge in px */
-    offset?: number;
-    /** Existing button selector (null = create new) */
-    target?: string | HTMLElement | null;
-    /** z-index for button */
-    zIndex?: number;
-    /** Callback when button shows */
-    onShow?: (event: BackToTopShowEvent) => void;
-    /** Callback when button hides */
-    onHide?: (event: BackToTopShowEvent) => void;
-    /** Callback on scroll */
-    onScroll?: (event: BackToTopScrollEvent) => void;
-}
-
-export interface BackToTopInstance extends ComponentInstance {
-    /** Scroll to top */
-    scroll(): this;
-
-    /** Show the button */
-    show(): this;
-
-    /** Hide the button */
-    hide(): this;
-
-    /** Toggle button visibility */
-    toggle(): this;
-
-    /** Check if button is visible */
-    isVisible(): boolean;
-
-    /** Get the button element */
-    getButton(): HTMLElement;
-}
-
-// ============================================
-// Split Pane
-// ============================================
-
-/** A pane size limit: px as a number, or a percentage string such as '20%' */
-export type SplitPaneSize = number | string;
-
-export interface SplitPaneOptions {
-    /** 'horizontal' = side by side (default), 'vertical' = stacked */
-    direction?: 'horizontal' | 'vertical';
-    /** Percentages, one per pane (scaled to add up to 100); equal by default */
-    sizes?: number[];
-    /** Minimum size, one value or one per pane (default 0) */
-    minSize?: SplitPaneSize | SplitPaneSize[];
-    /** Maximum size, one value or one per pane (default none) */
-    maxSize?: SplitPaneSize | null | Array<SplitPaneSize | null>;
-    /** Gutter thickness in px (default 8) */
-    gutterSize?: number;
-    /** Snap to a limit when dragged within this many px of it (default 0) */
-    snapOffset?: number;
-    /** Which panes the gutter gestures may collapse */
-    collapsible?: boolean | boolean[];
-    /** What a collapsed pane shrinks to (default 0) */
-    collapsedSize?: SplitPaneSize | SplitPaneSize[];
-    /** A small toggle button in gutters next to a collapsible pane */
-    collapseButton?: boolean;
-    /** Remember sizes and collapse state with S under 'split-pane:<key>' */
-    persistKey?: string | null;
-    /** Gutter cursor (default col-resize / row-resize) */
-    cursor?: string | null;
-    disabled?: boolean;
-    /** Percent per arrow key (default 1) */
-    step?: number;
-    /** Percent per Shift+arrow (default 10) */
-    largeStep?: number;
-    /** The gutters' aria-label */
-    gutterLabel?: string;
-    /** Return false to refuse a drag */
-    onBeforeDrag?: (gutterIndex: number, event: PointerEvent) => boolean | void;
-    onDragStart?: (sizes: number[], gutterIndex: number) => void;
-    onDrag?: (sizes: number[], gutterIndex: number) => void;
-    onDragEnd?: (sizes: number[], gutterIndex: number) => void;
-    /** Any size change: drag, keys, setSizes, collapse */
-    onResize?: (sizes: number[]) => void;
-    onCollapse?: (paneIndex: number) => void;
-    onExpand?: (paneIndex: number) => void;
-}
-
-export interface SplitPaneInstance extends ComponentInstance {
-    /** The pane elements */
-    readonly panes: HTMLElement[];
-    /** Current sizes, percentages that add up to 100 */
-    getSizes(): number[];
-    /** Set every pane's size (clamped to the limits) */
-    setSizes(sizes: number[]): this;
-    collapse(index: number): this;
-    expand(index: number): this;
-    isCollapsed(index: number): boolean;
-    /** Remove the gutters and listeners and restore the panes' own styles */
-    destroy(): void;
-}
-
-// ============================================
-// Virtual List
-// ============================================
-
-export interface VirtualListRange {
-    /** First index, inclusive */
-    start: number;
-    /** Last index, inclusive (-1 for an empty list) */
-    end: number;
-}
-
-export type VirtualListTemplate = string | Node | ((error?: unknown) => string | Node | null) | null;
-
-export interface VirtualListOptions<T = any> {
-    items?: T[] | null;
-    /** With getItem, instead of items */
-    count?: number;
-    getItem?: ((index: number) => T) | null;
-    /** px, or 'auto' to measure each row (default 40) */
-    itemHeight?: number | 'auto';
-    /** Height assumed for unmeasured rows in 'auto' mode (default 40) */
-    estimatedItemHeight?: number;
-    /** Rows rendered beyond each edge (default 4) */
-    overscan?: number;
-    /** A string is HTML (sanitised unless safe: false); an Element goes in as it is */
-    render?: ((item: T, index: number) => string | Node) | null;
-    /** false: render() strings are inserted unsanitised (default true) */
-    safe?: boolean;
-    /** Property name or function giving each item a stable key (default: the index) */
-    keyField?: string | ((item: T, index: number) => unknown) | null;
-    /** aria-label for the list */
-    label?: string | null;
-    /** Extra class on every row */
-    rowClass?: string;
-    /** Called near the end; resolves to the next items, or {items, done} */
-    loadMore?: ((info: {count: number; page: number}) => Promise<T[] | {items: T[]; done?: boolean}>) | null;
-    /** px from the end at which loadMore is called (default 200) */
-    threshold?: number;
-    loadingTemplate?: VirtualListTemplate;
-    endTemplate?: VirtualListTemplate;
-    /** A [data-vlist-retry] element inside it retries */
-    errorTemplate?: VirtualListTemplate;
-    onRender?: (range: VirtualListRange) => void;
-    onScroll?: (visible: VirtualListRange) => void;
-    onLoadMore?: (info: {count: number; page: number}) => void;
-    onLoaded?: (items: T[]) => void;
-    onEnd?: () => void;
-    onError?: (error: unknown) => void;
-    onItemClick?: (item: T, index: number, event: MouseEvent | KeyboardEvent) => void;
-}
-
-export interface VirtualListInstance<T = any> extends ComponentInstance {
-    /** Number of rows */
-    readonly count: number;
-    setItems(items: T[]): this;
-    append(items: T[]): this;
-    /** Add at the start without moving what is on screen */
-    prepend(items: T[]): this;
-    /** A number is an index; anything else is a key */
-    update(indexOrKey: number | unknown, item: T): this;
-    indexOfKey(key: unknown): number;
-    scrollToIndex(index: number, options?: {align?: 'start' | 'center' | 'end' | 'auto'; smooth?: boolean}): this;
-    /** Scroll to a row and focus it */
-    focusIndex(index: number): this;
-    /** Re-render (and re-measure) the rendered rows */
-    refresh(): this;
-    /** Rows at least partly on screen */
-    getVisibleRange(): VirtualListRange;
-    /** Rows in the DOM, overscan included */
-    getRenderedRange(): VirtualListRange;
-    /** Retry a failed load */
-    retry(): this;
-    /** Whether loadMore has said there is nothing more */
-    isDone(): boolean;
-    /** Count mode: change the number of rows */
-    setCount(count: number): this;
-    /** Remove the rows and listeners and give the container its children back */
-    destroy(): void;
-}
-
-// ============================================
-// Elements Module
-// ============================================
-
-// ============================================
-// Focus trap
-// ============================================
-
-type FocusTarget = string | HTMLElement;
-
-export interface FocusTrapOptions {
-    /** Where focus goes on activate: a selector, an element, a function returning one, or false to leave it. Default: focus already inside stays, else the first tabbable, else the container. */
-    initialFocus?: FocusTarget | (() => HTMLElement | null) | false;
-    /** Where focus goes when nothing is tabbable (default: the first container, given tabindex="-1") */
-    fallbackFocus?: FocusTarget | (() => HTMLElement | null);
-    /** true (default): back to what had focus before activate(); or an element / selector; false: nowhere */
-    returnFocus?: boolean | FocusTarget;
-    /** Escape deactivates (default false - the owning overlay decides) */
-    escapeDeactivates?: boolean | ((e: KeyboardEvent) => boolean);
-    /** A press outside deactivates (default false) */
-    clickOutsideDeactivates?: boolean | ((e: MouseEvent) => boolean);
-    /** Let clicks outside through (default false: they are blocked) */
-    allowOutsideClick?: boolean | ((e: MouseEvent) => boolean);
-    /** Set `inert` on everything outside the containers while active (default false) */
-    inert?: boolean;
-    /** Walk open shadow roots (default true) */
-    shadow?: boolean;
-    preventScroll?: boolean;
-    onActivate?: (trap: FocusTrapInstance) => void;
-    onDeactivate?: (trap: FocusTrapInstance) => void;
-    onPause?: (trap: FocusTrapInstance) => void;
-    onUnpause?: (trap: FocusTrapInstance) => void;
-}
-
-export interface FocusTrapInstance extends ComponentInstance {
-    /** Start trapping; pauses the trap that was on top */
-    activate(opts?: {initialFocus?: FocusTrapOptions['initialFocus']}): this;
-    /** Stop trapping; unpauses the trap beneath */
-    deactivate(opts?: {returnFocus?: boolean | FocusTarget}): this;
-    pause(): this;
-    unpause(opts?: {focus?: boolean}): this;
-    updateContainers(containers: FocusTarget | FocusTarget[]): this;
-    containers(): HTMLElement[];
-    isActive(): boolean;
-    isPaused(): boolean;
-    /** The tabbable elements in the containers right now, in Tab order */
-    tabbables(): HTMLElement[];
-    destroy(): void;
-}
-
-export interface FocusTrapFactory {
-    (containers: FocusTarget | FocusTarget[], options?: FocusTrapOptions): FocusTrapInstance | null;
-    /** What Tab would reach in some containers, in order */
-    tabbables(containers: HTMLElement | HTMLElement[], opts?: {shadow?: boolean}): HTMLElement[];
-    /** The trap that currently listens */
-    top(): FocusTrapInstance | null;
-}
-
-// ============================================
-// Command palette
-// ============================================
-
-export interface PaletteCommand {
-    id?: string;
-    title: string;
-    subtitle?: string;
-    /** Heading the command is listed under */
-    group?: string;
-    /** Domma icon name */
-    icon?: string;
-    /** More words that find it */
-    keywords?: string[];
-    /** Shown as a hint, e.g. 'mod+s' (mod = Cmd on a Mac, Ctrl elsewhere) */
-    shortcut?: string;
-    /** Followed when run (http(s), mailto, tel or relative only) */
-    href?: string;
-    /** '_blank' opens href in a new tab */
-    target?: string;
-    action?: (command: PaletteCommand, palette: CommandPaletteInstance, event?: Event) => void;
-    disabled?: boolean;
-    hidden?: boolean;
-    /** Running it leaves the palette open */
-    keepOpen?: boolean;
-    /** A nested page: a list, or a function returning one (called once on entering) */
-    children?: PaletteCommand[] | ((command: PaletteCommand, ctx: {signal?: AbortSignal, palette: CommandPaletteInstance}) => Promise<PaletteCommand[]> | PaletteCommand[]);
-    /** Placeholder for the box while this command's page is open */
-    placeholder?: string;
-    [key: string]: any;
-}
-
-export interface CommandPaletteOptions {
-    commands?: PaletteCommand[];
-    /** Search elsewhere: debounced, the previous request aborted through `signal` */
-    source?: (query: string, ctx: {signal?: AbortSignal, palette: CommandPaletteInstance}) => Promise<PaletteCommand[]> | PaletteCommand[];
-    /** ms (default 150) */
-    debounce?: number;
-    /** 'mod+k' (default), several, or false */
-    hotkey?: string | string[] | false;
-    placeholder?: string;
-    /** Accessible name of the dialog and list (default 'Command palette') */
-    label?: string;
-    maxResults?: number;
-    /** Storage (S) key for recent commands; null (default) = off */
-    recentKey?: string | null;
-    recentLimit?: number;
-    recentLabel?: string;
-    sourceGroup?: string | null;
-    emptyText?: string;
-    loadingText?: string;
-    /** While a nested page's async children load (default 'Loading…') */
-    pageLoadingText?: string;
-    errorText?: string;
-    backLabel?: string;
-    /** Key hints under the list (default true) */
-    footer?: boolean;
-    resultsText?: (count: number) => string;
-    /** Replaces the default navigation for href commands */
-    navigate?: (href: string, ctx: {newTab: boolean, command: PaletteCommand}) => void;
-    animationDuration?: number;
-    className?: string;
-    /** Force Mac (true) or other (false) key names; default detects */
-    mac?: boolean;
-    onBeforeOpen?: (palette: CommandPaletteInstance) => boolean | void;
-    onOpen?: (palette: CommandPaletteInstance) => void;
-    onBeforeClose?: (palette: CommandPaletteInstance) => boolean | void;
-    onClose?: (palette: CommandPaletteInstance) => void;
-    onQuery?: (query: string, palette: CommandPaletteInstance) => void;
-    onBeforeSelect?: (command: PaletteCommand, palette: CommandPaletteInstance) => boolean | void;
-    onSelect?: (command: PaletteCommand, palette: CommandPaletteInstance) => void;
-    onRun?: (command: PaletteCommand, palette: CommandPaletteInstance) => void;
-}
-
-export interface CommandPaletteInstance extends ComponentInstance {
-    open(query?: string): this;
-    close(): this;
-    toggle(query?: string): this;
-    isOpen(): boolean;
-    show(query?: string): this;
-    hide(): this;
-    isVisible(): boolean;
-    setCommands(list: PaletteCommand[]): this;
-    addCommands(list: PaletteCommand | PaletteCommand[]): this;
-    removeCommand(id: string): this;
-    getCommands(): PaletteCommand[];
-    /** Up one nested page; false at the top */
-    back(): boolean;
-    query(): string;
-    recent(): string[];
-    clearRecent(): this;
-    destroy(): void;
-}
-
-export interface CommandPaletteFactory {
-    (options?: CommandPaletteOptions): CommandPaletteInstance;
-    formatShortcut(combo: string, mac?: boolean): string[];
-    fuzzyMatch(query: string, text: string): {score: number, indices: number[]} | null;
-    /** Whether a live palette's hotkey answers this keydown (for page scripts with their own shortcut) */
-    claims(e: KeyboardEvent): boolean;
-}
-
-export interface Elements {
-    /** Create a Card component */
-    card(selector: string | HTMLElement, options?: CardOptions): CardInstance;
-
-    /** Create a Modal component */
-    modal(selector: string | HTMLElement, options?: ModalOptions): ModalInstance;
-
-    /** Create a Tabs component */
-    tabs(selector: string | HTMLElement, options?: TabsOptions): TabsInstance;
-
-    /** Create an Accordion component */
-    accordion(selector: string | HTMLElement, options?: AccordionOptions): AccordionInstance;
-
-    /** Create Tooltip(s) - returns array if multiple elements match */
-    /** Sets up every match; returns the first, with `all()` for every instance */
-    tooltip(selector: string | HTMLElement, options?: TooltipOptions): TooltipInstance & {all(): TooltipInstance[]};
-
-    /** Create Badge(s) - returns array if multiple elements match */
-    badge(selector: string | HTMLElement, options?: BadgeOptions): BadgeInstance | BadgeInstance[];
-
-    /** Create a NumberBadge notification counter on an element */
-    numberBadge(selector: string | HTMLElement, options?: NumberBadgeOptions): NumberBadgeInstance;
-
-    /** Create a Dropdown component */
-    dropdown(selector: string | HTMLElement, options?: DropdownOptions): DropdownInstance;
-
-    /** Create a Carousel component */
-    carousel(selector: string | HTMLElement, options?: CarouselOptions): CarouselInstance;
-
-    /** Create a BackToTop component */
-    backToTop(selector?: string | HTMLElement, options?: BackToTopOptions): BackToTopInstance;
-
-    /** Toast notification system */
-    toast: ToastStatic;
-
-    /** Keep Tab and focus inside containers while active */
-    focusTrap: FocusTrapFactory;
-
-    /** A Cmd/Ctrl+K command palette (builds its own overlay) */
-    commandPalette: CommandPaletteFactory;
-
-    /** Resizable panes from a container's children; null when nothing matches */
-    splitPane(container: string | HTMLElement, options?: SplitPaneOptions): SplitPaneInstance | null;
-
-    /** A scrolling list that renders only the visible rows; null when nothing matches */
-    virtualList<T = any>(container: string | HTMLElement, options?: VirtualListOptions<T>): VirtualListInstance<T> | null;
-
-    /** A file drop / browse / paste area over a real file input. Null when the target matches nothing. */
-    dropzone(target: string | HTMLElement, options?: DropzoneOptions): DropzoneInstance | null;
-
-    /** A one- or two-thumb slider over real range inputs. Null when the target matches nothing. */
-    rangeSlider(target: string | HTMLElement, options?: RangeSliderOptions): RangeSliderInstance | null;
-
-    /** Alias of rangeSlider() */
-    slider(target: string | HTMLElement, options?: RangeSliderOptions): RangeSliderInstance | null;
-
-    /** Get the component on an element - factory-made ones too. `name` picks one when an element hosts several. */
-    get(selector: string | HTMLElement, name?: string): ComponentInstance | undefined;
-
-    /** Destroy a component */
-    destroy(selector: string | HTMLElement): void;
-
-    /** Destroy all components */
-    destroyAll(): void;
-
-    /** Register a custom component class */
-    register(name: string, ComponentClass: new (selector: any, options?: any) => ComponentInstance): void;
-
-    /** Create a registered custom component */
-    create(name: string, selector: string | HTMLElement, options?: Record<string, any>): ComponentInstance;
-}
-
-export declare const elements: Elements;
-
-// ============================================
-// Dropzone
-// ============================================
-
-export type DropzoneStatus = 'queued' | 'uploading' | 'done' | 'error' | 'cancelled';
-export type DropzoneRejectReason = 'type' | 'size' | 'count';
-
-/** One file in a dropzone, as every event hands it over */
-export interface DropzoneEntry {
-    id: string;
-    file: File;
-    name: string;
-    size: number;
-    type: string;
-    status: DropzoneStatus;
-    /** Upload progress, 0-100 */
-    progress: number;
-    /** The upload's response (parsed when it was JSON) */
-    response: any;
-    error: DropzoneUploadError | null;
-    /** Object URL of an image preview, revoked when the file goes */
-    preview: string | null;
-}
-
-export interface DropzoneUploadError {
-    /** HTTP status, 0 for a network failure */
-    status: number;
-    message: string;
-    response: any;
-}
-
-export interface DropzoneUploadOptions {
-    url: string | ((entry: DropzoneEntry) => string);
-    /** Default 'POST' */
-    method?: string;
-    /** FormData field for the file. Default 'file' */
-    field?: string;
-    headers?: Record<string, string> | ((entry: DropzoneEntry) => Record<string, string>);
-    withCredentials?: boolean;
-    /** Files sent at once. Default 2 */
-    concurrency?: number;
-    /** Extra FormData fields */
-    data?: Record<string, string | Blob> | ((entry: DropzoneEntry) => Record<string, string | Blob>);
-    /** Make the request object (tests, pages without a server). Default: new XMLHttpRequest() */
-    xhr?: (entry: DropzoneEntry) => XMLHttpRequest;
-}
-
-export interface DropzoneOptions {
-    /** Like the input's accept: '.pdf,image/*' or ['.pdf', 'image/*']. Default: the input's */
-    accept?: string | string[] | null;
-    /** Default: the input's `multiple`, or true when the component makes the input */
-    multiple?: boolean | null;
-    maxFiles?: number | null;
-    /** Bytes */
-    maxSize?: number | null;
-    /** Bytes */
-    minSize?: number | null;
-    /** Image thumbnails. Default true */
-    previews?: boolean;
-    /** Form field name. Default: the input's */
-    name?: string | null;
-    /** The file input, when it is not inside or next to the area */
-    input?: string | HTMLInputElement | null;
-    /** true = after the area (default), an element/selector to draw into, false = no list */
-    list?: boolean | string | HTMLElement;
-    upload?: DropzoneUploadOptions | null;
-    /** Default true */
-    autoUpload?: boolean;
-    /** Automatic retries per file. Default 0 */
-    retry?: number;
-    /** Text: prompt, hint, remove, retry, cancel, added, removed, type, size, small, count, uploading, done, failed, cancelled, required ({name}, {max}, {min}, {percent}) */
-    labels?: Record<string, string>;
-    disabled?: boolean;
-    className?: string;
-    /** Return false to refuse the file */
-    onBeforeAdd?: (entry: DropzoneEntry) => boolean | void;
-    onAdd?: (entry: DropzoneEntry) => void;
-    onReject?: (entry: DropzoneEntry, reason: DropzoneRejectReason) => void;
-    onRemove?: (entry: DropzoneEntry) => void;
-    onChange?: (files: File[]) => void;
-    onUploadStart?: (entry: DropzoneEntry) => void;
-    onProgress?: (entry: DropzoneEntry, percent: number) => void;
-    onSuccess?: (entry: DropzoneEntry, response: any) => void;
-    onError?: (entry: DropzoneEntry, error: DropzoneUploadError) => void;
-    onComplete?: (entries: DropzoneEntry[]) => void;
-}
-
-export interface DropzoneInstance extends ComponentInstance {
-    /** The drop area (the element, or the one drawn after a file input given as the target) */
-    zone: HTMLElement;
-    /** The real file input */
-    input: HTMLInputElement;
-    getFiles(): File[];
-    getEntries(): DropzoneEntry[];
-    addFiles(files: FileList | File[] | File): DropzoneEntry[];
-    removeFile(ref: string | DropzoneEntry | File): boolean;
-    clear(): this;
-    /** Open the file picker */
-    browse(): this;
-    upload(): this;
-    retry(ref?: string | DropzoneEntry | File): this;
-    cancel(ref?: string | DropzoneEntry | File): this;
-    enable(): this;
-    disable(): this;
-    isDisabled(): boolean;
-}
-
-// ============================================
-// Range slider
-// ============================================
-
-export type RangeSliderValue = number | [number, number];
-
-export interface RangeSliderMark {
-    value: number;
-    label?: string;
-}
-
-export interface RangeSliderOptions {
-    /** Default: the input's min, else 0 */
-    min?: number;
-    /** Default: the input's max, else 100 */
-    max?: number;
-    /** Default: the input's step, else 1 */
-    step?: number | 'any';
-    /** A number, or [low, high] / "low,high" with range: true */
-    value?: RangeSliderValue | string | null;
-    /** Two thumbs; two inputs, sharing `name` unless `names` is given */
-    range?: boolean;
-    orientation?: 'horizontal' | 'vertical';
-    /** true = every step, n = every n units, or the values to draw at */
-    ticks?: boolean | number | number[];
-    /** Label the ticks (always on for an array) */
-    tickLabels?: boolean;
-    /** Formats the value for ticks, marks, the tooltip and aria-valuetext */
-    labels?: ((value: number, where: 'tick' | 'mark' | 'tooltip' | 'aria') => string) | null;
-    /** Default 'hover' (also shown on focus and while dragging) */
-    tooltip?: 'always' | 'hover' | 'never';
-    marks?: RangeSliderMark[] | null;
-    disabled?: boolean;
-    name?: string | null;
-    /** [lowName, highName] for range: true */
-    names?: [string, string] | null;
-    /** range: true - the closest the thumbs may come */
-    minDistance?: number;
-    /** null = follow the page's direction */
-    rtl?: boolean | null;
-    ariaLabel?: string | null;
-    ariaLabels?: [string, string] | null;
-    className?: string;
-    /** While dragging, and on each key press */
-    onInput?: (value: RangeSliderValue) => void;
-    /** When the value is committed */
-    onChange?: (value: RangeSliderValue) => void;
-    /** Return false to refuse a move */
-    onBeforeChange?: (next: RangeSliderValue, current: RangeSliderValue) => boolean | void;
-}
-
-export interface RangeSliderInstance extends ComponentInstance {
-    getValue(): RangeSliderValue;
-    setValue(value: RangeSliderValue | string, opts?: {silent?: boolean}): this;
-    setRange(min: number, max: number): this;
-    enable(): this;
-    disable(): this;
-    isDisabled(): boolean;
-}