@ggui-ai/dev-stack 0.15.0 → 0.16.0

package/dist/hub-preview/client.js

@@ -20408,7 +20408,7 @@ var KNOWN_PERMISSION_NAMES = [
 var KNOWN_PERMISSION_NAMES_SET = new Set(KNOWN_PERMISSION_NAMES);
 
 // ../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
@@ -20450,8 +20450,7 @@ __export(dist_exports, {
   StreamBus: () => StreamBus,
   buildActionEnvelope: () => buildActionEnvelope,
   buildWireConfig: () => buildWireConfig,
-  connectionStore: () => connectionStore,
-  createConnectionStore: () => createConnectionStore,
+  connectionSource: () => connectionSource,
   useAction: () => useAction,
   useApp: () => useApp,
   useAuth: () => useAuth,
@@ -20604,10 +20603,46 @@ function useApp() {
 var import_react5 = __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 () => {
@@ -20616,22 +20651,53 @@ function createConnectionStore(initial = true) {
     },
     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_react5.useSyncExternalStore)(connectionStore.subscribe, connectionStore.getSnapshot, connectionStore.getSnapshot);
+  const isConnected = (0, import_react5.useSyncExternalStore)(connectionSource.subscribe, connectionSource.getSnapshot, connectionSource.getSnapshot);
   return { sessionId: render.sessionId, isConnected };
 }
 
@@ -20901,6 +20967,42 @@ __export2(primitives_exports, {
   useAnimationKey: () => useAnimationKey,
   useMotion: () => useMotion
 });
+var spacing = {
+  0: "0",
+  0.5: "2px",
+  1: "4px",
+  1.5: "6px",
+  2: "8px",
+  2.5: "10px",
+  3: "12px",
+  3.5: "14px",
+  4: "16px",
+  5: "20px",
+  6: "24px",
+  7: "28px",
+  8: "32px",
+  9: "36px",
+  10: "40px",
+  11: "44px",
+  12: "48px",
+  14: "56px",
+  16: "64px",
+  20: "80px",
+  24: "96px",
+  28: "112px",
+  32: "128px",
+  36: "144px",
+  40: "160px",
+  44: "176px",
+  48: "192px",
+  52: "208px",
+  56: "224px",
+  60: "240px",
+  64: "256px",
+  72: "288px",
+  80: "320px",
+  96: "384px"
+};
 var maxWidth = {
   xs: "320px",
   sm: "480px",
@@ -20992,22 +21094,23 @@ function renderWithTrait(trait, traitProps, root, children) {
 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";
   }
@@ -21021,14 +21124,15 @@ var SEMANTIC_TONE_FALLBACK = {
 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";
   }
@@ -21248,7 +21352,7 @@ var lineHeightMap = {
   "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],
@@ -21270,6 +21374,10 @@ function Text({ children, size = "base", weight = "normal", caps = false, tone,
   const elementProps = { id, htmlFor, className, style: textStyle };
   return (0, import_react11.createElement)(is, elementProps, children);
 }
+var fontFamily = {
+  sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+  mono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace'
+};
 var fontSize = {
   xs: "12px",
   sm: "14px",
@@ -21347,10 +21455,25 @@ var headingStyles = {
     letterSpacing: letterSpacing.normal
   }
 };
+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_react12.createElement)(tag, {
     className,
     style: {
@@ -21424,8 +21547,8 @@ var variantStyles = {
     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: {
@@ -21435,7 +21558,7 @@ var variantStyles = {
   },
   ghost: {
     backgroundColor: "transparent",
-    color: "var(--ggui-color-onSurfaceVariant, #52525b)",
+    color: "var(--ggui-color-onSunken, #52525b)",
     border: "none"
   },
   danger: {
@@ -21492,19 +21615,19 @@ function Input({ label, placeholder, value, onChange, type = "text", error: erro
   }, children: [label && (0, import_jsx_runtime9.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_runtime9.jsx)("span", { "aria-hidden": "true", style: { color: "var(--ggui-color-error-500, #ef4444)", marginLeft: "2px" }, children: "*" })] }), (0, import_jsx_runtime9.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_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 })] });
 }
 function TextArea({ label, placeholder, value, onChange, rows = 4, error: error2, helperText, required, disabled, maxLength, showCount, autoResize, style, className, ...rest }) {
@@ -21522,14 +21645,14 @@ function TextArea({ label, placeholder, value, onChange, rows = 4, error: error2
   }, children: [label && (0, import_jsx_runtime10.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_runtime10.jsx)("span", { "aria-hidden": "true", style: { color: "var(--ggui-color-error-500, #ef4444)", marginLeft: "2px" }, children: "*" })] }), (0, import_jsx_runtime10.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}`,
@@ -21537,10 +21660,10 @@ function TextArea({ label, placeholder, value, onChange, rows = 4, error: error2
     resize: autoResize ? "none" : "vertical"
   }, ...rest }), (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", justifyContent: "space-between" }, children: [hasMessage && (0, import_jsx_runtime10.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_runtime10.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] })] })] });
 }
@@ -21558,14 +21681,14 @@ function Select({ label, value, onChange, options, placeholder, error: error2, h
   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-onSurfaceVariant, #52525b)"
+    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: {
     ...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")`,
@@ -21576,7 +21699,7 @@ function Select({ label, value, onChange, options, placeholder, error: error2, h
     transition: `border-color ${duration.normal} ${easing.easeInOut}, box-shadow ${duration.normal} ${easing.easeInOut}`
   }, ...rest, children: [placeholder && (0, import_jsx_runtime11.jsx)("option", { value: "", disabled: true, children: placeholder }), options.map((opt) => (0, import_jsx_runtime11.jsx)("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))] }), hasMessage && (0, import_jsx_runtime11.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 })] });
 }
 function Checkbox({ label, checked, onChange, disabled, description, indeterminate, style, className }) {
@@ -21608,7 +21731,7 @@ function Checkbox({ label, checked, onChange, disabled, description, indetermina
     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",
@@ -21616,10 +21739,10 @@ function Checkbox({ label, checked, onChange, disabled, description, indetermina
   }, 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-onSurfaceVariant, #52525b)"
+    color: "var(--ggui-color-onSunken, #52525b)"
   }, children: label }), 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: description })] })] });
 }
 var sizeConfig = {
@@ -21667,7 +21790,7 @@ function Toggle({ label, checked, onChange, disabled, size = "md", style, classN
   } }) }), 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-onSurfaceVariant, #52525b)"
