weifuwu 0.94.0 → 0.95.0

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

@@ -0,0 +1,21 @@
+/** Resizable：拖拽分割面板：pointer + 键盘方向键 + clamp（shadcn）（showcase /components/resizable） */
+import type { Component } from '../../../../level6/client/vdom/index.ts';
+export interface ResizableProps {
+    /** horizontal 左右分割（默认）/ vertical 上下分割 */
+    direction?: 'horizontal' | 'vertical';
+    /** 第一面板初始尺寸（px） */
+    defaultSize?: number;
+    /** 最小尺寸（px），默认 80 */
+    min?: number;
+    /** 最大尺寸（px），默认 80% 视口 */
+    max?: number;
+    /** 键盘步进（px），默认 20 */
+    step?: number;
+    children: [any, any];
+    onResize?: (size: number) => void;
+    className?: string;
+}
+/** 可拖拽分割面板（对应 shadcn Resizable）：两面板 + 拖拽手柄（pointer + 键盘方向键）。
+ * 拖拽经 ctx.ui.useDrag（pointerdown 捕获 → window move delta / up 释放），不再自建 window 监听。
+ * 最新 props 经 propsRef 供 mount 期 useDrag 回调读取。 */
+export declare const Resizable: Component<ResizableProps>;

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

@@ -0,0 +1,87 @@
+/** Resizable：拖拽分割面板：pointer + 键盘方向键 + clamp（shadcn）（showcase /components/resizable） */
+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'
+
+export interface ResizableProps {
+  /** horizontal 左右分割（默认）/ vertical 上下分割 */
+  direction?: 'horizontal' | 'vertical'
+  /** 第一面板初始尺寸（px） */
+  defaultSize?: number
+  /** 最小尺寸（px），默认 80 */
+  min?: number
+  /** 最大尺寸（px），默认 80% 视口 */
+  max?: number
+  /** 键盘步进（px），默认 20 */
+  step?: number
+  children: [any, any]
+  onResize?: (size: number)=> void
+  className?: string
+}
+
+/** 可拖拽分割面板（对应 shadcn Resizable）：两面板 + 拖拽手柄（pointer + 键盘方向键）。
+ * 拖拽经 ctx.ui.useDrag（pointerdown 捕获 → window move delta / up 释放），不再自建 window 监听。
+ * 最新 props 经 propsRef 供 mount 期 useDrag 回调读取。 */
+export const Resizable: Component<ResizableProps> = (_init, ctx)=> {
+  // ── mount（只一次）──
+  let size = 0
+  const propsRef: any = { ..._init }
+
+  const clamp = (v: number)=> Math.max(propsRef.min ?? 80, Math.min(v, propsRef.max ?? 600))
+  const setSize = (v: number)=> {
+    const next = clamp(v)
+    if (next !== size) {
+      size = next
+      propsRef.onResize?.(next)
+      ctx.render()
+    }
+  }
+
+  // 拖拽原语：onStart 记录起始尺寸，onMove 按方向取 delta
+  let startSize = 0
+  const drag = ctx.ui.useDrag({
+    onStart: ()=> { startSize = size },
+    onMove: (e, d)=> {
+      const delta = propsRef.direction === 'horizontal' ? d.x : d.y
+      setSize(startSize + delta)
+    },
+  })
+
+  return (props)=> {
+    const {
+      direction = 'horizontal', defaultSize = 300, min = 80, max = 600,
+      step = 20, children, onResize, className,
+    } = props
+    // propsRef 同步**解构默认化后**的值（onMove 读 direction 必须拿到 'horizontal' 而非 undefined）
+    Object.assign(propsRef, props, { direction, min, max, step, onResize })
+
+    if (size === 0) size = defaultSize
+
+    const onKeyDown = (e: any)=> {
+      const inc = direction === 'horizontal'
+        ? (e.key === 'ArrowRight' ? step : e.key === 'ArrowLeft' ? -step : 0)
+        : (e.key === 'ArrowDown' ? step : e.key === 'ArrowUp' ? -step : 0)
+      if (inc !== 0) {
+        e.preventDefault()
+        setSize(size + inc)
+      }
+    }
+
+    const handle = h('div', {
+      class: 'wf-resizable-handle',
+      role: 'separator',
+      'aria-orientation': direction === 'horizontal' ? 'vertical' : 'horizontal',
+      tabIndex: 0,
+      ...drag, // onPointerDown（useDrag：捕获 + window move/up + preventDefault）
+      onKeyDown,
+    })
+
+    return h('div', {
+      class: ['wf-resizable', `wf-resizable--${direction}`, className].filter(Boolean).join(' '),
+    }, [
+      h('div', { class: 'wf-resizable-panel', style: { flexBasis: `${size}px` } }, children[0]),
+      handle,
+      h('div', { class: 'wf-resizable-panel wf-resizable-panel--fill' }, children[1]),
+    ])
+  }
+}

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

