@symbiote-native/cli 0.0.1

package/templates/js/vue-sfc/README.md

@@ -0,0 +1,124 @@
+# `templates/js/vue-sfc`
+
+The Vue-**SFC** (`.vue` Single File Component) flavor of the per-framework JS overlay. Sourced
+verbatim from `examples/vue-sfc/` (root-level files only — its `ios/`/`android/` are already
+covered by the shared `templates/native/{ios,android}` shell).
+
+Vue has a second, divergent flavor — `templates/js/vue-tsx/` — sourced from `examples/vue-tsx/`
+by a separate pass. The two are not interchangeable: SFC compiles `.vue` files through a
+dedicated Metro transformer (see below); TSX has no such file and no such transformer to wire.
+
+## What was copied, and why each file belongs in the seam
+
+Every file below would be identical (or safely near-identical) in any new SymbioteNative
+Vue-SFC app, regardless of what screens the app author writes — that's the bar for "part of the
+scaffold seam" vs. "the example's own demo content."
+
+| File | Why it's part of the seam |
+|---|---|
+| `index.js` | The entry point: `createApp(App).mount(appName)` via `@symbiote-native/vue/bootstrap`. Only `App` and `appName` are app-specific, and both are already externalized as imports — the file itself doesn't change per app. |
+| `metro.config.js` | Wires the `.vue` SFC transformer (see the dedicated section below) and registers `vue`/`css`/`scss`/`sass`/`less`/`styl` as Metro source extensions. The one genuinely SFC-specific piece of tooling in this list. |
+| `babel.config.js` | `@react-native/babel-preset` + an `inline-debug-flag` plugin that bakes `process.env.DEBUG` into the bundle at build time (the project-wide `dlog`/`isDebug` gate). Framework-agnostic, identical across all three adapters' examples. |
+| `tsconfig.json` | Extends `@react-native/typescript-config`, registers the `@symbiote-native/css-parser/typescript-plugin` language-service plugin, and includes `**/*.vue` in the type-checked file set. |
+| `tsconfig.typecheck.json` | The `vue-tsc --noEmit` entry point used by the `typecheck` script — widens `types` back to `["node"]` (the app tsconfig strips it) and excludes `e2e/` (type-checked separately via `ts-jest`/jest globals). |
+| `app.json` | `{ name, displayName }` — RN's own app manifest. **Not parameterized in this pass** (see below). |
+| `css.d.ts` | Ambient `declare module '*.css'` / a generic `*.module.css` fallback type, for a `.module.css` import that has no generated per-file `.d.ts` yet (see `css-dts` below). Mirrors `examples/react/css.d.ts` and `examples/angular/css.d.ts` verbatim in spirit. |
+| `vue-runtime-core.d.ts` | Re-exports `'vue'` from `'@vue/runtime-core'` — the app's actual runtime dependency is `@vue/runtime-core` (lighter, no `runtime-dom`), but SFC `<script>` blocks idiomatically `import { ref } from 'vue'`; this ambient module bridges the two without a real `vue` runtime dependency. |
+| `.eslintrc.js` | `{ root: true, extends: '@react-native' }` — the stock RN lint config, no SFC/Vue-specific rule. |
+| `.prettierrc.js` | Formatting only (`arrowParens`, `singleQuote`, `trailingComma`) — project-wide convention, not app content. |
+| `.watchmanconfig` | Empty `{}` — Metro/Watchman boilerplate every RN app ships. |
+| `.gitignore` | Stock RN app gitignore (Xcode/Gradle build artifacts, `node_modules`, CocoaPods, Metro health-check files, etc.). |
+
+## The `.vue` Metro transformer — the one SFC-specific piece
+
+`metro.config.js` points `transformer.babelTransformerPath` at
+`@symbiote-native/vue/metro-vue-transformer` — a subpath the `@symbiote-native/vue` package ships
+itself (`adapters/vue/metro-vue-transformer.cjs`), so **no local transformer file needs to be
+authored or copied** into this template; requiring it by package subpath is the entire wiring.
+This one function does three things on the way into the bundle:
+
+1. Compiles every `.vue` SFC (`@vue/compiler-sfc`'s `compileScript`/`compileTemplate`) into a
+   plain JS module the Vue adapter's renderer can mount.
+2. Reads each SFC's `<style>`/`<style scoped>`/`<style module>` block (via
+   `descriptor.styles`, not a hand-rolled regex extractor) and compiles it at build time into a
+   `registerStyles({...})` call prepended to the module — the same runtime style registry every
+   adapter shares (`core/engine/src/style-registry`).
+3. Also handles standalone `.css`/`.scss`/`.sass`/`.less`/`.styl` files reached via the
+   `resolver.sourceExts` list (Vue's transformer is the one file in this app that has to
+   disambiguate SFC-inline styles from standalone stylesheet imports, since Metro allows only
+   one `babelTransformerPath`).
+
+Full mechanism — `scoped` class suffixing, `:global()`, CSS Modules, the preprocessor layer —
+is documented in the `symbiote-sfc-style-compiler` skill; not re-derived here.
+
+**Why `@symbiote-native/css-parser` is a devDependency of the app but the Metro transformer
+doesn't need it directly**: `@symbiote-native/css-parser` is a regular `dependency` of the
+`@symbiote-native/vue` package itself (confirmed in `adapters/vue/package.json`) — the transformer
+above resolves it from there, not from this app's own `node_modules`. The app needs its own copy
+only for **TypeScript tooling that runs outside Metro entirely**: the
+`@symbiote-native/css-parser/typescript-plugin` entry in `tsconfig.json`'s `compilerOptions.plugins`
+(live in-editor `.module.css` autocomplete) and the `css-dts` CLI wired as this app's
+`pretypecheck` script (on-disk `.d.ts` generation, the `tsc`/CI-time source of truth for
+`.module.css` typo-catching) — both are plugins/binaries a project depends on directly by
+convention, never routed through a UI-framework package. Verified by reading the real import
+statements in `metro.config.js` and the adapter's own `package.json`, not guessed.
+
+## What was deliberately excluded
+
+- **App-authored content** (explicitly out of scope per the task): `App.vue`, `App.css`,
+  `components/`, `screens/`, `navigation-lines.ts`, `navigation-linking.ts`, `routes.ts`,
+  `e2e/`, `assets/`, `package-lock.json`.
+- **`Gemfile`** — CocoaPods/Ruby dependency pinning for the iOS native build. This is native
+  tooling, not a JS-level concern, and belongs (if anywhere) alongside `Podfile`/`Podfile.lock`
+  in `templates/native/ios/` — a directory this pass was explicitly told not to touch.
+  `templates/native/ios/` currently has no `Gemfile` either; that's a native-template gap outside
+  this pass's scope, not something to route around by stashing it here.
+  <br>*(judgment call — the task listed this as one of the borderline files to decide.)*
+- **`detox.config.js`** — its `testRunner.args.config` points at `e2e/jest.config.js`, and
+  `e2e/` is explicitly excluded app content, so copying it verbatim would ship a config that
+  points at a folder that doesn't exist in the scaffold. It also hardcodes the demo app's Xcode
+  scheme/workspace name (`Canary`) throughout its build paths — the same parameterization gap
+  called out for `app.json` below, but deeper (baked into multiple shell command strings, not one
+  JSON field), so it can't be "left literal for now" the same low-risk way `app.json` can. Real
+  e2e scaffolding for generated apps is follow-up work, once `e2e/`'s own template shape is
+  decided.
+  <br>*(judgment call — the task listed this as one of the borderline files to decide.)*
+
+## `package.json.fragment.json`
+
+A dependency **fragment**, not a full `package.json` (this folder is not itself an npm package —
+`new`'s generation logic will splice this into the generated app's real `package.json` once
+implemented). Versions pulled verbatim from `examples/vue-sfc/package.json`, the real working
+app:
+
+- **`dependencies`**: `@symbiote-native/vue`, `@symbiote-native/engine`, `@vue/runtime-core`,
+  `react`, `react-native`. `@symbiote-native/engine` is included beyond the task's literal
+  starter list because it's a real `peerDependency` of `@symbiote-native/vue`
+  (`adapters/vue/package.json`) — omitting it would ship a scaffold with an unmet peer dep.
+  `@vue/runtime-core` and `react`/`react-native` are the runtime-singleton pins (same class as
+  the root `CLAUDE.md`'s `react_native_is_an_explicit_top_level_peer` invariant — one copy,
+  declared at the app root, Metro's version anchor).
+- **`devDependencies`**: `vue` (types/tooling only — `vue-tsc` and the `vue-runtime-core.d.ts`
+  bridge; the actual runtime import is `@vue/runtime-core`), `vue-tsc` (the `typecheck` script),
+  `@symbiote-native/css-parser` (the TS plugin + `css-dts`, see above).
+
+Deliberately **not** included, despite appearing in `examples/vue-sfc/package.json`:
+`@symbiote-native/android`, `@symbiote-native/components`, `@symbiote-native/navigation`,
+`@symbiote-native/slider`, `@symbiote-native/splash-screen` — these are optional feature
+packages the example app's demo screens happen to showcase (navigation, a slider, a splash
+screen, Android host-shim modules), not part of the minimal bootstrap seam every app needs. An
+app that wants them installs them itself (or via a future `@symbiote-native/cli add`), same as any
+other opt-in `@symbiote-native/*` package.
+
+## Known gaps, carried forward honestly
+
+- **No app-name/bundle-id parameterization yet.** `app.json`'s `name`/`displayName` fields are
+  still the literal `"Canary"` example value, copied verbatim as instructed. Templating
+  (`ejs`-based, per `templates/README.md`) is real follow-up work for `new.ts`'s actual
+  generation logic — `new`/`add` both still throw `NotImplementedCommandError` as of this pass.
+- **No TSX-vs-SFC selection yet.** `@symbiote-native/cli new --framework vue` currently has no flag
+  or prompt to choose between this template and `templates/js/vue-tsx/` — both exist as real,
+  divergent precedents, but the selection UX (a `--variant`/`--sfc` flag? an interactive prompt
+  when `--framework vue` is given with no further qualifier?) hasn't been designed. This is
+  flagged in the `symbiote-create-cli` skill as a known open gap, not silently defaulted to
+  either flavor.

