@h-ai/ui 0.1.0-alpha.67 → 0.1.0-alpha.68

package/dist/components/scenes/app/ThemeSelector.svelte

@@ -8,12 +8,14 @@
   @prop {boolean} grouped - 是否按分组显示
 
   @example
-  <ThemeSelector
-    currentTheme={$theme}
-    onchange={(theme) => setTheme(theme)}
-    showPreview
-    grouped
-  />
+  ```ts
+  import { mount, unmount } from 'svelte'
+  import type { ComponentProps } from 'svelte'
+  import { ThemeSelector } from '@h-ai/ui'
+  const props: ComponentProps<typeof ThemeSelector> = { currentTheme: 'light', grouped: true }
+  const component = mount(ThemeSelector, { target: document.body, props })
+  await unmount(component)
+  ```
 -->
 <script lang='ts'>
   import type { ThemeInfo } from '../../../theme-config.js'
@@ -23,6 +25,19 @@
   import { cn, getDataAttributes } from '../../../utils.js'
   import BareButton from '../../primitives/BareButton.svelte'
 
+  /**
+   * ThemeSelector 组件的属性契约；通过公开组件配置使用。
+   *
+   * @example
+   * ```ts
+   * import { mount, unmount } from 'svelte'
+   * import type { ComponentProps } from 'svelte'
+   * import { ThemeSelector } from '@h-ai/ui'
+   * const props: ComponentProps<typeof ThemeSelector> = { currentTheme: 'light', grouped: true }
+   * const component = mount(ThemeSelector, { target: document.body, props })
+   * await unmount(component)
+   * ```
+   */
   interface Props {
     currentTheme?: string
     /** 选择主题按钮的 aria-label */

package/dist/components/scenes/app/ThemeSelector.svelte.d.ts

@@ -1,4 +1,17 @@
 import type { DataAttributes } from '../../../types.js';
+/**
+ * ThemeSelector 组件的属性契约；通过公开组件配置使用。
+ *
+ * @example
+ * ```ts
+ * import { mount, unmount } from 'svelte'
+ * import type { ComponentProps } from 'svelte'
+ * import { ThemeSelector } from '@h-ai/ui'
+ * const props: ComponentProps<typeof ThemeSelector> = { currentTheme: 'light', grouped: true }
+ * const component = mount(ThemeSelector, { target: document.body, props })
+ * await unmount(component)
+ * ```
+ */
 interface Props {
     currentTheme?: string;
     /** 选择主题按钮的 aria-label */
@@ -23,12 +36,14 @@ type $$ComponentProps = Props & DataAttributes;
  * @prop {boolean} grouped - 是否按分组显示
  *
  * @example
- * <ThemeSelector
- *   currentTheme={$theme}
- *   onchange={(theme) => setTheme(theme)}
- *   showPreview
- *   grouped
- * />
+ * ```ts
+ * import { mount, unmount } from 'svelte'
+ * import type { ComponentProps } from 'svelte'
+ * import { ThemeSelector } from '@h-ai/ui'
+ * const props: ComponentProps<typeof ThemeSelector> = { currentTheme: 'light', grouped: true }
+ * const component = mount(ThemeSelector, { target: document.body, props })
+ * await unmount(component)
+ * ```
  */
 declare const ThemeSelector: import("svelte").Component<$$ComponentProps, {}, "">;
 type ThemeSelector = ReturnType<typeof ThemeSelector>;

package/dist/components/scenes/app/ThemeToggle.svelte

@@ -8,10 +8,14 @@
   @prop {string} darkTheme - 暗色主题名称
 
   @example
-  <ThemeToggle
-    currentTheme={$theme}
-    onchange={(theme) => themeStore.set(theme)}
-  />
+  ```ts
+  import { mount, unmount } from 'svelte'
+  import type { ComponentProps } from 'svelte'
+  import { ThemeToggle } from '@h-ai/ui'
+  const props: ComponentProps<typeof ThemeToggle> = { currentTheme: 'light', lightTheme: 'light', darkTheme: 'dark' }
+  const component = mount(ThemeToggle, { target: document.body, props })
+  await unmount(component)
+  ```
 -->
 <script lang='ts'>
   import type { DataAttributes } from '../../../types.js'
@@ -20,6 +24,19 @@
   import { getDataAttributes } from '../../../utils.js'
   import IconButton from '../../primitives/IconButton.svelte'
 
+  /**
+   * ThemeToggle 组件的属性契约；通过公开组件配置使用。
+   *
+   * @example
+   * ```ts
+   * import { mount, unmount } from 'svelte'
+   * import type { ComponentProps } from 'svelte'
+   * import { ThemeToggle } from '@h-ai/ui'
+   * const props: ComponentProps<typeof ThemeToggle> = { currentTheme: 'light', lightTheme: 'light', darkTheme: 'dark' }
+   * const component = mount(ThemeToggle, { target: document.body, props })
+   * await unmount(component)
+   * ```
+   */
   interface Props {
     currentTheme?: string
     onchange?: (theme: string) => void

package/dist/components/scenes/app/ThemeToggle.svelte.d.ts

@@ -1,4 +1,17 @@
 import type { DataAttributes } from '../../../types.js';
+/**
+ * ThemeToggle 组件的属性契约；通过公开组件配置使用。
+ *
+ * @example
+ * ```ts
+ * import { mount, unmount } from 'svelte'
+ * import type { ComponentProps } from 'svelte'
+ * import { ThemeToggle } from '@h-ai/ui'
+ * const props: ComponentProps<typeof ThemeToggle> = { currentTheme: 'light', lightTheme: 'light', darkTheme: 'dark' }
+ * const component = mount(ThemeToggle, { target: document.body, props })
+ * await unmount(component)
+ * ```
+ */
 interface Props {
     currentTheme?: string;
     onchange?: (theme: string) => void;
@@ -21,10 +34,14 @@ type $$ComponentProps = Props & DataAttributes;
  * @prop {string} darkTheme - 暗色主题名称
  *
  * @example
- * <ThemeToggle
- *   currentTheme={$theme}
- *   onchange={(theme) => themeStore.set(theme)}
- * />
+ * ```ts
+ * import { mount, unmount } from 'svelte'
+ * import type { ComponentProps } from 'svelte'
+ * import { ThemeToggle } from '@h-ai/ui'
+ * const props: ComponentProps<typeof ThemeToggle> = { currentTheme: 'light', lightTheme: 'light', darkTheme: 'dark' }
+ * const component = mount(ThemeToggle, { target: document.body, props })
+ * await unmount(component)
+ * ```
  */
 declare const ThemeToggle: import("svelte").Component<$$ComponentProps, {}, "">;
 type ThemeToggle = ReturnType<typeof ThemeToggle>;

package/dist/components/scenes/app/index.d.ts

@@ -1,7 +1,7 @@
 /**
  * @h-ai/ui — 应用级场景组件 (App Scenes)
  *
- * 面向应用层的通用功能组件，包含设置、反馈、语言/主题切换等。 内置中英文翻译，自动响应全局 locale。
+ * 面向应用层的通用功能组件，包含设置、反馈、语言/主题切换等。 内置中英日文翻译，自动响应全局 locale。
  * @module index
  */
 export { default as FeedbackModal } from './FeedbackModal.svelte';

package/dist/components/scenes/app/index.js

@@ -1,7 +1,7 @@
 /**
  * @h-ai/ui — 应用级场景组件 (App Scenes)
  *
- * 面向应用层的通用功能组件，包含设置、反馈、语言/主题切换等。 内置中英文翻译，自动响应全局 locale。
+ * 面向应用层的通用功能组件，包含设置、反馈、语言/主题切换等。 内置中英日文翻译，自动响应全局 locale。
  * @module index
  */
 export { default as FeedbackModal } from './FeedbackModal.svelte';

package/dist/components/scenes/charts/Chart.svelte

@@ -1,4 +1,5 @@
 <!--
+  @component Chart
   =============================================================================
   @h-ai/ui - Chart 组件
   =============================================================================
@@ -6,6 +7,16 @@
 
   使用 Svelte 5 Runes ($props, $derived)
   =============================================================================
+
+  @example
+  ```ts
+  import { mount, unmount } from 'svelte'
+  import type { ComponentProps } from 'svelte'
+  import { Chart } from '@h-ai/ui'
+  const props: ComponentProps<typeof Chart> = { type: 'line', data: [{ month: 'Jan', sales: 42 }], x: 'month', y: 'sales', lineVariant: 'segmented-point', tooltipMode: 'nearest' }
+  const component = mount(Chart, { target: document.body, props })
+  await unmount(component)
+  ```
 -->
 <script lang='ts'>
   import type { ChartProps, ChartSeries, ChartType } from './chart-types.js'

package/dist/components/scenes/charts/Chart.svelte.d.ts

@@ -1,5 +1,25 @@
 import type { ChartProps } from './chart-types.js';
 import 'layerchart/daisyui-5.css';
+/**
+ * Chart
+ * =============================================================================
+ * @h-ai/ui - Chart 组件
+ * =============================================================================
+ * 基于 LayerChart 的统一图表入口，仅处理 type 路由、主题色默认值和基础状态。
+ *
+ * 使用 Svelte 5 Runes ($props, $derived)
+ * =============================================================================
+ *
+ * @example
+ * ```ts
+ * import { mount, unmount } from 'svelte'
+ * import type { ComponentProps } from 'svelte'
+ * import { Chart } from '@h-ai/ui'
+ * const props: ComponentProps<typeof Chart> = { type: 'line', data: [{ month: 'Jan', sales: 42 }], x: 'month', y: 'sales', lineVariant: 'segmented-point', tooltipMode: 'nearest' }
+ * const component = mount(Chart, { target: document.body, props })
+ * await unmount(component)
+ * ```
+ */
 declare const Chart: import("svelte").Component<ChartProps, {}, "">;
 type Chart = ReturnType<typeof Chart>;
 export default Chart;

package/dist/components/scenes/charts/chart-theme.d.ts

@@ -5,6 +5,14 @@
  * @module chart-theme
  */
 import type { ChartSeries } from './chart-types.js';
+/**
+ * 图表使用的 DaisyUI 语义 CSS 变量映射；切换主题时无需重新取色。
+ *
+ * @example 模块内部上下文
+ * ```ts
+ * const series = [{ key: 'sales', color: DAISYUI_CHART_THEME_COLORS.primary }]
+ * ```
+ */
 export declare const DAISYUI_CHART_THEME_COLORS: {
     readonly primary: "var(--color-primary)";
     readonly secondary: "var(--color-secondary)";
@@ -14,10 +22,26 @@ export declare const DAISYUI_CHART_THEME_COLORS: {
     readonly error: "var(--color-error)";
     readonly info: "var(--color-info)";
 };
-/** DaisyUI 图表主题色按系列分配的稳定顺序。 */
+/**
+ * DaisyUI 图表主题色按系列分配的稳定顺序。
+ *
+ * @example 模块内部上下文
+ * ```ts
+ * const firstColor = DAISYUI_CHART_COLORS[0]
+ * const series = [{ key: 'sales', color: firstColor }]
+ * ```
+ */
 export declare const DAISYUI_CHART_COLORS: readonly ["var(--color-primary)", "var(--color-secondary)", "var(--color-accent)", "var(--color-success)", "var(--color-warning)", "var(--color-error)", "var(--color-info)"];
 /**
  * 为缺少 color 的系列补齐 DaisyUI 主题色。
  * 返回新数组，避免修改调用方传入的 series 对象。
+ * @param series - 系列配置；缺失颜色按主题顺序补齐。
+ * @returns 补齐主题色的新系列数组；不修改输入，未提供系列时返回 undefined。
+ * @typeParam TSeries - 字段值或资源条目的数据类型。
+ *
+ * @example 模块内部上下文
+ * ```ts
+ * const series = resolveChartColors([{ key: 'sales', label: '销量' }, { key: 'cost', label: '成本', color: '#ef4444' }])
+ * ```
  */
 export declare function resolveChartColors<TSeries extends ChartSeries>(series?: readonly TSeries[]): TSeries[] | undefined;

package/dist/components/scenes/charts/chart-theme.js

@@ -4,6 +4,14 @@
  * 颜色保持 CSS 变量引用，避免在 JS 中读取主题并让 DaisyUI 主题切换自然生效。
  * @module chart-theme
  */
+/**
+ * 图表使用的 DaisyUI 语义 CSS 变量映射；切换主题时无需重新取色。
+ *
+ * @example 模块内部上下文
+ * ```ts
+ * const series = [{ key: 'sales', color: DAISYUI_CHART_THEME_COLORS.primary }]
+ * ```
+ */
 export const DAISYUI_CHART_THEME_COLORS = {
     // primary 用作第一条主数据系列，跟随当前 DaisyUI 5 主题主色。
     primary: 'var(--color-primary)',
@@ -20,7 +28,15 @@ export const DAISYUI_CHART_THEME_COLORS = {
     // info 用作信息类系列，补足多系列图表的第七种主题色。
     info: 'var(--color-info)',
 };
-/** DaisyUI 图表主题色按系列分配的稳定顺序。 */
+/**
+ * DaisyUI 图表主题色按系列分配的稳定顺序。
+ *
+ * @example 模块内部上下文
+ * ```ts
+ * const firstColor = DAISYUI_CHART_COLORS[0]
+ * const series = [{ key: 'sales', color: firstColor }]
+ * ```
+ */
 export const DAISYUI_CHART_COLORS = [
     DAISYUI_CHART_THEME_COLORS.primary,
     DAISYUI_CHART_THEME_COLORS.secondary,
@@ -33,6 +49,14 @@ export const DAISYUI_CHART_COLORS = [
 /**
  * 为缺少 color 的系列补齐 DaisyUI 主题色。
  * 返回新数组，避免修改调用方传入的 series 对象。
+ * @param series - 系列配置；缺失颜色按主题顺序补齐。
+ * @returns 补齐主题色的新系列数组；不修改输入，未提供系列时返回 undefined。
+ * @typeParam TSeries - 字段值或资源条目的数据类型。
+ *
+ * @example 模块内部上下文
+ * ```ts
+ * const series = resolveChartColors([{ key: 'sales', label: '销量' }, { key: 'cost', label: '成本', color: '#ef4444' }])
+ * ```
  */
 export function resolveChartColors(series) {
     if (!series)

package/dist/components/scenes/charts/chart-types.d.ts

@@ -5,20 +5,83 @@
  * @module chart-types
  */
 import type { DataAttributes } from '../../../types.js';
-/** 图表数据单元允许的原子值，和 LayerChart 常见 accessor 输入保持一致。 */
+/**
+ * 图表数据单元允许的原子值，和 LayerChart 常见 accessor 输入保持一致。
+ *
+ * @example 模块内部上下文
+ * ```ts
+ * const example: ChartDataValue = 42
+ * ```
+ */
 export type ChartDataValue = string | number | Date;
-/** 图表数据项；每个字段都可被 x/y/key/value 等 accessor 引用。 */
+/**
+ * 图表数据项；每个字段都可被 x/y/key/value 等 accessor 引用。
+ *
+ * @example
+ * ```ts
+ * import type { ChartDataItem } from '@h-ai/ui'
+ * const example: ChartDataItem = { month: 'Jan', sales: 42 }
+ * ```
+ */
 export type ChartDataItem = Record<string, ChartDataValue>;
-/** LayerChart accessor 的常用子集，用于 series.value 等透传配置。 */
+/**
+ * LayerChart accessor 的常用子集，用于 series.value 等透传配置。
+ *
+ * @example 模块内部上下文
+ * ```ts
+ * const example: ChartAccessor = 'sales'
+ * ```
+ */
 export type ChartAccessor = string | number | ((item: ChartDataItem) => unknown) | ChartAccessor[] | null | undefined;
-/** 统一 Chart 支持的高阶图表类型。 */
+/**
+ * 统一 Chart 支持的高阶图表类型。
+ *
+ * @example
+ * ```ts
+ * import type { ChartType } from '@h-ai/ui'
+ * const example: ChartType = 'line'
+ * ```
+ */
 export type ChartType = 'bar' | 'line' | 'area' | 'pie' | 'scatter';
-/** Chart 预设高度档位；具体像素值在 Chart.svelte 中固定映射。 */
+/**
+ * Chart 预设高度档位；具体像素值在 Chart.svelte 中固定映射。
+ *
+ * @example
+ * ```ts
+ * import type { ChartSize } from '@h-ai/ui'
+ * const example: ChartSize = 'md'
+ * ```
+ */
 export type ChartSize = 'sm' | 'md' | 'lg';
-/** 折线图渲染变体；default 保持 LayerChart 原生渲染，segmented-point 提供分段线 + 圆点样式。 */
+/**
+ * 折线图渲染变体；default 保持 LayerChart 原生渲染，segmented-point 提供分段线 + 圆点样式。
+ *
+ * @example
+ * ```ts
+ * import type { ChartLineVariant } from '@h-ai/ui'
+ * const example: ChartLineVariant = 'segmented-point'
+ * ```
+ */
 export type ChartLineVariant = 'default' | 'segmented-point';
-/** 折线图 tooltip 触发方式；nearest 会在绘图区内吸附最近数据点。 */
+/**
+ * 折线图 tooltip 触发方式；nearest 会在绘图区内吸附最近数据点。
+ *
+ * @example
+ * ```ts
+ * import type { ChartTooltipMode } from '@h-ai/ui'
+ * const example: ChartTooltipMode = 'nearest'
+ * ```
+ */
 export type ChartTooltipMode = 'default' | 'nearest';
+/**
+ * 图表系列配置；key 关联数据字段，未指定的颜色由当前主题补齐。
+ *
+ * @example
+ * ```ts
+ * import type { ChartSeries } from '@h-ai/ui'
+ * const example: ChartSeries = { key: 'sales', label: '销量', color: '#2563eb' }
+ * ```
+ */
 export interface ChartSeries {
     /** 系列稳定标识；宽表数据通常对应数据项中的数值字段名。 */
     key: string;
@@ -39,6 +102,19 @@ export interface ChartSeries {
     /** 保留 LayerChart 新增 series 字段的透传能力，避免薄包装层限制底层 API。 */
     [key: string]: unknown;
 }
+/**
+ * 统一图表的类型、数据和坐标映射；其他配置透传当前 LayerChart renderer。
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { Chart } from '@h-ai/ui'
+ *   import type { ChartProps } from '@h-ai/ui'
+ *   const props: ChartProps = { type: 'line', data: [{ month: 'Jan', sales: 42 }], x: 'month', y: 'sales', lineVariant: 'segmented-point', tooltipMode: 'nearest' }
+ * </script>
+ * <Chart {...props} />
+ * ```
+ */
 export interface ChartProps extends DataAttributes {
     /** 选择内部 LayerChart 高阶组件；必填。 */
     type: ChartType;

package/dist/components/scenes/charts/renderers/LineChart.svelte

@@ -17,6 +17,14 @@
   } from '../chart-types.js'
   import { LineChart as LayerLineChart } from 'layerchart'
 
+  /**
+   * 分段折线图单个数据点，保留展示标签与数值。
+   *
+   * @example 模块内部上下文
+   * ```ts
+   * const example: SegmentedLinePoint = { label: 'Jan', value: 42 }
+   * ```
+   */
   interface SegmentedLinePoint {
     /** 横轴展示标签，来源于 Chart 的 x accessor。 */
     label: string
@@ -24,6 +32,14 @@
     value: number
   }
 
+  /**
+   * 分段折线图归一化后的系列与样式。
+   *
+   * @example 模块内部上下文
+   * ```ts
+   * const example: SegmentedLineSeries = { key: 'sales', label: '销量', color: '#2563eb', points: [{ label: 'Jan', value: 42 }], dashed: false }
+   * ```
+   */
   interface SegmentedLineSeries {
     /** 系列稳定标识，优先来自 ChartSeries.key。 */
     key: string
@@ -37,6 +53,14 @@
     dashed: boolean
   }
 
+  /**
+   * 分段折线图中按比例映射到 SVG 视口的数据点。
+   *
+   * @example 模块内部上下文
+   * ```ts
+   * const example: SegmentedLineCoordinate = { label: 'Jan', value: 42, x: 120, y: 80 }
+   * ```
+   */
   interface SegmentedLineCoordinate extends SegmentedLinePoint {
     /** SVG viewBox 中的横向坐标。 */
     x: number
@@ -44,6 +68,14 @@
     y: number
   }
 
+  /**
+   * 折线图 tooltip 内的一条系列数据。
+   *
+   * @example 模块内部上下文
+   * ```ts
+   * const example: SegmentedLineTooltipItem = { label: '销量', value: 42, color: '#2563eb' }
+   * ```
+   */
   interface SegmentedLineTooltipItem {
     /** tooltip 中展示的系列名称。 */
     label: string
@@ -53,6 +85,14 @@
     color: string
   }
 
+  /**
+   * 当前吸附数据点的 tooltip 位置与多系列内容。
+   *
+   * @example 模块内部上下文
+   * ```ts
+   * const example: SegmentedLineTooltip = { x: 120, leftPercent: 25, topPercent: 50, label: 'Jan', items: [{ label: '销量', value: 42, color: '#2563eb' }] }
+   * ```
+   */
   interface SegmentedLineTooltip {
     /** 当前吸附数据点在 SVG 坐标系内的横向位置。 */
     x: number
@@ -66,6 +106,19 @@
     items: SegmentedLineTooltipItem[]
   }
 
+  /**
+   * LineChart 组件的属性契约；通过公开组件配置使用。
+   *
+   * @example
+   * ```ts
+   * import { mount, unmount } from 'svelte'
+   * import type { ComponentProps } from 'svelte'
+   * import { Chart } from '@h-ai/ui'
+   * const props: ComponentProps<typeof Chart> = { type: 'line', data: [{ month: 'Jan', sales: 42 }], x: 'month', y: 'sales', lineVariant: 'segmented-point', tooltipMode: 'nearest' }
+   * const component = mount(Chart, { target: document.body, props })
+   * await unmount(component)
+   * ```
+   */
   interface Props extends LineChartProps<ChartDataItem> {
     /** 折线图渲染变体；default 保持 LayerChart 原生渲染。 */
     lineVariant?: ChartLineVariant

package/dist/components/scenes/charts/renderers/LineChart.svelte.d.ts

@@ -1,5 +1,18 @@
 import type { LineChartProps } from 'layerchart';
 import type { ChartDataItem, ChartLineVariant, ChartTooltipMode } from '../chart-types.js';
+/**
+ * LineChart 组件的属性契约；通过公开组件配置使用。
+ *
+ * @example
+ * ```ts
+ * import { mount, unmount } from 'svelte'
+ * import type { ComponentProps } from 'svelte'
+ * import { Chart } from '@h-ai/ui'
+ * const props: ComponentProps<typeof Chart> = { type: 'line', data: [{ month: 'Jan', sales: 42 }], x: 'month', y: 'sales', lineVariant: 'segmented-point', tooltipMode: 'nearest' }
+ * const component = mount(Chart, { target: document.body, props })
+ * await unmount(component)
+ * ```
+ */
 interface Props extends LineChartProps<ChartDataItem> {
     /** 折线图渲染变体；default 保持 LayerChart 原生渲染。 */
     lineVariant?: ChartLineVariant;

package/dist/components/scenes/crud/CrudDeleteConfirm.svelte

@@ -4,6 +4,16 @@
 
   使用 Svelte 5 Runes ($props)
   使用 compounds 组件：Confirm
+
+  @example
+  ```ts
+  import { mount, unmount } from 'svelte'
+  import type { ComponentProps } from 'svelte'
+  import { CrudDeleteConfirm } from '@h-ai/ui'
+  const props: ComponentProps<typeof CrudDeleteConfirm> = { open: true, title: '删除用户', message: '删除后不可恢复。' }
+  const component = mount(CrudDeleteConfirm, { target: document.body, props })
+  await unmount(component)
+  ```
 -->
 <script lang='ts'>
   import type { DataAttributes } from '../../../types.js'

package/dist/components/scenes/crud/CrudDeleteConfirm.svelte.d.ts

@@ -14,6 +14,16 @@ type $$ComponentProps = {
  *
  * 使用 Svelte 5 Runes ($props)
  * 使用 compounds 组件：Confirm
+ *
+ * @example
+ * ```ts
+ * import { mount, unmount } from 'svelte'
+ * import type { ComponentProps } from 'svelte'
+ * import { CrudDeleteConfirm } from '@h-ai/ui'
+ * const props: ComponentProps<typeof CrudDeleteConfirm> = { open: true, title: '删除用户', message: '删除后不可恢复。' }
+ * const component = mount(CrudDeleteConfirm, { target: document.body, props })
+ * await unmount(component)
+ * ```
  */
 declare const CrudDeleteConfirm: import("svelte").Component<$$ComponentProps, {}, "open">;
 type CrudDeleteConfirm = ReturnType<typeof CrudDeleteConfirm>;

package/dist/components/scenes/crud/CrudDetailDrawer.svelte

@@ -16,6 +16,14 @@
   import Badge from '../../primitives/Badge.svelte'
   import Button from '../../primitives/Button.svelte'
 
+  /**
+   * 详情/列表对字段定义的局部视图，不是独立的公开资源模型。
+   *
+   * @example 模块内部上下文
+   * ```ts
+   * const example: FieldDef = { id: 'email', label: '邮箱', type: 'email', inDetail: true }
+   * ```
+   */
   type FieldDef = {
     id: string
     label: string | (() => string)

package/dist/components/scenes/crud/CrudDetailDrawer.svelte.d.ts

@@ -1,6 +1,14 @@
 import type { Snippet } from 'svelte';
 import type { DataAttributes, Size } from '../../../types.js';
 import type { CrudFormVariant } from './crud-types.js';
+/**
+ * 详情/列表对字段定义的局部视图，不是独立的公开资源模型。
+ *
+ * @example 模块内部上下文
+ * ```ts
+ * const example: FieldDef = { id: 'email', label: '邮箱', type: 'email', inDetail: true }
+ * ```
+ */
 type FieldDef = {
     id: string;
     label: string | (() => string);

package/dist/components/scenes/crud/CrudDetailPanel.svelte

@@ -4,6 +4,16 @@
 
   使用 Svelte 5 Runes ($props, $derived)
   使用 compounds 组件：Drawer, Modal, Badge
+
+  @example
+  ```ts
+  import { mount, unmount } from 'svelte'
+  import type { ComponentProps } from 'svelte'
+  import { CrudDetailPanel } from '@h-ai/ui'
+  const props: ComponentProps<typeof CrudDetailPanel> = { open: true, title: '用户详情', item: { email: 'ada@example.com' }, fields: [{ id: 'email', label: '邮箱', type: 'email' }] }
+  const component = mount(CrudDetailPanel, { target: document.body, props })
+  await unmount(component)
+  ```
 -->
 <script lang='ts'>
   import type { Snippet } from 'svelte'
@@ -16,6 +26,14 @@
   import Badge from '../../primitives/Badge.svelte'
   import Button from '../../primitives/Button.svelte'
 
+  /**
+   * 详情/列表对字段定义的局部视图，不是独立的公开资源模型。
+   *
+   * @example 模块内部上下文
+   * ```ts
+   * const example: FieldDef = { id: 'email', label: '邮箱', type: 'email', inDetail: true }
+   * ```
+   */
   type FieldDef = {
     id: string
     label: string | (() => string)

package/dist/components/scenes/crud/CrudDetailPanel.svelte.d.ts

@@ -1,6 +1,14 @@
 import type { Snippet } from 'svelte';
 import type { DataAttributes, Size } from '../../../types.js';
 import type { CrudDensity, CrudFormVariant } from './crud-types.js';
+/**
+ * 详情/列表对字段定义的局部视图，不是独立的公开资源模型。
+ *
+ * @example 模块内部上下文
+ * ```ts
+ * const example: FieldDef = { id: 'email', label: '邮箱', type: 'email', inDetail: true }
+ * ```
+ */
 type FieldDef = {
     id: string;
     label: string | (() => string);
@@ -42,6 +50,16 @@ type $$ComponentProps = {
  *
  * 使用 Svelte 5 Runes ($props, $derived)
  * 使用 compounds 组件：Drawer, Modal, Badge
+ *
+ * @example
+ * ```ts
+ * import { mount, unmount } from 'svelte'
+ * import type { ComponentProps } from 'svelte'
+ * import { CrudDetailPanel } from '@h-ai/ui'
+ * const props: ComponentProps<typeof CrudDetailPanel> = { open: true, title: '用户详情', item: { email: 'ada@example.com' }, fields: [{ id: 'email', label: '邮箱', type: 'email' }] }
+ * const component = mount(CrudDetailPanel, { target: document.body, props })
+ * await unmount(component)
+ * ```
  */
 declare const CrudDetailPanel: import("svelte").Component<$$ComponentProps, {}, "open">;
 type CrudDetailPanel = ReturnType<typeof CrudDetailPanel>;