@ggui-ai/iframe-runtime 0.14.0 → 0.16.0

package/dist/system-cards/NoCredentialsCard.js

@@ -36,7 +36,7 @@ function GguiWordmark() {
     // off-white in dark). `gray-300` flips too — the gray scale in
     // `darkTheme` is intentionally inverted, so the wordmark's
     // contrasting "chrome" tone reads correctly under either theme.
-    const ink = 'var(--ggui-color-onSurface, #292929)';
+    const ink = 'var(--ggui-color-onContainer, #292929)';
     const chrome = 'var(--ggui-color-neutral-300, #d1d5db)';
     return (_jsxs("svg", { viewBox: "0 0 224 50", width: "72", height: "16", role: "img", "aria-label": "ggui", style: { display: 'block', flexShrink: 0 }, children: [_jsx("path", { d: "M 0 0 H 50 V 25 H 25 V 50 H 0 Z", fill: chrome }), _jsx("rect", { x: "33", y: "33", width: "17", height: "17", fill: ink }), _jsx("path", { d: "M 58 0 H 108 V 25 H 83 V 50 H 58 Z", fill: ink }), _jsx("rect", { x: "91", y: "33", width: "17", height: "17", fill: chrome }), _jsx("path", { d: "M 141 50 C 154.807 50 166 38.8071 166 25 V 0 H 116 V 25 C 116 38.8071 127.193 50 141 50 Z", fill: ink }), _jsx("rect", { x: "174", y: "0", width: "50", height: "50", fill: chrome })] }));
 }
