@givolt/i3-composer-agent 3.0.0 → 3.1.0

package/skills/i3-ui-demo/assets/starter/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "ui-demo-app",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "packageManager": "npm@11.12.1",
+  "engines": {
+    "node": ">=22.18.0",
+    "npm": ">=10"
+  },
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "typecheck": "vue-tsc --noEmit",
+    "test": "node --experimental-strip-types --test tests/*.test.ts",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview --host 127.0.0.1"
+  },
+  "dependencies": {
+    "antdv-next": "1.6.0",
+    "vue": "3.5.42"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "6.0.4",
+    "typescript": "5.9.3",
+    "vite": "7.3.1",
+    "vue-tsc": "3.3.13"
+  }
+}

package/skills/i3-ui-demo/assets/starter/provenance.json

@@ -0,0 +1,14 @@
+{
+  "source": "derived Vue and antdv-next starter",
+  "sourceCommit": "f5d095a6de2b196541615e2812f6a4ae241b7c36",
+  "changes": [
+    "independent package identity",
+    "antdv-next fixed to 1.6.0",
+    "independent lockfile",
+    "Drawer 1.6.0 size and afterOpenChange props with localized close label",
+    "default light theme and native token dimensions aligned with owned enterprise-admin preset",
+    "default enterprise presentation and independent template capability contract"
+  ],
+  "license": "MIT",
+  "runtimeResources": "All resources belong to this skill; source history is not a runtime dependency."
+}

package/skills/i3-ui-demo/assets/starter/public/prototype-config.json

@@ -0,0 +1,22 @@
+{
+  "instanceId": "business-preview",
+  "storageNamespace": "prototype:business-preview",
+  "mockVersion": "business-v1",
+  "title": "业务原型",
+  "presentation": { "layout": "sidebar", "style": "business", "density": "standard" },
+  "pages": [
+    {
+      "id": "business",
+      "title": "业务页面"
+    }
+  ],
+  "theme": {
+    "defaultTheme": "light",
+    "presets": [
+      "light",
+      "dark",
+      "fresh",
+      "tech"
+    ]
+  }
+}

