weifuwu 0.66.0 → 0.67.0

package/dist/components/style.css

@@ -91,6 +91,13 @@
   --wf-z-sticky: 40;
   --wf-z-overlay: 80;
   --wf-z-modal: 100;
+  --wf-z-tour: 2000;
+  --wf-tour-min-width: 240px;
+  --wf-kanban-col-min-width: 200px;
+  --wf-kanban-col-max-width: 300px;
+  --wf-treeselect-min-width: 200px;
+  --wf-treeselect-max-width: 320px;
+  --wf-treeselect-dropdown-max-height: 260px;
   --wf-z-popover: 120; /* dropdown/select/datepicker 面板与 popover 同层 */
   --wf-z-toast: 140;
   --wf-z-tooltip: 160;
@@ -3417,6 +3424,104 @@ code {
 .wf-descriptions--sm .wf-descriptions-value { font-size: var(--wf-font-size-xs); }
 .wf-descriptions--lg .wf-descriptions-value { font-size: var(--wf-font-size-base); }
 
+.wf-diffview {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--wf-color-border);
+  border-radius: var(--wf-radius-md);
+  overflow: hidden;
+  background: var(--wf-color-bg);
+  font-family: var(--wf-font-mono, 'SFMono-Regular', Consolas, monospace);
+  font-size: 13px;
+  line-height: 1.6;
+  min-width: 0;
+}
+
+/* ── header ── */
+.wf-diffview-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--wf-color-fill);
+  border-bottom: 1px solid var(--wf-color-border);
+  font-size: 12px;
+  flex-shrink: 0;
+}
+.wf-diffview-title--old {
+  color: var(--wf-color-danger-text);
+}
+.wf-diffview-title--new {
+  color: var(--wf-color-success-text);
+}
+.wf-diffview-arrow {
+  color: var(--wf-color-text-tertiary);
+}
+
+/* ── body ── */
+.wf-diffview-body {
+  overflow: auto;
+  max-height: 480px;
+  padding: 8px 0;
+}
+
+.wf-diffview-row {
+  display: flex;
+  gap: 8px;
+  padding: 0 12px;
+  white-space: pre;
+}
+.wf-diffview-sign {
+  width: 14px;
+  flex-shrink: 0;
+  user-select: none;
+  color: var(--wf-color-text-tertiary);
+}
+.wf-diffview-line {
+  min-width: 0;
+  overflow: visible;
+}
+
+.wf-diffview-row--add {
+  background: var(--wf-color-success-bg, rgba(0, 128, 0, 0.08));
+}
+.wf-diffview-row--add .wf-diffview-sign {
+  color: var(--wf-color-success-text);
+}
+.wf-diffview-row--remove {
+  background: var(--wf-color-danger-bg, rgba(255, 0, 0, 0.06));
+}
+.wf-diffview-row--remove .wf-diffview-sign {
+  color: var(--wf-color-danger-text);
+}
+
+/* ── 折叠块 ── */
+.wf-diffview-fold {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 2px 12px;
+  padding: 4px 8px;
+  border: 1px dashed var(--wf-color-border);
+  border-radius: var(--wf-radius-sm);
+  color: var(--wf-color-text-secondary);
+  font-size: 12px;
+  cursor: pointer;
+  background: var(--wf-color-bg-subtle, var(--wf-color-fill));
+  user-select: none;
+  min-height: 28px;
+}
+.wf-diffview-fold:hover {
+  background: var(--wf-color-fill);
+}
+
+.wf-diffview-overflow {
+  padding: 8px 12px;
+  color: var(--wf-color-text-tertiary);
+  font-size: 12px;
+  text-align: center;
+}
+
 /* weifuwu/components — Divider */
 
 .wf-divider {
@@ -4742,6 +4847,93 @@ code {
   }
 }
 
