@windrun-huaiin/third-ui 29.2.0 → 30.0.0

package/dist/main/beam-frame/beam-frame.js

@@ -0,0 +1,262 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var animejs = require('animejs');
+var react = require('motion/react');
+var lib = require('@windrun-huaiin/base-ui/lib');
+var utils = require('@windrun-huaiin/lib/utils');
+
+const THEME_PALETTES = {
+    purple: { a: '#AC62FD', b: '#EC4899', c: '#6366F1' },
+    orange: { a: '#F97316', b: '#F59E0B', c: '#EF4444' },
+    indigo: { a: '#6366F1', b: '#3B82F6', c: '#06B6D4' },
+    emerald: { a: '#10B981', b: '#14B8A6', c: '#22C55E' },
+    rose: { a: '#F43F5E', b: '#EC4899', c: '#FB7185' },
+};
+const TONE_PALETTES = {
+    rainbow: { a: '#22D3EE', b: '#A855F7', c: '#F97316' },
+    mono: { a: '#E5E7EB', b: '#94A3B8', c: '#FFFFFF' },
+    warm: { a: '#F97316', b: '#FBBF24', c: '#EF4444' },
+    cool: { a: '#06B6D4', b: '#6366F1', c: '#14B8A6' },
+};
+const INTENSITY_STYLE = {
+    subtle: {
+        beamOpacity: 0.86,
+        glowOpacity: 0.16,
+        beamLength: 0.24,
+        beamWidth: 2.2,
+        haloWidth: 6,
+    },
+    regular: {
+        beamOpacity: 1,
+        glowOpacity: 0.24,
+        beamLength: 0.34,
+        beamWidth: 3,
+        haloWidth: 8,
+    },
+    strong: {
+        beamOpacity: 1,
+        glowOpacity: 0.32,
+        beamLength: 0.46,
+        beamWidth: 4,
+        haloWidth: 10,
+    },
+};
+const BASE_BORDER_OPACITY = 0.18;
+const BASE_DURATION_SECONDS = 1.8;
+const DEFAULT_RADIUS = 24;
+function getPalette(tone) {
+    var _a;
+    if (tone !== 'theme') {
+        return TONE_PALETTES[tone];
+    }
+    return (_a = THEME_PALETTES[lib.themeName]) !== null && _a !== void 0 ? _a : THEME_PALETTES.purple;
+}
+function normalizeDuration(duration) {
+    if (!Number.isFinite(duration)) {
+        return 1.8;
+    }
+    return Math.max(0.4, duration);
+}
+function useMeasuredFrameSize() {
+    const ref = React.useRef(null);
+    const [size, setSize] = React.useState({ width: 0, height: 0 });
+    React.useEffect(() => {
+        const node = ref.current;
+        if (!node) {
+            return undefined;
+        }
+        const updateSize = () => {
+            const rect = node.getBoundingClientRect();
+            setSize({
+                width: Math.max(0, rect.width),
+                height: Math.max(0, rect.height),
+            });
+        };
+        updateSize();
+        const observer = new ResizeObserver(updateSize);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, []);
+    return { ref, size };
+}
+function useInteractiveRunning(active, interactive) {
+    const [isInteractiveRunning, setIsInteractiveRunning] = React.useState(false);
+    const interactionProps = interactive
+        ? {
+            onMouseEnter: () => setIsInteractiveRunning(true),
+            onMouseLeave: () => setIsInteractiveRunning(false),
+            onFocus: () => setIsInteractiveRunning(true),
+            onBlur: () => setIsInteractiveRunning(false),
+        }
+        : {};
+    return {
+        isRunning: active || isInteractiveRunning,
+        interactionProps,
+    };
+}
+function createRootStyle({ intensity, tone, radius, }) {
+    const palette = getPalette(tone);
+    const intensityStyle = INTENSITY_STYLE[intensity];
+    const frameRadius = radius !== null && radius !== void 0 ? radius : DEFAULT_RADIUS;
+    const svgRadius = Math.max(0, Math.min(49, frameRadius));
+    return {
+        '--beam-frame-radius': `${frameRadius}px`,
+        '--beam-frame-svg-radius': svgRadius,
+        '--beam-frame-color-a': palette.a,
+        '--beam-frame-color-b': palette.b,
+        '--beam-frame-color-c': palette.c,
+        '--beam-frame-border-opacity': BASE_BORDER_OPACITY,
+        '--beam-frame-beam-opacity': intensityStyle.beamOpacity,
+        '--beam-frame-glow-opacity': intensityStyle.glowOpacity,
+        '--beam-frame-beam-length': intensityStyle.beamLength,
+        '--beam-frame-beam-width': intensityStyle.beamWidth,
+        '--beam-frame-halo-width': intensityStyle.haloWidth,
+    };
+}
+function createBaseBorderBackground() {
+    return 'rgba(148, 163, 184, var(--beam-frame-border-opacity))';
+}
+function createBorderRingMask() {
+    return {
+        WebkitMask: 'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',
+        WebkitMaskComposite: 'xor',
+        maskComposite: 'exclude',
+        padding: '1px',
+    };
+}
+function BeamFrameShell({ children, className, tone, intensity, radius, isRunning, interactionProps, renderBeam, rootRef, }) {
+    return (jsxRuntime.jsxs("div", Object.assign({ ref: rootRef, className: utils.cn('group/beam-frame relative isolate overflow-hidden rounded-[var(--beam-frame-radius)] p-px', className), "data-beam-running": isRunning ? 'true' : 'false', style: createRootStyle({ intensity, tone, radius }) }, interactionProps, { children: [jsxRuntime.jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-0 rounded-[inherit]", style: Object.assign({ background: createBaseBorderBackground() }, createBorderRingMask()) }), renderBeam(isRunning), jsxRuntime.jsx("div", { className: "relative z-10 rounded-[calc(var(--beam-frame-radius)-1px)]", children: children })] })));
+}
+function MotionAroundBeam({ isRunning, duration, radius, size, }) {
+    const gradientId = React.useId().replace(/:/g, '');
+    const haloGradientId = React.useId().replace(/:/g, '');
+    const beamGroupRef = React.useRef(null);
+    const controlsRef = React.useRef(null);
+    const hasStartedRef = React.useRef(false);
+    const strokeWidth = 3;
+    const width = Math.max(1, size.width);
+    const height = Math.max(1, size.height);
+    const rectOffset = strokeWidth / 2;
+    const rectWidth = Math.max(1, width - strokeWidth);
+    const rectHeight = Math.max(1, height - strokeWidth);
+    const rectRadius = Math.max(0, Math.min(radius !== null && radius !== void 0 ? radius : DEFAULT_RADIUS, rectWidth / 2, rectHeight / 2));
+    React.useEffect(() => {
+        var _a;
+        const node = beamGroupRef.current;
+        if (!node) {
+            return undefined;
+        }
+        if (isRunning) {
+            hasStartedRef.current = true;
+        }
+        node.style.opacity = isRunning || hasStartedRef.current ? 'var(--beam-frame-beam-opacity)' : '0';
+        if (!isRunning) {
+            (_a = controlsRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+            return undefined;
+        }
+        if (controlsRef.current) {
+            controlsRef.current.speed = BASE_DURATION_SECONDS / duration;
+            controlsRef.current.play();
+            return undefined;
+        }
+        controlsRef.current = react.animate(node, { strokeDashoffset: [0, -1] }, {
+            duration: BASE_DURATION_SECONDS,
+            repeat: Infinity,
+            ease: 'linear',
+        });
+        controlsRef.current.speed = BASE_DURATION_SECONDS / duration;
+        return undefined;
+    }, [duration, isRunning]);
+    React.useEffect(() => {
+        return () => {
+            var _a;
+            (_a = controlsRef.current) === null || _a === void 0 ? void 0 : _a.stop();
+            controlsRef.current = null;
+        };
+    }, []);
+    return (jsxRuntime.jsxs("svg", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-0 h-full w-full overflow-visible", preserveAspectRatio: "none", viewBox: `0 0 ${width} ${height}`, children: [jsxRuntime.jsxs("g", { ref: beamGroupRef, opacity: "0", children: [jsxRuntime.jsx("rect", { x: rectOffset, y: rectOffset, width: rectWidth, height: rectHeight, rx: rectRadius, ry: rectRadius, pathLength: "1", fill: "none", stroke: `url(#${haloGradientId})`, strokeLinecap: "round", strokeWidth: "var(--beam-frame-halo-width)", vectorEffect: "non-scaling-stroke", style: {
+                            strokeDasharray: 'calc(var(--beam-frame-beam-length) * 0.86) calc(1 - var(--beam-frame-beam-length) * 0.86)',
+                        }, opacity: "var(--beam-frame-glow-opacity)" }), jsxRuntime.jsx("rect", { x: rectOffset, y: rectOffset, width: rectWidth, height: rectHeight, rx: rectRadius, ry: rectRadius, pathLength: "1", fill: "none", stroke: `url(#${gradientId})`, strokeLinecap: "round", strokeWidth: "var(--beam-frame-beam-width)", vectorEffect: "non-scaling-stroke", style: {
+                            strokeDasharray: 'var(--beam-frame-beam-length) calc(1 - var(--beam-frame-beam-length))',
+                        } })] }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsxs("linearGradient", { id: haloGradientId, x1: "0%", x2: "100%", y1: "0%", y2: "100%", children: [jsxRuntime.jsx("stop", { offset: "0%", stopColor: "var(--beam-frame-color-a)", stopOpacity: "0.18" }), jsxRuntime.jsx("stop", { offset: "34%", stopColor: "var(--beam-frame-color-b)", stopOpacity: "0.72" }), jsxRuntime.jsx("stop", { offset: "54%", stopColor: "var(--beam-frame-color-c)", stopOpacity: "1" }), jsxRuntime.jsx("stop", { offset: "74%", stopColor: "var(--beam-frame-color-a)", stopOpacity: "0.66" }), jsxRuntime.jsx("stop", { offset: "100%", stopColor: "var(--beam-frame-color-b)", stopOpacity: "0.18" })] }), jsxRuntime.jsxs("linearGradient", { id: gradientId, x1: "0%", x2: "100%", y1: "0%", y2: "100%", children: [jsxRuntime.jsx("stop", { offset: "0%", stopColor: "var(--beam-frame-color-a)", stopOpacity: "0.52" }), jsxRuntime.jsx("stop", { offset: "34%", stopColor: "var(--beam-frame-color-b)", stopOpacity: "0.9" }), jsxRuntime.jsx("stop", { offset: "50%", stopColor: "var(--beam-frame-color-c)", stopOpacity: "1" }), jsxRuntime.jsx("stop", { offset: "68%", stopColor: "var(--beam-frame-color-a)", stopOpacity: "0.86" }), jsxRuntime.jsx("stop", { offset: "100%", stopColor: "var(--beam-frame-color-c)", stopOpacity: "0.52" })] })] })] }));
+}
+function MotionBeamFrame(props) {
+    const { children, active = false, interactive = true, intensity = 'regular', tone = 'theme', duration = 1.8, radius, className, } = props;
+    const prefersReducedMotion = react.useReducedMotion();
+    const { isRunning, interactionProps } = useInteractiveRunning(active, interactive);
+    const shouldRun = isRunning && !prefersReducedMotion;
+    const normalizedDuration = normalizeDuration(duration);
+    const { ref, size } = useMeasuredFrameSize();
+    return (jsxRuntime.jsx(BeamFrameShell, { active: active, interactive: interactive, intensity: intensity, tone: tone, duration: normalizedDuration, radius: radius, className: className, isRunning: shouldRun, interactionProps: interactionProps, rootRef: ref, renderBeam: () => (jsxRuntime.jsx(MotionAroundBeam, { isRunning: shouldRun, duration: normalizedDuration, radius: radius, size: size })), children: children }));
+}
+function AnimeBeamLayer({ isRunning, duration, radius, size, }) {
+    const aroundBeamRef = React.useRef(null);
+    const animationRef = React.useRef(null);
+    const hasStartedRef = React.useRef(false);
+    const gradientId = React.useId().replace(/:/g, '');
+    const haloGradientId = React.useId().replace(/:/g, '');
+    const strokeWidth = 3;
+    const width = Math.max(1, size.width);
+    const height = Math.max(1, size.height);
+    const rectOffset = strokeWidth / 2;
+    const rectWidth = Math.max(1, width - strokeWidth);
+    const rectHeight = Math.max(1, height - strokeWidth);
+    const rectRadius = Math.max(0, Math.min(radius !== null && radius !== void 0 ? radius : DEFAULT_RADIUS, rectWidth / 2, rectHeight / 2));
+    React.useEffect(() => {
+        var _a;
+        const node = aroundBeamRef.current;
+        if (!node) {
+            return undefined;
+        }
+        if (isRunning) {
+            hasStartedRef.current = true;
+        }
+        node.style.opacity = isRunning || hasStartedRef.current ? 'var(--beam-frame-beam-opacity)' : '0';
+        if (!isRunning) {
+            (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+            return undefined;
+        }
+        if (animationRef.current) {
+            animationRef.current.playbackRate = BASE_DURATION_SECONDS / duration;
+            animationRef.current.play();
+            return undefined;
+        }
+        animationRef.current = animejs.waapi.animate(node, {
+            strokeDashoffset: [0, -1],
+            loop: true,
+            duration: BASE_DURATION_SECONDS * 1000,
+            ease: 'linear',
+        });
+        animationRef.current.playbackRate = BASE_DURATION_SECONDS / duration;
+        return undefined;
+    }, [duration, isRunning]);
+    React.useEffect(() => {
+        return () => {
+            var _a;
+            (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.revert();
+            animationRef.current = null;
+        };
+    }, []);
+    return (jsxRuntime.jsxs("svg", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-0 h-full w-full overflow-visible", preserveAspectRatio: "none", viewBox: `0 0 ${width} ${height}`, children: [jsxRuntime.jsxs("g", { ref: aroundBeamRef, opacity: "0", children: [jsxRuntime.jsx("rect", { x: rectOffset, y: rectOffset, width: rectWidth, height: rectHeight, rx: rectRadius, ry: rectRadius, pathLength: "1", fill: "none", stroke: `url(#${haloGradientId})`, strokeLinecap: "round", strokeWidth: "var(--beam-frame-halo-width)", vectorEffect: "non-scaling-stroke", style: {
+                            strokeDasharray: 'calc(var(--beam-frame-beam-length) * 0.86) calc(1 - var(--beam-frame-beam-length) * 0.86)',
+                        }, opacity: "var(--beam-frame-glow-opacity)" }), jsxRuntime.jsx("rect", { x: rectOffset, y: rectOffset, width: rectWidth, height: rectHeight, rx: rectRadius, ry: rectRadius, pathLength: "1", fill: "none", stroke: `url(#${gradientId})`, strokeLinecap: "round", strokeWidth: "var(--beam-frame-beam-width)", vectorEffect: "non-scaling-stroke", style: {
+                            strokeDasharray: 'var(--beam-frame-beam-length) calc(1 - var(--beam-frame-beam-length))',
+                        } })] }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsxs("linearGradient", { id: haloGradientId, x1: "0%", x2: "100%", y1: "0%", y2: "100%", children: [jsxRuntime.jsx("stop", { offset: "0%", stopColor: "var(--beam-frame-color-a)", stopOpacity: "0.18" }), jsxRuntime.jsx("stop", { offset: "34%", stopColor: "var(--beam-frame-color-b)", stopOpacity: "0.72" }), jsxRuntime.jsx("stop", { offset: "54%", stopColor: "var(--beam-frame-color-c)", stopOpacity: "1" }), jsxRuntime.jsx("stop", { offset: "74%", stopColor: "var(--beam-frame-color-a)", stopOpacity: "0.66" }), jsxRuntime.jsx("stop", { offset: "100%", stopColor: "var(--beam-frame-color-b)", stopOpacity: "0.18" })] }), jsxRuntime.jsxs("linearGradient", { id: gradientId, x1: "0%", x2: "100%", y1: "0%", y2: "100%", children: [jsxRuntime.jsx("stop", { offset: "0%", stopColor: "var(--beam-frame-color-a)", stopOpacity: "0.52" }), jsxRuntime.jsx("stop", { offset: "34%", stopColor: "var(--beam-frame-color-b)", stopOpacity: "0.9" }), jsxRuntime.jsx("stop", { offset: "50%", stopColor: "var(--beam-frame-color-c)", stopOpacity: "1" }), jsxRuntime.jsx("stop", { offset: "68%", stopColor: "var(--beam-frame-color-a)", stopOpacity: "0.86" }), jsxRuntime.jsx("stop", { offset: "100%", stopColor: "var(--beam-frame-color-c)", stopOpacity: "0.52" })] })] })] }));
+}
+function AnimeBeamFrame(props) {
+    const { children, active = false, interactive = true, intensity = 'regular', tone = 'theme', duration = 1.8, radius, className, } = props;
+    const prefersReducedMotion = react.useReducedMotion();
+    const { isRunning, interactionProps } = useInteractiveRunning(active, interactive);
+    const shouldRun = isRunning && !prefersReducedMotion;
+    const normalizedDuration = normalizeDuration(duration);
+    const { ref, size } = useMeasuredFrameSize();
+    return (jsxRuntime.jsx(BeamFrameShell, { active: active, interactive: interactive, intensity: intensity, tone: tone, duration: normalizedDuration, radius: radius, className: className, isRunning: shouldRun, interactionProps: interactionProps, rootRef: ref, renderBeam: () => (jsxRuntime.jsx(AnimeBeamLayer, { isRunning: shouldRun, duration: normalizedDuration, radius: radius, size: size })), children: children }));
+}
+const BeamFrame = MotionBeamFrame;
+
+exports.AnimeBeamFrame = AnimeBeamFrame;
+exports.BeamFrame = BeamFrame;
+exports.MotionBeamFrame = MotionBeamFrame;

