@invergent/agent-chat-react 2.11.0 → 2.11.1

package/dist/index.js

@@ -1,5 +1,5 @@
 import { cn, __publicField } from './chunk-47MF6JUW.js';
-import { createContext, memo, useRef, useEffect, useCallback, useMemo, useState, useLayoutEffect, lazy, useContext, Fragment as Fragment$1, Children, Suspense } from 'react';
+import { createContext, memo, useRef, useEffect, useCallback, useMemo, useState, useLayoutEffect, forwardRef, useId, lazy, useContext, useSyncExternalStore, Fragment as Fragment$1, Children, Suspense } from 'react';
 import { ChevronDownIcon, AlertTriangle, ChevronDown, ChevronRight, RefreshCw, CreditCard, File as File$1, FileImage, FileAudio, FileVideo, FileText, FileCode, FileArchive, FileSpreadsheet, PlugZapIcon, ChevronRightIcon, ArrowLeftIcon, Loader2Icon, InboxIcon, Loader2, AlertCircle, Pause, Play, Ban, TargetIcon, CalendarClockIcon, UsersIcon, MessageSquareIcon, ZapIcon, Maximize2Icon, FolderOpenIcon, UploadIcon, RefreshCwIcon, AlertCircleIcon, ExternalLinkIcon, ClipboardCheckIcon, ShieldAlertIcon, TimerIcon, CircleDotIcon, XIcon, Trash2Icon, SquareIcon, ArrowDownIcon, RotateCcwIcon, MousePointer2Icon, DownloadIcon, TrashIcon, ImageIcon, FileTextIcon, CheckIcon, Clock, ArrowRight, TerminalIcon, SparklesIcon, ClockIcon, PlusIcon, CloudIcon, HardDriveIcon, PaperclipIcon, GlobeIcon, IdCardIcon, FolderIcon, CopyIcon, FileIcon, ChevronLeftIcon, MinusIcon, SearchIcon, CircleDot, XCircle, CheckCircle2, ArrowUpIcon, CircleCheckIcon, ThumbsUpIcon, ThumbsDownIcon, BookOpenIcon, GitBranchIcon, ActivityIcon, EyeIcon, ListTodoIcon, BotIcon, ListIcon, PenLineIcon, FileEditIcon, WrenchIcon, FileCodeIcon, CodeIcon, FileArchiveIcon, FileVideoIcon, FileAudioIcon, FileImageIcon, FileChartLineIcon, FileSpreadsheetIcon, XCircleIcon, CheckCircle2Icon, Code, CircleXIcon, SkullIcon, CheckCircleIcon, CircleIcon } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import { Collapsible as Collapsible$1, Slot, Tooltip as Tooltip$1, Progress as Progress$1, Tabs as Tabs$1, Dialog as Dialog$1, ScrollArea as ScrollArea$1, Popover as Popover$1 } from 'radix-ui';
@@ -11,6 +11,7 @@ import { math } from '@streamdown/math';
 import { mermaid } from '@streamdown/mermaid';
 import { Streamdown } from 'streamdown';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { ThinkingOrb } from 'thinking-orbs';
 import { createHighlighter } from 'shiki';
 import { diffLines, diffWordsWithSpace } from 'diff';
 import AnsiImport from 'ansi-to-react';
@@ -1047,6 +1048,18 @@ var ShimmerComponent = ({
   );
 };
 var Shimmer = memo(ShimmerComponent);
+function OrbShimmerLabel({
+  state,
+  label,
+  duration = 3,
+  spread = 3,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("span", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx(ThinkingOrb, { state, size: 20, "aria-hidden": true }),
+    /* @__PURE__ */ jsx(Shimmer, { duration, spread, className: "text-sm", children: label })
+  ] });
+}
 var ReasoningContext = createContext(null);
 var useReasoning = () => {
   const context = useContext(ReasoningContext);
@@ -1116,7 +1129,7 @@ var Reasoning = memo(
 );
 var defaultGetThinkingMessage = (isStreaming, duration) => {
   if (isStreaming || duration === 0) {
-    return /* @__PURE__ */ jsx(Shimmer, { duration: 1, children: "Thinking..." });
+    return /* @__PURE__ */ jsx(OrbShimmerLabel, { state: "solving", label: "Thinking...", duration: 1 });
   }
   if (duration === void 0) {
     return /* @__PURE__ */ jsx("p", { className: "text-muted-foreground italic", children: "Thought for a few seconds" });
@@ -1306,6 +1319,123 @@ function TimelineSeparator({
     }
   );
 }
+
+// src/runtime/orb-state.ts
+var ORB_STATE_LABELS = {
+  working: "Working on it...",
+  searching: "Searching\u2026",
+  solving: "Solving\u2026",
+  listening: "Waiting for your answer\u2026",
+  composing: "Writing\u2026",
+  shaping: "Shaping\u2026"
+};
+var TOOL_ORB_STATES = {
+  // Retrieval: the scan-meridian globe.
+  web_search: "searching",
+  web_extract: "searching",
+  web_crawl: "searching",
+  session_search: "searching",
+  kb_list_pages: "searching",
+  kb_read_page: "searching",
+  search_files: "searching",
+  list_files: "searching",
+  research_memory: "searching",
+  fetch_channel_messages: "searching",
+  fetch_channel_file: "searching",
+  // Creation/authoring: the circle→triangle→square morph.
+  write_file: "shaping",
+  patch: "shaping",
+  create_artifact: "shaping",
+  generate_image: "shaping",
+  generate_video: "shaping",
+  skill_manage: "shaping",
+  research_outline: "shaping",
+  // Heavy analysis/computation: bands scramble, then click back solved.
+  run_coding_agent: "solving",
+  consult_expert: "solving",
+  vision_analyze: "solving",
+  idea_tree: "solving",
+  dispatch_experiments: "solving",
+  merge_experiment: "solving",
+  // Waiting on the user: the waveform.
+  ask_user_question: "listening"
+};
+var MCP_TOOL_PREFIX = "mcp__";
+var MCP_SEARCHING_RE = /(?:^|_)(?:search|query|find|lookup|fetch|list|read|get)(?:_|$)/;
+var MCP_SHAPING_RE = /(?:^|_)(?:write|create|generate|edit|update|build|make)(?:_|$)/;
+function toolOrbState(toolName) {
+  const mapped = TOOL_ORB_STATES[toolName];
+  if (mapped) return mapped;
+  if (toolName.startsWith(MCP_TOOL_PREFIX)) {
+    const leaf = toolName.split("__").pop() ?? "";
+    if (MCP_SEARCHING_RE.test(leaf)) return "searching";
+    if (MCP_SHAPING_RE.test(leaf)) return "shaping";
+  }
+  return "working";
+}
+function lastRunningToolCall(message, toolFilter) {
+  const calls = message.toolCalls ?? [];
+  for (let i = calls.length - 1; i >= 0; i--) {
+    const tc = calls[i];
+    if (tc && tc.status === "running" && (!toolFilter || toolFilter(tc))) {
+      return tc;
+    }
+  }
+  return void 0;
+}
+function messageOrbState(message, options = {}) {
+  if (message.toolCalls?.some(
+    (tc) => tc.toolName === "ask_user_question" && tc.status === "running"
+  )) {
+    return "listening";
+  }
+  const running = lastRunningToolCall(message, options.toolFilter);
+  if (running) return toolOrbState(running.toolName);
+  if (message.toolCalls?.some((tc) => tc.status === "running")) {
+    return "working";
+  }
+  if (message.status !== "streaming") return "working";
+  if (message.content.length > 0) return "composing";
+  if (message.reasoning && message.reasoning.length > 0) return "solving";
+  return "working";
+}
+function deriveOrbActivity(messages, options = {}) {
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const m = messages[i];
+    if (!m) continue;
+    if (m.role === "user") break;
+    if (m.role !== "assistant") continue;
+    const state = messageOrbState(m, options);
+    return { state, label: ORB_STATE_LABELS[state] };
+  }
+  return { state: "working", label: ORB_STATE_LABELS.working };
+}
+
+// src/runtime/simple-mode.ts
+var SIMPLE_MODE_HIDDEN_TOOLS = /* @__PURE__ */ new Set([
+  "list_files",
+  "search_files",
+  "session_search",
+  "skills_list",
+  "skill_view",
+  "skill_manage",
+  "process",
+  "memory",
+  // Shell commands and code execution are infrastructure plumbing the
+  // user doesn't need to see when the goal is to know *what* the
+  // agent accomplished, not *how*. Expert mode still has the full
+  // command + output block.
+  "terminal",
+  "execute_code"
+]);
+function isHiddenSimpleTool(tc) {
+  if (SIMPLE_MODE_HIDDEN_TOOLS.has(tc.toolName)) return true;
+  if (tc.toolName.startsWith("browser_")) return true;
+  return false;
+}
+var SIMPLE_MODE_ORB_OPTIONS = {
+  toolFilter: (tc) => !isHiddenSimpleTool(tc)
+};
 function BrowserActivityGroup({ calls }) {
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border border-line bg-card px-3 py-2 text-xs", children: [
     /* @__PURE__ */ jsx(ZapIcon, { className: "size-3 shrink-0 text-amber-500", "aria-hidden": "true" }),
@@ -3941,7 +4071,34 @@ function AskUserQuestionToolBlock({ tc }) {
     () => questions.map((q, i) => buildAnswer(q, selections[i] ?? emptySelection())),
     [questions, selections]
   );
-  const allAnswered = answers.every((a) => a !== null);
+  const answeredCount = answers.filter((a) => a !== null).length;
+  const allAnswered = answeredCount === questions.length;
+  const nextUnanswered = useCallback(
+    (from) => {
+      for (let step = 1; step < questions.length; step++) {
+        const i = (from + step) % questions.length;
+        if (answers[i] === null) return i;
+      }
+      return null;
+    },
+    [questions.length, answers]
+  );
+  const selectChoice = useCallback(
+    (choiceIndex) => {
+      const wasAnswered = answers[active] !== null;
+      const copy = selections.slice();
+      copy[active] = { index: choiceIndex, other: "" };
+      setSelections(copy);
+      if (wasAnswered) return;
+      const next = nextUnanswered(active);
+      if (next !== null) setActive(next);
+    },
+    [active, answers, selections, nextUnanswered]
+  );
+  const advance = useCallback(() => {
+    const next = nextUnanswered(active);
+    if (next !== null) setActive(next);
+  }, [active, nextUnanswered]);
   const handleSubmit = useCallback(async () => {
     if (!sessionId || locked || submitting) return;
     if (!allAnswered) {
@@ -4019,7 +4176,7 @@ function AskUserQuestionToolBlock({ tc }) {
                     "Question ",
                     i + 1
                   ] }),
-                  answered && !isActive && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[10px] text-emerald-500", children: "\u25CF" }),
+                  answered && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[10px] text-emerald-500", children: "\u25CF" }),
                   isActive && /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 bottom-0 h-px bg-foreground" })
                 ]
               },
@@ -4045,7 +4202,7 @@ function AskUserQuestionToolBlock({ tc }) {
             {
               choice,
               selected: currentSel.index === i,
-              onSelect: () => updateSelection({ index: i })
+              onSelect: () => selectChoice(i)
             },
             i
           )),
@@ -4055,32 +4212,50 @@ function AskUserQuestionToolBlock({ tc }) {
               selected: currentSel.index >= OTHER_INDEX_OFFSET,
               value: currentSel.other,
               onSelect: () => updateSelection({ index: OTHER_INDEX_OFFSET }),
-              onChange: (v) => updateSelection({ index: OTHER_INDEX_OFFSET, other: v })
+              onChange: (v) => updateSelection({ index: OTHER_INDEX_OFFSET, other: v }),
+              onCommit: () => {
+                if (allAnswered) void handleSubmit();
+                else advance();
+              }
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "border-t border-border px-3 py-2", children: [
-          /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-t border-border px-3 py-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 text-xs text-muted-foreground", children: [
+            questions.length > 1 && /* @__PURE__ */ jsxs("span", { className: "mr-2 tabular-nums", children: [
+              answeredCount,
+              " of ",
+              questions.length,
+              " answered"
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/70", children: "Esc to cancel" }),
+            error && /* @__PURE__ */ jsx("span", { className: "ml-2 text-destructive", children: error })
+          ] }),
+          allAnswered || questions.length === 1 ? /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               disabled: !allAnswered || submitting,
               onClick: () => void handleSubmit(),
               className: cn(
-                "w-full rounded border border-border px-2 py-1.5 text-left text-sm ",
-                "text-muted-foreground hover:bg-muted/40",
-                "disabled:cursor-not-allowed disabled:opacity-60"
+                "shrink-0 rounded-md bg-primary px-4 py-1.5 text-sm font-medium text-primary-foreground transition-colors",
+                "hover:bg-primary/80",
+                "disabled:cursor-not-allowed disabled:opacity-50"
               ),
-              children: [
-                /* @__PURE__ */ jsx("span", { className: "mr-2 text-muted-foreground/70", children: answers.filter((a) => a !== null).length }),
-                submitting ? "Submitting\u2026" : allAnswered ? "Submit answers" : `Answer ${questions.length - answers.filter((a) => a !== null).length} more to submit`
-              ]
+              children: submitting ? "Submitting\u2026" : "Submit"
             }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center justify-between text-[10px] text-muted-foreground/70", children: [
-            /* @__PURE__ */ jsx("span", { children: "Esc to cancel" }),
-            error && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: error })
-          ] })
+          ) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: advance,
+              className: cn(
+                "shrink-0 rounded-md border border-border bg-muted/40 px-4 py-1.5 text-sm font-medium text-foreground transition-colors",
+                "hover:bg-muted"
+              ),
+              children: "Next question \u2192"
+            }
+          )
         ] })
       ]
     }
