weifuwu 0.94.0 → 0.95.0

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

@@ -0,0 +1,133 @@
+/** PinInput：验证码输入：自动聚焦/粘贴分派/Backspace 回退（shadcn InputOTP）（showcase /components/pininput） */
+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 PinInputProps {
+  /** 位数，默认 6 */
+  length?: number
+  /** 受控完整值（如 '483920'） */
+  value?: string
+  onChange?: (value: string)=> void
+  /** number = 纯数字（默认）；text = 任意字符 */
+  type?: 'number' | 'text'
+  size?: 'sm' | 'md' | 'lg'
+  disabled?: boolean
+  'aria-label'?: string
+}
+
+/**
+ * 验证码输入（对应 shadcn InputOTP / antd 无）：自动聚焦下一格、粘贴分派、
+ * Backspace 回退、方向键移动。受控 value 为完整字符串。
+ */
+export const PinInput: Component<PinInputProps> = (_init, ctx)=> {
+  // ── mount（只一次）──
+  let refs: (HTMLInputElement | null)[] = []
+
+  const focusCell = (i: number)=> {
+    const el = refs[i]
+    if (el) {
+      el.focus()
+      el.select()
+    }
+  }
+
+  // 闭包捕获索引 + Map 缓存稳定（React useCallback 等价物）：
+  // ref 直接闭包捕获 i（不读 dataset——根治 data-idx 依赖 setProp 顺序的隐式契约）；
+  // 函数引用跨渲染缓存复用（不触发 ref-diff 误清理——§5.1 纪律）
+  const cellRefs = new Map<number, (el: HTMLInputElement | null)=> void>()
+  const inputRefFor = (i: number)=> {
+    let fn = cellRefs.get(i)
+    if (!fn) {
+      fn = (el)=> { if (el) refs[i] = el }
+      cellRefs.set(i, fn)
+    }
+    return fn
+  }
+
+  return (props)=> {
+    const {
+      length = 6, value = '', onChange, type = 'number',
+      size = 'md', disabled, 'aria-label': ariaLabel,
+    } = props
+
+    const isNumber = type === 'number'
+
+    const handleInput = (i: number, raw: string)=> {
+      if (disabled || !onChange) return
+      let ch = raw.slice(-1)
+      if (isNumber && !/^\d$/.test(ch)) return // 数字模式拒绝非数字
+      // 构造新完整串：替换第 i 位
+      const chars = value.split('')
+      while (chars.length < length) chars.push('')
+      chars[i] = ch
+      onChange(chars.join('').slice(0, length))
+      if (i + 1 < length) focusCell(i + 1)
+    }
+
+    const handleKeyDown = (i: number, e: any)=> {
+      if (disabled) return
+      const key = e.key
+      if (key === 'Backspace') {
+        e.preventDefault()
+        if (value[i]) {
+          // 当前格有值 → 清除
+          const chars = value.split('')
+          chars[i] = ''
+          onChange?.(chars.join(''))
+        } else if (i > 0) {
+          focusCell(i - 1)
+        }
+      } else if (key === 'ArrowLeft') {
+        e.preventDefault()
+        if (i > 0) focusCell(i - 1)
+      } else if (key === 'ArrowRight') {
+        e.preventDefault()
+        if (i + 1 < length) focusCell(i + 1)
+      } else if (key === 'Home') {
+        e.preventDefault()
+        focusCell(0)
+      } else if (key === 'End') {
+        e.preventDefault()
+        focusCell(length - 1)
+      }
+    }
+
+    const handlePaste = (e: any)=> {
+      if (disabled || !onChange) return
+      const text = e.clipboardData?.getData('text') ?? ''
+      e.preventDefault()
+      if (!text) return
+      let cleaned = text.slice(0, length)
+      if (isNumber) cleaned = cleaned.replace(/\D/g, '').slice(0, length)
+      if (!cleaned) return
+      onChange(cleaned)
+      focusCell(Math.min(cleaned.length, length - 1))
+    }
+
+    const cells: any[] = []
+    for (let i = 0; i < length; i++) {
+      cells.push(h('input', {
+        key: i,
+        type: 'text',
+        class: 'wf-pin-input-cell',
+        value: value[i] ?? '',
+        maxLength: 1,
+        inputMode: isNumber ? 'numeric' : undefined,
+        pattern: isNumber ? '[0-9]' : undefined,
+        'aria-label': `${ariaLabel ?? '验证码'}第 ${i + 1} 位`,
+        disabled: disabled || undefined,
+        ref: inputRefFor(i),
+        onInput: (e: any)=> handleInput(i, e.target.value),
+        onKeyDown: (e: any)=> handleKeyDown(i, e),
+        onPaste: handlePaste,
+      }))
+    }
+
+    return h('div', {
+      class: ['wf-pin-input', `wf-pin-input--${size}`].join(' '),
+      role: 'group',
+      'aria-label': ariaLabel,
+    }, cells)
+  }
+}

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

