@workflow/web-shared 5.0.0-beta.3 → 5.0.0-beta.31

package/src/components/new-trace-viewer/components/middle-truncate/truncate.ts

@@ -0,0 +1,132 @@
+const ELLIPSIS = '…';
+const MIN_START = 3;
+const MIN_END = 3;
+const MIN_KEPT = MIN_START + MIN_END;
+const graphemeSegmenter =
+  typeof Intl !== 'undefined' && 'Segmenter' in Intl
+    ? new Intl.Segmenter(undefined, { granularity: 'grapheme' })
+    : null;
+
+type MeasureFn = (text: string) => number;
+
+/**
+ * Splits a string into grapheme clusters using Intl.Segmenter.
+ * Falls back to Array.from for environments without Intl.Segmenter.
+ */
+function toGraphemes(text: string): string[] {
+  if (graphemeSegmenter) {
+    return [...graphemeSegmenter.segment(text)].map((s) => s.segment);
+  }
+  return Array.from(text);
+}
+
+interface TruncateResult {
+  prefixText: string;
+  prefixGraphemeCount: number;
+  suffixText: string;
+  suffixGraphemeCount: number;
+  text: string;
+  truncated: boolean;
+}
+
+function buildCandidate(graphemes: string[], kept: number): TruncateResult {
+  if (kept <= 0) {
+    return {
+      prefixText: '',
+      prefixGraphemeCount: 0,
+      suffixText: '',
+      suffixGraphemeCount: 0,
+      text: ELLIPSIS,
+      truncated: true,
+    };
+  }
+
+  const suffixGraphemeCount =
+    kept >= MIN_KEPT
+      ? Math.max(MIN_END, Math.floor(kept / 2))
+      : Math.floor(kept / 2);
+  const prefixGraphemeCount = kept - suffixGraphemeCount;
+  const prefixText = graphemes.slice(0, prefixGraphemeCount).join('');
+  const suffixText =
+    suffixGraphemeCount > 0
+      ? graphemes.slice(-suffixGraphemeCount).join('')
+      : '';
+
+  return {
+    prefixText,
+    prefixGraphemeCount,
+    suffixText,
+    suffixGraphemeCount,
+    text: prefixText + ELLIPSIS + suffixText,
+    truncated: true,
+  };
+}
+
+/**
+ * Middle-truncates a string so `prefix...suffix` fits within `availableWidth`.
+ * Uses binary search over grapheme clusters with an injectable measure function.
+ */
+function middleTruncate(
+  graphemes: string[],
+  availableWidth: number,
+  measure: MeasureFn,
+  fullWidth?: number
+): TruncateResult {
+  const fullText = graphemes.join('');
+  const resolvedFullWidth = fullWidth ?? measure(fullText);
+
+  if (availableWidth <= 0 || graphemes.length === 0) {
+    return {
+      prefixText: fullText,
+      prefixGraphemeCount: graphemes.length,
+      suffixText: '',
+      suffixGraphemeCount: 0,
+      text: fullText,
+      truncated: false,
+    };
+  }
+
+  if (resolvedFullWidth <= availableWidth) {
+    return {
+      prefixText: fullText,
+      prefixGraphemeCount: graphemes.length,
+      suffixText: '',
+      suffixGraphemeCount: 0,
+      text: fullText,
+      truncated: false,
+    };
+  }
+
+  // Binary search for the maximum number of kept graphemes
+  let lo = 0;
+  let hi = graphemes.length - 1;
+  let best = -1;
+
+  while (lo <= hi) {
+    const mid = (lo + hi) >>> 1;
+    const candidate = buildCandidate(graphemes, mid);
+
+    if (measure(candidate.text) <= availableWidth) {
+      best = mid;
+      lo = mid + 1;
+    } else {
+      hi = mid - 1;
+    }
+  }
+
+  if (best === -1) {
+    return {
+      prefixText: '',
+      prefixGraphemeCount: 0,
+      suffixText: '',
+      suffixGraphemeCount: 0,
+      text: '',
+      truncated: true,
+    };
+  }
+
+  return buildCandidate(graphemes, best);
+}
+
+export { middleTruncate, toGraphemes, ELLIPSIS, MIN_START, MIN_END };
+export type { MeasureFn, TruncateResult };

package/src/components/new-trace-viewer/components/middle-truncate/use-middle-truncate.ts