@@ -87,10 +87,10 @@ export function NoCredentialsCard({ settingsUrl, intent, }) {
     // INVERTED in darkTheme so `gray-100` is light-on-dark when in
     // dark mode and dark-on-light when in light mode).
     //
-    //   - `--ggui-color-surface` — opaque card surface (white in light,
+    //   - `--ggui-color-container` — opaque card surface (white in light,
     //     slate-800 in dark). Used for the URL block + QR backdrop.
-    //   - `--ggui-color-onSurface` — high-contrast body text.
-    //   - `--ggui-color-onSurfaceVariant` — muted captions/headings.
+    //   - `--ggui-color-onContainer` — high-contrast body text.
+    //   - `--ggui-color-onSunken` — muted captions/headings.
     //   - `--ggui-color-neutral-100` — subtle tinted background that
     //     auto-flips. Used for the inner "details" panel — slightly
     //     differentiated from outer transparent canvas without being
@@ -103,7 +103,7 @@ export function NoCredentialsCard({ settingsUrl, intent, }) {
     // background creates a card-on-card look. Padding stays so content
     // doesn't crowd the iframe edges. Outside Claude (preview iframe,
     // console inspector), the ThemeProvider's body background is the
-    // theme's `--ggui-color-surface`, so a transparent card just
+    // theme's `--ggui-color-container`, so a transparent card just
     // shows the theme's canvas behind it — also fine.
     _jsx(Card, { padding: "lg", border: false, shadow: "none", style: { backgroundColor: 'transparent' }, children: _jsxs(Stack, { gap: "lg", children: [_jsxs(Stack, { gap: "md", children: [_jsxs("div", { style: {
                                 display: 'flex',
@@ -118,11 +118,11 @@ export function NoCredentialsCard({ settingsUrl, intent, }) {
                             }, children: [_jsx(Heading, { level: 3, children: "Connect an LLM provider" }), _jsx("code", { style: {
                                         fontFamily: 'var(--ggui-font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace)',
                                         fontSize: 'var(--ggui-font-size-xs, 11px)',
-                                        color: 'var(--ggui-color-onSurfaceVariant, #71717a)',
+                                        color: 'var(--ggui-color-onSunken, #71717a)',
                                         opacity: 0.7,
                                         userSelect: 'all',
                                     }, title: "iframe-runtime build identifier \u2014 useful for diagnosing stale caches", children: BUILD_ID })] }), _jsx(Text, { style: {
-                                color: 'var(--ggui-color-onSurfaceVariant, #52525b)',
+                                color: 'var(--ggui-color-onSunken, #52525b)',
                                 lineHeight: '1.55',
                             }, children: "ggui needs an LLM key to render UIs. Open this server\u2019s settings page to paste an Anthropic, OpenAI, Google, or OpenRouter API key." })] }), _jsx("div", { style: {
                         display: 'flex',
@@ -148,7 +148,7 @@ export function NoCredentialsCard({ settingsUrl, intent, }) {
                                             borderRadius: 'var(--ggui-shape-radius-sm, 6px)',
                                             lineHeight: 0,
                                         }, children: _jsx(QrCode, { value: settingsUrl, size: 120, foreground: "#000000", background: "#ffffff" }) }), _jsx(Text, { size: "xs", style: {
-                                            color: 'var(--ggui-color-onSurfaceVariant, #52525b)',
+                                            color: 'var(--ggui-color-onSunken, #52525b)',
                                             fontSize: 'var(--ggui-font-size-xs, 11px)',
                                             textAlign: 'center',
                                         }, children: "Scan with your phone" })] }), _jsxs("div", { style: {
@@ -158,7 +158,7 @@ export function NoCredentialsCard({ settingsUrl, intent, }) {
                                     flex: '1 1 240px',
                                     minWidth: '200px',
                                 }, children: [_jsx(Text, { size: "xs", style: {
-                                            color: 'var(--ggui-color-onSurfaceVariant, #52525b)',
+                                            color: 'var(--ggui-color-onSunken, #52525b)',
                                             fontWeight: 'var(--ggui-font-weight-semibold, 600)',
                                             textTransform: 'uppercase',
                                             letterSpacing: '0.06em',
@@ -166,11 +166,11 @@ export function NoCredentialsCard({ settingsUrl, intent, }) {
                                         }, children: "Or open this URL in your browser" }), _jsx("div", { style: {
                                             fontFamily: 'var(--ggui-font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace)',
                                             fontSize: 'var(--ggui-font-size-sm, 13px)',
-                                            color: 'var(--ggui-color-onSurface, #111)',
+                                            color: 'var(--ggui-color-onContainer, #111)',
                                             wordBreak: 'break-all',
                                             userSelect: 'all',
                                             padding: 'var(--ggui-spacing-3, 12px)',
-                                            background: 'var(--ggui-color-surface, #fff)',
+                                            background: 'var(--ggui-color-container, #fff)',
                                             border: '1px solid var(--ggui-color-neutral-200, #e4e4e7)',
                                             borderRadius: 'var(--ggui-shape-radius-sm, 6px)',
                                             lineHeight: '1.45',
@@ -180,10 +180,10 @@ export function NoCredentialsCard({ settingsUrl, intent, }) {
                                             gap: 'var(--ggui-spacing-3, 12px)',
                                             flexWrap: 'wrap',
                                         }, children: [_jsx(Button, { variant: "primary", size: "md", onClick: onPrimary, disabled: ctaDisabled, children: ctaLabel }), ctaState === 'idle' || ctaState === 'working' ? (_jsx(Text, { size: "xs", style: {
-                                                    color: 'var(--ggui-color-onSurfaceVariant, #52525b)',
+                                                    color: 'var(--ggui-color-onSunken, #52525b)',
                                                     opacity: 0.85,
                                                 }, children: "or tap-and-hold the URL above to copy" })) : null] })] })] }) }), intent ? (_jsxs(Text, { size: "xs", style: {
-                        color: 'var(--ggui-color-onSurfaceVariant, #52525b)',
+                        color: 'var(--ggui-color-onSunken, #52525b)',
                         opacity: 0.7,
                     }, children: ["Pending prompt: ", intent] })) : null] }) }));
 }

package/dist/system-cards/ProtocolProbeCard.js

