art-bd-ui 1.0.39 → 1.0.41

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

@@ -1,26 +1,25 @@
 'use strict';
 
 var lodash = require('../../../_virtual/lodash.js');
-var index$b = require('../../../node_modules/@tiptap/extension-document/dist/index.js');
-var index$c = require('../../../node_modules/@tiptap/extension-text/dist/index.js');
-var index$e = require('../../../node_modules/@tiptap/extension-bold/dist/index.js');
-var index$f = require('../../../node_modules/@tiptap/extension-italic/dist/index.js');
-var index$g = require('../../../node_modules/@tiptap/extension-strike/dist/index.js');
-var index$d = require('../../../node_modules/@tiptap/extension-hard-break/dist/index.js');
-var index$h = require('../../../node_modules/@tiptap/extension-underline/dist/index.js');
+var index$a = require('../../../node_modules/@tiptap/extension-document/dist/index.js');
+var index$b = require('../../../node_modules/@tiptap/extension-text/dist/index.js');
+var index$d = require('../../../node_modules/@tiptap/extension-bold/dist/index.js');
+var index$e = require('../../../node_modules/@tiptap/extension-italic/dist/index.js');
+var index$f = require('../../../node_modules/@tiptap/extension-strike/dist/index.js');
+var index$c = require('../../../node_modules/@tiptap/extension-hard-break/dist/index.js');
+var index$g = require('../../../node_modules/@tiptap/extension-underline/dist/index.js');
 var index = require('../../../node_modules/@tiptap/extension-link/dist/index.js');
-var index$1 = require('../../../node_modules/@tiptap/extension-image/dist/index.js');
-var index$i = require('../../../node_modules/@tiptap/extension-highlight/dist/index.js');
-var index$j = require('../../../node_modules/@tiptap/extension-text-style/dist/index.js');
-var index$6 = require('../../../node_modules/@tiptap/extension-history/dist/index.js');
-var index$7 = require('../../../node_modules/@tiptap/extension-dropcursor/dist/index.js');
-var index$8 = require('../../../node_modules/@tiptap/extension-gapcursor/dist/index.js');
-var index$4 = require('../../../node_modules/@tiptap/extension-placeholder/dist/index.js');
-var index$5 = require('../../../node_modules/@tiptap/extension-character-count/dist/index.js');
-var index$2 = require('../../../node_modules/@tiptap/extension-youtube/dist/index.js');
-var index$3 = require('../../../node_modules/@tiptap/extension-text-align/dist/index.js');
-var index$9 = require('../../../node_modules/@tiptap/extension-list/dist/index.js');
-var index$a = require('../../../node_modules/@tiptap/extensions/dist/index.js');
+var index$h = require('../../../node_modules/@tiptap/extension-highlight/dist/index.js');
+var index$i = require('../../../node_modules/@tiptap/extension-text-style/dist/index.js');
+var index$5 = require('../../../node_modules/@tiptap/extension-history/dist/index.js');
+var index$6 = require('../../../node_modules/@tiptap/extension-dropcursor/dist/index.js');
+var index$7 = require('../../../node_modules/@tiptap/extension-gapcursor/dist/index.js');
+var index$3 = require('../../../node_modules/@tiptap/extension-placeholder/dist/index.js');
+var index$4 = require('../../../node_modules/@tiptap/extension-character-count/dist/index.js');
+var index$1 = require('../../../node_modules/@tiptap/extension-youtube/dist/index.js');
+var index$2 = require('../../../node_modules/@tiptap/extension-text-align/dist/index.js');
+var index$8 = require('../../../node_modules/@tiptap/extension-list/dist/index.js');
+var index$9 = require('../../../node_modules/@tiptap/extensions/dist/index.js');
 var indent = require('./extensions/indent.js');
 require('./extensions/table/table.js');
 require('../../../node_modules/@tiptap/extension-table/dist/index.js');
@@ -35,6 +34,7 @@ require('react/jsx-runtime');
 require('react');
 require('react-dom');
 require('../../../node_modules/prosemirror-tables/dist/index.js');
+require('./toolbar/color-constants.js');
 require('../dropdown-menu/dropdown-menu.js');
 require('../../buttons/button/button.js');
 require('../../popovers/popover/popover.js');
@@ -45,6 +45,7 @@ var blockquote = require('./extensions/blockquote.js');
 var bulletList = require('./extensions/bullet-list.js');
 var orderedList = require('./extensions/ordered-list.js');
 var listItem = require('./extensions/list-item.js');
+var image = require('./extensions/image.js');
 var horizontalRule = require('./extensions/horizontal-rule.js');
 var details = require('./extensions/details.js');
 var detailsSummary = require('./extensions/details-summary.js');
