@ai-matrx/canvas 0.1.1 → 0.2.0

package/dist/index.cjs

@@ -21,26 +21,46 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   CANVAS_DEFAULT_WIDTH: () => CANVAS_DEFAULT_WIDTH,
+  CANVAS_DESKTOP_LAYOUT_RULES: () => CANVAS_DESKTOP_LAYOUT_RULES,
+  CANVAS_MAIN_WINDOW: () => CANVAS_MAIN_WINDOW,
   CANVAS_MIN_SPLIT_FRACTION: () => CANVAS_MIN_SPLIT_FRACTION,
   CANVAS_MIN_WIDTH: () => CANVAS_MIN_WIDTH,
+  CANVAS_SHORTCUTS: () => CANVAS_SHORTCUTS,
   CANVAS_STORAGE_KEY: () => CANVAS_STORAGE_KEY,
+  CANVAS_WEB_LAYOUT_RULES: () => CANVAS_WEB_LAYOUT_RULES,
   bindCanvasToReduxStore: () => bindCanvasToReduxStore,
   canvasActions: () => canvasActions,
   canvasItemId: () => canvasItemId,
   canvasReducer: () => canvasReducer,
+  canvasShortcutHint: () => canvasShortcutHint,
+  canvasWindowFrame: () => canvasWindowFrame,
+  canvasWindowId: () => canvasWindowId,
+  canvasWindowOfItem: () => canvasWindowOfItem,
+  canvasWindowOfPane: () => canvasWindowOfPane,
+  clampDraggedCanvasWidth: () => clampDraggedCanvasWidth,
   consoleCanvasErrorSink: () => consoleCanvasErrorSink,
   createCanvasController: () => createCanvasController,
   createCanvasStore: () => createCanvasStore,
   createInitialCanvasState: () => createInitialCanvasState,
+  createKeyValueCanvasPersistence: () => createKeyValueCanvasPersistence,
   createLocalStorageCanvasPersistence: () => createLocalStorageCanvasPersistence,
+  createRemoteCanvasStore: () => createRemoteCanvasStore,
+  defaultCanvasWidth: () => defaultCanvasWidth,
   findNonJson: () => findNonJson,
+  fitCanvasWidth: () => fitCanvasWidth,
+  foldCanvasWindows: () => foldCanvasWindows,
   isCanvasAction: () => isCanvasAction,
   isCanvasJson: () => isCanvasJson,
+  listCanvasWindowIds: () => listCanvasWindowIds,
   listPaneIds: () => listPaneIds,
+  matchesCanvasAccelerator: () => matchesCanvasAccelerator,
   normalizeSizes: () => normalizeSizes,
   parseCanvasItemId: () => parseCanvasItemId,
+  resolveCanvasLayoutRules: () => resolveCanvasLayoutRules,
+  runCanvasCommand: () => runCanvasCommand,
   sanitizeCanvasSnapshot: () => sanitizeCanvasSnapshot,
   selectCanvasActiveItem: () => selectCanvasActiveItem,
+  selectCanvasExtraWindow: () => selectCanvasExtraWindow,
   selectCanvasFocusedPaneId: () => selectCanvasFocusedPaneId,
   selectCanvasIsFullscreen: () => selectCanvasIsFullscreen,
   selectCanvasIsHydrated: () => selectCanvasIsHydrated,
@@ -51,11 +71,17 @@ __export(src_exports, {
   selectCanvasPane: () => selectCanvasPane,
   selectCanvasPaneCount: () => selectCanvasPaneCount,
   selectCanvasWidth: () => selectCanvasWidth,
+  selectCanvasWindowItemCount: () => selectCanvasWindowItemCount,
+  selectCanvasWindowOfItem: () => selectCanvasWindowOfItem,
+  selectCanvasWindows: () => selectCanvasWindows,
+  shareStructure: () => shareStructure,
+  shouldStackSplit: () => shouldStackSplit,
   toPersistableSnapshot: () => toPersistableSnapshot
 });
 module.exports = __toCommonJS(src_exports);
 
 // src/core/types.ts
+var CANVAS_MAIN_WINDOW = "main";
 var CANVAS_MIN_WIDTH = 360;
 var CANVAS_DEFAULT_WIDTH = 640;
 var CANVAS_MIN_SPLIT_FRACTION = 0.12;
