@h-ai/ui 0.1.0-alpha.16 → 0.1.0-alpha.19

package/README.md

@@ -196,15 +196,16 @@ components/
 | ------------ | -------- | ------------------------------------------- |
 | `PageHeader` | 页面头部 | `title`, `description`，支持 `actions` 插槽 |
 
-### 场景组件 Scenes（19 个）
+### 场景组件 Scenes（20 个）
 
-#### App 应用级（5 个）
+#### App 应用级（6 个）
 
 | 组件             | 描述             | 主要属性           |
 | ---------------- | ---------------- | ------------------ |
 | `FeedbackModal`  | 反馈模态框       | `open`, `onsubmit` |
 | `SettingsModal`  | 设置模态框       | `open`, `onclose`  |
 | `LanguageSwitch` | 语言切换         | 无需 Props         |
+| `ThemeColorPicker` | 主题色选择器   | `value`, `presets`, `onchange` |
 | `ThemeSelector`  | 完整主题选择面板 | 无需 Props         |
 | `ThemeToggle`    | 明/暗主题切换    | 无需 Props         |
 

package/auto-import.d.ts

@@ -69,6 +69,7 @@ declare global {
   const FeedbackModal: typeof import('@h-ai/ui')['FeedbackModal']
   const LanguageSwitch: typeof import('@h-ai/ui')['LanguageSwitch']
   const SettingsModal: typeof import('@h-ai/ui')['SettingsModal']
+  const ThemeColorPicker: typeof import('@h-ai/ui')['ThemeColorPicker']
   const ThemeSelector: typeof import('@h-ai/ui')['ThemeSelector']
   const ThemeToggle: typeof import('@h-ai/ui')['ThemeToggle']
 

package/auto-import.js

@@ -67,6 +67,7 @@ const UI_COMPONENTS = new Set([
   'FeedbackModal',
   'LanguageSwitch',
   'SettingsModal',
+  'ThemeColorPicker',
   'ThemeSelector',
   'ThemeToggle',
   // scenes - iam

package/dist/components/compounds/Alert.svelte

@@ -58,9 +58,7 @@
 
     {#if dismissible}
       <IconButton size='sm' variant='ghost' label={uiM('common_close')} onclick={handleClose}>
-        {#snippet children()}
-          <span class='icon-[tabler--x] size-4'></span>
-        {/snippet}
+        <span class='icon-[tabler--x] size-4'></span>
       </IconButton>
     {/if}
   </div>

package/dist/components/compounds/Breadcrumb.svelte

@@ -26,7 +26,7 @@
 
 <div class={breadcrumbClass}>
   <ul>
-    {#each items as item, index}
+    {#each items as item, index (item.href ?? `${item.label}:${index}`)}
       <li>
         {#if item.href && index < items.length - 1}
           <a href={item.href}>

package/dist/components/compounds/Calendar.svelte

@@ -84,11 +84,11 @@
         </BitsCalendar.NextButton>
       </BitsCalendar.Header>
 
-      {#each months as month}
+      {#each months as month (month.value.toString())}
         <BitsCalendar.Grid class='w-full border-collapse'>
           <BitsCalendar.GridHead>
             <BitsCalendar.GridRow class='flex w-full'>
-              {#each weekdays as day}
+              {#each weekdays as day (day)}
                 <BitsCalendar.HeadCell class='w-9 text-center text-xs font-medium text-base-content/50'>
                   {day}
                 </BitsCalendar.HeadCell>
@@ -97,9 +97,9 @@
           </BitsCalendar.GridHead>
 
           <BitsCalendar.GridBody>
-            {#each month.weeks as weekDates}
+            {#each month.weeks as weekDates, weekIndex (weekIndex)}
               <BitsCalendar.GridRow class='flex w-full'>
-                {#each weekDates as date}
+                {#each weekDates as date (date.toString())}
                   <BitsCalendar.Cell {date} month={month.value} class='p-0'>
                     <BitsCalendar.Day class='inline-flex size-9 items-center justify-center rounded-lg text-sm transition-colors hover:bg-base-200 data-[selected]:bg-primary data-[selected]:text-primary-content data-[disabled]:opacity-30 data-[unavailable]:line-through data-[unavailable]:opacity-30 data-[outside-month]:text-base-content/30'>
                       {date.day}

package/dist/components/compounds/DataTable.svelte

@@ -82,7 +82,7 @@
   <table class='table w-full text-[13px]' class:table-zebra={striped}>
     <thead>
       <tr class='text-xs text-base-content/50 border-b border-base-content/6'>
-        {#each columns as col}
+        {#each columns as col (String(col.key))}
           <th
             style={col.width ? `width: ${col.width}` : ''}
             class='{getAlignClass(col.align)} font-medium'
@@ -115,7 +115,7 @@
       {:else}
         {#each data as item (item[keyField])}
           <tr class={hoverable ? 'hover:bg-base-content/3 transition-colors' : ''}>
-            {#each columns as col}
+            {#each columns as col (String(col.key))}
               <td class={getAlignClass(col.align)}>{getValue(item, col)}</td>
             {/each}
             {#if actions}

package/dist/components/compounds/DatePicker.svelte

@@ -70,7 +70,7 @@
   >
     <BitsDatePicker.Input class="input flex items-center gap-0.5 pr-2 {error ? 'input-error' : ''}">
       {#snippet children({ segments })}
-        {#each segments as { part, value: segValue }}
+        {#each segments as { part, value: segValue }, index (`${part}-${index}`)}
           <BitsDatePicker.Segment
             {part}
             class='rounded px-0.5 py-0.5 text-sm tabular-nums focus:bg-primary focus:text-primary-content focus:outline-none data-[type=literal]:px-0 data-[type=literal]:text-base-content/50'
@@ -97,11 +97,11 @@
             </BitsDatePicker.NextButton>
           </BitsDatePicker.Header>
 
-          {#each months as month}
+          {#each months as month (month.value.toString())}
             <BitsDatePicker.Grid class='w-full border-collapse'>
               <BitsDatePicker.GridHead>
                 <BitsDatePicker.GridRow class='flex w-full'>
-                  {#each weekdays as day}
+                  {#each weekdays as day (day)}
                     <BitsDatePicker.HeadCell class='w-9 text-center text-xs font-medium text-base-content/50'>
                       {day}
                     </BitsDatePicker.HeadCell>
@@ -110,9 +110,9 @@
               </BitsDatePicker.GridHead>
 
               <BitsDatePicker.GridBody>
-                {#each month.weeks as weekDates}
+                {#each month.weeks as weekDates, weekIndex (weekIndex)}
                   <BitsDatePicker.GridRow class='flex w-full'>
-                    {#each weekDates as date}
+                    {#each weekDates as date (date.toString())}
                       <BitsDatePicker.Cell {date} month={month.value} class='p-0'>
                         <BitsDatePicker.Day class='inline-flex size-9 items-center justify-center rounded-lg text-sm transition-colors hover:bg-base-200 data-[selected]:bg-primary data-[selected]:text-primary-content data-[disabled]:opacity-30 data-[unavailable]:line-through data-[unavailable]:opacity-30 data-[outside-month]:text-base-content/30'>
                           {date.day}

package/dist/components/compounds/Drawer.svelte

@@ -96,11 +96,9 @@
 
         {#if showClose}
           <IconButton size='sm' variant='ghost' label={uiM('common_close')} onclick={handleClose}>
-            {#snippet children()}
-              <svg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
-                <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18L18 6M6 6l12 12' />
-              </svg>
-            {/snippet}
+            <svg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+              <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18L18 6M6 6l12 12' />
+            </svg>
           </IconButton>
         {/if}
       </div>

package/dist/components/compounds/Dropdown.svelte

@@ -69,7 +69,7 @@
 
   <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
   <ul tabindex='0' class='dropdown-content menu bg-base-100 rounded-xl z-[1] w-52 p-1.5 shadow-lg border border-base-content/6 animate-[hai-scale-in_0.15s_cubic-bezier(0.16,1,0.3,1)]'>
-    {#each items as item}
+    {#each items as item, index (item.key || `divider-${index}`)}
       {#if item.divider}
         <li class='divider'></li>
       {:else}

package/dist/components/compounds/Modal.svelte

@@ -16,6 +16,7 @@
     showClose = true,
     width,
     height,
+    bodyOverflow = 'auto',
     bodyClass = '',
     class: className = '',
     onclose,
@@ -59,13 +60,21 @@
 
   const modalBoxClass = $derived(
     cn(
-      'hai-modal__panel flex min-h-0 flex-col overflow-hidden',
+      'hai-modal__panel flex min-h-0 flex-col',
       'bg-base-100 p-0',
       sizeMap[size],
       className,
     ),
   )
 
+  const bodyOverflowClass = $derived(
+    bodyOverflow === 'visible'
+      ? 'overflow-visible'
+      : bodyOverflow === 'hidden'
+      ? 'overflow-hidden'
+      : 'overflow-y-auto',
+  )
+
   function handleClose() {
     open = false
     onclose?.()
@@ -148,7 +157,7 @@
     {/if}
 
     <!-- 主体区域独立滚动，避免长内容把头部和底部一起顶走。 -->
-    <div class={cn('min-h-0 flex-1 overflow-y-auto px-6 py-5 sm:px-7', bodyClass)}>
+    <div class={cn('min-h-0 flex-1 px-6 py-5 sm:px-7', bodyOverflowClass, bodyClass)}>
       {#if children}
         {@render children()}
       {/if}

package/dist/components/compounds/Pagination.svelte

@@ -117,7 +117,7 @@
       «
     </BareButton>
 
-    {#each pages() as p}
+    {#each pages() as p, index (typeof p === 'number' ? p : `ellipsis-${index}`)}
       {#if typeof p === 'number'}
         <BareButton
           class={cn(btnClass, page === p && 'btn-active')}

package/dist/components/compounds/Tabs.svelte

@@ -57,7 +57,7 @@
 </script>
 
 <div role='tablist' class={tabsClass}>
-  {#each items as item}
+  {#each items as item (item.key)}
     <BareButton
       role='tab'
       class={cn('tab', active === item.key && 'tab-active')}

package/dist/components/compounds/ToastContainer.svelte

@@ -38,7 +38,7 @@
   })
 </script>
 
-{#each Object.entries(groupedItems()) as [position, items]}
+{#each Object.entries(groupedItems()) as [position, items] (position)}
   <div class={cn('toast z-50', positionMap[position as keyof typeof positionMap])}>
     {#each items as item (item.id)}
       <div class={cn('alert', getAlertVariantClass(item.variant ?? 'info'))}>

package/dist/components/primitives/Range.svelte

@@ -109,7 +109,7 @@
 
   {#if showSteps && stepCount > 0}
     <div class='flex w-full justify-between px-2 text-xs text-base-content/60'>
-      {#each Array.from({ length: stepCount }) as _}
+      {#each Array.from({ length: stepCount }) as _, index (index)}
         <span>|</span>
       {/each}
     </div>

package/dist/components/primitives/Rating.svelte

@@ -111,7 +111,7 @@
 {#if readonly}
   <!-- 只读模式 - 使用 div 而非 input -->
   <div class={cn('rating', sizeClass, className)}>
-    {#each Array.from({ length: max }) as _, i}
+    {#each Array.from({ length: max }) as _, i (i)}
       <div
         class={cn(
           'mask mask-star-2',
@@ -128,7 +128,7 @@
 {:else}
   <!-- 交互模式 - 使用 radio input -->
   <div class={ratingClass}>
-    {#each items as item}
+    {#each items as item (item.value)}
       <input
         type='radio'
         {name}

package/dist/components/primitives/Select.svelte

@@ -78,7 +78,7 @@
     {#if children}
       {@render children()}
     {:else if options}
-      {#each options as option}
+      {#each options as option (String(option.value))}
         <option
           value={option.value as string}
           disabled={option.disabled}

package/dist/components/scenes/ai/AiDocumentDownloadMenu.svelte

@@ -174,7 +174,7 @@
       onclick={event => event.stopPropagation()}
       onkeydown={event => event.stopPropagation()}
     >
-      {#each resolvedActions as action}
+      {#each resolvedActions as action (action.id)}
         <button
           type='button'
           class={cn('hai-ai-download-menu__item', itemClass)}

package/dist/components/scenes/ai/AiDocumentEditor.svelte

@@ -2561,7 +2561,7 @@ ${safeCode}
 
           {#if outlineHasContent}
             <nav class='hai-ai-doc-outline-list'>
-              {#each outline as item}
+              {#each outline as item (item.id)}
                 <button
                   type='button'
                   class:active={activeHeadingId === item.id}
@@ -2917,7 +2917,7 @@ ${safeCode}
                     style={`--hai-ai-doc-selection-menu-left:${selectionMenuLeft}px;`}
                     onmousedown={handleSelectionPanelMouseDown}
                   >
-                    {#each resolvedRewriteActions as action}
+                    {#each resolvedRewriteActions as action (action.id)}
                       <button
                         type='button'
                         class='hai-ai-doc-rewrite-menu-btn'
@@ -2937,7 +2937,7 @@ ${safeCode}
                     style={`--hai-ai-doc-selection-menu-left:${selectionMenuLeft}px;`}
                     onmousedown={handleSelectionPanelMouseDown}
                   >
-                    {#each BLOCK_FORMAT_OPTIONS as option}
+                    {#each BLOCK_FORMAT_OPTIONS as option (option.value)}
                       <button
                         type='button'
                         class={cn(
@@ -2969,7 +2969,7 @@ ${safeCode}
                     style={`--hai-ai-doc-selection-menu-left:${selectionMenuLeft}px;`}
                     onmousedown={handleSelectionPanelMouseDown}
                   >
-                    {#each ALIGN_OPTIONS as option}
+                    {#each ALIGN_OPTIONS as option (option.value)}
                       <button
                         type='button'
                         class={cn(
@@ -3043,7 +3043,7 @@ ${safeCode}
                         {uiM('markdown_text_color')}
                       </div>
                       <div class='hai-ai-doc-color-grid'>
-                        {#each TEXT_COLOR_PRESETS as color}
+                        {#each TEXT_COLOR_PRESETS as color, index (`${color}-${index}`)}
                           <button
                             type='button'
                             class={cn(
@@ -3066,7 +3066,7 @@ ${safeCode}
                         {uiM('markdown_background_color')}
                       </div>
                       <div class='hai-ai-doc-color-grid'>
-                        {#each BACKGROUND_COLOR_OPTIONS as colorOption}
+                        {#each BACKGROUND_COLOR_OPTIONS as colorOption, index (resolveColorOptionValue(colorOption) ?? `empty-${index}`)}
                           <button
                             type='button'
                             class={cn(

package/dist/components/scenes/ai/table/AiTableEditor.svelte

@@ -21,6 +21,7 @@
     AiTableEditorChangePayload,
     AiTableEditorProps,
   } from './table-types.js'
+  import { SvelteSet } from 'svelte/reactivity'
   import { uiM } from '../../../../messages.js'
   import { cn } from '../../../../utils.js'
   import AiDocumentDownloadMenu from '../AiDocumentDownloadMenu.svelte'
@@ -215,7 +216,7 @@
    * - 基于 `key` 去重，避免流式增量里重复列导致渲染抖动
    */
   function normalizeTableColumns(items: unknown[]): AiTableColumn[] {
-    const usedKeys = new Set<string>()
+    const usedKeys = new SvelteSet<string>()
     const columns: AiTableColumn[] = []
 
     for (const item of items) {
@@ -1095,7 +1096,7 @@
     <table class='hai-ai-table-grid'>
       <thead>
         <tr>
-          {#each tableColumns as column}
+          {#each tableColumns as column (column.key)}
             <th>{column.label}</th>
           {/each}
           {#if editable}
@@ -1120,7 +1121,7 @@
               ondragover={event => handleRowDragOver(row.row_id, event)}
               ondrop={event => handleRowDrop(row.row_id, event)}
             >
-              {#each tableColumns as column}
+              {#each tableColumns as column (column.key)}
                 <td>
                   <input
                     class={resolveCellInputClass(column.type)}

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

@@ -45,6 +45,8 @@
     languages?: Language[]
     /** 语言变更回调 */
     onchange?: (lang: string) => void
+    /** 下拉菜单水平对齐方式 */
+    align?: 'start' | 'end'
     /** 紧凑模式：仅显示图标，适用于移动端头部 */
     compact?: boolean
     /** 自定义类名 */
@@ -58,6 +60,7 @@
       { value: 'en-US', label: 'English', flag: 'US' },
     ],
     onchange,
+    align = 'end',
     compact = false,
     class: className = '',
   }: Props = $props()
@@ -91,7 +94,7 @@
   })
 </script>
 
-<div bind:this={containerRef} class='dropdown dropdown-end {open ? 'dropdown-open' : ''} {className}'>
+<div bind:this={containerRef} class='dropdown {align === 'end' ? 'dropdown-end' : ''} {open ? 'dropdown-open' : ''} {className}'>
   <BareButton
     type='button'
     class='btn btn-ghost {compact ? 'btn-sm btn-square' : 'btn-sm gap-2 min-w-fit'}'

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

@@ -10,6 +10,8 @@ interface Props {
     languages?: Language[];
     /** 语言变更回调 */
     onchange?: (lang: string) => void;
+    /** 下拉菜单水平对齐方式 */
+    align?: 'start' | 'end';
     /** 紧凑模式：仅显示图标，适用于移动端头部 */
     compact?: boolean;
     /** 自定义类名 */

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

@@ -87,9 +87,7 @@
           onclick={handleClose}
           class='hover:bg-base-content/10'
         >
-          {#snippet children()}
-            <span class='icon-[tabler--x] size-5'></span>
-          {/snippet}
+          <span class='icon-[tabler--x] size-5'></span>
         </IconButton>
       </div>
 

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

@@ -0,0 +1,165 @@
+<!--
+  @component ThemeColorPicker
+  主题色选择器，提供预置主题色与原生取色盘能力。
+
+  @prop {string} value - 当前选中的颜色值（Hex）
+  @prop {Array<{ value: string, label: string }>} presets - 预置主题色列表
+  @prop {function} onchange - 颜色变更回调
+-->
+<script lang='ts'>
+  import { uiM } from '../../../messages.js'
+  import { DEFAULT_THEME_COLOR, THEME_COLOR_PRESETS } from '../../../theme-config.js'
+  import { cn } from '../../../utils.js'
+
+  const HEX_COLOR_REGEX = /^#[0-9a-f]{6}$/
+  const SHORT_HEX_COLOR_REGEX = /^#[0-9a-f]{3}$/
+
+  interface ThemeColorPreset {
+    value: string
+    label: string
+  }
+
+  interface Props {
+    value?: string
+    presets?: ThemeColorPreset[]
+    disabled?: boolean
+    onchange?: (color: string) => void
+    pickerLabel?: string
+    customLabel?: string
+    class?: string
+  }
+
+  const {
+    value = DEFAULT_THEME_COLOR,
+    presets,
+    disabled = false,
+    onchange,
+    pickerLabel,
+    customLabel,
+    class: className = '',
+  }: Props = $props()
+
+  let colorInputRef = $state<HTMLInputElement | null>(null)
+
+  const defaultPresets = $derived(
+    THEME_COLOR_PRESETS.map(preset => ({
+      value: preset.value,
+      label: uiM(preset.labelKey),
+    })),
+  )
+
+  const resolvedPresets = $derived(presets?.length ? presets : defaultPresets)
+  const displayPickerLabel = $derived(pickerLabel ?? uiM('theme_color_picker_label'))
+  const displayCustomLabel = $derived(customLabel ?? uiM('theme_color_custom'))
+
+  function normalizeHexColor(input: string | undefined): string | null {
+    const normalized = input?.trim().toLowerCase() ?? ''
+
+    if (HEX_COLOR_REGEX.test(normalized)) {
+      return normalized
+    }
+
+    if (SHORT_HEX_COLOR_REGEX.test(normalized)) {
+      return `#${normalized[1]}${normalized[1]}${normalized[2]}${normalized[2]}${normalized[3]}${normalized[3]}`
+    }
+
+    return null
+  }
+
+  const normalizedPresets = $derived(
+    resolvedPresets
+      .map((preset) => {
+        const normalizedValue = normalizeHexColor(preset.value)
+        if (!normalizedValue) {
+          return null
+        }
+
+        return {
+          ...preset,
+          value: normalizedValue,
+        }
+      })
+      .filter((preset): preset is ThemeColorPreset => Boolean(preset)),
+  )
+
+  const currentColor = $derived(normalizeHexColor(value) ?? DEFAULT_THEME_COLOR)
+  const activePreset = $derived(
+    normalizedPresets.find(preset => preset.value === currentColor) ?? null,
+  )
+
+  function updateColor(nextColor: string): void {
+    const normalized = normalizeHexColor(nextColor)
+    if (!normalized || normalized === currentColor) {
+      return
+    }
+
+    onchange?.(normalized)
+  }
+</script>
+
+<div class={cn('', className)}>
+  <div class='flex flex-wrap items-center gap-2'>
+    {#each normalizedPresets as preset (preset.value)}
+      <button
+        type='button'
+        class={cn(
+          'inline-flex items-center gap-2 rounded-full border px-3 py-2 text-sm transition-colors',
+          preset.value === currentColor
+            ? 'border-primary bg-primary/10 text-primary shadow-sm'
+            : 'border-base-content/12 bg-base-100 text-base-content hover:border-primary/25 hover:bg-base-200/80',
+          disabled && 'cursor-not-allowed opacity-60',
+        )}
+        aria-pressed={preset.value === currentColor}
+        disabled={disabled}
+        onclick={() => updateColor(preset.value)}
+      >
+        <span
+          class='size-4 shrink-0 rounded-full border border-black/10'
+          style={`background:${preset.value};`}
+          aria-hidden='true'
+        ></span>
+        <span>{preset.label}</span>
+      </button>
+    {/each}
+
+    <button
+      type='button'
+      class={cn(
+        'group inline-flex items-center gap-2 rounded-full border px-3 py-2 text-left text-sm transition-colors',
+        activePreset
+          ? 'border-base-content/12 bg-base-100 text-base-content hover:border-primary/25 hover:bg-base-200/80'
+          : 'border-primary bg-primary/10 text-primary shadow-sm',
+        disabled && 'cursor-not-allowed opacity-60',
+      )}
+      aria-label={displayPickerLabel}
+      aria-pressed={!activePreset}
+      disabled={disabled}
+      onclick={() => colorInputRef?.click()}
+    >
+      <span
+        class='size-4 shrink-0 rounded-full border border-black/10 shadow-sm transition-transform group-hover:scale-[1.03]'
+        style={`background:${currentColor};`}
+        aria-hidden='true'
+      ></span>
+
+      <span class='inline-flex items-center gap-2 min-w-0'>
+        <span>{displayCustomLabel}</span>
+        {#if !activePreset}
+          <span class='text-xs uppercase tracking-[0.14em] text-current/70'>
+            {currentColor}
+          </span>
+        {/if}
+      </span>
+    </button>
+
+    <input
+      bind:this={colorInputRef}
+      class='sr-only'
+      type='color'
+      value={currentColor}
+      aria-label={displayPickerLabel}
+      disabled={disabled}
+      onchange={event => updateColor(event.currentTarget.value)}
+    />
+  </div>
+</div>

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

@@ -0,0 +1,24 @@
+interface ThemeColorPreset {
+    value: string;
+    label: string;
+}
+interface Props {
+    value?: string;
+    presets?: ThemeColorPreset[];
+    disabled?: boolean;
+    onchange?: (color: string) => void;
+    pickerLabel?: string;
+    customLabel?: string;
+    class?: string;
+}
+/**
+ * ThemeColorPicker
+ * 主题色选择器，提供预置主题色与原生取色盘能力。
+ *
+ * @prop {string} value - 当前选中的颜色值（Hex）
+ * @prop {Array<{ value: string, label: string }>} presets - 预置主题色列表
+ * @prop {function} onchange - 颜色变更回调
+ */
+declare const ThemeColorPicker: import("svelte").Component<Props, {}, "">;
+type ThemeColorPicker = ReturnType<typeof ThemeColorPicker>;
+export default ThemeColorPicker;

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

@@ -28,6 +28,8 @@
     selectLabel?: string
     onchange?: (theme: string) => void
     showPreview?: boolean
+    /** 下拉菜单水平对齐方式 */
+    align?: 'start' | 'end'
     /** 紧凑模式：仅显示预览色块，适用于移动端头部 */
     compact?: boolean
     grouped?: boolean
@@ -39,6 +41,7 @@
     selectLabel,
     onchange,
     showPreview = true,
+    align = 'end',
     compact = false,
     grouped = true,
     class: className = '',
@@ -80,7 +83,7 @@
   })
 </script>
 
-<div bind:this={containerRef} class='dropdown dropdown-end {open ? 'dropdown-open' : ''} {className}'>
+<div bind:this={containerRef} class={cn('dropdown', align === 'end' ? 'dropdown-end' : '', open ? 'dropdown-open' : '', className)}>
   <BareButton
     type='button'
     class='btn btn-ghost {compact ? 'btn-sm btn-square' : 'gap-2'}'
@@ -108,7 +111,7 @@
     <div class='dropdown-content bg-base-100 rounded-box shadow-xl border border-base-content/10 z-50 p-4 max-h-[80vh] overflow-y-auto {compact ? 'w-56 right-0' : ''}'>
       {#if grouped}
         <!-- 分组显示 -->
-        {#each THEME_GROUPS as group}
+        {#each THEME_GROUPS as group (group.nameKey)}
           <div class='mb-4 last:mb-0'>
             <div class='text-xs font-semibold text-base-content/50 uppercase tracking-wider px-2 mb-2'>
               {uiM(group.nameKey)}

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

@@ -4,6 +4,8 @@ interface Props {
     selectLabel?: string;
     onchange?: (theme: string) => void;
     showPreview?: boolean;
+    /** 下拉菜单水平对齐方式 */
+    align?: 'start' | 'end';
     /** 紧凑模式：仅显示预览色块，适用于移动端头部 */
     compact?: boolean;
     grouped?: boolean;

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

@@ -7,5 +7,6 @@
 export { default as FeedbackModal } from './FeedbackModal.svelte';
 export { default as LanguageSwitch } from './LanguageSwitch.svelte';
 export { default as SettingsModal } from './SettingsModal.svelte';
+export { default as ThemeColorPicker } from './ThemeColorPicker.svelte';
 export { default as ThemeSelector } from './ThemeSelector.svelte';
 export { default as ThemeToggle } from './ThemeToggle.svelte';

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

@@ -7,5 +7,6 @@
 export { default as FeedbackModal } from './FeedbackModal.svelte';
 export { default as LanguageSwitch } from './LanguageSwitch.svelte';
 export { default as SettingsModal } from './SettingsModal.svelte';
+export { default as ThemeColorPicker } from './ThemeColorPicker.svelte';
 export { default as ThemeSelector } from './ThemeSelector.svelte';
 export { default as ThemeToggle } from './ThemeToggle.svelte';

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

@@ -110,7 +110,7 @@
 <Drawer bind:open {title} position='right' {size} onclose={handleClose}>
   {#if item}
     <div class='space-y-4 pb-20'>
-      {#each detailFields as field}
+      {#each detailFields as field (field.id)}
         {@const value = item[field.id]}
         <div>
           <div class='text-xs font-medium text-base-content/50 mb-1'>
@@ -119,7 +119,7 @@
           <div class='text-sm text-base-content'>
             {#if field.type === 'multi-select' && Array.isArray(value) && value.length > 0}
               <div class='flex flex-wrap gap-1'>
-                {#each value as v}
+                {#each value as v, index (`${String(v)}:${index}`)}
                   {@const opts = resolveOptions(field.options)}
                   {@const found = opts.find(o => String(o.value) === String(v))}
                   <Badge variant='ghost' size='sm'>{found?.label ?? String(v)}</Badge>

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

@@ -118,7 +118,7 @@
       </div>
     {/if}
 
-    {#each sortedFields as field}
+    {#each sortedFields as field (field.id)}
       {@const isReadonly = field.readonly && mode === 'edit'}
       {@const isRequired = field.validation?.required}
       {@const fieldValue = formData[field.id]}
@@ -146,7 +146,7 @@
             onchange={value => updateField(field.id, value)}
           >
             <option value="">{placeholder || uiM('crud_filter_all')}</option>
-            {#each opts as opt}
+            {#each opts as opt (String(opt.value))}
               <option value={String(opt.value)}>{opt.label}</option>
             {/each}
           </Select>
@@ -157,7 +157,7 @@
         {@const selectedValues = ((fieldValue ?? []) as Array<string | number | boolean>).map(String)}
         <FormField label={resolveText(field.label)} required={isRequired}>
           <div class='flex flex-wrap gap-3 p-3 bg-base-200 rounded-lg max-h-48 overflow-y-auto'>
-            {#each opts as opt}
+            {#each opts as opt (String(opt.value))}
               <label class='inline-flex items-center gap-2 cursor-pointer'>
                 <Checkbox
                   size='sm'

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

@@ -73,7 +73,7 @@
       </div>
     {/if}
 
-    {#each filterFields as field}
+    {#each filterFields as field (field.id)}
       {@const opts = resolveOptions(field.options)}
       {#if opts.length > 0}
         <Select
@@ -82,7 +82,7 @@
           onchange={value => handleFilterChange(field.id, value)}
         >
           <option value="">{uiM('crud_filter_all')}</option>
-          {#each opts as opt}
+          {#each opts as opt (String(opt.value))}
             <option value={String(opt.value)}>{opt.label}</option>
           {/each}
         </Select>

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

@@ -14,6 +14,7 @@
   import type { Snippet } from 'svelte'
   import type { Size } from '../../../types.js'
   import type { NavAdapter } from './nav-adapter.js'
+  import { SvelteURLSearchParams } from 'svelte/reactivity'
   import { uiM } from '../../../messages.js'
   import Card from '../../compounds/Card.svelte'
   import DataTable from '../../compounds/DataTable.svelte'
@@ -177,7 +178,7 @@
   // ─── 导航 ───
 
   function navigateWithParams(overrides: Record<string, string | number>) {
-    const params = new URLSearchParams()
+    const params = new SvelteURLSearchParams()
     const merged: Record<string, string | number> = {
       search: searchValue,
       page: data.page,

package/dist/components/scenes/crypto/EncryptedInput.svelte

@@ -139,11 +139,9 @@
           label={uiM('encrypted_input_copy')}
           onclick={copyEncrypted}
         >
-          {#snippet children()}
-            <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
-              <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z' />
-            </svg>
-          {/snippet}
+          <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+            <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z' />
+          </svg>
         </IconButton>
       </div>
       <code class='text-xs break-all text-base-content/80'>

package/dist/components/scenes/crypto/HashDisplay.svelte

@@ -79,17 +79,15 @@
         label={labels.copyHash ?? uiM('hash_copy')}
         onclick={copyToClipboard}
       >
-        {#snippet children()}
-          {#if copied}
-            <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4 text-success' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
-              <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 13l4 4L19 7' />
-            </svg>
-          {:else}
-            <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
-              <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z' />
-            </svg>
-          {/if}
-        {/snippet}
+        {#if copied}
+          <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4 text-success' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+            <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 13l4 4L19 7' />
+          </svg>
+        {:else}
+          <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+            <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z' />
+          </svg>
+        {/if}
       </IconButton>
     {/if}
   </div>

package/dist/components/scenes/crypto/SignatureDisplay.svelte

@@ -107,17 +107,15 @@
           label={labels.copySignature ?? uiM('signature_copy_signature')}
           onclick={copySignature}
         >
-          {#snippet children()}
-            {#if copiedSig}
-              <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4 text-success' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
-                <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 13l4 4L19 7' />
-              </svg>
-            {:else}
-              <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
-                <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z' />
-              </svg>
-            {/if}
-          {/snippet}
+          {#if copiedSig}
+            <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4 text-success' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+              <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 13l4 4L19 7' />
+            </svg>
+          {:else}
+            <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+              <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z' />
+            </svg>
+          {/if}
         </IconButton>
       {/if}
     </div>
@@ -139,17 +137,15 @@
               label={labels.copyPublicKey ?? uiM('signature_copy_public_key')}
               onclick={copyPublicKey}
             >
-              {#snippet children()}
-                {#if copiedKey}
-                  <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4 text-success' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
-                    <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 13l4 4L19 7' />
-                  </svg>
-                {:else}
-                  <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
-                    <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z' />
-                  </svg>
-                {/if}
-              {/snippet}
+              {#if copiedKey}
+                <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4 text-success' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+                  <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 13l4 4L19 7' />
+                </svg>
+              {:else}
+                <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+                  <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z' />
+                </svg>
+              {/if}
             </IconButton>
           {/if}
         </div>

package/dist/components/scenes/iam/ForgotPasswordForm.svelte

@@ -42,14 +42,23 @@
     ),
   )
 
+  function getSubmittedValue(formData: FormData, key: string, fallback = ''): string | undefined {
+    const submitted = formData.get(key)
+    const value = typeof submitted === 'string' ? submitted : fallback
+    const trimmed = value.trim()
+    return trimmed || undefined
+  }
+
   async function handleSubmit(e: SubmitEvent) {
     e.preventDefault()
     if (loading || disabled)
       return
 
+    const submittedFormData = new FormData(e.currentTarget as HTMLFormElement)
+
     const data: ForgotPasswordFormData = {
-      email: mode === 'email' ? email : undefined,
-      phone: mode === 'phone' ? phone : undefined,
+      email: mode === 'email' ? getSubmittedValue(submittedFormData, 'email', email) : undefined,
+      phone: mode === 'phone' ? getSubmittedValue(submittedFormData, 'phone', phone) : undefined,
     }
 
     await onsubmit?.(data)

package/dist/components/scenes/iam/RegisterForm.svelte

@@ -101,6 +101,13 @@
       : ''),
   )
 
+  function getSubmittedValue(formData: FormData, key: string, fallback = ''): string | undefined {
+    const submitted = formData.get(key)
+    const value = typeof submitted === 'string' ? submitted : fallback
+    const trimmed = value.trim()
+    return trimmed || undefined
+  }
+
   async function handleSubmit(e: SubmitEvent) {
     e.preventDefault()
     if (loading || disabled)
@@ -108,13 +115,15 @@
     if (!passwordsMatch)
       return
 
+    const submittedFormData = new FormData(e.currentTarget as HTMLFormElement)
+
     const data: RegisterFormData = {
-      username,
-      email,
-      phone,
+      username: getSubmittedValue(submittedFormData, 'username', username),
+      email: getSubmittedValue(submittedFormData, 'email', email),
+      phone: getSubmittedValue(submittedFormData, 'phone', phone),
       password,
       confirmPassword: requireConfirmPassword ? confirmPassword : undefined,
-      nickname,
+      nickname: getSubmittedValue(submittedFormData, 'nickname', nickname),
     }
 
     await onsubmit?.(data)

package/dist/components/scenes/storage/FileUpload.svelte

@@ -375,11 +375,9 @@
                 label={uiM('file_upload_retry')}
                 onclick={() => retryUpload(file.id)}
               >
-                {#snippet children()}
-                  <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
-                    <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15' />
-                  </svg>
-                {/snippet}
+                <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+                  <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15' />
+                </svg>
               </IconButton>
             {/if}
             <IconButton
@@ -388,11 +386,9 @@
               label={uiM('file_upload_remove')}
               onclick={() => removeFile(file.id)}
             >
-              {#snippet children()}
-                <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
-                  <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18L18 6M6 6l12 12' />
-                </svg>
-              {/snippet}
+              <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+                <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18L18 6M6 6l12 12' />
+              </svg>
             </IconButton>
           </div>
         </div>

package/dist/components/scenes/storage/ImageUpload.svelte

@@ -37,12 +37,7 @@
 
   let loading = $state(false)
   let inputElement = $state<HTMLInputElement | undefined>(undefined)
-  let previewUrl = $state('')
-
-  // 当 value 变化时更新预览
-  $effect(() => {
-    previewUrl = value
-  })
+  let previewUrl = $derived(value)
 
   const containerClass = $derived(
     cn(
@@ -248,11 +243,9 @@
             onclick={handleClick}
             class='text-white'
           >
-            {#snippet children()}
-              <svg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
-                <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z' />
-              </svg>
-            {/snippet}
+            <svg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+              <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z' />
+            </svg>
           </IconButton>
           <IconButton
             size='sm'
@@ -261,11 +254,9 @@
             onclick={handleRemove}
             class='text-white'
           >
-            {#snippet children()}
-              <svg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
-                <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16' />
-              </svg>
-            {/snippet}
+            <svg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+              <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16' />
+            </svg>
           </IconButton>
         {/if}
       </div>

package/dist/messages/en-US.json

@@ -165,6 +165,11 @@
   "severity_low": "Low",
   "theme_switch_to_light": "Switch to light theme",
   "theme_switch_to_dark": "Switch to dark theme",
+  "theme_color_picker_label": "Choose a custom theme color",
+  "theme_color_custom": "Custom",
+  "theme_color_tech_purple": "Tech Purple",
+  "theme_color_grid_green": "Grid Green",
+  "theme_color_ocean": "Ocean",
   "hash_copy": "Copy hash",
   "signature_label": "Signature",
   "signature_public_key": "Public Key",

package/dist/messages/zh-CN.json

@@ -165,6 +165,11 @@
   "severity_low": "低",
   "theme_switch_to_light": "切换到亮色主题",
   "theme_switch_to_dark": "切换到暗色主题",
+  "theme_color_picker_label": "选择自定义主题色",
+  "theme_color_custom": "自定义",
+  "theme_color_tech_purple": "科技紫",
+  "theme_color_grid_green": "低碳绿",
+  "theme_color_ocean": "海岸蓝",
   "hash_copy": "复制哈希",
   "signature_label": "签名",
   "signature_public_key": "公钥",

package/dist/styles/theme.css

@@ -11,9 +11,16 @@
  * =============================================================================
  */
 
+:root {
+  --hai-theme-color-default: #5765f0;
+  --hai-theme-color-tech-purple: #5765f0;
+  --hai-theme-color-grid-green: #13b981;
+  --hai-theme-color-ocean: #1f5eff;
+}
+
 @theme {
   /* ─── 品牌色 ─── */
-  --color-brand: oklch(0.6 0.2 275);
+  --color-brand: var(--hai-theme-color-default);
 
   /* ─── 阴影层级 ─── */
   --shadow-xs: 0 1px 2px oklch(0 0 0 / 0.04);

package/dist/theme-config.d.ts

@@ -20,6 +20,15 @@ export interface ThemeInfo {
     /** 背景色（用于预览） */
     bgColor: string;
 }
+/**
+ * 主题色预设定义
+ */
+export interface ThemeColorPreset {
+    /** 颜色值（Hex） */
+    value: string;
+    /** 预设标签 i18n key */
+    labelKey: UIMessageKey;
+}
 /**
  * 主题分组
  */
@@ -43,6 +52,18 @@ export declare const THEME_GROUPS: ThemeGroup[];
  * 暗色主题列表
  */
 export declare const DARK_THEMES: string[];
+/**
+ * 默认主题色
+ */
+export declare const DEFAULT_THEME_COLOR = "#5765f0";
+/**
+ * 主题色 CSS 变量名
+ */
+export declare const DEFAULT_THEME_COLOR_CSS_VAR = "--hai-theme-color-default";
+/**
+ * 内置主题色预设
+ */
+export declare const THEME_COLOR_PRESETS: ThemeColorPreset[];
 /**
  * 获取主题信息
  */

package/dist/theme-config.js

@@ -45,6 +45,22 @@ export const THEME_GROUPS = [
  * 暗色主题列表
  */
 export const DARK_THEMES = THEMES.filter(t => t.dark).map(t => t.id);
+/**
+ * 默认主题色
+ */
+export const DEFAULT_THEME_COLOR = '#5765f0';
+/**
+ * 主题色 CSS 变量名
+ */
+export const DEFAULT_THEME_COLOR_CSS_VAR = '--hai-theme-color-default';
+/**
+ * 内置主题色预设
+ */
+export const THEME_COLOR_PRESETS = [
+    { value: DEFAULT_THEME_COLOR, labelKey: 'theme_color_tech_purple' },
+    { value: '#13b981', labelKey: 'theme_color_grid_green' },
+    { value: '#1f5eff', labelKey: 'theme_color_ocean' },
+];
 /**
  * 获取主题信息
  */

package/dist/types.d.ts

@@ -448,6 +448,8 @@ export interface ModalProps {
     width?: string;
     /** 自定义高度（任意合法 CSS 高度值） */
     height?: string;
+    /** 主体区域溢出策略。默认 auto，适合长内容；visible 适合内部浮层需要越界显示的场景。 */
+    bodyOverflow?: 'auto' | 'visible' | 'hidden';
     /** 主体区域自定义类名 */
     bodyClass?: string;
     /** 自定义类名 */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@h-ai/ui",
   "type": "module",
-  "version": "0.1.0-alpha.16",
+  "version": "0.1.0-alpha.19",
   "description": "Hai Framework UI component library for Svelte 5 Runes.",
   "license": "Apache-2.0",
   "svelte": "./dist/index.js",
@@ -38,25 +38,25 @@
   "dependencies": {
     "@internationalized/date": "^3.8.0",
     "@shikijs/langs": "^4.0.2",
-    "bits-ui": "^2.8.0",
+    "bits-ui": "^2.18.1",
     "html2canvas": "^1.4.1",
     "jspdf": "^4.2.1",
     "marked": "^18.0.0",
     "shiki": "^4.0.2",
     "tailwind-merge": "^3.5.0",
-    "@h-ai/core": "0.1.0-alpha.16"
+    "@h-ai/core": "0.1.0-alpha.19"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^7.0.0",
-    "@types/node": "^25.1.0",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "@types/node": "^25.9.1",
     "jsdom": "^29.0.2",
-    "rimraf": "^6.0.1",
-    "svelte": "^5.53.5",
-    "svelte-check": "^4.4.6",
-    "typescript": "^6.0.2",
-    "vite": "^8.0.0",
-    "vitest": "^4.0.18"
+    "rimraf": "^6.1.3",
+    "svelte": "^5.55.9",
+    "svelte-check": "^4.4.8",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.14",
+    "vitest": "^4.1.7"
   },
   "scripts": {
     "build": "svelte-package -i src/lib",