art-bd-ui 1.0.43 → 1.0.44

package/dist/cjs/components/popovers/popover/popover.js

@@ -45,8 +45,28 @@ const PopoverTrigger = (_a) => {
     return jsxRuntime.jsx(index.Trigger, Object.assign({ "data-slot": "popover-trigger" }, props));
 };
 const PopoverContent = (_a) => {
-    var { className, align = "center", arrow = false, withClose = false, sideOffset = 4, size, matchTriggerWidth = false, children } = _a, props = tslib_es6.__rest(_a, ["className", "align", "arrow", "withClose", "sideOffset", "size", "matchTriggerWidth", "children"]);
-    return (jsxRuntime.jsx(index.Portal, { children: jsxRuntime.jsxs(index.Content, Object.assign({ "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: utils.cn(popoverContentVariants({ size, matchTriggerWidth }), className) }, props, { children: [children, withClose && (jsxRuntime.jsx(index.Close, { asChild: true, children: jsxRuntime.jsx(iconClose.IconClose, {}) })), arrow && jsxRuntime.jsx(index.Arrow, { className: "fill-popover" })] })) }));
+    var { className, align = "center", arrow = false, withClose = false, sideOffset = 4, size, matchTriggerWidth = false, persistent = false, children, onPointerDownOutside, onFocusOutside } = _a, props = tslib_es6.__rest(_a, ["className", "align", "arrow", "withClose", "sideOffset", "size", "matchTriggerWidth", "persistent", "children", "onPointerDownOutside", "onFocusOutside"]);
+    const handlePointerDownOutside = (event) => {
+        if (persistent) {
+            const target = event.target;
+            const currentTarget = event.currentTarget;
+            if (target && currentTarget.contains(target)) {
+                event.preventDefault();
+            }
+        }
+        onPointerDownOutside === null || onPointerDownOutside === void 0 ? void 0 : onPointerDownOutside(event);
+    };
+    const handleFocusOutside = (event) => {
+        if (persistent) {
+            const target = event.target;
+            const currentTarget = event.currentTarget;
+            if (target && currentTarget.contains(target)) {
+                event.preventDefault();
+            }
+        }
+        onFocusOutside === null || onFocusOutside === void 0 ? void 0 : onFocusOutside(event);
+    };
+    return (jsxRuntime.jsx(index.Portal, { children: jsxRuntime.jsxs(index.Content, Object.assign({ "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: utils.cn(popoverContentVariants({ size, matchTriggerWidth }), className), onPointerDownOutside: handlePointerDownOutside, onFocusOutside: handleFocusOutside }, props, { children: [children, withClose && (jsxRuntime.jsx(index.Close, { asChild: true, children: jsxRuntime.jsx(iconClose.IconClose, {}) })), arrow && jsxRuntime.jsx(index.Arrow, { className: "fill-popover" })] })) }));
 };
 const PopoverAnchor = (_a) => {
     var props = tslib_es6.__rest(_a, []);

package/dist/cjs/components/quiz/runner/question/question.js

@@ -45,6 +45,8 @@ require('../../../forms/dropzone/dropzone.js');
 require('../../../forms/input-number/input-number.js');
 require('../../../forms/label/label.js');
 require('../../../forms/switch/switch.js');
+require('../../../ui/rich-editor/extensions/node-interactions/plugin.js');
+require('../../../ui/rich-editor/extensions/node-interactions/extension.js');
 require('../../../ui/rich-editor/bubble-menus/text-selection-bubble-menu.js');
 require('../../../../node_modules/@tiptap/extension-drag-handle/dist/index.js');
 require('../../../ui/rich-editor/extensions/slash/slash.js');

package/dist/cjs/components/ui/date-pickers/date-input/date-input.js

@@ -43,7 +43,7 @@ function parseDateWithLocale(text, locale) {
     return parsed || undefined;
 }
 const DateInput = React.forwardRef((_a, ref) => {
-    var { value, onChange, onMonthChange, disabled = false, locale = "en", placeholder = locale === "en" ? "Select date (e.g. 9/1/2025)" : "Введіть Дату (напр. 01.09.2025)", className } = _a, rest = tslib_es6.__rest(_a, ["value", "onChange", "onMonthChange", "disabled", "locale", "placeholder", "className"]);
+    var { value, onChange, onMonthChange, disabled = false, locale = "en", placeholder = locale === "en" ? "Select date (e.g. 9/1/2025)" : "Введіть Дату (напр. 01.09.2025)", className, calendarProps } = _a, rest = tslib_es6.__rest(_a, ["value", "onChange", "onMonthChange", "disabled", "locale", "placeholder", "className", "calendarProps"]);
     const [open, setOpen] = React.useState(false);
     const [inputValue, setInputValue] = React.useState(value ? formatDate(value, locale) : "");
     const [month, setMonth] = React.useState(value !== null && value !== void 0 ? value : new Date());
@@ -103,13 +103,13 @@ const DateInput = React.forwardRef((_a, ref) => {
                     if (e.target instanceof HTMLElement && e.target.closest("input")) {
                         e.preventDefault();
                     }
-                }, children: jsxRuntime.jsx(calendar.Calendar, { mode: "single", selected: value, month: month, onSelect: (date) => {
+                }, children: jsxRuntime.jsx(calendar.Calendar, Object.assign({}, calendarProps, { mode: "single", selected: value, month: month, onSelect: (date) => {
                         onChange === null || onChange === void 0 ? void 0 : onChange(date);
                         if (date) {
                             setInputValue(formatDate(date, locale));
                         }
                         setOpen(false);
-                    }, onMonthChange: handleMonthChange, locale: getDateFnsLocale(locale), disabled: disabled }) })] }));
+                    }, onMonthChange: handleMonthChange, locale: getDateFnsLocale(locale), disabled: disabled })) })] }));
 });
 DateInput.displayName = "DateInput";
 

package/dist/cjs/components/ui/date-pickers/date-range-picker/date-range-picker.js

@@ -17,7 +17,7 @@ var enUS = require('../../../../node_modules/date-fns/locale/en-US.js');
 const setDefaultTime = (date) => new Date(date.setHours(0, 0, 0, 0));
 const getDate = (date) => date || setDefaultTime(new Date());
 const getDateFnsLocale = (locale) => (locale === "ua" ? uk.uk : enUS.enUS);
-const DateRangePicker = React.forwardRef(({ value: range, onChange, granularity = "day", hourCycle = 24, locale = "en", placeholder = "Select date range", className, numberOfMonths = 1, }, ref) => {
+const DateRangePicker = React.forwardRef(({ value: range, onChange, granularity = "day", hourCycle = 24, locale = "en", placeholder = "Select date range", className, numberOfMonths = 1, calendarProps, }, ref) => {
     const buttonRef = React.useRef(null);
     const [hoveredDate, setHoveredDate] = React.useState(null);
     const loc = getDateFnsLocale(locale);
@@ -31,7 +31,7 @@ const DateRangePicker = React.forwardRef(({ value: range, onChange, granularity
         value: range,
         focus: () => { var _a; return (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
     }), [range]);
-    return (jsxRuntime.jsxs(popover.Popover, { children: [jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: jsxRuntime.jsx(button.Button, { ref: buttonRef, variant: "outline", leftIcon: "calendar", className: utils.cn("w-full justify-start text-left font-normal", !(range === null || range === void 0 ? void 0 : range.from) && "text-muted-foreground", className), children: displayValue }) }), jsxRuntime.jsxs(popover.PopoverContent, { className: "w-auto p-0 relative", children: [jsxRuntime.jsx(calendar.Calendar, { mode: "range", selected: range, onSelect: onChange, numberOfMonths: numberOfMonths, locale: loc, required: true, onDayMouseEnter: setHoveredDate, onDayMouseLeave: () => setHoveredDate(null), modifiers: modifiers }), granularity !== "day" && (jsxRuntime.jsxs(flex.Flex, { direction: "col", gap: 4, className: "border-t border-border p-3", children: [jsxRuntime.jsxs(flex.Flex, { direction: "col", gap: 1, children: [jsxRuntime.jsx(text.Text, { children: "Start time" }), jsxRuntime.jsx(timePicker.TimePicker, { value: range === null || range === void 0 ? void 0 : range.from, onChange: (value) => {
+    return (jsxRuntime.jsxs(popover.Popover, { children: [jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: jsxRuntime.jsx(button.Button, { ref: buttonRef, variant: "outline", leftIcon: "calendar", className: utils.cn("w-full justify-start text-left font-normal", !(range === null || range === void 0 ? void 0 : range.from) && "text-muted-foreground", className), children: displayValue }) }), jsxRuntime.jsxs(popover.PopoverContent, { className: "w-auto p-0 relative", children: [jsxRuntime.jsx(calendar.Calendar, Object.assign({}, calendarProps, { mode: "range", selected: range, onSelect: onChange, numberOfMonths: numberOfMonths, locale: loc, required: true, onDayMouseEnter: setHoveredDate, onDayMouseLeave: () => setHoveredDate(null), modifiers: modifiers })), granularity !== "day" && (jsxRuntime.jsxs(flex.Flex, { direction: "col", gap: 4, className: "border-t border-border p-3", children: [jsxRuntime.jsxs(flex.Flex, { direction: "col", gap: 1, children: [jsxRuntime.jsx(text.Text, { children: "Start time" }), jsxRuntime.jsx(timePicker.TimePicker, { value: range === null || range === void 0 ? void 0 : range.from, onChange: (value) => {
                                             if (value) {
                                                 onChange === null || onChange === void 0 ? void 0 : onChange({
                                                     from: value,

package/dist/cjs/components/ui/rich-editor/bubble-menus/box-bubble-menu.js

@@ -1,67 +1,50 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var index = require('../../../../node_modules/@tiptap/react/dist/index.js');
 var index$1 = require('../../../../node_modules/@tiptap/react/dist/menus/index.js');
 var index$2 = require('../../../../node_modules/prosemirror-state/dist/index.js');
 var shared = require('./shared.js');
-var utils = require('../extensions/box/utils.js');
-var colorSwatch = require('../toolbar/color-swatch.js');
-var colorConstants = require('../toolbar/color-constants.js');
+require('react');
+require('../../../../node_modules/tslib/tslib.es6.js');
 var button = require('../../../buttons/button/button.js');
-var popover = require('../../../popovers/popover/popover.js');
+require('../../../popovers/popover/popover.js');
 var separator = require('../../../utility/separator/separator.js');
 var tooltip = require('../../../popovers/tooltip/tooltip.js');
-var utils$1 = require('../../../../lib/utils.js');
-var square = require('../../../../node_modules/lucide-react/dist/esm/icons/square.js');
-var squareRoundCorner = require('../../../../node_modules/lucide-react/dist/esm/icons/square-round-corner.js');
-var circle = require('../../../../node_modules/lucide-react/dist/esm/icons/circle.js');
-var slidersVertical = require('../../../../node_modules/lucide-react/dist/esm/icons/sliders-vertical.js');
+require('../toolbar/color-constants.js');
+var stylePopover = require('./controls/style-popover.js');
+var spacingPopover = require('./controls/spacing-popover.js');
 var trash2 = require('../../../../node_modules/lucide-react/dist/esm/icons/trash-2.js');
 
-const SHADOW_LABELS = {
-    none: "None",
-    sm: "SM",
-    md: "MD",
-    lg: "LG",
-    xl: "XL",
-};
-const BORDER_STYLE_OPTIONS = ["none", "solid", "dashed", "dotted"];
 function BoxBubbleMenu({ editor }) {
-    var _a, _b, _c, _d, _e, _f;
-    const [borderPopoverOpen, setBorderPopoverOpen] = React.useState(false);
-    const [bgPopoverOpen, setBgPopoverOpen] = React.useState(false);
-    const [customRadiusOpen, setCustomRadiusOpen] = React.useState(false);
-    const [customPaddingOpen, setCustomPaddingOpen] = React.useState(false);
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const attrs = index.useEditorState({
         editor,
-        selector: ({ editor: e }) => {
-            if (!e.isActive("box"))
+        selector: ({ editor: currentEditor }) => {
+            if (!currentEditor.isActive("box"))
                 return null;
-            return e.getAttributes("box");
+            return currentEditor.getAttributes("box");
         },
     });
     if (!attrs)
         return null;
     const update = (patch) => editor.chain().focus().updateBoxAttrs(patch).run();
-    const activeShadow = Object.keys(utils.BOX_SHADOW_PRESETS).find((key) => utils.BOX_SHADOW_PRESETS[key] === attrs.boxShadow);
-    const activeRadius = Object.keys(utils.BOX_BORDER_RADIUS_PRESETS).find((key) => utils.BOX_BORDER_RADIUS_PRESETS[key] === attrs.borderRadius);
-    return (jsxRuntime.jsx(index$1.BubbleMenu, { editor: editor, pluginKey: shared.boxBubbleMenuPluginKey, shouldShow: ({ state, editor: bubbleEditor }) => {
+    return (jsxRuntime.jsx(index$1.BubbleMenu, { editor: editor, pluginKey: shared.boxBubbleMenuPluginKey, ref: (menuElement) => {
+            if (menuElement) {
+                menuElement.style.zIndex = "40";
+            }
+        }, shouldShow: ({ state, editor: bubbleEditor }) => {
             const { selection } = state;
             return bubbleEditor.isActive("box") && selection instanceof index$2.TextSelection && selection.empty;
         }, updateDelay: 0, getReferencedVirtualElement: () => {
             const { $from } = editor.state.selection;
-            for (let depth = $from.depth; depth > 0; depth--) {
+            for (let depth = $from.depth; depth > 0; depth -= 1) {
                 const node = $from.node(depth);
                 if (node.type.name === "box") {
-                    const pos = $from.before(depth);
-                    const dom = editor.view.nodeDOM(pos);
+                    const position = $from.before(depth);
+                    const dom = editor.view.nodeDOM(position);
                     if (dom instanceof HTMLElement) {
-                        return {
-                            contextElement: dom,
-                            getBoundingClientRect: () => dom.getBoundingClientRect(),
-                        };
+                        return { contextElement: dom, getBoundingClientRect: () => dom.getBoundingClientRect() };
                     }
                 }
             }
@@ -70,47 +53,8 @@ function BoxBubbleMenu({ editor }) {
             placement: "top-start",
             offset: 6,
             shift: { padding: 8 },
-            flip: {
-                fallbackPlacements: ["bottom-start", "top-end", "bottom-end"],
-            },
-        }, className: "relative z-30 rounded-xl border bg-popover p-1 shadow-md", children: jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-1", children: [jsxRuntime.jsxs(popover.Popover, { open: borderPopoverOpen, onOpenChange: setBorderPopoverOpen, 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, { type: "button", variant: "ghost", size: "icon-sm", className: "size-8", "aria-label": "Border", children: jsxRuntime.jsx("span", { className: "size-4 rounded-sm border-2", style: { borderColor: (_a = attrs.borderColor) !== null && _a !== void 0 ? _a : "currentColor" }, "aria-hidden": true }) }) }) }), jsxRuntime.jsx(tooltip.TooltipContent, { children: "Border" })] }), jsxRuntime.jsxs(popover.PopoverContent, { className: "w-56 p-3 space-y-3", align: "start", children: [jsxRuntime.jsx("p", { className: "text-xs font-medium text-muted-foreground", children: "Border color" }), jsxRuntime.jsx(colorSwatch.ColorGrid, { colors: colorConstants.UNIFIED_BACKGROUND_COLORS, onColorSelect: (color) => {
-                                        update({
-                                            borderColor: color,
-                                            borderStyle: attrs.borderStyle || "solid",
-                                            borderWidth: attrs.borderWidth || "1px",
-                                        });
-                                    }, currentColor: (_b = attrs.borderColor) !== null && _b !== void 0 ? _b : undefined, columns: 5, size: "sm" }), jsxRuntime.jsx(button.Button, { variant: "outline", size: "sm", className: "w-full", onClick: () => update({ borderColor: null, borderWidth: null, borderStyle: null }), children: "Remove border" }), jsxRuntime.jsx(separator.Separator, {}), jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [jsxRuntime.jsx("p", { className: "text-xs font-medium text-muted-foreground", children: "Border width" }), jsxRuntime.jsx("div", { className: "flex gap-1", children: ["1px", "2px", "3px", "4px"].map((w) => (jsxRuntime.jsx(button.Button, { type: "button", variant: attrs.borderWidth === w ? "default" : "outline", size: "sm", className: "h-7 flex-1 px-1 text-xs", onClick: () => update({
-                                                    borderWidth: w,
-                                                    borderStyle: attrs.borderStyle || "solid",
-                                                    borderColor: attrs.borderColor || "#e2e8f0",
-                                                }), children: w }, w))) })] }), jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [jsxRuntime.jsx("p", { className: "text-xs font-medium text-muted-foreground", children: "Border style" }), jsxRuntime.jsx("div", { className: "flex gap-1", children: BORDER_STYLE_OPTIONS.map((s) => (jsxRuntime.jsx(button.Button, { type: "button", variant: attrs.borderStyle === s ? "default" : "outline", size: "sm", className: "h-7 flex-1 px-1 text-xs capitalize", onClick: () => update({
-                                                    borderStyle: s,
-                                                    borderWidth: attrs.borderWidth || "1px",
-                                                    borderColor: attrs.borderColor || "#e2e8f0",
-                                                }), children: s }, s))) })] })] })] }), jsxRuntime.jsx(separator.Separator, { orientation: "vertical", className: "mx-0.5 h-5" }), jsxRuntime.jsxs(tooltip.Tooltip, { delayDuration: 300, children: [jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: jsxRuntime.jsx(button.Button, { type: "button", variant: activeRadius === "none" ? "secondary" : "ghost", size: "icon-sm", className: "size-8", onClick: () => update({ borderRadius: utils.BOX_BORDER_RADIUS_PRESETS.none }), "aria-label": "Square corners", children: jsxRuntime.jsx(square.default, { className: "size-3.5" }) }) }), jsxRuntime.jsx(tooltip.TooltipContent, { children: "Square corners" })] }), jsxRuntime.jsxs(tooltip.Tooltip, { delayDuration: 300, children: [jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: jsxRuntime.jsx(button.Button, { type: "button", variant: activeRadius === "rounded" ? "secondary" : "ghost", size: "icon-sm", className: "size-8", onClick: () => update({ borderRadius: utils.BOX_BORDER_RADIUS_PRESETS.rounded }), "aria-label": "Rounded corners", children: jsxRuntime.jsx(squareRoundCorner.default, { className: "size-3.5" }) }) }), jsxRuntime.jsx(tooltip.TooltipContent, { children: "Rounded corners (8px)" })] }), jsxRuntime.jsxs(tooltip.Tooltip, { delayDuration: 300, children: [jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: jsxRuntime.jsx(button.Button, { type: "button", variant: activeRadius === "pill" ? "secondary" : "ghost", size: "icon-sm", className: "size-8", onClick: () => update({ borderRadius: utils.BOX_BORDER_RADIUS_PRESETS.pill }), "aria-label": "Pill corners", children: jsxRuntime.jsx(circle.default, { className: "size-3.5" }) }) }), jsxRuntime.jsx(tooltip.TooltipContent, { children: "Pill corners (9999px)" })] }), jsxRuntime.jsxs(popover.Popover, { open: customRadiusOpen, onOpenChange: setCustomRadiusOpen, 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, { type: "button", variant: activeRadius === undefined && attrs.borderRadius ? "secondary" : "ghost", size: "icon-sm", className: "size-8", "aria-label": "Custom radius", children: jsxRuntime.jsx(slidersVertical.default, { className: "size-3.5" }) }) }) }), jsxRuntime.jsx(tooltip.TooltipContent, { children: "Custom radius" })] }), jsxRuntime.jsxs(popover.PopoverContent, { className: "w-44 p-3", align: "start", children: [jsxRuntime.jsx("p", { className: "mb-2 text-xs font-medium text-muted-foreground", children: "Border radius (CSS value)" }), jsxRuntime.jsx("input", { type: "text", className: "w-full rounded-md border border-input bg-background px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-ring", placeholder: "e.g. 12px or 4px 8px", defaultValue: (_c = attrs.borderRadius) !== null && _c !== void 0 ? _c : "", onKeyDown: (e) => {
-                                        if (e.key === "Enter") {
-                                            update({ borderRadius: e.currentTarget.value || null });
-                                            setCustomRadiusOpen(false);
-                                        }
-                                    }, onBlur: (e) => {
-                                        update({ borderRadius: e.currentTarget.value || null });
-                                    } })] })] }), jsxRuntime.jsx(separator.Separator, { orientation: "vertical", className: "mx-0.5 h-5" }), Object.keys(utils.BOX_SHADOW_PRESETS).map((key) => (jsxRuntime.jsxs(tooltip.Tooltip, { delayDuration: 300, children: [jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: jsxRuntime.jsx(button.Button, { type: "button", variant: activeShadow === key ? "secondary" : "ghost", size: "sm", className: "h-8 px-2 text-xs", onClick: () => update({ boxShadow: utils.BOX_SHADOW_PRESETS[key] }), "aria-label": `Shadow ${key}`, children: SHADOW_LABELS[key] }) }), jsxRuntime.jsx(tooltip.TooltipContent, { children: key === "none" ? "No shadow" : `Shadow ${key.toUpperCase()}` })] }, key))), jsxRuntime.jsx(separator.Separator, { orientation: "vertical", className: "mx-0.5 h-5" }), jsxRuntime.jsxs(popover.Popover, { open: customPaddingOpen, onOpenChange: setCustomPaddingOpen, 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, { type: "button", variant: "ghost", size: "sm", className: "h-8 px-2 text-xs font-mono", "aria-label": "Padding", children: (_d = attrs.padding) !== null && _d !== void 0 ? _d : "16px" }) }) }), jsxRuntime.jsx(tooltip.TooltipContent, { children: "Padding" })] }), jsxRuntime.jsxs(popover.PopoverContent, { className: "w-44 p-3", align: "start", children: [jsxRuntime.jsx("p", { className: "mb-2 text-xs font-medium text-muted-foreground", children: "Padding (CSS value)" }), jsxRuntime.jsx("input", { type: "text", className: "w-full rounded-md border border-input bg-background px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-ring", placeholder: "e.g. 16px or 8px 16px", defaultValue: (_e = attrs.padding) !== null && _e !== void 0 ? _e : "16px", onKeyDown: (e) => {
-                                        if (e.key === "Enter") {
-                                            update({ padding: e.currentTarget.value || null });
-                                            setCustomPaddingOpen(false);
-                                        }
-                                    }, onBlur: (e) => {
-                                        update({ padding: e.currentTarget.value || null });
-                                    } }), jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap gap-1", children: ["0px", "8px", "16px", "24px", "32px"].map((p) => (jsxRuntime.jsx(button.Button, { type: "button", variant: attrs.padding === p ? "default" : "outline", size: "sm", className: "h-6 px-1.5 text-xs", onClick: () => {
-                                            update({ padding: p });
-                                            setCustomPaddingOpen(false);
-                                        }, children: p }, p))) })] })] }), jsxRuntime.jsx(separator.Separator, { orientation: "vertical", className: "mx-0.5 h-5" }), jsxRuntime.jsxs(popover.Popover, { open: bgPopoverOpen, onOpenChange: setBgPopoverOpen, 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, { type: "button", variant: "ghost", size: "icon-sm", className: "size-8", "aria-label": "Background color", children: jsxRuntime.jsx("span", { className: utils$1.cn("size-4 rounded-sm border border-border/90", !attrs.backgroundColor && "bg-muted"), style: attrs.backgroundColor ? { backgroundColor: attrs.backgroundColor } : undefined, "aria-hidden": true }) }) }) }), jsxRuntime.jsx(tooltip.TooltipContent, { children: "Background color" })] }), jsxRuntime.jsxs(popover.PopoverContent, { className: "w-[248px] p-3 space-y-3", align: "start", 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: (color) => {
-                                        update({ backgroundColor: color });
-                                        setBgPopoverOpen(false);
-                                    }, currentColor: (_f = attrs.backgroundColor) !== null && _f !== void 0 ? _f : undefined, columns: 5, size: "md" }), jsxRuntime.jsx(separator.Separator, {}), jsxRuntime.jsx(button.Button, { variant: "outline", size: "sm", className: "w-full", onClick: () => {
-                                        update({ backgroundColor: null });
-                                        setBgPopoverOpen(false);
-                                    }, children: "Remove background" })] })] }), jsxRuntime.jsx(separator.Separator, { orientation: "vertical", className: "mx-0.5 h-5" }), jsxRuntime.jsxs(tooltip.Tooltip, { delayDuration: 300, children: [jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: jsxRuntime.jsx(button.Button, { type: "button", variant: "ghost", size: "icon-sm", className: "size-8 text-destructive hover:text-destructive", onClick: () => editor.chain().focus().removeBox().run(), "aria-label": "Remove box", children: jsxRuntime.jsx(trash2.default, { className: "size-4" }) }) }), jsxRuntime.jsx(tooltip.TooltipContent, { children: "Remove box" })] })] }) }));
+            flip: { fallbackPlacements: ["bottom-start", "top-end", "bottom-end"] },
+        }, className: "relative z-30 rounded-2xl border bg-popover/95 p-1.5 shadow-lg backdrop-blur-sm", children: jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-1", children: [jsxRuntime.jsx(spacingPopover.SpacingPopover, { padding: (_a = attrs.padding) !== null && _a !== void 0 ? _a : null, paddingTop: (_b = attrs.paddingTop) !== null && _b !== void 0 ? _b : null, paddingRight: (_c = attrs.paddingRight) !== null && _c !== void 0 ? _c : null, paddingBottom: (_d = attrs.paddingBottom) !== null && _d !== void 0 ? _d : null, paddingLeft: (_e = attrs.paddingLeft) !== null && _e !== void 0 ? _e : null, defaultPadding: "16px", onChange: (patch) => update(patch) }), jsxRuntime.jsx(stylePopover.StylePopover, { borderColor: (_f = attrs.borderColor) !== null && _f !== void 0 ? _f : null, borderWidth: (_g = attrs.borderWidth) !== null && _g !== void 0 ? _g : null, borderStyle: (_h = attrs.borderStyle) !== null && _h !== void 0 ? _h : null, borderRadius: (_j = attrs.borderRadius) !== null && _j !== void 0 ? _j : null, boxShadow: (_k = attrs.boxShadow) !== null && _k !== void 0 ? _k : null, backgroundColor: (_l = attrs.backgroundColor) !== null && _l !== void 0 ? _l : null, onChange: (patch) => update(patch) }), jsxRuntime.jsx(separator.Separator, { orientation: "vertical", className: "mx-0.5 h-6" }), jsxRuntime.jsxs(tooltip.Tooltip, { delayDuration: 300, children: [jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: jsxRuntime.jsx(button.Button, { type: "button", variant: "ghost", size: "icon-sm", className: "size-8 rounded-lg text-destructive hover:text-destructive", onClick: () => editor.chain().focus().removeBox().run(), "aria-label": "Remove box", children: jsxRuntime.jsx(trash2.default, { className: "size-4" }) }) }), jsxRuntime.jsx(tooltip.TooltipContent, { children: "Remove box" })] })] }) }));
 }
 
 exports.BoxBubbleMenu = BoxBubbleMenu;

