@ggui-ai/ui-visual-tester 0.25.0 → 0.27.0

package/README.md

@@ -1,6 +1,6 @@
 # @ggui-ai/ui-visual-tester
 
-Behavioral validator for [ggui](https://ggui.ai)-generated component code.
+Behavioral validator for [GGUI](https://ggui.ai)-generated component code.
 
 Structural validators (schema checks, wire-preservation, compile/lint)
 confirm that a component is _shaped_ correctly. They cannot tell you

package/fixture/fixture-runtime.js

@@ -20085,7 +20085,7 @@
       case "muted":
         return "var(--ggui-color-onSunken, #52525b)";
       case "subtle":
-        return "var(--ggui-color-neutral-500, #71717a)";
+        return "var(--ggui-color-onSunken, #52525b)";
       case "emphasized":
         return "var(--ggui-color-link, var(--ggui-color-primary-700, #0369a1))";
       case "loud":
@@ -20121,7 +20121,7 @@
     const inkAlias = "--ggui-surface-" + name + "-ink";
     const B = "var(" + bgAlias + ")";
     const I = "var(" + inkAlias + ")";
-    return `.${cls}{${bgAlias}:${bg};${inkAlias}:${ink};--ggui-color-onInverted:${ink}}.${cls}>*{--ggui-color-container:${B};--ggui-color-onContainer:${I};--ggui-color-elevated:${B};--ggui-color-onElevated:${I};--ggui-color-sunken:${B};--ggui-color-onSunken:${I};--ggui-color-neutral-500:${I};--ggui-color-ground:${B};--ggui-color-onGround:${I};--ggui-color-link:${accent}}@supports (color: color-mix(in srgb, red, blue)){.${cls}>*{--ggui-color-container:color-mix(in srgb, ${B} 94%, ${I});--ggui-color-elevated:color-mix(in srgb, ${B} 92%, ${I});--ggui-color-sunken:color-mix(in srgb, ${B} 88%, ${I});--ggui-color-onSunken:color-mix(in srgb, ${I} 76%, ${B});--ggui-color-neutral-500:color-mix(in srgb, ${I} 62%, ${B});--ggui-color-outline:${outlineOpen}color-mix(in srgb, ${I} 32%, ${B}));--ggui-color-outlineVariant:color-mix(in srgb, ${I} 18%, ${B})}}`;
+    return `.${cls}{${bgAlias}:${bg};${inkAlias}:${ink};--ggui-color-onInverted:${ink}}.${cls}>*{--ggui-color-container:${B};--ggui-color-onContainer:${I};--ggui-color-elevated:${B};--ggui-color-onElevated:${I};--ggui-color-sunken:${B};--ggui-color-onSunken:${I};--ggui-color-neutral-500:${I};--ggui-color-ground:${B};--ggui-color-onGround:${I};--ggui-color-link:${accent};--ggui-color-controlAccentOutline:${accent}}@supports (color: color-mix(in srgb, red, blue)){.${cls}>*{--ggui-color-container:color-mix(in srgb, ${B} 94%, ${I});--ggui-color-elevated:color-mix(in srgb, ${B} 92%, ${I});--ggui-color-sunken:color-mix(in srgb, ${B} 88%, ${I});--ggui-color-onSunken:color-mix(in srgb, ${I} 76%, ${B});--ggui-color-neutral-500:color-mix(in srgb, ${I} 62%, ${B});--ggui-color-outline:${outlineOpen}color-mix(in srgb, ${I} 32%, ${B}));--ggui-color-controlOutline:${outlineOpen}color-mix(in srgb, ${I} 32%, ${B}));--ggui-color-outlineVariant:color-mix(in srgb, ${I} 18%, ${B})}}`;
   }
   var INVERTED_SCOPE_CSS = surfaceScopeCss(
     INVERTED_SCOPE_CLASS,
@@ -20657,7 +20657,8 @@
     },
     secondary: {
       backgroundColor: "var(--ggui-color-sunken, #f4f4f5)",
-      color: "var(--ggui-color-onSunken, #52525b)",
+      // The label reads at full strength; the chip marks the rank (ggui#1566).
+      color: "var(--ggui-color-onContainer, #18181b)",
       border: "none"
     },
     outline: {
@@ -20666,13 +20667,15 @@
       // label is the surface's own on-colour, never a brand-ladder stop
       // (ggui#1034): `primary-600` as the label read mid-grey on a monochrome
       // dark theme's ground — 2.41:1 / 3.5:1 on served reply chips. The brand
-      // stays on the border, where contrast is decorative.
+      // stays on the border, and the border identifies the control, so it is the
+      // first brand stop that clears 3:1 on the container (ggui#1494).
       color: "var(--ggui-color-onContainer, #18181b)",
-      border: "1px solid var(--ggui-color-primary-600, #0284c7)"
+      border: "1px solid var(--ggui-color-controlAccentOutline, var(--ggui-color-primary-600, #0284c7))"
     },
     ghost: {
       backgroundColor: "transparent",
-      color: "var(--ggui-color-onSunken, #52525b)",
+      // A dimmed label reads as disabled; ghost's rank is its missing chrome (ggui#1566).
+      color: "var(--ggui-color-onContainer, #18181b)",
       border: "none"
     },
     danger: {
@@ -20738,7 +20741,7 @@
       ...sizeStyles2[size],
       width: "100%",
       borderRadius: "var(--ggui-shape-radius-control, var(--ggui-shape-radius-md, 8px))",
-      border: `1px solid ${hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-outline, #d4d4d8)"}`,
+      border: `1px solid ${hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-controlOutline, var(--ggui-color-outline, #d4d4d8))"}`,
       backgroundColor: disabled ? "var(--ggui-color-sunken, #fafafa)" : "var(--ggui-color-sunken, #ffffff)",
       color: "var(--ggui-color-onContainer, #18181b)",
       transition: `border-color ${motionVar.duration.base} ${motionVar.easing.standard}, box-shadow ${motionVar.duration.base} ${motionVar.easing.standard}`,
@@ -20772,7 +20775,7 @@
       padding: "10px 12px",
       width: "100%",
       borderRadius: "var(--ggui-shape-radius-control, var(--ggui-shape-radius-md, 8px))",
-      border: `1px solid ${hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-outline, #d4d4d8)"}`,
+      border: `1px solid ${hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-controlOutline, var(--ggui-color-outline, #d4d4d8))"}`,
       backgroundColor: disabled ? "var(--ggui-color-sunken, #fafafa)" : "var(--ggui-color-sunken, #ffffff)",
       color: "var(--ggui-color-onContainer, #18181b)",
       fontSize: "var(--ggui-font-size-sm, 14px)",
@@ -20804,17 +20807,25 @@
     const messageId = `${uniqueId}-message`;
     const hasError = Boolean(error);
     const hasMessage = Boolean(error || helperText);
+    const startsOnPlaceholder = Boolean(placeholder) && value === void 0 && rest.defaultValue === void 0;
+    const [uncontrolledValue, setUncontrolledValue] = (0, import_react7.useState)(startsOnPlaceholder ? "" : typeof rest.defaultValue === "string" ? rest.defaultValue : void 0);
+    const showingPlaceholder = Boolean(placeholder) && (value ?? uncontrolledValue) === "";
     return (0, import_jsx_runtime11.jsxs)("div", { className, style: { display: "flex", flexDirection: "column", gap: "var(--ggui-spacing-1, 4px)", ...style }, children: [label && (0, import_jsx_runtime11.jsxs)("label", { htmlFor: selectId, style: {
       fontSize: "var(--ggui-font-size-sm, 14px)",
       fontWeight: "var(--ggui-font-weight-medium, 500)",
       color: "var(--ggui-color-onSunken, #52525b)"
-    }, children: [label, required && (0, import_jsx_runtime11.jsx)("span", { "aria-hidden": "true", style: { color: "var(--ggui-color-error-500, #ef4444)", marginLeft: "2px" }, children: "*" })] }), (0, import_jsx_runtime11.jsxs)("select", { id: selectId, value, onChange: (e) => onChange?.(e.target.value), disabled, required, "aria-invalid": hasError || void 0, "aria-describedby": hasMessage ? messageId : void 0, style: {
+    }, children: [label, required && (0, import_jsx_runtime11.jsx)("span", { "aria-hidden": "true", style: { color: "var(--ggui-color-error-500, #ef4444)", marginLeft: "2px" }, children: "*" })] }), (0, import_jsx_runtime11.jsxs)("select", { id: selectId, value, ...startsOnPlaceholder ? { defaultValue: "" } : {}, onChange: (e) => {
+      if (value === void 0)
+        setUncontrolledValue(e.target.value);
+      onChange?.(e.target.value);
+    }, disabled, required, "aria-invalid": hasError || void 0, "aria-describedby": hasMessage ? messageId : void 0, style: {
       ...sizeStyles3[size],
       width: "100%",
       borderRadius: "var(--ggui-shape-radius-control, var(--ggui-shape-radius-md, 8px))",
-      border: `1px solid ${hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-outline, #d4d4d8)"}`,
+      border: `1px solid ${hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-controlOutline, var(--ggui-color-outline, #d4d4d8))"}`,
       backgroundColor: disabled ? "var(--ggui-color-sunken, #fafafa)" : "var(--ggui-color-sunken, #ffffff)",
-      color: value ? "var(--ggui-color-onContainer, #18181b)" : "var(--ggui-color-onSunken, #52525b)",
+      // Muted only while the placeholder is what shows (ggui#1566, #1569).
+      color: showingPlaceholder ? "var(--ggui-color-onSunken, #52525b)" : "var(--ggui-color-onContainer, #18181b)",
       cursor: disabled ? "not-allowed" : "pointer",
       appearance: "none",
       backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E")`,
@@ -20859,7 +20870,7 @@
       width: "18px",
       height: "18px",
       borderRadius: "var(--ggui-shape-radius-sm, 4px)",
-      border: `2px solid ${checked || indeterminate ? "var(--ggui-color-primary-600, #0284c7)" : "var(--ggui-color-outline, #d4d4d8)"}`,
+      border: `2px solid ${checked || indeterminate ? "var(--ggui-color-primary-600, #0284c7)" : "var(--ggui-color-controlOutline, var(--ggui-color-outline, #d4d4d8))"}`,
       backgroundColor: checked || indeterminate ? "var(--ggui-color-primary-600, #0284c7)" : "var(--ggui-color-sunken, #ffffff)",
       display: "flex",
       alignItems: "center",
@@ -20868,7 +20879,7 @@
     }, children: (checked || indeterminate) && (0, import_jsx_runtime12.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", style: { color: "var(--ggui-color-onPrimary, #ffffff)" }, children: indeterminate ? (0, import_jsx_runtime12.jsx)("path", { d: "M2.5 6H9.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) : (0, import_jsx_runtime12.jsx)("path", { d: "M2.5 6L5 8.5L9.5 3.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }), (label || description) && (0, import_jsx_runtime12.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [label && (0, import_jsx_runtime12.jsx)("span", { style: {
       fontSize: "var(--ggui-font-size-sm, 14px)",
       fontWeight: "var(--ggui-font-weight-medium, 500)",
-      color: "var(--ggui-color-onSunken, #52525b)"
+      color: "var(--ggui-color-onContainer, #18181b)"
     }, children: label }), description && (0, import_jsx_runtime12.jsx)("span", { style: {
       fontSize: "var(--ggui-font-size-xs, 12px)",
       color: "var(--ggui-color-onSunken, #52525b)"
@@ -20904,7 +20915,7 @@
       width: config.width,
       height: config.height,
       borderRadius: "9999px",
-      backgroundColor: checked ? "var(--ggui-color-primary-600, #0284c7)" : "var(--ggui-color-outline, #d4d4d8)",
+      backgroundColor: checked ? "var(--ggui-color-primary-600, #0284c7)" : "var(--ggui-color-controlOutline, var(--ggui-color-outline, #d4d4d8))",
       position: "relative",
       transition: `background-color ${motionVar.duration.base} ${motionVar.easing.standard}, box-shadow ${motionVar.duration.base} ${motionVar.easing.standard}`,
       flexShrink: 0,
@@ -20923,7 +20934,7 @@
     } }) }), label && (0, import_jsx_runtime13.jsx)("span", { style: {
       fontSize: "var(--ggui-font-size-sm, 14px)",
       fontWeight: "var(--ggui-font-weight-medium, 500)",
-      color: "var(--ggui-color-onSunken, #52525b)"
+      color: "var(--ggui-color-onContainer, #18181b)"
     }, children: label })] });
   }
 
