Trace

<script lang="ts">
  import type { TraceProps } from './types.js';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: TraceProps = $props();
</script>
<div
  data-slot="trace"
  {...props}
  class={cn(
    'gap-2 *:has-[>[data-slot=trace-line]]:rounded-md *:has-[>[data-slot=trace-line]]:focus-visible:ring-3 *:has-[>[data-slot=trace-line]]:focus-visible:ring-ring/50 flex w-full min-w-0 flex-col *:has-[>[data-slot=trace-line]]:flex *:has-[>[data-slot=trace-line]]:w-fit *:has-[>[data-slot=trace-line]]:max-w-full *:has-[>[data-slot=trace-line]]:min-w-0 *:has-[>[data-slot=trace-line]]:text-left *:has-[>[data-slot=trace-line]]:outline-none',
    classProp,
  )}
>
  {@render children?.()}
</div>

<script lang="ts">
  import type { TraceCollapsibleProps } from './types.js';
  import { cn } from 'cn';
  import { Collapsible } from '../collapsible/index.js';
  let { open = $bindable(), class: classProp, ...props }: TraceCollapsibleProps = $props();
</script>
<Collapsible data-slot="trace-collapsible" bind:open {...props} class={cn('flex w-full min-w-0 flex-col', classProp)} />

<script lang="ts">
  import type { TraceCollapsibleContentProps } from './types.js';
  import { cn } from 'cn';
  import { CollapsibleContent } from '../collapsible/index.js';
  let { children, class: classProp, ...props }: TraceCollapsibleContentProps = $props();
</script>
<CollapsibleContent
  data-slot="trace-collapsible-content"
  class="duration-200 h-(--collapsible-panel-height) min-w-0 overflow-hidden transition-[height] data-ending-style:h-0 data-starting-style:h-0"
  {...props}
>
  <div data-slot="trace-collapsible-content-inner" class={cn('mt-2 mb-1 ml-[calc(--spacing(2)-1px)] border-l pr-1 pl-4 leading-relaxed min-w-0 wrap-break-word text-muted-foreground', classProp)}>
    {@render children?.()}
  </div>
</CollapsibleContent>

<script lang="ts">
  import type { TraceCollapsibleTriggerProps } from './types.js';
  import { cn } from 'cn';
  import { CollapsibleTrigger } from '../collapsible/index.js';
  import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
  import TraceIcon from './TraceIcon.svelte';
  let { children, class: classProp, ...props }: TraceCollapsibleTriggerProps = $props();
</script>
<CollapsibleTrigger
  data-slot="trace-collapsible-trigger"
  {...props}
  class={cn(
    'gap-1 rounded-md focus-visible:ring-3 focus-visible:ring-ring/50 group/trace-collapsible-trigger flex w-fit max-w-full min-w-0 cursor-pointer items-center text-left text-muted-foreground transition-colors outline-none hover:text-foreground has-[[data-status=error]]:text-destructive',
    classProp,
  )}
>
  {@render children?.()}
  <TraceIcon class="transition-transform group-aria-expanded/trace-collapsible-trigger:rotate-90">
    <ChevronRightIcon />
  </TraceIcon>
</CollapsibleTrigger>

<script lang="ts">
  import type { TraceDescriptionProps } from './types.js';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: TraceDescriptionProps = $props();
</script>
<span data-slot="trace-description" {...props} class={cn('shrink-0 text-muted-foreground/70 tabular-nums', classProp)}>
  {@render children?.()}
</span>

<script lang="ts">
  import type { TraceIconProps } from './types.js';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: TraceIconProps = $props();
</script>
<span data-slot="trace-icon" aria-hidden="true" {...props} class={cn("size-4 [&_svg:not([class*='size-'])]:size-4 [[data-slot=trace-title]~&]:-ml-1 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none", classProp)}>
  {@render children?.()}
</span>

<script lang="ts">
  import type { TraceLineProps } from './types.js';
  import { cn } from 'cn';
  let { children, class: classProp, status, ...props }: TraceLineProps = $props();
</script>
<span
  data-slot="trace-line"
  data-status={status}
  {...props}
  class={cn(
    'gap-2 text-sm flex w-fit max-w-full min-w-0 items-center text-muted-foreground transition-colors in-[a,button]:cursor-pointer in-[a:hover,button:hover]:text-foreground data-[status=error]:text-destructive data-[status=error]:in-[a:hover,button:hover]:text-destructive data-[status=pending]:opacity-60 data-[status=running]:*:data-[slot=trace-title]:shimmer',
    classProp,
  )}
>
  {@render children?.()}
</span>

<script lang="ts">
  import type { TraceTitleProps } from './types.js';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: TraceTitleProps = $props();
</script>
<span data-slot="trace-title" {...props} class={cn('min-w-0 truncate motion-reduce:shimmer-none', classProp)}>
  {@render children?.()}
</span>

import type { ComponentProps } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
import type { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../collapsible/index.js';

type NativeSpanProps = HTMLAttributes<HTMLSpanElement>;

export type TraceProps = HTMLAttributes<HTMLDivElement>;
export type TraceLineProps = NativeSpanProps & { status?: 'running' | 'error' | 'pending' };
export type TraceIconProps = NativeSpanProps;
export type TraceTitleProps = NativeSpanProps;
export type TraceDescriptionProps = NativeSpanProps;
export type TraceCollapsibleProps = ComponentProps<typeof Collapsible>;
export type TraceCollapsibleTriggerProps = ComponentProps<typeof CollapsibleTrigger>;
export type TraceCollapsibleContentProps = ComponentProps<typeof CollapsibleContent>;

export { default as Trace } from './Trace.svelte';
export { default as TraceLine } from './TraceLine.svelte';
export { default as TraceIcon } from './TraceIcon.svelte';
export { default as TraceTitle } from './TraceTitle.svelte';
export { default as TraceDescription } from './TraceDescription.svelte';
export { default as TraceCollapsible } from './TraceCollapsible.svelte';
export { default as TraceCollapsibleTrigger } from './TraceCollapsibleTrigger.svelte';
export { default as TraceCollapsibleContent } from './TraceCollapsibleContent.svelte';
export type {
  TraceProps,
  TraceLineProps,
  TraceIconProps,
  TraceTitleProps,
  TraceDescriptionProps,
  TraceCollapsibleProps,
  TraceCollapsibleTriggerProps,
  TraceCollapsibleContentProps,
} from './types.js';