@ai-matrx/canvas 0.7.0 → 0.7.2

package/dist/styles.css

@@ -490,7 +490,7 @@
 .mxc-tab {
   position: relative;
   flex: 0 1 auto;
-  min-width: var(--mxc-tab-min, 78px);
+  min-width: var(--mxc-tab-min, 88px);
   max-width: 12rem;
   display: flex;
   align-items: center;
@@ -512,10 +512,14 @@
   padding-right: 1.25rem;
 }
 
-/* The active tab gets priority width: it shrinks last and keeps a higher floor. */
+/*
+ * 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.)
+ */
 .mxc-tab[data-active] {
-  flex-shrink: 0.2;
-  min-width: var(--mxc-tab-active-min, 100px);
+  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);
@@ -579,11 +583,17 @@
   text-overflow: ellipsis;
 }
 
-/* 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);
+/*
+ * A background tab's close shows on hover / focus, and while it shows the name
+ * ends (ellipsis) before it: the room is reserved then, never overlaid. Touch
+ * screens have no hover, so a background tab shows no close there at all (only
+ * the active tab does) and its name keeps the room.
+ */
+@media (hover: hover) {
+  .mxc-tab:not([data-active]):hover:has(> .mxc-tab-close),
+  .mxc-tab:not([data-active]):focus-within:has(> .mxc-tab-close) {
+    padding-right: 1.25rem;
+  }
 }
 
 .mxc-tab-note {
@@ -634,11 +644,10 @@
   box-shadow: 0 0 0 2px var(--mxc-ring);
 }
 
-/* Touch screens have no hover: every tab's close is reachable. */
+/* Touch screens have no hover: only the active tab shows a close, so names get the room. */
 @media (pointer: coarse) {
-  .mxc-tab .mxc-tab-close {
-    opacity: 1;
-    pointer-events: auto;
+  .mxc-tab:not([data-active]) .mxc-tab-close {
+    display: none;
   }
 }
 

package/package.json

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