diff --git a/demo/package.json b/demo/package.json
index e40b6b5..51ddb2a 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -12,12 +12,14 @@
     "@mobile-reality/mdma-parser": "workspace:*",
     "@mobile-reality/mdma-prompt-pack": "workspace:*",
     "@mobile-reality/mdma-renderer-react": "workspace:*",
+    "@mobile-reality/mdma-renderer-react-native": "workspace:*",
     "@mobile-reality/mdma-runtime": "workspace:*",
     "@mobile-reality/mdma-spec": "workspace:*",
     "@mobile-reality/mdma-validator": "workspace:*",
     "highlight.js": "^11.11.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-native-web": "^0.19.13",
     "recharts": "^3.7.0",
     "remark-parse": "^11.0.0",
     "unified": "^11.0.0",
@@ -28,6 +30,7 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.3.0",
+    "react-native": "0.76.9",
     "typescript": "^5.7.0",
     "vite": "^6.0.0"
   }
diff --git a/demo/src/docs/DocsView.tsx b/demo/src/docs/DocsView.tsx
index b1c5118..9357f2e 100644
--- a/demo/src/docs/DocsView.tsx
+++ b/demo/src/docs/DocsView.tsx
@@ -1,16 +1,17 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Cli } from './sections/Cli.js';
 import { COMPONENTS, ComponentPreview, Components } from './sections/Components.js';
 import { CustomPromptBestPractices } from './sections/CustomPromptBestPractices.js';
 import { Installation } from './sections/Installation.js';
+import { IntegrationAgui } from './sections/IntegrationAgui.js';
+import { IntegrationLangchain } from './sections/IntegrationLangchain.js';
+import { INTEGRATIONS, Integrations } from './sections/Integrations.js';
 import { Introduction } from './sections/Introduction.js';
 import { Mcp } from './sections/Mcp.js';
 import { PACKAGES, PackageDetail } from './sections/PackageDetail.js';
 import { Packages } from './sections/Packages.js';
 import { PromptMatrix } from './sections/PromptMatrix.js';
-import { Integrations, INTEGRATIONS } from './sections/Integrations.js';
-import { IntegrationLangchain } from './sections/IntegrationLangchain.js';
-import { IntegrationAgui } from './sections/IntegrationAgui.js';
+import { ReactNative, ReactNativeSnack } from './sections/ReactNative.js';
 import { Usage, UsageHydrationPreview } from './sections/Usage.js';
 import { Validator } from './sections/Validator.js';
 
