@lingxia/cli 0.0.9 → 0.1.1

package/templates/lxapp-create/html/view/home.ts

@@ -0,0 +1,19 @@
+const nameInput = document.getElementById('name') as HTMLInputElement;
+const btn = document.getElementById('btn')!;
+const greetingEl = document.getElementById('greeting')!;
+
+btn.onclick = () => {
+  const name = nameInput.value.trim();
+  if (name) greet({ name });
+};
+
+nameInput.onkeydown = (e) => {
+  if (e.key === 'Enter') btn.click();
+};
+
+window.LingXiaBridge?.subscribe((data: { greeting: string }) => {
+  if (data.greeting) {
+    greetingEl.textContent = data.greeting;
+    greetingEl.style.display = 'block';
+  }
+});

package/templates/lxapp-create/react/app.css

@@ -0,0 +1,20 @@
+/* Reset */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html, body { width: 100%; min-height: 100%; }
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  background: #f5f5f7;
+  color: #1d1d1f;
+  /* Disable text selection by default (like native apps) */
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-touch-callout: none;
+}
+#root { min-height: 100%; }
+input, button { font: inherit; }
+button:disabled { opacity: 0.5; }
+
+/* Enable text selection for specific elements */
+[selectable], .selectable { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
+input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }

package/templates/lxapp-create/react/lxapp.config.ts

@@ -0,0 +1,8 @@
+export default {
+  staticDirs: ['public'],
+  alias: {
+    '@shared': 'shared'
+  },
+  sourceDirs: ['shared'],
+  assetDir: 'assets'
+};

package/templates/lxapp-create/react/lxapp.json

@@ -1,7 +1,7 @@
 {
   "lxAppId": "__APP_ID__",
   "lxAppName": "__APP_DISPLAY_NAME__",
-  "version": "0.1.0",
+  "version": "0.0.1",
   "pages": [
     "pages/home/index.tsx"
   ]

package/templates/lxapp-create/react/package.json

@@ -14,7 +14,9 @@
     "framework": "react"
   },
   "dependencies": {
+    "@lingxia/components": "^0.1.1",
     "@lingxia/rong": "^{{RONG_VERSION}}",
+    "@lingxia/types": "^0.1.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },

package/templates/lxapp-create/react/pages/home/index.json

@@ -1,3 +1,3 @@
 {
-  "navigationBarTitleText": "Home"
+  "navigationStyle": "custom"
 }

package/templates/lxapp-create/react/pages/home/index.ts

@@ -1,14 +1,19 @@
 Page({
   data: {
-    greeting: 'Welcome to your LingXia app',
+    greeting: '',
     greetCount: 0
   },
 
-  greet({ name }: { name: string }) {
+  greet: function(payload: { name: string }) {
     const count = this.data.greetCount + 1;
+    const time = new Date().toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit'
+    });
     this.setData({
       greetCount: count,
-      greeting: `Hello ${name}! (#${count})`
+      greeting: 'Hello, ' + payload.name + '! 👋\nGreeting #' + count + ' at ' + time
     });
   }
 });

package/templates/lxapp-create/react/pages/home/index.tsx

@@ -1,60 +1,131 @@
 import React from 'react';
+import { LxNavigator } from '@lingxia/components/react';
+import '../../app.css';
 
-type PageState = {
-  greeting: string;
-  greetCount: number;
-};
-
-type PageActions = {
-  data: PageState;
-  greet(payload: { name: string }): void;
-};
-
+type PageState = { greeting: string; greetCount: number };
+type PageActions = { data: PageState; greet(payload: { name: string }): void };
 declare function useLingXia(): PageActions;
 
 export default function HomePage() {
   const { data, greet } = useLingXia();
   const [name, setName] = React.useState('');
-  const [pending, setPending] = React.useState(false);
-
-  React.useEffect(() => {
-    if (pending) {
-      const timer = setTimeout(() => setPending(false), 500);
-      return () => clearTimeout(timer);
-    }
-  }, [data.greetCount, pending]);
-
-  const submit = () => {
-    const value = name.trim();
-    if (!value) return;
-    setPending(true);
-    greet({ name: value });
-  };
+  const submit = () => name.trim() && greet({ name: name.trim() });
 
   return (
-    <div className="home-screen">
-      <div className="card">
-        <p className="eyebrow">LingXia + React</p>
-        <h1>Hello there 👋</h1>
-        <p className="description">
-          This starter demonstrates how logic data flows into a React view via the <code>useLingXia</code> hook.
-        </p>
-        <div className="form-row">
+    <div style={S.page}>
+      <div style={S.card}>
+        <img src="/public/AppIcon.png" style={S.logo} />
+        <h1 style={S.title}>Hello, LingXia</h1>
+        <p style={S.subtitle}>Build once, run everywhere</p>
+
+        <div style={S.form}>
           <input
             value={name}
-            placeholder="Enter a name"
-            onChange={event => setName(event.target.value)}
-            onKeyDown={event => {
-              if (event.key === 'Enter') submit();
-            }}
+            placeholder="Enter your name"
+            onChange={e => setName(e.target.value)}
+            onKeyDown={e => e.key === 'Enter' && submit()}
+            style={S.input}
           />
-          <button type="button" onClick={submit} disabled={pending}>
-            {pending ? 'Sending...' : 'Greet'}
+          <button onClick={submit} disabled={!name.trim()} style={S.btn}>
+            Say Hello
           </button>
         </div>
-        <div className="greeting">{data.greeting}</div>
-        <div className="meta">Invoked {data.greetCount} times</div>
+
+        {data.greeting && <p style={S.greeting}>{data.greeting}</p>}
+
+        <div style={S.footer}>
+          <LxNavigator url="https://www.lingxia.app" style={S.link}>
+            Documentation →
+          </LxNavigator>
+        </div>
       </div>
     </div>
   );
 }