package/dist/main/beam-frame/beam-frame.mjs

@@ -0,0 +1,258 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, useId } from 'react';
+import { waapi } from 'animejs';
+import { useReducedMotion, animate } from 'motion/react';
+import { themeName } from '@windrun-huaiin/base-ui/lib';
+import { cn } from '@windrun-huaiin/lib/utils';
+
+const THEME_PALETTES = {
+    purple: { a: '#AC62FD', b: '#EC4899', c: '#6366F1' },
+    orange: { a: '#F97316', b: '#F59E0B', c: '#EF4444' },
+    indigo: { a: '#6366F1', b: '#3B82F6', c: '#06B6D4' },
+    emerald: { a: '#10B981', b: '#14B8A6', c: '#22C55E' },
+    rose: { a: '#F43F5E', b: '#EC4899', c: '#FB7185' },
+};
+const TONE_PALETTES = {
+    rainbow: { a: '#22D3EE', b: '#A855F7', c: '#F97316' },
+    mono: { a: '#E5E7EB', b: '#94A3B8', c: '#FFFFFF' },
+    warm: { a: '#F97316', b: '#FBBF24', c: '#EF4444' },
+    cool: { a: '#06B6D4', b: '#6366F1', c: '#14B8A6' },
+};
+const INTENSITY_STYLE = {
+    subtle: {
+        beamOpacity: 0.86,
+        glowOpacity: 0.16,
+        beamLength: 0.24,
+        beamWidth: 2.2,
+        haloWidth: 6,
+    },
+    regular: {
+        beamOpacity: 1,
+        glowOpacity: 0.24,
+        beamLength: 0.34,
+        beamWidth: 3,
+        haloWidth: 8,
+    },
+    strong: {
+        beamOpacity: 1,
+        glowOpacity: 0.32,
+        beamLength: 0.46,
+        beamWidth: 4,
+        haloWidth: 10,
+    },
+};
+const BASE_BORDER_OPACITY = 0.18;
+const BASE_DURATION_SECONDS = 1.8;
+const DEFAULT_RADIUS = 24;
+function getPalette(tone) {
+    var _a;
+    if (tone !== 'theme') {
+        return TONE_PALETTES[tone];
+    }
+    return (_a = THEME_PALETTES[themeName]) !== null && _a !== void 0 ? _a : THEME_PALETTES.purple;
+}
+function normalizeDuration(duration) {
+    if (!Number.isFinite(duration)) {
+        return 1.8;
+    }
+    return Math.max(0.4, duration);
+}
+function useMeasuredFrameSize() {
+    const ref = useRef(null);
+    const [size, setSize] = useState({ width: 0, height: 0 });
+    useEffect(() => {
+        const node = ref.current;
+        if (!node) {
+            return undefined;
+        }
+        const updateSize = () => {
+            const rect = node.getBoundingClientRect();
+            setSize({
+                width: Math.max(0, rect.width),
+                height: Math.max(0, rect.height),
+            });
+        };
+        updateSize();
+        const observer = new ResizeObserver(updateSize);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, []);
+    return { ref, size };
+}
+function useInteractiveRunning(active, interactive) {
+    const [isInteractiveRunning, setIsInteractiveRunning] = useState(false);
+    const interactionProps = interactive
+        ? {
+            onMouseEnter: () => setIsInteractiveRunning(true),
+            onMouseLeave: () => setIsInteractiveRunning(false),
+            onFocus: () => setIsInteractiveRunning(true),
+            onBlur: () => setIsInteractiveRunning(false),
+        }
+        : {};
+    return {
+        isRunning: active || isInteractiveRunning,
+        interactionProps,
+    };
+}
+function createRootStyle({ intensity, tone, radius, }) {
+    const palette = getPalette(tone);
+    const intensityStyle = INTENSITY_STYLE[intensity];
+    const frameRadius = radius !== null && radius !== void 0 ? radius : DEFAULT_RADIUS;
+    const svgRadius = Math.max(0, Math.min(49, frameRadius));
+    return {
+        '--beam-frame-radius': `${frameRadius}px`,
+        '--beam-frame-svg-radius': svgRadius,
+        '--beam-frame-color-a': palette.a,
+        '--beam-frame-color-b': palette.b,
+        '--beam-frame-color-c': palette.c,
+        '--beam-frame-border-opacity': BASE_BORDER_OPACITY,
+        '--beam-frame-beam-opacity': intensityStyle.beamOpacity,
+        '--beam-frame-glow-opacity': intensityStyle.glowOpacity,
+        '--beam-frame-beam-length': intensityStyle.beamLength,
+        '--beam-frame-beam-width': intensityStyle.beamWidth,
+        '--beam-frame-halo-width': intensityStyle.haloWidth,
+    };
+}
+function createBaseBorderBackground() {
+    return 'rgba(148, 163, 184, var(--beam-frame-border-opacity))';
+}
+function createBorderRingMask() {
+    return {
+        WebkitMask: 'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',
+        WebkitMaskComposite: 'xor',
+        maskComposite: 'exclude',
+        padding: '1px',
+    };
+}
+function BeamFrameShell({ children, className, tone, intensity, radius, isRunning, interactionProps, renderBeam, rootRef, }) {
+    return (jsxs("div", Object.assign({ ref: rootRef, className: cn('group/beam-frame relative isolate overflow-hidden rounded-[var(--beam-frame-radius)] p-px', className), "data-beam-running": isRunning ? 'true' : 'false', style: createRootStyle({ intensity, tone, radius }) }, interactionProps, { children: [jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-0 rounded-[inherit]", style: Object.assign({ background: createBaseBorderBackground() }, createBorderRingMask()) }), renderBeam(isRunning), jsx("div", { className: "relative z-10 rounded-[calc(var(--beam-frame-radius)-1px)]", children: children })] })));
+}
+function MotionAroundBeam({ isRunning, duration, radius, size, }) {
+    const gradientId = useId().replace(/:/g, '');
+    const haloGradientId = useId().replace(/:/g, '');
+    const beamGroupRef = useRef(null);
+    const controlsRef = useRef(null);
+    const hasStartedRef = useRef(false);
+    const strokeWidth = 3;
+    const width = Math.max(1, size.width);
+    const height = Math.max(1, size.height);
+    const rectOffset = strokeWidth / 2;
+    const rectWidth = Math.max(1, width - strokeWidth);
+    const rectHeight = Math.max(1, height - strokeWidth);
+    const rectRadius = Math.max(0, Math.min(radius !== null && radius !== void 0 ? radius : DEFAULT_RADIUS, rectWidth / 2, rectHeight / 2));
+    useEffect(() => {
+        var _a;
+        const node = beamGroupRef.current;
+        if (!node) {
+            return undefined;
+        }
+        if (isRunning) {
+            hasStartedRef.current = true;
+        }
+        node.style.opacity = isRunning || hasStartedRef.current ? 'var(--beam-frame-beam-opacity)' : '0';
+        if (!isRunning) {
+            (_a = controlsRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+            return undefined;
+        }
+        if (controlsRef.current) {
+            controlsRef.current.speed = BASE_DURATION_SECONDS / duration;
+            controlsRef.current.play();
+            return undefined;
+        }
+        controlsRef.current = animate(node, { strokeDashoffset: [0, -1] }, {
+            duration: BASE_DURATION_SECONDS,
+            repeat: Infinity,
+            ease: 'linear',
+        });
+        controlsRef.current.speed = BASE_DURATION_SECONDS / duration;
+        return undefined;
+    }, [duration, isRunning]);
+    useEffect(() => {
+        return () => {
+            var _a;
+            (_a = controlsRef.current) === null || _a === void 0 ? void 0 : _a.stop();
+            controlsRef.current = null;
+        };
+    }, []);
+    return (jsxs("svg", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-0 h-full w-full overflow-visible", preserveAspectRatio: "none", viewBox: `0 0 ${width} ${height}`, children: [jsxs("g", { ref: beamGroupRef, opacity: "0", children: [jsx("rect", { x: rectOffset, y: rectOffset, width: rectWidth, height: rectHeight, rx: rectRadius, ry: rectRadius, pathLength: "1", fill: "none", stroke: `url(#${haloGradientId})`, strokeLinecap: "round", strokeWidth: "var(--beam-frame-halo-width)", vectorEffect: "non-scaling-stroke", style: {
+                            strokeDasharray: 'calc(var(--beam-frame-beam-length) * 0.86) calc(1 - var(--beam-frame-beam-length) * 0.86)',
+                        }, opacity: "var(--beam-frame-glow-opacity)" }), jsx("rect", { x: rectOffset, y: rectOffset, width: rectWidth, height: rectHeight, rx: rectRadius, ry: rectRadius, pathLength: "1", fill: "none", stroke: `url(#${gradientId})`, strokeLinecap: "round", strokeWidth: "var(--beam-frame-beam-width)", vectorEffect: "non-scaling-stroke", style: {
+                            strokeDasharray: 'var(--beam-frame-beam-length) calc(1 - var(--beam-frame-beam-length))',
+                        } })] }), jsxs("defs", { children: [jsxs("linearGradient", { id: haloGradientId, x1: "0%", x2: "100%", y1: "0%", y2: "100%", children: [jsx("stop", { offset: "0%", stopColor: "var(--beam-frame-color-a)", stopOpacity: "0.18" }), jsx("stop", { offset: "34%", stopColor: "var(--beam-frame-color-b)", stopOpacity: "0.72" }), jsx("stop", { offset: "54%", stopColor: "var(--beam-frame-color-c)", stopOpacity: "1" }), jsx("stop", { offset: "74%", stopColor: "var(--beam-frame-color-a)", stopOpacity: "0.66" }), jsx("stop", { offset: "100%", stopColor: "var(--beam-frame-color-b)", stopOpacity: "0.18" })] }), jsxs("linearGradient", { id: gradientId, x1: "0%", x2: "100%", y1: "0%", y2: "100%", children: [jsx("stop", { offset: "0%", stopColor: "var(--beam-frame-color-a)", stopOpacity: "0.52" }), jsx("stop", { offset: "34%", stopColor: "var(--beam-frame-color-b)", stopOpacity: "0.9" }), jsx("stop", { offset: "50%", stopColor: "var(--beam-frame-color-c)", stopOpacity: "1" }), jsx("stop", { offset: "68%", stopColor: "var(--beam-frame-color-a)", stopOpacity: "0.86" }), jsx("stop", { offset: "100%", stopColor: "var(--beam-frame-color-c)", stopOpacity: "0.52" })] })] })] }));
+}
+function MotionBeamFrame(props) {
+    const { children, active = false, interactive = true, intensity = 'regular', tone = 'theme', duration = 1.8, radius, className, } = props;
+    const prefersReducedMotion = useReducedMotion();
+    const { isRunning, interactionProps } = useInteractiveRunning(active, interactive);
+    const shouldRun = isRunning && !prefersReducedMotion;
+    const normalizedDuration = normalizeDuration(duration);
+    const { ref, size } = useMeasuredFrameSize();
+    return (jsx(BeamFrameShell, { active: active, interactive: interactive, intensity: intensity, tone: tone, duration: normalizedDuration, radius: radius, className: className, isRunning: shouldRun, interactionProps: interactionProps, rootRef: ref, renderBeam: () => (jsx(MotionAroundBeam, { isRunning: shouldRun, duration: normalizedDuration, radius: radius, size: size })), children: children }));
+}
+function AnimeBeamLayer({ isRunning, duration, radius, size, }) {
+    const aroundBeamRef = useRef(null);
+    const animationRef = useRef(null);
+    const hasStartedRef = useRef(false);
+    const gradientId = useId().replace(/:/g, '');
+    const haloGradientId = useId().replace(/:/g, '');
+    const strokeWidth = 3;
+    const width = Math.max(1, size.width);
+    const height = Math.max(1, size.height);
+    const rectOffset = strokeWidth / 2;
+    const rectWidth = Math.max(1, width - strokeWidth);
+    const rectHeight = Math.max(1, height - strokeWidth);
+    const rectRadius = Math.max(0, Math.min(radius !== null && radius !== void 0 ? radius : DEFAULT_RADIUS, rectWidth / 2, rectHeight / 2));
+    useEffect(() => {
+        var _a;
+        const node = aroundBeamRef.current;
+        if (!node) {
+            return undefined;
+        }
+        if (isRunning) {
+            hasStartedRef.current = true;
+        }
+        node.style.opacity = isRunning || hasStartedRef.current ? 'var(--beam-frame-beam-opacity)' : '0';
+        if (!isRunning) {
+            (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+            return undefined;
+        }
+        if (animationRef.current) {
+            animationRef.current.playbackRate = BASE_DURATION_SECONDS / duration;
+            animationRef.current.play();
+            return undefined;
+        }
+        animationRef.current = waapi.animate(node, {
+            strokeDashoffset: [0, -1],
+            loop: true,
+            duration: BASE_DURATION_SECONDS * 1000,
+            ease: 'linear',
+        });
+        animationRef.current.playbackRate = BASE_DURATION_SECONDS / duration;
+        return undefined;
+    }, [duration, isRunning]);
+    useEffect(() => {
+        return () => {
+            var _a;
+            (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.revert();
+            animationRef.current = null;
+        };
+    }, []);
+    return (jsxs("svg", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-0 h-full w-full overflow-visible", preserveAspectRatio: "none", viewBox: `0 0 ${width} ${height}`, children: [jsxs("g", { ref: aroundBeamRef, opacity: "0", children: [jsx("rect", { x: rectOffset, y: rectOffset, width: rectWidth, height: rectHeight, rx: rectRadius, ry: rectRadius, pathLength: "1", fill: "none", stroke: `url(#${haloGradientId})`, strokeLinecap: "round", strokeWidth: "var(--beam-frame-halo-width)", vectorEffect: "non-scaling-stroke", style: {
+                            strokeDasharray: 'calc(var(--beam-frame-beam-length) * 0.86) calc(1 - var(--beam-frame-beam-length) * 0.86)',
+                        }, opacity: "var(--beam-frame-glow-opacity)" }), jsx("rect", { x: rectOffset, y: rectOffset, width: rectWidth, height: rectHeight, rx: rectRadius, ry: rectRadius, pathLength: "1", fill: "none", stroke: `url(#${gradientId})`, strokeLinecap: "round", strokeWidth: "var(--beam-frame-beam-width)", vectorEffect: "non-scaling-stroke", style: {
+                            strokeDasharray: 'var(--beam-frame-beam-length) calc(1 - var(--beam-frame-beam-length))',
+                        } })] }), jsxs("defs", { children: [jsxs("linearGradient", { id: haloGradientId, x1: "0%", x2: "100%", y1: "0%", y2: "100%", children: [jsx("stop", { offset: "0%", stopColor: "var(--beam-frame-color-a)", stopOpacity: "0.18" }), jsx("stop", { offset: "34%", stopColor: "var(--beam-frame-color-b)", stopOpacity: "0.72" }), jsx("stop", { offset: "54%", stopColor: "var(--beam-frame-color-c)", stopOpacity: "1" }), jsx("stop", { offset: "74%", stopColor: "var(--beam-frame-color-a)", stopOpacity: "0.66" }), jsx("stop", { offset: "100%", stopColor: "var(--beam-frame-color-b)", stopOpacity: "0.18" })] }), jsxs("linearGradient", { id: gradientId, x1: "0%", x2: "100%", y1: "0%", y2: "100%", children: [jsx("stop", { offset: "0%", stopColor: "var(--beam-frame-color-a)", stopOpacity: "0.52" }), jsx("stop", { offset: "34%", stopColor: "var(--beam-frame-color-b)", stopOpacity: "0.9" }), jsx("stop", { offset: "50%", stopColor: "var(--beam-frame-color-c)", stopOpacity: "1" }), jsx("stop", { offset: "68%", stopColor: "var(--beam-frame-color-a)", stopOpacity: "0.86" }), jsx("stop", { offset: "100%", stopColor: "var(--beam-frame-color-c)", stopOpacity: "0.52" })] })] })] }));
+}
+function AnimeBeamFrame(props) {
+    const { children, active = false, interactive = true, intensity = 'regular', tone = 'theme', duration = 1.8, radius, className, } = props;
+    const prefersReducedMotion = useReducedMotion();
+    const { isRunning, interactionProps } = useInteractiveRunning(active, interactive);
+    const shouldRun = isRunning && !prefersReducedMotion;
+    const normalizedDuration = normalizeDuration(duration);
+    const { ref, size } = useMeasuredFrameSize();
+    return (jsx(BeamFrameShell, { active: active, interactive: interactive, intensity: intensity, tone: tone, duration: normalizedDuration, radius: radius, className: className, isRunning: shouldRun, interactionProps: interactionProps, rootRef: ref, renderBeam: () => (jsx(AnimeBeamLayer, { isRunning: shouldRun, duration: normalizedDuration, radius: radius, size: size })), children: children }));
+}
+const BeamFrame = MotionBeamFrame;
+
+export { AnimeBeamFrame, BeamFrame, MotionBeamFrame };

