weifuwu 0.94.0 → 0.95.0

package/dist/level5/client/components/Tag/Tag.ts

@@ -0,0 +1,25 @@
+/** Tag：标签，支持 closable/onClose（showcase /components/tag） */
+import type {Component, VNodeChild} from '../../../../level6/client/vdom/index.ts'
+import type { UIContext } from '../../../../level6/client/vdom/index.ts'
+import { h } from '../../../../level6/client/vdom/index.ts'
+import { Icon } from '../Icon/Icon.ts'
+
+export interface TagProps {
+  closable?: boolean
+  onClose?: ()=> void
+  variant?: 'default' | 'primary' | 'success' | 'danger'
+  children?: VNodeChild}
+
+export const Tag: Component<TagProps> = (_init, _ctx)=>
+  (props)=> {
+  const { closable, onClose, variant = 'default', children } = props
+
+  const closeBtn = closable
+    ? h('button', { class: 'wf-tag-close', onClick: onClose, type: 'button', 'aria-label': '移除' }, h(Icon, { name: 'close' }))
+    : null
+
+  return h('span', { class: `wf-tag wf-tag--${variant}` }, [
+    h('span', { class: 'wf-tag-text' }, children),
+    closeBtn,
+  ].filter(Boolean))
+}

package/dist/level5/client/components/TagsInput/TagsInput.css

@@ -0,0 +1,72 @@
+/* weifuwu/client/components — TagsInput */
+
+.wf-tags {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--wf-gap-xs);
+  padding: var(--wf-space-xs) var(--wf-space-sm);
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius-sm);
+  background: var(--wf-color-bg);
+  min-height: 36px; /* 与 Input 对齐 */
+  cursor: text;
+  transition: border-color var(--wf-dur-fast) var(--wf-ease-out);
+}
+
+.wf-tags:focus-within {
+  border-color: var(--wf-color-primary);
+  box-shadow: 0 0 0 2px var(--wf-color-primary-bg);
+}
+
+.wf-tags--err { border-color: var(--wf-color-error); box-shadow: 0 0 0 2px var(--wf-color-error-bg); }
+.wf-tags--disabled { opacity: 0.6; cursor: not-allowed; }
+
+.wf-tags-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--wf-gap-xs);
+  padding: 2px var(--wf-space-xs);
+  border-radius: var(--wf-radius-sm);
+  background: var(--wf-color-bg-secondary);
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  font-size: var(--wf-font-size-xs);
+  color: var(--wf-color-text);
+  font-family: var(--wf-font-sans);
+}
+
+.wf-tags-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  min-width: 16px;
+  max-width: 16px;
+  min-height: 16px; /* 防全局 button min-height:36 撑高 */
+  max-height: 16px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--wf-color-text-tertiary);
+  padding: 0;
+  line-height: 0;
+  border-radius: var(--wf-radius-xs);
+}
+.wf-tags-remove:hover { color: var(--wf-color-error-text); }
+.wf-tags-remove:focus-visible { outline: 2px solid var(--wf-color-primary); }
+
+.wf-tags-input {
+  flex: 1;
+  min-width: 60px;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text);
+  padding: var(--wf-space-xs) 0;
+}
+.wf-tags-input::placeholder { color: var(--wf-color-text-tertiary); }
+/* ── 语义标记类（DOM 钩子——无样式：测试定位/用户扩展——:where 零优先级显式声明） ── */
+:where(.wf-tags-text) {}

package/dist/level5/client/components/TagsInput/TagsInput.d.ts

@@ -0,0 +1,22 @@
+/** TagsInput：标签输入：回车/逗号添加 + 中文输入法感知（showcase /components/tagsinput） */
+/**
+ * weifuwu/client/components — TagsInput
+ *
+ * 标签输入：回车/逗号添加、Backspace 删除、去重、maxTags 限制。
+ * 中文输入法 composition 感知（输入法候选词确认的 Enter 不触发添加）。
+ * 裁剪（CS-05，见 docs/client.md）：不做下拉建议（组合 Select searchable）。
+ */
+import type { Component } from '../../../../level6/client/vdom/index.ts';
+export interface TagsInputProps {
+    value?: string[];
+    onChange?: (tags: string[]) => void;
+    placeholder?: string;
+    maxTags?: number;
+    allowDuplicates?: boolean;
+    disabled?: boolean;
+    label?: string;
+    error?: string;
+    hint?: string;
+    className?: string;
+}
+export declare const TagsInput: Component<TagsInputProps>;

