@ai-matrx/canvas 0.7.1 → 0.7.3

package/dist/styles.css

@@ -583,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 {
@@ -638,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.1",
+  "version": "0.7.3",
   "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",