@solvapay/react 1.1.3 → 1.1.4-preview-8dc1786bbc8d3879570dcfec066948f40e3b9a73

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @solvapay/react changelog
 
+## 1.1.4-preview-8dc1786bbc8d3879570dcfec066948f40e3b9a73
+
+### Patch Changes
+
+- 0240670: Fix `<McpApp>` shell content width on wide-iframe hosts. The previous CSS-only "fill iframe width" change removed the `max-width: 520px` cap from `.solvapay-mcp-main` so unbounded-iframe hosts (MCP Inspector, MCP Jam, full-browser previews) could use the column they hand us, but it overshot — at iframe widths beyond ~700px the AppHeader, body card, and LegalFooter all stretched to the iframe edges, splaying receipt rows with hundreds of pixels of dead air, blowing up the `width: 100%` button to ~800px, and producing >95-character body-copy line lengths.
+
+  Re-introduce a single `max-inline-size: 520px` on `.solvapay-mcp-main` so the whole shell renders as one visually unified block centred in the iframe. The earlier `@media (min-width: 900px) { max-width: 960px }` sidebar-mode override is intentionally not carried forward — it was the cause of the felt-cramped problem on 1200px+ iframes.
+
+  Also convert the wide-shell sidebar `@media (min-width: 900px)` query (`.solvapay-mcp-shell-sidebar` + `.solvapay-mcp-shell-layout` grid switch) to a `@container (min-width: 900px)` query, with `container-type: inline-size` on `.solvapay-mcp-main`. Without this, the sidebar grid would still fire on iframe viewport width — meaning at iframe widths ≥900px the `1fr + 320px` grid would activate inside the 520px capped shell, squeezing the body column to ~184px and breaking payment forms. Container queries fire on the shell's own width.
+
+  When the shell renders the sidebar (authenticated customers — `isShellSidebarEligible` in `McpAppShell.tsx`), lift the cap to 900px via `.solvapay-mcp-main:has(.solvapay-mcp-shell-sidebar)`. Without this lift, `McpAppShell` would suppress the inline customer/seller detail cards in the body (assuming the sidebar takes them) while the sidebar would stay `display: none` (because the container threshold is never reached inside the 520 cap) — both copies hidden, customer details invisible for every authenticated user. With the lift, the 1fr + 320 sidebar grid has room and the container query fires correctly. Unauthenticated flows keep the tighter 520 cap.
+
+  Below 520px (Claude Desktop ~400-500px, ChatGPT inline ~400px, Mobile Claude ~300-360px) the cap is a no-op and content fills the host's container, matching Anthropic's "apps fill the container width" guidance for the primary use cases. Above 520px the cap activates.
+
+  Source-grounded basis for 520:
+  - SEP-1865 §"Container Dimensions" — when the host omits `containerDimensions.width`/`maxWidth` (Unbounded mode) the spec delegates the size choice to the View.
+  - OpenAI Apps SDK guidelines mandate "set a max width and design layouts that collapse gracefully on small screens".
+  - OpenAI's `apps-sdk-ui` reservation card uses `max-w-sm` (384px); `openai-apps-sdk-examples` cluster sits at 220-360px.
+  - Anthropic's PRIMARY use case is Desktop Claude at 400-500px. 520 is a small composite-flow buffer above that range — our `PlanStep → AmountStep → PaymentStep → SuccessStep` is slightly larger than a single-tool inline card.
+  - At our 14px body, 520px ≈ 62ch — inside the 65-75ch optimal reading line length.
+
+- 8dd8638: Fix `McpAppFull.addEventListener`/`removeEventListener` types to accept the tighter `K extends keyof AppEventMap` shape introduced in `@modelcontextprotocol/ext-apps@^1.7`. Previously the loose `(evt: string, …)` signature on the interface didn't match what ext-apps exposes from 1.7+, so consumers seeing types from both `@solvapay/react` and `ext-apps@^1.7` would hit `TS2322: Type 'App' is not assignable to type 'McpAppFull'` at every `<McpApp app={...} />` mount site.
+
+  The interface now declares `(evt: any, …)` for both event-listener fields, which is permissive enough to satisfy the new tightened generic without giving up the legacy `ontoolresult` setter fallback. Fixes [PR #169](https://github.com/solvapay/solvapay-sdk/pull/169).
+  - @solvapay/mcp-core@0.2.4
+
 ## 1.1.3
 
 ### Patch Changes

package/dist/mcp/index.d.cts

@@ -801,8 +801,8 @@ interface McpAppFull extends McpAppBootstrapLike, McpAppLike, McpBridgeAppLike {
      * Kept optional so minimal test adapters can omit it — the code falls
      * back to the legacy `ontoolresult` setter.
      */
-    addEventListener?: (evt: string, handler: (params: any) => void) => void;
-    removeEventListener?: (evt: string, handler: (params: any) => void) => void;
+    addEventListener?: (evt: any, handler: (params: any) => void) => void;
+    removeEventListener?: (evt: any, handler: (params: any) => void) => void;
     ontoolresult?: any;
     /**
      * Fire-and-forget request asking the host to unmount the app. When

package/dist/mcp/index.d.ts

@@ -801,8 +801,8 @@ interface McpAppFull extends McpAppBootstrapLike, McpAppLike, McpBridgeAppLike {
      * Kept optional so minimal test adapters can omit it — the code falls
      * back to the legacy `ontoolresult` setter.
      */
-    addEventListener?: (evt: string, handler: (params: any) => void) => void;
-    removeEventListener?: (evt: string, handler: (params: any) => void) => void;
+    addEventListener?: (evt: any, handler: (params: any) => void) => void;
+    removeEventListener?: (evt: any, handler: (params: any) => void) => void;
     ontoolresult?: any;
     /**
      * Fire-and-forget request asking the host to unmount the app. When

package/dist/mcp/styles.css

@@ -41,20 +41,56 @@ body {
   padding: 16px;
 }
 
+/* Cap the whole shell at a chat-card width so the AppHeader, body
+ * card stack, and LegalFooter all align as one visually unified
+ * block centred in the iframe. Capping individual children
+ * (`.solvapay-mcp-shell-body` only) leaves the merchant pill orphaned
+ * to the iframe-left and the footer's `space-between` splayed across
+ * the full iframe — both look disjointed on wide hosts.
+ *
+ * Why 520:
+ *   - SEP-1865 §"Container Dimensions" — when the host omits
+ *     `containerDimensions.width`/`maxWidth` (Unbounded mode) the
+ *     spec delegates the size choice to the View. We must pick.
+ *   - OpenAI Apps SDK guidelines mandate "set a max width and design
+ *     layouts that collapse gracefully on small screens".
+ *   - OpenAI's `apps-sdk-ui` reservation card uses `max-w-sm` (384px);
+ *     `openai-apps-sdk-examples` cluster sits at 220-360px.
+ *   - Anthropic's PRIMARY use case is Desktop Claude at 400-500px.
+ *     520 is a small composite-flow buffer above that range — our
+ *     PlanStep → AmountStep → PaymentStep → SuccessStep is slightly
+ *     larger than a single-tool inline card.
+ *   - At our 14px body, 520px ≈ 62ch — inside the 65-75ch optimal
+ *     reading line length.
+ *
+ * On hosts narrower than 520 (Claude Desktop ~400-500px, ChatGPT
+ * inline ~400px, Mobile Claude ~300-360px) the cap is a no-op and
+ * content fills, matching Anthropic's "apps fill the container
+ * width" guidance for the primary cases. The previous `@media
+ * (min-width: 900px) { max-width: 960px }` sidebar-mode override
+ * is intentionally NOT carried forward — it was the cause of the
+ * felt-cramped problem on 1200px+ iframes. Surfaces that genuinely
+ * need more horizontal room should request `displayMode: "fullscreen"`
+ * per Anthropic's design guidance, not stretch the inline shell. */
 .solvapay-mcp-main {
   display: flex;
   flex-direction: column;
   gap: 12px;
-  max-width: 520px;
-  margin: 0 auto;
+  max-inline-size: 520px;
+  margin-inline: auto;
 }
 
-/* Widen the container at the sidebar breakpoint so the two-column
- * layout has room to breathe. */
-@media (min-width: 900px) {
-  .solvapay-mcp-main {
-    max-width: 960px;
-  }
+/* When the shell renders the sidebar (authenticated customers,
+ * `isShellSidebarEligible` in McpAppShell.tsx), lift the cap so the
+ * 1fr + 320px sidebar grid fits AND the `@container (min-width: 900px)`
+ * query below can fire. 900 = body (520) + gap (16) + sidebar (320)
+ * + small buffer. Without this lift, McpAppShell would suppress the
+ * inline detail cards (assuming the sidebar takes them) while the
+ * sidebar stays `display: none` (because the @container threshold is
+ * never reached inside the 520 cap) — both copies hidden, customer
+ * details invisible for every authed user. */
+.solvapay-mcp-main:has(.solvapay-mcp-shell-sidebar) {
+  max-inline-size: 900px;
 }
 
 .solvapay-mcp-header h1 {
@@ -458,6 +494,16 @@ body {
   display: flex;
   flex-direction: column;
   gap: 16px;
+  /* Inline-size container for the sidebar layout below
+   * (`.solvapay-mcp-shell-sidebar` / `.solvapay-mcp-shell-layout` use
+   * `@container (min-width: 900px)`). Scoped here rather than on
+   * `.solvapay-mcp-main` so dormant fixed-positioned overlays
+   * (`.solvapay-mcp-tour-overlay`, `.solvapay-mcp-tour-popover`) that
+   * render as siblings of `<McpAppShell>` inside `.solvapay-mcp-main`
+   * stay anchored to the iframe viewport — `container-type` makes the
+   * element a containing block for `position: fixed` descendants per
+   * the CSS containment spec, so we keep that scope tight. */
+  container-type: inline-size;
 }
 
 .solvapay-mcp-tablist {
@@ -516,15 +562,21 @@ body {
   gap: 16px;
 }
 
-/* Wide-iframe sidebar: visible at >= 900px. Hosts with narrow iframes
- * (ChatGPT ~400px, compact Claude Desktop) fall through to the
- * single-column layout with Account in the tab strip. */
+/* Wide-shell sidebar: visible when `.solvapay-mcp-main` itself is
+ * ≥900px wide. Container query (not media query) so the layout fires
+ * on the shell's own size, not the iframe viewport — important
+ * because `.solvapay-mcp-main` is capped at 520px by default, and
+ * we don't want the sidebar grid activating inside that cap on wide
+ * iframes (MCP Inspector full browser, MCP Jam) which would squeeze
+ * the body column. Hosts with narrow iframes (ChatGPT ~400px,
+ * compact Claude Desktop) and the default capped shell fall through
+ * to the single-column layout with Account in the tab strip. */
 
 .solvapay-mcp-shell-sidebar {
   display: none;
 }
 
-@media (min-width: 900px) {
+@container (min-width: 900px) {
   .solvapay-mcp-shell-layout {
     grid-template-columns: minmax(0, 1fr) 320px;
   }
@@ -535,9 +587,9 @@ body {
     gap: 12px;
   }
 
-  /* Account tab is hidden at wide viewports — its content lives in
-   * the sidebar. Stays in the DOM so the arrow-key nav is stable;
-   * CSS just takes it out of flow. */
+  /* Account tab is hidden in the wide-shell layout — its content
+   * lives in the sidebar. Stays in the DOM so the arrow-key nav is
+   * stable; CSS just takes it out of flow. */
   .solvapay-mcp-tab[data-hide-wide='true'] {
     display: none;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solvapay/react",
-  "version": "1.1.3",
+  "version": "1.1.4-preview-8dc1786bbc8d3879570dcfec066948f40e3b9a73",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -75,12 +75,12 @@
     "@vitejs/plugin-react": "^6.0.1",
     "@vitest/coverage-v8": "^4.1.2",
     "jsdom": "^29.0.1",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
     "typescript": "^5.9.3",
     "vitest": "^4.1.2",
     "@solvapay/mcp-core": "0.2.4",
-    "@solvapay/server": "1.0.11",
+    "@solvapay/server": "1.0.12-preview-8dc1786bbc8d3879570dcfec066948f40e3b9a73",
     "@solvapay/test-utils": "0.0.0"
   },
   "scripts": {