@windrun-huaiin/third-ui 29.2.1 → 30.1.0

package/dist/fuma/mdx/cheet-table.mjs

@@ -0,0 +1,293 @@
+"use client";
+import { __rest, __awaiter } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { EyeIcon, EyeOffIcon, CheckIcon, CopyIcon } from '@windrun-huaiin/base-ui/icons';
+import { themeSvgIconColor, themeIconColor, themeRingColor } from '@windrun-huaiin/base-ui/lib';
+import { cn } from '@windrun-huaiin/lib/utils';
+import { useState, useRef, useMemo, useEffect, isValidElement, Children } from 'react';
+import { InfoTooltip } from '../../main/info-tooltip.mjs';
+
+const DEFAULT_COLUMN_WIDTH = 180;
+const MIN_COLUMN_WIDTH = 140;
+const CHEET_TABLE_BORDER_COLOR = `color-mix(in srgb, ${themeSvgIconColor} 35%, transparent)`;
+const CHEET_TABLE_BORDER_CLASS = 'border-[color:var(--cheet-table-border-color)]';
+function parseCheetCell(raw) {
+    let value = raw.trim();
+    let force = false;
+    if (value.startsWith('!!')) {
+        force = true;
+        value = value.slice(2).trimStart();
+    }
+    const descriptionIndex = value.indexOf('??');
+    if (descriptionIndex === -1) {
+        return {
+            text: value,
+            force,
+        };
+    }
+    const description = value.slice(descriptionIndex + 2).trim();
+    return {
+        text: value.slice(0, descriptionIndex).trimEnd(),
+        description: description ? description : undefined,
+        force,
+    };
+}
+function normalizeText(value) {
+    return value.replace(/\s+/g, ' ').trim();
+}
+function collectText(node) {
+    if (typeof node === 'string' || typeof node === 'number') {
+        return String(node);
+    }
+    if (Array.isArray(node)) {
+        return node.map(collectText).join('');
+    }
+    if (isValidElement(node)) {
+        return collectText(node.props.children);
+    }
+    return '';
+}
+function getElementChildren(element) {
+    return Children.toArray(element.props.children);
+}
+function isElementType(node, type) {
+    return isValidElement(node) && node.type === type;
+}
+function findFirstElement(node, type) {
+    if (isElementType(node, type)) {
+        return node;
+    }
+    if (Array.isArray(node)) {
+        for (const child of node) {
+            const match = findFirstElement(child, type);
+            if (match) {
+                return match;
+            }
+        }
+    }
+    if (isValidElement(node)) {
+        return findFirstElement(node.props.children, type);
+    }
+    return null;
+}
+function collectRowElements(node) {
+    if (isElementType(node, 'tr')) {
+        return [node];
+    }
+    if (Array.isArray(node)) {
+        return node.flatMap(collectRowElements);
+    }
+    if (isValidElement(node)) {
+        return collectRowElements(node.props.children);
+    }
+    return [];
+}
+function parseRow(row) {
+    return getElementChildren(row)
+        .filter(isValidElement)
+        .map((cell) => {
+        const rawText = normalizeText(collectText(cell.props.children));
+        return Object.assign({ rawText }, parseCheetCell(rawText));
+    });
+}
+function parseCheetTable(children) {
+    var _a;
+    const rows = collectRowElements(children);
+    if (rows.length > 0) {
+        const headerRow = rows[0];
+        const dataRows = rows.slice(1);
+        const headers = parseRow(headerRow);
+        if (headers.length === 0) {
+            return null;
+        }
+        return {
+            headers,
+            rows: dataRows.map(parseRow).filter((row) => row.length > 0),
+        };
+    }
+    const table = findFirstElement(children, 'table');
+    if (!table) {
+        return null;
+    }
+    const thead = findFirstElement(table.props.children, 'thead');
+    const tbody = findFirstElement(table.props.children, 'tbody');
+    const headRows = thead ? collectRowElements(thead.props.children) : [];
+    const bodyRows = tbody ? collectRowElements(tbody.props.children) : [];
+    const fallbackRows = !thead && !tbody ? collectRowElements(table.props.children) : [];
+    const headerRow = (_a = headRows[0]) !== null && _a !== void 0 ? _a : fallbackRows[0];
+    const dataRows = bodyRows.length > 0 ? bodyRows : fallbackRows.slice(1);
+    if (!headerRow) {
+        return null;
+    }
+    const headers = parseRow(headerRow);
+    if (headers.length === 0) {
+        return null;
+    }
+    return {
+        headers,
+        rows: dataRows.map(parseRow).filter((row) => row.length > 0),
+    };
+}
+function parseCheetTableElement(element) {
+    const table = element === null || element === void 0 ? void 0 : element.querySelector('table');
+    if (!table) {
+        return null;
+    }
+    const headRow = table.querySelector('thead tr');
+    const bodyRows = Array.from(table.querySelectorAll('tbody tr'));
+    const fallbackRows = Array.from(table.querySelectorAll('tr'));
+    const headerRow = headRow !== null && headRow !== void 0 ? headRow : fallbackRows[0];
+    const dataRows = bodyRows.length > 0
+        ? bodyRows
+        : fallbackRows.slice(headerRow ? 1 : 0);
+    if (!headerRow) {
+        return null;
+    }
+    const parseDomRow = (row) => Array.from(row.querySelectorAll('th,td')).map((cell) => {
+        var _a;
+        const rawText = normalizeText((_a = cell.textContent) !== null && _a !== void 0 ? _a : '');
+        return Object.assign({ rawText }, parseCheetCell(rawText));
+    });
+    const headers = parseDomRow(headerRow);
+    if (headers.length === 0) {
+        return null;
+    }
+    return {
+        headers,
+        rows: dataRows.map(parseDomRow).filter((row) => row.length > 0),
+    };
+}
+function createCopyableColumnSet(headers, copyableColumns) {
+    const names = copyableColumns !== null && copyableColumns !== void 0 ? copyableColumns : [];
+    return new Set(names.map((name) => {
+        const header = headers.find((item) => item.text === name || item.rawText === name);
+        return header ? header.text : name;
+    }));
+}
+function CheetCellContent({ cell, force, copied, copyable, onCopy, }) {
+    return (jsxs("span", { className: "flex min-w-0 items-center gap-0.5", children: [jsx("span", { className: cn('block min-w-0 truncate', force && cn('font-semibold', themeIconColor)), children: cell.text }), cell.description ? (jsx(InfoTooltip, { content: cell.description, className: "not-prose -mx-0.5", desktopSide: "bottom" })) : null, copyable ? (jsx("button", { type: "button", "aria-label": copied ? 'Copied' : 'Copy cell content', className: cn('not-prose inline-flex size-6 shrink-0 touch-manipulation items-center justify-center rounded text-fd-muted-foreground transition', 'hover:bg-fd-accent hover:text-fd-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950', copied && themeIconColor, themeRingColor), onClick: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    onCopy === null || onCopy === void 0 ? void 0 : onCopy();
+                }, onPointerDown: (event) => {
+                    event.stopPropagation();
+                }, children: copied ? jsx(CheckIcon, { className: "size-3.5" }) : jsx(CopyIcon, { className: "size-3.5" }) })) : null] }));
+}
+function CheetTable(_a) {
+    var _b;
+    var { title, description, copyableColumns, defaultOpen = true, collapsible = true, striped = true, stickyHeader = false, emptyText = 'No data', className, children, style } = _a, props = __rest(_a, ["title", "description", "copyableColumns", "defaultOpen", "collapsible", "striped", "stickyHeader", "emptyText", "className", "children", "style"]);
+    const [mounted, setMounted] = useState(false);
+    const [model, setModel] = useState(null);
+    const [parsed, setParsed] = useState(false);
+    const [open, setOpen] = useState(defaultOpen);
+    const [copiedCell, setCopiedCell] = useState(null);
+    const [columnWidths, setColumnWidths] = useState([]);
+    const sourceRef = useRef(null);
+    const resizeStartRef = useRef(null);
+    const headerCount = (_b = model === null || model === void 0 ? void 0 : model.headers.length) !== null && _b !== void 0 ? _b : 0;
+    const copyableColumnSet = useMemo(() => { var _a; return createCopyableColumnSet((_a = model === null || model === void 0 ? void 0 : model.headers) !== null && _a !== void 0 ? _a : [], copyableColumns); }, [copyableColumns, model === null || model === void 0 ? void 0 : model.headers]);
+    useEffect(() => {
+        var _a;
+        setMounted(true);
+        setModel((_a = parseCheetTableElement(sourceRef.current)) !== null && _a !== void 0 ? _a : parseCheetTable(children));
+        setParsed(true);
+    }, [children]);
+    useEffect(() => {
+        if (headerCount === 0) {
+            setColumnWidths([]);
+            return;
+        }
+        setColumnWidths((current) => Array.from({ length: headerCount }, (_, index) => { var _a; return Math.max((_a = current[index]) !== null && _a !== void 0 ? _a : DEFAULT_COLUMN_WIDTH, MIN_COLUMN_WIDTH); }));
+    }, [headerCount]);
+    useEffect(() => {
+        function handlePointerMove(event) {
+            const start = resizeStartRef.current;
+            if (!start) {
+                return;
+            }
+            const nextWidth = Math.max(MIN_COLUMN_WIDTH, start.startWidth + event.clientX - start.startX);
+            setColumnWidths((current) => {
+                const next = [...current];
+                next[start.columnIndex] = nextWidth;
+                return next;
+            });
+        }
+        function handlePointerUp() {
+            resizeStartRef.current = null;
+            document.body.style.removeProperty('cursor');
+            document.body.style.removeProperty('user-select');
+        }
+        window.addEventListener('pointermove', handlePointerMove);
+        window.addEventListener('pointerup', handlePointerUp);
+        return () => {
+            window.removeEventListener('pointermove', handlePointerMove);
+            window.removeEventListener('pointerup', handlePointerUp);
+            document.body.style.removeProperty('cursor');
+            document.body.style.removeProperty('user-select');
+        };
+    }, []);
+    const startResize = (event, columnIndex) => {
+        var _a;
+        event.preventDefault();
+        event.stopPropagation();
+        resizeStartRef.current = {
+            columnIndex,
+            startX: event.clientX,
+            startWidth: (_a = columnWidths[columnIndex]) !== null && _a !== void 0 ? _a : DEFAULT_COLUMN_WIDTH,
+        };
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+    };
+    const handleCopy = (text, cellId) => __awaiter(this, void 0, void 0, function* () {
+        if (!text || !navigator.clipboard) {
+            return;
+        }
+        try {
+            yield navigator.clipboard.writeText(text);
+            setCopiedCell(cellId);
+            window.setTimeout(() => setCopiedCell(null), 1200);
+        }
+        catch (_a) {
+            // Keep MDX reading uninterrupted when clipboard permission is unavailable.
+        }
+    });
+    const shellClassName = cn('not-prose my-6 overflow-hidden rounded-lg border bg-fd-card text-fd-card-foreground shadow-sm', CHEET_TABLE_BORDER_CLASS, className);
+    const shellStyle = Object.assign({ '--cheet-table-border-color': CHEET_TABLE_BORDER_COLOR }, style);
+    const titleBar = title || description || collapsible ? (jsxs("div", { className: "grid min-w-0 grid-cols-[minmax(0,90%)_minmax(2rem,10%)] items-center bg-fd-muted/35 px-4 py-2", children: [jsxs("div", { className: "flex min-w-0 items-center justify-center gap-0.5", children: [title ? (jsx("h3", { className: "truncate text-center text-sm font-semibold leading-6 text-fd-foreground", children: title })) : null, description ? (jsx(InfoTooltip, { content: description, className: "not-prose -mx-0.5", desktopSide: "bottom" })) : null] }), collapsible ? (jsx("button", { type: "button", className: cn('justify-self-end inline-flex size-8 shrink-0 items-center justify-center rounded-md text-fd-muted-foreground transition', 'hover:text-fd-accent-foreground', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950', open && themeIconColor, themeRingColor), "aria-expanded": open, onClick: () => setOpen((value) => !value), children: open ? jsx(EyeIcon, { className: "size-4" }) : jsx(EyeOffIcon, { className: "size-4" }) })) : null] })) : null;
+    if (!mounted) {
+        return (jsxs("section", Object.assign({ "data-cheet-table": true, className: shellClassName, style: shellStyle }, props, { children: [titleBar, jsx("div", { ref: sourceRef, hidden: true, children: children })] })));
+    }
+    if (!model) {
+        return (jsxs("section", Object.assign({ "data-cheet-table": true, className: shellClassName, style: shellStyle }, props, { children: [titleBar, jsx("div", { ref: sourceRef, hidden: true, children: children }), open && parsed ? (jsx("div", { className: "px-4 py-6 text-center text-sm text-fd-muted-foreground", children: emptyText })) : null] })));
+    }
+    const content = model.rows.length > 0 ? (jsx("div", { className: "overflow-x-auto", children: jsxs("table", { className: "table-fixed border-separate border-spacing-0 text-sm", style: {
+                width: columnWidths.length
+                    ? columnWidths.reduce((total, width) => total + width, 0)
+                    : '100%',
+                minWidth: '100%',
+            }, children: [jsx("colgroup", { children: model.headers.map((header, index) => {
+                        var _a;
+                        return (jsx("col", { style: {
+                                width: (_a = columnWidths[index]) !== null && _a !== void 0 ? _a : DEFAULT_COLUMN_WIDTH,
+                                minWidth: MIN_COLUMN_WIDTH,
+                            } }, `${header.text}-${index}-col`));
+                    }) }), jsx("thead", { className: cn(stickyHeader && 'sticky top-0 z-10'), children: jsx("tr", { children: model.headers.map((header, index) => (jsxs("th", { className: cn('relative border-t border-b bg-fd-muted/80 px-3 py-2.5 align-middle text-xs font-semibold uppercase tracking-normal text-fd-muted-foreground first:pl-4 last:pr-4', index > 0 && 'border-l', CHEET_TABLE_BORDER_CLASS, 'text-left'), scope: "col", children: [jsx(CheetCellContent, { cell: header, force: header.force }), index < model.headers.length - 1 ? (jsx("button", { type: "button", "aria-label": "Resize column", className: cn('absolute top-0 right-0 h-full w-2 cursor-col-resize touch-none select-none', 'after:absolute after:top-2 after:right-0 after:bottom-2 after:w-px after:bg-transparent after:transition-colors', 'hover:after:bg-fd-muted-foreground/40'), onPointerDown: (event) => startResize(event, index) })) : null] }, `${header.text}-${index}`))) }) }), jsx("tbody", { children: model.rows.map((row, rowIndex) => (jsx("tr", { className: cn('transition-colors hover:bg-fd-accent/45', striped && rowIndex % 2 === 1 && 'bg-fd-muted/30'), children: model.headers.map((header, columnIndex) => {
+                            var _a;
+                            const cell = (_a = row[columnIndex]) !== null && _a !== void 0 ? _a : {
+                                rawText: '',
+                                text: '',
+                                force: false,
+                            };
+                            const cellId = `${rowIndex}:${columnIndex}`;
+                            const copyable = copyableColumnSet.has(header.text);
+                            return (jsx("td", { className: cn('group px-3 py-2.5 align-top text-fd-foreground first:pl-4 last:pr-4', rowIndex < model.rows.length - 1 && 'border-b', columnIndex > 0 && 'border-l', 'text-left', CHEET_TABLE_BORDER_CLASS), onDoubleClick: (event) => {
+                                    event.preventDefault();
+                                    event.stopPropagation();
+                                }, children: jsx(CheetCellContent, { cell: cell, force: header.force || cell.force, copyable: copyable, copied: copiedCell === cellId, onCopy: copyable
+                                        ? () => handleCopy(cell.text, cellId)
+                                        : undefined }) }, cellId));
+                        }) }, rowIndex))) })] }) })) : (jsx("div", { className: "px-4 py-6 text-center text-sm text-fd-muted-foreground", children: emptyText }));
+    return (jsxs("section", Object.assign({ "data-cheet-table": true, className: shellClassName, style: shellStyle }, props, { children: [titleBar, jsx("div", { ref: sourceRef, hidden: true, children: children }), open ? content : null] })));
+}
+
+export { CheetTable };

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

@@ -7,3 +7,4 @@ export * from './toc-footer-wrapper';
 export * from './toc-clerk-portable';
 export * from './banner';
 export * from './suno-embed';
+export * from './cheet-table';

package/dist/fuma/mdx/index.js

@@ -10,6 +10,7 @@ var tocFooterWrapper = require('./toc-footer-wrapper.js');
 var tocClerkPortable = require('./toc-clerk-portable.js');
 var banner = require('./banner.js');
 var sunoEmbed = require('./suno-embed.js');
+var cheetTable = require('./cheet-table.js');
 
 
 
@@ -29,3 +30,4 @@ exports.PortableClerkTOCScrollArea = tocClerkPortable.PortableClerkTOCScrollArea
 exports.PortableClerkTOCTitle = tocClerkPortable.PortableClerkTOCTitle;
 exports.Banner = banner.Banner;
 exports.SunoEmbed = sunoEmbed.SunoEmbed;
+exports.CheetTable = cheetTable.CheetTable;

package/dist/fuma/mdx/index.mjs

@@ -8,3 +8,4 @@ export { TocFooterWrapper } from './toc-footer-wrapper.mjs';
 export { PortableClerkTOC, PortableClerkTOCItems, PortableClerkTOCPopover, PortableClerkTOCScrollArea, PortableClerkTOCTitle } from './toc-clerk-portable.mjs';
 export { Banner } from './banner.mjs';
 export { SunoEmbed } from './suno-embed.mjs';
+export { CheetTable } from './cheet-table.mjs';

package/dist/fuma/server/features/widgets.js

@@ -11,6 +11,7 @@ require('@windrun-huaiin/base-ui/lib');
 require('@windrun-huaiin/lib/utils');
 var ziaFile = require('../../mdx/zia-file.js');
 var sunoEmbed = require('../../mdx/suno-embed.js');
+var cheetTable = require('../../mdx/cheet-table.js');
 
 const ImageGrid = React.lazy(() => Promise.resolve().then(function () { return require('../../heavy/image-grid.js'); }).then((mod) => ({ default: mod.ImageGrid })));
 const ImageZoom = React.lazy(() => Promise.resolve().then(function () { return require('../../heavy/image-zoom.js'); }).then((mod) => ({ default: mod.ImageZoom })));
@@ -22,6 +23,7 @@ function createWidgetMdxComponents(cdnBaseUrl, imageFallbackSrc) {
         ZiaFile: ziaFile.ZiaFile,
         ZiaFolder: ziaFile.ZiaFolder,
         SunoEmbed: sunoEmbed.SunoEmbed,
+        CheetTable: cheetTable.CheetTable,
         ImageGrid: (props) => (jsxRuntime.jsx(ImageGrid, Object.assign({}, props, { cdnBaseUrl: cdnBaseUrl }))),
         ImageZoom: (props) => (jsxRuntime.jsx(ImageZoom, Object.assign({}, props, { fallbackSrc: imageFallbackSrc }))),
     };

package/dist/fuma/server/features/widgets.mjs

@@ -9,6 +9,7 @@ import '@windrun-huaiin/base-ui/lib';
 import '@windrun-huaiin/lib/utils';
 import { ZiaFolder, ZiaFile } from '../../mdx/zia-file.mjs';
 import { SunoEmbed } from '../../mdx/suno-embed.mjs';
+import { CheetTable } from '../../mdx/cheet-table.mjs';
 
 const ImageGrid = lazy(() => import('../../heavy/image-grid.mjs').then((mod) => ({ default: mod.ImageGrid })));
 const ImageZoom = lazy(() => import('../../heavy/image-zoom.mjs').then((mod) => ({ default: mod.ImageZoom })));
@@ -20,6 +21,7 @@ function createWidgetMdxComponents(cdnBaseUrl, imageFallbackSrc) {
         ZiaFile,
         ZiaFolder,
         SunoEmbed,
+        CheetTable,
         ImageGrid: (props) => (jsx(ImageGrid, Object.assign({}, props, { cdnBaseUrl: cdnBaseUrl }))),
         ImageZoom: (props) => (jsx(ImageZoom, Object.assign({}, props, { fallbackSrc: imageFallbackSrc }))),
     };

package/dist/lib/fuma-schema-check-util.d.ts

@@ -1,5 +1,5 @@
 import { z, ZodObject } from 'zod';
-export declare const createDateSchema: () => z.ZodPipe<z.ZodTransform<any, any>, z.ZodString>;
+export declare const createDateSchema: () => z.ZodPreprocess<z.ZodString>;
 export declare const createCommonDocsSchema: () => ZodObject<any>;
 export declare const createCommonMetaSchema: () => ZodObject<any>;
 export declare const remarkInstallOptions: {

package/dist/main/404-page.d.ts

@@ -0,0 +1,12 @@
+import { type SupportedThemeColor } from '@windrun-huaiin/base-ui/lib';
+import { type ReactNode } from 'react';
+interface NotFoundPageProps {
+    siteIcon: ReactNode;
+    errorIcon?: ReactNode;
+    className?: string;
+    compact?: boolean;
+    themeClass?: SupportedThemeColor;
+    animated?: boolean;
+}
+export declare function NotFoundPage({ siteIcon, errorIcon, className, compact, themeClass, animated, }: NotFoundPageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/main/404-page.js

@@ -0,0 +1,66 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var shared = require('@windrun-huaiin/base-ui/components/shared');
+var lib = require('@windrun-huaiin/base-ui/lib');
+var utils = require('@windrun-huaiin/lib/utils');
+var React = require('react');
+
+const THEME_BG_CLASS_MAP = {
+    'text-purple-500': 'bg-purple-500/20',
+    'text-orange-500': 'bg-orange-500/20',
+    'text-indigo-500': 'bg-indigo-500/20',
+    'text-emerald-500': 'bg-emerald-500/20',
+    'text-rose-500': 'bg-rose-500/20',
+};
+const THEME_VIA_CLASS_MAP = {
+    'text-purple-500': 'via-purple-500/20',
+    'text-orange-500': 'via-orange-500/20',
+    'text-indigo-500': 'via-indigo-500/20',
+    'text-emerald-500': 'via-emerald-500/20',
+    'text-rose-500': 'via-rose-500/20',
+};
+function NotFoundPage({ siteIcon, errorIcon, className, compact = false, themeClass, animated = true, }) {
+    const [glitchText, setGlitchText] = React.useState('404');
+    const homeUrl = process.env.NEXT_PUBLIC_BASE_URL || '/';
+    const activeThemeClass = themeClass !== null && themeClass !== void 0 ? themeClass : lib.themeIconColor;
+    const activeGradientClass = themeClass ? lib.THEME_BUTTON_GRADIENT_CLASS_MAP[themeClass] : lib.themeButtonGradientClass;
+    const activeBgClass = themeClass ? THEME_BG_CLASS_MAP[themeClass] : lib.themeBgColor;
+    const activeViaClass = themeClass ? THEME_VIA_CLASS_MAP[themeClass] : lib.themeViaColor;
+    React.useEffect(() => {
+        if (!animated) {
+            setGlitchText('404');
+            return undefined;
+        }
+        const glitchChars = ['4', '0', '4', '?', '#', '!', '*', '&', '%', '$'];
+        const interval = setInterval(() => {
+            if (Math.random() < 0.5) {
+                setGlitchText('404');
+            }
+            else {
+                const randomChars = Array.from({ length: 3 }, () => glitchChars[Math.floor(Math.random() * glitchChars.length)]).join('');
+                setGlitchText(randomChars);
+            }
+        }, 600);
+        return () => clearInterval(interval);
+    }, [animated]);
+    return (jsxRuntime.jsxs("div", { className: utils.cn('relative flex w-full flex-col items-center justify-center px-4 py-8', compact ? 'h-full min-h-full' : 'min-h-dvh', className), children: [jsxRuntime.jsxs("div", { className: "text-center space-y-8 max-w-2xl", children: [jsxRuntime.jsxs("div", { className: "relative flex justify-center", children: [jsxRuntime.jsx("h1", { className: utils.cn('text-8xl md:text-9xl font-bold bg-linear-to-r bg-clip-text text-transparent select-none', activeGradientClass), style: {
+                                    fontFamily: 'Montserrat, monospace',
+                                    textShadow: '0 0 30px rgba(172, 98, 253, 0.3)',
+                                    letterSpacing: '0.1em',
+                                }, children: glitchText }), jsxRuntime.jsx("div", { className: "absolute inset-0 pointer-events-none", children: jsxRuntime.jsx("div", { className: utils.cn('h-full w-full bg-linear-to-b from-transparent to-transparent', animated && 'animate-pulse', activeViaClass) }) })] }), jsxRuntime.jsxs("div", { className: "space-y-4", children: [jsxRuntime.jsx("h2", { className: "text-2xl md:text-3xl font-semibold text-foreground", children: "Page Not Found" }), jsxRuntime.jsx("p", { className: "text-lg text-muted-foreground max-w-md mx-auto leading-relaxed", children: "The page you're looking for doesn't exist" }), jsxRuntime.jsx("a", { href: homeUrl, className: utils.cn('inline-flex text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80', activeThemeClass, 'decoration-current'), children: "Back to Homepage" })] }), jsxRuntime.jsxs("div", { className: "flex justify-center items-center gap-8 pt-8 opacity-60", children: [jsxRuntime.jsxs("a", { href: homeUrl, className: "flex items-center gap-2 text-sm text-muted-foreground transition-opacity hover:opacity-80", children: [siteIcon, jsxRuntime.jsx("span", { children: "Woops!" })] }), jsxRuntime.jsx("div", { className: utils.cn('w-2 h-2 rounded-full', animated && 'animate-ping', activeBgClass) }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [errorIcon !== null && errorIcon !== void 0 ? errorIcon : jsxRuntime.jsx(shared.NotFoundIcon, {}), jsxRuntime.jsx("span", { children: "Error Code: 404" })] })] })] }), jsxRuntime.jsxs("div", { className: utils.cn('pointer-events-none inset-0 overflow-hidden -z-10', compact ? 'absolute' : 'fixed'), children: [jsxRuntime.jsx("div", { className: "absolute inset-0 opacity-[0.02] dark:opacity-[0.05]", style: {
+                            backgroundImage: `
+                linear-gradient(rgba(172, 98, 253, 0.1) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(172, 98, 253, 0.1) 1px, transparent 1px)
+              `,
+                            backgroundSize: '50px 50px',
+                        } }), Array.from({ length: 6 }).map((_, i) => (jsxRuntime.jsx("div", { className: utils.cn('absolute w-2 h-2 rounded-full', animated && 'animate-bounce', activeBgClass), style: {
+                            left: `${20 + i * 15}%`,
+                            top: `${30 + (i % 3) * 20}%`,
+                            animationDelay: `${i * 0.5}s`,
+                            animationDuration: `${2 + i * 0.3}s`,
+                        } }, i)))] })] }));
+}
+
+exports.NotFoundPage = NotFoundPage;

package/dist/main/404-page.mjs

@@ -0,0 +1,64 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { NotFoundIcon } from '@windrun-huaiin/base-ui/components/shared';
+import { THEME_BUTTON_GRADIENT_CLASS_MAP, themeButtonGradientClass, themeViaColor, themeIconColor, themeBgColor } from '@windrun-huaiin/base-ui/lib';
+import { cn } from '@windrun-huaiin/lib/utils';
+import { useState, useEffect } from 'react';
+
+const THEME_BG_CLASS_MAP = {
+    'text-purple-500': 'bg-purple-500/20',
+    'text-orange-500': 'bg-orange-500/20',
+    'text-indigo-500': 'bg-indigo-500/20',
+    'text-emerald-500': 'bg-emerald-500/20',
+    'text-rose-500': 'bg-rose-500/20',
+};
+const THEME_VIA_CLASS_MAP = {
+    'text-purple-500': 'via-purple-500/20',
+    'text-orange-500': 'via-orange-500/20',
+    'text-indigo-500': 'via-indigo-500/20',
+    'text-emerald-500': 'via-emerald-500/20',
+    'text-rose-500': 'via-rose-500/20',
+};
+function NotFoundPage({ siteIcon, errorIcon, className, compact = false, themeClass, animated = true, }) {
+    const [glitchText, setGlitchText] = useState('404');
+    const homeUrl = process.env.NEXT_PUBLIC_BASE_URL || '/';
+    const activeThemeClass = themeClass !== null && themeClass !== void 0 ? themeClass : themeIconColor;
+    const activeGradientClass = themeClass ? THEME_BUTTON_GRADIENT_CLASS_MAP[themeClass] : themeButtonGradientClass;
+    const activeBgClass = themeClass ? THEME_BG_CLASS_MAP[themeClass] : themeBgColor;
+    const activeViaClass = themeClass ? THEME_VIA_CLASS_MAP[themeClass] : themeViaColor;
+    useEffect(() => {
+        if (!animated) {
+            setGlitchText('404');
+            return undefined;
+        }
+        const glitchChars = ['4', '0', '4', '?', '#', '!', '*', '&', '%', '$'];
+        const interval = setInterval(() => {
+            if (Math.random() < 0.5) {
+                setGlitchText('404');
+            }
+            else {
+                const randomChars = Array.from({ length: 3 }, () => glitchChars[Math.floor(Math.random() * glitchChars.length)]).join('');
+                setGlitchText(randomChars);
+            }
+        }, 600);
+        return () => clearInterval(interval);
+    }, [animated]);
+    return (jsxs("div", { className: cn('relative flex w-full flex-col items-center justify-center px-4 py-8', compact ? 'h-full min-h-full' : 'min-h-dvh', className), children: [jsxs("div", { className: "text-center space-y-8 max-w-2xl", children: [jsxs("div", { className: "relative flex justify-center", children: [jsx("h1", { className: cn('text-8xl md:text-9xl font-bold bg-linear-to-r bg-clip-text text-transparent select-none', activeGradientClass), style: {
+                                    fontFamily: 'Montserrat, monospace',
+                                    textShadow: '0 0 30px rgba(172, 98, 253, 0.3)',
+                                    letterSpacing: '0.1em',
+                                }, children: glitchText }), jsx("div", { className: "absolute inset-0 pointer-events-none", children: jsx("div", { className: cn('h-full w-full bg-linear-to-b from-transparent to-transparent', animated && 'animate-pulse', activeViaClass) }) })] }), jsxs("div", { className: "space-y-4", children: [jsx("h2", { className: "text-2xl md:text-3xl font-semibold text-foreground", children: "Page Not Found" }), jsx("p", { className: "text-lg text-muted-foreground max-w-md mx-auto leading-relaxed", children: "The page you're looking for doesn't exist" }), jsx("a", { href: homeUrl, className: cn('inline-flex text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80', activeThemeClass, 'decoration-current'), children: "Back to Homepage" })] }), jsxs("div", { className: "flex justify-center items-center gap-8 pt-8 opacity-60", children: [jsxs("a", { href: homeUrl, className: "flex items-center gap-2 text-sm text-muted-foreground transition-opacity hover:opacity-80", children: [siteIcon, jsx("span", { children: "Woops!" })] }), jsx("div", { className: cn('w-2 h-2 rounded-full', animated && 'animate-ping', activeBgClass) }), jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [errorIcon !== null && errorIcon !== void 0 ? errorIcon : jsx(NotFoundIcon, {}), jsx("span", { children: "Error Code: 404" })] })] })] }), jsxs("div", { className: cn('pointer-events-none inset-0 overflow-hidden -z-10', compact ? 'absolute' : 'fixed'), children: [jsx("div", { className: "absolute inset-0 opacity-[0.02] dark:opacity-[0.05]", style: {
+                            backgroundImage: `
+                linear-gradient(rgba(172, 98, 253, 0.1) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(172, 98, 253, 0.1) 1px, transparent 1px)
+              `,
+                            backgroundSize: '50px 50px',
+                        } }), Array.from({ length: 6 }).map((_, i) => (jsx("div", { className: cn('absolute w-2 h-2 rounded-full', animated && 'animate-bounce', activeBgClass), style: {
+                            left: `${20 + i * 15}%`,
+                            top: `${30 + (i % 3) * 20}%`,
+                            animationDelay: `${i * 0.5}s`,
+                            animationDuration: `${2 + i * 0.3}s`,
+                        } }, i)))] })] }));
+}
+
+export { NotFoundPage };

package/dist/main/alert-dialog/confirm-dialog.js

@@ -37,7 +37,7 @@ function ConfirmDialog({ open, onOpenChange, type = 'normal', title, description
     const handleClose = () => {
         onOpenChange(false);
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ui.AlertDialog, { open: open, onOpenChange: onOpenChange, children: jsxRuntime.jsxs(ui.AlertDialogContent, { className: utils.cn(dialogStyles.dialogContentClass, typeClass.content), overlayClassName: dialogStyles.dialogThemedOverlayClass, onOverlayClick: handleClose, children: [jsxRuntime.jsxs("div", { className: dialogStyles.dialogHeaderClass, children: [jsxRuntime.jsx(ui.AlertDialogTitle, { asChild: true, children: jsxRuntime.jsxs("div", { className: dialogStyles.dialogTitleClass, children: [jsxRuntime.jsx("span", { className: utils.cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', typeClass.iconWrap), children: jsxRuntime.jsx(Icon, { className: utils.cn('size-5', typeClass.icon) }) }), jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: title })] }) }), jsxRuntime.jsx("button", { type: "button", className: dialogStyles.closeButtonClass, onClick: handleClose, "aria-label": "Close", children: jsxRuntime.jsx(icons.XIcon, { className: "size-4" }) })] }), jsxRuntime.jsx(ui.AlertDialogDescription, { className: dialogStyles.dialogDescriptionClass, children: description }), jsxRuntime.jsxs("div", { className: dialogStyles.dialogFooterClass, children: [jsxRuntime.jsx(ui.AlertDialogCancel, { className: cancelButtonClass, onClick: handleCancel, children: cancelText }), jsxRuntime.jsx(ui.AlertDialogAction, { className: confirmButtonClass, onClick: () => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ui.AlertDialog, { open: open, onOpenChange: onOpenChange, children: jsxRuntime.jsxs(ui.AlertDialogContent, { className: utils.cn(dialogStyles.dialogContentClass, typeClass.content), overlayClassName: dialogStyles.dialogThemedOverlayClass, onOverlayClick: handleClose, children: [jsxRuntime.jsxs("div", { className: dialogStyles.dialogHeaderClass, children: [jsxRuntime.jsx(ui.AlertDialogTitle, { asChild: true, children: jsxRuntime.jsxs("div", { className: dialogStyles.dialogTitleClass, children: [jsxRuntime.jsx("span", { className: utils.cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', typeClass.iconWrap), children: jsxRuntime.jsx(Icon, { className: utils.cn('size-5', typeClass.icon) }) }), jsxRuntime.jsx("span", { className: dialogStyles.dialogTitleTextClass, children: title })] }) }), jsxRuntime.jsx("button", { type: "button", className: dialogStyles.closeButtonClass, onClick: handleClose, "aria-label": "Close", children: jsxRuntime.jsx(icons.XIcon, { className: "size-4" }) })] }), jsxRuntime.jsx(ui.AlertDialogDescription, { className: dialogStyles.dialogDescriptionClass, children: description }), jsxRuntime.jsxs("div", { className: dialogStyles.dialogFooterClass, children: [jsxRuntime.jsx(ui.AlertDialogCancel, { className: cancelButtonClass, onClick: handleCancel, children: cancelText }), jsxRuntime.jsx(ui.AlertDialogAction, { className: confirmButtonClass, onClick: () => {
                                         void runDialogAction('confirm', onConfirm);
                                     }, children: confirmText })] })] }) }), dialogLoading] }));
 }

package/dist/main/alert-dialog/confirm-dialog.mjs

@@ -4,7 +4,7 @@ import { CircleAlertIcon, CircleQuestionMarkIcon, XIcon } from '@windrun-huaiin/
 import { themeBgColor, themeIconColor } from '@windrun-huaiin/base-ui/lib';
 import { AlertDialog, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogCancel, AlertDialogAction } from '@windrun-huaiin/base-ui/ui';
 import { cn } from '@windrun-huaiin/lib/utils';
-import { dangerButtonClass, primaryButtonClass, secondaryButtonClass, dialogThemedOverlayClass, dialogHeaderClass, dialogTitleClass, closeButtonClass, dialogDescriptionClass, dialogFooterClass, dialogContentClass } from './dialog-styles.mjs';
+import { dangerButtonClass, primaryButtonClass, secondaryButtonClass, dialogThemedOverlayClass, dialogHeaderClass, dialogTitleClass, dialogTitleTextClass, closeButtonClass, dialogDescriptionClass, dialogFooterClass, dialogContentClass } from './dialog-styles.mjs';
 import { useDialogLoadingAction } from './dialog-loading-action.mjs';
 
 const confirmTypeClassMap = {
@@ -35,7 +35,7 @@ function ConfirmDialog({ open, onOpenChange, type = 'normal', title, description
     const handleClose = () => {
         onOpenChange(false);
     };
-    return (jsxs(Fragment, { children: [jsx(AlertDialog, { open: open, onOpenChange: onOpenChange, children: jsxs(AlertDialogContent, { className: cn(dialogContentClass, typeClass.content), overlayClassName: dialogThemedOverlayClass, onOverlayClick: handleClose, children: [jsxs("div", { className: dialogHeaderClass, children: [jsx(AlertDialogTitle, { asChild: true, children: jsxs("div", { className: dialogTitleClass, children: [jsx("span", { className: cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', typeClass.iconWrap), children: jsx(Icon, { className: cn('size-5', typeClass.icon) }) }), jsx("span", { className: "min-w-0 truncate", children: title })] }) }), jsx("button", { type: "button", className: closeButtonClass, onClick: handleClose, "aria-label": "Close", children: jsx(XIcon, { className: "size-4" }) })] }), jsx(AlertDialogDescription, { className: dialogDescriptionClass, children: description }), jsxs("div", { className: dialogFooterClass, children: [jsx(AlertDialogCancel, { className: cancelButtonClass, onClick: handleCancel, children: cancelText }), jsx(AlertDialogAction, { className: confirmButtonClass, onClick: () => {
+    return (jsxs(Fragment, { children: [jsx(AlertDialog, { open: open, onOpenChange: onOpenChange, children: jsxs(AlertDialogContent, { className: cn(dialogContentClass, typeClass.content), overlayClassName: dialogThemedOverlayClass, onOverlayClick: handleClose, children: [jsxs("div", { className: dialogHeaderClass, children: [jsx(AlertDialogTitle, { asChild: true, children: jsxs("div", { className: dialogTitleClass, children: [jsx("span", { className: cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', typeClass.iconWrap), children: jsx(Icon, { className: cn('size-5', typeClass.icon) }) }), jsx("span", { className: dialogTitleTextClass, children: title })] }) }), jsx("button", { type: "button", className: closeButtonClass, onClick: handleClose, "aria-label": "Close", children: jsx(XIcon, { className: "size-4" }) })] }), jsx(AlertDialogDescription, { className: dialogDescriptionClass, children: description }), jsxs("div", { className: dialogFooterClass, children: [jsx(AlertDialogCancel, { className: cancelButtonClass, onClick: handleCancel, children: cancelText }), jsx(AlertDialogAction, { className: confirmButtonClass, onClick: () => {
                                         void runDialogAction('confirm', onConfirm);
                                     }, children: confirmText })] })] }) }), dialogLoading] }));
 }

package/dist/main/alert-dialog/dialog-loading-action.js

@@ -6,6 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactDom = require('react-dom');
 var loading = require('../loading.js');
+var dialogStyles = require('./dialog-styles.js');
 
 function useDialogLoadingAction({ loadingActions, loadingFullPage = false, onOpenChange, }) {
     const [mounted, setMounted] = React.useState(false);
@@ -14,15 +15,17 @@ function useDialogLoadingAction({ loadingActions, loadingFullPage = false, onOpe
         setMounted(true);
     }, []);
     const runDialogAction = React.useCallback((action, handler) => tslib.__awaiter(this, void 0, void 0, function* () {
-        onOpenChange(false);
         if (!handler) {
+            onOpenChange(false);
             return;
         }
         if (!(loadingActions === null || loadingActions === void 0 ? void 0 : loadingActions.includes(action))) {
+            onOpenChange(false);
             yield handler();
             return;
         }
         setLoading(true);
+        onOpenChange(false);
         try {
             yield handler();
         }
@@ -31,7 +34,7 @@ function useDialogLoadingAction({ loadingActions, loadingFullPage = false, onOpe
         }
     }), [loadingActions, onOpenChange]);
     const dialogLoading = mounted && loading$1
-        ? reactDom.createPortal(loadingFullPage ? (jsxRuntime.jsx("div", { className: "fixed inset-0 z-10000", children: jsxRuntime.jsx(loading.Loading, { className: "h-full w-full" }) })) : (jsxRuntime.jsx("div", { className: "pointer-events-none fixed inset-0 z-10000 flex items-center justify-center p-4", children: jsxRuntime.jsx("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)]", children: jsxRuntime.jsx(loading.Loading, { compact: true, label: "Loading", className: "min-h-[250px] w-[min(22rem,calc(100vw-2rem))] bg-transparent", labelClassName: "text-foreground" }) }) })), document.body)
+        ? reactDom.createPortal(loadingFullPage ? (jsxRuntime.jsx("div", { className: "fixed inset-0 z-10000", children: jsxRuntime.jsx(loading.Loading, { className: "h-full w-full" }) })) : (jsxRuntime.jsx("div", { className: "fixed inset-0 z-10000", children: jsxRuntime.jsx("div", { className: dialogStyles.dialogLoadingContentClass, children: jsxRuntime.jsx(loading.Loading, { compact: true, 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" }) }) })), document.body)
         : null;
     return {
         dialogLoading,

package/dist/main/alert-dialog/dialog-loading-action.mjs

@@ -4,6 +4,7 @@ import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { createPortal } from 'react-dom';
 import { Loading } from '../loading.mjs';
+import { dialogLoadingContentClass } from './dialog-styles.mjs';
 
 function useDialogLoadingAction({ loadingActions, loadingFullPage = false, onOpenChange, }) {
     const [mounted, setMounted] = React__default.useState(false);
@@ -12,15 +13,17 @@ function useDialogLoadingAction({ loadingActions, loadingFullPage = false, onOpe
         setMounted(true);
     }, []);
     const runDialogAction = React__default.useCallback((action, handler) => __awaiter(this, void 0, void 0, function* () {
-        onOpenChange(false);
         if (!handler) {
+            onOpenChange(false);
             return;
         }
         if (!(loadingActions === null || loadingActions === void 0 ? void 0 : loadingActions.includes(action))) {
+            onOpenChange(false);
             yield handler();
             return;
         }
         setLoading(true);
+        onOpenChange(false);
         try {
             yield handler();
         }
@@ -29,7 +32,7 @@ function useDialogLoadingAction({ loadingActions, loadingFullPage = false, onOpe
         }
     }), [loadingActions, onOpenChange]);
     const dialogLoading = mounted && loading
-        ? createPortal(loadingFullPage ? (jsx("div", { className: "fixed inset-0 z-10000", children: jsx(Loading, { className: "h-full w-full" }) })) : (jsx("div", { className: "pointer-events-none fixed inset-0 z-10000 flex items-center justify-center p-4", children: jsx("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)]", children: jsx(Loading, { compact: true, label: "Loading", className: "min-h-[250px] w-[min(22rem,calc(100vw-2rem))] bg-transparent", labelClassName: "text-foreground" }) }) })), document.body)
+        ? createPortal(loadingFullPage ? (jsx("div", { className: "fixed inset-0 z-10000", children: jsx(Loading, { className: "h-full w-full" }) })) : (jsx("div", { className: "fixed inset-0 z-10000", children: jsx("div", { className: dialogLoadingContentClass, children: jsx(Loading, { compact: true, 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" }) }) })), document.body)
         : null;
     return {
         dialogLoading,