knobkit 0.0.1

package/src/client/widgets/annotated-image/annotated-image.css

@@ -0,0 +1,62 @@
+@layer components {
+  .pu-annimg {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .pu-annimg-frame {
+    position: relative;
+    display: inline-block;
+    line-height: 0;
+  }
+  .pu-annimg-base {
+    display: block;
+    max-width: 100%;
+    border-radius: 8px;
+  }
+  .pu-annimg-mask {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.5;
+    mix-blend-mode: multiply;
+    pointer-events: none;
+  }
+  .pu-annimg-box {
+    position: absolute;
+    border: 2px solid;
+    border-radius: 4px;
+    box-sizing: border-box;
+  }
+  .pu-annimg-tag {
+    position: absolute;
+    top: -1px;
+    left: -2px;
+    transform: translateY(-100%);
+    color: #fff;
+    font-size: 11px;
+    font-weight: 650;
+    line-height: 1.4;
+    padding: 1px 5px;
+    border-radius: 4px 4px 4px 0;
+    white-space: nowrap;
+  }
+  .pu-annimg-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px 12px;
+  }
+  .pu-annimg-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    color: var(--pu-muted, #6b7280);
+  }
+  .pu-annimg-swatch {
+    width: 12px;
+    height: 12px;
+    border-radius: 3px;
+  }
+}

package/src/client/widgets/annotated-image/index.tsx

