@h-ai/cli 0.1.0-alpha.15 → 0.1.0-alpha.18

package/templates/apps/fullstack/packages/{{projectName}}-contract/src/app-schemas.ts.hbs

@@ -0,0 +1,34 @@
+import { apiContract } from '@h-ai/api-contract'
+import { z } from 'zod'
+
+export const AppFrontendTargetSchema = z.enum(['web', 'app', 'miniapp', 'desktop'])
+
+/** 服务信息响应数据。 */
+export const AppInfoOutputDataSchema = z.object({
+  name: z.string(),
+  version: z.string(),
+  startedAt: z.string().datetime(),
+  frontends: z.array(AppFrontendTargetSchema),
+})
+
+/** Echo 请求体。 */
+export const AppEchoInputSchema = z.object({
+  message: z.string().min(1).max(200),
+})
+
+/** Echo 响应数据。 */
+export const AppEchoOutputDataSchema = z.object({
+  message: z.string(),
+  echoedAt: z.string().datetime(),
+  requestId: z.string(),
+})
+
+export const AppInfoOutputSchema = apiContract.haiResultSchema(AppInfoOutputDataSchema)
+export const AppEchoOutputSchema = apiContract.haiResultSchema(AppEchoOutputDataSchema)
+
+export type AppFrontendTarget = z.infer<typeof AppFrontendTargetSchema>
+export type AppInfoOutputData = z.infer<typeof AppInfoOutputDataSchema>
+export type AppInfoOutput = z.infer<typeof AppInfoOutputSchema>
+export type AppEchoInput = z.infer<typeof AppEchoInputSchema>
+export type AppEchoOutputData = z.infer<typeof AppEchoOutputDataSchema>
+export type AppEchoOutput = z.infer<typeof AppEchoOutputSchema>

package/templates/apps/fullstack/packages/{{projectName}}-contract/src/index.ts.hbs

@@ -0,0 +1,4 @@
+export * from './app-contract.js'
+export * from './app-routes.js'
+export * from './app-schemas.js'
+export * from './{{projectName}}-contract.js'

package/templates/apps/fullstack/packages/{{projectName}}-contract/src/{{projectName}}-contract.ts.hbs

@@ -0,0 +1,9 @@
+import { apiContract } from '@h-ai/api-contract'
+import { appContract } from './app-contract.js'
+
+/** 工程级 API contract，前端 typed client 与后端 service 共用。 */
+export const {{fullstack.contractExportName}} = apiContract.create({
+  app: appContract,
+})
+
+export type FullstackContract = typeof {{fullstack.contractExportName}}

package/templates/apps/fullstack/packages/{{projectName}}-contract/tests/contract.test.ts.hbs

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest'
+import {
+  APP_API_ROUTES,
+  appContract,
+  AppEchoInputSchema,
+  AppInfoOutputDataSchema,
+  AppInfoOutputSchema,
+  ENABLED_FRONTENDS,
+  {{fullstack.contractExportName}},
+} from '../src/index.js'
+
+describe('{{fullstack.contractPackageName}}', () => {
+  it('defines app contract routes', () => {
+    expect({{fullstack.contractExportName}}.app).toBeDefined()
+    expect(appContract.info).toBeDefined()
+    expect(APP_API_ROUTES.info).toBe('/api/v1/app/info')
+  })
+
+  it('validates app info payload', () => {
+    const result = AppInfoOutputDataSchema.safeParse({
+      name: '{{fullstack.servPackageName}}',
+      version: '0.1.0',
+      startedAt: '2026-01-01T00:00:00.000Z',
+      frontends: [...ENABLED_FRONTENDS],
+    })
+
+    expect(result.success).toBe(true)
+  })
+
+  it('validates echo input boundaries', () => {
+    expect(AppEchoInputSchema.safeParse({ message: 'hello' }).success).toBe(true)
+    expect(AppEchoInputSchema.safeParse({ message: '' }).success).toBe(false)
+  })
+
+  it('validates HaiResult app info response', () => {
+    const result = AppInfoOutputSchema.safeParse({
+      success: true,
+      data: {
+        name: '{{fullstack.servPackageName}}',
+        version: '0.1.0',
+        startedAt: '2026-01-01T00:00:00.000Z',
+        frontends: [...ENABLED_FRONTENDS],
+      },
+    })
+
+    expect(result.success).toBe(true)
+  })
+})

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

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "outDir": "./dist"
+  },
+  "include": ["src/**/*", "tests/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/templates/apps/fullstack/packages/{{projectName}}-contract/tsup.config.ts.hbs

@@ -0,0 +1,9 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['esm'],
+  dts: true,
+  sourcemap: true,
+  clean: true,
+})

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

