feat(fabric): HTML element fallback in createInstance

Expo Router DOM Components, with-html in the smoke matrix, and any
example that mixes `"use dom"` directives or HTML-rendered subtrees
emit lowercase HTML element names (`<div>`, `<p>`, `<span>`, `<h1>`,
…) directly into the React tree. Without a host mapping for those
names the reconciler hits the createInstance fallback and throws
`Unknown host element: <p>` before the first frame.

Map them onto the closest existing primitive:

- Structural (`div`, `section`, `nav`, `article`, `header`,
  `footer`, `ul`, `ol`, `li`, `table`/`tr`/`td`/`th`,
  `button`, `a`, `video`, `audio`, `canvas`, `iframe`,
  `details`, `summary`, `dialog`, `form`, `fieldset`,
  `label`, `figure`/`figcaption`) → `View`.
- Text-bearing (`p`, `span`, `strong`/`em`/`b`/`i`/`u`/`s`,
  `small`, `h1`–`h6`, `pre`/`code`/`kbd`/`samp`/`var`,
  `mark`, `sub`/`sup`/`abbr`/`cite`/`q`/`time`,
  `br`, `hr`) → `Paragraph`.

Layout / styling fidelity isn't the goal — just "boots and renders
something visible." That's enough to clear with-html's
`<div className="web:px-4">` header right + similar patterns in
react-flow's DOM rendering paths, and surfaces any deeper failures
(like the missing SVG primitives) instead of blanking out before
the first frame.

Author: ImLunaHey

apps/playground/runtime/fabricHostConfig.js

@@ -492,6 +492,106 @@ const hostConfig = {
       return makeInstance(tag, fabricNode, 'Text', type);
     }
 
+    // HTML element fallback. Expo Router DOM Components, with-html,
+    // and any example that mixes JSX with a `"use dom"` directive
+    // emit lowercase HTML element names (`<div>`, `<p>`, `<span>`,
+    // `<h1>` …) directly into the React tree. We don't have a real
+    // WebView host, but mapping the structural elements onto View
+    // and the text-bearing elements onto Paragraph is enough to let
+    // these trees mount + render the visible text without throwing.
+    // Layout / styling fidelity is not the goal here — just "boots
+    // and renders something" so the rest of the app surface gets a
+    // chance to run.
+    const HTML_VIEW_TAGS = new Set([
+      'div',
+      'section',
+      'nav',
+      'main',
+      'aside',
+      'article',
+      'header',
+      'footer',
+      'ul',
+      'ol',
+      'li',
+      'figure',
+      'figcaption',
+      'form',
+      'fieldset',
+      'label',
+      'table',
+      'thead',
+      'tbody',
+      'tfoot',
+      'tr',
+      'td',
+      'th',
+      'colgroup',
+      'col',
+      'video',
+      'audio',
+      'canvas',
+      'iframe',
+      'details',
+      'summary',
+      'dialog',
+      'button',
+      'a',
+    ]);
+    const HTML_TEXT_TAGS = new Set([
+      'p',
+      'span',
+      'strong',
+      'em',
+      'b',
+      'i',
+      'u',
+      's',
+      'small',
+      'h1',
+      'h2',
+      'h3',
+      'h4',
+      'h5',
+      'h6',
+      'pre',
+      'code',
+      'kbd',
+      'samp',
+      'var',
+      'mark',
+      'sub',
+      'sup',
+      'abbr',
+      'cite',
+      'q',
+      'time',
+      'br',
+      'hr',
+    ]);
+    if (HTML_VIEW_TAGS.has(type)) {
+      const tag = newTag();
+      const fabricNode = currentFabric.createNode(
+        tag,
+        'View',
+        currentSurfaceId,
+        buildFabricProps('view', props),
+        internalInstanceHandle,
+      );
+      return makeInstance(tag, fabricNode, 'View', type);
+    }
+    if (HTML_TEXT_TAGS.has(type)) {
+      const tag = newTag();
+      const fabricNode = currentFabric.createNode(
+        tag,
+        'Paragraph',
+        currentSurfaceId,
+        buildFabricProps('text', props),
+        internalInstanceHandle,
+      );
+      return makeInstance(tag, fabricNode, 'Paragraph', type);
+    }
+
     throw new Error('Unknown host element: <' + type + '>');
   },