weifuwu 0.94.0 → 0.95.0

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

@@ -0,0 +1,80 @@
+/** FloatButton：悬浮按钮组：展开状态机 + badge（showcase /components/floatbutton） */
+/**
+ * weifuwu/client/components — FloatButton 悬浮操作按钮
+ *
+ * 三库等价：antd FloatButton（特有——EP/shadcn 无独立等价）。
+ * 固定视口定位 + badge + 组展开状态机：
+ *
+ *   <FloatButton icon={...} position="bottom-right" badge={5} onClick={...} />
+ *   <FloatButtonGroup>
+ *     <FloatButton icon={...} onClick={...} />
+ *   </FloatButtonGroup>
+ *
+ * 裁剪（CS-05，见 docs/client.md）：不做拖拽悬浮（Resizable 可组合）；回顶用 BackTop 语义更清晰。
+ */
+
+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 type FloatButtonPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+
+export interface FloatButtonProps {
+  icon?: VNodeChild
+  badge?: number | string
+  position?: FloatButtonPosition
+  /** 'static'：组内子项（不 fixed——独立 fixed 会与主按钮重叠） */
+  static?: boolean
+  disabled?: boolean
+  onClick?: ()=> void
+  'aria-label'?: string
+  children?: VNodeChild}
+
+/** 单个悬浮按钮 */
+export const FloatButton: Component<FloatButtonProps> = (_init, _ctx: UIContext)=>
+  (props)=> {
+    const { icon, badge, position = 'bottom-right', static: isStatic, disabled, onClick, children } = props
+    return h('button', {
+      class: `wf-float-btn wf-float-btn--${position}${isStatic ? ' wf-float-btn--static' : ''}${disabled ? ' wf-float-btn--disabled' : ''}`,
+      style: { position: isStatic ? undefined : 'fixed' },
+      'aria-label': props['aria-label'],
+      disabled,
+      onClick: disabled ? undefined : onClick,
+    }, [
+      icon,
+      children,
+      badge !== undefined && badge !== null && h('span', { class: 'wf-float-btn-badge' }, String(badge)),
+    ].filter(x => x !== undefined && x !== null && x !== false))
+  }
+
+export interface FloatButtonGroupProps {
+  position?: FloatButtonPosition
+  children?: VNodeChild}
+
+/** 悬浮按钮组：主按钮展开/收起子按钮 */
+export const FloatButtonGroup: Component<FloatButtonGroupProps> = (_init, ctx: UIContext)=> {
+  // ── mount（只一次）── 状态原语（set 自动重渲染——无需 ctx.render()）
+  const open = ctx.ui.useSignal(false)
+
+  return (props)=> {
+    const { position = 'bottom-right', children } = props
+    const kids = Array.isArray(children) ? children : [children]
+    return h('div', {
+      class: `wf-float-group wf-float-group--${position}${open.get() ? ' wf-float-group--open' : ''}`,
+    }, [
+      h('div', { class: 'wf-float-group-items' },
+        open.get() ? kids.map((k: any, i: number)=> {
+          // 子项注入 static（组内不 fixed——否则全部叠在右下角与主按钮重叠）
+          const props = { ...(k.props ?? {}), static: true }
+          const child = k.type ? { ...k, props } : k
+          return h('div', { class: 'wf-float-group-item', key: i }, child)
+        }) : []),
+      h('button', {
+        class: 'wf-float-group-main',
+        'aria-label': open.get() ? '收起' : '展开',
+        'aria-expanded': open.get(),
+        onClick: ()=> open.set((v) => !v),
+      }, h('span', { class: `wf-float-group-icon${open.get() ? ' is-open' : ''}` }, '+')),
+    ])
+  }
+}

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

@@ -0,0 +1,7 @@
+/* weifuwu/client/components — Form */
+
+.wf-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wf-gap-md);
+}

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