package/dist/level5/client/components/TagsInput/TagsInput.ts

@@ -0,0 +1,109 @@
+/** TagsInput：标签输入：回车/逗号添加 + 中文输入法感知（showcase /components/tagsinput） */
+/**
+ * weifuwu/client/components — TagsInput
+ *
+ * 标签输入：回车/逗号添加、Backspace 删除、去重、maxTags 限制。
+ * 中文输入法 composition 感知（输入法候选词确认的 Enter 不触发添加）。
+ * 裁剪（CS-05，见 docs/client.md）：不做下拉建议（组合 Select searchable）。
+ */
+
+import type { Component } from '../../../../level6/client/vdom/index.ts'
+import type { UIContext } from '../../../../level6/client/vdom/index.ts'
+import { h } from '../../../../level6/client/vdom/index.ts'
+import { Icon } from '../Icon/Icon.ts'
+
+export interface TagsInputProps {
+  value?: string[]
+  onChange?: (tags: string[])=> void
+  placeholder?: string
+  maxTags?: number
+  allowDuplicates?: boolean
+  disabled?: boolean
+  label?: string
+  error?: string
+  hint?: string
+  className?: string
+}
+
+export const TagsInput: Component<TagsInputProps> = (_init, ctx)=> {
+  // 输入法 composition 状态（中文候选词确认 Enter 不应提交标签）
+  let composing = false
+
+  return (props: TagsInputProps)=> {
+    const {
+      placeholder, maxTags, allowDuplicates,
+      disabled, label, error, hint, className,
+    } = props
+
+    // useControlled：受控/非受控统一（原非受控 add/remove 不可用——受控纪律违规）
+    const ctrl = ctx?.ui?.useControlled<string[]>({ value: props.value, onChange: props.onChange, name: 'TagsInput' })
+    const value = ctrl?.value ?? []
+    const setTags = (next: string[])=> {
+      const wasControlled = ctrl?.controlled?.value !== undefined
+      ctrl?.setValue(next)
+      if (!wasControlled) props.onChange?.(next)
+    }
+
+    const addTag = (raw: string)=> {
+      if (disabled) return
+      const tag = raw.trim().replace(/,$/, '')
+      if (!tag) return
+      if (maxTags != null && value.length >= maxTags) return
+      if (!allowDuplicates && value.includes(tag)) return
+      setTags([...value, tag])
+    }
+
+    const removeTag = (tag: string)=> {
+      if (disabled) return
+      setTags(value.filter((t)=> t !== tag))
+    }
+
+    const handleKeyDown = (e: KeyboardEvent)=> {
+      const el = e.target as HTMLInputElement
+      if (e.key === 'Enter' || e.key === ',') {
+        e.preventDefault()
+        if (composing) return // 输入法确认候选词：不提交
+        addTag(el.value)
+        el.value = ''
+      } else if (e.key === 'Backspace' && !el.value && value.length > 0) {
+        removeTag(value[value.length - 1])
+      }
+    }
+
+    const labelEl = label
+      ? h('label', { class: 'wf-input-label' }, label)
+      : null
+
+    const tags = value.map((t)=>
+      h('span', { key: t, class: 'wf-tags-tag' }, [
+        h('span', { class: 'wf-tags-text' }, t),
+        h('button', {
+          class: 'wf-tags-remove', type: 'button',
+          'aria-label': `移除 ${t}`,
+          onClick: ()=> removeTag(t),
+        }, h(Icon, { name: 'close', size: 12 })),
+      ]))
+
+    const input = h('input', {
+      class: 'wf-tags-input',
+      type: 'text',
+      placeholder: value.length === 0 ? placeholder : undefined,
+      disabled,
+      onKeyDown: handleKeyDown,
+      onCompositionStart: ()=> { composing = true },
+      onCompositionEnd: ()=> { composing = false },
+    })
+
+    const wrap = h('div', {
+      class: `wf-tags${disabled ? ' wf-tags--disabled' : ''}${error ? ' wf-tags--err' : ''}${className ? ` ${className}` : ''}`,
+    }, [...tags, input])
+
+    const children: any[] = []
+    if (labelEl) children.push(labelEl)
+    children.push(wrap)
+    if (error) children.push(h('div', { class: 'wf-input-err' }, error))
+    if (hint && !error) children.push(h('div', { class: 'wf-input-hint' }, hint))
+
+    return h('div', { class: 'wf-field' }, children)
+  }
+}

