@h-ai/ui 0.1.0-alpha5

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

@@ -0,0 +1,136 @@
+<!--
+  @component LanguageSwitch
+  语言切换下拉组件，支持多语言切换。
+
+  @prop {string} currentLanguage - 当前语言代码（BCP 47 格式，如 'zh-CN', 'en-US'）
+  @prop {Language[]} languages - 可选语言列表
+  @prop {function} onchange - 语言变更回调，传入选中的语言代码
+
+  @example
+  ```svelte
+  <script>
+    import { LanguageSwitch, createLocaleStore, setGlobalLocale } from '@h-ai/ui'
+    import { setLocale, getLocale } from '../../../paraglide/runtime.js'
+
+    const localeStore = createLocaleStore()
+  </script>
+
+  <LanguageSwitch
+    currentLanguage={localeStore.current}
+    languages={[
+      { value: 'zh-CN', label: '简体中文' },
+      { value: 'en-US', label: 'English' }
+    ]}
+    onchange={(lang) => {
+      localeStore.set(lang)  // 同步到 @h-ai/core 全局 locale
+      setLocale(lang)        // 同步到 Paraglide
+    }}
+  />
+  ```
+-->
+<script lang='ts'>
+  import { uiM } from '../../../messages.js'
+  import BareButton from '../../primitives/BareButton.svelte'
+
+  interface Language {
+    value: string
+    label: string
+    flag?: string
+  }
+
+  interface Props {
+    /** 当前语言代码（BCP 47 格式） */
+    currentLanguage?: string
+    /** 可选语言列表 */
+    languages?: Language[]
+    /** 语言变更回调 */
+    onchange?: (lang: string) => void
+    /** 紧凑模式：仅显示图标，适用于移动端头部 */
+    compact?: boolean
+    /** 自定义类名 */
+    class?: string
+  }
+
+  const {
+    currentLanguage = 'zh-CN',
+    languages = [
+      { value: 'zh-CN', label: '简体中文', flag: 'CN' },
+      { value: 'en-US', label: 'English', flag: 'US' },
+    ],
+    onchange,
+    compact = false,
+    class: className = '',
+  }: Props = $props()
+
+  let open = $state(false)
+  let containerRef = $state<HTMLDivElement | null>(null)
+
+  const currentLangInfo = $derived(
+    languages.find(l => l.value === currentLanguage),
+  )
+
+  function selectLanguage(lang: string) {
+    if (lang !== currentLanguage) {
+      onchange?.(lang)
+    }
+    open = false
+  }
+
+  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' : 'btn-sm gap-2 min-w-fit'}'
+    onclick={() => (open = !open)}
+    ariaLabel={uiM('language_switch_label')}
+  >
+    <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4 shrink-0' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'>
+      <path d='M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129' />
+    </svg>
+    {#if !compact}
+      {#if currentLangInfo?.flag}
+        <span class='shrink-0 text-xs'>{currentLangInfo.flag}</span>
+      {/if}
+      <span class='text-sm whitespace-nowrap'>{currentLangInfo?.label ?? currentLanguage}</span>
+      <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4 shrink-0 opacity-50' viewBox='0 0 20 20' fill='currentColor'>
+        <path fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd' />
+      </svg>
+    {/if}
+  </BareButton>
+
+  {#if open}
+    <div class='dropdown-content bg-base-100 rounded-box shadow-lg border border-base-content/10 z-50 p-2'>
+      {#each languages as lang (lang.value)}
+        <BareButton
+          type='button'
+          class='flex items-center gap-2 w-full px-3 py-2 rounded-lg text-left transition-colors whitespace-nowrap {lang.value === currentLanguage ? 'bg-primary/10 text-primary' : 'hover:bg-base-200'}'
+          onclick={() => selectLanguage(lang.value)}
+        >
+          {#if lang.flag}
+            <span class='shrink-0 text-xs font-medium text-base-content/60'>{lang.flag}</span>
+          {/if}
+          <span class='whitespace-nowrap'>{lang.label}</span>
+          {#if lang.value === currentLanguage}
+            <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4 ml-auto shrink-0' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'>
+              <path d='M5 13l4 4L19 7' />
+            </svg>
+          {/if}
+        </BareButton>
+      {/each}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,50 @@
+interface Language {
+    value: string;
+    label: string;
+    flag?: string;
+}
+interface Props {
+    /** 当前语言代码（BCP 47 格式） */
+    currentLanguage?: string;
+    /** 可选语言列表 */
+    languages?: Language[];
+    /** 语言变更回调 */
+    onchange?: (lang: string) => void;
+    /** 紧凑模式：仅显示图标，适用于移动端头部 */
+    compact?: boolean;
+    /** 自定义类名 */
+    class?: string;
+}
+/**
+ * LanguageSwitch
+ * 语言切换下拉组件，支持多语言切换。
+ *
+ * @prop {string} currentLanguage - 当前语言代码（BCP 47 格式，如 'zh-CN', 'en-US'）
+ * @prop {Language[]} languages - 可选语言列表
+ * @prop {function} onchange - 语言变更回调，传入选中的语言代码
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { LanguageSwitch, createLocaleStore, setGlobalLocale } from '@h-ai/ui'
+ *   import { setLocale, getLocale } from '../../../paraglide/runtime.js'
+ *
+ *   const localeStore = createLocaleStore()
+ * </script>
+ *
+ * <LanguageSwitch
+ *   currentLanguage={localeStore.current}
+ *   languages={[
+ *     { value: 'zh-CN', label: '简体中文' },
+ *     { value: 'en-US', label: 'English' }
+ *   ]}
+ *   onchange={(lang) => {
+ *     localeStore.set(lang)  // 同步到 @h-ai/core 全局 locale
+ *     setLocale(lang)        // 同步到 Paraglide
+ *   }}
+ * />
+ * ```
+ */
+declare const LanguageSwitch: import("svelte").Component<Props, {}, "">;
+type LanguageSwitch = ReturnType<typeof LanguageSwitch>;
+export default LanguageSwitch;

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

@@ -0,0 +1,174 @@
+<!--
+  @component SettingsModal
+  应用设置模态框，包含语言和主题切换功能。
+  内置多语言支持，自动跟随全局 locale
+
+  @prop {boolean} open - 是否显示模态框（双向绑定）
+  @prop {string} currentLanguage - 当前语言
+  @prop {string} currentTheme - 当前主题
+  @prop {function} onlanguagechange - 语言变更回调
+  @prop {function} onthemechange - 主题变更回调
+-->
+<script lang='ts'>
+  import { uiM } from '../../../messages.js'
+  import BareButton from '../../primitives/BareButton.svelte'
+  import IconButton from '../../primitives/IconButton.svelte'
+
+  interface Props {
+    open?: boolean
+    currentLanguage?: string
+    currentTheme?: string
+    languages?: { value: string, label: string, icon?: string }[]
+    themes?: { value: string, label: string }[]
+    onlanguagechange?: (lang: string) => void
+    onthemechange?: (theme: string) => void
+    onclose?: () => void
+  }
+
+  let {
+    open = $bindable(false),
+    currentLanguage = 'zh-cn',
+    currentTheme = 'light',
+    languages = [
+      { value: 'zh-cn', label: '简体中文', icon: '🇨🇳' },
+      { value: 'en-us', label: 'English', icon: '🇺🇸' },
+    ],
+    themes = [
+      { value: 'light', label: 'Light' },
+      { value: 'dark', label: 'Dark' },
+      { value: 'corporate', label: 'Corporate' },
+      { value: 'luxury', label: 'Luxury' },
+      { value: 'pastel', label: 'Pastel' },
+    ],
+    onlanguagechange,
+    onthemechange,
+    onclose,
+  }: Props = $props()
+
+  function handleClose() {
+    open = false
+    onclose?.()
+  }
+
+  function handleBackdropClick(e: MouseEvent) {
+    if (e.target === e.currentTarget) {
+      handleClose()
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      handleClose()
+    }
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class='fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm transition-opacity'
+    onclick={handleBackdropClick}
+  >
+    <div
+      class='relative w-full max-w-lg mx-4 transform overflow-hidden rounded-2xl bg-base-100 shadow-xl transition-all'
+      role='dialog'
+      aria-modal='true'
+    >
+      <!-- 标题栏 -->
+      <div class='flex items-center justify-between border-b border-base-content/10 px-6 py-4'>
+        <h3 class='text-lg font-semibold text-base-content'>{uiM('settings_title')}</h3>
+        <IconButton
+          size='sm'
+          variant='ghost'
+          label={uiM('settings_close')}
+          onclick={handleClose}
+          class='hover:bg-base-content/10'
+        >
+          {#snippet children()}
+            <span class='icon-[tabler--x] size-5'></span>
+          {/snippet}
+        </IconButton>
+      </div>
+
+      <!-- 内容区 -->
+      <div class='overflow-y-auto p-6' style='max-height: calc(85vh - 4rem);'>
+        <!-- 语言设置 -->
+        <section class='mb-8'>
+          <h4 class='mb-4 flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-base-content/60'>
+            <span class='icon-[tabler--world] size-4'></span>
+            {uiM('settings_language')}
+          </h4>
+          <div class='flex gap-3'>
+            {#each languages as lang (lang.value)}
+              <BareButton
+                type='button'
+                class='group flex flex-1 items-center justify-center gap-3 rounded-xl border-2 px-6 py-4 text-base font-medium transition-all duration-200
+                  hover:border-primary/60 hover:bg-primary/5 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40
+                  {currentLanguage === lang.value
+                    ? 'border-primary bg-primary/10 text-primary shadow-sm'
+                    : 'border-base-content/15 bg-base-100 text-base-content/80'}'
+                onclick={() => onlanguagechange?.(lang.value)}
+                role='option'
+                ariaSelected={currentLanguage === lang.value}
+              >
+                {#if lang.icon}
+                  <span class='text-2xl'>{lang.icon}</span>
+                {/if}
+                <span>{lang.label}</span>
+                {#if currentLanguage === lang.value}
+                  <span class='icon-[tabler--check] size-5 text-primary'></span>
+                {/if}
+              </BareButton>
+            {/each}
+          </div>
+        </section>
+
+        <!-- 主题设置 -->
+        <section>
+          <h4 class='mb-4 flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-base-content/60'>
+            <span class='icon-[tabler--sun] size-4'></span>
+            {uiM('settings_theme')}
+          </h4>
+          <div class='grid gap-2.5 grid-cols-2 sm:grid-cols-3'>
+            {#each themes as theme (theme.value)}
+              <BareButton
+                type='button'
+                class='group relative flex flex-col gap-2 rounded-xl border-2 p-3 text-left transition-all duration-200
+                  hover:border-primary/50 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40
+                  {currentTheme === theme.value
+                    ? 'border-primary bg-primary/5 shadow-sm'
+                    : 'border-base-content/10 bg-base-100 hover:bg-base-50'}'
+                onclick={() => onthemechange?.(theme.value)}
+                role='option'
+                ariaSelected={currentTheme === theme.value}
+              >
+                {#if currentTheme === theme.value}
+                  <div class='absolute -right-1 -top-1 rounded-full bg-primary p-0.5 text-primary-content shadow'>
+                    <span class='icon-[tabler--check] size-3'></span>
+                  </div>
+                {/if}
+
+                <!-- 主题预览 -->
+                <div data-theme={theme.value} class='flex items-center gap-2 rounded-lg bg-base-100 p-2 ring-1 ring-base-content/10' aria-hidden='true'>
+                  <span class='text-sm font-bold text-base-content'>Aa</span>
+                  <div class='flex flex-1 gap-1'>
+                    <span class='h-3 flex-1 rounded bg-primary'></span>
+                    <span class='h-3 flex-1 rounded bg-secondary'></span>
+                    <span class='h-3 flex-1 rounded bg-accent'></span>
+                  </div>
+                </div>
+
+                <span class='text-xs font-medium text-base-content/80 group-hover:text-base-content'>
+                  {theme.label}
+                </span>
+              </BareButton>
+            {/each}
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+{/if}

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

@@ -0,0 +1,31 @@
+interface Props {
+    open?: boolean;
+    currentLanguage?: string;
+    currentTheme?: string;
+    languages?: {
+        value: string;
+        label: string;
+        icon?: string;
+    }[];
+    themes?: {
+        value: string;
+        label: string;
+    }[];
+    onlanguagechange?: (lang: string) => void;
+    onthemechange?: (theme: string) => void;
+    onclose?: () => void;
+}
+/**
+ * SettingsModal
+ * 应用设置模态框，包含语言和主题切换功能。
+ * 内置多语言支持，自动跟随全局 locale
+ *
+ * @prop {boolean} open - 是否显示模态框（双向绑定）
+ * @prop {string} currentLanguage - 当前语言
+ * @prop {string} currentTheme - 当前主题
+ * @prop {function} onlanguagechange - 语言变更回调
+ * @prop {function} onthemechange - 主题变更回调
+ */
+declare const SettingsModal: import("svelte").Component<Props, {}, "open">;
+type SettingsModal = ReturnType<typeof SettingsModal>;
+export default SettingsModal;

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>