claude-artifact-framework 0.11.0 → 0.13.0

package/README.md

@@ -394,6 +394,47 @@ The active tab and each accordion's open/closed state are framework-owned
 view state — they survive reload, per viewer. Tabs cannot nest inside tabs;
 `when` must be a function; both throw otherwise.
 
+### `records` as a block — a CRUD collection inside any screen
+
+The full records machinery (list, add-then-edit, detail, search, summary,
+compute, items, row actions) is also a **block**, embeddable wherever panel
+blocks go — a workspace pane, a document, a tab. Declare it with the same
+`records: {...}` spec plus one extra key: **`key`**, naming where the
+collection lives in the enclosing data pool (default `"records"`; two
+records blocks need distinct keys).
+
+```js
+// A task list per project: records INSIDE documents — each document gets
+// its own independent collection automatically.
+ArtifactKit.createApp({
+  title: "Proyectos",
+  layout: "documents",
+  documents: {
+    label: "proyecto",
+    title: (d) => d.nombre || "Sin nombre",
+    blocks: [
+      { fields: [{ key: "nombre", label: "Proyecto", type: "text" }] },
+      { records: {
+          key: "tareas",
+          label: "tarea",
+          fields: [
+            { key: "titulo", label: "Título", type: "text", required: true },
+            { key: "hecha", label: "Hecha", type: "check" },
+          ],
+          summary: (all) => [{ label: "Pendientes", value: all.filter((t) => !t.hecha).length, big: true }],
+      }},
+    ],
+  },
+})
+```
+
+Inside a `documents` layout the collection is per document; in `panel` or
+`workspace` it lives in the flat pool under `key`, where `output`/`chart`
+blocks and chat tools can read and write it (`d.tareas`). Which record is
+open is framework-owned view state per collection — it survives reload,
+and a deleted open record falls back to the list. A records block below a
+records *layout* throws (the layout already owns the collection).
+
 ### The `documents` layout — parallel documents, one per top tab
 
 `tabs` are views over ONE shared data pool. When the ask is "several