@@ -0,0 +1,70 @@
+.wf-pipeline {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+}
+
+.wf-pipeline-svg {
+  display: block;
+  overflow: visible;
+}
+
+.wf-pipeline-edge {
+  fill: none;
+  stroke: var(--wf-color-border);
+  stroke-width: 1.5;
+}
+
+.wf-pipeline-nodes {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.wf-pipeline-node {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  padding: var(--wf-space-sm) var(--wf-space-md);
+  min-width: 72px;
+  max-width: 120px;
+  text-align: center;
+  background: var(--wf-color-bg);
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius-md);
+  font-size: var(--wf-font-size-sm); /* 13px 同值 token 化——compact 预设可缩放 */
+  font-weight: 500;
+  pointer-events: auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-shadow: var(--wf-shadow-sm);
+}
+
+.wf-pipeline-node--success {
+  border-color: var(--wf-color-success-text);
+  color: var(--wf-color-success-text);
+  background: var(--wf-color-success-bg);
+}
+.wf-pipeline-node--running {
+  border-color: var(--wf-color-primary);
+  color: var(--wf-color-primary-text);
+  background: var(--wf-color-primary-bg);
+}
+.wf-pipeline-node--error {
+  border-color: var(--wf-color-error-text);
+  color: var(--wf-color-error-text);
+  background: var(--wf-color-error-bg);
+}
+.wf-pipeline-node--pending {
+  border-color: var(--wf-color-border);
+  color: var(--wf-color-text-tertiary);
+  background: var(--wf-color-fill);
+}
+
+.wf-pipeline-warn {
+  position: absolute;
+  bottom: -24px;
+  left: 0;
+  font-size: var(--wf-font-size-xs); /* 12px 同值 token 化——compact 预设可缩放 */
+  color: var(--wf-color-warning-text);
+}

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

@@ -0,0 +1,28 @@
+/** Pipeline：Agent 工作流 DAG：分层布局 + 贝塞尔连线 + 状态语义色 + 环检测（showcase /components/pipeline） */
+import type { Component } from '../../../../level6/client/vdom/index.ts';
+export type NodeStatus = 'default' | 'success' | 'running' | 'error' | 'pending';
+export interface PipelineNode {
+    id: string;
+    label: string;
+    /** 状态着色（默认 default） */
+    status?: NodeStatus;
+}
+export interface PipelineEdge {
+    from: string;
+    to: string;
+}
+export interface PipelineProps {
+    nodes: PipelineNode[];
+    edges: PipelineEdge[];
+    /** 布局方向（默认 vertical：输入在左→输出在右） */
+    orientation?: 'vertical' | 'horizontal';
+    width?: number;
+    height?: number;
+    className?: string;
+}
+/**
+ * Pipeline/DAG — Agent 多步工作流可视化。
+ * 分层布局（Kahn 拓扑最长路径）+ SVG 贝塞尔连线 + 状态语义色。
+ * 纯函数布局（dag-utils）可 SSR/单测；环检测 → 渲染警告不崩溃。
+ */
+export declare const Pipeline: Component<PipelineProps>;

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

