create-octane-xplat 0.1.0

package/index.mjs

@@ -0,0 +1,28 @@
+#!/usr/bin/env node
+import { existsSync, readdirSync, cpSync, renameSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { spawnSync } from 'node:child_process';
+
+const dir = resolve(process.argv[2] ?? 'octane-xplat-app');
+
+if (existsSync(dir) && readdirSync(dir).length > 0) {
+	console.error(`✗ ${dir} exists and is not empty`);
+	process.exit(1);
+}
+
+const template = join(dirname(fileURLToPath(import.meta.url)), 'template');
+cpSync(template, dir, { recursive: true });
+// npm packs .gitignore as a renamed file or drops it — ship it undotted.
+try { renameSync(join(dir, 'gitignore'), join(dir, '.gitignore')); } catch {}
+console.log(`\n✓ scaffolded ${dir}`);
+
+const install = spawnSync('pnpm', ['install'], { cwd: dir, stdio: 'inherit' });
+if (install.status !== 0) {
+	console.log(`\nInstall didn't finish (pnpm missing?). To run manually:`);
+	console.log(`  cd ${dir}\n  pnpm install\n  pnpm dev`);
+	process.exit(install.status ?? 1);
+}
+
+console.log('\n✓ installed — starting dev server (Ctrl+C to stop)\n');
+spawnSync('pnpm', ['dev'], { cwd: dir, stdio: 'inherit' });

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "create-octane-xplat",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Scaffold a minimal @octane-xplat/ui app — one Octane codebase for web + iOS + Android",
+  "bin": {
+    "create-octane-xplat": "./index.mjs"
+  },
+  "files": [
+    "index.mjs",
+    "template"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/template/gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

package/template/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>octane-xplat app</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsrx"></script>
+  </body>
+</html>

package/template/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "octane-xplat-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "typecheck": "tsrx-tsc --noEmit"
+  },
+  "dependencies": {
+    "@octane-xplat/ui": "^0.2.0",
+    "octane": "0.4.0"
+  },
+  "devDependencies": {
+    "@octanejs/vite-plugin": "0.1.58",
+    "@tsrx/typescript-plugin": "0.4.7",
+    "typescript": "5.9.3",
+    "vite": "8.3.0"
+  }
+}

package/template/pnpm-workspace.yaml

@@ -0,0 +1,7 @@
+# pnpm 11 settings live here, not in package.json.
+# esbuild needs its install script to place the platform binary.
+# @nativescript/core lands via optional peers — its scripts are native
+# toolchain prep the ns CLI does itself; skipping keeps installs clean.
+allowBuilds:
+  esbuild: true
+  '@nativescript/core': false

package/template/src/App.tsrx

@@ -0,0 +1,35 @@
+import { useState } from 'octane';
+import { View, Row, Text, Pressable, List, useColorScheme } from '@octane-xplat/ui';
+
+const FEATURES = [
+	'shared components',
+	'platform leaves (.web / .native)',
+	'design tokens + dark mode',
+	'native navigation',
+];
+
+/** Every element here compiles for web AND for NativeScript iOS/Android —
+ *  the same file, no branches. Platform divergence lives in leaf files
+ *  (.web.tsrx / .native.tsrx), never inside a component. */
+export function App() @{
+	const [count, setCount] = useState(0);
+	const [dark, setDark] = useState(false);
+	const scheme = useColorScheme();
+
+	<View className={['app', dark ? 'dark' : '']}>
+		<Text className="title">octane-xplat</Text>
+		<Text className="muted">one codebase — web · iOS · android</Text>
+
+		<Row className="counter">
+			<Pressable className="btn" onPress={() => setCount(count - 1)}><Text>−</Text></Pressable>
+			<Text className="count">{count}</Text>
+			<Pressable className="btn" onPress={() => setCount(count + 1)}><Text>+</Text></Pressable>
+		</Row>
+
+		<List items={FEATURES} renderItem={(f) => <Text className="chip">{f}</Text>} />
+
+		<Pressable className="link" onPress={() => setDark(!dark)}>
+			<Text>{dark ? 'light' : 'dark'} mode (system: {scheme})</Text>
+		</Pressable>
+	</View>
+}

package/template/src/main.tsrx

@@ -0,0 +1,6 @@
+import { createRoot } from 'octane';
+import { App } from './App.tsrx';
+import '@octane-xplat/ui/theme/tokens.css';
+import './style.css';
+
+createRoot(document.getElementById('root')!).render(<App />);

package/template/src/style.css

@@ -0,0 +1,74 @@
+/* App chrome — everything here is inside the web∩native CSS grammar
+ * (see docs/css-support-matrix.md in the framework repo). Design tokens
+ * (--color-*) come from @octane-xplat/ui/theme/tokens.css; .dark re-themes
+ * the same vars — no JS color values anywhere. */
+
+body {
+	margin: 0;
+	font-family: system-ui, sans-serif;
+}
+
+.app {
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 20px;
+	background-color: var(--color-surface);
+	color: var(--color-text);
+}
+
+.app Text {
+	color: var(--color-text);
+}
+
+.title {
+	font-size: 28px;
+	font-weight: bold;
+}
+
+.muted {
+	opacity: 0.65;
+}
+
+.counter {
+	align-items: center;
+	gap: 24px;
+}
+
+.count {
+	font-size: 32px;
+	font-weight: bold;
+	min-width: 48px;
+	text-align: center;
+}
+
+.btn {
+	background-color: var(--color-primary);
+	color: var(--color-on-primary);
+	padding: 10px 20px;
+	border-radius: 10px;
+	font-size: 20px;
+}
+
+.chip {
+	background-color: var(--color-primary);
+	color: var(--color-on-primary);
+	padding: 6px 14px;
+	border-radius: 14px;
+	font-size: 14px;
+}
+
+.vx-list {
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 8px;
+	max-width: 420px;
+	flex-grow: 0;
+}
+
+.link {
+	opacity: 0.7;
+}

package/template/tsconfig.json

@@ -0,0 +1,16 @@
+{
+	"compilerOptions": {
+		"strict": true,
+		"target": "ESNext",
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"jsx": "preserve",
+		"jsxImportSource": "octane",
+		"moduleSuffixes": [".web", ""],
+		"customConditions": ["web"],
+		"lib": ["ESNext", "DOM", "DOM.Iterable"],
+		"types": ["vite/client"],
+		"noEmit": true
+	},
+	"include": ["src/**/*"]
+}

package/template/vite.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite';
+import { octane } from '@octanejs/vite-plugin';
+
+// The web build. For native (iOS/Android), the same source runs through
+// @nativescript-community/vite-octane with `conditions: ['native']` and the
+// .ios/.android/.native suffix chain — see the octane-xplat repo's
+// apps/native/vite.config.mts.
+export default defineConfig({
+	plugins: [...octane()],
+	server: { port: 5200 },
+	resolve: {
+		conditions: ['web'],
+		// Suffix chain (first match wins): .web → shared → fallback.
+		extensions: [
+			'.web.tsrx', '.tsrx',
+			'.web.tsx', '.tsx',
+			'.web.ts', '.mjs', '.mts', '.ts',
+			'.jsx', '.js', '.json',
+		],
+	},
+});