+
+const S: Record<string, React.CSSProperties> = {
+  page: {
+    minHeight: '100vh',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 20,
+  },
+  card: {
+    width: '100%',
+    maxWidth: 360,
+    padding: 32,
+    background: '#fff',
+    borderRadius: 20,
+    boxShadow: '0 4px 24px rgba(0,0,0,0.08)',
+    textAlign: 'center',
+  },
+  logo: {
+    width: 72,
+    height: 72,
+    borderRadius: 16,
+    boxShadow: '0 2px 12px rgba(0,0,0,0.1)',
+  },
+  title: {
+    margin: '20px 0 6px',
+    fontSize: 26,
+    fontWeight: 700,
+    color: '#1d1d1f',
+  },
+  subtitle: {
+    margin: 0,
+    fontSize: 15,
+    color: '#86868b',
+  },
+  form: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 12,
+    marginTop: 28,
+  },
+  input: {
+    width: '100%',
+    height: 48,
+    padding: '0 16px',
+    border: '1px solid #d2d2d7',
+    borderRadius: 12,
+    fontSize: 16,
+    outline: 'none',
+    background: '#fafafa',
+    transition: 'border-color 0.2s',
+  },
+  btn: {
+    width: '100%',
+    height: 48,
+    border: 'none',
+    borderRadius: 12,
+    background: '#007aff',
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: 600,
+    cursor: 'pointer',
+    transition: 'background 0.2s',
+  },
+  greeting: {
+    marginTop: 24,
+    padding: 16,
+    background: '#f0fdf4',
+    border: '1px solid #bbf7d0',
+    borderRadius: 12,
+    color: '#166534',
+    fontSize: 15,
+    whiteSpace: 'pre-line',
+    textAlign: 'left',
+  },
+  footer: {
+    marginTop: 28,
+    paddingTop: 20,
+    borderTop: '1px solid #f0f0f0',
+  },
+  link: {
+    color: '#007aff',
+    fontSize: 14,
+    fontWeight: 500,
+    textDecoration: 'none',
+  },
+};

package/templates/lxapp-create/react/tsconfig.json

@@ -13,8 +13,11 @@
     "isolatedModules": true,
     "noEmit": true,
     "allowSyntheticDefaultImports": true,
-    "baseUrl": "."
+    "baseUrl": ".",
+    "paths": {
+      "@lingxia/page-types/*": ["./.lingxia/types/*"]
+    }
   },
-  "include": ["**/*.ts", "**/*.tsx"],
+  "include": ["**/*.ts", "**/*.tsx", ".lingxia/types/**/*.d.ts"],
   "exclude": ["node_modules", "dist"]
 }

package/templates/lxapp-create/vue/app.css

@@ -0,0 +1,20 @@
+/* Reset */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html, body { width: 100%; min-height: 100%; }
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  background: #f5f5f7;
+  color: #1d1d1f;
+  /* Disable text selection by default (like native apps) */
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-touch-callout: none;
+}
+#app { min-height: 100%; }
+input, button { font: inherit; }
+button:disabled { opacity: 0.5; }
+
+/* Enable text selection for specific elements */
+[selectable], .selectable { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
+input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }

package/templates/lxapp-create/vue/lxapp.config.ts

@@ -0,0 +1,8 @@
+export default {
+  staticDirs: ['public'],
+  alias: {
+    '@shared': 'shared'
+  },
+  sourceDirs: ['shared'],
+  assetDir: 'assets'
+};

package/templates/lxapp-create/vue/lxapp.json

