@workflow/web-shared 5.0.0-beta.4 → 5.0.0-beta.41

package/src/components/trace-viewer/components/span-strategies.ts

@@ -1,205 +0,0 @@
-import type { RefObject } from 'react';
-import type { RootNode, ScrollSnapshot, VisibleSpan } from '../types';
-import { MARKER_HEIGHT, ROW_HEIGHT, ROW_PADDING } from '../util/constants';
-
-/**
- * The resource type of a workflow span, read from span.attributes.resource.
- * Falls back to 'default' for non-workflow (generic OTEL) spans.
- */
-export type ResourceType = 'run' | 'step' | 'hook' | 'sleep' | 'default';
-
-/** Minimum rendered width so very short spans are always visible */
-const MIN_SPAN_WIDTH = 4;
-
-/**
- * Layout result computed by a span strategy. Controls how the span
- * is sized and positioned in the timeline.
- */
-export interface SpanLayout {
-  /** The rendered width in pixels */
-  width: number;
-  /** The actual duration-based width (before min-width clamping) */
-  actualWidth: number;
-  /** The rendered height in pixels */
-  height: number;
-  /** The y position in pixels */
-  top: number;
-  /** The x position in pixels (from left) */
-  left: number;
-  /** Whether the span is considered "small" (< 64px actual width) */
-  isSmall: boolean;
-  /** Whether the span is considered "huge" (>= 500px actual width) */
-  isHuge: boolean;
-  /** Whether the span is currently hovered (with hover eligibility) */
-  isHovered: boolean;
-  /** Whether the span is expanded (hovered or selected) — controls sizing */
-  isExpanded: boolean;
-  /** Whether the span is near the right side of the visible area */
-  isNearRightSide: boolean;
-}
-
-/**
- * Reads the resource type from a span's attributes.
- */
-export function getResourceType(node: VisibleSpan): ResourceType {
-  const resource = node.span.attributes?.resource;
-  if (
-    resource === 'run' ||
-    resource === 'step' ||
-    resource === 'hook' ||
-    resource === 'sleep'
-  ) {
-    return resource;
-  }
-  return 'default';
-}
-
-// ──────────────────────────────────────────────────────────────────────────
-// Shared helpers
-// ──────────────────────────────────────────────────────────────────────────
-
-function computeIsSmall(actualWidth: number): boolean {
-  return actualWidth < 64;
-}
-
-function computeIsHuge(actualWidth: number): boolean {
-  return actualWidth >= 500;
-}
-
-function computeIsHovered(node: VisibleSpan, isHuge: boolean): boolean {
-  return node.isHovered && !isHuge && node.isHighlighted !== false;
-}
-
-function computeIsNearRightSide(
-  node: VisibleSpan,
-  root: RootNode,
-  scrollSnapshotRef: RefObject<ScrollSnapshot | undefined>,
-  isHovered: boolean
-): boolean {
-  if (!isHovered) return false;
-
-  let visibleDuration = root.duration;
-  let visibleEndTime = root.endTime;
-  const snapshot = scrollSnapshotRef.current;
-  if (snapshot) {
-    visibleDuration = snapshot.endTime - snapshot.startTime;
-    visibleEndTime = snapshot.endTime;
-  }
-  return visibleEndTime - node.startTime < 0.25 * visibleDuration;
-}
-
-// ──────────────────────────────────────────────────────────────────────────
-// Default layout (used by step, hook, run, default — all behave the same today)
-// ──────────────────────────────────────────────────────────────────────────
-
-function computeDefaultLayout(
-  node: VisibleSpan,
-  root: RootNode,
-  scale: number,
-  scrollSnapshotRef: RefObject<ScrollSnapshot | undefined>
-): SpanLayout {
-  const left = (node.startTime - root.startTime) * scale;
-  let top = MARKER_HEIGHT + (ROW_HEIGHT + ROW_PADDING) * node.row;
-  const actualWidth = node.duration * scale;
-  const width = Math.max(actualWidth, MIN_SPAN_WIDTH);
-  let height = ROW_HEIGHT;
-
-  const isHuge = computeIsHuge(actualWidth);
-  const isSmall = computeIsSmall(actualWidth);
-  const isHovered = computeIsHovered(node, isHuge);
-  const isExpanded = isHovered || Boolean(node.isSelected);
-
-  if (isSmall && !isExpanded) {
-    height *= 0.4;
-    top += (ROW_HEIGHT - height) * 0.5;
-  }
-
-  const isNearRightSide = computeIsNearRightSide(
-    node,
-    root,
-    scrollSnapshotRef,
-    isExpanded
-  );
-
-  return {
-    width,
-    actualWidth,
-    height,
-    top,
-    left,
-    isSmall,
-    isHuge,
-    isHovered,
-    isExpanded,
-    isNearRightSide,
-  };
-}
-
-// ──────────────────────────────────────────────────────────────────────────
-// Per-type layout functions
-// Each returns the same result today but provides a clear extension point.
-// ──────────────────────────────────────────────────────────────────────────
-
-export function getRunLayout(
-  node: VisibleSpan,
-  root: RootNode,
-  scale: number,
-  scrollSnapshotRef: RefObject<ScrollSnapshot | undefined>
-): SpanLayout {
-  return computeDefaultLayout(node, root, scale, scrollSnapshotRef);
-}
-
-export function getStepLayout(
-  node: VisibleSpan,
-  root: RootNode,
-  scale: number,
-  scrollSnapshotRef: RefObject<ScrollSnapshot | undefined>
-): SpanLayout {
-  return computeDefaultLayout(node, root, scale, scrollSnapshotRef);
-}
-
-export function getHookLayout(
-  node: VisibleSpan,
-  root: RootNode,
-  scale: number,
-  scrollSnapshotRef: RefObject<ScrollSnapshot | undefined>
-): SpanLayout {
-  return computeDefaultLayout(node, root, scale, scrollSnapshotRef);
-}
-
-export function getSleepLayout(
-  node: VisibleSpan,
-  root: RootNode,
-  scale: number,
-  scrollSnapshotRef: RefObject<ScrollSnapshot | undefined>
-): SpanLayout {
-  return computeDefaultLayout(node, root, scale, scrollSnapshotRef);
-}
-
-// ──────────────────────────────────────────────────────────────────────────
-// Dispatcher
-// ──────────────────────────────────────────────────────────────────────────
-
-/**
- * Computes the layout for a span based on its resource type.
- */
-export function getSpanLayout(
-  resourceType: ResourceType,
-  node: VisibleSpan,
-  root: RootNode,
-  scale: number,
-  scrollSnapshotRef: RefObject<ScrollSnapshot | undefined>
-): SpanLayout {
-  switch (resourceType) {
-    case 'run':
-      return getRunLayout(node, root, scale, scrollSnapshotRef);
-    case 'step':
-      return getStepLayout(node, root, scale, scrollSnapshotRef);
-    case 'hook':
-      return getHookLayout(node, root, scale, scrollSnapshotRef);
-    case 'sleep':
-      return getSleepLayout(node, root, scale, scrollSnapshotRef);
-    default:
-      return computeDefaultLayout(node, root, scale, scrollSnapshotRef);
-  }
-}

