knobkit 0.0.1

package/dist/lib/widgets/embed.js

@@ -0,0 +1,23 @@
+import { col } from "./layout.js";
+export const SUBAPP = "__subapp";
+export function embed(app) {
+    const ws = app.config.widgets;
+    const node = col(...(Array.isArray(ws) ? ws : [ws]));
+    node[SUBAPP] = app;
+    return node;
+}
+export function collectSubapps(widgets) {
+    const out = [];
+    const visit = (w) => {
+        const sub = w[SUBAPP];
+        if (sub) {
+            out.push(sub);
+            return;
+        }
+        for (const c of w.children ?? [])
+            visit(c);
+    };
+    for (const w of Array.isArray(widgets) ? widgets : [widgets])
+        visit(w);
+    return out;
+}

package/dist/lib/widgets/file.d.ts

@@ -0,0 +1,11 @@
+import type { Widget } from "../types.js";
+export interface FileWidget extends Widget<{
+    name: string;
+    url: string;
+}> {
+    set(value: {
+        name?: string;
+        url: string;
+    } | string): void;
+}
+export declare function file(): FileWidget;

package/dist/lib/widgets/file.js

@@ -0,0 +1,15 @@
+import { bound } from "../bound.js";
+import { controls } from "../controls.js";
+export function file() {
+    return {
+        type: "file",
+        state: { name: "", url: "" },
+        ...controls,
+        set(value) {
+            const v = typeof value === "string" ? { url: value } : value;
+            const b = bound(this);
+            b.edit(this, "set", ["url"], v.url);
+            b.edit(this, "set", ["name"], v.name ?? v.url.split("/").pop()?.split("?")[0] ?? "download");
+        },
+    };
+}

package/dist/lib/widgets/frame.d.ts

@@ -0,0 +1,18 @@
+import type { EventCtor, Widget } from "../types.js";
+export interface FrameWidget extends Widget<{
+    src: string;
+    doc: string;
+}> {
+    sandbox?: string;
+    title: string;
+    loaded: EventCtor;
+    load(url: string): void;
+    show(doc: string): void;
+    clear(): void;
+}
+export declare function frame(opts?: {
+    src?: string;
+    doc?: string;
+    sandbox?: string;
+    title?: string;
+}): FrameWidget;

package/dist/lib/widgets/frame.js

@@ -0,0 +1,25 @@
+import { event } from "../event.js";
+import { bound } from "../bound.js";
+import { controls } from "../controls.js";
+export function frame(opts = {}) {
+    return {
+        type: "frame",
+        state: { src: opts.src ?? "", doc: opts.doc ?? "" },
+        sandbox: opts.sandbox,
+        title: opts.title ?? "frame",
+        loaded: event("frame.loaded"),
+        ...controls,
+        load(url) {
+            bound(this).edit(this, "set", ["doc"], "");
+            bound(this).edit(this, "set", ["src"], url);
+        },
+        show(doc) {
+            bound(this).edit(this, "set", ["src"], "");
+            bound(this).edit(this, "set", ["doc"], doc);
+        },
+        clear() {
+            bound(this).edit(this, "set", ["src"], "");
+            bound(this).edit(this, "set", ["doc"], "");
+        },
+    };
+}

package/dist/lib/widgets/gallery.d.ts

@@ -0,0 +1,12 @@
+import type { Widget } from "../types.js";
+export interface GalleryItem {
+    src: string;
+    caption?: string;
+}
+export interface GalleryWidget extends Widget<{
+    items: GalleryItem[];
+}> {
+    set(items: GalleryItem[]): void;
+    add(item: GalleryItem): void;
+}
+export declare function gallery(): GalleryWidget;

package/dist/lib/widgets/gallery.js

@@ -0,0 +1,17 @@
+import { bound } from "../bound.js";
+import { controls } from "../controls.js";
+// A grid of images (the canonical output for batched image generation). Not a layout container — its
+// `items` are image records, not child widget keys.
+export function gallery() {
+    return {
+        type: "gallery",
+        state: { items: [] },
+        ...controls,
+        set(items) {
+            bound(this).edit(this, "set", ["items"], items);
+        },
+        add(item) {
+            bound(this).edit(this, "append", ["items"], item);
+        },
+    };
+}

package/dist/lib/widgets/highlighted-text.d.ts

