claude-artifact-framework 0.19.1 → 0.19.2

package/llms.txt

@@ -34,7 +34,8 @@ https://cdn.jsdelivr.net/npm/claude-artifact-framework/dist/index.global.js
   states, events (event: from, do, then); chat: system, greeting, placeholder,
   tools, model, maxTokens; steps step: title, text, fields, result,
   blocks (result steps only — end a wizard on charts/text under the stats)
-- Formats: money, percent (0-100), number, date. Output/chart/compute items:
+- Formats: money, percent (0-100), number, date, text (no-op; anything else
+  throws). NaN/Infinity render as "—". Output/chart/compute items:
   { label, value, format, big }
 
 ## Hard rules

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-artifact-framework",
-  "version": "0.19.1",
+  "version": "0.19.2",
   "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/blocks.js

@@ -17,6 +17,9 @@ const FIELD_TYPES = ["text", "textarea", "number", "money", "percent", "check",
 
 export function formatValue(value, format) {
   if (value === null || value === undefined || value === "") return "—";
+  // A computed NaN/Infinity (0/0 on an empty list is the measured case)
+  // must read as "no data yet", never as the string "NaN" on screen.
+  if (typeof value === "number" && !Number.isFinite(value)) return "—";
   const n = Number(value);
   switch (format) {
     case "money":
@@ -29,8 +32,17 @@ export function formatValue(value, format) {
       return Number.isFinite(n) ? n.toLocaleString(undefined, { 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 undefined:
+    case null:
       return String(value);
+    default:
+      // Same loud-failure rule as every other registry: a typo must name
+      // the valid set, not silently un-format the number. The block
+      // boundary contains the throw to the offending card.
+      throw new Error(
+        `claude-artifact-framework: unknown format "${format}". Valid formats: money, percent, number, date, text.`
+      );
   }
 }
 
@@ -173,20 +185,17 @@ export function FieldsBlock({ spec, ctx }) {
   );
 }
 
-export function OutputBlock({ spec, ctx }) {
-  const items = typeof spec.output === "function" ? spec.output(ctx.data) : spec.output || [];
-  if (!items.length) {
-    return h("div", { className: "caf-block caf-empty" }, spec.empty || "Nothing to show yet.");
-  }
-  // The block holding the screen's hero number (a `big` stat) gets the one
-  // differentiated surface — an accent-tinted feature card. Audited miss:
-  // with a single card chrome, the most important number on screen weighed
-  // exactly the same as everything else.
+// THE stat grid — the single render path for output blocks, records
+// summaries, and steps results. It exists because the feature-card rule was
+// once applied to one of three hand-copied versions of this markup and an
+// audit caught the other two bare (the re-audit CRÍTICO of 0.19.0). The
+// block holding a `big` stat gets the screen's one differentiated surface.
+export function StatGrid({ items, title }) {
   const hero = items.some((it) => it && it.big);
   return h(
     "div",
     { className: hero ? "caf-block caf-output caf-block-feature" : "caf-block caf-output" },
-    spec.title ? h("h2", { className: "caf-block-title" }, spec.title) : null,
+    title ? h("h2", { className: "caf-block-title" }, title) : null,
     h(
       "div",
       { className: "caf-output-grid" },
@@ -203,6 +212,14 @@ export function OutputBlock({ spec, ctx }) {
   );
 }
 
+export function OutputBlock({ spec, ctx }) {
+  const items = typeof spec.output === "function" ? spec.output(ctx.data) : spec.output || [];
+  if (!items.length) {
+    return h("div", { className: "caf-block caf-empty" }, spec.empty || "Nothing to show yet.");
+  }
+  return h(StatGrid, { items, title: spec.title });
+}
+
 // Brand elements follow the zero-asset-first principle: every form works
 // with nothing uploaded (artifacts can't persist real images — the ~5MB
 // pool). banner's default face is a gradient derived from the theme seed;

package/src/records.js

@@ -19,7 +19,7 @@
 // simply falls back to the list.
 
 import { createElement as h, useState, useEffect } from "react";
-import { Field, formatValue } from "./blocks.js";
+import { Field, formatValue, StatGrid } from "./blocks.js";
 
 // Computed fields are derived at render time and never stored, so they can't
 // go stale. Accepts `{ subtotal: (r) => ... }` or
@@ -61,6 +61,8 @@ function makeId() {
 // if the second declared parameter is named like the viewer id, hand it
 // the viewer id. Every callback gets what its own names ask for, and the
 // uniform (record, data, viewerId) order in the docs stays the one truth.
+// KNOWN LIMIT: minified specs rename parameters, silently defeating this
+// detection — one more reason hard rule 1 bans minified output.
 const rowCallLegacy = new WeakMap();
 function rowCall(fn, rec, data, viewerId) {
   let legacy = rowCallLegacy.get(fn);
@@ -103,26 +105,7 @@ function Summary({ spec, records }) {
   if (!spec.summary) return null;
   const items = spec.summary(records) || [];
   if (!items.length) return null;
-  // Same rule as OutputBlock: the hero (big) stat promotes its card to the
-  // screen's feature surface. Re-audit caught this second render path
-  // missing the treatment — the rule must hold wherever big stats render.
-  const hero = items.some((it) => it && it.big);
-  return h(
-    "div",
-    { className: hero ? "caf-block caf-output caf-block-feature" : "caf-block caf-output" },
-    h(
-      "div",
-      { className: "caf-output-grid" },
-      items.map((item, i) =>
-        h(
-          "div",
-          { key: item.label || i, className: item.big ? "caf-stat caf-stat-big" : "caf-stat" },
-          h("span", { className: "caf-stat-label" }, item.label),
-          h("span", { className: "caf-stat-value" }, formatValue(item.value, item.format))
-        )
-      )
-    )
-  );
+  return h(StatGrid, { items });
 }
 
 function ListScreen({ spec, ctx }) {

package/src/steps.js

@@ -14,7 +14,7 @@
 //                   on the step the user was on, holding their answers.
 
 import { createElement as h } from "react";
-import { Field, validateField, formatValue, writeField } from "./blocks.js";
+import { Field, validateField, writeField, StatGrid } from "./blocks.js";
 
 function stepErrors(step, data) {
   return (step.fields || []).some((f) => validateField(f, data[f.key]) !== null);
@@ -26,25 +26,7 @@ function ResultScreen({ step, ctx }) {
   return h(
     "div",
     { className: "caf-steps-result" },
-    h(
-      "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 ? h("h2", { className: "caf-block-title" }, step.title) : null,
-      h(
-        "div",
-        { className: "caf-output-grid" },
-        items.map((item, i) =>
-          h(
-            "div",
-            { key: item.label ?? i, className: item.big ? "caf-stat caf-stat-big" : "caf-stat" },
-            h("span", { className: "caf-stat-label" }, item.label),
-            h("span", { className: "caf-stat-value" }, formatValue(item.value, item.format)),
-            item.hint ? h("small", { className: "caf-hint" }, item.hint) : null
-          )
-        )
-      )
-    ),
+    h(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) => h(Block, { key: "rb" + i, block: b, ctx })),