@ai-matrx/canvas 0.1.0 → 0.2.0

package/dist/react.cjs

@@ -32,11 +32,20 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/react.ts
 var react_exports = {};
 __export(react_exports, {
+  BrowserBar: () => BrowserBar,
+  BrowserTabs: () => BrowserTabs,
   CanvasColumn: () => CanvasColumn,
   CanvasFrame: () => CanvasFrame,
+  CanvasHeaderButton: () => CanvasHeaderButton,
+  CanvasMenuTrigger: () => CanvasMenuTrigger,
   CanvasPaneView: () => CanvasPaneView,
+  CanvasPanel: () => CanvasPanel,
+  CanvasPanelEmpty: () => CanvasPanelEmpty,
   CanvasProvider: () => CanvasProvider,
+  CanvasTab: () => CanvasTab,
   CanvasToggle: () => CanvasToggle,
+  CanvasWindowScope: () => CanvasWindowScope,
+  canvasSessionKey: () => canvasSessionKey,
   defineCanvasKind: () => defineCanvasKind,
   getCanvasKind: () => getCanvasKind,
   itemTitle: () => itemTitle,
@@ -49,16 +58,19 @@ __export(react_exports, {
   useCanvasIsPresented: () => useCanvasIsPresented,
   useCanvasKind: () => useCanvasKind,
   useCanvasKinds: () => useCanvasKinds,
+  useCanvasNativeBodies: () => useCanvasNativeBodies,
   useCanvasState: () => useCanvasState,
+  useCanvasWindowId: () => useCanvasWindowId,
   useOptionalCanvas: () => useOptionalCanvas,
   useOptionalCanvasState: () => useOptionalCanvasState
 });
 module.exports = __toCommonJS(react_exports);
 
 // src/react/provider.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 
 // 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;
@@ -103,12 +115,19 @@ function findNonJson(value, path = "data") {
       return path;
   }
 }
+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);
 }
@@ -119,7 +138,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 {
@@ -127,7 +147,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(
@@ -138,13 +158,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)
     )
   };
 }
