optikos 0.0.0-stage → 0.2.0

package/dist/themes/compact.css

@@ -0,0 +1,17 @@
+/* Compact density: smaller controls, tighter spacing and rows. Combine with others: data-op-theme="dark compact". */
+@layer optikos {
+  [data-op-theme~='compact'] {
+    --op-font-size: 0.8125rem;
+    --op-font-size-sm: 0.6875rem;
+    --op-space-1: 0.125rem;
+    --op-space-2: 0.375rem;
+    --op-space-3: 0.5rem;
+    --op-space-4: 0.75rem;
+    --op-space-5: 1rem;
+    --op-space-6: 1.5rem;
+    --op-control-height: 1.75rem;
+    --op-control-padding-x: 0.5rem;
+    --op-row-height: 1.75rem;
+    --op-radius: 0.25rem;
+  }
+}

package/dist/themes/dark.css

@@ -0,0 +1,53 @@
+/* Dark: the same sober look at night. Steel blue on deep slate, quiet borders, a darker sidebar; shape and density come
+   from the base. Use data-op-theme="dark" on any element. */
+@layer optikos {
+  [data-op-theme~='dark'] {
+    color-scheme: dark; /* native controls follow */
+    --op-color-bg: #0f141c;
+    --op-color-surface: #161d28;
+    --op-color-surface-2: #1c2532;
+    --op-color-fg: #e2e8f0;
+    --op-color-fg-muted: #9ba7b8;
+    --op-color-border: #2a3444;
+    --op-color-border-strong: #435064;
+    --op-color-hover: #212d3e;
+    --op-color-selected: #1d3557;
+    --op-color-primary: #6ea8ec; /* primary text keeps 4.5:1 on the dark surfaces */
+    --op-color-primary-hover: #93bff2;
+    --op-color-primary-fg: #0b1524;
+    --op-color-primary-soft: #172a45;
+    --op-color-danger: #f28b82;
+    --op-color-danger-hover: #f6aaa3;
+    --op-color-danger-fg: #1f0b09;
+    --op-color-danger-soft: #3b1715;
+    --op-color-success: #5cc493;
+    --op-color-success-soft: #10301f;
+    --op-color-warning: #e9b44c;
+    --op-color-warning-soft: #36270c;
+    --op-color-info: #6ea8ec;
+    --op-color-info-soft: #172a45;
+    --op-color-focus: #6ea8ec;
+    --op-color-disabled-fg: #647186;
+    --op-color-disabled-bg: #1a222e;
+    --op-color-overlay: rgb(0 0 0 / 0.62);
+    --op-color-inverse-bg: #e2e8f0;
+    --op-color-inverse-fg: #0f141c;
+    --op-shadow-sm: none;
+    --op-shadow: 0 2px 8px rgb(0 0 0 / 0.45);
+    --op-shadow-lg: 0 12px 32px rgb(0 0 0 / 0.6);
+
+    --op-navmenu-item-height: 2.5rem;
+    --op-navmenu-bg: #0b1018;
+    --op-navmenu-fg: #c6d0de;
+    --op-navmenu-group-fg: #7f8ea6;
+    --op-navmenu-item-hover-bg: #172131;
+    --op-navmenu-active-bg: #1b3050;
+    --op-navmenu-active-fg: #ffffff;
+    --op-navmenu-active-bar: #6ea8ec;
+    --op-navmenu-badge-bg: #6ea8ec;
+    --op-navmenu-badge-fg: #0b1524;
+    --op-grid-header-bg: #1a2230;
+    --op-grid-header-fg: #d3dbe6;
+    --op-field-label-weight: 600;
+  }
+}

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

@@ -0,0 +1,23 @@
+import type { Component } from '../core/component.js';
+type Sub = () => void;
+export interface Signal<T> {
+    (): T;
+    set(value: T): void;
+    update(fn: (v: T) => T): void;
+}
+export declare function signal<T>(initial: T): Signal<T>;
+/** Runs `fn` now and again whenever a signal it read changes. Returns the dispose function. */
+export declare function effect(fn: () => void | Sub): () => void;
+/** A read-only signal derived from others. */
+export declare function computed<T>(fn: () => T): () => T;
+/** Wraps a Store (or anything with `subscribe`) so reading it inside an effect/computed re-runs that effect on every change. Call it once, outside effects. */
+export declare function fromStore<S extends {
+    subscribe(fn: () => void): () => void;
+}>(store: S): () => S;
+/**
+ * `bind(button, { text: () => `Count: ${n()}`, disabled: isBusy })` → `button.setText(...)`, `button.setDisabled(...)`
+ * re-run when the sources change, and are disposed with the component. A source that is a writable signal on `value`
+ * is two-way: the field's `change` event writes back.
+ */
+export declare function bind(cmp: Component<any>, map: Record<string, () => unknown>): void;
+export {};

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