@@ -0,0 +1,14 @@
+# {{fullstack.servPackageName}}
+
+后端 API Service，基于 `@h-ai/serv` 将共享 contract 装配为最小 HTTP App 抽象，不在应用代码中直接暴露 Hono。
+
+## 骨架说明
+
+- `src/server-app.ts`：服务装配入口，挂载健康检查、OpenAPI、docs 与 procedures。
+- `src/server/procedures/app-procedures.ts`：app 领域 procedures，对应 contract 中的 `app.info` / `app.echo` 路由。
+- `tests/server-app.test.ts`：通过 `ServerApp.request()` 验证健康检查与业务路由。
+
+## 开发
+
+- `pnpm --filter {{fullstack.servPackageName}} dev`
+- `pnpm --filter {{fullstack.servPackageName}} test`

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

@@ -0,0 +1,29 @@
+{
+  "name": "{{fullstack.servPackageName}}",
+  "type": "module",
+  "version": "0.1.0",
+  "private": true,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rimraf dist .turbo",
+    "dev": "pnpm build && node dist/index.js",
+    "start": "node dist/index.js"
+  },
+  "dependencies": {
+    "@h-ai/core": "{{fullstack.versions.core}}",
+    "@h-ai/serv": "{{fullstack.versions.serv}}",
+    "{{fullstack.contractPackageName}}": "workspace:*"
+  }
+}

package/templates/apps/fullstack/packages/{{projectName}}-serv/src/index.ts.hbs

@@ -0,0 +1,15 @@
+import process from 'node:process'
+import { core } from '@h-ai/core'
+import { serv } from '@h-ai/serv'
+import { createServerApp } from './server-app.js'
+
+const app = createServerApp()
+const port = process.env.PORT ? Number(process.env.PORT) : 3000
+const host = process.env.HOST ?? '127.0.0.1'
+const listenApp = app as Parameters<typeof serv.listen>[0]
+
+serv.listen(listenApp, {
+  port,
+  host,
+  onListening: info => core.logger.info('{{fullstack.servPackageName}} listening', { host, port: info.port }),
+})

package/templates/apps/fullstack/packages/{{projectName}}-serv/src/server/procedures/app-procedures.ts.hbs

@@ -0,0 +1,38 @@
+import type { ServContext } from '@h-ai/serv'
+import type { AppEchoOutputData, AppFrontendTarget, AppInfoOutputData } from '{{fullstack.contractPackageName}}'
+import { ok } from '@h-ai/core'
+import { serv } from '@h-ai/serv'
+import { appContract } from '{{fullstack.contractPackageName}}'
+
+export interface CreateAppProceduresOptions {
+  readonly name: string
+  readonly version: string
+  readonly startedAt: string
+  readonly frontends: readonly AppFrontendTarget[]
+}
+
+const p = serv.implement(appContract).$context<ServContext>()
+
+/** app 领域 procedures：把共享 contract 绑定到真实业务处理函数。 */
+export function createAppProcedures(options: CreateAppProceduresOptions) {
+  return p.router({
+    info: p.info.handler(() => ok(createAppInfo(options))),
+    echo: p.echo.handler(({ input, context }) => {
+      const data: AppEchoOutputData = {
+        message: input.message,
+        echoedAt: new Date().toISOString(),
+        requestId: context.requestId,
+      }
+      return ok(data)
+    }),
+  })
+}
+
+function createAppInfo(options: CreateAppProceduresOptions): AppInfoOutputData {
+  return {
+    name: options.name,
+    version: options.version,
+    startedAt: options.startedAt,
+    frontends: [...options.frontends],
+  }
+}