@@ -0,0 +1,23 @@
+/** Form：内置验证规则：required/pattern/minLength/自定义（showcase /components/form） */
+import type { Component, VNodeChild } from '../../../../level6/client/vdom/index.ts';
+export interface ValidationRule {
+    required?: boolean;
+    pattern?: RegExp;
+    minLength?: number;
+    maxLength?: number;
+    message: string;
+    /** 自定义验证函数，返回 true = 通过，false/string = 失败（string 会覆盖 message） */
+    validator?: (value: any) => boolean | string | Promise<boolean | string>;
+}
+export interface FormProps {
+    /** 提交回调，接收字段名→值的对象 */
+    onSubmit?: (values: Record<string, any>) => void | Promise<void>;
+    /** 验证规则：字段名 → 规则数组 */
+    validation?: Record<string, ValidationRule[]>;
+    /** 验证失败时回调，接收字段名→错误消息的对象 */
+    onError?: (errors: Record<string, string>) => void;
+    children?: VNodeChild;
+}
+/** 验证函数：字段值 → 验证规则 → 错误消息 */
+export declare function validateValues(values: Record<string, any>, rules: Record<string, ValidationRule[]>): Promise<Record<string, string>>;
+export declare const Form: Component<FormProps>;

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

@@ -0,0 +1,105 @@
+/** Form：内置验证规则：required/pattern/minLength/自定义（showcase /components/form） */
+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 ValidationRule {
+  required?: boolean
+  pattern?: RegExp
+  minLength?: number
+  maxLength?: number
+  message: string
+  /** 自定义验证函数，返回 true = 通过，false/string = 失败（string 会覆盖 message） */
+  validator?: (value: any)=> boolean | string | Promise<boolean | string>
+}
+
+export interface FormProps {
+  /** 提交回调，接收字段名→值的对象 */
+  onSubmit?: (values: Record<string, any>)=> void | Promise<void>
+  /** 验证规则：字段名 → 规则数组 */
+  validation?: Record<string, ValidationRule[]>
+  /** 验证失败时回调，接收字段名→错误消息的对象 */
+  onError?: (errors: Record<string, string>)=> void
+  children?: VNodeChild}
+
+/** 验证函数：字段值 → 验证规则 → 错误消息 */
+export async function validateValues(
+  values: Record<string, any>,
+  rules: Record<string, ValidationRule[]>,
+): Promise<Record<string, string>> {
+  const errors: Record<string, string> = {}
+  for (const [field, fieldRules] of Object.entries(rules)) {
+    const val = values[field] ?? ''
+    for (const rule of fieldRules) {
+      // required
+      if (rule.required && !String(val).trim()) {
+        errors[field] = rule.message
+        break
+      }
+      // pattern
+      if (rule.pattern && !rule.pattern.test(String(val))) {
+        errors[field] = rule.message
+        break
+      }
+      // minLength
+      if (rule.minLength != null && String(val).length < rule.minLength) {
+        errors[field] = rule.message
+        break
+      }
+      // maxLength
+      if (rule.maxLength != null && String(val).length > rule.maxLength) {
+        errors[field] = rule.message
+        break
+      }
+      // 自定义验证
+      if (rule.validator) {
+        const result = await rule.validator(val)
+        if (result !== true) {
+          errors[field] = typeof result === 'string' ? result : rule.message
+          break
+        }
+      }
+    }
+  }
+  return errors
+}
+
+export const Form: Component<FormProps> = (_init, _ctx)=>
+  (props)=> {
+  const { validation, onSubmit, onError, children } = props
+
+  const handleSubmit = async (e: Event)=> {
+    e.preventDefault()
+    const form = e.target as HTMLFormElement
+    const data = new FormData(form)
+    const values: Record<string, any> = {}
+    for (const [key, val] of data.entries()) {
+      // 同名多值（如 checkbox[]）→ 数组
+      if (key in values) {
+        const prev = values[key]
+        values[key] = Array.isArray(prev) ? [...prev, val] : [prev, val]
+      } else {
+        values[key] = val
+      }
+    }
+
+    // 验证
+    if (validation) {
+      const errors = await validateValues(values, validation)
+      if (Object.keys(errors).length > 0) {
+        onError?.(errors)
+        return
+      }
+      // 验证通过 → 清空错误
+      onError?.({})
+    }
+
+    await onSubmit?.(values)
+  }
+
+  return h('form', {
+    class: 'wf-form',
+    onSubmit: handleSubmit,
+    noValidate: validation ? true : undefined,
+  }, children)
+}

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