package/skills/i3-ui-demo/assets/starter/src/App.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { Alert, ConfigProvider, Select, Tabs, TabPane, theme as antdTheme } from 'antdv-next'
+import zhCN from 'antdv-next/locale/zh_CN'
+import type { PrototypeConfig } from './config'
+import { THEME_IDS, THEME_PRESETS, loadThemePreference, safeThemeStorage, saveThemePreference, themeStorageKey } from './domain/theme'
+import type { ThemeId } from './domain/theme'
+import PrototypeShell from './PrototypeShell.vue'
+import { presentationTokens, resolvePresentation } from './domain/presentation'
+const props = defineProps<{ config: PrototypeConfig }>()
+const storage = safeThemeStorage(() => window.localStorage)
+const key = themeStorageKey(props.config.storageNamespace)
+const selected = ref<ThemeId>(loadThemePreference(storage, key))
+const activePage = ref(props.config.pages[0]?.id)
+const warning = ref('')
+const options = THEME_IDS.map(value => ({ value, label: THEME_PRESETS[value].label }))
+const media = matchMedia('(prefers-reduced-motion: reduce)')
+const reduced = ref(media.matches)
+const motionChanged = (event: MediaQueryListEvent) => { reduced.value = event.matches }
+media.addEventListener('change', motionChanged)
+onBeforeUnmount(() => media.removeEventListener('change', motionChanged))
+const preset = computed(() => THEME_PRESETS[selected.value])
+const recipe = computed(() => props.config.presentation ? presentationTokens(resolvePresentation(props.config.presentation)) : undefined)
+const variables = computed(() => ({ '--prototype-bg': preset.value.bg, '--prototype-surface': preset.value.surface, '--prototype-text': preset.value.text, '--prototype-border': preset.value.panelBorder, '--prototype-radius': `${recipe.value?.panelRadius ?? 8}px` }))
+const tokens = computed(() => ({
+  algorithm: preset.value.mode === 'dark' ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm,
+  token: { colorPrimary: preset.value.primary, colorBgBase: preset.value.surface, colorBgLayout: preset.value.bg, colorBgContainer: preset.value.surface,
+    colorBgElevated: preset.value.surface, colorText: preset.value.text, colorTextSecondary: preset.value.muted,
+    colorBorder: preset.value.border, colorBorderSecondary: preset.value.panelBorder, colorError: preset.value.error, colorSuccess: preset.value.success,
+    colorTextLightSolid: preset.value.onPrimary, fontSize: 14,
+    fontFamily: '-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif', motion: !reduced.value,
+    ...(recipe.value ? { borderRadius: recipe.value.borderRadius, controlHeight: recipe.value.controlHeight } : {}) },
+}))
+function choose(value: unknown) {
+  if (typeof value !== 'string' || !THEME_IDS.includes(value as ThemeId)) return
+  selected.value = value as ThemeId
+  warning.value = saveThemePreference(storage, key, selected.value) ? '' : '主题偏好无法保存，本页仍可切换。'
+}
+watch(preset, value => {
+  document.documentElement.dataset.prototypeTheme = selected.value
+  document.documentElement.style.colorScheme = value.mode
+}, { immediate: true })
+</script>
+<template>
+  <ConfigProvider :locale="zhCN" :theme="tokens" :component-size="recipe?.componentSize">
+    <div v-if="config.presentation" :style="variables">
+      <PrototypeShell :config="config" :menu-theme="preset.mode">
+        <template #appearance><div class="theme-picker"><label for="prototype-theme">主题</label><Select id="prototype-theme" aria-label="主题" :value="selected" :options="options" @change="choose" /></div></template>
+        <template #default="{ page }"><Alert v-if="warning" type="warning" :title="warning" show-icon /><section :aria-label="page.title"><h2>{{ page.title }}</h2><Alert type="warning" title="业务页面待实现" description="按固定的页面模式、字段、操作与验收合同实现此页。" show-icon /></section></template>
+      </PrototypeShell>
+    </div>
+    <div v-else class="prototype-shell" :style="{ background: preset.bg, color: preset.text }">
+      <header><h1>{{ config.title }}</h1><div class="theme-picker"><label for="prototype-theme">主题</label><Select id="prototype-theme" aria-label="主题" :value="selected" :options="options" @change="choose" /></div></header>
+      <main :style="{ background: preset.surface, borderColor: preset.border }">
+        <Alert v-if="warning" type="warning" :title="warning" show-icon />
+        <Tabs v-model:active-key="activePage">
+          <TabPane v-for="page in config.pages" :key="page.id" :tab="page.title">
+            <section :aria-label="page.title"><h2>{{ page.title }}</h2><Alert type="warning" title="业务页面待实现" description="按固定需求、完整内容模板和通用能力清单实现此页，再进行交互验收。" show-icon /></section>
+          </TabPane>
+        </Tabs>
+      </main>
+    </div>
+  </ConfigProvider>
+</template>

