claude-artifact-framework 0.20.0 → 0.20.1

package/dist/index.esm.js

@@ -672,7 +672,10 @@ function validateField(field, value) {
   return null;
 }
 function Field({ field, value, onChange, data }) {
-  const error = validateField(field, value);
+  const [touched, setTouched] = useState(false);
+  const rawError = validateField(field, value);
+  const pristineEmpty = !touched && (value === "" || value === null || value === void 0);
+  const error = pristineEmpty ? null : rawError;
   const id = `caf-f-${field.key}`;
   const numeric = field.type === "number" || field.type === "money" || field.type === "percent";
   if (field.type === "file") {
@@ -706,6 +709,7 @@ function Field({ field, value, onChange, data }) {
     id,
     value: value === null || value === void 0 ? "" : value,
     "aria-invalid": error ? "true" : void 0,
+    onBlur: () => setTouched(true),
     onChange: (e) => onChange(numeric ? toNumber(e.target.value) : e.target.value)
   };
   let control;
@@ -803,15 +807,16 @@ function StatGrid({ items, title }) {
     createElement(
       "div",
       { className: "caf-output-grid" },
-      items.map(
-        (item, i) => createElement(
+      items.map((item, i) => {
+        const neg = (item.format === "money" || item.format === "number") && Number(item.value) < 0;
+        return 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)),
+          createElement("span", { className: neg ? "caf-stat-value caf-stat-neg" : "caf-stat-value" }, formatValue(item.value, item.format)),
           item.hint ? createElement("small", { className: "caf-hint" }, item.hint) : null
-        )
-      )
+        );
+      })
     )
   );
 }
@@ -2756,7 +2761,10 @@ var 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 \u2014 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
@@ -2768,7 +2776,7 @@ var 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;