@@ -0,0 +1,83 @@
+/** Pipeline：Agent 工作流 DAG：分层布局 + 贝塞尔连线 + 状态语义色 + 环检测（showcase /components/pipeline） */
+import type { Component } from '../../../../level6/client/vdom/index.ts'
+import { h } from '../../../../level6/client/vdom/index.ts'
+import { layoutGraph, detectCycle } from './dag-utils.ts'
+
+export type NodeStatus = 'default' | 'success' | 'running' | 'error' | 'pending'
+
+export interface PipelineNode {
+  id: string
+  label: string
+  /** 状态着色（默认 default） */
+  status?: NodeStatus
+}
+
+export interface PipelineEdge {
+  from: string
+  to: string
+}
+
+export interface PipelineProps {
+  nodes: PipelineNode[]
+  edges: PipelineEdge[]
+  /** 布局方向（默认 vertical：输入在左→输出在右） */
+  orientation?: 'vertical' | 'horizontal'
+  width?: number
+  height?: number
+  className?: string
+}
+
+/**
+ * Pipeline/DAG — Agent 多步工作流可视化。
+ * 分层布局（Kahn 拓扑最长路径）+ SVG 贝塞尔连线 + 状态语义色。
+ * 纯函数布局（dag-utils）可 SSR/单测；环检测 → 渲染警告不崩溃。
+ */
+export const Pipeline: Component<PipelineProps> = (_init, ctx)=>
+  (props)=> {
+    const {
+      nodes,
+      edges,
+      orientation = 'vertical',
+      width = 360,
+      height = 220,
+      className = '',
+    } = props
+
+    const hasCycle = detectCycle(nodes, edges)
+    const { nodes: laid, edges: laidEdges } = layoutGraph(nodes, edges, {
+      orientation,
+      width,
+      height,
+    })
+
+    const nodeEls = laid.map(n => {
+      const node = nodes.find(x => x.id === n.id)
+      const status = node?.status ?? 'default'
+      return h('div', {
+        class: `wf-pipeline-node wf-pipeline-node--${status}`,
+        key: n.id, // 节点身份（节点增删/拓扑变化——keyed diff move 不重建）
+        style: { left: `${Math.round(n.x)}px`, top: `${Math.round(n.y)}px` },
+        'data-id': n.id,
+      }, node?.label ?? n.id)
+    })
+
+    const edgeEls = laidEdges.map((e, i)=>
+      h('path', {
+        class: 'wf-pipeline-edge',
+        d: e.d,
+        key: `e${i}`,
+      }),
+    )
+
+    return h('div', { class: `wf-pipeline${className ? ` ${className}` : ''}` }, [
+      h('svg', {
+        class: 'wf-pipeline-svg',
+        width,
+        height,
+        viewBox: `0 0 ${width} ${height}`,
+        'aria-hidden': true,
+      }, edgeEls),
+      h('div', { class: 'wf-pipeline-nodes' }, nodeEls),
+      hasCycle && h('div', { class: 'wf-pipeline-warn' }, '检测到环依赖——布局可能不准确'),
+    ].filter(Boolean))
+  }

package/dist/level5/client/components/Pipeline/dag-utils.ts

