@aithe/aithe-ui 26.2.2 → 26.3.1

package/README.md

@@ -1,10 +1,10 @@
 # Aithe UI
 
-Aithe UI is a cross-framework Web Components design system built with **Lit 3.x** and **TypeScript**, developed by the Archest team. It provides 79 reusable UI primitives with Shadow DOM isolation, multi-theme support, i18n (en-US / zh-CN), and accessible semantics — ready for any modern web application regardless of framework.
+Aithe UI is a cross-framework Web Components design system built with **Lit 3.x** and **TypeScript**, developed by the Archest team. It provides 90+ reusable UI primitives with Shadow DOM isolation, a **Theme × Shape × Shadow × Typo** orthogonal customization system (25 themes, 8 shapes, 9 shadows, 4 typo styles), i18n (10 locales), and accessible semantics — ready for any modern web application regardless of framework.
 
-Aithe UI 是 Archest 团队基于 **Lit 3.x** 和 **TypeScript** 开发的跨框架 Web Components 设计系统，提供 79 个可复用 UI 基础组件，具备 Shadow DOM 样式隔离、多主题支持、国际化（en-US / zh-CN）和无障碍语义，适用于任何现代 Web 应用。
+Aithe UI 是 Archest 团队基于 **Lit 3.x** 和 **TypeScript** 开发的跨框架 Web Components 设计系统，提供 90+ 个可复用 UI 基础组件，内置 **Theme × Shape × Shadow × Typo** 正交定制体系（25 种主题、8 种形状、9 种阴影、4 种排版），支持 10 种语言国际化，具备 Shadow DOM 样式隔离和无障碍语义，适用于任何现代 Web 应用。
 
-**版本**: 26.2.2 (2026年第2季度第2个月版本)
+**版本**: 26.2.3.15 (2026年第2季度第3个月第15次迭代)
 
 ---
 
@@ -13,10 +13,10 @@ Aithe UI 是 Archest 团队基于 **Lit 3.x** 和 **TypeScript** 开发的跨框
 - **Cross-framework** — Web Components work with React, Vue, Angular, Svelte, or vanilla JS
 - **`aithe-*` namespace** — consistent custom element tag prefix
 - **Shadow DOM** — style isolation per component
-- **Multi-theme** — 22 built-in themes (11 Light + 11 Dark); switch globally or per-component
-- **i18n** — built-in internationalization with en-US / zh-CN; extensible via `registerAitheTranslations()`
+- **Orthogonal customization** — Theme × Shape × Shadow × Typo: 25 themes, 8 shape styles, 9 shadow styles, 4 typography styles, freely combinable
+- **i18n** — built-in internationalization with 10 locales (en-US, zh-CN, zh-HK, zh-TW, ja-JP, ko-KR, de-DE, fr-FR, es-ES, pt-BR); extensible via `aitheUI.registerLocale()`
 - **Accessible** — keyboard interaction, ARIA semantics, focus trapping
-- **Enterprise-oriented** — layout system, form validation, data display, and feedback overlays
+- **Enterprise-oriented** — layout density system, client-side router, form validation, data display, DataHub middleware (with APIStyle business protocol parsing), logger, and feedback overlays
 - **TypeScript** — full type declarations shipped with the library
 - **Zero runtime deps** — only `lit` as a dependency
 
@@ -34,6 +34,13 @@ Import the library once to register all components and initialize the theme:
 
 ```ts
 import '@aithe/aithe-ui';
+import { aitheUI } from '@aithe/aithe-ui';
+
+// Optional: set initial theme, shape, shadow, and typo styles
+aitheUI.setTheme('light');
+aitheUI.setShape('rounded');
+aitheUI.setShadow('flat');
+aitheUI.setTypo('business');
 ```
 
 Or import individual components:
@@ -52,9 +59,9 @@ Then use the custom elements in your HTML:
 
 ## Theme / 主题
 
-Aithe UI ships 22 built-in themes across two series. Each theme provides a complete set of design tokens (primary, success, warning, danger, neutral color scales) and semantic CSS variables.
+Aithe UI ships 25 built-in themes across three series. Each theme provides a complete set of design tokens (primary, success, warning, danger, neutral color scales) and semantic CSS variables.
 
-Aithe UI 内置 22 套主题，分为 Light 系和 Dark 系。每套主题提供完整的设计令牌（primary / success / warning / danger / neutral 色阶）和语义化 CSS 变量。
+Aithe UI 内置 25 套主题，分为 Light 系、Dark 系和 Cloud 系。每套主题提供完整的设计令牌（primary / success / warning / danger / neutral 色阶）和语义化 CSS 变量。
 
 ### Light Series / Light 系 (11)
 
