diff --git a/typescript/catalogs/iframe/CHANGELOG.md b/typescript/catalogs/iframe/CHANGELOG.md
index bcda24ab58..44d013d7a9 100644
--- a/typescript/catalogs/iframe/CHANGELOG.md
+++ b/typescript/catalogs/iframe/CHANGELOG.md
@@ -2,7 +2,8 @@
 
 ## Unreleased
 
-- Add the `@a2ui/catalog-iframe` package: the sandbox proxy asset with its configuration
-  (`configureSandbox`, `resolveSandboxUrl`), the `FrameHost` interface and the `WebAppFrameBridge`
-  host bridge with allowlist validation, data model sync, function calls and sizing.
-  [#2797](https://github.com/a2ui-project/a2ui/pull/2797)
+- Add the `@a2ui/catalog-iframe` package: `iframeCatalog` with the `WebAppFrameUrl` and
+  `WebAppFrameSrcdoc` universal components, which render a web app inside the sandbox proxy and
+  connect it to the surface through `WebAppFrameBridge`. Hosts serve the sandbox asset and locate
+  it with `configureSandbox`. [#2797](https://github.com/a2ui-project/a2ui/pull/2797)
+  [#2798](https://github.com/a2ui-project/a2ui/pull/2798)
diff --git a/typescript/catalogs/iframe/README.md b/typescript/catalogs/iframe/README.md
index 88158d7a17..70924739f1 100644
--- a/typescript/catalogs/iframe/README.md
+++ b/typescript/catalogs/iframe/README.md
@@ -5,26 +5,136 @@ application or an external web app, inside a sandboxed frame that talks to the h
 the `a2ui_*` message protocol defined in the
 [WebApp iframe component specification](../../../catalogs/iframe/web_app_frame_specification.md).
 
-This release contains the building blocks the frame components are made of:
+The package contains:
 
+- `iframeCatalog`, with the two universal components of the catalog, `WebAppFrameUrl` and
+  `WebAppFrameSrcdoc`;
 - the sandbox proxy asset (`sandbox/` in the published package) and the configuration of where the
   host serves it;
 - `WebAppFrameBridge`, the host side of the protocol: `MessagePort` handshake, two-way data model
   sync for `data.paths`, `allowedEvents`, `allowedFunctions` and `mutableData` allowlists with JSON
   Schema validation, function calls, resize requests and host context updates;
-- the zod schemas of the wire messages and the `FrameHost` interface a renderer adapts its component
-  context to.
-
-The `WebAppFrameUrl` and `WebAppFrameSrcdoc` components that use them are added in a following
-release, together with the catalog registration.
+- `SandboxedFrameElement` and `ComponentContextFrameHost`, the base class and the host adapter the
+  components are built on, for catalogs that add their own sandboxed frame components.
 
 ## Installation
 
 ```bash
-npm install @a2ui/catalog-iframe
+npm install @a2ui/catalog-iframe @a2ui/web_core lit
+```
+
+`@a2ui/web_core` and `lit` are peer dependencies: the components are universal components built on
+`A2uiLitElement` from `@a2ui/web_core/v1_0`. The package also depends on `zod` and `ajv`
+and expects a browser environment.
+
+## Usage
+
+The components are custom elements that any renderer able to host universal components can render.
+Register the catalog with the `MessageProcessor` next to the catalogs you already use, and serve the
+sandbox asset (next section):
+
+```ts
+import {basicCatalog, MessageProcessor} from '@a2ui/web_core/v1_0';
+import {iframeCatalog} from '@a2ui/catalog-iframe';
+
+const processor = new MessageProcessor([basicCatalog, iframeCatalog]);
+```
+
+A surface resolves components through its default catalog, the `catalogId` of its
+`createSurface` message, unless a component names another registered catalog with its own
+`catalogId`. A payload that mixes frames with basic components therefore creates the surface with
+the basic catalog id and marks the frame component:
+
+```json
+{
+  "id": "counter_app",
+  "component": "WebAppFrameSrcdoc",
+  "catalogId": "https://a2ui.org/specification/v1_0/catalogs/iframe/catalog.json",
+  "height": 160,
+  "htmlContent": "..."
+}
 ```
 
-The package depends on `zod` and `ajv` and expects a browser environment.
+A frame's `allowedFunctions` resolve against the frame component's own catalog first and then
+the surface default, so a frame on such a surface can call the basic catalog's functions.
+
+## Components
+
+Both components render one `<iframe>` in their light DOM that loads the sandbox proxy; the proxy
+runs the content in an inner frame with `sandbox="allow-scripts allow-forms allow-modals"`, never
+`allow-same-origin`. The proxy frame is titled with the component's `accessibility.label` when it
+has one, or "Embedded web application". They share these properties:
+
+| Property                  | Type                                | Purpose                                                                                                 |
+| ------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| `height`                  | `DynamicNumber`                     | Height of the frame in CSS pixels. Without it, the element is 500px tall; see Styling.                  |
+| `config`                  | object                              | Static configuration handed to the application in the `a2ui_app_frame_init` handshake.                  |
+| `data.paths`              | map of key to JSON pointer          | Data model paths the application can read; their values are sent initially and whenever they change.    |
+| `mutableData`             | map of key to JSON Schema           | The subset of `data.paths` keys the application may write, each with the schema its value must satisfy. |
+| `allowedEvents`           | map of action name to JSON Schema   | Actions the application may dispatch, each with the schema of its payload. Anything else is dropped.    |
+| `allowedFunctions`        | map of function name to JSON Schema | Catalog functions the application may call, each with the schema of its arguments.                      |
+| `disableSchemaValidation` | boolean                             | Skips the JSON Schema checks; the allowlists still apply. For trusted first-party applications only.    |
+| `accessibility`           | `AccessibilityAttributes`           | `label` becomes the accessible name of the frame.                                                       |
+
+`WebAppFrameSrcdoc` adds `htmlContent`, the HTML string to render, optionally prefixed with
+`url_encoded:` when it was `encodeURIComponent`-encoded for transport. The host injects a strict
+`Content-Security-Policy` meta tag into the markup (no network, no form submission, no nested
+frames; an author policy is kept and can only narrow it) and a script that turns hyperlink clicks
+into `open_url` actions instead of navigations. List `open_url` in `allowedEvents` to receive them.
+An empty value loads nothing.
+
+`WebAppFrameUrl` adds `url`, a `DynamicString` with the `http` or `https` URL of the application.
+The host appends its own origin as the `origin` query parameter so the application can address its
+messages to it; other schemes load nothing and are reported once with `console.warn`.
+
+A message that renders a counter app sharing `/counter/count` with the surface (markup shortened):
+
+```json
+{
+  "version": "v1.0",
+  "updateComponents": {
+    "surfaceId": "shared-counter",
+    "components": [
+      {
+        "id": "counter_app",
+        "component": "WebAppFrameSrcdoc",
+        "height": 160,
+        "data": {"paths": {"count": "/counter/count", "label": "/counter/label"}},
+        "mutableData": {"count": {"type": "integer", "minimum": 0}},
+        "allowedEvents": {
+          "counter_saved": {
+            "type": "object",
+            "properties": {"count": {"type": "integer"}},
+            "required": ["count"],
+            "additionalProperties": false
+          }
+        },
+        "htmlContent": "<!doctype html><html><body><p id=\"status\"></p><script>...</script></body></html>"
+      }
+    ]
+  }
+}
+```
+
+The application inside receives `{count: 0, label: "clicks"}` in the handshake, writes `count` back
+through `a2ui_data_model_change`, and dispatches `counter_saved`, which reaches the host as an
+action of the `counter_app` component. Property changes are applied live: a new `htmlContent` or
+`url` reloads the content and reconnects the bridge, a new `height` resizes the element.
+
+### Styling
+
+The components are styled through CSS custom properties, which can be set on any ancestor:
+
+| Property                               | Default                                                              | Purpose                                |
+| -------------------------------------- | -------------------------------------------------------------------- | -------------------------------------- |
+| `--a2ui-sandboxed-frame-height`        | `500px`                                                              | Height used when `height` is absent.   |
+| `--a2ui-sandboxed-frame-border`        | `var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc)` | Border around the frame.               |
+| `--a2ui-sandboxed-frame-border-radius` | `var(--a2ui-border-radius, 8px)`                                     | Corner radius.                         |
+| `--a2ui-sandboxed-frame-background`    | `#fff`                                                               | Background behind transparent content. |
+
+An application that asks for a size through `a2ui_size_changed` resizes the frame and the element
+within the limits of the bridge (100px to 2000px high); the next `height` property change takes
+over again.
 
 ## Sandbox asset
 
@@ -91,10 +201,11 @@ at it and list the host origin in the proxy page, which then keeps the self-test
 
 ## Host bridge
 
-`WebAppFrameBridge` connects one frame to the surface that renders it. It takes the frame element,
-a `FrameHost` (five functions: read, write and subscribe to a data model path, invoke a catalog
-function, dispatch an action), the origin the proxy is served from, and a function that returns the
-component's current properties:
+The components own their bridge; this section is for hosts that embed a frame without the
+components. `WebAppFrameBridge` connects one frame to the surface that renders it. It takes the
+frame element, a `FrameHost` (five functions: read, write and subscribe to a data model path,
+invoke a catalog function, dispatch an action), the origin the proxy is served from, and a function
+that returns the component's current properties:
 
 ```ts
 import {resolveSandboxUrl, sendSandboxResourceReady, WebAppFrameBridge} from '@a2ui/catalog-iframe';
@@ -128,6 +239,53 @@ against the wire schema, matched against the allowlist of its kind and validated
 Schema listed there, in that order. Anything that fails is dropped with a `console.warn`; function
 calls get an error reply (`NOT_ALLOWED`, `VALIDATION_ERROR` or `EXECUTION_ERROR`).
 
+## Writing another sandboxed frame component
+
+`SandboxedFrameElement` is the base class of both components. It renders the proxy frame, applies
+the `height` property, listens for the proxy's ready signal, sends the resource once the proxy is
+listening, reconnects the bridge when the context or the content changes, and tears everything down
+when the element leaves the document. A subclass provides the proxy page and protocol to use, the
+resource its properties describe, its height and title, and the bridge connection:
+
+```ts
+import {
+  ComponentContextFrameHost,
+  frameHeightFromProp,
+  frameTitleFromProps,
+  SandboxedFrameElement,
+} from '@a2ui/catalog-iframe';
+
+class MyFrameElement extends SandboxedFrameElement<typeof MyFrameApi> {
+  protected override readonly api = MyFrameApi;
+  protected readonly sandboxMode = 'html' as const;
+  protected readonly sandboxProtocol = 'a2ui' as const;
+
+  protected resolveResource() {
+    return {html: this.controller.props.markup};
+  }
+  protected resolveHeight() {
+    return frameHeightFromProp(this.controller.props.height);
+  }
+  protected resolveTitle() {
+    return frameTitleFromProps(this.controller.props.accessibility, 'My frame');
+  }
+  protected connectFrame(frame: HTMLIFrameElement, sandboxOrigin: string) {
+    const bridge = new MyBridge({
+      frame,
+      sandboxOrigin,
+      host: new ComponentContextFrameHost(this.context),
+    });
+    bridge.start();
+    return () => bridge.dispose();
+  }
+}
+```
+
+`ComponentContextFrameHost` is the `FrameHost` over a universal component's `ComponentContext`:
+data paths go through the component's data context, functions through the surface catalog, and
+actions are dispatched as events of the component. Bridges that do not apply resize requests
+themselves can call the protected `requestFrameSize(width, height)` of the base class.
+
 ## Development
 
 The package lives in the [A2UI monorepo](https://github.com/a2ui-project/a2ui) under
diff --git a/typescript/catalogs/iframe/karma.conf.cjs b/typescript/catalogs/iframe/karma.conf.cjs
index 9cc0ca9d55..d1ca9a4c59 100644
--- a/typescript/catalogs/iframe/karma.conf.cjs
+++ b/typescript/catalogs/iframe/karma.conf.cjs
@@ -21,17 +21,21 @@ module.exports = function (config) {
     plugins: [require('karma-jasmine'), require('karma-chrome-launcher'), require('karma-esbuild')],
     files: [
       {pattern: 'src/**/*.test.ts', watched: true},
-      // The real sandbox proxy, built into dist/sandbox/ by `build-sandbox`. It is served, not
-      // included in the test bundle.
+      {pattern: 'tests/**/*.test.ts', watched: true},
+      // The real sandbox proxy, built into dist/sandbox/ by `build-sandbox`, and the fixture
+      // pages of the real-frame scenarios. Both are served, not included in the test bundle.
       {pattern: 'dist/sandbox/**', included: false, served: true, watched: false},
+      {pattern: 'tests/fixtures/**', included: false, served: true, watched: false},
     ],
-    // Serves the proxy at its default path, so the tests load it the way a host application
-    // would.
+    // Serves the proxy at its default path and the fixtures next to it, so the tests load them
+    // the way a host application would.
     proxies: {
       '/a2ui-sandbox/': '/base/dist/sandbox/',
+      '/a2ui-fixtures/': '/base/tests/fixtures/',
     },
     preprocessors: {
       'src/**/*.test.ts': ['esbuild'],
+      'tests/**/*.test.ts': ['esbuild'],
     },
     esbuild: {
       tsconfig: './tsconfig.test.json',
diff --git a/typescript/catalogs/iframe/package.json b/typescript/catalogs/iframe/package.json
index a2baf3b850..562087baba 100644
--- a/typescript/catalogs/iframe/package.json
+++ b/typescript/catalogs/iframe/package.json
@@ -118,6 +118,8 @@
       "files": [
         "src/**/*.ts",
         "src/**/*.json",
+        "tests/**",
+        "../../../catalogs/iframe/examples/*.json",
         "tsconfig.json",
         "tsconfig.test.json"
       ],
@@ -132,6 +134,8 @@
       "files": [
         "src/**/*.ts",
         "src/**/*.json",
+        "tests/**",
+        "../../../catalogs/iframe/examples/*.json",
         "karma.conf.cjs",
         "tsconfig.test.json"
       ],
@@ -147,6 +151,7 @@
       "files": [
         "src/**/*.ts",
         "src/**/*.json",
+        "tests/**",
         "scripts/**",
         "*.mjs",
         "*.cjs",
diff --git a/typescript/catalogs/iframe/src/catalog.test.ts b/typescript/catalogs/iframe/src/catalog.test.ts
index 245311018c..5633b4fcfe 100644
--- a/typescript/catalogs/iframe/src/catalog.test.ts
+++ b/typescript/catalogs/iframe/src/catalog.test.ts
@@ -14,15 +14,73 @@
  * limitations under the License.
  */
 
+import {
+  basicCatalog,
+  isWebComponentImplementation,
+  MessageProcessor,
+  type WebComponentImplementation,
+} from '@a2ui/web_core/v1_0';
 import catalogJson from './catalog.json' with {type: 'json'};
-import {IFRAME_CATALOG_ID} from './catalog.js';
+import {IFRAME_CATALOG_ID, iframeCatalog} from './catalog.js';
+import {A2uiWebAppFrameSrcdoc} from './components/web_app_frame_srcdoc.js';
+import {A2uiWebAppFrameUrl} from './components/web_app_frame_url.js';
+import {parseExampleMessages} from './testing/frame_test_support.js';
 
-describe('IFRAME_CATALOG_ID', () => {
-  it('is the $id of the bundled catalog schema', () => {
-    expect(IFRAME_CATALOG_ID).toBe(catalogJson['$id']);
+describe('iframeCatalog', () => {
+  it('is identified by the $id of the catalog schema', () => {
+    expect(iframeCatalog.id).toBe(IFRAME_CATALOG_ID);
+    expect(iframeCatalog.id).toBe(catalogJson['$id']);
   });
 
-  it('names the catalog of the two frame components', () => {
-    expect(Object.keys(catalogJson['components'])).toEqual(['WebAppFrameUrl', 'WebAppFrameSrcdoc']);
+  it('implements every component of the catalog schema, and nothing else', () => {
+    expect([...iframeCatalog.components.keys()]).toEqual(Object.keys(catalogJson['components']));
+    expect(iframeCatalog.components.get('WebAppFrameUrl')).toBe(A2uiWebAppFrameUrl);
+    expect(iframeCatalog.components.get('WebAppFrameSrcdoc')).toBe(A2uiWebAppFrameSrcdoc);
+    expect(iframeCatalog.functions.size).toBe(0);
+  });
+
+  it('registers universal components with a2ui- prefixed tag names', () => {
+    for (const component of iframeCatalog.components.values()) {
+      expect(isWebComponentImplementation(component)).withContext(component.name).toBeTrue();
+      expect(component.tagName)
+        .withContext(component.name)
+        .toMatch(/^a2ui-[a-z-]+$/);
+    }
+  });
+
+  it('renders a frame that names the iframe catalog on a basic catalog surface', () => {
+    const processor = new MessageProcessor<WebComponentImplementation>([
+      basicCatalog,
+      iframeCatalog,
+    ]);
+
+    processor.processMessages(
+      parseExampleMessages({
+        messages: [
+          {version: 'v1.0', createSurface: {surfaceId: 'frames', catalogId: basicCatalog.id}},
+          {
+            version: 'v1.0',
+            updateComponents: {
+              surfaceId: 'frames',
+              components: [
+                {
+                  id: 'app',
+                  component: 'WebAppFrameSrcdoc',
+                  catalogId: IFRAME_CATALOG_ID,
+                  htmlContent: '<p>App</p>',
+                },
+              ],
+            },
+          },
+        ],
+      }),
+    );
+
+    const surface = processor.model.getSurface('frames')!;
+    expect(surface.defaultCatalog).toBe(basicCatalog);
+    const frame = surface.componentsModel.get('app')!;
+    expect(frame.type).toBe('WebAppFrameSrcdoc');
+    expect(frame.catalog).toBe(iframeCatalog);
+    surface.dispose();
   });
 });
diff --git a/typescript/catalogs/iframe/src/catalog.ts b/typescript/catalogs/iframe/src/catalog.ts
index 7121fcb1b2..67ad028df3 100644
--- a/typescript/catalogs/iframe/src/catalog.ts
+++ b/typescript/catalogs/iframe/src/catalog.ts
@@ -14,5 +14,20 @@
  * limitations under the License.
  */
 
+import {Catalog, type WebComponentImplementation} from '@a2ui/web_core/v1_0';
+import {A2uiWebAppFrameSrcdoc} from './components/web_app_frame_srcdoc.js';
+import {A2uiWebAppFrameUrl} from './components/web_app_frame_url.js';
+
 /** `$id` of the iframe catalog schema (`catalogs/iframe/catalog.json`). */
 export const IFRAME_CATALOG_ID = 'https://a2ui.org/specification/v1_0/catalogs/iframe/catalog.json';
+
+/**
+ * The iframe catalog: `WebAppFrameUrl` and `WebAppFrameSrcdoc`, ready to hand to a
+ * `MessageProcessor`. A surface that mixes them with other components needs one catalog holding
+ * every component it uses; build it with `new Catalog(id, '1.0', [...])` from this catalog's
+ * `components` and the others'.
+ */
+export const iframeCatalog = new Catalog<WebComponentImplementation>(IFRAME_CATALOG_ID, '1.0', [
+  A2uiWebAppFrameUrl,
+  A2uiWebAppFrameSrcdoc,
+]);
diff --git a/typescript/catalogs/iframe/src/components/srcdoc_content.test.ts b/typescript/catalogs/iframe/src/components/srcdoc_content.test.ts
new file mode 100644
index 0000000000..ee1d6129bf
--- /dev/null
+++ b/typescript/catalogs/iframe/src/components/srcdoc_content.test.ts
@@ -0,0 +1,160 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  decodeHtmlContent,
+  injectContentSecurityPolicy,
+  prepareSrcdocContent,
+  SRCDOC_CONTENT_SECURITY_POLICY,
+} from './srcdoc_content.js';
+
+/** Parses the secured markup the way the inner frame will, to check where things ended up. */
+function parse(html: string): Document {
+  return new DOMParser().parseFromString(html, 'text/html');
+}
+
+function cspContents(doc: Document): string[] {
+  return Array.from(doc.querySelectorAll('meta[http-equiv="Content-Security-Policy"]')).map(
+    meta => meta.getAttribute('content') ?? '',
+  );
+}
+
+describe('injectContentSecurityPolicy', () => {
+  it('adds the strict policy and the link interceptor to an existing head', () => {
+    const secured = injectContentSecurityPolicy(
+      '<html><head><title>App</title></head><body>Content</body></html>',
+    );
+
+    expect(secured).toMatch(/<head>\s*<meta http-equiv="Content-Security-Policy"/);
+    const doc = parse(secured);
+    expect(cspContents(doc)).toEqual([SRCDOC_CONTENT_SECURITY_POLICY]);
+    expect(doc.head.querySelector('script')?.textContent).toContain("closest('a')");
+    expect(doc.title).toBe('App');
+    expect(doc.body.textContent).toBe('Content');
+  });
+
+  it('confines the document: no network, forms, base URL, plugins or nested frames', () => {
+    for (const directive of [
+      "connect-src 'none'",
+      "form-action 'none'",
+      "base-uri 'none'",
+      "object-src 'none'",
+      "frame-src 'none'",
+      "default-src 'self' 'unsafe-inline' 'unsafe-eval' data:",
+    ]) {
+      expect(SRCDOC_CONTENT_SECURITY_POLICY).toContain(directive);
+    }
+  });
+
+  it('creates a head inside html when the markup has none', () => {
+    const secured = injectContentSecurityPolicy('<html><body><h1>No Head</h1></body></html>');
+
+    expect(secured).toMatch(/<html>\s*<head>\s*<meta http-equiv="Content-Security-Policy"/);
+    const doc = parse(secured);
+    expect(cspContents(doc)).toEqual([SRCDOC_CONTENT_SECURITY_POLICY]);
+    expect(doc.body.querySelector('h1')?.textContent).toBe('No Head');
+  });
+
+  it('wraps a bare fragment in a full document', () => {
+    const secured = injectContentSecurityPolicy('<button id="btn">Click me</button>');
+
+    expect(secured).toMatch(/^<html>\s*<head>\s*<meta http-equiv="Content-Security-Policy"/);
+    const doc = parse(secured);
+    expect(cspContents(doc)).toEqual([SRCDOC_CONTENT_SECURITY_POLICY]);
+    expect(doc.querySelector('#btn')?.textContent).toBe('Click me');
+  });
+
+  it('keeps author CSP meta tags after the injected one; they can only narrow it', () => {
+    const secured = injectContentSecurityPolicy(
+      '<html><head><meta http-equiv="Content-Security-Policy" content="connect-src *;">' +
+        '<meta charset="utf-8"><title>Test</title></head><body></body></html>',
+    );
+
+    const doc = parse(secured);
+    expect(cspContents(doc)).toEqual([SRCDOC_CONTENT_SECURITY_POLICY, 'connect-src *;']);
+    expect(doc.querySelector('meta[charset]')).not.toBeNull();
+  });
+
+  it('keeps the doctype of a full document, after a leading comment, and without <html>', () => {
+    for (const html of [
+      '<!DOCTYPE html><html><head></head><body>x</body></html>',
+      '<!-- generated --><!DOCTYPE html><html><head></head><body>x</body></html>',
+      '<!DOCTYPE html><p>x</p>',
+    ]) {
+      const secured = injectContentSecurityPolicy(html);
+      expect(secured.startsWith('<!DOCTYPE html>')).withContext(html).toBeTrue();
+      expect(cspContents(parse(secured)))
+        .withContext(html)
+        .toEqual([SRCDOC_CONTENT_SECURITY_POLICY]);
+    }
+  });
+
+  it('does not XML-escape < or & inside inline scripts and styles', () => {
+    // `XMLSerializer` would turn these into `&lt;` / `&amp;`, which `srcdoc` parses as HTML
+    // and hands to the script and style engines as broken JS and CSS.
+    const secured = injectContentSecurityPolicy(
+      '<style>.a > .b { color: red; }</style><script>if (a < b && c > d) {}</script>',
+    );
+    expect(secured).toContain('.a > .b { color: red; }');
+    expect(secured).toContain('if (a < b && c > d) {}');
+  });
+
+  it('keeps body attributes of a document without an <html> tag', () => {
+    const secured = injectContentSecurityPolicy(
+      '<body class="dark" style="margin: 0"><p>x</p></body>',
+    );
+    const body = parse(secured).body;
+    expect(body.className).toBe('dark');
+    expect(body.getAttribute('style')).toBe('margin: 0');
+  });
+
+  it('does not inject into an attribute value that contains <head>', () => {
+    const secured = injectContentSecurityPolicy('<div data-title="<head>">Hello</div>');
+
+    const doc = parse(secured);
+    expect(doc.querySelector('div')?.getAttribute('data-title')).toBe('<head>');
+    expect(cspContents(doc)).toEqual([SRCDOC_CONTENT_SECURITY_POLICY]);
+  });
+});
+
+describe('decodeHtmlContent', () => {
+  it('decodes the url_encoded transport form and leaves other values alone', () => {
+    const raw = '<div><span>Encoded Component</span></div>';
+
+    expect(decodeHtmlContent(`url_encoded:${encodeURIComponent(raw)}`)).toBe(raw);
+    expect(decodeHtmlContent(raw)).toBe(raw);
+  });
+
+  it('returns an empty string on malformed percent-encoding without throwing', () => {
+    expect(decodeHtmlContent('url_encoded:%E0%A4%A')).toBe('');
+  });
+});
+
+describe('prepareSrcdocContent', () => {
+  it('decodes and secures the content', () => {
+    const raw = '<html><head></head><body><span>Encoded Component</span></body></html>';
+
+    const prepared = prepareSrcdocContent(`url_encoded:${encodeURIComponent(raw)}`);
+
+    expect(prepared).toContain('<span>Encoded Component</span>');
+    expect(prepared).toContain("connect-src 'none'");
+  });
+
+  it('returns null for empty content', () => {
+    expect(prepareSrcdocContent('')).toBeNull();
+    expect(prepareSrcdocContent('url_encoded:')).toBeNull();
+  });
+});
diff --git a/typescript/catalogs/iframe/src/components/srcdoc_content.ts b/typescript/catalogs/iframe/src/components/srcdoc_content.ts
new file mode 100644
index 0000000000..45ac5f37b5
--- /dev/null
+++ b/typescript/catalogs/iframe/src/components/srcdoc_content.ts
@@ -0,0 +1,121 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Preparation of the inline HTML a `WebAppFrameSrcdoc` component renders: decoding of the
+ * `url_encoded:` transport form and injection of the Content Security Policy the WebApp iframe
+ * component specification requires for untrusted markup.
+ */
+
+/** Prefix of an `htmlContent` value that was `encodeURIComponent`-encoded for transport. */
+export const URL_ENCODED_PREFIX = 'url_encoded:';
+
+/**
+ * Policy injected into every inline document. It confines the document to itself: no network
+ * (`connect-src 'none'`), no form submission (`form-action 'none'`), no base URL hijacking
+ * (`base-uri 'none'`), no plugins or nested frames (`object-src`, `frame-src`); scripts and styles
+ * may be inline or `data:` URIs, which model-generated applications need.
+ */
+export const SRCDOC_CONTENT_SECURITY_POLICY =
+  "default-src 'self' 'unsafe-inline' 'unsafe-eval' data:; connect-src 'none'; form-action 'none'; base-uri 'none'; object-src 'none'; frame-src 'none';";
+
+/**
+ * Capture-phase click handler that keeps hyperlinks from navigating the inner frame, which CSP
+ * does not govern and which would otherwise let markup exfiltrate data in a URL. The click is
+ * reported as an `open_url` action on the port the host transfers with `a2ui_app_frame_init`, the
+ * only channel the host accepts actions on, so a host that authorizes that action can open the
+ * link itself. The script only sends on the port, so the application still receives every message.
+ * Before the handshake, a click is cancelled and not reported. The script runs in its own scope, so
+ * it cannot collide with the names the author's scripts declare.
+ */
+const LINK_INTERCEPTOR_SCRIPT = `<script>
+    (() => {
+      let a2uiPort = null;
+      window.addEventListener('message', (e) => {
+        if (e.data && e.data.type === 'a2ui_app_frame_init' && e.ports && e.ports[0]) {
+          a2uiPort = e.ports[0];
+        }
+      });
+      document.addEventListener('click', (e) => {
+        const anchor = e.target.closest('a');
+        if (anchor && anchor.href) {
+          const href = anchor.getAttribute('href');
+          if (href && !href.startsWith('#') && !href.startsWith('javascript:')) {
+            e.preventDefault();
+            e.stopPropagation();
+            if (a2uiPort) {
+              a2uiPort.postMessage({
+                type: 'a2ui_action',
+                action: 'open_url',
+                data: { url: anchor.href }
+              });
+            }
+          }
+        }
+      }, true);
+    })();
+    </script>`;
+
+/** Decodes the `url_encoded:` transport form; other values are returned unchanged. */
+export function decodeHtmlContent(htmlContent: string): string {
+  if (htmlContent.startsWith(URL_ENCODED_PREFIX)) {
+    try {
+      return decodeURIComponent(htmlContent.substring(URL_ENCODED_PREFIX.length));
+    } catch (error) {
+      console.warn('Failed to decode URL-encoded HTML content:', error);
+      return '';
+    }
+  }
+  return htmlContent;
+}
+
+/**
+ * Returns the markup with {@link SRCDOC_CONTENT_SECURITY_POLICY} and the link interceptor in its
+ * `<head>`. The document is parsed with `DOMParser`, so a missing `<html>`, `<head>` or `<body>` is
+ * created. Author-supplied CSP meta tags are kept: a document enforces every policy it receives,
+ * so the author's policy can only narrow this one, never widen it. The result is serialized as a
+ * full document, keeping the author's doctype when there is one.
+ */
+export function injectContentSecurityPolicy(html: string): string {
+  const doc = new DOMParser().parseFromString(html, 'text/html');
+  const cspMeta = doc.createElement('meta');
+  cspMeta.setAttribute('http-equiv', 'Content-Security-Policy');
+  cspMeta.setAttribute('content', SRCDOC_CONTENT_SECURITY_POLICY);
+
+  const tempDiv = doc.createElement('div');
+  tempDiv.innerHTML = LINK_INTERCEPTOR_SCRIPT;
+  const script = tempDiv.querySelector('script');
+  if (script) {
+    doc.head.insertBefore(script, doc.head.firstChild);
+  }
+  doc.head.insertBefore(cspMeta, doc.head.firstChild);
+
+  // `srcdoc` is always parsed as a full document, so the result is serialized as one. The doctype
+  // is kept when the author wrote one (no doctype means quirks mode, as the author asked).
+  // `XMLSerializer` is not used because its XML output escapes `<` and `&` inside inline scripts
+  // and styles.
+  const doctype = doc.doctype ? `<!DOCTYPE ${doc.doctype.name}>\n` : '';
+  return `${doctype}${doc.documentElement.outerHTML}`;
+}
+
+/**
+ * The document the proxy loads for an `htmlContent` value: decoded and secured. Returns null for
+ * an empty value, which loads nothing.
+ */
+export function prepareSrcdocContent(htmlContent: string): string | null {
+  const decoded = decodeHtmlContent(htmlContent);
+  return decoded === '' ? null : injectContentSecurityPolicy(decoded);
+}
diff --git a/typescript/catalogs/iframe/src/components/web_app_frame_common.ts b/typescript/catalogs/iframe/src/components/web_app_frame_common.ts
new file mode 100644
index 0000000000..c0a383ea66
--- /dev/null
+++ b/typescript/catalogs/iframe/src/components/web_app_frame_common.ts
@@ -0,0 +1,73 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/** What `WebAppFrameUrl` and `WebAppFrameSrcdoc` share: their common schema and bridge wiring. */
+
+import {
+  AccessibilityAttributesSchema,
+  DynamicNumberSchema,
+  type ComponentContext,
+} from '@a2ui/web_core/v1_0';
+import {WebAppFrameBasePropsSchema, type WebAppFrameBaseProps} from '../bridge/messages.js';
+import {WebAppFrameBridge, type WebAppFrameBridgeProps} from '../bridge/web_app_frame_bridge.js';
+import {ComponentContextFrameHost} from '../shared/sandbox/component_context_frame_host.js';
+
+/**
+ * Properties both frame components declare: the bridge properties of the catalog's
+ * `WebAppFrameCommon`, its `height`, and the `accessibility` attributes every component accepts.
+ */
+export const WebAppFrameCommonPropsSchema = WebAppFrameBasePropsSchema.extend({
+  'accessibility': AccessibilityAttributesSchema.optional(),
+  'height': DynamicNumberSchema.optional().describe('The height of the iframe in pixels.'),
+});
+
+/** Maps the component properties to what the bridge reads; `data.paths` becomes `dataPaths`. */
+export function toBridgeProps(props: WebAppFrameBaseProps): WebAppFrameBridgeProps {
+  return {
+    config: props.config,
+    dataPaths: props.data?.paths,
+    allowedEvents: props.allowedEvents,
+    allowedFunctions: props.allowedFunctions,
+    mutableData: props.mutableData,
+    disableSchemaValidation: props.disableSchemaValidation,
+  };
+}
+
+/** Inputs of {@link connectWebAppFrameBridge}. */
+export interface ConnectWebAppFrameBridgeOptions {
+  /** The frame that loads the sandbox proxy. */
+  readonly frame: HTMLIFrameElement;
+  /** Origin of the sandbox proxy. */
+  readonly sandboxOrigin: string;
+  /** Context of the component the frame belongs to; it becomes the bridge's `FrameHost`. */
+  readonly context: ComponentContext;
+  /** Returns the component's current properties, in bridge form. */
+  readonly getProps: () => WebAppFrameBridgeProps;
+}
+
+/** Starts a {@link WebAppFrameBridge} for a frame component; returns the function that disposes it. */
+export function connectWebAppFrameBridge(options: ConnectWebAppFrameBridgeOptions): () => void {
+  const bridge = new WebAppFrameBridge({
+    frame: options.frame,
+    host: new ComponentContextFrameHost(options.context),
+    sandboxOrigin: options.sandboxOrigin,
+    getProps: options.getProps,
+  });
+  bridge.start();
+  return () => {
+    bridge.dispose();
+  };
+}
diff --git a/typescript/catalogs/iframe/src/components/web_app_frame_srcdoc.test.ts b/typescript/catalogs/iframe/src/components/web_app_frame_srcdoc.test.ts
new file mode 100644
index 0000000000..9d3b003909
--- /dev/null
+++ b/typescript/catalogs/iframe/src/components/web_app_frame_srcdoc.test.ts
@@ -0,0 +1,270 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * These tests point the sandbox at an inert same-origin page and play the proxy and the
+ * application themselves, over the real port the component transfers. The scenarios under
+ * `tests/` exercise the real proxy and a real application.
+ */
+
+import {IFRAME_CATALOG_ID} from '../catalog.js';
+import {DEFAULT_INNER_SANDBOX} from '../shared/sandbox/sandbox.js';
+import {
+  configureSandbox,
+  resetSandboxConfig,
+  resolveSandboxUrl,
+} from '../shared/sandbox/sandbox_config.js';
+import {
+  catalogPropertyNames,
+  FrameTestHarness,
+  openFrameInbox,
+  parseExampleMessages,
+  postFromFrame,
+  settle,
+  waitFor,
+  type FrameInbox,
+} from '../testing/frame_test_support.js';
+import {SRCDOC_CONTENT_SECURITY_POLICY} from './srcdoc_content.js';
+import {A2uiWebAppFrameSrcdoc, WebAppFrameSrcdocApi} from './web_app_frame_srcdoc.js';
+
+const SURFACE_ID = 'shared-counter';
+const COMPONENT_ID = 'counter_app';
+
+/** A counter shared with the data model. The tests play the app, so its markup never runs. */
+const COUNTER_APP = {
+  id: COMPONENT_ID,
+  component: 'WebAppFrameSrcdoc',
+  catalogId: IFRAME_CATALOG_ID,
+  height: 160,
+  data: {paths: {count: '/counter/count', label: '/counter/label'}},
+  mutableData: {count: {type: 'integer', minimum: 0}},
+  allowedEvents: {
+    counter_saved: {
+      type: 'object',
+      properties: {count: {type: 'integer'}},
+      required: ['count'],
+      additionalProperties: false,
+    },
+  },
+  htmlContent:
+    '<!doctype html><html><head><style>body { margin: 16px; }</style></head>' +
+    '<body><button id="add" disabled>Add one</button></body></html>',
+};
+
+const MESSAGES = [
+  {version: 'v1.0', createSurface: {surfaceId: SURFACE_ID, catalogId: IFRAME_CATALOG_ID}},
+  {
+    version: 'v1.0',
+    updateDataModel: {surfaceId: SURFACE_ID, value: {counter: {count: 0, label: 'clicks'}}},
+  },
+  {version: 'v1.0', updateComponents: {surfaceId: SURFACE_ID, components: [COUNTER_APP]}},
+];
+const CSP_META = `<meta http-equiv="Content-Security-Policy" content="${SRCDOC_CONTENT_SECURITY_POLICY}">`;
+
+describe('WebAppFrameSrcdoc', () => {
+  let harness: FrameTestHarness;
+  let inbox: FrameInbox | null;
+  let appPort: MessagePort | null;
+
+  async function renderExample() {
+    const element = await harness.renderComponent(COMPONENT_ID);
+    const frame = element.querySelector('iframe')!;
+    expect(frame).withContext('the frame is rendered').not.toBeNull();
+    inbox = await openFrameInbox(frame, resolveSandboxUrl('html').href);
+    return {element, frame, inbox};
+  }
+
+  /** Plays the application's ready signal and returns its end of the transferred port. */
+  async function connectApp(frame: HTMLIFrameElement, messages: FrameInbox) {
+    postFromFrame(frame, {type: 'a2ui_app_frame_ready'});
+    const init = await messages.next('a2ui_app_frame_init');
+    appPort = init.ports[0];
+    const received: unknown[] = [];
+    appPort.onmessage = event => {
+      received.push(event.data);
+    };
+    return {init, port: appPort, received};
+  }
+
+  beforeEach(() => {
+    configureSandbox({baseUrl: '/a2ui-fixtures/inert/'});
+    harness = new FrameTestHarness(SURFACE_ID, parseExampleMessages({messages: MESSAGES}));
+    inbox = null;
+    appPort = null;
+  });
+
+  afterEach(() => {
+    appPort?.close();
+    inbox?.dispose();
+    harness.dispose();
+    resetSandboxConfig();
+  });
+
+  it('declares exactly the properties of the catalog schema', () => {
+    expect(Object.keys(WebAppFrameSrcdocApi.schema.shape).sort()).toEqual(
+      catalogPropertyNames('WebAppFrameSrcdoc'),
+    );
+    expect(A2uiWebAppFrameSrcdoc.name).toBe('WebAppFrameSrcdoc');
+    expect(A2uiWebAppFrameSrcdoc.tagName).toBe('a2ui-web-app-frame-srcdoc');
+  });
+
+  it('renders the HTML-mode proxy frame with the height of the component', async () => {
+    const {element, frame} = await renderExample();
+
+    expect(element.tagName.toLowerCase()).toBe('a2ui-web-app-frame-srcdoc');
+    expect(element.shadowRoot).toBeNull();
+    expect(frame.src).toBe(resolveSandboxUrl('html').href);
+    expect(frame.hasAttribute('sandbox')).toBeFalse();
+    expect(frame.title).toBe('Embedded web application');
+    expect(element.style.height).toBe('160px');
+  });
+
+  it('uses the accessibility label as the frame title', async () => {
+    const {element, frame} = await renderExample();
+
+    harness.updateComponent({...COUNTER_APP, accessibility: {label: 'Shared counter'}});
+    await element.updateComplete;
+
+    expect(frame.title).toBe('Shared counter');
+  });
+
+  it('answers the proxy with the markup, secured, and the strict sandbox flags', async () => {
+    const {frame, inbox: messages} = await renderExample();
+
+    postFromFrame(frame, {type: 'a2ui_sandbox_proxy_ready'});
+
+    const ready = await messages.next('a2ui_sandbox_resource_ready');
+    const html: string = ready.data.html;
+    expect(html).toContain(CSP_META);
+    expect(html.indexOf(CSP_META)).toBeLessThan(html.indexOf('<style>'));
+    expect(html).toContain('<button id="add" disabled="">Add one</button>');
+    expect(ready.data.htmlContent).toBe(html);
+    expect(ready.data.sandbox).toBe(DEFAULT_INNER_SANDBOX);
+    expect(ready.data.sandbox).not.toContain('allow-same-origin');
+    expect(ready.data.url).toBeUndefined();
+  });
+
+  it('decodes url_encoded content and reloads when the content changes', async () => {
+    const {element, frame, inbox: messages} = await renderExample();
+    postFromFrame(frame, {type: 'a2ui_sandbox_proxy_ready'});
+    await messages.next('a2ui_sandbox_resource_ready');
+
+    harness.updateComponent({
+      ...COUNTER_APP,
+      htmlContent: `url_encoded:${encodeURIComponent('<p>Ünïcödé & <b>bold</b></p>')}`,
+    });
+    await element.updateComplete;
+
+    const ready = await messages.next('a2ui_sandbox_resource_ready', 1);
+    expect(ready.data.html).toContain('<p>Ünïcödé &amp; <b>bold</b></p>');
+    expect(ready.data.html).toContain(CSP_META);
+    expect(element.querySelector('iframe')).toBe(frame);
+  });
+
+  it('loads nothing for empty content', async () => {
+    const {element, frame, inbox: messages} = await renderExample();
+    postFromFrame(frame, {type: 'a2ui_sandbox_proxy_ready'});
+    await messages.next('a2ui_sandbox_resource_ready');
+
+    harness.updateComponent({...COUNTER_APP, htmlContent: ''});
+    await element.updateComplete;
+    await settle();
+
+    expect(messages.ofType('a2ui_sandbox_resource_ready').length).toBe(1);
+  });
+
+  it('hands the app the bound data and the allowlists of the component', async () => {
+    const {frame, inbox: messages} = await renderExample();
+
+    const {init} = await connectApp(frame, messages);
+
+    expect(init.data.value).toEqual({
+      config: {},
+      initialData: {count: 0, label: 'clicks'},
+      allowedEvents: {counter_saved: jasmine.any(Object)},
+      allowedFunctions: {},
+      mutableDataKeys: ['count'],
+      hostContext: {containerDimensions: {width: jasmine.any(Number), height: jasmine.any(Number)}},
+    });
+  });
+
+  it('writes the app data changes that mutableData allows into the surface data model', async () => {
+    const {frame, inbox: messages} = await renderExample();
+    const {port} = await connectApp(frame, messages);
+
+    port.postMessage({type: 'a2ui_data_model_change', key: 'count', value: 3});
+    await waitFor(() => harness.surface.dataModel.get('/counter/count') === 3, 'count written');
+
+    port.postMessage({type: 'a2ui_data_model_change', key: 'label', value: 'taps'});
+    port.postMessage({type: 'a2ui_data_model_change', key: 'count', value: -1});
+    await settle();
+
+    expect(harness.surface.dataModel.get('/counter/label')).toBe('clicks');
+    expect(harness.surface.dataModel.get('/counter/count')).toBe(3);
+  });
+
+  it('pushes surface data changes to the app', async () => {
+    const {frame, inbox: messages} = await renderExample();
+    const {received} = await connectApp(frame, messages);
+
+    harness.setData('/counter/count', 7);
+    await waitFor(
+      () => received.some(message => JSON.stringify(message).includes('"count"')),
+      'update received',
+    );
+
+    expect(received).toContain({type: 'a2ui_data_model_update', key: 'count', value: 7});
+  });
+
+  it('forwards the actions that allowedEvents lists, from the component, and drops the rest', async () => {
+    const {frame, inbox: messages} = await renderExample();
+    const {port} = await connectApp(frame, messages);
+
+    port.postMessage({type: 'a2ui_action', action: 'not_declared', data: {count: 1}});
+    port.postMessage({type: 'a2ui_action', action: 'counter_saved', data: {count: 'one'}});
+    port.postMessage({type: 'a2ui_action', action: 'counter_saved', data: {count: 4}});
+
+    const action = await harness.nextAction('counter_saved');
+    expect(action.context).toEqual({count: 4});
+    expect(action.sourceComponentId).toBe(COMPONENT_ID);
+    expect(action.surfaceId).toBe(SURFACE_ID);
+    await settle();
+    expect(harness.actions.length).toBe(1);
+  });
+
+  it('only accepts protocol messages on the port, not on the window', async () => {
+    const {frame, inbox: messages} = await renderExample();
+    await connectApp(frame, messages);
+
+    postFromFrame(frame, {type: 'a2ui_action', action: 'counter_saved', data: {count: 4}});
+    postFromFrame(frame, {type: 'a2ui_data_model_change', key: 'count', value: 9});
+    await settle();
+
+    expect(harness.actions.length).toBe(0);
+    expect(harness.surface.dataModel.get('/counter/count')).toBe(0);
+  });
+
+  it('closes the channel when the element is removed', async () => {
+    const {frame, inbox: messages} = await renderExample();
+    const {port} = await connectApp(frame, messages);
+
+    harness.clear();
+    port.postMessage({type: 'a2ui_data_model_change', key: 'count', value: 3});
+    await settle();
+
+    expect(harness.surface.dataModel.get('/counter/count')).toBe(0);
+  });
+});
diff --git a/typescript/catalogs/iframe/src/components/web_app_frame_srcdoc.ts b/typescript/catalogs/iframe/src/components/web_app_frame_srcdoc.ts
new file mode 100644
index 0000000000..172a6fdfd6
--- /dev/null
+++ b/typescript/catalogs/iframe/src/components/web_app_frame_srcdoc.ts
@@ -0,0 +1,87 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type {ComponentApi, WebComponentImplementation} from '@a2ui/web_core/v1_0';
+import {z} from 'zod';
+import {DEFAULT_INNER_SANDBOX} from '../shared/sandbox/sandbox.js';
+import type {SandboxProtocol, SandboxResource} from '../shared/sandbox/sandbox_bootstrap.js';
+import type {SandboxMode} from '../shared/sandbox/sandbox_config.js';
+import {
+  frameHeightFromProp,
+  frameTitleFromProps,
+  SandboxedFrameElement,
+} from '../shared/sandbox/sandboxed_frame_element.js';
+import {prepareSrcdocContent} from './srcdoc_content.js';
+import {
+  connectWebAppFrameBridge,
+  toBridgeProps,
+  WebAppFrameCommonPropsSchema,
+} from './web_app_frame_common.js';
+
+/** The `WebAppFrameSrcdoc` component of the iframe catalog: inline HTML in a frame. */
+export const WebAppFrameSrcdocApi = {
+  name: 'WebAppFrameSrcdoc',
+  schema: WebAppFrameCommonPropsSchema.extend({
+    'htmlContent': z
+      .string()
+      .describe(
+        'The raw HTML string to render via srcdoc. A value prefixed with `url_encoded:` is decoded with decodeURIComponent before rendering.',
+      ),
+  }).strict(),
+} satisfies ComponentApi;
+
+/** Properties of `WebAppFrameSrcdoc`, as declared in the catalog. */
+export type WebAppFrameSrcdocProps = z.infer<typeof WebAppFrameSrcdocApi.schema>;
+
+class WebAppFrameSrcdocElement extends SandboxedFrameElement<typeof WebAppFrameSrcdocApi> {
+  protected override readonly api = WebAppFrameSrcdocApi;
+  protected readonly sandboxMode: SandboxMode = 'html';
+  protected readonly sandboxProtocol: SandboxProtocol = 'a2ui';
+
+  protected resolveResource(): SandboxResource | null {
+    const {htmlContent} = this.controller.props;
+    if (typeof htmlContent !== 'string') {
+      return null;
+    }
+    const html = prepareSrcdocContent(htmlContent);
+    return html === null ? null : {html, sandbox: DEFAULT_INNER_SANDBOX};
+  }
+
+  protected resolveHeight(): number | undefined {
+    return frameHeightFromProp(this.controller.props.height);
+  }
+
+  protected resolveTitle(): string {
+    return frameTitleFromProps(this.controller.props.accessibility, 'Embedded web application');
+  }
+
+  protected connectFrame(frame: HTMLIFrameElement, sandboxOrigin: string): () => void {
+    return connectWebAppFrameBridge({
+      frame,
+      sandboxOrigin,
+      context: this.context,
+      getProps: () => toBridgeProps(this.controller.props),
+    });
+  }
+}
+
+/** Registration entry of `WebAppFrameSrcdoc` for a `Catalog`. */
+export const A2uiWebAppFrameSrcdoc: WebComponentImplementation<typeof WebAppFrameSrcdocApi.schema> =
+  {
+    ...WebAppFrameSrcdocApi,
+    tagName: 'a2ui-web-app-frame-srcdoc',
+    element: WebAppFrameSrcdocElement,
+  };
diff --git a/typescript/catalogs/iframe/src/components/web_app_frame_url.test.ts b/typescript/catalogs/iframe/src/components/web_app_frame_url.test.ts
new file mode 100644
index 0000000000..74eb7d7701
--- /dev/null
+++ b/typescript/catalogs/iframe/src/components/web_app_frame_url.test.ts
@@ -0,0 +1,264 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * These tests point the sandbox at an inert same-origin page and play the proxy and the
+ * application themselves, so the component's external URL is never loaded. The scenarios under
+ * `tests/` exercise the real proxy.
+ */
+
+import {IFRAME_CATALOG_ID} from '../catalog.js';
+import {DEFAULT_INNER_SANDBOX} from '../shared/sandbox/sandbox.js';
+import {
+  configureSandbox,
+  resetSandboxConfig,
+  resolveSandboxUrl,
+} from '../shared/sandbox/sandbox_config.js';
+import {
+  catalogPropertyNames,
+  FrameTestHarness,
+  openFrameInbox,
+  parseExampleMessages,
+  postFromFrame,
+  settle,
+  type FrameInbox,
+} from '../testing/frame_test_support.js';
+import {A2uiWebAppFrameUrl, resolveWebAppUrl, WebAppFrameUrlApi} from './web_app_frame_url.js';
+
+const SURFACE_ID = 'order-tracker';
+const COMPONENT_ID = 'order_tracker';
+const APP_URL = 'https://example.com/a2ui-apps/order-tracker/';
+
+const ORDER_TRACKER = {
+  id: COMPONENT_ID,
+  component: 'WebAppFrameUrl',
+  catalogId: IFRAME_CATALOG_ID,
+  url: APP_URL,
+  height: 400,
+  config: {theme: 'light', locale: 'en-US'},
+  data: {paths: {orders: '/orders'}},
+  allowedEvents: {
+    order_selected: {
+      type: 'object',
+      properties: {orderId: {type: 'string'}},
+      required: ['orderId'],
+      additionalProperties: false,
+    },
+  },
+};
+
+const MESSAGES = [
+  {version: 'v1.0', createSurface: {surfaceId: SURFACE_ID, catalogId: IFRAME_CATALOG_ID}},
+  {
+    version: 'v1.0',
+    updateDataModel: {
+      surfaceId: SURFACE_ID,
+      value: {
+        orders: [
+          {id: 'A-1001', status: 'shipped'},
+          {id: 'A-1002', status: 'processing'},
+        ],
+      },
+    },
+  },
+  {version: 'v1.0', updateComponents: {surfaceId: SURFACE_ID, components: [ORDER_TRACKER]}},
+];
+
+describe('resolveWebAppUrl', () => {
+  it('appends the host origin to http and https URLs and keeps their own query', () => {
+    expect(resolveWebAppUrl('https://apps.example/tracker/?tab=open', 'https://host.example')).toBe(
+      'https://apps.example/tracker/?tab=open&origin=https%3A%2F%2Fhost.example',
+    );
+    expect(resolveWebAppUrl('http://localhost:8080/app', 'https://host.example')).toBe(
+      'http://localhost:8080/app?origin=https%3A%2F%2Fhost.example',
+    );
+  });
+
+  it('defaults the origin to the page origin', () => {
+    expect(resolveWebAppUrl(APP_URL)).toBe(
+      `${APP_URL}?origin=${encodeURIComponent(window.location.origin)}`,
+    );
+  });
+
+  it('rejects other schemes, relative and malformed URLs, and non-strings', () => {
+    for (const rejected of [
+      'javascript:alert(1)',
+      'data:text/html,<script>alert(1)</script>',
+      'file:///etc/passwd',
+      'ftp://files.example/app',
+      '/relative/app',
+      'not a url',
+      '',
+      undefined,
+      42,
+    ]) {
+      expect(resolveWebAppUrl(rejected, 'https://host.example'))
+        .withContext(String(rejected))
+        .toBeNull();
+    }
+  });
+});
+
+describe('WebAppFrameUrl', () => {
+  let harness: FrameTestHarness;
+  let inbox: FrameInbox | null;
+
+  async function renderExample() {
+    const element = await harness.renderComponent(COMPONENT_ID);
+    const frame = element.querySelector('iframe')!;
+    expect(frame).withContext('the frame is rendered').not.toBeNull();
+    return {element, frame};
+  }
+
+  beforeEach(() => {
+    configureSandbox({baseUrl: '/a2ui-fixtures/inert/'});
+    harness = new FrameTestHarness(SURFACE_ID, parseExampleMessages({messages: MESSAGES}));
+    inbox = null;
+  });
+
+  afterEach(() => {
+    inbox?.dispose();
+    harness.dispose();
+    resetSandboxConfig();
+  });
+
+  it('declares exactly the properties of the catalog schema', () => {
+    expect(Object.keys(WebAppFrameUrlApi.schema.shape).sort()).toEqual(
+      catalogPropertyNames('WebAppFrameUrl'),
+    );
+    expect(A2uiWebAppFrameUrl.name).toBe('WebAppFrameUrl');
+    expect(A2uiWebAppFrameUrl.tagName).toBe('a2ui-web-app-frame-url');
+  });
+
+  it('renders the URL-mode proxy frame with the height of the component and a default title', async () => {
+    const {element, frame} = await renderExample();
+
+    expect(element.tagName.toLowerCase()).toBe('a2ui-web-app-frame-url');
+    expect(element.shadowRoot).toBeNull();
+    expect(frame.src).toBe(resolveSandboxUrl('url').href);
+    expect(frame.hasAttribute('sandbox')).toBeFalse();
+    expect(frame.title).toBe('Embedded web application');
+    expect(element.style.height).toBe('400px');
+  });
+
+  it('answers the proxy with the URL, the host origin appended, and the strict sandbox flags', async () => {
+    const {frame} = await renderExample();
+    inbox = await openFrameInbox(frame, resolveSandboxUrl('url').href);
+
+    postFromFrame(frame, {type: 'a2ui_sandbox_proxy_ready'});
+
+    const ready = await inbox.next('a2ui_sandbox_resource_ready');
+    expect(ready.data).toEqual({
+      type: 'a2ui_sandbox_resource_ready',
+      url: `${APP_URL}?origin=${encodeURIComponent(window.location.origin)}`,
+      sandbox: DEFAULT_INNER_SANDBOX,
+    });
+    expect(ready.data.sandbox).not.toContain('allow-same-origin');
+  });
+
+  it('answers the app with its configuration and data on a transferred port', async () => {
+    const {frame} = await renderExample();
+    inbox = await openFrameInbox(frame, resolveSandboxUrl('url').href);
+
+    postFromFrame(frame, {type: 'a2ui_app_frame_ready'});
+
+    const init = await inbox.next('a2ui_app_frame_init');
+    expect(init.ports.length).toBe(1);
+    expect(init.data.value).toEqual({
+      config: {theme: 'light', locale: 'en-US'},
+      initialData: {
+        orders: [
+          {id: 'A-1001', status: 'shipped'},
+          {id: 'A-1002', status: 'processing'},
+        ],
+      },
+      allowedEvents: {order_selected: jasmine.any(Object)},
+      allowedFunctions: {},
+      mutableDataKeys: [],
+      hostContext: {containerDimensions: {width: jasmine.any(Number), height: jasmine.any(Number)}},
+    });
+    init.ports[0].close();
+  });
+
+  it('ignores handshake messages from other origins or other windows', async () => {
+    const {frame} = await renderExample();
+    inbox = await openFrameInbox(frame, resolveSandboxUrl('url').href);
+
+    postFromFrame(frame, {type: 'a2ui_sandbox_proxy_ready'}, 'https://evil.example');
+    postFromFrame(frame, {type: 'a2ui_app_frame_ready'}, 'https://evil.example');
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        data: {type: 'a2ui_app_frame_ready'},
+        origin: window.location.origin,
+        source: window,
+      }),
+    );
+    await settle();
+
+    expect(inbox.messages.length).toBe(0);
+  });
+
+  it('loads the new URL when the property changes', async () => {
+    const {element, frame} = await renderExample();
+    inbox = await openFrameInbox(frame, resolveSandboxUrl('url').href);
+    postFromFrame(frame, {type: 'a2ui_sandbox_proxy_ready'});
+    await inbox.next('a2ui_sandbox_resource_ready');
+
+    harness.updateComponent({...ORDER_TRACKER, url: 'https://apps.example/other-app/'});
+    await element.updateComplete;
+
+    const ready = await inbox.next('a2ui_sandbox_resource_ready', 1);
+    expect(ready.data.url).toBe(
+      `https://apps.example/other-app/?origin=${encodeURIComponent(window.location.origin)}`,
+    );
+  });
+
+  it('loads nothing for a URL that is not http or https, and warns once about it', async () => {
+    const warn = spyOn(console, 'warn');
+    const {element, frame} = await renderExample();
+    inbox = await openFrameInbox(frame, resolveSandboxUrl('url').href);
+    postFromFrame(frame, {type: 'a2ui_sandbox_proxy_ready'});
+    await inbox.next('a2ui_sandbox_resource_ready');
+
+    harness.updateComponent({...ORDER_TRACKER, url: 'javascript:alert(1)'});
+    await element.updateComplete;
+    harness.updateComponent({...ORDER_TRACKER, url: 'javascript:alert(1)', height: 300});
+    await element.updateComplete;
+    await settle();
+
+    expect(inbox.ofType('a2ui_sandbox_resource_ready').length).toBe(1);
+    const warnings = warn.calls
+      .allArgs()
+      .filter(args => String(args[0]).includes('javascript:alert(1)'));
+    expect(warnings.length).toBe(1);
+    expect(element.style.height).toBe('300px');
+  });
+
+  it('keeps the same frame and connection when only the height changes', async () => {
+    const {element, frame} = await renderExample();
+    inbox = await openFrameInbox(frame, resolveSandboxUrl('url').href);
+    postFromFrame(frame, {type: 'a2ui_sandbox_proxy_ready'});
+    await inbox.next('a2ui_sandbox_resource_ready');
+
+    harness.updateComponent({...ORDER_TRACKER, height: 250});
+    await element.updateComplete;
+    await settle();
+
+    expect(element.querySelector('iframe')).toBe(frame);
+    expect(element.style.height).toBe('250px');
+    expect(inbox.ofType('a2ui_sandbox_resource_ready').length).toBe(1);
+  });
+});
diff --git a/typescript/catalogs/iframe/src/components/web_app_frame_url.ts b/typescript/catalogs/iframe/src/components/web_app_frame_url.ts
new file mode 100644
index 0000000000..f33680c78c
--- /dev/null
+++ b/typescript/catalogs/iframe/src/components/web_app_frame_url.ts
@@ -0,0 +1,115 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  DynamicStringSchema,
+  type ComponentApi,
+  type WebComponentImplementation,
+} from '@a2ui/web_core/v1_0';
+import type {z} from 'zod';
+import {DEFAULT_INNER_SANDBOX} from '../shared/sandbox/sandbox.js';
+import type {SandboxProtocol, SandboxResource} from '../shared/sandbox/sandbox_bootstrap.js';
+import type {SandboxMode} from '../shared/sandbox/sandbox_config.js';
+import {
+  frameHeightFromProp,
+  frameTitleFromProps,
+  SandboxedFrameElement,
+} from '../shared/sandbox/sandboxed_frame_element.js';
+import {
+  connectWebAppFrameBridge,
+  toBridgeProps,
+  WebAppFrameCommonPropsSchema,
+} from './web_app_frame_common.js';
+
+/** The `WebAppFrameUrl` component of the iframe catalog: an external web application in a frame. */
+export const WebAppFrameUrlApi = {
+  name: 'WebAppFrameUrl',
+  schema: WebAppFrameCommonPropsSchema.extend({
+    'url': DynamicStringSchema.describe(
+      'The external URL to load inside the iframe. Only http and https URLs are loaded.',
+    ),
+  }).strict(),
+} satisfies ComponentApi;
+
+/** Properties of `WebAppFrameUrl`, as declared in the catalog. */
+export type WebAppFrameUrlProps = z.infer<typeof WebAppFrameUrlApi.schema>;
+
+/**
+ * The URL the inner frame loads for a `url` property: only `http:` and `https:` URLs qualify, and
+ * the host origin is appended as the `origin` query parameter so the application can address its
+ * messages to the host. Returns null for anything else.
+ */
+export function resolveWebAppUrl(url: unknown, hostOrigin = window.location.origin): string | null {
+  if (typeof url !== 'string' || url === '') {
+    return null;
+  }
+  let target: URL;
+  try {
+    target = new URL(url);
+  } catch {
+    return null;
+  }
+  if (target.protocol !== 'http:' && target.protocol !== 'https:') {
+    return null;
+  }
+  target.searchParams.set('origin', hostOrigin);
+  return target.href;
+}
+
+class WebAppFrameUrlElement extends SandboxedFrameElement<typeof WebAppFrameUrlApi> {
+  protected override readonly api = WebAppFrameUrlApi;
+  protected readonly sandboxMode: SandboxMode = 'url';
+  protected readonly sandboxProtocol: SandboxProtocol = 'a2ui';
+
+  private reportedInvalidUrl: string | undefined;
+
+  protected resolveResource(): SandboxResource | null {
+    const {url} = this.controller.props;
+    const target = resolveWebAppUrl(url);
+    if (target === null) {
+      if (typeof url === 'string' && url !== '' && url !== this.reportedInvalidUrl) {
+        this.reportedInvalidUrl = url;
+        console.warn(`[WebAppFrameUrl] Not an http or https URL, nothing loaded: ${url}`);
+      }
+      return null;
+    }
+    return {url: target, sandbox: DEFAULT_INNER_SANDBOX};
+  }
+
+  protected resolveHeight(): number | undefined {
+    return frameHeightFromProp(this.controller.props.height);
+  }
+
+  protected resolveTitle(): string {
+    return frameTitleFromProps(this.controller.props.accessibility, 'Embedded web application');
+  }
+
+  protected connectFrame(frame: HTMLIFrameElement, sandboxOrigin: string): () => void {
+    return connectWebAppFrameBridge({
+      frame,
+      sandboxOrigin,
+      context: this.context,
+      getProps: () => toBridgeProps(this.controller.props),
+    });
+  }
+}
+
+/** Registration entry of `WebAppFrameUrl` for a `Catalog`. */
+export const A2uiWebAppFrameUrl: WebComponentImplementation<typeof WebAppFrameUrlApi.schema> = {
+  ...WebAppFrameUrlApi,
+  tagName: 'a2ui-web-app-frame-url',
+  element: WebAppFrameUrlElement,
+};
diff --git a/typescript/catalogs/iframe/src/index.ts b/typescript/catalogs/iframe/src/index.ts
index fd2175eb1d..abfc1635b3 100644
--- a/typescript/catalogs/iframe/src/index.ts
+++ b/typescript/catalogs/iframe/src/index.ts
@@ -15,11 +15,30 @@
  */
 
 /**
- * @a2ui/catalog-iframe: the A2UI iframe catalog. This entry point exposes the sandbox
- * configuration and the `a2ui_*` host bridge; the frame components follow.
+ * @a2ui/catalog-iframe: the A2UI iframe catalog. This entry point exposes the catalog with its two
+ * universal components, the sandbox configuration and the `a2ui_*` host bridge.
  */
 
