@xiaobuyu/nodesign 0.0.6 → 0.0.8

package/server/lib/sketch-array.js

@@ -0,0 +1,118 @@
+/**
+ * server/lib/sketch-array.js —— 阵列 / 环列 / 镜像 / 散布（2026-08-30 画图能力线刀④）
+ *
+ * 复杂图案大多是简单元素的规律重复，而**等距和对称恰是模型最不擅长的算术**
+ * （画一圈椅子 = 12 次三角函数）。这四个算子把规律归机器、元素归 agent：
+ *
+ *   repeat  {n, dx, dy}     沿直线摆 n 份（栅栏、窗、台阶）
+ *   ring    {n, cx, cy}     绕圆心转 n 份（圆桌椅子、钟面、花瓣）
+ *   mirror  {axis, at}      对称补一份（画半只蝴蝶得整只）
+ *   scatter {n, in:{…}}     区域内播撒 n 份、带大小抖动（星空、草地、碎石）
+ *
+ * 每一份都用**自己的种子**重生成笔迹 —— 抖动各不相同，看起来是手画了 n 遍，
+ * 不是图章盖了 n 下。scatter 的随机也是种子确定的：同一次调用重放结果一致。
+ */
+
+import { UNIT, transformD } from './sketch-layout.js';
+
+/** 与 sketch-layout 同款确定性随机（那边的没导出，够小就地一份） */
+function rng(seedStr) {
+  let h = 0x811c9dc5;
+  for (let i = 0; i < seedStr.length; i += 1) { h ^= seedStr.charCodeAt(i); h = Math.imul(h, 0x01000193) >>> 0; }
+  let a = h >>> 0;
+  return () => {
+    a = (a + 0x6D2B79F5) >>> 0;
+    let t = a;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+/** 把 {rect,d}（d 局部于 rect）过一个**绝对坐标**变换，返回重建包围盒后的 {rect,d} */
+function applyAbs(base, fn) {
+  let minX = Infinity; let minY = Infinity; let maxX = -Infinity; let maxY = -Infinity;
+  const dAbs = transformD(base.d, (p) => {
+    const q = fn({ x: base.rect.x + p.x, y: base.rect.y + p.y });
+    if (q.x < minX) minX = q.x; if (q.x > maxX) maxX = q.x;
+    if (q.y < minY) minY = q.y; if (q.y > maxY) maxY = q.y;
+    return q;
+  });
+  if (!Number.isFinite(minX)) return base;
+  const P = 6;   // 与全族同款 pad（抖动和线宽的呼吸位；不补的话镜像副本比本尊瘦一圈）
+  const d = transformD(dAbs, (p) => ({ x: p.x - minX + P, y: p.y - minY + P }));
+  return { rect: { x: Math.round(minX - P), y: Math.round(minY - P), w: Math.max(4, Math.round(maxX - minX + P * 2)), h: Math.max(4, Math.round(maxY - minY + P * 2)) }, d };
+}
+
+/**
+ * 展开一个形状的算子。
+ * @param s        入参形状（可能带 repeat/ring/mirror/scatter；坐标全是格）
+ * @param makeOne  (seedSuffix) => {rect, d}  重新生成一份本尊（各份各自的抖）
+ * @param key      形状名（副本叫 key-2, key-3…）
+ * @returns {Array<{key,rect,d}>} 或 { error }
+ */
+export function expandModifiers(s, makeOne, key) {
+  const mods = ['repeat', 'ring', 'mirror', 'scatter'].filter((k) => s[k]);
+  if (!mods.length) return [{ key, ...makeOne('') }];
+  if (mods.length > 1) return { error: `形状 ${key}：repeat/ring/mirror/scatter 一次只能挂一个` };
+  const out = [];
+  const push = (i, piece) => out.push({ key: i === 0 ? key : `${key}-${i + 1}`, ...piece });
+
+  if (s.repeat) {
+    const { n, dx = 0, dy = 0 } = s.repeat;
+    if (!dx && !dy) return { error: `形状 ${key}：repeat 要给步长 dx/dy（格）——步长 0 是 n 份叠在原地` };
+    for (let i = 0; i < n; i += 1) {
+      const b = makeOne(`:${i}`);
+      push(i, { rect: { ...b.rect, x: Math.round(b.rect.x + dx * UNIT * i), y: Math.round(b.rect.y + dy * UNIT * i) }, d: b.d });
+    }
+    return out;
+  }
+  if (s.ring) {
+    const { n, cx, cy, upright = false } = s.ring;
+    const C = { x: cx * UNIT, y: cy * UNIT };
+    for (let i = 0; i < n; i += 1) {
+      const th = (Math.PI * 2 * i) / n;
+      const cos = Math.cos(th); const sin = Math.sin(th);
+      const b = makeOne(`:${i}`);
+      if (i === 0) { push(i, b); continue; }
+      if (upright) {
+        // 不转身，只沿圆周换座（侧视图里有重力的东西：帐篷、篝火边的人）
+        const bc = { x: b.rect.x + b.rect.w / 2, y: b.rect.y + b.rect.h / 2 };
+        const nc = {
+          x: C.x + (bc.x - C.x) * cos - (bc.y - C.y) * sin,
+          y: C.y + (bc.x - C.x) * sin + (bc.y - C.y) * cos,
+        };
+        push(i, { rect: { ...b.rect, x: Math.round(nc.x - b.rect.w / 2), y: Math.round(nc.y - b.rect.h / 2) }, d: b.d });
+        continue;
+      }
+      push(i, applyAbs(b, (p) => ({
+        x: C.x + (p.x - C.x) * cos - (p.y - C.y) * sin,
+        y: C.y + (p.x - C.x) * sin + (p.y - C.y) * cos,
+      })));
+    }
+    return out;
+  }
+  if (s.mirror) {
+    const { axis, at } = s.mirror;
+    const ax = at * UNIT;
+    push(0, makeOne(''));
+    push(1, applyAbs(makeOne(':m'), (p) => (axis === 'x' ? { x: 2 * ax - p.x, y: p.y } : { x: p.x, y: 2 * ax - p.y })));
+    return out;
+  }
+  if (s.scatter) {
+    const { n } = s.scatter;
+    const zone = s.scatter.in;
+    const R = { x: zone.x * UNIT, y: zone.y * UNIT, w: zone.w * UNIT, h: zone.h * UNIT };
+    const rand = rng(`scatter:${key}:${n}`);
+    for (let i = 0; i < n; i += 1) {
+      const b = makeOne(`:${i}`);
+      const k = 0.7 + rand() * 0.45;                       // 大小抖动 0.7~1.15
+      const scaled = applyAbs(b, (p) => ({ x: b.rect.x + (p.x - b.rect.x) * k, y: b.rect.y + (p.y - b.rect.y) * k }));
+      const x = R.x + rand() * Math.max(1, R.w - scaled.rect.w);
+      const y = R.y + rand() * Math.max(1, R.h - scaled.rect.h);
+      push(i, { rect: { ...scaled.rect, x: Math.round(x), y: Math.round(y) }, d: scaled.d });
+    }
+    return out;
+  }
+  return [{ key, ...makeOne('') }];
+}

package/server/lib/sketch-hatch.js

@@ -0,0 +1,99 @@
+/**
+ * server/lib/sketch-hatch.js —— 排线填充（2026-08-30 画图能力线）
+ *
+ * 线稿世界里唯一体面的"上色"：45° 手排线。闭合轮廓 → 一组扫描线段（偶奇规则），
+ * 端点带一点抖 —— 像人一笔一笔排出来的，不是激光刻的。
+ *
+ * 只对**闭合轮廓**生效（Z 收尾的子路径）：往开放折线里灌填充没有定义良好的
+ * 内部，硬灌就是把问题藏起来 —— 调用方大声拒。
+ */
+
+const f1 = (n) => Math.round(n * 10) / 10;
+
+function rng(seedStr) {
+  let h = 0x811c9dc5;
+  for (let i = 0; i < seedStr.length; i += 1) { h ^= seedStr.charCodeAt(i); h = Math.imul(h, 0x01000193) >>> 0; }
+  let a = h >>> 0;
+  return () => {
+    a = (a + 0x6D2B79F5) >>> 0;
+    let t = a;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+/** 大写绝对 M/L/Q/C/Z → 多边形组（曲线采样 8 段；只收 Z 闭合的子路径） */
+export function flattenClosed(d) {
+  const tokens = String(d).match(/[MLQCZ]|-?\d*\.?\d+(?:[eE][-+]?\d+)?/g) || [];
+  const polys = [];
+  let pts = []; let i = 0; let closedAny = false;
+  const num = () => Number(tokens[i++]);
+  const flush = (closed) => { if (closed && pts.length >= 3) { polys.push(pts); closedAny = true; } pts = []; };
+  while (i < tokens.length) {
+    const t = tokens[i++];
+    if (t === 'M') { flush(false); pts = [{ x: num(), y: num() }]; continue; }
+    if (t === 'L') { pts.push({ x: num(), y: num() }); continue; }
+    if (t === 'Q' || t === 'C') {
+      const cps = t === 'Q' ? [{ x: num(), y: num() }] : [{ x: num(), y: num() }, { x: num(), y: num() }];
+      const end = { x: num(), y: num() };
+      const a = pts[pts.length - 1] || end;
+      for (let k = 1; k <= 8; k += 1) {
+        const u = k / 8;
+        let p;
+        if (t === 'Q') {
+          const v = 1 - u;
+          p = { x: v * v * a.x + 2 * v * u * cps[0].x + u * u * end.x, y: v * v * a.y + 2 * v * u * cps[0].y + u * u * end.y };
+        } else {
+          const v = 1 - u;
+          p = {
+            x: v ** 3 * a.x + 3 * v * v * u * cps[0].x + 3 * v * u * u * cps[1].x + u ** 3 * end.x,
+            y: v ** 3 * a.y + 3 * v * v * u * cps[0].y + 3 * v * u * u * cps[1].y + u ** 3 * end.y,
+          };
+        }
+        pts.push(p);
+      }
+      continue;
+    }
+    if (t === 'Z') { flush(true); continue; }
+  }
+  flush(false);
+  return { polys, closedAny };
+}
+
+/**
+ * 多边形组 → 45° 排线 d。偶奇规则（洞是真洞：月牙的内弧不会被排穿）。
+ * @returns {string} 空串 = 没有可填的面积
+ */
+export function hatchD(polys, seed = 'hatch', { spacing = 11, angle = Math.PI / 4 } = {}) {
+  if (!polys?.length) return '';
+  const cos = Math.cos(-angle); const sin = Math.sin(-angle);
+  const rot = polys.map((p) => p.map(({ x, y }) => ({ x: x * cos - y * sin, y: x * sin + y * cos })));
+  let minY = Infinity; let maxY = -Infinity;
+  for (const p of rot) for (const q of p) { if (q.y < minY) minY = q.y; if (q.y > maxY) maxY = q.y; }
+  if (!Number.isFinite(minY)) return '';
+  const rand = rng(seed);
+  const back = (x, y) => ({ x: x * Math.cos(angle) - y * Math.sin(angle), y: x * Math.sin(angle) + y * Math.cos(angle) });
+  const segs = [];
+  for (let y = minY + spacing * 0.6; y < maxY; y += spacing) {
+    const xs = [];
+    for (const p of rot) {
+      for (let k = 0; k < p.length; k += 1) {
+        const a = p[k]; const b = p[(k + 1) % p.length];
+        if ((a.y <= y && b.y > y) || (b.y <= y && a.y > y)) {
+          xs.push(a.x + ((y - a.y) / (b.y - a.y)) * (b.x - a.x));
+        }
+      }
+    }
+    xs.sort((m, n) => m - n);
+    for (let k = 0; k + 1 < xs.length; k += 2) {
+      if (xs[k + 1] - xs[k] < 3) continue;                     // 太窄的缝不排
+      const inset = 1.5;                                       // 别顶到轮廓线
+      const j = () => (rand() * 2 - 1) * 0.9;
+      const a = back(xs[k] + inset + j(), y + j());
+      const b = back(xs[k + 1] - inset + j(), y + j());
+      segs.push(`M ${f1(a.x)} ${f1(a.y)} L ${f1(b.x)} ${f1(b.y)}`);
+    }
+  }
+  return segs.join(' ');
+}

package/server/lib/sketch-layout.js

@@ -14,19 +14,24 @@
  * 全是纯函数；尺寸估算与 create-on-board 同一套公式。
  */
 
-export const UNIT = 24;            // 1 网格 = 24 世界像素
+import { UNIT, overlaps, bboxOf as rectBbox } from './rect.js';
+import { ZOOM_BASIS, ONE_SCREEN } from './screen.js';
+export { UNIT };                   // 兼容出口（真身在 rect.js）
 /**
- * 可读性规范（2026-08-23，用户定）：黑板上的字要在 80%~100% 缩放下清晰可读。
- * 手写/md 正文 16px 世界像素在 0.8 倍下是 12.8 屏幕像素 —— 这是底线，所以节点
- * 字号不低于 md；一张图的尺寸要能在 0.8 倍下整张进一个普通视口（1400×900 屏
- * ≈ 1750×1125 世界像素）。超过 SKETCH_MAX 直接拒：一张图说一件事，大了就拆。
+ * 可读性规范（2026-08-23，用户定；2026-08-29 纸范式改 0.75 基准）：黑板上的字要在
+ * 75%~100% 缩放下清晰可读。手写/md 正文 16px 世界像素在 0.75 倍下是 12 屏幕像素 ——
+ * 这是底线，所以节点字号不低于 md；一张图的尺寸要能在 0.75 倍下整张进一个普通视口。
+ * 超过 SKETCH_MAX 直接拒：一张图说一件事，大了就拆。
  */
-export const SKETCH_FIT = { w: 1700, h: 1100 };   // 推荐上限（0.8 倍一屏）
+export const SKETCH_FIT = ONE_SCREEN;   // 推荐上限 = 一屏（唯一基准在 lib/screen.js）
 export const SKETCH_MAX = { w: 2600, h: 1700 };   // 硬上限（再大就拆成两张）
 export const GAP = 16;             // 模板排布的节点间距
 const SIZE_PX = { sm: 13, md: 16, lg: 22, xl: 30 };
 
-/** 手写字身位估算（抄 create-on-board / 前端 handleCreateText 同款） */
+/** 字宽 em 估（CJK/全角 1em，其余 0.62em）—— plain/md 两分支共用 */
+const em2 = (l) => [...l].reduce((n, c) => n + (/[　-鿿＀-￯]/.test(c) ? 1 : 0.62), 0);
+
+/** 手写字身位估算（与前端 text-fonts.js estimateTextBox 同公式，parity 测试钉着） */
 export function textBox(t, sizeKey, { md = false, wUnits = null } = {}) {
   const px = SIZE_PX[sizeKey] || 16;
   if (md) {
@@ -52,11 +57,42 @@ export function textBox(t, sizeKey, { md = false, wUnits = null } = {}) {
     }
     return { w, h: Math.round(n * px * 1.6) + 8 + paras * 8 };
   }
-  const cols = wUnits ? Math.max(4, Math.floor((wUnits * UNIT) / (px * 1.05))) : Math.min(26, Math.max(6, t.length));
-  const lines = Math.ceil(t.length / cols) + (t.match(/\n/g)?.length || 0);
+  // plain 也按 em 估（2026-08-29 刀 3：原来按 t.length，CJK 全错 —— 与前端
+  // text-fonts.js estimateTextBox 同公式，parity 测试钉着，改一边看另一边）
+  const rows = String(t).split('\n');
+  const longest0 = Math.min(26, Math.max(4, ...rows.map(em2)));
+  const cols = wUnits ? Math.max(4, (wUnits * UNIT) / (px * 1.05)) : longest0;
+  const lines = rows.reduce((n, l) => n + Math.max(1, Math.ceil(em2(l) / cols)), 0);
   return { w: wUnits ? wUnits * UNIT : Math.round(cols * px * 1.05) + 12, h: Math.round(lines * px * 1.6) + 10 };
 }
 
+/**
+ * 一块地方大概能写多少字（2026-08-29 占位契约刀 D，站主点名「给 agent 一个
+ * 每个中英文字符占多大的参考」）。
+ *
+ * 公式就是 textBox 那一套的逆用，不是另立一把尺：CJK 记 1em、拉丁记 0.62em，
+ * 行高 = 字号×1.6。板书渲染字号恒定 16px（BoardObject 写死，不读 size 参数），
+ * 所以这里也钉 16。
+ *
+ * 为什么要有它：在这之前给 agent 的护栏**全是像素**（"硬上限 2600×1700"、
+ * "剩 ~412px 高"），而 agent 手里的东西是字。让它自己把字数换算成像素，等于
+ * 每次落笔前做一道它做不准的算术 —— 结果就是写完才发现装不下。
+ *
+ * @param {number} w 可写宽度（像素）
+ * @param {number} h 可写高度（像素）
+ * @returns {{lines:number, cjk:number, latin:number, perLine:number}}
+ *   lines=能排几行，perLine=一行几个汉字，cjk/latin=总字数（纯中文 / 纯拉丁）
+ */
+/** 一条板书的默认版心宽（18 格）—— 自动宽度那三档的上档，也是 prelude 教的列宽 */
+export const DEFAULT_CHALK_W = 18 * UNIT;
+
+export function capacityOf(w, h) {
+  const px = 16;
+  const perLine = Math.max(1, Math.floor((w - 12) / px));
+  const lines = Math.max(0, Math.floor((h - 8) / (px * 1.6)));
+  return { lines, perLine, cjk: lines * perLine, latin: Math.round(lines * perLine / 0.62) };
+}
+
 /* ── 确定性随机（与前端 board-bindings 同款 FNV + mulberry32）── */
 function hashSeed(s) {
   let h = 0x811c9dc5;
@@ -145,16 +181,146 @@ export function shapePath(kind, { w = 0, h = 0, to = null, d = null } = {}, seed
   return null;
 }
 
+
+/**
+ * 自由 path 的手绘化（2026-08-30 画图探针案）：别的图元都过 wobblySeg，唯独
+ * path 原文直通 —— 同一幅画里一半抖一半死直，风格劈叉。这里把 **L 段**换成
+ * 微抖折线（M/Q/C 原样保留：曲线本身已经"活"，再抖是画蛇添足；Z 换成抖回
+ * 起点的显式线段，SVG 的 Z 是死直线）。端点一个不动 —— agent 的几何意图神圣。
+ *
+ * @param {string} dIn  已换算成像素的绝对坐标 path（大写 M/L/Q/C/Z）
+ */
+export function roughFreePath(dIn, seed = 'freepath') {
+  const rand = rng(hashSeed(seed));
+  const tokens = String(dIn).match(/[MLQCZ]|-?\d*\.?\d+(?:[eE][-+]?\d+)?/g) || [];
+  let out = ''; let i = 0;
+  let cur = null; let start = null;
+  const num = () => Number(tokens[i++]);
+  while (i < tokens.length) {
+    const t = tokens[i++];
+    if (t === 'M') { cur = { x: num(), y: num() }; start = { ...cur }; out += `M ${f1(cur.x)} ${f1(cur.y)}`; continue; }
+    if (t === 'L') {
+      const p = { x: num(), y: num() };
+      out += cur ? wobblySeg(rand, cur, p) : ` L ${f1(p.x)} ${f1(p.y)}`;
+      cur = p; continue;
+    }
+    if (t === 'Q') { const c = { x: num(), y: num() }; const p = { x: num(), y: num() }; out += ` Q ${f1(c.x)} ${f1(c.y)} ${f1(p.x)} ${f1(p.y)}`; cur = p; continue; }
+    if (t === 'C') { const a = { x: num(), y: num() }; const b = { x: num(), y: num() }; const p = { x: num(), y: num() }; out += ` C ${f1(a.x)} ${f1(a.y)} ${f1(b.x)} ${f1(b.y)} ${f1(p.x)} ${f1(p.y)}`; cur = p; continue; }
+    if (t === 'Z') { if (cur && start) { out += wobblySeg(rand, cur, start); cur = { ...start }; } continue; }
+  }
+  return out.trim();
+}
+
+/**
+ * 逐坐标对变换一条 path（大写绝对 M/L/Q/C/Z）。旋转/镜像/缩放全走它 ——
+ * 数字成对喂给 fn，命令字原样保留。
+ */
+export function transformD(d, fn) {
+  const tokens = String(d).match(/[MLQCZ]|-?\d*\.?\d+(?:[eE][-+]?\d+)?/g) || [];
+  const out = [];
+  let i = 0;
+  while (i < tokens.length) {
+    const t = tokens[i];
+    if (/^[MLQCZ]$/.test(t)) { out.push(t); i += 1; continue; }
+    const p = fn({ x: Number(tokens[i]), y: Number(tokens[i + 1]) });
+    i += 2;
+    out.push(f1(p.x), f1(p.y));
+  }
+  return out.join(' ');
+}
+
 /**
  * 模板排布。nodes: [{ key, w, h, at?: {x,y}(网格) }] → Map key → {x,y}（局部像素）
  * - free：有 at 的按网格落，没 at 的排在 free 区域下面一列
  * - column / row / grid(cols) / mindmap（第一个是中心，其余环绕）
  */
-export function layoutNodes(nodes, { template = 'auto', cols = null } = {}) {
+/**
+ * 模板解析（08-27 抽出，write-on-board 与 layoutNodes 共用一份 auto 规则）。
+ * ⭐ auto 现在**认线**：图内边 ≥1 且节点 ≥3 → flow（按结构分层）。在这之前
+ * 布局引擎对 edges 全盲 —— 给了线也按 column/grid 堆，「摊一堆字」的机器根源。
+ */
+export function resolveTemplate(nodes, { template = 'auto', edges = [], column = false } = {}) {
+  /**
+   * 车道约束（2026-08-28 移动端第二轮）：手机/平板一律竖排一列，**连模型点名的
+   * 模板也盖掉**。
+   *
+   * ⭐ 这条是真会话逼出来的。模型收到「一件 ≤342 宽」之后**试了三次**：第一版
+   * flow 排成 549 宽被警告 → 它改传 `w:14` 想收窄节点，结果整体变成 **576，更宽**
+   * （节点是窄了，但 flow 把它们横着摊成一排）→ 只好 erase_group 重来、再手工
+   * 一件件 move 成一列。擦两次、多花七八个工具调用，才得到本该一次给它的东西。
+   *
+   * ⛔ 病根不是「模型不配合」，是**它够着的那根杠杆是坏的**：唯一能改宽度的入参
+   * 改的是单节点，而决定整体宽度的是布局模板，那个它没法按屏幕挑。所以约束下沉
+   * 到这儿 —— 布局引擎知道屏幕多宽，模型不需要知道。
+   */
+  if (column) return 'column';
+  if (template !== 'auto') return template;
+  if (nodes.some(n => n.at)) return 'free';
+  const keys = new Set(nodes.map(n => n.key));
+  const inner = edges.filter(e => keys.has(e.from) && keys.has(e.to) && e.from !== e.to);
+  if (inner.length && nodes.length >= 3) return 'flow';
+  return nodes.length <= 4 ? 'column' : 'grid';
+}
+
+/** 分层流式（Sugiyama 简版）：层号=最长入路径（模型画的图可能带环，深度截断兜住），
+ *  层内按父级平均横位排（减少交叉），每层居中。线因此顺着重力方向读。 */
+function layoutFlow(nodes, edges, pull = new Map()) {
+  const pos = new Map();
+  const idx = new Map(nodes.map((n, i) => [n.key, i]));
+  const level = new Map();
+  const depth = (k, seen) => {
+    if (level.has(k)) return level.get(k);
+    if (seen.has(k)) return 0;                       // 环：断在回边上
+    seen.add(k);
+    let best = 0;
+    for (const e of edges) if (e.to === k) best = Math.max(best, depth(e.from, seen) + 1);
+    seen.delete(k);
+    level.set(k, best);
+    return best;
+  };
+  for (const n of nodes) depth(n.key, new Set());
+  const layers = [];
+  for (const n of nodes) { const l = level.get(n.key) || 0; (layers[l] ||= []).push(n); }
+  const centerX = new Map();
+  let y = 0;
+  for (const layer of layers) {
+    if (!layer) continue;
+    const parentAvg = (k) => {
+      const ps = edges.filter(e => e.to === k && centerX.has(e.from)).map(e => centerX.get(e.from));
+      return ps.length ? ps.reduce((a, b) => a + b, 0) / ps.length : idx.get(k) * 10;
+    };
+    // 节点级拉力（08-27 产物锚 v2）：连着外部产物的节点排向产物那一侧。
+    // 外部锚是世界坐标、parentAvg 是局部坐标，不同尺度 —— 各自归一到 [0,1] 再比。
+    const norm = (vals) => {
+      const lo = Math.min(...vals); const hi = Math.max(...vals);
+      return (v) => (hi > lo ? (v - lo) / (hi - lo) : 0.5);
+    };
+    const pulled = layer.filter((n) => pull.has(n.key));
+    const nExt = pulled.length ? norm(pulled.map((n) => pull.get(n.key).x)) : null;
+    const paVals = layer.filter((n) => !pull.has(n.key)).map((n) => parentAvg(n.key));
+    const nPa = paVals.length ? norm(paVals) : null;
+    const score = (n) => (pull.has(n.key) ? nExt(pull.get(n.key).x) : (nPa ? nPa(parentAvg(n.key)) : 0.5));
+    layer.sort((a, b) => (score(a) - score(b)) || (idx.get(a.key) - idx.get(b.key)));
+    const totalW = layer.reduce((s, n) => s + n.w, 0) + (layer.length - 1) * (GAP * 2 + 8);
+    let x = Math.round(-totalW / 2);
+    let rowH = 0;
+    for (const n of layer) {
+      pos.set(n.key, { x, y });
+      centerX.set(n.key, x + n.w / 2);
+      x += n.w + GAP * 2 + 8; rowH = Math.max(rowH, n.h);
+    }
+    y += rowH + GAP * 3;                              // 层间留出画箭头的呼吸
+  }
+  return pos;
+}
+
+export function layoutNodes(nodes, { template = 'auto', cols = null, edges = [], pull = new Map(), pullOrigin = null } = {}) {
   const pos = new Map();
   if (!nodes.length) return pos;
-  let tpl = template;
-  if (tpl === 'auto') tpl = nodes.some(n => n.at) ? 'free' : (nodes.length <= 4 ? 'column' : 'grid');
+  const keys = new Set(nodes.map(n => n.key));
+  const inner = edges.filter(e => keys.has(e.from) && keys.has(e.to) && e.from !== e.to);
+  const tpl = resolveTemplate(nodes, { template, edges });
+  if (tpl === 'flow') return layoutFlow(nodes, inner, pull);
 
   if (tpl === 'free') {
     let bottom = 0;
@@ -180,7 +346,58 @@ export function layoutNodes(nodes, { template = 'auto', cols = null } = {}) {
     return pos;
   }
   if (tpl === 'mindmap') {
-    const [center, ...rest] = nodes;
+    // 枢纽按度数选、环序按 BFS 排（08-27）：在这之前中心=第一个节点、环上按入参
+    // 顺序 —— 结构全被扔掉，同父的孩子散在环两端，线横穿整张图
+    let order = nodes;
+    if (inner.length) {
+      const deg = new Map(nodes.map(n => [n.key, 0]));
+      const adj = new Map(nodes.map(n => [n.key, []]));
+      for (const e of inner) {
+        deg.set(e.from, deg.get(e.from) + 1); deg.set(e.to, deg.get(e.to) + 1);
+        adj.get(e.from).push(e.to); adj.get(e.to).push(e.from);
+      }
+      const hub = [...nodes].sort((a, b) => deg.get(b.key) - deg.get(a.key))[0];
+      const seen = new Set([hub.key]); const q = [hub.key]; const bfs = [];
+      while (q.length) {
+        const k = q.shift();
+        for (const nk of adj.get(k) || []) if (!seen.has(nk)) { seen.add(nk); bfs.push(nk); q.push(nk); }
+      }
+      const byKey = new Map(nodes.map(n => [n.key, n]));
+      order = [hub, ...bfs.map(k => byKey.get(k)), ...nodes.filter(n => !seen.has(n.key))];
+    }
+    let [center, ...rest] = order;
+    // 节点级拉力（08-27 产物锚 v2）：连着外部产物的叶子占朝着那个产物的环位 ——
+    // 立绘在上方，评它的节点就在环的上侧，线不再绕半圈。质心=全部外部锚的平均
+    // （图会落在它们旁边，质心是图心的够用近似）。
+    // 方位原点：pullOrigin = 图心的世界坐标（落位后由调用方二次布局传入 ——
+    // 环形 bbox 不随槽位变，二次布局不动落位）。没有它就退回锚质心；
+    // 锚全挤在一点时质心=锚本身、方向向量退化 → 放弃重排（bfs 序保底）。
+    let origin = pullOrigin;
+    if (!origin) {
+      const pts = [...pull.values()];
+      const cx0 = pts.reduce((s, p) => s + p.x, 0) / pts.length;
+      const cy0 = pts.reduce((s, p) => s + p.y, 0) / pts.length;
+      const spread = Math.max(...pts.map((p) => Math.hypot(p.x - cx0, p.y - cy0)));
+      origin = spread > 1 ? { x: cx0, y: cy0 } : null;
+    }
+    if (origin && pull.size && rest.some((n) => pull.has(n.key))) {
+      const slotAng = (i) => (i / rest.length) * Math.PI * 2 - Math.PI / 2;
+      const free = new Set(rest.map((_, i) => i));
+      const assigned = new Array(rest.length).fill(null);
+      const angDist = (a, b) => { const d = Math.abs(a - b) % (Math.PI * 2); return Math.min(d, Math.PI * 2 - d); };
+      for (const n of rest) {
+        if (!pull.has(n.key)) continue;
+        const p = pull.get(n.key);
+        const want = Math.atan2(p.y - origin.y, p.x - origin.x);
+        let best = null;
+        for (const i of free) if (best === null || angDist(slotAng(i), want) < angDist(slotAng(best), want)) best = i;
+        assigned[best] = n; free.delete(best);
+      }
+      const others = rest.filter((n) => !pull.has(n.key));
+      let j = 0;
+      for (const i of [...free].sort((a, b) => a - b)) { assigned[i] = others[j++]; }
+      rest = assigned;
+    }
     const cx = 0; const cy = 0;
     pos.set(center.key, { x: cx - center.w / 2, y: cy - center.h / 2 });
     if (!rest.length) return pos;
@@ -212,66 +429,49 @@ export function layoutNodes(nodes, { template = 'auto', cols = null } = {}) {
   return pos;
 }
 
-/** 一组矩形的包围盒 */
-export function bboxOf(rects) {
-  let x0 = Infinity; let y0 = Infinity; let x1 = -Infinity; let y1 = -Infinity;
-  for (const r of rects) {
-    x0 = Math.min(x0, r.x); y0 = Math.min(y0, r.y); x1 = Math.max(x1, r.x + r.w); y1 = Math.max(y1, r.y + r.h);
-  }
-  return Number.isFinite(x0) ? { x: x0, y: y0, w: x1 - x0, h: y1 - y0 } : { x: 0, y: 0, w: 0, h: 0 };
+/** 一组矩形的包围盒，空集回**零框**（写方直接解构 .x/.w）。真身在 rect.js（那边
+ *  空集 null）。08-28 从 bboxOf 改名 —— 同名两种空集语义在同一个调用文件里混用，
+ *  读代码必看错；名字把契约说出来，谁也不用再翻两处注释对齐。 */
+export function bboxOrZero(rects) {
+  return rectBbox(rects) || { x: 0, y: 0, w: 0, h: 0 };
 }
 
 /**
- * 宏观落位：在 obstacles（同层已摆的矩形）中给一块 w×h 找地方。
- * - near：锚右侧（撞了往下让），让不开就锚下方
- * - 否则：内容最低边下面（与入座"新东西排底下"同一条起排线精神）
- */
-export function findSpot({ w, h, near = null, obstacles = [], contentBottom = 0, viewport = null }) {
-  const hits = (x, y) => obstacles.some(o => !(x + w <= o.x || o.x + o.w <= x || y + h <= o.y || o.y + o.h <= y));
-  // 用户视口里有空地就落在视口里（黑板是主窗口时，画在他眼前而不是让他去找）。
-  // 阅读顺序纪律（08-23 真踩：第二张图落到第一张的**左边**）：先挑不在已有内容左侧/
-  // 上方的位置（顺着先左后右、先上后下长），实在没有才退而求其次。
-  if (!near && viewport && viewport.w >= w + 24 && viewport.h >= h + 24) {
-    const content = obstacles.length ? {
-      x: Math.min(...obstacles.map(o => o.x)), y: Math.min(...obstacles.map(o => o.y)),
-    } : null;
-    const sx = Math.max(24, Math.round(viewport.w / 8)); const sy = Math.max(24, Math.round(viewport.h / 8));
-    for (const strict of [true, false]) {
-      for (let y = viewport.y + 12; y + h <= viewport.y + viewport.h - 12; y += sy) {
-        for (let x = viewport.x + 12; x + w <= viewport.x + viewport.w - 12; x += sx) {
-          if (strict && content && (x < content.x - 24 || y < content.y - 24)) continue;
-          if (!hits(x, y)) return { x: Math.round(x), y: Math.round(y), side: 'viewport' };
-        }
-      }
-    }
-  }
-  if (near) {
-    let x = near.x + near.w + 32; let y = near.y;
-    for (let g = 0; g < 30; g += 1) {
-      if (!hits(x, y)) return { x: Math.round(x), y: Math.round(y), side: 'right' };
-      const blocker = obstacles.find(o => !(x + w <= o.x || o.x + o.w <= x || y + h <= o.y || o.y + o.h <= y));
-      y = blocker.y + blocker.h + GAP;
-    }
-    x = near.x; y = near.y + near.h + 32;
-    for (let g = 0; g < 30; g += 1) {
-      if (!hits(x, y)) return { x: Math.round(x), y: Math.round(y), side: 'below' };
-      const blocker = obstacles.find(o => !(x + w <= o.x || o.x + o.w <= x || y + h <= o.y || o.y + o.h <= y));
-      y = blocker.y + blocker.h + GAP;
-    }
-  }
-  // 排在内容底下：左边缘对齐已有内容（不是写死的 10），读起来像续在同一栏
-  const left = obstacles.length ? Math.min(...obstacles.map(o => o.x)) : 10;
-  return { x: Math.round(left), y: Math.round(contentBottom) + 40, side: 'bottom' };
-}
-
-/**
- * 按用户屏幕算「一屏」：视点里有相机矩形和缩放 → 屏幕像素 = 世界 × 缩放；
- * 0.8 倍可读 → 一屏世界像素 = 屏幕 / 0.8。没视点就用 SKETCH_FIT 的缺省。
+ * 按用户屏幕算「一屏」，并说清这台机器该拿哪一套版式（2026-08-28 移动端第二轮）。
+ *
+ * 屏幕像素：优先读上报的 `device.w/h`（浏览器直接量的），没有就退回
+ * 「相机矩形 × 缩放」（08-23 起就在这么算，缩放怎么变都得同一个数）。
+ *
+ * ## 两套版式
+ *
+ *   桌面   一屏世界像素 = 屏幕 / 0.75（纸范式基准，见 lib/screen.js —— 用户在
+ *          0.75 倍上读得动，所以内容可以比屏幕大一点）
+ *   触屏   **一件 = 一屏**：宽 = 屏宽 − 48（两边各留 24 呼吸），纵向单列
+ *
+ * ⭐ 触屏这条不是"把桌面的数按比例缩小"。桌面那 1.25 倍富余的前提是**用户会缩小
+ * 了看全貌再放大读细节**，而手机上缩小到 0.19 倍就什么都读不了（真板量的：1766x2018
+ * 的内容在 390 宽的屏上全内容 fit = 19%）。手机上唯一可用的姿势是一件占满一屏、
+ * 竖着翻，所以内容必须**按屏幕生产**，而不是生产完再想办法塞进去。
+ *
+ * ⚠️ 高度给到 1.6 屏而不是 1 屏：竖着滚是手机上读长内容的天然姿势，硬压到一屏
+ * 会逼出一堆"为了短而短"的碎块。宽度才是硬约束（横向滑动没人受得了）。
  */
 export function fitFor(vp) {
-  if (vp?.camera?.w && vp?.zoom) {
-    const sw = vp.camera.w * vp.zoom; const sh = vp.camera.h * vp.zoom;
-    return { w: Math.round(sw / 0.8), h: Math.round(sh / 0.8), screen: { w: Math.round(sw), h: Math.round(sh) } };
+  const cls = vp?.device?.class;
+  const lane = (cls === 'phone' || cls === 'tablet') ? cls : 'desktop';
+  let sw = Number(vp?.device?.w) || 0;
+  let sh = Number(vp?.device?.h) || 0;
+  if (!(sw > 0) && vp?.camera?.w && vp?.zoom) {
+    sw = vp.camera.w * vp.zoom; sh = vp.camera.h * vp.zoom;
+  }
+  if (!(sw > 0)) return { ...SKETCH_FIT, screen: null, lane, column: lane !== 'desktop' };
+  const screen = { w: Math.round(sw), h: Math.round(sh) };
+  if (lane === 'desktop') {
+    return { w: Math.round(sw / ZOOM_BASIS), h: Math.round(sh / ZOOM_BASIS), screen, lane, column: false };
   }
-  return { ...SKETCH_FIT, screen: null };
+  return {
+    w: Math.max(240, Math.round(sw - 48)),
+    h: Math.max(320, Math.round(sh * 1.6)),
+    screen, lane, column: true,
+  };
 }