@editora/ui-core 0.1.24 → 0.2.0

package/dist/animated-beam.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const ge=require("./ElementBase-DxbvhLJs.js"),ie=3200,ne=0,oe=0,se=3,re=4,de=.18,me=3,D="#8b5cf6",q="#f59e0b",fe="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"],c={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=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const fe=require("./ElementBase-DxbvhLJs.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"]),ve=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"],c={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}},_={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"}},_e=`
   :host {
     --ui-animated-beam-required-width: 0px;
     --ui-animated-beam-duration: ${ie}ms;
@@ -17,7 +17,7 @@
     --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-path-color: ${ge};
     --ui-animated-beam-bg: transparent;
     --ui-animated-beam-color: var(--ui-color-text, #0f172a);
     --ui-animated-beam-border-color:
@@ -25,24 +25,16 @@
     --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-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
     --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-border: 1px solid var(--ui-color-line, rgba(15, 23, 42, 0.14));
+    --ui-animated-beam-node-shadow: none;
     --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-hub-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
+    --ui-animated-beam-hub-border: 1px solid color-mix(in srgb, var(--ui-animated-beam-accent) 40%, var(--ui-color-line, rgba(15, 23, 42, 0.14)));
+    --ui-animated-beam-hub-shadow: none;
+    --ui-animated-beam-glow-opacity: ${_.smooth.glowOpacity};
+    --ui-animated-beam-glow-blur: ${_.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));
@@ -256,40 +248,40 @@
   }
 
   :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};
+    --ui-animated-beam-glow-opacity: ${_.calm.glowOpacity};
+    --ui-animated-beam-glow-blur: ${_.calm.glowBlur}px;
+    --ui-animated-beam-beam-factor: ${_.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};
+    --ui-animated-beam-glow-opacity: ${_.smooth.glowOpacity};
+    --ui-animated-beam-glow-blur: ${_.smooth.glowBlur}px;
+    --ui-animated-beam-beam-factor: ${_.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};
+    --ui-animated-beam-glow-opacity: ${_.snappy.glowOpacity};
+    --ui-animated-beam-glow-blur: ${_.snappy.glowBlur}px;
+    --ui-animated-beam-beam-factor: ${_.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};
+    --ui-animated-beam-glow-opacity: ${_.surge.glowOpacity};
+    --ui-animated-beam-glow-blur: ${_.surge.glowBlur}px;
+    --ui-animated-beam-beam-factor: ${_.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};
+    --ui-animated-beam-glow-opacity: ${_.pulse.glowOpacity};
+    --ui-animated-beam-glow-blur: ${_.pulse.glowBlur}px;
+    --ui-animated-beam-beam-factor: ${_.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};
+    --ui-animated-beam-glow-opacity: ${_.heartbeat.glowOpacity};
+    --ui-animated-beam-glow-blur: ${_.heartbeat.glowBlur}px;
+    --ui-animated-beam-beam-factor: ${_.heartbeat.beamFactor};
   }
 
   .root {
@@ -470,7 +462,7 @@
     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),
+      0 0 0 2px var(--ui-ring-color, var(--ui-animated-beam-focus-ring)),
       var(--ui-animated-beam-node-shadow);
   }
 
@@ -507,8 +499,8 @@
       --ui-animated-beam-path-color: CanvasText;
     }
   }
-`;class ce extends ge.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(){this._clearNodeEffectAnimations(),this._disconnectResizeObserver(),this._disconnectMutationObserver(),this._mediaQuery?.removeEventListener?.("change",this._boundReducedMotionChange),this._mediaQuery?.removeListener?.(this._boundReducedMotionChange),this._mediaQuery=null,super.disconnectedCallback()}attributeChangedCallback(e,t,r){if(!(t===r||!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(){this.setContent(`
-      <style>${ve}</style>
+`;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(){this._clearNodeEffectAnimations(),this._disconnectResizeObserver(),this._disconnectMutationObserver(),this._mediaQuery?.removeEventListener?.("change",this._boundReducedMotionChange),this._mediaQuery?.removeListener?.(this._boundReducedMotionChange),this._mediaQuery=null,super.disconnectedCallback()}attributeChangedCallback(e,t,r){if(!(t===r||!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(){this.setContent(`
+      <style>${_e}</style>
       <style data-ui-animated-beam-animations></style>
       <div class="root" part="root">
         <div class="surface" part="surface">
@@ -525,7 +517,7 @@
           </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"]'),this._nodeSlot?.addEventListener("slotchange",this._boundSlotChange),this._hubSlot?.addEventListener("slotchange",this._boundSlotChange),this._connectionSlot?.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(){typeof window>"u"||typeof window.matchMedia!="function"||this._mediaQuery||(this._mediaQuery=window.matchMedia("(prefers-reduced-motion: reduce)"),this._mediaQuery.addEventListener?.("change",this._boundReducedMotionChange),this._mediaQuery.addListener?.(this._boundReducedMotionChange))}_prefersReducedMotion(){return!!this._mediaQuery?.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(){this._mutationObserver?.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 r=this.getAttribute("radius");if(r&&!xe.has(r.trim())){const i=he(r);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 s=this.getAttribute("trail-color");s?this.style.setProperty("--ui-animated-beam-path-color",s):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(),r=this._declaredRows(),o=this._nodesFromSlot(),n=this._hubsFromSlot(),s=new Set([...o,...n]);for(const p of this._nodes)s.has(p.el)||Pe(p.el);const i=[];o.forEach((p,l)=>{i.push(this._buildNodeRecord(p,"node",l,t,r,e))}),n.forEach((p,l)=>{i.push(this._buildNodeRecord(p,"hub",l,t,r,e))}),this._nodes=i,this.setAttribute("data-node-count",String(o.length)),this.setAttribute("data-hub-count",String(n.length))}_buildNodeRecord(e,t,r,o,n,s){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,r),l=n?Math.max(1,Math.ceil(n/2)):t==="hub"?2:r+1,d=O(L(e.getAttribute("row"),l),1,Math.max(n||l,l)),u=t==="hub"?Math.ceil(o/2):O(r+1,1,o),h=O(L(e.getAttribute("column"),u),1,o),f=t==="hub"?s.hubSize:s.nodeSize,g=P(e.getAttribute("size"),f);return{el:e,nodeId:p,kind:t,column:h,row:d,sizePx:g,centerX:0,centerY:0,radiusPx:g/2}}_nodeIdForElement(e,t,r){const o=e.getAttribute("node-id")||e.id;if(o)return o;const n=`${t}-${r+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(),r=new Set(t);for(const i of this._connections)r.has(i.el)||ke(i.el);const o=this._tone(),n=[],s=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 l=i.getAttribute("from"),d=i.getAttribute("to");if(!l||!d)return;const u=Ce(i.getAttribute("tone")),h=F(i.getAttribute("duration"),this._durationMs()),f=i.getAttribute("delay"),g=s.get(l)||0;s.set(l,g+1),n.push({el:i,from:l,to:d,index:p,curve:this._curveForConnection(i),reverse:this._directionForConnection(i)==="reverse",tone:u,durationMs:h*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[u||o].start,colorEnd:i.getAttribute("color-end")||E[u||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 r=this.getAttribute("curve");return r&&Y.has(r)?r:"auto"}_directionForConnection(e){const t=e.getAttribute("direction");if(t&&X.has(t))return t;if(e.hasAttribute("reverse"))return"reverse";const r=this.getAttribute("direction");return r&&X.has(r)?r:this.hasAttribute("reverse")?"reverse":"forward"}_layoutNodes(){if(!this._canvasEl||!this._svgEl)return;const e=this._layoutMetrics();this._lastLayoutMetrics=e;const t=this._resolvedRowCount(),r=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 s=n.sizePx*e.scale,i=e.padding+r*(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=s/2,n.el.style.left=`${i}px`,n.el.style.top=`${p}px`,n.el.style.inlineSize=`${s}px`,n.el.style.blockSize=`${s}px`,n.el.style.zIndex=n.kind==="hub"?"2":"1",n.el.style.setProperty("--ui-animated-beam-render-size",`${s}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),r=this._nodeEffect(),o=this._motionPreset(),n=new Map(this._nodes.map(y=>[y.nodeId,y])),s=[],i=[],p=[];this._connections.forEach(y=>{const m=n.get(y.from),w=n.get(y.to);if(!m||!w)return;const x=we(m,w,y.curve);s.push({connection:y,geometry:x,travelDistance:x.length})});const l=Se(s,this._delayMs(),this._staggerMs()),d=Math.max(1,...s.map(y=>(l.get(y.connection)??this._delayMs())+y.connection.durationMs)),u=r==="none"?0:J(d),h=this._repeat()?"infinite":"1",f=[],g=new Map;s.forEach(y=>{const w=(l.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+u));s.forEach(y=>{const{connection:m,geometry:w,travelDistance:x}=y,z=m.reverse?$e(w):w,k=`${this._uid}-gradient-${m.index}`,A=Math.max(1,m.trailWidthPx*t),M=Math.max(1.5,m.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*m.beamFactor,M*6,x*.72);m.delayMs=l.get(m)??this._delayMs();const V=`${this._uid}-glow-${m.index}`,j=`${this._uid}-core-${m.index}`;f.push(Z(V,$,m.delayMs,m.durationMs,"var(--ui-animated-beam-glow-opacity)",o.pattern,x,R,R*1.18,U)),f.push(Z(j,$,m.delayMs,m.durationMs,"var(--ui-animated-beam-core-opacity)",o.pattern,x,M,M*1.22,U)),i.push(`
+    `),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"]'),this._nodeSlot?.addEventListener("slotchange",this._boundSlotChange),this._hubSlot?.addEventListener("slotchange",this._boundSlotChange),this._connectionSlot?.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(){typeof window>"u"||typeof window.matchMedia!="function"||this._mediaQuery||(this._mediaQuery=window.matchMedia("(prefers-reduced-motion: reduce)"),this._mediaQuery.addEventListener?.("change",this._boundReducedMotionChange),this._mediaQuery.addListener?.(this._boundReducedMotionChange))}_prefersReducedMotion(){return!!this._mediaQuery?.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(){this._mutationObserver?.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 r=this.getAttribute("radius");if(r&&!xe.has(r.trim())){const i=he(r);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 s=this.getAttribute("trail-color");s?this.style.setProperty("--ui-animated-beam-path-color",s):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(),r=this._declaredRows(),o=this._nodesFromSlot(),n=this._hubsFromSlot(),s=new Set([...o,...n]);for(const p of this._nodes)s.has(p.el)||Pe(p.el);const i=[];o.forEach((p,l)=>{i.push(this._buildNodeRecord(p,"node",l,t,r,e))}),n.forEach((p,l)=>{i.push(this._buildNodeRecord(p,"hub",l,t,r,e))}),this._nodes=i,this.setAttribute("data-node-count",String(o.length)),this.setAttribute("data-hub-count",String(n.length))}_buildNodeRecord(e,t,r,o,n,s){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,r),l=n?Math.max(1,Math.ceil(n/2)):t==="hub"?2:r+1,d=O(L(e.getAttribute("row"),l),1,Math.max(n||l,l)),u=t==="hub"?Math.ceil(o/2):O(r+1,1,o),h=O(L(e.getAttribute("column"),u),1,o),g=t==="hub"?s.hubSize:s.nodeSize,f=P(e.getAttribute("size"),g);return{el:e,nodeId:p,kind:t,column:h,row:d,sizePx:f,centerX:0,centerY:0,radiusPx:f/2}}_nodeIdForElement(e,t,r){const o=e.getAttribute("node-id")||e.id;if(o)return o;const n=`${t}-${r+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(),r=new Set(t);for(const i of this._connections)r.has(i.el)||ke(i.el);const o=this._tone(),n=[],s=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 l=i.getAttribute("from"),d=i.getAttribute("to");if(!l||!d)return;const u=Ce(i.getAttribute("tone")),h=F(i.getAttribute("duration"),this._durationMs()),g=i.getAttribute("delay"),f=s.get(l)||0;s.set(l,f+1),n.push({el:i,from:l,to:d,index:p,curve:this._curveForConnection(i),reverse:this._directionForConnection(i)==="reverse",tone:u,durationMs:h*e.durationScale,hasExplicitDelay:g!=null&&g.trim()!=="",localDelayMs:F(g,0),delayMs:0,siblingIndex:f,beamFactor:v(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[u||o].start,colorEnd:i.getAttribute("color-end")||E[u||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 r=this.getAttribute("curve");return r&&Y.has(r)?r:"auto"}_directionForConnection(e){const t=e.getAttribute("direction");if(t&&X.has(t))return t;if(e.hasAttribute("reverse"))return"reverse";const r=this.getAttribute("direction");return r&&X.has(r)?r:this.hasAttribute("reverse")?"reverse":"forward"}_layoutNodes(){if(!this._canvasEl||!this._svgEl)return;const e=this._layoutMetrics();this._lastLayoutMetrics=e;const t=this._resolvedRowCount(),r=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 s=n.sizePx*e.scale,i=e.padding+r*(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=s/2,n.el.style.left=`${i}px`,n.el.style.top=`${p}px`,n.el.style.inlineSize=`${s}px`,n.el.style.blockSize=`${s}px`,n.el.style.zIndex=n.kind==="hub"?"2":"1",n.el.style.setProperty("--ui-animated-beam-render-size",`${s}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=v(e.scale,.72,1),r=this._nodeEffect(),o=this._motionPreset(),n=new Map(this._nodes.map(y=>[y.nodeId,y])),s=[],i=[],p=[];this._connections.forEach(y=>{const m=n.get(y.from),w=n.get(y.to);if(!m||!w)return;const x=we(m,w,y.curve);s.push({connection:y,geometry:x,travelDistance:x.length})});const l=Se(s,this._delayMs(),this._staggerMs()),d=Math.max(1,...s.map(y=>(l.get(y.connection)??this._delayMs())+y.connection.durationMs)),u=r==="none"?0:J(d),h=this._repeat()?"infinite":"1",g=[],f=new Map;s.forEach(y=>{const w=(l.get(y.connection)??this._delayMs())+y.connection.durationMs,x=be(y.connection);f.set(x,Math.max(f.get(x)??0,w))});const $=Math.max(d,...Array.from(f.values(),y=>y+u));s.forEach(y=>{const{connection:m,geometry:w,travelDistance:x}=y,z=m.reverse?$e(w):w,k=`${this._uid}-gradient-${m.index}`,A=Math.max(1,m.trailWidthPx*t),M=Math.max(1.5,m.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=v(x*m.beamFactor,M*6,x*.72);m.delayMs=l.get(m)??this._delayMs();const V=`${this._uid}-glow-${m.index}`,j=`${this._uid}-core-${m.index}`;g.push(Z(V,$,m.delayMs,m.durationMs,"var(--ui-animated-beam-glow-opacity)",o.pattern,x,R,R*1.18,U)),g.push(Z(j,$,m.delayMs,m.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(m.colorStart||D)}"></stop>
           <stop offset="100%" stop-color="${B(m.colorEnd||q)}"></stop>
@@ -568,10 +560,10 @@
             style="animation-name:${j};"
           ></path>
         </g>
-      `)}),this._applyNodeEffectStyles(r,g,$,h,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,r,o,n){const s=J(r);this._nodes.forEach((i,p)=>{const l=t.get(i.nodeId);if(e==="none"||l==null){this._nodeEffectAnimations.get(i.el)?.cancel(),this._nodeEffectAnimations.delete(i.el),le(i.el);return}const d=`${this._uid}-node-effect-${p}`;n.push(Ae(d,r,l,s,e)),i.el.style.setProperty("--ui-animated-beam-node-effect-name",d),i.el.style.setProperty("--ui-animated-beam-node-effect-cycle",`${r}ms`),i.el.style.setProperty("--ui-animated-beam-node-effect-iterations",o),this._startNodeEffectAnimation(i.el,e,r,l,s,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,r,o,n,s){if(typeof e.animate!="function"||this._prefersReducedMotion()||t==="none")return;this._nodeEffectAnimations.get(e)?.cancel();const i=Math.max(r,1),p=_(o/i,0,1),l=_((o+n*.35)/i,p,1),d=_((o+n*.72)/i,l,1),u=_((o+n)/i,d,1),h=e.animate(Me(t,p,l,d,u),{duration:r,iterations:s==="infinite"?1/0:1,fill:"both",easing:"linear",delay:0});(this.hasAttribute("paused")||this._prefersReducedMotion())&&h.pause(),this._nodeEffectAnimations.set(e,h)}_syncNodeEffectAnimationState(e){this._nodeEffectAnimations.forEach(t=>{e?t.pause():t.play()})}_clearNodeEffectAnimations(){this._nodeEffectAnimations.forEach(e=>e.cancel()),this._nodeEffectAnimations.clear()}_layoutMetrics(){const e=this._sizePreset(),t=this._columns(),r=this._resolvedRowCount(),o=this._paddingPx(e),n=this._columnGapPx(e),s=this._rowGapPx(e),i=this._nodeSizePx(e),p=this._hubSizePx(e),l=this._minHeightPx(e),d=Math.max(i,Math.round(p*.86)),u=o*2+t*d+Math.max(0,t-1)*n,h=this._canvasEl?.getBoundingClientRect(),f=h?.width||this.clientWidth||0,g=this._autoFit()&&f>0&&u>0?_(f/u,.2,1):1,$=o*g,y=n*g,m=s*g,w=i*g,x=p*g,z=l*g,k=Math.max(z,$*2+r*Math.max(w,Math.round(x*.86))+Math.max(0,r-1)*m),A=this._autoFit()&&f>0?f:Math.max(f,u),M=Math.max(h?.height||this.clientHeight||0,k);return{width:A,height:M,scale:g,padding:$,columns:t,rows:r,columnGap:y,rowGap:m,nodeSize:w,hubSize:x}}_resolvedRowCount(){const e=this._declaredRows(),t=this._nodes.reduce((r,o)=>Math.max(r,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(),r=this._paddingPx(e),o=this._columnGapPx(e),n=this._nodeSizePx(e),s=this._hubSizePx(e),i=Math.max(n,Math.round(s*.86));return r*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"?c.xxs:e==="xs"?c.xs:e==="sm"||e==="1"?c.sm:e==="lg"||e==="3"?c.lg:c.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 r={x:a.centerX,y:a.centerY},o={x:e.centerX,y:e.centerY},n=Math.atan2(o.y-r.y,o.x-r.x),s=te(r,n,Math.max(0,a.radiusPx-Q)),i=te(o,n+Math.PI,Math.max(0,e.radiusPx-Q)),p=i.x-s.x,l=i.y-s.y,d=Math.abs(p),u=Math.abs(l);if(t==="straight"||t==="auto"&&u<Math.max(8,Math.min(a.radiusPx,e.radiusPx)*.28))return{kind:"line",start:s,end:i,d:`M ${b(s.x)} ${b(s.y)} L ${b(i.x)} ${b(i.y)}`,length:pe(s,i)};const h=t==="arc"?.56:t==="soft"?.34:u>d*.45?.48:.4;if(d>=u){const y=Math.max(d*h,44),m={x:s.x+Math.sign(p||1)*y,y:s.y},w={x:i.x-Math.sign(p||1)*y,y:i.y};return{kind:"cubic",start:s,end:i,c1:m,c2:w,d:`M ${b(s.x)} ${b(s.y)} C ${b(m.x)} ${b(m.y)} ${b(w.x)} ${b(w.y)} ${b(i.x)} ${b(i.y)}`,length:ee(s,m,w,i)}}const f=Math.max(u*h,44),g={x:s.x,y:s.y+Math.sign(l||1)*f},$={x:i.x,y:i.y-Math.sign(l||1)*f};return{kind:"cubic",start:s,end:i,c1:g,c2:$,d:`M ${b(s.x)} ${b(s.y)} C ${b(g.x)} ${b(g.y)} ${b($.x)} ${b($.y)} ${b(i.x)} ${b(i.y)}`,length:ee(s,g,$,i)}}function $e(a){if(a.kind==="line")return{kind:"line",start:a.end,end:a.start,d:`M ${b(a.end.x)} ${b(a.end.y)} L ${b(a.start.x)} ${b(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 ${b(a.end.x)} ${b(a.end.y)} C ${b(e.x)} ${b(e.y)} ${b(t.x)} ${b(t.y)} ${b(a.start.x)} ${b(a.start.y)}`,length:a.length}}function Se(a,e,t){const r=new Map,o=new Map,n=new Map,s=new Set,i=new Set;for(const d of a){const u=be(d.connection),h=r.get(u);h?h.push(d):r.set(u,[d])}const p=d=>{const u=o.get(d);if(u!=null)return u;if(s.has(d))return e;s.add(d);const h=r.get(d);let f=e;return h?.length&&(f=h.reduce((g,$)=>{const y=l($.connection);return Math.max(g,y+$.connection.durationMs)},e)),s.delete(d),o.set(d,f),f},l=d=>{const u=n.get(d);if(u!=null)return u;if(i.has(d))return e;i.add(d);const h=p(ze(d)),f=d.hasExplicitDelay?0:d.siblingIndex*t,g=h+f+d.localDelayMs;return i.delete(d),n.set(d,g),g};for(const d of a)n.set(d.connection,l(d.connection));return n}function Z(a,e,t,r,o,n,s,i,p,l){const d=Math.max(e,1),u=_(t/d*100,0,100),h=_((t+r)/d*100,u,100),f=_(u+Math.max(r/d*100*.02,.01),u,h),g=S(u),$=S(f),y=S(h),m=b(i),w=b(p),x=b(s),z=b(l);if(n==="pulse"){const k=_(u+(h-u)*.42,f,h),A=_(u+(h-u)*.82,k,h),M=S(k),C=S(A);return`
+      `)}),this._applyNodeEffectStyles(r,f,$,h,g),this._defsEl.innerHTML=i.join(""),this._pathsEl.innerHTML=p.join(""),this._animationStyleEl.textContent=g.join(`
+`),this.setAttribute("data-path-visible",this._pathVisible()?"true":"false")}_applyNodeEffectStyles(e,t,r,o,n){const s=J(r);this._nodes.forEach((i,p)=>{const l=t.get(i.nodeId);if(e==="none"||l==null){this._nodeEffectAnimations.get(i.el)?.cancel(),this._nodeEffectAnimations.delete(i.el),le(i.el);return}const d=`${this._uid}-node-effect-${p}`;n.push(Ae(d,r,l,s,e)),i.el.style.setProperty("--ui-animated-beam-node-effect-name",d),i.el.style.setProperty("--ui-animated-beam-node-effect-cycle",`${r}ms`),i.el.style.setProperty("--ui-animated-beam-node-effect-iterations",o),this._startNodeEffectAnimation(i.el,e,r,l,s,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,r,o,n,s){if(typeof e.animate!="function"||this._prefersReducedMotion()||t==="none")return;this._nodeEffectAnimations.get(e)?.cancel();const i=Math.max(r,1),p=v(o/i,0,1),l=v((o+n*.35)/i,p,1),d=v((o+n*.72)/i,l,1),u=v((o+n)/i,d,1),h=e.animate(Me(t,p,l,d,u),{duration:r,iterations:s==="infinite"?1/0:1,fill:"both",easing:"linear",delay:0});(this.hasAttribute("paused")||this._prefersReducedMotion())&&h.pause(),this._nodeEffectAnimations.set(e,h)}_syncNodeEffectAnimationState(e){this._nodeEffectAnimations.forEach(t=>{e?t.pause():t.play()})}_clearNodeEffectAnimations(){this._nodeEffectAnimations.forEach(e=>e.cancel()),this._nodeEffectAnimations.clear()}_layoutMetrics(){const e=this._sizePreset(),t=this._columns(),r=this._resolvedRowCount(),o=this._paddingPx(e),n=this._columnGapPx(e),s=this._rowGapPx(e),i=this._nodeSizePx(e),p=this._hubSizePx(e),l=this._minHeightPx(e),d=Math.max(i,Math.round(p*.86)),u=o*2+t*d+Math.max(0,t-1)*n,h=this._canvasEl?.getBoundingClientRect(),g=h?.width||this.clientWidth||0,f=this._autoFit()&&g>0&&u>0?v(g/u,.2,1):1,$=o*f,y=n*f,m=s*f,w=i*f,x=p*f,z=l*f,k=Math.max(z,$*2+r*Math.max(w,Math.round(x*.86))+Math.max(0,r-1)*m),A=this._autoFit()&&g>0?g:Math.max(g,u),M=Math.max(h?.height||this.clientHeight||0,k);return{width:A,height:M,scale:f,padding:$,columns:t,rows:r,columnGap:y,rowGap:m,nodeSize:w,hubSize:x}}_resolvedRowCount(){const e=this._declaredRows(),t=this._nodes.reduce((r,o)=>Math.max(r,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(),r=this._paddingPx(e),o=this._columnGapPx(e),n=this._nodeSizePx(e),s=this._hubSizePx(e),i=Math.max(n,Math.round(s*.86));return r*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 v(ae(this.getAttribute("beam-factor"),e.beamFactor),.06,.48)}_sizePreset(){const e=this.getAttribute("size");return e==="xxs"||e==="0"?c.xxs:e==="xs"?c.xs:e==="sm"||e==="1"?c.sm:e==="lg"||e==="3"?c.lg:c.md}_motionPreset(){const e=this.getAttribute("animation");return e&&ye.has(e)?_[e]:_.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&&ve.has(e)?e:"none"}}function we(a,e,t){const r={x:a.centerX,y:a.centerY},o={x:e.centerX,y:e.centerY},n=Math.atan2(o.y-r.y,o.x-r.x),s=te(r,n,Math.max(0,a.radiusPx-Q)),i=te(o,n+Math.PI,Math.max(0,e.radiusPx-Q)),p=i.x-s.x,l=i.y-s.y,d=Math.abs(p),u=Math.abs(l);if(t==="straight"||t==="auto"&&u<Math.max(8,Math.min(a.radiusPx,e.radiusPx)*.28))return{kind:"line",start:s,end:i,d:`M ${b(s.x)} ${b(s.y)} L ${b(i.x)} ${b(i.y)}`,length:pe(s,i)};const h=t==="arc"?.56:t==="soft"?.34:u>d*.45?.48:.4;if(d>=u){const y=Math.max(d*h,44),m={x:s.x+Math.sign(p||1)*y,y:s.y},w={x:i.x-Math.sign(p||1)*y,y:i.y};return{kind:"cubic",start:s,end:i,c1:m,c2:w,d:`M ${b(s.x)} ${b(s.y)} C ${b(m.x)} ${b(m.y)} ${b(w.x)} ${b(w.y)} ${b(i.x)} ${b(i.y)}`,length:ee(s,m,w,i)}}const g=Math.max(u*h,44),f={x:s.x,y:s.y+Math.sign(l||1)*g},$={x:i.x,y:i.y-Math.sign(l||1)*g};return{kind:"cubic",start:s,end:i,c1:f,c2:$,d:`M ${b(s.x)} ${b(s.y)} C ${b(f.x)} ${b(f.y)} ${b($.x)} ${b($.y)} ${b(i.x)} ${b(i.y)}`,length:ee(s,f,$,i)}}function $e(a){if(a.kind==="line")return{kind:"line",start:a.end,end:a.start,d:`M ${b(a.end.x)} ${b(a.end.y)} L ${b(a.start.x)} ${b(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 ${b(a.end.x)} ${b(a.end.y)} C ${b(e.x)} ${b(e.y)} ${b(t.x)} ${b(t.y)} ${b(a.start.x)} ${b(a.start.y)}`,length:a.length}}function Se(a,e,t){const r=new Map,o=new Map,n=new Map,s=new Set,i=new Set;for(const d of a){const u=be(d.connection),h=r.get(u);h?h.push(d):r.set(u,[d])}const p=d=>{const u=o.get(d);if(u!=null)return u;if(s.has(d))return e;s.add(d);const h=r.get(d);let g=e;return h?.length&&(g=h.reduce((f,$)=>{const y=l($.connection);return Math.max(f,y+$.connection.durationMs)},e)),s.delete(d),o.set(d,g),g},l=d=>{const u=n.get(d);if(u!=null)return u;if(i.has(d))return e;i.add(d);const h=p(ze(d)),g=d.hasExplicitDelay?0:d.siblingIndex*t,f=h+g+d.localDelayMs;return i.delete(d),n.set(d,f),f};for(const d of a)n.set(d.connection,l(d.connection));return n}function Z(a,e,t,r,o,n,s,i,p,l){const d=Math.max(e,1),u=v(t/d*100,0,100),h=v((t+r)/d*100,u,100),g=v(u+Math.max(r/d*100*.02,.01),u,h),f=S(u),$=S(g),y=S(h),m=b(i),w=b(p),x=b(s),z=b(l);if(n==="pulse"){const k=v(u+(h-u)*.42,g,h),A=v(u+(h-u)*.82,k,h),M=S(k),C=S(A);return`
       @keyframes ${a} {
-        0%, ${g}% {
+        0%, ${f}% {
           opacity: 0;
           stroke-dasharray: ${z} ${x};
           stroke-dashoffset: 0;
@@ -603,9 +595,9 @@
           stroke-width: ${m};
         }
       }
-    `}if(n==="heartbeat"){const k=_(l*.72,i*4.5,s*.42),A=b(k),M=_(u+(h-u)*.24,f,h),C=_(u+(h-u)*.34,M,h),T=_(u+(h-u)*.48,C,h),R=_(u+(h-u)*.82,T,h),H=S(M),N=S(C),G=S(T),I=S(R);return`
+    `}if(n==="heartbeat"){const k=v(l*.72,i*4.5,s*.42),A=b(k),M=v(u+(h-u)*.24,g,h),C=v(u+(h-u)*.34,M,h),T=v(u+(h-u)*.48,C,h),R=v(u+(h-u)*.82,T,h),H=S(M),N=S(C),G=S(T),I=S(R);return`
       @keyframes ${a} {
-        0%, ${g}% {
+        0%, ${f}% {
           opacity: 0;
           stroke-dasharray: ${A} ${x};
           stroke-dashoffset: 0;
@@ -651,7 +643,7 @@
       }
     `}return`
     @keyframes ${a} {
-      0%, ${g}% {
+      0%, ${f}% {
         opacity: 0;
         stroke-dasharray: 0 ${x};
         stroke-width: ${m};
@@ -667,7 +659,7 @@
         stroke-width: ${m};
       }
     }
-  `}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,r,o){const n=Math.max(e,1),s=_(t/n*100,0,100),i=_((t+r*.35)/n*100,s,100),p=_((t+r*.72)/n*100,i,100),l=_((t+r)/n*100,p,100),d=S(s),u=S(i),h=S(p),f=S(l);if(o==="shake"){const m=_(s+(i-s)*.3,s,i),w=_(s+(i-s)*.65,m,i),x=S(m),z=S(w);return`
+  `}function ze(a){return a.reverse?a.to:a.from}function be(a){return a.reverse?a.from:a.to}function J(a){return v(a*.16,360,900)}function Ae(a,e,t,r,o){const n=Math.max(e,1),s=v(t/n*100,0,100),i=v((t+r*.35)/n*100,s,100),p=v((t+r*.72)/n*100,i,100),l=v((t+r)/n*100,p,100),d=S(s),u=S(i),h=S(p),g=S(l);if(o==="shake"){const m=v(s+(i-s)*.3,s,i),w=v(s+(i-s)*.65,m,i),x=S(m),z=S(w);return`
       @keyframes ${a} {
         0%, ${d}%, 100% {
           transform: translate(-50%, -50%) scale(1);
@@ -692,7 +684,7 @@
             0 0 24px var(--ui-animated-beam-node-effect-glow);
         }
         ${h}%,
-        ${f}% {
+        ${g}% {
           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));
@@ -711,10 +703,10 @@
         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)"};
       }
       ${h}%,
-      ${f}% {
+      ${g}% {
         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,r=.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 l=e+(t-e)*.3,d=e+(t-e)*.65;return[{...n,offset:0},{...n,offset:e},{offset:l,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:r},{...n,offset:o},{...n,offset:1}]}const s=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:s,boxShadow:i,borderColor:p},{...n,offset:r},{...n,offset:o},{...n,offset:1}]}function ee(a,e,t,r){let o=0,n=a;const s=18;for(let i=1;i<=s;i+=1){const p=i/s,l=Ee(a,e,t,r,p);o+=pe(n,l),n=l}return o}function Ee(a,e,t,r,o){const n=1-o,s=n*n*n*a.x+3*n*n*o*e.x+3*n*o*o*t.x+o*o*o*r.x,i=n*n*n*a.y+3*n*n*o*e.y+3*n*o*o*t.y+o*o*o*r.y;return{x:s,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 r=t.match(/-?\d+(\.\d+)?/);return r?Number.parseFloat(r[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 b(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;
+  `}function Me(a,e=0,t=.1,r=.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 l=e+(t-e)*.3,d=e+(t-e)*.65;return[{...n,offset:0},{...n,offset:e},{offset:l,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:r},{...n,offset:o},{...n,offset:1}]}const s=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:s,boxShadow:i,borderColor:p},{...n,offset:r},{...n,offset:o},{...n,offset:1}]}function ee(a,e,t,r){let o=0,n=a;const s=18;for(let i=1;i<=s;i+=1){const p=i/s,l=Ee(a,e,t,r,p);o+=pe(n,l),n=l}return o}function Ee(a,e,t,r,o){const n=1-o,s=n*n*n*a.x+3*n*n*o*e.x+3*n*o*o*t.x+o*o*o*r.x,i=n*n*n*a.y+3*n*n*o*e.y+3*n*o*o*t.y+o*o*o*r.y;return{x:s,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 r=t.match(/-?\d+(\.\d+)?/);return r?Number.parseFloat(r[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 v(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 b(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;

package/dist/animated-beam.esm.js

@@ -64,7 +64,7 @@ const ie = 3200, ne = 0, oe = 0, se = 3, re = 4, de = 0.18, me = 3, D = "#8b5cf6
     minHeight: 400,
     radius: 34
   }
-}, v = {
+}, _ = {
   calm: {
     durationScale: 1.18,
     glowOpacity: 0.26,
@@ -114,7 +114,7 @@ const ie = 3200, ne = 0, oe = 0, se = 3, re = 4, de = 0.18, me = 3, D = "#8b5cf6
   success: { start: "#22c55e", end: "#14b8a6" },
   warning: { start: "#f59e0b", end: "#f97316" },
   danger: { start: "#ef4444", end: "#f97316" }
-}, _e = `
+}, ve = `
   :host {
     --ui-animated-beam-required-width: 0px;
     --ui-animated-beam-duration: ${ie}ms;
@@ -141,24 +141,16 @@ const ie = 3200, ne = 0, oe = 0, se = 3, re = 4, de = 0.18, me = 3, D = "#8b5cf6
     --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-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
     --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-border: 1px solid var(--ui-color-line, rgba(15, 23, 42, 0.14));
+    --ui-animated-beam-node-shadow: none;
     --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-hub-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
+    --ui-animated-beam-hub-border: 1px solid color-mix(in srgb, var(--ui-animated-beam-accent) 40%, var(--ui-color-line, rgba(15, 23, 42, 0.14)));
+    --ui-animated-beam-hub-shadow: none;
+    --ui-animated-beam-glow-opacity: ${_.smooth.glowOpacity};
+    --ui-animated-beam-glow-blur: ${_.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));
@@ -372,40 +364,40 @@ const ie = 3200, ne = 0, oe = 0, se = 3, re = 4, de = 0.18, me = 3, D = "#8b5cf6
   }
 
   :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};
+    --ui-animated-beam-glow-opacity: ${_.calm.glowOpacity};
+    --ui-animated-beam-glow-blur: ${_.calm.glowBlur}px;
+    --ui-animated-beam-beam-factor: ${_.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};
+    --ui-animated-beam-glow-opacity: ${_.smooth.glowOpacity};
+    --ui-animated-beam-glow-blur: ${_.smooth.glowBlur}px;
+    --ui-animated-beam-beam-factor: ${_.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};
+    --ui-animated-beam-glow-opacity: ${_.snappy.glowOpacity};
+    --ui-animated-beam-glow-blur: ${_.snappy.glowBlur}px;
+    --ui-animated-beam-beam-factor: ${_.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};
+    --ui-animated-beam-glow-opacity: ${_.surge.glowOpacity};
+    --ui-animated-beam-glow-blur: ${_.surge.glowBlur}px;
+    --ui-animated-beam-beam-factor: ${_.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};
+    --ui-animated-beam-glow-opacity: ${_.pulse.glowOpacity};
+    --ui-animated-beam-glow-blur: ${_.pulse.glowBlur}px;
+    --ui-animated-beam-beam-factor: ${_.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};
+    --ui-animated-beam-glow-opacity: ${_.heartbeat.glowOpacity};
+    --ui-animated-beam-glow-blur: ${_.heartbeat.glowBlur}px;
+    --ui-animated-beam-beam-factor: ${_.heartbeat.beamFactor};
   }
 
   .root {
@@ -586,7 +578,7 @@ const ie = 3200, ne = 0, oe = 0, se = 3, re = 4, de = 0.18, me = 3, D = "#8b5cf6
     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),
+      0 0 0 2px var(--ui-ring-color, var(--ui-animated-beam-focus-ring)),
       var(--ui-animated-beam-node-shadow);
   }
 
@@ -624,7 +616,7 @@ const ie = 3200, ne = 0, oe = 0, se = 3, re = 4, de = 0.18, me = 3, D = "#8b5cf6
     }
   }
 `;
-class ve extends pe {
+class _e 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;
   }
@@ -690,7 +682,7 @@ class ve extends pe {
   }
   render() {
     this.setContent(`
-      <style>${_e}</style>
+      <style>${ve}</style>
       <style data-ui-animated-beam-animations></style>
       <div class="root" part="root">
         <div class="surface" part="surface">
@@ -850,7 +842,7 @@ class ve extends pe {
         localDelayMs: F(g, 0),
         delayMs: 0,
         siblingIndex: f,
-        beamFactor: _(ae(i.getAttribute("beam-factor"), this._beamFactor(e)), 0.06, 0.48),
+        beamFactor: v(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[u || o].start,
@@ -885,7 +877,7 @@ class ve extends pe {
   }
   _renderConnections() {
     if (!this._defsEl || !this._pathsEl || !this._animationStyleEl) return;
-    const e = this._lastLayoutMetrics || this._layoutMetrics(), t = _(e.scale, 0.72, 1), r = this._nodeEffect(), o = this._motionPreset(), n = new Map(this._nodes.map((y) => [y.nodeId, y])), s = [], i = [], p = [];
+    const e = this._lastLayoutMetrics || this._layoutMetrics(), t = v(e.scale, 0.72, 1), r = this._nodeEffect(), o = this._motionPreset(), n = new Map(this._nodes.map((y) => [y.nodeId, y])), s = [], i = [], p = [];
     this._connections.forEach((y) => {
       const m = n.get(y.from), w = n.get(y.to);
       if (!m || !w) return;
@@ -909,7 +901,7 @@ class ve extends pe {
       ...Array.from(f.values(), (y) => y + u)
     );
     s.forEach((y) => {
-      const { connection: m, geometry: w, travelDistance: x } = y, z = m.reverse ? $e(w) : w, k = `${this._uid}-gradient-${m.index}`, A = Math.max(1, m.trailWidthPx * t), M = Math.max(1.5, m.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 * m.beamFactor, M * 6, x * 0.72);
+      const { connection: m, geometry: w, travelDistance: x } = y, z = m.reverse ? $e(w) : w, k = `${this._uid}-gradient-${m.index}`, A = Math.max(1, m.trailWidthPx * t), M = Math.max(1.5, m.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 = v(x * m.beamFactor, M * 6, x * 0.72);
       m.delayMs = l.get(m) ?? this._delayMs();
       const V = `${this._uid}-glow-${m.index}`, Q = `${this._uid}-core-${m.index}`;
       g.push(
@@ -1004,7 +996,7 @@ class ve extends pe {
   _startNodeEffectAnimation(e, t, r, o, n, s) {
     if (typeof e.animate != "function" || this._prefersReducedMotion() || t === "none") return;
     this._nodeEffectAnimations.get(e)?.cancel();
-    const i = Math.max(r, 1), p = _(o / i, 0, 1), l = _((o + n * 0.35) / i, p, 1), d = _((o + n * 0.72) / i, l, 1), u = _((o + n) / i, d, 1), h = e.animate(Me(t, p, l, d, u), {
+    const i = Math.max(r, 1), p = v(o / i, 0, 1), l = v((o + n * 0.35) / i, p, 1), d = v((o + n * 0.72) / i, l, 1), u = v((o + n) / i, d, 1), h = e.animate(Me(t, p, l, d, u), {
       duration: r,
       iterations: s === "infinite" ? 1 / 0 : 1,
       fill: "both",
@@ -1022,7 +1014,7 @@ class ve extends pe {
     this._nodeEffectAnimations.forEach((e) => e.cancel()), this._nodeEffectAnimations.clear();
   }
   _layoutMetrics() {
-    const e = this._sizePreset(), t = this._columns(), r = this._resolvedRowCount(), o = this._paddingPx(e), n = this._columnGapPx(e), s = this._rowGapPx(e), i = this._nodeSizePx(e), p = this._hubSizePx(e), l = this._minHeightPx(e), d = Math.max(i, Math.round(p * 0.86)), u = o * 2 + t * d + Math.max(0, t - 1) * n, h = this._canvasEl?.getBoundingClientRect(), g = h?.width || this.clientWidth || 0, f = this._autoFit() && g > 0 && u > 0 ? _(g / u, 0.2, 1) : 1, $ = o * f, y = n * f, m = s * f, w = i * f, x = p * f, z = l * f, k = Math.max(
+    const e = this._sizePreset(), t = this._columns(), r = this._resolvedRowCount(), o = this._paddingPx(e), n = this._columnGapPx(e), s = this._rowGapPx(e), i = this._nodeSizePx(e), p = this._hubSizePx(e), l = this._minHeightPx(e), d = Math.max(i, Math.round(p * 0.86)), u = o * 2 + t * d + Math.max(0, t - 1) * n, h = this._canvasEl?.getBoundingClientRect(), g = h?.width || this.clientWidth || 0, f = this._autoFit() && g > 0 && u > 0 ? v(g / u, 0.2, 1) : 1, $ = o * f, y = n * f, m = s * f, w = i * f, x = p * f, z = l * f, k = Math.max(
       z,
       $ * 2 + r * Math.max(w, Math.round(x * 0.86)) + Math.max(0, r - 1) * m
     ), A = this._autoFit() && g > 0 ? g : Math.max(g, u), M = Math.max(h?.height || this.clientHeight || 0, k);
@@ -1092,7 +1084,7 @@ class ve extends pe {
     return F(this.getAttribute("stagger"), oe);
   }
   _beamFactor(e) {
-    return _(ae(this.getAttribute("beam-factor"), e.beamFactor), 0.06, 0.48);
+    return v(ae(this.getAttribute("beam-factor"), e.beamFactor), 0.06, 0.48);
   }
   _sizePreset() {
     const e = this.getAttribute("size");
@@ -1100,7 +1092,7 @@ class ve extends pe {
   }
   _motionPreset() {
     const e = this.getAttribute("animation");
-    return e && xe.has(e) ? v[e] : v.smooth;
+    return e && xe.has(e) ? _[e] : _.smooth;
   }
   _tone() {
     const e = this.getAttribute("tone");
@@ -1203,9 +1195,9 @@ function Se(a, e, t) {
   return n;
 }
 function Z(a, e, t, r, o, n, s, i, p, l) {
-  const d = Math.max(e, 1), u = _(t / d * 100, 0, 100), h = _((t + r) / d * 100, u, 100), g = _(u + Math.max(r / d * 100 * 0.02, 0.01), u, h), f = S(u), $ = S(g), y = S(h), m = b(i), w = b(p), x = b(s), z = b(l);
+  const d = Math.max(e, 1), u = v(t / d * 100, 0, 100), h = v((t + r) / d * 100, u, 100), g = v(u + Math.max(r / d * 100 * 0.02, 0.01), u, h), f = S(u), $ = S(g), y = S(h), m = b(i), w = b(p), x = b(s), z = b(l);
   if (n === "pulse") {
-    const k = _(u + (h - u) * 0.42, g, h), A = _(u + (h - u) * 0.82, k, h), M = S(k), C = S(A);
+    const k = v(u + (h - u) * 0.42, g, h), A = v(u + (h - u) * 0.82, k, h), M = S(k), C = S(A);
     return `
       @keyframes ${a} {
         0%, ${f}% {
@@ -1243,7 +1235,7 @@ function Z(a, e, t, r, o, n, s, i, p, l) {
     `;
   }
   if (n === "heartbeat") {
-    const k = _(l * 0.72, i * 4.5, s * 0.42), A = b(k), M = _(u + (h - u) * 0.24, g, h), C = _(u + (h - u) * 0.34, M, h), T = _(u + (h - u) * 0.48, C, h), R = _(u + (h - u) * 0.82, T, h), H = S(M), N = S(C), G = S(T), I = S(R);
+    const k = v(l * 0.72, i * 4.5, s * 0.42), A = b(k), M = v(u + (h - u) * 0.24, g, h), C = v(u + (h - u) * 0.34, M, h), T = v(u + (h - u) * 0.48, C, h), R = v(u + (h - u) * 0.82, T, h), H = S(M), N = S(C), G = S(T), I = S(R);
     return `
       @keyframes ${a} {
         0%, ${f}% {
@@ -1319,12 +1311,12 @@ function ce(a) {
   return a.reverse ? a.from : a.to;
 }
 function J(a) {
-  return _(a * 0.16, 360, 900);
+  return v(a * 0.16, 360, 900);
 }
 function Ae(a, e, t, r, o) {
-  const n = Math.max(e, 1), s = _(t / n * 100, 0, 100), i = _((t + r * 0.35) / n * 100, s, 100), p = _((t + r * 0.72) / n * 100, i, 100), l = _((t + r) / n * 100, p, 100), d = S(s), u = S(i), h = S(p), g = S(l);
+  const n = Math.max(e, 1), s = v(t / n * 100, 0, 100), i = v((t + r * 0.35) / n * 100, s, 100), p = v((t + r * 0.72) / n * 100, i, 100), l = v((t + r) / n * 100, p, 100), d = S(s), u = S(i), h = S(p), g = S(l);
   if (o === "shake") {
-    const m = _(s + (i - s) * 0.3, s, i), w = _(s + (i - s) * 0.65, m, i), x = S(m), z = S(w);
+    const m = v(s + (i - s) * 0.3, s, i), w = v(s + (i - s) * 0.65, m, i), x = S(m), z = S(w);
     return `
       @keyframes ${a} {
         0%, ${d}%, 100% {
@@ -1492,7 +1484,7 @@ function ae(a, e) {
 function O(a, e, t) {
   return Math.min(t, Math.max(e, Math.round(a)));
 }
-function _(a, e, t) {
+function v(a, e, t) {
   return Math.min(t, Math.max(e, a));
 }
 function he(a, e) {
@@ -1507,7 +1499,7 @@ function S(a) {
 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);
+typeof customElements < "u" && !customElements.get("ui-animated-beam") && customElements.define("ui-animated-beam", _e);
 export {
-  ve as UIAnimatedBeam
+  _e as UIAnimatedBeam
 };