claude-artifact-framework 0.5.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-artifact-framework",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Utilities for building apps inside Claude Artifacts: platform storage, chat tool-calling loops, and other primitives verified against the real runtime.",
   "type": "module",
   "main": "./dist/index.esm.js",

package/src/app.js

@@ -12,7 +12,7 @@
 import { createElement as h, useState, useEffect, hasReact, getReact } from "react";
 import { createAppState } from "./appState.js";
 import { themeCss, seriesColors } from "./theme.js";
-import { BLOCKS, BLOCK_NAMES } from "./blocks.js";
+import { BLOCKS, BLOCK_NAMES, FIELD_TYPES } from "./blocks.js";
 import { RecordsLayout } from "./records.js";
 import { StepsLayout } from "./steps.js";
 import { ChatLayout, CHAT_KEYS } from "./chat.js";
@@ -25,6 +25,48 @@ const RESERVED = ["title", "empty", "wide", "onSelect", "subtitle"];
 // silently rendering nothing — a blank pane is indistinguishable from a bug.
 const TOP_KEYS = ["title", "subtitle", "theme", "layout", "blocks", "records", "steps", "chat", "data", "shared"];
 
+// An unknown field type used to fall through silently to a text input — the
+// exact quiet degradation the framework exists to prevent (a blind-tested
+// Haiku wrote "checkbox" for "check" and shipped a text field).
+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\`.`);
+    if (f.type !== undefined && !FIELD_TYPES.includes(f.type)) {
+      throw new Error(
+        `claude-artifact-framework: field "${f.key}" in ${where} has unknown type "${f.type}". Valid types: ${FIELD_TYPES.join(", ")}.`
+      );
+    }
+  }
+}
+
+function checkBlocks(blocks) {
+  if (!Array.isArray(blocks)) {
+    throw new Error("claude-artifact-framework: `blocks` must be an array.");
+  }
+  blocks.forEach((block, i) => {
+    if (!block || typeof block !== "object") {
+      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));
+    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(", ")}.`
+      );
+    }
+    if (known.length > 1) {
+      throw new Error(
+        `claude-artifact-framework: blocks[${i}] declares more than one block type (${known.join(
+          ", "
+        )}). Split them into separate entries of \`blocks\`.`
+      );
+    }
+    checkFields(block.fields, `blocks[${i}]`);
+  });
+}
+
 function validate(spec) {
   const unknownTop = Object.keys(spec).filter((k) => !TOP_KEYS.includes(k));
   if (unknownTop.length) {
@@ -58,8 +100,8 @@ function validate(spec) {
       if (!st.fields && !st.text && !st.result) {
         throw new Error(`claude-artifact-framework: steps[${i}] needs \`fields\`, \`text\`, or \`result\`.`);
       }
+      checkFields(st.fields, `steps[${i}]`);
       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 — keys share one data pool and must be unique.`
@@ -106,13 +148,14 @@ function validate(spec) {
         `claude-artifact-framework: records has unknown keys (${unknownR.join(", ")}). Valid keys: ${RECORDS_KEYS.join(", ")}.`
       );
     }
+    checkFields(r.fields, "records");
     const seen = new Set();
     for (const f of r.fields) {
-      if (!f || !f.key) throw new Error("claude-artifact-framework: every records field needs a `key`.");
       if (f.key === "id") throw new Error('claude-artifact-framework: "id" is reserved on records — 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);
     for (const [key, c] of Object.entries(r.compute || {})) {
       if (seen.has(key) || key === "id") {
         throw new Error(
@@ -127,31 +170,7 @@ function validate(spec) {
     }
     return layout;
   }
-  const blocks = spec.blocks || [];
-  if (!Array.isArray(blocks)) {
-    throw new Error("claude-artifact-framework: `blocks` must be an array.");
-  }
-  blocks.forEach((block, i) => {
-    if (!block || typeof block !== "object") {
-      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));
-    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(", ")}.`
-      );
-    }
-    if (known.length > 1) {
-      throw new Error(
-        `claude-artifact-framework: blocks[${i}] declares more than one block type (${known.join(
-          ", "
-        )}). Split them into separate entries of \`blocks\`.`
-      );
-    }
-  });
+  checkBlocks(spec.blocks || []);
   return layout;
 }
 
@@ -226,7 +245,34 @@ function Panel({ spec, ctx }) {
   );
 }
 
-const LAYOUT_COMPONENTS = { panel: Panel, records: RecordsLayout, steps: StepsLayout, chat: ChatLayout };
+// Records + extra blocks is a natural combo (a list with a chart of itself
+// below). Blocks render under the list, never under the detail screen, and
+// their functions receive the same data object as everywhere else — the
+// collection lives at d.records.
+function RecordsWithBlocks({ spec, ctx }) {
+  const detailOpen =
+    ctx.view.screen === "record" && (ctx.data.records || []).some((r) => r.id === ctx.view.arg);
+  return h(
+    "div",
+    null,
+    h(RecordsLayout, { spec, ctx }),
+    !detailOpen && Array.isArray(spec.blocks) && spec.blocks.length
+      ? h(
+          "div",
+          { className: "caf-panel caf-records-blocks" },
+          spec.blocks.map((block, i) =>
+            h(
+              "section",
+              { key: i, className: block.wide ? "caf-slot caf-slot-wide" : "caf-slot" },
+              h(Block, { block, ctx })
+            )
+          )
+        )
+      : null
+  );
+}
+
+const LAYOUT_COMPONENTS = { panel: Panel, records: RecordsWithBlocks, steps: StepsLayout, chat: ChatLayout };
 
 export function createApp(spec = {}) {
   const layout = validate(spec);
@@ -402,6 +448,7 @@ const BASE_CSS = `
 }
 .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-records-blocks { margin-top: 1rem; }
 .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); }