@windrun-huaiin/third-ui 29.2.1 → 30.1.0

package/src/main/snake-loading-frame.tsx

@@ -1,43 +1,42 @@
 'use client';
 
-import type { ReactNode, RefObject } from 'react';
-import { useEffect, useId, useMemo, useRef, useState } from 'react';
-import { motion } from 'framer-motion';
+import type { ReactNode } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { motion } from 'motion/react';
 import { cn } from '@windrun-huaiin/lib/utils';
+import { AnimeBeamFrame } from './anime';
+import type { BeamFrameTone } from './beam-frame-config';
 
 type SnakeShape = 'circle' | 'rounded-rect';
 
-interface SnakeLoadingFrameProps {
+export interface SnakeLoadingFrameProps {
   shape: SnakeShape;
   loading: boolean;
   children: ReactNode;
+  paused?: boolean;
   className?: string;
   themeColor?: string;
+  tone?: BeamFrameTone;
   strokeWidth?: number;
   contentClassName?: string;
 }
 
-interface SnakeLoadingPreviewProps {
+export interface SnakeLoadingPreviewProps {
   shape: SnakeShape;
   children: ReactNode;
   className?: string;
   themeColor?: string;
+  tone?: BeamFrameTone;
   defaultProgress?: number;
   strokeWidth?: number;
   contentClassName?: string;
 }
 
 const DEFAULT_THEME_COLOR = '#3b82f6';
-const TRACK_COLOR = 'rgba(148, 163, 184, 0.22)';
-const BODY_LENGTH_RATIO = 0.26;
 const EXIT_DURATION_MS = 260;
 const LOOP_DURATION_SECONDS = 1.85;
 const DEFAULT_CIRCLE_STROKE = 0.5;
 const DEFAULT_RECT_STROKE = 1;
-const MIN_FRAME_SIZE = 2;
-const MIN_BODY_LENGTH = 24;
-const MAX_BODY_LENGTH_RATIO = 0.36;
-const RECT_MIN_STROKE_WIDTH = 1;
 
 function clampProgress(progress: number): number {
   if (!Number.isFinite(progress)) {
@@ -71,488 +70,34 @@ function createBodyTailColor(themeColor: string): string {
   return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.18)`;
 }
 
-function createHeadGlowColor(themeColor: string): string {
-  const rgb = hexToRgb(themeColor);
-
-  if (!rgb) {
-    return 'rgba(59, 130, 246, 0.94)';
-  }
-
-  return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.94)`;
-}
-
-function createSweepTailColor(themeColor: string): string {
-  const rgb = hexToRgb(themeColor);
-
-  if (!rgb) {
-    return 'rgba(59, 130, 246, 0.32)';
-  }
-
-  return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.32)`;
-}
-
-interface CornerRadius {
-  x: number;
-  y: number;
-}
-
-interface RectRadii {
-  topLeft: CornerRadius;
-  topRight: CornerRadius;
-  bottomRight: CornerRadius;
-  bottomLeft: CornerRadius;
-}
-
-interface RingGeometry {
-  viewBox: string;
-  path: string;
-  length: number;
-  strokeWidth: number;
-}
-
-function parseRadiusValue(value: string): CornerRadius {
-  const parts = value
-    .split(/\s+/)
-    .map((part) => Number.parseFloat(part))
-    .filter((part) => Number.isFinite(part));
-
-  if (parts.length === 0) {
-    return { x: 0, y: 0 };
-  }
-
-  if (parts.length === 1) {
-    return { x: parts[0], y: parts[0] };
-  }
-
-  return { x: parts[0], y: parts[1] };
-}
-
-function clampCornerRadius(
-  radius: CornerRadius,
-  maxX: number,
-  maxY: number,
-): CornerRadius {
-  return {
-    x: Math.max(0, Math.min(radius.x, maxX)),
-    y: Math.max(0, Math.min(radius.y, maxY)),
-  };
-}
-
-function scaleHorizontalPair(
-  start: CornerRadius,
-  end: CornerRadius,
-  limit: number,
-): [CornerRadius, CornerRadius] {
-  const sum = start.x + end.x;
-
-  if (sum <= limit || sum === 0) {
-    return [start, end];
-  }
-
-  const scale = limit / sum;
-
-  return [
-    { ...start, x: start.x * scale },
-    { ...end, x: end.x * scale },
-  ];
-}
-
-function scaleVerticalPair(
-  start: CornerRadius,
-  end: CornerRadius,
-  limit: number,
-): [CornerRadius, CornerRadius] {
-  const sum = start.y + end.y;
-
-  if (sum <= limit || sum === 0) {
-    return [start, end];
-  }
-
-  const scale = limit / sum;
-
-  return [
-    { ...start, y: start.y * scale },
-    { ...end, y: end.y * scale },
-  ];
-}
-
-function normalizeRectRadii(
-  width: number,
-  height: number,
-  input: RectRadii,
-): RectRadii {
-  let topLeft = clampCornerRadius(input.topLeft, width / 2, height / 2);
-  let topRight = clampCornerRadius(input.topRight, width / 2, height / 2);
-  let bottomRight = clampCornerRadius(input.bottomRight, width / 2, height / 2);
-  let bottomLeft = clampCornerRadius(input.bottomLeft, width / 2, height / 2);
-
-  [topLeft, topRight] = scaleHorizontalPair(topLeft, topRight, width);
-  [bottomLeft, bottomRight] = scaleHorizontalPair(bottomLeft, bottomRight, width);
-  [topLeft, bottomLeft] = scaleVerticalPair(topLeft, bottomLeft, height);
-  [topRight, bottomRight] = scaleVerticalPair(topRight, bottomRight, height);
-
-  return {
-    topLeft,
-    topRight,
-    bottomRight,
-    bottomLeft,
-  };
-}
-
-function buildRoundedRectPath(
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-  radii: RectRadii,
-): string {
-  const { topLeft, topRight, bottomRight, bottomLeft } = normalizeRectRadii(
-    width,
-    height,
-    radii,
-  );
-
-  return [
-    `M ${x + topLeft.x} ${y}`,
-    `H ${x + Math.max(topLeft.x, width - topRight.x)}`,
-    topRight.x > 0 || topRight.y > 0
-      ? `A ${topRight.x} ${topRight.y} 0 0 1 ${x + width} ${y + topRight.y}`
-      : `L ${x + width} ${y}`,
-    `V ${y + Math.max(topRight.y, height - bottomRight.y)}`,
-    bottomRight.x > 0 || bottomRight.y > 0
-      ? `A ${bottomRight.x} ${bottomRight.y} 0 0 1 ${x + width - bottomRight.x} ${y + height}`
-      : `L ${x + width} ${y + height}`,
-    `H ${x + Math.min(width - bottomRight.x, bottomLeft.x)}`,
-    bottomLeft.x > 0 || bottomLeft.y > 0
-      ? `A ${bottomLeft.x} ${bottomLeft.y} 0 0 1 ${x} ${y + height - bottomLeft.y}`
-      : `L ${x} ${y + height}`,
-    `V ${y + Math.min(height - bottomLeft.y, topLeft.y)}`,
-    topLeft.x > 0 || topLeft.y > 0
-      ? `A ${topLeft.x} ${topLeft.y} 0 0 1 ${x + topLeft.x} ${y}`
-      : `L ${x} ${y}`,
-    'Z',
-  ].join(' ');
-}
-
-function createCircleGeometry(
-  width: number,
-  height: number,
-  strokeWidth: number,
-): RingGeometry {
-  const safeWidth = Math.max(width, MIN_FRAME_SIZE);
-  const safeHeight = Math.max(height, MIN_FRAME_SIZE);
-  const radius = Math.max(0, Math.min(safeWidth, safeHeight) / 2 - strokeWidth / 2);
-  const centerX = safeWidth / 2;
-  const centerY = safeHeight / 2;
-
-  return {
-    viewBox: `0 0 ${safeWidth} ${safeHeight}`,
-    path: `M ${centerX} ${centerY - radius} A ${radius} ${radius} 0 1 1 ${centerX} ${
-      centerY + radius
-    } A ${radius} ${radius} 0 1 1 ${centerX} ${centerY - radius}`,
-    length: Math.max(0, 2 * Math.PI * radius),
-    strokeWidth,
-  };
-}
-
-function createRoundedRectGeometry(
-  width: number,
-  height: number,
-  strokeWidth: number,
-  radii: RectRadii,
-): RingGeometry {
-  const safeWidth = Math.max(width, MIN_FRAME_SIZE);
-  const safeHeight = Math.max(height, MIN_FRAME_SIZE);
-  const inset = strokeWidth / 2;
-  const innerWidth = Math.max(safeWidth - strokeWidth, MIN_FRAME_SIZE);
-  const innerHeight = Math.max(safeHeight - strokeWidth, MIN_FRAME_SIZE);
-  const adjustedRadii = normalizeRectRadii(innerWidth, innerHeight, {
-    topLeft: {
-      x: Math.max(0, radii.topLeft.x - inset),
-      y: Math.max(0, radii.topLeft.y - inset),
-    },
-    topRight: {
-      x: Math.max(0, radii.topRight.x - inset),
-      y: Math.max(0, radii.topRight.y - inset),
-    },
-    bottomRight: {
-      x: Math.max(0, radii.bottomRight.x - inset),
-      y: Math.max(0, radii.bottomRight.y - inset),
-    },
-    bottomLeft: {
-      x: Math.max(0, radii.bottomLeft.x - inset),
-      y: Math.max(0, radii.bottomLeft.y - inset),
-    },
-  });
-
-  return {
-    viewBox: `0 0 ${safeWidth} ${safeHeight}`,
-    path: buildRoundedRectPath(inset, inset, innerWidth, innerHeight, adjustedRadii),
-    length: 0,
-    strokeWidth,
-  };
-}
-
-function readRectRadii(element: HTMLElement): RectRadii {
-  const computedStyle = window.getComputedStyle(element);
-
-  return {
-    topLeft: parseRadiusValue(computedStyle.borderTopLeftRadius),
-    topRight: parseRadiusValue(computedStyle.borderTopRightRadius),
-    bottomRight: parseRadiusValue(computedStyle.borderBottomRightRadius),
-    bottomLeft: parseRadiusValue(computedStyle.borderBottomLeftRadius),
-  };
-}
-
-function SnakeRingSvg({
-  containerRef,
+function StaticProgressFrame({
   shape,
+  progress,
   themeColor,
-  progressRatio,
-  animate,
-  strokeWidth,
 }: {
-  containerRef: RefObject<HTMLDivElement | null>;
   shape: SnakeShape;
+  progress: number;
   themeColor: string;
-  progressRatio: number;
-  animate: boolean;
-  strokeWidth?: number;
 }) {
-  const gradientId = useId().replace(/:/g, '-');
-  const tailColor = createBodyTailColor(themeColor);
-  const headGlowColor = createHeadGlowColor(themeColor);
-  const sweepTailColor = createSweepTailColor(themeColor);
-  const [geometry, setGeometry] = useState<RingGeometry | null>(null);
-  const pathMeasureRef = useRef<SVGPathElement | null>(null);
-  const measuredLengthRef = useRef(0);
-
-  useEffect(() => {
-    const container = containerRef.current;
-
-    if (!container) {
-      return;
-    }
-
-    const updateGeometry = () => {
-      const rect = container.getBoundingClientRect();
-      const preferredStrokeWidth =
-        strokeWidth ?? (shape === 'circle' ? DEFAULT_CIRCLE_STROKE : DEFAULT_RECT_STROKE);
-      const resolvedStrokeWidth =
-        shape === 'rounded-rect'
-          ? Math.max(RECT_MIN_STROKE_WIDTH, preferredStrokeWidth)
-          : preferredStrokeWidth;
-      const nextGeometry =
-        shape === 'circle'
-          ? createCircleGeometry(rect.width, rect.height, resolvedStrokeWidth)
-          : createRoundedRectGeometry(
-              rect.width,
-              rect.height,
-              resolvedStrokeWidth,
-              readRectRadii(container),
-            );
-
-      measuredLengthRef.current = 0;
-      setGeometry(nextGeometry);
-    };
-
-    updateGeometry();
-
-    const resizeObserver = new ResizeObserver(() => {
-      updateGeometry();
-    });
-    const mutationObserver = new MutationObserver(() => {
-      updateGeometry();
-    });
-
-    resizeObserver.observe(container);
-    mutationObserver.observe(container, {
-      attributes: true,
-      attributeFilter: ['class', 'style'],
-    });
-
-    return () => {
-      resizeObserver.disconnect();
-      mutationObserver.disconnect();
-    };
-  }, [containerRef, shape, strokeWidth]);
-
-  useEffect(() => {
-    if (!geometry || shape === 'circle' || !pathMeasureRef.current) {
-      return;
-    }
-
-    const measuredLength = pathMeasureRef.current.getTotalLength();
-    const normalizedLength = Number.isFinite(measuredLength)
-      ? Math.max(0, measuredLength)
-      : 0;
-
-    if (normalizedLength <= 0) {
-      return;
-    }
-
-    if (Math.abs(measuredLengthRef.current - normalizedLength) < 0.1) {
-      return;
-    }
-
-    measuredLengthRef.current = normalizedLength;
-
-    setGeometry((current) => {
-      if (!current || current.path !== geometry.path) {
-        return current;
-      }
-
-      if (Math.abs(current.length - normalizedLength) < 0.1) {
-        return current;
-      }
-
-      return {
-        ...current,
-        length: normalizedLength,
-      };
-    });
-  }, [geometry, shape]);
-
-  const resolvedGeometry = useMemo(() => geometry, [geometry]);
-
-  if (!resolvedGeometry) {
-    return null;
-  }
-
-  const effectiveLength =
-    resolvedGeometry.length > 0
-      ? resolvedGeometry.length
-      : Math.max(
-          1,
-          2 * Math.max(0, resolvedGeometry.strokeWidth),
-          2 *
-            (Math.max(0, Number.parseFloat(resolvedGeometry.viewBox.split(' ')[2] ?? '0')) +
-              Math.max(0, Number.parseFloat(resolvedGeometry.viewBox.split(' ')[3] ?? '0'))),
-        );
-  const [, , viewBoxWidthRaw, viewBoxHeightRaw] = resolvedGeometry.viewBox.split(' ');
-  const viewBoxWidth = Math.max(0, Number.parseFloat(viewBoxWidthRaw ?? '0'));
-  const viewBoxHeight = Math.max(0, Number.parseFloat(viewBoxHeightRaw ?? '0'));
-  const centerX = viewBoxWidth / 2;
-  const centerY = viewBoxHeight / 2;
-  const isCircle = shape === 'circle';
-  const tailTransparentStart = isCircle ? '18%' : '26%';
-  const tailColorStart = isCircle ? '39%' : '46%';
-  const tailTransparentEnd = isCircle ? '90%' : '82%';
-  const headTransparentStart = isCircle ? '32%' : '40%';
-  const headColorStart = isCircle ? '48%' : '53%';
-  const headTransparentEnd = isCircle ? '82%' : '73%';
-  const bodyLength = Math.min(
-    effectiveLength * MAX_BODY_LENGTH_RATIO,
-    Math.max(MIN_BODY_LENGTH, effectiveLength * BODY_LENGTH_RATIO),
-  );
-  const bodyDashArray = `${bodyLength} ${effectiveLength}`;
-  const staticDashOffset = effectiveLength * (1 - progressRatio);
-  const tailStrokeWidth =
-    shape === 'circle'
-      ? resolvedGeometry.strokeWidth + 1.2
-      : resolvedGeometry.strokeWidth + Math.min(1.2, resolvedGeometry.strokeWidth * 0.32);
+  const trackColor = 'rgba(148, 163, 184, 0.22)';
+  const progressRatio = clampProgress(progress);
 
   return (
-    <svg
-      className="pointer-events-none absolute inset-0 h-full w-full"
-      viewBox={resolvedGeometry.viewBox}
-      preserveAspectRatio="none"
+    <div
       aria-hidden="true"
-    >
-      {shape === 'rounded-rect' ? (
-        <path ref={pathMeasureRef} d={resolvedGeometry.path} fill="none" stroke="transparent" />
-      ) : null}
-      {animate ? (
-        <defs>
-          <linearGradient
-            id={`${gradientId}-sweep-tail`}
-            x1="0"
-            y1="0"
-            x2={String(viewBoxWidth)}
-            y2="0"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop offset="0%" stopColor="transparent" />
-            <stop offset={tailTransparentStart} stopColor="transparent" />
-            <stop offset={tailColorStart} stopColor={sweepTailColor} />
-            <stop offset="64%" stopColor={headGlowColor} />
-            <stop offset={tailTransparentEnd} stopColor="transparent" />
-            <stop offset="100%" stopColor="transparent" />
-            <animateTransform
-              attributeName="gradientTransform"
-              type="rotate"
-              from={`0 ${centerX} ${centerY}`}
-              to={`360 ${centerX} ${centerY}`}
-              dur={`${LOOP_DURATION_SECONDS}s`}
-              repeatCount="indefinite"
-            />
-          </linearGradient>
-          <linearGradient
-            id={`${gradientId}-sweep-head`}
-            x1="0"
-            y1="0"
-            x2={String(viewBoxWidth)}
-            y2="0"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop offset="0%" stopColor="transparent" />
-            <stop offset={headTransparentStart} stopColor="transparent" />
-            <stop offset={headColorStart} stopColor={themeColor} />
-            <stop offset="63%" stopColor={headGlowColor} />
-            <stop offset={headTransparentEnd} stopColor="transparent" />
-            <stop offset="100%" stopColor="transparent" />
-            <animateTransform
-              attributeName="gradientTransform"
-              type="rotate"
-              from={`0 ${centerX} ${centerY}`}
-              to={`360 ${centerX} ${centerY}`}
-              dur={`${LOOP_DURATION_SECONDS}s`}
-              repeatCount="indefinite"
-            />
-          </linearGradient>
-        </defs>
-      ) : null}
-      <path
-        d={resolvedGeometry.path}
-        fill="none"
-        stroke={TRACK_COLOR}
-        strokeWidth={resolvedGeometry.strokeWidth}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      {animate ? (
-        <>
-          <path
-            d={resolvedGeometry.path}
-            fill="none"
-            stroke={`url(#${gradientId}-sweep-tail)`}
-            strokeWidth={tailStrokeWidth}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-          <path
-            d={resolvedGeometry.path}
-            fill="none"
-            stroke={`url(#${gradientId}-sweep-head)`}
-            strokeWidth={resolvedGeometry.strokeWidth}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </>
-      ) : null}
-      {!animate ? (
-        <path
-          d={resolvedGeometry.path}
-          fill="none"
-          stroke={themeColor}
-          strokeWidth={resolvedGeometry.strokeWidth}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeDasharray={bodyDashArray}
-          strokeDashoffset={staticDashOffset}
-        />
-      ) : null}
-    </svg>
+      className={cn(
+        'pointer-events-none absolute inset-0 p-px',
+        shape === 'circle' ? 'rounded-full' : 'rounded-[inherit]',
+      )}
+      style={{
+        background: `conic-gradient(${themeColor} 0% ${progressRatio}%, ${trackColor} ${progressRatio}% 100%)`,
+        mask: 'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',
+        maskComposite: 'exclude',
+        WebkitMask:
+          'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',
+        WebkitMaskComposite: 'xor',
+      }}
+    />
   );
 }
 