@@ -0,0 +1 @@
+export * from '../components/base/badge/badge.js';

package/dist/types/components/base/badge/badge.d.ts

@@ -0,0 +1,18 @@
+import { Component, type ComponentConfig } from '../../../core/component.js';
+export type Tone = 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+export interface BadgeConfig extends ComponentConfig {
+    text?: string | number;
+    tone?: Tone;
+    icon?: string;
+    /** A small colored dot before the text (a status light). */
+    dot?: boolean;
+}
+/** A small status label or count: "Paid", "3 new", "Beta". Not interactive (see Chip for that). */
+export declare class Badge extends Component<BadgeConfig> {
+    protected baseCls: string;
+    protected tag: 'span';
+    private textEl;
+    protected onRender(): void;
+    setText(text: string | number): void;
+    setTone(tone: Tone): void;
+}

package/dist/types/components/base/button/button.d.ts

@@ -0,0 +1,34 @@
+import { Component, type ComponentConfig } from '../../../core/component.js';
+export interface ButtonConfig extends ComponentConfig {
+    text?: string;
+    icon?: string;
+    iconPos?: 'left' | 'right';
+    variant?: 'default' | 'primary' | 'danger' | 'ghost';
+    htmlType?: 'button' | 'submit' | 'reset';
+    handler?: (button: Button, ev: MouseEvent) => unknown;
+    /** Behaves as a toggle button (`aria-pressed`). */
+    toggle?: boolean;
+    pressed?: boolean;
+    /** Text shown while loading. Default: `text`. Passing a string to `loading` sets it too. */
+    loadingText?: string;
+}
+export declare class Button extends Component<ButtonConfig> {
+    protected baseCls: string;
+    protected tag: 'button';
+    private textEl;
+    private busyTextEl;
+    private iconHost;
+    protected build(): HTMLButtonElement;
+    protected onRender(): void;
+    protected onDisabled(disabled: boolean): void;
+    setText(text: string): void;
+    setIcon(name: string): void;
+    setVariant(variant: NonNullable<ButtonConfig['variant']>): void;
+    setPressed(pressed: boolean): void;
+    /** The button shows its own spinner (no mask) and ignores clicks while loading. A string is the loading text. */
+    setLoading(loading: boolean | string): void;
+    setLoadingText(text: string): void;
+    /** A subtle ring that confirms the action worked (motion rule 8). */
+    pulse(): void;
+    click(): void;
+}

package/dist/types/components/base/chip/chip.d.ts

@@ -0,0 +1,27 @@
+import { Component, type ComponentConfig } from '../../../core/component.js';
+export interface ChipConfig extends ComponentConfig {
+    text?: string;
+    icon?: string;
+    /** Click toggles it on and off (a filter, a tag being picked): a toggle button with `aria-pressed`. */
+    selectable?: boolean;
+    selected?: boolean;
+    /** Shows a × button that fires `remove` (the app removes the chip). */
+    removable?: boolean;
+    disabled?: boolean;
+    handler?: (chip: Chip) => void;
+}
+/** A compact token: a filter to toggle, a tag to remove, a choice to click. */
+export declare class Chip extends Component<ChipConfig> {
+    protected baseCls: string;
+    protected tag: 'span';
+    private main;
+    private textEl;
+    private removeBtn?;
+    protected onRender(): void;
+    setText(text: string): void;
+    /** Selected state (only meaningful with `selectable`); `notify` fires `change`. */
+    setSelected(on: boolean, notify?: boolean): void;
+    isSelected(): boolean;
+    setDisabled(disabled: boolean): void;
+    protected focusEl(): HTMLElement;
+}

package/dist/types/components/base/codeviewer/codeviewer.d.ts