@@ -0,0 +1,44 @@
+/* weifuwu/client/components — Result */
+
+.wf-result {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--wf-gap-sm);
+  padding: var(--wf-space-xl) var(--wf-space-md);
+  text-align: center;
+  font-family: var(--wf-font-sans);
+}
+
+.wf-result-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+}
+
+.wf-result--success .wf-result-icon { background: var(--wf-color-success-bg); color: var(--wf-color-success-text); }
+.wf-result--error .wf-result-icon { background: var(--wf-color-error-bg); color: var(--wf-color-error-text); }
+.wf-result--warning .wf-result-icon { background: var(--wf-color-warning-bg); color: var(--wf-color-warning-text); }
+.wf-result--info .wf-result-icon { background: var(--wf-color-info-bg); color: var(--wf-color-info-text); }
+
+.wf-result-title {
+  font-size: var(--wf-font-size-lg);
+  font-weight: var(--wf-font-weight-bold);
+  color: var(--wf-color-text);
+}
+
+.wf-result-desc {
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text-secondary);
+  max-width: 420px;
+}
+
+.wf-result-extra {
+  margin-top: var(--wf-space-md);
+  display: flex;
+  gap: var(--wf-gap-sm);
+  justify-content: center;
+}

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

@@ -0,0 +1,18 @@
+/** Result：结果页：success/error/warning/info + extra 操作区（showcase /components/result） */
+/**
+ * weifuwu/client/components — Result
+ *
+ * 结果页：status + title + desc + extra（操作按钮区）。
+ * 用于注册完成/操作成功/404/403 页。
+ * 裁剪（CS-05，见 docs/client.md）：不做内置路由跳转（页面自身处理）。
+ */
+import type { Component, VNodeChild } from '../../../../level6/client/vdom/index.ts';
+export type ResultStatus = 'success' | 'error' | 'warning' | 'info';
+export interface ResultProps {
+    status?: ResultStatus;
+    title?: VNodeChild;
+    desc?: any;
+    extra?: VNodeChild;
+    className?: string;
+}
+export declare const Result: Component<ResultProps>;

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

@@ -0,0 +1,43 @@
+/** Result：结果页：success/error/warning/info + extra 操作区（showcase /components/result） */
+/**
+ * weifuwu/client/components — Result
+ *
+ * 结果页：status + title + desc + extra（操作按钮区）。
+ * 用于注册完成/操作成功/404/403 页。
+ * 裁剪（CS-05，见 docs/client.md）：不做内置路由跳转（页面自身处理）。
+ */
+
+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'
+import type { IconName } from '../Icon/Icon.ts'
+
+export type ResultStatus = 'success' | 'error' | 'warning' | 'info'
+
+export interface ResultProps {
+  status?: ResultStatus
+  title?: VNodeChild
+  desc?: any
+  extra?: VNodeChild
+  className?: string
+}
+
+const ICON: Record<ResultStatus, IconName> = {
+  success: 'check',
+  error: 'close',
+  warning: 'alert',
+  info: 'info',
+}
+
+export const Result: Component<ResultProps> = (_init, _ctx)=>
+  (props)=> {
+    const { status = 'info', title, desc, extra, className } = props
+
+    return h('div', { class: `wf-result wf-result--${status}${className ? ` ${className}` : ''}` }, [
+      h('div', { class: 'wf-result-icon', 'aria-hidden': 'true' }, h(Icon, { name: ICON[status], size: 40 })),
+      h('div', { class: 'wf-result-title' }, title),
+      desc ? h('div', { class: 'wf-result-desc' }, desc) : null,
+      extra ? h('div', { class: 'wf-result-extra' }, extra) : null,
+    ].filter(Boolean))
+  }

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

@@ -0,0 +1,27 @@
+/* weifuwu/client/components — Scrollbar 自定义滚动容器 */
+
+.wf-scrollbar {
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--wf-color-border) transparent;
+}
+
+.wf-scrollbar::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.wf-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.wf-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--wf-color-border);
+  border-radius: var(--wf-radius-sm);
+}
+
+.wf-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--wf-color-text-tertiary);
+}
+/* ── 语义标记类（DOM 钩子——无样式：测试定位/用户扩展——:where 零优先级显式声明） ── */
+:where(.wf-scrollbar--always) {}

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