@@ -0,0 +1,73 @@
+import "./annotated-image.css";
+import { useState } from "react";
+import type { ViewProps } from "../../view.js";
+import type { Annotation } from "../../../lib/widgets/annotated-image.js";
+
+const PALETTE = ["#2563eb", "#16a34a", "#dc2626", "#d97706", "#7c3aed", "#0891b2", "#db2777", "#65a30d"];
+
+function colorFor(label: string, colorMap: Record<string, string>): string {
+  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,
+}: ViewProps<any, { src: string; annotations: Annotation[]; colorMap: Record<string, string> }>) {
+  // 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<{ w: number; h: number } | null>(null);
+  if (!state.src) return <div className="pu-output">—</div>;
+  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 (
+    <div className="pu-annimg">
+      <div className="pu-annimg-frame">
+        <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 (
+              <span key={i}>
+                {a.mask && <img className="pu-annimg-mask" src={a.mask} alt="" />}
+                {a.box && (
+                  <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,
+                    }}
+                  >
+                    <span className="pu-annimg-tag" style={{ background: color }}>
+                      {a.label}
+                    </span>
+                  </span>
+                )}
+              </span>
+            );
+          })}
+      </div>
+      {labels.length > 0 && (
+        <div className="pu-annimg-legend">
+          {labels.map((l) => (
+            <span key={l} className="pu-annimg-chip">
+              <span className="pu-annimg-swatch" style={{ background: colorFor(l, colorMap) }} />
+              {l}
+            </span>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/client/widgets/audio/audio.css

@@ -0,0 +1,6 @@
+@layer components {
+  audio {
+    width: 100%;
+    display: block;
+  }
+}

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

@@ -0,0 +1,6 @@
+import "./audio.css";
+import type { ViewProps } from "../../view.js";
+
+export function AudioView({ widget, state }: ViewProps<any, { src: string }>) {
+  return state.src ? <audio src={state.src} controls autoPlay={Boolean(widget.autoplay)} /> : null;
+}

package/src/client/widgets/button/button.css

@@ -0,0 +1,25 @@
+@layer components {
+  .pu-submit {
+    padding: 9px 16px;
+    border: none;
+    border-radius: 8px;
+    background: var(--pu-accent, #2563eb);
+    color: #fff;
+    font: inherit;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.12s, transform 0.06s;
+  }
+  .pu-submit:hover {
+    background: var(--pu-accent-press, #1d4ed8);
+  }
+  .pu-submit:active {
+    transform: translateY(1px);
+  }
+  .pu-submit:disabled {
+    opacity: 0.55;
+    cursor: default;
+    background: var(--pu-accent, #2563eb);
+    transform: none;
+  }
+}

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

@@ -0,0 +1,11 @@
+import "./button.css";
+import type { ViewProps } from "../../view.js";
+import type { ButtonWidget, ButtonState } from "../../../lib/widgets/button.js";
+
+export function ButtonView({ widget, state, enabled, emit }: ViewProps<ButtonWidget, ButtonState>) {
+  return (
+    <button className="pu-submit" disabled={!enabled} onClick={() => emit(widget.clicked())}>
+      {state.label}
+    </button>
+  );
+}

package/src/client/widgets/chart/chart.css

@@ -0,0 +1,12 @@
+@layer components {
+  .pu-chart {
+    width: 100%;
+    border: 1px solid var(--pu-border, #e3e6ea);
+    border-radius: 8px;
+    padding: 12px 8px 4px;
+    background: #fff;
+  }
+  .pu-chart .recharts-cartesian-axis-tick text {
+    fill: var(--pu-muted, #6b7280);
+  }
+}

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

@@ -0,0 +1,63 @@
+// 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";
+import type { ReactElement } from "react";
+import type { ViewProps } from "../../view.js";
+import type { ChartWidget, Point } from "../../../lib/widgets/chart.js";
+
+const COLORS = ["#2563eb", "#16a34a", "#dc2626", "#d97706", "#7c3aed"]; // knobkit accent + a small palette
+
+export function ChartView({ widget, state }: ViewProps<ChartWidget, { data: Point[] }>) {
+  const kind = (widget.kind as string) ?? "bar";
+  const x = widget.x as string;
+  const series = Array.isArray(widget.y) ? (widget.y as string[]) : [widget.y as string];
+  const height = (widget.maxHeight as number) ?? 300;
+  const data = state.data;
+
+  const axes = (
+    <>
+      <CartesianGrid strokeDasharray="3 3" stroke="var(--pu-border, #e3e6ea)" />
+      <XAxis dataKey={x} tick={{ fontSize: 12 }} />
+      <YAxis tick={{ fontSize: 12 }} />
+      <Tooltip />
+      {series.length > 1 && <Legend />}
+    </>
+  );
+
+  let inner: ReactElement;
+  if (kind === "line") {
+    inner = (
+      <LineChart data={data}>
+        {axes}
+        {series.map((k, i) => (
+          <Line key={k} type="monotone" dataKey={k} stroke={COLORS[i % COLORS.length]} dot={false} />
+        ))}
+      </LineChart>
+    );
+  } else if (kind === "area") {
+    inner = (
+      <AreaChart data={data}>
+        {axes}
+        {series.map((k, i) => (
+          <Area key={k} type="monotone" dataKey={k} stroke={COLORS[i % COLORS.length]} fill={COLORS[i % COLORS.length]} fillOpacity={0.2} />
+        ))}
+      </AreaChart>
+    );
+  } else {
+    inner = (
+      <BarChart data={data}>
+        {axes}
+        {series.map((k, i) => (
+          <Bar key={k} dataKey={k} fill={COLORS[i % COLORS.length]} />
+        ))}
+      </BarChart>
+    );
+  }
+
+  return (
+    <div className="pu-chart">
+      <ResponsiveContainer width="100%" height={height}>
+        {inner}
+      </ResponsiveContainer>
+    </div>
+  );
+}

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

@@ -0,0 +1,15 @@
+import "./chart.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";
+
+// Recharts is sizeable; load it only when an app actually renders a chart widget.
+const Impl = lazy(async () => ({ default: (await import("./index.js")).ChartView as unknown as ComponentType<ViewProps> }));
+
+export function ChartView(props: ViewProps) {
+  const height = ((props.widget as { maxHeight?: number }).maxHeight ?? 300) + 16; // + container padding
+  return (
+    <Suspense fallback={<div className="pu-chart" style={{ height }} />}>
+      <Impl {...props} />
+    </Suspense>
+  );
+}

package/src/client/widgets/chat/chat.css

@@ -0,0 +1,97 @@
+@layer components {
+  .pu-chat {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .pu-msg {
+    margin: 0;
+    max-width: 85%;
+    padding: 8px 12px;
+    border-radius: 12px;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+  .pu-msg b {
+    display: none;
+  }
+  .pu-user {
+    align-self: flex-end;
+    background: var(--pu-accent, #2563eb);
+    color: #fff;
+    border-bottom-right-radius: 4px;
+  }
+  .pu-assistant {
+    align-self: flex-start;
+    background: #f1f3f5;
+    color: var(--pu-text, #1c1f23);
+    border-bottom-left-radius: 4px;
+  }
+  .pu-composer {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    margin-top: 4px;
+  }
+  .pu-composer .pu-input {
+    flex: 1;
+  }
+  .pu-mic {
+    flex: none;
+    width: 40px;
+    height: 40px;
+    border: none;
+    border-radius: 50%;
+    background: #f1f3f5;
+    cursor: pointer;
+    font-size: 16px;
+    line-height: 1;
+  }
+  .pu-mic.pu-rec {
+    background: #dc2626;
+    color: #fff;
+  }
+  .pu-msg-image {
+    display: block;
+    margin-top: 6px;
+    max-width: 160px;
+    max-height: 160px;
+    border-radius: 8px;
+  }
+  .pu-attachment {
+    position: relative;
+    align-self: flex-end;
+    width: 96px;
+  }
+  .pu-attachment img {
+    width: 96px;
+    height: 96px;
+    object-fit: cover;
+    border-radius: 8px;
+  }
+  .pu-attach-x {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    width: 20px;
+    height: 20px;
+    border: none;
+    border-radius: 50%;
+    background: #1c1f23;
+    color: #fff;
+    cursor: pointer;
+    font-size: 11px;
+    line-height: 1;
+  }
+  .pu-attach {
+    flex: none;
+    width: 40px;
+    height: 40px;
+    border: none;
+    border-radius: 50%;
+    background: #f1f3f5;
+    cursor: pointer;
+    font-size: 20px;
+    line-height: 1;
+  }
+}

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

@@ -0,0 +1,121 @@
+import "./chat.css";
+import { useRef, useState } from "react";
+import type { ViewProps } from "../../view.js";
+import type { ChatWidget, Message } from "../../../lib/widgets/chat.js";
+
+// shrink a picked image so attachments (and later history reads) stay small
+async function downscale(dataUrl: string, max = 768): Promise<string> {
+  const img = await new Promise<HTMLImageElement>((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 }: ViewProps<ChatWidget, { messages: Message[] }>) {
+  const streamRef = useRef<MediaStream | null>(null);
+  const recRef = useRef<MediaRecorder | null>(null);
+  const pressedRef = useRef(false);
+  const fileRef = useRef<HTMLInputElement>(null);
+  const [recording, setRecording] = useState(false);
+  const [pending, setPending] = useState<string | null>(null);
+
+  const send = (input: HTMLInputElement) => {
+    if (!input.value.trim() && !pending) return;
+    emit(widget.sent({ text: input.value, image: pending ?? undefined }));
+    input.value = "";
+    setPending(null);
+  };
+
+  const pick = (e: React.ChangeEvent<HTMLInputElement>) => {
+    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: Blob[] = [];
+    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 (
+    <div className="pu-chat">
+      {state.messages.map((m, i) => (
+        <p key={i} className={`pu-msg pu-${m.role}`}>
+          <b>{m.role}:</b> {m.content}
+          {m.image && <img className="pu-msg-image" src={m.image} alt="" />}
+        </p>
+      ))}
+      {pending && (
+        <div className="pu-attachment">
+          <img src={pending} alt="" />
+          <button className="pu-attach-x" onClick={() => setPending(null)} aria-label="Remove image">
+            ✕
+          </button>
+        </div>
+      )}
+      <div className="pu-composer">
+        {widget.images && (
+          <>
+            <input ref={fileRef} type="file" accept="image/*" hidden onChange={pick} />
+            <button className="pu-attach" onClick={() => fileRef.current?.click()} aria-label="Attach image">
+              +
+            </button>
+          </>
+        )}
+        <input
+          className="pu-input"
+          placeholder={widget.placeholder}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") send(e.currentTarget);
+          }}
+        />
+        {widget.voice && (
+          <button
+            className={`pu-mic${recording ? " pu-rec" : ""}`}
+            onPointerDown={start}
+            onPointerUp={stop}
+            onPointerLeave={() => pressedRef.current && stop()}
+            aria-label="Hold to talk"
+          >
+            {recording ? "●" : "🎤"}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/client/widgets/checkbox/checkbox.css

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

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

@@ -0,0 +1,15 @@
+import "./checkbox.css";
+import type { ViewProps } from "../../view.js";
+import type { ValueWidget } from "../../../lib/widgets/value.js";
+
+export function CheckboxView({ widget, state, emit, set }: ViewProps<ValueWidget<boolean>, { value: boolean }>) {
+  const update = (v: boolean) => {
+    set(["value"], v);
+    emit(widget.changed(v));
+  };
+  return (
+    <label className="pu-check">
+      <input type="checkbox" checked={state.value} onChange={(e) => update(e.currentTarget.checked)} /> {widget.label as string}
+    </label>
+  );
+}

package/src/client/widgets/checkbox-group/checkbox-group.css

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

package/src/client/widgets/checkbox-group/index.tsx

@@ -0,0 +1,22 @@
+import "./checkbox-group.css";
+import type { ViewProps } from "../../view.js";
+import type { ValueWidget } from "../../../lib/widgets/value.js";
+
+export function CheckboxGroupView({ widget, state, emit, set }: ViewProps<ValueWidget<string[]>, { value: string[] }>) {
+  const choices = (widget.choices as string[]) ?? [];
+  const selected = state.value ?? [];
+  const toggle = (c: string) => {
+    const next = selected.includes(c) ? selected.filter((x) => x !== c) : [...selected, c];
+    set(["value"], next);
+    emit(widget.changed(next));
+  };
+  return (
+    <div className="pu-checkgroup">
+      {choices.map((c) => (
+        <label key={c} className="pu-checkgroup-opt">
+          <input type="checkbox" checked={selected.includes(c)} onChange={() => toggle(c)} /> {c}
+        </label>
+      ))}
+    </div>
+  );
+}

package/src/client/widgets/code/code.css

@@ -0,0 +1,31 @@
+@layer components {
+  .pu-code .cm-editor {
+    border: 1px solid var(--pu-border, #e3e6ea);
+    border-radius: 8px;
+    overflow: hidden;
+    background: #fff;
+  }
+  .pu-code .cm-editor.cm-focused {
+    border-color: var(--pu-accent, #2563eb);
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
+    outline: none;
+  }
+  .pu-code .cm-scroller {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+    font-size: 13px;
+    line-height: 1.55;
+    max-height: 420px;
+  }
+  .pu-code .cm-gutters {
+    background: var(--pu-bg, #f6f7f9);
+    border-right: 1px solid var(--pu-border, #e3e6ea);
+    color: var(--pu-muted, #6b7280);
+  }
+  /* a read-only viewer: dim the gutter, hide the caret, sit on the page background */
+  .pu-code-ro .cm-editor {
+    background: var(--pu-bg, #f6f7f9);
+  }
+  .pu-code-ro .cm-cursor {
+    display: none;
+  }
+}