@@ -1,7 +1,7 @@
 {
   "lxAppId": "__APP_ID__",
   "lxAppName": "__APP_DISPLAY_NAME__",
-  "version": "0.1.0",
+  "version": "0.0.1",
   "pages": [
     "pages/home/index.vue"
   ]

package/templates/lxapp-create/vue/package.json

@@ -14,7 +14,9 @@
     "framework": "vue"
   },
   "dependencies": {
+    "@lingxia/components": "^0.1.1",
     "@lingxia/rong": "^{{RONG_VERSION}}",
+    "@lingxia/types": "^0.1.1",
     "vue": "^3.5.27"
   },
   "devDependencies": {

package/templates/lxapp-create/vue/pages/home/index.json

@@ -1,3 +1,3 @@
 {
-  "navigationBarTitleText": "Home"
+  "navigationStyle": "custom"
 }

package/templates/lxapp-create/vue/pages/home/index.ts

@@ -1,14 +1,19 @@
 Page({
   data: {
-    greeting: 'Welcome to your LingXia app',
+    greeting: '',
     greetCount: 0
   },
 
-  greet({ name }: { name: string }) {
+  greet: function(payload: { name: string }) {
     const count = this.data.greetCount + 1;
+    const time = new Date().toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit'
+    });
     this.setData({
       greetCount: count,
-      greeting: `Hello ${name}! (#${count})`
+      greeting: 'Hello, ' + payload.name + '! 👋\nGreeting #' + count + ' at ' + time
     });
   }
 });

package/templates/lxapp-create/vue/pages/home/index.vue

@@ -1,48 +1,135 @@
 <script setup>
-import { computed, ref, watch } from 'vue';
+import '../../app.css';
+import { LxNavigator } from '@lingxia/components/vue';
+import { computed, ref } from 'vue';
 
 const { data, greet } = useLingXia();
-const state = computed(() => data ?? { greeting: '', greetCount: 0 });
-const name = ref('');
-const pending = ref(false);
+const state = computed(() => data.value ?? { greeting: '', greetCount: 0 });
+const inputName = ref('');
+const canSubmit = computed(() => inputName.value.trim().length > 0);
 
-watch(
-  () => state.value.greetCount,
-  () => {
-    if (pending.value) {
-      pending.value = false;
-    }
-  }
-);
-
-function submit() {
-  const value = name.value.trim();
-  if (!value) return;
-  pending.value = true;
-  greet({ name: value });
+function handleSubmit() {
+  const v = inputName.value.trim();
+  if (v) greet({ name: v });
 }
 </script>
 
 <template>
-  <div class="home-screen">
-    <section class="card">
-      <p class="eyebrow">LingXia + Vue</p>
-      <h1>Hello there 👋</h1>
-      <p class="description">
-        This starter wires data from the logic layer into a Vue component using the <code>useLingXia</code> API.
-      </p>
-      <div class="form-row">
-        <input
-          v-model="name"
-          placeholder="Enter a name"
-          @keydown.enter.prevent="submit"
-        />
-        <button type="button" :disabled="pending" @click="submit">
-          {{ pending ? 'Sending…' : 'Greet' }}
-        </button>
+  <div class="page">
+    <div class="card">
+      <img :src="'/public/AppIcon.png'" class="logo" />
+      <h1 class="title">Hello, LingXia</h1>
+      <p class="subtitle">Build once, run everywhere</p>
+
+      <div class="form">
+        <input v-model="inputName" placeholder="Enter your name" class="input" @keydown.enter.prevent="handleSubmit" />
+        <button :disabled="!canSubmit" class="btn" @click="handleSubmit">Say Hello</button>
+      </div>
+
+      <p v-if="state.greeting" class="greeting">{{ state.greeting }}</p>
+
+      <div class="footer">
+        <LxNavigator url="https://www.lingxia.app" class="link">
+          Documentation →
+        </LxNavigator>
       </div>
-      <div class="greeting">{{ state.greeting }}</div>
-      <div class="meta">Invoked {{ state.greetCount }} times</div>
-    </section>
+    </div>
   </div>
 </template>
+
+<style scoped>
+.page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+.card {
+  width: 100%;
+  max-width: 360px;
+  padding: 32px;
+  background: #fff;
+  border-radius: 20px;
+  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
+  text-align: center;
+}
+.logo {
+  width: 72px;
+  height: 72px;
+  border-radius: 16px;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
+}
+.title {
+  margin: 20px 0 6px;
+  font-size: 26px;
+  font-weight: 700;
+  color: #1d1d1f;
+}
+.subtitle {
+  margin: 0;
+  font-size: 15px;
+  color: #86868b;
+}
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 28px;
+}
+.input {
+  width: 100%;
+  height: 48px;
+  padding: 0 16px;
+  border: 1px solid #d2d2d7;
+  border-radius: 12px;
+  font-size: 16px;
+  outline: none;
+  background: #fafafa;
+  transition: border-color 0.2s;
+}
+.input:focus {
+  border-color: #007aff;
+}
+.btn {
+  width: 100%;
+  height: 48px;
+  border: none;
+  border-radius: 12px;
+  background: #007aff;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+.btn:hover:not(:disabled) {
+  background: #0066d6;
+}
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.greeting {
+  margin-top: 24px;
+  padding: 16px;
+  background: #f0fdf4;
+  border: 1px solid #bbf7d0;
+  border-radius: 12px;
+  color: #166534;
+  font-size: 15px;
+  white-space: pre-line;
+  text-align: left;
+}
+.footer {
+  margin-top: 28px;
+  padding-top: 20px;
+  border-top: 1px solid #f0f0f0;
+}
+.link {
+  color: #007aff;
+  font-size: 14px;
+  font-weight: 500;
+  text-decoration: none;
+}
+</style>