package/skills/i3-ui-demo/assets/starter/src/PrototypeShell.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import { Button, Drawer, Layout, LayoutContent, LayoutHeader, LayoutSider, Menu, Result } from 'antdv-next'
+import type { MenuProps } from 'antdv-next'
+import type { PrototypeConfig } from './config'
+import { navigationMenus, pageFromHash, presentationTokens, resolvePresentation } from './domain/presentation'
+import type { NavigationItem } from './domain/presentation'
+const props = defineProps<{ config: PrototypeConfig; menuTheme?: 'light' | 'dark' }>()
+const presentation = computed(() => resolvePresentation(props.config.presentation))
+const recipe = computed(() => presentationTokens(presentation.value))
+const active = ref(pageFromHash(location.hash, props.config.pages))
+const current = computed(() => props.config.pages.find(page => page.id === active.value))
+const items = computed(() => props.config.navigation || props.config.pages.map(page => ({ key: page.id, label: page.title })))
+const menus = computed(() => navigationMenus(items.value, presentation.value.layout, active.value))
+const collapsed = ref(false), mobileOpen = ref(false), focusAfterClose = ref(false)
+const opened = ref<string[]>([])
+function ancestors(nodes: NavigationItem[], target: string | undefined, parents: string[] = []): string[] | undefined { for (const node of nodes) { if (node.key === target) return parents; if (node.children) { const found = ancestors(node.children, target, [...parents, node.key]); if (found) return found } } }
+watch(active, value => { opened.value = [...new Set([...opened.value, ...(ancestors(items.value, value) || [])])] }, { immediate: true })
+const media = matchMedia('(max-width: 767px)'), narrow = ref(media.matches)
+const onResize = (event: MediaQueryListEvent) => { narrow.value = event.matches; if (!event.matches) mobileOpen.value = false }
+const onHash = () => { active.value = pageFromHash(location.hash, props.config.pages) }
+media.addEventListener('change', onResize); window.addEventListener('hashchange', onHash); window.addEventListener('popstate', onHash)
+onBeforeUnmount(() => { media.removeEventListener('change', onResize); window.removeEventListener('hashchange', onHash); window.removeEventListener('popstate', onHash) })
+function navigate(event: { key: string | number }) {
+  const id = String(event.key)
+  if (!props.config.pages.some(page => page.id === id)) return
+  history.pushState(null, '', `#/${encodeURIComponent(id)}`); active.value = id
+  if (mobileOpen.value) { focusAfterClose.value = true; mobileOpen.value = false } else nextTick(focusMain)
+}
+function afterMenuChange(open: boolean) { if (!open && focusAfterClose.value) { focusAfterClose.value = false; nextTick(focusMain) } }
+function focusMain() { document.getElementById('prototype-main')?.focus() }
+function nativeItems(nodes: NavigationItem[]): NonNullable<MenuProps['items']> { return nodes.map(node => node.children ? { key: node.key, label: node.label, children: nativeItems(node.children) } : { key: node.key, label: node.label }) }
+const side = computed(() => ['sidebar','mixed'].includes(presentation.value.layout))
+const top = computed(() => ['topbar','mixed'].includes(presentation.value.layout))
+</script>
+<template>
+  <Layout class="generation-shell" :class="[`layout-${presentation.layout}`, `style-${presentation.style}`, `density-${presentation.density}`]" :style="{ '--prototype-spacing': `${recipe.spacing}px` }" :data-layout="presentation.layout" :data-style="presentation.style" :data-density="presentation.density">
+    <a class="skip-link" href="#prototype-main" @click.prevent="focusMain">跳到页面内容</a>
+    <LayoutHeader class="generation-header">
+      <div class="generation-brand"><Button v-if="narrow" aria-label="打开导航" :aria-expanded="mobileOpen" @click="mobileOpen = true">菜单</Button><strong>{{ config.title }}</strong></div>
+      <slot name="appearance" />
+    </LayoutHeader>
+    <nav v-if="top && !narrow" aria-label="顶部导航" class="generation-topnav"><Menu :theme="menuTheme || 'light'" mode="horizontal" :items="nativeItems(menus.top)" :selected-keys="menus.topSelected ? [menus.topSelected] : []" @click="navigate" /></nav>
+    <Layout class="generation-body">
+      <LayoutSider v-if="side && !narrow" class="generation-sidebar" :width="224" :collapsed-width="72" :collapsed="collapsed" :theme="menuTheme || 'light'">
+        <Button block :aria-expanded="!collapsed" :aria-label="collapsed ? '展开侧栏' : '收起侧栏'" @click="collapsed = !collapsed">{{ collapsed ? '展开' : '收起侧栏' }}</Button>
+        <nav aria-label="侧栏导航"><Menu :theme="menuTheme || 'light'" v-model:open-keys="opened" mode="inline" :inline-collapsed="collapsed" :items="nativeItems(menus.side)" :selected-keys="active ? [active] : []" @click="navigate" /></nav>
+      </LayoutSider>
+      <LayoutContent id="prototype-main" class="generation-content" tabindex="-1">
+        <nav v-if="presentation.layout === 'focused' && !narrow && config.pages.length > 1" aria-label="工作区页面"><Menu :theme="menuTheme || 'light'" mode="horizontal" :items="nativeItems(items)" :selected-keys="active ? [active] : []" @click="navigate" /></nav>
+        <slot v-if="current" :page="current" />
+        <Result v-else status="404" title="页面不存在" sub-title="当前地址不在本原型的页面范围内。"><template #extra><Button @click="navigate({ key: config.pages[0].id })">返回首页</Button></template></Result>
+      </LayoutContent>
+    </Layout>
+    <Drawer :open="mobileOpen" title="导航" placement="left" :size="288" :mask="{ enabled: true, blur: true }" :closable="{ 'aria-label': '关闭导航' }" destroy-on-hidden :after-open-change="afterMenuChange" @close="mobileOpen = false">
+      <nav aria-label="移动导航"><Menu :theme="menuTheme || 'light'" v-model:open-keys="opened" mode="inline" :items="nativeItems(items)" :selected-keys="active ? [active] : []" @click="navigate" /></nav>
+    </Drawer>
+  </Layout>
+</template>

