weifuwu 0.94.0 → 0.95.0

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

@@ -0,0 +1,233 @@
+/* weifuwu/client/components — Slider */
+
+.wf-slider-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wf-gap-xs);
+}
+
+.wf-slider {
+  display: flex;
+  align-items: center;
+  gap: var(--wf-gap-md);
+  /* thumb 尺寸（可覆盖定制；marks/tooltip 偏移常量按默认 18px 同步——覆盖需知悉） */
+  --wf-slider-thumb-size: 18px;
+}
+
+/* 轨道容器（input + marks 同宽对齐——value 显示不参与） */
+.wf-slider-track {
+  flex: 1;
+  min-width: 0;
+  /* **垂直基准变量（真实 bug——thumb/fill/mark 三线不齐）**：thumb 基于
+     input 盒（margin 8 + 高 6）——fill/mark 曾基于 track 中线（inset:0/
+     margin:auto）——但 track 是 flex item 被 value 文本拉伸（align-items
+     stretch——行高 23px）→ 基准错位（常态 0.5px——字体加载后行高变
+     22/24 → 差 1.5px——全量并发偶发失败）——统一三者基准 = input 盒 */
+  --wf-slider-track-margin: 8px;
+  --wf-slider-track-h: 6px;
+  /* **absolute 定位基准（真实 bug——fill/marks 错位）**：fill/marks 都是
+     absolute——track 无 position → 基准落到外层容器（wf-slider/页面）——
+     fill 中心偏离轨道中线（价格区间 fill 在 thumb 下方 15px）——thumb/
+     fill/mark 三线不齐——加 relative 使 fill/marks 相对轨道定位 */
+  position: relative;
+}
+
+.wf-slider-input {
+  width: 100%;
+  height: 6px;
+  /* **baseline 对齐消除（真实 bug——thumb/fill/mark 1px 偏差）**：input 是
+     inline-block（默认）——行框内 baseline 对齐使 input 视觉下移（字体
+     descent ~1px）——margin 8px 不是真实视觉顶——thumb 中心比 marks/fill
+     低 1px（全量并发偶发失败根因）——vertical-align: top 使 input 顶对齐
+     行框顶（margin 精确生效——三线同基准） */
+  vertical-align: top;
+  appearance: none;
+  /* 清零 UA 默认 padding/border（Chrome range 默认 padding 9px + border 1px）——
+     否则 content 区被压缩，thumb 活动范围 ≠ 盒宽，marks/渐变偏移公式错位 */
+  padding: 0;
+  border: none;
+  background: var(--wf-color-border);
+  border-radius: var(--wf-radius-xs);
+  outline: none;
+  cursor: pointer;
+  margin: var(--wf-slider-track-margin) 0; /* thumb 18px 超出轨道——留出 hover/拖拽空间 */
+}
+
+/* hover / 拖拽中（active）：thumb 放大 + 加深（跨浏览器一致） */
+.wf-slider-input:hover::-webkit-slider-thumb,
+.wf-slider-input:active::-webkit-slider-thumb {
+  transform: scale(1.15);
+  background: var(--wf-color-primary-hover);
+}
+.wf-slider-input:hover::-moz-range-thumb,
+.wf-slider-input:active::-moz-range-thumb {
+  transform: scale(1.15);
+  background: var(--wf-color-primary-hover);
+}
+
+.wf-slider-input:focus-visible::-webkit-slider-thumb {
+  box-shadow: 0 0 0 3px var(--wf-color-primary-bg);
+}
+.wf-slider-input:focus-visible::-moz-range-thumb {
+  box-shadow: 0 0 0 3px var(--wf-color-primary-bg);
+}
+
+.wf-slider-input::-webkit-slider-thumb {
+  appearance: none;
+  width: var(--wf-slider-thumb-size);
+  height: var(--wf-slider-thumb-size);
+  border-radius: 50%;
+  background: var(--wf-color-primary);
+  cursor: pointer;
+  border: 2px solid var(--wf-color-on-brand);
+  box-shadow: var(--wf-slider-thumb-shadow, var(--wf-shadow-sm));
+  transition: transform var(--wf-dur-fast) var(--wf-ease-out),
+              background-color var(--wf-dur-fast) var(--wf-ease-out),
+              box-shadow var(--wf-dur-fast) var(--wf-ease-out);
+}
+
+/* Firefox 同款 thumb（跨浏览器一致） */
+.wf-slider-input::-moz-range-thumb {
+  width: calc(var(--wf-slider-thumb-size) - 4px); /* 去除 border 后的同视觉尺寸 */
+  height: calc(var(--wf-slider-thumb-size) - 4px);
+  border-radius: 50%;
+  background: var(--wf-color-primary);
+  cursor: pointer;
+  border: 2px solid var(--wf-color-on-brand);
+  box-shadow: var(--wf-slider-thumb-shadow, var(--wf-shadow-sm));
+  transition: transform var(--wf-dur-fast) var(--wf-ease-out),
+              background-color var(--wf-dur-fast) var(--wf-ease-out),
+              box-shadow var(--wf-dur-fast) var(--wf-ease-out);
+}
+
+.wf-slider-input::-moz-range-track {
+  height: 6px;
+  padding: 0; /* Firefox track 默认 padding——清零保 content = 盒宽 */
+  border: none;
+  border-radius: var(--wf-radius-xs);
+  background: transparent; /* 进度填充由组件 inline 渐变提供 */
+}
+
+.wf-slider-input:focus-visible {
+  box-shadow: var(--wf-focus-ring);
+}
+
+.wf-slider-value {
+  font-size: var(--wf-font-size-sm);
+  font-weight: var(--wf-font-weight-semibold);
+  color: var(--wf-color-text);
+  min-width: 30px;
+  text-align: center;
+}
+
+/* ── 当前值气泡（拖拽/hover/focus 显示——portal 渲染） ── */
+.wf-slider-tip {
+  z-index: var(--wf-z-tooltip);
+  background: var(--wf-color-text);
+  color: var(--wf-color-bg);
+  padding: 2px var(--wf-space-sm);
+  border-radius: var(--wf-radius-sm);
+  font-size: var(--wf-font-size-xs);
+  font-weight: var(--wf-font-weight-semibold);
+  transform: translate(-50%, -100%);
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+/* ── 刻度标记（marks） ── */
+.wf-slider-marks {
+  position: absolute;
+  left: 0;
+  right: 0;
+  /* 基准 = input 盒（与 thumb 一致——不受 track 拉伸影响） */
+  top: var(--wf-slider-track-margin);
+  bottom: auto;
+  height: var(--wf-slider-track-h);
+  pointer-events: none;
+}
+
+/* 区间模式：input absolute 撑满容器（36px）——marks 基准 = 容器中线
+   （与 thumb/fill 一致——普通模式的 input 盒基准不适用） */
+.wf-slider-range .wf-slider-marks {
+  top: 0;
+  bottom: 0;
+  height: auto;
+}
+
+.wf-slider-mark {
+  position: absolute;
+  /* dot 中心 = 轨道中线（dot 半高 4px——thumb/填充/刻度同一条直线——
+     用户要求；label 在 dot 下方（溢出可见——刻度标签） */
+  top: calc(50% - 4px);
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+
+.wf-slider-mark-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--wf-color-border-dark);
+  border: 2px solid var(--wf-color-bg);
+  box-sizing: border-box;
+}
+
+.wf-slider-mark-label {
+  font-size: var(--wf-font-size-xs);
+  color: var(--wf-color-text-tertiary);
+  white-space: nowrap;
+}
+
+/* disabled（F2 状态矩阵） */
+.wf-slider-input--dis { opacity: 0.5; cursor: not-allowed; }
+.wf-slider-input:disabled { cursor: not-allowed; }
+.wf-slider-input:disabled::-webkit-slider-thumb,
+.wf-slider-input:disabled::-moz-range-thumb { cursor: not-allowed; }
+
+/* ── range 模式：双滑块（lo/hi input 叠加——轨道透明，填充分离绘制） ── */
+.wf-slider-range {
+  position: relative;
+  /* thumb 18px 超出轨道——容器高度容纳（原 margin:8px 0 语义移至容器） */
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+}
+
+.wf-slider-range .wf-slider-input {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  background: transparent;
+  /* **撑满轨道（真实 bug——thumb 与 fill 错位 15px）**：全局 .wf-slider-input
+     height: 6px 与 inset: 0 冲突（absolute 时 top+height 决定尺寸——bottom 被
+     忽略）→ input 6px 高在轨道顶部——thumb 中心 = 轨道顶 + 3——而 fill 中心 =
+     轨道中线——thumb/fill 不同线——height auto 使 inset 0 生效（撑满轨道——
+     thumb 中心 = 轨道中线 = fill 中心） */
+  height: auto;
+  pointer-events: none; /* 轨道不响应——点击/拖拽只走 thumb（双 thumb 互不抢事件） */
+  /* 层级 = DOM 顺序（hi 后渲染天然在上——重叠时点最上层 = 上限）——audit 禁 z-index 数字 */
+}
+
+/* thumb 可交互（pointer-events 只在 thumb 上——轨道命中不抢） */
+.wf-slider-range .wf-slider-input::-webkit-slider-thumb { pointer-events: auto; }
+.wf-slider-range .wf-slider-input::-moz-range-thumb { pointer-events: auto; }
+
+/* range 模式轨道填充（双 thumb 之间） */
+.wf-slider-range-fill {
+  position: absolute;
+  /* 基准 = 容器中线（区间模式 input 撑满容器——thumb 中心 = 容器中线——
+     与 marks 同基准——不受容器高度变化影响） */
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  height: var(--wf-slider-track-h);
+  background: var(--wf-color-primary);
+  border-radius: var(--wf-radius-xs);
+  pointer-events: none;
+}
+/* ── 语义标记类（DOM 钩子——无样式：测试定位/用户扩展——:where 零优先级显式声明） ── */
+:where(.wf-slider-input--hi) {}
+:where(.wf-slider-input--lo) {}

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

