@bizapps/design-system-testing 1.0.11 → 1.7.1

package/dist/editor.js

@@ -0,0 +1,1455 @@
+"use client";
+import { createContext, useId, useState, useCallback, useMemo, useRef, useEffect, useContext } from 'react';
+import { EditorContent, ReactNodeViewRenderer, useEditor, NodeViewWrapper, useEditorState } from '@tiptap/react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { Slot, Label as Label$1, DropdownMenu as DropdownMenu$1, Dialog as Dialog$1 } from 'radix-ui';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { Trash2, ChevronDown, Check, Bold, Italic, Heading2, Highlighter, Underline, Strikethrough, Quote, List, ListOrdered, Link, ImagePlus, Table, Ban, LoaderCircle, XIcon, UploadIcon, ExternalLink, Pencil, Unlink } from 'lucide-react';
+import { motion, AnimatePresence } from 'motion/react';
+import { useDropzone } from 'react-dropzone';
+import Highlight from '@tiptap/extension-highlight';
+import { TableKit } from '@tiptap/extension-table';
+import StarterKit from '@tiptap/starter-kit';
+import { Image } from '@tiptap/extension-image';
+import { BubbleMenu } from '@tiptap/react/menus';
+
+// src/components/compounds/RichTextEditor/rich-text-editor.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Label$1.Root,
+    {
+      "data-slot": "label",
+      className: cn(
+        "text-foreground text-sm leading-6 font-medium transition-colors select-none",
+        "group-has-disabled/field:cursor-not-allowed group-has-disabled/field:opacity-50",
+        "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        "aria-invalid:text-destructive dark:aria-invalid:text-destructive/90",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center gap-2 rounded-lg border border-transparent bg-clip-padding text-sm font-semibold whitespace-nowrap transition-all duration-150 outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 data-[loading]:cursor-not-allowed data-[loading]:opacity-80 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        primary: "cursor-pointer bg-primary text-primary-foreground hover:bg-primary/80 focus-visible:ring-primary/30",
+        secondary: "cursor-pointer bg-secondary text-secondary-foreground hover:bg-[var(--color-orange-700)] focus-visible:ring-secondary/30",
+        cancel: "cursor-pointer bg-destructive text-secondary-foreground hover:bg-[var(--color-red-600)] focus-visible:ring-destructive/30",
+        outline: "border border-foreground/50 bg-transparent text-muted-foreground hover:bg-foreground/50 hover:text-white",
+        ghost: "cursor-pointer bg-transparent text-muted-foreground hover:bg-foreground/10 hover:text-primary focus-visible:ring-ring/30 border-none",
+        cancelGhost: "cursor-pointer bg-destructive/10 text-red-600 hover:bg-destructive/15 hover:text-red-600 focus-visible:ring-ring/30"
+      },
+      size: {
+        sm: "h-8 px-3 text-xs",
+        md: "h-9 px-4 text-sm",
+        lg: "h-10 px-6 text-sm",
+        "icon-sm": "size-8 rounded-full p-0"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "primary",
+  size = "md",
+  asChild = false,
+  isLoading = false,
+  children,
+  onClick,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button";
+  function handleClick(e) {
+    if (isLoading) {
+      e.preventDefault();
+      return;
+    }
+    onClick?.(e);
+  }
+  return /* @__PURE__ */ jsxs(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      "data-loading": isLoading || void 0,
+      "aria-busy": isLoading || void 0,
+      className: cn(buttonVariants({ variant, size, className })),
+      onClick: handleClick,
+      ...props,
+      children: [
+        isLoading && /* @__PURE__ */ jsx(LoaderCircle, { size: 16, className: "animate-spin", "aria-hidden": "true" }),
+        children
+      ]
+    }
+  );
+}
+function RichTextToolbar({ editor, items }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "toolbar",
+      "data-slot": "rich-text-toolbar",
+      className: "flex items-center gap-1 rounded-t-md border border-b-0 p-1",
+      children: items.map((item, index) => {
+        if (item.kind === "separator") {
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "rich-text-toolbar-separator",
+              "aria-hidden": "true",
+              className: "bg-border mx-1 h-5 w-px"
+            },
+            `separator-${index}`
+          );
+        }
+        if (item.kind === "custom") {
+          return /* @__PURE__ */ jsx("span", { children: item.render(editor) }, item.id);
+        }
+        const active = item.active ? editor?.isActive(item.active.name, item.active.attrs) ?? false : false;
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: active ? "secondary" : "ghost",
+            disabled: !editor,
+            title: item.label,
+            "aria-label": item.label,
+            "aria-pressed": item.active ? active : void 0,
+            "data-slot": "rich-text-toolbar-button",
+            onClick: () => editor && item.run(editor),
+            children: item.icon
+          },
+          item.id
+        );
+      })
+    }
+  );
+}
+var EDITOR_CONTENT_STYLE = cn(
+  "min-h-[220px] px-3 py-2 text-sm outline-none",
+  "[&_h2]:text-lg [&_h2]:font-semibold",
+  "[&_ol]:my-4 [&_ol]:list-decimal [&_ol]:pl-5 [&_ul]:my-4 [&_ul]:list-disc [&_ul]:pl-5",
+  "[&_blockquote]:border-secondary [&_blockquote]:my-4 [&_blockquote]:ml-4 [&_blockquote]:border-l-4 [&_blockquote]:pl-2",
+  "[&_a]:text-primary [&_a]:underline",
+  // last-of-type, not last-child: prosemirror-tables appends its
+  // .column-resize-handle widget inside the hovered cell, which makes the
+  // cell's <p> stop matching :last-child and springs mb-4 back on — the row
+  // grows 16px on hover. The handle is absolutely positioned but still counts
+  // as a child for structural selectors.
+  "[&_p]:mb-4 [&_p]:min-h-[1.25em] [&_p:last-of-type]:mb-0",
+  // Paragraphs inside a quote sit closer together than body copy. Every Enter
+  // inside a blockquote opens a new <p>, and at the body's mb-4 the lines of a
+  // single quote read as separate paragraphs. Declared after the rule above so
+  // it wins on equal specificity.
+  "[&_blockquote_p]:mb-1 [&_blockquote_p:last-of-type]:mb-0",
+  "[&_img]:my-2 [&_img]:max-w-full [&_img]:rounded-md",
+  "[&_table]:my-3 [&_table]:w-full [&_table]:table-fixed [&_table]:border-collapse",
+  "[&_td]:relative [&_td]:border [&_td]:px-2 [&_td]:py-1 [&_td]:align-top",
+  "[&_th]:bg-muted [&_th]:relative [&_th]:border [&_th]:px-2 [&_th]:py-1 [&_th]:text-left [&_th]:font-semibold",
+  "[&_.selectedCell]:bg-primary/10",
+  // prosemirror-tables renders one handle PER ROW, so the column reads as a
+  // single bar down the table. At full primary it looked like the table had
+  // broken rather than like something to grab — hence the muted tint and the
+  // wider, border-straddling hit area (matches upstream's 4px).
+  "[&_.column-resize-handle]:bg-primary/40 [&_.column-resize-handle]:pointer-events-none [&_.column-resize-handle]:absolute [&_.column-resize-handle]:top-0 [&_.column-resize-handle]:-right-0.5 [&_.column-resize-handle]:bottom-0 [&_.column-resize-handle]:z-20 [&_.column-resize-handle]:w-1",
+  "[&.resize-cursor]:cursor-col-resize",
+  // Selected-node outline, scoped away from images.
+  //
+  // ProseMirror marks whichever node is selected, and this ring is the only
+  // cue for most of them — but an image already announces its selection with a
+  // visible resize handle, so the extra box only framed the picture.
+  //
+  // Excluded via `.node-image`, the class Tiptap puts on the wrapper it
+  // generates for a node view (`div.react-renderer.node-<name>`). That wrapper,
+  // not the NodeViewWrapper inside it, is what receives
+  // ProseMirror-selectednode — so a data-slot on our own element sits one level
+  // too deep to match.
+  "[&_.ProseMirror-selectednode:not(.node-image)]:outline-primary [&_.ProseMirror-selectednode:not(.node-image)]:outline-2 [&_.ProseMirror-selectednode:not(.node-image)]:outline-offset-2 [&_.ProseMirror-selectednode:not(.node-image)]:outline"
+);
+function RichTextEditor({ editor, items, label, error, footer, className }) {
+  const errorId = useId();
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "rich-text-editor", className: cn("flex flex-col gap-1", className), children: [
+    label && /* @__PURE__ */ jsx(Label, { children: label }),
+    /* @__PURE__ */ jsx(RichTextToolbar, { editor, items }),
+    /* @__PURE__ */ jsx(
+      EditorContent,
+      {
+        editor,
+        "aria-invalid": !!error,
+        "aria-errormessage": error ? errorId : void 0,
+        onClick: () => editor?.commands.focus(),
+        className: cn(
+          "rounded-t-none rounded-b-md border shadow-xs",
+          "focus-within:border-ring focus-within:ring-ring/30 focus-within:ring-3",
+          error && "border-destructive"
+        )
+      }
+    ),
+    error && /* @__PURE__ */ jsx("span", { id: errorId, role: "alert", className: "text-destructive text-xs", children: error }),
+    footer
+  ] });
+}
+function DropdownMenu({ ...props }) {
+  return /* @__PURE__ */ jsx(DropdownMenu$1.Root, { ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenu$1.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenu$1.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenu$1.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      align,
+      className: cn(
+        "bg-popover text-popover-foreground ring-foreground/5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:ring-foreground/10 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-48 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-3xl p-1.5 shadow-lg ring-1 duration-100 data-[state=closed]:overflow-hidden",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu$1.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "group/dropdown-menu-item focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:*:[svg]:text-destructive relative flex cursor-default items-center gap-2.5 rounded-2xl px-3 py-2 text-sm font-medium outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu$1.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("bg-border/50 -mx-1.5 my-1.5 h-px", className),
+      ...props
+    }
+  );
+}
+var DEFAULT_ROWS = 8;
+var DEFAULT_COLUMNS = 10;
+function TableMenu({
+  editor,
+  labels,
+  icon,
+  maxRows = DEFAULT_ROWS,
+  maxColumns = DEFAULT_COLUMNS
+}) {
+  const [hovered, setHovered] = useState({ rows: 0, columns: 0 });
+  const insideTable = editor?.can().deleteTable() ?? false;
+  function insert(rows, columns) {
+    editor?.chain().focus().insertTable({ rows, cols: columns, withHeaderRow: true }).run();
+  }
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        size: "sm",
+        variant: editor?.isActive("table") ? "secondary" : "ghost",
+        disabled: !editor,
+        title: labels.trigger,
+        "aria-label": labels.trigger,
+        "data-slot": "table-menu-trigger",
+        children: icon
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", className: "w-56", children: [
+      /* @__PURE__ */ jsxs("div", { role: "none", className: "px-2 py-1.5", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-1.5 text-xs", children: labels.insert }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "grid gap-0.5",
+            style: { gridTemplateColumns: `repeat(${maxColumns}, 1fr)` },
+            onMouseLeave: () => setHovered({ rows: 0, columns: 0 }),
+            children: Array.from({ length: maxRows * maxColumns }, (_, index) => {
+              const rows = Math.floor(index / maxColumns) + 1;
+              const columns = index % maxColumns + 1;
+              const active = rows <= hovered.rows && columns <= hovered.columns;
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": labels.dimensions(rows, columns),
+                  className: cn(
+                    "h-3.5 w-3.5 cursor-pointer rounded-[2px] border",
+                    active ? "bg-primary border-primary" : "bg-background"
+                  ),
+                  onMouseEnter: () => setHovered({ rows, columns }),
+                  onFocus: () => setHovered({ rows, columns }),
+                  onClick: () => insert(rows, columns)
+                },
+                index
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            "aria-live": "polite",
+            "data-slot": "table-menu-dimensions",
+            className: "text-muted-foreground mt-1.5 text-xs tabular-nums",
+            children: labels.dimensions(hovered.rows, hovered.columns)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsx(
+        DropdownMenuItem,
+        {
+          className: "cursor-pointer",
+          disabled: !insideTable,
+          onSelect: () => editor?.chain().focus().addRowBefore().run(),
+          children: labels.rowBefore
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DropdownMenuItem,
+        {
+          className: "cursor-pointer",
+          disabled: !insideTable,
+          onSelect: () => editor?.chain().focus().addRowAfter().run(),
+          children: labels.rowAfter
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DropdownMenuItem,
+        {
+          className: "cursor-pointer",
+          variant: "destructive",
+          disabled: !insideTable,
+          onSelect: () => editor?.chain().focus().deleteRow().run(),
+          children: labels.deleteRow
+        }
+      ),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsx(
+        DropdownMenuItem,
+        {
+          className: "cursor-pointer",
+          disabled: !insideTable,
+          onSelect: () => editor?.chain().focus().addColumnBefore().run(),
+          children: labels.columnBefore
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DropdownMenuItem,
+        {
+          className: "cursor-pointer",
+          disabled: !insideTable,
+          onSelect: () => editor?.chain().focus().addColumnAfter().run(),
+          children: labels.columnAfter
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DropdownMenuItem,
+        {
+          className: "cursor-pointer",
+          variant: "destructive",
+          disabled: !insideTable,
+          onSelect: () => editor?.chain().focus().deleteColumn().run(),
+          children: labels.deleteColumn
+        }
+      ),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsx(
+        DropdownMenuItem,
+        {
+          className: "cursor-pointer",
+          disabled: !insideTable,
+          onSelect: () => editor?.chain().focus().toggleHeaderRow().run(),
+          children: labels.toggleHeader
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DropdownMenuItem,
+        {
+          className: "cursor-pointer",
+          variant: "destructive",
+          disabled: !insideTable,
+          onSelect: () => editor?.chain().focus().deleteTable().run(),
+          children: labels.deleteTable
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/tokens/animation.ts
+var duration = {
+  normal: 0.25};
+var ease = {
+  smooth: [0.4, 0, 0.2, 1]};
+var spring = {
+  gentle: { type: "spring", stiffness: 260, damping: 28 }};
+var transition = {
+  // Modal / dialog — más lento para dar peso al overlay
+  modal: {
+    ...spring.gentle
+  }};
+var DialogContext = createContext(false);
+function Dialog({ children, ...props }) {
+  const [internalOpen, setInternalOpen] = useState(props.defaultOpen ?? false);
+  const isOpen = props.open !== void 0 ? props.open : internalOpen;
+  return /* @__PURE__ */ jsx(DialogContext.Provider, { value: isOpen, children: /* @__PURE__ */ jsx(
+    Dialog$1.Root,
+    {
+      "data-slot": "dialog",
+      open: isOpen,
+      onOpenChange: (v) => {
+        setInternalOpen(v);
+        props.onOpenChange?.(v);
+      },
+      ...props,
+      children
+    }
+  ) });
+}
+function DialogPortal({ children, ...props }) {
+  const isOpen = useContext(DialogContext);
+  return /* @__PURE__ */ jsx(Dialog$1.Portal, { "data-slot": "dialog-portal", forceMount: true, ...props, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "sync", children: isOpen && children }) });
+}
+function DialogOverlay({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Overlay, { "data-slot": "dialog-overlay", asChild: true, forceMount: true, ...props, children: /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: cn(
+        "fixed inset-0 isolate z-50 bg-black/30 supports-backdrop-filter:backdrop-blur-sm",
+        className
+      ),
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: duration.normal, ease: ease.smooth }
+    }
+  ) });
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}, "dialog-overlay"),
+    /* @__PURE__ */ jsx(
+      Dialog$1.Content,
+      {
+        "data-slot": "dialog-content",
+        asChild: true,
+        forceMount: true,
+        className: cn(
+          "bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 fixed top-1/2 left-1/2 z-50 flex max-h-[85vh] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col rounded-lg text-sm shadow-xl ring-1 outline-none sm:max-w-sm",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            className: "flex max-h-[85vh] flex-col",
+            initial: { opacity: 0, scale: 0.96, y: 8 },
+            animate: { opacity: 1, scale: 1, y: 0 },
+            exit: { opacity: 0, scale: 0.96, y: 4 },
+            transition: transition.modal,
+            children: [
+              children,
+              showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, { "data-slot": "dialog-close", asChild: true, children: /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "ghost",
+                  className: "absolute top-4 right-4",
+                  size: "icon-sm",
+                  children: [
+                    /* @__PURE__ */ jsx(XIcon, {}),
+                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+                  ]
+                }
+              ) })
+            ]
+          }
+        )
+      },
+      "dialog-content"
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex shrink-0 flex-col gap-3 px-6 pt-6", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "border-border bg-muted/40 flex shrink-0 flex-wrap items-center justify-end gap-2 rounded-b-lg border-t px-6 pt-4 pb-4",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Close" }) })
+      ]
+    }
+  );
+}
+function DialogTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("font-heading text-lg leading-none font-bold", className),
+      ...props
+    }
+  );
+}
+var renderBytes = (bytes) => {
+  const units = ["B", "KB", "MB", "GB", "TB", "PB"];
+  let size = bytes;
+  let unitIndex = 0;
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024;
+    unitIndex++;
+  }
+  return `${size.toFixed(2)}${units[unitIndex]}`;
+};
+var DropzoneContext = createContext(void 0);
+var dropzoneVariants = cva("", {
+  variants: {
+    border: {
+      default: "border border-solid border-foreground/15",
+      dashed: "border-dashed border-foreground/50"
+    }
+  },
+  defaultVariants: {
+    border: "default"
+  }
+});
+var Dropzone = ({
+  accept,
+  maxFiles = 1,
+  maxSize,
+  minSize,
+  onDrop,
+  onError,
+  disabled,
+  src,
+  className,
+  children,
+  border,
+  ...props
+}) => {
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    accept,
+    maxFiles,
+    maxSize,
+    minSize,
+    onError,
+    disabled,
+    onDrop: (acceptedFiles, fileRejections, event) => {
+      if (fileRejections.length > 0) {
+        const message = fileRejections.at(0)?.errors.at(0)?.message;
+        onError?.(new Error(message));
+      }
+      if (acceptedFiles.length > 0) {
+        onDrop?.(acceptedFiles, fileRejections, event);
+      }
+    },
+    ...props
+  });
+  return /* @__PURE__ */ jsx(
+    DropzoneContext.Provider,
+    {
+      value: { src, accept, maxSize, minSize, maxFiles },
+      children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          "data-slot": "dropzone",
+          "data-border": border ?? "default",
+          className: cn(
+            "cursor-auto relative h-auto w-full flex-col overflow-hidden p-8",
+            dropzoneVariants({ border }),
+            isDragActive && "bg-foreground/10 outline-none",
+            className
+          ),
+          disabled,
+          type: "button",
+          variant: "ghost",
+          ...getRootProps(),
+          children: [
+            /* @__PURE__ */ jsx("input", { ...getInputProps(), disabled }),
+            children
+          ]
+        }
+      )
+    },
+    JSON.stringify(src)
+  );
+};
+var useDropzoneContext = () => {
+  const context = useContext(DropzoneContext);
+  if (!context) {
+    throw new Error("useDropzoneContext must be used within a Dropzone");
+  }
+  return context;
+};
+var maxLabelItems = 3;
+var DropzoneContent = ({ children, className }) => {
+  const { src } = useDropzoneContext();
+  if (!src) {
+    return null;
+  }
+  if (children) {
+    return children;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center justify-center", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "bg-muted text-muted-foreground flex size-8 items-center justify-center rounded-md", children: /* @__PURE__ */ jsx(UploadIcon, { size: 16 }) }),
+    /* @__PURE__ */ jsx("p", { className: "text-foreground my-2 w-full truncate text-sm font-medium", children: src.length > maxLabelItems ? `${new Intl.ListFormat("en").format(
+      src.slice(0, maxLabelItems).map((file) => file.name)
+    )} and ${src.length - maxLabelItems} more` : new Intl.ListFormat("en").format(src.map((file) => file.name)) }),
+    /* @__PURE__ */ jsx("p", { className: "text-muted-foreground w-full text-xs font-normal text-wrap", children: "Drag and drop or click to replace" })
+  ] });
+};
+var DropzoneEmptyState = ({ children, className }) => {
+  const { src, accept, maxSize, minSize, maxFiles } = useDropzoneContext();
+  if (src) {
+    return null;
+  }
+  if (children) {
+    return children;
+  }
+  let caption = "";
+  if (accept) {
+    caption += "Accepts ";
+    caption += new Intl.ListFormat("en").format(Object.keys(accept));
+  }
+  if (minSize && maxSize) {
+    caption += ` between ${renderBytes(minSize)} and ${renderBytes(maxSize)}`;
+  } else if (minSize) {
+    caption += ` at least ${renderBytes(minSize)}`;
+  } else if (maxSize) {
+    caption += ` less than ${renderBytes(maxSize)}`;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center justify-center", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "bg-muted text-muted-foreground flex size-8 items-center justify-center rounded-md", children: /* @__PURE__ */ jsx(UploadIcon, { size: 16 }) }),
+    /* @__PURE__ */ jsxs("p", { className: "text-foreground my-2 w-full text-center text-sm font-medium text-wrap", children: [
+      "Upload ",
+      maxFiles === 1 ? "a file" : "files"
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-center text-xs font-normal text-wrap", children: "Drag and drop or click to upload" }),
+    caption && /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground text-xs font-normal text-wrap", children: [
+      caption,
+      "."
+    ] })
+  ] });
+};
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none",
+        "placeholder:text-muted-foreground",
+        "focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-3",
+        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:ring-3",
+        "dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var DEFAULT_MAX_SIZE = 5 * 1024 * 1024;
+var DEFAULT_ACCEPT = { "image/*": [".png", ".jpg", ".jpeg", ".webp"] };
+function InsertImageDialog({
+  open,
+  onOpenChange,
+  labels,
+  url,
+  onUrlChange,
+  alt,
+  onAltChange,
+  file,
+  onFileChange,
+  uploading,
+  onApply,
+  onCancel,
+  removable = false,
+  onRemove,
+  maxSizeBytes = DEFAULT_MAX_SIZE,
+  accept = DEFAULT_ACCEPT
+}) {
+  const urlId = useId();
+  const altId = useId();
+  const canApply = Boolean(file || url.trim()) && Boolean(alt.trim()) && !uploading;
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "px-4 py-2", "data-slot": "insert-image-dialog", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: labels.title }) }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsxs(
+        Dropzone,
+        {
+          accept,
+          maxFiles: 1,
+          maxSize: maxSizeBytes,
+          disabled: uploading,
+          src: file ? [file] : [],
+          onDrop: (files) => onFileChange(files[0] ?? null),
+          children: [
+            /* @__PURE__ */ jsx(DropzoneEmptyState, {}),
+            /* @__PURE__ */ jsx(DropzoneContent, {})
+          ]
+        }
+      ),
+      file && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: file.name }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: urlId, children: labels.urlLabel }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: urlId,
+            placeholder: labels.urlPlaceholder,
+            value: url,
+            onChange: (event) => onUrlChange(event.target.value),
+            onKeyDown: (event) => {
+              if (event.key === "Enter" && canApply) {
+                event.preventDefault();
+                onApply();
+              }
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: altId, children: labels.altLabel }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: altId,
+            value: alt,
+            onChange: (event) => onAltChange(event.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: labels.hint })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      removable && onRemove && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          className: "text-destructive",
+          onClick: onRemove,
+          children: [
+            /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" }),
+            labels.remove
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          onClick: () => {
+            if (onCancel) onCancel();
+            else onOpenChange(false);
+          },
+          children: labels.cancel
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { type: "button", onClick: onApply, disabled: !canApply, children: labels.apply })
+    ] })
+  ] }) });
+}
+var DEFAULT_MIN_WIDTH = 120;
+var DEFAULT_START_WIDTH = 400;
+var DEFAULT_RATIO = 4 / 3;
+var KEYBOARD_STEP = 20;
+function ResizableImageView({ node, updateAttributes, selected, extension }) {
+  const { src, alt, width, height } = node.attrs;
+  const sizeRef = useRef({ width, height });
+  sizeRef.current = { width, height };
+  const { resizeLabel, minWidth = DEFAULT_MIN_WIDTH } = extension.options;
+  const dragRef = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  const resizeTo = useCallback(
+    (nextWidth, ratio, maxWidth) => {
+      const clamped = Math.max(minWidth, Math.min(Math.round(nextWidth), maxWidth));
+      updateAttributes({ width: clamped, height: Math.round(clamped / ratio) });
+    },
+    [minWidth, updateAttributes]
+  );
+  const measure = useCallback((handle) => {
+    const image = handle.parentElement?.querySelector("img") ?? null;
+    const current = sizeRef.current;
+    const editable = handle.closest(".ProseMirror");
+    const available = editable?.clientWidth ?? 0;
+    const naturalWidth = image?.naturalWidth ?? 0;
+    const naturalHeight = image?.naturalHeight ?? 0;
+    const ratio = current.width > 0 && current.height > 0 ? current.width / current.height : naturalWidth > 0 && naturalHeight > 0 ? naturalWidth / naturalHeight : DEFAULT_RATIO;
+    const unbounded = current.width > 0 ? current.width : naturalWidth || DEFAULT_START_WIDTH;
+    const startWidth = available > 0 ? Math.min(unbounded, available) : unbounded;
+    return {
+      width: startWidth,
+      ratio,
+      // jsdom reports clientWidth as 0, so a zero measure means "no
+      // constraint" — the real clamp only applies in a browser.
+      maxWidth: available > 0 ? available : Infinity
+    };
+  }, []);
+  const imageRef = useRef(null);
+  const fittedSrcRef = useRef(null);
+  useEffect(() => {
+    const img = imageRef.current;
+    if (!img) return;
+    if (sizeRef.current.width > 0 || fittedSrcRef.current === src) return;
+    const fit = () => {
+      const available = img.closest(".ProseMirror")?.clientWidth ?? 0;
+      if (!img.naturalWidth || !img.naturalHeight || available <= 0) return;
+      fittedSrcRef.current = src;
+      const nextWidth = Math.min(img.naturalWidth, available);
+      updateAttributes({
+        width: nextWidth,
+        height: Math.round(nextWidth / (img.naturalWidth / img.naturalHeight))
+      });
+    };
+    if (img.complete) {
+      fit();
+      return;
+    }
+    img.addEventListener("load", fit, { once: true });
+    return () => img.removeEventListener("load", fit);
+  }, [src, updateAttributes]);
+  const onPointerDown = useCallback(
+    (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const start = measure(event.currentTarget);
+      dragRef.current = { startX: event.clientX, ...start };
+      setDragging(true);
+      const onMove = (moveEvent) => {
+        const drag = dragRef.current;
+        if (!drag) return;
+        resizeTo(drag.width + (moveEvent.clientX - drag.startX), drag.ratio, drag.maxWidth);
+      };
+      const onUp = () => {
+        dragRef.current = null;
+        setDragging(false);
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+      };
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+    },
+    [measure, resizeTo]
+  );
+  const onKeyDown = useCallback(
+    (event) => {
+      const step = event.key === "ArrowRight" ? KEYBOARD_STEP : event.key === "ArrowLeft" ? -KEYBOARD_STEP : 0;
+      if (step === 0) return;
+      event.preventDefault();
+      const start = measure(event.currentTarget);
+      resizeTo(start.width + step, start.ratio, start.maxWidth);
+    },
+    [measure, resizeTo]
+  );
+  const sizeStyle = width > 0 ? { width, height: height > 0 ? height : void 0, maxWidth: "100%" } : void 0;
+  return /* @__PURE__ */ jsxs(
+    NodeViewWrapper,
+    {
+      "data-slot": "resizable-image",
+      className: "group relative inline-block max-w-full",
+      children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            ref: imageRef,
+            src,
+            alt,
+            className: "max-w-full rounded-md",
+            style: sizeStyle,
+            draggable: false
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "button",
+            tabIndex: 0,
+            "aria-label": resizeLabel,
+            title: resizeLabel,
+            "data-slot": "resizable-image-handle",
+            onPointerDown,
+            onKeyDown,
+            className: cn(
+              "border-primary absolute -right-1 -bottom-1 h-4 w-4 cursor-se-resize touch-none rounded-full border-2 bg-white transition-opacity",
+              "focus-visible:ring-ring/50 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:outline-none",
+              dragging || selected ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function createResizableImage(options) {
+  return Image.extend({
+    addOptions() {
+      return { ...this.parent(), ...options };
+    },
+    // The size attributes belong to the extension, not to the consumer: the
+    // stock Image extension keeps width/height too, but they default to null
+    // and render as HTML attributes, which pins the image to a fixed size.
+    //
+    // A numeric default with `rendered: false` is what makes resizing work
+    // at all — Tiptap v3 gates DOM emission on `rendered`, so the size stays
+    // out of the markup and lives only in the document JSON, where a
+    // serializer can read it. Without these declarations the schema drops
+    // every updateAttributes({ width }) call and the handle does nothing.
+    addAttributes() {
+      return {
+        ...this.parent?.(),
+        width: { default: 0, rendered: false },
+        height: { default: 0, rendered: false }
+      };
+    },
+    addNodeView() {
+      return ReactNodeViewRenderer(ResizableImageView);
+    }
+  });
+}
+function ListMenu({ editor, triggerLabel, icon, options }) {
+  const active = options.find((option) => editor?.isActive(option.node));
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        size: "sm",
+        variant: active ? "secondary" : "ghost",
+        disabled: !editor,
+        title: active ? active.label : triggerLabel,
+        "aria-label": active ? active.label : triggerLabel,
+        "data-slot": "list-menu-trigger",
+        children: [
+          active ? active.icon : icon,
+          /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 opacity-60" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", children: options.map((option) => {
+      const isActive = editor?.isActive(option.node) ?? false;
+      return /* @__PURE__ */ jsxs(
+        DropdownMenuItem,
+        {
+          disabled: !editor,
+          className: "cursor-pointer",
+          onSelect: () => editor && option.run(editor),
+          children: [
+            option.icon,
+            /* @__PURE__ */ jsx("span", { className: "flex-1", children: option.label }),
+            /* @__PURE__ */ jsx(
+              Check,
+              {
+                "aria-hidden": "true",
+                className: cn("h-4 w-4", isActive ? "opacity-100" : "opacity-0")
+              }
+            )
+          ]
+        },
+        option.node
+      );
+    }) })
+  ] });
+}
+function useRichTextEditor({
+  labels,
+  onUpdate,
+  content,
+  onInsertLink,
+  onInsertImage,
+  extraExtensions = [],
+  extraToolbar = [],
+  contentClassName,
+  allowBase64Images = false
+}) {
+  const [linkNeedsText, setLinkNeedsText] = useState(false);
+  const editor = useEditor({
+    extensions: [
+      // openOnClick false: a plain click has to place the caret so the
+      // author can edit link text. Left at its default, Tiptap navigates
+      // the current tab and throws the author out of the editor.
+      StarterKit.configure({ link: { openOnClick: false } }),
+      Highlight,
+      TableKit.configure({ table: { resizable: true } }),
+      createResizableImage({ resizeLabel: labels.resizeImage }).configure({
+        inline: false,
+        allowBase64: allowBase64Images
+      }),
+      ...extraExtensions
+    ],
+    content,
+    immediatelyRender: false,
+    // Required for the toolbar's pressed state and the image node view to
+    // repaint as the selection and attributes change.
+    shouldRerenderOnTransaction: true,
+    editorProps: {
+      attributes: {
+        // ProseMirror's editable div needs its own accessible name: a
+        // visible <Label> beside it is decoration, and a screen reader
+        // would announce an unnamed box.
+        role: "textbox",
+        "aria-label": labels.editor,
+        class: contentClassName ? `${EDITOR_CONTENT_STYLE} ${contentClassName}` : EDITOR_CONTENT_STYLE
+      },
+      // Ctrl/Cmd-click opens the link in a new tab and leaves the author
+      // where they were: the shortcut is a deliberate gesture, and keeping
+      // the editor open means no unsaved work is at risk. A plain click
+      // falls through to ProseMirror and just moves the caret.
+      handleClick(_view, _pos, event) {
+        if (!event.ctrlKey && !event.metaKey) return false;
+        const href = event.target?.closest("a")?.getAttribute("href");
+        if (!href) return false;
+        event.preventDefault();
+        window.open(href, "_blank", "noopener,noreferrer");
+        return true;
+      }
+    },
+    onUpdate: onUpdate ? ({ editor: current }) => onUpdate(current.getJSON()) : void 0
+  });
+  const currentLinkHref = useCallback(
+    () => editor?.getAttributes("link").href ?? "",
+    [editor]
+  );
+  const openLink = useCallback(() => {
+    if (editor) {
+      const { from, to } = editor.state.selection;
+      setLinkNeedsText(from === to && !editor.isActive("link"));
+    }
+    onInsertLink?.();
+  }, [editor, onInsertLink]);
+  const applyLink = useCallback(
+    (href, text) => {
+      if (!editor) return;
+      const url = href.trim();
+      if (linkNeedsText) {
+        if (url && text?.trim()) {
+          editor.chain().focus().insertContent({
+            type: "text",
+            text: text.trim(),
+            marks: [{ type: "link", attrs: { href: url } }]
+          }).run();
+        }
+        return;
+      }
+      if (url) editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+      else editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    },
+    [editor, linkNeedsText]
+  );
+  const toolbar = useMemo(() => {
+    const builtIn = [
+      {
+        kind: "button",
+        id: "bold",
+        icon: /* @__PURE__ */ jsx(Bold, { className: "h-4 w-4" }),
+        label: labels.bold,
+        active: { name: "bold" },
+        run: (e) => e.chain().focus().toggleBold().run()
+      },
+      {
+        kind: "button",
+        id: "italic",
+        icon: /* @__PURE__ */ jsx(Italic, { className: "h-4 w-4" }),
+        label: labels.italic,
+        active: { name: "italic" },
+        run: (e) => e.chain().focus().toggleItalic().run()
+      },
+      {
+        kind: "button",
+        id: "heading",
+        icon: /* @__PURE__ */ jsx(Heading2, { className: "h-4 w-4" }),
+        label: labels.heading,
+        active: { name: "heading", attrs: { level: 2 } },
+        run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run()
+      },
+      { kind: "separator" },
+      {
+        kind: "button",
+        id: "highlight",
+        icon: /* @__PURE__ */ jsx(Highlighter, { className: "h-4 w-4" }),
+        label: labels.highlight,
+        active: { name: "highlight" },
+        run: (e) => e.chain().focus().toggleHighlight().run()
+      },
+      {
+        kind: "button",
+        id: "underline",
+        icon: /* @__PURE__ */ jsx(Underline, { className: "h-4 w-4" }),
+        label: labels.underline,
+        active: { name: "underline" },
+        run: (e) => e.chain().focus().toggleMark("underline").run()
+      },
+      {
+        kind: "button",
+        id: "strike",
+        icon: /* @__PURE__ */ jsx(Strikethrough, { className: "h-4 w-4" }),
+        label: labels.strikethrough,
+        active: { name: "strike" },
+        run: (e) => e.chain().focus().toggleMark("strike").run()
+      },
+      { kind: "separator" },
+      {
+        kind: "button",
+        id: "quote",
+        icon: /* @__PURE__ */ jsx(Quote, { className: "h-4 w-4" }),
+        label: labels.quote,
+        active: { name: "blockquote" },
+        run: (e) => e.chain().focus().toggleBlockquote().run()
+      },
+      {
+        kind: "custom",
+        id: "lists",
+        render: (current) => /* @__PURE__ */ jsx(
+          ListMenu,
+          {
+            editor: current,
+            triggerLabel: labels.lists.trigger,
+            icon: /* @__PURE__ */ jsx(List, { className: "h-4 w-4" }),
+            options: [
+              {
+                node: "bulletList",
+                label: labels.lists.bullet,
+                icon: /* @__PURE__ */ jsx(List, { className: "h-4 w-4" }),
+                run: (e) => e.chain().focus().toggleBulletList().run()
+              },
+              {
+                node: "orderedList",
+                label: labels.lists.ordered,
+                icon: /* @__PURE__ */ jsx(ListOrdered, { className: "h-4 w-4" }),
+                run: (e) => e.chain().focus().toggleOrderedList().run()
+              }
+            ]
+          }
+        )
+      },
+      { kind: "separator" },
+      {
+        kind: "button",
+        id: "link",
+        icon: /* @__PURE__ */ jsx(Link, { className: "h-4 w-4" }),
+        label: labels.insertLink,
+        active: { name: "link" },
+        run: () => openLink()
+      },
+      {
+        kind: "button",
+        id: "image",
+        icon: /* @__PURE__ */ jsx(ImagePlus, { className: "h-4 w-4" }),
+        label: labels.insertImage,
+        // No `active`: this opens a dialog, it is never a pressed state.
+        run: () => onInsertImage?.()
+      },
+      {
+        kind: "custom",
+        id: "table",
+        render: (current) => /* @__PURE__ */ jsx(
+          TableMenu,
+          {
+            editor: current,
+            icon: /* @__PURE__ */ jsx(Table, { className: "h-4 w-4" }),
+            labels: labels.table
+          }
+        )
+      }
+    ];
+    let items = builtIn;
+    const appended = [];
+    for (const group of extraToolbar) {
+      if (!group.after) {
+        appended.push(...group.items);
+        continue;
+      }
+      const at = items.findIndex(
+        (item) => item.kind !== "separator" && item.id === group.after
+      );
+      if (at === -1) {
+        appended.push(...group.items);
+        continue;
+      }
+      items = [...items.slice(0, at + 1), ...group.items, ...items.slice(at + 1)];
+    }
+    return [...items, ...appended];
+  }, [labels, extraToolbar, onInsertImage, openLink]);
+  return { editor, toolbar, linkNeedsText, currentLinkHref, applyLink };
+}
+function ColorMenu({ editor, labels, icon, swatches }) {
+  const active = swatches.find((swatch) => editor?.isActive(swatch.mark));
+  function apply(mark) {
+    if (!editor) return;
+    const chain = editor.chain().focus();
+    for (const swatch of swatches) chain.unsetMark(swatch.mark);
+    if (mark) chain.setMark(mark);
+    chain.run();
+  }
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        size: "sm",
+        variant: active ? "secondary" : "ghost",
+        disabled: !editor,
+        title: labels.trigger,
+        "aria-label": labels.trigger,
+        "data-slot": "color-menu-trigger",
+        children: icon
+      }
+    ) }),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: "w-auto", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "group",
+        "aria-label": labels.heading,
+        className: "flex items-center gap-1.5 px-1.5 py-1",
+        children: [
+          swatches.map((swatch) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": swatch.label,
+              "aria-pressed": editor?.isActive(swatch.mark) ?? false,
+              title: swatch.label,
+              style: { backgroundColor: swatch.preview },
+              className: cn(
+                "h-7 w-7 cursor-pointer rounded-full border transition-transform",
+                "focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none",
+                editor?.isActive(swatch.mark) ? "border-primary scale-110 border-2" : "border-border/60 hover:scale-110"
+              ),
+              onClick: () => apply(swatch.mark)
+            },
+            swatch.mark
+          )),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "bg-border mx-0.5 h-5 w-px" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": labels.clear,
+              title: labels.clear,
+              disabled: !active,
+              className: cn(
+                "text-muted-foreground flex h-7 w-7 cursor-pointer items-center justify-center rounded-full",
+                "focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none",
+                "hover:text-foreground disabled:cursor-default disabled:opacity-40"
+              ),
+              onClick: () => apply(""),
+              children: /* @__PURE__ */ jsx(Ban, { className: "h-4 w-4" })
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+function InsertLinkDialog({
+  open,
+  onOpenChange,
+  labels,
+  url,
+  onUrlChange,
+  text = "",
+  onTextChange,
+  needsText = false,
+  onApply,
+  onCancel
+}) {
+  const urlId = useId();
+  const textId = useId();
+  const canApply = needsText ? Boolean(url.trim()) && Boolean(text.trim()) : true;
+  function submitOnEnter(event) {
+    if (event.key === "Enter" && canApply) {
+      event.preventDefault();
+      onApply();
+    }
+  }
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "px-4 py-2", "data-slot": "insert-link-dialog", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: labels.title }) }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-col gap-3", children: [
+      needsText && onTextChange && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: textId, children: labels.textLabel }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: textId,
+            placeholder: labels.textPlaceholder,
+            value: text,
+            onChange: (event) => onTextChange(event.target.value),
+            onKeyDown: submitOnEnter
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: urlId, children: labels.urlLabel }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: urlId,
+            placeholder: labels.urlPlaceholder,
+            value: url,
+            onChange: (event) => onUrlChange(event.target.value),
+            onKeyDown: submitOnEnter
+          }
+        ),
+        !needsText && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: labels.hint })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          onClick: () => {
+            if (onCancel) onCancel();
+            else onOpenChange(false);
+          },
+          children: labels.cancel
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { type: "button", onClick: onApply, disabled: !canApply, children: labels.apply })
+    ] })
+  ] }) });
+}
+function LinkActions({ editor, labels, onEdit, onOpen }) {
+  const href = useEditorState({
+    editor,
+    selector: ({ editor: current }) => current.getAttributes("link").href ?? ""
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "link-bubble-menu",
+      className: "bg-popover text-popover-foreground flex items-center gap-1 rounded-md border p-1 shadow-md",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground max-w-[16rem] truncate px-2 text-xs", children: href }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: "ghost",
+            title: labels.open,
+            "aria-label": labels.open,
+            disabled: !href,
+            onClick: () => {
+              if (!href) return;
+              if (onOpen) {
+                onOpen(href);
+                return;
+              }
+              window.open(href, "_blank", "noopener,noreferrer");
+            },
+            children: /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: "ghost",
+            title: labels.edit,
+            "aria-label": labels.edit,
+            onClick: onEdit,
+            children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: "ghost",
+            className: "text-destructive",
+            title: labels.remove,
+            "aria-label": labels.remove,
+            onClick: () => editor.chain().focus().extendMarkRange("link").unsetLink().run(),
+            children: /* @__PURE__ */ jsx(Unlink, { className: "h-4 w-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+function LinkBubbleMenu({ editor, labels, onEdit, onOpen }) {
+  const shouldShow = useCallback(
+    // Only while the caret is actually in a link — otherwise this bar would
+    // compete with any other bubble menu the consumer adds.
+    ({ editor: current }) => current.isActive("link"),
+    []
+  );
+  const options = useMemo(() => ({ placement: "bottom", offset: 8 }), []);
+  if (!editor) return null;
+  return /* @__PURE__ */ jsx(BubbleMenu, { editor, shouldShow, options, children: /* @__PURE__ */ jsx(LinkActions, { editor, labels, onEdit, onOpen }) });
+}
+
+export { ColorMenu, EDITOR_CONTENT_STYLE, InsertImageDialog, InsertLinkDialog, LinkBubbleMenu, ListMenu, RichTextEditor, RichTextToolbar, TableMenu, createResizableImage, useRichTextEditor };
+//# sourceMappingURL=editor.js.map
+//# sourceMappingURL=editor.js.map