@h-ai/cli 0.1.0-alpha.19 → 0.1.0-alpha.21

package/templates/apps/fullstack/apps/{{projectName}}-app/src/App.svelte.hbs

@@ -0,0 +1,186 @@
+{{! @skipIfEmpty }}
+{{#if fullstack.frontends.app}}
+<script lang="ts">
+  import type { AppInfo } from '{{fullstack.sharedPackageName}}'
+  import * as appM from './lib/paraglide/messages.js'
+  import { setLocale } from './lib/paraglide/runtime.js'
+  import { Alert, Button, Card, Skeleton } from '@h-ai/ui'
+  import { onMount } from 'svelte'
+  import {
+    fetchAppInfo,
+    getLocale as getSharedLocale,
+    LanguageSwitcher,
+    messages as sharedM,
+    ThemeSwitcher,
+  } from '{{fullstack.sharedPackageName}}'
+  import { initCapacitor } from './lib/capacitor.js'
+
+  type TabId = 'workspace' | 'status' | 'settings'
+
+  let info = $state<AppInfo | null>(null)
+  let loading = $state(true)
+  let errorMessage = $state('')
+  let activeTab = $state<TabId>('workspace')
+
+  const navItems = $derived([
+    { id: 'workspace', label: appM.nav_workspace(), iconClass: 'icon-[tabler--layout-dashboard]' },
+    { id: 'status', label: appM.nav_status(), iconClass: 'icon-[tabler--activity-heartbeat]' },
+    { id: 'settings', label: appM.nav_settings(), iconClass: 'icon-[tabler--settings]' },
+  ])
+
+  function syncLocale(locale: string) {
+    setLocale(locale as Parameters<typeof setLocale>[0])
+  }
+
+  function handleTabChange(id: string): void {
+    if (id === 'workspace' || id === 'status' || id === 'settings')
+      activeTab = id
+  }
+
+  async function refreshStatus() {
+    loading = true
+    errorMessage = ''
+    try {
+      info = await fetchAppInfo({ clientName: '{{projectName}}-app' })
+    }
+    catch {
+      info = null
+      errorMessage = sharedM.home_error()
+    }
+    finally {
+      loading = false
+    }
+  }
+
+  onMount(() => {
+    document.title = appM.page_title({ name: sharedM.app_name() })
+    syncLocale(getSharedLocale())
+    void initCapacitor()
+    void refreshStatus()
+  })
+</script>
+
+<div class="hai-mobile-viewport">
+  <div class="hai-mobile-shell max-w-lg">
+    <AppBar title={sharedM.app_name()} safeArea fixed={false} class="bg-base-100/95 backdrop-blur border-base-content/8" />
+
+    <main class="hai-mobile-main">
+      {#if activeTab === 'workspace'}
+        <section class="space-y-4 p-4 pb-6">
+          <div class="bg-primary text-primary-content rounded-2xl p-5 shadow-sm">
+            <p class="text-sm opacity-75">{appM.hero_badge()}</p>
+            <h1 class="mt-1 text-2xl font-bold">{appM.hero_title({ name: sharedM.app_name() })}</h1>
+            <p class="mt-2 text-sm opacity-80">{appM.hero_subtitle()}</p>
+          </div>
+
+          <div class="grid grid-cols-2 gap-3">
+            <Card padding="sm" shadow="sm">
+              <div class="flex flex-col gap-2">
+                <span class="icon-[tabler--components] text-primary text-2xl"></span>
+                <span class="text-sm font-medium">{appM.preview_metric_shared()}</span>
+                <span class="text-base-content/60 text-xs">{appM.custom_shared_body()}</span>
+              </div>
+            </Card>
+            <Card padding="sm" shadow="sm">
+              <div class="flex flex-col gap-2">
+                <span class="icon-[tabler--message-language] text-primary text-2xl"></span>
+                <span class="text-sm font-medium">{appM.preview_metric_local()}</span>
+                <span class="text-base-content/60 text-xs">{appM.custom_local_body()}</span>
+              </div>
+            </Card>
+          </div>
+
+          <Alert variant="info">
+            {appM.flow_frontend()}
+          </Alert>
+        </section>
+      {:else if activeTab === 'status'}
+        <section class="space-y-4 p-4 pb-6">
+          <Card title={appM.status_title()} shadow="sm">
+            <p class="mb-4 text-sm text-base-content/65">{appM.status_description()}</p>
+            {#if loading}
+              <Skeleton variant="title" class="mb-3" />
+              <Skeleton count={3} />
+              <p class="sr-only" data-testid="service-status">{sharedM.home_loading()}</p>
+            {:else if info}
+              <Alert variant="success" title={appM.status_online({ name: info.name })}>
+                <p data-testid="service-status">{info.name}</p>
+              </Alert>
+              <div class="mt-4 grid grid-cols-2 gap-3 text-sm">
+                <div>
+                  <p class="text-base-content/50">{appM.status_version()}</p>
+                  <p class="font-medium">{info.version}</p>
+                </div>
+                <div>
+                  <p class="text-base-content/50">{appM.status_frontends_count({ count: String(info.frontends.length) })}</p>
+                  <p class="font-medium">{info.frontends.join(' / ')}</p>
+                </div>
+              </div>
+            {:else}
+              <Alert variant="error" title={sharedM.home_error()}>
+                <p data-testid="service-status">{errorMessage}</p>
+              </Alert>
+            {/if}
+
+            {#snippet footer()}
+              <Button variant="ghost" size="sm" onclick={refreshStatus}>{sharedM.home_refresh()}</Button>
+            {/snippet}
+          </Card>
+        </section>
+      {:else}
+        <section class="space-y-4 p-4 pb-6">
+          <Card title={sharedM.settings_title()} shadow="sm">
+            <p class="mb-4 text-sm text-base-content/65">{appM.settings_description()}</p>
+
+            <div class="space-y-3">
+              <div class="rounded-2xl border border-base-300/70 bg-base-200/60 p-4">
+                <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                  <div class="min-w-0 flex-1">
+                    <h2 class="text-sm font-semibold">{sharedM.settings_theme()}</h2>
+                    <p class="mt-1 text-xs leading-5 text-base-content/65">{appM.settings_theme_description()}</p>
+                  </div>
+                  <div class="shrink-0">
+                    <ThemeSwitcher />
+                  </div>
+                </div>
+              </div>
+
+              <div class="rounded-2xl border border-base-300/70 bg-base-200/60 p-4">
+                <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                  <div class="min-w-0 flex-1">
+                    <h2 class="text-sm font-semibold">{sharedM.settings_language()}</h2>
+                    <p class="mt-1 text-xs leading-5 text-base-content/65">{appM.settings_language_description()}</p>
+                  </div>
+                  <div class="shrink-0">
+                    <LanguageSwitcher onLocaleChange={syncLocale} />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Card>
+
+          <Card title={appM.flow_title()} shadow="sm">
+            <div class="space-y-3 text-sm">
+              <div class="bg-base-200 rounded-xl p-3">{appM.flow_contract()}</div>
+              <div class="bg-base-200 rounded-xl p-3">{appM.flow_service()}</div>
+              <div class="bg-base-200 rounded-xl p-3">{appM.flow_shared()}</div>
+            </div>
+          </Card>
+        </section>
+      {/if}
+    </main>
+
+    <BottomNav
+      items={navItems}
+      active={activeTab}
+      onchange={handleTabChange}
+      safeArea
+      centered
+      maxWidth="lg"
+      class="border-base-content/8 shadow-[0_-12px_32px_rgba(15,23,42,0.08)]"
+    />
+  </div>
+</div>
+
+<ToastContainer />
+{{/if}}

package/templates/apps/fullstack/apps/{{projectName}}-app/src/app.css.hbs

@@ -3,6 +3,8 @@
 @import 'tailwindcss';
 @import '@h-ai/ui/styles/global.css';
 @import '@h-ai/ui/styles/theme.css';
+@import '@h-ai/ui/styles/design-tokens.css';
+@import '@h-ai/ui/styles/mobile.css';
 @source "../node_modules/@h-ai/ui/dist/**/*.{svelte,js,ts}";
 @source "../../../node_modules/@h-ai/ui/dist/**/*.{svelte,js,ts}";
 @source "../../../packages/{{fullstack.sharedPackageName}}/src/**/*.{svelte,js,ts}";

package/templates/apps/fullstack/apps/{{projectName}}-app/src/app.d.ts.hbs

@@ -1,6 +1,5 @@
 {{! @skipIfEmpty }}
 {{#if fullstack.frontends.app}}
-/// <reference types="@sveltejs/kit" />
 /// <reference types="vite/client" />
 
 import '@h-ai/ui/auto-import'

package/templates/apps/fullstack/apps/{{projectName}}-app/src/lib/capacitor.ts.hbs

@@ -0,0 +1,18 @@
+{{! @skipIfEmpty }}
+{{#if fullstack.frontends.app}}
+import { capacitor } from '@h-ai/capacitor'
+
+export async function initCapacitor(): Promise<void> {
+  const result = await capacitor.init()
+  if (!result.success) {
+    return
+  }
+
+  if (capacitor.isNative()) {
+    await capacitor.statusBar.configure({
+      style: 'dark',
+      overlay: true,
+    })
+  }
+}
+{{/if}}

package/templates/apps/fullstack/apps/{{projectName}}-app/src/main.ts.hbs

@@ -0,0 +1,14 @@
+{{! @skipIfEmpty }}
+{{#if fullstack.frontends.app}}
+import { mount } from 'svelte'
+import App from './App.svelte'
+import './app.css'
+
+const target = document.getElementById('app')
+if (!target)
+  throw new Error('Root element #app not found')
+
+const app = mount(App, { target })
+
+export default app
+{{/if}}

package/templates/apps/fullstack/apps/{{projectName}}-app/svelte.config.js.hbs

@@ -1,19 +1,15 @@
 {{! @skipIfEmpty }}
 {{#if fullstack.frontends.app}}
 import { autoImportHaiUi } from '@h-ai/ui/auto-import'
-import adapter from '@sveltejs/adapter-auto'
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 
-/** @type {import('@sveltejs/kit').Config} */
+/** @type {import('@sveltejs/vite-plugin-svelte').SvelteConfig} */
 const config = {
   preprocess: [autoImportHaiUi(), vitePreprocess()],
   compilerOptions: {
     // 使用 Svelte 5 Runes，和 @h-ai/ui 组件库保持一致。
     runes: true,
   },
-  kit: {
-    adapter: adapter(),
-  },
 }
 
 export default config

package/templates/apps/fullstack/apps/{{projectName}}-app/tsconfig.json.hbs

@@ -1,17 +1,23 @@
 {{! @skipIfEmpty }}
 {{#if fullstack.frontends.app}}
 {
-  "extends": "./.svelte-kit/tsconfig.json",
   "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "moduleDetection": "force",
+    "module": "ESNext",
     "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "types": ["svelte", "vite/client", "node", "vitest/globals"],
     "allowJs": true,
     "checkJs": false,
     "strict": true,
+    "noEmit": true,
+    "isolatedModules": true,
     "verbatimModuleSyntax": true,
     "skipLibCheck": true
   },
-  "include": ["src/**/*", "src/**/*.svelte", "tests/**/*"],
-  "exclude": ["node_modules", ".svelte-kit", "build"]
+  "include": ["src/**/*.ts", "src/**/*.svelte", "tests/**/*.ts", "vite.config.ts", "svelte.config.js", "capacitor.config.ts"],
+  "exclude": ["node_modules", "dist", "build", "android", "ios"]
 }
 {{/if}}

package/templates/apps/fullstack/apps/{{projectName}}-app/vite.config.ts.hbs

@@ -1,23 +1,24 @@
 {{! @skipIfEmpty }}
 {{#if fullstack.frontends.app}}
 import { paraglideVitePlugin } from '@inlang/paraglide-js'
-import { sveltekit } from '@sveltejs/kit/vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
 import tailwindcss from '@tailwindcss/vite'
 import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
   plugins: [
+    svelte(),
+    tailwindcss(),
     paraglideVitePlugin({
       project: './project.inlang',
       outdir: './src/lib/paraglide',
       strategy: ['cookie', 'baseLocale'],
     }),
-    sveltekit(),
-    tailwindcss(),
   ],
   optimizeDeps: {
     exclude: ['bits-ui'],
   },
+  envPrefix: ['VITE_', 'PUBLIC_'],
   ssr: {
     noExternal: [/@h-ai\//, /{{fullstack.sharedPackageName}}/],
   },

package/templates/apps/fullstack/apps/{{projectName}}-desktop/.env.example.hbs

@@ -0,0 +1,6 @@
+{{! @skipIfEmpty }}
+{{#if fullstack.frontends.desktop}}
+# {{projectName}}-desktop — 环境变量
+
+PUBLIC_API_BASE=http://localhost:3000
+{{/if}}

package/templates/apps/fullstack/apps/{{projectName}}-desktop/README.md.hbs

@@ -2,7 +2,7 @@
 {{#if fullstack.frontends.desktop}}
 # {{projectName}}-desktop
 
-桌面端前端工程，使用 `@h-ai/api-client` 绑定共享 contract 调用后端 API，并通过 `@h-ai/ui` 组件搭建页面；后续可按需接入 Tauri。
+桌面端工程，参考 `apps/desktop-app` 使用 Tauri v2 + Svelte 5 + Vite，前端通过共享 contract 调用 `{{fullstack.servPackageName}}`。
 
 ## i18n 与 shared 协同
 
@@ -12,10 +12,24 @@
 
 自定义建议：桌面端菜单、状态、快捷操作文案放在本目录 `messages/`；跨端通用能力放到 shared。
 
-## 开发
+## 编译、打包与部署
 
-- `pnpm i18n:compile`：在工作区根目录统一编译 shared + 各前端 Paraglide 输出
-- `pnpm --filter {{projectName}}-desktop dev`，默认端口 4175
-- `pnpm --filter {{projectName}}-desktop paraglide:compile`：只编译本端 messages
-- `pnpm --filter {{projectName}}-desktop test`
+```bash
+# 仅前端开发，默认端口 {{fullstack.ports.desktop}}
+pnpm --filter {{projectName}}-desktop dev
+
+# Tauri 桌面开发
+pnpm --filter {{projectName}}-desktop tauri:dev
+
+# 编译 WebView 前端产物到 dist/
+pnpm --filter {{projectName}}-desktop build
+
+# 打包桌面安装包
+pnpm --filter {{projectName}}-desktop package
+
+# 当前模板的 deploy 入口默认执行 package，可按发布平台替换
+pnpm --filter {{projectName}}-desktop deploy
+```
+
+打包前需要安装 Rust 工具链和 Tauri 平台依赖。生产环境部署时同步调整 `.env` 中的 `PUBLIC_API_BASE` 与 `src-tauri/tauri.conf.json` 的 `connect-src` 白名单。
 {{/if}}

package/templates/apps/fullstack/apps/{{projectName}}-desktop/eslint.config.js.hbs

@@ -4,7 +4,7 @@ import antfu from '@antfu/eslint-config'
 
 export default antfu({
   formatters: true,
-  ignores: ['**/.svelte-kit/**', '**/build/**', '**/dist/**', '**/*.d.ts', '**/project.inlang/**', '**/src/lib/paraglide/**'],
+  ignores: ['**/build/**', '**/dist/**', '**/*.d.ts', '**/project.inlang/**', '**/src/lib/paraglide/**'],
   svelte: true,
 }, {
   files: ['**/*.ts', '**/*.svelte'],

package/templates/apps/fullstack/apps/{{projectName}}-desktop/index.html.hbs

@@ -0,0 +1,15 @@
+{{! @skipIfEmpty }}
+{{#if fullstack.frontends.desktop}}
+<!doctype html>
+<html lang="{{fullstack.i18n.baseLocale}}" data-theme="{{fullstack.theme.defaultTheme}}">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{projectName}} Desktop</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
+{{/if}}

package/templates/apps/fullstack/apps/{{projectName}}-desktop/package.json.hbs

@@ -9,42 +9,45 @@
     "paraglide:compile": "paraglide-js compile --project ./project.inlang --outdir ./src/lib/paraglide",
     "paraglide:watch": "paraglide-js compile --project ./project.inlang --outdir ./src/lib/paraglide --watch",
     "dev": "vite dev --host 127.0.0.1 --port {{fullstack.ports.desktop}}",
-    "build": "vite build",
+    "build": "pnpm paraglide:compile && vite build",
+    "package": "pnpm tauri:build",
+    "deploy": "pnpm package",
     "preview": "vite preview --host 127.0.0.1 --port {{fullstack.ports.desktop}} --strictPort",
-    "typecheck": "pnpm paraglide:compile && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "lint": "eslint .",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "clean": "rimraf .svelte-kit build .turbo src/lib/paraglide"
+    "typecheck": "pnpm paraglide:compile && svelte-check --tsconfig ./tsconfig.json",
+    "lint": "eslint src tests vite.config.ts svelte.config.js",
+    "lint:fix": "eslint src tests vite.config.ts svelte.config.js --fix",
+    "test": "pnpm paraglide:compile && vitest run",
+    "test:watch": "pnpm paraglide:compile && vitest",
+    "clean": "rimraf dist .turbo src-tauri/target src/lib/paraglide",
+    "tauri": "tauri",
+    "tauri:dev": "tauri dev",
+    "tauri:build": "tauri build"
   },
   "dependencies": {
-    "@h-ai/api-client": "{{fullstack.versions.apiClient}}",
-    "@h-ai/ui": "{{fullstack.versions.ui}}",
-    "{{fullstack.contractPackageName}}": "workspace:*",
+    "@h-ai/ui": "{{haiPackageSpecifier}}",
     "{{fullstack.sharedPackageName}}": "workspace:*"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "{{fullstack.versions.antfuEslintConfig}}",
-    "@iconify-json/tabler": "{{fullstack.versions.iconifyJsonTabler}}",
-    "@iconify/tailwind4": "{{fullstack.versions.iconifyTailwind}}",
-    "@inlang/paraglide-js": "{{fullstack.versions.inlangParaglide}}",
-    "@inlang/plugin-message-format": "{{fullstack.versions.inlangMessageFormat}}",
-    "@sveltejs/adapter-auto": "{{fullstack.versions.adapterAuto}}",
-    "@sveltejs/kit": "{{fullstack.versions.svelteKit}}",
-    "@sveltejs/vite-plugin-svelte": "{{fullstack.versions.sveltePlugin}}",
-    "@tailwindcss/vite": "{{fullstack.versions.tailwindcssVite}}",
-    "bits-ui": "{{fullstack.versions.bitsUi}}",
-    "daisyui": "{{fullstack.versions.daisyui}}",
-    "eslint": "{{fullstack.versions.eslint}}",
-    "eslint-plugin-format": "{{fullstack.versions.eslintPluginFormat}}",
-    "eslint-plugin-svelte": "{{fullstack.versions.eslintPluginSvelte}}",
-    "svelte": "{{fullstack.versions.svelte}}",
-    "svelte-check": "{{fullstack.versions.svelteCheck}}",
-    "svelte-eslint-parser": "{{fullstack.versions.svelteEslintParser}}",
-    "tailwindcss": "{{fullstack.versions.tailwindcss}}",
-    "typescript": "{{fullstack.versions.typescript}}",
-    "vite": "{{fullstack.versions.vite}}",
-    "vitest": "{{fullstack.versions.vitest}}"
+    "@antfu/eslint-config": "{{fullstack.packageSpecifiers.antfuEslintConfig}}",
+    "@iconify-json/tabler": "{{fullstack.packageSpecifiers.iconifyJsonTabler}}",
+    "@iconify/tailwind4": "{{fullstack.packageSpecifiers.iconifyTailwind}}",
+    "@inlang/paraglide-js": "{{fullstack.packageSpecifiers.inlangParaglide}}",
+    "@inlang/plugin-message-format": "{{fullstack.packageSpecifiers.inlangMessageFormat}}",
+    "@sveltejs/vite-plugin-svelte": "{{fullstack.packageSpecifiers.sveltePlugin}}",
+    "@tailwindcss/vite": "{{fullstack.packageSpecifiers.tailwindcssVite}}",
+    "@tauri-apps/cli": "{{fullstack.packageSpecifiers.tauriCli}}",
+    "bits-ui": "{{fullstack.packageSpecifiers.bitsUi}}",
+    "daisyui": "{{fullstack.packageSpecifiers.daisyui}}",
+    "eslint": "{{fullstack.packageSpecifiers.eslint}}",
+    "eslint-plugin-format": "{{fullstack.packageSpecifiers.eslintPluginFormat}}",
+    "eslint-plugin-svelte": "{{fullstack.packageSpecifiers.eslintPluginSvelte}}",
+    "svelte": "{{fullstack.packageSpecifiers.svelte}}",
+    "svelte-check": "{{fullstack.packageSpecifiers.svelteCheck}}",
+    "svelte-eslint-parser": "{{fullstack.packageSpecifiers.svelteEslintParser}}",
+    "tailwindcss": "{{fullstack.packageSpecifiers.tailwindcss}}",
+    "typescript": "{{fullstack.packageSpecifiers.typescript}}",
+    "vite": "{{fullstack.packageSpecifiers.vite}}",
+    "vitest": "{{fullstack.packageSpecifiers.vitest}}"
   }
 }
 {{/if}}

package/templates/apps/fullstack/apps/{{projectName}}-desktop/src/App.svelte.hbs

@@ -0,0 +1,152 @@
+{{! @skipIfEmpty }}
+{{#if fullstack.frontends.desktop}}
+<script lang="ts">
+  import type { AppInfo } from '{{fullstack.sharedPackageName}}'
+  import * as appM from './lib/paraglide/messages.js'
+  import { setLocale } from './lib/paraglide/runtime.js'
+  import { Alert, Button, Card, Skeleton } from '@h-ai/ui'
+  import { onMount } from 'svelte'
+  import { AppShell, fetchAppInfo, messages as sharedM } from '{{fullstack.sharedPackageName}}'
+
+  let info = $state<AppInfo | null>(null)
+  let loading = $state(true)
+  let errorMessage = $state('')
+
+  function syncLocale(locale: string) {
+    setLocale(locale as Parameters<typeof setLocale>[0])
+  }
+
+  async function refreshStatus() {
+    loading = true
+    errorMessage = ''
+    try {
+      info = await fetchAppInfo({ clientName: '{{projectName}}-desktop' })
+    }
+    catch {
+      info = null
+      errorMessage = sharedM.home_error()
+    }
+    finally {
+      loading = false
+    }
+  }
+
+  onMount(() => {
+    document.title = appM.page_title({ name: sharedM.app_name() })
+    void refreshStatus()
+  })
+</script>
+
+<AppShell platform="desktop" onLocaleChange={syncLocale}>
+  <section class="space-y-8">
+    <div class="grid gap-6 lg:grid-cols-[1.2fr_0.8fr]">
+      <section class="relative overflow-hidden rounded-[1.5rem] border border-base-300/70 bg-base-100 p-6 shadow-xl lg:p-10">
+        <div class="max-w-2xl space-y-6">
+          <span class="badge badge-primary badge-lg gap-2">
+            <span class="icon-[tabler--device-desktop] size-4"></span>
+            {appM.hero_badge()}
+          </span>
+          <div class="space-y-4">
+            <h1 class="text-4xl font-black tracking-tight text-base-content sm:text-5xl">
+              {appM.hero_title({ name: sharedM.app_name() })}
+            </h1>
+            <p class="max-w-xl text-lg leading-8 text-base-content/70">
+              {appM.hero_subtitle()}
+            </p>
+          </div>
+          <div class="flex flex-wrap gap-3">
+            <a class="btn btn-primary" href="#status">
+              <span class="icon-[tabler--activity-heartbeat] size-5"></span>
+              {appM.hero_primary_action()}
+            </a>
+            <a class="btn btn-ghost" href="#customize">
+              <span class="icon-[tabler--adjustments] size-5"></span>
+              {appM.hero_secondary_action()}
+            </a>
+          </div>
+        </div>
+      </section>
+
+      <aside class="rounded-[1.5rem] border border-base-300/70 bg-base-100 p-5 shadow-lg">
+        <div class="mockup-window border border-base-300 bg-base-200/70">
+          <div class="space-y-4 bg-base-100 p-5">
+            <div class="flex items-center justify-between">
+              <div>
+                <p class="text-sm font-semibold">{appM.preview_title()}</p>
+                <p class="text-xs text-base-content/55">{appM.preview_body()}</p>
+              </div>
+              <span class="badge badge-success badge-outline">{appM.platform_name()}</span>
+            </div>
+            <div class="grid gap-3 text-sm">
+              <div class="rounded-2xl bg-primary/10 p-4">
+                <span class="icon-[tabler--components] mb-2 size-6 text-primary"></span>
+                <p class="font-semibold">{appM.preview_metric_shared()}</p>
+              </div>
+              <div class="grid grid-cols-2 gap-3">
+                <div class="rounded-2xl bg-secondary/10 p-4">
+                  <span class="icon-[tabler--language] mb-2 size-6 text-secondary"></span>
+                  <p class="font-semibold">{appM.preview_metric_local()}</p>
+                </div>
+                <div class="rounded-2xl bg-accent/10 p-4">
+                  <span class="icon-[tabler--palette] mb-2 size-6 text-accent"></span>
+                  <p class="font-semibold">{appM.preview_metric_theme()}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </aside>
+    </div>
+
+    <div class="grid gap-6 lg:grid-cols-[0.95fr_1.05fr]">
+      <div id="status">
+        <Card title={appM.status_title()} bordered shadow="md" class="bg-base-100">
+          <p class="mb-5 text-sm text-base-content/65">{appM.status_description()}</p>
+          {#if loading}
+            <Skeleton variant="title" class="mb-3" />
+            <Skeleton count={3} />
+            <p class="sr-only" data-testid="service-status">{sharedM.home_loading()}</p>
+          {:else if info}
+            <Alert variant="success" title={appM.status_online({ name: info.name })}>
+              <p data-testid="service-status">{info.name}</p>
+            </Alert>
+            <dl class="mt-5 grid gap-3 text-sm sm:grid-cols-2">
+              <div class="rounded-box border border-base-300/70 bg-base-200/60 p-4">
+                <dt class="text-xs text-base-content/55">{appM.status_version()}</dt>
+                <dd class="mt-1 font-semibold">{info.version}</dd>
+              </div>
+              <div class="rounded-box border border-base-300/70 bg-base-200/60 p-4">
+                <dt class="text-xs text-base-content/55">{appM.status_started({ time: info.startedAt })}</dt>
+                <dd class="mt-1 font-semibold">{appM.status_frontends_count({ count: String(info.frontends.length) })}</dd>
+              </div>
+            </dl>
+          {:else}
+            <Alert variant="error" title={sharedM.home_error()}>
+              <p data-testid="service-status">{errorMessage}</p>
+            </Alert>
+          {/if}
+
+          <div class="mt-5">
+            <Button type="button" variant="primary" loading={loading} onclick={refreshStatus}>
+              {sharedM.home_refresh()}
+            </Button>
+          </div>
+        </Card>
+      </div>
+
+      <section id="customize" class="grid gap-4 sm:grid-cols-2">
+        <div class="rounded-[1.5rem] border border-base-300/70 bg-base-100 p-5 shadow-md">
+          <span class="icon-[tabler--package] mb-4 size-7 text-primary"></span>
+          <h2 class="text-lg font-bold">{appM.custom_shared_title()}</h2>
+          <p class="mt-2 text-sm leading-6 text-base-content/65">{appM.custom_shared_body()}</p>
+        </div>
+        <div class="rounded-[1.5rem] border border-base-300/70 bg-base-100 p-5 shadow-md">
+          <span class="icon-[tabler--message-language] mb-4 size-7 text-secondary"></span>
+          <h2 class="text-lg font-bold">{appM.custom_local_title()}</h2>
+          <p class="mt-2 text-sm leading-6 text-base-content/65">{appM.custom_local_body()}</p>
+        </div>
+      </section>
+    </div>
+  </section>
+</AppShell>
+{{/if}}

package/templates/apps/fullstack/apps/{{projectName}}-desktop/src/app.d.ts.hbs

@@ -1,9 +1,8 @@
 {{! @skipIfEmpty }}
 {{#if fullstack.frontends.desktop}}
-/// <reference types="@sveltejs/kit" />
 /// <reference types="vite/client" />
 
 import '@h-ai/ui/auto-import'
 
 declare module '*.css'
-{{/if}}
+{{/if}}

package/templates/apps/fullstack/apps/{{projectName}}-desktop/src/main.ts.hbs

@@ -0,0 +1,13 @@
+{{! @skipIfEmpty }}
+{{#if fullstack.frontends.desktop}}
+import { mount } from 'svelte'
+import App from './App.svelte'
+import './app.css'
+
+const target = document.getElementById('app')
+if (!target) {
+  throw new Error('Root element #app not found')
+}
+
+export default mount(App, { target })
+{{/if}}