claude-artifact-framework 0.20.0 → 0.20.1

package/package.json

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

@@ -1477,7 +1477,10 @@ const BASE_CSS = `
 .caf-doc-close:hover { color: var(--caf-danger); }
 .caf-doc-add { font-size: 1rem; font-weight: 650; }
 .caf-empty .caf-btn { margin-top: 0.6rem; }
-.caf-records-block { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
+/* Tight gap: the block title is a SECTION head for the cards below — it
+   must hug its group, not float equidistant (audited on the retro board). */
+.caf-records-block { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
+.caf-stat-neg, .caf-stat-big .caf-stat-value.caf-stat-neg { color: var(--caf-danger); }
 .caf-doc-typemenu { display: flex; gap: 0.5rem; flex-wrap: wrap; }
 .caf-header-brand { display: flex; align-items: center; gap: 0.8rem; }
 /* Where the page has a gutter, the logo lives in it: the title keeps the
@@ -1489,7 +1492,7 @@ const BASE_CSS = `
   .caf-header-brand .caf-logo { position: absolute; right: 100%; margin-right: 0.85rem; top: 0.1rem; }
 }
 .caf-header-text { min-width: 0; }
-.caf-logo { flex: none; width: 40px; height: 40px; border-radius: 9px; object-fit: contain; }
+.caf-logo { flex: none; width: 40px; height: 40px; border-radius: 9px; object-fit: contain; overflow: hidden; }
 .caf-logo-emoji { display: flex; align-items: center; justify-content: center; font-size: 1.7rem; background: var(--caf-surface); border: 1px solid var(--caf-border); }
 .caf-logo-mono {
   display: flex; align-items: center; justify-content: center;

package/src/blocks.js

@@ -63,7 +63,13 @@ export function validateField(field, value) {
 }
 
 export function Field({ field, value, onChange, data }) {
-  const error = validateField(field, value);
+  // A pristine empty field must not shout "Required" before the user ever
+  // touched it (audited on first load of a quick-add form). Range/format
+  // errors imply a non-empty value, so only the empty-required case waits.
+  const [touched, setTouched] = useState(false);
+  const rawError = validateField(field, value);
+  const pristineEmpty = !touched && (value === "" || value === null || value === undefined);
+  const error = pristineEmpty ? null : rawError;
   const id = `caf-f-${field.key}`;
   const numeric = field.type === "number" || field.type === "money" || field.type === "percent";
 
@@ -108,6 +114,7 @@ export function Field({ field, value, onChange, data }) {
     id,
     value: value === null || value === undefined ? "" : value,
     "aria-invalid": error ? "true" : undefined,
+    onBlur: () => setTouched(true),
     onChange: (e) => onChange(numeric ? toNumber(e.target.value) : e.target.value),
   };
 
@@ -229,15 +236,19 @@ export function StatGrid({ items, title }) {
     h(
       "div",
       { className: "caf-output-grid" },
-      items.map((item, i) =>
-        h(
+      items.map((item, i) => {
+        // A negative money/number stat reads as a loss everywhere else on
+        // screen (list rows already color by sign) — the hero must agree,
+        // not paint a deficit in cheerful brand accent (audited).
+        const neg = (item.format === "money" || item.format === "number") && Number(item.value) < 0;
+        return 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)),
+          h("span", { className: neg ? "caf-stat-value caf-stat-neg" : "caf-stat-value" }, formatValue(item.value, item.format)),
           item.hint ? h("small", { className: "caf-hint" }, item.hint) : null
-        )
-      )
+        );
+      })
     )
   );
 }