@@ -0,0 +1,28 @@
+/** Slider：范围滑块，支持 min/max/step/label（showcase /components/slider） */
+import type { Component } from '../../../../level6/client/vdom/index.ts';
+export interface SliderMark {
+    value: number;
+    label?: string;
+}
+export interface SliderProps {
+    label?: string;
+    /** 单值模式 value；range 模式 [lo, hi]（传反自动纠正） */
+    value?: number | string | [number, number];
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    /** range 模式：双滑块区间（价格/日期/年龄筛选——三库标配） */
+    range?: boolean;
+    /** 刻度标记（轨道下方刻度线 + 可选文字标签） */
+    marks?: SliderMark[];
+    /** 单值拖拽结束回调（pointerup） */
+    onChangeEnd?: (value: number) => void;
+    /** 单值实时回调 */
+    onChange?: (value: number) => void;
+    /** range 实时回调（range 模式专用——类型独立防单值误用） */
+    onRangeChange?: (value: [number, number]) => void;
+    /** range 拖拽结束回调 */
+    onRangeChangeEnd?: (value: [number, number]) => void;
+}
+export declare const Slider: Component<SliderProps>;

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

@@ -0,0 +1,291 @@
+/** Slider：范围滑块，支持 min/max/step/label（showcase /components/slider） */
+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 { createClientBrowser } from '../../../../level6/client/vdom/index.ts'
+
+export interface SliderMark {
+  value: number
+  label?: string
+}
+
+export interface SliderProps {
+  label?: string
+  /** 单值模式 value；range 模式 [lo, hi]（传反自动纠正） */
+  value?: number | string | [number, number]
+  min?: number
+  max?: number
+  step?: number
+  disabled?: boolean
+  /** range 模式：双滑块区间（价格/日期/年龄筛选——三库标配） */
+  range?: boolean
+  /** 刻度标记（轨道下方刻度线 + 可选文字标签） */
+  marks?: SliderMark[]
+  /** 单值拖拽结束回调（pointerup） */
+  onChangeEnd?: (value: number)=> void
+  /** 单值实时回调 */
+  onChange?: (value: number)=> void
+  /** range 实时回调（range 模式专用——类型独立防单值误用） */
+  onRangeChange?: (value: [number, number])=> void
+  /** range 拖拽结束回调 */
+  onRangeChangeEnd?: (value: [number, number])=> void
+}
+
+export const Slider: Component<SliderProps> = (_init, ctx)=> {
+  // ── mount（只一次）：DOM 引用 + 显示状态（§5.1 ref 纪律：稳定引用定义在此）──
+  let inputEl: HTMLInputElement | null = null
+  let loInputEl: HTMLInputElement | null = null
+  let hiInputEl: HTMLInputElement | null = null
+  let latestValue: number | null = null
+  let tipOpen = false
+  let dragging = false
+  let tipPos: { left: number; top: number } | null = null
+  /** range 模式活动 thumb（hover/focus/拖拽中的那个——tooltip 跟随） */
+  let activeThumb: 'lo' | 'hi' | null = null
+  const inputRef = (el: HTMLInputElement | null)=> { inputEl = el }
+  const loInputRef = (el: HTMLInputElement | null)=> { loInputEl = el }
+  const hiInputRef = (el: HTMLInputElement | null)=> { hiInputEl = el }
+  // 浏览器表单状态恢复（刷新/后退导航）会覆盖受控 value——恢复发生在 load/pageshow
+  // 之前且无视 value attribute（实测：attribute=800 仍被改回 100）——恢复完成后同步
+  // 一次，把控件拉回组件状态（真实事故：components-demo 2000 slider 刷新后
+  // input.value=100 而数值显示 800——marker 与数值位置不一致）
+  const syncAfterRestore = ()=> {
+    if (inputEl && latestValue !== null && Number(inputEl.value) !== latestValue) {
+      inputEl.value = String(latestValue)
+    }
+  }
+  // §5.5 浏览器纪律：经 ctx.browser（环境 API——SSR no-op；组件禁直接 addEventListener）
+  const _browser = ctx.browser ?? createClientBrowser()
+  _browser.onFormRestore?.(syncAfterRestore)
+  const setTip = (v: boolean)=> {
+    if (tipOpen === v) return
+    tipOpen = v
+    ctx.render()
+  }
+  // §5.4 弹窗纪律：浮层一律命令式弹窗（唯一形态——openPopup——定位/视口夹紧/
+  // Escape/外部点击——range 模式：anchor = 活动 thumb 的 input）
+  /** 命令式句柄（唯一形态——openPopup——组件内部同步样板） */
+  let handle: import('../../../../level3/vdom/hooks/popup-manager.ts').PopupHandle | null = null
+  const syncTip = (tip: import('../../../../level6/client/vdom/index.ts').VNode | null): void => {
+    if (tipOpen && !handle)
+      handle = ctx.ui.openPopup({
+        key: 'slider-tooltip',
+        anchor: ()=> (activeThumb === 'lo' ? loInputEl : activeThumb === 'hi' ? hiInputEl : inputEl) as HTMLElement | null,
+        position: ()=> tipPos ? { x: tipPos.left, y: tipPos.top } : { x: 0, y: 0 },
+        content: ()=> tip,
+        onClose: ()=> { handle = null; if (tipOpen) setTip(false) },
+      })
+    else if (!tipOpen && handle) { handle.close(); handle = null }
+    else if (handle) handle.update(tip)
+  }
+  const browser = ctx.browser ?? createClientBrowser()
+
+  return (props: SliderProps)=> {
+    const { label, value = 0, min = 0, max = 100, step = 1, onChange, onChangeEnd, disabled, marks, range, onRangeChange, onRangeChangeEnd } = props
+
+    const numVal = Number(Array.isArray(value) ? value[0] : value)
+    const rangeVal: [number, number] = Array.isArray(value)
+      ? [Math.min(Number(value[0]), Number(value[1])), Math.max(Number(value[0]), Number(value[1]))]
+      : [numVal, numVal]
+    const span = max - min
+    // 内部归一化到 0-100 刻度：浏览器对 0-100 的 range 不参与会话恢复/重算——
+    // max=2000 的 slider 刷新后 thumb 被恢复为旧默认值并跳动（真实事故：
+    // components-demo 2000 slider 刷新后 marker 从 100 跳到 800）——归一化后与
+    // 音量/亮度（原生 0-100）同构，刷新直接停在正确位置。实际值按比例换算，
+    // step 语义经换算层取整保持（内部刻度 = 实际 step 的比例）。
+    const norm = (v: number)=> span > 0 ? Math.min(100, Math.max(0, ((v - min) / span) * 100)) : 0
+    const pct = norm(numVal)
+    const loPct = norm(rangeVal[0])
+    const hiPct = norm(rangeVal[1])
+    const internalStep = span > 0 && step > 0 ? step / span * 100 : 1
+    const toActual = (v: number): number => {
+      const raw = min + (Number(v) / 100) * span
+      const stepped = step > 0 ? Math.round((raw - min) / step) * step + min : raw
+      return Math.min(max, Math.max(min, stepped))
+    }
+    latestValue = pct // 内部刻度（syncAfterRestore 同步用）
+    // thumb 中心活动范围 = [轨道左 + 半宽, 轨道右 - 半宽]（原生 range 行为）——
+    // marks/tooltip/渐变边界必须用同一偏移补偿（否则两端错位 9px、中间对齐）。
+    // 与 CSS .wf-slider 的 --wf-slider-thumb-size 默认 18px 对应（覆盖该变量时此处需同步）。
+    const THUMB_R = 9
+    const thumbOffset = (t: number)=> `calc(${THUMB_R}px + (100% - ${THUMB_R * 2}px) * ${t})`
+    const thumbX = (w: number, t: number)=> THUMB_R + t * (w - THUMB_R * 2)
+    // 轨道进度填充：渐变边界 = thumb 中心（同一偏移补偿公式）——
+    // 否则渐变用全宽百分比与 thumb 半宽偏移错位（0% thumb 超填充 9px / 100% 反向）
+    const fillStop = `calc(${THUMB_R}px + (100% - ${THUMB_R * 2}px) * ${pct / 100})`
+    const trackBg = `linear-gradient(to right, var(--wf-color-primary) ${fillStop}, var(--wf-color-border) ${fillStop})`
+
+    // ── tooltip 坐标：活动 input rect + 进度百分比 → thumb 中心（openPopup 内核 视口夹紧） ──
+    tipPos = null
+    if (tipOpen && !disabled) {
+      const activeEl = range ? (activeThumb === 'lo' ? loInputEl : activeThumb === 'hi' ? hiInputEl : hiInputEl) : inputEl
+      const activePct = range ? (activeThumb === 'lo' ? loPct : hiPct) : pct
+      if (activeEl) {
+        const r = activeEl.getBoundingClientRect()
+        if (r.width > 0) {
+          tipPos = { left: Math.round(r.left + thumbX(r.width, activePct / 100)), top: Math.round(r.top - 36) }
+          // **禁止 renderFn 里 handle?.refresh()（真实 bug——hover 卡死）**：
+          // refresh 的 position 分支末尾 env.requestRender() → 重渲染 →
+          // renderFn → refresh → **无限循环**（页面主线程忙死——hover slider
+          // 立即卡死——playwright 复现）——拖拽跟随改由值变化事件（onInput/
+          // onChange 回调——非渲染期——一次 refresh 后稳定）
+        }
+      }
+    }
+
+    // ── range 模式：双滑块（lo/hi 叠加——轨道透明，填充分离绘制） ──
+    if (range) {
+      const clampLo = (v: number)=> Math.min(v, rangeVal[1] - step)
+      const clampHi = (v: number)=> Math.max(v, rangeVal[0] + step)
+      const tipValue = activeThumb === 'lo' ? rangeVal[0] : rangeVal[1]
+      const mkInput = (which: 'lo' | 'hi', ival: number, p: number, clamp: (v: number)=> number) => h('input', {
+        type: 'range',
+        class: `wf-slider-input ${which === 'hi' ? 'wf-slider-input--hi' : 'wf-slider-input--lo'}`,
+        ref: which === 'lo' ? loInputRef : hiInputRef,
+        // 内部 0-100 刻度（min/max/step 同比例映射——浏览器不介入会话恢复）
+        value: p,
+        min: 0,
+        max: 100,
+        step: internalStep,
+        disabled: disabled || undefined,
+        autocomplete: 'off',
+        'aria-label': which === 'lo' ? `${label ?? '范围'}下限` : `${label ?? '范围'}上限`,
+        'aria-disabled': disabled ? 'true' : undefined,
+        onInput: disabled ? undefined : (e: Event)=> {
+          const v = clamp(toActual(Number((e.target as HTMLInputElement).value)))
+          onRangeChange?.([which === 'lo' ? v : rangeVal[0], which === 'hi' ? v : rangeVal[1]])
+          handle?.refresh()
+        },
+        onChange: disabled ? undefined : (e: Event)=> {
+          const v = clamp(toActual(Number((e.target as HTMLInputElement).value)))
+          onRangeChange?.([which === 'lo' ? v : rangeVal[0], which === 'hi' ? v : rangeVal[1]])
+          handle?.refresh()
+        },
+        onPointerDown: disabled ? undefined : ()=> { dragging = true; activeThumb = which; setTip(true) },
+        onPointerUp: disabled ? undefined : (e: Event)=> {
+          dragging = false
+          const v = clamp(toActual(Number((e.target as HTMLInputElement).value)))
+          onRangeChangeEnd?.([which === 'lo' ? v : rangeVal[0], which === 'hi' ? v : rangeVal[1]])
+          setTip(false)
+        },
+        onPointerCancel: disabled ? undefined : ()=> { dragging = false; setTip(false) },
+        onMouseEnter: disabled ? undefined : ()=> { activeThumb = which; setTip(true) },
+        onMouseLeave: disabled ? undefined : ()=> { if (!dragging) setTip(false) },
+        onFocus: disabled ? undefined : ()=> { activeThumb = which; setTip(true) },
+        onBlur: disabled ? undefined : ()=> { if (!dragging) setTip(false) },
+      })
+      const fillWidth = `calc((100% - ${THUMB_R * 2}px) * ${(hiPct - loPct) / 100})`
+      const display = h('span', { class: 'wf-slider-value' }, `${rangeVal[0]} - ${rangeVal[1]}`)
+      const tip = disabled ? null : h('div', { class: 'wf-slider-tip' }, String(tipValue))
+      const marksRow = marks?.length
+        ? h('div', { class: 'wf-slider-marks' },
+            marks.map((m)=> {
+              const mp = norm(m.value)
+              return h('div', {
+                key: `mark-${m.value}`,
+                class: 'wf-slider-mark',
+                style: { left: thumbOffset(mp / 100) },
+              }, [
+                h('span', { class: 'wf-slider-mark-dot' }),
+                m.label ? h('span', { class: 'wf-slider-mark-label' }, m.label) : null,
+              ])
+            }),
+          )
+        : null
+      const trackWrap = h('div', { class: 'wf-slider-track wf-slider-range' }, [
+        h('div', { class: 'wf-slider-range-fill', style: { left: thumbOffset(loPct / 100), width: fillWidth } }),
+        mkInput('lo', rangeVal[0], loPct, clampLo),
+        mkInput('hi', rangeVal[1], hiPct, clampHi),
+        marksRow,
+      ])
+      const row = h('div', { class: 'wf-slider' }, [trackWrap, display])
+      syncTip(tip)
+      if (!label) return h('div', { class: 'wf-slider-wrap' }, [row])
+      return h('div', { class: 'wf-slider-wrap' }, [
+        h('label', { class: 'wf-slider-label' }, label),
+        row,
+      ])
+    }
+
+    const input = h('input', {
+      type: 'range',
+      class: ['wf-slider-input', disabled ? 'wf-slider-input--dis' : ''].filter(Boolean).join(' '),
+      ref: inputRef,
+      'aria-expanded': String(tipOpen),
+      // 内部 0-100 刻度（min/max/step 同比例映射——浏览器不介入会话恢复）
+      value: pct,
+      min: 0,
+      max: 100,
+      step: internalStep,
+      disabled: disabled || undefined,
+      // 禁用浏览器表单状态恢复（刷新/后退时恢复旧值——受控组件错位 + 刷新跳动）
+      autocomplete: 'off',
+      'aria-label': label,
+      'aria-disabled': disabled ? 'true' : undefined,
+      style: { background: trackBg },
+      // 拖拽实时回调：原生 range 拖拽期间只发 input——change 松手才发——
+      // 只绑 onChange 时拖拽中气泡/数值显示陈旧（marker 与数值不一致——真实事故：
+      // components-demo 2000 slider 拖到 1500 气泡仍显示 1000）。
+      // onChange 绑 input（实时）+ onChangeEnd 收尾（pointerup——commit 语义）
+      onInput: disabled || !onChange ? undefined : (e: Event)=> { onChange(toActual(Number((e.target as HTMLInputElement).value))); handle?.refresh() },
+      onChange: disabled || !onChange ? undefined : (e: Event)=> { onChange(toActual(Number((e.target as HTMLInputElement).value))); handle?.refresh() },
+      // 专业交互：hover/focus/拖拽显示当前值气泡；拖拽结束回调
+      onPointerDown: disabled ? undefined : ()=> { dragging = true; setTip(true) },
+      onPointerUp: disabled ? undefined : (e: Event)=> {
+        // 独立于 onChangeEnd——未传回调时也必须复位拖拽态并关闭气泡（拖拽残留 bug）
+        dragging = false
+        onChangeEnd?.(toActual(Number((e.target as HTMLInputElement).value)))
+        setTip(false)
+      },
+      onPointerCancel: disabled ? undefined : ()=> {
+        // 拖拽被打断（触摸滚动/系统手势）——同样复位，防 dragging 残留锁死气泡
+        dragging = false
+        setTip(false)
+      },
+      onMouseEnter: disabled ? undefined : ()=> setTip(true),
+      onMouseLeave: disabled ? undefined : ()=> { if (!dragging) setTip(false) },
+      onFocus: disabled ? undefined : ()=> setTip(true),
+      onBlur: disabled ? undefined : ()=> { if (!dragging) setTip(false) },
+    })
+
+    const display = h('span', { class: 'wf-slider-value' }, String(numVal))
+
+    // disabled 无 tip（语义——气泡仅在可交互时显示）
+    const tip = disabled ? null : h('div', { class: 'wf-slider-tip' }, String(numVal))
+
+    // ── marks 刻度：与 input 同宽容器（flex:1）内绝对定位 ──
+    const marksRow = marks?.length
+      ? h('div', { class: 'wf-slider-marks' },
+          marks.map((m)=> {
+            const mp = span > 0 ? Math.min(100, Math.max(0, ((m.value - min) / span) * 100)) : 0
+            return h('div', {
+              key: `mark-${m.value}`,
+              class: 'wf-slider-mark',
+              style: { left: thumbOffset(mp / 100) },
+            }, [
+              h('span', { class: 'wf-slider-mark-dot' }),
+              m.label ? h('span', { class: 'wf-slider-mark-label' }, m.label) : null,
+            ])
+          }),
+        )
+      : null
+
+    const trackWrap = h('div', { class: 'wf-slider-track' }, [
+      input,
+      marksRow,
+    ])
+
+    const row = h('div', { class: 'wf-slider' }, [
+      trackWrap,
+      display,
+    ])
+
+    syncTip(tip)
+    if (!label) return h('div', { class: 'wf-slider-wrap' }, [row])
+
+    return h('div', { class: 'wf-slider-wrap' }, [
+      h('label', { class: 'wf-slider-label' }, label),
+      row,
+    ])
+  }
+}

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

