@aithe/aithe-ui 26.2.3 → 26.3.2

package/dist/apps/demo/pages/display.js

@@ -0,0 +1,295 @@
+import { t } from '../../../styles/i18n';
+const animatedSvg = encodeURIComponent(`
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 540">
+    <defs>
+      <linearGradient id="g" x1="0" x2="1" y1="0" y2="1">
+        <stop stop-color="#1d4ed8"/>
+        <stop offset="1" stop-color="#0f172a"/>
+      </linearGradient>
+    </defs>
+    <rect width="960" height="540" fill="url(#g)"/>
+    <circle cx="180" cy="160" r="110" fill="rgba(255,255,255,0.1)"/>
+    <circle cx="760" cy="360" r="150" fill="rgba(96,165,250,0.18)"/>
+    <text x="80" y="300" fill="#eff6ff" font-family="Arial" font-size="72" font-weight="700">Aithe UI</text>
+    <text x="82" y="360" fill="#cbd5e1" font-family="Arial" font-size="28">Enterprise Design System</text>
+  </svg>
+`);
+export const displayPage = {
+    key: 'display',
+    title: () => t('demo.display.title'),
+    description: () => t('demo.display.description'),
+    examples: [
+        {
+            title: () => t('demo.display.carousel.title'),
+            description: () => t('demo.display.carousel.description'),
+            code: `<aithe-carousel autoplay interval="2400">
+  <div style="height:280px;display:grid;place-items:center;background:linear-gradient(135deg,#dbeafe,#eff6ff);font-size:28px;font-weight:700;">Launch Faster</div>
+  <div style="height:280px;display:grid;place-items:center;background:linear-gradient(135deg,#dcfce7,#f0fdf4);font-size:28px;font-weight:700;">Theme Everything</div>
+  <div style="height:280px;display:grid;place-items:center;background:linear-gradient(135deg,#ede9fe,#faf5ff);font-size:28px;font-weight:700;">Ship Cross-Framework</div>
+</aithe-carousel>`,
+            previewHeight: '320px',
+        },
+        {
+            title: () => t('demo.display.comparison.title'),
+            description: () => t('demo.display.comparison.description'),
+            code: `<aithe-comparison ratio="52">
+  <div slot="before" style="height:320px;display:grid;place-items:center;background:#f8fafc;color:#0f172a;font-size:28px;font-weight:700;">Before</div>
+  <div slot="after" style="height:320px;display:grid;place-items:center;background:#0f172a;color:#eff6ff;font-size:28px;font-weight:700;">After</div>
+</aithe-comparison>`,
+            previewHeight: '360px',
+        },
+        {
+            title: () => t('demo.display.animatedImage.title'),
+            description: () => t('demo.display.animatedImage.description'),
+            code: `<aithe-animated-image src="data:image/svg+xml;utf8,${animatedSvg}" speed="1.2"></aithe-animated-image>`,
+            previewHeight: '280px',
+        },
+        {
+            title: () => t('demo.display.markdown.title'),
+            description: () => t('demo.display.markdown.description'),
+            code: `<aithe-markdown content="# Aithe UI
+
+- Lit + TypeScript + Web Components
+- Multi-theme design tokens
+- Live demo editor
+
+> Enterprise-grade component architecture.
+
+&#96;&#96;&#96;ts
+export const theme = 'blue';
+&#96;&#96;&#96;"></aithe-markdown>`,
+            previewHeight: '340px',
+        },
+        {
+            title: () => t('demo.display.label.title'),
+            description: () => t('demo.display.label.description'),
+            code: `<aithe-label content=":check: **提交成功** — 表单已保存。&#10;&#10;:info: 提示：支持 **加粗**、~~删除线~~、\`代码\` 和 :home: 图标。"></aithe-label>`,
+            previewHeight: '140px',
+        },
+        {
+            title: () => t('demo.display.miniBox.title'),
+            description: () => t('demo.display.miniBox.description'),
+            code: `<aithe-space direction="vertical" size="8" style="max-width:600px;">
+  <aithe-mini-box selectable="multi">
+    <aithe-profile slot="name" title="Design Tokens v2" desc="Frontend application" icon="app"></aithe-profile>
+    <span slot="status">Published</span>
+  </aithe-mini-box>
+  <aithe-mini-box selectable="multi">
+    <aithe-profile slot="name" title="Auth Service" desc="Authentication" icon="lock"></aithe-profile>
+    <span slot="status">In Review</span>
+  </aithe-mini-box>
+  <aithe-mini-box selectable="multi">
+    <aithe-profile slot="name" title="Legacy Dashboard" desc="Deprecated" icon="dashboard"></aithe-profile>
+    <span slot="status">Deprecated</span>
+  </aithe-mini-box>
+  <aithe-mini-box selectable="multi" selected>
+    <aithe-profile slot="name" title="Component Library" desc="Active" icon="app"></aithe-profile>
+    <span slot="status">Active</span>
+  </aithe-mini-box>
+</aithe-space>`,
+            previewHeight: '280px',
+        },
+        {
+            title: () => t('demo.display.briefBox.title'),
+            description: () => t('demo.display.briefBox.description'),
+            code: `<aithe-space direction="vertical" size="8" style="max-width:600px;">
+  <aithe-brief-box selectable="multi">
+    <aithe-profile slot="name" title="Design Tokens v2" desc="Theme system" icon="app"></aithe-profile>
+    <span slot="status">Published</span>
+    <span slot="tags"><aithe-tag>theme</aithe-tag></span>
+    <span slot="actions"><aithe-button size="sm">Edit</aithe-button> <aithe-button size="sm" variant="danger">Delete</aithe-button></span>
+  </aithe-brief-box>
+  <aithe-brief-box selectable="multi">
+    <aithe-profile slot="name" title="Auth Service" desc="Security" icon="lock"></aithe-profile>
+    <span slot="status">In Review</span>
+    <span slot="tags"><aithe-tag>security</aithe-tag></span>
+    <span slot="actions"><aithe-button size="sm">View</aithe-button></span>
+  </aithe-brief-box>
+  <aithe-brief-box>
+    <aithe-profile slot="name" title="Custom Name" desc="Custom description" icon="star"></aithe-profile>
+    <span slot="actions"><aithe-button size="sm" variant="primary">Approve</aithe-button></span>
+  </aithe-brief-box>
+</aithe-space>`,
+            previewHeight: '380px',
+        },
+        {
+            title: () => t('demo.display.detailBox.title'),
+            description: () => t('demo.display.detailBox.description'),
+            code: `<aithe-space direction="vertical" size="8" style="max-width:600px;">
+  <aithe-detail-box selectable="multi">
+    <aithe-profile slot="name" title="Design Tokens v2" desc="Theme system" icon="app"></aithe-profile>
+    <span slot="tags"><aithe-tag>theme</aithe-tag> <aithe-tag>tokens</aithe-tag> <aithe-tag>v2</aithe-tag></span>
+    <span slot="status">Published</span>
+    <span slot="actions"><aithe-button size="sm">Edit</aithe-button> <aithe-button size="sm" variant="danger">Delete</aithe-button></span>
+    <span slot="content">Semantic color scales, spacing units, and typography presets for the next theme engine release. Supports light, dark, and custom brand themes.</span>
+  </aithe-detail-box>
+  <aithe-detail-box selectable="multi" selected>
+    <aithe-profile slot="name" title="Auth Service" desc="Security" icon="lock"></aithe-profile>
+    <span slot="tags"><aithe-tag>security</aithe-tag> <aithe-tag>api</aithe-tag></span>
+    <span slot="status">In Review</span>
+    <span slot="actions"><aithe-button size="sm" variant="primary">Approve</aithe-button> <aithe-button size="sm">Reject</aithe-button></span>
+    <span slot="content">OAuth 2.0 + PKCE authentication microservice with session management and token refresh.</span>
+  </aithe-detail-box>
+</aithe-space>`,
+            previewHeight: '320px',
+        },
+        {
+            title: () => t('demo.display.profile.title'),
+            description: () => t('demo.display.profile.description'),
+            code: `<aithe-space direction="vertical" size="16" style="max-width:600px;">
+  <aithe-profile title="Project Alpha" desc="Frontend application" icon="app"></aithe-profile>
+  <aithe-profile title="User" desc="Administrator" icon="user" icon-shape="circle"></aithe-profile>
+  <aithe-profile title="Server" desc="Production" icon="server" icon-shape="square"></aithe-profile>
+  <aithe-profile title="No Icon" desc="Auto-generates from title"></aithe-profile>
+  <aithe-profile title="Custom Slot" desc="With custom icon slot">
+    <img slot="icon" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' rx='8' fill='%234f46e5'/%3E%3Ctext x='20' y='26' text-anchor='middle' fill='white' font-size='20' font-weight='bold'%3EA%3C/text%3E%3C/svg%3E" style="width:40px;height:40px;border-radius:8px;" />
+  </aithe-profile>
+</aithe-space>`,
+            previewHeight: '320px',
+        },
+        {
+            title: 'Description List — Basic',
+            description: 'Default 3-column layout without border.',
+            code: `<aithe-desc title="User Info" style="max-width:600px;">
+  <aithe-desc-item label="Username">zhangwei</aithe-desc-item>
+  <aithe-desc-item label="Nickname">Wei</aithe-desc-item>
+  <aithe-desc-item label="Role">Admin</aithe-desc-item>
+  <aithe-desc-item label="Email">zhangwei@example.com</aithe-desc-item>
+  <aithe-desc-item label="Phone">+86 138 0000 1234</aithe-desc-item>
+  <aithe-desc-item label="Department">Frontend Team</aithe-desc-item>
+</aithe-desc>`,
+            previewHeight: '280px',
+        },
+        {
+            title: 'Description List — Border',
+            description: 'With border and column span.',
+            code: `<aithe-desc title="Personal Profile" border style="max-width:600px;">
+  <aithe-desc-item label="Name">Zhang Wei</aithe-desc-item>
+  <aithe-desc-item label="Age">28</aithe-desc-item>
+  <aithe-desc-item label="Gender">Male</aithe-desc-item>
+  <aithe-desc-item label="Phone">+86 138 0000 1234</aithe-desc-item>
+  <aithe-desc-item label="Email">zhangwei@example.com</aithe-desc-item>
+  <aithe-desc-item label="Department">Frontend Team</aithe-desc-item>
+  <aithe-desc-item label="Position">Senior Engineer</aithe-desc-item>
+  <aithe-desc-item label="Skills" span="${2}">TypeScript, React, Vue, Web Components, Node.js</aithe-desc-item>
+  <aithe-desc-item label="Address" span="${3}">No. 123, Chang'an Avenue, Haidian District, Beijing</aithe-desc-item>
+</aithe-desc>`,
+            previewHeight: '400px',
+        },
+        {
+            title: 'Description List — Sizes',
+            description: 'Small, medium and large size variants with border.',
+            code: `<aithe-space direction="vertical" size="16" style="max-width:600px;">
+  <aithe-desc title="Small Size" size="sm" border>
+    <aithe-desc-item label="Name">Zhang Wei</aithe-desc-item>
+    <aithe-desc-item label="Age">28</aithe-desc-item>
+    <aithe-desc-item label="City">Beijing</aithe-desc-item>
+  </aithe-desc>
+  <aithe-desc title="Medium Size (Default)" size="md" border>
+    <aithe-desc-item label="Name">Zhang Wei</aithe-desc-item>
+    <aithe-desc-item label="Age">28</aithe-desc-item>
+    <aithe-desc-item label="City">Beijing</aithe-desc-item>
+  </aithe-desc>
+  <aithe-desc title="Large Size" size="lg" border>
+    <aithe-desc-item label="Name">Zhang Wei</aithe-desc-item>
+    <aithe-desc-item label="Age">28</aithe-desc-item>
+    <aithe-desc-item label="City">Beijing</aithe-desc-item>
+  </aithe-desc>
+</aithe-space>`,
+            previewHeight: '420px',
+        },
+        {
+            title: 'Description List — Vertical',
+            description: 'Vertical direction layout with border.',
+            code: `<aithe-desc title="User Info" direction="vertical" border style="max-width:600px;">
+  <aithe-desc-item label="Name">Zhang Wei</aithe-desc-item>
+  <aithe-desc-item label="Age">28</aithe-desc-item>
+  <aithe-desc-item label="Email">zhangwei@example.com</aithe-desc-item>
+  <aithe-desc-item label="Address">No. 123, Chang'an Avenue, Beijing</aithe-desc-item>
+</aithe-desc>`,
+            previewHeight: '280px',
+        },
+        {
+            title: 'Description List — Column Config',
+            description: '2-column and 4-column layout comparison.',
+            code: `<aithe-space direction="vertical" size="16" style="max-width:600px;">
+  <aithe-desc title="2 Columns" column="${2}" border>
+    <aithe-desc-item label="Name">Zhang Wei</aithe-desc-item>
+    <aithe-desc-item label="Age">28</aithe-desc-item>
+    <aithe-desc-item label="Phone">+86 138 0000 1234</aithe-desc-item>
+    <aithe-desc-item label="Email">zhangwei@example.com</aithe-desc-item>
+  </aithe-desc>
+  <aithe-desc title="4 Columns" column="${4}" border>
+    <aithe-desc-item label="Name">Zhang</aithe-desc-item>
+    <aithe-desc-item label="Age">28</aithe-desc-item>
+    <aithe-desc-item label="Gender">Male</aithe-desc-item>
+    <aithe-desc-item label="City">Beijing</aithe-desc-item>
+  </aithe-desc>
+</aithe-space>`,
+            previewHeight: '360px',
+        },
+        {
+            title: 'Description List — With Extra',
+            description: 'With extra action slot in header.',
+            code: `<aithe-desc title="User Profile" border style="max-width:600px;">
+  <span slot="extra"><aithe-button size="sm" variant="primary">Edit</aithe-button></span>
+  <aithe-desc-item label="Name">Zhang Wei</aithe-desc-item>
+  <aithe-desc-item label="Age">28</aithe-desc-item>
+  <aithe-desc-item label="Email">zhangwei@example.com</aithe-desc-item>
+  <aithe-desc-item label="Role">Senior Engineer</aithe-desc-item>
+</aithe-desc>`,
+            previewHeight: '260px',
+        },
+        {
+            title: 'Description List — Global Label Width',
+            description: 'Use label-width on desc to align all labels uniformly.',
+            code: `<aithe-desc title="Server Config" border label-width="120px" style="max-width:600px;">
+  <aithe-desc-item label="Server Name">Production-Web-01</aithe-desc-item>
+  <aithe-desc-item label="IP Address">192.168.1.100</aithe-desc-item>
+  <aithe-desc-item label="OS">Ubuntu 22.04 LTS</aithe-desc-item>
+  <aithe-desc-item label="CPU">Intel Xeon 8C/16T</aithe-desc-item>
+  <aithe-desc-item label="Memory">64 GB DDR5</aithe-desc-item>
+  <aithe-desc-item label="Disk">2 TB NVMe SSD</aithe-desc-item>
+</aithe-desc>`,
+            previewHeight: '340px',
+        },
+        {
+            title: 'Description List — Row Span',
+            description: 'Rowspan merges an item across multiple rows.',
+            code: `<aithe-desc title="User Profile" column="2" border style="max-width:600px;">
+  <aithe-desc-item label="Name">Zhang Wei</aithe-desc-item>
+  <aithe-desc-item label="Age">28</aithe-desc-item>
+  <aithe-desc-item label="Gender">Male</aithe-desc-item>
+  <aithe-desc-item label="Phone">+86 138 0000 1234</aithe-desc-item>
+  <aithe-desc-item label="Email">zhangwei@example.com</aithe-desc-item>
+  <aithe-desc-item label="Address" span="${2}" rowspan="${2}">No. 123, Chang'an Avenue, Haidian District, Beijing</aithe-desc-item>
+  <aithe-desc-item label="Position">Senior Engineer</aithe-desc-item>
+  <aithe-desc-item label="Department">Frontend Team</aithe-desc-item>
+</aithe-desc>`,
+            previewHeight: '340px',
+        },
+        {
+            title: 'Description List — Hide Title',
+            description: 'Title header hidden with show-title="false".',
+            code: `<aithe-desc title="Hidden" show-title="false" border style="max-width:600px;">
+  <aithe-desc-item label="Name">Zhang Wei</aithe-desc-item>
+  <aithe-desc-item label="Age">28</aithe-desc-item>
+  <aithe-desc-item label="Email">zhangwei@example.com</aithe-desc-item>
+  <aithe-desc-item label="Phone">+86 138 0000 1234</aithe-desc-item>
+</aithe-desc>`,
+            previewHeight: '200px',
+        },
+        {
+            title: 'Description List — Max Rows',
+            description: 'Only 2 rows visible, rest hidden.',
+            code: `<aithe-desc title="Limited View" border max-rows="${2}" style="max-width:600px;">
+  <aithe-desc-item label="Name">Zhang Wei</aithe-desc-item>
+  <aithe-desc-item label="Age">28</aithe-desc-item>
+  <aithe-desc-item label="Email">zhangwei@example.com</aithe-desc-item>
+  <aithe-desc-item label="Phone">+86 138 0000 1234</aithe-desc-item>
+  <aithe-desc-item label="Address">No. 123, Chang'an Avenue, Beijing</aithe-desc-item>
+</aithe-desc>`,
+            previewHeight: '200px',
+        },
+    ],
+};