@@ -0,0 +1,167 @@
+'use client';
+
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { middleTruncate, toGraphemes } from './truncate';
+
+const useIsomorphicLayoutEffect =
+  typeof window === 'undefined' ? useEffect : useLayoutEffect;
+
+interface MiddleTruncateState {
+  displayText: string;
+  isTruncated: boolean;
+  prefixGraphemeCount: number;
+  prefixText: string;
+  suffixGraphemeCount: number;
+  suffixText: string;
+}
+
+function createFullState(
+  value: string,
+  graphemes: string[]
+): MiddleTruncateState {
+  return {
+    displayText: value,
+    isTruncated: false,
+    prefixGraphemeCount: graphemes.length,
+    prefixText: value,
+    suffixGraphemeCount: 0,
+    suffixText: '',
+  };
+}
+
+/**
+ * Middle-truncation logic. Returns refs to attach to the container and measurement elements, plus the truncated display text. Recalculates on resize, font loading, and value changes.
+ * Powers the `<MiddleTruncate>` (`<span>`) component.
+ *
+ * Documentation: [Geist Middle Truncate](https://vercel.com/geist/middle-truncate)
+ *
+ * @param value - Full text string to truncate.
+ */
+function useMiddleTruncate(value: string): {
+  ref: React.RefObject<HTMLSpanElement | null>;
+  measureRef: React.RefObject<HTMLSpanElement | null>;
+  displayText: string;
+  isTruncated: boolean;
+  prefixGraphemeCount: number;
+  prefixText: string;
+  suffixGraphemeCount: number;
+  suffixText: string;
+} {
+  const graphemes = useMemo(() => toGraphemes(value), [value]);
+  const fullState = useMemo(
+    () => createFullState(value, graphemes),
+    [graphemes, value]
+  );
+  const ref = useRef<HTMLSpanElement | null>(null);
+  const measureRef = useRef<HTMLSpanElement | null>(null);
+  const [state, setState] = useState<MiddleTruncateState>(() => fullState);
+  const rafRef = useRef<number>(0);
+
+  const updateState = useCallback((nextState: MiddleTruncateState) => {
+    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
+      ) {
+        return currentState;
+      }
+
+      return nextState;
+    });
+  }, []);
+
+  const recalculate = useCallback(() => {
+    const el = ref.current;
+    const measureEl = measureRef.current;
+    if (!el || !measureEl) return;
+
+    const available = el.clientWidth;
+
+    if (available <= 0) {
+      updateState(fullState);
+      return;
+    }
+
+    const measure = (text: string): number => {
+      measureEl.textContent = text;
+      return measureEl.scrollWidth;
+    };
+
+    const fullWidth = measure(value);
+
+    if (fullWidth <= available) {
+      updateState(fullState);
+      return;
+    }
+
+    const result = middleTruncate(graphemes, available, measure, fullWidth);
+    updateState({
+      displayText: result.text,
+      isTruncated: result.truncated,
+      prefixGraphemeCount: result.prefixGraphemeCount,
+      prefixText: result.prefixText,
+      suffixGraphemeCount: result.suffixGraphemeCount,
+      suffixText: result.suffixText,
+    });
+  }, [fullState, graphemes, updateState, value]);
+
+  // Measure on mount and when value changes - before paint
+  useIsomorphicLayoutEffect(() => {
+    recalculate();
+  }, [recalculate]);
+
+  // ResizeObserver + font loading for ongoing responsiveness
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const debouncedRecalc = (): void => {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(recalculate);
+    };
+
+    const ro =
+      typeof ResizeObserver !== 'undefined'
+        ? new ResizeObserver(debouncedRecalc)
+        : null;
+    ro?.observe(el);
+    window.addEventListener('resize', debouncedRecalc);
+
+    const onFontsLoaded = (): void => {
+      debouncedRecalc();
+    };
+    const fontSet = 'fonts' in document ? document.fonts : null;
+    fontSet?.addEventListener?.('loadingdone', onFontsLoaded);
+
+    return () => {
+      ro?.disconnect();
+      window.removeEventListener('resize', debouncedRecalc);
+      cancelAnimationFrame(rafRef.current);
+      fontSet?.removeEventListener?.('loadingdone', onFontsLoaded);
+    };
+  }, [recalculate]);
+
+  return {
+    ref,
+    measureRef,
+    displayText: state.displayText,
+    isTruncated: state.isTruncated,
+    prefixGraphemeCount: state.prefixGraphemeCount,
+    prefixText: state.prefixText,
+    suffixGraphemeCount: state.suffixGraphemeCount,
+    suffixText: state.suffixText,
+  };
+}
+
+export { useMiddleTruncate };