@workflow/web 5.0.0-beta.42 → 5.0.0-beta.43

package/build/client/assets/{manifest-cf88886b.js → manifest-157e28f1.js}

@@ -1 +1 @@
-window.__reactRouterManifest={"entry":{"module":"/assets/entry.client-LwI3HNYl.js","imports":["/assets/index-PFjW8YjQ.js"],"css":[]},"routes":{"root":{"id":"root","path":"","hasAction":true,"hasLoader":true,"hasClientAction":false,"hasClientLoader":false,"hasClientMiddleware":false,"hasDefaultExport":true,"hasErrorBoundary":true,"module":"/assets/root-BfhMCbkz.js","imports":["/assets/index-PFjW8YjQ.js","/assets/mermaid-3ZIDBTTL-gEw-Ch1C.js","/assets/loader-circle-BOxaTUjK.js","/assets/arrow-up-right-D39pnGsD.js"],"css":["/assets/root-Bl5xphvU.css","/assets/mermaid-3ZIDBTTL-D8CjRQta.css"]},"routes/home":{"id":"routes/home","parentId":"root","index":true,"hasAction":false,"hasLoader":false,"hasClientAction":false,"hasClientLoader":false,"hasClientMiddleware":false,"hasDefaultExport":true,"hasErrorBoundary":false,"module":"/assets/home-C6CuMqQu.js","imports":["/assets/index-PFjW8YjQ.js","/assets/workflow-graph-viewer-CxrWityD.js","/assets/mermaid-3ZIDBTTL-gEw-Ch1C.js","/assets/loader-circle-BOxaTUjK.js"],"css":["/assets/workflow-graph-viewer-DnlNuQQH.css","/assets/mermaid-3ZIDBTTL-D8CjRQta.css"]},"routes/run-detail":{"id":"routes/run-detail","parentId":"root","path":"run/:runId","hasAction":false,"hasLoader":false,"hasClientAction":false,"hasClientLoader":false,"hasClientMiddleware":false,"hasDefaultExport":true,"hasErrorBoundary":false,"module":"/assets/run-detail-DKz7lp2q.js","imports":["/assets/index-PFjW8YjQ.js","/assets/workflow-graph-viewer-CxrWityD.js","/assets/mermaid-3ZIDBTTL-gEw-Ch1C.js","/assets/arrow-up-right-D39pnGsD.js"],"css":["/assets/run-detail-CWoGxu_0.css","/assets/workflow-graph-viewer-DnlNuQQH.css","/assets/mermaid-3ZIDBTTL-D8CjRQta.css"]},"routes/api.rpc":{"id":"routes/api.rpc","parentId":"root","path":"api/rpc","hasAction":true,"hasLoader":true,"hasClientAction":false,"hasClientLoader":false,"hasClientMiddleware":false,"hasDefaultExport":false,"hasErrorBoundary":false,"module":"/assets/api.rpc-l0sNRNKZ.js","imports":[],"css":[]},"routes/api.stream.$streamId":{"id":"routes/api.stream.$streamId","parentId":"root","path":"api/stream/:streamId","hasAction":false,"hasLoader":true,"hasClientAction":false,"hasClientLoader":false,"hasClientMiddleware":false,"hasDefaultExport":false,"hasErrorBoundary":false,"module":"/assets/api.stream._streamId-l0sNRNKZ.js","imports":[],"css":[]}},"url":"/assets/manifest-cf88886b.js","version":"cf88886b"};
+window.__reactRouterManifest={"entry":{"module":"/assets/entry.client-LwI3HNYl.js","imports":["/assets/index-PFjW8YjQ.js"],"css":[]},"routes":{"root":{"id":"root","path":"","hasAction":true,"hasLoader":true,"hasClientAction":false,"hasClientLoader":false,"hasClientMiddleware":false,"hasDefaultExport":true,"hasErrorBoundary":true,"module":"/assets/root-BfhMCbkz.js","imports":["/assets/index-PFjW8YjQ.js","/assets/mermaid-3ZIDBTTL-gEw-Ch1C.js","/assets/loader-circle-BOxaTUjK.js","/assets/arrow-up-right-D39pnGsD.js"],"css":["/assets/root-Bl5xphvU.css","/assets/mermaid-3ZIDBTTL-D8CjRQta.css"]},"routes/home":{"id":"routes/home","parentId":"root","index":true,"hasAction":false,"hasLoader":false,"hasClientAction":false,"hasClientLoader":false,"hasClientMiddleware":false,"hasDefaultExport":true,"hasErrorBoundary":false,"module":"/assets/home-C6CuMqQu.js","imports":["/assets/index-PFjW8YjQ.js","/assets/workflow-graph-viewer-CxrWityD.js","/assets/mermaid-3ZIDBTTL-gEw-Ch1C.js","/assets/loader-circle-BOxaTUjK.js"],"css":["/assets/workflow-graph-viewer-DnlNuQQH.css","/assets/mermaid-3ZIDBTTL-D8CjRQta.css"]},"routes/run-detail":{"id":"routes/run-detail","parentId":"root","path":"run/:runId","hasAction":false,"hasLoader":false,"hasClientAction":false,"hasClientLoader":false,"hasClientMiddleware":false,"hasDefaultExport":true,"hasErrorBoundary":false,"module":"/assets/run-detail-BG_1K2Hq.js","imports":["/assets/index-PFjW8YjQ.js","/assets/workflow-graph-viewer-CxrWityD.js","/assets/mermaid-3ZIDBTTL-gEw-Ch1C.js","/assets/arrow-up-right-D39pnGsD.js"],"css":["/assets/run-detail-CWoGxu_0.css","/assets/workflow-graph-viewer-DnlNuQQH.css","/assets/mermaid-3ZIDBTTL-D8CjRQta.css"]},"routes/api.rpc":{"id":"routes/api.rpc","parentId":"root","path":"api/rpc","hasAction":true,"hasLoader":true,"hasClientAction":false,"hasClientLoader":false,"hasClientMiddleware":false,"hasDefaultExport":false,"hasErrorBoundary":false,"module":"/assets/api.rpc-l0sNRNKZ.js","imports":[],"css":[]},"routes/api.stream.$streamId":{"id":"routes/api.stream.$streamId","parentId":"root","path":"api/stream/:streamId","hasAction":false,"hasLoader":true,"hasClientAction":false,"hasClientLoader":false,"hasClientMiddleware":false,"hasDefaultExport":false,"hasErrorBoundary":false,"module":"/assets/api.stream._streamId-l0sNRNKZ.js","imports":[],"css":[]}},"url":"/assets/manifest-157e28f1.js","version":"157e28f1"};