@@ -0,0 +1,48 @@
+import { Component, type ComponentConfig } from '../../../core/component.js';
+export type CodeLanguage = 'ts' | 'js' | 'json' | 'css' | 'html' | 'sh' | 'text';
+export interface CodeViewerConfig extends ComponentConfig {
+    code?: string;
+    language?: CodeLanguage;
+    /** The bar text. Default: the language name. */
+    title?: string;
+    lineNumbers?: boolean;
+    startLine?: number;
+    /** Lines to mark: `[3, 4]` or `'3-5,8'` (numbers as shown, so they follow `startLine`). */
+    highlight?: number[] | string;
+    wrap?: boolean;
+    copyable?: boolean;
+    bar?: boolean;
+    maxHeight?: number | string;
+}
+type Tok = [kind: string, text: string];
+/** Splits code into tokens (kind '' = plain). Pure: no DOM. */
+export declare function tokenize(code: string, language?: CodeLanguage): Tok[];
+/** Read-only code: syntax colors, line numbers (CSS counters, never copied), marked lines and a copy button. */
+export declare class CodeViewer extends Component<CodeViewerConfig> {
+    protected baseCls: string;
+    private titleEl;
+    private bar;
+    private pre;
+    private codeEl;
+    private status;
+    private copyBtn;
+    protected build(): HTMLDivElement;
+    protected onRender(): void;
+    private get language();
+    private paintBar;
+    /** One line element per line, tokens split at line breaks so a comment or string can span lines. */
+    private paintCode;
+    getCode(): string;
+    /** Copies the code. Without a clipboard (an insecure page) it selects the code instead and resolves false. */
+    copy(): Promise<boolean>;
+    private update;
+    setCode(code: string): void;
+    setLanguage(language: CodeLanguage): void;
+    setTitle(title: string): void;
+    setLineNumbers(lineNumbers: boolean): void;
+    setStartLine(startLine: number): void;
+    setHighlight(highlight: CodeViewerConfig['highlight']): void;
+    setWrap(wrap: boolean): void;
+    setMaxHeight(maxHeight: CodeViewerConfig['maxHeight']): void;
+}
+export {};

package/dist/types/components/base/icon/icon.d.ts

@@ -0,0 +1,17 @@
+import { Component, type ComponentConfig } from '../../../core/component.js';
+/** Registers icons by name. A value is either SVG inner markup (24×24 viewBox, stroke style) or a full `<svg>` string. Trusted: comes from your code. */
+export declare function registerIcons(map: Record<string, string>): void;
+export declare const hasIcon: (name: string) => boolean;
+/** A `<span class="op-icon">` holding the SVG. Decorative unless `label` is given. */
+export declare function iconEl(name: string, label?: string): HTMLElement;
+export interface IconConfig extends ComponentConfig {
+    name?: string;
+    label?: string;
+}
+export declare class Icon extends Component<IconConfig> {
+    protected baseCls: string;
+    protected tag: 'span';
+    protected onRender(): void;
+    setName(name: string): void;
+    setLabel(label: string): void;
+}

package/dist/types/components/base/label/label.d.ts

@@ -0,0 +1,14 @@
+import { Component, type ComponentConfig } from '../../../core/component.js';
+export interface LabelConfig extends ComponentConfig {
+    text?: string;
+    /** Id of the field this label names (renders a `<label for>`). */
+    for?: string;
+    variant?: 'default' | 'muted' | 'title';
+}
+export declare class Label extends Component<LabelConfig> {
+    protected baseCls: string;
+    protected build(): HTMLLabelElement | HTMLSpanElement;
+    protected onRender(): void;
+    setText(text: string): void;
+    setVariant(variant: NonNullable<LabelConfig['variant']>): void;
+}

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

@@ -0,0 +1 @@
+export * from '../components/navigation/breadcrumb/breadcrumb.js';

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

@@ -0,0 +1 @@
+export * from '../components/base/button/button.js';

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

@@ -0,0 +1 @@
+export * from '../components/dates/calendar/calendar.js';

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

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

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

