@ai-matrx/canvas 0.6.0 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.6.1
+
+Live measurement of 0.6.0 (a 756px pane, five tabs, Quick Chat's header actions present):
+
+- **The strip takes the header's free width** (`flex: 1`). Sized to its own intrinsic width, the browser undercut every text tab by 2–3px and cut each name; now tabs lay out in real room ("+" sits at the strip's end).
+- **No ellipsis.** System fonts overflow their intrinsic width by a fraction of a pixel, which put "…" on names that fit ("Quick Ch…"). Titles clip; a name really cut (`data-truncated` on the tab, measured: more than 1px) fades at its end.
+- **Room for names:** only the active tab reserves its (always shown) close's room — a background tab's close overlays on hover with the name fading under it; icon gap 4px; an empty leading slot takes no room and no gap (the actions keep the end with `margin-left: auto`).
+
+### Consumer action
+
+- None.
+
 ## 0.6.0
 
 Independent live sweep (admin, clone):

package/dist/react.cjs

@@ -2015,6 +2015,21 @@ var ChevronRightIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Glyph
 
 // src/react/chrome.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var useIsoLayoutEffect = typeof window === "undefined" ? import_react3.useEffect : import_react3.useLayoutEffect;
+function useTruncated(title) {
+  const ref = (0, import_react3.useRef)(null);
+  const [truncated, setTruncated] = (0, import_react3.useState)(false);
+  useIsoLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return void 0;
+    const check = () => setTruncated(el.scrollWidth - el.clientWidth > 1);
+    check();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(check);
+    observer?.observe(el);
+    return () => observer?.disconnect();
+  }, [title]);
+  return { ref, truncated };
+}
 var cx = (...names) => names.filter(Boolean).join(" ");
 function useTooltip(text) {
   const internals = useOptionalCanvasInternals();
@@ -2154,6 +2169,7 @@ function CanvasPanelEmpty({ children, className }) {
 }
 var CanvasTab = (0, import_react3.forwardRef)(function CanvasTab2({ title, icon, note, active, onSelect, onClose, className, onKeyDown, onClick, ...rest }, ref) {
   const shown = title || "New tab";
+  const name = useTruncated(shown);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
@@ -2163,6 +2179,7 @@ var CanvasTab = (0, import_react3.forwardRef)(function CanvasTab2({ title, icon,
       tabIndex: active ? 0 : -1,
       "data-slot": "browser-tab",
       "data-active": active ? "" : void 0,
+      "data-truncated": name.truncated ? "" : void 0,
       title: shown,
       className: cx("mxc-tab", className),
       ...rest,
@@ -2180,7 +2197,7 @@ var CanvasTab = (0, import_react3.forwardRef)(function CanvasTab2({ title, icon,
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mxc-tab-icon", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mxc-tab-title", children: shown }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { ref: name.ref, className: "mxc-tab-title", children: shown }),
         note ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mxc-tab-note", "data-slot": "browser-tab-note", children: note }) : null,
         onClose ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "button",
@@ -2512,7 +2529,7 @@ function useSlotSize(slots, paneId) {
 
 // src/react/bodies.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var useIsoLayoutEffect = typeof window === "undefined" ? import_react7.useEffect : import_react7.useLayoutEffect;
+var useIsoLayoutEffect2 = typeof window === "undefined" ? import_react7.useEffect : import_react7.useLayoutEffect;
 var LAZY = /* @__PURE__ */ Symbol.for("ai-matrx.canvas.lazy");
 function kindComponent(kind) {
   if (kind.component) return kind.component;
@@ -2629,8 +2646,8 @@ function CanvasBodyLayer() {
   const [placement] = (0, import_react7.useState)(
     () => slots ? createPlacement(() => root.current, slots, () => layer.native.remeasure()) : null
   );
-  useIsoLayoutEffect(() => placement?.place());
-  useIsoLayoutEffect(() => slots && placement ? slots.subscribe(placement.place) : void 0, [slots, placement]);
+  useIsoLayoutEffect2(() => placement?.place());
+  useIsoLayoutEffect2(() => slots && placement ? slots.subscribe(placement.place) : void 0, [slots, placement]);
   const shape = parseSignature(signature);
   if (!slots || !placement || !shape) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: root, className: "mxc-bodies", "data-mxc-bodies": windowId, children: shape.placed.map(({ hostId, itemId, paneId, active, kept }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -2712,7 +2729,7 @@ var BodyHost = (0, import_react7.memo)(function BodyHost2({
   const mounted = kind?.unmountWhenHidden ? visible : everShown;
   const presentation = usePanePresentation(slots, paneId, isFullscreen, paneCount);
   const drop = usePaneDrop(paneId, () => slots.section(paneId));
-  useIsoLayoutEffect(() => {
+  useIsoLayoutEffect2(() => {
     const el = element.current;
     if (!placement || !el) return void 0;
     return placement.register(hostId, { element: el, paneId });
@@ -2810,8 +2827,8 @@ function NativeBody({ itemId, windowId, visible, children }) {
     const rect = { ...toCanvasRect(box), devicePixelRatio: window.devicePixelRatio || 1 };
     layer.native.report(itemId, rect, { visible: !layer.isBlocked(), windowId });
   };
-  useIsoLayoutEffect(() => measure.current());
-  useIsoLayoutEffect(() => {
+  useIsoLayoutEffect2(() => measure.current());
+  useIsoLayoutEffect2(() => {
     const el = ref.current;
     const run = () => measure.current();
     const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(run);
@@ -2867,7 +2884,7 @@ var ItemBoundary = class extends import_react7.Component {
 var import_react8 = require("react");
 var Menu = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var useIsoLayoutEffect2 = typeof window === "undefined" ? import_react8.useEffect : import_react8.useLayoutEffect;
+var useIsoLayoutEffect3 = typeof window === "undefined" ? import_react8.useEffect : import_react8.useLayoutEffect;
 function itemTitle(item, kind) {
   if (item.title) return item.title;
   if (item.kind === CANVAS_LAUNCHER_KIND) return "New tab";
@@ -2924,7 +2941,7 @@ function CanvasPaneView({ paneId }) {
   const bodyRef = (0, import_react8.useRef)(null);
   const presentation = usePanePresentation(slots, paneId, isFullscreen, paneCount);
   const drop = usePaneDrop(paneId, () => sectionRef.current);
-  useIsoLayoutEffect2(() => {
+  useIsoLayoutEffect3(() => {
     const body = bodyRef.current;
     const section = sectionRef.current;
     if (body) slots.set(paneId, body);
@@ -3014,7 +3031,7 @@ function TabStrip({ tabs, activeItemId }) {
     setOverflow((prev) => prev.start === start && prev.end === end ? prev : { start, end });
   };
   const tabKey = tabs.map((tab) => tab.itemId).join("|");
-  useIsoLayoutEffect2(() => {
+  useIsoLayoutEffect3(() => {
     const el = strip.current;
     if (!el) return void 0;
     const reveal = () => {
@@ -3190,7 +3207,7 @@ function safeMenu(build) {
 
 // src/react/CanvasColumn.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var useIsoLayoutEffect3 = typeof window === "undefined" ? import_react9.useEffect : import_react9.useLayoutEffect;
+var useIsoLayoutEffect4 = typeof window === "undefined" ? import_react9.useEffect : import_react9.useLayoutEffect;
 function subscribeViewport(listener) {
   window.addEventListener("resize", listener);
   return () => window.removeEventListener("resize", listener);
@@ -3348,7 +3365,7 @@ function LayoutNodeView({ node }) {
 }
 function useMeasuredWidth(ref, enabled) {
   const [width, setWidth] = (0, import_react9.useState)(0);
-  useIsoLayoutEffect3(() => {
+  useIsoLayoutEffect4(() => {
     const el = ref.current;
     if (!enabled || !el) return;
     setWidth(el.getBoundingClientRect().width);