claude-artifact-framework 0.3.0 → 0.5.0

package/dist/index.esm.js

@@ -124,6 +124,7 @@ function required() {
 var createElement = (...args) => required().createElement(...args);
 var useState = (...args) => required().useState(...args);
 var useEffect = (...args) => required().useEffect(...args);
+var useRef = (...args) => required().useRef(...args);
 var Component = React && React.Component || class ReactMissing {
   render() {
     return required();
@@ -154,10 +155,13 @@ function debounce2(fn, ms) {
     timer = setTimeout(() => fn(...args), ms);
   };
 }
-function createAppState(defaults, { debounceMs = 400 } = {}) {
+function createAppState(defaults, { debounceMs = 400, shared = false, pollMs = 2500 } = {}) {
+  const dataStore = shared ? storage.shared : storage;
   let data = structuredCloneish(defaults);
   let view = { ...EMPTY_VIEW };
   let hydrated = false;
+  let writes = 0;
+  let persistedWrites = 0;
   const listeners = /* @__PURE__ */ new Set();
   let queued = false;
   function notify() {
@@ -168,11 +172,30 @@ function createAppState(defaults, { debounceMs = 400 } = {}) {
       for (const fn of listeners) fn();
     });
   }
-  const persistData = debounce2(() => storage.set(DATA_KEY, data), debounceMs);
+  const persistData = debounce2(() => {
+    const at = writes;
+    Promise.resolve(dataStore.set(DATA_KEY, data)).then(() => {
+      persistedWrites = Math.max(persistedWrites, at);
+    }).catch(() => {
+    });
+  }, debounceMs);
   const persistView = debounce2(() => storage.set(VIEW_KEY, view), debounceMs);
+  if (shared) {
+    setInterval(async () => {
+      if (!hydrated || writes > persistedWrites) return;
+      try {
+        const remote = await dataStore.get(DATA_KEY, void 0);
+        if (remote !== void 0 && JSON.stringify(remote) !== JSON.stringify(data)) {
+          data = mergeDefaults(defaults, remote);
+          notify();
+        }
+      } catch {
+      }
+    }, pollMs);
+  }
   const ready = (async () => {
     const [storedData, storedView] = await Promise.all([
-      storage.get(DATA_KEY, void 0),
+      dataStore.get(DATA_KEY, void 0),
       storage.get(VIEW_KEY, void 0)
     ]);
     if (storedData !== void 0) data = mergeDefaults(defaults, storedData);
@@ -184,6 +207,7 @@ function createAppState(defaults, { debounceMs = 400 } = {}) {
     const result = fn(data);
     if (result !== void 0) data = result;
     data = { ...data };
+    writes++;
     persistData();
     notify();
   }
@@ -342,6 +366,11 @@ function themeCss(seed) {
 :root[data-theme="light"] { ${vars(p.light)} }
 `;
 }
+function seriesColors(seed, n) {
+  const [h0, s0] = rgbToHsl(hexToRgb(seed || "#3b6ef6"));
+  const s = clamp(s0, 45, 70);
+  return Array.from({ length: n }, (_, i) => hsl((h0 + i * 137.5) % 360, s, 52));
+}
 
 // src/blocks.js
 function formatValue(value, format) {
@@ -476,8 +505,8 @@ function OutputBlock({ spec, ctx }) {
     )
   );
 }
-function TextBlock({ spec }) {
-  const body = typeof spec.text === "function" ? spec.text() : spec.text;
+function TextBlock({ spec, ctx }) {
+  const body = typeof spec.text === "function" ? spec.text(ctx.data) : spec.text;
   return createElement(
     "div",
     { className: "caf-block caf-text" },
@@ -509,6 +538,161 @@ function ListBlock({ spec, ctx }) {
     )
   );
 }
+var CHART_TYPES = ["bar", "line", "donut"];
+function ChartBlock({ spec, ctx }) {
+  const c = typeof spec.chart === "function" ? spec.chart(ctx.data) : spec.chart;
+  const items = c && c.items || [];
+  if (!items.length) {
+    return createElement("div", { className: "caf-block caf-empty" }, spec.empty || "No data to chart yet.");
+  }
+  const type = c.type || "bar";
+  if (!CHART_TYPES.includes(type)) {
+    throw new Error(`unknown chart type "${type}". Valid types: ${CHART_TYPES.join(", ")}.`);
+  }
+  const colors = ctx.colors(items.length);
+  const body = type === "bar" ? barChart(items, c, colors) : type === "line" ? lineChart(items, c) : donutChart(items, c, colors);
+  return createElement(
+    "div",
+    { className: "caf-block caf-chart" },
+    spec.title ? createElement("h2", { className: "caf-block-title" }, spec.title) : null,
+    body
+  );
+}
+function barChart(items, c, colors) {
+  const max = Math.max(...items.map((it) => Number(it.value) || 0), 0) || 1;
+  return createElement(
+    "div",
+    { className: "caf-bars" },
+    items.map(
+      (it, i) => createElement(
+        "div",
+        { key: it.label ?? i, className: "caf-bar-row" },
+        createElement("span", { className: "caf-bar-label" }, it.label),
+        createElement(
+          "div",
+          { className: "caf-bar-track" },
+          createElement("div", {
+            className: "caf-bar-fill",
+            style: { width: `${Math.max(2, (Number(it.value) || 0) / max * 100)}%`, background: colors[i] }
+          })
+        ),
+        createElement("span", { className: "caf-bar-value" }, formatValue(it.value, c.format))
+      )
+    )
+  );
+}
+function lineChart(items, c) {
+  const values = items.map((it) => Number(it.value) || 0);
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const span = max - min || 1;
+  const W = 100;
+  const H = 36;
+  const pts = values.map((v, i) => [
+    values.length === 1 ? W / 2 : i / (values.length - 1) * W,
+    H - 3 - (v - min) / span * (H - 6)
+  ]);
+  const last = pts[pts.length - 1];
+  return createElement(
+    "div",
+    { className: "caf-line" },
+    createElement(
+      "svg",
+      { viewBox: `0 0 ${W} ${H}`, className: "caf-line-svg", preserveAspectRatio: "none", "aria-hidden": "true" },
+      [0.25, 0.5, 0.75].map(
+        (f) => createElement("line", { key: f, x1: 0, x2: W, y1: H * f, y2: H * f, className: "caf-line-grid" })
+      ),
+      createElement("polyline", { points: pts.map((p) => p.join(",")).join(" "), className: "caf-line-path" }),
+      createElement("circle", { cx: last[0], cy: last[1], r: 1.6, className: "caf-line-dot" })
+    ),
+    createElement(
+      "div",
+      { className: "caf-line-meta" },
+      createElement("span", { className: "caf-hint" }, String(items[0].label ?? "")),
+      createElement("span", { className: "caf-line-last" }, formatValue(values[values.length - 1], c.format)),
+      createElement("span", { className: "caf-hint" }, String(items[items.length - 1].label ?? ""))
+    )
+  );
+}
+function donutChart(items, c, colors) {
+  const total = items.reduce((s, it) => s + (Number(it.value) || 0), 0) || 1;
+  const R = 15.9155;
+  let offset = 25;
+  const segments = items.map((it, i) => {
+    const pct = (Number(it.value) || 0) / total * 100;
+    const seg = createElement("circle", {
+      key: it.label ?? i,
+      cx: 21,
+      cy: 21,
+      r: R,
+      className: "caf-donut-seg",
+      stroke: colors[i],
+      strokeDasharray: `${pct} ${100 - pct}`,
+      strokeDashoffset: offset
+    });
+    offset -= pct;
+    return seg;
+  });
+  return createElement(
+    "div",
+    { className: "caf-donut" },
+    createElement("svg", { viewBox: "0 0 42 42", className: "caf-donut-svg", "aria-hidden": "true" }, segments),
+    createElement(
+      "div",
+      { className: "caf-donut-legend" },
+      items.map(
+        (it, i) => createElement(
+          "div",
+          { key: it.label ?? i, className: "caf-legend-row" },
+          createElement("span", { className: "caf-legend-swatch", style: { background: colors[i] } }),
+          createElement("span", { className: "caf-legend-label" }, it.label),
+          createElement("span", { className: "caf-legend-value" }, formatValue(it.value, c.format))
+        )
+      )
+    )
+  );
+}
+function TimerBlock({ spec, ctx }) {
+  const t = spec.timer || {};
+  const total = Math.max(1, Math.round((t.minutes || 0) * 60 + (t.seconds || 0)) || 300);
+  const [left, setLeft] = useState(total);
+  const [running, setRunning] = useState(false);
+  useEffect(() => {
+    if (!running) return;
+    const id = setInterval(() => setLeft((prev) => Math.max(0, prev - 1)), 1e3);
+    return () => clearInterval(id);
+  }, [running]);
+  useEffect(() => {
+    if (left === 0 && running) {
+      setRunning(false);
+      if (typeof t.onDone === "function") ctx.update((d) => t.onDone(d));
+    }
+  }, [left, running]);
+  const mm = String(Math.floor(left / 60)).padStart(2, "0");
+  const ss = String(left % 60).padStart(2, "0");
+  const done = left === 0;
+  return createElement(
+    "div",
+    { className: "caf-block caf-timer" },
+    spec.title ? createElement("h2", { className: "caf-block-title" }, spec.title) : null,
+    t.label ? createElement("span", { className: "caf-hint" }, t.label) : null,
+    createElement("div", { className: done ? "caf-timer-time caf-timer-done" : "caf-timer-time" }, done ? t.doneText || "Done!" : `${mm}:${ss}`),
+    createElement("div", { className: "caf-bar-track" }, createElement("div", { className: "caf-bar-fill caf-timer-fill", style: { width: `${left / total * 100}%` } })),
+    createElement(
+      "div",
+      { className: "caf-timer-controls" },
+      createElement(
+        "button",
+        { type: "button", className: "caf-btn caf-btn-primary", disabled: done, onClick: () => setRunning((r) => !r) },
+        running ? "Pause" : "Start"
+      ),
+      createElement("button", { type: "button", className: "caf-btn", onClick: () => {
+        setRunning(false);
+        setLeft(total);
+      } }, "Reset")
+    )
+  );
+}
 function CustomBlock({ spec, ctx }) {
   const rendered = spec.custom(ctx);
   if (typeof rendered === "string") {
@@ -521,11 +705,28 @@ var BLOCKS = {
   output: OutputBlock,
   text: TextBlock,
   list: ListBlock,
+  chart: ChartBlock,
+  timer: TimerBlock,
   custom: CustomBlock
 };
 var BLOCK_NAMES = Object.keys(BLOCKS);
 
 // src/records.js
+function computedEntries(spec) {
+  return Object.entries(spec.compute || {}).map(([k, v]) => [k, typeof v === "function" ? { value: v } : v]);
+}
+function withComputed(spec, rec) {
+  if (!spec.compute) return rec;
+  const out = { ...rec };
+  for (const [key, c] of computedEntries(spec)) {
+    try {
+      out[key] = c.value(rec);
+    } catch {
+      out[key] = void 0;
+    }
+  }
+  return out;
+}
 function recordDefaults(fields) {
   const rec = {};
   for (const f of fields) {
@@ -565,8 +766,16 @@ function Summary({ spec, records }) {
 }
 function ListScreen({ spec, ctx }) {
   const label = spec.label || "item";
-  let records = ctx.data.records;
+  const [query, setQuery] = useState("");
+  let records = ctx.data.records.map((r) => withComputed(spec, r));
   if (spec.sort) records = records.slice().sort(spec.sort);
+  const total = records.length;
+  const q = query.trim().toLowerCase();
+  if (spec.search && q) {
+    records = records.filter(
+      (r) => spec.fields.some((f) => String(r[f.key] ?? "").toLowerCase().includes(q))
+    );
+  }
   function add() {
     const rec = { id: makeId(), ...recordDefaults(spec.fields) };
     ctx.update((d) => {
@@ -580,9 +789,21 @@ function ListScreen({ spec, ctx }) {
     createElement(
       "div",
       { className: "caf-toolbar" },
-      createElement("span", { className: "caf-count" }, `${records.length} ${label}${records.length === 1 ? "" : "s"}`),
+      createElement(
+        "span",
+        { className: "caf-count" },
+        spec.search && q ? `${records.length} of ${total}` : `${total} ${label}${total === 1 ? "" : "s"}`
+      ),
       createElement("button", { type: "button", className: "caf-btn caf-btn-primary", onClick: add }, `Add ${label}`)
     ),
+    spec.search ? createElement("input", {
+      className: "caf-search",
+      value: query,
+      placeholder: `Search ${label}s\u2026`,
+      "aria-label": "Search",
+      onChange: (e) => setQuery(e.target.value)
+    }) : null,
+    spec.search && q && records.length === 0 && total > 0 ? createElement("div", { className: "caf-empty" }, `Nothing matches "${query}".`) : null,
     records.length === 0 ? createElement("div", { className: "caf-empty" }, spec.empty || `No ${label}s yet. Add the first one.`) : records.map(
       (rec) => createElement(
         "button",
@@ -625,7 +846,20 @@ function DetailScreen({ spec, ctx, record }) {
           if (rec) rec[field.key] = v;
         })
       })
-    )
+    ),
+    spec.compute ? createElement(
+      "div",
+      { className: "caf-output-grid caf-computed" },
+      computedEntries(spec).map(([key, c]) => {
+        const live = withComputed(spec, record);
+        return createElement(
+          "div",
+          { key, className: "caf-stat" },
+          createElement("span", { className: "caf-stat-label" }, c.label || key),
+          createElement("span", { className: "caf-stat-value" }, formatValue(live[key], c.format))
+        );
+      })
+    ) : null
   );
 }
 function RecordsLayout({ spec, ctx }) {
@@ -639,21 +873,365 @@ function RecordsLayout({ spec, ctx }) {
   return createElement(
     "div",
     { className: "caf-panel caf-panel-single" },
-    createElement(Summary, { spec: rspec, records: ctx.data.records }),
+    createElement(Summary, { spec: rspec, records: ctx.data.records.map((r) => withComputed(rspec, r)) }),
     createElement(ListScreen, { spec: rspec, ctx })
   );
 }
 
+// src/steps.js
+function stepErrors(step, data) {
+  return (step.fields || []).some((f) => validateField(f, data[f.key]) !== null);
+}
+function ResultScreen({ step, ctx }) {
+  const items = step.result(ctx.data) || [];
+  return createElement(
+    "div",
+    { className: "caf-block caf-output" },
+    step.title ? createElement("h2", { className: "caf-block-title" }, step.title) : null,
+    createElement(
+      "div",
+      { className: "caf-output-grid" },
+      items.map(
+        (item, i) => createElement(
+          "div",
+          { key: item.label ?? i, className: item.big ? "caf-stat caf-stat-big" : "caf-stat" },
+          createElement("span", { className: "caf-stat-label" }, item.label),
+          createElement("span", { className: "caf-stat-value" }, formatValue(item.value, item.format)),
+          item.hint ? createElement("small", { className: "caf-hint" }, item.hint) : null
+        )
+      )
+    ),
+    createElement(
+      "div",
+      { className: "caf-step-nav" },
+      createElement("button", { type: "button", className: "caf-btn", onClick: () => ctx.setStep(0) }, "Start over")
+    )
+  );
+}
+function StepsLayout({ spec, ctx }) {
+  const steps = spec.steps;
+  const i = Math.min(Math.max(ctx.view.step || 0, 0), steps.length - 1);
+  const step = steps[i];
+  const isResult = typeof step.result === "function";
+  const isLast = i === steps.length - 1;
+  return createElement(
+    "div",
+    { className: "caf-panel caf-panel-single" },
+    createElement(
+      "div",
+      { className: "caf-steps-progress" },
+      createElement("span", { className: "caf-hint" }, isResult ? "Result" : `Step ${i + 1} of ${steps.length}`),
+      createElement(
+        "div",
+        { className: "caf-bar-track" },
+        createElement("div", { className: "caf-bar-fill caf-steps-fill", style: { width: `${(i + 1) / steps.length * 100}%` } })
+      )
+    ),
+    isResult ? createElement(ResultScreen, { step, ctx }) : createElement(
+      "div",
+      { className: "caf-block caf-fields" },
+      step.title ? createElement("h2", { className: "caf-block-title" }, step.title) : null,
+      step.text ? createElement("p", { className: "caf-step-text" }, typeof step.text === "function" ? step.text(ctx.data) : step.text) : null,
+      (step.fields || []).map(
+        (field) => createElement(Field, {
+          key: field.key,
+          field,
+          value: ctx.data[field.key],
+          onChange: (v) => ctx.update((d) => {
+            d[field.key] = v;
+          })
+        })
+      ),
+      createElement(
+        "div",
+        { className: "caf-step-nav" },
+        i > 0 ? createElement("button", { type: "button", className: "caf-btn", onClick: () => ctx.setStep(i - 1) }, "\u2039 Back") : createElement("span"),
+        !isLast ? createElement(
+          "button",
+          {
+            type: "button",
+            className: "caf-btn caf-btn-primary",
+            disabled: stepErrors(step, ctx.data),
+            onClick: () => ctx.setStep(i + 1)
+          },
+          "Next \u203A"
+        ) : null
+      )
+    )
+  );
+}
+
+// src/chat.js
+var CHAT_KEYS = ["system", "greeting", "placeholder", "tools", "model", "maxTokens"];
+var DEFAULT_MODEL = "claude-sonnet-4-6";
+var MAX_ROUNDS = 8;
+async function streamCall({ model, maxTokens, system, messages, onText }) {
+  const res = await fetch("https://api.anthropic.com/v1/messages", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ model, max_tokens: maxTokens, system, messages, stream: true })
+  });
+  if (!res.ok || !res.body) {
+    let detail = "";
+    try {
+      const b = await res.json();
+      detail = b && b.error && b.error.message || JSON.stringify(b);
+    } catch {
+      detail = await res.text().catch(() => "");
+    }
+    throw new Error(`HTTP ${res.status}${detail ? ": " + detail : ""}`);
+  }
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder();
+  let full = "";
+  let buf = "";
+  for (; ; ) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    buf += decoder.decode(value, { stream: true });
+    const lines = buf.split("\n");
+    buf = lines.pop();
+    for (const line of lines) {
+      if (!line.startsWith("data: ")) continue;
+      try {
+        const j = JSON.parse(line.slice(6));
+        if (j.type === "content_block_delta" && j.delta && j.delta.text) {
+          full += j.delta.text;
+          if (onText) onText(full);
+        }
+      } catch {
+      }
+    }
+  }
+  return full;
+}
+function parseToolCalls(text) {
+  const match = text.match(/```tool_call\s*\n?([\s\S]*?)```/);
+  if (!match) return null;
+  try {
+    const calls = JSON.parse(match[1]);
+    return Array.isArray(calls) && calls.length ? calls : null;
+  } catch {
+    return null;
+  }
+}
+function stripToolCallBlock(text) {
+  return text.replace(/```tool_call\s*\n?[\s\S]*?```/, "").trim();
+}
+function toolProtocol(tools) {
+  const list = Object.entries(tools).map(([name, t]) => `- ${name}: ${t.description}
+  Input: ${JSON.stringify(t.input || {})}`).join("\n");
+  return `
+
+You have tools available:
+${list}
+
+This environment does not support native function calling. To use a tool, reply ONLY with a \`\`\`tool_call code block containing a JSON array, with no other text in that turn. Example:
+
+\`\`\`tool_call
+[{ "name": "tool_name", "input": { "param": "value" } }]
+\`\`\`
+
+You may include several calls in one array. NEVER invent a tool's result \u2014 emit the pure tool_call block and wait for the real result, which arrives in the next message tagged [TOOL_RESULT]. When you have everything you need, answer in natural language with no tool_call block.`;
+}
+function runTools(calls, tools, ctx) {
+  return calls.map((call) => {
+    const tool = tools[call.name];
+    if (!tool) {
+      return { name: call.name, error: `unknown tool "${call.name}". Valid tools: ${Object.keys(tools).join(", ")}` };
+    }
+    try {
+      const result = tool.run(call.input || {}, ctx);
+      return { name: call.name, result: result === void 0 ? { ok: true } : result };
+    } catch (e) {
+      return { name: call.name, error: String(e && e.message || e) };
+    }
+  });
+}
+function Bubble({ m }) {
+  if (m.role === "tools") {
+    return createElement("div", { className: "caf-msg-tools" }, `used: ${m.tools.join(", ")}`);
+  }
+  if (m.role === "error") {
+    return createElement(
+      "div",
+      { className: "caf-msg caf-msg-error" },
+      createElement("strong", null, "The call failed"),
+      createElement("span", null, m.content),
+      createElement("span", { className: "caf-hint" }, "Your message is kept \u2014 send again to retry.")
+    );
+  }
+  return createElement("div", { className: m.role === "user" ? "caf-msg caf-msg-user" : "caf-msg caf-msg-assistant" }, m.content);
+}
+function ChatLayout({ spec, ctx }) {
+  const c = spec.chat;
+  const [draft, setDraft] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [live, setLive] = useState(null);
+  const endRef = useRef(null);
+  const chat = ctx.data.chat || { api: [], log: [] };
+  const log = chat.log || [];
+  useEffect(() => {
+    if (endRef.current) endRef.current.scrollIntoView({ block: "end" });
+  }, [log.length, live]);
+  async function send() {
+    const text = draft.trim();
+    if (!text || busy) return;
+    setDraft("");
+    setBusy(true);
+    let api = [...chat.api || [], { role: "user", content: text }];
+    let logNow = [...log, { role: "user", content: text }];
+    const commit = () => ctx.update((d) => {
+      d.chat = { api, log: logNow };
+    });
+    commit();
+    try {
+      const system = (typeof c.system === "function" ? c.system(ctx.data) : c.system || "") + (c.tools ? toolProtocol(c.tools) : "");
+      for (let round = 0; round < MAX_ROUNDS; round++) {
+        const raw = await streamCall({
+          model: c.model || DEFAULT_MODEL,
+          maxTokens: c.maxTokens || 2e3,
+          system,
+          messages: api,
+          onText: (t) => setLive(stripToolCallBlock(t))
+        });
+        api = [...api, { role: "assistant", content: raw }];
+        const shown = stripToolCallBlock(raw);
+        const calls = c.tools ? parseToolCalls(raw) : null;
+        if (!calls) {
+          logNow = [...logNow, { role: "assistant", content: shown || raw }];
+          commit();
+          break;
+        }
+        const results = runTools(calls, c.tools, ctx);
+        if (shown) logNow = [...logNow, { role: "assistant", content: shown }];
+        logNow = [...logNow, { role: "tools", tools: calls.map((x) => x.name) }];
+        api = [
+          ...api,
+          {
+            role: "user",
+            content: `[TOOL_RESULT]
+${JSON.stringify(results)}
+[/TOOL_RESULT]
+
+Continue with this information. If you have everything you need, answer in natural language without further tool_call.`
+          }
+        ];
+        commit();
+        setLive(null);
+      }
+    } catch (e) {
+      logNow = [...logNow, { role: "error", content: String(e && e.message || e) }];
+      commit();
+    } finally {
+      setLive(null);
+      setBusy(false);
+    }
+  }
+  return createElement(
+    "div",
+    { className: "caf-panel caf-panel-single" },
+    createElement(
+      "div",
+      { className: "caf-block caf-chat-log" },
+      c.greeting ? createElement("div", { className: "caf-msg caf-msg-assistant" }, c.greeting) : null,
+      log.map((m, i) => createElement(Bubble, { key: i, m })),
+      live !== null ? createElement("div", { className: "caf-msg caf-msg-assistant caf-msg-live" }, live || "\u2026") : null,
+      busy && live === null ? createElement("div", { className: "caf-msg-tools" }, "thinking\u2026") : null,
+      createElement("div", { ref: endRef })
+    ),
+    createElement(
+      "form",
+      {
+        className: "caf-chat-input",
+        onSubmit: (e) => {
+          e.preventDefault();
+          send();
+        }
+      },
+      createElement("input", {
+        value: draft,
+        placeholder: c.placeholder || "Message\u2026",
+        disabled: busy,
+        onChange: (e) => setDraft(e.target.value),
+        "aria-label": "Message"
+      }),
+      createElement("button", { type: "submit", className: "caf-btn caf-btn-primary", disabled: busy || !draft.trim() }, "Send")
+    )
+  );
+}
+
 // src/app.js
-var LAYOUTS = ["panel", "records"];
+var LAYOUTS = ["panel", "records", "steps", "chat"];
 var RESERVED = ["title", "empty", "wide", "onSelect", "subtitle"];
+var TOP_KEYS = ["title", "subtitle", "theme", "layout", "blocks", "records", "steps", "chat", "data", "shared"];
 function validate(spec) {
+  const unknownTop = Object.keys(spec).filter((k) => !TOP_KEYS.includes(k));
+  if (unknownTop.length) {
+    throw new Error(
+      `claude-artifact-framework: unknown top-level keys (${unknownTop.join(", ")}). Valid keys: ${TOP_KEYS.join(", ")}.`
+    );
+  }
   const layout = spec.layout || "panel";
   if (!LAYOUTS.includes(layout)) {
     throw new Error(
       `claude-artifact-framework: unknown layout "${layout}". Valid layouts: ${LAYOUTS.join(", ")}.`
     );
   }
+  if (layout === "steps") {
+    const steps = spec.steps;
+    if (!Array.isArray(steps) || steps.length === 0) {
+      throw new Error('claude-artifact-framework: layout "steps" needs `steps: [...]` with at least one step.');
+    }
+    const STEP_KEYS = ["title", "text", "fields", "result"];
+    const seen = /* @__PURE__ */ new Set();
+    steps.forEach((st, i) => {
+      if (!st || typeof st !== "object") {
+        throw new Error(`claude-artifact-framework: steps[${i}] must be an object.`);
+      }
+      const unknown = Object.keys(st).filter((k) => !STEP_KEYS.includes(k));
+      if (unknown.length) {
+        throw new Error(
+          `claude-artifact-framework: steps[${i}] has unknown keys (${unknown.join(", ")}). Valid keys: ${STEP_KEYS.join(", ")}.`
+        );
+      }
+      if (!st.fields && !st.text && !st.result) {
+        throw new Error(`claude-artifact-framework: steps[${i}] needs \`fields\`, \`text\`, or \`result\`.`);
+      }
+      for (const f of st.fields || []) {
+        if (!f || !f.key) throw new Error(`claude-artifact-framework: every field in steps[${i}] needs a \`key\`.`);
+        if (seen.has(f.key)) {
+          throw new Error(
+            `claude-artifact-framework: field key "${f.key}" appears in more than one step \u2014 keys share one data pool and must be unique.`
+          );
+        }
+        seen.add(f.key);
+      }
+    });
+    return layout;
+  }
+  if (layout === "chat") {
+    const c = spec.chat;
+    if (!c || typeof c.system !== "string" && typeof c.system !== "function") {
+      throw new Error(
+        'claude-artifact-framework: layout "chat" needs `chat: { system: "..." }` (a string or a function of data).'
+      );
+    }
+    const unknown = Object.keys(c).filter((k) => !CHAT_KEYS.includes(k));
+    if (unknown.length) {
+      throw new Error(
+        `claude-artifact-framework: chat has unknown keys (${unknown.join(", ")}). Valid keys: ${CHAT_KEYS.join(", ")}.`
+      );
+    }
+    for (const [name, tool] of Object.entries(c.tools || {})) {
+      if (!tool || typeof tool.description !== "string" || typeof tool.run !== "function") {
+        throw new Error(
+          `claude-artifact-framework: chat tool "${name}" needs a \`description\` string and a \`run(input, ctx)\` function.`
+        );
+      }
+    }
+    return layout;
+  }
   if (layout === "records") {
     const r = spec.records;
     if (!r || !Array.isArray(r.fields) || r.fields.length === 0) {
@@ -661,6 +1239,13 @@ function validate(spec) {
         'claude-artifact-framework: layout "records" needs `records: { fields: [...] }` \u2014 the same field declarations the fields block uses.'
       );
     }
+    const RECORDS_KEYS = ["label", "fields", "title", "subtitle", "sort", "summary", "empty", "search", "compute"];
+    const unknownR = Object.keys(r).filter((k) => !RECORDS_KEYS.includes(k));
+    if (unknownR.length) {
+      throw new Error(
+        `claude-artifact-framework: records has unknown keys (${unknownR.join(", ")}). Valid keys: ${RECORDS_KEYS.join(", ")}.`
+      );
+    }
     const seen = /* @__PURE__ */ new Set();
     for (const f of r.fields) {
       if (!f || !f.key) throw new Error("claude-artifact-framework: every records field needs a `key`.");
@@ -668,6 +1253,18 @@ function validate(spec) {
       if (seen.has(f.key)) throw new Error(`claude-artifact-framework: duplicate records field key "${f.key}".`);
       seen.add(f.key);
     }
+    for (const [key, c] of Object.entries(r.compute || {})) {
+      if (seen.has(key) || key === "id") {
+        throw new Error(
+          `claude-artifact-framework: compute key "${key}" collides with a field key \u2014 computed values are derived, never stored.`
+        );
+      }
+      if (typeof c !== "function" && typeof (c && c.value) !== "function") {
+        throw new Error(
+          `claude-artifact-framework: compute "${key}" must be a function of the record, or { label, format, value: (r) => ... }.`
+        );
+      }
+    }
     return layout;
   }
   const blocks = spec.blocks || [];
@@ -700,7 +1297,10 @@ function defaultsFrom(spec) {
   if ((spec.layout || "panel") === "records" && !Array.isArray(data.records)) {
     data.records = [];
   }
-  for (const block of spec.blocks || []) {
+  if ((spec.layout || "panel") === "chat" && !data.chat) {
+    data.chat = { api: [], log: [] };
+  }
+  for (const block of [...spec.blocks || [], ...spec.steps || []]) {
     for (const field of block.fields || []) {
       if (field && field.key !== void 0 && !(field.key in data)) {
         data[field.key] = field.value !== void 0 ? field.value : field.type === "check" ? false : "";
@@ -753,10 +1353,10 @@ function Panel({ spec, ctx }) {
     )
   );
 }
-var LAYOUT_COMPONENTS = { panel: Panel, records: RecordsLayout };
+var LAYOUT_COMPONENTS = { panel: Panel, records: RecordsLayout, steps: StepsLayout, chat: ChatLayout };
 function createApp(spec = {}) {
   const layout = validate(spec);
-  const state = createAppState(defaultsFrom(spec));
+  const state = createAppState(defaultsFrom(spec), { shared: Boolean(spec.shared) });
   const css = themeCss(spec.theme && spec.theme.seed) + BASE_CSS;
   return function App() {
     if (!hasReact()) {
@@ -776,7 +1376,9 @@ function createApp(spec = {}) {
       view: state.getView(),
       update: state.update,
       go: state.go,
-      back: state.back
+      back: state.back,
+      setStep: (n) => state.setView({ step: n }),
+      colors: (n) => seriesColors(spec.theme && spec.theme.seed, n)
     };
     const Layout = LAYOUT_COMPONENTS[layout];
     return createElement(
@@ -864,6 +1466,56 @@ var BASE_CSS = `
 .caf-btn:focus-visible { outline: 2px solid var(--caf-accent); outline-offset: 1px; }
 .caf-btn-primary { background: var(--caf-accent); border-color: var(--caf-accent); color: var(--caf-accentText); }
 .caf-btn-danger { background: transparent; border-color: var(--caf-danger); color: var(--caf-danger); }
+.caf-bars { display: flex; flex-direction: column; gap: 0.55rem; }
+.caf-bar-row { display: grid; grid-template-columns: minmax(60px, 30%) 1fr auto; align-items: center; gap: 0.6rem; }
+.caf-bar-label { font-size: 0.82rem; color: var(--caf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.caf-bar-track { height: 8px; border-radius: 4px; background: var(--caf-sunken); overflow: hidden; }
+.caf-bar-fill { height: 100%; border-radius: 4px; background: var(--caf-accent); }
+.caf-bar-value { font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
+.caf-line-svg { width: 100%; height: 110px; display: block; }
+.caf-line-grid { stroke: var(--caf-border); stroke-width: 0.3; }
+.caf-line-path { fill: none; stroke: var(--caf-accent); stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; }
+.caf-line-dot { fill: var(--caf-accent); }
+.caf-line-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
+.caf-line-last { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--caf-accent); }
+.caf-donut { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
+.caf-donut-svg { width: 110px; height: 110px; flex: none; transform: rotate(0.001deg); }
+.caf-donut-seg { fill: none; stroke-width: 6; }
+.caf-donut-legend { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; flex: 1; }
+.caf-legend-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.84rem; }
+.caf-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
+.caf-legend-label { color: var(--caf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.caf-legend-value { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
+.caf-timer { align-items: center; text-align: center; }
+.caf-timer .caf-bar-track { width: 100%; }
+.caf-timer-time { font-size: 2.6rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
+.caf-timer-done { color: var(--caf-accent); }
+.caf-timer-fill { transition: width 0.9s linear; }
+.caf-timer-controls { display: flex; gap: 0.6rem; }
+.caf-btn:disabled { opacity: 0.45; cursor: not-allowed; }
+.caf-steps-progress { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.2rem; }
+.caf-steps-fill { transition: width 0.25s ease; }
+.caf-step-text { margin: 0; color: var(--caf-muted); font-size: 0.92rem; line-height: 1.55; }
+.caf-step-nav { display: flex; justify-content: space-between; gap: 0.6rem; margin-top: 0.4rem; }
+.caf-chat-log { min-height: 320px; max-height: 62vh; overflow-y: auto; gap: 0.55rem; }
+.caf-msg { max-width: 85%; padding: 0.55rem 0.75rem; border-radius: 12px; font-size: 0.92rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
+.caf-msg-user { align-self: flex-end; background: var(--caf-accent); color: var(--caf-accentText); border-bottom-right-radius: 4px; }
+.caf-msg-assistant { align-self: flex-start; background: var(--caf-sunken); border-bottom-left-radius: 4px; }
+.caf-msg-live::after { content: "\u258D"; opacity: 0.6; }
+.caf-msg-tools { align-self: flex-start; font-size: 0.74rem; color: var(--caf-muted); padding: 0.15rem 0.55rem; border: 1px solid var(--caf-border); border-radius: 999px; }
+.caf-msg-error { align-self: stretch; max-width: none; display: flex; flex-direction: column; gap: 0.2rem; background: transparent; border: 1px solid var(--caf-danger); }
+.caf-msg-error strong { color: var(--caf-danger); font-size: 0.85rem; }
+.caf-chat-input { display: flex; gap: 0.6rem; margin-top: 0.8rem; }
+.caf-chat-input input { flex: 1; font: inherit; font-size: 0.95rem; padding: 0.55rem 0.7rem; border-radius: 8px; border: 1px solid var(--caf-border); background: var(--caf-surface); color: var(--caf-text); }
+.caf-chat-input input:focus-visible { outline: 2px solid var(--caf-accent); outline-offset: 1px; }
+.caf-search {
+  font: inherit; font-size: 0.9rem; width: 100%;
+  padding: 0.5rem 0.65rem; margin: 0 0 0.3rem;
+  border-radius: 7px; border: 1px solid var(--caf-border);
+  background: var(--caf-sunken); color: var(--caf-text);
+}
+.caf-search:focus-visible { outline: 2px solid var(--caf-accent); outline-offset: 1px; }
+.caf-computed { border-top: 1px solid var(--caf-border); padding-top: 0.7rem; }
 .caf-empty, .caf-loading { color: var(--caf-muted); font-size: 0.9rem; text-align: center; padding: 1.6rem 1rem; }
 .caf-block-error { border-color: var(--caf-danger); gap: 0.4rem; }
 .caf-block-error strong { font-size: 0.9rem; color: var(--caf-danger); }