@ai-matrx/canvas 0.5.1 → 0.5.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 0.5.3
+
+- A kind's `HeaderAction` renders in its own gapless row (`.mxc-kind-actions`): tap-target buttons space themselves, and the pane's 2px action gap tripped the tap-target misuse guard over the tab strip (seen live with Quick Chat).
+
+### Consumer action
+
+- None.
+
+## 0.5.2
+
+Live check at a 380px canvas with five tabs: background tabs still showed ~3 letters.
+
+- Tabs never squeeze below 4.5rem; past that the strip scrolls (active tab kept in view, also when its siblings resize). A background tab narrower than 6rem drops its icon so its name keeps the room (~9 letters). The active tab keeps at least 7.5rem (icon + ~10 letters + close).
+
+### Consumer action
+
+- None.
+
 ## 0.5.1
 
 Measured live slowness (perf lane), fixed at the subscriptions:

package/dist/react.cjs

@@ -2827,7 +2827,10 @@ function CanvasPaneView({ paneId }) {
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CanvasHeaderButton, { className: "mxc-new-tab", label: "New tab", onClick: () => void canvas.newTab(paneId), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PlusIcon, {}) })
       ] }),
       leading: Leading && kindProps ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Leading, { ...kindProps }) : null,
-      actions: Action && kindProps ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Action, { ...kindProps }) : null,
+      actions: Action && kindProps ? (
+        // Its own gapless row: a kind's tap buttons space themselves (the tap-target placement rule).
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mxc-kind-actions", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Action, { ...kindProps }) })
+      ) : null,
       renderMenu: () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PaneMenu, { paneId, windowId, activeItem: active, kind, kindProps, tabCount: pane.itemIds.length, role }),
       expanded: isFullscreen,
       onToggleExpand: () => canvas.setFullscreen(!isFullscreen),
@@ -2885,6 +2888,8 @@ function TabStrip({ paneId, itemIds, activeItemId }) {
     reveal();
     const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(reveal);
     observer?.observe(el);
+    const activeTab = el.querySelector('[role="tab"][aria-selected="true"]');
+    if (activeTab) observer?.observe(activeTab);
     return () => observer?.disconnect();
   }, [activeItemId, itemIds.length]);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(