knobkit 0.0.1

package/src/client/widgets/progress/index.tsx

@@ -0,0 +1,14 @@
+import "./progress.css";
+import type { ViewProps } from "../../view.js";
+
+export function ProgressView({ state }: ViewProps<any, { value: number; label: string }>) {
+  const pct = Math.round(Math.max(0, Math.min(1, state.value ?? 0)) * 100);
+  return (
+    <div className="pu-progress">
+      <div className="pu-progress-track">
+        <div className="pu-progress-fill" style={{ width: `${pct}%` }} />
+      </div>
+      <span className="pu-progress-label">{state.label || `${pct}%`}</span>
+    </div>
+  );
+}

package/src/client/widgets/progress/progress.css

@@ -0,0 +1,26 @@
+@layer components {
+  .pu-progress {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  .pu-progress-track {
+    flex: 1;
+    height: 8px;
+    border-radius: 999px;
+    background: var(--pu-border, #e3e6ea);
+    overflow: hidden;
+  }
+  .pu-progress-fill {
+    height: 100%;
+    background: var(--pu-accent, #2563eb);
+    border-radius: 999px;
+    transition: width 0.2s ease;
+  }
+  .pu-progress-label {
+    color: var(--pu-muted, #6b7280);
+    font-variant-numeric: tabular-nums;
+    min-width: 3ch;
+    text-align: right;
+  }
+}

package/src/client/widgets/radio/index.tsx

@@ -0,0 +1,20 @@
+import "./radio.css";
+import type { ViewProps } from "../../view.js";
+import type { ValueWidget } from "../../../lib/widgets/value.js";
+
+export function RadioView({ widget, state, emit, set }: ViewProps<ValueWidget<string>, { value: string }>) {
+  const choices = (widget.choices as string[]) ?? [];
+  const update = (v: string) => {
+    set(["value"], v);
+    emit(widget.changed(v));
+  };
+  return (
+    <div className="pu-radio">
+      {choices.map((c) => (
+        <label key={c} className="pu-radio-opt">
+          <input type="radio" checked={state.value === c} onChange={() => update(c)} /> {c}
+        </label>
+      ))}
+    </div>
+  );
+}

package/src/client/widgets/radio/radio.css

@@ -0,0 +1,20 @@
+@layer components {
+  .pu-radio {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .pu-radio-opt {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    user-select: none;
+  }
+  .pu-radio-opt input {
+    width: 16px;
+    height: 16px;
+    accent-color: var(--pu-accent, #2563eb);
+    cursor: pointer;
+  }
+}

package/src/client/widgets/registry.tsx

@@ -0,0 +1,71 @@
+import type { WidgetView } from "../view.js";
+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: Record<string, WidgetView> = {
+  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/src/client/widgets/slider/index.tsx

@@ -0,0 +1,23 @@
+import "./slider.css";
+import type { ViewProps } from "../../view.js";
+import type { ValueWidget } from "../../../lib/widgets/value.js";
+
+export function SliderView({ widget, state, emit, set }: ViewProps<ValueWidget<number>, { value: number }>) {
+  const update = (v: number) => {
+    set(["value"], v); // local, so the track and read-back reflect the drag with no round-trip
+    emit(widget.changed(v));
+  };
+  return (
+    <div className="pu-slider">
+      <input
+        type="range"
+        min={widget.min as number}
+        max={widget.max as number}
+        step={widget.step as number}
+        value={state.value}
+        onChange={(e) => update(e.currentTarget.valueAsNumber)}
+      />
+      <output className="pu-slider-val">{state.value}</output>
+    </div>
+  );
+}

package/src/client/widgets/slider/slider.css

@@ -0,0 +1,18 @@
+@layer components {
+  .pu-slider {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+  .pu-slider input[type="range"] {
+    flex: 1;
+    accent-color: var(--pu-accent, #2563eb);
+    cursor: pointer;
+  }
+  .pu-slider-val {
+    min-width: 3ch;
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+    color: var(--pu-muted, #6b7280);
+  }
+}

package/src/client/widgets/table/index.tsx

@@ -0,0 +1,95 @@
+// table.css is imported by ./lazy.tsx (the static entry wrapper) so it lands in client.css, not a
+// split css chunk serve() wouldn't route.
+import { useMemo } from "react";
+import { RevoGrid, type AfterEditEvent, type ColumnRegular, type DataType } from "@revolist/react-datagrid";
+import type { ViewProps } from "../../view.js";
+import type { TableWidget, Column, Row } from "../../../lib/widgets/table.js";
+
+// "compact" theme metrics (from revo-grid-style.css): header row 45px, data row 32px. Used to fit the
+// grid to its content up to maxHeight, then scroll — matching Gradio's max_height behavior.
+const HEADER_PX = 45;
+const ROW_PX = 32;
+
+// A column with no explicit width defaults to one that fits its *header* — the header is usually the
+// wider constraint for compact tables (e.g. "Δ from mean" over numeric cells), and unlike content-based
+// auto-size it stays stable as data changes. Measured with canvas for proportional-font accuracy.
+const HEADER_FONT = "600 14px Helvetica, Arial, sans-serif"; // compact theme header
+const COL_PAD = 34; // header cell padding + room for the sort arrow
+const MIN_COL = 80;
+const MAX_COL = 240;
+let measureCtx: CanvasRenderingContext2D | null | undefined;
+function headerWidth(label: string): number {
+  if (measureCtx === undefined) measureCtx = document.createElement("canvas").getContext("2d");
+  let w: number;
+  if (measureCtx) {
+    measureCtx.font = HEADER_FONT;
+    w = measureCtx.measureText(label).width;
+  } else {
+    w = label.length * 8; // canvas unavailable: rough fallback
+  }
+  return Math.max(MIN_COL, Math.min(MAX_COL, Math.ceil(w) + COL_PAD));
+}
+
+export function TableView({ widget, state, emit, set }: ViewProps<TableWidget, { columns: Column[]; rows: Row[] }>) {
+  const editable = (widget.editable as boolean) ?? false;
+  const maxHeight = (widget.maxHeight as number) ?? 500;
+  // fit to content (header + rows), capped at maxHeight; +2 leaves room for a horizontal scrollbar so
+  // a fitting grid doesn't sprout a vertical one
+  const height = Math.min(maxHeight, HEADER_PX + state.rows.length * ROW_PX + 2);
+
+  // RevoGrid warns that columns/source need stable references; the store hands us a fresh state object
+  // only on a real edit (edits are immutable), so memoizing on those references is both stable and correct.
+  const columns = useMemo<ColumnRegular[]>(
+    () =>
+      state.columns.map((c) => ({
+        prop: c.key,
+        name: c.label ?? c.key,
+        sortable: true,
+        readonly: !editable,
+        size: c.width ?? headerWidth(c.label ?? c.key),
+      })),
+    [state.columns, editable],
+  );
+  // clone each row: RevoGrid mutates its own source in place on edit — we must not let it touch the
+  // store's state objects. The real change is applied through the store via onAfteredit below.
+  const source = useMemo<DataType[]>(() => state.rows.map((r) => ({ ...r })), [state.rows]);
+
+  const apply = (row: number, key: string, value: unknown): void => {
+    // a range/paste commit reports every cell in the selection; skip the ones that didn't change so
+    // handlers don't see no-op edits
+    if (state.rows[row]?.[key] === value) return;
+    set(["rows", row, key], value); // local edit by path; reads reflect it immediately
+    emit(widget.edited({ row, key, value }));
+  };
+
+  const onAfteredit = (e: CustomEvent<AfterEditEvent>): void => {
+    const d = e.detail as Record<string, unknown>;
+    if (d && "data" in d) {
+      // range / paste edit: { data: { [rowIndex]: changedRowModel } }
+      for (const [ri, model] of Object.entries(d.data as Record<string, Record<string, unknown>>)) {
+        for (const [key, value] of Object.entries(model)) apply(Number(ri), key, value);
+      }
+    } else if (d) {
+      // single cell: val is the editor's new value, not yet in the model
+      apply(d.rowIndex as number, d.prop as string, d.val);
+    }
+  };
+
+  return (
+    <div className="pu-table">
+      <RevoGrid
+        columns={columns}
+        source={source}
+        readonly={!editable}
+        range={true}
+        resize={true}
+        rowHeaders={true}
+        theme="compact"
+        stretch={true}
+        hideAttribution={true}
+        style={{ height }}
+        onAfteredit={onAfteredit}
+      />
+    </div>
+  );
+}

package/src/client/widgets/table/lazy.tsx

@@ -0,0 +1,23 @@
+import "./table.css"; // kept in the entry bundle (client.css) so no /assets css chunk to serve
+import { lazy, Suspense, type ComponentType } from "react";
+import type { ViewProps } from "../../view.js";
+
+// RevoGrid is a heavy web-component grid; load it only when an app actually renders a table widget.
+// TableView narrows ViewProps internally; the registry hands it the generic shape, so widen here.
+const Impl = lazy(async () => ({ default: (await import("./index.js")).TableView as unknown as ComponentType<ViewProps> }));
+
+// mirror index.tsx's fit math so the loading placeholder is the grid's real height — no layout jump
+// when the chunk resolves (can't import the constants from index.js without pulling it into the entry)
+const fitHeight = (props: ViewProps): number => {
+  const rows = (props.state as { rows?: unknown[] }).rows ?? [];
+  const maxHeight = (props.widget as { maxHeight?: number }).maxHeight ?? 500;
+  return Math.min(maxHeight, 45 + rows.length * 32 + 2);
+};
+
+export function TableView(props: ViewProps) {
+  return (
+    <Suspense fallback={<div className="pu-table" style={{ height: fitHeight(props) }} />}>
+      <Impl {...props} />
+    </Suspense>
+  );
+}

package/src/client/widgets/table/table.css

@@ -0,0 +1,15 @@
+@layer components {
+  .pu-table {
+    border: 1px solid var(--pu-border, #e3e6ea);
+    border-radius: 8px;
+    overflow: hidden;
+  }
+  .pu-table revo-grid {
+    display: block;
+    width: 100%;
+    /* RevoGrid floors the host at min-height:300px; we drive an exact fit height inline, so drop the
+       floor. !important is needed because RevoGrid injects that rule unlayered, which outranks our
+       @layer styles regardless of specificity. */
+    min-height: 0 !important;
+  }
+}

package/src/client/widgets/tabs/index.tsx

@@ -0,0 +1,28 @@
+import "./tabs.css";
+import { useState } from "react";
+import type { ViewProps } from "../../view.js";
+
+export function TabsView({ widget, state, slot }: ViewProps<any, { items: string[] }>) {
+  const items = state.items ?? [];
+  const labels = (widget.labels as string[]) ?? [];
+  const [active, setActive] = useState(0);
+  const current = Math.min(active, Math.max(0, items.length - 1));
+  return (
+    <div className="pu-tabs">
+      <div className="pu-tabs-bar" role="tablist">
+        {items.map((_key, i) => (
+          <button
+            key={i}
+            role="tab"
+            aria-selected={i === current}
+            className={`pu-tab${i === current ? " pu-tab-active" : ""}`}
+            onClick={() => setActive(i)}
+          >
+            {labels[i] ?? `Tab ${i + 1}`}
+          </button>
+        ))}
+      </div>
+      <div className="pu-tabs-panel">{items[current] != null ? slot(items[current]) : null}</div>
+    </div>
+  );
+}

package/src/client/widgets/tabs/tabs.css

@@ -0,0 +1,30 @@
+@layer components {
+  .pu-tabs {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+  }
+  .pu-tabs-bar {
+    display: flex;
+    gap: 4px;
+    border-bottom: 1px solid var(--pu-border, #e3e6ea);
+  }
+  .pu-tab {
+    appearance: none;
+    background: none;
+    border: none;
+    padding: 8px 14px;
+    margin-bottom: -1px;
+    font: inherit;
+    color: var(--pu-muted, #6b7280);
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+  }
+  .pu-tab:hover {
+    color: var(--pu-text, #1c1f23);
+  }
+  .pu-tab-active {
+    color: var(--pu-accent, #2563eb);
+    border-bottom-color: var(--pu-accent, #2563eb);
+  }
+}

package/src/client/widgets/text/index.tsx

@@ -0,0 +1,16 @@
+import "./text.css";
+import type { ViewProps } from "../../view.js";
+import type { ValueWidget } from "../../../lib/widgets/value.js";
+
+export function TextView({ widget, state, emit, set }: ViewProps<ValueWidget<string>, { value: string }>) {
+  const lines = (widget.lines as number) ?? 1;
+  const update = (v: string) => {
+    set(["value"], v); // local, so the controlled input reflects typing and reads see it
+    emit(widget.changed(v));
+  };
+  return lines > 1 ? (
+    <textarea className="pu-input" rows={lines} placeholder={widget.placeholder as string} value={state.value} onChange={(e) => update(e.currentTarget.value)} />
+  ) : (
+    <input className="pu-input" placeholder={widget.placeholder as string} value={state.value} onChange={(e) => update(e.currentTarget.value)} />
+  );
+}

package/src/client/widgets/text/text.css

@@ -0,0 +1,21 @@
+@layer components {
+  .pu-input {
+    width: 100%;
+    padding: 9px 11px;
+    border: 1px solid var(--pu-border, #e3e6ea);
+    border-radius: 8px;
+    font: inherit;
+    color: inherit;
+    background: #fff;
+    outline: none;
+    transition: border-color 0.12s, box-shadow 0.12s;
+  }
+  .pu-input:focus {
+    border-color: var(--pu-accent, #2563eb);
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
+  }
+  textarea.pu-input {
+    resize: vertical;
+    line-height: 1.5;
+  }
+}

package/src/client/widgets/upload/index.tsx

@@ -0,0 +1,30 @@
+import "./upload.css";
+import type { ViewProps } from "../../view.js";
+import type { ValueWidget } from "../../../lib/widgets/value.js";
+
+export function UploadView({ widget, state, emit, set }: ViewProps<ValueWidget<string | null>, { value: string | null }>) {
+  return (
+    <div className="pu-upload">
+      <label className="pu-upload-drop">
+        <input
+          type="file"
+          hidden
+          accept={widget.accept as string}
+          onChange={(e) => {
+            const f = e.currentTarget.files?.[0];
+            if (!f) return;
+            const r = new FileReader();
+            r.onload = () => {
+              const url = String(r.result);
+              set(["value"], url);
+              emit(widget.changed(url));
+            };
+            r.readAsDataURL(f);
+          }}
+        />
+        <span>{state.value ? "Choose another image" : "Choose an image…"}</span>
+      </label>
+      {state.value && <img className="pu-image" src={state.value} alt="" />}
+    </div>
+  );
+}

package/src/client/widgets/upload/upload.css

@@ -0,0 +1,30 @@
+@layer components {
+  .pu-upload {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+  .pu-image {
+    display: block;
+    max-width: 100%;
+    border: 1px solid var(--pu-border, #e3e6ea);
+    border-radius: 8px;
+  }
+  .pu-upload-drop {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 22px 14px;
+    border: 1.5px dashed var(--pu-border, #e3e6ea);
+    border-radius: 8px;
+    color: var(--pu-muted, #6b7280);
+    background: #fafbfc;
+    cursor: pointer;
+    transition: border-color 0.12s, background 0.12s, color 0.12s;
+  }
+  .pu-upload-drop:hover {
+    border-color: var(--pu-accent, #2563eb);
+    color: var(--pu-accent, #2563eb);
+    background: rgba(37, 99, 235, 0.04);
+  }
+}

package/src/client/widgets/video/index.tsx

@@ -0,0 +1,10 @@
+import "./video.css";
+import type { ViewProps } from "../../view.js";
+
+export function VideoView({ widget, state }: ViewProps<any, { src: string }>) {
+  return state.src ? (
+    <video src={state.src} controls autoPlay={Boolean(widget.autoplay)} loop={Boolean(widget.loop)} muted={Boolean(widget.autoplay)} />
+  ) : (
+    <div className="pu-output">—</div>
+  );
+}

package/src/client/widgets/video/video.css

@@ -0,0 +1,8 @@
+@layer components {
+  video {
+    width: 100%;
+    display: block;
+    border-radius: 8px;
+    background: #000;
+  }
+}

package/src/client/widgets/webcam/index.tsx

@@ -0,0 +1,81 @@
+import "./webcam.css";
+import { useEffect, useRef } from "react";
+import type { ViewProps } from "../../view.js";
+import type { WebcamWidget } from "../../../lib/widgets/webcam.js";
+
+export function WebcamView({ widget, state, enabled, emit, set }: ViewProps<WebcamWidget, { live: boolean }>) {
+  const streamRef = useRef<MediaStream | null>(null);
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const startingRef = useRef(false);
+
+  // capture follows `live`; the view sets `live` locally so it starts/stops without a round-trip
+  const toggle = (live: boolean): void => {
+    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({ video: { facingMode: widget.facing } });
+          if (cancelled) return stream.getTracks().forEach((t) => t.stop());
+          streamRef.current = stream;
+          const video = videoRef.current!;
+          video.srcObject = stream;
+          await video.play();
+
+          if (widget.every > 0) {
+            const canvas = document.createElement("canvas");
+            timerRef.current = setInterval(() => {
+              if (streamRef.current !== stream || video.readyState < 2 || !video.videoWidth) return;
+              canvas.width = video.videoWidth;
+              canvas.height = video.videoHeight;
+              canvas.getContext("2d")?.drawImage(video, 0, 0);
+              emit(widget.frame(canvas.toDataURL("image/jpeg", 0.8)));
+            }, widget.every);
+          }
+        } catch (err) {
+          console.error(err);
+        } finally {
+          startingRef.current = false;
+        }
+      })();
+    } else if ((!state.live || !enabled) && streamRef.current) {
+      if (timerRef.current) clearInterval(timerRef.current);
+      timerRef.current = null;
+      streamRef.current.getTracks().forEach((t) => t.stop());
+      streamRef.current = null;
+      if (videoRef.current) videoRef.current.srcObject = null;
+    }
+
+    return () => {
+      cancelled = true;
+    };
+  }, [state.live, enabled]);
+
+  const mirror = widget.facing === "user" ? " pu-webcam-mirror" : "";
+
+  return (
+    <div className="pu-webcam">
+      {widget.preview ? (
+        <div className="pu-webcam-stage">
+          <video ref={videoRef} className={`pu-webcam-video${mirror}`} muted playsInline />
+          {!state.live && <div className="pu-webcam-placeholder">Camera off</div>}
+        </div>
+      ) : (
+        // kept alive off-screen so capture still has a frame source, but nothing renders
+        <video ref={videoRef} className="pu-webcam-offscreen" muted playsInline />
+      )}
+      {widget.control && (
+        <button className={`pu-submit${state.live ? " pu-rec" : ""}`} disabled={!enabled} onClick={() => toggle(!state.live)}>
+          {state.live ? "● Stop camera" : "Go live"}
+        </button>
+      )}
+    </div>
+  );
+}

package/src/client/widgets/webcam/webcam.css

@@ -0,0 +1,46 @@
+@layer components {
+  .pu-webcam {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+  .pu-webcam-stage {
+    position: relative;
+    width: 480px;
+    max-width: 100%;
+    aspect-ratio: 4 / 3;
+    background: #111418;
+    border-radius: 12px;
+    overflow: hidden;
+  }
+  .pu-webcam-video {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .pu-webcam-mirror {
+    transform: scaleX(-1);
+  }
+  .pu-webcam-offscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .pu-webcam-placeholder {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #6b7280;
+    font-size: 14px;
+    letter-spacing: 0.02em;
+  }
+}

package/src/css.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

package/src/env.d.ts

@@ -0,0 +1 @@
+declare module "*.css";