claude-artifact-framework 0.6.0 → 0.7.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.6.0/dist/index.global.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/claude-artifact-framework@0.7.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.6.0/dist/index.esm.js";
+  } from "https://cdn.jsdelivr.net/npm/claude-artifact-framework@0.7.0/dist/index.esm.js";
 </script>
 ```
 
-Pin a version (`@0.6.0`) for reproducible artifacts, or drop the version
+Pin a version (`@0.7.0`) for reproducible artifacts, or drop the version
 (`claude-artifact-framework/dist/...`) to always get the latest release.
 
 ### Inside a React artifact
@@ -334,7 +334,8 @@ else — the collection lives at `d.records`.
 
 **Field types** (`type:` on any field): `text` (default), `textarea`,
 `number`, `money`, `percent`, `check` (checkbox), `date`, `select` (needs
-`options`). Other field keys: `key` (required), `label`, `value` (initial),
+`options` — an array, or `(d) => [...]` for choices that come from the
+app's data, e.g. a "who paid" select fed by a user-entered group). Other field keys: `key` (required), `label`, `value` (initial),
 `required`, `min`, `max`, `step`, `placeholder`, `hint`, `rows`, `options`.
 An unknown `type` throws naming the valid ones.
 
@@ -350,7 +351,21 @@ keys must be unique across steps.
 `{ description, input, run(input, ctx) }`.
 
 **Formats** (`format:` on output/chart/compute items): `money`, `percent`,
-`number`, `date`.
+`number`, `date`. `percent` expects 0–100 (pass `ratio * 100`, not the raw
+ratio).
+
+**Quick-add pattern** — a lightweight alternative to `records` when you just
+need "type something, press a button, it lands in a list":
+
+```js
+blocks: [
+  { fields: [{ key: "nueva", label: "Persona", type: "text" }] },
+  { actions: [{ label: "Agregar", kind: "primary", run: (d) => {
+      if (d.nueva && d.nueva.trim()) { d.personas = [...(d.personas || []), d.nueva.trim()]; d.nueva = ""; }
+  }}]},
+  { text: (d) => (d.personas || []).join(", ") || "Sin personas todavía" },
+]
+```
 
 ## `storage`
 

package/dist/index.esm.js

@@ -403,7 +403,7 @@ function validateField(field, value) {
   }
   return null;
 }
-function Field({ field, value, onChange }) {
+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";
@@ -430,11 +430,12 @@ function Field({ field, value, onChange }) {
   if (field.type === "textarea") {
     control = createElement("textarea", { ...common, rows: field.rows || 3 });
   } else if (field.type === "select") {
+    const options = typeof field.options === "function" ? field.options(data) || [] : field.options || [];
     control = createElement(
       "select",
       common,
       createElement("option", { value: "" }, field.placeholder || "Select\u2026"),
-      (field.options || []).map((opt) => {
+      options.map((opt) => {
         const val = typeof opt === "string" ? opt : opt.value;
         const label = typeof opt === "string" ? opt : opt.label;
         return createElement("option", { key: val, value: val }, label);
@@ -474,6 +475,7 @@ function FieldsBlock({ spec, ctx }) {
       (field) => createElement(Field, {
         key: field.key,
         field,
+        data: ctx.data,
         value: ctx.data[field.key],
         onChange: (v) => ctx.update((d) => {
           d[field.key] = v;
@@ -517,13 +519,15 @@ function TextBlock({ spec, ctx }) {
 }
 function ListBlock({ spec, ctx }) {
   const rows = (typeof spec.list === "function" ? spec.list(ctx.data) : spec.list) || [];
+  const heading = typeof spec.title === "string" ? spec.title : null;
+  const rowTitle2 = typeof spec.title === "function" ? spec.title : (r) => r.title ?? r.name ?? r.label ?? r.text ?? String(r);
   if (!rows.length) {
     return createElement("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 createElement(
     "div",
     { className: "caf-block caf-list" },
+    heading ? createElement("h2", { className: "caf-block-title" }, heading) : null,
     rows.map(
       (row, i) => createElement(
         "button",
@@ -533,7 +537,7 @@ function ListBlock({ spec, ctx }) {
           type: "button",
           onClick: spec.onSelect ? () => spec.onSelect(row, ctx) : void 0
         },
-        createElement("span", { className: "caf-row-title" }, title(row)),
+        createElement("span", { className: "caf-row-title" }, rowTitle2(row)),
         spec.subtitle ? createElement("span", { className: "caf-row-sub" }, spec.subtitle(row)) : null
       )
     )
@@ -890,6 +894,7 @@ function DetailScreen({ spec, ctx, record }) {
       (field) => createElement(Field, {
         key: field.key,
         field,
+        data: ctx.data,
         value: record[field.key],
         onChange: (v) => ctx.update((d) => {
           const rec = d.records.find((r) => r.id === record.id);
@@ -950,6 +955,7 @@ function ItemsEditor({ spec, ctx, record }) {
           (field) => createElement(Field, {
             key: field.key,
             field,
+            data: ctx.data,
             value: item[field.key],
             onChange: (v) => mutate((rec) => {
               const it = rec.items.find((x) => x.id === item.id);
@@ -1047,6 +1053,7 @@ function StepsLayout({ spec, ctx }) {
         (field) => createElement(Field, {
           key: field.key,
           field,
+          data: ctx.data,
           value: ctx.data[field.key],
           onChange: (v) => ctx.update((d) => {
             d[field.key] = v;
@@ -1316,6 +1323,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 !== void 0 && !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.`
+      );
+    }
   }
 }
 var ACTION_KEYS = ["label", "run", "when", "kind"];