package/dist/apps/demo/pages/feedback.js

@@ -0,0 +1,94 @@
+import { t } from '../../../styles/i18n';
+export const feedbackPage = {
+    key: 'feedback',
+    title: () => t('demo.feedback.title'),
+    description: () => t('demo.feedback.description'),
+    examples: [
+        {
+            title: () => t('demo.feedback.dialogModalDrawer.title'),
+            description: () => t('demo.feedback.dialogModalDrawer.description'),
+            code: `<div style="display:flex;gap:12px;flex-wrap:wrap;">
+  <aithe-button id="open-dialog" type="default">Open Dialog</aithe-button>
+  <aithe-button id="open-modal" type="primary">Open Modal</aithe-button>
+  <aithe-button id="open-drawer" type="dashed">Open Drawer</aithe-button>
+</div>
+<aithe-dialog id="demo-dialog" title="Discard changes?" icon="warning">This action will remove unsaved prompt edits.</aithe-dialog>
+<aithe-modal id="demo-modal" title="Aithe Release Notes" icon="info">
+  <p style="margin:0;color:var(--aithe-color-text-muted);">The new build ships categorized exports and a live demo site.</p>
+</aithe-modal>
+<aithe-drawer id="demo-drawer" title="Workspace Settings" icon="settings">
+  <p style="margin:0;color:var(--aithe-color-text-muted);">Configure theme, density and deployment defaults.</p>
+</aithe-drawer>`,
+            setup: (root) => {
+                const dialog = root.querySelector('#demo-dialog');
+                const modal = root.querySelector('#demo-modal');
+                const drawer = root.querySelector('#demo-drawer');
+                root.querySelector('#open-dialog')?.addEventListener('click', () => {
+                    dialog.visible = true;
+                });
+                root.querySelector('#open-modal')?.addEventListener('click', () => {
+                    modal.open = true;
+                });
+                root.querySelector('#open-drawer')?.addEventListener('click', () => {
+                    drawer.open = true;
+                });
+            },
+            previewHeight: '240px',
+        },
+        {
+            title: () => t('demo.feedback.tooltipPopover.title'),
+            description: () => t('demo.feedback.tooltipPopover.description'),
+            code: `<div style="display:flex;gap:16px;align-items:center;flex-wrap:wrap;">
+  <aithe-tooltip content="Realtime token usage insights" title="Token usage tooltip" icon="info">
+    <aithe-button type="default">Tooltip</aithe-button>
+  </aithe-tooltip>
+  <aithe-popover>
+    <aithe-button type="default">Popover</aithe-button>
+    <div slot="content" style="display:grid;gap:8px;">
+      <strong>Assistant Context</strong>
+      <span style="color:var(--aithe-color-text-muted);">Aithe UI keeps tokens and themes isolated.</span>
+    </div>
+  </aithe-popover>
+
+</div>`,
+        },
+        {
+            title: () => t('demo.feedback.alertLoading.title'),
+            description: () => t('demo.feedback.alertLoading.description'),
+            code: `<div style="display:grid;gap:16px;">
+  <aithe-alert type="warning" title="Release Candidate" icon="warning" closable>
+    Accessibility review is still in progress.
+  </aithe-alert>
+  <div style="position:relative;min-height:160px;">
+    <aithe-loading spinning tip="Rebuilding component registry...">
+      <aithe-card style="display:block;height:160px;">Content remains mounted below the overlay.</aithe-card>
+    </aithe-loading>
+  </div>
+</div>`,
+            previewHeight: '280px',
+        },
+        {
+            title: () => t('demo.feedback.toastNotification.title'),
+            description: () => t('demo.feedback.toastNotification.description'),
+            code: `<div style="display:flex;gap:12px;flex-wrap:wrap;">
+  <aithe-button id="show-toast" type="primary">Show Toast</aithe-button>
+  <aithe-button id="show-notice" type="default">Show Notification</aithe-button>
+</div>
+<aithe-toast id="demo-toast" title="Build Status" icon="check" content="" duration="1800"></aithe-toast>
+<aithe-notification id="demo-notification" title="Deployment" icon="rocket" content="" duration="2200"></aithe-notification>`,
+            setup: (root) => {
+                const toast = root.querySelector('#demo-toast');
+                const notice = root.querySelector('#demo-notification');
+                root.querySelector('#show-toast')?.addEventListener('click', () => {
+                    toast.content = 'Build finished successfully.';
+                    toast.visible = true;
+                });
+                root.querySelector('#show-notice')?.addEventListener('click', () => {
+                    notice.content = 'The demo site theme has been synchronized.';
+                    notice.open = true;
+                });
+            },
+            previewHeight: '180px',
+        },
+    ],
+};