@@ -0,0 +1,151 @@
+/** Pipeline：Agent 工作流 DAG：分层布局 + 贝塞尔连线 + 状态语义色 + 环检测（showcase /components/pipeline） */
+export interface DagNodeInput {
+  id: string
+}
+
+export interface DagEdgeInput {
+  from: string
+  to: string
+}
+
+export interface LayoutNode {
+  id: string
+  x: number
+  y: number
+}
+
+export interface LayoutEdge {
+  from: string
+  to: string
+  d: string
+}
+
+/**
+ * 分层：每个节点层 = 最长入链深度（BFS/DP）。
+ * 无入边节点 → 0；菱形依赖取最长路径。
+ */
+export function computeLayers(nodes: DagNodeInput[], edges: DagEdgeInput[]): Map<string, number> {
+  const adj = new Map<string, string[]>()
+  const indeg = new Map<string, number>()
+  for (const n of nodes) {
+    adj.set(n.id, [])
+    indeg.set(n.id, 0)
+  }
+  for (const e of edges) {
+    adj.get(e.from)?.push(e.to)
+    indeg.set(e.to, (indeg.get(e.to) ?? 0) + 1)
+  }
+  // Kahn 拓扑 + 层推进（同层取最长）
+  const layer = new Map<string, number>()
+  const queue: string[] = []
+  for (const n of nodes) {
+    if ((indeg.get(n.id) ?? 0) === 0) {
+      queue.push(n.id)
+      layer.set(n.id, 0)
+    }
+  }
+  let visited = 0
+  while (queue.length > 0) {
+    const cur = queue.shift()!
+    visited++
+    const curLayer = layer.get(cur) ?? 0
+    for (const next of adj.get(cur) ?? []) {
+      // 下一节点层 ≥ 当前层+1（多前驱取最大）
+      layer.set(next, Math.max(layer.get(next) ?? 0, curLayer + 1))
+      indeg.set(next, (indeg.get(next) ?? 1) - 1)
+      if ((indeg.get(next) ?? 0) === 0) queue.push(next)
+    }
+  }
+  // 有环：未访问节点放最后层
+  for (const n of nodes) {
+    if (!layer.has(n.id)) layer.set(n.id, visited)
+  }
+  return layer
+}
+
+/** 环检测：Kahn 拓扑——有环时访问节点数 < 总节点数 */
+export function detectCycle(nodes: DagNodeInput[], edges: DagEdgeInput[]): boolean {
+  const adj = new Map<string, string[]>()
+  const indeg = new Map<string, number>()
+  for (const n of nodes) {
+    adj.set(n.id, [])
+    indeg.set(n.id, 0)
+  }
+  for (const e of edges) {
+    adj.get(e.from)?.push(e.to)
+    indeg.set(e.to, (indeg.get(e.to) ?? 0) + 1)
+  }
+  const queue: string[] = nodes.filter(n => (indeg.get(n.id) ?? 0) === 0).map(n => n.id)
+  let visited = 0
+  while (queue.length > 0) {
+    const cur = queue.shift()!
+    visited++
+    for (const next of adj.get(cur) ?? []) {
+      indeg.set(next, (indeg.get(next) ?? 1) - 1)
+      if ((indeg.get(next) ?? 0) === 0) queue.push(next)
+    }
+  }
+  return visited < nodes.length
+}
+
+export interface GraphLayoutOptions {
+  orientation: 'vertical' | 'horizontal'
+  width: number
+  height: number
+  nodeW?: number
+  nodeH?: number
+}
+
+/** 布局：分层 → 层列分布 + 层内均匀；边 = 贝塞尔 path */
+export function layoutGraph(
+  nodes: DagNodeInput[],
+  edges: DagEdgeInput[],
+  opts: GraphLayoutOptions,
+): { nodes: LayoutNode[]; edges: LayoutEdge[] } {
+  const { orientation, width, height, nodeW = 88, nodeH = 40 } = opts
+  const layer = computeLayers(nodes, edges)
+
+  // 按层分组
+  const byLayer = new Map<number, string[]>()
+  for (const n of nodes) {
+    const l = layer.get(n.id) ?? 0
+    if (!byLayer.has(l)) byLayer.set(l, [])
+    byLayer.get(l)!.push(n.id)
+  }
+  const layerCount = byLayer.size
+
+  const pos = new Map<string, { x: number; y: number }>()
+  for (const [l, ids] of byLayer) {
+    const count = ids.length
+    ids.forEach((id, i)=> {
+      if (orientation === 'vertical') {
+        // 垂直：上下流动——y 方向 = 层，x 方向 = 层内
+        const y = l === 0 ? nodeH / 2 : l === layerCount - 1 ? height - nodeH / 2 : (l / (layerCount - 1)) * height
+        const x = count === 1 ? width / 2 : (i / (count - 1)) * (width - nodeW) + nodeW / 2
+        pos.set(id, { x, y })
+      } else {
+        // 水平：左右流动——x 方向 = 层，y 方向 = 层内
+        const x = l === 0 ? nodeW / 2 : l === layerCount - 1 ? width - nodeW / 2 : (l / (layerCount - 1)) * width
+        const y = count === 1 ? height / 2 : (i / (count - 1)) * (height - nodeH) + nodeH / 2
+        pos.set(id, { x, y })
+      }
+    })
+  }
+
+  const outNodes: LayoutNode[] = nodes.map(n => {
+    const p = pos.get(n.id) ?? { x: width / 2, y: height / 2 }
+    return { id: n.id, x: p.x, y: p.y }
+  })
+
+  const outEdges: LayoutEdge[] = edges.map(e => {
+    const a = pos.get(e.from) ?? { x: 0, y: 0 }
+    const b = pos.get(e.to) ?? { x: 0, y: 0 }
+    // 贝塞尔：垂直布局控制点在 y 方向（上下流动），水平在 x 方向
+    const ctrl = orientation === 'vertical'
+      ? `C ${a.x},${(a.y + b.y) / 2} ${b.x},${(a.y + b.y) / 2} ${b.x},${b.y}`
+      : `C ${(a.x + b.x) / 2},${a.y} ${(a.x + b.x) / 2},${b.y} ${b.x},${b.y}`
+    return { from: e.from, to: e.to, d: `M ${a.x},${a.y} ${ctrl}` }
+  })
+
+  return { nodes: outNodes, edges: outEdges }
+}

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