package/build/client/assets/{run-detail-DKz7lp2q.js → run-detail-BG_1K2Hq.js}

@@ -324,6 +324,33 @@ function getMiddleTruncateCopyTextFromSelectionText({ prefixText, selectionText,
   });
   return mappedText === null ? null : leading + mappedText + trailing;
 }
+const pendingMeasurements = /* @__PURE__ */ new Map();
+let measurementFrame = 0;
+function flushMeasurements() {
+  measurementFrame = 0;
+  const reads = [...pendingMeasurements.values()];
+  pendingMeasurements.clear();
+  const measures = reads.map((read) => read());
+  for (const measure of measures) {
+    measure == null ? void 0 : measure();
+  }
+}
+function scheduleMeasurement(key, { read, measure }) {
+  pendingMeasurements.set(key, () => {
+    const measurement = read();
+    return measurement === null ? null : () => measure(measurement);
+  });
+  if (measurementFrame === 0) {
+    measurementFrame = requestAnimationFrame(flushMeasurements);
+  }
+}
+function cancelMeasurement(key) {
+  pendingMeasurements.delete(key);
+  if (pendingMeasurements.size === 0 && measurementFrame !== 0) {
+    cancelAnimationFrame(measurementFrame);
+    measurementFrame = 0;
+  }
+}
 const useIsomorphicLayoutEffect = typeof window === "undefined" ? reactExports.useEffect : reactExports.useLayoutEffect;
 function createFullState(value, graphemes) {
   return {
@@ -341,7 +368,13 @@ function useMiddleTruncate(value) {
   const ref = reactExports.useRef(null);
   const measureRef = reactExports.useRef(null);
   const [state, setState] = reactExports.useState(() => fullState);
-  const rafRef = reactExports.useRef(0);
+  const measurementKeyRef = reactExports.useRef({});
+  const textMeasurementCacheRef = reactExports.useRef({
+    typography: "",
+    value,
+    widths: /* @__PURE__ */ new Map()
+  });
+  const lastMeasurementRef = reactExports.useRef(null);
   const updateState = reactExports.useCallback((nextState) => {
     setState((currentState) => {
       if (currentState.displayText === nextState.displayText && currentState.isTruncated === nextState.isTruncated && currentState.prefixText === nextState.prefixText && currentState.prefixGraphemeCount === nextState.prefixGraphemeCount && currentState.suffixText === nextState.suffixText && currentState.suffixGraphemeCount === nextState.suffixGraphemeCount) {
@@ -350,26 +383,68 @@ function useMiddleTruncate(value) {
       return nextState;
     });
   }, []);
-  const recalculate = reactExports.useCallback(() => {
+  const readMeasurement = reactExports.useCallback(() => {
     const el = ref.current;
     const measureEl = measureRef.current;
     if (!el || !measureEl)
+      return null;
+    const availableWidth = el.clientWidth;
+    const style = getComputedStyle(measureEl);
+    return {
+      availableWidth,
+      typography: [
+        style.fontFamily,
+        style.fontFeatureSettings,
+        style.fontKerning,
+        style.fontSize,
+        style.fontStretch,
+        style.fontStyle,
+        style.fontVariationSettings,
+        style.fontWeight,
+        style.letterSpacing,
+        style.textTransform
+      ].join("\0")
+    };
+  }, []);
+  const recalculate = reactExports.useCallback(({ availableWidth, typography }) => {
+    const measureEl = measureRef.current;
+    if (!measureEl)
       return;
-    const available = el.clientWidth;
-    if (available <= 0) {
+    const lastMeasurement = lastMeasurementRef.current;
+    if ((lastMeasurement == null ? void 0 : lastMeasurement.availableWidth) === availableWidth && lastMeasurement.typography === typography && lastMeasurement.value === value) {
+      return;
+    }
+    lastMeasurementRef.current = {
+      availableWidth,
+      typography,
+      value
+    };
+    if (availableWidth <= 0) {
       updateState(fullState);
       return;
     }
+    const textMeasurementCache = textMeasurementCacheRef.current;
+    if (textMeasurementCache.typography !== typography || textMeasurementCache.value !== value) {
+      textMeasurementCache.typography = typography;
+      textMeasurementCache.value = value;
+      textMeasurementCache.widths.clear();
+    }
     const measure = (text) => {
+      const cachedWidth = textMeasurementCache.widths.get(text);
+      if (cachedWidth !== void 0) {
+        return cachedWidth;
+      }
       measureEl.textContent = text;
-      return measureEl.scrollWidth;
+      const width = measureEl.scrollWidth;
+      textMeasurementCache.widths.set(text, width);
+      return width;
     };
     const fullWidth = measure(value);
-    if (fullWidth <= available) {
+    if (fullWidth <= availableWidth) {
       updateState(fullState);
       return;
     }
-    const result = middleTruncate(graphemes, available, measure, fullWidth);
+    const result = middleTruncate(graphemes, availableWidth, measure, fullWidth);
     updateState({
       displayText: result.text,
       isTruncated: result.truncated,
@@ -380,33 +455,45 @@ function useMiddleTruncate(value) {
     });
   }, [fullState, graphemes, updateState, value]);
   useIsomorphicLayoutEffect(() => {
-    recalculate();
-  }, [recalculate]);
+    const measurement = readMeasurement();
+    if (measurement) {
+      recalculate(measurement);
+    }
+  }, [readMeasurement, recalculate]);
   reactExports.useEffect(() => {
     var _a;
     const el = ref.current;
     if (!el)
       return;
-    const debouncedRecalc = () => {
-      cancelAnimationFrame(rafRef.current);
-      rafRef.current = requestAnimationFrame(recalculate);
+    const measurementKey = measurementKeyRef.current;
+    const scheduleRecalculation = () => {
+      scheduleMeasurement(measurementKey, {
+        read: readMeasurement,
+        measure: recalculate
+      });
     };
-    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(debouncedRecalc) : null;
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(scheduleRecalculation) : null;
     ro == null ? void 0 : ro.observe(el);
-    window.addEventListener("resize", debouncedRecalc);
+    if (!ro) {
+      window.addEventListener("resize", scheduleRecalculation);
+    }
     const onFontsLoaded = () => {
-      debouncedRecalc();
+      textMeasurementCacheRef.current.widths.clear();
+      lastMeasurementRef.current = null;
+      scheduleRecalculation();
     };
     const fontSet = "fonts" in document ? document.fonts : null;
     (_a = fontSet == null ? void 0 : fontSet.addEventListener) == null ? void 0 : _a.call(fontSet, "loadingdone", onFontsLoaded);
     return () => {
       var _a2;
       ro == null ? void 0 : ro.disconnect();
-      window.removeEventListener("resize", debouncedRecalc);
-      cancelAnimationFrame(rafRef.current);
+      if (!ro) {
+        window.removeEventListener("resize", scheduleRecalculation);
+      }
+      cancelMeasurement(measurementKey);
       (_a2 = fontSet == null ? void 0 : fontSet.removeEventListener) == null ? void 0 : _a2.call(fontSet, "loadingdone", onFontsLoaded);
     };
-  }, [recalculate]);
+  }, [readMeasurement, recalculate]);
   return {
     ref,
     measureRef,
@@ -422,12 +509,18 @@ function getRangeOffsets(container, range) {
   if (!container.contains(range.startContainer) || !container.contains(range.endContainer)) {
     return null;
   }
-  const startRange = document.createRange();
-  startRange.selectNodeContents(container);
-  startRange.setEnd(range.startContainer, range.startOffset);
-  const endRange = document.createRange();
-  endRange.selectNodeContents(container);
-  endRange.setEnd(range.endContainer, range.endOffset);
+  let startRange;
+  let endRange;
+  try {
+    startRange = document.createRange();
+    startRange.selectNodeContents(container);
+    startRange.setEnd(range.startContainer, range.startOffset);
+    endRange = document.createRange();
+    endRange.selectNodeContents(container);
+    endRange.setEnd(range.endContainer, range.endOffset);
+  } catch {
+    return null;
+  }
   return {
     end: endRange.toString().length,
     start: startRange.toString().length
@@ -449,7 +542,7 @@ function MiddleTruncate({ value, className, onCopy: onCopyProp, ...props }) {
     const range = selection.getRangeAt(0);
     const visibleEl = visibleRef.current;
     let copyText = null;
-    if (e.currentTarget.contains(range.startContainer) && e.currentTarget.contains(range.endContainer) && visibleEl) {
+    if (selectionText.includes(ELLIPSIS) && e.currentTarget.contains(range.startContainer) && e.currentTarget.contains(range.endContainer) && visibleEl) {
       const offsets = getRangeOffsets(visibleEl, range);
       if (offsets) {
         copyText = getMiddleTruncateCopyText({