claude-artifact-framework 0.4.0 → 0.5.0

package/README.md

@@ -12,7 +12,7 @@ mirrors npm packages automatically.
 ### As a global script (`<script>` tag)
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/claude-artifact-framework@0.4.0/dist/index.global.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/claude-artifact-framework@0.5.0/dist/index.global.js"></script>
 <script>
   const { storage, createStore, createPersistedStore, createSharedStore } = ArtifactKit;
 </script>
@@ -27,11 +27,11 @@ mirrors npm packages automatically.
     createStore,
     createPersistedStore,
     createSharedStore,
-  } from "https://cdn.jsdelivr.net/npm/claude-artifact-framework@0.4.0/dist/index.esm.js";
+  } from "https://cdn.jsdelivr.net/npm/claude-artifact-framework@0.5.0/dist/index.esm.js";
 </script>
 ```
 
-Pin a version (`@0.4.0`) for reproducible artifacts, or drop the version
+Pin a version (`@0.5.0`) for reproducible artifacts, or drop the version
 (`claude-artifact-framework/dist/...`) to always get the latest release.
 
 ### Inside a React artifact
@@ -175,6 +175,85 @@ blocks: [
 `text` blocks also accept a function of data — `{ text: (d) => "Hola " + d.nombre }` —
 with the same contract as `output`.
 
+### The `chat` layout — apps that talk to Claude
+
+Tutors, advisors, generators, roleplay. Every piece of the network contract is
+copied from code proven inside the real artifact runtime: the artifact fetches
+`https://api.anthropic.com/v1/messages` directly with **no API key** (the
+runtime proxies the call and injects auth), `stream: true` works, and tools
+are prompted (the proxy does not support native function calling).
+
+The author declares the system prompt and, optionally, tools that operate on
+the app's data — a chat that can drive the app. The framework owns message
+state, live streaming, the busy state, the tool loop, and errors as visible
+bubbles. The conversation persists and survives reload.
+
+```js
+ArtifactKit.createApp({
+  title: "Asistente de gastos",
+  theme: { seed: "#0f766e" },
+  layout: "chat",
+  chat: {
+    system: (d) => "Eres un asistente de gastos. Total actual: " + (d.total || 0),
+    greeting: "¡Hola! Contame tus gastos.",
+    tools: {
+      agregar_gasto: {
+        description: "Agrega un gasto",
+        input: { concepto: "string", monto: "number" },
+        run: (input, ctx) => {
+          ctx.update((d) => { d.total = (d.total || 0) + Number(input.monto); });
+          return { ok: true };
+        },
+      },
+    },
+  },
+});
+```
+
+`system` is a string or a function of data. Tool `run(input, ctx)` returns a
+JSON-serializable result that is fed back to the model; an unknown tool name
+is answered in-band so the model corrects itself. Optional: `greeting`,
+`placeholder`, `model` (default `claude-sonnet-4-6`, proven through the
+proxy), `maxTokens`.
+
+### Search, computed fields, and shared data
+
+Three record-app multipliers, all declarative:
+
+```js
+ArtifactKit.createApp({
+  title: "Inventario del club",
+  layout: "records",
+  shared: true,                 // one copy of the data for every viewer
+  records: {
+    search: true,               // search box over all field values
+    fields: [
+      { key: "nombre",   type: "text", required: true },
+      { key: "cantidad", type: "number", value: 1, min: 0 },
+      { key: "precio",   type: "money", value: 0, min: 0 },
+    ],
+    compute: {                  // derived per record, never stored
+      subtotal: { label: "Subtotal", format: "money", value: (r) => r.cantidad * r.precio },
+    },
+    summary: (all) => [
+      { label: "Valor total", value: all.reduce((s, r) => s + r.subtotal, 0), format: "money", big: true },
+    ],
+  },
+});
+```
+
+- `search: true` adds a filter box over every field's value; the count shows
+  "n of total" while filtering.
+- `compute` entries are functions of the record (or `{ label, format, value }`).
+  Computed values appear read-only in the detail screen and are available to
+  `title` / `subtitle` / `sort` / `summary` as if they were fields. A compute
+  key that collides with a field key throws.
+- `shared: true` (top level) stores the app's data in the shared scope: every
+  viewer of the published artifact converges on the same data via polling.
+  Conflict handling is last-write-wins; a poll never overwrites local edits
+  that haven't been persisted yet. View state (which screen is open) stays
+  personal per viewer.
+
 ## `storage`
 
 Thin wrapper over `window.storage`, the persistence API Claude injects into a

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();
   }
@@ -688,6 +712,21 @@ var BLOCKS = {
 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) {
@@ -727,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) => {
@@ -742,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",
@@ -787,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 }) {
@@ -801,7 +873,7 @@ 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 })
   );
 }
@@ -889,10 +961,217 @@ function StepsLayout({ spec, ctx }) {
   );
 }
 
+// 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", "steps"];
+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(
@@ -931,6 +1210,28 @@ function validate(spec) {
     });
     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) {
@@ -938,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`.");
@@ -945,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 || [];
@@ -977,6 +1297,9 @@ function defaultsFrom(spec) {
   if ((spec.layout || "panel") === "records" && !Array.isArray(data.records)) {
     data.records = [];
   }
+  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)) {
@@ -1030,10 +1353,10 @@ function Panel({ spec, ctx }) {
     )
   );
 }
-var LAYOUT_COMPONENTS = { panel: Panel, records: RecordsLayout, steps: StepsLayout };
+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()) {
@@ -1174,6 +1497,25 @@ var BASE_CSS = `
 .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); }