package/skills/i3-ui-demo/assets/starter/src/config.ts

@@ -0,0 +1,23 @@
+import { resolveThemeConfig } from './domain/theme'
+import type { ThemeBinding } from './domain/theme'
+import { resolvePresentation } from './domain/presentation'
+import type { NavigationItem, Presentation } from './domain/presentation'
+export interface PrototypeConfig { instanceId: string; storageNamespace: string; mockVersion: string; title?: string; pages: { id: string; title: string }[]; theme?: ThemeBinding; presentation?: Presentation; navigation?: NavigationItem[]; generation?: { pages: unknown[] } }
+export interface PrototypeMeta extends PrototypeConfig { candidateId: string }
+declare global { interface Window { __PROTOTYPE_META__: PrototypeMeta } }
+
+export async function loadConfig(): Promise<PrototypeConfig> {
+  const response = await fetch(`${import.meta.env.BASE_URL}prototype-config.json`, { cache: 'no-store' })
+  if (!response.ok) throw new Error('无法读取原型配置，请检查当前预览构建。')
+  const config: unknown = await response.json()
+  if (!config || typeof config !== 'object') throw new Error('原型配置无效。')
+  const value = config as Record<string, unknown>
+  for (const key of ['instanceId', 'storageNamespace', 'mockVersion']) {
+    if (typeof value[key] !== 'string' || !(value[key] as string).trim()) throw new Error(`原型配置缺少 ${key}。`)
+  }
+  resolveThemeConfig(value.theme)
+  if (value.presentation !== undefined) resolvePresentation(value.presentation)
+  if (!Array.isArray(value.pages) || !value.pages.length || value.pages.some(page => !page || typeof page.id !== 'string' || !page.id || typeof page.title !== 'string')) throw new Error('原型页面配置无效。')
+  if (new Set(value.pages.map(page => page.id)).size !== value.pages.length) throw new Error('原型页面标识重复。')
+  return value as unknown as PrototypeConfig
+}

package/skills/i3-ui-demo/assets/starter/src/domain/presentation.ts