@@ -0,0 +1,84 @@
+import { Component, type ComponentConfig } from '../../../core/component.js';
+export interface ChatMessage {
+    id?: string | number;
+    /** The author's id (compare with the `me` of the config). */
+    from: string;
+    text: string;
+    time?: number | Date | string;
+    status?: 'sending' | 'sent' | 'delivered' | 'read' | 'error';
+    /** The id of the message this one answers (shown as a quote). */
+    replyTo?: string | number;
+    /** Anything the app wants to keep with the message. */
+    meta?: unknown;
+}
+export interface ChatConfig extends ComponentConfig {
+    messages?: ChatMessage[];
+    /** The id of whoever is using the chat: their messages go on the right. */
+    me: string;
+    users?: Record<string, {
+        name: string;
+        color?: string;
+    }>;
+    /** Show the author's name above the first bubble of a group of theirs. Default true. */
+    showAuthors?: boolean;
+    placeholder?: string;
+    /** Prompt chips above the composer; clicking one sends it. */
+    suggestions?: string[];
+    readonly?: boolean;
+    /** Enter sends and Shift+Enter breaks the line. Default true. */
+    sendOnEnter?: boolean;
+    maxLength?: number;
+    /** Custom bubble content. The default is a minimal, safe formatting (`**bold**`, `*italic*`, `` `code` ``, line breaks). */
+    renderer?: (msg: ChatMessage) => string | Node;
+}
+/** Conversation view: bubbles grouped by author and day, delivery ticks, typing dots, streaming text, prompt chips and a composer. */
+export declare class Chat extends Component<ChatConfig> {
+    protected baseCls: string;
+    private msgs;
+    private seq;
+    private logEl;
+    private emptyEl;
+    private typingEl;
+    private chipsEl;
+    private input;
+    private sendBtn;
+    private busy;
+    protected build(): HTMLDivElement;
+    protected onRender(): void;
+    notifyMount(): void;
+    private norm;
+    getMessages(): ChatMessage[];
+    addMessage(msg: ChatMessage): ChatMessage;
+    setMessages(list: ChatMessage[]): void;
+    updateMessage(id: string | number, patch: Partial<ChatMessage>): void;
+    /** Adds text to a message: for answers that arrive in pieces (AI streaming). Only that bubble's text is redrawn. */
+    appendToMessage(id: string | number, text: string): void;
+    removeMessage(id: string | number): void;
+    private msgEl;
+    private renderAll;
+    /** The day separator (when the day changes) and the message itself. */
+    private nodesFor;
+    private mountMsg;
+    private dayLabel;
+    private fill;
+    private buildMsg;
+    private statusEl;
+    /** Group classes: first/last bubble of a run by the same author on the same day. */
+    private group;
+    private decorate;
+    private syncEmpty;
+    private nearBottom;
+    scrollToBottom(): void;
+    /** `true` shows the dots, a name shows "name is typing…", `false` hides them. */
+    setTyping(who: boolean | string): void;
+    setSuggestions(list: string[]): void;
+    /** While busy (an answer is on its way) sending is off and the log tells assistive tech to wait. */
+    setBusy(busy: boolean): void;
+    setReadonly(readonly: boolean): void;
+    setPlaceholder(text: string): void;
+    focus(): void;
+    private grow;
+    private submit;
+    /** The same path as the send button. Returns false when nothing was sent (empty, busy, read-only or cancelled). */
+    send(text: string): boolean;
+}

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+export * from '../components/base/chip/chip.js';

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

@@ -0,0 +1 @@
+export * from '../components/base/codeviewer/codeviewer.js';

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

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

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

@@ -0,0 +1 @@
+export * from '../components/overlays/commandpalette/commandpalette.js';

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

@@ -0,0 +1 @@
+export * from '../components/layout/container/container.js';

package/dist/types/components/data/cellediting/cellediting.d.ts

@@ -0,0 +1,10 @@
+import type { GridPlugin } from '../grid/grid.js';
+export interface CellEditingOptions {
+    /** What starts editing with the pointer: a double click (default) or a single click. F2 and Enter always do. */
+    trigger?: 'dblclick' | 'click';
+}
+/**
+ * Inline editing plugin. Events on the grid: `before-edit(record, field)` (cancelable), `edit(record, field, value, old)`
+ * after a valid value was written to the record (`record.set`, so it is marked modified), `edit-cancel(record, field)`.
+ */
+export declare function cellEditing(options?: CellEditingOptions): GridPlugin;

package/dist/types/components/data/dataview/dataview.d.ts