@@ -32,6 +33,7 @@ const SECTIONS: Section[] = [
   { slug: 'usage', label: 'Usage', component: Usage },
   { slug: 'integrations', label: 'Integrations' },
   { slug: 'components', label: 'Components' },
+  { slug: 'react-native', label: 'React Native', component: ReactNative },
   { slug: 'validator', label: 'Validator', component: Validator },
   { slug: 'mcp', label: 'MCP & Skills', component: Mcp },
   { slug: 'cli', label: 'CLI', component: Cli },
@@ -73,7 +75,8 @@ export function DocsView() {
 
   const showComponentsPreview = active === 'components';
   const showUsagePreview = active === 'usage' && usageExampleOpen;
-  const showPreview = showComponentsPreview || showUsagePreview;
+  const showRnPreview = active === 'react-native';
+  const showPreview = showComponentsPreview || showUsagePreview || showRnPreview;
   const previewEntry = COMPONENTS.find((c) => c.type === selectedComponent) ?? COMPONENTS[0];
 
   const isPackagesActive = active === 'packages' || active.startsWith('packages/');
@@ -119,7 +122,11 @@ export function DocsView() {
     (s.slug === 'integrations' && isIntegrationsActive);
 
   return (
-    <div className={`docs-layout${showPreview ? ' docs-layout--with-preview' : ''}`}>
+    <div
+      className={`docs-layout${showPreview ? ' docs-layout--with-preview' : ''}${
+        showRnPreview ? ' docs-layout--rn' : ''
+      }`}
+    >
       <nav className="docs-nav">
         <div className="docs-nav-title">Documentation</div>
         {SECTIONS.map((s) => (
@@ -171,6 +178,8 @@ export function DocsView() {
         <aside className="docs-preview-panel">
           {showComponentsPreview ? (
             <ComponentPreview key={selectedComponent} entry={previewEntry} />
+          ) : showRnPreview ? (
+            <ReactNativeSnack />
           ) : (
             <UsageHydrationPreview />
           )}
diff --git a/demo/src/docs/sections/ReactNative.tsx b/demo/src/docs/sections/ReactNative.tsx
new file mode 100644
index 0000000..ab97883
--- /dev/null
+++ b/demo/src/docs/sections/ReactNative.tsx
@@ -0,0 +1,288 @@
+import { Code } from '../Code.js';
+import { ReactNativePreview } from './ReactNativePreview.js';
+import { RN_RESPONSES } from './rn-responses.js';
+
+// The program shown when the user clicks "Open in Expo Snack" — the same
+// interactive chat as the live preview, standalone (imports the published
+// packages, includes the Hermes crypto polyfill). RESPONSES are injected as
+// JSON via interpolation, so there are no backticks / escaped newlines here.
+const SNACK_CODE = `// MDMA — React Native renderer (interactive demo, no API key needed)
+if (!global.crypto) global.crypto = {};
+if (typeof global.crypto.randomUUID !== "function") {
+  global.crypto.randomUUID = function () {
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (ch) {
+      var r = (Math.random() * 16) | 0;
+      var v = ch === "x" ? r : (r & 0x3) | 0x8;
+      return v.toString(16);
+    });
+  };
+}
+
+import React, { useState, useRef, useEffect } from "react";
+import {
+  SafeAreaView,
+  ScrollView,
+  View,
+  Text,
+  TextInput,
+  Pressable,
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+} from "react-native";
+import { createDocumentStore } from "@mobile-reality/mdma-runtime";
+import { MdmaDocument } from "@mobile-reality/mdma-renderer-react-native";
+
+var RESPONSES = ${JSON.stringify(RN_RESPONSES)};
+var CHIPS = ["Contact form", "Release checklist", "Adoption table", "Approval gate"];
+var BLUE = "#2563eb";
+var BORDER = "#e5e7eb";
+
+function pick(text, n) {
+  var t = text.toLowerCase();
+  for (var i = 0; i < RESPONSES.length; i++) {
+    var kws = RESPONSES[i].match;
+    for (var j = 0; j < kws.length; j++) {
+      if (t.indexOf(kws[j]) !== -1) return RESPONSES[i];
+    }
+  }
+  return RESPONSES[n % RESPONSES.length];
+}
+
+export default function App() {
+  var [messages, setMessages] = useState([]);
+  var [input, setInput] = useState("");
+  var countRef = useRef(0);
+  var idRef = useRef(0);
+  var scrollRef = useRef(null);
+
+  useEffect(function () {
+    if (messages.length && scrollRef.current) scrollRef.current.scrollToEnd({ animated: true });
+  }, [messages]);
+
+  function patch(id, next) {
+    setMessages(function (prev) {
+      return prev.map(function (m) { return m.id === id ? Object.assign({}, m, next) : m; });
+    });
+  }
+
+  function stream(id, words, i) {
+    patch(id, { text: words.slice(0, i).join(" ") });
+    if (i < words.length) setTimeout(function () { stream(id, words, i + 1); }, 55);
+    else patch(id, { done: true });
+  }
+
+  function send(raw) {
+    var text = (raw != null ? raw : input).trim();
+    if (!text) return;
+    setInput("");
+    var r = pick(text, countRef.current);
+    countRef.current += 1;
+    var store = createDocumentStore(r.ast);
+    var bid = idRef.current + 2;
+    idRef.current += 2;
+    setMessages(function (prev) {
+      return prev.concat([
+        { id: bid - 1, role: "user", text: text },
+        { id: bid, role: "assistant", ast: r.ast, store: store, text: "", done: false },
+      ]);
+    });
+    setTimeout(function () { stream(bid, r.reply.split(" "), 1); }, 300);
+  }
+
+  return (
+    <SafeAreaView style={styles.page}>
+      <KeyboardAvoidingView style={styles.flex} behavior={Platform.OS === "ios" ? "padding" : undefined}>
+        <View style={styles.header}>
+          <View style={styles.avatar}><Text style={styles.avatarText}>M</Text></View>
+          <View>
+            <Text style={styles.title}>MDMA Assistant</Text>
+            <Text style={styles.subtitle}>React Native renderer</Text>
+          </View>
+        </View>
+
+        <ScrollView ref={scrollRef} style={styles.flex} contentContainerStyle={styles.scroll}>
+          {messages.length === 0 ? (
+            <View style={styles.empty}>
+              <Text style={styles.emptyTitle}>Ask for an interactive component</Text>
+              <Text style={styles.emptyHint}>The reply streams in, then renders natively — fully interactive.</Text>
+            </View>
+          ) : null}
+          {messages.map(function (m) {
+            if (m.role === "user") {
+              return (
+                <View key={m.id} style={styles.userRow}>
+                  <View style={styles.user}><Text style={styles.userText}>{m.text}</Text></View>
+                </View>
+              );
+            }
+            return (
+              <View key={m.id} style={styles.bot}>
+                {m.text ? (
+                  <Text style={styles.botText}>{m.text}{m.done ? "" : " ▌"}</Text>
+                ) : (
+                  <View style={styles.typing}>
+                    <ActivityIndicator size="small" color="#9ca3af" />
+                    <Text style={styles.typingText}>Generating…</Text>
+                  </View>
+                )}
+                {m.done ? (
+                  <View style={styles.doc}><MdmaDocument ast={m.ast} store={m.store} theme="light" /></View>
+                ) : null}
+              </View>
+            );
+          })}
+        </ScrollView>
+
+        <View style={styles.chipsWrap}>
+          {CHIPS.map(function (c, i) {
+            return (
+              <Pressable key={i} style={styles.chip} onPress={function () { send(c); }}>
+                <Text style={styles.chipText}>{c}</Text>
+              </Pressable>
+            );
+          })}
+        </View>
+
+        <View style={styles.bar}>
+          <TextInput style={styles.input} value={input} onChangeText={setInput} placeholder="Message…" placeholderTextColor="#9ca3af" onSubmitEditing={function () { send(); }} returnKeyType="send" />
+          <Pressable style={[styles.send, !input.trim() && styles.sendDisabled]} onPress={function () { send(); }} disabled={!input.trim()}>
+            <Text style={styles.sendText}>Send</Text>
+          </Pressable>
+        </View>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+}
+
+var styles = StyleSheet.create({
+  page: { flex: 1, backgroundColor: "#f3f4f6" },
+  flex: { flex: 1 },
+  header: { flexDirection: "row", alignItems: "center", gap: 10, paddingHorizontal: 14, paddingVertical: 12, backgroundColor: "#ffffff", borderBottomWidth: 1, borderBottomColor: BORDER },
+  avatar: { width: 34, height: 34, borderRadius: 17, backgroundColor: BLUE, alignItems: "center", justifyContent: "center" },
+  avatarText: { color: "#ffffff", fontWeight: "700", fontSize: 16 },
+  title: { fontSize: 15, fontWeight: "700", color: "#111827" },
+  subtitle: { fontSize: 12, color: "#6b7280", marginTop: 1 },
+  scroll: { padding: 12, gap: 12 },
+  empty: { paddingVertical: 40, paddingHorizontal: 12, gap: 8, alignItems: "center" },
+  emptyTitle: { fontSize: 15, fontWeight: "700", color: "#111827", textAlign: "center" },
+  emptyHint: { fontSize: 13, color: "#6b7280", textAlign: "center", lineHeight: 19 },
+  userRow: { alignItems: "flex-end" },
+  user: { maxWidth: "85%", backgroundColor: BLUE, borderRadius: 18, borderBottomRightRadius: 5, paddingVertical: 9, paddingHorizontal: 13 },
+  userText: { color: "#ffffff", fontSize: 15, lineHeight: 20 },
+  bot: { alignSelf: "stretch", backgroundColor: "#ffffff", borderRadius: 18, borderBottomLeftRadius: 5, borderWidth: 1, borderColor: BORDER, padding: 12 },
+  botText: { color: "#1f2937", fontSize: 15, lineHeight: 22 },
+  typing: { flexDirection: "row", alignItems: "center", gap: 8 },
+  typingText: { color: "#9ca3af", fontSize: 14 },
+  doc: { marginTop: 10 },
+  chipsWrap: { flexDirection: "row", flexWrap: "wrap", gap: 8, paddingHorizontal: 10, paddingVertical: 10, backgroundColor: "#ffffff", borderTopWidth: 1, borderTopColor: BORDER },
+  chip: { paddingVertical: 7, paddingHorizontal: 13, borderRadius: 999, borderWidth: 1, borderColor: BORDER, backgroundColor: "#f9fafb" },
+  chipText: { color: "#374151", fontSize: 13, fontWeight: "500" },
+  bar: { flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 10, paddingVertical: 10, backgroundColor: "#ffffff", borderTopWidth: 1, borderTopColor: BORDER },
+  input: { flex: 1, borderWidth: 1, borderColor: BORDER, borderRadius: 22, paddingHorizontal: 15, paddingVertical: 10, fontSize: 15, backgroundColor: "#f9fafb" },
+  send: { backgroundColor: BLUE, borderRadius: 22, paddingHorizontal: 18, paddingVertical: 10 },
+  sendDisabled: { opacity: 0.45 },
+  sendText: { color: "#ffffff", fontWeight: "600", fontSize: 15 },
+});
+`;
+
+const SNACK_DEPS = [
+  '@mobile-reality/mdma-renderer-react-native@0.2.1',
+  '@mobile-reality/mdma-runtime@0.3.1',
+  '@mobile-reality/mdma-spec@0.3.1',
+].join(',');
+
+// Non-embedded Snack URL — opens the full editor (code + device QR) in a new tab.
+const SNACK_OPEN_URL = `https://snack.expo.dev/?${new URLSearchParams({
+  code: SNACK_CODE,
+  dependencies: SNACK_DEPS,
+  platform: 'mydevice',
+  supportedPlatforms: 'mydevice,ios,android,web',
+  name: 'MDMA — React Native renderer',
+}).toString()}`;
+
+export function ReactNative() {
+  return (
+    <>
+      <h2>React Native</h2>
+      <p>
+        <code>@mobile-reality/mdma-renderer-react-native</code> renders MDMA documents as native
+        iOS/Android UI — the native sibling of <code>@mobile-reality/mdma-renderer-react</code>. It
+        reuses the same headless stack (<code>spec</code> + <code>runtime</code>) unchanged and
+        reimplements only the view layer with React Native primitives, so state, bindings, actions,
+        policy, audit, and PII redaction all behave exactly as they do on the web.
+      </p>
+
+      <h2>Install</h2>
+      <Code lang="bash">{`npm install @mobile-reality/mdma-renderer-react-native \\
+  @mobile-reality/mdma-spec @mobile-reality/mdma-runtime react react-native`}</Code>
+
+      <h2>Usage</h2>
+      <p>
+        Parse a document to an AST + store (with <code>@mobile-reality/mdma-parser</code>), then
+        hand both to <code>MdmaDocument</code>. Interactions dispatch the same store actions as the
+        web renderer.
+      </p>
+      <Code lang="tsx">{`import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import { remarkMdma } from '@mobile-reality/mdma-parser';
+import { createDocumentStore } from '@mobile-reality/mdma-runtime';
+import { MdmaDocument } from '@mobile-reality/mdma-renderer-react-native';
+import { ScrollView } from 'react-native';
+
+const processor = unified().use(remarkParse).use(remarkMdma, {});
+
+export function Screen({ markdown }: { markdown: string }) {
+  const [doc, setDoc] = useState(null);
+  useEffect(() => {
+    (async () => {
+      const ast = await processor.run(processor.parse(markdown), markdown);
+      setDoc({ ast, store: createDocumentStore(ast) });
+    })();
+  }, [markdown]);
+
+  if (!doc) return null;
+  return (
+    <ScrollView>
+      <MdmaDocument ast={doc.ast} store={doc.store} theme="dark" />
+    </ScrollView>
+  );
+}`}</Code>
+      <p>
+        Theme with <code>theme="light" | "dark"</code> (or a full token object via{' '}
+        <code>MdmaThemeProvider</code>), and override any component through the same{' '}
+        <code>customizations.components.&lt;type&gt;</code> slot the web renderer uses.
+      </p>
+
+      <h2>Try it</h2>
+      <p>
+        The panel on the right is the actual <code>renderer-react-native</code> running live (via{' '}
+        <code>react-native-web</code>) — send a message or tap a suggestion and the reply streams
+        in, then one of four sample MDMA documents renders and stays interactive. No agent, no API
+        key. Use <strong>Open in Expo Snack</strong> to see the code and run it on a real device
+        with Expo Go.
+      </p>
+      <p className="rn-snack-note">
+        The full app (a real MDMA agent with streaming generation) lives at{' '}
+        <code>demo-native/</code> in the repo — that one needs your own provider key in a{' '}
+        <code>.env</code> file.
+      </p>
+    </>
+  );
+}
+
+/** The live react-native-web preview + a link to the full Snack, rendered in
+ *  the docs preview panel (right side). */
+export function ReactNativeSnack() {
+  return (
+    <div className="rn-preview-panel">
+      <a className="rn-open-snack" href={SNACK_OPEN_URL} target="_blank" rel="noreferrer">
+        Open in Expo Snack ↗
+      </a>
+      <div className="rn-phone">
+        <ReactNativePreview />
+      </div>
+    </div>
+  );
+}
diff --git a/demo/src/docs/sections/ReactNativePreview.tsx b/demo/src/docs/sections/ReactNativePreview.tsx
new file mode 100644
index 0000000..a2b39c2
--- /dev/null
+++ b/demo/src/docs/sections/ReactNativePreview.tsx
@@ -0,0 +1,266 @@
+import { MdmaDocument } from '@mobile-reality/mdma-renderer-react-native';
+import { type DocumentStore, createDocumentStore } from '@mobile-reality/mdma-runtime';
+import type { MdmaRoot } from '@mobile-reality/mdma-spec';
+// Renders live in the browser: `react-native` is aliased to `react-native-web`
+// (see vite.config.ts), so this is the exact renderer-react-native code running
+// as a web preview — the "emulator" shown in the docs. No code editor, no API
+// key; the four responses are pre-parsed and matched by keyword.
+import { useEffect, useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import { RN_RESPONSES } from './rn-responses.js';
+
+interface Msg {
+  id: number;
+  role: 'user' | 'assistant';
+  text: string;
+  ast?: MdmaRoot;
+  store?: DocumentStore;
+  done?: boolean;
+}
+
+const CHIPS = ['Contact form', 'Release checklist', 'Adoption table', 'Approval gate'];
+
+function pick(text: string, n: number) {
+  const t = text.toLowerCase();
+  for (const r of RN_RESPONSES) for (const k of r.match) if (t.includes(k)) return r;
+  return RN_RESPONSES[n % RN_RESPONSES.length];
+}
+
+export function ReactNativePreview() {
+  const [messages, setMessages] = useState<Msg[]>([]);
+  const [input, setInput] = useState('');
+  const countRef = useRef(0);
+  const idRef = useRef(0);
+  const scrollRef = useRef<ScrollView>(null);
+
+  useEffect(() => {
+    if (messages.length) scrollRef.current?.scrollToEnd({ animated: true });
+  }, [messages]);
+
+  const patch = (id: number, next: Partial<Msg>) =>
+    setMessages((prev) => prev.map((m) => (m.id === id ? { ...m, ...next } : m)));
+
+  // Reveal the reply one word at a time, then flip `done` so the component renders.
+  const stream = (id: number, words: string[], i: number) => {
+    patch(id, { text: words.slice(0, i).join(' ') });
+    if (i < words.length) setTimeout(() => stream(id, words, i + 1), 55);
+    else patch(id, { done: true });
+  };
+
+  const send = (raw?: string) => {
+    const text = (raw ?? input).trim();
+    if (!text) return;
+    setInput('');
+    const r = pick(text, countRef.current);
+    countRef.current += 1;
+    const store = createDocumentStore(r.ast);
+    const bid = idRef.current + 2;
+    idRef.current += 2;
+    setMessages((prev) => [
+      ...prev,
+      { id: bid - 1, role: 'user', text },
+      { id: bid, role: 'assistant', text: '', ast: r.ast, store, done: false },
+    ]);
+    setTimeout(() => stream(bid, r.reply.split(' '), 1), 300);
+  };
+
+  const empty = messages.length === 0;
+
+  return (
+    <View style={styles.page}>
+      <View style={styles.header}>
+        <View style={styles.avatar}>
+          <Text style={styles.avatarText}>M</Text>
+        </View>
+        <View>
+          <Text style={styles.title}>MDMA Assistant</Text>
+          <Text style={styles.subtitle}>React Native renderer</Text>
+        </View>
+      </View>
+
+      <ScrollView ref={scrollRef} style={styles.flex} contentContainerStyle={styles.scroll}>
+        {empty ? (
+          <View style={styles.empty}>
+            <Text style={styles.emptyTitle}>Ask for an interactive component</Text>
+            <Text style={styles.emptyHint}>
+              The reply streams in, then renders natively — fully interactive.
+            </Text>
+          </View>
+        ) : null}
+
+        {messages.map((m) =>
+          m.role === 'user' ? (
+            <View key={m.id} style={styles.userRow}>
+              <View style={styles.user}>
+                <Text style={styles.userText}>{m.text}</Text>
+              </View>
+            </View>
+          ) : (
+            <View key={m.id} style={styles.bot}>
+              {m.text ? (
+                <Text style={styles.botText}>
+                  {m.text}
+                  {m.done ? '' : ' ▌'}
+                </Text>
+              ) : (
+                <View style={styles.typing}>
+                  <ActivityIndicator size="small" color="#9ca3af" />
+                  <Text style={styles.typingText}>Generating…</Text>
+                </View>
+              )}
+              {m.done && m.ast && m.store ? (
+                <View style={styles.doc}>
+                  <MdmaDocument ast={m.ast} store={m.store} theme="light" />
+                </View>
+              ) : null}
+            </View>
+          ),
+        )}
+      </ScrollView>
+
+      <View style={styles.chipsWrap}>
+        {CHIPS.map((c) => (
+          <Pressable key={c} style={styles.chip} onPress={() => send(c)}>
+            <Text style={styles.chipText}>{c}</Text>
+          </Pressable>
+        ))}
+      </View>
+
+      <View style={styles.bar}>
+        <TextInput
+          style={styles.input}
+          value={input}
+          onChangeText={setInput}
+          placeholder="Message…"
+          placeholderTextColor="#9ca3af"
+          onSubmitEditing={() => send()}
+          returnKeyType="send"
+        />
+        <Pressable
+          style={[styles.send, !input.trim() && styles.sendDisabled]}
+          onPress={() => send()}
+          disabled={!input.trim()}
+        >
+          <Text style={styles.sendText}>Send</Text>
+        </Pressable>
+      </View>
+    </View>
+  );
+}
+
+const BLUE = '#2563eb';
+const BORDER = '#e5e7eb';
+
+const styles = StyleSheet.create({
+  page: { flex: 1, backgroundColor: '#f3f4f6' },
+  flex: { flex: 1 },
+
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    backgroundColor: '#ffffff',
+    borderBottomWidth: 1,
+    borderBottomColor: BORDER,
+  },
+  avatar: {
+    width: 34,
+    height: 34,
+    borderRadius: 17,
+    backgroundColor: BLUE,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  avatarText: { color: '#ffffff', fontWeight: '700', fontSize: 16 },
+  title: { fontSize: 15, fontWeight: '700', color: '#111827' },
+  subtitle: { fontSize: 12, color: '#6b7280', marginTop: 1 },
+
+  scroll: { padding: 12, gap: 12 },
+  empty: { paddingVertical: 40, paddingHorizontal: 12, gap: 8, alignItems: 'center' },
+  emptyTitle: { fontSize: 15, fontWeight: '700', color: '#111827', textAlign: 'center' },
+  emptyHint: { fontSize: 13, color: '#6b7280', textAlign: 'center', lineHeight: 19 },
+
+  userRow: { alignItems: 'flex-end' },
+  user: {
+    maxWidth: '85%',
+    backgroundColor: BLUE,
+    borderRadius: 18,
+    borderBottomRightRadius: 5,
+    paddingVertical: 9,
+    paddingHorizontal: 13,
+  },
+  userText: { color: '#ffffff', fontSize: 15, lineHeight: 20 },
+
+  bot: {
+    alignSelf: 'stretch',
+    backgroundColor: '#ffffff',
+    borderRadius: 18,
+    borderBottomLeftRadius: 5,
+    borderWidth: 1,
+    borderColor: BORDER,
+    padding: 12,
+  },
+  botText: { color: '#1f2937', fontSize: 15, lineHeight: 22 },
+  typing: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+  typingText: { color: '#9ca3af', fontSize: 14 },
+  doc: { marginTop: 10 },
+
+  chipsWrap: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+    paddingHorizontal: 10,
+    paddingVertical: 10,
+    backgroundColor: '#ffffff',
+    borderTopWidth: 1,
+    borderTopColor: BORDER,
+  },
+  chip: {
+    paddingVertical: 7,
+    paddingHorizontal: 13,
+    borderRadius: 999,
+    borderWidth: 1,
+    borderColor: BORDER,
+    backgroundColor: '#f9fafb',
+  },
+  chipText: { color: '#374151', fontSize: 13, fontWeight: '500' },
+
+  bar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingHorizontal: 10,
+    paddingVertical: 10,
+    backgroundColor: '#ffffff',
+    borderTopWidth: 1,
+    borderTopColor: BORDER,
+  },
+  input: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: BORDER,
+    borderRadius: 22,
+    paddingHorizontal: 15,
+    paddingVertical: 10,
+    fontSize: 15,
+    backgroundColor: '#f9fafb',
+  },
+  send: {
+    backgroundColor: BLUE,
+    borderRadius: 22,
+    paddingHorizontal: 18,
+    paddingVertical: 10,
+  },
+  sendDisabled: { opacity: 0.45 },
+  sendText: { color: '#ffffff', fontWeight: '600', fontSize: 15 },
+});
diff --git a/demo/src/docs/sections/rn-responses.ts b/demo/src/docs/sections/rn-responses.ts
new file mode 100644
index 0000000..1c654fb
--- /dev/null
+++ b/demo/src/docs/sections/rn-responses.ts
@@ -0,0 +1,136 @@
+import type { MdmaRoot } from '@mobile-reality/mdma-spec';
+
+/** A canned agent response: a keyword match, a reply to stream, and the
+ *  pre-parsed (component-only) MDMA document to render. */
+export interface RnResponse {
+  match: string[];
+  reply: string;
+  ast: MdmaRoot;
+}
+
+// Pre-parsed at build time (see the RN docs section) so nothing needs the
+// markdown parser at runtime — used both by the live react-native-web preview
+// and to seed the "Open in Expo Snack" program.
+export const RN_RESPONSES = [
+  {
+    match: ['form', 'contact'],
+    reply:
+      'Sure — here is a contact form with name, email, and message fields. Fill it in and hit submit.',
+    ast: {
+      type: 'root',
+      children: [
+        {
+          type: 'mdmaBlock',
+          component: {
+            id: 'contact-form',
+            type: 'form',
+            sensitive: false,
+            disabled: false,
+            visible: true,
+            fields: [
+              {
+                name: 'full_name',
+                type: 'text',
+                label: 'Full Name',
+                required: true,
+                sensitive: false,
+              },
+              { name: 'email', type: 'email', label: 'Email', required: true, sensitive: true },
+              {
+                name: 'message',
+                type: 'textarea',
+                label: 'Message',
+                required: false,
+                sensitive: false,
+              },
+            ],
+            onSubmit: 'submit-contact',
+          },
+        },
+      ],
+    },
+  },
+  {
+    match: ['task', 'checklist', 'todo', 'release'],
+    reply: 'Here is a release checklist you can tick through before shipping.',
+    ast: {
+      type: 'root',
+      children: [
+        {
+          type: 'mdmaBlock',
+          component: {
+            id: 'preflight',
+            type: 'tasklist',
+            label: 'Release checklist',
+            sensitive: false,
+            disabled: false,
+            visible: true,
+            items: [
+              { id: 'tests', text: 'All tests green', checked: false, required: false },
+              { id: 'changelog', text: 'Changelog updated', checked: false, required: false },
+              { id: 'docs', text: 'Docs reviewed', checked: false, required: false },
+            ],
+            onComplete: 'preflight-done',
+          },
+        },
+      ],
+    },
+  },
+  {
+    match: ['table', 'data', 'metric', 'number'],
+    reply: 'Here are the adoption numbers by platform, rendered as a native table.',
+    ast: {
+      type: 'root',
+      children: [
+        {
+          type: 'mdmaBlock',
+          component: {
+            id: 'metrics',
+            type: 'table',
+            label: 'Adoption',
+            sensitive: false,
+            disabled: false,
+            visible: true,
+            columns: [
+              { key: 'platform', header: 'Platform', sortable: false, sensitive: false },
+              { key: 'installs', header: 'Installs', sortable: false, sensitive: false },
+              { key: 'rating', header: 'Rating', sortable: false, sensitive: false },
+            ],
+            data: [
+              { platform: 'iOS', installs: 12400, rating: 4.7 },
+              { platform: 'Android', installs: 18800, rating: 4.5 },
+              { platform: 'Web', installs: 6100, rating: 4.6 },
+            ],
+            sortable: false,
+            filterable: false,
+          },
+        },
+      ],
+    },
+  },
+  {
+    match: ['approv', 'gate', 'deploy', 'ship'],
+    reply: 'Here is an approval gate — approve or deny the deployment when you are ready.',
+    ast: {
+      type: 'root',
+      children: [
+        {
+          type: 'mdmaBlock',
+          component: {
+            id: 'gate',
+            type: 'approval-gate',
+            sensitive: false,
+            disabled: false,
+            visible: true,
+            title: 'Ship v1.0',
+            description: 'Approve to cut the release.',
+            requiredApprovers: 1,
+            onApprove: 'do-release',
+            onDeny: 'hold-release',
+            requireReason: false,
+          },
+        },
+      ],
+    },
+  },
+] as unknown as RnResponse[];
diff --git a/demo/src/styles.css b/demo/src/styles.css
index 1cb7ca8..0fba458 100644
--- a/demo/src/styles.css
+++ b/demo/src/styles.css
@@ -6158,3 +6158,57 @@ body {
     flex: 1 1 50%;
   }
 }
+
+/* ── React Native docs — embedded Expo Snack (right preview panel) ──────────── */
+
+/* Give the Snack more room than the component preview: narrower content column,
+   wider preview panel. */
+.docs-layout--rn .docs-content {
+  flex: 0 1 620px;
+}
+.docs-layout--rn .docs-preview-panel {
+  min-width: 440px;
+}
+
+.rn-preview-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 12px;
+  min-height: 0;
+}
+
+.rn-open-snack {
+  align-self: flex-end;
+  font-size: 13px;
+  font-weight: 600;
+  color: #3730a3;
+  background: #e0e7ff;
+  border: 1px solid #c7d2fe;
+  border-radius: 6px;
+  padding: 6px 12px;
+  text-decoration: none;
+}
+.rn-open-snack:hover {
+  background: #c7d2fe;
+}
+
+/* Phone frame holding the live react-native-web preview. */
+.rn-phone {
+  width: 100%;
+  max-width: 390px;
+  flex: 1;
+  min-height: 520px;
+  display: flex;
+  border: 10px solid #111827;
+  border-radius: 28px;
+  overflow: hidden;
+  background: #ffffff;
+}
+
+.rn-snack-note {
+  font-size: 13px;
+  color: #6b7280;
+}
diff --git a/demo/vite.config.ts b/demo/vite.config.ts
index 1c3604b..a38959d 100644
--- a/demo/vite.config.ts
+++ b/demo/vite.config.ts
@@ -1,7 +1,24 @@
-import { defineConfig } from 'vite';
+import { createRequire } from 'node:module';
 import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+// The React Native docs page renders `@mobile-reality/mdma-renderer-react-native`
+// live in the browser by aliasing `react-native` → `react-native-web`. Resolve
+// RNW to an absolute path: the renderer's `import … from 'react-native'` fires
+// from inside its own dist, where pnpm doesn't expose RNW.
+const require = createRequire(import.meta.url);
+const reactNativeWeb = require.resolve('react-native-web');
 
 export default defineConfig({
   plugins: [react()],
   base: '/mdma/',
+  define: {
+    global: 'window',
+    __DEV__: JSON.stringify(process.env.NODE_ENV !== 'production'),
+  },
+  resolve: {
+    alias: { 'react-native': reactNativeWeb },
+    extensions: ['.web.tsx', '.web.ts', '.web.jsx', '.web.js', '.tsx', '.ts', '.jsx', '.js'],
+  },
+  optimizeDeps: { include: ['react-native-web'] },
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 56c31cb..6ed0152 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -45,6 +45,9 @@ importers:
       '@mobile-reality/mdma-renderer-react':
         specifier: workspace:*
         version: link:../packages/renderer-react
+      '@mobile-reality/mdma-renderer-react-native':
+        specifier: workspace:*
+        version: link:../packages/renderer-react-native
       '@mobile-reality/mdma-runtime':
         specifier: workspace:*
         version: link:../packages/runtime
@@ -63,6 +66,9 @@ importers:
       react-dom:
         specifier: ^19.0.0
         version: 19.2.4(react@19.2.4)
+      react-native-web:
+        specifier: ^0.19.13
+        version: 0.19.13(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       recharts:
         specifier: ^3.7.0
         version: 3.7.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react-is@19.2.4)(react@19.2.4)(redux@5.0.1)
@@ -88,6 +94,9 @@ importers:
       '@vitejs/plugin-react':
         specifier: ^4.3.0
         version: 4.7.0(vite@6.4.1(@types/node@22.19.11)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.48.0)(tsx@4.21.0)(yaml@2.8.2))
+      react-native:
+        specifier: 0.76.9
+        version: 0.76.9(@babel/core@7.29.0)(@babel/preset-env@7.29.7(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.4)
       typescript:
         specifier: ^5.7.0
         version: 5.9.3
@@ -3132,6 +3141,9 @@ packages:
     resolution: {integrity: sha512-7v+xbTeEci9ZcQ/Z1OqI4RXcqN69wSMDYL5BAMvOReZ7U04+aDQ0/SQhClYPn6x2/RxM4WzMKSAuNyLKqvYVtw==}
     engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
 
+  '@react-native/normalize-colors@0.74.89':
+    resolution: {integrity: sha512-qoMMXddVKVhZ8PA1AbUCk83trpd6N+1nF2A6k1i6LsQObyS92fELuk8kU/lQs6M7BsMHwqyLCpQJ1uFgNvIQXg==}
+
   '@react-native/normalize-colors@0.76.9':
     resolution: {integrity: sha512-TUdMG2JGk72M9d8DYbubdOlrzTYjw+YMe/xOnLU4viDgWRHsCbtRS9x0IAxRjs3amj/7zmK3Atm8jUPvdAc8qw==}
 
@@ -4665,6 +4677,9 @@ packages:
   create-require@1.1.1:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
 
+  cross-fetch@3.2.0:
+    resolution: {integrity: sha512-Q+xVJLoGOeIMXZmbUK4HYk+69cQH6LudR0Vu/pRm2YlU/hDV9CiS0gKUMaWY5f2NeUH9C1nV3bsTlCo0FsTV1Q==}
+
   cross-fetch@4.1.0:
     resolution: {integrity: sha512-uKm5PU+MHTootlWEY+mZ4vvXoCn4fLQxT9dSc1sXVMSFkINTJVN8cAQROpwcKm8bJ/c7rgZVIBWzH5T78sNZZw==}
 
@@ -4675,6 +4690,9 @@ packages:
   crypt@0.0.2:
     resolution: {integrity: sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==}
 
+  css-in-js-utils@3.1.0:
+    resolution: {integrity: sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==}
+
   css-tree@3.1.0:
     resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
@@ -5317,6 +5335,9 @@ packages:
   fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
 
+  fast-loops@1.1.4:
+    resolution: {integrity: sha512-8dbd3XWoKCTms18ize6JmQF1SFnnfj5s0B7rRry22EofgMu7B6LKHVh+XfFqFGsqnbH54xgeO83PzpKI+ODhlg==}
+
   fast-safe-stringify@2.1.1:
     resolution: {integrity: sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==}
 
@@ -5349,6 +5370,12 @@ packages:
   fb-watchman@2.0.2:
     resolution: {integrity: sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==}
 
+  fbjs-css-vars@1.0.2:
+    resolution: {integrity: sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==}
+
+  fbjs@3.0.5:
+    resolution: {integrity: sha512-ztsSx77JBtkuMrEypfhgc3cI0+0h+svqeie7xHbh1k/IKdcydnvadp/mUaGgjAOXQmQSxsqgaRhS3q9fy+1kxg==}
+
   fdir@6.5.0:
     resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
     engines: {node: '>=12.0.0'}
@@ -5752,6 +5779,9 @@ packages:
     resolution: {integrity: sha512-eKCa6bwnJhvxj14kZk5NCPc6Hb6BdsU9DZcOnmQKSnO1VKrfV0zCvtttPZUsBvjmNDn8rpcJfpwSYnHBjc95MQ==}
     engines: {node: '>=18.18.0'}
 
+  hyphenate-style-name@1.1.0:
+    resolution: {integrity: sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==}
+
   ibm-cloud-sdk-core@5.4.13:
     resolution: {integrity: sha512-9GQSvkUC/upbcEcltG2E7iljQ8fOUMXnYmPaa/DhcFHC9d1ohHfYBlZsjMZQpYoR8xdquAgkfyCP8PZDc8OAWQ==}
     engines: {node: '>=20'}
@@ -5817,6 +5847,9 @@ packages:
       react-devtools-core:
         optional: true
 
+  inline-style-prefixer@6.0.4:
+    resolution: {integrity: sha512-FwXmZC2zbeeS7NzGjJ6pAiqRhXR0ugUShSNb6GApMl6da0/XGc4MOJsoWAywia52EEWbXNSy0pzkwz/+Y+swSg==}
+
   internmap@2.0.3:
     resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
     engines: {node: '>=12'}
@@ -6374,6 +6407,9 @@ packages:
   memoize-one@5.2.1:
     resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==}
 
+  memoize-one@6.0.0:
+    resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
+
   memory-pager@1.5.0:
     resolution: {integrity: sha512-ZS4Bp4r/Zoeq6+NLJpP+0Zzm0pR8whtGPf1XExKLJBAczGMnSi3It14OiNCStjQjM6NU1okjQGSxgEZN8eBYKg==}
 
@@ -7311,6 +7347,9 @@ packages:
     resolution: {integrity: sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==}
     engines: {node: '>=4.0.0'}
 
+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
   postcss@8.4.49:
     resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==}
     engines: {node: ^10 || ^12 || >=14}
@@ -7373,6 +7412,9 @@ packages:
     resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
     engines: {node: '>=0.4.0'}
 
+  promise@7.3.1:
+    resolution: {integrity: sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==}
+
   promise@8.3.0:
     resolution: {integrity: sha512-rZPNPKTOYVNEEKFaq1HqTgOwZD+4/YHS5ukLzQCypkj+OkYx7iv0mA91lJlpPPZ8vMau3IIGj5Qlwrx+8iiSmg==}
 
@@ -7477,6 +7519,12 @@ packages:
       react: '*'
       react-native: '*'
 
+  react-native-web@0.19.13:
+    resolution: {integrity: sha512-etv3bN8rJglrRCp/uL4p7l8QvUNUC++QwDbdZ8CB7BvZiMvsxfFIRM1j04vxNldG3uo2puRd6OSWR3ibtmc29A==}
+    peerDependencies:
+      react: ^18.0.0
+      react-dom: ^18.0.0
+
   react-native@0.76.9:
     resolution: {integrity: sha512-+LRwecWmTDco7OweGsrECIqJu0iyrREd6CTCgC/uLLYipiHvk+MH9nd6drFtCw/6Blz6eoKTcH9YTTJusNtrWg==}
     engines: {node: '>=18'}
@@ -7802,6 +7850,9 @@ packages:
     resolution: {integrity: sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==}
     engines: {node: '>= 18'}
 
+  setimmediate@1.0.5:
+    resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==}
+
   setprototypeof@1.2.0:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
 
@@ -8049,6 +8100,9 @@ packages:
   structured-headers@0.4.1:
     resolution: {integrity: sha512-0MP/Cxx5SzeeZ10p/bZI0S6MpgD+yxAhi1BOQ34jgnMXsCq3j1t6tQnZu+KdlL7dvJTLT3g9xN8tl10TqgFMcg==}
 
+  styleq@0.1.3:
+    resolution: {integrity: sha512-3ZUifmCDCQanjeej1f6kyl/BeP/Vae5EYkQ9iJfUm/QwZvlgnZzyflqAsAWYURdtea8Vkvswu2GrC57h3qffcA==}
+
   sucrase@3.35.1:
     resolution: {integrity: sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -8331,6 +8385,10 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  ua-parser-js@1.0.41:
+    resolution: {integrity: sha512-LbBDqdIC5s8iROCUjMbW1f5dJQTEFB1+KO9ogbvlb3nm9n4YHa5p4KTvFPWvh2Hs8gZMBuiB1/8+pdfe/tDPug==}
+    hasBin: true
+
   uint8array-extras@1.5.0:
     resolution: {integrity: sha512-rvKSBiC5zqCCiDZ9kAOszZcDvdAHwwIKJG33Ykj43OKcWsnmcBRL09YTU4nOeHZ8Y2a7l1MgTd08SBe9A8Qj6A==}
     engines: {node: '>=18'}
@@ -12656,6 +12714,8 @@ snapshots:
       - utf-8-validate
     optional: true
 
+  '@react-native/normalize-colors@0.74.89': {}
+
   '@react-native/normalize-colors@0.76.9': {}
 
   '@react-native/normalize-colors@0.81.5': {}
@@ -14344,6 +14404,12 @@ snapshots:
   create-require@1.1.1:
     optional: true
 
+  cross-fetch@3.2.0:
+    dependencies:
+      node-fetch: 2.7.0
+    transitivePeerDependencies:
+      - encoding
+
   cross-fetch@4.1.0:
     dependencies:
       node-fetch: 2.7.0
@@ -14359,6 +14425,10 @@ snapshots:
 
   crypt@0.0.2: {}
 
+  css-in-js-utils@3.1.0:
+    dependencies:
+      hyphenate-style-name: 1.1.0
+
   css-tree@3.1.0:
     dependencies:
       mdn-data: 2.12.2
@@ -14965,6 +15035,8 @@ snapshots:
 
   fast-json-stable-stringify@2.1.0: {}
 
+  fast-loops@1.1.4: {}
+
   fast-safe-stringify@2.1.1: {}
 
   fast-string-truncated-width@3.0.3: {}
@@ -15000,6 +15072,20 @@ snapshots:
     dependencies:
       bser: 2.1.1
 
+  fbjs-css-vars@1.0.2: {}
+
+  fbjs@3.0.5:
+    dependencies:
+      cross-fetch: 3.2.0
+      fbjs-css-vars: 1.0.2
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      promise: 7.3.1
+      setimmediate: 1.0.5
+      ua-parser-js: 1.0.41
+    transitivePeerDependencies:
+      - encoding
+
   fdir@6.5.0(picomatch@4.0.3):
     optionalDependencies:
       picomatch: 4.0.3
@@ -15469,6 +15555,8 @@ snapshots:
 
   human-signals@8.0.1: {}
 
+  hyphenate-style-name@1.1.0: {}
+
   ibm-cloud-sdk-core@5.4.13:
     dependencies:
       '@types/debug': 4.1.12
@@ -15562,6 +15650,11 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
+  inline-style-prefixer@6.0.4:
+    dependencies:
+      css-in-js-utils: 3.1.0
+      fast-loops: 1.1.4
+
   internmap@2.0.3: {}
 
   invariant@2.2.4:
@@ -16171,6 +16264,8 @@ snapshots:
 
   memoize-one@5.2.1: {}
 
+  memoize-one@6.0.0: {}
+
   memory-pager@1.5.0:
     optional: true
 
@@ -17627,6 +17722,8 @@ snapshots:
 
   pngjs@3.4.0: {}
 
+  postcss-value-parser@4.2.0: {}
+
   postcss@8.4.49:
     dependencies:
       nanoid: 3.3.15
@@ -17693,6 +17790,10 @@ snapshots:
 
   progress@2.0.3: {}
 
+  promise@7.3.1:
+    dependencies:
+      asap: 2.0.6
+
   promise@8.3.0:
     dependencies:
       asap: 2.0.6
@@ -18000,6 +18101,21 @@ snapshots:
       react: 19.1.0
       react-native: 0.81.5(@babel/core@7.29.0)(@react-native/metro-config@0.86.0(@babel/core@7.29.0))(@types/react@19.1.17)(react@19.1.0)
 
+  react-native-web@0.19.13(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      '@babel/runtime': 7.28.6
+      '@react-native/normalize-colors': 0.74.89
+      fbjs: 3.0.5
+      inline-style-prefixer: 6.0.4
+      memoize-one: 6.0.0
+      nullthrows: 1.1.1
+      postcss-value-parser: 4.2.0
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      styleq: 0.1.3
+    transitivePeerDependencies:
+      - encoding
+
   react-native@0.76.9(@babel/core@7.29.0)(@babel/preset-env@7.29.7(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.4):
     dependencies:
       '@jest/create-cache-key-function': 29.7.0
@@ -18490,6 +18606,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  setimmediate@1.0.5: {}
+
   setprototypeof@1.2.0: {}
 
   shallow-clone@3.0.1:
@@ -18790,6 +18908,8 @@ snapshots:
 
   structured-headers@0.4.1: {}
 
+  styleq@0.1.3: {}
+
   sucrase@3.35.1:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.13
@@ -19062,6 +19182,8 @@ snapshots:
   typescript@6.0.3:
     optional: true
 
+  ua-parser-js@1.0.41: {}
+
   uint8array-extras@1.5.0:
     optional: true