@@ -20971,7 +20982,7 @@
         width: "18px",
         height: "18px",
         borderRadius: "var(--ggui-shape-radius-full, 9999px)",
-        border: `2px solid ${isSelected ? "var(--ggui-color-primary-600, #0284c7)" : "var(--ggui-color-outline, #d4d4d8)"}`,
+        border: `2px solid ${isSelected ? "var(--ggui-color-primary-600, #0284c7)" : "var(--ggui-color-controlOutline, var(--ggui-color-outline, #d4d4d8))"}`,
         backgroundColor: "var(--ggui-color-sunken, #ffffff)",
         display: "flex",
         alignItems: "center",
@@ -20985,7 +20996,7 @@
       } }) })] }), (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [(0, import_jsx_runtime14.jsx)("span", { style: {
         fontSize: "var(--ggui-font-size-sm, 14px)",
         fontWeight: "var(--ggui-font-weight-medium, 500)",
-        color: "var(--ggui-color-onSunken, #52525b)"
+        color: "var(--ggui-color-onContainer, #18181b)"
       }, children: option.label }), option.description && (0, import_jsx_runtime14.jsx)("span", { style: {
         fontSize: "var(--ggui-font-size-xs, 12px)",
         color: "var(--ggui-color-onSunken, #52525b)"
@@ -26043,7 +26054,9 @@
       width: "100%",
       borderCollapse: "collapse",
       fontSize: "var(--ggui-font-size-sm, 14px)",
-      color: "var(--ggui-color-onSunken, #52525b)"
+      // Body cells are the data and inherit this (ggui#1566); the header and
+      // caption set the muted tier themselves.
+      color: "var(--ggui-color-onContainer, #18181b)"
     }, children: [caption && (0, import_jsx_runtime25.jsx)("caption", { style: {
       padding: cellPadding,
       fontSize: "var(--ggui-font-size-sm, 14px)",
@@ -26509,7 +26522,7 @@
       }, children: isExpanded && (0, import_jsx_runtime28.jsx)("div", { style: {
         padding: "0 var(--ggui-spacing-4, 16px) var(--ggui-spacing-4, 16px)",
         fontSize: "var(--ggui-font-size-sm, 14px)",
-        color: "var(--ggui-color-onSunken, #52525b)",
+        color: "var(--ggui-color-onContainer, #18181b)",
         lineHeight: "var(--ggui-font-lineHeight-normal, 1.5)"
       }, children: item.content }) })] }, item.key);
     }) });