package/templates/js/vue-sfc/app.json

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

package/templates/js/vue-sfc/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/vue-sfc/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.config.js) into a registerStyles() call; there's no runtime export to type. Mirrors
+// examples/react/css.d.ts and 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 `vue-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/css-parser/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`/`vue-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/vue-sfc/eslint.config.js

@@ -0,0 +1,48 @@
+const reactNativeFlatConfig = require('@react-native/eslint-config/flat');
+const vue = require('eslint-plugin-vue');
+const tsParser = require('@typescript-eslint/parser');
+
+// `@react-native/eslint-config/flat` has no `files` pattern covering `.vue` at all, so ESLint's
+// flat-config default (only recognized JS-like extensions unless a config explicitly opts a file
+// in) reports every `.vue` file "ignored because of a matching ignore pattern" — same root cause
+// and fix as examples/svelte's own eslint.config.js.
+module.exports = [
+  ...reactNativeFlatConfig,
+  ...vue.configs['flat/recommended'],
+  {
+    // `<script lang="ts">` needs a real TS parser inside the SFC, or every type annotation in the
+    // block is a syntax error to vue-eslint-parser's own (JS-only) script sub-parser.
+    files: ['**/*.vue'],
+    languageOptions: {
+      parserOptions: { parser: tsParser },
+    },
+    rules: {
+      // `@react-native/eslint-config`'s react-hooks plugin pattern-matches any `use*`-named call
+      // as a React Hook. Vue composables (`useNavigation`, `useIsFocused`, …) share that naming
+      // convention by accident of both ecosystems' idiom, and are not React Hooks — the rule has
+      // no way to tell the two apart, so it is a standing false positive on every `.vue` file.
+      'react-hooks/rules-of-hooks': 'off',
+      // The `**/*.ts`/`**/*.tsx` block in this same config turns `no-undef` off — typescript-eslint's
+      // own recommendation, since a plain (non-type-aware) ESLint rule cannot see ambient globals a
+      // `.d.ts` lib declares (`performance`, RN's own globals, …) and false-flags every one of them.
+      // `.vue`'s `<script lang="ts">` isn't matched by that glob, so it needs the same override here.
+      'no-undef': 'off',
+      // Our own primitives take RN's exact camelCase prop names (`testID`, `onPress`, …), never DOM
+      // attributes — hyphenating them is not just unwanted, it silently produces a DIFFERENT wrong
+      // prop when auto-fixed (`testID` -> `test-i-d`, not `test-id`, since the rule's fixer does not
+      // know these are camelCase words rather than a single unhyphenated one).
+      'vue/attribute-hyphenation': 'off',
+      // The rule's "is this a component" check does not know our lowercase custom host tags
+      // (`text`, `view`, …) are bare Fabric elements, not Vue components — so ANY `v-text`/`v-html`
+      // on one of them false-positives, not just a single call site.
+      'vue/no-v-text-v-html-on-component': 'off',
+    },
+  },
+  {
+    // Deliberately re-exports FROM `@vue/runtime-core` to declare the ambient `'vue'` module —
+    // that IS the fix `vue/prefer-import-from-vue` would otherwise ask for, so the rule can never
+    // be satisfied here without breaking the file's one job.
+    files: ['vue-runtime-core.d.ts'],
+    rules: { 'vue/prefer-import-from-vue': 'off' },
+  },
+];