package/dist/apps/demo/pages/form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../../src/apps/demo/pages/form.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAG1C,eAAO,MAAM,QAAQ,EAAE,QAiGtB,CAAC"}
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../../src/apps/demo/pages/form.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAG1C,eAAO,MAAM,QAAQ,EAAE,QAqHtB,CAAC"}

package/dist/apps/demo/pages/form.js

@@ -0,0 +1,119 @@
+import { t } from '../../../styles/i18n';
+export const formPage = {
+    key: 'form',
+    title: () => t('demo.form.title'),
+    description: () => t('demo.form.description'),
+    examples: [
+        {
+            title: () => t('demo.form.checkboxRadio.title'),
+            description: () => t('demo.form.checkboxRadio.description'),
+            code: `<div style="display:grid;gap:20px;">
+  <aithe-checkbox-group value='["components"]'>
+    <aithe-checkbox value="design">Design Tokens</aithe-checkbox>
+    <aithe-checkbox value="components">Components</aithe-checkbox>
+    <aithe-checkbox value="docs">Docs</aithe-checkbox>
+  </aithe-checkbox-group>
+  <aithe-radio-group value="beta">
+    <aithe-radio value="alpha">Alpha</aithe-radio>
+    <aithe-radio value="beta">Beta</aithe-radio>
+    <aithe-radio value="ga">GA</aithe-radio>
+  </aithe-radio-group>
+</div>`,
+        },
+        {
+            title: () => t('demo.form.selectCombobox.title'),
+            description: () => t('demo.form.selectCombobox.description'),
+            code: `<div style="display:grid;gap:16px;max-width:420px;">
+  <aithe-select
+    title="Model selector"
+    icon="search"
+    placeholder="Choose a model"
+    clearable
+    searchable
+     options='[{"label":"GPT-5.4","id":"gpt-5.4","icon":"sparkles","description":"Frontier reasoning model"},{"label":"GPT-5.3 Codex","id":"gpt-5.3-codex","icon":"code","description":"Agentic coding model"},{"label":"Vision Worker","id":"vision-worker","icon":"eye","description":"Image parsing runtime","intent":"warning"}]'
+  ></aithe-select>
+  <aithe-combobox
+    title="Preset search"
+    icon="search"
+    placeholder="Search presets"
+     options='[{"label":"A/B Test","id":"ab-test","icon":"barChart"},{"label":"Assistant Shell","id":"assistant-shell","icon":"terminal"},{"label":"Retrieval QA","id":"retrieval-qa","icon":"search","intent":"primary"},{"label":"Workflow Editor","id":"workflow-editor","icon":"edit","intent":"warning"}]'
+  ></aithe-combobox>
+  <aithe-switch checked></aithe-switch>
+</div>`,
+        },
+        {
+            title: () => 'Grouped Select & Combobox',
+            description: () => 'Options with a `group` field are automatically grouped under a header. 带 group 字段的选项会自动按分组标题展示。',
+            code: `<div style="display:grid;gap:16px;max-width:420px;">
+  <aithe-select
+    title="Region selector"
+    icon="globe"
+    placeholder="Choose a city"
+    clearable
+    searchable
+    options='[{"label":"上海","id":"sh","group":"华东"},{"label":"杭州","id":"hz","group":"华东"},{"label":"北京","id":"bj","group":"华北"},{"label":"天津","id":"tj","group":"华北"},{"label":"广州","id":"gz","group":"华南"},{"label":"深圳","id":"sz","group":"华南"}]'
+  ></aithe-select>
+  <aithe-combobox
+    title="Preset search"
+    icon="search"
+    placeholder="Search presets"
+    options='[{"label":"A/B Test","id":"ab-test","group":"Analytics","icon":"barChart"},{"label":"Funnel","id":"funnel","group":"Analytics","icon":"filter"},{"label":"Assistant Shell","id":"assistant-shell","group":"Automation","icon":"terminal"},{"label":"Workflow Editor","id":"workflow-editor","group":"Automation","icon":"edit"}]'
+  ></aithe-combobox>
+</div>`,
+        },
+        {
+            title: () => t('demo.form.pickers.title'),
+            description: () => t('demo.form.pickers.description'),
+            code: `<div style="display:flex;gap:16px;flex-wrap:wrap;align-items:center;">
+  <aithe-color-picker alpha></aithe-color-picker>
+  <aithe-date-picker value="2026-05-08"></aithe-date-picker>
+  <aithe-time-picker value="10:30"></aithe-time-picker>
+</div>`,
+        },
+        {
+            title: () => t('demo.form.sliderRate.title'),
+            description: () => t('demo.form.sliderRate.description'),
+            code: `<div style="display:grid;gap:16px;max-width:360px;">
+  <aithe-slider value="64"></aithe-slider>
+  <aithe-slider range value="24,76"></aithe-slider>
+  <aithe-rate allow-half value="3.5"></aithe-rate>
+</div>`,
+        },
+        {
+            title: () => t('demo.form.formItem.title'),
+            description: () => t('demo.form.formItem.description'),
+            code: `<aithe-form id="demo-form">
+  <aithe-form-item label="Project Name" required title="Enter project name" icon="folder">
+    <aithe-input name="projectName" placeholder="Aithe UI"></aithe-input>
+  </aithe-form-item>
+  <aithe-form-item label="Owner Email" required title="Enter owner email" icon="mail">
+    <aithe-input name="ownerEmail" type="email" placeholder="owner@company.com"></aithe-input>
+  </aithe-form-item>
+  <aithe-button id="demo-submit" type="primary">Submit Form</aithe-button>
+</aithe-form>`,
+            setup: (root) => {
+                const button = root.querySelector('aithe-button');
+                const form = root.querySelector('aithe-form');
+                button?.addEventListener('click', () => {
+                    form.validate?.();
+                    form?.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
+                });
+            },
+            previewHeight: '260px',
+        },
+        {
+            title: () => t('demo.form.uploadTransfer.title'),
+            description: () => t('demo.form.uploadTransfer.description'),
+            code: `<div style="display:grid;gap:20px;">
+  <aithe-upload accept=".png,.jpg,.svg">Upload Assets</aithe-upload>
+  <aithe-transfer
+    searchable
+    titles='["Available Blocks","Enabled Blocks"]'
+     data='[{"label":"Button","id":"button"},{"label":"Input","id":"input"},{"label":"Modal","id":"modal"},{"label":"Table","id":"table"}]'
+    value='["button","modal"]'
+  ></aithe-transfer>
+</div>`,
+            previewHeight: '420px',
+        },
+    ],
+};

