@symbiote-native/cli 0.0.1

package/templates/js/angular/tsconfig.angular.json

@@ -0,0 +1,42 @@
+{
+  "extends": "@symbiote-native/angular/tsconfig.angular.base.json",
+  "compilerOptions": {
+    // packages/navigation's `./angular` export now hands ngc a prebuilt
+    // `build-ngc/angular/index.d.ts` (a conditional `exports` entry, mirroring
+    // packages/splash-screen and adapters/angular) instead of raw `.ts` source, so this app no
+    // longer pulls sibling package source into its own program — declaration files are exempt
+    // from TS's rootDir check, so rootDir stays scoped to this directory like every other
+    // `.examples/*` app.
+    "rootDir": ".",
+    "outDir": "build/angular",
+    "baseUrl": "."
+  },
+  "files": ["src/App.ts", "src/css.d.ts"],
+  "exclude": ["build", "e2e", "**/node_modules", "**/Pods"],
+  // `ngc --watch` (perform_watch.js) chokidar-watches `angularCompilerOptions.basePath`
+  // recursively, filtered only by a hardcoded regex (node_modules/.dotfiles/.js/.map/
+  // .metadata.json — NOT ios/android/build). basePath defaults to dirname(this file) =
+  // examples/angular/, a sibling of ios/ (17k+ files) and android/ (1k+ files), so the watcher
+  // recursed into both and hit EMFILE. All real source now lives under src/ (moved 2026-07-14
+  // specifically for this), so basePath narrows the watch root to just that — confirmed empirically
+  // that overriding basePath does NOT affect file/rootDir resolution (parseJsonConfigFileContent
+  // uses it only as the include/exclude glob base, independent of `files`), only the watch root.
+  // Kept relative here (portable, machine-independent) even though @angular/compiler-cli's
+  // INCREMENTAL recompile path needs it absolute (throws TS500 "path is not absolute" via
+  // absoluteFrom() otherwise, on the second file change onward) — symbiote-angular-dev.cjs
+  // resolves it to absolute at spawn time via a throwaway override config, so this file never
+  // carries a hardcoded machine path. `ngc -p tsconfig.angular.json` one-shot builds (ng:build)
+  // don't need that resolution — a relative basePath is fine for a cold compile.
+  "angularCompilerOptions": {
+    "basePath": "src"
+  },
+  // Editor tsserver honors this (and resolves it relative to THIS file, not the
+  // extended tsconfig.angular.base.json — microsoft/TypeScript#55656 — so it can't
+  // live in the shared base). `ngc --watch` itself does NOT: @angular/compiler-cli's
+  // watch mode calls chokidar directly (perform_watch.js) instead of TS's native
+  // watch host, so watchOptions has zero effect on it — the angularCompilerOptions.basePath
+  // above is what actually fixes the watch scope.
+  "watchOptions": {
+    "excludeDirectories": ["**/node_modules", "../../node_modules", "**/.git", "**/build"]
+  }
+}

package/templates/js/angular/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "@react-native/typescript-config",
+  "compilerOptions": {
+    // @angular/core's own .d.ts surface references DOM lib types (Node, Document, …) even though
+    // this adapter never touches a real DOM at runtime (DOM-less bootstrap, see render.ts) — every
+    // file importing it needs DOM in scope or an editor language server spams TS2584 on those
+    // ambient names. tsconfig.angular.json (the real ngc build config) already sets this; mirrored
+    // here so editor diagnostics for the whole example (not just App.ts) match the real build.
+    "lib": ["ES2022", "DOM"],
+    "types": [],
+    "plugins": [{ "name": "@symbiote-native/css-parser/typescript-plugin" }]
+  },
+  "include": ["**/*.ts"],
+  // e2e/ ships its own complete tsconfig.json (jest + detox + node) — excluded here so this
+  // root config, which has no reason to typecheck it, doesn't also need jest's globals declared.
+  "exclude": ["build", "**/node_modules", "**/Pods", "e2e"]
+}

package/templates/js/react/.prettierrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  arrowParens: 'avoid',
+  singleQuote: true,
+  trailingComma: 'all',
+};

package/templates/js/react/.watchmanconfig

@@ -0,0 +1 @@
+{}

package/templates/js/react/App.css