@@ -372,7 +372,7 @@ function ProbeButtonRow({ method, description, call, }) {
             padding: 'var(--ggui-spacing-3, 12px)',
             borderRadius: 'var(--ggui-shape-radius-md, 10px)',
             border: '1px solid var(--ggui-color-neutral-200, #e4e4e7)',
-            background: 'var(--ggui-color-surface, #fff)',
+            background: 'var(--ggui-color-container, #fff)',
         }, children: [_jsxs("div", { style: {
                     display: 'flex',
                     alignItems: 'center',
@@ -382,10 +382,10 @@ function ProbeButtonRow({ method, description, call, }) {
                 }, children: [_jsx("code", { style: {
                             fontFamily: 'var(--ggui-font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace)',
                             fontSize: 'var(--ggui-font-size-sm, 13px)',
-                            color: 'var(--ggui-color-onSurface, #111)',
+                            color: 'var(--ggui-color-onContainer, #111)',
                             fontWeight: 'var(--ggui-font-weight-semibold, 600)',
                         }, children: method }), statusBadge] }), _jsx(Text, { size: "xs", style: {
-                    color: 'var(--ggui-color-onSurfaceVariant, #52525b)',
+                    color: 'var(--ggui-color-onSunken, #52525b)',
                     fontSize: 'var(--ggui-font-size-xs, 11px)',
                 }, children: description }), _jsx("div", { style: { display: 'flex', gap: 'var(--ggui-spacing-2, 8px)' }, children: _jsx(Button, { variant: "primary", size: "sm", onClick: onClick, disabled: outcome.state === 'pending', children: buttonLabel }) }), outcome.state === 'success' || outcome.state === 'error' ? (_jsx("pre", { style: {
                     margin: 0,
@@ -393,7 +393,7 @@ function ProbeButtonRow({ method, description, call, }) {
                     fontSize: 'var(--ggui-font-size-xs, 11px)',
                     color: outcome.state === 'error'
                         ? 'var(--ggui-color-warning-500, #b45309)'
-                        : 'var(--ggui-color-onSurfaceVariant, #52525b)',
+                        : 'var(--ggui-color-onSunken, #52525b)',
                     background: 'var(--ggui-color-neutral-100, #f4f4f5)',
                     padding: 'var(--ggui-spacing-2, 8px)',
                     borderRadius: 'var(--ggui-shape-radius-sm, 6px)',
@@ -414,7 +414,7 @@ export function ProtocolProbeCard({ intent, }) {
                                 gap: 'var(--ggui-spacing-3, 12px)',
                                 flexWrap: 'wrap',
                             }, children: [_jsx(Heading, { level: 3, children: "MCP Apps protocol probe" }), _jsx(Badge, { variant: "info", children: "diagnostic" })] }), _jsxs(Text, { style: {
-                                color: 'var(--ggui-color-onSurfaceVariant, #52525b)',
+                                color: 'var(--ggui-color-onSunken, #52525b)',
                                 lineHeight: '1.55',
                             }, children: ["One button per primary host effect emitted by the iframe runtime's gesture surfaces (submit-action bridge / native- idiom interceptors). Click each to verify which methods this host honors. The", _jsx("code", { children: "tools/call" }), " row chains the full submit-action bridge (audit + context + consent), reproducing the production ", _jsx("code", { children: "dispatchSubmitAction" }), " envelope shape verbatim. The receive log below captures every notification the host emits while this card is mounted."] })] }), _jsxs(Stack, { gap: "md", children: [_jsx(ProbeButtonRow, { method: "ui/message", description: "Submit-action bridge step 3 \u2014 consent-gated user authorization. Host pre-fills + waits for user confirm before the LLM acts on the paired pending-action context.", call: call }), _jsx(ProbeButtonRow, { method: "ui/update-model-context", description: "Submit-action bridge step 2 \u2014 silent structured `[ggui:pending-action]` context drop. LLM honors on next turn. No immediate UI.", call: call }), _jsx(ProbeButtonRow, { method: "ui/open-link", description: "Native-idiom anchor click interceptor primary effect. Opens ggui.ai in the host's browser / new tab. Real iframe code triggers via `<a href target='_blank'>` or cross-origin href.", call: call }), _jsx(ProbeButtonRow, { method: "ui/request-display-mode", description: "Native-idiom fullscreen interceptor primary effect. Request fullscreen \u2014 real iframe code calls `el.requestFullscreen()`; the runtime overrides the prototype to route through here.", call: call }), _jsx(ProbeButtonRow, { method: "tools/call", description: "Full submit-action bridge: `tools/call ggui_runtime_submit_action` (audit, kind:'dispatch') + `ui/update-model-context` + `ui/message`. Spec \u00A7401 requires `_meta.ui.visibility:['app']` on the receiving tool.", call: call })] }), _jsxs(Stack, { gap: "sm", children: [_jsxs("div", { style: {
                                 display: 'flex',
@@ -422,10 +422,10 @@ export function ProtocolProbeCard({ intent, }) {
                                 justifyContent: 'space-between',
                                 gap: 'var(--ggui-spacing-3, 12px)',
                             }, children: [_jsx(Heading, { level: 4, children: "Receive log" }), _jsxs(Text, { size: "xs", style: {
-                                        color: 'var(--ggui-color-onSurfaceVariant, #52525b)',
+                                        color: 'var(--ggui-color-onSunken, #52525b)',
                                         fontSize: 'var(--ggui-font-size-xs, 11px)',
                                     }, children: [log.length, " ", log.length === 1 ? 'event' : 'events'] })] }), log.length === 0 ? (_jsx(Text, { size: "xs", style: {
-                                color: 'var(--ggui-color-onSurfaceVariant, #52525b)',
+                                color: 'var(--ggui-color-onSunken, #52525b)',
                                 fontStyle: 'italic',
                             }, children: "No host notifications observed yet. Click a probe button or wait for the host to emit one." })) : (_jsx("div", { style: {
                                 display: 'flex',
@@ -443,17 +443,17 @@ export function ProtocolProbeCard({ intent, }) {
                                 }, children: [_jsxs("summary", { style: {
                                             cursor: 'pointer',
                                             padding: 'var(--ggui-spacing-1, 4px) 0',
-                                            color: 'var(--ggui-color-onSurface, #111)',
+                                            color: 'var(--ggui-color-onContainer, #111)',
                                         }, children: [_jsx("span", { style: {
-                                                    color: 'var(--ggui-color-onSurfaceVariant, #52525b)',
+                                                    color: 'var(--ggui-color-onSunken, #52525b)',
                                                     marginRight: '8px',
                                                 }, children: entry.tsIso.slice(11, 19) }), _jsx("span", { style: { fontWeight: 600 }, children: entry.method })] }), _jsx("pre", { style: {
                                             margin: '4px 0 0 16px',
                                             whiteSpace: 'pre-wrap',
                                             wordBreak: 'break-word',
-                                            color: 'var(--ggui-color-onSurfaceVariant, #52525b)',
+                                            color: 'var(--ggui-color-onSunken, #52525b)',
                                         }, children: JSON.stringify(entry.params, null, 2) })] }, entry.id))) }))] }), intent ? (_jsxs(Text, { size: "xs", style: {
-                        color: 'var(--ggui-color-onSurfaceVariant, #52525b)',
+                        color: 'var(--ggui-color-onSunken, #52525b)',
                         opacity: 0.7,
                     }, children: ["Triggered by: ", intent] })) : null] }) }));
 }

