optikos 0.1.0 → 0.3.0

package/dist/types/components/form/form/form.d.ts

@@ -15,20 +15,35 @@ export interface FormConfig extends ContainerConfig {
     tabs?: FormTab[];
     /** Default `labelPos` for fields that do not set their own. */
     labelPos?: 'top' | 'left';
+    /** Width of the labels on the left (`labelPos: 'left'`), so they line up in a column. Number = px. */
+    labelWidth?: number | string;
+    /** Shortcut for a responsive grid layout (one column on narrow screens); items take `colspan` (a number or `'full'`). */
+    columns?: number;
     readonly?: boolean;
 }
 export declare class Form extends Container<FormConfig> {
     protected baseCls: string;
     protected tag: 'form';
+    /** Components hidden by their `showIf` rule: their fields do not count (no validation, not in `getValues`). */
+    private ruledOut;
+    private dirty;
     constructor(config?: FormConfig);
     protected build(): HTMLElement;
     protected onRender(): void;
     getFields(): Field<any>[];
     getField(name: string): Field<any> | undefined;
-    /** Nested object built from field names (`address.city` → `{ address: { city } }`). */
+    /** Nested object built from field names (`address.city` → `{ address: { city } }`). Fields hidden by `showIf` are left out. */
     getValues(opts?: {
         dirtyOnly?: boolean;
     }): Record<string, any>;
+    /** The fields that count: not inside something its `showIf` rule hid. */
+    private counted;
+    /** A field changed: rerun the `showIf`/`enableIf` rules and say when the form as a whole became (un)changed. */
+    private changed;
+    /** Shows/hides and enables/disables every item that has a rule, from the current values (hidden fields included). */
+    applyRules(): void;
+    /** Brings a field into view (opening its tab or step) and focuses it. */
+    focusField(field: Field<any>): void;
     /** Sets the fields present in `values` (silently). */
     setValues(values: Record<string, any>): void;
     /** Fills the form from a plain object or a Model, and makes it the "clean" state. */
@@ -44,8 +59,10 @@ export declare class Form extends Container<FormConfig> {
     isDirty(): boolean;
     isValid(): boolean;
     clearErrors(): void;
-    /** Validates every field (marks errors) and focuses the first invalid one. */
+    /** Validates every field that counts (marks errors) and focuses the first invalid one. */
     validate(): boolean;
     submit(): boolean;
+    /** Width of the labels on the left (number = px); they line up in a column. */
+    setLabelWidth(width: number | string): void;
     setReadonly(readonly: boolean): void;
 }

package/dist/types/components/form/formactions/formactions.d.ts

@@ -0,0 +1,34 @@
+import { Component, type ComponentConfig } from '../../../core/component.js';
+import { type ButtonConfig } from '../../base/button/button.js';
+import type { Form } from '../form/form.js';
+export interface FormActionsConfig extends ComponentConfig {
+    submitText?: string;
+    /** `false` hides Cancel. */
+    cancelText?: string | false;
+    /** Extra buttons, before Cancel. */
+    buttons?: ButtonConfig[];
+    /** Sticks to the bottom of the scrolling area. */
+    sticky?: boolean;
+    /** Save is disabled until the form has changes. */
+    requireChanges?: boolean;
+    /** The "Unsaved changes" line. Default true. */
+    status?: boolean;
+}
+/** The form's action bar: Cancel (resets), Save (submits) and an "Unsaved changes" status. */
+export declare class FormActions extends Component<FormActionsConfig> {
+    protected baseCls: string;
+    private statusEl;
+    private buttonsEl;
+    private form?;
+    private save;
+    private cancel?;
+    private extra;
+    protected build(): HTMLDivElement;
+    protected onRender(): void;
+    private paint;
+    getForm(): Form | undefined;
+    setSubmitText(text: string): void;
+    /** The Cancel button's text, or `false` to hide it. Cancel emits `cancel` (return false to keep the changes), then resets. */
+    setCancelText(text: string | false): void;
+    setSticky(sticky: boolean): void;
+}

package/dist/types/components/form/formerrors/formerrors.d.ts

@@ -0,0 +1,23 @@
+import { Component, type ComponentConfig } from '../../../core/component.js';
+import { Field } from '../../../core/field.js';
+export interface FormErrorsConfig extends ComponentConfig {
+    /** The heading: a function of the number of problems, or a fixed text. */
+    title?: string | ((n: number) => string);
+    /** Take the focus after a failed submit (instead of the first invalid field). */
+    focus?: boolean;
+}
+/** An error summary: after a failed validation, every problem as a button that takes you to its field. */
+export declare class FormErrors extends Component<FormErrorsConfig> {
+    protected baseCls: string;
+    private titleEl;
+    private listEl;
+    private form?;
+    /** Shown only once the form was validated with errors (not while the user is still filling it in). */
+    private active;
+    protected build(): HTMLDivElement;
+    protected onRender(): void;
+    /** The form fields that have an error, in order. */
+    getErrors(): Field<any>[];
+    /** Redraws the list from the current errors (hides when there are none). */
+    refresh(): void;
+}

package/dist/types/components/form/formsection/formsection.d.ts

@@ -0,0 +1,26 @@
+import { Container, type ContainerConfig } from '../../../core/container.js';
+export interface FormSectionConfig extends ContainerConfig {
+    title?: string;
+    description?: string;
+    /** Title and description in a column beside the fields (default); `false` stacks them above. */
+    aside?: boolean;
+    /** Shortcut for a responsive grid layout of the fields; items take `colspan` (a number or `'full'`). */
+    columns?: number;
+    /** A rule between consecutive sections. Default true. */
+    divider?: boolean;
+}
+/** A titled part of a long form, "settings page" style: title and description on the left, fields on the right. */
+export declare class FormSection extends Container<FormSectionConfig> {
+    protected baseCls: string;
+    protected tag: 'section';
+    private titleEl;
+    private descEl;
+    private bodyEl;
+    getBody(): HTMLElement;
+    protected build(): HTMLElement;
+    protected onRender(): void;
+    setTitle(title: string): void;
+    setDescription(text: string): void;
+    /** Title beside the fields (true) or always above them (false). */
+    setAside(aside: boolean): void;
+}

package/dist/types/components/form/inputgroup/inputgroup.d.ts

@@ -0,0 +1,28 @@
+import { Container, type ContainerConfig } from '../../../core/container.js';
+import { Field } from '../../../core/field.js';
+/** Text joined to the input (`'R$'`, `'.com'`), or a button. */
+export type InputAffix = string | {
+    icon?: string;
+    text?: string;
+    ariaLabel?: string;
+    handler?: (field: Field<any>) => void;
+};
+export interface InputGroupConfig extends ContainerConfig {
+    prefix?: InputAffix;
+    suffix?: InputAffix;
+}
+/** Joins text or buttons to a field's input box. The field keeps its label, help, error, name and value. */
+export declare class InputGroup extends Container<InputGroupConfig> {
+    protected baseCls: string;
+    private affixes;
+    /** The field inside. */
+    getField(): Field<any> | undefined;
+    protected onRender(): void;
+    /** Text affixes describe the input, after the field's own help and error. */
+    private describe;
+    /** `[prefix][the field's input box][suffix]` inside the field's control. */
+    private paint;
+    private track;
+    setPrefix(prefix: InputAffix | undefined): void;
+    setSuffix(suffix: InputAffix | undefined): void;
+}

package/dist/types/components/form/stepform/stepform.d.ts

@@ -12,7 +12,14 @@ export interface FormStep {
     items: ContainerConfig['items'];
     /** Default: two columns (one on a phone). */
     layout?: LayoutSpec;
+    /**
+     * A check that may ask the server (an email already taken, a free slug), run when leaving the step forward and on Finish.
+     * Return `true`, a message for the whole step, or `{ field: message }`. The signal aborts when the user goes elsewhere.
+     */
+    validate?: (values: Record<string, any>, form: StepForm, signal: AbortSignal) => StepCheck | Promise<StepCheck>;
 }
+/** The result of a step's `validate`: ok, a message for the whole step, or messages per field name. */
+export type StepCheck = true | string | Record<string, string>;
 export interface StepFormConfig extends FormConfig {
     steps: FormStep[];
     /** Moving forward validates the steps on the way. `false` lets the user click any step. Default true. */
@@ -25,6 +32,8 @@ export interface StepFormConfig extends FormConfig {
     finishText?: string;
     /** Shows a Cancel button (fires `cancel`). */
     cancelText?: string;
+    /** On a new step, focus its first field (a phone keyboard pops up). Default false: the step panel gets the focus. */
+    autoFocus?: boolean;
 }
 /** One form, several steps: a Stepper on top, one step at a time, Back / Next / Finish, validation per step and an optional review. */
 export declare class StepForm extends Form {
@@ -36,6 +45,11 @@ export declare class StepForm extends Form {
     private nextBtn;
     private finishBtn;
     private index;
+    /** The step check in flight (Next waits for it; going elsewhere aborts it). */
+    private pending?;
+    /** Each step's general message (from its `validate`), shown in one alert line above the steps. */
+    private notes;
+    private noteEl?;
     constructor(config: StepFormConfig);
     private cfg;
     private count;
@@ -46,10 +60,22 @@ export declare class StepForm extends Form {
     private stepFields;
     /** Validates one step's fields (marks the errors, sets its state on the stepper). */
     validateStep(i: number): boolean;
-    /** Moves to a step. Forward with `linear` validates the steps on the way and stops at the first invalid one. Returns whether it got there. */
-    goTo(j: number): boolean;
-    next(): boolean;
-    back(): boolean;
+    /** Sets step `i`'s general message ('' clears it); it shows while that step is the current one. */
+    private note;
+    private showNote;
+    /** Busy while a step check runs: Next and Finish show their loading state. */
+    private busy;
+    /** Cancels the step check in flight, if any. */
+    private stop;
+    /** Runs step `k`'s `validate`. A failure marks the fields or shows the step's message. Resolves false when aborted too. */
+    private check;
+    /**
+     * Moves to a step. Forward with `linear` validates the steps on the way (their fields, then their `validate`) and stops
+     * at the first invalid one. Resolves with whether it got there; without a step `validate` on the way it moves at once.
+     */
+    goTo(j: number): Promise<boolean>;
+    next(): Promise<boolean>;
+    back(): Promise<boolean>;
     /** The card layout changed the visible step (by `goTo`, or because `validate` brought an invalid field into view). */
     private onActivate;
     private refreshReview;

package/dist/types/components/formactions.d.ts

@@ -0,0 +1 @@
+export * from '../components/form/formactions/formactions.js';

package/dist/types/components/formerrors.d.ts

@@ -0,0 +1 @@
+export * from '../components/form/formerrors/formerrors.js';

package/dist/types/components/formsection.d.ts

@@ -0,0 +1 @@
+export * from '../components/form/formsection/formsection.js';

package/dist/types/components/inputgroup.d.ts

@@ -0,0 +1 @@
+export * from '../components/form/inputgroup/inputgroup.js';

package/dist/types/components/layout/fieldset/fieldset.d.ts

@@ -1,6 +1,12 @@
 import { Container, type ContainerConfig } from '../../../core/container.js';
 export interface FieldSetConfig extends ContainerConfig {
     title?: string;
+    /** A line under the legend, read as the group's description. */
+    description?: string;
+    /** `box` (a framed group, default), `line` (a rule under the legend, no frame) or `plain` (just the legend). */
+    variant?: 'box' | 'line' | 'plain';
+    /** Shortcut for a responsive grid layout; items take `colspan` (a number or `'full'`). */
+    columns?: number;
     collapsible?: boolean;
     collapsed?: boolean;
 }
@@ -10,10 +16,13 @@ export declare class FieldSet extends Container<FieldSetConfig> {
     private legend;
     private bodyEl;
     private toggleBtn?;
+    private descEl;
     getBody(): HTMLElement;
     protected build(): HTMLElement;
     protected onRender(): void;
     setTitle(title: string): void;
+    setDescription(text: string): void;
+    setVariant(variant: 'box' | 'line' | 'plain'): void;
     setCollapsed(collapsed: boolean): void;
     collapse(): void;
     expand(): void;

package/dist/types/components/layout/panel/panel.d.ts

@@ -1,4 +1,5 @@
 import { Container, type ContainerConfig } from '../../../core/container.js';
+import './reload.js';
 import { type ToolbarConfig } from '../toolbar/toolbar.js';
 import type { ButtonConfig } from '../../base/button/button.js';
 export interface PanelTool {
@@ -13,6 +14,9 @@ export interface PanelConfig extends ContainerConfig {
     collapsed?: boolean;
     closable?: boolean;
     closeAction?: 'destroy' | 'hide';
+    /** A ↻ button in the header that calls `onReload` (a Promise shows the loading mask until it settles). */
+    reloadable?: boolean;
+    onReload?: (panel: Panel) => void | Promise<unknown>;
     tools?: PanelTool[];
     tbar?: ToolbarConfig['items'];
     bbar?: ToolbarConfig['items'];
@@ -35,6 +39,8 @@ export declare class Panel<C extends PanelConfig = PanelConfig> extends Containe
     protected onRender(): void;
     private addTool;
     private updateHeader;
+    /** Runs `onReload` (`before-reload` can cancel); a returned Promise keeps the loading mask (and a turning ↻) until it settles. */
+    reload(): Promise<boolean>;
     setTitle(title: string): void;
     setIcon(name: string): void;
     /** Collapses/expands without events. Use `collapse()`/`expand()` for the full behavior. */

package/dist/types/components/layout/panel/reload.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/navigation/navmenu/navmenu.d.ts

@@ -30,6 +30,10 @@ export declare class NavMenu extends Component<NavMenuConfig> {
     private query;
     private focusId?;
     private root;
+    /** Rail mode: the floating menu of a group, and the group it belongs to. */
+    private flyout?;
+    private flyoutOf?;
+    private hoverTimer?;
     protected onRender(): void;
     getItem(id: string, list?: NavItem[]): NavItem | undefined;
     private parentsOf;
@@ -54,6 +58,8 @@ export declare class NavMenu extends Component<NavMenuConfig> {
     setItems(items: NavItem[]): void;
     /** Changes an item in place (a badge, a label, disabled...). */
     updateItem(id: string, patch: Partial<NavItem>): void;
+    /** Rail mode: a group's children in a Menu beside its icon (title as the header, badges kept). */
+    private openFlyout;
     setCollapsed(collapsed: boolean): void;
     /** Hides what does not match and opens the groups that have a match; empty text clears the filter. */
     filter(text: string): void;

package/dist/types/components/navigation/tabs/tabs.d.ts

@@ -1,4 +1,5 @@
 import { Container, type ContainerConfig } from '../../../core/container.js';
+import '../../layout/panel/reload.js';
 import { Component } from '../../../core/component.js';
 import { type AnyConfig } from '../../../core/registry.js';
 export interface TabsConfig extends ContainerConfig {
@@ -9,6 +10,8 @@ export interface TabsConfig extends ContainerConfig {
     lazy?: boolean;
     /** Default `closable` for tabs. */
     closable?: boolean;
+    /** Default `reloadable` for tabs: a ↻ in the tab that calls the panel's `onReload`. */
+    reloadable?: boolean;
 }
 /**
  * Items are the panels. Each may carry `title`, `icon`, `closable` and `disabled` for its tab header.
@@ -37,6 +40,11 @@ export declare class Tabs extends Container<TabsConfig> {
     /** Activates a tab (instance, id or index). `before-change` can cancel. */
     setActive(tab: Component | string | number): void;
     insert(index: number, item: AnyConfig | Component | string): Component;
+    /**
+     * Reloads a tab: calls its panel's `onReload` (`before-reload` can cancel). While a returned Promise is pending the panel
+     * shows its loading mask and the tab's ↻ spins; `reload(panel)` fires when it is done.
+     */
+    reloadTab(tab: Component | string | number): Promise<boolean>;
     /** Closes a tab (`before-close` can cancel). The neighbor becomes active. */
     closeTab(tab: Component | string | number): void;
     remove(child: Component | string | number, destroy?: boolean): Component | undefined;

package/dist/types/components/overlays/menu/menu.d.ts

@@ -8,10 +8,16 @@ export interface MenuItem {
     /** Present (true/false) makes it a checkable item. */
     checked?: boolean;
     items?: MenuEntry[];
+    /** Items with the same group sit together under its name (ungrouped items come first). */
+    group?: string;
+    /** A count or short label at the end of the row. */
+    badge?: string | number;
 }
 export type MenuEntry = MenuItem | '-';
 export interface MenuConfig extends ComponentConfig {
     items?: MenuEntry[];
+    /** A search field over the items: filters as you type; a search that names a group shows the whole group. */
+    search?: boolean;
 }
 /** Floating menu with submenus. Use `showBy(button)` for button menus and `showAt(x, y)` for context menus. */
 export declare class Menu extends Component<MenuConfig> {
@@ -22,11 +28,22 @@ export declare class Menu extends Component<MenuConfig> {
     private subOwner?;
     private opener;
     private hoverCancel?;
+    /** The `role=menu` element: the root itself, or a list under the search field. */
+    private list;
+    private searchEl?;
+    private emptyEl?;
     protected build(): HTMLDivElement;
+    /** Without search the root is the menu; with it, the root holds the field, the menu and the "no results" line. */
+    private shell;
+    private first;
+    /** Hides the items that do not match the search (a group whose name matches keeps all of them); empty groups hide in CSS. */
+    private filter;
     protected onRender(): void;
     private entries;
     private renderItems;
     setItems(items: MenuEntry[]): void;
+    /** Turns the search field on or off. */
+    setSearch(search: boolean): void;
     private activate;
     private root;
     private openSub;

package/dist/types/components/overlays/messagebox/messagebox.d.ts

@@ -18,18 +18,23 @@ export interface MessageBoxConfig {
         value?: string;
         placeholder?: string;
         validators?: Validator<string>[];
+        autoFocus?: boolean;
     };
     /** Called with the pressed button id before closing; return `false` to keep the dialog open. */
     beforeClose?: (id: string, win: Window, input?: TextField) => boolean | void;
+    /** Dim the page behind. Default false: a message is still modal, but it does not darken the screen. */
+    mask?: boolean;
 }
 declare function open(cfg: MessageBoxConfig): Promise<string>;
 export interface AlertOptions {
     title?: string;
+    mask?: boolean;
     okText?: string;
     icon?: string;
 }
 export interface ConfirmOptions {
     title?: string;
+    mask?: boolean;
     okText?: string;
     cancelText?: string;
     danger?: boolean;
@@ -37,11 +42,14 @@ export interface ConfirmOptions {
 }
 export interface PromptOptions {
     title?: string;
+    mask?: boolean;
     value?: string;
     placeholder?: string;
     okText?: string;
     cancelText?: string;
     validators?: Validator<string>[];
+    /** Focus the text field on open (a phone keyboard pops up). Default false: the dialog gets the focus. */
+    autoFocus?: boolean;
 }
 export declare const MessageBox: {
     show: typeof open;

package/dist/types/components/overlays/widget/widget.d.ts

@@ -11,9 +11,12 @@ export interface WidgetConfig extends PanelConfig {
     /** Which sides the switcher offers. Default left, right, bottom. */
     sides?: WidgetSide[];
     closeOnEsc?: boolean;
+    /** On open the focus goes to the widget itself; `true` focuses its first field instead. Default false. */
     autoFocus?: boolean;
     /** The user can move it by its header (pointer drag, or Alt+arrow keys). A move frees it from the side; `setSide` docks it again. */
     draggable?: boolean;
+    /** The user can resize it: the inner edge while docked, a corner grip once moved; arrow keys on the handle. */
+    resizable?: boolean;
 }
 /** A panel that floats over the page, attached to one edge. Not modal: the page behind stays usable. */
 export declare class Widget extends Panel<WidgetConfig> {
@@ -23,6 +26,7 @@ export declare class Widget extends Panel<WidgetConfig> {
     private cancelHide?;
     private userTools;
     private pos?;
+    private grip?;
     constructor(config?: WidgetConfig);
     protected onRender(): void;
     getSide(): WidgetSide;
@@ -38,6 +42,15 @@ export declare class Widget extends Panel<WidgetConfig> {
     private moveTo;
     private initDrag;
     setSize(size: number | string): void;
+    /** Adds or removes the resize handle (only for a floating widget). */
+    setResizable(resizable: boolean): void;
+    /**
+     * Resizes from rect `r` by a pointer (or key) delta. Moved: the corner grip sets width and height. Docked: the inner edge
+     * sets the size, so pulling it away from the docked edge makes the widget bigger.
+     */
+    private resizeBy;
+    /** The handle's orientation and value follow the dimension it changes. */
+    private paintGrip;
     isOpen(): boolean;
     open(): void;
     /** Opens or closes (with no argument: the other one). `toggle()` stays the Panel's collapse. */

package/dist/types/components/overlays/window/window.d.ts

@@ -1,10 +1,15 @@
 import { Panel, type PanelConfig } from '../../layout/panel/panel.js';
 export interface WindowConfig extends PanelConfig {
     modal?: boolean;
+    /** Dims the page behind a modal window. `false` keeps it modal (inert page, trapped focus) but clear. Default true. */
+    mask?: boolean;
     draggable?: boolean;
     closeOnEsc?: boolean;
     closeOnBackdrop?: boolean;
-    /** Move focus inside on show. Default true. */
+    /**
+     * On show the focus goes to the dialog itself (it is modal: the focus must be inside), so a phone keyboard does not
+     * pop up. `true` focuses its first field instead. Default false.
+     */
     autoFocus?: boolean;
 }
 /** Floating dialog. Modal by default: the page behind becomes inert and Tab stays inside. */
@@ -19,6 +24,8 @@ export declare class Window extends Panel<WindowConfig> {
     constructor(config?: WindowConfig);
     protected onRender(): void;
     private initDrag;
+    /** Dims (true) or not (false) the page behind the modal window. */
+    setMask(mask: boolean): void;
     isVisible(): boolean;
     /** Centers in the viewport (also done on show and on resize until the user drags it). */
     center(): void;

package/dist/types/components/toggle.d.ts

@@ -0,0 +1 @@
+export * from '../components/fields/toggle/toggle.js';

package/dist/types/components/tree.d.ts

@@ -0,0 +1 @@
+export * from '../components/data/tree/tree.js';

package/dist/types/core/component.d.ts

@@ -10,6 +10,10 @@ export interface ComponentConfig {
     height?: number | string;
     flex?: number | string;
     tooltip?: string;
+    /** Inside a Form: shown only while this returns true (given the form values). A field hidden this way neither validates nor goes into `getValues`. */
+    showIf?: (values: Record<string, any>) => boolean;
+    /** Inside a Form: enabled only while this returns true (given the form values). */
+    enableIf?: (values: Record<string, any>) => boolean;
     /** Component-scoped tokens: `{ radius: '0' }` on a button sets `--op-button-radius`. Keys starting with `--` are used as is. */
     theme?: Record<string, string | number>;
     /**
@@ -23,8 +27,8 @@ export interface ComponentConfig {
     ariaLabel?: string;
     /** Layout `border`: where the item goes. */
     region?: 'north' | 'south' | 'west' | 'east' | 'center';
-    /** Layout `grid`: columns spanned. */
-    colspan?: number;
+    /** Layout `grid`: columns spanned; `'full'` takes the whole row. */
+    colspan?: number | 'full';
     listeners?: Record<string, Handler>;
     renderTo?: string | HTMLElement;
     /** Free slot for application data. */

package/dist/types/core/i18n.d.ts

@@ -3,5 +3,10 @@ export declare const locales: Record<string, Locale>;
 /** Picks a registered locale by name (`'pt-BR'`, or `'pt'` as a prefix) or merges a custom object over English. */
 export declare function setLocale(l: string | Locale): void;
 export declare const getLocale: () => Locale;
+/**
+ * Adds messages to a locale (created if missing). Keys already there are kept, so an app's own overrides win.
+ * Each component registers its own keys this way, so its messages only ship with it.
+ */
+export declare function addMessages(lang: string, messages: Locale): void;
 /** Translates a key, replacing `{name}` placeholders. */
 export declare function t(key: string, vars?: Record<string, string | number>): string;

package/dist/types/core/index.d.ts

@@ -1,6 +1,6 @@
 export { Emitter, type Handler } from './emitter.js';
 export { h, attr, uid, kebab, px, clamp, type Attrs, type Child } from './dom.js';
-export { t, setLocale, getLocale, locales, type Locale } from './i18n.js';
+export { t, setLocale, getLocale, addMessages, locales, type Locale } from './i18n.js';
 export { Component, type ComponentConfig, type Parent } from './component.js';
 export { Container, type ContainerConfig } from './container.js';
 export { register, create, getType, type AnyConfig, type ComponentClass } from './registry.js';

package/dist/types/core/position.d.ts

@@ -7,7 +7,10 @@ export interface PlaceOptions {
     matchWidth?: boolean;
     margin?: number;
 }
-/** Positions a floating element (`position: fixed`) next to an anchor element or a point, flipping and clamping to the viewport. */
+/**
+ * Positions a floating element (`position: fixed`) next to an anchor element or a point, flipping and clamping to the viewport.
+ * Taller than the room on either side (a long menu, a big theme): it goes where there is more room, capped to it, and scrolls.
+ */
 export declare function place(el: HTMLElement, anchor: Element | {
     x: number;
     y: number;

package/dist/types/data/column.d.ts

@@ -1,7 +1,8 @@
 import { type Formatter } from './format.js';
 import type { Model } from './model.js';
-export interface Column {
-    field: string;
+/** A grid/table column. `T` is the record shape: `field` then autocompletes its keys (any string still works). */
+export interface Column<T extends Record<string, any> = any> {
+    field: Extract<keyof T, string> | (string & {});
     header?: string;
     /** Fixed width in px. */
     width?: number;
@@ -20,8 +21,12 @@ export interface Column {
     /** Name registered with `registerFormat` (`money`, `date`, `number`, `percent`, `bool`) or a function. */
     format?: string | Formatter;
     /** Full control over the cell content. Text is escaped; return a Node for markup. */
-    renderer?: (value: any, rec: Model, col: Column) => string | Node;
+    renderer?: (value: any, rec: Model<T>, col: Column<T>) => string | Node;
     cls?: string;
+    /** With the `cellEditing()` grid plugin: `true` (an editor for the value's type), a field type (`'select'`) or a field config. */
+    editor?: boolean | string | Record<string, any>;
+    /** With `cellEditing()`: whether this record's cell can be edited (default: every record, when `editor` is set). */
+    editable?: (rec: Model<T>) => boolean;
 }
 /** Cell content for a record: `renderer` first, then `format`, then the plain value. */
-export declare function cellContent(col: Column, rec: Model): string | Node;
+export declare function cellContent<T extends Record<string, any>>(col: Column<T>, rec: Model<T>): string | Node;

package/dist/types/index.d.ts

@@ -3,23 +3,30 @@ export * from './data/index.js';
 export * from './themes/index.js';
 export * from './motion/index.js';
 export * from './ui/index.js';
+export * from './components/base/badge/badge.js';
 export * from './components/base/button/button.js';
+export * from './components/base/chip/chip.js';
+export * from './components/base/codeviewer/codeviewer.js';
 export * from './components/base/icon/icon.js';
 export * from './components/base/label/label.js';
 export * from './components/chat/chat/chat.js';
+export * from './components/data/cellediting/cellediting.js';
 export * from './components/data/dataview/dataview.js';
 export * from './components/data/filterbuilder/filterbuilder.js';
 export * from './components/data/grid/grid.js';
 export * from './components/data/pagination/pagination.js';
 export * from './components/data/searchgrid/searchgrid.js';
 export * from './components/data/table/table.js';
+export * from './components/data/tree/tree.js';
 export * from './components/data/viewmanager/viewmanager.js';
 export * from './components/dates/calendar/calendar.js';
 export * from './components/feedback/spinner/spinner.js';
 export * from './components/fields/checkbox/checkbox.js';
+export * from './components/fields/checkboxgroup/checkboxgroup.js';
 export * from './components/fields/combobox/combobox.js';
 export * from './components/fields/datefield/datefield.js';
 export * from './components/fields/daterangefield/daterangefield.js';
+export * from './components/fields/dial/dial.js';
 export * from './components/fields/listbox/listbox.js';
 export * from './components/fields/lookupfield/lookupfield.js';
 export * from './components/fields/numberfield/numberfield.js';
@@ -31,7 +38,14 @@ export * from './components/fields/slider/slider.js';
 export * from './components/fields/suggestfield/suggestfield.js';
 export * from './components/fields/textarea/textarea.js';
 export * from './components/fields/textfield/textfield.js';
+export * from './components/fields/toggle/toggle.js';
+export * from './components/form/fieldgroup/fieldgroup.js';
+export * from './components/form/fieldlist/fieldlist.js';
 export * from './components/form/form/form.js';
+export * from './components/form/formactions/formactions.js';
+export * from './components/form/formerrors/formerrors.js';
+export * from './components/form/formsection/formsection.js';
+export * from './components/form/inputgroup/inputgroup.js';
 export * from './components/form/stepform/stepform.js';
 export * from './components/layout/container/container.js';
 export * from './components/layout/fieldset/fieldset.js';

package/dist/types/themes/define.d.ts

@@ -5,11 +5,12 @@ export interface ThemeDefinition {
     color?: Partial<Record<ColorToken | string, string>>;
     font?: Values;
     space?: Values;
-    radius?: Values;
+    /** `radius: '0.5rem'` sets `--op-radius`; `radius: { sm, lg, pill }` sets `--op-radius-sm`... */
+    radius?: Values | string | number;
     shadow?: Values;
     control?: Values;
-    /** Any other key is a component scope: `{ button: { radius: 0 } }` → `--op-button-radius`. */
-    [group: string]: Values | undefined;
+    /** Any other key is a component scope: `{ button: { radius: 0 } }` → `--op-button-radius`. A plain value sets the group's own token (`{ radius: 0 }` → `--op-radius`). */
+    [group: string]: Values | string | number | undefined;
 }
 export interface Theme {
     name: string;