@@ -53,12 +54,17 @@ 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 emoji = require('./extensions/emoji.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 slash = require('./extensions/slash/slash.js');
+var defaultSuggestions = require('./extensions/slash/default-suggestions.js');
+require('./extensions/slash/slash-menu.js');
+var slashSuggestionRenderer = require('./extensions/slash/slash-suggestion-renderer.js');
 var lowlightBase = require('./extensions/code-block/lowlight-base.js');
 
 /**
@@ -70,8 +76,8 @@ var lowlightBase = require('./extensions/code-block/lowlight-base.js');
  */
 const CORE_EXTENSIONS = [
     // Document structure
+    index$a.default,
     index$b.default,
-    index$c.default,
     // Block content
     paragraph.Paragraph,
     heading.Heading,
@@ -85,24 +91,25 @@ const CORE_EXTENSIONS = [
     detailsContent.DetailsContent,
     extension.Columns,
     extension.Column,
-    index$d.default,
+    index$c.default,
+    emoji.Emoji,
     // Inline marks (formatting)
+    index$d.default,
     index$e.default,
     index$f.default,
     index$g.default,
-    index$h.default,
     code.Code,
     subscript.Subscript,
     superscript.Superscript,
-    index$i.default,
+    index$h.default,
     index.default,
     // Text styling
-    index$3.default,
+    index$2.default,
     indent.Indent,
-    index$j.TextStyleKit, // Includes TextStyle, Color, BackgroundColor, FontSize, FontFamily, LineHeight
+    index$i.TextStyleKit, // Includes TextStyle, Color, BackgroundColor, FontSize, FontFamily, LineHeight
     // Rich content
+    image.Image,
     index$1.default,
-    index$2.default,
     extension$1.Carousel,
     kit.TableKit,
     lowlightBase.CodeBlockLowlightBase,
@@ -121,7 +128,7 @@ const defaultExtensionConfigs = new Map([
         },
     ],
     [
-        index$1.default.name,
+        image.Image.name,
         {
             resize: {
                 enabled: true,
@@ -133,14 +140,14 @@ const defaultExtensionConfigs = new Map([
         },
     ],
     [
-        index$2.default.name,
+        index$1.default.name,
         {
             controls: true,
             nocookie: true,
         },
     ],
     [
-        index$3.default.name,
+        index$2.default.name,
         {
             types: ["heading", "paragraph"],
             defaultAlignment: "left",
@@ -156,26 +163,38 @@ const defaultExtensionConfigs = new Map([
         },
     ],
     [
-        index$4.default.name,
+        index$3.default.name,
         {
             placeholder: "Start typing…",
         },
     ],
     [
-        index$5.default.name,
+        index$4.default.name,
         {
             limit: 0,
         },
     ],
 ]);
 const EDITOR_EXTENSIONS = [
+    index$5.default,
     index$6.default,
     index$7.default,
-    index$8.default,
-    index$9.ListKeymap,
-    index$a.TrailingNode,
-    index$5.default,
+    index$8.ListKeymap,
+    index$9.TrailingNode,
+    slash.Slash.configure({
+        suggestion: {
+            items: defaultSuggestions.defaultSlashSuggestions,
+            command: ({ editor, range, props }) => {
+                if (typeof props.command === "function") {
+                    props.command({ editor, range });
+                }
+            },
+            render: slashSuggestionRenderer.renderSlashSuggestion,
+        },
+    }),
     index$4.default,
+    index$3.default,
+    emoji.EmojiEditor,
     editor.CarouselEditor,
     tableActionsExtension.TableActionsExtension,
     tableSelectionOverlay.TableSelectionOverlay,

package/dist/cjs/components/ui/rich-editor/rich-content-renderer.js

@@ -56,7 +56,7 @@ function RichContentRenderer({ doc, html, className }) {
             },
         },
     });
-    return jsxRuntime.jsx("div", { className: utils.cn("max-w-none", className), children: content });
+    return (jsxRuntime.jsx("div", { className: utils.cn("max-w-none [&_a]:cursor-pointer [&_a]:font-medium [&_a]:text-primary [&_a]:underline [&_a]:decoration-primary/60 [&_a]:underline-offset-4 [&_a]:transition-colors [&_a:hover]:text-primary/80 [&_a:focus-visible]:rounded-sm [&_a:focus-visible]:outline-none [&_a:focus-visible]:ring-2 [&_a:focus-visible]:ring-primary/30 [&_.rich-editor-emoji]:inline-block [&_.rich-editor-emoji]:align-middle [&_.rich-editor-emoji_img]:inline-block [&_.rich-editor-emoji_img]:h-[1em] [&_.rich-editor-emoji_img]:w-[1em] [&_.rich-editor-emoji_img]:align-[-0.1em]", className), children: content }));
 }
 
 exports.RichContentRenderer = RichContentRenderer;

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

@@ -16,6 +16,7 @@ var extensions = require('./extensions.js');
 var tableFloatingControls = require('./extensions/table/table-floating-controls.js');
 var toolbar = require('./toolbar.js');
 var floatingBubbleControls = require('./bubble-menus/floating-bubble-controls.js');
+var blockDragHandleControls = require('./bubble-menus/block-drag-handle-controls.js');
 var tooltip = require('../../popovers/tooltip/tooltip.js');
 var separatorHorizontal = require('../../../node_modules/lucide-react/dist/esm/icons/separator-horizontal.js');
 
@@ -25,7 +26,7 @@ const defaultOnFileUpload = (files) => tslib_es6.__awaiter(void 0, void 0, void
         alt: file.name.replace(/\.[^/.]+$/, ""),
     }));
 });
