@thangph2146/lexical-editor 0.0.5 → 0.0.7

package/dist/editor-x/editor.js

@@ -1,4 +1,4 @@
-import * as React20 from 'react';
+import * as React21 from 'react';
 import { createContext, useRef, useState, useEffect, useCallback, Suspense, useMemo, useContext, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
@@ -91,9 +91,9 @@ var init_tooltip = __esm({
     TooltipProvider = ({ children }) => /* @__PURE__ */ jsx(Fragment, { children });
     Tooltip = ({ children }) => /* @__PURE__ */ jsx("div", { className: "editor-tooltip-group", children });
     TooltipTrigger = ({ asChild, children, ...props }) => {
-      const child = asChild ? React20.Children.only(children) : children;
-      if (!React20.isValidElement(child)) return null;
-      return React20.cloneElement(child, {
+      const child = asChild ? React21.Children.only(children) : children;
+      if (!React21.isValidElement(child)) return null;
+      return React21.cloneElement(child, {
         ...props,
         className: cn(child.props.className, "editor-tooltip-trigger")
       });
@@ -2963,7 +2963,7 @@ var Button;
 var init_button = __esm({
   "src/ui/button.tsx"() {
     init_utils();
-    Button = React20.forwardRef(
+    Button = React21.forwardRef(
       ({ className, variant = "default", size = "default", type = "button", isLoading, disabled, children, ...props }, ref) => {
         return /* @__PURE__ */ jsxs(
           "button",
@@ -3104,22 +3104,22 @@ var init_typography = __esm({
         md: "editor-icon-md",
         lg: "editor-icon-lg"
       };
-      if (React20.isValidElement(children)) {
-        return React20.cloneElement(children, {
+      if (React21.isValidElement(children)) {
+        return React21.cloneElement(children, {
           className: cn(sizeMap[size] || sizeMap.medium, children.props.className, className)
         });
       }
       return /* @__PURE__ */ jsx(Fragment, { children });
     };
-    TypographyP = React20.forwardRef(
+    TypographyP = React21.forwardRef(
       ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("editor-typography-p", className), ...props })
     );
     TypographyP.displayName = "TypographyP";
-    TypographyPSmall = React20.forwardRef(
+    TypographyPSmall = React21.forwardRef(
       ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("editor-typography-p-small", className), ...props })
     );
     TypographyPSmall.displayName = "TypographyPSmall";
-    TypographySpanSmallMuted = React20.forwardRef(
+    TypographySpanSmallMuted = React21.forwardRef(
       ({ className, ...props }, ref) => /* @__PURE__ */ jsx("span", { ref, className: cn("editor-typography-span-small-muted", className), ...props })
     );
     TypographySpanSmallMuted.displayName = "TypographySpanSmallMuted";
@@ -3171,7 +3171,7 @@ function MediaResizer({
   const hardWidthLimit = maxWidth ?? editorContainer?.maxWidth;
   const minWidth = 100;
   const minHeight = 100;
-  React20.useEffect(() => {
+  React21.useEffect(() => {
   }, [mediaRef, unlockBoundaries]);
   const setStartCursor = (direction) => {
     const ew = direction === Direction.east || direction === Direction.west;
@@ -3518,14 +3518,14 @@ function YouTubeComponent({
 }) {
   const isEditable = useLexicalEditable();
   const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
-  const [isResizing, setIsResizing] = React20.useState(false);
-  const wrapperRef = React20.useRef(null);
-  const [wrapperElement, setWrapperElement] = React20.useState(null);
-  const buttonRef = React20.useRef(null);
-  const [containerWidth, setContainerWidth] = React20.useState(maxWidth);
+  const [isResizing, setIsResizing] = React21.useState(false);
+  const wrapperRef = React21.useRef(null);
+  const [wrapperElement, setWrapperElement] = React21.useState(null);
+  const buttonRef = React21.useRef(null);
+  const [containerWidth, setContainerWidth] = React21.useState(maxWidth);
   const editorContainer = useEditorContainer();
   const editorHardWidthLimit = editorContainer?.maxWidth;
-  const updateNode = React20.useCallback(
+  const updateNode = React21.useCallback(
     (updater) => {
       editor.update(() => {
         const node = $getNodeByKey(nodeKey);
@@ -3537,14 +3537,14 @@ function YouTubeComponent({
     [editor, nodeKey]
   );
   const aspectRatio = 16 / 9;
-  const clampToContainer = React20.useCallback(
+  const clampToContainer = React21.useCallback(
     (value) => {
       const limit = typeof editorHardWidthLimit === "number" && editorHardWidthLimit > 0 ? editorHardWidthLimit : containerWidth || value;
       return Math.min(value, limit);
     },
     [containerWidth, editorHardWidthLimit]
   );
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (!wrapperElement) {
       return;
     }
@@ -3589,7 +3589,7 @@ function YouTubeComponent({
       return () => window.removeEventListener("resize", updateAvailableWidth);
     }
   }, [editor, editorHardWidthLimit, maxWidth, wrapperElement]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (!containerWidth) {
       return;
     }
@@ -3616,11 +3616,11 @@ function YouTubeComponent({
   const disablePlaybackInteractions = isEditable;
   const iframeWidth = safeRenderedWidth;
   const iframeHeight = Math.round(iframeWidth / aspectRatio);
-  const handleWrapperRef = React20.useCallback((node) => {
+  const handleWrapperRef = React21.useCallback((node) => {
     wrapperRef.current = node;
     setWrapperElement(node);
   }, []);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (!isEditable) {
       return;
     }
@@ -3651,7 +3651,7 @@ function YouTubeComponent({
       )
     );
   }, [clearSelection, editor, isEditable, isResizing, isSelected, setSelected]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (!containerWidth || typeof width !== "number" || fullWidth || width <= containerWidth) {
       return;
     }
@@ -3951,15 +3951,15 @@ function Dialog({ open = false, onOpenChange = () => {
   return /* @__PURE__ */ jsx(DialogContext.Provider, { value: { open, onOpenChange }, children });
 }
 function DialogTrigger({ asChild, children, className, ...props }) {
-  const context = React20.useContext(DialogContext);
+  const context = React21.useContext(DialogContext);
   const handleClick = (e) => {
     context?.onOpenChange(true);
-    if (React20.isValidElement(children)) {
+    if (React21.isValidElement(children)) {
       children.props.onClick?.(e);
     }
   };
-  if (asChild && React20.isValidElement(children)) {
-    return React20.cloneElement(children, {
+  if (asChild && React21.isValidElement(children)) {
+    return React21.cloneElement(children, {
       onClick: handleClick,
       ...props
     });
@@ -3967,15 +3967,15 @@ function DialogTrigger({ asChild, children, className, ...props }) {
   return /* @__PURE__ */ jsx("button", { type: "button", onClick: handleClick, className, ...props, children });
 }
 function DialogClose({ asChild, children, className, ...props }) {
-  const context = React20.useContext(DialogContext);
+  const context = React21.useContext(DialogContext);
   const handleClick = (e) => {
     context?.onOpenChange(false);
-    if (React20.isValidElement(children)) {
+    if (React21.isValidElement(children)) {
       children.props.onClick?.(e);
     }
   };
-  if (asChild && React20.isValidElement(children)) {
-    return React20.cloneElement(children, {
+  if (asChild && React21.isValidElement(children)) {
+    return React21.cloneElement(children, {
       onClick: handleClick,
       ...props
     });
@@ -3983,9 +3983,9 @@ function DialogClose({ asChild, children, className, ...props }) {
   return /* @__PURE__ */ jsx("button", { type: "button", onClick: handleClick, className, ...props, children });
 }
 function DialogContent({ children, className, disableOutsideClick, ...props }) {
-  const context = React20.useContext(DialogContext);
-  const [mounted, setMounted] = React20.useState(false);
-  React20.useEffect(() => {
+  const context = React21.useContext(DialogContext);
+  const [mounted, setMounted] = React21.useState(false);
+  React21.useEffect(() => {
     setMounted(true);
     return () => setMounted(false);
   }, []);
@@ -4044,7 +4044,7 @@ var DialogContext;
 var init_dialog = __esm({
   "src/ui/dialog.tsx"() {
     init_utils();
-    DialogContext = React20.createContext(null);
+    DialogContext = React21.createContext(null);
   }
 });
 
@@ -4059,7 +4059,7 @@ var Input;
 var init_input = __esm({
   "src/ui/input.tsx"() {
     init_utils();
-    Input = React20.forwardRef(
+    Input = React21.forwardRef(
       ({ className, type, ...props }, ref) => {
         return /* @__PURE__ */ jsx(
           "input",
@@ -4079,7 +4079,7 @@ var Label;
 var init_label = __esm({
   "src/ui/label.tsx"() {
     init_utils();
-    Label = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    Label = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
       "label",
       {
         ref,
@@ -4094,6 +4094,37 @@ var init_label = __esm({
     Label.displayName = "Label";
   }
 });
+var Flex;
+var init_flex = __esm({
+  "src/ui/flex.tsx"() {
+    init_utils();
+    Flex = React21.forwardRef(
+      ({ className, align, justify, direction, wrap, gap, style, ...props }, ref) => {
+        const isStandardGap = typeof gap === "number" && [0.5, 1, 1.5, 2, 3, 4, 5].includes(gap);
+        const gapClass = isStandardGap ? `editor-gap-${gap.toString().replace(".", "-")}` : void 0;
+        const gapStyle = !isStandardGap && typeof gap === "number" ? { gap: `${gap * 0.25}rem` } : !isStandardGap && typeof gap !== "undefined" ? { gap } : void 0;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref,
+            className: cn(
+              "editor-flex",
+              align && `editor-items-${align}`,
+              justify && `editor-justify-${justify}`,
+              direction && `editor-flex-${direction}`,
+              wrap && `editor-flex-${wrap}`,
+              gapClass,
+              className
+            ),
+            style: { ...gapStyle, ...style },
+            ...props
+          }
+        );
+      }
+    );
+    Flex.displayName = "Flex";
+  }
+});
 function Tabs({
   defaultValue,
   value: controlledValue,
@@ -4102,7 +4133,7 @@ function Tabs({
   className,
   ...props
 }) {
-  const [uncontrolledValue, setUncontrolledValue] = React20.useState(defaultValue || "");
+  const [uncontrolledValue, setUncontrolledValue] = React21.useState(defaultValue || "");
   const value = controlledValue ?? uncontrolledValue;
   const setValue = onValueChange ?? setUncontrolledValue;
   return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { value, onValueChange: setValue }, children: /* @__PURE__ */ jsx("div", { className: cn(className), ...props, children }) });
@@ -4121,7 +4152,7 @@ function TabsList({ className, children, ...props }) {
   );
 }
 function TabsTrigger({ value, className, children, ...props }) {
-  const context = React20.useContext(TabsContext);
+  const context = React21.useContext(TabsContext);
   const isSelected = context?.value === value;
   return /* @__PURE__ */ jsx(
     "button",
@@ -4139,7 +4170,7 @@ function TabsTrigger({ value, className, children, ...props }) {
   );
 }
 function TabsContent({ value, className, children, ...props }) {
-  const context = React20.useContext(TabsContext);
+  const context = React21.useContext(TabsContext);
   const isSelected = context?.value === value;
   if (!isSelected) return null;
   return /* @__PURE__ */ jsx(
@@ -4158,7 +4189,7 @@ var TabsContext;
 var init_tabs = __esm({
   "src/ui/tabs.tsx"() {
     init_utils();
-    TabsContext = React20.createContext(null);
+    TabsContext = React21.createContext(null);
   }
 });
 function useEditorUploads() {
@@ -4185,27 +4216,27 @@ function Collapsible({
   className,
   ...props
 }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React20.useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React21.useState(false);
   const open = controlledOpen ?? uncontrolledOpen;
   const setOpen = onOpenChange ?? setUncontrolledOpen;
   return /* @__PURE__ */ jsx(CollapsibleContext.Provider, { value: { open, setOpen }, children: /* @__PURE__ */ jsx("div", { className: cn("editor-collapsible", className), "data-state": open ? "open" : "closed", ...props, children }) });
 }
 function CollapsibleTrigger({ children, asChild, ...props }) {
-  const context = React20.useContext(CollapsibleContext);
+  const context = React21.useContext(CollapsibleContext);
   if (!context) throw new Error("CollapsibleTrigger must be used within Collapsible");
   const handleClick = (e) => {
     context.setOpen(!context.open);
-    if (React20.isValidElement(children)) {
+    if (React21.isValidElement(children)) {
       children.props.onClick?.(e);
     }
   };
-  if (asChild && React20.isValidElement(children)) {
-    return React20.cloneElement(children, { onClick: handleClick, ...props });
+  if (asChild && React21.isValidElement(children)) {
+    return React21.cloneElement(children, { onClick: handleClick, ...props });
   }
   return /* @__PURE__ */ jsx("button", { type: "button", onClick: handleClick, ...props, children });
 }
 function CollapsibleContent({ children, className, ...props }) {
-  const context = React20.useContext(CollapsibleContext);
+  const context = React21.useContext(CollapsibleContext);
   if (!context) throw new Error("CollapsibleContent must be used within Collapsible");
   if (!context.open) return null;
   return /* @__PURE__ */ jsx("div", { className: cn("editor-overflow-hidden", className), ...props, children });
@@ -4214,7 +4245,7 @@ var CollapsibleContext;
 var init_collapsible = __esm({
   "src/ui/collapsible.tsx"() {
     init_utils();
-    CollapsibleContext = React20.createContext(null);
+    CollapsibleContext = React21.createContext(null);
   }
 });
 function InsertImageUriDialogBody({
@@ -4329,7 +4360,7 @@ function ImagePickerFolderTree({
 }) {
   const hasContent = folder.images.length > 0 || folder.subfolders.length > 0;
   const isOpen = openFolders.has(folder.path);
-  const handleOpenChange = React20.useCallback(
+  const handleOpenChange = React21.useCallback(
     (open) => {
       if (open) {
         setOpenFolders((prev) => {
@@ -4409,11 +4440,11 @@ function InsertImageUploadsDialogBody({
   const [openFolders, setOpenFolders] = useState(/* @__PURE__ */ new Set());
   const { folderTree, isLoading } = useEditorUploads();
   const isDisabled = !selectedImage;
-  const handleImageSelect = React20.useCallback((imageUrl, originalName) => {
+  const handleImageSelect = React21.useCallback((imageUrl, originalName) => {
     setSelectedImage(imageUrl);
     setAltText((prev) => prev || originalName);
   }, []);
-  const handleConfirm = React20.useCallback(() => {
+  const handleConfirm = React21.useCallback(() => {
     if (selectedImage) {
       let imageUrl = selectedImage;
       if (imageUrl.startsWith("/api/uploads")) {
@@ -4424,7 +4455,7 @@ function InsertImageUploadsDialogBody({
       onClick({ altText: altText || "", src: imageUrl });
     }
   }, [selectedImage, altText, onClick]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     const handleDoubleClickConfirm = () => {
       setTimeout(() => {
         handleConfirm();
@@ -4435,7 +4466,7 @@ function InsertImageUploadsDialogBody({
       document.removeEventListener("confirm-image-insert", handleDoubleClickConfirm);
     };
   }, [handleConfirm]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (folderTree && folderTree.subfolders.length > 0) {
       setOpenFolders(new Set(folderTree.subfolders.map((f) => f.path)));
     }
@@ -4443,7 +4474,7 @@ function InsertImageUploadsDialogBody({
   return /* @__PURE__ */ jsxs("div", { className: "editor-form-grid", children: [
     /* @__PURE__ */ jsxs("div", { className: "editor-form-item", children: [
       /* @__PURE__ */ jsx(Label, { children: "Ch\u1ECDn h\xECnh \u1EA3nh t\u1EEB th\u01B0 vi\u1EC7n" }),
-      isLoading ? /* @__PURE__ */ jsx("div", { className: "editor-flex-center-justify-py-8", children: /* @__PURE__ */ jsx(Loader2, { className: "editor-loader" }) }) : !folderTree || folderTree.subfolders.length === 0 && folderTree.images.length === 0 ? /* @__PURE__ */ jsx("div", { className: "editor-empty-state", children: /* @__PURE__ */ jsx(TypographySpanSmallMuted, { children: "Ch\u01B0a c\xF3 h\xECnh \u1EA3nh n\xE0o \u0111\u01B0\u1EE3c upload" }) }) : /* @__PURE__ */ jsxs("div", { className: "editor-scroll-area editor-flex editor-flex-col editor-gap-1", children: [
+      isLoading ? /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", className: "editor-py-8", children: /* @__PURE__ */ jsx(Loader2, { className: "editor-loader" }) }) : !folderTree || folderTree.subfolders.length === 0 && folderTree.images.length === 0 ? /* @__PURE__ */ jsx("div", { className: "editor-empty-state", children: /* @__PURE__ */ jsx(TypographySpanSmallMuted, { children: "Ch\u01B0a c\xF3 h\xECnh \u1EA3nh n\xE0o \u0111\u01B0\u1EE3c upload" }) }) : /* @__PURE__ */ jsxs("div", { className: "editor-scroll-area editor-flex editor-flex-col editor-gap-1", children: [
         folderTree.images.length > 0 && /* @__PURE__ */ jsxs("div", { className: "editor-mb-3", children: [
           /* @__PURE__ */ jsx(TypographySpanSmallMuted, { className: "editor-mb-2 editor-px-1", children: "Root" }),
           /* @__PURE__ */ jsx("div", { className: "editor-image-grid editor-gap-2", children: folderTree.images.map((image) => /* @__PURE__ */ jsx(
@@ -4711,6 +4742,7 @@ var init_images_plugin = __esm({
     init_dialog();
     init_input();
     init_label();
+    init_flex();
     init_tabs();
     init_uploads_context();
     init_collapsible();
@@ -5037,7 +5069,7 @@ var init_image_placeholder = __esm({
   }
 });
 function ContentEditable({
-  placeholder: placeholder2,
+  placeholder,
   className,
   placeholderClassName,
   placeholderDefaults = true
@@ -5051,8 +5083,8 @@ function ContentEditable({
         !isReadOnlyOrReview && "min-h-72 px-8 py-4",
         className
       ),
-      "aria-placeholder": placeholder2,
-      "aria-label": placeholder2 || "Editor n\u1ED9i dung",
+      "aria-placeholder": placeholder,
+      "aria-label": placeholder || "Editor n\u1ED9i dung",
       placeholder: /* @__PURE__ */ jsx(
         "div",
         {
@@ -5061,7 +5093,7 @@ function ContentEditable({
             "text-muted-foreground pointer-events-none select-none",
             placeholderDefaults && !isReadOnlyOrReview && "absolute top-0 left-0 overflow-hidden px-8 py-[18px] text-ellipsis"
           ),
-          children: placeholder2
+          children: placeholder
         }
       )
     }
@@ -5695,7 +5727,7 @@ function $isImageNode(node) {
 var ImageComponent2, WHITESPACE_REGEX, ImageNode;
 var init_image_node = __esm({
   "src/nodes/image-node.tsx"() {
-    ImageComponent2 = React20.lazy(() => Promise.resolve().then(() => (init_image_component(), image_component_exports)));
+    ImageComponent2 = React21.lazy(() => Promise.resolve().then(() => (init_image_component(), image_component_exports)));
     WHITESPACE_REGEX = /[\u200B\u00A0\s]+/g;
     ImageNode = class _ImageNode extends DecoratorNode {
       __src;
@@ -6457,7 +6489,7 @@ var Separator;
 var init_separator = __esm({
   "src/ui/separator.tsx"() {
     init_utils();
-    Separator = React20.forwardRef(({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ jsx(
+    Separator = React21.forwardRef(({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ jsx(
       "div",
       {
         ref,
@@ -6474,34 +6506,6 @@ var init_separator = __esm({
     Separator.displayName = "Separator";
   }
 });
-var Flex;
-var init_flex = __esm({
-  "src/ui/flex.tsx"() {
-    init_utils();
-    Flex = React20.forwardRef(
-      ({ className, align, justify, direction, wrap, gap, style, ...props }, ref) => {
-        const gapStyle = typeof gap === "number" ? { gap: `${gap * 0.25}rem` } : typeof gap !== "undefined" ? { gap } : void 0;
-        return /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref,
-            className: cn(
-              "editor-flex",
-              align && `editor-items-${align}`,
-              justify && `editor-justify-${justify}`,
-              direction && `editor-flex-${direction}`,
-              wrap && `editor-flex-${wrap}`,
-              className
-            ),
-            style: { ...gapStyle, ...style },
-            ...props
-          }
-        );
-      }
-    );
-    Flex.displayName = "Flex";
-  }
-});
 function textEncoder() {
   if (window.TextEncoder === void 0) {
     return null;
@@ -6977,7 +6981,7 @@ var ScrollArea, ScrollBar;
 var init_scroll_area = __esm({
   "src/ui/scroll-area.tsx"() {
     init_utils();
-    ScrollArea = React20.forwardRef(
+    ScrollArea = React21.forwardRef(
       ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
         "div",
         {
@@ -7159,9 +7163,9 @@ var init_code_button = __esm({
   }
 });
 function Select({ value, onValueChange, children, disabled }) {
-  const [open, setOpen] = React20.useState(false);
-  const triggerRef = React20.useRef(null);
-  const contextValue = React20.useMemo(() => ({
+  const [open, setOpen] = React21.useState(false);
+  const triggerRef = React21.useRef(null);
+  const contextValue = React21.useMemo(() => ({
     value,
     onValueChange,
     open,
@@ -7172,7 +7176,7 @@ function Select({ value, onValueChange, children, disabled }) {
   return /* @__PURE__ */ jsx(SelectContext.Provider, { value: contextValue, children });
 }
 function SelectTrigger({ className, children, size = "default", ...props }) {
-  const context = React20.useContext(SelectContext);
+  const context = React21.useContext(SelectContext);
   if (!context) throw new Error("SelectTrigger must be used within Select");
   const { triggerRef, disabled, open, setOpen } = context;
   return /* @__PURE__ */ jsxs(
@@ -7195,16 +7199,16 @@ function SelectTrigger({ className, children, size = "default", ...props }) {
     }
   );
 }
-function SelectValue({ placeholder: placeholder2 }) {
-  const context = React20.useContext(SelectContext);
+function SelectValue({ placeholder }) {
+  const context = React21.useContext(SelectContext);
   if (!context) throw new Error("SelectValue must be used within Select");
-  return /* @__PURE__ */ jsx("span", { children: context.value || placeholder2 });
+  return /* @__PURE__ */ jsx("span", { children: context.value || placeholder });
 }
 function SelectContent({ className, children, ...props }) {
-  const context = React20.useContext(SelectContext);
-  const [position, setPosition] = React20.useState({ top: 0, left: 0, width: 0 });
-  const contentRef = React20.useRef(null);
-  React20.useEffect(() => {
+  const context = React21.useContext(SelectContext);
+  const [position, setPosition] = React21.useState({ top: 0, left: 0, width: 0 });
+  const contentRef = React21.useRef(null);
+  React21.useEffect(() => {
     if (context?.open && context.triggerRef.current) {
       const rect = context.triggerRef.current.getBoundingClientRect();
       setPosition({
@@ -7246,7 +7250,7 @@ function SelectContent({ className, children, ...props }) {
   );
 }
 function SelectItem({ value, children, className, ...props }) {
-  const context = React20.useContext(SelectContext);
+  const context = React21.useContext(SelectContext);
   if (!context) throw new Error("SelectItem must be used within Select");
   const isSelected = context.value === value;
   return /* @__PURE__ */ jsxs(
@@ -7276,7 +7280,7 @@ var SelectContext;
 var init_select = __esm({
   "src/ui/select.tsx"() {
     init_utils();
-    SelectContext = React20.createContext(null);
+    SelectContext = React21.createContext(null);
   }
 });
 function getCodeLanguageOptions() {
@@ -7505,7 +7509,7 @@ var Command, CommandList, CommandGroup, CommandItem;
 var init_command = __esm({
   "src/ui/command.tsx"() {
     init_utils();
-    Command = React20.forwardRef(
+    Command = React21.forwardRef(
       ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
         "div",
         {
@@ -7516,7 +7520,7 @@ var init_command = __esm({
       )
     );
     Command.displayName = "Command";
-    CommandList = React20.forwardRef(
+    CommandList = React21.forwardRef(
       ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
         "div",
         {
@@ -7527,7 +7531,7 @@ var init_command = __esm({
       )
     );
     CommandList.displayName = "CommandList";
-    CommandGroup = React20.forwardRef(
+    CommandGroup = React21.forwardRef(
       ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
         "div",
         {
@@ -7538,7 +7542,7 @@ var init_command = __esm({
       )
     );
     CommandGroup.displayName = "CommandGroup";
-    CommandItem = React20.forwardRef(({ className, onSelect, ...props }, ref) => /* @__PURE__ */ jsx(
+    CommandItem = React21.forwardRef(({ className, onSelect, ...props }, ref) => /* @__PURE__ */ jsx(
       "div",
       {
         ref,
@@ -7874,6 +7878,98 @@ var init_component_picker_menu_plugin = __esm({
     );
   }
 });
+var NumberInput;
+var init_number_input = __esm({
+  "src/ui/number-input.tsx"() {
+    "use client";
+    init_utils();
+    init_button();
+    init_input();
+    NumberInput = React21.forwardRef(
+      ({ value, onValueChange, min = 0, max = 100, step = 1, unit = "px", className, ...props }, ref) => {
+        const timerRef = React21.useRef(null);
+        const intervalRef = React21.useRef(null);
+        const valueRef = React21.useRef(value);
+        React21.useEffect(() => {
+          valueRef.current = value;
+        }, [value]);
+        const updateValue = React21.useCallback((delta) => {
+          onValueChange(Math.min(Math.max(valueRef.current + delta, min), max));
+        }, [onValueChange, min, max]);
+        const startLongPress = (delta) => {
+          updateValue(delta);
+          timerRef.current = setTimeout(() => {
+            intervalRef.current = setInterval(() => {
+              updateValue(delta);
+            }, 50);
+          }, 300);
+        };
+        const stopLongPress = React21.useCallback(() => {
+          if (timerRef.current) clearTimeout(timerRef.current);
+          if (intervalRef.current) clearInterval(intervalRef.current);
+        }, []);
+        const handleBlur = () => {
+          onValueChange(Math.min(Math.max(value, min), max));
+        };
+        React21.useEffect(() => {
+          return () => stopLongPress();
+        }, [stopLongPress]);
+        return /* @__PURE__ */ jsxs("div", { className: cn("editor-number-input-container", className), children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "editor-number-input-btn",
+              onMouseDown: () => startLongPress(-step),
+              onMouseUp: stopLongPress,
+              onMouseLeave: stopLongPress,
+              onTouchStart: () => startLongPress(-step),
+              onTouchEnd: stopLongPress,
+              tabIndex: -1,
+              children: /* @__PURE__ */ jsx(Minus, { size: 14 })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "editor-number-input-wrapper", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                ...props,
+                ref,
+                type: "number",
+                value,
+                onBlur: handleBlur,
+                onChange: (e) => {
+                  const val = parseInt(e.target.value, 10);
+                  if (!isNaN(val)) onValueChange(val);
+                  else onValueChange(0);
+                },
+                className: "editor-number-input-field"
+              }
+            ),
+            unit && /* @__PURE__ */ jsx("span", { className: "editor-number-input-unit", children: unit })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "editor-number-input-btn",
+              onMouseDown: () => startLongPress(step),
+              onMouseUp: stopLongPress,
+              onMouseLeave: stopLongPress,
+              onTouchStart: () => startLongPress(step),
+              onTouchEnd: stopLongPress,
+              tabIndex: -1,
+              children: /* @__PURE__ */ jsx(Plus, { size: 14 })
+            }
+          )
+        ] });
+      }
+    );
+    NumberInput.displayName = "NumberInput";
+  }
+});
 var Slot;
 var init_slot = __esm({
   "src/ui/slot.tsx"() {
@@ -7881,11 +7977,11 @@ var init_slot = __esm({
   }
 });
 function Popover({ children, open: controlledOpen, defaultOpen = false, onOpenChange, modal = false }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React20.useState(defaultOpen);
-  const triggerRef = React20.useRef(null);
+  const [uncontrolledOpen, setUncontrolledOpen] = React21.useState(defaultOpen);
+  const triggerRef = React21.useRef(null);
   const open = controlledOpen ?? uncontrolledOpen;
   const setOpen = onOpenChange ?? setUncontrolledOpen;
-  const contextValue = React20.useMemo(() => ({
+  const contextValue = React21.useMemo(() => ({
     open,
     setOpen,
     triggerRef,
@@ -7894,17 +7990,17 @@ function Popover({ children, open: controlledOpen, defaultOpen = false, onOpenCh
   return /* @__PURE__ */ jsx(PopoverContext.Provider, { value: contextValue, children });
 }
 function PopoverTrigger({ children, asChild, ...props }) {
-  const context = React20.useContext(PopoverContext);
+  const context = React21.useContext(PopoverContext);
   if (!context) throw new Error("PopoverTrigger must be used within Popover");
   const { triggerRef, open, setOpen } = context;
   const handleClick = (e) => {
     setOpen(!open);
-    if (React20.isValidElement(children)) {
+    if (React21.isValidElement(children)) {
       children.props.onClick?.(e);
     }
   };
-  if (asChild && React20.isValidElement(children)) {
-    return React20.cloneElement(children, {
+  if (asChild && React21.isValidElement(children)) {
+    return React21.cloneElement(children, {
       ref: triggerRef,
       onClick: handleClick,
       ...props
@@ -7922,10 +8018,10 @@ function PopoverTrigger({ children, asChild, ...props }) {
   );
 }
 function PopoverContent({ children, className, align = "center", sideOffset = 4, ...props }) {
-  const context = React20.useContext(PopoverContext);
-  const [position, setPosition] = React20.useState({ top: 0, left: 0 });
-  const contentRef = React20.useRef(null);
-  React20.useEffect(() => {
+  const context = React21.useContext(PopoverContext);
+  const [position, setPosition] = React21.useState({ top: 0, left: 0 });
+  const contentRef = React21.useRef(null);
+  React21.useEffect(() => {
     if (context?.open && context.triggerRef.current) {
       const rect = context.triggerRef.current.getBoundingClientRect();
       let left = rect.left;
@@ -7975,7 +8071,7 @@ var PopoverContext;
 var init_popover = __esm({
   "src/ui/popover.tsx"() {
     init_utils();
-    PopoverContext = React20.createContext(null);
+    PopoverContext = React21.createContext(null);
   }
 });
 function setRef(ref, value) {
@@ -8011,7 +8107,7 @@ function composeRefs(...refs) {
   };
 }
 function useComposedRefs(...refs) {
-  return React20.useCallback(
+  return React21.useCallback(
     (value) => {
       composeRefs(...refs)(value);
     },
@@ -8029,19 +8125,19 @@ function VisuallyHiddenInput(props) {
     style,
     ...inputProps
   } = props;
-  const isCheckInput = React20.useMemo(
+  const isCheckInput = React21.useMemo(
     () => type === "checkbox" || type === "radio" || type === "switch",
     [type]
   );
-  const inputRef = React20.useRef(null);
-  const prevValueRef = React20.useRef({
+  const inputRef = React21.useRef(null);
+  const prevValueRef = React21.useRef({
     value: isCheckInput ? checked : value,
     previous: isCheckInput ? checked : value
   });
-  const [prevValue, setPrevValue] = React20.useState(
+  const [prevValue, setPrevValue] = React21.useState(
     isCheckInput ? checked : value
   );
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     const currentValue = isCheckInput ? checked : value;
     if (prevValueRef.current.value !== currentValue) {
       prevValueRef.current.previous = prevValueRef.current.value;
@@ -8049,8 +8145,8 @@ function VisuallyHiddenInput(props) {
       setPrevValue(prevValueRef.current.previous);
     }
   }, [isCheckInput, value, checked]);
-  const [controlSize, setControlSize] = React20.useState({});
-  React20.useLayoutEffect(() => {
+  const [controlSize, setControlSize] = React21.useState({});
+  React21.useLayoutEffect(() => {
     if (!control) {
       setControlSize({});
       return;
@@ -8082,7 +8178,7 @@ function VisuallyHiddenInput(props) {
       resizeObserver.disconnect();
     };
   }, [control]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     const input = inputRef.current;
     if (!input) return;
     const inputProto = window.HTMLInputElement.prototype;
@@ -8098,7 +8194,7 @@ function VisuallyHiddenInput(props) {
       input.dispatchEvent(event);
     }
   }, [prevValue, value, checked, bubbles, isCheckInput]);
-  const composedStyle = React20.useMemo(() => {
+  const composedStyle = React21.useMemo(() => {
     return {
       ...style,
       ...controlSize.width !== void 0 && controlSize.height !== void 0 ? controlSize : {},
@@ -8410,11 +8506,11 @@ function parseColorString(value) {
   return null;
 }
 function useDirection(dirProp) {
-  const contextDir = React20.useContext(DirectionContext);
+  const contextDir = React21.useContext(DirectionContext);
   return dirProp ?? contextDir ?? "ltr";
 }
 function useLazyRef(fn) {
-  const ref = React20.useRef(null);
+  const ref = React21.useRef(null);
   if (ref.current === null) {
     ref.current = fn();
   }
@@ -8488,7 +8584,7 @@ function createColorPickerStore(listenersRef, stateRef, callbacks) {
   return store;
 }
 function useColorPickerStoreContext(consumerName) {
-  const context = React20.useContext(ColorPickerStoreContext);
+  const context = React21.useContext(ColorPickerStoreContext);
   if (!context) {
     throw new Error(
       `\`${consumerName}\` must be used within \`ColorPickerRoot\``
@@ -8498,14 +8594,14 @@ function useColorPickerStoreContext(consumerName) {
 }
 function useColorPickerStore(selector) {
   const store = useColorPickerStoreContext("useColorPickerStoreSelector");
-  const getSnapshot = React20.useCallback(
+  const getSnapshot = React21.useCallback(
     () => selector(store.getState()),
     [store, selector]
   );
-  return React20.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+  return React21.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
 }
 function useColorPickerContext(consumerName) {
-  const context = React20.useContext(ColorPickerContext);
+  const context = React21.useContext(ColorPickerContext);
   if (!context) {
     throw new Error(
       `\`${consumerName}\` must be used within \`ColorPickerRoot\``
@@ -8532,12 +8628,12 @@ function ColorPickerRootImpl(props) {
   } = props;
   const store = useColorPickerStoreContext("ColorPickerRootImpl");
   const dir = useDirection(dirProp);
-  const [formTrigger, setFormTrigger] = React20.useState(
+  const [formTrigger, setFormTrigger] = React21.useState(
     null
   );
   const composedRef = useComposedRefs(ref, (node) => setFormTrigger(node));
   const isFormControl = formTrigger ? !!formTrigger.closest("form") : true;
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (valueProp !== void 0) {
       const color = parseColorString(valueProp);
       if (color) {
@@ -8547,12 +8643,12 @@ function ColorPickerRootImpl(props) {
       }
     }
   }, [valueProp, store]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (openProp !== void 0) {
       store.setOpen(openProp);
     }
   }, [openProp, store]);
-  const contextValue = React20.useMemo(
+  const contextValue = React21.useMemo(
     () => ({
       dir,
       disabled,
@@ -8564,7 +8660,7 @@ function ColorPickerRootImpl(props) {
   );
   const value = useColorPickerStore((state) => rgbToHex(state.color));
   const open = useColorPickerStore((state) => state.open);
-  const onPopoverOpenChange = React20.useCallback(
+  const onPopoverOpenChange = React21.useCallback(
     (newOpen) => {
       store.setOpen(newOpen);
       onOpenChange?.(newOpen);
@@ -8650,10 +8746,10 @@ function ColorPickerArea(props) {
   const context = useColorPickerContext("ColorPickerArea");
   const store = useColorPickerStoreContext("ColorPickerArea");
   const hsv = useColorPickerStore((state) => state.hsv);
-  const isDraggingRef = React20.useRef(false);
-  const areaRef = React20.useRef(null);
+  const isDraggingRef = React21.useRef(false);
+  const areaRef = React21.useRef(null);
   const composedRef = useComposedRefs(ref, areaRef);
-  const updateColorFromPosition = React20.useCallback(
+  const updateColorFromPosition = React21.useCallback(
     (clientX, clientY) => {
       if (!areaRef.current) return;
       const rect = areaRef.current.getBoundingClientRect();
@@ -8670,7 +8766,7 @@ function ColorPickerArea(props) {
     },
     [hsv, store]
   );
-  const onPointerDown = React20.useCallback(
+  const onPointerDown = React21.useCallback(
     (event) => {
       if (context.disabled) return;
       event.preventDefault();
@@ -8680,7 +8776,7 @@ function ColorPickerArea(props) {
     },
     [context.disabled, updateColorFromPosition]
   );
-  const onPointerMove = React20.useCallback(
+  const onPointerMove = React21.useCallback(
     (event) => {
       if (isDraggingRef.current) {
         updateColorFromPosition(event.clientX, event.clientY);
@@ -8688,7 +8784,7 @@ function ColorPickerArea(props) {
     },
     [updateColorFromPosition]
   );
-  const onPointerUp = React20.useCallback((event) => {
+  const onPointerUp = React21.useCallback((event) => {
     isDraggingRef.current = false;
     areaRef.current?.releasePointerCapture(event.pointerId);
   }, []);
@@ -8758,7 +8854,7 @@ function ColorPickerHueSlider(props) {
   const context = useColorPickerContext("ColorPickerHueSlider");
   const store = useColorPickerStoreContext("ColorPickerHueSlider");
   const hsv = useColorPickerStore((state) => state.hsv);
-  const onValueChange = React20.useCallback(
+  const onValueChange = React21.useCallback(
     (values) => {
       const newHsv = {
         h: values[0] ?? 0,
@@ -8798,7 +8894,7 @@ function ColorPickerAlphaSlider(props) {
   const store = useColorPickerStoreContext("ColorPickerAlphaSlider");
   const color = useColorPickerStore((state) => state.color);
   const hsv = useColorPickerStore((state) => state.hsv);
-  const onValueChange = React20.useCallback(
+  const onValueChange = React21.useCallback(
     (values) => {
       const alpha = (values[0] ?? 0) / 100;
       const newColor = { ...color, a: alpha };
@@ -8857,7 +8953,7 @@ function ColorPickerEyeDropper(props) {
   const context = useColorPickerContext("ColorPickerEyeDropper");
   const store = useColorPickerStoreContext("ColorPickerEyeDropper");
   const color = useColorPickerStore((state) => state.color);
-  const onEyeDropper = React20.useCallback(async () => {
+  const onEyeDropper = React21.useCallback(async () => {
     if (!window.EyeDropper) return;
     try {
       const eyeDropper = new window.EyeDropper();
@@ -8894,7 +8990,7 @@ function ColorPickerFormatSelect(props) {
   const context = useColorPickerContext("ColorPickerFormatSelector");
   const store = useColorPickerStoreContext("ColorPickerFormatSelector");
   const format = useColorPickerStore((state) => state.format);
-  const onFormatChange = React20.useCallback(
+  const onFormatChange = React21.useCallback(
     (value) => {
       if (colorFormats.includes(value)) {
         store.setFormat(value);
@@ -8931,7 +9027,7 @@ function ColorPickerInput(props) {
   const color = useColorPickerStore((state) => state.color);
   const format = useColorPickerStore((state) => state.format);
   const hsv = useColorPickerStore((state) => state.hsv);
-  const onColorChange = React20.useCallback(
+  const onColorChange = React21.useCallback(
     (newColor) => {
       const newHsv = rgbToHsv(newColor);
       store.setColor(newColor);
@@ -9013,7 +9109,7 @@ function HexInput(props) {
   } = props;
   const hexValue = rgbToHex(color);
   const alphaValue = Math.round((color?.a ?? 1) * 100);
-  const onHexChange = React20.useCallback(
+  const onHexChange = React21.useCallback(
     (event) => {
       const value = event.target.value;
       const parsedColor = parseColorString(value);
@@ -9023,7 +9119,7 @@ function HexInput(props) {
     },
     [color, onColorChange]
   );
-  const onAlphaChange = React20.useCallback(
+  const onAlphaChange = React21.useCallback(
     (event) => {
       const value = Number.parseInt(event.target.value, 10);
       if (!Number.isNaN(value) && value >= 0 && value <= 100) {
@@ -9100,7 +9196,7 @@ function RgbInput(props) {
   const gValue = Math.round(color?.g ?? 0);
   const bValue = Math.round(color?.b ?? 0);
   const alphaValue = Math.round((color?.a ?? 1) * 100);
-  const onChannelChange = React20.useCallback(
+  const onChannelChange = React21.useCallback(
     (channel, max, isAlpha = false) => (event) => {
       const value = Number.parseInt(event.target.value, 10);
       if (!Number.isNaN(value) && value >= 0 && value <= max) {
@@ -9197,9 +9293,9 @@ function HslInput(props) {
     className,
     ...inputProps
   } = props;
-  const hsl = React20.useMemo(() => rgbToHsl(color), [color]);
+  const hsl = React21.useMemo(() => rgbToHsl(color), [color]);
   const alphaValue = Math.round((color?.a ?? 1) * 100);
-  const onHslChannelChange = React20.useCallback(
+  const onHslChannelChange = React21.useCallback(
     (channel, max) => (event) => {
       const value = Number.parseInt(event.target.value, 10);
       if (!Number.isNaN(value) && value >= 0 && value <= max) {
@@ -9210,7 +9306,7 @@ function HslInput(props) {
     },
     [hsl, color, onColorChange]
   );
-  const onAlphaChange = React20.useCallback(
+  const onAlphaChange = React21.useCallback(
     (event) => {
       const value = Number.parseInt(event.target.value, 10);
       if (!Number.isNaN(value) && value >= 0 && value <= 100) {
@@ -9307,7 +9403,7 @@ function HsbInput(props) {
     ...inputProps
   } = props;
   const alphaValue = Math.round((hsv?.a ?? 1) * 100);
-  const onHsvChannelChange = React20.useCallback(
+  const onHsvChannelChange = React21.useCallback(
     (channel, max) => (event) => {
       const value = Number.parseInt(event.target.value, 10);
       if (!Number.isNaN(value) && value >= 0 && value <= max) {
@@ -9318,7 +9414,7 @@ function HsbInput(props) {
     },
     [hsv, onColorChange]
   );
-  const onAlphaChange = React20.useCallback(
+  const onAlphaChange = React21.useCallback(
     (event) => {
       const value = Number.parseInt(event.target.value, 10);
       if (!Number.isNaN(value) && value >= 0 && value <= 100) {
@@ -9411,7 +9507,7 @@ function ColorPickerPresets(props) {
   const context = useColorPickerContext("ColorPickerPresets");
   const store = useColorPickerStoreContext("ColorPickerPresets");
   const color = useColorPickerStore((state) => state.color);
-  const onPresetClick = React20.useCallback(
+  const onPresetClick = React21.useCallback(
     (hex, alpha) => {
       const nextAlpha = alpha ?? (color?.a ?? 1);
       const newColor = hexToRgb(hex, nextAlpha);
@@ -9472,14 +9568,14 @@ var init_color_picker = __esm({
       // --muted in light theme is #F5F5F5, /50 -> alpha 0.5
       { label: "bg-muted/50", value: "#F5F5F5", alpha: 0.5 }
     ];
-    DirectionContext = React20.createContext(void 0);
-    ColorPickerStoreContext = React20.createContext(
+    DirectionContext = React21.createContext(void 0);
+    ColorPickerStoreContext = React21.createContext(
       null
     );
-    ColorPickerContext = React20.createContext(
+    ColorPickerContext = React21.createContext(
       null
     );
-    ColorPickerRoot = React20.memo(function ColorPickerRoot2(props) {
+    ColorPickerRoot = React21.memo(function ColorPickerRoot2(props) {
       const {
         value: valueProp,
         defaultValue = "#000000",
@@ -9497,7 +9593,7 @@ var init_color_picker = __esm({
         required,
         ...rootProps
       } = props;
-      const initialColor = React20.useMemo(() => {
+      const initialColor = React21.useMemo(() => {
         const colorString = valueProp ?? defaultValue;
         const color = parseColorString(colorString) ?? hexToRgb(defaultValue);
         return {
@@ -9516,7 +9612,7 @@ var init_color_picker = __esm({
       ]);
       const stateRef = useLazyRef(() => initialColor);
       const listenersRef = useLazyRef(() => /* @__PURE__ */ new Set());
-      const storeCallbacks = React20.useMemo(
+      const storeCallbacks = React21.useMemo(
         () => ({
           onColorChange: onValueChange,
           onOpenChange,
@@ -9524,7 +9620,7 @@ var init_color_picker = __esm({
         }),
         [onValueChange, onOpenChange, onFormatChange]
       );
-      const store = React20.useMemo(
+      const store = React21.useMemo(
         () => createColorPickerStore(listenersRef, stateRef, storeCallbacks),
         [listenersRef, stateRef, storeCallbacks]
       );
@@ -9557,13 +9653,15 @@ function InsertLayoutDialog({
   const [backgroundColor, setBackgroundColor] = useState(
     initialValues?.itemBackgroundColor ?? "#ffffff"
   );
-  const [paddingPx, setPaddingPx] = useState(initialValues?.itemPaddingPx ?? 12);
+  const [paddingXPx, setPaddingXPx] = useState(initialValues?.itemPaddingXPx ?? 12);
+  const [paddingYPx, setPaddingYPx] = useState(initialValues?.itemPaddingYPx ?? 12);
   const [borderRadiusPx, setBorderRadiusPx] = useState(
     initialValues?.itemBorderRadiusPx ?? 8
   );
   const layoutRef = useRef(layout);
   const backgroundColorRef = useRef(backgroundColor);
-  const paddingPxRef = useRef(paddingPx);
+  const paddingXPxRef = useRef(paddingXPx);
+  const paddingYPxRef = useRef(paddingYPx);
   const borderRadiusPxRef = useRef(borderRadiusPx);
   useEffect(() => {
     layoutRef.current = layout;
@@ -9572,8 +9670,11 @@ function InsertLayoutDialog({
     backgroundColorRef.current = backgroundColor;
   }, [backgroundColor]);
   useEffect(() => {
-    paddingPxRef.current = paddingPx;
-  }, [paddingPx]);
+    paddingXPxRef.current = paddingXPx;
+  }, [paddingXPx]);
+  useEffect(() => {
+    paddingYPxRef.current = paddingYPx;
+  }, [paddingYPx]);
   useEffect(() => {
     borderRadiusPxRef.current = borderRadiusPx;
   }, [borderRadiusPx]);
@@ -9581,10 +9682,15 @@ function InsertLayoutDialog({
     backgroundColorRef.current = value;
     setBackgroundColor(value);
   };
-  const onPaddingChange = (next) => {
+  const onPaddingXChange = (next) => {
+    const value = Math.min(Math.max(next, 0), 64);
+    paddingXPxRef.current = value;
+    setPaddingXPx(value);
+  };
+  const onPaddingYChange = (next) => {
     const value = Math.min(Math.max(next, 0), 64);
-    paddingPxRef.current = value;
-    setPaddingPx(value);
+    paddingYPxRef.current = value;
+    setPaddingYPx(value);
   };
   const onBorderRadiusChange = (next) => {
     const value = Math.min(Math.max(next, 0), 64);
@@ -9596,7 +9702,8 @@ function InsertLayoutDialog({
     const values = {
       template: layoutRef.current,
       itemBackgroundColor: backgroundColorRef.current,
-      itemPaddingPx: paddingPxRef.current,
+      itemPaddingXPx: paddingXPxRef.current,
+      itemPaddingYPx: paddingYPxRef.current,
       itemBorderRadiusPx: borderRadiusPxRef.current
     };
     logger.info("[Layout] Submit dialog values", {
@@ -9611,13 +9718,13 @@ function InsertLayoutDialog({
     activeEditor.dispatchCommand(INSERT_LAYOUT_COMMAND, values);
     onClose();
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, children: [
     /* @__PURE__ */ jsxs(Select, { onValueChange: setLayout, value: layout, children: [
       /* @__PURE__ */ jsx(SelectTrigger, { className: "editor-input-lg editor-w-full", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: buttonLabel }) }),
       /* @__PURE__ */ jsx(SelectContent, { className: "editor-w-full", children: LAYOUTS.map(({ label, value }) => /* @__PURE__ */ jsx(SelectItem, { value, children: label }, value)) })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "editor-layout-dialog-grid", children: [
-      /* @__PURE__ */ jsxs("div", { className: "editor-layout-dialog-group", children: [
+      /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1.5, children: [
         /* @__PURE__ */ jsx("div", { className: "editor-text-xs-muted", children: "Background" }),
         /* @__PURE__ */ jsxs(
           ColorPickerRoot,
@@ -9663,47 +9770,39 @@ function InsertLayoutDialog({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "editor-layout-dialog-group", children: [
-        /* @__PURE__ */ jsx("div", { className: "editor-text-xs-muted", children: "Padding (px)" }),
+      /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1.5, children: [
+        /* @__PURE__ */ jsx("div", { className: "editor-text-xs-muted", children: "Padding X (px)" }),
         /* @__PURE__ */ jsx(
-          Input,
+          NumberInput,
           {
-            type: "number",
             min: 0,
             max: 64,
-            step: 1,
-            value: paddingPx,
-            onChange: (event) => {
-              const next = Number.parseInt(event.target.value, 10);
-              if (Number.isFinite(next)) {
-                onPaddingChange(next);
-              } else {
-                onPaddingChange(0);
-              }
-            },
-            className: "editor-input-lg editor-w-full"
+            value: paddingXPx,
+            onValueChange: onPaddingXChange
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "editor-layout-dialog-group", children: [
+      /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1.5, children: [
+        /* @__PURE__ */ jsx("div", { className: "editor-text-xs-muted", children: "Padding Y (px)" }),
+        /* @__PURE__ */ jsx(
+          NumberInput,
+          {
+            min: 0,
+            max: 64,
+            value: paddingYPx,
+            onValueChange: onPaddingYChange
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1.5, children: [
         /* @__PURE__ */ jsx("div", { className: "editor-text-xs-muted", children: "Border radius (px)" }),
         /* @__PURE__ */ jsx(
-          Input,
+          NumberInput,
           {
-            type: "number",
             min: 0,
             max: 64,
-            step: 1,
             value: borderRadiusPx,
-            onChange: (event) => {
-              const next = Number.parseInt(event.target.value, 10);
-              if (Number.isFinite(next)) {
-                onBorderRadiusChange(next);
-              } else {
-                onBorderRadiusChange(0);
-              }
-            },
-            className: "editor-input-lg editor-w-full"
+            onValueChange: onBorderRadiusChange
           }
         )
       ] })
@@ -9754,23 +9853,32 @@ function LayoutPlugin() {
       if (!value) {
         return void 0;
       }
-      const match = value.match(/^(\d+)px$/i);
-      if (!match?.[1]) {
-        return void 0;
-      }
-      const parsed = Number.parseInt(match[1], 10);
-      return Number.isFinite(parsed) ? parsed : void 0;
+      const values = value.replace(/!important/gi, "").trim().split(/\s+/);
+      const parsedValues = values.map((v) => {
+        const match = v.match(/^(\d+)px/i);
+        if (!match?.[1]) return null;
+        const parsed = Number.parseInt(match[1], 10);
+        return Number.isFinite(parsed) ? parsed : null;
+      }).filter((v) => v !== null);
+      if (parsedValues.length === 0) return void 0;
+      return parsedValues;
     };
     const buildLayoutItemStyle = ({
       itemBackgroundColor,
-      itemPaddingPx,
+      itemPaddingXPx,
+      itemPaddingYPx,
       itemBorderRadiusPx
     }) => {
       const itemStyles = [];
       if (itemBackgroundColor.trim()) {
         itemStyles.push(`background-color: ${itemBackgroundColor.trim()}`);
       }
-      itemStyles.push(`padding: ${Math.min(Math.max(itemPaddingPx, 0), 64)}px`);
+      itemStyles.push(
+        `padding: ${Math.min(Math.max(itemPaddingYPx, 0), 64)}px ${Math.min(
+          Math.max(itemPaddingXPx, 0),
+          64
+        )}px`
+      );
       itemStyles.push(
         `border-radius: ${Math.min(Math.max(itemBorderRadiusPx, 0), 64)}px`
       );
@@ -9783,7 +9891,10 @@ function LayoutPlugin() {
         return;
       }
       const background = values.itemBackgroundColor.trim();
-      const padding = `${Math.min(Math.max(values.itemPaddingPx, 0), 64)}px`;
+      const padding = `${Math.min(Math.max(values.itemPaddingYPx, 0), 64)}px ${Math.min(
+        Math.max(values.itemPaddingXPx, 0),
+        64
+      )}px`;
       const borderRadius = `${Math.min(Math.max(values.itemBorderRadiusPx, 0), 64)}px`;
       if (background) {
         element.style.setProperty("background-color", background);
@@ -9834,14 +9945,17 @@ function LayoutPlugin() {
           return;
         }
         const style = layoutItem.getStyle();
+        const paddingValues = extractNumericStyle(style, "padding");
+        const borderRadiusValues = extractNumericStyle(style, "border-radius");
         payload = {
           containerKey: parentContainer.getKey(),
           layoutItemKey: layoutItem.getKey(),
           values: {
             template: parentContainer.getTemplateColumns(),
             itemBackgroundColor: extractStyleValue(style, "background-color") ?? "#ffffff",
-            itemPaddingPx: extractNumericStyle(style, "padding") ?? 12,
-            itemBorderRadiusPx: extractNumericStyle(style, "border-radius") ?? 8
+            itemPaddingXPx: paddingValues && paddingValues.length > 1 ? paddingValues[1] : paddingValues?.[0] ?? 12,
+            itemPaddingYPx: paddingValues?.[0] ?? 12,
+            itemBorderRadiusPx: borderRadiusValues?.[0] ?? 8
           }
         };
         logger.debug("[Layout] Resolved payload from target", payload);
@@ -9954,11 +10068,13 @@ function LayoutPlugin() {
           editor.update(() => {
             const template = typeof payload === "string" ? payload : payload.template;
             const itemBackgroundColor = typeof payload === "string" ? void 0 : payload.itemBackgroundColor?.trim();
-            const itemPaddingPx = typeof payload === "string" ? void 0 : typeof payload.itemPaddingPx === "number" && Number.isFinite(payload.itemPaddingPx) ? Math.min(Math.max(payload.itemPaddingPx, 0), 64) : void 0;
+            const itemPaddingXPx = typeof payload === "string" ? void 0 : typeof payload.itemPaddingXPx === "number" && Number.isFinite(payload.itemPaddingXPx) ? Math.min(Math.max(payload.itemPaddingXPx, 0), 64) : void 0;
+            const itemPaddingYPx = typeof payload === "string" ? void 0 : typeof payload.itemPaddingYPx === "number" && Number.isFinite(payload.itemPaddingYPx) ? Math.min(Math.max(payload.itemPaddingYPx, 0), 64) : void 0;
             const itemBorderRadiusPx = typeof payload === "string" ? void 0 : typeof payload.itemBorderRadiusPx === "number" && Number.isFinite(payload.itemBorderRadiusPx) ? Math.min(Math.max(payload.itemBorderRadiusPx, 0), 64) : void 0;
             const itemStyle = buildLayoutItemStyle({
               itemBackgroundColor: itemBackgroundColor ?? "#ffffff",
-              itemPaddingPx: itemPaddingPx ?? 12,
+              itemPaddingXPx: itemPaddingXPx ?? 12,
+              itemPaddingYPx: itemPaddingYPx ?? 12,
               itemBorderRadiusPx: itemBorderRadiusPx ?? 8
             });
             const container = $createLayoutContainerNode(template);
@@ -10029,9 +10145,9 @@ var init_layout_plugin = __esm({
     init_layout_container_node();
     init_layout_item_node();
     init_button();
+    init_number_input();
     init_select();
     init_color_picker();
-    init_input();
     init_flex();
     init_use_modal();
     init_logger();
@@ -10068,7 +10184,7 @@ function applyListColor(editor) {
 function ListColorPlugin() {
   const [editor] = useLexicalComposerContext();
   const [modal, showModal] = useEditorModal();
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     const applyColor = (color, listKey) => {
       listColorStore.set(listKey, color);
       editor.update(() => {
@@ -10114,7 +10230,7 @@ function ListColorPlugin() {
           const fromAttr = listEl.getAttribute("data-list-color");
           const initialColor = fromStore || fromVar || fromAttr || "#000000";
           function ListColorModalContent({ onClose }) {
-            const [color, setColor] = React20.useState(initialColor);
+            const [color, setColor] = React21.useState(initialColor);
             return /* @__PURE__ */ jsx("div", { className: "editor-list-color-dialog", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, children: [
               /* @__PURE__ */ jsx("div", { className: "editor-text-xs-muted", children: "Ch\u1ECDn m\xE0u cho bullet ho\u1EB7c s\u1ED1 th\u1EE9 t\u1EF1 c\u1EE7a list." }),
               /* @__PURE__ */ jsx(
@@ -28570,10 +28686,10 @@ var ToggleGroupContext, ToggleGroup, ToggleGroupItem;
 var init_toggle_group = __esm({
   "src/ui/toggle-group.tsx"() {
     init_utils();
-    ToggleGroupContext = React20.createContext(null);
-    ToggleGroup = React20.forwardRef(
+    ToggleGroupContext = React21.createContext(null);
+    ToggleGroup = React21.forwardRef(
       ({ className, type = "single", value, onValueChange, children, size, variant, ...props }, ref) => {
-        const contextValue = React20.useMemo(() => ({
+        const contextValue = React21.useMemo(() => ({
           type,
           value: value || (type === "multiple" ? [] : ""),
           onValueChange: (val) => {
@@ -28590,8 +28706,8 @@ var init_toggle_group = __esm({
       }
     );
     ToggleGroup.displayName = "ToggleGroup";
-    ToggleGroupItem = React20.forwardRef(({ className, value, onClick, size: itemSize, variant: itemVariant, ...props }, ref) => {
-      const context = React20.useContext(ToggleGroupContext);
+    ToggleGroupItem = React21.forwardRef(({ className, value, onClick, size: itemSize, variant: itemVariant, ...props }, ref) => {
+      const context = React21.useContext(ToggleGroupContext);
       const size = itemSize || context?.size || "default";
       if (!context) {
         return /* @__PURE__ */ jsx(
@@ -32187,7 +32303,7 @@ var Toggle;
 var init_toggle = __esm({
   "src/ui/toggle.tsx"() {
     init_utils();
-    Toggle = React20.forwardRef(({ className, pressed, onPressedChange, variant = "default", size = "default", ...props }, ref) => /* @__PURE__ */ jsx(
+    Toggle = React21.forwardRef(({ className, pressed, onPressedChange, variant = "default", size = "default", ...props }, ref) => /* @__PURE__ */ jsx(
       "button",
       {
         ref,
@@ -32839,7 +32955,8 @@ __export(plugins_exports, {
   Plugins: () => Plugins
 });
 function Plugins({
-  readOnly = false
+  readOnly = false,
+  placeholder = ""
 }) {
   const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
   const [isLinkEditMode, setIsLinkEditMode] = useState(false);
@@ -33047,9 +33164,9 @@ function Plugins({
       ] })
     ] }),
     !readOnly && /* @__PURE__ */ jsx(ActionsPlugin, { children: /* @__PURE__ */ jsxs("div", { className: "editor-actions-bar", children: [
-      /* @__PURE__ */ jsx("div", { className: "editor-flex-shrink-0", children: /* @__PURE__ */ jsx(CounterCharacterPlugin, { charset: "UTF-16" }) }),
+      /* @__PURE__ */ jsx(Flex, { align: "center", className: "editor-flex-shrink-0", children: /* @__PURE__ */ jsx(CounterCharacterPlugin, { charset: "UTF-16" }) }),
       /* @__PURE__ */ jsx("div", { className: "editor-flex-1" }),
-      /* @__PURE__ */ jsxs("div", { className: "editor-flex-shrink-0 editor-flex-end", children: [
+      /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "end", gap: 1, wrap: "nowrap", className: "editor-flex-shrink-0", children: [
         /* @__PURE__ */ jsx(SpeechToTextPlugin, {}),
         /* @__PURE__ */ jsx(ShareContentPlugin, {}),
         /* @__PURE__ */ jsx(ImportExportPlugin, {}),
@@ -33079,7 +33196,6 @@ function Plugins({
     ] }) })
   ] });
 }
-var placeholder;
 var init_plugins = __esm({
   "src/editor-x/plugins.tsx"() {
     "use client";
@@ -33168,7 +33284,7 @@ var init_plugins = __esm({
     init_markdown_tweet_transformer();
     init_markdown_list_transformer();
     init_separator();
-    placeholder = "Press / for commands...";
+    init_flex();
   }
 });
 
@@ -33312,7 +33428,8 @@ function Editor({
   editorSerializedState,
   onChange,
   onSerializedChange,
-  readOnly = false
+  readOnly = false,
+  placeholder = ""
 }) {
   const { ref: editorRef, width: editorWidth } = useElementSize();
   const editorMaxWidth = editorWidth || void 0;
@@ -33366,7 +33483,7 @@ function Editor({
             ...editorSerializedState ? { editorState: JSON.stringify(editorSerializedState) } : {}
           },
           children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
-            /* @__PURE__ */ jsx(Plugins2, { readOnly }),
+            /* @__PURE__ */ jsx(Plugins2, { readOnly, placeholder }),
             !readOnly && /* @__PURE__ */ jsx(
               OnChangePlugin,
               {