@@ -4114,7 +4289,8 @@ function OtherRow({
   selected,
   value,
   onSelect,
-  onChange
+  onChange,
+  onCommit
 }) {
   return /* @__PURE__ */ jsxs(
     "div",
@@ -4143,6 +4319,12 @@ function OtherRow({
               value,
               onFocus: onSelect,
               onChange: (e) => onChange(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && value.trim()) {
+                  e.preventDefault();
+                  onCommit();
+                }
+              },
               className: "mt-0.5 h-7 px-0 text-xs"
             }
           )
@@ -5060,6 +5242,2299 @@ function CommandItem({
 function Spinner({ className, ...props }) {
   return /* @__PURE__ */ jsx(Loader2Icon, { role: "status", "aria-label": "Loading", className: cn("size-4 animate-spin", className), ...props });
 }
+
+// src/components/ui/border-beam/styles.ts
+var sizePresets = {
+  sm: {
+    borderRadius: 32,
+    borderWidth: 1,
+    width: 70,
+    height: 36
+  },
+  md: {
+    borderRadius: 16,
+    borderWidth: 1
+  },
+  line: {
+    borderRadius: 16,
+    borderWidth: 1
+  },
+  "pulse-outside": {
+    borderRadius: 16,
+    borderWidth: 1
+  },
+  "pulse-inner": {
+    borderRadius: 16,
+    borderWidth: 1
+  }
+};
+var sizeThemePresets = {
+  sm: {
+    dark: {
+      strokeOpacity: 0.46,
+      innerOpacity: 0.24,
+      bloomOpacity: 0.38,
+      innerShadow: "rgba(255, 255, 255, 0.3)",
+      saturation: 1.2
+    },
+    light: {
+      strokeOpacity: 0.12,
+      innerOpacity: 0.3,
+      bloomOpacity: 0.16,
+      innerShadow: "rgba(0, 0, 0, 0.14)",
+      saturation: 1.8
+    }
+  },
+  md: {
+    dark: {
+      strokeOpacity: 0.26,
+      innerOpacity: 0.42,
+      bloomOpacity: 0.24,
+      innerShadow: "rgba(255, 255, 255, 0.27)",
+      saturation: 1.2
+    },
+    light: {
+      strokeOpacity: 0.12,
+      innerOpacity: 0.26,
+      bloomOpacity: 0.34,
+      innerShadow: "rgba(0, 0, 0, 0.14)",
+      saturation: 1.5
+    }
+  },
+  line: {
+    dark: {
+      strokeOpacity: 1.14,
+      innerOpacity: 0.7,
+      bloomOpacity: 0.8,
+      innerShadow: "rgba(255, 255, 255, 0.1)",
+      saturation: 1.2
+    },
+    light: {
+      strokeOpacity: 0.16,
+      innerOpacity: 0.32,
+      bloomOpacity: 0.3,
+      innerShadow: "rgba(0, 0, 0, 0.14)",
+      saturation: 1.95
+    }
+  },
+  // Pulse Outside — outward-blooming breathe (ported from v5 "Breathe Outside Uncropped" / c6)
+  "pulse-outside": {
+    dark: {
+      strokeOpacity: 0.94,
+      innerOpacity: 0.34,
+      bloomOpacity: 0.3,
+      innerShadow: "transparent",
+      saturation: 1.2,
+      brightness: 1.9,
+      // v5 Card 5 frames the card with a single 1px hairline (its box-shadow at
+      // 0.3). Wrapped components here already supply their own ~equivalent 1px
+      // border, so the beam must NOT add a second hairline on top or the edge
+      // reads brighter than v5. Kept at 0 to match v5's single-hairline look.
+      hairlineOpacity: 0
+    },
+    light: {
+      strokeOpacity: 1.96,
+      innerOpacity: 1.04,
+      bloomOpacity: 0.42,
+      innerShadow: "transparent",
+      saturation: 0.6,
+      brightness: 1.7,
+      hairlineOpacity: 0
+    }
+  },
+  // Pulse Inner — contained breathe (ported from v5 "Breathe" / c4)
+  "pulse-inner": {
+    dark: {
+      strokeOpacity: 1.54,
+      innerOpacity: 0.44,
+      bloomOpacity: 0.66,
+      innerShadow: "transparent",
+      saturation: 1.2,
+      brightness: 0.75
+    },
+    light: {
+      strokeOpacity: 0.32,
+      innerOpacity: 0.4,
+      bloomOpacity: 0.8,
+      innerShadow: "transparent",
+      saturation: 0.75,
+      brightness: 1.3
+    }
+  }
+};
+var colorPalettes = {
+  colorful: {
+    border: [
+      { color: "rgb(255, 50, 100)", pos: "33% -7.4%", size: "70px 40px" },
+      { color: "rgb(40, 140, 255)", pos: "12% -5%", size: "60px 35px" },
+      { color: "rgb(50, 200, 80)", pos: "2.1% 68.3%", size: "40px 70px" },
+      { color: "rgb(30, 185, 170)", pos: "2.1% 68.3%", size: "20px 35px" },
+      { color: "rgb(100, 70, 255)", pos: "74.4% 100%", size: "180px 32px" },
+      { color: "rgb(40, 140, 255)", pos: "55% 100%", size: "85px 26px" },
+      { color: "rgb(255, 120, 40)", pos: "93.9% 0%", size: "74px 32px" },
+      { color: "rgb(240, 50, 180)", pos: "100% 27.1%", size: "26px 42px" },
+      { color: "rgb(180, 40, 240)", pos: "100% 27.1%", size: "52px 48px" }
+    ],
+    spike: { primary: "rgb(255, 60, 80)", secondary: "rgba(40, 190, 180, 0.98)" },
+    spikeLt: { primary: "rgb(200, 30, 60)", secondary: "rgb(20, 150, 140)" }
+  },
+  mono: {
+    border: [
+      { color: "rgb(180, 180, 180)", pos: "33% -7.4%", size: "70px 40px" },
+      { color: "rgb(140, 140, 140)", pos: "12% -5%", size: "60px 35px" },
+      { color: "rgb(160, 160, 160)", pos: "2.1% 68.3%", size: "40px 70px" },
+      { color: "rgb(130, 130, 130)", pos: "2.1% 68.3%", size: "20px 35px" },
+      { color: "rgb(170, 170, 170)", pos: "74.4% 100%", size: "180px 32px" },
+      { color: "rgb(150, 150, 150)", pos: "55% 100%", size: "85px 26px" },
+      { color: "rgb(190, 190, 190)", pos: "93.9% 0%", size: "74px 32px" },
+      { color: "rgb(145, 145, 145)", pos: "100% 27.1%", size: "26px 42px" },
+      { color: "rgb(165, 165, 165)", pos: "100% 27.1%", size: "52px 48px" }
+    ],
+    spike: { primary: "rgb(200, 200, 200)", secondary: "rgb(170, 170, 170)" },
+    spikeLt: { primary: "rgb(80, 80, 80)", secondary: "rgb(120, 120, 120)" }
+  },
+  ocean: {
+    border: [
+      { color: "rgb(100, 80, 220)", pos: "33% -7.4%", size: "70px 40px" },
+      { color: "rgb(60, 120, 255)", pos: "12% -5%", size: "60px 35px" },
+      { color: "rgb(80, 100, 200)", pos: "2.1% 68.3%", size: "40px 70px" },
+      { color: "rgb(50, 140, 220)", pos: "2.1% 68.3%", size: "20px 35px" },
+      { color: "rgb(120, 80, 255)", pos: "74.4% 100%", size: "180px 32px" },
+      { color: "rgb(70, 130, 255)", pos: "55% 100%", size: "85px 26px" },
+      { color: "rgb(140, 100, 240)", pos: "93.9% 0%", size: "74px 32px" },
+      { color: "rgb(90, 110, 230)", pos: "100% 27.1%", size: "26px 42px" },
+      { color: "rgb(130, 70, 255)", pos: "100% 27.1%", size: "52px 48px" }
+    ],
+    spike: { primary: "rgb(100, 120, 255)", secondary: "rgba(130, 100, 220, 0.98)" },
+    spikeLt: { primary: "rgb(60, 60, 180)", secondary: "rgb(80, 100, 200)" }
+  },
+  sunset: {
+    border: [
+      { color: "rgb(255, 80, 50)", pos: "33% -7.4%", size: "70px 40px" },
+      { color: "rgb(255, 160, 40)", pos: "12% -5%", size: "60px 35px" },
+      { color: "rgb(255, 120, 60)", pos: "2.1% 68.3%", size: "40px 70px" },
+      { color: "rgb(255, 200, 50)", pos: "2.1% 68.3%", size: "20px 35px" },
+      { color: "rgb(255, 100, 80)", pos: "74.4% 100%", size: "180px 32px" },
+      { color: "rgb(255, 180, 60)", pos: "55% 100%", size: "85px 26px" },
+      { color: "rgb(255, 60, 60)", pos: "93.9% 0%", size: "74px 32px" },
+      { color: "rgb(255, 140, 50)", pos: "100% 27.1%", size: "26px 42px" },
+      { color: "rgb(255, 90, 70)", pos: "100% 27.1%", size: "52px 48px" }
+    ],
+    spike: { primary: "rgb(255, 140, 80)", secondary: "rgba(255, 100, 60, 0.98)" },
+    spikeLt: { primary: "rgb(200, 80, 40)", secondary: "rgb(220, 120, 30)" }
+  },
+  brand: {
+    border: [
+      { color: "rgb(217, 119, 6)", pos: "33% -7.4%", size: "70px 40px" },
+      { color: "rgb(245, 158, 11)", pos: "12% -5%", size: "60px 35px" },
+      { color: "rgb(234, 138, 9)", pos: "2.1% 68.3%", size: "40px 70px" },
+      { color: "rgb(252, 211, 77)", pos: "2.1% 68.3%", size: "20px 35px" },
+      { color: "rgb(245, 158, 11)", pos: "74.4% 100%", size: "180px 32px" },
+      { color: "rgb(251, 191, 36)", pos: "55% 100%", size: "85px 26px" },
+      { color: "rgb(217, 119, 6)", pos: "93.9% 0%", size: "74px 32px" },
+      { color: "rgb(251, 191, 36)", pos: "100% 27.1%", size: "26px 42px" },
+      { color: "rgb(245, 158, 11)", pos: "100% 27.1%", size: "52px 48px" }
+    ],
+    spike: { primary: "rgb(251, 191, 36)", secondary: "rgba(245, 158, 11, 0.98)" },
+    spikeLt: { primary: "rgb(180, 83, 9)", secondary: "rgb(202, 138, 4)" }
+  }
+};
+var smallColorPalettes = {
+  colorful: {
+    border: [
+      { color: "rgb(50, 200, 80)", pos: "2% 68%", size: "9px 18px" },
+      { color: "rgb(30, 185, 170)", pos: "2% 68%", size: "4px 8px" },
+      { color: "rgb(255, 120, 40)", pos: "72% -3%", size: "59px 9px" },
+      { color: "rgb(100, 70, 255)", pos: "74% 100%", size: "42px 7px" },
+      { color: "rgb(240, 50, 180)", pos: "100% 27%", size: "10px 17px" },
+      { color: "rgb(180, 40, 240)", pos: "100% 27%", size: "10px 18px" },
+      { color: "rgb(40, 140, 255)", pos: "100% 27%", size: "5px 10px" },
+      { color: "rgb(255, 50, 100)", pos: "100% 27%", size: "11px 12px" }
+    ],
+    inner: [
+      { color: "rgba(50, 200, 80, 0.5)", pos: "2% 68%", size: "9px 18px" },
+      { color: "rgba(30, 185, 170, 0.45)", pos: "2% 68%", size: "4px 8px" },
+      { color: "rgba(255, 120, 40, 0.35)", pos: "72% -3%", size: "59px 9px" },
+      { color: "rgba(100, 70, 255, 0.35)", pos: "74% 100%", size: "42px 7px" },
+      { color: "rgba(240, 50, 180, 0.3)", pos: "100% 27%", size: "10px 17px" },
+      { color: "rgba(180, 40, 240, 0.4)", pos: "100% 27%", size: "10px 18px" },
+      { color: "rgba(40, 140, 255, 0.3)", pos: "100% 27%", size: "5px 10px" },
+      { color: "rgba(255, 50, 100, 0.3)", pos: "100% 27%", size: "11px 12px" }
+    ]
+  },
+  mono: {
+    border: [
+      { color: "rgb(160, 160, 160)", pos: "2% 68%", size: "9px 18px" },
+      { color: "rgb(140, 140, 140)", pos: "2% 68%", size: "4px 8px" },
+      { color: "rgb(180, 180, 180)", pos: "72% -3%", size: "59px 9px" },
+      { color: "rgb(150, 150, 150)", pos: "74% 100%", size: "42px 7px" },
+      { color: "rgb(170, 170, 170)", pos: "100% 27%", size: "10px 17px" },
+      { color: "rgb(155, 155, 155)", pos: "100% 27%", size: "10px 18px" },
+      { color: "rgb(145, 145, 145)", pos: "100% 27%", size: "5px 10px" },
+      { color: "rgb(165, 165, 165)", pos: "100% 27%", size: "11px 12px" }
+    ],
+    inner: [
+      { color: "rgba(160, 160, 160, 0.25)", pos: "2% 68%", size: "9px 18px" },
+      { color: "rgba(140, 140, 140, 0.22)", pos: "2% 68%", size: "4px 8px" },
+      { color: "rgba(180, 180, 180, 0.17)", pos: "72% -3%", size: "59px 9px" },
+      { color: "rgba(150, 150, 150, 0.17)", pos: "74% 100%", size: "42px 7px" },
+      { color: "rgba(170, 170, 170, 0.15)", pos: "100% 27%", size: "10px 17px" },
+      { color: "rgba(155, 155, 155, 0.20)", pos: "100% 27%", size: "10px 18px" },
+      { color: "rgba(145, 145, 145, 0.15)", pos: "100% 27%", size: "5px 10px" },
+      { color: "rgba(165, 165, 165, 0.15)", pos: "100% 27%", size: "11px 12px" }
+    ]
+  },
+  ocean: {
+    border: [
+      { color: "rgb(60, 140, 200)", pos: "2% 68%", size: "9px 18px" },
+      { color: "rgb(50, 120, 180)", pos: "2% 68%", size: "4px 8px" },
+      { color: "rgb(100, 80, 220)", pos: "72% -3%", size: "59px 9px" },
+      { color: "rgb(80, 100, 255)", pos: "74% 100%", size: "42px 7px" },
+      { color: "rgb(120, 70, 240)", pos: "100% 27%", size: "10px 17px" },
+      { color: "rgb(90, 80, 220)", pos: "100% 27%", size: "10px 18px" },
+      { color: "rgb(70, 110, 255)", pos: "100% 27%", size: "5px 10px" },
+      { color: "rgb(110, 90, 230)", pos: "100% 27%", size: "11px 12px" }
+    ],
+    inner: [
+      { color: "rgba(60, 140, 200, 0.5)", pos: "2% 68%", size: "9px 18px" },
+      { color: "rgba(50, 120, 180, 0.45)", pos: "2% 68%", size: "4px 8px" },
+      { color: "rgba(100, 80, 220, 0.35)", pos: "72% -3%", size: "59px 9px" },
+      { color: "rgba(80, 100, 255, 0.35)", pos: "74% 100%", size: "42px 7px" },
+      { color: "rgba(120, 70, 240, 0.3)", pos: "100% 27%", size: "10px 17px" },
+      { color: "rgba(90, 80, 220, 0.4)", pos: "100% 27%", size: "10px 18px" },
+      { color: "rgba(70, 110, 255, 0.3)", pos: "100% 27%", size: "5px 10px" },
+      { color: "rgba(110, 90, 230, 0.3)", pos: "100% 27%", size: "11px 12px" }
+    ]
+  },
+  sunset: {
+    border: [
+      { color: "rgb(255, 180, 50)", pos: "2% 68%", size: "9px 18px" },
+      { color: "rgb(255, 150, 40)", pos: "2% 68%", size: "4px 8px" },
+      { color: "rgb(255, 80, 60)", pos: "72% -3%", size: "59px 9px" },
+      { color: "rgb(255, 100, 80)", pos: "74% 100%", size: "42px 7px" },
+      { color: "rgb(255, 60, 80)", pos: "100% 27%", size: "10px 17px" },
+      { color: "rgb(255, 120, 60)", pos: "100% 27%", size: "10px 18px" },
+      { color: "rgb(255, 200, 50)", pos: "100% 27%", size: "5px 10px" },
+      { color: "rgb(255, 90, 70)", pos: "100% 27%", size: "11px 12px" }
+    ],
+    inner: [
+      { color: "rgba(255, 180, 50, 0.5)", pos: "2% 68%", size: "9px 18px" },
+      { color: "rgba(255, 150, 40, 0.45)", pos: "2% 68%", size: "4px 8px" },
+      { color: "rgba(255, 80, 60, 0.35)", pos: "72% -3%", size: "59px 9px" },
+      { color: "rgba(255, 100, 80, 0.35)", pos: "74% 100%", size: "42px 7px" },
+      { color: "rgba(255, 60, 80, 0.3)", pos: "100% 27%", size: "10px 17px" },
+      { color: "rgba(255, 120, 60, 0.4)", pos: "100% 27%", size: "10px 18px" },
+      { color: "rgba(255, 200, 50, 0.3)", pos: "100% 27%", size: "5px 10px" },
+      { color: "rgba(255, 90, 70, 0.3)", pos: "100% 27%", size: "11px 12px" }
+    ]
+  },
+  brand: {
+    border: [
+      { color: "rgb(251, 191, 36)", pos: "2% 68%", size: "9px 18px" },
+      { color: "rgb(245, 158, 11)", pos: "2% 68%", size: "4px 8px" },
+      { color: "rgb(217, 119, 6)", pos: "72% -3%", size: "59px 9px" },
+      { color: "rgb(245, 158, 11)", pos: "74% 100%", size: "42px 7px" },
+      { color: "rgb(217, 119, 6)", pos: "100% 27%", size: "10px 17px" },
+      { color: "rgb(245, 158, 11)", pos: "100% 27%", size: "10px 18px" },
+      { color: "rgb(252, 211, 77)", pos: "100% 27%", size: "5px 10px" },
+      { color: "rgb(251, 191, 36)", pos: "100% 27%", size: "11px 12px" }
+    ],
+    inner: [
+      { color: "rgba(251, 191, 36, 0.5)", pos: "2% 68%", size: "9px 18px" },
+      { color: "rgba(245, 158, 11, 0.45)", pos: "2% 68%", size: "4px 8px" },
+      { color: "rgba(217, 119, 6, 0.35)", pos: "72% -3%", size: "59px 9px" },
+      { color: "rgba(245, 158, 11, 0.35)", pos: "74% 100%", size: "42px 7px" },
+      { color: "rgba(217, 119, 6, 0.3)", pos: "100% 27%", size: "10px 17px" },
+      { color: "rgba(245, 158, 11, 0.4)", pos: "100% 27%", size: "10px 18px" },
+      { color: "rgba(252, 211, 77, 0.3)", pos: "100% 27%", size: "5px 10px" },
+      { color: "rgba(251, 191, 36, 0.3)", pos: "100% 27%", size: "11px 12px" }
+    ]
+  }
+};
+function getSmallColorGradients(colorVariant) {
+  const palette = smallColorPalettes[colorVariant];
+  return palette.border.map((c) => `radial-gradient(ellipse ${c.size} at ${c.pos}, ${c.color}, transparent)`).join(",\n    ");
+}
+function getSmallInnerGradients(colorVariant) {
+  const palette = smallColorPalettes[colorVariant];
+  return palette.inner.map((c) => `radial-gradient(ellipse ${c.size} at ${c.pos}, ${c.color}, transparent)`).join(",\n    ");
+}
+function getColorGradients(colorVariant) {
+  const palette = colorPalettes[colorVariant];
+  return palette.border.map((c) => `radial-gradient(ellipse ${c.size} at ${c.pos}, ${c.color}, transparent)`).join(",\n    ");
+}
+function getInnerGradients(colorVariant) {
+  const palette = colorPalettes[colorVariant];
+  const baseOpacity = colorVariant === "mono" ? 0.225 : 0.45;
+  return palette.border.map((c) => {
+    const rgba = c.color.replace("rgb(", "rgba(").replace(")", `, ${baseOpacity})`);
+    const smallerSize = c.size.split(" ").map((s) => {
+      const val = parseInt(s);
+      return `${Math.round(val * 0.9)}px`;
+    }).join(" ");
+    return `radial-gradient(ellipse ${smallerSize} at ${c.pos}, ${rgba}, transparent)`;
+  }).join(",\n    ");
+}
+function getSpikeColors(colorVariant, isDark) {
+  const palette = colorPalettes[colorVariant];
+  return isDark ? palette.spike : palette.spikeLt;
+}
+var lineColorPalettes = {
+  colorful: {
+    dark: [
+      { color: "rgb(255, 50, 100)", sizeW: 36, sizeH: 36, offsetX: 0, offsetY: 2 },
+      { color: "rgb(40, 180, 220)", sizeW: 30, sizeH: 32, offsetX: 39, offsetY: 0 },
+      { color: "rgb(50, 200, 80)", sizeW: 33, sizeH: 28, offsetX: -36, offsetY: 2 },
+      { color: "rgb(180, 40, 240)", sizeW: 29, sizeH: 34, offsetX: -54, offsetY: 0 },
+      { color: "rgb(255, 160, 30)", sizeW: 27, sizeH: 30, offsetX: 51, offsetY: -1 },
+      { color: "rgb(100, 70, 255)", sizeW: 36, sizeH: 24, offsetX: 21, offsetY: 1 },
+      { color: "rgb(40, 140, 255)", sizeW: 30, sizeH: 22, offsetX: -21, offsetY: 0 },
+      { color: "rgb(240, 50, 180)", sizeW: 25, sizeH: 28, offsetX: 66, offsetY: 1 },
+      { color: "rgb(30, 185, 170)", sizeW: 23, sizeH: 30, offsetX: -66, offsetY: -1 }
+    ],
+    light: [
+      { color: "rgb(255, 50, 100)", sizeW: 45, sizeH: 36, offsetX: 0, offsetY: 2 },
+      { color: "rgb(40, 140, 255)", sizeW: 35, sizeH: 32, offsetX: 65, offsetY: 0 },
+      { color: "rgb(50, 200, 80)", sizeW: 40, sizeH: 28, offsetX: -60, offsetY: 2 },
+      { color: "rgb(180, 40, 240)", sizeW: 35, sizeH: 34, offsetX: -90, offsetY: 0 },
+      { color: "rgb(30, 185, 170)", sizeW: 38, sizeH: 30, offsetX: 85, offsetY: -1 },
+      { color: "rgb(100, 70, 255)", sizeW: 50, sizeH: 24, offsetX: 35, offsetY: 1 },
+      { color: "rgb(40, 140, 255)", sizeW: 40, sizeH: 22, offsetX: -35, offsetY: 0 },
+      { color: "rgb(255, 120, 40)", sizeW: 35, sizeH: 28, offsetX: 110, offsetY: 1 },
+      { color: "rgb(240, 50, 180)", sizeW: 30, sizeH: 30, offsetX: -110, offsetY: -1 }
+    ]
+  },
+  mono: {
+    dark: [
+      { color: "rgb(200, 200, 200)", sizeW: 36, sizeH: 36, offsetX: 0, offsetY: 2 },
+      { color: "rgb(170, 170, 170)", sizeW: 30, sizeH: 32, offsetX: 39, offsetY: 0 },
+      { color: "rgb(155, 155, 155)", sizeW: 33, sizeH: 28, offsetX: -36, offsetY: 2 },
+      { color: "rgb(185, 185, 185)", sizeW: 29, sizeH: 34, offsetX: -54, offsetY: 0 },
+      { color: "rgb(165, 165, 165)", sizeW: 27, sizeH: 30, offsetX: 51, offsetY: -1 },
+      { color: "rgb(180, 180, 180)", sizeW: 36, sizeH: 24, offsetX: 21, offsetY: 1 },
+      { color: "rgb(160, 160, 160)", sizeW: 30, sizeH: 22, offsetX: -21, offsetY: 0 },
+      { color: "rgb(175, 175, 175)", sizeW: 25, sizeH: 28, offsetX: 66, offsetY: 1 },
+      { color: "rgb(190, 190, 190)", sizeW: 23, sizeH: 30, offsetX: -66, offsetY: -1 }
+    ],
+    light: [
+      { color: "rgb(100, 100, 100)", sizeW: 45, sizeH: 36, offsetX: 0, offsetY: 2 },
+      { color: "rgb(80, 80, 80)", sizeW: 35, sizeH: 32, offsetX: 65, offsetY: 0 },
+      { color: "rgb(90, 90, 90)", sizeW: 40, sizeH: 28, offsetX: -60, offsetY: 2 },
+      { color: "rgb(70, 70, 70)", sizeW: 35, sizeH: 34, offsetX: -90, offsetY: 0 },
+      { color: "rgb(85, 85, 85)", sizeW: 38, sizeH: 30, offsetX: 85, offsetY: -1 },
+      { color: "rgb(95, 95, 95)", sizeW: 50, sizeH: 24, offsetX: 35, offsetY: 1 },
+      { color: "rgb(75, 75, 75)", sizeW: 40, sizeH: 22, offsetX: -35, offsetY: 0 },
+      { color: "rgb(105, 105, 105)", sizeW: 35, sizeH: 28, offsetX: 110, offsetY: 1 },
+      { color: "rgb(65, 65, 65)", sizeW: 30, sizeH: 30, offsetX: -110, offsetY: -1 }
+    ]
+  },
+  ocean: {
+    dark: [
+      { color: "rgb(100, 80, 220)", sizeW: 36, sizeH: 36, offsetX: 0, offsetY: 2 },
+      { color: "rgb(60, 120, 255)", sizeW: 30, sizeH: 32, offsetX: 39, offsetY: 0 },
+      { color: "rgb(80, 100, 200)", sizeW: 33, sizeH: 28, offsetX: -36, offsetY: 2 },
+      { color: "rgb(130, 70, 255)", sizeW: 29, sizeH: 34, offsetX: -54, offsetY: 0 },
+      { color: "rgb(70, 130, 255)", sizeW: 27, sizeH: 30, offsetX: 51, offsetY: -1 },
+      { color: "rgb(120, 80, 255)", sizeW: 36, sizeH: 24, offsetX: 21, offsetY: 1 },
+      { color: "rgb(90, 110, 230)", sizeW: 30, sizeH: 22, offsetX: -21, offsetY: 0 },
+      { color: "rgb(110, 90, 240)", sizeW: 25, sizeH: 28, offsetX: 66, offsetY: 1 },
+      { color: "rgb(140, 100, 255)", sizeW: 23, sizeH: 30, offsetX: -66, offsetY: -1 }
+    ],
+    light: [
+      { color: "rgb(80, 60, 200)", sizeW: 45, sizeH: 36, offsetX: 0, offsetY: 2 },
+      { color: "rgb(50, 100, 220)", sizeW: 35, sizeH: 32, offsetX: 65, offsetY: 0 },
+      { color: "rgb(70, 90, 190)", sizeW: 40, sizeH: 28, offsetX: -60, offsetY: 2 },
+      { color: "rgb(110, 60, 220)", sizeW: 35, sizeH: 34, offsetX: -90, offsetY: 0 },
+      { color: "rgb(60, 110, 230)", sizeW: 38, sizeH: 30, offsetX: 85, offsetY: -1 },
+      { color: "rgb(100, 70, 240)", sizeW: 50, sizeH: 24, offsetX: 35, offsetY: 1 },
+      { color: "rgb(80, 100, 210)", sizeW: 40, sizeH: 22, offsetX: -35, offsetY: 0 },
+      { color: "rgb(90, 80, 225)", sizeW: 35, sizeH: 28, offsetX: 110, offsetY: 1 },
+      { color: "rgb(120, 90, 245)", sizeW: 30, sizeH: 30, offsetX: -110, offsetY: -1 }
+    ]
+  },
+  sunset: {
+    dark: [
+      { color: "rgb(255, 100, 60)", sizeW: 36, sizeH: 36, offsetX: 0, offsetY: 2 },
+      { color: "rgb(255, 180, 50)", sizeW: 30, sizeH: 32, offsetX: 39, offsetY: 0 },
+      { color: "rgb(255, 140, 70)", sizeW: 33, sizeH: 28, offsetX: -36, offsetY: 2 },
+      { color: "rgb(255, 80, 80)", sizeW: 29, sizeH: 34, offsetX: -54, offsetY: 0 },
+      { color: "rgb(255, 200, 60)", sizeW: 27, sizeH: 30, offsetX: 51, offsetY: -1 },
+      { color: "rgb(255, 120, 50)", sizeW: 36, sizeH: 24, offsetX: 21, offsetY: 1 },
+      { color: "rgb(255, 160, 80)", sizeW: 30, sizeH: 22, offsetX: -21, offsetY: 0 },
+      { color: "rgb(255, 90, 60)", sizeW: 25, sizeH: 28, offsetX: 66, offsetY: 1 },
+      { color: "rgb(255, 70, 70)", sizeW: 23, sizeH: 30, offsetX: -66, offsetY: -1 }
+    ],
+    light: [
+      { color: "rgb(220, 80, 40)", sizeW: 45, sizeH: 36, offsetX: 0, offsetY: 2 },
+      { color: "rgb(230, 150, 30)", sizeW: 35, sizeH: 32, offsetX: 65, offsetY: 0 },
+      { color: "rgb(210, 110, 50)", sizeW: 40, sizeH: 28, offsetX: -60, offsetY: 2 },
+      { color: "rgb(200, 60, 60)", sizeW: 35, sizeH: 34, offsetX: -90, offsetY: 0 },
+      { color: "rgb(220, 170, 40)", sizeW: 38, sizeH: 30, offsetX: 85, offsetY: -1 },
+      { color: "rgb(210, 100, 30)", sizeW: 50, sizeH: 24, offsetX: 35, offsetY: 1 },
+      { color: "rgb(230, 130, 60)", sizeW: 40, sizeH: 22, offsetX: -35, offsetY: 0 },
+      { color: "rgb(190, 70, 50)", sizeW: 35, sizeH: 28, offsetX: 110, offsetY: 1 },
+      { color: "rgb(180, 50, 50)", sizeW: 30, sizeH: 30, offsetX: -110, offsetY: -1 }
+    ]
+  },
+  brand: {
+    dark: [
+      { color: "rgb(245, 158, 11)", sizeW: 36, sizeH: 36, offsetX: 0, offsetY: 2 },
+      { color: "rgb(251, 191, 36)", sizeW: 30, sizeH: 32, offsetX: 39, offsetY: 0 },
+      { color: "rgb(245, 158, 11)", sizeW: 33, sizeH: 28, offsetX: -36, offsetY: 2 },
+      { color: "rgb(217, 119, 6)", sizeW: 29, sizeH: 34, offsetX: -54, offsetY: 0 },
+      { color: "rgb(252, 211, 77)", sizeW: 27, sizeH: 30, offsetX: 51, offsetY: -1 },
+      { color: "rgb(234, 138, 9)", sizeW: 36, sizeH: 24, offsetX: 21, offsetY: 1 },
+      { color: "rgb(251, 191, 36)", sizeW: 30, sizeH: 22, offsetX: -21, offsetY: 0 },
+      { color: "rgb(217, 119, 6)", sizeW: 25, sizeH: 28, offsetX: 66, offsetY: 1 },
+      { color: "rgb(245, 158, 11)", sizeW: 23, sizeH: 30, offsetX: -66, offsetY: -1 }
+    ],
+    light: [
+      { color: "rgb(180, 83, 9)", sizeW: 45, sizeH: 36, offsetX: 0, offsetY: 2 },
+      { color: "rgb(202, 138, 4)", sizeW: 35, sizeH: 32, offsetX: 65, offsetY: 0 },
+      { color: "rgb(180, 83, 9)", sizeW: 40, sizeH: 28, offsetX: -60, offsetY: 2 },
+      { color: "rgb(146, 64, 14)", sizeW: 35, sizeH: 34, offsetX: -90, offsetY: 0 },
+      { color: "rgb(202, 138, 4)", sizeW: 38, sizeH: 30, offsetX: 85, offsetY: -1 },
+      { color: "rgb(161, 98, 7)", sizeW: 50, sizeH: 24, offsetX: 35, offsetY: 1 },
+      { color: "rgb(202, 138, 4)", sizeW: 40, sizeH: 22, offsetX: -35, offsetY: 0 },
+      { color: "rgb(146, 64, 14)", sizeW: 35, sizeH: 28, offsetX: 110, offsetY: 1 },
+      { color: "rgb(180, 83, 9)", sizeW: 30, sizeH: 30, offsetX: -110, offsetY: -1 }
+    ]
+  }
+};
+function getLineColorGradients(colorVariant, isDark, id) {
+  const palette = lineColorPalettes[colorVariant][isDark ? "dark" : "light"];
+  return palette.map((c) => {
+    const offsetXStr = c.offsetX === 0 ? "" : c.offsetX > 0 ? ` + ${c.offsetX}px` : ` - ${Math.abs(c.offsetX)}px`;
+    const offsetYStr = c.offsetY === 0 ? "" : c.offsetY > 0 ? ` + ${c.offsetY}px` : ` - ${Math.abs(c.offsetY)}px`;
+    return `radial-gradient(ellipse calc(${c.sizeW}px * var(--beam-w-${id})) calc(${c.sizeH}px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%${offsetXStr}) calc(100%${offsetYStr}), ${c.color}, transparent)`;
+  }).join(",\n       ");
+}
+var lineInnerGradientData = {
+  colorful: [
+    { color: "rgba(255, 50, 100, 0.48)", sizeW: 33, sizeH: 30, offsetX: 0, offsetY: 0 },
+    { color: "rgba(40, 180, 220, 0.42)", sizeW: 24, sizeH: 26, offsetX: 39, offsetY: -3 },
+    { color: "rgba(50, 200, 80, 0.48)", sizeW: 27, sizeH: 24, offsetX: -36, offsetY: 0 },
+    { color: "rgba(180, 40, 240, 0.42)", sizeW: 23, sizeH: 28, offsetX: -54, offsetY: -2 },
+    { color: "rgba(255, 160, 30, 0.50)", sizeW: 24, sizeH: 24, offsetX: 51, offsetY: -1 },
+    { color: "rgba(100, 70, 255, 0.45)", sizeW: 30, sizeH: 20, offsetX: 21, offsetY: 0 },
+    { color: "rgba(40, 140, 255, 0.40)", sizeW: 25, sizeH: 18, offsetX: -21, offsetY: -2 },
+    { color: "rgba(240, 50, 180, 0.45)", sizeW: 21, sizeH: 24, offsetX: 66, offsetY: 0 },
+    { color: "rgba(30, 185, 170, 0.52)", sizeW: 18, sizeH: 26, offsetX: -66, offsetY: -1 }
+  ],
+  mono: [
+    { color: "rgba(200, 200, 200, 0.48)", sizeW: 33, sizeH: 30, offsetX: 0, offsetY: 0 },
+    { color: "rgba(170, 170, 170, 0.42)", sizeW: 24, sizeH: 26, offsetX: 39, offsetY: -3 },
+    { color: "rgba(155, 155, 155, 0.48)", sizeW: 27, sizeH: 24, offsetX: -36, offsetY: 0 },
+    { color: "rgba(185, 185, 185, 0.42)", sizeW: 23, sizeH: 28, offsetX: -54, offsetY: -2 },
+    { color: "rgba(165, 165, 165, 0.50)", sizeW: 24, sizeH: 24, offsetX: 51, offsetY: -1 },
+    { color: "rgba(180, 180, 180, 0.45)", sizeW: 30, sizeH: 20, offsetX: 21, offsetY: 0 },
+    { color: "rgba(160, 160, 160, 0.40)", sizeW: 25, sizeH: 18, offsetX: -21, offsetY: -2 },
+    { color: "rgba(175, 175, 175, 0.45)", sizeW: 21, sizeH: 24, offsetX: 66, offsetY: 0 },
+    { color: "rgba(190, 190, 190, 0.52)", sizeW: 18, sizeH: 26, offsetX: -66, offsetY: -1 }
+  ],
+  ocean: [
+    { color: "rgba(100, 80, 220, 0.48)", sizeW: 33, sizeH: 30, offsetX: 0, offsetY: 0 },
+    { color: "rgba(60, 120, 255, 0.42)", sizeW: 24, sizeH: 26, offsetX: 39, offsetY: -3 },
+    { color: "rgba(80, 100, 200, 0.48)", sizeW: 27, sizeH: 24, offsetX: -36, offsetY: 0 },
+    { color: "rgba(130, 70, 255, 0.42)", sizeW: 23, sizeH: 28, offsetX: -54, offsetY: -2 },
+    { color: "rgba(70, 130, 255, 0.50)", sizeW: 24, sizeH: 24, offsetX: 51, offsetY: -1 },
+    { color: "rgba(120, 80, 255, 0.45)", sizeW: 30, sizeH: 20, offsetX: 21, offsetY: 0 },
+    { color: "rgba(90, 110, 230, 0.40)", sizeW: 25, sizeH: 18, offsetX: -21, offsetY: -2 },
+    { color: "rgba(110, 90, 240, 0.45)", sizeW: 21, sizeH: 24, offsetX: 66, offsetY: 0 },
+    { color: "rgba(140, 100, 255, 0.52)", sizeW: 18, sizeH: 26, offsetX: -66, offsetY: -1 }
+  ],
+  sunset: [
+    { color: "rgba(255, 100, 60, 0.48)", sizeW: 33, sizeH: 30, offsetX: 0, offsetY: 0 },
+    { color: "rgba(255, 180, 50, 0.42)", sizeW: 24, sizeH: 26, offsetX: 39, offsetY: -3 },
+    { color: "rgba(255, 140, 70, 0.48)", sizeW: 27, sizeH: 24, offsetX: -36, offsetY: 0 },
+    { color: "rgba(255, 80, 80, 0.42)", sizeW: 23, sizeH: 28, offsetX: -54, offsetY: -2 },
+    { color: "rgba(255, 200, 60, 0.50)", sizeW: 24, sizeH: 24, offsetX: 51, offsetY: -1 },
+    { color: "rgba(255, 120, 50, 0.45)", sizeW: 30, sizeH: 20, offsetX: 21, offsetY: 0 },
+    { color: "rgba(255, 160, 80, 0.40)", sizeW: 25, sizeH: 18, offsetX: -21, offsetY: -2 },
+    { color: "rgba(255, 90, 60, 0.45)", sizeW: 21, sizeH: 24, offsetX: 66, offsetY: 0 },
+    { color: "rgba(255, 70, 70, 0.52)", sizeW: 18, sizeH: 26, offsetX: -66, offsetY: -1 }
+  ],
+  brand: [
+    { color: "rgba(245, 158, 11, 0.48)", sizeW: 33, sizeH: 30, offsetX: 0, offsetY: 0 },
+    { color: "rgba(251, 191, 36, 0.42)", sizeW: 24, sizeH: 26, offsetX: 39, offsetY: -3 },
+    { color: "rgba(245, 158, 11, 0.48)", sizeW: 27, sizeH: 24, offsetX: -36, offsetY: 0 },
+    { color: "rgba(217, 119, 6, 0.42)", sizeW: 23, sizeH: 28, offsetX: -54, offsetY: -2 },
+    { color: "rgba(252, 211, 77, 0.50)", sizeW: 24, sizeH: 24, offsetX: 51, offsetY: -1 },
+    { color: "rgba(234, 138, 9, 0.45)", sizeW: 30, sizeH: 20, offsetX: 21, offsetY: 0 },
+    { color: "rgba(251, 191, 36, 0.40)", sizeW: 25, sizeH: 18, offsetX: -21, offsetY: -2 },
+    { color: "rgba(217, 119, 6, 0.45)", sizeW: 21, sizeH: 24, offsetX: 66, offsetY: 0 },
+    { color: "rgba(245, 158, 11, 0.52)", sizeW: 18, sizeH: 26, offsetX: -66, offsetY: -1 }
+  ]
+};
+function getLineInnerGradients(colorVariant, id) {
+  const data = lineInnerGradientData[colorVariant];
+  return data.map((c) => {
+    const offsetXStr = c.offsetX === 0 ? "" : c.offsetX > 0 ? ` + ${c.offsetX}px` : ` - ${Math.abs(c.offsetX)}px`;
+    const offsetYStr = c.offsetY === 0 ? "" : ` - ${Math.abs(c.offsetY)}px`;
+    return `radial-gradient(ellipse calc(${c.sizeW}px * var(--beam-w-${id})) calc(${c.sizeH}px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%${offsetXStr}) calc(100%${offsetYStr}), ${c.color}, transparent)`;
+  }).join(",\n    ");
+}
+var lineBloomColors = {
+  colorful: {
+    dark: {
+      spikes: [
+        { color1: "rgb(100, 70, 255)", color2: "rgba(100, 70, 255, 1)" },
+        // 36%
+        { color1: "rgba(255, 170, 40, 0.59)", color2: "rgba(255, 170, 40, 0.29)" },
+        // 50%
+        { color1: "rgb(50, 200, 100)", color2: "rgba(50, 200, 100, 1)" },
+        // 64%
+        { color1: "rgba(200, 50, 240, 0.91)", color2: "rgba(200, 50, 240, 0.45)" },
+        // 78%
+        { color1: "rgb(40, 140, 255)", color2: "rgba(40, 140, 255, 1)" }
+        // 92%
+      ]
+    },
+    light: {
+      spikes: [
+        { color1: "rgb(80, 50, 200)", color2: "rgba(80, 50, 200, 0.8)" },
+        // 36%
+        { color1: "rgba(210, 130, 0, 0.7)", color2: "rgba(210, 130, 0, 0.46)" },
+        // 50%
+        { color1: "rgb(30, 160, 70)", color2: "rgba(30, 160, 70, 0.82)" },
+        // 64%
+        { color1: "rgb(160, 30, 190)", color2: "rgba(160, 30, 190, 0.7)" },
+        // 78%
+        { color1: "rgb(30, 100, 200)", color2: "rgba(30, 100, 200, 0.78)" }
+        // 92%
+      ]
+    }
+  },
+  mono: {
+    dark: {
+      spikes: [
+        { color1: "rgb(200, 200, 200)", color2: "rgba(200, 200, 200, 1)" },
+        { color1: "rgba(180, 180, 180, 0.59)", color2: "rgba(180, 180, 180, 0.29)" },
+        { color1: "rgb(190, 190, 190)", color2: "rgba(190, 190, 190, 1)" },
+        { color1: "rgba(170, 170, 170, 0.91)", color2: "rgba(170, 170, 170, 0.45)" },
+        { color1: "rgb(185, 185, 185)", color2: "rgba(185, 185, 185, 1)" }
+      ]
+    },
+    light: {
+      spikes: [
+        { color1: "rgb(80, 80, 80)", color2: "rgba(80, 80, 80, 0.8)" },
+        { color1: "rgba(100, 100, 100, 0.7)", color2: "rgba(100, 100, 100, 0.46)" },
+        { color1: "rgb(70, 70, 70)", color2: "rgba(70, 70, 70, 0.82)" },
+        { color1: "rgb(90, 90, 90)", color2: "rgba(90, 90, 90, 0.7)" },
+        { color1: "rgb(85, 85, 85)", color2: "rgba(85, 85, 85, 0.78)" }
+      ]
+    }
+  },
+  ocean: {
+    dark: {
+      spikes: [
+        { color1: "rgb(100, 80, 255)", color2: "rgb(100, 80, 255)" },
+        { color1: "rgba(80, 130, 220, 0.59)", color2: "rgba(80, 130, 220, 0.29)" },
+        { color1: "rgb(60, 100, 255)", color2: "rgb(60, 100, 255)" },
+        { color1: "rgba(90, 120, 200, 0.91)", color2: "rgba(90, 120, 200, 0.45)" },
+        { color1: "rgb(120, 90, 255)", color2: "rgb(120, 90, 255)" }
+      ]
+    },
+    light: {
+      spikes: [
+        { color1: "rgb(50, 40, 180)", color2: "rgba(50, 40, 180, 0.8)" },
+        { color1: "rgba(40, 80, 200, 0.7)", color2: "rgba(40, 80, 200, 0.46)" },
+        { color1: "rgb(30, 50, 190)", color2: "rgba(30, 50, 190, 0.82)" },
+        { color1: "rgb(60, 90, 180)", color2: "rgba(60, 90, 180, 0.7)" },
+        { color1: "rgb(70, 60, 200)", color2: "rgba(70, 60, 200, 0.78)" }
+      ]
+    }
+  },
+  sunset: {
+    dark: {
+      spikes: [
+        { color1: "rgb(255, 100, 80)", color2: "rgb(255, 100, 80)" },
+        { color1: "rgba(255, 150, 80, 0.59)", color2: "rgba(255, 150, 80, 0.29)" },
+        { color1: "rgb(255, 80, 60)", color2: "rgb(255, 80, 60)" },
+        { color1: "rgba(255, 120, 50, 0.91)", color2: "rgba(255, 120, 50, 0.45)" },
+        { color1: "rgb(255, 140, 70)", color2: "rgb(255, 140, 70)" }
+      ]
+    },
+    light: {
+      spikes: [
+        { color1: "rgb(200, 60, 30)", color2: "rgba(200, 60, 30, 0.8)" },
+        { color1: "rgba(220, 100, 20, 0.7)", color2: "rgba(220, 100, 20, 0.46)" },
+        { color1: "rgb(180, 40, 20)", color2: "rgba(180, 40, 20, 0.82)" },
+        { color1: "rgb(210, 80, 10)", color2: "rgba(210, 80, 10, 0.7)" },
+        { color1: "rgb(190, 70, 30)", color2: "rgba(190, 70, 30, 0.78)" }
+      ]
+    }
+  },
+  brand: {
+    dark: {
+      spikes: [
+        { color1: "rgb(251, 191, 36)", color2: "rgb(251, 191, 36)" },
+        { color1: "rgba(245, 158, 11, 0.59)", color2: "rgba(245, 158, 11, 0.29)" },
+        { color1: "rgb(217, 119, 6)", color2: "rgb(217, 119, 6)" },
+        { color1: "rgba(252, 211, 77, 0.91)", color2: "rgba(252, 211, 77, 0.45)" },
+        { color1: "rgb(245, 158, 11)", color2: "rgb(245, 158, 11)" }
+      ]
+    },
+    light: {
+      spikes: [
+        { color1: "rgb(180, 83, 9)", color2: "rgba(180, 83, 9, 0.8)" },
+        { color1: "rgba(202, 138, 4, 0.7)", color2: "rgba(202, 138, 4, 0.46)" },
+        { color1: "rgb(146, 64, 14)", color2: "rgba(146, 64, 14, 0.82)" },
+        { color1: "rgb(202, 138, 4)", color2: "rgba(202, 138, 4, 0.7)" },
+        { color1: "rgb(161, 98, 7)", color2: "rgba(161, 98, 7, 0.78)" }
+      ]
+    }
+  }
+};
+function withAlpha(color, alpha) {
+  const rgbaMatch = color.match(/^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*[\d.]+\s*\)$/);
+  if (rgbaMatch) return `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, ${alpha})`;
+  const rgbMatch = color.match(/^rgb\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);
+  if (rgbMatch) return `rgba(${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}, ${alpha})`;
+  return color;
+}
+function attenuateSpike(color, factor) {
+  const rgbaMatch = color.match(/^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);
+  if (rgbaMatch) return `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, ${(parseFloat(rgbaMatch[4]) * factor).toFixed(2)})`;
+  const rgbMatch = color.match(/^rgb\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);
+  if (rgbMatch) return `rgba(${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}, ${factor.toFixed(2)})`;
+  return color;
+}
+function getLineBloomGradients(colorVariant, isDark, id) {
+  const spikeColors = getSpikeColors(colorVariant, isDark);
+  const bloomData = lineBloomColors[colorVariant][isDark ? "dark" : "light"];
+  const isMono = colorVariant === "mono";
+  const att = isMono ? 0.14 : 1;
+  const sc1 = isMono ? attenuateSpike(spikeColors.primary, 0.14) : spikeColors.primary;
+  const sc1_mid = isMono ? attenuateSpike(spikeColors.primary, 0.09) : spikeColors.primary;
+  const sc2 = isMono ? attenuateSpike(spikeColors.secondary, 0.12) : spikeColors.secondary;
+  const sc2_mid = isMono ? withAlpha(spikeColors.secondary, 0.06) : withAlpha(spikeColors.secondary, 0.49);
+  const spikes = bloomData.spikes.map(
+    (s) => isMono ? { color1: attenuateSpike(s.color1, att), color2: attenuateSpike(s.color2, att * 0.7) } : s
+  );
+  const thinW1 = isMono ? "12px" : "0.8px";
+  const thinW2 = isMono ? "14px" : "2px";
+  const thinW3 = isMono ? "12px" : "1.2px";
+  const thinW4 = isMono ? "10px" : "0.6px";
+  const thinH1 = isMono ? "42px" : "92px";
+  const thinH2 = isMono ? "38px" : "72px";
+  const thinH3 = isMono ? "40px" : "85px";
+  const thinH4 = isMono ? "32px" : "60px";
+  const thinLW = isMono ? "12px" : "1px";
+  const glowDotC = isMono ? "rgba(255, 255, 255, 0.5)" : "rgba(255, 255, 255, 1)";
+  const glowDot20 = isMono ? "rgba(255, 255, 255, 0.45)" : "rgba(255, 255, 255, 0.9)";
+  const glowDot50 = isMono ? "rgba(255, 255, 255, 0.25)" : "rgba(255, 255, 255, 0.5)";
+  const glowAmbC = isMono ? "rgba(255, 255, 255, 0.15)" : "rgba(255, 255, 255, 0.3)";
+  const glowAmb25 = isMono ? "rgba(255, 255, 255, 0.06)" : "rgba(255, 255, 255, 0.12)";
+  const glowAmb55 = isMono ? "rgba(255, 255, 255, 0.015)" : "rgba(255, 255, 255, 0.03)";
+  if (isDark) {
+    return `radial-gradient(ellipse calc(${thinW1} * var(--beam-spike-${id})) calc(${thinH1} * var(--beam-h-${id})) at 8% calc(100% - 2px), ${sc1}, ${sc1_mid} 30%, transparent 88%),
+       radial-gradient(ellipse calc(10px * var(--beam-spike2-${id})) calc(35px * var(--beam-h-${id})) at 22% calc(100% - 4px), ${sc2}, ${sc2_mid} 50%, transparent 95%),
+       radial-gradient(ellipse calc(${thinW2} * (2 - var(--beam-spike-${id}))) calc(${thinH2} * var(--beam-h-${id})) at 36% calc(100% - 3px), ${spikes[0].color1}, ${spikes[0].color2} 40%, transparent 90%),
+       radial-gradient(ellipse calc(14px * var(--beam-spike2-${id})) calc(28px * var(--beam-h-${id})) at 50% calc(100% - 2px), ${spikes[1].color1}, ${spikes[1].color2} 55%, transparent 96%),
+       radial-gradient(ellipse calc(${thinW3} * (2 - var(--beam-spike2-${id}))) calc(${thinH3} * var(--beam-h-${id})) at 64% calc(100% - 4px), ${spikes[2].color1}, ${spikes[2].color2} 35%, transparent 89%),
+       radial-gradient(ellipse calc(7px * var(--beam-spike-${id})) calc(45px * var(--beam-h-${id})) at 78% calc(100% - 2px), ${spikes[3].color1}, ${spikes[3].color2} 48%, transparent 94%),
+       radial-gradient(ellipse calc(${thinW4} * (2 - var(--beam-spike-${id}))) calc(${thinH4} * var(--beam-h-${id})) at 92% calc(100% - 3px), ${spikes[4].color1}, ${spikes[4].color2} 42%, transparent 91%),
+       radial-gradient(ellipse calc(21px * var(--beam-spike-${id})) calc(15px * var(--beam-spike2-${id})) at calc(var(--beam-x-${id}) * 100%) calc(100% + 1px), ${glowDotC} 0%, ${glowDot20} 20%, ${glowDot50} 50%, transparent 100%),
+       radial-gradient(ellipse calc(42px * var(--beam-w-${id})) calc(40px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) 100%, ${glowAmbC} 0%, ${glowAmb25} 25%, ${glowAmb55} 55%, transparent 80%)`;
+  } else {
+    const sc1_lt = isMono ? attenuateSpike(spikeColors.primary, 0.11) : withAlpha(spikeColors.primary, 0.85);
+    const sc2_lt = isMono ? attenuateSpike(spikeColors.secondary, 0.09) : withAlpha(spikeColors.secondary, 0.7);
+    return `radial-gradient(ellipse calc(${thinW1} * var(--beam-spike-${id})) calc(${thinH1} * var(--beam-h-${id})) at 8% calc(100% - 2px), ${sc1}, ${sc1_lt} 30%, transparent 88%),
+       radial-gradient(ellipse calc(10px * var(--beam-spike2-${id})) calc(35px * var(--beam-h-${id})) at 22% calc(100% - 4px), ${sc2}, ${sc2_lt} 50%, transparent 95%),
+       radial-gradient(ellipse calc(${thinW2} * (2 - var(--beam-spike-${id}))) calc(${thinH2} * var(--beam-h-${id})) at 36% calc(100% - 3px), ${spikes[0].color1}, ${spikes[0].color2} 40%, transparent 90%),
+       radial-gradient(ellipse calc(14px * var(--beam-spike2-${id})) calc(28px * var(--beam-h-${id})) at 50% calc(100% - 2px), ${spikes[1].color1}, ${spikes[1].color2} 55%, transparent 96%),
+       radial-gradient(ellipse calc(${thinW3} * (2 - var(--beam-spike2-${id}))) calc(${thinH3} * var(--beam-h-${id})) at 64% calc(100% - 4px), ${spikes[2].color1}, ${spikes[2].color2} 35%, transparent 89%),
+       radial-gradient(ellipse calc(7px * var(--beam-spike-${id})) calc(45px * var(--beam-h-${id})) at 78% calc(100% - 2px), ${spikes[3].color1}, ${spikes[3].color2} 48%, transparent 94%),
+       radial-gradient(ellipse calc(${thinLW} * (2 - var(--beam-spike-${id}))) calc(${thinH4} * var(--beam-h-${id})) at 92% calc(100% - 3px), ${spikes[4].color1}, ${spikes[4].color2} 42%, transparent 91%),
+       radial-gradient(ellipse calc(50px * var(--beam-w-${id})) calc(32px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) calc(100%), rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%)`;
+  }
+}
+var PULSE_RING_MAP = [
+  { region: 1, quad: "tl" },
+  { region: 2, quad: "tl" },
+  { region: 3, quad: "bl" },
+  { region: 1, quad: "bl" },
+  { region: 2, quad: "br" },
+  { region: 3, quad: "br" },
+  { region: 1, quad: "tr" },
+  { region: 2, quad: "tr" },
+  { region: 3, quad: "tr" }
+];
+var PULSE_INNER_SIZES = [
+  [65, 35],
+  [55, 30],
+  [35, 65],
+  [15, 30],
+  [173, 28],
+  [80, 22],
+  [69, 28],
+  [22, 38],
+  [47, 44]
+];
+var PULSE_INNER_BLOOM = [
+  { ci: 0, region: 1, quad: "tl", w: 84, h: 48 },
+  { ci: 1, region: 2, quad: "tl", w: 72, h: 42 },
+  { ci: 2, region: 3, quad: "bl", w: 48, h: 84 },
+  { ci: 4, region: 2, quad: "br", w: 216, h: 38 },
+  { ci: 5, region: 3, quad: "br", w: 102, h: 31 },
+  { ci: 6, region: 1, quad: "tr", w: 89, h: 38 },
+  { ci: 8, region: 3, quad: "tr", w: 62, h: 58 }
+];
+var PULSE_OUTER_CORE = [
+  { ci: 0, region: 1, quad: "tl", w: 80, h: 19, x: "27%", y: "0%" },
+  { ci: 6, region: 2, quad: "tr", w: 74, h: 11, x: "73%", y: "-1%" },
+  { ci: 7, region: 3, quad: "tr", w: 15, h: 44, x: "100%", y: "33%" },
+  { ci: 8, region: 1, quad: "br", w: 19, h: 38, x: "101%", y: "72%" },
+  { ci: 4, region: 2, quad: "br", w: 84, h: 13, x: "67%", y: "100%" },
+  { ci: 1, region: 3, quad: "bl", w: 60, h: 21, x: "24%", y: "101%" },
+  { ci: 2, region: 1, quad: "bl", w: 17, h: 40, x: "0%", y: "60%" },
+  { ci: 3, region: 2, quad: "tl", w: 13, h: 32, x: "-1%", y: "28%" }
+];
+var PULSE_OUTER_BLOOM = [
+  { ci: 0, region: 1, quad: "tl", w: 110, h: 30, x: "27%", y: "3%" },
+  { ci: 6, region: 2, quad: "tr", w: 100, h: 20, x: "73%", y: "1%" },
+  { ci: 7, region: 3, quad: "tr", w: 26, h: 62, x: "100%", y: "33%" },
+  { ci: 8, region: 1, quad: "br", w: 30, h: 56, x: "101%", y: "72%" },
+  { ci: 4, region: 2, quad: "br", w: 120, h: 22, x: "67%", y: "99%" },
+  { ci: 1, region: 3, quad: "bl", w: 88, h: 32, x: "24%", y: "99%" },
+  { ci: 2, region: 1, quad: "bl", w: 28, h: 58, x: "0%", y: "60%" }
+];
+function withAlphaVar(color, quad, id) {
+  const m = color.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/);
+  const rgb = m ? `${m[1]}, ${m[2]}, ${m[3]}` : "255, 255, 255";
+  return `rgba(${rgb}, var(--bop-${quad}-${id}))`;
+}
+function pulseGrad(color, w, h, region, quad, x, y, id) {
+  return `radial-gradient(ellipse calc(${w}px * var(--bw${region}-${id}) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(${h}px * var(--bh${region}-${id}) * var(--bgh-${id}) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(${x} + var(--bx${region}-${id})) calc(${y} + var(--by${region}-${id})), ${withAlphaVar(color, quad, id)}, transparent)`;
+}
+function pulseRingGradients(variant, id) {
+  return colorPalettes[variant].border.map((c, i) => {
+    const { region, quad } = PULSE_RING_MAP[i];
+    const [x, y] = c.pos.split(" ");
+    const [w, h] = c.size.split(" ").map(parseFloat);
+    return pulseGrad(c.color, w, h, region, quad, x, y, id);
+  }).join(",\n    ");
+}
+function pulseInnerGradients(variant, id, isDark) {
+  const palette = colorPalettes[variant].border;
+  const grads = palette.map((c, i) => {
+    const { region, quad } = PULSE_RING_MAP[i];
+    const [x, y] = c.pos.split(" ");
+    const [w, h] = PULSE_INNER_SIZES[i];
+    return pulseGrad(c.color, w, h, region, quad, x, y, id);
+  });
+  const cornerRGB = isDark ? "255, 255, 255" : "0, 0, 0";
+  const cornerAlpha = isDark ? 0.18 : 0.08;
+  const corners = [
+    ["0%", "0%", "tl"],
+    ["100%", "0%", "tr"],
+    ["0%", "100%", "bl"],
+    ["100%", "100%", "br"]
+  ];
+  const cornerGrads = corners.map(
+    ([x, y, q]) => `radial-gradient(ellipse 60px 60px at ${x} ${y}, rgba(${cornerRGB}, calc(${cornerAlpha} * var(--bop-${q}-${id}))), transparent 70%)`
+  );
+  return [...grads, ...cornerGrads].join(",\n    ");
+}
+function pulseTableGradients(table, variant, id) {
+  const palette = colorPalettes[variant].border;
+  return table.map((e) => {
+    const c = palette[e.ci];
+    const [px, py] = c.pos.split(" ");
+    return pulseGrad(c.color, e.w, e.h, e.region, e.quad, e.x ?? px, e.y ?? py, id);
+  }).join(",\n    ");
+}
+function pulseTableGradientsStatic(table, variant, frozenAlpha) {
+  const palette = colorPalettes[variant].border;
+  const a = +frozenAlpha.toFixed(3);
+  return table.map((e) => {
+    const c = palette[e.ci];
+    const [px, py] = c.pos.split(" ");
+    const x = e.x ?? px;
+    const y = e.y ?? py;
+    const m = c.color.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/);
+    const rgb = m ? `${m[1]}, ${m[2]}, ${m[3]}` : "255, 255, 255";
+    return `radial-gradient(ellipse calc(${e.w}px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(${e.h}px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at ${x} ${y}, rgba(${rgb}, ${a}), transparent)`;
+  }).join(",\n    ");
+}
+function pausedAnimationsRule(id) {
+  return `
+[data-beam="${id}"][data-paused],
+[data-beam="${id}"][data-paused]::after,
+[data-beam="${id}"][data-paused]::before,
+[data-beam="${id}"][data-paused] [data-beam-bloom] {
+  animation-play-state: paused !important;
+}`;
+}
+function pulsePropertyRegs(id) {
+  const numbers = ["bw1", "bh1", "bw2", "bh2", "bw3", "bh3", "bgh", "bop-tl", "bop-tr", "bop-bl", "bop-br"];
+  const lengths = ["bx1", "by1", "bx2", "by2", "bx3", "by3"];
+  const numReg = numbers.map(
+    (n) => `@property --${n}-${id} {
+  syntax: "<number>";
+  initial-value: 1;
+  inherits: true;
+}`
+  ).join("\n\n");
+  const lenReg = lengths.map(
+    (n) => `@property --${n}-${id} {
+  syntax: "<length>";
+  initial-value: 0px;
+  inherits: true;
+}`
+  ).join("\n\n");
+  return `${numReg}
+
+${lenReg}
+
+@property --beam-opacity-${id} {
+  syntax: "<number>";
+  initial-value: 0;
+  inherits: true;
+}
+
+@property --beam-hue-${id} {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: true;
+}`;
+}
+function pulseParams(size, theme, duration) {
+  const isDark = theme === "dark";
+  const durScale = duration / 2.3;
+  if (size === "pulse-inner") {
+    return {
+      sp: 0.28,
+      dr: isDark ? 33 : 40,
+      op: isDark ? 0.48 : 0.45,
+      gh: isDark ? 0.34 : 0.22,
+      bs: (isDark ? 1.9 : 2.6) * durScale,
+      ss: (isDark ? 2.6 : 4.6) * durScale,
+      ghs: (isDark ? 2.4 : 5.5) * durScale,
+      // Full hue revolution period (seconds) — colors continuously cycle.
+      huePeriod: 16
+    };
+  }
+  return {
+    sp: isDark ? 0.28 : 0.36,
+    dr: isDark ? 14 : 19,
+    op: isDark ? 0.46 : 0,
+    gh: isDark ? 0.16 : 0.58,
+    bs: (isDark ? 2.3 : 3.7) * durScale,
+    ss: (isDark ? 6.4 : 4.6) * durScale,
+    ghs: (isDark ? 2.4 : 3.8) * durScale,
+    // Full hue revolution period (seconds) — colors continuously cycle.
+    huePeriod: 14
+  };
+}
+function pulseOscillatorDefs(id, p) {
+  const { sp, dr, op, gh, bs, ss, ghs } = p;
+  return [
+    { prop: `--bw1-${id}`, a: 1 - sp, b: 1 + sp * 1.1, period: ss * 0.9, delay: 0, unit: "" },
+    { prop: `--bh1-${id}`, a: 1 + sp * 0.9, b: 1 - sp * 0.85, period: ss * 1.26, delay: 0, unit: "" },
+    { prop: `--bx1-${id}`, a: -dr, b: dr * 0.9, period: bs * 1.6, delay: 0, unit: "px" },
+    { prop: `--by1-${id}`, a: dr * 0.55, b: -dr * 0.7, period: bs * 1.6, delay: 0, unit: "px" },
+    { prop: `--bw2-${id}`, a: 1 + sp, b: 1 - sp * 0.85, period: ss * 1.1, delay: 0, unit: "" },
+    { prop: `--bh2-${id}`, a: 1 - sp * 0.8, b: 1 + sp * 1.05, period: ss * 0.81, delay: 0, unit: "" },
+    { prop: `--bx2-${id}`, a: dr * 0.8, b: -dr * 0.9, period: bs * 1.88, delay: 0, unit: "px" },
+    { prop: `--by2-${id}`, a: -dr, b: dr * 0.65, period: bs * 1.88, delay: 0, unit: "px" },
+    { prop: `--bw3-${id}`, a: 1 - sp * 0.6, b: 1 + sp * 1.15, period: ss * 0.98, delay: 0, unit: "" },
+    { prop: `--bh3-${id}`, a: 1 + sp * 0.75, b: 1 - sp, period: ss * 1.4, delay: 0, unit: "" },
+    { prop: `--bx3-${id}`, a: -dr * 0.6, b: dr, period: bs * 1.45, delay: 0, unit: "px" },
+    { prop: `--by3-${id}`, a: -dr * 0.85, b: dr * 0.45, period: bs * 1.45, delay: 0, unit: "px" },
+    { prop: `--bgh-${id}`, a: 1 - gh, b: 1 + gh, period: ghs, delay: 0, unit: "" },
+    { prop: `--bop-tl-${id}`, a: 1 - op, b: 1, period: bs, delay: 0, unit: "" },
+    { prop: `--bop-tr-${id}`, a: 1 - op, b: 1, period: bs * 1.32, delay: bs * 0.28, unit: "" },
+    { prop: `--bop-bl-${id}`, a: 1 - op, b: 1, period: bs * 0.84, delay: bs * 0.55, unit: "" },
+    { prop: `--bop-br-${id}`, a: 1 - op, b: 1, period: bs * 1.58, delay: bs * 0.83, unit: "" }
+  ];
+}
+function getPulseDriverConfig(size, theme, duration, _hueRange, staticColors, id) {
+  if (size !== "pulse-inner" && size !== "pulse-outside") return null;
+  const p = pulseParams(size, theme, duration);
+  return {
+    oscillators: pulseOscillatorDefs(id, p),
+    // Pulse colors continuously rotate a full hue circle so the palette is never
+    // pinned to fixed edges (no more "always red top-right / green left").
+    hue: staticColors ? null : { prop: `--beam-hue-${id}`, range: 360, period: p.huePeriod, continuous: true }
+  };
+}
+function pulseWrapperAnimation(id, fadeName, fadeDur) {
+  return `  animation: ${fadeName}-${id} ${fadeDur}s ease forwards;`;
+}
+function generateBeamCSS(options) {
+  const { size } = options;
+  if (size === "line") {
+    return generateLineVariantCSS(options);
+  }
+  if (size === "sm") {
+    return generateSmallVariantCSS(options);
+  }
+  if (size === "pulse-inner") {
+    return generatePulseInnerVariantCSS(options);
+  }
+  if (size === "pulse-outside") {
+    return generatePulseOuterVariantCSS(options);
+  }
+  return generateBorderVariantCSS(options);
+}
+function generateSmallVariantCSS(options) {
+  const {
+    id,
+    borderRadius,
+    borderWidth,
+    duration,
+    strokeOpacity,
+    innerOpacity,
+    bloomOpacity,
+    innerShadow,
+    colorVariant,
+    staticColors,
+    brightness,
+    saturation,
+    hueRange,
+    theme
+  } = options;
+  const innerRadius = Math.max(0, borderRadius - borderWidth);
+  const monoOpacityMultiplier = colorVariant === "mono" ? 0.5 : 1;
+  const finalStrokeOpacity = strokeOpacity * monoOpacityMultiplier;
+  const finalInnerOpacity = innerOpacity * monoOpacityMultiplier;
+  const finalBloomOpacity = bloomOpacity * monoOpacityMultiplier;
+  const hueShiftAnimation = staticColors ? "" : `animation: beam-hue-shift-${id} 12s ease-in-out infinite;`;
+  const hueShiftKeyframes = staticColors ? "" : `
+@keyframes beam-hue-shift-${id} {
+  0% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - ${hueRange}deg)) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)}); }
+  50% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + ${hueRange}deg)) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)}); }
+  100% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - ${hueRange}deg)) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)}); }
+}`;
+  const isDark = theme === "dark";
+  const whiteGradient = isDark ? `conic-gradient(
+        from var(--beam-angle-${id}),
+        transparent 0%, transparent 54%,
+        rgba(255, 255, 255, 0.1) 57%,
+        rgba(255, 255, 255, 0.3) 60%,
+        rgba(255, 255, 255, 0.6) 63%,
+        rgba(255, 255, 255, 0.75) 66%,
+        rgba(255, 255, 255, 0.6) 69%,
+        rgba(255, 255, 255, 0.3) 72%,
+        rgba(255, 255, 255, 0.1) 75%,
+        transparent 78%, transparent 100%
+      )` : `conic-gradient(
+        from var(--beam-angle-${id}),
+        transparent 0%, transparent 54%,
+        rgba(0, 0, 0, 0.08) 57%,
+        rgba(0, 0, 0, 0.2) 60%,
+        rgba(0, 0, 0, 0.4) 63%,
+        rgba(0, 0, 0, 0.55) 66%,
+        rgba(0, 0, 0, 0.4) 69%,
+        rgba(0, 0, 0, 0.2) 72%,
+        rgba(0, 0, 0, 0.08) 75%,
+        transparent 78%, transparent 100%
+      )`;
+  const colorGradients = getSmallColorGradients(colorVariant);
+  const innerGradients = getSmallInnerGradients(colorVariant);
+  const bloomGradient = isDark ? `conic-gradient(
+        from var(--beam-angle-${id}),
+        transparent 0%, transparent 58%,
+        rgba(255, 255, 255, 0.03) 62%,
+        rgba(255, 255, 255, 0.08) 65%,
+        rgba(255, 255, 255, 0.2) 67%,
+        rgba(255, 255, 255, 0.45) 69%,
+        rgba(255, 255, 255, 0.85) 70%,
+        rgba(255, 255, 255, 0.85) 70.5%,
+        rgba(255, 255, 255, 0.45) 71.5%,
+        rgba(255, 255, 255, 0.2) 73%,
+        rgba(255, 255, 255, 0.08) 75%,
+        rgba(255, 255, 255, 0.03) 78%,
+        transparent 82%
+      )` : `conic-gradient(
+        from var(--beam-angle-${id}),
+        transparent 0%, transparent 58%,
+        rgba(0, 0, 0, 0.02) 62%,
+        rgba(0, 0, 0, 0.08) 65%,
+        rgba(0, 0, 0, 0.2) 67%,
+        rgba(0, 0, 0, 0.4) 69%,
+        rgba(0, 0, 0, 0.6) 70%,
+        rgba(0, 0, 0, 0.6) 70.5%,
+        rgba(0, 0, 0, 0.4) 71.5%,
+        rgba(0, 0, 0, 0.2) 73%,
+        rgba(0, 0, 0, 0.08) 75%,
+        rgba(0, 0, 0, 0.02) 78%,
+        transparent 82%
+      )`;
+  const smallMask = `conic-gradient(
+    from var(--beam-angle-${id}),
+    transparent 0%, transparent 22%,
+    rgba(255, 255, 255, 0.12) 28%, rgba(255, 255, 255, 0.4) 36%,
+    white 46%, white 82%,
+    rgba(255, 255, 255, 0.4) 88%, rgba(255, 255, 255, 0.12) 94%,
+    transparent 97%, transparent 100%
+  )`;
+  return `
+@property --beam-angle-${id} {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: true;
+}
+
+@property --beam-opacity-${id} {
+  syntax: "<number>";
+  initial-value: 0;
+  inherits: true;
+}
+
+[data-beam="${id}"] {
+  position: relative;
+  border-radius: ${borderRadius}px;
+  overflow: hidden;
+}
+
+[data-beam="${id}"][data-active] {
+  animation:
+    beam-spin-${id} ${duration}s linear infinite,
+    beam-fade-in-${id} 0.6s ease forwards;
+}
+
+[data-beam="${id}"][data-fading] {
+  animation:
+    beam-spin-${id} ${duration}s linear infinite,
+    beam-fade-out-${id} 0.5s ease forwards;
+}
+
+[data-beam="${id}"][data-active]::after,
+[data-beam="${id}"][data-fading]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: ${innerRadius}px;
+  padding: ${borderWidth}px;
+  clip-path: inset(0 round ${borderRadius}px);
+  background: ${whiteGradient},${colorGradients};
+  -webkit-mask:
+    conic-gradient(
+      from var(--beam-angle-${id}),
+      transparent 0%, transparent 30%,
+      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
+      white 52%, white 80%,
+      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
+      transparent 95%, transparent 100%
+    ),
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: source-in, xor;
+  mask:
+    conic-gradient(
+      from var(--beam-angle-${id}),
+      transparent 0%, transparent 30%,
+      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
+      white 52%, white 80%,
+      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
+      transparent 95%, transparent 100%
+    ),
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: intersect, exclude;
+  pointer-events: none;
+  z-index: 2;
+  opacity: calc(var(--beam-opacity-${id}) * ${finalStrokeOpacity.toFixed(2)} * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1));
+  ${hueShiftAnimation}
+}
+
+[data-beam="${id}"][data-active]::before,
+[data-beam="${id}"][data-fading]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: ${borderRadius}px;
+  clip-path: inset(0 round ${borderRadius}px);
+  background: ${innerGradients};
+  box-shadow: inset 0 0 5px 1px ${innerShadow};
+  -webkit-mask-image: ${smallMask};
+  -webkit-mask-composite: source-over;
+  mask-image: ${smallMask};
+  mask-composite: add;
+  pointer-events: none;
+  z-index: 1;
+  opacity: calc(var(--beam-opacity-${id}) * ${finalInnerOpacity.toFixed(2)} * var(--beam-inner-opacity, 1) * var(--beam-strength, 1));
+  ${hueShiftAnimation}
+}
+
+[data-beam="${id}"] [data-beam-bloom] {
+  display: none;
+  position: absolute;
+  inset: 0;
+  border-radius: ${innerRadius}px;
+  clip-path: inset(0 round ${borderRadius}px);
+  background: ${bloomGradient};
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  padding: ${borderWidth}px;
+  filter: blur(8px) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)});
+  pointer-events: none;
+  z-index: 3;
+  opacity: 0;
+}
+
+[data-beam="${id}"][data-active] [data-beam-bloom],
+[data-beam="${id}"][data-fading] [data-beam-bloom] {
+  display: block;
+  opacity: calc(var(--beam-opacity-${id}) * ${finalBloomOpacity.toFixed(2)} * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1));
+}
+
+@keyframes beam-spin-${id} {
+  to { --beam-angle-${id}: 360deg; }
+}
+
+@keyframes beam-fade-in-${id} {
+  to { --beam-opacity-${id}: 1; }
+}
+
+@keyframes beam-fade-out-${id} {
+  from { --beam-opacity-${id}: 1; }
+  to { --beam-opacity-${id}: 0; }
+}
+${hueShiftKeyframes}
+${pausedAnimationsRule(id)}
+`;
+}
+function generateBorderVariantCSS(options) {
+  const {
+    id,
+    borderRadius,
+    borderWidth,
+    duration,
+    strokeOpacity,
+    innerOpacity,
+    bloomOpacity,
+    innerShadow,
+    colorVariant,
+    staticColors,
+    brightness,
+    saturation,
+    hueRange,
+    theme
+  } = options;
+  const innerRadius = Math.max(0, borderRadius - borderWidth);
+  const monoOpacityMultiplier = colorVariant === "mono" ? 0.5 : 1;
+  const finalStrokeOpacity = strokeOpacity * monoOpacityMultiplier;
+  const finalInnerOpacity = innerOpacity * monoOpacityMultiplier;
+  const finalBloomOpacity = bloomOpacity * monoOpacityMultiplier;
+  const hueShiftAnimation = staticColors ? "" : `animation: beam-hue-shift-${id} 12s ease-in-out infinite;`;
+  const hueShiftKeyframes = staticColors ? "" : `
+@keyframes beam-hue-shift-${id} {
+  0% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - ${hueRange}deg)) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)}); }
+  50% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + ${hueRange}deg)) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)}); }
+  100% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - ${hueRange}deg)) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)}); }
+}`;
+  const isDark = theme === "dark";
+  const whiteGradient = isDark ? `conic-gradient(
+        from var(--beam-angle-${id}),
+        transparent 0%, transparent 54%,
+        rgba(255, 255, 255, 0.1) 57%,
+        rgba(255, 255, 255, 0.3) 60%,
+        rgba(255, 255, 255, 0.6) 63%,
+        rgba(255, 255, 255, 0.75) 66%,
+        rgba(255, 255, 255, 0.6) 69%,
+        rgba(255, 255, 255, 0.3) 72%,
+        rgba(255, 255, 255, 0.1) 75%,
+        transparent 78%, transparent 100%
+      )` : `conic-gradient(
+        from var(--beam-angle-${id}),
+        transparent 0%, transparent 54%,
+        rgba(0, 0, 0, 0.08) 57%,
+        rgba(0, 0, 0, 0.2) 60%,
+        rgba(0, 0, 0, 0.4) 63%,
+        rgba(0, 0, 0, 0.55) 66%,
+        rgba(0, 0, 0, 0.4) 69%,
+        rgba(0, 0, 0, 0.2) 72%,
+        rgba(0, 0, 0, 0.08) 75%,
+        transparent 78%, transparent 100%
+      )`;
+  const colorGradients = getColorGradients(colorVariant);
+  const innerGradients = getInnerGradients(colorVariant);
+  const bloomGradient = isDark ? `conic-gradient(
+        from var(--beam-angle-${id}),
+        transparent 0%, transparent 58%,
+        rgba(255, 255, 255, 0.03) 62%,
+        rgba(255, 255, 255, 0.08) 65%,
+        rgba(255, 255, 255, 0.2) 67%,
+        rgba(255, 255, 255, 0.45) 69%,
+        rgba(255, 255, 255, 0.85) 70%,
+        rgba(255, 255, 255, 0.85) 70.5%,
+        rgba(255, 255, 255, 0.45) 71.5%,
+        rgba(255, 255, 255, 0.2) 73%,
+        rgba(255, 255, 255, 0.08) 75%,
+        rgba(255, 255, 255, 0.03) 78%,
+        transparent 82%
+      )` : `conic-gradient(
+        from var(--beam-angle-${id}),
+        transparent 0%, transparent 58%,
+        rgba(0, 0, 0, 0.02) 62%,
+        rgba(0, 0, 0, 0.08) 65%,
+        rgba(0, 0, 0, 0.2) 67%,
+        rgba(0, 0, 0, 0.4) 69%,
+        rgba(0, 0, 0, 0.6) 70%,
+        rgba(0, 0, 0, 0.6) 70.5%,
+        rgba(0, 0, 0, 0.4) 71.5%,
+        rgba(0, 0, 0, 0.2) 73%,
+        rgba(0, 0, 0, 0.08) 75%,
+        rgba(0, 0, 0, 0.02) 78%,
+        transparent 82%
+      )`;
+  return `
+@property --beam-angle-${id} {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: true;
+}
+
+@property --beam-opacity-${id} {
+  syntax: "<number>";
+  initial-value: 0;
+  inherits: true;
+}
+
+[data-beam="${id}"] {
+  position: relative;
+  border-radius: ${borderRadius}px;
+  overflow: hidden;
+}
+
+[data-beam="${id}"][data-active] {
+  animation:
+    beam-spin-${id} ${duration}s linear infinite,
+    beam-fade-in-${id} 0.6s ease forwards;
+}
+
+[data-beam="${id}"][data-fading] {
+  animation:
+    beam-spin-${id} ${duration}s linear infinite,
+    beam-fade-out-${id} 0.5s ease forwards;
+}
+
+[data-beam="${id}"][data-active]::after,
+[data-beam="${id}"][data-fading]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: ${innerRadius}px;
+  padding: ${borderWidth}px;
+  clip-path: inset(0 round ${borderRadius}px);
+  background: ${whiteGradient},${colorGradients};
+  -webkit-mask:
+    conic-gradient(
+      from var(--beam-angle-${id}),
+      transparent 0%, transparent 30%,
+      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
+      white 52%, white 80%,
+      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
+      transparent 95%, transparent 100%
+    ),
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: source-in, xor;
+  mask:
+    conic-gradient(
+      from var(--beam-angle-${id}),
+      transparent 0%, transparent 30%,
+      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
+      white 52%, white 80%,
+      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
+      transparent 95%, transparent 100%
+    ),
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: intersect, exclude;
+  pointer-events: none;
+  z-index: 2;
+  opacity: calc(var(--beam-opacity-${id}) * ${finalStrokeOpacity.toFixed(2)} * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1));
+  ${hueShiftAnimation}
+}
+
+[data-beam="${id}"][data-active]::before,
+[data-beam="${id}"][data-fading]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: ${borderRadius}px;
+  background: ${innerGradients};
+  box-shadow: inset 0 0 9px 1px ${innerShadow};
+  -webkit-mask-image:
+    conic-gradient(
+      from var(--beam-angle-${id}),
+      transparent 0%, transparent 30%,
+      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
+      white 52%, white 80%,
+      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
+      transparent 95%, transparent 100%
+    ),
+    linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
+    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
+  -webkit-mask-composite: source-in, source-over;
+  mask-image:
+    conic-gradient(
+      from var(--beam-angle-${id}),
+      transparent 0%, transparent 30%,
+      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
+      white 52%, white 80%,
+      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
+      transparent 95%, transparent 100%
+    ),
+    linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
+    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
+  mask-composite: intersect, add;
+  pointer-events: none;
+  z-index: 1;
+  opacity: calc(var(--beam-opacity-${id}) * ${finalInnerOpacity.toFixed(2)} * var(--beam-inner-opacity, 1) * var(--beam-strength, 1));
+  clip-path: inset(0 round ${borderRadius}px);
+  ${hueShiftAnimation}
+}
+
+[data-beam="${id}"] [data-beam-bloom] {
+  display: none;
+  position: absolute;
+  inset: 0;
+  border-radius: ${innerRadius}px;
+  clip-path: inset(0 round ${borderRadius}px);
+  background: ${bloomGradient};
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  padding: ${borderWidth}px;
+  filter: blur(8px) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)});
+  pointer-events: none;
+  z-index: 3;
+  opacity: 0;
+}
+
+[data-beam="${id}"][data-active] [data-beam-bloom],
+[data-beam="${id}"][data-fading] [data-beam-bloom] {
+  display: block;
+  opacity: calc(var(--beam-opacity-${id}) * ${finalBloomOpacity.toFixed(2)} * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1));
+}
+
+@keyframes beam-spin-${id} {
+  to { --beam-angle-${id}: 360deg; }
+}
+
+@keyframes beam-fade-in-${id} {
+  to { --beam-opacity-${id}: 1; }
+}
+
+@keyframes beam-fade-out-${id} {
+  from { --beam-opacity-${id}: 1; }
+  to { --beam-opacity-${id}: 0; }
+}
+${hueShiftKeyframes}
+${pausedAnimationsRule(id)}
+`;
+}
+function generatePulseInnerVariantCSS(options) {
+  const {
+    id,
+    borderRadius,
+    borderWidth,
+    duration,
+    strokeOpacity,
+    innerOpacity,
+    bloomOpacity,
+    colorVariant,
+    staticColors,
+    brightness,
+    saturation,
+    theme
+  } = options;
+  const isDark = theme === "dark";
+  const monoMul = colorVariant === "mono" ? 0.5 : 1;
+  const sStroke = (strokeOpacity * monoMul).toFixed(2);
+  const sInner = (innerOpacity * monoMul).toFixed(2);
+  const sBloom = (bloomOpacity * monoMul).toFixed(2);
+  const { op } = pulseParams("pulse-inner", theme, duration);
+  const bloomBlur = 8;
+  const b = brightness.toFixed(2);
+  const s = saturation.toFixed(2);
+  const ringAnim = staticColors ? `filter: brightness(${b}) saturate(${s});` : `filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + var(--beam-hue-${id}))) brightness(${b}) saturate(${s});`;
+  const bloomAnim = staticColors ? `filter: blur(${bloomBlur}px) brightness(${b}) saturate(${s});` : `filter: blur(${bloomBlur}px) hue-rotate(calc(var(--beam-hue-base, 0deg) + var(--beam-hue-${id}))) brightness(${b}) saturate(${s});`;
+  const ringGradients = pulseRingGradients(colorVariant, id);
+  const innerGradients = pulseInnerGradients(colorVariant, id, isDark);
+  const bloomGradients = pulseTableGradientsStatic(PULSE_INNER_BLOOM, colorVariant, 1 - op * 0.5);
+  return `
+${pulsePropertyRegs(id)}
+
+[data-beam="${id}"] {
+  position: relative;
+  border-radius: ${borderRadius}px;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+[data-beam="${id}"][data-active] {
+${pulseWrapperAnimation(id, "beam-fade-in", 0.6)}
+}
+
+[data-beam="${id}"][data-fading] {
+${pulseWrapperAnimation(id, "beam-fade-out", 0.5)}
+}
+
+[data-beam="${id}"][data-active]::after,
+[data-beam="${id}"][data-fading]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: ${borderRadius}px;
+  padding: ${borderWidth}px;
+  clip-path: inset(0 round ${borderRadius}px);
+  background: ${ringGradients};
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+  z-index: 2;
+  will-change: opacity, filter;
+  opacity: calc(var(--beam-opacity-${id}) * ${sStroke} * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1));
+  ${ringAnim}
+}
+
+[data-beam="${id}"][data-active]::before,
+[data-beam="${id}"][data-fading]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: ${borderRadius}px;
+  clip-path: inset(0 round ${borderRadius}px);
+  background: ${innerGradients};
+  -webkit-mask-image:
+    linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
+    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
+  -webkit-mask-composite: source-over;
+  mask-image:
+    linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
+    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
+  mask-composite: add;
+  pointer-events: none;
+  z-index: 1;
+  will-change: opacity, filter;
+  opacity: calc(var(--beam-opacity-${id}) * ${sInner} * var(--beam-inner-opacity, 1) * var(--beam-strength, 1));
+  ${ringAnim}
+}
+
+[data-beam="${id}"] [data-beam-bloom] {
+  display: none;
+  position: absolute;
+  inset: 0;
+  border-radius: ${borderRadius}px;
+  clip-path: inset(0 round ${borderRadius}px);
+  background: ${bloomGradients};
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  padding: ${borderWidth}px;
+  pointer-events: none;
+  z-index: 3;
+  will-change: opacity;
+  opacity: 0;
+}
+
+[data-beam="${id}"][data-active] [data-beam-bloom],
+[data-beam="${id}"][data-fading] [data-beam-bloom] {
+  display: block;
+  opacity: calc(var(--beam-opacity-${id}) * ${sBloom} * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1));
+  ${bloomAnim}
+}
+
+@keyframes beam-fade-in-${id} { to { --beam-opacity-${id}: 1; } }
+@keyframes beam-fade-out-${id} { from { --beam-opacity-${id}: 1; } to { --beam-opacity-${id}: 0; } }
+${pausedAnimationsRule(id)}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-beam="${id}"][data-active],
+  [data-beam="${id}"][data-fading],
+  [data-beam="${id}"][data-active]::after,
+  [data-beam="${id}"][data-fading]::after,
+  [data-beam="${id}"][data-active]::before,
+  [data-beam="${id}"][data-fading]::before,
+  [data-beam="${id}"][data-active] [data-beam-bloom],
+  [data-beam="${id}"][data-fading] [data-beam-bloom] {
+    animation: none !important;
+  }
+}
+`;
+}
+function generatePulseOuterVariantCSS(options) {
+  const {
+    id,
+    borderRadius,
+    duration,
+    strokeOpacity,
+    innerOpacity,
+    bloomOpacity,
+    colorVariant,
+    staticColors,
+    brightness,
+    saturation,
+    theme,
+    hairlineOpacity = 0
+  } = options;
+  const isDark = theme === "dark";
+  const monoMul = colorVariant === "mono" ? 0.5 : 1;
+  const sStroke = (strokeOpacity * monoMul).toFixed(2);
+  const sInner = (innerOpacity * monoMul).toFixed(2);
+  const sBloom = (bloomOpacity * monoMul).toFixed(2);
+  const hairRGB = isDark ? "70, 70, 70" : "0, 0, 0";
+  const hairOp = hairlineOpacity.toFixed(2);
+  const hairlineLine = `linear-gradient(rgba(${hairRGB}, ${hairOp}), rgba(${hairRGB}, ${hairOp}))`;
+  const { op } = pulseParams("pulse-outside", theme, duration);
+  const sw = 0.95;
+  const sh = 0.9;
+  const glowBlur = isDark ? 3 : 6;
+  const bloomBlur = isDark ? 22.5 : 15;
+  const b = brightness.toFixed(2);
+  const s = saturation.toFixed(2);
+  const strokeAnim = staticColors ? `filter: brightness(${b}) saturate(${s});` : `filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + var(--beam-hue-${id}))) brightness(${b}) saturate(${s});`;
+  const glowBright = `brightness(var(--beam-glow-brightness, ${b})) saturate(var(--beam-glow-saturate, ${s}))`;
+  const coreAnim = staticColors ? `filter: blur(var(--beam-core-blur, ${glowBlur}px)) ${glowBright};` : `filter: blur(var(--beam-core-blur, ${glowBlur}px)) hue-rotate(calc(var(--beam-hue-base, 0deg) + var(--beam-hue-${id}))) ${glowBright};`;
+  const bloomAnim = staticColors ? `filter: blur(var(--beam-bloom-blur, ${bloomBlur}px)) ${glowBright};` : `filter: blur(var(--beam-bloom-blur, ${bloomBlur}px)) hue-rotate(calc(var(--beam-hue-base, 0deg) + var(--beam-hue-${id}))) ${glowBright};`;
+  const strokeGradients = pulseTableGradients(PULSE_OUTER_CORE, colorVariant, id);
+  const coreGradients = pulseTableGradients(PULSE_OUTER_CORE, colorVariant, id);
+  const bloomGradients = pulseTableGradientsStatic(PULSE_OUTER_BLOOM, colorVariant, 1 - op * 0.5);
+  const strokeBackground = hairlineOpacity > 0 ? `${strokeGradients},
+    ${hairlineLine}` : strokeGradients;
+  return `
+${pulsePropertyRegs(id)}
+
+[data-beam="${id}"] {
+  position: relative;
+  border-radius: ${borderRadius}px;
+  overflow: visible;
+  isolation: isolate;
+}
+
+[data-beam="${id}"][data-active] {
+${pulseWrapperAnimation(id, "beam-fade-in", 0.6)}
+}
+
+[data-beam="${id}"][data-fading] {
+${pulseWrapperAnimation(id, "beam-fade-out", 0.5)}
+}
+${hairlineOpacity > 0 ? `
+/* Idle hairline \u2014 painted above the (opaque) child in the inner 1px edge ring so
+   it overlaps a standard inset component border exactly. */
+[data-beam="${id}"]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: ${borderRadius}px;
+  padding: 1px;
+  clip-path: inset(0 round ${borderRadius}px);
+  background: ${hairlineLine};
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+  z-index: 2;
+}
+` : ""}
+[data-beam="${id}"][data-active]::after,
+[data-beam="${id}"][data-fading]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: ${borderRadius}px;
+  padding: 1px;
+  clip-path: inset(0 round ${borderRadius}px);
+  background: ${strokeBackground};
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+  z-index: 2;
+  will-change: opacity, filter;
+  opacity: calc(var(--beam-opacity-${id}) * ${sStroke} * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1));
+  ${strokeAnim}
+}
+
+[data-beam="${id}"][data-active]::before,
+[data-beam="${id}"][data-fading]::before {
+  content: "";
+  position: absolute;
+  inset: -10px;
+  z-index: -1;
+  border-radius: ${borderRadius + 10}px;
+  background: ${coreGradients};
+  transform: scale(${sw}, ${sh});
+  pointer-events: none;
+  will-change: opacity, filter;
+  opacity: calc(var(--beam-opacity-${id}) * ${sInner} * var(--beam-inner-opacity, 1) * var(--beam-strength, 1));
+  ${coreAnim}
+}
+
+[data-beam="${id}"] [data-beam-bloom] {
+  display: none;
+  position: absolute;
+  inset: -30px;
+  z-index: -1;
+  border-radius: ${borderRadius + 30}px;
+  background: ${bloomGradients};
+  transform: scale(${sw}, ${sh});
+  pointer-events: none;
+  will-change: transform;
+  opacity: 0;
+}
+
+[data-beam="${id}"][data-active] [data-beam-bloom],
+[data-beam="${id}"][data-fading] [data-beam-bloom] {
+  display: block;
+  opacity: calc(var(--beam-opacity-${id}) * ${sBloom} * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1));
+  ${bloomAnim}
+}
+
+@keyframes beam-fade-in-${id} { to { --beam-opacity-${id}: 1; } }
+@keyframes beam-fade-out-${id} { from { --beam-opacity-${id}: 1; } to { --beam-opacity-${id}: 0; } }
+${pausedAnimationsRule(id)}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-beam="${id}"][data-active],
+  [data-beam="${id}"][data-fading],
+  [data-beam="${id}"][data-active]::after,
+  [data-beam="${id}"][data-fading]::after,
+  [data-beam="${id}"][data-active]::before,
+  [data-beam="${id}"][data-fading]::before,
+  [data-beam="${id}"][data-active] [data-beam-bloom],
+  [data-beam="${id}"][data-fading] [data-beam-bloom] {
+    animation: none !important;
+  }
+}
+`;
+}
+function generateLineVariantCSS(options) {
+  const {
+    id,
+    borderRadius,
+    borderWidth,
+    duration,
+    strokeOpacity,
+    innerOpacity,
+    bloomOpacity,
+    innerShadow,
+    colorVariant,
+    staticColors,
+    brightness,
+    saturation,
+    hueRange,
+    theme
+  } = options;
+  const innerRadius = Math.max(0, borderRadius - borderWidth);
+  const isDark = theme === "dark";
+  const finalStrokeOpacity = strokeOpacity;
+  const finalInnerOpacity = innerOpacity;
+  const finalBloomOpacity = bloomOpacity;
+  const hueShiftAnimation = staticColors ? "" : `animation: beam-hue-shift-${id} 12s ease-in-out infinite;`;
+  const hueShiftBloomAnimation = staticColors ? "" : `animation: beam-hue-shift-bloom-${id} 8s ease-in-out infinite;`;
+  const hueShiftKeyframes = staticColors ? "" : `
+@keyframes beam-hue-shift-${id} {
+  0% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - ${hueRange}deg)) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)}); }
+  50% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + ${hueRange}deg)) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)}); }
+  100% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - ${hueRange}deg)) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)}); }
+}
+
+@keyframes beam-hue-shift-bloom-${id} {
+  0% { filter: blur(8px) hue-rotate(calc(var(--beam-hue-base, 0deg) - ${hueRange + 10}deg)) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)}); }
+  50% { filter: blur(8px) hue-rotate(calc(var(--beam-hue-base, 0deg) + ${hueRange + 10}deg)) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)}); }
+  100% { filter: blur(8px) hue-rotate(calc(var(--beam-hue-base, 0deg) - ${hueRange + 10}deg)) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)}); }
+}`;
+  const whiteHighlight = isDark ? `radial-gradient(
+        ellipse calc(24px * var(--beam-w-${id})) calc(28px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) calc(100% + 2px),
+        rgba(255, 255, 255, 0.38) 0%,
+        rgba(255, 255, 255, 0.12) 30%,
+        transparent 65%
+      )` : `radial-gradient(
+        ellipse calc(35px * var(--beam-w-${id})) calc(28px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) calc(100% + 2px),
+        rgba(0, 0, 0, 0.6) 0%,
+        rgba(0, 0, 0, 0.25) 35%,
+        transparent 70%
+      )`;
+  const colorGradients = getLineColorGradients(colorVariant, isDark, id);
+  const innerGradients = getLineInnerGradients(colorVariant, id);
+  const bloomGradients = getLineBloomGradients(colorVariant, isDark, id);
+  const monoBloomBlur = colorVariant === "mono" ? "filter: blur(6px);" : "";
+  return `
+@property --beam-x-${id} {
+  syntax: "<number>";
+  initial-value: 0;
+  inherits: true;
+}
+
+@property --beam-w-${id} {
+  syntax: "<number>";
+  initial-value: 1;
+  inherits: true;
+}
+
+@property --beam-h-${id} {
+  syntax: "<number>";
+  initial-value: 1;
+  inherits: true;
+}
+
+@property --beam-spike-${id} {
+  syntax: "<number>";
+  initial-value: 1;
+  inherits: true;
+}
+
+@property --beam-spike2-${id} {
+  syntax: "<number>";
+  initial-value: 1;
+  inherits: true;
+}
+
+@property --beam-edge-${id} {
+  syntax: "<number>";
+  initial-value: 1;
+  inherits: true;
+}
+
+@property --beam-opacity-${id} {
+  syntax: "<number>";
+  initial-value: 0;
+  inherits: true;
+}
+
+[data-beam="${id}"] {
+  position: relative;
+  border-radius: ${borderRadius}px;
+  overflow: hidden;
+}
+
+[data-beam="${id}"][data-active] {
+  animation:
+    beam-travel-${id} ${duration}s linear infinite,
+    beam-edge-fade-${id} ${duration}s linear infinite,
+    beam-breathe-${id} ${(duration * 1.3).toFixed(1)}s ease-in-out infinite,
+    beam-spike-${id} ${(duration * 1.33).toFixed(1)}s ease-in-out infinite,
+    beam-spike2-${id} ${(duration * 1.7).toFixed(1)}s ease-in-out infinite,
+    beam-fade-in-${id} 0.6s ease forwards;
+}
+
+[data-beam="${id}"][data-fading] {
+  animation:
+    beam-travel-${id} ${duration}s linear infinite,
+    beam-edge-fade-${id} ${duration}s linear infinite,
+    beam-breathe-${id} ${(duration * 1.3).toFixed(1)}s ease-in-out infinite,
+    beam-spike-${id} ${(duration * 1.33).toFixed(1)}s ease-in-out infinite,
+    beam-spike2-${id} ${(duration * 1.7).toFixed(1)}s ease-in-out infinite,
+    beam-fade-out-${id} 0.5s ease forwards;
+}
+
+[data-beam="${id}"][data-active]::after,
+[data-beam="${id}"][data-fading]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: ${innerRadius}px;
+  padding: ${borderWidth}px;
+  clip-path: inset(0 round ${borderRadius}px);
+  background: ${whiteHighlight}, ${colorGradients};
+  -webkit-mask:
+    radial-gradient(
+      ellipse calc(78px * var(--beam-w-${id})) calc(60px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) 100%,
+      white 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100%
+    ),
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: source-in, xor;
+  mask:
+    radial-gradient(
+      ellipse calc(78px * var(--beam-w-${id})) calc(60px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) 100%,
+      white 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100%
+    ),
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: intersect, exclude;
+  pointer-events: none;
+  z-index: 2;
+  opacity: calc(var(--beam-opacity-${id}) * var(--beam-edge-${id}) * ${finalStrokeOpacity.toFixed(2)} * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1));
+  ${hueShiftAnimation}
+}
+
+[data-beam="${id}"][data-active]::before,
+[data-beam="${id}"][data-fading]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: ${borderRadius}px;
+  background: ${innerGradients};
+  box-shadow: inset 0 0 9px 1px ${innerShadow};
+  -webkit-mask-image:
+    radial-gradient(
+      ellipse calc(78px * var(--beam-w-${id})) calc(60px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) 100%,
+      white 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100%
+    ),
+    linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
+    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
+  -webkit-mask-composite: source-in, source-over;
+  mask-image:
+    radial-gradient(
+      ellipse calc(78px * var(--beam-w-${id})) calc(60px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) 100%,
+      white 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100%
+    ),
+    linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
+    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
+  mask-composite: intersect, add;
+  pointer-events: none;
+  z-index: 1;
+  opacity: calc(var(--beam-opacity-${id}) * var(--beam-edge-${id}) * ${finalInnerOpacity.toFixed(2)} * var(--beam-inner-opacity, 1) * var(--beam-strength, 1));
+  clip-path: inset(0 round ${borderRadius}px);
+  ${hueShiftAnimation}
+}
+
+[data-beam="${id}"] [data-beam-bloom] {
+  display: none;
+  position: absolute;
+  inset: 0;
+  border-radius: ${innerRadius}px;
+  clip-path: inset(0 round ${borderRadius}px);
+  padding: 0;
+  -webkit-mask: radial-gradient(
+    ellipse calc(84px * var(--beam-w-${id})) calc(110px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) 100%,
+    white 0%, rgba(255, 255, 255, 0.5) 35%, transparent 100%
+  );
+  -webkit-mask-composite: source-over;
+  mask: radial-gradient(
+    ellipse calc(84px * var(--beam-w-${id})) calc(110px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) 100%,
+    white 0%, rgba(255, 255, 255, 0.5) 35%, transparent 100%
+  );
+  mask-composite: add;
+  background: ${bloomGradients};
+  ${monoBloomBlur}
+  pointer-events: none;
+  z-index: 3;
+  opacity: 0;
+}
+
+[data-beam="${id}"][data-active] [data-beam-bloom],
+[data-beam="${id}"][data-fading] [data-beam-bloom] {
+  display: block;
+  opacity: calc(var(--beam-opacity-${id}) * var(--beam-edge-${id}) * ${finalBloomOpacity.toFixed(2)} * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1));
+  ${hueShiftBloomAnimation}
+}
+
+@keyframes beam-travel-${id} {
+  0%   { --beam-x-${id}: 0.06;  --beam-w-${id}: 0.5; }
+  10%  { --beam-x-${id}: 0.15;  --beam-w-${id}: 0.8; }
+  20%  { --beam-x-${id}: 0.25;  --beam-w-${id}: 1.1; }
+  30%  { --beam-x-${id}: 0.35;  --beam-w-${id}: 1.3; }
+  40%  { --beam-x-${id}: 0.44;  --beam-w-${id}: 1.45; }
+  50%  { --beam-x-${id}: 0.5;   --beam-w-${id}: 1.5; }
+  60%  { --beam-x-${id}: 0.56;  --beam-w-${id}: 1.45; }
+  70%  { --beam-x-${id}: 0.65;  --beam-w-${id}: 1.3; }
+  80%  { --beam-x-${id}: 0.75;  --beam-w-${id}: 1.1; }
+  90%  { --beam-x-${id}: 0.85;  --beam-w-${id}: 0.8; }
+  100% { --beam-x-${id}: 0.94;  --beam-w-${id}: 0.5; }
+}
+
+@keyframes beam-edge-fade-${id} {
+  0%    { --beam-edge-${id}: 0; }
+  12.5% { --beam-edge-${id}: 0; }
+  32.5% { --beam-edge-${id}: 1; }
+  67.5% { --beam-edge-${id}: 1; }
+  87.5% { --beam-edge-${id}: 0; }
+  100%  { --beam-edge-${id}: 0; }
+}
+
+@keyframes beam-breathe-${id} {
+  0%, 100% { --beam-h-${id}: 0.8; }
+  25%      { --beam-h-${id}: 1.25; }
+  55%      { --beam-h-${id}: 0.85; }
+  80%      { --beam-h-${id}: 1.3; }
+}
+
+@keyframes beam-spike-${id} {
+  0%   { --beam-spike-${id}: 0.8; }
+  25%  { --beam-spike-${id}: 1.3; }
+  50%  { --beam-spike-${id}: 0.9; }
+  75%  { --beam-spike-${id}: 1.4; }
+  100% { --beam-spike-${id}: 0.8; }
+}
+
+@keyframes beam-spike2-${id} {
+  0%   { --beam-spike2-${id}: 1.2; }
+  25%  { --beam-spike2-${id}: 0.7; }
+  50%  { --beam-spike2-${id}: 1.4; }
+  75%  { --beam-spike2-${id}: 0.8; }
+  100% { --beam-spike2-${id}: 1.2; }
+}
+
+@keyframes beam-fade-in-${id} {
+  to { --beam-opacity-${id}: 1; }
+}
+
+@keyframes beam-fade-out-${id} {
+  from { --beam-opacity-${id}: 1; }
+  to { --beam-opacity-${id}: 0; }
+}
+${hueShiftKeyframes}
+${pausedAnimationsRule(id)}
+`;
+}
+
+// src/components/ui/border-beam/pulseDriver.ts
+var instances = /* @__PURE__ */ new Set();
+var rafId = null;
+var lastFrame = 0;
+var FRAME_INTERVAL = 1e3 / 30 - 2;
+var TWO_PI = Math.PI * 2;
+function pingPong(phase) {
+  return (1 - Math.cos(TWO_PI * phase)) / 2;
+}
+function frame(ts) {
+  rafId = requestAnimationFrame(frame);
+  if (ts - lastFrame < FRAME_INTERVAL) return;
+  lastFrame = ts;
+  const tSec = ts / 1e3;
+  instances.forEach(({ el, config }) => {
+    for (const osc of config.oscillators) {
+      const phase = (tSec - osc.delay) / osc.period;
+      const value = osc.a + (osc.b - osc.a) * pingPong(phase);
+      el.style.setProperty(
+        osc.prop,
+        osc.unit === "px" ? `${value.toFixed(2)}px` : value.toFixed(4)
+      );
+    }
+    if (config.hue) {
+      const { prop, range, period, continuous } = config.hue;
+      const value = continuous ? tSec / period % 1 * range : -range + 2 * range * pingPong(tSec / period);
+      el.style.setProperty(prop, `${value.toFixed(2)}deg`);
+    }
+  });
+}
+function startLoop() {
+  if (rafId == null) {
+    lastFrame = 0;
+    rafId = requestAnimationFrame(frame);
+  }
+}
+function stopLoopIfIdle() {
+  if (instances.size === 0 && rafId != null) {
+    cancelAnimationFrame(rafId);
+    rafId = null;
+  }
+}
+function registerPulseInstance(el, config) {
+  const instance = { el, config };
+  instances.add(instance);
+  startLoop();
+  return () => {
+    instances.delete(instance);
+    stopLoopIfIdle();
+  };
+}
+function documentTheme() {
+  if (typeof document === "undefined") return null;
+  const root = document.documentElement;
+  const attr = root.getAttribute("data-theme");
+  if (attr === "dark" || attr === "light") return attr;
+  if (root.classList.contains("dark")) return "dark";
+  if (root.classList.contains("light")) return "light";
+  return null;
+}
+function useSystemTheme(enabled) {
+  const [theme, setTheme] = useState(() => {
+    const fromDocument = documentTheme();
+    if (fromDocument) return fromDocument;
+    if (typeof window === "undefined") return "dark";
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  });
+  useEffect(() => {
+    if (!enabled || typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const resolve = () => {
+      setTheme(documentTheme() ?? (mediaQuery.matches ? "dark" : "light"));
+    };
+    resolve();
+    mediaQuery.addEventListener("change", resolve);
+    const observer = typeof MutationObserver !== "undefined" ? new MutationObserver(resolve) : null;
+    observer?.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"]
+    });
+    return () => {
+      mediaQuery.removeEventListener("change", resolve);
+      observer?.disconnect();
+    };
+  }, [enabled]);
+  return theme;
+}
+function resolveTheme(theme, systemTheme) {
+  return theme === "auto" ? systemTheme : theme;
+}
+var BorderBeam = forwardRef(
+  function BorderBeam2({
+    children,
+    size = "md",
+    colorVariant = "colorful",
+    theme = "dark",
+    staticColors = false,
+    duration,
+    active = true,
+    borderRadius: customBorderRadius,
+    brightness: brightnessProp,
+    saturation,
+    hueRange = 30,
+    strength = 1,
+    className,
+    style,
+    onActivate,
+    onDeactivate,
+    onAnimationEnd: consumerOnAnimationEnd,
+    ...props
+  }, ref) {
+    const baseId = useId();
+    const id = baseId.replace(/:/g, "-");
+    const internalRef = useRef(null);
+    const [isActive, setIsActive] = useState(active);
+    const [isFading, setIsFading] = useState(false);
+    const [isVisible, setIsVisible] = useState(true);
+    const [detectedRadius, setDetectedRadius] = useState(null);
+    const [pulseGlowScale, setPulseGlowScale] = useState({ x: 1, y: 1 });
+    const effectsOn = isActive || isFading;
+    const systemTheme = useSystemTheme(effectsOn);
+    useEffect(() => {
+      if (!effectsOn || customBorderRadius != null) return;
+      const el = internalRef.current;
+      if (!el) return;
+      const detect = () => {
+        const child = el.firstElementChild;
+        if (!child) return;
+        const computed = getComputedStyle(child);
+        const raw = parseFloat(computed.borderTopLeftRadius);
+        if (!isNaN(raw) && raw > 0) {
+          setDetectedRadius(raw);
+        }
+      };
+      detect();
+      const observer = new MutationObserver(detect);
+      observer.observe(el, { childList: true, subtree: false });
+      return () => observer.disconnect();
+    }, [effectsOn, customBorderRadius, children]);
+    useEffect(() => {
+      if (active && !isActive && !isFading) {
+        setIsActive(true);
+      } else if (!active && isActive && !isFading) {
+        setIsFading(true);
+      }
+    }, [active, isActive, isFading]);
+    useEffect(() => {
+      if (!effectsOn) return;
+      const el = internalRef.current;
+      if (!el || typeof IntersectionObserver === "undefined") return;
+      const observer = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) setIsVisible(entry.isIntersecting);
+        },
+        // Start animating slightly before the element scrolls into view.
+        { rootMargin: "256px" }
+      );
+      observer.observe(el);
+      return () => observer.disconnect();
+    }, [effectsOn]);
+    useEffect(() => {
+      if (!effectsOn || size !== "pulse-outside") {
+        setPulseGlowScale({ x: 1, y: 1 });
+        return;
+      }
+      const el = internalRef.current;
+      if (!el) return;
+      const REF_WIDTH = 350;
+      const REF_HEIGHT = 140;
+      const MIN_SCALE = 0.35;
+      const MAX_SCALE = 4;
+      const clamp = (value) => Math.max(MIN_SCALE, Math.min(MAX_SCALE, value));
+      const measure = () => {
+        const child2 = el.firstElementChild;
+        if (!child2) return;
+        const rect = child2.getBoundingClientRect();
+        if (!rect.width || !rect.height) return;
+        const x = +clamp(rect.width / REF_WIDTH).toFixed(3);
+        const y = +clamp(rect.height / REF_HEIGHT).toFixed(3);
+        setPulseGlowScale((prev) => prev.x === x && prev.y === y ? prev : { x, y });
+      };
+      measure();
+      if (typeof ResizeObserver === "undefined") return;
+      const child = el.firstElementChild;
+      if (!child) return;
+      const resizeObserver = new ResizeObserver(measure);
+      resizeObserver.observe(child);
+      return () => resizeObserver.disconnect();
+    }, [effectsOn, size, children]);
+    const handleAnimationEnd = useCallback(
+      (e) => {
+        const animationName = e.animationName;
+        if (animationName.includes("fade-out")) {
+          setIsActive(false);
+          setIsFading(false);
+          onDeactivate?.();
+        } else if (animationName.includes("fade-in")) {
+          onActivate?.();
+        }
+        consumerOnAnimationEnd?.(e);
+      },
+      [onActivate, onDeactivate, consumerOnAnimationEnd]
+    );
+    const resolvedTheme = resolveTheme(theme, systemTheme);
+    const themeConfig = sizeThemePresets[size][resolvedTheme];
+    const sizeConfig = sizePresets[size];
+    const isPulse = size === "pulse-inner" || size === "pulse-outside";
+    const finalBorderRadius = customBorderRadius ?? detectedRadius ?? sizeConfig.borderRadius;
+    const finalDuration = duration ?? (size === "line" ? 3.1 : isPulse ? 2.3 : 1.96);
+    const finalSaturation = saturation ?? themeConfig.saturation;
+    const finalBrightness = brightnessProp ?? themeConfig.brightness ?? 1.3;
+    const finalHueRange = size === "line" ? Math.min(hueRange, 13) : hueRange;
+    const finalStaticColors = colorVariant === "mono" ? true : staticColors;
+    const cssStyles = useMemo(
+      () => !effectsOn ? "" : generateBeamCSS({
+        id,
+        borderRadius: finalBorderRadius,
+        borderWidth: sizeConfig.borderWidth,
+        duration: finalDuration,
+        strokeOpacity: themeConfig.strokeOpacity,
+        innerOpacity: themeConfig.innerOpacity,
+        bloomOpacity: themeConfig.bloomOpacity,
+        innerShadow: themeConfig.innerShadow,
+        size,
+        colorVariant,
+        staticColors: finalStaticColors,
+        brightness: finalBrightness,
+        saturation: finalSaturation,
+        hueRange: finalHueRange,
+        theme: resolvedTheme,
+        hairlineOpacity: themeConfig.hairlineOpacity
+      }),
+      [
+        effectsOn,
+        id,
+        finalBorderRadius,
+        sizeConfig.borderWidth,
+        finalDuration,
+        themeConfig.strokeOpacity,
+        themeConfig.innerOpacity,
+        themeConfig.bloomOpacity,
+        themeConfig.innerShadow,
+        themeConfig.hairlineOpacity,
+        size,
+        colorVariant,
+        finalStaticColors,
+        finalBrightness,
+        finalSaturation,
+        finalHueRange,
+        resolvedTheme
+      ]
+    );
+    const driverConfig = useMemo(
+      () => isPulse ? getPulseDriverConfig(size, resolvedTheme, finalDuration, finalHueRange, finalStaticColors, id) : null,
+      [isPulse, size, resolvedTheme, finalDuration, finalHueRange, finalStaticColors, id]
+    );
+    useEffect(() => {
+      if (!driverConfig) return;
+      if (!(isActive || isFading) || !isVisible) return;
+      const el = internalRef.current;
+      if (!el) return;
+      if (typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+        return;
+      }
+      return registerPulseInstance(el, driverConfig);
+    }, [driverConfig, isActive, isFading, isVisible]);
+    const setRefs = useCallback(
+      (node) => {
+        internalRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const mergedStyle = {
+      ...style ?? {},
+      "--beam-strength": Math.max(0, Math.min(1, strength)),
+      ...size === "pulse-outside" ? { "--pulse-glow-sx": pulseGlowScale.x, "--pulse-glow-sy": pulseGlowScale.y } : {}
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      effectsOn && /* @__PURE__ */ jsx("style", { children: cssStyles }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...props,
+          ref: setRefs,
+          "data-beam": id,
+          "data-active": isActive && !isFading ? "" : void 0,
+          "data-fading": isFading ? "" : void 0,
+          "data-paused": isActive && !isFading && !isVisible ? "" : void 0,
+          className,
+          style: mergedStyle,
+          onAnimationEnd: handleAnimationEnd,
+          children: [
+            children,
+            /* @__PURE__ */ jsx("div", { "data-beam-bloom": true })
+          ]
+        }
+      )
+    ] });
+  }
+);
+var ROTATE_SIZES = /* @__PURE__ */ new Set(["sm", "md", "line"]);
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+function subscribeReducedMotion(onChange) {
+  if (typeof window === "undefined" || !window.matchMedia) return () => {
+  };
+  const mediaQuery = window.matchMedia(REDUCED_MOTION_QUERY);
+  mediaQuery.addEventListener("change", onChange);
+  return () => mediaQuery.removeEventListener("change", onChange);
+}
+function readReducedMotion() {
+  if (typeof window === "undefined" || !window.matchMedia) return false;
+  return window.matchMedia(REDUCED_MOTION_QUERY).matches;
+}
+function readReducedMotionServer() {
+  return false;
+}
+function BrandBeam({
+  children,
+  size = "md",
+  active = true,
+  strength,
+  borderRadius,
+  className
+}) {
+  const reducedMotion = useSyncExternalStore(
+    subscribeReducedMotion,
+    readReducedMotion,
+    readReducedMotionServer
+  );
+  const effectiveActive = active && !(reducedMotion && ROTATE_SIZES.has(size));
+  return /* @__PURE__ */ jsx(
+    BorderBeam,
+    {
+      size,
+      colorVariant: "brand",
+      theme: "auto",
+      active: effectiveActive,
+      strength,
+      borderRadius,
+      className,
+      children
+    }
+  );
+}
 var convertBlobUrlToDataUrl = async (url) => {
   try {
     const response = await fetch(url);
@@ -5218,6 +7693,7 @@ var PromptInput = ({
   maxFileSize,
   onError,
   onSubmit,
+  beamActive = false,
   children,
   ...props
 }) => {
@@ -5532,7 +8008,7 @@ var PromptInput = ({
         onSubmit: handleSubmit,
         ref: formRef,
         ...props,
-        children: /* @__PURE__ */ jsx(InputGroup, { className: "overflow-hidden rounded-3xl border border-input bg-white px-4 py-2 shadow-sm dark:bg-card dark:shadow-none dark:ring-1 dark:ring-white/5 has-[textarea]:rounded-3xl has-[>[data-align=block-end]]:rounded-3xl has-[>[data-align=block-start]]:rounded-3xl", children })
+        children: /* @__PURE__ */ jsx(BrandBeam, { size: "line", active: beamActive, strength: 0.7, borderRadius: 24, children: /* @__PURE__ */ jsx(InputGroup, { className: "overflow-hidden rounded-3xl border border-input bg-white px-4 py-2 shadow-sm dark:bg-card dark:shadow-none dark:ring-1 dark:ring-white/5 has-[textarea]:rounded-3xl has-[>[data-align=block-end]]:rounded-3xl has-[>[data-align=block-start]]:rounded-3xl", children }) })
       }
     )
   ] });