package/dist/cjs/components/ui/rich-editor/bubble-menus/columns-bubble-menu.js

@@ -30,7 +30,6 @@ function ColumnsBubbleMenu({ editor }) {
     return (jsxRuntime.jsx(index$2.BubbleMenu, { editor: editor, pluginKey: shared.columnsBubbleMenuPluginKey, shouldShow: ({ state, editor: bubbleEditor }) => {
             const { selection } = state;
             return (bubbleEditor.isActive("column") &&
-                !bubbleEditor.isActive("box") &&
                 !bubbleEditor.isActive("layout") &&
                 selection instanceof index$3.TextSelection &&
                 selection.empty);

package/dist/cjs/components/ui/rich-editor/bubble-menus/controls/align-dropdown.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var glyphs = require('./glyphs.js');
+var shared = require('./shared.js');
+var popover = require('../../../../popovers/popover/popover.js');
+var separator = require('../../../../utility/separator/separator.js');
+var tooltip = require('../../../../popovers/tooltip/tooltip.js');
+
+const JUSTIFY_OPTIONS = [
+    { value: "flex-start", label: "Start", mode: "start" },
+    { value: "center", label: "Center", mode: "center" },
+    { value: "flex-end", label: "End", mode: "end" },
+    { value: "space-between", label: "Space between", mode: "space-between" },
+    { value: "space-around", label: "Space around", mode: "space-around" },
+];
+const ALIGN_OPTIONS = [
+    { value: "flex-start", label: "Start", mode: "start" },
+    { value: "center", label: "Center", mode: "center" },
+    { value: "flex-end", label: "End", mode: "end" },
+    { value: "stretch", label: "Stretch", mode: "stretch" },
+];
+function AlignDropdown({ justifyContent, alignItems, flexDirection = "row", isGrid = false, onChange, }) {
+    const [open, setOpen] = React.useState(false);
+    const mainAxis = flexDirection === "column" ? "vertical" : "horizontal";
+    const crossAxis = flexDirection === "column" ? "horizontal" : "vertical";
+    const isActive = Boolean(justifyContent || alignItems);
+    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(shared.BubbleIconTriggerButton, { active: isActive, "aria-label": "Alignment", children: jsxRuntime.jsx(glyphs.AlignmentTriggerGlyph, {}) }) }) }), jsxRuntime.jsx(tooltip.TooltipContent, { children: "Alignment" })] }), jsxRuntime.jsxs(popover.PopoverContent, { className: "w-[292px] space-y-3 p-4", align: "start", children: [!isGrid ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "space-y-2", children: [jsxRuntime.jsx("p", { className: "text-xs font-medium text-muted-foreground", children: "Main axis" }), jsxRuntime.jsx("div", { className: "grid grid-cols-5 gap-1.5", children: JUSTIFY_OPTIONS.map(({ value, label, mode }) => (jsxRuntime.jsx(shared.PreviewButton, { selected: justifyContent === value, className: "size-10 p-0", onClick: () => onChange({ justifyContent: value }), "aria-label": `Main axis ${label}`, title: `Main axis ${label}`, children: jsxRuntime.jsx(glyphs.AlignmentPreviewGlyph, { axis: mainAxis, mode: mode }) }, value))) })] }), jsxRuntime.jsx(separator.Separator, {})] })) : null, jsxRuntime.jsxs("div", { className: "space-y-2", children: [jsxRuntime.jsx("p", { className: "text-xs font-medium text-muted-foreground", children: isGrid ? "Item alignment" : "Cross axis" }), jsxRuntime.jsx("div", { className: "grid grid-cols-4 gap-1.5", children: ALIGN_OPTIONS.map(({ value, label, mode }) => (jsxRuntime.jsx(shared.PreviewButton, { selected: alignItems === value, className: "size-10 p-0", onClick: () => onChange({ alignItems: value }), "aria-label": `${isGrid ? "Item" : "Cross axis"} ${label}`, title: `${isGrid ? "Item" : "Cross axis"} ${label}`, children: jsxRuntime.jsx(glyphs.AlignmentPreviewGlyph, { axis: crossAxis, mode: mode }) }, value))) })] })] })] }));
+}
+
+exports.AlignDropdown = AlignDropdown;

