weifuwu 0.94.0 → 0.95.0

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

@@ -0,0 +1,124 @@
+/** Rate：评分：键盘方向键 / allowClear / readOnly，新增 star 图标（showcase /components/rate） */
+import type { Component } from '../../../../level6/client/vdom/index.ts'
+import { h } from '../../../../level6/client/vdom/index.ts'
+import { Icon } from '../Icon/Icon.ts'
+
+export interface RateProps {
+  /** 当前评分值（0..count） */
+  value?: number
+  onChange?: (value: number)=> void
+  /** 星星总数，默认 5 */
+  count?: number
+  size?: 'sm' | 'md' | 'lg'
+  /** 只读（展示态，不可交互、不可聚焦） */
+  readOnly?: boolean
+  disabled?: boolean
+  /** 点击当前评分值 → 清除为 0（antd 对齐） */
+  allowClear?: boolean
+  /** 允许半星（0.5 精度；点击左半=半星，右半=整星） */
+  allowHalf?: boolean
+  'aria-label'?: string
+}
+
+export const Rate: Component<RateProps> = (_init, ctx)=> {
+  // ── mount（只一次）── 悬停态状态原语（set 自动重渲染——§4.1 手动状态纪律
+  // 的精确化：set 即渲染——不存在"忘了 render"的死代码路径）
+  const hover = ctx.ui.useSignal(-1) // -1 = 未悬停；键盘悬停态复用（聚焦跟随）
+  const setHover = (v: number)=> {
+    if (hover.get() === v) return
+    hover.set(v)
+  }
+
+  return (props)=> {
+    const {
+      count = 5, size = 'md',
+      readOnly, disabled, allowClear, allowHalf, 'aria-label': ariaLabel,
+    } = props
+
+    // useControlled：受控/非受控统一（缺回调 warn + 非受控内部态——
+    // 原实现非受控（无 onChange）静默不可点，受控纪律违规）
+    // readOnly/disabled 不可交互——value 是展示态非受控态，豁免 warn（demo 静态展示触发误报）
+    const inert = readOnly || disabled
+    const ctrl = ctx?.ui?.useControlled<number>({ value: props.value, onChange: props.onChange, name: inert ? undefined : 'Rate' })
+    const value = ctrl?.value ?? 0
+    const setRate = (v: number)=> {
+      const wasControlled = ctrl?.controlled?.value !== undefined
+      ctrl?.setValue(v)
+      // onChange 通知语义（非受控也调）；受控时 setValue 已调
+      if (!wasControlled) props.onChange?.(v)
+    }
+
+    const interactive = !readOnly && !disabled
+    const effective = hover.get() >= 0 ? hover.get() + 1 : value
+    const step = allowHalf ? 0.5 : 1
+
+    const handleKeyDown = (e: any)=> {
+      if (!interactive) return
+      const key = e.key
+      if (key === 'ArrowRight') { e.preventDefault(); setRate(Math.min(value + step, count)) }
+      else if (key === 'ArrowLeft') { e.preventDefault(); setRate(Math.max(value - step, 0)) }
+      else if (key === 'Home') { e.preventDefault(); setRate(step) }
+      else if (key === 'End') { e.preventDefault(); setRate(count) }
+    }
+
+    const stars: any[] = []
+    for (let i = 0; i < count; i++) {
+      const full = i < Math.floor(effective)
+      const half = allowHalf && i === Math.floor(effective) && effective % 1 >= 0.5
+      const on = full
+      const starProps: Record<string, any> = {
+        class: `wf-rate-star${on ? ' wf-rate-star--on' : ''}${half ? ' wf-rate-star--half' : ''}`,
+        'aria-label': `${i + 1} 星`,
+        key: i,
+      }
+      if (interactive) {
+        starProps.type = 'button'
+        starProps.onClick = (e: MouseEvent)=> {
+          if (allowHalf) {
+            // 左半=半星，右半=整星（按点击位置相对元素宽）
+            const el = e.currentTarget as HTMLElement
+            const rect = el.getBoundingClientRect()
+            const isLeft = (e.clientX - rect.left) < rect.width / 2
+            setRate(isLeft ? i + 0.5 : i + 1)
+          } else {
+            if (allowClear && value === i + 1) setRate(0)
+            else setRate(i + 1)
+          }
+        }
+        starProps.onMouseEnter = allowHalf
+          ? (e: MouseEvent)=> {
+              const el = e.currentTarget as HTMLElement
+              const rect = el.getBoundingClientRect()
+              setHover((e.clientX - rect.left) < rect.width / 2 ? i + 0.5 - 1 : i)
+            }
+          : ()=> setHover(i)
+        starProps.onMouseMove = allowHalf
+          ? (e: MouseEvent)=> {
+              const el = e.currentTarget as HTMLElement
+              const rect = el.getBoundingClientRect()
+              setHover((e.clientX - rect.left) < rect.width / 2 ? i + 0.5 - 1 : i)
+            }
+          : undefined
+        starProps.onMouseLeave = ()=> setHover(-1)
+        starProps.onFocus = ()=> setHover(i)
+        starProps.onBlur = ()=> setHover(-1)
+      }
+      const icon = h(Icon, { name: 'star', className: 'wf-rate-star-icon' })
+      // 半星：底层空星轮廓 + 上层满星裁剪左半（0.5em 精确裁剪）
+      const inner = half
+        ? h('span', { class: 'wf-rate-star-half' }, [
+            h('span', { class: 'wf-rate-star-half-bg' }, icon),
+            h('span', { class: 'wf-rate-star-half-fg' }, h(Icon, { name: 'star', className: 'wf-rate-star-icon' })),
+          ])
+        : icon
+      stars.push(h(interactive ? 'button' : 'span', starProps, inner))
+    }
+
+    return h('div', {
+      class: `wf-rate wf-rate--${size}${disabled ? ' wf-rate--disabled' : ''}`,
+      role: interactive ? 'radiogroup' : undefined,
+      'aria-label': ariaLabel ?? '评分',
+      onKeyDown: interactive ? handleKeyDown : undefined,
+    }, stars)
+  }
+}

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

