clay-server 5.2.1-beta.2 → 5.3.0-beta.2

package/lib/public/modules/split-pane-retention.js

@@ -0,0 +1,157 @@
+import { getWs } from './ws-ref.js';
+import { store } from './store.js';
+import { getCachedSessions } from './sidebar-sessions.js';
+import { paneTarget, samePaneTarget } from './pane-binding.js';
+
+// DOM resources are local to this parent document, never store data.
+var pools = new Map();
+var clock = 0;
+function scope(state) {
+  if (!state.authIdentityLoaded || state.paneMode || state.dmMode || state.activeProjectMateId ||
+      !state.currentSlug || /^mate-/.test(state.currentSlug) || state.activeProjectSlug && state.activeProjectSlug !== state.currentSlug ||
+      state.sessionListProjectSlug && state.sessionListProjectSlug !== state.currentSlug) return null;
+  return JSON.stringify([state.currentSlug, state.currentProjectOwnerId, state.myUserId, state.controlRuntimeId, state.cwd,
+    state.isOsUsers, state.paneOsIdentity]);
+}
+function target(state, id) {
+  var session = (getCachedSessions() || []).find(function (item) { return item.id === id; });
+  if (!session || session.hidden || session.isTui || session.sessionRole === 'worker' || (session.ownerId || null) !== (state.myUserId || null)) return null;
+  return paneTarget(state, getCachedSessions(), id);
+}
+// Conversation identity controls teardown; execution-group metadata controls
+// warm reuse and action authority, not the lifetime of a visible Driver DOM.
+function sameConversation(a, b) {
+  return !!a && !!b && ['projectSlug', 'viewerId', 'ownerId', 'sessionId', 'sessionOriginId',
+    'role', 'workerGeneration', 'parentSessionOriginId'].every(function (key) { return a[key] === b[key]; });
+}
+function suspend(node) {
+  var frame = node.querySelector('.split-pane-frame'), header = node.querySelector('.split-pane-header');
+  if (header) { header.inert = true; header.dispatchEvent(new Event('clay-pane-retarget')); }
+  if (frame) {
+    if (frame.clayPane) frame.clayPane.suspend();
+    frame.dispatchEvent(new Event('clay-pane-retarget'));
+  }
+}
+function evict(pool, node) {
+  pool.entries.delete(node);
+  if (node.dispatchEvent) node.dispatchEvent(new Event('clay-pane-dispose'));
+  suspend(node); node.remove();
+}
+export function clearRetainedPanes(host) {
+  var pool = pools.get(host);
+  if (!pool) return;
+  Array.from(pool.entries.keys()).forEach(function (node) { evict(pool, node); });
+  pools.delete(host);
+}
+export function disposePaneChildren(host) {
+  Array.from(host && host.children || []).forEach(function (pane) {
+    if (pane.dispatchEvent) pane.dispatchEvent(new Event('clay-pane-dispose'));
+  });
+}
+// Leave active nodes attached for the existing legacy reconciler; never hand
+// hidden cached documents to a Worker pair.
+export function releaseRetainedPanes(host) {
+  var pool = pools.get(host);
+  if (!pool) return;
+  Array.from(pool.entries.keys()).forEach(function (node) {
+    if (node.classList.contains('split-pane-cached')) evict(pool, node);
+  });
+  pools.delete(host);
+}
+function invalidateTransport(pool) {
+  // Cached documents cannot survive a parent transport boundary. Visible panes
+  // have independent authenticated sockets; keep their drafts and Stop control.
+  Array.from(pool.entries.keys()).forEach(function (node) {
+    if (node.classList.contains('split-pane-cached')) evict(pool, node);
+    else { pool.entries.get(node).reuseInvalidated = true; var header = node.querySelector('.split-pane-header'); if (header) header.inert = true; }
+  });
+}
+export function preserveReconnectingPresentation(host) {
+  var state = store.snap(), pool = pools.get(host);
+  if (!pool || scope(state) !== pool.scope || state.splitIdentityBlockedSocket === getWs()) return false;
+  if (state.connected && state.activeProjectSlug === state.currentSlug && state.sessionListProjectSlug === state.currentSlug && state.projectSplitViewHydrated) return false;
+  return Array.from(pool.entries.keys()).some(function (node) {
+    var frame = node.querySelector('.split-pane-frame'), api = frame && frame.clayPane, live = api && api.identity();
+    return node.parentNode === host && !node.hidden && !node.classList.contains('split-pane-cached') && api && api.source === frame.contentWindow && api.document === frame.contentDocument &&
+      live && live.ready && live.ownerId === state.myUserId && live.projectSlug === state.currentSlug && sameConversation(pool.entries.get(node).target, live.binding);
+  });
+}
+function prune(host, pool) {
+  var state = store.snap();
+  if (scope(state) !== pool.scope) { clearRetainedPanes(host); return false; }
+  var generation = state.projectSplitViewSocketGeneration;
+  if (getWs() !== pool.socket || generation !== pool.generation || state.connected !== pool.connected) {
+    invalidateTransport(pool);
+    pool.socket = getWs(); pool.generation = generation; pool.connected = state.connected;
+  }
+  if (state.splitPanes) { releaseRetainedPanes(host); return false; }
+  Array.from(pool.entries.entries()).forEach(function (entry) {
+    var node = entry[0], record = entry[1];
+    var current = target(state, record.target.sessionId);
+    if (node.parentNode !== host || !sameConversation(record.target, current)) { evict(pool, node); return; }
+    if (!samePaneTarget(record.target, current)) {
+      if (node.classList.contains('split-pane-cached')) evict(pool, node);
+      else record.reuseInvalidated = true;
+    }
+  });
+  return true;
+}
+export function paneRetention(host) {
+  var key = scope(store.snap()), pool = pools.get(host);
+  if (pool && !prune(host, pool)) pool = null;
+  if (!key || !store.get('connected') || !getWs() || store.get('splitPanes')) return null;
+  if (!pool) { pool = { scope: key, socket: getWs(), generation: store.get('projectSplitViewSocketGeneration'), connected: store.get('connected'), entries: new Map() }; pools.set(host, pool); }
+  return {
+    limit: 8,
+    age: function (node) { return (pool.entries.get(node) || {}).used || 0; },
+    remember: function (node, pane) {
+      var binding = target(store.snap(), pane.sessionId);
+      if (binding) pool.entries.set(node, { target: binding, used: ++clock });
+    },
+    retain: function (node) {
+      var record = pool.entries.get(node), frame = node.querySelector('.split-pane-frame');
+      var api = frame && frame.clayPane, live = api && api.identity();
+      return !!(record && !record.reuseInvalidated && api && typeof api.suspend === 'function' && api.source === frame.contentWindow && api.document === frame.contentDocument &&
+        live && samePaneTarget(record.target, live.binding) && samePaneTarget(record.target, target(store.snap(), record.target.sessionId)) && !frame.dataset.requestedSessionId);
+    },
+    canRetarget: function (node) {
+      if (pool.entries.has(node)) return this.retain(node);
+      // Legacy nodes are not pool entries. Validate their actual current
+      // document and authoritative source before handing them to activation.
+      var state = store.snap(), frame = node.querySelector('.split-pane-frame');
+      var api = frame && frame.clayPane, live = api && api.identity();
+      var session = live && (getCachedSessions() || []).find(function (item) { return item.id === live.sessionId; });
+      return !!(node.parentNode === host && node.classList.contains('split-pane') && !node.hidden &&
+        scope(state) === pool.scope && getWs() === pool.socket && session && !session.hidden &&
+        (session.ownerId || null) === (state.myUserId || null) && api.source === frame.contentWindow && api.document === frame.contentDocument &&
+        samePaneTarget(live.binding, paneTarget(state, getCachedSessions(), live.sessionId)) && !frame.dataset.requestedSessionId);
+    },
+    park: function (node) {
+      if (node.classList.contains('split-pane-cached')) return;
+      suspend(node); node.hidden = true; node.inert = true; node.style.display = 'none';
+      node.classList.remove('split-pane'); node.classList.add('split-pane-cached');
+    },
+    restore: function (node) {
+      var record = pool.entries.get(node);
+      if (record && record.reuseInvalidated) {
+        var frame = node.querySelector('.split-pane-frame'), live = frame && frame.clayPane && frame.clayPane.identity();
+        if (!live || !live.ready || !samePaneTarget(live.binding, target(store.snap(), record.target.sessionId))) suspend(node);
+      }
+      node.classList.remove('split-pane-cached'); node.classList.add('split-pane');
+      node.hidden = false; node.inert = false; node.style.display = '';
+    },
+    evict: function (node) { evict(pool, node); },
+  };
+}
+store.subscribe(function (state, previous) {
+  var removedView = state.projectSplitViews !== previous.projectSplitViews && (previous.projectSplitViews || []).some(function (view) {
+    return !(state.projectSplitViews || []).some(function (current) { return current.id === view.id; });
+  });
+  pools.forEach(function (pool, host) {
+    if (!prune(host, pool)) return;
+    if (removedView) Array.from(pool.entries.keys()).forEach(function (node) { if (node.classList.contains('split-pane-cached')) evict(pool, node); });
+  });
+});
+if (typeof window !== 'undefined' && window.addEventListener) window.addEventListener('pagehide', function () {
+  Array.from(pools.keys()).forEach(clearRetainedPanes);
+});