@@ -88,28 +95,24 @@ Aithe UI 内置 22 套主题，分为 Light 系和 Dark 系。每套主题提供
 | `navy`     | `#4066c0` | Navy dark / 海军蓝暗色      | Maritime / logistics / 航运、物流系统          |
 | `raisin`   | `#6e50c0` | Berry dark / 浆果暗色       | Fashion / luxury brands / 时尚、奢侈品牌       |
 
-### Global Theme / 全局主题
-
-Apply a theme to the entire page by setting a class on `<body>` or `<html>`:
-
-```html
-<body class="aithe-light">
-  <aithe-button type="primary">Primary Button</aithe-button>
-</body>
-```
+### Cloud Series / Cloud 系 (3)
 
-Switch to dark mode by replacing `aithe-light` with `aithe-dark`.
+| Theme     | Primary   | Style / 风格                 | Use Case / 使用场景                                  |
+| --------- | --------- | ---------------------------- | ---------------------------------------------------- |
+| `huawei`  | `#CF102D` | Huawei Cloud red / 华为云红  | Huawei Cloud-style dashboards / 华为云风格仪表盘     |
+| `tianyi`  | `#0052CC` | Tianyi Cloud blue / 天翼云蓝 | Tianyi Cloud-style dashboards / 天翼云风格仪表盘     |
+| `aliyun`  | `#FF6A00` | Alibaba Cloud orange / 阿里橙 | Alibaba Cloud-style dashboards / 阿里云风格仪表盘    |
 
 ### Programmatic Theme Switch / 编程式主题切换
 
 ```ts
-import { setAitheTheme, getAitheTheme } from '@aithe/aithe-ui';
+import { aitheUI } from '@aithe/aithe-ui';
 
 // Switch theme (persisted to localStorage by default)
-setAitheTheme('dark');
+aitheUI.setTheme('dark');
 
 // Read current theme
-const current = getAitheTheme(); // 'dark'
+const current = aitheUI.getTheme(); // 'dark'
 ```
 
 ### Per-Component Override / 单组件主题覆盖
@@ -120,11 +123,84 @@ const current = getAitheTheme(); // 'dark'
 
 ---
 
+## Shape / 形状风格
+
+8 built-in shape styles that control border-radius tokens, orthogonal to themes:
+
+| Shape       | Description / 说明 |
+| ----------- | ------------------ |
+| `rounded`   | 默认圆角           |
+| `smooth`    | 平滑微圆角         |
+| `rounder`   | 较大圆角           |
+| `pill`      | 胶囊圆角           |
+| `circle`    | 圆形               |
+| `organic`   | 有机不对称圆角     |
+| `sharp`     | 锐利直角           |
+| `chamfer`   | 倒角               |
+
+```ts
+aitheUI.setShape('pill');
+```
+
+---
+
+## Shadow / 阴影风格
+
+9 built-in shadow styles that control elevation and depth tokens:
+
+| Shadow           | Description / 说明 |
+| ---------------- | ------------------ |
+| `flat`           | 扁平               |
+| `neumorphism`    | 新拟态             |
+| `skeuomorphic`   | 拟物化             |
+| `glassmorphism`  | 玻璃拟态           |
+| `cyber`          | 赛博               |
+| `deep`           | 深度               |
+| `diffuse`        | 扩散               |
+| `sharp-business` | 锐利商务           |
+| `retro`          | 复古               |
+
+```ts
+aitheUI.setShadow('neumorphism');
+```
+
+---
+
+## Typography / 排版风格
+
+4 built-in typography styles that control font-size, font-weight, line-height, spacing, and control-height tokens:
+
+| Typo       | Description / 说明 |
+| ---------- | ------------------ |
+| `minimal`  | 极简               |
+| `business` | 商务（默认）       |
+| `luxury`   | 轻奢               |
+| `compact`  | 紧凑信息流         |
+
+```ts
+aitheUI.setTypo('luxury');
+```
+
+---
+
 ## Internationalization / 国际化
 
-Aithe UI ships with built-in i18n support for **en-US** and **zh-CN** (BCP 47 locale codes). All user-facing strings in 19 components are externalized and resolved via the `t()` function.
+Aithe UI ships with built-in i18n support for **10 locales** (BCP 47 codes), extensible via `aitheUI.registerLocale()`. All user-facing strings are externalized and resolved via the `aitheUI.t()` function.
+
+Aithe UI 内置国际化支持，提供 **10 种语言**（BCP 47 格式），可通过 `aitheUI.registerLocale()` 扩展。所有用户可见字符串已外部化，通过 `aitheUI.t()` 函数动态解析。
 