@@ -0,0 +1,30 @@
+export interface Presentation { layout: 'sidebar' | 'topbar' | 'mixed' | 'focused'; style: 'business' | 'minimal' | 'soft'; density: 'compact' | 'standard' | 'comfortable' }
+export interface NavigationItem { key: string; label: string; children?: NavigationItem[] }
+export function navigationMenus(items: NavigationItem[], layout: Presentation['layout'], active?: string) {
+  const first = (item: NavigationItem): string => item.children?.length ? first(item.children[0]) : item.key
+  const contains = (item: NavigationItem): boolean => item.key === active || !!item.children?.some(contains)
+  const groups = items.some(item => item.children) ? items : [{ key: '@pages', label: '业务页面', children: items }]
+  const current = groups.find(contains) || groups[0]
+  return { top: layout === 'mixed' ? groups.map(item => ({ key: first(item), label: item.label })) : items,
+    side: layout === 'mixed' ? current?.children || [current] : items,
+    topSelected: layout === 'mixed' && current ? first(current) : active }
+}
+export function resolvePresentation(value: unknown): Presentation {
+  if (!value || typeof value !== 'object') throw new Error('缺少已固定的页面呈现选择。')
+  const item = value as Record<string, unknown>
+  for (const [key, choices] of Object.entries({ layout: ['sidebar', 'topbar', 'mixed', 'focused'], style: ['business', 'minimal', 'soft'], density: ['compact', 'standard', 'comfortable'] })) {
+    if (!choices.includes(item[key] as string)) throw new Error(`不支持的呈现选择：${key}`)
+  }
+  return item as unknown as Presentation
+}
+export function presentationTokens(value: Presentation) {
+  return { borderRadius: { business: 6, minimal: 4, soft: 10 }[value.style],
+    panelRadius: { business: 8, minimal: 4, soft: 10 }[value.style],
+    controlHeight: { compact: 28, standard: 32, comfortable: 40 }[value.density],
+    spacing: { compact: 12, standard: 24, comfortable: 32 }[value.density],
+    componentSize: { compact: 'small', standard: 'middle', comfortable: 'large' }[value.density] as 'small' | 'middle' | 'large' }
+}
+export function pageFromHash(hash: string, pages: { id: string }[]): string | undefined {
+  if (!hash || hash === '#/' || hash === '#') return pages[0]?.id
+  try { const id = decodeURIComponent(hash.replace(/^#\/?/, '')); return pages.some(page => page.id === id) ? id : undefined } catch { return undefined }
+}

package/skills/i3-ui-demo/assets/starter/src/domain/theme.ts

@@ -0,0 +1,25 @@
+export type ThemeId = 'light' | 'dark' | 'fresh' | 'tech'
+export interface ThemeBinding { defaultTheme: 'light'; presets: ThemeId[] }
+export interface ThemeStorage { getItem(key: string): string | null; setItem(key: string, value: string): void }
+export const THEME_IDS: ThemeId[] = ['light', 'dark', 'fresh', 'tech']
+export const THEME_PRESETS = {
+  light: { label: '明亮', mode: 'light', primary: '#1677ff', bg: '#f5f5f5', surface: '#fff', subtle: '#fafafa', text: '#262626', muted: '#595959', border: '#d9d9d9', panelBorder: '#f0f0f0', accent: '#1677ff', onPrimary: '#ffffff', error: '#cf1322', success: '#389e0d' },
+  dark: { label: '暗黑', mode: 'dark', primary: '#8fb8ff', bg: '#15181d', surface: '#20242b', subtle: '#1b2028', text: '#edf1f7', muted: '#b2bece', border: '#667387', panelBorder: '#667387', accent: '#a6c7ff', onPrimary: '#101c2c', error: '#ffb4ab', success: '#9bddad' },
+  fresh: { label: '清新', mode: 'light', primary: '#0c6a55', bg: '#edf8f4', surface: '#fbfffd', subtle: '#e6f4ed', text: '#173b31', muted: '#4c665c', border: '#a4c4b5', panelBorder: '#a4c4b5', accent: '#0c6a55', onPrimary: '#ffffff', error: '#b4232c', success: '#166534' },
+  tech: { label: '科技', mode: 'dark', primary: '#55ddc6', bg: '#07131f', surface: '#102536', subtle: '#0b1c2b', text: '#e1f4f7', muted: '#a0bdca', border: '#5b8294', panelBorder: '#5b8294', accent: '#55ddc6', onPrimary: '#071b20', error: '#ffb4ab', success: '#9bddad' },
+} as const
+export function resolveThemeConfig(value: unknown): ThemeBinding | null {
+  if (value === undefined) return null
+  const config=value as Partial<ThemeBinding> | null
+  if (!config || config.defaultTheme !== 'light' || !Array.isArray(config.presets) || config.presets.length !== 4 || new Set(config.presets).size !== 4 || !THEME_IDS.every(id => config.presets!.includes(id))) throw new Error('主题配置必须包含明亮、暗黑、清新、科技且默认明亮。')
+  return { defaultTheme: 'light', presets: [...THEME_IDS] }
+}
+export const themeStorageKey = (namespace: string) => `${namespace}:ui-theme:v1`
+export function safeThemeStorage(access: () => ThemeStorage): ThemeStorage | null { try { return access() } catch { return null } }
+export function loadThemePreference(storage: ThemeStorage | null, key: string): ThemeId {
+  try { const value=JSON.parse(storage?.getItem(key) ?? 'null'); if (value?.version===1 && THEME_IDS.includes(value.themeId)) return value.themeId } catch { /* Damaged or denied storage uses the explicit default. */ }
+  return 'light'
+}
+export function saveThemePreference(storage: ThemeStorage | null, key: string, themeId: ThemeId): boolean {
+  try { if (!storage) return false; storage.setItem(key,JSON.stringify({version:1,themeId})); return true } catch { return false }
+}

package/skills/i3-ui-demo/assets/starter/src/main.ts

@@ -0,0 +1,18 @@
+import { createApp } from 'vue'
+import 'antdv-next/dist/reset.css'
+import App from './App.vue'
+import { loadConfig } from './config'
+import './style.css'
+
+loadConfig().then(config => {
+  window.__PROTOTYPE_META__ = { ...config, candidateId: import.meta.env.VITE_CANDIDATE_ID || 'unverified-development' }
+  createApp(App, { config }).mount('#app')
+}).catch(error => {
+  const container = document.querySelector('#app')!
+  const heading = document.createElement('h1')
+  heading.textContent = '原型无法启动'
+  const message = document.createElement('p')
+  message.textContent = error instanceof Error ? error.message : '配置读取失败。'
+  container.setAttribute('role', 'alert')
+  container.append(heading, message)
+})

package/skills/i3-ui-demo/assets/starter/src/style.css

@@ -0,0 +1,26 @@
+* { box-sizing: border-box; }
+body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
+.prototype-shell { min-height: 100dvh; padding: 24px; }
+header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 auto 20px; max-width: 1440px; }
+h1 { margin: 0; font-size: 24px; }
+h2 { margin-top: 0; font-size: 20px; }
+.theme-picker { display: flex; align-items: center; gap: 8px; }
+.theme-picker .ant-select { min-width: 100px; }
+main { max-width: 1440px; margin: auto; padding: 20px; border: 1px solid; border-radius: 10px; }
+section { min-height: 240px; }
+:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
+@media (max-width: 600px) { .prototype-shell { padding: 12px; } main { padding: 12px; } h1 { font-size: 20px; } }
+@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }
+.generation-shell { min-height: 100dvh; background: var(--prototype-bg); color: var(--prototype-text); }
+.generation-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; width: 100%; max-width: none; min-height: 64px; height: auto; margin: 0; padding: 12px 24px; line-height: 1.5; background: var(--prototype-surface); color: inherit; border-bottom: 1px solid var(--prototype-border); }
+.generation-brand { display: flex; align-items: center; gap: 12px; font-size: 18px; }
+.generation-body { min-width: 0; background: var(--prototype-bg); }
+.generation-sidebar { padding: 12px 8px; background: var(--prototype-surface) !important; border-right: 1px solid var(--prototype-border); }
+.generation-topnav { background: var(--prototype-surface); }
+.generation-content { min-width: 0; max-width: none; margin: var(--prototype-spacing); padding: var(--prototype-spacing); border: 1px solid var(--prototype-border); border-radius: var(--prototype-radius); background: var(--prototype-surface); color: inherit; }
+.layout-focused .generation-content { width: calc(100% - 2 * var(--prototype-spacing)); max-width: 1200px; margin: var(--prototype-spacing) auto; }
+.style-minimal .generation-content { border-color: transparent; }
+.style-soft .generation-content { box-shadow: 0 4px 20px rgb(0 0 0 / 6%); }
+.skip-link { position: fixed; top: 8px; left: 8px; z-index: 2000; padding: 8px 12px; background: var(--prototype-surface); color: var(--prototype-text); transform: translateY(-200%); }
+.skip-link:focus { transform: none; }
+@media (max-width: 767px) { .generation-header { padding: 12px; } .generation-content { margin: 8px; padding: 12px; } }

