create-jilatax 0.0.8 → 0.1.0

package/README.md

@@ -33,7 +33,8 @@ Generated projects include:
 - a Lynx and Rspeedy application;
 - `app.json` as the Jilatax application configuration;
 - an Android Gradle project linked to `jilatax/android`;
-- `bun run run:android` for development on a connected device;
+- `bun run run:android` for development on a connected device; the generated
+  APK is located at `android/app/build/outputs/apk/debug/app-debug.apk`;
 - `bun run create:aab` for a Play Store Android App Bundle.
 
 The creator only writes the project and can run `bun install`. Device, Gradle,

package/dist/bin.cjs

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 //#region src/bin.ts
-require("./cli-DtDXFiYr.cjs").runCreateCli().then((exitCode) => {
+require("./cli-DD2gvmMZ.cjs").runCreateCli().then((exitCode) => {
 	process.exitCode = exitCode;
 });
 //#endregion

package/dist/bin.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { n as runCreateCli } from "./cli-CcoP3IQU.js";
+import { n as runCreateCli } from "./cli-DLBJ0XnY.js";
 //#region src/bin.ts
 runCreateCli().then((exitCode) => {
 	process.exitCode = exitCode;

package/dist/{cli-DtDXFiYr.cjs → cli-DD2gvmMZ.cjs}

@@ -37,11 +37,7 @@ const LYNX_REACT_VERSION = "^0.116.2";
 const LYNX_TYPES_VERSION = "^3.7.0";
 const REACT_PLUGIN_VERSION = "^0.12.7";
 const RSPEEDY_VERSION = "^0.13.3";
-const TEXT_TEMPLATE_FILES = /* @__PURE__ */ new Set([
-	"README.md.tmpl",
-	"android/settings.gradle.kts.tmpl",
-	"src/App.tsx.tmpl"
-]);
+const TEXT_TEMPLATE_FILES = /* @__PURE__ */ new Set(["README.md.tmpl", "android/settings.gradle.kts.tmpl"]);
 async function createProject(options) {
 	const projectDirectory = node_path.default.resolve(options.targetDirectory);
 	const projectName = normalizeProjectName(node_path.default.basename(projectDirectory));
@@ -188,20 +184,20 @@ function createInitialConfig(displayName, projectName, packageId) {
 			android: {
 				adaptiveIcon: {
 					backgroundColor: "#E8FFF2",
-					foregroundImage: "./assets/icon.png"
+					foregroundImage: "./public/assets/icon.png"
 				},
 				package: packageId,
 				predictiveBackGestureEnabled: false,
 				versionCode: 1
 			},
-			icon: "./assets/icon.png",
+			icon: "./public/assets/icon.png",
 			name: displayName,
 			orientation: "portrait",
 			scheme: schemeBase || "jilatax-app",
 			slug,
 			splash: {
 				backgroundColor: "#041A17",
-				image: "./assets/splash-icon.png",
+				image: "./public/assets/splash-icon.png",
 				imageWidth: 96,
 				resizeMode: "contain"
 			},

package/dist/{cli-CcoP3IQU.js → cli-DLBJ0XnY.js}

@@ -13,11 +13,7 @@ const LYNX_REACT_VERSION = "^0.116.2";
 const LYNX_TYPES_VERSION = "^3.7.0";
 const REACT_PLUGIN_VERSION = "^0.12.7";
 const RSPEEDY_VERSION = "^0.13.3";
-const TEXT_TEMPLATE_FILES = /* @__PURE__ */ new Set([
-	"README.md.tmpl",
-	"android/settings.gradle.kts.tmpl",
-	"src/App.tsx.tmpl"
-]);
+const TEXT_TEMPLATE_FILES = /* @__PURE__ */ new Set(["README.md.tmpl", "android/settings.gradle.kts.tmpl"]);
 async function createProject(options) {
 	const projectDirectory = path.resolve(options.targetDirectory);
 	const projectName = normalizeProjectName(path.basename(projectDirectory));
@@ -164,20 +160,20 @@ function createInitialConfig(displayName, projectName, packageId) {
 			android: {
 				adaptiveIcon: {
 					backgroundColor: "#E8FFF2",
-					foregroundImage: "./assets/icon.png"
+					foregroundImage: "./public/assets/icon.png"
 				},
 				package: packageId,
 				predictiveBackGestureEnabled: false,
 				versionCode: 1
 			},
-			icon: "./assets/icon.png",
+			icon: "./public/assets/icon.png",
 			name: displayName,
 			orientation: "portrait",
 			scheme: schemeBase || "jilatax-app",
 			slug,
 			splash: {
 				backgroundColor: "#041A17",
-				image: "./assets/splash-icon.png",
+				image: "./public/assets/splash-icon.png",
 				imageWidth: 96,
 				resizeMode: "contain"
 			},

package/dist/index.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_cli = require("./cli-DtDXFiYr.cjs");
+const require_cli = require("./cli-DD2gvmMZ.cjs");
 exports.createHelpText = require_cli.createHelpText;
 exports.createProject = require_cli.createProject;
 exports.defaultPackageId = require_cli.defaultPackageId;

package/dist/index.js

@@ -1,2 +1,2 @@
-import { a as normalizeDisplayName, i as defaultPackageId, n as runCreateCli, o as normalizeProjectName, r as createProject, s as validatePackageId, t as createHelpText } from "./cli-CcoP3IQU.js";
+import { a as normalizeDisplayName, i as defaultPackageId, n as runCreateCli, o as normalizeProjectName, r as createProject, s as validatePackageId, t as createHelpText } from "./cli-DLBJ0XnY.js";
 export { createHelpText, createProject, defaultPackageId, normalizeDisplayName, normalizeProjectName, runCreateCli, validatePackageId };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-jilatax",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "packageManager": "bun@1.3.4",
   "description": "Create an Android-first Jilatax application for Lynx and Rspeedy.",
   "type": "module",

package/template/README.md.tmpl

@@ -2,20 +2,21 @@
 
 Android-first Lynx application created with Jilatax.
 
-## Development
+## Development (QR)
 
 ```bash
-bun install
-bun run run:android
+bun i
+bun run dev
 ```
 
 The Android command starts Rspeedy, builds and installs the debug APK, verifies
-the ADB reverse tunnel, and launches the app once.
+the ADB reverse tunnel, and launches the app once. The generated APK is located
+at `android/app/build/outputs/apk/debug/app-debug.apk`.
 
-To run only the Lynx development server:
+To run only the Lynx development APK (Real Mobile):
 
 ```bash
-bun run dev
+bun run run:android
 ```
 
 When the build is ready, scan the printed QR code with the Lynx application on
@@ -33,6 +34,8 @@ Play Store release. Never commit signing credentials.
 Application metadata lives in `app.json`. Android is the only supported native
 platform in this phase.
 
-Default launcher and splash artwork lives in `assets/`. Update the image paths,
-background colors, or splash width in `app.json`; Jilatax synchronizes those
-resources before each Android build.
+Default launcher and splash artwork lives in `public/assets/`. Additional local
+fonts can be stored in `public/fonts/`; the included JilataX font is applied to
+the `LYNX TO ANDROID` brand caption. Update the image paths, background colors,
+or splash width in `app.json`; Jilatax synchronizes those resources before each
+Android build.

package/template/src/app/App.tsx

@@ -0,0 +1,18 @@
+import { useState } from '@lynx-js/react';
+
+import { BottomBar } from '../components/navigation/BottomBar.js';
+import { AboutScreen } from '../screens/AboutScreen.js';
+import { HomeScreen } from '../screens/HomeScreen.js';
+import '../styles/global.css';
+import type { AppTab } from './navigation.js';
+
+export function App() {
+  const [activeTab, setActiveTab] = useState<AppTab>('home');
+
+  return (
+    <view className="app-shell">
+      {activeTab === 'home' ? <HomeScreen /> : <AboutScreen />}
+      <BottomBar activeTab={activeTab} onSelect={setActiveTab} />
+    </view>
+  );
+}

package/template/src/app/navigation.ts

@@ -0,0 +1 @@
+export type AppTab = 'home' | 'about';

package/template/src/components/navigation/BottomBar.tsx

@@ -0,0 +1,36 @@
+import type { AppTab } from '../../app/navigation.js';
+
+interface BottomBarProps {
+  activeTab: AppTab;
+  onSelect: (tab: AppTab) => void;
+}
+
+const tabs: ReadonlyArray<{ id: AppTab; label: string }> = [
+  { id: 'home', label: 'Home' },
+  { id: 'about', label: 'About' },
+];
+
+export function BottomBar({ activeTab, onSelect }: BottomBarProps) {
+  return (
+    <view className="bottom-bar-wrap">
+      <view className="bottom-bar">
+        {tabs.map((tab) => {
+          const isActive = activeTab === tab.id;
+
+          return (
+            <view
+              className={`bottom-bar__button${isActive ? ' bottom-bar__button--active' : ''}`}
+              bindtap={() => onSelect(tab.id)}
+              key={tab.id}
+            >
+              <view className={`bottom-bar__mark${isActive ? ' bottom-bar__mark--active' : ''}`} />
+              <text className={`bottom-bar__label${isActive ? ' bottom-bar__label--active' : ''}`}>
+                {tab.label}
+              </text>
+            </view>
+          );
+        })}
+      </view>
+    </view>
+  );
+}

package/template/src/components/ui/Brand.tsx

@@ -0,0 +1,19 @@
+import jilataxIcon from '../../../public/assets/jilatax-icon.png';
+
+interface BrandProps {
+  compact?: boolean;
+}
+
+export function Brand({ compact = false }: BrandProps) {
+  return (
+    <view className={`brand${compact ? ' brand--compact' : ''}`}>
+      <view className="brand__icon-wrap">
+        <image className="brand__icon" mode="aspectFit" src={jilataxIcon} />
+      </view>
+      <view className="brand__copy">
+        <text className="brand__name">JILATAX</text>
+        <text className="brand__caption">LYNX TO ANDROID</text>
+      </view>
+    </view>
+  );
+}

package/template/src/index.tsx

@@ -1,6 +1,6 @@
 import { root } from '@lynx-js/react';
 
-import { App } from './App.js';
+import { App } from './app/App.js';
 
 root.render(<App />);
 

package/template/src/screens/AboutScreen.tsx

@@ -0,0 +1,37 @@
+import { Brand } from '../components/ui/Brand.js';
+
+const principles = [
+  { number: '01', title: 'Simple by default', detail: 'A small structure that stays easy to evolve.' },
+  { number: '02', title: 'Native in the end', detail: 'A direct path from Lynx UI to Android.' },
+  { number: '03', title: 'Built with intent', detail: 'Clear hierarchy, spacing, and interaction.' },
+] as const;
+
+export function AboutScreen() {
+  return (
+    <scroll-view className="screen" scroll-orientation="vertical">
+      <view className="screen__content">
+        <Brand compact />
+
+        <view className="about-heading">
+          <text className="about-heading__label">THE FOUNDATION</text>
+          <text className="about-heading__title">Small core.{`\n`}Native result.</text>
+          <text className="about-heading__description">
+            JILATAX keeps the route from idea to Android direct and understandable.
+          </text>
+        </view>
+
+        <view className="principles">
+          {principles.map((principle) => (
+            <view className="principle" key={principle.number}>
+              <text className="principle__number">{principle.number}</text>
+              <view className="principle__copy">
+                <text className="principle__title">{principle.title}</text>
+                <text className="principle__detail">{principle.detail}</text>
+              </view>
+            </view>
+          ))}
+        </view>
+      </view>
+    </scroll-view>
+  );
+}

package/template/src/screens/HomeScreen.tsx

@@ -0,0 +1,45 @@
+import { Brand } from '../components/ui/Brand.js';
+
+export function HomeScreen() {
+  return (
+    <scroll-view className="screen" scroll-orientation="vertical">
+      <view className="screen__content">
+        <Brand />
+
+        <view className="hero">
+          <view className="eyebrow">
+            <view className="eyebrow__dot" />
+            <text className="eyebrow__text">ANDROID READY</text>
+          </view>
+          <text className="hero__title">Build clean.{`\n`}Ship native.</text>
+          <text className="hero__description">
+            A focused foundation for fast Lynx experiences on Android.
+          </text>
+        </view>
+
+        <view className="workspace-card">
+          <view className="workspace-card__glow" />
+          <view className="workspace-card__top">
+            <text className="workspace-card__label">YOUR WORKSPACE</text>
+            <view className="workspace-card__status">
+              <view className="workspace-card__status-dot" />
+              <text className="workspace-card__status-text">LIVE</text>
+            </view>
+          </view>
+          <text className="workspace-card__title">Ready for what comes next.</text>
+          <text className="workspace-card__description">
+            One clear interface, powered by Lynx and prepared for Android.
+          </text>
+          <view className="workspace-card__footer">
+            <view className="tech-pill">
+              <text className="tech-pill__text">LYNX</text>
+            </view>
+            <view className="tech-pill tech-pill--accent">
+              <text className="tech-pill__text tech-pill__text--accent">JILATAX</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+  );
+}

package/template/src/styles/global.css

@@ -0,0 +1,400 @@
+@font-face {
+  font-family: JilataX;
+  src: url('../../public/fonts/JilataX.otf');
+}
+
+:root {
+  background-color: #f3f7f5;
+  color: #10241d;
+  font-family: system-ui, sans-serif;
+}
+
+.app-shell {
+  background-color: #f3f7f5;
+  height: 100vh;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+
+.screen {
+  height: 100%;
+  width: 100%;
+}
+
+.screen__content {
+  display: flex;
+  flex-direction: column;
+  padding: 48px 22px 124px;
+}
+
+.brand {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+}
+
+.brand--compact {
+  margin-bottom: 38px;
+}
+
+.brand__icon-wrap {
+  align-items: center;
+  background-color: #e3eee9;
+  border-radius: 15px;
+  display: flex;
+  height: 48px;
+  justify-content: center;
+  overflow: hidden;
+  width: 48px;
+}
+
+.brand__icon {
+  height: 82%;
+  width: 82%;
+}
+
+.brand__copy {
+  display: flex;
+  flex-direction: column;
+  margin-left: 13px;
+}
+
+.brand__name {
+  color: #10241d;
+  font-size: 18px;
+  font-weight: 800;
+  letter-spacing: 2px;
+  line-height: 22px;
+}
+
+.brand__caption {
+  color: #688078;
+  font-family: JilataX;
+  font-size: 9px;
+  letter-spacing: 1.5px;
+  line-height: 14px;
+  margin-top: 2px;
+}
+
+.hero {
+  display: flex;
+  flex-direction: column;
+  margin-top: 50px;
+}
+
+.eyebrow {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+}
+
+.eyebrow__dot {
+  background-color: #0abf78;
+  border-radius: 999px;
+  height: 7px;
+  margin-right: 8px;
+  width: 7px;
+}
+
+.eyebrow__text,
+.about-heading__label {
+  color: #008f5a;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 1.8px;
+  line-height: 16px;
+}
+
+.hero__title,
+.about-heading__title {
+  color: #10241d;
+  font-size: 42px;
+  font-weight: 800;
+  letter-spacing: -1.5px;
+  line-height: 46px;
+  margin-top: 14px;
+}
+
+.hero__description,
+.about-heading__description {
+  color: #5c726a;
+  font-size: 16px;
+  line-height: 24px;
+  margin-top: 16px;
+}
+
+.workspace-card {
+  background-color: #10241d;
+  border-radius: 26px;
+  display: flex;
+  flex-direction: column;
+  margin-top: 38px;
+  overflow: hidden;
+  padding: 24px;
+  position: relative;
+}
+
+.workspace-card__glow {
+  background: linear-gradient(135deg, #c7ff36, #00b879);
+  border-radius: 999px;
+  height: 150px;
+  opacity: 0.14;
+  position: absolute;
+  right: -64px;
+  top: -76px;
+  width: 150px;
+}
+
+.workspace-card__top {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.workspace-card__label {
+  color: #a8bbb4;
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 1.6px;
+}
+
+.workspace-card__status {
+  align-items: center;
+  background-color: #1b382e;
+  border-radius: 999px;
+  display: flex;
+  flex-direction: row;
+  padding: 6px 10px;
+}
+
+.workspace-card__status-dot {
+  background-color: #b7ff33;
+  border-radius: 999px;
+  height: 6px;
+  margin-right: 6px;
+  width: 6px;
+}
+
+.workspace-card__status-text {
+  color: #d9ff9c;
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: 1px;
+}
+
+.workspace-card__title {
+  color: #f5fff9;
+  font-size: 24px;
+  font-weight: 750;
+  line-height: 30px;
+  margin-top: 28px;
+  max-width: 250px;
+}
+
+.workspace-card__description {
+  color: #a8bbb4;
+  font-size: 14px;
+  line-height: 21px;
+  margin-top: 10px;
+}
+
+.workspace-card__footer {
+  display: flex;
+  flex-direction: row;
+  margin-top: 24px;
+}
+
+.tech-pill {
+  border-color: #395248;
+  border-radius: 999px;
+  border-style: solid;
+  border-width: 1px;
+  padding: 7px 11px;
+}
+
+.tech-pill--accent {
+  border-color: #377b5f;
+  margin-left: 8px;
+}
+
+.tech-pill__text {
+  color: #9eb1aa;
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: 1.1px;
+}
+
+.tech-pill__text--accent {
+  color: #8ee3b7;
+}
+
+.about-heading {
+  display: flex;
+  flex-direction: column;
+}
+
+.principles {
+  display: flex;
+  flex-direction: column;
+  margin-top: 34px;
+}
+
+.principle {
+  align-items: flex-start;
+  background-color: #ffffff;
+  border-color: #dfe9e5;
+  border-radius: 20px;
+  border-style: solid;
+  border-width: 1px;
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 12px;
+  padding: 18px;
+}
+
+.principle__number {
+  color: #00a969;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 1px;
+  line-height: 18px;
+  width: 36px;
+}
+
+.principle__copy {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+.principle__title {
+  color: #10241d;
+  font-size: 15px;
+  font-weight: 750;
+  line-height: 20px;
+}
+
+.principle__detail {
+  color: #647970;
+  font-size: 13px;
+  line-height: 19px;
+  margin-top: 4px;
+}
+
+.bottom-bar-wrap {
+  bottom: 22px;
+  left: 0;
+  padding: 0 22px;
+  position: absolute;
+  width: 100%;
+}
+
+.bottom-bar {
+  background-color: #ffffff;
+  border-color: #dfe9e5;
+  border-radius: 22px;
+  border-style: solid;
+  border-width: 1px;
+  display: flex;
+  flex-direction: row;
+  padding: 7px;
+  width: 100%;
+}
+
+.bottom-bar__button {
+  align-items: center;
+  border-radius: 16px;
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  height: 54px;
+  justify-content: center;
+}
+
+.bottom-bar__button--active {
+  background-color: #e8f7ef;
+}
+
+.bottom-bar__mark {
+  border-color: #879990;
+  border-radius: 999px;
+  border-style: solid;
+  border-width: 2px;
+  height: 10px;
+  margin-right: 8px;
+  width: 10px;
+}
+
+.bottom-bar__mark--active {
+  background-color: #00aa6b;
+  border-color: #00aa6b;
+}
+
+.bottom-bar__label {
+  color: #72847c;
+  font-size: 13px;
+  font-weight: 650;
+}
+
+.bottom-bar__label--active {
+  color: #08774f;
+  font-weight: 800;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root,
+  .app-shell {
+    background-color: #071510;
+    color: #f3fff8;
+  }
+
+  .brand__icon-wrap {
+    background-color: #102b21;
+  }
+
+  .brand__name,
+  .hero__title,
+  .about-heading__title,
+  .principle__title {
+    color: #f3fff8;
+  }
+
+  .brand__caption,
+  .hero__description,
+  .about-heading__description,
+  .principle__detail {
+    color: #8ca198;
+  }
+
+  .eyebrow__text,
+  .about-heading__label {
+    color: #5ce7a6;
+  }
+
+  .workspace-card {
+    background-color: #0e251c;
+    border-color: #1a392d;
+    border-style: solid;
+    border-width: 1px;
+  }
+
+  .principle,
+  .bottom-bar {
+    background-color: #0d2119;
+    border-color: #1b382d;
+  }
+
+  .bottom-bar__button--active {
+    background-color: #15392b;
+  }
+
+  .bottom-bar__label {
+    color: #82978e;
+  }
+
+  .bottom-bar__label--active {
+    color: #79efb5;
+  }
+}

package/template/src/App.css

@@ -1,95 +0,0 @@
-:root {
-  background-color: #0f172a;
-  color: #f8fafc;
-  font-family: system-ui, sans-serif;
-}
-
-.page {
-  align-items: center;
-  background-color: #0f172a;
-  display: flex;
-  height: 100vh;
-  justify-content: center;
-  overflow: hidden;
-  padding: 24px;
-  position: relative;
-  width: 100%;
-}
-
-.orb {
-  border-radius: 999px;
-  opacity: 0.34;
-  position: absolute;
-}
-
-.orb--top {
-  background-color: #38bdf8;
-  height: 240px;
-  right: -100px;
-  top: -110px;
-  width: 240px;
-}
-
-.orb--bottom {
-  background-color: #8b5cf6;
-  bottom: -130px;
-  height: 280px;
-  left: -120px;
-  width: 280px;
-}
-
-.card {
-  background-color: #1e293b;
-  border-color: #334155;
-  border-radius: 24px;
-  border-style: solid;
-  border-width: 1px;
-  display: flex;
-  flex-direction: column;
-  padding: 30px 26px;
-  position: relative;
-  width: 100%;
-}
-
-.label {
-  color: #38bdf8;
-  font-size: 13px;
-  font-weight: 700;
-  letter-spacing: 2px;
-}
-
-.title {
-  color: #f8fafc;
-  font-size: 32px;
-  font-weight: 800;
-  line-height: 40px;
-  margin-top: 14px;
-}
-
-.description {
-  color: #cbd5e1;
-  font-size: 16px;
-  line-height: 24px;
-  margin-top: 14px;
-}
-
-.status {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  margin-top: 24px;
-}
-
-.status__dot {
-  background-color: #22c55e;
-  border-radius: 999px;
-  height: 10px;
-  margin-right: 10px;
-  width: 10px;
-}
-
-.status__text {
-  color: #e2e8f0;
-  font-size: 14px;
-  font-weight: 600;
-}

package/template/src/App.tsx.tmpl

@@ -1,23 +0,0 @@
-import './App.css';
-
-const applicationName = {{displayNameJson}};
-
-export function App() {
-  return (
-    <view className="page">
-      <view className="orb orb--top" />
-      <view className="orb orb--bottom" />
-      <view className="card">
-        <text className="label">JILATAX · ANDROID</text>
-        <text className="title">{applicationName}</text>
-        <text className="description">
-          Your Lynx app is ready. Edit src/App.tsx and save to see changes.
-        </text>
-        <view className="status">
-          <view className="status__dot" />
-          <text className="status__text">Rspeedy development ready</text>
-        </view>
-      </view>
-    </view>
-  );
-}