@ai-matrx/canvas 0.8.0 → 0.8.2

package/CHANGELOG.md

@@ -1,11 +1,25 @@
 # Changelog
 
+## 0.8.2
+### Unreleased
+
+- The tab strip follows the tablist keyboard pattern: Left/Right (wrapping), Home and End move to and open the neighbouring tab. Only the active tab is in the Tab order, so a background tab was unreachable without a mouse.
+- Consumer action: none.
+
+## 0.8.1
+
+Live check of 0.8.0 (1440px, canvas expanded, 5 tabs): a 1428px window strip drew 127px tabs — a `flex-basis` alone let the tab list size itself to the names.
+
+- Every tab now has a definite `width: 12rem` (`flex: 0 1 auto`), a joined split tab `n × 12rem`: with room, tabs are 12rem; short of room they shrink evenly to the 120px floor, then scroll.
+- Keeping the current tab in view brings a split's joined tab into view whole, not only its current half.
+- Consumer action: none.
+
 ## 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.
+- **Tabs shrink evenly to a readable floor, then scroll.** Every tab: 12rem with room, 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
@@ -223,3 +237,4 @@ One canvas for the web app and the desktop app: the package now owns the pane ch
 
 - Replace workspace Canvas imports with `@ai-matrx/canvas` at `latest`; remove source aliases and transpile overrides.
 - Import `@ai-matrx/canvas/styles.css` and optionally `@ai-matrx/canvas/tokens.css`; keep the existing host identity, store and theme ports.
+

package/dist/react.cjs

@@ -3295,8 +3295,9 @@ function TabStrip({
     if (!el || !activeItemId) return;
     const tab = [...el.querySelectorAll("[data-mxc-tab]")].find((node) => node.dataset.mxcTab === activeItemId);
     if (!tab) return;
+    const target = tab.closest(".mxc-tab-group") ?? tab;
     const box = el.getBoundingClientRect();
-    const rect = tab.getBoundingClientRect();
+    const rect = target.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]);
@@ -3323,24 +3324,49 @@ function TabStrip({
       "data-overflow": overflow ? "" : void 0,
       style: { ["--mxc-tab-min"]: `${CANVAS_TAB_MIN_WIDTH}px` },
       children: [
-        /* @__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)
-            },
-            `split:${entry.tabs.map((tab) => tab.itemId).join("|")}`
-          )
-        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "div",
+          {
+            ref: list,
+            className: "mxc-tabs",
+            role: "tablist",
+            "aria-label": "Canvas tabs",
+            "aria-multiselectable": joined ? true : void 0,
+            onKeyDown: moveTabFocus,
+            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)
+                },
+                `split:${entry.tabs.map((tab) => tab.itemId).join("|")}`
+              )
+            )
+          }
+        ),
         overflow ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TabListMenu, { tabs, activeItemId }) : null
       ]
     }
   );
 }
+function moveTabFocus(event) {
+  const keys = ["ArrowLeft", "ArrowRight", "Home", "End"];
+  if (!keys.includes(event.key) || event.altKey || event.ctrlKey || event.metaKey) return;
+  const tabs = [...event.currentTarget.querySelectorAll('[role="tab"]')];
+  const at = tabs.findIndex((tab) => tab === event.target || tab.contains(event.target));
+  if (at < 0 || tabs.length < 2) return;
+  event.preventDefault();
+  const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+  const step = event.key === "ArrowRight" !== rtl ? 1 : -1;
+  const next = event.key === "Home" ? 0 : event.key === "End" ? tabs.length - 1 : (at + step + tabs.length) % tabs.length;
+  const target = tabs[next];
+  target?.focus();
+  target?.click();
+}
 function TabListMenu({ tabs, activeItemId }) {
   const canvas = useCanvas();
   const { ports, layer } = useCanvasInternals();