@@ -0,0 +1,68 @@
+/* weifuwu/client/components — ReasoningBlock（CoT 推理折叠展示） */
+
+.wf-reasoning {
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius);
+  background: var(--wf-color-bg-tertiary);
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-sm);
+  line-height: var(--wf-line-height);
+}
+
+.wf-reasoning-toggle {
+  display: flex;
+  align-items: center;
+  gap: var(--wf-gap-xs);
+  width: 100%;
+  padding: var(--wf-gap-xs) var(--wf-gap-sm);
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--wf-color-text-secondary);
+  font: inherit;
+  text-align: left;
+}
+
+.wf-reasoning-toggle:hover { color: var(--wf-color-text); }
+
+.wf-reasoning-toggle:focus-visible {
+  outline: 2px solid var(--wf-color-primary);
+  outline-offset: -1px;
+  border-radius: var(--wf-radius);
+}
+
+.wf-reasoning-chevron {
+  display: inline-flex;
+  color: var(--wf-color-text-secondary);
+  transition: transform var(--wf-dur-fast) var(--wf-ease-out);
+}
+
+.wf-reasoning-chevron--open { transform: rotate(180deg); }
+
+.wf-reasoning-label { font-weight: var(--wf-font-weight-medium); }
+
+/* 流式指示点：脉冲动画 */
+.wf-reasoning-dot {
+  width: 6px;
+  height: 6px;
+  min-width: 6px;
+  min-height: 6px;
+  border-radius: 50%;
+  background: var(--wf-color-info-text);
+  animation: wf-reasoning-pulse var(--wf-dur-slow) ease-in-out infinite;
+}
+
+@keyframes wf-reasoning-pulse {
+  0%, 100% { opacity: 0.35; }
+  50% { opacity: 1; }
+}
+
+.wf-reasoning-body {
+  padding: var(--wf-gap-xs) var(--wf-gap-sm) var(--wf-gap-sm);
+  color: var(--wf-color-text-secondary);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+/* ── 语义标记类（DOM 钩子——无样式：测试定位/用户扩展——:where 零优先级显式声明） ── */
+:where(.wf-reasoning--streaming) {}
+:where(.wf-reasoning-body--open) {}

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

@@ -0,0 +1,26 @@
+/** ReasoningBlock：CoT 推理折叠展示：aria-expanded + 键盘可达 + 流式脉冲（thinking 模式 reasoning_content）（showcase /components/reasoningblock） */
+import type { Component } from '../../../../level6/client/vdom/index.ts';
+import type { UIContext } from '../../../../level6/client/vdom/index.ts';
+/**
+ * ReasoningBlock — CoT 推理过程折叠展示（AI 差异化）
+ *
+ * DeepSeek thinking 模式的 reasoning_content 展示层：折叠「已思考」头部，
+ * 点击展开推理文本。流式（streaming）时头部带脉冲指示。
+ *
+ * 手动优先（组件库纪律）：let expanded + render()，无 $。
+ *
+ * ```tsx
+ * <ReasoningBlock content={m.reasoning} streaming={m.status === 'streaming'} />
+ * ```
+ */
+export interface ReasoningBlockProps {
+    /** 推理文本（reasoning_content） */
+    content: string;
+    /** 初始展开（默认折叠） */
+    defaultExpanded?: boolean;
+    /** 折叠头部文案（默认「已思考」） */
+    label?: string;
+    /** 流式中（头部脉冲指示） */
+    streaming?: boolean;
+}
+export declare const ReasoningBlock: Component<ReasoningBlockProps, UIContext>;

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

@@ -0,0 +1,59 @@
+/** ReasoningBlock：CoT 推理折叠展示：aria-expanded + 键盘可达 + 流式脉冲（thinking 模式 reasoning_content）（showcase /components/reasoningblock） */
+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'
+
+/**
+ * ReasoningBlock — CoT 推理过程折叠展示（AI 差异化）
+ *
+ * DeepSeek thinking 模式的 reasoning_content 展示层：折叠「已思考」头部，
+ * 点击展开推理文本。流式（streaming）时头部带脉冲指示。
+ *
+ * 手动优先（组件库纪律）：let expanded + render()，无 $。
+ *
+ * ```tsx
+ * <ReasoningBlock content={m.reasoning} streaming={m.status === 'streaming'} />
+ * ```
+ */
+export interface ReasoningBlockProps {
+  /** 推理文本（reasoning_content） */
+  content: string
+  /** 初始展开（默认折叠） */
+  defaultExpanded?: boolean
+  /** 折叠头部文案（默认「已思考」） */
+  label?: string
+  /** 流式中（头部脉冲指示） */
+  streaming?: boolean
+}
+
+export const ReasoningBlock: Component<ReasoningBlockProps, UIContext> = (initProps, ctx)=> {
+  let expanded = !!initProps.defaultExpanded
+
+  return (props)=> {
+    const { content, streaming, label = '已思考' } = props
+    const toggle = ()=> { expanded = !expanded; ctx.render() }
+
+    return h('div', {
+      class: `wf-reasoning${streaming ? ' wf-reasoning--streaming' : ''}`,
+    }, [
+      h('button', {
+        type: 'button',
+        class: 'wf-reasoning-toggle',
+        'aria-expanded': expanded,
+        onClick: toggle,
+        onKeyDown: (e: any)=> {
+          if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle() }
+        },
+      }, [
+        h('span', { class: `wf-reasoning-chevron${expanded ? ' wf-reasoning-chevron--open' : ''}` }, h(Icon, { name: 'chevron-down' })),
+        h('span', { class: 'wf-reasoning-label' }, streaming ? `${label}…` : label),
+        streaming ? h('span', { class: 'wf-reasoning-dot', 'aria-hidden': 'true' }) : null,
+      ]),
+      h('div', {
+        class: `wf-reasoning-body${expanded ? ' wf-reasoning-body--open' : ''}`,
+        hidden: !expanded,
+      }, content),
+    ])
+  }
+}

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

