create-jilatax 0.0.7 → 0.0.9

package/dist/bin.cjs

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 //#region src/bin.ts
-require("./cli-D56yqirN.cjs").runCreateCli().then((exitCode) => {
+require("./cli-6qr3BMqu.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-yS2KRczW.js";
+import { n as runCreateCli } from "./cli-CrpTfN81.js";
 //#region src/bin.ts
 runCreateCli().then((exitCode) => {
 	process.exitCode = exitCode;

package/dist/{cli-D56yqirN.cjs → cli-6qr3BMqu.cjs}

@@ -30,18 +30,14 @@ node_path = __toESM(node_path, 1);
 let node_url = require("node:url");
 let jilatax = require("jilatax");
 //#region src/generator.ts
-const JILATAX_CLI_VERSION = "^0.0.8";
+const JILATAX_CLI_VERSION = "^0.0.9";
 const JILATAX_VERSION = "^0.0.6";
 const LYNX_QRCODE_PLUGIN_VERSION = "^0.4.4";
 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,7 +184,7 @@ function createInitialConfig(displayName, projectName, packageId) {
 			android: {
 				adaptiveIcon: {
 					backgroundColor: "#E8FFF2",
-					foregroundImage: "./assets/splash-icon.png"
+					foregroundImage: "./assets/icon.png"
 				},
 				package: packageId,
 				predictiveBackGestureEnabled: false,

package/dist/{cli-yS2KRczW.js → cli-CrpTfN81.js}

@@ -6,18 +6,14 @@ import path from "node:path";
 import { fileURLToPath } from "node:url";
 import { parseAppConfig, syncAndroidProjectConfig } from "jilatax";
 //#region src/generator.ts
-const JILATAX_CLI_VERSION = "^0.0.8";
+const JILATAX_CLI_VERSION = "^0.0.9";
 const JILATAX_VERSION = "^0.0.6";
 const LYNX_QRCODE_PLUGIN_VERSION = "^0.4.4";
 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,7 +160,7 @@ function createInitialConfig(displayName, projectName, packageId) {
 			android: {
 				adaptiveIcon: {
 					backgroundColor: "#E8FFF2",
-					foregroundImage: "./assets/splash-icon.png"
+					foregroundImage: "./assets/icon.png"
 				},
 				package: packageId,
 				predictiveBackGestureEnabled: false,

package/dist/index.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_cli = require("./cli-D56yqirN.cjs");
+const require_cli = require("./cli-6qr3BMqu.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-yS2KRczW.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-CrpTfN81.js";
 export { createHelpText, createProject, defaultPackageId, normalizeDisplayName, normalizeProjectName, runCreateCli, validatePackageId };

package/package.json

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

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 '../../../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${compact ? ' brand__icon-wrap--compact' : ''}`}>
+        <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,401 @@
+: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: 18px;
+  display: flex;
+  height: 58px;
+  justify-content: center;
+  overflow: hidden;
+  width: 58px;
+}
+
+.brand__icon-wrap--compact {
+  border-radius: 15px;
+  height: 48px;
+  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-size: 9px;
+  font-weight: 700;
+  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>
-  );
-}