@windrun-huaiin/third-ui 14.2.0 → 14.3.1

package/dist/fuma/mdx/index.d.ts

@@ -9,3 +9,4 @@ export * from './fuma-github-info';
 export * from './zia-file';
 export * from './toc-footer-wrapper';
 export * from './banner';
+export * from './suno-embed';

package/dist/fuma/mdx/index.js

@@ -12,6 +12,7 @@ var fumaGithubInfo = require('./fuma-github-info.js');
 var ziaFile = require('./zia-file.js');
 var tocFooterWrapper = require('./toc-footer-wrapper.js');
 var banner = require('./banner.js');
+var sunoEmbed = require('./suno-embed.js');
 
 
 
@@ -29,3 +30,4 @@ exports.ZiaFile = ziaFile.ZiaFile;
 exports.ZiaFolder = ziaFile.ZiaFolder;
 exports.TocFooterWrapper = tocFooterWrapper.TocFooterWrapper;
 exports.Banner = banner.Banner;
+exports.SunoEmbed = sunoEmbed.SunoEmbed;

package/dist/fuma/mdx/index.mjs

@@ -10,3 +10,4 @@ export { FumaGithubInfo } from './fuma-github-info.mjs';
 export { ZiaFile, ZiaFolder } from './zia-file.mjs';
 export { TocFooterWrapper } from './toc-footer-wrapper.mjs';
 export { Banner } from './banner.mjs';
+export { SunoEmbed } from './suno-embed.mjs';

package/dist/fuma/mdx/suno-embed.d.ts

