@ai-matrx/canvas 0.7.3 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.8.0
+
+Owner feedback (Arman, 2026-10-03), a split canvas: tabs read "The Shap" | "Agent con" | an icon sliver | "+" — "when there is a split, the tabs should not get split like this."
+
+- **A split keeps ONE window-wide tab strip** (Chrome split view). `CanvasColumn` draws `CanvasWindowTabs` above the panes whenever the layout is a split (side by side, stacked or down): every pane's tabs in one row, the panes' visible tabs drawn as ONE joined tab (the focused pane's half strongest), one "+" that opens in the focused pane. Pane headers keep Back/Forward, a draggable title, kind controls, menu, expand and close — no strip of their own. Phones are unchanged (one presented pane whose strip carries every tab).
+- **Tabs shrink evenly to a readable floor, then scroll.** Every tab: `flex: 0 1 12rem`, floor `CANVAS_TAB_MIN_WIDTH` 120px (icon + ~10 letters + "…"); a cut name always ends in an ellipsis (never clipped). Past the floor the tab list scrolls sideways — wheel and trackpad, the current tab kept in view, no drawn scrollbar — and "All tabs (N)" stays.
+- **Removed:** the icon-sliver compact mode (`data-compact`), the windowed `fitCanvasTabs`, `CANVAS_ACTIVE_TAB_MIN_WIDTH`, and the hidden-count badge on "All tabs". **Added:** `CanvasWindowTabs`, `canvasTabsOverflow`, `planCanvasTabStrip`, types `CanvasStripTab` / `CanvasStripEntry`.
+
+### Consumer action
+
+- None for hosts that render `<CanvasColumn/>`. A host that imported `fitCanvasTabs` or `CANVAS_ACTIVE_TAB_MIN_WIDTH` (none known) uses `canvasTabsOverflow` / `CANVAS_TAB_MIN_WIDTH`.
+
 ## 0.7.3
 
 Census on 0.7.2 (40 web routes, 1440px window, chat open, canvas 360/640/900): with a 900px canvas the page beside it was 56px and route headers were 29-67px wide.

package/README.md

@@ -67,9 +67,9 @@ Navigating to something already open elsewhere focuses it there (a launcher tab
 
 **Forward.** After Back the header also shows Forward (`selectCanvasCanGoForward`); it returns the same live body Back left. A navigate somewhere new ends the forward trail. Shortcut data `canvas.back` / `canvas.forward` (⌘[ / ⌘]) is for a desktop host; browsers own those keys.
 
-**The strip.** A tab is as wide as its name (up to 12rem). Short of room, tabs shrink — the active tab least — to icon + ~6 letters + "…" (`CANVAS_TAB_MIN_WIDTH`; the active tab keeps `CANVAS_ACTIVE_TAB_MIN_WIDTH`); a name really cut ends in an ellipsis and every tab's tooltip is its full name. Tabs that do not fit at their floor are reached from "All tabs (N)"; the active tab is always shown. At the narrowest the strip is the active tab's title and that menu. Nothing scrolls and nothing in the header overlaps another control (`fitCanvasTabs` is the rule).
+**The strip** (Chrome's model). Tabs share the strip evenly — 12rem each with room — and shrink together to one readable floor, icon + ~10 letters + "…" (`CANVAS_TAB_MIN_WIDTH`, 120px); a cut name always ends in an ellipsis and every tab's tooltip is its full name. Past the floor the tab list scrolls sideways (wheel, trackpad; the current tab is kept in view) and "All tabs (N)" lists every tab (`canvasTabsOverflow` is the rule). A tab never shrinks to an icon sliver and nothing in the header overlaps another control.
 
-**Splits.** A side-by-side split whose panes would be narrower than `paneMinWidth` (web: `CANVAS_PANE_MIN_WIDTH`, 280px) renders stacked; the tree is unchanged.
+**Splits.** A split canvas keeps ONE window-wide tab strip above its panes (`CanvasWindowTabs`), never one per pane: every pane's tabs are in it, the panes' visible tabs are drawn as ONE joined tab (the focused pane's half strongest; `planCanvasTabStrip`), and its "+" opens in the focused pane. Each pane header keeps its own Back/Forward, title, kind controls and menu. A side-by-side split whose panes would be narrower than `paneMinWidth` (web: `CANVAS_PANE_MIN_WIDTH`, 280px) renders stacked under the same one strip; the tree is unchanged.
 
 **Phones** (`CANVAS_PHONE_MAX_WIDTH`, 767px): the column presents ONE pane — the focused one when it holds a tab, else the first that does (`selectCanvasPresentedPaneId`) — whose strip carries every pane's tabs; choosing a tab from another pane presents that pane. The pane menu offers no Split. The layout tree is untouched, so a wider screen gets its split back.
 

package/dist/react.cjs

@@ -34,7 +34,6 @@ var react_exports = {};
 __export(react_exports, {
   BrowserBar: () => BrowserBar,
   BrowserTabs: () => BrowserTabs,
-  CANVAS_ACTIVE_TAB_MIN_WIDTH: () => CANVAS_ACTIVE_TAB_MIN_WIDTH,
   CANVAS_TAB_MIN_WIDTH: () => CANVAS_TAB_MIN_WIDTH,
   CanvasColumn: () => CanvasColumn,
   CanvasFrame: () => CanvasFrame,
@@ -48,13 +47,15 @@ __export(react_exports, {
   CanvasTab: () => CanvasTab,
   CanvasToggle: () => CanvasToggle,
   CanvasWindowScope: () => CanvasWindowScope,
+  CanvasWindowTabs: () => CanvasWindowTabs,
   beginCanvasResize: () => beginCanvasResize,
   canvasSessionKey: () => canvasSessionKey,
+  canvasTabsOverflow: () => canvasTabsOverflow,
   defineCanvasKind: () => defineCanvasKind,
-  fitCanvasTabs: () => fitCanvasTabs,
   getCanvasKind: () => getCanvasKind,
   itemTitle: () => itemTitle,
   listCanvasKinds: () => listCanvasKinds,
+  planCanvasTabStrip: () => planCanvasTabStrip,
   registerCanvasKind: () => registerCanvasKind,
   registerCanvasKinds: () => registerCanvasKinds,
   useCanvas: () => useCanvas,
@@ -2636,6 +2637,10 @@ var CanvasSinglePaneContext = (0, import_react7.createContext)(false);
 function useCanvasSinglePane() {
   return (0, import_react7.useContext)(CanvasSinglePaneContext);
 }
+var CanvasWindowTabsContext = (0, import_react7.createContext)(false);
+function useCanvasWindowTabs() {
+  return (0, import_react7.useContext)(CanvasWindowTabsContext);
+}
 function useSlotSize(slots, paneId) {
   return (0, import_react7.useSyncExternalStore)(
     slots.subscribe,
@@ -3048,6 +3053,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();
@@ -3078,6 +3097,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 = (0, import_react9.useRef)(null);
   const bodyRef = (0, import_react9.useRef)(null);
@@ -3122,8 +3142,8 @@ function CanvasPaneView({ paneId }) {
             children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ArrowRightIcon, {})
           }
         ) : null,
-        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, {}) })
+        inWindowStrip ? active ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PaneTitle, { item: active, kind }) : /* @__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" }),
+        inWindowStrip ? null : /* @__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 ? (
@@ -3184,24 +3204,56 @@ 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, {}) })
   ] });
 }
-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__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "mxc-panel-title mxc-pane-title", "data-draggable": "", title, ...drag, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { className: "mxc-title-icon" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mxc-window-tabs", "data-slot": "canvas-window-tabs", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TabStrip, { tabs, activeItemId: focusedActive, actives }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CanvasHeaderButton, { className: "mxc-new-tab", label: "New tab", onClick: () => void canvas.newTab(focusedPaneId ?? void 0), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PlusIcon, {}) })
+  ] });
+}
+function TabStrip({
+  tabs,
+  activeItemId,
+  actives
+}) {
   const strip = (0, import_react9.useRef)(null);
+  const list = (0, import_react9.useRef)(null);
   const [width, setWidth] = (0, import_react9.useState)(0);
   const read = (0, import_react9.useRef)(() => {
   });
@@ -3227,48 +3279,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;
+  (0, import_react9.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime7.jsx)(
+    ItemTab,
+    {
+      itemId: tab.itemId,
+      paneId: tab.paneId,
+      index: tab.index,
+      active: isActive(tab),
+      current: joined && tab.itemId === activeItemId
+    },
+    tab.itemId
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "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__ */ (0, import_jsx_runtime7.jsx)(
-          "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__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsx)(
+            "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__ */ (0, import_jsx_runtime7.jsx)(ItemTab, { itemId: tab.itemId, paneId: tab.paneId, index: tab.index, active: tab.itemId === activeItemId }, tab.itemId))
-          }
-        ),
-        fit.overflow ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TabListMenu, { tabs, activeItemId, hidden }) : null
+            `split:${entry.tabs.map((tab) => tab.itemId).join("|")}`
+          )
+        ) }),
+        overflow ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TabListMenu, { tabs, activeItemId }) : null
       ]
     }
   );
 }
