@windrun-huaiin/third-ui 29.2.1 → 30.1.0

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

@@ -0,0 +1,152 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from '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: '#FF3D77', b: '#3388FF', c: '#00FF88' },
+    mono: { a: '#E5E7EB', b: '#94A3B8', c: '#FFFFFF' },
+    warm: { a: '#F97316', b: '#FBBF24', c: '#EF4444' },
+    cool: { a: '#06B6D4', b: '#6366F1', c: '#14B8A6' },
+};
+const BEAM_FRAME_STYLE = {
+    ambientGlowOpacity: 0.24,
+    beamOpacity: 1.0,
+    auraOpacity: 0.86,
+    auraLength: 0.08,
+    traceLength: 0.42,
+    traceWidth: 1.15,
+    ambientGlowWidth: 7,
+    auraWidth: 8.5,
+};
+const BASE_BORDER_OPACITY = 0.18;
+const BASE_DURATION_SECONDS = 3.6;
+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 BASE_DURATION_SECONDS;
+    }
+    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({ tone, radius, }) {
+    const palette = getPalette(tone);
+    const frameRadius = radius !== null && radius !== void 0 ? radius : DEFAULT_RADIUS;
+    return {
+        '--beam-frame-radius': `${frameRadius}px`,
+        '--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-ambient-glow-opacity': BEAM_FRAME_STYLE.ambientGlowOpacity,
+        '--beam-frame-beam-opacity': BEAM_FRAME_STYLE.beamOpacity,
+        '--beam-frame-aura-opacity': BEAM_FRAME_STYLE.auraOpacity,
+        '--beam-frame-aura-length': BEAM_FRAME_STYLE.auraLength,
+        '--beam-frame-aura-dash-pattern': 'var(--beam-frame-aura-length) calc(1 - var(--beam-frame-aura-length))',
+        '--beam-frame-trace-length': BEAM_FRAME_STYLE.traceLength,
+        '--beam-frame-trace-dash-pattern': 'var(--beam-frame-trace-length) calc(1 - var(--beam-frame-trace-length))',
+        '--beam-frame-trace-width': BEAM_FRAME_STYLE.traceWidth,
+        '--beam-frame-ambient-glow-width': BEAM_FRAME_STYLE.ambientGlowWidth,
+        '--beam-frame-aura-width': BEAM_FRAME_STYLE.auraWidth,
+    };
+}
+function BeamFrameShell({ children, className, tone, radius, isRunning, interactionProps, renderBeam, rootRef, }) {
+    return (jsxs("div", Object.assign({ ref: rootRef, className: cn('group/beam-frame relative isolate overflow-hidden rounded-(--beam-frame-radius) p-px', className), "data-beam-running": isRunning ? 'true' : 'false', style: createRootStyle({ tone, radius }) }, interactionProps, { children: [renderBeam(), jsx("div", { className: "relative z-10 rounded-[calc(var(--beam-frame-radius)-1px)]", children: children })] })));
+}
+function createBeamGeometry({ radius, size, }) {
+    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));
+    const rectRight = rectOffset + rectWidth;
+    const rectBottom = rectOffset + rectHeight;
+    const roundedPathLap = [
+        `H ${rectRight - rectRadius}`,
+        `A ${rectRadius} ${rectRadius} 0 0 1 ${rectRight} ${rectOffset + rectRadius}`,
+        `V ${rectBottom - rectRadius}`,
+        `A ${rectRadius} ${rectRadius} 0 0 1 ${rectRight - rectRadius} ${rectBottom}`,
+        `H ${rectOffset + rectRadius}`,
+        `A ${rectRadius} ${rectRadius} 0 0 1 ${rectOffset} ${rectBottom - rectRadius}`,
+        `V ${rectOffset + rectRadius}`,
+        `A ${rectRadius} ${rectRadius} 0 0 1 ${rectOffset + rectRadius} ${rectOffset}`,
+    ].join(' ');
+    const extendedRoundedPath = `M ${rectOffset + rectRadius} ${rectOffset} ${roundedPathLap} ${roundedPathLap}`;
+    return {
+        width,
+        height,
+        rectOffset,
+        rectWidth,
+        rectHeight,
+        rectRadius,
+        rectRight,
+        rectBottom,
+        extendedRoundedPath,
+    };
+}
+function BeamSvgLayer({ beamRef, auraGradientId, softGlowFilterId, radius, size, }) {
+    const { width, height, rectOffset, rectWidth, rectHeight, rectRadius, rectRight, rectBottom, extendedRoundedPath, } = createBeamGeometry({
+        radius,
+        size,
+    });
+    return (jsxs("svg", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-20 h-full w-full overflow-visible", preserveAspectRatio: "none", viewBox: `0 0 ${width} ${height}`, children: [jsxs("g", { ref: beamRef, opacity: "0", style: { mixBlendMode: 'plus-lighter' }, children: [jsx("rect", { x: rectOffset, y: rectOffset, width: rectWidth, height: rectHeight, rx: rectRadius, ry: rectRadius, pathLength: "1", fill: "none", stroke: `url(#${auraGradientId})`, strokeLinecap: "round", strokeWidth: "var(--beam-frame-ambient-glow-width)", vectorEffect: "non-scaling-stroke", filter: `url(#${softGlowFilterId})`, opacity: "var(--beam-frame-ambient-glow-opacity)" }), jsx("path", { d: extendedRoundedPath, pathLength: "2", fill: "none", stroke: `url(#${auraGradientId})`, strokeLinecap: "round", strokeWidth: "var(--beam-frame-aura-width)", vectorEffect: "non-scaling-stroke", filter: `url(#${softGlowFilterId})`, style: {
+                            strokeDasharray: 'var(--beam-frame-aura-dash-pattern)',
+                        }, opacity: "var(--beam-frame-aura-opacity)" }), jsx("path", { d: extendedRoundedPath, pathLength: "2", fill: "none", stroke: `url(#${auraGradientId})`, strokeLinecap: "round", strokeWidth: "var(--beam-frame-trace-width)", vectorEffect: "non-scaling-stroke", style: {
+                            strokeDasharray: 'var(--beam-frame-trace-dash-pattern)',
+                        }, opacity: "var(--beam-frame-beam-opacity)" })] }), jsxs("defs", { children: [jsx("filter", { id: softGlowFilterId, x: "-40%", y: "-40%", width: "180%", height: "180%", children: jsx("feGaussianBlur", { stdDeviation: "8" }) }), jsxs("linearGradient", { id: auraGradientId, x1: rectOffset, x2: rectRight, y1: rectOffset, y2: rectBottom, gradientUnits: "userSpaceOnUse", children: [jsx("stop", { offset: "0%", stopColor: "var(--beam-frame-color-a)", stopOpacity: "0.58" }), jsx("stop", { offset: "22%", stopColor: "var(--beam-frame-color-b)", stopOpacity: "0.78" }), jsx("stop", { offset: "44%", stopColor: "var(--beam-frame-color-c)", stopOpacity: "0.96" }), jsx("stop", { offset: "58%", stopColor: "var(--beam-frame-color-b)", stopOpacity: "1" }), jsx("stop", { offset: "78%", stopColor: "var(--beam-frame-color-a)", stopOpacity: "0.82" }), jsx("stop", { offset: "100%", stopColor: "var(--beam-frame-color-c)", stopOpacity: "0.58" })] })] })] }));
+}
+
+export { BASE_DURATION_SECONDS, BeamFrameShell, BeamSvgLayer, DEFAULT_RADIUS, createBeamGeometry, normalizeDuration, useInteractiveRunning, useMeasuredFrameSize };

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

