art-bd-ui 1.0.37 → 1.0.39

package/dist/cjs/components/ui/rich-editor/extensions/columns/extension.js

@@ -0,0 +1,243 @@
+'use strict';
+
+var index = require('../../../../../node_modules/@tiptap/core/dist/index.js');
+var index$1 = require('../../../../../node_modules/prosemirror-state/dist/index.js');
+var index$2 = require('../../../../../node_modules/@tiptap/react/dist/index.js');
+var nodeView = require('./node-view.js');
+var utils = require('./utils.js');
+
+/**
+ * Columns extension for creating multi-column layouts.
+ * Each column can contain regular content (paragraphs, headings, lists, etc.).
+ *
+ * Attributes that map to raw CSS are stored in the `style` attribute so that
+ * serialised HTML is portable. Attributes that map to Tailwind utility classes
+ * (grid-cols-N, gap-N, items-X, …) are stored in `data-*` attributes and
+ * converted to classes inside renderHTML.
+ */
+const Columns = index.Node.create({
+    name: "columns",
+    group: "block",
+    content: "column+",
+    defining: true,
+    addAttributes() {
+        return {
+            // --- Tailwind-class-mapped attributes (stored as data-*) ---
+            columns: {
+                default: 3,
+                parseHTML: (el) => Number(el.getAttribute("data-columns")) || 3,
+                renderHTML: (attrs) => ({ "data-columns": attrs.columns }),
+            },
+            gap: {
+                default: "4",
+                parseHTML: (el) => { var _a; return (_a = el.getAttribute("data-gap")) !== null && _a !== void 0 ? _a : "4"; },
+                renderHTML: (attrs) => ({ "data-gap": attrs.gap }),
+            },
+            alignItems: {
+                default: "stretch",
+                parseHTML: (el) => { var _a; return (_a = el.getAttribute("data-align-items")) !== null && _a !== void 0 ? _a : "stretch"; },
+                renderHTML: (attrs) => ({ "data-align-items": attrs.alignItems }),
+            },
+            justifyItems: {
+                default: "stretch",
+                parseHTML: (el) => { var _a; return (_a = el.getAttribute("data-justify-items")) !== null && _a !== void 0 ? _a : "stretch"; },
+                renderHTML: (attrs) => ({ "data-justify-items": attrs.justifyItems }),
+            },
+            justifyContent: {
+                default: "start",
+                parseHTML: (el) => { var _a; return (_a = el.getAttribute("data-justify-content")) !== null && _a !== void 0 ? _a : "start"; },
+                renderHTML: (attrs) => ({ "data-justify-content": attrs.justifyContent }),
+            },
+            alignContent: {
+                default: "start",
+                parseHTML: (el) => { var _a; return (_a = el.getAttribute("data-align-content")) !== null && _a !== void 0 ? _a : "start"; },
+                renderHTML: (attrs) => ({ "data-align-content": attrs.alignContent }),
+            },
+            // --- CSS-style attributes (stored in the `style` attribute) ---
+            width: {
+                default: null,
+                parseHTML: (el) => el.style.width || null,
+                renderHTML: (attrs) => (attrs.width ? { style: `width: ${attrs.width}` } : {}),
+            },
+            height: {
+                default: null,
+                parseHTML: (el) => el.style.height || null,
+                renderHTML: (attrs) => (attrs.height ? { style: `height: ${attrs.height}` } : {}),
+            },
+        };
+    },
+    parseHTML() {
+        return [{ tag: 'div[data-type="columns"]' }];
+    },
+    renderHTML({ HTMLAttributes, node }) {
+        const { columns, gap, alignItems, justifyItems, justifyContent, alignContent } = node.attrs;
+        // Only Tailwind-class-based attrs need manual class computation.
+        // CSS-style attrs (width, height) are already merged into HTMLAttributes
+        // by their per-attribute renderHTML above.
+        const classes = [
+            "columns-layout",
+            "grid",
+            `grid-cols-${columns !== null && columns !== void 0 ? columns : 3}`,
+            `gap-${gap !== null && gap !== void 0 ? gap : "4"}`,
+            alignItems && alignItems !== "stretch" ? `items-${alignItems}` : null,
+            justifyItems && justifyItems !== "stretch" ? `justify-items-${justifyItems}` : null,
+            justifyContent && justifyContent !== "start" ? `justify-${justifyContent}` : null,
+            alignContent && alignContent !== "start" ? `content-${alignContent}` : null,
+            "my-4",
+        ]
+            .filter(Boolean)
+            .join(" ");
+        return [
+            "div",
+            index.mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+                "data-type": "columns",
+                class: classes,
+            }),
+            0,
+        ];
+    },
+    addCommands() {
+        return {
+            setColumns: (options) => ({ tr, dispatch, editor }) => {
+                const count = (options === null || options === void 0 ? void 0 : options.columns) || 2;
+                const colType = editor.schema.nodes.column;
+                const colsType = editor.schema.nodes.columns;
+                const cols = [];
+                for (let i = 0; i < count; i++) {
+                    const col = colType.createAndFill({ index: i });
+                    if (col)
+                        cols.push(col);
+                }
+                const node = colsType.createChecked({ columns: count }, cols);
+                if (dispatch) {
+                    const offset = tr.selection.anchor + 1;
+                    tr.replaceSelectionWith(node)
+                        .scrollIntoView()
+                        .setSelection(index$1.TextSelection.near(tr.doc.resolve(offset)));
+                }
+                return true;
+            },
+            addColBefore: () => ({ dispatch, state }) => utils.addOrDeleteCol({ dispatch, state, type: "addBefore" }),
+            addColAfter: () => ({ dispatch, state }) => utils.addOrDeleteCol({ dispatch, state, type: "addAfter" }),
+            deleteCol: () => ({ dispatch, state }) => utils.addOrDeleteCol({ dispatch, state, type: "delete" }),
+        };
+    },
+    addKeyboardShortcuts() {
+        return {
+            "Mod-Alt-G": () => this.editor.commands.setColumns(),
+            Tab: () => utils.gotoCol({
+                state: this.editor.state,
+                dispatch: this.editor.view.dispatch,
+                type: "after",
+            }),
+            "Shift-Tab": () => utils.gotoCol({
+                state: this.editor.state,
+                dispatch: this.editor.view.dispatch,
+                type: "before",
+            }),
+        };
+    },
+});
+/**
+ * Column extension — a single column within a Columns layout.
+ *
+ * Same convention: raw CSS properties live in `style`; Tailwind-mapped values
+ * (padding scale, box-shadow token) are kept in `data-*` attributes.
+ */
+const Column = index.Node.create({
+    name: "column",
+    group: "block",
+    content: "block+",
+    defining: true,
+    isolating: true,
+    addAttributes() {
+        return {
+            // Internal index — always a data attribute
+            index: {
+                default: 0,
+                parseHTML: (el) => {
+                    const val = el.getAttribute("data-index");
+                    return val !== null ? parseInt(val, 10) : 0;
+                },
+                renderHTML: (attrs) => ({ "data-index": attrs.index }),
+            },
+            // --- Tailwind-class-mapped attributes (stored as data-*) ---
+            padding: {
+                default: "0",
+                parseHTML: (el) => { var _a; return (_a = el.getAttribute("data-padding")) !== null && _a !== void 0 ? _a : "0"; },
+                renderHTML: (attrs) => ({ "data-padding": attrs.padding }),
+            },
+            boxShadow: {
+                default: "none",
+                parseHTML: (el) => { var _a; return (_a = el.getAttribute("data-box-shadow")) !== null && _a !== void 0 ? _a : "none"; },
+                renderHTML: (attrs) => ({ "data-box-shadow": attrs.boxShadow }),
+            },
+            // --- CSS-style attributes (stored in the `style` attribute) ---
+            width: {
+                default: null,
+                parseHTML: (el) => el.style.width || null,
+                renderHTML: (attrs) => (attrs.width ? { style: `width: ${attrs.width}` } : {}),
+            },
+            height: {
+                default: null,
+                parseHTML: (el) => el.style.height || null,
+                renderHTML: (attrs) => (attrs.height ? { style: `height: ${attrs.height}` } : {}),
+            },
+            borderWidth: {
+                default: null,
+                parseHTML: (el) => el.style.borderWidth || null,
+                renderHTML: (attrs) => attrs.borderWidth ? { style: `border-width: ${attrs.borderWidth}` } : {},
+            },
+            borderColor: {
+                default: null,
+                parseHTML: (el) => el.style.borderColor || null,
+                renderHTML: (attrs) => attrs.borderColor ? { style: `border-color: ${attrs.borderColor}` } : {},
+            },
+            borderStyle: {
+                default: null,
+                parseHTML: (el) => el.style.borderStyle || null,
+                renderHTML: (attrs) => attrs.borderStyle ? { style: `border-style: ${attrs.borderStyle}` } : {},
+            },
+            backgroundColor: {
+                default: null,
+                parseHTML: (el) => el.style.backgroundColor || null,
+                renderHTML: (attrs) => attrs.backgroundColor ? { style: `background-color: ${attrs.backgroundColor}` } : {},
+            },
+        };
+    },
+    parseHTML() {
+        return [{ tag: 'div[data-type="column"]' }];
+    },
+    renderHTML({ HTMLAttributes, node }) {
+        const { padding, boxShadow } = node.attrs;
+        // CSS-style attrs (width, height, border-*, background-color) are already
+        // merged into HTMLAttributes by their per-attribute renderHTML above.
+        // We only need to map Tailwind-token attrs to classes here.
+        const boxShadowClass = boxShadow === "sm"
+            ? "shadow-sm"
+            : boxShadow === "md"
+                ? "shadow-md"
+                : boxShadow === "lg"
+                    ? "shadow-lg"
+                    : boxShadow === "xl"
+                        ? "shadow-xl"
+                        : null;
+        const classes = ["column", padding && padding !== "0" ? `p-${padding}` : null, boxShadowClass]
+            .filter(Boolean)
+            .join(" ");
+        return [
+            "div",
+            index.mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+                "data-type": "column",
+                class: classes,
+            }),
+            0,
+        ];
+    },
+    addNodeView() {
+        return index$2.ReactNodeViewRenderer(nodeView.ColumnNodeView);
+    },
+});
+
+exports.Column = Column;
+exports.Columns = Columns;

