optikos 0.0.0-stage → 0.1.0

package/dist/themes/soft.css

@@ -0,0 +1,101 @@
+/* Soft: airy and rounded, pastel violet, pill buttons, diffuse shadows, no hairlines. data-op-theme="soft" */
+@layer optikos {
+  :root[data-op-theme~='soft'] {
+    background: linear-gradient(135deg, #eef1fb 0%, #f6efff 100%) fixed;
+  }
+  [data-op-theme~='soft'] {
+    --op-color-bg: #eef1fb;
+    --op-color-surface: #ffffff;
+    --op-color-surface-2: #f4f5fd;
+    --op-color-fg: #2d3142;
+    --op-color-fg-muted: #7b819b;
+    --op-color-border: #e6e9f7;
+    --op-color-border-strong: #d6dbf0;
+    --op-color-hover: #f1efff;
+    --op-color-selected: #e6e0ff;
+    --op-color-primary: #7c5cff;
+    --op-color-primary-hover: #6a48f5;
+    --op-color-primary-fg: #ffffff;
+    --op-color-primary-soft: #efeaff;
+    --op-color-danger: #ef5b7b;
+    --op-color-danger-hover: #dc4565;
+    --op-color-danger-fg: #ffffff;
+    --op-color-danger-soft: #ffe9ee;
+    --op-color-success: #2fb59a;
+    --op-color-success-soft: #dff6f0;
+    --op-color-warning: #f2a03d;
+    --op-color-warning-soft: #fff0dc;
+    --op-color-info: #4f8cff;
+    --op-color-info-soft: #e5eeff;
+    --op-color-focus: #9a82ff;
+    --op-color-disabled-fg: #aab0c6;
+    --op-color-disabled-bg: #f1f2fa;
+    --op-color-overlay: rgb(45 49 66 / 0.35);
+
+    --op-font-family: ui-rounded, 'SF Pro Rounded', 'Segoe UI', system-ui, sans-serif;
+    --op-border-width: 1px;
+    --op-font-size: 0.9375rem;
+    --op-line-height: 1.5;
+    --op-font-weight-medium: 500;
+    --op-font-weight-bold: 600;
+
+    --op-space-1: 0.375rem;
+    --op-space-2: 0.625rem;
+    --op-space-3: 1rem;
+    --op-space-4: 1.25rem;
+    --op-space-5: 1.75rem;
+    --op-control-height: 2.75rem;
+    --op-control-padding-x: 1.125rem;
+    --op-row-height: 3.25rem;
+    --op-radius-sm: 0.625rem;
+    --op-radius: 0.875rem;
+    --op-radius-lg: 1.5rem;
+    --op-focus-width: 3px;
+
+    --op-shadow-sm: 0 2px 6px rgb(124 92 255 / 0.1);
+    --op-shadow: 0 8px 24px rgb(124 92 255 / 0.14);
+    --op-shadow-lg: 0 20px 50px rgb(124 92 255 / 0.22);
+    --op-duration: 200ms;
+    --op-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
+
+    --op-button-radius: var(--op-radius-pill);
+    --op-button-primary-bg: linear-gradient(135deg, #8b6cff, #6f4df0);
+    --op-panel-radius: 1.25rem;
+    --op-panel-shadow: var(--op-shadow);
+    --op-panel-border: transparent;
+    --op-panel-header-bg: transparent;
+    --op-grid-radius: 1.25rem;
+    --op-grid-border: transparent;
+    --op-grid-header-bg: var(--op-color-surface-2);
+    --op-tabs-tab-active-border: var(--op-color-primary);
+    --op-window-radius: 1.5rem;
+  }
+  [data-op-theme~='soft'] .op-button {
+    box-shadow: var(--op-shadow-sm);
+  }
+  [data-op-theme~='soft'] .op-button:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: var(--op-shadow);
+  }
+  [data-op-theme~='soft'] .op-button--ghost {
+    box-shadow: none;
+  }
+  [data-op-theme~='soft'] .op-textfield__input {
+    border-color: transparent;
+    background: var(--op-color-surface-2);
+  }
+  [data-op-theme~='soft'] .op-textfield__input:focus {
+    background: var(--op-color-surface);
+    box-shadow: var(--op-shadow-sm);
+  }
+  [data-op-theme~='soft'] .op-panel__header {
+    border-block-end: 0;
+    padding-block-start: var(--op-space-4);
+  }
+  [data-op-theme~='soft'] .op-grid__body-row {
+    border-block-end-color: transparent;
+  }
+  [data-op-theme~='soft'] .op-grid__body-row:hover {
+    border-radius: var(--op-radius);
+  }
+}

package/dist/themes/terminal.css

@@ -0,0 +1,91 @@
+/* Terminal: phosphor green on black, monospace, square, dense, glowing focus. data-op-theme="terminal" */
+@layer optikos {
+  [data-op-theme~='terminal'] {
+    color-scheme: dark; /* native scrollbars and controls follow */
+    --op-color-bg: #040905;
+    --op-color-surface: #08110a;
+    --op-color-surface-2: #0d1a10;
+    --op-color-fg: #b6f5c4;
+    --op-color-fg-muted: #5f9b70;
+    --op-color-border: #1c4a28;
+    --op-color-border-strong: #2c7a40;
+    --op-color-hover: #11301a;
+    --op-color-selected: #164a24;
+    --op-color-primary: #39ff14;
+    --op-color-primary-hover: #7dff64;
+    --op-color-primary-fg: #021006;
+    --op-color-primary-soft: #0d2a12;
+    --op-color-danger: #ff5555;
+    --op-color-danger-hover: #ff8080;
+    --op-color-danger-fg: #1a0000;
+    --op-color-danger-soft: #2a0b0b;
+    --op-color-success: #39ff14;
+    --op-color-success-soft: #0d2a12;
+    --op-color-warning: #ffd166;
+    --op-color-warning-soft: #2e2408;
+    --op-color-info: #5ad1ff;
+    --op-color-info-soft: #0a2430;
+    --op-color-focus: #39ff14;
+    --op-color-disabled-fg: #3b6a49;
+    --op-color-disabled-bg: #0a140c;
+    --op-color-overlay: rgb(0 0 0 / 0.78);
+    --op-color-inverse-bg: #b6f5c4;
+    --op-color-inverse-fg: #040905;
+
+    --op-font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+    --op-border-width: 1px;
+    --op-font-size: 0.8125rem;
+    --op-font-size-sm: 0.6875rem;
+    --op-line-height: 1.35;
+
+    --op-space-1: 0.125rem;
+    --op-space-2: 0.375rem;
+    --op-space-3: 0.5rem;
+    --op-space-4: 0.75rem;
+    --op-space-5: 1.125rem;
+    --op-control-height: 1.875rem;
+    --op-control-padding-x: 0.625rem;
+    --op-row-height: 1.75rem;
+    --op-radius-sm: 0;
+    --op-radius: 0;
+    --op-radius-lg: 0;
+    --op-radius-pill: 0;
+    --op-focus-width: 1px;
+    --op-focus-offset: 0;
+    --op-icon-stroke: 1.5;
+
+    --op-shadow-sm: 0 0 0 1px #1c4a28;
+    --op-shadow: 0 0 0 1px #2c7a40, 0 0 14px rgb(57 255 20 / 0.12);
+    --op-shadow-lg: 0 0 0 1px #39ff14, 0 0 32px rgb(57 255 20 / 0.2);
+    --op-duration: 0ms;
+
+    --op-panel-header-bg: transparent;
+    --op-grid-header-bg: var(--op-color-surface-2);
+    --op-grid-header-fg: var(--op-color-primary);
+    --op-tabs-tab-active-fg: var(--op-color-primary);
+  }
+  [data-op-theme~='terminal'] .op-panel__title::before {
+    content: '> ';
+    color: var(--op-color-primary);
+  }
+  [data-op-theme~='terminal'] .op-button:not(.op-button--ghost) {
+    border-color: var(--op-color-primary);
+  }
+  [data-op-theme~='terminal'] .op-button {
+    text-transform: lowercase;
+  }
+  [data-op-theme~='terminal'] .op-textfield__input {
+    caret-color: var(--op-color-primary);
+  }
+  [data-op-theme~='terminal'] .op-textfield__input:focus,
+  [data-op-theme~='terminal'] .op-button:focus-visible {
+    box-shadow: 0 0 10px rgb(57 255 20 / 0.35);
+  }
+  [data-op-theme~='terminal'] ::selection {
+    color: var(--op-color-primary-fg);
+    background: var(--op-color-primary);
+  }
+  [data-op-theme~='terminal'] .op-grid__hcell {
+    text-transform: uppercase;
+  }
+}

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/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/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/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/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/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,71 @@
+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';
+    /** 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) 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;
+}