@@ -107,12 +133,19 @@ function findNonJson(value, path = "data") {
 function isCanvasJson(value) {
   return findNonJson(value) === null;
 }
+function canvasWindowId(id) {
+  return id;
+}
 
 // src/core/layout.ts
 function listPaneIds(node) {
   if (node.type === "pane") return [node.paneId];
   return node.children.flatMap(listPaneIds);
 }
+function containsPane(node, paneId) {
+  if (node.type === "pane") return node.paneId === paneId;
+  return node.children.some((child) => containsPane(child, paneId));
+}
 function evenSizes(count) {
   return Array.from({ length: count }, () => 1 / count);
 }
@@ -123,7 +156,8 @@ function normalizeSizes(sizes, count) {
   const total = sizes.reduce((sum, s) => sum + s, 0);
   return sizes.map((s) => s / total);
 }
-function splitPane(node, paneId, newPaneId, orientation, newSplitId) {
+function splitPane(node, paneId, newPaneId, orientation, newSplitId, firstShare = 0.5) {
+  const first = Number.isFinite(firstShare) ? Math.min(1 - CANVAS_MIN_SPLIT_FRACTION, Math.max(CANVAS_MIN_SPLIT_FRACTION, firstShare)) : 0.5;
   if (node.type === "pane") {
     if (node.paneId !== paneId) return node;
     return {
@@ -131,7 +165,7 @@ function splitPane(node, paneId, newPaneId, orientation, newSplitId) {
       id: newSplitId,
       orientation,
       children: [node, { type: "pane", paneId: newPaneId }],
-      sizes: [0.5, 0.5]
+      sizes: [first, 1 - first]
     };
   }
   const index = node.children.findIndex(
@@ -142,13 +176,13 @@ function splitPane(node, paneId, newPaneId, orientation, newSplitId) {
     const children = [...node.children];
     children.splice(index + 1, 0, { type: "pane", paneId: newPaneId });
     const sizes = [...node.sizes];
-    sizes.splice(index, 1, share / 2, share / 2);
+    sizes.splice(index, 1, share * first, share * (1 - first));
     return { ...node, children, sizes: normalizeSizes(sizes, children.length) };
   }
   return {
     ...node,
     children: node.children.map(
-      (child) => splitPane(child, paneId, newPaneId, orientation, newSplitId)
+      (child) => splitPane(child, paneId, newPaneId, orientation, newSplitId, first)
     )
   };
 }
@@ -167,6 +201,10 @@ function removePane(node, paneId) {
   if (children.length === 1) return children[0] ?? null;
   return { ...node, children, sizes: normalizeSizes(sizes, children.length) };
 }
+function containsSplit(node, splitId) {
+  if (node.type === "pane") return false;
+  return node.id === splitId || node.children.some((child) => containsSplit(child, splitId));
+}
 function resizeSplit(node, splitId, sizes) {
   if (node.type === "pane") return node;
   if (node.id === splitId) {
@@ -197,8 +235,12 @@ function isValidLayout(node, knownPanes, seen = /* @__PURE__ */ new Set()) {
 
 // src/core/reducer.ts
 var P = "matrxCanvas/";
+var win = (windowId) => windowId && windowId !== CANVAS_MAIN_WINDOW ? { windowId } : {};
 var canvasActions = {
-  open: (input) => ({ type: `${P}open`, payload: { ...input, now: Date.now() } }),
+  open: (input, options) => ({
+    type: `${P}open`,
+    payload: { ...input, now: Date.now(), ...options?.splitShare !== void 0 ? { splitShare: options.splitShare } : {} }
+  }),
   update: (itemId, patch) => ({
     type: `${P}update`,
     payload: { itemId, ...patch, now: Date.now() }
@@ -213,19 +255,32 @@ var canvasActions = {
     type: `${P}moveItem`,
     payload: { itemId, toPaneId, index }
   }),
-  splitPane: (paneId, orientation, moveItemId) => ({
+  /** `share` = the existing pane's fraction of the space (layout rules' stackSplit / sideSplit). */
+  splitPane: (paneId, orientation, moveItemId, share) => ({
     type: `${P}splitPane`,
-    payload: { paneId, orientation, moveItemId }
+    payload: { paneId, orientation, moveItemId, ...share !== void 0 ? { share } : {} }
   }),
   closePane: (paneId) => ({ type: `${P}closePane`, payload: { paneId } }),
   resizeSplit: (splitId, sizes) => ({
     type: `${P}resizeSplit`,
     payload: { splitId, sizes }
   }),
-  setOpen: (open) => ({ type: `${P}setOpen`, payload: { open } }),
-  toggle: () => ({ type: `${P}toggle` }),
-  setFullscreen: (fullscreen) => ({ type: `${P}setFullscreen`, payload: { fullscreen } }),
-  setWidth: (width) => ({ type: `${P}setWidth`, payload: { width } }),
+  setOpen: (open, windowId) => ({ type: `${P}setOpen`, payload: { open, ...win(windowId) } }),
+  toggle: (windowId) => windowId && windowId !== CANVAS_MAIN_WINDOW ? { type: `${P}toggle`, payload: { windowId } } : { type: `${P}toggle` },
+  setFullscreen: (fullscreen, windowId) => ({
+    type: `${P}setFullscreen`,
+    payload: { fullscreen, ...win(windowId) }
+  }),
+  setWidth: (width, windowId) => ({ type: `${P}setWidth`, payload: { width, ...win(windowId) } }),
+  /** Moves a tab into its own pop-out window `windowId` (made by the host's popOut port). */
+  popOut: (itemId, windowId) => ({ type: `${P}popOut`, payload: { itemId, windowId } }),
+  /** Returns a popped-out tab to the window it came from. */
+  dockBack: (itemId) => ({ type: `${P}dockBack`, payload: { itemId } }),
+  /** A host window closed: its tabs dock home (default) or close with it. The main window never closes. */
+  closeWindow: (windowId, mode = "dock") => ({
+    type: `${P}closeWindow`,
+    payload: { windowId, mode }
+  }),
   hydrate: (snapshot) => ({ type: `${P}hydrate`, payload: { snapshot } }),
   reset: () => ({ type: `${P}reset` })
 };
@@ -238,15 +293,80 @@ function createInitialCanvasState() {
     version: 1,
     isOpen: false,
     isFullscreen: false,
-    width: CANVAS_DEFAULT_WIDTH,
+    width: null,
     layout: { type: "pane", paneId },
+    focusedPaneId: paneId,
+    windows: {},
     panes: { [paneId]: { id: paneId, itemIds: [], activeItemId: null } },
     items: {},
-    focusedPaneId: paneId,
     seq: 1,
     hydrated: false
   };
 }
+function listCanvasWindowIds(state) {
+  return [CANVAS_MAIN_WINDOW, ...Object.keys(state.windows ?? {})];
+}
+function canvasWindowFrame(state, windowId = CANVAS_MAIN_WINDOW) {
+  return windowId === CANVAS_MAIN_WINDOW ? state : state.windows?.[windowId] ?? null;
+}
+function canvasWindowOfPane(state, paneId) {
+  for (const id of listCanvasWindowIds(state)) {
+    const frame2 = canvasWindowFrame(state, id);
+    if (frame2 && containsPane(frame2.layout, paneId)) return id;
+  }
+  return null;
+}
+function canvasWindowOfItem(state, itemId) {
+  const pane = paneOf(state, itemId);
+  return pane ? canvasWindowOfPane(state, pane.id) : null;
+}
+function withFrame(state, windowId, patch) {
+  if (windowId === CANVAS_MAIN_WINDOW) return { ...state, ...patch };
+  const current = state.windows[windowId];
+  if (!current) return state;
+  return { ...state, windows: { ...state.windows, [windowId]: { ...current, ...patch } } };
+}
+function ensureWindow(state, windowId, role = "window", home = CANVAS_MAIN_WINDOW) {
+  if (windowId === CANVAS_MAIN_WINDOW || state.windows[windowId]) return state;
+  const seq = state.seq + 1;
+  const paneId = paneIdFromSeq(seq);
+  const frame2 = {
+    id: windowId,
+    role,
+    home,
+    isOpen: false,
+    isFullscreen: false,
+    width: null,
+    layout: { type: "pane", paneId },
+    focusedPaneId: paneId
+  };
+  return {
+    ...state,
+    seq,
+    panes: { ...state.panes, [paneId]: { id: paneId, itemIds: [], activeItemId: null } },
+    windows: { ...state.windows, [windowId]: frame2 }
+  };
+}
+function removeWindow(state, windowId) {
+  const frame2 = state.windows[windowId];
+  if (!frame2) return state;
+  const panes = { ...state.panes };
+  for (const paneId of listPaneIds(frame2.layout)) delete panes[paneId];
+  const windows = { ...state.windows };
+  delete windows[windowId];
+  return { ...state, panes, windows };
+}
+function windowItemIds(state, windowId) {
+  const frame2 = canvasWindowFrame(state, windowId);
+  if (!frame2) return [];
+  return listPaneIds(frame2.layout).flatMap((paneId) => state.panes[paneId]?.itemIds ?? []);
+}
+function dropEmptyPopOut(state, windowId) {
+  if (!windowId || windowId === CANVAS_MAIN_WINDOW) return state;
+  const frame2 = state.windows[windowId];
+  if (!frame2 || frame2.role !== "pop-out" || windowItemIds(state, windowId).length > 0) return state;
+  return removeWindow(state, windowId);
+}
 function paneOf(state, itemId) {
   for (const pane of Object.values(state.panes)) {
     if (pane.itemIds.includes(itemId)) return pane;
@@ -256,6 +376,10 @@ function paneOf(state, itemId) {
 function withPane(state, pane) {
   return { ...state, panes: { ...state.panes, [pane.id]: pane } };
 }
+function focus(state, paneId) {
+  const windowId = canvasWindowOfPane(state, paneId);
+  return windowId ? withFrame(state, windowId, { focusedPaneId: paneId }) : state;
+}
 function nextActive(itemIds, removed, current) {
   if (current !== removed) return current;
   const index = itemIds.indexOf(removed);
@@ -272,27 +396,29 @@ function detachItem(state, itemId) {
   });
 }
 function dropPane(state, paneId) {
-  const layout = removePane(state.layout, paneId);
+  const windowId = canvasWindowOfPane(state, paneId);
+  const frame2 = windowId ? canvasWindowFrame(state, windowId) : null;
+  if (!windowId || !frame2) return state;
+  const layout = removePane(frame2.layout, paneId);
   if (!layout) return state;
   const panes = { ...state.panes };
   delete panes[paneId];
-  const focusedPaneId = state.focusedPaneId === paneId ? listPaneIds(layout)[0] ?? state.focusedPaneId : state.focusedPaneId;
-  return { ...state, layout, panes, focusedPaneId };
+  const focusedPaneId = frame2.focusedPaneId === paneId ? listPaneIds(layout)[0] ?? frame2.focusedPaneId : frame2.focusedPaneId;
+  return withFrame({ ...state, panes }, windowId, { layout, focusedPaneId });
 }
-function addSplit(state, paneId, orientation) {
+function addSplit(state, paneId, orientation, share) {
+  const windowId = canvasWindowOfPane(state, paneId);
+  const frame2 = windowId ? canvasWindowFrame(state, windowId) : null;
+  if (!windowId || !frame2) return null;
   const seq = state.seq + 1;
   const newPaneId = paneIdFromSeq(seq);
-  const layout = splitPane(state.layout, paneId, newPaneId, orientation, splitIdFromSeq(seq));
-  return {
-    newPaneId,
-    state: {
-      ...state,
-      seq,
-      layout,
-      panes: { ...state.panes, [newPaneId]: { id: newPaneId, itemIds: [], activeItemId: null } },
-      focusedPaneId: newPaneId
-    }
-  };
+  const layout = splitPane(frame2.layout, paneId, newPaneId, orientation, splitIdFromSeq(seq), share ?? 0.5);
+  const next = withFrame(
+    { ...state, seq, panes: { ...state.panes, [newPaneId]: { id: newPaneId, itemIds: [], activeItemId: null } } },
+    windowId,
+    { layout, focusedPaneId: newPaneId }
+  );
+  return { newPaneId, state: next };
 }
 function insertInto(state, paneId, itemId, activate, index) {
   const pane = state.panes[paneId];
@@ -310,46 +436,96 @@ function afterActive(itemIds, active) {
   const index = active ? itemIds.indexOf(active) : -1;
   return index < 0 ? itemIds.length : index + 1;
 }
+function sendHome(state, itemId, home, activate) {
+  const homeFrame = canvasWindowFrame(state, home) ?? state;
+  const target = canvasWindowFrame(state, home) ? home : CANVAS_MAIN_WINDOW;
+  let next = detachItem(state, itemId);
+  next = insertInto(next, homeFrame.focusedPaneId, itemId, activate);
+  return activate ? withFrame(next, target, { focusedPaneId: homeFrame.focusedPaneId }) : next;
+}
 function clampWidth(width) {
-  return Number.isFinite(width) ? Math.max(CANVAS_MIN_WIDTH, Math.round(width)) : CANVAS_DEFAULT_WIDTH;
+  return Number.isFinite(width) ? Math.max(CANVAS_MIN_WIDTH, Math.round(width)) : null;
+}
+function foldCanvasWindows(state) {
+  const extra = Object.keys(state.windows ?? {});
+  if (extra.length === 0) return state.windows ? state : { ...state, windows: {} };
+  let next = state;
+  for (const windowId of extra) {
+    for (const itemId of windowItemIds(next, windowId)) next = sendHome(next, itemId, CANVAS_MAIN_WINDOW, false);
+    next = removeWindow(next, windowId);
+  }
+  return next;
 }
 function sanitizeCanvasSnapshot(raw) {
   if (!raw || typeof raw !== "object") return null;
   const s = raw;
-  if (s.version !== 1 || !s.panes || !s.items || !s.layout) return null;
+  if (s.version !== 1 || !s.panes || typeof s.panes !== "object" || !s.items || typeof s.items !== "object" || !s.layout) return null;
   const paneIds = new Set(Object.keys(s.panes));
-  if (!isValidLayout(s.layout, paneIds)) return null;
-  const layoutPanes = new Set(listPaneIds(s.layout));
-  if (layoutPanes.size !== paneIds.size) return null;
+  const seen = /* @__PURE__ */ new Set();
+  if (!isValidLayout(s.layout, paneIds, seen)) return null;
+  const windows = {};
+  if (s.windows && typeof s.windows === "object") {
+    for (const [id, value] of Object.entries(s.windows)) {
+      if (!value || typeof value !== "object" || id === CANVAS_MAIN_WINDOW) continue;
+      const w = value;
+      const claimed = new Set(seen);
+      if (!isValidLayout(w.layout, paneIds, claimed)) continue;
+      for (const pane of claimed) seen.add(pane);
+      const layoutPanes = listPaneIds(w.layout);
+      const focused2 = w.focusedPaneId && layoutPanes.includes(w.focusedPaneId) ? w.focusedPaneId : layoutPanes[0];
+      if (!focused2) continue;
+      windows[id] = {
+        id,
+        role: w.role === "pop-out" ? "pop-out" : "window",
+        home: typeof w.home === "string" ? w.home : CANVAS_MAIN_WINDOW,
+        isOpen: w.isOpen === true,
+        isFullscreen: false,
+        width: typeof w.width === "number" ? clampWidth(w.width) : null,
+        layout: normalizeLayout(w.layout),
+        focusedPaneId: focused2
+      };
+    }
+  }
+  if (seen.size !== paneIds.size) return null;
   const items = {};
   for (const [id, item] of Object.entries(s.items)) {
     if (item && typeof item.kind === "string" && typeof item.key === "string" && canvasItemId(item.kind, item.key) === id) {
       items[id] = item;
     }
   }
+  const placed = /* @__PURE__ */ new Set();
   const panes = {};
   for (const [id, pane] of Object.entries(s.panes)) {
-    const itemIds = (Array.isArray(pane.itemIds) ? pane.itemIds : []).filter((itemId) => itemId in items);
+    const itemIds = (Array.isArray(pane.itemIds) ? pane.itemIds : []).filter((itemId) => itemId in items && !placed.has(itemId));
+    for (const itemId of itemIds) placed.add(itemId);
     const activeItemId = pane.activeItemId && itemIds.includes(pane.activeItemId) ? pane.activeItemId : itemIds[0] ?? null;
     panes[id] = { id, itemIds, activeItemId };
   }
-  const focused = s.focusedPaneId && paneIds.has(s.focusedPaneId) ? s.focusedPaneId : listPaneIds(s.layout)[0];
+  const mainPanes = listPaneIds(s.layout);
+  const focused = s.focusedPaneId && mainPanes.includes(s.focusedPaneId) ? s.focusedPaneId : mainPanes[0];
   if (!focused) return null;
   const layout = normalizeLayout(s.layout);
-  const seq = Math.max(typeof s.seq === "number" && Number.isFinite(s.seq) ? s.seq : 0, highestIdNumber(layout));
-  return {
+  const highest = Math.max(highestIdNumber(layout), ...Object.values(windows).map((w) => highestIdNumber(w.layout)));
+  const seq = Math.max(typeof s.seq === "number" && Number.isFinite(s.seq) ? s.seq : 0, highest);
+  let state = {
     version: 1,
     isOpen: s.isOpen === true,
     // Full screen is a moment, not a preference: a reload never starts there.
     isFullscreen: false,
-    width: clampWidth(typeof s.width === "number" ? s.width : CANVAS_DEFAULT_WIDTH),
+    width: typeof s.width === "number" ? clampWidth(s.width) : null,
     layout,
+    focusedPaneId: focused,
+    windows,
     panes,
     items,
-    focusedPaneId: focused,
     seq,
     hydrated: true
   };
+  state = foldCanvasWindows(state);
+  for (const id of Object.keys(items)) {
+    if (!placed.has(id)) state = insertInto(state, state.focusedPaneId, id, false);
+  }
+  return state;
 }
 function normalizeLayout(node) {
   if (node.type === "pane") return node;
@@ -362,12 +538,14 @@ function highestIdNumber(node) {
 }
 function canvasReducer(state = createInitialCanvasState(), action) {
   if (!isCanvasAction(action)) return state;
+  if (!state.windows) state = { ...state, windows: {} };
   switch (action.type) {
     case `${P}open`: {
-      const { kind, key, title, data, target = "focused", reveal = true, activate = true, now } = action.payload;
+      const { kind, key, title, data, target = "focused", reveal = true, activate = true, now, splitShare } = action.payload;
       const itemId = canvasItemId(kind, key);
       const existing = state.items[itemId];
       let next = state;
+      let revealIn = action.payload.windowId ?? CANVAS_MAIN_WINDOW;
       if (existing) {
         const item = {
           ...existing,
@@ -377,23 +555,33 @@ function canvasReducer(state = createInitialCanvasState(), action) {
         };
         next = { ...next, items: { ...next.items, [itemId]: item } };
         const pane = paneOf(next, itemId);
-        if (pane && activate) next = { ...withPane(next, { ...pane, activeItemId: itemId }), focusedPaneId: pane.id };
-        if (!pane) next = insertInto(next, next.focusedPaneId, itemId, true);
+        if (pane) {
+          revealIn = canvasWindowOfPane(next, pane.id) ?? CANVAS_MAIN_WINDOW;
+          if (activate) next = focus(withPane(next, { ...pane, activeItemId: itemId }), pane.id);
+        } else {
+          next = ensureWindow(next, revealIn);
+          const frame2 = canvasWindowFrame(next, revealIn) ?? next;
+          next = insertInto(next, frame2.focusedPaneId, itemId, true);
+        }
       } else {
         const item = { id: itemId, kind, key, title: title ?? null, data: data ?? null, openedAt: now, updatedAt: now };
-        next = { ...next, items: { ...next.items, [itemId]: item } };
-        let paneId = next.focusedPaneId;
+        next = ensureWindow({ ...next, items: { ...next.items, [itemId]: item } }, revealIn);
+        const frame2 = canvasWindowFrame(next, revealIn) ?? next;
+        let paneId = frame2.focusedPaneId;
         if (typeof target === "object" && next.panes[target.paneId]) {
           paneId = target.paneId;
+          revealIn = canvasWindowOfPane(next, paneId) ?? revealIn;
         } else if (target === "split-right" || target === "split-down") {
-          const split = addSplit(next, next.focusedPaneId, target === "split-right" ? "horizontal" : "vertical");
-          next = split.state;
-          paneId = split.newPaneId;
+          const split = addSplit(next, frame2.focusedPaneId, target === "split-right" ? "horizontal" : "vertical", splitShare);
+          if (split) {
+            next = split.state;
+            paneId = split.newPaneId;
+          }
         }
         next = insertInto(next, paneId, itemId, activate);
-        if (activate) next = { ...next, focusedPaneId: paneId };
+        if (activate) next = focus(next, paneId);
       }
-      return reveal ? { ...next, isOpen: true } : next;
+      return reveal ? withFrame(next, revealIn, { isOpen: true }) : next;
     }
     case `${P}update`: {
       const { itemId, data, title, now } = action.payload;
@@ -429,12 +617,13 @@ function canvasReducer(state = createInitialCanvasState(), action) {
       const { itemId } = action.payload;
       if (!state.items[itemId]) return state;
       const pane = paneOf(state, itemId);
+      const windowId = pane ? canvasWindowOfPane(state, pane.id) : null;
       let next = detachItem(state, itemId);
       const items = { ...next.items };
       delete items[itemId];
       next = { ...next, items };
       if (pane && next.panes[pane.id]?.itemIds.length === 0) next = dropPane(next, pane.id);
-      return next;
+      return dropEmptyPopOut(next, windowId);
     }
     case `${P}closeOthers`: {
       const { itemId } = action.payload;
@@ -447,26 +636,31 @@ function canvasReducer(state = createInitialCanvasState(), action) {
     case `${P}activate`: {
       const pane = paneOf(state, action.payload.itemId);
       if (!pane) return state;
-      return { ...withPane(state, { ...pane, activeItemId: action.payload.itemId }), focusedPaneId: pane.id };
+      return focus(withPane(state, { ...pane, activeItemId: action.payload.itemId }), pane.id);
+    }
+    case `${P}focusPane`: {
+      const windowId = canvasWindowOfPane(state, action.payload.paneId);
+      const frame2 = windowId ? canvasWindowFrame(state, windowId) : null;
+      if (!windowId || !frame2 || frame2.focusedPaneId === action.payload.paneId) return state;
+      return withFrame(state, windowId, { focusedPaneId: action.payload.paneId });
     }
-    case `${P}focusPane`:
-      return state.panes[action.payload.paneId] ? { ...state, focusedPaneId: action.payload.paneId } : state;
     case `${P}moveItem`: {
       const { itemId, toPaneId, index } = action.payload;
       const from = paneOf(state, itemId);
       if (!from || !state.panes[toPaneId]) return state;
-      if (from.id === toPaneId && index === void 0) return state.focusedPaneId === toPaneId ? state : { ...state, focusedPaneId: toPaneId };
+      if (from.id === toPaneId && index === void 0) return canvasReducer(state, canvasActions.focusPane(toPaneId));
+      const fromWindow = canvasWindowOfPane(state, from.id);
       let next = from.id === toPaneId ? state : detachItem(state, itemId);
-      next = insertInto(next, toPaneId, itemId, true, index);
-      next = { ...next, focusedPaneId: toPaneId };
+      next = focus(insertInto(next, toPaneId, itemId, true, index), toPaneId);
       if (from.id !== toPaneId && next.panes[from.id]?.itemIds.length === 0) next = dropPane(next, from.id);
-      return next;
+      return dropEmptyPopOut(next, fromWindow);
     }
     case `${P}splitPane`: {
-      const { paneId, orientation, moveItemId } = action.payload;
+      const { paneId, orientation, moveItemId, share } = action.payload;
       const pane = state.panes[paneId];
       if (!pane) return state;
-      const split = addSplit(state, paneId, orientation);
+      const split = addSplit(state, paneId, orientation, share);
+      if (!split) return state;
       let next = split.state;
       if (moveItemId && pane.itemIds.includes(moveItemId) && pane.itemIds.length > 1) {
         next = detachItem(next, moveItemId);
@@ -476,23 +670,106 @@ function canvasReducer(state = createInitialCanvasState(), action) {
     }
     case `${P}closePane`: {
       const pane = state.panes[action.payload.paneId];
-      if (!pane) return state;
-      const onlyPane = listPaneIds(state.layout).length === 1;
-      if (onlyPane) return { ...state, isOpen: false, isFullscreen: false };
+      const windowId = pane ? canvasWindowOfPane(state, pane.id) : null;
+      const frame2 = windowId ? canvasWindowFrame(state, windowId) : null;
+      if (!pane || !windowId || !frame2) return state;
+      const onlyPane = listPaneIds(frame2.layout).length === 1;
+      if (onlyPane) {
+        if (windowId !== CANVAS_MAIN_WINDOW && state.windows[windowId]?.role === "pop-out") {
+          return canvasReducer(state, canvasActions.closeWindow(windowId, "dock"));
+        }
+        return withFrame(state, windowId, { isOpen: false, isFullscreen: false });
+      }
       const items = { ...state.items };
       for (const id of pane.itemIds) delete items[id];
       return dropPane({ ...state, items }, pane.id);
     }
-    case `${P}resizeSplit`:
-      return { ...state, layout: resizeSplit(state.layout, action.payload.splitId, action.payload.sizes) };
-    case `${P}setOpen`:
-      return action.payload.open === state.isOpen ? state : { ...state, isOpen: action.payload.open, isFullscreen: action.payload.open ? state.isFullscreen : false };
-    case `${P}toggle`:
-      return { ...state, isOpen: !state.isOpen, isFullscreen: state.isOpen ? false : state.isFullscreen };
-    case `${P}setFullscreen`:
-      return { ...state, isFullscreen: action.payload.fullscreen, isOpen: action.payload.fullscreen ? true : state.isOpen };
-    case `${P}setWidth`:
-      return { ...state, width: clampWidth(action.payload.width) };
+    case `${P}resizeSplit`: {
+      const { splitId, sizes } = action.payload;
+      for (const windowId of listCanvasWindowIds(state)) {
+        const frame2 = canvasWindowFrame(state, windowId);
+        if (frame2 && containsSplit(frame2.layout, splitId)) {
+          return withFrame(state, windowId, { layout: resizeSplit(frame2.layout, splitId, sizes) });
+        }
+      }
+      return state;
+    }
+    case `${P}setOpen`: {
+      const { open, windowId = CANVAS_MAIN_WINDOW } = action.payload;
+      const next = open ? ensureWindow(state, windowId) : state;
+      const frame2 = canvasWindowFrame(next, windowId);
+      if (!frame2 || frame2.isOpen === open) return next;
+      return withFrame(next, windowId, { isOpen: open, isFullscreen: open ? frame2.isFullscreen : false });
+    }
+    case `${P}toggle`: {
+      const windowId = action.payload?.windowId ?? CANVAS_MAIN_WINDOW;
+      const next = ensureWindow(state, windowId);
+      const frame2 = canvasWindowFrame(next, windowId);
+      if (!frame2) return state;
+      return withFrame(next, windowId, { isOpen: !frame2.isOpen, isFullscreen: frame2.isOpen ? false : frame2.isFullscreen });
+    }
+    case `${P}setFullscreen`: {
+      const { fullscreen, windowId = CANVAS_MAIN_WINDOW } = action.payload;
+      const next = fullscreen ? ensureWindow(state, windowId) : state;
+      const frame2 = canvasWindowFrame(next, windowId);
+      if (!frame2) return state;
+      return withFrame(next, windowId, { isFullscreen: fullscreen, isOpen: fullscreen ? true : frame2.isOpen });
+    }
+    case `${P}setWidth`: {
+      const { width, windowId = CANVAS_MAIN_WINDOW } = action.payload;
+      const next = ensureWindow(state, windowId);
+      return withFrame(next, windowId, { width: clampWidth(width) });
+    }
+    case `${P}popOut`: {
+      const { itemId, windowId } = action.payload;
+      const from = paneOf(state, itemId);
+      if (!from || windowId === CANVAS_MAIN_WINDOW) return state;
+      const fromWindow = canvasWindowOfPane(state, from.id) ?? CANVAS_MAIN_WINDOW;
+      if (fromWindow === windowId) return state;
+      let next = ensureWindow(state, windowId, "pop-out", fromWindow);
+      const target = canvasWindowFrame(next, windowId);
+      if (!target) return state;
+      next = detachItem(next, itemId);
+      next = insertInto(next, target.focusedPaneId, itemId, true);
+      next = withFrame(next, windowId, { isOpen: true, focusedPaneId: target.focusedPaneId });
+      if (next.panes[from.id]?.itemIds.length === 0) next = dropPane(next, from.id);
+      next = dropEmptyPopOut(next, fromWindow);
+      if (canvasWindowFrame(next, fromWindow) && windowItemIds(next, fromWindow).length === 0) {
+        next = withFrame(next, fromWindow, { isOpen: false, isFullscreen: false });
+      }
+      return next;
+    }
+    case `${P}dockBack`: {
+      const { itemId } = action.payload;
+      const windowId = canvasWindowOfItem(state, itemId);
+      if (!windowId || windowId === CANVAS_MAIN_WINDOW) return state;
+      const frame2 = state.windows[windowId];
+      if (!frame2) return state;
+      const home = canvasWindowFrame(state, frame2.home) ? frame2.home : CANVAS_MAIN_WINDOW;
+      let next = sendHome(state, itemId, home, true);
+      next = withFrame(next, home, { isOpen: true });
+      const left = paneOf(state, itemId);
+      if (left && next.panes[left.id]?.itemIds.length === 0) next = dropPane(next, left.id);
+      return dropEmptyPopOut(next, windowId);
+    }
+    case `${P}closeWindow`: {
+      const { windowId, mode } = action.payload;
+      const frame2 = state.windows[windowId];
+      if (!frame2) return state;
+      const itemIds = windowItemIds(state, windowId);
+      let next = state;
+      if (mode === "close") {
+        const items = { ...next.items };
+        for (const id of itemIds) delete items[id];
+        next = { ...next, items };
+      } else if (itemIds.length > 0) {
+        const home = canvasWindowFrame(state, frame2.home) ? frame2.home : CANVAS_MAIN_WINDOW;
+        const active = state.panes[frame2.focusedPaneId]?.activeItemId ?? null;
+        for (const id of itemIds) next = sendHome(next, id, home, id === active);
+        next = withFrame(next, home, { isOpen: true });
+      }
+      return removeWindow(next, windowId);
+    }
     case `${P}hydrate`: {
       const snapshot = action.payload.snapshot ? sanitizeCanvasSnapshot(action.payload.snapshot) : null;
       if (!snapshot) return { ...state, hydrated: true };
@@ -539,6 +816,64 @@ function bindCanvasToReduxStore(store, select) {
   };
 }
 
+// src/core/remote.ts
+function createRemoteCanvasStore(options) {
+  let state = options.initialSnapshot;
+  const listeners = /* @__PURE__ */ new Set();
+  const report = options.onError ?? ((error, action) => console.error(`[@ai-matrx/canvas] remote dispatch of ${action.type} failed`, error));
+  const stop = options.subscribe((snapshot) => {
+    const next = shareStructure(state, snapshot);
+    if (next === state) return;
+    state = next;
+    for (const listener of [...listeners]) listener();
+  });
+  return {
+    authority: "remote",
+    getState: () => state,
+    dispatch(action) {
+      if (!isCanvasAction(action)) return;
+      try {
+        void Promise.resolve(options.dispatch(action)).catch((error) => report(error, action));
+      } catch (error) {
+        report(error, action);
+      }
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    dispose() {
+      stop();
+      listeners.clear();
+    }
+  };
+}
+function shareStructure(prev, next) {
+  if (Object.is(prev, next)) return prev;
+  if (typeof prev !== "object" || typeof next !== "object" || prev === null || next === null) return next;
+  if (Array.isArray(prev) !== Array.isArray(next)) return next;
+  if (Array.isArray(prev) && Array.isArray(next)) {
+    let same2 = prev.length === next.length;
+    const out2 = next.map((value, i) => {
+      const shared = i < prev.length ? shareStructure(prev[i], value) : value;
+      if (shared !== prev[i]) same2 = false;
+      return shared;
+    });
+    return same2 ? prev : out2;
+  }
+  const a = prev;
+  const b = next;
+  const keys = Object.keys(b);
+  let same = keys.length === Object.keys(a).length;
+  const out = {};
+  for (const key of keys) {
+    const shared = key in a ? shareStructure(a[key], b[key]) : b[key];
+    if (shared !== a[key] || !(key in a)) same = false;
+    out[key] = shared;
+  }
+  return same ? prev : out;
+}
+
 // src/core/persistence.ts
 var CANVAS_STORAGE_KEY = "ai-matrx.canvas.v1";
 function createLocalStorageCanvasPersistence(key = CANVAS_STORAGE_KEY, storage = typeof window === "undefined" ? null : safeLocalStorage()) {
@@ -555,6 +890,16 @@ function createLocalStorageCanvasPersistence(key = CANVAS_STORAGE_KEY, storage =
     }
   };
 }
+function createKeyValueCanvasPersistence(kv, key = CANVAS_STORAGE_KEY) {
+  return {
+    async load() {
+      const raw = await kv.get(key);
+      if (raw === void 0 || raw === null) return null;
+      return typeof raw === "string" ? JSON.parse(raw) : raw;
+    },
+    save: (snapshot) => kv.set(key, JSON.parse(JSON.stringify(snapshot)))
+  };
+}
 function safeLocalStorage() {
   try {
     const probe = "__mxc_probe__";
@@ -566,6 +911,7 @@ function safeLocalStorage() {
   }
 }
 function toPersistableSnapshot(state, isRestorable) {
+  state = foldCanvasWindows(state);
   const keep = new Set(
     Object.values(state.items).filter((item) => isRestorable(item.kind)).map((item) => item.id)
   );
@@ -592,22 +938,164 @@ function toPersistableSnapshot(state, isRestorable) {
   return { ...state, items, panes, layout, focusedPaneId };
 }
 
+// src/core/rules.ts
+var CANVAS_WEB_LAYOUT_RULES = {
+  defaultWidth: CANVAS_DEFAULT_WIDTH,
+  minWidth: CANVAS_MIN_WIDTH,
+  centreMinWidth: 420,
+  stackSplit: 0.5,
+  sideSplit: 0.5,
+  paneMinWidth: 0
+};
+var CANVAS_DESKTOP_LAYOUT_RULES = {
+  defaultWidth: { fraction: 0.36 },
+  minWidth: CANVAS_MIN_WIDTH,
+  centreMinWidth: 520,
+  stackSplit: 0.7,
+  sideSplit: 0.5,
+  paneMinWidth: 360
+};
+var clampFraction = (value, fallback) => Number.isFinite(value) ? Math.min(0.88, Math.max(0.12, value)) : fallback;
+function resolveCanvasLayoutRules(rules) {
+  const merged = { ...CANVAS_WEB_LAYOUT_RULES, ...rules ?? {} };
+  const positive = (value, fallback) => Number.isFinite(value) && value >= 0 ? value : fallback;
+  return {
+    defaultWidth: typeof merged.defaultWidth === "number" ? positive(merged.defaultWidth, CANVAS_DEFAULT_WIDTH) : { fraction: Math.min(1, Math.max(0.05, Number.isFinite(merged.defaultWidth.fraction) ? merged.defaultWidth.fraction : 0.36)) },
+    minWidth: positive(merged.minWidth, CANVAS_MIN_WIDTH),
+    centreMinWidth: positive(merged.centreMinWidth, CANVAS_WEB_LAYOUT_RULES.centreMinWidth),
+    stackSplit: clampFraction(merged.stackSplit, 0.5),
+    sideSplit: clampFraction(merged.sideSplit, 0.5),
+    paneMinWidth: positive(merged.paneMinWidth, 0)
+  };
+}
+function defaultCanvasWidth(rules, region) {
+  if (typeof rules.defaultWidth === "number") return rules.defaultWidth;
+  return region > 0 ? Math.round(region * rules.defaultWidth.fraction) : CANVAS_DEFAULT_WIDTH;
+}
+function fitCanvasWidth(stored, region, rules) {
+  const wanted = stored ?? defaultCanvasWidth(rules, region);
+  if (region <= 0) return Math.max(rules.minWidth, wanted);
+  return Math.max(rules.minWidth, Math.min(wanted, region - rules.centreMinWidth));
+}
+function clampDraggedCanvasWidth(next, region, rules) {
+  const max = Math.max(rules.minWidth, region - rules.centreMinWidth);
+  return Math.min(max, Math.max(rules.minWidth, Math.round(next)));
+}
+function shouldStackSplit(width, children, rules) {
+  return rules.paneMinWidth > 0 && width > 0 && width < rules.paneMinWidth * children;
+}
+
+// src/core/commands.ts
+var CANVAS_SHORTCUTS = [
+  { id: "canvas.toggle", accelerator: "CmdOrCtrl+\\", when: "presented", label: "Show or hide canvas", web: true },
+  { id: "canvas.exitFullscreen", accelerator: "Escape", when: "fullscreen", label: "Restore canvas", web: true },
+  { id: "canvas.toggleFullscreen", accelerator: "CmdOrCtrl+Shift+Enter", when: "canvas-focus", label: "Expand canvas", web: true },
+  { id: "canvas.splitRight", accelerator: "CmdOrCtrl+Alt+\\", when: "canvas-focus", label: "Split right", web: true },
+  { id: "canvas.splitDown", accelerator: "CmdOrCtrl+Alt+Shift+\\", when: "canvas-focus", label: "Split down", web: true },
+  { id: "canvas.closeTab", accelerator: "CmdOrCtrl+W", when: "canvas-focus", label: "Close tab", web: false },
+  { id: "canvas.nextTab", accelerator: "Ctrl+Tab", when: "canvas-focus", label: "Next tab", web: false },
+  { id: "canvas.previousTab", accelerator: "Ctrl+Shift+Tab", when: "canvas-focus", label: "Previous tab", web: false }
+];
+function canvasShortcutHint(id, isMac) {
+  const shortcut = CANVAS_SHORTCUTS.find((entry) => entry.id === id);
+  if (!shortcut) return null;
+  return shortcut.accelerator.split("+").map((part) => {
+    if (part === "CmdOrCtrl") return isMac ? "\u2318" : "Ctrl+";
+    if (part === "Ctrl") return isMac ? "\u2303" : "Ctrl+";
+    if (part === "Alt") return isMac ? "\u2325" : "Alt+";
+    if (part === "Shift") return isMac ? "\u21E7" : "Shift+";
+    if (part === "Escape") return "Esc";
+    return part;
+  }).join("");
+}
+function runCanvasCommand(controller, id, windowId = controller.windowId) {
+  const state = controller.getState();
+  const frame2 = canvasWindowFrame(state, windowId);
+  const pane = frame2 ? state.panes[frame2.focusedPaneId] : void 0;
+  switch (id) {
+    case "canvas.toggle":
+      controller.toggle(windowId);
+      return true;
+    case "canvas.toggleFullscreen":
+      controller.setFullscreen(!(frame2?.isFullscreen ?? false), windowId);
+      return true;
+    case "canvas.exitFullscreen":
+      if (!frame2?.isFullscreen) return false;
+      controller.setFullscreen(false, windowId);
+      return true;
+    case "canvas.closeTab":
+      if (!frame2?.isOpen || !pane?.activeItemId) return false;
+      controller.close(pane.activeItemId);
+      return true;
+    case "canvas.nextTab":
+    case "canvas.previousTab": {
+      if (!frame2?.isOpen || !pane?.activeItemId || pane.itemIds.length < 2) return false;
+      const at = pane.itemIds.indexOf(pane.activeItemId);
+      const step = id === "canvas.nextTab" ? 1 : -1;
+      const next = pane.itemIds[(at + step + pane.itemIds.length) % pane.itemIds.length];
+      if (next) controller.activate(next);
+      return true;
+    }
+    case "canvas.splitRight":
+    case "canvas.splitDown":
+      if (!frame2?.isOpen || !pane) return false;
+      controller.splitPane(pane.id, id === "canvas.splitRight" ? "horizontal" : "vertical", pane.itemIds.length > 1 ? pane.activeItemId ?? void 0 : void 0);
+      return true;
+    default:
+      return false;
+  }
+}
+var CODE_FOR = { "\\": "Backslash", Tab: "Tab", Escape: "Escape", Enter: "Enter" };
+function matchesCanvasAccelerator(input, accelerator, isMac) {
+  const parts = accelerator.split("+");
+  const key = parts.pop() ?? "";
+  const want = { meta: false, ctrl: false, alt: false, shift: false };
+  for (const part of parts) {
+    if (part === "CmdOrCtrl") want[isMac ? "meta" : "ctrl"] = true;
+    else if (part === "Cmd" || part === "Meta") want.meta = true;
+    else if (part === "Ctrl") want.ctrl = true;
+    else if (part === "Alt") want.alt = true;
+    else if (part === "Shift") want.shift = true;
+  }
+  if (input.metaKey !== want.meta || input.ctrlKey !== want.ctrl || input.altKey !== want.alt || input.shiftKey !== want.shift) return false;
+  const code = CODE_FOR[key] ?? (/^[A-Z]$/i.test(key) ? `Key${key.toUpperCase()}` : void 0);
+  if (code && input.code === code) return true;
+  return input.key.toLowerCase() === key.toLowerCase();
+}
+
 // src/core/controller.ts
 var consoleCanvasErrorSink = (report) => {
   console.error(`[@ai-matrx/canvas] ${report.code}: ${report.message}`, report.detail ?? "");
 };
 function createCanvasController(options) {
+  const shared = {
+    options,
+    onError: options.onError ?? consoleCanvasErrorSink,
+    rules: resolveCanvasLayoutRules(options.layoutRules),
+    presentations: /* @__PURE__ */ new Map(),
+    presentationListeners: /* @__PURE__ */ new Set(),
+    views: /* @__PURE__ */ new Map(),
+    started: /* @__PURE__ */ new Map(),
+    sessionStop: null
+  };
+  return view(shared, canvasWindowId(options.windowId ?? CANVAS_MAIN_WINDOW));
+}
+function view(shared, windowId) {
+  const cached = shared.views.get(windowId);
+  if (cached) return cached;
+  const { options, onError, rules } = shared;
   const { store, persistence = null } = options;
-  const onError = options.onError ?? consoleCanvasErrorSink;
   const isRestorable = options.isRestorable ?? (() => true);
   const dispatch = (action) => store.dispatch(action);
-  let presentations = 0;
-  const presentationListeners = /* @__PURE__ */ new Set();
   const notifyPresentation = () => {
-    for (const listener of [...presentationListeners]) listener();
+    for (const listener of [...shared.presentationListeners]) listener();
   };
+  const shareFor = (orientation) => orientation === "vertical" ? rules.stackSplit : rules.sideSplit;
   const controller = {
     store,
+    windowId,
+    rules,
+    forWindow: (id) => view(shared, canvasWindowId(id)),
     getState: () => store.getState(),
     open(input) {
       if (options.isKnownKind && !options.isKnownKind(input.kind)) {
@@ -625,7 +1113,10 @@ function createCanvasController(options) {
           return null;
         }
       }
-      dispatch(canvasActions.open(input));
+      const target = input.target ?? "focused";
+      const splitShare = target === "split-down" ? rules.stackSplit : target === "split-right" ? rules.sideSplit : void 0;
+      const resolved = input.windowId || windowId === CANVAS_MAIN_WINDOW ? input : { ...input, windowId };
+      dispatch(canvasActions.open(resolved, splitShare === void 0 ? void 0 : { splitShare }));
       return canvasItemId(input.kind, input.key);
     },
     update(itemId, patch) {
@@ -651,42 +1142,76 @@ function createCanvasController(options) {
     activate: (itemId) => dispatch(canvasActions.activate(itemId)),
     focusPane: (paneId) => dispatch(canvasActions.focusPane(paneId)),
     moveItem: (itemId, toPaneId, index) => dispatch(canvasActions.moveItem(itemId, toPaneId, index)),
-    splitPane: (paneId, orientation, moveItemId) => dispatch(canvasActions.splitPane(paneId, orientation, moveItemId)),
+    splitPane: (paneId, orientation, moveItemId) => dispatch(canvasActions.splitPane(paneId, orientation, moveItemId, shareFor(orientation))),
     closePane: (paneId) => dispatch(canvasActions.closePane(paneId)),
     resizeSplit: (splitId, sizes) => dispatch(canvasActions.resizeSplit(splitId, sizes)),
-    show: () => dispatch(canvasActions.setOpen(true)),
-    hide: () => dispatch(canvasActions.setOpen(false)),
-    toggle: () => dispatch(canvasActions.toggle()),
-    setFullscreen: (fullscreen) => dispatch(canvasActions.setFullscreen(fullscreen)),
-    setWidth: (width) => dispatch(canvasActions.setWidth(width)),
+    show: (w = windowId) => dispatch(canvasActions.setOpen(true, w)),
+    hide: (w = windowId) => dispatch(canvasActions.setOpen(false, w)),
+    toggle: (w = windowId) => dispatch(canvasActions.toggle(w)),
+    setFullscreen: (fullscreen, w = windowId) => dispatch(canvasActions.setFullscreen(fullscreen, w)),
+    setWidth: (width, w = windowId) => dispatch(canvasActions.setWidth(width, w)),
+    async popOut(itemId) {
+      const item = store.getState().items[itemId];
+      if (!item) return null;
+      const port = options.windowPorts?.().popOut;
+      if (!port) {
+        onError({ code: "pop-out-unavailable", message: "This app cannot pop canvas tabs out into their own window.", detail: { itemId } });
+        return null;
+      }
+      let result;
+      try {
+        result = await port(item);
+      } catch (error) {
+        onError({ code: "pop-out-failed", message: "The window for this tab could not be opened.", detail: error });
+        return null;
+      }
+      if (!result) {
+        onError({ code: "pop-out-refused", message: "The app declined to pop this tab out.", detail: { itemId } });
+        return null;
+      }
+      const target = canvasWindowId(result.windowId);
+      dispatch(canvasActions.popOut(itemId, target));
+      return target;
+    },
+    dockBack(itemId) {
+      const state = store.getState();
+      const from = canvasWindowOfItem(state, itemId);
+      if (!from || from === CANVAS_MAIN_WINDOW || state.windows[from]?.role !== "pop-out") return false;
+      dispatch(canvasActions.dockBack(itemId));
+      options.windowPorts?.().dockBack?.(itemId, from);
+      return true;
+    },
+    closeWindow: (w, mode = "dock") => dispatch(canvasActions.closeWindow(w, mode)),
     has: (kind, key) => canvasItemId(kind, key) in store.getState().items,
-    isPresented: () => presentations > 0,
-    registerPresentation() {
-      presentations += 1;
+    isPresented: (w = windowId) => (shared.presentations.get(w) ?? 0) > 0,
+    registerPresentation(w = windowId) {
+      shared.presentations.set(w, (shared.presentations.get(w) ?? 0) + 1);
       notifyPresentation();
       let done = false;
       return () => {
         if (done) return;
         done = true;
-        presentations -= 1;
+        shared.presentations.set(w, Math.max(0, (shared.presentations.get(w) ?? 1) - 1));
         notifyPresentation();
       };
     },
     subscribePresentation(listener) {
-      presentationListeners.add(listener);
-      return () => presentationListeners.delete(listener);
+      shared.presentationListeners.add(listener);
+      return () => shared.presentationListeners.delete(listener);
     },
     start() {
       let disposed = false;
       let timer = null;
       let lastSaved = null;
+      const owns = store.authority !== "remote";
+      const memory = owns ? persistence : null;
       const save = () => {
         timer = null;
         const state = store.getState();
-        if (!persistence || !state.hydrated || state === lastSaved) return;
+        if (!memory || !state.hydrated || state === lastSaved) return;
         lastSaved = state;
         try {
-          void Promise.resolve(persistence.save(toPersistableSnapshot(state, isRestorable))).catch(
+          void Promise.resolve(memory.save(toPersistableSnapshot(state, isRestorable))).catch(
             (error) => onError({ code: "persistence-save", message: "Saving the canvas layout failed.", detail: error })
           );
         } catch (error) {
@@ -695,18 +1220,18 @@ function createCanvasController(options) {
       };
       let seen = store.getState();
       const unsubscribe = store.subscribe(() => {
-        if (!persistence || disposed) return;
+        if (!memory || disposed) return;
         const current = store.getState();
         if (current === seen) return;
         seen = current;
         if (timer) clearTimeout(timer);
         timer = setTimeout(save, options.saveDelayMs ?? 250);
       });
-      if (store.getState().hydrated) {
-      } else if (!persistence) {
+      if (!owns || store.getState().hydrated) {
+      } else if (!memory) {
         dispatch(canvasActions.hydrate(null));
       } else {
-        Promise.resolve().then(() => persistence.load()).then(
+        Promise.resolve().then(() => memory.load()).then(
           (snapshot) => {
             if (disposed) return;
             const openedThisSession = store.getState().isOpen;
@@ -725,9 +1250,11 @@ function createCanvasController(options) {
           }
         );
       }
+      const stopSessions = startSessions(shared, windowId);
       return () => {
         disposed = true;
         unsubscribe();
+        stopSessions();
         if (timer) {
           clearTimeout(timer);
           save();
@@ -735,24 +1262,136 @@ function createCanvasController(options) {
       };
     }
   };
+  shared.views.set(windowId, controller);
   return controller;
 }
+function startSessions(shared, windowId) {
+  const { options, onError } = shared;
+  const sessions = options.sessions;
+  if (!sessions) return () => void 0;
+  shared.started.set(windowId, (shared.started.get(windowId) ?? 0) + 1);
+  let stopped = false;
+  if (!shared.sessionStop) {
+    const store = options.store;
+    const local = store.authority !== "remote";
+    let tracked = null;
+    const call = (fn) => {
+      try {
+        fn();
+      } catch (error) {
+        onError({ code: "session-hook", message: "A canvas session hook threw.", detail: error });
+      }
+    };
+    const read = (fn) => {
+      try {
+        return fn();
+      } catch (error) {
+        onError({ code: "session-hook", message: "A canvas kind's sessionKey threw.", detail: error });
+        return null;
+      }
+    };
+    let prevItems = /* @__PURE__ */ new Set();
+    const snapshot = (state) => {
+      const out = /* @__PURE__ */ new Map();
+      for (const w of listCanvasWindowIds(state)) {
+        if (!local && !shared.started.has(w)) continue;
+        const frame2 = canvasWindowFrame(state, w);
+        if (!frame2) continue;
+        for (const paneId of listPaneIds(frame2.layout)) {
+          for (const itemId of state.panes[paneId]?.itemIds ?? []) {
+            const item = state.items[itemId];
+            const hooks = item ? sessions(item.kind) : void 0;
+            if (!item || !hooks) continue;
+            const key = read(() => hooks.sessionKey(item));
+            if (key) out.set(itemId, { item, key, windowId: w });
+          }
+        }
+      }
+      return out;
+    };
+    const sync = () => {
+      const state = options.store.getState();
+      if (!state.hydrated) return;
+      const next = snapshot(state);
+      const first = tracked === null;
+      const prev = tracked ?? /* @__PURE__ */ new Map();
+      for (const [id, entry] of prev) {
+        const now = next.get(id);
+        if (now && now.key === entry.key) continue;
+        const hooks = sessions(entry.item.kind);
+        const reason = state.items[id] && !now ? "leave" : "close";
+        call(() => hooks?.onDetach?.({ item: entry.item, sessionKey: entry.key, windowId: entry.windowId, reason }));
+      }
+      for (const [id, entry] of next) {
+        const before = prev.get(id);
+        if (before && before.key === entry.key) continue;
+        const hooks = sessions(entry.item.kind);
+        const reason = first ? "restore" : prevItems.has(id) ? "arrive" : "open";
+        call(() => hooks?.onAttach?.({ item: entry.item, sessionKey: entry.key, windowId: entry.windowId, reason }));
+      }
+      tracked = next;
+      prevItems = new Set(Object.keys(state.items));
+    };
+    let lastState = null;
+    const unsubscribe = store.subscribe(() => {
+      const state = store.getState();
+      if (state === lastState) return;
+      lastState = state;
+      sync();
+    });
+    sync();
+    shared.sessionStop = () => {
+      unsubscribe();
+      for (const entry of tracked?.values() ?? []) {
+        const hooks = sessions(entry.item.kind);
+        call(() => hooks?.onDetach?.({ item: entry.item, sessionKey: entry.key, windowId: entry.windowId, reason: "unmount" }));
+      }
+      tracked = null;
+    };
+  }
+  return () => {
+    if (stopped) return;
+    stopped = true;
+    const left = (shared.started.get(windowId) ?? 1) - 1;
+    if (left > 0) shared.started.set(windowId, left);
+    else shared.started.delete(windowId);
+    if (shared.started.size === 0 && shared.sessionStop) {
+      const stop = shared.sessionStop;
+      shared.sessionStop = null;
+      stop();
+    }
+  };
+}
 
 // src/core/selectors.ts
-var selectCanvasIsOpen = (s) => s.isOpen;
-var selectCanvasIsFullscreen = (s) => s.isFullscreen;
-var selectCanvasWidth = (s) => s.width;
-var selectCanvasLayout = (s) => s.layout;
-var selectCanvasFocusedPaneId = (s) => s.focusedPaneId;
+var frame = (s, w) => canvasWindowFrame(s, w ?? CANVAS_MAIN_WINDOW);
+var selectCanvasIsOpen = (s, windowId) => frame(s, windowId)?.isOpen ?? false;
+var selectCanvasIsFullscreen = (s, windowId) => frame(s, windowId)?.isFullscreen ?? false;
+var selectCanvasWidth = (s, windowId) => frame(s, windowId)?.width ?? null;
+var selectCanvasLayout = (s, windowId) => frame(s, windowId)?.layout ?? null;
+var selectCanvasFocusedPaneId = (s, windowId) => frame(s, windowId)?.focusedPaneId ?? null;
 var selectCanvasIsHydrated = (s) => s.hydrated;
 var selectCanvasItemCount = (s) => Object.keys(s.items).length;
 var selectCanvasPane = (s, paneId) => s.panes[paneId];
 var selectCanvasItem = (s, itemId) => s.items[itemId];
-function selectCanvasPaneCount(s) {
-  return listPaneIds(s.layout).length;
+function selectCanvasPaneCount(s, windowId) {
+  const layout = frame(s, windowId)?.layout;
+  return layout ? listPaneIds(layout).length : 0;
 }
-function selectCanvasActiveItem(s) {
-  const pane = s.panes[s.focusedPaneId];
+function selectCanvasWindowItemCount(s, windowId) {
+  const layout = frame(s, windowId)?.layout;
+  if (!layout) return 0;
+  return listPaneIds(layout).reduce((sum, paneId) => sum + (s.panes[paneId]?.itemIds.length ?? 0), 0);
+}
+function selectCanvasActiveItem(s, windowId) {
+  const f = frame(s, windowId);
+  const pane = f ? s.panes[f.focusedPaneId] : void 0;
   return pane?.activeItemId ? s.items[pane.activeItemId] ?? null : null;
 }
+var NO_WINDOWS = Object.freeze({});
+function selectCanvasWindows(s) {
+  return s.windows ?? NO_WINDOWS;
+}
+var selectCanvasExtraWindow = (s, windowId) => s.windows?.[windowId];
+var selectCanvasWindowOfItem = canvasWindowOfItem;
 //# sourceMappingURL=index.cjs.map