package/dist/cjs/components/ui/rich-editor/extensions/columns/node-view.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../../../../../node_modules/@tiptap/react/dist/index.js');
+var utils = require('../../../../../lib/utils.js');
+
+const ColumnNodeView = (props) => {
+    const { selected } = props;
+    return (jsxRuntime.jsx(index.NodeViewWrapper, { as: "div", "data-type": "column", className: utils.cn("min-h-[60px] border border-dashed border-muted-foreground/40 bg-muted/10", "flex-1", selected && "ring-2 ring-primary"), children: jsxRuntime.jsx(index.NodeViewContent, { as: "div" }) }));
+};
+
+exports.ColumnNodeView = ColumnNodeView;

package/dist/cjs/components/ui/rich-editor/extensions/columns/utils.js

@@ -0,0 +1,76 @@
+'use strict';
+
+var index = require('../../../../../node_modules/@tiptap/core/dist/index.js');
+var index$2 = require('../../../../../node_modules/prosemirror-model/dist/index.js');
+var index$1 = require('../../../../../node_modules/prosemirror-state/dist/index.js');
+
+function addOrDeleteCol({ state, dispatch, type, }) {
+    const maybeColumns = index.findParentNode((node) => node.type.name === "columns")(state.selection);
+    const maybeColumn = index.findParentNode((node) => node.type.name === "column")(state.selection);
+    if (dispatch && maybeColumns && maybeColumn) {
+        const cols = maybeColumns.node;
+        const colIndex = maybeColumn.node.attrs.index;
+        const colsJSON = cols.toJSON();
+        let nextIndex = colIndex;
+        if (type === "delete") {
+            if (colsJSON.content.length <= 1)
+                return false;
+            nextIndex = Math.max(0, colIndex - 1);
+            colsJSON.content.splice(colIndex, 1);
+        }
+        else {
+            nextIndex = type === "addBefore" ? colIndex : colIndex + 1;
+            colsJSON.content.splice(nextIndex, 0, {
+                type: "column",
+                attrs: { index: 0 },
+                content: [{ type: "paragraph" }],
+            });
+        }
+        colsJSON.attrs.columns = colsJSON.content.length;
+        colsJSON.content.forEach((colJSON, index) => {
+            colJSON.attrs.index = index;
+        });
+        const nextCols = index$2.Node.fromJSON(state.schema, colsJSON);
+        let nextSelectPos = maybeColumns.pos;
+        nextCols.content.forEach((col, _pos, index) => {
+            if (index < nextIndex) {
+                nextSelectPos += col.nodeSize;
+            }
+        });
+        const tr = state.tr.setTime(Date.now());
+        tr.replaceWith(maybeColumns.pos, maybeColumns.pos + maybeColumns.node.nodeSize, nextCols).setSelection(index$1.TextSelection.near(tr.doc.resolve(nextSelectPos + 1)));
+        dispatch(tr);
+        return true;
+    }
+    return false;
+}
+function gotoCol({ state, dispatch, type }) {
+    const maybeColumns = index.findParentNode((node) => node.type.name === "columns")(state.selection);
+    const maybeColumn = index.findParentNode((node) => node.type.name === "column")(state.selection);
+    if (dispatch && maybeColumns && maybeColumn) {
+        const cols = maybeColumns.node;
+        const colIndex = maybeColumn.node.attrs.index;
+        const totalCols = cols.attrs.columns;
+        let nextIndex;
+        if (type === "before") {
+            nextIndex = (colIndex - 1 + totalCols) % totalCols;
+        }
+        else {
+            nextIndex = (colIndex + 1) % totalCols;
+        }
+        let nextSelectPos = maybeColumns.pos;
+        cols.content.forEach((col, _pos, index) => {
+            if (index < nextIndex) {
+                nextSelectPos += col.nodeSize;
+            }
+        });
+        const tr = state.tr.setTime(Date.now());
+        tr.setSelection(index$1.TextSelection.near(tr.doc.resolve(nextSelectPos + 1)));
+        dispatch(tr);
+        return true;
+    }
+    return false;
+}
+
+exports.addOrDeleteCol = addOrDeleteCol;
+exports.gotoCol = gotoCol;

