@windrun-huaiin/third-ui 29.2.1 → 30.1.0

package/src/main/index.ts

@@ -2,6 +2,7 @@
 
 // Lightweight common client components.
 export * from './go-to-top';
+export * from './404-page';
 export * from './loading';
 export * from './nprogress-bar';
 export * from './rich-text-expert'

package/src/main/info-tooltip.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { CircleQuestionMarkIcon } from '@windrun-huaiin/base-ui/icons';
 import { themeBorderColor, themeIconColor, themeRingColor } from '@windrun-huaiin/base-ui/lib';
 import { cn } from '@windrun-huaiin/lib/utils';
@@ -12,6 +13,67 @@ type InfoTooltipProps = {
   desktopSide?: 'right' | 'bottom';
 };
 
+type TooltipPosition = {
+  left: number;
+  top: number;
+  maxWidth: number;
+  side: 'bottom' | 'inline';
+};
+
+const TOOLTIP_MARGIN = 12;
+const TOOLTIP_GAP = 8;
+const TOOLTIP_MAX_WIDTH = 288;
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max);
+}
+
+function getTooltipPosition(
+  target: HTMLElement,
+  align: NonNullable<InfoTooltipProps['align']>,
+  desktopSide: NonNullable<InfoTooltipProps['desktopSide']>,
+): TooltipPosition {
+  const rect = target.getBoundingClientRect();
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  const maxWidth = Math.min(
+    TOOLTIP_MAX_WIDTH,
+    Math.max(160, viewportWidth - TOOLTIP_MARGIN * 2),
+  );
+  const useInlineSide = desktopSide === 'right' && viewportWidth >= 768;
+
+  if (useInlineSide) {
+    const rightSpace = viewportWidth - rect.right - TOOLTIP_GAP - TOOLTIP_MARGIN;
+    const leftSpace = rect.left - TOOLTIP_GAP - TOOLTIP_MARGIN;
+    const placeRight = rightSpace >= Math.min(220, maxWidth) || rightSpace >= leftSpace;
+    const preferredLeft = placeRight
+      ? rect.right + TOOLTIP_GAP
+      : rect.left - maxWidth - TOOLTIP_GAP;
+
+    return {
+      left: clamp(preferredLeft, TOOLTIP_MARGIN, viewportWidth - maxWidth - TOOLTIP_MARGIN),
+      top: clamp(
+        rect.top + rect.height / 2,
+        TOOLTIP_MARGIN + 40,
+        viewportHeight - TOOLTIP_MARGIN - 40,
+      ),
+      maxWidth,
+      side: 'inline',
+    };
+  }
+
+  const preferredLeft = align === 'start'
+    ? rect.left
+    : rect.right - maxWidth;
+
+  return {
+    left: clamp(preferredLeft, TOOLTIP_MARGIN, viewportWidth - maxWidth - TOOLTIP_MARGIN),
+    top: Math.min(rect.bottom + TOOLTIP_GAP, viewportHeight - TOOLTIP_MARGIN),
+    maxWidth,
+    side: 'bottom',
+  };
+}
+
 export function InfoTooltip({
   content,
   className,
@@ -20,7 +82,17 @@ export function InfoTooltip({
 }: InfoTooltipProps) {
   const normalizedContent = content.trim();
   const containerRef = useRef<HTMLSpanElement | null>(null);
+  const tooltipRef = useRef<HTMLSpanElement | null>(null);
   const [open, setOpen] = useState(false);
+  const [position, setPosition] = useState<TooltipPosition | null>(null);
+
+  const updatePosition = () => {
+    if (!containerRef.current) {
+      return;
+    }
+
+    setPosition(getTooltipPosition(containerRef.current, align, desktopSide));
+  };
 
   useEffect(() => {
     function handlePointerDown(event: MouseEvent | TouchEvent) {
@@ -29,7 +101,11 @@ export function InfoTooltip({
       }
 
       const target = event.target;
-      if (target instanceof Node && !containerRef.current.contains(target)) {
+      if (
+        target instanceof Node &&
+        !containerRef.current.contains(target) &&
+        !tooltipRef.current?.contains(target)
+      ) {
         setOpen(false);
       }
     }
@@ -43,6 +119,23 @@ export function InfoTooltip({
     };
   }, []);
 
+  useEffect(() => {
+    if (!open) {
+      setPosition(null);
+      return;
+    }
+
+    updatePosition();
+
+    window.addEventListener('resize', updatePosition);
+    window.addEventListener('scroll', updatePosition, true);
+
+    return () => {
+      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener('scroll', updatePosition, true);
+    };
+  }, [align, desktopSide, open]);
+
   if (!normalizedContent) {
     return null;
   }
@@ -50,7 +143,7 @@ export function InfoTooltip({
   return (
     <span
       ref={containerRef}
-      className={cn('relative inline-flex h-5 w-5 shrink-0 align-middle', className)}
+      className={cn('inline-flex h-5 w-5 shrink-0 align-middle', className)}
       onMouseLeave={() => setOpen(false)}
     >
       <button
@@ -76,24 +169,27 @@ export function InfoTooltip({
       >
         <CircleQuestionMarkIcon className="h-4 w-4" />
       </button>
-      <span
-        className={cn(
-          'pointer-events-none absolute top-full z-50 mt-2 w-[min(18rem,calc(100vw-2rem))] rounded-2xl border bg-white/95 px-3 py-2 text-xs leading-5 text-slate-600 shadow-xl backdrop-blur-sm dark:bg-slate-950/95 dark:text-slate-300',
-          align === 'start' ? 'left-0 right-auto' : 'right-0 left-auto',
-          desktopSide === 'right'
-            ? align === 'start'
-              ? 'sm:left-0 sm:right-auto md:left-full md:right-auto md:top-1/2 md:mt-0 md:ml-2 md:-translate-y-1/2'
-              : 'sm:right-0 sm:left-auto md:left-full md:right-auto md:top-1/2 md:mt-0 md:ml-2 md:-translate-y-1/2'
-            : align === 'start'
-              ? 'md:left-0 md:right-auto md:top-full md:mt-2 md:ml-0 md:translate-y-0'
-              : 'md:right-0 md:left-auto md:top-full md:mt-2 md:ml-0 md:translate-y-0',
-          open ? 'block' : 'hidden',
-          themeBorderColor,
-        )}
-        role="tooltip"
-      >
-        {normalizedContent}
-      </span>
+      {open && position
+        ? createPortal(
+          <span
+            ref={tooltipRef}
+            className={cn(
+              'pointer-events-none fixed z-50 max-h-[calc(100vh-1.5rem)] overflow-y-auto rounded-2xl border bg-white/95 px-3 py-2 text-xs leading-5 text-slate-600 shadow-xl backdrop-blur-sm dark:bg-slate-950/95 dark:text-slate-300',
+              position.side === 'inline' && '-translate-y-1/2',
+              themeBorderColor,
+            )}
+            style={{
+              left: position.left,
+              top: position.top,
+              width: position.maxWidth,
+            }}
+            role="tooltip"
+          >
+            {normalizedContent}
+          </span>,
+          document.body,
+        )
+        : null}
     </span>
   );
 }

package/src/main/loading-frame/index.ts

@@ -1,3 +1,7 @@
 'use client';
 
 export { SnakeLoadingFrame, SnakeLoadingPreview } from '../snake-loading-frame';
+export type {
+  SnakeLoadingFrameProps,
+  SnakeLoadingPreviewProps,
+} from '../snake-loading-frame';

package/src/main/loading.tsx

@@ -1,7 +1,9 @@
 'use client';
 
+import { useEffect, useMemo, useRef } from 'react';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { themeSvgIconColor } from '@windrun-huaiin/base-ui/lib';
+import { animate, type JSAnimation } from 'animejs';
 
 const NUM_ROWS = 15;
 const NUM_COLS = 15;
@@ -66,6 +68,7 @@ interface LoadingProps {
   className?: string;
   label?: string;
   labelClassName?: string;
+  paused?: boolean;
 }
 
 export function Loading({
@@ -74,32 +77,82 @@ export function Loading({
   className,
   label = 'Loading...',
   labelClassName,
+  paused = false,
 }: LoadingProps = {}) {
-  const colors = createLoadingPalette(themeColor);
-  const dots = [];
+  const gridRef = useRef<HTMLDivElement | null>(null);
+  const animationRef = useRef<JSAnimation | null>(null);
+  const pausedRef = useRef(paused);
+  const colors = useMemo(() => createLoadingPalette(themeColor), [themeColor]);
   const centerX = (NUM_COLS - 1) / 2;
   const centerY = (NUM_ROWS - 1) / 2;
-
-  for (let i = 0; i < NUM_ROWS; i++) {
-    for (let j = 0; j < NUM_COLS; j++) {
-      // Calculate distance from the center of the grid
-      const distance = Math.sqrt(Math.pow(i - centerY, 2) + Math.pow(j - centerX, 2));
-      dots.push({
-        id: `${i}-${j}`,
-        row: i,
-        col: j,
-        // Animation delay based on distance, creating a ripple effect
-        delay: distance * STAGGER_DELAY_FACTOR,
-        // Color selection based on distance rings
-        color: colors[Math.floor(distance) % colors.length],
-      });
+  const dots = useMemo(() => {
+    const nextDots = [];
+
+    for (let i = 0; i < NUM_ROWS; i++) {
+      for (let j = 0; j < NUM_COLS; j++) {
+        const distance = Math.sqrt(Math.pow(i - centerY, 2) + Math.pow(j - centerX, 2));
+        nextDots.push({
+          id: `${i}-${j}`,
+          row: i,
+          col: j,
+          delay: distance * STAGGER_DELAY_FACTOR,
+          color: colors[Math.floor(distance) % colors.length],
+        });
+      }
     }
-  }
+
+    return nextDots;
+  }, [centerX, centerY, colors]);
 
   // Calculate the total width and height of the dot container
   const containerWidth = (NUM_COLS - 1) * SPACING + DOT_SIZE;
   const containerHeight = (NUM_ROWS - 1) * SPACING + DOT_SIZE;
 
+  pausedRef.current = paused;
+
+  useEffect(() => {
+    const grid = gridRef.current;
+
+    if (!grid) {
+      return undefined;
+    }
+
+    const dotNodes = Array.from(grid.querySelectorAll<HTMLElement>('[data-loading-dot]'));
+
+    animationRef.current?.revert();
+    animationRef.current = animate(dotNodes, {
+      opacity: [0, 1, 0.7, 0],
+      scale: [0.2, 1.2, 0.8, 0.2],
+      duration: ANIMATION_DURATION * 1000,
+      delay: (target?: unknown) => Number((target as HTMLElement | undefined)?.dataset.loadingDelay ?? 0) * 1000,
+      ease: 'inOutSine',
+      loop: true,
+    });
+
+    if (pausedRef.current) {
+      animationRef.current.pause();
+    }
+
+    return () => {
+      animationRef.current?.revert();
+      animationRef.current = null;
+    };
+  }, [dots]);
+
+  useEffect(() => {
+    const animation = animationRef.current;
+
+    if (!animation) {
+      return;
+    }
+
+    if (paused) {
+      animation.pause();
+    } else {
+      animation.play();
+    }
+  }, [paused]);
+
   return (
     <div
       className={cn(
@@ -109,6 +162,7 @@ export function Loading({
       )}
     >
       <div
+        ref={gridRef}
         style={{
           width: containerWidth,
           height: containerHeight,
@@ -120,6 +174,8 @@ export function Loading({
         {dots.map(dot => (
           <div
             key={dot.id}
+            data-loading-dot=""
+            data-loading-delay={dot.delay}
             style={{
               position: 'absolute',
               left: dot.col * SPACING,
@@ -128,13 +184,8 @@ export function Loading({
               height: DOT_SIZE,
               backgroundColor: dot.color,
               borderRadius: '50%',
-              animationName: 'loading-dot-pulse',
-              animationDuration: `${ANIMATION_DURATION}s`,
-              animationTimingFunction: 'cubic-bezier(0.45, 0, 0.55, 1)',
-              animationIterationCount: 'infinite',
-              animationDelay: `${dot.delay}s`,
-              opacity: 0,
-              transform: 'scale(0)',
+              opacity: 0.35,
+              transform: 'scale(0.2)',
             }}
           />
         ))}

package/src/main/motion/index.ts

@@ -0,0 +1,8 @@
+'use client';
+
+export {
+  MotionBeamFrame,
+  MotionBeamFrame as BeamFrame,
+  type BeamFrameProps,
+  type BeamFrameTone,
+} from './motion-beam-frame';

package/src/main/motion/motion-beam-frame.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import { useEffect, useId, useRef } from 'react';
+import { animate, useReducedMotion } from 'motion/react';
+import {
+  BASE_DURATION_SECONDS,
+  BeamFrameShell,
+  BeamSvgLayer,
+  normalizeDuration,
+  useInteractiveRunning,
+  useMeasuredFrameSize,
+  type BeamFrameProps,
+  type FrameSize,
+} from '../beam-frame-config';
+
+export type { BeamFrameProps, BeamFrameTone } from '../beam-frame-config';
+
+type PlaybackControls = {
+  speed: number;
+  play: () => void;
+  pause: () => void;
+  stop: () => void;
+};
+
+function MotionAroundBeam({
+  isRunning,
+  duration,
+  radius,
+  size,
+}: {
+  isRunning: boolean;
+  duration: number;
+  radius?: number;
+  size: FrameSize;
+}) {
+  const auraGradientId = useId().replace(/:/g, '');
+  const softGlowFilterId = useId().replace(/:/g, '');
+  const beamGroupRef = useRef<SVGGElement | null>(null);
+  const controlsRef = useRef<PlaybackControls | null>(null);
+  const hasStartedRef = useRef(false);
+
+  useEffect(() => {
+    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) {
+      controlsRef.current?.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 () => {
+      controlsRef.current?.stop();
+      controlsRef.current = null;
+    };
+  }, []);
+
+  return (
+    <BeamSvgLayer
+      beamRef={beamGroupRef}
+      auraGradientId={auraGradientId}
+      softGlowFilterId={softGlowFilterId}
+      radius={radius}
+      size={size}
+    />
+  );
+}
+
+export function MotionBeamFrame(props: BeamFrameProps) {
+  const {
+    children,
+    active = false,
+    interactive = true,
+    tone = 'theme',
+    duration = BASE_DURATION_SECONDS,
+    radius,
+    className,
+  } = props;
+  const prefersReducedMotion = useReducedMotion();
+  const { isRunning, interactionProps } = useInteractiveRunning(active, interactive);
+  const shouldRun = isRunning && !prefersReducedMotion;
+  const normalizedDuration = normalizeDuration(duration);
+  const { ref, size } = useMeasuredFrameSize<HTMLDivElement>();
+
+  return (
+    <BeamFrameShell
+      active={active}
+      interactive={interactive}
+      tone={tone}
+      duration={normalizedDuration}
+      radius={radius}
+      className={className}
+      isRunning={shouldRun}
+      interactionProps={interactionProps}
+      rootRef={ref}
+      renderBeam={() => (
+        <MotionAroundBeam
+          isRunning={shouldRun}
+          duration={normalizedDuration}
+          radius={radius}
+          size={size}
+        />
+      )}
+    >
+      {children}
+    </BeamFrameShell>
+  );
+}