@symbiote-native/cli 0.0.1

package/templates/layers/haptics/package.json.fragment.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@symbiote-native/haptics": "latest"
+  }
+}

package/templates/layers/keep-awake/package.json.fragment.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@symbiote-native/keep-awake": "latest"
+  }
+}

package/templates/layers/local-auth/package.json.fragment.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@symbiote-native/local-auth": "latest"
+  }
+}

package/templates/layers/localization/package.json.fragment.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@symbiote-native/localization": "latest"
+  }
+}

package/templates/layers/navigation/app/angular/src/App.css

@@ -0,0 +1,129 @@
+: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-row {
+  flex-direction: row;
+  gap: 12px;
+}
+
+.button-primary {
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  padding: 14px 22px;
+  background-color: var(--brand);
+}
+
+.button-secondary {
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  padding: 14px 22px;
+  border-width: 1.5px;
+  border-color: var(--mist);
+}
+
+.button-primary-text {
+  color: var(--chalk-bright);
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.button-secondary-text {
+  color: var(--chalk-bright);
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.details-card {
+  align-items: center;
+  gap: 10px;
+  padding: 24px;
+  border-radius: 16px;
+  background-color: var(--paper);
+}
+
+.details-title {
+  color: var(--chalk-bright);
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.details-body {
+  color: var(--chalk);
+  font-size: 14px;
+  text-align: center;
+}

package/templates/layers/navigation/app/angular/src/App.ts

@@ -0,0 +1,31 @@
+import { Component, ViewChild } from '@angular/core';
+import { Stack, ScreenDirective } from '@symbiote-native/navigation/angular';
+import { MenuScreen } from './MenuScreen';
+import { DetailsScreen } from './DetailsScreen';
+
+const SCREEN_OPTIONS = {
+  headerTranslucent: true,
+  headerTintColor: '#ffffff',
+  headerTitleColor: '#ffffff',
+  headerStyle: { backgroundColor: '#0b1622' },
+  headerUserInterfaceStyle: 'dark' as const,
+};
+
+@Component({
+  selector: 'symbiote-angular-app',
+  standalone: true,
+  imports: [Stack, ScreenDirective],
+  template: `
+    <Stack #nav initialRouteName="Menu">
+      <ng-template symbioteScreen name="Menu" [component]="menuScreen" [options]="menuOptions"></ng-template>
+      <ng-template symbioteScreen name="Details" [component]="detailsScreen" [options]="detailsOptions"></ng-template>
+    </Stack>
+  `,
+})
+export class AppComponent {
+  @ViewChild('nav') private readonly nav!: Stack;
+  readonly menuScreen = MenuScreen;
+  readonly menuOptions = { title: 'Home', ...SCREEN_OPTIONS };
+  readonly detailsScreen = DetailsScreen;
+  readonly detailsOptions = { title: 'Details', ...SCREEN_OPTIONS };
+}

package/templates/layers/navigation/app/angular/src/DetailsScreen.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { SYMBIOTE_ELEMENTS } from '@symbiote-native/angular';
+import { injectStackNavigation } from '@symbiote-native/navigation/angular';
+import './App.css';
+
+@Component({
+  selector: 'DetailsScreen',
+  standalone: true,
+  imports: [SYMBIOTE_ELEMENTS],
+  template: `
+    <safe-area-view class="screen">
+      <view class="details-card">
+        <text class="details-title">You made it!</text>
+        <text class="details-body">This screen was pushed by the Stack navigator — proof navigation actually works.</text>
+      </view>
+      <pressable class="button-secondary" (press)="navigation.pop()">
+        <text class="button-secondary-text">Go back</text>
+      </pressable>
+    </safe-area-view>
+  `,
+})
+export class DetailsScreen {
+  readonly navigation = injectStackNavigation();
+}

package/templates/layers/navigation/app/angular/src/MenuScreen.ts

@@ -0,0 +1,43 @@
+import { Component, signal } from '@angular/core';
+import { SYMBIOTE_ELEMENTS } from '@symbiote-native/angular';
+import { injectStackNavigation } from '@symbiote-native/navigation/angular';
+import './App.css';
+
+@Component({
+  selector: 'MenuScreen',
+  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>
+
+      <view class="button-row">
+        <pressable class="button-primary" (press)="count.update(v => v + 1)">
+          <text class="button-primary-text">Tap me</text>
+        </pressable>
+        <pressable class="button-secondary" (press)="navigation.push('Details')">
+          <text class="button-secondary-text">Go to Details</text>
+        </pressable>
+      </view>
+    </safe-area-view>
+  `,
+})
+export class MenuScreen {
+  readonly navigation = injectStackNavigation();
+  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');
+}

package/templates/layers/navigation/app/react/App.css

@@ -0,0 +1,109 @@
+: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-row {
+  flex-direction: row;
+  gap: 12px;
+}
+
+.button-primary {
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  padding: 14px 22px;
+  background-color: var(--brand);
+}
+
+.button-secondary {
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  padding: 14px 22px;
+  border-width: 1.5px;
+  border-color: var(--mist);
+}
+
+.button-primary-text {
+  color: var(--ink);
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.button-secondary-text {
+  color: var(--chalk-bright);
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.details-card {
+  align-items: center;
+  gap: 10px;
+  padding: 24px;
+  border-radius: 16px;
+  background-color: var(--paper);
+}
+
+.details-title {
+  color: var(--chalk-bright);
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.details-body {
+  color: var(--chalk);
+  font-size: 14px;
+  text-align: center;
+}

package/templates/layers/navigation/app/react/App.jsx

@@ -0,0 +1,77 @@
+import { Stack, useStackNavigation } from '@symbiote-native/navigation/react';
+import { useState } from 'react';
+import './App.css';
+
+function MenuScreen() {
+  const navigation = useStackNavigation();
+  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>
+
+      <view className="button-row">
+        <pressable className="button-primary" onPress={() => setCount(count + 1)}>
+          <text className="button-primary-text">Tap me</text>
+        </pressable>
+        <pressable className="button-secondary" onPress={() => navigation.push('Details')}>
+          <text className="button-secondary-text">Go to Details</text>
+        </pressable>
+      </view>
+    </safe-area-view>
+  );
+}
+
+function DetailsScreen() {
+  const navigation = useStackNavigation();
+
+  return (
+    <safe-area-view className="screen">
+      <view className="details-card">
+        <text className="details-title">You made it!</text>
+        <text className="details-body">
+          This screen was pushed by the Stack navigator — proof navigation actually works.
+        </text>
+      </view>
+      <pressable className="button-secondary" onPress={() => navigation.pop()}>
+        <text className="button-secondary-text">Go back</text>
+      </pressable>
+    </safe-area-view>
+  );
+}
+
+const SCREEN_OPTIONS = {
+  headerTranslucent: true,
+  headerTintColor: '#ffffff',
+  headerTitleColor: '#ffffff',
+  headerStyle: { backgroundColor: '#0b1622' },
+  headerUserInterfaceStyle: 'dark',
+};
+
+export default function App() {
+  return (
+    <Stack initialRouteName="Menu">
+      <Stack.Screen
+        name="Menu"
+        component={MenuScreen}
+        options={{ title: 'Home', ...SCREEN_OPTIONS }}
+      />
+      <Stack.Screen
+        name="Details"
+        component={DetailsScreen}
+        options={{ title: 'Details', ...SCREEN_OPTIONS }}
+      />
+    </Stack>
+  );
+}

package/templates/layers/navigation/app/react/App.tsx

@@ -0,0 +1,77 @@
+import { Stack, useStackNavigation } from '@symbiote-native/navigation/react';
+import { useState } from 'react';
+import './App.css';
+
+function MenuScreen() {
+  const navigation = useStackNavigation();
+  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>
+
+      <view className="button-row">
+        <pressable className="button-primary" onPress={() => setCount(count + 1)}>
+          <text className="button-primary-text">Tap me</text>
+        </pressable>
+        <pressable className="button-secondary" onPress={() => navigation.push('Details')}>
+          <text className="button-secondary-text">Go to Details</text>
+        </pressable>
+      </view>
+    </safe-area-view>
+  );
+}
+
+function DetailsScreen() {
+  const navigation = useStackNavigation();
+
+  return (
+    <safe-area-view className="screen">
+      <view className="details-card">
+        <text className="details-title">You made it!</text>
+        <text className="details-body">
+          This screen was pushed by the Stack navigator — proof navigation actually works.
+        </text>
+      </view>
+      <pressable className="button-secondary" onPress={() => navigation.pop()}>
+        <text className="button-secondary-text">Go back</text>
+      </pressable>
+    </safe-area-view>
+  );
+}
+
+const SCREEN_OPTIONS = {
+  headerTranslucent: true,
+  headerTintColor: '#ffffff',
+  headerTitleColor: '#ffffff',
+  headerStyle: { backgroundColor: '#0b1622' },
+  headerUserInterfaceStyle: 'dark' as const,
+};
+
+export default function App() {
+  return (
+    <Stack initialRouteName="Menu">
+      <Stack.Screen
+        name="Menu"
+        component={MenuScreen}
+        options={{ title: 'Home', ...SCREEN_OPTIONS }}
+      />
+      <Stack.Screen
+        name="Details"
+        component={DetailsScreen}
+        options={{ title: 'Details', ...SCREEN_OPTIONS }}
+      />
+    </Stack>
+  );
+}

package/templates/layers/navigation/app/solid/App.css

@@ -0,0 +1,129 @@
+: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-row {
+  flex-direction: row;
+  gap: 12px;
+}
+
+.button-primary {
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  padding: 14px 22px;
+  background-color: var(--brand);
+}
+
+.button-secondary {
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  padding: 14px 22px;
+  border-width: 1.5px;
+  border-color: var(--mist);
+}
+
+.button-primary-text {
+  color: var(--chalk-bright);
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.button-secondary-text {
+  color: var(--chalk-bright);
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.details-card {
+  align-items: center;
+  gap: 10px;
+  padding: 24px;
+  border-radius: 16px;
+  background-color: var(--paper);
+}
+
+.details-title {
+  color: var(--chalk-bright);
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.details-body {
+  color: var(--chalk);
+  font-size: 14px;
+  text-align: center;
+}