package/dist/cjs/components/ui/rich-editor/extensions/columns.js

@@ -2,8 +2,6 @@
 
 var index = require('../../../../node_modules/@tiptap/core/dist/index.js');
 var index$1 = require('../../../../node_modules/prosemirror-state/dist/index.js');
-var index$2 = require('../../../../node_modules/@tiptap/react/dist/index.js');
-var columnsNodeView = require('../views/columns-node-view.js');
 var columnsUtils = require('./columns-utils.js');
 
 /**
@@ -222,11 +220,7 @@ const Column = index.Node.create({
                     : boxShadow === "xl"
                         ? "shadow-xl"
                         : null;
-        const classes = [
-            "column",
-            padding && padding !== "0" ? `p-${padding}` : null,
-            boxShadowClass,
-        ]
+        const classes = ["column", padding && padding !== "0" ? `p-${padding}` : null, boxShadowClass]
             .filter(Boolean)
             .join(" ");
         return [
@@ -238,9 +232,9 @@ const Column = index.Node.create({
             0,
         ];
     },
-    addNodeView() {
-        return index$2.ReactNodeViewRenderer(columnsNodeView.ColumnNodeView);
-    },
+    // addNodeView() {
+    //   return ReactNodeViewRenderer(ColumnNodeView);
+    // },
 });
 
 exports.Column = Column;

package/dist/cjs/components/ui/rich-editor/extensions/table/kit.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var index = require('../../../../../node_modules/@tiptap/core/dist/index.js');
+var table = require('./table.js');
+var tableRow = require('./table-row.js');
+var tableHeader = require('./table-header.js');
+var tableCell = require('./table-cell.js');
+var tableCellStyle = require('./table-cell-style.js');
+
+/**
+ * Bundles all table-related content extensions into a single unit.
+ *
+ * Uses the local Table, TableRow, TableHeader, and TableCell extensions which
+ * carry their own base visual styles via HTMLAttributes — keeping styling
+ * co-located with the extension rather than on the root editor element.
+ *
+ * Including TableCellStyle here means alignment and background-color
+ * attributes are always registered alongside the table nodes — no separate
+ * registration required, and the schema is consistent between the editor and
+ * the static renderer.
+ *
+ * Editor-only extensions (TableActionsExtension, TableHoverExtension,
+ * TableSelectionOverlay) are not included because they depend on the editor
+ * view and are not needed by the static renderer.
+ */
+const TableKit = index.Extension.create({
+    name: "tableKit",
+    addOptions() {
+        return {
+            table: {},
+            tableRow: {},
+            tableHeader: {},
+            tableCell: {},
+            tableCellStyle: {},
+        };
+    },
+    addExtensions() {
+        const extensions = [];
+        if (this.options.table !== false) {
+            extensions.push(table.Table.configure(this.options.table || {}));
+        }
+        if (this.options.tableRow !== false) {
+            extensions.push(tableRow.TableRow);
+        }
+        if (this.options.tableHeader !== false) {
+            extensions.push(tableHeader.TableHeader);
+        }
+        if (this.options.tableCell !== false) {
+            extensions.push(tableCell.TableCell);
+        }
+        if (this.options.tableCellStyle !== false) {
+            extensions.push(tableCellStyle.TableCellStyle.configure(this.options.tableCellStyle || {}));
+        }
+        return extensions;
+    },
+});
+
+exports.TableKit = TableKit;

