@ggui-ai/mcp-apps-react-native 0.10.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ggui-ai/mcp-apps-react-native",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "React Native SDK for ggui — components and hooks for embedding agent-generated UIs in mobile apps.",
   "keywords": [
     "ggui",
@@ -58,9 +58,9 @@
   },
   "dependencies": {
     "@modelcontextprotocol/ext-apps": "^1.7.2",
-    "@ggui-ai/design": "0.10.0",
-    "@ggui-ai/protocol": "0.10.0",
-    "@ggui-ai/iframe-runtime": "0.10.0"
+    "@ggui-ai/iframe-runtime": "0.12.0",
+    "@ggui-ai/protocol": "0.12.0",
+    "@ggui-ai/design": "0.12.0"
   },
   "devDependencies": {
     "@modelcontextprotocol/sdk": "^1.27.0",

package/src/McpAppIframe/McpAppIframe.tsx

@@ -68,6 +68,7 @@ import {
   classifyRendererEnvelope,
   deriveResourceMountSource,
   dispatchHostBridgeRequest,
+  readSizeChangedNotification,
   type HostBridgeContext,
   type HostBridgeRequest,
   type HostBridgeResponse,
@@ -107,6 +108,7 @@ export const McpAppIframe = forwardRef<McpAppIframeRef, McpAppIframeProps>(
       onError,
       onObserve,
       onLifecycle,
+      onSizeChanged,
     },
     ref,
   ) {
@@ -226,6 +228,16 @@ export const McpAppIframe = forwardRef<McpAppIframeRef, McpAppIframeProps>(
             return;
           }
           case 'jsonrpc': {
+            // `ui/notifications/size-changed` (ggui#589 rider 5) — an
+            // id-less NOTIFICATION, so it never reaches the request
+            // dispatcher below (which returns null for notifications;
+            // before this branch the announce was dropped and content
+            // taller than the container clipped). Surface it and stop.
+            const sizeChange = readSizeChangedNotification(payload);
+            if (sizeChange !== null) {
+              onSizeChanged?.(sizeChange);
+              return;
+            }
             const req = payload as HostBridgeRequest;
             const response = await dispatchHostBridgeRequest(req, ctxRef.current);
             if (response) deliverToWebView(response);
@@ -256,7 +268,7 @@ export const McpAppIframe = forwardRef<McpAppIframeRef, McpAppIframeProps>(
             return;
         }
       },
-      [deliverToWebView, onError, onObserve, onLifecycle],
+      [deliverToWebView, onError, onObserve, onLifecycle, onSizeChanged],
     );
 
     // Mount-source null → caller gave an unmountable resource. Emit
@@ -306,7 +318,11 @@ export const McpAppIframe = forwardRef<McpAppIframeRef, McpAppIframeProps>(
 
     if (mountSource === null) {
       // Render an empty View so the caller still sees a slot; onError
-      // already fired the bootstrap-failed error.
+      // already fired the bootstrap-failed error. NO card chrome —
+      // the HOST owns borders/radius entirely (ggui#589 round 6: the
+      // hardcoded #e5e5e5 border ran at its own radius inside the
+      // embedder's rounded rim — the two-radii mismatch was the
+      // store-frame rejection).
       return (
         <View
           testID="mcp-app-iframe-empty"
@@ -315,9 +331,6 @@ export const McpAppIframe = forwardRef<McpAppIframeRef, McpAppIframeProps>(
             height: dims.height ?? 480,
             ...(dims.maxWidth !== undefined ? { maxWidth: dims.maxWidth } : {}),
             ...(dims.maxHeight !== undefined ? { maxHeight: dims.maxHeight } : {}),
-            borderWidth: 1,
-            borderColor: '#e5e5e5',
-            borderRadius: 8,
           }}
         />
       );
@@ -337,14 +350,15 @@ export const McpAppIframe = forwardRef<McpAppIframeRef, McpAppIframeProps>(
         {...(lifecycleState !== null
           ? { accessibilityValue: { text: lifecycleState } }
           : {})}
+        // NO card chrome (ggui#589 round 6) — the HOST owns borders/
+        // radius/silhouette entirely, the same doctrine as the round-5
+        // frameless ruling one layer down. `overflow: 'hidden'` stays:
+        // it is containment (clip the WebView to the slot), not chrome.
         style={{
           width: dims.width ?? '100%',
           height: dims.height ?? 480,
           ...(dims.maxWidth !== undefined ? { maxWidth: dims.maxWidth } : {}),
           ...(dims.maxHeight !== undefined ? { maxHeight: dims.maxHeight } : {}),
-          borderWidth: 1,
-          borderColor: '#e5e5e5',
-          borderRadius: 8,
           overflow: 'hidden',
         }}
       >

package/src/McpAppIframe/dispatch.ts

@@ -164,7 +164,12 @@ export async function dispatchHostBridgeRequest(
         // `define`), and a hand-maintained literal would silently drift
         // from the published version at every release.
         hostInfo: { name: 'ggui-react-native', version: 'unstamped' },
-        hostCapabilities: {},
+        // Truthful positive advertisement (kit R2 grade, ggui#600 OPEN
+        // FINDING closed): a wired tools/call relay advertises
+        // `serverTools` so the runtime never spends a failed user
+        // gesture probing a capability the host actually has.
+        hostCapabilities:
+          ctx.onToolCall !== undefined ? { serverTools: {} } : {},
         hostContext: {
           locale: ctx.locale,
           containerDimensions: ctx.containerDimensions,
@@ -307,6 +312,43 @@ export function classifyRendererEnvelope(data: unknown): RendererEnvelopeTag {
   return 'unknown';
 }
 
+/**
+ * Read a spec-canonical `ui/notifications/size-changed` NOTIFICATION
+ * (ggui#589 rider 5). The view sends it when its rendered content
+ * changes size (ext-apps `App.sendSizeChanged` / its autoResize
+ * observer); before this reader existed, the jsonrpc branch dropped
+ * every id-less message (`dispatchHostBridgeRequest` returns null for
+ * notifications) and content taller than the container clipped.
+ *
+ * Returns the validated `{width?, height?}` params, or `null` when the
+ * payload is not this notification OR carries nothing usable — each
+ * dimension must be a finite non-negative number to pass; a payload
+ * where NEITHER dimension survives is `null` (nothing to resize on).
+ * Pure function — testable without a WebView present.
+ */
+export function readSizeChangedNotification(
+  data: unknown,
+): { width?: number; height?: number } | null {
+  if (data === null || typeof data !== 'object') return null;
+  const d = data as { jsonrpc?: unknown; method?: unknown; params?: unknown };
+  if (d.jsonrpc !== '2.0' || d.method !== 'ui/notifications/size-changed') {
+    return null;
+  }
+  if (d.params === null || typeof d.params !== 'object' || Array.isArray(d.params)) {
+    return null;
+  }
+  const params = d.params as { width?: unknown; height?: unknown };
+  const dim = (v: unknown): number | undefined =>
+    typeof v === 'number' && Number.isFinite(v) && v >= 0 ? v : undefined;
+  const width = dim(params.width);
+  const height = dim(params.height);
+  if (width === undefined && height === undefined) return null;
+  return {
+    ...(width !== undefined ? { width } : {}),
+    ...(height !== undefined ? { height } : {}),
+  };
+}
+
 export function buildDispatchActionNotification(
   name: string,
   data: unknown,

package/src/McpAppIframe/types.ts

@@ -211,6 +211,26 @@ export interface McpAppIframeProps {
    * neither mirrors nor blocks).
    */
   readonly onLifecycle?: (event: McpAppLifecycleEvent) => void;
+
+  /**
+   * Fired when the view announces a content-size change via the
+   * spec-canonical `ui/notifications/size-changed` notification
+   * (ext-apps `App.sendSizeChanged` / its autoResize observer).
+   * Both dimensions are optional per the spec — the common autoResize
+   * case announces `height` only. Values are validated finite
+   * non-negative numbers before they reach this callback; malformed
+   * announcements are dropped silently (the same tolerant posture as
+   * every other envelope).
+   *
+   * The host does NOT resize itself: `containerDimensions` stays the
+   * embedder's declaration. Bind this to drive your own container
+   * sizing (autoResize) — without it, content taller than the
+   * container clips.
+   */
+  readonly onSizeChanged?: (size: {
+    readonly width?: number;
+    readonly height?: number;
+  }) => void;
 }
 
 /**

package/src/theme/ThemeProvider.tsx

@@ -93,9 +93,33 @@ export interface ThemeProviderProps {
   children: ReactNode;
 }
 
+/**
+ * TERMINAL CONSUMER of the theme-mode ladder (adversarial-cycle
+ * ruling, ggui#598 leg 4): the RN provider paints the NATIVE chrome
+ * around the WebView — there is no downstream layer left to fill an
+ * absent opinion, and React Native must render with SOME concrete
+ * scheme. The `?? 'light'` here is therefore the documented
+ * terminal-consumer default (the same posture as the design package's
+ * css-tokens terminal default), NOT a mid-ladder defaulting: it fires
+ * only after the embedder's explicit prop AND the OS scheme are both
+ * absent (`useColorScheme()` → null, rare). Mid-ladder code — anything
+ * with a layer below it — must never default; it delegates to
+ * `@ggui-ai/protocol/integrations/theme-binding` and lets absence
+ * propagate (the composition law).
+ *
+ * @internal — exported for the precedence pin; production caller is
+ *   `ThemeProvider`.
+ */
+export function resolveNativeScheme(
+  prop: 'light' | 'dark' | undefined,
+  system: 'light' | 'dark' | null | undefined,
+): 'light' | 'dark' {
+  return prop ?? system ?? 'light';
+}
+
 export function ThemeProvider({ colorScheme: colorSchemeProp, children }: ThemeProviderProps) {
   const systemScheme = useColorScheme();
-  const effectiveScheme = colorSchemeProp ?? systemScheme ?? 'light';
+  const effectiveScheme = resolveNativeScheme(colorSchemeProp, systemScheme);
   const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
 
   useEffect(() => {