@oyolincc/create 0.4.0 → 0.5.0

package/templates/hono-fullstack/libs/ui/src/theme/semanticTokens/shadows.ts

@@ -0,0 +1,46 @@
+import { defineSemanticTokens } from '@pandacss/dev'
+
+export const shadows = defineSemanticTokens.shadows({
+  xs: {
+    value: {
+      _light: '0px 1px 2px {colors.gray.a6}, 0px 0px 1px {colors.gray.a7}',
+      _dark: '0px 1px 1px {colors.black.a8}, 0px 0px 1px inset {colors.gray.a8}',
+    },
+  },
+  sm: {
+    value: {
+      _light: '0px 2px 4px {colors.gray.a4}, 0px 0px 1px {colors.gray.a4}',
+      _dark: '0px 2px 4px {colors.black.a8}, 0px 0px 1px inset {colors.gray.a8}',
+    },
+  },
+  md: {
+    value: {
+      _light: '0px 4px 8px {colors.gray.a4}, 0px 0px 1px {colors.gray.a4}',
+      _dark: '0px 4px 8px {colors.black.a8}, 0px 0px 1px inset {colors.gray.a8}',
+    },
+  },
+  lg: {
+    value: {
+      _light: '0px 8px 16px {colors.gray.a4}, 0px 0px 1px {colors.gray.a4}',
+      _dark: '0px 8px 16px {colors.black.a8}, 0px 0px 1px inset {colors.gray.a8}',
+    },
+  },
+  xl: {
+    value: {
+      _light: '0px 16px 24px {colors.gray.a4}, 0px 0px 1px {colors.gray.a4}',
+      _dark: '0px 16px 24px {colors.black.a8}, 0px 0px 1px inset {colors.gray.a8}',
+    },
+  },
+  '2xl': {
+    value: {
+      _light: '0px 24px 40px {colors.gray.a4}, 0px 0px 1px {colors.gray.a4}',
+      _dark: '0px 24px 40px {colors.black.a8}, 0px 0px 1px inset {colors.gray.a8}',
+    },
+  },
+  inset: {
+    value: {
+      _light: 'inset 8px 0 12px -8px {colors.gray.a4}',
+      _dark: 'inset 8px 0 12px -8px {colors.black.a6}',
+    },
+  },
+})

package/templates/hono-fullstack/libs/ui/src/theme/text-styles.ts

@@ -0,0 +1,82 @@
+import { defineTextStyles } from '@pandacss/dev'
+
+export const textStyles = defineTextStyles({
+  xs: {
+    value: {
+      fontSize: '{fontSizes.xs}',
+      lineHeight: '{lineHeights.xs}',
+    },
+  },
+  sm: {
+    value: {
+      fontSize: '{fontSizes.sm}',
+      lineHeight: '{lineHeights.sm}',
+    },
+  },
+  md: {
+    value: {
+      fontSize: '{fontSizes.md}',
+      lineHeight: '{lineHeights.md}',
+    },
+  },
+  lg: {
+    value: {
+      fontSize: '{fontSizes.lg}',
+      lineHeight: '{lineHeights.lg}',
+    },
+  },
+  xl: {
+    value: {
+      fontSize: '{fontSizes.xl}',
+      lineHeight: '{lineHeights.xl}',
+    },
+  },
+  '2xl': {
+    value: {
+      fontSize: '{fontSizes.2xl}',
+      lineHeight: '{lineHeights.2xl}',
+    },
+  },
+  '3xl': {
+    value: {
+      fontSize: '{fontSizes.3xl}',
+      lineHeight: '{lineHeights.3xl}',
+    },
+  },
+  '4xl': {
+    value: {
+      fontSize: '{fontSizes.4xl}',
+      lineHeight: '{lineHeights.4xl}',
+    },
+  },
+  '5xl': {
+    value: {
+      fontSize: '{fontSizes.5xl}',
+      lineHeight: '{lineHeights.5xl}',
+    },
+  },
+  '6xl': {
+    value: {
+      fontSize: '{fontSizes.6xl}',
+      lineHeight: '{lineHeights.6xl}',
+    },
+  },
+  '7xl': {
+    value: {
+      fontSize: '{fontSizes.7xl}',
+      lineHeight: '{lineHeights.7xl}',
+    },
+  },
+  '8xl': {
+    value: {
+      fontSize: '{fontSizes.8xl}',
+      lineHeight: '{lineHeights.8xl}',
+    },
+  },
+  '9xl': {
+    value: {
+      fontSize: '{fontSizes.9xl}',
+      lineHeight: '{lineHeights.9xl}',
+    },
+  },
+})

