@symbiote-native/cli 0.0.1

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@symbiote-native/cli",
+  "version": "0.0.1",
+  "description": "Scaffold a new SymbioteNative app (React/Vue/Angular/Solid/Svelte, bare React Native, optional Expo-modules autolinking), or wire SymbioteNative into an existing bare RN app — the `@symbiote-native/cli new` companion to the manual steps in the root README's \"Try It In Your Own App\".",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/OneEyed1366/symbiote-native.git",
+    "directory": "packages/cli"
+  },
+  "homepage": "https://github.com/OneEyed1366/symbiote-native/tree/master/packages/cli#readme",
+  "bugs": {
+    "url": "https://github.com/OneEyed1366/symbiote-native/issues"
+  },
+  "author": "Andrey Prokopenko <psevdoproger@gmail.com>",
+  "type": "module",
+  "engines": {
+    "node": ">=22.11.0"
+  },
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "bin": {
+    "symbiote-native-cli": "bundle.js"
+  },
+  "files": [
+    "bundle.js",
+    "templates"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@clack/prompts": "^1.7.0",
+    "@types/node": "^26.0.0",
+    "picocolors": "^1.1.1",
+    "rolldown": "1.2.0",
+    "typescript": "~6.0.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --build",
+    "dev": "tsc --build && node build/index.js",
+    "build": "rolldown -c build.config.ts",
+    "format": "prettier --write \"src/**/*.ts\""
+  }
+}

package/src/index.ts

@@ -0,0 +1,70 @@
+#!/usr/bin/env node
+import pc from 'picocolors';
+import { parseArgv } from './cli.js';
+import { runAdd } from './commands/add.js';
+import { runNew } from './commands/new.js';
+import { CliUsageError, NotSymbioteAppError } from './errors.js';
+import { EXPO_PACKAGE_LAYERS } from './expo-package-layers.js';
+// A static JSON import, not fs/createRequire: rolldown resolves and inlines it (relative to
+// this SOURCE file) into bundle.js at build time, so the published artifact needs no
+// package.json lookup at runtime at all — unlike a runtime `require('../package.json')`, which
+// breaks the moment the bundle no longer sits one directory level away from it (see git history).
+import pkg from '../package.json' with { type: 'json' };
+
+function printHelp(): void {
+  const expoPackageFlags = EXPO_PACKAGE_LAYERS.map(
+    layer => `--${layer.id}`,
+  ).join(', ');
+  console.log(`@symbiote-native/cli — scaffold a SymbioteNative app, or add it to an existing one.
+
+Usage:
+  npx @symbiote-native/cli new <app-name> [--framework react|vue|angular|solid|svelte] [--vue-flavor tsx|sfc]
+                      [--javascript] [--force] [--bundle-id com.example.app]
+                      [--styling css|css-modules|scss|less|stylus|stylesheet]
+                      [--navigation] [--expo-modules] [--testing] [--splash-screen] [--slider] [--pm npm|pnpm|yarn]
+                      [--<expo-package> ...]  (one per Expo-backed package, implies --expo-modules)
+  npx @symbiote-native/cli add [--navigation] [--expo-modules] [--testing] [--splash-screen] [--slider]
+                      [--<expo-package> ...] [--force] [--pm npm|pnpm|yarn]
+                      (run inside an existing @symbiote-native/* app)
+
+  npx @symbiote-native/cli --version   print the CLI version
+  npx @symbiote-native/cli --help      print this message
+
+<expo-package> flags: ${expoPackageFlags}
+
+Flags left out of either command are asked for interactively.`);
+}
+
+async function main(): Promise<void> {
+  const parsed = parseArgv(process.argv.slice(2));
+
+  switch (parsed.kind) {
+    case 'new':
+      await runNew(parsed);
+      return;
+    case 'add':
+      await runAdd(parsed);
+      return;
+    case 'help':
+      printHelp();
+      return;
+    case 'version':
+      console.log(pkg.version);
+      return;
+  }
+}
+
+main().catch((error: unknown) => {
+  if (error instanceof CliUsageError) {
+    console.error(pc.red(`@symbiote-native/cli: ${error.message}`));
+    process.exitCode = 1;
+    return;
+  }
+  if (error instanceof NotSymbioteAppError) {
+    console.error(pc.red(`@symbiote-native/cli: ${error.message}`));
+    process.exitCode = 1;
+    return;
+  }
+  console.error(pc.red('@symbiote-native/cli: unexpected error'), error);
+  process.exitCode = 1;
+});

