@windrun-huaiin/third-ui 29.2.1 → 30.0.0

package/dist/fuma/mdx/cheet-table.d.ts

@@ -0,0 +1,13 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type CheetTableProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
+    title?: ReactNode;
+    description?: string;
+    copyableColumns?: string[];
+    defaultOpen?: boolean;
+    collapsible?: boolean;
+    striped?: boolean;
+    stickyHeader?: boolean;
+    emptyText?: string;
+    children: ReactNode;
+};
+export declare function CheetTable({ title, description, copyableColumns, defaultOpen, collapsible, striped, stickyHeader, emptyText, className, children, style, ...props }: CheetTableProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,295 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var icons = require('@windrun-huaiin/base-ui/icons');
+var lib = require('@windrun-huaiin/base-ui/lib');
+var utils = require('@windrun-huaiin/lib/utils');
+var React = require('react');
+var infoTooltip = require('../../main/info-tooltip.js');
+
+const DEFAULT_COLUMN_WIDTH = 180;
+const MIN_COLUMN_WIDTH = 140;
+const CHEET_TABLE_BORDER_COLOR = `color-mix(in srgb, ${lib.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 (React.isValidElement(node)) {
+        return collectText(node.props.children);
+    }
+    return '';
+}
+function getElementChildren(element) {
+    return React.Children.toArray(element.props.children);
+}
+function isElementType(node, type) {
+    return React.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 (React.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 (React.isValidElement(node)) {
+        return collectRowElements(node.props.children);
+    }
+    return [];
+}
+function parseRow(row) {
+    return getElementChildren(row)
+        .filter(React.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 (jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-0.5", children: [jsxRuntime.jsx("span", { className: utils.cn('block min-w-0 truncate', force && utils.cn('font-semibold', lib.themeIconColor)), children: cell.text }), cell.description ? (jsxRuntime.jsx(infoTooltip.InfoTooltip, { content: cell.description, className: "not-prose -mx-0.5", desktopSide: "bottom" })) : null, copyable ? (jsxRuntime.jsx("button", { type: "button", "aria-label": copied ? 'Copied' : 'Copy cell content', className: utils.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 && lib.themeIconColor, lib.themeRingColor), onClick: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    onCopy === null || onCopy === void 0 ? void 0 : onCopy();
+                }, onPointerDown: (event) => {
+                    event.stopPropagation();
+                }, children: copied ? jsxRuntime.jsx(icons.CheckIcon, { className: "size-3.5" }) : jsxRuntime.jsx(icons.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 = tslib.__rest(_a, ["title", "description", "copyableColumns", "defaultOpen", "collapsible", "striped", "stickyHeader", "emptyText", "className", "children", "style"]);
+    const [mounted, setMounted] = React.useState(false);
+    const [model, setModel] = React.useState(null);
+    const [parsed, setParsed] = React.useState(false);
+    const [open, setOpen] = React.useState(defaultOpen);
+    const [copiedCell, setCopiedCell] = React.useState(null);
+    const [columnWidths, setColumnWidths] = React.useState([]);
+    const sourceRef = React.useRef(null);
+    const resizeStartRef = React.useRef(null);
+    const headerCount = (_b = model === null || model === void 0 ? void 0 : model.headers.length) !== null && _b !== void 0 ? _b : 0;
+    const copyableColumnSet = React.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]);
+    React.useEffect(() => {
+        var _a;
+        setMounted(true);
+        setModel((_a = parseCheetTableElement(sourceRef.current)) !== null && _a !== void 0 ? _a : parseCheetTable(children));
+        setParsed(true);
+    }, [children]);
+    React.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]);
+    React.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) => tslib.__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 = utils.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 ? (jsxRuntime.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: [jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center justify-center gap-0.5", children: [title ? (jsxRuntime.jsx("h3", { className: "truncate text-center text-sm font-semibold leading-6 text-fd-foreground", children: title })) : null, description ? (jsxRuntime.jsx(infoTooltip.InfoTooltip, { content: description, className: "not-prose -mx-0.5", desktopSide: "bottom" })) : null] }), collapsible ? (jsxRuntime.jsx("button", { type: "button", className: utils.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 && lib.themeIconColor, lib.themeRingColor), "aria-expanded": open, onClick: () => setOpen((value) => !value), children: open ? jsxRuntime.jsx(icons.EyeIcon, { className: "size-4" }) : jsxRuntime.jsx(icons.EyeOffIcon, { className: "size-4" }) })) : null] })) : null;
+    if (!mounted) {
+        return (jsxRuntime.jsxs("section", Object.assign({ "data-cheet-table": true, className: shellClassName, style: shellStyle }, props, { children: [titleBar, jsxRuntime.jsx("div", { ref: sourceRef, hidden: true, children: children })] })));
+    }
+    if (!model) {
+        return (jsxRuntime.jsxs("section", Object.assign({ "data-cheet-table": true, className: shellClassName, style: shellStyle }, props, { children: [titleBar, jsxRuntime.jsx("div", { ref: sourceRef, hidden: true, children: children }), open && parsed ? (jsxRuntime.jsx("div", { className: "px-4 py-6 text-center text-sm text-fd-muted-foreground", children: emptyText })) : null] })));
+    }
+    const content = model.rows.length > 0 ? (jsxRuntime.jsx("div", { className: "overflow-x-auto", children: jsxRuntime.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: [jsxRuntime.jsx("colgroup", { children: model.headers.map((header, index) => {
+                        var _a;
+                        return (jsxRuntime.jsx("col", { style: {
+                                width: (_a = columnWidths[index]) !== null && _a !== void 0 ? _a : DEFAULT_COLUMN_WIDTH,
+                                minWidth: MIN_COLUMN_WIDTH,
+                            } }, `${header.text}-${index}-col`));
+                    }) }), jsxRuntime.jsx("thead", { className: utils.cn(stickyHeader && 'sticky top-0 z-10'), children: jsxRuntime.jsx("tr", { children: model.headers.map((header, index) => (jsxRuntime.jsxs("th", { className: utils.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: [jsxRuntime.jsx(CheetCellContent, { cell: header, force: header.force }), index < model.headers.length - 1 ? (jsxRuntime.jsx("button", { type: "button", "aria-label": "Resize column", className: utils.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}`))) }) }), jsxRuntime.jsx("tbody", { children: model.rows.map((row, rowIndex) => (jsxRuntime.jsx("tr", { className: utils.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 (jsxRuntime.jsx("td", { className: utils.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: jsxRuntime.jsx(CheetCellContent, { cell: cell, force: header.force || cell.force, copyable: copyable, copied: copiedCell === cellId, onCopy: copyable
+                                        ? () => handleCopy(cell.text, cellId)
+                                        : undefined }) }, cellId));
+                        }) }, rowIndex))) })] }) })) : (jsxRuntime.jsx("div", { className: "px-4 py-6 text-center text-sm text-fd-muted-foreground", children: emptyText }));
+    return (jsxRuntime.jsxs("section", Object.assign({ "data-cheet-table": true, className: shellClassName, style: shellStyle }, props, { children: [titleBar, jsxRuntime.jsx("div", { ref: sourceRef, hidden: true, children: children }), open ? content : null] })));
+}
+
+exports.CheetTable = CheetTable;

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 }))),
     };