@@ -560,23 +105,65 @@ function SnakeFrameBase({
   shape,
   loading,
   children,
+  paused = false,
   className,
   themeColor = DEFAULT_THEME_COLOR,
+  tone = 'rainbow',
   previewProgress,
   strokeWidth,
   contentClassName,
 }: SnakeLoadingFrameProps & { previewProgress?: number }) {
   const containerRef = useRef<HTMLDivElement | null>(null);
+  const [frameRadius, setFrameRadius] = useState<number | undefined>(
+    shape === 'circle' ? 999 : undefined,
+  );
   const [showOverlay, setShowOverlay] = useState(loading || previewProgress !== undefined);
   const exitTimerRef = useRef<number | null>(null);
   const resolvedStrokeWidth =
     strokeWidth ?? (shape === 'circle' ? DEFAULT_CIRCLE_STROKE : DEFAULT_RECT_STROKE);
   const circleContentInset =
     shape === 'circle' ? Math.max(6, resolvedStrokeWidth + 4) : 0;
-  const progressRatio = clampProgress(previewProgress ?? 0) / 100;
+  const isPreview = previewProgress !== undefined;
+  const isActivelyLoading = loading && !paused && !isPreview;
 
   useEffect(() => {
-    if (previewProgress !== undefined) {
+    if (shape === 'circle') {
+      setFrameRadius(999);
+      return;
+    }
+
+    const node = containerRef.current;
+
+    if (!node) {
+      return;
+    }
+
+    const updateRadius = () => {
+      const computedStyle = window.getComputedStyle(node);
+      const nextRadius = Number.parseFloat(computedStyle.borderTopLeftRadius);
+
+      setFrameRadius(Number.isFinite(nextRadius) ? nextRadius : undefined);
+    };
+
+    updateRadius();
+
+    const resizeObserver = new ResizeObserver(updateRadius);
+    const mutationObserver = new MutationObserver(updateRadius);
+
+    resizeObserver.observe(node);
+    mutationObserver.observe(node, {
+      attributes: true,
+      attributeFilter: ['class', 'style'],
+    });
+
+    return () => {
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, [shape]);
+
+  useEffect(() => {
+    if (isPreview) {
       setShowOverlay(true);
       return;
     }
@@ -602,7 +189,7 @@ function SnakeFrameBase({
         exitTimerRef.current = null;
       }
     };
-  }, [loading, previewProgress]);
+  }, [isPreview, loading]);
 
   return (
     <div
@@ -635,17 +222,27 @@ function SnakeFrameBase({
         <motion.div
           className="pointer-events-none absolute inset-0 overflow-visible"
           initial={false}
-          animate={{ opacity: loading || previewProgress !== undefined ? 1 : 0 }}
+          animate={{ opacity: loading || isPreview ? 1 : 0 }}
           transition={{ duration: EXIT_DURATION_MS / 1000, ease: 'easeOut' }}
         >
-          <SnakeRingSvg
-            containerRef={containerRef}
-            shape={shape}
-            themeColor={themeColor}
-            progressRatio={progressRatio}
-            animate={previewProgress === undefined && loading}
-            strokeWidth={resolvedStrokeWidth}
-          />
+          {isPreview ? (
+            <StaticProgressFrame
+              shape={shape}
+              progress={previewProgress}
+              themeColor={themeColor}
+            />
+          ) : (
+            <AnimeBeamFrame
+              active={isActivelyLoading}
+              interactive={false}
+              tone={tone}
+              duration={LOOP_DURATION_SECONDS}
+              radius={frameRadius}
+              className="absolute inset-0 h-full w-full"
+            >
+              <div className="h-full w-full" />
+            </AnimeBeamFrame>
+          )}
         </motion.div>
       ) : null}
     </div>
@@ -661,6 +258,7 @@ export function SnakeLoadingPreview({
   children,
   className,
   themeColor = DEFAULT_THEME_COLOR,
+  tone = 'rainbow',
   defaultProgress = 32,
   strokeWidth,
   contentClassName,
@@ -678,6 +276,7 @@ export function SnakeLoadingPreview({
         previewProgress={progress}
         className={className}
         themeColor={themeColor}
+        tone={tone}
         strokeWidth={strokeWidth}
         contentClassName={contentClassName}
       >