@@ -0,0 +1,67 @@
+/* weifuwu/client/components — RelationGraph（关系图谱：SVG 画布 + 图例）
+ * 语义 token 化（M1——旧 token 体系迁移：--wf-border/--wf-text* → --wf-color-*）。
+ */
+.wf-rg {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wf-gap-sm);
+}
+.wf-rg-canvas {
+  display: block;
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius-md);
+  background:
+    radial-gradient(circle at 1px 1px, var(--wf-color-border) 1px, transparent 0) 0 0 / 24px 24px;
+  overflow: hidden;
+}
+.wf-rg-edge {
+  transition: opacity var(--wf-dur-fast) var(--wf-ease-out);
+}
+.wf-rg-node {
+  cursor: pointer;
+}
+.wf-rg-node circle {
+  transition: stroke-width var(--wf-dur-fast) var(--wf-ease-out);
+}
+.wf-rg-node:hover circle {
+  stroke-width: 3;
+}
+.wf-rg-node--selected circle {
+  stroke-width: 3.5;
+  stroke-dasharray: 4 3;
+}
+.wf-rg-label {
+  font-size: var(--wf-font-size-base);
+  font-weight: var(--wf-font-weight-semibold);
+  fill: var(--wf-color-text);
+  pointer-events: none;
+}
+.wf-rg-sublabel {
+  font-size: var(--wf-font-size-xs);
+  fill: var(--wf-color-text-tertiary);
+  pointer-events: none;
+}
+.wf-rg-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--wf-gap-xs) var(--wf-gap-md);
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text-secondary);
+}
+.wf-rg-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--wf-gap-xs);
+}
+.wf-rg-swatch {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+.wf-rg-line {
+  display: inline-block;
+  width: 16px;
+  height: 3px;
+  border-radius: var(--wf-radius-xs);
+}

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

@@ -0,0 +1,60 @@
+/** RelationGraph：关系图谱——环形/网格布局 + 类型着色 + 选中交互（人物/组织/网络）（showcase /components/relationgraph） */
+/**
+ * weifuwu/client/components — RelationGraph
+ *
+ * 关系图谱可视化（人物关系/社会网络/组织协作——agent 世界的核心交互面）：
+ * 确定性布局（环形/网格——零物理模拟——组件库零依赖纪律）+ SVG 渲染
+ * （边 + 节点一体——viewBox 统一缩放）+ 交互（hover 邻接高亮/点击选中）。
+ *
+ * 来源：agent-builder 世界构建器需求（红楼梦人物关系/公司组织/城市社会
+ * 结构——世界模型的关系可视化）。布局确定性：环形（网状关系——人物图）
+ * 与网格（组织/矩阵）——不引入力导向模拟（依赖零、结果可预测——同一数据
+ * 每次渲染一致——可截图对比）。
+ *
+ * 诚实裁剪：
+ * - 节点坐标确定性（ring/grid）——复杂自由布局（力导向/手动拖拽）后续迭代
+ * - 边为直线——多边重叠场景可后续升级 bezier/弯曲
+ * - 节点为 SVG circle/rect + text——长文案由 sublabel 承担（超长截断不处理）
+ */
+import type { Component } from '../../../../level6/client/vdom/index.ts';
+export interface RelationGraphNode {
+    id: string;
+    label: string;
+    /** 类型（颜色区分——人物/部门/居民/事件...） */
+    kind?: string;
+    /** 子标签（如「财务视角」——节点下方小字） */
+    sublabel?: string;
+    /** 权重（节点半径——代表型 agents 的人数——log 缩放） */
+    weight?: number;
+}
+export interface RelationGraphEdge {
+    from: string;
+    to: string;
+    /** 关系类型（亲属/主仆/爱情/汇报/同盟...）——颜色与图例 */
+    type?: string;
+    /** 强度（线宽 1-5——默认 1.5） */
+    strength?: number;
+    /** 有向（箭头——默认无向） */
+    directed?: boolean;
+}
+export interface RelationGraphProps {
+    nodes: RelationGraphNode[];
+    edges: RelationGraphEdge[];
+    /** 选中节点 id（受控） */
+    selectedId?: string | null;
+    /** 节点点击（选中态切换——父层管理） */
+    onSelect?: (id: string) => void;
+    /** 节点双击/单独动作（如打开 agent 档案——可选） */
+    onNodeClick?: (id: string) => void;
+    /** 布局：ring（环形——网状关系）| grid（网格——组织/矩阵）——默认 ring */
+    layout?: 'ring' | 'grid';
+    width?: string;
+    height?: string;
+    /** 关系图例（type → 颜色映射） */
+    showLegend?: boolean;
+    /** 类型颜色覆盖（kind → 色值） */
+    nodeColors?: Record<string, string>;
+    /** 关系类型颜色覆盖（edge type → 色值） */
+    edgeColors?: Record<string, string>;
+}
+export declare const RelationGraph: Component<RelationGraphProps>;

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

@@ -0,0 +1,222 @@
+/** RelationGraph：关系图谱——环形/网格布局 + 类型着色 + 选中交互（人物/组织/网络）（showcase /components/relationgraph） */
+/**
+ * weifuwu/client/components — RelationGraph
+ *
+ * 关系图谱可视化（人物关系/社会网络/组织协作——agent 世界的核心交互面）：
+ * 确定性布局（环形/网格——零物理模拟——组件库零依赖纪律）+ SVG 渲染
+ * （边 + 节点一体——viewBox 统一缩放）+ 交互（hover 邻接高亮/点击选中）。
+ *
+ * 来源：agent-builder 世界构建器需求（红楼梦人物关系/公司组织/城市社会
+ * 结构——世界模型的关系可视化）。布局确定性：环形（网状关系——人物图）
+ * 与网格（组织/矩阵）——不引入力导向模拟（依赖零、结果可预测——同一数据
+ * 每次渲染一致——可截图对比）。
+ *
+ * 诚实裁剪：
+ * - 节点坐标确定性（ring/grid）——复杂自由布局（力导向/手动拖拽）后续迭代
+ * - 边为直线——多边重叠场景可后续升级 bezier/弯曲
+ * - 节点为 SVG circle/rect + text——长文案由 sublabel 承担（超长截断不处理）
+ */
+
+import type { Component } from '../../../../level6/client/vdom/index.ts'
+import { h } from '../../../../level6/client/vdom/index.ts'
+
+export interface RelationGraphNode {
+  id: string
+  label: string
+  /** 类型（颜色区分——人物/部门/居民/事件...） */
+  kind?: string
+  /** 子标签（如「财务视角」——节点下方小字） */
+  sublabel?: string
+  /** 权重（节点半径——代表型 agents 的人数——log 缩放） */
+  weight?: number
+}
+
+export interface RelationGraphEdge {
+  from: string
+  to: string
+  /** 关系类型（亲属/主仆/爱情/汇报/同盟...）——颜色与图例 */
+  type?: string
+  /** 强度（线宽 1-5——默认 1.5） */
+  strength?: number
+  /** 有向（箭头——默认无向） */
+  directed?: boolean
+}
+
+export interface RelationGraphProps {
+  nodes: RelationGraphNode[]
+  edges: RelationGraphEdge[]
+  /** 选中节点 id（受控） */
+  selectedId?: string | null
+  /** 节点点击（选中态切换——父层管理） */
+  onSelect?: (id: string)=> void
+  /** 节点双击/单独动作（如打开 agent 档案——可选） */
+  onNodeClick?: (id: string)=> void
+  /** 布局：ring（环形——网状关系）| grid（网格——组织/矩阵）——默认 ring */
+  layout?: 'ring' | 'grid'
+  width?: string
+  height?: string
+  /** 关系图例（type → 颜色映射） */
+  showLegend?: boolean
+  /** 类型颜色覆盖（kind → 色值） */
+  nodeColors?: Record<string, string>
+  /** 关系类型颜色覆盖（edge type → 色值） */
+  edgeColors?: Record<string, string>
+}
+
+/** 内部坐标画布（viewBox——SVG 统一缩放） */
+const VB_W = 800
+const VB_H = 500
+
+const NODE_PALETTE = ['#4f6ef7', '#22c55e', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4', '#ec4899', '#84cc16', '#f97316', '#14b8a6']
+const EDGE_PALETTE = ['#94a3b8', '#4f6ef7', '#22c55e', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4', '#ec4899', '#84cc16']
+
+function hashOf(s: string): number {
+  let h = 0
+  for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) >>> 0
+  return h
+}
+const colorOf = (key: string, palette: string[], overrides?: Record<string, string>): string =>
+  overrides?.[key] ?? palette[hashOf(key) % palette.length]
+
+/** 权重 → 节点半径（1-1000 人 → 12-30px——log 缩放） */
+function radiusOf(weight?: number): number {
+  if (weight === undefined) return 14
+  const w = Math.max(1, weight)
+  return 12 + Math.round(Math.log10(w) * 6)
+}
+
+/** 自动 viewBox（按节点边界紧凑裁剪——真实体验问题：固定 800×500 画布在
+ *  宽容器里被 meet 缩小（留白/节点变小——demo 高度 420 显示不完整）——
+ *  节点边界 + padding 计算——任何节点数/布局完整且最大化——确定性（同数据
+ *  同 viewBox——测试可截图对比） */
+function computeViewBox(nodes: RelationGraphNode[], pos: Array<{ x: number; y: number }>): string {
+  const PAD = 28
+  const SUB_LABEL = 34 // sublabel 在节点下方
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity
+  for (let i = 0; i < nodes.length; i++) {
+    const r = radiusOf(nodes[i].weight)
+    const p = pos[i]
+    minX = Math.min(minX, p.x - r)
+    minY = Math.min(minY, p.y - r)
+    maxX = Math.max(maxX, p.x + r)
+    maxY = Math.max(maxY, p.y + r + (nodes[i].sublabel ? SUB_LABEL : 0))
+  }
+  if (nodes.length === 0) return `0 0 ${VB_W} ${VB_H}`
+  return `${Math.round(minX - PAD)} ${Math.round(minY - PAD)} ${Math.round(maxX - minX + PAD * 2)} ${Math.round(maxY - minY + PAD * 2)}`
+}
+
+/** 确定性布局——环形/网格（同输入同输出——可截图对比） */
+function layoutNodes(nodes: RelationGraphNode[], mode: 'ring' | 'grid'): Array<{ x: number; y: number }> {
+  const n = nodes.length
+  if (n === 0) return []
+  if (mode === 'ring') {
+    if (n === 1) return [{ x: VB_W / 2, y: VB_H / 2 }]
+    const cx = VB_W / 2
+    const cy = VB_H / 2
+    const r = Math.min(VB_W, VB_H) / 2 - 70
+    return nodes.map((_, i)=> {
+      const a = (Math.PI * 2 * i) / n - Math.PI / 2
+      return { x: cx + r * Math.cos(a), y: cy + r * Math.sin(a) }
+    })
+  }
+  // grid：按 sqrt(n) 列排
+  const cols = Math.max(1, Math.ceil(Math.sqrt(n)))
+  const rows = Math.ceil(n / cols)
+  const gw = VB_W - 160
+  const gh = VB_H - 140
+  return nodes.map((_, i)=> ({
+    x: 80 + (gw * (i % cols)) / Math.max(1, cols - 1),
+    y: 80 + (gh * Math.floor(i / cols)) / Math.max(1, rows - 1),
+  }))
+}
+
+export const RelationGraph: Component<RelationGraphProps> = (_init, _ctx)=> {
+  return (props)=> {
+    const {
+      nodes = [], edges = [], selectedId = null,
+      onSelect, onNodeClick, layout = 'ring',
+      width = '100%', height = '480px', showLegend = true,
+      nodeColors, edgeColors,
+    } = props
+    const pos = layoutNodes(nodes, layout)
+    const byId = new Map(nodes.map((n, i)=> [n.id, { node: n, ...pos[i] }]))
+    const viewBox = computeViewBox(nodes, pos)
+    const kinds = [...new Set(nodes.map((n)=> n.kind ?? 'default'))]
+    const types = [...new Set(edges.map((e)=> e.type ?? 'default'))]
+
+    const edgePaths = edges
+      .filter((e)=> byId.has(e.from) && byId.has(e.to))
+      .map((e)=> {
+        const a = byId.get(e.from)!
+        const b = byId.get(e.to)!
+        return {
+          e,
+          x1: a.x, y1: a.y, x2: b.x, y2: b.y,
+          color: colorOf(e.type ?? 'default', EDGE_PALETTE, edgeColors),
+          width: Math.min(5, Math.max(1, e.strength ?? 1.5)),
+          marker: e.directed ? 'url(#rg-arrow)' : undefined,
+        }
+      })
+
+    return h('div', { class: 'wf-rg' }, [
+      h('svg', {
+        class: 'wf-rg-canvas',
+        width, height,
+        viewBox,
+        role: 'img', // 语义容器（节点 title 子元素提供命名——WCAG img 命名机制）
+        preserveAspectRatio: 'xMidYMid meet',
+      }, [
+        // 有向箭头 marker
+        h('defs', {}, h('marker', { id: 'rg-arrow', viewBox: '0 0 10 10', refX: 22, refY: 5, markerWidth: 7, markerHeight: 7, orient: 'auto-start-reverse' }, h('path', { d: 'M 0 0 L 10 5 L 0 10 z', fill: '#94a3b8' }))),
+        // 边（底层）
+        ...edgePaths.map((p)=> h('line', {
+          key: `${p.e.from}-${p.e.to}-${p.e.type ?? ''}`,
+          x1: p.x1, y1: p.y1, x2: p.x2, y2: p.y2,
+          stroke: p.color,
+          'stroke-width': p.width,
+          marker: p.marker,
+          class: 'wf-rg-edge',
+          opacity: 0.75,
+          // **边不拦截点击（真实 bug——节点中心被爱情线遮挡——elementFromPoint
+          //  返回 line——g 的 onClick 不触发）**——pointer-events none 让点击
+          //  穿透到节点命中圈/空白
+          'pointer-events': 'none',
+        })),
+        // 节点（上层）
+        ...nodes.map((n)=> {
+          const p = byId.get(n.id)!
+          const r = radiusOf(n.weight)
+          const color = colorOf(n.kind ?? 'default', NODE_PALETTE, nodeColors)
+          const selected = n.id === selectedId
+          return h('g', {
+            key: n.id,
+            class: 'wf-rg-node' + (selected ? ' wf-rg-node--selected' : ''),
+            transform: `translate(${p.x}, ${p.y})`,
+            onClick: ()=> {
+              onSelect?.(n.id)
+              onNodeClick?.(n.id)
+            },
+          }, [
+            h('title', {}, `${n.label}${n.sublabel ? `（${n.sublabel}）` : ''}`),
+            // 透明命中圈（点击区域 = 节点 + 10px——标签/附近都可点——不随视觉缩放）
+            h('circle', { r: r + 10, fill: 'transparent', 'pointer-events': 'all' }),
+            h('circle', { r, fill: color, opacity: 0.18, stroke: color, 'stroke-width': selected ? 3 : 1.5 }),
+            h('text', { class: 'wf-rg-label', y: r + 16, 'text-anchor': 'middle' }, n.label),
+            n.sublabel ? h('text', { class: 'wf-rg-sublabel', y: r + 30, 'text-anchor': 'middle' }, n.sublabel) : null,
+          ])
+        }),
+      ]),
+      // 图例（kind + edge type）
+      showLegend && (kinds.length + types.length > 0) ? h('div', { class: 'wf-rg-legend' }, [
+        ...kinds.map((k)=> h('span', { class: 'wf-rg-legend-item' }, [
+          h('span', { class: 'wf-rg-swatch', style: { background: colorOf(k, NODE_PALETTE, nodeColors) } }),
+          k,
+        ])),
+        ...types.map((t)=> h('span', { class: 'wf-rg-legend-item' }, [
+          h('span', { class: 'wf-rg-line', style: { background: colorOf(t, EDGE_PALETTE, edgeColors) } }),
+          t,
+        ])),
+      ]) : null,
+    ])
+  }
+}

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

@@ -0,0 +1,51 @@
+/* weifuwu/client/components — Resizable */
+
+.wf-resizable {
+  display: flex;
+  font-family: var(--wf-font-sans);
+}
+
+.wf-resizable--horizontal {
+  flex-direction: row;
+}
+
+.wf-resizable--vertical {
+  flex-direction: column;
+}
+
+.wf-resizable-panel {
+  flex: 0 0 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+.wf-resizable-panel--fill {
+  flex: 1 1 0%;
+}
+
+.wf-resizable-handle {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: col-resize;
+  background: var(--wf-color-bg-secondary);
+  transition: background var(--wf-dur-fast) var(--wf-ease-out);
+}
+
+.wf-resizable--horizontal .wf-resizable-handle {
+  width: 6px;
+  cursor: col-resize;
+}
+
+.wf-resizable--vertical .wf-resizable-handle {
+  height: 6px;
+  cursor: row-resize;
+}
+
+.wf-resizable-handle:hover,
+.wf-resizable-handle:focus-visible {
+  background: var(--wf-color-primary);
+  outline: none;
+}