package/templates/lxapp-create/vue/tsconfig.json

@@ -13,8 +13,11 @@
     "isolatedModules": true,
     "noEmit": true,
     "allowSyntheticDefaultImports": true,
-    "baseUrl": "."
+    "baseUrl": ".",
+    "paths": {
+      "@lingxia/page-types/*": ["./.lingxia/types/*"]
+    }
   },
-  "include": ["**/*.ts", "**/*.tsx", "**/*.vue"],
+  "include": ["**/*.ts", "**/*.tsx", "**/*.vue", ".lingxia/types/**/*.d.ts"],
   "exclude": ["node_modules", "dist"]
 }

package/templates/macos-native/Info.plist

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleExecutable</key>
+	<string>{{SWIFT_TARGET_NAME}}</string>
+	<key>CFBundleIconName</key>
+	<string>AppIcon</string>
+	<key>CFBundleIdentifier</key>
+	<string>{{PACKAGE_ID}}</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>{{PRODUCT_NAME}}</string>
+	<key>CFBundleDisplayName</key>
+	<string>{{PRODUCT_NAME}}</string>
+	<key>CFBundlePackageType</key>
+	<string>APPL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>1.0</string>
+	<key>CFBundleVersion</key>
+	<string>1</string>
+	<key>LSMinimumSystemVersion</key>
+	<string>11.0</string>
+	<key>NSHumanReadableCopyright</key>
+	<string>Copyright © 2024 LingXia. All rights reserved.</string>
+	<key>NSMainStoryboardFile</key>
+	<string>Main</string>
+	<key>NSPrincipalClass</key>
+	<string>NSApplication</string>
+	<key>NSSupportsAutomaticGraphicsSwitching</key>
+	<true/>
+	<key>NSHighResolutionCapable</key>
+	<true/>
+	<key>LSApplicationCategoryType</key>
+	<string>public.app-category.productivity</string>
+</dict>
+</plist>

package/templates/macos-native/Package.swift

@@ -0,0 +1,30 @@
+// swift-tools-version: 6.0
+import PackageDescription
+
+let package = Package(
+    name: "{{PROJECT_NAME}}",
+    platforms: [
+        .macOS(.v12)
+    ],
+    products: [
+        .executable(
+            name: "{{SWIFT_TARGET_NAME}}",
+            targets: ["{{SWIFT_TARGET_NAME}}"]
+        ),
+    ],
+    dependencies: [
+        .package(name: "lingxia", path: "../target/spm/lingxia"),
+    ],
+    targets: [
+        .executableTarget(
+            name: "{{SWIFT_TARGET_NAME}}",
+            dependencies: [
+                "lingxia",
+            ],
+            path: "Sources",
+            resources: [
+                .copy("Resources")
+            ]
+        ),
+    ]
+)

package/templates/macos-native/Sources/main.swift

@@ -0,0 +1,23 @@
+import AppKit
+import lingxia
+
+class LingXiaAppDelegate: NSObject, NSApplicationDelegate {
+
+    func applicationDidFinishLaunching(_ notification: Notification) {
+        // Enable WebView debugging BEFORE LxApp.initialize()
+        // This ensures debugging is enabled before the first WebView is created
+        LxApp.enableWebViewDebugging()
+
+        LxApp.initialize()
+    }
+
+    func applicationShouldTerminateAfterLastWindowClosed(_ sender: NSApplication) -> Bool {
+        return true
+    }
+}
+
+// Entry point
+let app = NSApplication.shared
+let delegate = LingXiaAppDelegate()
+app.delegate = delegate
+app.run()