package/dist/main/beam-frame/index.d.ts

@@ -0,0 +1,4 @@
+export { AnimeBeamFrame } from './animate';
+export { MotionBeamFrame } from './motion';
+export { MotionBeamFrame as BeamFrame } from './motion';
+export type { BeamFrameProps, BeamFrameTone } from './share-config';

package/dist/main/beam-frame/index.js

@@ -0,0 +1,11 @@
+"use client";
+'use strict';
+
+var animate = require('./animate.js');
+var motion = require('./motion.js');
+
+
+
+exports.AnimeBeamFrame = animate.AnimeBeamFrame;
+exports.BeamFrame = motion.MotionBeamFrame;
+exports.MotionBeamFrame = motion.MotionBeamFrame;

package/dist/main/beam-frame/index.mjs

@@ -0,0 +1,3 @@
+"use client";
+export { AnimeBeamFrame } from './animate.mjs';
+export { MotionBeamFrame as BeamFrame, MotionBeamFrame } from './motion.mjs';

package/dist/main/beam-frame/motion.d.ts

@@ -0,0 +1,3 @@
+import { type BeamFrameProps } from './share-config';
+export type { BeamFrameProps, BeamFrameTone } from './share-config';
+export declare function MotionBeamFrame(props: BeamFrameProps): import("react/jsx-runtime").JSX.Element;