-function RichEditor({ initialValue, outputFormat, onChange, editable = true, placeholder = "Start typing…", maxChars, className, editorContentClassName, showToolbar = true, showBubbleMenu = true, showFooter = true, toolbarActions, onFileUpload = defaultOnFileUpload, }) {
+function RichEditor({ initialValue, outputFormat, onChange, editable = true, placeholder = "Start typing…", maxChars, className, editorContentClassName, showToolbar = true, showBubbleMenu = true, showBlockControls = true, showFooter = true, toolbarActions, onFileUpload = defaultOnFileUpload, }) {
     const format = outputFormat !== null && outputFormat !== void 0 ? outputFormat : "html";
     const onChangeRef = React.useRef(onChange);
     onChangeRef.current = onChange;
@@ -36,7 +37,14 @@ function RichEditor({ initialValue, outputFormat, onChange, editable = true, pla
         content: initialValue || "",
         extensions: extensions.getEditorExtensions([
             index$1.CodeBlockLowlight,
-            index$2.default.configure({ placeholder }),
+            index$2.default.configure({
+                placeholder: ({ node }) => {
+                    if (node.type.name === "detailsSummary") {
+                        return "Summary";
+                    }
+                    return placeholder;
+                },
+            }),
             editor.CarouselEditor.configure({
                 onUploadFiles: (files) => onFileUploadRef.current(files),
             }),
@@ -46,6 +54,11 @@ function RichEditor({ initialValue, outputFormat, onChange, editable = true, pla
             attributes: {
                 class: [
                     "focus:outline-none",
+                    // Link styling
+                    "[&_a]:cursor-pointer [&_a]:font-medium [&_a]:text-primary [&_a]:underline [&_a]:decoration-primary/60 [&_a]:underline-offset-4 [&_a]:transition-colors [&_a:hover]:text-primary/80 [&_a:focus-visible]:rounded-sm [&_a:focus-visible]:outline-none [&_a:focus-visible]:ring-2 [&_a:focus-visible]:ring-primary/30",
+                    // Emoji node styling
+                    "[&_.rich-editor-emoji]:inline-block [&_.rich-editor-emoji]:align-middle",
+                    "[&_.rich-editor-emoji_img]:inline-block [&_.rich-editor-emoji_img]:h-[1em] [&_.rich-editor-emoji_img]:w-[1em] [&_.rich-editor-emoji_img]:align-[-0.1em]",
                     // Image styling
                     "[&_img.rich-editor-image]:my-6 [&_img.rich-editor-image]:block [&_img.rich-editor-image]:h-auto [&_img.rich-editor-image]:max-w-full [&_img.rich-editor-image]:rounded-lg",
                     "[&_img.rich-editor-image[data-align='center']]:mx-auto [&_img.rich-editor-image[data-align='right']]:ml-auto [&_img.rich-editor-image[data-align='right']]:mr-0",
@@ -68,6 +81,8 @@ function RichEditor({ initialValue, outputFormat, onChange, editable = true, pla
                     "[&_.column-resize-handle]:pointer-events-auto [&_.column-resize-handle]:absolute [&_.column-resize-handle]:right-[-2px] [&_.column-resize-handle]:top-0 [&_.column-resize-handle]:bottom-[-2px] [&_.column-resize-handle]:w-[3px] [&_.column-resize-handle]:bg-primary/60 [&_.column-resize-handle]:opacity-0 [&_.column-resize-handle]:transition-opacity [&_.column-resize-handle]:z-20 [&_.column-resize-handle]:rounded-sm [&_.column-resize-handle]:cursor-col-resize",
                     "[&_table_th:hover_.column-resize-handle]:opacity-100 [&_table_td:hover_.column-resize-handle]:opacity-100 [&.resize-cursor_.column-resize-handle]:opacity-100",
                     "[&.resize-cursor]:cursor-col-resize",
+                    // Placeholder text for an empty editor node.
+                    "[&_.is-editor-empty:first-child::before]:pointer-events-none [&_.is-editor-empty:first-child::before]:float-left [&_.is-editor-empty:first-child::before]:h-0 [&_.is-editor-empty:first-child::before]:text-muted-foreground [&_.is-editor-empty:first-child::before]:content-[attr(data-placeholder)]",
                 ].join(" "),
             },
         },
@@ -93,7 +108,11 @@ function RichEditor({ initialValue, outputFormat, onChange, editable = true, pla
     if (!editor$1)
         return null;
     const isLimit = maxChars && editor$1.storage.characterCount.characters() >= (maxChars !== null && maxChars !== void 0 ? maxChars : 0);
-    return (jsxRuntime.jsx(tooltip.TooltipProvider, { children: jsxRuntime.jsxs("div", { className: "w-full rounded-2xl border bg-background shadow-sm " + (className !== null && className !== void 0 ? className : ""), children: [showToolbar && (jsxRuntime.jsx(toolbar.Toolbar, { editor: editor$1, actions: toolbarActions, onFileUpload: (files) => onFileUploadRef.current(files) })), jsxRuntime.jsxs("div", { className: "relative px-4", children: [showBubbleMenu && jsxRuntime.jsx(floatingBubbleControls.FloatingBubbleControls, { editor: editor$1 }), jsxRuntime.jsx(index.EditorContent, { editor: editor$1, className: ["min-h-[220px] py-4", editorContentClassName].filter(Boolean).join(" ") }), jsxRuntime.jsx(tableFloatingControls.TableFloatingControls, { editor: editor$1 })] }), showFooter && jsxRuntime.jsx(Footer, { editor: editor$1, maxChars: maxChars, isLimit: !!isLimit })] }) }));
+    return (jsxRuntime.jsx(tooltip.TooltipProvider, { children: jsxRuntime.jsxs("div", { className: ["w-full overflow-auto rounded-2xl border bg-background shadow-sm", className]
+                .filter(Boolean)
+                .join(" "), children: [showToolbar && (jsxRuntime.jsx(toolbar.Toolbar, { editor: editor$1, actions: toolbarActions, onFileUpload: (files) => onFileUploadRef.current(files) })), jsxRuntime.jsxs("div", { className: "relative px-4", children: [editable && showBlockControls && jsxRuntime.jsx(blockDragHandleControls.BlockDragHandleControls, { editor: editor$1 }), showBubbleMenu && jsxRuntime.jsx(floatingBubbleControls.FloatingBubbleControls, { editor: editor$1 }), jsxRuntime.jsx(index.EditorContent, { editor: editor$1, className: ["min-h-[220px] py-4", showBlockControls && editable ? "pl-12" : null, editorContentClassName]
+                                .filter(Boolean)
+                                .join(" ") }), jsxRuntime.jsx(tableFloatingControls.TableFloatingControls, { editor: editor$1 })] }), showFooter && jsxRuntime.jsx(Footer, { editor: editor$1, maxChars: maxChars, isLimit: !!isLimit })] }) }));
 }
 // ---------- Footer ----------
 function Footer({ editor, maxChars, isLimit }) {

package/dist/cjs/components/ui/rich-editor/toolbar/alignment-button.js

@@ -1,25 +1,42 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var index = require('../../../../node_modules/@tiptap/react/dist/index.js');
 var constants = require('./constants.js');
-var toolbarToggle = require('./toolbar-toggle.js');
+require('../../../buttons/toggle/toggle.js');
+require('../../../popovers/tooltip/tooltip.js');
+var button = require('../../../buttons/button/button.js');
+var popover = require('../../../popovers/popover/popover.js');
+var utils = require('../../../../lib/utils.js');
+var chevronDown = require('../../../../node_modules/lucide-react/dist/esm/icons/chevron-down.js');
 
-/**
- * A button that sets text alignment in the editor.
- * Uses useEditorState to track the current alignment.
- * Icon and tooltip are automatically determined from the alignment configuration.
- */
-function AlignmentButton({ editor, align }) {
-    const config = constants.ALIGNMENT_CONFIG[align];
-    const isActive = index.useEditorState({
+const ALIGNMENT_OPTIONS = ["left", "center", "right", "justify"];
+function AlignmentDropdown({ editor }) {
+    const [open, setOpen] = React.useState(false);
+    const activeAlign = index.useEditorState({
         editor,
-        selector: (ctx) => (ctx.editor ? ctx.editor.isActive({ textAlign: align }) : false),
+        selector: (ctx) => {
+            if (!ctx.editor)
+                return "left";
+            if (ctx.editor.isActive({ textAlign: "center" }))
+                return "center";
+            if (ctx.editor.isActive({ textAlign: "right" }))
+                return "right";
+            if (ctx.editor.isActive({ textAlign: "justify" }))
+                return "justify";
+            return "left";
+        },
     });
-    const handleClick = () => {
-        editor.chain().focus().setTextAlign(align).run();
-    };
-    return (jsxRuntime.jsx(toolbarToggle.ToolbarToggle, { icon: config.icon, pressed: isActive, onPressedChange: handleClick, tooltip: config.tooltip, ariaLabel: config.ariaLabel }));
+    const activeConfig = constants.ALIGNMENT_CONFIG[activeAlign];
+    return (jsxRuntime.jsxs(popover.Popover, { open: open, onOpenChange: setOpen, children: [jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: jsxRuntime.jsxs(button.Button, { variant: "ghost", size: "sm", className: "h-8 gap-1 px-2", "aria-label": activeConfig.ariaLabel, title: activeConfig.tooltip, children: [activeConfig.icon, jsxRuntime.jsx(chevronDown.default, { className: "size-3 text-muted-foreground" })] }) }), jsxRuntime.jsx(popover.PopoverContent, { align: "start", sideOffset: 8, className: "w-auto rounded-xl p-1.5", children: jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: ALIGNMENT_OPTIONS.map((align) => {
+                        const config = constants.ALIGNMENT_CONFIG[align];
+                        const isActive = activeAlign === align;
+                        return (jsxRuntime.jsx(button.Button, { type: "button", variant: "ghost", size: "icon-sm", className: utils.cn("size-9 rounded-lg", isActive && "bg-accent text-accent-foreground"), onClick: () => {
+                                editor.chain().focus().setTextAlign(align).run();
+                                setOpen(false);
+                            }, "aria-label": config.ariaLabel, title: config.tooltip, children: config.icon }, align));
+                    }) }) })] }));
 }
 
-exports.AlignmentButton = AlignmentButton;
+exports.AlignmentDropdown = AlignmentDropdown;

package/dist/cjs/components/ui/rich-editor/toolbar/background-color-picker.js

@@ -6,16 +6,13 @@ var index = require('../../../../node_modules/@tiptap/react/dist/index.js');
 var colorSwatch = require('./color-swatch.js');
 var colorConstants = require('./color-constants.js');
 var button = require('../../../buttons/button/button.js');
-var label = require('../../../forms/label/label.js');
 var popover = require('../../../popovers/popover/popover.js');
 var separator = require('../../../utility/separator/separator.js');
 var tooltip = require('../../../popovers/tooltip/tooltip.js');
-var utils = require('../../../../lib/utils.js');
-var paintbrush = require('../../../../node_modules/lucide-react/dist/esm/icons/paintbrush.js');
+var paintBucket = require('../../../../node_modules/lucide-react/dist/esm/icons/paint-bucket.js');
 
 function BackgroundColorPicker({ editor }) {
     const [open, setOpen] = React.useState(false);
-    // Get current background color
     const currentColor = index.useEditorState({
         editor,
         selector: (ctx) => {
@@ -32,14 +29,11 @@ function BackgroundColorPicker({ editor }) {
         editor.chain().focus().unsetBackgroundColor().run();
         setOpen(false);
     };
-    // Check if extension is available
     const hasBackgroundColorExtension = editor.extensionManager.extensions.some((ext) => ext.name === "textStyle");
     if (!hasBackgroundColorExtension) {
         return null;
     }
-    return (jsxRuntime.jsxs(popover.Popover, { open: open, onOpenChange: setOpen, children: [jsxRuntime.jsxs(tooltip.Tooltip, { delayDuration: 300, children: [jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: jsxRuntime.jsx(button.Button, { variant: "ghost", size: "icon", className: utils.cn("h-8 w-8 rounded-md", {
-                                    "bg-muted": currentColor,
-                                }), "aria-label": "Background color", children: jsxRuntime.jsx(paintbrush.default, { className: "size-4", style: { color: currentColor || "currentColor" } }) }) }) }), jsxRuntime.jsx(tooltip.TooltipContent, { children: "Background color" })] }), jsxRuntime.jsx(popover.PopoverContent, { className: "w-72 p-3", align: "start", children: jsxRuntime.jsxs("div", { className: "space-y-3", children: [jsxRuntime.jsx(label.Label, { className: "text-xs text-muted-foreground", children: "Highlight Colors" }), jsxRuntime.jsx(colorSwatch.ColorGrid, { colors: colorConstants.BACKGROUND_COLORS, onColorSelect: applyColor, currentColor: currentColor, columns: 9 }), jsxRuntime.jsx(separator.Separator, {}), jsxRuntime.jsx(label.Label, { className: "text-xs text-muted-foreground", children: "Theme Colors" }), jsxRuntime.jsx(colorSwatch.ColorGrid, { colors: colorConstants.THEME_COLORS, onColorSelect: applyColor, currentColor: currentColor }), jsxRuntime.jsx(separator.Separator, {}), jsxRuntime.jsx(button.Button, { variant: "outline", size: "sm", onClick: removeBackground, className: "w-full", children: "Remove Background" })] }) })] }));
+    return (jsxRuntime.jsxs(popover.Popover, { open: open, onOpenChange: setOpen, children: [jsxRuntime.jsxs(tooltip.Tooltip, { delayDuration: 300, children: [jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: jsxRuntime.jsx(button.Button, { variant: "ghost", size: "icon", className: "h-8 w-8 rounded-md", "aria-label": "Background color", children: currentColor ? (jsxRuntime.jsx("span", { className: "size-4 rounded-[4px] border border-border/90", style: { backgroundColor: currentColor }, "aria-hidden": true })) : (jsxRuntime.jsx(paintBucket.default, { className: "size-4" })) }) }) }), jsxRuntime.jsx(tooltip.TooltipContent, { children: "Background color" })] }), jsxRuntime.jsx(popover.PopoverContent, { className: "w-[248px] p-3", align: "start", children: jsxRuntime.jsxs("div", { className: "space-y-3", children: [jsxRuntime.jsx("p", { className: "text-xs font-medium text-muted-foreground", children: "Background color" }), jsxRuntime.jsx(colorSwatch.ColorGrid, { colors: colorConstants.UNIFIED_BACKGROUND_COLORS, onColorSelect: applyColor, currentColor: currentColor, columns: 5, size: "md" }), jsxRuntime.jsx(separator.Separator, {}), jsxRuntime.jsx(button.Button, { variant: "outline", size: "sm", onClick: removeBackground, className: "w-full", children: "Reset background color" })] }) })] }));
 }
 
 exports.BackgroundColorPicker = BackgroundColorPicker;

package/dist/cjs/components/ui/rich-editor/toolbar/color-constants.js

@@ -1,190 +1,68 @@
 'use strict';
 
 /**
- * Grayscale colors from black to white
+ * Compact neutral text colors.
  */
-const GRAYSCALE_COLORS = [
-    { value: "#000000", label: "Black", className: "bg-black" },
-    { value: "#404040", label: "Gray 700", className: "bg-gray-700" },
-    { value: "#737373", label: "Gray 500", className: "bg-gray-500" },
-    { value: "#a3a3a3", label: "Gray 400", className: "bg-gray-400" },
-    { value: "#d4d4d4", label: "Gray 300", className: "bg-gray-300" },
-    { value: "#e5e5e5", label: "Gray 200", className: "bg-gray-200" },
-    { value: "#f5f5f5", label: "Gray 100", className: "bg-gray-100" },
-    { value: "#ffffff", label: "White", className: "bg-white border-gray-300" },
+const TEXT_GRAYSCALE_COLORS = [
+    { value: "#181818", label: "Black 1" },
+    { value: "#666666", label: "Black 2" },
+    { value: "#BBBBBB", label: "Black 3" },
+    { value: "#EBEBEC", label: "Black 4" },
+    { value: "#F8F8F8", label: "Black 5" },
+    { value: "#FFFFFF", label: "White" },
 ];
 /**
- * Tailwind color palette - organized by lightness (rows) and hue (columns)
- * 16 hues × 8 rows (200, 300, 400, 500, 600, 700, 800, 900)
- * Hues: Red, Orange, Amber, Yellow, Lime, Green, Emerald, Teal, Cyan, Sky, Blue, Indigo, Violet, Purple, Fuchsia, Pink
+ * Curated text colors with fewer, better-looking options.
+ * 6 hues x 3 steps to keep the palette expressive but compact.
  */
-const TAILWIND_COLORS = [
-    // Row 1: Shade 200 (lightest)
-    { value: "#fecaca", label: "Red 200", className: "bg-red-200" },
-    { value: "#fed7aa", label: "Orange 200", className: "bg-orange-200" },
-    { value: "#fde68a", label: "Amber 200", className: "bg-amber-200" },
-    { value: "#fef08a", label: "Yellow 200", className: "bg-yellow-200" },
-    { value: "#d9f99d", label: "Lime 200", className: "bg-lime-200" },
-    { value: "#bbf7d0", label: "Green 200", className: "bg-green-200" },
-    { value: "#a7f3d0", label: "Emerald 200", className: "bg-emerald-200" },
-    { value: "#99f6e4", label: "Teal 200", className: "bg-teal-200" },
-    { value: "#a5f3fc", label: "Cyan 200", className: "bg-cyan-200" },
-    { value: "#bae6fd", label: "Sky 200", className: "bg-sky-200" },
-    { value: "#bfdbfe", label: "Blue 200", className: "bg-blue-200" },
-    { value: "#c7d2fe", label: "Indigo 200", className: "bg-indigo-200" },
-    { value: "#ddd6fe", label: "Violet 200", className: "bg-violet-200" },
-    { value: "#e9d5ff", label: "Purple 200", className: "bg-purple-200" },
-    { value: "#f5d0fe", label: "Fuchsia 200", className: "bg-fuchsia-200" },
-    { value: "#fbcfe8", label: "Pink 200", className: "bg-pink-200" },
-    // Row 2: Shade 300
-    { value: "#fca5a1", label: "Red 300", className: "bg-red-300" },
-    { value: "#fdba74", label: "Orange 300", className: "bg-orange-300" },
-    { value: "#fcd34d", label: "Amber 300", className: "bg-amber-300" },
-    { value: "#fde047", label: "Yellow 300", className: "bg-yellow-300" },
-    { value: "#bef264", label: "Lime 300", className: "bg-lime-300" },
-    { value: "#86efac", label: "Green 300", className: "bg-green-300" },
-    { value: "#6ee7b7", label: "Emerald 300", className: "bg-emerald-300" },
-    { value: "#5eead4", label: "Teal 300", className: "bg-teal-300" },
-    { value: "#67e8f9", label: "Cyan 300", className: "bg-cyan-300" },
-    { value: "#7dd3fc", label: "Sky 300", className: "bg-sky-300" },
-    { value: "#93c5fd", label: "Blue 300", className: "bg-blue-300" },
-    { value: "#a5b4fc", label: "Indigo 300", className: "bg-indigo-300" },
-    { value: "#c4b5fd", label: "Violet 300", className: "bg-violet-300" },
-    { value: "#d8b4fe", label: "Purple 300", className: "bg-purple-300" },
-    { value: "#f0abfc", label: "Fuchsia 300", className: "bg-fuchsia-300" },
-    { value: "#f9a8d4", label: "Pink 300", className: "bg-pink-300" },
-    // Row 3: Shade 400
-    { value: "#f87171", label: "Red 400", className: "bg-red-400" },
-    { value: "#fb923c", label: "Orange 400", className: "bg-orange-400" },
-    { value: "#fbbf24", label: "Amber 400", className: "bg-amber-400" },
-    { value: "#facc15", label: "Yellow 400", className: "bg-yellow-400" },
-    { value: "#a3e635", label: "Lime 400", className: "bg-lime-400" },
-    { value: "#4ade80", label: "Green 400", className: "bg-green-400" },
-    { value: "#34d399", label: "Emerald 400", className: "bg-emerald-400" },
-    { value: "#2dd4bf", label: "Teal 400", className: "bg-teal-400" },
-    { value: "#22d3ee", label: "Cyan 400", className: "bg-cyan-400" },
-    { value: "#38bdf8", label: "Sky 400", className: "bg-sky-400" },
-    { value: "#60a5fa", label: "Blue 400", className: "bg-blue-400" },
-    { value: "#818cf8", label: "Indigo 400", className: "bg-indigo-400" },
-    { value: "#a78bfa", label: "Violet 400", className: "bg-violet-400" },
-    { value: "#c084fc", label: "Purple 400", className: "bg-purple-400" },
-    { value: "#e879f9", label: "Fuchsia 400", className: "bg-fuchsia-400" },
-    { value: "#f472b6", label: "Pink 400", className: "bg-pink-400" },
-    // Row 4: Shade 500
-    { value: "#ef4444", label: "Red 500", className: "bg-red-500" },
-    { value: "#f97316", label: "Orange 500", className: "bg-orange-500" },
-    { value: "#f59e0b", label: "Amber 500", className: "bg-amber-500" },
-    { value: "#eab308", label: "Yellow 500", className: "bg-yellow-500" },
-    { value: "#84cc16", label: "Lime 500", className: "bg-lime-500" },
-    { value: "#22c55e", label: "Green 500", className: "bg-green-500" },
-    { value: "#10b981", label: "Emerald 500", className: "bg-emerald-500" },
-    { value: "#14b8a6", label: "Teal 500", className: "bg-teal-500" },
-    { value: "#06b6d4", label: "Cyan 500", className: "bg-cyan-500" },
-    { value: "#0ea5e9", label: "Sky 500", className: "bg-sky-500" },
-    { value: "#3b82f6", label: "Blue 500", className: "bg-blue-500" },
-    { value: "#6366f1", label: "Indigo 500", className: "bg-indigo-500" },
-    { value: "#8b5cf6", label: "Violet 500", className: "bg-violet-500" },
-    { value: "#a855f7", label: "Purple 500", className: "bg-purple-500" },
-    { value: "#d946ef", label: "Fuchsia 500", className: "bg-fuchsia-500" },
-    { value: "#ec4899", label: "Pink 500", className: "bg-pink-500" },
-    // Row 5: Shade 600
-    { value: "#dc2626", label: "Red 600", className: "bg-red-600" },
-    { value: "#ea580c", label: "Orange 600", className: "bg-orange-600" },
-    { value: "#d97706", label: "Amber 600", className: "bg-amber-600" },
-    { value: "#ca8a04", label: "Yellow 600", className: "bg-yellow-600" },
-    { value: "#65a30d", label: "Lime 600", className: "bg-lime-600" },
-    { value: "#16a34a", label: "Green 600", className: "bg-green-600" },
-    { value: "#059669", label: "Emerald 600", className: "bg-emerald-600" },
-    { value: "#0d9488", label: "Teal 600", className: "bg-teal-600" },
-    { value: "#0891b2", label: "Cyan 600", className: "bg-cyan-600" },
-    { value: "#0284c7", label: "Sky 600", className: "bg-sky-600" },
-    { value: "#2563eb", label: "Blue 600", className: "bg-blue-600" },
-    { value: "#4f46e5", label: "Indigo 600", className: "bg-indigo-600" },
-    { value: "#7c3aed", label: "Violet 600", className: "bg-violet-600" },
-    { value: "#9333ea", label: "Purple 600", className: "bg-purple-600" },
-    { value: "#c026d3", label: "Fuchsia 600", className: "bg-fuchsia-600" },
-    { value: "#db2777", label: "Pink 600", className: "bg-pink-600" },
-    // Row 6: Shade 700
-    { value: "#b91c1c", label: "Red 700", className: "bg-red-700" },
-    { value: "#c2410c", label: "Orange 700", className: "bg-orange-700" },
-    { value: "#b45309", label: "Amber 700", className: "bg-amber-700" },
-    { value: "#a16207", label: "Yellow 700", className: "bg-yellow-700" },
-    { value: "#4d7c0f", label: "Lime 700", className: "bg-lime-700" },
-    { value: "#15803d", label: "Green 700", className: "bg-green-700" },
-    { value: "#047857", label: "Emerald 700", className: "bg-emerald-700" },
-    { value: "#0f766e", label: "Teal 700", className: "bg-teal-700" },
-    { value: "#0e7490", label: "Cyan 700", className: "bg-cyan-700" },
-    { value: "#0369a1", label: "Sky 700", className: "bg-sky-700" },
-    { value: "#1d4ed8", label: "Blue 700", className: "bg-blue-700" },
-    { value: "#4338ca", label: "Indigo 700", className: "bg-indigo-700" },
-    { value: "#6d28d9", label: "Violet 700", className: "bg-violet-700" },
-    { value: "#7e22ce", label: "Purple 700", className: "bg-purple-700" },
-    { value: "#a21caf", label: "Fuchsia 700", className: "bg-fuchsia-700" },
-    { value: "#be185d", label: "Pink 700", className: "bg-pink-700" },
-    // Row 7: Shade 800
-    { value: "#991b1b", label: "Red 800", className: "bg-red-800" },
-    { value: "#9a3412", label: "Orange 800", className: "bg-orange-800" },
-    { value: "#92400e", label: "Amber 800", className: "bg-amber-800" },
-    { value: "#854d0e", label: "Yellow 800", className: "bg-yellow-800" },
-    { value: "#3f6212", label: "Lime 800", className: "bg-lime-800" },
-    { value: "#166534", label: "Green 800", className: "bg-green-800" },
-    { value: "#065f46", label: "Emerald 800", className: "bg-emerald-800" },
-    { value: "#115e59", label: "Teal 800", className: "bg-teal-800" },
-    { value: "#155e75", label: "Cyan 800", className: "bg-cyan-800" },
-    { value: "#075985", label: "Sky 800", className: "bg-sky-800" },
-    { value: "#1e40af", label: "Blue 800", className: "bg-blue-800" },
-    { value: "#3730a3", label: "Indigo 800", className: "bg-indigo-800" },
-    { value: "#5b21b6", label: "Violet 800", className: "bg-violet-800" },
-    { value: "#6b21a8", label: "Purple 800", className: "bg-purple-800" },
-    { value: "#86198f", label: "Fuchsia 800", className: "bg-fuchsia-800" },
-    { value: "#9f1239", label: "Pink 800", className: "bg-pink-800" },
-    // Row 8: Shade 900 (darkest)
-    { value: "#7f1d1d", label: "Red 900", className: "bg-red-900" },
-    { value: "#7c2d12", label: "Orange 900", className: "bg-orange-900" },
-    { value: "#78350f", label: "Amber 900", className: "bg-amber-900" },
-    { value: "#713f12", label: "Yellow 900", className: "bg-yellow-900" },
-    { value: "#365314", label: "Lime 900", className: "bg-lime-900" },
-    { value: "#14532d", label: "Green 900", className: "bg-green-900" },
-    { value: "#064e3b", label: "Emerald 900", className: "bg-emerald-900" },
-    { value: "#134e4a", label: "Teal 900", className: "bg-teal-900" },
-    { value: "#164e63", label: "Cyan 900", className: "bg-cyan-900" },
-    { value: "#0c4a6e", label: "Sky 900", className: "bg-sky-900" },
-    { value: "#1e3a8a", label: "Blue 900", className: "bg-blue-900" },
-    { value: "#312e81", label: "Indigo 900", className: "bg-indigo-900" },
-    { value: "#4c1d95", label: "Violet 900", className: "bg-violet-900" },
-    { value: "#581c87", label: "Purple 900", className: "bg-purple-900" },
-    { value: "#701a75", label: "Fuchsia 900", className: "bg-fuchsia-900" },
-    { value: "#831843", label: "Pink 900", className: "bg-pink-900" },
+const TEXT_COLORS = [
+    { value: "#C5A4FC", label: "Purple 1" },
+    { value: "#A4BEFE", label: "Blue 1" },
+    { value: "#81EDF4", label: "Cyan 1" },
+    { value: "#67EF96", label: "Green 1" },
+    { value: "#FCDC84", label: "Amber 1" },
+    { value: "#FBB2A4", label: "Coral 1" },
+    { value: "#9468F8", label: "Purple 2" },
+    { value: "#688CFD", label: "Blue 2" },
+    { value: "#30B8DB", label: "Cyan 2" },
+    { value: "#0BCB74", label: "Green 2" },
+    { value: "#F8B633", label: "Amber 2" },
+    { value: "#F46768", label: "Coral 2" },
+    { value: "#5334B2", label: "Purple 3" },
+    { value: "#344DB6", label: "Blue 3" },
+    { value: "#186E9D", label: "Cyan 3" },
+    { value: "#05926E", label: "Green 3" },
+    { value: "#B27419", label: "Amber 3" },
+    { value: "#AF334A", label: "Coral 3" },
 ];
 /**
- * Theme-aware colors that use CSS variables
+ * Unified subtle background colors for text highlights and table cells.
+ * Inspired by Notion-like muted, pre-curated choices.
  */
-const THEME_COLORS = [
-    { value: "var(--primary)", label: "Primary", className: "bg-primary" },
-    { value: "var(--secondary)", label: "Secondary", className: "bg-secondary" },
-    { value: "var(--accent)", label: "Accent", className: "bg-accent" },
-    { value: "var(--muted)", label: "Muted", className: "bg-muted" },
-    { value: "var(--destructive)", label: "Destructive", className: "bg-destructive" },
-    { value: "var(--foreground)", label: "Foreground", className: "bg-foreground" },
+const UNIFIED_BACKGROUND_COLORS = [
+    { name: "White", value: "#ffffff", label: "White" },
+    { name: "Gray", value: "#f0efed", label: "Gray" },
+    { name: "Brown", value: "#f5ede9", label: "Brown" },
+    { name: "Orange", value: "#fbebde", label: "Orange" },
+    { name: "Yellow", value: "#f9f3dc", label: "Yellow" },
+    { name: "Green", value: "#e8f1ec", label: "Green" },
+    { name: "Blue", value: "#e5f2fc", label: "Blue" },
+    { name: "Purple", value: "#f3ebf9", label: "Purple" },
+    { name: "Pink", value: "#fae9f1", label: "Pink" },
+    { name: "Rose", value: "#fce9e7", label: "Rose" },
 ];
 /**
- * Soft pastel colors suitable for text backgrounds/highlights
- * Inspired by Notion's highlight palette - minimal, subtle, and readable
- * Just 9 carefully selected colors for a clean UX
+ * Shared table menu options so table cell/row/column colors match text highlight colors.
  */
-const BACKGROUND_COLORS = [
-    { value: "#fef2f2", label: "Red", className: "bg-red-50" },
-    { value: "#fff7ed", label: "Orange", className: "bg-orange-50" },
-    { value: "#fefce8", label: "Yellow", className: "bg-yellow-50" },
-    { value: "#f0fdf4", label: "Green", className: "bg-green-50" },
-    { value: "#ecfeff", label: "Cyan", className: "bg-cyan-50" },
-    { value: "#eff6ff", label: "Blue", className: "bg-blue-50" },
-    { value: "#f5f3ff", label: "Violet", className: "bg-violet-50" },
-    { value: "#fdf4ff", label: "Purple", className: "bg-purple-50" },
-    { value: "#fdf2f8", label: "Pink", className: "bg-pink-50" },
+const TABLE_BACKGROUND_OPTIONS = [
+    { name: "Transparent", value: null },
+    ...UNIFIED_BACKGROUND_COLORS.map((color) => ({
+        name: color.name,
+        value: color.value,
+    })),
 ];
 
-exports.BACKGROUND_COLORS = BACKGROUND_COLORS;
-exports.GRAYSCALE_COLORS = GRAYSCALE_COLORS;
-exports.TAILWIND_COLORS = TAILWIND_COLORS;
-exports.THEME_COLORS = THEME_COLORS;
+exports.TABLE_BACKGROUND_OPTIONS = TABLE_BACKGROUND_OPTIONS;
+exports.TEXT_COLORS = TEXT_COLORS;
+exports.TEXT_GRAYSCALE_COLORS = TEXT_GRAYSCALE_COLORS;
+exports.UNIFIED_BACKGROUND_COLORS = UNIFIED_BACKGROUND_COLORS;