@ggui-ai/dev-stack 0.24.0 → 0.26.0

package/README.md

@@ -1,6 +1,6 @@
 # @ggui-ai/dev-stack
 
-> Shared local dev engine for the [ggui](https://github.com/ggui-ai/ggui) protocol.
+> Shared local dev engine for the [GGUI](https://github.com/ggui-ai/ggui) protocol.
 
 [![npm version](https://img.shields.io/npm/v/@ggui-ai/dev-stack.svg)](https://www.npmjs.com/package/@ggui-ai/dev-stack)
 [![License: Apache 2.0](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](./LICENSE)

package/dist/hub-preview/client.js

@@ -19920,7 +19920,7 @@ var require_jsx_runtime = __commonJS({
 });
 
 // hub-preview-client/main.tsx
-var import_react45 = __toESM(require_react(), 1);
+var import_react46 = __toESM(require_react(), 1);
 var import_client = __toESM(require_client(), 1);
 
 // ../mcp-apps-react/dist/chunk-7P6ASYW6.mjs
@@ -20437,8 +20437,8 @@ function makeActionEnvelope(parts) {
 }
 
 // ../mcp-apps-react/dist/index.mjs
-var import_react7 = __toESM(require_react(), 1);
 var import_react8 = __toESM(require_react(), 1);
+var import_react9 = __toESM(require_react(), 1);
 var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
 
 // ../wire/dist/index.js
@@ -20452,6 +20452,7 @@ __export(dist_exports, {
   buildWireConfig: () => buildWireConfig,
   connectionSource: () => connectionSource,
   useAction: () => useAction,
+  useActionPending: () => useActionPending,
   useActionSpent: () => useActionSpent,
   useApp: () => useApp,
   useAuth: () => useAuth,
@@ -20554,8 +20555,19 @@ function useActionSpent(actionName) {
   return (0, import_react3.useSyncExternalStore)(subscribe, read, read);
 }
 
-// ../wire/dist/useGguiContext.js
+// ../wire/dist/action-pending.js
 var import_react4 = __toESM(require_react(), 1);
+var ActionPendingContext = (0, import_react4.createContext)(null);
+var noSubscription2 = () => () => void 0;
+function useActionPending(actionName) {
+  const source = (0, import_react4.useContext)(ActionPendingContext);
+  const subscribe = (0, import_react4.useCallback)((listener) => source === null ? noSubscription2() : source.subscribe(listener), [source]);
+  const read = (0, import_react4.useCallback)(() => source === null ? false : source.isPending(actionName), [source, actionName]);
+  return (0, import_react4.useSyncExternalStore)(subscribe, read, read);
+}
+
+// ../wire/dist/useGguiContext.js
+var import_react5 = __toESM(require_react(), 1);
 function useGguiContext(slotName) {
   const contextName = slotName.length === 0 ? "Context" : slotName.charAt(0).toUpperCase() + slotName.slice(1) + "Context";
   const registry = globalThis.__ggui__?.contexts;
@@ -20563,19 +20575,19 @@ function useGguiContext(slotName) {
   if (!ctx) {
     throw new Error(`[ggui] useGguiContext('${slotName}'): no Context registered. The contract must declare 'contextSpec.${slotName}' AND the runtime must have synthesized the per-slot React Context at boot. If you see this in production code generated by the LLM, the boilerplate's destructure line drifted from the contract.`);
   }
-  return (0, import_react4.useContext)(ctx);
+  return (0, import_react5.useContext)(ctx);
 }
 
 // ../wire/dist/useStream.js
-var import_react5 = __toESM(require_react(), 1);
+var import_react6 = __toESM(require_react(), 1);
 function useStream(channelName) {
   const { subscribe } = useWireContext();
-  const [latest, setLatest] = (0, import_react5.useState)(null);
-  const [all, setAll] = (0, import_react5.useState)([]);
-  const [isComplete, setIsComplete] = (0, import_react5.useState)(false);
-  const allRef = (0, import_react5.useRef)(all);
+  const [latest, setLatest] = (0, import_react6.useState)(null);
+  const [all, setAll] = (0, import_react6.useState)([]);
+  const [isComplete, setIsComplete] = (0, import_react6.useState)(false);
+  const allRef = (0, import_react6.useRef)(all);
   allRef.current = all;
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     return subscribe(channelName, (delivery) => {
       const typed = delivery.payload;
       setLatest(typed);
@@ -20613,7 +20625,7 @@ function useApp() {
 }
 
 // ../wire/dist/useRender.js
-var import_react6 = __toESM(require_react(), 1);
+var import_react7 = __toESM(require_react(), 1);
 
 // ../wire/dist/connection-store.js
 var ConnectionWriterConflictError = class extends Error {
@@ -20710,7 +20722,7 @@ var connectionSource = documentStore.source;
 // ../wire/dist/useRender.js
 function useRender() {
   const { render } = useWireContext();
-  const isConnected = (0, import_react6.useSyncExternalStore)(connectionSource.subscribe, connectionSource.getSnapshot, connectionSource.getSnapshot);
+  const isConnected = (0, import_react7.useSyncExternalStore)(connectionSource.subscribe, connectionSource.getSnapshot, connectionSource.getSnapshot);
   return { sessionId: render.sessionId, isConnected };
 }
 
@@ -20804,6 +20816,7 @@ var StreamBus = class {
     }
   }
 };
+var DEFAULT_ACTION_PENDING_BOUND_MS = 2e4;
 function buildWireConfig(opts) {
   let internalSeq = 0;
   const nextClientSeq = opts.nextClientSeq ?? (() => {
@@ -20828,8 +20841,43 @@ function buildWireConfig(opts) {
     }
   };
   opts.spentInputsChanged?.(notifySpent);
+  const pendingBoundMs = opts.actionPendingBoundMs ?? DEFAULT_ACTION_PENDING_BOUND_MS;
+  const pending = /* @__PURE__ */ new Map();
+  const pendingListeners = /* @__PURE__ */ new Set();
+  const notifyPending = () => {
+    for (const listener of [...pendingListeners])
+      listener();
+  };
+  const markPending = (actionName) => {
+    const previous = pending.get(actionName);
+    if (previous !== void 0)
+      clearTimeout(previous);
+    pending.set(actionName, setTimeout(() => {
+      pending.delete(actionName);
+      notifyPending();
+    }, pendingBoundMs));
+    notifyPending();
+  };
+  const actionPending = {
+    isPending: (actionName) => pending.has(actionName),
+    subscribe: (listener) => {
+      pendingListeners.add(listener);
+      return () => {
+        pendingListeners.delete(listener);
+      };
+    }
+  };
+  opts.pendingInputsChanged?.(() => {
+    if (pending.size === 0)
+      return;
+    for (const timer of pending.values())
+      clearTimeout(timer);
+    pending.clear();
+    notifyPending();
+  });
   return {
     actionSpent,
+    actionPending,
     app: opts.app,
     render: opts.render,
     auth: opts.auth,
@@ -20862,6 +20910,7 @@ function buildWireConfig(opts) {
       const result = validateEnvelope(actionSpec, envelope);
       if (!result.valid) {
         opts.onViolation(new ClientContractViolationError("outbound-action", result.violations));
+        opts.onDispatchRefused?.({ actionName, violations: result.violations });
         return;
       }
       if (isOneShot && !spentOneShots.has(actionName)) {
@@ -20869,6 +20918,7 @@ function buildWireConfig(opts) {
         notifySpent();
       }
       opts.emitEnvelope(envelope);
+      markPending(actionName);
     },
     subscribe: (channelName, handler) => {
       return opts.streamBus.subscribe(channelName, (env) => {
@@ -20883,65 +20933,65 @@ function buildWireConfig(opts) {
 }
 
 // ../mcp-apps-react/dist/index.mjs
-var import_react9 = __toESM(require_react(), 1);
+var import_react10 = __toESM(require_react(), 1);
 var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime4 = __toESM(require_jsx_runtime(), 1);
-var import_react10 = __toESM(require_react(), 1);
 var import_react11 = __toESM(require_react(), 1);
+var import_react12 = __toESM(require_react(), 1);
 var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime8 = __toESM(require_jsx_runtime(), 1);
-var import_react12 = __toESM(require_react(), 1);
 var import_react13 = __toESM(require_react(), 1);
+var import_react14 = __toESM(require_react(), 1);
 var import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime11 = __toESM(require_jsx_runtime(), 1);
-var import_react14 = __toESM(require_react(), 1);
-var import_jsx_runtime12 = __toESM(require_jsx_runtime(), 1);
 var import_react15 = __toESM(require_react(), 1);
-var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime12 = __toESM(require_jsx_runtime(), 1);
 var import_react16 = __toESM(require_react(), 1);
+var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1);
+var import_react17 = __toESM(require_react(), 1);
 var import_jsx_runtime14 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime15 = __toESM(require_jsx_runtime(), 1);
-var import_react17 = __toESM(require_react(), 1);
-var import_jsx_runtime16 = __toESM(require_jsx_runtime(), 1);
 var import_react18 = __toESM(require_react(), 1);
-var import_jsx_runtime17 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime16 = __toESM(require_jsx_runtime(), 1);
 var import_react19 = __toESM(require_react(), 1);
+var import_jsx_runtime17 = __toESM(require_jsx_runtime(), 1);
+var import_react20 = __toESM(require_react(), 1);
 var import_jsx_runtime18 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime19 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime20 = __toESM(require_jsx_runtime(), 1);
-var import_react20 = __toESM(require_react(), 1);
+var import_react21 = __toESM(require_react(), 1);
 var import_jsx_runtime21 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime22 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime23 = __toESM(require_jsx_runtime(), 1);
-var import_react21 = __toESM(require_react(), 1);
-var import_jsx_runtime24 = __toESM(require_jsx_runtime(), 1);
 var import_react22 = __toESM(require_react(), 1);
+var import_jsx_runtime24 = __toESM(require_jsx_runtime(), 1);
+var import_react23 = __toESM(require_react(), 1);
 var import_jsx_runtime25 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime26 = __toESM(require_jsx_runtime(), 1);
-var import_react23 = __toESM(require_react(), 1);
-var import_jsx_runtime27 = __toESM(require_jsx_runtime(), 1);
 var import_react24 = __toESM(require_react(), 1);
-var import_jsx_runtime28 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime27 = __toESM(require_jsx_runtime(), 1);
 var import_react25 = __toESM(require_react(), 1);
-var import_jsx_runtime29 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime28 = __toESM(require_jsx_runtime(), 1);
 var import_react26 = __toESM(require_react(), 1);
-var import_jsx_runtime30 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime29 = __toESM(require_jsx_runtime(), 1);
 var import_react27 = __toESM(require_react(), 1);
+var import_jsx_runtime30 = __toESM(require_jsx_runtime(), 1);
 var import_react28 = __toESM(require_react(), 1);
-var import_jsx_runtime31 = __toESM(require_jsx_runtime(), 1);
 var import_react29 = __toESM(require_react(), 1);
+var import_jsx_runtime31 = __toESM(require_jsx_runtime(), 1);
+var import_react30 = __toESM(require_react(), 1);
 var import_jsx_runtime32 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime33 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime34 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime35 = __toESM(require_jsx_runtime(), 1);
-var import_react30 = __toESM(require_react(), 1);
-var import_jsx_runtime36 = __toESM(require_jsx_runtime(), 1);
 var import_react31 = __toESM(require_react(), 1);
-var import_jsx_runtime37 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime36 = __toESM(require_jsx_runtime(), 1);
 var import_react32 = __toESM(require_react(), 1);
+var import_jsx_runtime37 = __toESM(require_jsx_runtime(), 1);
+var import_react33 = __toESM(require_react(), 1);
 var import_jsx_runtime38 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime39 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime40 = __toESM(require_jsx_runtime(), 1);
@@ -20949,38 +20999,38 @@ var import_jsx_runtime41 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime42 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime43 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime44 = __toESM(require_jsx_runtime(), 1);
-var import_react33 = __toESM(require_react(), 1);
+var import_react34 = __toESM(require_react(), 1);
 var import_jsx_runtime45 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime46 = __toESM(require_jsx_runtime(), 1);
-var import_react34 = __toESM(require_react(), 1);
+var import_react35 = __toESM(require_react(), 1);
 var import_jsx_runtime47 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime48 = __toESM(require_jsx_runtime(), 1);
-var import_react35 = __toESM(require_react(), 1);
+var import_react36 = __toESM(require_react(), 1);
 var import_jsx_runtime49 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime50 = __toESM(require_jsx_runtime(), 1);
-var import_react36 = __toESM(require_react(), 1);
+var import_react37 = __toESM(require_react(), 1);
 var import_jsx_runtime51 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime52 = __toESM(require_jsx_runtime(), 1);
-var import_react37 = __toESM(require_react(), 1);
-var import_jsx_runtime53 = __toESM(require_jsx_runtime(), 1);
 var import_react38 = __toESM(require_react(), 1);
+var import_jsx_runtime53 = __toESM(require_jsx_runtime(), 1);
+var import_react39 = __toESM(require_react(), 1);
 var import_jsx_runtime54 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime55 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime56 = __toESM(require_jsx_runtime(), 1);
-var import_react39 = __toESM(require_react(), 1);
-var import_jsx_runtime57 = __toESM(require_jsx_runtime(), 1);
 var import_react40 = __toESM(require_react(), 1);
-var import_jsx_runtime58 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime57 = __toESM(require_jsx_runtime(), 1);
 var import_react41 = __toESM(require_react(), 1);
-var import_jsx_runtime59 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime58 = __toESM(require_jsx_runtime(), 1);
 var import_react42 = __toESM(require_react(), 1);
+var import_jsx_runtime59 = __toESM(require_jsx_runtime(), 1);
+var import_react43 = __toESM(require_react(), 1);
 var import_jsx_runtime60 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime61 = __toESM(require_jsx_runtime(), 1);
-var import_react43 = __toESM(require_react(), 1);
+var import_react44 = __toESM(require_react(), 1);
 var import_jsx_runtime62 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime63 = __toESM(require_jsx_runtime(), 1);
-var import_react44 = __toESM(require_react(), 1);
-var GguiContext = (0, import_react8.createContext)(null);
+var import_react45 = __toESM(require_react(), 1);
+var GguiContext = (0, import_react9.createContext)(null);
 var KNOWN_PERMISSION_NAMES_SET2 = new Set(KNOWN_PERMISSION_NAMES);
 var primitives_exports = {};
 __export2(primitives_exports, {
@@ -21149,9 +21199,9 @@ function frameAttributes(frame) {
 function renderWithTrait(trait, traitProps, root, children) {
   const marks = frameAttributes(root.frame);
   if (trait === void 0) {
-    return (0, import_react10.createElement)("div", { className: root.className, style: root.style, ...marks }, children);
+    return (0, import_react11.createElement)("div", { className: root.className, style: root.style, ...marks }, children);
   }
-  return (0, import_react10.createElement)(trait, { ...traitProps, className: root.className, style: root.style, ...marks }, children);
+  return (0, import_react11.createElement)(trait, { ...traitProps, className: root.className, style: root.style, ...marks }, children);
 }
 function resolveToneCss(tone) {
   switch (tone) {
@@ -21196,7 +21246,7 @@ function surfaceScopeCss(cls, name, bg, ink, accent, outlineOpen) {
   const inkAlias = "--ggui-surface-" + name + "-ink";
   const B = "var(" + bgAlias + ")";
   const I = "var(" + inkAlias + ")";
-  return `.${cls}{${bgAlias}:${bg};${inkAlias}:${ink};--ggui-color-onInverted:${ink}}.${cls}>*{--ggui-color-container:${B};--ggui-color-onContainer:${I};--ggui-color-elevated:${B};--ggui-color-onElevated:${I};--ggui-color-sunken:${B};--ggui-color-onSunken:${I};--ggui-color-neutral-500:${I};--ggui-color-ground:${B};--ggui-color-onGround:${I};--ggui-color-link:${accent}}@supports (color: color-mix(in srgb, red, blue)){.${cls}>*{--ggui-color-container:color-mix(in srgb, ${B} 94%, ${I});--ggui-color-elevated:color-mix(in srgb, ${B} 92%, ${I});--ggui-color-sunken:color-mix(in srgb, ${B} 88%, ${I});--ggui-color-onSunken:color-mix(in srgb, ${I} 76%, ${B});--ggui-color-neutral-500:color-mix(in srgb, ${I} 62%, ${B});--ggui-color-outline:${outlineOpen}color-mix(in srgb, ${I} 32%, ${B}));--ggui-color-outlineVariant:color-mix(in srgb, ${I} 18%, ${B})}}`;
+  return `.${cls}{${bgAlias}:${bg};${inkAlias}:${ink};--ggui-color-onInverted:${ink}}.${cls}>*{--ggui-color-container:${B};--ggui-color-onContainer:${I};--ggui-color-elevated:${B};--ggui-color-onElevated:${I};--ggui-color-sunken:${B};--ggui-color-onSunken:${I};--ggui-color-neutral-500:${I};--ggui-color-ground:${B};--ggui-color-onGround:${I};--ggui-color-link:${accent};--ggui-color-controlAccentOutline:${accent}}@supports (color: color-mix(in srgb, red, blue)){.${cls}>*{--ggui-color-container:color-mix(in srgb, ${B} 94%, ${I});--ggui-color-elevated:color-mix(in srgb, ${B} 92%, ${I});--ggui-color-sunken:color-mix(in srgb, ${B} 88%, ${I});--ggui-color-onSunken:color-mix(in srgb, ${I} 76%, ${B});--ggui-color-neutral-500:color-mix(in srgb, ${I} 62%, ${B});--ggui-color-outline:${outlineOpen}color-mix(in srgb, ${I} 32%, ${B}));--ggui-color-controlOutline:${outlineOpen}color-mix(in srgb, ${I} 32%, ${B}));--ggui-color-outlineVariant:color-mix(in srgb, ${I} 18%, ${B})}}`;
 }
 var INVERTED_SCOPE_CSS = surfaceScopeCss(
   INVERTED_SCOPE_CLASS,
@@ -21335,7 +21385,7 @@ function Stack(props) {
   return renderWithTrait(Trait, traitProps, { className, style: composedStyle }, children);
 }
 function Row(props) {
-  return (0, import_react11.createElement)(Stack, { ...props, direction: "horizontal" });
+  return (0, import_react12.createElement)(Stack, { ...props, direction: "horizontal" });
 }
 var BREAKPOINTS = [
   ["sm", 640],
@@ -21504,7 +21554,7 @@ function Text({ children, size = "base", weight = "normal", caps = false, tone,
     ...style
   };
   const elementProps = { id, htmlFor, className, style: textStyle };
-  return (0, import_react12.createElement)(is, elementProps, children);
+  return (0, import_react13.createElement)(is, elementProps, children);
 }
 var fontFamily = {
   sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
@@ -21606,7 +21656,7 @@ function Heading({ children, level = 2, tone, align, style, className }) {
     letterSpacing: `var(--ggui-letter-spacing-heading, ${fallback.letterSpacing})`
   };
   const resolvedColor = tone ? resolveToneCss(tone) : "var(--ggui-color-onContainer, #18181b)";
-  return (0, import_react13.createElement)(tag, {
+  return (0, import_react14.createElement)(tag, {
     className,
     style: {
       ...headingStyle,
@@ -21695,7 +21745,8 @@ var variantStyles = {
   },
   secondary: {
     backgroundColor: "var(--ggui-color-sunken, #f4f4f5)",
-    color: "var(--ggui-color-onSunken, #52525b)",
+    // The label reads at full strength; the chip marks the rank (ggui#1566).
+    color: "var(--ggui-color-onContainer, #18181b)",
     border: "none"
   },
   outline: {
@@ -21704,13 +21755,15 @@ var variantStyles = {
     // label is the surface's own on-colour, never a brand-ladder stop
     // (ggui#1034): `primary-600` as the label read mid-grey on a monochrome
     // dark theme's ground — 2.41:1 / 3.5:1 on served reply chips. The brand
-    // stays on the border, where contrast is decorative.
+    // stays on the border, and the border identifies the control, so it is the
+    // first brand stop that clears 3:1 on the container (ggui#1494).
     color: "var(--ggui-color-onContainer, #18181b)",
-    border: "1px solid var(--ggui-color-primary-600, #0284c7)"
+    border: "1px solid var(--ggui-color-controlAccentOutline, var(--ggui-color-primary-600, #0284c7))"
   },
   ghost: {
     backgroundColor: "transparent",
-    color: "var(--ggui-color-onSunken, #52525b)",
+    // A dimmed label reads as disabled; ghost's rank is its missing chrome (ggui#1566).
+    color: "var(--ggui-color-onContainer, #18181b)",
     border: "none"
   },
   danger: {
@@ -21754,7 +21807,7 @@ var sizeStyles2 = {
   }
 };
 function Input({ label, placeholder, value, onChange, type = "text", error, helperText, required, disabled, size = "md", style, className, ...rest }) {
-  const uniqueId = (0, import_react14.useId)();
+  const uniqueId = (0, import_react15.useId)();
   const inputId = `${uniqueId}-input`;
   const messageId = `${uniqueId}-message`;
   const hasError = Boolean(error);
@@ -21772,7 +21825,7 @@ function Input({ label, placeholder, value, onChange, type = "text", error, help
     ...sizeStyles2[size],
     width: "100%",
     borderRadius: "var(--ggui-shape-radius-control, var(--ggui-shape-radius-md, 8px))",
-    border: `1px solid ${hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-outline, #d4d4d8)"}`,
+    border: `1px solid ${hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-controlOutline, var(--ggui-color-outline, #d4d4d8))"}`,
     backgroundColor: disabled ? "var(--ggui-color-sunken, #fafafa)" : "var(--ggui-color-sunken, #ffffff)",
     color: "var(--ggui-color-onContainer, #18181b)",
     transition: `border-color ${motionVar.duration.base} ${motionVar.easing.standard}, box-shadow ${motionVar.duration.base} ${motionVar.easing.standard}`,
@@ -21783,7 +21836,7 @@ function Input({ label, placeholder, value, onChange, type = "text", error, help
   }, children: error || helperText })] });
 }
 function TextArea({ label, placeholder, value, onChange, rows = 4, error, helperText, required, disabled, maxLength, showCount, autoResize, style, className, ...rest }) {
-  const uniqueId = (0, import_react15.useId)();
+  const uniqueId = (0, import_react16.useId)();
   const textareaId = `${uniqueId}-textarea`;
   const messageId = `${uniqueId}-message`;
   const hasError = Boolean(error);
@@ -21802,7 +21855,7 @@ function TextArea({ label, placeholder, value, onChange, rows = 4, error, helper
     padding: "10px 12px",
     width: "100%",
     borderRadius: "var(--ggui-shape-radius-control, var(--ggui-shape-radius-md, 8px))",
-    border: `1px solid ${hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-outline, #d4d4d8)"}`,
+    border: `1px solid ${hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-controlOutline, var(--ggui-color-outline, #d4d4d8))"}`,
     backgroundColor: disabled ? "var(--ggui-color-sunken, #fafafa)" : "var(--ggui-color-sunken, #ffffff)",
     color: "var(--ggui-color-onContainer, #18181b)",
     fontSize: "var(--ggui-font-size-sm, 14px)",
@@ -21825,22 +21878,30 @@ var sizeStyles3 = {
   lg: { padding: "12px 14px", fontSize: "var(--ggui-font-size-base, 16px)" }
 };
 function Select({ label, value, onChange, options, placeholder, error, helperText, required, disabled, size = "md", style, className, ...rest }) {
-  const uniqueId = (0, import_react16.useId)();
+  const uniqueId = (0, import_react17.useId)();
   const selectId = `${uniqueId}-select`;
   const messageId = `${uniqueId}-message`;
   const hasError = Boolean(error);
   const hasMessage = Boolean(error || helperText);
+  const startsOnPlaceholder = Boolean(placeholder) && value === void 0 && rest.defaultValue === void 0;
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react17.useState)(startsOnPlaceholder ? "" : typeof rest.defaultValue === "string" ? rest.defaultValue : void 0);
+  const showingPlaceholder = Boolean(placeholder) && (value ?? uncontrolledValue) === "";
   return (0, import_jsx_runtime13.jsxs)("div", { className, style: { display: "flex", flexDirection: "column", gap: "var(--ggui-spacing-1, 4px)", ...style }, children: [label && (0, import_jsx_runtime13.jsxs)("label", { htmlFor: selectId, style: {
     fontSize: "var(--ggui-font-size-sm, 14px)",
     fontWeight: "var(--ggui-font-weight-medium, 500)",
     color: "var(--ggui-color-onSunken, #52525b)"
-  }, children: [label, required && (0, import_jsx_runtime13.jsx)("span", { "aria-hidden": "true", style: { color: "var(--ggui-color-error-500, #ef4444)", marginLeft: "2px" }, children: "*" })] }), (0, import_jsx_runtime13.jsxs)("select", { id: selectId, value, onChange: (e) => onChange?.(e.target.value), disabled, required, "aria-invalid": hasError || void 0, "aria-describedby": hasMessage ? messageId : void 0, style: {
+  }, children: [label, required && (0, import_jsx_runtime13.jsx)("span", { "aria-hidden": "true", style: { color: "var(--ggui-color-error-500, #ef4444)", marginLeft: "2px" }, children: "*" })] }), (0, import_jsx_runtime13.jsxs)("select", { id: selectId, value, ...startsOnPlaceholder ? { defaultValue: "" } : {}, onChange: (e) => {
+    if (value === void 0)
+      setUncontrolledValue(e.target.value);
+    onChange?.(e.target.value);
+  }, disabled, required, "aria-invalid": hasError || void 0, "aria-describedby": hasMessage ? messageId : void 0, style: {
     ...sizeStyles3[size],
     width: "100%",
     borderRadius: "var(--ggui-shape-radius-control, var(--ggui-shape-radius-md, 8px))",
-    border: `1px solid ${hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-outline, #d4d4d8)"}`,
+    border: `1px solid ${hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-controlOutline, var(--ggui-color-outline, #d4d4d8))"}`,
     backgroundColor: disabled ? "var(--ggui-color-sunken, #fafafa)" : "var(--ggui-color-sunken, #ffffff)",
-    color: value ? "var(--ggui-color-onContainer, #18181b)" : "var(--ggui-color-onSunken, #52525b)",
+    // Muted only while the placeholder is what shows (ggui#1566, #1569).
+    color: showingPlaceholder ? "var(--ggui-color-onSunken, #52525b)" : "var(--ggui-color-onContainer, #18181b)",
     cursor: disabled ? "not-allowed" : "pointer",
     appearance: "none",
     backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E")`,
@@ -21882,7 +21943,7 @@ function Checkbox({ label, checked, onChange, disabled, description, indetermina
     width: "18px",
     height: "18px",
     borderRadius: "var(--ggui-shape-radius-sm, 4px)",
-    border: `2px solid ${checked || indeterminate ? "var(--ggui-color-primary-600, #0284c7)" : "var(--ggui-color-outline, #d4d4d8)"}`,
+    border: `2px solid ${checked || indeterminate ? "var(--ggui-color-primary-600, #0284c7)" : "var(--ggui-color-controlOutline, var(--ggui-color-outline, #d4d4d8))"}`,
     backgroundColor: checked || indeterminate ? "var(--ggui-color-primary-600, #0284c7)" : "var(--ggui-color-sunken, #ffffff)",
     display: "flex",
     alignItems: "center",
@@ -21891,7 +21952,7 @@ function Checkbox({ label, checked, onChange, disabled, description, indetermina
   }, children: (checked || indeterminate) && (0, import_jsx_runtime14.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_runtime14.jsx)("path", { d: "M2.5 6H9.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) : (0, import_jsx_runtime14.jsx)("path", { d: "M2.5 6L5 8.5L9.5 3.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }), (label || description) && (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [label && (0, import_jsx_runtime14.jsx)("span", { style: {
     fontSize: "var(--ggui-font-size-sm, 14px)",
     fontWeight: "var(--ggui-font-weight-medium, 500)",
-    color: "var(--ggui-color-onSunken, #52525b)"
+    color: "var(--ggui-color-onContainer, #18181b)"
   }, children: label }), description && (0, import_jsx_runtime14.jsx)("span", { style: {
     fontSize: "var(--ggui-font-size-xs, 12px)",
     color: "var(--ggui-color-onSunken, #52525b)"
@@ -21904,7 +21965,7 @@ var sizeConfig = {
 };
 function Toggle({ label, checked, onChange, disabled, size = "md", style, className }) {
   const config = sizeConfig[size];
-  const [focused, setFocused] = (0, import_react17.useState)(false);
+  const [focused, setFocused] = (0, import_react18.useState)(false);
   return (0, import_jsx_runtime15.jsxs)("label", { className, style: {
     display: "flex",
     alignItems: "center",
@@ -21923,7 +21984,7 @@ function Toggle({ label, checked, onChange, disabled, size = "md", style, classN
     width: config.width,
     height: config.height,
     borderRadius: "9999px",
-    backgroundColor: checked ? "var(--ggui-color-primary-600, #0284c7)" : "var(--ggui-color-outline, #d4d4d8)",
+    backgroundColor: checked ? "var(--ggui-color-primary-600, #0284c7)" : "var(--ggui-color-controlOutline, var(--ggui-color-outline, #d4d4d8))",
     position: "relative",
     transition: `background-color ${motionVar.duration.base} ${motionVar.easing.standard}, box-shadow ${motionVar.duration.base} ${motionVar.easing.standard}`,
     flexShrink: 0,
@@ -21942,11 +22003,11 @@ function Toggle({ label, checked, onChange, disabled, size = "md", style, classN
   } }) }), label && (0, import_jsx_runtime15.jsx)("span", { style: {
     fontSize: "var(--ggui-font-size-sm, 14px)",
     fontWeight: "var(--ggui-font-weight-medium, 500)",
-    color: "var(--ggui-color-onSunken, #52525b)"
+    color: "var(--ggui-color-onContainer, #18181b)"
   }, children: label })] });
 }
 function RadioGroup({ label, value, onChange, options, direction = "vertical", disabled, error, style, className }) {
-  const uniqueId = (0, import_react18.useId)();
+  const uniqueId = (0, import_react19.useId)();
   const labelId = `${uniqueId}-label`;
   const errorId = `${uniqueId}-error`;
   const groupName = `${uniqueId}-radio`;
@@ -21986,7 +22047,7 @@ function RadioGroup({ label, value, onChange, options, direction = "vertical", d
       width: "18px",
       height: "18px",
       borderRadius: "var(--ggui-shape-radius-full, 9999px)",
-      border: `2px solid ${isSelected ? "var(--ggui-color-primary-600, #0284c7)" : "var(--ggui-color-outline, #d4d4d8)"}`,
+      border: `2px solid ${isSelected ? "var(--ggui-color-primary-600, #0284c7)" : "var(--ggui-color-controlOutline, var(--ggui-color-outline, #d4d4d8))"}`,
       backgroundColor: "var(--ggui-color-sunken, #ffffff)",
       display: "flex",
       alignItems: "center",
@@ -22000,7 +22061,7 @@ function RadioGroup({ label, value, onChange, options, direction = "vertical", d
     } }) })] }), (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [(0, import_jsx_runtime16.jsx)("span", { style: {
       fontSize: "var(--ggui-font-size-sm, 14px)",
       fontWeight: "var(--ggui-font-weight-medium, 500)",
-      color: "var(--ggui-color-onSunken, #52525b)"
+      color: "var(--ggui-color-onContainer, #18181b)"
     }, children: option.label }), option.description && (0, import_jsx_runtime16.jsx)("span", { style: {
       fontSize: "var(--ggui-font-size-xs, 12px)",
       color: "var(--ggui-color-onSunken, #52525b)"
@@ -22011,7 +22072,7 @@ function RadioGroup({ label, value, onChange, options, direction = "vertical", d
   }, children: error })] });
 }
 function Slider({ label, value = 0, onChange, min = 0, max = 100, step = 1, disabled, showValue, style, className }) {
-  const uniqueId = (0, import_react19.useId)();
+  const uniqueId = (0, import_react20.useId)();
   const sliderId = `${uniqueId}-slider`;
   const labelId = `${uniqueId}-label`;
   const percentage = (value - min) / (max - min) * 100;
@@ -22142,7 +22203,7 @@ var avatarColors = [
   "var(--ggui-color-info-500, #06b6d4)"
 ];
 function Avatar({ src, name, size = "md", shape = "circle", style, className }) {
-  const [imageError, setImageError] = (0, import_react20.useState)(false);
+  const [imageError, setImageError] = (0, import_react21.useState)(false);
   const resolvedSize = typeof size === "number" ? size : sizeMap2[size] || 40;
   const initials = name ? name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) : "?";
   const getColorFromName = (name2) => {
@@ -22278,7 +22339,7 @@ function Progress({ value, max = 100, variant = "default", size = "md", label, s
             }` })] })] });
 }
 function Image({ src, alt, width, height, objectFit = "cover", radius: radius2, fallback, style, className }) {
-  const [error, setError] = (0, import_react21.useState)(false);
+  const [error, setError] = (0, import_react22.useState)(false);
   const resolveSize2 = (value) => {
     if (value === void 0)
       return void 0;
@@ -26839,7 +26900,7 @@ function resolveLucideName(name) {
   return LUCIDE_LOOKUP.get(normalized);
 }
 function renderLucideIcon(data, size, color) {
-  return (0, import_jsx_runtime24.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: data.map(([tag, attrs], i) => import_react22.default.createElement(tag, { key: i, ...attrs })) });
+  return (0, import_jsx_runtime24.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: data.map(([tag, attrs], i) => import_react23.default.createElement(tag, { key: i, ...attrs })) });
 }
 function Icon({ name, size = 24, tone, children, style, className, "aria-label": ariaLabel }) {
   const iconColor = tone ? resolveToneCss(tone) : "currentColor";
@@ -26895,10 +26956,10 @@ function Link({ children, href, external, tone, underline = "hover", style, clas
   }, ...rest, children: [children, external && (0, import_jsx_runtime25.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", style: { marginLeft: "4px", verticalAlign: "middle" }, children: [(0, import_jsx_runtime25.jsx)("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }), (0, import_jsx_runtime25.jsx)("polyline", { points: "15 3 21 3 21 9" }), (0, import_jsx_runtime25.jsx)("line", { x1: "10", y1: "14", x2: "21", y2: "3" })] })] });
 }
 function Tooltip({ children, content, position = "top", delay = 200, style, className }) {
-  const [visible, setVisible] = (0, import_react23.useState)(false);
-  const [coords, setCoords] = (0, import_react23.useState)({ top: 0, left: 0 });
-  const triggerRef = (0, import_react23.useRef)(null);
-  const timeoutRef = (0, import_react23.useRef)(null);
+  const [visible, setVisible] = (0, import_react24.useState)(false);
+  const [coords, setCoords] = (0, import_react24.useState)({ top: 0, left: 0 });
+  const triggerRef = (0, import_react24.useRef)(null);
+  const timeoutRef = (0, import_react24.useRef)(null);
   const showTooltip = () => {
     timeoutRef.current = setTimeout(() => {
       setVisible(true);
@@ -26910,7 +26971,7 @@ function Tooltip({ children, content, position = "top", delay = 200, style, clas
     }
     setVisible(false);
   };
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (visible && triggerRef.current) {
       const rect = triggerRef.current.getBoundingClientRect();
       const offset = 8;
@@ -26937,7 +26998,7 @@ function Tooltip({ children, content, position = "top", delay = 200, style, clas
       setCoords({ top, left });
     }
   }, [visible, position]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     return () => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
@@ -26986,7 +27047,7 @@ var sortIndicator = (active, direction) => (0, import_jsx_runtime27.jsxs)("span"
   opacity: active ? 1 : 0.3
 }, children: [(0, import_jsx_runtime27.jsx)("span", { style: { opacity: active && direction === "asc" ? 1 : 0.4 }, children: "\u25B2" }), (0, import_jsx_runtime27.jsx)("span", { style: { opacity: active && direction === "desc" ? 1 : 0.4 }, children: "\u25BC" })] });
 function Table({ columns, data, sortKey, sortDirection = "asc", onSort, striped = false, hoverable = true, compact = false, bordered = false, caption, style, className }) {
-  const [hoveredRow, setHoveredRow] = (0, import_react24.useState)(null);
+  const [hoveredRow, setHoveredRow] = (0, import_react25.useState)(null);
   const cellPadding = compact ? "var(--ggui-spacing-1, 4px) var(--ggui-spacing-2, 8px)" : "var(--ggui-spacing-2, 8px) var(--ggui-spacing-4, 16px)";
   const handleSort = (key) => {
     if (!onSort)
@@ -27015,7 +27076,9 @@ function Table({ columns, data, sortKey, sortDirection = "asc", onSort, striped
     width: "100%",
     borderCollapse: "collapse",
     fontSize: "var(--ggui-font-size-sm, 14px)",
-    color: "var(--ggui-color-onSunken, #52525b)"
+    // Body cells are the data and inherit this (ggui#1566); the header and
+    // caption set the muted tier themselves.
+    color: "var(--ggui-color-onContainer, #18181b)"
   }, children: [caption && (0, import_jsx_runtime27.jsx)("caption", { style: {
     padding: cellPadding,
     fontSize: "var(--ggui-font-size-sm, 14px)",
@@ -27057,10 +27120,10 @@ var sizeStyles5 = {
   }
 };
 function Tabs({ items, activeKey, onChange, variant = "line", size = "md", fullWidth = false, style, className }) {
-  const uniqueId = (0, import_react25.useId)();
-  const [internalKey, setInternalKey] = (0, import_react25.useState)(items[0]?.key);
+  const uniqueId = (0, import_react26.useId)();
+  const [internalKey, setInternalKey] = (0, import_react26.useState)(items[0]?.key);
   const currentKey = activeKey ?? internalKey;
-  const handleChange = (0, import_react25.useCallback)((key) => {
+  const handleChange = (0, import_react26.useCallback)((key) => {
     if (onChange) {
       onChange(key);
     } else {
@@ -27068,8 +27131,8 @@ function Tabs({ items, activeKey, onChange, variant = "line", size = "md", fullW
     }
   }, [onChange]);
   const activeItem = items.find((item) => item.key === currentKey);
-  const tabListRef = (0, import_react25.useRef)(null);
-  const handleTabKeyDown = (0, import_react25.useCallback)((e) => {
+  const tabListRef = (0, import_react26.useRef)(null);
+  const handleTabKeyDown = (0, import_react26.useCallback)((e) => {
     const enabledItems = items.filter((item) => !item.disabled);
     const currentIndex = enabledItems.findIndex((item) => item.key === currentKey);
     let nextIndex;
@@ -27333,7 +27396,7 @@ var defaultIcons2 = {
   error: (0, import_jsx_runtime29.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime29.jsx)("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) })
 };
 function Toast({ message, variant = "info", title, duration: duration2 = 5e3, onClose, visible = true, style, className }) {
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!visible || duration2 === 0 || !onClose)
       return;
     const timer = setTimeout(onClose, duration2);
@@ -27391,8 +27454,8 @@ var chevron = (expanded) => (0, import_jsx_runtime30.jsx)("svg", { width: "16",
   flexShrink: 0
 }, children: (0, import_jsx_runtime30.jsx)("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) });
 function Accordion({ items, expandedKeys, onChange, multiple = false, variant = "default", style, className }) {
-  const uniqueId = (0, import_react27.useId)();
-  const [internalExpanded, setInternalExpanded] = (0, import_react27.useState)([]);
+  const uniqueId = (0, import_react28.useId)();
+  const [internalExpanded, setInternalExpanded] = (0, import_react28.useState)([]);
   const currentExpanded = expandedKeys ?? internalExpanded;
   const handleToggle = (key) => {
     let newExpanded;
@@ -27465,14 +27528,14 @@ function Accordion({ items, expandedKeys, onChange, multiple = false, variant =
     }, children: isExpanded && (0, import_jsx_runtime30.jsx)("div", { style: {
       padding: "0 var(--ggui-spacing-4, 16px) var(--ggui-spacing-4, 16px)",
       fontSize: "var(--ggui-font-size-sm, 14px)",
-      color: "var(--ggui-color-onSunken, #52525b)",
+      color: "var(--ggui-color-onContainer, #18181b)",
       lineHeight: "var(--ggui-font-lineHeight-normal, 1.5)"
     }, children: item.content }) })] }, item.key);
   }) });
 }
 var STYLE_ID = "ggui-motion-keyframes";
 function MotionKeyframes() {
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (document.getElementById(STYLE_ID))
       return;
     const styleEl = document.createElement("style");
@@ -27489,12 +27552,12 @@ function MotionKeyframes() {
   return null;
 }
 function useMotion() {
-  const [motionEnabled, setMotionEnabled] = (0, import_react28.useState)(() => {
+  const [motionEnabled, setMotionEnabled] = (0, import_react29.useState)(() => {
     if (typeof window === "undefined")
       return true;
     return !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
   });
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
     const handler = (e) => setMotionEnabled(!e.matches);
     mq.addEventListener("change", handler);
@@ -27503,9 +27566,9 @@ function useMotion() {
   return { motionEnabled };
 }
 function useAnimationKey(dep) {
-  const [key, setKey] = (0, import_react28.useState)(0);
-  const isFirst = (0, import_react28.useRef)(true);
-  (0, import_react28.useEffect)(() => {
+  const [key, setKey] = (0, import_react29.useState)(0);
+  const isFirst = (0, import_react29.useRef)(true);
+  (0, import_react29.useEffect)(() => {
     if (isFirst.current) {
       isFirst.current = false;
       return;
@@ -27532,7 +27595,7 @@ __export2(components_exports, {
   renderRichTextInlines: () => renderRichTextInlines
 });
 function SearchField({ value: controlledValue, onChange, onSearch, placeholder = "Search...", showButton = false, buttonText = "Search", loading, disabled, size = "md", style, className }) {
-  const [internalValue, setInternalValue] = (0, import_react29.useState)("");
+  const [internalValue, setInternalValue] = (0, import_react30.useState)("");
   const value = controlledValue !== void 0 ? controlledValue : internalValue;
   const handleChange = (newValue) => {
     if (controlledValue === void 0) {
@@ -27573,7 +27636,7 @@ function SearchField({ value: controlledValue, onChange, onSearch, placeholder =
     paddingLeft: "36px",
     fontSize: size === "lg" ? "16px" : "14px",
     borderRadius: "6px",
-    border: `1px solid var(--ggui-color-outline, #d1d5db)`,
+    border: `1px solid var(--ggui-color-controlOutline, var(--ggui-color-outline, #d1d5db))`,
     backgroundColor: disabled ? "var(--ggui-color-sunken, #f9fafb)" : "var(--ggui-color-container, #ffffff)",
     color: "var(--ggui-color-onContainer, #111827)",
     outline: "none",
@@ -27693,9 +27756,9 @@ function Tag({ children, variant = "default", size = "md", closable, onClose, ic
   }, "aria-label": "Remove", children: (0, import_jsx_runtime34.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "currentColor", children: (0, import_jsx_runtime34.jsx)("path", { d: "M9.5 3.205L8.795 2.5 6 5.295 3.205 2.5l-.705.705L5.295 6 2.5 8.795l.705.705L6 6.705 8.795 9.5l.705-.705L6.705 6 9.5 3.205z" }) }) })] });
 }
 function Dropdown({ trigger, options, value, onChange, placement = "bottom-start", disabled, style, className }) {
-  const [isOpen, setIsOpen] = (0, import_react30.useState)(false);
-  const containerRef = (0, import_react30.useRef)(null);
-  (0, import_react30.useEffect)(() => {
+  const [isOpen, setIsOpen] = (0, import_react31.useState)(false);
+  const containerRef = (0, import_react31.useRef)(null);
+  (0, import_react31.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -27706,7 +27769,7 @@ function Dropdown({ trigger, options, value, onChange, placement = "bottom-start
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }
   }, [isOpen]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     const handleEscape = (event) => {
       if (event.key === "Escape") {
         setIsOpen(false);
@@ -27753,16 +27816,16 @@ function Dropdown({ trigger, options, value, onChange, placement = "bottom-start
   }, children: options.map((option) => (0, import_jsx_runtime35.jsx)(MenuItem, { label: option.label, icon: option.icon, onClick: () => handleSelect(option.value), disabled: option.disabled, active: value === option.value, danger: option.danger }, option.value)) })] });
 }
 function Autocomplete({ value = "", onChange, onSelect, options, placeholder, label, loading, disabled, error, noResultsText = "No results found", style, className }) {
-  const [isOpen, setIsOpen] = (0, import_react31.useState)(false);
-  const [highlightedIndex, setHighlightedIndex] = (0, import_react31.useState)(-1);
-  const containerRef = (0, import_react31.useRef)(null);
-  const filteredOptions = (0, import_react31.useMemo)(() => {
+  const [isOpen, setIsOpen] = (0, import_react32.useState)(false);
+  const [highlightedIndex, setHighlightedIndex] = (0, import_react32.useState)(-1);
+  const containerRef = (0, import_react32.useRef)(null);
+  const filteredOptions = (0, import_react32.useMemo)(() => {
     if (!value)
       return options;
     const lowerValue = value.toLowerCase();
     return options.filter((opt) => opt.label.toLowerCase().includes(lowerValue) || opt.value.toLowerCase().includes(lowerValue));
   }, [options, value]);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -27851,7 +27914,7 @@ function Breadcrumb({ items, separator = "/", onItemClick, style, className }) {
     ...style
   }, children: items.map((item, index) => {
     const isLast = index === items.length - 1;
-    return (0, import_jsx_runtime37.jsxs)(import_react32.Fragment, { children: [index > 0 && (0, import_jsx_runtime37.jsx)("span", { style: { color: "var(--ggui-color-neutral-400, #9ca3af)" }, children: separator }), item.icon && (0, import_jsx_runtime37.jsx)("span", { style: {
+    return (0, import_jsx_runtime37.jsxs)(import_react33.Fragment, { children: [index > 0 && (0, import_jsx_runtime37.jsx)("span", { style: { color: "var(--ggui-color-neutral-400, #9ca3af)" }, children: separator }), item.icon && (0, import_jsx_runtime37.jsx)("span", { style: {
       display: "flex",
       alignItems: "center",
       color: isLast ? "var(--ggui-color-onContainer, #111827)" : "var(--ggui-color-neutral-500, #6b7280)"
@@ -28499,7 +28562,7 @@ function Header({ logo, navigation: navigation2, actions, sticky = false, backgr
   }, children: [logo && (0, import_jsx_runtime43.jsx)("div", { style: { flexShrink: 0 }, children: logo }), navigation2 && (0, import_jsx_runtime43.jsx)("nav", { style: { display: "flex", alignItems: "center", flex: 1, marginLeft: "32px" }, children: navigation2 }), actions && (0, import_jsx_runtime43.jsx)("div", { style: { display: "flex", alignItems: "center", gap: "12px", flexShrink: 0 }, children: actions })] });
 }
 function SidebarItem({ item, activeId, onItemClick, collapsed, depth = 0 }) {
-  const [expanded, setExpanded] = (0, import_react33.useState)(false);
+  const [expanded, setExpanded] = (0, import_react34.useState)(false);
   const hasChildren = item.children && item.children.length > 0;
   const isActive = activeId === item.id;
   const handleClick = () => {
@@ -28568,8 +28631,8 @@ function CardGrid({ children, columns = 3, gap = 16, style, className }) {
   }, children });
 }
 function CommentItem({ comment, onReply, onReaction, depth = 0 }) {
-  const [showReplyInput, setShowReplyInput] = (0, import_react34.useState)(false);
-  const [replyContent, setReplyContent] = (0, import_react34.useState)("");
+  const [showReplyInput, setShowReplyInput] = (0, import_react35.useState)(false);
+  const [replyContent, setReplyContent] = (0, import_react35.useState)("");
   const handleSubmitReply = () => {
     if (replyContent.trim()) {
       onReply?.(comment.id, replyContent);
@@ -28594,7 +28657,7 @@ function CommentItem({ comment, onReply, onReaction, depth = 0 }) {
   }, children: "Reply" })] }), showReplyInput && (0, import_jsx_runtime46.jsxs)("div", { style: { marginTop: "12px" }, children: [(0, import_jsx_runtime46.jsx)(TextArea, { value: replyContent, onChange: setReplyContent, placeholder: "Write a reply...", rows: 2 }), (0, import_jsx_runtime46.jsxs)("div", { style: { display: "flex", gap: "8px", marginTop: "8px" }, children: [(0, import_jsx_runtime46.jsx)(Button, { size: "sm", onClick: handleSubmitReply, children: "Reply" }), (0, import_jsx_runtime46.jsx)(Button, { size: "sm", variant: "ghost", onClick: () => setShowReplyInput(false), children: "Cancel" })] })] })] })] }), comment.replies?.map((reply) => (0, import_jsx_runtime46.jsx)("div", { style: { marginTop: "16px" }, children: (0, import_jsx_runtime46.jsx)(CommentItem, { comment: reply, onReply, onReaction, depth: depth + 1 }) }, reply.id))] });
 }
 function CommentThread({ comments, currentUser, onAddComment, onReply, onReaction, loading, style, className }) {
-  const [newComment, setNewComment] = (0, import_react34.useState)("");
+  const [newComment, setNewComment] = (0, import_react35.useState)("");
   const handleSubmit = () => {
     if (newComment.trim()) {
       onAddComment?.(newComment);
@@ -28659,9 +28722,9 @@ function DataTable({ columns, data, rowKey = "id", loading, emptyText = "No data
   }) })] }) });
 }
 function ChatWindow({ messages, currentUserId, onSendMessage, loading, typing, placeholder = "Type a message...", header, style, className }) {
-  const [inputValue, setInputValue] = (0, import_react35.useState)("");
-  const messagesEndRef = (0, import_react35.useRef)(null);
-  (0, import_react35.useEffect)(() => {
+  const [inputValue, setInputValue] = (0, import_react36.useState)("");
+  const messagesEndRef = (0, import_react36.useRef)(null);
+  (0, import_react36.useEffect)(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
   const handleSend = () => {
@@ -28708,14 +28771,17 @@ function ChatWindow({ messages, currentUserId, onSendMessage, loading, typing, p
       padding: "10px 14px",
       borderRadius: radius.lg,
       backgroundColor: isOwn ? "var(--ggui-color-primary-600, #0284c7)" : "var(--ggui-color-sunken, #f3f4f6)",
-      color: isOwn ? "var(--ggui-color-onPrimary, #ffffff)" : "var(--ggui-color-onSunken, #111827)"
+      color: isOwn ? "var(--ggui-color-onPrimary, #ffffff)" : "var(--ggui-color-onContainer, #111827)"
     }, children: [(0, import_jsx_runtime48.jsx)("p", { style: { margin: 0, fontSize: fontSize.sm }, children: message.content }), (0, import_jsx_runtime48.jsxs)("div", { style: {
       display: "flex",
       alignItems: "center",
       gap: "4px",
       marginTop: "4px",
       fontSize: fontSize.xs,
-      opacity: 0.7
+      // Own messages derive the muted line from onPrimary; the other
+      // party's message now reads at onContainer, so its timestamp
+      // takes the muted tier itself (ggui#1566).
+      ...isOwn ? { opacity: 0.7 } : { color: "var(--ggui-color-onSunken, #52525b)" }
     }, children: [(0, import_jsx_runtime48.jsx)("span", { children: timestamp }), isOwn && message.status && (0, import_jsx_runtime48.jsxs)("span", { children: [message.status === "sending" && "\u2022", message.status === "sent" && "\u2713", message.status === "delivered" && "\u2713\u2713", message.status === "read" && "\u2713\u2713", message.status === "error" && "!"] })] })] })] }, message.id);
   }), typing && (0, import_jsx_runtime48.jsx)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: (0, import_jsx_runtime48.jsxs)("span", { style: { fontSize: fontSize.xs, color: "var(--ggui-color-neutral-500, #6b7280)" }, children: [typing.name, " is typing..."] }) }), (0, import_jsx_runtime48.jsx)("div", { ref: messagesEndRef })] }), (0, import_jsx_runtime48.jsxs)("div", { style: {
     padding: "12px 16px",
@@ -28725,7 +28791,7 @@ function ChatWindow({ messages, currentUserId, onSendMessage, loading, typing, p
   }, children: [(0, import_jsx_runtime48.jsx)("input", { type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown, placeholder, style: {
     flex: 1,
     padding: "10px 14px",
-    border: `1px solid var(--ggui-color-outline, #d1d5db)`,
+    border: `1px solid var(--ggui-color-controlOutline, var(--ggui-color-outline, #d1d5db))`,
     borderRadius: radius.full,
     fontSize: fontSize.sm,
     outline: "none"
@@ -28799,8 +28865,8 @@ function formatFileSize(bytes) {
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
 }
 function FileUploader({ files = [], onFilesSelected, onFileRemove, accept, multiple = true, maxSize, maxFiles, disabled, dragDrop = true, style, className }) {
-  const [isDragOver, setIsDragOver] = (0, import_react36.useState)(false);
-  const inputRef = (0, import_react36.useRef)(null);
+  const [isDragOver, setIsDragOver] = (0, import_react37.useState)(false);
+  const inputRef = (0, import_react37.useRef)(null);
   const handleFiles = (fileList) => {
     if (!fileList)
       return;
@@ -28830,7 +28896,7 @@ function FileUploader({ files = [], onFilesSelected, onFileRemove, accept, multi
     setIsDragOver(false);
   };
   return (0, import_jsx_runtime50.jsxs)("div", { className, style: { ...style }, children: [(0, import_jsx_runtime50.jsxs)("div", { onClick: () => !disabled && inputRef.current?.click(), onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, style: {
-    border: `2px dashed ${isDragOver ? "var(--ggui-color-primary-400, #38bdf8)" : "var(--ggui-color-outline, #d1d5db)"}`,
+    border: `2px dashed ${isDragOver ? "var(--ggui-color-primary-400, #38bdf8)" : "var(--ggui-color-controlOutline, var(--ggui-color-outline, #d1d5db))"}`,
     borderRadius: radius.lg,
     padding: "32px",
     textAlign: "center",
@@ -28939,12 +29005,12 @@ var sizeWidths = {
   full: "100vw"
 };
 function Modal({ open, onClose, title, children, footer, size = "md", closeOnOverlayClick = true, closeOnEscape = true, showCloseButton = true, style, className }) {
-  const handleEscape = (0, import_react37.useCallback)((e) => {
+  const handleEscape = (0, import_react38.useCallback)((e) => {
     if (e.key === "Escape" && closeOnEscape) {
       onClose();
     }
   }, [closeOnEscape, onClose]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (open) {
       document.addEventListener("keydown", handleEscape);
       document.body.style.overflow = "hidden";
@@ -29009,9 +29075,9 @@ function Modal({ open, onClose, title, children, footer, size = "md", closeOnOve
   }, children: footer })] })] });
 }
 function CommandPalette({ open, onClose, commands, onSelect, placeholder = "Search commands...", recentIds = [], loading, style, className }) {
-  const [query, setQuery] = (0, import_react38.useState)("");
-  const [selectedIndex, setSelectedIndex] = (0, import_react38.useState)(0);
-  const filteredCommands = (0, import_react38.useMemo)(() => {
+  const [query, setQuery] = (0, import_react39.useState)("");
+  const [selectedIndex, setSelectedIndex] = (0, import_react39.useState)(0);
+  const filteredCommands = (0, import_react39.useMemo)(() => {
     const filtered = query ? commands.filter((cmd) => cmd.label.toLowerCase().includes(query.toLowerCase()) || cmd.description?.toLowerCase().includes(query.toLowerCase())) : commands;
     const groups = /* @__PURE__ */ new Map();
     if (!query && recentIds.length > 0) {
@@ -29032,21 +29098,21 @@ function CommandPalette({ open, onClose, commands, onSelect, placeholder = "Sear
     });
     return groups;
   }, [commands, query, recentIds]);
-  const flatCommands = (0, import_react38.useMemo)(() => {
+  const flatCommands = (0, import_react39.useMemo)(() => {
     const flat = [];
     filteredCommands.forEach((cmds) => flat.push(...cmds));
     return flat;
   }, [filteredCommands]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     setSelectedIndex(0);
   }, [query]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (open) {
       setQuery("");
       setSelectedIndex(0);
     }
   }, [open]);
-  const handleKeyDown = (0, import_react38.useCallback)((e) => {
+  const handleKeyDown = (0, import_react39.useCallback)((e) => {
     if (e.key === "Escape") {
       onClose();
       return;
@@ -29066,7 +29132,7 @@ function CommandPalette({ open, onClose, commands, onSelect, placeholder = "Sear
       }
     }
   }, [flatCommands, selectedIndex, onSelect, onClose]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (open) {
       document.addEventListener("keydown", handleKeyDown);
       return () => document.removeEventListener("keydown", handleKeyDown);
@@ -29296,7 +29362,7 @@ function Hero({ heading, description, primaryAction, secondaryAction, media, ali
     fontWeight: fontWeight.semibold,
     color: showOverlay ? "#ffffff" : "var(--ggui-color-onContainer, #374151)",
     backgroundColor: "transparent",
-    border: `1px solid ${showOverlay ? "rgba(255,255,255,0.3)" : "var(--ggui-color-outline, #d1d5db)"}`,
+    border: `1px solid ${showOverlay ? "rgba(255,255,255,0.3)" : "var(--ggui-color-controlOutline, var(--ggui-color-outline, #d1d5db))"}`,
     borderRadius: "8px",
     cursor: "pointer",
     transition: "all 0.15s",
@@ -29315,9 +29381,9 @@ __export2(interact_exports, {
   Hoverable: () => Hoverable,
   Pressable: () => Pressable
 });
-var Clickable = (0, import_react39.forwardRef)(function Clickable2({ children, onClick, onDoubleClick, hoverStyle, activeStyle, cursor, transition: transition2 = "all 200ms ease", disabled = false, role, "aria-label": ariaLabel, tabIndex, style, className, ...rest }, ref) {
-  const [hovered, setHovered] = (0, import_react39.useState)(false);
-  const [active, setActive] = (0, import_react39.useState)(false);
+var Clickable = (0, import_react40.forwardRef)(function Clickable2({ children, onClick, onDoubleClick, hoverStyle, activeStyle, cursor, transition: transition2 = "all 200ms ease", disabled = false, role, "aria-label": ariaLabel, tabIndex, style, className, ...rest }, ref) {
+  const [hovered, setHovered] = (0, import_react40.useState)(false);
+  const [active, setActive] = (0, import_react40.useState)(false);
   const hasClick = !!onClick;
   const resolvedCursor = disabled ? "not-allowed" : cursor ?? (hasClick ? "pointer" : void 0);
   const resolvedRole = role ?? (hasClick ? "button" : void 0);
@@ -29343,8 +29409,8 @@ var Clickable = (0, import_react39.forwardRef)(function Clickable2({ children, o
     setActive(false);
   }, onMouseDown: () => setActive(true), onMouseUp: () => setActive(false), onKeyDown: handleKeyDown, role: resolvedRole, "aria-label": ariaLabel, "aria-disabled": disabled || void 0, tabIndex: resolvedTabIndex, ...rest, children });
 });
-var Hoverable = (0, import_react40.forwardRef)(function Hoverable2({ children, hoverStyle, onHoverChange, transition: transition2 = "all 200ms ease", style, className, ...rest }, ref) {
-  const [hovered, setHovered] = (0, import_react40.useState)(false);
+var Hoverable = (0, import_react41.forwardRef)(function Hoverable2({ children, hoverStyle, onHoverChange, transition: transition2 = "all 200ms ease", style, className, ...rest }, ref) {
+  const [hovered, setHovered] = (0, import_react41.useState)(false);
   const mergedStyle = {
     ...style,
     transition: transition2,
@@ -29358,10 +29424,10 @@ var Hoverable = (0, import_react40.forwardRef)(function Hoverable2({ children, h
     onHoverChange?.(false);
   }, ...rest, children });
 });
-var Pressable = (0, import_react41.forwardRef)(function Pressable2({ children, onPress, onLongPress, longPressDelay = 500, hoverStyle, pressStyle, disabled = false, transition: transition2 = "all 150ms ease", role, "aria-label": ariaLabel, tabIndex, style, className, ...rest }, ref) {
-  const [hovered, setHovered] = (0, import_react41.useState)(false);
-  const [pressed, setPressed] = (0, import_react41.useState)(false);
-  const [longPressTimer, setLongPressTimer] = (0, import_react41.useState)(null);
+var Pressable = (0, import_react42.forwardRef)(function Pressable2({ children, onPress, onLongPress, longPressDelay = 500, hoverStyle, pressStyle, disabled = false, transition: transition2 = "all 150ms ease", role, "aria-label": ariaLabel, tabIndex, style, className, ...rest }, ref) {
+  const [hovered, setHovered] = (0, import_react42.useState)(false);
+  const [pressed, setPressed] = (0, import_react42.useState)(false);
+  const [longPressTimer, setLongPressTimer] = (0, import_react42.useState)(null);
   const hasPress = !!onPress || !!onLongPress;
   const handleMouseDown = (e) => {
     if (disabled)
@@ -29418,6 +29484,8 @@ var consumed_tokens_manifest_default = {
   version: 2,
   tokens: [
     "--ggui-color-container",
+    "--ggui-color-controlAccentOutline",
+    "--ggui-color-controlOutline",
     "--ggui-color-elevated",
     "--ggui-color-error",
     "--ggui-color-error-100",
@@ -29715,17 +29783,20 @@ function scrimTint(tone) {
     return "#000000";
   return tokenValue(tone);
 }
-function familyRamp(group, anchor) {
+function familyRamp(group, anchor, ground) {
   const statedStops = {};
   for (const stop of STOPS) {
     const v = stated(group, stop);
     if (v !== void 0)
       statedStops[stop] = v;
   }
-  return rampFrom(statedStops, anchor);
+  return rampFrom(statedStops, anchor, ground);
 }
-function rampFrom(statedStops, anchor) {
+var NEUTRAL_ANCHOR_CHROMA = 0.02;
+var LIGHT_STOP_COUNT = 5;
+function rampFrom(statedStops, anchor, ground) {
   const a = hexToOklch(anchor);
+  const g = ground !== void 0 && a.c < NEUTRAL_ANCHOR_CHROMA ? hexToOklch(ground) : void 0;
   const out = {};
   STOPS.forEach((stop, i) => {
     const v = statedStops[stop];
@@ -29733,7 +29804,16 @@ function rampFrom(statedStops, anchor) {
       out[stop] = v;
       return;
     }
-    out[stop] = stop === "500" ? anchor : oklchToHex({ l: RAMP_L[i], c: a.c * RAMP_C[i], h: a.h });
+    if (stop === "500") {
+      out[stop] = anchor;
+      return;
+    }
+    if (g !== void 0 && i < LIGHT_STOP_COUNT) {
+      const t = g.l === a.l ? 1 : Math.min(1, Math.max(0, (RAMP_L[i] - g.l) / (a.l - g.l)));
+      out[stop] = oklchToHex({ l: RAMP_L[i], c: g.c + (a.c - g.c) * t, h: g.h });
+      return;
+    }
+    out[stop] = oklchToHex({ l: RAMP_L[i], c: a.c * RAMP_C[i], h: a.h });
   });
   return out;
 }
@@ -29759,11 +29839,11 @@ function readableOutline(bg, ink) {
   }
   return ink;
 }
-function readableAccent(V, surface, ink) {
+function readableAccent(V, surface, ink, floor = 4.5) {
   const light = contrastRatio("#000000", surface) >= contrastRatio("#ffffff", surface);
   for (const stop of light ? ACCENT_WALK.light : ACCENT_WALK.dark) {
     const hex = V[`--ggui-color-primary-${stop}`];
-    if (hex !== void 0 && contrastRatio(hex, surface) >= 4.5)
+    if (hex !== void 0 && contrastRatio(hex, surface) >= floor)
       return hex;
   }
   return ink;
@@ -29828,7 +29908,7 @@ function deriveThemeVariables(doc, mode, options = {}) {
         anchor = "#000000";
       }
     }
-    const ramp2 = familyRamp(g, anchor);
+    const ramp2 = familyRamp(g, anchor, ground);
     for (const stop of STOPS)
       V[`--ggui-color-${fam}-${stop}`] = ramp2[stop];
     const cap = fam[0].toUpperCase() + fam.slice(1);
@@ -29845,6 +29925,8 @@ function deriveThemeVariables(doc, mode, options = {}) {
   V["--ggui-color-onInverted"] = container;
   V["--ggui-color-inverseOutline"] = readableOutline(onContainer, container);
   V["--ggui-color-heroOutline"] = readableOutline(V["--ggui-color-heroGround"], V["--ggui-color-onHeroGround"]);
+  V["--ggui-color-controlOutline"] = readableOutline(container, onContainer);
+  V["--ggui-color-controlAccentOutline"] = readableAccent(V, container, onContainer, 3);
   const family = doc.font.family;
   const sans = tokenValue(family.sans) ?? fontFamily.sans;
   V["--ggui-font-family-sans"] = sans;
@@ -30482,8 +30564,10 @@ var gguiDark = {
     // paper
     sunken: { $value: "#292929", $type: "color" },
     // ink
-    onSunken: { $value: "#d9d9d9", $type: "color" },
-    // chrome
+    // Muted text, and text on sunken grounds (ggui#1566): the kit's dark muted
+    // value, 6.57:1 on container and 5.80:1 on sunken. Light's onSunken is ink-3,
+    // the same tier, so dark now reads as light already does.
+    onSunken: { $value: "#a3a3a9", $type: "color" },
     container: { $value: "#1f1f1f", $type: "color" },
     // ink
     onContainer: { $value: "#f4f3ed", $type: "color" },
@@ -32841,7 +32925,7 @@ function getTheme(id, mode = "light") {
 function getDefaultThemeId() {
   return "ggui";
 }
-var ThemeContext = (0, import_react42.createContext)(null);
+var ThemeContext = (0, import_react43.createContext)(null);
 var COLOR_MIX_SUPPORTS = "@supports (color: color-mix(in srgb, red, blue))";
 function resolvePrimary500Hex(cssVariables) {
   const match = cssVariables.match(/--ggui-color-primary-500:\s*(#[0-9a-fA-F]{3}|#[0-9a-fA-F]{6})\s*;/);
@@ -32942,13 +33026,21 @@ function framelessSuppressionRule(scopeClass) {
 }
 var EXPANDED_FRAME = { outerRadiusVar: "--ggui-shape-radius-xl", insetPx: 16 };
 var EXPANDED_FRAME_INNER_RADIUS = `max(0px, calc(var(${EXPANDED_FRAME.outerRadiusVar}) - ${EXPANDED_FRAME.insetPx}px))`;
+var EXPANDED_FRAME_CHROME = {
+  radius: `var(${EXPANDED_FRAME.outerRadiusVar})`,
+  hairline: "color-mix(in srgb, var(--ggui-color-onGround) 6%, transparent)",
+  shadowVar: "--ggui-shape-shadow-sm",
+  ground: "var(--ggui-color-neutral-50)"
+};
 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; }`;
 }
+var BODY_COPY_SIZE = "font-size: var(--ggui-font-size-base);";
 function baseInheritsRule(scopeClass) {
   return `.${scopeClass} {
   font-family: var(--ggui-font-family-sans);
+  ${BODY_COPY_SIZE}
   color: var(--ggui-color-onGround);
   background-color: transparent;
 }`;
@@ -33003,6 +33095,10 @@ var WIRE_EXPORTS = [
   // its runtime's shim lacks fails at module link. A card generated to use it
   // must never meet a runtime without it.
   "useActionSpent",
+  // ggui#1398: whether a dispatched action is waiting for the agent's answer,
+  // as data. Served one release before the triad teaches it, for the same
+  // reason as `useActionSpent` above.
+  "useActionPending",
   // Provider component
   "GguiWireProvider"
 ];
@@ -33421,7 +33517,7 @@ function makeScopeClass(reactId) {
 }
 var AUTO_RETRY_LIMIT = 1;
 var AUTO_RETRY_DELAY = 500;
-var ErrorBoundary = class extends import_react9.default.Component {
+var ErrorBoundary = class extends import_react10.default.Component {
   state = { error: null, catchCount: 0, autoRetrying: false };
   retryTimer = null;
   static getDerivedStateFromError(error) {
@@ -33537,12 +33633,12 @@ function ReactComponentRenderer({
   fallback = /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { children: "Loading component..." }),
   onError
 }) {
-  const reactId = (0, import_react9.useId)();
-  const [scopeClass] = (0, import_react9.useState)(() => makeScopeClass(reactId) || `ggui-rcr-${++scopeCounter}`);
-  const [Component, setComponent] = (0, import_react9.useState)(null);
-  const [error, setError] = (0, import_react9.useState)(null);
-  const [loading, setLoading] = (0, import_react9.useState)(true);
-  (0, import_react9.useEffect)(() => {
+  const reactId = (0, import_react10.useId)();
+  const [scopeClass] = (0, import_react10.useState)(() => makeScopeClass(reactId) || `ggui-rcr-${++scopeCounter}`);
+  const [Component, setComponent] = (0, import_react10.useState)(null);
+  const [error, setError] = (0, import_react10.useState)(null);
+  const [loading, setLoading] = (0, import_react10.useState)(true);
+  (0, import_react10.useEffect)(() => {
     if (!code || code.trim().length === 0) {
       setComponent(null);
       setLoading(false);
@@ -33570,7 +33666,7 @@ function ReactComponentRenderer({
         } catch {
         }
         w.__ggui__ = {
-          react: import_react9.default,
+          react: import_react10.default,
           reactDom: reactDomModule,
           primitives: primitives_exports,
           components: components_exports,
@@ -33578,7 +33674,7 @@ function ReactComponentRenderer({
           interact: interact_exports,
           wire: dist_exports
         };
-        w.__REACT = import_react9.default;
+        w.__REACT = import_react10.default;
         w.__GGUI_PRIMITIVES = primitives_exports;
         w.__GGUI_COMPONENTS = components_exports;
         w.__GGUI_COMPOSITIONS = compositions_exports;
@@ -33724,11 +33820,11 @@ function PreviewApp({
   token,
   selectedId
 }) {
-  const [state, setState] = (0, import_react45.useState)(
+  const [state, setState] = (0, import_react46.useState)(
     selectedId ? { kind: "loading" } : { kind: "idle" }
   );
-  const [version, setVersion] = (0, import_react45.useState)(0);
-  (0, import_react45.useEffect)(() => {
+  const [version, setVersion] = (0, import_react46.useState)(0);
+  (0, import_react46.useEffect)(() => {
     if (!selectedId) {
       setState({ kind: "idle" });
       return;
@@ -33741,7 +33837,7 @@ function PreviewApp({
     });
     return () => controller.abort();
   }, [selectedId, token, version]);
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     if (!selectedId) return;
     const controller = new AbortController();
     subscribeToRegistry(token, controller.signal, (event) => {
@@ -33903,7 +33999,7 @@ function mount() {
   if (!root) throw new Error("preview-root element not found in shell");
   const { token, selectedId } = bootstrap();
   (0, import_client.createRoot)(root).render(
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react45.StrictMode, { children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(PreviewApp, { token, selectedId }) })
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react46.StrictMode, { children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(PreviewApp, { token, selectedId }) })
   );
 }
 mount();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ggui-ai/dev-stack",
-  "version": "0.24.0",
+  "version": "0.26.0",
   "description": "Shared local dev engine for the ggui protocol: local UI registry discovery, compile-on-demand, filesystem watcher with SSE, and a read-only HTTP surface for dev tooling. Framework-neutral — agent runtime supervision plugs in via an adapter seam, so no agent SDK is hardcoded.",
   "keywords": [
     "ggui",
@@ -28,9 +28,9 @@
   "dependencies": {
     "chokidar": "^4.0.3",
     "esbuild": "^0.28.2",
-    "@ggui-ai/agent-runtime": "0.24.0",
-    "@ggui-ai/project-config": "0.24.0",
-    "@ggui-ai/ui-registry": "0.24.0"
+    "@ggui-ai/agent-runtime": "0.26.0",
+    "@ggui-ai/ui-registry": "0.26.0",
+    "@ggui-ai/project-config": "0.26.0"
   },
   "devDependencies": {
     "@types/node": "^24.0.0",
@@ -40,9 +40,9 @@
     "react-dom": "^19.0.0",
     "typescript": "^5.0.0",
     "vitest": "^3.2.6",
-    "@ggui-ai/design": "0.24.0",
-    "@ggui-ai/mcp-apps-react": "0.24.0",
-    "@ggui-ai/wire": "0.24.0"
+    "@ggui-ai/design": "0.26.0",
+    "@ggui-ai/mcp-apps-react": "0.26.0",
+    "@ggui-ai/wire": "0.26.0"
   },
   "repository": {
     "type": "git",