optikos 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,40 @@
+type Trigger = Element | {
+    x: number;
+    y: number;
+} | undefined;
+/** `transform-origin` that puts the popover's growth point at the trigger (rules 11 and 12). */
+export declare function originFor(trigger: Trigger, el: HTMLElement): string | undefined;
+type Kind = 'dropdown' | 'popover' | 'modal';
+/**
+ * A floating element appears: fades in and scales up from `popover.scale` (0.95), growing out of the trigger, ease-out.
+ * Resolves when it finished; `null` when nothing was animated (motion off, no Web Animations).
+ */
+export declare function popIn(el: HTMLElement, trigger?: Trigger, kind?: Kind): Promise<void> | null;
+/** The inverse: shrinks back toward the trigger, `exitRatio` (80 %) as long as the entrance, ease-in. The caller hides the element when it resolves. */
+export declare function popOut(el: HTMLElement, trigger?: Trigger, kind?: Kind): Promise<void> | null;
+export interface StaggerOptions {
+    /** Delay between consecutive items (ms). Default `stagger.step` (30). */
+    step?: number;
+    /** After this many items the delay stops growing. Default `stagger.max` (12). */
+    max?: number;
+    /** Start offset in px (rises from below). Default 6. */
+    dy?: number;
+}
+/** The delay (ms) of the item at `index` in a staggered group. */
+export declare const staggerDelay: (index: number, o?: StaggerOptions) => number;
+/** Items of a list enter one after the other, 30 ms apart (rule 3), each ease-out. */
+export declare function stagger(els: ArrayLike<Element>, o?: StaggerOptions): Promise<void> | null;
+/** The parts of a card settle in order: every match of the first selector, then the second... one stagger step apart (rule 6). */
+export declare function staggerDetails(root: ParentNode, selectors: string[], o?: StaggerOptions): Promise<void> | null;
+/** A subtle ring and a tiny swell to confirm that something worked (rule 8). */
+export declare function pulse(el: HTMLElement, color?: string): Promise<void> | null;
+/** A plain entrance: fade in while rising a little, ease-out (rule 1). */
+export declare function enter(el: HTMLElement, o?: {
+    dy?: number;
+    delay?: number;
+}): Promise<void> | null;
+/** The same motion going out: shorter by `exitRatio`, ease-in (rules 1 and 15). */
+export declare function exit(el: HTMLElement, o?: {
+    dy?: number;
+}): Promise<void> | null;
+export {};

package/dist/types/motion/extras.d.ts

@@ -0,0 +1,66 @@
+type Pt = {
+    x: number;
+    y: number;
+};
+/**
+ * Points of a quadratic curve from (x0,y0) to (x1,y1) that bows sideways by `bend` × the distance: the path of a thing that
+ * is thrown, not slid (rule 7). `steps + 1` points, the first and last are the ends.
+ */
+export declare function arcPoints(x0: number, y0: number, x1: number, y1: number, bend: number, steps?: number): Pt[];
+/** Moves an element to a target along an arc, ease-in-out (rules 7 and 9). The element ends at the target; `Animation.cancel()` undoes it. */
+export declare function moveArc(el: HTMLElement, to: Element | Pt, o?: {
+    bend?: number;
+    duration?: number;
+}): Animation | null;
+/** Resistance past a limit: the further you pull, the less it moves (never more than `limit`). Pure, for your own drags (rule 19). */
+export declare function rubberBand(distance: number, limit: number, resistance?: number): number;
+/**
+ * Rubber-band overscroll for a scrollable element, only when you push past its start or end (rule 19): the content follows the
+ * finger with growing resistance and eases back (no bounce) when you let go. Returns the function that removes it.
+ */
+export declare function rubberScroll(scroller: HTMLElement, axis?: 'y' | 'x'): () => void;
+/**
+ * A knob that stretches `stretch.amount` (12 %) along its travel while it moves, from the side it is moving away from, and
+ * relaxes when released. While held nothing tweens (rule 14): the stretch follows the pointer directly.
+ */
+export declare function knobStretch(knob: HTMLElement, axis?: 'x' | 'y'): {
+    /** Call with the movement since the last call (px, signed). */
+    move(delta: number): void;
+    release(): void;
+};
+/** Makes `knob` draggable along `track`: value from `min` to `max` in `step`s, the knob positioned in %, stretching as it moves. */
+export declare function dragKnob(knob: HTMLElement, track: HTMLElement, o?: {
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    axis?: 'x' | 'y';
+    onChange?: (v: number) => void;
+}): {
+    getValue: () => number;
+    setValue: (v: number) => void;
+    dispose: () => void;
+};
+/**
+ * Replaces the content of `host` with `next` letting the old and the new coexist for the whole transition: the old fades out
+ * while the new fades in, both softly blurred (rules 16 and 18). No flash, no empty frame in between.
+ */
+export declare function swap(host: HTMLElement, next: Node | string): Promise<void>;
+type From = 'left' | 'right' | 'top' | 'bottom' | 'center';
+/** Reveals an element through a mask that wipes across it (rule 17). */
+export declare function reveal(el: HTMLElement, from?: From): Promise<void> | null;
+/** Changes an element's background by wiping the new color across it through a mask, instead of fading (rule 17). */
+export declare function wipeColor(el: HTMLElement, color: string, from?: From): Promise<void>;
+/**
+ * Shared-element transitions by identity (rule 20, "layoutId"): `snapshot` the element where it is, show the next screen, and
+ * `mount` the element that has the same id there: it flies from the old rectangle to the new one along an arc, ease-in-out.
+ */
+export declare const layoutId: {
+    snapshot(id: string, el: Element): void;
+    has: (id: string) => boolean;
+    release(id: string): void;
+    mount(id: string, el: HTMLElement): Animation | null;
+    /** `snapshot` + `mount` in one go, for when the new element already exists. */
+    transition(id: string, from: Element, to: HTMLElement): Animation | null;
+};
+export {};

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

