From 412212f764b8c21699ab0d41edfdc317132db475 Mon Sep 17 00:00:00 2001
From: gitsad <marcin.sadowski95@outlook.com>
Date: Tue, 7 Jul 2026 12:34:43 +0200
Subject: [PATCH 1/3] chore: added initial docs

---
 demo/src/docs/DocsView.tsx             |  13 +-
 demo/src/docs/sections/ReactNative.tsx | 198 +++++++++++++++++++++++++
 demo/src/styles.css                    |  30 ++++
 3 files changed, 239 insertions(+), 2 deletions(-)
 create mode 100644 demo/src/docs/sections/ReactNative.tsx

diff --git a/demo/src/docs/DocsView.tsx b/demo/src/docs/DocsView.tsx
index b1c5118..1ce2386 100644
--- a/demo/src/docs/DocsView.tsx
+++ b/demo/src/docs/DocsView.tsx
@@ -12,6 +12,7 @@ import { Integrations, INTEGRATIONS } from './sections/Integrations.js';
 import { IntegrationLangchain } from './sections/IntegrationLangchain.js';
 import { IntegrationAgui } from './sections/IntegrationAgui.js';
 import { Usage, UsageHydrationPreview } from './sections/Usage.js';
+import { ReactNative, ReactNativeSnack } from './sections/ReactNative.js';
 import { Validator } from './sections/Validator.js';
 
 const INTEGRATION_COMPONENTS: Record<string, React.ComponentType> = {
@@ -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..0576993
--- /dev/null
+++ b/demo/src/docs/sections/ReactNative.tsx
@@ -0,0 +1,198 @@
+import { Code } from '../Code.js';
+
+// ── Static Expo Snack — a keyless chat that renders MDMA documents natively ──
+// The sample documents are PRE-PARSED here (at build time) and embedded as ASTs,
+// so the Snack imports only `runtime` + `renderer-react-native` — no unified /
+// remark / micromark. That keeps the Snack bundle small so it starts reliably.
+
+const A1 = {"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"Here you go:"}]},{"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"}}]};
+
+const A2 = {"type":"root","children":[{"type":"mdmaBlock","component":{"id":"preflight","type":"tasklist","label":"Pre-flight","sensitive":false,"disabled":false,"visible":true,"items":[{"id":"tests","text":"All tests green","checked":false,"required":false},{"id":"docs","text":"Docs updated","checked":false,"required":false}],"onComplete":"preflight-done"}},{"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}}]};
+
+const SNACK_CHAT = [
+  { role: 'user', text: 'Make me a contact form' },
+  { role: 'assistant', ast: A1 },
+  { role: 'user', text: 'Add a release checklist and an approval gate' },
+  { role: 'assistant', ast: A2 },
+];
+
+// The Snack program. The chat (with pre-parsed ASTs) is injected as JSON via
+// interpolation, so there are no backticks or escaped newlines to manage.
+const SNACK_CODE = `// MDMA — React Native renderer (static demo, no API key needed)
+if (!global.crypto) global.crypto = {};
+if (typeof global.crypto.randomUUID !== "function") {
+  // mdma-runtime uses crypto.randomUUID(); Hermes doesn't provide it.
+  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, { useMemo } from "react";
+import { SafeAreaView, ScrollView, View, Text, StyleSheet } from "react-native";
+import { createDocumentStore } from "@mobile-reality/mdma-runtime";
+import { MdmaDocument } from "@mobile-reality/mdma-renderer-react-native";
+
+// Pre-parsed MDMA documents — the components an agent would have generated.
+var CHAT = ${JSON.stringify(SNACK_CHAT)};
+
+function UserBubble(props) {
+  return (
+    <View style={styles.user}>
+      <Text style={styles.userText}>{props.text}</Text>
+    </View>
+  );
+}
+
+function BotBubble(props) {
+  var store = useMemo(function () {
+    return createDocumentStore(props.ast);
+  }, []);
+  return (
+    <View style={styles.bot}>
+      <MdmaDocument ast={props.ast} store={store} theme="light" />
+    </View>
+  );
+}
+
+export default function App() {
+  return (
+    <SafeAreaView style={styles.page}>
+      <ScrollView contentContainerStyle={styles.scroll}>
+        {CHAT.map(function (m, i) {
+          return m.role === "user" ? (
+            <UserBubble key={i} text={m.text} />
+          ) : (
+            <BotBubble key={i} ast={m.ast} />
+          );
+        })}
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+var styles = StyleSheet.create({
+  page: { flex: 1, backgroundColor: "#ffffff" },
+  scroll: { padding: 12, gap: 10 },
+  user: {
+    alignSelf: "flex-end",
+    maxWidth: "85%",
+    backgroundColor: "#2563eb",
+    borderRadius: 16,
+    borderBottomRightRadius: 4,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+  },
+  userText: { color: "#ffffff", fontSize: 15 },
+  bot: {
+    alignSelf: "stretch",
+    backgroundColor: "#ffffff",
+    borderColor: "#e5e7eb",
+    borderWidth: 1,
+    borderRadius: 16,
+    borderBottomLeftRadius: 4,
+    padding: 10,
+  },
+});
+`;
+
+const SNACK_DEPS = [
+  '@mobile-reality/mdma-renderer-react-native@0.2.0',
+  '@mobile-reality/mdma-runtime@0.3.0',
+  '@mobile-reality/mdma-spec@0.3.0',
+].join(',');
+
+const SNACK_URL = `https://snack.expo.dev/embedded?${new URLSearchParams({
+  code: SNACK_CODE,
+  dependencies: SNACK_DEPS,
+  // Run in-browser by default (no device transport to wait on); the QR for
+  // Expo Go stays available under the "My Device" tab. sdkVersion is omitted so
+  // Snack picks a version it actually supports.
+  platform: 'web',
+  preview: 'true',
+  supportedPlatforms: 'web,mydevice,ios,android',
+  theme: 'dark',
+  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 in Expo Go</h2>
+      <p>
+        A live, keyless example runs in the panel on the right — a static chat that renders MDMA
+        components natively. It defaults to the in-browser preview; switch to the{' '}
+        <strong>My Device</strong> tab for the{' '}
+        <a href="https://expo.dev/go" target="_blank" rel="noreferrer">Expo Go</a> QR code. There is
+        no agent and no API key.
+      </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, which is why it isn't embedded here.
+      </p>
+    </>
+  );
+}
+
+/** The embedded Expo Snack, rendered in the docs preview panel (right side). */
+export function ReactNativeSnack() {
+  return (
+    <div className="rn-snack-panel">
+      <iframe className="rn-snack" src={SNACK_URL} title="MDMA React Native — Expo Snack" />
+    </div>
+  );
+}
diff --git a/demo/src/styles.css b/demo/src/styles.css
index e4181ea..adce380 100644
--- a/demo/src/styles.css
+++ b/demo/src/styles.css
@@ -6160,3 +6160,33 @@ 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-snack-panel {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+
+.rn-snack {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-height: 560px;
+  border: 0;
+}
+
+.rn-snack-note {
+  font-size: 13px;
+  color: #6b7280;
+}

From 587fb3f587d9918885e0b7d9c92d5fb3df6bee72 Mon Sep 17 00:00:00 2001
From: gitsad <marcin.sadowski95@outlook.com>
Date: Tue, 7 Jul 2026 13:42:41 +0200
Subject: [PATCH 2/3] chore: added RN renderer in docs

---
 demo/package.json                             |   3 +
 demo/src/docs/sections/ReactNative.tsx        | 274 ++++++++++++------
 demo/src/docs/sections/ReactNativePreview.tsx | 266 +++++++++++++++++
 demo/src/docs/sections/rn-responses.ts        |  14 +
 demo/src/styles.css                           |  36 ++-
 demo/vite.config.ts                           |  17 ++
 pnpm-lock.yaml                                | 122 ++++++++
 7 files changed, 634 insertions(+), 98 deletions(-)
 create mode 100644 demo/src/docs/sections/ReactNativePreview.tsx
 create mode 100644 demo/src/docs/sections/rn-responses.ts

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/sections/ReactNative.tsx b/demo/src/docs/sections/ReactNative.tsx
index 0576993..39d0e74 100644
--- a/demo/src/docs/sections/ReactNative.tsx
+++ b/demo/src/docs/sections/ReactNative.tsx
@@ -1,27 +1,14 @@
 import { Code } from '../Code.js';
+import { ReactNativePreview } from './ReactNativePreview.js';
+import { RN_RESPONSES } from './rn-responses.js';
 
-// ── Static Expo Snack — a keyless chat that renders MDMA documents natively ──
-// The sample documents are PRE-PARSED here (at build time) and embedded as ASTs,
-// so the Snack imports only `runtime` + `renderer-react-native` — no unified /
-// remark / micromark. That keeps the Snack bundle small so it starts reliably.
-
-const A1 = {"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"Here you go:"}]},{"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"}}]};
-
-const A2 = {"type":"root","children":[{"type":"mdmaBlock","component":{"id":"preflight","type":"tasklist","label":"Pre-flight","sensitive":false,"disabled":false,"visible":true,"items":[{"id":"tests","text":"All tests green","checked":false,"required":false},{"id":"docs","text":"Docs updated","checked":false,"required":false}],"onComplete":"preflight-done"}},{"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}}]};
-
-const SNACK_CHAT = [
-  { role: 'user', text: 'Make me a contact form' },
-  { role: 'assistant', ast: A1 },
-  { role: 'user', text: 'Add a release checklist and an approval gate' },
-  { role: 'assistant', ast: A2 },
-];
-
-// The Snack program. The chat (with pre-parsed ASTs) is injected as JSON via
-// interpolation, so there are no backticks or escaped newlines to manage.
-const SNACK_CODE = `// MDMA — React Native renderer (static demo, no API key needed)
+// 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") {
-  // mdma-runtime uses crypto.randomUUID(); Hermes doesn't provide it.
   global.crypto.randomUUID = function () {
     return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (ch) {
       var r = (Math.random() * 16) | 0;
@@ -31,90 +18,187 @@ if (typeof global.crypto.randomUUID !== "function") {
   };
 }
 
-import React, { useMemo } from "react";
-import { SafeAreaView, ScrollView, View, Text, StyleSheet } from "react-native";
+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";
 
-// Pre-parsed MDMA documents — the components an agent would have generated.
-var CHAT = ${JSON.stringify(SNACK_CHAT)};
-
-function UserBubble(props) {
-  return (
-    <View style={styles.user}>
-      <Text style={styles.userText}>{props.text}</Text>
-    </View>
-  );
-}
+var RESPONSES = ${JSON.stringify(RN_RESPONSES)};
+var CHIPS = ["Contact form", "Release checklist", "Adoption table", "Approval gate"];
+var BLUE = "#2563eb";
+var BORDER = "#e5e7eb";
 
-function BotBubble(props) {
-  var store = useMemo(function () {
-    return createDocumentStore(props.ast);
-  }, []);
-  return (
-    <View style={styles.bot}>
-      <MdmaDocument ast={props.ast} store={store} theme="light" />
-    </View>
-  );
+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}>
-      <ScrollView contentContainerStyle={styles.scroll}>
-        {CHAT.map(function (m, i) {
-          return m.role === "user" ? (
-            <UserBubble key={i} text={m.text} />
-          ) : (
-            <BotBubble key={i} ast={m.ast} />
-          );
-        })}
-      </ScrollView>
+      <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: "#ffffff" },
-  scroll: { padding: 12, gap: 10 },
-  user: {
-    alignSelf: "flex-end",
-    maxWidth: "85%",
-    backgroundColor: "#2563eb",
-    borderRadius: 16,
-    borderBottomRightRadius: 4,
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-  },
-  userText: { color: "#ffffff", fontSize: 15 },
-  bot: {
-    alignSelf: "stretch",
-    backgroundColor: "#ffffff",
-    borderColor: "#e5e7eb",
-    borderWidth: 1,
-    borderRadius: 16,
-    borderBottomLeftRadius: 4,
-    padding: 10,
-  },
+  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.0',
-  '@mobile-reality/mdma-runtime@0.3.0',
-  '@mobile-reality/mdma-spec@0.3.0',
+  '@mobile-reality/mdma-renderer-react-native@0.2.1',
+  '@mobile-reality/mdma-runtime@0.3.1',
+  '@mobile-reality/mdma-spec@0.3.1',
 ].join(',');
 
-const SNACK_URL = `https://snack.expo.dev/embedded?${new URLSearchParams({
+// 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,
-  // Run in-browser by default (no device transport to wait on); the QR for
-  // Expo Go stays available under the "My Device" tab. sdkVersion is omitted so
-  // Snack picks a version it actually supports.
-  platform: 'web',
-  preview: 'true',
-  supportedPlatforms: 'web,mydevice,ios,android',
-  theme: 'dark',
+  platform: 'mydevice',
+  supportedPlatforms: 'mydevice,ios,android,web',
   name: 'MDMA — React Native renderer',
 }).toString()}`;
 
@@ -171,28 +255,34 @@ export function Screen({ markdown }: { markdown: string }) {
         <code>customizations.components.&lt;type&gt;</code> slot the web renderer uses.
       </p>
 
-      <h2>Try it in Expo Go</h2>
+      <h2>Try it</h2>
       <p>
-        A live, keyless example runs in the panel on the right — a static chat that renders MDMA
-        components natively. It defaults to the in-browser preview; switch to the{' '}
-        <strong>My Device</strong> tab for the{' '}
-        <a href="https://expo.dev/go" target="_blank" rel="noreferrer">Expo Go</a> QR code. There is
-        no agent and no API key.
+        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, which is why it isn't embedded here.
+        <code>.env</code> file.
       </p>
     </>
   );
 }
 
-/** The embedded Expo Snack, rendered in the docs preview panel (right side). */
+/** 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-snack-panel">
-      <iframe className="rn-snack" src={SNACK_URL} title="MDMA React Native — Expo Snack" />
+    <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..ca18c3e
--- /dev/null
+++ b/demo/src/docs/sections/ReactNativePreview.tsx
@@ -0,0 +1,266 @@
+// 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 {
+  View,
+  Text,
+  TextInput,
+  Pressable,
+  ScrollView,
+  ActivityIndicator,
+  StyleSheet,
+} from 'react-native';
+import { MdmaDocument } from '@mobile-reality/mdma-renderer-react-native';
+import { createDocumentStore, type DocumentStore } from '@mobile-reality/mdma-runtime';
+import type { MdmaRoot } from '@mobile-reality/mdma-spec';
+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..0427059
--- /dev/null
+++ b/demo/src/docs/sections/rn-responses.ts
@@ -0,0 +1,14 @@
+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 3c1a606..0fba458 100644
--- a/demo/src/styles.css
+++ b/demo/src/styles.css
@@ -6170,18 +6170,42 @@ body {
   min-width: 440px;
 }
 
-.rn-snack-panel {
+.rn-preview-panel {
   flex: 1;
   display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 12px;
   min-height: 0;
 }
 
-.rn-snack {
-  display: block;
+.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%;
-  height: 100%;
-  min-height: 560px;
-  border: 0;
+  max-width: 390px;
+  flex: 1;
+  min-height: 520px;
+  display: flex;
+  border: 10px solid #111827;
+  border-radius: 28px;
+  overflow: hidden;
+  background: #ffffff;
 }
 
 .rn-snack-note {
diff --git a/demo/vite.config.ts b/demo/vite.config.ts
index 1c3604b..f32924b 100644
--- a/demo/vite.config.ts
+++ b/demo/vite.config.ts
@@ -1,7 +1,24 @@
+import { createRequire } from 'node:module';
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 
+// 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
 

From d5b1ed8e0ebb4ea96ac9017ea19017377e6a83c2 Mon Sep 17 00:00:00 2001
From: gitsad <marcin.sadowski95@outlook.com>
Date: Tue, 7 Jul 2026 13:46:07 +0200
Subject: [PATCH 3/3] chore: lint

---
 demo/src/docs/DocsView.tsx                    |  10 +-
 demo/src/docs/sections/ReactNative.tsx        |  14 +-
 demo/src/docs/sections/ReactNativePreview.tsx |  14 +-
 demo/src/docs/sections/rn-responses.ts        | 124 +++++++++++++++++-
 demo/vite.config.ts                           |   2 +-
 5 files changed, 143 insertions(+), 21 deletions(-)

diff --git a/demo/src/docs/DocsView.tsx b/demo/src/docs/DocsView.tsx
index 1ce2386..9357f2e 100644
--- a/demo/src/docs/DocsView.tsx
+++ b/demo/src/docs/DocsView.tsx
@@ -1,18 +1,18 @@
-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 { Usage, UsageHydrationPreview } from './sections/Usage.js';
 import { ReactNative, ReactNativeSnack } from './sections/ReactNative.js';
+import { Usage, UsageHydrationPreview } from './sections/Usage.js';
 import { Validator } from './sections/Validator.js';
 
 const INTEGRATION_COMPONENTS: Record<string, React.ComponentType> = {
diff --git a/demo/src/docs/sections/ReactNative.tsx b/demo/src/docs/sections/ReactNative.tsx
index 39d0e74..ab97883 100644
--- a/demo/src/docs/sections/ReactNative.tsx
+++ b/demo/src/docs/sections/ReactNative.tsx
@@ -220,9 +220,9 @@ export function ReactNative() {
 
       <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.
+        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';
@@ -258,10 +258,10 @@ export function Screen({ markdown }: { markdown: string }) {
       <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.
+        <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{' '}
diff --git a/demo/src/docs/sections/ReactNativePreview.tsx b/demo/src/docs/sections/ReactNativePreview.tsx
index ca18c3e..a2b39c2 100644
--- a/demo/src/docs/sections/ReactNativePreview.tsx
+++ b/demo/src/docs/sections/ReactNativePreview.tsx
@@ -1,20 +1,20 @@
+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 {
-  View,
-  Text,
-  TextInput,
+  ActivityIndicator,
   Pressable,
   ScrollView,
-  ActivityIndicator,
   StyleSheet,
+  Text,
+  TextInput,
+  View,
 } from 'react-native';
-import { MdmaDocument } from '@mobile-reality/mdma-renderer-react-native';
-import { createDocumentStore, type DocumentStore } from '@mobile-reality/mdma-runtime';
-import type { MdmaRoot } from '@mobile-reality/mdma-spec';
 import { RN_RESPONSES } from './rn-responses.js';
 
 interface Msg {
diff --git a/demo/src/docs/sections/rn-responses.ts b/demo/src/docs/sections/rn-responses.ts
index 0427059..1c654fb 100644
--- a/demo/src/docs/sections/rn-responses.ts
+++ b/demo/src/docs/sections/rn-responses.ts
@@ -11,4 +11,126 @@ export interface RnResponse {
 // 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[];
+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/vite.config.ts b/demo/vite.config.ts
index f32924b..a38959d 100644
--- a/demo/vite.config.ts
+++ b/demo/vite.config.ts
@@ -1,6 +1,6 @@
 import { createRequire } from 'node:module';
-import { defineConfig } from 'vite';
 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