@@ -0,0 +1,22 @@
+/** Scrollbar：自定义滚动容器：webkit 样式 + hover 显示（showcase /components/scrollbar） */
+/**
+ * weifuwu/client/components — Scrollbar 自定义滚动容器
+ *
+ * 三库等价：EP Scrollbar / shadcn ScrollArea（容器滚动区域）。
+ * webkit 滚动条样式封装 + hover 显示：
+ *
+ *   <Scrollbar maxHeight={300}>长内容</Scrollbar>
+ *
+ * 裁剪（CS-05，见 docs/client.md）：不做虚拟滚动/拖动滚动条 thumb（VirtualList 覆盖虚拟化）。
+ */
+import type { Component, VNodeChild } from '../../../../level6/client/vdom/index.ts';
+export interface ScrollbarProps {
+    maxHeight?: number | string;
+    height?: number | string;
+    orientation?: 'vertical' | 'horizontal';
+    /** 常显滚动条（默认 hover 显示） */
+    always?: boolean;
+    children?: VNodeChild;
+    style?: any;
+}
+export declare const Scrollbar: Component<ScrollbarProps>;

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

@@ -0,0 +1,41 @@
+/** Scrollbar：自定义滚动容器：webkit 样式 + hover 显示（showcase /components/scrollbar） */
+/**
+ * weifuwu/client/components — Scrollbar 自定义滚动容器
+ *
+ * 三库等价：EP Scrollbar / shadcn ScrollArea（容器滚动区域）。
+ * webkit 滚动条样式封装 + hover 显示：
+ *
+ *   <Scrollbar maxHeight={300}>长内容</Scrollbar>
+ *
+ * 裁剪（CS-05，见 docs/client.md）：不做虚拟滚动/拖动滚动条 thumb（VirtualList 覆盖虚拟化）。
+ */
+
+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'
+
+export interface ScrollbarProps {
+  maxHeight?: number | string
+  height?: number | string
+  orientation?: 'vertical' | 'horizontal'
+  /** 常显滚动条（默认 hover 显示） */
+  always?: boolean
+  children?: VNodeChild
+  style?: any
+}
+
+export const Scrollbar: Component<ScrollbarProps> = (_init, _ctx: UIContext)=>
+  (props)=> {
+    const { maxHeight, height, orientation = 'vertical', always, children, style } = props
+    const hAxis = orientation === 'horizontal'
+    return h('div', {
+      class: `wf-scrollbar${always ? ' wf-scrollbar--always' : ''}`,
+      style: {
+        ...style,
+        maxHeight: maxHeight !== undefined ? (typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight) : undefined,
+        height: height !== undefined ? (typeof height === 'number' ? `${height}px` : height) : undefined,
+        overflowY: hAxis ? undefined : 'auto',
+        overflowX: hAxis ? 'auto' : undefined,
+      },
+    }, children)
+  }

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

@@ -0,0 +1,72 @@
+/* weifuwu/client/components — SearchInput */
+
+.wf-search {
+  display: flex;
+  align-items: center;
+  gap: var(--wf-gap-sm);
+  padding: var(--wf-control-pad-y) var(--wf-space);
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius);
+  background: var(--wf-color-bg);
+  transition: border-color var(--wf-transition), box-shadow var(--wf-transition), background-color var(--wf-transition), color var(--wf-transition);
+}
+
+.wf-search:focus-within {
+  border-color: var(--wf-color-primary);
+  box-shadow: var(--wf-focus-ring);
+}
+
+.wf-search-icon {
+  font-size: var(--wf-font-size-sm);
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+.wf-search-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: none;
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text);
+  padding: 0;
+}
+
+.wf-search-input::placeholder {
+  color: var(--wf-color-text-tertiary);
+}
+
+.wf-search-clear {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: var(--wf-font-size-xs); /* 12px 同值 token 化——compact 预设可缩放 */
+  color: var(--wf-color-text-tertiary);
+  padding: 2px;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.wf-search-clear:hover {
+  color: var(--wf-color-text);
+}
+.wf-search-clear:active {
+  opacity: 0.6;
+}
+.wf-search-clear:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
+  border-radius: var(--wf-radius-sm);
+}
+
+/* 受控 + 自定义清除按钮时隐藏原生 ×（type=search WebKit 双清除 UI——
+   自定义 wf-search-clear 是设计清除入口，原生 × 样式不统一且重复） */
+.wf-search--has-clear .wf-search-input::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+/* disabled（F2 状态矩阵） */
+.wf-search-input--dis { opacity: 0.5; cursor: not-allowed; }
+.wf-search-input:disabled { cursor: not-allowed; }

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

