From 1d913db13cd237e551c65c570481a4d4e8d58bbc Mon Sep 17 00:00:00 2001
From: Sherry-hue <37186915+Sherry-hue@users.noreply.github.com>
Date: Thu, 16 Apr 2026 18:37:31 +0800
Subject: [PATCH] feat: add A2UI playground init

feat: add playground new style

feat: add lynx web project

feat: add json style

feat: use 0.9 mock data

feat: add data demo

feat: add citywalk demo

feat: add grid demo

feat: add weight prop && grid

fix: remove 0.9
---
 .../genui/a2ui-playground/lynx-src/App.tsx    |  263 +++++
 .../genui/a2ui-playground/lynx-src/index.css  |    4 +
 .../genui/a2ui-playground/lynx-src/index.tsx  |    9 +
 .../a2ui-playground/lynx-src/tsconfig.json    |   12 +
 packages/genui/a2ui-playground/lynx.config.ts |   37 +
 packages/genui/a2ui-playground/package.json   |   38 +
 .../genui/a2ui-playground/rsbuild.config.ts   |   28 +
 packages/genui/a2ui-playground/src/App.tsx    |  104 ++
 .../a2ui-playground/src/componentCatalog.ts   |  328 ++++++
 .../a2ui-playground/src/components/Chip.tsx   |    8 +
 .../src/components/MobilePreview.tsx          |   20 +
 .../src/components/ProtocolSwitch.tsx         |   23 +
 .../a2ui-playground/src/components/QrCode.tsx |   59 +
 .../src/components/UsageSection.tsx           |   96 ++
 packages/genui/a2ui-playground/src/demos.ts   |  122 ++
 packages/genui/a2ui-playground/src/entry.tsx  |   15 +
 .../genui/a2ui-playground/src/globals.d.ts    |   14 +
 .../a2ui-playground/src/mock/EventSource.ts   |  133 +++
 .../src/mock/messages/cast-grid.json          |  151 +++
 .../src/mock/messages/citywalk-list.json      |  254 ++++
 .../src/mock/messages/fridge-search.json      |  400 +++++++
 .../src/mock/messages/recs.json               |  208 ++++
 .../src/mock/messages/trip-planner.json       |  373 ++++++
 .../src/mock/messages/workout-plan.json       |  431 +++++++
 .../a2ui-playground/src/pages/AIChatPage.tsx  |  133 +++
 .../src/pages/ComponentsPage.tsx              |  147 +++
 .../a2ui-playground/src/pages/DemosPage.tsx   |  238 ++++
 .../a2ui-playground/src/pages/Dynamic.tsx     |  278 +++++
 .../genui/a2ui-playground/src/pages/Home.tsx  |   64 +
 .../a2ui-playground/src/pages/Static.tsx      |   79 ++
 packages/genui/a2ui-playground/src/render.tsx |  132 +++
 packages/genui/a2ui-playground/src/styles.css | 1045 +++++++++++++++++
 .../a2ui-playground/src/utils/base64url.ts    |   20 +
 .../a2ui-playground/src/utils/demoUrl.ts      |    4 +
 .../a2ui-playground/src/utils/protocol.ts     |   12 +
 .../a2ui-playground/src/utils/renderUrl.ts    |   28 +
 packages/genui/a2ui-playground/tsconfig.json  |   14 +
 .../genui/a2ui/src/catalog/Column/index.tsx   |   15 +
 .../genui/a2ui/src/catalog/Image/style.css    |    6 +
 .../genui/a2ui/src/catalog/List/index.tsx     |    4 +-
 packages/genui/a2ui/src/catalog/Row/index.tsx |   15 +
 packages/genui/a2ui/src/catalog/all.ts        |   21 +-
 pnpm-lock.yaml                                |  288 +++++
 43 files changed, 5661 insertions(+), 12 deletions(-)
 create mode 100644 packages/genui/a2ui-playground/lynx-src/App.tsx
 create mode 100644 packages/genui/a2ui-playground/lynx-src/index.css
 create mode 100644 packages/genui/a2ui-playground/lynx-src/index.tsx
 create mode 100644 packages/genui/a2ui-playground/lynx-src/tsconfig.json
 create mode 100644 packages/genui/a2ui-playground/lynx.config.ts
 create mode 100644 packages/genui/a2ui-playground/package.json
 create mode 100644 packages/genui/a2ui-playground/rsbuild.config.ts
 create mode 100644 packages/genui/a2ui-playground/src/App.tsx
 create mode 100644 packages/genui/a2ui-playground/src/componentCatalog.ts
 create mode 100644 packages/genui/a2ui-playground/src/components/Chip.tsx
 create mode 100644 packages/genui/a2ui-playground/src/components/MobilePreview.tsx
 create mode 100644 packages/genui/a2ui-playground/src/components/ProtocolSwitch.tsx
 create mode 100644 packages/genui/a2ui-playground/src/components/QrCode.tsx
 create mode 100644 packages/genui/a2ui-playground/src/components/UsageSection.tsx
 create mode 100644 packages/genui/a2ui-playground/src/demos.ts
 create mode 100644 packages/genui/a2ui-playground/src/entry.tsx
 create mode 100644 packages/genui/a2ui-playground/src/globals.d.ts
 create mode 100755 packages/genui/a2ui-playground/src/mock/EventSource.ts
 create mode 100644 packages/genui/a2ui-playground/src/mock/messages/cast-grid.json
 create mode 100644 packages/genui/a2ui-playground/src/mock/messages/citywalk-list.json
 create mode 100644 packages/genui/a2ui-playground/src/mock/messages/fridge-search.json
 create mode 100644 packages/genui/a2ui-playground/src/mock/messages/recs.json
 create mode 100644 packages/genui/a2ui-playground/src/mock/messages/trip-planner.json
 create mode 100644 packages/genui/a2ui-playground/src/mock/messages/workout-plan.json
 create mode 100644 packages/genui/a2ui-playground/src/pages/AIChatPage.tsx
 create mode 100644 packages/genui/a2ui-playground/src/pages/ComponentsPage.tsx
 create mode 100644 packages/genui/a2ui-playground/src/pages/DemosPage.tsx
 create mode 100644 packages/genui/a2ui-playground/src/pages/Dynamic.tsx
 create mode 100644 packages/genui/a2ui-playground/src/pages/Home.tsx
 create mode 100644 packages/genui/a2ui-playground/src/pages/Static.tsx
 create mode 100644 packages/genui/a2ui-playground/src/render.tsx
 create mode 100644 packages/genui/a2ui-playground/src/styles.css
 create mode 100644 packages/genui/a2ui-playground/src/utils/base64url.ts
 create mode 100644 packages/genui/a2ui-playground/src/utils/demoUrl.ts
 create mode 100644 packages/genui/a2ui-playground/src/utils/protocol.ts
 create mode 100644 packages/genui/a2ui-playground/src/utils/renderUrl.ts
 create mode 100644 packages/genui/a2ui-playground/tsconfig.json

