@ggui-ai/ui-visual-tester 0.15.0 → 0.16.0

package/fixture/fixture-runtime.js

@@ -20069,22 +20069,23 @@
   function resolveToneCss(tone) {
     switch (tone) {
       case "default":
-        return "var(--ggui-color-onSurface, #18181b)";
+        return "var(--ggui-color-onContainer, #18181b)";
       case "muted":
-        return "var(--ggui-color-onSurfaceVariant, #52525b)";
+        return "var(--ggui-color-onSunken, #52525b)";
       case "subtle":
         return "var(--ggui-color-neutral-500, #71717a)";
       case "emphasized":
         return "var(--ggui-color-primary-700, #0369a1)";
       case "loud":
         return "var(--ggui-color-primary-500, #0ea5e9)";
+      case "error":
+        return `var(--ggui-color-error, var(--ggui-color-error-500, ${SEMANTIC_TONE_FALLBACK.error}))`;
       case "success":
       case "warning":
-      case "error":
       case "info":
         return `var(--ggui-color-${tone}-500, ${SEMANTIC_TONE_FALLBACK[tone]})`;
       case "inverse":
-        return "var(--ggui-color-surface, #ffffff)";
+        return "var(--ggui-color-container, #ffffff)";
       case "inherit":
         return "inherit";
     }
@@ -20098,14 +20099,15 @@
   function resolveSurfaceCss(surface) {
     switch (surface) {
       case "default":
+        return "var(--ggui-color-container, #ffffff)";
       case "elevated":
-        return "var(--ggui-color-surface, #ffffff)";
+        return "var(--ggui-color-elevated, #ffffff)";
       case "sunken":
-        return "var(--ggui-color-surfaceVariant, #f4f4f5)";
+        return "var(--ggui-color-sunken, #f4f4f5)";
       case "accent":
         return "var(--ggui-color-primary-50, #f0f9ff)";
       case "inverted":
-        return "var(--ggui-color-onSurface, #18181b)";
+        return "var(--ggui-color-onContainer, #18181b)";
       case "transparent":
         return "transparent";
     }
@@ -20348,7 +20350,7 @@
     "4xl": 1.25
   };
   function Text({ children, size = "base", weight = "normal", caps = false, tone, align, truncate, is = "p", id, htmlFor, style, className }) {
-    const resolvedColor = tone ? resolveToneCss(tone) : "var(--ggui-color-onSurface, #18181b)";
+    const resolvedColor = tone ? resolveToneCss(tone) : "var(--ggui-color-onContainer, #18181b)";
     const textStyle = {
       fontSize: sizeMap[size],
       fontWeight: weightMap[weight],
@@ -20454,10 +20456,25 @@
   };
 
   // ../design/dist/primitives/Heading.js
+  var HEADING_SIZE = {
+    h1: "var(--ggui-font-size-4xl, 36px)",
+    h2: "var(--ggui-font-size-3xl, 30px)",
+    h3: "var(--ggui-font-size-2xl, 24px)",
+    h4: "var(--ggui-font-size-xl, 20px)",
+    h5: "var(--ggui-font-size-lg, 18px)",
+    h6: "var(--ggui-font-size-base, 16px)"
+  };
   function Heading({ children, level = 2, tone, align, style, className }) {
     const tag = `h${level}`;
-    const headingStyle = headingStyles[tag] || headingStyles.h2;
-    const resolvedColor = tone ? resolveToneCss(tone) : "var(--ggui-color-onSurface, #18181b)";
+    const fallback = headingStyles[tag] || headingStyles.h2;
+    const headingStyle = {
+      fontSize: HEADING_SIZE[tag],
+      fontWeight: `var(--ggui-font-weight-heading, ${fallback.fontWeight})`,
+      fontFamily: "var(--ggui-font-family-heading, var(--ggui-font-family-sans, inherit))",
+      lineHeight: fallback.lineHeight,
+      letterSpacing: `var(--ggui-letter-spacing-heading, ${fallback.letterSpacing})`
+    };
+    const resolvedColor = tone ? resolveToneCss(tone) : "var(--ggui-color-onContainer, #18181b)";
     return (0, import_react4.createElement)(tag, {
       className,
       style: {
@@ -20541,8 +20558,8 @@
       border: "none"
     },
     secondary: {
-      backgroundColor: "var(--ggui-color-surfaceVariant, #f4f4f5)",
-      color: "var(--ggui-color-onSurfaceVariant, #52525b)",
+      backgroundColor: "var(--ggui-color-sunken, #f4f4f5)",
+      color: "var(--ggui-color-onSunken, #52525b)",
       border: "none"
     },
     outline: {
@@ -20552,7 +20569,7 @@
     },
     ghost: {
       backgroundColor: "transparent",
-      color: "var(--ggui-color-onSurfaceVariant, #52525b)",
+      color: "var(--ggui-color-onSunken, #52525b)",
       border: "none"
     },
     danger: {
@@ -20613,19 +20630,19 @@
     }, children: [label && (0, import_jsx_runtime7.jsxs)("label", { htmlFor: inputId, style: {
       fontSize: "var(--ggui-font-size-sm, 14px)",
       fontWeight: "var(--ggui-font-weight-medium, 500)",
-      color: "var(--ggui-color-onSurfaceVariant, #52525b)"
+      color: "var(--ggui-color-onSunken, #52525b)"
     }, children: [label, required && (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": "true", style: { color: "var(--ggui-color-error-500, #ef4444)", marginLeft: "2px" }, children: "*" })] }), (0, import_jsx_runtime7.jsx)("input", { id: inputId, type, placeholder, value, onChange: (e) => onChange?.(e.target.value), disabled, required, "aria-invalid": hasError || void 0, "aria-describedby": hasMessage ? messageId : void 0, style: {
       ...sizeStyles2[size],
       width: "100%",
       borderRadius: "var(--ggui-shape-radius-md, 8px)",
       border: `1px solid ${hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-outline, #d4d4d8)"}`,
-      backgroundColor: disabled ? "var(--ggui-color-surface, #fafafa)" : "var(--ggui-color-surface, #ffffff)",
-      color: "var(--ggui-color-onSurface, #18181b)",
+      backgroundColor: disabled ? "var(--ggui-color-sunken, #fafafa)" : "var(--ggui-color-sunken, #ffffff)",
+      color: "var(--ggui-color-onContainer, #18181b)",
       transition: `border-color ${duration.normal} ${easing.easeInOut}, box-shadow ${duration.normal} ${easing.easeInOut}`,
       boxSizing: "border-box"
     }, ...rest }), hasMessage && (0, import_jsx_runtime7.jsx)("span", { id: messageId, role: hasError ? "alert" : void 0, style: {
       fontSize: "var(--ggui-font-size-xs, 12px)",
-      color: hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-onSurfaceVariant, #52525b)"
+      color: hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-onSunken, #52525b)"
     }, children: error2 || helperText })] });
   }
 
@@ -20647,14 +20664,14 @@
     }, children: [label && (0, import_jsx_runtime8.jsxs)("label", { htmlFor: textareaId, style: {
       fontSize: "var(--ggui-font-size-sm, 14px)",
       fontWeight: "var(--ggui-font-weight-medium, 500)",
-      color: "var(--ggui-color-onSurfaceVariant, #52525b)"
+      color: "var(--ggui-color-onSunken, #52525b)"
     }, children: [label, required && (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": "true", style: { color: "var(--ggui-color-error-500, #ef4444)", marginLeft: "2px" }, children: "*" })] }), (0, import_jsx_runtime8.jsx)("textarea", { id: textareaId, placeholder, value, onChange: (e) => onChange?.(e.target.value), rows, disabled, required, maxLength, "aria-invalid": hasError || void 0, "aria-describedby": hasMessage ? messageId : void 0, style: {
       padding: "10px 12px",
       width: "100%",
       borderRadius: "var(--ggui-shape-radius-md, 8px)",
       border: `1px solid ${hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-outline, #d4d4d8)"}`,
-      backgroundColor: disabled ? "var(--ggui-color-surface, #fafafa)" : "var(--ggui-color-surface, #ffffff)",
-      color: "var(--ggui-color-onSurface, #18181b)",
+      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)",
       fontFamily: "inherit",
       transition: `border-color ${duration.normal} ${easing.easeInOut}, box-shadow ${duration.normal} ${easing.easeInOut}`,
@@ -20662,10 +20679,10 @@
       resize: autoResize ? "none" : "vertical"
     }, ...rest }), (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", justifyContent: "space-between" }, children: [hasMessage && (0, import_jsx_runtime8.jsx)("span", { id: messageId, role: hasError ? "alert" : void 0, style: {
       fontSize: "var(--ggui-font-size-xs, 12px)",
-      color: hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-onSurfaceVariant, #52525b)"
+      color: hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-onSunken, #52525b)"
     }, children: error2 || helperText }), showCount && maxLength && (0, import_jsx_runtime8.jsxs)("span", { style: {
       fontSize: "var(--ggui-font-size-xs, 12px)",
-      color: "var(--ggui-color-onSurfaceVariant, #52525b)",
+      color: "var(--ggui-color-onSunken, #52525b)",
       marginLeft: "auto"
     }, children: [charCount, "/", maxLength] })] })] });
   }