package/dist/cjs/components/ui/rich-editor/extensions/table/table-cell.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var index = require('../../../../../node_modules/@tiptap/extension-table-cell/dist/index.js');
+
+/**
+ * Table cell extension with base visual styles applied via HTMLAttributes.
+ *
+ * Cell-level styling attributes (alignment, background) are declared in
+ * TableCellStyle so they apply equally to tableCell and tableHeader and are
+ * available to both the editor and the static renderer.
+ *
+ * @see https://tiptap.dev/docs/editor/extensions/nodes/table-cell
+ */
+const TableCell = index.default.configure({
+    HTMLAttributes: {
+        class: "relative min-w-[1em] border border-border px-4 py-2 align-top break-words [overflow-wrap:break-word]",
+    },
+});
+
+exports.TableCell = TableCell;

package/dist/cjs/components/ui/rich-editor/extensions/table/table-floating-controls.js

@@ -102,7 +102,11 @@ function useActiveCellPos(editor, includeHover) {
             if (!ed)
                 return null;
             const hoverState = tableHoverExtension.tableHoverKey.getState(ed.state);
-            const hoverOrLockedPos = includeHover ? ((hoverState === null || hoverState === void 0 ? void 0 : hoverState.menuOpen) ? (_a = hoverState.lockedCell) === null || _a === void 0 ? void 0 : _a.pos : (_b = hoverState === null || hoverState === void 0 ? void 0 : hoverState.cell) === null || _b === void 0 ? void 0 : _b.pos) : null;
+            const hoverOrLockedPos = includeHover
+                ? (hoverState === null || hoverState === void 0 ? void 0 : hoverState.menuOpen)
+                    ? (_a = hoverState.lockedCell) === null || _a === void 0 ? void 0 : _a.pos
+                    : (_b = hoverState === null || hoverState === void 0 ? void 0 : hoverState.cell) === null || _b === void 0 ? void 0 : _b.pos
+                : null;
             return hoverOrLockedPos !== null && hoverOrLockedPos !== void 0 ? hoverOrLockedPos : findCellPosFromSelection(ed);
         },
     });
