@aithe/aithe-ui 26.2.2 → 26.3.1

package/dist/apps/api/demo-data.js

@@ -0,0 +1,965 @@
+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>
+`);
+const demoMap = {
+    'basic-button': {
+        demoCode: `<aithe-space size="16" direction="horizontal" wrap>
+  <aithe-button variant="primary" title="Submit form">Primary Action</aithe-button>
+  <aithe-button title="Default action">Default</aithe-button>
+  <aithe-button type="dashed">Dashed</aithe-button>
+  <aithe-button type="text">Text</aithe-button>
+  <aithe-button type="link">Link</aithe-button>
+  <aithe-button variant="primary" loading>Generating</aithe-button>
+  <aithe-button variant="danger">Delete</aithe-button>
+</aithe-space>`,
+    },
+    'basic-button-group': {
+        demoCode: `<aithe-button-group gap="12">
+  <aithe-button type="default">Cancel</aithe-button>
+  <aithe-button variant="primary">Save Workspace</aithe-button>
+</aithe-button-group>`,
+    },
+    'basic-icon': {
+        demoCode: `<style>
+  .icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;}
+  .icon-cell{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border:1px solid var(--aithe-color-border);border-radius:8px;background:var(--aithe-color-surface);cursor:default;transition:background .15s;}
+  .icon-cell:hover{background:var(--aithe-color-bg-subtle);}
+  .icon-name{font-size:11px;color:var(--aithe-color-text-muted);font-family:var(--aithe-font-family-mono);word-break:break-all;text-align:center;line-height:1.3;}
+</style>
+<div class="icon-grid">
+  <div class="icon-cell"><aithe-icon name="sparkles" size="20"></aithe-icon><span class="icon-name">sparkles</span></div>
+  <div class="icon-cell"><aithe-icon name="close" size="20"></aithe-icon><span class="icon-name">close</span></div>
+  <div class="icon-cell"><aithe-icon name="check" size="20"></aithe-icon><span class="icon-name">check</span></div>
+  <div class="icon-cell"><aithe-icon name="info" size="20"></aithe-icon><span class="icon-name">info</span></div>
+  <div class="icon-cell"><aithe-icon name="warning" size="20"></aithe-icon><span class="icon-name">warning</span></div>
+  <div class="icon-cell"><aithe-icon name="image" size="20"></aithe-icon><span class="icon-name">image</span></div>
+  <div class="icon-cell"><aithe-icon name="search" size="20"></aithe-icon><span class="icon-name">search</span></div>
+  <div class="icon-cell"><aithe-icon name="plus" size="20"></aithe-icon><span class="icon-name">plus</span></div>
+  <div class="icon-cell"><aithe-icon name="minus" size="20"></aithe-icon><span class="icon-name">minus</span></div>
+  <div class="icon-cell"><aithe-icon name="menu" size="20"></aithe-icon><span class="icon-name">menu</span></div>
+  <div class="icon-cell"><aithe-icon name="more" size="20"></aithe-icon><span class="icon-name">more</span></div>
+  <div class="icon-cell"><aithe-icon name="settings" size="20"></aithe-icon><span class="icon-name">settings</span></div>
+  <div class="icon-cell"><aithe-icon name="home" size="20"></aithe-icon><span class="icon-name">home</span></div>
+  <div class="icon-cell"><aithe-icon name="star" size="20"></aithe-icon><span class="icon-name">star</span></div>
+  <div class="icon-cell"><aithe-icon name="heart" size="20"></aithe-icon><span class="icon-name">heart</span></div>
+  <div class="icon-cell"><aithe-icon name="copy" size="20"></aithe-icon><span class="icon-name">copy</span></div>
+  <div class="icon-cell"><aithe-icon name="download" size="20"></aithe-icon><span class="icon-name">download</span></div>
+  <div class="icon-cell"><aithe-icon name="upload" size="20"></aithe-icon><span class="icon-name">upload</span></div>
+  <div class="icon-cell"><aithe-icon name="share" size="20"></aithe-icon><span class="icon-name">share</span></div>
+  <div class="icon-cell"><aithe-icon name="link" size="20"></aithe-icon><span class="icon-name">link</span></div>
+  <div class="icon-cell"><aithe-icon name="external" size="20"></aithe-icon><span class="icon-name">external</span></div>
+  <div class="icon-cell"><aithe-icon name="refresh" size="20"></aithe-icon><span class="icon-name">refresh</span></div>
+  <div class="icon-cell"><aithe-icon name="edit" size="20"></aithe-icon><span class="icon-name">edit</span></div>
+  <div class="icon-cell"><aithe-icon name="trash" size="20"></aithe-icon><span class="icon-name">trash</span></div>
+  <div class="icon-cell"><aithe-icon name="filter" size="20"></aithe-icon><span class="icon-name">filter</span></div>
+  <div class="icon-cell"><aithe-icon name="sort" size="20"></aithe-icon><span class="icon-name">sort</span></div>
+  <div class="icon-cell"><aithe-icon name="lock" size="20"></aithe-icon><span class="icon-name">lock</span></div>
+  <div class="icon-cell"><aithe-icon name="unlock" size="20"></aithe-icon><span class="icon-name">unlock</span></div>
+  <div class="icon-cell"><aithe-icon name="eye" size="20"></aithe-icon><span class="icon-name">eye</span></div>
+  <div class="icon-cell"><aithe-icon name="eyeOff" size="20"></aithe-icon><span class="icon-name">eyeOff</span></div>
+  <div class="icon-cell"><aithe-icon name="clock" size="20"></aithe-icon><span class="icon-name">clock</span></div>
+  <div class="icon-cell"><aithe-icon name="calendar" size="20"></aithe-icon><span class="icon-name">calendar</span></div>
+  <div class="icon-cell"><aithe-icon name="pin" size="20"></aithe-icon><span class="icon-name">pin</span></div>
+  <div class="icon-cell"><aithe-icon name="flag" size="20"></aithe-icon><span class="icon-name">flag</span></div>
+  <div class="icon-cell"><aithe-icon name="bookmark" size="20"></aithe-icon><span class="icon-name">bookmark</span></div>
+  <div class="icon-cell"><aithe-icon name="paperclip" size="20"></aithe-icon><span class="icon-name">paperclip</span></div>
+  <div class="icon-cell"><aithe-icon name="tag" size="20"></aithe-icon><span class="icon-name">tag</span></div>
+  <div class="icon-cell"><aithe-icon name="thumbUp" size="20"></aithe-icon><span class="icon-name">thumbUp</span></div>
+  <div class="icon-cell"><aithe-icon name="thumbDown" size="20"></aithe-icon><span class="icon-name">thumbDown</span></div>
+  <div class="icon-cell"><aithe-icon name="arrowUp" size="20"></aithe-icon><span class="icon-name">arrowUp</span></div>
+  <div class="icon-cell"><aithe-icon name="arrowDown" size="20"></aithe-icon><span class="icon-name">arrowDown</span></div>
+  <div class="icon-cell"><aithe-icon name="arrowLeft" size="20"></aithe-icon><span class="icon-name">arrowLeft</span></div>
+  <div class="icon-cell"><aithe-icon name="arrowRight" size="20"></aithe-icon><span class="icon-name">arrowRight</span></div>
+  <div class="icon-cell"><aithe-icon name="chevronUp" size="20"></aithe-icon><span class="icon-name">chevronUp</span></div>
+  <div class="icon-cell"><aithe-icon name="chevronDown" size="20"></aithe-icon><span class="icon-name">chevronDown</span></div>
+  <div class="icon-cell"><aithe-icon name="chevronLeft" size="20"></aithe-icon><span class="icon-name">chevronLeft</span></div>
+  <div class="icon-cell"><aithe-icon name="chevronRight" size="20"></aithe-icon><span class="icon-name">chevronRight</span></div>
+  <div class="icon-cell"><aithe-icon name="expand" size="20"></aithe-icon><span class="icon-name">expand</span></div>
+  <div class="icon-cell"><aithe-icon name="collapse" size="20"></aithe-icon><span class="icon-name">collapse</span></div>
+  <div class="icon-cell"><aithe-icon name="success" size="20" color="var(--aithe-success-6)"></aithe-icon><span class="icon-name">success</span></div>
+  <div class="icon-cell"><aithe-icon name="error" size="20" color="var(--aithe-danger-6)"></aithe-icon><span class="icon-name">error</span></div>
+  <div class="icon-cell"><aithe-icon name="question" size="20" color="var(--aithe-primary-6)"></aithe-icon><span class="icon-name">question</span></div>
+  <div class="icon-cell"><aithe-icon name="play" size="20"></aithe-icon><span class="icon-name">play</span></div>
+  <div class="icon-cell"><aithe-icon name="pause" size="20"></aithe-icon><span class="icon-name">pause</span></div>
+  <div class="icon-cell"><aithe-icon name="volume" size="20"></aithe-icon><span class="icon-name">volume</span></div>
+  <div class="icon-cell"><aithe-icon name="mute" size="20"></aithe-icon><span class="icon-name">mute</span></div>
+  <div class="icon-cell"><aithe-icon name="camera" size="20"></aithe-icon><span class="icon-name">camera</span></div>
+  <div class="icon-cell"><aithe-icon name="video" size="20"></aithe-icon><span class="icon-name">video</span></div>
+  <div class="icon-cell"><aithe-icon name="music" size="20"></aithe-icon><span class="icon-name">music</span></div>
+  <div class="icon-cell"><aithe-icon name="mail" size="20"></aithe-icon><span class="icon-name">mail</span></div>
+  <div class="icon-cell"><aithe-icon name="bell" size="20"></aithe-icon><span class="icon-name">bell</span></div>
+  <div class="icon-cell"><aithe-icon name="chat" size="20"></aithe-icon><span class="icon-name">chat</span></div>
+  <div class="icon-cell"><aithe-icon name="phone" size="20"></aithe-icon><span class="icon-name">phone</span></div>
+  <div class="icon-cell"><aithe-icon name="barChart" size="20"></aithe-icon><span class="icon-name">barChart</span></div>
+  <div class="icon-cell"><aithe-icon name="pieChart" size="20"></aithe-icon><span class="icon-name">pieChart</span></div>
+  <div class="icon-cell"><aithe-icon name="database" size="20"></aithe-icon><span class="icon-name">database</span></div>
+  <div class="icon-cell"><aithe-icon name="code" size="20"></aithe-icon><span class="icon-name">code</span></div>
+  <div class="icon-cell"><aithe-icon name="terminal" size="20"></aithe-icon><span class="icon-name">terminal</span></div>
+  <div class="icon-cell"><aithe-icon name="file" size="20"></aithe-icon><span class="icon-name">file</span></div>
+  <div class="icon-cell"><aithe-icon name="folder" size="20"></aithe-icon><span class="icon-name">folder</span></div>
+  <div class="icon-cell"><aithe-icon name="grid" size="20"></aithe-icon><span class="icon-name">grid</span></div>
+  <div class="icon-cell"><aithe-icon name="list" size="20"></aithe-icon><span class="icon-name">list</span></div>
+  <div class="icon-cell"><aithe-icon name="sidebar" size="20"></aithe-icon><span class="icon-name">sidebar</span></div>
+  <div class="icon-cell"><aithe-icon name="maximize" size="20"></aithe-icon><span class="icon-name">maximize</span></div>
+  <div class="icon-cell"><aithe-icon name="minimize" size="20"></aithe-icon><span class="icon-name">minimize</span></div>
+  <div class="icon-cell"><aithe-icon name="user" size="20"></aithe-icon><span class="icon-name">user</span></div>
+  <div class="icon-cell"><aithe-icon name="users" size="20"></aithe-icon><span class="icon-name">users</span></div>
+  <div class="icon-cell"><aithe-icon name="sun" size="20"></aithe-icon><span class="icon-name">sun</span></div>
+  <div class="icon-cell"><aithe-icon name="moon" size="20"></aithe-icon><span class="icon-name">moon</span></div>
+  <div class="icon-cell"><aithe-icon name="cloud" size="20"></aithe-icon><span class="icon-name">cloud</span></div>
+</div>
+<div style="display:flex;gap:16px;align-items:center;margin-top:16px;">
+  <aithe-icon name="sparkles" size="sm"></aithe-icon><span style="font-size:12px;color:var(--aithe-color-text-muted);">sm</span>
+  <aithe-icon name="sparkles" size="md"></aithe-icon><span style="font-size:12px;color:var(--aithe-color-text-muted);">md</span>
+  <aithe-icon name="sparkles" size="lg"></aithe-icon><span style="font-size:12px;color:var(--aithe-color-text-muted);">lg</span>
+  <aithe-icon name="sparkles" size="32px" color="var(--aithe-primary-6)"></aithe-icon><span style="font-size:12px;color:var(--aithe-color-text-muted);">32px</span>
+</div>`,
+        previewHeight: '520px',
+    },
+    'basic-input': {
+        demoCode: `<div style="display:grid;gap:16px;max-width:720px;">
+  <aithe-input placeholder="Search agents, prompts or datasets" clearable value="Aithe UI">
+    <span slot="prefix">⌕</span>
+    <span slot="suffix">⌘K</span>
+  </aithe-input>
+  <aithe-input type="email" placeholder="owner@company.com" status="success"></aithe-input>
+</div>`,
+    },
+    'basic-textarea': {
+        demoCode: `<aithe-textarea rows="4" placeholder="Describe the system message..."></aithe-textarea>`,
+    },
+    'basic-card': {
+        demoCode: `<aithe-space direction="vertical" size="16">
+  <aithe-card style="display:block;max-width:720px;" shadow="3" title="Model Output Summary" icon="sparkles">
+    <div style="display:grid;gap:12px;">
+      <p style="margin:0;color:var(--aithe-color-text-muted);">
+        This card uses the design token system and supports fluid content width.
+      </p>
+    </div>
+    <span slot="footer">Updated just now</span>
+  </aithe-card>
+  <aithe-card style="display:block;max-width:720px;" shadow="2" title="No Dividers" icon="file-text" divider="none">
+    <p style="margin:0;">divider="none" — no lines between sections.</p>
+    <span slot="footer">Footer without divider</span>
+  </aithe-card>
+</aithe-space>`,
+    },
+    'basic-badge': {
+        demoCode: `<aithe-badge value="128">
+  <aithe-button type="default">Queued Jobs</aithe-button>
+</aithe-badge>`,
+    },
+    'basic-tag': {
+        demoCode: `<aithe-space size="12" direction="horizontal" wrap>
+  <aithe-tag variant="primary">Inference</aithe-tag>
+  <aithe-tag variant="success">Stable</aithe-tag>
+  <aithe-tag variant="warning" closable>Reviewing</aithe-tag>
+  <aithe-tag variant="danger">Critical</aithe-tag>
+</aithe-space>`,
+    },
+    'basic-avatar': {
+        demoCode: `<aithe-space size="12" direction="horizontal">
+  <aithe-avatar text="AI"></aithe-avatar>
+  <aithe-avatar shape="square" text="ML"></aithe-avatar>
+  <aithe-avatar size="lg" text="SYS"></aithe-avatar>
+</aithe-space>`,
+    },
+    'basic-divider': {
+        demoCode: `<div style="display:grid;gap:20px;max-width:720px;">
+  <aithe-divider>System Modules</aithe-divider>
+  <div style="display:flex;gap:16px;align-items:center;">
+    <span>Retrieval</span>
+    <aithe-divider direction="vertical"></aithe-divider>
+    <span>Reasoning</span>
+    <aithe-divider direction="vertical"></aithe-divider>
+    <span>Delivery</span>
+  </div>
+</div>`,
+    },
+    'basic-empty': {
+        demoCode: `<aithe-empty text="No generated artifacts yet. Start by creating a workflow."></aithe-empty>`,
+        previewHeight: '220px',
+    },
+    'basic-chip': {
+        demoCode: `<aithe-space size="12" direction="horizontal" wrap>
+  <aithe-chip selected>Realtime</aithe-chip>
+  <aithe-chip closable>Vision</aithe-chip>
+</aithe-space>`,
+    },
+    'layout-container': {
+        demoCode: `<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>`,
+    },
+    'layout-row': {
+        demoCode: `<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>`,
+    },
+    'layout-col': {
+        demoCode: `<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-row>`,
+    },
+    'layout-flex': {
+        demoCode: `<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>`,
+    },
+    'layout-space': {
+        demoCode: `<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>`,
+    },
+    'layout-collapse': {
+        demoCode: `<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',
+    },
+    'layout-collapse-item': {
+        demoCode: `<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',
+    },
+    'data-timeline': {
+        demoCode: `<aithe-timeline
+   items='[{"content":"Design tokens published","timestamp":"09:00","variant":"primary"},{"content":"Demo routing completed","timestamp":"11:30","variant":"success"},{"content":"Accessibility audit pending","timestamp":"15:20","variant":"warning"}]'
+></aithe-timeline>`,
+        previewHeight: '260px',
+    },
+    'data-timeline-item': {
+        demoCode: `<aithe-timeline>
+  <aithe-timeline-item type="primary" timestamp="09:00">Design tokens published</aithe-timeline-item>
+  <aithe-timeline-item type="success" timestamp="11:30">Demo routing completed</aithe-timeline-item>
+</aithe-timeline>`,
+        previewHeight: '260px',
+    },
+    'layout-affix': {
+        demoCode: `<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',
+    },
+    'nav-menu': {
+        demoCode: `<aithe-menu active="overview" style="max-width:280px;">
+  <aithe-menu-item name="overview">Overview</aithe-menu-item>
+  <aithe-sub-menu name="assets" title="Assets" icon="star" open>
+    <aithe-menu-item name="library">Component Library</aithe-menu-item>
+    <aithe-menu-item name="tokens">Design Tokens</aithe-menu-item>
+  </aithe-sub-menu>
+  <aithe-menu-item name="governance">Governance</aithe-menu-item>
+</aithe-menu>`,
+        previewHeight: '260px',
+    },
+    'nav-menu-item': {
+        demoCode: `<aithe-menu active="overview" style="max-width:280px;">
+  <aithe-menu-item name="overview">Overview</aithe-menu-item>
+  <aithe-menu-item name="governance">Governance</aithe-menu-item>
+</aithe-menu>`,
+        previewHeight: '260px',
+    },
+    'nav-sub-menu': {
+        demoCode: `<aithe-menu active="library" style="max-width:280px;">
+  <aithe-sub-menu name="assets" title="Assets" icon="star" open>
+    <aithe-menu-item name="library">Component Library</aithe-menu-item>
+    <aithe-menu-item name="tokens">Design Tokens</aithe-menu-item>
+  </aithe-sub-menu>
+</aithe-menu>`,
+        previewHeight: '260px',
+    },
+    'nav-breadcrumb': {
+        demoCode: `<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>`,
+    },
+    'nav-breadcrumb-item': {
+        demoCode: `<aithe-breadcrumb separator="/">
+  <aithe-breadcrumb-item href="#">Workspace</aithe-breadcrumb-item>
+  <aithe-breadcrumb-item>Current Page</aithe-breadcrumb-item>
+</aithe-breadcrumb>`,
+    },
+    'nav-steps': {
+        demoCode: `<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',
+    },
+    'nav-back-top': {
+        demoCode: `<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',
+    },
+    'form-checkbox': {
+        demoCode: `<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>`,
+    },
+    'form-checkbox-group': {
+        demoCode: `<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>`,
+    },
+    'form-radio': {
+        demoCode: `<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>`,
+    },
+    'form-radio-group': {
+        demoCode: `<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>`,
+    },
+    'form-select': {
+        demoCode: `<aithe-select
+  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","variant":"warning"}]'
+></aithe-select>`,
+    },
+    'form-switch': {
+        demoCode: `<aithe-switch checked></aithe-switch>`,
+    },
+    'form-color-picker': {
+        demoCode: `<aithe-color-picker alpha></aithe-color-picker>`,
+    },
+    'form-combobox': {
+        demoCode: `<aithe-combobox
+  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","variant":"primary"},{"label":"Workflow Editor","id":"workflow-editor","icon":"edit","variant":"warning"}]'
+></aithe-combobox>`,
+    },
+    'form-date-picker': {
+        demoCode: `<aithe-date-picker value="2026-05-08"></aithe-date-picker>`,
+    },
+    'form-time-picker': {
+        demoCode: `<aithe-time-picker value="10:30"></aithe-time-picker>`,
+    },
+    'form-slider': {
+        demoCode: `<div style="display:grid;gap:16px;max-width:360px;">
+  <aithe-slider value="64"></aithe-slider>
+  <aithe-slider range value="24,76"></aithe-slider>
+</div>`,
+    },
+    'form-rate': {
+        demoCode: `<aithe-rate allow-half value="3.5"></aithe-rate>`,
+    },
+    'form-form': {
+        demoCode: `<aithe-form id="demo-form">
+  <aithe-form-item label="Project Name" required>
+    <aithe-input name="projectName" placeholder="Aithe UI"></aithe-input>
+  </aithe-form-item>
+  <aithe-form-item label="Owner Email" required>
+    <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>`,
+        demoSetup: (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',
+    },
+    'form-form-item': {
+        demoCode: `<aithe-form>
+  <aithe-form-item label="Project Name" required>
+    <aithe-input name="projectName" placeholder="Aithe UI"></aithe-input>
+  </aithe-form-item>
+</aithe-form>`,
+    },
+    'form-upload': {
+        demoCode: `<aithe-upload accept=".png,.jpg,.svg">Upload Assets</aithe-upload>`,
+    },
+    'form-transfer': {
+        demoCode: `<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>`,
+        previewHeight: '420px',
+    },
+    'form-autoform': {
+        demoCode: `<aithe-autoform
+  fields='[
+    {"name":"username","type":"input","label":"Username","icon":"user","required":true,"message":"Username is required","placeholder":"Enter username"},
+    {"name":"email","type":"input","label":"Email","tooltip":"Your work email","required":true,"inputType":"email","pattern":"^[^\\\\s@]+@[^\\\\s@]+\\\\.[^\\\\s@]+$","message":"Invalid email format","placeholder":"you@company.com"},
+    {"name":"role","type":"select","label":"Role","options":"[{\\"label\\":\\"Admin\\",\\"id\\":\\"admin\\"},{\\"label\\":\\"Editor\\",\\"id\\":\\"editor\\"},{\\"label\\":\\"Viewer\\",\\"id\\":\\"viewer\\"}]","dft":"viewer"},
+    {"name":"notifications","type":"switch","label":"Notifications","dft":"true"}
+  ]'
+></aithe-autoform>`,
+        previewHeight: '520px',
+    },
+    'fb-dialog': {
+        demoCode: `<div style="display:flex;gap:12px;flex-wrap:wrap;">
+  <aithe-button id="open-dialog" type="default">Open Dialog</aithe-button>
+</div>
+<aithe-dialog id="demo-dialog" title="Discard changes?">This action will remove unsaved prompt edits.</aithe-dialog>`,
+        demoSetup: (root) => {
+            const dialog = root.querySelector('#demo-dialog');
+            root.querySelector('#open-dialog')?.addEventListener('click', () => {
+                dialog.visible = true;
+            });
+        },
+        previewHeight: '240px',
+    },
+    'fb-modal': {
+        demoCode: `<div style="display:flex;gap:12px;flex-wrap:wrap;">
+  <aithe-button id="open-modal" type="primary">Open Modal</aithe-button>
+</div>
+<aithe-modal id="demo-modal" title="Aithe Release Notes">
+  <p style="margin:0;color:var(--aithe-color-text-muted);">The new build ships categorized exports and a live demo site.</p>
+</aithe-modal>`,
+        demoSetup: (root) => {
+            const modal = root.querySelector('#demo-modal');
+            root.querySelector('#open-modal')?.addEventListener('click', () => {
+                modal.open = true;
+            });
+        },
+        previewHeight: '240px',
+    },
+    'fb-drawer': {
+        demoCode: `<div style="display:flex;gap:12px;flex-wrap:wrap;">
+  <aithe-button id="open-drawer" type="dashed">Open Drawer</aithe-button>
+</div>
+<aithe-drawer id="demo-drawer" title="Workspace Settings">
+  <p style="margin:0;color:var(--aithe-color-text-muted);">Configure theme, density and deployment defaults.</p>
+</aithe-drawer>`,
+        demoSetup: (root) => {
+            const drawer = root.querySelector('#demo-drawer');
+            root.querySelector('#open-drawer')?.addEventListener('click', () => {
+                drawer.open = true;
+            });
+        },
+        previewHeight: '240px',
+    },
+    'fb-tooltip': {
+        demoCode: `<aithe-tooltip content="Realtime token usage insights">
+  <aithe-button type="default">Tooltip</aithe-button>
+</aithe-tooltip>`,
+    },
+    'fb-popover': {
+        demoCode: `<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>`,
+    },
+    'data-dropdown': {
+        demoCode: `<aithe-dropdown
+      items='[{"label":"Open playground","id":"playground","icon":"play"},{"label":"Themes","id":"themes","icon":"palette","children":[{"label":"Light","id":"light"},{"label":"Dark","id":"dark"},{"label":"Blue","id":"blue"}]},{"type":"divider","label":"","id":"divider"},{"label":"Delete workspace","id":"delete","icon":"trash","variant":"danger"}]'
+>
+  <aithe-button type="default">Dropdown</aithe-button>
+</aithe-dropdown>`,
+    },
+    'fb-toast': {
+        demoCode: `<div style="display:flex;gap:12px;flex-wrap:wrap;">
+  <aithe-button id="show-toast" type="primary">Show Toast</aithe-button>
+</div>
+<aithe-toast id="demo-toast" content="" duration="1800"></aithe-toast>`,
+        demoSetup: (root) => {
+            const toast = root.querySelector('#demo-toast');
+            root.querySelector('#show-toast')?.addEventListener('click', () => {
+                toast.content = 'Build finished successfully.';
+                toast.visible = true;
+            });
+        },
+        previewHeight: '180px',
+    },
+    'fb-alert': {
+        demoCode: `<aithe-alert type="warning" title="Release Candidate" closable>
+  Accessibility review is still in progress.
+</aithe-alert>`,
+    },
+    'fb-notification': {
+        demoCode: `<div style="display:flex;gap:12px;flex-wrap:wrap;">
+  <aithe-button id="show-notice" type="default">Show Notification</aithe-button>
+</div>
+<aithe-notification id="demo-notification" title="Deployment" content="" duration="2200"></aithe-notification>`,
+        demoSetup: (root) => {
+            const notice = root.querySelector('#demo-notification');
+            root.querySelector('#show-notice')?.addEventListener('click', () => {
+                notice.content = 'The demo site theme has been synchronized.';
+                notice.open = true;
+            });
+        },
+        previewHeight: '180px',
+    },
+    'fb-loading': {
+        demoCode: `<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>`,
+        previewHeight: '280px',
+    },
+    'data-table': {
+        demoCode: `<aithe-table
+  striped
+  selectable="multi"
+  .selectionSet={selectionSet}
+   columns='[{"id":"name","title":"Module","icon":"folder","sortable":true},{"id":"owner","title":"Owner"},{"id":"status","title":"Status","variant":"success","sortable":true}]'
+  data='[{"id":1,"name":"Theme Engine","owner":"Design Systems","status":"Ready"},{"id":2,"name":"Component API","owner":"Frontend Platform","status":"Review"},{"id":3,"name":"Demo Router","owner":"Experience Team","status":"Ready"}]'
+></aithe-table>
+
+<script>
+  const selectionSet = new Set();
+</script>`,
+        previewHeight: '320px',
+    },
+    'data-table-column': {
+        demoCode: `<aithe-table
+  striped
+  data='[{"id":1,"name":"Theme Engine","owner":"Design Systems","status":"Ready"},{"id":2,"name":"Component API","owner":"Frontend Platform","status":"Review"},{"id":3,"name":"Demo Router","owner":"Experience Team","status":"Ready"}]'
+>
+   <aithe-table-column id="name" title="Module" icon="folder" sortable></aithe-table-column>
+  <aithe-table-column id="owner" title="Owner"></aithe-table-column>
+  <aithe-table-column id="status" title="Status" variant="success"></aithe-table-column>
+</aithe-table>`,
+        previewHeight: '320px',
+    },
+    'data-tabs': {
+        demoCode: `<aithe-tabs type="card" active-key="tokens" max-visible-tabs="3">
+  <aithe-tab-pane tab-id="tokens" label="Tokens" icon="palette">Theme tokens and semantic scales.</aithe-tab-pane>
+  <aithe-tab-pane tab-id="components" label="Components" icon="box">Enterprise-ready component catalog.</aithe-tab-pane>
+  <aithe-tab-pane tab-id="demo" label="Demo Site" icon="play">Sidebar routing and live editing.</aithe-tab-pane>
+  <aithe-tab-pane tab-id="docs" label="Documentation" icon="file">API documentation.</aithe-tab-pane>
+  <span slot="extra">
+    <aithe-button type="primary" size="small">Action</aithe-button>
+  </span>
+</aithe-tabs>`,
+        previewHeight: '220px',
+    },
+    'data-tab-pane': {
+        demoCode: `<aithe-tab-group type="card" active-key="tokens">
+   <aithe-tab-pane tab-id="tokens" label="Tokens">Theme tokens and semantic scales.</aithe-tab-pane>
+  <aithe-tab-pane tab-id="components" label="Components">Enterprise-ready component catalog.</aithe-tab-pane>
+</aithe-tab-group>`,
+        previewHeight: '220px',
+    },
+    'data-tree': {
+        demoCode: `<aithe-tree
+  checkable
+  expand-all
+  data='[
+     {"label":"Foundation","id":"foundation","icon":"folder","children":[
+        {"label":"Theme","id":"theme","icon":"palette","variant":"primary"},
+       {"label":"Typography","id":"typography","icon":"edit"}
+     ]},
+     {"label":"Components","id":"components","icon":"box","children":[
+        {"label":"Basic","id":"basic","variant":"success"},
+        {"label":"Feedback","id":"feedback","variant":"warning"}
+     ]}
+  ]'
+></aithe-tree>`,
+        previewHeight: '260px',
+    },
+    'data-tree-menu': {
+        demoCode: `<aithe-tree-menu
+  active="overview"
+  items='[
+     {"label":"Overview","id":"overview","icon":"home"},
+     {"label":"Assets","id":"assets","icon":"star","children":[
+       {"label":"Component Library","id":"library"},
+       {"label":"Design Tokens","id":"tokens"}
+     ]},
+     {"label":"Governance","id":"governance","icon":"settings"},
+     {"label":"Reports","id":"reports","icon":"barChart","children":[
+       {"label":"Usage Analytics","id":"analytics"},
+       {"label":"Compliance","id":"compliance","disabled":true}
+     ]}
+  ]'
+></aithe-tree-menu>`,
+        previewHeight: '320px',
+    },
+    'data-pagination': {
+        demoCode: `<aithe-pagination total="96" page-size="12" current-page="3"></aithe-pagination>`,
+    },
+    'data-box-table': {
+        demoCode: `<aithe-box-table
+  mode="box"
+  box-cols="3"
+  striped
+  selectable="multi"
+  data='[{"id":1,"name":"Theme Engine","owner":"Design Systems","status":"Ready","version":"v2.1.0"},{"id":2,"name":"Component API","owner":"Frontend Platform","status":"Review","version":"v1.8.3"},{"id":3,"name":"Demo Router","owner":"Experience Team","status":"Ready","version":"v3.0.1"},{"id":4,"name":"Theme Engine","owner":"Design Systems","status":"Blocked","version":"v2.1.0"},{"id":5,"name":"Component API","owner":"Frontend Platform","status":"Review","version":"v1.8.3"},{"id":6,"name":"Demo Router","owner":"Experience Team","status":"Ready","version":"v3.0.1"}]'
+>
+  <aithe-table-column id="name" title="Module" box="name"></aithe-table-column>
+  <aithe-table-column id="owner" title="Owner" box="tags"></aithe-table-column>
+  <aithe-table-column id="status" title="Status" box="status"></aithe-table-column>
+  <aithe-table-column id="version" title="Version" box="content"></aithe-table-column>
+</aithe-box-table>`,
+        previewHeight: '480px',
+    },
+    'disp-carousel': {
+        demoCode: `<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',
+    },
+    'disp-comparison': {
+        demoCode: `<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',
+    },
+    'disp-animated-image': {
+        demoCode: `<aithe-animated-image src="data:image/svg+xml;utf8,${animatedSvg}" speed="1.2"></aithe-animated-image>`,
+        previewHeight: '280px',
+    },
+    'disp-markdown': {
+        demoCode: `<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',
+    },
+    'disp-markdown-editor': {
+        demoCode: `<aithe-markdown-editor show-toolbar value="# Hello World
+
+This is a **markdown editor** with \`live preview\`."></aithe-markdown-editor>`,
+        previewHeight: '360px',
+    },
+    'disp-code-editor': {
+        demoCode: `<aithe-code-editor language="javascript" show-toolbar></aithe-code-editor>`,
+        demoSetup: (root) => {
+            requestAnimationFrame(() => {
+                const editor = root.querySelector('aithe-code-editor');
+                if (editor) {
+                    editor.value = `function greet(name) {
+  return 'Hello, ' + name + '!';
+}
+
+console.log(greet('Aithe'));`;
+                }
+            });
+        },
+        previewHeight: '280px',
+    },
+    'disp-label': {
+        demoCode: `<aithe-space size="16" direction="vertical">
+  <aithe-label content="**Bold** and \`code\`."></aithe-label>
+  <aithe-label content=":check: 已完成"></aithe-label>
+</aithe-space>`,
+    },
+    'prog-bar': {
+        demoCode: `<div style="display:grid;gap:16px;max-width:420px;">
+  <aithe-progress-bar percent="42"></aithe-progress-bar>
+  <aithe-progress-bar percent="76" status="success"></aithe-progress-bar>
+  <aithe-progress-bar percent="91" status="danger"></aithe-progress-bar>
+</div>`,
+    },
+    'prog-ring': {
+        demoCode: `<aithe-progress-ring percent="68" size="132" status="warning"></aithe-progress-ring>`,
+        previewHeight: '180px',
+    },
+    'prog-spinner': {
+        demoCode: `<div style="display:flex;gap:16px;align-items:center;">
+  <aithe-spinner size="sm"></aithe-spinner>
+  <aithe-spinner size="md"></aithe-spinner>
+  <aithe-spinner variant="dots" color="var(--aithe-success-6)"></aithe-spinner>
+</div>`,
+    },
+    'prog-skeleton': {
+        demoCode: `<div style="display:grid;gap:16px;">
+  <aithe-skeleton rows="3"></aithe-skeleton>
+  <aithe-skeleton rows="1" shape="circle"></aithe-skeleton>
+  <aithe-skeleton rows="1" shape="rect"></aithe-skeleton>
+</div>`,
+        previewHeight: '320px',
+    },
+    'cont-callout': {
+        demoCode: `<aithe-callout type="primary" title="Shipping Note">
+  Aithe UI components inherit theme changes automatically through CSS variables.
+</aithe-callout>`,
+    },
+    'cont-details': {
+        demoCode: `<aithe-details summary="What does the global theme initializer do?">
+  It registers design tokens, restores the persisted theme and synchronizes the root attribute.
+</aithe-details>`,
+        previewHeight: '200px',
+    },
+    'cont-scroller': {
+        demoCode: `<aithe-scroller height="220px" shadow>
+  <div style="height:560px;display:grid;place-items:center;color:var(--aithe-color-text-muted);">
+    Scroll inside this container to observe edge shadows and themed scrollbars.
+  </div>
+</aithe-scroller>`,
+        previewHeight: '260px',
+    },
+    'cont-split-panel': {
+        demoCode: `<aithe-split-panel value="38">
+  <div slot="start" style="height:240px;display:grid;place-items:center;background:var(--aithe-neutral-1);">Navigator</div>
+  <div slot="end" style="height:240px;display:grid;place-items:center;background:var(--aithe-color-surface);">Editor</div>
+</aithe-split-panel>`,
+        previewHeight: '300px',
+    },
+    'theme-picker': {
+        demoCode: `<aithe-theme-picker value="light"></aithe-theme-picker>`,
+    },
+    'theme-shape-picker': {
+        demoCode: `<aithe-shape-picker></aithe-shape-picker>`,
+    },
+    'theme-shadow-picker': {
+        demoCode: `<aithe-shadow-picker></aithe-shadow-picker>`,
+    },
+    'theme-typo-picker': {
+        demoCode: `<aithe-typo-picker></aithe-typo-picker>`,
+    },
+    'theme-preview': {
+        demoCode: `<aithe-theme-preview value="light"></aithe-theme-preview>`,
+        previewHeight: '520px',
+    },
+    'framework-sidebar': {
+        demoCode: `<aithe-sidebar
+  brand="Aithe UI"
+  icon="sparkles"
+  collapsible
+  items='[{"label":"Dashboard","id":"dashboard","icon":"home"},{"label":"Components","id":"components","icon":"grid","children":[{"label":"Basic","id":"basic"},{"label":"Layout","id":"layout"},{"label":"Form","id":"form"}]},{"label":"Settings","id":"settings","icon":"settings"},{"label":"Help","id":"help","icon":"question"}]'
+  active="dashboard"
+  style="height:420px;"
+></aithe-sidebar>`,
+        previewHeight: '460px',
+    },
+    'framework-dashboard': {
+        demoCode: `<aithe-dashboard columns="12" cell-width="60" cell-height="50" gap="8" storage-key="api-demo-dashboard" style="height:420px;">
+  <aithe-dashboard-panel panel-id="users" x="0" y="0" w="4" h="3" label="Users" icon="users">
+    <aithe-metrics-group direction="vertical" gap="4" style="padding:8px;">
+      <aithe-metrics label="Active Users" value="1,024" variant="primary"></aithe-metrics>
+      <aithe-metrics label="New Today" value="47" variant="neutral"></aithe-metrics>
+    </aithe-metrics-group>
+  </aithe-dashboard-panel>
+  <aithe-dashboard-panel panel-id="revenue" x="4" y="0" w="4" h="3" label="Revenue" icon="barChart">
+    <aithe-metrics-group direction="vertical" gap="4" style="padding:8px;">
+      <aithe-metrics label="This Month" value="$42.5K" variant="success"></aithe-metrics>
+      <aithe-metrics label="vs Last Month" value="+12%" variant="primary"></aithe-metrics>
+    </aithe-metrics-group>
+  </aithe-dashboard-panel>
+  <aithe-dashboard-panel panel-id="uptime" x="8" y="0" w="4" h="3" label="Uptime" icon="clock">
+    <aithe-metrics-group direction="vertical" gap="4" style="padding:8px;">
+      <aithe-metrics label="Last 30 Days" value="99.9%" variant="primary"></aithe-metrics>
+      <aithe-metrics label="Incidents" value="0" variant="success"></aithe-metrics>
+    </aithe-metrics-group>
+  </aithe-dashboard-panel>
+  <aithe-dashboard-panel panel-id="requests" x="0" y="3" w="6" h="3" label="Requests" icon="database">
+    <aithe-metrics-group direction="horizontal" gap="24" style="justify-content:center;padding:16px;">
+      <aithe-metrics label="Total" value="8.2M" variant="warning" show-divider></aithe-metrics>
+      <aithe-metrics label="Today" value="12.4K" variant="primary" show-divider></aithe-metrics>
+      <aithe-metrics label="Avg Latency" value="45ms" variant="neutral"></aithe-metrics>
+    </aithe-metrics-group>
+  </aithe-dashboard-panel>
+  <aithe-dashboard-panel panel-id="health" x="6" y="3" w="6" h="3" label="System Health" icon="heart" closable="false">
+    <aithe-metrics-group direction="horizontal" gap="24" style="justify-content:center;padding:16px;">
+      <aithe-metrics label="Status" value="Healthy" variant="success" show-divider></aithe-metrics>
+      <aithe-metrics label="CPU" value="23%" variant="neutral" show-divider></aithe-metrics>
+      <aithe-metrics label="Memory" value="1.2GB" variant="neutral"></aithe-metrics>
+    </aithe-metrics-group>
+  </aithe-dashboard-panel>
+</aithe-dashboard>`,
+        previewHeight: '520px',
+        layout: 'vertical',
+    },
+    'framework-dashboard-panel': {
+        demoCode: `<aithe-dashboard columns="12" cell-width="60" cell-height="50" gap="8" show-toolbar="false" style="height:200px;">
+  <aithe-dashboard-panel panel-id="demo-panel" x="0" y="0" w="6" h="3" label="Demo Panel" icon="sparkles">
+    <p style="margin:0;color:var(--aithe-color-text-muted);">Panel content goes here. Drag the header to reposition.</p>
+  </aithe-dashboard-panel>
+  <aithe-dashboard-panel panel-id="pinned-panel" x="6" y="0" w="6" h="3" label="Pinned" icon="pin" closable="false">
+    <p style="margin:0;color:var(--aithe-color-text-muted);">This panel cannot be closed.</p>
+  </aithe-dashboard-panel>
+</aithe-dashboard>`,
+        previewHeight: '280px',
+        layout: 'vertical',
+    },
+    'data-metrics': {
+        demoCode: `<aithe-metrics-group direction="horizontal" gap="24">
+  <aithe-metrics label="Active Users" value="1,024" variant="primary" show-divider>
+    <aithe-icon name="arrowUp" size="16" style="color:var(--aithe-success-6);"></aithe-icon>
+  </aithe-metrics>
+  <aithe-metrics label="Revenue" value="$42.5K" variant="success" show-divider>
+    <aithe-icon name="arrowUp" size="16" style="color:var(--aithe-success-6);"></aithe-icon>
+  </aithe-metrics>
+  <aithe-metrics label="Errors" value="3" variant="danger" show-divider>
+    <aithe-icon name="close" size="16" style="color:var(--aithe-danger-6);"></aithe-icon>
+  </aithe-metrics>
+  <aithe-metrics label="Pending" value="12" variant="warning" show-divider></aithe-metrics>
+  <aithe-metrics label="Total" value="9,876" variant="neutral"></aithe-metrics>
+</aithe-metrics-group>
+
+<div style="display:flex;gap:32px;margin-top:16px;">
+  <aithe-metrics label="Small" value="1K" variant="primary" scale="small" align="center"></aithe-metrics>
+  <aithe-metrics label="Normal" value="1K" variant="success" scale="normal" align="center"></aithe-metrics>
+  <aithe-metrics label="Large" value="1K" variant="danger" scale="large" align="center"></aithe-metrics>
+</div>
+
+<div style="display:flex;gap:32px;margin-top:16px;">
+  <aithe-metrics label="Left" value="100" variant="primary" align="left"></aithe-metrics>
+  <aithe-metrics label="Center" value="200" variant="success" align="center"></aithe-metrics>
+  <aithe-metrics label="Right" value="300" variant="danger" align="right"></aithe-metrics>
+</div>`,
+        previewHeight: '260px',
+        layout: 'horizontal',
+    },
+    'data-metrics-group': {
+        demoCode: `<div style="display:flex;flex-direction:column;gap:24px;">
+  <aithe-metrics-group direction="horizontal" gap="24">
+    <aithe-metrics label="Users" value="1,024" variant="primary" show-divider></aithe-metrics>
+    <aithe-metrics label="Revenue" value="$42.5K" variant="success" show-divider></aithe-metrics>
+    <aithe-metrics label="Errors" value="3" variant="danger"></aithe-metrics>
+  </aithe-metrics-group>
+  <aithe-metrics-group direction="vertical" gap="8" align="center">
+    <aithe-metrics label="CPU Usage" value="23%" variant="neutral" show-divider></aithe-metrics>
+    <aithe-metrics label="Memory" value="1.2 GB" variant="neutral" show-divider></aithe-metrics>
+    <aithe-metrics label="Disk" value="45% Used" variant="warning"></aithe-metrics>
+  </aithe-metrics-group>
+  <aithe-metrics-group direction="horizontal" gap="24">
+    <aithe-metrics label="Small" value="1K" variant="primary" scale="small"></aithe-metrics>
+    <aithe-metrics label="Normal" value="1K" variant="success" scale="normal"></aithe-metrics>
+    <aithe-metrics label="Large" value="1K" variant="danger" scale="large"></aithe-metrics>
+  </aithe-metrics-group>
+</div>`,
+        previewHeight: '320px',
+        layout: 'vertical',
+    },
+    'disp-mini-box': {
+        demoCode: `<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',
+    },
+    'disp-brief-box': {
+        demoCode: `<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',
+    },
+    'disp-detail-box': {
+        demoCode: `<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',
+    },
+};
+export function getDemoData(entryKey) {
+    return demoMap[entryKey];
+}