@@ -0,0 +1,54 @@
+import type { DOMAttributes, ReactNode, RefObject } from 'react';
+export type BeamFrameTone = 'theme' | 'rainbow' | 'mono' | 'warm' | 'cool';
+export type BeamFrameProps = {
+    children: ReactNode;
+    active?: boolean;
+    interactive?: boolean;
+    tone?: BeamFrameTone;
+    duration?: number;
+    radius?: number;
+    className?: string;
+};
+export type BeamFrameRenderProps = Required<Pick<BeamFrameProps, 'active' | 'interactive' | 'tone' | 'duration'>> & Pick<BeamFrameProps, 'children' | 'className' | 'radius'>;
+export type FrameSize = {
+    width: number;
+    height: number;
+};
+export declare const BASE_DURATION_SECONDS = 3.6;
+export declare const DEFAULT_RADIUS = 24;
+export declare function normalizeDuration(duration: number): number;
+export declare function useMeasuredFrameSize<T extends HTMLElement>(): {
+    ref: RefObject<T | null>;
+    size: FrameSize;
+};
+export declare function useInteractiveRunning(active: boolean, interactive: boolean): {
+    isRunning: boolean;
+    interactionProps: Pick<DOMAttributes<HTMLDivElement>, "onFocus" | "onBlur" | "onMouseEnter" | "onMouseLeave">;
+};
+export declare function BeamFrameShell({ children, className, tone, radius, isRunning, interactionProps, renderBeam, rootRef, }: BeamFrameRenderProps & {
+    isRunning: boolean;
+    interactionProps: Pick<DOMAttributes<HTMLDivElement>, 'onBlur' | 'onFocus' | 'onMouseEnter' | 'onMouseLeave'>;
+    renderBeam: () => ReactNode;
+    rootRef: RefObject<HTMLDivElement | null>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function createBeamGeometry({ radius, size, }: {
+    radius?: number;
+    size: FrameSize;
+}): {
+    width: number;
+    height: number;
+    rectOffset: number;
+    rectWidth: number;
+    rectHeight: number;
+    rectRadius: number;
+    rectRight: number;
+    rectBottom: number;
+    extendedRoundedPath: string;
+};
+export declare function BeamSvgLayer({ beamRef, auraGradientId, softGlowFilterId, radius, size, }: {
+    beamRef: RefObject<SVGGElement | null>;
+    auraGradientId: string;
+    softGlowFilterId: string;
+    radius?: number;
+    size: FrameSize;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,161 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('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: '#FF3D77', b: '#3388FF', c: '#00FF88' },
+    mono: { a: '#E5E7EB', b: '#94A3B8', c: '#FFFFFF' },
+    warm: { a: '#F97316', b: '#FBBF24', c: '#EF4444' },
+    cool: { a: '#06B6D4', b: '#6366F1', c: '#14B8A6' },
+};
+const BEAM_FRAME_STYLE = {
+    ambientGlowOpacity: 0.24,
+    beamOpacity: 1.0,
+    auraOpacity: 0.86,
+    auraLength: 0.08,
+    traceLength: 0.42,
+    traceWidth: 1.15,
+    ambientGlowWidth: 7,
+    auraWidth: 8.5,
+};
+const BASE_BORDER_OPACITY = 0.18;
+const BASE_DURATION_SECONDS = 3.6;
+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 BASE_DURATION_SECONDS;
+    }
+    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({ tone, radius, }) {
+    const palette = getPalette(tone);
+    const frameRadius = radius !== null && radius !== void 0 ? radius : DEFAULT_RADIUS;
+    return {
+        '--beam-frame-radius': `${frameRadius}px`,
+        '--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-ambient-glow-opacity': BEAM_FRAME_STYLE.ambientGlowOpacity,
+        '--beam-frame-beam-opacity': BEAM_FRAME_STYLE.beamOpacity,
+        '--beam-frame-aura-opacity': BEAM_FRAME_STYLE.auraOpacity,
+        '--beam-frame-aura-length': BEAM_FRAME_STYLE.auraLength,
+        '--beam-frame-aura-dash-pattern': 'var(--beam-frame-aura-length) calc(1 - var(--beam-frame-aura-length))',
+        '--beam-frame-trace-length': BEAM_FRAME_STYLE.traceLength,
+        '--beam-frame-trace-dash-pattern': 'var(--beam-frame-trace-length) calc(1 - var(--beam-frame-trace-length))',
+        '--beam-frame-trace-width': BEAM_FRAME_STYLE.traceWidth,
+        '--beam-frame-ambient-glow-width': BEAM_FRAME_STYLE.ambientGlowWidth,
+        '--beam-frame-aura-width': BEAM_FRAME_STYLE.auraWidth,
+    };
+}
+function BeamFrameShell({ children, className, tone, radius, isRunning, interactionProps, renderBeam, rootRef, }) {
+    return (jsxRuntime.jsxs("div", Object.assign({ ref: rootRef, className: utils.cn('group/beam-frame relative isolate overflow-hidden rounded-(--beam-frame-radius) p-px', className), "data-beam-running": isRunning ? 'true' : 'false', style: createRootStyle({ tone, radius }) }, interactionProps, { children: [renderBeam(), jsxRuntime.jsx("div", { className: "relative z-10 rounded-[calc(var(--beam-frame-radius)-1px)]", children: children })] })));
+}
+function createBeamGeometry({ radius, size, }) {
+    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));
+    const rectRight = rectOffset + rectWidth;
+    const rectBottom = rectOffset + rectHeight;
+    const roundedPathLap = [
+        `H ${rectRight - rectRadius}`,
+        `A ${rectRadius} ${rectRadius} 0 0 1 ${rectRight} ${rectOffset + rectRadius}`,
+        `V ${rectBottom - rectRadius}`,
+        `A ${rectRadius} ${rectRadius} 0 0 1 ${rectRight - rectRadius} ${rectBottom}`,
+        `H ${rectOffset + rectRadius}`,
+        `A ${rectRadius} ${rectRadius} 0 0 1 ${rectOffset} ${rectBottom - rectRadius}`,
+        `V ${rectOffset + rectRadius}`,
+        `A ${rectRadius} ${rectRadius} 0 0 1 ${rectOffset + rectRadius} ${rectOffset}`,
+    ].join(' ');
+    const extendedRoundedPath = `M ${rectOffset + rectRadius} ${rectOffset} ${roundedPathLap} ${roundedPathLap}`;
+    return {
+        width,
+        height,
+        rectOffset,
+        rectWidth,
+        rectHeight,
+        rectRadius,
+        rectRight,
+        rectBottom,
+        extendedRoundedPath,
+    };
+}
+function BeamSvgLayer({ beamRef, auraGradientId, softGlowFilterId, radius, size, }) {
+    const { width, height, rectOffset, rectWidth, rectHeight, rectRadius, rectRight, rectBottom, extendedRoundedPath, } = createBeamGeometry({
+        radius,
+        size,
+    });
+    return (jsxRuntime.jsxs("svg", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-20 h-full w-full overflow-visible", preserveAspectRatio: "none", viewBox: `0 0 ${width} ${height}`, children: [jsxRuntime.jsxs("g", { ref: beamRef, opacity: "0", style: { mixBlendMode: 'plus-lighter' }, children: [jsxRuntime.jsx("rect", { x: rectOffset, y: rectOffset, width: rectWidth, height: rectHeight, rx: rectRadius, ry: rectRadius, pathLength: "1", fill: "none", stroke: `url(#${auraGradientId})`, strokeLinecap: "round", strokeWidth: "var(--beam-frame-ambient-glow-width)", vectorEffect: "non-scaling-stroke", filter: `url(#${softGlowFilterId})`, opacity: "var(--beam-frame-ambient-glow-opacity)" }), jsxRuntime.jsx("path", { d: extendedRoundedPath, pathLength: "2", fill: "none", stroke: `url(#${auraGradientId})`, strokeLinecap: "round", strokeWidth: "var(--beam-frame-aura-width)", vectorEffect: "non-scaling-stroke", filter: `url(#${softGlowFilterId})`, style: {
+                            strokeDasharray: 'var(--beam-frame-aura-dash-pattern)',
+                        }, opacity: "var(--beam-frame-aura-opacity)" }), jsxRuntime.jsx("path", { d: extendedRoundedPath, pathLength: "2", fill: "none", stroke: `url(#${auraGradientId})`, strokeLinecap: "round", strokeWidth: "var(--beam-frame-trace-width)", vectorEffect: "non-scaling-stroke", style: {
+                            strokeDasharray: 'var(--beam-frame-trace-dash-pattern)',
+                        }, opacity: "var(--beam-frame-beam-opacity)" })] }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsx("filter", { id: softGlowFilterId, x: "-40%", y: "-40%", width: "180%", height: "180%", children: jsxRuntime.jsx("feGaussianBlur", { stdDeviation: "8" }) }), jsxRuntime.jsxs("linearGradient", { id: auraGradientId, x1: rectOffset, x2: rectRight, y1: rectOffset, y2: rectBottom, gradientUnits: "userSpaceOnUse", children: [jsxRuntime.jsx("stop", { offset: "0%", stopColor: "var(--beam-frame-color-a)", stopOpacity: "0.58" }), jsxRuntime.jsx("stop", { offset: "22%", stopColor: "var(--beam-frame-color-b)", stopOpacity: "0.78" }), jsxRuntime.jsx("stop", { offset: "44%", stopColor: "var(--beam-frame-color-c)", stopOpacity: "0.96" }), jsxRuntime.jsx("stop", { offset: "58%", stopColor: "var(--beam-frame-color-b)", stopOpacity: "1" }), jsxRuntime.jsx("stop", { offset: "78%", stopColor: "var(--beam-frame-color-a)", stopOpacity: "0.82" }), jsxRuntime.jsx("stop", { offset: "100%", stopColor: "var(--beam-frame-color-c)", stopOpacity: "0.58" })] })] })] }));
+}
+
+exports.BASE_DURATION_SECONDS = BASE_DURATION_SECONDS;
+exports.BeamFrameShell = BeamFrameShell;
+exports.BeamSvgLayer = BeamSvgLayer;
+exports.DEFAULT_RADIUS = DEFAULT_RADIUS;
+exports.createBeamGeometry = createBeamGeometry;
+exports.normalizeDuration = normalizeDuration;
+exports.useInteractiveRunning = useInteractiveRunning;
+exports.useMeasuredFrameSize = useMeasuredFrameSize;

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