@@ -0,0 +1,73 @@
+/* weifuwu/client/components — Popconfirm 气泡确认
+ * 复用 usePopup 基座：定位/portal/Escape 继承 Popover 同款
+ */
+
+.wf-popconfirm-wrap {
+  display: inline-block;
+}
+
+.wf-popconfirm {
+  position: fixed;
+  z-index: var(--wf-z-popover);
+  min-width: var(--wf-popconfirm-min-width,  180px);
+  padding: var(--wf-space-sm);
+  border-radius: var(--wf-surface-radius);
+  background: var(--wf-surface-bg);
+  box-shadow: var(--wf-surface-shadow);
+  border: var(--wf-border-width) solid var(--wf-color-border-light);
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-sm);
+}
+
+.wf-popconfirm--bottom { /* transform 残留已删（同 Tooltip 修复） */ }
+.wf-popconfirm--top { /* 同上 */ }
+.wf-popconfirm--left { /* 同上 */ }
+.wf-popconfirm--right { /* 同上 */ }
+
+.wf-popconfirm--enter {
+  animation: wf-popconfirm-in var(--wf-dur-md) var(--wf-ease-standard);
+}
+
+.wf-popconfirm--exit {
+  animation: wf-popconfirm-out var(--wf-dur-md) var(--wf-ease-standard) forwards;
+}
+
+/* 入场/退场只 fade（opacity）——transform 由定位类独占：
+   动画含 transform 会覆盖 .wf-popconfirm--top 的 translateX(-50%)
+   translateY(-100%)——动画期间弹层右偏/跳位，结束才归位（真实 bug） */
+@keyframes wf-popconfirm-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes wf-popconfirm-out {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+
+.wf-popconfirm-title {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--wf-gap-xs);
+  margin-bottom: var(--wf-space-xs);
+  color: var(--wf-color-text);
+  line-height: var(--wf-line-height);
+}
+
+.wf-popconfirm-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  margin-top: 2px;
+  color: var(--wf-color-warning-text);
+}
+
+.wf-popconfirm-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--wf-gap-xs);
+  margin-top: var(--wf-space-xs);
+}
+/* ── 语义标记类（DOM 钩子——无样式：测试定位/用户扩展——:where 零优先级显式声明） ── */
+:where(.wf-popconfirm-cancel) {}
+:where(.wf-popconfirm-ok) {}
+:where(.wf-popconfirm-title-text) {}

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

