@h-ai/ui 0.1.0-alpha.34 → 0.1.0-alpha.36

package/README.md

@@ -150,7 +150,7 @@ components/
 | `Spinner`        | 加载动画     | `size`, `variant`                                                  |
 | `Progress`       | 进度条       | `value`, `max`, `variant`, `striped`, `animated`                   |
 
-### 组合组件 Compounds（33 个）
+### 组合组件 Compounds（36 个）
 
 #### 表单
 
@@ -212,10 +212,10 @@ components/
 | 组件         | 描述     | 主要属性                                     |
 | ------------ | -------- | -------------------------------------------- |
 | `Tabs`       | 标签页   | `items`, `active`, `type`, `size`            |
-| `Pagination` | 分页（统一 table 风格） | `page`, `total`, `pageSize`, `showTotal`, `showJumper`, `showSizeChanger` |
+| `Pagination` | 分页（统一 table 风格） | `page`, `total`, `pageSize`, `showTotal`, `showJumper`, `showSizeChanger`, `showPageInfo`, `showFirstLast` |
 | `Breadcrumb` | 面包屑   | `items`, `separator`                         |
 | `Steps`      | 步骤条   | `items`, `current`, `direction`, `clickable` |
-| `Dropdown`   | 下拉菜单 | `items`, `trigger`, `position`               |
+| `Dropdown`   | 下拉菜单 | `items`, `trigger`, `triggerClass`, `position` |
 | `Tooltip`    | 提示     | `content`, `position`, `delay`               |
 
 #### 状态占位
@@ -232,7 +232,7 @@ components/
 | ------------ | -------- | ------------------------------------------- |
 | `PageHeader` | 页面头部 | `title`, `description`，支持 `actions` 插槽 |
 
-### 场景组件 Scenes（33 个）
+### 场景组件 Scenes（34 个）
 
 #### App 应用级（7 个）
 
@@ -264,11 +264,13 @@ components/
 
 | 组件           | 描述     | 主要属性                                                 |
 | -------------- | -------- | -------------------------------------------------------- |
-| `FileUpload`   | 文件上传 | `accept`, `maxSize`, `maxFiles`, `multiple`, `uploadUrl` |
-| `ImageUpload`  | 图片上传 | `value`, `accept`, `maxSize`, `aspectRatio`              |
-| `AvatarUpload` | 头像上传 | `value`, `size`, `maxSize`, `fallback`                   |
+| `FileUpload`   | 文件上传 | `accept`, `maxSize`, `maxFiles`, `multiple`, `uploadHandler` |
+| `ImageUpload`  | 图片上传 | `value`, `accept`, `maxSize`, `aspectRatio`, `uploadHandler` |
+| `AvatarUpload` | 头像上传 | `value`, `size`, `maxSize`, `fallback`, `uploadHandler`      |
 | `FileList`     | 文件列表 | `files`, `layout`, `showDelete`, `showDownload`          |
 
+上传组件不内置 presign、请求头或 PUT/POST 协议。应用层通过 `uploadHandler(file, { signal, onProgress })` 调用自己的 service，并返回 `{ url?, response? }`；图片和头像上传需要返回可展示的 `url`。未提供 handler 时，`FileUpload` 只选择文件，图片/头像组件只生成本地预览。
+
 #### Crypto 加密展示（3 个）
 
 | 组件               | 描述     | 主要属性                                                |
