@ai-matrx/canvas 0.6.1 → 0.7.0

package/dist/react.js

@@ -5,13 +5,52 @@
 import {
   createContext,
   useContext,
-  useEffect as useEffect2,
+  useEffect as useEffect3,
   useMemo,
-  useRef as useRef2,
+  useRef as useRef3,
   useState as useState2,
   useSyncExternalStore as useSyncExternalStore2
 } from "react";
 
+// src/react/menuItems.ts
+import { useEffect, useLayoutEffect, useRef } from "react";
+var useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function createCanvasItemMenus() {
+  const sources = /* @__PURE__ */ new Map();
+  return {
+    register(itemId, read) {
+      let set = sources.get(itemId);
+      if (!set) sources.set(itemId, set = /* @__PURE__ */ new Set());
+      set.add(read);
+      return () => {
+        const current = sources.get(itemId);
+        current?.delete(read);
+        if (current && current.size === 0) sources.delete(itemId);
+      };
+    },
+    read(itemId) {
+      const out = [];
+      for (const read of sources.get(itemId) ?? []) {
+        try {
+          out.push(...read());
+        } catch (error) {
+          console.error("[@ai-matrx/canvas] a body's menu entries threw", error);
+        }
+      }
+      return out;
+    }
+  };
+}
+function useCanvasMenuItems(itemId, items) {
+  const { itemMenus } = useCanvasInternals();
+  const latest = useRef(items);
+  latest.current = items;
+  useIsoLayoutEffect(() => {
+    if (!itemId) return void 0;
+    return itemMenus.register(itemId, () => latest.current);
+  }, [itemMenus, itemId]);
+}
+
 // src/core/types.ts
 var CANVAS_MAIN_WINDOW = "main";
 var CANVAS_LAUNCHER_KIND = "canvas.launcher";