@@ -0,0 +1,7 @@
+interface SunoEmbedProps {
+    src: string;
+    ratio?: string;
+    title?: string;
+}
+export declare function SunoEmbed({ src, ratio, title, }: SunoEmbedProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/fuma/mdx/suno-embed.js

@@ -0,0 +1,120 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var utils = require('@windrun-huaiin/lib/utils');
+var lib = require('@windrun-huaiin/base-ui/lib');
+var snakeLoadingFrame = require('../../main/snake-loading-frame.js');
+var gradientButton = require('./gradient-button.js');
+
+var _a;
+const rawTimeoutSeconds = (_a = process.env.NEXT_PUBLIC_SUNO_EMBED_TIMEOUT_SECONDS) !== null && _a !== void 0 ? _a : '30';
+const parsedTimeoutSeconds = Number(rawTimeoutSeconds);
+const SUNO_LOAD_TIMEOUT_MS = Number.isFinite(parsedTimeoutSeconds) && parsedTimeoutSeconds > 0
+    ? parsedTimeoutSeconds * 1000
+    : 5000;
+const SUNO_SURFACE_COLOR = 'rgb(32, 40, 85)';
+function toSunoEmbedUrl(src) {
+    try {
+        const url = new URL(src);
+        if (url.hostname !== 'suno.com' && url.hostname !== 'www.suno.com') {
+            return src;
+        }
+        const pathParts = url.pathname.split('/').filter(Boolean);
+        const [kind, id] = pathParts;
+        if (!id) {
+            return src;
+        }
+        if (kind === 'embed') {
+            return `https://suno.com/embed/${id}`;
+        }
+        if (kind === 'song') {
+            return `https://suno.com/embed/${id}`;
+        }
+        return src;
+    }
+    catch (_a) {
+        return src;
+    }
+}
+function SunoEmbed({ src, ratio = '30%', title = 'SUNO Music', }) {
+    const embedSrc = toSunoEmbedUrl(src);
+    const [isLoaded, setIsLoaded] = React.useState(false);
+    const [showTimeoutHint, setShowTimeoutHint] = React.useState(false);
+    const [hasTimedOut, setHasTimedOut] = React.useState(false);
+    const [remainingSeconds, setRemainingSeconds] = React.useState(Math.max(1, Math.ceil(SUNO_LOAD_TIMEOUT_MS / 1000)));
+    const timeoutRef = React.useRef(null);
+    const countdownRef = React.useRef(null);
+    React.useEffect(() => {
+        const timeoutSeconds = Math.max(1, Math.ceil(SUNO_LOAD_TIMEOUT_MS / 1000));
+        setIsLoaded(false);
+        setShowTimeoutHint(false);
+        setHasTimedOut(false);
+        setRemainingSeconds(timeoutSeconds);
+        timeoutRef.current = window.setTimeout(() => {
+            setShowTimeoutHint(true);
+            setHasTimedOut(true);
+        }, SUNO_LOAD_TIMEOUT_MS);
+        countdownRef.current = window.setInterval(() => {
+            setRemainingSeconds((current) => {
+                if (current <= 1) {
+                    if (countdownRef.current !== null) {
+                        window.clearInterval(countdownRef.current);
+                        countdownRef.current = null;
+                    }
+                    return 0;
+                }
+                return current - 1;
+            });
+        }, 1000);
+        return () => {
+            if (timeoutRef.current !== null) {
+                window.clearTimeout(timeoutRef.current);
+                timeoutRef.current = null;
+            }
+            if (countdownRef.current !== null) {
+                window.clearInterval(countdownRef.current);
+                countdownRef.current = null;
+            }
+        };
+    }, [embedSrc]);
+    const statusText = isLoaded
+        ? ''
+        : showTimeoutHint
+            ? 'Unavailable network.'
+            : `Loading... Remaining ${remainingSeconds}s`;
+    const handleLoad = () => {
+        if (timeoutRef.current !== null) {
+            window.clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        if (countdownRef.current !== null) {
+            window.clearInterval(countdownRef.current);
+            countdownRef.current = null;
+        }
+        setHasTimedOut(false);
+        setShowTimeoutHint(false);
+        setIsLoaded(true);
+    };
+    return (jsxRuntime.jsxs("div", { className: utils.cn('my-4 overflow-hidden rounded-[12px] border shadow-sm bg-white/70 dark:bg-white/5', lib.themeBgColor), children: [jsxRuntime.jsx("div", { className: "relative border-b border-white/12", style: { backgroundColor: SUNO_SURFACE_COLOR }, children: jsxRuntime.jsxs("div", { className: "relative flex items-baseline justify-between gap-3 px-4 py-1 sm:px-5", children: [jsxRuntime.jsx("p", { className: "text-sm font-semibold tracking-[0.12em] text-white", children: title }), statusText ? (jsxRuntime.jsx("p", { className: utils.cn('shrink-0 min-w-50 text-right text-[11px] font-medium tabular-nums tracking-[0.08em] sm:text-xs', showTimeoutHint ? 'text-red-500 dark:text-red-400' : 'text-white'), children: statusText })) : null] }) }), jsxRuntime.jsx("div", { style: {
+                    position: 'relative',
+                    width: '100%',
+                    height: 0,
+                    paddingBottom: ratio,
+                    overflow: 'hidden',
+                    backgroundColor: SUNO_SURFACE_COLOR,
+                }, children: jsxRuntime.jsx(snakeLoadingFrame.SnakeLoadingFrame, { shape: "rounded-rect", loading: !isLoaded && !hasTimedOut, themeColor: lib.themeSvgIconColor, className: "absolute inset-0", contentClassName: "h-full w-full", children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!isLoaded && (jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center px-4 text-center", children: jsxRuntime.jsx("div", { className: "relative z-10", children: jsxRuntime.jsx(gradientButton.GradientButton, { title: "Open in Suno", href: src, align: "center", className: "no-underline" }) }) })), !hasTimedOut && (jsxRuntime.jsx("iframe", { src: embedSrc, title: "Suno audio player", style: {
+                                    position: 'absolute',
+                                    top: 0,
+                                    left: 0,
+                                    width: '100%',
+                                    height: '100%',
+                                    border: 'none',
+                                    opacity: isLoaded ? 1 : 0,
+                                    transition: 'opacity 300ms ease',
+                                    pointerEvents: isLoaded ? 'auto' : 'none',
+                                }, allow: "autoplay; encrypted-media; fullscreen", allowFullScreen: true, loading: "lazy", referrerPolicy: "no-referrer-when-downgrade", onLoad: handleLoad, suppressHydrationWarning: true }))] }) }) })] }));
+}
+
+exports.SunoEmbed = SunoEmbed;

package/dist/fuma/mdx/suno-embed.mjs

