@ai-matrx/canvas 0.7.3 → 0.8.0

package/dist/react.d.cts

@@ -381,26 +381,45 @@ declare function CanvasFrame({ children, className }: {
 declare function useCanvasPresentation(): CanvasPresentation | null;
 
 declare function itemTitle(item: CanvasItem, kind: AnyCanvasKind | undefined): string;
+/** One tab of a strip and the pane it lives in (a window-wide strip shows every pane's tabs). */
+interface CanvasStripTab {
+    readonly itemId: CanvasItemId;
+    readonly paneId: CanvasPaneId;
+    /** Its index inside its own pane (where a tab dropped on it lands). */
+    readonly index: number;
+}
 declare function CanvasPaneView({ paneId }: {
     paneId: CanvasPaneId;
 }): react.JSX.Element | null;
-/** A background tab's floor (px): icon + ~7 letters + "…" ("Messag…"). Mirrored to CSS as --mxc-tab-min. */
-declare const CANVAS_TAB_MIN_WIDTH = 88;
-/** The active tab's floor (px): icon + ~8 letters + "…" + its close. Mirrored to CSS as --mxc-tab-active-min. */
-declare const CANVAS_ACTIVE_TAB_MIN_WIDTH = 112;
 /**
- * Which tabs the strip shows at this width: all of them when every tab fits
- * at its floor, else as many as fit — always the active one — and the rest
- * are reached through the "All tabs" menu (Chrome / VS Code). Pure, so the
- * rule is testable without a layout engine. `width <= 0` (not measured yet)
- * shows everything.
+ * Every tab's floor (px): icon + ~10 letters + "…" — still readable. Tabs shrink
+ * evenly from 12rem down to this; past it the strip scrolls. Mirrored to CSS as
+ * --mxc-tab-min.
  */
-declare function fitCanvasTabs(count: number, activeIndex: number, width: number): {
-    start: number;
-    end: number;
-    overflow: boolean;
-    compact: boolean;
+declare const CANVAS_TAB_MIN_WIDTH = 120;
+/** True when `count` tabs at their floor do not fit `width` px: the strip scrolls and offers "All tabs". */
+declare function canvasTabsOverflow(count: number, width: number): boolean;
+/** One entry of a strip: a tab, or a split's visible tabs drawn as ONE joined tab (Chrome split view). */
+type CanvasStripEntry = {
+    readonly type: "tab";
+    readonly tab: CanvasStripTab;
+} | {
+    readonly type: "split";
+    readonly tabs: readonly CanvasStripTab[];
 };
+/**
+ * The strip's entries. With `actives` (each pane's active item) for two or more
+ * panes, those tabs become one joined entry, placed where the first of them
+ * stands; every other tab keeps its place. Pure, so the rule is testable.
+ */
+declare function planCanvasTabStrip(tabs: readonly CanvasStripTab[], actives?: ReadonlyMap<CanvasPaneId, CanvasItemId> | null): CanvasStripEntry[];
+/**
+ * THE window-wide tab strip of a split canvas (Chrome split view): every
+ * pane's tabs in one row above the panes, the panes' visible tabs drawn as
+ * one joined tab, "+" opening in the focused pane. A split never halves the
+ * strip into one per pane.
+ */
+declare function CanvasWindowTabs(): react.JSX.Element;
 
 /**
  * One resize gesture (the canvas edge, a split handle). While it runs:
@@ -512,4 +531,4 @@ interface BrowserBarProps {
 /** A browser's back · forward · reload · address bar, for a kind's leading slot or its body. */
 declare function BrowserBar({ url, canGoBack, canGoForward, onBack, onForward, onReload, onNavigate, trailing, className }: BrowserBarProps): react.JSX.Element;
 
-export { type AnyCanvasKind, BrowserBar, type BrowserBarProps, type BrowserTab, BrowserTabs, type BrowserTabsProps, CANVAS_ACTIVE_TAB_MIN_WIDTH, CANVAS_TAB_MIN_WIDTH, CanvasColumn, type CanvasColumnProps, type CanvasFloating, CanvasFrame, CanvasHeaderButton, type CanvasHeaderButtonProps, type CanvasHostPorts, type CanvasKind, type CanvasKindIcon, CanvasKindIcons, type CanvasKindProps, type CanvasLauncherEntry, type CanvasMenuEntry, type CanvasMenuItem, CanvasMenuTrigger, type CanvasNativeBodyFrame, type CanvasNativeBodyInfo, type CanvasNativeRect, type CanvasOverlayPort, CanvasPaneView, CanvasPanel, CanvasPanelEmpty, type CanvasPanelProps, CanvasProvider, type CanvasProviderProps, type CanvasShowMenu, CanvasTab, type CanvasTabProps, type CanvasTabStripMode, CanvasToggle, CanvasWindowScope, beginCanvasResize, canvasSessionKey, defineCanvasKind, fitCanvasTabs, getCanvasKind, itemTitle, listCanvasKinds, registerCanvasKind, registerCanvasKinds, useCanvas, useCanvasColumnWidth, useCanvasHostPorts, useCanvasIsPresented, useCanvasKind, useCanvasKindToggle, useCanvasKinds, useCanvasLauncherEntries, useCanvasLauncherEntry, useCanvasMenuItems, useCanvasNativeBodies, useCanvasPresentation, useCanvasState, useCanvasWindowId, useOptionalCanvas, useOptionalCanvasState };
+export { type AnyCanvasKind, BrowserBar, type BrowserBarProps, type BrowserTab, BrowserTabs, type BrowserTabsProps, CANVAS_TAB_MIN_WIDTH, CanvasColumn, type CanvasColumnProps, type CanvasFloating, CanvasFrame, CanvasHeaderButton, type CanvasHeaderButtonProps, type CanvasHostPorts, type CanvasKind, type CanvasKindIcon, CanvasKindIcons, type CanvasKindProps, type CanvasLauncherEntry, type CanvasMenuEntry, type CanvasMenuItem, CanvasMenuTrigger, type CanvasNativeBodyFrame, type CanvasNativeBodyInfo, type CanvasNativeRect, type CanvasOverlayPort, CanvasPaneView, CanvasPanel, CanvasPanelEmpty, type CanvasPanelProps, CanvasProvider, type CanvasProviderProps, type CanvasShowMenu, type CanvasStripEntry, type CanvasStripTab, CanvasTab, type CanvasTabProps, type CanvasTabStripMode, CanvasToggle, CanvasWindowScope, CanvasWindowTabs, beginCanvasResize, canvasSessionKey, canvasTabsOverflow, defineCanvasKind, getCanvasKind, itemTitle, listCanvasKinds, planCanvasTabStrip, registerCanvasKind, registerCanvasKinds, useCanvas, useCanvasColumnWidth, useCanvasHostPorts, useCanvasIsPresented, useCanvasKind, useCanvasKindToggle, useCanvasKinds, useCanvasLauncherEntries, useCanvasLauncherEntry, useCanvasMenuItems, useCanvasNativeBodies, useCanvasPresentation, useCanvasState, useCanvasWindowId, useOptionalCanvas, useOptionalCanvasState };

package/dist/react.d.ts

@@ -381,26 +381,45 @@ declare function CanvasFrame({ children, className }: {
 declare function useCanvasPresentation(): CanvasPresentation | null;
 
 declare function itemTitle(item: CanvasItem, kind: AnyCanvasKind | undefined): string;
+/** One tab of a strip and the pane it lives in (a window-wide strip shows every pane's tabs). */
+interface CanvasStripTab {
+    readonly itemId: CanvasItemId;
+    readonly paneId: CanvasPaneId;
+    /** Its index inside its own pane (where a tab dropped on it lands). */
+    readonly index: number;
+}
 declare function CanvasPaneView({ paneId }: {
     paneId: CanvasPaneId;
 }): react.JSX.Element | null;
-/** A background tab's floor (px): icon + ~7 letters + "…" ("Messag…"). Mirrored to CSS as --mxc-tab-min. */
-declare const CANVAS_TAB_MIN_WIDTH = 88;
-/** The active tab's floor (px): icon + ~8 letters + "…" + its close. Mirrored to CSS as --mxc-tab-active-min. */
-declare const CANVAS_ACTIVE_TAB_MIN_WIDTH = 112;
 /**
- * Which tabs the strip shows at this width: all of them when every tab fits
- * at its floor, else as many as fit — always the active one — and the rest
- * are reached through the "All tabs" menu (Chrome / VS Code). Pure, so the
- * rule is testable without a layout engine. `width <= 0` (not measured yet)
- * shows everything.
+ * Every tab's floor (px): icon + ~10 letters + "…" — still readable. Tabs shrink
+ * evenly from 12rem down to this; past it the strip scrolls. Mirrored to CSS as
+ * --mxc-tab-min.
  */
-declare function fitCanvasTabs(count: number, activeIndex: number, width: number): {
-    start: number;
-    end: number;
-    overflow: boolean;
-    compact: boolean;
+declare const CANVAS_TAB_MIN_WIDTH = 120;
+/** True when `count` tabs at their floor do not fit `width` px: the strip scrolls and offers "All tabs". */
+declare function canvasTabsOverflow(count: number, width: number): boolean;
+/** One entry of a strip: a tab, or a split's visible tabs drawn as ONE joined tab (Chrome split view). */
+type CanvasStripEntry = {
+    readonly type: "tab";
+    readonly tab: CanvasStripTab;
+} | {
+    readonly type: "split";
+    readonly tabs: readonly CanvasStripTab[];
 };
+/**
+ * The strip's entries. With `actives` (each pane's active item) for two or more
+ * panes, those tabs become one joined entry, placed where the first of them
+ * stands; every other tab keeps its place. Pure, so the rule is testable.
+ */
+declare function planCanvasTabStrip(tabs: readonly CanvasStripTab[], actives?: ReadonlyMap<CanvasPaneId, CanvasItemId> | null): CanvasStripEntry[];
+/**
+ * THE window-wide tab strip of a split canvas (Chrome split view): every
+ * pane's tabs in one row above the panes, the panes' visible tabs drawn as
+ * one joined tab, "+" opening in the focused pane. A split never halves the
+ * strip into one per pane.
+ */
+declare function CanvasWindowTabs(): react.JSX.Element;
 
 /**
  * One resize gesture (the canvas edge, a split handle). While it runs:
@@ -512,4 +531,4 @@ interface BrowserBarProps {
 /** A browser's back · forward · reload · address bar, for a kind's leading slot or its body. */
 declare function BrowserBar({ url, canGoBack, canGoForward, onBack, onForward, onReload, onNavigate, trailing, className }: BrowserBarProps): react.JSX.Element;
 
-export { type AnyCanvasKind, BrowserBar, type BrowserBarProps, type BrowserTab, BrowserTabs, type BrowserTabsProps, CANVAS_ACTIVE_TAB_MIN_WIDTH, CANVAS_TAB_MIN_WIDTH, CanvasColumn, type CanvasColumnProps, type CanvasFloating, CanvasFrame, CanvasHeaderButton, type CanvasHeaderButtonProps, type CanvasHostPorts, type CanvasKind, type CanvasKindIcon, CanvasKindIcons, type CanvasKindProps, type CanvasLauncherEntry, type CanvasMenuEntry, type CanvasMenuItem, CanvasMenuTrigger, type CanvasNativeBodyFrame, type CanvasNativeBodyInfo, type CanvasNativeRect, type CanvasOverlayPort, CanvasPaneView, CanvasPanel, CanvasPanelEmpty, type CanvasPanelProps, CanvasProvider, type CanvasProviderProps, type CanvasShowMenu, CanvasTab, type CanvasTabProps, type CanvasTabStripMode, CanvasToggle, CanvasWindowScope, beginCanvasResize, canvasSessionKey, defineCanvasKind, fitCanvasTabs, getCanvasKind, itemTitle, listCanvasKinds, registerCanvasKind, registerCanvasKinds, useCanvas, useCanvasColumnWidth, useCanvasHostPorts, useCanvasIsPresented, useCanvasKind, useCanvasKindToggle, useCanvasKinds, useCanvasLauncherEntries, useCanvasLauncherEntry, useCanvasMenuItems, useCanvasNativeBodies, useCanvasPresentation, useCanvasState, useCanvasWindowId, useOptionalCanvas, useOptionalCanvasState };
+export { type AnyCanvasKind, BrowserBar, type BrowserBarProps, type BrowserTab, BrowserTabs, type BrowserTabsProps, CANVAS_TAB_MIN_WIDTH, CanvasColumn, type CanvasColumnProps, type CanvasFloating, CanvasFrame, CanvasHeaderButton, type CanvasHeaderButtonProps, type CanvasHostPorts, type CanvasKind, type CanvasKindIcon, CanvasKindIcons, type CanvasKindProps, type CanvasLauncherEntry, type CanvasMenuEntry, type CanvasMenuItem, CanvasMenuTrigger, type CanvasNativeBodyFrame, type CanvasNativeBodyInfo, type CanvasNativeRect, type CanvasOverlayPort, CanvasPaneView, CanvasPanel, CanvasPanelEmpty, type CanvasPanelProps, CanvasProvider, type CanvasProviderProps, type CanvasShowMenu, type CanvasStripEntry, type CanvasStripTab, CanvasTab, type CanvasTabProps, type CanvasTabStripMode, CanvasToggle, CanvasWindowScope, CanvasWindowTabs, beginCanvasResize, canvasSessionKey, canvasTabsOverflow, defineCanvasKind, getCanvasKind, itemTitle, listCanvasKinds, planCanvasTabStrip, registerCanvasKind, registerCanvasKinds, useCanvas, useCanvasColumnWidth, useCanvasHostPorts, useCanvasIsPresented, useCanvasKind, useCanvasKindToggle, useCanvasKinds, useCanvasLauncherEntries, useCanvasLauncherEntry, useCanvasMenuItems, useCanvasNativeBodies, useCanvasPresentation, useCanvasState, useCanvasWindowId, useOptionalCanvas, useOptionalCanvasState };

package/dist/react.js

@@ -2591,6 +2591,10 @@ var CanvasSinglePaneContext = createContext3(false);
 function useCanvasSinglePane() {
   return useContext3(CanvasSinglePaneContext);
 }
+var CanvasWindowTabsContext = createContext3(false);
+function useCanvasWindowTabs() {
+  return useContext3(CanvasWindowTabsContext);
+}
 function useSlotSize(slots, paneId) {
   return useSyncExternalStore3(
     slots.subscribe,
@@ -3003,6 +3007,20 @@ function windowTabsSignature(state, windowId) {
   }
   return rows.join("");
 }
+function paneActivesSignature(state, windowId) {
+  const frame2 = canvasWindowFrame(state, windowId);
+  if (!frame2) return "";
+  return listPaneIds(frame2.layout).map((paneId) => `${paneId}
${state.panes[paneId]?.activeItemId ?? ""}`).join("");
+}
+function parsePaneActives(signature) {
+  const actives = /* @__PURE__ */ new Map();
+  if (!signature) return actives;
+  for (const row of signature.split("")) {
+    const [paneId = "", itemId = ""] = row.split("
");
+    if (itemId) actives.set(paneId, itemId);
+  }
+  return actives;
+}
 function parseWindowTabs(signature) {
   if (!signature) return [];
   const perPane = /* @__PURE__ */ new Map();
@@ -3033,6 +3051,7 @@ function CanvasPaneView({ paneId }) {
   const canGoForward = useCanvasState((s) => active ? selectCanvasCanGoForward(s, active.id) : false);
   const kind = useItemKind(active?.kind ?? "");
   const singlePane = useCanvasSinglePane();
+  const inWindowStrip = useCanvasWindowTabs() && !singlePane;
   const windowTabs = useCanvasState((s) => singlePane ? windowTabsSignature(s, windowId) : "");
   const sectionRef = useRef7(null);
   const bodyRef = useRef7(null);
@@ -3077,8 +3096,8 @@ function CanvasPaneView({ paneId }) {
             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, {}) })
+        inWindowStrip ? active ? /* @__PURE__ */ jsx7(PaneTitle, { item: active, kind }) : /* @__PURE__ */ jsx7("span", { className: "mxc-panel-title", children: "New tab" }) : 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" }),
+        inWindowStrip ? null : /* @__PURE__ */ jsx7(CanvasHeaderButton, { className: "mxc-new-tab", label: "New tab", onClick: () => void canvas.newTab(paneId), children: /* @__PURE__ */ jsx7(PlusIcon, {}) })
       ] }),
       leading: Leading && kindProps ? /* @__PURE__ */ jsx7(Leading, { ...kindProps }) : null,
       actions: Action && kindProps ? (
@@ -3139,24 +3158,56 @@ function SingleTitle({ item, kind }) {
     /* @__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 = 88;
-var CANVAS_ACTIVE_TAB_MIN_WIDTH = 112;
-var TAB_LIST_BUTTON_ROOM = 36;
+function PaneTitle({ item, kind }) {
+  const title = itemTitle(item, kind);
+  const drag = useTabDrag(item.id, title);
+  const Icon = kind?.icon ?? AlertIcon;
+  return /* @__PURE__ */ jsxs6("span", { className: "mxc-panel-title mxc-pane-title", "data-draggable": "", title, ...drag, children: [
+    /* @__PURE__ */ jsx7(Icon, { className: "mxc-title-icon" }),
+    /* @__PURE__ */ jsx7("span", { className: "mxc-tab-title", children: title })
+  ] });
+}
+var CANVAS_TAB_MIN_WIDTH = 120;
 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 }) {
+function canvasTabsOverflow(count, width) {
+  if (count <= 1 || width <= 0) return false;
+  return count * CANVAS_TAB_MIN_WIDTH + (count - 1) * TAB_GAP > width;
+}
+function planCanvasTabStrip(tabs, actives) {
+  const joined = actives ? tabs.filter((tab) => actives.get(tab.paneId) === tab.itemId) : [];
+  if (joined.length < 2) return tabs.map((tab) => ({ type: "tab", tab }));
+  const entries = [];
+  let placed = false;
+  for (const tab of tabs) {
+    if (!joined.includes(tab)) entries.push({ type: "tab", tab });
+    else if (!placed) {
+      entries.push({ type: "split", tabs: joined });
+      placed = true;
+    }
+  }
+  return entries;
+}
+function CanvasWindowTabs() {
   const canvas = useCanvas();
+  const { windowId } = useCanvasInternals();
+  const signature = useCanvasState((s) => windowTabsSignature(s, windowId));
+  const activesSignature = useCanvasState((s) => paneActivesSignature(s, windowId));
+  const focusedPaneId = useCanvasState((s) => selectCanvasFocusedPaneId(s, windowId));
+  const focusedActive = useCanvasState((s) => focusedPaneId ? s.panes[focusedPaneId]?.activeItemId ?? null : null);
+  const tabs = parseWindowTabs(signature);
+  const actives = parsePaneActives(activesSignature);
+  return /* @__PURE__ */ jsxs6("div", { className: "mxc-window-tabs", "data-slot": "canvas-window-tabs", children: [
+    /* @__PURE__ */ jsx7(TabStrip, { tabs, activeItemId: focusedActive, actives }),
+    /* @__PURE__ */ jsx7(CanvasHeaderButton, { className: "mxc-new-tab", label: "New tab", onClick: () => void canvas.newTab(focusedPaneId ?? void 0), children: /* @__PURE__ */ jsx7(PlusIcon, {}) })
+  ] });
+}
+function TabStrip({
+  tabs,
+  activeItemId,
+  actives
+}) {
   const strip = useRef7(null);
+  const list = useRef7(null);
   const [width, setWidth] = useState5(0);
   const read = useRef7(() => {
   });
@@ -3182,48 +3233,75 @@ function TabStrip({ tabs, activeItemId }) {
   useIsoLayoutEffect4(() => {
     read.current();
   }, [tabs.length]);
-  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;
+  useEffect7(() => {
+    const el = list.current;
+    if (!el) return void 0;
+    const onWheel = (event) => {
+      if (Math.abs(event.deltaY) <= Math.abs(event.deltaX) || el.scrollWidth <= el.clientWidth) return;
+      event.preventDefault();
+      el.scrollLeft += event.deltaY;
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, []);
+  useIsoLayoutEffect4(() => {
+    const el = list.current;
+    if (!el || !activeItemId) return;
+    const tab = [...el.querySelectorAll("[data-mxc-tab]")].find((node) => node.dataset.mxcTab === activeItemId);
+    if (!tab) return;
+    const box = el.getBoundingClientRect();
+    const rect = tab.getBoundingClientRect();
+    if (rect.left < box.left) el.scrollLeft -= box.left - rect.left;
+    else if (rect.right > box.right) el.scrollLeft += rect.right - box.right;
+  }, [activeItemId, width, tabs.length]);
+  const entries = planCanvasTabStrip(tabs, actives);
+  const overflow = canvasTabsOverflow(tabs.length, width);
+  const joined = entries.some((entry) => entry.type === "split");
+  const isActive = (tab) => actives ? actives.get(tab.paneId) === tab.itemId : tab.itemId === activeItemId;
+  const tabView = (tab) => /* @__PURE__ */ jsx7(
+    ItemTab,
+    {
+      itemId: tab.itemId,
+      paneId: tab.paneId,
+      index: tab.index,
+      active: isActive(tab),
+      current: joined && tab.itemId === activeItemId
+    },
+    tab.itemId
+  );
   return /* @__PURE__ */ jsxs6(
     "div",
     {
       ref: strip,
       className: "mxc-tabstrip",
-      "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` },
+      "data-overflow": overflow ? "" : void 0,
+      style: { ["--mxc-tab-min"]: `${CANVAS_TAB_MIN_WIDTH}px` },
       children: [
-        /* @__PURE__ */ jsx7(
-          "div",
-          {
-            className: "mxc-tabs",
-            role: "tablist",
-            "aria-label": "Canvas tabs",
-            onWheel: (event) => {
-              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);
+        /* @__PURE__ */ jsx7("div", { ref: list, className: "mxc-tabs", role: "tablist", "aria-label": "Canvas tabs", "aria-multiselectable": joined ? true : void 0, children: entries.map(
+          (entry) => entry.type === "tab" ? tabView(entry.tab) : /* @__PURE__ */ jsx7(
+            "div",
+            {
+              className: "mxc-tab-group",
+              "data-split": "",
+              role: "presentation",
+              style: { ["--mxc-group-n"]: entry.tabs.length },
+              children: entry.tabs.map(tabView)
             },
-            children: shown.map((tab) => /* @__PURE__ */ jsx7(ItemTab, { itemId: tab.itemId, paneId: tab.paneId, index: tab.index, active: tab.itemId === activeItemId }, tab.itemId))
-          }
-        ),
-        fit.overflow ? /* @__PURE__ */ jsx7(TabListMenu, { tabs, activeItemId, hidden }) : null
+            `split:${entry.tabs.map((tab) => tab.itemId).join("|")}`
+          )
+        ) }),
+        overflow ? /* @__PURE__ */ jsx7(TabListMenu, { tabs, activeItemId }) : null
       ]
     }
   );
 }
-function TabListMenu({ tabs, activeItemId, hidden }) {
+function TabListMenu({ tabs, activeItemId }) {
   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 trigger = (props) => /* @__PURE__ */ jsx7(CanvasHeaderButton, { className: "mxc-tab-list", label, ...props, children: /* @__PURE__ */ jsx7(ChevronDownIcon, {}) });
   const showMenu = ports.showMenu;
   if (showMenu) {
     return trigger({
@@ -3279,7 +3357,13 @@ function TabListEntry({ itemId, active }) {
     }
   );
 }
-function ItemTab({ itemId, paneId, index, active }) {
+function ItemTab({
+  itemId,
+  paneId,
+  index,
+  active,
+  current = false
+}) {
   const canvas = useCanvas();
   const item = useCanvasState((s) => s.items[itemId]);
   const kind = useItemKind(item?.kind ?? "");
@@ -3293,6 +3377,8 @@ function ItemTab({ itemId, paneId, index, active }) {
       title,
       icon: /* @__PURE__ */ jsx7(Icon, {}),
       active,
+      "data-mxc-tab": itemId,
+      "data-current": current ? "" : void 0,
       onSelect: () => canvas.activate(itemId),
       onClose: () => canvas.close(itemId),
       ...drag,
@@ -3478,6 +3564,7 @@ function CanvasColumn({ className, style, onLiveWidth, placement = "docked" }) {
     };
   }, [layer]);
   if (!layout) return null;
+  const windowTabs = !singlePane && layout.type === "split";
   const fitted = fitCanvasWidth(width, region, controller.rules);
   const shown = dragWidth ?? fitted;
   return /* @__PURE__ */ jsx8(
@@ -3505,10 +3592,13 @@ 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: presentedPaneId ?? listPaneIds(layout)[0] }) : /* @__PURE__ */ jsx8(LayoutNodeView, { node: layout }) }),
+        /* @__PURE__ */ jsx8(CanvasSlotsContext.Provider, { value: slots, children: /* @__PURE__ */ jsx8(CanvasSinglePaneContext.Provider, { value: singlePane, children: /* @__PURE__ */ jsxs7(CanvasWindowTabsContext.Provider, { value: windowTabs, children: [
+          /* @__PURE__ */ jsxs7("div", { className: "mxc-layout", "data-single-pane": singlePane ? "" : void 0, "data-window-tabs": windowTabs ? "" : void 0, children: [
+            windowTabs ? /* @__PURE__ */ jsx8(CanvasWindowTabs, {}) : null,
+            /* @__PURE__ */ jsx8("div", { className: "mxc-layout-panes", children: singlePane ? /* @__PURE__ */ jsx8(CanvasPaneView, { paneId: presentedPaneId ?? listPaneIds(layout)[0] }) : /* @__PURE__ */ jsx8(LayoutNodeView, { node: layout }) })
+          ] }),
           /* @__PURE__ */ jsx8(CanvasBodyLayer, {})
-        ] }) })
+        ] }) }) })
       ] })
     }
   );
@@ -3714,7 +3804,6 @@ function CanvasFrame({ children, className }) {
 export {
   BrowserBar,
   BrowserTabs,
-  CANVAS_ACTIVE_TAB_MIN_WIDTH,
   CANVAS_TAB_MIN_WIDTH,
   CanvasColumn,
   CanvasFrame,
@@ -3728,13 +3817,15 @@ export {
   CanvasTab,
   CanvasToggle,
   CanvasWindowScope,
+  CanvasWindowTabs,
   beginCanvasResize,
   canvasSessionKey,
+  canvasTabsOverflow,
   defineCanvasKind,
-  fitCanvasTabs,
   getCanvasKind,
   itemTitle,
   listCanvasKinds,
+  planCanvasTabStrip,
   registerCanvasKind,
   registerCanvasKinds,
   useCanvas,