package/dist/main/beam-frame/motion.js

@@ -0,0 +1,61 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var react = require('motion/react');
+var shareConfig = require('./share-config.js');
+
+function MotionAroundBeam({ isRunning, duration, radius, size, }) {
+    const auraGradientId = React.useId().replace(/:/g, '');
+    const softGlowFilterId = React.useId().replace(/:/g, '');
+    const beamGroupRef = React.useRef(null);
+    const controlsRef = React.useRef(null);
+    const hasStartedRef = React.useRef(false);
+    React.useEffect(() => {
+        var _a;
+        const node = beamGroupRef.current;
+        if (!node) {
+            return undefined;
+        }
+        if (isRunning) {
+            hasStartedRef.current = true;
+        }
+        node.style.opacity = isRunning || hasStartedRef.current ? 'var(--beam-frame-beam-opacity)' : '0';
+        if (!isRunning) {
+            (_a = controlsRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+            return undefined;
+        }
+        if (controlsRef.current) {
+            controlsRef.current.speed = shareConfig.BASE_DURATION_SECONDS / duration;
+            controlsRef.current.play();
+            return undefined;
+        }
+        controlsRef.current = react.animate(node, { strokeDashoffset: [0, -1] }, {
+            duration: shareConfig.BASE_DURATION_SECONDS,
+            repeat: Infinity,
+            ease: 'linear',
+        });
+        controlsRef.current.speed = shareConfig.BASE_DURATION_SECONDS / duration;
+        return undefined;
+    }, [duration, isRunning]);
+    React.useEffect(() => {
+        return () => {
+            var _a;
+            (_a = controlsRef.current) === null || _a === void 0 ? void 0 : _a.stop();
+            controlsRef.current = null;
+        };
+    }, []);
+    return (jsxRuntime.jsx(shareConfig.BeamSvgLayer, { beamRef: beamGroupRef, auraGradientId: auraGradientId, softGlowFilterId: softGlowFilterId, radius: radius, size: size }));
+}
+function MotionBeamFrame(props) {
+    const { children, active = false, interactive = true, tone = 'theme', duration = shareConfig.BASE_DURATION_SECONDS, radius, className, } = props;
+    const prefersReducedMotion = react.useReducedMotion();
+    const { isRunning, interactionProps } = shareConfig.useInteractiveRunning(active, interactive);
+    const shouldRun = isRunning && !prefersReducedMotion;
+    const normalizedDuration = shareConfig.normalizeDuration(duration);
+    const { ref, size } = shareConfig.useMeasuredFrameSize();
+    return (jsxRuntime.jsx(shareConfig.BeamFrameShell, { active: active, interactive: interactive, tone: tone, duration: normalizedDuration, radius: radius, className: className, isRunning: shouldRun, interactionProps: interactionProps, rootRef: ref, renderBeam: () => (jsxRuntime.jsx(MotionAroundBeam, { isRunning: shouldRun, duration: normalizedDuration, radius: radius, size: size })), children: children }));
+}
+
+exports.MotionBeamFrame = MotionBeamFrame;