@@ -163,6 +183,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) {
@@ -193,8 +217,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() }
@@ -209,19 +237,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` })
 };
@@ -234,15 +275,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;
@@ -252,6 +358,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);
@@ -268,27 +378,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];
@@ -306,46 +418,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;
@@ -358,12 +520,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,
@@ -373,23 +537,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;
@@ -425,12 +599,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;
@@ -443,26 +618,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);
@@ -472,23 +652,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 };
@@ -553,6 +816,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)
   );
@@ -579,22 +843,156 @@ 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 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, isMac3) {
+  const shortcut = CANVAS_SHORTCUTS.find((entry) => entry.id === id);
+  if (!shortcut) return null;
+  return shortcut.accelerator.split("+").map((part) => {
+    if (part === "CmdOrCtrl") return isMac3 ? "\u2318" : "Ctrl+";
+    if (part === "Ctrl") return isMac3 ? "\u2303" : "Ctrl+";
+    if (part === "Alt") return isMac3 ? "\u2325" : "Alt+";
+    if (part === "Shift") return isMac3 ? "\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, isMac3) {
+  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[isMac3 ? "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)) {
@@ -612,7 +1010,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) {
@@ -638,42 +1039,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) {
@@ -682,18 +1117,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;
@@ -712,9 +1147,11 @@ function createCanvasController(options) {
           }
         );
       }
+      const stopSessions = startSessions(shared, windowId);
       return () => {
         disposed = true;
         unsubscribe();
+        stopSessions();
         if (timer) {
           clearTimeout(timer);
           save();
@@ -722,26 +1159,245 @@ 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 selectCanvasItemCount = (s) => Object.keys(s.items).length;
-function selectCanvasPaneCount(s) {
-  return listPaneIds(s.layout).length;
+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;
+function selectCanvasPaneCount(s, windowId) {
+  const layout = frame(s, windowId)?.layout;
+  return layout ? listPaneIds(layout).length : 0;
+}
+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);
+}
+var NO_WINDOWS = Object.freeze({});
+
+// src/react/layer.tsx
+var import_react = require("react");
+var import_react_dom = require("react-dom");
+var import_jsx_runtime = require("react/jsx-runtime");
+function createCanvasLayer(getPorts) {
+  let elements = [];
+  let nextId = 1;
+  const domListeners = /* @__PURE__ */ new Set();
+  const emitDom = () => {
+    for (const listener of [...domListeners]) listener();
+  };
+  let blocking = 0;
+  const measures = /* @__PURE__ */ new Set();
+  const last = /* @__PURE__ */ new Map();
+  const remeasure = () => {
+    for (const measure of [...measures]) measure();
+  };
+  return {
+    show(element) {
+      const host = getPorts().overlay;
+      if (host) return host.show(element);
+      const id = nextId++;
+      elements = [...elements, [id, element]];
+      emitDom();
+      let done = false;
+      return () => {
+        if (done) return;
+        done = true;
+        elements = elements.filter(([key]) => key !== id);
+        emitDom();
+      };
+    },
+    beginBlocking() {
+      blocking += 1;
+      remeasure();
+      let done = false;
+      return () => {
+        if (done) return;
+        done = true;
+        blocking -= 1;
+        remeasure();
+      };
+    },
+    isBlocked: () => blocking > 0,
+    dom: {
+      list: () => elements,
+      subscribe(listener) {
+        domListeners.add(listener);
+        return () => domListeners.delete(listener);
+      }
+    },
+    native: {
+      register(measure) {
+        measures.add(measure);
+        return () => measures.delete(measure);
+      },
+      report(itemId, rect, info) {
+        const key = rect ? `${rect.x},${rect.y},${rect.width},${rect.height},${rect.devicePixelRatio},${info.visible},${info.windowId}` : `null,${info.windowId}`;
+        if (last.get(itemId) === key) return;
+        if (rect) last.set(itemId, key);
+        else last.delete(itemId);
+        getPorts().onNativeBodyFrame?.(itemId, rect, info);
+      },
+      remeasure
+    }
+  };
+}
+function CanvasDomOverlay({ layer }) {
+  const elements = (0, import_react.useSyncExternalStore)(layer.dom.subscribe, layer.dom.list, layer.dom.list);
+  const [mounted, setMounted] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => setMounted(true), []);
+  if (!mounted || elements.length === 0 || typeof document === "undefined") return null;
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mxc-overlay", "aria-hidden": "true", children: elements.map(([id, element]) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FloatingView, { element }, id)) }),
+    document.body
+  );
+}
+function FloatingView({ element }) {
+  if (element.type === "drop-indicator") {
+    const { x, y, width, height } = element.rect;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mxc-drop-indicator", style: { left: x, top: y, width, height } });
+  }
+  if (element.type === "tooltip") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tooltip, { element });
+  return null;
+}
+function Tooltip({ element }) {
+  const ref = (0, import_react.useRef)(null);
+  const { anchor, side, text } = element;
+  const top = side === "bottom" ? anchor.y + anchor.height + 6 : anchor.y - 6;
+  const centre = anchor.x + anchor.width / 2;
+  (0, import_react.useLayoutEffect)(() => {
+    const el = ref.current;
+    if (!el) return;
+    const width = el.offsetWidth;
+    const left = Math.min(Math.max(4, centre - width / 2), Math.max(4, window.innerWidth - width - 4));
+    el.style.left = `${left}px`;
+    el.style.visibility = "visible";
+  }, [centre, text]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: "mxc-tooltip", "data-side": side, role: "tooltip", style: { top, left: centre, visibility: "hidden" }, children: text });
+}
+function toCanvasRect(rect) {
+  return { x: rect.left, y: rect.top, width: rect.width, height: rect.height };
 }
 
 // src/react/registry.ts
 function defineCanvasKind(kind) {
-  if (!kind.component && !kind.load) {
-    throw new Error(`[@ai-matrx/canvas] kind "${kind.id}" needs a component or a load().`);
+  if (!kind.component && !kind.load && kind.body !== "native" && !kind.unavailable) {
+    throw new Error(`[@ai-matrx/canvas] kind "${kind.id}" needs a component, a load(), a native body or an unavailable() state.`);
   }
   return kind;
 }
+function canvasSessionKey(kind, item) {
+  if (kind.sessionKey) return kind.sessionKey(item.data, item);
+  const data = item.data;
+  if (data && typeof data === "object" && !Array.isArray(data)) {
+    const key = data.sessionKey;
+    return typeof key === "string" && key ? key : null;
+  }
+  return null;
+}
 var REGISTRY = /* @__PURE__ */ Symbol.for("ai-matrx.canvas.kinds");
 function registry() {
   const g = globalThis;
@@ -783,76 +1439,125 @@ function getCanvasKindsVersion() {
 }
 
 // src/react/provider.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var PHONE_MAX_WIDTH = 767;
 var isPhoneViewport = () => typeof window !== "undefined" && window.innerWidth <= PHONE_MAX_WIDTH;
+var isMacPlatform = () => typeof navigator !== "undefined" && /mac|iphone|ipad/i.test(navigator.userAgentData?.platform ?? navigator.platform ?? "");
 function escapeBelongsElsewhere(event) {
   if (event.defaultPrevented) return true;
   const active = typeof document === "undefined" ? null : document.activeElement;
   return !!active?.closest?.('[role="menu"], [role="dialog"], [role="alertdialog"], [role="listbox"]');
 }
-var CanvasContext = (0, import_react.createContext)(null);
+var CanvasContext = (0, import_react2.createContext)(null);
+function sessionHooksFor(kindId) {
+  const kind = getCanvasKind(kindId);
+  if (!kind || kind.restore !== "session") return void 0;
+  return {
+    sessionKey: (item) => canvasSessionKey(kind, item),
+    onAttach: kind.onAttach,
+    onDetach: kind.onDetach
+  };
+}
 function CanvasProvider({
   children,
   store,
   persistence,
   onError,
   hotkeys = true,
-  itemActions,
-  popOut
+  windowId: windowIdProp,
+  layoutRules,
+  regionWidth = null,
+  tabStrip = "auto",
+  ...hostPorts
 }) {
-  const [controller] = (0, import_react.useState)(
-    () => createCanvasController({
+  const portsRef = (0, import_react2.useRef)(hostPorts);
+  portsRef.current = hostPorts;
+  const [{ controller, layer }] = (0, import_react2.useState)(() => ({
+    controller: createCanvasController({
       store: store ?? createCanvasStore(),
       persistence: persistence === void 0 ? createLocalStorageCanvasPersistence() : persistence,
       isRestorable: (kind) => getCanvasKind(kind)?.restore !== false,
       mayRestoreOpen: () => !isPhoneViewport(),
-      onError
-    })
-  );
-  (0, import_react.useEffect)(() => controller.start(), [controller]);
-  (0, import_react.useEffect)(() => {
+      onError,
+      windowId: windowIdProp ?? CANVAS_MAIN_WINDOW,
+      layoutRules,
+      windowPorts: () => portsRef.current,
+      sessions: sessionHooksFor
+    }),
+    layer: createCanvasLayer(() => portsRef.current)
+  }));
+  const windowId = controller.windowId;
+  (0, import_react2.useEffect)(() => controller.start(), [controller]);
+  (0, import_react2.useEffect)(() => {
     if (!hotkeys) return;
+    const isMac3 = isMacPlatform();
+    const applies = (when, event) => {
+      if (!controller.isPresented()) return false;
+      if (when === "presented") return true;
+      if (when === "fullscreen") return !!canvasWindowFrame(controller.getState(), windowId)?.isFullscreen && !escapeBelongsElsewhere(event);
+      const column = document.activeElement?.closest?.("[data-mxc-window]");
+      return column?.getAttribute("data-mxc-window") === windowId;
+    };
     const onKey = (event) => {
-      if (!controller.isPresented()) return;
-      if (event.key === "\\" && (event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey) {
-        event.preventDefault();
-        controller.toggle();
-      } else if (event.key === "Escape" && controller.getState().isFullscreen && !escapeBelongsElsewhere(event)) {
-        controller.setFullscreen(false);
+      for (const shortcut of CANVAS_SHORTCUTS) {
+        if (!shortcut.web || !matchesCanvasAccelerator(event, shortcut.accelerator, isMac3)) continue;
+        if (!applies(shortcut.when, event)) return;
+        if (runCanvasCommand(controller, shortcut.id)) event.preventDefault();
+        return;
       }
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
-  }, [controller, hotkeys]);
-  const ports = {
-    ...itemActions ? { itemActions } : {},
-    ...popOut ? { popOut } : {}
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CanvasContext.Provider, { value: { controller, ports }, children });
+  }, [controller, hotkeys, windowId]);
+  const value = { controller, windowId, ports: hostPorts, layer, regionWidth, tabStrip };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(CanvasContext.Provider, { value, children: [
+    children,
+    hostPorts.overlay ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CanvasDomOverlay, { layer })
+  ] });
+}
+function CanvasWindowScope({ windowId, children }) {
+  const parent = useCanvasContext();
+  const id = canvasWindowId(windowId);
+  const value = { ...parent, windowId: id, controller: parent.controller.forWindow(id) };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CanvasContext.Provider, { value, children });
 }
 function useCanvasContext() {
-  const value = (0, import_react.useContext)(CanvasContext);
+  const value = (0, import_react2.useContext)(CanvasContext);
   if (!value) throw new Error("[@ai-matrx/canvas] useCanvas* must be used inside <CanvasProvider>.");
   return value;
 }
+function useCanvasInternals() {
+  return useCanvasContext();
+}
+function useOptionalCanvasInternals() {
+  return (0, import_react2.useContext)(CanvasContext);
+}
 function useCanvas() {
   return useCanvasContext().controller;
 }
 function useOptionalCanvas() {
-  return (0, import_react.useContext)(CanvasContext)?.controller ?? null;
+  return (0, import_react2.useContext)(CanvasContext)?.controller ?? null;
+}
+function useCanvasWindowId() {
+  return (0, import_react2.useContext)(CanvasContext)?.windowId ?? CANVAS_MAIN_WINDOW;
 }
 function useCanvasHostPorts() {
   return useCanvasContext().ports;
 }
+function useCanvasNativeBodies() {
+  return useCanvasContext().layer.native;
+}
 function useRegisterCanvasPresence() {
-  const controller = (0, import_react.useContext)(CanvasContext)?.controller;
-  (0, import_react.useEffect)(() => controller?.registerPresentation(), [controller]);
+  const context = (0, import_react2.useContext)(CanvasContext);
+  const controller = context?.controller;
+  const windowId = context?.windowId;
+  (0, import_react2.useEffect)(() => controller?.registerPresentation(windowId), [controller, windowId]);
 }
 var noPresence = () => () => void 0;
 function useCanvasIsPresented() {
-  const controller = (0, import_react.useContext)(CanvasContext)?.controller;
-  return (0, import_react.useSyncExternalStore)(
+  const context = (0, import_react2.useContext)(CanvasContext);
+  const controller = context?.controller;
+  return (0, import_react2.useSyncExternalStore)(
     controller ? controller.subscribePresentation : noPresence,
     () => controller?.isPresented() ?? false,
     () => false
@@ -860,7 +1565,7 @@ function useCanvasIsPresented() {
 }
 function useCanvasState(selector) {
   const { store } = useCanvasContext().controller;
-  return (0, import_react.useSyncExternalStore)(
+  return (0, import_react2.useSyncExternalStore)(
     store.subscribe,
     () => selector(store.getState()),
     () => selector(store.getState())
@@ -868,32 +1573,34 @@ function useCanvasState(selector) {
 }
 var NO_SUBSCRIPTION = () => () => void 0;
 function useOptionalCanvasState(selector, fallback) {
-  const store = (0, import_react.useContext)(CanvasContext)?.controller.store;
+  const store = (0, import_react2.useContext)(CanvasContext)?.controller.store;
   const read = () => store ? selector(store.getState()) : fallback;
-  return (0, import_react.useSyncExternalStore)(store ? store.subscribe : NO_SUBSCRIPTION, read, read);
+  return (0, import_react2.useSyncExternalStore)(store ? store.subscribe : NO_SUBSCRIPTION, read, read);
 }
 function useCanvasKinds() {
-  (0, import_react.useSyncExternalStore)(subscribeCanvasKinds, getCanvasKindsVersion, getCanvasKindsVersion);
+  (0, import_react2.useSyncExternalStore)(subscribeCanvasKinds, getCanvasKindsVersion, getCanvasKindsVersion);
   return listCanvasKinds();
 }
 function useCanvasKind(id) {
-  (0, import_react.useSyncExternalStore)(subscribeCanvasKinds, getCanvasKindsVersion, getCanvasKindsVersion);
+  (0, import_react2.useSyncExternalStore)(subscribeCanvasKinds, getCanvasKindsVersion, getCanvasKindsVersion);
   return getCanvasKind(id);
 }
 
 // src/react/CanvasColumn.tsx
-var import_react3 = require("react");
-var import_tap_target2 = require("@ai-matrx/tap-target");
+var import_react5 = require("react");
+var import_tap_target = require("@ai-matrx/tap-target");
 
 // src/react/CanvasPane.tsx
-var import_react2 = require("react");
-var import_tap_target = require("@ai-matrx/tap-target");
+var import_react4 = require("react");
 var Menu = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
 
+// src/react/chrome.tsx
+var import_react3 = require("react");
+
 // src/react/icons.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function Glyph({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -911,61 +1618,335 @@ function Glyph({ children, ...props }) {
     }
   );
 }
-var CloseIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Glyph, { ...p, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M18 6 6 18" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m6 6 12 12" })
+var CloseIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Glyph, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M18 6 6 18" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m6 6 12 12" })
+] });
+var MaximizeIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Glyph, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M15 3h6v6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m21 3-7 7" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m3 21 7-7" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9 21H3v-6" })
 ] });
-var MaximizeIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Glyph, { ...p, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M15 3h6v6" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m21 3-7 7" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m3 21 7-7" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M9 21H3v-6" })
+var MinimizeIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Glyph, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m14 10 7-7" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M20 10h-6V4" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m3 21 7-7" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 14h6v6" })
 ] });
-var MinimizeIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Glyph, { ...p, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m14 10 7-7" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M20 10h-6V4" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m3 21 7-7" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M4 14h6v6" })
+var MoreIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Glyph, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "5", r: "1" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "19", r: "1" })
 ] });
-var MoreIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Glyph, { ...p, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "5", r: "1" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "19", r: "1" })
+var SplitRightIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Glyph, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 3v18" })
 ] });
-var SplitRightIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Glyph, { ...p, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 3v18" })
+var SplitDownIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Glyph, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M3 12h18" })
 ] });
-var SplitDownIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Glyph, { ...p, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3 12h18" })
+var PanelRightIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Glyph, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M15 3v18" })
 ] });
-var PanelRightIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Glyph, { ...p, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M15 3v18" })
+var PopOutIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Glyph, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M15 3h6v6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M10 14 21 3" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })
 ] });
-var PopOutIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Glyph, { ...p, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M15 3h6v6" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M10 14 21 3" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })
+var AlertIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Glyph, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 8v4" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 16h.01" })
 ] });
-var AlertIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Glyph, { ...p, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 8v4" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 16h.01" })
+var ArrowLeftIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Glyph, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m12 19-7-7 7-7" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M19 12H5" })
+] });
+var ArrowRightIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Glyph, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M5 12h14" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m12 5 7 7-7 7" })
+] });
+var RotateCwIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Glyph, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 3v5h-5" })
+] });
+var GlobeIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Glyph, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M2 12h20" })
+] });
+var PlusIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Glyph, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M5 12h14" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 5v14" })
+] });
+var DockIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Glyph, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 3 12 12" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 6v6h6" })
 ] });
 
+// src/react/chrome.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var cx = (...names) => names.filter(Boolean).join(" ");
+function useTooltip(text) {
+  const internals = useOptionalCanvasInternals();
+  const timer = (0, import_react3.useRef)(null);
+  const hide = (0, import_react3.useRef)(null);
+  const close = () => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+    hide.current?.();
+    hide.current = null;
+  };
+  (0, import_react3.useEffect)(() => close, []);
+  if (!text) return { close, handlers: {} };
+  if (!internals) return { close, handlers: { title: text } };
+  const open = (element, delay) => {
+    close();
+    timer.current = setTimeout(() => {
+      timer.current = null;
+      if (!element.isConnected) return;
+      hide.current = internals.layer.show({ type: "tooltip", text, anchor: toCanvasRect(element.getBoundingClientRect()), side: "bottom" });
+    }, delay);
+  };
+  return {
+    close,
+    handlers: {
+      onPointerEnter: (event) => {
+        if (event.pointerType === "mouse") open(event.currentTarget, 450);
+      },
+      onPointerLeave: close,
+      onPointerDown: close,
+      onFocus: (event) => {
+        if (event.currentTarget.matches(":focus-visible")) open(event.currentTarget, 0);
+      },
+      onBlur: close
+    }
+  };
+}
+var CanvasHeaderButton = (0, import_react3.forwardRef)(function CanvasHeaderButton2({ label, shortcut, available = true, size = "sm", pressed, className, children, onClick, onPointerEnter, onPointerLeave, onPointerDown, onFocus, onBlur, ...rest }, ref) {
+  const tooltip = useTooltip(shortcut ? `${label} (${shortcut})` : label);
+  const own = tooltip.handlers;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "button",
+    {
+      ref,
+      type: "button",
+      "aria-label": label,
+      "aria-pressed": pressed,
+      "data-slot": "canvas-panel-action",
+      "data-size": size,
+      "data-available": available ? void 0 : "false",
+      className: cx("mxc-icon-button", className),
+      ...rest,
+      ...own.title ? { title: own.title } : {},
+      "aria-disabled": available ? rest["aria-disabled"] : true,
+      onClick: (event) => {
+        tooltip.close();
+        if (available) onClick?.(event);
+      },
+      onPointerEnter: (event) => {
+        onPointerEnter?.(event);
+        own.onPointerEnter?.(event);
+      },
+      onPointerLeave: (event) => {
+        onPointerLeave?.(event);
+        own.onPointerLeave?.();
+      },
+      onPointerDown: (event) => {
+        onPointerDown?.(event);
+        own.onPointerDown?.();
+      },
+      onFocus: (event) => {
+        onFocus?.(event);
+        own.onFocus?.(event);
+      },
+      onBlur: (event) => {
+        onBlur?.(event);
+        own.onBlur?.();
+      },
+      children
+    }
+  );
+});
+var CanvasMenuTrigger = (0, import_react3.forwardRef)(
+  function CanvasMenuTrigger2({ label = "More", ...props }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CanvasHeaderButton, { ref, label, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MoreIcon, {}) });
+  }
+);
+var CanvasPanel = (0, import_react3.forwardRef)(function CanvasPanel2({
+  panelId,
+  title,
+  leading,
+  header,
+  actions,
+  renderMenu,
+  expanded = false,
+  onToggleExpand,
+  expandShortcut,
+  onHide,
+  onClose,
+  closeLabel = "Close",
+  focused,
+  bodyProps,
+  className,
+  children,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "section",
+    {
+      ref,
+      "data-slot": "canvas-panel",
+      "data-panel": panelId,
+      "data-expanded": expanded ? "" : void 0,
+      "data-focused": focused ? "" : void 0,
+      "aria-label": typeof title === "string" ? title : void 0,
+      className: cx("mxc-panel", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("header", { "data-slot": "canvas-panel-header", className: "mxc-pane-header", children: [
+          header ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mxc-panel-title", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mxc-pane-leading", children: leading }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mxc-pane-actions", children: [
+            actions,
+            renderMenu ? renderMenu(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CanvasMenuTrigger, {})) : null,
+            onToggleExpand ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CanvasHeaderButton, { className: "mxc-desktop-only", label: expanded ? "Restore" : "Expand", shortcut: expandShortcut, onClick: onToggleExpand, children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MinimizeIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MaximizeIcon, {}) }) : null,
+            onHide ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CanvasHeaderButton, { className: "mxc-phone-only", label: "Hide canvas", onClick: onHide, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PanelRightIcon, {}) }) : null,
+            onClose ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CanvasHeaderButton, { label: closeLabel, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CloseIcon, {}) }) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "data-slot": "canvas-panel-body", ...bodyProps, className: cx("mxc-pane-body", bodyProps?.className), children })
+      ]
+    }
+  );
+});
+function CanvasPanelEmpty({ children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "data-slot": "canvas-panel-empty", className: cx("mxc-empty-line", className), children });
+}
+var CanvasTab = (0, import_react3.forwardRef)(function CanvasTab2({ title, icon, note, active, onSelect, onClose, className, onKeyDown, onClick, ...rest }, ref) {
+  const shown = title || "New tab";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      ref,
+      role: "tab",
+      "aria-selected": active,
+      tabIndex: active ? 0 : -1,
+      "data-slot": "browser-tab",
+      "data-active": active ? "" : void 0,
+      title: shown,
+      className: cx("mxc-tab", className),
+      ...rest,
+      onClick: (event) => {
+        onClick?.(event);
+        onSelect();
+      },
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented) return;
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          onSelect();
+        }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mxc-tab-icon", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mxc-tab-title", children: shown }),
+        note ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mxc-tab-note", "data-slot": "browser-tab-note", children: note }) : null,
+        onClose ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "mxc-tab-close",
+            "data-slot": "browser-tab-close",
+            "aria-label": `Close ${shown}`,
+            onClick: (event) => {
+              event.stopPropagation();
+              onClose();
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CloseIcon, {})
+          }
+        ) : null
+      ]
+    }
+  );
+});
+function BrowserTabs({ tabs, activeId, onSelect, onClose, onNew, newLabel = "New tab", label = "Tabs", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { "data-slot": "browser-tabs", role: "tablist", "aria-label": label, className: cx("mxc-tabs", className), children: [
+    tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      CanvasTab,
+      {
+        "data-tab": tab.id,
+        title: tab.title,
+        note: tab.note,
+        active: tab.id === activeId,
+        icon: tab.glyph ?? (tab.icon ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { src: tab.icon, alt: "", className: "mxc-favicon" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GlobeIcon, {})),
+        onSelect: () => onSelect(tab.id),
+        onClose: () => onClose(tab.id)
+      },
+      tab.id
+    )),
+    onNew ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CanvasHeaderButton, { label: newLabel, "data-slot": "browser-tab-new", onClick: onNew, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PlusIcon, {}) }) : null
+  ] });
+}
+function BrowserBar({ url, canGoBack, canGoForward, onBack, onForward, onReload, onNavigate, trailing, className }) {
+  const [draft, setDraft] = (0, import_react3.useState)(url);
+  const [editing, setEditing] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
+    if (!editing) setDraft(url);
+  }, [url, editing]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { "data-slot": "browser-bar", className: cx("mxc-browser-bar", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CanvasHeaderButton, { size: "md", label: "Back", available: canGoBack, onClick: onBack, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ArrowLeftIcon, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CanvasHeaderButton, { size: "md", label: "Forward", available: canGoForward, onClick: onForward, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ArrowRightIcon, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CanvasHeaderButton, { size: "md", label: "Reload", onClick: onReload, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RotateCwIcon, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "form",
+      {
+        className: "mxc-address-form",
+        onSubmit: (event) => {
+          event.preventDefault();
+          setEditing(false);
+          onNavigate(draft.trim());
+          event.currentTarget.elements.namedItem("address")?.blur();
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "input",
+          {
+            name: "address",
+            "aria-label": "Address",
+            "data-slot": "browser-address",
+            className: "mxc-address",
+            value: draft,
+            placeholder: "Search or enter an address",
+            spellCheck: false,
+            onFocus: (event) => {
+              setEditing(true);
+              event.currentTarget.select();
+            },
+            onBlur: () => setEditing(false),
+            onChange: (event) => setDraft(event.target.value)
+          }
+        )
+      }
+    ),
+    trailing ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "data-slot": "browser-bar-trailing", className: "mxc-browser-bar-trailing", children: trailing }) : null
+  ] });
+}
+
 // src/react/CanvasPane.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var DRAG_MIME = "application/x-matrx-canvas-item";
+var useIsoLayoutEffect = typeof window === "undefined" ? import_react4.useEffect : import_react4.useLayoutEffect;
 var LAZY = /* @__PURE__ */ Symbol.for("ai-matrx.canvas.lazy");
 function kindComponent(kind) {
   if (kind.component) return kind.component;
   const holder = kind;
-  if (!holder[LAZY] && kind.load) holder[LAZY] = (0, import_react2.lazy)(kind.load);
-  const resolved = holder[LAZY];
-  if (!resolved) throw new Error(`[@ai-matrx/canvas] kind "${kind.id}" has nothing to render.`);
-  return resolved;
+  if (!holder[LAZY] && kind.load) holder[LAZY] = (0, import_react4.lazy)(kind.load);
+  return holder[LAZY] ?? null;
 }
 function resetKindComponent(kind) {
   if (kind) delete kind[LAZY];
@@ -981,128 +1962,134 @@ function itemTitle(item, kind) {
   }
   return kind?.label ?? item.kind;
 }
+var isMac = () => typeof navigator !== "undefined" && /mac|iphone|ipad/i.test(navigator.platform ?? "");
+function useTabDrag(itemId, title) {
+  const { layer } = useCanvasInternals();
+  const active = (0, import_react4.useRef)([]);
+  const end = () => {
+    for (const dispose of active.current.splice(0)) dispose();
+  };
+  (0, import_react4.useEffect)(() => end, []);
+  return {
+    draggable: true,
+    onDragStart: (event) => {
+      event.dataTransfer.setData(DRAG_MIME, itemId);
+      event.dataTransfer.effectAllowed = "move";
+      end();
+      active.current.push(layer.beginBlocking(), layer.show({ type: "tab-drag", itemId, title }));
+    },
+    onDragEnd: end
+  };
+}
 function CanvasPaneView({ paneId }) {
   const canvas = useCanvas();
+  const { windowId, layer, ports, tabStrip } = useCanvasInternals();
   const pane = useCanvasState((s) => s.panes[paneId]);
   const items = useCanvasState((s) => s.items);
-  const focused = useCanvasState((s) => s.focusedPaneId === paneId);
-  const [dropActive, setDropActive] = (0, import_react2.useState)(false);
+  const isFullscreen = useCanvasState((s) => selectCanvasIsFullscreen(s, windowId));
+  const focused = useCanvasState((s) => selectCanvasFocusedPaneId(s, windowId) === paneId);
+  const paneCount = useCanvasState((s) => selectCanvasPaneCount(s, windowId));
+  const role = useCanvasState((s) => windowId === CANVAS_MAIN_WINDOW ? "main" : s.windows[windowId]?.role ?? "window");
+  const active = pane?.activeItemId ? items[pane.activeItemId] : void 0;
+  const kind = useCanvasKind(active?.kind ?? "");
+  const drop = (0, import_react4.useRef)(null);
+  const sectionRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => () => drop.current?.(), []);
   if (!pane) return null;
-  const active = pane.activeItemId ? items[pane.activeItemId] : void 0;
+  const kindProps = active && kind ? { item: active, data: active.data, paneId, isFocused: focused, canvas, windowId } : null;
+  const Leading = kind?.HeaderLeading;
+  const Action = kind?.HeaderAction;
+  const single = tabStrip === "auto" && pane.itemIds.length === 1 && active;
+  const hideDrop = () => {
+    drop.current?.();
+    drop.current = null;
+  };
   const onDragOver = (event) => {
     if (!event.dataTransfer.types.includes(DRAG_MIME)) return;
     event.preventDefault();
     event.dataTransfer.dropEffect = "move";
-    setDropActive(true);
+    if (!drop.current && sectionRef.current) {
+      drop.current = layer.show({ type: "drop-indicator", rect: toCanvasRect(sectionRef.current.getBoundingClientRect()), paneId });
+    }
+  };
+  const onDragLeave = (event) => {
+    const next = event.relatedTarget;
+    if (next && sectionRef.current?.contains(next)) return;
+    hideDrop();
   };
   const onDrop = (event) => {
-    setDropActive(false);
+    hideDrop();
     const itemId = event.dataTransfer.getData(DRAG_MIME);
     if (!itemId) return;
     event.preventDefault();
     canvas.moveItem(itemId, paneId);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    "section",
+  const closeLabel = role === "pop-out" && paneCount === 1 ? "Close window" : paneCount > 1 ? "Close pane" : "Close canvas";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    CanvasPanel,
     {
+      ref: sectionRef,
+      panelId: paneId,
       className: "mxc-pane",
-      "data-focused": focused ? "" : void 0,
-      "data-drop": dropActive ? "" : void 0,
+      title: active ? itemTitle(active, kind) : "Canvas",
+      focused,
+      "data-mxc-pane": paneId,
+      header: single && active ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SingleTitle, { item: active, kind }) : pane.itemIds.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mxc-tabs", role: "tablist", "aria-label": "Canvas tabs", children: pane.itemIds.map((itemId, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ItemTab, { itemId, paneId, index, active: itemId === pane.activeItemId }, itemId)) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mxc-panel-title", children: "New tab" }),
+      leading: Leading && kindProps ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Leading, { ...kindProps }) : null,
+      actions: Action && kindProps ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Action, { ...kindProps }) : null,
+      renderMenu: () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PaneMenu, { paneId, windowId, activeItem: active, kind, kindProps, tabCount: pane.itemIds.length, role }),
+      expanded: isFullscreen,
+      onToggleExpand: () => canvas.setFullscreen(!isFullscreen),
+      expandShortcut: canvasShortcutHint("canvas.toggleFullscreen", isMac()),
+      onHide: windowId === CANVAS_MAIN_WINDOW ? () => canvas.hide() : void 0,
+      onClose: () => canvas.closePane(paneId),
+      closeLabel,
       onPointerDownCapture: () => {
         if (!focused) canvas.focusPane(paneId);
       },
       onDragOver,
-      onDragLeave: () => setDropActive(false),
+      onDragLeave,
       onDrop,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PaneHeader, { paneId, itemIds: pane.itemIds, activeItemId: pane.activeItemId, activeItem: active }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mxc-pane-body", children: pane.itemIds.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Launcher, { paneId }) : pane.itemIds.map((itemId) => {
-          const item = items[itemId];
-          if (!item) return null;
-          const isActive = itemId === pane.activeItemId;
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ItemBody, { item, paneId, isActive, isFocused: focused && isActive }, itemId);
-        }) })
-      ]
+      children: pane.itemIds.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Launcher, { paneId }) : pane.itemIds.map((itemId) => {
+        const item = items[itemId];
+        if (!item) return null;
+        const isActive = itemId === pane.activeItemId;
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ItemBody, { item, paneId, windowId, isActive, isFocused: focused && isActive, hasNativePort: !!ports.onNativeBodyFrame }, itemId);
+      })
     }
   );
 }
-function PaneHeader({
-  paneId,
-  itemIds,
-  activeItemId,
-  activeItem
-}) {
-  const canvas = useCanvas();
-  const isFullscreen = useCanvasState((s) => s.isFullscreen);
-  const paneCount = useCanvasState(selectCanvasPaneCount);
-  const kind = useCanvasKind(activeItem?.kind ?? "");
-  const kindProps = activeItem && kind ? { item: activeItem, data: activeItem.data, paneId, isFocused: true, canvas } : null;
-  const HeaderAction = kind?.HeaderAction;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("header", { className: "mxc-pane-header", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mxc-tabs", role: "tablist", "aria-label": "Canvas tabs", children: itemIds.map((itemId, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Tab, { itemId, paneId, index, active: itemId === activeItemId }, itemId)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mxc-pane-actions", children: [
-      HeaderAction && kindProps ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HeaderAction, { ...kindProps }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PaneMenu, { paneId, activeItem, kind, kindProps, canSplitMove: itemIds.length > 1 }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_tap_target.TapTargetButtonTransparent,
-        {
-          className: "mxc-desktop-only",
-          ariaLabel: isFullscreen ? "Exit full screen" : "Full screen",
-          icon: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MinimizeIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MaximizeIcon, {}),
-          onClick: () => canvas.setFullscreen(!isFullscreen)
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_tap_target.TapTargetButtonTransparent,
-        {
-          className: "mxc-phone-only",
-          ariaLabel: "Hide canvas",
-          icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PanelRightIcon, {}),
-          onClick: () => canvas.hide()
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_tap_target.TapTargetButtonTransparent,
-        {
-          ariaLabel: paneCount > 1 ? "Close pane" : "Close canvas",
-          icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CloseIcon, {}),
-          onClick: () => canvas.closePane(paneId)
-        }
-      )
-    ] })
+function SingleTitle({ item, kind }) {
+  const title = itemTitle(item, kind);
+  const drag = useTabDrag(item.id, title);
+  const Icon = kind?.icon ?? AlertIcon;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mxc-panel-title", "data-draggable": "", title, ...drag, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { className: "mxc-title-icon" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mxc-tab-title", children: title })
   ] });
 }
-function Tab({
-  itemId,
-  paneId,
-  index,
-  active
-}) {
+function ItemTab({ itemId, paneId, index, active }) {
   const canvas = useCanvas();
   const item = useCanvasState((s) => s.items[itemId]);
   const kind = useCanvasKind(item?.kind ?? "");
-  const ref = (0, import_react2.useRef)(null);
-  (0, import_react2.useEffect)(() => {
-    if (active) ref.current?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  const ref = (0, import_react4.useRef)(null);
+  const title = item ? itemTitle(item, kind) : "";
+  const drag = useTabDrag(itemId, title);
+  (0, import_react4.useEffect)(() => {
+    if (active) ref.current?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
   }, [active]);
   if (!item) return null;
-  const Icon = kind?.icon;
-  const title = itemTitle(item, kind);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    "div",
+  const Icon = kind?.icon ?? AlertIcon;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    CanvasTab,
     {
       ref,
-      className: "mxc-tab",
-      role: "tab",
-      "aria-selected": active,
-      "data-active": active ? "" : void 0,
-      tabIndex: active ? 0 : -1,
       title,
-      draggable: true,
-      onDragStart: (event) => {
-        event.dataTransfer.setData(DRAG_MIME, itemId);
-        event.dataTransfer.effectAllowed = "move";
-      },
+      icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, {}),
+      active,
+      onSelect: () => canvas.activate(itemId),
+      onClose: () => canvas.close(itemId),
+      ...drag,
       onDragOver: (event) => {
         if (event.dataTransfer.types.includes(DRAG_MIME)) event.preventDefault();
       },
@@ -1110,83 +2097,89 @@ function Tab({
         const dragged = event.dataTransfer.getData(DRAG_MIME);
         if (!dragged) return;
         event.preventDefault();
-        event.stopPropagation();
         if (dragged !== itemId) canvas.moveItem(dragged, paneId, index);
       },
-      onClick: () => canvas.activate(itemId),
       onAuxClick: (event) => {
         if (event.button === 1) canvas.close(itemId);
-      },
-      onKeyDown: (event) => {
-        if (event.key === "Enter" || event.key === " ") canvas.activate(itemId);
-      },
-      children: [
-        Icon ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { className: "mxc-tab-icon" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AlertIcon, { className: "mxc-tab-icon" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mxc-tab-title", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "button",
-          {
-            type: "button",
-            className: "mxc-tab-close",
-            "aria-label": `Close ${title}`,
-            onClick: (event) => {
-              event.stopPropagation();
-              canvas.close(itemId);
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CloseIcon, { width: 12, height: 12 })
-          }
-        )
-      ]
+      }
     }
   );
 }
 function PaneMenu({
   paneId,
+  windowId,
   activeItem,
   kind,
   kindProps,
-  canSplitMove
+  tabCount,
+  role
 }) {
   const canvas = useCanvas();
-  const ports = useCanvasHostPorts();
-  const moveId = canSplitMove ? activeItem?.id : void 0;
+  const { ports, layer } = useCanvasInternals();
+  const moveId = tabCount > 1 ? activeItem?.id : void 0;
+  const blocking = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => () => blocking.current?.(), []);
   const kindItems = kind?.menuItems && kindProps ? safeMenu(() => kind.menuItems?.(kindProps)) : [];
   const hostItems = activeItem && ports.itemActions ? safeMenu(() => ports.itemActions?.(activeItem, kind)) : [];
-  const itemEntries = [...kindItems, ...hostItems];
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Menu.Root, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Menu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_tap_target.TapTargetButtonTransparent, { ariaLabel: "More", icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MoreIcon, {}) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Menu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Menu.Content, { align: "end", sideOffset: 4, className: "mxc-menu", children: [
-      itemEntries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-        Menu.Item,
-        {
-          onSelect: entry.onSelect,
-          className: "mxc-menu-item",
-          "data-destructive": entry.destructive ? "" : void 0,
-          children: [
-            entry.icon,
-            entry.label
-          ]
-        },
-        entry.id
-      )),
-      itemEntries.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Menu.Separator, { className: "mxc-menu-separator" }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Menu.Item, { className: "mxc-menu-item", onSelect: () => canvas.splitPane(paneId, "horizontal", moveId), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SplitRightIcon, {}),
-        "Split right"
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Menu.Item, { className: "mxc-menu-item", onSelect: () => canvas.splitPane(paneId, "vertical", moveId), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SplitDownIcon, {}),
-        "Split down"
-      ] }),
-      activeItem && ports.popOut ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Menu.Item, { className: "mxc-menu-item", onSelect: () => ports.popOut?.(activeItem), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PopOutIcon, {}),
-        "Pop out"
-      ] }) : null,
-      activeItem && canSplitMove ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Menu.Separator, { className: "mxc-menu-separator" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Menu.Item, { className: "mxc-menu-item", onSelect: () => canvas.closeOthers(activeItem.id), children: "Close other tabs" })
-      ] }) : null
-    ] }) })
+  const sections = [
+    [...kindItems, ...hostItems].map((entry) => ({ ...entry, id: `item:${entry.id}` })),
+    [
+      { id: "split-right", label: "Split right", icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SplitRightIcon, {}), onSelect: () => canvas.splitPane(paneId, "horizontal", moveId) },
+      { id: "split-down", label: "Split down", icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SplitDownIcon, {}), onSelect: () => canvas.splitPane(paneId, "vertical", moveId) },
+      ...activeItem && role === "pop-out" ? [{ id: "dock-back", label: "Dock back", icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DockIcon, {}), onSelect: () => void canvas.dockBack(activeItem.id) }] : activeItem && ports.popOut ? [{ id: "pop-out", label: "Pop out", icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PopOutIcon, {}), onSelect: () => void canvas.popOut(activeItem.id) }] : []
+    ],
+    activeItem ? [
+      { id: "close-tab", label: "Close tab", onSelect: () => canvas.close(activeItem.id) },
+      ...tabCount > 1 ? [{ id: "close-others", label: "Close other tabs", onSelect: () => canvas.closeOthers(activeItem.id) }] : []
+    ] : []
+  ].filter((section) => section.length > 0);
+  const showMenu = ports.showMenu;
+  if (showMenu) {
+    const entries = [];
+    const handlers = /* @__PURE__ */ new Map();
+    sections.forEach((section, i) => {
+      if (i > 0) entries.push({ type: "separator" });
+      for (const action of section) {
+        entries.push({ type: "item", id: action.id, label: action.label, ...action.destructive ? { destructive: true } : {} });
+        handlers.set(action.id, action.onSelect);
+      }
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      CanvasMenuTrigger,
+      {
+        onClick: (event) => {
+          const anchor = toCanvasRect(event.currentTarget.getBoundingClientRect());
+          void showMenu(entries, anchor).then(
+            (chosen) => {
+              if (chosen) handlers.get(chosen)?.();
+            },
+            (error) => console.error("[@ai-matrx/canvas] the host menu failed", error)
+          );
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    Menu.Root,
+    {
+      onOpenChange: (open) => {
+        blocking.current?.();
+        blocking.current = open ? layer.beginBlocking() : null;
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Menu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CanvasMenuTrigger, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Menu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Menu.Content, { align: "end", sideOffset: 4, className: "mxc-menu", children: sections.map((section, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MenuSection, { first: i === 0, actions: section }, i)) }) })
+      ]
+    }
+  );
+}
+function MenuSection({ first, actions }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    first ? null : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Menu.Separator, { className: "mxc-menu-separator" }),
+    actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Menu.Item, { onSelect: action.onSelect, className: "mxc-menu-item", "data-destructive": action.destructive ? "" : void 0, children: [
+      action.icon,
+      action.label
+    ] }, action.id))
   ] });
 }
 function safeMenu(build) {
@@ -1200,29 +2193,84 @@ function safeMenu(build) {
 function ItemBody({
   item,
   paneId,
+  windowId,
   isActive,
-  isFocused
+  isFocused,
+  hasNativePort
 }) {
   const canvas = useCanvas();
   const kind = useCanvasKind(item.kind);
   if (!isActive && !kind?.keepAlive) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mxc-item", hidden: !isActive, "data-kind": item.kind, children: kind ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ItemBoundary, { item, onClose: () => canvas.close(item.id), onRetry: () => resetKindComponent(kind), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mxc-loading", "aria-busy": "true" }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(KindRender, { kind, props: { item, data: item.data, paneId, isFocused, canvas } }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ItemProblem, { message: "This item can no longer be shown.", onClose: () => canvas.close(item.id) }) });
+  const props = { item, data: item.data, paneId, isFocused, canvas, windowId };
+  let unavailable = null;
+  try {
+    unavailable = kind?.unavailable?.(item.data, item) ?? null;
+  } catch (error) {
+    console.error(`[@ai-matrx/canvas] "${item.kind}" unavailable() threw`, error);
+  }
+  let body;
+  if (!kind) {
+    body = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ItemProblem, { message: "This item can no longer be shown.", onClose: () => canvas.close(item.id) });
+  } else if (unavailable) {
+    body = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CanvasPanelEmpty, { children: unavailable });
+  } else if (kind.body === "native") {
+    body = hasNativePort ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(NativeBody, { itemId: item.id, windowId, children: kindComponent(kind) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Rendered, { kind, item, props }) : null }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CanvasPanelEmpty, { children: "Opens in the desktop app" });
+  } else {
+    body = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Rendered, { kind, item, props });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mxc-item", hidden: !isActive, "data-kind": item.kind, children: body });
+}
+function Rendered({ kind, item, props }) {
+  const canvas = useCanvas();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ItemBoundary, { item, onClose: () => canvas.close(item.id), onRetry: () => resetKindComponent(kind), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react4.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mxc-loading", "aria-busy": "true" }), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(KindRender, { kind, props }) }) });
 }
 function KindRender({ kind, props }) {
   const Render = kindComponent(kind);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Render, { ...props });
+  if (!Render) throw new Error(`[@ai-matrx/canvas] kind "${kind.id}" has nothing to render.`);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Render, { ...props });
+}
+function NativeBody({ itemId, windowId, children }) {
+  const { layer } = useCanvasInternals();
+  const ref = (0, import_react4.useRef)(null);
+  const measure = (0, import_react4.useRef)(() => void 0);
+  measure.current = () => {
+    const el = ref.current;
+    const box = el?.isConnected ? el.getBoundingClientRect() : null;
+    if (!box || box.width <= 0 || box.height <= 0) {
+      layer.native.report(itemId, null, { visible: false, windowId });
+      return;
+    }
+    const rect = { ...toCanvasRect(box), devicePixelRatio: window.devicePixelRatio || 1 };
+    layer.native.report(itemId, rect, { visible: !layer.isBlocked(), windowId });
+  };
+  useIsoLayoutEffect(() => measure.current());
+  useIsoLayoutEffect(() => {
+    const el = ref.current;
+    const run = () => measure.current();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(run);
+    if (el) observer?.observe(el);
+    const unregister = layer.native.register(run);
+    window.addEventListener("resize", run);
+    return () => {
+      observer?.disconnect();
+      unregister();
+      window.removeEventListener("resize", run);
+      layer.native.report(itemId, null, { visible: false, windowId });
+    };
+  }, [itemId, windowId, layer]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref, className: "mxc-native-body", "data-native-body": itemId, children });
 }
 function ItemProblem({ message, onClose, onRetry }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mxc-problem", role: "alert", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AlertIcon, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: message }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mxc-problem-actions", children: [
-      onRetry ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: "mxc-text-button", onClick: onRetry, children: "Try again" }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: "mxc-text-button", onClick: onClose, children: "Close tab" })
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mxc-problem", role: "alert", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AlertIcon, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: message }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mxc-problem-actions", children: [
+      onRetry ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mxc-text-button", onClick: onRetry, children: "Try again" }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mxc-text-button", onClick: onClose, children: "Close tab" })
     ] })
   ] });
 }
-var ItemBoundary = class extends import_react2.Component {
+var ItemBoundary = class extends import_react4.Component {
   state = { error: null };
   static getDerivedStateFromError(error) {
     return { error };
@@ -1232,7 +2280,7 @@ var ItemBoundary = class extends import_react2.Component {
   }
   render() {
     if (this.state.error) {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         ItemProblem,
         {
           message: "This item failed to load.",
@@ -1250,12 +2298,12 @@ var ItemBoundary = class extends import_react2.Component {
 function Launcher({ paneId }) {
   const canvas = useCanvas();
   const kinds = useCanvasKinds().filter((kind) => kind.launcher);
-  if (kinds.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mxc-empty", children: "Nothing open" });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mxc-launcher", children: kinds.map((kind) => {
+  if (kinds.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CanvasPanelEmpty, { children: "Nothing open" });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mxc-launcher", children: kinds.map((kind) => {
     const Icon = kind.icon;
     const launcher = kind.launcher;
     if (!launcher) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "button",
       {
         type: "button",
@@ -1268,8 +2316,8 @@ function Launcher({ paneId }) {
           target: { paneId }
         }),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { className: "mxc-launcher-icon" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: launcher.title ?? kind.label })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { className: "mxc-launcher-icon" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: launcher.title ?? kind.label })
         ]
       },
       kind.id
@@ -1278,69 +2326,72 @@ function Launcher({ paneId }) {
 }
 
 // src/react/CanvasColumn.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var MIN_MAIN_WIDTH = 420;
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var useIsoLayoutEffect2 = typeof window === "undefined" ? import_react5.useEffect : import_react5.useLayoutEffect;
 function subscribeViewport(listener) {
   window.addEventListener("resize", listener);
   return () => window.removeEventListener("resize", listener);
 }
 function useViewportWidth() {
-  return (0, import_react3.useSyncExternalStore)(subscribeViewport, () => window.innerWidth, () => 0);
+  return (0, import_react5.useSyncExternalStore)(subscribeViewport, () => window.innerWidth, () => 0);
 }
-function fitWidth(width, viewport) {
-  if (viewport <= 0) return width;
-  return Math.max(CANVAS_MIN_WIDTH, Math.min(width, viewport - MIN_MAIN_WIDTH));
+function useRegionWidth() {
+  const viewport = useViewportWidth();
+  const { regionWidth } = useCanvasInternals();
+  return regionWidth ?? viewport;
 }
 function useCanvasColumnWidth() {
-  const isOpen = useCanvasState(selectCanvasIsOpen);
-  const isFullscreen = useCanvasState(selectCanvasIsFullscreen);
-  const width = useCanvasState(selectCanvasWidth);
-  const viewport = useViewportWidth();
+  const { controller, windowId } = useCanvasInternals();
+  const isOpen = useCanvasState((s) => selectCanvasIsOpen(s, windowId));
+  const isFullscreen = useCanvasState((s) => selectCanvasIsFullscreen(s, windowId));
+  const width = useCanvasState((s) => selectCanvasWidth(s, windowId));
+  const region = useRegionWidth();
   if (!isOpen) return 0;
   if (isFullscreen) return null;
-  return fitWidth(width, viewport);
-}
-function CanvasColumn({ className, style, onLiveWidth }) {
-  const isOpen = useCanvasState(selectCanvasIsOpen);
-  const isFullscreen = useCanvasState(selectCanvasIsFullscreen);
-  const width = useCanvasState(selectCanvasWidth);
-  const layout = useCanvasState(selectCanvasLayout);
-  const viewport = useViewportWidth();
-  const [dragWidth, setDragWidth] = (0, import_react3.useState)(null);
+  return fitCanvasWidth(width, region, controller.rules);
+}
+function CanvasColumn({ className, style, onLiveWidth, placement = "docked" }) {
+  const { controller, windowId } = useCanvasInternals();
+  const isOpen = useCanvasState((s) => selectCanvasIsOpen(s, windowId));
+  const isFullscreen = useCanvasState((s) => selectCanvasIsFullscreen(s, windowId));
+  const width = useCanvasState((s) => selectCanvasWidth(s, windowId));
+  const layout = useCanvasState((s) => selectCanvasLayout(s, windowId));
+  const region = useRegionWidth();
+  const [dragWidth, setDragWidth] = (0, import_react5.useState)(null);
   useRegisterCanvasPresence();
-  if (!isOpen) return null;
-  const fitted = fitWidth(width, viewport);
+  if (!isOpen || !layout) return null;
+  const fitted = fitCanvasWidth(width, region, controller.rules);
   const shown = dragWidth ?? fitted;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "aside",
     {
       className: ["mxc-column", className].filter(Boolean).join(" "),
       "data-fullscreen": isFullscreen ? "" : void 0,
+      "data-placement": placement,
+      "data-mxc-window": windowId,
       "aria-label": "Canvas",
       style: { ...style, ["--mxc-width"]: `${shown}px` },
       children: [
-        !isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        placement === "docked" && !isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           WidthHandle,
           {
             width: fitted,
+            region,
             onDrag: (next) => {
               setDragWidth(next);
               onLiveWidth?.(next);
             }
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mxc-layout", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LayoutNodeView, { node: layout }) })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mxc-layout", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LayoutNodeView, { node: layout }) })
       ]
     }
   );
 }
-function WidthHandle({ width, onDrag }) {
+function WidthHandle({ width, region, onDrag }) {
   const canvas = useCanvas();
-  const start = (0, import_react3.useRef)(null);
-  const clamp = (next) => {
-    const max = Math.max(CANVAS_MIN_WIDTH, window.innerWidth - MIN_MAIN_WIDTH);
-    return Math.min(max, Math.max(CANVAS_MIN_WIDTH, next));
-  };
+  const start = (0, import_react5.useRef)(null);
+  const clamp = (next) => clampDraggedCanvasWidth(next, region, canvas.rules);
   const onPointerDown = (event) => {
     event.preventDefault();
     event.currentTarget.setPointerCapture(event.pointerId);
@@ -1359,7 +2410,7 @@ function WidthHandle({ width, onDrag }) {
     onDrag(null);
     canvas.setWidth(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       className: "mxc-width-handle",
@@ -1372,7 +2423,7 @@ function WidthHandle({ width, onDrag }) {
       onPointerMove,
       onPointerUp: finish,
       onPointerCancel: finish,
-      onDoubleClick: () => canvas.setWidth(Math.round(window.innerWidth / 2)),
+      onDoubleClick: () => canvas.setWidth(clamp(Math.round(region / 2))),
       onKeyDown: (event) => {
         if (event.key === "ArrowLeft") canvas.setWidth(clamp(width + 32));
         if (event.key === "ArrowRight") canvas.setWidth(clamp(width - 32));
@@ -1381,15 +2432,31 @@ function WidthHandle({ width, onDrag }) {
   );
 }
 function LayoutNodeView({ node }) {
-  if (node.type === "pane") return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CanvasPaneView, { paneId: node.paneId });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SplitView, { node });
+  if (node.type === "pane") return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CanvasPaneView, { paneId: node.paneId });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SplitView, { node });
+}
+function useMeasuredWidth(ref, enabled) {
+  const [width, setWidth] = (0, import_react5.useState)(0);
+  useIsoLayoutEffect2(() => {
+    const el = ref.current;
+    if (!enabled || !el) return;
+    setWidth(el.getBoundingClientRect().width);
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => setWidth(el.getBoundingClientRect().width));
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [enabled]);
+  return width;
 }
 function SplitView({ node }) {
   const canvas = useCanvas();
-  const ref = (0, import_react3.useRef)(null);
-  const [liveSizes, setLiveSizes] = (0, import_react3.useState)(null);
+  const ref = (0, import_react5.useRef)(null);
+  const [liveSizes, setLiveSizes] = (0, import_react5.useState)(null);
   const sizes = liveSizes ?? node.sizes;
-  const horizontal = node.orientation === "horizontal";
+  const measuredWidth = useMeasuredWidth(ref, node.orientation === "horizontal" && canvas.rules.paneMinWidth > 0);
+  const stacked = node.orientation === "horizontal" && shouldStackSplit(measuredWidth, node.children.length, canvas.rules);
+  const orientation = stacked ? "vertical" : node.orientation;
+  const horizontal = orientation === "horizontal";
   const beginDrag = (index) => (event) => {
     const el = ref.current;
     if (!el) return;
@@ -1401,10 +2468,10 @@ function SplitView({ node }) {
     const base = [...node.sizes];
     const pair = (base[index] ?? 0) + (base[index + 1] ?? 0);
     const target = event.currentTarget;
-    document.documentElement.dataset.mxcResizing = "";
+    document.documentElement.dataset.mxcResizing = horizontal ? "col" : "row";
     const compute = (pos) => {
       const delta = (pos - origin) / total;
-      const min = 0.12;
+      const min = CANVAS_MIN_SPLIT_FRACTION;
       const first = Math.min(pair - min, Math.max(min, (base[index] ?? 0) + delta));
       const next = [...base];
       next[index] = first;
@@ -1424,11 +2491,11 @@ function SplitView({ node }) {
     target.addEventListener("pointerup", up);
     target.addEventListener("pointercancel", up);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: "mxc-split", "data-orientation": node.orientation, children: node.children.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, className: "mxc-split", "data-orientation": orientation, "data-stacked": stacked ? "" : void 0, children: node.children.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     SplitChild,
     {
       size: sizes[i] ?? 1 / node.children.length,
-      handle: i < node.children.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      handle: i < node.children.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "div",
         {
           className: "mxc-split-handle",
@@ -1438,40 +2505,43 @@ function SplitView({ node }) {
           onDoubleClick: () => canvas.resizeSplit(node.id, node.children.map(() => 1 / node.children.length))
         }
       ) : null,
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LayoutNodeView, { node: child })
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LayoutNodeView, { node: child })
     },
     child.type === "pane" ? child.paneId : child.id
   )) });
 }
 function SplitChild({ size, handle, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mxc-split-child", style: { flexGrow: size, flexBasis: 0 }, children }),
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mxc-split-child", style: { flexGrow: size, flexBasis: 0 }, children }),
     handle
   ] });
 }
+var isMac2 = () => typeof navigator !== "undefined" && /mac|iphone|ipad/i.test(navigator.platform ?? "");
 function CanvasToggle({ className }) {
-  const canvas = useCanvas();
-  const isOpen = useCanvasState(selectCanvasIsOpen);
-  const count = useCanvasState(selectCanvasItemCount);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: ["mxc-toggle", className].filter(Boolean).join(" "), "data-open": isOpen ? "" : void 0, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      import_tap_target2.TapTargetButtonTransparent,
+  const { controller, windowId } = useCanvasInternals();
+  const isOpen = useCanvasState((s) => selectCanvasIsOpen(s, windowId));
+  const count = useCanvasState((s) => selectCanvasWindowItemCount(s, windowId));
+  const hint = canvasShortcutHint("canvas.toggle", isMac2());
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: ["mxc-toggle", className].filter(Boolean).join(" "), "data-open": isOpen ? "" : void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_tap_target.TapTargetButtonTransparent,
       {
         ariaLabel: isOpen ? "Hide canvas" : "Show canvas",
-        tooltip: isOpen ? "Hide canvas (\u2318\\)" : "Show canvas (\u2318\\)",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PanelRightIcon, {}),
-        onClick: () => canvas.toggle()
+        tooltip: `${isOpen ? "Hide canvas" : "Show canvas"}${hint ? ` (${hint})` : ""}`,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PanelRightIcon, {}),
+        onClick: () => controller.toggle()
       }
     ),
-    count > 0 && !isOpen ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mxc-toggle-badge", children: count }) : null
+    count > 0 && !isOpen ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mxc-toggle-badge", children: count }) : null
   ] });
 }
 function CanvasFrame({ children, className }) {
-  const isFullscreen = useCanvasState(selectCanvasIsFullscreen);
-  const isOpen = useCanvasState(selectCanvasIsOpen);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: ["mxc-frame", className].filter(Boolean).join(" "), "data-canvas-open": isOpen ? "" : void 0, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mxc-frame-main", hidden: isOpen && isFullscreen, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CanvasColumn, {})
+  const { windowId } = useCanvasInternals();
+  const isFullscreen = useCanvasState((s) => selectCanvasIsFullscreen(s, windowId));
+  const isOpen = useCanvasState((s) => selectCanvasIsOpen(s, windowId));
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: ["mxc-frame", className].filter(Boolean).join(" "), "data-canvas-open": isOpen ? "" : void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mxc-frame-main", hidden: isOpen && isFullscreen, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CanvasColumn, {})
   ] });
 }
 //# sourceMappingURL=react.cjs.map