@@ -0,0 +1,19 @@
+/** SearchInput：搜索输入框，带清除按钮（showcase /components/searchinput） */
+import type { Component } from '../../../../level6/client/vdom/index.ts';
+export interface SearchInputProps {
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    onInput?: (e: Event) => void;
+    onClear?: () => void;
+}
+/**
+ * SearchInput —— 搜索输入框（受控/非受控统一 + IME 门控）
+ *
+ * - 受控（value 显式传入）：input.value 由 value 回写，清除按钮随 value 显隐；
+ *   非受控（不传 value）：DOM 值透传 onInput，组件不回写（§5.3 输入态不依赖受控回流）
+ * - IME 组合（中文拼音）：组合期间跳过 onInput（composing + e.isComposing 门控）——
+ *   避免受控 value 重置打断输入法（AutoComplete/Mentions/TagsInput 同款纪律）；
+ *   组合结束 onCompositionEnd 处理最终中文值
+ */
+export declare const SearchInput: Component<SearchInputProps>;

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

@@ -0,0 +1,69 @@
+/** SearchInput：搜索输入框，带清除按钮（showcase /components/searchinput） */
+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 SearchInputProps {
+  value?: string
+  placeholder?: string
+  disabled?: boolean
+  onInput?: (e: Event)=> void
+  onClear?: ()=> void
+}
+
+/**
+ * SearchInput —— 搜索输入框（受控/非受控统一 + IME 门控）
+ *
+ * - 受控（value 显式传入）：input.value 由 value 回写，清除按钮随 value 显隐；
+ *   非受控（不传 value）：DOM 值透传 onInput，组件不回写（§5.3 输入态不依赖受控回流）
+ * - IME 组合（中文拼音）：组合期间跳过 onInput（composing + e.isComposing 门控）——
+ *   避免受控 value 重置打断输入法（AutoComplete/Mentions/TagsInput 同款纪律）；
+ *   组合结束 onCompositionEnd 处理最终中文值
+ */
+export const SearchInput: Component<SearchInputProps> = (_init, _ctx)=> {
+  // IME 组合门控（mount 作用域 let——跨渲染保持）
+  let composing = false
+  return (props)=> {
+    const { value, placeholder = '搜索...', onInput, onClear, disabled } = props
+    // 受控判定：value !== undefined → 受控（回写 input.value + 清除按钮随 value）
+    const controlled = value !== undefined
+    const inputValue = value ?? ''
+
+    const clearBtn = controlled && inputValue && onClear
+      ? h('button', {
+          class: 'wf-search-clear',
+          type: 'button',
+          'aria-label': '清除',
+          onClick: onClear,
+        }, h(Icon, { name: 'close' }))
+      : null
+
+    const icon = h('span', { class: 'wf-search-icon' }, h(Icon, { name: 'search' }))
+
+    return h('div', { class: clearBtn ? 'wf-search wf-search--has-clear' : 'wf-search' }, [
+      icon,
+      h('input', {
+        class: ['wf-search-input', disabled ? 'wf-search-input--dis' : ''].filter(Boolean).join(' '),
+        type: 'search',
+        // 受控才回写 value；非受控不写（undefined → setProp 跳过——DOM 值为唯一来源）
+        value: controlled ? inputValue : undefined,
+        placeholder,
+        disabled: disabled || undefined,
+        'aria-disabled': disabled ? 'true' : undefined,
+        onInput: (e: any)=> {
+          // IME 组合期间跳过（e.isComposing 兜底——真实事件带标志）
+          if (composing || e.isComposing) return
+          onInput?.(e)
+        },
+        onCompositionStart: ()=> { composing = true },
+        onCompositionEnd: (e: any)=> {
+          composing = false
+          // 组合完成：处理最终中文值（过滤/回填）
+          onInput?.(e)
+        },
+      }),
+      clearBtn,
+    ].filter(Boolean))
+  }
+}

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