-Aithe UI 内置国际化支持，提供 **en-US** 和 **zh-CN**（BCP 47 格式）两种语言。19 个组件中的所有用户可见字符串已外部化，通过 `t()` 函数动态解析。
+| Locale  | Language / 语言    |
+| ------- | ------------------ |
+| `en-US` | English            |
+| `zh-CN` | 简体中文           |
+| `zh-HK` | 繁體中文（香港）   |
+| `zh-TW` | 繁體中文（台灣）   |
+| `ja-JP` | 日本語             |
+| `ko-KR` | 한국어             |
+| `de-DE` | Deutsch            |
+| `fr-FR` | Français           |
+| `es-ES` | Español            |
+| `pt-BR` | Português (Brasil) |
 
 ### Locale Switch / 语言切换
 
@@ -135,35 +211,35 @@ Aithe UI 内置国际化支持，提供 **en-US** 和 **zh-CN**（BCP 47 格式
 ### Programmatic Locale / 编程式语言操作
 
 ```ts
-import { setAitheLocale, getAitheLocale, t, onAitheLocaleChange } from 'aithe-ui';
+import { aitheUI } from '@aithe/aithe-ui';
 
 // Switch locale / 切换语言
-setAitheLocale('zh-CN');
+aitheUI.setLocale('zh-CN');
 
 // Get current locale / 获取当前语言
-console.log(getAitheLocale()); // 'zh-CN'
+console.log(aitheUI.getLocale()); // 'zh-CN'
 
 // Translate a key / 翻译键
-console.log(t('basic.empty.defaultText')); // '暂无数据'
+console.log(aitheUI.t('basic.empty.defaultText')); // '暂无数据'
 
 // Listen for changes / 监听变更
-const unsubscribe = onAitheLocaleChange(() => {
-  console.log('Locale changed to:', getAitheLocale());
+const unsubscribe = aitheUI.onLocaleChange(() => {
+  console.log('Locale changed to:', aitheUI.getLocale());
 });
 ```
 
 ### Register App-Level Translations / 注册应用级翻译
 
 ```ts
-import { registerAitheTranslations } from 'aithe-ui';
+import { aitheUI } from '@aithe/aithe-ui';
 
 // Merge app-specific keys into existing locale registries
-registerAitheTranslations('en-US', {
+aitheUI.registerLocale('en-US', {
   'app.dashboard.title': 'Dashboard',
   'app.settings.save': 'Save Settings',
 });
 
-registerAitheTranslations('zh-CN', {
+aitheUI.registerLocale('zh-CN', {
   'app.dashboard.title': '仪表盘',
   'app.settings.save': '保存设置',
 });
@@ -172,35 +248,39 @@ registerAitheTranslations('zh-CN', {
 ### Register a Custom Locale / 注册自定义语言
 
 ```ts
-import { registerAitheLocale, setAitheLocale } from 'aithe-ui';
+import { aitheUI } from '@aithe/aithe-ui';
 