@@ -179,6 +218,8 @@ var canvasActions = {
   navigate: (itemId, to) => ({ type: `${P}navigate`, payload: { itemId, to, now: Date.now() } }),
   /** Returns a tab to what it showed before its last navigate. */
   back: (itemId) => ({ type: `${P}back`, payload: { itemId, now: Date.now() } }),
+  /** Re-does the last Back (the step Back left), with that step's live body. */
+  forward: (itemId) => ({ type: `${P}forward`, payload: { itemId, now: Date.now() } }),
   closeItem: (itemId) => ({ type: `${P}closeItem`, payload: { itemId } }),
   closeOthers: (itemId) => ({ type: `${P}closeOthers`, payload: { itemId } }),
   activate: (itemId) => ({ type: `${P}activate`, payload: { itemId } }),
@@ -379,6 +420,7 @@ function newItem(kind, key, title, data, now, steps) {
   const id = canvasItemId(kind, key);
   const history = steps?.history ?? [];
   const kept = steps?.kept ?? [];
+  const forward = steps?.forward ?? [];
   return {
     id,
     kind,
@@ -390,7 +432,8 @@ function newItem(kind, key, title, data, now, steps) {
     // A reused instance is the SAME live body coming back (Back, or returning to a kept step).
     instance: steps?.instance ?? `${now.toString(36)}:${id}`,
     ...history.length > 0 ? { history: history.slice(-CANVAS_HISTORY_LIMIT) } : {},
-    ...kept.length > 0 ? { kept: kept.slice(-CANVAS_KEEP_ALIVE_DEPTH) } : {}
+    ...kept.length > 0 ? { kept: kept.slice(-CANVAS_KEEP_ALIVE_DEPTH) } : {},
+    ...forward.length > 0 ? { forward: forward.slice(-CANVAS_HISTORY_LIMIT) } : {}
   };
 }
 function historyEntry(item) {
@@ -436,12 +479,14 @@ function sanitizeHistory(raw) {
 function sanitizeItem(item) {
   const history = sanitizeHistory(item.history);
   const kept = sanitizeHistory(item.kept).slice(-CANVAS_KEEP_ALIVE_DEPTH);
-  const { history: _history, kept: _kept, instance, ...rest } = item;
+  const forward = sanitizeHistory(item.forward);
+  const { history: _history, kept: _kept, forward: _forward, instance, ...rest } = item;
   return {
     ...rest,
     ...typeof instance === "string" && instance ? { instance } : {},
     ...history.length > 0 ? { history } : {},
-    ...kept.length > 0 ? { kept } : {}
+    ...kept.length > 0 ? { kept } : {},
+    ...forward.length > 0 ? { forward } : {}
   };
 }
 function clampWidth(width) {
@@ -632,6 +677,9 @@ function canvasReducer(state = createInitialCanvasState(), action) {
       const keptIndex = keptAll.findIndex((entry) => canvasItemId(entry.kind, entry.key) === targetId);
       const revived = keptIndex >= 0 ? keptAll[keptIndex] : void 0;
       const kept = keptAll.filter((_, i) => i !== keptIndex);
+      const forwardAll = current.forward ?? [];
+      const nextForward = forwardAll[forwardAll.length - 1];
+      const forward = nextForward && canvasItemId(nextForward.kind, nextForward.key) === targetId ? forwardAll.slice(0, -1) : [];
       return replaceInPlace(
         state,
         current,
@@ -641,7 +689,7 @@ function canvasReducer(state = createInitialCanvasState(), action) {
           to.title !== void 0 ? to.title : revived?.title ?? null,
           to.data !== void 0 ? to.data : revived?.data ?? null,
           now,
-          { history, kept, instance: revived?.instance }
+          { history, kept, forward, instance: revived?.instance }
         )
       );
     }
@@ -657,10 +705,36 @@ function canvasReducer(state = createInitialCanvasState(), action) {
         return focusExisting(canvasReducer(state, canvasActions.closeItem(itemId)), targetId);
       }
       const kept = [...(current.kept ?? []).filter((k) => canvasItemId(k.kind, k.key) !== itemId), historyEntry(current)];
+      const forward = [...current.forward ?? [], historyEntry(current)];
       return replaceInPlace(
         state,
         current,
-        newItem(entry.kind, entry.key, entry.title, entry.data, now, { history: history.slice(0, -1), kept, instance: entry.instance })
+        newItem(entry.kind, entry.key, entry.title, entry.data, now, { history: history.slice(0, -1), kept, forward, instance: entry.instance })
+      );
+    }
+    case `${P}forward`: {
+      const { itemId, now } = action.payload;
+      const current = state.items[itemId];
+      const forwardAll = current?.forward ?? [];
+      const entry = forwardAll[forwardAll.length - 1];
+      if (!current || !entry || !paneOf(state, itemId)) return state;
+      const targetId = canvasItemId(entry.kind, entry.key);
+      if (targetId === itemId) return state;
+      if (state.items[targetId]) {
+        return focusExisting(canvasReducer(state, canvasActions.closeItem(itemId)), targetId);
+      }
+      const keptAll = current.kept ?? [];
+      const revived = keptAll.find((k) => canvasItemId(k.kind, k.key) === targetId);
+      const kept = keptAll.filter((k) => canvasItemId(k.kind, k.key) !== targetId);
+      return replaceInPlace(
+        state,
+        current,
+        newItem(entry.kind, entry.key, entry.title, entry.data, now, {
+          history: [...current.history ?? [], historyEntry(current)],
+          kept,
+          forward: forwardAll.slice(0, -1),
+          instance: revived?.instance ?? entry.instance
+        })
       );
     }
     case `${P}closeItem`: {
@@ -912,6 +986,7 @@ function toPersistableSnapshot(state, isRestorable) {
 }
 
 // src/core/rules.ts
+var CANVAS_PANE_MIN_WIDTH = 280;
 var CANVAS_WEB_LAYOUT_RULES = {
   defaultWidth: CANVAS_DEFAULT_WIDTH,
   minWidth: CANVAS_MIN_WIDTH,
@@ -919,7 +994,9 @@ var CANVAS_WEB_LAYOUT_RULES = {
   // Split down 70/30 like the desktop: what opens below (notifications, a feed) is the smaller pane.
   stackSplit: 0.7,
   sideSplit: 0.5,
-  paneMinWidth: 0
+  // A pane narrower than this cannot show a header (Back, a readable tab, "+", the menu, close) and a
+  // body side by side with another: a split right that would go under it stacks instead.
+  paneMinWidth: CANVAS_PANE_MIN_WIDTH
 };
 var clampFraction = (value, fallback) => Number.isFinite(value) ? Math.min(0.88, Math.max(0.12, value)) : fallback;
 function resolveCanvasLayoutRules(rules) {
@@ -958,6 +1035,9 @@ var CANVAS_SHORTCUTS = [
   { 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 },
+  // Browsers own ⌘[ / ⌘] for their own history: data for a desktop host (and the header's Back / Forward).
+  { id: "canvas.back", accelerator: "CmdOrCtrl+[", when: "canvas-focus", label: "Back", web: false },
+  { id: "canvas.forward", accelerator: "CmdOrCtrl+]", when: "canvas-focus", label: "Forward", web: false },
   { 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 }
@@ -1007,11 +1087,17 @@ function runCanvasCommand(controller, id, windowId = controller.windowId) {
       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;
+    case "canvas.back":
+      if (!frame2?.isOpen || !pane?.activeItemId) return false;
+      return controller.back(pane.activeItemId) !== null;
+    case "canvas.forward":
+      if (!frame2?.isOpen || !pane?.activeItemId) return false;
+      return controller.forward(pane.activeItemId) !== null;
     default:
       return false;
   }
 }
-var CODE_FOR = { "\\": "Backslash", Tab: "Tab", Escape: "Escape", Enter: "Enter" };
+var CODE_FOR = { "\\": "Backslash", "[": "BracketLeft", "]": "BracketRight", Tab: "Tab", Escape: "Escape", Enter: "Enter" };
 function matchesCanvasAccelerator(input, accelerator, isMac3) {
   const parts = accelerator.split("+");
   const key = parts.pop() ?? "";
@@ -1128,6 +1214,13 @@ function view(shared, windowId) {
       dispatch(canvasActions.back(itemId));
       return canvasItemId(entry.kind, entry.key);
     },
+    forward(itemId) {
+      const forward = store.getState().items[itemId]?.forward ?? [];
+      const entry = forward[forward.length - 1];
+      if (!entry) return null;
+      dispatch(canvasActions.forward(itemId));
+      return canvasItemId(entry.kind, entry.key);
+    },
     newTab(paneId) {
       const state = store.getState();
       const frame2 = canvasWindowFrame(state, windowId);
@@ -1394,6 +1487,16 @@ function selectCanvasWindowItemCount(s, windowId) {
 var NO_WINDOWS = Object.freeze({});
 var NO_HISTORY = Object.freeze([]);
 var selectCanvasCanGoBack = (s, itemId) => (s.items[itemId]?.history?.length ?? 0) > 0;
+var selectCanvasCanGoForward = (s, itemId) => (s.items[itemId]?.forward?.length ?? 0) > 0;
+function selectCanvasPresentedPaneId(s, windowId) {
+  const f = frame(s, windowId);
+  if (!f) return null;
+  const ids = listPaneIds(f.layout);
+  const holds = (id) => (s.panes[id]?.itemIds.length ?? 0) > 0;
+  const focused = ids.find((id) => id === f.focusedPaneId);
+  if (focused && holds(focused)) return focused;
+  return ids.find(holds) ?? focused ?? ids[0] ?? null;
+}
 
 // src/core/presentation.ts
 var CANVAS_PHONE_MAX_WIDTH = 767;
@@ -1437,7 +1540,9 @@ function toggleKind(controller, input) {
   const before = selectCanvasKindVisibility(controller.getState(), input.kind, key);
   if (before === "visible") {
     if ((input.whenVisible ?? "close") === "close") {
+      const windowId = canvasWindowOfItem(controller.getState(), itemId);
       controller.close(itemId);
+      if (windowId && selectCanvasWindowItemCount(controller.getState(), windowId) === 0) controller.hide(windowId);
     } else {
       controller.hide(canvasWindowOfItem(controller.getState(), itemId) ?? void 0);
     }
@@ -1459,7 +1564,7 @@ function toggleKind(controller, input) {
 }
 
 // src/react/layer.tsx
-import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { useEffect as useEffect2, useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState, useSyncExternalStore } from "react";
 import { createPortal } from "react-dom";
 import { jsx } from "react/jsx-runtime";
 function createCanvasLayer(getPorts) {
@@ -1528,7 +1633,7 @@ function createCanvasLayer(getPorts) {
 function CanvasDomOverlay({ layer }) {
   const elements = useSyncExternalStore(layer.dom.subscribe, layer.dom.list, layer.dom.list);
   const [mounted, setMounted] = useState(false);
-  useEffect(() => setMounted(true), []);
+  useEffect2(() => setMounted(true), []);
   if (!mounted || elements.length === 0 || typeof document === "undefined") return null;
   return createPortal(
     /* @__PURE__ */ jsx("div", { className: "mxc-overlay", "aria-hidden": "true", children: elements.map(([id, element]) => /* @__PURE__ */ jsx(FloatingView, { element }, id)) }),
@@ -1544,11 +1649,11 @@ function FloatingView({ element }) {
   return null;
 }
 function Tooltip({ element }) {
-  const ref = useRef(null);
+  const ref = useRef2(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;
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     const el = ref.current;
     if (!el) return;
     const width = el.offsetWidth;
@@ -1683,9 +1788,9 @@ function CanvasProvider({
     () => ({ itemActions, popOut, dockBack, showMenu, overlay, onNativeBodyFrame }),
     [itemActions, popOut, dockBack, showMenu, overlay, onNativeBodyFrame]
   );
-  const portsRef = useRef2(hostPorts);
+  const portsRef = useRef3(hostPorts);
   portsRef.current = hostPorts;
-  const [{ controller, layer, launcherEntries }] = useState2(() => ({
+  const [{ controller, layer, launcherEntries, itemMenus }] = useState2(() => ({
     controller: createCanvasController({
       store: store ?? createCanvasStore(),
       persistence: persistence === void 0 ? createLocalStorageCanvasPersistence() : persistence,
@@ -1699,11 +1804,12 @@ function CanvasProvider({
       preferredTarget: (kind) => getCanvasKind(kind)?.preferredTarget
     }),
     layer: createCanvasLayer(() => portsRef.current),
-    launcherEntries: createLauncherEntryStore()
+    launcherEntries: createLauncherEntryStore(),
+    itemMenus: createCanvasItemMenus()
   }));
   const windowId = controller.windowId;
-  useEffect2(() => controller.start(), [controller]);
-  useEffect2(() => {
+  useEffect3(() => controller.start(), [controller]);
+  useEffect3(() => {
     if (!hotkeys) return;
     const isMac3 = isMacPlatform();
     const applies = (when, event) => {
@@ -1725,8 +1831,8 @@ function CanvasProvider({
     return () => window.removeEventListener("keydown", onKey);
   }, [controller, hotkeys, windowId]);
   const value = useMemo(
-    () => ({ controller, windowId, ports: hostPorts, layer, regionWidth, tabStrip, launcherEntries }),
-    [controller, windowId, hostPorts, layer, regionWidth, tabStrip, launcherEntries]
+    () => ({ controller, windowId, ports: hostPorts, layer, regionWidth, tabStrip, launcherEntries, itemMenus }),
+    [controller, windowId, hostPorts, layer, regionWidth, tabStrip, launcherEntries, itemMenus]
   );
   return /* @__PURE__ */ jsxs(CanvasContext.Provider, { value, children: [
     children,
@@ -1771,7 +1877,7 @@ function useRegisterCanvasPresence() {
   const context = useContext(CanvasContext);
   const controller = context?.controller;
   const windowId = context?.windowId;
-  useEffect2(() => controller?.registerPresentation(windowId), [controller, windowId]);
+  useEffect3(() => controller?.registerPresentation(windowId), [controller, windowId]);
 }
 var noPresence = () => () => void 0;
 function useCanvasIsPresented() {
@@ -1822,7 +1928,7 @@ function useCanvasLauncherEntry(entry) {
   const store = useContext(CanvasContext)?.launcherEntries;
   const fingerprint = JSON.stringify([entry.kind, entry.key, entry.title ?? null, entry.data ?? null]);
   const icon = entry.icon;
-  useEffect2(() => {
+  useEffect3(() => {
     if (!store) return void 0;
     const [kind, key, title, data] = JSON.parse(fingerprint);
     return store.add({ kind, key, title, data, ...icon ? { icon } : {} });
@@ -1844,9 +1950,9 @@ function useCanvasLauncherEntries() {
 
 // src/react/CanvasColumn.tsx
 import {
-  useEffect as useEffect7,
-  useLayoutEffect as useLayoutEffect5,
-  useRef as useRef7,
+  useEffect as useEffect8,
+  useLayoutEffect as useLayoutEffect6,
+  useRef as useRef8,
   useState as useState6,
   useSyncExternalStore as useSyncExternalStore4
 } from "react";
@@ -1858,19 +1964,19 @@ import {
   Suspense,
   lazy,
   memo,
-  useEffect as useEffect5,
-  useLayoutEffect as useLayoutEffect3,
+  useEffect as useEffect6,
+  useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo2,
-  useRef as useRef5,
+  useRef as useRef6,
   useState as useState4
 } from "react";
 
 // src/react/chrome.tsx
 import {
   forwardRef,
-  useEffect as useEffect3,
-  useLayoutEffect as useLayoutEffect2,
-  useRef as useRef3,
+  useEffect as useEffect4,
+  useLayoutEffect as useLayoutEffect3,
+  useRef as useRef4,
   useState as useState3
 } from "react";
 
@@ -1970,16 +2076,15 @@ var LayoutGridIcon = (p) => /* @__PURE__ */ jsxs2(Glyph, { ...p, children: [
   /* @__PURE__ */ jsx3("rect", { width: "7", height: "7", x: "14", y: "14", rx: "1" }),
   /* @__PURE__ */ jsx3("rect", { width: "7", height: "7", x: "3", y: "14", rx: "1" })
 ] });
-var ChevronLeftIcon = (p) => /* @__PURE__ */ jsx3(Glyph, { ...p, children: /* @__PURE__ */ jsx3("path", { d: "m15 18-6-6 6-6" }) });
-var ChevronRightIcon = (p) => /* @__PURE__ */ jsx3(Glyph, { ...p, children: /* @__PURE__ */ jsx3("path", { d: "m9 18 6-6-6-6" }) });
+var ChevronDownIcon = (p) => /* @__PURE__ */ jsx3(Glyph, { ...p, children: /* @__PURE__ */ jsx3("path", { d: "m6 9 6 6 6-6" }) });
 
 // src/react/chrome.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var useIsoLayoutEffect = typeof window === "undefined" ? useEffect3 : useLayoutEffect2;
+var useIsoLayoutEffect2 = typeof window === "undefined" ? useEffect4 : useLayoutEffect3;
 function useTruncated(title) {
-  const ref = useRef3(null);
+  const ref = useRef4(null);
   const [truncated, setTruncated] = useState3(false);
-  useIsoLayoutEffect(() => {
+  useIsoLayoutEffect2(() => {
     const el = ref.current;
     if (!el) return void 0;
     const check = () => setTruncated(el.scrollWidth - el.clientWidth > 1);
@@ -1993,15 +2098,15 @@ function useTruncated(title) {
 var cx = (...names) => names.filter(Boolean).join(" ");
 function useTooltip(text) {
   const internals = useOptionalCanvasInternals();
-  const timer = useRef3(null);
-  const hide = useRef3(null);
+  const timer = useRef4(null);
+  const hide = useRef4(null);
   const close = () => {
     if (timer.current) clearTimeout(timer.current);
     timer.current = null;
     hide.current?.();
     hide.current = null;
   };
-  useEffect3(() => close, []);
+  useEffect4(() => close, []);
   if (!text) return { close, handlers: {} };
   if (!internals) return { close, handlers: { title: text } };
   const open = (element, delay) => {
@@ -2198,7 +2303,7 @@ function BrowserTabs({ tabs, activeId, onSelect, onClose, onNew, newLabel = "New
 function BrowserBar({ url, canGoBack, canGoForward, onBack, onForward, onReload, onNavigate, trailing, className }) {
   const [draft, setDraft] = useState3(url);
   const [editing, setEditing] = useState3(false);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!editing) setDraft(url);
   }, [url, editing]);
   return /* @__PURE__ */ jsxs3("div", { "data-slot": "browser-bar", className: cx("mxc-browser-bar", className), children: [
@@ -2240,15 +2345,15 @@ function BrowserBar({ url, canGoBack, canGoForward, onBack, onForward, onReload,
 }
 
 // src/react/dnd.ts
-import { useEffect as useEffect4, useRef as useRef4 } from "react";
+import { useEffect as useEffect5, useRef as useRef5 } from "react";
 var CANVAS_DRAG_MIME = "application/x-matrx-canvas-item";
 function useTabDrag(itemId, title) {
   const { layer } = useCanvasInternals();
-  const active = useRef4([]);
+  const active = useRef5([]);
   const end = () => {
     for (const dispose of active.current.splice(0)) dispose();
   };
-  useEffect4(() => end, []);
+  useEffect5(() => end, []);
   return {
     draggable: true,
     onDragStart: (event) => {
@@ -2263,8 +2368,8 @@ function useTabDrag(itemId, title) {
 function usePaneDrop(paneId, getOutline) {
   const canvas = useCanvas();
   const { layer } = useCanvasInternals();
-  const drop = useRef4(null);
-  useEffect4(() => () => drop.current?.(), []);
+  const drop = useRef5(null);
+  useEffect5(() => () => drop.current?.(), []);
   const hide = () => {
     drop.current?.();
     drop.current = null;
@@ -2395,6 +2500,9 @@ function useItemKind(kindId) {
   const registered = useCanvasKind(kindId);
   return kindId === CANVAS_LAUNCHER_KIND ? CANVAS_LAUNCHER_KIND_DEFINITION : registered;
 }
+function resolveItemKind(kindId, lookup) {
+  return kindId === CANVAS_LAUNCHER_KIND ? CANVAS_LAUNCHER_KIND_DEFINITION : lookup(kindId);
+}
 
 // src/react/presentation.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
@@ -2489,7 +2597,7 @@ function useSlotSize(slots, paneId) {
 
 // src/react/bodies.tsx
 import { Fragment, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var useIsoLayoutEffect2 = typeof window === "undefined" ? useEffect5 : useLayoutEffect3;
+var useIsoLayoutEffect3 = typeof window === "undefined" ? useEffect6 : useLayoutEffect4;
 var LAZY = /* @__PURE__ */ Symbol.for("ai-matrx.canvas.lazy");
 function kindComponent(kind) {
   if (kind.component) return kind.component;
@@ -2540,17 +2648,24 @@ function layerSignature(state, windowId, onlyPane) {
     }
   }
   rows.sort((a, b) => a.born - b.born || a.hostId.localeCompare(b.hostId));
-  const head = [frame2.isOpen ? "1" : "0", frame2.isFullscreen ? "1" : "0", frame2.focusedPaneId, String(paneIds.length)].join(SEP2);
+  const head = [
+    frame2.isOpen ? "1" : "0",
+    frame2.isFullscreen ? "1" : "0",
+    frame2.focusedPaneId,
+    String(paneIds.length),
+    selectCanvasPresentedPaneId(state, windowId) ?? ""
+  ].join(SEP2);
   return [head, ...rows.map((r) => r.row)].join(ROW);
 }
 function parseSignature(signature) {
   if (!signature) return null;
   const [head = "", ...rows] = signature.split(ROW);
-  const [open, full, focusedPaneId = "", count = "1"] = head.split(SEP2);
+  const [open, full, focusedPaneId = "", count = "1", presentedPaneId = ""] = head.split(SEP2);
   return {
     isOpen: open === "1",
     isFullscreen: full === "1",
     focusedPaneId,
+    presentedPaneId,
     paneCount: Number(count) || 1,
     placed: rows.map((row) => {
       const [hostId = "", itemId = "", paneId = "", active, kept] = row.split(SEP2);
@@ -2602,12 +2717,12 @@ function CanvasBodyLayer() {
   const slots = useCanvasSlots();
   const signature = useCanvasState((s) => layerSignature(s, windowId));
   const single = useCanvasSinglePane();
-  const root = useRef5(null);
+  const root = useRef6(null);
   const [placement] = useState4(
     () => slots ? createPlacement(() => root.current, slots, () => layer.native.remeasure()) : null
   );
-  useIsoLayoutEffect2(() => placement?.place());
-  useIsoLayoutEffect2(() => slots && placement ? slots.subscribe(placement.place) : void 0, [slots, placement]);
+  useIsoLayoutEffect3(() => placement?.place());
+  useIsoLayoutEffect3(() => slots && placement ? slots.subscribe(placement.place) : void 0, [slots, placement]);
   const shape = parseSignature(signature);
   if (!slots || !placement || !shape) return null;
   return /* @__PURE__ */ jsx6("div", { ref: root, className: "mxc-bodies", "data-mxc-bodies": windowId, children: shape.placed.map(({ hostId, itemId, paneId, active, kept }) => /* @__PURE__ */ jsx6(
@@ -2617,7 +2732,7 @@ function CanvasBodyLayer() {
       itemId,
       kept,
       paneId,
-      visible: shape.isOpen && active && (!single || paneId === shape.focusedPaneId),
+      visible: shape.isOpen && active && (!single || paneId === shape.presentedPaneId),
       focused: active && shape.focusedPaneId === paneId,
       isFullscreen: shape.isFullscreen,
       paneCount: shape.paneCount,
@@ -2683,13 +2798,13 @@ var BodyHost = memo(function BodyHost2({
   const keptItem = useMemo2(() => step ? stepAsItem(step, owner ?? 0) : void 0, [step, owner]);
   const item = kept ? keptItem : live;
   const kind = useItemKind(item?.kind ?? "");
-  const element = useRef5(null);
+  const element = useRef6(null);
   const [everShown, setEverShown] = useState4(visible);
   if (visible && !everShown) setEverShown(true);
   const mounted = kind?.unmountWhenHidden ? visible : everShown;
   const presentation = usePanePresentation(slots, paneId, isFullscreen, paneCount);
   const drop = usePaneDrop(paneId, () => slots.section(paneId));
-  useIsoLayoutEffect2(() => {
+  useIsoLayoutEffect3(() => {
     const el = element.current;
     if (!placement || !el) return void 0;
     return placement.register(hostId, { element: el, paneId });
@@ -2775,8 +2890,8 @@ function KindRender({ kind, props }) {
 }
 function NativeBody({ itemId, windowId, visible, children }) {
   const { layer } = useCanvasInternals();
-  const ref = useRef5(null);
-  const measure = useRef5(() => void 0);
+  const ref = useRef6(null);
+  const measure = useRef6(() => void 0);
   measure.current = () => {
     const el = ref.current;
     const box = visible && el?.isConnected ? el.getBoundingClientRect() : null;
@@ -2787,8 +2902,8 @@ function NativeBody({ itemId, windowId, visible, children }) {
     const rect = { ...toCanvasRect(box), devicePixelRatio: window.devicePixelRatio || 1 };
     layer.native.report(itemId, rect, { visible: !layer.isBlocked(), windowId });
   };
-  useIsoLayoutEffect2(() => measure.current());
-  useIsoLayoutEffect2(() => {
+  useIsoLayoutEffect3(() => measure.current());
+  useIsoLayoutEffect3(() => {
     const el = ref.current;
     const run = () => measure.current();
     const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(run);
@@ -2840,11 +2955,28 @@ var ItemBoundary = class extends Component {
   }
 };
 
+// src/react/resizeGesture.ts
+function beginCanvasResize(mode) {
+  if (typeof document === "undefined") return () => void 0;
+  const root = document.documentElement;
+  root.dataset.mxcResizing = mode;
+  document.getSelection?.()?.removeAllRanges();
+  const refuse = (event) => event.preventDefault();
+  document.addEventListener("selectstart", refuse, true);
+  let ended = false;
+  return () => {
+    if (ended) return;
+    ended = true;
+    delete root.dataset.mxcResizing;
+    document.removeEventListener("selectstart", refuse, true);
+  };
+}
+
 // src/react/CanvasPane.tsx
-import { Component as Component2, useEffect as useEffect6, useLayoutEffect as useLayoutEffect4, useRef as useRef6, useState as useState5 } from "react";
+import { Component as Component2, useEffect as useEffect7, useLayoutEffect as useLayoutEffect5, useRef as useRef7, useState as useState5 } from "react";
 import * as Menu from "@radix-ui/react-dropdown-menu";
 import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
-var useIsoLayoutEffect3 = typeof window === "undefined" ? useEffect6 : useLayoutEffect4;
+var useIsoLayoutEffect4 = typeof window === "undefined" ? useEffect7 : useLayoutEffect5;
 function itemTitle(item, kind) {
   if (item.title) return item.title;
   if (item.kind === CANVAS_LAUNCHER_KIND) return "New tab";
@@ -2894,14 +3026,15 @@ function CanvasPaneView({ paneId }) {
   const paneCount = useCanvasState((s) => selectCanvasPaneCount(s, windowId));
   const role = useCanvasState((s) => windowId === CANVAS_MAIN_WINDOW ? "main" : s.windows[windowId]?.role ?? "window");
   const canGoBack = useCanvasState((s) => active ? selectCanvasCanGoBack(s, active.id) : false);
+  const canGoForward = useCanvasState((s) => active ? selectCanvasCanGoForward(s, active.id) : false);
   const kind = useItemKind(active?.kind ?? "");
   const singlePane = useCanvasSinglePane();
   const windowTabs = useCanvasState((s) => singlePane ? windowTabsSignature(s, windowId) : "");
-  const sectionRef = useRef6(null);
-  const bodyRef = useRef6(null);
+  const sectionRef = useRef7(null);
+  const bodyRef = useRef7(null);
   const presentation = usePanePresentation(slots, paneId, isFullscreen, paneCount);
   const drop = usePaneDrop(paneId, () => sectionRef.current);
-  useIsoLayoutEffect3(() => {
+  useIsoLayoutEffect4(() => {
     const body = bodyRef.current;
     const section = sectionRef.current;
     if (body) slots.set(paneId, body);
@@ -2929,7 +3062,17 @@ function CanvasPaneView({ paneId }) {
       focused,
       "data-mxc-pane": paneId,
       header: /* @__PURE__ */ jsxs6(Fragment2, { children: [
-        canGoBack && active ? /* @__PURE__ */ jsx7(CanvasHeaderButton, { className: "mxc-back", label: "Back", onClick: () => void canvas.back(active.id), children: /* @__PURE__ */ jsx7(ArrowLeftIcon, {}) }) : null,
+        canGoBack && active ? /* @__PURE__ */ jsx7(CanvasHeaderButton, { className: "mxc-back", label: "Back", shortcut: canvasShortcutHint("canvas.back", isMac()), onClick: () => void canvas.back(active.id), children: /* @__PURE__ */ jsx7(ArrowLeftIcon, {}) }) : null,
+        canGoForward && active ? /* @__PURE__ */ jsx7(
+          CanvasHeaderButton,
+          {
+            className: "mxc-forward",
+            label: "Forward",
+            shortcut: canvasShortcutHint("canvas.forward", isMac()),
+            onClick: () => void canvas.forward(active.id),
+            children: /* @__PURE__ */ jsx7(ArrowRightIcon, {})
+          }
+        ) : null,
         single && active ? /* @__PURE__ */ jsx7(SingleTitle, { item: active, kind }) : tabs.length > 0 ? /* @__PURE__ */ jsx7(TabStrip, { tabs, activeItemId: pane.activeItemId }) : /* @__PURE__ */ jsx7("span", { className: "mxc-panel-title", children: "New tab" }),
         /* @__PURE__ */ jsx7(CanvasHeaderButton, { className: "mxc-new-tab", label: "New tab", onClick: () => void canvas.newTab(paneId), children: /* @__PURE__ */ jsx7(PlusIcon, {}) })
       ] }),
@@ -2938,7 +3081,19 @@ function CanvasPaneView({ paneId }) {
         // Its own gapless row: a kind's tap buttons space themselves (the tap-target placement rule).
         /* @__PURE__ */ jsx7("span", { className: "mxc-kind-actions", children: /* @__PURE__ */ jsx7(Action, { ...kindProps }) })
       ) : null,
-      renderMenu: () => /* @__PURE__ */ jsx7(PaneMenu, { paneId, windowId, activeItem: active, kind, kindProps, tabCount: pane.itemIds.length, role }),
+      renderMenu: () => /* @__PURE__ */ jsx7(
+        PaneMenu,
+        {
+          paneId,
+          windowId,
+          activeItem: active,
+          kind,
+          kindProps,
+          tabCount: pane.itemIds.length,
+          role,
+          canSplit: !singlePane
+        }
+      ),
       expanded: isFullscreen,
       onToggleExpand: () => canvas.setFullscreen(!isFullscreen),
       expandShortcut: canvasShortcutHint("canvas.toggleFullscreen", isMac()),
@@ -2972,77 +3127,135 @@ function SingleTitle({ item, kind }) {
   const canvas = useCanvas();
   const title = itemTitle(item, kind);
   const drag = useTabDrag(item.id, title);
+  const name = useTruncated(title);
   const Icon = kind?.icon ?? AlertIcon;
-  return /* @__PURE__ */ jsxs6("span", { className: "mxc-panel-title mxc-single-title", "data-draggable": "", title, ...drag, children: [
+  return /* @__PURE__ */ jsxs6("span", { className: "mxc-panel-title mxc-single-title", "data-draggable": "", "data-truncated": name.truncated ? "" : void 0, title, ...drag, children: [
     /* @__PURE__ */ jsx7(Icon, { className: "mxc-title-icon" }),
-    /* @__PURE__ */ jsx7("span", { className: "mxc-tab-title", children: title }),
+    /* @__PURE__ */ jsx7("span", { ref: name.ref, className: "mxc-tab-title", children: title }),
     /* @__PURE__ */ jsx7("button", { type: "button", className: "mxc-tab-close", "data-slot": "browser-tab-close", "aria-label": `Close ${title}`, onClick: () => canvas.close(item.id), children: /* @__PURE__ */ jsx7(CloseIcon, {}) })
   ] });
 }
+var CANVAS_TAB_MIN_WIDTH = 78;
+var CANVAS_ACTIVE_TAB_MIN_WIDTH = 100;
+var TAB_LIST_BUTTON_ROOM = 30;
+var TAB_GAP = 2;
+function fitCanvasTabs(count, activeIndex, width) {
+  if (count <= 0) return { start: 0, end: 0, overflow: false, compact: false };
+  const need = (n) => CANVAS_ACTIVE_TAB_MIN_WIDTH + (n - 1) * (CANVAS_TAB_MIN_WIDTH + TAB_GAP);
+  if (width <= 0 || need(count) <= width) return { start: 0, end: count, overflow: false, compact: false };
+  if (count === 1) return { start: 0, end: 1, overflow: false, compact: true };
+  let fit = 1;
+  while (fit + 1 < count && need(fit + 1) + TAB_LIST_BUTTON_ROOM <= width) fit += 1;
+  const active = Math.min(Math.max(activeIndex, 0), count - 1);
+  const start = active < fit ? 0 : active - fit + 1;
+  return { start, end: start + fit, overflow: true, compact: need(fit) + TAB_LIST_BUTTON_ROOM > width };
+}
 function TabStrip({ tabs, activeItemId }) {
-  const strip = useRef6(null);
-  const [overflow, setOverflow] = useState5({ start: false, end: false });
-  const measure = useRef6(() => void 0);
-  measure.current = () => {
-    const el = strip.current;
-    if (!el) return;
-    const start = el.scrollLeft > 1;
-    const end = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
-    setOverflow((prev) => prev.start === start && prev.end === end ? prev : { start, end });
-  };
-  const tabKey = tabs.map((tab) => tab.itemId).join("|");
-  useIsoLayoutEffect3(() => {
+  const canvas = useCanvas();
+  const strip = useRef7(null);
+  const [width, setWidth] = useState5(0);
+  useIsoLayoutEffect4(() => {
     const el = strip.current;
     if (!el) return void 0;
-    const reveal = () => {
-      const tab = el.querySelector('[role="tab"][aria-selected="true"]');
-      if (tab) {
-        const left = tab.offsetLeft;
-        const right = left + tab.offsetWidth;
-        if (left < el.scrollLeft) el.scrollLeft = left;
-        else if (right > el.scrollLeft + el.clientWidth) el.scrollLeft = right - el.clientWidth;
-      }
-      measure.current();
-    };
-    reveal();
-    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(reveal);
+    const read = () => setWidth(Math.floor(el.getBoundingClientRect().width));
+    read();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(read);
     observer?.observe(el);
-    for (const tab of el.querySelectorAll('[role="tab"]')) observer?.observe(tab);
     return () => observer?.disconnect();
-  }, [activeItemId, tabKey]);
-  const page = (direction) => {
-    const el = strip.current;
-    if (!el) return;
-    const by = Math.max(48, Math.round(el.clientWidth * 0.8)) * direction;
-    if (typeof el.scrollBy === "function") el.scrollBy({ left: by, behavior: "smooth" });
-    else el.scrollLeft += by;
-  };
-  const overflowing = overflow.start || overflow.end;
+  }, []);
+  const activeIndex = Math.max(0, tabs.findIndex((tab) => tab.itemId === activeItemId));
+  const fit = fitCanvasTabs(tabs.length, activeIndex, width);
+  const shown = tabs.slice(fit.start, fit.end);
+  const hidden = tabs.length - shown.length;
   return /* @__PURE__ */ jsxs6(
     "div",
     {
+      ref: strip,
       className: "mxc-tabstrip",
-      "data-overflow": overflowing ? "" : void 0,
-      "data-overflow-start": overflow.start ? "" : void 0,
-      "data-overflow-end": overflow.end ? "" : void 0,
+      "data-overflow": fit.overflow ? "" : void 0,
+      "data-compact": fit.compact ? "" : void 0,
+      style: { ["--mxc-tab-min"]: `${CANVAS_TAB_MIN_WIDTH}px`, ["--mxc-tab-active-min"]: `${CANVAS_ACTIVE_TAB_MIN_WIDTH}px` },
       children: [
-        overflowing ? /* @__PURE__ */ jsx7(CanvasHeaderButton, { className: "mxc-tabs-scroll", label: "Scroll tabs left", available: overflow.start, onClick: () => page(-1), children: /* @__PURE__ */ jsx7(ChevronLeftIcon, {}) }) : null,
         /* @__PURE__ */ jsx7(
           "div",
           {
-            ref: strip,
             className: "mxc-tabs",
             role: "tablist",
             "aria-label": "Canvas tabs",
-            onScroll: () => measure.current(),
             onWheel: (event) => {
-              const el = strip.current;
-              if (el && Math.abs(event.deltaY) > Math.abs(event.deltaX)) el.scrollLeft += event.deltaY;
+              if (!fit.overflow || Math.abs(event.deltaY) < Math.abs(event.deltaX) || tabs.length < 2) return;
+              const next = tabs[(activeIndex + (event.deltaY > 0 ? 1 : -1) + tabs.length) % tabs.length];
+              if (next) canvas.activate(next.itemId);
             },
-            children: tabs.map((tab) => /* @__PURE__ */ jsx7(ItemTab, { itemId: tab.itemId, paneId: tab.paneId, index: tab.index, active: tab.itemId === activeItemId }, tab.itemId))
+            children: shown.map((tab) => /* @__PURE__ */ jsx7(ItemTab, { itemId: tab.itemId, paneId: tab.paneId, index: tab.index, active: tab.itemId === activeItemId }, tab.itemId))
           }
         ),
-        overflowing ? /* @__PURE__ */ jsx7(CanvasHeaderButton, { className: "mxc-tabs-scroll", label: "Scroll tabs right", available: overflow.end, onClick: () => page(1), children: /* @__PURE__ */ jsx7(ChevronRightIcon, {}) }) : null
+        fit.overflow ? /* @__PURE__ */ jsx7(TabListMenu, { tabs, activeItemId, hidden }) : null
+      ]
+    }
+  );
+}
+function TabListMenu({ tabs, activeItemId, hidden }) {
+  const canvas = useCanvas();
+  const { ports, layer } = useCanvasInternals();
+  const blocking = useRef7(null);
+  useEffect7(() => () => blocking.current?.(), []);
+  const label = `All tabs (${tabs.length})`;
+  const trigger = (props) => /* @__PURE__ */ jsxs6(CanvasHeaderButton, { className: "mxc-tab-list", label, "data-hidden-count": hidden, ...props, children: [
+    /* @__PURE__ */ jsx7(ChevronDownIcon, {}),
+    /* @__PURE__ */ jsx7("span", { className: "mxc-tab-list-count", "aria-hidden": "true", children: hidden })
+  ] });
+  const showMenu = ports.showMenu;
+  if (showMenu) {
+    return trigger({
+      onClick: (event) => {
+        const state = canvas.getState();
+        const entries = tabs.map((tab) => {
+          const item = state.items[tab.itemId];
+          const title = item ? itemTitle(item, resolveItemKind(item.kind, getCanvasKind)) : tab.itemId;
+          return { type: "item", id: tab.itemId, label: tab.itemId === activeItemId ? `${title} (current)` : title };
+        });
+        void showMenu(entries, toCanvasRect(event.currentTarget.getBoundingClientRect())).then(
+          (chosen) => {
+            if (chosen) canvas.activate(chosen);
+          },
+          (error) => console.error("[@ai-matrx/canvas] the host menu failed", error)
+        );
+      }
+    });
+  }
+  return /* @__PURE__ */ jsxs6(
+    Menu.Root,
+    {
+      onOpenChange: (open) => {
+        blocking.current?.();
+        blocking.current = open ? layer.beginBlocking() : null;
+      },
+      children: [
+        /* @__PURE__ */ jsx7(Menu.Trigger, { asChild: true, children: trigger({}) }),
+        /* @__PURE__ */ jsx7(Menu.Portal, { children: /* @__PURE__ */ jsx7(Menu.Content, { align: "end", sideOffset: 4, className: "mxc-menu mxc-tab-list-menu", "aria-label": "All tabs", children: tabs.map((tab) => /* @__PURE__ */ jsx7(TabListEntry, { itemId: tab.itemId, active: tab.itemId === activeItemId }, tab.itemId)) }) })
+      ]
+    }
+  );
+}
+function TabListEntry({ itemId, active }) {
+  const canvas = useCanvas();
+  const item = useCanvasState((s) => s.items[itemId]);
+  const kind = useItemKind(item?.kind ?? "");
+  if (!item) return null;
+  const Icon = kind?.icon ?? AlertIcon;
+  const title = itemTitle(item, kind);
+  return /* @__PURE__ */ jsxs6(
+    Menu.Item,
+    {
+      className: "mxc-menu-item mxc-tab-list-item",
+      "data-active": active ? "" : void 0,
+      "aria-current": active ? "true" : void 0,
+      title,
+      onSelect: () => canvas.activate(itemId),
+      children: [
+        /* @__PURE__ */ jsx7(Icon, {}),
+        /* @__PURE__ */ jsx7("span", { className: "mxc-tab-list-title", children: title })
       ]
     }
   );
@@ -3086,42 +3299,48 @@ function PaneMenu({
   kind,
   kindProps,
   tabCount,
-  role
+  role,
+  canSplit
 }) {
   const canvas = useCanvas();
-  const { ports, layer } = useCanvasInternals();
+  const { ports, layer, itemMenus } = useCanvasInternals();
   const moveId = tabCount > 1 ? activeItem?.id : void 0;
-  const blocking = useRef6(null);
-  useEffect6(() => () => blocking.current?.(), []);
-  const kindItems = kind?.menuItems && kindProps ? safeMenu(() => kind.menuItems?.(kindProps)) : [];
-  const hostItems = activeItem && ports.itemActions ? safeMenu(() => ports.itemActions?.(activeItem, kind)) : [];
-  const sections = [
-    [...kindItems, ...hostItems].map((entry) => ({ ...entry, id: `item:${entry.id}` })),
-    [
-      { id: "split-right", label: "Split right", icon: /* @__PURE__ */ jsx7(SplitRightIcon, {}), onSelect: () => canvas.splitPane(paneId, "horizontal", moveId) },
-      { id: "split-down", label: "Split down", icon: /* @__PURE__ */ jsx7(SplitDownIcon, {}), onSelect: () => canvas.splitPane(paneId, "vertical", moveId) },
-      ...activeItem && role === "pop-out" ? [{ id: "dock-back", label: "Dock back", icon: /* @__PURE__ */ jsx7(DockIcon, {}), onSelect: () => void canvas.dockBack(activeItem.id) }] : activeItem && ports.popOut ? [{ id: "pop-out", label: "Pop out", icon: /* @__PURE__ */ jsx7(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 blocking = useRef7(null);
+  useEffect7(() => () => blocking.current?.(), []);
+  const buildSections = () => {
+    const kindItems = kind?.menuItems && kindProps ? safeMenu(() => kind.menuItems?.(kindProps)) : [];
+    const hostItems = activeItem && ports.itemActions ? safeMenu(() => ports.itemActions?.(activeItem, kind)) : [];
+    const bodyItems = activeItem ? itemMenus.read(activeItem.id) : [];
+    return [
+      [...kindItems, ...bodyItems, ...hostItems].map((entry) => ({ ...entry, id: `item:${entry.id}` })),
+      [
+        ...canSplit ? [
+          { id: "split-right", label: "Split right", icon: /* @__PURE__ */ jsx7(SplitRightIcon, {}), onSelect: () => canvas.splitPane(paneId, "horizontal", moveId) },
+          { id: "split-down", label: "Split down", icon: /* @__PURE__ */ jsx7(SplitDownIcon, {}), onSelect: () => canvas.splitPane(paneId, "vertical", moveId) }
+        ] : [],
+        ...activeItem && role === "pop-out" ? [{ id: "dock-back", label: "Dock back", icon: /* @__PURE__ */ jsx7(DockIcon, {}), onSelect: () => void canvas.dockBack(activeItem.id) }] : activeItem && ports.popOut ? [{ id: "pop-out", label: "Pop out", icon: /* @__PURE__ */ jsx7(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__ */ jsx7(
       CanvasMenuTrigger,
       {
         onClick: (event) => {
+          const entries = [];
+          const handlers = /* @__PURE__ */ new Map();
+          buildSections().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);
+            }
+          });
           const anchor = toCanvasRect(event.currentTarget.getBoundingClientRect());
           void showMenu(entries, anchor).then(
             (chosen) => {
@@ -3142,11 +3361,14 @@ function PaneMenu({
       },
       children: [
         /* @__PURE__ */ jsx7(Menu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx7(CanvasMenuTrigger, {}) }),
-        /* @__PURE__ */ jsx7(Menu.Portal, { children: /* @__PURE__ */ jsx7(Menu.Content, { align: "end", sideOffset: 4, className: "mxc-menu", children: sections.map((section, i) => /* @__PURE__ */ jsx7(MenuSection, { first: i === 0, actions: section }, i)) }) })
+        /* @__PURE__ */ jsx7(Menu.Portal, { children: /* @__PURE__ */ jsx7(Menu.Content, { align: "end", sideOffset: 4, className: "mxc-menu", children: /* @__PURE__ */ jsx7(MenuSections, { build: buildSections }) }) })
       ]
     }
   );
 }
+function MenuSections({ build }) {
+  return /* @__PURE__ */ jsx7(Fragment2, { children: build().map((section, i) => /* @__PURE__ */ jsx7(MenuSection, { first: i === 0, actions: section }, i)) });
+}
 function MenuSection({ first, actions }) {
   return /* @__PURE__ */ jsxs6(Fragment2, { children: [
     first ? null : /* @__PURE__ */ jsx7(Menu.Separator, { className: "mxc-menu-separator" }),
@@ -3167,7 +3389,7 @@ function safeMenu(build) {
 
 // src/react/CanvasColumn.tsx
 import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
-var useIsoLayoutEffect4 = typeof window === "undefined" ? useEffect7 : useLayoutEffect5;
+var useIsoLayoutEffect5 = typeof window === "undefined" ? useEffect8 : useLayoutEffect6;
 function subscribeViewport(listener) {
   window.addEventListener("resize", listener);
   return () => window.removeEventListener("resize", listener);
@@ -3196,15 +3418,15 @@ function CanvasColumn({ className, style, onLiveWidth, placement = "docked" }) {
   const isFullscreen = useCanvasState((s) => selectCanvasIsFullscreen(s, windowId));
   const width = useCanvasState((s) => selectCanvasWidth(s, windowId));
   const layout = useCanvasState((s) => selectCanvasLayout(s, windowId));
-  const focusedPaneId = useCanvasState((s) => selectCanvasFocusedPaneId(s, windowId));
+  const presentedPaneId = useCanvasState((s) => selectCanvasPresentedPaneId(s, windowId));
   const region = useRegionWidth();
   const viewport = useViewportWidth();
   const singlePane = placement === "docked" && viewport > 0 && viewport <= CANVAS_PHONE_MAX_WIDTH;
   const [dragWidth, setDragWidth] = useState6(null);
   const [slots] = useState6(createCanvasSlots);
-  const ref = useRef7(null);
+  const ref = useRef8(null);
   useRegisterCanvasPresence();
-  useEffect7(() => {
+  useEffect8(() => {
     const el = ref.current;
     if (!el) return void 0;
     let frame2 = 0;
@@ -3265,7 +3487,7 @@ function CanvasColumn({ className, style, onLiveWidth, placement = "docked" }) {
           }
         ) : null,
         /* @__PURE__ */ jsx8(CanvasSlotsContext.Provider, { value: slots, children: /* @__PURE__ */ jsxs7(CanvasSinglePaneContext.Provider, { value: singlePane, children: [
-          /* @__PURE__ */ jsx8("div", { className: "mxc-layout", "data-single-pane": singlePane ? "" : void 0, children: singlePane ? /* @__PURE__ */ jsx8(CanvasPaneView, { paneId: presentedPane(layout, focusedPaneId) }) : /* @__PURE__ */ jsx8(LayoutNodeView, { node: layout }) }),
+          /* @__PURE__ */ jsx8("div", { className: "mxc-layout", "data-single-pane": singlePane ? "" : void 0, children: singlePane ? /* @__PURE__ */ jsx8(CanvasPaneView, { paneId: presentedPaneId ?? listPaneIds(layout)[0] }) : /* @__PURE__ */ jsx8(LayoutNodeView, { node: layout }) }),
           /* @__PURE__ */ jsx8(CanvasBodyLayer, {})
         ] }) })
       ] })
@@ -3274,13 +3496,14 @@ function CanvasColumn({ className, style, onLiveWidth, placement = "docked" }) {
 }
 function WidthHandle({ width, region, onDrag }) {
   const canvas = useCanvas();
-  const start = useRef7(null);
+  const start = useRef8(null);
+  useEffect8(() => () => start.current?.end(), []);
   const clamp = (next) => clampDraggedCanvasWidth(next, region, canvas.rules);
   const onPointerDown = (event) => {
     event.preventDefault();
     event.currentTarget.setPointerCapture(event.pointerId);
-    start.current = { x: event.clientX, width };
-    document.documentElement.dataset.mxcResizing = "";
+    start.current?.end();
+    start.current = { x: event.clientX, width, end: beginCanvasResize("") };
   };
   const onPointerMove = (event) => {
     if (!start.current) return;
@@ -3289,8 +3512,8 @@ function WidthHandle({ width, region, onDrag }) {
   const finish = (event) => {
     if (!start.current) return;
     const next = clamp(start.current.width + (start.current.x - event.clientX));
+    start.current.end();
     start.current = null;
-    delete document.documentElement.dataset.mxcResizing;
     onDrag(null);
     canvas.setWidth(next);
   };
@@ -3307,6 +3530,7 @@ function WidthHandle({ width, region, onDrag }) {
       onPointerMove,
       onPointerUp: finish,
       onPointerCancel: finish,
+      onLostPointerCapture: finish,
       onDoubleClick: () => canvas.setWidth(clamp(Math.round(region / 2))),
       onKeyDown: (event) => {
         if (event.key === "ArrowLeft") canvas.setWidth(clamp(width + 32));
@@ -3315,17 +3539,13 @@ function WidthHandle({ width, region, onDrag }) {
     }
   );
 }
-function presentedPane(layout, focused) {
-  const ids = listPaneIds(layout);
-  return ids.find((id) => id === focused) ?? ids[0];
-}
 function LayoutNodeView({ node }) {
   if (node.type === "pane") return /* @__PURE__ */ jsx8(CanvasPaneView, { paneId: node.paneId });
   return /* @__PURE__ */ jsx8(SplitView, { node });
 }
 function useMeasuredWidth(ref, enabled) {
   const [width, setWidth] = useState6(0);
-  useIsoLayoutEffect4(() => {
+  useIsoLayoutEffect5(() => {
     const el = ref.current;
     if (!enabled || !el) return;
     setWidth(el.getBoundingClientRect().width);
@@ -3338,7 +3558,7 @@ function useMeasuredWidth(ref, enabled) {
 }
 function SplitView({ node }) {
   const canvas = useCanvas();
-  const ref = useRef7(null);
+  const ref = useRef8(null);
   const [liveSizes, setLiveSizes] = useState6(null);
   const sizes = liveSizes ?? node.sizes;
   const measuredWidth = useMeasuredWidth(ref, node.orientation === "horizontal" && canvas.rules.paneMinWidth > 0);
@@ -3356,7 +3576,7 @@ function SplitView({ node }) {
     const base = [...node.sizes];
     const pair = (base[index] ?? 0) + (base[index + 1] ?? 0);
     const target = event.currentTarget;
-    document.documentElement.dataset.mxcResizing = horizontal ? "col" : "row";
+    const end = beginCanvasResize(horizontal ? "col" : "row");
     const compute = (pos) => {
       const delta = (pos - origin) / total;
       const min = CANVAS_MIN_SPLIT_FRACTION;
@@ -3371,7 +3591,7 @@ function SplitView({ node }) {
       target.removeEventListener("pointermove", move);
       target.removeEventListener("pointerup", up);
       target.removeEventListener("pointercancel", up);
-      delete document.documentElement.dataset.mxcResizing;
+      end();
       setLiveSizes(null);
       canvas.resizeSplit(node.id, compute(horizontal ? e.clientX : e.clientY));
     };
@@ -3475,6 +3695,8 @@ function CanvasFrame({ children, className }) {
 export {
   BrowserBar,
   BrowserTabs,
+  CANVAS_ACTIVE_TAB_MIN_WIDTH,
+  CANVAS_TAB_MIN_WIDTH,
   CanvasColumn,
   CanvasFrame,
   CanvasHeaderButton,
@@ -3487,8 +3709,10 @@ export {
   CanvasTab,
   CanvasToggle,
   CanvasWindowScope,
+  beginCanvasResize,
   canvasSessionKey,
   defineCanvasKind,
+  fitCanvasTabs,
   getCanvasKind,
   itemTitle,
   listCanvasKinds,
@@ -3503,6 +3727,7 @@ export {
   useCanvasKinds,
   useCanvasLauncherEntries,
   useCanvasLauncherEntry,
+  useCanvasMenuItems,
   useCanvasNativeBodies,
   useCanvasPresentation,
   useCanvasState,