@@ -0,0 +1,12 @@
+import type { Widget } from "../types.js";
+export interface HighlightSpan {
+    text: string;
+    label?: string | null;
+}
+export interface HighlightedTextWidget extends Widget<{
+    value: HighlightSpan[];
+    colorMap: Record<string, string>;
+}> {
+    set(value: HighlightSpan[], colorMap?: Record<string, string>): void;
+}
+export declare function highlightedText(): HighlightedTextWidget;

package/dist/lib/widgets/highlighted-text.js

@@ -0,0 +1,15 @@
+import { bound } from "../bound.js";
+import { controls } from "../controls.js";
+export function highlightedText() {
+    return {
+        type: "highlightedText",
+        state: { value: [], colorMap: {} },
+        ...controls,
+        set(value, colorMap) {
+            const b = bound(this);
+            if (colorMap !== undefined)
+                b.edit(this, "set", ["colorMap"], colorMap);
+            b.edit(this, "set", ["value"], value);
+        },
+    };
+}

package/dist/lib/widgets/html.d.ts

@@ -0,0 +1,9 @@
+import type { Widget } from "../types.js";
+export interface HtmlWidget extends Widget<{
+    value: string;
+}> {
+    set(value: string): void;
+}
+export declare function html(opts?: {
+    value?: string;
+}): HtmlWidget;

package/dist/lib/widgets/html.js

@@ -0,0 +1,12 @@
+import { bound } from "../bound.js";
+import { controls } from "../controls.js";
+export function html(opts = {}) {
+    return {
+        type: "html",
+        state: { value: opts.value ?? "" },
+        ...controls,
+        set(value) {
+            bound(this).edit(this, "set", ["value"], value);
+        },
+    };
+}

package/dist/lib/widgets/image.d.ts

@@ -0,0 +1,7 @@
+import type { Widget } from "../types.js";
+export interface ImageWidget extends Widget<{
+    src: string;
+}> {
+    set(value: string): void;
+}
+export declare function image(): ImageWidget;

package/dist/lib/widgets/image.js

@@ -0,0 +1,12 @@
+import { bound } from "../bound.js";
+import { controls } from "../controls.js";
+export function image() {
+    return {
+        type: "image",
+        state: { src: "" },
+        ...controls,
+        set(value) {
+            bound(this).edit(this, "set", ["src"], value);
+        },
+    };
+}

package/dist/lib/widgets/index.d.ts

@@ -0,0 +1,31 @@
+export * from "./text.js";
+export * from "./number.js";
+export * from "./slider.js";
+export * from "./code.js";
+export * from "./table.js";
+export * from "./chart.js";
+export * from "./dropdown.js";
+export * from "./checkbox.js";
+export * from "./checkbox-group.js";
+export * from "./radio.js";
+export * from "./gallery.js";
+export * from "./video.js";
+export * from "./label.js";
+export * from "./highlighted-text.js";
+export * from "./annotated-image.js";
+export * from "./file.js";
+export * from "./progress.js";
+export * from "./html.js";
+export * from "./frame.js";
+export * from "./upload.js";
+export * from "./image.js";
+export * from "./button.js";
+export * from "./mic.js";
+export * from "./chat.js";
+export * from "./output.js";
+export * from "./json.js";
+export * from "./log.js";
+export * from "./audio.js";
+export * from "./webcam.js";
+export * from "./layout.js";
+export { embed } from "./embed.js";

package/dist/lib/widgets/index.js

@@ -0,0 +1,31 @@
+export * from "./text.js";
+export * from "./number.js";
+export * from "./slider.js";
+export * from "./code.js";
+export * from "./table.js";
+export * from "./chart.js";
+export * from "./dropdown.js";
+export * from "./checkbox.js";
+export * from "./checkbox-group.js";
+export * from "./radio.js";
+export * from "./gallery.js";
+export * from "./video.js";
+export * from "./label.js";
+export * from "./highlighted-text.js";
+export * from "./annotated-image.js";
+export * from "./file.js";
+export * from "./progress.js";
+export * from "./html.js";
+export * from "./frame.js";
+export * from "./upload.js";
+export * from "./image.js";
+export * from "./button.js";
+export * from "./mic.js";
+export * from "./chat.js";
+export * from "./output.js";
+export * from "./json.js";
+export * from "./log.js";
+export * from "./audio.js";
+export * from "./webcam.js";
+export * from "./layout.js";
+export { embed } from "./embed.js";