@@ -26626,7 +26639,7 @@
       paddingLeft: "36px",
       fontSize: size === "lg" ? "16px" : "14px",
       borderRadius: "6px",
-      border: `1px solid var(--ggui-color-outline, #d1d5db)`,
+      border: `1px solid var(--ggui-color-controlOutline, var(--ggui-color-outline, #d1d5db))`,
       backgroundColor: disabled ? "var(--ggui-color-sunken, #f9fafb)" : "var(--ggui-color-container, #ffffff)",
       color: "var(--ggui-color-onContainer, #111827)",
       outline: "none",
@@ -26649,11 +26662,11 @@
       color: "var(--ggui-color-onContainer, #374151)"
     }, children: [label, required && (0, import_jsx_runtime30.jsx)("span", { style: { color: "var(--ggui-color-error-500, #ef4444)", marginLeft: "2px" }, children: "*" })] }), description && (0, import_jsx_runtime30.jsx)("span", { style: {
       fontSize: fontSize.xs,
-      color: "var(--ggui-color-neutral-500, #6b7280)",
+      color: resolveToneCss("subtle"),
       marginBottom: "4px"
     }, children: description }), children, (error || helperText) && (0, import_jsx_runtime30.jsx)("span", { style: {
       fontSize: fontSize.xs,
-      color: hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-neutral-500, #6b7280)"
+      color: hasError ? "var(--ggui-color-error-500, #ef4444)" : resolveToneCss("subtle")
     }, children: error || helperText })] });
   }
 
@@ -26899,7 +26912,7 @@
     }, children: loading ? (0, import_jsx_runtime34.jsx)("div", { style: { padding: "12px", display: "flex", justifyContent: "center" }, children: (0, import_jsx_runtime34.jsx)(Spinner, { size: 20 }) }) : filteredOptions.length === 0 ? (0, import_jsx_runtime34.jsx)("div", { style: {
       padding: "12px",
       textAlign: "center",
-      color: "var(--ggui-color-neutral-500, #6b7280)",
+      color: resolveToneCss("subtle"),
       fontSize: fontSize.sm
     }, children: noResultsText }) : filteredOptions.map((option, index) => (0, import_jsx_runtime34.jsxs)("div", { onClick: () => !option.disabled && handleSelect(option), style: {
       padding: "8px 12px",
@@ -26910,7 +26923,7 @@
       display: "flex",
       alignItems: "center",
       gap: "8px"
-    }, onMouseEnter: () => setHighlightedIndex(index), children: [option.icon && (0, import_jsx_runtime34.jsx)("span", { style: { flexShrink: 0 }, children: option.icon }), (0, import_jsx_runtime34.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime34.jsx)("div", { children: option.label }), option.description && (0, import_jsx_runtime34.jsx)("div", { style: { fontSize: fontSize.xs, color: "var(--ggui-color-neutral-500, #6b7280)" }, children: option.description })] })] }, option.value)) })] });
+    }, onMouseEnter: () => setHighlightedIndex(index), children: [option.icon && (0, import_jsx_runtime34.jsx)("span", { style: { flexShrink: 0 }, children: option.icon }), (0, import_jsx_runtime34.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime34.jsx)("div", { children: option.label }), option.description && (0, import_jsx_runtime34.jsx)("div", { style: { fontSize: fontSize.xs, color: resolveToneCss("subtle") }, children: option.description })] })] }, option.value)) })] });
   }
 
   // ../design/dist/components/Breadcrumb.js
