knobkit 0.0.1

package/dist/cli/index.js

@@ -0,0 +1,77 @@
+#!/usr/bin/env node
+import { existsSync, readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { ensureTsconfig } from "./config.js";
+import { buildMount, devMount } from "./mount.js";
+import { runServe } from "./serve.js";
+const HELP = `knobkit — build a web app from widgets and event handlers
+
+Usage:
+  knobkit dev [file]     Start a dev server (auto-detects mount vs serve)
+  knobkit build [file]   Build a browser (mount) app to dist/
+  knobkit serve [file]   Run a server (serve) app    (same as: knobkit dev --serve)
+
+  file defaults to demo.tsx
+
+Flags:
+  --mount      Force browser (mount) mode
+  --serve      Force server (serve) mode
+  --port <n>   Dev server port (mount)
+`;
+function parse(argv) {
+    const out = { file: "demo.tsx", mount: false, serve: false };
+    let sawFile = false;
+    for (let i = 0; i < argv.length; i++) {
+        const a = argv[i];
+        if (a === "--mount")
+            out.mount = true;
+        else if (a === "--serve")
+            out.serve = true;
+        else if (a === "--port")
+            out.port = Number(argv[++i]);
+        else if (a.startsWith("--port="))
+            out.port = Number(a.slice("--port=".length));
+        else if (!a.startsWith("-") && !sawFile) {
+            out.file = a;
+            sawFile = true;
+        }
+    }
+    return out;
+}
+function mode(file, args) {
+    if (args.serve)
+        return "serve";
+    if (args.mount)
+        return "mount";
+    return /\.serve\s*\(/.test(readFileSync(file, "utf8")) ? "serve" : "mount";
+}
+async function main() {
+    const [cmd, ...rest] = process.argv.slice(2);
+    if (!cmd || cmd === "help" || cmd === "-h" || cmd === "--help") {
+        process.stdout.write(HELP);
+        return;
+    }
+    if (cmd !== "dev" && cmd !== "build" && cmd !== "serve") {
+        process.stderr.write(`knobkit: unknown command "${cmd}"\n\n${HELP}`);
+        process.exit(1);
+    }
+    const args = parse(rest);
+    const root = process.cwd();
+    const file = resolve(root, args.file);
+    if (!existsSync(file)) {
+        process.stderr.write(`knobkit: no such file: ${args.file}\n`);
+        process.exit(1);
+    }
+    ensureTsconfig(root);
+    if (cmd === "build")
+        return buildMount(root, file);
+    if (cmd === "serve")
+        return runServe(file);
+    if (mode(file, args) === "serve")
+        return runServe(file);
+    return devMount(root, file, args.port);
+}
+main().catch((err) => {
+    console.error(err);
+    process.exit(1);
+});

package/dist/cli/mount.d.ts

@@ -0,0 +1,2 @@
+export declare function devMount(root: string, entry: string, port?: number): Promise<void>;
+export declare function buildMount(root: string, entry: string): Promise<void>;

package/dist/cli/mount.js

@@ -0,0 +1,26 @@
+import { existsSync, rmSync, writeFileSync } from "node:fs";
+import { relative, resolve } from "node:path";
+import { build as viteBuild, createServer } from "vite";
+import { indexHtml, mountConfig } from "./config.js";
+export async function devMount(root, entry, port) {
+    const ownHtml = existsSync(resolve(root, "index.html"));
+    const server = await createServer({ ...mountConfig(root, entry, ownHtml), server: { port } });
+    await server.listen();
+    server.printUrls();
+}
+export async function buildMount(root, entry) {
+    const htmlPath = resolve(root, "index.html");
+    const created = !existsSync(htmlPath);
+    if (created)
+        writeFileSync(htmlPath, indexHtml(relative(root, entry)));
+    try {
+        await viteBuild({
+            ...mountConfig(root, entry, true),
+            build: { outDir: "dist", emptyOutDir: true },
+        });
+    }
+    finally {
+        if (created)
+            rmSync(htmlPath, { force: true });
+    }
+}

package/dist/cli/serve.d.ts

@@ -0,0 +1 @@
+export declare function runServe(file: string): Promise<void>;

package/dist/cli/serve.js

@@ -0,0 +1,21 @@
+import { spawn } from "node:child_process";
+import { readFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { dirname, resolve } from "node:path";
+function tsxBin() {
+    const require = createRequire(import.meta.url);
+    const pkgPath = require.resolve("tsx/package.json");
+    const pkg = JSON.parse(readFileSync(pkgPath, "utf8"));
+    const bin = typeof pkg.bin === "string" ? pkg.bin : pkg.bin.tsx;
+    return resolve(dirname(pkgPath), bin);
+}
+export function runServe(file) {
+    const child = spawn(process.execPath, [tsxBin(), "watch", file], { stdio: "inherit" });
+    return new Promise((res) => {
+        child.on("exit", (code) => {
+            if (code)
+                process.exitCode = code;
+            res();
+        });
+    });
+}

package/dist/client/app.d.ts

@@ -0,0 +1,8 @@
+import "./styles.css";
+import type { AppDecl } from "../lib/declare.js";
+import type { Store } from "./runtime.js";
+export declare function App({ decl, store }: {
+    decl: AppDecl;
+    store: Store;
+}): import("react").JSX.Element;
+export declare function render(decl: AppDecl, store: Store, el: Element): void;

package/dist/client/app.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./styles.css";
+import { createElement, useCallback, useMemo, useSyncExternalStore } from "react";
+import { createRoot } from "react-dom/client";
+import { VIEWS } from "./widgets/registry.js";
+// rebuild a widget's event constructors from the `type` strings in the decl, so a view's
+// `emit(widget.changed(v))` produces the right `{ type, payload }`.
+function rebuild(decl) {
+    const widget = { type: decl.type, ...decl.props };
+    for (const [name, type] of Object.entries(decl.events)) {
+        widget[name] = (payload) => ({ type, payload });
+    }
+    return widget;
+}
+// One widget. It subscribes to its own key, so only the widget whose state (or enabled) changed
+// re-renders. The view gets `emit` (events onto the local bus) and `set` (a local state edit for its
+// own widget, e.g. an input reflecting typing — no server round-trip).
+function Field({ wd, byKey, store, emit }) {
+    const subscribe = useCallback((cb) => store.subscribe(wd.key, cb), [store, wd.key]);
+    const cell = useSyncExternalStore(subscribe, () => store.cell(wd.key));
+    const widget = useMemo(() => rebuild(wd), [wd]);
+    const set = useCallback((path, value) => store.applyEdit(wd.key, "set", path, value), [store, wd.key]);
+    const slot = useCallback((key) => {
+        const child = byKey[key];
+        return child ? _jsx(Field, { wd: child, byKey: byKey, store: store, emit: emit }, key) : null;
+    }, [byKey, store, emit]);
+    const View = VIEWS[wd.type];
+    if (!View)
+        return null;
+    return (_jsxs("div", { className: `pu-field${cell.enabled ? "" : " pu-disabled"}${cell.busy ? " pu-busy" : ""}`, children: [cell.busy && _jsx("div", { className: "pu-busy-bar", role: "status", "aria-label": "Loading" }), createElement(View, { widget, state: cell.state, enabled: cell.enabled, emit, set, slot })] }));
+}
+export function App({ decl, store }) {
+    const emit = (e) => store.emit(e.type, e.payload);
+    const byKey = useMemo(() => Object.fromEntries(decl.widgets.map((wd) => [wd.key, wd])), [decl]);
+    const rootWd = byKey[decl.root];
+    return (_jsxs("div", { className: "pu-page", children: [decl.title && _jsx("h1", { children: decl.title }), decl.description && _jsx("p", { className: "pu-desc", children: decl.description }), rootWd && _jsx(Field, { wd: rootWd, byKey: byKey, store: store, emit: emit })] }));
+}
+export function render(decl, store, el) {
+    createRoot(el).render(_jsx(App, { decl: decl, store: store }));
+}

package/dist/client/context.d.ts

@@ -0,0 +1,2 @@
+import { type Bound } from "../lib/bound.js";
+export declare function run(bound: Bound, fn: () => unknown): Promise<void>;

package/dist/client/context.js

@@ -0,0 +1,16 @@
+import { setBoundResolver } from "../lib/bound.js";
+// Browser context binding for mount mode, where handlers run in-process. There is no AsyncLocalStorage
+// in the browser, so the current context is a module global set around each handler run. This is
+// correct for one in-flight handler at a time (the common case); overlapping async handlers would
+// share it.
+let current;
+setBoundResolver(() => current);
+export async function run(bound, fn) {
+    current = bound;
+    try {
+        await fn();
+    }
+    finally {
+        current = undefined;
+    }
+}

package/dist/client/mount.d.ts

@@ -0,0 +1,3 @@
+import "./styles.css";
+import type { Knobkit } from "../lib/knobkit.js";
+export declare function mount(knobkit: Knobkit, selector: string): void;

package/dist/client/mount.js

@@ -0,0 +1,42 @@
+import "./styles.css";
+import { declare } from "../lib/declare.js";
+import { makeBound } from "../lib/ctx.js";
+import { createStore } from "./runtime.js";
+import { render } from "./app.js";
+import { run } from "./context.js";
+const isEvent = (x) => x != null && typeof x.type === "string" && "payload" in x;
+// DOM-only, no server: the browser owns state AND runs the `on(...)` handlers locally. Same store and
+// views as serve mode; the transport invokes the knobkit's handlers in-place with a context that reads the
+// local store and applies edits to it directly. Produced events go straight back onto the store.
+export function mount(knobkit, selector) {
+    const el = document.querySelector(selector);
+    if (!el)
+        throw new Error(`knobkit: no element matches "${selector}"`);
+    const decl = declare(knobkit.config, knobkit.serverEvents());
+    let store;
+    const localBound = () => makeBound({
+        read: (key, path) => Promise.resolve(store.read(key, path)),
+        edit: (key, op, path, value) => store.applyEdit(key, op, path, value),
+        enable: (key, value) => store.setEnabled(key, value),
+        busy: (key, value) => store.setBusy(key, value),
+        keyFor: (w) => knobkit.keyFor(w),
+    });
+    const transport = (type, payload) => {
+        const bound = localBound();
+        void (async () => {
+            for (const handler of knobkit.handlers.get(type) ?? []) {
+                await run(bound, async () => {
+                    const r = await handler(payload);
+                    if (isEvent(r))
+                        store.emit(r.type, r.payload);
+                });
+            }
+        })();
+    };
+    store = createStore(decl, transport);
+    render(decl, store, el);
+    void (async () => {
+        for (const fn of knobkit.setups)
+            await run(localBound(), fn);
+    })();
+}

package/dist/client/runtime.d.ts

@@ -0,0 +1,19 @@
+import type { AppDecl } from "../lib/declare.js";
+import type { EditOp, Path } from "../lib/bound.js";
+export type Transport = (type: string, payload: unknown) => void;
+export interface Cell {
+    state: unknown;
+    enabled: boolean;
+    busy: boolean;
+}
+export interface Store {
+    emit(type: string, payload: unknown): void;
+    applyEdit(key: string, op: EditOp, path: Path, value: unknown): void;
+    setEnabled(key: string, value: boolean): void;
+    setBusy(key: string, value: boolean): void;
+    read(key: string, path: Path): unknown;
+    cell(key: string): Cell;
+    enabled(key: string): boolean;
+    subscribe(key: string, fn: () => void): () => void;
+}
+export declare function createStore(decl: AppDecl, transport: Transport): Store;

package/dist/client/runtime.js

@@ -0,0 +1,88 @@
+function readAt(node, path) {
+    for (const p of path) {
+        if (node == null)
+            return undefined;
+        node = Array.isArray(node) && p === -1 ? node[node.length - 1] : node[p];
+    }
+    return node;
+}
+// Immutably apply one structured edit at a path. -1 addresses an array's last element.
+function editAt(node, path, op, value) {
+    if (path.length === 0) {
+        if (op === "set")
+            return value;
+        if (op === "append")
+            return [...(node ?? []), value];
+        return (node ?? "") + value; // appendText
+    }
+    const [head, ...rest] = path;
+    if (Array.isArray(node)) {
+        const i = head === -1 ? node.length - 1 : head;
+        const copy = node.slice();
+        copy[i] = editAt(node[i], rest, op, value);
+        return copy;
+    }
+    return { ...node, [head]: editAt(node?.[head], rest, op, value) };
+}
+// The browser owns all state as structured JSON, one cell per widget. The store has no per-widget
+// logic: events route to handlers (gated by enabled), edits apply generically by path, reads walk a
+// path. A change notifies only that widget's subscribers — rendering is per-key.
+export function createStore(decl, transport) {
+    const cells = new Map();
+    const listeners = new Map();
+    const owner = new Map(); // an event type -> the widget key that emits it
+    const serverEvents = new Set(decl.serverEvents);
+    for (const w of decl.widgets) {
+        cells.set(w.key, { state: w.state, enabled: w.enabled, busy: false });
+        for (const t of Object.values(w.events))
+            owner.set(t, w.key);
+    }
+    const notify = (key) => {
+        for (const fn of listeners.get(key) ?? [])
+            fn();
+    };
+    const applyEdit = (key, op, path, value) => {
+        const cur = cells.get(key);
+        if (!cur)
+            return;
+        cells.set(key, { ...cur, state: editAt(cur.state, path, op, value) });
+        notify(key);
+    };
+    const setEnabled = (key, value) => {
+        const cur = cells.get(key);
+        if (!cur || cur.enabled === value)
+            return;
+        cells.set(key, { ...cur, enabled: value });
+        notify(key);
+    };
+    const setBusy = (key, value) => {
+        const cur = cells.get(key);
+        if (!cur || cur.busy === value)
+            return;
+        cells.set(key, { ...cur, busy: value });
+        notify(key);
+    };
+    function emit(type, payload) {
+        const src = owner.get(type);
+        const c = src ? cells.get(src) : undefined;
+        if (c && (c.enabled === false || c.busy))
+            return; // a disabled or busy widget drops its own input events
+        if (serverEvents.has(type))
+            transport(type, payload);
+    }
+    return {
+        emit,
+        applyEdit,
+        setEnabled,
+        setBusy,
+        read: (key, path) => readAt(cells.get(key)?.state, path),
+        cell: (key) => cells.get(key),
+        enabled: (key) => cells.get(key)?.enabled !== false,
+        subscribe: (key, fn) => {
+            const subs = listeners.get(key) ?? new Set();
+            subs.add(fn);
+            listeners.set(key, subs);
+            return () => subs.delete(fn);
+        },
+    };
+}

package/dist/client/view.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+import type { Path } from "../lib/bound.js";
+import type { Emit, Widget } from "../lib/types.js";
+export interface ViewProps<W extends Widget<any> = Widget<any>, S = unknown> {
+    widget: W;
+    state: S;
+    enabled: boolean;
+    emit: Emit;
+    set: (path: Path, value: unknown) => void;
+    slot: (key: string) => ReactNode;
+}
+export type WidgetView = (props: ViewProps<any, any>) => ReactNode;

package/dist/client/view.js

@@ -0,0 +1 @@
+export {};

package/dist/client/widgets/accordion/index.d.ts

@@ -0,0 +1,5 @@
+import "./accordion.css";
+import type { ViewProps } from "../../view.js";
+export declare function AccordionView({ widget, state, slot }: ViewProps<any, {
+    items: string[];
+}>): import("react").JSX.Element;

package/dist/client/widgets/accordion/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./accordion.css";
+import { useState } from "react";
+export function AccordionView({ widget, state, slot }) {
+    const items = state.items ?? [];
+    const [open, setOpen] = useState(widget.open !== false);
+    return (_jsxs("div", { className: `pu-accordion${open ? " pu-accordion-open" : ""}`, children: [_jsxs("button", { className: "pu-accordion-head", "aria-expanded": open, onClick: () => setOpen((o) => !o), children: [_jsx("span", { className: "pu-accordion-caret", children: "\u25B8" }), widget.label] }), open && _jsx("div", { className: "pu-accordion-body", children: items.map((key) => slot(key)) })] }));
+}

package/dist/client/widgets/annotated-image/index.d.ts

@@ -0,0 +1,8 @@
+import "./annotated-image.css";
+import type { ViewProps } from "../../view.js";
+import type { Annotation } from "../../../lib/widgets/annotated-image.js";
+export declare function AnnotatedImageView({ state, }: ViewProps<any, {
+    src: string;
+    annotations: Annotation[];
+    colorMap: Record<string, string>;
+}>): import("react").JSX.Element;

package/dist/client/widgets/annotated-image/index.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./annotated-image.css";
+import { useState } from "react";
+const PALETTE = ["#2563eb", "#16a34a", "#dc2626", "#d97706", "#7c3aed", "#0891b2", "#db2777", "#65a30d"];
+function colorFor(label, colorMap) {
+    if (colorMap[label])
+        return colorMap[label];
+    let h = 0;
+    for (let i = 0; i < label.length; i++)
+        h = (h * 31 + label.charCodeAt(i)) | 0;
+    return PALETTE[Math.abs(h) % PALETTE.length];
+}
+export function AnnotatedImageView({ state, }) {
+    // The image's natural pixel size — only known once the <img> loads — turns the author's pixel boxes
+    // into percentages of the (possibly resized) displayed image. Boxes wait for it.
+    const [nat, setNat] = useState(null);
+    if (!state.src)
+        return _jsx("div", { className: "pu-output", children: "\u2014" });
+    const annotations = state.annotations ?? [];
+    const colorMap = state.colorMap ?? {};
+    // Distinct labels for the legend, in first-seen order.
+    const labels = [...new Set(annotations.map((a) => a.label))];
+    return (_jsxs("div", { className: "pu-annimg", children: [_jsxs("div", { className: "pu-annimg-frame", children: [_jsx("img", { className: "pu-annimg-base", src: state.src, alt: "", onLoad: (e) => setNat({ w: e.currentTarget.naturalWidth, h: e.currentTarget.naturalHeight }) }), nat &&
+                        annotations.map((a, i) => {
+                            const color = colorFor(a.label, colorMap);
+                            return (_jsxs("span", { children: [a.mask && _jsx("img", { className: "pu-annimg-mask", src: a.mask, alt: "" }), a.box && (_jsx("span", { className: "pu-annimg-box", style: {
+                                            left: `${(a.box[0] / nat.w) * 100}%`,
+                                            top: `${(a.box[1] / nat.h) * 100}%`,
+                                            width: `${((a.box[2] - a.box[0]) / nat.w) * 100}%`,
+                                            height: `${((a.box[3] - a.box[1]) / nat.h) * 100}%`,
+                                            borderColor: color,
+                                        }, children: _jsx("span", { className: "pu-annimg-tag", style: { background: color }, children: a.label }) }))] }, i));
+                        })] }), labels.length > 0 && (_jsx("div", { className: "pu-annimg-legend", children: labels.map((l) => (_jsxs("span", { className: "pu-annimg-chip", children: [_jsx("span", { className: "pu-annimg-swatch", style: { background: colorFor(l, colorMap) } }), l] }, l))) }))] }));
+}

package/dist/client/widgets/audio/index.d.ts

@@ -0,0 +1,5 @@
+import "./audio.css";
+import type { ViewProps } from "../../view.js";
+export declare function AudioView({ widget, state }: ViewProps<any, {
+    src: string;
+}>): import("react").JSX.Element | null;

package/dist/client/widgets/audio/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./audio.css";
+export function AudioView({ widget, state }) {
+    return state.src ? _jsx("audio", { src: state.src, controls: true, autoPlay: Boolean(widget.autoplay) }) : null;
+}

package/dist/client/widgets/button/index.d.ts

@@ -0,0 +1,4 @@
+import "./button.css";
+import type { ViewProps } from "../../view.js";
+import type { ButtonWidget, ButtonState } from "../../../lib/widgets/button.js";
+export declare function ButtonView({ widget, state, enabled, emit }: ViewProps<ButtonWidget, ButtonState>): import("react").JSX.Element;

package/dist/client/widgets/button/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./button.css";
+export function ButtonView({ widget, state, enabled, emit }) {
+    return (_jsx("button", { className: "pu-submit", disabled: !enabled, onClick: () => emit(widget.clicked()), children: state.label }));
+}

package/dist/client/widgets/chart/index.d.ts

@@ -0,0 +1,5 @@
+import type { ViewProps } from "../../view.js";
+import type { ChartWidget, Point } from "../../../lib/widgets/chart.js";
+export declare function ChartView({ widget, state }: ViewProps<ChartWidget, {
+    data: Point[];
+}>): import("react").JSX.Element;

package/dist/client/widgets/chart/index.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// chart.css is imported by ./lazy.tsx (the static entry wrapper) so it lands in client.css.
+import { ResponsiveContainer, CartesianGrid, XAxis, YAxis, Tooltip, Legend, BarChart, Bar, LineChart, Line, AreaChart, Area } from "recharts";
+const COLORS = ["#2563eb", "#16a34a", "#dc2626", "#d97706", "#7c3aed"]; // knobkit accent + a small palette
+export function ChartView({ widget, state }) {
+    const kind = widget.kind ?? "bar";
+    const x = widget.x;
+    const series = Array.isArray(widget.y) ? widget.y : [widget.y];
+    const height = widget.maxHeight ?? 300;
+    const data = state.data;
+    const axes = (_jsxs(_Fragment, { children: [_jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "var(--pu-border, #e3e6ea)" }), _jsx(XAxis, { dataKey: x, tick: { fontSize: 12 } }), _jsx(YAxis, { tick: { fontSize: 12 } }), _jsx(Tooltip, {}), series.length > 1 && _jsx(Legend, {})] }));
+    let inner;
+    if (kind === "line") {
+        inner = (_jsxs(LineChart, { data: data, children: [axes, series.map((k, i) => (_jsx(Line, { type: "monotone", dataKey: k, stroke: COLORS[i % COLORS.length], dot: false }, k)))] }));
+    }
+    else if (kind === "area") {
+        inner = (_jsxs(AreaChart, { data: data, children: [axes, series.map((k, i) => (_jsx(Area, { type: "monotone", dataKey: k, stroke: COLORS[i % COLORS.length], fill: COLORS[i % COLORS.length], fillOpacity: 0.2 }, k)))] }));
+    }
+    else {
+        inner = (_jsxs(BarChart, { data: data, children: [axes, series.map((k, i) => (_jsx(Bar, { dataKey: k, fill: COLORS[i % COLORS.length] }, k)))] }));
+    }
+    return (_jsx("div", { className: "pu-chart", children: _jsx(ResponsiveContainer, { width: "100%", height: height, children: inner }) }));
+}

package/dist/client/widgets/chart/lazy.d.ts

@@ -0,0 +1,3 @@
+import "./chart.css";
+import type { ViewProps } from "../../view.js";
+export declare function ChartView(props: ViewProps): import("react").JSX.Element;

package/dist/client/widgets/chart/lazy.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./chart.css"; // kept in the entry bundle (client.css) so no /assets css chunk to serve
+import { lazy, Suspense } from "react";
+// Recharts is sizeable; load it only when an app actually renders a chart widget.
+const Impl = lazy(async () => ({ default: (await import("./index.js")).ChartView }));
+export function ChartView(props) {
+    const height = (props.widget.maxHeight ?? 300) + 16; // + container padding
+    return (_jsx(Suspense, { fallback: _jsx("div", { className: "pu-chart", style: { height } }), children: _jsx(Impl, { ...props }) }));
+}

package/dist/client/widgets/chat/index.d.ts

@@ -0,0 +1,6 @@
+import "./chat.css";
+import type { ViewProps } from "../../view.js";
+import type { ChatWidget, Message } from "../../../lib/widgets/chat.js";
+export declare function ChatView({ widget, state, emit }: ViewProps<ChatWidget, {
+    messages: Message[];
+}>): import("react").JSX.Element;

package/dist/client/widgets/chat/index.js

@@ -0,0 +1,77 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import "./chat.css";
+import { useRef, useState } from "react";
+// shrink a picked image so attachments (and later history reads) stay small
+async function downscale(dataUrl, max = 768) {
+    const img = await new Promise((res, rej) => {
+        const i = new Image();
+        i.onload = () => res(i);
+        i.onerror = rej;
+        i.src = dataUrl;
+    });
+    const scale = Math.min(1, max / Math.max(img.width, img.height));
+    if (scale === 1)
+        return dataUrl;
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.round(img.width * scale);
+    canvas.height = Math.round(img.height * scale);
+    canvas.getContext("2d").drawImage(img, 0, 0, canvas.width, canvas.height);
+    return canvas.toDataURL("image/jpeg", 0.85);
+}
+export function ChatView({ widget, state, emit }) {
+    const streamRef = useRef(null);
+    const recRef = useRef(null);
+    const pressedRef = useRef(false);
+    const fileRef = useRef(null);
+    const [recording, setRecording] = useState(false);
+    const [pending, setPending] = useState(null);
+    const send = (input) => {
+        if (!input.value.trim() && !pending)
+            return;
+        emit(widget.sent({ text: input.value, image: pending ?? undefined }));
+        input.value = "";
+        setPending(null);
+    };
+    const pick = (e) => {
+        const f = e.currentTarget.files?.[0];
+        if (!f)
+            return;
+        const r = new FileReader();
+        r.onload = async () => setPending(await downscale(String(r.result)));
+        r.readAsDataURL(f);
+        e.currentTarget.value = "";
+    };
+    const start = async () => {
+        if (streamRef.current || pressedRef.current || !navigator.mediaDevices?.getUserMedia)
+            return;
+        pressedRef.current = true;
+        setRecording(true);
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        if (!pressedRef.current)
+            return stream.getTracks().forEach((t) => t.stop());
+        streamRef.current = stream;
+        const ac = new AudioContext({ sampleRate: 16000 });
+        const chunks = [];
+        const rec = new MediaRecorder(stream);
+        recRef.current = rec;
+        rec.ondataavailable = (e) => chunks.push(e.data);
+        rec.onstop = async () => {
+            const a = await ac.decodeAudioData(await new Blob(chunks).arrayBuffer());
+            emit(widget.recorded(a.getChannelData(0)));
+        };
+        rec.start();
+    };
+    const stop = () => {
+        pressedRef.current = false;
+        setRecording(false);
+        if (recRef.current?.state === "recording")
+            recRef.current.stop();
+        streamRef.current?.getTracks().forEach((t) => t.stop());
+        streamRef.current = null;
+        recRef.current = null;
+    };
+    return (_jsxs("div", { className: "pu-chat", children: [state.messages.map((m, i) => (_jsxs("p", { className: `pu-msg pu-${m.role}`, children: [_jsxs("b", { children: [m.role, ":"] }), " ", m.content, m.image && _jsx("img", { className: "pu-msg-image", src: m.image, alt: "" })] }, i))), pending && (_jsxs("div", { className: "pu-attachment", children: [_jsx("img", { src: pending, alt: "" }), _jsx("button", { className: "pu-attach-x", onClick: () => setPending(null), "aria-label": "Remove image", children: "\u2715" })] })), _jsxs("div", { className: "pu-composer", children: [widget.images && (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileRef, type: "file", accept: "image/*", hidden: true, onChange: pick }), _jsx("button", { className: "pu-attach", onClick: () => fileRef.current?.click(), "aria-label": "Attach image", children: "+" })] })), _jsx("input", { className: "pu-input", placeholder: widget.placeholder, onKeyDown: (e) => {
+                            if (e.key === "Enter")
+                                send(e.currentTarget);
+                        } }), widget.voice && (_jsx("button", { className: `pu-mic${recording ? " pu-rec" : ""}`, onPointerDown: start, onPointerUp: stop, onPointerLeave: () => pressedRef.current && stop(), "aria-label": "Hold to talk", children: recording ? "●" : "🎤" }))] })] }));
+}

