@ai-matrx/canvas 0.5.2 → 0.6.0

package/dist/react.cjs

@@ -78,6 +78,7 @@ var import_react2 = require("react");
 var CANVAS_MAIN_WINDOW = "main";
 var CANVAS_LAUNCHER_KIND = "canvas.launcher";
 var CANVAS_HISTORY_LIMIT = 50;
+var CANVAS_KEEP_ALIVE_DEPTH = 5;
 var CANVAS_MIN_WIDTH = 360;
 var CANVAS_DEFAULT_WIDTH = 640;
 var CANVAS_MIN_SPLIT_FRACTION = 0.12;
@@ -436,8 +437,10 @@ function sendHome(state, itemId, home, activate) {
   next = insertInto(next, homeFrame.focusedPaneId, itemId, activate);
   return activate ? withFrame(next, target, { focusedPaneId: homeFrame.focusedPaneId }) : next;
 }
-function newItem(kind, key, title, data, now, history) {
+function newItem(kind, key, title, data, now, steps) {
   const id = canvasItemId(kind, key);
+  const history = steps?.history ?? [];
+  const kept = steps?.kept ?? [];
   return {
     id,
     kind,
@@ -446,12 +449,14 @@ function newItem(kind, key, title, data, now, history) {
     data,
     openedAt: now,
     updatedAt: now,
-    instance: `${now.toString(36)}:${id}`,
-    ...history && history.length > 0 ? { history: history.slice(-CANVAS_HISTORY_LIMIT) } : {}
+    // 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) } : {}
   };
 }
 function historyEntry(item) {
-  return { kind: item.kind, key: item.key, title: item.title, data: item.data };
+  return { kind: item.kind, key: item.key, title: item.title, data: item.data, ...item.instance ? { instance: item.instance } : {} };
 }
 function replaceInPlace(state, current, next) {
   const pane = paneOf(state, current.id);
@@ -480,17 +485,25 @@ function sanitizeHistory(raw) {
     if (!entry || typeof entry !== "object") continue;
     const e = entry;
     if (typeof e.kind !== "string" || typeof e.key !== "string") continue;
-    out.push({ kind: e.kind, key: e.key, title: typeof e.title === "string" ? e.title : null, data: e.data ?? null });
+    out.push({
+      kind: e.kind,
+      key: e.key,
+      title: typeof e.title === "string" ? e.title : null,
+      data: e.data ?? null,
+      ...typeof e.instance === "string" && e.instance ? { instance: e.instance } : {}
+    });
   }
   return out.slice(-CANVAS_HISTORY_LIMIT);
 }
 function sanitizeItem(item) {
   const history = sanitizeHistory(item.history);
-  const { history: _history, instance, ...rest } = item;
+  const kept = sanitizeHistory(item.kept).slice(-CANVAS_KEEP_ALIVE_DEPTH);
+  const { history: _history, kept: _kept, instance, ...rest } = item;
   return {
     ...rest,
     ...typeof instance === "string" && instance ? { instance } : {},
-    ...history.length > 0 ? { history } : {}
+    ...history.length > 0 ? { history } : {},
+    ...kept.length > 0 ? { kept } : {}
   };
 }
 function clampWidth(width) {
@@ -677,7 +690,22 @@ function canvasReducer(state = createInitialCanvasState(), action) {
         return current.kind === CANVAS_LAUNCHER_KIND ? canvasReducer(focused, canvasActions.closeItem(itemId)) : focused;
       }
       const history = [...current.history ?? [], historyEntry(current)];
-      return replaceInPlace(state, current, newItem(to.kind, to.key, to.title ?? null, to.data ?? null, now, history));
+      const keptAll = current.kept ?? [];
+      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);
+      return replaceInPlace(
+        state,
+        current,
+        newItem(
+          to.kind,
+          to.key,
+          to.title !== void 0 ? to.title : revived?.title ?? null,
+          to.data !== void 0 ? to.data : revived?.data ?? null,
+          now,
+          { history, kept, instance: revived?.instance }
+        )
+      );
     }
     case `${P}back`: {
       const { itemId, now } = action.payload;
@@ -690,7 +718,12 @@ function canvasReducer(state = createInitialCanvasState(), action) {
       if (state.items[targetId]) {
         return focusExisting(canvasReducer(state, canvasActions.closeItem(itemId)), targetId);
       }
-      return replaceInPlace(state, current, newItem(entry.kind, entry.key, entry.title, entry.data, now, history.slice(0, -1)));
+      const kept = [...(current.kept ?? []).filter((k) => canvasItemId(k.kind, k.key) !== itemId), 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 })
+      );
     }
     case `${P}closeItem`: {
       const { itemId } = action.payload;
@@ -1425,6 +1458,7 @@ var NO_HISTORY = Object.freeze([]);
 var selectCanvasCanGoBack = (s, itemId) => (s.items[itemId]?.history?.length ?? 0) > 0;
 
 // src/core/presentation.ts
+var CANVAS_PHONE_MAX_WIDTH = 767;
 var CANVAS_NARROW_WIDTH = 480;
 var SQUARE_BAND = 1.2;
 function canvasOrientation(width, height) {
@@ -1673,8 +1707,7 @@ function createLauncherEntryStore() {
     }
   };
 }