@@ -0,0 +1,22 @@
+/* weifuwu/client/components — Grid 栅格 + Flex 容器 */
+
+.wf-grid-comp {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.wf-grid-comp--column {
+  flex-direction: column;
+}
+
+.wf-grid-comp--flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.wf-col {
+  box-sizing: border-box;
+  min-width: 0;
+}

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

@@ -0,0 +1,35 @@
+/** Grid：24 栅格 + gutter + flex 容器模式（Row/Col/Flex 等价）（showcase /components/grid） */
+/**
+ * weifuwu/client/components — Grid 栅格 + Flex 容器
+ *
+ * 三库等价：antd Row/Col/Flex、EP Row/Col。
+ * 24 栅格 + gutter + flex 容器模式（单行弹性布局 = antd Flex 场景）：
+ *
+ *   <Grid gutter={16}>
+ *     <Col span={8}>A</Col>
+ *     <Col span={8}>B</Col>
+ *   </Grid>
+ *   <Grid flex gap={8} direction="row">...</Grid>
+ *
+ * 裁剪（CS-05，见 docs/client.md）：不做响应式断点 props（useBreakpoint 由用户驱动）；
+ * gutter 仅水平（垂直 gutter 低频）。
+ */
+import type { Component, VNodeChild } from '../../../../level6/client/vdom/index.ts';
+export interface GridProps {
+    gutter?: number;
+    flex?: boolean;
+    gap?: number;
+    direction?: 'row' | 'column';
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    children?: VNodeChild;
+}
+export interface ColProps {
+    /** 0-24 栅格跨度；0 = flex:1 占剩余 */
+    span?: number;
+    gutter?: number;
+    children?: VNodeChild;
+}
+/** 栅格跨度 → 宽度（纯函数——可单测/SSR） */
+export declare function gridColumns(span: number): string;
+export declare const Grid: Component<GridProps>;
+export declare const Col: Component<ColProps>;

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

@@ -0,0 +1,80 @@
+/** Grid：24 栅格 + gutter + flex 容器模式（Row/Col/Flex 等价）（showcase /components/grid） */
+/**
+ * weifuwu/client/components — Grid 栅格 + Flex 容器
+ *
+ * 三库等价：antd Row/Col/Flex、EP Row/Col。
+ * 24 栅格 + gutter + flex 容器模式（单行弹性布局 = antd Flex 场景）：
+ *
+ *   <Grid gutter={16}>
+ *     <Col span={8}>A</Col>
+ *     <Col span={8}>B</Col>
+ *   </Grid>
+ *   <Grid flex gap={8} direction="row">...</Grid>
+ *
+ * 裁剪（CS-05，见 docs/client.md）：不做响应式断点 props（useBreakpoint 由用户驱动）；
+ * gutter 仅水平（垂直 gutter 低频）。
+ */
+
+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 { keyOf } from '../../../../level1/vdom/node/keyed.ts'
+
+export interface GridProps {
+  gutter?: number
+  flex?: boolean
+  gap?: number
+  direction?: 'row' | 'column'
+  align?: 'start' | 'center' | 'end' | 'stretch'
+  children?: VNodeChild}
+
+export interface ColProps {
+  /** 0-24 栅格跨度；0 = flex:1 占剩余 */
+  span?: number
+  gutter?: number
+  children?: VNodeChild}
+
+/** 栅格跨度 → 宽度（纯函数——可单测/SSR） */
+export function gridColumns(span: number): string {
+  if (span <= 0) return '1'
+  return `${(span / 24) * 100}%`
+}
+
+export const Grid: Component<GridProps> = (_init, _ctx: UIContext)=>
+  (props)=> {
+    const { gutter, flex, gap, direction = 'row', align, children } = props
+    const half = gutter ? gutter / 2 : 0
+    // gutter 通过 style 传递——子 Col 从 Grid 拿（简化：注入 gutter 到 children props）
+    // **key 保持纪律（2026-08——A 级检测实证）**：h() 把 key 从 props 剥离进
+    // vnode.key——`{ ...c.props, gutter }` 拿不到 key——用户声明的 Col 身份
+    // 丢失（动态 Col 列表按位置继承——Grid 状态错位）——显式回填 keyOf(c)
+    const kids = Array.isArray(children)
+      ? children.map((c: any)=>
+          c && typeof c === 'object' && c.type === Col
+            ? h(Col, { ...c.props, key: keyOf(c), gutter }, c.props?.children)
+            : c)
+      : children
+
+    return h('div', {
+      class: `wf-grid-comp${flex ? ' wf-grid-comp--flex' : ''}${direction === 'column' ? ' wf-grid-comp--column' : ''}`,
+      style: {
+        margin: half ? `0 -${half}px` : undefined,
+        gap: gap !== undefined ? `${gap}px` : undefined,
+        alignItems: align === 'start' ? 'flex-start' : align === 'end' ? 'flex-end' : align,
+      },
+    }, kids)
+  }
+
+export const Col: Component<ColProps> = (_init, _ctx: UIContext)=>
+  (props)=> {
+    const { span = 24, gutter, children } = props
+    const half = gutter ? gutter / 2 : 0
+    return h('div', {
+      class: 'wf-col',
+      style: {
+        width: gridColumns(span),
+        flex: span <= 0 ? '1' : '0 0 auto',
+        padding: half ? `0 ${half}px` : undefined,
+      },
+    }, children)
+  }

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

@@ -0,0 +1,9 @@
+/* weifuwu/client/components — Highlight */
+
+.wf-highlight-mark {
+  background: var(--wf-color-warning-bg);
+  color: var(--wf-color-warning-text);
+  border-radius: var(--wf-radius-xs);
+  padding: 0 1px;
+  font-weight: var(--wf-font-weight-semibold);
+}

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

@@ -0,0 +1,14 @@
+/** Highlight：搜索词高亮：分词渲染 mark，大小写不敏感（showcase /components/highlight） */
+/**
+ * weifuwu/client/components — Highlight
+ *
+ * 搜索词高亮：给定文本 + 高亮词数组 → 分词渲染 <mark>（零依赖，VNode 拼接）。
+ * 配合 SearchInput/Table 搜索结果命中展示。
+ */
+import type { Component } from '../../../../level6/client/vdom/index.ts';
+export interface HighlightProps {
+    text: string;
+    query?: string | string[];
+    className?: string;
+}
+export declare const Highlight: Component<HighlightProps>;

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

@@ -0,0 +1,47 @@
+/** Highlight：搜索词高亮：分词渲染 mark，大小写不敏感（showcase /components/highlight） */
+/**
+ * weifuwu/client/components — Highlight
+ *
+ * 搜索词高亮：给定文本 + 高亮词数组 → 分词渲染 <mark>（零依赖，VNode 拼接）。
+ * 配合 SearchInput/Table 搜索结果命中展示。
+ */
+
+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 HighlightProps {
+  text: string
+  query?: string | string[]
+  className?: string
+}
+
+export const Highlight: Component<HighlightProps> = (_init, _ctx)=>
+  (props)=> {
+    const { text, query, className } = props
+    const queries = (Array.isArray(query) ? query : query ? [query] : [])
+      .filter(Boolean)
+      .map((q)=> q.toLowerCase())
+
+    if (queries.length === 0) return h('span', { class: `wf-highlight${className ? ` ${className}` : ''}` }, text)
+
+    const nodes: any[] = []
+    let i = 0
+    const lower = text.toLowerCase()
+    while (i < text.length) {
+      let best: { start: number; end: number } | null = null
+      for (const q of queries) {
+        const idx = lower.indexOf(q, i)
+        if (idx >= 0 && (!best || idx < best.start)) best = { start: idx, end: idx + q.length }
+      }
+      if (!best) {
+        nodes.push(text.slice(i))
+        break
+      }
+      if (best.start > i) nodes.push(text.slice(i, best.start))
+      nodes.push(h('mark', { class: 'wf-highlight-mark' }, text.slice(best.start, best.end)))
+      i = best.end
+    }
+
+    return h('span', { class: `wf-highlight${className ? ` ${className}` : ''}` }, nodes)
+  }

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

@@ -0,0 +1,43 @@
+/* weifuwu/client/components — HoverCard */
+
+.wf-hover-card-wrap {
+  /* 锚定容器收缩（flex 父容器 blockify 兜底——同 Dropdown） */
+  display: inline-block;
+  width: fit-content;
+}
+
+.wf-hover-card {
+  position: fixed;
+  z-index: var(--wf-z-tooltip);
+  max-width: 320px;
+  background: var(--wf-color-bg-elevated);
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius);
+  box-shadow: var(--wf-shadow-lg);
+  padding: var(--wf-space-md);
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text);
+  opacity: 1;
+  transition: opacity var(--wf-dur-base) var(--wf-ease-out);
+}
+
+.wf-hover-card--hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* placement 定位全权归 JS（usePopup computePos——fixed left/top 已含中心对齐/偏移）——
+ * 旧 transform 残留（top/bottom/left/right 修正）与 JS 坐标叠加双倍偏移——
+ * 同 Tooltip/Popover/Popconfirm 修复——已删 */
+.wf-hover-card--top {
+}
+
+.wf-hover-card--bottom {
+}
+
+.wf-hover-card--left {
+}
+
+.wf-hover-card--right {
+}

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

