@h-ai/ui 0.1.0-alpha.10

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

@@ -0,0 +1,176 @@
+<!--
+  @component ThemeSelector
+  主题选择器组件，支持内置主题集合的选择和预览。
+
+  @prop {string} currentTheme - 当前主题
+  @prop {function} onchange - 主题变更回调
+  @prop {boolean} showPreview - 是否显示主题预览
+  @prop {boolean} grouped - 是否按分组显示
+
+  @example
+  <ThemeSelector
+    currentTheme={$theme}
+    onchange={(theme) => setTheme(theme)}
+    showPreview
+    grouped
+  />
+-->
+<script lang='ts'>
+  import type { ThemeInfo } from '../../../theme-config.js'
+  import { uiM } from '../../../messages.js'
+  import { THEME_GROUPS, THEMES } from '../../../theme-config.js'
+  import { cn } from '../../../utils.js'
+  import BareButton from '../../primitives/BareButton.svelte'
+
+  interface Props {
+    currentTheme?: string
+    /** 选择主题按钮的 aria-label */
+    selectLabel?: string
+    onchange?: (theme: string) => void
+    showPreview?: boolean
+    /** 紧凑模式：仅显示预览色块，适用于移动端头部 */
+    compact?: boolean
+    grouped?: boolean
+    class?: string
+  }
+
+  const {
+    currentTheme = 'light',
+    selectLabel,
+    onchange,
+    showPreview = true,
+    compact = false,
+    grouped = true,
+    class: className = '',
+  }: Props = $props()
+
+  const displaySelectLabel = $derived(selectLabel ?? uiM('theme_selector_label'))
+
+  let open = $state(false)
+  let containerRef = $state<HTMLDivElement | null>(null)
+
+  const currentInfo = $derived(
+    THEMES.find(t => t.id === currentTheme) ?? THEMES[0],
+  )
+
+  function selectTheme(themeId: string) {
+    onchange?.(themeId)
+    open = false
+  }
+
+  function renderThemePreview(theme: ThemeInfo) {
+    return `
+      background: ${theme.bgColor};
+      border-color: ${theme.primaryColor};
+    `
+  }
+
+  function handleClickOutside(event: MouseEvent) {
+    if (containerRef && !containerRef.contains(event.target as Node)) {
+      open = false
+    }
+  }
+
+  $effect(() => {
+    if (open) {
+      document.addEventListener('click', handleClickOutside)
+      return () => document.removeEventListener('click', handleClickOutside)
+    }
+    return undefined
+  })
+</script>
+
+<div bind:this={containerRef} class='dropdown dropdown-end {open ? 'dropdown-open' : ''} {className}'>
+  <BareButton
+    type='button'
+    class='btn btn-ghost {compact ? 'btn-sm btn-square' : 'gap-2'}'
+    onclick={() => (open = !open)}
+    ariaLabel={displaySelectLabel}
+  >
+    <!-- 当前主题预览 -->
+    {#if showPreview}
+      <div
+        class='w-5 h-5 rounded-full border-2 shrink-0'
+        style={renderThemePreview(currentInfo)}
+      ></div>
+    {/if}
+    {#if !compact}
+      <span class='text-sm'>{currentInfo.name}</span>
+      <!-- 下拉箭头 -->
+      <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'>
+        <path stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7' />
+      </svg>
+    {/if}
+  </BareButton>
+
+  {#if open}
+    <!-- 主题列表 -->
+    <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}
+          <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)}
+            </div>
+            <div class='flex flex-wrap gap-2'>
+              {#each group.themes as theme (theme.id)}
+                <BareButton
+                  type='button'
+                  class={cn(
+                    'flex items-center gap-2 px-3 py-1.5 rounded-lg text-left transition-colors w-28',
+                    theme.id === currentTheme
+                      ? 'bg-primary/10 text-primary ring-1 ring-primary/30'
+                      : 'hover:bg-base-200',
+                  )}
+                  onclick={() => selectTheme(theme.id)}
+                >
+                  <!-- 主题预览色块 -->
+                  <div
+                    class='w-4 h-4 rounded border shrink-0'
+                    style={renderThemePreview(theme)}
+                  ></div>
+                  <!-- 主题名称 -->
+                  <span class='text-sm whitespace-nowrap'>{theme.name}</span>
+                  <!-- 选中标记 -->
+                  {#if theme.id === currentTheme}
+                    <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4 text-primary shrink-0' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'>
+                      <path stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7' />
+                    </svg>
+                  {/if}
+                </BareButton>
+              {/each}
+            </div>
+          </div>
+        {/each}
+      {:else}
+        <!-- 平铺显示 -->
+        <div class='flex flex-wrap gap-2'>
+          {#each THEMES as theme (theme.id)}
+            <BareButton
+              type='button'
+              class={cn(
+                'flex items-center gap-2 px-3 py-1.5 rounded-lg text-left transition-colors w-28',
+                theme.id === currentTheme
+                  ? 'bg-primary/10 text-primary ring-1 ring-primary/30'
+                  : 'hover:bg-base-200',
+              )}
+              onclick={() => selectTheme(theme.id)}
+            >
+              <div
+                class='w-4 h-4 rounded border shrink-0'
+                style={renderThemePreview(theme)}
+              ></div>
+              <span class='text-sm whitespace-nowrap'>{theme.name}</span>
+              {#if theme.id === currentTheme}
+                <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4 text-primary shrink-0' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'>
+                  <path stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7' />
+                </svg>
+              {/if}
+            </BareButton>
+          {/each}
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,31 @@
+interface Props {
+    currentTheme?: string;
+    /** 选择主题按钮的 aria-label */
+    selectLabel?: string;
+    onchange?: (theme: string) => void;
+    showPreview?: boolean;
+    /** 紧凑模式：仅显示预览色块，适用于移动端头部 */
+    compact?: boolean;
+    grouped?: boolean;
+    class?: string;
+}
+/**
+ * ThemeSelector
+ * 主题选择器组件，支持内置主题集合的选择和预览。
+ *
+ * @prop {string} currentTheme - 当前主题
+ * @prop {function} onchange - 主题变更回调
+ * @prop {boolean} showPreview - 是否显示主题预览
+ * @prop {boolean} grouped - 是否按分组显示
+ *
+ * @example
+ * <ThemeSelector
+ *   currentTheme={$theme}
+ *   onchange={(theme) => setTheme(theme)}
+ *   showPreview
+ *   grouped
+ * />
+ */
+declare const ThemeSelector: import("svelte").Component<Props, {}, "">;
+type ThemeSelector = ReturnType<typeof ThemeSelector>;
+export default ThemeSelector;

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

@@ -0,0 +1,76 @@
+<!--
+  @component ThemeToggle
+  主题切换按钮组件，支持明/暗主题快速切换。
+
+  @prop {string} currentTheme - 当前主题
+  @prop {function} onchange - 主题变更回调
+  @prop {string} lightTheme - 亮色主题名称
+  @prop {string} darkTheme - 暗色主题名称
+
+  @example
+  <ThemeToggle
+    currentTheme={$theme}
+    onchange={(theme) => themeStore.set(theme)}
+  />
+-->
+<script lang='ts'>
+  import { uiM } from '../../../messages.js'
+  import { isDarkTheme } from '../../../theme-config.js'
+  import IconButton from '../../primitives/IconButton.svelte'
+
+  interface Props {
+    currentTheme?: string
+    onchange?: (theme: string) => void
+    lightTheme?: string
+    darkTheme?: string
+    labels?: {
+      switchToLight?: string
+      switchToDark?: string
+    }
+    class?: string
+  }
+
+  const {
+    currentTheme = 'light',
+    onchange,
+    lightTheme = 'light',
+    darkTheme = 'dark',
+    labels = {},
+    class: className = '',
+  }: Props = $props()
+
+  // labels 优先，缺省回退到内置文案
+  const isDark = $derived(isDarkTheme(currentTheme))
+
+  function toggleTheme() {
+    const newTheme = isDark ? lightTheme : darkTheme
+    onchange?.(newTheme)
+  }
+</script>
+
+<div class='tooltip tooltip-bottom {className}' data-tip={isDark ? (labels.switchToLight ?? uiM('theme_switch_to_light')) : (labels.switchToDark ?? uiM('theme_switch_to_dark'))}>
+  <IconButton
+    variant='ghost'
+    size='sm'
+    onclick={toggleTheme}
+    ariaLabel={isDark ? (labels.switchToLight ?? uiM('theme_switch_to_light')) : (labels.switchToDark ?? uiM('theme_switch_to_dark'))}
+  >
+    {#if isDark}
+      <svg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'>
+        <circle cx='12' cy='12' r='5' />
+        <line x1='12' y1='1' x2='12' y2='3' />
+        <line x1='12' y1='21' x2='12' y2='23' />
+        <line x1='4.22' y1='4.22' x2='5.64' y2='5.64' />
+        <line x1='18.36' y1='18.36' x2='19.78' y2='19.78' />
+        <line x1='1' y1='12' x2='3' y2='12' />
+        <line x1='21' y1='12' x2='23' y2='12' />
+        <line x1='4.22' y1='19.78' x2='5.64' y2='18.36' />
+        <line x1='18.36' y1='5.64' x2='19.78' y2='4.22' />
+      </svg>
+    {:else}
+      <svg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'>
+        <path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' />
+      </svg>
+    {/if}
+  </IconButton>
+</div>

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

@@ -0,0 +1,29 @@
+interface Props {
+    currentTheme?: string;
+    onchange?: (theme: string) => void;
+    lightTheme?: string;
+    darkTheme?: string;
+    labels?: {
+        switchToLight?: string;
+        switchToDark?: string;
+    };
+    class?: string;
+}
+/**
+ * ThemeToggle
+ * 主题切换按钮组件，支持明/暗主题快速切换。
+ *
+ * @prop {string} currentTheme - 当前主题
+ * @prop {function} onchange - 主题变更回调
+ * @prop {string} lightTheme - 亮色主题名称
+ * @prop {string} darkTheme - 暗色主题名称
+ *
+ * @example
+ * <ThemeToggle
+ *   currentTheme={$theme}
+ *   onchange={(theme) => themeStore.set(theme)}
+ * />
+ */
+declare const ThemeToggle: import("svelte").Component<Props, {}, "">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;

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

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

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

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

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

@@ -0,0 +1,39 @@
+<!--
+  @component CrudDeleteConfirm
+  CRUD 删除确认对话框
+
+  使用 Svelte 5 Runes ($props)
+  使用 compounds 组件：Confirm
+-->
+<script lang='ts'>
+  import { uiM } from '../../../messages.js'
+  import Confirm from '../../compounds/Confirm.svelte'
+
+  let {
+    open = $bindable(false),
+    loading = false,
+    title = '',
+    message = '',
+    onconfirm,
+    oncancel,
+  }: {
+    open?: boolean
+    loading?: boolean
+    title?: string
+    message?: string
+    onconfirm?: () => Promise<void> | void
+    oncancel?: () => void
+  } = $props()
+</script>
+
+<Confirm
+  bind:open
+  title={title || uiM('crud_delete_title')}
+  message={message || uiM('crud_delete_message')}
+  confirmText={uiM('crud_delete')}
+  cancelText={uiM('crud_cancel')}
+  variant='error'
+  {loading}
+  {onconfirm}
+  {oncancel}
+/>

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

@@ -0,0 +1,18 @@
+type $$ComponentProps = {
+    open?: boolean;
+    loading?: boolean;
+    title?: string;
+    message?: string;
+    onconfirm?: () => Promise<void> | void;
+    oncancel?: () => void;
+};
+/**
+ * CrudDeleteConfirm
+ * CRUD 删除确认对话框
+ *
+ * 使用 Svelte 5 Runes ($props)
+ * 使用 compounds 组件：Confirm
+ */
+declare const CrudDeleteConfirm: import("svelte").Component<$$ComponentProps, {}, "open">;
+type CrudDeleteConfirm = ReturnType<typeof CrudDeleteConfirm>;
+export default CrudDeleteConfirm;

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

@@ -0,0 +1,155 @@
+<!--
+  @component CrudDetailDrawer
+  CRUD 详情抽屉组件（只读展示）
+
+  使用 Svelte 5 Runes ($props, $derived)
+  使用 compounds 组件：Drawer, Badge
+-->
+<script lang='ts'>
+  import type { Snippet } from 'svelte'
+  import type { Size } from '../../../types.js'
+  import { uiM } from '../../../messages.js'
+  import Drawer from '../../compounds/Drawer.svelte'
+  import Badge from '../../primitives/Badge.svelte'
+  import Button from '../../primitives/Button.svelte'
+
+  type FieldDef = {
+    id: string
+    label: string | (() => string)
+    type: string
+    inDetail?: boolean
+    options?: Array<{ label: string, value: string | number | boolean }> | (() => Array<{ label: string, value: string | number | boolean }>)
+    render?: (value: unknown, item: Record<string, unknown>) => string
+    order?: number
+  }
+
+  let {
+    open = $bindable(false),
+    item = null,
+    fields = [],
+    title = '',
+    size = '2xl' as Size,
+    canEdit = false,
+    onedit,
+    onclose,
+    detailExtra,
+  }: {
+    open?: boolean
+    item?: Record<string, unknown> | null
+    fields?: FieldDef[]
+    title?: string
+    size?: Size
+    canEdit?: boolean
+    onedit?: () => void
+    onclose?: () => void
+    detailExtra?: Snippet<[Record<string, unknown>]>
+  } = $props()
+
+  function resolveText(text: string | (() => string)): string {
+    return typeof text === 'function' ? text() : text
+  }
+
+  function resolveOptions(options?: FieldDef['options']): Array<{ label: string, value: string | number | boolean }> {
+    if (!options)
+      return []
+    return typeof options === 'function' ? options() : options
+  }
+
+  function formatValue(field: FieldDef, value: unknown): string {
+    if (value === null || value === undefined)
+      return uiM('crud_detail_empty')
+
+    if (field.render && item) {
+      return field.render(value, item)
+    }
+
+    // 选项类型：将 value 映射为 label
+    if (field.type === 'select' || field.type === 'radio') {
+      const opts = resolveOptions(field.options)
+      const found = opts.find(o => String(o.value) === String(value))
+      return found?.label ?? String(value)
+    }
+
+    // 多选类型
+    if (field.type === 'multi-select' && Array.isArray(value)) {
+      const opts = resolveOptions(field.options)
+      return value.map((v) => {
+        const found = opts.find(o => String(o.value) === String(v))
+        return found?.label ?? String(v)
+      }).join(', ')
+    }
+
+    // 布尔
+    if (field.type === 'boolean' || field.type === 'checkbox') {
+      return value ? '✓' : '✗'
+    }
+
+    // 日期/时间
+    if (field.type === 'date' && (typeof value === 'string' || typeof value === 'number' || value instanceof Date)) {
+      return new Date(value as string | number).toLocaleDateString()
+    }
+    if (field.type === 'datetime' && (typeof value === 'string' || typeof value === 'number' || value instanceof Date)) {
+      return new Date(value as string | number).toLocaleString()
+    }
+
+    return String(value)
+  }
+
+  const detailFields = $derived(
+    [...fields]
+      .filter(f => f.inDetail !== false)
+      .sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
+  )
+
+  function handleClose() {
+    open = false
+    onclose?.()
+  }
+</script>
+
+<Drawer bind:open {title} position='right' {size} onclose={handleClose}>
+  {#if item}
+    <div class='space-y-4 pb-20'>
+      {#each detailFields as field}
+        {@const value = item[field.id]}
+        <div>
+          <div class='text-xs font-medium text-base-content/50 mb-1'>
+            {resolveText(field.label)}
+          </div>
+          <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}
+                  {@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>
+                {/each}
+              </div>
+            {:else}
+              {formatValue(field, value)}
+            {/if}
+          </div>
+        </div>
+      {/each}
+
+      {#if detailExtra && item}
+        <div class='border-t border-base-content/5 pt-4'>
+          {@render detailExtra(item)}
+        </div>
+      {/if}
+    </div>
+
+    <!-- 底部操作栏 -->
+    <div class='absolute bottom-0 left-0 right-0 p-4 bg-base-200 border-t border-base-content/10 flex justify-end gap-2'>
+      {#if canEdit}
+        <Button variant='primary' onclick={onedit}>
+          <span class='icon-[tabler--edit] size-4 mr-1'></span>
+          {uiM('crud_edit')}
+        </Button>
+      {/if}
+      <Button variant='ghost' onclick={handleClose}>
+        {uiM('crud_close')}
+      </Button>
+    </div>
+  {/if}
+</Drawer>

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

@@ -0,0 +1,38 @@
+import type { Snippet } from 'svelte';
+import type { Size } from '../../../types.js';
+type FieldDef = {
+    id: string;
+    label: string | (() => string);
+    type: string;
+    inDetail?: boolean;
+    options?: Array<{
+        label: string;
+        value: string | number | boolean;
+    }> | (() => Array<{
+        label: string;
+        value: string | number | boolean;
+    }>);
+    render?: (value: unknown, item: Record<string, unknown>) => string;
+    order?: number;
+};
+type $$ComponentProps = {
+    open?: boolean;
+    item?: Record<string, unknown> | null;
+    fields?: FieldDef[];
+    title?: string;
+    size?: Size;
+    canEdit?: boolean;
+    onedit?: () => void;
+    onclose?: () => void;
+    detailExtra?: Snippet<[Record<string, unknown>]>;
+};
+/**
+ * CrudDetailDrawer
+ * CRUD 详情抽屉组件（只读展示）
+ *
+ * 使用 Svelte 5 Runes ($props, $derived)
+ * 使用 compounds 组件：Drawer, Badge
+ */
+declare const CrudDetailDrawer: import("svelte").Component<$$ComponentProps, {}, "open">;
+type CrudDetailDrawer = ReturnType<typeof CrudDetailDrawer>;
+export default CrudDetailDrawer;