-var PHONE_MAX_WIDTH = 767;
-var isPhoneViewport = () => typeof window !== "undefined" && window.innerWidth <= PHONE_MAX_WIDTH;
+var isPhoneViewport = () => typeof window !== "undefined" && window.innerWidth <= CANVAS_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;
@@ -1977,6 +2010,8 @@ var LayoutGridIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Glyph,
   /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "7", height: "7", x: "14", y: "14", rx: "1" }),
   /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "7", height: "7", x: "3", y: "14", rx: "1" })
 ] });
+var ChevronLeftIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Glyph, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m15 18-6-6 6-6" }) });
+var ChevronRightIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Glyph, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m9 18 6-6-6-6" }) });
 
 // src/react/chrome.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -2312,6 +2347,21 @@ function useChoices() {
   }
   return { contextual, global };
 }
+var FOLLOW_UP_MS = 600;
+function swallowFollowUpClicks() {
+  if (typeof window === "undefined") return;
+  const types = ["pointerdown", "mousedown", "pointerup", "mouseup", "click", "dblclick"];
+  const swallow = (event) => {
+    if (event.detail >= 2 || event.type === "dblclick") {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+  for (const type of types) window.addEventListener(type, swallow, true);
+  setTimeout(() => {
+    for (const type of types) window.removeEventListener(type, swallow, true);
+  }, FOLLOW_UP_MS);
+}
 function LauncherGrid({ onChoose }) {
   const { contextual, global } = useChoices();
   if (contextual.length === 0 && global.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CanvasPanelEmpty, { children: "Nothing to open" });
@@ -2319,10 +2369,23 @@ function LauncherGrid({ onChoose }) {
     label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "mxc-launcher-heading", children: label }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mxc-launcher-grid", children: choices.map((choice) => {
       const Icon = choice.icon;
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("button", { type: "button", className: "mxc-launcher-item", onClick: () => onChoose(choice.input), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { className: "mxc-launcher-icon" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: choice.label })
-      ] }, choice.id);
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: "mxc-launcher-item",
+          onClick: (event) => {
+            if (event.detail >= 2) return;
+            swallowFollowUpClicks();
+            onChoose(choice.input);
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { className: "mxc-launcher-icon" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: choice.label })
+          ]
+        },
+        choice.id
+      );
     }) })
   ] });
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mxc-launcher", children: [
@@ -2435,6 +2498,10 @@ var CanvasSlotsContext = (0, import_react6.createContext)(null);
 function useCanvasSlots() {
   return (0, import_react6.useContext)(CanvasSlotsContext);
 }