@@ -0,0 +1,24 @@
+/** HoverCard：悬停富内容卡：openDelay 延迟 + 任意 VNode（shadcn）（showcase /components/hovercard） */
+/**
+ * weifuwu/client/components — HoverCard
+ *
+ * 命令式弹窗（一个形态——ctx.ui.openPopup——toast 心智）：hover 触发
+ * （触屏自动降级 tap）+ openDelay/closeDelay + 定位/视口 clamp + Escape。
+ * 对应 shadcn HoverCard。
+ */
+import type { Component, VNodeChild } from '../../../../level6/client/vdom/index.ts';
+import type { Placement } from '../../../../level3/vdom/hooks/popup.ts';
+export type HoverCardPosition = Placement;
+export interface HoverCardProps {
+    /** 富内容（任意 VNode，区别于 Tooltip 的 string） */
+    content?: VNodeChild;
+    position?: HoverCardPosition;
+    children?: VNodeChild;
+    disabled?: boolean;
+    /** 悬停打开延迟（ms），默认 150 */
+    openDelay?: number;
+    /** 移出关闭延迟（ms），默认 0 */
+    closeDelay?: number;
+}
+/** 悬停富内容卡：hover 延迟显隐，支持任意 VNode 内容（移动端 tap 降级） */
+export declare const HoverCard: Component<HoverCardProps>;

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