@@ -26928,7 +26941,7 @@
       return (0, import_jsx_runtime35.jsxs)(import_react23.Fragment, { children: [index > 0 && (0, import_jsx_runtime35.jsx)("span", { style: { color: "var(--ggui-color-neutral-400, #9ca3af)" }, children: separator }), item.icon && (0, import_jsx_runtime35.jsx)("span", { style: {
         display: "flex",
         alignItems: "center",
-        color: isLast ? "var(--ggui-color-onContainer, #111827)" : "var(--ggui-color-neutral-500, #6b7280)"
+        color: isLast ? "var(--ggui-color-onContainer, #111827)" : resolveToneCss("subtle")
       }, children: item.icon }), isLast ? (0, import_jsx_runtime35.jsx)("span", { style: {
         color: "var(--ggui-color-onContainer, #111827)",
         fontWeight: 500
@@ -26941,7 +26954,7 @@
         background: "none",
         border: "none",
         padding: 0,
-        color: "var(--ggui-color-neutral-500, #6b7280)",
+        color: resolveToneCss("subtle"),
         cursor: "pointer",
         fontSize: "inherit"
       }, children: item.label })] }, index);
@@ -27687,7 +27700,7 @@
       }
     };
     const timestamp = comment.timestamp instanceof Date ? comment.timestamp.toLocaleString() : comment.timestamp;