@@ -242,7 +246,11 @@ function RowMenu({ editor }) {
                                     editor.chain().focus().duplicateRowAt(activeCellPos).run();
                             }, children: [jsxRuntime.jsx(copy.default, { className: "mr-2 size-4" }), "Duplicate row"] }), jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, {}), jsxRuntime.jsxs(dropdownMenu.DropdownMenuSub, { children: [jsxRuntime.jsxs(dropdownMenu.DropdownMenuSubTrigger, { children: [jsxRuntime.jsx(palette.default, { className: "mr-2 size-4" }), "Color"] }), jsxRuntime.jsx(dropdownMenu.DropdownMenuSubContent, { children: COLORS.map((color) => (jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => {
                                             if (activeCellPos !== null)
-                                                editor.chain().focus().setRowBackgroundAt(activeCellPos, color.value || null).run();
+                                                editor
+                                                    .chain()
+                                                    .focus()
+                                                    .setRowBackgroundAt(activeCellPos, color.value || null)
+                                                    .run();
                                         }, children: [jsxRuntime.jsx("div", { className: "mr-2 size-4 rounded border", style: { backgroundColor: color.value || "transparent" } }), color.name] }, color.value || "default"))) })] }), jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, {}), jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => {
                                 if (activeCellPos !== null)
                                     editor.chain().focus().clearRowAt(activeCellPos).run();
@@ -268,7 +276,11 @@ function ColumnMenu({ editor }) {
                                     editor.chain().focus().duplicateColumnAt(activeCellPos).run();
                             }, children: [jsxRuntime.jsx(copy.default, { className: "mr-2 size-4" }), "Duplicate column"] }), jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, {}), jsxRuntime.jsxs(dropdownMenu.DropdownMenuSub, { children: [jsxRuntime.jsxs(dropdownMenu.DropdownMenuSubTrigger, { children: [jsxRuntime.jsx(palette.default, { className: "mr-2 size-4" }), "Color"] }), jsxRuntime.jsx(dropdownMenu.DropdownMenuSubContent, { children: COLORS.map((color) => (jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => {
                                             if (activeCellPos !== null)
-                                                editor.chain().focus().setColumnBackgroundAt(activeCellPos, color.value || null).run();
+                                                editor
+                                                    .chain()
+                                                    .focus()
+                                                    .setColumnBackgroundAt(activeCellPos, color.value || null)
+                                                    .run();
                                         }, children: [jsxRuntime.jsx("div", { className: "mr-2 size-4 rounded border", style: { backgroundColor: color.value || "transparent" } }), color.name] }, color.value || "default"))) })] }), jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, {}), jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => {
                                 if (activeCellPos !== null)
                                     editor.chain().focus().clearColumnAt(activeCellPos).run();
@@ -313,7 +325,11 @@ function CellBubbleMenu({ editor }) {
                     }, disabled: !canSplit, "aria-label": "Split cell", title: "Split cell", children: jsxRuntime.jsx(copy.default, { className: "size-4 rotate-180" }) }), jsxRuntime.jsx("div", { className: "mx-1 h-5 w-px bg-border" }), ALIGNMENT_OPTIONS.map(({ value, icon: Icon, label }) => (jsxRuntime.jsx(button.Button, { variant: "ghost", size: "icon-sm", className: utils.cn("size-7", activeAttrs.horizontalAlign === value && "bg-accent text-accent-foreground"), onClick: () => {
                         editor.chain().focus().setCellAlignmentAt(activeCellPos, value).run();
                     }, "aria-label": label, title: label, children: jsxRuntime.jsx(Icon, { className: "size-4" }) }, value))), jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { onOpenChange: handleOpenChange, children: [jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsx(button.Button, { variant: "ghost", size: "icon-sm", className: utils.cn("size-7", activeAttrs.backgroundColor && "bg-accent text-accent-foreground"), "aria-label": "Cell color", title: "Cell color", children: jsxRuntime.jsx(palette.default, { className: "size-4" }) }) }), jsxRuntime.jsx(dropdownMenu.DropdownMenuContent, { side: "top", align: "end", className: "w-44", children: COLORS.map((color) => (jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => {
-                                    editor.chain().focus().setCellBackgroundAt(activeCellPos, color.value || null).run();
+                                    editor
+                                        .chain()
+                                        .focus()
+                                        .setCellBackgroundAt(activeCellPos, color.value || null)
+                                        .run();
                                 }, children: [jsxRuntime.jsx("div", { className: "mr-2 size-4 rounded border", style: { backgroundColor: color.value || "transparent" } }), color.name] }, color.value || "default"))) })] }), jsxRuntime.jsx("div", { className: "mx-1 h-5 w-px bg-border" }), jsxRuntime.jsx(button.Button, { variant: "ghost", size: "icon-sm", className: "size-7", onClick: () => {
                         editor.chain().focus().clearCellAt(activeCellPos).run();
                     }, "aria-label": "Clear cell contents", title: "Clear cell contents", children: jsxRuntime.jsx(x.default, { className: "size-4" }) })] }) }));