package/skills/i3-ui-demo/assets/starter/tests/presentation.test.ts

@@ -0,0 +1,23 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { resolvePresentation, presentationTokens, pageFromHash, navigationMenus } from '../src/domain/presentation.ts'
+test('every supported presentation combination has a usable native token recipe', () => {
+  for (const layout of ['sidebar','topbar','mixed','focused']) for (const style of ['business','minimal','soft']) for (const density of ['compact','standard','comfortable']) {
+    const value = resolvePresentation({ layout, style, density }), tokens = presentationTokens(value)
+    assert.ok(tokens.controlHeight > 0 && tokens.spacing > 0 && tokens.borderRadius >= 0)
+  }
+  assert.throws(() => resolvePresentation({ layout: 'lost', style: 'minimal', density: 'compact' }), /不支持/)
+})
+test('deep links retain declared page identity and reject unknown or malformed locations', () => {
+  const pages = [{ id: 'assets' }, { id: 'details' }]
+  assert.equal(pageFromHash('#/details', pages), 'details')
+  assert.equal(pageFromHash('', pages), 'assets')
+  assert.equal(pageFromHash('#/missing', pages), undefined)
+  assert.equal(pageFromHash('#/%broken', pages), undefined)
+})
+test('mixed navigation separates group entries from the selected group pages', () => {
+  const value = navigationMenus([{ key: '@assets', label: '资产', children: [{ key: 'list', label: '台账' }, { key: 'detail', label: '详情' }] }, { key: '@work', label: '作业', children: [{ key: 'jobs', label: '任务' }] }], 'mixed', 'detail')
+  assert.deepEqual(value.top.map(item => item.key), ['list','jobs'])
+  assert.deepEqual(value.side.map(item => item.key), ['list','detail'])
+  assert.equal(value.topSelected, 'list')
+})

