@windrun-huaiin/third-ui 29.2.0 → 30.0.0

package/src/main/alert-dialog/dialog-loading-action.tsx

@@ -3,17 +3,20 @@
 import React from 'react';
 import { createPortal } from 'react-dom';
 import { Loading } from '../loading';
+import { dialogLoadingContentClass } from './dialog-styles';
 
 export type DialogLoadingAction = 'cancel' | 'confirm' | 'undo';
 export type DialogActionHandler = () => void | Promise<void>;
 
 interface UseDialogLoadingActionOptions {
   loadingActions?: readonly DialogLoadingAction[];
+  loadingFullPage?: boolean;
   onOpenChange: (open: boolean) => void;
 }
 
 export function useDialogLoadingAction({
   loadingActions,
+  loadingFullPage = false,
   onOpenChange,
 }: UseDialogLoadingActionOptions) {
   const [mounted, setMounted] = React.useState(false);
@@ -27,18 +30,19 @@ export function useDialogLoadingAction({
     action: DialogLoadingAction,
     handler?: DialogActionHandler
   ) => {
-    onOpenChange(false);
-
     if (!handler) {
+      onOpenChange(false);
       return;
     }
 
     if (!loadingActions?.includes(action)) {
+      onOpenChange(false);
       await handler();
       return;
     }
 
     setLoading(true);
+    onOpenChange(false);
 
     try {
       await handler();
@@ -49,9 +53,22 @@ export function useDialogLoadingAction({
 
   const dialogLoading = mounted && loading
     ? createPortal(
-      <div className="fixed inset-0 z-10000">
-        <Loading className="h-full w-full" />
-      </div>,
+      loadingFullPage ? (
+        <div className="fixed inset-0 z-10000">
+          <Loading className="h-full w-full" />
+        </div>
+      ) : (
+        <div className="fixed inset-0 z-10000">
+          <div className={dialogLoadingContentClass}>
+            <Loading
+              compact
+              label="Loading"
+              className="min-h-[220px] w-fit max-w-full rounded-none bg-transparent px-0 py-0 dark:bg-transparent"
+              labelClassName="text-foreground"
+            />
+          </div>
+        </div>
+      ),
       document.body
     )
     : null;

package/src/main/alert-dialog/dialog-styles.ts

@@ -12,7 +12,7 @@ import {
 import { cn } from '@windrun-huaiin/lib/utils';
 
 export const dialogSurfaceClass = cn(
-  'w-[calc(100vw-2rem)] max-w-md rounded-2xl border bg-white p-5 text-neutral-950 shadow-2xl outline-none dark:bg-neutral-950 dark:text-neutral-50',
+  'min-h-[240px] w-[calc(100vw-2rem)] max-w-md rounded-2xl border bg-white p-5 text-neutral-950 shadow-2xl outline-none dark:bg-neutral-950 dark:text-neutral-50',
   'border-neutral-200 dark:border-neutral-800'
 );
 
@@ -26,13 +26,22 @@ export const dialogContentClass = cn(
   dialogSurfaceClass
 );
 
+export const dialogLoadingContentClass = cn(
+  'fixed left-1/2 top-1/2 z-10000 -translate-x-1/2 -translate-y-1/2',
+  dialogSurfaceClass,
+  'flex items-center justify-center overflow-hidden animate-in fade-in-0 zoom-in-95 duration-150'
+);
+
 export const dialogHeaderClass = 'flex items-start justify-between gap-4';
 
 export const dialogTitleClass =
-  'flex min-w-0 items-center gap-2 text-lg font-bold leading-tight text-neutral-950 dark:text-neutral-50';
+  'flex min-w-0 flex-1 items-center gap-2 text-lg font-bold leading-tight text-neutral-950 dark:text-neutral-50';
+
+export const dialogTitleTextClass =
+  'min-w-0 flex-1 line-clamp-2 break-words';
 
 export const dialogDescriptionClass =
-  'mt-3 text-sm font-medium leading-relaxed text-neutral-600 dark:text-neutral-300';
+  'mt-3 break-words text-sm font-medium leading-relaxed text-neutral-600 dark:text-neutral-300';
 
 export const dialogFooterClass = 'mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end';
 
@@ -67,6 +76,7 @@ export const highPriorityTitleClass = cn(
 
 export const highPrioritySurfaceClass = cn(
   dialogSurfaceClass,
+  'flex flex-col',
   'backdrop-blur-md ring-4 animate-in zoom-in-95 duration-300',
   themeBorderColor,
   themeRingColor

package/src/main/alert-dialog/high-priority-confirm-dialog.tsx

@@ -11,6 +11,7 @@ import {
   dialogHeaderClass,
   highPrioritySurfaceClass,
   highPriorityTitleClass,
+  dialogTitleTextClass,
   primaryButtonClass,
   secondaryButtonClass,
 } from "./dialog-styles";
@@ -27,6 +28,7 @@ interface HighPriorityConfirmDialogProps {
   confirmText?: string;
   cancelText?: string;
   loadingActions?: readonly DialogLoadingAction[];
+  loadingFullPage?: boolean;
 }
 
 export function HighPriorityConfirmDialog({
@@ -39,9 +41,10 @@ export function HighPriorityConfirmDialog({
   confirmText = "Confirm",
   cancelText = "Cancel",
   loadingActions,
+  loadingFullPage,
 }: HighPriorityConfirmDialogProps) {
   const [mounted, setMounted] = useState(false);
-  const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, onOpenChange });
+  const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, loadingFullPage, onOpenChange });
   
   useEffect(() => {
     // Ensure portal target exists and prevent hydration mismatch
@@ -69,7 +72,7 @@ export function HighPriorityConfirmDialog({
                 <span className={cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', themeBgColor, themeBorderColor)}>
                   <FAQSIcon className={cn('size-5', themeIconColor)} />
                 </span>
-                <span className="min-w-0 truncate">{title}</span>
+                <span className={dialogTitleTextClass}>{title}</span>
               </h3>
               <button
                 type="button"
@@ -80,28 +83,30 @@ export function HighPriorityConfirmDialog({
                 <XIcon className="size-4" />
               </button>
             </div>
-            <div className={dialogDescriptionClass}>
-              {description}
-            </div>
-            <div className={dialogFooterClass}>
-              <button
-                type="button"
-                onClick={() => {
-                  void runDialogAction('cancel', onCancel);
-                }}
-                className={secondaryButtonClass}
-              >
-                {cancelText}
-              </button>
-              <button
-                type="button"
-                onClick={() => {
-                  void runDialogAction('confirm', onConfirm);
-                }}
-                className={cn(primaryButtonClass, "hover:scale-105 active:scale-95")}
-              >
-                {confirmText}
-              </button>
+            <div className="flex min-h-0 flex-1 flex-col">
+              <div className={dialogDescriptionClass}>
+                {description}
+              </div>
+              <div className={cn(dialogFooterClass, 'mt-auto')}>
+                <button
+                  type="button"
+                  onClick={() => {
+                    void runDialogAction('cancel', onCancel);
+                  }}
+                  className={secondaryButtonClass}
+                >
+                  {cancelText}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => {
+                    void runDialogAction('confirm', onConfirm);
+                  }}
+                  className={cn(primaryButtonClass, "hover:scale-105 active:scale-95")}
+                >
+                  {confirmText}
+                </button>
+              </div>
             </div>
           </div>
         </div>,

package/src/main/alert-dialog/info-dialog.tsx

@@ -24,6 +24,7 @@ import {
   dialogHeaderClass,
   dialogThemedOverlayClass,
   dialogTitleClass,
+  dialogTitleTextClass,
 } from './dialog-styles';
 import { DialogLoadingAction, DialogActionHandler, useDialogLoadingAction } from './dialog-loading-action';
 
@@ -38,6 +39,7 @@ interface InfoDialogProps {
   description: React.ReactNode;
   confirmText?: string;
   loadingActions?: readonly DialogLoadingAction[];
+  loadingFullPage?: boolean;
   onConfirm?: DialogActionHandler;
 }
 
@@ -86,12 +88,13 @@ export function InfoDialog({
   description,
   confirmText = 'OK',
   loadingActions,
+  loadingFullPage,
   onConfirm,
 }: InfoDialogProps) {
   const typeClass = infoTypeClassMap[type];
   const Icon = typeClass.Icon;
   const handleClose = () => onOpenChange(false);
-  const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, onOpenChange });
+  const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, loadingFullPage, onOpenChange });
 
   return (
     <>
@@ -107,7 +110,7 @@ export function InfoDialog({
                 <span className={cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', typeClass.iconWrap)}>
                   <Icon className={cn('size-5', typeClass.icon)} />
                 </span>
-                <span className="min-w-0 truncate">{title}</span>
+                <span className={dialogTitleTextClass}>{title}</span>
               </div>
             </AlertDialogTitle>
             <button

package/src/main/alert-dialog/undoable-confirm-dialog.tsx

@@ -19,6 +19,7 @@ import {
   dialogHeaderClass,
   dialogThemedOverlayClass,
   dialogTitleClass,
+  dialogTitleTextClass,
   secondaryButtonClass,
 } from './dialog-styles';
 import type { ConfirmDialogEmphasis } from './confirm-dialog';
@@ -37,6 +38,7 @@ export interface UndoableConfirmDialogProps {
   emphasis?: ConfirmDialogEmphasis;
   countdownSeconds?: number;
   loadingActions?: readonly DialogLoadingAction[];
+  loadingFullPage?: boolean;
   onCancel?: DialogActionHandler;
   onConfirm: DialogActionHandler;
   onUndo?: DialogActionHandler;
@@ -55,6 +57,7 @@ export function UndoableConfirmDialog({
   emphasis = 'confirm',
   countdownSeconds = 5,
   loadingActions,
+  loadingFullPage,
   onCancel,
   onConfirm,
   onUndo,
@@ -67,7 +70,7 @@ export function UndoableConfirmDialog({
   const intervalRef = React.useRef<number | null>(null);
   const cancelButtonClass = emphasis === 'cancel' ? dangerButtonClass : secondaryButtonClass;
   const confirmButtonClass = emphasis === 'cancel' ? secondaryButtonClass : dangerButtonClass;
-  const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, onOpenChange });
+  const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, loadingFullPage, onOpenChange });
 
   const clearTimers = React.useCallback(() => {
     if (timeoutRef.current) {
@@ -161,7 +164,7 @@ export function UndoableConfirmDialog({
                 <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-red-100 text-red-600 ring-1 ring-red-200 dark:bg-red-950 dark:text-red-300 dark:ring-red-900">
                   {pending ? <Trash2Icon className="size-5" /> : <CircleAlertIcon className="size-5" />}
                 </span>
-                <span className="min-w-0 truncate">{displayTitle}</span>
+                <span className={dialogTitleTextClass}>{displayTitle}</span>
               </div>
             </AlertDialogTitle>
             <button
@@ -197,7 +200,7 @@ export function UndoableConfirmDialog({
                 onClick={() => {
                   void handleUndo();
                 }}
-                className={secondaryButtonClass}
+                className={cn(secondaryButtonClass, 'w-full sm:w-auto')}
                 disabled={confirming}
               >
                 <Undo2Icon className="mr-1.5 size-4" />
@@ -205,21 +208,21 @@ export function UndoableConfirmDialog({
               </button>
             ) : (
               <>
-                <button
-                  type="button"
-                  onClick={handleCancel}
-                  className={cancelButtonClass}
-                >
-                  {cancelText}
-                </button>
-                <button
-                  type="button"
-                  onClick={startCountdown}
-                  className={confirmButtonClass}
-                >
-                  {confirmText}
-                </button>
-              </>
+              <button
+                type="button"
+                onClick={handleCancel}
+                className={cn(cancelButtonClass, 'w-full sm:w-auto')}
+              >
+                {cancelText}
+              </button>
+              <button
+                type="button"
+                onClick={startCountdown}
+                className={cn(confirmButtonClass, 'w-full sm:w-auto')}
+              >
+                {confirmText}
+              </button>
+            </>
             )}
           </div>
         </AlertDialogContent>

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

@@ -0,0 +1,128 @@
+'use client';
+
+import { useEffect, useId, useRef } from 'react';
+import { type WAAPIAnimation, waapi } from 'animejs';
+import { 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';
+
+function AnimeBeamLayer({
+  isRunning,
+  duration,
+  radius,
+  size,
+}: {
+  isRunning: boolean;
+  duration: number;
+  radius?: number;
+  size: FrameSize;
+}) {
+  const aroundBeamRef = useRef<SVGGElement | null>(null);
+  const animationRef = useRef<WAAPIAnimation | null>(null);
+  const hasStartedRef = useRef(false);
+  const auraGradientId = useId().replace(/:/g, '');
+  const softGlowFilterId = useId().replace(/:/g, '');
+
+  useEffect(() => {
+    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) {
+      animationRef.current?.pause();
+      return undefined;
+    }
+
+    if (animationRef.current) {
+      animationRef.current.speed = 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.speed = BASE_DURATION_SECONDS / duration;
+
+    return undefined;
+  }, [duration, isRunning]);
+
+  useEffect(() => {
+    return () => {
+      animationRef.current?.revert();
+      animationRef.current = null;
+    };
+  }, []);
+
+  return (
+    <BeamSvgLayer
+      beamRef={aroundBeamRef}
+      auraGradientId={auraGradientId}
+      softGlowFilterId={softGlowFilterId}
+      radius={radius}
+      size={size}
+    />
+  );
+}
+
+export function AnimeBeamFrame(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={() => (
+        <AnimeBeamLayer
+          isRunning={shouldRun}
+          duration={normalizedDuration}
+          radius={radius}
+          size={size}
+        />
+      )}
+    >
+      {children}
+    </BeamFrameShell>
+  );
+}

package/src/main/anime/anime-spiral-loading.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import { useEffect, useMemo, useRef } from 'react';
+import { createTimeline, stagger, type Timeline, utils } from 'animejs';
+import { cn } from '@windrun-huaiin/lib/utils';
+
+const DEFAULT_DOT_COUNT = 2024;
+const DEFAULT_DURATION = 10000;
+const DEFAULT_DISTANCE_REM = 20;
+const DEFAULT_DOT_SIZE_EM = 1;
+const DEFAULT_FONT_SIZE = 20;
+
+export interface AnimeSpiralLoadingProps {
+  className?: string;
+  dotCount?: number;
+  duration?: number;
+  distanceRem?: number;
+  dotSizeEm?: number;
+  fontSize?: number;
+  paused?: boolean;
+}
+
+export function AnimeSpiralLoading({
+  className,
+  dotCount = DEFAULT_DOT_COUNT,
+  duration = DEFAULT_DURATION,
+  distanceRem = DEFAULT_DISTANCE_REM,
+  dotSizeEm = DEFAULT_DOT_SIZE_EM,
+  fontSize = DEFAULT_FONT_SIZE,
+  paused = false,
+}: AnimeSpiralLoadingProps) {
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const timelineRef = useRef<Timeline | null>(null);
+  const pausedRef = useRef(paused);
+  const safeDotCount = Math.max(1, Math.floor(dotCount));
+  const safeDuration = Math.max(1, duration);
+  const angle = useMemo(
+    () => (index: number) => utils.mapRange(index, 0, safeDotCount, 0, Math.PI * 100),
+    [safeDotCount]
+  );
+  const dots = useMemo(
+    () => Array.from({ length: safeDotCount }, (_, index) => {
+      const hue = utils.round((360 / safeDotCount) * index, 0);
+
+      return {
+        id: index,
+        background: `hsl(${hue}, 60%, 60%)`,
+      };
+    }),
+    [safeDotCount]
+  );
+
+  pausedRef.current = paused;
+
+  useEffect(() => {
+    const root = rootRef.current;
+
+    if (!root) {
+      return undefined;
+    }
+
+    const dotNodes = Array.from(root.querySelectorAll<HTMLElement>('[data-anime-spiral-dot]'));
+
+    timelineRef.current?.revert();
+    timelineRef.current = createTimeline()
+      .add(dotNodes, {
+        x: (_target: unknown, i: number) => `${Math.sin(angle(i)) * distanceRem}rem`,
+        y: (_target: unknown, i: number) => `${Math.cos(angle(i)) * distanceRem}rem`,
+        scale: [0, 0.4, 0.2, 0.9, 0],
+        playbackEase: 'inOutSine',
+        loop: true,
+        duration: safeDuration,
+      }, stagger([0, safeDuration]))
+      .init()
+      .seek(safeDuration);
+
+    if (pausedRef.current) {
+      timelineRef.current.pause();
+    }
+
+    return () => {
+      timelineRef.current?.revert();
+      timelineRef.current = null;
+    };
+  }, [angle, distanceRem, safeDuration, dots]);
+
+  useEffect(() => {
+    const timeline = timelineRef.current;
+
+    if (!timeline) {
+      return;
+    }
+
+    if (paused) {
+      timeline.pause();
+    } else {
+      timeline.play();
+    }
+  }, [paused]);
+
+  return (
+    <div
+      ref={rootRef}
+      className={cn('relative h-dvh w-full overflow-hidden', className)}
+      style={{ fontSize }}
+      aria-hidden="true"
+    >
+      {dots.map(dot => (
+        <div
+          key={dot.id}
+          data-anime-spiral-dot=""
+          className="absolute left-1/2 top-1/2 rounded-full"
+          style={{
+            width: `${dotSizeEm}em`,
+            height: `${dotSizeEm}em`,
+            margin: `${dotSizeEm / -2}em 0 0 ${dotSizeEm / -2}em`,
+            backgroundColor: dot.background,
+          }}
+        />
+      ))}
+    </div>
+  );
+}

package/src/main/anime/index.ts

@@ -0,0 +1,9 @@
+'use client';
+
+export {
+  AnimeBeamFrame,
+  type BeamFrameProps,
+  type BeamFrameTone,
+} from './anime-beam-frame';
+
+export { AnimeSpiralLoading, type AnimeSpiralLoadingProps } from './anime-spiral-loading';