package/dist/lib/widgets/json.d.ts

@@ -0,0 +1,7 @@
+import type { Widget } from "../types.js";
+export interface JsonWidget extends Widget<{
+    value: unknown;
+}> {
+    set(value: unknown): void;
+}
+export declare function json(): JsonWidget;

package/dist/lib/widgets/json.js

@@ -0,0 +1,12 @@
+import { bound } from "../bound.js";
+import { controls } from "../controls.js";
+export function json() {
+    return {
+        type: "json",
+        state: { value: null },
+        ...controls,
+        set(value) {
+            bound(this).edit(this, "set", ["value"], value);
+        },
+    };
+}

package/dist/lib/widgets/label.d.ts

@@ -0,0 +1,15 @@
+import type { Widget } from "../types.js";
+export interface LabelClass {
+    label: string;
+    score: number;
+}
+export interface LabelWidget extends Widget<{
+    label: string;
+    confidences: LabelClass[];
+}> {
+    set(value: string | {
+        label?: string;
+        confidences?: LabelClass[];
+    }): void;
+}
+export declare function label(): LabelWidget;

package/dist/lib/widgets/label.js

@@ -0,0 +1,18 @@
+import { bound } from "../bound.js";
+import { controls } from "../controls.js";
+export function label() {
+    return {
+        type: "label",
+        state: { label: "", confidences: [] },
+        ...controls,
+        set(value) {
+            const v = typeof value === "string" ? { label: value, confidences: [] } : value;
+            const b = bound(this);
+            if (v.confidences !== undefined)
+                b.edit(this, "set", ["confidences"], v.confidences);
+            const top = v.label ?? v.confidences?.reduce((a, c) => (c.score > a.score ? c : a), v.confidences[0])?.label;
+            if (top !== undefined)
+                b.edit(this, "set", ["label"], top);
+        },
+    };
+}

package/dist/lib/widgets/layout.d.ts

@@ -0,0 +1,21 @@
+import type { Widget } from "../types.js";
+export interface LayoutWidget extends Widget<{
+    items: string[];
+}> {
+    children: Widget<any>[];
+    add(child: Widget<any>): void;
+    remove(child: Widget<any>): Promise<void>;
+}
+export declare const row: (...children: Widget<any>[]) => LayoutWidget;
+export declare const col: (...children: Widget<any>[]) => LayoutWidget;
+export declare const grid: (children: Widget<any>[], opts?: {
+    cols?: number;
+}) => LayoutWidget;
+export declare const tabs: (panels: {
+    label: string;
+    content: Widget<any>;
+}[]) => LayoutWidget;
+export declare const accordion: (opts: {
+    label: string;
+    open?: boolean;
+}, ...children: Widget<any>[]) => LayoutWidget;

package/dist/lib/widgets/layout.js

@@ -0,0 +1,29 @@
+import { bound } from "../bound.js";
+import { controls } from "../controls.js";
+function container(type, children, props = {}) {
+    return {
+        type,
+        state: { items: [] },
+        children,
+        ...controls,
+        add(child) {
+            const b = bound(this);
+            b.edit(this, "append", ["items"], b.key(child));
+        },
+        async remove(child) {
+            const b = bound(this);
+            const key = b.key(child);
+            const items = await b.read(this, ["items"]);
+            b.edit(this, "set", ["items"], items.filter((k) => k !== key));
+        },
+        ...props,
+    };
+}
+export const row = (...children) => container("row", children);
+export const col = (...children) => container("col", children);
+export const grid = (children, opts = {}) => container("grid", children, { cols: opts.cols ?? 2 });
+// Tabbed container: each panel is a labelled child. `labels` rides alongside `items` (the child keys)
+// in the same order; the active tab is view-local state, so switching tabs never round-trips.
+export const tabs = (panels) => container("tabs", panels.map((p) => p.content), { labels: panels.map((p) => p.label) });
+// A single collapsible section. `open` is the initial state; toggling it is view-local.
+export const accordion = (opts, ...children) => container("accordion", children, { label: opts.label, open: opts.open ?? true });

package/dist/lib/widgets/log.d.ts

@@ -0,0 +1,8 @@
+import type { Widget } from "../types.js";
+export interface LogWidget extends Widget<{
+    lines: string[];
+}> {
+    push(line: string): void;
+    all(): Promise<string[]>;
+}
+export declare function log(): LogWidget;