@@ -6491,19 +8967,19 @@ function ChatComposerInner({
 }) {
   const { adapter } = useAgentChatAdapterContext();
   const [profileMenuOpen, setProfileMenuOpen] = useState(false);
-  const [browserProfiles, setBrowserProfiles] = useState([]);
-  useEffect(() => {
-    if (!profileMenuOpen || !adapter.listBrowserProfiles) return;
-    let cancelled = false;
-    void adapter.listBrowserProfiles().then((p) => {
-      if (!cancelled) setBrowserProfiles(p);
-    }).catch(() => {
-      if (!cancelled) setBrowserProfiles([]);
+  const [browserProfiles, setBrowserProfiles] = useState(null);
+  const loadBrowserProfiles = useCallback(() => {
+    if (!adapter.listBrowserProfiles) return;
+    void adapter.listBrowserProfiles().then(setBrowserProfiles).catch(() => {
     });
-    return () => {
-      cancelled = true;
-    };
-  }, [profileMenuOpen, adapter]);
+  }, [adapter]);
+  useEffect(() => {
+    if (!browserProfilesEnabled || !browserProfileId) return;
+    if (browserProfiles !== null) return;
+    loadBrowserProfiles();
+  }, [browserProfilesEnabled, browserProfileId, browserProfiles, loadBrowserProfiles]);
+  const activeBrowserProfile = (browserProfiles ?? []).find((p) => p.id === browserProfileId) ?? null;
+  const profileTriggerLabel = activeBrowserProfile && /* @__PURE__ */ jsx("span", { className: "max-w-24 truncate text-xs", children: activeBrowserProfile.name });
   const { textInput, attachments } = usePromptInputController();
   const status = isRunning ? "streaming" : disabled ? "error" : "ready";
   const [adapterCommands, setAdapterCommands] = useState([]);
@@ -6771,6 +9247,7 @@ function ChatComposerInner({
             maxFiles: MAX_IMAGES_PER_MESSAGE + MAX_ATTACHMENTS_PER_MESSAGE,
             maxFileSize: MAX_ATTACHMENT_BYTES,
             onError: handlePromptInputError,
+            beamActive: status === "streaming",
             children: [
               /* @__PURE__ */ jsx(PromptInputBody, { children: /* @__PURE__ */ jsx(
                 PromptInputTextarea,
@@ -6848,30 +9325,40 @@ function ChatComposerInner({
                     // active the choice can't change. Render disabled (via
                     // aria-disabled, not the `disabled` attribute, so the
                     // tooltip still shows on hover) with an explanation.
-                    /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsxs(
                       PromptInputButton,
                       {
                         "aria-label": "Select browser profile",
                         "aria-disabled": true,
                         "aria-pressed": !!browserProfileId,
-                        tooltip: "A browser profile must be chosen before starting the session",
+                        tooltip: activeBrowserProfile ? `Browser profile: ${activeBrowserProfile.name} (locked for this session)` : "A browser profile must be chosen before starting the session",
                         className: `cursor-not-allowed opacity-50 ${browserProfileId ? "bg-accent text-foreground" : ""}`,
-                        children: /* @__PURE__ */ jsx(IdCardIcon, { className: "size-4" })
+                        children: [
+                          /* @__PURE__ */ jsx(IdCardIcon, { className: "size-4" }),
+                          profileTriggerLabel
+                        ]
                       }
                     )
                   ) : /* @__PURE__ */ jsxs(
                     Popover,
                     {
                       open: profileMenuOpen,
-                      onOpenChange: setProfileMenuOpen,
+                      onOpenChange: (open) => {
+                        setProfileMenuOpen(open);
+                        if (open) loadBrowserProfiles();
+                      },
                       children: [
-                        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
                           PromptInputButton,
                           {
                             "aria-label": "Select browser profile",
                             "aria-pressed": !!browserProfileId,
+                            tooltip: activeBrowserProfile ? `Browser profile: ${activeBrowserProfile.name}` : "Select browser profile",
                             className: browserProfileId ? "bg-accent text-foreground" : void 0,
-                            children: /* @__PURE__ */ jsx(IdCardIcon, { className: "size-4" })
+                            children: [
+                              /* @__PURE__ */ jsx(IdCardIcon, { className: "size-4" }),
+                              profileTriggerLabel
+                            ]
                           }
                         ) }),
                         /* @__PURE__ */ jsx(
@@ -6880,34 +9367,22 @@ function ChatComposerInner({
                             side: "top",
                             align: "start",
                             className: "w-64 overflow-hidden rounded-xl p-1",
-                            children: /* @__PURE__ */ jsx(Command, { children: /* @__PURE__ */ jsxs(CommandList, { children: [
-                              /* @__PURE__ */ jsx(
-                                CommandItem,
-                                {
-                                  onSelect: () => {
-                                    setProfileMenuOpen(false);
-                                    onSelectBrowserProfile(null);
-                                  },
-                                  className: "gap-3 rounded-md px-3 py-2",
-                                  children: "No profile"
-                                }
-                              ),
-                              browserProfiles.map((p) => /* @__PURE__ */ jsxs(
-                                CommandItem,
-                                {
-                                  onSelect: () => {
-                                    setProfileMenuOpen(false);
-                                    onSelectBrowserProfile(p.id);
-                                  },
-                                  className: "gap-3 rounded-md px-3 py-2",
-                                  children: [
-                                    p.name,
-                                    browserProfileId === p.id && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: "Active" })
-                                  ]
+                            children: /* @__PURE__ */ jsx(Command, { children: /* @__PURE__ */ jsx(CommandList, { children: [
+                              { id: null, name: "No profile" },
+                              ...browserProfiles ?? []
+                            ].map((p) => /* @__PURE__ */ jsx(
+                              CommandItem,
+                              {
+                                onSelect: () => {
+                                  setProfileMenuOpen(false);
+                                  onSelectBrowserProfile(p.id);
                                 },
-                                p.id
-                              ))
-                            ] }) })
+                                "data-checked": (browserProfileId ?? null) === p.id || void 0,
+                                className: "gap-3 rounded-md px-3 py-2",
+                                children: p.name
+                              },
+                              p.id ?? "none"
+                            )) }) })
                           }
                         )
                       ]
@@ -7896,6 +10371,18 @@ var KIND_LABEL = {
   video: "Generated video"
 };
 var COPY_FEEDBACK_MS = 1500;
+var ARTIFACT_PAYLOAD_CACHE_LIMIT = 64;
+var artifactPayloadCache = /* @__PURE__ */ new Map();
+function cachePayload(key, version, payload) {
+  const existing = artifactPayloadCache.get(key);
+  if (existing && existing.version >= version) return;
+  artifactPayloadCache.delete(key);
+  artifactPayloadCache.set(key, { version, payload });
+  if (artifactPayloadCache.size > ARTIFACT_PAYLOAD_CACHE_LIMIT) {
+    const oldest = artifactPayloadCache.keys().next().value;
+    if (oldest !== void 0) artifactPayloadCache.delete(oldest);
+  }
+}
 function ArtifactBlock({
   sessionId,
   artifactId,
@@ -7904,15 +10391,24 @@ function ArtifactBlock({
   version
 }) {
   const { adapter } = useAgentChatAdapterContext();
-  const [payload, setPayload] = useState(null);
+  const cacheKey = `${sessionId}:${artifactId}`;
+  const [payload, setPayload] = useState(
+    () => artifactPayloadCache.get(cacheKey)?.payload ?? null
+  );
   const [error, setError] = useState(null);
   const [copied, setCopied] = useState(false);
   const [expanded, setExpanded] = useState(false);
   useEffect(() => {
+    const cached = artifactPayloadCache.get(cacheKey);
+    if (cached) {
+      setPayload(cached.payload);
+      setError(null);
+      if (cached.version >= version) return;
+    }
     let cancelled = false;
-    setPayload(null);
     setError(null);
     adapter.getArtifact({ sessionId, artifactId }).then((p) => {
+      cachePayload(cacheKey, version, p);
       if (!cancelled) setPayload(p);
     }).catch((e) => {
       if (!cancelled) {
@@ -7922,7 +10418,7 @@ function ArtifactBlock({
     return () => {
       cancelled = true;
     };
-  }, [adapter, sessionId, artifactId, version]);
+  }, [adapter, sessionId, artifactId, version, cacheKey]);
   const handleCopy = async () => {
     if (!payload) return;
     const { text } = exportArtifact(payload);
@@ -7951,48 +10447,65 @@ function ArtifactBlock({
   };
   const description = error ?? (payload ? KIND_LABEL[kind] : "Loading\u2026");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Artifact, { className: "my-2 w-full overflow-visible border-border", children: [
-      /* @__PURE__ */ jsxs(ArtifactHeader, { children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
-          /* @__PURE__ */ jsx(ArtifactTitle, { className: "truncate", children: name }),
-          /* @__PURE__ */ jsx(ArtifactDescription, { children: description })
-        ] }),
-        /* @__PURE__ */ jsxs(ArtifactActions, { children: [
-          /* @__PURE__ */ jsx(
-            ArtifactAction,
-            {
-              tooltip: copied ? "Copied!" : "Copy",
-              label: "Copy artifact",
-              icon: copied ? CheckIcon : CopyIcon,
-              disabled: !payload,
-              onClick: handleCopy,
-              className: copied ? "text-emerald-500 hover:text-emerald-500" : ""
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ArtifactAction,
-            {
-              tooltip: "Download",
-              label: "Download artifact",
-              icon: DownloadIcon,
-              disabled: !payload,
-              onClick: handleDownload
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ArtifactAction,
-            {
-              tooltip: "Full screen",
-              label: "Open artifact in full screen",
-              icon: Maximize2Icon,
-              disabled: !payload,
-              onClick: () => setExpanded(true)
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(ArtifactContent, { className: "p-0 overflow-visible", children: /* @__PURE__ */ jsx(ArtifactBody, { error, payload, sessionId }) })
-    ] }),
+    /* @__PURE__ */ jsx(
+      BrandBeam,
+      {
+        size: "pulse-inner",
+        active: !payload && !error,
+        strength: 0.6,
+        borderRadius: 10,
+        className: "w-full",
+        children: /* @__PURE__ */ jsxs(
+          Artifact,
+          {
+            className: "my-2 w-full overflow-visible border-border",
+            "data-artifact-anchor": artifactId,
+            children: [
+              /* @__PURE__ */ jsxs(ArtifactHeader, { children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+                  /* @__PURE__ */ jsx(ArtifactTitle, { className: "truncate", children: name }),
+                  /* @__PURE__ */ jsx(ArtifactDescription, { children: description })
+                ] }),
+                /* @__PURE__ */ jsxs(ArtifactActions, { children: [
+                  /* @__PURE__ */ jsx(
+                    ArtifactAction,
+                    {
+                      tooltip: copied ? "Copied!" : "Copy",
+                      label: "Copy artifact",
+                      icon: copied ? CheckIcon : CopyIcon,
+                      disabled: !payload,
+                      onClick: handleCopy,
+                      className: copied ? "text-emerald-500 hover:text-emerald-500" : ""
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    ArtifactAction,
+                    {
+                      tooltip: "Download",
+                      label: "Download artifact",
+                      icon: DownloadIcon,
+                      disabled: !payload,
+                      onClick: handleDownload
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    ArtifactAction,
+                    {
+                      tooltip: "Full screen",
+                      label: "Open artifact in full screen",
+                      icon: Maximize2Icon,
+                      disabled: !payload,
+                      onClick: () => setExpanded(true)
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(ArtifactContent, { className: "p-0 overflow-visible", children: /* @__PURE__ */ jsx(ArtifactBody, { error, payload, sessionId }) })
+            ]
+          }
+        )
+      }
+    ),
     /* @__PURE__ */ jsx(Dialog, { open: expanded, onOpenChange: setExpanded, children: /* @__PURE__ */ jsxs(DialogContent, { className: "flex h-[95vh] w-[95vw] max-w-[95vw] flex-col gap-4 overflow-hidden p-6 sm:max-w-[95vw]", children: [
       /* @__PURE__ */ jsxs(DialogHeader, { children: [
         /* @__PURE__ */ jsx(DialogTitle, { className: "truncate pr-10", children: name }),
@@ -8750,6 +11263,28 @@ function WorkspaceFilePreviewDialog({
     ) })
   ] }) });
 }
+function scrollToArtifactBlock(artifactId) {
+  document.querySelector(`[data-artifact-anchor="${CSS.escape(artifactId)}"]`)?.scrollIntoView({ behavior: "smooth", block: "center" });
+}
+function ArtifactRefCard({
+  artifactId,
+  name,
+  kind
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => scrollToArtifactBlock(artifactId),
+      className: "flex w-full min-w-0 cursor-pointer items-center gap-2 rounded border border-border bg-background px-3 py-2 text-left text-sm transition-colors hover:bg-muted/60",
+      children: [
+        /* @__PURE__ */ jsx(FileTextIcon, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-medium text-foreground", children: name }),
+        /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: KIND_LABEL[kind] })
+      ]
+    }
+  );
+}
 function resolveArtifactRef(ref, messages) {
   for (const msg of messages) {
     if (msg.role !== "system" || msg.systemKind !== "artifact") continue;
@@ -8790,15 +11325,13 @@ function TurnSummaryCard({
       }
       if (artifact.kind === "artifact") {
         const resolved = sessionId ? resolveArtifactRef(artifact.ref, messages) : null;
-        if (resolved && sessionId) {
+        if (resolved) {
           return /* @__PURE__ */ jsx(
-            ArtifactBlock,
+            ArtifactRefCard,
             {
-              sessionId,
               artifactId: resolved.artifactId,
               name: resolved.name || artifact.label,
-              kind: resolved.kind,
-              version: resolved.version
+              kind: resolved.kind
             },
             key
           );
@@ -8814,8 +11347,6 @@ function TurnSummaryCard({
               ArtifactRow,
               {
                 artifact,
-                sessionId,
-                messages,
                 onFileSelect,
                 onCommandSelect
               }
@@ -8829,8 +11360,6 @@ function TurnSummaryCard({
 }
 function ArtifactRow({
   artifact,
-  sessionId,
-  messages,
   onFileSelect,
   onCommandSelect
 }) {
@@ -8874,20 +11403,7 @@ function ArtifactRow({
       }
     );
   }
-  const resolved = sessionId ? resolveArtifactRef(artifact.ref, messages) : null;
-  if (!resolved) {
-    return /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground", children: artifact.label });
-  }
-  return /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(
-    ArtifactBlock,
-    {
-      sessionId,
-      artifactId: resolved.artifactId,
-      name: resolved.name || artifact.label,
-      kind: resolved.kind,
-      version: resolved.version
-    }
-  ) });
+  return /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground", children: artifact.label });
 }
 var WORKING_ON_IT_DELAY_MS = 250;
 function hasUserFacingAskContent(msg) {
@@ -9331,9 +11847,9 @@ function TimelineEntryItem({
   return /* @__PURE__ */ jsxs(TimelineItem, { step, children: [
     /* @__PURE__ */ jsxs(TimelineHeader, { children: [
       /* @__PURE__ */ jsx(TimelineSeparator, { style: { backgroundColor: "var(--color-border)" } }),
-      /* @__PURE__ */ jsx(TimelineIndicator, { className: "size-2 border-none bg-primary animate-pulse" })
+      /* @__PURE__ */ jsx(TimelineIndicator, { className: "size-2 border-none bg-primary" })
     ] }),
-    /* @__PURE__ */ jsx(TimelineContent, { children: /* @__PURE__ */ jsx(Shimmer, { duration: 3, spread: 3, className: "text-sm", children: "Working on it..." }) })
+    /* @__PURE__ */ jsx(TimelineContent, { children: /* @__PURE__ */ jsx(OrbShimmerLabel, { state: "working", label: "Working on it...", className: "py-0.5" }) })
   ] });
 }
 function ReasoningEntry({
@@ -9541,30 +12057,9 @@ function lastPathSegment(path) {
 function truncate3(s, max) {
   return s.length > max ? `${s.slice(0, max - 1)}\u2026` : s;
 }
-var _SIMPLE_MODE_HIDDEN_TOOLS = /* @__PURE__ */ new Set([
-  "list_files",
-  "search_files",
-  "session_search",
-  "skills_list",
-  "skill_view",
-  "skill_manage",
-  "process",
-  "memory",
-  // Shell commands and code execution are infrastructure plumbing the
-  // user doesn't need to see when the goal is to know *what* the
-  // agent accomplished, not *how*. Expert mode still has the full
-  // command + output block.
-  "terminal",
-  "execute_code"
-]);
-function _isHiddenSimpleTool(tc) {
-  if (_SIMPLE_MODE_HIDDEN_TOOLS.has(tc.toolName)) return true;
-  if (tc.toolName.startsWith("browser_")) return true;
-  return false;
-}
 function visibleToolCalls(message) {
   return (message.toolCalls ?? []).filter((tc) => {
-    if (_isHiddenSimpleTool(tc)) return false;
+    if (isHiddenSimpleTool(tc)) return false;
     const status = effectiveStatus(tc);
     if (status === "error" || status === "cancelled") return false;
     return true;
@@ -9579,7 +12074,7 @@ function isIterationLive(message) {
 }
 function liveIterationLabel(message) {
   const running = (message.toolCalls ?? []).filter(
-    (tc) => tc.status === "running" && !_isHiddenSimpleTool(tc)
+    (tc) => tc.status === "running" && !isHiddenSimpleTool(tc)
   );
   if (running.length === 0) return "Thinking\u2026";
   if (running.length === 1) {
@@ -9777,8 +12272,14 @@ function IterationGroup({
     return /* @__PURE__ */ jsx("div", { className: "px-1 py-0.5", children: /* @__PURE__ */ jsx(AskUserQuestionToolBlock, { tc: askCall }) });
   }
   if (isIterationLive(message)) {
-    const label2 = liveIterationLabel(message);
-    return /* @__PURE__ */ jsx("div", { className: "py-0.5 text-sm", children: /* @__PURE__ */ jsx(Shimmer, { duration: 3, spread: 3, className: "text-sm", children: label2 }) });
+    return /* @__PURE__ */ jsx(
+      OrbShimmerLabel,
+      {
+        state: messageOrbState(message, SIMPLE_MODE_ORB_OPTIONS),
+        label: liveIterationLabel(message),
+        className: "py-0.5"
+      }
+    );
   }
   const label = summary ?? deriveIterationLabel(message);
   if (!label) {
@@ -10052,8 +12553,8 @@ function RetryBanner({ indicator }) {
     }
   );
 }
-function WorkingOnItIndicator() {
-  return /* @__PURE__ */ jsx(Message, { from: "assistant", children: /* @__PURE__ */ jsx(MessageContent, { children: /* @__PURE__ */ jsx(Shimmer, { duration: 3, spread: 3, className: "text-sm", children: "Working on it..." }) }) });
+function WorkingOnItIndicator({ activity }) {
+  return /* @__PURE__ */ jsx(Message, { from: "assistant", children: /* @__PURE__ */ jsx(MessageContent, { children: /* @__PURE__ */ jsx(OrbShimmerLabel, { state: activity.state, label: activity.label }) }) });
 }
 function useDelayedRunningIndicator(isRunning) {
   const [visible, setVisible] = useState(isRunning);
@@ -10112,6 +12613,13 @@ function ChatThread({
 }) {
   const groups = useMemo(() => groupMessages(messages), [messages]);
   const awaitingInput = useMemo(() => isAwaitingUserInput(messages), [messages]);
+  const orbActivity = useMemo(
+    () => deriveOrbActivity(
+      messages,
+      viewMode === "simple" ? SIMPLE_MODE_ORB_OPTIONS : void 0
+    ),
+    [messages, viewMode]
+  );
   const showWorkingOnIt = useDelayedRunningIndicator(isRunning) && !awaitingInput;
   const composerDisabled = disabled || awaitingInput;
   const composerDisabledReason = awaitingInput ? "Answer the question above to continue." : disabledReason;
@@ -10253,7 +12761,7 @@ function ChatThread({
             group.messages[0].id
           );
         }),
-        showWorkingOnIt && /* @__PURE__ */ jsx(WorkingOnItIndicator, {})
+        showWorkingOnIt && /* @__PURE__ */ jsx(WorkingOnItIndicator, { activity: orbActivity })
       ] }) }),
       /* @__PURE__ */ jsx(ConversationScrollButton, {})
     ] }),
@@ -11874,9 +14382,9 @@ function applyCodeRunProgress(messages, data) {
     ...msg,
     toolCalls: msg.toolCalls?.map((tc) => {
       if (tc.id !== match.toolId) return tc;
-      const frame = parseCodeRunState(tc.result);
-      frame.output += chunk;
-      return { ...tc, result: JSON.stringify(frame) };
+      const frame2 = parseCodeRunState(tc.result);
+      frame2.output += chunk;
+      return { ...tc, result: JSON.stringify(frame2) };
     })
   };
   return next;
@@ -11896,15 +14404,15 @@ function applyCodeRunResult(messages, data) {
     ...msg,
     toolCalls: msg.toolCalls?.map((tc) => {
       if (tc.id !== match.toolId) return tc;
-      const frame = parseCodeRunState(tc.result);
-      frame.finalMessage = finalMessage;
-      frame.error = error;
-      frame.inputTokens = inputTokens;
-      frame.outputTokens = outputTokens;
+      const frame2 = parseCodeRunState(tc.result);
+      frame2.finalMessage = finalMessage;
+      frame2.error = error;
+      frame2.inputTokens = inputTokens;
+      frame2.outputTokens = outputTokens;
       return {
         ...tc,
         status: error ? "error" : "complete",
-        result: JSON.stringify(frame)
+        result: JSON.stringify(frame2)
       };
     })
   };
@@ -12332,6 +14840,15 @@ function useAgentChatRuntime({
     } catch {
     }
     if (live) reviveStreamIfNeeded(targetSessionId);
+    if (statusKnown && !live && !appliedNew && stateRef.current.isRunning) {
+      setState(
+        (prev) => prev.isRunning ? applyRuntimeEvent(prev, {
+          type: "session.done",
+          eventId: 0,
+          data: {}
+        }) : prev
+      );
+    }
     if (appliedNew) return RECONCILE_FAST;
     if (live || !statusKnown) return RECONCILE_ACTIVE;
     return isMission || stateRef.current.isRunning ? RECONCILE_MISSION_IDLE : RECONCILE_IDLE;
@@ -16711,6 +19228,6 @@ function SessionTreePanel({
   ] });
 }
 
-export { ACTIVE_MISSION_STATUSES, AgentChat, AgentChatAdapterProvider, BrowserLiveView, CitationText, CodingAgentsPanel, ComposioConnectCard, FetchSseEventStream, InboxPanel, IntegrationsBand, IntegrationsPage, MISSION_EVENT_CATEGORIES, MessageResponse, MissionDashboard, MissionsPanel, ResearchSourcesPanel, ScheduledWorkPanel, SessionTreePanel, defaultSelectedMissionTaskId, deriveMissionWorkerActivityLabel, formatMissionTimestamp, groupMissionTasksByBucket, isTerminalMissionStatus, mergeMissionEvents, missionEventActorLabel, missionEventCategory, missionEventSummary, missionEventTaskId, missionTaskBlocks, missionTaskBucket, missionTaskRailGroups, missionTaskStatusDotClass, missionTaskTitle, missionWorkerTaskCounts, splitCitations, stripMissionControlMarkup, useAgentChatAdapterContext, useAgentChatRuntime, useChatViewMode, useInboxUnreadCount, useMissionEvents };
+export { ACTIVE_MISSION_STATUSES, AgentChat, AgentChatAdapterProvider, BrandBeam, BrowserLiveView, CitationText, CodingAgentsPanel, ComposioConnectCard, FetchSseEventStream, InboxPanel, IntegrationsBand, IntegrationsPage, MISSION_EVENT_CATEGORIES, MessageResponse, MissionDashboard, MissionsPanel, ORB_STATE_LABELS, OrbShimmerLabel, ResearchSourcesPanel, SIMPLE_MODE_HIDDEN_TOOLS, SIMPLE_MODE_ORB_OPTIONS, ScheduledWorkPanel, SessionTreePanel, defaultSelectedMissionTaskId, deriveMissionWorkerActivityLabel, deriveOrbActivity, formatMissionTimestamp, groupMissionTasksByBucket, isHiddenSimpleTool, isTerminalMissionStatus, mergeMissionEvents, messageOrbState, missionEventActorLabel, missionEventCategory, missionEventSummary, missionEventTaskId, missionTaskBlocks, missionTaskBucket, missionTaskRailGroups, missionTaskStatusDotClass, missionTaskTitle, missionWorkerTaskCounts, splitCitations, stripMissionControlMarkup, toolOrbState, useAgentChatAdapterContext, useAgentChatRuntime, useChatViewMode, useInboxUnreadCount, useMissionEvents };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map