package/templates/apps/fullstack/packages/{{projectName}}-serv/src/server/procedures/index.ts.hbs

@@ -0,0 +1,13 @@
+import type { CreateAppProceduresOptions } from './app-procedures.js'
+import { createAppProcedures } from './app-procedures.js'
+
+export interface CreateServerProceduresOptions {
+  readonly app: CreateAppProceduresOptions
+}
+
+/** 工程级 procedures 聚合入口；后续增加领域时在这里追加即可。 */
+export function createServerProcedures(options: CreateServerProceduresOptions) {
+  return {
+    app: createAppProcedures(options.app),
+  }
+}

package/templates/apps/fullstack/packages/{{projectName}}-serv/src/server-app.ts.hbs

@@ -0,0 +1,42 @@
+import { serv } from '@h-ai/serv'
+import { APP_HTTP_ROUTES, ENABLED_FRONTENDS, {{fullstack.contractExportName}} } from '{{fullstack.contractPackageName}}'
+import { createServerProcedures } from './server/procedures/index.js'
+
+const STARTED_AT = new Date().toISOString()
+
+/** 应用侧最小 HTTP App 抽象；不把底层 Hono 类型暴露给项目代码。 */
+export interface ServerApp {
+  readonly fetch: (request: Request) => Response | Promise<Response>
+  readonly request: (input: RequestInfo | URL, init?: RequestInit) => Response | Promise<Response>
+}
+
+/** 创建后端 HTTP App；与 @h-ai/serv 的 createApp 返回语义保持一致。 */
+export function createServerApp(): ServerApp {
+  return serv.createApp({
+    contract: {{fullstack.contractExportName}},
+    procedures: createServerProcedures({
+      app: {
+        name: '{{fullstack.servPackageName}}',
+        version: '0.1.0',
+        startedAt: STARTED_AT,
+        frontends: [...ENABLED_FRONTENDS],
+      },
+    }),
+    http: {
+      apiPrefix: APP_HTTP_ROUTES.apiPrefix,
+      health: {
+        path: APP_HTTP_ROUTES.health,
+        readyPath: APP_HTTP_ROUTES.ready,
+      },
+      openapi: { path: APP_HTTP_ROUTES.openapi },
+      docs: { path: APP_HTTP_ROUTES.docs },
+      rpc: false,
+    },
+    middlewares: [{
+      middleware: serv.cors({
+        origin: '*',
+        allowedHeaders: ['Authorization', 'Content-Type', 'X-Requested-With'],
+      }),
+    }],
+  })
+}

package/templates/apps/fullstack/packages/{{projectName}}-serv/tests/server-app.test.ts.hbs