@@ -0,0 +1,102 @@
+/** HoverCard：悬停富内容卡：openDelay 延迟 + 任意 VNode（shadcn）（showcase /components/hovercard） */
+/**
+ * weifuwu/client/components — HoverCard
+ *
+ * 命令式弹窗（一个形态——ctx.ui.openPopup——toast 心智）：hover 触发
+ * （触屏自动降级 tap）+ openDelay/closeDelay + 定位/视口 clamp + Escape。
+ * 对应 shadcn HoverCard。
+ */
+
+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 type { PopupHandle } from '../../../../level3/vdom/hooks/popup-manager.ts'
+import type { Placement } from '../../../../level3/vdom/hooks/popup.ts'
+
+export type HoverCardPosition = Placement
+
+export interface HoverCardProps {
+  /** 富内容（任意 VNode，区别于 Tooltip 的 string） */
+  content?: VNodeChild
+  position?: HoverCardPosition
+  children?: VNodeChild
+  disabled?: boolean
+  /** 悬停打开延迟（ms），默认 150 */
+  openDelay?: number
+  /** 移出关闭延迟（ms），默认 0 */
+  closeDelay?: number
+}
+
+/** 悬停富内容卡：hover 延迟显隐，支持任意 VNode 内容（移动端 tap 降级） */
+export const HoverCard: Component<HoverCardProps> = (_props, ctx)=> {
+  // ── mount（只一次）──
+  let latestPosition: HoverCardPosition = 'top'
+  let disabled = false
+  let latestDelay = { open: 150, close: 0 }
+  let wrapEl: HTMLElement | null = null
+  const wrapRef = (el: HTMLElement | null)=> { if (el) wrapEl = el }
+  /** 命令式句柄（唯一形态——openPopup——组件内部同步样板） */
+  let handle: PopupHandle | null = null
+
+  // useOpen：受控/非受控 open 统一（hover 触发内联）
+  let openCtrl: ReturnType<UIContext['ui']['useOpen']> | null = null
+
+  // hover 触发（延迟——openDelay/closeDelay——原 弹层 trigger 语义）
+  let hoverTimer: ReturnType<typeof setTimeout> | null = null
+  const clearHover = (): void => {
+    if (hoverTimer !== null) { clearTimeout(hoverTimer); hoverTimer = null }
+  }
+  const hoverOpen = (): void => {
+    clearHover()
+    if (disabled) return
+    hoverTimer = setTimeout(()=> {
+      hoverTimer = null
+      if (!openCtrl?.open) openCtrl?.setOpen(true)
+    }, latestDelay.open)
+  }
+  const hoverClose = (): void => {
+    clearHover()
+    hoverTimer = setTimeout(()=> {
+      hoverTimer = null
+      if (openCtrl?.open) openCtrl?.setOpen(false)
+    }, latestDelay.close)
+  }
+  ctx.ui.onUnmount?.(clearHover)
+  ctx.ui.onUnmount?.(()=> { if (handle) handle.close() })
+
+  return (props: HoverCardProps)=> {
+    const { content, position = 'top', children } = props
+    // HoverCard 非受控（hover 显隐由 hover 触发驱动——无 open prop）
+    openCtrl = ctx.ui.useOpen({ name: 'HoverCard' })
+    latestPosition = position
+    disabled = !!props.disabled
+    latestDelay = { open: props.openDelay ?? 150, close: props.closeDelay ?? 0 }
+
+    const card = h('div', {
+      class: `wf-hover-card wf-hover-card--${position}`,
+      role: 'tooltip',
+    }, content)
+
+    // 命令式同步（受控 + 内容更新——每次渲染恒调用）
+    if (openCtrl?.open && !handle)
+      handle = ctx.ui.openPopup({
+        anchor: ()=> wrapEl,
+        placement: ()=> latestPosition,
+        gap: 8,
+        content: ()=> card,
+        onClose: ()=> { handle = null; openCtrl?.setOpen(false) },
+      })
+    else if (!openCtrl?.open && handle) { handle.close(); handle = null }
+    else if (handle) handle.update(card)
+
+    return h('div', {
+      class: 'wf-hover-card-wrap',
+      ref: wrapRef,
+      'aria-haspopup': 'dialog',
+      'aria-expanded': String(!!openCtrl?.open),
+      onMouseEnter: hoverOpen,
+      onMouseLeave: hoverClose,
+      onClick: ()=> { openCtrl?.setOpen(!openCtrl.open) }, // 触屏降级 tap
+    }, children)
+  }
+}

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