package/dist/level5/client/components/Textarea/Textarea.css

@@ -0,0 +1,55 @@
+/* weifuwu/client/components — Textarea */
+
+.wf-textarea-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wf-gap-xs);
+}
+
+.wf-textarea {
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-sm);
+  min-height: var(--wf-field-height);
+  padding: var(--wf-control-pad-y) var(--wf-space);
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-field-radius);
+  background: var(--wf-color-bg);
+  color: var(--wf-color-text);
+  outline: none;
+  transition: border-color var(--wf-transition), box-shadow var(--wf-transition), background-color var(--wf-transition), color var(--wf-transition);
+  width: 100%;
+  resize: vertical;
+  line-height: var(--wf-line-height);
+}
+
+.wf-textarea:focus {
+  border-color: var(--wf-color-primary);
+  box-shadow: var(--wf-focus-ring);
+}
+
+.wf-textarea:disabled {
+  opacity: var(--wf-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.wf-textarea::placeholder {
+  color: var(--wf-color-text-tertiary);
+}
+
+/* 字数统计 */
+.wf-textarea-count {
+  font-size: var(--wf-font-size-xs);
+  color: var(--wf-color-text-tertiary);
+  text-align: right;
+  line-height: 1;
+  margin-top: -2px;
+}
+
+.wf-textarea-count--over {
+  color: var(--wf-color-error-text);
+}
+
+.wf-textarea--err .wf-textarea {
+  border-color: var(--wf-color-error);
+  box-shadow: 0 0 0 2px var(--wf-color-error-bg);
+}

package/dist/level5/client/components/Textarea/Textarea.d.ts

@@ -0,0 +1,24 @@
+/** Textarea：多行文本，支持 rows/label/error/hint（showcase /components/textarea） */
+/**
+ * weifuwu/client/components — Textarea
+ *
+ * 2027-09 原语全面化 W2：label/required/error/hint 块 + aria 连接 → useField
+ * 契约——组件只写输入面（textarea + showCount 业务）。
+ */
+import type { Component } from '../../../../level6/client/vdom/index.ts';
+export interface TextareaProps {
+    label?: string;
+    value?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string;
+    hint?: string;
+    rows?: number;
+    /** 最大字符数（同时限制输入） */
+    maxLength?: number;
+    /** 显示字数统计（右下角；配合受控 value 实时更新） */
+    showCount?: boolean;
+    onInput?: (e: Event) => void;
+}
+export declare const Textarea: Component<TextareaProps>;

package/dist/level5/client/components/Textarea/Textarea.ts

@@ -0,0 +1,71 @@
+/** Textarea：多行文本，支持 rows/label/error/hint（showcase /components/textarea） */
+/**
+ * weifuwu/client/components — Textarea
+ *
+ * 2027-09 原语全面化 W2：label/required/error/hint 块 + aria 连接 → useField
+ * 契约——组件只写输入面（textarea + showCount 业务）。
+ */
+
+import type { Component } from '../../../../level6/client/vdom/index.ts'
+import { h } from '../../../../level6/client/vdom/index.ts'
+
+export interface TextareaProps {
+  label?: string
+  value?: string
+  placeholder?: string
+  required?: boolean
+  disabled?: boolean
+  error?: string
+  hint?: string
+  rows?: number
+  /** 最大字符数（同时限制输入） */
+  maxLength?: number
+  /** 显示字数统计（右下角；配合受控 value 实时更新） */
+  showCount?: boolean
+  onInput?: (e: Event)=> void
+}
+
+export const Textarea: Component<TextareaProps> = (_init, ctx)=>
+  (props)=> {
+  const { label, value, placeholder, required, disabled, error, hint, rows = 3, maxLength, showCount, onInput } = props
+  // 字段契约（label/error/hint 结构 + aria 连接——单源）
+  const f = ctx.ui.useField({
+    label, error, hint, required,
+    labelClass: 'wf-textarea-label',
+    errClass: 'wf-textarea-err',
+    hintClass: 'wf-textarea-hint',
+    reqClass: 'wf-textarea-req',
+    wrapErrClass: 'wf-textarea--err',
+  })
+
+  const textareaEl = h('textarea', {
+    class: 'wf-textarea',
+    // 非受控保持 undefined（2027-09——同 Input——diff 过滤避免清写）
+    value: value,
+    placeholder,
+    required: required || undefined,
+    disabled: disabled || undefined,
+    rows,
+    maxLength,
+    onInput,
+    ...f.inputProps(),
+  })
+
+  // **恒 wrap（与原逻辑等价——Textarea 无 label/error/hint 也包 div——
+  // 与 Input 的裸输入短路不同——CSS 依赖 wf-textarea-wrap）**
+  const children: any[] = [f.renderLabel(), textareaEl]
+
+  if (showCount) {
+    const len = (value ?? '').length
+    const over = maxLength != null && len > maxLength
+    children.push(h('div', {
+      class: `wf-textarea-count${over ? ' wf-textarea-count--over' : ''}`,
+      'aria-live': 'polite',
+    }, maxLength != null ? `${len}/${maxLength}` : String(len)))
+  }
+
+  children.push(f.renderError())
+  children.push(f.renderHint())
+
+  return h('div', { class: `wf-textarea-wrap${f.stateClass}` }, children.filter(Boolean))
+}

package/dist/level5/client/components/ThemeSwitch/ThemeSwitch.css

@@ -0,0 +1,72 @@
+/* weifuwu/client/components — ThemeSwitch 主题切换器 */
+
+.wf-theme-switch {
+  display: inline-flex;
+  flex-wrap: wrap; /* 预设行（可选）占满整行换行到第二行 */
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius-md);
+  background: var(--wf-color-bg-secondary);
+  font-family: var(--wf-font-sans);
+  box-shadow: var(--wf-theme-switch-inset, var(--wf-shadow-inset));
+}
+
+.wf-theme-seg {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--wf-space-xs) var(--wf-space-sm);
+  min-height: 26px;
+  border: none;
+  background: none;
+  border-radius: var(--wf-radius-sm);
+  font-size: var(--wf-font-size-sm);
+  line-height: 1;
+  color: var(--wf-color-text-secondary);
+  cursor: pointer;
+  white-space: nowrap;
+  user-select: none;
+  transition: border-color var(--wf-transition), box-shadow var(--wf-transition), background-color var(--wf-transition), color var(--wf-transition);
+}
+
+.wf-theme-seg:hover {
+  color: var(--wf-color-text);
+  background: var(--wf-color-bg-tertiary);
+}
+
+.wf-theme-seg--active {
+  background: var(--wf-color-bg);
+  color: var(--wf-color-text);
+  font-weight: var(--wf-font-weight-medium);
+  box-shadow: var(--wf-shadow-sm);
+}
+
+.wf-theme-seg:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
+}
+
+.wf-theme-seg:disabled {
+  opacity: var(--wf-opacity-disabled);
+  cursor: not-allowed;
+}
+
+/* 预设主题行（可选——传 preset/onPresetChange 才渲染）：小号分段，与模式行同控件语言 */
+.wf-theme-preset-row {
+  display: inline-flex;
+  flex-basis: 100%; /* 换行占满 */
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  padding: 2px 2px 0;
+  border-top: var(--wf-border-width) solid var(--wf-color-border-light);
+  margin-top: 2px;
+}
+
+.wf-theme-seg--preset {
+  min-height: 22px;
+  padding: 2px var(--wf-space-xs);
+  font-size: var(--wf-font-size-xs);
+}