@@ -0,0 +1,27 @@
+.wf-sortable {
+  list-style: none;
+}
+
+.wf-sortable-item {
+  cursor: grab;
+  user-select: none;
+  transition: transform var(--wf-dur-fast) var(--wf-ease-out), box-shadow var(--wf-dur-fast) var(--wf-ease-out);
+  border-radius: var(--wf-radius-sm);
+}
+
+.wf-sortable-item:active {
+  cursor: grabbing;
+}
+
+.wf-sortable-item.wf-sortable-dragging {
+  opacity: 0.6;
+}
+
+.wf-sortable-item.wf-sortable-over {
+  transform: translateY(2px);
+  box-shadow: 0 0 0 2px var(--wf-color-primary-bg), 0 0 0 1px var(--wf-color-primary);
+}
+
+.wf-sortable-item:hover {
+  background: var(--wf-color-bg-hover);
+}

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

@@ -0,0 +1,24 @@
+/** SortableList：拖拽排序列表——useDragDrop 原语 + keyed 身份（任务/字段/配置排序）（showcase /components/sortablelist） */
+/**
+ * SortableList — 拖拽排序列表（useDragDrop 原语 + keyed 复用）
+ *
+ * 用法：
+ *   <SortableList items={items} keyField="id" renderItem={it => <span>{it.name}</span>}
+ *     onReorder={newItems => setItems(newItems)} />
+ *
+ * 纪律：受控 items + 缺 onReorder → warn（防静默失效）；keyField 必须业务唯一
+ */
+import type { Component } from '../../../../level6/client/vdom/index.ts';
+export interface SortableListProps<T extends Record<string, any>> {
+    items: T[];
+    /** 业务唯一 key 字段（身份跟随内容——keyed diff 正确性） */
+    keyField: string;
+    /** 拖拽完成回调（新顺序）——受控，缺回调 = 静默失效 */
+    onReorder?: (items: T[]) => void;
+    /** 渲染单项（拖拽柄由 dragProps 提供——见 demo） */
+    renderItem: (item: T, index: number, dragProps: Record<string, any>) => any;
+    /** 拖拽中样式类（可选——悬停指示） */
+    draggingClass?: string;
+    className?: string;
+}
+export declare const SortableList: Component<SortableListProps<any>>;