@viraui/react 2026.1.10 → 2026.2.0

package/dist/catalog.json

@@ -38,6 +38,12 @@
       "summary": "Decorative status-dot overlay that wraps a child, with optional radial mask cutout on the child around the corner dot.",
       "guidePath": "./components/badge/badge.guide.json"
     },
+    {
+      "id": "beam",
+      "name": "Beam",
+      "summary": "Decorative animated border, line, or pulse glow on a transparent Surface shell (radius only). Put the visual card as children. CSS-module geometry plus shared ~30fps pulse rAF for pulse variants. Memory/CPU cost — use sparingly.",
+      "guidePath": "./components/beam/beam.guide.json"
+    },
     {
       "id": "bleed",
       "name": "Bleed",

package/dist/components/beam/beam-pulse-driver.d.ts

@@ -0,0 +1,25 @@
+export type BeamPulseOscillator = {
+    prop: string;
+    a: number;
+    b: number;
+    period: number;
+    delay: number;
+    unit: '' | 'px';
+};
+export type BeamPulseDriverConfig = {
+    oscillators: BeamPulseOscillator[];
+    hue: {
+        prop: string;
+        range: number;
+        period: number;
+        continuous: boolean;
+    } | null;
+};
+/** Cosine ease-in-out factor in [0, 1]: 0 at phase 0/1, 1 at phase 0.5. */
+export declare const beamPulsePingPong: (phase: number) => number;
+export declare const getBeamPulseDriverConfig: (variant: "pulse-inner" | "pulse-outside", durationSec: number, staticColors: boolean) => BeamPulseDriverConfig;
+export declare const registerBeamPulse: (el: HTMLElement, config: BeamPulseDriverConfig) => (() => void);
+/** Story / test helper. */
+export declare const getBeamPulseRegistrySize: () => number;
+/** Story / test helper — forces a paint tick using `performance.now()` baseline. */
+export declare const flushBeamPulseFrameForTests: () => void;

package/dist/components/beam/beam-pulse-driver.js

@@ -0,0 +1,239 @@
+//#region src/components/beam/beam-pulse-driver.ts
+var instances = /* @__PURE__ */ new Set();
+var rafId = null;
+var lastFrame = 0;
+/** ~30 fps; small slack so early frames still paint. */
+var FRAME_INTERVAL = 1e3 / 30 - 2;
+var TWO_PI = Math.PI * 2;
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+/** Cosine ease-in-out factor in [0, 1]: 0 at phase 0/1, 1 at phase 0.5. */
+var beamPulsePingPong = (phase) => (1 - Math.cos(TWO_PI * phase)) / 2;
+var prefersReducedMotion = () => typeof window !== "undefined" && typeof matchMedia === "function" && matchMedia(REDUCED_MOTION_QUERY).matches;
+/** Theme-agnostic defaults (upstream dark presets). */
+var pulseParams = (variant, durationSec) => {
+	const durScale = durationSec / 2.3;
+	if (variant === "pulse-inner") return {
+		sp: .28,
+		dr: 33,
+		op: .48,
+		gh: .34,
+		bs: 1.9 * durScale,
+		ss: 2.6 * durScale,
+		ghs: 2.4 * durScale,
+		huePeriod: 16
+	};
+	return {
+		sp: .28,
+		dr: 14,
+		op: .46,
+		gh: .16,
+		bs: 2.3 * durScale,
+		ss: 6.4 * durScale,
+		ghs: 2.4 * durScale,
+		huePeriod: 14
+	};
+};
+var oscillatorDefs = (p) => {
+	const { sp, dr, op, gh, bs, ss, ghs } = p;
+	return [
+		{
+			prop: "--__beam-bw1",
+			a: 1 - sp,
+			b: 1 + sp * 1.1,
+			period: ss * .9,
+			delay: 0,
+			unit: ""
+		},
+		{
+			prop: "--__beam-bh1",
+			a: 1 + sp * .9,
+			b: 1 - sp * .85,
+			period: ss * 1.26,
+			delay: 0,
+			unit: ""
+		},
+		{
+			prop: "--__beam-bx1",
+			a: -dr,
+			b: dr * .9,
+			period: bs * 1.6,
+			delay: 0,
+			unit: "px"
+		},
+		{
+			prop: "--__beam-by1",
+			a: dr * .55,
+			b: -dr * .7,
+			period: bs * 1.6,
+			delay: 0,
+			unit: "px"
+		},
+		{
+			prop: "--__beam-bw2",
+			a: 1 + sp,
+			b: 1 - sp * .85,
+			period: ss * 1.1,
+			delay: 0,
+			unit: ""
+		},
+		{
+			prop: "--__beam-bh2",
+			a: 1 - sp * .8,
+			b: 1 + sp * 1.05,
+			period: ss * .81,
+			delay: 0,
+			unit: ""
+		},
+		{
+			prop: "--__beam-bx2",
+			a: dr * .8,
+			b: -dr * .9,
+			period: bs * 1.88,
+			delay: 0,
+			unit: "px"
+		},
+		{
+			prop: "--__beam-by2",
+			a: -dr,
+			b: dr * .65,
+			period: bs * 1.88,
+			delay: 0,
+			unit: "px"
+		},
+		{
+			prop: "--__beam-bw3",
+			a: 1 - sp * .6,
+			b: 1 + sp * 1.15,
+			period: ss * .98,
+			delay: 0,
+			unit: ""
+		},
+		{
+			prop: "--__beam-bh3",
+			a: 1 + sp * .75,
+			b: 1 - sp,
+			period: ss * 1.4,
+			delay: 0,
+			unit: ""
+		},
+		{
+			prop: "--__beam-bx3",
+			a: -dr * .6,
+			b: dr,
+			period: bs * 1.45,
+			delay: 0,
+			unit: "px"
+		},
+		{
+			prop: "--__beam-by3",
+			a: -dr * .85,
+			b: dr * .45,
+			period: bs * 1.45,
+			delay: 0,
+			unit: "px"
+		},
+		{
+			prop: "--__beam-bgh",
+			a: 1 - gh,
+			b: 1 + gh,
+			period: ghs,
+			delay: 0,
+			unit: ""
+		},
+		{
+			prop: "--__beam-bop-tl",
+			a: 1 - op,
+			b: 1,
+			period: bs,
+			delay: 0,
+			unit: ""
+		},
+		{
+			prop: "--__beam-bop-tr",
+			a: 1 - op,
+			b: 1,
+			period: bs * 1.32,
+			delay: bs * .28,
+			unit: ""
+		},
+		{
+			prop: "--__beam-bop-bl",
+			a: 1 - op,
+			b: 1,
+			period: bs * .84,
+			delay: bs * .55,
+			unit: ""
+		},
+		{
+			prop: "--__beam-bop-br",
+			a: 1 - op,
+			b: 1,
+			period: bs * 1.58,
+			delay: bs * .83,
+			unit: ""
+		}
+	];
+};
+var getBeamPulseDriverConfig = (variant, durationSec, staticColors) => {
+	const p = pulseParams(variant, durationSec);
+	return {
+		oscillators: oscillatorDefs(p),
+		hue: staticColors ? null : {
+			prop: "--vui-beam-hue",
+			range: 360,
+			period: p.huePeriod,
+			continuous: true
+		}
+	};
+};
+var frame = (ts) => {
+	rafId = requestAnimationFrame(frame);
+	if (typeof document !== "undefined" && document.hidden) return;
+	if (ts - lastFrame < FRAME_INTERVAL) return;
+	lastFrame = ts;
+	const tSec = ts / 1e3;
+	for (const { el, config } of instances) {
+		for (const osc of config.oscillators) {
+			const phase = (tSec - osc.delay) / osc.period;
+			const value = osc.a + (osc.b - osc.a) * beamPulsePingPong(phase);
+			el.style.setProperty(osc.prop, osc.unit === "px" ? `${value.toFixed(2)}px` : value.toFixed(4));
+		}
+		if (config.hue) {
+			const { prop, range, period, continuous } = config.hue;
+			const value = continuous ? tSec / period % 1 * range : -range + 2 * range * beamPulsePingPong(tSec / period);
+			el.style.setProperty(prop, `${value.toFixed(2)}deg`);
+		}
+	}
+};
+var startLoop = () => {
+	if (rafId == null) {
+		lastFrame = 0;
+		rafId = requestAnimationFrame(frame);
+	}
+};
+var stopLoopIfIdle = () => {
+	if (instances.size === 0 && rafId != null) {
+		cancelAnimationFrame(rafId);
+		rafId = null;
+	}
+};
+/**
+* Register an element on the shared pulse loop.
+* @returns cleanup that unregisters (and stops the loop when empty).
+*/
+var noopCleanup = () => void 0;
+var registerBeamPulse = (el, config) => {
+	if (prefersReducedMotion()) return noopCleanup;
+	const instance = {
+		el,
+		config
+	};
+	instances.add(instance);
+	startLoop();
+	return () => {
+		instances.delete(instance);
+		stopLoopIfIdle();
+	};
+};
+//#endregion
+export { beamPulsePingPong, getBeamPulseDriverConfig, registerBeamPulse };

package/dist/components/beam/beam.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-beam-angle{syntax:"<angle>";inherits:true;initial-value:0deg}@property --vui-beam-opacity{syntax:"<number>";inherits:true;initial-value:0}@property --vui-beam-hue{syntax:"<angle>";inherits:true;initial-value:0deg}@property --vui-beam-hue-base{syntax:"<angle>";inherits:true;initial-value:0deg}@property --vui-beam-hue-range{syntax:"<angle>";inherits:true;initial-value:30deg}@property --vui-beam-duration{syntax:"<time>";inherits:true;initial-value:1.96s}@property --vui-beam-strength{syntax:"<number>";inherits:true;initial-value:1}@property --vui-beam-brightness{syntax:"<number>";inherits:true;initial-value:1.3}@property --vui-beam-saturation{syntax:"<number>";inherits:true;initial-value:1.2}@property --vui-beam-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-beam-stroke-opacity{syntax:"<number>";inherits:true;initial-value:.26}@property --vui-beam-inner-opacity{syntax:"<number>";inherits:true;initial-value:.42}@property --vui-beam-bloom-opacity{syntax:"<number>";inherits:true;initial-value:.24}@property --vui-beam-core-blur{syntax:"<length>";inherits:true;initial-value:3px}@property --vui-beam-bloom-blur{syntax:"<length>";inherits:true;initial-value:22.5px}@property --vui-beam-pulse-glow-sx{syntax:"<number>";inherits:true;initial-value:1}@property --vui-beam-pulse-glow-sy{syntax:"<number>";inherits:true;initial-value:1}@property --vui-beam-pulse-glow-boost{syntax:"<number>";inherits:true;initial-value:1}@property --vui-beam-x{syntax:"<number>";inherits:true;initial-value:0}@property --vui-beam-w{syntax:"<number>";inherits:true;initial-value:1}@property --vui-beam-h{syntax:"<number>";inherits:true;initial-value:1}@property --vui-beam-spike{syntax:"<number>";inherits:true;initial-value:1}@property --vui-beam-spike2{syntax:"<number>";inherits:true;initial-value:1}@property --vui-beam-edge{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bw1{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bh1{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bw2{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bh2{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bw3{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bh3{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bgh{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bop-tl{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bop-tr{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bop-bl{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bop-br{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bx1{syntax:"<length>";inherits:true;initial-value:0}@property --__beam-by1{syntax:"<length>";inherits:true;initial-value:0}@property --__beam-bx2{syntax:"<length>";inherits:true;initial-value:0}@property --__beam-by2{syntax:"<length>";inherits:true;initial-value:0}@property --__beam-bx3{syntax:"<length>";inherits:true;initial-value:0}@property --__beam-by3{syntax:"<length>";inherits:true;initial-value:0}@property --__beam-radius-tl{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__beam-radius-tr{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__beam-radius-br{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__beam-radius-bl{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__beam-c1{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c2{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c3{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c4{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c5{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c6{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c7{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c8{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c9{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c10{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c11{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c12{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__beam-module__Beam_xT5Pt{--__beam-radius-tl:var(--vui-surface-border-radius-top-left);--__beam-radius-tr:var(--vui-surface-border-radius-top-right);--__beam-radius-br:var(--vui-surface-border-radius-bottom-right);--__beam-radius-bl:var(--vui-surface-border-radius-bottom-left);--vui-beam-color:var(--global-primary);--__beam-c1:var(--vui-beam-color);--__beam-c2:var(--vui-beam-color);--__beam-c3:var(--vui-beam-color);--__beam-c4:var(--vui-beam-color);--__beam-c5:var(--vui-beam-color);--__beam-c6:var(--vui-beam-color);--__beam-c7:var(--vui-beam-color);--__beam-c8:var(--vui-beam-color);--__beam-c9:var(--vui-beam-color);--__beam-c10:var(--vui-beam-color);--__beam-c11:var(--vui-beam-color);--__beam-c12:var(--vui-beam-color);position:relative;z-index:0;&[data-paused],&[data-paused] [data-beam-bloom],&[data-paused]:after,&[data-paused]:before{animation-play-state:paused!important}&[data-beam-fit-content=true]{max-width:fit-content}&[data-beam-color=colorful]{--__beam-c1:#ff3264;--__beam-c2:#288cff;--__beam-c3:#32c850;--__beam-c4:#1eb9aa;--__beam-c5:#6446ff;--__beam-c6:#ff7828;--__beam-c7:#f032b4;--__beam-c8:#b428f0;--__beam-c9:#ff3c50;--__beam-c10:#ff3c50;--__beam-c11:#28beb4;--__beam-c12:#28beb4fa}&[data-beam-static-colors=true]{--vui-beam-hue-range:0deg}&[data-beam-static-colors=true] [data-beam-bloom],&[data-beam-static-colors=true]:after,&[data-beam-static-colors=true]:before{animation-name:none;filter:brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}@media (prefers-reduced-motion:reduce){&[data-animate],&[data-fading]{animation:none!important}& [data-beam-bloom],&:after,&:before{animation:none!important;filter:none!important}&[data-animate]:after,&[data-animate]:before{opacity:calc(.35 * var(--vui-beam-strength))}}&[data-beam-variant=border]{&[data-beam-size=medium]{border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);overflow:hidden;&[data-animate]{animation:viraui__beam-module__vui-beam-spin_PCRBV var(--vui-beam-duration) linear infinite,viraui__beam-module__vui-beam-fade-in_-pZOw .6s ease forwards}&[data-fading]{animation:viraui__beam-module__vui-beam-spin_PCRBV var(--vui-beam-duration) linear infinite,viraui__beam-module__vui-beam-fade-out_ITNKo .5s ease forwards}[data-beam-bloom]{display:none;position:absolute;inset:0;border-radius:max(0px,calc(var(--__beam-radius-tl) - 1px)) max(0px,calc(var(--__beam-radius-tr) - 1px)) max(0px,calc(var(--__beam-radius-br) - 1px)) max(0px,calc(var(--__beam-radius-bl) - 1px));clip-path:inset(0 round var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl));background:conic-gradient(from var(--vui-beam-angle),#0000 0,#0000 58%,#ffffff08 62%,#ffffff14 65%,#fff3 67%,#ffffff73 69%,#ffffffd9 70%,#ffffffd9 70.5%,#ffffff73 71.5%,#fff3 73%,#ffffff14 75%,#ffffff08 78%,#0000 82%);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;padding:1px;filter:blur(8px) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation));pointer-events:none;z-index:3;opacity:0}&:is([data-animate],[data-fading]){&:after{border-radius:max(0px,calc(var(--__beam-radius-tl) - 1px)) max(0px,calc(var(--__beam-radius-tr) - 1px)) max(0px,calc(var(--__beam-radius-br) - 1px)) max(0px,calc(var(--__beam-radius-bl) - 1px));padding:1px;background:conic-gradient(from var(--vui-beam-angle),#0000 0,#0000 54%,#ffffff1a 57%,#ffffff4d 60%,#fff9 63%,#ffffffbf 66%,#fff9 69%,#ffffff4d 72%,#ffffff1a 75%,#0000 78%,#0000 100%),radial-gradient(ellipse 70px 40px at 33% -7.4%,var(--__beam-c1),#0000),radial-gradient(ellipse 60px 35px at 12% -5%,var(--__beam-c2),#0000),radial-gradient(ellipse 40px 70px at 2.1% 68.3%,var(--__beam-c3),#0000),radial-gradient(ellipse 20px 35px at 2.1% 68.3%,var(--__beam-c4),#0000),radial-gradient(ellipse 180px 32px at 74.4% 100%,var(--__beam-c5),#0000),radial-gradient(ellipse 85px 26px at 55% 100%,var(--__beam-c2),#0000),radial-gradient(ellipse 74px 32px at 93.9% 0,var(--__beam-c6),#0000),radial-gradient(ellipse 26px 42px at 100% 27.1%,var(--__beam-c7),#0000),radial-gradient(ellipse 52px 48px at 100% 27.1%,var(--__beam-c8),#0000);mask:conic-gradient(from var(--vui-beam-angle),#0000 0,#0000 30%,#ffffff1a 36%,#ffffff59 44%,#fff 52%,#fff 80%,#ffffff59 86%,#ffffff1a 92%,#0000 95%,#0000 100%),linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:intersect,exclude;z-index:2;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-stroke-opacity) * var(--vui-beam-strength))}&:after,&:before{content:"";position:absolute;inset:0;clip-path:inset(0 round var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl));pointer-events:none;animation:viraui__beam-module__vui-beam-hue-shift_9CzG5 12s ease-in-out infinite}&:before{border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);background:radial-gradient(ellipse 63px 36px at 33% -7.4%,oklab(from var(--__beam-c1) l a b/.45),#0000),radial-gradient(ellipse 54px 32px at 12% -5%,oklab(from var(--__beam-c2) l a b/.45),#0000),radial-gradient(ellipse 36px 63px at 2.1% 68.3%,oklab(from var(--__beam-c3) l a b/.45),#0000),radial-gradient(ellipse 18px 32px at 2.1% 68.3%,oklab(from var(--__beam-c4) l a b/.45),#0000),radial-gradient(ellipse 162px 29px at 74.4% 100%,oklab(from var(--__beam-c5) l a b/.45),#0000),radial-gradient(ellipse 77px 23px at 55% 100%,oklab(from var(--__beam-c2) l a b/.45),#0000),radial-gradient(ellipse 67px 29px at 93.9% 0,oklab(from var(--__beam-c6) l a b/.45),#0000),radial-gradient(ellipse 23px 38px at 100% 27.1%,oklab(from var(--__beam-c7) l a b/.45),#0000),radial-gradient(ellipse 47px 43px at 100% 27.1%,oklab(from var(--__beam-c8) l a b/.45),#0000);box-shadow:inset 0 0 9px 1px #ffffff45;mask-image:conic-gradient(from var(--vui-beam-angle),#0000 0,#0000 30%,#ffffff1a 36%,#ffffff59 44%,#fff 52%,#fff 80%,#ffffff59 86%,#ffffff1a 92%,#0000 95%,#0000 100%),linear-gradient(#fff,#0000 28px,#0000 calc(100% - 28px),#fff),linear-gradient(to right,#fff,#0000 28px,#0000 calc(100% - 28px),#fff);mask-composite:intersect,add;z-index:1;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-inner-opacity) * var(--vui-beam-strength))}[data-beam-bloom]{display:block;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-bloom-opacity) * var(--vui-beam-strength))}}}&[data-beam-size=small]{--vui-beam-stroke-opacity:0.46;--vui-beam-inner-opacity:0.24;--vui-beam-bloom-opacity:0.38;border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);overflow:hidden;&[data-animate]{animation:viraui__beam-module__vui-beam-spin_PCRBV var(--vui-beam-duration) linear infinite,viraui__beam-module__vui-beam-fade-in_-pZOw .6s ease forwards}&[data-fading]{animation:viraui__beam-module__vui-beam-spin_PCRBV var(--vui-beam-duration) linear infinite,viraui__beam-module__vui-beam-fade-out_ITNKo .5s ease forwards}[data-beam-bloom]{display:none;position:absolute;inset:0;border-radius:max(0px,calc(var(--__beam-radius-tl) - 1px)) max(0px,calc(var(--__beam-radius-tr) - 1px)) max(0px,calc(var(--__beam-radius-br) - 1px)) max(0px,calc(var(--__beam-radius-bl) - 1px));clip-path:inset(0 round var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl));background:conic-gradient(from var(--vui-beam-angle),#0000 0,#0000 58%,#ffffff08 62%,#ffffff14 65%,#fff3 67%,#ffffff73 69%,#ffffffd9 70%,#ffffffd9 70.5%,#ffffff73 71.5%,#fff3 73%,#ffffff14 75%,#ffffff08 78%,#0000 82%);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;padding:1px;filter:blur(8px) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation));pointer-events:none;z-index:3;opacity:0}&:is([data-animate],[data-fading]){&:after{border-radius:max(0px,calc(var(--__beam-radius-tl) - 1px)) max(0px,calc(var(--__beam-radius-tr) - 1px)) max(0px,calc(var(--__beam-radius-br) - 1px)) max(0px,calc(var(--__beam-radius-bl) - 1px));padding:1px;background:conic-gradient(from var(--vui-beam-angle),#0000 0,#0000 54%,#ffffff1a 57%,#ffffff4d 60%,#fff9 63%,#ffffffbf 66%,#fff9 69%,#ffffff4d 72%,#ffffff1a 75%,#0000 78%,#0000 100%),radial-gradient(ellipse 9px 18px at 2% 68%,var(--__beam-c3),#0000),radial-gradient(ellipse 4px 8px at 2% 68%,var(--__beam-c4),#0000),radial-gradient(ellipse 59px 9px at 72% -3%,var(--__beam-c6),#0000),radial-gradient(ellipse 42px 7px at 74% 100%,var(--__beam-c5),#0000),radial-gradient(ellipse 10px 17px at 100% 27%,var(--__beam-c7),#0000),radial-gradient(ellipse 10px 18px at 100% 27%,var(--__beam-c8),#0000),radial-gradient(ellipse 5px 10px at 100% 27%,var(--__beam-c2),#0000),radial-gradient(ellipse 11px 12px at 100% 27%,var(--__beam-c1),#0000);mask:conic-gradient(from var(--vui-beam-angle),#0000 0,#0000 30%,#ffffff1a 36%,#ffffff59 44%,#fff 52%,#fff 80%,#ffffff59 86%,#ffffff1a 92%,#0000 95%,#0000 100%),linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:intersect,exclude;z-index:2;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-stroke-opacity) * var(--vui-beam-strength))}&:after,&:before{content:"";position:absolute;inset:0;clip-path:inset(0 round var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl));pointer-events:none;animation:viraui__beam-module__vui-beam-hue-shift_9CzG5 12s ease-in-out infinite}&:before{border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);background:radial-gradient(ellipse 9px 18px at 2% 68%,oklab(from var(--__beam-c3) l a b/.5),#0000),radial-gradient(ellipse 4px 8px at 2% 68%,oklab(from var(--__beam-c4) l a b/.45),#0000),radial-gradient(ellipse 59px 9px at 72% -3%,oklab(from var(--__beam-c6) l a b/.35),#0000),radial-gradient(ellipse 42px 7px at 74% 100%,oklab(from var(--__beam-c5) l a b/.35),#0000),radial-gradient(ellipse 10px 17px at 100% 27%,oklab(from var(--__beam-c7) l a b/.3),#0000),radial-gradient(ellipse 10px 18px at 100% 27%,oklab(from var(--__beam-c8) l a b/.4),#0000),radial-gradient(ellipse 5px 10px at 100% 27%,oklab(from var(--__beam-c2) l a b/.3),#0000),radial-gradient(ellipse 11px 12px at 100% 27%,oklab(from var(--__beam-c1) l a b/.3),#0000);box-shadow:inset 0 0 5px 1px #ffffff45;mask-image:conic-gradient(from var(--vui-beam-angle),#0000 0,#0000 22%,#ffffff1f 28%,#fff6 36%,#fff 46%,#fff 82%,#fff6 88%,#ffffff1f 94%,#0000 97%,#0000 100%);mask-composite:add;z-index:1;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-inner-opacity) * var(--vui-beam-strength))}[data-beam-bloom]{display:block;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-bloom-opacity) * var(--vui-beam-strength))}}}}&[data-beam-variant=line]{--vui-beam-stroke-opacity:1.14;--vui-beam-inner-opacity:0.7;--vui-beam-bloom-opacity:0.8;border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);overflow:hidden;&[data-animate]{animation:viraui__beam-module__beam-travel_FuPkI var(--vui-beam-duration) linear infinite,viraui__beam-module__beam-edge-fade_PXYJA var(--vui-beam-duration) linear infinite,viraui__beam-module__beam-breathe_3BBMd 4s ease-in-out infinite,viraui__beam-module__beam-spike_1iIfV 4.1s ease-in-out infinite,viraui__beam-module__beam-spike2_d1gJy 5.3s ease-in-out infinite,viraui__beam-module__vui-beam-fade-in_-pZOw .6s ease forwards}&[data-fading]{animation:viraui__beam-module__beam-travel_FuPkI var(--vui-beam-duration) linear infinite,viraui__beam-module__beam-edge-fade_PXYJA var(--vui-beam-duration) linear infinite,viraui__beam-module__beam-breathe_3BBMd 4s ease-in-out infinite,viraui__beam-module__beam-spike_1iIfV 4.1s ease-in-out infinite,viraui__beam-module__beam-spike2_d1gJy 5.3s ease-in-out infinite,viraui__beam-module__vui-beam-fade-out_ITNKo .5s ease forwards}[data-beam-bloom]{display:none;position:absolute;inset:0;border-radius:max(0px,calc(var(--__beam-radius-tl) - 1px)) max(0px,calc(var(--__beam-radius-tr) - 1px)) max(0px,calc(var(--__beam-radius-br) - 1px)) max(0px,calc(var(--__beam-radius-bl) - 1px));clip-path:inset(0 round var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl));padding:0;mask:radial-gradient(ellipse calc(84px * var(--vui-beam-w)) calc(110px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100%) 100%,#fff 0,#ffffff80 35%,#0000 100%);mask-composite:add;background:radial-gradient(ellipse calc(.8px * var(--vui-beam-spike)) calc(92px * var(--vui-beam-h)) at 8% calc(100% - 2px),var(--__beam-c9),var(--__beam-c9) 30%,#0000 88%),radial-gradient(ellipse calc(10px * var(--vui-beam-spike2)) calc(35px * var(--vui-beam-h)) at 22% calc(100% - 4px),color-mix(in srgb,var(--__beam-c12) 98%,#0000),color-mix(in srgb,var(--__beam-c12) 49%,#0000) 50%,#0000 95%),radial-gradient(ellipse calc(2px * (2 - var(--vui-beam-spike))) calc(72px * var(--vui-beam-h)) at 36% calc(100% - 3px),var(--__beam-c5),color-mix(in srgb,var(--__beam-c5) 100%,#0000) 40%,#0000 90%),radial-gradient(ellipse calc(14px * var(--vui-beam-spike2)) calc(28px * var(--vui-beam-h)) at 50% calc(100% - 2px),#ffaa2896,#ffaa284a 55%,#0000 96%),radial-gradient(ellipse calc(1.2px * (2 - var(--vui-beam-spike2))) calc(85px * var(--vui-beam-h)) at 64% calc(100% - 4px),var(--__beam-c3),color-mix(in srgb,var(--__beam-c3) 100%,#0000) 35%,#0000 89%),radial-gradient(ellipse calc(7px * var(--vui-beam-spike)) calc(45px * var(--vui-beam-h)) at 78% calc(100% - 2px),color-mix(in srgb,var(--__beam-c8) 91%,#0000),color-mix(in srgb,var(--__beam-c8) 45%,#0000) 48%,#0000 94%),radial-gradient(ellipse calc(.6px * (2 - var(--vui-beam-spike))) calc(60px * var(--vui-beam-h)) at 92% calc(100% - 3px),var(--__beam-c2),color-mix(in srgb,var(--__beam-c2) 100%,#0000) 42%,#0000 91%),radial-gradient(ellipse calc(21px * var(--vui-beam-spike)) calc(15px * var(--vui-beam-spike2)) at calc(var(--vui-beam-x) * 100%) calc(100% + 1px),#fff 0,#ffffffe6 20%,#ffffff80 50%,#0000 100%),radial-gradient(ellipse calc(42px * var(--vui-beam-w)) calc(40px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100%) 100%,#ffffff4d 0,#ffffff1f 25%,#ffffff08 55%,#0000 80%);pointer-events:none;z-index:3;opacity:0}&:is([data-animate],[data-fading]){&:after{border-radius:max(0px,calc(var(--__beam-radius-tl) - 1px)) max(0px,calc(var(--__beam-radius-tr) - 1px)) max(0px,calc(var(--__beam-radius-br) - 1px)) max(0px,calc(var(--__beam-radius-bl) - 1px));padding:1px;background:radial-gradient(ellipse calc(24px * var(--vui-beam-w)) calc(28px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100%) calc(100% + 2px),#ffffff61 0,#ffffff1f 30%,#0000 65%),radial-gradient(ellipse calc(36px * var(--vui-beam-w)) calc(36px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100%) calc(100% + 2px),var(--__beam-c1),#0000),radial-gradient(ellipse calc(30px * var(--vui-beam-w)) calc(32px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% + 39px) calc(100%),var(--__beam-c4),#0000),radial-gradient(ellipse calc(33px * var(--vui-beam-w)) calc(28px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% - 36px) calc(100% + 2px),var(--__beam-c3),#0000),radial-gradient(ellipse calc(29px * var(--vui-beam-w)) calc(34px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% - 54px) calc(100%),var(--__beam-c8),#0000),radial-gradient(ellipse calc(27px * var(--vui-beam-w)) calc(30px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% + 51px) calc(100% - 1px),var(--__beam-c6),#0000),radial-gradient(ellipse calc(36px * var(--vui-beam-w)) calc(24px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% + 21px) calc(100% + 1px),var(--__beam-c5),#0000),radial-gradient(ellipse calc(30px * var(--vui-beam-w)) calc(22px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% - 21px) calc(100%),var(--__beam-c2),#0000),radial-gradient(ellipse calc(25px * var(--vui-beam-w)) calc(28px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% + 66px) calc(100% + 1px),var(--__beam-c7),#0000),radial-gradient(ellipse calc(23px * var(--vui-beam-w)) calc(30px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% - 66px) calc(100% - 1px),var(--__beam-c4),#0000);mask:radial-gradient(ellipse calc(78px * var(--vui-beam-w)) calc(60px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100%) 100%,#fff 0,#ffffff80 45%,#0000 100%),linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:intersect,exclude;z-index:2;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-edge) * var(--vui-beam-stroke-opacity) * var(--vui-beam-strength))}&:after,&:before{content:"";position:absolute;inset:0;clip-path:inset(0 round var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl));pointer-events:none;animation:viraui__beam-module__vui-beam-hue-shift_9CzG5 12s ease-in-out infinite}&:before{border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);background:radial-gradient(ellipse calc(33px * var(--vui-beam-w)) calc(30px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100%) calc(100%),color-mix(in srgb,var(--__beam-c1) 48%,#0000),#0000),radial-gradient(ellipse calc(24px * var(--vui-beam-w)) calc(26px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% + 39px) calc(100% - 3px),color-mix(in srgb,var(--__beam-c4) 42%,#0000),#0000),radial-gradient(ellipse calc(27px * var(--vui-beam-w)) calc(24px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% - 36px) calc(100%),color-mix(in srgb,var(--__beam-c3) 48%,#0000),#0000),radial-gradient(ellipse calc(23px * var(--vui-beam-w)) calc(28px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% - 54px) calc(100% - 2px),color-mix(in srgb,var(--__beam-c8) 42%,#0000),#0000),radial-gradient(ellipse calc(24px * var(--vui-beam-w)) calc(24px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% + 51px) calc(100% - 1px),color-mix(in srgb,var(--__beam-c6) 50%,#0000),#0000),radial-gradient(ellipse calc(30px * var(--vui-beam-w)) calc(20px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% + 21px) calc(100%),color-mix(in srgb,var(--__beam-c5) 45%,#0000),#0000),radial-gradient(ellipse calc(25px * var(--vui-beam-w)) calc(18px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% - 21px) calc(100% - 2px),color-mix(in srgb,var(--__beam-c2) 40%,#0000),#0000),radial-gradient(ellipse calc(21px * var(--vui-beam-w)) calc(24px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% + 66px) calc(100%),color-mix(in srgb,var(--__beam-c7) 45%,#0000),#0000),radial-gradient(ellipse calc(18px * var(--vui-beam-w)) calc(26px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% - 66px) calc(100% - 1px),color-mix(in srgb,var(--__beam-c4) 52%,#0000),#0000);box-shadow:inset 0 0 9px 1px #ffffff45;mask-image:radial-gradient(ellipse calc(78px * var(--vui-beam-w)) calc(60px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100%) 100%,#fff 0,#ffffff80 45%,#0000 100%),linear-gradient(#fff,#0000 28px,#0000 calc(100% - 28px),#fff),linear-gradient(to right,#fff,#0000 28px,#0000 calc(100% - 28px),#fff);mask-composite:intersect,add;z-index:1;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-edge) * var(--vui-beam-inner-opacity) * var(--vui-beam-strength))}[data-beam-bloom]{display:block;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-edge) * var(--vui-beam-bloom-opacity) * var(--vui-beam-strength));animation:viraui__beam-module__beam-hue-shift-bloom_Onfv- 8s ease-in-out infinite}}}&[data-beam-variant=pulse-inner]{--vui-beam-stroke-opacity:1.54;--vui-beam-inner-opacity:0.44;--vui-beam-bloom-opacity:0.66;border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);overflow:hidden;isolation:isolate;&[data-animate]{animation:viraui__beam-module__vui-beam-fade-in_-pZOw .6s ease forwards}&[data-fading]{animation:viraui__beam-module__vui-beam-fade-out_ITNKo .5s ease forwards}[data-beam-bloom]{display:none;position:absolute;inset:0;border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);clip-path:inset(0 round var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl));background:radial-gradient(ellipse 84px 48px at 33% -7.4%,oklab(from var(--__beam-c1) l a b/.76),#0000),radial-gradient(ellipse 72px 42px at 12% -5%,oklab(from var(--__beam-c2) l a b/.76),#0000),radial-gradient(ellipse 48px 84px at 2.1% 68.3%,oklab(from var(--__beam-c3) l a b/.76),#0000),radial-gradient(ellipse 216px 38px at 74.4% 100%,oklab(from var(--__beam-c5) l a b/.76),#0000),radial-gradient(ellipse 102px 31px at 55% 100%,oklab(from var(--__beam-c2) l a b/.76),#0000),radial-gradient(ellipse 89px 38px at 93.9% 0,oklab(from var(--__beam-c6) l a b/.76),#0000),radial-gradient(ellipse 62px 58px at 100% 27.1%,oklab(from var(--__beam-c8) l a b/.76),#0000);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;padding:1px;pointer-events:none;z-index:3;opacity:0}&:is([data-animate],[data-fading]){&:after{padding:1px;background:radial-gradient(ellipse calc(70px * var(--__beam-bw1)) calc(40px * var(--__beam-bh1) * var(--__beam-bgh)) at calc(33% + var(--__beam-bx1)) calc(-7.4% + var(--__beam-by1)),oklab(from var(--__beam-c1) l a b/var(--__beam-bop-tl)),#0000),radial-gradient(ellipse calc(60px * var(--__beam-bw2)) calc(35px * var(--__beam-bh2) * var(--__beam-bgh)) at calc(12% + var(--__beam-bx2)) calc(-5% + var(--__beam-by2)),oklab(from var(--__beam-c2) l a b/var(--__beam-bop-tl)),#0000),radial-gradient(ellipse calc(40px * var(--__beam-bw3)) calc(70px * var(--__beam-bh3) * var(--__beam-bgh)) at calc(2.1% + var(--__beam-bx3)) calc(68.3% + var(--__beam-by3)),oklab(from var(--__beam-c3) l a b/var(--__beam-bop-bl)),#0000),radial-gradient(ellipse calc(20px * var(--__beam-bw1)) calc(35px * var(--__beam-bh1) * var(--__beam-bgh)) at calc(2.1% + var(--__beam-bx1)) calc(68.3% + var(--__beam-by1)),oklab(from var(--__beam-c4) l a b/var(--__beam-bop-bl)),#0000),radial-gradient(ellipse calc(180px * var(--__beam-bw2)) calc(32px * var(--__beam-bh2) * var(--__beam-bgh)) at calc(74.4% + var(--__beam-bx2)) calc(100% + var(--__beam-by2)),oklab(from var(--__beam-c5) l a b/var(--__beam-bop-br)),#0000),radial-gradient(ellipse calc(85px * var(--__beam-bw3)) calc(26px * var(--__beam-bh3) * var(--__beam-bgh)) at calc(55% + var(--__beam-bx3)) calc(100% + var(--__beam-by3)),oklab(from var(--__beam-c2) l a b/var(--__beam-bop-br)),#0000),radial-gradient(ellipse calc(74px * var(--__beam-bw1)) calc(32px * var(--__beam-bh1) * var(--__beam-bgh)) at calc(93.9% + var(--__beam-bx1)) calc(0% + var(--__beam-by1)),oklab(from var(--__beam-c6) l a b/var(--__beam-bop-tr)),#0000),radial-gradient(ellipse calc(26px * var(--__beam-bw2)) calc(42px * var(--__beam-bh2) * var(--__beam-bgh)) at calc(100% + var(--__beam-bx2)) calc(27.1% + var(--__beam-by2)),oklab(from var(--__beam-c7) l a b/var(--__beam-bop-tr)),#0000),radial-gradient(ellipse calc(52px * var(--__beam-bw3)) calc(48px * var(--__beam-bh3) * var(--__beam-bgh)) at calc(100% + var(--__beam-bx3)) calc(27.1% + var(--__beam-by3)),oklab(from var(--__beam-c8) l a b/var(--__beam-bop-tr)),#0000);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;z-index:2;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-stroke-opacity) * var(--vui-beam-strength))}&:after,&:before{content:"";position:absolute;inset:0;border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);clip-path:inset(0 round var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl));pointer-events:none;filter:hue-rotate(calc(var(--vui-beam-hue-base, 0deg) + var(--vui-beam-hue))) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}&:before{background:radial-gradient(ellipse calc(65px * var(--__beam-bw1)) calc(35px * var(--__beam-bh1) * var(--__beam-bgh)) at calc(33% + var(--__beam-bx1)) calc(-7.4% + var(--__beam-by1)),oklab(from var(--__beam-c1) l a b/var(--__beam-bop-tl)),#0000),radial-gradient(ellipse calc(55px * var(--__beam-bw2)) calc(30px * var(--__beam-bh2) * var(--__beam-bgh)) at calc(12% + var(--__beam-bx2)) calc(-5% + var(--__beam-by2)),oklab(from var(--__beam-c2) l a b/var(--__beam-bop-tl)),#0000),radial-gradient(ellipse calc(35px * var(--__beam-bw3)) calc(65px * var(--__beam-bh3) * var(--__beam-bgh)) at calc(2.1% + var(--__beam-bx3)) calc(68.3% + var(--__beam-by3)),oklab(from var(--__beam-c3) l a b/var(--__beam-bop-bl)),#0000),radial-gradient(ellipse calc(15px * var(--__beam-bw1)) calc(30px * var(--__beam-bh1) * var(--__beam-bgh)) at calc(2.1% + var(--__beam-bx1)) calc(68.3% + var(--__beam-by1)),oklab(from var(--__beam-c4) l a b/var(--__beam-bop-bl)),#0000),radial-gradient(ellipse calc(173px * var(--__beam-bw2)) calc(28px * var(--__beam-bh2) * var(--__beam-bgh)) at calc(74.4% + var(--__beam-bx2)) calc(100% + var(--__beam-by2)),oklab(from var(--__beam-c5) l a b/var(--__beam-bop-br)),#0000),radial-gradient(ellipse calc(80px * var(--__beam-bw3)) calc(22px * var(--__beam-bh3) * var(--__beam-bgh)) at calc(55% + var(--__beam-bx3)) calc(100% + var(--__beam-by3)),oklab(from var(--__beam-c2) l a b/var(--__beam-bop-br)),#0000),radial-gradient(ellipse calc(69px * var(--__beam-bw1)) calc(28px * var(--__beam-bh1) * var(--__beam-bgh)) at calc(93.9% + var(--__beam-bx1)) calc(0% + var(--__beam-by1)),oklab(from var(--__beam-c6) l a b/var(--__beam-bop-tr)),#0000),radial-gradient(ellipse calc(22px * var(--__beam-bw2)) calc(38px * var(--__beam-bh2) * var(--__beam-bgh)) at calc(100% + var(--__beam-bx2)) calc(27.1% + var(--__beam-by2)),oklab(from var(--__beam-c7) l a b/var(--__beam-bop-tr)),#0000),radial-gradient(ellipse calc(47px * var(--__beam-bw3)) calc(44px * var(--__beam-bh3) * var(--__beam-bgh)) at calc(100% + var(--__beam-bx3)) calc(27.1% + var(--__beam-by3)),oklab(from var(--__beam-c8) l a b/var(--__beam-bop-tr)),#0000),radial-gradient(ellipse 60px 60px at 0 0,rgba(255,255,255,calc(.18 * var(--__beam-bop-tl))),#0000 70%),radial-gradient(ellipse 60px 60px at 100% 0,rgba(255,255,255,calc(.18 * var(--__beam-bop-tr))),#0000 70%),radial-gradient(ellipse 60px 60px at 0 100%,rgba(255,255,255,calc(.18 * var(--__beam-bop-bl))),#0000 70%),radial-gradient(ellipse 60px 60px at 100% 100%,rgba(255,255,255,calc(.18 * var(--__beam-bop-br))),#0000 70%);mask-image:linear-gradient(#fff,#0000 28px,#0000 calc(100% - 28px),#fff),linear-gradient(90deg,#fff,#0000 28px,#0000 calc(100% - 28px),#fff);mask-composite:add;z-index:1;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-inner-opacity) * var(--vui-beam-strength))}[data-beam-bloom]{display:block;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-bloom-opacity) * var(--vui-beam-strength));filter:blur(8px) hue-rotate(calc(var(--vui-beam-hue-base, 0deg) + var(--vui-beam-hue))) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}}@media (prefers-reduced-motion:reduce){&:is([data-animate],[data-fading]),&:is([data-animate],[data-fading]) [data-beam-bloom],&:is([data-animate],[data-fading]):after,&:is([data-animate],[data-fading]):before{animation:none!important}}}&[data-beam-variant=pulse-outside]{--vui-beam-stroke-opacity:0.94;--vui-beam-inner-opacity:0.34;--vui-beam-bloom-opacity:0.3;border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);overflow:visible;isolation:isolate;&>:not([data-beam-bloom]){position:relative;z-index:1}&[data-animate]{animation:viraui__beam-module__vui-beam-fade-in_-pZOw .6s ease forwards}&[data-fading]{animation:viraui__beam-module__vui-beam-fade-out_ITNKo .5s ease forwards}[data-beam-bloom]{display:none;position:absolute;inset:-30px;z-index:-1;border-radius:calc(var(--__beam-radius-tl) + 30px) calc(var(--__beam-radius-tr) + 30px) calc(var(--__beam-radius-br) + 30px) calc(var(--__beam-radius-bl) + 30px);background:radial-gradient(ellipse calc(110px * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(30px * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at 27% 3%,color-mix(in srgb,var(--__beam-c1) 77%,#0000),#0000),radial-gradient(ellipse calc(100px * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(20px * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at 73% 1%,color-mix(in srgb,var(--__beam-c6) 77%,#0000),#0000),radial-gradient(ellipse calc(26px * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(62px * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at 100% 33%,color-mix(in srgb,var(--__beam-c7) 77%,#0000),#0000),radial-gradient(ellipse calc(30px * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(56px * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at 101% 72%,color-mix(in srgb,var(--__beam-c8) 77%,#0000),#0000),radial-gradient(ellipse calc(120px * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(22px * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at 67% 99%,color-mix(in srgb,var(--__beam-c5) 77%,#0000),#0000),radial-gradient(ellipse calc(88px * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(32px * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at 24% 99%,color-mix(in srgb,var(--__beam-c2) 77%,#0000),#0000),radial-gradient(ellipse calc(28px * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(58px * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at 0 60%,color-mix(in srgb,var(--__beam-c3) 77%,#0000),#0000);transform:scale(.95,.9);pointer-events:none;opacity:0}&:is([data-animate],[data-fading]){&:after{inset:0;border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);padding:1px;clip-path:inset(0 round var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl));mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;z-index:2;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-stroke-opacity) * var(--vui-beam-strength));filter:hue-rotate(calc(var(--vui-beam-hue-base, 0deg) + var(--vui-beam-hue))) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}&:after,&:before{content:"";position:absolute;background:radial-gradient(ellipse calc(80px * var(--__beam-bw1) * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(19px * var(--__beam-bh1) * var(--__beam-bgh) * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at calc(27% + var(--__beam-bx1)) calc(0% + var(--__beam-by1)),oklab(from var(--__beam-c1) l a b/var(--__beam-bop-tl)),#0000),radial-gradient(ellipse calc(74px * var(--__beam-bw2) * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(11px * var(--__beam-bh2) * var(--__beam-bgh) * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at calc(73% + var(--__beam-bx2)) calc(-1% + var(--__beam-by2)),oklab(from var(--__beam-c6) l a b/var(--__beam-bop-tr)),#0000),radial-gradient(ellipse calc(15px * var(--__beam-bw3) * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(44px * var(--__beam-bh3) * var(--__beam-bgh) * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at calc(100% + var(--__beam-bx3)) calc(33% + var(--__beam-by3)),oklab(from var(--__beam-c7) l a b/var(--__beam-bop-tr)),#0000),radial-gradient(ellipse calc(19px * var(--__beam-bw1) * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(38px * var(--__beam-bh1) * var(--__beam-bgh) * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at calc(101% + var(--__beam-bx1)) calc(72% + var(--__beam-by1)),oklab(from var(--__beam-c8) l a b/var(--__beam-bop-br)),#0000),radial-gradient(ellipse calc(84px * var(--__beam-bw2) * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(13px * var(--__beam-bh2) * var(--__beam-bgh) * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at calc(67% + var(--__beam-bx2)) calc(100% + var(--__beam-by2)),oklab(from var(--__beam-c5) l a b/var(--__beam-bop-br)),#0000),radial-gradient(ellipse calc(60px * var(--__beam-bw3) * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(21px * var(--__beam-bh3) * var(--__beam-bgh) * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at calc(24% + var(--__beam-bx3)) calc(101% + var(--__beam-by3)),oklab(from var(--__beam-c2) l a b/var(--__beam-bop-bl)),#0000),radial-gradient(ellipse calc(17px * var(--__beam-bw1) * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(40px * var(--__beam-bh1) * var(--__beam-bgh) * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at calc(0% + var(--__beam-bx1)) calc(60% + var(--__beam-by1)),oklab(from var(--__beam-c3) l a b/var(--__beam-bop-bl)),#0000),radial-gradient(ellipse calc(13px * var(--__beam-bw2) * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(32px * var(--__beam-bh2) * var(--__beam-bgh) * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at calc(-1% + var(--__beam-bx2)) calc(28% + var(--__beam-by2)),oklab(from var(--__beam-c4) l a b/var(--__beam-bop-tl)),#0000);pointer-events:none}&:before{inset:-10px;z-index:-1;border-radius:calc(var(--__beam-radius-tl) + 10px) calc(var(--__beam-radius-tr) + 10px) calc(var(--__beam-radius-br) + 10px) calc(var(--__beam-radius-bl) + 10px);transform:scale(.95,.9);opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-inner-opacity) * var(--vui-beam-strength));filter:blur(var(--vui-beam-core-blur,3px)) hue-rotate(calc(var(--vui-beam-hue-base, 0deg) + var(--vui-beam-hue))) brightness(var(--vui-beam-brightness,1.3)) saturate(var(--vui-beam-saturation,1.2))}[data-beam-bloom]{display:block;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-bloom-opacity) * var(--vui-beam-strength));filter:blur(var(--vui-beam-bloom-blur,22.5px)) hue-rotate(calc(var(--vui-beam-hue-base, 0deg) + var(--vui-beam-hue))) brightness(var(--vui-beam-brightness,1.3)) saturate(var(--vui-beam-saturation,1.2))}}@media (prefers-reduced-motion:reduce){&:is([data-animate],[data-fading]),&:is([data-animate],[data-fading]) [data-beam-bloom],&:is([data-animate],[data-fading]):after,&:is([data-animate],[data-fading]):before{animation:none!important}}}&[data-beam-static-colors=true]:is([data-animate],[data-fading]):after,&[data-beam-static-colors=true]:is([data-animate],[data-fading]):before{animation-name:none;filter:brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}&[data-beam-static-colors=true]:is([data-animate],[data-fading]) [data-beam-bloom]{animation-name:none;filter:blur(8px) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}&[data-beam-variant=pulse-outside][data-beam-static-colors=true]:is([data-animate],[data-fading]):before{filter:blur(var(--vui-beam-core-blur,3px)) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}&[data-beam-variant=pulse-outside][data-beam-static-colors=true]:is([data-animate],[data-fading]) [data-beam-bloom]{filter:blur(var(--vui-beam-bloom-blur,22.5px)) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}&[data-beam-variant=pulse-inner][data-beam-static-colors=true]:is([data-animate],[data-fading]):after,&[data-beam-variant=pulse-inner][data-beam-static-colors=true]:is([data-animate],[data-fading]):before{filter:brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}&[data-beam-variant=pulse-inner][data-beam-static-colors=true]:is([data-animate],[data-fading]) [data-beam-bloom]{filter:blur(8px) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}}.viraui__beam-module__Bloom_XrnlV{pointer-events:none}@keyframes viraui__beam-module__vui-beam-spin_PCRBV{to{--vui-beam-angle:360deg}}@keyframes viraui__beam-module__vui-beam-fade-in_-pZOw{to{--vui-beam-opacity:1}}@keyframes viraui__beam-module__vui-beam-fade-out_ITNKo{0%{--vui-beam-opacity:1}to{--vui-beam-opacity:0}}@keyframes viraui__beam-module__vui-beam-hue-shift_9CzG5{0%,to{filter:hue-rotate(calc(var(--vui-beam-hue-base, 0deg) - var(--vui-beam-hue-range))) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}50%{filter:hue-rotate(calc(var(--vui-beam-hue-base, 0deg) + var(--vui-beam-hue-range))) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}}@keyframes viraui__beam-module__beam-travel_FuPkI{0%{--vui-beam-x:0.06;--vui-beam-w:0.5}10%{--vui-beam-x:0.15;--vui-beam-w:0.8}20%{--vui-beam-x:0.25;--vui-beam-w:1.1}30%{--vui-beam-x:0.35;--vui-beam-w:1.3}40%{--vui-beam-x:0.44;--vui-beam-w:1.45}50%{--vui-beam-x:0.5;--vui-beam-w:1.5}60%{--vui-beam-x:0.56;--vui-beam-w:1.45}70%{--vui-beam-x:0.65;--vui-beam-w:1.3}80%{--vui-beam-x:0.75;--vui-beam-w:1.1}90%{--vui-beam-x:0.85;--vui-beam-w:0.8}to{--vui-beam-x:0.94;--vui-beam-w:0.5}}@keyframes viraui__beam-module__beam-edge-fade_PXYJA{0%,12.5%,87.5%,to{--vui-beam-edge:0}32.5%,67.5%{--vui-beam-edge:1}}@keyframes viraui__beam-module__beam-breathe_3BBMd{0%,to{--vui-beam-h:0.8}25%{--vui-beam-h:1.25}55%{--vui-beam-h:0.85}80%{--vui-beam-h:1.3}}@keyframes viraui__beam-module__beam-spike_1iIfV{0%,to{--vui-beam-spike:0.8}25%{--vui-beam-spike:1.3}50%{--vui-beam-spike:0.9}75%{--vui-beam-spike:1.4}}@keyframes viraui__beam-module__beam-spike2_d1gJy{0%,to{--vui-beam-spike2:1.2}25%{--vui-beam-spike2:0.7}50%{--vui-beam-spike2:1.4}75%{--vui-beam-spike2:0.8}}@keyframes viraui__beam-module__beam-hue-shift-bloom_Onfv-{0%,to{filter:blur(8px) hue-rotate(calc(var(--vui-beam-hue-base, 0deg) - 40deg)) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}50%{filter:blur(8px) hue-rotate(calc(var(--vui-beam-hue-base, 0deg) + 40deg)) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}}}

package/dist/components/beam/beam.d.ts

@@ -0,0 +1,93 @@
+import { SurfaceProps } from '..';
+import { ThemeTypes } from '@viraui/foundation/vira/types';
+import type * as React from 'react';
+export type BeamVariant = 'border' | 'line' | 'pulse-outside' | 'pulse-inner';
+export type BeamSize = 'small' | 'medium';
+export type BeamColor = 'primary' | ThemeTypes['highlight'] | 'colorful';
+/**
+ * Public Beam props.
+ *
+ * Root is a transparent Surface shell that exposes only `radius`. Put the visual
+ * card as children (typically `Surface` with `radius="auto"`).
+ *
+ * @default Beam-owned props use the defaults below; `radius` keeps Surface defaults when omitted.
+ */
+export type BeamProps = React.ComponentProps<'div'> & Pick<SurfaceProps, 'radius' | 'color'> & {
+    /**
+     * Effect family: rotating border, bottom line travel, or pulse breathe.
+     *
+     * @default 'border'
+     */
+    variant?: BeamVariant;
+    /**
+     * Border-only size preset (`small` compact / `medium` card). Ignored for other variants.
+     *
+     * @default 'medium'
+     */
+    size?: BeamSize;
+    /**
+     * Beam color: `primary` → `--global-primary`, a highlight token name → `--highlight-*`,
+     * or `colorful` upstream neon multi-stop palette.
+     *
+     * @default 'primary'
+     */
+    color?: BeamColor;
+    /**
+     * Whether the animation is logically on (fade in/out when toggled).
+     *
+     * @default true
+     */
+    animate?: boolean;
+    /**
+     * CSS time string for spin / travel / pulse period scaling.
+     *
+     * @default variant-specific (`1.96s` border, `3.1s` line, `2.3s` pulse)
+     */
+    duration?: string;
+    /**
+     * Overall strength/opacity of beam layers (0–1). Does not affect children.
+     *
+     * @default 1
+     */
+    strength?: number;
+    /**
+     * Brightness filter multiplier for glow layers.
+     *
+     * @default `1.9` pulse-outside, `0.75` pulse-inner, else `1.3` (upstream dark presets)
+     */
+    brightness?: number;
+    /**
+     * Saturation filter multiplier for glow layers.
+     *
+     * @default 1.2
+     */
+    saturation?: number;
+    /**
+     * Hue-rotate range for the CSS hue-shift animation (degrees, unitless number).
+     * Line variant caps at 13.
+     *
+     * @default 30
+     */
+    hueRange?: number;
+    /**
+     * Disables hue-shift / pulse hue drift for static token colors.
+     *
+     * @default false
+     */
+    staticColors?: boolean;
+    /**
+     * Shrinks the root to fit its content (`max-width: fit-content`).
+     *
+     * @default false
+     */
+    fitContent?: boolean;
+    /**
+     * Fired when the fade-in animation completes.
+     */
+    onActivate?: () => void;
+    /**
+     * Fired when the fade-out animation completes.
+     */
+    onDeactivate?: () => void;
+};
+export declare const Beam: React.FC<BeamProps>;

package/dist/components/beam/beam.guide.json

@@ -0,0 +1,123 @@
+{
+  "name": "Beam",
+  "structure": "<Beam>{children}</Beam>",
+  "summary": "Decorative animated border, line, or pulse glow on a transparent Surface shell (radius only). Put the visual card as children. CSS-module geometry plus shared ~30fps pulse rAF for pulse variants. Memory/CPU cost — use sparingly.",
+  "whenToUse": [
+    "Highlight a focal Surface with a traveling border beam",
+    "Bottom-edge line travel under a card or panel",
+    "Breathing pulse glow inside or outside a Surface",
+    "Token-colored or colorful multi-stop decorative emphasis"
+  ],
+  "whenNotToUse": [
+    "Default decoration on many cards — reserve for rare focal moments",
+    "Accessible status or focus indication — Beam is decorative only",
+    "As a replacement for Surface color/padding — compose Surface as children",
+    "Pointer-driven highlight — use Glow instead"
+  ],
+  "accessibility": [
+    "Root stays in the accessibility tree; bloom layer is empty div",
+    "Beam is not a focus or status indicator — consumer owns accessible names and state",
+    "Offscreen instances pause animations without firing activate/deactivate",
+    "prefers-reduced-motion disables motion and leaves a static resting look"
+  ],
+  "antiPatterns": [
+    "Relying on Beam for keyboard focus visibility",
+    "Treating Beam as the visual card instead of composing Surface children",
+    "Expecting theme light/dark auto-tuning — colors are token-driven and theme-agnostic",
+    "Using many pulse Beam instances on one page — shared rAF still paints per instance"
+  ],
+  "related": ["Surface", "Glow", "Shimmer"],
+  "properties": {
+    "react": {
+      "radius": {
+        "description": "Sets corner radius from the Vira radius token scale, a per-corner [top-left, top-right, bottom-right, bottom-left] tuple (0 for square corners), or auto for concentric radii from the nearest ancestor Surface."
+      },
+      "variant": {
+        "description": "Effect family: rotating border, bottom line travel, or pulse breathe (outside/inner)."
+      },
+      "size": {
+        "description": "Border-only size preset (small compact / medium card). Ignored for other variants."
+      },
+      "color": {
+        "description": "Beam color: primary → --global-primary, highlight token name → --highlight-*, colorful → upstream neon multi-stop RGB palette.",
+        "refCss": "color"
+      },
+      "animate": {
+        "description": "Whether the animation is logically on (fade in/out when toggled)."
+      },
+      "duration": {
+        "description": "CSS time string for spin / travel / pulse period scaling.",
+        "refCss": "duration"
+      },
+      "strength": {
+        "description": "Overall strength/opacity of beam layers (0–1). Does not affect children.",
+        "refCss": "strength"
+      },
+      "brightness": {
+        "description": "Brightness filter multiplier for glow layers. Defaults to 1.9 for pulse-outside, 0.75 for pulse-inner, otherwise 1.3.",
+        "refCss": "brightness"
+      },
+      "saturation": {
+        "description": "Saturation filter multiplier for glow layers.",
+        "refCss": "saturation"
+      },
+      "hueRange": {
+        "description": "Hue-rotate range for the CSS hue-shift animation (degrees). Line variant caps at 13.",
+        "refCss": "hue-range"
+      },
+      "staticColors": {
+        "description": "Disables hue-shift / pulse hue drift for static token colors."
+      },
+      "fitContent": {
+        "description": "Shrinks the root to fit its content (`max-width: fit-content`)."
+      },
+      "onActivate": {
+        "description": "Fired when the fade-in animation completes."
+      },
+      "onDeactivate": {
+        "description": "Fired when the fade-out animation completes."
+      }
+    },
+    "css": {
+      "angle": {
+        "description": "Conic / travel start angle animated by border and line variants."
+      },
+      "opacity": {
+        "description": "Fade opacity driven by fade-in / fade-out keyframes."
+      },
+      "duration": {
+        "description": "Spin / travel duration (and pulse period scale input).",
+        "refReact": "duration"
+      },
+      "strength": {
+        "description": "Overall beam layer strength multiplier.",
+        "refReact": "strength"
+      },
+      "brightness": {
+        "description": "Brightness filter multiplier.",
+        "refReact": "brightness"
+      },
+      "saturation": {
+        "description": "Saturation filter multiplier.",
+        "refReact": "saturation"
+      },
+      "hue-range": {
+        "description": "Hue-rotate oscillation range for non-static colors.",
+        "refReact": "hueRange"
+      },
+      "color": {
+        "description": "Resolved beam token color (primary or highlight). Colorful mode uses multi-stop internals.",
+        "refReact": "color"
+      },
+      "hue": {
+        "description": "Pulse hue drift angle written by the shared pulse driver."
+      },
+      "pulse-glow-sx": {
+        "description": "Per-axis X scale for pulse-outside glow geometry relative to a 350×140 reference."
+      },
+      "pulse-glow-sy": {
+        "description": "Per-axis Y scale for pulse-outside glow geometry relative to a 350×140 reference."
+      }
+    }
+  }
+}

package/dist/components/beam/beam.js

@@ -0,0 +1,173 @@
+"use client";
+import './beam.css';
+import { clsx } from "../../core/clsx.js";
+import { getBeamPulseDriverConfig, registerBeamPulse } from "./beam-pulse-driver.js";
+import beam_module_default from "./beam.module.js";
+import { Surface } from "../surface/surface.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/components/beam/beam.tsx
+var DEFAULT_DURATION = {
+	border: "1.96s",
+	line: "3.1s",
+	"pulse-inner": "2.3s",
+	"pulse-outside": "2.3s"
+};
+var assignRef = (ref, value) => {
+	if (typeof ref === "function") {
+		ref(value);
+		return;
+	}
+	if (ref) Reflect.set(ref, "current", value);
+};
+var parseDurationSeconds = (duration) => {
+	const trimmed = duration.trim();
+	if (trimmed.endsWith("ms")) return Number.parseFloat(trimmed) / 1e3;
+	if (trimmed.endsWith("s")) return Number.parseFloat(trimmed);
+	return Number.parseFloat(trimmed);
+};
+var resolveBeamColor = (color) => {
+	if (color === "primary") return "var(--global-primary)";
+	if (color === "colorful") return "var(--global-primary)";
+	return `var(--highlight-${color})`;
+};
+var Beam = ({ animate = true, brightness: brightnessProp, children, className, color = "primary", duration: durationProp, fitContent = false, hueRange = 30, onActivate, onAnimationEnd: consumerOnAnimationEnd, onDeactivate, radius, ref, saturation = 1.2, size = "medium", staticColors = false, strength = 1, style, variant = "border", ...otherProps }) => {
+	const rootRef = useRef(null);
+	const [isActive, setIsActive] = useState(animate);
+	const [isFading, setIsFading] = useState(false);
+	const [isVisible, setIsVisible] = useState(true);
+	const [pulseGlowScale, setPulseGlowScale] = useState({
+		x: 1,
+		y: 1
+	});
+	const duration = durationProp ?? DEFAULT_DURATION[variant];
+	const isPulse = variant === "pulse-inner" || variant === "pulse-outside";
+	const effectiveHueRange = variant === "line" ? Math.min(hueRange, 13) : hueRange;
+	let brightness = 1.3;
+	if (brightnessProp !== void 0) brightness = brightnessProp;
+	else if (variant === "pulse-outside") brightness = 1.9;
+	else if (variant === "pulse-inner") brightness = .75;
+	const setRootRef = useCallback((node) => {
+		rootRef.current = node;
+		assignRef(ref, node);
+	}, [ref]);
+	useEffect(() => {
+		if (animate && !isActive && !isFading) setIsActive(true);
+		else if (!animate && isActive && !isFading) setIsFading(true);
+	}, [
+		animate,
+		isActive,
+		isFading
+	]);
+	useEffect(() => {
+		const el = rootRef.current;
+		if (!el || typeof IntersectionObserver === "undefined") return;
+		const observer = new IntersectionObserver((entries) => {
+			for (const entry of entries) setIsVisible(entry.isIntersecting);
+		}, { rootMargin: "256px" });
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, []);
+	useEffect(() => {
+		if (variant !== "pulse-outside") {
+			setPulseGlowScale({
+				x: 1,
+				y: 1
+			});
+			return;
+		}
+		const el = rootRef.current;
+		if (!el) return;
+		const REF_WIDTH = 350;
+		const REF_HEIGHT = 140;
+		const MIN_SCALE = .35;
+		const MAX_SCALE = 4;
+		const clamp = (value) => Math.max(MIN_SCALE, Math.min(MAX_SCALE, value));
+		const measure = () => {
+			const child = [...el.children].find((node) => !node.hasAttribute("data-beam-bloom"));
+			if (!child) return;
+			const rect = child.getBoundingClientRect();
+			if (!rect.width || !rect.height) return;
+			const x = +clamp(rect.width / REF_WIDTH).toFixed(3);
+			const y = +clamp(rect.height / REF_HEIGHT).toFixed(3);
+			setPulseGlowScale((prev) => prev.x === x && prev.y === y ? prev : {
+				x,
+				y
+			});
+		};
+		measure();
+		const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(measure) : null;
+		resizeObserver?.observe(el);
+		const mutationObserver = typeof MutationObserver !== "undefined" ? new MutationObserver(measure) : null;
+		mutationObserver?.observe(el, { childList: true });
+		return () => {
+			resizeObserver?.disconnect();
+			mutationObserver?.disconnect();
+		};
+	}, [variant]);
+	useEffect(() => {
+		if (!isPulse || !(isActive || isFading) || !isVisible) return;
+		const el = rootRef.current;
+		if (!el) return;
+		return registerBeamPulse(el, getBeamPulseDriverConfig(variant, parseDurationSeconds(duration), staticColors));
+	}, [
+		isPulse,
+		variant,
+		duration,
+		staticColors,
+		isActive,
+		isFading,
+		isVisible
+	]);
+	const handleAnimationEnd = useCallback((event) => {
+		const { animationName } = event;
+		if (animationName.includes("fade-out")) {
+			setIsActive(false);
+			setIsFading(false);
+			onDeactivate?.();
+		} else if (animationName.includes("fade-in")) onActivate?.();
+		consumerOnAnimationEnd?.(event);
+	}, [
+		onActivate,
+		onDeactivate,
+		consumerOnAnimationEnd
+	]);
+	const dynamicStyle = {
+		"--vui-beam-duration": duration,
+		"--vui-beam-strength": Math.max(0, Math.min(1, strength)),
+		"--vui-beam-brightness": brightness,
+		"--vui-beam-saturation": saturation,
+		"--vui-beam-hue-range": `${effectiveHueRange}deg`,
+		"--vui-beam-color": resolveBeamColor(color),
+		...variant === "pulse-outside" && {
+			"--vui-beam-pulse-glow-sx": pulseGlowScale.x,
+			"--vui-beam-pulse-glow-sy": pulseGlowScale.y
+		},
+		...style
+	};
+	const showAnimate = isActive && !isFading;
+	const showPaused = showAnimate && !isVisible;
+	return /* @__PURE__ */ jsxs(Surface, {
+		...otherProps,
+		ref: setRootRef,
+		className: clsx(beam_module_default.Beam, className),
+		style: dynamicStyle,
+		radius,
+		overflow: variant === "pulse-outside" ? void 0 : "hidden",
+		"data-beam-variant": variant,
+		...variant === "border" && { "data-beam-size": size },
+		"data-beam-color": color,
+		"data-beam-fit-content": fitContent ? "true" : "false",
+		"data-beam-static-colors": staticColors ? "true" : "false",
+		...showAnimate && { "data-animate": "" },
+		...isFading && { "data-fading": "" },
+		...showPaused && { "data-paused": "" },
+		onAnimationEnd: handleAnimationEnd,
+		children: [children, /* @__PURE__ */ jsx("div", {
+			className: beam_module_default.Bloom,
+			"data-beam-bloom": ""
+		})]
+	});
+};
+//#endregion
+export { Beam };

package/dist/components/beam/beam.module.js

@@ -0,0 +1,19 @@
+//#region src/components/beam/beam.module.css
+var Beam = "viraui__beam-module__Beam_xT5Pt";
+var Bloom = "viraui__beam-module__Bloom_XrnlV";
+var beam_module_default = {
+	Beam,
+	"vui-beam-spin": "viraui__beam-module__vui-beam-spin_PCRBV",
+	"vui-beam-fade-in": "viraui__beam-module__vui-beam-fade-in_-pZOw",
+	"vui-beam-fade-out": "viraui__beam-module__vui-beam-fade-out_ITNKo",
+	"vui-beam-hue-shift": "viraui__beam-module__vui-beam-hue-shift_9CzG5",
+	"beam-travel": "viraui__beam-module__beam-travel_FuPkI",
+	"beam-edge-fade": "viraui__beam-module__beam-edge-fade_PXYJA",
+	"beam-breathe": "viraui__beam-module__beam-breathe_3BBMd",
+	"beam-spike": "viraui__beam-module__beam-spike_1iIfV",
+	"beam-spike2": "viraui__beam-module__beam-spike2_d1gJy",
+	"beam-hue-shift-bloom": "viraui__beam-module__beam-hue-shift-bloom_Onfv-",
+	Bloom
+};
+//#endregion
+export { Beam, Bloom, beam_module_default as default };

package/dist/components/beam/index.d.ts

@@ -0,0 +1,2 @@
+export { Beam } from './beam';
+export type { BeamColor, BeamProps, BeamSize, BeamVariant } from './beam';

package/dist/components/glow/glow-tracker.js

@@ -91,9 +91,5 @@ var unregisterGlow = (el) => {
 	entries.delete(el);
 	detachListener(doc);
 };
-/** Story / test helper: count of documents with an attached `pointermove` listener. */
-var getGlowListenerCount = () => listeningDocs.size;
-/** Story / test helper: registered glow root count. */
-var getGlowRegistrySize = () => entries.size;
 //#endregion
-export { getGlowListenerCount, getGlowRegistrySize, registerGlow, unregisterGlow, unwrapGlowAngle };
+export { registerGlow, unregisterGlow, unwrapGlowAngle };

package/dist/components/glow/glow.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-glow-starting-angle{syntax:"<number>";inherits:true;initial-value:0}@property --vui-glow-angle-lag{syntax:"<time>";inherits:true;initial-value:80ms}@property --vui-glow-auto-rotate-speed{syntax:"<time>";inherits:true;initial-value:4s}@property --vui-glow-active-opacity{syntax:"<number>";inherits:true;initial-value:0}@property --vui-glow-spread{syntax:"<number>";inherits:true;initial-value:250}@property --vui-glow-border-width{syntax:"<length>";inherits:true;initial-value:2px}@property --vui-glow-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-glow-border-offset{syntax:"<length>";inherits:true;initial-value:5px}@property --vui-glow-color{syntax:"*";inherits:true;initial-value:#0000}@property --__glow-radius-tl{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__glow-radius-tr{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__glow-radius-br{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__glow-radius-bl{syntax:"<length-percentage>";inherits:true;initial-value:0}@keyframes viraui__glow-module__vui-glow-auto-rotate_Zh-hL{0%{--vui-glow-starting-angle:0}to{--vui-glow-starting-angle:360}}.viraui__glow-module__Glow_7394e{--vui-glow-border-color:var(--global-contrast);--vui-glow-color:conic-gradient(from 180deg at 50% 70%,#0000,var(--global-primary),#0000);--__glow-radius-tl:var(--vui-surface-border-radius-top-left);--__glow-radius-tr:var(--vui-surface-border-radius-top-right);--__glow-radius-br:var(--vui-surface-border-radius-bottom-right);--__glow-radius-bl:var(--vui-surface-border-radius-bottom-left);position:relative;z-index:0;transition:--vui-glow-starting-angle var(--vui-glow-angle-lag) ease-out;&[data-glow-fit-content=true]{max-width:fit-content}&[data-glow-rainbow=true]{--vui-glow-color:conic-gradient(from 180deg at 50% 50%,var(--highlight-cyan),var(--highlight-blue),var(--highlight-green),var(--highlight-purple),var(--highlight-red),var(--highlight-indigo),var(--highlight-yellow),var(--highlight-salmon),var(--highlight-magenta),var(--highlight-cyan))}&[data-glow-auto-rotate=true]{--vui-glow-active-opacity:1;transition:none;animation:viraui__glow-module__vui-glow-auto-rotate_Zh-hL var(--vui-glow-auto-rotate-speed) linear infinite}&>*{--vui-glow-starting-angle:initial;--vui-glow-active-opacity:initial}&:after,&:before{content:"";position:absolute;z-index:1;pointer-events:none;inset:calc(var(--vui-glow-border-offset) * -1);opacity:var(--vui-glow-active-opacity);border:var(--vui-glow-border-width) solid #0000;border-radius:calc(var(--vui-glow-border-offset) + var(--__glow-radius-tl)) calc(var(--vui-glow-border-offset) + var(--__glow-radius-tr)) calc(var(--vui-glow-border-offset) + var(--__glow-radius-br)) calc(var(--vui-glow-border-offset) + var(--__glow-radius-bl));transition:opacity 1s;@media (prefers-reduced-motion:reduce){display:none}}&:not([data-glow-auto-rotate=true]){&:after,&:before{@media (hover:none),(pointer:coarse){display:none}}}&:before{background:var(--vui-glow-border-color);mask:linear-gradient(#0000,#0000),conic-gradient(from calc(((var(--vui-glow-starting-angle) + (var(--vui-glow-spread) * .25)) - (var(--vui-glow-spread) * 1.5)) * 1deg),oklch(100% 0 0deg/15%) 0deg,#fff,oklch(100% 0 0deg/15%) calc(var(--vui-glow-spread) * 2.5deg));mask-clip:padding-box,border-box;mask-composite:intersect}&:after{background:var(--vui-glow-color);filter:brightness(1.5);mask:linear-gradient(#0000,#0000),conic-gradient(from calc(((var(--vui-glow-starting-angle) + (var(--vui-glow-spread) * .25)) - (var(--vui-glow-spread) * .5)) * 1deg),#0000 0deg,#fff,#0000 calc(var(--vui-glow-spread) * .5deg));mask-clip:padding-box,border-box;mask-composite:intersect;background-size:calc(100% + var(--vui-glow-border-width) * 2) calc(100% + var(--vui-glow-border-width) * 2);background-position:calc(var(--vui-glow-border-width) * -1) calc(var(--vui-glow-border-width) * -1)}&[data-glow-global=true]:after{background-attachment:fixed}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-glow-starting-angle{syntax:"<number>";inherits:true;initial-value:0}@property --vui-glow-angle-lag{syntax:"<time>";inherits:true;initial-value:80ms}@property --vui-glow-active-opacity{syntax:"<number>";inherits:true;initial-value:0}@property --vui-glow-spread{syntax:"<number>";inherits:true;initial-value:250}@property --vui-glow-border-width{syntax:"<length>";inherits:true;initial-value:2px}@property --vui-glow-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-glow-border-offset{syntax:"<length>";inherits:true;initial-value:5px}@property --vui-glow-color{syntax:"*";inherits:true;initial-value:#0000}@property --__glow-radius-tl{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__glow-radius-tr{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__glow-radius-br{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__glow-radius-bl{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__glow-module__Glow_7394e{--vui-glow-border-color:var(--global-contrast);--vui-glow-color:conic-gradient(from 180deg at 50% 70%,#0000,var(--global-primary),#0000);--__glow-radius-tl:var(--vui-surface-border-radius-top-left);--__glow-radius-tr:var(--vui-surface-border-radius-top-right);--__glow-radius-br:var(--vui-surface-border-radius-bottom-right);--__glow-radius-bl:var(--vui-surface-border-radius-bottom-left);position:relative;z-index:0;transition:--vui-glow-starting-angle var(--vui-glow-angle-lag) ease-out;&[data-glow-fit-content=true]{max-width:fit-content}&[data-glow-rainbow=true]{--vui-glow-color:conic-gradient(from 180deg at 50% 50%,var(--highlight-cyan),var(--highlight-blue),var(--highlight-green),var(--highlight-purple),var(--highlight-red),var(--highlight-indigo),var(--highlight-yellow),var(--highlight-salmon),var(--highlight-magenta),var(--highlight-cyan))}&>*{--vui-glow-starting-angle:initial;--vui-glow-active-opacity:initial}&:after,&:before{content:"";position:absolute;z-index:1;pointer-events:none;inset:calc(var(--vui-glow-border-offset) * -1);opacity:var(--vui-glow-active-opacity);border:var(--vui-glow-border-width) solid #0000;border-radius:calc(var(--vui-glow-border-offset) + var(--__glow-radius-tl)) calc(var(--vui-glow-border-offset) + var(--__glow-radius-tr)) calc(var(--vui-glow-border-offset) + var(--__glow-radius-br)) calc(var(--vui-glow-border-offset) + var(--__glow-radius-bl));transition:opacity 1s;@media (prefers-reduced-motion:reduce){display:none}@media (hover:none),(pointer:coarse){display:none}}&:before{background:var(--vui-glow-border-color);mask:linear-gradient(#0000,#0000),conic-gradient(from calc(((var(--vui-glow-starting-angle) + (var(--vui-glow-spread) * .25)) - (var(--vui-glow-spread) * 1.5)) * 1deg),oklch(100% 0 0deg/15%) 0deg,#fff,oklch(100% 0 0deg/15%) calc(var(--vui-glow-spread) * 2.5deg));mask-clip:padding-box,border-box;mask-composite:intersect}&:after{background:var(--vui-glow-color);filter:brightness(1.5);mask:linear-gradient(#0000,#0000),conic-gradient(from calc(((var(--vui-glow-starting-angle) + (var(--vui-glow-spread) * .25)) - (var(--vui-glow-spread) * .5)) * 1deg),#0000 0deg,#fff,#0000 calc(var(--vui-glow-spread) * .5deg));mask-clip:padding-box,border-box;mask-composite:intersect;background-size:calc(100% + var(--vui-glow-border-width) * 2) calc(100% + var(--vui-glow-border-width) * 2);background-position:calc(var(--vui-glow-border-width) * -1) calc(var(--vui-glow-border-width) * -1)}&[data-glow-global=true]:after{background-attachment:fixed}}}

package/dist/components/glow/glow.d.ts

@@ -75,23 +75,9 @@ export type GlowProps = React.ComponentProps<'div'> & Pick<SurfaceProps, 'radius
      * CSS transition duration (ms) for `--vui-glow-starting-angle`. Soft follow by default;
      * set `0` for instant snap. Tracker writes an unwrapped continuous angle so the
      * transition does not take the long way across the 0° seam.
-     * Ignored when `autoRotate` is true.
      *
      * @default 80
      */
     angleLag?: number;
-    /**
-     * Continuously rotates the highlight with a linear CSS animation and ignores the pointer.
-     * Always visible (including coarse pointers); still hidden under `prefers-reduced-motion`.
-     *
-     * @default false
-     */
-    autoRotate?: boolean;
-    /**
-     * Full-turn duration in seconds when `autoRotate` is true.
-     *
-     * @default 2
-     */
-    autoRotateSpeed?: number;
 };
 export declare const Glow: React.FC<GlowProps>;

package/dist/components/glow/glow.guide.json

@@ -5,28 +5,28 @@
   "whenToUse": [
     "Wrap a Surface (or other content) that should highlight toward the pointer",
     "Grid of glow shells that share one pointer highlight path",
-    "Nested glow inside a padded Surface using radius=\"auto\"",
-    "Decorative continuous spin with autoRotate (no pointer)"
+    "Nested glow inside a padded Surface using radius=\"auto\""
   ],
   "whenNotToUse": [
     "Default decoration on many cards — memory cost is high; reserve for rare focal moments",
-    "Static borders with no pointer interaction — use Surface border instead",
+    "Static or continuously animated borders — use Surface border or Beam instead",
     "Accessible status or focus indication — glow is decorative only",
     "As a replacement for Surface color/padding — compose Surface as children"
   ],
   "accessibility": [
     "Root stays in the accessibility tree; highlight is decorative CSS only",
     "Glow is not a focus or status indicator — consumer owns accessible names and state",
-    "Pointer mode hides under coarse pointer / no-hover; autoRotate stays visible; both hide under prefers-reduced-motion"
+    "Highlight hides under coarse pointer / no-hover and under prefers-reduced-motion"
   ],
   "antiPatterns": [
     "Relying on Glow for keyboard focus visibility",
     "Treating Glow as the visual card (color/padding) instead of composing Surface children",
     "Setting overflow:hidden on an ancestor Surface when outer glow must remain visible",
     "Expecting soft bloom Light layer — Glow is border-ring only",
-    "Using many Glow instances (especially with autoRotate) on one page — memory- and CPU-heavy"
+    "Using many Glow instances on one page — memory- and CPU-heavy",
+    "Expecting continuous spin — use Beam instead"
   ],
-  "related": ["Surface", "Shimmer", "ProgressiveBlur"],
+  "related": ["Surface", "Beam", "Shimmer", "ProgressiveBlur"],
   "properties": {
     "react": {
       "radius": {
@@ -68,29 +68,18 @@
         "description": "Uses the multi-stop rainbow highlight gradient and disables global highlight attachment."
       },
       "angleLag": {
-        "description": "CSS transition duration in milliseconds for the pointer-driven starting angle. Soft follow by default; set 0 for instant snap. Ignored when autoRotate is true.",
+        "description": "CSS transition duration in milliseconds for the pointer-driven starting angle. Soft follow by default; set 0 for instant snap.",
         "refCss": "angle-lag"
-      },
-      "autoRotate": {
-        "description": "Continuously rotates the highlight with a linear CSS animation and ignores the pointer. Always visible including on coarse pointers; still hidden under prefers-reduced-motion."
-      },
-      "autoRotateSpeed": {
-        "description": "Full-turn duration in seconds when autoRotate is true.",
-        "refCss": "auto-rotate-speed"
       }
     },
     "css": {
       "starting-angle": {
-        "description": "Conic gradient start angle in degrees (unitless number). Pointer tracker writes a continuous unwrapped value; autoRotate animates 0→360."
+        "description": "Conic gradient start angle in degrees (unitless number). Pointer tracker writes a continuous unwrapped value."
       },
       "angle-lag": {
-        "description": "Transition duration for `--vui-glow-starting-angle` (pointer mode).",
+        "description": "Transition duration for `--vui-glow-starting-angle`.",
         "refReact": "angleLag"
       },
-      "auto-rotate-speed": {
-        "description": "Duration of one full auto-rotate turn.",
-        "refReact": "autoRotateSpeed"
-      },
       "active-opacity": {
         "description": "Current glow opacity from proximity tracking. Written by the shared tracker."
       },

package/dist/components/glow/glow.js

@@ -18,7 +18,7 @@ var glowGlobalAttr = (rainbowColors, globalHighlight) => {
 	if (rainbowColors) return "false";
 	return globalHighlight ? "true" : "false";
 };
-var Glow = ({ angleLag = 80, autoRotate = false, autoRotateSpeed = 4, borderColor = "var(--global-contrast)", borderOffset = 5, borderWidth = 2, children, className, fitContent = false, globalHighlight = true, glowColor, opacity = 0, proximity = 170, rainbowColors = false, ref, spread = 250, style, radius, ...otherProps }) => {
+var Glow = ({ angleLag = 80, borderColor = "var(--global-contrast)", borderOffset = 5, borderWidth = 2, children, className, fitContent = false, globalHighlight = true, glowColor, opacity = 0, proximity = 170, rainbowColors = false, ref, spread = 250, style, radius, ...otherProps }) => {
 	const rootRef = useRef(null);
 	const setRootRef = (node) => {
 		rootRef.current = node;
@@ -26,7 +26,7 @@ var Glow = ({ angleLag = 80, autoRotate = false, autoRotateSpeed = 4, borderColo
 	};
 	useEffect(() => {
 		const el = rootRef.current;
-		if (!el || autoRotate) return;
+		if (!el) return;
 		registerGlow({
 			el,
 			proximity,
@@ -35,18 +35,13 @@ var Glow = ({ angleLag = 80, autoRotate = false, autoRotateSpeed = 4, borderColo
 		return () => {
 			unregisterGlow(el);
 		};
-	}, [
-		autoRotate,
-		proximity,
-		opacity
-	]);
+	}, [proximity, opacity]);
 	const dynamicStyle = {
 		"--vui-glow-spread": spread,
 		"--vui-glow-border-width": `${borderWidth}px`,
 		"--vui-glow-border-color": borderColor,
 		"--vui-glow-border-offset": `${borderOffset}px`,
 		"--vui-glow-angle-lag": `${angleLag}ms`,
-		"--vui-glow-auto-rotate-speed": `${autoRotateSpeed}s`,
 		...glowColor && !rainbowColors && { "--vui-glow-color": glowColor },
 		...style
 	};
@@ -59,7 +54,6 @@ var Glow = ({ angleLag = 80, autoRotate = false, autoRotateSpeed = 4, borderColo
 		"data-glow-fit-content": fitContent ? "true" : "false",
 		"data-glow-global": glowGlobalAttr(rainbowColors, globalHighlight),
 		"data-glow-rainbow": rainbowColors ? "true" : "false",
-		"data-glow-auto-rotate": autoRotate ? "true" : "false",
 		children
 	});
 };

package/dist/components/glow/glow.module.js

@@ -1,8 +1,5 @@
 //#region src/components/glow/glow.module.css
 var Glow = "viraui__glow-module__Glow_7394e";
-var glow_module_default = {
-	Glow,
-	"vui-glow-auto-rotate": "viraui__glow-module__vui-glow-auto-rotate_Zh-hL"
-};
+var glow_module_default = { Glow };
 //#endregion
 export { Glow, glow_module_default as default };

package/dist/components/glow/index.d.ts

@@ -1,3 +1,2 @@
 export { Glow } from './glow';
 export type { GlowProps } from './glow';
-export { getGlowListenerCount, getGlowRegistrySize } from './glow-tracker';

package/dist/components/index.d.ts

@@ -4,6 +4,7 @@ export * from './autocomplete';
 export * from './avatar';
 export * from './avatar-group';
 export * from './badge';
+export * from './beam';
 export * from './bleed';
 export * from './button';
 export * from './checkbox';

package/dist/index.js

@@ -6,6 +6,7 @@ import { Autocomplete } from "./components/autocomplete/autocomplete.js";
 import { Avatar } from "./components/avatar/avatar.js";
 import { AvatarGroup } from "./components/avatar-group/avatar-group.js";
 import { Badge } from "./components/badge/badge.js";
+import { Beam } from "./components/beam/beam.js";
 import { Bleed } from "./components/bleed/bleed.js";
 import { Spinner } from "./components/spinner/spinner.js";
 import { Button } from "./components/button/button.js";
@@ -26,7 +27,6 @@ import { Elevator } from "./components/elevator/elevator.js";
 import { Fieldset } from "./components/fieldset/fieldset.js";
 import { FitText } from "./components/fit-text/fit-text.js";
 import { Surface } from "./components/surface/surface.js";
-import { getGlowListenerCount, getGlowRegistrySize } from "./components/glow/glow-tracker.js";
 import { Glow } from "./components/glow/glow.js";
 import { Grid } from "./components/grid/grid.js";
 import { IconButton } from "./components/icon-button/icon-button.js";
@@ -66,4 +66,4 @@ import { ToggleGroup } from "./components/toggle-group/toggle-group.js";
 import { Typewriter } from "./components/typewriter/typewriter.js";
 import { TooltipContent } from "./components/tooltip/tooltip-content.js";
 import { Tooltip, TooltipProvider, TooltipTrigger } from "./components/tooltip/tooltip.js";
-export { Accordion, Annotate, Autocomplete, Avatar, AvatarGroup, Badge, Bleed, Button, ButtonLink, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, ELEVATION_DEFAULTS, Elevator, Fieldset, FitText, Glow, Grid, IconButton, IconButtonLink, LinearProgress, Masonry, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuLinkItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Meter, Popover, PopoverClose, PopoverDescription, PopoverSheet, PopoverTitle, PopoverTrigger, ProgressiveBlur, Radio, RadioGroup, Select, Separator, Shimmer, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, Toast, ToggleButton, ToggleGroup, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typewriter, getElevationProps, getGlowListenerCount, getGlowRegistrySize };
+export { Accordion, Annotate, Autocomplete, Avatar, AvatarGroup, Badge, Beam, Bleed, Button, ButtonLink, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, ELEVATION_DEFAULTS, Elevator, Fieldset, FitText, Glow, Grid, IconButton, IconButtonLink, LinearProgress, Masonry, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuLinkItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Meter, Popover, PopoverClose, PopoverDescription, PopoverSheet, PopoverTitle, PopoverTrigger, ProgressiveBlur, Radio, RadioGroup, Select, Separator, Shimmer, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, Toast, ToggleButton, ToggleGroup, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typewriter, getElevationProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viraui/react",
-  "version": "2026.1.10",
+  "version": "2026.2.0",
   "private": false,
   "files": [
     "dist"
@@ -35,7 +35,7 @@
     "unplugin-dts": "1.0.3",
     "vite": "8.1.4",
     "vite-plugin-static-copy": "4.1.1",
-    "@viraui/foundation": "2026.1.10",
+    "@viraui/foundation": "2026.2.0",
     "@viraui/icons": "2026.0.1",
     "@viraui/postcss-config": "2026.0.0",
     "@viraui/tsconfig": "2026.0.0"