@@ -0,0 +1,69 @@
+:root {
+  --ink: #0b1622;
+  --paper: #13243a;
+  --mist: #41506a;
+  --chalk: #cbd5e1;
+  --chalk-bright: #ffffff;
+  --brand: #61dafb;
+}
+
+.screen {
+  flex: 1;
+  background-color: var(--ink);
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+  padding: 24px 32px;
+}
+
+.brand-logo {
+  height: 64px;
+  aspect-ratio: 1.0977;
+}
+
+.title {
+  color: var(--chalk-bright);
+  font-size: 22px;
+  font-weight: bold;
+  text-align: center;
+}
+
+.subtitle {
+  color: var(--chalk);
+  font-size: 14px;
+  text-align: center;
+}
+
+.counter-card {
+  align-items: center;
+  gap: 4px;
+  padding: 20px 28px;
+  border-radius: 16px;
+  background-color: var(--paper);
+}
+
+.counter-label {
+  color: var(--mist);
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+
+.counter-value {
+  color: var(--brand);
+  font-size: 32px;
+  font-weight: bold;
+}
+
+.button-primary {
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  padding: 14px 22px;
+  background-color: var(--brand);
+}
+
+.button-primary-text {
+  color: var(--ink);
+  font-size: 15px;
+  font-weight: bold;
+}

package/templates/js/react/App.jsx

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+import './App.css';
+
+export default function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <safe-area-view className="screen">
+      <image
+        className="brand-logo"
+        resizeMode="contain"
+        source={require('./assets/react-native-logo.png')}
+      />
+      <text className="title">Welcome to SymbioteNative!</text>
+      <text className="subtitle">Framework-agnostic React Native, driven by React.</text>
+
+      <view className="counter-card">
+        <text className="counter-label">TAPS</text>
+        <text className="counter-value">{count}</text>
+      </view>
+
+      <pressable className="button-primary" onPress={() => setCount((value) => value + 1)}>
+        <text className="button-primary-text">Tap me</text>
+      </pressable>
+    </safe-area-view>
+  );
+}

package/templates/js/react/App.tsx

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+import './App.css';
+
+export default function App() {
+  const [count, setCount] = useState<number>(0);
+
+  return (
+    <safe-area-view className="screen">
+      <image
+        className="brand-logo"
+        resizeMode="contain"
+        source={require('./assets/react-native-logo.png')}
+      />
+      <text className="title">Welcome to SymbioteNative!</text>
+      <text className="subtitle">Framework-agnostic React Native, driven by React.</text>
+
+      <view className="counter-card">
+        <text className="counter-label">TAPS</text>
+        <text className="counter-value">{count}</text>
+      </view>
+
+      <pressable className="button-primary" onPress={() => setCount((value) => value + 1)}>
+        <text className="button-primary-text">Tap me</text>
+      </pressable>
+    </safe-area-view>
+  );
+}

package/templates/js/react/README.md