package/templates/js/vue-sfc/index.js

@@ -0,0 +1,13 @@
+/**
+ * @format
+ *
+ * Symbiote Vue canary entry. createApp(App).mount(appName) wires the
+ * native-host seams and RN's own AppRegistry, then mounts via @symbiote-native/engine — RN's own
+ * renderer is never in the path.
+ */
+
+import { createApp } from '@symbiote-native/vue/bootstrap';
+import App from './App';
+import { name as appName } from './app.json';
+
+createApp(App).mount(appName);

package/templates/js/vue-sfc/metro.config.js

@@ -0,0 +1,30 @@
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+
+const projectRoot = __dirname;
+
+const defaultConfig = getDefaultConfig(projectRoot);
+
+/**
+ * @symbiote-native/* and @vue/runtime-core 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 config = {
+  // Compile .vue SFCs on the way into the bundle — @symbiote-native/vue ships the transformer
+  // itself, so no local wiring file is needed (see adapters/vue/metro-vue-transformer.cjs).
+  transformer: {
+    babelTransformerPath: require.resolve('@symbiote-native/vue/metro-vue-transformer'),
+  },
+  resolver: {
+    // Teach Metro that .vue and every style extension are source files (the transformer turns
+    // each into a module) — css/scss/sass/less/styl is the framework-agnostic standalone
+    // stylesheet/CSS-Modules path, shared with the React and Angular examples (see
+    // metro-css-transformer.js there); scss/sass/less/styl are optional preprocessor sources
+    // (see core/css-parser/src/preprocessors.ts).
+    sourceExts: [...defaultConfig.resolver.sourceExts, 'vue', 'css', 'scss', 'sass', 'less', 'styl'],
+  },
+};
+
+module.exports = mergeConfig(defaultConfig, config);

package/templates/js/vue-sfc/package.json.fragment.json

@@ -0,0 +1,26 @@
+{
+  "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/vue": "latest",
+    "@symbiote-native/engine": "latest",
+    "@vue/runtime-core": "^3.5.13",
+    "react": "19.2.3",
+    "react-native": "0.86.0"
+  },
+  "devDependencies": {
+    "vue": "^3.5.38",
+    "eslint-plugin-vue": "^10.11.0",
+    "@typescript-eslint/parser": "^8.70.0",
+    "@react-native/babel-preset": "0.86.0",
+    "@react-native/metro-config": "0.86.0"
+  }
+}

package/templates/js/vue-sfc/package.json.fragment.typescript.json

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

package/templates/js/vue-sfc/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "@react-native/typescript-config",
+  "compilerOptions": {
+    "types": [],
+    "plugins": [{ "name": "@symbiote-native/css-parser/typescript-plugin" }]
+  },
+  // Points vue-tsc/Volar's virtual codegen at OUR package instead of Vue's default "vue" - see
+  // adapters/vue/src/index.ts's comment on the `export * from 'vue'` this depends on. Without it,
+  // view/text/image/switch (the 4 tags colliding with real SVG element names) type-check against
+  // Vue's own SVGAttributes in every .vue template. Lives HERE, not only in tsconfig.typecheck.json:
+  // the editor's Volar resolves the plain tsconfig.json, not the CLI's typecheck config, so a copy
+  // stuck in the latter only fixes `npm run typecheck` and leaves every live hover/error wrong.
+  "vueCompilerOptions": {
+    "lib": "@symbiote-native/vue"
+  },
+  "include": ["**/*.ts", "**/*.tsx", "**/*.vue"],
+  "exclude": ["**/node_modules", "**/Pods", "e2e"]
+}

