@editora/ui-core 0.1.8 → 0.1.10

package/dist/animated-beam.esm.js

@@ -0,0 +1,1540 @@
+import { E as pe } from "./ElementBase-909688f3.mjs";
+const ie = 3200, ne = 0, oe = 0, se = 3, re = 4, de = 0.18, me = 3, D = "#8b5cf6", q = "#f59e0b", fe = "rgba(148, 163, 184, 0.34)", j = 2, ge = /* @__PURE__ */ new Set(["none", "sm", "md", "lg", "full"]), ue = /* @__PURE__ */ new Set(["brand", "neutral", "info", "success", "warning", "danger"]), xe = /* @__PURE__ */ new Set(["calm", "smooth", "snappy", "surge", "pulse", "heartbeat"]), Y = /* @__PURE__ */ new Set(["auto", "straight", "soft", "arc"]), X = /* @__PURE__ */ new Set(["forward", "reverse"]), ye = /* @__PURE__ */ new Set(["none", "glow", "pulse", "ring", "shake"]), K = [
+  "node-id",
+  "column",
+  "row",
+  "size",
+  "from",
+  "to",
+  "curve",
+  "direction",
+  "reverse",
+  "duration",
+  "delay",
+  "tone",
+  "color-start",
+  "color-end",
+  "beam-factor",
+  "trail-width",
+  "beam-width",
+  "id"
+], b = {
+  xxs: {
+    nodeSize: 36,
+    hubSize: 50,
+    columnGap: 72,
+    rowGap: 28,
+    padding: 12,
+    minHeight: 160,
+    radius: 16
+  },
+  xs: {
+    nodeSize: 46,
+    hubSize: 62,
+    columnGap: 88,
+    rowGap: 36,
+    padding: 16,
+    minHeight: 190,
+    radius: 18
+  },
+  sm: {
+    nodeSize: 56,
+    hubSize: 74,
+    columnGap: 108,
+    rowGap: 48,
+    padding: 20,
+    minHeight: 220,
+    radius: 22
+  },
+  md: {
+    nodeSize: 84,
+    hubSize: 116,
+    columnGap: 156,
+    rowGap: 72,
+    padding: 32,
+    minHeight: 320,
+    radius: 28
+  },
+  lg: {
+    nodeSize: 98,
+    hubSize: 132,
+    columnGap: 188,
+    rowGap: 88,
+    padding: 40,
+    minHeight: 400,
+    radius: 34
+  }
+}, v = {
+  calm: {
+    durationScale: 1.18,
+    glowOpacity: 0.26,
+    glowBlur: 9,
+    beamFactor: 0.15,
+    pattern: "progress"
+  },
+  smooth: {
+    durationScale: 1,
+    glowOpacity: 0.34,
+    glowBlur: 11,
+    beamFactor: de,
+    pattern: "progress"
+  },
+  snappy: {
+    durationScale: 0.82,
+    glowOpacity: 0.38,
+    glowBlur: 10,
+    beamFactor: 0.2,
+    pattern: "progress"
+  },
+  surge: {
+    durationScale: 0.68,
+    glowOpacity: 0.44,
+    glowBlur: 13,
+    beamFactor: 0.24,
+    pattern: "progress"
+  },
+  pulse: {
+    durationScale: 0.92,
+    glowOpacity: 0.42,
+    glowBlur: 14,
+    beamFactor: 0.22,
+    pattern: "pulse"
+  },
+  heartbeat: {
+    durationScale: 0.86,
+    glowOpacity: 0.48,
+    glowBlur: 15,
+    beamFactor: 0.18,
+    pattern: "heartbeat"
+  }
+}, E = {
+  brand: { start: D, end: q },
+  neutral: { start: "#64748b", end: "#cbd5e1" },
+  info: { start: "#38bdf8", end: "#6366f1" },
+  success: { start: "#22c55e", end: "#14b8a6" },
+  warning: { start: "#f59e0b", end: "#f97316" },
+  danger: { start: "#ef4444", end: "#f97316" }
+}, _e = `
+  :host {
+    --ui-animated-beam-required-width: 0px;
+    --ui-animated-beam-duration: ${ie}ms;
+    --ui-animated-beam-delay: ${ne}ms;
+    --ui-animated-beam-stagger: ${oe}ms;
+    --ui-animated-beam-padding: ${b.md.padding}px;
+    --ui-animated-beam-column-gap: ${b.md.columnGap}px;
+    --ui-animated-beam-row-gap: ${b.md.rowGap}px;
+    --ui-animated-beam-node-size: ${b.md.nodeSize}px;
+    --ui-animated-beam-hub-size: ${b.md.hubSize}px;
+    --ui-animated-beam-min-height: ${b.md.minHeight}px;
+    --ui-animated-beam-columns: ${me};
+    --ui-animated-beam-radius: ${b.md.radius}px;
+    --ui-animated-beam-trail-width: ${se}px;
+    --ui-animated-beam-beam-width: ${re}px;
+    --ui-animated-beam-beam-factor: ${de};
+    --ui-animated-beam-accent: ${D};
+    --ui-animated-beam-accent-end: ${q};
+    --ui-animated-beam-path-color: ${fe};
+    --ui-animated-beam-bg: transparent;
+    --ui-animated-beam-color: var(--ui-color-text, #0f172a);
+    --ui-animated-beam-border-color:
+      color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.16)) 82%, transparent);
+    --ui-animated-beam-border: 1px solid transparent;
+    --ui-animated-beam-shadow: none;
+    --ui-animated-beam-backdrop: none;
+    --ui-animated-beam-node-bg:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
+    --ui-animated-beam-node-color: inherit;
+    --ui-animated-beam-node-border:
+      1px solid color-mix(in srgb, var(--ui-animated-beam-accent) 12%, rgba(15, 23, 42, 0.1));
+    --ui-animated-beam-node-shadow:
+      0 1px 2px rgba(15, 23, 42, 0.06),
+      0 14px 28px rgba(15, 23, 42, 0.1);
+    --ui-animated-beam-node-backdrop: none;
+    --ui-animated-beam-hub-bg:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.96));
+    --ui-animated-beam-hub-border:
+      1px solid color-mix(in srgb, var(--ui-animated-beam-accent) 14%, rgba(15, 23, 42, 0.1));
+    --ui-animated-beam-hub-shadow:
+      0 1px 2px rgba(15, 23, 42, 0.08),
+      0 18px 34px rgba(15, 23, 42, 0.12);
+    --ui-animated-beam-glow-opacity: ${v.smooth.glowOpacity};
+    --ui-animated-beam-glow-blur: ${v.smooth.glowBlur}px;
+    --ui-animated-beam-core-opacity: 0.96;
+    --ui-animated-beam-trail-opacity: 0.72;
+    --ui-animated-beam-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
+    display: block;
+    min-inline-size: var(--ui-animated-beam-required-width);
+    color: var(--ui-animated-beam-color);
+    color-scheme: light dark;
+    font-family: "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    box-sizing: border-box;
+  }
+
+  :host([size="xxs"]),
+  :host([size="0"]) {
+    --ui-animated-beam-padding: ${b.xxs.padding}px;
+    --ui-animated-beam-column-gap: ${b.xxs.columnGap}px;
+    --ui-animated-beam-row-gap: ${b.xxs.rowGap}px;
+    --ui-animated-beam-node-size: ${b.xxs.nodeSize}px;
+    --ui-animated-beam-hub-size: ${b.xxs.hubSize}px;
+    --ui-animated-beam-min-height: ${b.xxs.minHeight}px;
+    --ui-animated-beam-radius: ${b.xxs.radius}px;
+  }
+
+  :host([size="xs"]) {
+    --ui-animated-beam-padding: ${b.xs.padding}px;
+    --ui-animated-beam-column-gap: ${b.xs.columnGap}px;
+    --ui-animated-beam-row-gap: ${b.xs.rowGap}px;
+    --ui-animated-beam-node-size: ${b.xs.nodeSize}px;
+    --ui-animated-beam-hub-size: ${b.xs.hubSize}px;
+    --ui-animated-beam-min-height: ${b.xs.minHeight}px;
+    --ui-animated-beam-radius: ${b.xs.radius}px;
+  }
+
+  :host([size="sm"]),
+  :host([size="1"]) {
+    --ui-animated-beam-padding: ${b.sm.padding}px;
+    --ui-animated-beam-column-gap: ${b.sm.columnGap}px;
+    --ui-animated-beam-row-gap: ${b.sm.rowGap}px;
+    --ui-animated-beam-node-size: ${b.sm.nodeSize}px;
+    --ui-animated-beam-hub-size: ${b.sm.hubSize}px;
+    --ui-animated-beam-min-height: ${b.sm.minHeight}px;
+    --ui-animated-beam-radius: ${b.sm.radius}px;
+  }
+
+  :host(:not([size])),
+  :host([size="md"]),
+  :host([size="2"]) {
+    --ui-animated-beam-padding: ${b.md.padding}px;
+    --ui-animated-beam-column-gap: ${b.md.columnGap}px;
+    --ui-animated-beam-row-gap: ${b.md.rowGap}px;
+    --ui-animated-beam-node-size: ${b.md.nodeSize}px;
+    --ui-animated-beam-hub-size: ${b.md.hubSize}px;
+    --ui-animated-beam-min-height: ${b.md.minHeight}px;
+    --ui-animated-beam-radius: ${b.md.radius}px;
+  }
+
+  :host([size="lg"]),
+  :host([size="3"]) {
+    --ui-animated-beam-padding: ${b.lg.padding}px;
+    --ui-animated-beam-column-gap: ${b.lg.columnGap}px;
+    --ui-animated-beam-row-gap: ${b.lg.rowGap}px;
+    --ui-animated-beam-node-size: ${b.lg.nodeSize}px;
+    --ui-animated-beam-hub-size: ${b.lg.hubSize}px;
+    --ui-animated-beam-min-height: ${b.lg.minHeight}px;
+    --ui-animated-beam-radius: ${b.lg.radius}px;
+  }
+
+  :host([tone="neutral"]) {
+    --ui-animated-beam-accent: ${E.neutral.start};
+    --ui-animated-beam-accent-end: ${E.neutral.end};
+  }
+
+  :host([tone="info"]) {
+    --ui-animated-beam-accent: ${E.info.start};
+    --ui-animated-beam-accent-end: ${E.info.end};
+  }
+
+  :host([tone="success"]) {
+    --ui-animated-beam-accent: ${E.success.start};
+    --ui-animated-beam-accent-end: ${E.success.end};
+  }
+
+  :host([tone="warning"]) {
+    --ui-animated-beam-accent: ${E.warning.start};
+    --ui-animated-beam-accent-end: ${E.warning.end};
+  }
+
+  :host([tone="danger"]) {
+    --ui-animated-beam-accent: ${E.danger.start};
+    --ui-animated-beam-accent-end: ${E.danger.end};
+  }
+
+  :host([variant="surface"]) {
+    --ui-animated-beam-bg:
+      radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9));
+    --ui-animated-beam-border: 1px solid var(--ui-animated-beam-border-color);
+    --ui-animated-beam-shadow:
+      0 1px 2px rgba(15, 23, 42, 0.04),
+      0 20px 36px rgba(15, 23, 42, 0.08);
+    --ui-animated-beam-trail-opacity: 0.7;
+  }
+
+  :host([variant="soft"]) {
+    --ui-animated-beam-bg:
+      radial-gradient(
+        circle at 50% 50%,
+        color-mix(in srgb, var(--ui-animated-beam-accent) 5%, rgba(255, 255, 255, 0.98)),
+        color-mix(in srgb, var(--ui-animated-beam-accent) 2%, rgba(248, 250, 252, 0.92))
+    );
+    --ui-animated-beam-border: 1px solid color-mix(in srgb, var(--ui-animated-beam-accent) 16%, transparent);
+    --ui-animated-beam-shadow: none;
+    --ui-animated-beam-trail-opacity: 0.62;
+    --ui-animated-beam-core-opacity: 0.9;
+  }
+
+  :host([variant="solid"]) {
+    --ui-animated-beam-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-animated-beam-accent) 12%, rgba(255, 255, 255, 0.98)),
+        color-mix(in srgb, var(--ui-animated-beam-accent-end) 8%, rgba(248, 250, 252, 0.94))
+      );
+    --ui-animated-beam-border: 1px solid color-mix(in srgb, var(--ui-animated-beam-accent) 20%, transparent);
+    --ui-animated-beam-shadow:
+      0 1px 2px rgba(15, 23, 42, 0.04),
+      0 24px 42px color-mix(in srgb, var(--ui-animated-beam-accent) 8%, rgba(15, 23, 42, 0.08));
+    --ui-animated-beam-trail-opacity: 0.76;
+  }
+
+  :host([variant="glass"]) {
+    --ui-animated-beam-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, rgba(255, 255, 255, 0.96) 88%, transparent),
+        color-mix(in srgb, rgba(255, 255, 255, 0.86) 72%, transparent)
+      );
+    --ui-animated-beam-border: 1px solid color-mix(in srgb, #ffffff 28%, var(--ui-animated-beam-border-color));
+    --ui-animated-beam-shadow:
+      0 1px 2px rgba(15, 23, 42, 0.06),
+      0 26px 48px rgba(15, 23, 42, 0.12);
+    --ui-animated-beam-backdrop: blur(16px) saturate(1.08);
+    --ui-animated-beam-node-backdrop: blur(10px) saturate(1.04);
+    --ui-animated-beam-trail-opacity: 0.64;
+  }
+
+  :host([variant="contrast"]) {
+    --ui-animated-beam-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, #07162d 92%, var(--ui-animated-beam-accent) 8%),
+        color-mix(in srgb, #0f2d57 84%, var(--ui-animated-beam-accent-end) 16%)
+      );
+    --ui-animated-beam-color: #f8fbff;
+    --ui-animated-beam-border: 1px solid color-mix(in srgb, #9ec5ff 20%, transparent);
+    --ui-animated-beam-shadow: 0 26px 54px rgba(2, 6, 23, 0.32);
+    --ui-animated-beam-node-bg: color-mix(in srgb, #ffffff 8%, transparent);
+    --ui-animated-beam-node-border: 1px solid color-mix(in srgb, #ffffff 16%, transparent);
+    --ui-animated-beam-node-color: #f8fbff;
+    --ui-animated-beam-node-shadow: 0 12px 22px rgba(2, 6, 23, 0.22);
+    --ui-animated-beam-hub-bg: color-mix(in srgb, #ffffff 10%, transparent);
+    --ui-animated-beam-hub-border: 1px solid color-mix(in srgb, #ffffff 18%, transparent);
+    --ui-animated-beam-hub-shadow: 0 18px 30px rgba(2, 6, 23, 0.24);
+    --ui-animated-beam-path-color: color-mix(in srgb, #ffffff 20%, transparent);
+    --ui-animated-beam-trail-opacity: 0.92;
+    --ui-animated-beam-core-opacity: 1;
+  }
+
+  :host(:not([variant])),
+  :host([variant="minimal"]) {
+    --ui-animated-beam-bg: transparent;
+    --ui-animated-beam-border: 1px solid transparent;
+    --ui-animated-beam-shadow: none;
+    --ui-animated-beam-trail-opacity: 0.68;
+  }
+
+  :host([radius="none"]) {
+    --ui-animated-beam-radius: 0px;
+  }
+
+  :host([radius="sm"]) {
+    --ui-animated-beam-radius: 18px;
+  }
+
+  :host([radius="md"]) {
+    --ui-animated-beam-radius: 24px;
+  }
+
+  :host([radius="lg"]) {
+    --ui-animated-beam-radius: 32px;
+  }
+
+  :host([radius="full"]) {
+    --ui-animated-beam-radius: 999px;
+  }
+
+  :host([elevation="none"]) {
+    --ui-animated-beam-shadow: none;
+    --ui-animated-beam-node-shadow: none;
+    --ui-animated-beam-hub-shadow: none;
+  }
+
+  :host([elevation="high"]) {
+    --ui-animated-beam-shadow:
+      0 1px 2px rgba(15, 23, 42, 0.06),
+      0 30px 58px rgba(15, 23, 42, 0.14);
+    --ui-animated-beam-node-shadow:
+      0 1px 3px rgba(15, 23, 42, 0.08),
+      0 18px 34px rgba(15, 23, 42, 0.14);
+    --ui-animated-beam-hub-shadow:
+      0 1px 3px rgba(15, 23, 42, 0.08),
+      0 24px 42px rgba(15, 23, 42, 0.16);
+  }
+
+  :host([animation="calm"]) {
+    --ui-animated-beam-glow-opacity: ${v.calm.glowOpacity};
+    --ui-animated-beam-glow-blur: ${v.calm.glowBlur}px;
+    --ui-animated-beam-beam-factor: ${v.calm.beamFactor};
+  }
+
+  :host(:not([animation])),
+  :host([animation="smooth"]) {
+    --ui-animated-beam-glow-opacity: ${v.smooth.glowOpacity};
+    --ui-animated-beam-glow-blur: ${v.smooth.glowBlur}px;
+    --ui-animated-beam-beam-factor: ${v.smooth.beamFactor};
+  }
+
+  :host([animation="snappy"]) {
+    --ui-animated-beam-glow-opacity: ${v.snappy.glowOpacity};
+    --ui-animated-beam-glow-blur: ${v.snappy.glowBlur}px;
+    --ui-animated-beam-beam-factor: ${v.snappy.beamFactor};
+  }
+
+  :host([animation="surge"]) {
+    --ui-animated-beam-glow-opacity: ${v.surge.glowOpacity};
+    --ui-animated-beam-glow-blur: ${v.surge.glowBlur}px;
+    --ui-animated-beam-beam-factor: ${v.surge.beamFactor};
+  }
+
+  :host([animation="pulse"]) {
+    --ui-animated-beam-glow-opacity: ${v.pulse.glowOpacity};
+    --ui-animated-beam-glow-blur: ${v.pulse.glowBlur}px;
+    --ui-animated-beam-beam-factor: ${v.pulse.beamFactor};
+  }
+
+  :host([animation="heartbeat"]) {
+    --ui-animated-beam-glow-opacity: ${v.heartbeat.glowOpacity};
+    --ui-animated-beam-glow-blur: ${v.heartbeat.glowBlur}px;
+    --ui-animated-beam-beam-factor: ${v.heartbeat.beamFactor};
+  }
+
+  .root {
+    display: block;
+    min-inline-size: var(--ui-animated-beam-required-width);
+  }
+
+  .surface {
+    position: relative;
+    min-inline-size: var(--ui-animated-beam-required-width);
+    inline-size: max(100%, var(--ui-animated-beam-required-width));
+    border-radius: var(--ui-animated-beam-radius);
+    border: var(--ui-animated-beam-border);
+    background: var(--ui-animated-beam-bg);
+    color: var(--ui-animated-beam-color);
+    box-shadow: var(--ui-animated-beam-shadow);
+    backdrop-filter: var(--ui-animated-beam-backdrop);
+    transition:
+      background-color 180ms cubic-bezier(0.2, 0.9, 0.24, 1),
+      border-color 180ms cubic-bezier(0.2, 0.9, 0.24, 1),
+      box-shadow 180ms cubic-bezier(0.2, 0.9, 0.24, 1),
+      color 180ms cubic-bezier(0.2, 0.9, 0.24, 1),
+      backdrop-filter 180ms cubic-bezier(0.2, 0.9, 0.24, 1);
+  }
+
+  .canvas {
+    position: relative;
+    min-inline-size: var(--ui-animated-beam-required-width);
+    inline-size: max(100%, var(--ui-animated-beam-required-width));
+    min-block-size: var(--ui-animated-beam-min-height);
+    overflow: visible;
+    isolation: isolate;
+  }
+
+  .svg {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  .connection {
+    fill: none;
+  }
+
+  .trail,
+  .beam-glow,
+  .beam-core {
+    fill: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    vector-effect: non-scaling-stroke;
+  }
+
+  .trail {
+    stroke: var(--ui-animated-beam-path-color);
+    opacity: var(--ui-animated-beam-trail-opacity);
+  }
+
+  :host([data-path-visible="false"]) .trail {
+    opacity: 0;
+  }
+
+  .beam-glow,
+  .beam-core {
+    stroke-dasharray: 0 var(--ui-animated-beam-travel-distance, 320);
+    stroke-dashoffset: var(--ui-animated-beam-progress-offset, 0);
+    animation-duration: var(--ui-animated-beam-cycle-duration, var(--ui-animated-beam-connection-duration, var(--ui-animated-beam-duration)));
+    animation-timing-function: linear;
+    animation-iteration-count: var(--ui-animated-beam-iteration-count, infinite);
+    animation-fill-mode: both;
+  }
+
+  .beam-glow {
+    opacity: 0;
+    filter: blur(var(--ui-animated-beam-glow-blur));
+  }
+
+  :host([glow="false"]) .beam-glow {
+    display: none;
+  }
+
+  .beam-core {
+    opacity: 0;
+  }
+
+  :host([data-state="paused"]) .beam-glow,
+  :host([data-state="paused"]) .beam-core {
+    animation-play-state: paused;
+  }
+
+  :host([data-state="paused"]) ::slotted([data-ui-animated-beam-node]),
+  :host([data-state="paused"]) ::slotted([data-ui-animated-beam-hub]) {
+    animation-play-state: paused;
+  }
+
+  :host([data-reduced-motion="true"]) .beam-glow,
+  :host([data-reduced-motion="true"]) .beam-core {
+    animation: none;
+    stroke-dasharray: var(--ui-animated-beam-travel-distance, 320) 0;
+  }
+
+  :host([data-reduced-motion="true"]) .beam-glow {
+    opacity: var(--ui-animated-beam-glow-opacity);
+  }
+
+  :host([data-reduced-motion="true"]) .beam-core {
+    opacity: var(--ui-animated-beam-core-opacity);
+  }
+
+  :host([data-reduced-motion="true"]) ::slotted([data-ui-animated-beam-node]),
+  :host([data-reduced-motion="true"]) ::slotted([data-ui-animated-beam-hub]) {
+    animation: none !important;
+  }
+
+  slot[name="hub"],
+  slot[name="connections"] {
+    display: contents;
+  }
+
+  .connections-meta {
+    display: none;
+  }
+
+  ::slotted([data-ui-animated-beam-node]),
+  ::slotted([data-ui-animated-beam-hub]) {
+    --ui-animated-beam-node-base-shadow: var(--ui-animated-beam-node-shadow);
+    --ui-animated-beam-node-effect-ring:
+      color-mix(in srgb, var(--ui-animated-beam-accent-end) 26%, transparent);
+    --ui-animated-beam-node-effect-glow:
+      color-mix(in srgb, var(--ui-animated-beam-accent) 32%, transparent);
+    position: absolute !important;
+    inset: auto;
+    transform: translate(-50%, -50%);
+    inline-size: var(--ui-animated-beam-render-size, var(--ui-animated-beam-node-size));
+    block-size: var(--ui-animated-beam-render-size, var(--ui-animated-beam-node-size));
+    display: grid !important;
+    place-items: center;
+    box-sizing: border-box;
+    border-radius: 999px;
+    padding: calc(var(--ui-animated-beam-render-size, var(--ui-animated-beam-node-size)) * 0.1);
+    font-size: calc(var(--ui-animated-beam-render-size, var(--ui-animated-beam-node-size)) * 0.32);
+    color: var(--ui-animated-beam-node-color);
+    background: var(--ui-animated-beam-node-bg);
+    border: var(--ui-animated-beam-node-border);
+    box-shadow: var(--ui-animated-beam-node-shadow);
+    backdrop-filter: var(--ui-animated-beam-node-backdrop);
+    text-align: center;
+    z-index: 1;
+    animation-name: var(--ui-animated-beam-node-effect-name, none);
+    animation-duration: var(--ui-animated-beam-node-effect-cycle, 0ms);
+    animation-timing-function: linear;
+    animation-iteration-count: var(--ui-animated-beam-node-effect-iterations, 1);
+    animation-fill-mode: both;
+    transition:
+      border-color 180ms cubic-bezier(0.2, 0.9, 0.24, 1),
+      box-shadow 180ms cubic-bezier(0.2, 0.9, 0.24, 1),
+      background-color 180ms cubic-bezier(0.2, 0.9, 0.24, 1),
+      transform 180ms cubic-bezier(0.2, 0.9, 0.24, 1);
+  }
+
+  ::slotted([data-ui-animated-beam-hub]) {
+    --ui-animated-beam-node-base-shadow: var(--ui-animated-beam-hub-shadow);
+    inline-size: var(--ui-animated-beam-render-size, var(--ui-animated-beam-hub-size));
+    block-size: var(--ui-animated-beam-render-size, var(--ui-animated-beam-hub-size));
+    padding: calc(var(--ui-animated-beam-render-size, var(--ui-animated-beam-hub-size)) * 0.12);
+    font-size: calc(var(--ui-animated-beam-render-size, var(--ui-animated-beam-hub-size)) * 0.26);
+    background: var(--ui-animated-beam-hub-bg);
+    border: var(--ui-animated-beam-hub-border);
+    box-shadow: var(--ui-animated-beam-hub-shadow);
+    z-index: 2;
+  }
+
+  ::slotted([data-ui-animated-beam-node]:focus-visible),
+  ::slotted([data-ui-animated-beam-hub]:focus-visible) {
+    outline: none;
+    border-color: color-mix(in srgb, var(--ui-animated-beam-focus-ring) 26%, transparent);
+    box-shadow:
+      0 0 0 3px color-mix(in srgb, var(--ui-animated-beam-focus-ring) 18%, transparent),
+      var(--ui-animated-beam-node-shadow);
+  }
+
+  ::slotted([slot="connections"]) {
+    display: none !important;
+  }
+
+  ::slotted([data-ui-animated-beam-node] > svg),
+  ::slotted([data-ui-animated-beam-hub] > svg) {
+    inline-size: 62%;
+    block-size: 62%;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .beam-glow,
+    .beam-core {
+      animation: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-animated-beam-bg: Canvas;
+      --ui-animated-beam-color: CanvasText;
+      --ui-animated-beam-border: 1px solid CanvasText;
+      --ui-animated-beam-shadow: none;
+      --ui-animated-beam-node-bg: Canvas;
+      --ui-animated-beam-node-color: CanvasText;
+      --ui-animated-beam-node-border: 1px solid CanvasText;
+      --ui-animated-beam-node-shadow: none;
+      --ui-animated-beam-hub-bg: Canvas;
+      --ui-animated-beam-hub-border: 1px solid CanvasText;
+      --ui-animated-beam-hub-shadow: none;
+      --ui-animated-beam-path-color: CanvasText;
+    }
+  }
+`;
+class ve extends pe {
+  constructor() {
+    super(...arguments), this._nodeSlot = null, this._hubSlot = null, this._connectionSlot = null, this._surfaceEl = null, this._canvasEl = null, this._svgEl = null, this._defsEl = null, this._pathsEl = null, this._animationStyleEl = null, this._nodes = [], this._connections = [], this._nodeEffectAnimations = /* @__PURE__ */ new Map(), this._lastLayoutMetrics = null, this._resizeObserver = null, this._mutationObserver = null, this._mediaQuery = null, this._observedResizeElements = /* @__PURE__ */ new Set(), this._uid = `ui-animated-beam-${Math.random().toString(36).slice(2, 10)}`, this._boundSlotChange = this._handleSlotChange.bind(this), this._boundReducedMotionChange = this._handleReducedMotionChange.bind(this), this._boundResize = this._handleResize.bind(this), this._refreshScheduled = !1;
+  }
+  static get observedAttributes() {
+    return [
+      "animation",
+      "variant",
+      "tone",
+      "size",
+      "radius",
+      "elevation",
+      "columns",
+      "rows",
+      "padding",
+      "column-gap",
+      "row-gap",
+      "min-height",
+      "node-size",
+      "hub-size",
+      "duration",
+      "delay",
+      "stagger",
+      "trail-width",
+      "beam-width",
+      "beam-factor",
+      "path",
+      "glow",
+      "node-effect",
+      "auto-fit",
+      "paused",
+      "repeat",
+      "direction",
+      "reverse",
+      "color-start",
+      "color-end",
+      "trail-color",
+      "curve"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._bindReducedMotionWatcher(), this._ensureResizeObserver(), this._ensureMutationObserver();
+  }
+  disconnectedCallback() {
+    var e, t, s, o;
+    this._clearNodeEffectAnimations(), this._disconnectResizeObserver(), this._disconnectMutationObserver(), (t = (e = this._mediaQuery) == null ? void 0 : e.removeEventListener) == null || t.call(e, "change", this._boundReducedMotionChange), (o = (s = this._mediaQuery) == null ? void 0 : s.removeListener) == null || o.call(s, this._boundReducedMotionChange), this._mediaQuery = null, super.disconnectedCallback();
+  }
+  attributeChangedCallback(e, t, s) {
+    if (!(t === s || !this.isConnected)) {
+      if (e === "paused") {
+        this._syncState();
+        return;
+      }
+      this._syncRuntimeStyles(), this._refreshScene();
+    }
+  }
+  play() {
+    this.hasAttribute("paused") && this.removeAttribute("paused"), this._syncState();
+  }
+  pause() {
+    this.hasAttribute("paused") || this.setAttribute("paused", ""), this._syncState();
+  }
+  refresh() {
+    this._clearNodeEffectAnimations(), this._syncRuntimeStyles(), this._syncNodes(), this._syncConnections(), this._layoutNodes(), this._renderConnections(), this._syncObservedResizeElements(), this._syncState();
+  }
+  render() {
+    var e, t, s;
+    this.setContent(`
+      <style>${_e}</style>
+      <style data-ui-animated-beam-animations></style>
+      <div class="root" part="root">
+        <div class="surface" part="surface">
+          <div class="canvas" part="canvas">
+            <svg class="svg" part="svg" aria-hidden="true" focusable="false" preserveAspectRatio="none">
+              <defs></defs>
+              <g class="paths" part="paths"></g>
+            </svg>
+            <slot name="hub"></slot>
+            <slot></slot>
+            <div class="connections-meta" aria-hidden="true">
+              <slot name="connections"></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    `), this._surfaceEl = this.root.querySelector(".surface"), this._canvasEl = this.root.querySelector(".canvas"), this._svgEl = this.root.querySelector(".svg"), this._defsEl = this.root.querySelector("defs"), this._pathsEl = this.root.querySelector(".paths"), this._animationStyleEl = this.root.querySelector("style[data-ui-animated-beam-animations]"), this._nodeSlot = this.root.querySelector("slot:not([name])"), this._hubSlot = this.root.querySelector('slot[name="hub"]'), this._connectionSlot = this.root.querySelector('slot[name="connections"]'), (e = this._nodeSlot) == null || e.addEventListener("slotchange", this._boundSlotChange), (t = this._hubSlot) == null || t.addEventListener("slotchange", this._boundSlotChange), (s = this._connectionSlot) == null || s.addEventListener("slotchange", this._boundSlotChange), this._syncRuntimeStyles(), this.refresh();
+  }
+  shouldRenderOnAttributeChange() {
+    return !1;
+  }
+  _handleSlotChange() {
+    this._refreshScene();
+  }
+  _handleReducedMotionChange() {
+    this._syncState();
+  }
+  _handleResize() {
+    this._refreshScene();
+  }
+  _refreshScene() {
+    this._refreshScheduled || (this._refreshScheduled = !0, queueMicrotask(() => {
+      this._refreshScheduled = !1, this.isConnected && this.refresh();
+    }));
+  }
+  _bindReducedMotionWatcher() {
+    var e, t, s, o;
+    typeof window > "u" || typeof window.matchMedia != "function" || this._mediaQuery || (this._mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)"), (t = (e = this._mediaQuery).addEventListener) == null || t.call(e, "change", this._boundReducedMotionChange), (o = (s = this._mediaQuery).addListener) == null || o.call(s, this._boundReducedMotionChange));
+  }
+  _prefersReducedMotion() {
+    var e;
+    return !!((e = this._mediaQuery) != null && e.matches);
+  }
+  _ensureResizeObserver() {
+    this._resizeObserver || typeof ResizeObserver > "u" || (this._resizeObserver = new ResizeObserver(this._boundResize), this._syncObservedResizeElements());
+  }
+  _disconnectResizeObserver() {
+    this._resizeObserver && (this._resizeObserver.disconnect(), this._resizeObserver = null, this._observedResizeElements.clear());
+  }
+  _syncObservedResizeElements() {
+    if (!this._resizeObserver)
+      return;
+    const e = /* @__PURE__ */ new Set();
+    this._canvasEl && e.add(this._canvasEl), e.add(this);
+    for (const t of this._nodes)
+      e.add(t.el);
+    for (const t of this._observedResizeElements)
+      e.has(t) || this._resizeObserver.unobserve(t);
+    for (const t of e)
+      this._observedResizeElements.has(t) || this._resizeObserver.observe(t);
+    this._observedResizeElements = e;
+  }
+  _ensureMutationObserver() {
+    this._mutationObserver || typeof MutationObserver > "u" || (this._mutationObserver = new MutationObserver((e) => {
+      for (const t of e) {
+        if (t.type === "childList") {
+          this._refreshScene();
+          return;
+        }
+        if (t.type === "attributes" && t.target instanceof HTMLElement && K.includes(t.attributeName || "")) {
+          this._refreshScene();
+          return;
+        }
+      }
+    }), this._mutationObserver.observe(this, {
+      childList: !0,
+      subtree: !0,
+      attributes: !0,
+      attributeFilter: K
+    }));
+  }
+  _disconnectMutationObserver() {
+    var e;
+    (e = this._mutationObserver) == null || e.disconnect(), this._mutationObserver = null;
+  }
+  _syncRuntimeStyles() {
+    const e = this._sizePreset(), t = this._motionPreset();
+    this.style.setProperty("--ui-animated-beam-required-width", `${this._autoFit() ? 0 : this._requiredWidthPx(e)}px`), this.style.setProperty("--ui-animated-beam-duration", `${this._durationMs() * t.durationScale}ms`), this.style.setProperty("--ui-animated-beam-delay", `${this._delayMs()}ms`), this.style.setProperty("--ui-animated-beam-stagger", `${this._staggerMs()}ms`), this.style.setProperty("--ui-animated-beam-columns", String(this._columns())), this.style.setProperty("--ui-animated-beam-padding", `${this._paddingPx(e)}px`), this.style.setProperty("--ui-animated-beam-column-gap", `${this._columnGapPx(e)}px`), this.style.setProperty("--ui-animated-beam-row-gap", `${this._rowGapPx(e)}px`), this.style.setProperty("--ui-animated-beam-node-size", `${this._nodeSizePx(e)}px`), this.style.setProperty("--ui-animated-beam-hub-size", `${this._hubSizePx(e)}px`), this.style.setProperty("--ui-animated-beam-min-height", `${this._minHeightPx(e)}px`), this.style.setProperty("--ui-animated-beam-trail-width", `${this._trailWidthPx()}px`), this.style.setProperty("--ui-animated-beam-beam-width", `${this._beamWidthPx()}px`), this.style.setProperty("--ui-animated-beam-beam-factor", String(this._beamFactor(t))), this.style.setProperty("--ui-animated-beam-glow-opacity", String(t.glowOpacity)), this.style.setProperty("--ui-animated-beam-glow-blur", `${t.glowBlur}px`);
+    const s = this.getAttribute("radius");
+    if (s && !ge.has(s.trim())) {
+      const i = le(s);
+      i ? this.style.setProperty("--ui-animated-beam-radius", i) : this.style.removeProperty("--ui-animated-beam-radius");
+    } else
+      this.style.removeProperty("--ui-animated-beam-radius");
+    const o = this.getAttribute("color-start"), n = this.getAttribute("color-end");
+    o ? this.style.setProperty("--ui-animated-beam-accent", o) : this.style.removeProperty("--ui-animated-beam-accent"), n ? this.style.setProperty("--ui-animated-beam-accent-end", n) : this.style.removeProperty("--ui-animated-beam-accent-end");
+    const r = this.getAttribute("trail-color");
+    r ? this.style.setProperty("--ui-animated-beam-path-color", r) : this.style.removeProperty("--ui-animated-beam-path-color");
+  }
+  _nodesFromSlot() {
+    return this._nodeSlot ? this._nodeSlot.assignedElements({ flatten: !0 }).filter((e) => e instanceof HTMLElement) : [];
+  }
+  _hubsFromSlot() {
+    return this._hubSlot ? this._hubSlot.assignedElements({ flatten: !0 }).filter((e) => e instanceof HTMLElement) : [];
+  }
+  _connectionsFromSlot() {
+    return this._connectionSlot ? this._connectionSlot.assignedElements({ flatten: !0 }).filter((e) => e instanceof HTMLElement) : [];
+  }
+  _syncNodes() {
+    const e = this._sizePreset(), t = this._columns(), s = this._declaredRows(), o = this._nodesFromSlot(), n = this._hubsFromSlot(), r = /* @__PURE__ */ new Set([...o, ...n]);
+    for (const p of this._nodes)
+      r.has(p.el) || Pe(p.el);
+    const i = [];
+    o.forEach((p, h) => {
+      i.push(this._buildNodeRecord(p, "node", h, t, s, e));
+    }), n.forEach((p, h) => {
+      i.push(this._buildNodeRecord(p, "hub", h, t, s, e));
+    }), this._nodes = i, this.setAttribute("data-node-count", String(o.length)), this.setAttribute("data-hub-count", String(n.length));
+  }
+  _buildNodeRecord(e, t, s, o, n, r) {
+    const i = t === "hub" ? "data-ui-animated-beam-hub" : "data-ui-animated-beam-node";
+    e.hasAttribute(i) || e.setAttribute(i, ""), e.hasAttribute("data-ui-animated-beam-managed") || e.setAttribute("data-ui-animated-beam-managed", ""), e.hasAttribute("data-ui-animated-beam-node-id-owned") || e.removeAttribute("data-ui-animated-beam-node-id-owned"), t === "hub" && e.getAttribute("slot") !== "hub" && e.setAttribute("slot", "hub");
+    const p = this._nodeIdForElement(e, t, s), h = n ? Math.max(1, Math.ceil(n / 2)) : t === "hub" ? 2 : s + 1, d = O(L(e.getAttribute("row"), h), 1, Math.max(n || h, h)), m = t === "hub" ? Math.ceil(o / 2) : O(s + 1, 1, o), c = O(L(e.getAttribute("column"), m), 1, o), f = t === "hub" ? r.hubSize : r.nodeSize, g = P(e.getAttribute("size"), f);
+    return {
+      el: e,
+      nodeId: p,
+      kind: t,
+      column: c,
+      row: d,
+      sizePx: g,
+      centerX: 0,
+      centerY: 0,
+      radiusPx: g / 2
+    };
+  }
+  _nodeIdForElement(e, t, s) {
+    const o = e.getAttribute("node-id") || e.id;
+    if (o)
+      return o;
+    const n = `${t}-${s + 1}`;
+    return e.setAttribute("node-id", n), e.setAttribute("data-ui-animated-beam-node-id-owned", ""), n;
+  }
+  _syncConnections() {
+    const e = this._motionPreset(), t = this._connectionsFromSlot(), s = new Set(t);
+    for (const i of this._connections)
+      s.has(i.el) || ke(i.el);
+    const o = this._tone(), n = [], r = /* @__PURE__ */ new Map();
+    t.forEach((i, p) => {
+      i.getAttribute("slot") !== "connections" && i.setAttribute("slot", "connections"), i.hasAttribute("data-ui-animated-beam-connection") || i.setAttribute("data-ui-animated-beam-connection", ""), i.hasAttribute("data-ui-animated-beam-managed") || i.setAttribute("data-ui-animated-beam-managed", "");
+      const h = i.getAttribute("from"), d = i.getAttribute("to");
+      if (!h || !d)
+        return;
+      const m = Ce(i.getAttribute("tone")), c = F(i.getAttribute("duration"), this._durationMs()), f = i.getAttribute("delay"), g = r.get(h) || 0;
+      r.set(h, g + 1), n.push({
+        el: i,
+        from: h,
+        to: d,
+        index: p,
+        curve: this._curveForConnection(i),
+        reverse: this._directionForConnection(i) === "reverse",
+        tone: m,
+        durationMs: c * e.durationScale,
+        hasExplicitDelay: f != null && f.trim() !== "",
+        localDelayMs: F(f, 0),
+        delayMs: 0,
+        siblingIndex: g,
+        beamFactor: _(ae(i.getAttribute("beam-factor"), this._beamFactor(e)), 0.06, 0.48),
+        trailWidthPx: P(i.getAttribute("trail-width"), this._trailWidthPx()),
+        beamWidthPx: P(i.getAttribute("beam-width"), this._beamWidthPx()),
+        colorStart: i.getAttribute("color-start") || E[m || o].start,
+        colorEnd: i.getAttribute("color-end") || E[m || o].end
+      });
+    }), this._connections = n, this.setAttribute("data-connection-count", String(this._connections.length));
+  }
+  _curveForConnection(e) {
+    const t = e.getAttribute("curve");
+    if (t && Y.has(t))
+      return t;
+    const s = this.getAttribute("curve");
+    return s && Y.has(s) ? s : "auto";
+  }
+  _directionForConnection(e) {
+    const t = e.getAttribute("direction");
+    if (t && X.has(t))
+      return t;
+    if (e.hasAttribute("reverse"))
+      return "reverse";
+    const s = this.getAttribute("direction");
+    return s && X.has(s) ? s : this.hasAttribute("reverse") ? "reverse" : "forward";
+  }
+  _layoutNodes() {
+    if (!this._canvasEl || !this._svgEl)
+      return;
+    const e = this._layoutMetrics();
+    this._lastLayoutMetrics = e;
+    const t = this._resolvedRowCount(), s = e.columns > 1 ? (e.width - e.padding * 2 - e.columnGap * (e.columns - 1)) / e.columns : e.width - e.padding * 2, o = t > 1 ? (e.height - e.padding * 2 - e.rowGap * (t - 1)) / t : e.height - e.padding * 2;
+    for (const n of this._nodes) {
+      const r = n.sizePx * e.scale, i = e.padding + s * (n.column - 0.5) + e.columnGap * (n.column - 1), p = e.padding + o * (n.row - 0.5) + e.rowGap * (n.row - 1);
+      n.centerX = i, n.centerY = p, n.radiusPx = r / 2, n.el.style.left = `${i}px`, n.el.style.top = `${p}px`, n.el.style.inlineSize = `${r}px`, n.el.style.blockSize = `${r}px`, n.el.style.zIndex = n.kind === "hub" ? "2" : "1", n.el.style.setProperty("--ui-animated-beam-render-size", `${r}px`);
+    }
+    this._svgEl.setAttribute("viewBox", `0 0 ${e.width} ${e.height}`), this._canvasEl.style.minHeight = `${e.height}px`, this.setAttribute("data-row-count", String(t)), this.setAttribute("data-column-count", String(e.columns));
+  }
+  _renderConnections() {
+    if (!this._defsEl || !this._pathsEl || !this._animationStyleEl)
+      return;
+    const e = this._lastLayoutMetrics || this._layoutMetrics(), t = _(e.scale, 0.72, 1), s = this._nodeEffect(), o = this._motionPreset(), n = new Map(this._nodes.map((y) => [y.nodeId, y])), r = [], i = [], p = [];
+    this._connections.forEach((y) => {
+      const u = n.get(y.from), w = n.get(y.to);
+      if (!u || !w)
+        return;
+      const x = we(u, w, y.curve);
+      r.push({
+        connection: y,
+        geometry: x,
+        travelDistance: x.length
+      });
+    });
+    const h = Se(r, this._delayMs(), this._staggerMs()), d = Math.max(
+      1,
+      ...r.map((y) => (h.get(y.connection) ?? this._delayMs()) + y.connection.durationMs)
+    ), m = s === "none" ? 0 : J(d), c = this._repeat() ? "infinite" : "1", f = [], g = /* @__PURE__ */ new Map();
+    r.forEach((y) => {
+      const w = (h.get(y.connection) ?? this._delayMs()) + y.connection.durationMs, x = ce(y.connection);
+      g.set(x, Math.max(g.get(x) ?? 0, w));
+    });
+    const $ = Math.max(
+      d,
+      ...Array.from(g.values(), (y) => y + m)
+    );
+    r.forEach((y) => {
+      const { connection: u, geometry: w, travelDistance: x } = y, z = u.reverse ? $e(w) : w, k = `${this._uid}-gradient-${u.index}`, A = Math.max(1, u.trailWidthPx * t), M = Math.max(1.5, u.beamWidthPx * t), C = A.toFixed(2), T = M.toFixed(2), R = Math.max(M * 2, M + 4 * t), H = R.toFixed(2), N = z.start, G = z.end, I = 0, U = _(x * u.beamFactor, M * 6, x * 0.72);
+      u.delayMs = h.get(u) ?? this._delayMs();
+      const V = `${this._uid}-glow-${u.index}`, Q = `${this._uid}-core-${u.index}`;
+      f.push(
+        Z(
+          V,
+          $,
+          u.delayMs,
+          u.durationMs,
+          "var(--ui-animated-beam-glow-opacity)",
+          o.pattern,
+          x,
+          R,
+          R * 1.18,
+          U
+        )
+      ), f.push(
+        Z(
+          Q,
+          $,
+          u.delayMs,
+          u.durationMs,
+          "var(--ui-animated-beam-core-opacity)",
+          o.pattern,
+          x,
+          M,
+          M * 1.22,
+          U
+        )
+      ), i.push(`
+        <linearGradient id="${k}" gradientUnits="userSpaceOnUse" x1="${N.x}" y1="${N.y}" x2="${G.x}" y2="${G.y}">
+          <stop offset="0%" stop-color="${B(u.colorStart || D)}"></stop>
+          <stop offset="100%" stop-color="${B(u.colorEnd || q)}"></stop>
+        </linearGradient>
+      `), p.push(`
+        <g
+          class="connection"
+          part="connection"
+          data-from="${B(u.from)}"
+          data-to="${B(u.to)}"
+          style="
+            --ui-animated-beam-travel-distance:${x};
+            --ui-animated-beam-connection-duration:${u.durationMs}ms;
+            --ui-animated-beam-connection-delay:${u.delayMs}ms;
+            --ui-animated-beam-cycle-duration:${$}ms;
+            --ui-animated-beam-iteration-count:${c};
+            --ui-animated-beam-progress-offset:${I};
+          "
+        >
+          <path
+            class="trail"
+            part="trail"
+            d="${w.d}"
+            stroke-width="${C}"
+          ></path>
+          <path
+            class="beam-glow"
+            part="beam beam-glow"
+            d="${z.d}"
+            stroke="url(#${k})"
+            stroke-width="${H}"
+            style="animation-name:${V};"
+          ></path>
+          <path
+            class="beam-core"
+            part="beam beam-core"
+            d="${z.d}"
+            stroke="url(#${k})"
+            stroke-width="${T}"
+            style="animation-name:${Q};"
+          ></path>
+        </g>
+      `);
+    }), this._applyNodeEffectStyles(s, g, $, c, f), this._defsEl.innerHTML = i.join(""), this._pathsEl.innerHTML = p.join(""), this._animationStyleEl.textContent = f.join(`
+`), this.setAttribute("data-path-visible", this._pathVisible() ? "true" : "false");
+  }
+  _applyNodeEffectStyles(e, t, s, o, n) {
+    const r = J(s);
+    this._nodes.forEach((i, p) => {
+      var m;
+      const h = t.get(i.nodeId);
+      if (e === "none" || h == null) {
+        (m = this._nodeEffectAnimations.get(i.el)) == null || m.cancel(), this._nodeEffectAnimations.delete(i.el), be(i.el);
+        return;
+      }
+      const d = `${this._uid}-node-effect-${p}`;
+      n.push(Ae(d, s, h, r, e)), i.el.style.setProperty("--ui-animated-beam-node-effect-name", d), i.el.style.setProperty("--ui-animated-beam-node-effect-cycle", `${s}ms`), i.el.style.setProperty("--ui-animated-beam-node-effect-iterations", o), this._startNodeEffectAnimation(i.el, e, s, h, r, o);
+    });
+  }
+  _syncState() {
+    const e = this.hasAttribute("paused") || this._prefersReducedMotion();
+    this.setAttribute("data-state", e ? "paused" : "running"), this.setAttribute("data-reduced-motion", this._prefersReducedMotion() ? "true" : "false"), this.setAttribute("data-path-visible", this._pathVisible() ? "true" : "false"), this._syncNodeEffectAnimationState(e);
+  }
+  _startNodeEffectAnimation(e, t, s, o, n, r) {
+    var f;
+    if (typeof e.animate != "function" || this._prefersReducedMotion() || t === "none")
+      return;
+    (f = this._nodeEffectAnimations.get(e)) == null || f.cancel();
+    const i = Math.max(s, 1), p = _(o / i, 0, 1), h = _((o + n * 0.35) / i, p, 1), d = _((o + n * 0.72) / i, h, 1), m = _((o + n) / i, d, 1), c = e.animate(Me(t, p, h, d, m), {
+      duration: s,
+      iterations: r === "infinite" ? 1 / 0 : 1,
+      fill: "both",
+      easing: "linear",
+      delay: 0
+    });
+    (this.hasAttribute("paused") || this._prefersReducedMotion()) && c.pause(), this._nodeEffectAnimations.set(e, c);
+  }
+  _syncNodeEffectAnimationState(e) {
+    this._nodeEffectAnimations.forEach((t) => {
+      e ? t.pause() : t.play();
+    });
+  }
+  _clearNodeEffectAnimations() {
+    this._nodeEffectAnimations.forEach((e) => e.cancel()), this._nodeEffectAnimations.clear();
+  }
+  _layoutMetrics() {
+    var C;
+    const e = this._sizePreset(), t = this._columns(), s = this._resolvedRowCount(), o = this._paddingPx(e), n = this._columnGapPx(e), r = this._rowGapPx(e), i = this._nodeSizePx(e), p = this._hubSizePx(e), h = this._minHeightPx(e), d = Math.max(i, Math.round(p * 0.86)), m = o * 2 + t * d + Math.max(0, t - 1) * n, c = (C = this._canvasEl) == null ? void 0 : C.getBoundingClientRect(), f = (c == null ? void 0 : c.width) || this.clientWidth || 0, g = this._autoFit() && f > 0 && m > 0 ? _(f / m, 0.2, 1) : 1, $ = o * g, y = n * g, u = r * g, w = i * g, x = p * g, z = h * g, k = Math.max(
+      z,
+      $ * 2 + s * Math.max(w, Math.round(x * 0.86)) + Math.max(0, s - 1) * u
+    ), A = this._autoFit() && f > 0 ? f : Math.max(f, m), M = Math.max((c == null ? void 0 : c.height) || this.clientHeight || 0, k);
+    return {
+      width: A,
+      height: M,
+      scale: g,
+      padding: $,
+      columns: t,
+      rows: s,
+      columnGap: y,
+      rowGap: u,
+      nodeSize: w,
+      hubSize: x
+    };
+  }
+  _resolvedRowCount() {
+    const e = this._declaredRows(), t = this._nodes.reduce((s, o) => Math.max(s, o.row), 1);
+    return Math.max(1, e || t);
+  }
+  _declaredRows() {
+    const e = L(this.getAttribute("rows"), NaN);
+    return Number.isFinite(e) ? O(e, 1, 12) : null;
+  }
+  _columns() {
+    return O(L(this.getAttribute("columns"), me), 1, 6);
+  }
+  _paddingPx(e) {
+    return P(this.getAttribute("padding"), e.padding);
+  }
+  _columnGapPx(e) {
+    return P(this.getAttribute("column-gap"), e.columnGap);
+  }
+  _rowGapPx(e) {
+    return P(this.getAttribute("row-gap"), e.rowGap);
+  }
+  _nodeSizePx(e) {
+    return P(this.getAttribute("node-size"), e.nodeSize);
+  }
+  _hubSizePx(e) {
+    return P(this.getAttribute("hub-size"), e.hubSize);
+  }
+  _minHeightPx(e) {
+    return P(this.getAttribute("min-height"), e.minHeight);
+  }
+  _requiredWidthPx(e) {
+    const t = this._columns(), s = this._paddingPx(e), o = this._columnGapPx(e), n = this._nodeSizePx(e), r = this._hubSizePx(e), i = Math.max(n, Math.round(r * 0.86));
+    return s * 2 + t * i + Math.max(0, t - 1) * o;
+  }
+  _autoFit() {
+    const e = this.getAttribute("auto-fit");
+    return e == null ? !1 : W(e, !0);
+  }
+  _trailWidthPx() {
+    return P(this.getAttribute("trail-width"), se);
+  }
+  _beamWidthPx() {
+    return P(this.getAttribute("beam-width"), re);
+  }
+  _durationMs() {
+    return F(this.getAttribute("duration"), ie);
+  }
+  _delayMs() {
+    return F(this.getAttribute("delay"), ne);
+  }
+  _staggerMs() {
+    return F(this.getAttribute("stagger"), oe);
+  }
+  _beamFactor(e) {
+    return _(ae(this.getAttribute("beam-factor"), e.beamFactor), 0.06, 0.48);
+  }
+  _sizePreset() {
+    const e = this.getAttribute("size");
+    return e === "xxs" || e === "0" ? b.xxs : e === "xs" ? b.xs : e === "sm" || e === "1" ? b.sm : e === "lg" || e === "3" ? b.lg : b.md;
+  }
+  _motionPreset() {
+    const e = this.getAttribute("animation");
+    return e && xe.has(e) ? v[e] : v.smooth;
+  }
+  _tone() {
+    const e = this.getAttribute("tone");
+    return e && ue.has(e) ? e : "brand";
+  }
+  _pathVisible() {
+    const e = this.getAttribute("path");
+    return e == null ? !0 : W(e, !0);
+  }
+  _repeat() {
+    const e = this.getAttribute("repeat");
+    return e == null ? !0 : W(e, !0);
+  }
+  _nodeEffect() {
+    const e = this.getAttribute("node-effect");
+    return e && ye.has(e) ? e : "none";
+  }
+}
+function we(a, e, t) {
+  const s = { x: a.centerX, y: a.centerY }, o = { x: e.centerX, y: e.centerY }, n = Math.atan2(o.y - s.y, o.x - s.x), r = te(s, n, Math.max(0, a.radiusPx - j)), i = te(o, n + Math.PI, Math.max(0, e.radiusPx - j)), p = i.x - r.x, h = i.y - r.y, d = Math.abs(p), m = Math.abs(h);
+  if (t === "straight" || t === "auto" && m < Math.max(8, Math.min(a.radiusPx, e.radiusPx) * 0.28))
+    return {
+      kind: "line",
+      start: r,
+      end: i,
+      d: `M ${l(r.x)} ${l(r.y)} L ${l(i.x)} ${l(i.y)}`,
+      length: he(r, i)
+    };
+  const c = t === "arc" ? 0.56 : t === "soft" ? 0.34 : m > d * 0.45 ? 0.48 : 0.4;
+  if (d >= m) {
+    const y = Math.max(d * c, 44), u = { x: r.x + Math.sign(p || 1) * y, y: r.y }, w = { x: i.x - Math.sign(p || 1) * y, y: i.y };
+    return {
+      kind: "cubic",
+      start: r,
+      end: i,
+      c1: u,
+      c2: w,
+      d: `M ${l(r.x)} ${l(r.y)} C ${l(u.x)} ${l(u.y)} ${l(w.x)} ${l(w.y)} ${l(i.x)} ${l(i.y)}`,
+      length: ee(r, u, w, i)
+    };
+  }
+  const f = Math.max(m * c, 44), g = { x: r.x, y: r.y + Math.sign(h || 1) * f }, $ = { x: i.x, y: i.y - Math.sign(h || 1) * f };
+  return {
+    kind: "cubic",
+    start: r,
+    end: i,
+    c1: g,
+    c2: $,
+    d: `M ${l(r.x)} ${l(r.y)} C ${l(g.x)} ${l(g.y)} ${l($.x)} ${l($.y)} ${l(i.x)} ${l(i.y)}`,
+    length: ee(r, g, $, i)
+  };
+}
+function $e(a) {
+  if (a.kind === "line")
+    return {
+      kind: "line",
+      start: a.end,
+      end: a.start,
+      d: `M ${l(a.end.x)} ${l(a.end.y)} L ${l(a.start.x)} ${l(a.start.y)}`,
+      length: a.length
+    };
+  const e = a.c2, t = a.c1;
+  return {
+    kind: "cubic",
+    start: a.end,
+    end: a.start,
+    c1: e,
+    c2: t,
+    d: `M ${l(a.end.x)} ${l(a.end.y)} C ${l(e.x)} ${l(e.y)} ${l(t.x)} ${l(t.y)} ${l(a.start.x)} ${l(a.start.y)}`,
+    length: a.length
+  };
+}
+function Se(a, e, t) {
+  const s = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set();
+  for (const d of a) {
+    const m = ce(d.connection), c = s.get(m);
+    c ? c.push(d) : s.set(m, [d]);
+  }
+  const p = (d) => {
+    const m = o.get(d);
+    if (m != null)
+      return m;
+    if (r.has(d))
+      return e;
+    r.add(d);
+    const c = s.get(d);
+    let f = e;
+    return c != null && c.length && (f = c.reduce((g, $) => {
+      const y = h($.connection);
+      return Math.max(g, y + $.connection.durationMs);
+    }, e)), r.delete(d), o.set(d, f), f;
+  }, h = (d) => {
+    const m = n.get(d);
+    if (m != null)
+      return m;
+    if (i.has(d))
+      return e;
+    i.add(d);
+    const c = p(ze(d)), f = d.hasExplicitDelay ? 0 : d.siblingIndex * t, g = c + f + d.localDelayMs;
+    return i.delete(d), n.set(d, g), g;
+  };
+  for (const d of a)
+    n.set(d.connection, h(d.connection));
+  return n;
+}
+function Z(a, e, t, s, o, n, r, i, p, h) {
+  const d = Math.max(e, 1), m = _(t / d * 100, 0, 100), c = _((t + s) / d * 100, m, 100), f = _(m + Math.max(s / d * 100 * 0.02, 0.01), m, c), g = S(m), $ = S(f), y = S(c), u = l(i), w = l(p), x = l(r), z = l(h);
+  if (n === "pulse") {
+    const k = _(m + (c - m) * 0.42, f, c), A = _(m + (c - m) * 0.82, k, c), M = S(k), C = S(A);
+    return `
+      @keyframes ${a} {
+        0%, ${g}% {
+          opacity: 0;
+          stroke-dasharray: ${z} ${x};
+          stroke-dashoffset: 0;
+          stroke-width: ${u};
+        }
+        ${$}% {
+          opacity: calc(${o} * 0.72);
+          stroke-dasharray: ${z} ${x};
+          stroke-dashoffset: 0;
+          stroke-width: ${u};
+        }
+        ${M}% {
+          opacity: ${o};
+          stroke-dasharray: ${z} ${x};
+          stroke-dashoffset: ${l(-r * 0.44)};
+          stroke-width: ${w};
+        }
+        ${C}% {
+          opacity: calc(${o} * 0.68);
+          stroke-dasharray: ${z} ${x};
+          stroke-dashoffset: ${l(-r * 0.84)};
+          stroke-width: ${u};
+        }
+        ${y}%,
+        100% {
+          opacity: 0;
+          stroke-dasharray: ${z} ${x};
+          stroke-dashoffset: ${l(-r)};
+          stroke-width: ${u};
+        }
+      }
+    `;
+  }
+  if (n === "heartbeat") {
+    const k = _(h * 0.72, i * 4.5, r * 0.42), A = l(k), M = _(m + (c - m) * 0.24, f, c), C = _(m + (c - m) * 0.34, M, c), T = _(m + (c - m) * 0.48, C, c), R = _(m + (c - m) * 0.82, T, c), H = S(M), N = S(C), G = S(T), I = S(R);
+    return `
+      @keyframes ${a} {
+        0%, ${g}% {
+          opacity: 0;
+          stroke-dasharray: ${A} ${x};
+          stroke-dashoffset: 0;
+          stroke-width: ${u};
+        }
+        ${$}% {
+          opacity: calc(${o} * 0.7);
+          stroke-dasharray: ${A} ${x};
+          stroke-dashoffset: 0;
+          stroke-width: ${u};
+        }
+        ${H}% {
+          opacity: calc(${o} * 0.88);
+          stroke-dasharray: ${A} ${x};
+          stroke-dashoffset: ${l(-r * 0.24)};
+          stroke-width: ${l(i * 1.08)};
+        }
+        ${N}% {
+          opacity: calc(${o} * 0.5);
+          stroke-dasharray: ${A} ${x};
+          stroke-dashoffset: ${l(-r * 0.34)};
+          stroke-width: ${u};
+        }
+        ${G}% {
+          opacity: ${o};
+          stroke-dasharray: ${A} ${x};
+          stroke-dashoffset: ${l(-r * 0.5)};
+          stroke-width: ${w};
+        }
+        ${I}% {
+          opacity: calc(${o} * 0.7);
+          stroke-dasharray: ${A} ${x};
+          stroke-dashoffset: ${l(-r * 0.84)};
+          stroke-width: ${u};
+        }
+        ${y}%,
+        100% {
+          opacity: 0;
+          stroke-dasharray: ${A} ${x};
+          stroke-dashoffset: ${l(-r)};
+          stroke-width: ${u};
+        }
+      }
+    `;
+  }
+  return `
+    @keyframes ${a} {
+      0%, ${g}% {
+        opacity: 0;
+        stroke-dasharray: 0 ${x};
+        stroke-width: ${u};
+      }
+      ${$}% {
+        opacity: ${o};
+        stroke-dasharray: 0 ${x};
+        stroke-width: ${u};
+      }
+      ${y}%, 100% {
+        opacity: ${o};
+        stroke-dasharray: ${x} 0;
+        stroke-width: ${u};
+      }
+    }
+  `;
+}
+function ze(a) {
+  return a.reverse ? a.to : a.from;
+}
+function ce(a) {
+  return a.reverse ? a.from : a.to;
+}
+function J(a) {
+  return _(a * 0.16, 360, 900);
+}
+function Ae(a, e, t, s, o) {
+  const n = Math.max(e, 1), r = _(t / n * 100, 0, 100), i = _((t + s * 0.35) / n * 100, r, 100), p = _((t + s * 0.72) / n * 100, i, 100), h = _((t + s) / n * 100, p, 100), d = S(r), m = S(i), c = S(p), f = S(h);
+  if (o === "shake") {
+    const u = _(r + (i - r) * 0.3, r, i), w = _(r + (i - r) * 0.65, u, i), x = S(u), z = S(w);
+    return `
+      @keyframes ${a} {
+        0%, ${d}%, 100% {
+          transform: translate(-50%, -50%) scale(1);
+          box-shadow: var(--ui-animated-beam-node-base-shadow);
+          border-color: color-mix(in srgb, var(--ui-animated-beam-accent) 12%, rgba(15, 23, 42, 0.1));
+        }
+        ${x}% {
+          transform: translate(calc(-50% - 2px), calc(-50% + 1px)) scale(1.02) rotate(-2deg);
+          box-shadow:
+            var(--ui-animated-beam-node-base-shadow),
+            0 0 0 5px var(--ui-animated-beam-node-effect-ring);
+          border-color: color-mix(in srgb, var(--ui-animated-beam-accent-end) 30%, transparent);
+        }
+        ${z}% {
+          transform: translate(calc(-50% + 2px), calc(-50% - 1px)) scale(1.03) rotate(2deg);
+        }
+        ${m}% {
+          transform: translate(-50%, -50%) scale(1.03);
+          box-shadow:
+            var(--ui-animated-beam-node-base-shadow),
+            0 0 0 6px var(--ui-animated-beam-node-effect-ring),
+            0 0 24px var(--ui-animated-beam-node-effect-glow);
+        }
+        ${c}%,
+        ${f}% {
+          transform: translate(-50%, -50%) scale(1);
+          box-shadow: var(--ui-animated-beam-node-base-shadow);
+          border-color: color-mix(in srgb, var(--ui-animated-beam-accent) 12%, rgba(15, 23, 42, 0.1));
+        }
+      }
+    `;
+  }
+  return `
+    @keyframes ${a} {
+      0%, ${d}%, 100% {
+        transform: translate(-50%, -50%) scale(1);
+        box-shadow: var(--ui-animated-beam-node-base-shadow);
+        border-color: color-mix(in srgb, var(--ui-animated-beam-accent) 12%, rgba(15, 23, 42, 0.1));
+      }
+      ${m}% {
+        transform: ${o === "pulse" ? "translate(-50%, -50%) scale(1.08)" : o === "ring" ? "translate(-50%, -50%) scale(1.04)" : "translate(-50%, -50%) scale(1.03)"};
+        box-shadow: ${o === "ring" ? "var(--ui-animated-beam-node-base-shadow), 0 0 0 7px var(--ui-animated-beam-node-effect-ring)" : o === "pulse" ? "var(--ui-animated-beam-node-base-shadow), 0 0 0 6px var(--ui-animated-beam-node-effect-ring), 0 0 20px var(--ui-animated-beam-node-effect-glow)" : "var(--ui-animated-beam-node-base-shadow), 0 0 0 5px var(--ui-animated-beam-node-effect-ring), 0 0 28px var(--ui-animated-beam-node-effect-glow)"};
+        border-color: ${o === "ring" ? "color-mix(in srgb, var(--ui-animated-beam-accent-end) 34%, transparent)" : "color-mix(in srgb, var(--ui-animated-beam-accent) 28%, transparent)"};
+      }
+      ${c}%,
+      ${f}% {
+        transform: translate(-50%, -50%) scale(1);
+        box-shadow: var(--ui-animated-beam-node-base-shadow);
+        border-color: color-mix(in srgb, var(--ui-animated-beam-accent) 12%, rgba(15, 23, 42, 0.1));
+      }
+    }
+  `;
+}
+function Me(a, e = 0, t = 0.1, s = 0.16, o = 0.2) {
+  const n = {
+    offset: 0,
+    transform: "translate(-50%, -50%) scale(1)",
+    boxShadow: "var(--ui-animated-beam-node-base-shadow)",
+    borderColor: "color-mix(in srgb, var(--ui-animated-beam-accent) 12%, rgba(15, 23, 42, 0.1))"
+  };
+  if (a === "shake") {
+    const h = e + (t - e) * 0.3, d = e + (t - e) * 0.65;
+    return [
+      { ...n, offset: 0 },
+      { ...n, offset: e },
+      {
+        offset: h,
+        transform: "translate(calc(-50% - 2px), calc(-50% + 1px)) scale(1.02) rotate(-2deg)",
+        boxShadow: "var(--ui-animated-beam-node-base-shadow), 0 0 0 5px var(--ui-animated-beam-node-effect-ring)",
+        borderColor: "color-mix(in srgb, var(--ui-animated-beam-accent-end) 30%, transparent)"
+      },
+      {
+        offset: d,
+        transform: "translate(calc(-50% + 2px), calc(-50% - 1px)) scale(1.03) rotate(2deg)",
+        boxShadow: "var(--ui-animated-beam-node-base-shadow), 0 0 0 5px var(--ui-animated-beam-node-effect-ring)",
+        borderColor: "color-mix(in srgb, var(--ui-animated-beam-accent-end) 30%, transparent)"
+      },
+      {
+        offset: t,
+        transform: "translate(-50%, -50%) scale(1.03)",
+        boxShadow: "var(--ui-animated-beam-node-base-shadow), 0 0 0 6px var(--ui-animated-beam-node-effect-ring), 0 0 24px var(--ui-animated-beam-node-effect-glow)",
+        borderColor: "color-mix(in srgb, var(--ui-animated-beam-accent-end) 30%, transparent)"
+      },
+      { ...n, offset: s },
+      { ...n, offset: o },
+      { ...n, offset: 1 }
+    ];
+  }
+  const r = a === "pulse" ? "translate(-50%, -50%) scale(1.08)" : a === "ring" ? "translate(-50%, -50%) scale(1.04)" : "translate(-50%, -50%) scale(1.03)", i = a === "ring" ? "var(--ui-animated-beam-node-base-shadow), 0 0 0 7px var(--ui-animated-beam-node-effect-ring)" : a === "pulse" ? "var(--ui-animated-beam-node-base-shadow), 0 0 0 6px var(--ui-animated-beam-node-effect-ring), 0 0 20px var(--ui-animated-beam-node-effect-glow)" : "var(--ui-animated-beam-node-base-shadow), 0 0 0 5px var(--ui-animated-beam-node-effect-ring), 0 0 28px var(--ui-animated-beam-node-effect-glow)", p = a === "ring" ? "color-mix(in srgb, var(--ui-animated-beam-accent-end) 34%, transparent)" : "color-mix(in srgb, var(--ui-animated-beam-accent) 28%, transparent)";
+  return [
+    { ...n, offset: 0 },
+    { ...n, offset: e },
+    {
+      offset: t,
+      transform: r,
+      boxShadow: i,
+      borderColor: p
+    },
+    { ...n, offset: s },
+    { ...n, offset: o },
+    { ...n, offset: 1 }
+  ];
+}
+function ee(a, e, t, s) {
+  let o = 0, n = a;
+  const r = 18;
+  for (let i = 1; i <= r; i += 1) {
+    const p = i / r, h = Ee(a, e, t, s, p);
+    o += he(n, h), n = h;
+  }
+  return o;
+}
+function Ee(a, e, t, s, o) {
+  const n = 1 - o, r = n * n * n * a.x + 3 * n * n * o * e.x + 3 * n * o * o * t.x + o * o * o * s.x, i = n * n * n * a.y + 3 * n * n * o * e.y + 3 * n * o * o * t.y + o * o * o * s.y;
+  return { x: r, y: i };
+}
+function te(a, e, t) {
+  return {
+    x: a.x + Math.cos(e) * t,
+    y: a.y + Math.sin(e) * t
+  };
+}
+function Pe(a) {
+  a.removeAttribute("data-ui-animated-beam-managed"), a.removeAttribute("data-ui-animated-beam-node"), a.removeAttribute("data-ui-animated-beam-hub"), a.hasAttribute("data-ui-animated-beam-node-id-owned") && (a.removeAttribute("node-id"), a.removeAttribute("data-ui-animated-beam-node-id-owned")), a.style.removeProperty("left"), a.style.removeProperty("top"), a.style.removeProperty("inline-size"), a.style.removeProperty("block-size"), a.style.removeProperty("z-index"), a.style.removeProperty("--ui-animated-beam-render-size"), be(a);
+}
+function ke(a) {
+  a.removeAttribute("data-ui-animated-beam-managed"), a.removeAttribute("data-ui-animated-beam-connection");
+}
+function be(a) {
+  a.style.removeProperty("--ui-animated-beam-node-effect-name"), a.style.removeProperty("--ui-animated-beam-node-effect-cycle"), a.style.removeProperty("--ui-animated-beam-node-effect-iterations");
+}
+function Ce(a) {
+  return a && ue.has(a) ? a : null;
+}
+function le(a) {
+  return a ? /^-?\d+(\.\d+)?$/.test(a.trim()) ? `${a.trim()}px` : a : null;
+}
+function P(a, e) {
+  const t = le(a);
+  if (!t)
+    return e;
+  const s = t.match(/-?\d+(\.\d+)?/);
+  return s ? Number.parseFloat(s[0]) : e;
+}
+function F(a, e) {
+  if (!a)
+    return e;
+  const t = a.trim();
+  return t ? /^-?\d+(\.\d+)?$/.test(t) ? Number.parseFloat(t) : t.endsWith("ms") ? Number.parseFloat(t.slice(0, -2)) || e : t.endsWith("s") ? (Number.parseFloat(t.slice(0, -1)) || e / 1e3) * 1e3 : e : e;
+}
+function W(a, e) {
+  if (a == null)
+    return e;
+  const t = a.trim().toLowerCase();
+  return t ? t === "false" || t === "0" || t === "off" || t === "no" ? !1 : t === "true" || t === "1" || t === "on" || t === "yes" ? !0 : e : !0;
+}
+function L(a, e) {
+  if (a == null)
+    return e;
+  const t = Number.parseInt(a, 10);
+  return Number.isFinite(t) ? t : e;
+}
+function ae(a, e) {
+  if (a == null)
+    return e;
+  const t = Number.parseFloat(a);
+  return Number.isFinite(t) ? t : e;
+}
+function O(a, e, t) {
+  return Math.min(t, Math.max(e, Math.round(a)));
+}
+function _(a, e, t) {
+  return Math.min(t, Math.max(e, a));
+}
+function he(a, e) {
+  return Math.hypot(e.x - a.x, e.y - a.y);
+}
+function l(a) {
+  return a.toFixed(2);
+}
+function S(a) {
+  return a.toFixed(4).replace(/\.?0+$/, "");
+}
+function B(a) {
+  return a.split("&").join("&amp;").split('"').join("&quot;").split("<").join("&lt;").split(">").join("&gt;");
+}
+typeof customElements < "u" && !customElements.get("ui-animated-beam") && customElements.define("ui-animated-beam", ve);
+export {
+  ve as UIAnimatedBeam
+};