@@ -0,0 +1,35 @@
+/** Popconfirm：气泡确认：危险操作防误触 + 复用 usePopup 基座（showcase /components/popconfirm） */
+/**
+ * weifuwu/client/components — Popconfirm 气泡确认
+ *
+ * 三库等价：antd Popconfirm / Element Plus Popconfirm。
+ * 复用 openPopup 内核（Popover 同级基座）——验证弹层体系可组合性：
+ * 定位/portal/外部点击/Escape/视口夹紧全部继承，组件只写确认语义。
+ *
+ *   <Popconfirm title="确定删除？" danger onConfirm={...}>
+ *     <button>删除</button>
+ *   </Popconfirm>
+ *
+ * - 受控 open/onOpenChange；非受控点击触发
+ * - 确认后自动关闭（onConfirm 后 setOpen(false)）
+ * - 裁剪（CS-05，见 docs/client.md）：不做气泡内表单/自定义箭头
+ */
+import type { Component, VNodeChild } from '../../../../level6/client/vdom/index.ts';
+import type { Placement } from '../../../../level3/vdom/hooks/popup.ts';
+export interface PopconfirmProps {
+    title?: VNodeChild;
+    okText?: string;
+    cancelText?: string;
+    okType?: 'primary' | 'danger';
+    /** 危险确认（默认图标换 warning 色 + 确认按钮 danger） */
+    danger?: boolean;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    position?: Placement;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    icon?: VNodeChild;
+    children?: VNodeChild;
+}
+export declare const Popconfirm: Component<PopconfirmProps>;

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