package/templates/js/vue-sfc/tsconfig.typecheck.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "comment": "vue-tsc typecheck of the app + SFC components. @symbiote-native/* resolve to source (the monorepo's by-design source resolution), so this also re-checks adapter/engine source — `types: [node]` restores the runtime globals (setTimeout/process/console/queueMicrotask) the app tsconfig strips with `types: []`. e2e/ is excluded: Detox tests with jest globals, type-checked via ts-jest.",
+  "compilerOptions": {
+    "types": ["node"]
+  },
+  "exclude": ["**/node_modules", "**/Pods", "e2e"]
+}

package/templates/js/vue-sfc/vue-runtime-core.d.ts

@@ -0,0 +1,3 @@
+declare module 'vue' {
+  export * from '@vue/runtime-core';
+}

package/templates/js/vue-tsx/.prettierrc.js

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

package/templates/js/vue-tsx/.watchmanconfig

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

package/templates/js/vue-tsx/App.css

@@ -0,0 +1,89 @@
+:root {
+  --ink: #0b1622;
+  --paper: #13243a;
+  --mist: #41506a;
+  --chalk: #cbd5e1;
+  --chalk-bright: #ffffff;
+  --brand: #42b883;
+}
+
+.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-vue {
+  aspect-ratio: 1.1542;
+}
+
+.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(--ink);
+  font-size: 15px;
+  font-weight: bold;
+}