@@ -427,7 +468,50 @@ close it (closing the open document falls back to a neighbour, never a
 blank pane), the per-document data pools (`d` inside any block, `output`,
 `custom`, or `when` is THAT document's data; `ctx.update` writes there),
 the empty state, and persistence — all documents and which one is open
-survive reload. Documents keys: `label`, `title`, `blocks`, `empty`.
+survive reload. Documents keys: `label`, `title`, `blocks`, `empty`,
+`types`.
+
+**Typed documents** — when tabs are not all the same kind of thing, declare
+`types` instead of `blocks` (one or the other, not both). Each type has its
+own `label`, optional `title` function, and its own `blocks`; the **+** tab
+asks which kind to create when there is more than one. Each document
+remembers its type forever; an untitled document shows its type label in
+the tab.
+
+```js
+ArtifactKit.createApp({
+  title: "Cuaderno",
+  layout: "documents",
+  documents: {
+    label: "página",
+    types: {
+      nota: {
+        label: "Nota",
+        title: (d) => d.titulo || "",
+        blocks: [{ fields: [
+          { key: "titulo", label: "Título", type: "text" },
+          { key: "texto", label: "Texto", type: "textarea", rows: 12 },
+        ]}],
+      },
+      compras: {
+        label: "Lista de compras",
+        blocks: [
+          { records: { key: "items", label: "producto", fields: [
+            { key: "producto", label: "Producto", type: "text", required: true },
+            { key: "comprado", label: "Comprado", type: "check" },
+          ]}},
+        ],
+      },
+    },
+  },
+})
+```
+
+When the variation is smaller than "a different kind of document" — the
+same document showing or hiding sections by its own state — prefer one
+`blocks` set with `when:` conditions (`when: (d) => d.modo === "avanzado"`)
+over `types`: one schema with conditional blocks keeps every document
+migratable and searchable as the same shape.
 
 Inside `documents`, blocks work as in `panel` — **including `chat` and
 `file`, which become per-document**:

package/dist/index.esm.js

@@ -1072,6 +1072,13 @@ function Summary({ spec, records }) {
 function ListScreen({ spec, ctx }) {
   const label = spec.label || "item";
   const [query, setQuery] = useState("");
+  useEffect(() => {
+    if ((ctx.data.records || []).some((r) => r && !r.id)) {
+      ctx.update((d) => {
+        for (const r of d.records || []) if (r && !r.id) r.id = makeId();
+      });
+    }
+  });
   let records = ctx.data.records.map((r) => withComputed(spec, r));
   if (spec.sort) records = records.slice().sort(spec.sort);
   const total = records.length;
@@ -1253,6 +1260,38 @@ function ItemsEditor({ spec, ctx, record }) {
     )
   );
 }
+function aliasRecords(d, key) {
+  if (key === "records") return d;
+  return new Proxy(d, {
+    get: (t, p, r) => p === "records" ? t[key] : Reflect.get(t, p, r),
+    set: (t, p, v) => Reflect.set(t, p === "records" ? key : p, v),
+    has: (t, p) => p === "records" ? key in t : p in t
+  });
+}
+function RecordsBlock({ spec, ctx }) {
+  const rspec = spec.records;
+  const key = rspec.key || "records";
+  const arr = Array.isArray(ctx.data[key]) ? ctx.data[key] : [];
+  const stateKey = "caf:rec:" + key;
+  const openId = ctx.view.tabs ? ctx.view.tabs[stateKey] : void 0;
+  const scoped = {
+    ...ctx,
+    data: { ...ctx.data, records: arr },
+    update: (fn) => ctx.update((d) => fn(aliasRecords(d, key))),
+    go: (_screen, id) => ctx.setTab(stateKey, id),
+    back: () => ctx.setTab(stateKey, void 0)
+  };
+  const record = openId ? arr.find((r) => r.id === openId) : null;
+  return createElement(
+    "div",
+    { className: "caf-records-block" },
+    spec.title ? createElement("h2", { className: "caf-block-title" }, spec.title) : null,
+    record ? createElement(DetailScreen, { key: "d", spec: rspec, ctx: scoped, record }) : [
+      createElement(Summary, { key: "s", spec: rspec, records: arr.map((r) => withComputed(rspec, r)) }),
+      createElement(ListScreen, { key: "l", spec: rspec, ctx: scoped })
+    ]
+  );
+}
 function RecordsLayout({ spec, ctx }) {
   const rspec = spec.records;
   if (ctx.view.screen === "record") {
@@ -1357,7 +1396,9 @@ function StepsLayout({ spec, ctx }) {
 var LAYOUTS = ["panel", "records", "steps", "chat", "workspace", "documents"];
 var RESERVED = ["title", "empty", "wide", "onSelect", "subtitle", "when", "collapsible", "fill"];
 var TOP_KEYS = ["title", "subtitle", "theme", "layout", "blocks", "records", "steps", "chat", "data", "shared", "main", "sidebar", "libs", "documents"];
-var DOCUMENTS_KEYS = ["label", "title", "blocks", "empty"];
+var DOCUMENTS_KEYS = ["label", "title", "blocks", "empty", "types"];
+var RECORDS_KEYS = ["label", "fields", "title", "subtitle", "sort", "summary", "empty", "search", "compute", "items", "actions"];
+var ITEMS_KEYS = ["label", "fields", "empty"];
 function checkFields(fields, where) {
   for (const f of fields || []) {
     if (!f || !f.key) throw new Error(`claude-artifact-framework: every field in ${where} needs a \`key\`.`);
@@ -1419,10 +1460,10 @@ function checkBlocks(blocks) {
       throw new Error(`claude-artifact-framework: blocks[${i}] must be an object like { fields: [...] }.`);
     }
     const keys = Object.keys(block).filter((k) => !RESERVED.includes(k));
-    const known = keys.filter((k) => BLOCK_NAMES.includes(k) || k === "tabs");
+    const known = keys.filter((k) => BLOCK_NAMES.includes(k) || k === "tabs" || k === "records");
     if (known.length === 0) {
       throw new Error(
-        `claude-artifact-framework: blocks[${i}] has no recognised block type (found: ${keys.join(", ") || "nothing"}). Valid block types: ${BLOCK_NAMES.join(", ")}.`
+        `claude-artifact-framework: blocks[${i}] has no recognised block type (found: ${keys.join(", ") || "nothing"}). Valid block types: ${[...BLOCK_NAMES, "tabs", "records"].join(", ")}.`
       );
     }
     if (known.length > 1) {
@@ -1435,6 +1476,7 @@ function checkBlocks(blocks) {
     checkFields(block.fields, `blocks[${i}]`);
     if (known[0] === "actions") checkActions(block.actions, `blocks[${i}].actions`);
     if (known[0] === "chat") checkChatConfig(block.chat, `blocks[${i}].chat`);
+    if (known[0] === "records") checkRecordsSpec(block.records, `blocks[${i}].records`, true);
     if (known[0] === "tabs") {
       const tabs = block.tabs;
       if (!Array.isArray(tabs) || tabs.length === 0) {
@@ -1525,19 +1567,26 @@ function validate(spec) {
       }
       checkBlocks(spec.sidebar);
     }
-    const chats = flattenBlocks([...spec.main, ...spec.sidebar || []]).filter((b) => b && b.chat);
+    const wsFlat = flattenBlocks([...spec.main, ...spec.sidebar || []]);
+    const chats = wsFlat.filter((b) => b && b.chat);
     if (chats.length > 1) {
       throw new Error(
         "claude-artifact-framework: only one chat block per app \u2014 the conversation persists under data.chat and there is exactly one."
       );
     }
+    checkRecordsBlockKeys(wsFlat);
     return layout;
   }
   if (layout === "documents") {
     const d = spec.documents;
-    if (!d || !Array.isArray(d.blocks) || d.blocks.length === 0) {
+    if (!d || typeof d !== "object" || !d.blocks && !d.types) {
       throw new Error(
-        'claude-artifact-framework: layout "documents" needs `documents: { blocks: [...] }` \u2014 the blocks every document repeats, each with its own data.'
+        'claude-artifact-framework: layout "documents" needs `documents: { blocks: [...] }` (every document repeats the same blocks) or `documents: { types: {...} }` (each document is one of several kinds).'
+      );
+    }
+    if (d.blocks && d.types) {
+      throw new Error(
+        "claude-artifact-framework: documents takes `blocks` (uniform documents) OR `types` (typed documents) \u2014 not both."
       );
     }
     const unknownD = Object.keys(d).filter((k) => !DOCUMENTS_KEYS.includes(k));
@@ -1549,79 +1598,135 @@ function validate(spec) {
     if (d.title !== void 0 && typeof d.title !== "function") {
       throw new Error("claude-artifact-framework: documents.title must be a function of the document's data returning the tab label.");
     }
-    checkBlocks(d.blocks);
-    const chats = flattenBlocks(d.blocks).filter((b) => b && b.chat);
-    if (chats.length > 1) {
-      throw new Error(
-        "claude-artifact-framework: only one chat block per document \u2014 each document's conversation persists under its own data.chat and there is exactly one."
-      );
-    }
-    return layout;
-  }
-  if (layout === "records") {
-    const r = spec.records;
-    if (!r || !Array.isArray(r.fields) || r.fields.length === 0) {
-      throw new Error(
-        '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", "items", "actions"];
-    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(", ")}.`
-      );
-    }
-    checkFields(r.fields, "records");
-    if (r.fields.some((f) => f.type === "file") || r.items && r.items.fields.some((f) => f.type === "file")) {
-      throw new Error(
-        "claude-artifact-framework: `file` fields live in the flat data pool (panel blocks or steps) \u2014 they are not supported inside records or items."
-      );
-    }
-    const seen = /* @__PURE__ */ new Set();
-    for (const f of r.fields) {
-      if (f.key === "id") throw new Error('claude-artifact-framework: "id" is reserved on records \u2014 the framework assigns it.');
-      if (seen.has(f.key)) throw new Error(`claude-artifact-framework: duplicate records field key "${f.key}".`);
-      seen.add(f.key);
-    }
-    if (spec.blocks) checkBlocks(spec.blocks);
-    if (r.actions) checkActions(r.actions, "records.actions");
-    if (r.items) {
-      const ITEMS_KEYS = ["label", "fields", "empty"];
-      const unknownI = Object.keys(r.items).filter((k) => !ITEMS_KEYS.includes(k));
-      if (unknownI.length) {
+    const checkDocBlocks = (blocks, where) => {
+      checkBlocks(blocks);
+      const flat = flattenBlocks(blocks);
+      if (flat.filter((b) => b && b.chat).length > 1) {
         throw new Error(
-          `claude-artifact-framework: records.items has unknown keys (${unknownI.join(", ")}). Valid keys: ${ITEMS_KEYS.join(", ")}.`
+          `claude-artifact-framework: only one chat block per document (${where}) \u2014 each document's conversation persists under its own data.chat and there is exactly one.`
         );
       }
-      if (!Array.isArray(r.items.fields) || r.items.fields.length === 0) {
-        throw new Error("claude-artifact-framework: records.items needs `fields: [...]` \u2014 the same field declarations as everywhere else.");
+      checkRecordsBlockKeys(flat);
+    };
+    if (d.blocks) {
+      if (!Array.isArray(d.blocks) || d.blocks.length === 0) {
+        throw new Error("claude-artifact-framework: documents.blocks must be a non-empty array of blocks.");
       }
-      checkFields(r.items.fields, "records.items");
-      for (const f of r.items.fields) {
-        if (f.key === "id") throw new Error('claude-artifact-framework: "id" is reserved on items \u2014 the framework assigns it.');
+      checkDocBlocks(d.blocks, "documents.blocks");
+    } else {
+      const names = Object.keys(d.types || {});
+      if (!names.length) {
+        throw new Error("claude-artifact-framework: documents.types needs at least one type, e.g. `types: { nota: { blocks: [...] } }`.");
       }
-      if (seen.has("items") || r.fields.some((f) => f.key === "items")) {
-        throw new Error('claude-artifact-framework: a records field cannot be named "items" when `items` is declared \u2014 that key holds the child collection.');
+      for (const name of names) {
+        const t = d.types[name];
+        const TYPE_KEYS = ["label", "title", "blocks", "empty"];
+        const unknownT = Object.keys(t || {}).filter((k) => !TYPE_KEYS.includes(k));
+        if (unknownT.length) {
+          throw new Error(
+            `claude-artifact-framework: documents.types.${name} has unknown keys (${unknownT.join(", ")}). Valid keys: ${TYPE_KEYS.join(", ")}.`
+          );
+        }
+        if (!t || !Array.isArray(t.blocks) || t.blocks.length === 0) {
+          throw new Error(`claude-artifact-framework: documents.types.${name} needs a non-empty \`blocks\` array.`);
+        }
+        if (t.title !== void 0 && typeof t.title !== "function") {
+          throw new Error(`claude-artifact-framework: documents.types.${name}.title must be a function of the document's data.`);
+        }
+        checkDocBlocks(t.blocks, `documents.types.${name}`);
       }
     }
-    for (const [key, c] of Object.entries(r.compute || {})) {
-      if (seen.has(key) || key === "id" || r.items && key === "items") {
-        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") {
+    return layout;
+  }
+  if (layout === "records") {
+    checkRecordsSpec(spec.records, "records", false);
+    if (spec.blocks) {
+      checkBlocks(spec.blocks);
+      if (flattenBlocks(spec.blocks).some((b) => b && b.records)) {
         throw new Error(
-          `claude-artifact-framework: compute "${key}" must be a function of the record, or { label, format, value: (r) => ... }.`
+          "claude-artifact-framework: a records BLOCK below a records LAYOUT is ambiguous \u2014 the layout already owns the collection. Use panel/workspace/documents to embed records blocks."
         );
       }
     }
     return layout;
   }
   checkBlocks(spec.blocks || []);
+  checkRecordsBlockKeys(flattenBlocks(spec.blocks || []));
   return layout;
 }
+function checkRecordsSpec(r, where, allowKey) {
+  if (!r || !Array.isArray(r.fields) || r.fields.length === 0) {
+    throw new Error(
+      `claude-artifact-framework: ${where} needs \`records: { fields: [...] }\` \u2014 the same field declarations the fields block uses.`
+    );
+  }
+  const valid = allowKey ? [...RECORDS_KEYS, "key"] : RECORDS_KEYS;
+  const unknownR = Object.keys(r).filter((k) => !valid.includes(k));
+  if (unknownR.length) {
+    throw new Error(
+      `claude-artifact-framework: ${where} has unknown keys (${unknownR.join(", ")}). Valid keys: ${valid.join(", ")}.`
+    );
+  }
+  if (allowKey && r.key !== void 0 && (typeof r.key !== "string" || !r.key)) {
+    throw new Error(`claude-artifact-framework: ${where}.key must be a non-empty string naming the collection in data.`);
+  }
+  checkFields(r.fields, where);
+  if (r.fields.some((f) => f.type === "file") || r.items && r.items.fields.some((f) => f.type === "file")) {
+    throw new Error(
+      "claude-artifact-framework: `file` fields live in the flat data pool (panel blocks or steps) \u2014 they are not supported inside records or items."
+    );
+  }
+  const seen = /* @__PURE__ */ new Set();
+  for (const f of r.fields) {
+    if (f.key === "id") throw new Error('claude-artifact-framework: "id" is reserved on records \u2014 the framework assigns it.');
+    if (seen.has(f.key)) throw new Error(`claude-artifact-framework: duplicate ${where} field key "${f.key}".`);
+    seen.add(f.key);
+  }
+  if (r.actions) checkActions(r.actions, `${where}.actions`);
+  if (r.items) {
+    const unknownI = Object.keys(r.items).filter((k) => !ITEMS_KEYS.includes(k));
+    if (unknownI.length) {
+      throw new Error(
+        `claude-artifact-framework: ${where}.items has unknown keys (${unknownI.join(", ")}). Valid keys: ${ITEMS_KEYS.join(", ")}.`
+      );
+    }
+    if (!Array.isArray(r.items.fields) || r.items.fields.length === 0) {
+      throw new Error(`claude-artifact-framework: ${where}.items needs \`fields: [...]\` \u2014 the same field declarations as everywhere else.`);
+    }
+    checkFields(r.items.fields, `${where}.items`);
+    for (const f of r.items.fields) {
+      if (f.key === "id") throw new Error('claude-artifact-framework: "id" is reserved on items \u2014 the framework assigns it.');
+    }
+    if (seen.has("items") || r.fields.some((f) => f.key === "items")) {
+      throw new Error(`claude-artifact-framework: a ${where} field cannot be named "items" when \`items\` is declared \u2014 that key holds the child collection.`);
+    }
+  }
+  for (const [key, c] of Object.entries(r.compute || {})) {
+    if (seen.has(key) || key === "id" || r.items && key === "items") {
+      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) => ... }.`
+      );
+    }
+  }
+}
+function checkRecordsBlockKeys(flatBlocks) {
+  const seen = /* @__PURE__ */ new Set();
+  for (const b of flatBlocks) {
+    if (!b || !b.records) continue;
+    const k = b.records.key || "records";
+    if (seen.has(k)) {
+      throw new Error(
+        `claude-artifact-framework: two records blocks share the collection key "${k}" \u2014 give each a distinct \`key\`.`
+      );
+    }
+    seen.add(k);
+  }
+}
 function flattenBlocks(blocks) {
   const out = [];
   for (const b of blocks || []) {
@@ -1650,6 +1755,12 @@ function defaultsFrom(spec) {
       }
     }
   }
+  for (const b of allBlocks) {
+    if (b && b.records) {
+      const k = b.records.key || "records";
+      if (!Array.isArray(data[k])) data[k] = [];
+    }
+  }
   return data;
 }
 var BlockBoundary = null;
@@ -1711,8 +1822,8 @@ function TabsBlock({ spec, ctx }) {
     )
   );
 }
-var ALL_BLOCKS = { ...BLOCKS, tabs: TabsBlock };
-var ALL_NAMES = [...BLOCK_NAMES, "tabs"];
+var ALL_BLOCKS = { ...BLOCKS, tabs: TabsBlock, records: RecordsBlock };
+var ALL_NAMES = [...BLOCK_NAMES, "tabs", "records"];
 function Block({ block, ctx }) {
   if (typeof block.when === "function" && !block.when(ctx.data)) return null;
   const name = Object.keys(block).find((k) => ALL_NAMES.includes(k));
@@ -1795,6 +1906,10 @@ function docDefaults(dspec) {
         data[field.key] = field.value !== void 0 ? field.value : field.type === "check" ? false : "";
       }
     }
+    if (block.records) {
+      const k = block.records.key || "records";
+      if (!Array.isArray(data[k])) data[k] = [];
+    }
   }
   return data;
 }
@@ -1802,7 +1917,7 @@ function docId() {
   return "d" + Date.now().toString(36) + Math.random().toString(36).slice(2, 8);
 }
 var DOC_TAB_KEY = "caf:doc";
-function docTitle(dspec, data) {
+function docTitle(dspec, data, untitled) {
   if (dspec.title) {
     try {
       const t = dspec.title(data);
@@ -1815,25 +1930,36 @@ function docTitle(dspec, data) {
       if (!f.type || f.type === "text" || f.type === "textarea" || f.type === "select") {
         const v = data[f.key];
         if (v !== "" && v !== void 0 && v !== null) return String(v);
-        return "(untitled)";
+        return untitled || "(untitled)";
       }
     }
   }
-  return "(untitled)";
+  return untitled || "(untitled)";
 }
 function DocumentsLayout({ spec, ctx }) {
   const dspec = spec.documents;
   const label = dspec.label || "document";
   const docs = Array.isArray(ctx.data.docs) ? ctx.data.docs : [];
-  const defaults = docDefaults(dspec);
+  const types = dspec.types || null;
+  const typeNames = types ? Object.keys(types) : [];
+  const specFor = (doc) => types ? types[doc.type] : dspec;
+  const typeLabel = (name) => types[name] && types[name].label || name;
+  const [picking, setPicking] = useState(false);
   const storedId = ctx.view.tabs ? ctx.view.tabs[DOC_TAB_KEY] : void 0;
   const active = docs.find((doc) => doc.id === storedId) || docs[0];
-  function add() {
-    const doc = { id: docId(), data: docDefaults(dspec) };
+  function add(typeName) {
+    const tspec = types ? types[typeName] : dspec;
+    const doc = { id: docId(), ...types ? { type: typeName } : {}, data: docDefaults(tspec) };
     ctx.update((d) => {
       d.docs = [...d.docs || [], doc];
     });
     ctx.setTab(DOC_TAB_KEY, doc.id);
+    setPicking(false);
+  }
+  function onAdd() {
+    if (!types) return add();
+    if (typeNames.length === 1) return add(typeNames[0]);
+    setPicking((p) => !p);
   }
   function close(id) {
     const idx = docs.findIndex((doc) => doc.id === id);
@@ -1846,6 +1972,13 @@ function DocumentsLayout({ spec, ctx }) {
       if (next) ctx.setTab(DOC_TAB_KEY, next.id);
     }
   }
+  const typePicker = types && picking ? createElement(
+    "div",
+    { className: "caf-doc-typemenu" },
+    typeNames.map(
+      (name) => createElement("button", { key: name, type: "button", className: "caf-btn caf-btn-sm", onClick: () => add(name) }, typeLabel(name))
+    )
+  ) : null;
   if (!active) {
     return createElement(
       "div",
@@ -1854,10 +1987,32 @@ function DocumentsLayout({ spec, ctx }) {
         "div",
         { className: "caf-block caf-empty" },
         createElement("p", null, dspec.empty || `No ${label}s yet. Create the first one.`),
-        createElement("button", { type: "button", className: "caf-btn caf-btn-primary", onClick: add }, `New ${label}`)
+        types ? createElement(
+          "div",
+          { className: "caf-doc-typemenu" },
+          typeNames.map(
+            (name) => createElement("button", { key: name, type: "button", className: "caf-btn caf-btn-primary", onClick: () => add(name) }, `New ${typeLabel(name)}`)
+          )
+        ) : createElement("button", { type: "button", className: "caf-btn caf-btn-primary", onClick: () => add() }, `New ${label}`)
       )
     );
   }
+  const aspec = specFor(active);
+  if (!aspec) {
+    return createElement(
+      "div",
+      { className: "caf-documents" },
+      createElement(DocTabbar, { docs, active, dspec, types, close, onAdd, label, ctx }),
+      typePicker,
+      createElement(
+        "div",
+        { className: "caf-block caf-block-error" },
+        createElement("strong", null, `This ${label}'s type "${active.type}" no longer exists`),
+        createElement("code", null, `valid types: ${typeNames.join(", ")}`)
+      )
+    );
+  }
+  const defaults = docDefaults(aspec);
   const activeData = { ...defaults, ...active.data };
   const scoped = {
     ...ctx,
@@ -1875,39 +2030,50 @@ function DocumentsLayout({ spec, ctx }) {
   return createElement(
     "div",
     { className: "caf-documents" },
-    createElement(
-      "div",
-      { className: "caf-tabbar", role: "tablist" },
-      docs.map(
-        (doc) => createElement(
-          "span",
-          { key: doc.id, className: "caf-doc-tab" },
-          createElement(
-            "button",
-            {
-              type: "button",
-              role: "tab",
-              "aria-selected": doc.id === active.id,
-              className: doc.id === active.id ? "caf-tab caf-tab-active" : "caf-tab",
-              onClick: () => ctx.setTab(DOC_TAB_KEY, doc.id)
-            },
-            docTitle(dspec, { ...defaults, ...doc.data })
-          ),
-          createElement(
-            "button",
-            {
-              type: "button",
-              className: "caf-doc-close",
-              "aria-label": `Close ${label}`,
-              onClick: () => close(doc.id)
-            },
-            "\u2715"
-          )
+    createElement(DocTabbar, { docs, active, dspec, types, close, onAdd, label, ctx }),
+    typePicker,
+    createElement(Panel, { spec: { blocks: aspec.blocks }, ctx: scoped })
+  );
+}
+function DocTabbar({ docs, active, dspec, types, close, onAdd, label, ctx }) {
+  const tabTitle = (doc) => {
+    const tspec = types ? types[doc.type] : dspec;
+    if (!tspec) return doc.type;
+    const merged = { ...docDefaults(tspec), ...doc.data };
+    const fallback = types ? tspec.label || doc.type : void 0;
+    return docTitle(tspec, merged, fallback);
+  };
+  return createElement(
+    "div",
+    { className: "caf-tabbar", role: "tablist" },
+    docs.map(
+      (doc) => createElement(
+        "span",
+        { key: doc.id, className: "caf-doc-tab" },
+        createElement(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": doc.id === active.id,
+            className: doc.id === active.id ? "caf-tab caf-tab-active" : "caf-tab",
+            onClick: () => ctx.setTab(DOC_TAB_KEY, doc.id)
+          },
+          tabTitle(doc)
+        ),
+        createElement(
+          "button",
+          {
+            type: "button",
+            className: "caf-doc-close",
+            "aria-label": `Close ${label}`,
+            onClick: () => close(doc.id)
+          },
+          "\u2715"
         )
-      ),
-      createElement("button", { type: "button", className: "caf-tab caf-doc-add", "aria-label": `New ${label}`, onClick: add }, "+")
+      )
     ),
-    createElement(Panel, { spec: { blocks: dspec.blocks }, ctx: scoped })
+    createElement("button", { type: "button", className: "caf-tab caf-doc-add", "aria-label": `New ${label}`, onClick: onAdd }, "+")
   );
 }
 var LAYOUT_COMPONENTS = { panel: Panel, records: RecordsWithBlocks, steps: StepsLayout, chat: ChatLayout, workspace: WorkspaceLayout, documents: DocumentsLayout };
@@ -2209,6 +2375,8 @@ var BASE_CSS = `
 .caf-doc-close:hover { color: var(--caf-danger); }
 .caf-doc-add { font-size: 1rem; font-weight: 650; }
 .caf-empty .caf-btn { margin-top: 0.6rem; }
+.caf-records-block { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
+.caf-doc-typemenu { display: flex; gap: 0.5rem; flex-wrap: wrap; }
 .caf-chevron-closed { transform: rotate(-90deg); }
 .caf-block-fill { border: none; background: transparent; padding: 0; overflow: auto; min-height: 320px; }
 .caf-empty, .caf-loading { color: var(--caf-muted); font-size: 0.9rem; text-align: center; padding: 1.6rem 1rem; }