@ai-matrx/canvas 0.6.0 → 0.6.1

package/dist/styles.css

@@ -258,12 +258,14 @@
   gap: 0.125rem;
 }
 
+/* Nothing leading: no box and no gap of its own — the tabs keep that room; the actions still sit at the end. */
 .mxc-pane-leading:empty {
-  min-width: 0.25rem;
+  display: none;
 }
 
 .mxc-pane-actions {
   flex: none;
+  margin-left: auto;
   display: flex;
   align-items: center;
   gap: 0.125rem;
@@ -404,13 +406,14 @@
 /* ── tabs ───────────────────────────────────────────────────────────────── */
 
 /*
- * THE STRIP takes what the header has: it is as wide as its tabs need (the
- * leading slot after it has no basis), so "+" sits right after the last tab
- * and only shrinks when the header runs out of room. Past the tabs' minimum
- * the strip scrolls, and says so: the clipped edge fades and chevrons appear.
+ * THE STRIP takes the header's free width (flex 1): its tabs are laid out in
+ * real room, never in the strip's own intrinsic size — browsers undercount a
+ * row of text tabs by a few px each, which cut every name ("Quic", "Messa").
+ * Past the tabs' minimum the strip scrolls, and says so: the clipped edge
+ * fades and chevrons appear.
  */
 .mxc-tabstrip {
-  flex: 0 1 auto;
+  flex: 1 1 auto;
   min-width: 0;
   display: flex;
   align-items: center;
@@ -420,7 +423,7 @@
 .mxc-tabs {
   /* The tabs' offset parent, so "keep the active tab in view" measures in strip coordinates. */
   position: relative;
-  flex: 0 1 auto;
+  flex: 1 1 auto;
   min-width: 0;
   display: flex;
   align-items: center;
@@ -458,8 +461,9 @@
  * padding. A tab is as wide as its name (up to 12rem); tabs shrink evenly
  * only when the header is out of room, to a 4.5rem floor (a tab is never
  * squeezed to three letters), then the strip scrolls. The active tab keeps
- * icon + ~10 letters. Every tab reserves the room of its close, so a name is
- * never under the button; the close shows on hover, the active tab and focus.
+ * icon + ~10 letters and reserves the room of its (always shown) close, so
+ * its name is never under the button. A background tab's close costs no
+ * width: on hover it is overlaid and the name's end fades under it.
  */
 .mxc-tab {
   position: relative;
@@ -468,9 +472,9 @@
   max-width: 12rem;
   display: flex;
   align-items: center;
-  gap: 0.3125rem;
+  gap: 0.25rem;
   height: 1.625rem;
-  padding: 0 1.375rem 0 0.375rem;
+  padding: 0 0.375rem;
   border-radius: 0.375rem;
   font-size: 0.78125rem;
   line-height: 1rem;
@@ -481,9 +485,9 @@
   box-sizing: border-box;
 }
 
-/* A tab without a close (BrowserTabs with no onClose) keeps even padding. */
-.mxc-tab:not(:has(> .mxc-tab-close)) {
-  padding-right: 0.375rem;
+/* The active tab always shows its close: its room is reserved. */
+.mxc-tab[data-active]:has(> .mxc-tab-close) {
+  padding-right: 1.25rem;
 }
 
 .mxc-tab[data-active] {
@@ -531,10 +535,24 @@
   flex: 0 1 auto;
   min-width: 0;
   overflow: hidden;
-  text-overflow: ellipsis;
+  /* Never an ellipsis: system fonts overflow their intrinsic width by a fraction of a pixel. */
+  text-overflow: clip;
   white-space: nowrap;
 }
 
+/* A name that is really cut (data-truncated, measured) fades at its end. */
+.mxc-tab[data-truncated] .mxc-tab-title {
+  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 0.75rem);
+  mask-image: linear-gradient(to left, transparent 0, #000 0.75rem);
+}
+
+/* A background tab's close is overlaid while shown: the name's end fades under it. */
+.mxc-tab:not([data-active]):hover:has(> .mxc-tab-close) .mxc-tab-title,
+.mxc-tab:not([data-active]):focus-within:has(> .mxc-tab-close) .mxc-tab-title {
+  -webkit-mask-image: linear-gradient(to left, transparent 1.125rem, #000 1.875rem);
+  mask-image: linear-gradient(to left, transparent 1.125rem, #000 1.875rem);
+}
+
 .mxc-tab-note {
   flex: none;
   font-size: 0.6875rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/canvas",
-  "version": "0.6.0",
+  "version": "0.6.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",