-registerAitheLocale('ja-JP', {
+aitheUI.registerLocale('ja-JP', {
   'basic.empty.defaultText': 'データなし',
   'form.dialog.confirmText': '確認',
   'form.dialog.cancelText': 'キャンセル',
 });
 
-setAitheLocale('ja-JP');
+aitheUI.setLocale('ja-JP');
 ```
 
 ---
 
 ## Documentation / 文档
 
-| Document / 文档                                        | Description / 说明                                                                         |
-| ------------------------------------------------------ | ------------------------------------------------------------------------------------------ |
-| [Quick Start](docs/quickstart.md)                      | Installation, import, and first component / 安装、导入和第一个组件                         |
-| [Usage Guide](docs/guide.md)                           | Common API patterns: props, events, slots, styling / 通用 API 模式：属性、事件、插槽、样式 |
-| [Theming](docs/theming.md)                             | 22 built-in themes, CSS variables, custom themes / 22 种内置主题、CSS 变量、自定义主题     |
-| [Internationalization](docs/i18n.md)                   | Locale switching, translation registration / 语言切换、翻译注册                            |
-| [Framework Integration](docs/framework-integration.md) | React / Vue / Angular / Svelte integration / 框架集成指南                                  |
-| [API Reference](docs/api/summary.md)                   | Full API docs for all 79 components / 全部 79 个组件的详细 API                             |
+| Document / 文档                                        | Description / 说明                                                                                                                                 |
+| ------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Quick Start](docs/quickstart.md)                      | Installation, import, and first component / 安装、导入和第一个组件                                                                                 |
+| [Usage Guide](docs/guide.md)                           | Common API patterns: props, events, slots, styling, shape, shadow, typo / 通用 API 模式：属性、事件、插槽、样式                                    |
+| [Theming](docs/theming.md)                             | 25 themes, 8 shapes, 9 shadows, 4 typo styles, CSS variables, custom themes / 主题、形状、阴影、排版、CSS 变量、自定义 |
+| [Internationalization](docs/i18n.md)                   | Locale switching, translation registration / 语言切换、翻译注册                                                                                    |
+| [DataHub](docs/datahub.md)                             | Data middleware: request dispatch, caching, dedup, mock, APIStyle protocol parsing / 数据中间层：请求调度、缓存、去重、Mock、APIStyle 业务协议解析 |
+| [Framework Integration](docs/framework-integration.md) | React / Vue / Angular / Svelte integration / 框架集成指南                                                                                          |
+| [Autoform](docs/autoform.md)                           | JSON-driven auto form: JSON spec, usage / JSON 驱动的自动表单：JSON 规范、使用方法                                                                 |
+| [Markdown](docs/markdown.md)                           | Markdown component: features, usage / Markdown 组件：特性、使用方法                                                                                |
+| [Highlight](docs/highlight.md)                         | Syntax highlighting: languages, themes / 语法高亮：支持语言、主题                                                                                  |
+| [API Reference](docs/api/summary.md)                   | Full API docs for all components / 全部组件的详细 API                                                                                              |
 
 ---
 
 ## Components / 组件列表
 
-Aithe UI provides **79 components** across 10 categories:
+Aithe UI provides **100+ components** across 11 categories:
 
 ### Basic / 基础 (12)
 
@@ -219,22 +299,32 @@ Aithe UI provides **79 components** across 10 categories:
 | `<aithe-empty>`        | Empty state placeholder with icon and text             | 空状态，数据为空时的占位       |
 | `<aithe-chip>`         | Compact selectable chip with close button              | 芯片，紧凑可选标签带关闭按钮   |
 
-### Layout / 布局 (10)
-
-| Tag                      | Description                                   | 说明                     |
-| ------------------------ | --------------------------------------------- | ------------------------ |
-| `<aithe-container>`      | Top-level page layout container               | 容器，顶层页面布局容器   |
-| `<aithe-row>`            | 24-grid row for grid layout system            | 行，24 栅格行容器        |
-| `<aithe-col>`            | 24-grid column item                           | 列，24 栅格列项          |
-| `<aithe-flex>`           | Quick flex layout helper                      | 弹性布局，快速 Flex 布局 |
-| `<aithe-space>`          | Equal spacing helper for child elements       | 间距，子元素等间距布局   |
-| `<aithe-page-container>` | Standard page shell with title and spacing    | 页面容器，标准页面外壳   |
-| `<aithe-page>`           | Full-page layout with header and content area | 页面，完整页面布局       |
-| `<aithe-collapse>`       | Accordion / multi-expand collapse container   | 折叠面板，手风琴/多展开  |
-| `<aithe-collapse-item>`  | Single collapsible panel                      | 折叠项，单个可折叠面板   |
-| `<aithe-affix>`          | Sticky wrapper that pins content on scroll    | 固钉，滚动时固定元素     |
-
-### Navigation / 导航 (8)
+### Layout / 布局 (8)
+
+| Tag                     | Description                                 | 说明                     |
+| ----------------------- | ------------------------------------------- | ------------------------ |
+| `<aithe-container>`     | Top-level page layout container             | 容器，顶层页面布局容器   |
+| `<aithe-row>`           | 24-grid row for grid layout system          | 行，24 栅格行容器        |
+| `<aithe-col>`           | 24-grid column item                         | 列，24 栅格列项          |
+| `<aithe-flex>`          | Quick flex layout helper                    | 弹性布局，快速 Flex 布局 |
+| `<aithe-space>`         | Equal spacing helper for child elements     | 间距，子元素等间距布局   |
+| `<aithe-collapse>`      | Accordion / multi-expand collapse container | 折叠面板，手风琴/多展开  |
+| `<aithe-collapse-item>` | Single collapsible panel                    | 折叠项，单个可折叠面板   |
+| `<aithe-affix>`         | Sticky wrapper that pins content on scroll  | 固钉，滚动时固定元素     |
+
+### Framework / 框架 (7)
+
+| Tag                       | Description                                                           | 说明                                       |
+| ------------------------- | --------------------------------------------------------------------- | ------------------------------------------ |
+| `<aithe-header>`          | Top navigation bar with brand, locale/theme toggles, and slots        | 页头，含品牌、国际化/主题切换和插槽        |
+| `<aithe-body>`            | Main content area with layout density control and floating action bar | 页体，支持布局密度控制和浮动操作栏         |
+| `<aithe-sidebar>`         | Collapsible sidebar with brand, menu tree, and action buttons         | 侧边栏，含品牌、菜单树和操作按钮，支持伸缩 |
+| `<aithe-page>`            | Route container that renders the matched page component               | 路由容器，渲染匹配到的页面组件             |
+| `<aithe-log-panel>`       | Log panel with level filtering, search, and remote reporting          | 日志面板，支持级别过滤、搜索和远程上报     |
+| `<aithe-dashboard>`       | Dashboard layout container with grid-based panel arrangement          | 仪表盘容器，网格化面板布局                 |
+| `<aithe-dashboard-panel>` | Single dashboard panel with header, body, and footer sections         | 仪表盘面板，含标题、内容和操作区           |
+
+### Navigation / 导航 (7)
 
 | Tag                       | Description                                    | 说明                     |
 | ------------------------- | ---------------------------------------------- | ------------------------ |
@@ -245,28 +335,29 @@ Aithe UI provides **79 components** across 10 categories:
 | `<aithe-breadcrumb-item>` | Single breadcrumb link or text                 | 面包屑项，单个面包屑链接 |
 | `<aithe-steps>`           | Stepper for process flow visualization         | 步骤条，流程步骤可视化   |
 | `<aithe-back-top>`        | Floating button to scroll back to top          | 回到顶部，滚动回顶按钮   |
-| `<aithe-dropdown>`        | Dropdown menu overlay                          | 下拉菜单，下拉菜单浮层   |
-
-### Form / 表单 (16)
-
-| Tag                      | Description                                  | 说明                           |
-| ------------------------ | -------------------------------------------- | ------------------------------ |
-| `<aithe-checkbox>`       | Binary selection control                     | 复选框，二选一控件             |
-| `<aithe-checkbox-group>` | Multi-select group of checkboxes             | 复选框组，多选组合             |
-| `<aithe-radio>`          | Single selection control                     | 单选框，单选控件               |
-| `<aithe-radio-group>`    | Group of mutually exclusive radios           | 单选框组，互斥单选组合         |
-| `<aithe-select>`         | Dropdown single/multi selector               | 选择器，下拉单选/多选          |
-| `<aithe-switch>`         | Toggle switch for on/off state               | 开关，开/关切换                |
-| `<aithe-color-picker>`   | Color selection input                        | 颜色选择器，颜色选取输入       |
-| `<aithe-combobox>`       | Searchable dropdown with free input          | 组合框，可搜索下拉带自由输入   |
-| `<aithe-date-picker>`    | Date selection input                         | 日期选择器，日期选取输入       |
-| `<aithe-time-picker>`    | Time selection input                         | 时间选择器，时间选取输入       |
-| `<aithe-slider>`         | Range slider for numeric input               | 滑块，数值范围滑块             |
-| `<aithe-rate>`           | Star rating input                            | 评分，星级评分输入             |
-| `<aithe-form>`           | Form container with validation               | 表单，带验证的表单容器         |
-| `<aithe-form-item>`      | Form field wrapper with label and validation | 表单项，带标签和验证的字段包装 |
-| `<aithe-upload>`         | File upload control                          | 上传，文件上传控件             |
-| `<aithe-transfer>`       | Dual-list transfer selector                  | 穿梭框，双列表数据转移         |
+
+### Form / 表单 (18)
+
+| Tag                      | Description                                     | 说明                            |
+| ------------------------ | ----------------------------------------------- | ------------------------------- |
+| `<aithe-autoform>`       | JSON-driven auto form with dependency rules     | 自动表单，JSON 驱动支持联动规则 |
+| `<aithe-autoform-item>`  | Single auto form item with three-section layout | 自动表单项，三段式布局          |
+| `<aithe-checkbox>`       | Binary selection control                        | 复选框，二选一控件              |
+| `<aithe-checkbox-group>` | Multi-select group of checkboxes                | 复选框组，多选组合              |
+| `<aithe-radio>`          | Single selection control                        | 单选框，单选控件                |
+| `<aithe-radio-group>`    | Group of mutually exclusive radios              | 单选框组，互斥单选组合          |
+| `<aithe-select>`         | Dropdown single/multi selector                  | 选择器，下拉单选/多选           |
+| `<aithe-switch>`         | Toggle switch for on/off state                  | 开关，开/关切换                 |
+| `<aithe-color-picker>`   | Color selection input                           | 颜色选择器，颜色选取输入        |
+| `<aithe-combobox>`       | Searchable dropdown with free input             | 组合框，可搜索下拉带自由输入    |
+| `<aithe-date-picker>`    | Date selection input                            | 日期选择器，日期选取输入        |
+| `<aithe-time-picker>`    | Time selection input                            | 时间选择器，时间选取输入        |
+| `<aithe-slider>`         | Range slider for numeric input                  | 滑块，数值范围滑块              |
+| `<aithe-rate>`           | Star rating input                               | 评分，星级评分输入              |
+| `<aithe-form>`           | Form container with validation                  | 表单，带验证的表单容器          |
+| `<aithe-form-item>`      | Form field wrapper with label and validation    | 表单项，带标签和验证的字段包装  |
+| `<aithe-upload>`         | File upload control                             | 上传，文件上传控件              |
+| `<aithe-transfer>`       | Dual-list transfer selector                     | 穿梭框，双列表数据转移          |
 
 ### Feedback / 反馈 (9)
 
@@ -282,7 +373,7 @@ Aithe UI provides **79 components** across 10 categories:
 | `<aithe-notification>` | Corner notification card        | 通知提醒框，角落通知卡片   |
 | `<aithe-loading>`      | Loading spinner overlay         | 加载中，加载旋转浮层       |
 
-### Data / 数据展示 (9)
+### Data / 数据展示 (13)
 
 | Tag                     | Description                                         | 说明                         |
 | ----------------------- | --------------------------------------------------- | ---------------------------- |
@@ -295,15 +386,26 @@ Aithe UI provides **79 components** across 10 categories:
 | `<aithe-timeline>`      | Timeline container with data-driven mode            | 时间线，支持数据驱动模式     |
 | `<aithe-timeline-item>` | Single timeline node                                | 时间线项，单个时间线节点     |
 | `<aithe-pagination>`    | Page navigation for large datasets                  | 分页，大数据集分页导航       |
-
-### Display / 展示 (4)
-
-| Tag                      | Description                       | 说明                      |
-| ------------------------ | --------------------------------- | ------------------------- |
-| `<aithe-carousel>`       | Slot-based image/content carousel | 走马灯，轮播图            |
-| `<aithe-comparison>`     | Before/after comparison slider    | 对比，前后对比滑块        |
-| `<aithe-animated-image>` | Animated image with pan/zoom      | 动画图片，缩放平移        |
-| `<aithe-markdown>`       | Lightweight markdown renderer     | Markdown 渲染，轻量渲染器 |
+| `<aithe-dropdown>`      | Dropdown menu overlay                               | 下拉菜单，下拉菜单浮层       |
+| `<aithe-metrics>`       | Metrics display with label and value                | 指标，标签和数值展示         |
+| `<aithe-metrics-group>` | Grouped metrics container                           | 指标组，分组指标容器         |
+
+### Display / 展示 (12)
+
+| Tag                       | Description                               | 说明                         |
+| ------------------------- | ----------------------------------------- | ---------------------------- |
+| `<aithe-carousel>`        | Slot-based image/content carousel         | 走马灯，轮播图               |
+| `<aithe-comparison>`      | Before/after comparison slider            | 对比，前后对比滑块           |
+| `<aithe-animated-image>`  | Animated image with pan/zoom              | 动画图片，缩放平移           |
+| `<aithe-markdown>`        | Lightweight markdown renderer             | Markdown 渲染，轻量渲染器    |
+| `<aithe-markdown-editor>` | Markdown editor with live preview         | Markdown 编辑器，实时预览    |
+| `<aithe-code-editor>`     | Code editor with syntax highlighting      | 代码编辑器，语法高亮         |
+| `<aithe-label>`           | Inline label with size and color variants | 标签文本，支持尺寸和颜色变体 |
+| `<aithe-mini-box>`        | Single-row compact record display         | 迷你盒子，单行紧凑记录展示   |
+| `<aithe-brief-box>`       | Three-row brief record display            | 简要盒子，三行简要记录展示   |
+| `<aithe-detail-box>`      | Two-column detail record display          | 详情盒子，双列详情记录展示   |
+| `<aithe-profile>`         | Profile display with icon/avatar          | 档案展示，含图标/头像        |
+| `<aithe-desc>`            | Structured key-value description list     | 描述列表，结构化键值展示     |
 
 ### Progress / 进度 (4)
 
@@ -323,13 +425,17 @@ Aithe UI provides **79 components** across 10 categories:
 | `<aithe-scroller>`    | Themed scroll container    | 滚动容器，自定义滚动区域   |
 | `<aithe-split-panel>` | Resizable two-panel layout | 分割面板，可调整双面板布局 |
 
-### Theme / 主题 (3)
+### Theme / 主题与外观 (7)
 
 | Tag                     | Description                                            | 说明                                      |
 | ----------------------- | ------------------------------------------------------ | ----------------------------------------- |
 | `<aithe-theme-picker>`  | Theme selector with Light/Dark grouping and color dots | 主题选择器，Light/Dark 分组展示带色点预览 |
+| `<aithe-shape-picker>`  | Shape style selector with preview thumbnails           | 形状选择器，带预览缩略图                  |
+| `<aithe-shadow-picker>` | Shadow style selector with preview thumbnails          | 阴影选择器，带预览缩略图                  |
+| `<aithe-typo-picker>`   | Typography style selector with preview icons           | 排版选择器，带预览图标                    |
 | `<aithe-theme-preview>` | Theme preview panel with local preview and apply       | 主题预览，局部预览并确认应用全局主题      |
-| `<aithe-locale-switch>` | Locale switcher dropdown for en-US / zh-CN             | 语言切换，en-US / zh-CN 下拉切换          |
+| `<aithe-theme-switch>`  | Unified appearance switch (theme/shape/shadow/typo)    | 统一外观切换器，一键切换主题/形状/阴影/排版 |
+| `<aithe-locale-switch>` | Locale switcher dropdown for i18n                      | 语言切换，下拉切换                        |
 
 > Full API documentation with properties, slots, events, and examples: [docs/api/summary.md](docs/api/summary.md)
 
@@ -341,28 +447,33 @@ Aithe UI provides **79 components** across 10 categories:
 aithe-ui/
 ├── src/
 │   ├── base/              # AitheElement base class
-│   ├── core/              # Types, utils, floating, anchored-overlay, styles, i18n
-│   ├── styles/            # Theme tokens (22 built-in themes), mixins, global CSS
+│   ├── core/              # Types, utils, floating, anchored-overlay, styles, i18n, layout, router, datahub, logger
+│   ├── styles/            # Theme tokens (25 built-in themes), shape, shadow, typo, mixins, global CSS
 │   ├── types/             # Shared TypeScript type definitions
 │   ├── utils/             # DOM, events, theme, validation helpers
 │   ├── components/
 │   │   ├── basic/         # 12 basic components
-│   │   ├── layout/        # 10 layout components
-│   │   ├── navigation/    # 8 navigation components
-│   │   ├── form/          # 16 form components
+│   │   ├── layout/        # 8 layout components
+│   │   ├── framework/     # 7 framework components (header, body, sidebar, page, log-panel, dashboard, dashboard-panel)
+│   │   ├── navigation/    # 7 navigation components
+│   │   ├── form/          # 18 form components
 │   │   ├── feedback/      # 9 feedback components
-│   │   ├── data/          # 9 data display components
-│   │   ├── display/       # 4 display components
+│   │   ├── data/          # 13 data display components
+│   │   ├── display/       # 12 display components
 │   │   ├── progress/      # 4 progress components
 │   │   ├── container/     # 4 container components
-│   │   └── theme/         # 3 theme components (picker, preview, locale-switch)
-│   ├── global.ts          # initializeAitheUI, setAitheTheme, getAitheTheme
+│   │   └── theme/         # 7 theme components (picker, shape-picker, shadow-picker, typo-picker, preview, theme-switch, locale-switch)
+│   ├── styles/aithe-ui.ts # AitheUI singleton: setTheme, setShape, setShadow, setTypo, setLayout, setLocale, etc.
 │   └── index.ts           # Library entry — exports all components
 ├── docs/
 │   ├── quickstart.md     # Quick start guide / 快速上手
 │   ├── guide.md          # Usage guide / 使用指南
 │   ├── theming.md        # Theming system / 主题系统
 │   ├── i18n.md           # Internationalization / 国际化
+│   ├── datahub.md        # DataHub middleware / 数据中间层
+│   ├── autoform.md       # Autoform technical doc / 自动表单技术文档
+│   ├── markdown.md       # Markdown component doc / Markdown 组件文档
+│   ├── highlight.md      # Syntax highlighting doc / 语法高亮文档
 │   ├── framework-integration.md # Framework integration / 框架集成
 │   ├── api/              # Per-component API docs (bilingual)
 │   │   └ summary.md      # API reference index
@@ -415,7 +526,6 @@ npm run format
 
 # Format and auto-fix
 npm run format:fix
-
 ```
 
 ---
@@ -454,10 +564,11 @@ All Aithe components inherit from `AitheElement`, which provides these shared re
 
 | Property   | Type      | Default     | Description                            |
 | ---------- | --------- | ----------- | -------------------------------------- |
-| `variant`  | `string`  | `'default'` | Visual variant style                   |
+| `variant`  | `string`  | `'default'` | Visual variant style (unified from `intent`) |
 | `size`     | `string`  | `'md'`      | Shared size scale (`sm` / `md` / `lg`) |
 | `theme`    | `string`  | `''`        | Optional local theme override          |
 | `disabled` | `boolean` | `false`     | Disabled state                         |
+| `log`      | `boolean` | `false`     | Enable event logging to logger         |
 
 ---
 

package/dist/apps/admin/AGENTS.md

@@ -0,0 +1,35 @@
+# src/apps/admin/ — 管理后台应用
+
+## 概述
+
+基于 Aithe UI 组件库构建的完整管理后台 SPA 应用，作为框架组件的集成示例和参考实现。
+
+## 目录结构
+
+| 路径                         | 说明                                                     |
+| ---------------------------- | -------------------------------------------------------- |
+| `app.ts`                     | 应用入口，初始化主题/国际化/路由                         |
+| `standalone.ts`              | 独立运行入口                                             |
+| `index.html`                 | HTML 入口                                                |
+| `components/admin-app.ts`    | 根应用组件                                               |
+| `components/admin-layout.ts` | 布局组件（header + sidebar + body）                      |
+| `pages/`                     | 页面组件（dashboard/user/role/settings/login/not-found） |
+| `router/index.ts`            | 应用路由配置                                             |
+| `datahub/`                   | DataHub API 注册和 Mock 数据                             |
+| `store/auth.ts`              | 认证状态管理                                             |
+| `i18n/`                      | 应用级国际化翻译（11种语言）                             |
+
+## 编码规范
+
+- 页面组件使用 `@customElement` 注册，通过路由匹配渲染
+- 路由配置在 `router/index.ts` 中集中管理
+- DataHub API 在 `datahub/index.ts` 中注册
+- 导入使用 `@apps/admin/xxx` 路径别名
+- 中英文双语 JSDoc 注释
+
+## 关键约定
+
+- 此应用是框架组件的参考实现，修改时需保持与框架组件 API 一致
+- 页面组件放在 `pages/` 目录，每个页面一个文件
+- Mock 数据放在 `datahub/mock/` 目录
+- 构建通过 `npm run build:admin` 执行

package/dist/apps/admin/app.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @file Admin 管理后台应用入口 / Admin Dashboard Application Entry Point
+ * @description 初始化 Aithe UI、注册应用层翻译、初始化 DataHub 配置与 API、加载根组件。
+ *              Initializes Aithe UI, registers app-level translations,
+ *              initializes DataHub config & APIs, and loads the root component.
+ */
+import '../../index';
+import './components/admin-app';
+//# sourceMappingURL=app.d.ts.map

package/dist/apps/admin/app.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/apps/admin/app.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,aAAa,CAAC;AAGrB,OAAO,wBAAwB,CAAC"}

package/dist/apps/admin/app.js

@@ -0,0 +1,12 @@
+/**
+ * @file Admin 管理后台应用入口 / Admin Dashboard Application Entry Point
+ * @description 初始化 Aithe UI、注册应用层翻译、初始化 DataHub 配置与 API、加载根组件。
+ *              Initializes Aithe UI, registers app-level translations,
+ *              initializes DataHub config & APIs, and loads the root component.
+ */
+import '../../index';
+import { registerAdminTranslations } from './i18n';
+import { initAdminDataHub } from './datahub';
+import './components/admin-app';
+registerAdminTranslations();
+initAdminDataHub();

package/dist/apps/admin/components/admin-app.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Admin 管理后台根组件
+ * Root component for the Admin dashboard application.
+ *
+ * 集成路由、国际化，根据认证状态切换登录页与主布局。
+ * Integrates routing and i18n, switches between login and main layout based on auth state.
+ */
+import { LitElement } from 'lit';
+import '../pages/login-page';
+import '../pages/dashboard-page';
+import '../pages/user-page';
+import '../pages/role-page';
+import '../pages/settings-page';
+import '../pages/not-found-page';
+import './admin-layout';
+export declare class AitheAdminApp extends LitElement {
+    private currentPath;
+    private initialized;
+    private unsubscribeRoute?;
+    static readonly styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private renderPage;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=admin-app.d.ts.map

package/dist/apps/admin/components/admin-app.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin-app.d.ts","sourceRoot":"","sources":["../../../../src/apps/admin/components/admin-app.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,OAAO,qBAAqB,CAAC;AAC7B,OAAO,yBAAyB,CAAC;AACjC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,gBAAgB,CAAC;AAExB,qBACa,aAAc,SAAQ,UAAU;IAClC,OAAO,CAAC,WAAW,CAAO;IAC1B,OAAO,CAAC,WAAW,CAAS;IAErC,OAAO,CAAC,gBAAgB,CAAC,CAAa;IAEtC,MAAM,CAAC,QAAQ,CAAC,MAAM,0BAMpB;IAEF,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,UAAU;IAclB,MAAM;CAUP"}