package/skills/i3-ui-demo/assets/starter/tests/theme.test.ts

@@ -0,0 +1,26 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+import { THEME_PRESETS, resolveThemeConfig, themeStorageKey, loadThemePreference, saveThemePreference, safeThemeStorage } from '../src/domain/theme.ts'
+
+const binding = { defaultTheme: 'light', presets: ['light', 'dark', 'fresh', 'tech'] }
+test('four named presets are explicit while an unbound instance stays legacy', () => {
+  assert.equal(resolveThemeConfig(undefined), null)
+  assert.deepEqual(resolveThemeConfig(binding), binding)
+  assert.deepEqual(Object.values(THEME_PRESETS).map(theme => theme.label), ['明亮', '暗黑', '清新', '科技'])
+  assert.deepEqual(Object.values(THEME_PRESETS).map(theme => theme.mode), ['light', 'dark', 'light', 'dark'])
+  for (const config of [{ ...binding, defaultTheme: 'dark' }, { ...binding, presets: [1,2,3,4] }, { ...binding, presets: ['light','dark','fresh','fresh'] }]) assert.throws(() => resolveThemeConfig(config))
+})
+test('theme preference is namespaced independently and damaged cache falls back', () => {
+  const values=new Map<string,string>(), storage={ getItem:(key:string)=>values.get(key)??null,setItem:(key:string,value:string)=>{values.set(key,value)} }
+  const a=themeStorageKey('instance-a'),b=themeStorageKey('instance-b')
+  assert.notEqual(a,b);assert.match(a,/:ui-theme:v1$/)
+  assert.equal(saveThemePreference(storage,a,'tech'),true)
+  assert.equal(loadThemePreference(storage,a),'tech');assert.equal(loadThemePreference(storage,b),'light')
+  for (const broken of ['{','null','{"version":1,"themeId":2}','{"version":2,"themeId":"tech"}','{"version":1,"themeId":"unknown"}']) { values.set(a,broken);assert.equal(loadThemePreference(storage,a),'light') }
+})
+test('denied storage never prevents local theme changes or returns a fake saved preference', () => {
+  const denied={getItem(){throw Error('denied')},setItem(){throw Error('denied')}}
+  assert.equal(safeThemeStorage(()=>{throw Error('getter denied')}),null)
+  assert.equal(loadThemePreference(denied,'key'),'light');assert.equal(loadThemePreference(null,'key'),'light')
+  assert.equal(saveThemePreference(denied,'key','dark'),false);assert.equal(saveThemePreference(null,'key','dark'),false)
+})

package/skills/i3-ui-demo/assets/starter/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue", "vite.config.ts"]
+}

package/skills/i3-ui-demo/assets/starter/vite.config.ts

@@ -0,0 +1,4 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({ plugins: [vue()], base: './', build: { manifest: true } })