@symbiote-native/cli 0.1.0 → 0.1.1

package/bundle.js

@@ -1811,7 +1811,7 @@ function renderTemplate(src, dest, options = DEFAULT_OPTIONS) {
 //#endregion
 //#region src/utils/apply-bootsplash-logo.ts
 function applyBootsplashLogo(root, templatesRoot, framework) {
-	const overlayRoot = path.join(templatesRoot, "native", "bootsplash-logo", framework);
+	const overlayRoot = path.join(templatesRoot, "bootsplash-logo", framework);
 	if (fs.existsSync(overlayRoot)) renderTemplate(overlayRoot, root);
 }
 //#endregion
@@ -1883,7 +1883,7 @@ const SKIPPED_DIR_NAMES$1 = /* @__PURE__ */ new Set([
 	"android",
 	"node_modules"
 ]);
-const APP_COMPONENT_FILENAMES$1 = /* @__PURE__ */ new Set([
+const APP_COMPONENT_FILENAMES = /* @__PURE__ */ new Set([
 	"App.tsx",
 	"App.jsx",
 	"App.ts",
@@ -1899,7 +1899,7 @@ function findAppComponentFile(dir) {
 			if (found !== void 0) return found;
 			continue;
 		}
-		if (APP_COMPONENT_FILENAMES$1.has(entry.name)) return entryPath;
+		if (APP_COMPONENT_FILENAMES.has(entry.name)) return entryPath;
 	}
 }
 function escapeRegExp(value) {
@@ -1978,31 +1978,6 @@ const SKIPPED_DIR_NAMES = /* @__PURE__ */ new Set([
 	"android",
 	"node_modules"
 ]);
-const APP_COMPONENT_FILENAMES = /* @__PURE__ */ new Set([
-	"App.tsx",
-	"App.jsx",
-	"App.ts",
-	"App.vue",
-	"App.svelte"
-]);
-const STARTER_CSS_CONTENT = `.container {
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-}
-`;
-function findAppComponentDir(dir) {
-	for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
-		const entryPath = path.join(dir, entry.name);
-		if (entry.isDirectory()) {
-			if (SKIPPED_DIR_NAMES.has(entry.name)) continue;
-			const found = findAppComponentDir(entryPath);
-			if (found !== void 0) return found;
-			continue;
-		}
-		if (APP_COMPONENT_FILENAMES.has(entry.name)) return dir;
-	}
-}
 function findAppCssFile(dir) {
 	for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
 		if (entry.isDirectory()) {
@@ -2040,10 +2015,6 @@ function applyStyling(root, options) {
 		if (hasNavigation) renderTemplate(path.join(templatesRoot, "styling", "navigation", jsTemplateDir, styling), root, { hasTypescript });
 		const orphanedCss = findAppCssFile(root);
 		if (orphanedCss !== void 0) fs.rmSync(orphanedCss, { force: true });
-		if (styling === "css-modules") {
-			const appDir = findAppComponentDir(root);
-			if (appDir !== void 0) fs.writeFileSync(path.join(appDir, "App.module.css"), STARTER_CSS_CONTENT);
-		}
 		return;
 	}
 	if (INLINE_STYLE_BLOCK_FRAMEWORKS.has(jsTemplateDir)) {
@@ -2774,7 +2745,7 @@ async function runNew(parsed) {
 }
 //#endregion
 //#region package.json
-var version = "0.1.0";
+var version = "0.1.1";
 //#endregion
 //#region src/index.ts
 function printHelp() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/cli",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Create a native iOS/Android app in Vue, Svelte, Solid, Angular or React, on React Native's own Fabric renderer. Scaffolds a new app, or wires SymbioteNative into an existing bare React Native one.",
   "keywords": [
     "react-native",

package/templates/js/angular/index.js

@@ -5,6 +5,8 @@
  * AppRegistry, then registers the root component — same entry point the other canaries use.
  */
 
+// Registers host behaviors (Image, Pressable, Switch, ...) that /bootstrap alone doesn't reach; deleting this breaks them silently.
+import '@symbiote-native/angular';
 import { bootstrapApplication } from '@symbiote-native/angular/bootstrap';
 import { AppComponent } from './build/angular/src/App';
 import { name as appName } from './app.json';

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

@@ -26,14 +26,12 @@
   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;
+  width: 70px;
 }
 
 .brand-logo-angular {
-  aspect-ratio: 0.9463;
+  width: 61px;
 }
 
 .plus-icon {

package/templates/js/react/App.css

@@ -17,8 +17,8 @@
 }
 
 .brand-logo {
+  width: 70px;
   height: 64px;
-  aspect-ratio: 1.0977;
 }
 
 .title {

package/templates/js/react/index.js

@@ -7,6 +7,8 @@
  * events, third-party ViewConfigs) before registering, so this file only needs the app itself.
  */
 
+// Registers host behaviors (Image, Pressable, Switch, ...) that /bootstrap alone doesn't reach; deleting this breaks them silently.
+import '@symbiote-native/react';
 import { registerApp } from '@symbiote-native/react/bootstrap';
 import App from './App';
 import { name as appName } from './app.json';

package/templates/js/solid/App.css

@@ -26,14 +26,12 @@
   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;
+  width: 70px;
 }
 
 .brand-logo-solid {
-  aspect-ratio: 1.03125;
+  width: 66px;
 }
 
 .plus-icon {

package/templates/js/solid/index.js

@@ -6,6 +6,8 @@
  * Same entry shape as every other canary, going through the shared AppRegistry seam.
  */
 
+// Registers host behaviors (Image, Pressable, Switch, ...) that /bootstrap alone doesn't reach; deleting this breaks them silently.
+import '@symbiote-native/solid';
 import { createApp } from '@symbiote-native/solid/bootstrap';
 import App from './App';
 import { name as appName } from './app.json';

package/templates/js/svelte/App.svelte

@@ -62,11 +62,11 @@
   }
 
   .brand-logo-react {
-    aspect-ratio: 1.0977;
+    width: 70px;
   }
 
   .brand-logo-svelte {
-    aspect-ratio: 0.8359;
+    width: 54px;
   }
 
   .plus-icon {

package/templates/js/svelte/App.typescript.svelte

@@ -62,11 +62,11 @@
   }
 
   .brand-logo-react {
-    aspect-ratio: 1.0977;
+    width: 70px;
   }
 
   .brand-logo-svelte {
-    aspect-ratio: 0.8359;
+    width: 54px;
   }
 
   .plus-icon {

package/templates/js/svelte/index.js

@@ -6,6 +6,8 @@
  * renderer is never in the path.
  */
 
+// Registers host behaviors (Image, Pressable, Switch, ...) that /bootstrap alone doesn't reach; deleting this breaks them silently.
+import '@symbiote-native/svelte';
 import { createApp } from '@symbiote-native/svelte/bootstrap';
 import App from './App.svelte';
 import { name as appName } from './app.json';

package/templates/js/vue-sfc/App.typescript.vue

@@ -67,11 +67,11 @@ const count = ref<number>(0);
 }
 
 .brand-logo-react {
-  aspect-ratio: 1.0977;
+  width: 70px;
 }
 
 .brand-logo-vue {
-  aspect-ratio: 1.1542;
+  width: 74px;
 }
 
 .plus-icon {

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

@@ -67,11 +67,11 @@ const count = ref(0);
 }
 
 .brand-logo-react {
-  aspect-ratio: 1.0977;
+  width: 70px;
 }
 
 .brand-logo-vue {
-  aspect-ratio: 1.1542;
+  width: 74px;
 }
 
 .plus-icon {

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

@@ -6,6 +6,8 @@
  * renderer is never in the path.
  */
 
+// Registers host behaviors (Image, Pressable, Switch, ...) that /bootstrap alone doesn't reach; deleting this breaks them silently.
+import '@symbiote-native/vue';
 import { createApp } from '@symbiote-native/vue/bootstrap';
 import App from './App';
 import { name as appName } from './app.json';

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

@@ -26,14 +26,12 @@
   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;
+  width: 70px;
 }
 
 .brand-logo-vue {
-  aspect-ratio: 1.1542;
+  width: 74px;
 }
 
 .plus-icon {

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

@@ -7,6 +7,8 @@
  * shared AppRegistry seam like every other canary.
  */
 
+// Registers host behaviors (Image, Pressable, Switch, ...) that /bootstrap alone doesn't reach; deleting this breaks them silently.
+import '@symbiote-native/vue';
 import { createApp } from '@symbiote-native/vue/bootstrap';
 import App from './App';
 import { name as appName } from './app.json';

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

@@ -26,14 +26,12 @@
   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;
+  width: 70px;
 }
 
 .brand-logo-angular {
-  aspect-ratio: 0.9463;
+  width: 61px;
 }
 
 .plus-icon {

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

@@ -17,8 +17,8 @@
 }
 
 .brand-logo {
+  width: 70px;
   height: 64px;
-  aspect-ratio: 1.0977;
 }
 
 .title {

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

@@ -26,14 +26,12 @@
   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;
+  width: 70px;
 }
 
 .brand-logo-solid {
-  aspect-ratio: 1.03125;
+  width: 66px;
 }
 
 .plus-icon {

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

@@ -26,14 +26,12 @@
   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;
+  width: 70px;
 }
 
 .brand-logo-svelte {
-  aspect-ratio: 0.8359;
+  width: 54px;
 }
 
 .plus-icon {

package/templates/layers/navigation/app/vue-sfc/App.css

@@ -26,14 +26,12 @@
   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;
+  width: 70px;
 }
 
 .brand-logo-vue {
-  aspect-ratio: 1.1542;
+  width: 74px;
 }
 
 .plus-icon {

package/templates/layers/navigation/app/vue-tsx/App.css

@@ -26,14 +26,12 @@
   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;
+  width: 70px;
 }
 
 .brand-logo-vue {
-  aspect-ratio: 1.1542;
+  width: 74px;
 }
 
 .plus-icon {

package/templates/styling/js/angular/css-modules/src/App.module.css

@@ -0,0 +1,78 @@
+.screen {
+  flex: 1;
+  background-color: #0b1622;
+  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;
+}
+
+.brand-logo-react {
+  width: 70px;
+}
+
+.brand-logo-angular {
+  width: 61px;
+}
+
+.plus-icon {
+  width: 48px;
+  height: 48px;
+}
+
+.title {
+  color: #ffffff;
+  font-size: 22px;
+  font-weight: bold;
+  text-align: center;
+}
+
+.subtitle {
+  color: #cbd5e1;
+  font-size: 14px;
+  text-align: center;
+}
+
+.counter-card {
+  align-items: center;
+  gap: 4px;
+  padding: 20px 28px;
+  border-radius: 16px;
+  background-color: #13243a;
+}
+
+.counter-label {
+  color: #41506a;
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+
+.counter-value {
+  color: #dd0031;
+  font-size: 32px;
+  font-weight: bold;
+}
+
+.button-primary {
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  padding: 14px 22px;
+  background-color: #dd0031;
+}
+
+.button-primary-text {
+  color: #ffffff;
+  font-size: 15px;
+  font-weight: bold;
+}

package/templates/styling/js/angular/css-modules/src/App.ts

@@ -7,17 +7,41 @@ import stylesModule from './App.module.css';
   standalone: true,
   imports: [SYMBIOTE_ELEMENTS],
   template: `
-    <view [class]="containerClass">
-      <text>Welcome to SymbioteNative!</text>
-      <pressable (press)="increment()">
-        <text>Taps: {{ count() }}</text>
+    <safe-area-view [class]="stylesModule['screen']">
+      <view [class]="stylesModule['brand-row']">
+        <image
+          [class]="stylesModule['brand-logo'] + ' ' + stylesModule['brand-logo-react']"
+          resizeMode="contain"
+          [source]="reactNativeLogo"
+        ></image>
+        <image [class]="stylesModule['plus-icon']" resizeMode="contain" [source]="plusIcon"></image>
+        <image
+          [class]="stylesModule['brand-logo'] + ' ' + stylesModule['brand-logo-angular']"
+          resizeMode="contain"
+          [source]="angularLogo"
+        ></image>
+      </view>
+
+      <text [class]="stylesModule['title']">Welcome to SymbioteNative!</text>
+      <text [class]="stylesModule['subtitle']">Framework-agnostic React Native, driven by Angular.</text>
+
+      <view [class]="stylesModule['counter-card']">
+        <text [class]="stylesModule['counter-label']">TAPS</text>
+        <text [class]="stylesModule['counter-value']">{{ count() }}</text>
+      </view>
+
+      <pressable [class]="stylesModule['button-primary']" (press)="increment()">
+        <text [class]="stylesModule['button-primary-text']">Tap me</text>
       </pressable>
-    </view>
+    </safe-area-view>
   `,
 })
 export class AppComponent {
-  readonly containerClass = stylesModule.container;
+  readonly stylesModule = stylesModule;
   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/styling/js/angular/stylesheet/src/App.ts

@@ -6,19 +6,69 @@ import { SYMBIOTE_ELEMENTS, StyleSheet } from '@symbiote-native/angular';
   standalone: true,
   imports: [SYMBIOTE_ELEMENTS],
   template: `
-    <view [style]="styles.container">
-      <text>Welcome to SymbioteNative!</text>
-      <pressable (press)="increment()">
-        <text>Taps: {{ count() }}</text>
+    <safe-area-view [style]="styles.screen">
+      <view [style]="styles.brandRow">
+        <image [style]="[styles.brandLogo, styles.brandLogoReact]" resizeMode="contain" [source]="reactNativeLogo"></image>
+        <image [style]="styles.plusIcon" resizeMode="contain" [source]="plusIcon"></image>
+        <image [style]="[styles.brandLogo, styles.brandLogoAngular]" resizeMode="contain" [source]="angularLogo"></image>
+      </view>
+
+      <text [style]="styles.title">Welcome to SymbioteNative!</text>
+      <text [style]="styles.subtitle">Framework-agnostic React Native, driven by Angular.</text>
+
+      <view [style]="styles.counterCard">
+        <text [style]="styles.counterLabel">TAPS</text>
+        <text [style]="styles.counterValue">{{ count() }}</text>
+      </view>
+
+      <pressable [style]="styles.buttonPrimary" (press)="increment()">
+        <text [style]="styles.buttonPrimaryText">Tap me</text>
       </pressable>
-    </view>
+    </safe-area-view>
   `,
 })
 export class AppComponent {
   readonly styles = StyleSheet.create({
-    container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+    screen: {
+      flex: 1,
+      backgroundColor: '#0b1622',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 24,
+      paddingVertical: 24,
+      paddingHorizontal: 32,
+    },
+    brandRow: { flexDirection: 'row', alignItems: 'center', gap: 28 },
+    brandLogo: { height: 64 },
+    brandLogoReact: { width: 70 },
+    brandLogoAngular: { width: 61 },
+    plusIcon: { width: 48, height: 48 },
+    title: { color: '#ffffff', fontSize: 22, fontWeight: 'bold', textAlign: 'center' },
+    subtitle: { color: '#cbd5e1', fontSize: 14, textAlign: 'center' },
+    counterCard: {
+      alignItems: 'center',
+      gap: 4,
+      paddingVertical: 20,
+      paddingHorizontal: 28,
+      borderRadius: 16,
+      backgroundColor: '#13243a',
+    },
+    counterLabel: { color: '#41506a', fontSize: 12, letterSpacing: 1 },
+    counterValue: { color: '#dd0031', fontSize: 32, fontWeight: 'bold' },
+    buttonPrimary: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 12,
+      paddingVertical: 14,
+      paddingHorizontal: 22,
+      backgroundColor: '#dd0031',
+    },
+    buttonPrimaryText: { color: '#ffffff', fontSize: 15, fontWeight: 'bold' },
   });
   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/styling/js/react/css-modules/App.jsx

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

package/templates/styling/js/react/css-modules/App.module.css

@@ -0,0 +1,60 @@
+.screen {
+  flex: 1;
+  background-color: #0b1622;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+  padding: 24px 32px;
+}
+
+.brand-logo {
+  width: 70px;
+  height: 64px;
+}
+
+.title {
+  color: #ffffff;
+  font-size: 22px;
+  font-weight: bold;
+  text-align: center;
+}
+
+.subtitle {
+  color: #cbd5e1;
+  font-size: 14px;
+  text-align: center;
+}
+
+.counter-card {
+  align-items: center;
+  gap: 4px;
+  padding: 20px 28px;
+  border-radius: 16px;
+  background-color: #13243a;
+}
+
+.counter-label {
+  color: #41506a;
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+
+.counter-value {
+  color: #61dafb;
+  font-size: 32px;
+  font-weight: bold;
+}
+
+.button-primary {
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  padding: 14px 22px;
+  background-color: #61dafb;
+}
+
+.button-primary-text {
+  color: #0b1622;
+  font-size: 15px;
+  font-weight: bold;
+}