package/dist/lib/widgets/log.js

@@ -0,0 +1,15 @@
+import { bound } from "../bound.js";
+import { controls } from "../controls.js";
+export function log() {
+    return {
+        type: "log",
+        state: { lines: [] },
+        ...controls,
+        push(line) {
+            bound(this).edit(this, "append", ["lines"], line);
+        },
+        all() {
+            return bound(this).read(this, ["lines"]);
+        },
+    };
+}

package/dist/lib/widgets/mic.d.ts

@@ -0,0 +1,19 @@
+import type { EventCtor, Widget } from "../types.js";
+export interface MicWidget extends Widget<{
+    live: boolean;
+}> {
+    clip: EventCtor<Float32Array>;
+    toggled: EventCtor<boolean>;
+    every: number;
+    control: boolean;
+    hold: boolean;
+    start(): void;
+    stop(): void;
+    toggle(): Promise<void>;
+    live(): Promise<boolean>;
+}
+export declare function mic(opts?: {
+    every?: number;
+    control?: boolean;
+    hold?: boolean;
+}): MicWidget;

package/dist/lib/widgets/mic.js

@@ -0,0 +1,28 @@
+import { event } from "../event.js";
+import { bound } from "../bound.js";
+import { controls } from "../controls.js";
+export function mic(opts = {}) {
+    return {
+        type: "mic",
+        state: { live: false },
+        clip: event("mic.clip"),
+        toggled: event("mic.toggled"),
+        every: opts.every ?? 0,
+        control: opts.control ?? true,
+        hold: opts.hold ?? true,
+        ...controls,
+        start() {
+            bound(this).edit(this, "set", ["live"], true);
+        },
+        stop() {
+            bound(this).edit(this, "set", ["live"], false);
+        },
+        async toggle() {
+            const live = await bound(this).read(this, ["live"]);
+            bound(this).edit(this, "set", ["live"], !live);
+        },
+        live() {
+            return bound(this).read(this, ["live"]);
+        },
+    };
+}

package/dist/lib/widgets/number.d.ts

@@ -0,0 +1,5 @@
+export declare function number(opts?: {
+    value?: number;
+    min?: number;
+    max?: number;
+}): import("./value.js").ValueWidget<number>;

package/dist/lib/widgets/number.js

@@ -0,0 +1,4 @@
+import { value } from "./value.js";
+export function number(opts = {}) {
+    return value("number", opts.value ?? 0, { min: opts.min, max: opts.max });
+}

package/dist/lib/widgets/output.d.ts

@@ -0,0 +1,10 @@
+import type { Widget } from "../types.js";
+export interface OutputWidget extends Widget<{
+    value: string;
+}> {
+    format: "text" | "markdown";
+    set(value: string): void;
+}
+export declare function output(opts?: {
+    format?: "text" | "markdown";
+}): OutputWidget;

package/dist/lib/widgets/output.js

@@ -0,0 +1,13 @@
+import { bound } from "../bound.js";
+import { controls } from "../controls.js";
+export function output(opts = {}) {
+    return {
+        type: "output",
+        state: { value: "" },
+        format: opts.format ?? "text",
+        ...controls,
+        set(value) {
+            bound(this).edit(this, "set", ["value"], value);
+        },
+    };
+}

package/dist/lib/widgets/progress.d.ts

@@ -0,0 +1,10 @@
+import type { Widget } from "../types.js";
+export interface ProgressWidget extends Widget<{
+    value: number;
+    label: string;
+}> {
+    set(value: number, label?: string): void;
+}
+export declare function progress(opts?: {
+    label?: string;
+}): ProgressWidget;

package/dist/lib/widgets/progress.js

@@ -0,0 +1,15 @@
+import { bound } from "../bound.js";
+import { controls } from "../controls.js";
+export function progress(opts = {}) {
+    return {
+        type: "progress",
+        state: { value: 0, label: opts.label ?? "" },
+        ...controls,
+        set(value, label) {
+            const b = bound(this);
+            b.edit(this, "set", ["value"], value);
+            if (label !== undefined)
+                b.edit(this, "set", ["label"], label);
+        },
+    };
+}

package/dist/lib/widgets/radio.d.ts

@@ -0,0 +1,4 @@
+export declare function radio(opts: {
+    choices: string[];
+    value?: string;
+}): import("./value.js").ValueWidget<string>;