@@ -0,0 +1,7 @@
+/* weifuwu/client/components — Icon（内联 SVG 基础样式） */
+
+.wf-icon {
+  display: inline-block;
+  flex-shrink: 0;
+  vertical-align: -0.125em; /* 与文字基线对齐 */
+}

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

@@ -0,0 +1,20 @@
+/** Icon：stroke SVG 图标集，currentColor 着色，随字号缩放（showcase /components/icon） */
+/**
+ * weifuwu/client/components — Icon 内联 SVG 图标
+ *
+ * 24px stroke 风格（feather-like），currentColor 着色随文字/上下文，
+ * 零外部依赖（FS-05）。组件内部图标统一走这里，替换文本字形/emoji。
+ *
+ * 用法：
+ *   h(Icon, { name: 'close' })
+ *   h(Icon, { name: 'check', size: 16 })
+ */
+import type { Component } from '../../../../level6/client/vdom/index.ts';
+export type IconName = 'chevron-down' | 'chevron-up' | 'chevron-left' | 'chevron-right' | 'arrow-left' | 'arrow-up' | 'arrow-down' | 'arrow-right' | 'sort' | 'sort-asc' | 'sort-desc' | 'check' | 'close' | 'alert' | 'info' | 'warning' | 'pause' | 'settings' | 'search' | 'send' | 'stop' | 'retry' | 'upload' | 'trash' | 'edit' | 'plus' | 'copy' | 'eye' | 'eye-off' | 'star' | 'dashboard' | 'grid' | 'box' | 'users' | 'user' | 'home' | 'folder' | 'file' | 'file-text' | 'calendar' | 'clock' | 'bell' | 'menu' | 'activity' | 'trending-up' | 'trending-down' | 'database' | 'server' | 'heart' | 'refresh' | 'message' | 'inbox' | 'shield' | 'zap' | 'target' | 'mail' | 'external-link' | 'log-out' | 'lock' | 'list' | 'bar-chart' | 'gauge' | 'paperclip' | 'filter' | 'layers' | 'map-pin' | 'book-open' | 'github' | 'tag' | 'phone' | 'more-vertical' | 'check-circle' | 'alert-circle' | 'wifi' | 'cpu' | 'hard-drive' | 'globe' | 'briefcase' | 'layout' | 'camera' | 'image' | 'share';
+export interface IconProps {
+    name: IconName;
+    /** 尺寸，默认 1em（随字号缩放） */
+    size?: number | string;
+    className?: string;
+}
+export declare const Icon: Component<IconProps>;