knobkit 0.0.1

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

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

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

@@ -0,0 +1,101 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// note: code.css is imported by ./lazy.tsx (the static entry wrapper), not here, so it lands in
+// client.css rather than a split css chunk serve() wouldn't route.
+import { useEffect, useRef } from "react";
+import { EditorState, Compartment, Annotation } from "@codemirror/state";
+import { EditorView, keymap, lineNumbers, highlightActiveLine, highlightActiveLineGutter } from "@codemirror/view";
+import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
+import { syntaxHighlighting, defaultHighlightStyle, indentOnInput, bracketMatching } from "@codemirror/language";
+// Each grammar is a dynamic import() so Vite splits it into its own chunk under /assets, served on
+// demand — only the languages an app actually uses are ever sent to the browser. (js/ts/jsx/tsx share
+// one chunk since they're the same package.)
+const LANGS = {
+    javascript: () => import("@codemirror/lang-javascript").then((m) => m.javascript()),
+    typescript: () => import("@codemirror/lang-javascript").then((m) => m.javascript({ typescript: true })),
+    jsx: () => import("@codemirror/lang-javascript").then((m) => m.javascript({ jsx: true })),
+    tsx: () => import("@codemirror/lang-javascript").then((m) => m.javascript({ jsx: true, typescript: true })),
+    python: () => import("@codemirror/lang-python").then((m) => m.python()),
+    html: () => import("@codemirror/lang-html").then((m) => m.html()),
+    css: () => import("@codemirror/lang-css").then((m) => m.css()),
+    json: () => import("@codemirror/lang-json").then((m) => m.json()),
+    markdown: () => import("@codemirror/lang-markdown").then((m) => m.markdown()),
+    sql: () => import("@codemirror/lang-sql").then((m) => m.sql()),
+    rust: () => import("@codemirror/lang-rust").then((m) => m.rust()),
+    cpp: () => import("@codemirror/lang-cpp").then((m) => m.cpp()),
+    xml: () => import("@codemirror/lang-xml").then((m) => m.xml()),
+};
+// marks our own doc-replacing dispatches so the update listener doesn't echo them back as edits
+const External = Annotation.define();
+const langOf = (name) => LANGS[name]?.() ?? Promise.resolve([]);
+const editOf = (editable) => [EditorView.editable.of(editable), EditorState.readOnly.of(!editable)];
+export function CodeView({ widget, state, emit, set }) {
+    const host = useRef(null);
+    const view = useRef(null);
+    const lang = useRef(new Compartment());
+    const edit = useRef(new Compartment());
+    // the editor is built once; route edits through a ref so it always sees the current props
+    const onChange = useRef(() => { });
+    onChange.current = (v) => {
+        set(["value"], v); // local, so reads and the controlled doc reflect typing with no round-trip
+        emit(widget.changed(v));
+    };
+    const language = widget.language ?? "";
+    const editable = widget.editable ?? true;
+    useEffect(() => {
+        const v = new EditorView({
+            parent: host.current,
+            state: EditorState.create({
+                doc: state.value,
+                extensions: [
+                    lineNumbers(),
+                    highlightActiveLineGutter(),
+                    highlightActiveLine(),
+                    history(),
+                    indentOnInput(),
+                    bracketMatching(),
+                    syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+                    keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
+                    lang.current.of([]), // grammar loads async via the [language] effect below
+                    edit.current.of(editOf(editable)),
+                    EditorView.updateListener.of((u) => {
+                        if (!u.docChanged)
+                            return;
+                        if (u.transactions.some((tr) => tr.annotation(External)))
+                            return; // our own sync, not a user edit
+                        onChange.current(u.state.doc.toString());
+                    }),
+                ],
+            }),
+        });
+        view.current = v;
+        return () => v.destroy();
+        // mount once; external state / language / editable are synced by the effects below
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // push programmatic value changes (set()/server edit) into the doc without echoing back an edit
+    useEffect(() => {
+        const v = view.current;
+        if (!v)
+            return;
+        const cur = v.state.doc.toString();
+        if (state.value !== cur) {
+            v.dispatch({ changes: { from: 0, to: cur.length, insert: state.value }, annotations: External.of(true) });
+        }
+    }, [state.value]);
+    // load the grammar chunk, then swap it into the language compartment; guard against a stale load
+    // resolving after the language changed again or the editor unmounted
+    useEffect(() => {
+        let cancelled = false;
+        void langOf(language).then((ext) => {
+            if (!cancelled)
+                view.current?.dispatch({ effects: lang.current.reconfigure(ext) });
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [language]);
+    useEffect(() => {
+        view.current?.dispatch({ effects: edit.current.reconfigure(editOf(editable)) });
+    }, [editable]);
+    return _jsx("div", { ref: host, className: `pu-code${editable ? "" : " pu-code-ro"}` });
+}

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

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

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./code.css"; // kept in the entry bundle (client.css) so no /assets css chunk to serve
+import { lazy, Suspense } from "react";
+// CodeMirror (~300KB core + grammar chunks) loads only when an app actually renders a code widget.
+// The registry points at this thin wrapper; the real view + CodeMirror live in a separate chunk.
+// CodeView narrows ViewProps internally; the registry hands it the generic shape, so widen here.
+const Impl = lazy(async () => ({ default: (await import("./index.js")).CodeView }));
+export function CodeView(props) {
+    return (_jsx(Suspense, { fallback: _jsx("div", { className: "pu-code" }), children: _jsx(Impl, { ...props }) }));
+}

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

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

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function DropdownView({ widget, state, emit, set }) {
+    const choices = widget.choices ?? [];
+    const update = (v) => {
+        set(["value"], v);
+        emit(widget.changed(v));
+    };
+    return (_jsx("select", { className: "pu-input", value: state.value, onChange: (e) => update(e.currentTarget.value), children: choices.map((c) => (_jsx("option", { value: c, children: c }, c))) }));
+}

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

@@ -0,0 +1,6 @@
+import "./file.css";
+import type { ViewProps } from "../../view.js";
+export declare function FileView({ state }: ViewProps<any, {
+    name: string;
+    url: string;
+}>): import("react").JSX.Element;

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./file.css";
+export function FileView({ state }) {
+    if (!state.url)
+        return _jsx("div", { className: "pu-output", children: "\u2014" });
+    return (_jsxs("a", { className: "pu-file", href: state.url, download: state.name || true, children: [_jsx("span", { className: "pu-file-icon", children: "\u2B73" }), _jsx("span", { className: "pu-file-name", children: state.name || "Download" })] }));
+}

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

@@ -0,0 +1,6 @@
+import "./frame.css";
+import type { ViewProps } from "../../view.js";
+export declare function FrameView({ widget, state, emit }: ViewProps<any, {
+    src: string;
+    doc: string;
+}>): import("react").JSX.Element;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./frame.css";
+export function FrameView({ widget, state, emit }) {
+    const { src, doc } = state;
+    if (!src && !doc)
+        return _jsx("div", { className: "pu-frame pu-frame-empty", children: "\u2014" });
+    const onLoad = () => emit(widget.loaded());
+    const sandbox = widget.sandbox;
+    const title = widget.title;
+    return doc ? (_jsx("iframe", { className: "pu-frame", title: title, sandbox: sandbox, srcDoc: doc, onLoad: onLoad })) : (_jsx("iframe", { className: "pu-frame", title: title, sandbox: sandbox, src: src, onLoad: onLoad }));
+}

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

@@ -0,0 +1,6 @@
+import "./gallery.css";
+import type { ViewProps } from "../../view.js";
+import type { GalleryItem } from "../../../lib/widgets/gallery.js";
+export declare function GalleryView({ state }: ViewProps<any, {
+    items: GalleryItem[];
+}>): import("react").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./gallery.css";
+export function GalleryView({ state }) {
+    const items = state.items ?? [];
+    if (items.length === 0)
+        return _jsx("div", { className: "pu-output", children: "\u2014" });
+    return (_jsx("div", { className: "pu-gallery", children: items.map((it, i) => (_jsxs("figure", { className: "pu-gallery-cell", children: [_jsx("img", { src: it.src, alt: it.caption ?? "" }), it.caption && _jsx("figcaption", { children: it.caption })] }, i))) }));
+}

package/dist/client/widgets/highlighted-text/index.d.ts

@@ -0,0 +1,7 @@
+import "./highlighted-text.css";
+import type { ViewProps } from "../../view.js";
+import type { HighlightSpan } from "../../../lib/widgets/highlighted-text.js";
+export declare function HighlightedTextView({ state, }: ViewProps<any, {
+    value: HighlightSpan[];
+    colorMap: Record<string, string>;
+}>): import("react").JSX.Element;

package/dist/client/widgets/highlighted-text/index.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./highlighted-text.css";
+// A fixed palette; a label with no entry in `colorMap` gets a stable color by hashing its name, so
+// the same label keeps the same color across renders without the author having to pick one.
+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 HighlightedTextView({ state, }) {
+    const spans = state.value ?? [];
+    const colorMap = state.colorMap ?? {};
+    if (spans.length === 0)
+        return _jsx("div", { className: "pu-output", children: "\u2014" });
+    return (_jsx("div", { className: "pu-hltext", children: spans.map((s, i) => s.label ? (_jsxs("span", { className: "pu-hltext-span", style: { background: `${colorFor(s.label, colorMap)}22`, borderColor: colorFor(s.label, colorMap) }, children: [s.text, _jsx("span", { className: "pu-hltext-label", style: { color: colorFor(s.label, colorMap) }, children: s.label })] }, i)) : (_jsx("span", { children: s.text }, i))) }));
+}

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

@@ -0,0 +1,4 @@
+import type { ViewProps } from "../../view.js";
+export declare function HtmlView({ state }: ViewProps<any, {
+    value: string;
+}>): import("react").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// The deliberate escape hatch: render author-supplied markup as-is. Trust is on the author (the same
+// code that runs handlers), so this is no broader than what they already control.
+export function HtmlView({ state }) {
+    if (!state.value)
+        return _jsx("div", { className: "pu-output", children: "\u2014" });
+    return _jsx("div", { className: "pu-html", dangerouslySetInnerHTML: { __html: state.value } });
+}

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

@@ -0,0 +1,4 @@
+import type { ViewProps } from "../../view.js";
+export declare function ImageView({ state }: ViewProps<any, {
+    src: string;
+}>): import("react").JSX.Element;

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ImageView({ state }) {
+    return state.src ? _jsx("img", { className: "pu-image", src: state.src, alt: "" }) : _jsx("div", { className: "pu-output", children: "\u2014" });
+}

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

@@ -0,0 +1,4 @@
+import type { ViewProps } from "../../view.js";
+export declare function JsonView({ state }: ViewProps<any, {
+    value: unknown;
+}>): import("react").JSX.Element;

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function JsonView({ state }) {
+    return _jsx("pre", { className: "pu-output", children: JSON.stringify(state.value, null, 2) });
+}

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

@@ -0,0 +1,7 @@
+import "./label.css";
+import type { ViewProps } from "../../view.js";
+import type { LabelClass } from "../../../lib/widgets/label.js";
+export declare function LabelView({ state }: ViewProps<any, {
+    label: string;
+    confidences: LabelClass[];
+}>): import("react").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./label.css";
+export function LabelView({ state }) {
+    const confidences = [...(state.confidences ?? [])].sort((a, b) => b.score - a.score);
+    if (!state.label && confidences.length === 0)
+        return _jsx("div", { className: "pu-output", children: "\u2014" });
+    return (_jsxs("div", { className: "pu-label", children: [state.label && _jsx("div", { className: "pu-label-top", children: state.label }), confidences.map((c) => (_jsxs("div", { className: "pu-label-row", children: [_jsx("div", { className: "pu-label-bar", style: { width: `${Math.round(Math.max(0, Math.min(1, c.score)) * 100)}%` } }), _jsx("span", { className: "pu-label-name", children: c.label }), _jsxs("span", { className: "pu-label-score", children: [(c.score * 100).toFixed(1), "%"] })] }, c.label)))] }));
+}

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

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

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function LayoutView({ widget, state, slot }) {
+    const dir = widget.type ?? "col";
+    const items = state.items ?? [];
+    const style = dir === "grid" ? { gridTemplateColumns: `repeat(${widget.cols ?? 2}, minmax(0, 1fr))` } : undefined;
+    return (_jsx("div", { className: `pu-layout pu-layout-${dir}`, style: style, children: items.map((key) => slot(key)) }));
+}

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

@@ -0,0 +1,4 @@
+import type { ViewProps } from "../../view.js";
+export declare function LogView({ state }: ViewProps<any, {
+    lines: string[];
+}>): import("react").JSX.Element;

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function LogView({ state }) {
+    return _jsx("pre", { className: "pu-output", children: state.lines.join("\n") });
+}

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

@@ -0,0 +1,6 @@
+import "./mic.css";
+import type { ViewProps } from "../../view.js";
+import type { MicWidget } from "../../../lib/widgets/mic.js";
+export declare function MicView({ widget, state, enabled, emit, set }: ViewProps<MicWidget, {
+    live: boolean;
+}>): import("react").JSX.Element | null;

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

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./mic.css";
+import { useEffect, useRef } from "react";
+export function MicView({ widget, state, enabled, emit, set }) {
+    const streamRef = useRef(null);
+    const recRef = useRef(null);
+    const startingRef = useRef(false);
+    // capture follows `live`; the view sets `live` locally so it starts/stops without a round-trip
+    const toggle = (live) => {
+        set(["live"], live);
+        emit(widget.toggled(live));
+    };
+    useEffect(() => {
+        let cancelled = false;
+        if (state.live && enabled && !streamRef.current && !startingRef.current && navigator.mediaDevices?.getUserMedia) {
+            startingRef.current = true;
+            void (async () => {
+                try {
+                    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                    if (cancelled)
+                        return stream.getTracks().forEach((t) => t.stop());
+                    streamRef.current = stream;
+                    const ac = new AudioContext({ sampleRate: 16000 });
+                    const record = () => {
+                        if (streamRef.current !== stream)
+                            return;
+                        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.clip(a.getChannelData(0)));
+                            if (widget.every > 0 && streamRef.current === stream)
+                                record();
+                        };
+                        rec.start();
+                        if (widget.every > 0)
+                            setTimeout(() => rec.stop(), widget.every);
+                    };
+                    record();
+                }
+                catch (err) {
+                    console.error(err);
+                }
+                finally {
+                    startingRef.current = false;
+                }
+            })();
+        }
+        else if ((!state.live || !enabled) && streamRef.current) {
+            if (recRef.current?.state === "recording")
+                recRef.current.stop();
+            streamRef.current.getTracks().forEach((t) => t.stop());
+            streamRef.current = null;
+            recRef.current = null;
+        }
+        return () => {
+            cancelled = true;
+        };
+    }, [state.live, enabled]);
+    if (!widget.control)
+        return null;
+    const streaming = widget.every > 0;
+    const cls = `pu-submit${state.live ? " pu-rec" : ""}`;
+    if (!streaming && widget.hold) {
+        return (_jsx("button", { className: cls, disabled: !enabled, onPointerDown: () => toggle(true), onPointerUp: () => toggle(false), onPointerLeave: () => state.live && toggle(false), children: state.live ? "● Recording…" : "Hold to talk" }));
+    }
+    return (_jsx("button", { className: cls, disabled: !enabled, onClick: () => toggle(!state.live), children: state.live ? (streaming ? "● Live" : "● Recording…") : streaming ? "Go live" : "Record" }));
+}

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

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

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function NumberView({ widget, state, emit, set }) {
+    const update = (v) => {
+        set(["value"], v);
+        emit(widget.changed(v));
+    };
+    return _jsx("input", { className: "pu-input", type: "number", min: widget.min, max: widget.max, value: state.value, onChange: (e) => update(e.currentTarget.valueAsNumber) });
+}

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

@@ -0,0 +1,6 @@
+import "./output.css";
+import type { ViewProps } from "../../view.js";
+import type { OutputWidget } from "../../../lib/widgets/output.js";
+export declare function OutputView({ widget, state }: ViewProps<OutputWidget, {
+    value: string;
+}>): import("react").JSX.Element;

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./output.css";
+import { lazy, Suspense } from "react";
+// The markdown renderer (react-markdown + remark-gfm) loads as its own /assets chunk, only when an
+// output actually uses format="markdown" — plain text output stays weightless in the entry bundle.
+const Markdown = lazy(() => import("./markdown.js"));
+export function OutputView({ widget, state }) {
+    const format = widget.format ?? "text";
+    const plain = _jsx("div", { className: "pu-output", children: state.value || "—" });
+    if (format !== "markdown")
+        return plain;
+    return (_jsx(Suspense, { fallback: plain, children: _jsx(Markdown, { value: state.value }) }));
+}

package/dist/client/widgets/output/markdown.d.ts

@@ -0,0 +1,3 @@
+export default function Markdown({ value }: {
+    value: string;
+}): import("react").JSX.Element;

package/dist/client/widgets/output/markdown.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+// Lazy-loaded render path for output({ format: "markdown" }). react-markdown escapes raw HTML by
+// default, so this is XSS-safe; an html format would be a separate, deliberate opt-in.
+export default function Markdown({ value }) {
+    return (_jsx("div", { className: "pu-md", children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: value }) }));
+}

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

@@ -0,0 +1,6 @@
+import "./progress.css";
+import type { ViewProps } from "../../view.js";
+export declare function ProgressView({ state }: ViewProps<any, {
+    value: number;
+    label: string;
+}>): import("react").JSX.Element;

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./progress.css";
+export function ProgressView({ state }) {
+    const pct = Math.round(Math.max(0, Math.min(1, state.value ?? 0)) * 100);
+    return (_jsxs("div", { className: "pu-progress", children: [_jsx("div", { className: "pu-progress-track", children: _jsx("div", { className: "pu-progress-fill", style: { width: `${pct}%` } }) }), _jsx("span", { className: "pu-progress-label", children: state.label || `${pct}%` })] }));
+}

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

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

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./radio.css";
+export function RadioView({ widget, state, emit, set }) {
+    const choices = widget.choices ?? [];
+    const update = (v) => {
+        set(["value"], v);
+        emit(widget.changed(v));
+    };
+    return (_jsx("div", { className: "pu-radio", children: choices.map((c) => (_jsxs("label", { className: "pu-radio-opt", children: [_jsx("input", { type: "radio", checked: state.value === c, onChange: () => update(c) }), " ", c] }, c))) }));
+}

package/dist/client/widgets/registry.d.ts

@@ -0,0 +1,2 @@
+import type { WidgetView } from "../view.js";
+export declare const VIEWS: Record<string, WidgetView>;

package/dist/client/widgets/registry.js

@@ -0,0 +1,69 @@
+import { TextView } from "./text/index.js";
+import { NumberView } from "./number/index.js";
+import { SliderView } from "./slider/index.js";
+import { CodeView } from "./code/lazy.js";
+import { TableView } from "./table/lazy.js";
+import { ChartView } from "./chart/lazy.js";
+import { DropdownView } from "./dropdown/index.js";
+import { CheckboxView } from "./checkbox/index.js";
+import { CheckboxGroupView } from "./checkbox-group/index.js";
+import { RadioView } from "./radio/index.js";
+import { GalleryView } from "./gallery/index.js";
+import { VideoView } from "./video/index.js";
+import { LabelView } from "./label/index.js";
+import { HighlightedTextView } from "./highlighted-text/index.js";
+import { AnnotatedImageView } from "./annotated-image/index.js";
+import { FileView } from "./file/index.js";
+import { ProgressView } from "./progress/index.js";
+import { HtmlView } from "./html/index.js";
+import { FrameView } from "./frame/index.js";
+import { UploadView } from "./upload/index.js";
+import { ImageView } from "./image/index.js";
+import { ButtonView } from "./button/index.js";
+import { MicView } from "./mic/index.js";
+import { ChatView } from "./chat/index.js";
+import { OutputView } from "./output/index.js";
+import { JsonView } from "./json/index.js";
+import { LogView } from "./log/index.js";
+import { AudioView } from "./audio/index.js";
+import { WebcamView } from "./webcam/index.js";
+import { LayoutView } from "./layout/index.js";
+import { TabsView } from "./tabs/index.js";
+import { AccordionView } from "./accordion/index.js";
+// the only place that maps a widget's `type` to its React view
+export const VIEWS = {
+    text: TextView,
+    number: NumberView,
+    slider: SliderView,
+    code: CodeView,
+    table: TableView,
+    chart: ChartView,
+    dropdown: DropdownView,
+    checkbox: CheckboxView,
+    checkboxGroup: CheckboxGroupView,
+    radio: RadioView,
+    gallery: GalleryView,
+    video: VideoView,
+    label: LabelView,
+    highlightedText: HighlightedTextView,
+    annotatedImage: AnnotatedImageView,
+    file: FileView,
+    progress: ProgressView,
+    html: HtmlView,
+    frame: FrameView,
+    upload: UploadView,
+    image: ImageView,
+    button: ButtonView,
+    mic: MicView,
+    chat: ChatView,
+    output: OutputView,
+    json: JsonView,
+    log: LogView,
+    audio: AudioView,
+    webcam: WebcamView,
+    row: LayoutView,
+    col: LayoutView,
+    grid: LayoutView,
+    tabs: TabsView,
+    accordion: AccordionView,
+};

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

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

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./slider.css";
+export function SliderView({ widget, state, emit, set }) {
+    const update = (v) => {
+        set(["value"], v); // local, so the track and read-back reflect the drag with no round-trip
+        emit(widget.changed(v));
+    };
+    return (_jsxs("div", { className: "pu-slider", children: [_jsx("input", { type: "range", min: widget.min, max: widget.max, step: widget.step, value: state.value, onChange: (e) => update(e.currentTarget.valueAsNumber) }), _jsx("output", { className: "pu-slider-val", children: state.value })] }));
+}

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

@@ -0,0 +1,6 @@
+import type { ViewProps } from "../../view.js";
+import type { TableWidget, Column, Row } from "../../../lib/widgets/table.js";
+export declare function TableView({ widget, state, emit, set }: ViewProps<TableWidget, {
+    columns: Column[];
+    rows: Row[];
+}>): import("react").JSX.Element;