@@ -0,0 +1,3 @@
+export { motion, DEFAULTS, isBouncy, type MotionConfig, type DeepPartial } from './config.js';
+export { popIn, popOut, originFor, stagger, staggerDelay, staggerDetails, pulse, enter, exit, type StaggerOptions } from './core.js';
+export { arcPoints, moveArc, rubberBand, rubberScroll, knobStretch, dragKnob, swap, reveal, wipeColor, layoutId } from './extras.js';

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

@@ -0,0 +1,31 @@
+type Values = Record<string, string | number | undefined>;
+type ColorToken = 'bg' | 'surface' | 'surface-2' | 'fg' | 'fg-muted' | 'border' | 'border-strong' | 'hover' | 'selected' | 'primary' | 'primary-hover' | 'primary-fg' | 'primary-soft' | 'danger' | 'danger-hover' | 'danger-fg' | 'danger-soft' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | 'info' | 'info-soft' | 'focus' | 'overlay';
+export interface ThemeDefinition {
+    /** Semantic colors: `{ primary: '#06f' }` → `--op-color-primary`. camelCase keys are kebab-cased. */
+    color?: Partial<Record<ColorToken | string, string>>;
+    font?: Values;
+    space?: 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`. A plain value sets the group's own token (`{ radius: 0 }` → `--op-radius`). */
+    [group: string]: Values | string | number | undefined;
+}
+export interface Theme {
+    name: string;
+    /** CSS text, scoped to `[data-op-theme~="name"]`, inside `@layer optikos`. */
+    css: string;
+    /** Injects the CSS once without activating it (e.g. to offer it in a theme picker). */
+    inject(): void;
+    /** Injects the CSS and activates the theme on `el` (default: `<html>`), keeping other themes (`"dark custom"`). */
+    apply(el?: HTMLElement): void;
+}
+/**
+ * Typed, proprietary theme format. Produces the same custom properties a hand-written CSS theme would.
+ * Numbers are emitted unitless; write units as strings (`'4px'`).
+ */
+export declare function defineTheme(def: ThemeDefinition, name?: string): Theme;
+/** Activates themes on an element (default `<html>`): `setTheme('dark compact')` or `setTheme(['dark', 'custom'])`. */
+export declare function setTheme(names: string | string[], el?: HTMLElement): void;
+export {};

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

@@ -0,0 +1 @@
+export { defineTheme, setTheme, type Theme, type ThemeDefinition } from './define.js';

package/dist/types/ui/enums.d.ts

@@ -0,0 +1,82 @@
+export declare const Variant: {
+    readonly Default: 'default';
+    readonly Primary: 'primary';
+    readonly Danger: 'danger';
+    readonly Ghost: 'ghost';
+};
+export type Variant = (typeof Variant)[keyof typeof Variant];
+export declare const LabelPos: {
+    readonly Top: 'top';
+    readonly Left: 'left';
+};
+export type LabelPos = (typeof LabelPos)[keyof typeof LabelPos];
+export declare const Direction: {
+    readonly Vertical: 'vertical';
+    readonly Horizontal: 'horizontal';
+};
+export type Direction = (typeof Direction)[keyof typeof Direction];
+/** Layout `border` regions. */
+export declare const Region: {
+    readonly North: 'north';
+    readonly South: 'south';
+    readonly West: 'west';
+    readonly East: 'east';
+    readonly Center: 'center';
+};
+export type Region = (typeof Region)[keyof typeof Region];
+/** Widget sides. */
+export declare const Side: {
+    readonly Right: 'right';
+    readonly Left: 'left';
+    readonly Top: 'top';
+    readonly Bottom: 'bottom';
+};
+export type Side = (typeof Side)[keyof typeof Side];
+export declare const LayoutKind: {
+    readonly Fit: 'fit';
+    readonly HBox: 'hbox';
+    readonly VBox: 'vbox';
+    readonly Border: 'border';
+    readonly Grid: 'grid';
+    readonly Card: 'card';
+};
+export type LayoutKind = (typeof LayoutKind)[keyof typeof LayoutKind];
+export declare const Selection: {
+    readonly None: 'none';
+    readonly Single: 'single';
+    readonly Multi: 'multi';
+};
+export type Selection = (typeof Selection)[keyof typeof Selection];
+export declare const ToastType: {
+    readonly Info: 'info';
+    readonly Success: 'success';
+    readonly Warning: 'warning';
+    readonly Error: 'error';
+};
+export type ToastType = (typeof ToastType)[keyof typeof ToastType];
+/** Filter operators (Store.filter, FilterBuilder, lookup filters). */
+export declare const Op: {
+    readonly Eq: 'eq';
+    readonly Ne: 'ne';
+    readonly Contains: 'contains';
+    readonly NotContains: 'notContains';
+    readonly StartsWith: 'startsWith';
+    readonly EndsWith: 'endsWith';
+    readonly Gt: 'gt';
+    readonly Ge: 'ge';
+    readonly Lt: 'lt';
+    readonly Le: 'le';
+    readonly Between: 'between';
+    readonly NotBetween: 'notBetween';
+    readonly In: 'in';
+    readonly Nin: 'nin';
+    readonly Empty: 'empty';
+    readonly NotEmpty: 'notEmpty';
+};
+export type Op = (typeof Op)[keyof typeof Op];
+/** The shipped themes (`setTheme(ThemeName.Dark)`; add `' compact'` for the dense variant). */
+export declare const ThemeName: {
+    readonly Light: 'light';
+    readonly Dark: 'dark';
+};
+export type ThemeName = (typeof ThemeName)[keyof typeof ThemeName];

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

@@ -0,0 +1,2 @@
+export { ui } from './ui.js';
+export * from './enums.js';

package/dist/types/ui/ui.d.ts

@@ -0,0 +1,67 @@
+import { TextField } from '../components/fields/textfield/textfield.js';
+import { TextArea } from '../components/fields/textarea/textarea.js';
+import { NumberField } from '../components/fields/numberfield/numberfield.js';
+import { DateField } from '../components/fields/datefield/datefield.js';
+import { DateRangeField } from '../components/fields/daterangefield/daterangefield.js';
+import { Checkbox } from '../components/fields/checkbox/checkbox.js';
+import { Toggle } from '../components/fields/toggle/toggle.js';
+import { CheckboxGroup } from '../components/fields/checkboxgroup/checkboxgroup.js';
+import { RadioGroup, type RadioOption } from '../components/fields/radiogroup/radiogroup.js';
+import { Select } from '../components/fields/select/select.js';
+import { ComboBox } from '../components/fields/combobox/combobox.js';
+import { SuggestField } from '../components/fields/suggestfield/suggestfield.js';
+import { LookupField } from '../components/fields/lookupfield/lookupfield.js';
+import { SecretField } from '../components/fields/secretfield/secretfield.js';
+import { Slider } from '../components/fields/slider/slider.js';
+import { Dial } from '../components/fields/dial/dial.js';
+import { Button } from '../components/base/button/button.js';
+import { Panel } from '../components/layout/panel/panel.js';
+import { Toolbar } from '../components/layout/toolbar/toolbar.js';
+import { Container } from '../core/container.js';
+import { Form } from '../components/form/form/form.js';
+import type { Component } from '../core/component.js';
+import type { AnyConfig } from '../core/registry.js';
+type Cfg = Record<string, any>;
+type Item = Component | AnyConfig | string;
+type Options = (string | number | {
+    value: unknown;
+    label: string;
+    disabled?: boolean;
+})[];
+export declare const ui: {
+    text: (name: string, label?: string, c?: Cfg) => TextField<string, any>;
+    email: (name: string, label?: string, c?: Cfg) => TextField<string, any>;
+    password: (name: string, label?: string, c?: Cfg) => TextField<string, any>;
+    area: (name: string, label?: string, c?: Cfg) => TextArea;
+    number: (name: string, label?: string, c?: Cfg) => NumberField;
+    date: (name: string, label?: string, c?: Cfg) => DateField;
+    dateRange: (name: string, label?: string, c?: Cfg) => DateRangeField;
+    secret: (name: string, label?: string, c?: Cfg) => SecretField;
+    slider: (name: string, label?: string, c?: Cfg) => Slider;
+    dial: (name: string, label?: string, c?: Cfg) => Dial;
+    /** `boxLabel` is the text beside the box. */
+    check: (name: string, boxLabel?: string, c?: Cfg) => Checkbox;
+    /** An on/off switch; `boxLabel` is the text beside it. */
+    toggle: (name: string, boxLabel?: string, c?: Cfg) => Toggle;
+    radio: (name: string, label: string, options: RadioOption[], c?: Cfg) => RadioGroup;
+    /** Several choices; the value is the list of checked values. */
+    checkGroup: (name: string, label: string, options: RadioOption[], c?: Cfg) => CheckboxGroup;
+    select: (name: string, label: string, options: Options, c?: Cfg) => Select<unknown>;
+    combo: (name: string, label: string, options: Options, c?: Cfg) => ComboBox<unknown>;
+    suggest: (name: string, label: string, query: (text: string, o: {
+        signal: AbortSignal;
+    }) => unknown, c?: Cfg) => SuggestField<unknown>;
+    /** `lookup` is a LookupDef or the name given to `registerLookup`. */
+    lookup: (name: string, label: string, lookup: Cfg | string, c?: Cfg) => LookupField<unknown>;
+    button: (text: string, handler?: (b: Button, ev: MouseEvent) => unknown, c?: Cfg) => Button;
+    primary: (text: string, handler?: (b: Button, ev: MouseEvent) => unknown, c?: Cfg) => Button;
+    danger: (text: string, handler?: (b: Button, ev: MouseEvent) => unknown, c?: Cfg) => Button;
+    row: (...items: Item[]) => Container<Cfg>;
+    col: (...items: Item[]) => Container<Cfg>;
+    /** `columns`: a number (equal columns, one column on narrow containers) or a CSS `grid-template-columns`. */
+    grid: (columns: number | string, ...items: Item[]) => Container<Cfg>;
+    panel: (title: string, items: Item[], c?: Cfg) => Panel<Cfg>;
+    toolbar: (...items: Item[]) => Toolbar;
+    form: (items: Item[], c?: Cfg) => Form;
+};
+export {};

package/dist/ui.js

@@ -0,0 +1,2 @@
+import{a,b,c,d,e,f,g,h,i,j,k}from"./chunk-ATFJ7PNA.js";import"./chunk-HXDTGP2K.js";import"./chunk-VU3GIDZ3.js";import"./chunk-6VBK2I5B.js";import"./chunk-NXSTUFS7.js";import"./chunk-G2KUK6AT.js";import"./chunk-Z2Z52GFT.js";import"./chunk-XHOBNSBO.js";import"./chunk-I4SP6JTU.js";import"./chunk-OGRFQTXA.js";import"./chunk-JI265XFO.js";import"./chunk-EDUMAMK4.js";import"./chunk-JK74QK3M.js";import"./chunk-GBPLNXMP.js";import"./chunk-TZOQWCVH.js";import"./chunk-EV73ADN2.js";import"./chunk-5Q76ACVI.js";import"./chunk-CUN5QO4T.js";import"./chunk-VF7BGP6L.js";import"./chunk-KLLAY2IM.js";import"./chunk-4LZZ244E.js";import"./chunk-LQRFNQ2N.js";import"./chunk-XYZ6VZ5T.js";import"./chunk-GNU4VOOE.js";import"./chunk-23XLG2EM.js";import"./chunk-YHEMA56R.js";import"./chunk-ZVK4L5GK.js";import"./chunk-7KMIFXHZ.js";import"./chunk-3TAW4AKH.js";import"./chunk-FHM5NUS4.js";import"./chunk-Z2JBUHKA.js";import"./chunk-W3H7GTJY.js";import"./chunk-G2DAD3MQ.js";import"./chunk-OWEQT2HN.js";import"./chunk-ZWNQREWS.js";import"./chunk-E4VNLYO2.js";import"./chunk-676AKAGF.js";import"./chunk-VV7CFMPZ.js";import"./chunk-2ZRNGG2N.js";import"./chunk-5JEXM5S7.js";import"./chunk-LW2WRUVL.js";import"./chunk-OEAXCCVM.js";import"./chunk-6NCXO5ZP.js";import"./chunk-2ZUZ5HDL.js";import"./chunk-4AA4FQEM.js";import"./chunk-2UPUC4RK.js";import"./chunk-4EZJ5FKJ.js";import"./chunk-A2NKDOYN.js";import"./chunk-PZSHOSOS.js";import"./chunk-TIPK3SCJ.js";import"./chunk-MW3RWBZ7.js";import"./chunk-4C666HHU.js";export{d as Direction,c as LabelPos,g as LayoutKind,j as Op,e as Region,h as Selection,f as Side,k as ThemeName,i as ToastType,b as Variant,a as ui};
+//# sourceMappingURL=ui.js.map

package/dist/ui.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/package.json

@@ -1,6 +1,106 @@
 {
   "name": "optikos",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Declarative UI components in plain TypeScript: forms, grids, windows and themes. No runtime dependencies.",
+  "keywords": [
+    "ui",
+    "ui-components",
+    "components",
+    "typescript",
+    "vanilla",
+    "no-dependencies",
+    "declarative",
+    "grid",
+    "form",
+    "design-tokens",
+    "theming",
+    "accessibility"
+  ],
+  "author": "Denis Zickuhr",
+  "license": "MIT",
+  "homepage": "https://denis-zickuhr.github.io/optikos/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Denis-Zickuhr/optikos.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Denis-Zickuhr/optikos/issues"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css",
+    "./src/**",
+    "./dist/**"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./core": {
+      "types": "./dist/types/core/index.d.ts",
+      "import": "./dist/core.js"
+    },
+    "./motion": {
+      "types": "./dist/types/motion/index.d.ts",
+      "import": "./dist/motion.js"
+    },
+    "./ui": {
+      "types": "./dist/types/ui/index.d.ts",
+      "import": "./dist/ui.js"
+    },
+    "./bind": {
+      "types": "./dist/types/bind/index.d.ts",
+      "import": "./dist/bind.js"
+    },
+    "./components/*": {
+      "types": "./dist/types/components/*.d.ts",
+      "import": "./dist/components/*.js"
+    },
+    "./optikos.css": "./dist/optikos.css",
+    "./css/*": "./dist/css/*",
+    "./themes/*": "./dist/themes/*",
+    "./data": {
+      "types": "./dist/types/data/index.d.ts",
+      "import": "./dist/data.js"
+    }
+  },
+  "files": [
+    "dist",
+    "CHANGELOG.md",
+    "THIRD_PARTY_NOTICES.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "node scripts/dev.mjs",
+    "sandbox": "node scripts/dev.mjs sandbox",
+    "demo": "node scripts/dev.mjs demo",
+    "build": "node scripts/build.mjs",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:browser": "vitest run --config vitest.browser.config.ts",
+    "bench": "node scripts/bench.mjs",
+    "check": "npm run gen && npm run typecheck && npm test && npm run build",
+    "new:component": "node scripts/new-component.mjs",
+    "release": "node scripts/release.mjs",
+    "theme": "node scripts/theme.mjs",
+    "gen": "node scripts/gen.mjs",
+    "site": "node scripts/site.mjs",
+    "site:build": "node scripts/site.mjs build",
+    "mcp": "node scripts/mcp.mjs"
+  },
+  "devDependencies": {
+    "@types/node": "^26.6.6",
+    "@vitest/browser-playwright": "5.1.0",
+    "axe-core": "4.14.0",
+    "esbuild": "^0.28.2",
+    "happy-dom": "^21.0.4",
+    "playwright": "1.65.0",
+    "typescript": "^7.0.2",
+    "vitest": "^5.1.0"
+  }
+}