+var CanvasSinglePaneContext = (0, import_react6.createContext)(false);
+function useCanvasSinglePane() {
+  return (0, import_react6.useContext)(CanvasSinglePaneContext);
+}
 function useSlotSize(slots, paneId) {
   return (0, import_react6.useSyncExternalStore)(
     slots.subscribe,
@@ -2466,19 +2533,36 @@ function usePanePresentation(slots, paneId, isFullscreen, paneCount) {
 var hostKey = (item) => item.instance ?? item.id;
 var SEP2 = "
";
 var ROW = "";
+function bornAt(instance, fallback) {
+  const stamp = instance ? Number.parseInt(instance.slice(0, instance.indexOf(":")), 36) : Number.NaN;
+  return Number.isFinite(stamp) ? stamp : fallback;
+}
+function keptCanvasSteps(item) {
+  const back = (item.history ?? []).slice(-CANVAS_KEEP_ALIVE_DEPTH);
+  const forward = (item.kept ?? []).slice(-CANVAS_KEEP_ALIVE_DEPTH);
+  return [...back, ...forward].filter((entry) => !!entry.instance);
+}
 function layerSignature(state, windowId, onlyPane) {
   const frame2 = canvasWindowFrame(state, windowId);
   if (!frame2) return "";
   const rows = [];
+  const seen = /* @__PURE__ */ new Set();
+  const add = (hostId, born, fields) => {
+    if (seen.has(hostId)) return;
+    seen.add(hostId);
+    rows.push({ born, hostId, row: [hostId, ...fields].join(SEP2) });
+  };
   const paneIds = listPaneIds(frame2.layout);
   for (const paneId of onlyPane ? [onlyPane] : paneIds) {
     const pane = state.panes[paneId];
     for (const itemId of pane?.itemIds ?? []) {
       const item = state.items[itemId];
-      if (item) rows.push({ item, row: [hostKey(item), itemId, paneId, pane?.activeItemId === itemId ? "1" : "0"].join(SEP2) });
+      if (!item) continue;
+      add(hostKey(item), bornAt(item.instance, item.openedAt), [itemId, paneId, pane?.activeItemId === itemId ? "1" : "0", "0"]);
+      for (const step of keptCanvasSteps(item)) add(step.instance, bornAt(step.instance, item.openedAt), [itemId, paneId, "0", "1"]);
     }
   }
-  rows.sort((a, b) => a.item.openedAt - b.item.openedAt || hostKey(a.item).localeCompare(hostKey(b.item)));
+  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);
   return [head, ...rows.map((r) => r.row)].join(ROW);
 }
@@ -2492,8 +2576,8 @@ function parseSignature(signature) {
     focusedPaneId,
     paneCount: Number(count) || 1,
     placed: rows.map((row) => {
-      const [hostId = "", itemId = "", paneId = "", active] = row.split(SEP2);
-      return { hostId, itemId, paneId, active: active === "1" };
+      const [hostId = "", itemId = "", paneId = "", active, kept] = row.split(SEP2);
+      return { hostId, itemId, paneId, active: active === "1", kept: kept === "1" };
     })
   };
 }
@@ -2540,6 +2624,7 @@ function CanvasBodyLayer() {
   const { windowId, layer } = useCanvasInternals();
   const slots = useCanvasSlots();
   const signature = useCanvasState((s) => layerSignature(s, windowId));
+  const single = useCanvasSinglePane();
   const root = (0, import_react7.useRef)(null);
   const [placement] = (0, import_react7.useState)(
     () => slots ? createPlacement(() => root.current, slots, () => layer.native.remeasure()) : null
@@ -2548,13 +2633,14 @@ function CanvasBodyLayer() {
   useIsoLayoutEffect(() => slots && placement ? slots.subscribe(placement.place) : void 0, [slots, placement]);
   const shape = parseSignature(signature);
   if (!slots || !placement || !shape) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: root, className: "mxc-bodies", "data-mxc-bodies": windowId, children: shape.placed.map(({ hostId, itemId, paneId, active }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: root, className: "mxc-bodies", "data-mxc-bodies": windowId, children: shape.placed.map(({ hostId, itemId, paneId, active, kept }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     BodyHost,
     {
       hostId,
       itemId,
+      kept,
       paneId,
-      visible: shape.isOpen && active,
+      visible: shape.isOpen && active && (!single || paneId === shape.focusedPaneId),
       focused: active && shape.focusedPaneId === paneId,
       isFullscreen: shape.isFullscreen,
       paneCount: shape.paneCount,
@@ -2568,11 +2654,12 @@ function CanvasPaneInlineBodies({ paneId, slots }) {
   const { windowId } = useCanvasInternals();
   const shape = parseSignature(useCanvasState((s) => layerSignature(s, windowId, paneId)));
   if (!shape) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: shape.placed.map(({ hostId, itemId, active }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: shape.placed.map(({ hostId, itemId, active, kept }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     BodyHost,
     {
       hostId,
       itemId,
+      kept,
       paneId,
       visible: active,
       focused: active && shape.focusedPaneId === paneId,
@@ -2584,9 +2671,22 @@ function CanvasPaneInlineBodies({ paneId, slots }) {
     hostId
   )) });
 }
+function stepAsItem(step, openedAt) {
+  return {
+    id: canvasItemId(step.kind, step.key),
+    kind: step.kind,
+    key: step.key,
+    title: step.title,
+    data: step.data,
+    openedAt,
+    updatedAt: openedAt,
+    ...step.instance ? { instance: step.instance } : {}
+  };
+}
 var BodyHost = (0, import_react7.memo)(function BodyHost2({
   hostId,
   itemId,
+  kept,
   paneId,
   visible,
   focused,
@@ -2597,7 +2697,14 @@ var BodyHost = (0, import_react7.memo)(function BodyHost2({
 }) {
   const canvas = useCanvas();
   const { windowId, ports } = useCanvasInternals();
-  const item = useCanvasState((s) => s.items[itemId]);
+  const live = useCanvasState((s) => kept ? void 0 : s.items[itemId]);
+  const step = useCanvasState((s) => {
+    const ownerItem = kept ? s.items[itemId] : void 0;
+    return ownerItem ? keptCanvasSteps(ownerItem).find((e) => e.instance === hostId) : void 0;
+  });
+  const owner = useCanvasState((s) => kept ? s.items[itemId]?.openedAt : void 0);
+  const keptItem = (0, import_react7.useMemo)(() => step ? stepAsItem(step, owner ?? 0) : void 0, [step, owner]);
+  const item = kept ? keptItem : live;
   const kind = useItemKind(item?.kind ?? "");
   const element = (0, import_react7.useRef)(null);
   const [everShown, setEverShown] = (0, import_react7.useState)(visible);
@@ -2621,6 +2728,7 @@ var BodyHost = (0, import_react7.memo)(function BodyHost2({
       "data-visible": visible ? "true" : "false",
       "data-kind": item.kind,
       "data-item": item.id,
+      "data-kept": kept ? "" : void 0,
       "data-pane": paneId,
       inert: !visible,
       "aria-hidden": visible ? void 0 : true,
@@ -2773,6 +2881,25 @@ function itemTitle(item, kind) {
   return kind?.label ?? item.kind;
 }
 var isMac = () => typeof navigator !== "undefined" && /mac|iphone|ipad/i.test(navigator.platform ?? "");
+function windowTabsSignature(state, windowId) {
+  const frame2 = canvasWindowFrame(state, windowId);
+  if (!frame2) return "";
+  const rows = [];
+  for (const paneId of listPaneIds(frame2.layout)) {
+    for (const itemId of state.panes[paneId]?.itemIds ?? []) rows.push(`${itemId}
${paneId}`);
+  }
+  return rows.join("");
+}
+function parseWindowTabs(signature) {
+  if (!signature) return [];
+  const perPane = /* @__PURE__ */ new Map();
+  return signature.split("").map((row) => {
+    const [itemId = "", paneId = ""] = row.split("
");
+    const index = perPane.get(paneId) ?? 0;
+    perPane.set(paneId, index + 1);
+    return { itemId, paneId, index };
+  });
+}
 function CanvasPaneView({ paneId }) {
   const canvas = useCanvas();
   const { windowId, tabStrip } = useCanvasInternals();
@@ -2791,6 +2918,8 @@ function CanvasPaneView({ paneId }) {
   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 kind = useItemKind(active?.kind ?? "");
+  const singlePane = useCanvasSinglePane();
+  const windowTabs = useCanvasState((s) => singlePane ? windowTabsSignature(s, windowId) : "");
   const sectionRef = (0, import_react8.useRef)(null);
   const bodyRef = (0, import_react8.useRef)(null);
   const presentation = usePanePresentation(slots, paneId, isFullscreen, paneCount);
@@ -2810,7 +2939,8 @@ function CanvasPaneView({ paneId }) {
   const Leading = kind?.HeaderLeading;
   const Action = kind?.HeaderAction;
   const Toolbar = kind?.Toolbar;
-  const single = tabStrip === "auto" && pane.itemIds.length === 1 && active;
+  const tabs = singlePane ? parseWindowTabs(windowTabs) : pane.itemIds.map((itemId, index) => ({ itemId, paneId, index }));
+  const single = tabStrip === "auto" && tabs.length === 1 && active;
   const closeLabel = role === "pop-out" && paneCount === 1 ? "Close window" : paneCount > 1 ? "Close pane" : "Close canvas";
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     CanvasPanel,
@@ -2823,11 +2953,14 @@ function CanvasPaneView({ paneId }) {
       "data-mxc-pane": paneId,
       header: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
         canGoBack && active ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CanvasHeaderButton, { className: "mxc-back", label: "Back", onClick: () => void canvas.back(active.id), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ArrowLeftIcon, {}) }) : null,
-        single && active ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SingleTitle, { item: active, kind }) : pane.itemIds.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TabStrip, { paneId, itemIds: pane.itemIds, activeItemId: pane.activeItemId }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mxc-panel-title", children: "New tab" }),
+        single && active ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SingleTitle, { item: active, kind }) : tabs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TabStrip, { tabs, activeItemId: pane.activeItemId }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mxc-panel-title", children: "New tab" }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CanvasHeaderButton, { className: "mxc-new-tab", label: "New tab", onClick: () => void canvas.newTab(paneId), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PlusIcon, {}) })
       ] }),
       leading: Leading && kindProps ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Leading, { ...kindProps }) : null,
-      actions: Action && kindProps ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Action, { ...kindProps }) : null,
+      actions: Action && kindProps ? (
+        // Its own gapless row: a kind's tap buttons space themselves (the tap-target placement rule).
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mxc-kind-actions", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Action, { ...kindProps }) })
+      ) : null,
       renderMenu: () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PaneMenu, { paneId, windowId, activeItem: active, kind, kindProps, tabCount: pane.itemIds.length, role }),
       expanded: isFullscreen,
       onToggleExpand: () => canvas.setFullscreen(!isFullscreen),
@@ -2869,38 +3002,71 @@ function SingleTitle({ item, kind }) {
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "mxc-tab-close", "data-slot": "browser-tab-close", "aria-label": `Close ${title}`, onClick: () => canvas.close(item.id), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CloseIcon, {}) })
   ] });
 }
-function TabStrip({ paneId, itemIds, activeItemId }) {
+function TabStrip({ tabs, activeItemId }) {
   const strip = (0, import_react8.useRef)(null);
+  const [overflow, setOverflow] = (0, import_react8.useState)({ start: false, end: false });
+  const measure = (0, import_react8.useRef)(() => 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("|");
   useIsoLayoutEffect2(() => {
     const el = strip.current;
     if (!el) return void 0;
     const reveal = () => {
       const tab = el.querySelector('[role="tab"][aria-selected="true"]');
-      if (!tab) return;
-      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;
+      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);
     observer?.observe(el);
-    const activeTab = el.querySelector('[role="tab"][aria-selected="true"]');
-    if (activeTab) observer?.observe(activeTab);
+    for (const tab of el.querySelectorAll('[role="tab"]')) observer?.observe(tab);
     return () => observer?.disconnect();
-  }, [activeItemId, itemIds.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  }, [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;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
-      ref: strip,
-      className: "mxc-tabs",
-      role: "tablist",
-      "aria-label": "Canvas tabs",
-      onWheel: (event) => {
-        const el = strip.current;
-        if (el && Math.abs(event.deltaY) > Math.abs(event.deltaX)) el.scrollLeft += event.deltaY;
-      },
-      children: itemIds.map((itemId, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ItemTab, { itemId, paneId, index, active: itemId === activeItemId }, itemId))
+      className: "mxc-tabstrip",
+      "data-overflow": overflowing ? "" : void 0,
+      "data-overflow-start": overflow.start ? "" : void 0,
+      "data-overflow-end": overflow.end ? "" : void 0,
+      children: [
+        overflowing ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CanvasHeaderButton, { className: "mxc-tabs-scroll", label: "Scroll tabs left", available: overflow.start, onClick: () => page(-1), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronLeftIcon, {}) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "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;
+            },
+            children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ItemTab, { itemId: tab.itemId, paneId: tab.paneId, index: tab.index, active: tab.itemId === activeItemId }, tab.itemId))
+          }
+        ),
+        overflowing ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CanvasHeaderButton, { className: "mxc-tabs-scroll", label: "Scroll tabs right", available: overflow.end, onClick: () => page(1), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronRightIcon, {}) }) : null
+      ]
     }
   );
 }
@@ -3053,7 +3219,10 @@ 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 region = useRegionWidth();
+  const viewport = useViewportWidth();
+  const singlePane = placement === "docked" && viewport > 0 && viewport <= CANVAS_PHONE_MAX_WIDTH;
   const [dragWidth, setDragWidth] = (0, import_react9.useState)(null);
   const [slots] = (0, import_react9.useState)(createCanvasSlots);
   const ref = (0, import_react9.useRef)(null);
@@ -3118,10 +3287,10 @@ function CanvasColumn({ className, style, onLiveWidth, placement = "docked" }) {
             }
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CanvasSlotsContext.Provider, { value: slots, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mxc-layout", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LayoutNodeView, { node: layout }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CanvasSlotsContext.Provider, { value: slots, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CanvasSinglePaneContext.Provider, { value: singlePane, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mxc-layout", "data-single-pane": singlePane ? "" : void 0, children: singlePane ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CanvasPaneView, { paneId: presentedPane(layout, focusedPaneId) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LayoutNodeView, { node: layout }) }),
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CanvasBodyLayer, {})
-        ] })
+        ] }) })
       ] })
     }
   );
@@ -3169,6 +3338,10 @@ 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__ */ (0, import_jsx_runtime8.jsx)(CanvasPaneView, { paneId: node.paneId });
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SplitView, { node });
@@ -3271,6 +3444,7 @@ function CanvasToggle({
         ariaLabel: isOpen ? "Hide canvas" : "Show canvas",
         tooltip: `${isOpen ? "Hide canvas" : "Show canvas"}${hint ? ` (${hint})` : ""}`,
         icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PanelRightIcon, {}),
+        pressed: isOpen,
         onClick: () => controller.toggle()
       }
     ),