-function TabListMenu({ tabs, activeItemId, hidden }) {
+function TabListMenu({ tabs, activeItemId }) {
   const canvas = useCanvas();
   const { ports, layer } = useCanvasInternals();
   const blocking = (0, import_react9.useRef)(null);
   (0, import_react9.useEffect)(() => () => blocking.current?.(), []);
   const label = `All tabs (${tabs.length})`;
-  const trigger = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(CanvasHeaderButton, { className: "mxc-tab-list", label, "data-hidden-count": hidden, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronDownIcon, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mxc-tab-list-count", "aria-hidden": "true", children: hidden })
-  ] });
+  const trigger = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CanvasHeaderButton, { className: "mxc-tab-list", label, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronDownIcon, {}) });
   const showMenu = ports.showMenu;
   if (showMenu) {
     return trigger({
@@ -3324,7 +3403,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 ?? "");
@@ -3338,6 +3423,8 @@ function ItemTab({ itemId, paneId, index, active }) {
       title,
       icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, {}),
       active,
+      "data-mxc-tab": itemId,
+      "data-current": current ? "" : void 0,
       onSelect: () => canvas.activate(itemId),
       onClose: () => canvas.close(itemId),
       ...drag,
@@ -3523,6 +3610,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__ */ (0, import_jsx_runtime8.jsx)(
@@ -3550,10 +3638,13 @@ function CanvasColumn({ className, style, onLiveWidth, placement = "docked" }) {
             }
           }
         ) : null,
-        /* @__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: presentedPaneId ?? listPaneIds(layout)[0] }) : /* @__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.jsx)(CanvasSinglePaneContext.Provider, { value: singlePane, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CanvasWindowTabsContext.Provider, { value: windowTabs, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "mxc-layout", "data-single-pane": singlePane ? "" : void 0, "data-window-tabs": windowTabs ? "" : void 0, children: [
+            windowTabs ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CanvasWindowTabs, {}) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mxc-layout-panes", children: singlePane ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CanvasPaneView, { paneId: presentedPaneId ?? listPaneIds(layout)[0] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LayoutNodeView, { node: layout }) })
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CanvasBodyLayer, {})
-        ] }) })
+        ] }) }) })
       ] })
     }
   );