package/dist/system-cards/QrCode.js

@@ -22,7 +22,7 @@ import qrcodeFactory from 'qrcode-generator';
  * fails (e.g., URL too long for any error-correction level) so the
  * caller can render a fallback.
  */
-export function QrCode({ value, size = 128, errorCorrection = 'M', foreground = 'var(--ggui-color-onSurface, #18181b)', background = 'var(--ggui-color-surface, #ffffff)', ariaLabel, }) {
+export function QrCode({ value, size = 128, errorCorrection = 'M', foreground = 'var(--ggui-color-onContainer, #18181b)', background = 'var(--ggui-color-container, #ffffff)', ariaLabel, }) {
     const moduleMatrix = React.useMemo(() => {
         try {
             // typeNumber=0 lets the encoder pick the smallest fit. The

package/dist/system-cards/index.js

@@ -50,8 +50,8 @@ function UnknownSystemCard({ kind, props, }) {
             border: '1px solid var(--ggui-color-outlineVariant, #e4e4e7)',
             borderRadius: 'var(--ggui-shape-radius-md, 10px)',
             fontFamily: 'var(--ggui-font-family-sans, -apple-system, BlinkMacSystemFont, sans-serif)',
-            background: 'var(--ggui-color-surfaceVariant, #f4f4f5)',
-            color: 'var(--ggui-color-onSurfaceVariant, #52525b)',
+            background: 'var(--ggui-color-sunken, #f4f4f5)',
+            color: 'var(--ggui-color-onSunken, #52525b)',
         },
     }, React.createElement('div', { style: { fontWeight: 600, marginBottom: 8 } }, `Unknown system card: ${kind}`), React.createElement('div', {
         style: {

package/dist/types.d.ts

@@ -15,7 +15,7 @@
  * declared the manager's constructor bag has been retired.
  */
 import type { McpAppAiGguiRenderMeta } from '@ggui-ai/protocol/integrations/mcp-apps';
-import type { HostContextProjection, ComponentGguiSession, SystemGguiSession } from '@ggui-ai/protocol';
+import type { HostContextProjection, ComponentGguiSession, SystemGguiSession } from '@ggui-ai/protocol/wire';
 /**
  * The four server-assigned ledger fields on every wire-delivered
  * {@link GguiSession}. They're stamped by the server's per-render event

package/dist/validation.d.ts

@@ -26,7 +26,7 @@
  * host wrapper explicitly does NOT run this path — its only contract is
  * the postMessage bridge to the renderer iframe.
  */
-import type { ActionSpec, ActionEnvelope, ContextSpec, JsonObject, PropsSpec, ReservedChannelValidator, StreamSpec, ValidationResult } from '@ggui-ai/protocol';
+import type { ActionSpec, ActionEnvelope, ContextSpec, JsonObject, PropsSpec, ReservedChannelValidator, StreamSpec, ValidationResult } from '@ggui-ai/protocol/wire';
 import type { CompiledValidatorSet } from './compiled-validators.js';
 /**
  * Install the precompiled validators loaded from the bootstrap. Called

package/dist/validation.js

@@ -1,4 +1,4 @@
-import { isKnownReservedChannel, validateActionEnvelope, validateContextData, validatePropsData, validateStreamData, } from '@ggui-ai/protocol';
+import { isKnownReservedChannel, validateActionEnvelope, validateContextData, validatePropsData, validateStreamData, } from '@ggui-ai/protocol/wire';
 // =============================================================================
 // Active precompiled-validator set
 // =============================================================================

package/dist/wire-config.d.ts

@@ -16,7 +16,7 @@
  * ProtocolError dual-emission policy, and the tools/call-vs-WS
  * dispatch transport.
  */
-import type { ActionEnvelope, GguiSession } from '@ggui-ai/protocol';
+import type { ActionEnvelope, GguiSession } from '@ggui-ai/protocol/wire';
 import type { GguiSessionSeedInput } from './types.js';
 import { ClientContractViolationError, StreamBus, type WireConfig } from '@ggui-ai/wire';
 import type { WebSocketMessage } from '@ggui-ai/protocol/transport/websocket';
@@ -98,8 +98,8 @@ export interface BuildRootWireConfigOptions {
      * pending-events pipe. First-party `createGguiServer` bridges it
      * ONLY when composed with DEFAULT handlers (`opts.handlers`
      * undefined); a custom `handlers` list drains its own pipe, so the
-     * channel deliberately does not bridge — the hosted pod is such a
-     * caller, and on it a WS gesture lands on the retained ledger only.
+     * channel deliberately does not bridge — a deployment composing its own
+     * `handlers` is such a caller, and on it a WS gesture lands on the retained ledger only.
      * See `GguiSessionChannelOptions.pendingEventConsumer`. The default
      * send remains the seam tests and direct-WS callers exercise.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ggui-ai/iframe-runtime",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "description": "The iframe-local ggui runtime: a self-contained ESM bundle that boots inside an MCP Apps host iframe, runs the protocol-version handshake, opens the live-channel WebSocket, and mounts the rendered UI. Bundles React, ReactDOM, and the ggui design system so generated component code has a single seam to read from.",
   "keywords": [
     "ggui",
@@ -41,12 +41,12 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "zod": "^4.3.6",
-    "@ggui-ai/gadgets": "0.14.0",
-    "@ggui-ai/preview-a2ui": "0.14.0",
-    "@ggui-ai/live-channel": "0.14.0",
-    "@ggui-ai/protocol": "0.14.0",
-    "@ggui-ai/design": "0.14.0",
-    "@ggui-ai/wire": "0.14.0"
+    "@ggui-ai/design": "0.16.0",
+    "@ggui-ai/live-channel": "0.16.0",
+    "@ggui-ai/preview-a2ui": "0.16.0",
+    "@ggui-ai/gadgets": "0.16.0",
+    "@ggui-ai/protocol": "0.16.0",
+    "@ggui-ai/wire": "0.16.0"
   },
   "peerDependencies": {
     "@modelcontextprotocol/sdk": "^1.27.0"