+.wf-kanban {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  overflow-x: auto;
+  padding: 4px;
+}
+
+.wf-kanban-col {
+  flex: 1 1 220px;
+  min-width: var(--wf-kanban-col-min-width);
+  max-width: var(--wf-kanban-col-max-width);
+  background: var(--wf-color-bg-subtle, var(--wf-color-fill));
+  border-radius: var(--wf-radius-md);
+  border: 1px solid var(--wf-color-border);
+  display: flex;
+  flex-direction: column;
+  transition: border-color var(--wf-dur-fast) var(--wf-ease-out);
+}
+.wf-kanban-col:hover {
+  border-color: var(--wf-color-primary);
+  border-style: dashed;
+}
+
+.wf-kanban-col-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  font-weight: 600;
+  font-size: 13px;
+}
+.wf-kanban-col-count {
+  font-size: 12px;
+  color: var(--wf-color-text-tertiary);
+  background: var(--wf-color-fill);
+  border-radius: 50%;
+  padding: 1px 8px;
+}
+
+.wf-kanban-col-body {
+  padding: 0 8px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 40px;
+}
+
+.wf-kanban-card {
+  background: var(--wf-color-bg);
+  border: 1px solid var(--wf-color-border);
+  border-radius: var(--wf-radius-sm);
+  padding: 10px 12px;
+  cursor: grab;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: border-color var(--wf-dur-fast) var(--wf-ease-out), transform var(--wf-dur-fast) var(--wf-ease-out);
+}
+.wf-kanban-card:hover {
+  border-color: var(--wf-color-primary);
+}
+.wf-kanban-card:active {
+  cursor: grabbing;
+}
+.wf-kanban-card:hover {
+  border-color: var(--wf-color-primary);
+}
+.wf-kanban-card[aria-grabbed='true'] {
+  opacity: 0.4;
+}
+
+.wf-kanban-card-title {
+  font-size: 13px;
+  line-height: 1.5;
+  min-width: 0;
+}
+
+.wf-kanban-tag {
+  font-size: 11px;
+  color: var(--wf-color-primary-text);
+  background: var(--wf-color-primary-bg, rgba(79, 110, 247, 0.12));
+  border-radius: var(--wf-radius-xs);
+  padding: 1px 6px;
+  flex-shrink: 0;
+}
+
 /* weifuwu/components — Label（与 Input/Field 的 label 样式同源） */
 
 .wf-label {
@@ -5731,6 +5923,77 @@ code {
 .wf-pin-input--sm .wf-pin-input-cell { font-size: var(--wf-font-size-base); width: 2.4em; height: 2.4em; }
 .wf-pin-input--lg .wf-pin-input-cell { font-size: var(--wf-font-size-2xl); width: 2.8em; height: 2.8em; }
 
+.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: 8px 14px;
+  min-width: 72px;
+  max-width: 120px;
+  text-align: center;
+  background: var(--wf-color-bg);
+  border: 1px solid var(--wf-color-border);
+  border-radius: var(--wf-radius-md);
+  font-size: 13px;
+  font-weight: 500;
+  pointer-events: auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-shadow: var(--wf-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
+}
+
+.wf-pipeline-node--success {
+  border-color: var(--wf-color-success-text);
+  color: var(--wf-color-success-text);
+  background: var(--wf-color-success-bg, rgba(20, 83, 45, 0.06));
+}
+.wf-pipeline-node--running {
+  border-color: var(--wf-color-primary);
+  color: var(--wf-color-primary-text);
+  background: var(--wf-color-primary-bg, rgba(79, 110, 247, 0.08));
+}
+.wf-pipeline-node--error {
+  border-color: var(--wf-color-danger-text);
+  color: var(--wf-color-danger-text);
+  background: var(--wf-color-danger-bg, rgba(255, 0, 0, 0.06));
+}
+.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: 12px;
+  color: var(--wf-color-warning-text);
+}
+
 /* weifuwu/components — Popover */
 
 .wf-popover-wrap {
@@ -6532,6 +6795,12 @@ code {
   text-align: center;
 }
 
+.wf-sparkline {
+  display: inline-block;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+
 /* weifuwu/components — StatCard */
 
 .wf-stat {
@@ -7522,6 +7791,99 @@ code {
   to   { opacity: 1; }
 }
 
+.wf-tour-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--wf-z-tour);
+  outline: none;
+}
+
+.wf-tour-mask {
+  position: absolute;
+  inset: 0;
+  background: var(--wf-overlay);
+}
+
+.wf-tour-highlight {
+  position: fixed;
+  border-radius: var(--wf-radius-sm);
+  box-shadow: 0 0 0 9999px var(--wf-overlay), 0 0 0 2px var(--wf-color-primary);
+  z-index: 1;
+  pointer-events: none;
+  transition: all var(--wf-dur-fast) var(--wf-ease-out);
+}
+
+.wf-tour-bubble {
+  position: fixed;
+  z-index: 1; /* 同层 DOM 顺序裁决（bubble 在 highlight 后 = 最上） */
+  min-width: var(--wf-tour-min-width);
+  max-width: 360px;
+  background: var(--wf-color-bg);
+  border: 1px solid var(--wf-color-border);
+  border-radius: var(--wf-radius-md);
+  box-shadow: var(--wf-shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.12));
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.wf-tour-bubble-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.wf-tour-title {
+  font-weight: 600;
+  font-size: 14px;
+}
+.wf-tour-step {
+  font-size: 12px;
+  color: var(--wf-color-text-tertiary);
+  flex-shrink: 0;
+}
+
+.wf-tour-content {
+  font-size: 13px;
+  color: var(--wf-color-text-secondary);
+  line-height: 1.6;
+}
+
+.wf-tour-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.wf-tour-btn {
+  min-height: 32px;
+  padding: 0 14px;
+  border-radius: var(--wf-radius-sm);
+  border: 1px solid var(--wf-color-border);
+  background: var(--wf-color-bg);
+  color: var(--wf-color-text);
+  font-size: 13px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.wf-tour-btn--primary {
+  background: var(--wf-color-primary);
+  border-color: var(--wf-color-primary);
+  color: var(--wf-color-on-brand);
+}
+.wf-tour-btn--ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--wf-color-text-secondary);
+}
+.wf-tour-btn:hover {
+  filter: brightness(0.95);
+}
+
 /* weifuwu/components — Transfer */
 
 .wf-transfer {
@@ -7803,6 +8165,71 @@ code {
   white-space: nowrap;
 }
 
+.wf-treeselect {
+  position: relative;
+  display: inline-block;
+  min-width: var(--wf-treeselect-min-width);
+  max-width: var(--wf-treeselect-max-width);
+}
+
+.wf-treeselect-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 7px 12px;
+  border: 1px solid var(--wf-color-border);
+  border-radius: var(--wf-radius-sm);
+  background: var(--wf-color-bg);
+  cursor: pointer;
+  min-height: 36px;
+  user-select: none;
+}
+.wf-treeselect-trigger:hover {
+  border-color: var(--wf-color-primary);
+}
+.wf-treeselect-trigger--open {
+  border-color: var(--wf-color-primary);
+  box-shadow: 0 0 0 2px var(--wf-color-primary-bg, rgba(79, 110, 247, 0.15));
+}
+
+.wf-treeselect-placeholder {
+  color: var(--wf-color-text-tertiary);
+  font-size: 13px;
+}
+.wf-treeselect-label {
+  font-size: 13px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wf-treeselect-arrow {
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 5px solid var(--wf-color-text-tertiary);
+  transition: transform var(--wf-dur-fast) var(--wf-ease-out);
+  flex-shrink: 0;
+}
+.wf-treeselect-arrow--open {
+  transform: rotate(180deg);
+}
+
+.wf-treeselect-dropdown {
+  /* position: fixed + top/left/width 由 JS（usePopupPosition）提供 */
+  z-index: var(--wf-z-popover);
+  background: var(--wf-color-bg);
+  border: 1px solid var(--wf-color-border);
+  border-radius: var(--wf-radius-md);
+  box-shadow: var(--wf-shadow-md, 0 4px 16px rgba(0, 0, 0, 0.1));
+  padding: 4px;
+  max-height: var(--wf-treeselect-dropdown-max-height);
+  overflow: auto;
+}
+
 /* weifuwu/components — Typography */
 
 .wf-title {

package/dist/index.js

@@ -4371,7 +4371,7 @@ function createSsrContext(serverCtx, dataStore) {
     },
     useDrag: () => ({ onPointerDown: () => {
     } }),
-    useDragDrop: () => ({ dropProps: {} }),
+    useDragDrop: () => ({ dropProps: {}, dragProps: {} }),
     useControlled: (options) => ({
       value: options.value,
       setValue: (v) => {
@@ -4439,6 +4439,8 @@ function createSsrContext(serverCtx, dataStore) {
     execCommand: () => false,
     selectionText: () => null,
     getSelection: () => null,
+    queryCommandState: () => false,
+    queryCommandValue: () => "",
     viewportHeight: () => 0,
     scrollTop: () => 0,
     hash: () => "",

package/dist/layout/weifuwu-layout.css

@@ -91,6 +91,13 @@
   --wf-z-sticky: 40;
   --wf-z-overlay: 80;
   --wf-z-modal: 100;
+  --wf-z-tour: 2000;
+  --wf-tour-min-width: 240px;
+  --wf-kanban-col-min-width: 200px;
+  --wf-kanban-col-max-width: 300px;
+  --wf-treeselect-min-width: 200px;
+  --wf-treeselect-max-width: 320px;
+  --wf-treeselect-dropdown-max-height: 260px;
   --wf-z-popover: 120; /* dropdown/select/datepicker 面板与 popover 同层 */
   --wf-z-toast: 140;
   --wf-z-tooltip: 160;

package/docs/components-map.md

@@ -155,3 +155,20 @@
 | **JSONViewer** | 新增 | 递归折叠 + 类型色 + 路径复制 + 懒展开（ToolCallCard 已接入） |
 
 > 三库共识覆盖度 ~100%（剩余均为已声明裁剪项，见 `design/components-roadmap.md` 第六批裁剪清单）。
+
+## 第七批：AI 开发者工具深化（96 → 102 组件）
+
+> 追平期结束（三库共识 ~100%），差异化期——本批全部组件三库没有的直接等价物。
+
+| 组件 | 类型 | 要点 |
+|------|------|------|
+| **DiffView** | 新增 | LCS 行级 diff（自研算法）：三态行 + 未变块折叠 + maxLines 防超大 |
+| **Sparkline** | 新增 | 迷你趋势线：SVG 自绘 + 归一化 + 平滑曲线 + 面积填充 + 等值防抖 |
+| **Tour** | 新增 | 新手引导：目标高亮（rect 精确跟随）+ 遮罩 + 步骤气泡 + 全局 Escape |
+| **Kanban** | 新增 | 拖拽看板：原生 DnD + 跨列/重排 + 悬停高亮 + 受控纪律 |
+| **Pipeline** | 新增 | Agent 工作流 DAG：Kahn 拓扑分层 + 贝塞尔连线 + 状态语义色 + 环检测 |
+| **TreeSelect** | 新增 | 树形选择：单选/多选（父子联动）+ label 回显 + 受控纪律 |
+
+> AI 开发者工具链成型：AiChat / Command / JSONViewer / LogViewer / DiffView /
+> Pipeline——三库差异化最深的完整工具线。
+> 裁剪声明见 `design/components-roadmap.md` 第七批。

package/docs/custom-components.md

@@ -228,6 +228,9 @@ const MyComp: Component = (_init, ctx) => {
 ```
 
 **规则**：
+- 拖拽统一 `ctx.ui.useDragDrop`（drop 侧 dropProps + drag 侧 dragProps：draggable/
+  onDragStart/onDragEnd）——**dragstart 期间禁止重渲染**（渲染替换源元素中断拖拽；
+  身份/位置在渲染期闭包绑定，拖拽视觉高亮用 CSS :hover）
 - 复制统一 `browser.copyText`（clipboard + 降级——勿自建 textarea+execCommand）
 - 键盘导航用 `browser.activeElement()`（勿 document.activeElement）
 - 存储用 `browser.storageGet/Set`（勿 localStorage 裸调）

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "weifuwu",
   "type": "module",
-  "version": "0.66.0",
+  "version": "0.67.0",
   "description": "AI SaaS framework — (req, ctx) => Response",
   "exports": {
     ".": {