-    return (0, import_jsx_runtime44.jsxs)("div", { style: { marginLeft: depth > 0 ? "40px" : 0 }, children: [(0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", gap: "12px" }, children: [(0, import_jsx_runtime44.jsx)(Avatar, { name: comment.author.name, src: comment.author.avatar, size: "sm" }), (0, import_jsx_runtime44.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [(0, import_jsx_runtime44.jsx)("span", { style: { fontWeight: 500, fontSize: fontSize.sm }, children: comment.author.name }), (0, import_jsx_runtime44.jsx)("span", { style: { color: "var(--ggui-color-neutral-500, #6b7280)", fontSize: fontSize.xs }, children: timestamp })] }), (0, import_jsx_runtime44.jsx)("p", { style: { margin: "4px 0 8px", fontSize: fontSize.sm, color: "var(--ggui-color-onContainer, #374151)" }, children: comment.content }), (0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [comment.reactions?.map((reaction) => (0, import_jsx_runtime44.jsxs)("button", { onClick: () => onReaction?.(comment.id, reaction.emoji), style: {
+    return (0, import_jsx_runtime44.jsxs)("div", { style: { marginLeft: depth > 0 ? "40px" : 0 }, children: [(0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", gap: "12px" }, children: [(0, import_jsx_runtime44.jsx)(Avatar, { name: comment.author.name, src: comment.author.avatar, size: "sm" }), (0, import_jsx_runtime44.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [(0, import_jsx_runtime44.jsx)("span", { style: { fontWeight: 500, fontSize: fontSize.sm }, children: comment.author.name }), (0, import_jsx_runtime44.jsx)("span", { style: { color: resolveToneCss("subtle"), fontSize: fontSize.xs }, children: timestamp })] }), (0, import_jsx_runtime44.jsx)("p", { style: { margin: "4px 0 8px", fontSize: fontSize.sm, color: "var(--ggui-color-onContainer, #374151)" }, children: comment.content }), (0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [comment.reactions?.map((reaction) => (0, import_jsx_runtime44.jsxs)("button", { onClick: () => onReaction?.(comment.id, reaction.emoji), style: {
       padding: "2px 8px",
       border: `1px solid var(--ggui-color-outlineVariant, #e5e7eb)`,
       borderRadius: "12px",
@@ -27697,7 +27710,7 @@
     }, children: [reaction.emoji, " ", reaction.count] }, reaction.emoji)), (0, import_jsx_runtime44.jsx)("button", { onClick: () => setShowReplyInput(!showReplyInput), style: {
       background: "none",
       border: "none",
-      color: "var(--ggui-color-neutral-500, #6b7280)",
+      color: resolveToneCss("subtle"),
       fontSize: fontSize.xs,
       cursor: "pointer"
     }, children: "Reply" })] }), showReplyInput && (0, import_jsx_runtime44.jsxs)("div", { style: { marginTop: "12px" }, children: [(0, import_jsx_runtime44.jsx)(TextArea, { value: replyContent, onChange: setReplyContent, placeholder: "Write a reply...", rows: 2 }), (0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", gap: "8px", marginTop: "8px" }, children: [(0, import_jsx_runtime44.jsx)(Button, { size: "sm", onClick: handleSubmitReply, children: "Reply" }), (0, import_jsx_runtime44.jsx)(Button, { size: "sm", variant: "ghost", onClick: () => setShowReplyInput(false), children: "Cancel" })] })] })] })] }), comment.replies?.map((reply) => (0, import_jsx_runtime44.jsx)("div", { style: { marginTop: "16px" }, children: (0, import_jsx_runtime44.jsx)(CommentItem, { comment: reply, onReply, onReaction, depth: depth + 1 }) }, reply.id))] });
@@ -27755,7 +27768,7 @@
       borderBottom: "1px solid var(--ggui-color-outlineVariant, #e5e7eb)",
       cursor: col.sortable ? "pointer" : void 0,
       width: col.width
-    }, onClick: () => col.sortable && onSort?.(col.key, sortKey === col.key && sortDirection === "asc" ? "desc" : "asc"), children: (0, import_jsx_runtime45.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [col.header, col.sortable && sortKey === col.key && (0, import_jsx_runtime45.jsx)(Icon, { name: sortDirection === "asc" ? "chevron-up" : "chevron-down", size: 14 })] }) }, col.key))] }) }), (0, import_jsx_runtime45.jsx)("tbody", { children: loading ? (0, import_jsx_runtime45.jsx)("tr", { children: (0, import_jsx_runtime45.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0), style: { padding: "48px", textAlign: "center" }, children: (0, import_jsx_runtime45.jsx)(Spinner, { size: 24 }) }) }) : data.length === 0 ? (0, import_jsx_runtime45.jsx)("tr", { children: (0, import_jsx_runtime45.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0), style: { padding: "48px", textAlign: "center", color: "var(--ggui-color-neutral-500, #6b7280)" }, children: emptyText }) }) : data.map((row, index) => {
+    }, onClick: () => col.sortable && onSort?.(col.key, sortKey === col.key && sortDirection === "asc" ? "desc" : "asc"), children: (0, import_jsx_runtime45.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [col.header, col.sortable && sortKey === col.key && (0, import_jsx_runtime45.jsx)(Icon, { name: sortDirection === "asc" ? "chevron-up" : "chevron-down", size: 14 })] }) }, col.key))] }) }), (0, import_jsx_runtime45.jsx)("tbody", { children: loading ? (0, import_jsx_runtime45.jsx)("tr", { children: (0, import_jsx_runtime45.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0), style: { padding: "48px", textAlign: "center" }, children: (0, import_jsx_runtime45.jsx)(Spinner, { size: 24 }) }) }) : data.length === 0 ? (0, import_jsx_runtime45.jsx)("tr", { children: (0, import_jsx_runtime45.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0), style: { padding: "48px", textAlign: "center", color: resolveToneCss("subtle") }, children: emptyText }) }) : data.map((row, index) => {
       const key = getRowKey(row, index);
       const isSelected = selectedKeys.includes(key);
       return (0, import_jsx_runtime45.jsxs)("tr", { onClick: () => onRowClick?.(row, index), style: {
@@ -27824,16 +27837,19 @@
         padding: "10px 14px",
         borderRadius: radius.lg,
         backgroundColor: isOwn ? "var(--ggui-color-primary-600, #0284c7)" : "var(--ggui-color-sunken, #f3f4f6)",
-        color: isOwn ? "var(--ggui-color-onPrimary, #ffffff)" : "var(--ggui-color-onSunken, #111827)"
+        color: isOwn ? "var(--ggui-color-onPrimary, #ffffff)" : "var(--ggui-color-onContainer, #111827)"
       }, children: [(0, import_jsx_runtime46.jsx)("p", { style: { margin: 0, fontSize: fontSize.sm }, children: message.content }), (0, import_jsx_runtime46.jsxs)("div", { style: {
         display: "flex",
         alignItems: "center",
         gap: "4px",
         marginTop: "4px",
         fontSize: fontSize.xs,
-        opacity: 0.7
+        // Own messages derive the muted line from onPrimary; the other
+        // party's message now reads at onContainer, so its timestamp
+        // takes the muted tier itself (ggui#1566).
+        ...isOwn ? { opacity: 0.7 } : { color: "var(--ggui-color-onSunken, #52525b)" }
       }, children: [(0, import_jsx_runtime46.jsx)("span", { children: timestamp }), isOwn && message.status && (0, import_jsx_runtime46.jsxs)("span", { children: [message.status === "sending" && "\u2022", message.status === "sent" && "\u2713", message.status === "delivered" && "\u2713\u2713", message.status === "read" && "\u2713\u2713", message.status === "error" && "!"] })] })] })] }, message.id);
