lastriko 0.1.2 → 0.1.7

package/dist/client/ws.test.js

@@ -1,152 +1,12 @@
 import { describe, expect, it } from 'vitest';
+import { applyBatch } from './swap';
 import { createWSManager } from './ws';
-class FakeClassList {
-    values = new Set();
-    constructor(initial = []) {
-        for (const value of initial) {
-            this.values.add(value);
-        }
-    }
-    add(value) {
-        this.values.add(value);
-    }
-    contains(value) {
-        return this.values.has(value);
-    }
-}
-class FakeElement {
-    children = [];
-    classList = new FakeClassList();
-    textContent = '';
-    id = '';
-    parent = null;
-    currentClassName = '';
-    set className(value) {
-        this.currentClassName = value;
-        for (const cls of value.split(/\s+/).filter(Boolean)) {
-            this.classList.add(cls);
-        }
-    }
-    get className() {
-        return this.currentClassName;
-    }
-    get childElementCount() {
-        return this.children.length;
-    }
-    get firstElementChild() {
-        return this.children[0] ?? null;
-    }
-    appendChild(child) {
-        child.parent = this;
-        this.children.push(child);
-    }
-    remove() {
-        if (!this.parent) {
-            return;
-        }
-        this.parent.children.splice(this.parent.children.indexOf(this), 1);
-        this.parent = null;
-    }
-    querySelector(selector) {
-        const classes = selector
-            .split('.')
-            .filter(Boolean);
-        if (classes.length === 0) {
-            return null;
-        }
-        const stack = [...this.children];
-        while (stack.length > 0) {
-            const current = stack.shift();
-            const allMatch = classes.every((cls) => current.classList.contains(cls));
-            if (allMatch) {
-                return current;
-            }
-            stack.push(...current.children);
-        }
-        return null;
-    }
-}
-function setupDom() {
-    const previousWindow = globalThis.window;
-    const previousDocument = globalThis.document;
-    const root = new FakeElement();
-    root.id = 'lk-root';
-    const toastRoot = new FakeElement();
-    toastRoot.id = 'lk-toast-root';
-    const byId = new Map([
-        ['lk-root', root],
-        ['lk-toast-root', toastRoot],
-    ]);
-    const fakeDocument = {
-        documentElement: { setAttribute: () => { } },
-        addEventListener: () => { },
-        getElementById: (id) => byId.get(id) ?? null,
-        createElement: () => new FakeElement(),
-    };
-    const storage = new Map();
-    const fakeWindow = {
-        location: { protocol: 'http:', host: '127.0.0.1:3500' },
-        localStorage: {
-            getItem: (key) => storage.get(key) ?? null,
-            setItem: (key, value) => {
-                storage.set(key, value);
-            },
-        },
-        setTimeout,
-    };
-    Object.assign(globalThis, {
-        window: fakeWindow,
-        document: fakeDocument,
-    });
-    return {
-        document: fakeDocument,
-        restore: () => {
-            Object.assign(globalThis, {
-                window: previousWindow,
-                document: previousDocument,
-            });
-        },
-    };
-}
 describe('client ws manager', () => {
-    it('renders toast for TOAST messages (except connection id sentinel)', () => {
-        const { document, restore } = setupDom();
-        try {
-            const sockets = [];
-            const manager = createWSManager({
-                wsFactory: (() => {
-                    const socket = {
-                        onopen: null,
-                        onmessage: null,
-                        onclose: null,
-                        send: () => { },
-                        close: () => { },
-                    };
-                    sockets.push(socket);
-                    return socket;
-                }),
-            });
-            manager.connect();
-            const socketRef = sockets[0];
-            expect(socketRef).toBeDefined();
-            if (!socketRef) {
-                throw new Error('mock socket was not created');
-            }
-            socketRef.onmessage?.({
-                data: JSON.stringify({
-                    type: 'TOAST',
-                    payload: { message: 'hello toast', type: 'success', duration: 5000 },
-                }),
-            });
-            const container = document.getElementById('lk-toast-root');
-            expect(container).not.toBeNull();
-            expect(container?.classList.contains('lk-toast-container')).toBe(true);
-            const toast = container?.querySelector('.lk-toast.lk-toast--success');
-            expect(toast?.textContent).toBe('hello toast');
-        }
-        finally {
-            restore();
-        }
+    it('exports createWSManager', () => {
+        expect(typeof createWSManager).toBe('function');
+    });
+    it('exposes batch apply helper', () => {
+        expect(typeof applyBatch).toBe('function');
     });
 });
 //# sourceMappingURL=ws.test.js.map

package/dist/client/ws.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"ws.test.js","sourceRoot":"","sources":["../../src/client/ws.test.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ws.test.js","sourceRoot":"","sources":["../../src/client/ws.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,MAAM,CAAC;AAEvC,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,EAAE,CAAC,yBAAyB,EAAE,GAAG,EAAE;QACjC,MAAM,CAAC,OAAO,eAAe,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAClD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;QACpC,MAAM,CAAC,OAAO,UAAU,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/components/context.d.ts

@@ -1,4 +1,4 @@
-import type { AlertOpts, ButtonCallbackHandle, ButtonHandle, ButtonOpts, ChatHandle, ChatUIOptions, CodeProps, ComponentHandle, ConnectionScope, FileUploadHandle, FileUploadOpts, GridOpts, ImageGridProps, ImageProps, LoadingOpts, MetricHandle, MetricOpts, NumberInputHandle, NumberInputOpts, ProgressHandle, ProgressOpts, PromptEditorHandle, PromptEditorOpts, SelectHandle, SelectOption, SelectOpts, ShellOpts, ShellRegions, SliderHandle, SliderOpts, StreamHandle, StreamTextOpts, TabDef, TabsOpts, TableHandle, TableProps, TableRow, TextHandle, TextInputHandle, TextInputOpts, ToggleHandle, ToggleOpts, ToastOpts, UIContext as IUIContext } from './types';
+import type { AccordionOpts, AccordionSection, AlertOpts, AudioProps, BeforeAfterOpts, ButtonCallbackHandle, ButtonHandle, ButtonOpts, ChatHandle, ChatUIOptions, CodeProps, ColorPickerHandle, ColorPickerOpts, ConnectionScope, DateInputHandle, DateInputOpts, DiffProps, FileUploadHandle, FileUploadOpts, FilmStripItem, FilmStripOpts, FullscreenHandle, FullscreenOpts, GridOpts, ImageGridProps, ImageProps, LoadingOpts, MetricHandle, MetricOpts, ModelCompareHandle, ModelCompareOpts, ModelSpec, MultiSelectHandle, MultiSelectOpts, NumberInputHandle, NumberInputOpts, ParameterPanelHandle, ParameterPanelOpts, ParameterSchema, ProgressHandle, ProgressOpts, PromptEditorHandle, PromptEditorOpts, SelectHandle, SelectOption, SelectOpts, ShellOpts, ShellRegions, SliderHandle, SliderOpts, StreamHandle, StreamTextOpts, TabDef, TableHandle, TableProps, TableRow, TabsHandle, TabsOpts, TextHandle, TextInputHandle, TextInputOpts, ToastOpts, ToggleHandle, ToggleOpts, UIContext as IUIContext, VideoProps } from './types';
 export declare class UIContext implements IUIContext {
     readonly scope: ConnectionScope;
     constructor(scope: ConnectionScope);
@@ -17,6 +17,9 @@ export declare class UIContext implements IUIContext {
     slider(label: string, opts: SliderOpts): SliderHandle;
     toggle(label: string, opts?: ToggleOpts): ToggleHandle;
     select(label: string, options: SelectOption[], opts?: SelectOpts): SelectHandle;
+    multiSelect(label: string, options: SelectOption[], opts?: MultiSelectOpts): MultiSelectHandle;
+    colorPicker(label: string, opts?: ColorPickerOpts): ColorPickerHandle;
+    dateInput(label: string, opts?: DateInputOpts): DateInputHandle;
     fileUpload(label: string, opts?: FileUploadOpts): FileUploadHandle;
     markdown(content: string): void;
     image(src: string | null | undefined, opts?: Partial<ImageProps>): void;
@@ -25,18 +28,27 @@ export declare class UIContext implements IUIContext {
         alt?: string;
         caption?: string;
     }>, opts?: Partial<ImageGridProps>): void;
+    video(src: string, opts?: VideoProps): void;
+    audio(src: string, opts?: AudioProps): void;
     code(content: string, opts?: Partial<CodeProps>): void;
     json(data: unknown, opts?: {
         label?: string;
     }): void;
+    diff(before: string, after: string, opts?: DiffProps): void;
     table(data: TableRow[], opts?: Partial<TableProps>): TableHandle;
     private createRowHandle;
     metric(label: string, value: string, opts?: MetricOpts): MetricHandle;
     progress(value: number | null, opts?: ProgressOpts): ProgressHandle;
     shell(regions: ShellRegions, opts?: ShellOpts): void;
     grid(areas: Array<(ctx: IUIContext) => void>, opts?: GridOpts): void;
-    tabs(tabs: TabDef[], opts?: TabsOpts): ComponentHandle<Record<string, unknown>, string>;
+    tabs(tabs: TabDef[], opts?: TabsOpts): TabsHandle;
     card(titleOrContent: string | ((ctx: IUIContext) => void), contentOrNothing?: (ctx: IUIContext) => void): void;
+    accordion(sections: AccordionSection[], opts?: AccordionOpts): void;
+    fullscreen(content: (ctx: IUIContext) => void, opts?: FullscreenOpts): FullscreenHandle;
+    modelCompare(models: ModelSpec[], opts: ModelCompareOpts): ModelCompareHandle;
+    parameterPanel(schema: ParameterSchema, opts?: ParameterPanelOpts): ParameterPanelHandle;
+    filmStrip(images: Array<string | FilmStripItem>, opts?: FilmStripOpts): void;
+    beforeAfter(before: string, after: string, opts?: BeforeAfterOpts): void;
     divider(opts?: {
         label?: string;
     }): void;

package/dist/components/context.js

@@ -1,4 +1,7 @@
 import { createComponentId } from './id';
+function normalizeSelectOptions(options) {
+    return options.map((option) => (typeof option === 'string' ? { label: option, value: option } : option));
+}
 export class UIContext {
     scope;
     constructor(scope) {
@@ -172,7 +175,7 @@ export class UIContext {
         return this.register(handle);
     }
     select(label, options, opts = {}) {
-        const normalized = options.map((option) => (typeof option === 'string' ? { label: option, value: option } : option));
+        const normalized = normalizeSelectOptions(options);
         const initial = opts.default ?? normalized[0]?.value ?? '';
         const id = createComponentId(this.scope, 'select');
         const valueAtom = this.scope.getAtom(`${id}/value`, initial);
@@ -195,6 +198,80 @@ export class UIContext {
         };
         return this.register(handle);
     }
+    multiSelect(label, options, opts = {}) {
+        const normalized = normalizeSelectOptions(options);
+        const initialDefaults = Array.isArray(opts.defaults) ? opts.defaults : [];
+        const initial = initialDefaults.filter((value) => normalized.some((option) => option.value === value));
+        const id = createComponentId(this.scope, 'multiSelect');
+        const valueAtom = this.scope.getAtom(`${id}/value`, initial);
+        const handle = {
+            id,
+            type: 'multiSelect',
+            props: { label, options: normalized, value: initial, ...opts },
+            get value() {
+                return valueAtom.get();
+            },
+            update: (patch) => {
+                if (patch.value !== undefined) {
+                    let next = Array.isArray(patch.value) ? patch.value.map((value) => String(value)) : [];
+                    if (typeof handle.props.maxSelections === 'number' && handle.props.maxSelections > 0) {
+                        next = next.slice(0, handle.props.maxSelections);
+                    }
+                    valueAtom.set(next);
+                    handle.props.value = next;
+                }
+                Object.assign(handle.props, patch);
+                this.scope.pushFragment(handle);
+            },
+        };
+        return this.register(handle);
+    }
+    colorPicker(label, opts = {}) {
+        const id = createComponentId(this.scope, 'colorPicker');
+        const initial = typeof opts.default === 'string' && opts.default.trim() ? opts.default : '#e94560';
+        const valueAtom = this.scope.getAtom(`${id}/value`, initial);
+        const handle = {
+            id,
+            type: 'colorPicker',
+            props: { label, value: initial, format: opts.format ?? 'hex', ...opts },
+            get value() {
+                return valueAtom.get();
+            },
+            update: (patch) => {
+                if (patch.value !== undefined) {
+                    const next = String(patch.value || '#000000');
+                    valueAtom.set(next);
+                    handle.props.value = next;
+                }
+                Object.assign(handle.props, patch);
+                this.scope.pushFragment(handle);
+            },
+        };
+        return this.register(handle);
+    }
+    dateInput(label, opts = {}) {
+        const id = createComponentId(this.scope, 'dateInput');
+        const initial = opts.default ?? '';
+        const valueAtom = this.scope.getAtom(`${id}/value`, initial);
+        const handle = {
+            id,
+            type: 'dateInput',
+            props: { label, value: initial, type: opts.type ?? 'date', ...opts },
+            get value() {
+                return valueAtom.get();
+            },
+            update: (patch) => {
+                if (patch.value !== undefined) {
+                    const next = String(patch.value);
+                    valueAtom.set(next);
+                    handle.props.value = next;
+                }
+                Object.assign(handle.props, patch);
+                this.scope.pushFragment(handle);
+            },
+        };
+        return this.register(handle);
+    }
     fileUpload(label, opts = {}) {
         const id = createComponentId(this.scope, 'fileUpload');
         const initial = null;
@@ -243,12 +320,46 @@ export class UIContext {
             minWidth: opts.minWidth,
         });
     }
+    video(src, opts = { src: '' }) {
+        const autoplay = Boolean(opts.autoplay);
+        const muted = autoplay ? true : Boolean(opts.muted);
+        this.createPassiveHandle('video', {
+            src,
+            controls: opts.controls ?? true,
+            autoplay,
+            muted,
+            loop: opts.loop ?? false,
+            poster: opts.poster,
+            width: opts.width ?? '100%',
+            caption: opts.caption,
+        });
+    }
+    audio(src, opts = { src: '' }) {
+        this.createPassiveHandle('audio', {
+            src,
+            controls: opts.controls ?? true,
+            autoplay: opts.autoplay ?? false,
+            loop: opts.loop ?? false,
+            label: opts.label,
+        });
+    }
     code(content, opts = {}) {
         this.createPassiveHandle('code', { content, lang: opts.lang });
     }
     json(data, opts) {
         this.createPassiveHandle('json', { data, label: opts?.label });
     }
+    diff(before, after, opts = { before: '', after: '' }) {
+        this.createPassiveHandle('diff', {
+            before,
+            after,
+            mode: opts.mode ?? 'split',
+            beforeLabel: opts.beforeLabel ?? 'Before',
+            afterLabel: opts.afterLabel ?? 'After',
+            lang: opts.lang,
+            context: opts.context,
+        });
+    }
     table(data, opts = {}) {
         const id = createComponentId(this.scope, 'table');
         const columns = opts.columns ?? Object.keys(data[0] ?? {});
@@ -380,8 +491,7 @@ export class UIContext {
     }
     tabs(tabs, opts = {}) {
         const id = createComponentId(this.scope, 'tabs');
-        const initial = opts.defaultTab ?? tabs[0]?.label ?? '';
-        const valueAtom = this.scope.getAtom(`${id}/value`, initial);
+        const requestedDefault = opts.defaultTab ?? tabs[0]?.label ?? '';
         const renderedTabs = tabs.map((tab) => {
             const before = this.scope.listHandles().length;
             tab.content(this);
@@ -391,6 +501,12 @@ export class UIContext {
                 ids: this.scope.listHandles().slice(before).map((h) => h.id),
             };
         });
+        const firstEnabled = renderedTabs.find((tab) => !tab.disabled)?.label ?? '';
+        const initial = renderedTabs.some((tab) => tab.label === requestedDefault && !tab.disabled)
+            ? requestedDefault
+            : firstEnabled;
+        const valueAtom = this.scope.getAtom(`${id}/value`, initial);
+        const canActivate = (label) => renderedTabs.some((tab) => tab.label === label && !tab.disabled);
         const handle = {
             id,
             type: 'tabs',
@@ -402,11 +518,20 @@ export class UIContext {
                 Object.assign(handle.props, patch);
                 if (patch.value !== undefined) {
                     const next = String(patch.value);
-                    valueAtom.set(next);
-                    handle.props.active = next;
+                    if (canActivate(next)) {
+                        valueAtom.set(next);
+                        handle.props.active = next;
+                    }
                 }
                 this.scope.pushFragment(handle);
             },
+            setActive: (label) => {
+                if (!canActivate(label))
+                    return;
+                valueAtom.set(label);
+                handle.props.active = label;
+                this.scope.pushFragment(handle);
+            },
         };
         this.register(handle);
         return handle;
@@ -419,6 +544,206 @@ export class UIContext {
         const ids = this.scope.listHandles().slice(before).map((h) => h.id);
         this.createPassiveHandle('card', { title, ids });
     }
+    accordion(sections, opts = {}) {
+        const rendered = sections.map((section) => {
+            const before = this.scope.listHandles().length;
+            section.content(this);
+            return {
+                label: section.label,
+                defaultOpen: Boolean(section.defaultOpen),
+                ids: this.scope.listHandles().slice(before).map((h) => h.id),
+            };
+        });
+        this.createPassiveHandle('accordion', {
+            sections: rendered,
+            opts: { allowMultiple: opts.allowMultiple ?? false },
+        });
+    }
+    fullscreen(content, opts = {}) {
+        const id = createComponentId(this.scope, 'fullscreen');
+        const before = this.scope.listHandles().length;
+        content(this);
+        const ids = this.scope.listHandles().slice(before).map((h) => h.id);
+        const valueAtom = this.scope.getAtom(`${id}/value`, Boolean(opts.defaultOpen));
+        const handle = {
+            id,
+            type: 'fullscreen',
+            props: {
+                ids,
+                trigger: opts.trigger ?? 'button',
+                label: opts.label ?? 'Open fullscreen',
+                open: Boolean(opts.defaultOpen),
+            },
+            get value() {
+                return valueAtom.get();
+            },
+            update: (patch) => {
+                Object.assign(handle.props, patch);
+                if (patch.value !== undefined) {
+                    const next = Boolean(patch.value);
+                    valueAtom.set(next);
+                    handle.props.open = next;
+                }
+                this.scope.pushFragment(handle);
+            },
+            open: () => {
+                valueAtom.set(true);
+                handle.props.open = true;
+                this.scope.pushFragment(handle);
+            },
+            close: () => {
+                valueAtom.set(false);
+                handle.props.open = false;
+                this.scope.pushFragment(handle);
+            },
+        };
+        return this.register(handle);
+    }
+    modelCompare(models, opts) {
+        const id = createComponentId(this.scope, 'modelCompare');
+        const initial = {
+            results: Object.fromEntries(models.map((model) => [model.label, ''])),
+            isStreaming: Object.fromEntries(models.map((model) => [model.label, false])),
+            errors: Object.fromEntries(models.map((model) => [model.label, null])),
+            latencies: Object.fromEntries(models.map((model) => [model.label, 0])),
+        };
+        const valueAtom = this.scope.getAtom(`${id}/value`, initial);
+        const handle = {
+            id,
+            type: 'modelCompare',
+            props: { models, ...opts, value: initial },
+            get value() {
+                return valueAtom.get();
+            },
+            get results() {
+                return valueAtom.get().results;
+            },
+            get isStreaming() {
+                return valueAtom.get().isStreaming;
+            },
+            get errors() {
+                return valueAtom.get().errors;
+            },
+            get latencies() {
+                return valueAtom.get().latencies;
+            },
+            update: (patch) => {
+                Object.assign(handle.props, patch);
+                if (patch.value !== undefined) {
+                    valueAtom.set(patch.value);
+                    handle.props.value = patch.value;
+                }
+                this.scope.pushFragment(handle);
+            },
+        };
+        return this.register(handle);
+    }
+    parameterPanel(schema, opts = {}) {
+        const id = createComponentId(this.scope, 'parameterPanel');
+        const before = this.scope.listHandles().length;
+        const byKey = {};
+        for (const [key, def] of Object.entries(schema)) {
+            const label = def.label ?? key;
+            if (def.type === 'number') {
+                if (typeof def.min === 'number' && typeof def.max === 'number') {
+                    byKey[key] = this.slider(label, {
+                        min: def.min,
+                        max: def.max,
+                        step: def.step,
+                        default: typeof def.default === 'number' ? def.default : def.min,
+                        helperText: def.description,
+                    });
+                }
+                else {
+                    byKey[key] = this.numberInput(label, {
+                        min: def.min,
+                        max: def.max,
+                        step: def.step,
+                        default: typeof def.default === 'number' ? def.default : 0,
+                        helperText: def.description,
+                    });
+                }
+                continue;
+            }
+            if (def.type === 'boolean') {
+                byKey[key] = this.toggle(label, {
+                    default: Boolean(def.default ?? false),
+                    helperText: def.description,
+                });
+                continue;
+            }
+            if (def.type === 'select') {
+                byKey[key] = this.select(label, def.options ?? [], {
+                    default: typeof def.default === 'string' ? def.default : (def.options?.[0] ?? ''),
+                    helperText: def.description,
+                });
+                continue;
+            }
+            byKey[key] = this.textInput(label, {
+                default: typeof def.default === 'string' ? def.default : '',
+                helperText: def.description,
+            });
+        }
+        const collectValue = () => {
+            const value = {};
+            for (const [key, child] of Object.entries(byKey)) {
+                value[key] = child.value;
+            }
+            return value;
+        };
+        const ids = this.scope.listHandles().slice(before).map((h) => h.id);
+        const handle = {
+            id,
+            type: 'parameterPanel',
+            props: {
+                schema,
+                ids,
+                title: opts.title,
+                collapsible: opts.collapsible ?? false,
+                value: collectValue(),
+            },
+            get value() {
+                return collectValue();
+            },
+            update: (patch) => {
+                if (patch.value && typeof patch.value === 'object') {
+                    for (const [key, next] of Object.entries(patch.value)) {
+                        const child = byKey[key];
+                        if (!child) {
+                            continue;
+                        }
+                        child.update({ value: next });
+                    }
+                }
+                Object.assign(handle.props, patch);
+                handle.props.value = collectValue();
+                this.scope.pushFragment(handle);
+            },
+        };
+        return this.register(handle);
+    }
+    filmStrip(images, opts = {}) {
+        const normalized = images.map((item) => (typeof item === 'string'
+            ? { src: item, alt: 'Image' }
+            : item));
+        this.createPassiveHandle('filmStrip', {
+            images: normalized,
+            height: opts.height ?? 120,
+            zoom: opts.zoom ?? true,
+            showCaptions: opts.showCaptions ?? true,
+            selectedIndex: opts.selectedIndex ?? 0,
+        });
+    }
+    beforeAfter(before, after, opts = {}) {
+        this.createPassiveHandle('beforeAfter', {
+            before,
+            after,
+            beforeLabel: opts.beforeLabel ?? 'Before',
+            afterLabel: opts.afterLabel ?? 'After',
+            initialPosition: opts.initialPosition ?? 50,
+            orientation: opts.orientation ?? 'horizontal',
+        });
+    }
     divider(opts) {
         this.createPassiveHandle('divider', { label: opts?.label });
     }