@@ -309,6 +311,25 @@ components/
 />
 ```
 
+#### Charts 图表
+
+`Chart type='line'` 默认透传 LayerChart 原生折线图；需要监控看板常见的“分段线 + 圆点 + 最近点 hover + 竖向参考线”时，使用 `lineVariant='segmented-point'`：
+
+```svelte
+<Chart
+  type='line'
+  data={trendData}
+  x='label'
+  y={['rateLimit', 'circuitBreak']}
+  series={trendSeries}
+  lineVariant='segmented-point'
+  tooltipMode='nearest'
+  showCrosshair
+  legend
+  grid
+/>
+```
+
 #### CRUD 场景（5 个）
 
 | 组件                 | 描述         | 主要属性 / 能力 |
@@ -333,7 +354,7 @@ components/
 > - 抽屉：`form.drawerSize` 选预设尺寸，`form.drawerWidth` 传任意 CSS 宽度（优先级更高）。
 > - 弹窗：`form.modalSize` 选预设尺寸，`form.modalWidth` / `form.modalHeight` 传任意 CSS 尺寸。
 >
-> `pagination` 配置分页栏（始终显示）：`showSizeChanger`、`pageSizeOptions`、`showJumper`、`showTotal` 默认开启。
+> `pagination` 配置分页栏（始终显示）：`showSizeChanger`、`pageSizeOptions`、`showJumper`、`showTotal` 默认开启；紧凑视图可用 `showPageInfo` 关闭页码文案、`showFirstLast` 关闭首页 / 末页按钮。
 >
 > `density` 配置列表密度：`'normal'`（默认）或 `'compact'`（紧凑）。它只影响列表行、行内操作、分页与创建/编辑/详情表单元素，不影响页头与筛选栏。
 

package/auto-import.js

@@ -232,9 +232,9 @@ function autoImportHaiUi() {
         return { code: content }
       }
 
-      // 跳过 @h-ai/ui 包自身的文件，避免重复导入
+      // 自动导入只服务应用源码；第三方依赖和 @h-ai/ui 自身必须保持原样，避免改写依赖内部的同名组件。
       const normalizedPath = filename.replace(WINDOWS_PATH_SEPARATOR_REGEX, '/')
-      if (normalizedPath.includes('/packages/ui/') || normalizedPath.includes('/@h-ai/ui/')) {
+      if (normalizedPath.includes('/node_modules/') || normalizedPath.includes('/packages/ui/') || normalizedPath.includes('/@h-ai/ui/')) {
         return { code: content }
       }
 

package/dist/components/compounds/Dropdown.svelte

@@ -13,6 +13,7 @@
     position = 'bottom',
     align = 'start',
     class: className = '',
+    triggerClass = '',
     onselect,
     children,
     ...restProps
@@ -61,6 +62,7 @@
   <BareButton
     tabindex={0}
     role='button'
+    class={triggerClass}
     onclick={toggleDropdown}
     onkeydown={e => e.key === 'Enter' && toggleDropdown()}
   >

package/dist/components/compounds/Modal.svelte

@@ -28,8 +28,6 @@
   }: ModalProps & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
-  // modalElement 持有 overlay 容器引用；不再依赖原生 `<dialog>`，改用 fixed + z-index 叠加。
-  let modalElement: HTMLDivElement | undefined = $state()
 
   // 标题区仅在显式提供标题或自定义 header 时出现；
   // 仅需关闭按钮的场景改为右上角悬浮按钮，避免业务侧额外占一整行头部。
@@ -93,27 +91,9 @@
     onclose?.()
   }
 
-  function handleDialogClick(event: MouseEvent) {
-    if (event.target === event.currentTarget && closeOnBackdrop) {
-      handleClose()
-    }
-  }
-
-  function handleViewportKeydown(event: KeyboardEvent) {
-    if (
-      event.target === event.currentTarget
-      && closeOnBackdrop
-      && (event.key === 'Enter' || event.key === ' ')
-    ) {
-      event.preventDefault()
-      handleClose()
-    }
-  }
-
 </script>
 
 <div {...dataAttributes}
-     bind:this={modalElement}
      class='hai-modal'
      style:display={open ? '' : 'none'}
      aria-hidden={open ? undefined : 'true'}
@@ -124,11 +104,19 @@
 >
   <div
     class='hai-modal__viewport'
-    tabindex='-1'
-    aria-label={uiM('common_close')}
-    onclick={handleDialogClick}
-    onkeydown={handleViewportKeydown}
   >
+    {#if closeOnBackdrop}
+      <button
+        type='button'
+        class='hai-modal__backdrop'
+        aria-label={uiM('common_close')}
+        tabindex='-1'
+        onclick={handleClose}
+      ></button>
+    {:else}
+      <div class='hai-modal__backdrop' aria-hidden='true'></div>
+    {/if}
+
     <div class={modalBoxClass} style={panelStyle}>
       {#if hasFloatingClose}
         <button
@@ -230,12 +218,22 @@
     place-items: center;
     padding: clamp(1rem, 2.6vw, 2rem);
     pointer-events: auto;
+  }
+
+  .hai-modal__backdrop {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: 0;
     background: rgb(15 23 42 / 0.26);
     background: color-mix(in srgb, var(--color-base-content) 15%, transparent);
     backdrop-filter: blur(2px);
   }
 
   .hai-modal__panel {
+    z-index: 1;
     width: var(--hai-modal-width, min(100%, 44rem));
     max-width: min(100%, calc(100vw - clamp(2rem, 5.2vw, 4rem)));
     height: var(--hai-modal-height, auto);

package/dist/components/compounds/Pagination.svelte

@@ -24,6 +24,8 @@
     showTotal = true,
     showJumper = false,
     showSizeChanger = false,
+    showPageInfo = true,
+    showFirstLast = true,
     pageSizeOptions = [10, 20, 50, 100],
     labels = {},
     class: className = '',
@@ -113,21 +115,27 @@
       </div>
     {/if}
 
-    <span class={tableTextClass}>{pageInfoText}</span>
+    {#if showPageInfo}
+      <span class={tableTextClass}>{pageInfoText}</span>
+    {/if}
 
     <div class='flex items-center gap-1'>
-      <BareButton class={navBtnClass} disabled={page === 1} onclick={() => goToPage(1)} ariaLabel='First page'>
-        <span class={cn('icon-[tabler--chevrons-left]', navIconClass)}></span>
-      </BareButton>
+      {#if showFirstLast}
+        <BareButton class={navBtnClass} disabled={page === 1} onclick={() => goToPage(1)} ariaLabel='First page'>
+          <span class={cn('icon-[tabler--chevrons-left]', navIconClass)}></span>
+        </BareButton>
+      {/if}
       <BareButton class={navBtnClass} disabled={page === 1} onclick={() => goToPage(page - 1)} ariaLabel='Previous page'>
         <span class={cn('icon-[tabler--chevron-left]', navIconClass)}></span>
       </BareButton>
       <BareButton class={navBtnClass} disabled={page === totalPages} onclick={() => goToPage(page + 1)} ariaLabel='Next page'>
         <span class={cn('icon-[tabler--chevron-right]', navIconClass)}></span>
       </BareButton>
-      <BareButton class={navBtnClass} disabled={page === totalPages} onclick={() => goToPage(totalPages)} ariaLabel='Last page'>
-        <span class={cn('icon-[tabler--chevrons-right]', navIconClass)}></span>
-      </BareButton>
+      {#if showFirstLast}
+        <BareButton class={navBtnClass} disabled={page === totalPages} onclick={() => goToPage(totalPages)} ariaLabel='Last page'>
+          <span class={cn('icon-[tabler--chevrons-right]', navIconClass)}></span>
+        </BareButton>
+      {/if}
     </div>
 
     {#if showJumper}

package/dist/components/compounds/Tabs.svelte

@@ -62,6 +62,7 @@
   {#each items as item (item.key)}
     <BareButton
       role='tab'
+      ariaSelected={active === item.key}
       class={cn('tab', active === item.key && 'tab-active')}
       disabled={item.disabled}
       onclick={() => handleSelect(item.key)}

package/dist/components/primitives/IconButton.svelte

@@ -9,11 +9,9 @@
 -->
 <script lang='ts'>
   import type { DataAttributes, IconButtonProps } from '../../types.js'
+  import { sanitizeInlineSvg } from '../../internal/icon-safety.js'
   import { cn, getDataAttributes, getSizeClass, getVariantClass } from '../../utils.js'
 
-  const SAFE_INLINE_SVG_REGEX = /^<svg[\s\S]*<\/svg>$/i
-  const UNSAFE_INLINE_SVG_REGEX = /<\s*(?:script|foreignObject|iframe|object|embed|link|meta|img)\b|\son[a-z]+\s*=|(?:href|xlink:href)\s*=\s*['"]\s*(?:javascript:|vbscript:|data:text\/html)/i
-
   const {
     icon,
     label = '',
@@ -72,18 +70,6 @@
     onclick?.(e)
   }
 
-  function sanitizeInlineSvg(markup: string): string {
-    const trimmed = markup.trim()
-    if (!trimmed) {
-      return ''
-    }
-
-    if (!SAFE_INLINE_SVG_REGEX.test(trimmed) || UNSAFE_INLINE_SVG_REGEX.test(trimmed)) {
-      return ''
-    }
-
-    return trimmed
-  }
 </script>
 
 {#if tooltip}

package/dist/components/primitives/Select.svelte

@@ -112,6 +112,8 @@
       document.addEventListener('click', handleClickOutside)
       return () => document.removeEventListener('click', handleClickOutside)
     }
+
+    return undefined
   })
 
   // 计算下拉层位置（fixed，基于触发器视口坐标；空间不足时向上翻转）
@@ -264,7 +266,7 @@
     {/if}
 
     <!-- 右侧图标区域 -->
-    <div class='flex items-center pr-2 shrink-0'>
+    <div class='flex items-center shrink-0'>
       {#if showClear}
         <button
           type='button'

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

@@ -0,0 +1,152 @@
+<!--
+  =============================================================================
+  @h-ai/ui - Chart 组件
+  =============================================================================
+  基于 LayerChart 的统一图表入口，仅处理 type 路由、主题色默认值和基础状态。
+
+  使用 Svelte 5 Runes ($props, $derived)
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { ChartProps, ChartSeries, ChartType } from './chart-types.js'
+  import { uiM } from '../../../messages.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
+  import { DAISYUI_CHART_COLORS, resolveChartColors } from './chart-theme.js'
+  import AreaChart from './renderers/AreaChart.svelte'
+  import BarChart from './renderers/BarChart.svelte'
+  import LineChart from './renderers/LineChart.svelte'
+  import PieChart from './renderers/PieChart.svelte'
+  import ScatterChart from './renderers/ScatterChart.svelte'
+  import 'layerchart/daisyui-5.css'
+
+  const {
+    type,
+    data = [],
+    x,
+    y,
+    series,
+    orientation,
+    size = 'md',
+    title = '',
+    description = '',
+    loading = false,
+    empty = false,
+    class: className = '',
+    ...restProps
+  }: ChartProps = $props()
+
+  const dataAttributes = $derived(getDataAttributes(restProps))
+
+  const chartSizeHeights: Record<NonNullable<ChartProps['size']>, number> = {
+    sm: 200,
+    md: 300,
+    lg: 400,
+  }
+
+  const cartesianChartTypes = new Set<ChartType>(['bar', 'line', 'area'])
+
+  /** 图表可视高度优先尊重 LayerChart 原生 height，未传时使用 @h-ai/ui 的 size 预设。 */
+  const chartHeight = $derived(
+    typeof restProps.height === 'number' ? restProps.height : chartSizeHeights[size],
+  )
+
+  const isEmpty = $derived(empty || data.length === 0)
+  const hasHeader = $derived(Boolean(title || description))
+
+  const rootClass = $derived(
+    cn(
+      'hai-chart flex flex-col gap-3',
+      className,
+    ),
+  )
+
+  const viewportClass = $derived(
+    cn(
+      'hai-chart-viewport min-w-0',
+      (loading || isEmpty) && 'flex items-center justify-center rounded-lg border border-dashed border-base-300 bg-base-200/30',
+    ),
+  )
+
+  /**
+   * 当调用方只传 y 数组时，为常见笛卡尔图自动补 series。
+   * 这让 `<Chart y={['a','b']}>` 仍然得到多系列和主题色，同时不影响显式传入的 LayerChart series。
+   */
+  const normalizedSeries = $derived.by<ChartSeries[] | undefined>(() => {
+    if (series) {
+      if (!cartesianChartTypes.has(type))
+        return series
+
+      return series.map(item => ({
+        ...item,
+        value: item.value ?? item.key,
+      }))
+    }
+
+    if (!cartesianChartTypes.has(type) || !Array.isArray(y))
+      return undefined
+
+    return y.map(key => ({
+      key,
+      label: key,
+      value: key,
+    }))
+  })
+
+  const resolvedSeries = $derived(resolveChartColors(normalizedSeries))
+
+  /** 饼图使用统一 x/y API 时，将 x 映射为 key/label，y 的第一项映射为 value。 */
+  const pieValue = $derived(Array.isArray(y) ? y[0] : y)
+
+  const cartesianLayerProps = $derived({
+    data,
+    height: chartHeight,
+    cRange: DAISYUI_CHART_COLORS,
+    ...restProps,
+    orientation,
+    series: resolvedSeries,
+    x,
+    y,
+  })
+
+  const pieLayerProps = $derived({
+    data,
+    height: chartHeight,
+    key: x,
+    label: x,
+    value: pieValue,
+    cRange: DAISYUI_CHART_COLORS,
+    ...restProps,
+    series: resolvedSeries,
+  })
+</script>
+
+<div {...dataAttributes} class={rootClass}>
+  {#if hasHeader}
+    <div class='space-y-1'>
+      {#if title}
+        <h3 class='text-sm font-semibold text-base-content'>{title}</h3>
+      {/if}
+      {#if description}
+        <p class='text-xs leading-relaxed text-base-content/60'>{description}</p>
+      {/if}
+    </div>
+  {/if}
+
+  <div class={viewportClass} style={`height: ${chartHeight}px;`}>
+    {#if loading}
+      <span class='loading loading-spinner loading-md text-primary' aria-label={uiM('chart_loading')}></span>
+    {:else if isEmpty}
+      <p class='text-sm text-base-content/50'>{uiM('chart_empty')}</p>
+    {:else if type === 'bar'}
+      <BarChart {...cartesianLayerProps} />
+    {:else if type === 'line'}
+      <LineChart {...cartesianLayerProps} />
+    {:else if type === 'area'}
+      <AreaChart {...cartesianLayerProps} />
+    {:else if type === 'pie'}
+      <PieChart {...pieLayerProps} />
+    {:else if type === 'scatter'}
+      <ScatterChart {...cartesianLayerProps} />
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,5 @@
+import type { ChartProps } from './chart-types.js';
+import 'layerchart/daisyui-5.css';
+declare const Chart: import("svelte").Component<ChartProps, {}, "">;
+type Chart = ReturnType<typeof Chart>;
+export default Chart;

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

@@ -0,0 +1,23 @@
+/**
+ * @h-ai/ui — 图表主题色
+ *
+ * 颜色保持 CSS 变量引用，避免在 JS 中读取主题并让 DaisyUI 主题切换自然生效。
+ * @module chart-theme
+ */
+import type { ChartSeries } from './chart-types.js';
+export declare const DAISYUI_CHART_THEME_COLORS: {
+    readonly primary: "var(--color-primary)";
+    readonly secondary: "var(--color-secondary)";
+    readonly accent: "var(--color-accent)";
+    readonly success: "var(--color-success)";
+    readonly warning: "var(--color-warning)";
+    readonly error: "var(--color-error)";
+    readonly info: "var(--color-info)";
+};
+/** DaisyUI 图表主题色按系列分配的稳定顺序。 */
+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 对象。
+ */
+export declare function resolveChartColors<TSeries extends ChartSeries>(series?: readonly TSeries[]): TSeries[] | undefined;

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

@@ -0,0 +1,44 @@
+/**
+ * @h-ai/ui — 图表主题色
+ *
+ * 颜色保持 CSS 变量引用，避免在 JS 中读取主题并让 DaisyUI 主题切换自然生效。
+ * @module chart-theme
+ */
+export const DAISYUI_CHART_THEME_COLORS = {
+    // primary 用作第一条主数据系列，跟随当前 DaisyUI 5 主题主色。
+    primary: 'var(--color-primary)',
+    // secondary 用作第二条系列，和 primary 拉开视觉层级。
+    secondary: 'var(--color-secondary)',
+    // accent 用作第三条系列，补充主题中的强调色。
+    accent: 'var(--color-accent)',
+    // success 用作正向或增长类系列，也作为常规调色板的一员。
+    success: 'var(--color-success)',
+    // warning 用作需要注意的系列，维持 DaisyUI 语义一致性。
+    warning: 'var(--color-warning)',
+    // error 用作异常或下降类系列，也可作为高对比补充色。
+    error: 'var(--color-error)',
+    // info 用作信息类系列，补足多系列图表的第七种主题色。
+    info: 'var(--color-info)',
+};
+/** DaisyUI 图表主题色按系列分配的稳定顺序。 */
+export const DAISYUI_CHART_COLORS = [
+    DAISYUI_CHART_THEME_COLORS.primary,
+    DAISYUI_CHART_THEME_COLORS.secondary,
+    DAISYUI_CHART_THEME_COLORS.accent,
+    DAISYUI_CHART_THEME_COLORS.success,
+    DAISYUI_CHART_THEME_COLORS.warning,
+    DAISYUI_CHART_THEME_COLORS.error,
+    DAISYUI_CHART_THEME_COLORS.info,
+];
+/**
+ * 为缺少 color 的系列补齐 DaisyUI 主题色。
+ * 返回新数组，避免修改调用方传入的 series 对象。
+ */
+export function resolveChartColors(series) {
+    if (!series)
+        return undefined;
+    return series.map((item, index) => ({
+        ...item,
+        color: item.color ?? DAISYUI_CHART_COLORS[index % DAISYUI_CHART_COLORS.length],
+    }));
+}

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

@@ -0,0 +1,77 @@
+/**
+ * @h-ai/ui — 图表组件类型定义
+ *
+ * 统一 Chart 只定义 @h-ai/ui 自身需要的轻量语义，其他字段通过索引签名透传给 LayerChart。
+ * @module chart-types
+ */
+import type { DataAttributes } from '../../../types.js';
+/** 图表数据单元允许的原子值，和 LayerChart 常见 accessor 输入保持一致。 */
+export type ChartDataValue = string | number | Date;
+/** 图表数据项；每个字段都可被 x/y/key/value 等 accessor 引用。 */
+export type ChartDataItem = Record<string, ChartDataValue>;
+/** LayerChart accessor 的常用子集，用于 series.value 等透传配置。 */
+export type ChartAccessor = string | number | ((item: ChartDataItem) => unknown) | ChartAccessor[] | null | undefined;
+/** 统一 Chart 支持的高阶图表类型。 */
+export type ChartType = 'bar' | 'line' | 'area' | 'pie' | 'scatter';
+/** Chart 预设高度档位；具体像素值在 Chart.svelte 中固定映射。 */
+export type ChartSize = 'sm' | 'md' | 'lg';
+/** 折线图渲染变体；default 保持 LayerChart 原生渲染，segmented-point 提供分段线 + 圆点样式。 */
+export type ChartLineVariant = 'default' | 'segmented-point';
+/** 折线图 tooltip 触发方式；nearest 会在绘图区内吸附最近数据点。 */
+export type ChartTooltipMode = 'default' | 'nearest';
+export interface ChartSeries {
+    /** 系列稳定标识；宽表数据通常对应数据项中的数值字段名。 */
+    key: string;
+    /** 系列展示名称；不传时 LayerChart 会按 key 或 value accessor 回退。 */
+    label?: string;
+    /** 系列颜色；不传时由 @h-ai/ui 按 DaisyUI 主题色顺序补齐。 */
+    color?: string;
+    /** LayerChart 原生 value accessor，用于覆盖默认按 key 取值的行为。 */
+    value?: ChartAccessor;
+    /** LayerChart 原生独立数据源，用于 long format 或每个系列不同数据的场景。 */
+    data?: ChartDataItem[];
+    /** 系列初始可见状态；透传给 LayerChart legend/series 状态管理。 */
+    selected?: boolean;
+    /** 传给 LayerChart 内部 mark 组件的原生 props，例如 Bars/Spline/Arc/Points props。 */
+    props?: Record<string, unknown>;
+    /** 单系列最大值；主要用于饼图等需要上限语义的 LayerChart 配置。 */
+    maxValue?: number;
+    /** 保留 LayerChart 新增 series 字段的透传能力，避免薄包装层限制底层 API。 */
+    [key: string]: unknown;
+}
+export interface ChartProps extends DataAttributes {
+    /** 选择内部 LayerChart 高阶组件；必填。 */
+    type: ChartType;
+    /** 图表数据源；空数组会触发内置空态。 */
+    data: ChartDataItem[];
+    /** x 轴字段名；饼图中默认映射为 key 和 label。 */
+    x: string;
+    /** y 轴字段名；传数组时会自动生成多系列配置。 */
+    y: string | string[];
+    /** 系列配置；未指定 color 的项会按 DaisyUI 主题色补齐。 */
+    series?: ChartSeries[];
+    /** LayerChart 原生 orientation；主要用于柱状图和折线图方向控制。 */
+    orientation?: 'horizontal' | 'vertical';
+    /** 折线图渲染变体；仅 type='line' 时生效，默认透传 LayerChart。 */
+    lineVariant?: ChartLineVariant;
+    /** 折线图 tooltip 触发方式；nearest 会在整块绘图区内吸附最近点。 */
+    tooltipMode?: ChartTooltipMode;
+    /** 折线图是否显示随 hover 变化的竖向参考线；仅 segmented-point 变体生效。 */
+    showCrosshair?: boolean;
+    /** 折线图是否显示数据点圆点；仅 segmented-point 变体生效，默认显示。 */
+    showPoints?: boolean;
+    /** @h-ai/ui 预设尺寸；未显式传 LayerChart height 时映射为固定高度。 */
+    size?: ChartSize;
+    /** 图表标题；不传时不渲染标题区域。 */
+    title?: string;
+    /** 图表说明；不传时不渲染说明文本。 */
+    description?: string;
+    /** 加载状态；为 true 时仅显示 DaisyUI loading spinner。 */
+    loading?: boolean;
+    /** 强制空态；为 true 或 data 为空时显示空数据提示。 */
+    empty?: boolean;
+    /** 外层容器类名；用于布局，不会覆盖 LayerChart 内部配置。 */
+    class?: string;
+    /** 其他所有字段会原样透传给当前 type 对应的 LayerChart 组件。 */
+    [key: string]: unknown;
+}

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

@@ -0,0 +1,7 @@
+/**
+ * @h-ai/ui — 图表组件类型定义
+ *
+ * 统一 Chart 只定义 @h-ai/ui 自身需要的轻量语义，其他字段通过索引签名透传给 LayerChart。
+ * @module chart-types
+ */
+export {};

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

@@ -0,0 +1,8 @@
+/**
+ * @h-ai/ui — 图表场景组件
+ *
+ * 仅导出统一 Chart 入口和公共类型；内部 renderer 不对外暴露。
+ * @module index
+ */
+export type { ChartDataItem, ChartLineVariant, ChartProps, ChartSeries, ChartSize, ChartTooltipMode, ChartType } from './chart-types.js';
+export { default as Chart } from './Chart.svelte';

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

@@ -0,0 +1,7 @@
+/**
+ * @h-ai/ui — 图表场景组件
+ *
+ * 仅导出统一 Chart 入口和公共类型；内部 renderer 不对外暴露。
+ * @module index
+ */
+export { default as Chart } from './Chart.svelte';

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

@@ -0,0 +1,18 @@
+<!--
+  =============================================================================
+  @h-ai/ui - AreaChart 内部渲染器
+  =============================================================================
+  对 LayerChart AreaChart 的薄包装，仅做类型收窄和统一导入路径。
+  不对外暴露；由 Chart.svelte 按 type='area' 内部路由调用。
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { AreaChartProps } from 'layerchart'
+  import type { ChartDataItem } from '../chart-types.js'
+  import { AreaChart as LayerAreaChart } from 'layerchart'
+
+  /** 透传给 LayerChart AreaChart 的全部原生属性。 */
+  const { ...props }: AreaChartProps<ChartDataItem> = $props()
+</script>
+
+<LayerAreaChart {...props} />

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

@@ -0,0 +1,5 @@
+import type { AreaChartProps } from 'layerchart';
+import type { ChartDataItem } from '../chart-types.js';
+declare const AreaChart: import("svelte").Component<AreaChartProps<ChartDataItem>, {}, "">;
+type AreaChart = ReturnType<typeof AreaChart>;
+export default AreaChart;