clay-server 5.3.0-beta.4 → 5.3.0-beta.6

package/lib/public/modules/split-view-drag-preview.js

@@ -0,0 +1,90 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { livePaneBinding, samePaneBinding } from './pane-binding.js';
+import { layoutScope, currentLayoutScope } from './split-view-layout-scope.js';
+import { presentationDropTree } from './split-view-presentation-drop.js';
+import { rectangles } from './split-view-layout-client.js';
+
+function activeView() {
+  return (store.get('projectSplitViews') || []).find(function (view) { return view.id === store.get('projectSplitViewActiveId'); });
+}
+function reducedMotion() { return window.matchMedia('(prefers-reduced-motion: reduce)').matches; }
+export function captureDragPreview(drag, host) {
+  var settling = store.get('projectSplitViewDragSettling');
+  if (settling && settling.timer) clearTimeout(settling.timer);
+  store.set({ projectSplitViewDragSettling: null });
+  var view = activeView();
+  drag.preview = { host: host, socket: getWs(), slug: store.get('currentSlug'), owner: store.get('myUserId'), projectOwner: store.get('currentProjectOwnerId'),
+    scope: view && layoutScope(view), width: host.clientWidth, height: host.clientHeight, tree: null,
+    panes: Array.from(host.querySelectorAll(':scope > .split-pane:not(.split-pane-cached)')).filter(function (pane) {
+      return !pane.hidden && pane.getBoundingClientRect().width > 0;
+    }).map(function (pane) {
+      var frame = pane.querySelector('.split-pane-frame'), live = frame && frame.clayPane && frame.clayPane.identity();
+      return { pane: pane, frame: frame, document: frame && frame.contentDocument, window: frame && frame.contentWindow,
+        binding: live && live.binding, rect: pane.getBoundingClientRect() };
+    }) };
+}
+export function dragPreviewCurrent(drag) {
+  var preview = drag.preview;
+  return !!preview && preview.socket === getWs() && preview.slug === store.get('currentSlug') && preview.owner === store.get('myUserId') &&
+    preview.projectOwner === store.get('currentProjectOwnerId') && store.get('connected') && !store.get('projectSplitViewDividerDrag') && (!preview.scope || currentLayoutScope(preview.scope)) &&
+    preview.width === preview.host.clientWidth && preview.height === preview.host.clientHeight && preview.panes.every(function (entry) {
+      var live = entry.frame && entry.frame.clayPane && entry.frame.clayPane.identity();
+      return entry.pane.isConnected && entry.frame.contentDocument === entry.document && entry.frame.contentWindow === entry.window &&
+        live && samePaneBinding(live.binding, entry.binding) && livePaneBinding(entry.frame);
+    });
+}
+// Hit-test the starting layout, never panes that are travelling under the hand.
+export function dragPreviewPaneAt(drag, x, y) {
+  var entries = drag && drag.preview && drag.preview.panes || [];
+  return entries.find(function (entry) {
+    var r = entry.rect; return x >= r.left && x <= r.right && y >= r.top && y <= r.bottom;
+  });
+}
+export function renderDragPreview(drag, target) {
+  var preview = drag.preview, view = activeView();
+  if (!preview || !view || !dragPreviewCurrent(drag)) return null;
+  var sourceView = (store.get('projectSplitViews') || []).find(function (item) { return item.id === drag.sourceViewId; });
+  var tree = target && !target.sidebar && target.viewId === view.id && sourceView && sourceView.id === view.id && !store.get('projectSplitViewFocusedOrigin') ?
+    presentationDropTree(drag, target, sourceView, view) : null;
+  if (JSON.stringify(tree) === JSON.stringify(preview.tree)) return preview.dropRect || null;
+  preview.tree = tree;
+  preview.host.classList.add('split-view-drag-preview');
+  store.set({ projectSplitViewPreviewTree: tree, projectSplitViewPreviewScope: preview.scope });
+  preview.dropRect = null;
+  if (tree) {
+    var style = window.getComputedStyle(preview.host), left = parseFloat(style.paddingLeft) || 0, top = parseFloat(style.paddingTop) || 0;
+    var geometry = rectangles(tree, preview.width - left - (parseFloat(style.paddingRight) || 0), preview.height - top - (parseFloat(style.paddingBottom) || 0), 7);
+    var rect = geometry.panes[drag.origin];
+    if (rect) preview.dropRect = { left: left + rect.x, top: top + rect.y, width: rect.width, height: rect.height };
+  }
+  return preview.dropRect;
+}
+function settleMotion() {
+  var settling = store.get('projectSplitViewDragSettling');
+  if (!settling || settling.timer || store.get('projectSplitViewDrag') || store.get('projectSplitViewPending')) return;
+  settling.timer = setTimeout(function () {
+    if (store.get('projectSplitViewDragSettling') !== settling) return;
+    settling.host.classList.remove('split-view-drag-preview');
+    store.set({ projectSplitViewDragSettling: null });
+  }, reducedMotion() ? 0 : 320);
+}
+export function restoreDragPreview(drag, keep) {
+  var preview = drag && drag.preview;
+  if (!preview) return;
+  if (!keep && preview.tree && store.get('projectSplitViewPreviewTree') === preview.tree) {
+    store.set({ projectSplitViewPreviewTree: null, projectSplitViewPreviewScope: null });
+  }
+  var previous = store.get('projectSplitViewDragSettling');
+  if (previous && previous.timer) clearTimeout(previous.timer);
+  store.set({ projectSplitViewDragSettling: { host: preview.host, timer: null } });
+  settleMotion();
+}
+// Preserve transcript anchors until animated width/height changes have settled.
+export function afterPaneMotion(host, callback) {
+  window.requestAnimationFrame(function () {
+    if (host.classList.contains('split-view-drag-preview') && !reducedMotion()) setTimeout(callback, 300);
+    else callback();
+  });
+}
+store.subscribe(function () { settleMotion(); });