@@ -0,0 +1,119 @@
+/** Popconfirm：气泡确认：危险操作防误触 + 复用 usePopup 基座（showcase /components/popconfirm） */
+/**
+ * weifuwu/client/components — Popconfirm 气泡确认
+ *
+ * 三库等价：antd Popconfirm / Element Plus Popconfirm。
+ * 复用 openPopup 内核（Popover 同级基座）——验证弹层体系可组合性：
+ * 定位/portal/外部点击/Escape/视口夹紧全部继承，组件只写确认语义。
+ *
+ *   <Popconfirm title="确定删除？" danger onConfirm={...}>
+ *     <button>删除</button>
+ *   </Popconfirm>
+ *
+ * - 受控 open/onOpenChange；非受控点击触发
+ * - 确认后自动关闭（onConfirm 后 setOpen(false)）
+ * - 裁剪（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 { PopupHandle } from '../../../../level3/vdom/hooks/popup-manager.ts'
+import type { Placement } from '../../../../level3/vdom/hooks/popup.ts'
+
+export interface PopconfirmProps {
+  title?: VNodeChild
+  okText?: string
+  cancelText?: string
+  okType?: 'primary' | 'danger'
+  /** 危险确认（默认图标换 warning 色 + 确认按钮 danger） */
+  danger?: boolean
+  onConfirm?: ()=> void
+  onCancel?: ()=> void
+  position?: Placement
+  open?: boolean
+  onOpenChange?: (open: boolean)=> void
+  disabled?: boolean
+  icon?: VNodeChild
+  children?: VNodeChild}
+
+export const Popconfirm: Component<PopconfirmProps> = (_init, ctx: UIContext)=> {
+  // ── mount（只一次）──
+  let latestPosition: Placement = 'top'
+  let latestOnConfirm: (()=> void) | undefined
+  let disabled = false
+  let wrapEl: HTMLElement | null = null
+  const wrapRef = (el: HTMLElement | null)=> { if (el) wrapEl = el }
+
+  // useOpen：受控/非受控 open 统一（close 走 setOpen——受控通知父组件）
+  let openCtrl: ReturnType<UIContext['ui']['useOpen']> | null = null
+  /** 命令式句柄（唯一形态——openPopup——组件内部同步样板） */
+  let handle: PopupHandle | null = null
+
+  const close = ()=> { openCtrl?.setOpen(false) }
+
+  // ── render（每次 dirty/props 变化）──
+  return (props: PopconfirmProps)=> {
+    const {
+      title, okText = '确定', cancelText = '取消', danger,
+      onConfirm, onCancel, position = 'top', icon,
+    } = props
+    latestPosition = position
+    openCtrl = ctx.ui.useOpen({ open: props.open, onOpenChange: props.onOpenChange, name: 'Popconfirm' })
+    latestOnConfirm = onConfirm
+    disabled = !!props.disabled
+
+    // useOpen open getter 读最新（受控 props / 非受控内部）——气泡显隐/动效类
+    const isOpen = openCtrl?.open ?? false
+    const bubble = h('div', {
+      class: `wf-popconfirm wf-popconfirm--${position}${isOpen ? ' wf-popconfirm--enter' : ' wf-popconfirm--exit'}`,
+      role: 'dialog',
+      'aria-label': String(title ?? '确认'),
+    }, [
+      h('div', { class: 'wf-popconfirm-title' }, [
+        h('span', { class: 'wf-popconfirm-icon' },
+          icon ?? h(Icon, { name: danger ? 'alert' : 'info' })),
+        h('span', { class: 'wf-popconfirm-title-text' }, title),
+      ]),
+      h('div', { class: 'wf-popconfirm-actions' }, [
+        h('button', {
+          class: 'wf-popconfirm-cancel wf-btn wf-btn--secondary',
+          onClick: (e: Event)=> {
+            e.stopPropagation()
+            onCancel?.()
+            close()
+          },
+        }, cancelText),
+        h('button', {
+          class: `wf-popconfirm-ok wf-btn${danger ? ' wf-btn--danger' : ' wf-btn--primary'}`,
+          onClick: (e: Event)=> {
+            e.stopPropagation()
+            onConfirm?.()
+            close()
+          },
+        }, okText),
+      ]),
+    ])
+
+    // 命令式同步（受控 + 内容更新——每次渲染恒调用）
+    if (isOpen && !handle)
+      handle = ctx.ui.openPopup({
+        anchor: ()=> wrapEl,
+        placement: ()=> latestPosition,
+        gap: 8,
+        content: ()=> bubble,
+        onClose: ()=> { handle = null; openCtrl?.setOpen(false) },
+      })
+    else if (!isOpen && handle) { handle.close(); handle = null }
+    else if (handle) handle.update(bubble)
+
+    return h('span', {
+      class: 'wf-popconfirm-wrap', ref: wrapRef,
+      'aria-haspopup': 'dialog', 'aria-expanded': String(isOpen),
+      role: 'button', tabIndex: disabled ? -1 : 0, // 键盘可达（Card clickable 同模式——Enter/Space 触发）
+      onKeyDown: (e: KeyboardEvent)=> { if ((e.key === 'Enter' || e.key === ' ') && !disabled) { e.preventDefault(); openCtrl?.setOpen(!openCtrl.open) } },
+      onClick: (e: Event)=> { e.stopPropagation?.(); if (!disabled) openCtrl?.setOpen(!openCtrl.open) }, // click 触发
+    }, props.children)
+  }
+}