@workflow/web-shared 5.0.0-beta.1 → 5.0.0-beta.11

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 };

package/src/components/new-trace-viewer/components/split-pane.tsx

@@ -0,0 +1,198 @@
+'use client';
+
+import {
+  Children,
+  type ReactNode,
+  type PointerEvent as ReactPointerEvent,
+  type RefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { cn } from '../../../lib/utils';
+
+const GUTTER_PX = 1;
+const MIN_PX = 50;
+const DEFAULT_START_PX = 340;
+
+export function Divider() {
+  return <div aria-hidden className="h-full w-px shrink-0 bg-gray-alpha-400" />;
+}
+
+export interface SplitPaneProps {
+  children: ReactNode;
+  className?: string;
+  /** Fixed pixel width for the start (left) pane. Default 220. */
+  defaultStartWidth?: number;
+  /** Fixed (non-scrolling) header rendered above the start pane. */
+  startHeader?: ReactNode;
+  /** Fixed (non-scrolling) header rendered above the end pane. */
+  endHeader?: ReactNode;
+  scrollContainerRef?: RefObject<HTMLDivElement | null>;
+}
+
+export function SplitPane({
+  children,
+  className,
+  defaultStartWidth = DEFAULT_START_PX,
+  startHeader,
+  endHeader,
+  scrollContainerRef,
+}: SplitPaneProps) {
+  const parts = Children.toArray(children);
+  if (parts.length !== 2) {
+    throw new Error('SplitPane expects exactly two children');
+  }
+  const [start, end] = parts;
+
+  const [startPx, setStartPx] = useState(defaultStartWidth);
+  const [isDragging, setIsDragging] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const gutterRef = useRef<HTMLDivElement>(null);
+  const rafRef = useRef<number | null>(null);
+  const pendingPx = useRef(defaultStartWidth);
+  const pointerIdRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, []);
+
+  const setContainerRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      containerRef.current = node;
+      if (scrollContainerRef) {
+        scrollContainerRef.current = node;
+      }
+    },
+    [scrollContainerRef]
+  );
+
+  const clampPx = useCallback((px: number) => {
+    const el = containerRef.current;
+    if (!el) return px;
+    const maxPx = el.getBoundingClientRect().width - MIN_PX - GUTTER_PX;
+    return Math.min(maxPx, Math.max(MIN_PX, px));
+  }, []);
+
+  useEffect(() => {
+    if (!isDragging) return;
+
+    const onPointerMove = (e: globalThis.PointerEvent) => {
+      if (e.pointerId !== pointerIdRef.current) return;
+      const container = containerRef.current;
+      if (!container) return;
+      const rect = container.getBoundingClientRect();
+      pendingPx.current = clampPx(e.clientX - rect.left);
+      if (!rafRef.current) {
+        rafRef.current = requestAnimationFrame(() => {
+          rafRef.current = null;
+          setStartPx(pendingPx.current);
+        });
+      }
+    };
+
+    const onPointerUp = (e: globalThis.PointerEvent) => {
+      if (e.pointerId !== pointerIdRef.current) return;
+      const gutter = gutterRef.current;
+      if (gutter?.hasPointerCapture(e.pointerId)) {
+        gutter.releasePointerCapture(e.pointerId);
+      }
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+      pointerIdRef.current = null;
+      setIsDragging(false);
+    };
+
+    document.addEventListener('pointermove', onPointerMove);
+    document.addEventListener('pointerup', onPointerUp);
+    document.addEventListener('pointercancel', onPointerUp);
+
+    return () => {
+      document.removeEventListener('pointermove', onPointerMove);
+      document.removeEventListener('pointerup', onPointerUp);
+      document.removeEventListener('pointercancel', onPointerUp);
+    };
+  }, [isDragging, clampPx]);
+
+  const handlePointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {
+    e.currentTarget.setPointerCapture(e.pointerId);
+    pointerIdRef.current = e.pointerId;
+    setIsDragging(true);
+  };
+
+  const handleLostPointerCapture = () => {
+    pointerIdRef.current = null;
+    setIsDragging(false);
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+  };
+
+  const colTemplate = `${startPx}px ${GUTTER_PX}px minmax(${MIN_PX}px, 1fr)`;
+  const hasHeaders = startHeader != null || endHeader != null;
+
+  const gutter = (
+    <div
+      ref={gutterRef}
+      className="relative z-20 isolate flex shrink-0 cursor-col-resize justify-center"
+      onPointerDown={handlePointerDown}
+      onLostPointerCapture={handleLostPointerCapture}
+    >
+      <span
+        className="pointer-events-none relative z-10 h-full w-px shrink-0 bg-gray-alpha-400"
+        aria-hidden
+      />
+    </div>
+  );
+
+  if (hasHeaders) {
+    return (
+      <div className={cn('flex flex-col h-full min-h-0', className)}>
+        <div
+          className="shrink-0 grid"
+          style={{ gridTemplateColumns: colTemplate }}
+        >
+          <div>{startHeader}</div>
+          <div className="flex justify-center">
+            <span className="h-full w-px bg-gray-alpha-400" aria-hidden />
+          </div>
+          <div>{endHeader}</div>
+        </div>
+        <div
+          ref={setContainerRef}
+          className={cn(
+            'grid flex-1 min-h-0 overflow-x-hidden overflow-y-auto',
+            isDragging && 'select-none'
+          )}
+          style={{ gridTemplateColumns: colTemplate }}
+        >
+          {start}
+          {gutter}
+          {end}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={setContainerRef}
+      className={cn(
+        'grid h-full min-h-0 content-start overflow-x-hidden overflow-y-auto',
+        isDragging && 'select-none',
+        className
+      )}
+      style={{ gridTemplateColumns: colTemplate, height: '100%' }}
+    >
+      {start}
+      {gutter}
+      {end}
+    </div>
+  );
+}