中间画布：任意分屏布局

把中间区域从「标签页 + 最多两格分屏」升级成一块可以随意切分的画布：左右、上下、四宫格、九宫格、十六宫格，或者不规则的组合都可以。本页上半部分是可以直接上手操作的原型，下半部分是数据模型、交互规则和实施计划。

1. 目标与边界

• 任意数量、任意形状：格数不设硬上限，真正的限制是每格的最小尺寸（见 §4）。在 1440×900 的窗口里大约能放下 4×4。
• 任何内容都能进格子：会话（chat）、网页、终端、文件预览、程序视图，都是同一种「格子内容」。
• 布局就是一个 tab：多格画布在顶部 tab 栏里显示为一个布局 tab，上面画着格数徽标。原型里为了演示简化成「画布常驻，tab 栏放没进画布的内容」，真实产品里可以同时存在多个布局 tab，各自记住自己的切分方式。
• 不做的事：不做浮动或重叠的窗口（那是画中画 PiP 已经覆盖的场景），也不做跨窗口共享同一格。

2. 数据模型：n 叉切分树

布局用一棵树表示。叶子是格子（pane），中间节点是切分（split）。一个切分节点可以有任意多个子节点，每个子节点带一个比例值。这样九宫格就是「一个纵向切分，下面挂三个横向切分，每个横向切分再挂三格」，不需要二叉树那样层层嵌套。

type LayoutNode =
  | { kind: "pane";  id: PaneId; content: TabRef | null }        // null = 空格
  | { kind: "split"; id: string; dir: "row" | "col";
      children: LayoutNode[]; sizes: number[] };                 // sizes 之和为 1

type CanvasLayout = {
  root: LayoutNode;
  focusedPaneId: PaneId;
  zoomedPaneId?: PaneId;          // 放大某一格时其余格不卸载，只是隐藏
};

每次修改之后都要做一遍规范化，这样树永远保持最简形状：

• 只剩一个子节点的切分，用这个子节点替换掉它自己。
• 方向和父节点相同的切分，把它的子节点直接并进父节点，比例相乘。所以连续向右切三次得到的是一层三等分，而不是三层嵌套。
• 比例重新归一，并按最小尺寸夹紧。

这个模型取代现在 center-tab-groups.ts 里的 MAX_CENTER_TAB_GROUP_MEMBERS = 2 分组模型。旧的两格分组可以无损迁移：迁移后就是一个 row 切分下挂两个格子。

3. 交互规则

3.1 拖动 tab（原型已实现）

拖动的视觉效果：被拖的 tab 就是那个元素本身，用 transform 跟着鼠标走，离开 tab 栏以后照样跟着，原来的位置留出空位。它完全不透明，背景色是 color-mix(in srgb, 当前tab色 50%, bg-tertiary)，外加一圈细边和一层阴影。不再显示额外的蓝色「New window」提示条，落点的效果改由 drop 预览框直接表达。

3.2 格子本身

• 挪动：拖格子的标题栏，规则和拖 tab 相同。拖回 tab 栏就是把它移出画布。
• 调整大小：拖动缝隙只影响相邻的两格；按住 ⇧ 拖动则整行或整列一起按比例缩放（待定）。双击缝隙恢复等分。
• 放大：⌘⇧↩ 或双击标题栏，把当前格临时铺满画布，再按一次还原。其他格不卸载。
• 关闭格子：只关格子，不关里面的会话；内容回到 tab 栏。格子关掉后，它在树里的空间让给相邻的兄弟格。
• 空格：套用预设布局时，格数比内容多就会出现空格。空格里会列出 tab 栏的内容，点一下就能填进去。
• 焦点：同一时间只有一个格子获得焦点，键盘输入、⌘W 和右侧栏的上下文都跟着焦点格走。

3.3 预设布局

单屏、左右、上下、主 + 2、四宫格、九宫格、十六宫格。套用预设时，已经在画布里的内容按阅读顺序依次填进新格子；内容多出来就退回 tab 栏，格子多出来就留成空格。

4. 尺寸与性能约束

再往下压，就进入「迷你态」：格子只显示标题和类型，点一下就放大。原型里把宽度小于 150px 或高度小于 110px 的格子当作迷你态来演示。

5. 持久化

• 布局树序列化后跟窗口状态一起存（参见 window-state 设计），格子里只存 TabRef，不存内容本身。
• 重启后恢复布局；已经失效的 TabRef 变成空格，不让整个布局崩掉。
• 可以把当前布局存成命名预设（比如「研究：会话 + 3 个网页」），这项放到第三期再做。

6. 实施计划

7. 采用的交互约定

产品画布不显示常驻布局工具栏，也不预留工具栏高度。右键点击格子标题可使用预设、切分、等分和保存布局；拖放与快捷键直接可用。下方原型中的工具栏仅用于演示布局操作。

多格画布作为一个布局标签；同一内容只占一个格子；拖到格子中央替换内容，被替换的内容回到顶部标签栏。关闭最后一格后保留空布局，原内容仍在标签栏。

实现状态

代码实现：布局树与旧两格迁移、预设、空格选择内容、五向拖放与外沿插入、格子拖回标签栏、分隔线调整与双击等分、放大还原、快捷键、命名预设及窗口持久化。拖动时原标签保持不透明并跟随指针；原生网页显示截图，结束后恢复。最多同时显示 8 个原生网页视图，其余以截图显示，点击切换；这不终止后台网页进程。跨窗口传输包含布局树，并保留传输体积与结构限制。

渲染通过递归布局计算得到格子与分隔线坐标，内容宿主保持稳定，避免调整树结构时重新挂载文件编辑器、终端和会话。放大仅隐藏其他格子。