@@ -0,0 +1,61 @@
+import { Component, type ComponentConfig } from '../../../core/component.js';
+import { Store } from '../../../data/store.js';
+import type { Model } from '../../../data/model.js';
+export interface DataViewConfig extends ComponentConfig {
+    store?: Store<any>;
+    /** Used when no `store` is given. */
+    data?: Record<string, any>[];
+    /** What one item shows. Text is escaped; return a Node for markup. */
+    renderer: (rec: Model, index: number) => string | Node;
+    selection?: 'none' | 'single' | 'multi';
+    /** Minimum item width (CSS length): the columns adapt to the room there is. Default `10rem`. */
+    itemWidth?: string;
+    gap?: string;
+    itemCls?: (rec: Model) => string;
+    emptyText?: string;
+    /** Items enter one after the other (30 ms apart, motion rule 3) when the data loads, the page or filter changes. Default true. */
+    stagger?: boolean;
+    /** A Pagination bar bound to the store. */
+    paging?: boolean;
+    pageSize?: number;
+}
+/** A Store as a responsive grid of cards: selection, 2-D keyboard navigation, per-item actions and optional paging. */
+export declare class DataView extends Component<DataViewConfig> {
+    protected baseCls: string;
+    private store;
+    private itemsEl;
+    private emptyEl;
+    private pager?;
+    private selected;
+    private active;
+    private anchor;
+    private offStore?;
+    protected build(): HTMLDivElement;
+    protected onRender(): void;
+    notifyMount(): void;
+    private bindStore;
+    setStore(store: Store<any>): void;
+    getStore(): Store<any>;
+    private paint;
+    /** Redraws the items (after a field of a record changed). */
+    refresh(): void;
+    private items;
+    private indexOf;
+    /** How many items fit in a row now (items that share the first one's top edge). */
+    columns(): number;
+    getSelection(): Model[];
+    select(target: Model | number, opts?: {
+        add?: boolean;
+    }): void;
+    selectAll(): void;
+    deselectAll(): void;
+    private changed;
+    private paintSelection;
+    /** Click semantics: plain = replace, Ctrl/⌘ = toggle, Shift = range from the anchor (multi only). */
+    private pick;
+    private onClick;
+    private setActive;
+    focusItem(i: number): void;
+    private onKey;
+    protected onDestroy(): void;
+}

package/dist/types/components/data/filterbuilder/filterbuilder.d.ts

@@ -0,0 +1,73 @@
+import { Component, type ComponentConfig } from '../../../core/component.js';
+import type { FilterGroup } from '../../../data/proxy.js';
+import type { Store } from '../../../data/store.js';
+export interface FilterField {
+    name: string;
+    label?: string;
+    type?: 'text' | 'number' | 'date' | 'select';
+    /** Fields with the same group sit together in the field pickers (as columns do in the Grid's column menu). */
+    group?: string;
+    /** For `select`: the choices. */
+    options?: Array<string | number | {
+        value: string | number;
+        label: string;
+    }>;
+}
+export interface FilterBuilderConfig extends ComponentConfig {
+    fields: FilterField[];
+    /** Starting filters. */
+    value?: FilterGroup | null;
+    /** Filtered as the user edits (`live`) or when Apply is pressed. */
+    store?: Store<any>;
+    /** Apply on every edit (debounced). Default true. With `false` an Apply button appears. */
+    live?: boolean;
+    /**
+     * What "Add filter" does: `'row'` (default) adds an empty row for the first field; `'pick'` first asks
+     * which field to filter by (a menu of the fields, grouped by `group`, with a search field past 6 fields) and adds the row for it.
+     */
+    addMode?: 'row' | 'pick';
+    /** Deepest group nesting allowed. Default 3. */
+    maxDepth?: number;
+}
+/**
+ * A dynamic filter editor: rows of `field · operator · value` that accumulate below each other, joined by AND or OR,
+ * with nestable groups. The result is a `FilterGroup` for `Store.filter`.
+ */
+export declare class FilterBuilder extends Component<FilterBuilderConfig> {
+    protected baseCls: string;
+    private root;
+    private parts;
+    private nextId;
+    private cancelApply?;
+    private pickMenu?;
+    protected onRender(): void;
+    private fromNode;
+    private field;
+    private complete;
+    private toNode;
+    /** The complete rules as a filter tree (incomplete rows are left out); null when there is nothing to filter by. */
+    getFilter(): FilterGroup | null;
+    setFilter(filter: FilterGroup | null): void;
+    /** Removes every row and applies the empty filter. */
+    clear(): void;
+    /** Pushes the current filter to the store and fires `apply`. */
+    apply(): void;
+    /** Adds a row (optionally for a given field) to the root group. */
+    addRule(field?: string): void;
+    setFields(fields: FilterField[]): void;
+    setStore(store: Store<any> | undefined): void;
+    private newRule;
+    private changed;
+    /** Rebuilds the rows, keeping keyboard focus on the same control. */
+    private paint;
+    private button;
+    private select;
+    private group;
+    /** "Add filter" in `pick` mode: a menu of the fields; the chosen one gets the new row. */
+    private pick;
+    private removeBtn;
+    private rule;
+    private editor;
+    /** Registers an editor, labels its input, and makes Enter apply. */
+    private own1;
+}