package/templates/README.md

@@ -0,0 +1,93 @@
+**Status: `new` is wired for the base + `--navigation`/`--expo-modules` layers.** `src/generate.ts`
+copies `native/` + `js/<framework>` + any selected `templates/layers/*` onto the target
+directory via `src/utils/render-template.ts` (ported from create-vue: `package.json` merges,
+`.gitignore` appends, everything else overwrites). `src/utils/apply-app-identity.ts` then substitutes the real app name/bundle id for the
+templates' `"Canary"`/`com.canary` placeholders on the copied tree. `src/commands/add.ts` is
+still stubbed — see `../README.md`'s "Design decisions" section for the full v1 scope and what's
+deferred (`--splash-screen`, `add`).
+
+```
+templates/
+  native/{ios,android,Gemfile}/  # ONE framework-agnostic Xcode/Gradle project shell + CocoaPods
+                                   # config, shared by every framework — SymbioteNative never
+                                   # touches native/, so the generated app's ios/ and android/
+                                   # folders are identical regardless of --framework (see
+                                   # <native_core_is_untouched> in the root CLAUDE.md).
+  js/{react,vue-tsx,vue-sfc,angular,solid,svelte}/  # Per-framework JS-level overlay: index.js
+                                   # (registerRunnable, not registerComponent), metro.config.js,
+                                   # tsconfig, and a package.json.fragment.json dependency
+                                   # fragment (@symbiote-native/<fw> + react-native/react + the
+                                   # framework's own runtime). Vue has two real flavors, TSX and
+                                   # SFC — `npx @symbiote-native/cli new --framework vue` prompts for
+                                   # `--vue-flavor tsx|sfc` (default sfc) to pick between them.
+  layers/{expo-modules,navigation,testing}/  # Optional overlays applied after native/ + js/<fw>.
+                                   # expo-modules is package.json.fragment.json only; navigation
+                                   # also carries app/<framework>/App.<ext> — a 2-screen Stack
+                                   # demo overwriting the base App — see templates/layers/README.md.
+  styling/{js,navigation}/<framework>/<option>/  # --styling css-modules|stylesheet overrides,
+                                   # applied by src/utils/apply-styling.ts AFTER js/<fw> and the
+                                   # navigation layer. Deliberately NOT nested inside js/<fw> or
+                                   # layers/navigation/app/<fw> — render-template.ts copies a
+                                   # source directory recursively with no exclusion, so nesting an
+                                   # override folder inside a tree that's already copied wholesale
+                                   # ships it into every generated app regardless of --styling
+                                   # (a real bug, fixed 2026-09-17 — see ../README.md).
+```
+
+Every `js/<framework>` also ships a base `App.<ext>` (a "Welcome to SymbioteNative!" + tap
+counter, no navigation) — the one thing that actually makes a scaffolded app RUN instead of
+crashing on `import App from './App'` resolving to nothing (fixed 2026-09-15, see git history —
+the copy/merge mechanism landed before this file did).
+
+**Every App file is TWO independently-maintained variants, never one derived from the other.**
+react/vue-tsx/solid: `App.tsx` + `App.jsx`, picked by filename (`render-template.ts`'s
+`TYPESCRIPT_ONLY_FILENAMES`/`JAVASCRIPT_ONLY_FILENAMES`). vue-sfc/svelte can't do that — their
+language is an internal `<script lang="ts">` attribute, so both variants would collide on the same
+extension (`App.vue`/`App.svelte`) — instead the TypeScript half is a `App.typescript.vue` /
+`App.typescript.svelte` sibling that renders to the plain name only when TypeScript is on (same
+`.typescript.` infix mechanism as `package.json.fragment.typescript.json`, generalized
+2026-09-15). Angular has no JS half at all (AOT requires TypeScript). The two variants read
+identically today because neither has a REAL type annotation yet worth diverging on — a
+copy-with-renamed-extension looked equivalent for the same reason and was rejected: the moment
+one side gains an actual type, that copy would silently ship broken syntax into the other mode.
+
+Every `README.md` inside `templates/**` (this file included) documents the template folder for
+maintainers — `renderTemplate` skips copying any file named `README.md` into a generated app.
+
+## Why `native/` is our own vendored shell, not `@react-native-community/cli init`
+
+Delegating native scaffolding to the upstream RN CLI would make `@symbiote-native/cli new` break
+on every RN-CLI release that changes its generated project shape — outside this repo's
+control. Vendoring our own fork trades that drift risk for an explicit maintenance cost (this
+package owns keeping `native/` current against new RN/Xcode/Gradle versions), which is the
+deliberate choice here.
+
+## What's real vs. still missing
+
+Real: `new` copies `native/` + `js/<framework>` + selected `layers/*` onto a fresh directory,
+merges `package.json` (`deepMerge` + `sortDependencies`, ported from create-vue), appends
+`.gitignore`, skips every template-folder `README.md`, and substitutes the real app name +
+bundle id for every `"Canary"`/`com.canary` placeholder (folder renames, Xcode project/scheme/
+workspace names, Android package directory + `namespace`/`applicationId`, `app.json`, Info.plist,
+Podfile target — see `src/utils/apply-app-identity.ts`; case-sensitive, so it never touches an
+unrelated lowercase "canary" in prose/comments). Every framework ships a working base App and,
+with `--navigation`, a 2-screen Stack demo — verified end-to-end against real installs, including
+a real `ngc` AOT build for Angular both with and without `--navigation` (2026-09-15; that pass
+also caught and fixed two stale `@symbiote-native/*` version pins that broke `npm install` under
+ERESOLVE — every such pin is now `"latest"`, see `templates/layers/README.md`). Verified against 5
+combinations (react+expo+navigation, vue-sfc+navigation, solid, svelte+expo, angular) — see
+`../README.md`'s "Design decisions" section.
+
+Missing, on purpose:
+
+- **No `--splash-screen` toggle.** BootSplash is unconditionally baked into `native/` — making
+  it optional needs `@expo/config-plugins`-based generation, not hand-edited `.pbxproj`. See
+  `../README.md`'s "Design decisions" section for the precedent (`react-native-bootsplash`'s own
+  `generate.ts`) and why it's a separate task.
+- **`add` is still stubbed.** `new`'s copy/merge mechanism was the prerequisite; `add`'s
+  retrofit-into-existing-project path (merging into a non-empty `package.json`) comes next —
+  including re-running `apply-app-identity` against an existing project's current name/bundle id
+  rather than the `"Canary"` placeholder.
+- **No general EJS/data-file templating.** `renderTemplate` does a plain copy-or-merge; the one
+  parameterized value (app identity) is handled by a dedicated post-pass instead, since it's the
+  only thing in `templates/` that varies per scaffold.