package/dist/apps/demo/pages/layout.js

@@ -0,0 +1,74 @@
+import { t } from '../../../styles/i18n';
+export const layoutPage = {
+    key: 'layout',
+    title: () => t('demo.layout.title'),
+    description: () => t('demo.layout.description'),
+    examples: [
+        {
+            title: () => t('demo.layout.containerFlex.title'),
+            description: () => t('demo.layout.containerFlex.description'),
+            code: `<aithe-container direction="column" gap="16">
+  <aithe-flex justify="space-between" align="center" gap="16">
+    <div style="font-weight:600;">Aithe Workspace</div>
+    <aithe-space size="8" direction="horizontal">
+      <aithe-tag>US-East</aithe-tag>
+      <aithe-tag variant="success">Healthy</aithe-tag>
+    </aithe-space>
+  </aithe-flex>
+  <aithe-space size="12" direction="vertical">
+    <aithe-card>Prompt Registry</aithe-card>
+    <aithe-card>Model Routing</aithe-card>
+    <aithe-card>Guardrails</aithe-card>
+  </aithe-space>
+</aithe-container>`,
+        },
+        {
+            title: () => t('demo.layout.rowCol.title'),
+            description: () => t('demo.layout.rowCol.description'),
+            code: `<aithe-row gutter="16">
+  <aithe-col span="12"><aithe-card>Span 12</aithe-card></aithe-col>
+  <aithe-col span="12"><aithe-card>Span 12</aithe-card></aithe-col>
+  <aithe-col span="8"><aithe-card>Span 8</aithe-card></aithe-col>
+  <aithe-col span="8"><aithe-card>Span 8</aithe-card></aithe-col>
+  <aithe-col span="8"><aithe-card>Span 8</aithe-card></aithe-col>
+</aithe-row>`,
+        },
+        {
+            title: () => t('demo.layout.collapse.title'),
+            description: () => t('demo.layout.collapse.description'),
+            code: `<aithe-collapse active-key="api">
+  <aithe-collapse-item name="api" title="API Design" icon="settings">Stable, event-based and theme-driven.</aithe-collapse-item>
+  <aithe-collapse-item name="theme" title="Theme System" icon="star">4 official themes and unlimited extensions.</aithe-collapse-item>
+</aithe-collapse>`,
+            previewHeight: '320px',
+        },
+        {
+            title: () => t('demo.layout.affix.title'),
+            description: () => t('demo.layout.affix.description'),
+            code: `<div class="affix-scroll" style="height:280px;overflow:auto;border:1px solid var(--aithe-color-border);border-radius:20px;padding:16px;background:var(--aithe-color-surface-elevated);">
+  <aithe-affix offset-top="16" target=".affix-scroll">
+    <aithe-tag variant="primary">Pinned Summary</aithe-tag>
+  </aithe-affix>
+  <div style="height:560px;padding-top:48px;color:var(--aithe-color-text-muted);">
+    Scroll this panel to see the summary remain attached near the top edge.
+  </div>
+</div>`,
+            previewHeight: '320px',
+        },
+        {
+            title: () => t('demo.layout.header.title'),
+            description: () => t('demo.layout.header.description'),
+            code: `<aithe-header brand="Aithe UI" slogan="Enterprise Design System" show-locale-switch show-theme-switch>
+  <aithe-space slot="center" size="16" direction="horizontal">
+    <aithe-tag variant="primary">Home</aithe-tag>
+    <aithe-tag>Components</aithe-tag>
+    <aithe-tag>Docs</aithe-tag>
+  </aithe-space>
+  <aithe-locale-switch slot="locale-switch"></aithe-locale-switch>
+  <aithe-theme-picker slot="theme-switch"></aithe-theme-picker>
+  <aithe-avatar slot="right" text="U"></aithe-avatar>
+</aithe-header>`,
+            previewHeight: '120px',
+        },
+    ],
+};