@@ -0,0 +1,49 @@
+import { APP_API_ROUTES } from '{{fullstack.contractPackageName}}'
+import { describe, expect, it } from 'vitest'
+import { createServerApp } from '../src/server-app.js'
+
+describe('{{fullstack.servPackageName}}', () => {
+  it('returns health status', async () => {
+    const app = createServerApp()
+    const response = await app.request(APP_API_ROUTES.health)
+
+    expect(response.status).toBe(200)
+    await expect(response.json()).resolves.toEqual({ status: 'ok' })
+  })
+
+  it('returns app info as HaiResult', async () => {
+    const app = createServerApp()
+    const response = await app.request(APP_API_ROUTES.info, { method: 'POST' })
+    const body = await response.json()
+
+    expect(response.status).toBe(200)
+    expect(body.success).toBe(true)
+    expect(body.data.name).toBe('{{fullstack.servPackageName}}')
+  })
+
+  it('validates echo input', async () => {
+    const app = createServerApp()
+    const response = await app.request(APP_API_ROUTES.echo, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ message: '' }),
+    })
+
+    expect(response.status).toBe(400)
+  })
+
+  it('returns echo result as HaiResult', async () => {
+    const app = createServerApp()
+    const response = await app.request(APP_API_ROUTES.echo, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ message: 'hello unit' }),
+    })
+    const body = await response.json()
+
+    expect(response.status).toBe(200)
+    expect(body.success).toBe(true)
+    expect(body.data.message).toBe('hello unit')
+    expect(body.data.requestId).toBeDefined()
+  })
+})

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

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "types": ["node"],
+    "outDir": "./dist"
+  },
+  "include": ["src/**/*", "tests/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/templates/apps/fullstack/packages/{{projectName}}-serv/tsup.config.ts.hbs

@@ -0,0 +1,9 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['esm'],
+  dts: true,
+  sourcemap: true,
+  clean: true,
+})

package/templates/apps/fullstack/packages/{{projectName}}-shared/.gitignore.hbs

@@ -0,0 +1,3 @@
+node_modules
+.turbo
+src/lib/paraglide

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

@@ -0,0 +1,39 @@
+# {{fullstack.sharedPackageName}}
+
+Frontend shared package for **{{projectName}}**. Provides:
+
+- `AppShell` — common layout (header / footer / theme + language switchers)
+- `ThemeSwitcher`, `LanguageSwitcher`
+- `themeStore` — daisyUI theme persistence
+- `fetchAppInfo` — typed API client wrapping `@h-ai/api-client`
+- Shared Inlang Paraglide messages compiled from this package's `project.inlang/` + `messages/`
+
+Consumed by `{{projectName}}-web`, `{{projectName}}-app`, `{{projectName}}-desktop`, and the reserved `{{projectName}}-miniapp` guidance.
+
+## i18n collaboration
+
+- `packages/{{fullstack.sharedPackageName}}/messages/` stores **shared UI copy** used by reusable components such as `AppShell`, `ThemeSwitcher`, and `LanguageSwitcher`.
+- `apps/{{projectName}}-web/messages/`, `apps/{{projectName}}-app/messages/`, and `apps/{{projectName}}-desktop/messages/` store **frontend-specific product copy**.
+- `apps/{{projectName}}-miniapp/messages/` is prepared for mini-app-specific copy even though the mini target is currently a placeholder.
+- Keep `baseLocale` and `locales` aligned across shared and every frontend `project.inlang/settings.json`. The language switcher updates shared and the host app runtime together.
+
+Rule of thumb: if a string appears inside reusable shared components, put it here; if it belongs to one product surface, put it in that frontend's `messages/` directory.
+
+## Scripts
+
+- `pnpm paraglide:compile` — compile messages → `src/lib/paraglide/`
+- `pnpm paraglide:watch` — watch + recompile on message edits
+- `pnpm typecheck`, `pnpm lint`, `pnpm test`
+
+## Adding a locale
+
+1. Add the locale to `project.inlang/settings.json` `locales` array.
+2. Add the same locale to every enabled frontend `project.inlang/settings.json`.
+3. Create `messages/{locale}.json` in shared and each enabled frontend.
+4. Run root `pnpm i18n:compile` to compile shared and every enabled frontend Paraglide output. You can also run `pnpm paraglide:compile` inside one package when editing that package only.
+
+## Customizing theme and shell
+
+- Theme names come from the scaffold `fullstack.theme` config and are rendered into each frontend `src/app.css` daisyUI plugin block.
+- `themeStore` persists the selected theme in local storage under `{{projectName}}:theme`.
+- To customize the global chrome, edit `src/lib/components/AppShell.svelte`; to customize a single frontend page, edit that frontend's route and messages.

