claude-artifact-framework 0.19.1 → 0.19.2

package/README.md

@@ -908,8 +908,10 @@ keys must be unique across steps.
 `{ description, input, run(input, ctx) }`.
 
 **Formats** (`format:` on output/chart/compute items): `money`, `percent`,
-`number`, `date`. `percent` expects 0–100 (pass `ratio * 100`, not the raw
-ratio). `big: true` renders an item at hero size AND promotes its block to
+`number`, `date`, `text` (explicit no-op). Anything else throws, contained
+to the block. `percent` expects 0–100 (pass `ratio * 100`, not the raw
+ratio); a computed `NaN`/`Infinity` renders as "—", never as "NaN".
+`big: true` renders an item at hero size AND promotes its block to
 the screen's one feature surface (accent-tinted card) — reserve it for the
 ONE number that is the screen's main result (a total, a final score), not
 for every stat; more than one hero per screen means no hero at all.

package/dist/index.esm.js

@@ -625,6 +625,7 @@ function ChatLayout({ spec, ctx }) {
 var FIELD_TYPES = ["text", "textarea", "number", "money", "percent", "check", "date", "select", "file"];
 function formatValue(value, format) {
   if (value === null || value === void 0 || value === "") return "\u2014";
+  if (typeof value === "number" && !Number.isFinite(value)) return "\u2014";
   const n = Number(value);
   switch (format) {
     case "money":
@@ -635,8 +636,15 @@ function formatValue(value, format) {
       return Number.isFinite(n) ? n.toLocaleString(void 0, { maximumFractionDigits: 2 }) : String(value);
     case "date":
       return value instanceof Date ? value.toLocaleDateString() : String(value);
-    default:
+    case "text":
+    // observed natural usage (round 21) — an explicit no-op
+    case void 0:
+    case null:
       return String(value);
+    default:
+      throw new Error(
+        `claude-artifact-framework: unknown format "${format}". Valid formats: money, percent, number, date, text.`
+      );
   }
 }
 function validateField(field, value) {
@@ -756,16 +764,12 @@ function FieldsBlock({ spec, ctx }) {
     )
   );
 }
-function OutputBlock({ spec, ctx }) {
-  const items = typeof spec.output === "function" ? spec.output(ctx.data) : spec.output || [];
-  if (!items.length) {
-    return createElement("div", { className: "caf-block caf-empty" }, spec.empty || "Nothing to show yet.");
-  }
+function StatGrid({ items, title }) {
   const hero = items.some((it) => it && it.big);
   return createElement(
     "div",
     { className: hero ? "caf-block caf-output caf-block-feature" : "caf-block caf-output" },
-    spec.title ? createElement("h2", { className: "caf-block-title" }, spec.title) : null,
+    title ? createElement("h2", { className: "caf-block-title" }, title) : null,
     createElement(
       "div",
       { className: "caf-output-grid" },
@@ -781,6 +785,13 @@ function OutputBlock({ spec, ctx }) {
     )
   );
 }
+function OutputBlock({ spec, ctx }) {
+  const items = typeof spec.output === "function" ? spec.output(ctx.data) : spec.output || [];
+  if (!items.length) {
+    return createElement("div", { className: "caf-block caf-empty" }, spec.empty || "Nothing to show yet.");
+  }
+  return createElement(StatGrid, { items, title: spec.title });
+}
 function BannerBlock({ spec }) {
   const b = typeof spec.banner === "string" ? { title: spec.banner } : spec.banner || {};
   const background = b.image ? `linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url(${JSON.stringify(b.image)}) center / cover` : `linear-gradient(135deg, color-mix(in srgb, var(--caf-accent) 82%, #000), var(--caf-accent) 55%, color-mix(in srgb, var(--caf-accent) 72%, #fff))`;
@@ -1100,23 +1111,7 @@ function Summary({ spec, records }) {
   if (!spec.summary) return null;
   const items = spec.summary(records) || [];
   if (!items.length) return null;
-  const hero = items.some((it) => it && it.big);
-  return createElement(
-    "div",
-    { className: hero ? "caf-block caf-output caf-block-feature" : "caf-block caf-output" },
-    createElement(
-      "div",
-      { className: "caf-output-grid" },
-      items.map(
-        (item, i) => createElement(
-          "div",
-          { key: item.label || i, className: item.big ? "caf-stat caf-stat-big" : "caf-stat" },
-          createElement("span", { className: "caf-stat-label" }, item.label),
-          createElement("span", { className: "caf-stat-value" }, formatValue(item.value, item.format))
-        )
-      )
-    )
-  );
+  return createElement(StatGrid, { items });
 }
 function ListScreen({ spec, ctx }) {
   const label = spec.label || "item";
@@ -1372,25 +1367,7 @@ function ResultScreen({ step, ctx }) {
   return createElement(
     "div",
     { className: "caf-steps-result" },
-    createElement(
-      "div",
-      // Same rule as OutputBlock: the hero (big) result gets the feature card.
-      { className: items.some((it) => it && it.big) ? "caf-block caf-output caf-block-feature" : "caf-block caf-output" },
-      step.title ? createElement("h2", { className: "caf-block-title" }, step.title) : null,
-      createElement(
-        "div",
-        { className: "caf-output-grid" },
-        items.map(
-          (item, i) => createElement(
-            "div",
-            { key: item.label ?? i, className: item.big ? "caf-stat caf-stat-big" : "caf-stat" },
-            createElement("span", { className: "caf-stat-label" }, item.label),
-            createElement("span", { className: "caf-stat-value" }, formatValue(item.value, item.format)),
-            item.hint ? createElement("small", { className: "caf-hint" }, item.hint) : null
-          )
-        )
-      )
-    ),
+    createElement(StatGrid, { items, title: step.title }),
     // A result can end on more than stats: any declared blocks (charts,
     // text, lists) render under the grid with full block services.
     (step.blocks || []).map((b, i) => createElement(Block2, { key: "rb" + i, block: b, ctx })),