package/dist/apps/demo/pages/navigation.js

@@ -0,0 +1,54 @@
+import { t } from '../../../styles/i18n';
+export const navigationPage = {
+    key: 'navigation',
+    title: () => t('demo.navigation.title'),
+    description: () => t('demo.navigation.description'),
+    examples: [
+        {
+            title: () => t('demo.navigation.menu.title'),
+            description: () => t('demo.navigation.menu.description'),
+            code: `<aithe-menu active="overview" style="max-width:280px;">
+  <aithe-menu-item name="overview" title="Project overview" icon="home">Overview</aithe-menu-item>
+  <aithe-sub-menu name="assets" title="Assets" icon="star" open>
+    <aithe-menu-item name="library" title="Component library" icon="box">Component Library</aithe-menu-item>
+    <aithe-menu-item name="tokens" title="Design tokens" icon="palette">Design Tokens</aithe-menu-item>
+  </aithe-sub-menu>
+  <aithe-menu-item name="governance" title="Governance rules" icon="shield">Governance</aithe-menu-item>
+</aithe-menu>`,
+            previewHeight: '260px',
+        },
+        {
+            title: () => t('demo.navigation.breadcrumb.title'),
+            description: () => t('demo.navigation.breadcrumb.description'),
+            code: `<aithe-breadcrumb separator="/">
+  <aithe-breadcrumb-item href="#">Workspace</aithe-breadcrumb-item>
+  <aithe-breadcrumb-item href="#">Aithe UI</aithe-breadcrumb-item>
+  <aithe-breadcrumb-item>Release Candidate</aithe-breadcrumb-item>
+</aithe-breadcrumb>`,
+        },
+        {
+            title: () => t('demo.navigation.steps.title'),
+            description: () => t('demo.navigation.steps.description'),
+            code: `<aithe-steps
+  current="1"
+  items='[
+    {"title":"Define","description":"Prompt and token system"},
+    {"title":"Implement","description":"Components and demo"},
+    {"title":"Release","description":"QA and package publish"}
+  ]'
+></aithe-steps>`,
+            previewHeight: '220px',
+        },
+        {
+            title: () => t('demo.navigation.backTop.title'),
+            description: () => t('demo.navigation.backTop.description'),
+            code: `<div class="backtop-scroll" style="position:relative;height:280px;overflow:auto;border:1px solid var(--aithe-color-border);border-radius:20px;padding:16px;background:var(--aithe-color-surface-elevated);">
+  <aithe-back-top target=".backtop-scroll" visibility-height="80"></aithe-back-top>
+  <div style="height:720px;color:var(--aithe-color-text-muted);">
+    This block intentionally creates vertical overflow inside the preview region.
+  </div>
+</div>`,
+            previewHeight: '320px',
+        },
+    ],
+};