@@ -20687,14 +20704,14 @@
     return (0, import_jsx_runtime9.jsxs)("div", { className, style: { display: "flex", flexDirection: "column", gap: "var(--ggui-spacing-1, 4px)", ...style }, children: [label && (0, import_jsx_runtime9.jsxs)("label", { htmlFor: selectId, style: {
       fontSize: "var(--ggui-font-size-sm, 14px)",
       fontWeight: "var(--ggui-font-weight-medium, 500)",
-      color: "var(--ggui-color-onSurfaceVariant, #52525b)"
+      color: "var(--ggui-color-onSunken, #52525b)"
     }, children: [label, required && (0, import_jsx_runtime9.jsx)("span", { "aria-hidden": "true", style: { color: "var(--ggui-color-error-500, #ef4444)", marginLeft: "2px" }, children: "*" })] }), (0, import_jsx_runtime9.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: {
       ...sizeStyles3[size],
       width: "100%",
       borderRadius: "var(--ggui-shape-radius-md, 8px)",
       border: `1px solid ${hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-outline, #d4d4d8)"}`,
-      backgroundColor: disabled ? "var(--ggui-color-surface, #fafafa)" : "var(--ggui-color-surface, #ffffff)",
-      color: value ? "var(--ggui-color-onSurface, #18181b)" : "var(--ggui-color-onSurfaceVariant, #52525b)",
+      backgroundColor: disabled ? "var(--ggui-color-sunken, #fafafa)" : "var(--ggui-color-sunken, #ffffff)",
+      color: value ? "var(--ggui-color-onContainer, #18181b)" : "var(--ggui-color-onSunken, #52525b)",
       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")`,
@@ -20705,7 +20722,7 @@
       transition: `border-color ${duration.normal} ${easing.easeInOut}, box-shadow ${duration.normal} ${easing.easeInOut}`
     }, ...rest, children: [placeholder && (0, import_jsx_runtime9.jsx)("option", { value: "", disabled: true, children: placeholder }), options.map((opt) => (0, import_jsx_runtime9.jsx)("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))] }), hasMessage && (0, import_jsx_runtime9.jsx)("span", { id: messageId, role: hasError ? "alert" : void 0, style: {
       fontSize: "var(--ggui-font-size-xs, 12px)",
-      color: hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-onSurfaceVariant, #52525b)"
+      color: hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-onSunken, #52525b)"
     }, children: error2 || helperText })] });
   }
 
@@ -20740,7 +20757,7 @@
       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)"}`,
-      backgroundColor: checked || indeterminate ? "var(--ggui-color-primary-600, #0284c7)" : "var(--ggui-color-surface, #ffffff)",
+      backgroundColor: checked || indeterminate ? "var(--ggui-color-primary-600, #0284c7)" : "var(--ggui-color-sunken, #ffffff)",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
@@ -20748,10 +20765,10 @@
     }, children: (checked || indeterminate) && (0, import_jsx_runtime10.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_runtime10.jsx)("path", { d: "M2.5 6H9.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) : (0, import_jsx_runtime10.jsx)("path", { d: "M2.5 6L5 8.5L9.5 3.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }), (label || description) && (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [label && (0, import_jsx_runtime10.jsx)("span", { style: {
       fontSize: "var(--ggui-font-size-sm, 14px)",
       fontWeight: "var(--ggui-font-weight-medium, 500)",
-      color: "var(--ggui-color-onSurfaceVariant, #52525b)"
+      color: "var(--ggui-color-onSunken, #52525b)"
     }, children: label }), description && (0, import_jsx_runtime10.jsx)("span", { style: {
       fontSize: "var(--ggui-font-size-xs, 12px)",
-      color: "var(--ggui-color-onSurfaceVariant, #52525b)"
+      color: "var(--ggui-color-onSunken, #52525b)"
     }, children: description })] })] });
   }
 
@@ -20803,7 +20820,7 @@
     } }) }), label && (0, import_jsx_runtime11.jsx)("span", { style: {
       fontSize: "var(--ggui-font-size-sm, 14px)",
       fontWeight: "var(--ggui-font-weight-medium, 500)",
-      color: "var(--ggui-color-onSurfaceVariant, #52525b)"
+      color: "var(--ggui-color-onSunken, #52525b)"
     }, children: label })] });
   }
 
