@editora/ui-core 0.1.8 → 0.1.10

package/dist/animated-beam.cjs.js

@@ -0,0 +1,720 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const fe=require("./ElementBase-1b301e7f.js"),ie=3200,ne=0,oe=0,se=3,re=4,de=.18,me=3,D="#8b5cf6",q="#f59e0b",ge="rgba(148, 163, 184, 0.34)",Q=2,xe=new Set(["none","sm","md","lg","full"]),ue=new Set(["brand","neutral","info","success","warning","danger"]),ye=new Set(["calm","smooth","snappy","surge","pulse","heartbeat"]),Y=new Set(["auto","straight","soft","arc"]),X=new Set(["forward","reverse"]),_e=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:.26,glowBlur:9,beamFactor:.15,pattern:"progress"},smooth:{durationScale:1,glowOpacity:.34,glowBlur:11,beamFactor:de,pattern:"progress"},snappy:{durationScale:.82,glowOpacity:.38,glowBlur:10,beamFactor:.2,pattern:"progress"},surge:{durationScale:.68,glowOpacity:.44,glowBlur:13,beamFactor:.24,pattern:"progress"},pulse:{durationScale:.92,glowOpacity:.42,glowBlur:14,beamFactor:.22,pattern:"pulse"},heartbeat:{durationScale:.86,glowOpacity:.48,glowBlur:15,beamFactor:.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"}},ve=`
+  :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: ${ge};
+    --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 ce extends fe.ElementBase{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=new Map,this._lastLayoutMetrics=null,this._resizeObserver=null,this._mutationObserver=null,this._mediaQuery=null,this._observedResizeElements=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>${ve}</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=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&&!xe.has(s.trim())){const i=he(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=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=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)),.06,.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-.5)+e.columnGap*(n.column-1),p=e.padding+o*(n.row-.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,.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=new Map;r.forEach(y=>{const w=(h.get(y.connection)??this._delayMs())+y.connection.durationMs,x=be(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*.72);u.delayMs=h.get(u)??this._delayMs();const V=`${this._uid}-glow-${u.index}`,j=`${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(j,$,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:${j};"
+          ></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),le(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*.35)/i,p,1),d=_((o+n*.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*.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,.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*.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*.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),.06,.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&&ye.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&&_e.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-Q)),i=te(o,n+Math.PI,Math.max(0,e.radiusPx-Q)),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)*.28))return{kind:"line",start:r,end:i,d:`M ${l(r.x)} ${l(r.y)} L ${l(i.x)} ${l(i.y)}`,length:pe(r,i)};const c=t==="arc"?.56:t==="soft"?.34:m>d*.45?.48:.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=new Map,o=new Map,n=new Map,r=new Set,i=new Set;for(const d of a){const m=be(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*.02,.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)*.42,f,c),A=_(m+(c-m)*.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*.44)};
+          stroke-width: ${w};
+        }
+        ${C}% {
+          opacity: calc(${o} * 0.68);
+          stroke-dasharray: ${z} ${x};
+          stroke-dashoffset: ${l(-r*.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*.72,i*4.5,r*.42),A=l(k),M=_(m+(c-m)*.24,f,c),C=_(m+(c-m)*.34,M,c),T=_(m+(c-m)*.48,C,c),R=_(m+(c-m)*.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*.24)};
+          stroke-width: ${l(i*1.08)};
+        }
+        ${N}% {
+          opacity: calc(${o} * 0.5);
+          stroke-dasharray: ${A} ${x};
+          stroke-dashoffset: ${l(-r*.34)};
+          stroke-width: ${u};
+        }
+        ${G}% {
+          opacity: ${o};
+          stroke-dasharray: ${A} ${x};
+          stroke-dashoffset: ${l(-r*.5)};
+          stroke-width: ${w};
+        }
+        ${I}% {
+          opacity: calc(${o} * 0.7);
+          stroke-dasharray: ${A} ${x};
+          stroke-dashoffset: ${l(-r*.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 be(a){return a.reverse?a.from:a.to}function J(a){return _(a*.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*.35)/n*100,r,100),p=_((t+s*.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)*.3,r,i),w=_(r+(i-r)*.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=.1,s=.16,o=.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)*.3,d=e+(t-e)*.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+=pe(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"),le(a)}function ke(a){a.removeAttribute("data-ui-animated-beam-managed"),a.removeAttribute("data-ui-animated-beam-connection")}function le(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 he(a){return a?/^-?\d+(\.\d+)?$/.test(a.trim())?`${a.trim()}px`:a:null}function P(a,e){const t=he(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 pe(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",ce);exports.UIAnimatedBeam=ce;