diff --git a/packages/genui/a2ui-playground/lynx-src/App.tsx b/packages/genui/a2ui-playground/lynx-src/App.tsx
new file mode 100644
index 0000000000..d07c042362
--- /dev/null
+++ b/packages/genui/a2ui-playground/lynx-src/App.tsx
@@ -0,0 +1,263 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { A2UIRender, BaseClient } from '@lynx-js/a2ui-reactlynx/core';
+import type { Resource } from '@lynx-js/a2ui-reactlynx/core';
+import '@lynx-js/a2ui-reactlynx/catalog/all';
+import {
+  useEffect,
+  useInitData,
+  useMemo,
+  useRef,
+  useState,
+} from '@lynx-js/react';
+
+interface InitData {
+  messagesUrl?: string;
+  messages?: unknown;
+  actionMocksUrl?: string;
+  actionMocks?: unknown;
+}
+
+type A2uiMessage = Record<string, unknown> & { messageId?: string };
+
+type ActionMocks = Record<string, unknown>;
+
+type ResponseMessages = A2uiMessage[];
+
+const STREAM_MESSAGE_DELAY_MS = 800;
+
+function randomId(prefix: string) {
+  return prefix + Date.now().toString(36)
+    + Math.random().toString(36).slice(2, 10);
+}
+
+function normalizePayloadToMessages(payload: unknown): ResponseMessages {
+  if (payload === null || payload === undefined) {
+    return [];
+  }
+
+  if (Array.isArray(payload)) {
+    return payload as ResponseMessages;
+  }
+
+  if (typeof payload === 'string') {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      const parsed = JSON.parse(payload);
+      return normalizePayloadToMessages(parsed);
+    } catch {
+      return [];
+    }
+  }
+
+  if (
+    typeof payload === 'object'
+    && Array.isArray((payload as Record<string, unknown>).messages)
+  ) {
+    return (payload as Record<string, unknown>).messages as ResponseMessages;
+  }
+
+  return [];
+}
+
+async function loadMessages(initData: InitData): Promise<ResponseMessages> {
+  if (initData.messagesUrl) {
+    // eslint-disable-next-line n/no-unsupported-features/node-builtins
+    const res = await fetch(initData.messagesUrl, { cache: 'no-store' });
+    const text = await res.text();
+    try {
+      return normalizePayloadToMessages(JSON.parse(text));
+    } catch {
+      return normalizePayloadToMessages(text);
+    }
+  }
+
+  if (initData.messages !== undefined) {
+    return normalizePayloadToMessages(initData.messages);
+  }
+
+  return [];
+}
+
+async function loadActionMocks(initData: InitData): Promise<ActionMocks> {
+  if (initData.actionMocksUrl) {
+    // eslint-disable-next-line n/no-unsupported-features/node-builtins
+    const res = await fetch(initData.actionMocksUrl, { cache: 'no-store' });
+    const text = await res.text();
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      const parsed = JSON.parse(text);
+      if (parsed && typeof parsed === 'object') {
+        return parsed as ActionMocks;
+      }
+      return {};
+    } catch {
+      return {};
+    }
+  }
+
+  if (initData.actionMocks && typeof initData.actionMocks === 'object') {
+    return initData.actionMocks as ActionMocks;
+  }
+
+  return {};
+}
+
+export function App() {
+  const rawInitData = useInitData();
+
+  const initData = useMemo(() => {
+    if (typeof rawInitData === 'string') {
+      try {
+        return JSON.parse(rawInitData) as InitData;
+      } catch {
+        return {} as InitData;
+      }
+    }
+    return (rawInitData ?? {}) as InitData;
+  }, [rawInitData]);
+
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  const clientRef = useRef<any>(null);
+
+  const [resource, setResource] = useState<Resource | null>(null);
+  const [error, setError] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const run = async () => {
+      setLoading(true);
+      setError('');
+
+      const [rawMessages, actionMocks] = await Promise.all([
+        loadMessages(initData ?? {}),
+        loadActionMocks(initData ?? {}),
+      ]);
+
+      const messageId = randomId('demo_');
+      const messages = rawMessages.map((msg) => ({
+        ...msg,
+        messageId: messageId,
+      }));
+
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      const client = clientRef.current ?? new BaseClient('');
+
+      clientRef.current ??= client;
+
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      client.processUserAction = async (
+        userAction: Record<string, unknown>,
+      ) => {
+        const name = userAction?.name as string | undefined;
+        if (!name || !actionMocks[name]) {
+          return [];
+        }
+
+        const rawResponseMessages = normalizePayloadToMessages(
+          actionMocks[name],
+        );
+        const actionMessageId = randomId('action_');
+        const responseMessages = rawResponseMessages.map((msg) => ({
+          ...msg,
+          messageId: actionMessageId,
+        }));
+
+        void (async () => {
+          for (const msg of responseMessages) {
+            if (cancelled) break;
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+            client.processor?.processMessages?.([msg]);
+            await new Promise((resolve) =>
+              setTimeout(resolve, STREAM_MESSAGE_DELAY_MS)
+            );
+          }
+        })();
+
+        return responseMessages;
+      };
+
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+      client.processor?.clearSurfaces?.();
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+      client.resources?.clear?.();
+
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+      const { resource: newResource } = await client.send(
+        '' as unknown,
+        messageId,
+      );
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+      client.resources?.set?.(messageId, newResource);
+
+      if (!cancelled) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        setResource(newResource);
+      }
+
+      const simulateStream = async () => {
+        for (const msg of messages) {
+          if (cancelled) break;
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+          client.processor?.processMessages?.([msg]);
+          await new Promise((resolve) =>
+            setTimeout(resolve, STREAM_MESSAGE_DELAY_MS)
+          );
+        }
+      };
+
+      void simulateStream();
+    };
+
+    run()
+      .catch((e) => {
+        if (!cancelled) {
+          setError(String(e));
+          setResource(null);
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [initData]);
+
+  return (
+    <view
+      className='luna-light'
+      style={{ width: '100%', height: '100%', backgroundColor: '#fff' }}
+    >
+      {error
+        ? (
+          <view style={{ padding: '12px' }}>
+            <text style={{ color: '#c40000' }}>{error}</text>
+          </view>
+        )
+        : null}
+
+      {loading
+        ? (
+          <view style={{ padding: '12px' }}>
+            <text>Loading...</text>
+          </view>
+        )
+        : null}
+
+      {resource
+        ? (
+          <scroll-view scroll-y style={{ height: '100%' }}>
+            <A2UIRender resource={resource} />
+          </scroll-view>
+        )
+        : null}
+    </view>
+  );
+}
diff --git a/packages/genui/a2ui-playground/lynx-src/index.css b/packages/genui/a2ui-playground/lynx-src/index.css
new file mode 100644
index 0000000000..047d6a50a4
--- /dev/null
+++ b/packages/genui/a2ui-playground/lynx-src/index.css
@@ -0,0 +1,4 @@
+page {
+  padding: 10px;
+  box-sizing: border-box;
+}
diff --git a/packages/genui/a2ui-playground/lynx-src/index.tsx b/packages/genui/a2ui-playground/lynx-src/index.tsx
new file mode 100644
index 0000000000..3f88998c88
--- /dev/null
+++ b/packages/genui/a2ui-playground/lynx-src/index.tsx
@@ -0,0 +1,9 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { root } from '@lynx-js/react';
+
+import { App } from './App.jsx';
+import './index.css';
+
+root.render(<App />);
diff --git a/packages/genui/a2ui-playground/lynx-src/tsconfig.json b/packages/genui/a2ui-playground/lynx-src/tsconfig.json
new file mode 100644
index 0000000000..7d8eed26ef
--- /dev/null
+++ b/packages/genui/a2ui-playground/lynx-src/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "@lynx-js/react",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "noEmit": true,
+  },
+  "include": ["./**/*.ts", "./**/*.tsx"],
+}
diff --git a/packages/genui/a2ui-playground/lynx.config.ts b/packages/genui/a2ui-playground/lynx.config.ts
new file mode 100644
index 0000000000..f00e5e4324
--- /dev/null
+++ b/packages/genui/a2ui-playground/lynx.config.ts
@@ -0,0 +1,37 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import { pluginQRCode } from '@lynx-js/qrcode-rsbuild-plugin';
+import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
+import { defineConfig } from '@lynx-js/rspeedy';
+
+export default defineConfig({
+  plugins: [
+    pluginQRCode({
+      schema(url) {
+        return {
+          default: `${url}?fullscreen=true`,
+        };
+      },
+    }),
+    pluginReactLynx({
+      defaultDisplayLinear: false,
+    }),
+  ],
+  source: {
+    entry: {
+      main: './lynx-src/index.tsx',
+    },
+  },
+  environments: {
+    web: {},
+    lynx: {},
+  },
+  output: {
+    distPath: {
+      root: 'www',
+    },
+    filename: '[name].[platform].js',
+  },
+});
diff --git a/packages/genui/a2ui-playground/package.json b/packages/genui/a2ui-playground/package.json
new file mode 100644
index 0000000000..584e995056
--- /dev/null
+++ b/packages/genui/a2ui-playground/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "a2ui-playground",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "rsbuild build",
+    "build:lynx": "rspeedy build",
+    "dev": "rsbuild dev",
+    "dev:lynx": "rspeedy dev",
+    "preview": "rsbuild preview",
+    "preview:lynx": "rspeedy preview"
+  },
+  "dependencies": {
+    "@codemirror/lang-json": "^6.0.2",
+    "@lynx-js/a2ui-reactlynx": "workspace:*",
+    "@lynx-js/lynx-core": "0.1.3",
+    "@lynx-js/react": "workspace:*",
+    "@lynx-js/web-core": "workspace:*",
+    "@lynx-js/web-elements": "workspace:*",
+    "@uiw/react-codemirror": "^4.25.9",
+    "qrcode": "^1.5.4",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "devDependencies": {
+    "@lynx-js/qrcode-rsbuild-plugin": "workspace:*",
+    "@lynx-js/react-rsbuild-plugin": "workspace:*",
+    "@lynx-js/rspeedy": "workspace:*",
+    "@lynx-js/types": "3.7.0",
+    "@rsbuild/core": "catalog:rsbuild",
+    "@rsbuild/plugin-react": "^1.4.5",
+    "@types/qrcode": "^1.5.5",
+    "@types/react": "npm:@types/react@^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "typescript": "^5.9.3"
+  }
+}
diff --git a/packages/genui/a2ui-playground/rsbuild.config.ts b/packages/genui/a2ui-playground/rsbuild.config.ts
new file mode 100644
index 0000000000..f2d4487d21
--- /dev/null
+++ b/packages/genui/a2ui-playground/rsbuild.config.ts
@@ -0,0 +1,28 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+
+export default defineConfig({
+  plugins: [pluginReact()],
+  source: {
+    entry: {
+      index: './src/entry.tsx',
+      render: './src/render.tsx',
+    },
+  },
+  server: {
+    host: '0.0.0.0',
+    cors: {
+      origin: '*',
+    },
+    publicDir: [
+      {
+        name: 'www',
+        copyOnBuild: false,
+        watch: true,
+      },
+    ],
+  },
+});
diff --git a/packages/genui/a2ui-playground/src/App.tsx b/packages/genui/a2ui-playground/src/App.tsx
new file mode 100644
index 0000000000..a17502a822
--- /dev/null
+++ b/packages/genui/a2ui-playground/src/App.tsx
@@ -0,0 +1,104 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { useCallback, useEffect, useState } from 'react';
+
+import { ProtocolSwitch } from './components/ProtocolSwitch.js';
+import { AIChatPage } from './pages/AIChatPage.js';
+import { ComponentsPage } from './pages/ComponentsPage.js';
+import { DemosPage } from './pages/DemosPage.js';
+import type { ProtocolVersion } from './utils/protocol.js';
+import { DEFAULT_PROTOCOL } from './utils/protocol.js';
+
+type Tab = 'chat' | 'demos' | 'components';
+
+const TABS: { id: Tab; label: string }[] = [
+  { id: 'chat', label: 'AI Chat' },
+  { id: 'demos', label: 'Demos' },
+  { id: 'components', label: 'Components' },
+];
+
+interface Route {
+  tab: Tab;
+  componentName?: string;
+}
+
+function parseHash(hash: string): Route {
+  const cleaned = hash.replace(/^#\/?/u, '');
+  const parts = cleaned.split('/');
+  if (parts[0] === 'demos') return { tab: 'demos' };
+  if (parts[0] === 'components') {
+    return { tab: 'components', componentName: parts[1] };
+  }
+  return { tab: 'chat' };
+}
+
+export function App() {
+  const [route, setRoute] = useState<Route>(() =>
+    parseHash(window.location.hash)
+  );
+  const [protocol, setProtocol] = useState<ProtocolVersion>(DEFAULT_PROTOCOL);
+
+  useEffect(() => {
+    const onHashChange = () => {
+      setRoute(parseHash(window.location.hash));
+    };
+    window.addEventListener('hashchange', onHashChange);
+    return () => window.removeEventListener('hashchange', onHashChange);
+  }, []);
+
+  const handleTabClick = useCallback((id: Tab) => {
+    window.location.hash = `#/${id}`;
+  }, []);
+
+  const page = (() => {
+    switch (route.tab) {
+      case 'demos':
+        return <DemosPage key='demos' protocol={protocol} />;
+      case 'components':
+        return (
+          <ComponentsPage
+            key='components'
+            protocol={protocol}
+            componentName={route.componentName}
+          />
+        );
+      default:
+        return <AIChatPage key='chat' protocol={protocol} />;
+    }
+  })();
+
+  return (
+    <div className='appShell'>
+      <div className='topBar'>
+        <span className='brand'>A2UI Playground</span>
+
+        <nav className='tabNav'>
+          {TABS.map((t) => (
+            <button
+              key={t.id}
+              type='button'
+              className={route.tab === t.id
+                ? 'tabNavItem active'
+                : 'tabNavItem'}
+              onClick={() => handleTabClick(t.id)}
+            >
+              {t.label}
+            </button>
+          ))}
+        </nav>
+
+        <div className='spacer' />
+
+        <div className='protocolControl'>
+          <div className='protocolLabel'>Protocol</div>
+          <ProtocolSwitch value={protocol} onChange={setProtocol} />
+        </div>
+      </div>
+
+      <div className='appBody'>
+        {page}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/genui/a2ui-playground/src/componentCatalog.ts b/packages/genui/a2ui-playground/src/componentCatalog.ts
new file mode 100644
index 0000000000..2577abaa6c
--- /dev/null
+++ b/packages/genui/a2ui-playground/src/componentCatalog.ts
@@ -0,0 +1,328 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import type { ProtocolVersion } from './utils/protocol.js';
+
+export interface ComponentProp {
+  name: string;
+  type: string;
+  description: string;
+  default?: string;
+}
+
+export type ComponentCategory = 'Display' | 'Layout' | 'Input' | 'Data';
+
+export interface ComponentDoc {
+  name: string;
+  category: ComponentCategory;
+  description: string;
+  props: ComponentProp[];
+  usage: Record<ProtocolVersion, object>;
+}
+
+export const CATEGORIES: { id: ComponentCategory; label: string }[] = [
+  { id: 'Display', label: 'Display' },
+  { id: 'Layout', label: 'Layout' },
+  { id: 'Input', label: 'Input' },
+  { id: 'Data', label: 'Data' },
+];
+
+export const COMPONENT_CATALOG: ComponentDoc[] = [
+  {
+    name: 'Text',
+    category: 'Display',
+    description: 'Displays a text string with optional style variant.',
+    props: [
+      {
+        name: 'text',
+        type: 'TextValue',
+        description: 'Content to display',
+      },
+      {
+        name: 'usageHint',
+        type: 'string',
+        description: 'Text style variant: h1, h2, h3, body, caption',
+        default: 'body',
+      },
+    ],
+    usage: {
+      '0.9': {
+        id: 'greeting',
+        component: 'Text',
+        variant: 'h2',
+        text: 'Hello, world!',
+      },
+    },
+  },
+  {
+    name: 'Button',
+    category: 'Input',
+    description: 'An interactive button that triggers an action when pressed.',
+    props: [
+      {
+        name: 'child',
+        type: 'string',
+        description: 'ID of the child component rendered inside the button',
+      },
+      {
+        name: 'action',
+        type: 'object',
+        description: 'Action to trigger on press',
+      },
+    ],
+    usage: {
+      '0.9': {
+        id: 'submit-btn',
+        component: 'Button',
+        action: { event: { name: 'submit' } },
+        child: 'submit-btn-text',
+      },
+    },
+  },
+  {
+    name: 'Image',
+    category: 'Display',
+    description: 'Displays an image from a URL with optional dimensions.',
+    props: [
+      { name: 'src', type: 'string', description: 'Image URL' },
+      {
+        name: 'alt',
+        type: 'string',
+        description: 'Alternative text for accessibility',
+      },
+      {
+        name: 'width',
+        type: 'number',
+        description: 'Image width in logical pixels',
+      },
+      {
+        name: 'height',
+        type: 'number',
+        description: 'Image height in logical pixels',
+      },
+    ],
+    usage: {
+      '0.9': {
+        id: 'hero-image',
+        component: 'Image',
+        src: 'https://example.com/hero.png',
+        alt: 'Hero banner',
+        width: 320,
+        height: 180,
+      },
+    },
+  },
+  {
+    name: 'Divider',
+    category: 'Display',
+    description: 'A visual separator line used to divide content sections.',
+    props: [
+      {
+        name: 'direction',
+        type: 'string',
+        description: 'Divider orientation: horizontal, vertical',
+        default: 'horizontal',
+      },
+      {
+        name: 'color',
+        type: 'string',
+        description: 'Divider line color as a CSS color value',
+      },
+    ],
+    usage: {
+      '0.9': {
+        id: 'section-divider',
+        component: 'Divider',
+        direction: 'horizontal',
+        color: '#E0E0E0',
+      },
+    },
+  },
+  {
+    name: 'Card',
+    category: 'Layout',
+    description: 'A container with visual elevation or outline styling.',
+    props: [
+      {
+        name: 'child',
+        type: 'string',
+        description: 'ID of the child component rendered inside the card',
+      },
+      {
+        name: 'usageHint',
+        type: 'string',
+        description: 'Card style: elevated, outlined, filled',
+        default: 'elevated',
+      },
+    ],
+    usage: {
+      '0.9': {
+        id: 'info-card',
+        component: 'Card',
+        usageHint: 'elevated',
+        child: 'info-card-content',
+      },
+    },
+  },
+  {
+    name: 'Row',
+    category: 'Layout',
+    description:
+      'A horizontal layout container that arranges children in a row.',
+    props: [
+      {
+        name: 'children',
+        type: 'ComponentArrayReference',
+        description: 'Child components arranged horizontally',
+      },
+      {
+        name: 'alignment',
+        type: 'string',
+        description: 'Vertical alignment: start, center, end, stretch',
+        default: 'center',
+      },
+      {
+        name: 'distribution',
+        type: 'string',
+        description:
+          'Horizontal distribution: start, center, end, spaceBetween, spaceAround, spaceEvenly',
+        default: 'start',
+      },
+    ],
+    usage: {
+      '0.9': {
+        id: 'action-row',
+        component: 'Row',
+        alignment: 'center',
+        distribution: 'spaceBetween',
+        children: ['left-item', 'right-item'],
+      },
+    },
+  },
+  {
+    name: 'Column',
+    category: 'Layout',
+    description:
+      'A vertical layout container that arranges children in a column.',
+    props: [
+      {
+        name: 'children',
+        type: 'ComponentArrayReference',
+        description: 'Child components arranged vertically',
+      },
+      {
+        name: 'usageHint',
+        type: 'string',
+        description: 'Column role: root-column, group',
+        default: 'group',
+      },
+    ],
+    usage: {
+      '0.9': {
+        id: 'main-column',
+        component: 'Column',
+        usageHint: 'root-column',
+        children: ['header', 'body', 'footer'],
+      },
+    },
+  },
+  {
+    name: 'List',
+    category: 'Data',
+    description:
+      'A scrollable list that renders children or uses a template for dynamic items.',
+    props: [
+      {
+        name: 'children',
+        type: 'ComponentArrayReference',
+        description: 'Child components or template for list items',
+      },
+      {
+        name: 'template',
+        type: 'object',
+        description: 'Template for dynamic item rendering with data binding',
+      },
+    ],
+    usage: {
+      '0.9': {
+        id: 'item-list',
+        component: 'List',
+        children: ['item-1', 'item-2', 'item-3'],
+        template: {
+          dataSource: '/items',
+          component: 'Text',
+          variant: 'body',
+          text: { path: '/items/$/name' },
+        },
+      },
+    },
+  },
+  {
+    name: 'CheckBox',
+    category: 'Input',
+    description: 'A toggleable checkbox with label and action support.',
+    props: [
+      {
+        name: 'label',
+        type: 'string',
+        description: 'Label text displayed next to the checkbox',
+      },
+      {
+        name: 'checked',
+        type: 'boolean',
+        description: 'Whether the checkbox is checked',
+        default: 'false',
+      },
+      {
+        name: 'action',
+        type: 'object',
+        description: 'Action triggered when the checkbox is toggled',
+      },
+    ],
+    usage: {
+      '0.9': {
+        id: 'agree-checkbox',
+        component: 'CheckBox',
+        label: 'I agree to the terms',
+        checked: false,
+        action: { event: { name: 'toggle_agree' } },
+      },
+    },
+  },
+  {
+    name: 'RadioGroup',
+    category: 'Input',
+    description:
+      'A group of mutually exclusive radio options with selection support.',
+    props: [
+      {
+        name: 'options',
+        type: 'array',
+        description: 'List of radio options with label and value',
+      },
+      {
+        name: 'selected',
+        type: 'string',
+        description: 'Value of the currently selected option',
+      },
+      {
+        name: 'action',
+        type: 'object',
+        description: 'Action triggered when the selection changes',
+      },
+    ],
+    usage: {
+      '0.9': {
+        id: 'size-picker',
+        component: 'RadioGroup',
+        options: [
+          { label: 'Small', value: 'sm' },
+          { label: 'Medium', value: 'md' },
+          { label: 'Large', value: 'lg' },
+        ],
+        selected: 'md',
+        action: { event: { name: 'select_size' } },
+      },
+    },
+  },
+];
diff --git a/packages/genui/a2ui-playground/src/components/Chip.tsx b/packages/genui/a2ui-playground/src/components/Chip.tsx
new file mode 100644
index 0000000000..bbe41d0153
--- /dev/null
+++ b/packages/genui/a2ui-playground/src/components/Chip.tsx
@@ -0,0 +1,8 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import type React from 'react';
+
+export function Chip(props: { children: React.ReactNode }) {
+  return <span className='chip'>{props.children}</span>;
+}
diff --git a/packages/genui/a2ui-playground/src/components/MobilePreview.tsx b/packages/genui/a2ui-playground/src/components/MobilePreview.tsx
new file mode 100644
index 0000000000..6b040ef1f4
--- /dev/null
+++ b/packages/genui/a2ui-playground/src/components/MobilePreview.tsx
@@ -0,0 +1,20 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+export function MobilePreview(props: { src: string }) {
+  return (
+    <div className='phoneWrap'>
+      <div className='phoneFrame'>
+        <div className='phoneScreen'>
+          <div className='phoneStatusBar'>
+            <div className='phoneNotch' />
+          </div>
+          <iframe className='phoneIframe' title='preview' src={props.src} />
+          <div className='phoneHomeIndicator'>
+            <div className='phoneHomeBar' />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/genui/a2ui-playground/src/components/ProtocolSwitch.tsx b/packages/genui/a2ui-playground/src/components/ProtocolSwitch.tsx
new file mode 100644
index 0000000000..3d6a5f9f63
--- /dev/null
+++ b/packages/genui/a2ui-playground/src/components/ProtocolSwitch.tsx
@@ -0,0 +1,23 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import type { ProtocolVersion } from '../utils/protocol.js';
+
+export function ProtocolSwitch(props: {
+  value: ProtocolVersion;
+  onChange: (next: ProtocolVersion) => void;
+}) {
+  const { value, onChange } = props;
+  return (
+    <div className='protocolSwitch' role='group' aria-label='Protocol version'>
+      <button
+        type='button'
+        className={value === '0.9' ? 'protocolButton active' : 'protocolButton'}
+        onClick={() =>
+          onChange('0.9')}
+      >
+        v0.9
+      </button>
+    </div>
+  );
+}
diff --git a/packages/genui/a2ui-playground/src/components/QrCode.tsx b/packages/genui/a2ui-playground/src/components/QrCode.tsx
new file mode 100644
index 0000000000..897a432c36
--- /dev/null
+++ b/packages/genui/a2ui-playground/src/components/QrCode.tsx
@@ -0,0 +1,59 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { toDataURL } from 'qrcode';
+import { useEffect, useMemo, useState } from 'react';
+
+export function QrCode(props: { value: string; size?: number }) {
+  const { value, size = 144 } = props;
+  const [src, setSrc] = useState<string>('');
+
+  const options = useMemo(
+    () => ({
+      width: size,
+      margin: 1,
+      color: {
+        dark: '#111111',
+        light: '#ffffff',
+      },
+    }),
+    [size],
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+
+    void (async () => {
+      try {
+        const url = await toDataURL(value, options);
+        if (!cancelled) {
+          setSrc(url);
+        }
+      } catch {
+        if (!cancelled) {
+          setSrc('');
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [options, value]);
+
+  if (!src) {
+    return (
+      <div className='qrPlaceholder' style={{ width: size, height: size }} />
+    );
+  }
+
+  return (
+    <img
+      className='qrImage'
+      src={src}
+      width={size}
+      height={size}
+      alt='QR code'
+    />
+  );
+}
diff --git a/packages/genui/a2ui-playground/src/components/UsageSection.tsx b/packages/genui/a2ui-playground/src/components/UsageSection.tsx
new file mode 100644
index 0000000000..a99ffd2bd1
--- /dev/null
+++ b/packages/genui/a2ui-playground/src/components/UsageSection.tsx
@@ -0,0 +1,96 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+export function UsageSection() {
+  return (
+    <section className='usageSection'>
+      <h2 className='sectionTitle'>How to Use the ReactLynx A2UI Renderer</h2>
+      <div className='usageGrid' style={{ gridTemplateColumns: '1fr 1fr' }}>
+        <div className='usageCard'>
+          <h3 className='usageTitle'>Basic: Conversation Component</h3>
+          <p className='usageDesc'>
+            An out-of-the-box chat UI that handles history, input, and A2UI
+            rendering.
+          </p>
+          <pre className='codeBlock'>
+            <code>{`// Import the v0.9 protocol
+import { Conversation } from '@lynx-js/a2ui-reactlynx/0.9';
+
+export default function App() {
+  return (
+    <Conversation url="https://your-api-endpoint.com/v09/chat" />
+  );
+}`}</code>
+          </pre>
+        </div>
+
+        <div className='usageCard'>
+          <h3 className='usageTitle'>Advanced: A2UIRender and useLynxClient</h3>
+          <p className='usageDesc'>
+            Build a custom chat UI with full control over layout and state.
+          </p>
+          <pre className='codeBlock'>
+            <code>{`import { A2UIRender, useLynxClient } from '@lynx-js/a2ui-reactlynx/0.9';
+
+export function CustomChat() {
+  const { messages, sendMessage } = useLynxClient("https://api.com/chat");
+
+  return (
+    <view>
+      <scroll-view>
+        {messages.map(msg => (
+          <view key={msg.id} className={msg.role}>
+            {msg.role === 'user' ? (
+              <text>{msg.content}</text>
+            ) : (
+              <A2UIRender
+                resource={msg.resource}
+                renderFallback={() => <text>Thinking...</text>}
+              />
+            )}
+          </view>
+        ))}
+      </scroll-view>
+      <text bindtap={() => sendMessage("Hello")}>Send</text>
+    </view>
+  );
+}`}</code>
+          </pre>
+        </div>
+
+        <div className='usageCard' style={{ gridColumn: '1 / -1' }}>
+          <h3 className='usageTitle'>Single-Request Mode (No History)</h3>
+          <p className='usageDesc'>
+            Set{' '}
+            <code>
+              keepHistory: false
+            </code>{' '}
+            to fetch and render resources without persisting message history.
+          </p>
+          <pre className='codeBlock'>
+            <code>{`import { useState } from 'react';
+import { A2UIRender, useLynxClient } from '@lynx-js/a2ui-reactlynx/0.9';
+
+export function SingleRequest() {
+  const { sendMessage } = useLynxClient("https://api.com/chat", { keepHistory: false });
+  const [currentResource, setCurrentResource] = useState(null);
+
+  const handlePress = async () => {
+    // sendMessage returns a resource immediately
+    const { resource } = await sendMessage("Show me a button");
+    setCurrentResource(resource);
+  };
+
+  return (
+    <view>
+      <text bindtap={handlePress}>Request UI</text>
+      {currentResource && <A2UIRender resource={currentResource} />}
+    </view>
+  );
+}`}</code>
+          </pre>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/packages/genui/a2ui-playground/src/demos.ts b/packages/genui/a2ui-playground/src/demos.ts
new file mode 100644
index 0000000000..9bde9966c9
--- /dev/null
+++ b/packages/genui/a2ui-playground/src/demos.ts
@@ -0,0 +1,122 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import castGrid from './mock/messages/cast-grid.json';
+import citywalkList from './mock/messages/citywalk-list.json';
+import fridgeSearch from './mock/messages/fridge-search.json';
+import recs from './mock/messages/recs.json';
+import tripPlanner from './mock/messages/trip-planner.json';
+import workoutPlan from './mock/messages/workout-plan.json';
+
+function collectComponentNamesFromMessages(
+  value: unknown,
+  out: Set<string>,
+): void {
+  if (!value) return;
+
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      collectComponentNamesFromMessages(item, out);
+    }
+    return;
+  }
+
+  if (typeof value !== 'object') return;
+
+  const v = value as Record<string, unknown>;
+
+  // Standard v0.9 message: { updateComponents: { components: [...] } }
+  const updateComponents = v.updateComponents;
+  if (updateComponents && typeof updateComponents === 'object') {
+    const uc = updateComponents as Record<string, unknown>;
+    const components = uc.components;
+    if (Array.isArray(components)) {
+      for (const c of components) {
+        if (!c || typeof c !== 'object') continue;
+        const comp = (c as Record<string, unknown>).component;
+        if (typeof comp === 'string' && comp.trim() !== '') {
+          out.add(comp);
+        }
+      }
+    }
+  }
+
+  // Be resilient to wrapper shapes like { messages: [...] }.
+  if (Array.isArray(v.messages)) {
+    collectComponentNamesFromMessages(v.messages, out);
+  }
+}
+
+function tagsFromMessages(messages: unknown): string[] {
+  const out = new Set<string>();
+  collectComponentNamesFromMessages(messages, out);
+  return Array.from(out).sort((a, b) => a.localeCompare(b));
+}
+
+export interface StaticDemo {
+  id: string;
+  title: string;
+  description?: string;
+  tags: string[];
+  messages: unknown;
+}
+
+export interface DynamicPreset {
+  id: string;
+  title: string;
+  tags: string[];
+  messages: unknown;
+  actionMocks?: Record<string, unknown>;
+}
+
+export const STATIC_DEMOS: StaticDemo[] = [
+  {
+    id: 'recs',
+    title: 'Date-Night Restaurant Picks',
+    description:
+      'Three restaurant cards with images. Content updates progressively.',
+    tags: tagsFromMessages(recs),
+    messages: recs,
+  },
+  {
+    id: 'cast-grid',
+    title: 'Cast Grid Layout Demo',
+    tags: tagsFromMessages(castGrid),
+    messages: castGrid,
+  },
+  {
+    id: 'citywalk-list',
+    title: 'Weekend Citywalk Coffee Picks',
+    tags: tagsFromMessages(citywalkList),
+    messages: citywalkList,
+  },
+  {
+    id: 'fridge-search',
+    title: 'Fridge Search Results',
+    tags: tagsFromMessages(fridgeSearch),
+    messages: fridgeSearch,
+  },
+  {
+    id: 'trip-planner',
+    title: 'Trip Planner: Kyoto in 48 Hours',
+    description:
+      'A two-day itinerary streams in card by card, with each stop filled progressively.',
+    tags: tagsFromMessages(tripPlanner),
+    messages: tripPlanner,
+  },
+  {
+    id: 'workout-plan',
+    title: 'Weekly Workout Plan',
+    description:
+      'A five-day workout plan is assembled day by day through data-model updates with a shared list template.',
+    tags: tagsFromMessages(workoutPlan),
+    messages: workoutPlan,
+  },
+];
+
+export const DYNAMIC_PRESETS: DynamicPreset[] = [];
+
+export const SUPPORTED_COMPONENTS = tagsFromMessages([
+  ...STATIC_DEMOS.flatMap((d) => d.messages as unknown[]),
+  ...DYNAMIC_PRESETS.flatMap((d) => d.messages as unknown[]),
+]);
diff --git a/packages/genui/a2ui-playground/src/entry.tsx b/packages/genui/a2ui-playground/src/entry.tsx
new file mode 100644
index 0000000000..42ac1a41f7
--- /dev/null
+++ b/packages/genui/a2ui-playground/src/entry.tsx
@@ -0,0 +1,15 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import ReactDOM from 'react-dom/client';
+
+import { App } from './App.js';
+import './styles.css';
+
+const container = document.getElementById('root');
+if (!container) {
+  throw new Error('Missing #root element');
+}
+
+const root = ReactDOM.createRoot(container);
+root.render(<App />);
diff --git a/packages/genui/a2ui-playground/src/globals.d.ts b/packages/genui/a2ui-playground/src/globals.d.ts
new file mode 100644
index 0000000000..b144a08ff2
--- /dev/null
+++ b/packages/genui/a2ui-playground/src/globals.d.ts
@@ -0,0 +1,14 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+declare global {
+  const __REACT_LYNX_MOCK__: string | undefined;
+
+  interface Window {
+    __A2UI_MOCK__?: string;
+  }
+}
+
+export {};
+
+declare module '*.css' {}
diff --git a/packages/genui/a2ui-playground/src/mock/EventSource.ts b/packages/genui/a2ui-playground/src/mock/EventSource.ts
new file mode 100755
index 0000000000..53f1a55748
--- /dev/null
+++ b/packages/genui/a2ui-playground/src/mock/EventSource.ts
@@ -0,0 +1,133 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+interface MockEvent {
+  data?: string;
+  target?: MockEventSourceBase;
+  type?: string;
+}
+type Listener = (event: MockEvent) => void;
+
+type EventSourceLikeConstructor = new(url: string) => MockEventSourceBase;
+
+type EventSourceGlobal = typeof globalThis & {
+  EventSource?: EventSourceLikeConstructor;
+};
+
+/**
+ * Minimal subset of the standard `EventSource` surface used by the A2UI
+ * playground. Intentionally omitted: `onmessage`/`onerror`/`onopen` setter
+ * properties and the `message` default event type. Consumers must use
+ * `addEventListener` / `removeEventListener`.
+ */
+class MockEventSourceBase {
+  static readonly CONNECTING = 0;
+  static readonly OPEN = 1;
+  static readonly CLOSED = 2;
+
+  readyState: number = MockEventSourceBase.CONNECTING;
+
+  private listeners = new Map<string, Listener[]>();
+  private closed = false;
+
+  constructor(_url: string, private readonly sequence: unknown[]) {
+    void this.emitSequence();
+  }
+
+  private async emitSequence() {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    if (this.closed) return;
+
+    this.readyState = MockEventSourceBase.OPEN;
+    this.emit('open', {});
+
+    for (const item of this.sequence) {
+      if (this.closed) return;
+      await new Promise((resolve) => setTimeout(resolve, 10));
+      if (this.closed) return;
+      const payload = JSON.stringify(item);
+      this.emit('delta', { data: payload });
+    }
+
+    if (this.closed) return;
+    this.emit('complete', { data: undefined });
+  }
+
+  addEventListener(type: string, listener: Listener) {
+    const list = this.listeners.get(type) ?? [];
+    list.push(listener);
+    this.listeners.set(type, list);
+  }
+
+  removeEventListener(type: string, listener: Listener) {
+    const list = this.listeners.get(type);
+    if (!list) return;
+    const idx = list.indexOf(listener);
+    if (idx !== -1) list.splice(idx, 1);
+    if (list.length === 0) this.listeners.delete(type);
+  }
+
+  close() {
+    this.closed = true;
+    this.readyState = MockEventSourceBase.CLOSED;
+    this.listeners.clear();
+  }
+
+  private emit(type: string, event: MockEvent) {
+    const list = this.listeners.get(type);
+    if (!list) return;
+
+    const enriched: MockEvent = { ...event, type, target: this };
+
+    for (const listener of list) {
+      try {
+        listener(enriched);
+      } catch (error) {
+        console.error('MockEventSource listener error', error);
+      }
+    }
+  }
+}
+
+export function installMockEventSource(
+  messages: unknown[],
+  actionMocks?: Record<string, unknown[]>,
+) {
+  const defaultSequence: unknown[] = Array.isArray(messages) ? messages : [];
+
+  class MockEventSource extends MockEventSourceBase {
+    constructor(url: string) {
+      let sequence = defaultSequence;
+
+      try {
+        const urlObj = new URL(url, 'http://localhost');
+        const text = urlObj.searchParams.get('text');
+
+        // If this is an action request (contains USER_ACTION text),
+        // we should not replay the default sequence.
+        if (text?.includes('USER_ACTION:')) {
+          sequence = []; // Default to empty response for actions
+
+          if (actionMocks) {
+            for (const key of Object.keys(actionMocks)) {
+              if (text.includes(key)) {
+                sequence = actionMocks[key];
+                break;
+              }
+            }
+          }
+        }
+      } catch (e) {
+        console.warn('[MockEventSource] Failed to parse URL', url, e);
+      }
+
+      super(url, sequence);
+    }
+  }
+
+  Object.defineProperty(globalThis as EventSourceGlobal, 'EventSource', {
+    configurable: true,
+    value: MockEventSource,
+    writable: true,
+  });
+}
diff --git a/packages/genui/a2ui-playground/src/mock/messages/cast-grid.json b/packages/genui/a2ui-playground/src/mock/messages/cast-grid.json
new file mode 100644
index 0000000000..079623be47
--- /dev/null
+++ b/packages/genui/a2ui-playground/src/mock/messages/cast-grid.json
@@ -0,0 +1,151 @@
+[
+  {
+    "createSurface": {
+      "surfaceId": "default",
+      "catalogId": "demo-cast-grid"
+    }
+  },
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "root",
+          "component": "Column",
+          "align": "start",
+          "justify": "start",
+          "children": ["label", "summary", "castGrid"]
+        },
+        {
+          "id": "label",
+          "component": "Text",
+          "variant": "label",
+          "text": "AI generated answer"
+        },
+        {
+          "id": "summary",
+          "component": "Text",
+          "variant": "body",
+          "text": "Short film \"Night Notes\" is a light comedy road story. Below is a cast card demo: copy and names are placeholders, while spacing, alignment, and the stacked card layout stay consistent."
+        },
+        {
+          "id": "castGrid",
+          "component": "Column",
+          "align": "start",
+          "justify": "start",
+          "children": ["castRow-1", "castRow-2"]
+        },
+        {
+          "id": "castRow-1",
+          "component": "Row",
+          "alignment": "start",
+          "distribution": "spaceBetween",
+          "children": ["cast-1", "cast-2", "cast-3"]
+        },
+        {
+          "id": "castRow-2",
+          "component": "Row",
+          "alignment": "start",
+          "distribution": "spaceBetween",
+          "children": ["cast-4", "cast-5", "cast-6"]
+        },
+
+        {
+          "id": "cast-1",
+          "component": "Column",
+          "align": "start",
+          "justify": "start",
+          "weight": 1,
+          "children": ["cast-1-img", "cast-1-name", "cast-1-role"]
+        },
+        {
+          "id": "cast-1-img",
+          "component": "Image",
+          "url": "https://picsum.photos/seed/a2ui-cast-1/96/120"
+        },
+        { "id": "cast-1-name", "component": "Text", "variant": "h5", "text": "Lin Xia" },
+        { "id": "cast-1-role", "component": "Text", "variant": "caption", "text": "as The Pathfinder" },
+
+        {
+          "id": "cast-2",
+          "component": "Column",
+          "align": "start",
+          "justify": "start",
+          "weight": 1,
+          "children": ["cast-2-img", "cast-2-name", "cast-2-role"]
+        },
+        {
+          "id": "cast-2-img",
+          "component": "Image",
+          "url": "https://picsum.photos/seed/a2ui-cast-2/96/120"
+        },
+        { "id": "cast-2-name", "component": "Text", "variant": "h5", "text": "Xu Shuo" },
+        { "id": "cast-2-role", "component": "Text", "variant": "caption", "text": "as The Chronicler" },
+
+        {
+          "id": "cast-3",
+          "component": "Column",
+          "align": "start",
+          "justify": "start",
+          "weight": 1,
+          "children": ["cast-3-img", "cast-3-name", "cast-3-role"]
+        },
+        {
+          "id": "cast-3-img",
+          "component": "Image",
+          "url": "https://picsum.photos/seed/a2ui-cast-3/96/120"
+        },
+        { "id": "cast-3-name", "component": "Text", "variant": "h5", "text": "Qiao Ran" },
+        { "id": "cast-3-role", "component": "Text", "variant": "caption", "text": "as The Guide" },
+
+        {
+          "id": "cast-4",
+          "component": "Column",
+          "align": "start",
+          "justify": "start",
+          "weight": 1,
+          "children": ["cast-4-img", "cast-4-name", "cast-4-role"]
+        },
+        {
+          "id": "cast-4-img",
+          "component": "Image",
+          "url": "https://picsum.photos/seed/a2ui-cast-4/96/120"
+        },
+        { "id": "cast-4-name", "component": "Text", "variant": "h5", "text": "He Yu" },
+        { "id": "cast-4-role", "component": "Text", "variant": "caption", "text": "as The Composer" },
+
+        {
+          "id": "cast-5",
+          "component": "Column",
+          "align": "start",
+          "justify": "start",
+          "weight": 1,
+          "children": ["cast-5-img", "cast-5-name", "cast-5-role"]
+        },
+        {
+          "id": "cast-5-img",
+          "component": "Image",
+          "url": "https://picsum.photos/seed/a2ui-cast-5/96/120"
+        },
+        { "id": "cast-5-name", "component": "Text", "variant": "h5", "text": "Tang Yi" },
+        { "id": "cast-5-role", "component": "Text", "variant": "caption", "text": "as The Courier" },
+
+        {
+          "id": "cast-6",
+          "component": "Column",
+          "align": "start",
+          "justify": "start",
+          "weight": 1,
+          "children": ["cast-6-img", "cast-6-name", "cast-6-role"]
+        },
+        {
+          "id": "cast-6-img",
+          "component": "Image",
+          "url": "https://picsum.photos/seed/a2ui-cast-6/96/120"
+        },
+        { "id": "cast-6-name", "component": "Text", "variant": "h5", "text": "Zhou Ning" },
+        { "id": "cast-6-role", "component": "Text", "variant": "caption", "text": "as The Fixer" }
+      ]
+    }
+  }
+]
diff --git a/packages/genui/a2ui-playground/src/mock/messages/citywalk-list.json b/packages/genui/a2ui-playground/src/mock/messages/citywalk-list.json
new file mode 100644
index 0000000000..47cd9bc615
--- /dev/null
+++ b/packages/genui/a2ui-playground/src/mock/messages/citywalk-list.json
@@ -0,0 +1,254 @@
+[
+  {
+    "createSurface": {
+      "surfaceId": "default",
+      "catalogId": "demo-streaming-list"
+    }
+  },
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "root",
+          "component": "Column",
+          "children": ["header", "answer", "divider", "spotsList"]
+        },
+        {
+          "id": "header",
+          "component": "Text",
+          "variant": "h2",
+          "text": "AI Answer: Weekend Citywalk Coffee Picks"
+        },
+        {
+          "id": "answer",
+          "component": "Text",
+          "variant": "body",
+          "text": "Generating..."
+        },
+        {
+          "id": "divider",
+          "component": "Divider",
+          "axis": "horizontal"
+        },
+        {
+          "id": "spotsList",
+          "component": "List",
+          "direction": "vertical",
+          "children": {
+            "path": "/spots",
+            "componentId": "spotCard"
+          }
+        },
+        {
+          "id": "spotCard",
+          "component": "Card",
+          "child": "spotCardBody"
+        },
+        {
+          "id": "spotCardBody",
+          "component": "Column",
+          "children": ["spotImage", "spotTitle", "spotMeta", "spotReason"]
+        },
+        {
+          "id": "spotImage",
+          "component": "Image",
+          "url": {
+            "path": "cover"
+          }
+        },
+        {
+          "id": "spotTitle",
+          "component": "Text",
+          "variant": "h4",
+          "text": {
+            "path": "name"
+          }
+        },
+        {
+          "id": "spotMeta",
+          "component": "Text",
+          "variant": "caption",
+          "text": {
+            "path": "meta"
+          }
+        },
+        {
+          "id": "spotReason",
+          "component": "Text",
+          "variant": "body",
+          "text": {
+            "path": "reason"
+          }
+        }
+      ]
+    }
+  },
+  {
+    "updateDataModel": {
+      "surfaceId": "default",
+      "path": "/spots",
+      "value": []
+    }
+  },
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "answer",
+          "component": "Text",
+          "variant": "body",
+          "text": "I will build a 3-stop coffee route for a relaxed weekend citywalk, balancing walking distance, seating comfort, and visual variety."
+        }
+      ]
+    }
+  },
+  {
+    "updateDataModel": {
+      "surfaceId": "default",
+      "path": "/spots",
+      "value": [
+        {
+          "key": "rooftop-brew",
+          "cover": "https://picsum.photos/seed/a2ui-rooftop-brew/640/360",
+          "name": "Rooftop Brew Room",
+          "meta": "Checking distance and seating notes...",
+          "reason": "Drafting the first stop..."
+        }
+      ]
+    }
+  },
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "answer",
+          "component": "Text",
+          "variant": "body",
+          "text": "Stop 1 is ready. I started with a bright, easy entry point so the list feels strong from the first card."
+        }
+      ]
+    }
+  },
+  {
+    "updateDataModel": {
+      "surfaceId": "default",
+      "path": "/spots",
+      "value": [
+        {
+          "key": "rooftop-brew",
+          "cover": "https://picsum.photos/seed/a2ui-rooftop-brew/640/360",
+          "name": "Rooftop Brew Room",
+          "meta": "8 min walk from the start · hand brew · bright window seats",
+          "reason": "Best for the first stop of the route. The rooftop corner and slower hand-brew pace make it easy to settle into the day without feeling rushed."
+        },
+        {
+          "key": "corner-canvas",
+          "cover": "https://picsum.photos/seed/a2ui-corner-canvas/640/360",
+          "name": "Corner Canvas Lab",
+          "meta": "Checking mid-route fit...",
+          "reason": "Drafting the second stop..."
+        }
+      ]
+    }
+  },
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "answer",
+          "component": "Text",
+          "variant": "body",
+          "text": "Two cards are in place now: a calm opening stop and a larger cafe for the middle of the route."
+        }
+      ]
+    }
+  },
+  {
+    "updateDataModel": {
+      "surfaceId": "default",
+      "path": "/spots",
+      "value": [
+        {
+          "key": "rooftop-brew",
+          "cover": "https://picsum.photos/seed/a2ui-rooftop-brew/640/360",
+          "name": "Rooftop Brew Room",
+          "meta": "8 min walk from the start · hand brew · bright window seats",
+          "reason": "Best for the first stop of the route. The rooftop corner and slower hand-brew pace make it easy to settle into the day without feeling rushed."
+        },
+        {
+          "key": "corner-canvas",
+          "cover": "https://picsum.photos/seed/a2ui-corner-canvas/640/360",
+          "name": "Corner Canvas Lab",
+          "meta": "15 min from stop 1 · signature latte · sketch-friendly tables",
+          "reason": "A good mid-route refill. The larger shared tables and soft lighting support a longer pause when the case needs a stronger browse-and-rest moment."
+        },
+        {
+          "key": "late-sun",
+          "cover": "https://picsum.photos/seed/a2ui-late-sun/640/360",
+          "name": "Late Sun Roastery",
+          "meta": "Checking end-of-route timing...",
+          "reason": "Drafting the final stop..."
+        }
+      ]
+    }
+  },
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "answer",
+          "component": "Text",
+          "variant": "body",
+          "text": "The last card is loading in. I am keeping the route compact so the stream ends with a clear closeout option near transit."
+        }
+      ]
+    }
+  },
+  {
+    "updateDataModel": {
+      "surfaceId": "default",
+      "path": "/spots",
+      "value": [
+        {
+          "key": "rooftop-brew",
+          "cover": "https://picsum.photos/seed/a2ui-rooftop-brew/640/360",
+          "name": "Rooftop Brew Room",
+          "meta": "8 min walk from the start · hand brew · bright window seats",
+          "reason": "Best for the first stop of the route. The rooftop corner and slower hand-brew pace make it easy to settle into the day without feeling rushed."
+        },
+        {
+          "key": "corner-canvas",
+          "cover": "https://picsum.photos/seed/a2ui-corner-canvas/640/360",
+          "name": "Corner Canvas Lab",
+          "meta": "15 min from stop 1 · signature latte · sketch-friendly tables",
+          "reason": "A good mid-route refill. The larger shared tables and soft lighting support a longer pause when the case needs a stronger browse-and-rest moment."
+        },
+        {
+          "key": "late-sun",
+          "cover": "https://picsum.photos/seed/a2ui-late-sun/640/360",
+          "name": "Late Sun Roastery",
+          "meta": "6 min from the subway return point · espresso tonic · sunset-facing stools",
+          "reason": "Best as the final stop. It keeps the route easy to exit from and ends the list with a stronger visual moment for the stream."
+        }
+      ]
+    }
+  },
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "answer",
+          "component": "Text",
+          "variant": "body",
+          "text": "All 3 stops are ready: bright start, roomy middle break, and a compact sunset finish. This case now shows a text stream above a progressively growing List in the middle."
+        }
+      ]
+    }
+  }
+]
diff --git a/packages/genui/a2ui-playground/src/mock/messages/fridge-search.json b/packages/genui/a2ui-playground/src/mock/messages/fridge-search.json
new file mode 100644
index 0000000000..9ea3cb9aaa
--- /dev/null
+++ b/packages/genui/a2ui-playground/src/mock/messages/fridge-search.json
@@ -0,0 +1,400 @@
+[
+  {
+    "createSurface": {
+      "surfaceId": "default",
+      "catalogId": "demo-fridge-search"
+    }
+  },
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "root",
+          "component": "Column",
+          "align": "stretch",
+          "justify": "start",
+          "children": ["header", "statusBar", "productList"]
+        },
+        {
+          "id": "header",
+          "component": "Text",
+          "variant": "h3",
+          "text": "< Refrigerators"
+        },
+        {
+          "id": "statusBar",
+          "component": "Card",
+          "child": "statusBarText"
+        },
+        {
+          "id": "statusBarText",
+          "component": "Text",
+          "variant": "body",
+          "text": "Searching..."
+        },
+        {
+          "id": "productList",
+          "component": "Column",
+          "align": "stretch",
+          "justify": "start",
+          "children": []
+        }
+      ]
+    }
+  },
+
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "statusBarText",
+          "component": "Text",
+          "variant": "body",
+          "text": "Completed search across 200+ articles & 80k+ products   v"
+        }
+      ]
+    }
+  },
+
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "productList",
+          "component": "Column",
+          "align": "stretch",
+          "children": ["product-1"]
+        },
+        { "id": "product-1", "component": "Card", "child": "product-1-body" },
+        {
+          "id": "product-1-body",
+          "component": "Column",
+          "align": "stretch",
+          "children": ["product-1-main", "product-1-tags"]
+        },
+        {
+          "id": "product-1-main",
+          "component": "Row",
+          "alignment": "start",
+          "distribution": "start",
+          "children": ["product-1-img", "product-1-info"]
+        },
+        {
+          "id": "product-1-img",
+          "component": "Image",
+          "weight": 2,
+          "url": "https://picsum.photos/seed/a2ui-fridge-1/240/240"
+        },
+        {
+          "id": "product-1-info",
+          "component": "Column",
+          "align": "start",
+          "justify": "start",
+          "weight": 5,
+          "children": [
+            "product-1-title",
+            "product-1-price",
+            "product-1-promo",
+            "product-1-store"
+          ]
+        },
+        { "id": "product-1-title", "component": "Text", "variant": "body", "text": "Loading..." },
+        { "id": "product-1-price", "component": "Text", "variant": "body", "text": "" },
+        { "id": "product-1-promo", "component": "Text", "variant": "caption", "text": "" },
+        { "id": "product-1-store", "component": "Text", "variant": "caption", "text": "" },
+        { "id": "product-1-tags", "component": "Text", "variant": "caption", "text": "" }
+      ]
+    }
+  },
+
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "product-1-title",
+          "component": "Text",
+          "variant": "h5",
+          "text": "Siemens 481L Frost-Free French-Door Fridge"
+        },
+        { "id": "product-1-price", "component": "Text", "variant": "h4", "text": "$399  20k+ sold" },
+        {
+          "id": "product-1-promo",
+          "component": "Text",
+          "variant": "caption",
+          "text": "$40 off over $570  ·  0% APR 3mo  ·  2-day delivery"
+        },
+        {
+          "id": "product-1-store",
+          "component": "Text",
+          "variant": "caption",
+          "text": "5-year store  ·  Siemens Flagship  ·  Visit ›"
+        },
+        {
+          "id": "product-1-tags",
+          "component": "Text",
+          "variant": "caption",
+          "text": "+ 90x80x184cm large capacity   + AI temp control   + 10-year warranty"
+        }
+      ]
+    }
+  },
+
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "productList",
+          "component": "Column",
+          "align": "stretch",
+          "children": ["product-1", "product-2"]
+        },
+        { "id": "product-2", "component": "Card", "child": "product-2-body" },
+        {
+          "id": "product-2-body",
+          "component": "Column",
+          "align": "stretch",
+          "children": ["product-2-main", "product-2-tags"]
+        },
+        {
+          "id": "product-2-main",
+          "component": "Row",
+          "alignment": "start",
+          "distribution": "start",
+          "children": ["product-2-img", "product-2-info"]
+        },
+        {
+          "id": "product-2-img",
+          "component": "Image",
+          "weight": 2,
+          "url": "https://picsum.photos/seed/a2ui-fridge-2/240/240"
+        },
+        {
+          "id": "product-2-info",
+          "component": "Column",
+          "align": "start",
+          "justify": "start",
+          "weight": 5,
+          "children": [
+            "product-2-title",
+            "product-2-price",
+            "product-2-promo",
+            "product-2-store"
+          ]
+        },
+        { "id": "product-2-title", "component": "Text", "variant": "body", "text": "Loading..." },
+        { "id": "product-2-price", "component": "Text", "variant": "body", "text": "" },
+        { "id": "product-2-promo", "component": "Text", "variant": "caption", "text": "" },
+        { "id": "product-2-store", "component": "Text", "variant": "caption", "text": "" },
+        { "id": "product-2-tags", "component": "Text", "variant": "caption", "text": "" }
+      ]
+    }
+  },
+
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "product-2-title",
+          "component": "Text",
+          "variant": "h5",
+          "text": "New! Hualing 574L Built-in Double-Door Fridge"
+        },
+        { "id": "product-2-price", "component": "Text", "variant": "h4", "text": "$769  20k+ sold" },
+        {
+          "id": "product-2-promo",
+          "component": "Text",
+          "variant": "caption",
+          "text": "Gov. subsidy  ·  Gov. subsidy  ·  Free installation"
+        },
+        {
+          "id": "product-2-store",
+          "component": "Text",
+          "variant": "caption",
+          "text": "Hualing Flagship Store  ·  Visit ›"
+        },
+        {
+          "id": "product-2-tags",
+          "component": "Text",
+          "variant": "caption",
+          "text": "+ Seamless cabinet fit   + Ultra-thin 60cm   + Dorm-friendly"
+        }
+      ]
+    }
+  },
+
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "productList",
+          "component": "Column",
+          "align": "stretch",
+          "children": ["product-1", "product-2", "product-3"]
+        },
+        { "id": "product-3", "component": "Card", "child": "product-3-body" },
+        {
+          "id": "product-3-body",
+          "component": "Column",
+          "align": "stretch",
+          "children": ["product-3-main", "product-3-tags"]
+        },
+        {
+          "id": "product-3-main",
+          "component": "Row",
+          "alignment": "start",
+          "distribution": "start",
+          "children": ["product-3-img", "product-3-info"]
+        },
+        {
+          "id": "product-3-img",
+          "component": "Image",
+          "weight": 2,
+          "url": "https://picsum.photos/seed/a2ui-fridge-3/240/240"
+        },
+        {
+          "id": "product-3-info",
+          "component": "Column",
+          "align": "start",
+          "justify": "start",
+          "weight": 5,
+          "children": [
+            "product-3-title",
+            "product-3-price",
+            "product-3-promo",
+            "product-3-store"
+          ]
+        },
+        { "id": "product-3-title", "component": "Text", "variant": "body", "text": "Loading..." },
+        { "id": "product-3-price", "component": "Text", "variant": "body", "text": "" },
+        { "id": "product-3-promo", "component": "Text", "variant": "caption", "text": "" },
+        { "id": "product-3-store", "component": "Text", "variant": "caption", "text": "" },
+        { "id": "product-3-tags", "component": "Text", "variant": "caption", "text": "" }
+      ]
+    }
+  },
+
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "product-3-title",
+          "component": "Text",
+          "variant": "h5",
+          "text": "Haier 485L Double-Door Household Fridge"
+        },
+        { "id": "product-3-price", "component": "Text", "variant": "h4", "text": "$659  20k+ sold" },
+        {
+          "id": "product-3-promo",
+          "component": "Text",
+          "variant": "caption",
+          "text": "$40 off over $570  ·  0% APR 3mo  ·  2-day delivery"
+        },
+        {
+          "id": "product-3-store",
+          "component": "Text",
+          "variant": "caption",
+          "text": "100k fans  ·  Haier Flagship  ·  Visit ›"
+        },
+        {
+          "id": "product-3-tags",
+          "component": "Text",
+          "variant": "caption",
+          "text": "+ Multi-zone temp   + Dry/wet storage   + Voice unlock"
+        }
+      ]
+    }
+  },
+
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "productList",
+          "component": "Column",
+          "align": "stretch",
+          "children": ["product-1", "product-2", "product-3", "product-4"]
+        },
+        { "id": "product-4", "component": "Card", "child": "product-4-body" },
+        {
+          "id": "product-4-body",
+          "component": "Column",
+          "align": "stretch",
+          "children": ["product-4-main", "product-4-tags"]
+        },
+        {
+          "id": "product-4-main",
+          "component": "Row",
+          "alignment": "start",
+          "distribution": "start",
+          "children": ["product-4-img", "product-4-info"]
+        },
+        {
+          "id": "product-4-img",
+          "component": "Image",
+          "weight": 2,
+          "url": "https://picsum.photos/seed/a2ui-fridge-4/240/240"
+        },
+        {
+          "id": "product-4-info",
+          "component": "Column",
+          "align": "start",
+          "justify": "start",
+          "weight": 5,
+          "children": [
+            "product-4-title",
+            "product-4-price",
+            "product-4-promo",
+            "product-4-store"
+          ]
+        },
+        { "id": "product-4-title", "component": "Text", "variant": "body", "text": "Loading..." },
+        { "id": "product-4-price", "component": "Text", "variant": "body", "text": "" },
+        { "id": "product-4-promo", "component": "Text", "variant": "caption", "text": "" },
+        { "id": "product-4-store", "component": "Text", "variant": "caption", "text": "" },
+        { "id": "product-4-tags", "component": "Text", "variant": "caption", "text": "" }
+      ]
+    }
+  },
+
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "product-4-title",
+          "component": "Text",
+          "variant": "h5",
+          "text": "Midea 550L Frost-Free French-Door Fridge"
+        },
+        { "id": "product-4-price", "component": "Text", "variant": "h4", "text": "$469  20k+ sold" },
+        {
+          "id": "product-4-promo",
+          "component": "Text",
+          "variant": "caption",
+          "text": "Gov. subsidy  ·  Gov. subsidy  ·  Free installation"
+        },
+        {
+          "id": "product-4-store",
+          "component": "Text",
+          "variant": "caption",
+          "text": "Midea Flagship Store  ·  Visit ›"
+        },
+        {
+          "id": "product-4-tags",
+          "component": "Text",
+          "variant": "caption",
+          "text": "+ Energy Class A   + Frost-free   + 10-min quick ice"
+        }
+      ]
+    }
+  }
+]
diff --git a/packages/genui/a2ui-playground/src/mock/messages/recs.json b/packages/genui/a2ui-playground/src/mock/messages/recs.json
new file mode 100644
index 0000000000..1718293656
--- /dev/null
+++ b/packages/genui/a2ui-playground/src/mock/messages/recs.json
@@ -0,0 +1,208 @@
+[
+  {
+    "createSurface": {
+      "surfaceId": "default",
+      "catalogId": "demo-streaming"
+    }
+  },
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "root",
+          "component": "Column",
+          "children": ["header", "answer", "divider", "recs"]
+        },
+        {
+          "id": "header",
+          "component": "Text",
+          "variant": "h2",
+          "text": "Recommendations: Date-Night Dining Ideas"
+        },
+        {
+          "id": "answer",
+          "component": "Text",
+          "variant": "body",
+          "text": "Generating..."
+        },
+        {
+          "id": "divider",
+          "component": "Divider",
+          "axis": "horizontal"
+        },
+        {
+          "id": "recs",
+          "component": "Column",
+          "children": []
+        }
+      ]
+    }
+  },
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "answer",
+          "component": "Text",
+          "variant": "body",
+          "text": "I'll suggest 3 options with different vibes based on atmosphere, food, and distance."
+        }
+      ]
+    }
+  },
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "answer",
+          "component": "Text",
+          "variant": "body",
+          "text": "I'll suggest 3 options with different vibes based on atmosphere, food, and distance.\nFirst pick (night-view vibe)..."
+        }
+      ]
+    }
+  },
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        { "id": "recs", "component": "Column", "children": ["recCard-1"] },
+        { "id": "recCard-1", "component": "Card", "child": "recCard-1-body" },
+        {
+          "id": "recCard-1-body",
+          "component": "Column",
+          "children": ["recCard-1-img", "recCard-1-text"]
+        },
+        {
+          "id": "recCard-1-img",
+          "component": "Image",
+          "url": "https://picsum.photos/seed/a2ui-moon/640/360"
+        },
+        {
+          "id": "recCard-1-text",
+          "component": "Text",
+          "variant": "body",
+          "text": "1. Moonlight Terrace\nFilling in details..."
+        }
+      ]
+    }
+  },
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "recCard-1-text",
+          "component": "Text",
+          "variant": "body",
+          "text": "1. Moonlight Terrace\nRating 4.9 · Avg 168 · 1.2 km\nHighlight: window-side night view, soft lighting, great for a slow chat.\nTip: ask for a window table; desserts are a standout."
+        },
+        {
+          "id": "answer",
+          "component": "Text",
+          "variant": "body",
+          "text": "I'll suggest 3 options with different vibes based on atmosphere, food, and distance.\n1/3 ready: night-view vibe.\nNext: a more private option..."
+        }
+      ]
+    }
+  },
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "recs",
+          "component": "Column",
+          "children": ["recCard-1", "recCard-2"]
+        },
+        { "id": "recCard-2", "component": "Card", "child": "recCard-2-body" },
+        {
+          "id": "recCard-2-body",
+          "component": "Column",
+          "children": ["recCard-2-img", "recCard-2-text"]
+        },
+        {
+          "id": "recCard-2-img",
+          "component": "Image",
+          "url": "https://picsum.photos/seed/a2ui-pine/640/360"
+        },
+        {
+          "id": "recCard-2-text",
+          "component": "Text",
+          "variant": "body",
+          "text": "2. Pinewood Bistro\nFilling in details..."
+        }
+      ]
+    }
+  },
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "recCard-2-text",
+          "component": "Text",
+          "variant": "body",
+          "text": "2. Pinewood Bistro\nRating 4.7 · Avg 128 · 2.0 km\nHighlight: spacious seating and private rooms for a more intimate talk.\nTip: a set menu is easiest; avoid the 7pm rush."
+        },
+        {
+          "id": "answer",
+          "component": "Text",
+          "variant": "body",
+          "text": "I'll suggest 3 options with different vibes based on atmosphere, food, and distance.\n2/3 ready: night-view + private.\nLast one: relaxed and easygoing..."
+        }
+      ]
+    }
+  },
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "recs",
+          "component": "Column",
+          "children": ["recCard-1", "recCard-2", "recCard-3"]
+        },
+        { "id": "recCard-3", "component": "Card", "child": "recCard-3-body" },
+        {
+          "id": "recCard-3-body",
+          "component": "Column",
+          "children": ["recCard-3-img", "recCard-3-text"]
+        },
+        {
+          "id": "recCard-3-img",
+          "component": "Image",
+          "url": "https://picsum.photos/seed/a2ui-breeze/640/360"
+        },
+        {
+          "id": "recCard-3-text",
+          "component": "Text",
+          "variant": "body",
+          "text": "3. Sea Breeze Kitchen\nFilling in details..."
+        }
+      ]
+    }
+  },
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "recCard-3-text",
+          "component": "Text",
+          "variant": "body",
+          "text": "3. Sea Breeze Kitchen\nRating 4.6 · Avg 98 · 0.8 km\nHighlight: casual vibe, great for a stroll before or after dinner.\nTip: sit near the outside; shareable small plates work well."
+        },
+        {
+          "id": "answer",
+          "component": "Text",
+          "variant": "body",
+          "text": "I'll suggest 3 options with different vibes based on atmosphere, food, and distance.\n3/3 ready: night view / private / casual.\nWhich vibe do you prefer? I can refine by budget and area."
+        }
+      ]
+    }
+  }
+]
diff --git a/packages/genui/a2ui-playground/src/mock/messages/trip-planner.json b/packages/genui/a2ui-playground/src/mock/messages/trip-planner.json
new file mode 100644
index 0000000000..3262b0eaad
--- /dev/null
+++ b/packages/genui/a2ui-playground/src/mock/messages/trip-planner.json
@@ -0,0 +1,373 @@
+[
+  {
+    "createSurface": {
+      "surfaceId": "default",
+      "catalogId": "demo-trip-planner"
+    }
+  },
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "root",
+          "component": "Column",
+          "align": "stretch",
+          "justify": "start",
+          "children": ["header", "summary", "divider", "itinerary"]
+        },
+        {
+          "id": "header",
+          "component": "Text",
+          "variant": "h2",
+          "text": "Trip Planner: Kyoto in 48 Hours"
+        },
+        {
+          "id": "summary",
+          "component": "Text",
+          "variant": "body",
+          "text": "Drafting a two-day route..."
+        },
+        {
+          "id": "divider",
+          "component": "Divider",
+          "axis": "horizontal"
+        },
+        {
+          "id": "itinerary",
+          "component": "Column",
+          "align": "stretch",
+          "justify": "start",
+          "children": []
+        }
+      ]
+    }
+  },
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "summary",
+          "component": "Text",
+          "variant": "body",
+          "text": "I'll balance temples, gardens, and food across two days so mornings stay calm and evenings finish near dinner spots."
+        }
+      ]
+    }
+  },
+
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "itinerary",
+          "component": "Column",
+          "align": "stretch",
+          "children": ["day1"]
+        },
+        { "id": "day1", "component": "Card", "child": "day1-body" },
+        {
+          "id": "day1-body",
+          "component": "Column",
+          "align": "stretch",
+          "children": ["day1-header", "day1-cover", "day1-stops"]
+        },
+        {
+          "id": "day1-header",
+          "component": "Row",
+          "alignment": "center",
+          "distribution": "spaceBetween",
+          "children": ["day1-title", "day1-weather"]
+        },
+        { "id": "day1-title", "component": "Text", "variant": "h4", "text": "Day 1 · East Kyoto" },
+        { "id": "day1-weather", "component": "Text", "variant": "caption", "text": "Preparing..." },
+        {
+          "id": "day1-cover",
+          "component": "Image",
+          "url": "https://picsum.photos/seed/a2ui-kyoto-day1/640/280"
+        },
+        {
+          "id": "day1-stops",
+          "component": "Column",
+          "align": "stretch",
+          "children": []
+        }
+      ]
+    }
+  },
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        { "id": "day1-weather", "component": "Text", "variant": "caption", "text": "Sunny · 22°C · light breeze" }
+      ]
+    }
+  },
+
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "day1-stops",
+          "component": "Column",
+          "align": "stretch",
+          "children": ["d1-stop1"]
+        },
+        {
+          "id": "d1-stop1",
+          "component": "Row",
+          "alignment": "start",
+          "distribution": "start",
+          "children": ["d1-stop1-time", "d1-stop1-info"]
+        },
+        { "id": "d1-stop1-time", "component": "Text", "variant": "label", "weight": 2, "text": "08:30" },
+        {
+          "id": "d1-stop1-info",
+          "component": "Column",
+          "align": "start",
+          "weight": 7,
+          "children": ["d1-stop1-title", "d1-stop1-desc"]
+        },
+        { "id": "d1-stop1-title", "component": "Text", "variant": "h5", "text": "Kiyomizu-dera" },
+        { "id": "d1-stop1-desc", "component": "Text", "variant": "caption", "text": "Fetching notes..." }
+      ]
+    }
+  },
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "d1-stop1-desc",
+          "component": "Text",
+          "variant": "caption",
+          "text": "Wooden terrace over the valley. Arrive early to beat the crowds and catch clean light for photos."
+        }
+      ]
+    }
+  },
+
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "day1-stops",
+          "component": "Column",
+          "align": "stretch",
+          "children": ["d1-stop1", "d1-stop2"]
+        },
+        {
+          "id": "d1-stop2",
+          "component": "Row",
+          "alignment": "start",
+          "distribution": "start",
+          "children": ["d1-stop2-time", "d1-stop2-info"]
+        },
+        { "id": "d1-stop2-time", "component": "Text", "variant": "label", "weight": 2, "text": "11:00" },
+        {
+          "id": "d1-stop2-info",
+          "component": "Column",
+          "align": "start",
+          "weight": 7,
+          "children": ["d1-stop2-title", "d1-stop2-desc"]
+        },
+        { "id": "d1-stop2-title", "component": "Text", "variant": "h5", "text": "Philosopher's Path" },
+        {
+          "id": "d1-stop2-desc",
+          "component": "Text",
+          "variant": "caption",
+          "text": "A quiet canal walk lined with cherry trees. Pair it with a matcha stop halfway through."
+        }
+      ]
+    }
+  },
+
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "day1-stops",
+          "component": "Column",
+          "align": "stretch",
+          "children": ["d1-stop1", "d1-stop2", "d1-stop3"]
+        },
+        {
+          "id": "d1-stop3",
+          "component": "Row",
+          "alignment": "start",
+          "distribution": "start",
+          "children": ["d1-stop3-time", "d1-stop3-info"]
+        },
+        { "id": "d1-stop3-time", "component": "Text", "variant": "label", "weight": 2, "text": "18:30" },
+        {
+          "id": "d1-stop3-info",
+          "component": "Column",
+          "align": "start",
+          "weight": 7,
+          "children": ["d1-stop3-title", "d1-stop3-desc"]
+        },
+        { "id": "d1-stop3-title", "component": "Text", "variant": "h5", "text": "Pontocho Alley Dinner" },
+        {
+          "id": "d1-stop3-desc",
+          "component": "Text",
+          "variant": "caption",
+          "text": "Lantern-lit alley by the river. Pick a small counter spot for seasonal kaiseki."
+        }
+      ]
+    }
+  },
+
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "itinerary",
+          "component": "Column",
+          "align": "stretch",
+          "children": ["day1", "day2"]
+        },
+        { "id": "day2", "component": "Card", "child": "day2-body" },
+        {
+          "id": "day2-body",
+          "component": "Column",
+          "align": "stretch",
+          "children": ["day2-header", "day2-cover", "day2-stops"]
+        },
+        {
+          "id": "day2-header",
+          "component": "Row",
+          "alignment": "center",
+          "distribution": "spaceBetween",
+          "children": ["day2-title", "day2-weather"]
+        },
+        { "id": "day2-title", "component": "Text", "variant": "h4", "text": "Day 2 · Arashiyama" },
+        { "id": "day2-weather", "component": "Text", "variant": "caption", "text": "Cloudy · 20°C · cool morning" },
+        {
+          "id": "day2-cover",
+          "component": "Image",
+          "url": "https://picsum.photos/seed/a2ui-kyoto-day2/640/280"
+        },
+        {
+          "id": "day2-stops",
+          "component": "Column",
+          "align": "stretch",
+          "children": []
+        }
+      ]
+    }
+  },
+
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "day2-stops",
+          "component": "Column",
+          "align": "stretch",
+          "children": ["d2-stop1"]
+        },
+        {
+          "id": "d2-stop1",
+          "component": "Row",
+          "alignment": "start",
+          "distribution": "start",
+          "children": ["d2-stop1-time", "d2-stop1-info"]
+        },
+        { "id": "d2-stop1-time", "component": "Text", "variant": "label", "weight": 2, "text": "09:00" },
+        {
+          "id": "d2-stop1-info",
+          "component": "Column",
+          "align": "start",
+          "weight": 7,
+          "children": ["d2-stop1-title", "d2-stop1-desc"]
+        },
+        { "id": "d2-stop1-title", "component": "Text", "variant": "h5", "text": "Bamboo Grove" },
+        {
+          "id": "d2-stop1-desc",
+          "component": "Text",
+          "variant": "caption",
+          "text": "Walk the grove path before tour buses arrive. The sound of the bamboo is the real reason to come."
+        }
+      ]
+    }
+  },
+
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "day2-stops",
+          "component": "Column",
+          "align": "stretch",
+          "children": ["d2-stop1", "d2-stop2"]
+        },
+        {
+          "id": "d2-stop2",
+          "component": "Row",
+          "alignment": "start",
+          "distribution": "start",
+          "children": ["d2-stop2-time", "d2-stop2-info"]
+        },
+        { "id": "d2-stop2-time", "component": "Text", "variant": "label", "weight": 2, "text": "12:30" },
+        {
+          "id": "d2-stop2-info",
+          "component": "Column",
+          "align": "start",
+          "weight": 7,
+          "children": ["d2-stop2-title", "d2-stop2-desc"]
+        },
+        { "id": "d2-stop2-title", "component": "Text", "variant": "h5", "text": "Riverside Soba Lunch" },
+        {
+          "id": "d2-stop2-desc",
+          "component": "Text",
+          "variant": "caption",
+          "text": "Handmade soba with a view of the Hozu River. Keep lunch light before the hillside walk."
+        }
+      ]
+    }
+  },
+
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "day2-stops",
+          "component": "Column",
+          "align": "stretch",
+          "children": ["d2-stop1", "d2-stop2", "d2-stop3"]
+        },
+        {
+          "id": "d2-stop3",
+          "component": "Row",
+          "alignment": "start",
+          "distribution": "start",
+          "children": ["d2-stop3-time", "d2-stop3-info"]
+        },
+        { "id": "d2-stop3-time", "component": "Text", "variant": "label", "weight": 2, "text": "16:00" },
+        {
+          "id": "d2-stop3-info",
+          "component": "Column",
+          "align": "start",
+          "weight": 7,
+          "children": ["d2-stop3-title", "d2-stop3-desc"]
+        },
+        { "id": "d2-stop3-title", "component": "Text", "variant": "h5", "text": "Monkey Park Viewpoint" },
+        {
+          "id": "d2-stop3-desc",
+          "component": "Text",
+          "variant": "caption",
+          "text": "Short uphill hike ends with a wide city overlook. A calm way to close out the trip."
+        }
+      ]
+    }
+  }
+]
diff --git a/packages/genui/a2ui-playground/src/mock/messages/workout-plan.json b/packages/genui/a2ui-playground/src/mock/messages/workout-plan.json
new file mode 100644
index 0000000000..a404cd62c4
--- /dev/null
+++ b/packages/genui/a2ui-playground/src/mock/messages/workout-plan.json
@@ -0,0 +1,431 @@
+[
+  {
+    "createSurface": {
+      "surfaceId": "default",
+      "catalogId": "demo-workout-plan"
+    }
+  },
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "root",
+          "component": "Column",
+          "align": "stretch",
+          "justify": "start",
+          "children": ["header", "subheader", "progressRow", "divider", "planList", "footer"]
+        },
+        {
+          "id": "header",
+          "component": "Text",
+          "variant": "h2",
+          "text": "Weekly Workout Plan"
+        },
+        {
+          "id": "subheader",
+          "component": "Text",
+          "variant": "body",
+          "text": "Generating your plan..."
+        },
+        {
+          "id": "progressRow",
+          "component": "Row",
+          "alignment": "center",
+          "distribution": "spaceBetween",
+          "children": ["progressLabel", "progressCount"]
+        },
+        {
+          "id": "progressLabel",
+          "component": "Text",
+          "variant": "caption",
+          "text": "Progress"
+        },
+        {
+          "id": "progressCount",
+          "component": "Text",
+          "variant": "caption",
+          "text": "0 / 5 days"
+        },
+        {
+          "id": "divider",
+          "component": "Divider",
+          "axis": "horizontal"
+        },
+        {
+          "id": "planList",
+          "component": "List",
+          "direction": "vertical",
+          "children": {
+            "path": "/days",
+            "componentId": "dayCard"
+          }
+        },
+        {
+          "id": "dayCard",
+          "component": "Card",
+          "child": "dayCardBody"
+        },
+        {
+          "id": "dayCardBody",
+          "component": "Column",
+          "align": "stretch",
+          "children": ["dayHeader", "dayFocus", "dayMoves", "dayNote"]
+        },
+        {
+          "id": "dayHeader",
+          "component": "Row",
+          "alignment": "center",
+          "distribution": "spaceBetween",
+          "children": ["dayTitle", "dayDuration"]
+        },
+        {
+          "id": "dayTitle",
+          "component": "Text",
+          "variant": "h4",
+          "text": { "path": "title" }
+        },
+        {
+          "id": "dayDuration",
+          "component": "Text",
+          "variant": "caption",
+          "text": { "path": "duration" }
+        },
+        {
+          "id": "dayFocus",
+          "component": "Text",
+          "variant": "label",
+          "text": { "path": "focus" }
+        },
+        {
+          "id": "dayMoves",
+          "component": "Text",
+          "variant": "body",
+          "text": { "path": "moves" }
+        },
+        {
+          "id": "dayNote",
+          "component": "Text",
+          "variant": "caption",
+          "text": { "path": "note" }
+        },
+        {
+          "id": "footer",
+          "component": "Text",
+          "variant": "caption",
+          "text": ""
+        }
+      ]
+    }
+  },
+  {
+    "updateDataModel": {
+      "surfaceId": "default",
+      "path": "/days",
+      "value": []
+    }
+  },
+
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "subheader",
+          "component": "Text",
+          "variant": "body",
+          "text": "Balancing strength, mobility, and recovery across five sessions. Starting with an easy ramp-up."
+        }
+      ]
+    }
+  },
+
+  {
+    "updateDataModel": {
+      "surfaceId": "default",
+      "path": "/days",
+      "value": [
+        {
+          "key": "mon",
+          "title": "Monday · Ramp-Up",
+          "duration": "35 min",
+          "focus": "Full-body activation",
+          "moves": "Drafting moves...",
+          "note": ""
+        }
+      ]
+    }
+  },
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        { "id": "progressCount", "component": "Text", "variant": "caption", "text": "1 / 5 days" }
+      ]
+    }
+  },
+  {
+    "updateDataModel": {
+      "surfaceId": "default",
+      "path": "/days",
+      "value": [
+        {
+          "key": "mon",
+          "title": "Monday · Ramp-Up",
+          "duration": "35 min",
+          "focus": "Full-body activation",
+          "moves": "Goblet squat · Push-up · Glute bridge · Dead bug · Farmer carry",
+          "note": "Keep effort easy. The goal is to wake up patterns, not peak intensity."
+        }
+      ]
+    }
+  },
+
+  {
+    "updateDataModel": {
+      "surfaceId": "default",
+      "path": "/days",
+      "value": [
+        {
+          "key": "mon",
+          "title": "Monday · Ramp-Up",
+          "duration": "35 min",
+          "focus": "Full-body activation",
+          "moves": "Goblet squat · Push-up · Glute bridge · Dead bug · Farmer carry",
+          "note": "Keep effort easy. The goal is to wake up patterns, not peak intensity."
+        },
+        {
+          "key": "tue",
+          "title": "Tuesday · Lower Strength",
+          "duration": "45 min",
+          "focus": "Drafting focus...",
+          "moves": "",
+          "note": ""
+        }
+      ]
+    }
+  },
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        { "id": "progressCount", "component": "Text", "variant": "caption", "text": "2 / 5 days" }
+      ]
+    }
+  },
+  {
+    "updateDataModel": {
+      "surfaceId": "default",
+      "path": "/days",
+      "value": [
+        {
+          "key": "mon",
+          "title": "Monday · Ramp-Up",
+          "duration": "35 min",
+          "focus": "Full-body activation",
+          "moves": "Goblet squat · Push-up · Glute bridge · Dead bug · Farmer carry",
+          "note": "Keep effort easy. The goal is to wake up patterns, not peak intensity."
+        },
+        {
+          "key": "tue",
+          "title": "Tuesday · Lower Strength",
+          "duration": "45 min",
+          "focus": "Legs and hips",
+          "moves": "Back squat 4×5 · Romanian deadlift 3×8 · Walking lunge 3×12 · Hanging knee raise 3×10",
+          "note": "Rest 2 min between heavy sets. Stop 1 rep shy of failure."
+        }
+      ]
+    }
+  },
+
+  {
+    "updateDataModel": {
+      "surfaceId": "default",
+      "path": "/days",
+      "value": [
+        {
+          "key": "mon",
+          "title": "Monday · Ramp-Up",
+          "duration": "35 min",
+          "focus": "Full-body activation",
+          "moves": "Goblet squat · Push-up · Glute bridge · Dead bug · Farmer carry",
+          "note": "Keep effort easy. The goal is to wake up patterns, not peak intensity."
+        },
+        {
+          "key": "tue",
+          "title": "Tuesday · Lower Strength",
+          "duration": "45 min",
+          "focus": "Legs and hips",
+          "moves": "Back squat 4×5 · Romanian deadlift 3×8 · Walking lunge 3×12 · Hanging knee raise 3×10",
+          "note": "Rest 2 min between heavy sets. Stop 1 rep shy of failure."
+        },
+        {
+          "key": "wed",
+          "title": "Wednesday · Mobility & Zone 2",
+          "duration": "40 min",
+          "focus": "Easy aerobic and range of motion",
+          "moves": "Picking easy movements...",
+          "note": ""
+        }
+      ]
+    }
+  },
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        { "id": "progressCount", "component": "Text", "variant": "caption", "text": "3 / 5 days" }
+      ]
+    }
+  },
+  {
+    "updateDataModel": {
+      "surfaceId": "default",
+      "path": "/days",
+      "value": [
+        {
+          "key": "mon",
+          "title": "Monday · Ramp-Up",
+          "duration": "35 min",
+          "focus": "Full-body activation",
+          "moves": "Goblet squat · Push-up · Glute bridge · Dead bug · Farmer carry",
+          "note": "Keep effort easy. The goal is to wake up patterns, not peak intensity."
+        },
+        {
+          "key": "tue",
+          "title": "Tuesday · Lower Strength",
+          "duration": "45 min",
+          "focus": "Legs and hips",
+          "moves": "Back squat 4×5 · Romanian deadlift 3×8 · Walking lunge 3×12 · Hanging knee raise 3×10",
+          "note": "Rest 2 min between heavy sets. Stop 1 rep shy of failure."
+        },
+        {
+          "key": "wed",
+          "title": "Wednesday · Mobility & Zone 2",
+          "duration": "40 min",
+          "focus": "Easy aerobic and range of motion",
+          "moves": "Brisk walk or bike · Hip 90/90 · Thoracic opener · Ankle rocks",
+          "note": "Keep heart rate conversational. Recovery is the training today."
+        }
+      ]
+    }
+  },
+
+  {
+    "updateDataModel": {
+      "surfaceId": "default",
+      "path": "/days",
+      "value": [
+        {
+          "key": "mon",
+          "title": "Monday · Ramp-Up",
+          "duration": "35 min",
+          "focus": "Full-body activation",
+          "moves": "Goblet squat · Push-up · Glute bridge · Dead bug · Farmer carry",
+          "note": "Keep effort easy. The goal is to wake up patterns, not peak intensity."
+        },
+        {
+          "key": "tue",
+          "title": "Tuesday · Lower Strength",
+          "duration": "45 min",
+          "focus": "Legs and hips",
+          "moves": "Back squat 4×5 · Romanian deadlift 3×8 · Walking lunge 3×12 · Hanging knee raise 3×10",
+          "note": "Rest 2 min between heavy sets. Stop 1 rep shy of failure."
+        },
+        {
+          "key": "wed",
+          "title": "Wednesday · Mobility & Zone 2",
+          "duration": "40 min",
+          "focus": "Easy aerobic and range of motion",
+          "moves": "Brisk walk or bike · Hip 90/90 · Thoracic opener · Ankle rocks",
+          "note": "Keep heart rate conversational. Recovery is the training today."
+        },
+        {
+          "key": "thu",
+          "title": "Thursday · Upper Push & Pull",
+          "duration": "50 min",
+          "focus": "Balanced upper body",
+          "moves": "Bench press 4×6 · Pull-up 4×AMRAP · DB shoulder press 3×8 · Seated row 3×10 · Face pull 3×15",
+          "note": "Alternate push and pull. Pause at the chest on bench for control."
+        }
+      ]
+    }
+  },
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        { "id": "progressCount", "component": "Text", "variant": "caption", "text": "4 / 5 days" }
+      ]
+    }
+  },
+
+  {
+    "updateDataModel": {
+      "surfaceId": "default",
+      "path": "/days",
+      "value": [
+        {
+          "key": "mon",
+          "title": "Monday · Ramp-Up",
+          "duration": "35 min",
+          "focus": "Full-body activation",
+          "moves": "Goblet squat · Push-up · Glute bridge · Dead bug · Farmer carry",
+          "note": "Keep effort easy. The goal is to wake up patterns, not peak intensity."
+        },
+        {
+          "key": "tue",
+          "title": "Tuesday · Lower Strength",
+          "duration": "45 min",
+          "focus": "Legs and hips",
+          "moves": "Back squat 4×5 · Romanian deadlift 3×8 · Walking lunge 3×12 · Hanging knee raise 3×10",
+          "note": "Rest 2 min between heavy sets. Stop 1 rep shy of failure."
+        },
+        {
+          "key": "wed",
+          "title": "Wednesday · Mobility & Zone 2",
+          "duration": "40 min",
+          "focus": "Easy aerobic and range of motion",
+          "moves": "Brisk walk or bike · Hip 90/90 · Thoracic opener · Ankle rocks",
+          "note": "Keep heart rate conversational. Recovery is the training today."
+        },
+        {
+          "key": "thu",
+          "title": "Thursday · Upper Push & Pull",
+          "duration": "50 min",
+          "focus": "Balanced upper body",
+          "moves": "Bench press 4×6 · Pull-up 4×AMRAP · DB shoulder press 3×8 · Seated row 3×10 · Face pull 3×15",
+          "note": "Alternate push and pull. Pause at the chest on bench for control."
+        },
+        {
+          "key": "fri",
+          "title": "Friday · Conditioning",
+          "duration": "30 min",
+          "focus": "Short intervals",
+          "moves": "5 rounds: 200 m row · 10 KB swings · 10 push-ups · 60 s rest",
+          "note": "Leave the last round feeling strong. Stop if form breaks down."
+        }
+      ]
+    }
+  },
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        { "id": "progressCount", "component": "Text", "variant": "caption", "text": "5 / 5 days" },
+        {
+          "id": "subheader",
+          "component": "Text",
+          "variant": "body",
+          "text": "Plan ready. Weekend stays open for walks, stretching, or a hike."
+        },
+        {
+          "id": "footer",
+          "component": "Text",
+          "variant": "caption",
+          "text": "Tip: log sets and add 2.5 kg next week when all reps feel clean."
+        }
+      ]
+    }
+  }
+]
diff --git a/packages/genui/a2ui-playground/src/pages/AIChatPage.tsx b/packages/genui/a2ui-playground/src/pages/AIChatPage.tsx
new file mode 100644
index 0000000000..e771d63e25
--- /dev/null
+++ b/packages/genui/a2ui-playground/src/pages/AIChatPage.tsx
@@ -0,0 +1,133 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import type { ProtocolVersion } from '../utils/protocol.js';
+
+interface ChatMessage {
+  role: 'user' | 'ai';
+  content: string;
+}
+
+const WELCOME_MESSAGE: ChatMessage = {
+  role: 'ai',
+  content:
+    'I\'m A2UI Assistant. Describe the UI you want to build and I\'ll generate A2UI JSON for you.',
+};
+
+const MOCK_AI_RESPONSE: ChatMessage = {
+  role: 'ai',
+  content:
+    'AI generation is not yet connected. This is a preview of the AI Chat interface. In the future, this will generate A2UI components based on your description.',
+};
+
+export function AIChatPage(
+  _props: { protocol: ProtocolVersion },
+) {
+  const [messages, setMessages] = useState<ChatMessage[]>([WELCOME_MESSAGE]);
+  const [inputValue, setInputValue] = useState<string>('');
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  });
+
+  const handleSend = useCallback(() => {
+    const text = inputValue.trim();
+    if (!text) {
+      return;
+    }
+
+    setMessages((prev) => [
+      ...prev,
+      { role: 'user', content: text },
+    ]);
+    setInputValue('');
+
+    setTimeout(() => {
+      setMessages((prev) => [...prev, MOCK_AI_RESPONSE]);
+    }, 600);
+  }, [inputValue]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        handleSend();
+      }
+    },
+    [handleSend],
+  );
+
+  return (
+    <div className='chatPage'>
+      <div className='chatPanel'>
+        <div className='chatHeader'>
+          <h2 className='chatHeaderTitle'>AI Chat</h2>
+          <p className='chatHeaderSub'>Describe the UI you want to build</p>
+        </div>
+
+        <div className='chatMessages'>
+          {messages.map((msg, i) => (
+            <div
+              key={i}
+              className={`chatMessage ${
+                msg.role === 'user' ? 'chatMessageUser' : 'chatMessageAI'
+              }`}
+            >
+              {msg.content}
+            </div>
+          ))}
+          <div ref={messagesEndRef} />
+        </div>
+
+        <div className='chatInputArea'>
+          <input
+            className='chatInput'
+            type='text'
+            placeholder='Describe the UI you want to generate...'
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+          />
+          <button
+            className='chatSendBtn'
+            type='button'
+            onClick={handleSend}
+          >
+            Send
+          </button>
+        </div>
+      </div>
+
+      <div className='previewPanel'>
+        <div className='previewPanelHeader'>
+          <span className='previewPanelTitle'>Lynx Preview</span>
+        </div>
+        <div className='previewPanelBody'>
+          <div className='previewEmpty'>
+            <div className='previewEmptyIcon'>💬</div>
+            <div>Send a message to generate UI</div>
+            <div className='previewEmptySub'>
+              Generated components will be previewed here
+            </div>
+          </div>
+        </div>
+
+        <div className='previewQrSection'>
+          <div className='previewQrContent'>
+            <div className='previewQrInfo'>
+              <div className='previewQrTitle'>View on Device</div>
+              <div className='previewQrDesc'>
+                Scan the QR code to preview on your mobile device.
+              </div>
+            </div>
+            <div className='previewQrPlaceholder'>
+              <span className='previewQrPlaceholderText'>No render</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/genui/a2ui-playground/src/pages/ComponentsPage.tsx b/packages/genui/a2ui-playground/src/pages/ComponentsPage.tsx
new file mode 100644
index 0000000000..91af7d64bd
--- /dev/null
+++ b/packages/genui/a2ui-playground/src/pages/ComponentsPage.tsx
@@ -0,0 +1,147 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { useMemo } from 'react';
+
+import { CATEGORIES, COMPONENT_CATALOG } from '../componentCatalog.js';
+import type { ComponentDoc } from '../componentCatalog.js';
+import type { ProtocolVersion } from '../utils/protocol.js';
+
+function ComponentDetail(
+  props: { comp: ComponentDoc; protocol: ProtocolVersion },
+) {
+  const { comp, protocol } = props;
+  return (
+    <div className='compContent'>
+      <div className='compBreadcrumb'>
+        <a className='compBreadcrumbLink' href='#/components'>Components</a>
+        <span className='compBreadcrumbSep'>/</span>
+        <span className='compBreadcrumbCurrent'>{comp.name}</span>
+      </div>
+
+      <h2 className='compName'>{comp.name}</h2>
+      <p className='compDesc'>{comp.description}</p>
+
+      <div className='compCategoryBadge'>{comp.category}</div>
+
+      <h3 className='compSubheading'>Usage</h3>
+      <pre className='compCodeBlock'>
+        {JSON.stringify(comp.usage[protocol], null, 2)}
+      </pre>
+
+      <h3 className='compSubheading'>Props</h3>
+      <table className='compTable'>
+        <thead>
+          <tr>
+            <th className='compTableHeader'>Name</th>
+            <th className='compTableHeader'>Type</th>
+            <th className='compTableHeader'>Description</th>
+            <th className='compTableHeader'>Default</th>
+          </tr>
+        </thead>
+        <tbody>
+          {comp.props.map((prop) => (
+            <tr key={prop.name}>
+              <td className='compTableCell'>{prop.name}</td>
+              <td className='compTableCell'>{prop.type}</td>
+              <td className='compTableCell'>{prop.description}</td>
+              <td className='compTableCell'>{prop.default ?? '—'}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function ComponentGrid() {
+  return (
+    <div className='compContent'>
+      <h2 className='compName'>Components</h2>
+      <p className='compDesc'>
+        Browse all supported A2UI components by category.
+      </p>
+
+      {CATEGORIES.map((cat) => {
+        const items = COMPONENT_CATALOG.filter((c) => c.category === cat.id);
+        if (items.length === 0) return null;
+        return (
+          <div key={cat.id} className='compCategorySection'>
+            <h3 className='compCategoryTitle'>{cat.label}</h3>
+            <div className='compGrid'>
+              {items.map((comp) => (
+                <a
+                  key={comp.name}
+                  className='compGridCard'
+                  href={`#/components/${comp.name}`}
+                >
+                  <div className='compGridCardName'>{comp.name}</div>
+                  <div className='compGridCardDesc'>{comp.description}</div>
+                </a>
+              ))}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export function ComponentsPage(
+  props: { protocol: ProtocolVersion; componentName?: string },
+) {
+  const { protocol, componentName } = props;
+
+  const selectedComp = useMemo(
+    () => (componentName
+      ? COMPONENT_CATALOG.find((c) => c.name === componentName)
+      : undefined),
+    [componentName],
+  );
+
+  const groupedByCategory = useMemo(() => {
+    const map = new Map<string, ComponentDoc[]>();
+    for (const cat of CATEGORIES) {
+      const items = COMPONENT_CATALOG.filter((c) => c.category === cat.id);
+      if (items.length > 0) map.set(cat.id, items);
+    }
+    return map;
+  }, []);
+
+  return (
+    <div className='compPage'>
+      <div className='compSidebar'>
+        <a
+          className={'compSidebarAll' + (componentName ? '' : ' active')}
+          href='#/components'
+        >
+          All Components
+        </a>
+
+        {CATEGORIES.map((cat) => {
+          const items = groupedByCategory.get(cat.id);
+          if (!items) return null;
+          return (
+            <div key={cat.id} className='compSidebarGroup'>
+              <div className='compSidebarGroupLabel'>{cat.label}</div>
+              {items.map((comp) => (
+                <a
+                  key={comp.name}
+                  className={'compSidebarItem'
+                    + (componentName === comp.name ? ' active' : '')}
+                  href={`#/components/${comp.name}`}
+                >
+                  {comp.name}
+                </a>
+              ))}
+            </div>
+          );
+        })}
+      </div>
+
+      {selectedComp
+        ? <ComponentDetail comp={selectedComp} protocol={protocol} />
+        : <ComponentGrid />}
+    </div>
+  );
+}
diff --git a/packages/genui/a2ui-playground/src/pages/DemosPage.tsx b/packages/genui/a2ui-playground/src/pages/DemosPage.tsx
new file mode 100644
index 0000000000..69e0a69448
--- /dev/null
+++ b/packages/genui/a2ui-playground/src/pages/DemosPage.tsx
@@ -0,0 +1,238 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { json } from '@codemirror/lang-json';
+import CodeMirror from '@uiw/react-codemirror';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { Chip } from '../components/Chip.js';
+import { MobilePreview } from '../components/MobilePreview.js';
+import { QrCode } from '../components/QrCode.js';
+import { DYNAMIC_PRESETS, STATIC_DEMOS } from '../demos.js';
+import { DEFAULT_DEMO_URL } from '../utils/demoUrl.js';
+import type { ProtocolVersion } from '../utils/protocol.js';
+import { buildRenderUrl } from '../utils/renderUrl.js';
+
+interface Scenario {
+  id: string;
+  title: string;
+  tags: string[];
+  messages: unknown;
+  actionMocks?: Record<string, unknown>;
+}
+
+const jsonExtensions = [json()];
+
+const ALL_SCENARIOS: Scenario[] = [
+  ...STATIC_DEMOS.map((d) => ({ ...d, actionMocks: undefined })),
+  ...DYNAMIC_PRESETS,
+];
+
+function formatJson(value: unknown): string {
+  return JSON.stringify(value ?? [], null, 2);
+}
+
+export function DemosPage(props: { protocol: ProtocolVersion }) {
+  const { protocol } = props;
+
+  const [scenarioId, setScenarioId] = useState<string>(
+    ALL_SCENARIOS[0]?.id ?? '',
+  );
+  const [customJson, setCustomJson] = useState<string>(() =>
+    formatJson(ALL_SCENARIOS[0]?.messages)
+  );
+  const [error, setError] = useState('');
+  const [renderUrl, setRenderUrl] = useState('');
+
+  const origin = window.location.origin;
+
+  const currentScenario = useMemo(
+    () => ALL_SCENARIOS.find((s) => s.id === scenarioId) ?? ALL_SCENARIOS[0],
+    [scenarioId],
+  );
+
+  const doRender = useCallback(
+    (json: string, scenario: Scenario | undefined) => {
+      setError('');
+      let parsed: unknown;
+      try {
+        parsed = JSON.parse(json);
+      } catch (e) {
+        setError(`Invalid JSON: ${String(e)}`);
+        return;
+      }
+      const actionMocks = scenario?.actionMocks;
+      const url = buildRenderUrl(
+        { protocol, demoUrl: DEFAULT_DEMO_URL, messages: parsed, actionMocks },
+        origin,
+      );
+      setRenderUrl(url);
+    },
+    [origin, protocol],
+  );
+
+  useEffect(() => {
+    if (ALL_SCENARIOS[0]) {
+      const json = formatJson(ALL_SCENARIOS[0].messages);
+      doRender(json, ALL_SCENARIOS[0]);
+    }
+  }, [doRender]);
+
+  const handleSelectScenario = useCallback(
+    (id: string) => {
+      setScenarioId(id);
+      setError('');
+      const scenario = ALL_SCENARIOS.find((s) => s.id === id);
+      if (scenario) {
+        const json = formatJson(scenario.messages);
+        setCustomJson(json);
+        doRender(json, scenario);
+      }
+    },
+    [doRender],
+  );
+
+  const handleRender = useCallback(() => {
+    doRender(customJson, currentScenario);
+  }, [customJson, currentScenario, doRender]);
+
+  const handleFillExample = useCallback(() => {
+    setError('');
+    if (currentScenario) {
+      const json = formatJson(currentScenario.messages);
+      setCustomJson(json);
+      doRender(json, currentScenario);
+    }
+  }, [currentScenario, doRender]);
+
+  const handleClear = useCallback(() => {
+    setCustomJson('[]');
+    setRenderUrl('');
+    setError('');
+  }, []);
+
+  return (
+    <div className='demosPage'>
+      {/* Sidebar */}
+      <aside className='sidebar'>
+        <div className='sidebarSection'>
+          <div className='sidebarHeading'>Scenarios</div>
+          <div className='scenarioList'>
+            {ALL_SCENARIOS.map((s) => (
+              <button
+                key={s.id}
+                type='button'
+                className={s.id === scenarioId
+                  ? 'scenarioItem active'
+                  : 'scenarioItem'}
+                onClick={() => handleSelectScenario(s.id)}
+              >
+                <span className='scenarioName'>{s.title}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      </aside>
+
+      {/* Code Panel */}
+      <div className='codePanel'>
+        <div className='codePanelToolbar'>
+          <div className='codePanelTitle'>
+            A2UI Messages
+            <span className='codePanelBadge'>JSON</span>
+          </div>
+          <div className='spacer' />
+          <div className='toolbarActions'>
+            <button
+              type='button'
+              className='toolbarBtn'
+              onClick={handleFillExample}
+              title='Reset'
+            >
+              ↻ Reset
+            </button>
+            <button
+              type='button'
+              className='toolbarBtn'
+              onClick={handleClear}
+              title='Clear'
+            >
+              ✕ Clear
+            </button>
+            <button
+              type='button'
+              className='toolbarBtn primary'
+              onClick={handleRender}
+            >
+              ▶ Render
+            </button>
+          </div>
+        </div>
+        <CodeMirror
+          className='codeEditor'
+          value={customJson}
+          extensions={jsonExtensions}
+          onChange={setCustomJson}
+          theme='dark'
+          basicSetup={{
+            lineNumbers: true,
+            foldGutter: true,
+            bracketMatching: true,
+            closeBrackets: true,
+            autocompletion: true,
+          }}
+        />
+        {error ? <div className='codeError'>{error}</div> : null}
+      </div>
+
+      {/* Preview Panel */}
+      <div className='previewPanel'>
+        <div className='previewPanelHeader'>
+          <span className='previewPanelTitle'>Lynx Preview</span>
+          {currentScenario
+            ? (
+              <div className='previewPanelMeta'>
+                <div className='previewMetaTags'>
+                  {currentScenario.tags.map((t) => <Chip key={t}>{t}</Chip>)}
+                </div>
+              </div>
+            )
+            : null}
+        </div>
+        <div className='previewPanelBody'>
+          {renderUrl
+            ? <MobilePreview src={renderUrl} />
+            : (
+              <div className='previewEmpty'>
+                <div className='previewEmptyIcon'>▶</div>
+                <div>Select a scenario and click Render</div>
+                <div className='previewEmptySub'>
+                  Or edit the JSON and press ▶ Render
+                </div>
+              </div>
+            )}
+        </div>
+
+        {/* QR Code Section */}
+        <div className='previewQrSection'>
+          <div className='previewQrContent'>
+            <div className='previewQrInfo'>
+              <div className='previewQrTitle'>View on Device</div>
+              <div className='previewQrDesc'>
+                Scan the QR code to preview this A2UI rendering natively on your
+                mobile device.
+              </div>
+            </div>
+            {renderUrl
+              ? <QrCode value={renderUrl} size={80} />
+              : (
+                <div className='previewQrPlaceholder'>
+                  <span className='previewQrPlaceholderText'>No render</span>
+                </div>
+              )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/genui/a2ui-playground/src/pages/Dynamic.tsx b/packages/genui/a2ui-playground/src/pages/Dynamic.tsx
new file mode 100644
index 0000000000..7840bf4c81
--- /dev/null
+++ b/packages/genui/a2ui-playground/src/pages/Dynamic.tsx
@@ -0,0 +1,278 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { Chip } from '../components/Chip.js';
+import { MobilePreview } from '../components/MobilePreview.js';
+import { QrCode } from '../components/QrCode.js';
+import { UsageSection } from '../components/UsageSection.js';
+import { DYNAMIC_PRESETS } from '../demos.js';
+import type { ProtocolVersion } from '../utils/protocol.js';
+import { buildRenderUrl } from '../utils/renderUrl.js';
+
+type Mode = 'preset' | 'custom';
+
+function formatJson(value: unknown): string {
+  return JSON.stringify(value ?? [], null, 2);
+}
+
+export function DynamicPage(
+  props: { protocol: ProtocolVersion; demoUrl: string },
+) {
+  const { protocol, demoUrl } = props;
+
+  const hasPresets = DYNAMIC_PRESETS.length > 0;
+  const [mode, setMode] = useState<Mode>(hasPresets ? 'preset' : 'custom');
+  const [presetId, setPresetId] = useState<string>(
+    DYNAMIC_PRESETS[0]?.id ?? '',
+  );
+  const [customJson, setCustomJson] = useState<string>(() => {
+    const first = DYNAMIC_PRESETS[0]?.messages ?? [];
+    return formatJson(first);
+  });
+  const customJsonEditedRef = useRef(false);
+  const [error, setError] = useState<string>('');
+  const [renderUrl, setRenderUrl] = useState<string>('');
+
+  const origin = window.location.origin;
+  const homeHref = `#/${protocol}`;
+
+  const currentPreset = useMemo(() => {
+    return DYNAMIC_PRESETS.find((p) => p.id === presetId) ?? DYNAMIC_PRESETS[0];
+  }, [presetId]);
+
+  const presetMessages = currentPreset?.messages;
+  const presetActions = currentPreset?.actionMocks;
+
+  useEffect(() => {
+    if (customJsonEditedRef.current) return;
+    setCustomJson(formatJson(presetMessages ?? []));
+  }, [presetMessages]);
+
+  const handleStart = useCallback(() => {
+    setError('');
+
+    if (mode === 'preset') {
+      if (!currentPreset) {
+        setError('No preset selected');
+        return;
+      }
+
+      const url = buildRenderUrl(
+        {
+          protocol,
+          demoUrl,
+          messages: presetMessages,
+          actionMocks: presetActions,
+        },
+        origin,
+      );
+      setRenderUrl(url);
+      return;
+    }
+
+    let parsed: unknown;
+    try {
+      parsed = JSON.parse(customJson);
+    } catch (e) {
+      setError(`Invalid JSON: ${String(e)}`);
+      return;
+    }
+
+    const url = buildRenderUrl(
+      {
+        protocol,
+        demoUrl,
+        messages: parsed,
+      },
+      origin,
+    );
+    setRenderUrl(url);
+  }, [
+    customJson,
+    currentPreset,
+    demoUrl,
+    mode,
+    origin,
+    presetActions,
+    presetMessages,
+    protocol,
+  ]);
+
+  const handleSwitchToPreset = useCallback(() => {
+    if (!hasPresets) return;
+    setMode('preset');
+    setError('');
+  }, [hasPresets]);
+
+  const handleSwitchToCustom = useCallback(() => {
+    setMode('custom');
+    setError('');
+
+    const trimmed = customJson.trim();
+    if (trimmed === '' || trimmed === '[]') {
+      setCustomJson(formatJson(presetMessages ?? []));
+      customJsonEditedRef.current = false;
+    }
+  }, [customJson, presetMessages]);
+
+  const handleFillExample = useCallback(() => {
+    setMode('custom');
+    setError('');
+    setCustomJson(formatJson(presetMessages ?? []));
+    customJsonEditedRef.current = false;
+  }, [presetMessages]);
+
+  const handleClear = useCallback(() => {
+    setCustomJson('[]');
+    setRenderUrl('');
+    setError('');
+    customJsonEditedRef.current = false;
+  }, []);
+
+  return (
+    <div className='page'>
+      <div className='pageHeader'>
+        <a className='backLink' href={homeHref}>
+          ← Back to Home
+        </a>
+        <h1 className='pageTitle'>Dynamic Rendering</h1>
+        <p className='pageSubtitle'>
+          Presets and custom JSON, with action triggering and incremental
+          updates.
+        </p>
+      </div>
+
+      <div className='dynamicLayout'>
+        <div className='dynamicLeft'>
+          <div
+            className='segmented'
+            role='tablist'
+            aria-label='Dynamic demo mode'
+          >
+            {hasPresets
+              ? (
+                <button
+                  type='button'
+                  className={mode === 'preset' ? 'segment active' : 'segment'}
+                  onClick={handleSwitchToPreset}
+                >
+                  Presets
+                </button>
+              )
+              : null}
+            <button
+              type='button'
+              className={mode === 'custom' ? 'segment active' : 'segment'}
+              onClick={handleSwitchToCustom}
+            >
+              Custom JSON
+            </button>
+          </div>
+
+          {mode === 'preset' && hasPresets
+            ? (
+              <div className='panel'>
+                <div className='panelTitle'>Choose a Preset</div>
+                <select
+                  className='select'
+                  value={presetId}
+                  onChange={(e) => setPresetId(e.target.value)}
+                >
+                  {DYNAMIC_PRESETS.map((p) => (
+                    <option key={p.id} value={p.id}>
+                      {p.title}
+                    </option>
+                  ))}
+                </select>
+
+                {currentPreset
+                  ? (
+                    <div className='presetMeta'>
+                      <div className='presetDesc'>
+                        {currentPreset.description}
+                      </div>
+                      <div className='chipRow'>
+                        {currentPreset.tags.map((t) => <Chip key={t}>{t}
+                        </Chip>)}
+                      </div>
+                    </div>
+                  )
+                  : null}
+              </div>
+            )
+            : (
+              <div className='panel'>
+                <div className='panelTitle'>A2UI messages JSON</div>
+                <textarea
+                  className='editor'
+                  value={customJson}
+                  onChange={(e) => {
+                    setCustomJson(e.target.value);
+                    customJsonEditedRef.current = true;
+                  }}
+                  spellCheck={false}
+                />
+              </div>
+            )}
+
+          <div className='buttonRow'>
+            <button
+              type='button'
+              className='button primary'
+              onClick={handleStart}
+            >
+              Start Rendering
+            </button>
+            <button
+              type='button'
+              className='button'
+              onClick={handleFillExample}
+            >
+              Fill Example
+            </button>
+          </div>
+
+          <div className='buttonRow'>
+            <button type='button' className='button' onClick={handleClear}>
+              Clear
+            </button>
+          </div>
+
+          {error ? <div className='error'>{error}</div> : null}
+        </div>
+
+        <div className='dynamicRight'>
+          <div className='previewTop'>
+            <div className='previewTitle'>Preview</div>
+            {renderUrl
+              ? (
+                <div className='qrInline'>
+                  <div className='qrLabel'>View on Device</div>
+                  <QrCode value={renderUrl} size={116} />
+                </div>
+              )
+              : null}
+          </div>
+
+          <div className='previewBody'>
+            {renderUrl
+              ? <MobilePreview src={renderUrl} />
+              : (
+                <div className='previewEmpty'>
+                  <div className='previewEmptyIcon'>⚡</div>
+                  <div>Pick a preset or paste custom JSON</div>
+                  <div className='previewEmptySub'>
+                    Click "Start Rendering" to preview
+                  </div>
+                </div>
+              )}
+          </div>
+        </div>
+      </div>
+
+      <UsageSection />
+    </div>
+  );
+}
diff --git a/packages/genui/a2ui-playground/src/pages/Home.tsx b/packages/genui/a2ui-playground/src/pages/Home.tsx
new file mode 100644
index 0000000000..b2dc7d6473
--- /dev/null
+++ b/packages/genui/a2ui-playground/src/pages/Home.tsx
@@ -0,0 +1,64 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { Chip } from '../components/Chip.js';
+import { SUPPORTED_COMPONENTS } from '../demos.js';
+import type { ProtocolVersion } from '../utils/protocol.js';
+
+export function HomePage(props: { protocol: ProtocolVersion }) {
+  const { protocol } = props;
+  const base = `#/${protocol}`;
+
+  return (
+    <div className='page'>
+      <header className='hero'>
+        <div className='heroBadge'>A2UI protocol {protocol}</div>
+        <h1 className='heroTitle'>A2UI Renderer</h1>
+        <p className='heroSubtitle'>
+          Render declarative A2UI JSON into interactive UI, with both static and
+          dynamic modes.
+        </p>
+      </header>
+
+      <section className='homeCards'>
+        <a className='homeCard' href={`${base}/static`}>
+          <div className='homeIcon'>▦</div>
+          <div className='homeCardTitle'>Static Rendering</div>
+          <div className='homeCardDesc'>
+            Browse multiple A2UI cards to validate composition and baseline
+            rendering.
+          </div>
+          <div className='chipRow'>
+            {['Card', 'Form', 'List', 'Progress', 'Accordion'].map((t) => (
+              <Chip key={t}>{t}</Chip>
+            ))}
+          </div>
+        </a>
+
+        <a className='homeCard' href={`${base}/dynamic`}>
+          <div className='homeIcon'>⚡</div>
+          <div className='homeCardTitle'>Dynamic Rendering</div>
+          <div className='homeCardDesc'>
+            Presets and custom JSON. Useful for testing actions and incremental
+            updates.
+          </div>
+          <div className='chipRow'>
+            {['Preset', 'JSON', 'Action'].map((t) => <Chip key={t}>{t}</Chip>)}
+          </div>
+        </a>
+      </section>
+
+      <section className='supportedSection'>
+        <h2 className='sectionTitle'>Supported Components</h2>
+        <div className='chipWall'>
+          {SUPPORTED_COMPONENTS.map((name) => <Chip key={name}>{name}</Chip>)}
+        </div>
+      </section>
+
+      <footer className='footerNote'>
+        A2UI is an open standard that enables agents to generate UI via
+        declarative JSON.
+      </footer>
+    </div>
+  );
+}
diff --git a/packages/genui/a2ui-playground/src/pages/Static.tsx b/packages/genui/a2ui-playground/src/pages/Static.tsx
new file mode 100644
index 0000000000..3448ce5558
--- /dev/null
+++ b/packages/genui/a2ui-playground/src/pages/Static.tsx
@@ -0,0 +1,79 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { useMemo } from 'react';
+
+import { Chip } from '../components/Chip.js';
+import { MobilePreview } from '../components/MobilePreview.js';
+import { QrCode } from '../components/QrCode.js';
+import { STATIC_DEMOS } from '../demos.js';
+import type { ProtocolVersion } from '../utils/protocol.js';
+import { buildRenderUrl } from '../utils/renderUrl.js';
+
+export function StaticPage(
+  props: { protocol: ProtocolVersion; demoUrl: string },
+) {
+  const { protocol, demoUrl } = props;
+
+  const origin = window.location.origin;
+  const homeHref = `#/${protocol}`;
+
+  const entries = useMemo(() => {
+    return STATIC_DEMOS.map((demo) => {
+      const renderUrl = buildRenderUrl(
+        {
+          protocol,
+          demoUrl,
+          messages: demo.messages,
+        },
+        origin,
+      );
+
+      return {
+        demo,
+        renderUrl,
+      };
+    });
+  }, [demoUrl, origin, protocol]);
+
+  return (
+    <div className='page'>
+      <div className='pageHeader'>
+        <a className='backLink' href={homeHref}>
+          ← Back to Home
+        </a>
+        <h1 className='pageTitle'>Static Rendering</h1>
+        <p className='pageSubtitle'>
+          Preview A2UI JSON rendering. Each card is shown via Lynx For Web.
+        </p>
+      </div>
+
+      <div className='demoList'>
+        {entries.map(({ demo, renderUrl }) => (
+          <div key={demo.id} className='demoCard'>
+            <div className='demoMeta'>
+              <div className='demoTitleRow'>
+                <h2 className='demoTitle'>{demo.title}</h2>
+                <div className='chipRow'>
+                  {demo.tags.map((tag) => <Chip key={tag}>{tag}</Chip>)}
+                </div>
+              </div>
+              <div className='demoDesc'>{demo.description}</div>
+              <div className='qrBlock'>
+                <div className='qrLabel'>View on Device</div>
+                <QrCode value={renderUrl} />
+              </div>
+            </div>
+
+            <div className='demoPreview'>
+              <div className='previewHeader'>Preview (Lynx For Web)</div>
+              <div className='previewStage'>
+                <MobilePreview src={renderUrl} />
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/genui/a2ui-playground/src/render.tsx b/packages/genui/a2ui-playground/src/render.tsx
new file mode 100644
index 0000000000..9b5af4c09b
--- /dev/null
+++ b/packages/genui/a2ui-playground/src/render.tsx
@@ -0,0 +1,132 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { createElement, useEffect, useMemo, useRef, useState } from 'react';
+import ReactDOM from 'react-dom/client';
+
+import './styles.css';
+import '@lynx-js/web-core/client';
+import '@lynx-js/web-elements/all';
+import '@lynx-js/web-elements/index.css';
+
+import { decodeBase64Url } from './utils/base64url.js';
+import { DEFAULT_DEMO_URL } from './utils/demoUrl.js';
+
+interface InitData {
+  protocol?: '0.9';
+  messagesUrl?: string;
+  messages?: unknown;
+  actionMocksUrl?: string;
+  actionMocks?: unknown;
+  demoUrl?: string;
+}
+
+interface InitLynxViewMessage {
+  type: 'INIT_LYNX_VIEW';
+  data: InitData;
+}
+
+interface LynxViewElement extends HTMLElement {
+  initData?: InitData;
+  reload?: () => void;
+}
+
+function parseInitDataFromQuery(): InitData | null {
+  const params = new URLSearchParams(window.location.search);
+
+  const protocol = params.get('protocol');
+  const messagesUrl = params.get('messagesUrl');
+  const demoUrl = params.get('demoUrl');
+  const messages = params.get('messages');
+  const actionMocks = params.get('actionMocks');
+  const actionMocksUrl = params.get('actionMocksUrl');
+
+  if (!protocol && !messagesUrl && !messages && !demoUrl) {
+    return null;
+  }
+
+  const protocolValue = protocol === '0.9' ? '0.9' : undefined;
+
+  const initData: InitData = {
+    protocol: protocolValue,
+    messagesUrl: messagesUrl ?? undefined,
+    actionMocksUrl: actionMocksUrl ?? undefined,
+    demoUrl: demoUrl ?? undefined,
+    messages: [], // Default to an empty array
+  };
+
+  if (messages) {
+    try {
+      const decoded = decodeBase64Url(messages);
+      initData.messages = JSON.parse(decoded);
+    } catch {
+      // ignore
+    }
+  }
+
+  if (actionMocks) {
+    try {
+      const decoded = decodeBase64Url(actionMocks);
+      initData.actionMocks = JSON.parse(decoded);
+    } catch {
+      // ignore
+    }
+  }
+
+  return initData;
+}
+
+function isInitLynxViewMessage(data: unknown): data is InitLynxViewMessage {
+  if (!data || typeof data !== 'object') {
+    return false;
+  }
+
+  const payload = data as Partial<InitLynxViewMessage>;
+  return payload.type === 'INIT_LYNX_VIEW' && typeof payload.data === 'object'
+    && payload.data !== null;
+}
+
+function Render() {
+  const initial = useMemo(() => parseInitDataFromQuery(), []);
+  const [initData, setInitData] = useState<InitData | null>(initial);
+  const lynxViewRef = useRef<LynxViewElement | null>(null);
+
+  useEffect(() => {
+    const handleMessage = (e: MessageEvent<unknown>) => {
+      if (!isInitLynxViewMessage(e.data)) {
+        return;
+      }
+
+      setInitData(e.data.data);
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, []);
+
+  useEffect(() => {
+    const lynxView = lynxViewRef.current;
+    if (!lynxView) return;
+
+    lynxView.initData = initData ?? {};
+
+    if (typeof lynxView.reload === 'function') {
+      lynxView.reload();
+    }
+  }, [initData]);
+
+  return createElement('lynx-view', {
+    ref: lynxViewRef,
+    className: 'renderLynx',
+    style: { height: '100%' },
+    'thread-strategy': 'multi-thread',
+    url: initData?.demoUrl ?? DEFAULT_DEMO_URL,
+  });
+}
+
+const container = document.getElementById('root');
+if (!container) {
+  throw new Error('Missing #root element');
+}
+
+ReactDOM.createRoot(container).render(<Render />);
diff --git a/packages/genui/a2ui-playground/src/styles.css b/packages/genui/a2ui-playground/src/styles.css
new file mode 100644
index 0000000000..b97fc84892
--- /dev/null
+++ b/packages/genui/a2ui-playground/src/styles.css
@@ -0,0 +1,1045 @@
+/* ── Geist Design System Tokens ── */
+:root {
+  --geist-foreground: #000;
+  --geist-background: #fff;
+  --geist-secondary: #666;
+  --geist-border: #eaeaea;
+  --geist-border-hover: #999;
+  --geist-surface: #fafafa;
+  --geist-accent: #000;
+  --geist-accent-foreground: #fff;
+  --geist-error: #e00;
+  --geist-error-light: #fff0f0;
+  --geist-success: #0070f3;
+  --geist-code-bg: #111;
+  --geist-code-fg: #e8e8e8;
+  --geist-shadow-sm:
+    0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
+  --geist-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08);
+  --geist-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
+  --geist-radius-sm: 6px;
+  --geist-radius-md: 8px;
+  --geist-radius-lg: 12px;
+  --geist-radius-xl: 16px;
+  --geist-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --geist-font:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+    Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  --geist-mono:
+    "Geist Mono", "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas,
+    "Liberation Mono", monospace;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --geist-foreground: #ededed;
+    --geist-background: #0a0a0a;
+    --geist-secondary: #888;
+    --geist-border: #333;
+    --geist-border-hover: #555;
+    --geist-surface: #111;
+    --geist-accent: #fff;
+    --geist-accent-foreground: #000;
+    --geist-error-light: #2a0000;
+    --geist-code-bg: #0a0a0a;
+    --geist-code-fg: #e8e8e8;
+    --geist-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
+    --geist-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.3);
+    --geist-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.4);
+  }
+}
+
+/* ── Reset & Base ── */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  background: var(--geist-background);
+  color: var(--geist-foreground);
+  font-family: var(--geist-font);
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#root {
+  height: 100%;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+/* ── App Shell ── */
+.appShell {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.appBody {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+/* ── Top Bar ── */
+.topBar {
+  flex-shrink: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  height: 48px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--geist-border);
+  background: var(--geist-background);
+}
+
+.brand {
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--geist-foreground);
+  flex-shrink: 0;
+}
+
+.spacer {
+  flex: 1;
+}
+
+/* ── Tab Navigation ── */
+.tabNav {
+  display: flex;
+  gap: 2px;
+  margin-left: 16px;
+}
+
+.tabNavItem {
+  padding: 6px 12px;
+  border: none;
+  border-radius: var(--geist-radius-sm);
+  background: transparent;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--geist-secondary);
+  cursor: pointer;
+  transition: all var(--geist-transition);
+  white-space: nowrap;
+}
+
+.tabNavItem:hover {
+  color: var(--geist-foreground);
+  background: var(--geist-surface);
+}
+
+.tabNavItem.active {
+  color: var(--geist-foreground);
+  background: var(--geist-surface);
+  font-weight: 600;
+}
+
+/* ── Protocol Control ── */
+.protocolControl {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.protocolLabel {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--geist-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.protocolSwitch {
+  display: inline-flex;
+  padding: 2px;
+  border: 1px solid var(--geist-border);
+  border-radius: 6px;
+  background: var(--geist-surface);
+}
+
+.protocolButton {
+  padding: 4px 12px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  color: var(--geist-secondary);
+  transition: all var(--geist-transition);
+}
+
+.protocolButton:hover {
+  color: var(--geist-foreground);
+}
+
+.protocolButton.active {
+  background: var(--geist-accent);
+  color: var(--geist-accent-foreground);
+  box-shadow: var(--geist-shadow-sm);
+}
+
+/* ── Chips ── */
+.chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 999px;
+  border: 1px solid var(--geist-border);
+  background: var(--geist-surface);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--geist-secondary);
+}
+
+.chipRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+/* ── QR Code ── */
+.qrLabel {
+  font-size: 12px;
+  color: var(--geist-secondary);
+}
+
+.qrPlaceholder {
+  border-radius: var(--geist-radius-md);
+  background: var(--geist-surface);
+}
+
+.qrImage {
+  border-radius: var(--geist-radius-md);
+  border: 1px solid var(--geist-border);
+}
+
+/* ── Phone Frame ── */
+.phoneWrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.phoneFrame {
+  width: 300px;
+  height: 560px;
+  border-radius: 36px;
+  background: var(--geist-foreground);
+  padding: 10px;
+  box-shadow:
+    var(--geist-shadow-lg),
+    inset 0 0 0 2px rgba(255, 255, 255, 0.1);
+}
+
+.phoneScreen {
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  border-radius: 28px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.phoneStatusBar {
+  height: 44px;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.phoneNotch {
+  width: 80px;
+  height: 24px;
+  background: var(--geist-foreground);
+  border-radius: 0 0 16px 16px;
+}
+
+.phoneIframe {
+  flex: 1;
+  width: 100%;
+  border: 0;
+}
+
+.phoneHomeIndicator {
+  height: 20px;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.phoneHomeBar {
+  width: 120px;
+  height: 4px;
+  border-radius: 2px;
+  background: #d1d1d1;
+}
+
+/* ── Preview Panels (shared) ── */
+.previewPanel {
+  width: 420px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--geist-surface);
+  border-left: 1px solid var(--geist-border);
+}
+
+.previewPanelHeader {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--geist-border);
+  background: var(--geist-background);
+  flex-shrink: 0;
+}
+
+.previewPanelTitle {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.previewPanelMeta {
+  margin-left: auto;
+}
+
+.previewMetaTags {
+  display: flex;
+  gap: 4px;
+}
+
+.previewPanelBody {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  overflow: auto;
+}
+
+/* ── QR Code Section (always visible in preview panel) ── */
+.previewQrSection {
+  flex-shrink: 0;
+  border-top: 1px solid var(--geist-border);
+  background: var(--geist-background);
+  padding: 16px;
+}
+
+.previewQrContent {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.previewQrInfo {
+  flex: 1;
+  min-width: 0;
+}
+
+.previewQrTitle {
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.previewQrDesc {
+  font-size: 12px;
+  color: var(--geist-secondary);
+  line-height: 1.5;
+}
+
+.previewQrPlaceholder {
+  width: 80px;
+  height: 80px;
+  border-radius: var(--geist-radius-md);
+  border: 1px dashed var(--geist-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.previewQrPlaceholderText {
+  font-size: 10px;
+  color: var(--geist-secondary);
+}
+
+.previewEmpty {
+  text-align: center;
+  color: var(--geist-secondary);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+}
+
+.previewEmptyIcon {
+  font-size: 32px;
+  opacity: 0.4;
+}
+
+.previewEmptySub {
+  font-size: 12px;
+}
+
+/* ═══════════════════════════════════════════
+   Demos Page
+   ═══════════════════════════════════════════ */
+
+.demosPage {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* ── Sidebar ── */
+.sidebar {
+  width: 240px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--geist-border);
+  background: var(--geist-background);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebarSection {
+  padding: 12px;
+}
+
+.sidebarSection + .sidebarSection {
+  border-top: 1px solid var(--geist-border);
+}
+
+.sidebarHeading {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--geist-secondary);
+  padding: 0 8px;
+  margin-bottom: 8px;
+}
+
+.scenarioList {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.scenarioItem {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 12px 14px;
+  min-height: 44px;
+  border: none;
+  border-radius: var(--geist-radius-sm);
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  transition:
+    background var(--geist-transition),
+    box-shadow var(--geist-transition),
+    color var(--geist-transition);
+  width: 100%;
+}
+
+.scenarioItem:hover {
+  background: var(--geist-surface);
+}
+
+.scenarioItem.active {
+  background: var(--geist-surface);
+  box-shadow: inset 3px 0 0 var(--geist-foreground);
+}
+
+.scenarioItem.active .scenarioName {
+  font-weight: 600;
+  color: var(--geist-foreground);
+}
+
+.scenarioName {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--geist-foreground);
+}
+
+.scenarioDesc {
+  font-size: 11px;
+  color: var(--geist-secondary);
+  line-height: 1.4;
+}
+
+.sidebarChips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 0 8px;
+}
+
+/* ── Code Panel ── */
+.codePanel {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.codePanelToolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--geist-border);
+  background: var(--geist-background);
+  flex-shrink: 0;
+}
+
+.codePanelTitle {
+  font-size: 13px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.codePanelBadge {
+  font-size: 10px;
+  font-weight: 500;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: var(--geist-surface);
+  border: 1px solid var(--geist-border);
+  color: var(--geist-secondary);
+}
+
+.toolbarActions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.toolbarBtn {
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid var(--geist-border);
+  border-radius: var(--geist-radius-sm);
+  background: var(--geist-background);
+  color: var(--geist-secondary);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--geist-transition);
+  white-space: nowrap;
+}
+
+.toolbarBtn:hover {
+  color: var(--geist-foreground);
+  border-color: var(--geist-border-hover);
+}
+
+.toolbarBtn:active {
+  transform: scale(0.97);
+}
+
+.toolbarBtn.primary {
+  background: var(--geist-accent);
+  border-color: var(--geist-accent);
+  color: var(--geist-accent-foreground);
+}
+
+.toolbarBtn.primary:hover {
+  opacity: 0.85;
+}
+
+.codeEditor {
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.codeEditor .cm-editor {
+  height: 100%;
+  font-family: var(--geist-mono);
+  font-size: 13px;
+  background: var(--geist-code-bg);
+}
+
+.codeEditor .cm-scroller {
+  overflow: auto;
+}
+
+.codeEditor .cm-gutters {
+  background: var(--geist-code-bg);
+  border-right: 1px solid var(--geist-border);
+}
+
+.codeError {
+  padding: 8px 12px;
+  background: var(--geist-error-light);
+  border-top: 1px solid var(--geist-error);
+  color: var(--geist-error);
+  font-size: 12px;
+  font-family: var(--geist-mono);
+  flex-shrink: 0;
+}
+
+/* ═══════════════════════════════════════════
+   Components Page
+   ═══════════════════════════════════════════ */
+
+.compPage {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* ── Sidebar ── */
+.compSidebar {
+  width: 200px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--geist-border);
+  background: var(--geist-background);
+  overflow-y: auto;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.compSidebarAll {
+  display: block;
+  padding: 6px 12px;
+  border-radius: var(--geist-radius-sm);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--geist-secondary);
+  text-decoration: none;
+  transition: all var(--geist-transition);
+  margin-bottom: 4px;
+}
+
+.compSidebarAll:hover {
+  color: var(--geist-foreground);
+  background: var(--geist-surface);
+}
+
+.compSidebarAll.active {
+  color: var(--geist-foreground);
+  background: var(--geist-surface);
+}
+
+.compSidebarGroup {
+  margin-bottom: 4px;
+}
+
+.compSidebarGroupLabel {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--geist-secondary);
+  padding: 10px 12px 4px;
+}
+
+.compSidebarItem {
+  display: block;
+  width: 100%;
+  padding: 5px 12px 5px 20px;
+  border: none;
+  border-radius: var(--geist-radius-sm);
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--geist-secondary);
+  text-decoration: none;
+  transition: all var(--geist-transition);
+}
+
+.compSidebarItem:hover {
+  color: var(--geist-foreground);
+  background: var(--geist-surface);
+}
+
+.compSidebarItem.active {
+  color: var(--geist-foreground);
+  background: var(--geist-surface);
+  box-shadow: inset 2px 0 0 var(--geist-foreground);
+}
+
+/* ── Content ── */
+.compContent {
+  flex: 1;
+  overflow-y: auto;
+  padding: 32px 40px;
+}
+
+.compName {
+  font-size: 24px;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  margin: 0 0 8px;
+}
+
+.compDesc {
+  color: var(--geist-secondary);
+  font-size: 14px;
+  margin: 0 0 24px;
+  line-height: 1.6;
+}
+
+/* ── Breadcrumb ── */
+.compBreadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 20px;
+  font-size: 13px;
+}
+
+.compBreadcrumbLink {
+  color: var(--geist-secondary);
+  text-decoration: none;
+  transition: color var(--geist-transition);
+}
+
+.compBreadcrumbLink:hover {
+  color: var(--geist-foreground);
+}
+
+.compBreadcrumbSep {
+  color: var(--geist-secondary);
+  opacity: 0.5;
+}
+
+.compBreadcrumbCurrent {
+  color: var(--geist-foreground);
+  font-weight: 500;
+}
+
+/* ── Category Badge ── */
+.compCategoryBadge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 10px;
+  border-radius: 999px;
+  border: 1px solid var(--geist-border);
+  background: var(--geist-surface);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--geist-secondary);
+  margin-bottom: 24px;
+}
+
+/* ── Category Grid (All Components view) ── */
+.compCategorySection {
+  margin-bottom: 32px;
+}
+
+.compCategoryTitle {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--geist-foreground);
+  margin: 0 0 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.compGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 12px;
+}
+
+.compGridCard {
+  display: block;
+  padding: 16px;
+  border: 1px solid var(--geist-border);
+  border-radius: var(--geist-radius-lg);
+  background: var(--geist-background);
+  text-decoration: none;
+  transition: all var(--geist-transition);
+}
+
+.compGridCard:hover {
+  border-color: var(--geist-border-hover);
+  box-shadow: var(--geist-shadow-md);
+}
+
+.compGridCardName {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--geist-foreground);
+  margin-bottom: 4px;
+  font-family: var(--geist-mono);
+}
+
+.compGridCardDesc {
+  font-size: 13px;
+  color: var(--geist-secondary);
+  line-height: 1.5;
+}
+
+/* ── Detail subheadings / code / table ── */
+.compSubheading {
+  font-size: 14px;
+  font-weight: 600;
+  margin: 0 0 8px;
+  color: var(--geist-foreground);
+}
+
+.compCodeBlock {
+  margin: 0 0 24px;
+  padding: 16px;
+  border-radius: var(--geist-radius-md);
+  background: var(--geist-code-bg);
+  color: var(--geist-code-fg);
+  font-family: var(--geist-mono);
+  font-size: 13px;
+  line-height: 1.6;
+  overflow-x: auto;
+  white-space: pre;
+}
+
+.compTable {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 24px;
+  font-size: 13px;
+}
+
+.compTableHeader {
+  text-align: left;
+  font-weight: 600;
+  font-size: 12px;
+  color: var(--geist-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--geist-border);
+}
+
+.compTableCell {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--geist-border);
+  vertical-align: top;
+}
+
+.compTableCell:first-child {
+  font-family: var(--geist-mono);
+  font-weight: 500;
+  color: var(--geist-foreground);
+}
+
+.compTableCell:nth-child(2) {
+  font-family: var(--geist-mono);
+  font-size: 12px;
+  color: var(--geist-secondary);
+}
+
+/* ═══════════════════════════════════════════
+   AI Chat Page
+   ═══════════════════════════════════════════ */
+
+.chatPage {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.chatPanel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.chatHeader {
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--geist-border);
+  background: var(--geist-background);
+  flex-shrink: 0;
+}
+
+.chatHeaderTitle {
+  font-size: 15px;
+  font-weight: 600;
+  margin: 0 0 2px;
+}
+
+.chatHeaderSub {
+  font-size: 12px;
+  color: var(--geist-secondary);
+  margin: 0;
+}
+
+.chatMessages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.chatMessage {
+  max-width: 80%;
+  padding: 10px 14px;
+  border-radius: var(--geist-radius-lg);
+  font-size: 14px;
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+.chatMessageUser {
+  align-self: flex-end;
+  background: var(--geist-accent);
+  color: var(--geist-accent-foreground);
+  border-bottom-right-radius: 4px;
+}
+
+.chatMessageAI {
+  align-self: flex-start;
+  background: var(--geist-surface);
+  border: 1px solid var(--geist-border);
+  border-bottom-left-radius: 4px;
+}
+
+.chatInputArea {
+  padding: 12px 20px;
+  border-top: 1px solid var(--geist-border);
+  background: var(--geist-background);
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.chatInput {
+  flex: 1;
+  height: 40px;
+  padding: 0 14px;
+  border: 1px solid var(--geist-border);
+  border-radius: var(--geist-radius-md);
+  font-size: 14px;
+  background: var(--geist-background);
+  color: var(--geist-foreground);
+  outline: none;
+  transition: border-color var(--geist-transition);
+}
+
+.chatInput:focus {
+  border-color: var(--geist-foreground);
+}
+
+.chatInput::placeholder {
+  color: var(--geist-secondary);
+}
+
+.chatSendBtn {
+  height: 40px;
+  padding: 0 20px;
+  border: none;
+  border-radius: var(--geist-radius-md);
+  background: var(--geist-accent);
+  color: var(--geist-accent-foreground);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity var(--geist-transition);
+  flex-shrink: 0;
+}
+
+.chatSendBtn:hover {
+  opacity: 0.85;
+}
+
+.chatSendBtn:active {
+  transform: scale(0.97);
+}
+
+/* ── Responsive ── */
+@media (max-width: 980px) {
+  .tabNav {
+    gap: 0;
+  }
+
+  .tabNavItem {
+    padding: 6px 8px;
+    font-size: 12px;
+  }
+
+  .demosPage {
+    flex-direction: column;
+  }
+
+  .sidebar {
+    width: 100%;
+    max-height: 180px;
+    border-right: none;
+    border-bottom: 1px solid var(--geist-border);
+  }
+
+  .codePanel {
+    min-height: 280px;
+  }
+
+  .previewPanel {
+    width: 100%;
+    min-height: 480px;
+    border-left: none;
+    border-top: 1px solid var(--geist-border);
+  }
+
+  .compPage {
+    flex-direction: column;
+  }
+
+  .compSidebar {
+    width: 100%;
+    max-height: 160px;
+    border-right: none;
+    border-bottom: 1px solid var(--geist-border);
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  .compContent {
+    padding: 20px;
+  }
+
+  .chatPage {
+    flex-direction: column;
+  }
+
+  .chatPanel {
+    min-height: 400px;
+  }
+}
diff --git a/packages/genui/a2ui-playground/src/utils/base64url.ts b/packages/genui/a2ui-playground/src/utils/base64url.ts
new file mode 100644
index 0000000000..154813eee7
--- /dev/null
+++ b/packages/genui/a2ui-playground/src/utils/base64url.ts
@@ -0,0 +1,20 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+export function encodeBase64Url(input: string): string {
+  const bytes = new TextEncoder().encode(input);
+  let binary = '';
+  bytes.forEach((b) => {
+    binary += String.fromCharCode(b);
+  });
+  const base64 = btoa(binary);
+  return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/u, '');
+}
+
+export function decodeBase64Url(input: string): string {
+  const base64 = input.replace(/-/g, '+').replace(/_/g, '/');
+  const padded = base64 + '='.repeat((4 - (base64.length % 4)) % 4);
+  const binary = atob(padded);
+  const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0));
+  return new TextDecoder().decode(bytes);
+}
diff --git a/packages/genui/a2ui-playground/src/utils/demoUrl.ts b/packages/genui/a2ui-playground/src/utils/demoUrl.ts
new file mode 100644
index 0000000000..f2f1aaceab
--- /dev/null
+++ b/packages/genui/a2ui-playground/src/utils/demoUrl.ts
@@ -0,0 +1,4 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+export const DEFAULT_DEMO_URL = '/main.web.js';
diff --git a/packages/genui/a2ui-playground/src/utils/protocol.ts b/packages/genui/a2ui-playground/src/utils/protocol.ts
new file mode 100644
index 0000000000..e8569c35f4
--- /dev/null
+++ b/packages/genui/a2ui-playground/src/utils/protocol.ts
@@ -0,0 +1,12 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+export type ProtocolVersion = '0.9';
+
+export const DEFAULT_PROTOCOL: ProtocolVersion = '0.9';
+
+export function normalizeProtocol(
+  _value: string | null | undefined,
+): ProtocolVersion {
+  return '0.9';
+}
diff --git a/packages/genui/a2ui-playground/src/utils/renderUrl.ts b/packages/genui/a2ui-playground/src/utils/renderUrl.ts
new file mode 100644
index 0000000000..11f25f7262
--- /dev/null
+++ b/packages/genui/a2ui-playground/src/utils/renderUrl.ts
@@ -0,0 +1,28 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { encodeBase64Url } from './base64url.js';
+import type { ProtocolVersion } from './protocol.js';
+
+export interface RenderInit {
+  protocol: ProtocolVersion;
+  demoUrl: string;
+  messages: unknown;
+  actionMocks?: unknown;
+}
+
+export function buildRenderUrl(init: RenderInit, baseOrigin: string): string {
+  const params = new URLSearchParams();
+  params.set('protocol', init.protocol);
+  params.set('demoUrl', init.demoUrl);
+  params.set('messages', encodeBase64Url(JSON.stringify(init.messages)));
+
+  if (init.actionMocks !== undefined) {
+    params.set(
+      'actionMocks',
+      encodeBase64Url(JSON.stringify(init.actionMocks)),
+    );
+  }
+
+  return `${baseOrigin}/render.html?${params.toString()}`;
+}
diff --git a/packages/genui/a2ui-playground/tsconfig.json b/packages/genui/a2ui-playground/tsconfig.json
new file mode 100644
index 0000000000..b89b77d700
--- /dev/null
+++ b/packages/genui/a2ui-playground/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "bundler",
+    "target": "ES2020",
+    "lib": ["ESNext", "DOM"],
+    "types": ["react", "react-dom"],
+    "noEmit": true,
+    "skipLibCheck": true,
+  },
+  "include": ["src", "rsbuild.config.ts", "lynx.config.ts"],
+  "references": [{ "path": "./lynx-src" }],
+}
diff --git a/packages/genui/a2ui/src/catalog/Column/index.tsx b/packages/genui/a2ui/src/catalog/Column/index.tsx
index a469c7dab9..0771635a46 100644
--- a/packages/genui/a2ui/src/catalog/Column/index.tsx
+++ b/packages/genui/a2ui/src/catalog/Column/index.tsx
@@ -38,6 +38,21 @@ export function Column(
         const childWithContext = dataContextPath
           ? { ...child, dataContextPath: dataContextPath }
           : child;
+        const weight = (child as unknown as { weight?: number }).weight;
+        if (typeof weight === 'number' && weight > 0) {
+          return (
+            <view
+              key={childId}
+              className='column-weighted-item'
+              style={{ flex: `${weight} ${weight} 0`, minHeight: 0 }}
+            >
+              <NodeRenderer
+                component={childWithContext}
+                surface={surface}
+              />
+            </view>
+          );
+        }
         return (
           <NodeRenderer
             key={childId}
diff --git a/packages/genui/a2ui/src/catalog/Image/style.css b/packages/genui/a2ui/src/catalog/Image/style.css
index 7a5c8a4285..27c61d5ede 100644
--- a/packages/genui/a2ui/src/catalog/Image/style.css
+++ b/packages/genui/a2ui/src/catalog/Image/style.css
@@ -36,3 +36,9 @@
   flex-shrink: 0;
   padding: 8px;
 }
+
+.row-weighted-item .a2ui-image,
+.column-weighted-item .a2ui-image {
+  width: 100%;
+  box-sizing: border-box;
+}
diff --git a/packages/genui/a2ui/src/catalog/List/index.tsx b/packages/genui/a2ui/src/catalog/List/index.tsx
index 0d60d9cb56..c18e278147 100755
--- a/packages/genui/a2ui/src/catalog/List/index.tsx
+++ b/packages/genui/a2ui/src/catalog/List/index.tsx
@@ -53,11 +53,11 @@ export function List(
         component: childWithContext,
       };
     });
-    const componentId = template?.componentId ?? '';
-
+  } else if (template) {
     const items = Array.isArray(listData) ? listData : [];
 
     content = items.map((item, index) => {
+      const componentId = template.componentId;
       const child = surface.components.get(componentId);
       if (!child) return null;
 
diff --git a/packages/genui/a2ui/src/catalog/Row/index.tsx b/packages/genui/a2ui/src/catalog/Row/index.tsx
index 98a27cfea2..fef0d61783 100755
--- a/packages/genui/a2ui/src/catalog/Row/index.tsx
+++ b/packages/genui/a2ui/src/catalog/Row/index.tsx
@@ -36,6 +36,21 @@ export function Row(props: RowProps): import('@lynx-js/react').ReactNode {
         const childWithContext = dataContextPath
           ? { ...child, dataContextPath: dataContextPath }
           : child;
+        const weight = (child as unknown as { weight?: number }).weight;
+        if (typeof weight === 'number' && weight > 0) {
+          return (
+            <view
+              key={childId}
+              className='row-weighted-item'
+              style={{ flex: `${weight} ${weight} 0`, minWidth: 0 }}
+            >
+              <NodeRenderer
+                component={childWithContext}
+                surface={surface}
+              />
+            </view>
+          );
+        }
         return (
           <NodeRenderer
             key={childId}
diff --git a/packages/genui/a2ui/src/catalog/all.ts b/packages/genui/a2ui/src/catalog/all.ts
index 50a81bafb8..bf0c2369e9 100755
--- a/packages/genui/a2ui/src/catalog/all.ts
+++ b/packages/genui/a2ui/src/catalog/all.ts
@@ -1,13 +1,14 @@
 // Copyright 2026 The Lynx Authors. All rights reserved.
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
-export * from './Text/index.jsx';
-export * from './Image/index.jsx';
-export * from './Row/index.jsx';
-export * from './Column/index.jsx';
-export * from './List/index.jsx';
-export * from './Card/index.jsx';
-export * from './Button/index.jsx';
-export * from './Divider/index.jsx';
-export * from './CheckBox/index.jsx';
-export * from './RadioGroup/index.jsx';
+// Exporting from these modules also runs their side effects (component registration).
+export * from './Text.js';
+export * from './Image.js';
+export * from './Row.js';
+export * from './Column.js';
+export * from './List.js';
+export * from './Card.js';
+export * from './Button.js';
+export * from './Divider.js';
+export * from './CheckBox.js';
+export * from './RadioGroup.js';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 23c7a4207e..88729c28dc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -510,6 +510,70 @@ importers:
         specifier: ^18.3.28
         version: 18.3.28
 
+  packages/genui/a2ui-playground:
+    dependencies:
+      '@codemirror/lang-json':
+        specifier: ^6.0.2
+        version: 6.0.2
+      '@lynx-js/a2ui-reactlynx':
+        specifier: workspace:*
+        version: link:../a2ui
+      '@lynx-js/lynx-core':
+        specifier: 0.1.3
+        version: 0.1.3
+      '@lynx-js/react':
+        specifier: workspace:*
+        version: link:../../react
+      '@lynx-js/web-core':
+        specifier: workspace:*
+        version: link:../../web-platform/web-core
+      '@lynx-js/web-elements':
+        specifier: workspace:*
+        version: link:../../web-platform/web-elements
+      '@uiw/react-codemirror':
+        specifier: ^4.25.9
+        version: 4.25.9(@babel/runtime@7.29.2)(@codemirror/autocomplete@6.20.1)(@codemirror/language@6.12.3)(@codemirror/lint@6.9.5)(@codemirror/search@6.7.0)(@codemirror/state@6.6.0)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.41.1)(codemirror@6.0.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      qrcode:
+        specifier: ^1.5.4
+        version: 1.5.4
+      react:
+        specifier: ^19.2.4
+        version: 19.2.4
+      react-dom:
+        specifier: ^19.2.4
+        version: 19.2.4(react@19.2.4)
+    devDependencies:
+      '@lynx-js/qrcode-rsbuild-plugin':
+        specifier: workspace:*
+        version: link:../../rspeedy/plugin-qrcode
+      '@lynx-js/react-rsbuild-plugin':
+        specifier: workspace:*
+        version: link:../../rspeedy/plugin-react
+      '@lynx-js/rspeedy':
+        specifier: workspace:*
+        version: link:../../rspeedy/core
+      '@lynx-js/types':
+        specifier: 3.7.0
+        version: 3.7.0
+      '@rsbuild/core':
+        specifier: catalog:rsbuild
+        version: 1.7.5
+      '@rsbuild/plugin-react':
+        specifier: ^1.4.5
+        version: 1.4.5(@rsbuild/core@1.7.5)
+      '@types/qrcode':
+        specifier: ^1.5.5
+        version: 1.5.5
+      '@types/react':
+        specifier: npm:@types/react@^19.2.14
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
   packages/i18n/i18next-translation-dedupe:
     devDependencies:
       '@lynx-js/react':
@@ -2639,6 +2703,33 @@ packages:
   '@clack/prompts@1.0.1':
     resolution: {integrity: sha512-/42G73JkuYdyWZ6m8d/CJtBrGl1Hegyc7Fy78m5Ob+jF85TOUmLR5XLce/U3LxYAw0kJ8CT5aI99RIvPHcGp/Q==}
 
+  '@codemirror/autocomplete@6.20.1':
+    resolution: {integrity: sha512-1cvg3Vz1dSSToCNlJfRA2WSI4ht3K+WplO0UMOgmUYPivCyy2oueZY6Lx7M9wThm7SDUBViRmuT+OG/i8+ON9A==}
+
+  '@codemirror/commands@6.10.3':
+    resolution: {integrity: sha512-JFRiqhKu+bvSkDLI+rUhJwSxQxYb759W5GBezE8Uc8mHLqC9aV/9aTC7yJSqCtB3F00pylrLCwnyS91Ap5ej4Q==}
+
+  '@codemirror/lang-json@6.0.2':
+    resolution: {integrity: sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==}
+
+  '@codemirror/language@6.12.3':
+    resolution: {integrity: sha512-QwCZW6Tt1siP37Jet9Tb02Zs81TQt6qQrZR2H+eGMcFsL1zMrk2/b9CLC7/9ieP1fjIUMgviLWMmgiHoJrj+ZA==}
+
+  '@codemirror/lint@6.9.5':
+    resolution: {integrity: sha512-GElsbU9G7QT9xXhpUg1zWGmftA/7jamh+7+ydKRuT0ORpWS3wOSP0yT1FOlIZa7mIJjpVPipErsyvVqB9cfTFA==}
+
+  '@codemirror/search@6.7.0':
+    resolution: {integrity: sha512-ZvGm99wc/s2cITtMT15LFdn8aH/aS+V+DqyGq/N5ZlV5vWtH+nILvC2nw0zX7ByNoHHDZ2IxxdW38O0tc5nVHg==}
+
+  '@codemirror/state@6.6.0':
+    resolution: {integrity: sha512-4nbvra5R5EtiCzr9BTHiTLc+MLXK2QGiAVYMyi8PkQd3SR+6ixar/Q/01Fa21TBIDOZXgeWV4WppsQolSreAPQ==}
+
+  '@codemirror/theme-one-dark@6.1.3':
+    resolution: {integrity: sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==}
+
+  '@codemirror/view@6.41.1':
+    resolution: {integrity: sha512-ToDnWKbBnke+ZLrP6vgTTDScGi5H37YYuZGniQaBzxMVdtCxMrslsmtnOvbPZk4RX9bvkQqnWR/WS/35tJA0qg==}
+
   '@codspeed/core@5.2.0':
     resolution: {integrity: sha512-CmDhpWjcOJg2iBOQ/BmBnSBq8qxlM3r4h8uvYDkoUaba+EKRT3T73BZtKuml/48jZMsB+4/FG2UbTBinDWtuvw==}
 
@@ -3488,6 +3579,18 @@ packages:
   '@leichtgewicht/ip-codec@2.0.5':
     resolution: {integrity: sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==}
 
+  '@lezer/common@1.5.2':
+    resolution: {integrity: sha512-sxQE460fPZyU3sdc8lafxiPwJHBzZRy/udNFynGQky1SePYBdhkBl1kOagA9uT3pxR8K09bOrmTUqA9wb/PjSQ==}
+
+  '@lezer/highlight@1.2.3':
+    resolution: {integrity: sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==}
+
+  '@lezer/json@1.0.3':
+    resolution: {integrity: sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==}
+
+  '@lezer/lr@1.4.10':
+    resolution: {integrity: sha512-rnCpTIBafOx4mRp43xOxDJbFipJm/c0cia/V5TiGlhmMa+wsSdoGmUN3w5Bqrks/09Q/D4tNAmWaT8p6NRi77A==}
+
   '@lynx-js/gesture-runtime@2.1.1':
     resolution: {integrity: sha512-zBDOHakuePjw5wPCButExNgcllyFPGqYzqP2CWCWcQaX4gqJmCmYeRKguihyxH6ma6ExxlH/J2x5CHD91ed3bQ==}
     peerDependencies:
@@ -3699,6 +3802,9 @@ packages:
     resolution: {integrity: sha512-0FOIepYR4ugPYaHwK7hDeHDkfPOBVvayt9QpvRbi2LT/h2b0GaE/gM9Gag7fsnyYyNaTZ2IGyOuVg07IYepvYQ==}
     engines: {node: '>=20.0.0'}
 
+  '@marijn/find-cluster-break@1.0.2':
+    resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
+
   '@mdn/browser-compat-data@5.7.6':
     resolution: {integrity: sha512-7xdrMX0Wk7grrTZQwAoy1GkvPMFoizStUoL+VmtUkAxegbCCec+3FKwOM6yc/uGU5+BEczQHXAlWiqvM8JeENg==}
 
@@ -5160,6 +5266,9 @@ packages:
   '@types/prop-types@15.7.13':
     resolution: {integrity: sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==}
 
+  '@types/qrcode@1.5.5':
+    resolution: {integrity: sha512-CdfBi/e3Qk+3Z/fXYShipBT13OJ2fDO2Q2w5CIP5anLTLIndQG9z6P1cnm+8zCWSpm5dnxMFd/uREtb0EXuQzg==}
+
   '@types/qs@6.9.15':
     resolution: {integrity: sha512-uXHQKES6DQKKCLh441Xv/dwxOq1TVS3JPUMlEqoEglvlhR6Mxnlew/Xq/LRVHpLyk7iK3zODe1qYHIMltO7XGg==}
 
@@ -5338,6 +5447,28 @@ packages:
     resolution: {integrity: sha512-VHAVbp8d2VGm90EK//brKIYvT3iPrLXMq4/LApCdkKww/Hfn33zPRVmig4rswNaJiVu8XhcdHld5yfMw6d5A9Q==}
     hasBin: true
 
+  '@uiw/codemirror-extensions-basic-setup@4.25.9':
+    resolution: {integrity: sha512-QFAqr+pu6lDmNpAlecODcF49TlsrZ0bj15zPzfhiqSDl+Um3EsDLFLppixC7kFLn+rdDM2LTvVjn5CPvefpRgw==}
+    peerDependencies:
+      '@codemirror/autocomplete': '>=6.0.0'
+      '@codemirror/commands': '>=6.0.0'
+      '@codemirror/language': '>=6.0.0'
+      '@codemirror/lint': '>=6.0.0'
+      '@codemirror/search': '>=6.0.0'
+      '@codemirror/state': '>=6.0.0'
+      '@codemirror/view': '>=6.0.0'
+
+  '@uiw/react-codemirror@4.25.9':
+    resolution: {integrity: sha512-HftqCBUYShAOH0pGi1CHP8vfm5L8fQ3+0j0VI6lQD6QpK+UBu3J7nxfEN5O/BXMilMNf9ZyFJRvRcuMMOLHMng==}
+    peerDependencies:
+      '@babel/runtime': '>=7.11.0'
+      '@codemirror/state': '>=6.0.0'
+      '@codemirror/theme-one-dark': '>=6.0.0'
+      '@codemirror/view': '>=6.0.0'
+      codemirror: '>=6.0.0'
+      react: '>=17.0.0'
+      react-dom: '>=17.0.0'
+
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
 
@@ -6071,6 +6202,9 @@ packages:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
+  codemirror@6.0.2:
+    resolution: {integrity: sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==}
+
   collapse-white-space@2.1.0:
     resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==}
 
@@ -6209,6 +6343,9 @@ packages:
     resolution: {integrity: sha512-nN4ThiyEZ/hRgafQRlLDoxJnoBa1m3SErwzxsqUg0Zr5bSQ5DREBhcEOsd7NNbfM4Z6GJAAqJvPge7cwtuFmCQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
+  crelt@1.0.6:
+    resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
+
   cross-env@10.1.0:
     resolution: {integrity: sha512-GsYosgnACZTADcmEyJctkJIoqAhHjttw7RsFrVoJNXbsWWqaq6Ym+7kZjq6mS45O0jij6vtiReppKQEtqWy6Dw==}
     engines: {node: '>=20'}
@@ -6512,6 +6649,9 @@ packages:
     resolution: {integrity: sha512-sSuxWU5j5SR9QQji/o2qMvqRNYRDOcBTgsJ/DeCf4iSN4gW+gNMXM7wFIP+fdXZxoNiAnHUTGjCr+TSWXdRDKg==}
     engines: {node: '>=0.3.1'}
 
+  dijkstrajs@1.0.3:
+    resolution: {integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==}
+
   dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -8966,6 +9106,10 @@ packages:
     resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
     engines: {node: '>=4'}
 
+  pngjs@5.0.0:
+    resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==}
+    engines: {node: '>=10.13.0'}
+
   possible-typed-array-names@1.0.0:
     resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
     engines: {node: '>= 0.4'}
@@ -9267,6 +9411,11 @@ packages:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
+  qrcode@1.5.4:
+    resolution: {integrity: sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+
   qs@6.14.1:
     resolution: {integrity: sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==}
     engines: {node: '>=0.6'}
@@ -10216,6 +10365,9 @@ packages:
     peerDependencies:
       webpack: ^5.27.0
 
+  style-mod@4.1.3:
+    resolution: {integrity: sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==}
+
   style-to-js@1.1.16:
     resolution: {integrity: sha512-/Q6ld50hKYPH3d/r6nr117TZkHR0w0kGGIVfpG9N6D8NymRPM9RqCUv4pRpJ62E5DqOYx2AFpbZMyCPnjQCnOw==}
 
@@ -10791,6 +10943,9 @@ packages:
     resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
     engines: {node: '>=0.10.0'}
 
+  w3c-keyname@2.2.8:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+
   w3c-xmlserializer@5.0.0:
     resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
     engines: {node: '>=18'}
@@ -11728,6 +11883,64 @@ snapshots:
       picocolors: 1.1.1
       sisteransi: 1.0.5
 
+  '@codemirror/autocomplete@6.20.1':
+    dependencies:
+      '@codemirror/language': 6.12.3
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.1
+      '@lezer/common': 1.5.2
+
+  '@codemirror/commands@6.10.3':
+    dependencies:
+      '@codemirror/language': 6.12.3
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.1
+      '@lezer/common': 1.5.2
+
+  '@codemirror/lang-json@6.0.2':
+    dependencies:
+      '@codemirror/language': 6.12.3
+      '@lezer/json': 1.0.3
+
+  '@codemirror/language@6.12.3':
+    dependencies:
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.1
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+      style-mod: 4.1.3
+
+  '@codemirror/lint@6.9.5':
+    dependencies:
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.1
+      crelt: 1.0.6
+
+  '@codemirror/search@6.7.0':
+    dependencies:
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.1
+      crelt: 1.0.6
+
+  '@codemirror/state@6.6.0':
+    dependencies:
+      '@marijn/find-cluster-break': 1.0.2
+
+  '@codemirror/theme-one-dark@6.1.3':
+    dependencies:
+      '@codemirror/language': 6.12.3
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.1
+      '@lezer/highlight': 1.2.3
+
+  '@codemirror/view@6.41.1':
+    dependencies:
+      '@codemirror/state': 6.6.0
+      crelt: 1.0.6
+      style-mod: 4.1.3
+      w3c-keyname: 2.2.8
+
   '@codspeed/core@5.2.0':
     dependencies:
       axios: 1.11.0
@@ -12431,6 +12644,22 @@ snapshots:
 
   '@leichtgewicht/ip-codec@2.0.5': {}
 
+  '@lezer/common@1.5.2': {}
+
+  '@lezer/highlight@1.2.3':
+    dependencies:
+      '@lezer/common': 1.5.2
+
+  '@lezer/json@1.0.3':
+    dependencies:
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+
+  '@lezer/lr@1.4.10':
+    dependencies:
+      '@lezer/common': 1.5.2
+
   '@lynx-js/gesture-runtime@2.1.1(@lynx-js/react@packages+react)(@lynx-js/types@3.7.0)':
     dependencies:
       '@lynx-js/react': link:packages/react
@@ -12773,6 +13002,8 @@ snapshots:
       js-yaml: 4.1.1
       tinyglobby: 0.2.15
 
+  '@marijn/find-cluster-break@1.0.2': {}
+
   '@mdn/browser-compat-data@5.7.6': {}
 
   '@mdn/browser-compat-data@6.1.5': {}
@@ -14460,6 +14691,10 @@ snapshots:
 
   '@types/prop-types@15.7.13': {}
 
+  '@types/qrcode@1.5.5':
+    dependencies:
+      '@types/node': 24.10.13
+
   '@types/qs@6.9.15': {}
 
   '@types/range-parser@1.2.7': {}
@@ -14681,6 +14916,33 @@ snapshots:
       '@typescript/native-preview-win32-arm64': 7.0.0-dev.20260212.1
       '@typescript/native-preview-win32-x64': 7.0.0-dev.20260212.1
 
+  '@uiw/codemirror-extensions-basic-setup@4.25.9(@codemirror/autocomplete@6.20.1)(@codemirror/commands@6.10.3)(@codemirror/language@6.12.3)(@codemirror/lint@6.9.5)(@codemirror/search@6.7.0)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.1
+      '@codemirror/commands': 6.10.3
+      '@codemirror/language': 6.12.3
+      '@codemirror/lint': 6.9.5
+      '@codemirror/search': 6.7.0
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.1
+
+  '@uiw/react-codemirror@4.25.9(@babel/runtime@7.29.2)(@codemirror/autocomplete@6.20.1)(@codemirror/language@6.12.3)(@codemirror/lint@6.9.5)(@codemirror/search@6.7.0)(@codemirror/state@6.6.0)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.41.1)(codemirror@6.0.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@babel/runtime': 7.29.2
+      '@codemirror/commands': 6.10.3
+      '@codemirror/state': 6.6.0
+      '@codemirror/theme-one-dark': 6.1.3
+      '@codemirror/view': 6.41.1
+      '@uiw/codemirror-extensions-basic-setup': 4.25.9(@codemirror/autocomplete@6.20.1)(@codemirror/commands@6.10.3)(@codemirror/language@6.12.3)(@codemirror/lint@6.9.5)(@codemirror/search@6.7.0)(@codemirror/state@6.6.0)(@codemirror/view@6.41.1)
+      codemirror: 6.0.2
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    transitivePeerDependencies:
+      - '@codemirror/autocomplete'
+      - '@codemirror/language'
+      - '@codemirror/lint'
+      - '@codemirror/search'
+
   '@ungap/structured-clone@1.3.0': {}
 
   '@unhead/react@2.1.4(react@19.2.5)':
@@ -15460,6 +15722,16 @@ snapshots:
 
   clsx@2.1.1: {}
 
+  codemirror@6.0.2:
+    dependencies:
+      '@codemirror/autocomplete': 6.20.1
+      '@codemirror/commands': 6.10.3
+      '@codemirror/language': 6.12.3
+      '@codemirror/lint': 6.9.5
+      '@codemirror/search': 6.7.0
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.1
+
   collapse-white-space@2.1.0: {}
 
   color-convert@2.0.1:
@@ -15569,6 +15841,8 @@ snapshots:
 
   create-rstack@1.9.2: {}
 
+  crelt@1.0.6: {}
+
   cross-env@10.1.0:
     dependencies:
       '@epic-web/invariant': 1.0.0
@@ -15858,6 +16132,8 @@ snapshots:
 
   diff@8.0.2: {}
 
+  dijkstrajs@1.0.3: {}
+
   dir-glob@3.0.1:
     dependencies:
       path-type: 4.0.0
@@ -18972,6 +19248,8 @@ snapshots:
 
   pluralize@8.0.0: {}
 
+  pngjs@5.0.0: {}
+
   possible-typed-array-names@1.0.0: {}
 
   postcss-calc@10.1.1(postcss@8.5.6):
@@ -19244,6 +19522,12 @@ snapshots:
 
   punycode@2.3.1: {}
 
+  qrcode@1.5.4:
+    dependencies:
+      dijkstrajs: 1.0.3
+      pngjs: 5.0.0
+      yargs: 15.4.1
+
   qs@6.14.1:
     dependencies:
       side-channel: 1.1.0
@@ -20339,6 +20623,8 @@ snapshots:
     dependencies:
       webpack: 5.105.2
 
+  style-mod@4.1.3: {}
+
   style-to-js@1.1.16:
     dependencies:
       style-to-object: 1.0.8
@@ -20995,6 +21281,8 @@ snapshots:
 
   void-elements@3.1.0: {}
 
+  w3c-keyname@2.2.8: {}
+
   w3c-xmlserializer@5.0.0:
     dependencies:
       xml-name-validator: 5.0.0