package/src/components/trace-viewer/components/ui.tsx

@@ -1,156 +0,0 @@
-'use client';
-
-import { clsx } from 'clsx';
-import type { AnchorHTMLAttributes, ReactNode } from 'react';
-import styles from '../trace-viewer.module.css';
-
-// Color token mapping helper
-const colorTokenMap: Record<string, string> = {
-  'gray-700': 'var(--ds-gray-700)',
-  'gray-900': 'var(--ds-gray-900)',
-};
-
-export function IconCross({
-  size = 16,
-  color = 'gray-700',
-}: {
-  size?: number;
-  color?: string;
-}): ReactNode {
-  const style = { color: colorTokenMap[color] || color } as const;
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      style={style}
-      aria-hidden
-    >
-      <title>Cross</title>
-      <path
-        d="M6 6l12 12M18 6L6 18"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-}
-
-export function IconChevronDown({ size = 16 }: { size?: number }): ReactNode {
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      aria-hidden
-      className={styles.detailHeadingIcon}
-    >
-      <title>Chevron Down</title>
-      <path
-        d="M6 9l6 6 6-6"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-export function IconExternalSmall({
-  size = 16,
-  color = 'gray-900',
-}: {
-  size?: number;
-  color?: string;
-}): ReactNode {
-  const style = { color: colorTokenMap[color] || color } as const;
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      style={style}
-      aria-hidden
-    >
-      <title>External Small</title>
-      <path
-        d="M14 4h6m0 0v6m0-6L10 14"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M20 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h4"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-}
-
-export function Link(
-  props: AnchorHTMLAttributes<HTMLAnchorElement> & { as?: 'a' | 'span' }
-): ReactNode {
-  const { as: asProp, className, href, children, ...rest } = props;
-  const Element: any = asProp || 'a';
-  if (Element === 'span' || !href) {
-    return (
-      <span className={className} {...rest}>
-        {children}
-      </span>
-    );
-  }
-  return (
-    <a className={className} href={href} {...rest}>
-      {children}
-    </a>
-  );
-}
-
-export function ButtonLink(
-  props: AnchorHTMLAttributes<HTMLAnchorElement> & {
-    size?: 'small' | 'medium' | 'large';
-  }
-): ReactNode {
-  const { className, children, size: _size, ...rest } = props;
-  return (
-    <a {...rest} className={clsx(styles.buttonLink, className)}>
-      {children}
-    </a>
-  );
-}
-
-export function Note({
-  children,
-  className,
-}: {
-  children: ReactNode;
-  className?: string;
-}): ReactNode {
-  return <div className={clsx(styles.note, className)}>{children}</div>;
-}
-
-export function Skeleton({
-  width,
-  height,
-  rounded,
-}: {
-  width: number;
-  height: number;
-  rounded?: boolean;
-}): ReactNode {
-  return (
-    <span
-      className={clsx(styles.skeleton, rounded && styles.skeletonRounded)}
-      style={{ width, height }}
-      aria-hidden
-    />
-  );
-}

package/src/components/trace-viewer/components/zoom-button.tsx

@@ -1,61 +0,0 @@
-'use client';
-import { type ReactNode, useCallback } from 'react';
-import { useTraceViewer } from '../context';
-import styles from '../trace-viewer.module.css';
-import { IconMinus, IconZoomIn, IconZoomOut } from './zoom-icons';
-
-export function ZoomButton(): ReactNode {
-  const { dispatch } = useTraceViewer();
-
-  const onZoomIn = useCallback((): void => {
-    dispatch({
-      type: 'adjustScaleRatio',
-      direction: 1,
-    });
-  }, [dispatch]);
-
-  const onZoomOut = useCallback((): void => {
-    dispatch({
-      type: 'adjustScaleRatio',
-      direction: -1,
-    });
-  }, [dispatch]);
-
-  const onResetZoom = useCallback((): void => {
-    dispatch({
-      type: 'adjustScaleRatio',
-      direction: 0,
-    });
-  }, [dispatch]);
-
-  return (
-    <div className={styles.zoomButtonGroup}>
-      <button
-        aria-label="Zoom Out"
-        className={styles.zoomButton}
-        onClick={onZoomOut}
-        type="button"
-      >
-        <IconZoomOut size={18} />
-      </button>
-      <div className={styles.divider} />
-      <button
-        aria-label="Reset Zoom"
-        className={styles.zoomButton}
-        onClick={onResetZoom}
-        type="button"
-      >
-        <IconMinus size={18} />
-      </button>
-      <div className={styles.divider} />
-      <button
-        aria-label="Zoom In"
-        className={styles.zoomButton}
-        onClick={onZoomIn}
-        type="button"
-      >
-        <IconZoomIn size={18} />
-      </button>
-    </div>
-  );
-}

package/src/components/trace-viewer/components/zoom-icons.tsx

@@ -1,65 +0,0 @@
-import type { ReactNode } from 'react';
-
-export function IconZoomIn({ size = 16 }: { size?: number }): ReactNode {
-  return (
-    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
-      <title>Zoom In</title>
-      <path
-        d="M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"
-        stroke="currentColor"
-        strokeWidth="2"
-      />
-      <path
-        d="M11 8v6M8 11h6"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-      />
-      <path
-        d="M20 20l-3.5-3.5"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-}
-
-export function IconZoomOut({ size = 16 }: { size?: number }): ReactNode {
-  return (
-    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
-      <title>Zoom Out</title>
-      <path
-        d="M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"
-        stroke="currentColor"
-        strokeWidth="2"
-      />
-      <path
-        d="M8 11h6"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-      />
-      <path
-        d="M20 20l-3.5-3.5"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-}
-
-export function IconMinus({ size = 16 }: { size?: number }): ReactNode {
-  return (
-    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
-      <title>Minus</title>
-      <path
-        d="M6 12h12"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-}

package/src/components/trace-viewer/index.tsx

@@ -1,4 +0,0 @@
-export { PanelResizer } from './components/span-detail-panel';
-export { TraceViewerContextProvider, useTraceViewer } from './context';
-export * from './trace-viewer';
-export type { Trace } from './types';