knobkit 0.0.1

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

@@ -0,0 +1,108 @@
+// 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, type Extension } 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";
+import type { ViewProps } from "../../view.js";
+import type { ValueWidget } from "../../../lib/widgets/value.js";
+
+// 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: Record<string, () => Promise<Extension>> = {
+  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<boolean>();
+
+const langOf = (name: string): Promise<Extension> => LANGS[name]?.() ?? Promise.resolve([]);
+const editOf = (editable: boolean): Extension => [EditorView.editable.of(editable), EditorState.readOnly.of(!editable)];
+
+export function CodeView({ widget, state, emit, set }: ViewProps<ValueWidget<string>, { value: string }>) {
+  const host = useRef<HTMLDivElement>(null);
+  const view = useRef<EditorView | null>(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<(v: string) => void>(() => {});
+  onChange.current = (v: string) => {
+    set(["value"], v); // local, so reads and the controlled doc reflect typing with no round-trip
+    emit(widget.changed(v));
+  };
+
+  const language = (widget.language as string) ?? "";
+  const editable = (widget.editable as boolean) ?? 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 <div ref={host} className={`pu-code${editable ? "" : " pu-code-ro"}`} />;
+}

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

@@ -0,0 +1,16 @@
+import "./code.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";
+
+// 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 as unknown as ComponentType<ViewProps> }));
+
+export function CodeView(props: ViewProps) {
+  return (
+    <Suspense fallback={<div className="pu-code" />}>
+      <Impl {...props} />
+    </Suspense>
+  );
+}

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

@@ -0,0 +1,19 @@
+import type { ViewProps } from "../../view.js";
+import type { ValueWidget } from "../../../lib/widgets/value.js";
+
+export function DropdownView({ 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 (
+    <select className="pu-input" value={state.value} onChange={(e) => update(e.currentTarget.value)}>
+      {choices.map((c) => (
+        <option key={c} value={c}>
+          {c}
+        </option>
+      ))}
+    </select>
+  );
+}

package/src/client/widgets/file/file.css

@@ -0,0 +1,26 @@
+@layer components {
+  .pu-file {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 9px 14px;
+    border: 1px solid var(--pu-border, #e3e6ea);
+    border-radius: 8px;
+    background: #fafbfc;
+    color: var(--pu-text, #1c1f23);
+    text-decoration: none;
+    cursor: pointer;
+    transition: border-color 0.12s, background 0.12s, color 0.12s;
+  }
+  .pu-file:hover {
+    border-color: var(--pu-accent, #2563eb);
+    color: var(--pu-accent, #2563eb);
+    background: rgba(37, 99, 235, 0.04);
+  }
+  .pu-file-icon {
+    font-size: 16px;
+  }
+  .pu-file-name {
+    font-weight: 500;
+  }
+}

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

@@ -0,0 +1,12 @@
+import "./file.css";
+import type { ViewProps } from "../../view.js";
+
+export function FileView({ state }: ViewProps<any, { name: string; url: string }>) {
+  if (!state.url) return <div className="pu-output">—</div>;
+  return (
+    <a className="pu-file" href={state.url} download={state.name || true}>
+      <span className="pu-file-icon">⭳</span>
+      <span className="pu-file-name">{state.name || "Download"}</span>
+    </a>
+  );
+}

package/src/client/widgets/frame/frame.css

@@ -0,0 +1,17 @@
+@layer components {
+  .pu-frame {
+    width: 100%;
+    min-height: 360px;
+    height: 100%;
+    display: block;
+    border: 1px solid var(--pu-border);
+    border-radius: 8px;
+    background: var(--pu-panel);
+  }
+
+  .pu-frame-empty {
+    display: grid;
+    place-items: center;
+    color: var(--pu-muted);
+  }
+}

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

@@ -0,0 +1,15 @@
+import "./frame.css";
+import type { ViewProps } from "../../view.js";
+
+export function FrameView({ widget, state, emit }: ViewProps<any, { src: string; doc: string }>) {
+  const { src, doc } = state;
+  if (!src && !doc) return <div className="pu-frame pu-frame-empty">—</div>;
+  const onLoad = () => emit((widget.loaded as () => { type: string; payload: unknown })());
+  const sandbox = widget.sandbox as string | undefined;
+  const title = widget.title as string;
+  return doc ? (
+    <iframe className="pu-frame" title={title} sandbox={sandbox} srcDoc={doc} onLoad={onLoad} />
+  ) : (
+    <iframe className="pu-frame" title={title} sandbox={sandbox} src={src} onLoad={onLoad} />
+  );
+}

package/src/client/widgets/gallery/gallery.css

@@ -0,0 +1,26 @@
+@layer components {
+  .pu-gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 10px;
+  }
+  .pu-gallery-cell {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  .pu-gallery-cell img {
+    width: 100%;
+    aspect-ratio: 1;
+    object-fit: cover;
+    border: 1px solid var(--pu-border, #e3e6ea);
+    border-radius: 8px;
+    display: block;
+  }
+  .pu-gallery-cell figcaption {
+    font-size: 12px;
+    color: var(--pu-muted, #6b7280);
+    text-align: center;
+  }
+}

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

@@ -0,0 +1,18 @@
+import "./gallery.css";
+import type { ViewProps } from "../../view.js";
+import type { GalleryItem } from "../../../lib/widgets/gallery.js";
+
+export function GalleryView({ state }: ViewProps<any, { items: GalleryItem[] }>) {
+  const items = state.items ?? [];
+  if (items.length === 0) return <div className="pu-output">—</div>;
+  return (
+    <div className="pu-gallery">
+      {items.map((it, i) => (
+        <figure key={i} className="pu-gallery-cell">
+          <img src={it.src} alt={it.caption ?? ""} />
+          {it.caption && <figcaption>{it.caption}</figcaption>}
+        </figure>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,21 @@
+@layer components {
+  .pu-hltext {
+    line-height: 2;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+  .pu-hltext-span {
+    border: 1px solid;
+    border-radius: 6px;
+    padding: 1px 4px;
+    margin: 0 1px;
+  }
+  .pu-hltext-label {
+    font-size: 11px;
+    font-weight: 650;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+    margin-left: 4px;
+    vertical-align: 1px;
+  }
+}

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

@@ -0,0 +1,42 @@
+import "./highlighted-text.css";
+import type { ViewProps } from "../../view.js";
+import type { HighlightSpan } from "../../../lib/widgets/highlighted-text.js";
+
+// 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: 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 HighlightedTextView({
+  state,
+}: ViewProps<any, { value: HighlightSpan[]; colorMap: Record<string, string> }>) {
+  const spans = state.value ?? [];
+  const colorMap = state.colorMap ?? {};
+  if (spans.length === 0) return <div className="pu-output">—</div>;
+  return (
+    <div className="pu-hltext">
+      {spans.map((s, i) =>
+        s.label ? (
+          <span
+            key={i}
+            className="pu-hltext-span"
+            style={{ background: `${colorFor(s.label, colorMap)}22`, borderColor: colorFor(s.label, colorMap) }}
+          >
+            {s.text}
+            <span className="pu-hltext-label" style={{ color: colorFor(s.label, colorMap) }}>
+              {s.label}
+            </span>
+          </span>
+        ) : (
+          <span key={i}>{s.text}</span>
+        ),
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,8 @@
+import type { ViewProps } from "../../view.js";
+
+// 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 }: ViewProps<any, { value: string }>) {
+  if (!state.value) return <div className="pu-output">—</div>;
+  return <div className="pu-html" dangerouslySetInnerHTML={{ __html: state.value }} />;
+}

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

@@ -0,0 +1,5 @@
+import type { ViewProps } from "../../view.js";
+
+export function ImageView({ state }: ViewProps<any, { src: string }>) {
+  return state.src ? <img className="pu-image" src={state.src} alt="" /> : <div className="pu-output">—</div>;
+}

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

@@ -0,0 +1,5 @@
+import type { ViewProps } from "../../view.js";
+
+export function JsonView({ state }: ViewProps<any, { value: unknown }>) {
+  return <pre className="pu-output">{JSON.stringify(state.value, null, 2)}</pre>;
+}

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

@@ -0,0 +1,20 @@
+import "./label.css";
+import type { ViewProps } from "../../view.js";
+import type { LabelClass } from "../../../lib/widgets/label.js";
+
+export function LabelView({ state }: ViewProps<any, { label: string; confidences: LabelClass[] }>) {
+  const confidences = [...(state.confidences ?? [])].sort((a, b) => b.score - a.score);
+  if (!state.label && confidences.length === 0) return <div className="pu-output">—</div>;
+  return (
+    <div className="pu-label">
+      {state.label && <div className="pu-label-top">{state.label}</div>}
+      {confidences.map((c) => (
+        <div key={c.label} className="pu-label-row">
+          <div className="pu-label-bar" style={{ width: `${Math.round(Math.max(0, Math.min(1, c.score)) * 100)}%` }} />
+          <span className="pu-label-name">{c.label}</span>
+          <span className="pu-label-score">{(c.score * 100).toFixed(1)}%</span>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/client/widgets/label/label.css

@@ -0,0 +1,39 @@
+@layer components {
+  .pu-label {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+  .pu-label-top {
+    font-size: 18px;
+    font-weight: 650;
+    letter-spacing: -0.01em;
+  }
+  .pu-label-row {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 10px;
+    border: 1px solid var(--pu-border, #e3e6ea);
+    border-radius: 8px;
+    overflow: hidden;
+  }
+  .pu-label-bar {
+    position: absolute;
+    inset: 0 auto 0 0;
+    background: rgba(37, 99, 235, 0.12);
+    z-index: 0;
+  }
+  .pu-label-name {
+    position: relative;
+    z-index: 1;
+    flex: 1;
+  }
+  .pu-label-score {
+    position: relative;
+    z-index: 1;
+    color: var(--pu-muted, #6b7280);
+    font-variant-numeric: tabular-nums;
+  }
+}

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

@@ -0,0 +1,14 @@
+import type { CSSProperties } from "react";
+import type { ViewProps } from "../../view.js";
+
+export function LayoutView({ widget, state, slot }: ViewProps<any, { items: string[] }>) {
+  const dir = (widget.type as string) ?? "col";
+  const items = state.items ?? [];
+  const style: CSSProperties | undefined =
+    dir === "grid" ? { gridTemplateColumns: `repeat(${(widget.cols as number) ?? 2}, minmax(0, 1fr))` } : undefined;
+  return (
+    <div className={`pu-layout pu-layout-${dir}`} style={style}>
+      {items.map((key) => slot(key))}
+    </div>
+  );
+}

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

@@ -0,0 +1,5 @@
+import type { ViewProps } from "../../view.js";
+
+export function LogView({ state }: ViewProps<any, { lines: string[] }>) {
+  return <pre className="pu-output">{state.lines.join("\n")}</pre>;
+}

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

@@ -0,0 +1,85 @@
+import "./mic.css";
+import { useEffect, useRef } from "react";
+import type { ViewProps } from "../../view.js";
+import type { MicWidget } from "../../../lib/widgets/mic.js";
+
+export function MicView({ widget, state, enabled, emit, set }: ViewProps<MicWidget, { live: boolean }>) {
+  const streamRef = useRef<MediaStream | null>(null);
+  const recRef = useRef<MediaRecorder | 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({ audio: true });
+          if (cancelled) return stream.getTracks().forEach((t) => t.stop());
+          streamRef.current = stream;
+          const ac = new AudioContext({ sampleRate: 16000 });
+          const record = (): void => {
+            if (streamRef.current !== stream) return;
+            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.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 (
+      <button
+        className={cls}
+        disabled={!enabled}
+        onPointerDown={() => toggle(true)}
+        onPointerUp={() => toggle(false)}
+        onPointerLeave={() => state.live && toggle(false)}
+      >
+        {state.live ? "● Recording…" : "Hold to talk"}
+      </button>
+    );
+  }
+
+  return (
+    <button className={cls} disabled={!enabled} onClick={() => toggle(!state.live)}>
+      {state.live ? (streaming ? "● Live" : "● Recording…") : streaming ? "Go live" : "Record"}
+    </button>
+  );
+}

package/src/client/widgets/mic/mic.css

@@ -0,0 +1,8 @@
+@layer components {
+  .pu-submit.pu-rec {
+    background: #dc2626;
+  }
+  .pu-submit.pu-rec:hover {
+    background: #b91c1c;
+  }
+}

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

@@ -0,0 +1,10 @@
+import type { ViewProps } from "../../view.js";
+import type { ValueWidget } from "../../../lib/widgets/value.js";
+
+export function NumberView({ widget, state, emit, set }: ViewProps<ValueWidget<number>, { value: number }>) {
+  const update = (v: number) => {
+    set(["value"], v);
+    emit(widget.changed(v));
+  };
+  return <input className="pu-input" type="number" min={widget.min as number} max={widget.max as number} value={state.value} onChange={(e) => update(e.currentTarget.valueAsNumber)} />;
+}

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

@@ -0,0 +1,19 @@
+import "./output.css";
+import { lazy, Suspense } from "react";
+import type { ViewProps } from "../../view.js";
+import type { OutputWidget } from "../../../lib/widgets/output.js";
+
+// 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 }: ViewProps<OutputWidget, { value: string }>) {
+  const format = (widget.format as string) ?? "text";
+  const plain = <div className="pu-output">{state.value || "—"}</div>;
+  if (format !== "markdown") return plain;
+  return (
+    <Suspense fallback={plain}>
+      <Markdown value={state.value} />
+    </Suspense>
+  );
+}

package/src/client/widgets/output/markdown.tsx

@@ -0,0 +1,12 @@
+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 }: { value: string }) {
+  return (
+    <div className="pu-md">
+      <ReactMarkdown remarkPlugins={[remarkGfm]}>{value}</ReactMarkdown>
+    </div>
+  );
+}

package/src/client/widgets/output/output.css

@@ -0,0 +1,75 @@
+@layer components {
+  .pu-output {
+    min-height: 42px;
+    margin: 0;
+    padding: 10px 12px;
+    border: 1px solid var(--pu-border, #e3e6ea);
+    border-radius: 8px;
+    background: #fafbfc;
+    color: var(--pu-text, #1c1f23);
+    white-space: pre-wrap;
+    word-break: break-word;
+    font: inherit;
+  }
+  pre.pu-output {
+    overflow-x: auto;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 13px;
+    line-height: 1.5;
+  }
+
+  /* rendered markdown (output format="markdown") — same box chrome as .pu-output, prose inside */
+  .pu-md {
+    min-height: 42px;
+    padding: 2px 12px;
+    border: 1px solid var(--pu-border, #e3e6ea);
+    border-radius: 8px;
+    background: #fafbfc;
+    color: var(--pu-text, #1c1f23);
+  }
+  .pu-md > :first-child {
+    margin-top: 0;
+  }
+  .pu-md > :last-child {
+    margin-bottom: 0;
+  }
+  .pu-md h1,
+  .pu-md h2,
+  .pu-md h3 {
+    line-height: 1.25;
+    margin: 1em 0 0.4em;
+  }
+  .pu-md p,
+  .pu-md ul,
+  .pu-md ol,
+  .pu-md blockquote,
+  .pu-md pre,
+  .pu-md table {
+    margin: 0.6em 0;
+  }
+  .pu-md code {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 0.9em;
+    background: rgba(0, 0, 0, 0.05);
+    padding: 0.1em 0.35em;
+    border-radius: 4px;
+  }
+  .pu-md pre {
+    background: rgba(0, 0, 0, 0.05);
+    padding: 10px 12px;
+    border-radius: 8px;
+    overflow-x: auto;
+  }
+  .pu-md pre code {
+    background: none;
+    padding: 0;
+  }
+  .pu-md a {
+    color: var(--pu-accent, #2563eb);
+  }
+  .pu-md th,
+  .pu-md td {
+    border: 1px solid var(--pu-border, #e3e6ea);
+    padding: 4px 8px;
+  }
+}