@@ -0,0 +1,116 @@
+# `templates/js/react`
+
+The React JS-level overlay for `@symbiote-native/cli new --framework react`. Combined at generation
+time with `templates/native/{ios,android}` (the framework-agnostic native shell, shared by
+every framework) to produce a full bare React Native app. Source of truth for every file here:
+`examples/react` — the reference React canary — root-level files only (its `ios/`/`android/`
+are covered by `templates/native`, not this folder).
+
+## What was copied, and why each belongs in the seam
+
+Every file below is bootstrap/tooling: identical (or safe-to-reuse-verbatim) in any new
+SymbioteNative React app, regardless of what screens/components the app author writes.
+
+| File | Why it's part of the seam |
+|---|---|
+| `index.js` | The RN entry point. Calls `registerApp(App, { appName })` from `@symbiote-native/react/bootstrap`, which wires the native-host seams (colors, images, device events, third-party ViewConfigs) before mounting — every generated app needs this exact wiring, only `App` and `appName` vary. |
+| `metro.config.js` | Wires `@symbiote-native/react/metro-css-parser` as Metro's `babelTransformerPath` (so `.css`/`.scss`/`.sass`/`.less`/`.styl` imports compile) and extends `resolver.sourceExts` accordingly. Framework-agnostic mechanism, React-specific only in which adapter package's transformer it points at. |
+| `babel.config.js` | `@react-native/babel-preset` plus a small custom plugin that inlines `process.env.DEBUG` at bundle time, so `DEBUG=1` diagnostic logging (`dlog`/`isDebug` from `@symbiote-native/engine`) can be toggled without a runtime dependency. Generic to every SymbioteNative app. |
+| `tsconfig.json` | Extends `@react-native/typescript-config` and registers `@symbiote-native/css-parser/typescript-plugin` for live per-file CSS-module typing in the editor. No app-specific paths. |
+| `app.json` | RN's app registry name (`name`/`displayName`). Copied verbatim — see the parameterization note below. |
+| `css.d.ts` | Ambient module declarations for `*.css` (side-effect import) and the generic `*.module.css` fallback typing. Needed by any app that imports CSS, regardless of what the CSS contains. |
+| `.eslintrc.js` | `extends: '@react-native'` — the standard RN lint baseline, no app-specific rules. |
+| `.prettierrc.js` | Formatting preferences (`arrowParens`, `singleQuote`, `trailingComma`) — a project-wide style choice, not app content. |
+| `.watchmanconfig` | Empty `{}` — Watchman's marker file, identical in every RN project. |
+| `.gitignore` | Standard RN ignore rules (Xcode/Gradle build artifacts, CocoaPods, node_modules, Detox artifacts, etc.) — applies at the generated app's root, which is where both this overlay and `templates/native` land, so it still earns its place here even though some entries (`ios/build/`, `.gradle`) cover the native tree. |
+| `package.json.fragment.json` | Not from `examples/react` directly — see below. |
+
+## What was deliberately excluded, and why
+
+- **App content**: `App.tsx`, `App.css`, `components/`, `screens/`, `navigation-lines.ts`,
+  `navigation-linking.ts`, `routes.ts`, `assets/` — the example's own demo screens/components,
+  not part of the scaffold seam. A generated app needs its own `App` from scratch (or a future
+  minimal starter, out of scope for this pass).
+- **`e2e/`** — the example's own Detox test journeys (`canary-journeys.test.ts`,
+  `probe.test.ts`), written against the example's specific screens/navigation. Not applicable
+  to a freshly generated app with no screens yet.
+- **`package-lock.json`** — a lockfile is generated fresh by whichever package manager
+  `@symbiote-native/cli new --pm <pm>` runs, never copied.
+- **`README.md`** (the example's own) — documents the *example app*'s specific run/test
+  instructions (mentions "Canary" by name, the shared-native-shell caveat between the three
+  React/Vue examples). Not generic bootstrap content; a generated app gets its own README from
+  a future `generate.ts`, not this one verbatim.
+
+## Judgment calls on borderline files
+
+- **`Gemfile` / `Gemfile.lock`** — excluded. These pin CocoaPods/Ruby gem versions for iOS
+  builds, which makes them native-tooling config, not JS-level config — closer in kind to
+  `templates/native/ios/Podfile`/`Podfile.lock` (which already live in the native shell) than
+  to anything in this folder. `templates/native/ios` doesn't currently have a `Gemfile` either,
+  which looks like a real gap for the native shell to close in its own pass — flagging it here
+  rather than silently copying it into `templates/js/react` (wrong tree) or into
+  `templates/native` (out of scope for this task, which was scoped to `templates/js/react`
+  only).
+- **`detox.config.js`** — excluded. It's e2e test infrastructure, symmetric with excluding
+  `e2e/` itself (the config is useless without the test files it points at via
+  `testRunner.args.config: 'e2e/jest.config.js'`). It also hardcodes the literal app name/scheme
+  ("Canary", `ios/Canary.xcworkspace`) the same way `app.json` does — another argument for
+  treating e2e wiring as a later, parameterization-aware addition rather than a verbatim copy
+  now.
+- **`app.json`** — copied, but **not parameterized**. Its `name`/`displayName` are still the
+  literal `"Canary"` values from `examples/react`. Inventing a placeholder/templating scheme
+  (e.g. `ejs` variables) is explicitly out of scope for this pass — that's real follow-up work
+  for `@symbiote-native/cli new`'s actual generation logic, which as of this pass is still stubbed
+  with `NotImplementedCommandError` in `src/commands/new.ts`/`src/commands/add.ts`. When that
+  lands, `app.json`'s `name` (and the matching native-side bundle id / scheme) needs to be
+  rewritten per-app, not left as this example's value.
+
+## `package.json.fragment.json`
+
+A dependency **fragment**, not a full `package.json` — this folder isn't itself an npm
+package. Lists only the dependencies a generated React app's `package.json` needs to run the
+files above, pulled from `examples/react/package.json`'s exact (real, working) version ranges:
+
+```json
+{
+  "dependencies": {
+    "@symbiote-native/react": "^0.2.8",
+    "react": "19.2.3",
+    "react-native": "0.86.0"
+  },
+  "devDependencies": {
+    "@react-native/babel-preset": "0.86.0",
+    "@react-native/metro-config": "0.86.0"
+  }
+}
+```
+
+Derivation: `@symbiote-native/react`, `react`, `react-native` per the task brief (the
+SymbioteNative React runtime plus its two peer-dependency anchors — see
+`<react_native_is_an_explicit_top_level_peer>` in the root `CLAUDE.md`); `@react-native/babel-
+preset` because `babel.config.js` names it in its `presets` array; `@react-native/metro-config`
+because `metro.config.js` `require()`s it directly.
+
+**Not included, on purpose** (scoped out by the task brief, which limited the "actually
+import/require" check to `index.js`/`metro.config.js`/`babel.config.js`): `tsconfig.json` also
+needs `@react-native/typescript-config` (its `extends`) and `@symbiote-native/css-parser` (its
+`plugins` entry), and `.eslintrc.js` needs `@react-native/eslint-config` (its `extends:
+'@react-native'` shorthand) plus `eslint` itself. A real generated `package.json` will need
+those too — flagging them here rather than silently expanding this fragment beyond what was
+asked, since the actual merge logic (and whether it lives in this fragment or a separate
+devDependencies-only fragment) is a `generate.ts` design decision, not this pass's call to
+make.
+
+## No app-name/bundle-id parameterization yet
+
+Worth repeating on its own: nothing in this folder is templated. `app.json`'s `name` field is
+the literal `"Canary"` example value, unchanged. Turning this into a real generator — choosing
+a templating mechanism (the package README's own notes point at `ejs`, matching `create-vue`'s
+toolchain, but that's not decided or installed yet), parameterizing `app.json`, and wiring the
+native-side app name/bundle id to match — is real follow-up work for `@symbiote-native/cli new`'s
+generation logic, which is still stubbed with `NotImplementedCommandError` as of this pass.
+
+## Precedent
+
+`examples/react` (bare) / `examples/expo-react` (what `--expo-modules` adds on top — not yet
+reflected in this folder, since `--expo-modules` overlay content wasn't part of this pass).

package/templates/js/react/app.json

@@ -0,0 +1,4 @@
+{
+  "name": "Canary",
+  "displayName": "Canary"
+}

package/templates/js/react/babel.config.js

@@ -0,0 +1,24 @@
+// Inline `process.env.DEBUG` at bundle time so the @symbiote diagnostic logs can
+// be toggled from the shell without a dependency:
+//   DEBUG=1 npx react-native start --reset-cache
+// The value is read from Metro's own environment when this config is evaluated
+// and baked into every transformed module (the app entry and the shared source).
+const debugFlag = process.env.DEBUG === '1' ? '1' : '0';
+
+function inlineDebugFlag({ types: t }) {
+  return {
+    name: 'inline-debug-flag',
+    visitor: {
+      MemberExpression(path) {
+        if (path.matchesPattern('process.env.DEBUG')) {
+          path.replaceWith(t.stringLiteral(debugFlag));
+        }
+      },
+    },
+  };
+}
+
+module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+  plugins: [inlineDebugFlag],
+};

package/templates/js/react/css.d.ts

@@ -0,0 +1,24 @@
+// Ambient module for a plain, side-effect-only `.css` import (`import './App.css'`) —
+// @symbiote-native/css-parser compiles it at build time (Metro's babelTransformerPath, see
+// metro-css-transformer.js) into a registerStyles() call; there's no runtime export to type.
+// Mirrors examples/angular/css.d.ts.
+declare module '*.css';
+
+// Same shape for the three optional preprocessor sources — css-parser reduces each to plain CSS
+// before compiling, so a side-effect import of one is indistinguishable downstream from a `.css`
+// one.
+declare module '*.scss';
+declare module '*.sass';
+declare module '*.less';
+declare module '*.styl';
+
+// Generic (non-literal) fallback for a `.module.css` import — used by `tsc` outside a file that
+// already has its own generated `Card.module.css.d.ts` (see `css-dts`, wired to `pretypecheck`;
+// a real per-file `.d.ts` takes priority over this wildcard once generated). The
+// `@symbiote-native/react/typescript-plugin` entry in tsconfig.json's `compilerOptions.plugins` gives
+// the SAME per-file literal-key typing live in the editor — plugins never load for a standalone
+// `tsc`/CI run, which is why both mechanisms exist side by side.
+declare module '*.module.css' {
+  const styles: Record<string, string>;
+  export default styles;
+}

package/templates/js/react/index.js

@@ -0,0 +1,14 @@
+/**
+ * @format
+ *
+ * Symbiote canary entry. App code uses our own AppRegistry (the RN-identical
+ * `registerComponent(appKey, () => App)`) which mounts via @symbiote-native/engine, not
+ * React Native's renderer; registerApp wires the native-host seams (colors, images, device
+ * events, third-party ViewConfigs) before registering, so this file only needs the app itself.
+ */
+
+import { registerApp } from '@symbiote-native/react/bootstrap';
+import App from './App';
+import { name as appName } from './app.json';
+
+registerApp(App, { appName });

package/templates/js/react/metro.config.js

@@ -0,0 +1,29 @@
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+
+const projectRoot = __dirname;
+
+/**
+ * @symbiote-native/* resolve as ordinary npm packages from this app's own node_modules
+ * (examples/* is a standalone npm install, decoupled from the monorepo's pnpm workspace —
+ * see pnpm-workspace.yaml). @react-native/babel-preset strips the types.
+ *
+ * @type {import('@react-native/metro-config').MetroConfig}
+ */
+const defaultConfig = getDefaultConfig(projectRoot);
+
+const config = {
+  // Compile standalone .css/.module.css imports on the way into the bundle —
+  // @symbiote-native/react ships this transformer itself, the framework-agnostic path
+  // mirrored by the Vue and Angular examples' own adapter's ./metro-css-parser export.
+  transformer: {
+    babelTransformerPath: require.resolve('@symbiote-native/react/metro-css-parser'),
+  },
+  resolver: {
+    // Teach Metro that a style file is a source file (the transformer turns it into a module).
+    // scss/sass/less/styl are optional SCSS/Sass/Less/Stylus preprocessor sources handled by
+    // core/css-parser/src/preprocessors.ts, which reduces each to plain CSS before compiling.
+    sourceExts: [...defaultConfig.resolver.sourceExts, 'css', 'scss', 'sass', 'less', 'styl'],
+  },
+};
+
+module.exports = mergeConfig(defaultConfig, config);

package/templates/js/react/package.json.fragment.json

@@ -0,0 +1,22 @@
+{
+  "scripts": {
+    "android": "react-native run-android",
+    "android:release": "react-native run-android --mode Release",
+    "ios": "react-native run-ios",
+    "ios:release": "react-native run-ios --mode Release",
+    "lint": "eslint .",
+    "start": "react-native start",
+    "dev": "react-native start --reset-cache"
+  },
+  "dependencies": {
+    "@symbiote-native/android": "latest",
+    "@symbiote-native/engine": "latest",
+    "@symbiote-native/react": "latest",
+    "react": "19.2.3",
+    "react-native": "0.86.0"
+  },
+  "devDependencies": {
+    "@react-native/babel-preset": "0.86.0",
+    "@react-native/metro-config": "0.86.0"
+  }
+}

package/templates/js/react/package.json.fragment.typescript.json

@@ -0,0 +1,11 @@
+{
+  "scripts": {
+    "pretypecheck": "css-dts .",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@react-native/typescript-config": "0.86.0",
+    "@types/react": "^19.2.0",
+    "typescript": "~6.0.0"
+  }
+}

package/templates/js/react/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "@react-native/typescript-config",
+  "compilerOptions": {
+    // @react-native/typescript-config's own base unconditionally sets types:["jest"] — an empty
+    // array here is a real override (not just "no opinion"), needed because @types/jest is only
+    // resolvable once --testing installs it; omitting this key entirely would inherit the
+    // base's ["jest"] through `extends` and fail with "Cannot find type definition file 'jest'".
+    "types": [],
+    // The adapter owns its own JSX namespace (adapters/react/src/jsx-runtime.ts) — without this,
+    // `<view>`/`<text>` are unknown intrinsics to tsc.
+    "jsxImportSource": "@symbiote-native/react",
+    "plugins": [{ "name": "@symbiote-native/css-parser/typescript-plugin" }]
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  // e2e/ ships its own complete tsconfig.json (jest + detox + node) — excluded here so this root
+  // config, which has no reason to typecheck it, doesn't also need jest's globals declared.
+  "exclude": ["**/node_modules", "**/Pods", "e2e"]
+}

package/templates/js/solid/.prettierrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  arrowParens: 'avoid',
+  singleQuote: true,
+  trailingComma: 'all',
+};

package/templates/js/solid/.watchmanconfig

@@ -0,0 +1 @@
+{}

package/templates/js/solid/App.css

@@ -0,0 +1,89 @@
+:root {
+  --ink: #0b1622;
+  --paper: #13243a;
+  --mist: #41506a;
+  --chalk: #cbd5e1;
+  --chalk-bright: #ffffff;
+  --brand: #2c4f7c;
+}
+
+.screen {
+  flex: 1;
+  background-color: var(--ink);
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+  padding: 24px 32px;
+}
+
+.brand-row {
+  flex-direction: row;
+  align-items: center;
+  gap: 28px;
+}
+
+.brand-logo {
+  height: 64px;
+}
+
+/* aspect-ratio matches each source PNG's real pixel proportions — a shared square box would
+   stretch them off their real shape. */
+.brand-logo-react {
+  aspect-ratio: 1.0977;
+}
+
+.brand-logo-solid {
+  aspect-ratio: 1.03125;
+}
+
+.plus-icon {
+  width: 48px;
+  height: 48px;
+}
+
+.title {
+  color: var(--chalk-bright);
+  font-size: 22px;
+  font-weight: bold;
+  text-align: center;
+}
+
+.subtitle {
+  color: var(--chalk);
+  font-size: 14px;
+  text-align: center;
+}
+
+.counter-card {
+  align-items: center;
+  gap: 4px;
+  padding: 20px 28px;
+  border-radius: 16px;
+  background-color: var(--paper);
+}
+
+.counter-label {
+  color: var(--mist);
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+
+.counter-value {
+  color: var(--brand);
+  font-size: 32px;
+  font-weight: bold;
+}
+
+.button-primary {
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  padding: 14px 22px;
+  background-color: var(--brand);
+}
+
+.button-primary-text {
+  color: var(--chalk-bright);
+  font-size: 15px;
+  font-weight: bold;
+}

package/templates/js/solid/App.jsx

@@ -0,0 +1,35 @@
+import { createSignal } from 'solid-js';
+import './App.css';
+
+export default function App() {
+  const [count, setCount] = createSignal(0);
+
+  return (
+    <safe-area-view class="screen">
+      <view class="brand-row">
+        <image
+          class="brand-logo brand-logo-react"
+          resizeMode="contain"
+          source={require('./assets/react-native-logo.png')}
+        />
+        <image class="plus-icon" resizeMode="contain" source={require('./assets/plus-icon.png')} />
+        <image
+          class="brand-logo brand-logo-solid"
+          resizeMode="contain"
+          source={require('./assets/solid-logo.png')}
+        />
+      </view>
+      <text class="title">Welcome to SymbioteNative!</text>
+      <text class="subtitle">Framework-agnostic React Native, driven by Solid.</text>
+
+      <view class="counter-card">
+        <text class="counter-label">TAPS</text>
+        <text class="counter-value">{count()}</text>
+      </view>
+
+      <pressable class="button-primary" onPress={() => setCount((value) => value + 1)}>
+        <text class="button-primary-text">Tap me</text>
+      </pressable>
+    </safe-area-view>
+  );
+}

package/templates/js/solid/App.tsx

@@ -0,0 +1,35 @@
+import { createSignal } from 'solid-js';
+import './App.css';
+
+export default function App() {
+  const [count, setCount] = createSignal<number>(0);
+
+  return (
+    <safe-area-view class="screen">
+      <view class="brand-row">
+        <image
+          class="brand-logo brand-logo-react"
+          resizeMode="contain"
+          source={require('./assets/react-native-logo.png')}
+        />
+        <image class="plus-icon" resizeMode="contain" source={require('./assets/plus-icon.png')} />
+        <image
+          class="brand-logo brand-logo-solid"
+          resizeMode="contain"
+          source={require('./assets/solid-logo.png')}
+        />
+      </view>
+      <text class="title">Welcome to SymbioteNative!</text>
+      <text class="subtitle">Framework-agnostic React Native, driven by Solid.</text>
+
+      <view class="counter-card">
+        <text class="counter-label">TAPS</text>
+        <text class="counter-value">{count()}</text>
+      </view>
+
+      <pressable class="button-primary" onPress={() => setCount((value) => value + 1)}>
+        <text class="button-primary-text">Tap me</text>
+      </pressable>
+    </safe-area-view>
+  );
+}