package/templates/hono-fullstack/libs/ui/src/theme/tokens/animations.ts

@@ -0,0 +1,8 @@
+import { defineTokens } from '@pandacss/dev'
+
+export const animations = defineTokens.animations({
+  spin: { value: 'spin 1s linear infinite' },
+  ping: { value: 'ping 1s {easings.out} infinite' },
+  pulse: { value: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite' },
+  bounce: { value: 'bounce 1s infinite' },
+})

package/templates/hono-fullstack/libs/ui/src/theme/tokens/aspect-ratio.ts

@@ -0,0 +1,6 @@
+import { defineTokens } from '@pandacss/dev'
+
+export const aspectRatios = defineTokens.aspectRatios({
+  square: { value: '1 / 1' },
+  auto: { value: 'auto' },
+})

package/templates/hono-fullstack/libs/ui/src/theme/tokens/borders.ts

@@ -0,0 +1,5 @@
+import { defineTokens } from '@pandacss/dev'
+
+export const borders = defineTokens.borders({
+  none: { value: 'none' },
+})

package/templates/hono-fullstack/libs/ui/src/theme/tokens/colors.ts

@@ -0,0 +1,35 @@
+import { defineTokens } from '@pandacss/dev'
+
+const black = defineTokens.colors({
+  DEFAULT: { value: '#000000' },
+  a1: { value: 'rgba(0, 0, 0, 0.05)' },
+  a2: { value: 'rgba(0, 0, 0, 0.1)' },
+  a3: { value: 'rgba(0, 0, 0, 0.15)' },
+  a4: { value: 'rgba(0, 0, 0, 0.2)' },
+  a5: { value: 'rgba(0, 0, 0, 0.3)' },
+  a6: { value: 'rgba(0, 0, 0, 0.4)' },
+  a7: { value: 'rgba(0, 0, 0, 0.5)' },
+  a8: { value: 'rgba(0, 0, 0, 0.6)' },
+  a9: { value: 'rgba(0, 0, 0, 0.7)' },
+  a10: { value: 'rgba(0, 0, 0, 0.8)' },
+  a11: { value: 'rgba(0, 0, 0, 0.9)' },
+  a12: { value: 'rgba(0, 0, 0, 0.95)' },
+})
+
+const white = defineTokens.colors({
+  DEFAULT: { value: '#ffffff' },
+  a1: { value: 'rgba(255, 255, 255, 0.05)' },
+  a2: { value: 'rgba(255, 255, 255, 0.1)' },
+  a3: { value: 'rgba(255, 255, 255, 0.15)' },
+  a4: { value: 'rgba(255, 255, 255, 0.2)' },
+  a5: { value: 'rgba(255, 255, 255, 0.3)' },
+  a6: { value: 'rgba(255, 255, 255, 0.4)' },
+  a7: { value: 'rgba(255, 255, 255, 0.5)' },
+  a8: { value: 'rgba(255, 255, 255, 0.6)' },
+  a9: { value: 'rgba(255, 255, 255, 0.7)' },
+  a10: { value: 'rgba(255, 255, 255, 0.8)' },
+  a11: { value: 'rgba(255, 255, 255, 0.9)' },
+  a12: { value: 'rgba(255, 255, 255, 0.95)' },
+})
+
+export const colors = { black, white }

package/templates/hono-fullstack/libs/ui/src/theme/tokens/durations.ts

@@ -0,0 +1,11 @@
+import { defineTokens } from '@pandacss/dev'
+
+export const durations = defineTokens.durations({
+  fastest: { value: '50ms' },
+  faster: { value: '100ms' },
+  fast: { value: '150ms' },
+  normal: { value: '200ms' },
+  slow: { value: '250ms' },
+  slower: { value: '300ms' },
+  slowest: { value: '400ms' },
+})

package/templates/hono-fullstack/libs/ui/src/theme/tokens/easings.ts

@@ -0,0 +1,9 @@
+import { defineTokens } from '@pandacss/dev'
+
+export const easings = defineTokens.easings({
+  default: { value: 'cubic-bezier(0.4, 0, 0.2, 1)' },
+  linear: { value: 'linear' },
+  in: { value: 'cubic-bezier(0.4, 0, 1, 1)' },
+  out: { value: 'cubic-bezier(0, 0, 0.2, 1)' },
+  'in-out': { value: '{easings.default}' },
+})

package/templates/hono-fullstack/libs/ui/src/theme/tokens/index.ts

@@ -0,0 +1,42 @@
+import { defineTokens } from '@pandacss/dev'
+import { fonts, fontSizes, fontWeights, letterSpacings, lineHeights } from './typography'
+import { durations } from './durations'
+import { zIndex } from './z-index'
+import { borders } from './borders'
+import { easings } from './easings'
+import { radii } from './radii'
+import { aspectRatios } from './aspect-ratio'
+import { sizes } from './sizes'
+import { spacing } from './spacing'
+import { colors } from './colors'
+import { animations } from './animations'
+
+export const tokens = defineTokens({
+  /* 样式相关 */
+  aspectRatios,
+  animations,
+  durations,
+  easings,
+  colors,
+  zIndex,
+  borders,
+  radii,
+  blurs: {
+    xs: { value: '4px' },
+    sm: { value: '8px' },
+    md: { value: '12px' },
+    lg: { value: '16px' },
+    xl: { value: '24px' },
+    '2xl': { value: '40px' },
+    '3xl': { value: '64px' },
+  },
+  /* 尺寸 */
+  sizes,
+  spacing,
+  /* 排版相关 */
+  fonts,
+  fontSizes,
+  fontWeights,
+  lineHeights,
+  letterSpacings,
+})

package/templates/hono-fullstack/libs/ui/src/theme/tokens/radii.ts

@@ -0,0 +1,13 @@
+import { defineTokens } from '@pandacss/dev'
+
+export const radii = defineTokens.radii({
+  xs: { value: '0.125rem' },
+  sm: { value: '0.25rem' },
+  md: { value: '0.375rem' },
+  lg: { value: '0.5rem' },
+  xl: { value: '0.75rem' },
+  '2xl': { value: '1rem' },
+  '3xl': { value: '1.5rem' },
+  '4xl': { value: '2rem' },
+  full: { value: '9999px' },
+})

package/templates/hono-fullstack/libs/ui/src/theme/tokens/sizes.ts

@@ -0,0 +1,27 @@
+import { defineTokens } from '@pandacss/dev'
+import { spacing } from './spacing'
+
+const largeSizes = defineTokens.sizes({
+  xs: { value: '20rem' },
+  sm: { value: '24rem' },
+  md: { value: '28rem' },
+  lg: { value: '32rem' },
+  xl: { value: '36rem' },
+  '2xl': { value: '42rem' },
+  '3xl': { value: '48rem' },
+  '4xl': { value: '56rem' },
+  '5xl': { value: '64rem' },
+  '6xl': { value: '72rem' },
+  '7xl': { value: '80rem' },
+  '8xl': { value: '90rem' },
+  prose: { value: '60ch' },
+})
+
+export const sizes = defineTokens.sizes({
+  ...Object.fromEntries(Object.keys(spacing).map((key) => [key, { value: `{spacing.${key}}` }])),
+  ...largeSizes,
+  full: { value: '100%' },
+  min: { value: 'min-content' },
+  max: { value: 'max-content' },
+  fit: { value: 'fit-content' },
+})

package/templates/hono-fullstack/libs/ui/src/theme/tokens/spacing.ts

@@ -0,0 +1,41 @@
+import { defineTokens } from '@pandacss/dev'
+
+export const spacing = defineTokens.spacing({
+  0: { value: '0rem' },
+  0.5: { value: '0.125rem' },
+  1: { value: '0.25rem' },
+  1.5: { value: '0.375rem' },
+  2: { value: '0.5rem' },
+  2.5: { value: '0.625rem' },
+  3: { value: '0.75rem' },
+  3.5: { value: '0.875rem' },
+  4: { value: '1rem' },
+  4.5: { value: '1.125rem' },
+  5: { value: '1.25rem' },
+  5.5: { value: '1.375rem' },
+  6: { value: '1.5rem' },
+  7: { value: '1.75rem' },
+  8: { value: '2rem' },
+  9: { value: '2.25rem' },
+  10: { value: '2.5rem' },
+  11: { value: '2.75rem' },
+  12: { value: '3rem' },
+  14: { value: '3.5rem' },
+  16: { value: '4rem' },
+  20: { value: '5rem' },
+  24: { value: '6rem' },
+  28: { value: '7rem' },
+  32: { value: '8rem' },
+  36: { value: '9rem' },
+  40: { value: '10rem' },
+  44: { value: '11rem' },
+  48: { value: '12rem' },
+  52: { value: '13rem' },
+  56: { value: '14rem' },
+  60: { value: '15rem' },
+  64: { value: '16rem' },
+  72: { value: '18rem' },
+  80: { value: '20rem' },
+  96: { value: '24rem' },
+  px: { value: '1px' },
+})

package/templates/hono-fullstack/libs/ui/src/theme/tokens/typography.ts

@@ -0,0 +1,86 @@
+/* 来自 @pandacss/preset-panda */
+import { defineTokens } from '@pandacss/dev'
+
+export const fontSizes = defineTokens.fontSizes({
+  '2xs': { value: '0.5rem' },
+  xs: { value: '0.75rem' },
+  sm: { value: '0.875rem' },
+  md: { value: '1rem' },
+  lg: { value: '1.125rem' },
+  xl: { value: '1.25rem' },
+  '2xl': { value: '1.5rem' },
+  '3xl': { value: '1.875rem' },
+  '4xl': { value: '2.25rem' },
+  '5xl': { value: '3rem' },
+  '6xl': { value: '3.75rem' },
+  '7xl': { value: '4.5rem' },
+  '8xl': { value: '6rem' },
+  '9xl': { value: '8rem' },
+})
+
+export const fontWeights = defineTokens.fontWeights({
+  thin: { value: '100' },
+  extralight: { value: '200' },
+  light: { value: '300' },
+  normal: { value: '400' },
+  medium: { value: '500' },
+  semibold: { value: '600' },
+  bold: { value: '700' },
+  extrabold: { value: '800' },
+  black: { value: '900' },
+})
+
+export const letterSpacings = defineTokens.letterSpacings({
+  tighter: { value: '-0.05em' },
+  tight: { value: '-0.025em' },
+  normal: { value: '0em' },
+  wide: { value: '0.025em' },
+  wider: { value: '0.05em' },
+  widest: { value: '0.1em' },
+})
+
+export const lineHeights = defineTokens.lineHeights({
+  none: { value: '1' },
+  xs: { value: 'calc(1 / 0.75)' },
+  sm: { value: 'calc(1.25 / 0.875)' },
+  md: { value: 'calc(1.5 / 1)' },
+  lg: { value: 'calc(1.75 / 1.125)' },
+  xl: { value: 'calc(1.75 / 1.25)' },
+  '2xl': { value: 'calc(2 / 1.5)' },
+  '3xl': { value: 'calc(2.25 / 1.875)' },
+  '4xl': { value: 'calc(2.5 / 2.25)' },
+  '5xl': { value: '{lineHeights.none}' },
+  '6xl': { value: '{lineHeights.none}' },
+  '7xl': { value: '{lineHeights.none}' },
+  '8xl': { value: '{lineHeights.none}' },
+  '9xl': { value: '{lineHeights.none}' },
+})
+
+export const fonts = defineTokens.fonts({
+  sans: {
+    value: [
+      'ui-sans-serif',
+      'system-ui',
+      'sans-serif',
+      '"Apple Color Emoji"',
+      '"Segoe UI Emoji"',
+      '"Segoe UI Symbol"',
+      '"Noto Color Emoji"',
+    ],
+  },
+  serif: {
+    value: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
+  },
+  mono: {
+    value: [
+      'ui-monospace',
+      'SFMono-Regular',
+      'Menlo',
+      'Monaco',
+      'Consolas',
+      '"Liberation Mono"',
+      '"Courier New"',
+      'monospace',
+    ],
+  },
+})

package/templates/hono-fullstack/libs/ui/src/theme/tokens/z-index.ts

@@ -0,0 +1,43 @@
+import { defineTokens } from '@pandacss/dev'
+
+export const zIndex = defineTokens.zIndex({
+  hide: {
+    value: -1,
+  },
+  base: {
+    value: 0,
+  },
+  docked: {
+    value: 10,
+  },
+  dropdown: {
+    value: 1000,
+  },
+  sticky: {
+    value: 1100,
+  },
+  banner: {
+    value: 1200,
+  },
+  overlay: {
+    value: 1300,
+  },
+  modal: {
+    value: 1400,
+  },
+  popover: {
+    value: 1500,
+  },
+  skipLink: {
+    value: 1600,
+  },
+  toast: {
+    value: 1700,
+  },
+  tooltip: {
+    value: 1800,
+  },
+  max: {
+    value: 99999999,
+  },
+})

package/templates/hono-fullstack/libs/ui/stories/README.md

@@ -0,0 +1,107 @@
+# UI 组件预览
+
+从仓库根目录运行：
+
+```bash
+vp run @repo/ui#storybook
+vp run @repo/ui#storybook:check
+vp run @repo/ui#storybook:build
+```
+
+开发页面默认使用端口 6006；静态构建输出到 `libs/ui/storybook-static/`。
+
+Storybook 直接调试 UI 源码，不需要先构建 UI 包。预览使用独立 Vite 配置；
+Panda 配置复用 UI 的主题和配方，向 `.storybook/styled-system/` 生成专用运行时。
+Docs 容器按需加载，独立 Story 不提前加载文档界面；开发服务仅预热 UI 公共源码入口，
+减少首次转换的瀑布等待。预热不减少请求数量。UI 与 Panda 生成代码保留源码模块和热更新，
+不强制预构建为大包；第三方依赖由 Storybook 的 Vite builder 自动发现并缓存预构建结果。
+
+Storybook 和 Stack 保持 Panda 默认的源码转换策略（`transform: false`），
+不为减少开发请求数量额外开启源码改写。是否启用转换，应依据实际加载、热更新或产物收益验证。
+Stack 通过 `designSystem` 自动注册样式入口，不将 `@repo/ui` 根入口配置为 `importMap.jsx`，
+防止 Stack 等 UI 组件被当成 Panda 原生 pattern 内联而丢失 `separator`、`asChild` 等行为。
+修改 Vite 配置后需重启开发服务。
+
+`storybook:check` 会生成这份运行时并检查 stories 与配置，不改写原有生成目录。
+Controls 在运行时选择参数，因此预览专用 Panda 配置预生成所有配方变体，
+以及面板提供的 gray、lime、red、green 配色；增加配色选项时需同步这份列表。
+
+每个组件族维护一个 CSF 3 文件。纯视觉变体采用汇总 story，独立交互场景单独组织。
+示例从 `@repo/ui` 或其公开子入口导入组件，用 args 提供可调整参数。
+
+交互示例直接保留完整的插槽组合；仅在组件族内复用日历视图、树节点等重复结构，
+不抽取跨组件的通用演示组件，也不依赖 Stack 路由。
+Playground 使用 Controls 调整参数；受控示例在具名 render 函数内维护 React 状态，
+store 示例使用 UI 包导出的 hook 和 RootProvider。固定配置的行为示例关闭 Controls，
+避免出现调整参数却不生效的面板。Ark 的值变化等轻量参数通过 `fn()` 接入 Actions。
+原生点击、输入事件先提取类型、按钮文字或输入值，再用 `action()` 记录；不要将完整的
+React 事件（包含 DOM 与 Window 引用）传入记录链路，避免 Docs 交互被同步序列化阻塞。
+
+Variants、Loading、Sizes、Colors 使用 `tags: ['!dev']`，仅在 Docs 中展示，减少侧栏入口。
+Playground 和受控、store 等行为场景保留独立入口，便于隔离调试。Docs 与独立入口复用同一份 story。
+组件主题工具栏同步预览组件及 Docs 内容区的背景、文字和参数表；侧栏等管理界面沿用 Storybook 设置。
+Button 的链接示例保留真实 anchor 语义，拦截默认导航并滚动到示例内的状态文本，避免离开工作台。
+含 hook / ref 的示例展示原始 render 源码（`docs.source.type: 'code'`），
+保留可复制的状态逻辑，并避开 Storybook 动态序列化 ref 时的 React 19 兼容性提示。
+Portal 使用默认容器，渲染到预览 iframe 的 document；主题也施加在同一 document 上。
+需要 DOM id 的交互用 `useId`，避免同一 Docs 页中的示例互相干扰。
+
+## 迁移清单
+
+原文件均位于 `apps/stack/frontend/routes/ui/`。迁移以功能场景为单位，
+不保留原页面的导航、主题开关及验收标题；主题统一由工具栏控制。
+
+| 原验收内容                                                            | Storybook                                                       | 进度   |
+| --------------------------------------------------------------------- | --------------------------------------------------------------- | ------ |
+| `-ButtonPreview.tsx` 配方、尺寸、配色                                 | `Actions/Button`：Playground、Variants、Sizes、Colors           | 已迁移 |
+| 同上：加载、ref 聚焦、计数、禁用、asChild 链接                        | Loading、Interactions                                           | 已迁移 |
+| 同上：按维度自定义、IconButton、CloseButton、ButtonGroup              | Customization、Group                                            | 已迁移 |
+| `-DialogPreview.tsx` 非受控、焦点、阻止关闭、确认、内部滚动、自定尺寸 | `Overlays/Dialog`：Playground、Controlled、CustomSize           | 已迁移 |
+| `-SelectPreview.tsx` 单选、多选、禁用、原生表单、自定义尺寸和外观     | `Collections/Select`：Playground、ControlledForm、Customization | 已迁移 |
+| `api.tsx` 的 Dialog / Select hook、RootProvider、泛型事件             | 对应组件族的 Store                                              | 已迁移 |
+| `api.tsx` 的 Combobox API                                             | `Collections/Combobox`：Store                                   | 已迁移 |
+| 其余 28 个 `-…Preview.tsx`                                            | 按下表拆入对应组件族                                            | 已迁移 |
+
+第三步的实际文件归属如下；表中的组件名对应目录内的 `组件名.stories.tsx`。
+混合页面按组件族拆分；`Forms/Form` 单独保留跨字段提交、重置和外部控制场景。
+
+| 原 Preview 文件（省略 `-` 和 `Preview.tsx`） | stories 文件                                                                                                |
+| -------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
+| Forms                                        | `forms/`：Form、Input、Textarea、Switch、RadioGroup                                                         |
+| Field                                        | `forms/Field`                                                                                               |
+| Checkbox                                     | `forms/Checkbox`                                                                                            |
+| Radio                                        | `forms/`：RadioCard、RadioGroup                                                                             |
+| AdvancedForms                                | `forms/`：NumberInput、PinInput、Slider、RatingGroup、SegmentGroup                                          |
+| ComposedForms                                | `forms/`：Editable、TagsInput、RadioCard、Fieldset、InputGroup                                              |
+| NativePassword                               | `forms/`：PasswordInput、NativeSelect                                                                       |
+| FileUpload                                   | `forms/FileUpload`                                                                                          |
+| Combobox                                     | `collections/Combobox`                                                                                      |
+| TreeView                                     | `collections/TreeView`                                                                                      |
+| DatePicker                                   | `date/DatePicker`                                                                                           |
+| ColorPicker                                  | `color/ColorPicker`                                                                                         |
+| Overlay                                      | `overlays/`：Menu、Popover、HoverCard、Drawer                                                               |
+| OverlayManager                               | `overlays/OverlayManager`                                                                                   |
+| Tooltip                                      | `overlays/Tooltip`                                                                                          |
+| Toast                                        | `feedback/Toast`                                                                                            |
+| Feedback                                     | `feedback/`：Alert、Progress、ProgressCircle；`display/`：Avatar、Text；`navigation/Link`                   |
+| Disclosure                                   | `disclosure/`：Accordion、Collapsible；`navigation/Pagination`                                              |
+| Tabs                                         | `disclosure/Tabs`                                                                                           |
+| Steps                                        | `disclosure/Steps`                                                                                          |
+| Display                                      | `display/`：Badge、Card；`feedback/Skeleton`                                                                |
+| TableTag                                     | `display/`：Table、Tag                                                                                      |
+| Timeline                                     | `display/Timeline`                                                                                          |
+| Layout                                       | `layout/`：Stack、Grid、Positioning；`navigation/LinkBox`                                                   |
+| ScrollArea                                   | `layout/ScrollArea`                                                                                         |
+| Breadcrumb                                   | `navigation/Breadcrumb`                                                                                     |
+| Clipboard                                    | `actions/Clipboard`                                                                                         |
+| Convenience                                  | `actions/IconButton`；`forms/Checkbox`；`display/`：Heading、Icon；`feedback/Spinner`；`layout/Positioning` |
+
+基础组件提供 Playground 调整配方和常用参数，事件记录到 Actions；
+表单与 store 场景使用独立状态，保留提交结果和交互反馈。
+跨组件的大表单拆分后，数值、验证码、评分等各自保留 FormData 示例。
+文件选择不上传文件，树形异步加载使用本地 Promise，头像使用内嵌 SVG。
+Toast 与命令式弹层在示例卸载时清理实例。
+PasswordInput 的 JSX 默认图标暂不支持自动参数提取，因此该 story 使用显式 argTypes。
+
+当前共 62 个组件族文件、163 个功能示例和 62 个自动文档入口。
+组件预览统一使用 Storybook，不依赖 Stack 路由。