-    }), typing && (0, import_jsx_runtime46.jsx)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: (0, import_jsx_runtime46.jsxs)("span", { style: { fontSize: fontSize.xs, color: "var(--ggui-color-neutral-500, #6b7280)" }, children: [typing.name, " is typing..."] }) }), (0, import_jsx_runtime46.jsx)("div", { ref: messagesEndRef })] }), (0, import_jsx_runtime46.jsxs)("div", { style: {
+    }), typing && (0, import_jsx_runtime46.jsx)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: (0, import_jsx_runtime46.jsxs)("span", { style: { fontSize: fontSize.xs, color: resolveToneCss("subtle") }, children: [typing.name, " is typing..."] }) }), (0, import_jsx_runtime46.jsx)("div", { ref: messagesEndRef })] }), (0, import_jsx_runtime46.jsxs)("div", { style: {
       padding: "12px 16px",
       borderTop: `1px solid var(--ggui-color-outlineVariant, #e5e7eb)`,
       display: "flex",
@@ -27841,7 +27857,7 @@
     }, children: [(0, import_jsx_runtime46.jsx)("input", { type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown, placeholder, style: {
       flex: 1,
       padding: "10px 14px",
-      border: `1px solid var(--ggui-color-outline, #d1d5db)`,
+      border: `1px solid var(--ggui-color-controlOutline, var(--ggui-color-outline, #d1d5db))`,
       borderRadius: radius.full,
       fontSize: fontSize.sm,
       outline: "none"
@@ -27953,7 +27969,7 @@
       setIsDragOver(false);
     };
     return (0, import_jsx_runtime48.jsxs)("div", { className, style: { ...style }, children: [(0, import_jsx_runtime48.jsxs)("div", { onClick: () => !disabled && inputRef.current?.click(), onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, style: {
-      border: `2px dashed ${isDragOver ? "var(--ggui-color-primary-400, #38bdf8)" : "var(--ggui-color-outline, #d1d5db)"}`,
+      border: `2px dashed ${isDragOver ? "var(--ggui-color-primary-400, #38bdf8)" : "var(--ggui-color-controlOutline, var(--ggui-color-outline, #d1d5db))"}`,
       borderRadius: radius.lg,
       padding: "32px",
       textAlign: "center",
@@ -27961,7 +27977,7 @@
       cursor: disabled ? "not-allowed" : "pointer",
       transition: "all 0.2s",
       opacity: disabled ? 0.5 : 1
-    }, children: [(0, import_jsx_runtime48.jsx)("input", { ref: inputRef, type: "file", accept, multiple, onChange: (e) => handleFiles(e.target.files), disabled, style: { display: "none" } }), (0, import_jsx_runtime48.jsx)(Icon, { name: "plus", size: 32, tone: "subtle" }), (0, import_jsx_runtime48.jsx)("p", { style: { margin: "12px 0 4px", color: "var(--ggui-color-onContainer, #374151)", fontSize: fontSize.sm }, children: dragDrop ? "Drag and drop files here, or click to browse" : "Click to browse files" }), (0, import_jsx_runtime48.jsxs)("p", { style: { margin: 0, color: "var(--ggui-color-neutral-500, #6b7280)", fontSize: fontSize.xs }, children: [accept && `Accepted: ${accept}`, maxSize && ` \u2022 Max size: ${formatFileSize(maxSize)}`, maxFiles && ` \u2022 Max files: ${maxFiles}`] })] }), files.length > 0 && (0, import_jsx_runtime48.jsx)("div", { style: { marginTop: "16px", display: "flex", flexDirection: "column", gap: "8px" }, children: files.map((file) => (0, import_jsx_runtime48.jsxs)("div", { style: {
+    }, children: [(0, import_jsx_runtime48.jsx)("input", { ref: inputRef, type: "file", accept, multiple, onChange: (e) => handleFiles(e.target.files), disabled, style: { display: "none" } }), (0, import_jsx_runtime48.jsx)(Icon, { name: "plus", size: 32, tone: "subtle" }), (0, import_jsx_runtime48.jsx)("p", { style: { margin: "12px 0 4px", color: "var(--ggui-color-onContainer, #374151)", fontSize: fontSize.sm }, children: dragDrop ? "Drag and drop files here, or click to browse" : "Click to browse files" }), (0, import_jsx_runtime48.jsxs)("p", { style: { margin: 0, color: resolveToneCss("subtle"), fontSize: fontSize.xs }, children: [accept && `Accepted: ${accept}`, maxSize && ` \u2022 Max size: ${formatFileSize(maxSize)}`, maxFiles && ` \u2022 Max files: ${maxFiles}`] })] }), files.length > 0 && (0, import_jsx_runtime48.jsx)("div", { style: { marginTop: "16px", display: "flex", flexDirection: "column", gap: "8px" }, children: files.map((file) => (0, import_jsx_runtime48.jsxs)("div", { style: {
       display: "flex",
       alignItems: "center",
       gap: "12px",
@@ -27976,7 +27992,7 @@
       whiteSpace: "nowrap",
       overflow: "hidden",
       textOverflow: "ellipsis"
-    }, children: file.name }), (0, import_jsx_runtime48.jsxs)("p", { style: { margin: "2px 0 0", fontSize: fontSize.xs, color: "var(--ggui-color-neutral-500, #6b7280)" }, children: [formatFileSize(file.size), file.error && (0, import_jsx_runtime48.jsx)("span", { style: { color: "var(--ggui-color-error-500, #ef4444)", marginLeft: "8px" }, children: file.error })] }), file.status === "uploading" && file.progress !== void 0 && (0, import_jsx_runtime48.jsx)(Progress, { value: file.progress, size: "sm", style: { marginTop: "8px" } })] }), (0, import_jsx_runtime48.jsx)(Button, { variant: "ghost", size: "sm", onClick: () => onFileRemove?.(file.id), children: (0, import_jsx_runtime48.jsx)(Icon, { name: "x", size: 16 }) })] }, file.id)) })] });
+    }, children: file.name }), (0, import_jsx_runtime48.jsxs)("p", { style: { margin: "2px 0 0", fontSize: fontSize.xs, color: resolveToneCss("subtle") }, children: [formatFileSize(file.size), file.error && (0, import_jsx_runtime48.jsx)("span", { style: { color: "var(--ggui-color-error-500, #ef4444)", marginLeft: "8px" }, children: file.error })] }), file.status === "uploading" && file.progress !== void 0 && (0, import_jsx_runtime48.jsx)(Progress, { value: file.progress, size: "sm", style: { marginTop: "8px" } })] }), (0, import_jsx_runtime48.jsx)(Button, { variant: "ghost", size: "sm", onClick: () => onFileRemove?.(file.id), children: (0, import_jsx_runtime48.jsx)(Icon, { name: "x", size: 16 }) })] }, file.id)) })] });
   }
 
   // ../design/dist/compositions/NotificationCenter.js
@@ -27994,7 +28010,10 @@
       display: "flex",
       gap: "12px",
       padding: "12px",
