1  <script lang="ts">
 2    interface Props {
 3      size?: 'sm' | 'md' | 'lg';
 4      variant?: 'default' | 'subtle' | 'prominent';
 5      showLabel?: boolean;
 6      animated?: boolean;
 7      interactive?: boolean;
 8      onclick?: () => void;
 9    }
10  
11    let {
12      size = 'md',
13      variant = 'default',
14      showLabel = true,
15      animated = false,
16      interactive = false,
17      onclick,
18    }: Props = $props();
19  
20    const sizeClasses = {
21      sm: 'text-xs px-1.5 py-0.5 gap-1',
22      md: 'text-xs px-2 py-1 gap-1.5',
23      lg: 'text-sm px-3 py-1.5 gap-2',
24    };
25  
26    const iconSizes = {
27      sm: 'w-3 h-3',
28      md: 'w-3.5 h-3.5',
29      lg: 'w-4 h-4',
30    };
31  
32    const variantClasses = {
33      default: 'bg-phosphor/20 text-phosphor-light border-phosphor/40',
34      subtle: 'bg-transparent text-phosphor/80 border-transparent',
35      prominent: 'bg-phosphor text-mnemonic-bg border-phosphor shadow-phosphor',
36    };
37  
38    const baseClasses = 'inline-flex items-center rounded font-mono border';
39    const interactiveExtras =
40      'cursor-pointer hover:bg-phosphor/30 hover:border-phosphor/60 active:scale-95 transition-all duration-150';
41  </script>
42  
43  {#if interactive}
44    <button
45      type="button"
46      class="{baseClasses} {sizeClasses[size]} {variantClasses[variant]} {interactiveExtras}"
47      class:animate-pulse={animated}
48      title="Transcendent - Always visible across context switches"
49      {onclick}
50    >
51      <svg class="{iconSizes[size]} flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
52        <!-- Infinity/eternal symbol for transcendence -->
53        <path d="M14.5 10c0 1.38-1.12 2.5-2.5 2.5-.83 0-1.57-.41-2.02-1.03L8.5 10l1.48-1.47A2.49 2.49 0 0112 7.5c1.38 0 2.5 1.12 2.5 2.5zm-9 0c0-1.38 1.12-2.5 2.5-2.5.83 0 1.57.41 2.02 1.03L11.5 10l-1.48 1.47A2.49 2.49 0 018 12.5c-1.38 0-2.5-1.12-2.5-2.5zm4.5 0l2-2c.78-.78 1.81-1.17 2.83-1.17 2.21 0 4 1.79 4 4s-1.79 4-4 4c-1.02 0-2.05-.39-2.83-1.17l-2-2-2 2c-.78.78-1.81 1.17-2.83 1.17-2.21 0-4-1.79-4-4s1.79-4 4-4c1.02 0 2.05.39 2.83 1.17l2 2z" />
54      </svg>
55      {#if showLabel}
56        <span class="whitespace-nowrap">Transcendent</span>
57      {/if}
58    </button>
59  {:else}
60    <span
61      class="{baseClasses} {sizeClasses[size]} {variantClasses[variant]}"
62      class:animate-pulse={animated}
63      title="Transcendent - Always visible across context switches"
64    >
65      <svg class="{iconSizes[size]} flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
66        <!-- Infinity/eternal symbol for transcendence -->
67        <path d="M14.5 10c0 1.38-1.12 2.5-2.5 2.5-.83 0-1.57-.41-2.02-1.03L8.5 10l1.48-1.47A2.49 2.49 0 0112 7.5c1.38 0 2.5 1.12 2.5 2.5zm-9 0c0-1.38 1.12-2.5 2.5-2.5.83 0 1.57.41 2.02 1.03L11.5 10l-1.48 1.47A2.49 2.49 0 018 12.5c-1.38 0-2.5-1.12-2.5-2.5zm4.5 0l2-2c.78-.78 1.81-1.17 2.83-1.17 2.21 0 4 1.79 4 4s-1.79 4-4 4c-1.02 0-2.05-.39-2.83-1.17l-2-2-2 2c-.78.78-1.81 1.17-2.83 1.17-2.21 0-4-1.79-4-4s1.79-4 4-4c1.02 0 2.05.39 2.83 1.17l2 2z" />
68      </svg>
69      {#if showLabel}
70        <span class="whitespace-nowrap">Transcendent</span>
71      {/if}
72    </span>
73  {/if}