package/dist/level5/client/components/ThemeSwitch/ThemeSwitch.d.ts

@@ -0,0 +1,35 @@
+/** ThemeSwitch：主题切换：auto/light/dark，localStorage 持久化（showcase /components/themeswitch） */
+/**
+ * weifuwu/client/components — ThemeSwitch 主题切换器
+ *
+ * 三段式切换：auto（跟随系统偏好）/ light（强制亮色）/ dark（强制暗色）。
+ * 对应 layout 的暗色双段激活机制：
+ *   - auto  → 移除 data-theme，由 @media (prefers-color-scheme) 决定
+ *   - light → <html data-theme="light">（系统暗色也强制亮色）
+ *   - dark  → <html data-theme="dark">
+ *
+ * mount 时读取 localStorage 并立即应用（避免闪白）；
+ * 用户选择后持久化。
+ */
+import type { Component } from '../../../../level6/client/vdom/index.ts';
+export type ThemeMode = 'auto' | 'light' | 'dark';
+export type PresetName = 'default' | 'minimal' | 'compact' | 'rounded';
+export interface ThemeSwitchProps {
+    /** 初始模式（默认从 localStorage 读取，无记录时为 auto） */
+    mode?: ThemeMode;
+    /** 切换回调 */
+    onChange?: (mode: ThemeMode) => void;
+    /** localStorage 存储 key */
+    storageKey?: string;
+    /** 预设主题（可选——传了才渲染预设行；对应 layout `data-preset`） */
+    preset?: PresetName;
+    /** 预设切换回调 */
+    onPresetChange?: (preset: PresetName) => void;
+}
+/** 应用主题：auto 移除属性，light/dark 显式设置 */
+export declare function applyTheme(mode: ThemeMode): void;
+/** 应用预设主题：default 移除属性，其余显式设置 data-preset（与 data-theme 正交） */
+export declare function applyPreset(preset: PresetName): void;
+/** 读取当前生效主题（localStorage 优先，其次系统偏好） */
+export declare function getTheme(): ThemeMode;
+export declare const ThemeSwitch: Component<ThemeSwitchProps>;