-      backgroundColor: notification.read ? "transparent" : "var(--ggui-color-primaryContainer, #f0f9ff)",
+      // Unread is carried by the dot and the title's weight; the row takes the
+      // ground its muted text is measured on (ggui#1567), not a raised accent
+      // ground where that text falls under AA in dark themes.
+      backgroundColor: notification.read ? "transparent" : "var(--ggui-color-sunken, #f4f4f5)",
       borderRadius: radius.md,
       transition: "background-color 0.15s"
     }, children: [(0, import_jsx_runtime49.jsx)("div", { style: {
@@ -28020,7 +28039,7 @@
       margin: "4px 0 0",
       color: "var(--ggui-color-onSunken, #4b5563)",
       fontSize: fontSize.xs
-    }, children: notification.message }), (0, import_jsx_runtime49.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginTop: "8px" }, children: [(0, import_jsx_runtime49.jsx)("span", { style: { color: "var(--ggui-color-neutral-400, #9ca3af)", fontSize: fontSize.xs }, children: timestamp }), !notification.read && (0, import_jsx_runtime49.jsx)("button", { onClick: () => onMarkAsRead?.(notification.id), style: {
+    }, children: notification.message }), (0, import_jsx_runtime49.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginTop: "8px" }, children: [(0, import_jsx_runtime49.jsx)("span", { style: { color: resolveToneCss("subtle"), fontSize: fontSize.xs }, children: timestamp }), !notification.read && (0, import_jsx_runtime49.jsx)("button", { onClick: () => onMarkAsRead?.(notification.id), style: {
       background: "none",
       border: "none",
       padding: 0,
@@ -28055,7 +28074,7 @@
       color: "var(--ggui-color-onPrimaryContainer, #0369a1)",
       fontSize: fontSize.xs,
       fontWeight: fontWeight.medium
-    }, children: unreadCount })] }), (0, import_jsx_runtime49.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [unreadCount > 0 && (0, import_jsx_runtime49.jsx)(Button, { variant: "ghost", size: "sm", onClick: onMarkAllAsRead, children: "Mark all read" }), notifications.length > 0 && (0, import_jsx_runtime49.jsx)(Button, { variant: "ghost", size: "sm", onClick: onClearAll, children: "Clear all" })] })] }), (0, import_jsx_runtime49.jsx)("div", { style: { flex: 1, overflowY: "auto", padding: "8px" }, children: loading ? (0, import_jsx_runtime49.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "32px" }, children: (0, import_jsx_runtime49.jsx)(Spinner, { size: 24 }) }) : notifications.length === 0 ? (0, import_jsx_runtime49.jsx)("div", { style: { textAlign: "center", padding: "32px", color: "var(--ggui-color-neutral-500, #6b7280)" }, children: emptyText }) : (0, import_jsx_runtime49.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: notifications.map((notification) => (0, import_jsx_runtime49.jsx)(NotificationItem, { notification, onMarkAsRead, onDismiss }, notification.id)) }) })] });
+    }, children: unreadCount })] }), (0, import_jsx_runtime49.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [unreadCount > 0 && (0, import_jsx_runtime49.jsx)(Button, { variant: "ghost", size: "sm", onClick: onMarkAllAsRead, children: "Mark all read" }), notifications.length > 0 && (0, import_jsx_runtime49.jsx)(Button, { variant: "ghost", size: "sm", onClick: onClearAll, children: "Clear all" })] })] }), (0, import_jsx_runtime49.jsx)("div", { style: { flex: 1, overflowY: "auto", padding: "8px" }, children: loading ? (0, import_jsx_runtime49.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "32px" }, children: (0, import_jsx_runtime49.jsx)(Spinner, { size: 24 }) }) : notifications.length === 0 ? (0, import_jsx_runtime49.jsx)("div", { style: { textAlign: "center", padding: "32px", color: resolveToneCss("subtle") }, children: emptyText }) : (0, import_jsx_runtime49.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: notifications.map((notification) => (0, import_jsx_runtime49.jsx)(NotificationItem, { notification, onMarkAsRead, onDismiss }, notification.id)) }) })] });
   }
 
   // ../design/dist/compositions/Modal.js
@@ -28245,11 +28264,11 @@
       fontSize: fontSize.base,
       outline: "none",
       backgroundColor: "transparent"
-    } })] }) }), (0, import_jsx_runtime51.jsx)("div", { style: { flex: 1, overflowY: "auto", padding: "8px" }, children: loading ? (0, import_jsx_runtime51.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "32px" }, children: (0, import_jsx_runtime51.jsx)(Spinner, { size: 24 }) }) : flatCommands.length === 0 ? (0, import_jsx_runtime51.jsx)("div", { style: { textAlign: "center", padding: "32px", color: "var(--ggui-color-neutral-500, #6b7280)" }, children: "No commands found" }) : Array.from(filteredCommands.entries()).map(([group, cmds]) => (0, import_jsx_runtime51.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, import_jsx_runtime51.jsx)("div", { style: {
+    } })] }) }), (0, import_jsx_runtime51.jsx)("div", { style: { flex: 1, overflowY: "auto", padding: "8px" }, children: loading ? (0, import_jsx_runtime51.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "32px" }, children: (0, import_jsx_runtime51.jsx)(Spinner, { size: 24 }) }) : flatCommands.length === 0 ? (0, import_jsx_runtime51.jsx)("div", { style: { textAlign: "center", padding: "32px", color: resolveToneCss("subtle") }, children: "No commands found" }) : Array.from(filteredCommands.entries()).map(([group, cmds]) => (0, import_jsx_runtime51.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, import_jsx_runtime51.jsx)("div", { style: {
       padding: "8px 12px",
       fontSize: fontSize.xs,
       fontWeight: fontWeight.semibold,
-      color: "var(--ggui-color-neutral-500, #6b7280)",
+      color: resolveToneCss("subtle"),
       textTransform: "uppercase",
       letterSpacing: "0.05em"
     }, children: group }), cmds.map((cmd) => {
@@ -28272,12 +28291,12 @@
         color: cmd.disabled ? "var(--ggui-color-neutral-400, #9ca3af)" : "var(--ggui-color-onElevated, #111827)",
         textAlign: "left",
         cursor: cmd.disabled ? "not-allowed" : "pointer"
-      }, children: [cmd.icon && (0, import_jsx_runtime51.jsx)("span", { style: { display: "flex", color: "var(--ggui-color-neutral-500, #6b7280)" }, children: cmd.icon }), (0, import_jsx_runtime51.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime51.jsx)("div", { style: { fontSize: fontSize.sm }, children: cmd.label }), cmd.description && (0, import_jsx_runtime51.jsx)("div", { style: { fontSize: fontSize.xs, color: "var(--ggui-color-neutral-500, #6b7280)" }, children: cmd.description })] }), cmd.shortcut && (0, import_jsx_runtime51.jsx)("kbd", { style: {
+      }, children: [cmd.icon && (0, import_jsx_runtime51.jsx)("span", { style: { display: "flex", color: resolveToneCss("subtle") }, children: cmd.icon }), (0, import_jsx_runtime51.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime51.jsx)("div", { style: { fontSize: fontSize.sm }, children: cmd.label }), cmd.description && (0, import_jsx_runtime51.jsx)("div", { style: { fontSize: fontSize.xs, color: resolveToneCss("subtle") }, children: cmd.description })] }), cmd.shortcut && (0, import_jsx_runtime51.jsx)("kbd", { style: {
         padding: "2px 6px",
         backgroundColor: "var(--ggui-color-sunken, #f3f4f6)",
         borderRadius: radius.sm,
         fontSize: fontSize.xs,
-        color: "var(--ggui-color-neutral-500, #6b7280)",
+        color: resolveToneCss("subtle"),
         fontFamily: "inherit"
       }, children: cmd.shortcut })] }, cmd.id);
     })] }, group)) }), (0, import_jsx_runtime51.jsxs)("div", { style: {
@@ -28287,7 +28306,7 @@
       alignItems: "center",
       gap: "16px",
       fontSize: fontSize.xs,
-      color: "var(--ggui-color-neutral-500, #6b7280)"
+      color: resolveToneCss("subtle")
     }, children: [(0, import_jsx_runtime51.jsx)("span", { children: "\u2191\u2193 Navigate" }), (0, import_jsx_runtime51.jsx)("span", { children: "\u21B5 Select" }), (0, import_jsx_runtime51.jsx)("span", { children: "Esc Close" })] })] })] });
   }
 