@@ -0,0 +1,76 @@
+/* weifuwu/client/components — SegmentedControl */
+
+.wf-segmented {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  border-radius: var(--wf-radius);
+  background: var(--wf-color-bg-tertiary);
+  font-family: var(--wf-font-sans);
+}
+
+.wf-segmented--block {
+  display: flex;
+  width: 100%;
+}
+
+.wf-segmented--block .wf-segmented-option {
+  flex: 1;
+  justify-content: center;
+}
+
+.wf-segmented-option {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--wf-gap-xs);
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: var(--wf-space-xs) var(--wf-space-md);
+  border-radius: calc(var(--wf-radius) - 1px);
+  font-family: inherit;
+  font-size: var(--wf-font-size-sm);
+  font-weight: var(--wf-font-weight-medium);
+  line-height: var(--wf-line-height);
+  color: var(--wf-color-text-secondary);
+  white-space: nowrap;
+  transition: background var(--wf-transition), color var(--wf-transition), box-shadow var(--wf-transition);
+}
+
+.wf-segmented-option:hover {
+  color: var(--wf-color-text);
+}
+
+.wf-segmented-option--active {
+  background: var(--wf-surface-bg);
+  color: var(--wf-color-primary-text);
+  box-shadow: var(--wf-shadow-sm);
+  transition: box-shadow var(--wf-dur-fast) var(--wf-ease-snap), color var(--wf-dur-fast) var(--wf-ease-out);
+}
+
+.wf-segmented-option--active:hover {
+  color: var(--wf-color-primary-text);
+}
+
+.wf-segmented-option:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
+}
+
+.wf-segmented-option:disabled {
+  opacity: var(--wf-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.wf-segmented--sm .wf-segmented-option {
+  padding: 2px var(--wf-space-sm);
+  font-size: var(--wf-font-size-xs);
+}
+
+/* 触屏：44px 命中区 */
+@media (pointer: coarse) {
+  .wf-segmented-option {
+    min-height: 44px;
+  }
+}

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

@@ -0,0 +1,23 @@
+/** SegmentedControl：分段单选（模式切换/筛选/模板），支持 sm/block（showcase /components/segmentedcontrol） */
+import type { Component } from '../../../../level6/client/vdom/index.ts';
+export interface SegmentedOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SegmentedControlProps {
+    /** 选项列表（label 可为字符串或任意 VNode） */
+    options: SegmentedOption[];
+    /** 当前选中值 */
+    value?: string;
+    onChange?: (value: string) => void;
+    size?: 'sm' | 'md';
+    /** 撑满父容器宽度（选项等分） */
+    block?: boolean;
+    ariaLabel?: string;
+}
+/**
+ * 分段控件 — 单选切换（模式切换 / 状态筛选 / 模板选择）
+ * 语义：toggle group（aria-pressed），键盘 focus-visible 可见
+ */
+export declare const SegmentedControl: Component<SegmentedControlProps>;

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

@@ -0,0 +1,57 @@
+/** SegmentedControl：分段单选（模式切换/筛选/模板），支持 sm/block（showcase /components/segmentedcontrol） */
+import type { Component } from '../../../../level6/client/vdom/index.ts'
+import type { UIContext } from '../../../../level6/client/vdom/index.ts'
+import { h, createItem } from '../../../../level6/client/vdom/index.ts'
+
+export interface SegmentedOption {
+  value: string
+  label: string
+  disabled?: boolean
+}
+
+export interface SegmentedControlProps {
+  /** 选项列表（label 可为字符串或任意 VNode） */
+  options: SegmentedOption[]
+  /** 当前选中值 */
+  value?: string
+  onChange?: (value: string)=> void
+  size?: 'sm' | 'md'
+  /** 撑满父容器宽度（选项等分） */
+  block?: boolean
+  ariaLabel?: string
+}
+
+/**
+ * 分段控件 — 单选切换（模式切换 / 状态筛选 / 模板选择）
+ * 语义：toggle group（aria-pressed），键盘 focus-visible 可见
+ */
+export const SegmentedControl: Component<SegmentedControlProps> = (_init, ctx)=> {
+  // 交互子项状态捆绑（createItem——类后缀 + aria-pressed 单源）
+  const optionItem = createItem({ cls: 'wf-segmented-option', aria: 'aria-pressed' })
+  return (props)=> {
+  const { options, size = 'md', block, ariaLabel } = props
+
+  // useControlled：受控/非受控统一（原非受控静默不可点——受控纪律违规）
+  const ctrl = ctx?.ui?.useControlled<string>({ value: props.value, onChange: props.onChange, name: 'SegmentedControl' })
+  const select = (v: string)=> {
+    const wasControlled = ctrl?.controlled?.value !== undefined
+    ctrl?.setValue(v)
+    if (!wasControlled) props.onChange?.(v)
+  }
+
+  const cls = [
+    'wf-segmented',
+    size === 'sm' && 'wf-segmented--sm',
+    block && 'wf-segmented--block',
+  ].filter(Boolean).join(' ')
+
+  return h('div', { class: cls, role: 'group', 'aria-label': ariaLabel },
+    options.map(opt => h('button', optionItem(opt.value === ctrl?.value, {
+      type: 'button',
+      key: opt.value, // 选项身份（选项增删/重排——keyed diff move）
+      disabled: opt.disabled || undefined,
+      onClick: opt.disabled ? undefined : ()=> select(opt.value),
+    }), opt.label))
+  )
+  }
+}