claude-artifact-framework 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-artifact-framework",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "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

@@ -36,6 +36,11 @@ function checkFields(fields, where) {
         `claude-artifact-framework: field "${f.key}" in ${where} has unknown type "${f.type}". Valid types: ${FIELD_TYPES.join(", ")}.`
       );
     }
+    if (f.type === "select" && f.options !== undefined && !Array.isArray(f.options) && typeof f.options !== "function") {
+      throw new Error(
+        `claude-artifact-framework: field "${f.key}" in ${where}: \`options\` must be an array or a function of data returning one.`
+      );
+    }
   }
 }
 

package/src/blocks.js

@@ -49,7 +49,7 @@ export function validateField(field, value) {
   return null;
 }
 
-export function Field({ field, value, onChange }) {
+export function Field({ field, value, onChange, data }) {
   const error = validateField(field, value);
   const id = `caf-f-${field.key}`;
   const numeric = field.type === "number" || field.type === "money" || field.type === "percent";
@@ -79,11 +79,14 @@ export function Field({ field, value, onChange }) {
   if (field.type === "textarea") {
     control = h("textarea", { ...common, rows: field.rows || 3 });
   } else if (field.type === "select") {
+    // Options may be declared as a function of the app data, for selects
+    // whose choices come from what the user has entered elsewhere.
+    const options = typeof field.options === "function" ? field.options(data) || [] : field.options || [];
     control = h(
       "select",
       common,
       h("option", { value: "" }, field.placeholder || "Select…"),
-      (field.options || []).map((opt) => {
+      options.map((opt) => {
         const val = typeof opt === "string" ? opt : opt.value;
         const label = typeof opt === "string" ? opt : opt.label;
         return h("option", { key: val, value: val }, label);
@@ -126,6 +129,7 @@ export function FieldsBlock({ spec, ctx }) {
       h(Field, {
         key: field.key,
         field,
+        data: ctx.data,
         value: ctx.data[field.key],
         onChange: (v) => ctx.update((d) => { d[field.key] = v; }),
       })
@@ -170,13 +174,18 @@ export function TextBlock({ spec, ctx }) {
 
 export function ListBlock({ spec, ctx }) {
   const rows = (typeof spec.list === "function" ? spec.list(ctx.data) : spec.list) || [];
+  // `title` follows the same convention as every other block: a string is the
+  // block heading. A function is the per-row title. Both are supported —
+  // making list the odd one out was an API inconsistency a blind test caught.
+  const heading = typeof spec.title === "string" ? spec.title : null;
+  const rowTitle = typeof spec.title === "function" ? spec.title : (r) => r.title ?? r.name ?? r.label ?? r.text ?? String(r);
   if (!rows.length) {
     return h("div", { className: "caf-block caf-empty" }, spec.empty || "Nothing here yet.");
   }
-  const title = spec.title || ((r) => r.title ?? r.name ?? r.label ?? String(r));
   return h(
     "div",
     { className: "caf-block caf-list" },
+    heading ? h("h2", { className: "caf-block-title" }, heading) : null,
     rows.map((row, i) =>
       h(
         "button",
@@ -186,7 +195,7 @@ export function ListBlock({ spec, ctx }) {
           type: "button",
           onClick: spec.onSelect ? () => spec.onSelect(row, ctx) : undefined,
         },
-        h("span", { className: "caf-row-title" }, title(row)),
+        h("span", { className: "caf-row-title" }, rowTitle(row)),
         spec.subtitle ? h("span", { className: "caf-row-sub" }, spec.subtitle(row)) : null
       )
     )

package/src/records.js

@@ -199,6 +199,7 @@ function DetailScreen({ spec, ctx, record }) {
       h(Field, {
         key: field.key,
         field,
+        data: ctx.data,
         value: record[field.key],
         onChange: (v) =>
           ctx.update((d) => {
@@ -272,6 +273,7 @@ function ItemsEditor({ spec, ctx, record }) {
               h(Field, {
                 key: field.key,
                 field,
+                data: ctx.data,
                 value: item[field.key],
                 onChange: (v) =>
                   mutate((rec) => {

package/src/steps.js

@@ -78,6 +78,7 @@ export function StepsLayout({ spec, ctx }) {
             h(Field, {
               key: field.key,
               field,
+              data: ctx.data,
               value: ctx.data[field.key],
               onChange: (v) => ctx.update((d) => { d[field.key] = v; }),
             })