package/dist/client/widgets/checkbox/index.d.ts

@@ -0,0 +1,6 @@
+import "./checkbox.css";
+import type { ViewProps } from "../../view.js";
+import type { ValueWidget } from "../../../lib/widgets/value.js";
+export declare function CheckboxView({ widget, state, emit, set }: ViewProps<ValueWidget<boolean>, {
+    value: boolean;
+}>): import("react").JSX.Element;

package/dist/client/widgets/checkbox/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./checkbox.css";
+export function CheckboxView({ widget, state, emit, set }) {
+    const update = (v) => {
+        set(["value"], v);
+        emit(widget.changed(v));
+    };
+    return (_jsxs("label", { className: "pu-check", children: [_jsx("input", { type: "checkbox", checked: state.value, onChange: (e) => update(e.currentTarget.checked) }), " ", widget.label] }));
+}

package/dist/client/widgets/checkbox-group/index.d.ts

@@ -0,0 +1,6 @@
+import "./checkbox-group.css";
+import type { ViewProps } from "../../view.js";
+import type { ValueWidget } from "../../../lib/widgets/value.js";
+export declare function CheckboxGroupView({ widget, state, emit, set }: ViewProps<ValueWidget<string[]>, {
+    value: string[];
+}>): import("react").JSX.Element;

package/dist/client/widgets/checkbox-group/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./checkbox-group.css";
+export function CheckboxGroupView({ widget, state, emit, set }) {
+    const choices = widget.choices ?? [];
+    const selected = state.value ?? [];
+    const toggle = (c) => {
+        const next = selected.includes(c) ? selected.filter((x) => x !== c) : [...selected, c];
+        set(["value"], next);
+        emit(widget.changed(next));
+    };
+    return (_jsx("div", { className: "pu-checkgroup", children: choices.map((c) => (_jsxs("label", { className: "pu-checkgroup-opt", children: [_jsx("input", { type: "checkbox", checked: selected.includes(c), onChange: () => toggle(c) }), " ", c] }, c))) }));
+}