create-jilatax 0.2.1 → 0.2.2

package/package.json

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

package/template/AGENTS.md

@@ -0,0 +1,79 @@
+# AGENTS.md
+
+## Project
+
+- Android-first Lynx application generated with Jilatax.
+- Stack: TypeScript, Lynx, React, Rspeedy, and the Jilatax CLI.
+- This project is self-contained. Its `package.json`, `bun.lock`, `app.json`, source tree, and Android project belong to this app only.
+- If the parent directory contains other generated apps, treat them as independent projects. Do not edit or run commands in sibling apps unless explicitly requested.
+
+## Requirements
+
+- Node.js `>=22.18.0`.
+- Bun `1.3.4`, as pinned in `package.json`.
+- Android SDK, Java, and ADB are required only for Android commands.
+
+## Package manager
+
+- Use Bun exclusively.
+- Run commands from this project root, where `package.json` and `app.json` live.
+- Run `bun install` after cloning or whenever dependencies are missing.
+- Keep `bun.lock` committed and never commit `node_modules/`.
+
+## Commands
+
+| Action | Command | Notes |
+| --- | --- | --- |
+| Install dependencies | `bun install` | Run from this project root |
+| Development server | `bun run dev` | Starts Rspeedy and prints the Lynx QR code |
+| Production bundle | `bun run build` | Builds the Lynx bundle into `dist/` |
+| Typecheck | `bun run typecheck` | Runs `tsc -b` |
+| Run on Android | `bun run run:android` | Builds, installs, configures ADB reverse, and launches the debug app |
+| Production AAB | `bun run create:aab` | Requires Android signing configuration |
+
+- No lint, test, or format scripts are configured. Do not invent substitute commands and report these checks as passed.
+
+## Architecture
+
+- `src/index.tsx` is the runtime entry point and renders `src/app/App.tsx`.
+- `src/app/App.tsx` owns the active-tab state and screen composition.
+- `src/app/navigation.ts` defines the valid app tabs.
+- `src/screens/` contains screen-level components: Home, About, and Setting.
+- `src/components/` contains reusable UI and navigation components.
+- `src/components/navigation/BottomBar.css` is colocated with the bottom navigation; shared app styles live in `src/styles/global.css`.
+- `src/assets/` contains assets imported by application source, such as the interactive logo image.
+- `public/assets/` contains launcher and splash artwork referenced by `app.json`.
+- `public/fonts/` contains fonts loaded by CSS.
+- `lynx.config.ts` configures Rspeedy, React Lynx, QR development, bundle naming, and the required `asset:///` prefix.
+- `app.json` is the source of truth for Jilatax application and Android metadata.
+- `android/` contains the committed native project and Gradle wrapper. Jilatax synchronizes configuration and resources before Android builds.
+
+## Implementation conventions
+
+- Prefer the existing `app`, `screens`, and `components` boundaries before introducing new abstractions.
+- Keep screen orchestration in `App.tsx`, tab types in `navigation.ts`, and reusable presentation in `components/`.
+- Follow the existing `.js` suffix convention for relative TypeScript imports.
+- Use Lynx elements and events such as `<view>`, `<text>`, `<image>`, and `bindtap`; do not assume browser DOM APIs or React DOM event names.
+- Keep component-specific styles colocated when they are not shared. Put only cross-app styles and theme variables in `src/styles/global.css`.
+- Import source assets from `src/assets/`. Keep launcher and splash paths stable unless `app.json` is updated at the same time.
+- Preserve `output.assetPrefix: 'asset:///'` in `lynx.config.ts`; Android bundle loading depends on it.
+
+## Generated and sensitive files
+
+- Treat `dist/`, `.jilatax/`, `android/**/build/`, `android/.gradle/`, and `*.tsbuildinfo` as generated output, not source of truth.
+- Do not hand-edit generated resources under `.jilatax/`; change `app.json` or the referenced public assets and let Jilatax regenerate them.
+- Never commit `android/keystore.properties`, `*.jks`, `*.keystore`, `android/local.properties`, environment files, or credentials.
+- Use `android/keystore.properties.example` as the signing configuration reference.
+
+## Validation
+
+- Run `bun run typecheck` after TypeScript or configuration changes.
+- Run `bun run build` after source, style, asset, or Rspeedy configuration changes.
+- Run Android commands only when the task affects native behavior or explicitly requires device/build verification.
+- Report unavailable checks clearly; do not claim lint or tests passed because neither is configured.
+
+## Comment style
+
+- Never place comments on the first two lines of a source file; start with imports or declarations.
+- Prefer concise section headings such as `// ── Constants ──` or a three-line banner for major sections.
+- Use JSDoc only when an API, intent, edge case, or constraint needs explanation; do not restate the code.

package/template/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

package/template/src/app/App.tsx

@@ -3,6 +3,7 @@ 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 { SettingScreen } from '../screens/SettingScreen.js';
 import '../styles/global.css';
 import type { AppTab } from './navigation.js';
 