@@ -0,0 +1,118 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { cn } from '@windrun-huaiin/lib/utils';
+import { themeSvgIconColor, themeBgColor } from '@windrun-huaiin/base-ui/lib';
+import { SnakeLoadingFrame } from '../../main/snake-loading-frame.mjs';
+import { GradientButton } from './gradient-button.mjs';
+
+var _a;
+const rawTimeoutSeconds = (_a = process.env.NEXT_PUBLIC_SUNO_EMBED_TIMEOUT_SECONDS) !== null && _a !== void 0 ? _a : '30';
+const parsedTimeoutSeconds = Number(rawTimeoutSeconds);
+const SUNO_LOAD_TIMEOUT_MS = Number.isFinite(parsedTimeoutSeconds) && parsedTimeoutSeconds > 0
+    ? parsedTimeoutSeconds * 1000
+    : 5000;
+const SUNO_SURFACE_COLOR = 'rgb(32, 40, 85)';
+function toSunoEmbedUrl(src) {
+    try {
+        const url = new URL(src);
+        if (url.hostname !== 'suno.com' && url.hostname !== 'www.suno.com') {
+            return src;
+        }
+        const pathParts = url.pathname.split('/').filter(Boolean);
+        const [kind, id] = pathParts;
+        if (!id) {
+            return src;
+        }
+        if (kind === 'embed') {
+            return `https://suno.com/embed/${id}`;
+        }
+        if (kind === 'song') {
+            return `https://suno.com/embed/${id}`;
+        }
+        return src;
+    }
+    catch (_a) {
+        return src;
+    }
+}
+function SunoEmbed({ src, ratio = '30%', title = 'SUNO Music', }) {
+    const embedSrc = toSunoEmbedUrl(src);
+    const [isLoaded, setIsLoaded] = useState(false);
+    const [showTimeoutHint, setShowTimeoutHint] = useState(false);
+    const [hasTimedOut, setHasTimedOut] = useState(false);
+    const [remainingSeconds, setRemainingSeconds] = useState(Math.max(1, Math.ceil(SUNO_LOAD_TIMEOUT_MS / 1000)));
+    const timeoutRef = useRef(null);
+    const countdownRef = useRef(null);
+    useEffect(() => {
+        const timeoutSeconds = Math.max(1, Math.ceil(SUNO_LOAD_TIMEOUT_MS / 1000));
+        setIsLoaded(false);
+        setShowTimeoutHint(false);
+        setHasTimedOut(false);
+        setRemainingSeconds(timeoutSeconds);
+        timeoutRef.current = window.setTimeout(() => {
+            setShowTimeoutHint(true);
+            setHasTimedOut(true);
+        }, SUNO_LOAD_TIMEOUT_MS);
+        countdownRef.current = window.setInterval(() => {
+            setRemainingSeconds((current) => {
+                if (current <= 1) {
+                    if (countdownRef.current !== null) {
+                        window.clearInterval(countdownRef.current);
+                        countdownRef.current = null;
+                    }
+                    return 0;
+                }
+                return current - 1;
+            });
+        }, 1000);
+        return () => {
+            if (timeoutRef.current !== null) {
+                window.clearTimeout(timeoutRef.current);
+                timeoutRef.current = null;
+            }
+            if (countdownRef.current !== null) {
+                window.clearInterval(countdownRef.current);
+                countdownRef.current = null;
+            }
+        };
+    }, [embedSrc]);
+    const statusText = isLoaded
+        ? ''
+        : showTimeoutHint
+            ? 'Unavailable network.'
+            : `Loading... Remaining ${remainingSeconds}s`;
+    const handleLoad = () => {
+        if (timeoutRef.current !== null) {
+            window.clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        if (countdownRef.current !== null) {
+            window.clearInterval(countdownRef.current);
+            countdownRef.current = null;
+        }
+        setHasTimedOut(false);
+        setShowTimeoutHint(false);
+        setIsLoaded(true);
+    };
+    return (jsxs("div", { className: cn('my-4 overflow-hidden rounded-[12px] border shadow-sm bg-white/70 dark:bg-white/5', themeBgColor), children: [jsx("div", { className: "relative border-b border-white/12", style: { backgroundColor: SUNO_SURFACE_COLOR }, children: jsxs("div", { className: "relative flex items-baseline justify-between gap-3 px-4 py-1 sm:px-5", children: [jsx("p", { className: "text-sm font-semibold tracking-[0.12em] text-white", children: title }), statusText ? (jsx("p", { className: cn('shrink-0 min-w-50 text-right text-[11px] font-medium tabular-nums tracking-[0.08em] sm:text-xs', showTimeoutHint ? 'text-red-500 dark:text-red-400' : 'text-white'), children: statusText })) : null] }) }), jsx("div", { style: {
+                    position: 'relative',
+                    width: '100%',
+                    height: 0,
+                    paddingBottom: ratio,
+                    overflow: 'hidden',
+                    backgroundColor: SUNO_SURFACE_COLOR,
+                }, children: jsx(SnakeLoadingFrame, { shape: "rounded-rect", loading: !isLoaded && !hasTimedOut, themeColor: themeSvgIconColor, className: "absolute inset-0", contentClassName: "h-full w-full", children: jsxs(Fragment, { children: [!isLoaded && (jsx("div", { className: "absolute inset-0 flex items-center justify-center px-4 text-center", children: jsx("div", { className: "relative z-10", children: jsx(GradientButton, { title: "Open in Suno", href: src, align: "center", className: "no-underline" }) }) })), !hasTimedOut && (jsx("iframe", { src: embedSrc, title: "Suno audio player", style: {
+                                    position: 'absolute',
+                                    top: 0,
+                                    left: 0,
+                                    width: '100%',
+                                    height: '100%',
+                                    border: 'none',
+                                    opacity: isLoaded ? 1 : 0,
+                                    transition: 'opacity 300ms ease',
+                                    pointerEvents: isLoaded ? 'auto' : 'none',
+                                }, allow: "autoplay; encrypted-media; fullscreen", allowFullScreen: true, loading: "lazy", referrerPolicy: "no-referrer-when-downgrade", onLoad: handleLoad, suppressHydrationWarning: true }))] }) }) })] }));
+}
+
+export { SunoEmbed };

package/dist/main/delayed-img.js

@@ -7,6 +7,7 @@ var Image = require('next/image');
 var React = require('react');
 var lib = require('@windrun-huaiin/base-ui/lib');
 var utils = require('@windrun-huaiin/lib/utils');
+var snakeLoadingFrame = require('./snake-loading-frame.js');
 
 var _a;
 const ENV_DELAY_ENABLED = process.env.NEXT_PUBLIC_DELAYED_IMG_ENABLED === "true";
@@ -29,7 +30,7 @@ function DelayedImg(_a) {
         }, ENV_DELAY_MS);
         return () => window.clearTimeout(timer);
     }, [isMounted, shouldDelay]);