package/dist/cjs/components/ui/rich-editor/bubble-menus/controls/bg-shadow-mini-popover.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var utils = require('../../extensions/box/utils.js');
+var colorSwatch = require('../../toolbar/color-swatch.js');
+var colorConstants = require('../../toolbar/color-constants.js');
+var glyphs = require('./glyphs.js');
+var shared = require('./shared.js');
+var stylePopover = require('./style-popover.js');
+var button = require('../../../../buttons/button/button.js');
+var separator = require('../../../../utility/separator/separator.js');
+
+function BgShadowMiniPopover({ backgroundColor, boxShadow, mixedFields, onChange }) {
+    const activeShadowPreset = (mixedFields === null || mixedFields === void 0 ? void 0 : mixedFields.boxShadow)
+        ? undefined
+        : Object.keys(utils.BOX_SHADOW_PRESETS).find((key) => utils.BOX_SHADOW_PRESETS[key] === boxShadow);
+    return (jsxRuntime.jsxs("div", { className: "space-y-3 p-3", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntime.jsx("p", { className: "text-xs font-medium text-muted-foreground", children: "Background" }), jsxRuntime.jsx(button.Button, { type: "button", variant: "ghost", size: "sm", className: "h-6 px-2 text-xs text-muted-foreground", onClick: () => onChange({ backgroundColor: null, boxShadow: null }), children: "Reset" })] }), jsxRuntime.jsx(colorSwatch.ColorGrid, { colors: colorConstants.UNIFIED_BACKGROUND_COLORS, currentColor: (mixedFields === null || mixedFields === void 0 ? void 0 : mixedFields.backgroundColor) ? undefined : (backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : undefined), onColorSelect: (color) => onChange({ backgroundColor: color }), columns: 5, size: "sm" }), jsxRuntime.jsx(separator.Separator, {}), jsxRuntime.jsxs("div", { className: "space-y-2", children: [jsxRuntime.jsx("p", { className: "text-xs font-medium text-muted-foreground", children: "Shadow" }), jsxRuntime.jsx("div", { className: "grid grid-cols-5 gap-1.5", children: stylePopover.SHADOW_OPTIONS.map(({ key, label }) => (jsxRuntime.jsx(shared.PreviewButton, { selected: activeShadowPreset === key, className: "px-0.5 py-1", onClick: () => onChange({ boxShadow: utils.BOX_SHADOW_PRESETS[key] }), "aria-label": label, title: label, children: jsxRuntime.jsx(glyphs.ShadowPreviewGlyph, { preset: key, className: "h-6 w-6" }) }, key))) })] })] }));
+}
+
+exports.BgShadowMiniPopover = BgShadowMiniPopover;