@@ -20819,7 +20836,7 @@
     return (0, import_jsx_runtime12.jsxs)("div", { role: "radiogroup", "aria-labelledby": label ? labelId : void 0, "aria-describedby": hasError ? errorId : void 0, className, style: { display: "flex", flexDirection: "column", gap: "var(--ggui-spacing-2, 8px)", ...style }, children: [label && (0, import_jsx_runtime12.jsx)("span", { id: labelId, style: {
       fontSize: "var(--ggui-font-size-sm, 14px)",
       fontWeight: "var(--ggui-font-weight-medium, 500)",
-      color: "var(--ggui-color-onSurfaceVariant, #52525b)"
+      color: "var(--ggui-color-onSunken, #52525b)"
     }, children: label }), (0, import_jsx_runtime12.jsx)("div", { style: {
       display: "flex",
       flexDirection: direction === "vertical" ? "column" : "row",
@@ -20852,7 +20869,7 @@
         height: "18px",
         borderRadius: "var(--ggui-shape-radius-full, 9999px)",
         border: `2px solid ${isSelected ? "var(--ggui-color-primary-600, #0284c7)" : "var(--ggui-color-outline, #d4d4d8)"}`,
-        backgroundColor: "var(--ggui-color-surface, #ffffff)",
+        backgroundColor: "var(--ggui-color-sunken, #ffffff)",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
@@ -20865,10 +20882,10 @@
       } }) })] }), (0, import_jsx_runtime12.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [(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-onSurfaceVariant, #52525b)"
+        color: "var(--ggui-color-onSunken, #52525b)"
       }, children: option.label }), option.description && (0, import_jsx_runtime12.jsx)("span", { style: {
         fontSize: "var(--ggui-font-size-xs, 12px)",
-        color: "var(--ggui-color-onSurfaceVariant, #52525b)"
+        color: "var(--ggui-color-onSunken, #52525b)"
       }, children: option.description })] })] }, option.value);
     }) }), error2 && (0, import_jsx_runtime12.jsx)("span", { id: errorId, role: "alert", style: {
       fontSize: "var(--ggui-font-size-xs, 12px)",
@@ -20887,7 +20904,7 @@
     return (0, import_jsx_runtime13.jsxs)("div", { className, style: { display: "flex", flexDirection: "column", gap: "var(--ggui-spacing-2, 8px)", ...style }, children: [(label || showValue) && (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [label && (0, import_jsx_runtime13.jsx)("span", { id: labelId, style: {
       fontSize: "var(--ggui-font-size-sm, 14px)",
       fontWeight: "var(--ggui-font-weight-medium, 500)",
-      color: "var(--ggui-color-onSurfaceVariant, #52525b)"
+      color: "var(--ggui-color-onSunken, #52525b)"
     }, children: label }), showValue && (0, import_jsx_runtime13.jsx)("span", { style: {
       fontSize: "var(--ggui-font-size-sm, 14px)",
       fontWeight: "var(--ggui-font-weight-medium, 500)",
@@ -20931,8 +20948,8 @@
   var import_jsx_runtime14 = __toESM(require_jsx_runtime(), 1);
   var variantStyles2 = {
     default: {
-      backgroundColor: "var(--ggui-color-surfaceVariant, #f4f4f5)",
-      color: "var(--ggui-color-onSurfaceVariant, #52525b)"
+      backgroundColor: "var(--ggui-color-sunken, #f4f4f5)",
+      color: "var(--ggui-color-onSunken, #52525b)"
     },
     primary: {
       backgroundColor: "var(--ggui-color-primary-100, #e0f2fe)",
@@ -20940,7 +20957,7 @@
     },
     secondary: {
       backgroundColor: "var(--ggui-color-outlineVariant, #e4e4e7)",
-      color: "var(--ggui-color-onSurface, #18181b)"
+      color: "var(--ggui-color-onContainer, #18181b)"
     },
     success: {
       backgroundColor: "var(--ggui-color-success-100, #dcfce7)",
@@ -20957,6 +20974,11 @@
     info: {
       backgroundColor: "var(--ggui-color-info-100, #cffafe)",
       color: "var(--ggui-color-info-700, #0e7490)"
+    },
+    // The second accent (ggui#987 §2.1): the tertiary container pair.
+    tertiary: {
+      backgroundColor: "var(--ggui-color-tertiaryContainer, #ccfbf1)",
+      color: "var(--ggui-color-onTertiaryContainer, #134e4a)"
     }
   };
   var sizeStyles4 = {
@@ -20991,7 +21013,7 @@
       width: resolvedWidth,
       height: resolvedHeight,
       borderRadius: isCircle ? "9999px" : resolveRadius(radius2),
-      backgroundColor: "var(--ggui-color-surfaceVariant, #f4f4f5)",
+      backgroundColor: "var(--ggui-color-sunken, #f4f4f5)",
       animation: "ggui-skeleton-pulse 1.5s ease-in-out infinite",
       ...style
     };
@@ -21131,10 +21153,10 @@
     const height = sizeHeights[size];
     const barColor = variantColors[variant];
     const accessibleName = label ?? "Progress";
-    return (0, import_jsx_runtime18.jsxs)("div", { className, style: { display: "flex", flexDirection: "column", gap: "var(--ggui-spacing-1, 4px)", ...style }, children: [showLabel && (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [(0, import_jsx_runtime18.jsx)("span", { style: { fontSize: "var(--ggui-font-size-sm, 14px)", color: "var(--ggui-color-onSurfaceVariant, #52525b)" }, children: accessibleName }), (0, import_jsx_runtime18.jsxs)("span", { style: {
+    return (0, import_jsx_runtime18.jsxs)("div", { className, style: { display: "flex", flexDirection: "column", gap: "var(--ggui-spacing-1, 4px)", ...style }, children: [showLabel && (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [(0, import_jsx_runtime18.jsx)("span", { style: { fontSize: "var(--ggui-font-size-sm, 14px)", color: "var(--ggui-color-onSunken, #52525b)" }, children: accessibleName }), (0, import_jsx_runtime18.jsxs)("span", { style: {
       fontSize: "var(--ggui-font-size-sm, 14px)",
       fontWeight: "var(--ggui-font-weight-medium, 500)",
-      color: "var(--ggui-color-onSurface, #18181b)"
+      color: "var(--ggui-color-onContainer, #18181b)"
     }, children: [Math.round(percentage), "%"] })] }), (0, import_jsx_runtime18.jsxs)("div", { role: "progressbar", "aria-valuenow": indeterminate ? void 0 : value, "aria-valuemin": 0, "aria-valuemax": max, "aria-label": accessibleName, style: {
       width: "100%",
       height,
@@ -21176,7 +21198,7 @@
         width: resolveSize2(width) || "100%",
         height: resolveSize2(height) || "auto",
         borderRadius: resolveRadius(radius2),
-        backgroundColor: "var(--ggui-color-surfaceVariant, #f4f4f5)",
+        backgroundColor: "var(--ggui-color-sunken, #f4f4f5)",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
@@ -25225,7 +25247,7 @@
   // ../design/dist/primitives/Link.js
   var import_jsx_runtime21 = __toESM(require_jsx_runtime(), 1);
   function Link({ children, href, external, tone, underline = "hover", style, className, ...rest }) {
-    const linkColor = tone ? resolveToneCss(tone) : "var(--ggui-color-primary-600, #0284c7)";
+    const linkColor = tone ? resolveToneCss(tone) : "var(--ggui-color-link, var(--ggui-color-primary-600, #0284c7))";
     const underlineStyle = {
       always: "underline",
       hover: "none",
@@ -25321,10 +25343,10 @@
       top: coords.top,
       left: coords.left,
       transform: getTransform(),
-      backgroundColor: "var(--ggui-color-onSurface, #18181b)",
-      // Inverse pair: text on the inverted (onSurface) ground is
-      // the surface color — white was only right for light themes.
-      color: "var(--ggui-color-surface, #ffffff)",
+      // The inverse container pair (ggui#987 §2.1): a tooltip is
+      // legible by inversion, not by lift — never `elevated`.
+      backgroundColor: "var(--ggui-color-onContainer, #18181b)",
+      color: "var(--ggui-color-container, #ffffff)",
       padding: "6px 10px",
       borderRadius: "var(--ggui-shape-radius-md, 8px)",
       fontSize: "var(--ggui-font-size-xs, 12px)",
@@ -25360,7 +25382,7 @@
       textAlign: "left",
       fontWeight: "var(--ggui-font-weight-semibold, 600)",
       fontSize: "var(--ggui-font-size-xs, 12px)",
-      color: "var(--ggui-color-onSurfaceVariant, #52525b)",
+      color: "var(--ggui-color-onSunken, #52525b)",
       textTransform: "uppercase",
       letterSpacing: "0.05em",
       borderBottom: "2px solid var(--ggui-color-outlineVariant, #e4e4e7)",
@@ -25376,11 +25398,11 @@
       width: "100%",
       borderCollapse: "collapse",
       fontSize: "var(--ggui-font-size-sm, 14px)",
-      color: "var(--ggui-color-onSurfaceVariant, #52525b)"
+      color: "var(--ggui-color-onSunken, #52525b)"
     }, children: [caption && (0, import_jsx_runtime23.jsx)("caption", { style: {
       padding: cellPadding,
       fontSize: "var(--ggui-font-size-sm, 14px)",
-      color: "var(--ggui-color-onSurfaceVariant, #52525b)",
+      color: "var(--ggui-color-onSunken, #52525b)",
       textAlign: "left",
       captionSide: "top"
     }, children: caption }), (0, import_jsx_runtime23.jsx)("thead", { children: (0, import_jsx_runtime23.jsx)("tr", { children: columns.map((col) => (0, import_jsx_runtime23.jsx)("th", { scope: "col", "aria-sort": sortKey === col.key ? sortDirection === "asc" ? "ascending" : "descending" : void 0, onClick: col.sortable ? () => handleSort(col.key) : void 0, onKeyDown: col.sortable ? (e) => {
@@ -25394,13 +25416,13 @@
       width: col.width,
       cursor: col.sortable ? "pointer" : "default"
     }, children: (0, import_jsx_runtime23.jsxs)("span", { style: { display: "inline-flex", alignItems: "center" }, children: [col.header, col.sortable && sortIndicator(sortKey === col.key, sortDirection)] }) }, col.key)) }) }), (0, import_jsx_runtime23.jsx)("tbody", { children: data.map((row, rowIndex) => (0, import_jsx_runtime23.jsx)("tr", { onMouseEnter: hoverable ? () => setHoveredRow(rowIndex) : void 0, onMouseLeave: hoverable ? () => setHoveredRow(null) : void 0, style: {
-      backgroundColor: hoverable && hoveredRow === rowIndex ? "var(--ggui-color-surface, #fafafa)" : striped && rowIndex % 2 === 1 ? "var(--ggui-color-surface, #fafafa)" : "transparent",
+      backgroundColor: hoverable && hoveredRow === rowIndex ? "var(--ggui-color-sunken, #fafafa)" : striped && rowIndex % 2 === 1 ? "var(--ggui-color-sunken, #fafafa)" : "transparent",
       transition: "background-color 0.15s ease"
     }, children: columns.map((col) => (0, import_jsx_runtime23.jsx)("td", { style: {
       padding: cellPadding,
       textAlign: col.align || "left",
-      borderBottom: "1px solid var(--ggui-color-surfaceVariant, #f4f4f5)",
-      borderRight: bordered ? "1px solid var(--ggui-color-surfaceVariant, #f4f4f5)" : void 0
+      borderBottom: "1px solid var(--ggui-color-sunken, #f4f4f5)",
+      borderRight: bordered ? "1px solid var(--ggui-color-sunken, #f4f4f5)" : void 0
     }, children: col.render ? col.render(row[col.key], row, rowIndex) : row[col.key] }, col.key)) }, rowIndex)) })] }) });
   }
 
@@ -25477,7 +25499,7 @@
       if (variant === "line") {
         return {
           ...base,
-          color: isActive ? "var(--ggui-color-primary-600, #0284c7)" : "var(--ggui-color-onSurfaceVariant, #52525b)",
+          color: isActive ? "var(--ggui-color-primary-600, #0284c7)" : "var(--ggui-color-onSunken, #52525b)",
           borderBottom: isActive ? "2px solid var(--ggui-color-primary-600, #0284c7)" : "2px solid transparent",
           marginBottom: "-1px"
         };
@@ -25485,17 +25507,17 @@
       if (variant === "pills") {
         return {
           ...base,
-          color: isActive ? "var(--ggui-color-onPrimary, #ffffff)" : "var(--ggui-color-onSurfaceVariant, #52525b)",
+          color: isActive ? "var(--ggui-color-onPrimary, #ffffff)" : "var(--ggui-color-onSunken, #52525b)",
           backgroundColor: isActive ? "var(--ggui-color-primary-600, #0284c7)" : "transparent",
           borderRadius: "var(--ggui-shape-radius-md, 6px)"
         };
       }
       return {
         ...base,
-        color: isActive ? "var(--ggui-color-primary-600, #0284c7)" : "var(--ggui-color-onSurfaceVariant, #52525b)",
-        backgroundColor: isActive ? "var(--ggui-color-surface, #ffffff)" : "transparent",
+        color: isActive ? "var(--ggui-color-primary-600, #0284c7)" : "var(--ggui-color-onSunken, #52525b)",
+        backgroundColor: isActive ? "var(--ggui-color-container, #ffffff)" : "transparent",
         border: isActive ? "1px solid var(--ggui-color-outlineVariant, #e4e4e7)" : "1px solid transparent",
-        borderBottom: isActive ? "1px solid var(--ggui-color-surface, #ffffff)" : "1px solid transparent",
+        borderBottom: isActive ? "1px solid var(--ggui-color-container, #ffffff)" : "1px solid transparent",
         borderRadius: "var(--ggui-shape-radius-md, 6px) var(--ggui-shape-radius-md, 6px) 0 0",
         marginBottom: "-1px"
       };
@@ -25504,7 +25526,7 @@
       display: "flex",
       gap: variant === "pills" ? "var(--ggui-spacing-1, 4px)" : "0",
       borderBottom: variant === "line" || variant === "enclosed" ? "1px solid var(--ggui-color-outlineVariant, #e4e4e7)" : void 0,
-      backgroundColor: variant === "pills" ? "var(--ggui-color-surfaceVariant, #f4f4f5)" : void 0,
+      backgroundColor: variant === "pills" ? "var(--ggui-color-sunken, #f4f4f5)" : void 0,
       borderRadius: variant === "pills" ? "var(--ggui-shape-radius-lg, 8px)" : void 0,
       padding: variant === "pills" ? "var(--ggui-spacing-1, 4px)" : void 0
     };
@@ -25675,25 +25697,25 @@
   // ../design/dist/primitives/Toast.js
   var variantStyles4 = {
     info: {
-      bg: "var(--ggui-color-info-50, #ecfeff)",
+      bg: "var(--ggui-color-elevated, #ecfeff)",
       border: "var(--ggui-color-info-200, #a5f3fc)",
       text: "var(--ggui-color-info-800, #155e75)",
       icon: "var(--ggui-color-info-500, #06b6d4)"
     },
     success: {
-      bg: "var(--ggui-color-success-50, #f0fdf4)",
+      bg: "var(--ggui-color-elevated, #f0fdf4)",
       border: "var(--ggui-color-success-200, #bbf7d0)",
       text: "var(--ggui-color-success-800, #166534)",
       icon: "var(--ggui-color-success-500, #22c55e)"
     },
     warning: {
-      bg: "var(--ggui-color-warning-50, #fffbeb)",
+      bg: "var(--ggui-color-elevated, #fffbeb)",
       border: "var(--ggui-color-warning-200, #fde68a)",
       text: "var(--ggui-color-warning-800, #92400e)",
       icon: "var(--ggui-color-warning-500, #f59e0b)"
     },
     error: {
-      bg: "var(--ggui-color-error-50, #fef2f2)",
+      bg: "var(--ggui-color-elevated, #fef2f2)",
       border: "var(--ggui-color-error-200, #fecaca)",
       text: "var(--ggui-color-error-800, #991b1b)",
       icon: "var(--ggui-color-error-500, #ef4444)"
@@ -25834,7 +25856,7 @@
         opacity: isDisabled ? 0.5 : 1,
         fontSize: "var(--ggui-font-size-sm, 14px)",
         fontWeight: "var(--ggui-font-weight-medium, 500)",
-        color: "var(--ggui-color-onSurface, #18181b)",
+        color: "var(--ggui-color-onContainer, #18181b)",
         textAlign: "left",
         transition: `background-color ${duration.fast} ${easing.easeInOut}`
       }, children: [(0, import_jsx_runtime26.jsx)("span", { children: item.title }), chevron(isExpanded)] }) }), (0, import_jsx_runtime26.jsx)("div", { id: `${uniqueId}-panel-${item.key}`, role: "region", "aria-labelledby": `${uniqueId}-header-${item.key}`, hidden: !isExpanded, style: {
@@ -25842,7 +25864,7 @@
       }, children: isExpanded && (0, import_jsx_runtime26.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-onSurfaceVariant, #52525b)",
+        color: "var(--ggui-color-onSunken, #52525b)",
         lineHeight: "var(--ggui-font-lineHeight-normal, 1.5)"
       }, children: item.content }) })] }, item.key);
     }) });
@@ -26108,9 +26130,9 @@
   // ../design/dist/components/MenuItem.js
   var import_jsx_runtime29 = __toESM(require_jsx_runtime(), 1);
   function MenuItem({ label, icon, rightElement, onClick, disabled, active, danger, style, className }) {
-    const baseColor = danger ? colors.error[600] : colors.gray[700];
-    const hoverBg = danger ? colors.error[50] : colors.gray[100];
-    const activeBg = danger ? colors.error[100] : colors.primary[50];
+    const baseColor = danger ? "var(--ggui-color-error-600, #dc2626)" : "var(--ggui-color-onElevated, #3f3f46)";
+    const hoverBg = danger ? "var(--ggui-color-error-50, #fef2f2)" : "var(--ggui-color-sunken, #f4f4f5)";
+    const activeBg = danger ? "var(--ggui-color-error-100, #fee2e2)" : "var(--ggui-color-primary-50, #f0f9ff)";
     return (0, import_jsx_runtime29.jsxs)("button", { onClick: disabled ? void 0 : onClick, disabled, className, style: {
       display: "flex",
       alignItems: "center",
@@ -26257,7 +26279,8 @@
       position: "absolute",
       ...getMenuPosition(),
       minWidth: "160px",
-      backgroundColor: colors.white,
+      backgroundColor: "var(--ggui-color-elevated, #ffffff)",
+      color: "var(--ggui-color-onElevated, #18181b)",
       border: `1px solid ${colors.gray[200]}`,
       borderRadius: radius.lg,
       boxShadow: shadow.lg,
@@ -26495,9 +26518,9 @@
       color: "var(--ggui-color-onPrimary, #ffffff)"
     },
     upcoming: {
-      backgroundColor: "var(--ggui-color-surface, #fafafa)",
+      backgroundColor: "var(--ggui-color-sunken, #fafafa)",
       border: "1px solid var(--ggui-color-outline, #d4d4d8)",
-      color: "var(--ggui-color-onSurfaceVariant, #52525b)"
+      color: "var(--ggui-color-onSunken, #52525b)"
     }
   };
   function Marker({ index, state }) {
@@ -26905,15 +26928,15 @@
   var CODE_INLINE = {
     fontFamily: "var(--ggui-font-family-mono, ui-monospace, monospace)",
     fontSize: "0.9em",
-    background: "var(--ggui-color-surface-sunken, rgba(0,0,0,0.06))",
-    borderRadius: "var(--ggui-radius-sm, 4px)",
+    background: "var(--ggui-color-sunken, rgba(0,0,0,0.06))",
+    borderRadius: "var(--ggui-shape-radius-sm, 4px)",
     padding: "0.1em 0.35em"
   };
   var CODE_FENCE = {
     fontFamily: "var(--ggui-font-family-mono, ui-monospace, monospace)",
     fontSize: "var(--ggui-font-size-sm, 14px)",
-    background: "var(--ggui-color-surface-sunken, rgba(0,0,0,0.06))",
-    borderRadius: "var(--ggui-radius-md, 8px)",
+    background: "var(--ggui-color-sunken, rgba(0,0,0,0.06))",
+    borderRadius: "var(--ggui-shape-radius-md, 8px)",
     padding: "var(--ggui-spacing-sm, 12px)",
     overflowX: "auto",
     whiteSpace: "pre",
@@ -26942,7 +26965,7 @@
   var TABLE_HEADER_CELL = {
     ...TABLE_CELL,
     fontWeight: "var(--ggui-font-weight-semibold, 600)",
-    background: "var(--ggui-color-surface-sunken, rgba(0,0,0,0.06))"
+    background: "var(--ggui-color-sunken, rgba(0,0,0,0.06))"
   };
   function renderRichTextInlines(inlines) {
     return inlines.map((node, i) => {
@@ -27557,7 +27580,8 @@
       width: sizeWidths[size],
       maxWidth: isFullscreen ? "100%" : "calc(100vw - 48px)",
       maxHeight: isFullscreen ? "100%" : "calc(100vh - 48px)",
-      backgroundColor: colors.white,
+      backgroundColor: "var(--ggui-color-elevated, #ffffff)",
+      color: "var(--ggui-color-onElevated, #18181b)",
       borderRadius: isFullscreen ? 0 : radius.xl,
       boxShadow: shadow["2xl"],
       display: "flex",
@@ -28020,8 +28044,7 @@
     StreamBus: () => StreamBus,
     buildActionEnvelope: () => buildActionEnvelope,
     buildWireConfig: () => buildWireConfig,
-    connectionStore: () => connectionStore,
-    createConnectionStore: () => createConnectionStore,
+    connectionSource: () => connectionSource,
     useAction: () => useAction,
     useApp: () => useApp,
     useAuth: () => useAuth,
@@ -28174,10 +28197,46 @@
   var import_react37 = __toESM(require_react(), 1);
 
   // ../wire/dist/connection-store.js
+  var ConnectionWriterConflictError = class extends Error {
+    owner;
+    attemptedBy;
+    constructor(owner, attemptedBy) {
+      super(owner === attemptedBy ? `connection writer: '${owner}' already holds the claim and '${attemptedBy}' is claiming it again \u2014 two copies of '${owner}' in one document (a duplicate bundle of the runtime)` : `connection writer: '${owner}' holds the claim; '${attemptedBy}' cannot take it \u2014 exactly one party writes the connection state`);
+      this.name = "ConnectionWriterConflictError";
+      this.owner = owner;
+      this.attemptedBy = attemptedBy;
+    }
+  };
+  var ConnectionWriterReleasedError = class extends Error {
+    claimant;
+    constructor(claimant) {
+      super(`connection writer: '${claimant}' released its claim and cannot set the connection state`);
+      this.name = "ConnectionWriterReleasedError";
+      this.claimant = claimant;
+    }
+  };
+  var DOCUMENT_STORE_KEY = /* @__PURE__ */ Symbol.for("ai.ggui.wire/connection-store");
+  var ConnectionStoreSlotError = class extends Error {
+    key;
+    constructor(key) {
+      super(`connection store: the document slot ${String(key)} holds a value that is not a connection store \u2014 another copy of @ggui-ai/wire with an incompatible shape, or a foreign object. Refusing to adopt or overwrite it.`);
+      this.key = key;
+      this.name = "ConnectionStoreSlotError";
+    }
+  };
+  function isConnectionStore(value) {
+    if (typeof value !== "object" || value === null)
+      return false;
+    const source = Reflect.get(value, "source");
+    if (typeof source !== "object" || source === null)
+      return false;
+    return typeof Reflect.get(value, "claim") === "function" && typeof Reflect.get(source, "subscribe") === "function" && typeof Reflect.get(source, "getSnapshot") === "function";
+  }
   function createConnectionStore(initial = true) {
     let value = initial;
+    let owner;
     const listeners = /* @__PURE__ */ new Set();
-    return {
+    const source = {
       subscribe(listener) {
         listeners.add(listener);
         return () => {
@@ -28186,22 +28245,53 @@
       },
       getSnapshot() {
         return value;
-      },
-      set(connected) {
-        if (connected === value)
-          return;
-        value = connected;
-        for (const l of listeners)
-          l();
       }
     };
+    return {
+      source,
+      claim(claimant) {
+        if (owner !== void 0)
+          throw new ConnectionWriterConflictError(owner, claimant);
+        owner = claimant;
+        let released = false;
+        return {
+          set(connected) {
+            if (released)
+              throw new ConnectionWriterReleasedError(claimant);
+            if (connected === value)
+              return;
+            value = connected;
+            for (const l of listeners)
+              l();
+          },
+          release() {
+            if (released)
+              return;
+            released = true;
+            owner = void 0;
+          }
+        };
+      }
+    };
+  }
+  function documentConnectionStore() {
+    const existing = Reflect.get(globalThis, DOCUMENT_STORE_KEY);
+    if (existing !== void 0) {
+      if (isConnectionStore(existing))
+        return existing;
+      throw new ConnectionStoreSlotError(DOCUMENT_STORE_KEY);
+    }
+    const created = createConnectionStore(true);
+    Reflect.set(globalThis, DOCUMENT_STORE_KEY, created);
+    return created;
   }
-  var connectionStore = createConnectionStore(true);
+  var documentStore = documentConnectionStore();
+  var connectionSource = documentStore.source;
 
   // ../wire/dist/useRender.js
   function useRender() {
     const { render } = useWireContext();
-    const isConnected = (0, import_react37.useSyncExternalStore)(connectionStore.subscribe, connectionStore.getSnapshot, connectionStore.getSnapshot);
+    const isConnected = (0, import_react37.useSyncExternalStore)(connectionSource.subscribe, connectionSource.getSnapshot, connectionSource.getSnapshot);
     return { sessionId: render.sessionId, isConnected };
   }
 
@@ -28659,7 +28749,7 @@
   }
 
   // ../protocol/dist/version.js
-  var PROTOCOL_VERSION = "draft-2026-09-04";
+  var PROTOCOL_VERSION = "draft-2026-09-10";
   var PROTOCOL_SCHEMA_VERSION = PROTOCOL_VERSION;
   var CLIENT_SUPPORTED_VERSIONS = Object.freeze([
     PROTOCOL_SCHEMA_VERSION
@@ -28855,9 +28945,11 @@
 
   // ../design/dist/themes/consumed-tokens.manifest.json
   var consumed_tokens_manifest_default = {
-    version: 1,
+    version: 2,
     tokens: [
       "--ggui-color-container",
+      "--ggui-color-elevated",
+      "--ggui-color-error",
       "--ggui-color-error-100",
       "--ggui-color-error-200",
       "--ggui-color-error-50",
@@ -28865,12 +28957,16 @@
       "--ggui-color-error-600",
       "--ggui-color-error-700",
       "--ggui-color-error-800",
+      "--ggui-color-ground",
+      "--ggui-color-ground-gradient",
+      "--ggui-color-ground-subtle",
       "--ggui-color-info-100",
       "--ggui-color-info-200",
       "--ggui-color-info-50",
       "--ggui-color-info-500",
       "--ggui-color-info-700",
       "--ggui-color-info-800",
+      "--ggui-color-link",
       "--ggui-color-neutral-100",
       "--ggui-color-neutral-200",
       "--ggui-color-neutral-300",
@@ -28878,11 +28974,14 @@
       "--ggui-color-neutral-50",
       "--ggui-color-neutral-500",
       "--ggui-color-neutral-600",
+      "--ggui-color-neutral-900",
       "--ggui-color-onContainer",
+      "--ggui-color-onElevated",
       "--ggui-color-onError",
+      "--ggui-color-onGround",
       "--ggui-color-onPrimary",
-      "--ggui-color-onSurface",
-      "--ggui-color-onSurfaceVariant",
+      "--ggui-color-onSunken",
+      "--ggui-color-onTertiaryContainer",
       "--ggui-color-outline",
       "--ggui-color-outlineVariant",
       "--ggui-color-primary",
@@ -28902,11 +29001,8 @@
       "--ggui-color-success-500",
       "--ggui-color-success-700",
       "--ggui-color-success-800",
-      "--ggui-color-surface",
-      "--ggui-color-surface-gradient",
-      "--ggui-color-surface-subtle",
-      "--ggui-color-surface-sunken",
-      "--ggui-color-surfaceVariant",
+      "--ggui-color-sunken",
+      "--ggui-color-tertiaryContainer",
       "--ggui-color-warning-100",
       "--ggui-color-warning-200",
       "--ggui-color-warning-50",
@@ -28914,6 +29010,7 @@
       "--ggui-color-warning-700",
       "--ggui-color-warning-800",
       "--ggui-flash-color",
+      "--ggui-font-family-heading",
       "--ggui-font-family-mono",
       "--ggui-font-family-sans",
       "--ggui-font-lineHeight-normal",
@@ -28926,11 +29023,11 @@
       "--ggui-font-size-xl",
       "--ggui-font-size-xs",
       "--ggui-font-weight-bold",
+      "--ggui-font-weight-heading",
       "--ggui-font-weight-medium",
       "--ggui-font-weight-normal",
       "--ggui-font-weight-semibold",
-      "--ggui-radius-md",
-      "--ggui-radius-sm",
+      "--ggui-letter-spacing-heading",
       "--ggui-shape-radius-full",
       "--ggui-shape-radius-lg",
       "--ggui-shape-radius-md",
@@ -29119,28 +29216,11 @@
           $type: "fontFamily"
         }
       },
-      size: {
-        sm: { $value: "0.8125rem", $type: "dimension" },
-        // 13px
-        base: { $value: "0.875rem", $type: "dimension" },
-        // 14px — brand-kit body
-        lg: { $value: "1rem", $type: "dimension" },
-        // 16px
-        xl: { $value: "1.125rem", $type: "dimension" },
-        // 18px
-        "2xl": { $value: "1.375rem", $type: "dimension" }
-        // 22px — brand-kit hero tag
-      },
       weight: {
         normal: { $value: "400", $type: "fontWeight" },
         medium: { $value: "500", $type: "fontWeight" },
         semibold: { $value: "600", $type: "fontWeight" },
         bold: { $value: "700", $type: "fontWeight" }
-      },
-      lineHeight: {
-        tight: { $value: "1.2", $type: "number" },
-        normal: { $value: "1.5", $type: "number" },
-        relaxed: { $value: "1.6", $type: "number" }
       }
     },
     spacing: {
@@ -29201,26 +29281,6 @@
       }
     },
     motion: {
-      duration: {
-        fast: { $value: "120ms", $type: "duration" },
-        normal: { $value: "200ms", $type: "duration" },
-        slow: { $value: "400ms", $type: "duration" },
-        ambient: { $value: "2000ms", $type: "duration" }
-      },
-      easing: {
-        default: {
-          $value: "cubic-bezier(0.4, 0, 0.2, 1)",
-          $type: "cubicBezier"
-        },
-        bounce: {
-          $value: "cubic-bezier(0.34, 1.56, 0.64, 1)",
-          $type: "cubicBezier"
-        },
-        spring: {
-          $value: "cubic-bezier(0.22, 1, 0.36, 1)",
-          $type: "cubicBezier"
-        }
-      },
       transition: standardTransitions,
       keyframes: {
         "accent-pulse": {
@@ -29243,7 +29303,6 @@
     $description: "The default ggui theme \u2014 monochrome paper + ink, architectural, no decorative flourish.",
     $metadata: {
       font: "Inter",
-      fontUrl: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;700&display=swap",
       philosophy: "The interface is the artifact, not the chrome around it."
     },
     color: {
@@ -29336,15 +29395,15 @@
         "800": { $value: "#181818", $type: "color" }
       },
       // Semantic surface roles
-      surface: { $value: "#f4f3ed", $type: "color" },
+      ground: { $value: "#f4f3ed", $type: "color" },
       // paper
-      onSurface: { $value: "#292929", $type: "color" },
+      onGround: { $value: "#292929", $type: "color" },
       // ink
-      surfaceVariant: { $value: "#ebe9e1", $type: "color" },
+      sunken: { $value: "#ebe9e1", $type: "color" },
       // paper-2
-      onSurfaceVariant: { $value: "#5a5a5a", $type: "color" },
+      onSunken: { $value: "#5a5a5a", $type: "color" },
       // ink-3
-      container: { $value: "#ebe9e1", $type: "color" },
+      container: { $value: "#f4f3ed", $type: "color" },
       // paper-2
       onContainer: { $value: "#292929", $type: "color" },
       // ink
@@ -29399,7 +29458,6 @@
     $description: "The default ggui theme (dark) \u2014 ink canvas, paper text, architectural and flat.",
     $metadata: {
       font: "Inter",
-      fontUrl: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;700&display=swap",
       philosophy: "The interface is the artifact, not the chrome around it."
     },
     color: {
@@ -29489,15 +29547,15 @@
         "700": { $value: "#e8e8e8", $type: "color" },
         "800": { $value: "#f0f0f0", $type: "color" }
       },
-      surface: { $value: "#1f1f1f", $type: "color" },
+      ground: { $value: "#1f1f1f", $type: "color" },
       // surface above ink base
-      onSurface: { $value: "#f4f3ed", $type: "color" },
+      onGround: { $value: "#f4f3ed", $type: "color" },
       // paper
-      surfaceVariant: { $value: "#292929", $type: "color" },
+      sunken: { $value: "#292929", $type: "color" },
       // ink
-      onSurfaceVariant: { $value: "#d9d9d9", $type: "color" },
+      onSunken: { $value: "#d9d9d9", $type: "color" },
       // chrome
-      container: { $value: "#292929", $type: "color" },
+      container: { $value: "#1f1f1f", $type: "color" },
       // ink
       onContainer: { $value: "#f4f3ed", $type: "color" },
       // paper
@@ -29558,23 +29616,11 @@
           $type: "fontFamily"
         }
       },
-      size: {
-        sm: { $value: "0.8rem", $type: "dimension" },
-        base: { $value: "0.95rem", $type: "dimension" },
-        lg: { $value: "1.1rem", $type: "dimension" },
-        xl: { $value: "1.3rem", $type: "dimension" },
-        "2xl": { $value: "1.6rem", $type: "dimension" }
-      },
       weight: {
         normal: { $value: "400", $type: "fontWeight" },
         medium: { $value: "500", $type: "fontWeight" },
         semibold: { $value: "600", $type: "fontWeight" },
         bold: { $value: "700", $type: "fontWeight" }
-      },
-      lineHeight: {
-        tight: { $value: "1.2", $type: "number" },
-        normal: { $value: "1.5", $type: "number" },
-        relaxed: { $value: "1.7", $type: "number" }
       }
     },
     spacing: {
@@ -29607,26 +29653,6 @@
       }
     },
     motion: {
-      duration: {
-        fast: { $value: "100ms", $type: "duration" },
-        normal: { $value: "200ms", $type: "duration" },
-        slow: { $value: "600ms", $type: "duration" },
-        ambient: { $value: "2000ms", $type: "duration" }
-      },
-      easing: {
-        default: {
-          $value: "cubic-bezier(0.4, 0, 0.2, 1)",
-          $type: "cubicBezier"
-        },
-        bounce: {
-          $value: "cubic-bezier(0.68, -0.55, 0.27, 1.55)",
-          $type: "cubicBezier"
-        },
-        spring: {
-          $value: "cubic-bezier(0.22, 1, 0.36, 1)",
-          $type: "cubicBezier"
-        }
-      },
       keyframes: {
         "glitch-flicker": {
           $value: "0%{opacity:1;transform:none}7%{opacity:0.8;transform:translateX(-2px) skewX(-1deg)}10%{opacity:1;transform:none}47%{opacity:1;transform:none}50%{opacity:0.6;transform:translateX(3px) skewX(2deg)}53%{opacity:1;transform:none}100%{opacity:1;transform:none}",
@@ -29677,7 +29703,6 @@
     $description: "Neon-lit dystopian tech \u2014 cyan neon on dark chrome with glitch animations.",
     $metadata: {
       font: "Orbitron",
-      fontUrl: "https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap",
       philosophy: "Chromatic noise, electric tension, digital rebellion."
     },
     color: {
@@ -29746,12 +29771,12 @@
         "800": { $value: "#005266", $type: "color" }
       },
       // Semantic roles (dark theme — inverted neutral scale)
-      surface: { $value: "#0a0a0f", $type: "color" },
-      onSurface: { $value: "#e8e8f0", $type: "color" },
-      surfaceVariant: { $value: "#111118", $type: "color" },
-      onSurfaceVariant: { $value: "#8888a0", $type: "color" },
-      container: { $value: "#155e75", $type: "color" },
-      onContainer: { $value: "#cffafe", $type: "color" },
+      ground: { $value: "#0a0a0f", $type: "color" },
+      onGround: { $value: "#e8e8f0", $type: "color" },
+      sunken: { $value: "#111118", $type: "color" },
+      onSunken: { $value: "#8888a0", $type: "color" },
+      container: { $value: "#0a0a0f", $type: "color" },
+      onContainer: { $value: "#e8e8f0", $type: "color" },
       outline: { $value: "#3a3a48", $type: "color" },
       outlineVariant: { $value: "#25252f", $type: "color" },
       // Primary role pair — onPrimary is the deep night chrome, container
@@ -29798,7 +29823,6 @@
     $description: "Neon-lit dystopian tech (dark) \u2014 brighter cyan on pure-black chrome, cranked neon contrast.",
     $metadata: {
       font: "Orbitron",
-      fontUrl: "https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap",
       philosophy: "Chromatic noise, electric tension, digital rebellion."
     },
     color: {
@@ -29873,13 +29897,13 @@
         "700": { $value: "#85e6ff", $type: "color" },
         "800": { $value: "#adeeff", $type: "color" }
       },
-      surface: { $value: "#000005", $type: "color" },
-      onSurface: { $value: "#e8e8f0", $type: "color" },
-      surfaceVariant: { $value: "#0a0a0f", $type: "color" },
-      onSurfaceVariant: { $value: "#aaaabe", $type: "color" },
-      container: { $value: "#0e7490", $type: "color" },
+      ground: { $value: "#000005", $type: "color" },
+      onGround: { $value: "#e8e8f0", $type: "color" },
+      sunken: { $value: "#0a0a0f", $type: "color" },
+      onSunken: { $value: "#aaaabe", $type: "color" },
+      container: { $value: "#000005", $type: "color" },
       // deeper teal
-      onContainer: { $value: "#cffafe", $type: "color" },
+      onContainer: { $value: "#e8e8f0", $type: "color" },
       outline: { $value: "#1a1a24", $type: "color" },
       outlineVariant: { $value: "#111118", $type: "color" },
       // Primary role pair — dark: onPrimary is pure-black-ish, container = deeper teal.
@@ -29931,23 +29955,11 @@
           $type: "fontFamily"
         }
       },
-      size: {
-        sm: { $value: "0.875rem", $type: "dimension" },
-        base: { $value: "1rem", $type: "dimension" },
-        lg: { $value: "1.125rem", $type: "dimension" },
-        xl: { $value: "1.3rem", $type: "dimension" },
-        "2xl": { $value: "1.6rem", $type: "dimension" }
-      },
       weight: {
         normal: { $value: "400", $type: "fontWeight" },
         medium: { $value: "500", $type: "fontWeight" },
         semibold: { $value: "600", $type: "fontWeight" },
         bold: { $value: "700", $type: "fontWeight" }
-      },
-      lineHeight: {
-        tight: { $value: "1.3", $type: "number" },
-        normal: { $value: "1.6", $type: "number" },
-        relaxed: { $value: "1.9", $type: "number" }
       }
     },
     spacing: {
@@ -29989,26 +30001,6 @@
       }
     },
     motion: {
-      duration: {
-        fast: { $value: "200ms", $type: "duration" },
-        normal: { $value: "500ms", $type: "duration" },
-        slow: { $value: "1500ms", $type: "duration" },
-        ambient: { $value: "6000ms", $type: "duration" }
-      },
-      easing: {
-        default: {
-          $value: "cubic-bezier(0.33, 0, 0.67, 1)",
-          $type: "cubicBezier"
-        },
-        bounce: {
-          $value: "cubic-bezier(0.34, 1.2, 0.64, 1)",
-          $type: "cubicBezier"
-        },
-        spring: {
-          $value: "cubic-bezier(0.22, 1, 0.36, 1)",
-          $type: "cubicBezier"
-        }
-      },
       keyframes: {
         "slow-breathe": {
           $value: "0%{opacity:0.85}50%{opacity:1}100%{opacity:0.85}",
@@ -30038,7 +30030,6 @@
     $description: "Minimalist Japanese aesthetic \u2014 warm stone tones, deliberate space, and unhurried motion.",
     $metadata: {
       font: "Noto Serif JP",
-      fontUrl: "https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&display=swap",
       philosophy: "Beauty in imperfection. Stillness as presence."
     },
     color: {
@@ -30106,12 +30097,12 @@
         "800": { $type: "color", $value: "#2c3d46" }
       },
       // Semantic roles
-      surface: { $value: "#faf9f7", $type: "color" },
-      onSurface: { $value: "#2a2724", $type: "color" },
-      surfaceVariant: { $value: "#f3f1ed", $type: "color" },
-      onSurfaceVariant: { $value: "#6b635b", $type: "color" },
-      container: { $value: "#e8ebe2", $type: "color" },
-      onContainer: { $value: "#33392e", $type: "color" },
+      ground: { $value: "#faf9f7", $type: "color" },
+      onGround: { $value: "#2a2724", $type: "color" },
+      sunken: { $value: "#f3f1ed", $type: "color" },
+      onSunken: { $value: "#6b635b", $type: "color" },
+      container: { $value: "#faf9f7", $type: "color" },
+      onContainer: { $value: "#2a2724", $type: "color" },
       outline: { $value: "#d5d0c8", $type: "color" },
       outlineVariant: { $value: "#e7e4de", $type: "color" },
       // Primary role pair — onPrimary is stone ivory on moss.
@@ -30155,7 +30146,6 @@
     $description: "Minimalist Japanese aesthetic (dark) \u2014 dusk stone surfaces with restrained moss accents and unhurried motion.",
     $metadata: {
       font: "Noto Serif JP",
-      fontUrl: "https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&display=swap",
       philosophy: "Beauty in imperfection. Stillness as presence."
     },
     color: {
@@ -30224,14 +30214,14 @@
         "700": { $type: "color", $value: "#546771" },
         "800": { $type: "color", $value: "#38454d" }
       },
-      surface: { $value: "#2a2724", $type: "color" },
-      onSurface: { $value: "#f3f1ed", $type: "color" },
+      ground: { $value: "#2a2724", $type: "color" },
+      onGround: { $value: "#f3f1ed", $type: "color" },
       // muted off-cream, not pure white
-      surfaceVariant: { $value: "#3e3a36", $type: "color" },
-      onSurfaceVariant: { $value: "#b8b0a4", $type: "color" },
-      container: { $value: "#48543d", $type: "color" },
+      sunken: { $value: "#3e3a36", $type: "color" },
+      onSunken: { $value: "#b8b0a4", $type: "color" },
+      container: { $value: "#2a2724", $type: "color" },
       // deep moss
-      onContainer: { $value: "#e8ebe2", $type: "color" },
+      onContainer: { $value: "#f3f1ed", $type: "color" },
       // primary-100 in dark tree
       outline: { $value: "#5e5650", $type: "color" },
       outlineVariant: { $value: "#3e3a36", $type: "color" },
@@ -30283,23 +30273,11 @@
           $type: "fontFamily"
         }
       },
-      size: {
-        sm: { $value: "0.875rem", $type: "dimension" },
-        base: { $value: "1rem", $type: "dimension" },
-        lg: { $value: "1.125rem", $type: "dimension" },
-        xl: { $value: "1.25rem", $type: "dimension" },
-        "2xl": { $value: "1.5rem", $type: "dimension" }
-      },
       weight: {
         normal: { $value: "400", $type: "fontWeight" },
         medium: { $value: "500", $type: "fontWeight" },
         semibold: { $value: "600", $type: "fontWeight" },
         bold: { $value: "700", $type: "fontWeight" }
-      },
-      lineHeight: {
-        tight: { $value: "1.25", $type: "number" },
-        normal: { $value: "1.5", $type: "number" },
-        relaxed: { $value: "1.75", $type: "number" }
       }
     },
     spacing: {
@@ -30332,26 +30310,6 @@
       }
     },
     motion: {
-      duration: {
-        fast: { $value: "120ms", $type: "duration" },
-        normal: { $value: "250ms", $type: "duration" },
-        slow: { $value: "800ms", $type: "duration" },
-        ambient: { $value: "2500ms", $type: "duration" }
-      },
-      easing: {
-        default: {
-          $value: "cubic-bezier(0.4, 0, 0.2, 1)",
-          $type: "cubicBezier"
-        },
-        bounce: {
-          $value: "cubic-bezier(0.68, -0.55, 0.27, 1.55)",
-          $type: "cubicBezier"
-        },
-        spring: {
-          $value: "cubic-bezier(0.22, 1, 0.36, 1)",
-          $type: "cubicBezier"
-        }
-      },
       transition: {
         fast: {
           $value: "120ms cubic-bezier(0.4, 0, 0.2, 1)",
@@ -30399,7 +30357,6 @@
     $description: "Hot pink neon on dark \u2014 electric glow effects, neon flicker, and flowing magenta particles.",
     $metadata: {
       font: "Outfit",
-      fontUrl: "https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap",
       philosophy: "Midnight electricity. The city never sleeps."
     },
     color: {
@@ -30444,12 +30401,12 @@
         "500": { $value: "#38bdf8", $type: "color" }
       },
       // Semantic roles (dark theme — inverted neutral scale)
-      surface: { $value: "#09090b", $type: "color" },
-      onSurface: { $value: "#ececf0", $type: "color" },
-      surfaceVariant: { $value: "#111114", $type: "color" },
-      onSurfaceVariant: { $value: "#8a8a9a", $type: "color" },
-      container: { $value: "#9d174d", $type: "color" },
-      onContainer: { $value: "#fce7f3", $type: "color" },
+      ground: { $value: "#09090b", $type: "color" },
+      onGround: { $value: "#ececf0", $type: "color" },
+      sunken: { $value: "#111114", $type: "color" },
+      onSunken: { $value: "#8a8a9a", $type: "color" },
+      container: { $value: "#09090b", $type: "color" },
+      onContainer: { $value: "#ececf0", $type: "color" },
       outline: { $value: "#3b3b44", $type: "color" },
       outlineVariant: { $value: "#232329", $type: "color" },
       // Primary role pair — onPrimary is deep noir so hot pink CTAs pop.
@@ -30491,7 +30448,6 @@
     $description: "Hot pink neon on pure black (dark) \u2014 sharper noir contrast, brighter electric glow, deeper magenta containers.",
     $metadata: {
       font: "Outfit",
-      fontUrl: "https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap",
       philosophy: "Midnight electricity. The city never sleeps."
     },
     color: {
@@ -30537,13 +30493,13 @@
         ...standardSemanticScales.dark.info,
         "500": { $value: "#5acdff", $type: "color" }
       },
-      surface: { $value: "#000000", $type: "color" },
-      onSurface: { $value: "#ececf0", $type: "color" },
-      surfaceVariant: { $value: "#09090b", $type: "color" },
-      onSurfaceVariant: { $value: "#b0b0be", $type: "color" },
-      container: { $value: "#be185d", $type: "color" },
+      ground: { $value: "#000000", $type: "color" },
+      onGround: { $value: "#ececf0", $type: "color" },
+      sunken: { $value: "#09090b", $type: "color" },
+      onSunken: { $value: "#b0b0be", $type: "color" },
+      container: { $value: "#000000", $type: "color" },
       // richer magenta
-      onContainer: { $value: "#fce7f3", $type: "color" },
+      onContainer: { $value: "#ececf0", $type: "color" },
       outline: { $value: "#19191e", $type: "color" },
       outlineVariant: { $value: "#111114", $type: "color" },
       // Primary role pair — dark: onPrimary is pure black, container = richer magenta.
@@ -30591,23 +30547,11 @@
           $type: "fontFamily"
         }
       },
-      size: {
-        sm: { $value: "0.875rem", $type: "dimension" },
-        base: { $value: "1rem", $type: "dimension" },
-        lg: { $value: "1.15rem", $type: "dimension" },
-        xl: { $value: "1.3rem", $type: "dimension" },
-        "2xl": { $value: "1.625rem", $type: "dimension" }
-      },
       weight: {
         normal: { $value: "400", $type: "fontWeight" },
         medium: { $value: "500", $type: "fontWeight" },
         semibold: { $value: "600", $type: "fontWeight" },
         bold: { $value: "700", $type: "fontWeight" }
-      },
-      lineHeight: {
-        tight: { $value: "1.3", $type: "number" },
-        normal: { $value: "1.6", $type: "number" },
-        relaxed: { $value: "1.85", $type: "number" }
       }
     },
     spacing: {
@@ -30649,26 +30593,6 @@
       }
     },
     motion: {
-      duration: {
-        fast: { $value: "200ms", $type: "duration" },
-        normal: { $value: "400ms", $type: "duration" },
-        slow: { $value: "1200ms", $type: "duration" },
-        ambient: { $value: "5000ms", $type: "duration" }
-      },
-      easing: {
-        default: {
-          $value: "cubic-bezier(0.4, 0, 0.2, 1)",
-          $type: "cubicBezier"
-        },
-        bounce: {
-          $value: "cubic-bezier(0.34, 1.3, 0.64, 1)",
-          $type: "cubicBezier"
-        },
-        spring: {
-          $value: "cubic-bezier(0.22, 1, 0.36, 1)",
-          $type: "cubicBezier"
-        }
-      },
       keyframes: {
         "leaf-float": {
           $value: "0%{transform:translateY(0) rotate(0deg);opacity:0.7}25%{transform:translateY(-6px) rotate(3deg)}50%{transform:translateY(-2px) rotate(-2deg);opacity:1}75%{transform:translateY(-8px) rotate(2deg)}100%{transform:translateY(0) rotate(0deg);opacity:0.7}",
@@ -30691,7 +30615,6 @@
     $description: "Organic greens on warm cream \u2014 leaf-float animations and vine-grow motion.",
     $metadata: {
       font: "Lora",
-      fontUrl: "https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap",
       philosophy: "Rooted in nature. Growing with intention."
     },
     color: {
@@ -30740,12 +30663,12 @@
       },
       info: standardSemanticScales.light.info,
       // Semantic roles
-      surface: { $value: "#fefcf8", $type: "color" },
-      onSurface: { $value: "#352e20", $type: "color" },
-      surfaceVariant: { $value: "#fdf8ef", $type: "color" },
-      onSurfaceVariant: { $value: "#746448", $type: "color" },
-      container: { $value: "#dcfce7", $type: "color" },
-      onContainer: { $value: "#14532d", $type: "color" },
+      ground: { $value: "#fefcf8", $type: "color" },
+      onGround: { $value: "#352e20", $type: "color" },
+      sunken: { $value: "#fdf8ef", $type: "color" },
+      onSunken: { $value: "#746448", $type: "color" },
+      container: { $value: "#fefcf8", $type: "color" },
+      onContainer: { $value: "#352e20", $type: "color" },
       outline: { $value: "#f0e4c9", $type: "color" },
       outlineVariant: { $value: "#f8f0df", $type: "color" },
       // Primary role pair — onPrimary is cream for the leaf-green brand hex.
@@ -30787,7 +30710,6 @@
     $description: "Forest at night (dark) \u2014 deep soil surfaces with lifted leaf-green accents and gentle organic motion.",
     $metadata: {
       font: "Lora",
-      fontUrl: "https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap",
       philosophy: "Rooted in nature. Growing with intention."
     },
     color: {
@@ -30822,13 +30744,13 @@
       warning: standardSemanticScales.dark.warning,
       error: standardSemanticScales.dark.error,
       info: standardSemanticScales.dark.info,
-      surface: { $value: "#1f1c18", $type: "color" },
-      onSurface: { $value: "#fefcf8", $type: "color" },
-      surfaceVariant: { $value: "#352e20", $type: "color" },
-      onSurfaceVariant: { $value: "#dccba5", $type: "color" },
-      container: { $value: "#166534", $type: "color" },
+      ground: { $value: "#1f1c18", $type: "color" },
+      onGround: { $value: "#fefcf8", $type: "color" },
+      sunken: { $value: "#352e20", $type: "color" },
+      onSunken: { $value: "#dccba5", $type: "color" },
+      container: { $value: "#1f1c18", $type: "color" },
       // deep forest
-      onContainer: { $value: "#dcfce7", $type: "color" },
+      onContainer: { $value: "#fefcf8", $type: "color" },
       outline: { $value: "#504530", $type: "color" },
       outlineVariant: { $value: "#352e20", $type: "color" },
       // Primary role pair — dark: lifted leaf-green, onPrimary = forest soil.
@@ -30893,24 +30815,11 @@
           $type: "fontFamily"
         }
       },
-      size: {
-        sm: { $value: "0.875rem", $type: "dimension" },
-        base: { $value: "1rem", $type: "dimension" },
-        lg: { $value: "1.125rem", $type: "dimension" },
-        xl: { $value: "1.25rem", $type: "dimension" },
-        "2xl": { $value: "1.5rem", $type: "dimension" }
-      },
       weight: {
         normal: { $value: "400", $type: "fontWeight" },
         medium: { $value: "500", $type: "fontWeight" },
         semibold: { $value: "600", $type: "fontWeight" },
         bold: { $value: "700", $type: "fontWeight" }
-      },
-      lineHeight: {
-        tight: { $value: "1.25", $type: "number" },
-        normal: { $value: "1.55", $type: "number" },
-        // claude.ai-ish — slightly looser than Indigo
-        relaxed: { $value: "1.75", $type: "number" }
       }
     },
     // Same dual-key spacing scale as Indigo so primitives that
@@ -30968,21 +30877,6 @@
     motion: {
       // Claudic is calmer than Indigo — no `ambient` 3s breathing
       // duration is exposed. Animations stay snappy + functional only.
-      duration: {
-        fast: { $value: "120ms", $type: "duration" },
-        normal: { $value: "240ms", $type: "duration" },
-        slow: { $value: "480ms", $type: "duration" }
-      },
-      easing: {
-        default: {
-          $value: "cubic-bezier(0.4, 0, 0.2, 1)",
-          $type: "cubicBezier"
-        },
-        spring: {
-          $value: "cubic-bezier(0.22, 1, 0.36, 1)",
-          $type: "cubicBezier"
-        }
-      },
       keyframes: {
         entrance: {
           $value: "0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:none}",
@@ -31083,15 +30977,15 @@
         "800": { $value: "#363432", $type: "color" }
       },
       // Two-tier semantic roles
-      surface: { $value: "#faf9f5", $type: "color" },
+      ground: { $value: "#faf9f5", $type: "color" },
       // Ivory
-      onSurface: { $value: "#141413", $type: "color" },
+      onGround: { $value: "#141413", $type: "color" },
       // Slate
-      surfaceVariant: { $value: "#f5f4ee", $type: "color" },
-      onSurfaceVariant: { $value: "#56544f", $type: "color" },
-      container: { $value: "#fbf2ee", $type: "color" },
+      sunken: { $value: "#f5f4ee", $type: "color" },
+      onSunken: { $value: "#56544f", $type: "color" },
+      container: { $value: "#faf9f5", $type: "color" },
       // primary-50
-      onContainer: { $value: "#4d2920", $type: "color" },
+      onContainer: { $value: "#141413", $type: "color" },
       // primary-900
       outline: { $value: "#dad8cc", $type: "color" },
       outlineVariant: { $value: "#ebe9df", $type: "color" },
@@ -31223,14 +31117,14 @@
         "700": { $value: "#d1cfca", $type: "color" },
         "800": { $value: "#e6e4e0", $type: "color" }
       },
-      surface: { $value: "#262624", $type: "color" },
+      ground: { $value: "#262624", $type: "color" },
       // Charcoal
-      onSurface: { $value: "#faf9f5", $type: "color" },
+      onGround: { $value: "#faf9f5", $type: "color" },
       // Ivory
-      surfaceVariant: { $value: "#2d2c2a", $type: "color" },
-      onSurfaceVariant: { $value: "#a8a59f", $type: "color" },
-      container: { $value: "#3d3b39", $type: "color" },
-      onContainer: { $value: "#fbf2ee", $type: "color" },
+      sunken: { $value: "#2d2c2a", $type: "color" },
+      onSunken: { $value: "#a8a59f", $type: "color" },
+      container: { $value: "#262624", $type: "color" },
+      onContainer: { $value: "#faf9f5", $type: "color" },
       outline: { $value: "#3d3b39", $type: "color" },
       outlineVariant: { $value: "#2d2c2a", $type: "color" },
       // Primary role pair — dark: onPrimary is charcoal so text reads on the
@@ -31293,31 +31187,12 @@
           $type: "fontFamily"
         }
       },
-      size: {
-        sm: { $value: "0.8125rem", $type: "dimension" },
-        // 13px
-        base: { $value: "0.9375rem", $type: "dimension" },
-        // 15px
-        lg: { $value: "1.0625rem", $type: "dimension" },
-        // 17px
-        xl: { $value: "1.3125rem", $type: "dimension" },
-        // 21px — bumped for display headings
-        "2xl": { $value: "1.75rem", $type: "dimension" }
-        // 28px — generous display
-      },
       weight: {
         normal: { $value: "400", $type: "fontWeight" },
         medium: { $value: "500", $type: "fontWeight" },
         semibold: { $value: "600", $type: "fontWeight" },
         bold: { $value: "680", $type: "fontWeight" }
         // variable-axis weight; reads bold without going harsh on Inter
-      },
-      lineHeight: {
-        tight: { $value: "1.1", $type: "number" },
-        // headings
-        normal: { $value: "1.55", $type: "number" },
-        // body — generous, editorial
-        relaxed: { $value: "1.7", $type: "number" }
       }
     },
     spacing: {
@@ -31374,24 +31249,6 @@
       }
     },
     motion: {
-      duration: {
-        fast: { $value: "150ms", $type: "duration" },
-        normal: { $value: "250ms", $type: "duration" },
-        slow: { $value: "420ms", $type: "duration" },
-        ambient: { $value: "8000ms", $type: "duration" }
-        // background breathing
-      },
-      easing: {
-        // Linear's signature easing — confident, slightly overshoots arrival.
-        default: {
-          $value: "cubic-bezier(0.32, 0.72, 0, 1)",
-          $type: "cubicBezier"
-        },
-        spring: {
-          $value: "cubic-bezier(0.16, 1, 0.3, 1)",
-          $type: "cubicBezier"
-        }
-      },
       keyframes: {
         entrance: {
           $value: "0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}",
@@ -31490,15 +31347,15 @@
         "700": { $value: "#155e75", $type: "color" },
         "800": { $value: "#164e63", $type: "color" }
       },
-      surface: { $value: "#fafaf7", $type: "color" },
+      ground: { $value: "#fafaf7", $type: "color" },
       // Paper
-      onSurface: { $value: "#15131f", $type: "color" },
+      onGround: { $value: "#15131f", $type: "color" },
       // Ink
-      surfaceVariant: { $value: "#f4f4f0", $type: "color" },
-      onSurfaceVariant: { $value: "#4a4954", $type: "color" },
-      container: { $value: "#eef2ff", $type: "color" },
+      sunken: { $value: "#f4f4f0", $type: "color" },
+      onSunken: { $value: "#4a4954", $type: "color" },
+      container: { $value: "#fafaf7", $type: "color" },
       // primary-50 — pale indigo whisper
-      onContainer: { $value: "#1e1b4b", $type: "color" },
+      onContainer: { $value: "#15131f", $type: "color" },
       // primary-900
       outline: { $value: "#d4d3cf", $type: "color" },
       outlineVariant: { $value: "#e8e7e3", $type: "color" },
@@ -31632,13 +31489,13 @@
       // indistinguishable from default. Variant is now #221e35 (visible
       // 1-tier step) and outline #3e3c50 (matches neutral-400, gives
       // borders a hairline visibility on dark).
-      surface: { $value: "#15131f", $type: "color" },
-      onSurface: { $value: "#f5f4f9", $type: "color" },
-      surfaceVariant: { $value: "#221e35", $type: "color" },
-      onSurfaceVariant: { $value: "#c8c6d2", $type: "color" },
-      container: { $value: "#312e81", $type: "color" },
+      ground: { $value: "#15131f", $type: "color" },
+      onGround: { $value: "#f5f4f9", $type: "color" },
+      sunken: { $value: "#221e35", $type: "color" },
+      onSunken: { $value: "#c8c6d2", $type: "color" },
+      container: { $value: "#15131f", $type: "color" },
       // primary-100 dark
-      onContainer: { $value: "#eef2ff", $type: "color" },
+      onContainer: { $value: "#f5f4f9", $type: "color" },
       outline: { $value: "#3e3c50", $type: "color" },
       outlineVariant: { $value: "#2a2839", $type: "color" },
       // Primary role pair — dark: onPrimary is midnight, container = deep indigo.
@@ -31695,23 +31552,11 @@
           $type: "fontFamily"
         }
       },
-      size: {
-        sm: { $value: "0.875rem", $type: "dimension" },
-        base: { $value: "1rem", $type: "dimension" },
-        lg: { $value: "1.125rem", $type: "dimension" },
-        xl: { $value: "1.25rem", $type: "dimension" },
-        "2xl": { $value: "1.5rem", $type: "dimension" }
-      },
       weight: {
         normal: { $value: "400", $type: "fontWeight" },
         medium: { $value: "500", $type: "fontWeight" },
         semibold: { $value: "600", $type: "fontWeight" },
         bold: { $value: "700", $type: "fontWeight" }
-      },
-      lineHeight: {
-        tight: { $value: "1.25", $type: "number" },
-        normal: { $value: "1.5", $type: "number" },
-        relaxed: { $value: "1.75", $type: "number" }
       }
     },
     spacing: {
@@ -31731,20 +31576,6 @@
     // round-3 "borders looking ugly" residual's shadow half), light
     // wants classic soft grey.
     motion: {
-      duration: {
-        fast: { $value: "120ms", $type: "duration" },
-        normal: { $value: "200ms", $type: "duration" },
-        slow: { $value: "400ms", $type: "duration" },
-        ambient: { $value: "2000ms", $type: "duration" }
-      },
-      easing: {
-        default: { $value: "cubic-bezier(0.4, 0, 0.2, 1)", $type: "cubicBezier" },
-        bounce: {
-          $value: "cubic-bezier(0.68, -0.55, 0.27, 1.55)",
-          $type: "cubicBezier"
-        },
-        spring: { $value: "cubic-bezier(0.22, 1, 0.36, 1)", $type: "cubicBezier" }
-      },
       transition: {
         fast: { $value: "120ms cubic-bezier(0.4, 0, 0.2, 1)", $type: "transition" },
         normal: { $value: "200ms cubic-bezier(0.4, 0, 0.2, 1)", $type: "transition" },
@@ -31813,7 +31644,6 @@
     $description: "The guuey product brand (dark) \u2014 slate-ink surfaces, slime #B8FF3A accent, DM Sans.",
     $metadata: {
       font: "DM Sans",
-      fontUrl: "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap",
       philosophy: "Agent-native. Slime on slate.",
       // Round 5 (founder-ruled): the guuey host clips the view with its
       // own rounded rim — the HOST owns the card silhouette; the theme
@@ -31903,11 +31733,11 @@
         "800": { $value: "#BFECFF", $type: "color" }
       },
       // M3 roles — portal values verbatim.
-      surface: { $value: "#1A1D24", $type: "color" },
-      onSurface: { $value: "#F6F5EE", $type: "color" },
-      surfaceVariant: { $value: "#242938", $type: "color" },
-      onSurfaceVariant: { $value: "#B7BAC4", $type: "color" },
-      container: { $value: "#232630", $type: "color" },
+      ground: { $value: "#1A1D24", $type: "color" },
+      onGround: { $value: "#F6F5EE", $type: "color" },
+      sunken: { $value: "#242938", $type: "color" },
+      onSunken: { $value: "#B7BAC4", $type: "color" },
+      container: { $value: "#1A1D24", $type: "color" },
       // elevated
       onContainer: { $value: "#F6F5EE", $type: "color" },
       // Round 4 (portal stops): .14 IS the base hairline; .18 is the
@@ -32006,11 +31836,11 @@
         "700": { $value: "#06455D", $type: "color" },
         "800": { $value: "#0A3346", $type: "color" }
       },
-      surface: { $value: "#FFFFFF", $type: "color" },
-      onSurface: { $value: "#1A1D24", $type: "color" },
-      surfaceVariant: { $value: "#F6F5EE", $type: "color" },
-      onSurfaceVariant: { $value: "#4A4F5C", $type: "color" },
-      container: { $value: "#FBFAF6", $type: "color" },
+      ground: { $value: "#FFFFFF", $type: "color" },
+      onGround: { $value: "#1A1D24", $type: "color" },
+      sunken: { $value: "#F6F5EE", $type: "color" },
+      onSunken: { $value: "#4A4F5C", $type: "color" },
+      container: { $value: "#FFFFFF", $type: "color" },
       onContainer: { $value: "#1A1D24", $type: "color" },
       outline: { $value: "rgba(26, 29, 36, 0.18)", $type: "color" },
       outlineVariant: { $value: "rgba(26, 29, 36, 0.10)", $type: "color" },
@@ -32377,6 +32207,20 @@
     "@ggui-ai/wire": "wire",
     "@ggui-ai/gadgets": "gadgets"
   };
+  function findBareImportSpecifiers(code) {
+    const out = /* @__PURE__ */ new Set();
+    const re = /(?:^|[^.\w$])(?:import|from)\s*['"]([^'"]+)['"]/g;
+    let m;
+    while ((m = re.exec(code)) !== null) {
+      const spec = m[1];
+      if (spec === void 0)
+        continue;
+      if (/^(?:[a-z][a-z0-9+.-]*:|\.{0,2}\/)/i.test(spec))
+        continue;
+      out.add(spec);
+    }
+    return [...out];
+  }
   function rewriteAssetUrl(code, opts) {
     const base = opts.shimBaseUrl.replace(/\/$/, "");
     for (const [specifier, shimName] of Object.entries(ASSET_SHIM_FOR_SPECIFIER)) {
@@ -32391,7 +32235,21 @@
     code = replaceSpecifier(code, "react", base);
     return code;
   }
+  var FORBIDDEN_IMPORT_SPECIFIERS = ["@ggui-ai/wire/internal"];
+  var ForbiddenImportSpecifierError = class extends Error {
+    specifier;
+    constructor(specifier) {
+      super(`import rewriter: generated component code imported '${specifier}', which is not available to components \u2014 it is the writer side of the wire; components read \`useRender().isConnected\` and never write it`);
+      this.name = "ForbiddenImportSpecifierError";
+      this.specifier = specifier;
+    }
+  };
   function rewriteImports(code, options) {
+    const bare = findBareImportSpecifiers(code);
+    for (const specifier of FORBIDDEN_IMPORT_SPECIFIERS) {
+      if (bare.includes(specifier))
+        throw new ForbiddenImportSpecifierError(specifier);
+    }
     switch (options.mode) {
       case "data-url":
         return rewriteDataUrl(code, options);