@workflow/web 5.0.0-beta.14 → 5.0.0-beta.16

package/build/client/assets/{mermaid-3ZIDBTTL-C02sm-ZS.js → mermaid-3ZIDBTTL-DQJ4rkIZ.js}

@@ -1,4 +1,4 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/encryption-g14N5vQl.js","assets/index-B6-SzLmT.js","assets/index-BXZSIDEp.js","assets/highlighted-body-B3W2YXNL-BEqiCpJd.js"])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/encryption-g14N5vQl.js","assets/index-B6-SzLmT.js","assets/index-BXZSIDEp.js","assets/highlighted-body-B3W2YXNL-QKf7Yrcl.js"])))=>i.map(i=>d[i]);
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -2376,7 +2376,7 @@ var Arrow$2 = reactExports.forwardRef((props, forwardedRef) => {
   );
 });
 Arrow$2.displayName = NAME$1;
-var Root$1 = Arrow$2;
+var Root$2 = Arrow$2;
 function useSize(element2) {
   const [size2, setSize] = reactExports.useState(void 0);
   useLayoutEffect2(() => {
@@ -2623,7 +2623,7 @@ var PopperArrow = reactExports.forwardRef(function PopperArrow2(props, forwarded
           visibility: contentContext.shouldHideArrow ? "hidden" : void 0
         },
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Root$1,
+          Root$2,
           {
             ...arrowProps,
             ref: forwardedRef,
@@ -2908,7 +2908,7 @@ var VisuallyHidden = reactExports.forwardRef(
   }
 );
 VisuallyHidden.displayName = NAME;
-var Root = VisuallyHidden;
+var Root$1 = VisuallyHidden;
 var [createTooltipContext] = createContextScope("Tooltip", [
   createPopperScope
 ]);
@@ -3240,7 +3240,7 @@ var TooltipContentImpl = reactExports.forwardRef(
             },
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(Slottable$1, { children: children2 }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(VisuallyHiddenContentContextProvider, { scope: __scopeTooltip, isInside: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Root, { id: context.contentId, role: "tooltip", children: ariaLabel || children2 }) })
+              /* @__PURE__ */ jsxRuntimeExports.jsx(VisuallyHiddenContentContextProvider, { scope: __scopeTooltip, isInside: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Root$1, { id: context.contentId, role: "tooltip", children: ariaLabel || children2 }) })
             ]
           }
         )