package/templates/js/vue-tsx/App.jsx

@@ -0,0 +1,40 @@
+import { ref } from '@vue/runtime-core';
+import './App.css';
+
+export default {
+  setup() {
+    const count = ref(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-vue"
+            resizeMode="contain"
+            source={require('./assets/vue-logo.png')}
+          />
+        </view>
+        <text class="title">Welcome to SymbioteNative!</text>
+        <text class="subtitle">Framework-agnostic React Native, driven by Vue.</text>
+
+        <view class="counter-card">
+          <text class="counter-label">TAPS</text>
+          <text class="counter-value">{count.value}</text>
+        </view>
+
+        <pressable class="button-primary" onPress={() => count.value++}>
+          <text class="button-primary-text">Tap me</text>
+        </pressable>
+      </safe-area-view>
+    );
+  },
+};

package/templates/js/vue-tsx/App.tsx

@@ -0,0 +1,40 @@
+import { ref } from '@vue/runtime-core';
+import './App.css';
+
+export default {
+  setup() {
+    const count = ref(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-vue"
+            resizeMode="contain"
+            source={require('./assets/vue-logo.png')}
+          />
+        </view>
+        <text class="title">Welcome to SymbioteNative!</text>
+        <text class="subtitle">Framework-agnostic React Native, driven by Vue.</text>
+
+        <view class="counter-card">
+          <text class="counter-label">TAPS</text>
+          <text class="counter-value">{count.value}</text>
+        </view>
+
+        <pressable class="button-primary" onPress={() => count.value++}>
+          <text class="button-primary-text">Tap me</text>
+        </pressable>
+      </safe-area-view>
+    );
+  },
+};