package/templates/apps/fullstack/packages/{{projectName}}-shared/messages/en-US.json.hbs

@@ -0,0 +1,24 @@
+{{! @skipIfEmpty }}
+{
+  "$schema": "https://inlang.com/schema/inlang-message-format",
+  "app_name": "{{projectName}}",
+  "nav_home": "Home",
+  "nav_settings": "Settings",
+  "settings_title": "Settings",
+  "settings_language": "Language",
+  "settings_theme": "Theme",
+  "shell_footer": "Hai Framework · {platform}",
+  "shell_tagline": "Shared shell · Theme · Locale",
+  "home_welcome": "Welcome to {name}",
+  "home_subtitle": "Hai Framework fullstack starter for web / app / desktop / mini collaboration",
+  "home_status_title": "Service status",
+  "home_refresh": "Refresh",
+  "home_loading": "Loading…",
+  "home_error": "Unable to reach the API service",
+  "home_started_at": "Started at: {time}",
+  "home_frontends": "Enabled frontends: {list}",
+  "platform_web": "Web",
+  "platform_app": "App",
+  "platform_desktop": "Desktop",
+  "platform_miniapp": "Mini"
+}

package/templates/apps/fullstack/packages/{{projectName}}-shared/messages/zh-CN.json.hbs

@@ -0,0 +1,24 @@
+{{! @skipIfEmpty }}
+{
+  "$schema": "https://inlang.com/schema/inlang-message-format",
+  "app_name": "{{projectName}}",
+  "nav_home": "首页",
+  "nav_settings": "设置",
+  "settings_title": "设置",
+  "settings_language": "语言",
+  "settings_theme": "主题",
+  "shell_footer": "Hai Framework · {platform}",
+  "shell_tagline": "共享 Shell · 主题 · 语言",
+  "home_welcome": "欢迎使用 {name}",
+  "home_subtitle": "Hai Framework 全栈样板（web / app / desktop / mini 协同）",
+  "home_status_title": "服务状态",
+  "home_refresh": "刷新",
+  "home_loading": "加载中…",
+  "home_error": "无法连接到 API 服务",
+  "home_started_at": "启动时间：{time}",
+  "home_frontends": "已启用前端：{list}",
+  "platform_web": "Web",
+  "platform_app": "App",
+  "platform_desktop": "Desktop",
+  "platform_miniapp": "Mini"
+}

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

@@ -0,0 +1,44 @@
+{
+  "name": "{{fullstack.sharedPackageName}}",
+  "type": "module",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Shared frontend code (AppShell / theme / i18n / API) for {{projectName}} web/app/desktop/mini.",
+  "exports": {
+    ".": "./src/index.ts",
+    "./components/*": "./src/lib/components/*",
+    "./stores/*": "./src/lib/stores/*",
+    "./api": "./src/lib/api/api-client.ts",
+    "./project.inlang/settings.json": "./project.inlang/settings.json",
+    "./messages/*": "./messages/*",
+    "./paraglide/messages": "./src/lib/paraglide/messages.js",
+    "./paraglide/runtime": "./src/lib/paraglide/runtime.js"
+  },
+  "files": [
+    "src",
+    "project.inlang",
+    "messages"
+  ],
+  "scripts": {
+    "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",
+    "prepare": "paraglide-js compile --project ./project.inlang --outdir ./src/lib/paraglide",
+    "typecheck": "pnpm paraglide:compile && svelte-check --tsconfig ./tsconfig.json",
+    "lint": "eslint .",
+    "test": "vitest run --passWithNoTests",
+    "clean": "rimraf .turbo src/lib/paraglide"
+  },
+  "dependencies": {
+    "@h-ai/api-client": "{{fullstack.versions.apiClient}}",
+    "@h-ai/ui": "{{fullstack.versions.ui}}",
+    "{{fullstack.contractPackageName}}": "workspace:*"
+  },
+  "devDependencies": {
+    "@inlang/paraglide-js": "{{fullstack.versions.inlangParaglide}}",
+    "@inlang/plugin-message-format": "{{fullstack.versions.inlangMessageFormat}}",
+    "svelte": "{{fullstack.versions.svelte}}",
+    "svelte-check": "{{fullstack.versions.svelteCheck}}",
+    "typescript": "{{fullstack.versions.typescript}}",
+    "vitest": "{{fullstack.versions.vitest}}"
+  }
+}