+    color: "var(--ggui-color-onSunken, #52525b)"
   }, children: label })] });
 }
 function RadioGroup({ label, value, onChange, options, direction = "vertical", disabled, error: error2, style, className }) {
@@ -21679,7 +21802,7 @@ function RadioGroup({ label, value, onChange, options, direction = "vertical", d
   return (0, import_jsx_runtime14.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_runtime14.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_runtime14.jsx)("div", { style: {
     display: "flex",
     flexDirection: direction === "vertical" ? "column" : "row",
@@ -21712,7 +21835,7 @@ function RadioGroup({ label, value, onChange, options, direction = "vertical", d
       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",
@@ -21725,10 +21848,10 @@ function RadioGroup({ label, value, onChange, options, direction = "vertical", d
     } }) })] }), (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-onSurfaceVariant, #52525b)"
+      color: "var(--ggui-color-onSunken, #52525b)"
     }, children: option.label }), option.description && (0, import_jsx_runtime14.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_runtime14.jsx)("span", { id: errorId, role: "alert", style: {
     fontSize: "var(--ggui-font-size-xs, 12px)",
@@ -21743,7 +21866,7 @@ function Slider({ label, value = 0, onChange, min = 0, max = 100, step = 1, disa
   return (0, import_jsx_runtime15.jsxs)("div", { className, style: { display: "flex", flexDirection: "column", gap: "var(--ggui-spacing-2, 8px)", ...style }, children: [(label || showValue) && (0, import_jsx_runtime15.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [label && (0, import_jsx_runtime15.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_runtime15.jsx)("span", { style: {
     fontSize: "var(--ggui-font-size-sm, 14px)",
     fontWeight: "var(--ggui-font-weight-medium, 500)",
@@ -21784,8 +21907,8 @@ function Slider({ label, value = 0, onChange, min = 0, max = 100, step = 1, disa
 }
 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)",
@@ -21793,7 +21916,7 @@ var variantStyles2 = {
   },
   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)",
@@ -21810,6 +21933,11 @@ var variantStyles2 = {
   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 = {
@@ -21841,7 +21969,7 @@ function Skeleton({ variant = "rect", width, height, radius: radius2 = "sm", sty
     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
   };
@@ -21971,10 +22099,10 @@ function Progress({ value, max = 100, variant = "default", size = "md", label, s
   const height = sizeHeights[size];
   const barColor = variantColors[variant];
   const accessibleName = label ?? "Progress";
-  return (0, import_jsx_runtime20.jsxs)("div", { className, style: { display: "flex", flexDirection: "column", gap: "var(--ggui-spacing-1, 4px)", ...style }, children: [showLabel && (0, import_jsx_runtime20.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [(0, import_jsx_runtime20.jsx)("span", { style: { fontSize: "var(--ggui-font-size-sm, 14px)", color: "var(--ggui-color-onSurfaceVariant, #52525b)" }, children: accessibleName }), (0, import_jsx_runtime20.jsxs)("span", { style: {
+  return (0, import_jsx_runtime20.jsxs)("div", { className, style: { display: "flex", flexDirection: "column", gap: "var(--ggui-spacing-1, 4px)", ...style }, children: [showLabel && (0, import_jsx_runtime20.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [(0, import_jsx_runtime20.jsx)("span", { style: { fontSize: "var(--ggui-font-size-sm, 14px)", color: "var(--ggui-color-onSunken, #52525b)" }, children: accessibleName }), (0, import_jsx_runtime20.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_runtime20.jsxs)("div", { role: "progressbar", "aria-valuenow": indeterminate ? void 0 : value, "aria-valuemin": 0, "aria-valuemax": max, "aria-label": accessibleName, style: {
     width: "100%",
     height,
@@ -22012,7 +22140,7 @@ function Image({ src, alt, width, height, objectFit = "cover", radius: radius2,
       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",
@@ -26050,7 +26178,7 @@ function Icon({ name, size = 24, tone, children, style, className, "aria-label":
   }, children: "?" });
 }
 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",
@@ -26142,10 +26270,10 @@ function Tooltip({ children, content, position = "top", delay = 200, style, clas
     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)",
@@ -26177,7 +26305,7 @@ function Table({ columns, data, sortKey, sortDirection = "asc", onSort, striped
     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)",
@@ -26193,11 +26321,11 @@ function Table({ columns, data, sortKey, sortDirection = "asc", onSort, striped
     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_runtime25.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_runtime25.jsx)("thead", { children: (0, import_jsx_runtime25.jsx)("tr", { children: columns.map((col) => (0, import_jsx_runtime25.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) => {
@@ -26211,13 +26339,13 @@ function Table({ columns, data, sortKey, sortDirection = "asc", onSort, striped
     width: col.width,
     cursor: col.sortable ? "pointer" : "default"
   }, children: (0, import_jsx_runtime25.jsxs)("span", { style: { display: "inline-flex", alignItems: "center" }, children: [col.header, col.sortable && sortIndicator(sortKey === col.key, sortDirection)] }) }, col.key)) }) }), (0, import_jsx_runtime25.jsx)("tbody", { children: data.map((row, rowIndex) => (0, import_jsx_runtime25.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_runtime25.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)) })] }) });
 }
 var sizeStyles5 = {
@@ -26290,7 +26418,7 @@ function Tabs({ items, activeKey, onChange, variant = "line", size = "md", fullW
     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"
       };
@@ -26298,17 +26426,17 @@ function Tabs({ items, activeKey, onChange, variant = "line", size = "md", fullW
     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"
     };
@@ -26317,7 +26445,7 @@ function Tabs({ items, activeKey, onChange, variant = "line", size = "md", fullW
     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
   };
@@ -26480,25 +26608,25 @@ var reducedMotionCSS = `@media (prefers-reduced-motion: reduce) {
 }`;
 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)"
@@ -26635,7 +26763,7 @@ function Accordion({ items, expandedKeys, onChange, multiple = false, variant =
       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_runtime28.jsx)("span", { children: item.title }), chevron(isExpanded)] }) }), (0, import_jsx_runtime28.jsx)("div", { id: `${uniqueId}-panel-${item.key}`, role: "region", "aria-labelledby": `${uniqueId}-header-${item.key}`, hidden: !isExpanded, style: {
@@ -26643,7 +26771,7 @@ function Accordion({ items, expandedKeys, onChange, multiple = false, variant =
     }, 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-onSurfaceVariant, #52525b)",
+      color: "var(--ggui-color-onSunken, #52525b)",
       lineHeight: "var(--ggui-font-lineHeight-normal, 1.5)"
     }, children: item.content }) })] }, item.key);
   }) });
@@ -26890,9 +27018,9 @@ function FormField({ label, children, error: error2, helperText, required, descr
   }, children: error2 || helperText })] });
 }
 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_runtime31.jsxs)("button", { onClick: disabled ? void 0 : onClick, disabled, className, style: {
     display: "flex",
     alignItems: "center",
@@ -27032,7 +27160,8 @@ function Dropdown({ trigger, options, value, onChange, placement = "bottom-start
     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,
@@ -27250,9 +27379,9 @@ var markerStyles = {
     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 }) {
@@ -27653,15 +27782,15 @@ function parseRichText(text) {
 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",
@@ -27690,7 +27819,7 @@ var TABLE_CELL = {
 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) => {
@@ -28268,7 +28397,8 @@ function Modal({ open, onClose, title, children, footer, size = "md", closeOnOve
     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",
@@ -28700,95 +28830,12 @@ var Pressable = (0, import_react40.forwardRef)(function Pressable2({ children, o
 function stripMarkers(code) {
   return code.replace(/__GGUI_META__[\s\S]*?__GGUI_META_END__/g, "").replace(/__GGUI_STREAM_SPEC__[\s\S]*?__GGUI_STREAM_SPEC_END__/g, "");
 }
-function formatValue(token) {
-  const v = token.$value;
-  if (Array.isArray(v)) {
-    return v.join(", ");
-  }
-  if (v !== null && typeof v === "object") {
-    const obj = v;
-    if (token.$type === "shadow" && "offsetX" in obj) {
-      return `${obj.offsetX} ${obj.offsetY} ${obj.blur} ${obj.spread} ${obj.color}`;
-    }
-    if (token.$type === "transition" && "duration" in obj && "timingFunction" in obj) {
-      const prop = typeof obj.property === "string" && obj.property ? `${obj.property} ` : "";
-      return `${prop}${obj.duration} ${obj.timingFunction}`;
-    }
-  }
-  return String(v);
-}
-function walkTokens(obj, prefix, out) {
-  for (const [key, value] of Object.entries(obj)) {
-    if (key.startsWith("$"))
-      continue;
-    if (value !== null && typeof value === "object" && "$value" in value) {
-      out.push(`  --ggui-${prefix}-${key}: ${formatValue(value)};`);
-    } else if (value !== null && typeof value === "object") {
-      walkTokens(value, `${prefix}-${key}`, out);
-    }
-  }
-}
-function buildCssVariables(theme9) {
-  const lines = [];
-  walkTokens(theme9.color, "color", lines);
-  walkTokens(theme9.font, "font", lines);
-  walkTokens(theme9.spacing, "spacing", lines);
-  walkTokens(theme9.shape, "shape", lines);
-  walkTokens({
-    duration: theme9.motion.duration,
-    easing: theme9.motion.easing,
-    transition: theme9.motion.transition
-  }, "motion", lines);
-  walkTokens(theme9.accessibility, "accessibility", lines);
-  walkTokens(theme9.zIndex, "zIndex", lines);
-  return lines.join("\n");
-}
-function expandKeyframe(name, compact) {
-  const stopRegex = /([\d.]+%|from|to)\s*\{([^}]*)\}/g;
-  const stops = [];
-  let match;
-  while ((match = stopRegex.exec(compact)) !== null) {
-    const selector = match[1];
-    const rawProps = match[2].trim();
-    const props = rawProps.split(";").map((p) => p.trim()).filter(Boolean).map((p) => p.endsWith(";") ? p : `${p};`).join(" ");
-    stops.push(`  ${selector} { ${props} }`);
-  }
-  return `@keyframes ggui-${name} {
-${stops.join("\n")}
-}`;
-}
-function buildCssKeyframes(theme9) {
-  const blocks = [];
-  for (const [name, token] of Object.entries(theme9.motion.keyframes)) {
-    if (name.startsWith("$"))
-      continue;
-    blocks.push(expandKeyframe(name, String(token.$value)));
-  }
-  return blocks.join("\n\n");
-}
-function parseTheme(id, theme9) {
-  const cssVariablesBody = buildCssVariables(theme9);
-  const cssVariables = `:root {
-${cssVariablesBody}
-}`;
-  const cssKeyframes = buildCssKeyframes(theme9);
-  const css = cssKeyframes ? `${cssVariables}
-
-${cssKeyframes}` : cssVariables;
-  return {
-    id,
-    name: theme9.$name,
-    description: theme9.$description,
-    metadata: theme9.$metadata,
-    cssVariables,
-    cssKeyframes,
-    css
-  };
-}
 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",
@@ -28796,12 +28843,16 @@ var consumed_tokens_manifest_default = {
     "--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",
@@ -28809,11 +28860,14 @@ var consumed_tokens_manifest_default = {
     "--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",
@@ -28833,11 +28887,8 @@ var consumed_tokens_manifest_default = {
     "--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",
@@ -28845,6 +28896,7 @@ var consumed_tokens_manifest_default = {
     "--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",
@@ -28857,11 +28909,11 @@ var consumed_tokens_manifest_default = {
     "--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",
@@ -28889,6 +28941,312 @@ var consumed_tokens_manifest_default = {
   ]
 };
 var consumedTokenManifest = consumed_tokens_manifest_default.tokens;
+var NON_THEME_DEFINABLE_TOKENS = [
+  "--ggui-color-primary",
+  "--ggui-color-ground-gradient",
+  "--ggui-color-ground-subtle",
+  "--ggui-flash-color"
+];
+var ThemeDocumentInvalidError = class extends Error {
+  missing;
+  constructor(missing) {
+    super(`theme document invalid: missing ${missing.join(", ")}`);
+    this.name = "ThemeDocumentInvalidError";
+    this.missing = missing;
+  }
+};
+function clamp01(v) {
+  return v < 0 ? 0 : v > 1 ? 1 : v;
+}
+function srgbToLinear(c) {
+  const v = c / 255;
+  return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+}
+function linearToSrgb8(v) {
+  const c = v <= 31308e-7 ? 12.92 * v : 1.055 * v ** (1 / 2.4) - 0.055;
+  return Math.round(clamp01(c) * 255);
+}
+function parseHex(hex) {
+  const h = hex.trim().replace(/^#/, "");
+  const full = h.length === 3 ? h.split("").map((ch) => ch + ch).join("") : h;
+  if (!/^[0-9a-fA-F]{6}$/.test(full))
+    throw new ThemeDocumentInvalidError([`colour ${JSON.stringify(hex)} is not 6-digit hex`]);
+  return [parseInt(full.slice(0, 2), 16), parseInt(full.slice(2, 4), 16), parseInt(full.slice(4, 6), 16)];
+}
+function linearToOklab(r, g, b) {
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  return [
+    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
+  ];
+}
+function oklabToLinear(L, a, b) {
+  const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  return [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  ];
+}
+function hexToOklch(hex) {
+  const [r8, g8, b8] = parseHex(hex);
+  const [L, a, b] = linearToOklab(srgbToLinear(r8), srgbToLinear(g8), srgbToLinear(b8));
+  const c = Math.hypot(a, b);
+  const h = c < 1e-6 ? 0 : (Math.atan2(b, a) * 180 / Math.PI + 360) % 360;
+  return { l: L, c, h };
+}
+var round4 = (v) => Math.round(v * 1e4) / 1e4;
+function inGamut(rgb) {
+  const eps = 1e-6;
+  return rgb.every((v) => v >= -eps && v <= 1 + eps);
+}
+function oklchToHex(color) {
+  const l = clamp01(round4(color.l));
+  const h = round4((color.h % 360 + 360) % 360);
+  let c = Math.max(0, round4(color.c));
+  const toLinear = (chroma) => {
+    const rad = h * Math.PI / 180;
+    return oklabToLinear(l, chroma * Math.cos(rad), chroma * Math.sin(rad));
+  };
+  let rgb = toLinear(c);
+  if (!inGamut(rgb)) {
+    let lo = 0;
+    let hi = c;
+    for (let i = 0; i < 24; i++) {
+      const mid = (lo + hi) / 2;
+      if (inGamut(toLinear(mid)))
+        lo = mid;
+      else
+        hi = mid;
+    }
+    c = lo;
+    rgb = toLinear(c);
+  }
+  const [r, g, b] = rgb.map(clamp01);
+  return `#${[r, g, b].map((v) => linearToSrgb8(v).toString(16).padStart(2, "0")).join("")}`;
+}
+function mixOklch(a, b, t) {
+  const A = hexToOklch(a);
+  const B = hexToOklch(b);
+  let dh = B.h - A.h;
+  if (A.c < 1e-4)
+    dh = 0;
+  else if (B.c < 1e-4)
+    dh = 0;
+  else if (dh > 180)
+    dh -= 360;
+  else if (dh < -180)
+    dh += 360;
+  const h = A.c < 1e-4 ? B.h : A.h + dh * t;
+  return oklchToHex({ l: A.l + (B.l - A.l) * t, c: A.c + (B.c - A.c) * t, h });
+}
+function relativeLuminance(hex) {
+  const [r8, g8, b8] = parseHex(hex);
+  return 0.2126 * srgbToLinear(r8) + 0.7152 * srgbToLinear(g8) + 0.0722 * srgbToLinear(b8);
+}
+function contrastRatio(a, b) {
+  const la = relativeLuminance(a);
+  const lb = relativeLuminance(b);
+  const [hi, lo] = la > lb ? [la, lb] : [lb, la];
+  return (hi + 0.05) / (lo + 0.05);
+}
+var STOPS = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"];
+var RAMP_L = [0.97, 0.93, 0.86, 0.76, 0.66, NaN, 0.5, 0.42, 0.34, 0.26];
+var RAMP_C = [0.15, 0.3, 0.5, 0.75, 0.9, 1, 0.95, 0.85, 0.7, 0.55];
+var NEUTRAL_T = [0.04, 0.08, 0.16, 0.28, 0.44, 0.58, 0.7, 0.8, 0.9, 0.96];
+var FAMILIES = ["primary", "tertiary", "success", "warning", "error", "info"];
+var NAMED_SPACING = { xs: "4px", sm: "8px", md: "16px", lg: "24px", xl: "32px", "2xl": "48px" };
+var SIZE_EXP = { xs: -2, sm: -1, base: 0, lg: 1, xl: 2, "2xl": 3, "3xl": 4, "4xl": 5 };
+function tokenValue(t) {
+  if (t === void 0 || t === null || typeof t !== "object" || !("$value" in t))
+    return void 0;
+  const v = t.$value;
+  if (typeof v === "number")
+    return String(v);
+  if (typeof v !== "string")
+    return void 0;
+  return /^#[0-9a-fA-F]{3,6}$/.test(v) ? `#${parseHex(v).map((n) => n.toString(16).padStart(2, "0")).join("")}` : v;
+}
+function stated(group, key) {
+  return tokenValue(group?.[key]);
+}
+function familyRamp(group, anchor) {
+  const a = hexToOklch(anchor);
+  const out = {};
+  STOPS.forEach((stop, i) => {
+    const s = stated(group, stop);
+    if (s !== void 0) {
+      out[stop] = s;
+      return;
+    }
+    out[stop] = stop === "500" ? anchor : oklchToHex({ l: RAMP_L[i], c: a.c * RAMP_C[i], h: a.h });
+  });
+  return out;
+}
+function onColourFor(base) {
+  return contrastRatio("#ffffff", base) >= contrastRatio("#000000", base) ? "#ffffff" : "#000000";
+}
+function parseSize(value) {
+  const m = /^([0-9.]+)\s*(rem|px|em)$/.exec(value.trim());
+  return m ? { n: Number(m[1]), unit: m[2] } : void 0;
+}
+function deriveThemeVariables(doc, mode) {
+  const c = Object.fromEntries(Object.entries(doc.color));
+  const single = (key) => tokenValue(c[key]);
+  const group = (key) => c[key];
+  const V = {};
+  const missing = [];
+  const need = (key) => {
+    const v = single(key);
+    if (v === void 0)
+      missing.push(`color.${key}`);
+    return v ?? "#000000";
+  };
+  const ground = need("ground");
+  const onGround = need("onGround");
+  const container = need("container");
+  const onContainer = need("onContainer");
+  const sunken = need("sunken");
+  const onSunken = need("onSunken");
+  Object.assign(V, {
+    "--ggui-color-ground": ground,
+    "--ggui-color-onGround": onGround,
+    "--ggui-color-container": container,
+    "--ggui-color-onContainer": onContainer,
+    "--ggui-color-sunken": sunken,
+    "--ggui-color-onSunken": onSunken,
+    "--ggui-color-elevated": mode === "light" ? container : mixOklch(container, onContainer, 0.08),
+    "--ggui-color-onElevated": onContainer
+  });
+  const neutral = group("neutral");
+  STOPS.forEach((stop, i) => {
+    V[`--ggui-color-neutral-${stop}`] = stated(neutral, stop) ?? mixOklch(ground, onGround, NEUTRAL_T[i]);
+  });
+  V["--ggui-color-outline"] = single("outline") ?? V["--ggui-color-neutral-300"];
+  V["--ggui-color-outlineVariant"] = single("outlineVariant") ?? V["--ggui-color-neutral-200"];
+  const primaryAnchor = stated(group("primary"), "500");
+  if (primaryAnchor === void 0)
+    missing.push("color.primary.500");
+  for (const fam of FAMILIES) {
+    const g = group(fam);
+    let anchor = fam === "tertiary" ? single("tertiary") : stated(g, "500");
+    if (anchor === void 0) {
+      if (fam === "tertiary")
+        anchor = primaryAnchor ?? "#000000";
+      else {
+        missing.push(`color.${fam}.500`);
+        anchor = "#000000";
+      }
+    }
+    const ramp2 = familyRamp(g, anchor);
+    for (const stop of STOPS)
+      V[`--ggui-color-${fam}-${stop}`] = ramp2[stop];
+    const cap = fam[0].toUpperCase() + fam.slice(1);
+    V[`--ggui-color-on${cap}`] = single(`on${cap}`) ?? onColourFor(ramp2["500"]);
+    V[`--ggui-color-${fam}Container`] = single(`${fam}Container`) ?? (mode === "light" ? ramp2["100"] : ramp2["800"]);
+    V[`--ggui-color-on${cap}Container`] = single(`on${cap}Container`) ?? (mode === "light" ? ramp2["900"] : ramp2["100"]);
+  }
+  V["--ggui-color-error"] = V["--ggui-color-error-500"];
+  V["--ggui-color-link"] = single("link") ?? V["--ggui-color-primary-600"];
+  const family = doc.font.family;
+  const sans = tokenValue(family.sans) ?? fontFamily.sans;
+  V["--ggui-font-family-sans"] = sans;
+  V["--ggui-font-family-mono"] = tokenValue(family.mono) ?? fontFamily.mono;
+  V["--ggui-font-family-heading"] = tokenValue(family.heading) ?? sans;
+  const weights = doc.font.weight;
+  for (const w of ["normal", "medium", "semibold", "bold"])
+    V[`--ggui-font-weight-${w}`] = stated(weights, w) ?? String(fontWeight[w]);
+  V["--ggui-font-weight-heading"] = stated(weights, "heading") ?? String(fontWeight.bold);
+  const spacingT = doc.font.letterSpacing;
+  V["--ggui-letter-spacing-body"] = stated(spacingT, "body") ?? "0em";
+  V["--ggui-letter-spacing-heading"] = stated(spacingT, "heading") ?? "-0.01em";
+  for (const lh of Object.keys(lineHeight))
+    V[`--ggui-font-lineHeight-${lh}`] = String(lineHeight[lh]);
+  const ramp = doc.font.ramp;
+  const base = ramp ? parseSize(tokenValue(ramp.base) ?? "") : void 0;
+  const ratio = ramp ? Number(tokenValue(ramp.ratio)) : NaN;
+  for (const [stop, exp] of Object.entries(SIZE_EXP)) {
+    V[`--ggui-font-size-${stop}`] = base && Number.isFinite(ratio) && ratio > 0 ? `${Math.round(base.n * ratio ** exp * 1e3) / 1e3}${base.unit}` : fontSize[stop];
+  }
+  const sp = doc.spacing;
+  for (const [key, value] of Object.entries(spacing))
+    V[`--ggui-spacing-${key}`] = stated(sp, key) ?? String(value);
+  for (const [key, value] of Object.entries(NAMED_SPACING))
+    V[`--ggui-spacing-${key}`] = stated(sp, key) ?? value;
+  const rad = doc.shape?.radius;
+  for (const [key, value] of Object.entries(radius))
+    V[`--ggui-shape-radius-${key}`] = stated(rad, key) ?? String(value);
+  const sh = doc.shape?.shadow;
+  for (const [key, value] of Object.entries(shadow))
+    V[`--ggui-shape-shadow-${key}`] = stated(sh, key) ?? String(value);
+  if (missing.length > 0)
+    throw new ThemeDocumentInvalidError(missing);
+  const floor = new Set(NON_THEME_DEFINABLE_TOKENS);
+  const out = {};
+  const gaps = [];
+  for (const name of consumedTokenManifest) {
+    if (floor.has(name))
+      continue;
+    const v = V[name];
+    if (v === void 0)
+      gaps.push(name);
+    else
+      out[name] = v;
+  }
+  if (gaps.length > 0)
+    throw new Error(`deriveThemeVariables: no rule for manifest token(s) ${gaps.join(", ")} \u2014 extend the \xA72.4 table`);
+  return out;
+}
+function buildCssVariables(theme9, mode) {
+  return Object.entries(deriveThemeVariables(theme9, mode)).sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0).map(([name, value]) => `  ${name}: ${value};`).join("\n");
+}
+function expandKeyframe(name, compact) {
+  const stopRegex = /([\d.]+%|from|to)\s*\{([^}]*)\}/g;
+  const stops = [];
+  let match;
+  while ((match = stopRegex.exec(compact)) !== null) {
+    const selector = match[1];
+    const rawProps = match[2].trim();
+    const props = rawProps.split(";").map((p) => p.trim()).filter(Boolean).map((p) => p.endsWith(";") ? p : `${p};`).join(" ");
+    stops.push(`  ${selector} { ${props} }`);
+  }
+  return `@keyframes ggui-${name} {
+${stops.join("\n")}
+}`;
+}
+function buildCssKeyframes(theme9) {
+  const blocks = [];
+  for (const [name, token] of Object.entries(theme9.motion.keyframes)) {
+    if (name.startsWith("$"))
+      continue;
+    blocks.push(expandKeyframe(name, String(token.$value)));
+  }
+  return blocks.join("\n\n");
+}
+function parseTheme(id, theme9, mode = "light") {
+  const cssVariablesBody = buildCssVariables(theme9, mode);
+  const cssVariables = `:root {
+${cssVariablesBody}
+}`;
+  const cssKeyframes = buildCssKeyframes(theme9);
+  const css = cssKeyframes ? `${cssVariables}
+
+${cssKeyframes}` : cssVariables;
+  return {
+    id,
+    name: theme9.$name,
+    description: theme9.$description,
+    metadata: theme9.$metadata,
+    cssVariables,
+    cssKeyframes,
+    css
+  };
+}
 var standardSemanticScales = {
   light: {
     success: {
@@ -29044,28 +29402,11 @@ var shared = {
         $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: {
@@ -29126,26 +29467,6 @@ var shared = {
     }
   },
   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": {
@@ -29168,7 +29489,6 @@ var gguiLight = {
   $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: {
@@ -29261,15 +29581,15 @@ var gguiLight = {
       "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
@@ -29324,7 +29644,6 @@ var gguiDark = {
   $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: {
@@ -29414,15 +29733,15 @@ var gguiDark = {
       "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
@@ -29485,23 +29804,11 @@ var shared2 = {
         $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: {
@@ -29534,26 +29841,6 @@ var shared2 = {
     }
   },
   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}",
@@ -29604,7 +29891,6 @@ var cyberpunkLight = {
   $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: {
@@ -29673,12 +29959,12 @@ var cyberpunkLight = {
       "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
@@ -29725,7 +30011,6 @@ var cyberpunkDark = {
   $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: {
@@ -29800,13 +30085,13 @@ var cyberpunkDark = {
       "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.
@@ -29860,23 +30145,11 @@ var shared3 = {
         $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: {
@@ -29918,26 +30191,6 @@ var shared3 = {
     }
   },
   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}",
@@ -29967,7 +30220,6 @@ var zenLight = {
   $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: {
@@ -30035,12 +30287,12 @@ var zenLight = {
       "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.
@@ -30084,7 +30336,6 @@ var zenDark = {
   $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: {
@@ -30153,14 +30404,14 @@ var zenDark = {
       "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" },
@@ -30214,23 +30465,11 @@ var shared4 = {
         $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: {
@@ -30263,26 +30502,6 @@ var shared4 = {
     }
   },
   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)",
@@ -30330,7 +30549,6 @@ var neonNoirLight = {
   $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: {
@@ -30375,12 +30593,12 @@ var neonNoirLight = {
       "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.
@@ -30422,7 +30640,6 @@ var neonNoirDark = {
   $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: {
@@ -30468,13 +30685,13 @@ var neonNoirDark = {
       ...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.
@@ -30524,23 +30741,11 @@ var shared5 = {
         $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: {
@@ -30582,26 +30787,6 @@ var shared5 = {
     }
   },
   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}",
@@ -30624,7 +30809,6 @@ var botanicalLight = {
   $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: {
@@ -30673,12 +30857,12 @@ var botanicalLight = {
     },
     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.
@@ -30720,7 +30904,6 @@ var botanicalDark = {
   $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: {
@@ -30755,13 +30938,13 @@ var botanicalDark = {
     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.
@@ -30828,24 +31011,11 @@ var shared6 = {
         $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
@@ -30903,21 +31073,6 @@ var shared6 = {
   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}",
@@ -31018,15 +31173,15 @@ var claudicLight = {
       "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" },
@@ -31158,14 +31313,14 @@ var claudicDark = {
       "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
@@ -31230,31 +31385,12 @@ var shared7 = {
         $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: {
@@ -31311,24 +31447,6 @@ var shared7 = {
     }
   },
   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}",
@@ -31427,15 +31545,15 @@ var indigoLight = {
       "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" },
@@ -31569,13 +31687,13 @@ var indigoDark = {
     // 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.
@@ -31634,23 +31752,11 @@ var shared8 = {
         $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: {
@@ -31670,20 +31776,6 @@ var shared8 = {
   // 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" },
@@ -31752,7 +31844,6 @@ var guueyBrandDark = {
   $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
@@ -31842,11 +31933,11 @@ var guueyBrandDark = {
       "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
@@ -31945,11 +32036,11 @@ var guueyBrandLight = {
       "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" },
@@ -32093,28 +32184,34 @@ function getScopedThemeCss(themeId, scopeClass, mode = "light") {
   }
   const primary500 = resolvePrimary500Hex(theme9.cssVariables);
   const scoped = withColorMixFallback(theme9.cssVariables.replace(/^:root\s*\{/, `.${scopeClass} {`), `.${scopeClass}`, primary500);
-  const baseInherits = `.${scopeClass} {
-  font-family: var(--ggui-font-family-sans);
-  color: var(--ggui-color-onSurface);
-  background-color: transparent;
-}`;
+  const baseInherits = baseInheritsRule(scopeClass);
   const gradientTokens = buildGradientTokens(scopeClass, primary500);
-  const framelessRule = theme9.metadata?.frameless === true ? `
-.${scopeClass} > :where(:not(style)) { border: none !important; }` : "";
+  const framelessRule = theme9.metadata?.frameless === true ? framelessSuppressionRule(scopeClass) : "";
   return `${scoped}
 ${baseInherits}
 ${gradientTokens}
 ${theme9.cssKeyframes}
 ${structuralScaffolding(scopeClass)}${framelessRule}`;
 }
+function framelessSuppressionRule(scopeClass) {
+  return `
+.${scopeClass} > :where(:not(style)) { border: none !important; }`;
+}
 function structuralScaffolding(scopeClass) {
   return `.${scopeClass} *, .${scopeClass} *::before, .${scopeClass} *::after { box-sizing: border-box; }
 .${scopeClass} h1, .${scopeClass} h2, .${scopeClass} h3, .${scopeClass} h4, .${scopeClass} h5, .${scopeClass} h6, .${scopeClass} button, .${scopeClass} input, .${scopeClass} textarea, .${scopeClass} select { font-family: inherit; }`;
 }
+function baseInheritsRule(scopeClass) {
+  return `.${scopeClass} {
+  font-family: var(--ggui-font-family-sans);
+  color: var(--ggui-color-onGround);
+  background-color: transparent;
+}`;
+}
 function buildGradientTokens(scopeClass, primary500Hex) {
   const selector = `.${scopeClass}`;
   const primaryGradient = `  --ggui-color-primary-gradient: linear-gradient(135deg, var(--ggui-color-primary-500) 0%, var(--ggui-color-primary-600) 100%);`;
-  const surfaceGradientModern = `  --ggui-color-surface-gradient: linear-gradient(180deg, var(--ggui-color-surface) 0%, color-mix(in srgb, var(--ggui-color-primary-500) 4%, var(--ggui-color-surface)) 100%);`;
+  const surfaceGradientModern = `  --ggui-color-ground-gradient: linear-gradient(180deg, var(--ggui-color-ground) 0%, color-mix(in srgb, var(--ggui-color-primary-500) 4%, var(--ggui-color-ground)) 100%);`;
   const glowModern = `  --ggui-effect-glow-primary: 0 0 0 4px color-mix(in srgb, var(--ggui-color-primary-500) 18%, transparent);`;
   const glowStrongModern = `  --ggui-effect-glow-primary-strong: 0 8px 24px -4px color-mix(in srgb, var(--ggui-color-primary-500) 40%, transparent), 0 0 0 1px color-mix(in srgb, var(--ggui-color-primary-500) 30%, transparent) inset;`;
   if (!primary500Hex) {
@@ -32125,7 +32222,7 @@ ${glowModern}
 ${glowStrongModern}
 }`;
   }
-  const surfaceGradientFallback = `  --ggui-color-surface-gradient: linear-gradient(180deg, var(--ggui-color-surface) 0%, var(--ggui-color-surface) 100%);`;
+  const surfaceGradientFallback = `  --ggui-color-ground-gradient: linear-gradient(180deg, var(--ggui-color-ground) 0%, var(--ggui-color-ground) 100%);`;
   const glowFallback = `  --ggui-effect-glow-primary: ${precomputePrimaryColorMix("0 0 0 4px color-mix(in srgb, var(--ggui-color-primary-500) 18%, transparent)", primary500Hex)};`;
   const glowStrongFallback = `  --ggui-effect-glow-primary-strong: ${precomputePrimaryColorMix("0 8px 24px -4px color-mix(in srgb, var(--ggui-color-primary-500) 40%, transparent), 0 0 0 1px color-mix(in srgb, var(--ggui-color-primary-500) 30%, transparent) inset", primary500Hex)};`;
   const baseBlock = `${selector} {
@@ -32486,6 +32583,20 @@ var ASSET_SHIM_FOR_SPECIFIER = {
   "@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)) {
@@ -32500,7 +32611,21 @@ function rewriteImportmap(code, opts) {
   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);
@@ -32579,7 +32704,7 @@ var ErrorBoundary = class extends import_react8.default.Component {
         gap: 8,
         fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
         fontSize: 13,
-        color: "var(--ggui-color-onSurface, inherit)",
+        color: "var(--ggui-color-onContainer, inherit)",
         opacity: 0.6
       }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { style: {
@@ -32604,7 +32729,7 @@ var ErrorBoundary = class extends import_react8.default.Component {
       gap: 12,
       textAlign: "center",
       fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-      color: "var(--ggui-color-onSurface, inherit)"
+      color: "var(--ggui-color-onContainer, inherit)"
     }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { style: {
         width: 48,