@@ -15311,10 +15311,12 @@ function _instanceof(cls, params = {}) {
 function date(params) {
   return /* @__PURE__ */ _coercedDate(ZodDate, params);
 }
-object({
+const RESERVED_ATTRIBUTE_KEY_PREFIX = "$";
+const AttributeChangeSchema = object({
   key: string$2(),
   value: union([string$2(), _null()])
 });
+const AttributeChangesSchema = array(AttributeChangeSchema);
 const BinarySerializedDataSchema = _instanceof(Uint8Array);
 const LegacySerializedDataSchemaV1 = any();
 const SerializedDataSchema = union([
@@ -15339,6 +15341,8 @@ const EventTypeSchema = _enum([
   "run_completed",
   "run_failed",
   "run_cancelled",
+  // Run attribute events
+  "attr_set",
   // Step lifecycle events
   "step_created",
   "step_completed",
@@ -15454,13 +15458,34 @@ const WaitCompletedEventSchema = BaseEventSchema.extend({
     resumeAt: date().optional()
   }).optional()
 });
+const AttributeWriterSchema = discriminatedUnion("type", [
+  object({
+    type: literal("workflow")
+  }),
+  object({
+    type: literal("step"),
+    stepId: string$2(),
+    attempt: number$2()
+  })
+]);
+const AttrSetEventSchema = BaseEventSchema.extend({
+  eventType: literal("attr_set"),
+  correlationId: string$2().optional(),
+  eventData: object({
+    changes: AttributeChangesSchema,
+    writer: AttributeWriterSchema,
+    allowReservedAttributes: literal(true).optional()
+  })
+});
 const RunCreatedEventSchema = BaseEventSchema.extend({
   eventType: literal("run_created"),
   eventData: object({
     deploymentId: string$2(),
     workflowName: string$2(),
     input: SerializedDataSchema,
-    executionContext: record(string$2(), any()).optional()
+    executionContext: record(string$2(), any()).optional(),
+    attributes: record(string$2(), string$2()).optional(),
+    allowReservedAttributes: literal(true).optional()
   })
 });
 const RunStartedEventSchema = BaseEventSchema.extend({
@@ -15469,7 +15494,9 @@ const RunStartedEventSchema = BaseEventSchema.extend({
     input: SerializedDataSchema.optional(),
     deploymentId: string$2().optional(),
     workflowName: string$2().optional(),
-    executionContext: record(string$2(), any()).optional()
+    executionContext: record(string$2(), any()).optional(),
+    attributes: record(string$2(), string$2()).optional(),
+    allowReservedAttributes: literal(true).optional()
   }).optional()
 });
 const RunCompletedEventSchema = BaseEventSchema.extend({
@@ -15501,6 +15528,7 @@ discriminatedUnion("eventType", [
   RunCompletedEventSchema,
   RunFailedEventSchema,
   RunCancelledEventSchema,
+  AttrSetEventSchema,
   // Step lifecycle events
   StepCreatedEventSchema,
   StepCompletedEventSchema,
@@ -15522,6 +15550,7 @@ const AllEventsSchema = discriminatedUnion("eventType", [
   RunCompletedEventSchema,
   RunFailedEventSchema,
   RunCancelledEventSchema,
+  AttrSetEventSchema,
   // Step lifecycle events
   StepCreatedEventSchema,
   StepCompletedEventSchema,
@@ -15568,7 +15597,15 @@ const RunInputSchema = object({
   deploymentId: string$2(),
   workflowName: string$2(),
   specVersion: number$2(),
-  executionContext: record(string$2(), any()).optional()
+  executionContext: record(string$2(), any()).optional(),
+  /** Initial plaintext run attributes, for resilient run creation. */
+  attributes: record(string$2(), string$2()).optional(),
+  /**
+   * Permits reserved `$`-prefixed keys in `attributes`, mirrored from the
+   * `start()` option so resilient run creation validates the same way as
+   * the original `run_created` attempt.
+   */
+  allowReservedAttributes: literal(true).optional()
 });
 const WorkflowInvokePayloadSchema = object({
   runId: string$2(),
@@ -17218,6 +17255,87 @@ const ToastContext = reactExports.createContext(defaultAdapter);
 function useToast() {
   return reactExports.useContext(ToastContext);
 }
+const falsyToString = (value) => typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
+const cx = clsx;
+const cva = (base, config2) => (props) => {
+  var _config_compoundVariants;
+  if ((config2 === null || config2 === void 0 ? void 0 : config2.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+  const { variants, defaultVariants } = config2;
+  const getVariantClassNames = Object.keys(variants).map((variant) => {
+    const variantProp = props === null || props === void 0 ? void 0 : props[variant];
+    const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
+    if (variantProp === null) return null;
+    const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
+    return variants[variant][variantKey];
+  });
+  const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param) => {
+    let [key, value] = param;
+    if (value === void 0) {
+      return acc;
+    }
+    acc[key] = value;
+    return acc;
+  }, {});
+  const getCompoundVariantClassNames = config2 === null || config2 === void 0 ? void 0 : (_config_compoundVariants = config2.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param) => {
+    let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
+    return Object.entries(compoundVariantOptions).every((param2) => {
+      let [key, value] = param2;
+      return Array.isArray(value) ? value.includes({
+        ...defaultVariants,
+        ...propsWithoutUndefined
+      }[key]) : {
+        ...defaultVariants,
+        ...propsWithoutUndefined
+      }[key] === value;
+    }) ? [
+      ...acc,
+      cvClass,
+      cvClassName
+    ] : acc;
+  }, []);
+  return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+};
+const buttonVariants$1 = cva([
+  "outline-none m-0 border-0 align-baseline no-underline group/trigger",
+  "relative cursor-pointer select-none transform translate-z-0",
+  "inline-flex max-w-full items-center justify-center gap-x-1 whitespace-nowrap rounded-md font-medium",
+  "!text-gray-100",
+  "bg-gray-1000",
+  "transition-[border-color,background,color,transform,box-shadow] duration-150 ease-in-out",
+  // Geist invert hover: literal fallbacks (no token dep, so it resolves in any
+  // consuming app), darkened via ancestor theme class without a registered variant.
+  "hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_22%))]",
+  "[.dark-theme_&]:hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_80%))]",
+  "[[data-theme=dark]_&]:hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_80%))]",
+  // Geist focus ring as arbitrary properties (no bare `outline`/ambiguous
+  // arbitrary-color utilities, which differ between Tailwind v3 and v4).
+  "focus-visible:[outline:2px_solid_var(--ds-focus-color)] focus-visible:[outline-offset:2px]",
+  // disabled styles
+  "disabled:cursor-not-allowed aria-disabled:cursor-not-allowed",
+  "disabled:bg-gray-100 disabled:!text-gray-700 disabled:hover:bg-gray-100",
+  "aria-disabled:bg-gray-100 aria-disabled:text-gray-700 aria-disabled:hover:bg-gray-100"
+], {
+  variants: {
+    variant: {
+      default: "",
+      secondary: "border border-gray-alpha-400 [--themed-bg:_var(--ds-background-100)] [--themed-fg:_var(--ds-gray-1000)] [--themed-hover-bg:_var(--ds-gray-alpha-200)]",
+      ghost: "[--themed-bg:_transparent] [--themed-fg:_var(--ds-gray-1000)] [--themed-hover-bg:_var(--ds-gray-alpha-100)]"
+    },
+    size: {
+      default: "h-10 px-4 text-[14px]",
+      sm: "h-8 px-3 text-[14px]",
+      xs: "h-6 px-1.5 py-0.5 text-button-12 rounded-[4px]",
+      icon: "h-8 w-8"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+function Button$1({ className, variant, size: size2, type = "button", ...props }) {
+  return jsxRuntimeExports.jsx("button", { type, className: cn$4(buttonVariants$1({ variant, size: size2, className })), ...props });
+}
 var __create = Object.create;
 var __defProp2 = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -18084,87 +18202,6 @@ const geistTheme = {
 };
 const inspectorThemeLight = geistTheme;
 const inspectorThemeDark = geistTheme;
-const falsyToString = (value) => typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
-const cx = clsx;
-const cva = (base, config2) => (props) => {
-  var _config_compoundVariants;
-  if ((config2 === null || config2 === void 0 ? void 0 : config2.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-  const { variants, defaultVariants } = config2;
-  const getVariantClassNames = Object.keys(variants).map((variant) => {
-    const variantProp = props === null || props === void 0 ? void 0 : props[variant];
-    const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
-    if (variantProp === null) return null;
-    const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
-    return variants[variant][variantKey];
-  });
-  const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param) => {
-    let [key, value] = param;
-    if (value === void 0) {
-      return acc;
-    }
-    acc[key] = value;
-    return acc;
-  }, {});
-  const getCompoundVariantClassNames = config2 === null || config2 === void 0 ? void 0 : (_config_compoundVariants = config2.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param) => {
-    let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
-    return Object.entries(compoundVariantOptions).every((param2) => {
-      let [key, value] = param2;
-      return Array.isArray(value) ? value.includes({
-        ...defaultVariants,
-        ...propsWithoutUndefined
-      }[key]) : {
-        ...defaultVariants,
-        ...propsWithoutUndefined
-      }[key] === value;
-    }) ? [
-      ...acc,
-      cvClass,
-      cvClassName
-    ] : acc;
-  }, []);
-  return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-};
-const buttonVariants$1 = cva([
-  "outline-none m-0 border-0 align-baseline no-underline group/trigger",
-  "relative cursor-pointer select-none transform translate-z-0",
-  "inline-flex max-w-full items-center justify-center gap-x-1 whitespace-nowrap rounded-md font-medium",
-  "!text-gray-100",
-  "bg-gray-1000",
-  "transition-[border-color,background,color,transform,box-shadow] duration-150 ease-in-out",
-  // Geist invert hover: literal fallbacks (no token dep, so it resolves in any
-  // consuming app), darkened via ancestor theme class without a registered variant.
-  "hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_22%))]",
-  "[.dark-theme_&]:hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_80%))]",
-  "[[data-theme=dark]_&]:hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_80%))]",
-  // Geist focus ring as arbitrary properties (no bare `outline`/ambiguous
-  // arbitrary-color utilities, which differ between Tailwind v3 and v4).
-  "focus-visible:[outline:2px_solid_var(--ds-focus-color)] focus-visible:[outline-offset:2px]",
-  // disabled styles
-  "disabled:cursor-not-allowed aria-disabled:cursor-not-allowed",
-  "disabled:bg-gray-100 disabled:!text-gray-700 disabled:hover:bg-gray-100",
-  "aria-disabled:bg-gray-100 aria-disabled:text-gray-700 aria-disabled:hover:bg-gray-100"
-], {
-  variants: {
-    variant: {
-      default: "",
-      secondary: "border border-gray-alpha-400 [--themed-bg:_var(--ds-background-100)] [--themed-fg:_var(--ds-gray-1000)] [--themed-hover-bg:_var(--ds-gray-alpha-200)]",
-      ghost: "[--themed-bg:_transparent] [--themed-fg:_var(--ds-gray-1000)] [--themed-hover-bg:_var(--ds-gray-alpha-100)]"
-    },
-    size: {
-      default: "h-10 px-4 text-[14px]",
-      sm: "h-8 px-3 text-[14px]",
-      xs: "h-6 px-1.5 py-0.5 text-button-12 rounded-[4px]",
-      icon: "h-8 w-8"
-    }
-  },
-  defaultVariants: {
-    variant: "default",
-    size: "default"
-  }
-});
-function Button$1({ className, variant, size: size2, type = "button", ...props }) {
-  return jsxRuntimeExports.jsx("button", { type, className: cn$4(buttonVariants$1({ variant, size: size2, className })), ...props });
-}
 const KEYFRAMES = `@keyframes wf-spinner-fade{0%{opacity:1}100%{opacity:.15}}`;
 function Spinner({ size: size2 = 14, color: color5 }) {
   const config2 = size2 <= 12 ? {
@@ -18517,6 +18554,735 @@ function isDeepEqual(a2, b2, seen2 = /* @__PURE__ */ new WeakMap()) {
   }
   return true;
 }
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node2) => {
+    let hasCleanup = false;
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef(ref, node2);
+      if (!hasCleanup && typeof cleanup == "function") {
+        hasCleanup = true;
+      }
+      return cleanup;
+    });
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i];
+          if (typeof cleanup == "function") {
+            cleanup();
+          } else {
+            setRef(refs[i], null);
+          }
+        }
+      };
+    }
+  };
+}
+function useComposedRefs(...refs) {
+  return reactExports.useCallback(composeRefs(...refs), refs);
+}
+var Slot = reactExports.forwardRef((props, forwardedRef) => {
+  const { children: children2, ...slotProps } = props;
+  const childrenArray = reactExports.Children.toArray(children2);
+  const slottable = childrenArray.find(isSlottable);
+  if (slottable) {
+    const newElement = slottable.props.children;
+    const newChildren = childrenArray.map((child) => {
+      if (child === slottable) {
+        if (reactExports.Children.count(newElement) > 1) return reactExports.Children.only(null);
+        return reactExports.isValidElement(newElement) ? newElement.props.children : null;
+      } else {
+        return child;
+      }
+    });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: reactExports.isValidElement(newElement) ? reactExports.cloneElement(newElement, void 0, newChildren) : null });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: children2 });
+});
+Slot.displayName = "Slot";
+var SlotClone = reactExports.forwardRef((props, forwardedRef) => {
+  const { children: children2, ...slotProps } = props;
+  if (reactExports.isValidElement(children2)) {
+    const childrenRef = getElementRef(children2);
+    return reactExports.cloneElement(children2, {
+      ...mergeProps(slotProps, children2.props),
+      // @ts-ignore
+      ref: forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef
+    });
+  }
+  return reactExports.Children.count(children2) > 1 ? reactExports.Children.only(null) : null;
+});
+SlotClone.displayName = "SlotClone";
+var Slottable = ({ children: children2 }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: children2 });
+};
+function isSlottable(child) {
+  return reactExports.isValidElement(child) && child.type === Slottable;
+}
+function mergeProps(slotProps, childProps) {
+  const overrideProps = { ...childProps };
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args) => {
+          childPropValue(...args);
+          slotPropValue(...args);
+        };
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+function getElementRef(element2) {
+  var _a3, _b2;
+  let getter = (_a3 = Object.getOwnPropertyDescriptor(element2.props, "ref")) == null ? void 0 : _a3.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element2.ref;
+  }
+  getter = (_b2 = Object.getOwnPropertyDescriptor(element2, "ref")) == null ? void 0 : _b2.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element2.props.ref;
+  }
+  return element2.props.ref || element2.ref;
+}
+var Root = Slot;
+var debounce_1;
+var hasRequiredDebounce;
+function requireDebounce() {
+  if (hasRequiredDebounce) return debounce_1;
+  hasRequiredDebounce = 1;
+  function debounce(func, wait, immediate) {
+    var timeout, args, context, timestamp, result;
+    if (null == wait) wait = 100;
+    function later() {
+      var last = Date.now() - timestamp;
+      if (last < wait && last >= 0) {
+        timeout = setTimeout(later, wait - last);
+      } else {
+        timeout = null;
+        if (!immediate) {
+          result = func.apply(context, args);
+          context = args = null;
+        }
+      }
+    }
+    var debounced = function() {
+      context = this;
+      args = arguments;
+      timestamp = Date.now();
+      var callNow = immediate && !timeout;
+      if (!timeout) timeout = setTimeout(later, wait);
+      if (callNow) {
+        result = func.apply(context, args);
+        context = args = null;
+      }
+      return result;
+    };
+    debounced.clear = function() {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+    };
+    debounced.flush = function() {
+      if (timeout) {
+        result = func.apply(context, args);
+        context = args = null;
+        clearTimeout(timeout);
+        timeout = null;
+      }
+    };
+    return debounced;
+  }
+  debounce.debounce = debounce;
+  debounce_1 = debounce;
+  return debounce_1;
+}
+var debounceExports = requireDebounce();
+const createDebounce = /* @__PURE__ */ getDefaultExportFromCjs(debounceExports);
+function useMeasure(_temp) {
+  let {
+    debounce,
+    scroll,
+    polyfill,
+    offsetSize
+  } = {
+    debounce: 0,
+    scroll: false,
+    offsetSize: false
+  };
+  const ResizeObserver2 = polyfill || (typeof window === "undefined" ? class ResizeObserver {
+  } : window.ResizeObserver);
+  if (!ResizeObserver2) {
+    throw new Error("This browser does not support ResizeObserver out of the box. See: https://github.com/react-spring/react-use-measure/#resize-observer-polyfills");
+  }
+  const [bounds, set] = reactExports.useState({
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+    bottom: 0,
+    right: 0,
+    x: 0,
+    y: 0
+  });
+  const state = reactExports.useRef({
+    element: null,
+    scrollContainers: null,
+    resizeObserver: null,
+    lastBounds: bounds
+  });
+  const scrollDebounce = debounce ? typeof debounce === "number" ? debounce : debounce.scroll : null;
+  const resizeDebounce = debounce ? typeof debounce === "number" ? debounce : debounce.resize : null;
+  const mounted = reactExports.useRef(false);
+  reactExports.useEffect(() => {
+    mounted.current = true;
+    return () => void (mounted.current = false);
+  });
+  const [forceRefresh, resizeChange, scrollChange] = reactExports.useMemo(() => {
+    const callback = () => {
+      if (!state.current.element) return;
+      const {
+        left,
+        top,
+        width,
+        height,
+        bottom,
+        right,
+        x: x2,
+        y: y2
+      } = state.current.element.getBoundingClientRect();
+      const size2 = {
+        left,
+        top,
+        width,
+        height,
+        bottom,
+        right,
+        x: x2,
+        y: y2
+      };
+      if (state.current.element instanceof HTMLElement && offsetSize) {
+        size2.height = state.current.element.offsetHeight;
+        size2.width = state.current.element.offsetWidth;
+      }
+      Object.freeze(size2);
+      if (mounted.current && !areBoundsEqual(state.current.lastBounds, size2)) set(state.current.lastBounds = size2);
+    };
+    return [callback, resizeDebounce ? createDebounce(callback, resizeDebounce) : callback, scrollDebounce ? createDebounce(callback, scrollDebounce) : callback];
+  }, [set, offsetSize, scrollDebounce, resizeDebounce]);
+  function removeListeners() {
+    if (state.current.scrollContainers) {
+      state.current.scrollContainers.forEach((element2) => element2.removeEventListener("scroll", scrollChange, true));
+      state.current.scrollContainers = null;
+    }
+    if (state.current.resizeObserver) {
+      state.current.resizeObserver.disconnect();
+      state.current.resizeObserver = null;
+    }
+  }
+  function addListeners() {
+    if (!state.current.element) return;
+    state.current.resizeObserver = new ResizeObserver2(scrollChange);
+    state.current.resizeObserver.observe(state.current.element);
+    if (scroll && state.current.scrollContainers) {
+      state.current.scrollContainers.forEach((scrollContainer) => scrollContainer.addEventListener("scroll", scrollChange, {
+        capture: true,
+        passive: true
+      }));
+    }
+  }
+  const ref = (node2) => {
+    if (!node2 || node2 === state.current.element) return;
+    removeListeners();
+    state.current.element = node2;
+    state.current.scrollContainers = findScrollContainers(node2);
+    addListeners();
+  };
+  useOnWindowScroll(scrollChange, Boolean(scroll));
+  useOnWindowResize(resizeChange);
+  reactExports.useEffect(() => {
+    removeListeners();
+    addListeners();
+  }, [scroll, scrollChange, resizeChange]);
+  reactExports.useEffect(() => removeListeners, []);
+  return [ref, bounds, forceRefresh];
+}
+function useOnWindowResize(onWindowResize) {
+  reactExports.useEffect(() => {
+    const cb = onWindowResize;
+    window.addEventListener("resize", cb);
+    return () => void window.removeEventListener("resize", cb);
+  }, [onWindowResize]);
+}
+function useOnWindowScroll(onScroll, enabled) {
+  reactExports.useEffect(() => {
+    if (enabled) {
+      const cb = onScroll;
+      window.addEventListener("scroll", cb, {
+        capture: true,
+        passive: true
+      });
+      return () => void window.removeEventListener("scroll", cb, true);
+    }
+  }, [onScroll, enabled]);
+}
+function findScrollContainers(element2) {
+  const result = [];
+  if (!element2 || element2 === document.body) return result;
+  const {
+    overflow,
+    overflowX,
+    overflowY
+  } = window.getComputedStyle(element2);
+  if ([overflow, overflowX, overflowY].some((prop) => prop === "auto" || prop === "scroll")) result.push(element2);
+  return [...result, ...findScrollContainers(element2.parentElement)];
+}
+const keys$1 = ["x", "y", "top", "bottom", "left", "right", "width", "height"];
+const areBoundsEqual = (a2, b2) => keys$1.every((key) => a2[key] === b2[key]);
+const QUERY = "(prefers-reduced-motion: reduce)";
+const useReducedMotion = () => {
+  const [reduced, setReduced] = reactExports.useState(() => {
+    if (typeof window === "undefined" || !window.matchMedia)
+      return false;
+    return window.matchMedia(QUERY).matches;
+  });
+  reactExports.useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia)
+      return;
+    const media = window.matchMedia(QUERY);
+    const onChange = () => setReduced(media.matches);
+    media.addEventListener("change", onChange);
+    onChange();
+    return () => media.removeEventListener("change", onChange);
+  }, []);
+  return reduced;
+};
+const INACTIVE_TIMEOUT_MS = 250;
+const ENTER_DELAY_MS = 0;
+const OPEN_DELAY_MS = 150;
+const MAX_TRANSITION_DISTANCE_PX = 150;
+const MAX_OVERLAP_FOR_TRANSITION_PERCENT = 100;
+const PERSIST_TIMEOUT_MS = 1e3;
+const ContextCardContext = reactExports.createContext({
+  rootOrigin: { x: 0, y: 0 },
+  rootBounds: { width: 0, height: 0 },
+  portalRef: null,
+  activeId: null,
+  setActiveId: () => void 0,
+  hoveredId: null,
+  setHoveredId: () => void 0,
+  updateActiveContextCard: () => void 0,
+  skipTransition: false,
+  rootVisible: false,
+  distanceFromLast: 0,
+  lastOrigin: null,
+  isProvided: false
+});
+ContextCardContext.displayName = "ContextCardContext";
+function useHasContextCardProvider() {
+  return reactExports.useContext(ContextCardContext).isProvided;
+}
+function usePrevious(value) {
+  const ref = reactExports.useRef(null);
+  reactExports.useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+function isRefObject(value) {
+  return value !== null && value !== void 0 && "current" in value;
+}
+function ContextCardProvider({ children: children2, portalTarget }) {
+  const [isMounted, setIsMounted] = reactExports.useState(false);
+  reactExports.useEffect(() => setIsMounted(true), []);
+  const resolvedPortalTarget = isRefObject(portalTarget) ? portalTarget.current : portalTarget;
+  const [ref, bounds] = useMeasure();
+  const portalRef = reactExports.useRef(null);
+  const [activeContextCard, setActiveContextCard] = reactExports.useState(null);
+  const [visible, setVisible] = reactExports.useState(false);
+  const [hoveredId, setHoveredId] = reactExports.useState(null);
+  const activeId = reactExports.useRef(null);
+  function setActiveId(id) {
+    activeId.current = id;
+    setVisible(id !== null);
+  }
+  const updateActiveContextCard = (update) => {
+    if ((update == null ? void 0 : update.id) !== activeId.current && update !== null)
+      return;
+    setActiveContextCard(update);
+  };
+  const BORDER_WIDTH = 1;
+  const activeBounds = reactExports.useMemo(() => {
+    if (!activeContextCard)
+      return {
+        width: 0,
+        height: 0,
+        x: 0,
+        y: 0,
+        side: "top",
+        arrowOffset: { x: 0, y: 0 }
+      };
+    return {
+      width: activeContextCard.contentSize.width + BORDER_WIDTH * 2,
+      height: activeContextCard.contentSize.height + BORDER_WIDTH * 2,
+      x: activeContextCard.origin.x,
+      y: activeContextCard.origin.y,
+      side: activeContextCard.side,
+      arrowOffset: activeContextCard.arrowOffset
+    };
+  }, [activeContextCard]);
+  const lastBounds = usePrevious(activeBounds);
+  const lastId = usePrevious(activeId.current);
+  const percentOverlapFromLast = reactExports.useMemo(() => {
+    if (!lastBounds)
+      return 0;
+    const overlapLeft = Math.max(activeBounds.x, lastBounds.x);
+    const overlapRight = Math.min(activeBounds.x + activeBounds.width, lastBounds.x + lastBounds.width);
+    const overlapTop = Math.max(activeBounds.y, lastBounds.y);
+    const overlapBottom = Math.min(activeBounds.y + activeBounds.height, lastBounds.y + lastBounds.height);
+    if (overlapLeft < overlapRight && overlapTop < overlapBottom) {
+      const overlapArea = (overlapRight - overlapLeft) * (overlapBottom - overlapTop);
+      const activeBoundsArea = activeBounds.width * activeBounds.height;
+      if (activeBoundsArea === 0)
+        return 0;
+      return overlapArea / activeBoundsArea * 100;
+    }
+    return 0;
+  }, [activeBounds, lastBounds]);
+  const distanceFromLast = reactExports.useMemo(() => Math.sqrt((((lastBounds == null ? void 0 : lastBounds.x) ?? 0) - activeBounds.x) ** 2 + (((lastBounds == null ? void 0 : lastBounds.y) ?? 0) - activeBounds.y) ** 2), [activeBounds.x, activeBounds.y, lastBounds == null ? void 0 : lastBounds.x, lastBounds == null ? void 0 : lastBounds.y]);
+  const lastOrigin = reactExports.useMemo(() => {
+    if (!lastBounds)
+      return null;
+    return {
+      x: lastBounds.x - activeBounds.x,
+      y: lastBounds.y - activeBounds.y
+    };
+  }, [activeBounds, lastBounds]);
+  const [isScrolling, setIsScrolling] = reactExports.useState(false);
+  const skipTransition = reactExports.useMemo(() => distanceFromLast > MAX_TRANSITION_DISTANCE_PX || percentOverlapFromLast > MAX_OVERLAP_FOR_TRANSITION_PERCENT || lastId === null || isScrolling, [distanceFromLast, isScrolling, lastId, percentOverlapFromLast]);
+  reactExports.useEffect(() => {
+    let isScrollingTimeout = null;
+    const onScroll = () => {
+      if (isScrollingTimeout)
+        window.clearTimeout(isScrollingTimeout);
+      isScrollingTimeout = setTimeout(() => {
+        setIsScrolling(false);
+      }, 66);
+      if (!isScrolling) {
+        setIsScrolling(true);
+      }
+    };
+    document.addEventListener("scroll", onScroll, true);
+    return () => {
+      document.removeEventListener("scroll", onScroll, true);
+    };
+  }, [isScrolling]);
+  const contextValue = reactExports.useMemo(() => ({
+    updateActiveContextCard,
+    rootOrigin: { ...activeBounds },
+    rootBounds: bounds,
+    portalRef,
+    setActiveId,
+    activeId,
+    setHoveredId,
+    hoveredId,
+    skipTransition,
+    rootVisible: visible,
+    distanceFromLast,
+    lastOrigin,
+    isProvided: true
+  }), [
+    activeBounds,
+    bounds,
+    hoveredId,
+    skipTransition,
+    visible,
+    distanceFromLast,
+    lastOrigin
+  ]);
+  return jsxRuntimeExports.jsxs(ContextCardContext.Provider, { value: contextValue, children: [children2, isMounted ? reactDomExports.createPortal(jsxRuntimeExports.jsx("div", { className: "w-full h-full inset-0 fixed pointer-events-none z-[100000]", ref, children: jsxRuntimeExports.jsx("div", { className: "min-w-max transition-all duration-150 ease-[easing-function:cubic-bezier(0.3,_0.57,_0.07,_0.95)] will-change-[transform,width,height] motion-reduce:!transition-none", style: {
+    opacity: visible ? 1 : 0
+  }, children: jsxRuntimeExports.jsxs("div", { className: cn$4("absolute bg-background-100 bg-clip-padding rounded-[6px] overflow-visible pointer-events-none z-[1000000] shadow-[var(--ds-shadow-tooltip),0_0_0_1px_var(--ds-background-100)] w-fit [--context-card-tip-stroke:#DBDBDB] dark-theme:[--context-card-tip-stroke:#252525]", skipTransition ? "!transition-none" : "transition-[transform,width,height] duration-250 ease-[easing-function:cubic-bezier(0.29,0.31,0.05,0.96)] will-change-[transform,width,height] motion-reduce:!transition-none"), "data-skip-transition": skipTransition, style: {
+    transform: `translate(${activeBounds.x}px,${activeBounds.y}px)`,
+    width: activeBounds.width,
+    height: activeBounds.height
+  }, children: [jsxRuntimeExports.jsx("div", { className: cn$4("w-[14px] h-[7px] absolute grid place-content-center z-[999999999] origin-center", {
+    "top-full -translate-x-1/2 rotate-0": activeBounds.side === "top",
+    "right-full -translate-y-1/2 rotate-90 -mr-[3.5px]": activeBounds.side === "right",
+    "bottom-full -translate-x-1/2 rotate-180": activeBounds.side === "bottom",
+    "left-full -translate-y-1/2 rotate-[270deg] -ml-[3.5px]": activeBounds.side === "left"
+  }, skipTransition ? "!transition-none" : "transition-[transform,width,height] duration-250 ease-[easing-function:cubic-bezier(0.29,0.31,0.05,0.96)] will-change-[transform,width,height] motion-reduce:!transition-none"), style: {
+    ...activeBounds.side === "top" || activeBounds.side === "bottom" ? {
+      left: `calc(50% + ${activeBounds.arrowOffset.x}px)`
+    } : {
+      top: `calc(50% + ${activeBounds.arrowOffset.y}px)`
+    }
+  }, "data-skip-transition": skipTransition, "data-side": activeBounds.side, children: jsxRuntimeExports.jsxs("svg", { width: "14", height: "7", viewBox: "0 0 14 7", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [jsxRuntimeExports.jsx("g", { clipPath: "url(#context-card-tip-clip)", children: jsxRuntimeExports.jsx("path", { d: "M15 -0.5V0.5H12.9834L12.8184 0.508789C12.4377 0.550822 12.0853 0.738056 11.8359 1.03418L8.53027 4.95996C7.73114 5.90893 6.26886 5.90892 5.46973 4.95996L2.16406 1.03418C1.87905 0.695733 1.45907 0.5 1.0166 0.5H-1V-0.5H15Z", fill: "var(--ds-background-100)", style: {
+    fill: "var(--ds-background-100)",
+    fillOpacity: 1,
+    stroke: "var(--context-card-tip-stroke)",
+    strokeOpacity: 1
+  } }) }), jsxRuntimeExports.jsx("defs", { children: jsxRuntimeExports.jsx("clipPath", { id: "context-card-tip-clip", children: jsxRuntimeExports.jsx("rect", { width: "14", height: "7", fill: "white", style: { fill: "white", fillOpacity: 1 } }) }) })] }) }), jsxRuntimeExports.jsx("div", { ref: portalRef })] }) }) }), resolvedPortalTarget ?? document.body) : null] });
+}
+function ContextCardTrigger({ content: content2, children: children2, side = "right", align = "center", sideOffset = 16, alignOffset = 0, ignoreCardPointerEvents = false, noPadding, asChild, className, hide: hide2, inactiveTimeoutMs = INACTIVE_TIMEOUT_MS }) {
+  const triggerRef = reactExports.useRef(null);
+  const contentRef = reactExports.useRef(null);
+  const [contentMeasureRef, contentMeasureBounds] = useMeasure();
+  const { portalRef, updateActiveContextCard, activeId, setActiveId, hoveredId, setHoveredId, skipTransition, rootVisible } = reactExports.useContext(ContextCardContext);
+  const id = reactExports.useId();
+  reactExports.useEffect(() => {
+    return () => {
+      if (activeId.current === id) {
+        setActiveId(null);
+      }
+    };
+  }, []);
+  const reduceMotion = useReducedMotion();
+  const [localHover, setLocalHover] = reactExports.useState(false);
+  const [persisting, setPersisting] = reactExports.useState(false);
+  const [visible, setVisible] = reactExports.useState(false);
+  const activeTimeout = reactExports.useRef(null);
+  const persistingTimeout = reactExports.useRef(null);
+  const openTimeout = reactExports.useRef(null);
+  reactExports.useEffect(() => {
+    if (localHover && contentMeasureBounds.width > 0 && contentMeasureBounds.height > 0) {
+      if (openTimeout.current)
+        clearTimeout(openTimeout.current);
+      openTimeout.current = setTimeout(() => {
+        setActiveId(id);
+        updateBounds();
+      }, rootVisible ? 0 : OPEN_DELAY_MS);
+    }
+    return () => {
+      if (openTimeout.current)
+        clearTimeout(openTimeout.current);
+    };
+  }, [localHover, contentMeasureBounds]);
+  const enterTimeout = reactExports.useRef(null);
+  reactExports.useEffect(() => {
+    if (enterTimeout.current)
+      clearTimeout(enterTimeout.current);
+    if (hoveredId !== id) {
+      setVisible(false);
+    } else {
+      enterTimeout.current = setTimeout(() => {
+        setVisible(true);
+      }, reduceMotion || skipTransition ? 0 : ENTER_DELAY_MS);
+    }
+  }, [hoveredId, id, reduceMotion, skipTransition]);
+  function updateBounds() {
+    if (!contentRef.current)
+      return;
+    const bounds = computeBounds();
+    updateActiveContextCard({ id, ...bounds });
+  }
+  function computeBounds(sideOverride) {
+    if (!triggerRef.current)
+      throw new Error("Trigger not found");
+    if (!contentRef.current)
+      throw new Error("Content not found");
+    const appliedSide = sideOverride ?? side;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const contentRect = contentRef.current.getBoundingClientRect();
+    contentRef.current.style.width = "max-content";
+    contentRef.current.style.position = "absolute";
+    const contentSize = {
+      width: Math.max(contentRect.width, contentRef.current.offsetWidth),
+      height: contentRect.height
+    };
+    let origin;
+    const arrowWidth = 14;
+    const halfArrowWidth = arrowWidth / 2;
+    const halfTriggerWidth = triggerRect.width / 2;
+    const halfTriggerHeight = triggerRect.height / 2;
+    const halfContentWidth = contentSize.width / 2;
+    const halfContentHeight = contentSize.height / 2;
+    const top = triggerRect.top;
+    const left = triggerRect.left;
+    let alignX = left + halfTriggerWidth - halfContentWidth + alignOffset;
+    if (align === "start")
+      alignX = left + alignOffset;
+    if (align === "end")
+      alignX = left + triggerRect.width - contentRect.width + alignOffset;
+    let alignY = top + halfTriggerHeight - halfContentHeight + alignOffset;
+    if (align === "start")
+      alignY = top + alignOffset;
+    if (align === "end")
+      alignY = top + triggerRect.height - contentRect.height + alignOffset;
+    switch (appliedSide) {
+      case "top":
+        origin = {
+          x: alignX,
+          y: top - contentRect.height - sideOffset
+        };
+        break;
+      case "right":
+        origin = {
+          x: left + triggerRect.width + sideOffset,
+          y: alignY
+        };
+        break;
+      case "bottom":
+        origin = {
+          x: alignX,
+          y: top + triggerRect.height + sideOffset
+        };
+        break;
+      case "left":
+        origin = {
+          x: left - contentRect.width - sideOffset,
+          y: alignY
+        };
+        break;
+      default: {
+        const _exhaustive = appliedSide;
+        throw new Error(`Unknown side: ${String(_exhaustive)}`);
+      }
+    }
+    const viewportWidth = document.documentElement.clientWidth;
+    const viewportHeight = document.documentElement.clientHeight;
+    const isOffscreenLeft = origin.x < 0;
+    const isOffscreenRight = origin.x + contentRect.width > viewportWidth;
+    const isOffscreenTop = origin.y < 0;
+    const isOffscreenBottom = origin.y + contentRect.height > viewportHeight;
+    if (!sideOverride) {
+      const spaceAbove = top;
+      const spaceBelow = viewportHeight - (top + triggerRect.height);
+      const spaceLeft = left;
+      const spaceRight = viewportWidth - (left + triggerRect.width);
+      if (side === "top" && isOffscreenTop && spaceBelow > spaceAbove) {
+        return computeBounds("bottom");
+      }
+      if (side === "bottom" && isOffscreenBottom && spaceAbove > spaceBelow) {
+        return computeBounds("top");
+      }
+      if (side === "right" && isOffscreenRight && spaceLeft > spaceRight) {
+        return computeBounds("left");
+      }
+      if (side === "left" && isOffscreenLeft && spaceRight > spaceLeft) {
+        return computeBounds("right");
+      }
+      if ((side === "top" || side === "bottom") && isOffscreenLeft && spaceRight > contentRect.width) {
+        return computeBounds("right");
+      }
+      if ((side === "top" || side === "bottom") && isOffscreenRight && spaceLeft > contentRect.width) {
+        return computeBounds("left");
+      }
+      if ((side === "left" || side === "right") && isOffscreenTop && spaceBelow > contentRect.height) {
+        return computeBounds("bottom");
+      }
+      if ((side === "left" || side === "right") && isOffscreenBottom && spaceAbove > contentRect.height) {
+        return computeBounds("top");
+      }
+    }
+    const viewportPadding = 8;
+    if (appliedSide === "left" || appliedSide === "right") {
+      origin.y = Math.max(viewportPadding, Math.min(origin.y, viewportHeight - contentSize.height - viewportPadding));
+    } else {
+      origin.x = Math.max(viewportPadding, Math.min(origin.x, viewportWidth - contentSize.width - viewportPadding));
+    }
+    origin.y = Math.max(viewportPadding, Math.min(origin.y, viewportHeight - contentSize.height - viewportPadding));
+    const triggerCenterX = left + halfTriggerWidth;
+    const triggerCenterY = top + halfTriggerHeight;
+    const cardCenterX = origin.x + contentSize.width / 2;
+    const cardCenterY = origin.y + contentSize.height / 2;
+    let arrowOffsetX = triggerCenterX - cardCenterX;
+    let arrowOffsetY = triggerCenterY - cardCenterY;
+    const maxArrowOffsetX = halfContentWidth - halfArrowWidth;
+    const maxArrowOffsetY = halfContentHeight - halfArrowWidth;
+    if (appliedSide === "top" || appliedSide === "bottom") {
+      arrowOffsetX = Math.max(-maxArrowOffsetX, Math.min(arrowOffsetX, maxArrowOffsetX));
+    }
+    if (appliedSide === "left" || appliedSide === "right") {
+      arrowOffsetY = Math.max(-maxArrowOffsetY, Math.min(arrowOffsetY, maxArrowOffsetY));
+    }
+    const arrowOffset = {
+      x: arrowOffsetX,
+      y: arrowOffsetY
+    };
+    return { origin, contentSize, side: appliedSide, arrowOffset };
+  }
+  reactExports.useEffect(() => {
+    document.addEventListener("scroll", updateBounds, true);
+    window.addEventListener("resize", updateBounds);
+    return () => {
+      document.removeEventListener("scroll", updateBounds, true);
+      window.removeEventListener("resize", updateBounds);
+    };
+  }, []);
+  function resetDestructiveTimeouts() {
+    if (activeTimeout.current)
+      clearTimeout(activeTimeout.current);
+    if (persistingTimeout.current)
+      clearTimeout(persistingTimeout.current);
+    if (openTimeout.current)
+      clearTimeout(openTimeout.current);
+  }
+  function attemptDeactivate() {
+    if (activeTimeout.current)
+      clearTimeout(activeTimeout.current);
+    activeTimeout.current = setTimeout(() => {
+      if (activeId.current !== id)
+        return;
+      setActiveId(null);
+    }, inactiveTimeoutMs);
+  }
+  function attemptPersist() {
+    setPersisting(true);
+    if (persistingTimeout.current)
+      clearTimeout(persistingTimeout.current);
+    persistingTimeout.current = setTimeout(() => {
+      setPersisting(false);
+    }, PERSIST_TIMEOUT_MS);
+  }
+  function onMouseEnter() {
+    resetDestructiveTimeouts();
+    setHoveredId(id);
+    setLocalHover(true);
+  }
+  function onMouseLeave() {
+    setLocalHover(false);
+    attemptDeactivate();
+    attemptPersist();
+  }
+  reactExports.useEffect(() => {
+    if (hide2) {
+      setLocalHover(false);
+      setActiveId(null);
+    }
+  }, [hide2, setActiveId]);
+  function handleClick(e) {
+    if (e.target instanceof HTMLElement && e.target.closest("a[href]")) {
+      onMouseLeave();
+    }
+  }
+  const Comp = asChild ? Root : "div";
+  return jsxRuntimeExports.jsxs(Comp, { className: cn$4("inline-flex cursor-pointer flex-[0_1_auto] overflow-hidden", className), onMouseEnter, onMouseLeave, onClick: handleClick, ref: triggerRef, children: [jsxRuntimeExports.jsx(Slottable, { children: children2 }), (portalRef == null ? void 0 : portalRef.current) && (localHover || persisting) ? reactDomExports.createPortal(jsxRuntimeExports.jsx("div", { className: cn$4("absolute top-0 p-3 left-0 max-w-max transition-[transform,width,height] duration-250 ease-[easing-function:cubic-bezier(0.29,0.31,0.05,0.96)] will-change-[transform,width,height] motion-reduce:!transition-none", skipTransition && "!transition-none"), ref: contentRef, style: {
+    ...noPadding ? { padding: 0 } : {},
+    pointerEvents: rootVisible && visible && !ignoreCardPointerEvents ? "all" : "none"
+  }, children: jsxRuntimeExports.jsx("div", { className: cn$4("min-w-max transition-all duration-150 ease-[easing-function:cubic-bezier(0.3,_0.57,_0.07,_0.95)] will-change-[transform,width,height] motion-reduce:!transition-none", skipTransition ? "!transition-none" : "transition-[transform,width,height] duration-250 ease-[easing-function:cubic-bezier(0.29,0.31,0.05,0.96)] will-change-[transform,width,height] motion-reduce:!transition-none"), ref: contentMeasureRef, style: {
+    opacity: Number(visible)
+  }, children: content2 }) }, id), portalRef.current) : null] });
+}
 function Skeleton$1({ className, style: style2, ...props }) {
   return jsxRuntimeExports.jsx("div", { ...props, className: cn$4("rounded-md", className), style: { backgroundColor: "var(--ds-gray-200)", ...style2 } });
 }
@@ -43282,7 +44048,7 @@ var tn = f("block", "before:content-[counter(line)]", "before:inline-block", "be
 var et = ({ className: e, language: t, style: o, isIncomplete: n, ...s2 }) => jsxRuntimeExports.jsx("div", { className: f("my-4 flex w-full flex-col gap-2 rounded-xl border border-border bg-sidebar p-2", e), "data-incomplete": n || void 0, "data-language": t, "data-streamdown": "code-block", style: { contentVisibility: "auto", containIntrinsicSize: "auto 200px", ...o }, ...s2 });
 var Se = reactExports.createContext({ code: "" }), de = () => reactExports.useContext(Se);
 var ot = ({ language: e }) => jsxRuntimeExports.jsx("div", { className: "flex h-8 items-center text-muted-foreground text-xs", "data-language": e, "data-streamdown": "code-block-header", children: jsxRuntimeExports.jsx("span", { className: "ml-1 font-mono lowercase", children: e }) });
-var cn$1 = /\n+$/, dn = reactExports.lazy(() => __vitePreload(() => import("./highlighted-body-B3W2YXNL-BEqiCpJd.js"), true ? __vite__mapDeps([3,2]) : void 0).then((e) => ({ default: e.HighlightedCodeBlockBody }))), rt = ({ code: e, language: t, className: o, children: n, isIncomplete: s2 = false, ...r2 }) => {
+var cn$1 = /\n+$/, dn = reactExports.lazy(() => __vitePreload(() => import("./highlighted-body-B3W2YXNL-QKf7Yrcl.js"), true ? __vite__mapDeps([3,2]) : void 0).then((e) => ({ default: e.HighlightedCodeBlockBody }))), rt = ({ code: e, language: t, className: o, children: n, isIncomplete: s2 = false, ...r2 }) => {
   let i = reactExports.useMemo(() => e.replace(cn$1, ""), [e]), c = reactExports.useMemo(() => ({ bg: "transparent", fg: "inherit", tokens: i.split(`
 `).map((a2) => [{ content: a2, color: "inherit", bgColor: "transparent", htmlStyle: {}, offset: 0 }]) }), [i]);
   return jsxRuntimeExports.jsx(Se.Provider, { value: { code: e }, children: jsxRuntimeExports.jsxs(et, { isIncomplete: s2, language: t, children: [jsxRuntimeExports.jsx(ot, { language: t }), n ? jsxRuntimeExports.jsx("div", { className: "pointer-events-none sticky top-2 z-10 -mt-10 flex h-8 items-center justify-end", children: jsxRuntimeExports.jsx("div", { className: "pointer-events-auto flex shrink-0 items-center gap-2 rounded-md border border-sidebar bg-sidebar/80 px-1.5 py-1 supports-[backdrop-filter]:bg-sidebar/70 supports-[backdrop-filter]:backdrop-blur", "data-streamdown": "code-block-actions", children: n }) }) : null, jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: jsxRuntimeExports.jsx(Qe, { className: o, language: t, result: c, ...r2 }), children: jsxRuntimeExports.jsx(dn, { className: o, code: i, language: t, raw: c, ...r2 }) })] }) });
@@ -44224,7 +44990,7 @@ const eventFailed = "_eventFailed_1fmf2_1432";
 const eventRetrying = "_eventRetrying_1fmf2_1441";
 const eventHook = "_eventHook_1fmf2_1450";
 const eventDefault = "_eventDefault_1fmf2_1459";
-const styles = {
+const styles$1 = {
   traceNode,
   childRow,
   spanNode,
@@ -44694,15 +45460,15 @@ const SEGMENT_LABELS = {
 function SegmentLayer({ segments, spanDuration: spanDuration2 }) {
   if (segments.length === 0)
     return null;
-  return jsxRuntimeExports.jsx("div", { className: styles.segmentLayer, children: segments.map((seg, i) => {
-    const className = styles[SEGMENT_CLASS_MAP[seg.status]];
+  return jsxRuntimeExports.jsx("div", { className: styles$1.segmentLayer, children: segments.map((seg, i) => {
+    const className = styles$1[SEGMENT_CLASS_MAP[seg.status]];
     const segDuration = (seg.endFraction - seg.startFraction) * spanDuration2;
     const label = SEGMENT_LABELS[seg.status];
     const style2 = {
       left: `${seg.startFraction * 100}%`,
       width: `${(seg.endFraction - seg.startFraction) * 100}%`
     };
-    return jsxRuntimeExports.jsx("div", { className: `${styles.segment} ${String(className)}`, style: style2, title: label ? `${label} ${formatDuration(segDuration)}` : formatDuration(segDuration) }, `seg-${seg.status}-${String(i)}`);
+    return jsxRuntimeExports.jsx("div", { className: `${styles$1.segment} ${String(className)}`, style: style2, title: label ? `${label} ${formatDuration(segDuration)}` : formatDuration(segDuration) }, `seg-${seg.status}-${String(i)}`);
   }) });
 }
 function getSegmentTags(segments, spanDuration2) {
@@ -44731,7 +45497,7 @@ function TextContent({ node: node2, layout, durationMs, segmentTags }) {
     return null;
   }
   const showTags = segmentTags && segmentTags.length > 0 && (layout.isHovered || layout.width > 200);
-  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("span", { className: styles.spanName, children: [node2.label || node2.span.name, showTags ? segmentTags.map((tag, i) => jsxRuntimeExports.jsxs("span", { className: styles.segmentTag, children: [" · ", tag.label, " ", tag.duration] }, i)) : null] }), layout.isHuge ? jsxRuntimeExports.jsx("span", { className: styles.spanSpacer }) : null, layout.isHovered || layout.width > 128 ? jsxRuntimeExports.jsx("span", { className: styles.spanDuration, children: duration2 }) : null] });
+  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("span", { className: styles$1.spanName, children: [node2.label || node2.span.name, showTags ? segmentTags.map((tag, i) => jsxRuntimeExports.jsxs("span", { className: styles$1.segmentTag, children: [" · ", tag.label, " ", tag.duration] }, i)) : null] }), layout.isHuge ? jsxRuntimeExports.jsx("span", { className: styles$1.spanSpacer }) : null, layout.isHovered || layout.width > 128 ? jsxRuntimeExports.jsx("span", { className: styles$1.spanDuration, children: duration2 }) : null] });
 }
 function DefaultContent({ node: node2, layout }) {
   return jsxRuntimeExports.jsx(TextContent, { node: node2, layout });
@@ -44854,8 +45620,8 @@ function getSpanLayout(resourceType, node2, root2, scale, scrollSnapshotRef) {
 }
 const getSpanColorClassName = (node2) => {
   if (node2.isVercel)
-    return String(styles.colorVercel);
-  return String(styles[`color${node2.resourceIndex % 5}`]);
+    return String(styles$1.colorVercel);
+  return String(styles$1[`color${node2.resourceIndex % 5}`]);
 };
 function getTerminalTimestamp(resourceType, node2) {
   const events = node2.events;
@@ -44998,7 +45764,7 @@ const SpanComponent = reactExports.memo(function SpanComponent2({ node: node2, r
     return () => cancelAnimationFrame(rafId);
   }, [isLive, canonicalStartTime, scale]);
   const renderNode = segmentNode;
-  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("button", { "aria-label": `${span.name} - ${duration2}`, className: clsx(styles.spanNode, layout.isHuge && styles.huge, layout.isSmall && styles.small, layout.isExpanded && styles.xHover, node2.isHighlighted ? styles.colorHighlight : getSpanColorClassName(node2), node2.isHighlighted === false && styles.unlit, customClassName, hasSegments2 && styles.hasSegments), "data-span-id": span.spanId, "data-start-time": segmentNode.startTime - root2.startTime, "data-right-side": layout.isNearRightSide, "data-selected": node2.isSelected ? "" : void 0, ref, style: getSpanStyle(layout, segmentNode, root2, scale), type: "button", children: jsxRuntimeExports.jsx(SpanContent, { durationMs, resourceType, node: renderNode, layout }) }), segmentNode.events && !layout.isSmall ? segmentNode.events.map((x2) => jsxRuntimeExports.jsx(SpanEventComponent, { customSpanEventClassNameFunc, event: x2, node: segmentNode, root: root2, scale, asBoundary: isWorkflowSpan }, x2.key)) : null] });
+  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("button", { "aria-label": `${span.name} - ${duration2}`, className: clsx(styles$1.spanNode, layout.isHuge && styles$1.huge, layout.isSmall && styles$1.small, layout.isExpanded && styles$1.xHover, node2.isHighlighted ? styles$1.colorHighlight : getSpanColorClassName(node2), node2.isHighlighted === false && styles$1.unlit, customClassName, hasSegments2 && styles$1.hasSegments), "data-span-id": span.spanId, "data-start-time": segmentNode.startTime - root2.startTime, "data-right-side": layout.isNearRightSide, "data-selected": node2.isSelected ? "" : void 0, ref, style: getSpanStyle(layout, segmentNode, root2, scale), type: "button", children: jsxRuntimeExports.jsx(SpanContent, { durationMs, resourceType, node: renderNode, layout }) }), segmentNode.events && !layout.isSmall ? segmentNode.events.map((x2) => jsxRuntimeExports.jsx(SpanEventComponent, { customSpanEventClassNameFunc, event: x2, node: segmentNode, root: root2, scale, asBoundary: isWorkflowSpan }, x2.key)) : null] });
 });
 const BOUNDARY_LABELS = {
   step_started: "Started",
@@ -45012,7 +45778,8 @@ const BOUNDARY_LABELS = {
   run_started: "Started",
   run_completed: "Completed",
   run_failed: "Run failed",
-  step_completed: "Completed"
+  step_completed: "Completed",
+  attr_set: "Attributes set"
 };
 const SpanEventComponent = reactExports.memo(function SpanEventComponent2({ event, node: node2, root: root2, scale, customSpanEventClassNameFunc, asBoundary = false }) {
   const ref = reactExports.useRef(null);
@@ -45056,17 +45823,17 @@ const SpanEventComponent = reactExports.memo(function SpanEventComponent2({ even
   const isLeftAligned = node2.duration <= 0 || (event.timestamp - node2.startTime) / node2.duration < 0.5;
   const customClassName = customSpanEventClassNameFunc ? customSpanEventClassNameFunc(event) : "";
   return jsxRuntimeExports.jsxs("div", { title: phaseDuration ? `${displayLabel} ${timestamp}
-${phaseLabel} ${phaseDuration}` : `${displayLabel} ${timestamp}`, className: clsx(styles.spanNodeEvent, customClassName, asBoundary && styles.boundaryMarker, node2.isHighlighted ? styles.colorHighlight : getSpanColorClassName(node2), node2.isHighlighted === false && styles.unlit), "data-hovered": event.isHovered, ref, style: {
+${phaseLabel} ${phaseDuration}` : `${displayLabel} ${timestamp}`, className: clsx(styles$1.spanNodeEvent, customClassName, asBoundary && styles$1.boundaryMarker, node2.isHighlighted ? styles$1.colorHighlight : getSpanColorClassName(node2), node2.isHighlighted === false && styles$1.unlit), "data-hovered": event.isHovered, ref, style: {
     left,
     top
-  }, children: [jsxRuntimeExports.jsx("div", { className: clsx(styles.hoverInfo, isLeftAligned ? styles.alignStart : styles.alignEnd), children: asBoundary ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { className: styles.eventName, children: displayLabel }), jsxRuntimeExports.jsx("span", { className: styles.eventTimestamp, children: timestamp }), phaseDuration ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { className: styles.eventName, children: phaseLabel }), jsxRuntimeExports.jsx("span", { className: styles.eventTimestamp, children: phaseDuration })] }) : null] }) : jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { className: styles.eventName, children: name2 }), jsxRuntimeExports.jsx("span", { className: styles.eventTimestamp, children: timestamp })] }) }), asBoundary ? jsxRuntimeExports.jsx("div", { className: styles.boundaryLine }) : jsxRuntimeExports.jsx("div", { className: styles.eventDiamond })] });
+  }, children: [jsxRuntimeExports.jsx("div", { className: clsx(styles$1.hoverInfo, isLeftAligned ? styles$1.alignStart : styles$1.alignEnd), children: asBoundary ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { className: styles$1.eventName, children: displayLabel }), jsxRuntimeExports.jsx("span", { className: styles$1.eventTimestamp, children: timestamp }), phaseDuration ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { className: styles$1.eventName, children: phaseLabel }), jsxRuntimeExports.jsx("span", { className: styles$1.eventTimestamp, children: phaseDuration })] }) : null] }) : jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { className: styles$1.eventName, children: name2 }), jsxRuntimeExports.jsx("span", { className: styles$1.eventTimestamp, children: timestamp })] }) }), asBoundary ? jsxRuntimeExports.jsx("div", { className: styles$1.boundaryLine }) : jsxRuntimeExports.jsx("div", { className: styles$1.eventDiamond })] });
 });
 const colorTokenMap = {
   "gray-700": "var(--ds-gray-700)",
   "gray-900": "var(--ds-gray-900)"
 };
 function IconChevronDown({ size: size2 = 16 }) {
-  return jsxRuntimeExports.jsxs("svg", { width: size2, height: size2, viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, className: styles.detailHeadingIcon, children: [jsxRuntimeExports.jsx("title", { children: "Chevron Down" }), jsxRuntimeExports.jsx("path", { d: "M6 9l6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] });
+  return jsxRuntimeExports.jsxs("svg", { width: size2, height: size2, viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, className: styles$1.detailHeadingIcon, children: [jsxRuntimeExports.jsx("title", { children: "Chevron Down" }), jsxRuntimeExports.jsx("path", { d: "M6 9l6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] });
 }
 function IconExternalSmall({ size: size2 = 16, color: color5 = "gray-900" }) {
   const style2 = { color: colorTokenMap[color5] || color5 };
@@ -45081,7 +45848,7 @@ function Link(props) {
   return jsxRuntimeExports.jsx("a", { className, href, ...rest, children: children2 });
 }
 function Skeleton({ width, height, rounded }) {
-  return jsxRuntimeExports.jsx("span", { className: clsx(styles.skeleton, rounded && styles.skeletonRounded), style: { width, height }, "aria-hidden": true });
+  return jsxRuntimeExports.jsx("span", { className: clsx(styles$1.skeleton, rounded && styles$1.skeletonRounded), style: { width, height }, "aria-hidden": true });
 }
 const EXPANDED_STORAGE_KEY_PREFIX = "vc-trace-span-exp:";
 function DetailGroup({ name: name2, className = "", children: children2 }) {
@@ -45097,7 +45864,7 @@ function DetailGroup({ name: name2, className = "", children: children2 }) {
       return willBeExpanded;
     });
   }, [name2]);
-  return jsxRuntimeExports.jsxs("div", { className: clsx(styles.detailGroup, isExpanded ? styles.expanded : styles.collapsed, className), children: [jsxRuntimeExports.jsxs("button", { className: styles.detailHeading, onClick: toggleExpanded, type: "button", children: [jsxRuntimeExports.jsx("span", { children: name2 }), jsxRuntimeExports.jsx(IconChevronDown, {})] }), isExpanded ? children2 : null] });
+  return jsxRuntimeExports.jsxs("div", { className: clsx(styles$1.detailGroup, isExpanded ? styles$1.expanded : styles$1.collapsed, className), children: [jsxRuntimeExports.jsxs("button", { className: styles$1.detailHeading, onClick: toggleExpanded, type: "button", children: [jsxRuntimeExports.jsx("span", { children: name2 }), jsxRuntimeExports.jsx(IconChevronDown, {})] }), isExpanded ? children2 : null] });
 }
 reactExports.memo(function EntrySpanLinks({ getQuickLinks, span }) {
   const links = getQuickLinks(span);
@@ -45121,7 +45888,7 @@ function usePromise(promise) {
 }
 function EntrySpanLink({ name: name2, link: linkPromise }) {
   const link2 = usePromise(linkPromise);
-  return jsxRuntimeExports.jsxs(Link, { as: link2 ? void 0 : "span", className: clsx(styles.spanDetailPanelAttribute, styles.spanDetailPanelQuickLink), href: (link2 == null ? void 0 : link2.href) || "", children: [jsxRuntimeExports.jsx("span", { className: styles.spanDetailPanelAttributeKey, children: name2 }), jsxRuntimeExports.jsx("span", { className: clsx(styles.spanDetailPanelAttributeValue, styles.spanDetailPanelQuickLinkLabel), children: link2 ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [link2.label, link2.icon || jsxRuntimeExports.jsx(IconExternalSmall, { color: "gray-900" })] }) : jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Skeleton, { height: 18, width: 32 + name2.length * 8 }), jsxRuntimeExports.jsx(Skeleton, { height: 18, rounded: true, width: 18 })] }) })] });
+  return jsxRuntimeExports.jsxs(Link, { as: link2 ? void 0 : "span", className: clsx(styles$1.spanDetailPanelAttribute, styles$1.spanDetailPanelQuickLink), href: (link2 == null ? void 0 : link2.href) || "", children: [jsxRuntimeExports.jsx("span", { className: styles$1.spanDetailPanelAttributeKey, children: name2 }), jsxRuntimeExports.jsx("span", { className: clsx(styles$1.spanDetailPanelAttributeValue, styles$1.spanDetailPanelQuickLinkLabel), children: link2 ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [link2.label, link2.icon || jsxRuntimeExports.jsx(IconExternalSmall, { color: "gray-900" })] }) : jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Skeleton, { height: 18, width: 32 + name2.length * 8 }), jsxRuntimeExports.jsx(Skeleton, { height: 18, rounded: true, width: 18 })] }) })] });
 }
 function useImmediateStyle(ref) {
   const styleRef = reactExports.useRef({});
@@ -45280,10 +46047,10 @@ reactExports.memo(function MiniMap({ timelineRef, rows, scale }) {
       $timeline.removeEventListener("scroll", onScroll);
     };
   }, [timelineRef, thumbRatio, setThumbStyle]);
-  return jsxRuntimeExports.jsxs("div", { className: styles.mapContainer, ref: containerRef, style: {
+  return jsxRuntimeExports.jsxs("div", { className: styles$1.mapContainer, ref: containerRef, style: {
     width: thumbWidth > 0 ? mapWidth : "100%",
     height: MAP_HEIGHT
-  }, children: [jsxRuntimeExports.jsx("canvas", { className: styles.mapCanvas, height: MAP_HEIGHT * dpi, ref: canvasRef, style: { width: mapWidth, height: MAP_HEIGHT }, width: mapWidth * dpi }), jsxRuntimeExports.jsx("div", { className: styles.mapThumb, ref: thumbRef, style: {
+  }, children: [jsxRuntimeExports.jsx("canvas", { className: styles$1.mapCanvas, height: MAP_HEIGHT * dpi, ref: canvasRef, style: { width: mapWidth, height: MAP_HEIGHT }, width: mapWidth * dpi }), jsxRuntimeExports.jsx("div", { className: styles$1.mapThumb, ref: thumbRef, style: {
     transform: thumbStyle.transform,
     width: thumbWidth > 0 ? thumbWidth : `calc(100% - ${TIMELINE_PADDING * 2}px)`,
     top: 2,
@@ -45348,6 +46115,11 @@ const iconButtonVariants = cva([
 });
 const IconButton = reactExports.forwardRef(({ className, variant, size: size2, type = "button", ...props }, ref) => jsxRuntimeExports.jsx("button", { ref, type, className: cn$4(iconButtonVariants({ variant, size: size2, className })), ...props }));
 IconButton.displayName = "IconButton";
+const TooltipProvider = Provider;
+const Tooltip$1 = Root3;
+const TooltipTrigger$1 = Trigger;
+const TooltipContent$1 = reactExports.forwardRef(({ className, sideOffset = 8, showArrow = true, children: children2, ...props }, ref) => jsxRuntimeExports.jsx(Portal, { children: jsxRuntimeExports.jsxs(Content2, { ref, sideOffset, className: cn$4("z-[99999] flex items-center gap-1 rounded-[10px] bg-gray-1000 px-2 py-1.5 !text-label-13 text-background-100 shadow-md select-none", className), ...props, children: [children2, showArrow ? jsxRuntimeExports.jsx(Arrow2, { width: 11, height: 5, className: "fill-gray-1000" }) : null] }) }));
+TooltipContent$1.displayName = Content2.displayName;
 const ATTR_FILTER_REGEX = /(?:^|\s)(?<pair>(?<key>[\w.]+):(?<value>\S*))/g;
 function parseSpanSearchQuery(rawQuery) {
   var _a3, _b2, _c;
@@ -45724,15 +46496,22 @@ function computeSleepSegmentsFromSpan(_startMs, duration2, _events) {
     return [];
   return [{ startFraction: 0, endFraction: 1, status: "sleeping" }];
 }
+function runSegmentStatus(runStatus) {
+  if (runStatus === "failed")
+    return "failed";
+  if (runStatus === "running" || runStatus === "pending")
+    return "running";
+  return "completed";
+}
 function computeRunSegmentsFromSpan(startMs, duration2, activeStartMs, events, attributes) {
   const segments = [];
   if (duration2 <= 0)
     return segments;
   const sorted = [...events].map((e) => ({ name: e.name, time: getHighResInMs(e.timestamp) })).sort((a2, b2) => a2.time - b2.time);
+  const runData = attributes == null ? void 0 : attributes.data;
+  const runStatus = runData == null ? void 0 : runData.status;
   const hasRunCreated = sorted.some((e) => e.name === "run_created");
   if (!hasRunCreated) {
-    const runData = attributes == null ? void 0 : attributes.data;
-    const runStatus = runData == null ? void 0 : runData.status;
     return computeV1RunSegments(startMs, duration2, activeStartMs, runStatus);
   }
   const failedEvent = sorted.find((e) => e.name === "run_failed");
@@ -45751,7 +46530,7 @@ function computeRunSegmentsFromSpan(startMs, duration2, activeStartMs, events, a
   segments.push({
     startFraction: cursor,
     endFraction: 1,
-    status: failedEvent ? "failed" : "running"
+    status: failedEvent ? "failed" : runSegmentStatus(runStatus)
   });
   return segments;
 }
@@ -45772,7 +46551,7 @@ function computeV1RunSegments(startMs, duration2, activeStartMs, runStatus) {
   segments.push({
     startFraction: cursor,
     endFraction: 1,
-    status: runStatus === "failed" ? "failed" : "running"
+    status: runSegmentStatus(runStatus)
   });
   return segments;
 }
@@ -45841,6 +46620,10 @@ function useRowWindow(ref, rowCount, rowHeight, overscan = 12) {
   return range;
 }
 const ROW_HEIGHT_PX = 40;
+const runningStripes = "_runningStripes_62ud0_1";
+const styles = {
+  runningStripes
+};
 const TINY_BAR_BOX_SIZE_PX = 24;
 const TINY_BAR_WIDTH_PX = 4;
 const TIMELINE_PADDING_PX = 16;
@@ -45849,6 +46632,7 @@ const SEGMENT_CLASSES = {
   retrying: "bg-gray-400 border border-gray-500",
   waiting: "bg-gray-400 border border-gray-500",
   running: "bg-blue-200 border border-blue-500",
+  completed: "bg-blue-200 border border-blue-500",
   failed: "bg-red-200 border border-red-500",
   succeeded: "bg-green-200 border border-green-500",
   sleeping: "bg-gray-400 border border-gray-500",
@@ -45858,6 +46642,13 @@ const TIMELINE_INSET_STYLE = {
   left: TIMELINE_PADDING_PX,
   right: TIMELINE_PADDING_PX
 };
+const ACTIVE_SEGMENT_STATUSES = /* @__PURE__ */ new Set([
+  "running",
+  "received"
+]);
+function RunningStripes() {
+  return jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: styles.runningStripes });
+}
 function computeBarGeometry(startMs, endMs, viewStart, viewEnd, containerWidth) {
   const viewDuration = viewEnd - viewStart;
   const visibleStartMs = Math.max(startMs, viewStart);
@@ -45930,21 +46721,51 @@ function BoundaryArrow({ direction }) {
 function PlainBar({ bg, border, label }) {
   return jsxRuntimeExports.jsx("div", { className: "relative h-6 w-full min-w-1 rounded-[0.25rem] border", style: { background: bg, borderColor: border }, children: label ? jsxRuntimeExports.jsx(DurationLabel, { label }) : null });
 }
+function LeadInConnector({ leftPct, widthPct, label }) {
+  return jsxRuntimeExports.jsxs("div", { className: "absolute top-1/2 h-6 -translate-y-1/2", style: {
+    left: `calc(${leftPct}% + 0.5px)`,
+    width: `calc(${widthPct}% - 1px)`
+  }, children: [jsxRuntimeExports.jsx("div", { className: "absolute left-0 top-1/2 h-4 w-px -translate-y-1/2 bg-gray-500" }), jsxRuntimeExports.jsx("div", { className: "absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-gray-500" }), label ? jsxRuntimeExports.jsx(DurationLabel, { label }) : null] });
+}
 function SegmentBar({ segments }) {
   return jsxRuntimeExports.jsx("div", { className: "relative h-6 w-full", children: segments.map((seg, i) => {
+    if (seg.status === "queued") {
+      const leadInLabel = formatDurationPrecise(seg.fullDurationMs);
+      const showLeadInLabel = seg.pixelWidth >= Math.max(40, leadInLabel.length * 6 + 12);
+      return jsxRuntimeExports.jsx(LeadInConnector, { leftPct: seg.leftPct, widthPct: seg.widthPct, label: showLeadInLabel ? leadInLabel : null }, i);
+    }
     const label = formatDurationPrecise(seg.fullDurationMs);
     const showLabel = seg.pixelWidth >= Math.max(40, label.length * 6 + 12);
-    const isNarrowQueued = seg.status === "queued" && seg.pixelWidth < 20;
-    const overrideBg = isNarrowQueued ? "var(--ds-gray-400)" : void 0;
-    const overrideBorder = isNarrowQueued ? "var(--ds-gray-500)" : void 0;
-    return jsxRuntimeExports.jsx("div", { className: cn$4("absolute h-full rounded-[0.25rem]", SEGMENT_CLASSES[seg.status]), style: {
+    return jsxRuntimeExports.jsxs("div", { className: cn$4("absolute h-full overflow-hidden rounded-[0.25rem]", SEGMENT_CLASSES[seg.status]), style: {
       // 1px gap between adjacent segments, distributed equally.
       left: `calc(${seg.leftPct}% + 0.5px)`,
       width: `calc(${seg.widthPct}% - 1px)`,
-      minWidth: 1,
-      background: overrideBg,
-      borderColor: overrideBorder
-    }, children: showLabel ? jsxRuntimeExports.jsx(DurationLabel, { label }) : null }, i);
+      minWidth: 1
+    }, children: [ACTIVE_SEGMENT_STATUSES.has(seg.status) ? jsxRuntimeExports.jsx(RunningStripes, {}) : null, showLabel ? jsxRuntimeExports.jsx(DurationLabel, { label }) : null] }, i);
+  }) });
+}
+function formatMarkerTime(ms) {
+  const date2 = new Date(ms);
+  return date2.toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false
+  }) + "." + date2.getMilliseconds().toString().padStart(3, "0");
+}
+function AttrSetMarkers({ span, viewStart, viewDuration }) {
+  const markers2 = reactExports.useMemo(() => span.events.filter((e) => e.name === "attr_set"), [span.events]);
+  if (markers2.length === 0 || viewDuration <= 0)
+    return null;
+  return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: markers2.map((event, index2) => {
+    const timeMs = getHighResInMs(event.timestamp);
+    const frac = (timeMs - viewStart) / viewDuration;
+    if (frac < 0 || frac > 1)
+      return null;
+    return jsxRuntimeExports.jsxs(Tooltip$1, { children: [jsxRuntimeExports.jsx(TooltipTrigger$1, { asChild: true, children: jsxRuntimeExports.jsx("div", { "aria-label": "Attributes set", className: "absolute top-1/2 z-10 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 cursor-pointer items-center justify-center", style: { left: `${frac * 100}%` }, children: jsxRuntimeExports.jsx("div", { className: "h-2 w-2 rotate-45 rounded-[1px] border", style: {
+      backgroundColor: "var(--ds-teal-400)",
+      borderColor: "var(--ds-teal-900)"
+    } }) }) }), jsxRuntimeExports.jsxs(TooltipContent$1, { children: ["Attributes set · ", formatMarkerTime(timeMs)] })] }, `attr-set-${index2}`);
   }) });
 }
 const TimelineBar = reactExports.memo(function TimelineBar2({ span, viewStart, viewDuration, containerWidth, isSelected, isDimmed, onSelect }) {
@@ -45965,7 +46786,7 @@ const TimelineBar = reactExports.memo(function TimelineBar2({ span, viewStart, v
   const handleClick = reactExports.useCallback(() => {
     onSelect(span.spanId);
   }, [onSelect, span.spanId]);
-  return jsxRuntimeExports.jsx("div", { role: "treeitem", "aria-selected": isSelected, "aria-expanded": isSelected, "aria-level": 1, className: cn$4("group/timeline-row h-10 relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:hover:bg-gray-200 transition-opacity", isDimmed && "opacity-35"), onClick: handleClick, children: jsxRuntimeExports.jsx("div", { className: "absolute inset-y-0", style: TIMELINE_INSET_STYLE, children: jsxRuntimeExports.jsx("div", { className: "absolute top-1/2 h-6 -translate-y-1/2 rounded-[0.25rem]", style: getBarPositionStyle(geometry), children: geometry.mode.kind === "arrow" ? jsxRuntimeExports.jsx(BoundaryArrow, { direction: geometry.mode.direction }) : geometry.mode.kind === "tiny" ? jsxRuntimeExports.jsx("div", { className: "h-6 rounded-[0.25rem] border", style: { background: fallbackBg, borderColor: fallbackBorder } }) : segments.length > 0 ? jsxRuntimeExports.jsx(SegmentBar, { segments }) : jsxRuntimeExports.jsx(PlainBar, { bg: fallbackBg, border: fallbackBorder, label: showTotalLabel ? totalLabel : null }) }) }) });
+  return jsxRuntimeExports.jsx("div", { role: "treeitem", "aria-selected": isSelected, "aria-expanded": isSelected, "aria-level": 1, className: cn$4("group/timeline-row h-10 relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:hover:bg-gray-200 transition-opacity", isDimmed && "opacity-35"), onClick: handleClick, children: jsxRuntimeExports.jsxs("div", { className: "absolute inset-y-0", style: TIMELINE_INSET_STYLE, children: [jsxRuntimeExports.jsx("div", { className: "absolute top-1/2 h-6 -translate-y-1/2 rounded-[0.25rem]", style: getBarPositionStyle(geometry), children: geometry.mode.kind === "arrow" ? jsxRuntimeExports.jsx(BoundaryArrow, { direction: geometry.mode.direction }) : geometry.mode.kind === "tiny" ? jsxRuntimeExports.jsx("div", { className: "h-6 rounded-[0.25rem] border", style: { background: fallbackBg, borderColor: fallbackBorder } }) : segments.length > 0 ? jsxRuntimeExports.jsx(SegmentBar, { segments }) : jsxRuntimeExports.jsx(PlainBar, { bg: fallbackBg, border: fallbackBorder, label: showTotalLabel ? totalLabel : null }) }), jsxRuntimeExports.jsx(AttrSetMarkers, { span, viewStart, viewDuration })] }) });
 });
 const DELTA_CAP_HEIGHT_PX = 8;
 const DELTA_ROW_OFFSET_PX = 8;
@@ -46003,11 +46824,6 @@ function Timeline({ spans, viewStart, viewEnd, markers: markers2, selectedId, se
     Math.abs(marker2.value) > 1e-6 ? jsxRuntimeExports.jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-300", style: { left: `${marker2.position * 100}%` } }, String(marker2.value)) : null
   )) }), hoverFraction != null && jsxRuntimeExports.jsx("div", { className: "absolute inset-y-0 pointer-events-none z-10", style: TIMELINE_INSET_STYLE, children: jsxRuntimeExports.jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-500", style: { left: `${hoverFraction * 100}%` } }) }), jsxRuntimeExports.jsx("div", { style: { transform: `translateY(${start * ROW_HEIGHT_PX}px)` }, children: spans.slice(start, end).map((span) => jsxRuntimeExports.jsx(TimelineBar, { span, viewStart, viewDuration, containerWidth: timelineWidth, isSelected: selectedId === span.spanId, isDimmed: isSpanDimmedBySearch(span.spanId, searchResult), onSelect }, span.spanId)) }), altHeld && jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: TIMELINE_INSET_STYLE, children: gaps.map((gap) => jsxRuntimeExports.jsx(DeltaIndicator, { leftFrac: gap.leftFrac, rightFrac: gap.rightFrac, label: formatDuration(gap.gapMs, true), rowIndex: gap.rowIndex }, gap.rowIndex)) })] });
 }
-const TooltipProvider = Provider;
-const Tooltip$1 = Root3;
-const TooltipTrigger$1 = Trigger;
-const TooltipContent$1 = reactExports.forwardRef(({ className, sideOffset = 8, showArrow = true, children: children2, ...props }, ref) => jsxRuntimeExports.jsx(Portal, { children: jsxRuntimeExports.jsxs(Content2, { ref, sideOffset, className: cn$4("z-[99999] flex items-center gap-1 rounded-[10px] bg-gray-1000 px-2 py-1.5 !text-label-13 text-background-100 shadow-md select-none", className), ...props, children: [children2, showArrow ? jsxRuntimeExports.jsx(Arrow2, { width: 11, height: 5, className: "fill-gray-1000" }) : null] }) }));
-TooltipContent$1.displayName = Content2.displayName;
 const ActiveSpanContext = reactExports.createContext(null);
 ActiveSpanContext.displayName = "ActiveSpanContext";
 function ActiveSpanProvider({ spans, children: children2 }) {
@@ -46098,115 +46914,6 @@ function useServerConfig() {
   }
   return context;
 }
-function setRef(ref, value) {
-  if (typeof ref === "function") {
-    return ref(value);
-  } else if (ref !== null && ref !== void 0) {
-    ref.current = value;
-  }
-}
-function composeRefs(...refs) {
-  return (node2) => {
-    let hasCleanup = false;
-    const cleanups = refs.map((ref) => {
-      const cleanup = setRef(ref, node2);
-      if (!hasCleanup && typeof cleanup == "function") {
-        hasCleanup = true;
-      }
-      return cleanup;
-    });
-    if (hasCleanup) {
-      return () => {
-        for (let i = 0; i < cleanups.length; i++) {
-          const cleanup = cleanups[i];
-          if (typeof cleanup == "function") {
-            cleanup();
-          } else {
-            setRef(refs[i], null);
-          }
-        }
-      };
-    }
-  };
-}
-function useComposedRefs(...refs) {
-  return reactExports.useCallback(composeRefs(...refs), refs);
-}
-var Slot = reactExports.forwardRef((props, forwardedRef) => {
-  const { children: children2, ...slotProps } = props;
-  const childrenArray = reactExports.Children.toArray(children2);
-  const slottable = childrenArray.find(isSlottable);
-  if (slottable) {
-    const newElement = slottable.props.children;
-    const newChildren = childrenArray.map((child) => {
-      if (child === slottable) {
-        if (reactExports.Children.count(newElement) > 1) return reactExports.Children.only(null);
-        return reactExports.isValidElement(newElement) ? newElement.props.children : null;
-      } else {
-        return child;
-      }
-    });
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: reactExports.isValidElement(newElement) ? reactExports.cloneElement(newElement, void 0, newChildren) : null });
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: children2 });
-});
-Slot.displayName = "Slot";
-var SlotClone = reactExports.forwardRef((props, forwardedRef) => {
-  const { children: children2, ...slotProps } = props;
-  if (reactExports.isValidElement(children2)) {
-    const childrenRef = getElementRef(children2);
-    return reactExports.cloneElement(children2, {
-      ...mergeProps(slotProps, children2.props),
-      // @ts-ignore
-      ref: forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef
-    });
-  }
-  return reactExports.Children.count(children2) > 1 ? reactExports.Children.only(null) : null;
-});
-SlotClone.displayName = "SlotClone";
-var Slottable = ({ children: children2 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: children2 });
-};
-function isSlottable(child) {
-  return reactExports.isValidElement(child) && child.type === Slottable;
-}
-function mergeProps(slotProps, childProps) {
-  const overrideProps = { ...childProps };
-  for (const propName in childProps) {
-    const slotPropValue = slotProps[propName];
-    const childPropValue = childProps[propName];
-    const isHandler = /^on[A-Z]/.test(propName);
-    if (isHandler) {
-      if (slotPropValue && childPropValue) {
-        overrideProps[propName] = (...args) => {
-          childPropValue(...args);
-          slotPropValue(...args);
-        };
-      } else if (slotPropValue) {
-        overrideProps[propName] = slotPropValue;
-      }
-    } else if (propName === "style") {
-      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
-    } else if (propName === "className") {
-      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
-    }
-  }
-  return { ...slotProps, ...overrideProps };
-}
-function getElementRef(element2) {
-  var _a3, _b2;
-  let getter = (_a3 = Object.getOwnPropertyDescriptor(element2.props, "ref")) == null ? void 0 : _a3.get;
-  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element2.ref;
-  }
-  getter = (_b2 = Object.getOwnPropertyDescriptor(element2, "ref")) == null ? void 0 : _b2.get;
-  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element2.props.ref;
-  }
-  return element2.props.ref || element2.ref;
-}
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
@@ -48559,7 +49266,7 @@ const mermaid3ZIDBTTL = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.def
   Mermaid: Nt
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  _r as $,
+  ContextCardProvider as $,
   Anchor as A,
   Button as B,
   Content as C,
@@ -48573,85 +49280,90 @@ export {
   Ks as K,
   LoaderCircle as L,
   fetchWorkflowsManifest as M,
-  Spinner as N,
-  cn$4 as O,
+  cn$4 as N,
+  DataInspector as O,
   Primitive as P,
   Qe as Q,
   R,
   ServerConfigProvider as S,
   Tooltip as T,
-  Skeleton$1 as U,
+  DecryptClickContext as U,
   VISUALLY_HIDDEN_STYLES as V,
-  DecryptClickContext as W,
-  isEncryptedMarker as X,
-  Yr as Y,
-  formatDuration as Z,
-  DataInspector as _,
+  Button$1 as W,
+  Spinner as X,
+  Lock as Y,
+  RESERVED_ATTRIBUTE_KEY_PREFIX as Z,
+  useHasContextCardProvider as _,
   TooltipTrigger as a,
-  Button$1 as a0,
-  Lock as a1,
-  RunClickContext as a2,
-  StreamClickContext as a3,
-  isExpiredMarker as a4,
-  isDoStreamStep as a5,
-  extractConversation as a6,
-  hasEncryptedFields as a7,
-  EVENT_DATA_REF_FIELDS as a8,
-  useSidebarDataOptional as a9,
-  fetchStreams as aA,
-  Slot as aB,
-  Slottable as aC,
-  buttonVariants as aD,
-  fetchEvent as aE,
-  fetchEventsByCorrelationId as aF,
-  isEncryptedData as aG,
-  hydrateData as aH,
-  getWebRevivers as aI,
-  LIVE_UPDATE_INTERVAL_MS as aJ,
-  getEncryptionKeyForRun as aK,
-  StreamViewer as aL,
-  composeRefs as aM,
-  useFloating as aN,
-  offset as aO,
-  shift as aP,
-  limitShift as aQ,
-  flip as aR,
-  size as aS,
-  arrow as aT,
-  hide as aU,
-  autoUpdate as aV,
-  cancelRun as aW,
-  reenqueueRun as aX,
-  wakeUpRun as aY,
-  resumeHook as aZ,
-  recreateRun as a_,
-  clsx as aa,
-  useRowWindow as ab,
-  isSpanDimmedBySearch as ac,
-  ROW_HEIGHT_PX as ad,
-  getSpanDurationMs as ae,
-  formatDurationPrecise as af,
-  TooltipProvider as ag,
-  ActiveSpanProvider as ah,
-  useActiveSpan as ai,
-  useSidebarData as aj,
-  searchSpans as ak,
-  computeRootBounds as al,
-  computeTimeMarkers as am,
-  getHighResInMs as an,
-  TIMELINE_PADDING_PX as ao,
-  Timeline as ap,
-  TimelineHeader as aq,
-  IconButton as ar,
-  Tooltip$1 as as,
-  TooltipTrigger$1 as at,
-  TooltipContent$1 as au,
-  SidebarDataProvider as av,
-  hydrateResourceIOWithKey as aw,
-  hydrateResourceIO as ax,
-  fetchHook as ay,
-  fetchStep as az,
+  cancelRun as a$,
+  ContextCardTrigger as a0,
+  Skeleton$1 as a1,
+  Yr as a2,
+  isEncryptedMarker as a3,
+  formatDuration as a4,
+  _r as a5,
+  RunClickContext as a6,
+  StreamClickContext as a7,
+  isExpiredMarker as a8,
+  isDoStreamStep as a9,
+  SidebarDataProvider as aA,
+  hydrateResourceIOWithKey as aB,
+  hydrateResourceIO as aC,
+  fetchHook as aD,
+  fetchStep as aE,
+  fetchStreams as aF,
+  Slot as aG,
+  Slottable as aH,
+  buttonVariants as aI,
+  fetchEvent as aJ,
+  fetchEventsByCorrelationId as aK,
+  isEncryptedData as aL,
+  hydrateData as aM,
+  getWebRevivers as aN,
+  LIVE_UPDATE_INTERVAL_MS as aO,
+  getEncryptionKeyForRun as aP,
+  StreamViewer as aQ,
+  composeRefs as aR,
+  useFloating as aS,
+  offset as aT,
+  shift as aU,
+  limitShift as aV,
+  flip as aW,
+  size as aX,
+  arrow as aY,
+  hide as aZ,
+  autoUpdate as a_,
+  extractConversation as aa,
+  hasEncryptedFields as ab,
+  EVENT_DATA_REF_FIELDS as ac,
+  useSidebarDataOptional as ad,
+  clsx as ae,
+  useRowWindow as af,
+  isSpanDimmedBySearch as ag,
+  ROW_HEIGHT_PX as ah,
+  getSpanDurationMs as ai,
+  formatDurationPrecise as aj,
+  TooltipProvider as ak,
+  ActiveSpanProvider as al,
+  useActiveSpan as am,
+  useSidebarData as an,
+  searchSpans as ao,
+  computeRootBounds as ap,
+  computeTimeMarkers as aq,
+  getHighResInMs as ar,
+  TIMELINE_PADDING_PX as as,
+  Timeline as at,
+  TimelineHeader as au,
+  IconButton as av,
+  Tooltip$1 as aw,
+  TooltipTrigger$1 as ax,
+  TooltipContent$1 as ay,
+  useReducedMotion as az,
   TooltipContent as b,
+  reenqueueRun as b0,
+  wakeUpRun as b1,
+  resumeHook as b2,
+  recreateRun as b3,
   createLucideIcon as c,
   cn as d,
   Toaster as e,