-export {IFRAME_CATALOG_ID} from './catalog.js';
+// The catalog and its components.
+export {IFRAME_CATALOG_ID, iframeCatalog} from './catalog.js';
+export {
+  A2uiWebAppFrameUrl,
+  WebAppFrameUrlApi,
+  type WebAppFrameUrlProps,
+} from './components/web_app_frame_url.js';
+export {
+  A2uiWebAppFrameSrcdoc,
+  WebAppFrameSrcdocApi,
+  type WebAppFrameSrcdocProps,
+} from './components/web_app_frame_srcdoc.js';
+
+// Base class and host adapter for other sandboxed frame components.
+export {
+  frameHeightFromProp,
+  frameTitleFromProps,
+  SandboxedFrameElement,
+} from './shared/sandbox/sandboxed_frame_element.js';
+export {ComponentContextFrameHost} from './shared/sandbox/component_context_frame_host.js';
 
 // Sandbox configuration.
 export {
diff --git a/typescript/catalogs/iframe/src/testing/frame_test_support.ts b/typescript/catalogs/iframe/src/testing/frame_test_support.ts
new file mode 100644
index 0000000000..ba3421320b
--- /dev/null
+++ b/typescript/catalogs/iframe/src/testing/frame_test_support.ts
@@ -0,0 +1,260 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Support for the tests of the frame components: a surface built from real A2UI messages, the
+ * rendering of one of its components, and helpers to wait for a sandboxed frame.
+ */
+
+import {
+  AgentToRendererMessageSchema,
+  basicCatalog,
+  Catalog,
+  ComponentContext,
+  MessageProcessor,
+  renderA2uiNode,
+  type A2uiWebComponentElement,
+  type ActionPayload,
+  type AgentToRendererMessage,
+  type FunctionImplementation,
+  type SurfaceModel,
+  type WebComponentImplementation,
+} from '@a2ui/web_core/v1_0';
+import {render, type LitElement} from 'lit';
+import {z} from 'zod';
+import catalogJson from '../catalog.json' with {type: 'json'};
+import {IFRAME_CATALOG_ID, iframeCatalog} from '../catalog.js';
+
+/**
+ * The property names a component of the bundled catalog schema accepts, apart from `id` and
+ * `component`: those declared on the component entry and `accessibility`, which the envelope's
+ * `ComponentCommon` adds to every component.
+ */
+export function catalogPropertyNames(component: keyof typeof catalogJson.components): string[] {
+  const names = new Set<string>(['accessibility']);
+  for (const name of Object.keys(catalogJson.components[component].properties)) {
+    if (name !== 'component') {
+      names.add(name);
+    }
+  }
+  return [...names].sort();
+}
+
+/**
+ * A host function the scenario tests let the application call through `allowedFunctions`. The
+ * basic catalog has no arithmetic functions (expressions cover them), so the tests bring their own.
+ */
+export const ADD_FUNCTION: FunctionImplementation = {
+  name: 'add',
+  returnType: 'number',
+  schema: z.object({a: z.number(), b: z.number()}),
+  execute: args => (args['a'] as number) + (args['b'] as number),
+};
+
+/**
+ * The catalogs a host registers to render the catalog's examples: the basic catalog, which the
+ * examples use as their surface default, and the iframe catalog, which the frame components name
+ * with their own `catalogId`. The iframe catalog carries the test-only {@link ADD_FUNCTION} for
+ * the scenarios, which run on a surface whose default is the iframe catalog.
+ */
+export const EXAMPLE_CATALOGS: ReadonlyArray<Catalog<WebComponentImplementation>> = [
+  basicCatalog,
+  new Catalog<WebComponentImplementation>(
+    IFRAME_CATALOG_ID,
+    '1.0',
+    [...iframeCatalog.components.values()],
+    [ADD_FUNCTION],
+  ),
+];
+
+/**
+ * Parses the `messages` of an example file with the message schema, so a stale example fails
+ * loudly. The messages are copied first: the data model keeps the objects it is given, and a
+ * fixture module must not carry the writes of one test into the next.
+ */
+export function parseExampleMessages(example: {
+  readonly messages: readonly unknown[];
+}): AgentToRendererMessage[] {
+  return AgentToRendererMessageSchema.array().parse(structuredClone(example.messages));
+}
+
+/** Polls until the predicate holds, failing the spec with `what` after about four seconds. */
+export async function waitFor(predicate: () => boolean, what: string): Promise<void> {
+  for (let attempt = 0; attempt < 800 && !predicate(); attempt++) {
+    await new Promise(resolve => setTimeout(resolve, 5));
+  }
+  expect(predicate()).withContext(what).toBeTrue();
+}
+
+/** Lets pending messages arrive when the test expects nothing to happen. */
+export async function settle(): Promise<void> {
+  for (let i = 0; i < 5; i++) {
+    await new Promise(resolve => setTimeout(resolve, 20));
+  }
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+/** Delivers `data` to the host as if the proxy in `frame` had posted it from `origin`. */
+export function postFromFrame(
+  frame: HTMLIFrameElement,
+  data: unknown,
+  origin = window.location.origin,
+): void {
+  window.dispatchEvent(new MessageEvent('message', {data, origin, source: frame.contentWindow}));
+}
+
+/**
+ * The messages a same-origin frame page receives from the host, recorded by a listener inside
+ * the page. Transferred ports arrive in `event.ports`, so a test can play the app's side.
+ */
+export class FrameInbox {
+  readonly messages: MessageEvent[] = [];
+  private readonly listener = (event: MessageEvent) => {
+    this.messages.push(event);
+  };
+
+  constructor(private readonly target: Window) {
+    target.addEventListener('message', this.listener);
+  }
+
+  /** The recorded messages whose `data.type` is `type`. */
+  ofType(type: string): MessageEvent[] {
+    return this.messages.filter(event => isRecord(event.data) && event.data['type'] === type);
+  }
+
+  /** Waits for the message of `type` at position `index` among those of that type. */
+  async next(type: string, index = 0): Promise<MessageEvent> {
+    await waitFor(() => this.ofType(type).length > index, `frame received ${type}`);
+    return this.ofType(type)[index];
+  }
+
+  dispose(): void {
+    this.target.removeEventListener('message', this.listener);
+  }
+}
+
+/** Waits for `frame` to show the page at `href` and starts recording what the page receives. */
+export async function openFrameInbox(frame: HTMLIFrameElement, href: string): Promise<FrameInbox> {
+  await waitForFrameDocument(frame, href);
+  return new FrameInbox(frame.contentWindow!);
+}
+
+/** The inner frame the proxy created; readable because the proxy page is same-origin. */
+export function innerFrameOf(frame: HTMLIFrameElement): HTMLIFrameElement | null {
+  return frame.contentDocument?.querySelector('iframe') ?? null;
+}
+
+/** Waits for the frame's document to be the given page, fully loaded. */
+export async function waitForFrameDocument(frame: HTMLIFrameElement, href: string): Promise<void> {
+  await waitFor(
+    () =>
+      frame.contentWindow?.location.href === href &&
+      frame.contentDocument?.readyState === 'complete',
+    `frame loaded ${href}`,
+  );
+}
+
+/**
+ * A surface processed from real messages and rendered with the universal element of one of its
+ * components. Actions the surface emits are recorded.
+ */
+export class FrameTestHarness {
+  readonly container: HTMLDivElement;
+  readonly processor: MessageProcessor<WebComponentImplementation>;
+  readonly surface: SurfaceModel;
+  readonly actions: ActionPayload[] = [];
+
+  constructor(
+    readonly surfaceId: string,
+    messages: readonly AgentToRendererMessage[],
+    catalogs: ReadonlyArray<Catalog<WebComponentImplementation>> = EXAMPLE_CATALOGS,
+  ) {
+    this.container = document.createElement('div');
+    this.container.style.width = '600px';
+    document.body.appendChild(this.container);
+    this.processor = new MessageProcessor<WebComponentImplementation>([...catalogs], action => {
+      this.actions.push(action);
+    });
+    this.processor.processMessages([...messages]);
+    const surface = this.processor.model.getSurface(surfaceId);
+    if (!surface) {
+      throw new Error(`The messages did not create the surface ${surfaceId}`);
+    }
+    this.surface = surface;
+  }
+
+  /** Renders the component and returns its element once its first update completed. */
+  async renderComponent(componentId: string): Promise<LitElement & A2uiWebComponentElement> {
+    const context = new ComponentContext(this.surface, componentId);
+    // A component renders from the catalog it named with `catalogId`, else the surface default.
+    const catalog = (context.componentModel.catalog ??
+      this.surface.defaultCatalog) as Catalog<WebComponentImplementation>;
+    render(renderA2uiNode(context, catalog), this.container);
+    const element = this.container.firstElementChild as
+      | (LitElement & A2uiWebComponentElement)
+      | null;
+    if (!element) {
+      throw new Error(`Nothing was rendered for ${componentId}`);
+    }
+    await element.updateComplete;
+    return element;
+  }
+
+  /** Replaces the properties of a component, as an `updateComponents` message would. */
+  updateComponent(
+    component: {readonly id: string; readonly component: string} & Record<string, unknown>,
+  ): void {
+    this.processor.processMessages([
+      {
+        version: 'v1.0',
+        updateComponents: {surfaceId: this.surfaceId, components: [component]},
+      },
+    ]);
+  }
+
+  /** Writes a value into the surface data model, as an `updateDataModel` message would. */
+  setData(path: string, value: unknown): void {
+    this.processor.processMessages([
+      {version: 'v1.0', updateDataModel: {surfaceId: this.surfaceId, path, value}},
+    ]);
+  }
+
+  /** The actions recorded so far with the given name. */
+  actionsNamed(name: string): ActionPayload[] {
+    return this.actions.filter(action => action.name === name);
+  }
+
+  /** Waits for the next action with the given name beyond `after` recorded ones, and returns it. */
+  async nextAction(name: string, after = 0): Promise<ActionPayload> {
+    await waitFor(() => this.actionsNamed(name).length > after, `action ${name} received`);
+    return this.actionsNamed(name)[after];
+  }
+
+  /** Removes the rendered element from the document, as a host would when the surface goes away. */
+  clear(): void {
+    render(null, this.container);
+  }
+
+  /** Removes the rendered element and disposes the surface. */
+  dispose(): void {
+    this.clear();
+    this.container.remove();
+    this.surface.dispose();
+  }
+}
diff --git a/typescript/catalogs/iframe/tests/fixtures/apps/test_app.html b/typescript/catalogs/iframe/tests/fixtures/apps/test_app.html
new file mode 100644
index 0000000000..ba085aca30
--- /dev/null
+++ b/typescript/catalogs/iframe/tests/fixtures/apps/test_app.html
@@ -0,0 +1,153 @@
+<!--
+ Copyright 2024 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>A2UI test app</title>
+  </head>
+  <body>
+    <p id="status">Waiting for the host</p>
+    <script>
+      // Web application used by the real-frame scenarios of @a2ui/catalog-iframe. It runs in the
+      // sandboxed inner frame, either inline through WebAppFrameSrcdoc or from this URL through
+      // WebAppFrameUrl, so a test cannot reach into it. Instead, the app reports everything it
+      // receives as actions and takes its orders from the data model: the host writes a JSON
+      // string to the path bound as "command", and each command makes the app send exactly one
+      // protocol message.
+      var port = null;
+      var hostContext = null;
+
+      function send(message) {
+        if (port) {
+          port.postMessage(message);
+        }
+      }
+
+      function report(action, data) {
+        send({type: 'a2ui_action', action: action, data: data});
+      }
+
+      function runCommand(command) {
+        switch (command.kind) {
+          case 'action':
+            report(command.action, command.data || {});
+            break;
+          case 'ambient_action':
+            // Sent on the window channel instead of the port; the host must ignore it.
+            window.parent.postMessage(
+              {type: 'a2ui_action', action: command.action, data: command.data || {}},
+              '*',
+            );
+            break;
+          case 'set':
+            send({
+              type: 'a2ui_data_model_change',
+              key: command.key,
+              subpath: command.subpath,
+              value: command.value,
+            });
+            break;
+          case 'call':
+            send({
+              type: 'a2ui_function_call',
+              call: command.call,
+              callId: command.callId,
+              args: command.args,
+            });
+            break;
+          case 'resize':
+            send({type: 'a2ui_size_changed', width: command.width, height: command.height});
+            break;
+          case 'report_host_context':
+            report('host_context', {hostContext: hostContext});
+            break;
+          case 'navigate_top': {
+            // A sandboxed frame without allow-top-navigation must not be able to do this.
+            var blocked = false;
+            var error = '';
+            try {
+              window.top.location.href = command.url;
+            } catch (e) {
+              blocked = true;
+              error = e && e.name ? String(e.name) : String(e);
+            }
+            report('navigate_top_result', {blocked: blocked, error: error});
+            break;
+          }
+          case 'click_link': {
+            // In WebAppFrameSrcdoc, the injected link interceptor turns this into open_url.
+            var anchor = document.createElement('a');
+            anchor.href = command.url;
+            anchor.textContent = 'link';
+            document.body.appendChild(anchor);
+            anchor.click();
+            break;
+          }
+          default:
+            report('unknown_command', {command: command});
+        }
+      }
+
+      function onPortMessage(event) {
+        var msg = event.data || {};
+        if (msg.type === 'a2ui_data_model_update') {
+          if (msg.key === 'command' && typeof msg.value === 'string') {
+            runCommand(JSON.parse(msg.value));
+          } else {
+            report('data_seen', {key: msg.key, subpath: msg.subpath, value: msg.value});
+          }
+        } else if (msg.type === 'a2ui_function_result') {
+          report('function_result', {
+            call: msg.call,
+            callId: msg.callId,
+            status: msg.status,
+            result: msg.result,
+            error: msg.error,
+          });
+        } else if (msg.type === 'a2ui_host_context_update') {
+          hostContext = msg.value;
+        }
+      }
+
+      window.addEventListener('message', function (event) {
+        if (event.source !== window.parent) {
+          return;
+        }
+        var msg = event.data || {};
+        if (msg.type !== 'a2ui_app_frame_init' || !event.ports || !event.ports[0]) {
+          return;
+        }
+        port = event.ports[0];
+        port.onmessage = onPortMessage;
+        var value = msg.value || {};
+        hostContext = value.hostContext || null;
+        document.getElementById('status').textContent = 'Connected';
+        report('app_ready', {
+          config: value.config,
+          initialData: value.initialData,
+          allowedEvents: Object.keys(value.allowedEvents || {}),
+          allowedFunctions: Object.keys(value.allowedFunctions || {}),
+          mutableDataKeys: value.mutableDataKeys,
+          hostContext: value.hostContext,
+          location: {href: window.location.href, search: window.location.search},
+        });
+      });
+
+      window.parent.postMessage({type: 'a2ui_app_frame_ready'}, '*');
+    </script>
+  </body>
+</html>
diff --git a/typescript/catalogs/iframe/tests/fixtures/inert/sandbox-url.html b/typescript/catalogs/iframe/tests/fixtures/inert/sandbox-url.html
new file mode 100644
index 0000000000..5c59a90be7
--- /dev/null
+++ b/typescript/catalogs/iframe/tests/fixtures/inert/sandbox-url.html
@@ -0,0 +1,25 @@
+<!--
+ Copyright 2024 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Inert sandbox page (URL mode)</title>
+  </head>
+  <body>
+    <!-- Stands in for the sandbox proxy in component tests that drive the handshake themselves. -->
+  </body>
+</html>
diff --git a/typescript/catalogs/iframe/tests/fixtures/inert/sandbox.html b/typescript/catalogs/iframe/tests/fixtures/inert/sandbox.html
new file mode 100644
index 0000000000..8e3c895fd7
--- /dev/null
+++ b/typescript/catalogs/iframe/tests/fixtures/inert/sandbox.html
@@ -0,0 +1,25 @@
+<!--
+ Copyright 2024 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Inert sandbox page (HTML mode)</title>
+  </head>
+  <body>
+    <!-- Stands in for the sandbox proxy in component tests that drive the handshake themselves. -->
+  </body>
+</html>
diff --git a/typescript/catalogs/iframe/tests/web_app_frame_scenarios.test.ts b/typescript/catalogs/iframe/tests/web_app_frame_scenarios.test.ts
new file mode 100644
index 0000000000..b1c715b3a2
--- /dev/null
+++ b/typescript/catalogs/iframe/tests/web_app_frame_scenarios.test.ts
@@ -0,0 +1,286 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Real-frame scenarios. The components load the real sandbox proxy from `/a2ui-sandbox/`, which
+ * Karma serves from `dist/sandbox/`, and a real application, `fixtures/apps/test_app.html`,
+ * served from `/a2ui-fixtures/`. The application reports what it receives as actions and takes
+ * its commands from the data model, so the tests never reach into the sandboxed frame; see the
+ * fixture for the commands.
+ */
+
+import {IFRAME_CATALOG_ID} from '../src/catalog.js';
+import {SRCDOC_CONTENT_SECURITY_POLICY} from '../src/components/srcdoc_content.js';
+import {DEFAULT_INNER_SANDBOX} from '../src/shared/sandbox/sandbox.js';
+import {
+  resetSandboxConfig,
+  resolveSandboxUrl,
+  type SandboxMode,
+} from '../src/shared/sandbox/sandbox_config.js';
+import {
+  FrameTestHarness,
+  innerFrameOf,
+  parseExampleMessages,
+  settle,
+  waitFor,
+} from '../src/testing/frame_test_support.js';
+
+const SURFACE_ID = 'frame-scenarios';
+const COMPONENT_ID = 'app';
+const APP_URL = new URL('/a2ui-fixtures/apps/test_app.html', window.location.origin).href;
+const ANY_OBJECT = {type: 'object'};
+
+/** The actions the fixture application reports, plus one with a strict payload. */
+const APP_EVENTS = {
+  app_ready: ANY_OBJECT,
+  data_seen: ANY_OBJECT,
+  function_result: ANY_OBJECT,
+  host_context: ANY_OBJECT,
+  navigate_top_result: ANY_OBJECT,
+  open_url: ANY_OBJECT,
+  unknown_command: ANY_OBJECT,
+  saved: {
+    type: 'object',
+    properties: {count: {type: 'integer'}},
+    required: ['count'],
+    additionalProperties: false,
+  },
+};
+
+type Content = {readonly url: string} | {readonly htmlContent: string};
+
+function surfaceMessages(content: Content) {
+  return parseExampleMessages({
+    messages: [
+      {version: 'v1.0', createSurface: {surfaceId: SURFACE_ID, catalogId: IFRAME_CATALOG_ID}},
+      {
+        version: 'v1.0',
+        updateDataModel: {surfaceId: SURFACE_ID, value: {counter: {count: 1, label: 'clicks'}}},
+      },
+      {
+        version: 'v1.0',
+        updateComponents: {
+          surfaceId: SURFACE_ID,
+          components: [
+            {
+              id: COMPONENT_ID,
+              component: 'url' in content ? 'WebAppFrameUrl' : 'WebAppFrameSrcdoc',
+              ...content,
+              height: 240,
+              config: {theme: 'dark'},
+              data: {
+                paths: {count: '/counter/count', label: '/counter/label', command: '/command'},
+              },
+              mutableData: {count: {type: 'integer', minimum: 0}},
+              allowedEvents: APP_EVENTS,
+              allowedFunctions: {
+                add: {
+                  type: 'object',
+                  properties: {a: {type: 'number'}, b: {type: 'number'}},
+                  required: ['a', 'b'],
+                  additionalProperties: false,
+                },
+              },
+            },
+          ],
+        },
+      },
+    ],
+  });
+}
+
+interface Scenario {
+  readonly component: string;
+  readonly mode: SandboxMode;
+  readonly content: (appHtml: string) => Content;
+}
+
+const SCENARIOS: readonly Scenario[] = [
+  {component: 'WebAppFrameSrcdoc', mode: 'html', content: appHtml => ({htmlContent: appHtml})},
+  {component: 'WebAppFrameUrl', mode: 'url', content: () => ({url: APP_URL})},
+];
+
+describe('WebAppFrame components with the real sandbox proxy', () => {
+  let appHtml: string;
+  let harness: FrameTestHarness;
+  let commandSequence = 0;
+  const pageHref = window.location.href;
+
+  beforeAll(async () => {
+    const response = await fetch(APP_URL);
+    expect(response.ok).withContext('fixture app served').toBeTrue();
+    appHtml = await response.text();
+  });
+
+  afterEach(() => {
+    harness.dispose();
+    resetSandboxConfig();
+  });
+
+  /** Sends a command to the application by writing it to the bound `command` path. */
+  function command(payload: Record<string, unknown>): void {
+    harness.setData('/command', JSON.stringify({...payload, seq: ++commandSequence}));
+  }
+
+  async function startApp(content: Content) {
+    harness = new FrameTestHarness(SURFACE_ID, surfaceMessages(content));
+    const element = await harness.renderComponent(COMPONENT_ID);
+    const frame = element.querySelector('iframe')!;
+    const ready = await harness.nextAction('app_ready');
+    return {element, frame, ready};
+  }
+
+  for (const scenario of SCENARIOS) {
+    describe(scenario.component, () => {
+      it('boots the application through the proxy and completes the handshake', async () => {
+        const {frame, ready} = await startApp(scenario.content(appHtml));
+
+        expect(frame.src).toBe(resolveSandboxUrl(scenario.mode).href);
+        expect(frame.hasAttribute('sandbox')).toBeFalse();
+        expect(ready.surfaceId).toBe(SURFACE_ID);
+        expect(ready.sourceComponentId).toBe(COMPONENT_ID);
+        expect(ready.context['config']).toEqual({theme: 'dark'});
+        expect(ready.context['initialData']).toEqual(
+          jasmine.objectContaining({count: 1, label: 'clicks'}),
+        );
+        expect(ready.context['allowedEvents']).toEqual(Object.keys(APP_EVENTS));
+        expect(ready.context['allowedFunctions']).toEqual(['add']);
+        expect(ready.context['mutableDataKeys']).toEqual(['count']);
+        expect(ready.context['hostContext']).toEqual({
+          containerDimensions: {width: jasmine.any(Number), height: jasmine.any(Number)},
+        });
+      });
+
+      it('runs the application in an inner frame without allow-same-origin', async () => {
+        const {frame, ready} = await startApp(scenario.content(appHtml));
+
+        const inner = innerFrameOf(frame)!;
+        expect(inner).not.toBeNull();
+        expect(inner.getAttribute('sandbox')).toBe(DEFAULT_INNER_SANDBOX);
+        expect(inner.getAttribute('sandbox')).not.toContain('allow-same-origin');
+        expect(inner.getAttribute('sandbox')).not.toContain('allow-top-navigation');
+        const location = ready.context['location'] as {href: string; search: string};
+        if ('url' in scenario.content(appHtml)) {
+          const expectedUrl = `${APP_URL}?origin=${encodeURIComponent(window.location.origin)}`;
+          expect(inner.src).toBe(expectedUrl);
+          expect(location.href).toBe(expectedUrl);
+        } else {
+          expect(inner.getAttribute('srcdoc')).toContain(
+            `<meta http-equiv="Content-Security-Policy" content="${SRCDOC_CONTENT_SECURITY_POLICY}">`,
+          );
+          expect(inner.hasAttribute('src')).toBeFalse();
+          expect(location.href).toBe('about:srcdoc');
+        }
+      });
+
+      it('carries actions, data changes and function calls over the channel', async () => {
+        await startApp(scenario.content(appHtml));
+
+        command({kind: 'action', action: 'saved', data: {count: 2}});
+        const saved = await harness.nextAction('saved');
+        expect(saved.context).toEqual({count: 2});
+        expect(saved.sourceComponentId).toBe(COMPONENT_ID);
+
+        harness.setData('/counter/count', 5);
+        const seen = await harness.nextAction('data_seen');
+        expect(seen.context).toEqual(jasmine.objectContaining({key: 'count', value: 5}));
+
+        command({kind: 'set', key: 'count', value: 6});
+        await waitFor(
+          () => harness.surface.dataModel.get('/counter/count') === 6,
+          'count written by the application',
+        );
+
+        command({kind: 'call', call: 'add', callId: 'sum-1', args: {a: 3, b: 4}});
+        const result = await harness.nextAction('function_result');
+        expect(result.context).toEqual(
+          jasmine.objectContaining({call: 'add', callId: 'sum-1', status: 'success', result: 7}),
+        );
+      });
+
+      it('resizes the frame when the application asks, within the limits', async () => {
+        const {element, frame} = await startApp(scenario.content(appHtml));
+        expect(element.style.height).toBe('240px');
+
+        command({kind: 'resize', height: 320});
+        await waitFor(() => frame.style.height === '320px', 'frame resized');
+        expect(element.style.height).toBe('320px');
+
+        command({kind: 'resize', height: 99999});
+        await waitFor(() => frame.style.height === '2000px', 'height clamped');
+      });
+
+      it('drops what the allowlists do not cover', async () => {
+        await startApp(scenario.content(appHtml));
+
+        command({kind: 'action', action: 'not_declared', data: {}});
+        command({kind: 'action', action: 'saved', data: {count: 'two'}});
+        command({kind: 'set', key: 'label', value: 'taps'});
+        command({kind: 'set', key: 'count', value: -1});
+        command({kind: 'call', call: 'multiply', callId: 'mul-1', args: {a: 2, b: 3}});
+
+        const result = await harness.nextAction('function_result');
+        expect(result.context).toEqual(
+          jasmine.objectContaining({
+            callId: 'mul-1',
+            status: 'error',
+            error: jasmine.objectContaining({code: 'NOT_ALLOWED'}),
+          }),
+        );
+        await settle();
+        expect(harness.actionsNamed('not_declared').length).toBe(0);
+        expect(harness.actionsNamed('saved').length).toBe(0);
+        expect(harness.surface.dataModel.get('/counter/label')).toBe('clicks');
+        expect(harness.surface.dataModel.get('/counter/count')).toBe(1);
+      });
+
+      it('only accepts protocol messages on the port, not on the window', async () => {
+        await startApp(scenario.content(appHtml));
+
+        command({kind: 'ambient_action', action: 'saved', data: {count: 3}});
+        command({kind: 'action', action: 'saved', data: {count: 4}});
+
+        const saved = await harness.nextAction('saved');
+        expect(saved.context).toEqual({count: 4});
+        expect(harness.actionsNamed('saved').length).toBe(1);
+      });
+
+      it('keeps the application from navigating the host page', async () => {
+        await startApp(scenario.content(appHtml));
+
+        command({kind: 'navigate_top', url: 'about:blank'});
+
+        const result = await harness.nextAction('navigate_top_result');
+        expect(result.context).toEqual({blocked: true, error: 'SecurityError'});
+        expect(window.location.href).toBe(pageHref);
+      });
+    });
+  }
+
+  describe('WebAppFrameSrcdoc links', () => {
+    it('reports a link click as an open_url action instead of navigating', async () => {
+      await startApp({htmlContent: appHtml});
+
+      command({kind: 'click_link', url: 'https://example.com/page?q=1'});
+
+      const openUrl = await harness.nextAction('open_url');
+      expect(openUrl.context).toEqual({url: 'https://example.com/page?q=1'});
+      // The application did not navigate away: it still answers commands.
+      command({kind: 'report_host_context'});
+      await harness.nextAction('host_context');
+    });
+  });
+});
diff --git a/typescript/catalogs/iframe/tsconfig.test.json b/typescript/catalogs/iframe/tsconfig.test.json
index af39f26bfd..85f70f31b6 100644
--- a/typescript/catalogs/iframe/tsconfig.test.json
+++ b/typescript/catalogs/iframe/tsconfig.test.json
@@ -1,9 +1,10 @@
 {
   "$schema": "https://json.schemastore.org/tsconfig",
 
-  /* Type-checks the whole source tree, tests included, with the Jasmine globals. Used by
-     `test:types`, by the Karma esbuild preprocessor and by ESLint; the library build uses
-     tsconfig.json, which leaves the tests and the sandbox bundle entry point out. */
+  /* Type-checks the whole source tree, tests included, with the Jasmine globals, plus the
+     real-frame scenarios under tests/. Used by `test:types`, by the Karma esbuild preprocessor and
+     by ESLint; the library build uses tsconfig.json, which leaves the tests and the sandbox bundle
+     entry point out. */
   "compilerOptions": {
     "noEmit": true,
     "forceConsistentCasingInFileNames": true,
@@ -13,7 +14,6 @@
     "types": ["jasmine"],
     "skipLibCheck": true,
     "useDefineForClassFields": false,
-    "rootDir": "src",
 
     /* Bundler mode */
     "moduleResolution": "bundler",
@@ -27,6 +27,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src/**/*.ts", "src/catalog.json"],
+  "include": ["src/**/*.ts", "src/catalog.json", "tests/**/*.ts"],
   "exclude": ["node_modules", "dist"]
 }