@multicomma/arkcn 0.1.2 → 0.1.3

package/registry/items/rich-text-editor.json

@@ -19,6 +19,939 @@
     "useRichTextEditor",
     "richTextActions"
   ],
+  "parts": [
+    {
+      "name": "RichTextEditor",
+      "props": [
+        {
+          "name": "autofocus",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Focus the editor on mount.",
+          "from": "arkcn"
+        },
+        {
+          "name": "characterLimit",
+          "type": "number",
+          "required": false,
+          "description": "Maximum characters; the count shows `data-over` past it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "content",
+          "type": "string",
+          "required": false,
+          "description": "Controlled HTML. Prefer `defaultContent` + `onChange` unless you need to replace the document.",
+          "from": "arkcn"
+        },
+        {
+          "name": "defaultContent",
+          "type": "string",
+          "required": false,
+          "default": "\"\"",
+          "description": "Initial HTML when uncontrolled.",
+          "from": "arkcn"
+        },
+        {
+          "name": "editable",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Allow editing.",
+          "from": "arkcn"
+        },
+        {
+          "name": "editorOptions",
+          "type": "Partial<UseEditorOptions>",
+          "required": false,
+          "description": "Escape hatch for any other `useEditor` option.",
+          "from": "arkcn"
+        },
+        {
+          "name": "extensions",
+          "type": "Extensions",
+          "required": false,
+          "default": "[]",
+          "description": "Extra tiptap extensions appended to the built-in set.",
+          "from": "arkcn"
+        },
+        {
+          "name": "onChange",
+          "type": "((change: RichTextChange) => void)",
+          "required": false,
+          "description": "Change handler.",
+          "from": "arkcn"
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "required": false,
+          "default": "\"Write something…\"",
+          "description": "Text shown while there is no value.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "RichTextEditorToolbar",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "RichTextEditorToolbarGroup",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "RichTextEditorToolbarSeparator",
+      "props": [
+        {
+          "name": "decorative",
+          "type": "boolean",
+          "required": false,
+          "description": "Hide the separator from assistive technology.",
+          "from": "arkcn"
+        },
+        {
+          "name": "orientation",
+          "type": "\"horizontal\" | \"vertical\"",
+          "required": false,
+          "description": "Layout direction of the part.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "RichTextEditorToggle",
+      "props": [
+        {
+          "name": "canRun",
+          "type": "((editor: Editor) => boolean)",
+          "required": false,
+          "description": "Whether the action can run right now; disables the control when false.",
+          "from": "arkcn"
+        },
+        {
+          "name": "isActive",
+          "type": "((editor: Editor) => boolean)",
+          "required": false,
+          "description": "Whether the toggle is pressed.",
+          "from": "arkcn"
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "required": false,
+          "description": "Accessible label.",
+          "from": "arkcn"
+        },
+        {
+          "name": "shortcut",
+          "type": "string",
+          "required": false,
+          "description": "Keyboard shortcut shown in the tooltip.",
+          "from": "arkcn"
+        },
+        {
+          "name": "size",
+          "type": "\"default\" | \"sm\" | \"lg\" | null",
+          "required": false,
+          "description": "Size variant; sets a `data-size` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "tooltip",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Tooltip content shown on hover, or `false` to disable it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "variant",
+          "type": "\"default\" | \"outline\" | null",
+          "required": false,
+          "description": "Visual variant, styled with `cva`; sets a `data-variant` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Use the provided child element as the default rendered element, combining their props and behavior.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "defaultPressed",
+          "type": "boolean",
+          "required": false,
+          "description": "The default pressed state of the toggle.",
+          "from": "@zag-js/toggle"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "RichTextEditorTrigger",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Render the child element instead of the default one, merging props and behaviour onto it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "canRun",
+          "type": "((editor: Editor) => boolean)",
+          "required": false,
+          "description": "Whether the action can run right now; disables the control when false.",
+          "from": "arkcn"
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "required": false,
+          "description": "Accessible label.",
+          "from": "arkcn"
+        },
+        {
+          "name": "shortcut",
+          "type": "string",
+          "required": false,
+          "description": "Keyboard shortcut shown in the tooltip.",
+          "from": "arkcn"
+        },
+        {
+          "name": "size",
+          "type": "\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | null",
+          "required": false,
+          "description": "Size variant; sets a `data-size` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "tooltip",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Tooltip content shown on hover, or `false` to disable it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "variant",
+          "type": "\"link\" | \"default\" | \"outline\" | \"secondary\" | \"ghost\" | \"destructive\" | null",
+          "required": false,
+          "description": "Visual variant, styled with `cva`; sets a `data-variant` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "RichTextEditorBlockSelect",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Use the provided child element as the default rendered element, combining their props and behavior.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "autoComplete",
+          "type": "string",
+          "required": false,
+          "description": "The autocomplete attribute for the hidden select. Enables browser autofill (e.g. \"address-level1\" for state).",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "closeOnSelect",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether the select should close after an item is selected",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "composite",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether the select is a composed with other composite widgets like tabs or combobox",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "defaultHighlightedValue",
+          "type": "string | null",
+          "required": false,
+          "description": "The initial value of the highlighted item when opened.\nUse when you don't need to control the highlighted value of the select.",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the select's open state is controlled by the user",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "defaultValue",
+          "type": "string[]",
+          "required": false,
+          "description": "The initial default value of the select when rendered.\nUse when you don't need to control the value of the select.",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "deselectable",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the value can be cleared by clicking the selected item.\n\n**Note:** this is only applicable for single selection",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the select is disabled",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "form",
+          "type": "string",
+          "required": false,
+          "description": "The associate form of the underlying select.",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "hideMode",
+          "type": "HideMode",
+          "required": false,
+          "default": "'display-none'",
+          "description": "How to hide content when mounted but not present.\n- `'display-none'`: HTML `hidden` attribute. Effects stay alive.\n- `'activity'`: React 19 `<Activity mode=\"hidden\">`. Effects pause. Requires React 19+.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "highlightedValue",
+          "type": "string | null",
+          "required": false,
+          "description": "The controlled key of the highlighted item",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "description": "The unique identifier of the machine.",
+          "from": "@zag-js/types"
+        },
+        {
+          "name": "ids",
+          "type": "ElementIds",
+          "required": false,
+          "description": "The ids of the elements in the select. Useful for composition.",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "immediate",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether to synchronize the present change immediately or defer it to the next frame",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the select is invalid",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "lazyMount",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to enable lazy mounting",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "loopFocus",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to loop the keyboard navigation through the options",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "multiple",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether to allow multiple selection",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "required": false,
+          "description": "The `name` attribute of the underlying select.",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "onEnterComplete",
+          "type": "VoidFunction",
+          "required": false,
+          "description": "Function called when the animation ends in the open state",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "onExitComplete",
+          "type": "VoidFunction",
+          "required": false,
+          "description": "Function called when the animation ends in the closed state",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "onFocusOutside",
+          "type": "((event: FocusOutsideEvent) => void)",
+          "required": false,
+          "description": "Function called when the focus is moved outside the component",
+          "from": "@zag-js/interact-outside"
+        },
+        {
+          "name": "onHighlightChange",
+          "type": "((details: HighlightChangeDetails<unknown>) => void)",
+          "required": false,
+          "description": "The callback fired when the highlighted item changes.",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "onInteractOutside",
+          "type": "((event: InteractOutsideEvent) => void)",
+          "required": false,
+          "description": "Function called when an interaction happens outside the component",
+          "from": "@zag-js/interact-outside"
+        },
+        {
+          "name": "onOpenChange",
+          "type": "((details: OpenChangeDetails) => void)",
+          "required": false,
+          "description": "Function called when the popup is opened",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "onPointerDownOutside",
+          "type": "((event: PointerDownOutsideEvent) => void)",
+          "required": false,
+          "description": "Function called when the pointer is pressed down outside the component",
+          "from": "@zag-js/interact-outside"
+        },
+        {
+          "name": "onSelect",
+          "type": "((details: SelectionDetails) => void)",
+          "required": false,
+          "description": "Function called when an item is selected",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the select menu is open",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "positioning",
+          "type": "PositioningOptions",
+          "required": false,
+          "description": "The positioning options of the menu.",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "present",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the node is present (controlled by the user)",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the select is read-only",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the select is required",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "scrollToIndexFn",
+          "type": "((details: ScrollToIndexDetails) => void)",
+          "required": false,
+          "description": "Function to scroll to a specific index",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "skipAnimationOnMount",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to allow the initial presence animation.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        },
+        {
+          "name": "translations",
+          "type": "IntlTranslations",
+          "required": false,
+          "description": "Specifies the localized strings that identifies the accessibility elements and their states",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "unmountOnExit",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to unmount on exit.",
+          "from": "@ark-ui/react"
+        }
+      ]
+    },
+    {
+      "name": "RichTextEditorLinkTrigger",
+      "props": [
+        {
+          "name": "size",
+          "type": "\"default\" | \"sm\" | \"lg\" | null",
+          "required": false,
+          "description": "Size variant; sets a `data-size` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "variant",
+          "type": "\"default\" | \"outline\" | null",
+          "required": false,
+          "description": "Visual variant, styled with `cva`; sets a `data-variant` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Use the provided child element as the default rendered element, combining their props and behavior.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "defaultPressed",
+          "type": "boolean",
+          "required": false,
+          "description": "The default pressed state of the toggle.",
+          "from": "@zag-js/toggle"
+        },
+        {
+          "name": "onPressedChange",
+          "type": "((pressed: boolean) => void)",
+          "required": false,
+          "description": "Event handler called when the pressed state of the toggle changes.",
+          "from": "@zag-js/toggle"
+        },
+        {
+          "name": "pressed",
+          "type": "boolean",
+          "required": false,
+          "description": "The pressed state of the toggle.",
+          "from": "@zag-js/toggle"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "RichTextEditorImageTrigger",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Render the child element instead of the default one, merging props and behaviour onto it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "size",
+          "type": "\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | null",
+          "required": false,
+          "description": "Size variant; sets a `data-size` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "variant",
+          "type": "\"link\" | \"default\" | \"outline\" | \"secondary\" | \"ghost\" | \"destructive\" | null",
+          "required": false,
+          "description": "Visual variant, styled with `cva`; sets a `data-variant` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "RichTextEditorContent",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "innerRef",
+          "type": "ForwardedRef<HTMLDivElement | null>",
+          "required": false,
+          "from": "@tiptap/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "RichTextEditorBubbleMenu",
+      "props": [
+        {
+          "name": "appendTo",
+          "type": "HTMLElement | (() => HTMLElement)",
+          "required": false,
+          "default": "null",
+          "description": "The DOM element to append your menu to. Default is the editor's parent element.\n\nSometimes the menu needs to be appended to a different DOM context due to accessibility, clipping, or z-index issues.",
+          "from": "@tiptap/extension-bubble-menu"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "getReferencedVirtualElement",
+          "type": "(() => VirtualElement | null)",
+          "required": false,
+          "default": "Position based on the selection.",
+          "description": "A function that returns the virtual element for the menu.\nThis is useful when the menu needs to be positioned relative to a specific DOM element.",
+          "from": "@tiptap/extension-bubble-menu"
+        },
+        {
+          "name": "options",
+          "type": "{ strategy?: \"absolute\" | \"fixed\" | undefined; placement?: \"left\" | \"right\" | \"top\" | \"bottom\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bot…",
+          "required": false,
+          "default": "{}",
+          "description": "The options for the bubble menu. Those are passed to Floating UI and include options for the placement, offset, flip, shift, arrow, size, autoPlacement,\nhide, and inline middlewares.",
+          "from": "@tiptap/extension-bubble-menu"
+        },
+        {
+          "name": "pluginKey",
+          "type": "string | PluginKey<any>",
+          "required": false,
+          "default": "'bubbleMenu'",
+          "description": "The plugin key.",
+          "from": "@tiptap/extension-bubble-menu"
+        },
+        {
+          "name": "resizeDelay",
+          "type": "number",
+          "required": false,
+          "default": "60",
+          "description": "The delay in milliseconds before the menu position should be updated on window resize.\nThis can be useful to prevent performance issues.",
+          "from": "@tiptap/extension-bubble-menu"
+        },
+        {
+          "name": "shouldShow",
+          "type": "((props: { editor: Editor; element: HTMLElement; view: EditorView; state: EditorState; oldState?: EditorState | undefined; from: number; to: number; }) => bo…",
+          "required": false,
+          "description": "A function that determines whether the menu should be shown or not.\nIf this function returns `false`, the menu will be hidden, otherwise it will be shown.",
+          "from": "@tiptap/extension-bubble-menu"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        },
+        {
+          "name": "updateDelay",
+          "type": "number",
+          "required": false,
+          "default": "250",
+          "description": "The delay in milliseconds before the menu should be updated.\nThis can be useful to prevent performance issues.",
+          "from": "@tiptap/extension-bubble-menu"
+        }
+      ]
+    },
+    {
+      "name": "RichTextEditorFooter",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "RichTextEditorCharacterCount",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Use the provided child element as the default rendered element, combining their props and behavior.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    }
+  ],
   "dependencies": {
     "@ark-ui/react": "^5.39.1",
     "@tiptap/extension-highlight": "^3.31.3",
@@ -46,7 +979,7 @@
   "files": [
     {
       "path": "components/ui/rich-text-editor.tsx",
-      "content": "import * as React from \"react\"\nimport { ark } from \"@ark-ui/react\"\nimport { createListCollection } from \"@ark-ui/react/collection\"\nimport { Highlight } from \"@tiptap/extension-highlight\"\nimport { Image } from \"@tiptap/extension-image\"\nimport { TableKit } from \"@tiptap/extension-table\"\nimport { TaskItem } from \"@tiptap/extension-task-item\"\nimport { TaskList } from \"@tiptap/extension-task-list\"\nimport { TextAlign } from \"@tiptap/extension-text-align\"\nimport { CharacterCount, Placeholder } from \"@tiptap/extensions\"\nimport {\n  EditorContent,\n  useEditor,\n  useEditorState,\n  type Editor,\n  type Extensions,\n  type JSONContent,\n  type UseEditorOptions,\n} from \"@tiptap/react\"\nimport { BubbleMenu, type BubbleMenuProps } from \"@tiptap/react/menus\"\nimport { StarterKit } from \"@tiptap/starter-kit\"\nimport {\n  AlignCenterIcon,\n  AlignJustifyIcon,\n  AlignLeftIcon,\n  AlignRightIcon,\n  BoldIcon,\n  CodeIcon,\n  Heading1Icon,\n  Heading2Icon,\n  Heading3Icon,\n  HighlighterIcon,\n  ImageIcon,\n  ItalicIcon,\n  LinkIcon,\n  ListChecksIcon,\n  ListIcon,\n  ListOrderedIcon,\n  MinusIcon,\n  PilcrowIcon,\n  QuoteIcon,\n  Redo2Icon,\n  RemoveFormattingIcon,\n  SquareCodeIcon,\n  StrikethroughIcon,\n  TableIcon,\n  UnderlineIcon,\n  Undo2Icon,\n  UnlinkIcon,\n} from \"lucide-react\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\"\nimport {\n  Select,\n  SelectContent,\n  SelectControl,\n  SelectItem,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { Toggle } from \"@/components/ui/toggle\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/components/ui/tooltip\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * RichTextEditor — compositional editor parts on tiptap. The root owns the\n * tiptap `Editor` (content is controllable as HTML) and reports changes as\n * `onChange({ html, json, text })`. Every toolbar control is its own part and\n * reads the editor from context, so a consumer composes exactly the toolbar\n * it wants; `RichTextEditorToggle name=\"bold\"` covers the common actions and\n * `isActive`/`onToggle` take over for custom ones.\n *\n * Anatomy:\n *   RichTextEditor { content, onChange, placeholder, editable }\n *     RichTextEditorToolbar > ToolbarGroup > Toggle name=… / Trigger name=… / BlockSelect / LinkTrigger / ImageTrigger\n *     RichTextEditorContent            the prose area\n *     RichTextEditorBubbleMenu         selection toolbar (same toggles)\n *     RichTextEditorFooter > RichTextEditorCharacterCount\n */\n\ntype RichTextChange = { html: string; json: JSONContent; text: string }\n\ntype RichTextEditorContextValue = { editor: Editor | null; editable: boolean }\nconst RichTextEditorContext = React.createContext<RichTextEditorContextValue | null>(null)\n\nfunction useRichTextEditor() {\n  const ctx = React.useContext(RichTextEditorContext)\n  if (!ctx) throw new Error(\"RichTextEditor parts must be used within <RichTextEditor>\")\n  return ctx\n}\n\n/* ---------------------------------------------------------------------------\n * Root\n * ------------------------------------------------------------------------- */\n\nfunction RichTextEditor({\n  content,\n  defaultContent = \"\",\n  onChange,\n  placeholder = \"Write something…\",\n  editable = true,\n  autofocus = false,\n  extensions = [],\n  characterLimit,\n  editorOptions,\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"content\" | \"onChange\"> & {\n  /** Controlled HTML. Prefer `defaultContent` + `onChange` unless you need to replace the document. */\n  content?: string\n  defaultContent?: string\n  onChange?: (change: RichTextChange) => void\n  placeholder?: string\n  editable?: boolean\n  autofocus?: boolean\n  /** Extra tiptap extensions appended to the built-in set. */\n  extensions?: Extensions\n  characterLimit?: number\n  /** Escape hatch for any other `useEditor` option. */\n  editorOptions?: Partial<UseEditorOptions>\n}) {\n  const onChangeRef = React.useRef(onChange)\n  React.useEffect(() => {\n    onChangeRef.current = onChange\n  }, [onChange])\n\n  const editor = useEditor({\n    extensions: [\n      StarterKit.configure({\n        heading: { levels: [1, 2, 3] },\n        link: { openOnClick: false, autolink: true, defaultProtocol: \"https\" },\n      }),\n      Placeholder.configure({ placeholder }),\n      CharacterCount.configure({ limit: characterLimit }),\n      TaskList,\n      TaskItem.configure({ nested: true }),\n      Highlight,\n      TextAlign.configure({ types: [\"heading\", \"paragraph\"] }),\n      Image.configure({ inline: false }),\n      TableKit.configure({ table: { resizable: false } }),\n      ...extensions,\n    ],\n    content: content ?? defaultContent,\n    editable,\n    autofocus,\n    editorProps: {\n      attributes: { class: \"outline-none\" },\n      ...editorOptions?.editorProps,\n    },\n    onUpdate: ({ editor }) => {\n      onChangeRef.current?.({ html: editor.getHTML(), json: editor.getJSON(), text: editor.getText() })\n      editorOptions?.onUpdate?.({ editor, transaction: editor.state.tr, appendedTransactions: [] })\n    },\n    ...editorOptions,\n  })\n\n  // Controlled content: replace the document only when the outside value actually differs.\n  React.useEffect(() => {\n    if (!editor || content === undefined) return\n    if (content !== editor.getHTML()) editor.commands.setContent(content, { emitUpdate: false })\n  }, [editor, content])\n\n  React.useEffect(() => {\n    if (editor && editor.isEditable !== editable) editor.setEditable(editable)\n  }, [editor, editable])\n\n  const ctx = React.useMemo(() => ({ editor, editable }), [editor, editable])\n\n  return (\n    <RichTextEditorContext.Provider value={ctx}>\n      <div\n        data-slot=\"rich-text-editor\"\n        data-editable={editable ? \"\" : undefined}\n        className={cn(\n          \"flex min-h-0 flex-col rounded-xl border bg-background text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-focus-visible:border-ring\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </RichTextEditorContext.Provider>\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Actions registry\n * ------------------------------------------------------------------------- */\n\ntype ActionDef = {\n  label: string\n  icon: React.ComponentType<{ className?: string }>\n  shortcut?: string\n  isActive?: (editor: Editor) => boolean\n  canRun?: (editor: Editor) => boolean\n  run: (editor: Editor) => void\n}\n\nconst chain = (editor: Editor) => editor.chain().focus()\n\nconst actions = {\n  bold: {\n    label: \"Bold\",\n    icon: BoldIcon,\n    shortcut: \"⌘B\",\n    isActive: (e) => e.isActive(\"bold\"),\n    run: (e) => chain(e).toggleBold().run(),\n  },\n  italic: {\n    label: \"Italic\",\n    icon: ItalicIcon,\n    shortcut: \"⌘I\",\n    isActive: (e) => e.isActive(\"italic\"),\n    run: (e) => chain(e).toggleItalic().run(),\n  },\n  underline: {\n    label: \"Underline\",\n    icon: UnderlineIcon,\n    shortcut: \"⌘U\",\n    isActive: (e) => e.isActive(\"underline\"),\n    run: (e) => chain(e).toggleUnderline().run(),\n  },\n  strike: {\n    label: \"Strikethrough\",\n    icon: StrikethroughIcon,\n    shortcut: \"⌘⇧S\",\n    isActive: (e) => e.isActive(\"strike\"),\n    run: (e) => chain(e).toggleStrike().run(),\n  },\n  code: {\n    label: \"Inline code\",\n    icon: CodeIcon,\n    shortcut: \"⌘E\",\n    isActive: (e) => e.isActive(\"code\"),\n    run: (e) => chain(e).toggleCode().run(),\n  },\n  highlight: {\n    label: \"Highlight\",\n    icon: HighlighterIcon,\n    shortcut: \"⌘⇧H\",\n    isActive: (e) => e.isActive(\"highlight\"),\n    run: (e) => chain(e).toggleHighlight().run(),\n  },\n  paragraph: {\n    label: \"Paragraph\",\n    icon: PilcrowIcon,\n    shortcut: \"⌘⌥0\",\n    isActive: (e) => e.isActive(\"paragraph\"),\n    run: (e) => chain(e).setParagraph().run(),\n  },\n  heading1: {\n    label: \"Heading 1\",\n    icon: Heading1Icon,\n    shortcut: \"⌘⌥1\",\n    isActive: (e) => e.isActive(\"heading\", { level: 1 }),\n    run: (e) => chain(e).toggleHeading({ level: 1 }).run(),\n  },\n  heading2: {\n    label: \"Heading 2\",\n    icon: Heading2Icon,\n    shortcut: \"⌘⌥2\",\n    isActive: (e) => e.isActive(\"heading\", { level: 2 }),\n    run: (e) => chain(e).toggleHeading({ level: 2 }).run(),\n  },\n  heading3: {\n    label: \"Heading 3\",\n    icon: Heading3Icon,\n    shortcut: \"⌘⌥3\",\n    isActive: (e) => e.isActive(\"heading\", { level: 3 }),\n    run: (e) => chain(e).toggleHeading({ level: 3 }).run(),\n  },\n  bulletList: {\n    label: \"Bullet list\",\n    icon: ListIcon,\n    shortcut: \"⌘⇧8\",\n    isActive: (e) => e.isActive(\"bulletList\"),\n    run: (e) => chain(e).toggleBulletList().run(),\n  },\n  orderedList: {\n    label: \"Numbered list\",\n    icon: ListOrderedIcon,\n    shortcut: \"⌘⇧7\",\n    isActive: (e) => e.isActive(\"orderedList\"),\n    run: (e) => chain(e).toggleOrderedList().run(),\n  },\n  taskList: {\n    label: \"Task list\",\n    icon: ListChecksIcon,\n    shortcut: \"⌘⇧9\",\n    isActive: (e) => e.isActive(\"taskList\"),\n    run: (e) => chain(e).toggleTaskList().run(),\n  },\n  blockquote: {\n    label: \"Quote\",\n    icon: QuoteIcon,\n    shortcut: \"⌘⇧B\",\n    isActive: (e) => e.isActive(\"blockquote\"),\n    run: (e) => chain(e).toggleBlockquote().run(),\n  },\n  codeBlock: {\n    label: \"Code block\",\n    icon: SquareCodeIcon,\n    shortcut: \"⌘⌥C\",\n    isActive: (e) => e.isActive(\"codeBlock\"),\n    run: (e) => chain(e).toggleCodeBlock().run(),\n  },\n  alignLeft: {\n    label: \"Align left\",\n    icon: AlignLeftIcon,\n    shortcut: \"⌘⇧L\",\n    isActive: (e) => e.isActive({ textAlign: \"left\" }),\n    run: (e) => chain(e).setTextAlign(\"left\").run(),\n  },\n  alignCenter: {\n    label: \"Align center\",\n    icon: AlignCenterIcon,\n    shortcut: \"⌘⇧E\",\n    isActive: (e) => e.isActive({ textAlign: \"center\" }),\n    run: (e) => chain(e).setTextAlign(\"center\").run(),\n  },\n  alignRight: {\n    label: \"Align right\",\n    icon: AlignRightIcon,\n    shortcut: \"⌘⇧R\",\n    isActive: (e) => e.isActive({ textAlign: \"right\" }),\n    run: (e) => chain(e).setTextAlign(\"right\").run(),\n  },\n  alignJustify: {\n    label: \"Justify\",\n    icon: AlignJustifyIcon,\n    shortcut: \"⌘⇧J\",\n    isActive: (e) => e.isActive({ textAlign: \"justify\" }),\n    run: (e) => chain(e).setTextAlign(\"justify\").run(),\n  },\n  horizontalRule: { label: \"Divider\", icon: MinusIcon, run: (e) => chain(e).setHorizontalRule().run() },\n  clearFormatting: {\n    label: \"Clear formatting\",\n    icon: RemoveFormattingIcon,\n    run: (e) => chain(e).unsetAllMarks().clearNodes().run(),\n  },\n  undo: {\n    label: \"Undo\",\n    icon: Undo2Icon,\n    shortcut: \"⌘Z\",\n    canRun: (e) => e.can().undo(),\n    run: (e) => chain(e).undo().run(),\n  },\n  redo: {\n    label: \"Redo\",\n    icon: Redo2Icon,\n    shortcut: \"⌘⇧Z\",\n    canRun: (e) => e.can().redo(),\n    run: (e) => chain(e).redo().run(),\n  },\n  unsetLink: {\n    label: \"Remove link\",\n    icon: UnlinkIcon,\n    isActive: (e) => e.isActive(\"link\"),\n    canRun: (e) => e.isActive(\"link\"),\n    run: (e) => chain(e).unsetLink().run(),\n  },\n  insertTable: {\n    label: \"Insert table\",\n    icon: TableIcon,\n    run: (e) => chain(e).insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),\n  },\n} satisfies Record<string, ActionDef>\n\ntype ActionName = keyof typeof actions\n\n/** Subscribe to the bits of editor state a control needs; re-renders on selection and doc changes. */\nfunction useActionState(isActive?: (e: Editor) => boolean, canRun?: (e: Editor) => boolean) {\n  const { editor, editable } = useRichTextEditor()\n  const state = useEditorState({\n    editor,\n    selector: ({ editor }) => ({\n      active: !!editor && !!isActive?.(editor),\n      enabled: !!editor && editable && (canRun ? canRun(editor) : true),\n    }),\n  })\n  return state ?? { active: false, enabled: false }\n}\n\n/* ---------------------------------------------------------------------------\n * Toolbar\n * ------------------------------------------------------------------------- */\n\nfunction RichTextEditorToolbar({ className, onKeyDown, ...props }: React.ComponentProps<\"div\">) {\n  const ref = React.useRef<HTMLDivElement>(null)\n  return (\n    <div\n      ref={ref}\n      data-slot=\"rich-text-editor-toolbar\"\n      role=\"toolbar\"\n      aria-label=\"Formatting\"\n      className={cn(\"flex flex-wrap items-center gap-1 border-b p-1.5\", className)}\n      onKeyDown={(event) => {\n        onKeyDown?.(event)\n        if (event.defaultPrevented) return\n        if (event.key !== \"ArrowRight\" && event.key !== \"ArrowLeft\") return\n        const buttons = Array.from(ref.current?.querySelectorAll<HTMLElement>(\"button:not([disabled])\") ?? [])\n        const index = buttons.indexOf(document.activeElement as HTMLElement)\n        if (index === -1) return\n        event.preventDefault()\n        const next =\n          event.key === \"ArrowRight\" ? (index + 1) % buttons.length : (index - 1 + buttons.length) % buttons.length\n        buttons[next]?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction RichTextEditorToolbarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"rich-text-editor-toolbar-group\" className={cn(\"flex items-center gap-0.5\", className)} {...props} />\n  )\n}\n\nfunction RichTextEditorToolbarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"rich-text-editor-toolbar-separator\"\n      orientation=\"vertical\"\n      className={cn(\"mx-1 h-5!\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ControlTooltip({\n  label,\n  shortcut,\n  children,\n}: {\n  label: React.ReactNode\n  shortcut?: string\n  children: React.ReactElement\n}) {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{children}</TooltipTrigger>\n      <TooltipContent>\n        {label}\n        {shortcut && <Kbd className=\"ms-1.5\">{shortcut}</Kbd>}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n\ntype ControlProps = {\n  /** A built-in action; supplies icon, label, shortcut and behaviour. */\n  name?: ActionName\n  label?: string\n  shortcut?: string\n  isActive?: (editor: Editor) => boolean\n  canRun?: (editor: Editor) => boolean\n  onToggle?: (editor: Editor) => void\n  tooltip?: boolean\n}\n\n/** A pressed/unpressed formatting control (marks, lists, alignment, block types). */\nfunction RichTextEditorToggle({\n  name,\n  label,\n  shortcut,\n  isActive,\n  canRun,\n  onToggle,\n  tooltip = true,\n  className,\n  children,\n  asChild,\n  ...props\n}: Omit<React.ComponentProps<typeof Toggle>, \"pressed\" | \"onPressedChange\"> & ControlProps) {\n  const { editor } = useRichTextEditor()\n  const def: ActionDef | undefined = name ? actions[name] : undefined\n  const activeFn = isActive ?? def?.isActive\n  const canFn = canRun ?? def?.canRun\n  const { active, enabled } = useActionState(activeFn, canFn)\n  const text = label ?? def?.label ?? name ?? \"\"\n  const Icon = def?.icon\n  const control = (\n    <Toggle\n      data-slot=\"rich-text-editor-toggle\"\n      data-action={name}\n      size=\"sm\"\n      aria-label={text}\n      pressed={active}\n      disabled={!enabled}\n      asChild={asChild}\n      className={cn(\"size-7 px-0\", className)}\n      onPressedChange={() => {\n        if (!editor) return\n        if (onToggle) onToggle(editor)\n        else def?.run(editor)\n      }}\n      {...props}\n    >\n      {asChild ? children : (children ?? (Icon ? <Icon /> : text))}\n    </Toggle>\n  )\n  return tooltip ? (\n    <ControlTooltip label={text} shortcut={shortcut ?? def?.shortcut}>\n      {control}\n    </ControlTooltip>\n  ) : (\n    control\n  )\n}\n\n/** A one-shot action (undo, redo, divider, clear formatting, insert table). */\nfunction RichTextEditorTrigger({\n  name,\n  label,\n  shortcut,\n  canRun,\n  onToggle,\n  tooltip = true,\n  className,\n  children,\n  asChild,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button> & Omit<ControlProps, \"isActive\">) {\n  const { editor } = useRichTextEditor()\n  const def: ActionDef | undefined = name ? actions[name] : undefined\n  const { enabled } = useActionState(undefined, canRun ?? def?.canRun)\n  const text = label ?? def?.label ?? name ?? \"\"\n  const Icon = def?.icon\n  const control = (\n    <Button\n      data-slot=\"rich-text-editor-trigger\"\n      data-action={name}\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      aria-label={text}\n      disabled={!enabled}\n      asChild={asChild}\n      className={className}\n      onClick={(event) => {\n        onClick?.(event)\n        if (event.defaultPrevented || !editor) return\n        if (onToggle) onToggle(editor)\n        else def?.run(editor)\n      }}\n      {...props}\n    >\n      {asChild ? children : (children ?? (Icon ? <Icon /> : text))}\n    </Button>\n  )\n  return tooltip ? (\n    <ControlTooltip label={text} shortcut={shortcut ?? def?.shortcut}>\n      {control}\n    </ControlTooltip>\n  ) : (\n    control\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Block type select, link, image\n * ------------------------------------------------------------------------- */\n\nconst blockOptions: { value: ActionName; label: string }[] = [\n  { value: \"paragraph\", label: \"Text\" },\n  { value: \"heading1\", label: \"Heading 1\" },\n  { value: \"heading2\", label: \"Heading 2\" },\n  { value: \"heading3\", label: \"Heading 3\" },\n  { value: \"blockquote\", label: \"Quote\" },\n  { value: \"codeBlock\", label: \"Code block\" },\n]\nconst blockCollection = createListCollection({ items: blockOptions, itemToValue: (o) => o.value })\n\nfunction RichTextEditorBlockSelect({\n  className,\n  ...props\n}: Omit<React.ComponentProps<typeof Select>, \"collection\" | \"value\" | \"onValueChange\">) {\n  const { editor, editable } = useRichTextEditor()\n  const current = useEditorState({\n    editor,\n    selector: ({ editor }) =>\n      editor\n        ? (blockOptions.find((o) => (actions[o.value] as ActionDef).isActive?.(editor))?.value ?? \"paragraph\")\n        : \"paragraph\",\n  })\n  const label = blockOptions.find((o) => o.value === current)?.label\n  return (\n    <Select\n      collection={blockCollection}\n      value={[current ?? \"paragraph\"]}\n      onValueChange={({ value }) => {\n        const name = value[0] as ActionName | undefined\n        if (editor && name) actions[name].run(editor)\n      }}\n      disabled={!editable}\n      positioning={{ sameWidth: false }}\n      {...props}\n    >\n      <SelectControl>\n        <SelectTrigger\n          size=\"sm\"\n          className={cn(\"w-32\", className)}\n          data-slot=\"rich-text-editor-block-select\"\n          aria-label=\"Block type\"\n        >\n          <SelectValue>{label}</SelectValue>\n        </SelectTrigger>\n      </SelectControl>\n      <SelectContent>\n        {blockOptions.map((o) => {\n          const Icon = actions[o.value].icon\n          return (\n            <SelectItem key={o.value} item={o}>\n              <Icon className=\"size-4 text-muted-foreground\" />\n              <SelectItemText>{o.label}</SelectItemText>\n              <SelectItemIndicator />\n            </SelectItem>\n          )\n        })}\n      </SelectContent>\n    </Select>\n  )\n}\n\n/** Set or edit a link on the selection through a small popover form. */\nfunction RichTextEditorLinkTrigger({ className, ...props }: React.ComponentProps<typeof Toggle>) {\n  const { editor, editable } = useRichTextEditor()\n  const { active } = useActionState((e) => e.isActive(\"link\"))\n  const [open, setOpen] = React.useState(false)\n  const [href, setHref] = React.useState(\"\")\n  const apply = () => {\n    if (!editor) return\n    const url = href.trim()\n    if (!url) editor.chain().focus().extendMarkRange(\"link\").unsetLink().run()\n    else editor.chain().focus().extendMarkRange(\"link\").setLink({ href: url }).run()\n    setOpen(false)\n  }\n  return (\n    <Popover\n      open={open}\n      onOpenChange={({ open }) => {\n        if (open) setHref((editor?.getAttributes(\"link\").href as string | undefined) ?? \"\")\n        setOpen(open)\n      }}\n      positioning={{ placement: \"bottom-start\" }}\n    >\n      <ControlTooltip label=\"Link\" shortcut=\"⌘K\">\n        <PopoverTrigger asChild>\n          <Toggle\n            data-slot=\"rich-text-editor-link-trigger\"\n            size=\"sm\"\n            aria-label=\"Link\"\n            pressed={active}\n            disabled={!editable}\n            className={cn(\"size-7 px-0\", className)}\n            {...props}\n          >\n            <LinkIcon />\n          </Toggle>\n        </PopoverTrigger>\n      </ControlTooltip>\n      <PopoverContent className=\"w-72\">\n        <form\n          className=\"flex items-center gap-2\"\n          onSubmit={(event) => {\n            event.preventDefault()\n            apply()\n          }}\n        >\n          <Input\n            value={href}\n            onChange={(e) => setHref(e.target.value)}\n            placeholder=\"https://example.com\"\n            aria-label=\"Link URL\"\n            autoFocus\n            className=\"h-8\"\n          />\n          <Button type=\"submit\" size=\"sm\">\n            {href.trim() ? \"Apply\" : \"Remove\"}\n          </Button>\n        </form>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\n/** Insert an image by URL. */\nfunction RichTextEditorImageTrigger({ className, ...props }: React.ComponentProps<typeof Button>) {\n  const { editor, editable } = useRichTextEditor()\n  const [open, setOpen] = React.useState(false)\n  const [src, setSrc] = React.useState(\"\")\n  return (\n    <Popover open={open} onOpenChange={({ open }) => setOpen(open)} positioning={{ placement: \"bottom-start\" }}>\n      <ControlTooltip label=\"Image\">\n        <PopoverTrigger asChild>\n          <Button\n            data-slot=\"rich-text-editor-image-trigger\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            aria-label=\"Image\"\n            disabled={!editable}\n            className={className}\n            {...props}\n          >\n            <ImageIcon />\n          </Button>\n        </PopoverTrigger>\n      </ControlTooltip>\n      <PopoverContent className=\"w-72\">\n        <form\n          className=\"flex items-center gap-2\"\n          onSubmit={(event) => {\n            event.preventDefault()\n            if (editor && src.trim()) editor.chain().focus().setImage({ src: src.trim() }).run()\n            setSrc(\"\")\n            setOpen(false)\n          }}\n        >\n          <Input\n            value={src}\n            onChange={(e) => setSrc(e.target.value)}\n            placeholder=\"https://…/image.png\"\n            aria-label=\"Image URL\"\n            autoFocus\n            className=\"h-8\"\n          />\n          <Button type=\"submit\" size=\"sm\" disabled={!src.trim()}>\n            Insert\n          </Button>\n        </form>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Content, bubble menu, footer\n * ------------------------------------------------------------------------- */\n\nfunction RichTextEditorContent({ className, ...props }: Omit<React.ComponentProps<typeof EditorContent>, \"editor\">) {\n  const { editor } = useRichTextEditor()\n  return (\n    <EditorContent\n      editor={editor}\n      data-slot=\"rich-text-editor-content\"\n      className={cn(\n        \"prose prose-sm min-h-0 max-w-none flex-1 overflow-y-auto px-4 py-3 prose-neutral dark:prose-invert\",\n        \"[&_.tiptap]:min-h-40 [&_.tiptap]:outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** A floating toolbar over the current text selection. Compose it from the same toggles. */\nfunction RichTextEditorBubbleMenu({ className, children, ...props }: Omit<BubbleMenuProps, \"editor\">) {\n  const { editor, editable } = useRichTextEditor()\n  if (!editor || !editable) return null\n  return (\n    <BubbleMenu\n      editor={editor}\n      options={{ placement: \"top\", offset: 8 }}\n      shouldShow={({ editor, from, to }) =>\n        editable && from !== to && !editor.isActive(\"image\") && !editor.isActive(\"codeBlock\")\n      }\n      className={cn(\n        \"z-50 flex items-center gap-0.5 rounded-lg border bg-popover p-1 text-popover-foreground shadow-md\",\n        className\n      )}\n      {...props}\n    >\n      <div\n        data-slot=\"rich-text-editor-bubble-menu\"\n        role=\"toolbar\"\n        aria-label=\"Selection formatting\"\n        className=\"contents\"\n      >\n        {children}\n      </div>\n    </BubbleMenu>\n  )\n}\n\nfunction RichTextEditorFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"rich-text-editor-footer\"\n      className={cn(\"flex items-center gap-3 border-t px-3 py-1.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RichTextEditorCharacterCount({ className, ...props }: React.ComponentProps<typeof ark.span>) {\n  const { editor } = useRichTextEditor()\n  const stats = useEditorState({\n    editor,\n    selector: ({ editor }) => {\n      const storage = editor?.storage.characterCount as { characters?: () => number; words?: () => number } | undefined\n      return { characters: storage?.characters?.() ?? 0, words: storage?.words?.() ?? 0 }\n    },\n  })\n  const limit = (\n    editor?.extensionManager.extensions.find((e) => e.name === \"characterCount\")?.options as { limit?: number }\n  )?.limit\n  return (\n    <ark.span\n      data-slot=\"rich-text-editor-character-count\"\n      data-over={limit && stats && stats.characters >= limit ? \"\" : undefined}\n      className={cn(\"tabular-nums data-over:text-destructive\", className)}\n      {...props}\n    >\n      {stats?.words ?? 0} words · {stats?.characters ?? 0}\n      {limit ? ` / ${limit}` : \"\"} characters\n    </ark.span>\n  )\n}\n\nexport {\n  RichTextEditor,\n  RichTextEditorToolbar,\n  RichTextEditorToolbarGroup,\n  RichTextEditorToolbarSeparator,\n  RichTextEditorToggle,\n  RichTextEditorTrigger,\n  RichTextEditorBlockSelect,\n  RichTextEditorLinkTrigger,\n  RichTextEditorImageTrigger,\n  RichTextEditorContent,\n  RichTextEditorBubbleMenu,\n  RichTextEditorFooter,\n  RichTextEditorCharacterCount,\n  useRichTextEditor,\n  actions as richTextActions,\n  type RichTextChange,\n  type ActionName as RichTextActionName,\n}\n"
+      "content": "import * as React from \"react\"\nimport { ark } from \"@ark-ui/react\"\nimport { createListCollection } from \"@ark-ui/react/collection\"\nimport { Highlight } from \"@tiptap/extension-highlight\"\nimport { Image } from \"@tiptap/extension-image\"\nimport { TableKit } from \"@tiptap/extension-table\"\nimport { TaskItem } from \"@tiptap/extension-task-item\"\nimport { TaskList } from \"@tiptap/extension-task-list\"\nimport { TextAlign } from \"@tiptap/extension-text-align\"\nimport { CharacterCount, Placeholder } from \"@tiptap/extensions\"\nimport {\n  EditorContent,\n  useEditor,\n  useEditorState,\n  type Editor,\n  type Extensions,\n  type JSONContent,\n  type UseEditorOptions,\n} from \"@tiptap/react\"\nimport { BubbleMenu, type BubbleMenuProps } from \"@tiptap/react/menus\"\nimport { StarterKit } from \"@tiptap/starter-kit\"\nimport {\n  AlignCenterIcon,\n  AlignJustifyIcon,\n  AlignLeftIcon,\n  AlignRightIcon,\n  BoldIcon,\n  CodeIcon,\n  Heading1Icon,\n  Heading2Icon,\n  Heading3Icon,\n  HighlighterIcon,\n  ImageIcon,\n  ItalicIcon,\n  LinkIcon,\n  ListChecksIcon,\n  ListIcon,\n  ListOrderedIcon,\n  MinusIcon,\n  PilcrowIcon,\n  QuoteIcon,\n  Redo2Icon,\n  RemoveFormattingIcon,\n  SquareCodeIcon,\n  StrikethroughIcon,\n  TableIcon,\n  UnderlineIcon,\n  Undo2Icon,\n  UnlinkIcon,\n} from \"lucide-react\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\"\nimport {\n  Select,\n  SelectContent,\n  SelectControl,\n  SelectItem,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { Toggle } from \"@/components/ui/toggle\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/components/ui/tooltip\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * RichTextEditor — compositional editor parts on tiptap. The root owns the\n * tiptap `Editor` (content is controllable as HTML) and reports changes as\n * `onChange({ html, json, text })`. Every toolbar control is its own part and\n * reads the editor from context, so a consumer composes exactly the toolbar\n * it wants; `RichTextEditorToggle name=\"bold\"` covers the common actions and\n * `isActive`/`onToggle` take over for custom ones.\n *\n * Anatomy:\n *   RichTextEditor { content, onChange, placeholder, editable }\n *     RichTextEditorToolbar > ToolbarGroup > Toggle name=… / Trigger name=… / BlockSelect / LinkTrigger / ImageTrigger\n *     RichTextEditorContent            the prose area\n *     RichTextEditorBubbleMenu         selection toolbar (same toggles)\n *     RichTextEditorFooter > RichTextEditorCharacterCount\n */\n\ntype RichTextChange = { html: string; json: JSONContent; text: string }\n\ntype RichTextEditorContextValue = { editor: Editor | null; editable: boolean }\nconst RichTextEditorContext = React.createContext<RichTextEditorContextValue | null>(null)\n\nfunction useRichTextEditor() {\n  const ctx = React.useContext(RichTextEditorContext)\n  if (!ctx) throw new Error(\"RichTextEditor parts must be used within <RichTextEditor>\")\n  return ctx\n}\n\n/* ---------------------------------------------------------------------------\n * Root\n * ------------------------------------------------------------------------- */\n\nfunction RichTextEditor({\n  content,\n  defaultContent = \"\",\n  onChange,\n  placeholder = \"Write something…\",\n  editable = true,\n  autofocus = false,\n  extensions = [],\n  characterLimit,\n  editorOptions,\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"content\" | \"onChange\"> & {\n  /** Controlled HTML. Prefer `defaultContent` + `onChange` unless you need to replace the document. */\n  content?: string\n  /** Initial HTML when uncontrolled. */\n  defaultContent?: string\n  onChange?: (change: RichTextChange) => void\n  placeholder?: string\n  editable?: boolean\n  /** Focus the editor on mount. */\n  autofocus?: boolean\n  /** Extra tiptap extensions appended to the built-in set. */\n  extensions?: Extensions\n  /** Maximum characters; the count shows `data-over` past it. */\n  characterLimit?: number\n  /** Escape hatch for any other `useEditor` option. */\n  editorOptions?: Partial<UseEditorOptions>\n}) {\n  const onChangeRef = React.useRef(onChange)\n  React.useEffect(() => {\n    onChangeRef.current = onChange\n  }, [onChange])\n\n  const editor = useEditor({\n    extensions: [\n      StarterKit.configure({\n        heading: { levels: [1, 2, 3] },\n        link: { openOnClick: false, autolink: true, defaultProtocol: \"https\" },\n      }),\n      Placeholder.configure({ placeholder }),\n      CharacterCount.configure({ limit: characterLimit }),\n      TaskList,\n      TaskItem.configure({ nested: true }),\n      Highlight,\n      TextAlign.configure({ types: [\"heading\", \"paragraph\"] }),\n      Image.configure({ inline: false }),\n      TableKit.configure({ table: { resizable: false } }),\n      ...extensions,\n    ],\n    content: content ?? defaultContent,\n    editable,\n    autofocus,\n    editorProps: {\n      attributes: { class: \"outline-none\" },\n      ...editorOptions?.editorProps,\n    },\n    onUpdate: ({ editor }) => {\n      onChangeRef.current?.({ html: editor.getHTML(), json: editor.getJSON(), text: editor.getText() })\n      editorOptions?.onUpdate?.({ editor, transaction: editor.state.tr, appendedTransactions: [] })\n    },\n    ...editorOptions,\n  })\n\n  // Controlled content: replace the document only when the outside value actually differs.\n  React.useEffect(() => {\n    if (!editor || content === undefined) return\n    if (content !== editor.getHTML()) editor.commands.setContent(content, { emitUpdate: false })\n  }, [editor, content])\n\n  React.useEffect(() => {\n    if (editor && editor.isEditable !== editable) editor.setEditable(editable)\n  }, [editor, editable])\n\n  const ctx = React.useMemo(() => ({ editor, editable }), [editor, editable])\n\n  return (\n    <RichTextEditorContext.Provider value={ctx}>\n      <div\n        data-slot=\"rich-text-editor\"\n        data-editable={editable ? \"\" : undefined}\n        className={cn(\n          \"flex min-h-0 flex-col rounded-xl border bg-background text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-focus-visible:border-ring\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </RichTextEditorContext.Provider>\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Actions registry\n * ------------------------------------------------------------------------- */\n\ntype ActionDef = {\n  label: string\n  icon: React.ComponentType<{ className?: string }>\n  /** Keyboard shortcut shown in the tooltip. */\n  shortcut?: string\n  /** Whether the toggle is pressed. */\n  isActive?: (editor: Editor) => boolean\n  /** Whether the action can run right now; disables the control when false. */\n  canRun?: (editor: Editor) => boolean\n  run: (editor: Editor) => void\n}\n\nconst chain = (editor: Editor) => editor.chain().focus()\n\nconst actions = {\n  bold: {\n    label: \"Bold\",\n    icon: BoldIcon,\n    /** Keyboard shortcut shown in the tooltip. */\n    shortcut: \"⌘B\",\n    /** Whether the toggle is pressed. */\n    isActive: (e) => e.isActive(\"bold\"),\n    run: (e) => chain(e).toggleBold().run(),\n  },\n  italic: {\n    label: \"Italic\",\n    icon: ItalicIcon,\n    /** Keyboard shortcut shown in the tooltip. */\n    shortcut: \"⌘I\",\n    /** Whether the toggle is pressed. */\n    isActive: (e) => e.isActive(\"italic\"),\n    run: (e) => chain(e).toggleItalic().run(),\n  },\n  underline: {\n    label: \"Underline\",\n    icon: UnderlineIcon,\n    /** Keyboard shortcut shown in the tooltip. */\n    shortcut: \"⌘U\",\n    /** Whether the toggle is pressed. */\n    isActive: (e) => e.isActive(\"underline\"),\n    run: (e) => chain(e).toggleUnderline().run(),\n  },\n  strike: {\n    label: \"Strikethrough\",\n    icon: StrikethroughIcon,\n    /** Keyboard shortcut shown in the tooltip. */\n    shortcut: \"⌘⇧S\",\n    /** Whether the toggle is pressed. */\n    isActive: (e) => e.isActive(\"strike\"),\n    run: (e) => chain(e).toggleStrike().run(),\n  },\n  code: {\n    label: \"Inline code\",\n    icon: CodeIcon,\n    /** Keyboard shortcut shown in the tooltip. */\n    shortcut: \"⌘E\",\n    /** Whether the toggle is pressed. */\n    isActive: (e) => e.isActive(\"code\"),\n    run: (e) => chain(e).toggleCode().run(),\n  },\n  highlight: {\n    label: \"Highlight\",\n    icon: HighlighterIcon,\n    /** Keyboard shortcut shown in the tooltip. */\n    shortcut: \"⌘⇧H\",\n    /** Whether the toggle is pressed. */\n    isActive: (e) => e.isActive(\"highlight\"),\n    run: (e) => chain(e).toggleHighlight().run(),\n  },\n  paragraph: {\n    label: \"Paragraph\",\n    icon: PilcrowIcon,\n    /** Keyboard shortcut shown in the tooltip. */\n    shortcut: \"⌘⌥0\",\n    /** Whether the toggle is pressed. */\n    isActive: (e) => e.isActive(\"paragraph\"),\n    run: (e) => chain(e).setParagraph().run(),\n  },\n  heading1: {\n    label: \"Heading 1\",\n    icon: Heading1Icon,\n    /** Keyboard shortcut shown in the tooltip. */\n    shortcut: \"⌘⌥1\",\n    /** Whether the toggle is pressed. */\n    isActive: (e) => e.isActive(\"heading\", { level: 1 }),\n    run: (e) => chain(e).toggleHeading({ level: 1 }).run(),\n  },\n  heading2: {\n    label: \"Heading 2\",\n    icon: Heading2Icon,\n    /** Keyboard shortcut shown in the tooltip. */\n    shortcut: \"⌘⌥2\",\n    /** Whether the toggle is pressed. */\n    isActive: (e) => e.isActive(\"heading\", { level: 2 }),\n    run: (e) => chain(e).toggleHeading({ level: 2 }).run(),\n  },\n  heading3: {\n    label: \"Heading 3\",\n    icon: Heading3Icon,\n    /** Keyboard shortcut shown in the tooltip. */\n    shortcut: \"⌘⌥3\",\n    /** Whether the toggle is pressed. */\n    isActive: (e) => e.isActive(\"heading\", { level: 3 }),\n    run: (e) => chain(e).toggleHeading({ level: 3 }).run(),\n  },\n  bulletList: {\n    label: \"Bullet list\",\n    icon: ListIcon,\n    /** Keyboard shortcut shown in the tooltip. */\n    shortcut: \"⌘⇧8\",\n    /** Whether the toggle is pressed. */\n    isActive: (e) => e.isActive(\"bulletList\"),\n    run: (e) => chain(e).toggleBulletList().run(),\n  },\n  orderedList: {\n    label: \"Numbered list\",\n    icon: ListOrderedIcon,\n    /** Keyboard shortcut shown in the tooltip. */\n    shortcut: \"⌘⇧7\",\n    /** Whether the toggle is pressed. */\n    isActive: (e) => e.isActive(\"orderedList\"),\n    run: (e) => chain(e).toggleOrderedList().run(),\n  },\n  taskList: {\n    label: \"Task list\",\n    icon: ListChecksIcon,\n    /** Keyboard shortcut shown in the tooltip. */\n    shortcut: \"⌘⇧9\",\n    /** Whether the toggle is pressed. */\n    isActive: (e) => e.isActive(\"taskList\"),\n    run: (e) => chain(e).toggleTaskList().run(),\n  },\n  blockquote: {\n    label: \"Quote\",\n    icon: QuoteIcon,\n    /** Keyboard shortcut shown in the tooltip. */\n    shortcut: \"⌘⇧B\",\n    /** Whether the toggle is pressed. */\n    isActive: (e) => e.isActive(\"blockquote\"),\n    run: (e) => chain(e).toggleBlockquote().run(),\n  },\n  codeBlock: {\n    label: \"Code block\",\n    icon: SquareCodeIcon,\n    /** Keyboard shortcut shown in the tooltip. */\n    shortcut: \"⌘⌥C\",\n    /** Whether the toggle is pressed. */\n    isActive: (e) => e.isActive(\"codeBlock\"),\n    run: (e) => chain(e).toggleCodeBlock().run(),\n  },\n  alignLeft: {\n    label: \"Align left\",\n    icon: AlignLeftIcon,\n    /** Keyboard shortcut shown in the tooltip. */\n    shortcut: \"⌘⇧L\",\n    /** Whether the toggle is pressed. */\n    isActive: (e) => e.isActive({ textAlign: \"left\" }),\n    run: (e) => chain(e).setTextAlign(\"left\").run(),\n  },\n  alignCenter: {\n    label: \"Align center\",\n    icon: AlignCenterIcon,\n    /** Keyboard shortcut shown in the tooltip. */\n    shortcut: \"⌘⇧E\",\n    /** Whether the toggle is pressed. */\n    isActive: (e) => e.isActive({ textAlign: \"center\" }),\n    run: (e) => chain(e).setTextAlign(\"center\").run(),\n  },\n  alignRight: {\n    label: \"Align right\",\n    icon: AlignRightIcon,\n    /** Keyboard shortcut shown in the tooltip. */\n    shortcut: \"⌘⇧R\",\n    /** Whether the toggle is pressed. */\n    isActive: (e) => e.isActive({ textAlign: \"right\" }),\n    run: (e) => chain(e).setTextAlign(\"right\").run(),\n  },\n  alignJustify: {\n    label: \"Justify\",\n    icon: AlignJustifyIcon,\n    /** Keyboard shortcut shown in the tooltip. */\n    shortcut: \"⌘⇧J\",\n    /** Whether the toggle is pressed. */\n    isActive: (e) => e.isActive({ textAlign: \"justify\" }),\n    run: (e) => chain(e).setTextAlign(\"justify\").run(),\n  },\n  horizontalRule: { label: \"Divider\", icon: MinusIcon, run: (e) => chain(e).setHorizontalRule().run() },\n  clearFormatting: {\n    label: \"Clear formatting\",\n    icon: RemoveFormattingIcon,\n    run: (e) => chain(e).unsetAllMarks().clearNodes().run(),\n  },\n  undo: {\n    label: \"Undo\",\n    icon: Undo2Icon,\n    /** Keyboard shortcut shown in the tooltip. */\n    shortcut: \"⌘Z\",\n    /** Whether the action can run right now; disables the control when false. */\n    canRun: (e) => e.can().undo(),\n    run: (e) => chain(e).undo().run(),\n  },\n  redo: {\n    label: \"Redo\",\n    icon: Redo2Icon,\n    /** Keyboard shortcut shown in the tooltip. */\n    shortcut: \"⌘⇧Z\",\n    /** Whether the action can run right now; disables the control when false. */\n    canRun: (e) => e.can().redo(),\n    run: (e) => chain(e).redo().run(),\n  },\n  unsetLink: {\n    label: \"Remove link\",\n    icon: UnlinkIcon,\n    /** Whether the toggle is pressed. */\n    isActive: (e) => e.isActive(\"link\"),\n    /** Whether the action can run right now; disables the control when false. */\n    canRun: (e) => e.isActive(\"link\"),\n    run: (e) => chain(e).unsetLink().run(),\n  },\n  insertTable: {\n    label: \"Insert table\",\n    icon: TableIcon,\n    run: (e) => chain(e).insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),\n  },\n} satisfies Record<string, ActionDef>\n\ntype ActionName = keyof typeof actions\n\n/** Subscribe to the bits of editor state a control needs; re-renders on selection and doc changes. */\nfunction useActionState(isActive?: (e: Editor) => boolean, canRun?: (e: Editor) => boolean) {\n  const { editor, editable } = useRichTextEditor()\n  const state = useEditorState({\n    editor,\n    selector: ({ editor }) => ({\n      active: !!editor && !!isActive?.(editor),\n      enabled: !!editor && editable && (canRun ? canRun(editor) : true),\n    }),\n  })\n  return state ?? { active: false, enabled: false }\n}\n\n/* ---------------------------------------------------------------------------\n * Toolbar\n * ------------------------------------------------------------------------- */\n\nfunction RichTextEditorToolbar({ className, onKeyDown, ...props }: React.ComponentProps<\"div\">) {\n  const ref = React.useRef<HTMLDivElement>(null)\n  return (\n    <div\n      ref={ref}\n      data-slot=\"rich-text-editor-toolbar\"\n      role=\"toolbar\"\n      aria-label=\"Formatting\"\n      className={cn(\"flex flex-wrap items-center gap-1 border-b p-1.5\", className)}\n      onKeyDown={(event) => {\n        onKeyDown?.(event)\n        if (event.defaultPrevented) return\n        if (event.key !== \"ArrowRight\" && event.key !== \"ArrowLeft\") return\n        const buttons = Array.from(ref.current?.querySelectorAll<HTMLElement>(\"button:not([disabled])\") ?? [])\n        const index = buttons.indexOf(document.activeElement as HTMLElement)\n        if (index === -1) return\n        event.preventDefault()\n        const next =\n          event.key === \"ArrowRight\" ? (index + 1) % buttons.length : (index - 1 + buttons.length) % buttons.length\n        buttons[next]?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction RichTextEditorToolbarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"rich-text-editor-toolbar-group\" className={cn(\"flex items-center gap-0.5\", className)} {...props} />\n  )\n}\n\nfunction RichTextEditorToolbarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"rich-text-editor-toolbar-separator\"\n      orientation=\"vertical\"\n      className={cn(\"mx-1 h-5!\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ControlTooltip({\n  label,\n  shortcut,\n  children,\n}: {\n  label: React.ReactNode\n  /** Keyboard shortcut shown in the tooltip. */\n  shortcut?: string\n  children: React.ReactElement\n}) {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{children}</TooltipTrigger>\n      <TooltipContent>\n        {label}\n        {shortcut && <Kbd className=\"ms-1.5\">{shortcut}</Kbd>}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n\ntype ControlProps = {\n  /** A built-in action; supplies icon, label, shortcut and behaviour. */\n  name?: ActionName\n  label?: string\n  /** Keyboard shortcut shown in the tooltip. */\n  shortcut?: string\n  /** Whether the toggle is pressed. */\n  isActive?: (editor: Editor) => boolean\n  /** Whether the action can run right now; disables the control when false. */\n  canRun?: (editor: Editor) => boolean\n  onToggle?: (editor: Editor) => void\n  tooltip?: boolean\n}\n\n/** A pressed/unpressed formatting control (marks, lists, alignment, block types). */\nfunction RichTextEditorToggle({\n  name,\n  label,\n  shortcut,\n  isActive,\n  canRun,\n  onToggle,\n  tooltip = true,\n  className,\n  children,\n  asChild,\n  ...props\n}: Omit<React.ComponentProps<typeof Toggle>, \"pressed\" | \"onPressedChange\"> & ControlProps) {\n  const { editor } = useRichTextEditor()\n  const def: ActionDef | undefined = name ? actions[name] : undefined\n  const activeFn = isActive ?? def?.isActive\n  const canFn = canRun ?? def?.canRun\n  const { active, enabled } = useActionState(activeFn, canFn)\n  const text = label ?? def?.label ?? name ?? \"\"\n  const Icon = def?.icon\n  const control = (\n    <Toggle\n      data-slot=\"rich-text-editor-toggle\"\n      data-action={name}\n      size=\"sm\"\n      aria-label={text}\n      pressed={active}\n      disabled={!enabled}\n      asChild={asChild}\n      className={cn(\"size-7 px-0\", className)}\n      onPressedChange={() => {\n        if (!editor) return\n        if (onToggle) onToggle(editor)\n        else def?.run(editor)\n      }}\n      {...props}\n    >\n      {asChild ? children : (children ?? (Icon ? <Icon /> : text))}\n    </Toggle>\n  )\n  return tooltip ? (\n    <ControlTooltip label={text} shortcut={shortcut ?? def?.shortcut}>\n      {control}\n    </ControlTooltip>\n  ) : (\n    control\n  )\n}\n\n/** A one-shot action (undo, redo, divider, clear formatting, insert table). */\nfunction RichTextEditorTrigger({\n  name,\n  label,\n  shortcut,\n  canRun,\n  onToggle,\n  tooltip = true,\n  className,\n  children,\n  asChild,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button> & Omit<ControlProps, \"isActive\">) {\n  const { editor } = useRichTextEditor()\n  const def: ActionDef | undefined = name ? actions[name] : undefined\n  const { enabled } = useActionState(undefined, canRun ?? def?.canRun)\n  const text = label ?? def?.label ?? name ?? \"\"\n  const Icon = def?.icon\n  const control = (\n    <Button\n      data-slot=\"rich-text-editor-trigger\"\n      data-action={name}\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      aria-label={text}\n      disabled={!enabled}\n      asChild={asChild}\n      className={className}\n      onClick={(event) => {\n        onClick?.(event)\n        if (event.defaultPrevented || !editor) return\n        if (onToggle) onToggle(editor)\n        else def?.run(editor)\n      }}\n      {...props}\n    >\n      {asChild ? children : (children ?? (Icon ? <Icon /> : text))}\n    </Button>\n  )\n  return tooltip ? (\n    <ControlTooltip label={text} shortcut={shortcut ?? def?.shortcut}>\n      {control}\n    </ControlTooltip>\n  ) : (\n    control\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Block type select, link, image\n * ------------------------------------------------------------------------- */\n\nconst blockOptions: { value: ActionName; label: string }[] = [\n  { value: \"paragraph\", label: \"Text\" },\n  { value: \"heading1\", label: \"Heading 1\" },\n  { value: \"heading2\", label: \"Heading 2\" },\n  { value: \"heading3\", label: \"Heading 3\" },\n  { value: \"blockquote\", label: \"Quote\" },\n  { value: \"codeBlock\", label: \"Code block\" },\n]\nconst blockCollection = createListCollection({ items: blockOptions, itemToValue: (o) => o.value })\n\nfunction RichTextEditorBlockSelect({\n  className,\n  ...props\n}: Omit<React.ComponentProps<typeof Select>, \"collection\" | \"value\" | \"onValueChange\">) {\n  const { editor, editable } = useRichTextEditor()\n  const current = useEditorState({\n    editor,\n    selector: ({ editor }) =>\n      editor\n        ? (blockOptions.find((o) => (actions[o.value] as ActionDef).isActive?.(editor))?.value ?? \"paragraph\")\n        : \"paragraph\",\n  })\n  const label = blockOptions.find((o) => o.value === current)?.label\n  return (\n    <Select\n      collection={blockCollection}\n      value={[current ?? \"paragraph\"]}\n      onValueChange={({ value }) => {\n        const name = value[0] as ActionName | undefined\n        if (editor && name) actions[name].run(editor)\n      }}\n      disabled={!editable}\n      positioning={{ sameWidth: false }}\n      {...props}\n    >\n      <SelectControl>\n        <SelectTrigger\n          size=\"sm\"\n          className={cn(\"w-32\", className)}\n          data-slot=\"rich-text-editor-block-select\"\n          aria-label=\"Block type\"\n        >\n          <SelectValue>{label}</SelectValue>\n        </SelectTrigger>\n      </SelectControl>\n      <SelectContent>\n        {blockOptions.map((o) => {\n          const Icon = actions[o.value].icon\n          return (\n            <SelectItem key={o.value} item={o}>\n              <Icon className=\"size-4 text-muted-foreground\" />\n              <SelectItemText>{o.label}</SelectItemText>\n              <SelectItemIndicator />\n            </SelectItem>\n          )\n        })}\n      </SelectContent>\n    </Select>\n  )\n}\n\n/** Set or edit a link on the selection through a small popover form. */\nfunction RichTextEditorLinkTrigger({ className, ...props }: React.ComponentProps<typeof Toggle>) {\n  const { editor, editable } = useRichTextEditor()\n  const { active } = useActionState((e) => e.isActive(\"link\"))\n  const [open, setOpen] = React.useState(false)\n  const [href, setHref] = React.useState(\"\")\n  const apply = () => {\n    if (!editor) return\n    const url = href.trim()\n    if (!url) editor.chain().focus().extendMarkRange(\"link\").unsetLink().run()\n    else editor.chain().focus().extendMarkRange(\"link\").setLink({ href: url }).run()\n    setOpen(false)\n  }\n  return (\n    <Popover\n      open={open}\n      onOpenChange={({ open }) => {\n        if (open) setHref((editor?.getAttributes(\"link\").href as string | undefined) ?? \"\")\n        setOpen(open)\n      }}\n      positioning={{ placement: \"bottom-start\" }}\n    >\n      <ControlTooltip label=\"Link\" shortcut=\"⌘K\">\n        <PopoverTrigger asChild>\n          <Toggle\n            data-slot=\"rich-text-editor-link-trigger\"\n            size=\"sm\"\n            aria-label=\"Link\"\n            pressed={active}\n            disabled={!editable}\n            className={cn(\"size-7 px-0\", className)}\n            {...props}\n          >\n            <LinkIcon />\n          </Toggle>\n        </PopoverTrigger>\n      </ControlTooltip>\n      <PopoverContent className=\"w-72\">\n        <form\n          className=\"flex items-center gap-2\"\n          onSubmit={(event) => {\n            event.preventDefault()\n            apply()\n          }}\n        >\n          <Input\n            value={href}\n            onChange={(e) => setHref(e.target.value)}\n            placeholder=\"https://example.com\"\n            aria-label=\"Link URL\"\n            autoFocus\n            className=\"h-8\"\n          />\n          <Button type=\"submit\" size=\"sm\">\n            {href.trim() ? \"Apply\" : \"Remove\"}\n          </Button>\n        </form>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\n/** Insert an image by URL. */\nfunction RichTextEditorImageTrigger({ className, ...props }: React.ComponentProps<typeof Button>) {\n  const { editor, editable } = useRichTextEditor()\n  const [open, setOpen] = React.useState(false)\n  const [src, setSrc] = React.useState(\"\")\n  return (\n    <Popover open={open} onOpenChange={({ open }) => setOpen(open)} positioning={{ placement: \"bottom-start\" }}>\n      <ControlTooltip label=\"Image\">\n        <PopoverTrigger asChild>\n          <Button\n            data-slot=\"rich-text-editor-image-trigger\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            aria-label=\"Image\"\n            disabled={!editable}\n            className={className}\n            {...props}\n          >\n            <ImageIcon />\n          </Button>\n        </PopoverTrigger>\n      </ControlTooltip>\n      <PopoverContent className=\"w-72\">\n        <form\n          className=\"flex items-center gap-2\"\n          onSubmit={(event) => {\n            event.preventDefault()\n            if (editor && src.trim()) editor.chain().focus().setImage({ src: src.trim() }).run()\n            setSrc(\"\")\n            setOpen(false)\n          }}\n        >\n          <Input\n            value={src}\n            onChange={(e) => setSrc(e.target.value)}\n            placeholder=\"https://…/image.png\"\n            aria-label=\"Image URL\"\n            autoFocus\n            className=\"h-8\"\n          />\n          <Button type=\"submit\" size=\"sm\" disabled={!src.trim()}>\n            Insert\n          </Button>\n        </form>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Content, bubble menu, footer\n * ------------------------------------------------------------------------- */\n\nfunction RichTextEditorContent({ className, ...props }: Omit<React.ComponentProps<typeof EditorContent>, \"editor\">) {\n  const { editor } = useRichTextEditor()\n  return (\n    <EditorContent\n      editor={editor}\n      data-slot=\"rich-text-editor-content\"\n      className={cn(\n        \"prose prose-sm min-h-0 max-w-none flex-1 overflow-y-auto px-4 py-3 prose-neutral dark:prose-invert\",\n        \"[&_.tiptap]:min-h-40 [&_.tiptap]:outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** A floating toolbar over the current text selection. Compose it from the same toggles. */\nfunction RichTextEditorBubbleMenu({ className, children, ...props }: Omit<BubbleMenuProps, \"editor\">) {\n  const { editor, editable } = useRichTextEditor()\n  if (!editor || !editable) return null\n  return (\n    <BubbleMenu\n      editor={editor}\n      options={{ placement: \"top\", offset: 8 }}\n      shouldShow={({ editor, from, to }) =>\n        editable && from !== to && !editor.isActive(\"image\") && !editor.isActive(\"codeBlock\")\n      }\n      className={cn(\n        \"z-50 flex items-center gap-0.5 rounded-lg border bg-popover p-1 text-popover-foreground shadow-md\",\n        className\n      )}\n      {...props}\n    >\n      <div\n        data-slot=\"rich-text-editor-bubble-menu\"\n        role=\"toolbar\"\n        aria-label=\"Selection formatting\"\n        className=\"contents\"\n      >\n        {children}\n      </div>\n    </BubbleMenu>\n  )\n}\n\nfunction RichTextEditorFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"rich-text-editor-footer\"\n      className={cn(\"flex items-center gap-3 border-t px-3 py-1.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RichTextEditorCharacterCount({ className, ...props }: React.ComponentProps<typeof ark.span>) {\n  const { editor } = useRichTextEditor()\n  const stats = useEditorState({\n    editor,\n    selector: ({ editor }) => {\n      const storage = editor?.storage.characterCount as { characters?: () => number; words?: () => number } | undefined\n      return { characters: storage?.characters?.() ?? 0, words: storage?.words?.() ?? 0 }\n    },\n  })\n  const limit = (\n    editor?.extensionManager.extensions.find((e) => e.name === \"characterCount\")?.options as { limit?: number }\n  )?.limit\n  return (\n    <ark.span\n      data-slot=\"rich-text-editor-character-count\"\n      data-over={limit && stats && stats.characters >= limit ? \"\" : undefined}\n      className={cn(\"tabular-nums data-over:text-destructive\", className)}\n      {...props}\n    >\n      {stats?.words ?? 0} words · {stats?.characters ?? 0}\n      {limit ? ` / ${limit}` : \"\"} characters\n    </ark.span>\n  )\n}\n\nexport {\n  RichTextEditor,\n  RichTextEditorToolbar,\n  RichTextEditorToolbarGroup,\n  RichTextEditorToolbarSeparator,\n  RichTextEditorToggle,\n  RichTextEditorTrigger,\n  RichTextEditorBlockSelect,\n  RichTextEditorLinkTrigger,\n  RichTextEditorImageTrigger,\n  RichTextEditorContent,\n  RichTextEditorBubbleMenu,\n  RichTextEditorFooter,\n  RichTextEditorCharacterCount,\n  useRichTextEditor,\n  actions as richTextActions,\n  type RichTextChange,\n  type ActionName as RichTextActionName,\n}\n"
     }
   ],
   "css": "/* Rich text editor (tiptap) */\n[data-slot=\"rich-text-editor-content\"] .tiptap p.is-editor-empty:first-child::before {\n  content: attr(data-placeholder);\n  float: left;\n  height: 0;\n  pointer-events: none;\n  color: var(--color-muted-foreground);\n}\n[data-slot=\"rich-text-editor-content\"] .tiptap ul[data-type=\"taskList\"] {\n  list-style: none;\n  padding-inline-start: 0;\n}\n[data-slot=\"rich-text-editor-content\"] .tiptap ul[data-type=\"taskList\"] li {\n  display: flex;\n  gap: 0.5rem;\n  align-items: flex-start;\n}\n[data-slot=\"rich-text-editor-content\"] .tiptap ul[data-type=\"taskList\"] li > label {\n  flex: none;\n  margin-top: 0.3em;\n  user-select: none;\n}\n[data-slot=\"rich-text-editor-content\"] .tiptap ul[data-type=\"taskList\"] li > div {\n  flex: 1 1 auto;\n}\n[data-slot=\"rich-text-editor-content\"] .tiptap ul[data-type=\"taskList\"] li > div > p {\n  margin: 0;\n}\n[data-slot=\"rich-text-editor-content\"] .tiptap ul[data-type=\"taskList\"] li[data-checked=\"true\"] > div {\n  color: var(--color-muted-foreground);\n  text-decoration: line-through;\n}\n[data-slot=\"rich-text-editor-content\"] .tiptap ul[data-type=\"taskList\"] input[type=\"checkbox\"] {\n  accent-color: var(--color-primary);\n}\n[data-slot=\"rich-text-editor-content\"] .tiptap mark {\n  background-color: color-mix(in oklab, var(--color-amber-400) 45%, transparent);\n  color: inherit;\n  border-radius: 0.2em;\n  padding-inline: 0.1em;\n}\n[data-slot=\"rich-text-editor-content\"] .tiptap table {\n  table-layout: fixed;\n  width: 100%;\n}\n[data-slot=\"rich-text-editor-content\"] .tiptap table td,\n[data-slot=\"rich-text-editor-content\"] .tiptap table th {\n  border: 1px solid var(--color-border);\n  padding: 0.375rem 0.5rem;\n  vertical-align: top;\n  position: relative;\n}\n[data-slot=\"rich-text-editor-content\"] .tiptap table th {\n  background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n}\n[data-slot=\"rich-text-editor-content\"] .tiptap table .selectedCell::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: color-mix(in oklab, var(--color-primary) 12%, transparent);\n  pointer-events: none;\n}\n[data-slot=\"rich-text-editor-content\"] .tiptap img {\n  border-radius: var(--radius-lg);\n}\n[data-slot=\"rich-text-editor-content\"] .tiptap img.ProseMirror-selectednode,\n[data-slot=\"rich-text-editor-content\"] .tiptap .ProseMirror-selectednode {\n  outline: 2px solid var(--color-ring);\n  outline-offset: 2px;\n}\n[data-slot=\"rich-text-editor-content\"] .tiptap a {\n  color: var(--color-primary);\n  text-decoration: underline;\n  text-underline-offset: 0.2em;\n}\n[data-slot=\"rich-text-editor-content\"] .tiptap :where(h1, h2, h3):first-child {\n  margin-top: 0;\n}\n",