@windrun-huaiin/third-ui 29.2.1 → 30.0.0

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

@@ -3,6 +3,7 @@
 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>;
@@ -29,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();
@@ -56,12 +58,12 @@ export function useDialogLoadingAction({
           <Loading className="h-full w-full" />
         </div>
       ) : (
-        <div className="pointer-events-none fixed inset-0 z-10000 flex items-center justify-center p-4">
-          <div className="pointer-events-auto overflow-hidden rounded-[28px] bg-neutral-50/58 shadow-[0_18px_56px_rgba(15,23,42,0.14)] backdrop-blur-md dark:bg-neutral-900/58 dark:shadow-[0_18px_56px_rgba(0,0,0,0.34)]">
+        <div className="fixed inset-0 z-10000">
+          <div className={dialogLoadingContentClass}>
             <Loading
               compact
               label="Loading"
-              className="min-h-[250px] w-[min(22rem,calc(100vw-2rem))] bg-transparent"
+              className="min-h-[220px] w-fit max-w-full rounded-none bg-transparent px-0 py-0 dark:bg-transparent"
               labelClassName="text-foreground"
             />
           </div>

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";
@@ -71,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"
@@ -82,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';
 
@@ -109,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';
@@ -163,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
@@ -199,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" />
@@ -207,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';