package/templates/apps/fullstack/packages/{{projectName}}-shared/project.inlang/settings.json.hbs

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://inlang.com/schema/project-settings",
+  "baseLocale": "{{fullstack.i18n.baseLocale}}",
+  "locales": [{{#each fullstack.i18n.locales}}"{{this}}"{{#unless @last}}, {{/unless}}{{/each}}],
+  "modules": [
+    "https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@latest/dist/index.js"
+  ],
+  "plugin.inlang.messageFormat": {
+    "pathPattern": "./messages/{locale}.json"
+  }
+}

package/templates/apps/fullstack/packages/{{projectName}}-shared/src/index.ts.hbs

@@ -0,0 +1,8 @@
+export { default as AppShell } from './lib/components/AppShell.svelte'
+export { default as LanguageSwitcher } from './lib/components/LanguageSwitcher.svelte'
+export { default as ThemeSwitcher } from './lib/components/ThemeSwitcher.svelte'
+export { AVAILABLE_THEMES, themeStore } from './lib/stores/theme.svelte.js'
+export type { AppInfo, FetchAppInfoOptions } from './lib/api/api-client.js'
+export { fetchAppInfo } from './lib/api/api-client.js'
+export * as messages from './lib/paraglide/messages.js'
+export { getLocale, locales, setLocale } from './lib/paraglide/runtime.js'

package/templates/apps/fullstack/packages/{{projectName}}-shared/src/lib/api/api-client.ts.hbs

@@ -0,0 +1,49 @@
+import type { AppInfoOutputData } from '{{fullstack.contractPackageName}}'
+import { apiClient } from '@h-ai/api-client'
+import { APP_HTTP_ROUTES, {{fullstack.contractExportName}} } from '{{fullstack.contractPackageName}}'
+
+export type AppInfo = AppInfoOutputData
+
+const DEFAULT_API_ORIGIN = 'http://127.0.0.1:3000'
+
+export interface FetchAppInfoOptions {
+  fetchFn?: typeof fetch
+  baseUrl?: string
+  clientName?: string
+}
+
+export async function fetchAppInfo(options: FetchAppInfoOptions = {}): Promise<AppInfo> {
+  const fetchFn = options.fetchFn ?? fetch
+  const baseUrl = options.baseUrl ?? DEFAULT_API_ORIGIN
+  const clientName = options.clientName ?? '{{projectName}}-shared'
+
+  const client = apiClient.create({{fullstack.contractExportName}})
+  const init = await client.init({
+    baseUrl: normalizeApiBaseUrl(baseUrl),
+    clientName,
+    fetch: fetchFn,
+  })
+  if (!init.success)
+    throw new Error(init.error?.message ?? 'Failed to initialize API client')
+
+  try {
+    const result = await client.app.info()
+    if (!result.success)
+      throw new Error(result.error?.message ?? 'Failed to fetch app info')
+    return result.data
+  }
+  finally {
+    await client.close()
+  }
+}
+
+function normalizeApiBaseUrl(value: string): string {
+  const trimmed = trimTrailingSlash(value)
+  return trimmed.endsWith(APP_HTTP_ROUTES.apiPrefix)
+    ? trimmed
+    : `${trimmed}${APP_HTTP_ROUTES.apiPrefix}`
+}
+
+function trimTrailingSlash(value: string): string {
+  return value.replace(/\/+$/, '')
+}

package/templates/apps/fullstack/packages/{{projectName}}-shared/src/lib/components/AppShell.svelte.hbs

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import * as m from '../paraglide/messages.js'
+  import LanguageSwitcher from './LanguageSwitcher.svelte'
+  import ThemeSwitcher from './ThemeSwitcher.svelte'
+
+  interface Props {
+    /** 当前运行的前端平台 */
+    platform: 'web' | 'app' | 'desktop' | 'miniapp'
+    /** 宿主应用本地 Paraglide runtime 的同步回调 */
+    onLocaleChange?: (locale: string) => void
+    /** 主内容 */
+    children: Snippet
+  }
+
+  const { platform, onLocaleChange, children }: Props = $props()
+
+  function getPlatformLabel(value: Props['platform']): string {
+    if (value === 'web')
+      return m.platform_web()
+    if (value === 'app')
+      return m.platform_app()
+    if (value === 'desktop')
+      return m.platform_desktop()
+    return m.platform_miniapp()
+  }
+
+  const platformLabel = $derived(getPlatformLabel(platform))
+</script>
+
+<div class="min-h-screen flex flex-col overflow-hidden bg-base-100 text-base-content">
+  <div class="pointer-events-none fixed inset-0 -z-10 bg-[radial-gradient(circle_at_top_left,var(--color-primary)_0,transparent_34%),radial-gradient(circle_at_bottom_right,var(--color-secondary)_0,transparent_30%)] opacity-10"></div>
+
+  <header class="navbar sticky top-0 z-20 border-b border-base-300/70 bg-base-100/80 px-4 shadow-sm backdrop-blur-xl lg:px-8">
+    <div class="flex-1 flex items-center gap-3">
+      <div class="grid size-10 place-items-center rounded-2xl bg-primary text-primary-content shadow-lg shadow-primary/20">
+        <span class="icon-[tabler--sparkles] size-5"></span>
+      </div>
+      <div>
+        <span class="block text-lg font-semibold leading-tight">{m.app_name()}</span>
+        <span class="text-xs text-base-content/55">{m.shell_tagline()}</span>
+      </div>
+      <span class="badge badge-primary badge-outline ml-1 hidden sm:inline-flex">{platformLabel}</span>
+    </div>
+    <div class="flex-none flex items-end gap-2">
+      <ThemeSwitcher />
+      <LanguageSwitcher {onLocaleChange} />
+    </div>
+  </header>
+
+  <main class="flex-1 px-4 py-8 lg:px-8 lg:py-10">
+    <div class="mx-auto w-full max-w-6xl">
+      {@render children()}
+    </div>
+  </main>
+
+  <footer class="footer footer-center border-t border-base-300/70 bg-base-100/70 p-4 text-sm text-base-content/60 backdrop-blur-xl">
+    <span>{m.shell_footer({ platform: platformLabel })}</span>
+  </footer>
+</div>

package/templates/apps/fullstack/packages/{{projectName}}-shared/src/lib/components/LanguageSwitcher.svelte.hbs

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import * as m from '../paraglide/messages.js'
+  import { getLocale, locales, setLocale } from '../paraglide/runtime.js'
+
+  interface Props {
+    /** 同步宿主应用自己的 Paraglide runtime */
+    onLocaleChange?: (locale: string) => void
+  }
+
+  const { onLocaleChange }: Props = $props()
+
+  function handleChange(event: Event) {
+    const target = event.target as HTMLSelectElement
+    const locale = target.value as (typeof locales)[number]
+    setLocale(locale)
+    onLocaleChange?.(locale)
+  }
+</script>
+
+<label class="form-control w-32 sm:w-40">
+  <span class="label-text text-xs">{m.settings_language()}</span>
+  <select class="select select-bordered select-sm bg-base-100/80" value={getLocale()} onchange={handleChange}>
+    {#each locales as locale (locale)}
+      <option value={locale}>{locale}</option>
+    {/each}
+  </select>
+</label>