package/dist/lib/widgets/radio.js

@@ -0,0 +1,5 @@
+import { value } from "./value.js";
+// Single-select from a fixed set, like dropdown but rendered as radios.
+export function radio(opts) {
+    return value("radio", opts.value ?? opts.choices[0], { choices: opts.choices });
+}

package/dist/lib/widgets/slider.d.ts

@@ -0,0 +1,6 @@
+export declare function slider(opts?: {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+}): import("./value.js").ValueWidget<number>;

package/dist/lib/widgets/slider.js

@@ -0,0 +1,6 @@
+import { value } from "./value.js";
+export function slider(opts = {}) {
+    const min = opts.min ?? 0;
+    const max = opts.max ?? 100;
+    return value("slider", opts.value ?? min, { min, max, step: opts.step ?? 1 });
+}

package/dist/lib/widgets/table.d.ts

@@ -0,0 +1,32 @@
+import type { EventCtor, Widget } from "../types.js";
+export interface Column {
+    key: string;
+    label?: string;
+    type?: "text" | "number";
+    width?: number;
+}
+export type Row = Record<string, unknown>;
+export interface TableWidget extends Widget<{
+    columns: Column[];
+    rows: Row[];
+}> {
+    edited: EventCtor<{
+        row: number;
+        key: string;
+        value: unknown;
+    }>;
+    editable: boolean;
+    maxHeight: number;
+    data(): Promise<Row[]>;
+    columnsOf(): Promise<Column[]>;
+    setRows(rows: Row[]): void;
+    setColumns(columns: Column[]): void;
+    addRow(row: Row): void;
+    setCell(row: number, key: string, value: unknown): void;
+}
+export declare function table(opts?: {
+    columns?: Column[];
+    rows?: Row[];
+    editable?: boolean;
+    maxHeight?: number;
+}): TableWidget;

package/dist/lib/widgets/table.js

@@ -0,0 +1,36 @@
+import { event } from "../event.js";
+import { bound } from "../bound.js";
+import { controls } from "../controls.js";
+// A tabular widget rendered by RevoGrid (virtualized, range-select, copy/paste, in-cell editing). State
+// is the uniform shape — `{ columns, rows }` — and every mutation is a structured edit by path, so a
+// cell edit is `set ["rows", r, key]` and a new row is `append ["rows"]`; the grid stays controlled by
+// the store on both tiers. Defaults to read-only (a display table); pass `editable: true` to let the
+// user edit cells.
+export function table(opts = {}) {
+    return {
+        type: "table",
+        state: { columns: opts.columns ?? [], rows: opts.rows ?? [] },
+        edited: event("table.edited"),
+        editable: opts.editable ?? false,
+        maxHeight: opts.maxHeight ?? 500,
+        ...controls,
+        data() {
+            return bound(this).read(this, ["rows"]);
+        },
+        columnsOf() {
+            return bound(this).read(this, ["columns"]);
+        },
+        setRows(rows) {
+            bound(this).edit(this, "set", ["rows"], rows);
+        },
+        setColumns(columns) {
+            bound(this).edit(this, "set", ["columns"], columns);
+        },
+        addRow(row) {
+            bound(this).edit(this, "append", ["rows"], row);
+        },
+        setCell(row, key, value) {
+            bound(this).edit(this, "set", ["rows", row, key], value);
+        },
+    };
+}

package/dist/lib/widgets/text.d.ts

@@ -0,0 +1,4 @@
+export declare function text(opts?: {
+    placeholder?: string;
+    lines?: number;
+}): import("./value.js").ValueWidget<string>;

package/dist/lib/widgets/text.js

@@ -0,0 +1,4 @@
+import { value } from "./value.js";
+export function text(opts = {}) {
+    return value("text", "", { placeholder: opts.placeholder, lines: opts.lines ?? 1 });
+}

package/dist/lib/widgets/upload.d.ts

@@ -0,0 +1,3 @@
+export declare function upload(opts?: {
+    accept?: string;
+}): import("./value.js").ValueWidget<string | null>;

package/dist/lib/widgets/upload.js

@@ -0,0 +1,5 @@
+import { value } from "./value.js";
+// state is the chosen image as a data URL
+export function upload(opts = {}) {
+    return value("upload", null, { accept: opts.accept ?? "image/*" });
+}