package/lib/public/modules/split-view-layout-client.js

@@ -24,7 +24,7 @@ export function validateTree(tree, expectedIds) {
         !Number.isFinite(node.ratio) || node.ratio < MIN_RATIO || node.ratio > MAX_RATIO) return false;
     return walk(node.left, depth + 1) && walk(node.right, depth + 1);
   }
-  valid = walk(tree, 0) && ids.length >= 2 && ids.length <= MAX_SESSIONS && new Set(ids).size === ids.length;
+  valid = (tree === null || walk(tree, 0)) && ids.length >= 0 && ids.length <= MAX_SESSIONS && new Set(ids).size === ids.length;
   if (valid && expectedIds) {
     valid = Array.isArray(expectedIds) && expectedIds.length === ids.length &&
       expectedIds.every(function (id) { return ids.indexOf(id) !== -1; });

package/lib/public/modules/split-view-presentation-drag.js

@@ -1,6 +1,8 @@
 // Pointer drag controller for presentation views. Captured gestures are
 // source-bound by pointerId and always recompute the release target.
 import { store } from './store.js';
+import { livePaneBinding } from './pane-binding.js';
+import { captureDragPreview, dragPreviewCurrent, dragPreviewPaneAt, renderDragPreview, restoreDragPreview } from './split-view-drag-preview.js';
 import { getCachedSessions } from './sidebar-sessions.js';
 import { showToast } from './utils.js';
 import { currentFolderState, sendFolderOp } from './session-folders.js';
@@ -29,22 +31,28 @@ function validSession(session) {
 function legacyMember(session) { return !!session && session.sessionRole === "worker"; }
 
 function onPointerDown(event) {
-  if (event.button !== 0 || event.isPrimary === false || store.get('projectSplitViewDrag')) return;
+  if (event.button !== 0 || event.isPrimary === false || store.get('projectSplitViewDrag') || store.get('projectSplitViewPending')) return;
   if (!event.target || !event.target.closest) return;
   var paneHeader = event.target.closest(".split-pane-header");
   var row = event.target.closest(".session-item[data-session-id], .session-loop-child[data-session-id]");
   if (!paneHeader && !row) return;
+  var workspace = store.get('toolPaneWindowGeometry');
+  if (paneHeader && workspace && workspace.windows.some(function (entry) { return !!entry.tool; })) return;
+  if (paneHeader && event.target.closest(".split-pane-title, .split-view-runtime, .split-worker-runtime")) return;
   var button = event.target.closest("button");
   if ((paneHeader && button) || (button && button !== row) || event.target.closest("a, input, textarea, select, [contenteditable='true'], .workbench, .split-view-menu, .split-view-arrange, .session-row-actions, .session-close-btn, .session-more-btn")) return;
   var pane = paneHeader && paneHeader.closest('.split-pane');
+  if (pane && !livePaneBinding(pane.querySelector('.split-pane-frame'))) return;
   var id = pane ? Number(pane.dataset.sessionId) : row ? Number(row.dataset.sessionId) : 0;
   var source = sessionById(id);
   if (!validSession(source) || legacyMember(source)) return;
   var group = row && row.closest('.split-view-group[data-split-view-id]');
   var view = viewForOrigin(source.sessionOriginId);
-  store.set({ projectSplitViewDrag: { pointerId: event.pointerId, sessionId: source.id, origin: source.sessionOriginId,
+  var drag = { pointerId: event.pointerId, sessionId: source.id, origin: source.sessionOriginId,
     sourceViewId: group ? group.dataset.splitViewId : view && view.id || null, sourceElement: row || paneHeader, startX: event.clientX, startY: event.clientY,
-    moved: false, target: null, pointerType: event.pointerType, frames: [] } });
+    moved: false, target: null, pointerType: event.pointerType, frames: [] };
+  captureDragPreview(drag, host);
+  store.set({ projectSplitViewDrag: drag });
 }
 
 function targetAt(x, y) {
@@ -59,6 +67,8 @@ function targetAt(x, y) {
   }
   var sidebar = sidebarTargetAt(element);
   if (sidebar) return sidebar;
+  var snapshot = dragPreviewPaneAt(store.get('projectSplitViewDrag'), x, y);
+  if (snapshot) return paneTargetAt(snapshot.pane, x, y, snapshot.rect);
   var pane = element.closest('.split-pane');
   if (!pane || !host.contains(pane) || !pane.isConnected) return null;
   return paneTargetAt(pane, x, y);
@@ -81,11 +91,11 @@ function sidebarTargetAt(element) {
     rect: { left: bounds.left, top: bounds.top, width: bounds.width, height: bounds.height } };
 }
 
-function paneTargetAt(pane, x, y) {
+function paneTargetAt(pane, x, y, originalBounds) {
   var id = Number(pane.dataset.sessionId), session = sessionById(id), frame = pane.querySelector('.split-pane-frame');
   if (!validSession(session) || legacyMember(session) || !frame || frame.dataset.projectSlug !== store.get('currentSlug') ||
       frame.dataset.sessionId !== String(id) || frame.dataset.sessionOriginId !== session.sessionOriginId) return null;
-  var bounds = pane.getBoundingClientRect(), dx = (x - bounds.left) / Math.max(1, bounds.width), dy = (y - bounds.top) / Math.max(1, bounds.height);
+  var bounds = originalBounds || pane.getBoundingClientRect(), dx = (x - bounds.left) / Math.max(1, bounds.width), dy = (y - bounds.top) / Math.max(1, bounds.height);
   var edge = Math.min(dx, 1 - dx, dy, 1 - dy), side = "center";
   if (edge < 0.25) side = edge === dx ? "left" : edge === 1 - dx ? "right" : edge === dy ? "top" : "bottom";
   var view = viewForOrigin(session.sessionOriginId);
@@ -102,12 +112,13 @@ function fallbackTargetAt(x, y) {
     var panes = Array.from(host.querySelectorAll(':scope > .split-pane')), nearest = null, nearestDistance = Infinity;
     panes.forEach(function (pane) {
       if (pane.hidden) return;
-      var rect = pane.getBoundingClientRect(), dx = x < rect.left ? rect.left - x : x > rect.right ? x - rect.right : 0;
+      var snapshot = store.get('projectSplitViewDrag'), entry = snapshot && snapshot.preview && snapshot.preview.panes.find(function (item) { return item.pane === pane; });
+      var rect = entry ? entry.rect : pane.getBoundingClientRect(), dx = x < rect.left ? rect.left - x : x > rect.right ? x - rect.right : 0;
       var dy = y < rect.top ? rect.top - y : y > rect.bottom ? y - rect.bottom : 0;
       var distance = dx * dx + dy * dy;
       if (distance < nearestDistance) { nearest = pane; nearestDistance = distance; }
     });
-    if (nearest) return paneTargetAt(nearest, x, y);
+    if (nearest) { var entry = store.get('projectSplitViewDrag').preview.panes.find(function (item) { return item.pane === nearest; }); return paneTargetAt(nearest, x, y, entry && entry.rect); }
   }
   if (!inApp) return null;
   var active = sessionById(Number(store.get('activeSessionId')));
@@ -123,9 +134,12 @@ function resolveTarget(x, y) { return targetAt(x, y) || fallbackTargetAt(x, y);
 function onPointerMove(event) {
   var drag = store.get('projectSplitViewDrag');
   if (!drag || drag.pointerId !== event.pointerId) return;
+  if (!dragPreviewCurrent(drag)) { cleanup(true, true); return; }
   if (!drag.moved && Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY) < 6) return;
   if (!drag.moved) {
     drag.moved = true;
+    var source = drag.preview.panes.find(function (entry) { return entry.binding && entry.binding.sessionOriginId === drag.origin; });
+    if (source) { drag.sourcePane = source.pane; source.pane.classList.add('split-pane-drag-source'); }
     try { document.documentElement.setPointerCapture(event.pointerId); } catch (error) {}
     drag.frames = Array.from(host.querySelectorAll('.split-pane-frame')).map(function (frame) { return { frame: frame, pointerEvents: frame.style.pointerEvents }; });
     drag.frames.forEach(function (entry) { entry.frame.style.pointerEvents = "none"; });
@@ -138,6 +152,7 @@ function onPointerMove(event) {
 
 function renderPreview(drag, x, y) {
   clearSidebarPreview();
+  var plannedRect = renderDragPreview(drag, drag.target);
   var preview = host.querySelector(':scope > .split-view-drop-preview'), ghost = document.getElementById("split-view-drag-ghost");
   if (!ghost) { ghost = document.createElement("div"); ghost.id = "split-view-drag-ghost"; ghost.className = "split-view-drag-ghost"; ghost.hidden = true; document.body.appendChild(ghost); }
   if (!preview) {
@@ -188,9 +203,10 @@ function renderPreview(drag, x, y) {
   var hostRect = host.getBoundingClientRect();
   preview.style.left = (box.left - hostRect.left) + "px"; preview.style.top = (box.top - hostRect.top) + "px";
   preview.style.width = box.width + "px"; preview.style.height = box.height + "px";
+  if (plannedRect) { preview.style.left = plannedRect.left + "px"; preview.style.top = plannedRect.top + "px"; preview.style.width = plannedRect.width + "px"; preview.style.height = plannedRect.height + "px"; }
   preview.dataset.blocked = blocked ? "true" : "false"; preview.hidden = false;
   var label = preview.querySelector(".drop-label");
-  if (label) label.textContent = blocked ? "Eight sessions already open" : drag.origin === target.origin ? "Keep this pane" :
+  if (label) label.textContent = blocked ? (drag.origin === target.origin ? "Keep this pane" : "Eight sessions already open") : drag.origin === target.origin ? "Keep this pane" :
     target.side === "center" ? (sourceView && targetView && sourceView.id === targetView.id ? "Swap panes" : "Split right") : "Split " + target.side;
 }
 
@@ -199,8 +215,10 @@ function clearSidebarPreview() {
   document.querySelectorAll('[data-split-view-drop]').forEach(function (element) { delete element.dataset.splitViewDrop; });
 }
 
-export function restorePresentationDrag(drag) {
+export function restorePresentationDrag(drag, keepPreview) {
   if (!drag) return;
+  if (drag.sourcePane) drag.sourcePane.classList.remove('split-pane-drag-source');
+  restoreDragPreview(drag, keepPreview);
   clearSidebarPreview();
   drag.frames.forEach(function (entry) { if (entry.frame.isConnected) entry.frame.style.pointerEvents = entry.pointerEvents; });
   var preview = host.querySelector(':scope > .split-view-drop-preview'); if (preview) preview.hidden = true;
@@ -215,23 +233,24 @@ export function restorePresentationDrag(drag) {
   }
 }
 
-function cleanup(release, suppressClick) {
+function cleanup(release, suppressClick, keepPreview) {
   var drag = store.get('projectSplitViewDrag');
   if (!drag) return;
-  restorePresentationDrag(drag);
+  restorePresentationDrag(drag, keepPreview);
   if (suppressClick && drag.moved) {
     var token = { pointerId: drag.pointerId, sourceElement: drag.sourceElement, sourceSessionId: drag.sessionId,
       targetOrigin: drag.target && drag.target.origin, until: Date.now() + 250 };
     store.set({ projectSplitViewSuppressClick: token });
     setTimeout(function () { if (store.get('projectSplitViewSuppressClick') === token) store.set({ projectSplitViewSuppressClick: null }); }, 500);
   }
-  if (release) try { if (document.documentElement.hasPointerCapture(drag.pointerId)) document.documentElement.releasePointerCapture(drag.pointerId); } catch (error) {}
   store.set({ projectSplitViewDrag: null });
+  if (release) try { if (document.documentElement.hasPointerCapture(drag.pointerId)) document.documentElement.releasePointerCapture(drag.pointerId); } catch (error) {}
 }
 
 function onPointerUp(event) {
   var drag = store.get('projectSplitViewDrag');
   if (!drag || drag.pointerId !== event.pointerId) return;
+  if (!dragPreviewCurrent(drag)) { cleanup(true, true); return; }
   if (!drag.moved) { cleanup(true, false); return; }
   var target = resolveTarget(event.clientX, event.clientY);
   drag.target = target;
@@ -239,6 +258,11 @@ function onPointerUp(event) {
       (store.get('projectSplitViews') || []).some(function (view) { return view.id === target.viewId && view.sessions.length >= 8; })) {
     cleanup(true, true); showToast("Eight sessions are already open. Close a pane to add another.", "warn"); return;
   }
+  if (target && !target.folderId && drag.origin !== target.origin && commitDrop) {
+    renderDragPreview(drag, target);
+    var queued = commitDrop(drag, target);
+    cleanup(true, true, queued === true); return;
+  }
   cleanup(true, true);
   if (target && target.folderId) {
     var session = sessionById(drag.sessionId);
@@ -249,7 +273,6 @@ function onPointerUp(event) {
     else sendFolderOp(favorite ? { op: 'set_favorite', sessionId: session.id, favorite: true } : { op: 'place_session', sessionId: session.id, folderId: folderId });
     return;
   }
-  if (target && drag.origin !== target.origin && commitDrop) commitDrop(drag, target);
 }
 
 function onPointerCancel(event) {

package/lib/public/modules/split-view-presentation-drop.js

@@ -5,13 +5,25 @@ import { checkComposerDeparture } from './session-rich-drafts.js';
 import { showToast } from './utils.js';
 import { listIds, place, swap, pairTree } from './split-view-layout-client.js';
 
+// Preview and persistence must resolve the same tree for every drop region.
+export function presentationDropTree(drag, target, sourceView, targetView) {
+  if (!target || target.folderId || drag.origin === target.origin) return null;
+  var sameView = sourceView && targetView && sourceView.id === targetView.id;
+  if (target.sidebar && sameView) return null;
+  var side = target.side === "center" ? (sameView ? "center" : "right") : target.side;
+  if (!targetView) return pairTree(target.origin, drag.origin, side);
+  var result = side === "center" ? swap(targetView.tree, drag.origin, target.origin) : place(targetView.tree, drag.origin, target.origin, side, 0.5);
+  return result.ok ? result.tree : null;
+}
+
 export function applyPresentationDrop(drag, target, mutation, checkMountedPaneDrafts) {
   var views = store.get('projectSplitViews') || [], sourceView = views.find(function (view) { return view.id === drag.sourceViewId; }), targetView = views.find(function (view) { return view.id === target.viewId; });
   var sessions = getCachedSessions() || [], sourceSession = exactDriverForOrigin(drag.origin, sessions), targetSession = exactDriverForOrigin(target.origin, sessions);
   if (!sourceSession || !targetSession || sourceSession.id !== drag.sessionId) return;
   var sameView = sourceView && targetView && sourceView.id === targetView.id;
   if (target.sidebar && sameView) return;
-  var side = target.side === "center" ? (sameView ? "center" : "right") : target.side;
+  var plannedTree = presentationDropTree(drag, target, sourceView, targetView);
+  if (!plannedTree) return false;
   function checkDeparture() {
     try {
       if (sourceView && sourceView.id === store.get('projectSplitViewActiveId')) checkMountedPaneDrafts();
@@ -22,36 +34,27 @@ export function applyPresentationDrop(drag, target, mutation, checkMountedPaneDr
   if (!targetView) {
     if (sourceView) {
       if (!checkDeparture()) return;
-      var newTree = pairTree(target.origin, drag.origin, side);
-      mutation("project_split_view_move", { sourceViewId: sourceView.id, sourceSessionOriginId: drag.origin,
+      var newTree = plannedTree;
+      return mutation("project_split_view_move", { sourceViewId: sourceView.id, sourceSessionOriginId: drag.origin,
         targetSessionOriginId: target.origin, targetSessionOrigins: listIds(newTree), tree: newTree, layout: "balanced",
         activeSessionOriginId: target.origin, name: "Split view" }, { activateCreatedView: true });
     } else {
       if (!checkDeparture()) return;
-      var createdTree = pairTree(target.origin, drag.origin, side);
-      mutation("project_split_view_create", { name: "Split view", sessionOrigins: listIds(createdTree), tree: createdTree,
+      var createdTree = plannedTree;
+      return mutation("project_split_view_create", { name: "Split view", sessionOrigins: listIds(createdTree), tree: createdTree,
         layout: "balanced", activeSessionOriginId: target.origin }, { activateCreatedView: true });
     }
-    return;
   }
   if (sourceView && targetView.id !== sourceView.id) {
     if (targetView.sessions.length >= 8) { showToast("Eight sessions are already open. Close a pane to add another.", "warn"); return; }
-    var movedTree = place(targetView.tree, drag.origin, target.origin, side, 0.5);
-    if (!movedTree.ok) return;
-    mutation("project_split_view_move", { sourceViewId: sourceView.id, sourceSessionOriginId: drag.origin,
+    var movedTree = { tree: plannedTree };
+    return mutation("project_split_view_move", { sourceViewId: sourceView.id, sourceSessionOriginId: drag.origin,
       targetViewId: targetView.id, targetSessionOrigins: listIds(movedTree.tree), tree: movedTree.tree,
       layout: targetView.layout, activeSessionOriginId: targetView.activeSessionOriginId }, target.sidebar ? { activateCreatedView: true, createdViewId: targetView.id } : null);
-    return;
-  }
-  var nextTree;
-  if (side === "center" && sourceView) nextTree = swap(targetView.tree, drag.origin, target.origin).tree;
-  else {
-    var placed = place(targetView.tree, drag.origin, target.origin, side, 0.5);
-    if (!placed.ok) return;
-    nextTree = placed.tree;
   }
+  var nextTree = plannedTree;
   var origins = listIds(nextTree);
   if (origins.length > 8) { showToast("Eight sessions are already open. Close a pane to add another.", "warn"); return; }
-  mutation("project_split_view_update", { id: targetView.id, sessionOrigins: origins, tree: nextTree,
+  return mutation("project_split_view_update", { id: targetView.id, sessionOrigins: origins, tree: nextTree,
     layout: targetView.layout, activeSessionOriginId: targetView.activeSessionOriginId }, target.sidebar ? { activateCreatedView: true, createdViewId: targetView.id } : null);
 }

package/lib/public/modules/split-view-presentation-renderer.js

@@ -1,3 +1,6 @@
+import { paintLegacyToolPanes, clearToolPaneWindows } from './tool-pane-legacy.js';
+import { toolPaneLayoutTree, paintToolPaneWindows, bindWorkspaceDivider, dockedToolPanes } from './tool-pane-layout.js';
+import { afterPaneMotion } from './split-view-drag-preview.js';
 import { layoutScope, currentLayoutScope, presentationTree } from './split-view-layout-scope.js';
 // Flat, stable pane presentation for persisted binary trees. Geometry is
 // applied to existing direct-child .split-pane nodes; iframes are never moved
@@ -41,7 +44,6 @@ function relocateStickyStatus(enabled) {
     });
   }
 }
-
 function dispatch(name, detail) {
   document.dispatchEvent(new CustomEvent(name, { detail: detail }));
 }
@@ -84,6 +86,7 @@ export function hidePresentationView() {
   delete host.dataset.positioned;
   delete host.dataset.singlePane;
   if (!legacySplit) {
+    clearToolPaneWindows();
     host.classList.remove("visible");
     if (app) app.classList.remove("split-native-hidden");
   }
@@ -98,7 +101,7 @@ export function hidePresentationView() {
   if (legacySplit) {
     Array.from(host.querySelectorAll(':scope > .split-view-divider, :scope > .split-view-drop-preview')).forEach(function (item) { item.remove(); });
     Array.from(host.querySelectorAll('.split-view-arrange-trigger')).forEach(function (trigger) { trigger.remove(); });
-    closePresentationArrange(false);
+    closePresentationArrange(false); paintLegacyToolPanes(host);
     return;
   }
   var frames = host.querySelectorAll('.split-pane-frame');
@@ -169,8 +172,9 @@ function currentSingletonGeometry() {
 }
 
 function renderCurrentGeometry() {
+  if (paintLegacyToolPanes(host)) return;
   var view = currentView(), tree = activeTree();
-  if (view && tree) { applyGeometry(view, tree); return; }
+  if (view && (tree || !view.sessions.length)) { applyGeometry(view, tree); return; }
   var singleton = currentSingletonGeometry();
   if (singleton) applyGeometry(singleton.view, { id: singleton.origin }, function () {
     var current = currentSingletonGeometry();
@@ -211,12 +215,14 @@ function applyGeometry(view, tree, stillCurrent) {
   });
   var style = window.getComputedStyle(host), left = parseFloat(style.paddingLeft) || 0, top = parseFloat(style.paddingTop) || 0;
   var right = parseFloat(style.paddingRight) || 0, bottom = parseFloat(style.paddingBottom) || 0;
-  var geometry = rectangles(tree, Math.max(0, host.clientWidth - left - right), Math.max(0, host.clientHeight - top - bottom), 7);
+  var windowTree = toolPaneLayoutTree(view, tree);
+  var geometry = rectangles(windowTree, Math.max(0, host.clientWidth - left - right), Math.max(0, host.clientHeight - top - bottom), 7);
+  paintToolPaneWindows(host, view, tree, windowTree, geometry, { left: left, top: top });
   var focused = store.get('projectSplitViewFocusedOrigin');
   var panes = host.querySelectorAll(':scope > .split-pane');
   for (var i = 0; i < panes.length; i++) {
     var frame = panes[i].querySelector('.split-pane-frame'), origin = panes[i].dataset.presentationOrigin || frame && frame.dataset.sessionOriginId;
-    var rect = host.dataset.singlePane === 'true' && panes.length === 1 ?
+    var rect = host.dataset.singlePane === 'true' && panes.length === 1 && !dockedToolPanes().length ?
       { x: 0, y: 0, width: Math.max(0, host.clientWidth - left - right), height: Math.max(0, host.clientHeight - top - bottom) } : geometry.panes[origin];
     if (!rect) continue;
     if (focused && geometry.panes[focused]) {
@@ -241,11 +247,12 @@ function applyGeometry(view, tree, stillCurrent) {
     divider.setAttribute("aria-label", "Resize Split view panels");
     divider.style.left = (left + entry.rect.x) + "px"; divider.style.top = (top + entry.rect.y) + "px";
     divider.style.width = entry.rect.width + "px"; divider.style.height = entry.rect.height + "px";
-    bindDivider(divider, entry, tree, listIds(tree), scope); host.appendChild(divider);
+    if (dockedToolPanes().length) bindWorkspaceDivider(divider, entry, windowTree);
+    else bindDivider(divider, entry, tree, listIds(tree), scope); host.appendChild(divider);
     if (focusedDividerPath && divider.dataset.path === focusedDividerPath) divider.focus();
   }
   ensureDropPreview();
-  window.requestAnimationFrame(function () {
+  afterPaneMotion(host, function () {
     if (resizeToken !== 'split-view-layout-' + geometryToken || (stillCurrent ? !stillCurrent() : !currentLayoutScope(scope))) return;
     resizeFrames.forEach(function (item) {
       var live = item.frame.clayPane && item.frame.clayPane.identity();
@@ -254,13 +261,11 @@ function applyGeometry(view, tree, stillCurrent) {
     });
   });
 }
-
 function bindingMatches(left, right) {
   return !!left && !!right && left.sessionId === right.sessionId && left.sessionOriginId === right.sessionOriginId &&
     left.generation === right.generation && left.requestId === right.requestId;
 }
-
-function ensureArrangeTrigger(header) {
+export function ensureArrangeTrigger(header) {
   if (!header) return;
   if (!header.querySelector('[data-action="arrange"]')) {
     var trigger = document.createElement("button"); trigger.type = "button"; trigger.className = "split-view-arrange-trigger";

package/lib/public/modules/split-view-presentations.js

@@ -1,3 +1,9 @@
+import { workspaceChanged } from './view-workspace-state.js';
+import { restoreViewPair } from './view-pair-presentation.js';
+import { repaintLegacySplit } from './split-view.js';
+import { validWorkspaceView } from './view-workspace-validation.js';
+import { mutation } from './view-mutations.js';
+import { initSavedWorkspace } from './view-workspace-controller.js';
 import { preserveReconnectingPresentation } from './split-pane-retention.js';
 import { layoutScope, currentLayoutScope, presentationTree } from './split-view-layout-scope.js';
 import { validPresentationClose } from './split-view-presentation-close.js';
@@ -99,7 +105,7 @@ export function handleProjectSplitViews(msg) {
   var invalidView = false;
   msg.views.forEach(function (view) {
     var ids = view && Array.isArray(view.sessions) ? view.sessions.map(function (session) { return session.sessionOriginId; }) : [];
-    if (ids.length < 2 || ids.length > 8 || viewSessions(view).length !== ids.length || !validateTree(view.tree, ids).ok) invalidView = true;
+    if (ids.length > 8 || viewSessions(view).length !== ids.length || !validateTree(view.tree, ids).ok || !validWorkspaceView(view)) invalidView = true;
     else nextViews.push(view);
   });
   if (invalidView) {
@@ -115,7 +121,7 @@ export function handleProjectSplitViews(msg) {
   if (state.projectSplitViewDrag || state.projectSplitViewDividerDrag) cleanupTransientInteractions(state);
   var activeId = state.projectSplitViewActiveId;
   if (!viewExists(nextViews, activeId)) {
-    var restored = restorablePresentation(state, nextViews, getCachedSessions());
+    var restored = nextViews.find(function (view) { return view.id === msg.activeViewId && !view.sessions.length; }) || restorablePresentation(state, nextViews, getCachedSessions());
     if (restored) activeId = restored.id;
   }
   var removedActive = activeId && !viewExists(nextViews, activeId) ? activeId : null;
@@ -126,7 +132,7 @@ export function handleProjectSplitViews(msg) {
     var survivor = exactDriverForOrigin(completedPending.meta.activeOrigin, getCachedSessions());
     if (survivor) standaloneTarget = { id: survivor.id, origin: survivor.sessionOriginId, previousSessionId: state.activeSessionId, contextKey: contextKey(state) };
   }
-  store.set({ projectSplitViews: nextViews, projectSplitViewRevision: msg.revision, projectSplitViewHydrated: true,
+  store.set({ projectSplitViews: nextViews, projectSplitViewRevision: msg.revision, projectSplitViewSavedActiveId: msg.activeViewId || null, projectSplitViewHydrated: true,
     projectSplitViewError: msg.error || "", projectSplitViewStandaloneTarget: standaloneTarget, projectSplitViewActiveId: viewExists(nextViews, activeId) ? activeId : null,
     projectSplitViewFocusedOrigin: viewExists(nextViews, activeId) ? state.projectSplitViewFocusedOrigin : null,
     projectSplitViewPending: readyPending, projectSplitViewPreviewTree: readyPending ? state.projectSplitViewPreviewTree : null,
@@ -182,22 +188,6 @@ export function organizePresentationView(id, revision, folderId, favorite) {
   if (!view || view.revision !== revision) return false;
   return mutation('project_split_view_organize', { id: id, expectedViewRevision: revision, projectSlug: store.get('currentSlug'), folderId: folderId, favorite: favorite });
 }
-function mutation(type, body, meta) {
-  var state = store.snap();
-  if (!projectReady(state) || !state.projectSplitViewHydrated || state.projectSplitViewError || state.projectSplitViewPending) return false;
-  var requestId = "split-view-" + Date.now().toString(36) + "-" + Math.random().toString(36).slice(2, 10);
-  var ws = getWs();
-  var message = Object.assign({ type: type, requestId: requestId, expectedRevision: state.projectSplitViewRevision }, body || {});
-  var pending = { requestId: requestId, type: type, socket: ws, contextKey: contextKey(state), expectedRevision: state.projectSplitViewRevision, meta: meta || null,
-    awaitingBroadcast: false, resultRevision: null };
-  store.set({ projectSplitViewPending: pending, projectSplitViewError: "" });
-  if (!sendMessage(message)) {
-    store.set({ projectSplitViewPending: null, projectSplitViewError: "Split view change could not be sent. Refresh before trying again." });
-    showToast("Split view change could not be sent. Refresh before trying again.", "error");
-    return false;
-  }
-  return true;
-}
 export function setActiveView(id, preferredOrigin) {
   var state = store.snap(), view = viewExists(state.projectSplitViews, id);
   if (!view) return false;
@@ -235,6 +225,7 @@ export function switchToStandalone(sessionId) {
   return true;
 }
 function renderActive() {
+  if (store.get('splitPanes')) { repaintLegacySplit(); return; }
   if (!host || !nativeApp || preserveReconnectingPresentation(host)) return;
   var state = store.snap(), view = viewExists(state.projectSplitViews, state.projectSplitViewActiveId);
   if (state.splitIdentityBlockedSocket === getWs()) { hidePresentationView(); return; }
@@ -246,9 +237,11 @@ function renderActive() {
     }
     var singleton = currentSingletonPresentation(state, getCachedSessions());
     if (singleton) {
-      store.set({ projectSplitViewSingletonOrigin: singleton.origin });
-      if (stickyContainer && mainPanels) mainPanels.appendChild(stickyContainer);
-      renderPresentationView(singleton.view, { id: singleton.origin }, [singleton.session]);
+      if (state.projectSplitViewHydrated && !state.projectSplitViewPending && !state.projectSplitViewError) mutation("project_split_view_create", { name: "View", sessionOrigins: [singleton.origin], tree: { id: singleton.origin }, layout: "balanced", activeSessionOriginId: singleton.origin }, { activateCreatedView: true });
+      return;
+    }
+    if (state.projectSplitViewHydrated && projectReady(state) && !(getCachedSessions() || []).length && !state.projectSplitViewPending && !state.projectSplitViewError) {
+      mutation('project_split_view_create', { name: 'View', sessionOrigins: [], tree: null, layout: 'balanced', activeSessionOriginId: null }, { activateCreatedView: true });
       return;
     }
     if (state.projectSplitViewSingletonOrigin) store.set({ projectSplitViewSingletonOrigin: null });
@@ -257,10 +250,11 @@ function renderActive() {
     return;
   }
   if (state.projectSplitViewSingletonOrigin) store.set({ projectSplitViewSingletonOrigin: null });
+  if (restoreViewPair(view)) return;
   var sessions = viewSessions(view);
   var tree = presentationTree(view);
   var ids = listIds(tree);
-  if (sessions.length !== view.sessions.length || ids.length < 2 || ids.length > 8 || !validateTree(tree, ids).ok) return;
+  if (sessions.length !== view.sessions.length || ids.length > 8 || !validateTree(tree, ids).ok) return;
   if (stickyContainer && mainPanels) mainPanels.appendChild(stickyContainer);
   renderPresentationView(view, tree, sessions);
 }
@@ -424,14 +418,9 @@ function onClosePane(event) {
   if (!session || !view.sessions.some(function (item) { return item.sessionOriginId === session.sessionOriginId; })) return;
   try { checkMountedPaneDrafts(); } catch (error) { showToast(error.message, "warn"); return; }
   var origins = view.sessions.map(function (item) { return item.sessionOriginId; }).filter(function (origin) { return origin !== session.sessionOriginId; });
-  if (origins.length < 2) {
-    var remaining = view.sessions.filter(function (item) { return item.sessionOriginId !== session.sessionOriginId; })[0];
-    if (remaining) mutation("project_split_view_separate", { id: view.id }, { separateViewId: view.id, activeOrigin: remaining.sessionOriginId });
-    return;
-  }
   var nextTree = remove(view.tree, session.sessionOriginId);
-  if (!nextTree || !validateTree(nextTree, origins).ok) return;
-  var nextActive = view.activeSessionOriginId === session.sessionOriginId ? origins[0] : view.activeSessionOriginId;
+  if (!validateTree(nextTree, origins).ok) return;
+  var nextActive = view.activeSessionOriginId === session.sessionOriginId ? origins[0] || null : view.activeSessionOriginId;
   mutation("project_split_view_update", { id: view.id, sessionOrigins: origins, tree: nextTree,
     layout: view.layout, activeSessionOriginId: nextActive }, { closedOrigin: session.sessionOriginId, activeOrigin: nextActive });
 }
@@ -442,13 +431,15 @@ function onFocus(event) {
   if (event.detail && event.detail.focused && !source) return;
   store.set({ projectSplitViewFocusedOrigin: event.detail && event.detail.focused ? source.sessionOriginId : null });
   renderActive();
+  if (!store.get('savedWorkspaceApplying')) workspaceChanged();
 }
 function init(hostElement) {
   host = hostElement; nativeApp = document.getElementById("app"); mainPanels = document.getElementById("main-panels");
   stickyContainer = document.getElementById("sticky-notes-container");
   if (stickyContainer) { stickyHome = stickyContainer.parentNode; stickyAnchor = stickyContainer.nextSibling; }
   initPresentationRenderer(host);
-  initPresentationDrag(host, function (drag, target) { applyPresentationDrop(drag, target, mutation, checkMountedPaneDrafts); });
+  initSavedWorkspace();
+  initPresentationDrag(host, function (drag, target) { return applyPresentationDrop(drag, target, mutation, checkMountedPaneDrafts); });
   initSplitViewCreateMenu();
   document.addEventListener('clay-split-view-create', function (event) { handleSplitViewCreateEvent(event, mutation, checkMountedPaneDrafts); });
   document.addEventListener("click", onClick, true);
@@ -476,7 +467,7 @@ function init(hostElement) {
         state.paneBindingSessions !== previous.paneBindingSessions || state.sessionActivatedProjectSlug !== previous.sessionActivatedProjectSlug) renderActive();
     if (state.activeSessionId !== previous.activeSessionId && state.projectSplitViewActiveId) {
       var activeView = viewExists(state.projectSplitViews, state.projectSplitViewActiveId);
-      if (activeView && !activeView.sessions.some(function (session) { return session.id === state.activeSessionId; })) {
+      if (activeView && activeView.sessions.length && !activeView.sessions.some(function (session) { return session.id === state.activeSessionId; })) {
         store.set({ projectSplitViewActiveId: null, projectSplitViewPreviewTree: null });
       }
     }
@@ -493,6 +484,7 @@ export function applyReviewedSplitView(target) {
   var view = viewExists(store.get('projectSplitViews'), target.view.id);
   if (!projectReady(store.snap()) || store.get('projectSplitViewPending') || !view || JSON.stringify(view) !== JSON.stringify(target.view)) return false;
   if (!setActiveView(view.id, view.activeSessionOriginId)) return false;
-  onFocus({ detail: { focused: !!target.focusOrigin, sessionOriginId: target.focusOrigin } });
+  store.set({ savedWorkspaceApplying: true });
+  try { onFocus({ detail: { focused: !!target.focusOrigin, sessionOriginId: target.focusOrigin } }); } finally { store.set({ savedWorkspaceApplying: false }); }
   return true;
 }