@@ -11,7 +12,7 @@ export function App() {
 
   return (
     <view className="app-shell">
-      {activeTab === 'home' ? <HomeScreen /> : <AboutScreen />}
+      {activeTab === 'home' ? <HomeScreen /> : activeTab === 'about' ? <AboutScreen /> : <SettingScreen />}
       <BottomBar activeTab={activeTab} onSelect={setActiveTab} />
     </view>
   );

package/template/src/app/navigation.ts

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

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

@@ -0,0 +1,78 @@
+.bottom-bar-wrap {
+  bottom: 11px;
+  left: 0;
+  padding: 0 22px;
+  position: absolute;
+  width: 100%;
+}
+
+.bottom-bar {
+  background-color: #ffffff;
+  border-color: #dfe9e5;
+  border-radius: 999px;
+  border-style: solid;
+  border-width: 1px;
+  display: flex;
+  flex-direction: row;
+  padding: 7px;
+  width: 100%;
+}
+
+.bottom-bar__button {
+  align-items: center;
+  border-radius: 999px;
+  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) {
+  .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/components/navigation/BottomBar.tsx

@@ -1,4 +1,5 @@
 import type { AppTab } from '../../app/navigation.js';
+import './BottomBar.css';
 
 interface BottomBarProps {
   activeTab: AppTab;
@@ -8,6 +9,7 @@ interface BottomBarProps {
 const tabs: ReadonlyArray<{ id: AppTab; label: string }> = [
   { id: 'home', label: 'Home' },
   { id: 'about', label: 'About' },
+  { id: 'setting', label: 'Setting' },
 ];
 
 export function BottomBar({ activeTab, onSelect }: BottomBarProps) {

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

@@ -0,0 +1,44 @@
+import logo from '../../assets/images/logo.png';
+
+const containerStyle = {
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'center',
+  margin: 'auto',
+} as const;
+
+const iconWrapperStyle = {
+  width: '32px',
+  height: '32px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+} as const;
+
+const textStyle = { margin: 0 };
+const textWithPaddingStyle = { margin: 0, paddingRight: '8px' };
+const imageStyle = { width: '32px', height: '32px' };
+
+interface LogoProps {
+  showImage?: boolean;
+}
+
+export function Logo({ showImage }: LogoProps) {
+  return (
+    <view style={containerStyle}>
+      <text className="centered-message" style={textWithPaddingStyle}>
+        Welcome
+      </text>
+      <view style={iconWrapperStyle}>
+        {showImage ? (
+          <image src={logo} style={imageStyle} />
+        ) : (
+          <text className="centered-message" style={textStyle}>
+            🎉
+          </text>
+        )}
+      </view>
+    </view>
+  );
+}

package/template/src/screens/AboutScreen.tsx

@@ -1,37 +1,9 @@
-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">
       <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>
+        <text className="centered-message">About</text>
       </view>
-    </scroll-view>
+    </view>
   );
 }

package/template/src/screens/HomeScreen.tsx

@@ -1,45 +1,18 @@
-import { Brand } from '../components/ui/Brand.js';
+import { useState } from '@lynx-js/react';
+import { Logo } from '../components/ui/Logo.js';
 
 export function HomeScreen() {
-  return (
-    <scroll-view className="screen" scroll-orientation="vertical">
-      <view className="screen__content">
-        <Brand />
+  const [showImage, setShowImage] = useState(false);
 
-        <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>
+  const handleScreenTap = () => {
+    setShowImage((prev) => !prev);
+  };
 
-        <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>
+  return (
+    <view className="screen" bindtap={handleScreenTap}>
+      <view className="screen__content">
+        <Logo showImage={showImage} />
       </view>
-    </scroll-view>
+    </view>
   );
 }

package/template/src/screens/SettingScreen.tsx

@@ -0,0 +1,9 @@
+export function SettingScreen() {
+  return (
+    <view className="screen">
+      <view className="screen__content">
+        <text className="centered-message">Setting</text>
+      </view>
+    </view>
+  );
+}

package/template/src/styles/global.css

@@ -1,16 +1,31 @@
 @font-face {
-  font-family: JilataX;
-  src: url('../../public/fonts/JilataX.otf');
+  font-family: jilatax;
+  src: url('../../public/fonts/jilatax.ttf');
 }
 
 :root {
-  background-color: #f3f7f5;
-  color: #10241d;
+  --bg-color: #f3f7f5;
+  --text-color: #10241d;
+  background-color: var(--bg-color);
+  color: var(--text-color);
   font-family: system-ui, sans-serif;
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-color: #071510;
+    --text-color: #f3fff8;
+  }
+}
+
+/**
+ * ------------------------------------------------
+ *  ⚡ APP SHELL
+ * ------------------------------------------------
+ */
+
 .app-shell {
-  background-color: #f3f7f5;
+  background-color: var(--bg-color);
   height: 100vh;
   overflow: hidden;
   position: relative;
@@ -20,381 +35,20 @@
 .screen {
   height: 100%;
   width: 100%;
+  background-color: var(--bg-color);
 }
 
 .screen__content {
   display: flex;
   flex-direction: column;
   padding: 48px 22px 124px;
+  height: 100%;
 }
 
-.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;
-  }
+.centered-message {
+  font-family: jilatax;
+  font-size: 32px;
+  text-align: center;
+  margin: auto;
+  color: var(--text-color);
 }

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

@@ -1,19 +0,0 @@
-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>
-  );
-}