@ai-matrx/canvas 0.6.0 → 0.6.1

package/dist/react.js

@@ -1845,7 +1845,7 @@ function useCanvasLauncherEntries() {
 // src/react/CanvasColumn.tsx
 import {
   useEffect as useEffect7,
-  useLayoutEffect as useLayoutEffect4,
+  useLayoutEffect as useLayoutEffect5,
   useRef as useRef7,
   useState as useState6,
   useSyncExternalStore as useSyncExternalStore4
@@ -1859,7 +1859,7 @@ import {
   lazy,
   memo,
   useEffect as useEffect5,
-  useLayoutEffect as useLayoutEffect2,
+  useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo2,
   useRef as useRef5,
   useState as useState4
@@ -1869,6 +1869,7 @@ import {
 import {
   forwardRef,
   useEffect as useEffect3,
+  useLayoutEffect as useLayoutEffect2,
   useRef as useRef3,
   useState as useState3
 } from "react";
@@ -1974,6 +1975,21 @@ var ChevronRightIcon = (p) => /* @__PURE__ */ jsx3(Glyph, { ...p, children: /* @
 
 // src/react/chrome.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var useIsoLayoutEffect = typeof window === "undefined" ? useEffect3 : useLayoutEffect2;
+function useTruncated(title) {
+  const ref = useRef3(null);
+  const [truncated, setTruncated] = useState3(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();
@@ -2113,6 +2129,7 @@ function CanvasPanelEmpty({ children, className }) {
 }
 var CanvasTab = 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__ */ jsxs3(
     "div",
     {
@@ -2122,6 +2139,7 @@ var CanvasTab = forwardRef(function CanvasTab2({ title, icon, note, active, onSe
       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,
@@ -2139,7 +2157,7 @@ var CanvasTab = forwardRef(function CanvasTab2({ title, icon, note, active, onSe
       },
       children: [
         /* @__PURE__ */ jsx4("span", { className: "mxc-tab-icon", children: icon }),
-        /* @__PURE__ */ jsx4("span", { className: "mxc-tab-title", children: shown }),
+        /* @__PURE__ */ jsx4("span", { ref: name.ref, className: "mxc-tab-title", children: shown }),
         note ? /* @__PURE__ */ jsx4("span", { className: "mxc-tab-note", "data-slot": "browser-tab-note", children: note }) : null,
         onClose ? /* @__PURE__ */ jsx4(
           "button",
@@ -2471,7 +2489,7 @@ function useSlotSize(slots, paneId) {
 
 // src/react/bodies.tsx
 import { Fragment, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var useIsoLayoutEffect = typeof window === "undefined" ? useEffect5 : useLayoutEffect2;
+var useIsoLayoutEffect2 = typeof window === "undefined" ? useEffect5 : useLayoutEffect3;
 var LAZY = /* @__PURE__ */ Symbol.for("ai-matrx.canvas.lazy");
 function kindComponent(kind) {
   if (kind.component) return kind.component;
@@ -2588,8 +2606,8 @@ function CanvasBodyLayer() {
   const [placement] = useState4(
     () => 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__ */ jsx6("div", { ref: root, className: "mxc-bodies", "data-mxc-bodies": windowId, children: shape.placed.map(({ hostId, itemId, paneId, active, kept }) => /* @__PURE__ */ jsx6(
@@ -2671,7 +2689,7 @@ var BodyHost = 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 });
@@ -2769,8 +2787,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);
@@ -2823,10 +2841,10 @@ var ItemBoundary = class extends Component {
 };
 
 // src/react/CanvasPane.tsx
-import { Component as Component2, useEffect as useEffect6, useLayoutEffect as useLayoutEffect3, useRef as useRef6, useState as useState5 } from "react";
+import { Component as Component2, useEffect as useEffect6, useLayoutEffect as useLayoutEffect4, useRef as useRef6, useState as useState5 } from "react";
 import * as Menu from "@radix-ui/react-dropdown-menu";
 import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
-var useIsoLayoutEffect2 = typeof window === "undefined" ? useEffect6 : useLayoutEffect3;
+var useIsoLayoutEffect3 = typeof window === "undefined" ? useEffect6 : useLayoutEffect4;
 function itemTitle(item, kind) {
   if (item.title) return item.title;
   if (item.kind === CANVAS_LAUNCHER_KIND) return "New tab";
@@ -2883,7 +2901,7 @@ function CanvasPaneView({ paneId }) {
   const bodyRef = useRef6(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);
@@ -2973,7 +2991,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 = () => {
@@ -3149,7 +3167,7 @@ function safeMenu(build) {
 
 // src/react/CanvasColumn.tsx
 import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
-var useIsoLayoutEffect3 = typeof window === "undefined" ? useEffect7 : useLayoutEffect4;
+var useIsoLayoutEffect4 = typeof window === "undefined" ? useEffect7 : useLayoutEffect5;
 function subscribeViewport(listener) {
   window.addEventListener("resize", listener);
   return () => window.removeEventListener("resize", listener);
@@ -3307,7 +3325,7 @@ function LayoutNodeView({ node }) {
 }
 function useMeasuredWidth(ref, enabled) {
   const [width, setWidth] = useState6(0);
-  useIsoLayoutEffect3(() => {
+  useIsoLayoutEffect4(() => {
     const el = ref.current;
     if (!enabled || !el) return;
     setWidth(el.getBoundingClientRect().width);