package/dist/cjs/components/ui/rich-editor/extensions/table/table-header.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var index = require('../../../../../node_modules/@tiptap/extension-table-header/dist/index.js');
+
+/**
+ * Table header cell extension with base visual styles applied via HTMLAttributes.
+ *
+ * Cell-level styling attributes (alignment, background) are declared in
+ * TableCellStyle so they apply equally to tableCell and tableHeader and are
+ * available to both the editor and the static renderer.
+ *
+ * @see https://tiptap.dev/docs/editor/extensions/nodes/table-header
+ */
+const TableHeader = index.default.configure({
+    HTMLAttributes: {
+        class: "relative min-w-[1em] border border-border px-4 py-2 text-left font-semibold bg-muted/50 align-top break-words [overflow-wrap:break-word]",
+    },
+});
+
+exports.TableHeader = TableHeader;

package/dist/cjs/components/ui/rich-editor/extensions/table/table-row.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var index = require('../../../../../node_modules/@tiptap/extension-table-row/dist/index.js');
+
+/**
+ * Table row extension without injected styles.
+ *
+ * Styling is controlled from the editor container.
+ *
+ * @see https://tiptap.dev/docs/editor/extensions/nodes/table-row
+ */
+const TableRow = index.default;
+
+exports.TableRow = TableRow;