@@ -28340,20 +28359,20 @@
       borderTop: "1px solid var(--ggui-color-outlineVariant, #e5e7eb)"
     }, children: [bottomText && (0, import_jsx_runtime52.jsx)("span", { style: {
       fontSize: fontSize.sm,
-      color: "var(--ggui-color-neutral-500, #6b7280)",
+      color: resolveToneCss("subtle"),
       lineHeight: lineHeight.normal
     }, children: bottomText }), (0, import_jsx_runtime52.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "20px" }, children: [socialLinks?.map((social, idx) => (0, import_jsx_runtime52.jsx)("a", { href: social.href, "aria-label": social.label, style: {
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      color: "var(--ggui-color-neutral-500, #6b7280)",
+      color: resolveToneCss("subtle"),
       transition: "color 0.15s"
     }, children: social.icon }, idx)), bottomLinks?.map((link, idx) => (0, import_jsx_runtime52.jsx)("a", { href: link.href, onClick: link.onClick ? (e) => {
       e.preventDefault();
       link.onClick?.();
     } : void 0, style: {
       fontSize: fontSize.sm,
-      color: "var(--ggui-color-neutral-500, #6b7280)",
+      color: resolveToneCss("subtle"),
       textDecoration: "none",
       transition: "color 0.15s"
     }, children: link.label }, idx))] })] })] });
@@ -28436,7 +28455,7 @@
       fontWeight: fontWeight.semibold,
       color: showOverlay ? "#ffffff" : "var(--ggui-color-onContainer, #374151)",
       backgroundColor: "transparent",
-      border: `1px solid ${showOverlay ? "rgba(255,255,255,0.3)" : "var(--ggui-color-outline, #d1d5db)"}`,
+      border: `1px solid ${showOverlay ? "rgba(255,255,255,0.3)" : "var(--ggui-color-controlOutline, var(--ggui-color-outline, #d1d5db))"}`,
       borderRadius: "8px",
       cursor: "pointer",
       transition: "all 0.15s",
@@ -29517,6 +29536,7 @@
         const result = validateEnvelope(actionSpec, envelope);
         if (!result.valid) {
           opts.onViolation(new ClientContractViolationError("outbound-action", result.violations));
+          opts.onDispatchRefused?.({ actionName, violations: result.violations });
           return;
         }
         if (isOneShot && !spentOneShots.has(actionName)) {
@@ -29579,6 +29599,8 @@
     version: 2,
     tokens: [
       "--ggui-color-container",
+      "--ggui-color-controlAccentOutline",
+      "--ggui-color-controlOutline",
       "--ggui-color-elevated",
       "--ggui-color-error",
       "--ggui-color-error-100",
@@ -30210,8 +30232,10 @@
       // paper
       sunken: { $value: "#292929", $type: "color" },
       // ink
-      onSunken: { $value: "#d9d9d9", $type: "color" },
-      // chrome
+      // Muted text, and text on sunken grounds (ggui#1566): the kit's dark muted
+      // value, 6.57:1 on container and 5.80:1 on sunken. Light's onSunken is ink-3,
+      // the same tier, so dark now reads as light already does.
+      onSunken: { $value: "#a3a3a9", $type: "color" },
       container: { $value: "#1f1f1f", $type: "color" },
       // ink
       onContainer: { $value: "#f4f3ed", $type: "color" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ggui-ai/ui-visual-tester",
-  "version": "0.25.0",
+  "version": "0.27.0",
   "description": "Behavioral validator for ggui-generated component code. Renders a component in real Chromium via Playwright, clicks each action declared in its contract, and verifies the action actually does something — mutating bound state or dispatching to the agent. Catches buttons wired to no-op handlers that structural validators miss. Playwright is an optional peer dependency, injected by the caller.",
   "keywords": [
     "ggui",
@@ -53,9 +53,9 @@
   "dependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@ggui-ai/protocol": "0.25.0",
-    "@ggui-ai/wire": "0.25.0",
-    "@ggui-ai/design": "0.25.0"
+    "@ggui-ai/design": "0.27.0",
+    "@ggui-ai/protocol": "0.27.0",
+    "@ggui-ai/wire": "0.27.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.60.0",