@ai-matrx/canvas 0.7.3 → 0.8.1

package/dist/styles.css

@@ -118,9 +118,37 @@
   flex: 1 1 auto;
   min-height: 0;
   display: flex;
+  flex-direction: column;
   padding: var(--mxc-gap);
 }
 
+/* The panes (one pane, or the split tree) under the window-wide strip when there is one. */
+.mxc-layout-panes {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+}
+
+/*
+ * THE WINDOW STRIP (Chrome split view): a split canvas keeps ONE tab strip
+ * across the whole window, above its panes — never one strip per pane.
+ */
+.mxc-window-tabs {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  min-width: 0;
+  height: var(--mxc-header-h, 2.25rem);
+  margin-bottom: var(--mxc-gap);
+  padding: 0 0.375rem;
+  border: 1px solid var(--mxc-border);
+  border-radius: var(--mxc-radius);
+  background: var(--mxc-header-bg);
+  box-sizing: border-box;
+}
+
 .mxc-column[data-placement="docked"]:not([data-fullscreen]) > .mxc-layout {
   /* The gap on the left edge is the width handle's room. */
   padding-left: max(var(--mxc-gap), 0px);
@@ -245,6 +273,11 @@
   opacity: 1;
 }
 
+/* A pane's name under the window-wide strip (not a tab): keeps icon + ~7 letters + "…". */
+.mxc-pane-title {
+  min-width: min(6.25rem, 100%);
+}
+
 .mxc-title-icon {
   flex: none;
   width: 0.875rem;
@@ -288,9 +321,6 @@
     gap: 0;
   }
 
-  .mxc-single-title {
-    min-width: 0;
-  }
 }
 
 .mxc-pane-body {
@@ -421,12 +451,11 @@
 
 /*
  * THE STRIP takes the header's free width (flex-basis 0: what it shows never
- * changes how wide it is, so the fit is stable). Tabs are as wide as their
- * names; short of room they shrink — the active tab least — to a floor
- * (--mxc-tab-min: icon + ~6 letters + "…"; the active tab keeps more), and
- * the tabs that do not fit at their floor are reached from "All tabs" (the
- * strip never scrolls and never overlaps a control). At the narrowest it is
- * the active tab's title and that menu.
+ * changes how wide it is). Tabs share it evenly — 12rem each with room,
+ * shrinking together to a readable floor (--mxc-tab-min: icon + ~10 letters +
+ * "…") — and past the floor the tab list scrolls sideways (no scrollbar drawn;
+ * wheel, trackpad and the current tab kept in view) beside "All tabs". A tab
+ * never shrinks to a sliver and nothing overlaps a control.
  */
 .mxc-tabstrip {
   flex: 1 1 0;
@@ -441,10 +470,18 @@
   position: relative;
   flex: 0 1 auto;
   min-width: 0;
+  height: 100%;
   display: flex;
   align-items: center;
   gap: 0.125rem;
-  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+}
+
+.mxc-tabs::-webkit-scrollbar {
+  display: none;
 }
 
 /* "All tabs": a chevron and how many tabs are out of sight. */
@@ -456,12 +493,6 @@
   padding: 0 0.25rem;
 }
 
-.mxc-tab-list-count {
-  font-size: 0.6875rem;
-  line-height: 1;
-  font-variant-numeric: tabular-nums;
-}
-
 .mxc-tab-list-menu {
   max-height: min(24rem, 70vh);
   overflow-y: auto;
@@ -484,13 +515,16 @@
 
 /*
  * TAB DENSITY (Claude Code / Codex): 12.5px text, a 14px icon, 6px side
- * padding, up to 12rem wide. The active tab reserves the room of its (always
- * shown) close; a background tab's close is overlaid on hover.
+ * padding, 12rem wide with room. Every tab shrinks evenly (the same basis and
+ * shrink) to the same readable floor; the active tab reserves the room of its
+ * (always shown) close; a background tab's close is overlaid on hover.
  */
 .mxc-tab {
   position: relative;
+  /* A definite width (not only a flex-basis) so the tab list's own size counts 12rem per tab. */
   flex: 0 1 auto;
-  min-width: var(--mxc-tab-min, 88px);
+  width: 12rem;
+  min-width: var(--mxc-tab-min, 120px);
   max-width: 12rem;
   display: flex;
   align-items: center;
@@ -512,25 +546,13 @@
   padding-right: 1.25rem;
 }
 
-/*
- * The active tab gets priority width through its higher floor. (Never a
- * flex-shrink below 1: once it is the last tab still shrinking, the flex
- * algorithm hands it only that fraction of the overflow and it runs under
- * the "All tabs" button — measured live on 0.7.0.)
- */
+/* The active tab: the same width rules as every tab (no flex-shrink of its own — 0.7.0 live: it ran under "All tabs"). */
 .mxc-tab[data-active] {
-  min-width: var(--mxc-tab-active-min, 112px);
   background: var(--mxc-tab-active-bg);
   color: var(--mxc-fg);
   box-shadow: var(--mxc-tab-active-shadow);
 }
 
-/* The narrowest strip: the active tab is the title, as narrow as it must be (icon + "…"). */
-.mxc-tabstrip[data-compact] .mxc-tab {
-  flex: 0 1 auto;
-  min-width: 0;
-}
-
 .mxc-tab:hover {
   background: var(--mxc-hover);
 }
@@ -565,22 +587,58 @@
   border-radius: 0.125rem;
 }
 
+/* A name that does not fit ends in "…" — never clipped mid-letter. */
 .mxc-tab-title {
   flex: 0 1 auto;
   min-width: 0;
   overflow: hidden;
-  text-overflow: clip;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 /*
- * A name that is really cut (data-truncated: measured more than 1px short)
- * ends in "…". Only then — system fonts measure a fraction wider than their
- * intrinsic size, which would put "…" on a name that fits.
+ * A SPLIT drawn as ONE joined tab (Chrome split view): each pane's visible tab
+ * is a half of one pill; the focused pane's half reads strongest. The group
+ * shrinks like that many tabs and floors at that many tab floors.
  */
-.mxc-tab[data-truncated] .mxc-tab-title,
-.mxc-single-title[data-truncated] > .mxc-tab-title {
-  text-overflow: ellipsis;
+.mxc-tab-group {
+  position: relative;
+  flex: 0 1 auto;
+  width: calc(var(--mxc-group-n, 2) * 12rem);
+  min-width: calc(var(--mxc-group-n, 2) * var(--mxc-tab-min, 120px));
+  display: flex;
+  align-items: center;
+  height: 1.625rem;
+  border-radius: 0.375rem;
+  background: var(--mxc-tab-active-bg);
+  box-shadow: var(--mxc-tab-active-shadow);
+}
+
+.mxc-tab-group > .mxc-tab {
+  flex: 1 1 0;
+  width: auto;
+  min-width: 0;
+  max-width: none;
+  background: transparent;
+  box-shadow: none;
+}
+
+.mxc-tab-group > .mxc-tab[data-active]:hover {
+  background: var(--mxc-hover);
+}
+
+.mxc-tab-group > .mxc-tab:not([data-current]) {
+  color: var(--mxc-muted);
+}
+
+.mxc-tab-group > .mxc-tab + .mxc-tab::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0.375rem;
+  bottom: 0.375rem;
+  width: 1px;
+  background: var(--mxc-border);
 }
 
 /*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/canvas",
-  "version": "0.7.3",
+  "version": "0.8.1",
   "description": "The AI Matrx canvas: a docked right-hand column with split panes, tabs, full screen, a kind registry, Redux-compatible state and persistence.",
   "type": "module",
   "main": "./dist/index.cjs",