package/dist/cjs/components/ui/rich-editor/extensions/table/table.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var index = require('../../../../../node_modules/@tiptap/extension-table/dist/index.js');
+
+/**
+ * Table extension configured with column resizing and base visual styles.
+ *
+ * Note: the `tableWrapper` div injected by TipTap's resize NodeView is not
+ * a schema node, so its spacing/overflow styles are still applied from the
+ * editor container. The styles here target the `<table>` element via
+ * renderHTML (HTML output) — the NodeView applies them via HTMLAttributes.
+ *
+ * @see https://tiptap.dev/docs/editor/extensions/nodes/table
+ */
+const Table = index.Table.configure({
+    resizable: true,
+    HTMLAttributes: {
+        class: "m-0 w-full table-fixed border-collapse text-sm",
+    },
+});
+
+exports.Table = Table;

package/dist/cjs/components/ui/rich-editor/extensions.js

@@ -22,10 +22,23 @@ var index$3 = require('../../../node_modules/@tiptap/extension-text-align/dist/i
 var index$9 = require('../../../node_modules/@tiptap/extension-list/dist/index.js');
 var index$a = require('../../../node_modules/@tiptap/extensions/dist/index.js');
 var indent = require('./extensions/indent.js');
-var tableKit = require('./extensions/table-kit.js');
+require('./extensions/table/table.js');
+require('../../../node_modules/@tiptap/extension-table/dist/index.js');
+require('./extensions/table/table-header.js');
+require('./extensions/table/table-cell.js');
+require('./extensions/table/table-cell-style.js');
+var kit = require('./extensions/table/kit.js');
 var tableActionsExtension = require('./extensions/table/table-actions-extension.js');
 var tableSelectionOverlay = require('./extensions/table/table-selection-overlay.js');
 var tableHoverExtension = require('./extensions/table/table-hover-extension.js');
+require('react/jsx-runtime');
+require('react');
+require('react-dom');
+require('../../../node_modules/prosemirror-tables/dist/index.js');
+require('../dropdown-menu/dropdown-menu.js');
+require('../../buttons/button/button.js');
+require('../../popovers/popover/popover.js');
+require('../../forms/input/input.js');
 var heading = require('./extensions/heading.js');
 var paragraph = require('./extensions/paragraph.js');
 var blockquote = require('./extensions/blockquote.js');
@@ -36,11 +49,17 @@ var horizontalRule = require('./extensions/horizontal-rule.js');
 var details = require('./extensions/details.js');
 var detailsSummary = require('./extensions/details-summary.js');
 var detailsContent = require('./extensions/details-content.js');
+require('./extensions/code-block/index.js');
 var code = require('./extensions/code.js');
 var subscript = require('./extensions/subscript.js');
 var superscript = require('./extensions/superscript.js');
-var extension = require('./extensions/carousel/extension.js');
-var columns = require('./extensions/columns.js');
+var extension$1 = require('./extensions/carousel/extension.js');
+var editor = require('./extensions/carousel/editor.js');
+require('../carousel/carousel.js');
+require('../../../node_modules/tslib/tslib.es6.js');
+require('../../forms/file-upload/file-upload.js');
+var extension = require('./extensions/columns/extension.js');
+var lowlightBase = require('./extensions/code-block/lowlight-base.js');
 
 /**
  * Core content and formatting extensions used by both editor and renderer.
@@ -64,8 +83,8 @@ const CORE_EXTENSIONS = [
     details.Details,
     detailsSummary.DetailsSummary,
     detailsContent.DetailsContent,
-    columns.Columns,
-    columns.Column,
+    extension.Columns,
+    extension.Column,
     index$d.default,
     // Inline marks (formatting)
     index$e.default,
@@ -84,9 +103,9 @@ const CORE_EXTENSIONS = [
     // Rich content
     index$1.default,
     index$2.default,
-    extension.Carousel,
-    tableKit.TableKit,
-    // CodeBlockLowlightBase,
+    extension$1.Carousel,
+    kit.TableKit,
+    lowlightBase.CodeBlockLowlightBase,
 ];
 /**
  * Default configurations for editor extensions.
@@ -157,7 +176,7 @@ const EDITOR_EXTENSIONS = [
     index$a.TrailingNode,
     index$5.default,
     index$4.default,
-    // CarouselEditor,
+    editor.CarouselEditor,
     tableActionsExtension.TableActionsExtension,
     tableSelectionOverlay.TableSelectionOverlay,
     tableHoverExtension.TableHoverExtension,