package/templates/js/angular/.prettierrc.js

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

package/templates/js/angular/.watchmanconfig

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

package/templates/js/angular/README.md

@@ -0,0 +1,117 @@
+# `templates/js/angular`
+
+Per-framework JS-level overlay for a generated Angular app, populated from `examples/angular`
+(the real, working Angular canary) — see `../../README.md` for the overall templates layout and
+the `angular-adapter-build` skill for why Angular's build pipeline looks like this.
+
+## What was copied, and why
+
+| File | Why it belongs in the seam |
+|---|---|
+| `index.js` | The bootstrap entry every Angular app needs verbatim: `bootstrapApplication(AppComponent, { appName })` imported from `@symbiote-native/angular/bootstrap`. It imports `./build/angular/src/App` and `./app.json`'s `name` — both paths hold regardless of what `AppComponent` itself renders, so this file needs zero changes per-app. |
+| `metro.config.js` | Wires the two things every Angular app needs from Metro: `@symbiote-native/angular/metro-css-parser` as the CSS transformer, and `withSymbioteAngularMetroConfig` (the ngc-outDir resolveRequest + sourceExts). Framework-agnostic beyond that — identical regardless of app content. |
+| `babel.config.js` | The two Angular-specific Babel plugins every app needs in this exact order: `@symbiote-native/angular/babel-register-composed` (must run before the linker) then `@symbiote-native/angular/babel-linker` (Stage B of AOT — turns ngc's partial-Ivy output into full Ivy before Hermes sees it), plus the standard `DEBUG` env-flag inliner shared with the other framework templates. |
+| `tsconfig.json` | The editor/tsserver-facing config (DOM lib for `@angular/core`'s ambient types, the `@symbiote-native/css-parser` TS plugin) — mirrors the real AOT build config so IDE diagnostics match `ngc`'s. |
+| `tsconfig.angular.json` | The actual `ngc` build config: `angularCompilerOptions.basePath: "src"` (the EMFILE fix — see `angular-adapter-build` skill §3a, `ngc --watch`'s chokidar recurses `basePath` and would otherwise hit `ios/`/`android/` as watch-root siblings), `outDir: "build/angular"`, and `"files": ["src/App.ts", "src/css.d.ts"]`. This is why the JS source tree below is nested under `src/` rather than flat like the React/Vue templates. |
+| `app.json` | `{ name, displayName }` read by `index.js`. Copied verbatim from the example — see the parameterization note below. |
+| `.watchmanconfig` | Empty `{}`, but Watchman needs the file present to establish a watch root. Identical for every app. |
+| `.gitignore` | Standard bare-RN-app ignore list (Xcode/Gradle build output, CocoaPods, Metro health-check files, coverage, Yarn PnP). Same for every framework — the React template already carries an equivalent copy for the same reason (`native/` itself ships no `.gitignore`). |
+| `src/css.d.ts` | Ambient module declarations for `import './X.css'` and `.module.css` — pure TypeScript scaffolding with no app-specific content (`declare module '*.css'` / the generic `.module.css` fallback typed via `Record<string, string>`). Lives under `src/` (not flat, unlike the React template's `css.d.ts`) because `tsconfig.angular.json`'s `files` array names `src/css.d.ts` explicitly — the nesting is structural, not a style choice. |
+
+## What was deliberately excluded, and the `src/` split judgment call
+
+Not copied, and why:
+
+- **`src/App.ts` + `src/App.css`** — the app's root component: the `Stack`/`ScreenDirective`
+  navigator wiring, every screen import, header options per route, splash-screen `hide()` call.
+  This is app-authored content a real app replaces entirely with its own root component (the
+  `generate.ts` implementation will need to emit a minimal placeholder `App.ts`, not this one).
+- **`src/components/*` and `src/screens/*`** — the canary's demo surface (ActivityIndicator/
+  Switch/ScrollView/Animated/ResponderDemo/etc. sections, the menu + tour screens). Entirely
+  demo content, zero bootstrap value.
+- **`src/navigation-lines.ts`, `src/navigation-linking.ts`, `src/routes.ts`,
+  `src/components/event-utils.ts`** — demo-specific navigation config (route name constants,
+  deep-linking config, a color palette for the tour) and a shared event-formatting helper used
+  only by the demo screens.
+- **`e2e/`, `assets/`, `package-lock.json`** — per the task brief: Detox e2e specs are
+  app-specific test content, `assets/` holds demo images, and a lockfile is never templated
+  (the generated app gets a fresh install).
+
+**The `src/` judgment call**: `examples/angular`'s root has no `App.ts`-equivalent — unlike
+React/Vue's flat `App.tsx` at the app root, Angular's whole source tree (moved 2026-07-14,
+documented in `angular-adapter-build` skill §3a) lives under `src/` specifically to keep
+`ngc --watch`'s recursive chokidar watch (rooted at `angularCompilerOptions.basePath`) away from
+`ios/`/`android/`'s tens of thousands of files as watch-root siblings. That makes the split
+mechanical rather than a judgment call for most of `src/`: everything in it is either (a) the
+demo screens/components tree (excluded, app-authored) or (b) `css.d.ts`, a file with zero
+app-specific content that happens to sit in `src/` only because the build config's `basePath`
+fix requires the whole compiled tree to live there. `css.d.ts` is the one file that's
+"bootstrap despite being under `src/`," which is why it's called out explicitly in the table
+above rather than assumed excluded along with the rest of the directory.
+
+## `package.json.fragment.json`
+
+A dependency **fragment** (not a full `package.json` — this directory isn't an npm package
+itself) listing only the SymbioteNative + Angular packages a generated app's `package.json`
+needs, plus the npm scripts `ngc`/Metro wiring requires. Versions pulled verbatim from
+`examples/angular/package.json`'s real, working set:
+
+- **`dependencies`**: `@symbiote-native/angular` (the adapter) and `@symbiote-native/engine`
+  (its `peerDependencies` require `@symbiote-native/engine >=0.1.7` explicitly, same as
+  `react-native >=0.86` — see `<react_native_is_an_explicit_top_level_peer>` in the root
+  `CLAUDE.md`: a peer dependency of the adapter must be an explicit top-level dependency of the
+  consuming app, not left to transitive resolution), `@angular/core`/`@angular/common`/
+  `@angular/compiler` (the example pins all three as direct `dependencies`, not just `core`),
+  `react-native`, and `react` (a `react-native` peer requirement regardless of JS framework).
+- **`devDependencies`**: `@angular/compiler-cli` (ships the `ngc` binary the `ng:build` script
+  calls — declared explicitly rather than relied on as a transitive dependency of
+  `@symbiote-native/angular`, matching what the real example does) and `@babel/core` pinned to
+  `^7` (the Angular linker's `assertVersion(7)` hard requirement — see `angular-adapter-build`
+  skill §1; Babel 8, ESM-only, is explicitly incompatible).
+- **`scripts`**: `ng:build` (`ngc -p tsconfig.angular.json` — the one-shot AOT compile),
+  `dev`/`start` (`symbiote-angular-dev [--reset-cache]` — see the wiring-gap note below), and
+  `android`/`ios` (`ng:build` then `react-native run-<platform>`, since the compiled
+  `build/angular/` output must exist before Metro can serve it).
+
+Left out on purpose: `@symbiote-native/navigation`, `@symbiote-native/slider`,
+`@symbiote-native/splash-screen`, `@symbiote-native/android`, and `@symbiote-native/react` —
+all real dependencies of `examples/angular`'s package.json, but only because the canary *demos*
+navigation, the slider wrapper, and the splash-screen module. None of those are needed to boot
+a bare Angular app against the engine; a generated app adds them itself if/when it needs that
+functionality. Generic bare-RN-app tooling (`@react-native-community/cli`, `@react-native/*`,
+`eslint`, `jest`, `detox`, `prettier`, `typescript`, `@types/*`) is also left out — it isn't
+SymbioteNative/Angular-specific and belongs to whatever base scaffold `templates/native` or a
+shared cross-framework fragment eventually supplies, not this per-framework fragment.
+
+## App-name / bundle-id parameterization — not yet done
+
+`app.json`'s `name`/`displayName` are still `"Canary"`/`"Canary"`, the literal value from
+`examples/angular`. Per the task brief this is explicitly out of scope for this pass — no
+placeholder/templating scheme was invented here. Parameterizing it (and wiring the app name the
+`new` command's user already provides via its `<app-name>` argument) is real follow-up work for
+`generate.ts`, which today still throws `NotImplementedCommandError` for both `new` and `add`.
+
+## The `ngc --watch`-alongside-Metro wiring gap
+
+What a generated app needs to reproduce, already captured in the copied files:
+
+- `dev`/`start` calling `symbiote-angular-dev` (from `@symbiote-native/angular`'s `bin`, see
+  `package.json.fragment.json`'s `scripts`) — this is the shared launcher
+  (`adapters/angular/bin/symbiote-angular-dev.cjs`) that runs an initial `ngc` build, then spawns
+  `ngc -p tsconfig.angular.json --watch` as a background process and `react-native start` as the
+  sole foreground process (so Metro's interactive `r`/`j`/`d` keypresses keep working — see
+  `angular-adapter-build` skill §3). Nothing app-specific to wire here: the launcher already
+  reads `tsconfig.angular.json` from the app's own directory.
+- `ng:build`/`android`/`ios` running a one-shot `ngc` compile before Metro/the native build ever
+  sees the app, since `index.js` imports the *compiled* `./build/angular/src/App`, never the
+  `.ts` source directly.
+
+**What's genuinely unsolved by this pass**: how `@symbiote-native/cli new`/`add`'s actual generation
+logic wires `package.json.fragment.json`'s `scripts` block into a fresh project's
+`package.json` — i.e. whether `generate.ts` merges this fragment's `scripts` keys directly, how
+a naming collision with a user's existing `add`-target `package.json` scripts would be resolved,
+and whether `symbiote-angular-dev`'s `--pm`-agnostic assumptions (it shells out to `ngc`/
+`react-native` directly, not through a package-manager `run` wrapper) hold for every `--pm`
+value `@symbiote-native/cli` supports (`npm`/`pnpm`/`yarn`). None of that is implemented anywhere yet
+— `commands/new.ts` and `commands/add.ts` still throw `NotImplementedCommandError` before
+reaching a template-copy step at all.

package/templates/js/angular/app.json

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

package/templates/js/angular/babel.config.js

@@ -0,0 +1,34 @@
+
+// Inline `process.env.DEBUG` at bundle time so @symbiote diagnostic logs can be toggled
+// from the shell:
+//   DEBUG=1 pnpm start --reset-cache
+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: [
+    // Must run BEFORE the linker below: reads `selector` off the still-partial
+    // ɵɵngDeclareComponent(...) shape and auto-calls registerComposedComponent for every
+    // composed component in the bundle — see the angular-adapter-build skill.
+    require('@symbiote-native/angular/babel-register-composed'),
+    // Stage B of Angular AOT: Metro sees the partial-Ivy JS emitted by `pnpm ng:build`;
+    // @symbiote-native/angular's linker turns every ɵɵngDeclareComponent into full Ivy before
+    // Hermes sees it.
+    require('@symbiote-native/angular/babel-linker'),
+    inlineDebugFlag,
+  ],
+};

package/templates/js/angular/index.js

@@ -0,0 +1,12 @@
+/**
+ * @format
+ *
+ * Symbiote Angular canary entry. bootstrapApplication wires the native-host seams and RN's own
+ * AppRegistry, then registers the root component — same entry point the other canaries use.
+ */
+
+import { bootstrapApplication } from '@symbiote-native/angular/bootstrap';
+import { AppComponent } from './build/angular/src/App';
+import { name as appName } from './app.json';
+
+bootstrapApplication(AppComponent, { appName });

package/templates/js/angular/metro.config.js

@@ -0,0 +1,38 @@
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+const { withSymbioteAngularMetroConfig } = require('@symbiote-native/angular/metro-config');
+
+const projectRoot = __dirname;
+
+const defaultConfig = getDefaultConfig(projectRoot);
+
+/**
+ * Angular is the one adapter that needs a pre-Metro compile step: ngc writes partial-Ivy JS,
+ * then Babel's Angular linker plugin (babel.config.js) runs inside Metro and turns that
+ * partial output into full Ivy. @symbiote-native/angular and @symbiote-native/slider build this
+ * themselves via their own `prepare` script (runs automatically on `npm install`) and point
+ * their package.json `exports`'s "react-native" condition straight at it — Metro's own
+ * package-exports resolution (on by default: @react-native/metro-config sets
+ * unstable_enablePackageExports + conditionNames ['react-native']) picks that up with no
+ * custom resolveRequest needed here. @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).
+ *
+ * @type {import('@react-native/metro-config').MetroConfig}
+ */
+const config = {
+  // Compile standalone .css/.module.css imports on the way into the bundle —
+  // @symbiote-native/angular ships the transformer itself, so no local wiring file is needed
+  // (same framework-agnostic path the React and Vue examples use via their own adapter's
+  // ./metro-css-parser export). Angular has no compiler-plugin conflict here: the ngc/linker
+  // pipeline (see the block comment above) only ever sees .ts files, never .css.
+  transformer: {
+    babelTransformerPath: require.resolve('@symbiote-native/angular/metro-css-parser'),
+  },
+  resolver: {
+    // sourceExts + the ngc-outDir CSS-redirect resolveRequest — see
+    // adapters/angular/metro-config.cjs for the full mechanism.
+    ...withSymbioteAngularMetroConfig(defaultConfig, projectRoot).resolver,
+  },
+};
+
+module.exports = mergeConfig(defaultConfig, config);

package/templates/js/angular/package.json.fragment.json

@@ -0,0 +1,29 @@
+{
+  "dependencies": {
+    "@symbiote-native/android": "latest",
+    "@symbiote-native/angular": "latest",
+    "@symbiote-native/engine": "latest",
+    "@angular/core": "^22",
+    "@angular/common": "^22",
+    "@angular/compiler": "^22",
+    "@angular/forms": "^22",
+    "rxjs": "^7.8.1",
+    "react-native": "0.86.0",
+    "react": "19.2.3"
+  },
+  "devDependencies": {
+    "@angular/compiler-cli": "^22",
+    "@react-native/babel-preset": "0.86.0",
+    "@react-native/metro-config": "0.86.0"
+  },
+  "scripts": {
+    "lint": "eslint .",
+    "ng:build": "ngc -p tsconfig.angular.json",
+    "dev": "symbiote-angular-dev --reset-cache",
+    "start": "symbiote-angular-dev",
+    "android": "ngc -p tsconfig.angular.json && react-native run-android",
+    "ios": "ngc -p tsconfig.angular.json && react-native run-ios",
+    "pretypecheck": "css-dts .",
+    "typecheck": "ngc -p tsconfig.angular.json --noEmit"
+  }
+}

package/templates/js/angular/src/App.css

@@ -0,0 +1,89 @@
+:root {
+  --ink: #0b1622;
+  --paper: #13243a;
+  --mist: #41506a;
+  --chalk: #cbd5e1;
+  --chalk-bright: #ffffff;
+  --brand: #dd0031;
+}
+
+.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-angular {
+  aspect-ratio: 0.9463;
+}
+
+.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/angular/src/App.ts

@@ -0,0 +1,40 @@
+import { Component, signal } from '@angular/core';
+import { SYMBIOTE_ELEMENTS } from '@symbiote-native/angular';
+import './App.css';
+
+@Component({
+  selector: 'symbiote-angular-app',
+  standalone: true,
+  imports: [SYMBIOTE_ELEMENTS],
+  template: `
+    <safe-area-view class="screen">
+      <view class="brand-row">
+        <image class="brand-logo brand-logo-react" resizeMode="contain" [source]="reactNativeLogo"></image>
+        <image class="plus-icon" resizeMode="contain" [source]="plusIcon"></image>
+        <image class="brand-logo brand-logo-angular" resizeMode="contain" [source]="angularLogo"></image>
+      </view>
+
+      <text class="title">Welcome to SymbioteNative!</text>
+      <text class="subtitle">Framework-agnostic React Native, driven by Angular.</text>
+
+      <view class="counter-card">
+        <text class="counter-label">TAPS</text>
+        <text class="counter-value">{{ count() }}</text>
+      </view>
+
+      <pressable class="button-primary" (press)="increment()">
+        <text class="button-primary-text">Tap me</text>
+      </pressable>
+    </safe-area-view>
+  `,
+})
+export class AppComponent {
+  readonly count = signal(0);
+  readonly reactNativeLogo = require('./assets/react-native-logo.png');
+  readonly plusIcon = require('./assets/plus-icon.png');
+  readonly angularLogo = require('./assets/angular-logo.png');
+
+  increment(): void {
+    this.count.set(this.count() + 1);
+  }
+}

package/templates/js/angular/src/css.d.ts

@@ -0,0 +1,23 @@
+// 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.
+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/angular/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;
+}