package/dist/cjs/components/ui/rich-editor/bubble-menus/controls/border-mini-popover.js

@@ -0,0 +1,137 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var utils = require('../../extensions/box/utils.js');
+var colorSwatch = require('../../toolbar/color-swatch.js');
+var colorConstants = require('../../toolbar/color-constants.js');
+var glyphs = require('./glyphs.js');
+var shared = require('./shared.js');
+var stylePopover = require('./style-popover.js');
+var uniformPerSideToggle = require('./uniform-per-side-toggle.js');
+var button = require('../../../../buttons/button/button.js');
+var separator = require('../../../../utility/separator/separator.js');
+var chevronDown = require('../../../../../node_modules/lucide-react/dist/esm/icons/chevron-down.js');
+
+function expandBorderRadius(value) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    const parts = (value !== null && value !== void 0 ? value : "").trim().split(/\s+/).filter(Boolean);
+    if (parts.length <= 1) {
+        const uniform = (_a = parts[0]) !== null && _a !== void 0 ? _a : "";
+        return { top: uniform, right: uniform, bottom: uniform, left: uniform };
+    }
+    if (parts.length === 2) {
+        return {
+            top: (_b = parts[0]) !== null && _b !== void 0 ? _b : "",
+            right: (_c = parts[1]) !== null && _c !== void 0 ? _c : "",
+            bottom: (_d = parts[0]) !== null && _d !== void 0 ? _d : "",
+            left: (_e = parts[1]) !== null && _e !== void 0 ? _e : "",
+        };
+    }
+    if (parts.length === 3) {
+        return {
+            top: (_f = parts[0]) !== null && _f !== void 0 ? _f : "",
+            right: (_g = parts[1]) !== null && _g !== void 0 ? _g : "",
+            bottom: (_h = parts[2]) !== null && _h !== void 0 ? _h : "",
+            left: (_j = parts[1]) !== null && _j !== void 0 ? _j : "",
+        };
+    }
+    return {
+        top: (_k = parts[0]) !== null && _k !== void 0 ? _k : "",
+        right: (_l = parts[1]) !== null && _l !== void 0 ? _l : "",
+        bottom: (_m = parts[2]) !== null && _m !== void 0 ? _m : "",
+        left: (_o = parts[3]) !== null && _o !== void 0 ? _o : "",
+    };
+}
+function collapseBorderRadius({ top, right, bottom, left }) {
+    const normalized = {
+        top: top || "0px",
+        right: right || "0px",
+        bottom: bottom || "0px",
+        left: left || "0px",
+    };
+    if (normalized.top === normalized.right &&
+        normalized.right === normalized.bottom &&
+        normalized.bottom === normalized.left) {
+        return normalized.top;
+    }
+    if (normalized.top === normalized.bottom && normalized.right === normalized.left) {
+        return `${normalized.top} ${normalized.right}`;
+    }
+    if (normalized.right === normalized.left) {
+        return `${normalized.top} ${normalized.right} ${normalized.bottom}`;
+    }
+    return `${normalized.top} ${normalized.right} ${normalized.bottom} ${normalized.left}`;
+}
+function BorderMiniPopover({ borderColor, borderWidth, borderStyle, borderRadius, mixedFields, onChange, }) {
+    const [showColorGrid, setShowColorGrid] = React.useState(false);
+    const [showStyleOptions, setShowStyleOptions] = React.useState(false);
+    const [showWidthOptions, setShowWidthOptions] = React.useState(false);
+    const [radiusMode, setRadiusMode] = React.useState(() => (borderRadius !== null && borderRadius !== void 0 ? borderRadius : "").trim().split(/\s+/).filter(Boolean).length > 1 ? "per-side" : "uniform");
+    React.useEffect(() => {
+        if ((borderRadius !== null && borderRadius !== void 0 ? borderRadius : "").trim().split(/\s+/).filter(Boolean).length > 1) {
+            setRadiusMode("per-side");
+        }
+    }, [borderRadius]);
+    const currentBorderStyleGlyph = (mixedFields === null || mixedFields === void 0 ? void 0 : mixedFields.borderStyle) || borderStyle === "none" || borderStyle == null
+        ? "none"
+        : borderStyle === "solid" || borderStyle === "dashed" || borderStyle === "dotted"
+            ? borderStyle
+            : "solid";
+    const resolvedBorderStyle = borderStyle && borderStyle !== "none" ? borderStyle : "solid";
+    const expandedRadius = expandBorderRadius((mixedFields === null || mixedFields === void 0 ? void 0 : mixedFields.borderRadius) ? null : borderRadius);
+    const activeRadiusPreset = (mixedFields === null || mixedFields === void 0 ? void 0 : mixedFields.borderRadius)
+        ? undefined
+        : Object.keys(utils.BOX_BORDER_RADIUS_PRESETS).find((key) => utils.BOX_BORDER_RADIUS_PRESETS[key] === borderRadius);
+    const uniformRadiusValue = (mixedFields === null || mixedFields === void 0 ? void 0 : mixedFields.borderRadius)
+        ? ""
+        : activeRadiusPreset
+            ? utils.BOX_BORDER_RADIUS_PRESETS[activeRadiusPreset]
+            : expandedRadius.top === expandedRadius.right &&
+                expandedRadius.right === expandedRadius.bottom &&
+                expandedRadius.bottom === expandedRadius.left
+                ? expandedRadius.top
+                : "";
+    return (jsxRuntime.jsxs("div", { className: "space-y-3 p-3", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntime.jsx("p", { className: "text-xs font-medium text-muted-foreground", children: "Border" }), jsxRuntime.jsx(button.Button, { type: "button", variant: "ghost", size: "sm", className: "h-6 px-2 text-xs text-muted-foreground", onClick: () => onChange({
+                            borderColor: null,
+                            borderWidth: null,
+                            borderStyle: null,
+                            borderRadius: null,
+                        }), children: "Reset" })] }), jsxRuntime.jsxs("div", { className: "space-y-2", children: [jsxRuntime.jsxs(button.Button, { type: "button", variant: "outline", size: "sm", className: "h-8 w-full justify-between px-2 text-xs", onClick: () => setShowColorGrid((state) => !state), children: [jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("span", { className: "size-3 rounded-full border border-border", style: (mixedFields === null || mixedFields === void 0 ? void 0 : mixedFields.borderColor) ? undefined : { backgroundColor: borderColor !== null && borderColor !== void 0 ? borderColor : "transparent" } }), (mixedFields === null || mixedFields === void 0 ? void 0 : mixedFields.borderColor) ? "Mixed color" : borderColor ? "Border color" : "No color"] }), jsxRuntime.jsx(chevronDown.default, { className: "size-3.5" })] }), showColorGrid ? (jsxRuntime.jsx(colorSwatch.ColorGrid, { colors: colorConstants.BORDER_COLORS, currentColor: (mixedFields === null || mixedFields === void 0 ? void 0 : mixedFields.borderColor) ? undefined : (borderColor !== null && borderColor !== void 0 ? borderColor : undefined), onColorSelect: (color) => onChange({
+                            borderColor: color,
+                            borderStyle: resolvedBorderStyle,
+                            borderWidth: borderWidth || "1px",
+                        }), columns: 5, size: "sm" })) : null, jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [jsxRuntime.jsxs(button.Button, { type: "button", variant: "outline", size: "sm", className: "h-8 w-full justify-between px-2 text-xs", onClick: () => {
+                                            setShowStyleOptions((state) => !state);
+                                            setShowWidthOptions(false);
+                                        }, children: [jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5", children: [jsxRuntime.jsx(glyphs.BorderStyleGlyph, { borderStyle: currentBorderStyleGlyph }), (mixedFields === null || mixedFields === void 0 ? void 0 : mixedFields.borderStyle) ? "Mixed" : (borderStyle !== null && borderStyle !== void 0 ? borderStyle : "None")] }), jsxRuntime.jsx(chevronDown.default, { className: "size-3.5" })] }), showStyleOptions ? (jsxRuntime.jsx("div", { className: "grid grid-cols-4 gap-1", children: stylePopover.BORDER_STYLE_OPTIONS.map((styleOption) => (jsxRuntime.jsx(shared.PreviewButton, { selected: !(mixedFields === null || mixedFields === void 0 ? void 0 : mixedFields.borderStyle) &&
+                                                !(mixedFields === null || mixedFields === void 0 ? void 0 : mixedFields.borderWidth) &&
+                                                !(mixedFields === null || mixedFields === void 0 ? void 0 : mixedFields.borderColor) &&
+                                                (styleOption === "none"
+                                                    ? !borderStyle && !borderWidth && !borderColor
+                                                    : borderStyle === styleOption), className: "px-1 py-1.5", onClick: () => onChange({
+                                                borderStyle: styleOption === "none" ? null : styleOption,
+                                                borderWidth: styleOption === "none" ? null : borderWidth || "1px",
+                                                borderColor: styleOption === "none" ? null : borderColor || colorConstants.DEFAULT_BORDER_COLOR,
+                                            }), "aria-label": `Border style ${styleOption}`, title: `Border style ${styleOption}`, children: jsxRuntime.jsx(glyphs.BorderStyleGlyph, { borderStyle: styleOption, borderWidth: borderWidth || "2px" }) }, styleOption))) })) : null] }), jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [jsxRuntime.jsxs(button.Button, { type: "button", variant: "outline", size: "sm", className: "h-8 w-full justify-between px-2 text-xs", onClick: () => {
+                                            setShowWidthOptions((state) => !state);
+                                            setShowStyleOptions(false);
+                                        }, children: [jsxRuntime.jsx("span", { children: (mixedFields === null || mixedFields === void 0 ? void 0 : mixedFields.borderWidth) ? "Mixed" : (borderWidth !== null && borderWidth !== void 0 ? borderWidth : "1px") }), jsxRuntime.jsx(chevronDown.default, { className: "size-3.5" })] }), showWidthOptions ? (jsxRuntime.jsx("div", { className: "grid grid-cols-4 gap-1", children: stylePopover.BORDER_WIDTH_OPTIONS.map((widthOption) => (jsxRuntime.jsxs(shared.PreviewButton, { selected: !(mixedFields === null || mixedFields === void 0 ? void 0 : mixedFields.borderWidth) && borderWidth === widthOption, className: "px-1 py-1.5", onClick: () => onChange({
+                                                borderWidth: widthOption,
+                                                borderStyle: resolvedBorderStyle,
+                                                borderColor: borderColor || colorConstants.DEFAULT_BORDER_COLOR,
+                                            }), "aria-label": `Border width ${widthOption}`, title: `Border width ${widthOption}`, children: [jsxRuntime.jsx(glyphs.BorderStyleGlyph, { borderStyle: "solid", borderWidth: widthOption }), jsxRuntime.jsx("span", { children: widthOption.replace("px", "") })] }, widthOption))) })) : null] })] })] }), jsxRuntime.jsx(separator.Separator, {}), jsxRuntime.jsxs("div", { className: "space-y-2", children: [jsxRuntime.jsx("p", { className: "text-xs font-medium text-muted-foreground", children: "Radius" }), jsxRuntime.jsx(uniformPerSideToggle.UniformPerSideToggle, { mode: radiusMode, onModeChange: setRadiusMode, uniformValue: uniformRadiusValue, perSideValues: expandedRadius, onUniformChange: (value) => onChange({ borderRadius: value || null }), onPerSideChange: (side, value) => onChange({
+                            borderRadius: collapseBorderRadius(Object.assign(Object.assign({}, expandedRadius), { [side]: value || "0px" })),
+                        }), presets: stylePopover.RADIUS_OPTIONS.map(({ key, label }) => ({
+                            value: utils.BOX_BORDER_RADIUS_PRESETS[key],
+                            label,
+                            icon: jsxRuntime.jsx(glyphs.RadiusPreviewGlyph, { variant: key }),
+                        })), placeholder: "Custom radius, e.g. 12px", uniformLabel: "All corners", perSideLabels: {
+                            top: "Top left",
+                            right: "Top right",
+                            bottom: "Bottom right",
+                            left: "Bottom left",
+                        }, centerPreview: jsxRuntime.jsx(glyphs.RadiusPreviewGlyph, { variant: activeRadiusPreset !== null && activeRadiusPreset !== void 0 ? activeRadiusPreset : "rounded", className: "h-4 w-4" }) })] })] }));
+}
+
+exports.BorderMiniPopover = BorderMiniPopover;