-    return (jsxRuntime.jsxs("div", { className: utils.cn("relative", wrapperClassName), children: [(!isMounted || !isLoaded) && (jsxRuntime.jsxs("div", { "aria-hidden": "true", className: utils.cn("absolute inset-0 rounded-[inherit] border animate-pulse shadow-sm bg-white/70 dark:bg-white/5", lib.themeBgColor, placeholderClassName), children: [jsxRuntime.jsx("div", { className: utils.cn("absolute inset-x-0 top-0 h-28 rounded-[inherit] bg-linear-to-b from-white/80 to-transparent dark:from-white/14 dark:to-transparent", lib.themeViaColor) }), jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-[inherit] bg-white/20 dark:bg-white/0" })] })), isMounted && (jsxRuntime.jsx(Image, Object.assign({}, imageProps, { alt: alt, onLoad: (event) => {
+    return (jsxRuntime.jsxs("div", { className: utils.cn("relative", wrapperClassName), children: [(!isMounted || !isLoaded) && (jsxRuntime.jsx(snakeLoadingFrame.SnakeLoadingFrame, { shape: "rounded-rect", loading: true, themeColor: lib.themeSvgIconColor, strokeWidth: 3, className: utils.cn("absolute inset-0 rounded-[inherit] border shadow-sm bg-white/70 dark:bg-white/5", lib.themeBgColor, placeholderClassName), contentClassName: "h-full w-full", children: jsxRuntime.jsx("div", { "aria-hidden": "true", className: "absolute inset-0 rounded-[inherit] bg-white/20 dark:bg-white/0" }) })), isMounted && (jsxRuntime.jsx(Image, Object.assign({}, imageProps, { alt: alt, onLoad: (event) => {
                     setIsLoaded(true);
                     onLoad === null || onLoad === void 0 ? void 0 : onLoad(event);
                 }, className: utils.cn("transition duration-300", isLoaded ? "opacity-100" : "opacity-0", className) })))] }));

package/dist/main/delayed-img.mjs

@@ -3,8 +3,9 @@ import { __rest } from '../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_r
 import { jsxs, jsx } from 'react/jsx-runtime';
 import Image from 'next/image';
 import { useState, useEffect } from 'react';
-import { themeViaColor, themeBgColor } from '@windrun-huaiin/base-ui/lib';
+import { themeSvgIconColor, themeBgColor } from '@windrun-huaiin/base-ui/lib';
 import { cn } from '@windrun-huaiin/lib/utils';
+import { SnakeLoadingFrame } from './snake-loading-frame.mjs';
 
 var _a;
 const ENV_DELAY_ENABLED = process.env.NEXT_PUBLIC_DELAYED_IMG_ENABLED === "true";
@@ -27,7 +28,7 @@ function DelayedImg(_a) {
         }, ENV_DELAY_MS);
         return () => window.clearTimeout(timer);
     }, [isMounted, shouldDelay]);
-    return (jsxs("div", { className: cn("relative", wrapperClassName), children: [(!isMounted || !isLoaded) && (jsxs("div", { "aria-hidden": "true", className: cn("absolute inset-0 rounded-[inherit] border animate-pulse shadow-sm bg-white/70 dark:bg-white/5", themeBgColor, placeholderClassName), children: [jsx("div", { className: cn("absolute inset-x-0 top-0 h-28 rounded-[inherit] bg-linear-to-b from-white/80 to-transparent dark:from-white/14 dark:to-transparent", themeViaColor) }), jsx("div", { className: "absolute inset-0 rounded-[inherit] bg-white/20 dark:bg-white/0" })] })), isMounted && (jsx(Image, Object.assign({}, imageProps, { alt: alt, onLoad: (event) => {
+    return (jsxs("div", { className: cn("relative", wrapperClassName), children: [(!isMounted || !isLoaded) && (jsx(SnakeLoadingFrame, { shape: "rounded-rect", loading: true, themeColor: themeSvgIconColor, strokeWidth: 3, className: cn("absolute inset-0 rounded-[inherit] border shadow-sm bg-white/70 dark:bg-white/5", themeBgColor, placeholderClassName), contentClassName: "h-full w-full", children: jsx("div", { "aria-hidden": "true", className: "absolute inset-0 rounded-[inherit] bg-white/20 dark:bg-white/0" }) })), isMounted && (jsx(Image, Object.assign({}, imageProps, { alt: alt, onLoad: (event) => {
                     setIsLoaded(true);
                     onLoad === null || onLoad === void 0 ? void 0 : onLoad(event);
                 }, className: cn("transition duration-300", isLoaded ? "opacity-100" : "opacity-0", className) })))] }));

package/dist/main/index.d.ts

@@ -9,6 +9,7 @@ export * from './faq-interactive';
 export * from './price-plan-interactive';
 export * from './gallery/gallery-interactive';
 export * from './delayed-img';
+export * from './snake-loading-frame';
 export { MoneyPriceInteractive } from './money-price/money-price-interactive';
 export { MoneyPriceButton } from './money-price/money-price-button';
 export { CreditOverviewClient } from './credit/credit-overview-client';

package/dist/main/index.js

@@ -12,6 +12,7 @@ var faqInteractive = require('./faq-interactive.js');
 var pricePlanInteractive = require('./price-plan-interactive.js');
 var galleryInteractive = require('./gallery/gallery-interactive.js');
 var delayedImg = require('./delayed-img.js');
+var snakeLoadingFrame = require('./snake-loading-frame.js');
 var moneyPriceInteractive = require('./money-price/money-price-interactive.js');
 var moneyPriceButton = require('./money-price/money-price-button.js');
 var creditOverviewClient = require('./credit/credit-overview-client.js');
@@ -21,6 +22,7 @@ var creditNavButton = require('./credit/credit-nav-button.js');
 
 exports.GoToTop = goToTop.GoToTop;
 exports.Loading = loading.Loading;
+exports.getLoadingCycleDurationMs = loading.getLoadingCycleDurationMs;
 exports.NProgressBar = nprogressBar.NProgressBar;
 exports.AdsAlertDialog = adsAlertDialog.AdsAlertDialog;
 exports.XButton = xButton.XButton;
@@ -31,6 +33,8 @@ exports.FAQInteractive = faqInteractive.FAQInteractive;
 exports.PricePlanInteractive = pricePlanInteractive.PricePlanInteractive;
 exports.GalleryInteractive = galleryInteractive.GalleryInteractive;
 exports.DelayedImg = delayedImg.DelayedImg;
+exports.SnakeLoadingFrame = snakeLoadingFrame.SnakeLoadingFrame;
+exports.SnakeLoadingPreview = snakeLoadingFrame.SnakeLoadingPreview;
 exports.MoneyPriceInteractive = moneyPriceInteractive.MoneyPriceInteractive;
 exports.MoneyPriceButton = moneyPriceButton.MoneyPriceButton;
 exports.CreditOverviewClient = creditOverviewClient.CreditOverviewClient;

package/dist/main/index.mjs

@@ -1,6 +1,6 @@
 "use client";
 export { GoToTop } from './go-to-top.mjs';
-export { Loading } from './loading.mjs';
+export { Loading, getLoadingCycleDurationMs } from './loading.mjs';
 export { NProgressBar } from './nprogress-bar.mjs';
 export { AdsAlertDialog } from './ads-alert-dialog.mjs';
 export { XButton } from './x-button.mjs';
@@ -10,6 +10,7 @@ export { FAQInteractive } from './faq-interactive.mjs';
 export { PricePlanInteractive } from './price-plan-interactive.mjs';
 export { GalleryInteractive } from './gallery/gallery-interactive.mjs';
 export { DelayedImg } from './delayed-img.mjs';
+export { SnakeLoadingFrame, SnakeLoadingPreview } from './snake-loading-frame.mjs';
 export { MoneyPriceInteractive } from './money-price/money-price-interactive.mjs';
 export { MoneyPriceButton } from './money-price/money-price-button.mjs';
 export { CreditOverviewClient } from './credit/credit-overview-client.mjs';

package/dist/main/loading.d.ts

@@ -1,3 +1,4 @@
+export declare function getLoadingCycleDurationMs(): number;
 interface LoadingProps {
     themeColor?: string;
     compact?: boolean;

package/dist/main/loading.js

@@ -11,6 +11,12 @@ const DOT_SIZE = 6; // px, dot diameter
 const SPACING = 12; // px, space between dot centers
 const ANIMATION_DURATION = 1.8; // seconds
 const STAGGER_DELAY_FACTOR = 0.08; // seconds, delay per unit of distance from center
+function getLoadingCycleDurationMs() {
+    const centerX = (NUM_COLS - 1) / 2;
+    const centerY = (NUM_ROWS - 1) / 2;
+    const furthestDistance = Math.sqrt(Math.pow(centerY, 2) + Math.pow(centerX, 2));
+    return (ANIMATION_DURATION + furthestDistance * STAGGER_DELAY_FACTOR) * 1000;
+}
 function clampChannel(value) {
     return Math.max(0, Math.min(255, Math.round(value)));
 }
@@ -95,3 +101,4 @@ function Loading({ themeColor = lib.themeSvgIconColor, compact = false, classNam
 }
 
 exports.Loading = Loading;
+exports.getLoadingCycleDurationMs = getLoadingCycleDurationMs;

package/dist/main/loading.mjs

@@ -9,6 +9,12 @@ const DOT_SIZE = 6; // px, dot diameter
 const SPACING = 12; // px, space between dot centers
 const ANIMATION_DURATION = 1.8; // seconds
 const STAGGER_DELAY_FACTOR = 0.08; // seconds, delay per unit of distance from center
+function getLoadingCycleDurationMs() {
+    const centerX = (NUM_COLS - 1) / 2;
+    const centerY = (NUM_ROWS - 1) / 2;
+    const furthestDistance = Math.sqrt(Math.pow(centerY, 2) + Math.pow(centerX, 2));
+    return (ANIMATION_DURATION + furthestDistance * STAGGER_DELAY_FACTOR) * 1000;
+}
 function clampChannel(value) {
     return Math.max(0, Math.min(255, Math.round(value)));
 }
@@ -92,4 +98,4 @@ function Loading({ themeColor = themeSvgIconColor, compact = false, className, l
                     } }, dot.id))), jsx("div", { className: "absolute inset-0 flex items-center justify-center", style: { pointerEvents: 'none' }, children: jsx("p", { className: cn('text-xl font-semibold text-white', labelClassName), children: label }) })] }) }));
 }
 
-export { Loading };
+export { Loading, getLoadingCycleDurationMs };

package/dist/main/snake-loading-frame.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+type SnakeShape = 'circle' | 'rounded-rect';
+interface SnakeLoadingFrameProps {
+    shape: SnakeShape;
+    loading: boolean;
+    children: ReactNode;
+    className?: string;
+    themeColor?: string;
+    strokeWidth?: number;
+    contentClassName?: string;
+}
+interface SnakeLoadingPreviewProps {
+    shape: SnakeShape;
+    children: ReactNode;
+    className?: string;
+    themeColor?: string;
+    defaultProgress?: number;
+    strokeWidth?: number;
+    contentClassName?: string;
+}
+export declare function SnakeLoadingFrame(props: SnakeLoadingFrameProps): import("react/jsx-runtime").JSX.Element;
+export declare function SnakeLoadingPreview({ shape, children, className, themeColor, defaultProgress, strokeWidth, contentClassName, }: SnakeLoadingPreviewProps): import("react/jsx-runtime").JSX.Element;
+export {};