@@ -0,0 +1,152 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from '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: '#FF3D77', b: '#3388FF', c: '#00FF88' },
+    mono: { a: '#E5E7EB', b: '#94A3B8', c: '#FFFFFF' },
+    warm: { a: '#F97316', b: '#FBBF24', c: '#EF4444' },
+    cool: { a: '#06B6D4', b: '#6366F1', c: '#14B8A6' },
+};
+const BEAM_FRAME_STYLE = {
+    ambientGlowOpacity: 0.24,
+    beamOpacity: 1.0,
+    auraOpacity: 0.86,
+    auraLength: 0.08,
+    traceLength: 0.42,
+    traceWidth: 1.15,
+    ambientGlowWidth: 7,
+    auraWidth: 8.5,
+};
+const BASE_BORDER_OPACITY = 0.18;
+const BASE_DURATION_SECONDS = 3.6;
+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 BASE_DURATION_SECONDS;
+    }
+    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({ tone, radius, }) {
+    const palette = getPalette(tone);
+    const frameRadius = radius !== null && radius !== void 0 ? radius : DEFAULT_RADIUS;
+    return {
+        '--beam-frame-radius': `${frameRadius}px`,
+        '--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-ambient-glow-opacity': BEAM_FRAME_STYLE.ambientGlowOpacity,
+        '--beam-frame-beam-opacity': BEAM_FRAME_STYLE.beamOpacity,
+        '--beam-frame-aura-opacity': BEAM_FRAME_STYLE.auraOpacity,
+        '--beam-frame-aura-length': BEAM_FRAME_STYLE.auraLength,
+        '--beam-frame-aura-dash-pattern': 'var(--beam-frame-aura-length) calc(1 - var(--beam-frame-aura-length))',
+        '--beam-frame-trace-length': BEAM_FRAME_STYLE.traceLength,
+        '--beam-frame-trace-dash-pattern': 'var(--beam-frame-trace-length) calc(1 - var(--beam-frame-trace-length))',
+        '--beam-frame-trace-width': BEAM_FRAME_STYLE.traceWidth,
+        '--beam-frame-ambient-glow-width': BEAM_FRAME_STYLE.ambientGlowWidth,
+        '--beam-frame-aura-width': BEAM_FRAME_STYLE.auraWidth,
+    };
+}
+function BeamFrameShell({ children, className, tone, radius, isRunning, interactionProps, renderBeam, rootRef, }) {
+    return (jsxs("div", Object.assign({ ref: rootRef, className: cn('group/beam-frame relative isolate overflow-hidden rounded-(--beam-frame-radius) p-px', className), "data-beam-running": isRunning ? 'true' : 'false', style: createRootStyle({ tone, radius }) }, interactionProps, { children: [renderBeam(), jsx("div", { className: "relative z-10 rounded-[calc(var(--beam-frame-radius)-1px)]", children: children })] })));
+}
+function createBeamGeometry({ radius, size, }) {
+    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));
+    const rectRight = rectOffset + rectWidth;
+    const rectBottom = rectOffset + rectHeight;
+    const roundedPathLap = [
+        `H ${rectRight - rectRadius}`,
+        `A ${rectRadius} ${rectRadius} 0 0 1 ${rectRight} ${rectOffset + rectRadius}`,
+        `V ${rectBottom - rectRadius}`,
+        `A ${rectRadius} ${rectRadius} 0 0 1 ${rectRight - rectRadius} ${rectBottom}`,
+        `H ${rectOffset + rectRadius}`,
+        `A ${rectRadius} ${rectRadius} 0 0 1 ${rectOffset} ${rectBottom - rectRadius}`,
+        `V ${rectOffset + rectRadius}`,
+        `A ${rectRadius} ${rectRadius} 0 0 1 ${rectOffset + rectRadius} ${rectOffset}`,
+    ].join(' ');
+    const extendedRoundedPath = `M ${rectOffset + rectRadius} ${rectOffset} ${roundedPathLap} ${roundedPathLap}`;
+    return {
+        width,
+        height,
+        rectOffset,
+        rectWidth,
+        rectHeight,
+        rectRadius,
+        rectRight,
+        rectBottom,
+        extendedRoundedPath,
+    };
+}
+function BeamSvgLayer({ beamRef, auraGradientId, softGlowFilterId, radius, size, }) {
+    const { width, height, rectOffset, rectWidth, rectHeight, rectRadius, rectRight, rectBottom, extendedRoundedPath, } = createBeamGeometry({
+        radius,
+        size,
+    });
+    return (jsxs("svg", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-20 h-full w-full overflow-visible", preserveAspectRatio: "none", viewBox: `0 0 ${width} ${height}`, children: [jsxs("g", { ref: beamRef, opacity: "0", style: { mixBlendMode: 'plus-lighter' }, children: [jsx("rect", { x: rectOffset, y: rectOffset, width: rectWidth, height: rectHeight, rx: rectRadius, ry: rectRadius, pathLength: "1", fill: "none", stroke: `url(#${auraGradientId})`, strokeLinecap: "round", strokeWidth: "var(--beam-frame-ambient-glow-width)", vectorEffect: "non-scaling-stroke", filter: `url(#${softGlowFilterId})`, opacity: "var(--beam-frame-ambient-glow-opacity)" }), jsx("path", { d: extendedRoundedPath, pathLength: "2", fill: "none", stroke: `url(#${auraGradientId})`, strokeLinecap: "round", strokeWidth: "var(--beam-frame-aura-width)", vectorEffect: "non-scaling-stroke", filter: `url(#${softGlowFilterId})`, style: {
+                            strokeDasharray: 'var(--beam-frame-aura-dash-pattern)',
+                        }, opacity: "var(--beam-frame-aura-opacity)" }), jsx("path", { d: extendedRoundedPath, pathLength: "2", fill: "none", stroke: `url(#${auraGradientId})`, strokeLinecap: "round", strokeWidth: "var(--beam-frame-trace-width)", vectorEffect: "non-scaling-stroke", style: {
+                            strokeDasharray: 'var(--beam-frame-trace-dash-pattern)',
+                        }, opacity: "var(--beam-frame-beam-opacity)" })] }), jsxs("defs", { children: [jsx("filter", { id: softGlowFilterId, x: "-40%", y: "-40%", width: "180%", height: "180%", children: jsx("feGaussianBlur", { stdDeviation: "8" }) }), jsxs("linearGradient", { id: auraGradientId, x1: rectOffset, x2: rectRight, y1: rectOffset, y2: rectBottom, gradientUnits: "userSpaceOnUse", children: [jsx("stop", { offset: "0%", stopColor: "var(--beam-frame-color-a)", stopOpacity: "0.58" }), jsx("stop", { offset: "22%", stopColor: "var(--beam-frame-color-b)", stopOpacity: "0.78" }), jsx("stop", { offset: "44%", stopColor: "var(--beam-frame-color-c)", stopOpacity: "0.96" }), jsx("stop", { offset: "58%", stopColor: "var(--beam-frame-color-b)", stopOpacity: "1" }), jsx("stop", { offset: "78%", stopColor: "var(--beam-frame-color-a)", stopOpacity: "0.82" }), jsx("stop", { offset: "100%", stopColor: "var(--beam-frame-color-c)", stopOpacity: "0.58" })] })] })] }));
+}
+
+export { BASE_DURATION_SECONDS, BeamFrameShell, BeamSvgLayer, DEFAULT_RADIUS, createBeamGeometry, normalizeDuration, useInteractiveRunning, useMeasuredFrameSize };