package/dist/cjs/components/ui/rich-editor/bubble-menus/controls/dimensions-dropdown.js

@@ -0,0 +1,65 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+require('../../../../../node_modules/tslib/tslib.es6.js');
+var button = require('../../../../buttons/button/button.js');
+require('../../../../popovers/popover/popover.js');
+var separator = require('../../../../utility/separator/separator.js');
+require('../../../../popovers/tooltip/tooltip.js');
+var chevronDown = require('../../../../../node_modules/lucide-react/dist/esm/icons/chevron-down.js');
+var chevronRight = require('../../../../../node_modules/lucide-react/dist/esm/icons/chevron-right.js');
+
+function hasDimensionStyles({ width, height, minWidth, maxWidth, minHeight, maxHeight, }) {
+    return Boolean(width || height || minWidth || maxWidth || minHeight || maxHeight);
+}
+function detectUnit(value) {
+    return (value === null || value === void 0 ? void 0 : value.endsWith("%")) ? "%" : "px";
+}
+function stripUnit(value) {
+    if (!value)
+        return "";
+    if (value.endsWith("%"))
+        return value.slice(0, -1);
+    if (value.endsWith("px"))
+        return value.slice(0, -2);
+    return value;
+}
+function DimRow({ label, value, unit, onUnitChange, onChange }) {
+    const numericValue = stripUnit(value);
+    const percentValue = unit === "%" && numericValue ? Math.min(100, Math.max(0, Number.parseInt(numericValue, 10))) : 0;
+    return (jsxRuntime.jsxs("div", { className: "space-y-2 rounded-lg border border-border/60 bg-muted/20 p-2.5", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [jsxRuntime.jsx("span", { className: "w-10 shrink-0 text-xs font-medium text-muted-foreground", children: label }), jsxRuntime.jsx(button.Button, { type: "button", variant: !value ? "secondary" : "outline", size: "sm", className: "h-6 px-1.5 text-xs", onClick: () => onChange(null), children: "Auto" }), jsxRuntime.jsx(button.Button, { type: "button", variant: value === "100%" ? "secondary" : "outline", size: "sm", className: "h-6 px-1.5 text-xs", onClick: () => {
+                            onUnitChange("%");
+                            onChange("100%");
+                        }, children: "Full" }), jsxRuntime.jsxs("div", { className: "ml-auto flex overflow-hidden rounded-md border border-input bg-background", children: [jsxRuntime.jsx("button", { type: "button", className: `px-1.5 py-1 text-xs transition-colors ${unit === "px" ? "bg-secondary font-medium" : "text-muted-foreground hover:text-foreground"}`, onClick: () => onUnitChange("px"), children: "px" }), jsxRuntime.jsx("button", { type: "button", className: `border-l border-input px-1.5 py-1 text-xs transition-colors ${unit === "%" ? "bg-secondary font-medium" : "text-muted-foreground hover:text-foreground"}`, onClick: () => onUnitChange("%"), children: "%" })] })] }), unit === "%" ? (jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("input", { type: "range", min: 0, max: 100, step: 10, value: percentValue, className: "flex-1 accent-primary", onChange: (event) => onChange(`${event.target.value}%`) }), jsxRuntime.jsxs("span", { className: "w-9 text-right text-xs font-mono tabular-nums", children: [percentValue, "%"] })] })) : (jsxRuntime.jsx("input", { type: "text", className: "h-8 w-full rounded-md border border-input bg-background px-2 text-sm focus:outline-none focus:ring-1 focus:ring-ring", placeholder: "e.g. 320", defaultValue: numericValue, onKeyDown: (event) => {
+                    if (event.key === "Enter") {
+                        onChange(event.currentTarget.value ? `${event.currentTarget.value}px` : null);
+                        event.currentTarget.blur();
+                    }
+                }, onBlur: (event) => onChange(event.currentTarget.value ? `${event.currentTarget.value}px` : null) }, `${label}-${numericValue || "empty"}`))] }));
+}
+function DimensionsControls({ width, height, minWidth, maxWidth, minHeight, maxHeight, onChange, }) {
+    const [widthUnit, setWidthUnit] = React.useState(() => detectUnit(width));
+    const [heightUnit, setHeightUnit] = React.useState(() => detectUnit(height));
+    const [showAdvanced, setShowAdvanced] = React.useState(false);
+    const advancedFields = [
+        { label: "Min W", key: "minWidth", value: minWidth },
+        { label: "Max W", key: "maxWidth", value: maxWidth },
+        { label: "Min H", key: "minHeight", value: minHeight },
+        { label: "Max H", key: "maxHeight", value: maxHeight },
+    ];
+    return (jsxRuntime.jsxs("div", { className: "space-y-3", children: [jsxRuntime.jsx(DimRow, { label: "Width", value: width, unit: widthUnit, onUnitChange: setWidthUnit, onChange: (value) => onChange({ width: value }) }), jsxRuntime.jsx(DimRow, { label: "Height", value: height, unit: heightUnit, onUnitChange: setHeightUnit, onChange: (value) => onChange({ height: value }) }), jsxRuntime.jsx(separator.Separator, {}), jsxRuntime.jsxs("button", { type: "button", className: "flex w-full items-center gap-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground", onClick: () => setShowAdvanced((state) => !state), children: [showAdvanced ? jsxRuntime.jsx(chevronDown.default, { className: "size-3.5" }) : jsxRuntime.jsx(chevronRight.default, { className: "size-3.5" }), "Advanced constraints"] }), showAdvanced ? (jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-2", children: advancedFields.map(({ label, key, value }) => (jsxRuntime.jsxs("div", { className: "space-y-1", children: [jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: label }), jsxRuntime.jsx("input", { type: "text", className: "h-8 w-full rounded-md border border-input bg-background px-2 text-sm focus:outline-none focus:ring-1 focus:ring-ring", defaultValue: value !== null && value !== void 0 ? value : "", placeholder: "none", onKeyDown: (event) => {
+                                if (event.key === "Enter") {
+                                    onChange({ [key]: event.currentTarget.value || null });
+                                    event.currentTarget.blur();
+                                }
+                            }, onBlur: (event) => onChange({ [key]: event.currentTarget.value || null }) }, `${key}-${value !== null && value !== void 0 ? value : "empty"}`)] }, key))) })) : null] }));
+}
+function WidthMiniPopover({ width, mixed = false, onChange }) {
+    const [widthUnit, setWidthUnit] = React.useState(() => detectUnit(width !== null && width !== void 0 ? width : null));
+    return (jsxRuntime.jsxs("div", { className: "space-y-3 p-3", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntime.jsx("p", { className: "text-xs font-medium text-muted-foreground", children: "Width" }), jsxRuntime.jsx(button.Button, { type: "button", variant: "ghost", size: "sm", className: "h-6 px-2 text-xs text-muted-foreground", onClick: () => onChange({ width: null }), children: "Reset" })] }), mixed ? jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Selected items currently have mixed widths." }) : null, jsxRuntime.jsx(DimRow, { label: "Width", value: mixed ? null : (width !== null && width !== void 0 ? width : null), unit: widthUnit, onUnitChange: setWidthUnit, onChange: (value) => onChange({ width: value }) })] }));
+}
+
+exports.DimensionsControls = DimensionsControls;
+exports.WidthMiniPopover = WidthMiniPopover;
+exports.hasDimensionStyles = hasDimensionStyles;

