@workflow/web-shared 5.0.0-beta.8 → 5.0.0-beta.9

package/dist/components/ui/icon-button.d.ts

@@ -0,0 +1,13 @@
+import { type VariantProps } from 'class-variance-authority';
+import type * as React from 'react';
+declare const iconButtonVariants: (props?: ({
+    variant?: "muted" | "tertiary" | null | undefined;
+    size?: "small" | "tiny" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type IconButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> & VariantProps<typeof iconButtonVariants> & {
+    'aria-label': string;
+    type?: 'button' | 'submit' | 'reset';
+};
+export declare function IconButton({ className, variant, size, type, ...props }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
+export { iconButtonVariants };
+//# sourceMappingURL=icon-button.d.ts.map

package/dist/components/ui/icon-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,QAAA,MAAM,kBAAkB;;;8EAyBvB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,MAAM,CACP,GACC,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IACxC,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACtC,CAAC;AAEJ,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAe,EACf,GAAG,KAAK,EACT,EAAE,eAAe,2CAQjB;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/ui/icon-button.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+const iconButtonVariants = cva([
+    'm-0 inline-flex shrink-0 appearance-none items-center justify-center border-0 bg-transparent p-0 align-baseline font-inherit no-underline [background:none] [-webkit-appearance:none] [-webkit-tap-highlight-color:transparent]',
+    'transition-colors duration-150 ease-in-out',
+    'enabled:cursor-pointer disabled:cursor-not-allowed disabled:opacity-40',
+    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--ds-focus-color)] focus-visible:outline-offset-2',
+], {
+    variants: {
+        variant: {
+            tertiary: 'text-gray-900 enabled:hover:bg-gray-alpha-200 enabled:hover:text-gray-1000 enabled:active:bg-gray-alpha-200 focus-visible:text-gray-1000',
+            muted: 'text-gray-900 enabled:hover:bg-gray-alpha-200 enabled:hover:text-gray-1000 enabled:active:bg-gray-alpha-200 focus-visible:text-gray-1000',
+        },
+        size: {
+            tiny: 'h-6 w-6 rounded-[4px] [&_svg]:h-4 [&_svg]:w-4',
+            small: 'h-8 w-8 rounded-md [&_svg]:h-4 [&_svg]:w-4',
+        },
+    },
+    defaultVariants: {
+        variant: 'tertiary',
+        size: 'tiny',
+    },
+});
+export function IconButton({ className, variant, size, type = 'button', ...props }) {
+    return (_jsx("button", { type: type, className: cn(iconButtonVariants({ variant, size, className })), ...props }));
+}
+export { iconButtonVariants };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi1idXR0b24uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy91aS9pY29uLWJ1dHRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxHQUFHLEVBQXFCLE1BQU0sMEJBQTBCLENBQUM7QUFFbEUsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBRXJDLE1BQU0sa0JBQWtCLEdBQUcsR0FBRyxDQUM1QjtJQUNFLGlPQUFpTztJQUNqTyw0Q0FBNEM7SUFDNUMsd0VBQXdFO0lBQ3hFLDRIQUE0SDtDQUM3SCxFQUNEO0lBQ0UsUUFBUSxFQUFFO1FBQ1IsT0FBTyxFQUFFO1lBQ1AsUUFBUSxFQUNOLDBJQUEwSTtZQUM1SSxLQUFLLEVBQ0gsMElBQTBJO1NBQzdJO1FBQ0QsSUFBSSxFQUFFO1lBQ0osSUFBSSxFQUFFLCtDQUErQztZQUNyRCxLQUFLLEVBQUUsNENBQTRDO1NBQ3BEO0tBQ0Y7SUFDRCxlQUFlLEVBQUU7UUFDZixPQUFPLEVBQUUsVUFBVTtRQUNuQixJQUFJLEVBQUUsTUFBTTtLQUNiO0NBQ0YsQ0FDRixDQUFDO0FBV0YsTUFBTSxVQUFVLFVBQVUsQ0FBQyxFQUN6QixTQUFTLEVBQ1QsT0FBTyxFQUNQLElBQUksRUFDSixJQUFJLEdBQUcsUUFBUSxFQUNmLEdBQUcsS0FBSyxFQUNRO0lBQ2hCLE9BQU8sQ0FDTCxpQkFDRSxJQUFJLEVBQUUsSUFBSSxFQUNWLFNBQVMsRUFBRSxFQUFFLENBQUMsa0JBQWtCLENBQUMsRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLFNBQVMsRUFBRSxDQUFDLENBQUMsS0FDM0QsS0FBSyxHQUNULENBQ0gsQ0FBQztBQUNKLENBQUM7QUFFRCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGN2YSwgdHlwZSBWYXJpYW50UHJvcHMgfSBmcm9tICdjbGFzcy12YXJpYW5jZS1hdXRob3JpdHknO1xuaW1wb3J0IHR5cGUgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjbiB9IGZyb20gJy4uLy4uL2xpYi91dGlscyc7XG5cbmNvbnN0IGljb25CdXR0b25WYXJpYW50cyA9IGN2YShcbiAgW1xuICAgICdtLTAgaW5saW5lLWZsZXggc2hyaW5rLTAgYXBwZWFyYW5jZS1ub25lIGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNlbnRlciBib3JkZXItMCBiZy10cmFuc3BhcmVudCBwLTAgYWxpZ24tYmFzZWxpbmUgZm9udC1pbmhlcml0IG5vLXVuZGVybGluZSBbYmFja2dyb3VuZDpub25lXSBbLXdlYmtpdC1hcHBlYXJhbmNlOm5vbmVdIFstd2Via2l0LXRhcC1oaWdobGlnaHQtY29sb3I6dHJhbnNwYXJlbnRdJyxcbiAgICAndHJhbnNpdGlvbi1jb2xvcnMgZHVyYXRpb24tMTUwIGVhc2UtaW4tb3V0JyxcbiAgICAnZW5hYmxlZDpjdXJzb3ItcG9pbnRlciBkaXNhYmxlZDpjdXJzb3Itbm90LWFsbG93ZWQgZGlzYWJsZWQ6b3BhY2l0eS00MCcsXG4gICAgJ2ZvY3VzLXZpc2libGU6b3V0bGluZSBmb2N1cy12aXNpYmxlOm91dGxpbmUtMiBmb2N1cy12aXNpYmxlOm91dGxpbmUtW3ZhcigtLWRzLWZvY3VzLWNvbG9yKV0gZm9jdXMtdmlzaWJsZTpvdXRsaW5lLW9mZnNldC0yJyxcbiAgXSxcbiAge1xuICAgIHZhcmlhbnRzOiB7XG4gICAgICB2YXJpYW50OiB7XG4gICAgICAgIHRlcnRpYXJ5OlxuICAgICAgICAgICd0ZXh0LWdyYXktOTAwIGVuYWJsZWQ6aG92ZXI6YmctZ3JheS1hbHBoYS0yMDAgZW5hYmxlZDpob3Zlcjp0ZXh0LWdyYXktMTAwMCBlbmFibGVkOmFjdGl2ZTpiZy1ncmF5LWFscGhhLTIwMCBmb2N1cy12aXNpYmxlOnRleHQtZ3JheS0xMDAwJyxcbiAgICAgICAgbXV0ZWQ6XG4gICAgICAgICAgJ3RleHQtZ3JheS05MDAgZW5hYmxlZDpob3ZlcjpiZy1ncmF5LWFscGhhLTIwMCBlbmFibGVkOmhvdmVyOnRleHQtZ3JheS0xMDAwIGVuYWJsZWQ6YWN0aXZlOmJnLWdyYXktYWxwaGEtMjAwIGZvY3VzLXZpc2libGU6dGV4dC1ncmF5LTEwMDAnLFxuICAgICAgfSxcbiAgICAgIHNpemU6IHtcbiAgICAgICAgdGlueTogJ2gtNiB3LTYgcm91bmRlZC1bNHB4XSBbJl9zdmddOmgtNCBbJl9zdmddOnctNCcsXG4gICAgICAgIHNtYWxsOiAnaC04IHctOCByb3VuZGVkLW1kIFsmX3N2Z106aC00IFsmX3N2Z106dy00JyxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBkZWZhdWx0VmFyaWFudHM6IHtcbiAgICAgIHZhcmlhbnQ6ICd0ZXJ0aWFyeScsXG4gICAgICBzaXplOiAndGlueScsXG4gICAgfSxcbiAgfVxuKTtcblxuZXhwb3J0IHR5cGUgSWNvbkJ1dHRvblByb3BzID0gT21pdDxcbiAgUmVhY3QuQnV0dG9uSFRNTEF0dHJpYnV0ZXM8SFRNTEJ1dHRvbkVsZW1lbnQ+LFxuICAndHlwZSdcbj4gJlxuICBWYXJpYW50UHJvcHM8dHlwZW9mIGljb25CdXR0b25WYXJpYW50cz4gJiB7XG4gICAgJ2FyaWEtbGFiZWwnOiBzdHJpbmc7XG4gICAgdHlwZT86ICdidXR0b24nIHwgJ3N1Ym1pdCcgfCAncmVzZXQnO1xuICB9O1xuXG5leHBvcnQgZnVuY3Rpb24gSWNvbkJ1dHRvbih7XG4gIGNsYXNzTmFtZSxcbiAgdmFyaWFudCxcbiAgc2l6ZSxcbiAgdHlwZSA9ICdidXR0b24nLFxuICAuLi5wcm9wc1xufTogSWNvbkJ1dHRvblByb3BzKSB7XG4gIHJldHVybiAoXG4gICAgPGJ1dHRvblxuICAgICAgdHlwZT17dHlwZX1cbiAgICAgIGNsYXNzTmFtZT17Y24oaWNvbkJ1dHRvblZhcmlhbnRzKHsgdmFyaWFudCwgc2l6ZSwgY2xhc3NOYW1lIH0pKX1cbiAgICAgIHsuLi5wcm9wc31cbiAgICAvPlxuICApO1xufVxuXG5leHBvcnQgeyBpY29uQnV0dG9uVmFyaWFudHMgfTtcbiJdfQ==

package/dist/styles.css

@@ -36,6 +36,9 @@
   --ds-gray-alpha-700: hsla(0, 0%, 0%, 0.44);
   --ds-gray-alpha-1000: hsla(0, 0%, 0%, 0.91);
 
+  /* Focus */
+  --ds-focus-color: var(--ds-blue-700);
+
   /* Blue */
   --ds-blue-100: hsl(212, 100%, 97%);
   --ds-blue-200: hsl(210, 100%, 96%);
@@ -126,6 +129,8 @@
   --ds-gray-alpha-700: rgba(255, 255, 255, 0.45);
   --ds-gray-alpha-1000: rgba(255, 255, 255, 0.92);
 
+  --ds-focus-color: var(--ds-blue-900);
+
   --ds-blue-100: hsl(216, 50%, 12%);
   --ds-blue-200: hsl(214, 59%, 15%);
   --ds-blue-300: hsl(213, 71%, 20%);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@workflow/web-shared",
   "description": "Shared components for Workflow Observability UI",
-  "version": "5.0.0-beta.8",
+  "version": "5.0.0-beta.9",
   "private": false,
   "files": [
     "dist",
@@ -53,7 +53,7 @@
     "streamdown": "2.3.0",
     "tailwind-merge": "3.5.0",
     "tailwindcss": "4",
-    "@workflow/core": "5.0.0-beta.8",
+    "@workflow/core": "5.0.0-beta.9",
     "@workflow/utils": "5.0.0-beta.3",
     "@workflow/world": "5.0.0-beta.5"
   },

package/src/components/index.ts

@@ -32,6 +32,7 @@ export {
   type DecryptClickContextValue,
 } from './ui/data-inspector';
 export { DecryptButton } from './ui/decrypt-button';
+export { IconButton } from './ui/icon-button';
 export { LoadMoreButton } from './ui/load-more-button';
 export { MenuDropdown, type MenuDropdownOption } from './ui/menu-dropdown';
 export { Spinner } from './ui/spinner';

package/src/components/new-trace-viewer/components/event-list.tsx

@@ -3,11 +3,12 @@ import { cn } from '../../../lib/utils';
 import type { Span } from '../../trace-viewer/types';
 import { formatDuration } from '../../trace-viewer/util/timing';
 import {
-  WorkflowIcon,
-  WebhookIcon,
   SleepIcon,
   StepForwardIcon,
+  WebhookIcon,
+  WorkflowIcon,
 } from '../icons';
+import { isSpanDimmedBySearch, type SpanSearchResult } from '../search';
 import { getSpanDurationMs } from '../utils';
 import { MiddleTruncate } from './middle-truncate/middle-truncate';
 
@@ -41,10 +42,12 @@ function getEventStyle(resource: string, isErrored: boolean): EventStyle {
 const EventRow = ({
   span,
   isSelected,
+  isDimmed,
   onSelectSpan,
 }: {
   span: Span;
   isSelected: boolean;
+  isDimmed?: boolean;
   onSelectSpan: (spanId: string) => void;
 }) => {
   const durationMs = getSpanDurationMs(span);
@@ -58,8 +61,9 @@ const EventRow = ({
   return (
     <li
       className={cn(
-        'relative overflow-clip group after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-gray-alpha-400',
-        ROW_HEIGHT_CLASS
+        'relative overflow-clip group transition-opacity',
+        ROW_HEIGHT_CLASS,
+        isDimmed && 'opacity-35'
       )}
       role="treeitem"
       aria-selected={isSelected}
@@ -91,20 +95,27 @@ const EventRow = ({
 const EventList = ({
   spans,
   activeSpanId,
+  searchResult,
   onSelectSpan,
 }: {
   spans: Span[];
   activeSpanId: string | null;
+  searchResult: SpanSearchResult;
   onSelectSpan: (spanId: string) => void;
 }) => {
   return (
-    <ul id="event-list" role="tree" className="block min-h-0 overflow-visible">
+    <ul
+      id="event-list"
+      role="tree"
+      className="block min-h-0 overflow-visible divide-y divide-gray-alpha-400 border-b border-gray-alpha-400"
+    >
       {spans.map((span) => {
         return (
           <EventRow
             key={span.spanId}
             span={span}
             isSelected={span.spanId === activeSpanId}
+            isDimmed={isSpanDimmedBySearch(span.spanId, searchResult)}
             onSelectSpan={onSelectSpan}
           />
         );

package/src/components/new-trace-viewer/components/timeline.tsx

@@ -7,6 +7,7 @@ import { cn } from '../../../lib/utils';
 import type { Span } from '../../trace-viewer/types';
 import { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';
 import type { Segment, SegmentStatus, TimeMarker } from '../utils';
+import { isSpanDimmedBySearch, type SpanSearchResult } from '../search';
 import {
   computeSpanGaps,
   computeSpanSegments,
@@ -264,6 +265,7 @@ const TimelineBar = memo(function TimelineBar({
   viewDuration,
   containerWidth,
   isSelected,
+  isDimmed,
   onSelect,
 }: {
   span: Span;
@@ -271,6 +273,7 @@ const TimelineBar = memo(function TimelineBar({
   viewDuration: number;
   containerWidth: number;
   isSelected: boolean;
+  isDimmed?: boolean;
   onSelect: (spanId: string) => void;
 }): ReactNode {
   const startMs = getHighResInMs(span.startTime);
@@ -323,12 +326,15 @@ const TimelineBar = memo(function TimelineBar({
       aria-selected={isSelected}
       aria-expanded={isSelected}
       aria-level={1}
-      className="group/timeline-row h-10 relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:hover:bg-gray-200"
+      className={cn(
+        '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}
     >
       <div className="absolute inset-y-0" style={TIMELINE_INSET_STYLE}>
         <div
-          className="absolute top-1/2 h-6 -translate-y-1/2"
+          className="absolute top-1/2 h-6 -translate-y-1/2 rounded-[0.25rem]"
           style={getBarPositionStyle(geometry)}
         >
           {geometry.mode.kind === 'arrow' ? (
@@ -448,6 +454,7 @@ export function Timeline({
   viewEnd,
   markers,
   selectedId,
+  searchResult,
   onSelect,
   hoverFraction,
   altHeld = false,
@@ -457,6 +464,7 @@ export function Timeline({
   viewEnd: number;
   markers: TimeMarker[];
   selectedId: string | null;
+  searchResult: SpanSearchResult;
   onSelect: (spanId: string) => void;
   hoverFraction?: number | null;
   altHeld?: boolean;
@@ -518,6 +526,7 @@ export function Timeline({
           viewDuration={viewDuration}
           containerWidth={timelineWidth}
           isSelected={selectedId === span.spanId}
+          isDimmed={isSpanDimmedBySearch(span.spanId, searchResult)}
           onSelect={onSelect}
         />
       ))}

package/src/components/new-trace-viewer/detail-panel.tsx

@@ -4,6 +4,7 @@ import { X } from 'lucide-react';
 import type { ReactNode } from 'react';
 import type { Span } from '../trace-viewer/types';
 import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
+import { IconButton } from '../ui/icon-button';
 import { getSpanDurationMs } from './utils';
 
 interface DetailPanelProps {
@@ -27,13 +28,9 @@ export function DetailPanel({
         <span className="text-sm font-medium text-gray-1000 truncate">
           {span.name}
         </span>
-        <button
-          type="button"
-          className="p-1 rounded-md text-gray-1000 hover:bg-gray-alpha-100 transition-colors"
-          onClick={onClose}
-        >
+        <IconButton aria-label="Close span details" onClick={onClose}>
           <X className="w-4 h-4" />
-        </button>
+        </IconButton>
       </div>
       <div className="overflow-y-auto p-3 space-y-3">
         <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-sm">

package/src/components/new-trace-viewer/search.ts

@@ -0,0 +1,178 @@
+import type { Span } from '../trace-viewer/types';
+
+const ATTR_FILTER_REGEX = /(?:^|\s)(?<pair>(?<key>[\w.]+):(?<value>\S*))/g;
+
+export interface SpanAttributeFilter {
+  key: string;
+  value: string;
+}
+
+export interface ParsedSpanSearchQuery {
+  text: string;
+  attributes: SpanAttributeFilter[];
+}
+
+export interface SpanSearchResult {
+  isActive: boolean;
+  matchedSpanIds: Set<string>;
+  matchingSpans: Span[];
+  query: ParsedSpanSearchQuery;
+}
+
+export function parseSpanSearchQuery(rawQuery: string): ParsedSpanSearchQuery {
+  const attributes: SpanAttributeFilter[] = [];
+  for (const match of rawQuery.matchAll(ATTR_FILTER_REGEX)) {
+    const key = match.groups?.key?.trim();
+    if (!key) continue;
+    attributes.push({
+      key,
+      value: (match.groups?.value ?? '').toLocaleLowerCase(),
+    });
+  }
+
+  const text = rawQuery
+    .replace(ATTR_FILTER_REGEX, ' ')
+    .replace(/\s{2,}/g, ' ')
+    .trim()
+    .toLocaleLowerCase();
+
+  return { text, attributes };
+}
+
+export function isSpanDimmedBySearch(
+  spanId: string,
+  result: SpanSearchResult
+): boolean {
+  return result.isActive && !result.matchedSpanIds.has(spanId);
+}
+
+export function searchSpans(spans: Span[], rawQuery: string): SpanSearchResult {
+  const query = parseSpanSearchQuery(rawQuery);
+  const isActive = Boolean(query.text || query.attributes.length);
+  const matchingSpans = isActive
+    ? spans.filter((span) => spanMatchesQuery(span, query))
+    : spans;
+
+  return {
+    isActive,
+    matchedSpanIds: new Set(matchingSpans.map((span) => span.spanId)),
+    matchingSpans,
+    query,
+  };
+}
+
+function spanMatchesQuery(span: Span, query: ParsedSpanSearchQuery): boolean {
+  if (query.text && !spanMatchesText(span, query.text)) {
+    return false;
+  }
+
+  return query.attributes.every(({ key, value }) =>
+    spanMatchesAttribute(span, key, value)
+  );
+}
+
+function spanMatchesText(span: Span, text: string): boolean {
+  return [
+    span.name,
+    span.spanId,
+    span.resource,
+    span.library.name,
+    span.library.version,
+  ]
+    .filter((value): value is string => typeof value === 'string')
+    .some((value) => value.toLocaleLowerCase().includes(text));
+}
+
+function spanMatchesAttribute(
+  span: Span,
+  key: string,
+  expectedValue: string
+): boolean {
+  const candidates = getSearchValues(span, key);
+  if (!candidates.length) return false;
+
+  if (!expectedValue) {
+    return candidates.some((value) => value != null);
+  }
+
+  return candidates.some((value) =>
+    valueToSearchString(value).toLocaleLowerCase().includes(expectedValue)
+  );
+}
+
+function getSearchValues(span: Span, key: string): unknown[] {
+  const candidates: unknown[] = [];
+  const normalizedKey = key.toLocaleLowerCase();
+
+  switch (normalizedKey) {
+    case 'id':
+    case 'spanid':
+    case 'span.id':
+      candidates.push(span.spanId);
+      break;
+    case 'name':
+      candidates.push(span.name);
+      break;
+    case 'resource':
+      candidates.push(span.resource);
+      break;
+    case 'library':
+    case 'library.name':
+      candidates.push(span.library.name);
+      break;
+    case 'library.version':
+      candidates.push(span.library.version);
+      break;
+    case 'status':
+    case 'status.code':
+      candidates.push(span.status.code);
+      break;
+  }
+
+  candidates.push(getOwnProperty(span.attributes, key));
+  candidates.push(getPathValue(span.attributes, key));
+
+  if (!normalizedKey.startsWith('data.')) {
+    candidates.push(getPathValue(span.attributes.data, key));
+  }
+
+  return candidates.filter((value) => value !== undefined);
+}
+
+function getOwnProperty(source: unknown, key: string): unknown {
+  if (!source || typeof source !== 'object') return undefined;
+  if (!Object.hasOwn(source, key)) return undefined;
+  return (source as Record<string, unknown>)[key];
+}
+
+function getPathValue(source: unknown, path: string): unknown {
+  if (!source || typeof source !== 'object') return undefined;
+
+  let current: unknown = source;
+  for (const segment of path.split('.')) {
+    if (!segment) return undefined;
+    current = getOwnProperty(current, segment);
+    if (current === undefined) return undefined;
+  }
+
+  return current;
+}
+
+function valueToSearchString(value: unknown): string {
+  if (value instanceof Date) return value.toISOString();
+  if (typeof value === 'string') return value;
+  if (
+    value == null ||
+    typeof value === 'number' ||
+    typeof value === 'boolean' ||
+    typeof value === 'bigint'
+  ) {
+    return String(value);
+  }
+
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}