package/dist/level5/client/components/ThemeSwitch/ThemeSwitch.ts

@@ -0,0 +1,148 @@
+/** ThemeSwitch：主题切换：auto/light/dark，localStorage 持久化（showcase /components/themeswitch） */
+/**
+ * weifuwu/client/components — ThemeSwitch 主题切换器
+ *
+ * 三段式切换：auto（跟随系统偏好）/ light（强制亮色）/ dark（强制暗色）。
+ * 对应 layout 的暗色双段激活机制：
+ *   - auto  → 移除 data-theme，由 @media (prefers-color-scheme) 决定
+ *   - light → <html data-theme="light">（系统暗色也强制亮色）
+ *   - dark  → <html data-theme="dark">
+ *
+ * mount 时读取 localStorage 并立即应用（避免闪白）；
+ * 用户选择后持久化。
+ */
+
+import type { Component } from '../../../../level6/client/vdom/index.ts'
+import { createClientBrowser } from '../../../../level6/client/vdom/index.ts'
+import type { UIContext } from '../../../../level6/client/vdom/index.ts'
+import { h, createItem } from '../../../../level6/client/vdom/index.ts'
+
+const browser = createClientBrowser()
+
+export type ThemeMode = 'auto' | 'light' | 'dark'
+
+export type PresetName = 'default' | 'minimal' | 'compact' | 'rounded'
+
+const PRESETS: Array<{ value: PresetName; label: string }> = [
+  { value: 'default', label: '默认' },
+  { value: 'minimal', label: '极简' },
+  { value: 'compact', label: '紧凑' },
+  { value: 'rounded', label: '圆润' },
+]
+
+export interface ThemeSwitchProps {
+  /** 初始模式（默认从 localStorage 读取，无记录时为 auto） */
+  mode?: ThemeMode
+  /** 切换回调 */
+  onChange?: (mode: ThemeMode)=> void
+  /** localStorage 存储 key */
+  storageKey?: string
+  /** 预设主题（可选——传了才渲染预设行；对应 layout `data-preset`） */
+  preset?: PresetName
+  /** 预设切换回调 */
+  onPresetChange?: (preset: PresetName)=> void
+}
+
+const DEFAULT_KEY = 'wf_theme'
+const DEFAULT_PRESET_KEY = 'wf_theme_preset'
+
+function readStored(key: string): ThemeMode | null {
+  const v = browser?.storageGet(key) ?? null
+  return v === 'light' || v === 'dark' || v === 'auto' ? v : null
+}
+
+function writeStored(key: string, value: string): void {
+  browser?.storageSet(key, value)
+}
+
+/** 应用主题：auto 移除属性，light/dark 显式设置 */
+export function applyTheme(mode: ThemeMode): void {
+  const root = browser?.rootElement()
+  if (!root) return
+  if (mode === 'auto') root.removeAttribute('data-theme')
+  else root.setAttribute('data-theme', mode)
+}
+
+function readStoredPreset(key: string): PresetName | null {
+  const v = browser?.storageGet(key) ?? null
+  return v === 'minimal' || v === 'compact' || v === 'rounded' || v === 'default' ? v : null
+}
+
+/** 应用预设主题：default 移除属性，其余显式设置 data-preset（与 data-theme 正交） */
+export function applyPreset(preset: PresetName): void {
+  const root = browser?.rootElement()
+  if (!root) return
+  if (preset === 'default') root.removeAttribute('data-preset')
+  else root.setAttribute('data-preset', preset)
+}
+
+/** 读取当前生效主题（localStorage 优先，其次系统偏好） */
+export function getTheme(): ThemeMode {
+  const stored = readStored(DEFAULT_KEY)
+  if (stored) return stored
+  return 'auto'
+}
+
+export const ThemeSwitch: Component<ThemeSwitchProps> = (initProps, ctx)=> {
+  // 交互子项状态捆绑（createItem——--active 类 + aria-checked 布尔（原 String() 化等价——
+  // 内核 ariaBoolValue 归一 'true'/'false'））
+  const segItem = createItem({ cls: 'wf-theme-seg', role: 'radio', aria: 'aria-checked' })
+  const storageKey = initProps.storageKey ?? DEFAULT_KEY
+  const presetKey = initProps.storageKey ? `${initProps.storageKey}_preset` : DEFAULT_PRESET_KEY
+  // ── mount（只一次）：读取持久化设置并立即应用——状态原语（set 自动重渲染）
+  const mode = ctx.ui.useSignal<ThemeMode>(initProps.mode ?? readStored(storageKey) ?? 'auto')
+  const preset = ctx.ui.useSignal<PresetName>(initProps.preset ?? readStoredPreset(presetKey) ?? 'default')
+  applyTheme(mode.get())
+  applyPreset(preset.get())
+
+  // ── render ──
+  return (props)=> {
+    const SL = ctx?.i18n?.components?.ThemeSwitch ?? {}
+    const modes: Array<{ value: ThemeMode; label: string }> = [
+      { value: 'auto', label: SL.auto ?? '自动' },
+      { value: 'light', label: SL.light ?? '亮色' },
+      { value: 'dark', label: SL.dark ?? '暗色' },
+    ]
+
+    const segments = modes.map(m =>
+      h('button', segItem(mode.get() === m.value, {
+        type: 'button',
+        'aria-label': m.label,
+        onClick: ()=> {
+          if (mode.get() === m.value) return
+          mode.set(m.value)
+          applyTheme(mode.get())
+          writeStored(storageKey, mode.get())
+          props.onChange?.(mode.get())
+        },
+      }), m.label),
+    )
+
+    // 预设行（可选——传 preset/onPresetChange 才渲染；与模式行同一分段控件）
+    const presetSegs = PRESETS.map(p =>
+      h('button', segItem(preset.get() === p.value, {
+        type: 'button',
+        class: 'wf-theme-seg--preset',
+        'aria-label': SL[`preset-${p.value}`] ?? p.label,
+        onClick: ()=> {
+          if (preset.get() === p.value) return
+          preset.set(p.value)
+          applyPreset(preset.get())
+          writeStored(presetKey, preset.get())
+          props.onPresetChange?.(preset.get())
+        },
+      }), p.label),
+    )
+
+    const hasPresetRow = props.preset !== undefined || props.onPresetChange !== undefined
+    const children = hasPresetRow
+      ? [segments, h('div', { class: 'wf-theme-preset-row', role: 'radiogroup', 'aria-label': SL.presetGroup ?? '预设主题' }, presetSegs)]
+      : segments
+
+    return h('div', {
+      class: 'wf-theme-switch',
+      role: 'radiogroup',
+      'aria-label': SL.label ?? '主题切换',
+    }, children)
+  }
+}