package/dist/cjs/components/ui/rich-editor/bubble-menus/controls/edge-trigger-button.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var popover = require('../../../../popovers/popover/popover.js');
+var tooltip = require('../../../../popovers/tooltip/tooltip.js');
+var button = require('../../../../buttons/button/button.js');
+var utils = require('../../../../../lib/utils.js');
+
+function EdgeTriggerButton({ active = false, preview, tooltip: tooltip$1, open, onOpenChange, popoverWidth, children, }) {
+    return (jsxRuntime.jsxs(popover.Popover, { open: open, onOpenChange: onOpenChange, 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, { type: "button", variant: open || active ? "secondary" : "ghost", size: "icon-sm", contentEditable: false, className: utils.cn("size-6 rounded-md p-0", open || active ? "shadow-xs" : ""), "aria-label": tooltip$1, onMouseDown: (event) => {
+                                    event.preventDefault();
+                                    event.stopPropagation();
+                                }, children: preview }) }) }), jsxRuntime.jsx(tooltip.TooltipContent, { children: tooltip$1 })] }), jsxRuntime.jsx(popover.PopoverContent, { persistent: true, align: "end", side: "bottom", sideOffset: 6, className: utils.cn("p-0", popoverWidth), children: children })] }));
+}
+
+exports.EdgeTriggerButton = EdgeTriggerButton;