package/lib/public/modules/split-session-boundary.js

@@ -11,6 +11,27 @@ export function clearProjectSplitState() {
     splitGroups: [],
     splitDelegations: {},
     splitGroupsProjectSlug: null,
+    projectSplitViews: [],
+    projectSplitViewRevision: 0,
+    projectSplitViewContextKey: null,
+    projectSplitViewHydrated: false,
+    projectSplitViewPending: null,
+    projectSplitViewError: "",
+    projectSplitViewActiveId: null,
+    projectSplitViewFocusedOrigin: null,
+    projectSplitViewPreviewTree: null,
+    projectSplitViewDrag: null,
+    projectSplitViewDividerDrag: null,
+    projectSplitViewTranscriptScroll: {},
+    paneLayoutScrollLock: null,
+    paneLastUserScrollTop: null,
+    paneUserScrollIntent: null,
+    paneUserScrollRevision: 0,
+    projectSplitViewRequestSocket: null,
+    projectSplitViewRequestGeneration: null,
+    projectSplitViewRequestOwnerId: null,
+    projectSplitViewRequestSlug: null,
+    projectSplitViewSuppressClick: null,
     sessionListProjectSlug: null,
     activeSessionId: null,
     sessionActivatedProjectSlug: null,

package/lib/public/modules/split-view-create-action.js

@@ -0,0 +1,15 @@
+import { store } from './store.js';
+import { getCachedSessions } from './sidebar-sessions.js';
+import { checkComposerDeparture } from './session-rich-drafts.js';
+import { showToast } from './utils.js';
+import { buildSplitViewCreateRequest } from './split-view-create-request.js';
+
+export function handleSplitViewCreateEvent(event, submit, checkMountedPaneDrafts) {
+  var origins = event.detail && event.detail.origins || [], sessions = getCachedSessions() || [];
+  var views = store.get('projectSplitViews') || [], activeView = views.find(function (view) { return view.id === store.get('projectSplitViewActiveId'); });
+  var prepared = buildSplitViewCreateRequest(origins, sessions, store.get('activeSessionId'), activeView);
+  if (!prepared.ok) { showToast(prepared.error, 'warn'); return; }
+  try { if (activeView) checkMountedPaneDrafts(); else checkComposerDeparture(); }
+  catch (error) { showToast(error.message, 'warn'); return; }
+  submit(prepared.type, prepared.body, prepared.meta);
+}

package/lib/public/modules/split-view-create-menu.js

@@ -0,0 +1,83 @@
+// Pane-header picker for explicitly choosing real Driver sessions for a Split view.
+import { store } from './store.js';
+import { getCachedSessions } from './sidebar-sessions.js';
+import { viewForOrigin } from './split-view-presentation-lookup.js';
+import { iconHtml } from './icons.js';
+
+function menuElement() { return document.getElementById('split-view-create-menu'); }
+function close(returnFocus) {
+  var menu = menuElement(); if (!menu) return;
+  menu.hidden = true; store.set({ projectSplitViewCreateSelection: [] });
+  if (returnFocus && menu.clayCreateAnchor && menu.clayCreateAnchor.isConnected) menu.clayCreateAnchor.focus();
+  menu.clayCreateAnchor = null;
+}
+function refreshCreateButton(menu) {
+  var selected = store.get('projectSplitViewCreateSelection') || [], action = menu.querySelector('[data-create-split-view]');
+  action.disabled = selected.length < 2 || selected.length > 8;
+  action.textContent = 'Create Split view (' + selected.length + ')';
+}
+function open(anchor) {
+  var menu = menuElement();
+  if (!menu) {
+    menu = document.createElement('section'); menu.id = 'split-view-create-menu'; menu.className = 'split-view-arrange';
+    menu.hidden = true; menu.setAttribute('role', 'dialog'); menu.setAttribute('aria-label', 'Arrange sessions');
+    var header = document.createElement('div'); header.className = 'split-view-arrange-header';
+    var title = document.createElement('strong'); title.textContent = 'Arrange sessions'; header.appendChild(title);
+    var closeButton = document.createElement('button'); closeButton.type = 'button'; closeButton.setAttribute('aria-label', 'Close arrangement picker'); closeButton.innerHTML = iconHtml('x'); header.appendChild(closeButton); menu.appendChild(header);
+    var list = document.createElement('div'); list.className = 'split-view-arrange-grid'; list.setAttribute('role', 'group'); list.setAttribute('aria-label', 'Choose sessions');
+    list.style.cssText = 'display:flex;flex-direction:column;max-height:230px;overflow:auto'; menu.appendChild(list);
+    var create = document.createElement('button'); create.type = 'button'; create.dataset.createSplitView = 'true'; menu.appendChild(create);
+    document.body.appendChild(menu);
+  }
+  menu.clayCreateAnchor = anchor;
+  var list = menu.querySelector('[aria-label="Choose sessions"]'); list.textContent = '';
+  var activeView = (store.get('projectSplitViews') || []).find(function (view) { return view.id === store.get('projectSplitViewActiveId'); });
+  var currentId = Number(store.get('activeSessionId'));
+  var current = (getCachedSessions() || []).find(function (session) { return session.id === currentId; });
+  var selected = activeView ? activeView.sessions.map(function (item) { return item.sessionOriginId; }) :
+    current && current.sessionRole !== 'worker' && !current.isMate && !current.isTui ? [current.sessionOriginId] : [];
+  var candidates = (getCachedSessions() || []).filter(function (session) {
+    if (!session.sessionOriginId || session.sessionRole === 'worker' || session.isMate || session.isTui) return false;
+    var owner = viewForOrigin(session.sessionOriginId); return !owner || activeView && owner.id === activeView.id;
+  });
+  candidates.forEach(function (session) {
+    var choice = document.createElement('button'); choice.type = 'button'; choice.dataset.createSessionOrigin = session.sessionOriginId;
+    choice.setAttribute('aria-pressed', selected.indexOf(session.sessionOriginId) >= 0 ? 'true' : 'false');
+    choice.textContent = session.title || 'Session'; list.appendChild(choice);
+  });
+  store.set({ projectSplitViewCreateSelection: selected }); refreshCreateButton(menu); menu.hidden = false;
+  var rect = anchor.getBoundingClientRect(), width = Math.min(280, window.innerWidth - 16);
+  menu.style.left = Math.max(8, Math.min(rect.left, window.innerWidth - width - 8)) + 'px';
+  menu.style.top = Math.max(8, Math.min(rect.bottom + 4, window.innerHeight - menu.offsetHeight - 8)) + 'px';
+  var first = menu.querySelector('[data-create-session-origin]'); if (first) first.focus();
+}
+function onClick(event) {
+  var target = event.target;
+  var menu = menuElement(); if (!menu || menu.hidden) return;
+  if (menu.contains(target)) {
+    var closeButton = target.closest('[aria-label="Close arrangement picker"]');
+    if (closeButton) { event.preventDefault(); close(true); return; }
+    var choice = target.closest('[data-create-session-origin]');
+    if (choice) {
+      event.preventDefault(); var selected = (store.get('projectSplitViewCreateSelection') || []).slice(), origin = choice.dataset.createSessionOrigin, index = selected.indexOf(origin);
+      if (index === -1 && selected.length >= 8) return;
+      if (index === -1) selected.push(origin); else selected.splice(index, 1);
+      store.set({ projectSplitViewCreateSelection: selected }); choice.setAttribute('aria-pressed', selected.indexOf(origin) >= 0 ? 'true' : 'false'); refreshCreateButton(menu); return;
+    }
+    if (target.closest('[data-create-split-view]') && !target.closest('[data-create-split-view]').disabled) {
+      event.preventDefault(); document.dispatchEvent(new CustomEvent('clay-split-view-create', { detail: { origins: (store.get('projectSplitViewCreateSelection') || []).slice() } })); close(true);
+    }
+    return;
+  }
+  if (target.closest && target.closest('.split-view-arrange-trigger')) return;
+  close(false);
+}
+export function initSplitViewCreateMenu() {
+  document.addEventListener('clay-split-view-open-create', function (event) { if (event.detail && event.detail.anchor) open(event.detail.anchor); });
+  document.addEventListener('click', onClick, true);
+  document.addEventListener('keydown', function (event) {
+    if (event.key !== 'Escape' || !menuElement() || menuElement().hidden) return;
+    event.preventDefault(); event.stopImmediatePropagation(); close(true);
+  }, true);
+  window.addEventListener('resize', function () { if (menuElement() && !menuElement().hidden) close(false); });
+}

package/lib/public/modules/split-view-create-request.js

@@ -0,0 +1,23 @@
+// Pure request preparation for explicitly arranging Driver sessions.
+import { preset, place, listIds } from './split-view-layout-client.js';
+
+export function buildSplitViewCreateRequest(origins, sessions, activeSessionId, activeView) {
+  if (!Array.isArray(origins) || origins.length < 2 || origins.length > 8 || new Set(origins).size !== origins.length) return { ok: false, error: "Choose two to eight unique sessions." };
+  var selected = origins.map(function (origin) { return (sessions || []).find(function (session) { return session.sessionOriginId === origin; }); });
+  if (selected.some(function (session) { return !session || session.sessionRole === 'worker' || session.isMate || session.isTui; })) return { ok: false, error: "One or more selected sessions are no longer available." };
+  if (activeView) {
+    var currentOrigins = activeView.sessions.map(function (session) { return session.sessionOriginId; });
+    if (!currentOrigins.every(function (origin) { return origins.indexOf(origin) !== -1; })) return { ok: false, error: "Choose sessions from this Split view or from individual sessions." };
+    var tree = activeView.tree, sourceOrigin = activeView.activeSessionOriginId;
+    for (var i = 0; i < origins.length; i++) if (currentOrigins.indexOf(origins[i]) === -1) {
+      var placed = place(tree, origins[i], sourceOrigin, 'right', 0.5);
+      if (!placed.ok) return { ok: false, error: placed.reason || "Session could not be added." };
+      tree = placed.tree;
+    }
+    return { ok: true, type: 'project_split_view_update', body: { id: activeView.id, sessionOrigins: listIds(tree), tree: tree,
+      layout: activeView.layout, activeSessionOriginId: activeView.activeSessionOriginId } };
+  }
+  var tree = preset(origins, 'balanced'), current = selected.find(function (session) { return session.id === Number(activeSessionId); });
+  return { ok: true, type: 'project_split_view_create', body: { name: 'Split view', sessionOrigins: origins, tree: tree,
+    layout: 'balanced', activeSessionOriginId: current ? current.sessionOriginId : origins[0] }, meta: { activateCreatedView: true } };
+}

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

@@ -0,0 +1,198 @@
+// Browser-side parity for lib/split-view-layout.js. This module stays pure so
+// client geometry and server validation can be exercised independently.
+var MAX_SESSIONS = 8;
+var MIN_RATIO = 0.05;
+var MAX_RATIO = 0.95;
+var PRESETS = ["balanced", "columns", "rows", "grid", "main-left", "main-right"];
+
+export function listIds(tree) {
+  if (!tree || typeof tree !== "object") return [];
+  if (Object.prototype.hasOwnProperty.call(tree, "id")) return [tree.id];
+  return listIds(tree.left).concat(listIds(tree.right));
+}
+
+export function validateTree(tree, expectedIds) {
+  var ids = listIds(tree);
+  var valid = true;
+  function walk(node, depth) {
+    if (!node || typeof node !== "object" || depth > MAX_SESSIONS) return false;
+    if (Object.prototype.hasOwnProperty.call(node, "id")) {
+      return Object.keys(node).length === 1 && validId(node.id);
+    }
+    if (Object.keys(node).sort().join(",") !== "axis,left,ratio,right" ||
+        ["horizontal", "vertical"].indexOf(node.axis) === -1 || typeof node.ratio !== "number" ||
+        !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;
+  if (valid && expectedIds) {
+    valid = Array.isArray(expectedIds) && expectedIds.length === ids.length &&
+      expectedIds.every(function (id) { return ids.indexOf(id) !== -1; });
+  }
+  return { ok: valid, ids: ids };
+}
+
+function validId(value) {
+  return typeof value === "string" && value.length > 0 && value.length <= 128 && /^[A-Za-z0-9_-]+$/.test(value);
+}
+function leaf(id) { return { id: id }; }
+export function pairTree(targetId, sourceId, position) {
+  if (!validId(targetId) || !validId(sourceId) || ["left", "right", "top", "bottom"].indexOf(position) === -1 || targetId === sourceId) {
+    throw new TypeError("Pair layout requires two distinct session origins and a valid position");
+  }
+  var before = position === "left" || position === "top";
+  return { axis: position === "top" || position === "bottom" ? "vertical" : "horizontal", ratio: 0.5,
+    left: before ? leaf(sourceId) : leaf(targetId), right: before ? leaf(targetId) : leaf(sourceId) };
+}
+function chain(ids, axis) {
+  if (ids.length === 1) return leaf(ids[0]);
+  return { axis: axis, ratio: 1 / ids.length, left: leaf(ids[0]), right: chain(ids.slice(1), axis) };
+}
+function grid(ids) {
+  if (ids.length <= 2) return chain(ids, "horizontal");
+  var split = Math.ceil(ids.length / 2);
+  return { axis: "vertical", ratio: split / ids.length,
+    left: chain(ids.slice(0, split), "horizontal"), right: chain(ids.slice(split), "horizontal") };
+}
+
+export function preset(ids, name) {
+  if (!Array.isArray(ids) || ids.length > MAX_SESSIONS || ids.some(function (id) { return !validId(id); }) || new Set(ids).size !== ids.length) {
+    throw new TypeError("Preset input must contain zero to eight unique session origins");
+  }
+  if (PRESETS.indexOf(name) === -1) throw new TypeError("Unknown Split view preset");
+  if (!ids.length) return null;
+  if (ids.length === 1) return leaf(ids[0]);
+  if (name === "columns") return chain(ids, "horizontal");
+  if (name === "rows") return chain(ids, "vertical");
+  if (name === "grid") return grid(ids);
+  if (name === "main-left" || name === "main-right") {
+    var share = ids.length === 2 ? 0.5 : 2 / 3;
+    return name === "main-left" ? { axis: "horizontal", ratio: share, left: leaf(ids[0]), right: grid(ids.slice(1)) } :
+      { axis: "horizontal", ratio: 1 - share, left: grid(ids.slice(1)), right: leaf(ids[0]) };
+  }
+  if (ids.length <= 3) return { axis: "horizontal", ratio: 0.55, left: leaf(ids[0]), right: chain(ids.slice(1), "vertical") };
+  return grid(ids);
+}
+
+export function remove(tree, id) {
+  if (!tree || typeof tree !== "object") return tree;
+  if (Object.prototype.hasOwnProperty.call(tree, "id")) return tree.id === id ? null : tree;
+  var left = remove(tree.left, id), right = remove(tree.right, id);
+  if (!left) return right;
+  if (!right) return left;
+  if (left === tree.left && right === tree.right) return tree;
+  return { axis: tree.axis, ratio: tree.ratio, left: left, right: right };
+}
+
+function insert(tree, id, targetId, position, share) {
+  if (!tree || typeof tree !== "object") return { tree: tree, found: false };
+  if (Object.prototype.hasOwnProperty.call(tree, "id")) {
+    if (tree.id !== targetId) return { tree: tree, found: false };
+    var horizontal = position === "left" || position === "right";
+    var before = position === "left" || position === "top";
+    var branch = { axis: horizontal ? "horizontal" : "vertical", ratio: before ? share : 1 - share,
+      left: before ? leaf(id) : tree, right: before ? tree : leaf(id) };
+    return { tree: branch, found: true };
+  }
+  var left = insert(tree.left, id, targetId, position, share);
+  if (left.found) return { tree: { axis: tree.axis, ratio: tree.ratio, left: left.tree, right: tree.right }, found: true };
+  var right = insert(tree.right, id, targetId, position, share);
+  if (right.found) return { tree: { axis: tree.axis, ratio: tree.ratio, left: tree.left, right: right.tree }, found: true };
+  return { tree: tree, found: false };
+}
+
+export function place(tree, sourceId, targetId, position, share) {
+  var allowed = ["left", "right", "top", "bottom"];
+  var amount = share === undefined ? 0.5 : share;
+  if (!validId(sourceId) || !validId(targetId)) return { ok: false, tree: tree, reason: "invalid-id" };
+  if (allowed.indexOf(position) === -1) return { ok: false, tree: tree, reason: "invalid-position" };
+  if (typeof amount !== "number" || !Number.isFinite(amount) || amount < MIN_RATIO || amount > MAX_RATIO) return { ok: false, tree: tree, reason: "invalid-share" };
+  if (sourceId === targetId) return { ok: true, tree: tree, changed: false };
+  if (!tree) return { ok: false, tree: tree, reason: "unknown-target" };
+  var targetIds = listIds(tree);
+  if (targetIds.indexOf(targetId) === -1) return { ok: false, tree: tree, reason: "unknown-target" };
+  var sourceExists = targetIds.indexOf(sourceId) !== -1;
+  if (!sourceExists && targetIds.length >= MAX_SESSIONS) return { ok: false, tree: tree, reason: "limit" };
+  var base = sourceExists ? remove(tree, sourceId) : tree;
+  var result = insert(base, sourceId, targetId, position, amount);
+  if (!result.found) return { ok: false, tree: tree, reason: "unknown-target" };
+  return { ok: true, tree: result.tree, changed: true };
+}
+
+export function swap(tree, firstId, secondId) {
+  var ids = listIds(tree);
+  if (firstId === secondId) return { ok: ids.indexOf(firstId) !== -1, tree: tree, changed: false, reason: ids.indexOf(firstId) === -1 ? "unknown-id" : null };
+  if (ids.indexOf(firstId) === -1 || ids.indexOf(secondId) === -1) return { ok: false, tree: tree, changed: false, reason: "unknown-id" };
+  function walk(node) {
+    if (Object.prototype.hasOwnProperty.call(node, "id")) return leaf(node.id === firstId ? secondId : node.id === secondId ? firstId : node.id);
+    return { axis: node.axis, ratio: node.ratio, left: walk(node.left), right: walk(node.right) };
+  }
+  return { ok: true, tree: walk(tree), changed: true };
+}
+
+export function resize(tree, path, ratio) {
+  if (typeof ratio !== "number" || !Number.isFinite(ratio) || ratio < MIN_RATIO || ratio > MAX_RATIO) return null;
+  if (!Array.isArray(path)) return null;
+  function walk(node, index) {
+    if (!node || Object.prototype.hasOwnProperty.call(node, "id")) return null;
+    if (index === path.length) return { axis: node.axis, ratio: ratio, left: node.left, right: node.right };
+    var side = path[index];
+    if (side !== "left" && side !== "right") return null;
+    var child = walk(node[side], index + 1);
+    if (!child) return null;
+    return { axis: node.axis, ratio: node.ratio, left: side === "left" ? child : node.left, right: side === "right" ? child : node.right };
+  }
+  return walk(tree, 0);
+}
+
+export function arrangeRegion(tree, sourceId, position) {
+  var positions = ["left", "right", "top", "bottom", "top-left", "top-right", "bottom-left", "bottom-right", "left-third", "right-third"];
+  if (positions.indexOf(position) === -1) return { ok: false, tree: tree, reason: "invalid-position" };
+  var ids = listIds(tree), remaining = ids.filter(function (id) { return id !== sourceId; });
+  if (!validId(sourceId) || ids.indexOf(sourceId) === -1) return { ok: false, tree: tree, reason: "unknown-source" };
+  if (!remaining.length) return { ok: false, tree: tree, reason: "insufficient-windows" };
+  var rest = preset(remaining, "balanced");
+  if (position === "left-third" || position === "right-third") {
+    var leftThird = position === "left-third";
+    return { ok: true, tree: leftThird ? { axis: "horizontal", ratio: 1 / 3, left: leaf(sourceId), right: rest } :
+      { axis: "horizontal", ratio: 2 / 3, left: rest, right: leaf(sourceId) } };
+  }
+  if (position.indexOf("-") !== -1) {
+    if (remaining.length < 2) return { ok: false, tree: tree, reason: "quarter-requires-three" };
+    var top = position.indexOf("top-") === 0, left = position.slice(-4) === "left", companion = remaining[0];
+    var bulk = preset(remaining.slice(1), "balanced");
+    var corner = top ? { axis: "vertical", ratio: 0.5, left: leaf(sourceId), right: leaf(companion) } :
+      { axis: "vertical", ratio: 0.5, left: leaf(companion), right: leaf(sourceId) };
+    return { ok: true, tree: left ? { axis: "horizontal", ratio: 0.5, left: corner, right: bulk } :
+      { axis: "horizontal", ratio: 0.5, left: bulk, right: corner } };
+  }
+  var horizontal = position === "left" || position === "right", before = position === "left" || position === "top";
+  return { ok: true, tree: { axis: horizontal ? "horizontal" : "vertical", ratio: 0.5,
+    left: before ? leaf(sourceId) : rest, right: before ? rest : leaf(sourceId) } };
+}
+
+// Rectangles are returned by leaf ID and divider path. The host owns flat pane
+// nodes; callers apply these numbers as inline positions without reparenting.
+export function rectangles(tree, width, height, gap) {
+  var paneRects = {};
+  var dividers = [];
+  var dividerSize = Number.isFinite(gap) && gap >= 0 ? gap : 7;
+  function visit(node, rect, path) {
+    if (!node) return;
+    if (Object.prototype.hasOwnProperty.call(node, "id")) { paneRects[node.id] = rect; return; }
+    var horizontal = node.axis === "horizontal";
+    var available = Math.max(0, (horizontal ? rect.width : rect.height) - dividerSize);
+    var first = available * node.ratio;
+    var split = horizontal ? rect.x + first : rect.y + first;
+    var divider = horizontal ? { x: split, y: rect.y, width: dividerSize, height: rect.height } :
+      { x: rect.x, y: split, width: rect.width, height: dividerSize };
+    dividers.push({ path: path.slice(), axis: node.axis, rect: divider, branchRect: rect, ratio: node.ratio, available: available });
+    var left = horizontal ? { x: rect.x, y: rect.y, width: first, height: rect.height } : { x: rect.x, y: rect.y, width: rect.width, height: first };
+    var right = horizontal ? { x: split + dividerSize, y: rect.y, width: available - first, height: rect.height } :
+      { x: rect.x, y: split + dividerSize, width: rect.width, height: available - first };
+    visit(node.left, left, path.concat("left"));
+    visit(node.right, right, path.concat("right"));
+  }
+  visit(tree, { x: 0, y: 0, width: width, height: height }, []);
+  return { panes: paneRects, dividers: dividers };
+}

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

@@ -0,0 +1,37 @@
+// Inline, accessible layout previews for the presentation Arrange chooser.
+var PRESET_TILES = {
+  balanced: [[3, 3, 16, 18], [21, 3, 12, 8], [21, 13, 12, 8]],
+  columns: [[3, 3, 8, 18], [13, 3, 8, 18], [23, 3, 10, 18]],
+  rows: [[3, 3, 30, 4], [3, 9, 30, 5], [3, 16, 30, 5]],
+  grid: [[3, 3, 14, 8], [19, 3, 14, 8], [3, 13, 14, 8], [19, 13, 14, 8]],
+  "main-left": [[3, 3, 19, 18], [24, 3, 9, 8], [24, 13, 9, 8]],
+  "main-right": [[14, 3, 19, 18], [3, 3, 9, 8], [3, 13, 9, 8]]
+};
+var POSITION_TILES = {
+  left: [[3, 3, 14, 18], [19, 3, 14, 18]], right: [[19, 3, 14, 18], [3, 3, 14, 18]],
+  top: [[3, 3, 30, 8], [3, 13, 30, 8]], bottom: [[3, 13, 30, 8], [3, 3, 30, 8]],
+  "top-left": [[3, 3, 14, 8], [19, 3, 14, 8], [3, 13, 14, 8], [19, 13, 14, 8]],
+  "top-right": [[19, 3, 14, 8], [3, 3, 14, 8], [19, 13, 14, 8], [3, 13, 14, 8]],
+  "bottom-left": [[3, 13, 14, 8], [19, 13, 14, 8], [3, 3, 14, 8], [19, 3, 14, 8]],
+  "bottom-right": [[19, 13, 14, 8], [3, 13, 14, 8], [19, 3, 14, 8], [3, 3, 14, 8]],
+  "left-third": [[3, 3, 8, 18], [13, 3, 20, 18]], "right-third": [[23, 3, 10, 18], [3, 3, 18, 18]]
+};
+
+export function appendLayoutOption(button, label, kind, value) {
+  var tiles = kind === "preset" ? PRESET_TILES[value] : POSITION_TILES[value];
+  if (!tiles) return false;
+  var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("class", "split-view-layout-icon"); svg.setAttribute("viewBox", "0 0 36 24");
+  svg.setAttribute("aria-hidden", "true" );
+  var frame = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+  frame.setAttribute("class", "split-view-layout-frame"); frame.setAttribute("x", "1"); frame.setAttribute("y", "1");
+  frame.setAttribute("width", "34"); frame.setAttribute("height", "22"); frame.setAttribute("rx", "2"); svg.appendChild(frame);
+  tiles.forEach(function (tile, index) {
+    var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    rect.setAttribute("class", "split-view-layout-tile" + (index === 0 ? " split-view-layout-selected" : ""));
+    rect.setAttribute("x", String(tile[0])); rect.setAttribute("y", String(tile[1]));
+    rect.setAttribute("width", String(tile[2])); rect.setAttribute("height", String(tile[3])); rect.setAttribute("rx", "1"); svg.appendChild(rect);
+  });
+  var text = document.createElement("span"); text.className = "split-view-layout-label"; text.textContent = label;
+  button.appendChild(svg); button.appendChild(text); return true;
+}

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

@@ -0,0 +1,38 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+
+// Only serializable receipts enter store. The transport itself stays module-owned.
+var layoutSocket = null;
+var layoutSocketEpoch = 0;
+var layoutContextEpoch = 0;
+store.subscribe(function (state, previous) {
+  var fields = ['projectSplitViewActiveId', 'projectSplitViewContextKey', 'currentSlug', 'currentProjectOwnerId', 'myUserId', 'projectSplitViewSocketGeneration', 'connected'];
+  function activeVersion(value) {
+    var view = (value.projectSplitViews || []).find(function (item) { return item.id === value.projectSplitViewActiveId; });
+    return view ? JSON.stringify([view.revision, view.tree]) : '';
+  }
+  if (fields.some(function (key) { return state[key] !== previous[key]; }) || activeVersion(state) !== activeVersion(previous)) layoutContextEpoch++;
+});
+function socketEpoch() {
+  var socket = getWs();
+  if (socket !== layoutSocket) { layoutSocket = socket; layoutSocketEpoch++; }
+  return layoutSocketEpoch;
+}
+export function layoutScope(view) {
+  var state = store.snap();
+  return view && { epoch: layoutContextEpoch, viewId: view.id, revision: view.revision, tree: JSON.stringify(view.tree),
+    context: state.projectSplitViewContextKey, slug: state.currentSlug, owner: state.currentProjectOwnerId,
+    viewer: state.myUserId, generation: state.projectSplitViewSocketGeneration, socketEpoch: socketEpoch() };
+}
+export function currentLayoutScope(receipt) {
+  var state = store.snap();
+  if (!receipt || state.connected === false || state.projectSplitViewActiveId !== receipt.viewId) return false;
+  var view = (state.projectSplitViews || []).find(function (item) { return item.id === receipt.viewId; });
+  return !!view && JSON.stringify(layoutScope(view)) === JSON.stringify(receipt);
+}
+export function presentationTree(view) {
+  var receipt = store.get('projectSplitViewPreviewScope');
+  return view && receipt && receipt.viewId === view.id && store.get('projectSplitViewPreviewTree') && currentLayoutScope(receipt) &&
+    JSON.stringify(receipt) === JSON.stringify(layoutScope(view)) ?
+    store.get('projectSplitViewPreviewTree') : view && view.tree;
+}