mtxuilib 0.0.308 → 0.0.310

package/dist/ui/novel/novel/src/extensions/image-resizer.cjs

@@ -31,6 +31,7 @@ __export(image_resizer_exports, {
   ImageResizer: () => ImageResizer
 });
 module.exports = __toCommonJS(image_resizer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_react_moveable = __toESM(require("react-moveable"), 1);
 var import_react = require("@tiptap/react");
 const ImageResizer = () => {
@@ -52,7 +53,7 @@ const ImageResizer = () => {
       editor.commands.setNodeSelection(selection.from);
     }
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_react_moveable.default,
     {
       target: document.querySelector(".ProseMirror-selectednode"),

package/dist/ui/novel/tailwind/advanced-editor.cjs

@@ -52,6 +52,7 @@ __export(advanced_editor_exports, {
   TailwindAdvancedEditor: () => TailwindAdvancedEditor
 });
 module.exports = __toCommonJS(advanced_editor_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_use_debounce = require("use-debounce");
 var import_extensions = require("./extensions");
@@ -94,43 +95,65 @@ const TailwindAdvancedEditor = () => {
   }, []);
   if (!initialContent)
     return null;
-  return /* @__PURE__ */ React.createElement("div", { className: "relative w-full max-w-screen-lg" }, /* @__PURE__ */ React.createElement("div", { className: "bg-accent text-muted-foreground absolute right-5 top-5 z-10 mb-5 rounded-lg px-2 py-1 text-sm" }, saveStatus), /* @__PURE__ */ React.createElement(import_components.EditorRoot, null, /* @__PURE__ */ React.createElement(
-    import_components.EditorContent,
-    {
-      initialContent,
-      extensions,
-      className: "border-muted bg-background relative min-h-[500px] w-full max-w-screen-lg sm:mb-[calc(20vh)] sm:rounded-lg sm:border sm:shadow-lg",
-      editorProps: {
-        handleDOMEvents: {
-          keydown: (_view, event) => (0, import_extensions2.handleCommandNavigation)(event)
-        },
-        handlePaste: (view, event) => (0, import_plugins.handleImagePaste)(view, event, import_image_upload.uploadFn),
-        handleDrop: (view, event, _slice, moved) => (0, import_plugins.handleImageDrop)(view, event, moved, import_image_upload.uploadFn),
-        attributes: {
-          class: `prose prose-lg dark:prose-invert prose-headings:font-title font-default focus:outline-none max-w-full`
-        }
-      },
-      onUpdate: ({ editor }) => {
-        debouncedUpdates(editor);
-        setSaveStatus("Unsaved");
-      },
-      slotAfter: /* @__PURE__ */ React.createElement(import_extensions2.ImageResizer, null)
-    },
-    /* @__PURE__ */ React.createElement(import_components.EditorCommand, { className: "border-muted bg-background z-50 h-auto max-h-[330px] overflow-y-auto rounded-md border px-1 py-2 shadow-md transition-all" }, /* @__PURE__ */ React.createElement(import_components.EditorCommandEmpty, { className: "text-muted-foreground px-2" }, "No results"), /* @__PURE__ */ React.createElement(import_components.EditorCommandList, null, import_slash_command.suggestionItems.map((item) => /* @__PURE__ */ React.createElement(
-      import_components.EditorCommandItem,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative w-full max-w-screen-lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-accent text-muted-foreground absolute right-5 top-5 z-10 mb-5 rounded-lg px-2 py-1 text-sm", children: saveStatus }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.EditorRoot, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_components.EditorContent,
       {
-        value: item.title,
-        onCommand: (val) => {
-          item.command && item.command(val);
+        initialContent,
+        extensions,
+        className: "border-muted bg-background relative min-h-[500px] w-full max-w-screen-lg sm:mb-[calc(20vh)] sm:rounded-lg sm:border sm:shadow-lg",
+        editorProps: {
+          handleDOMEvents: {
+            keydown: (_view, event) => (0, import_extensions2.handleCommandNavigation)(event)
+          },
+          handlePaste: (view, event) => (0, import_plugins.handleImagePaste)(view, event, import_image_upload.uploadFn),
+          handleDrop: (view, event, _slice, moved) => (0, import_plugins.handleImageDrop)(view, event, moved, import_image_upload.uploadFn),
+          attributes: {
+            class: `prose prose-lg dark:prose-invert prose-headings:font-title font-default focus:outline-none max-w-full`
+          }
+        },
+        onUpdate: ({ editor }) => {
+          debouncedUpdates(editor);
+          setSaveStatus("Unsaved");
         },
-        className: `hover:bg-accent aria-selected:bg-accent flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm `,
-        key: item.title
-      },
-      /* @__PURE__ */ React.createElement("div", { className: "border-muted bg-background flex h-10 w-10 items-center justify-center rounded-md border" }, item.icon),
-      /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "font-medium" }, item.title), /* @__PURE__ */ React.createElement("p", { className: "text-muted-foreground text-xs" }, item.description))
-    )))),
-    /* @__PURE__ */ React.createElement(import_generative_menu_switch.default, { open: openAI, onOpenChange: setOpenAI }, /* @__PURE__ */ React.createElement(import_separator.Separator, { orientation: "vertical" }), /* @__PURE__ */ React.createElement(import_node_selector.NodeSelector, { open: openNode, onOpenChange: setOpenNode }), /* @__PURE__ */ React.createElement(import_separator.Separator, { orientation: "vertical" }), /* @__PURE__ */ React.createElement(import_link_selector.LinkSelector, { open: openLink, onOpenChange: setOpenLink }), /* @__PURE__ */ React.createElement(import_separator.Separator, { orientation: "vertical" }), /* @__PURE__ */ React.createElement(import_text_buttons.TextButtons, null), /* @__PURE__ */ React.createElement(import_separator.Separator, { orientation: "vertical" }), /* @__PURE__ */ React.createElement(import_color_selector.ColorSelector, { open: openColor, onOpenChange: setOpenColor }))
-  )));
+        slotAfter: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_extensions2.ImageResizer, {}),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.EditorCommand, { className: "border-muted bg-background z-50 h-auto max-h-[330px] overflow-y-auto rounded-md border px-1 py-2 shadow-md transition-all", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.EditorCommandEmpty, { className: "text-muted-foreground px-2", children: "No results" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.EditorCommandList, { children: import_slash_command.suggestionItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_components.EditorCommandItem,
+              {
+                value: item.title,
+                onCommand: (val) => {
+                  item.command && item.command(val);
+                },
+                className: `hover:bg-accent aria-selected:bg-accent flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm `,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border-muted bg-background flex h-10 w-10 items-center justify-center rounded-md border", children: item.icon }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "font-medium", children: item.title }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-xs", children: item.description })
+                  ] })
+                ]
+              },
+              item.title
+            )) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_generative_menu_switch.default, { open: openAI, onOpenChange: setOpenAI, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_separator.Separator, { orientation: "vertical" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_node_selector.NodeSelector, { open: openNode, onOpenChange: setOpenNode }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_separator.Separator, { orientation: "vertical" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link_selector.LinkSelector, { open: openLink, onOpenChange: setOpenLink }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_separator.Separator, { orientation: "vertical" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text_buttons.TextButtons, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_separator.Separator, { orientation: "vertical" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_color_selector.ColorSelector, { open: openColor, onOpenChange: setOpenColor })
+          ] })
+        ]
+      }
+    ) })
+  ] });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/ui/novel/tailwind/generative/ai-completion-command.cjs

@@ -21,6 +21,7 @@ __export(ai_completion_command_exports, {
   default: () => ai_completion_command_default
 });
 module.exports = __toCommonJS(ai_completion_command_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_lucide_react = require("lucide-react");
 var import_command = require("../ui/command");
 var import_components = require("../../novel/src/components");
@@ -32,36 +33,50 @@ const AICompletionCommands = ({
   if (!editor) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import_command.CommandGroup, null, /* @__PURE__ */ React.createElement(
-    import_command.CommandItem,
-    {
-      className: "gap-2 px-4",
-      value: "replace",
-      onSelect: () => {
-        const selection = editor.view.state.selection;
-        editor.chain().focus().insertContentAt(
-          {
-            from: selection.from,
-            to: selection.to
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_command.CommandGroup, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_command.CommandItem,
+        {
+          className: "gap-2 px-4",
+          value: "replace",
+          onSelect: () => {
+            const selection = editor.view.state.selection;
+            editor.chain().focus().insertContentAt(
+              {
+                from: selection.from,
+                to: selection.to
+              },
+              completion
+            ).run();
           },
-          completion
-        ).run();
-      }
-    },
-    /* @__PURE__ */ React.createElement(import_lucide_react.Check, { className: "text-muted-foreground h-4 w-4" }),
-    "Replace selection"
-  ), /* @__PURE__ */ React.createElement(
-    import_command.CommandItem,
-    {
-      className: "gap-2 px-4",
-      value: "insert",
-      onSelect: () => {
-        const selection = editor.view.state.selection;
-        editor.chain().focus().insertContentAt(selection.to + 1, completion).run();
-      }
-    },
-    /* @__PURE__ */ React.createElement(import_lucide_react.TextQuote, { className: "text-muted-foreground h-4 w-4" }),
-    "Insert below"
-  )), /* @__PURE__ */ React.createElement(import_command.CommandSeparator, null), /* @__PURE__ */ React.createElement(import_command.CommandGroup, null, /* @__PURE__ */ React.createElement(import_command.CommandItem, { onSelect: onDiscard, value: "thrash", className: "gap-2 px-4" }, /* @__PURE__ */ React.createElement(import_lucide_react.TrashIcon, { className: "text-muted-foreground h-4 w-4" }), "Discard")));
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { className: "text-muted-foreground h-4 w-4" }),
+            "Replace selection"
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_command.CommandItem,
+        {
+          className: "gap-2 px-4",
+          value: "insert",
+          onSelect: () => {
+            const selection = editor.view.state.selection;
+            editor.chain().focus().insertContentAt(selection.to + 1, completion).run();
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.TextQuote, { className: "text-muted-foreground h-4 w-4" }),
+            "Insert below"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_command.CommandSeparator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_command.CommandGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_command.CommandItem, { onSelect: onDiscard, value: "thrash", className: "gap-2 px-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.TrashIcon, { className: "text-muted-foreground h-4 w-4" }),
+      "Discard"
+    ] }) })
+  ] });
 };
 var ai_completion_command_default = AICompletionCommands;

package/dist/ui/novel/tailwind/generative/ai-selector-commands.cjs

@@ -21,6 +21,7 @@ __export(ai_selector_commands_exports, {
   default: () => ai_selector_commands_default
 });
 module.exports = __toCommonJS(ai_selector_commands_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_lucide_react = require("lucide-react");
 var import_extensions = require("../../novel/src/extensions");
 var import_command = require("../ui/command");
@@ -51,34 +52,42 @@ const AISelectorCommands = ({ onSelect }) => {
   const { editor } = (0, import_components.useEditor)();
   if (!editor)
     return null;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import_command.CommandGroup, { heading: "Edit or review selection" }, options.map((option) => /* @__PURE__ */ React.createElement(
-    import_command.CommandItem,
-    {
-      onSelect: (value) => {
-        const slice = editor.state.selection.content();
-        const text = editor.storage.markdown.serializer.serialize(
-          slice.content
-        );
-        onSelect(text, value);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_command.CommandGroup, { heading: "Edit or review selection", children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_command.CommandItem,
+      {
+        onSelect: (value) => {
+          const slice = editor.state.selection.content();
+          const text = editor.storage.markdown.serializer.serialize(
+            slice.content
+          );
+          onSelect(text, value);
+        },
+        className: "flex gap-2 px-4",
+        value: option.value,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(option.icon, { className: "h-4 w-4 text-purple-500" }),
+          option.label
+        ]
       },
-      className: "flex gap-2 px-4",
-      key: option.value,
-      value: option.value
-    },
-    /* @__PURE__ */ React.createElement(option.icon, { className: "h-4 w-4 text-purple-500" }),
-    option.label
-  ))), /* @__PURE__ */ React.createElement(import_command.CommandSeparator, null), /* @__PURE__ */ React.createElement(import_command.CommandGroup, { heading: "Use AI to do more" }, /* @__PURE__ */ React.createElement(
-    import_command.CommandItem,
-    {
-      onSelect: () => {
-        const text = (0, import_extensions.getPrevText)(editor, { chars: 5e3 });
-        onSelect(text, "continue");
-      },
-      value: "continue",
-      className: "gap-2 px-4"
-    },
-    /* @__PURE__ */ React.createElement(import_lucide_react.StepForward, { className: "h-4 w-4 text-purple-500" }),
-    "Continue writing"
-  )));
+      option.value
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_command.CommandSeparator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_command.CommandGroup, { heading: "Use AI to do more", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_command.CommandItem,
+      {
+        onSelect: () => {
+          const text = (0, import_extensions.getPrevText)(editor, { chars: 5e3 });
+          onSelect(text, "continue");
+        },
+        value: "continue",
+        className: "gap-2 px-4",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.StepForward, { className: "h-4 w-4 text-purple-500" }),
+          "Continue writing"
+        ]
+      }
+    ) })
+  ] });
 };
 var ai_selector_commands_default = AISelectorCommands;

package/dist/ui/novel/tailwind/generative/ai-selector.cjs

@@ -32,6 +32,7 @@ __export(ai_selector_exports, {
   AISelector: () => AISelector
 });
 module.exports = __toCommonJS(ai_selector_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("ai/react");
 var import_lucide_react = require("lucide-react");
 var import_react2 = require("react");
@@ -65,49 +66,63 @@ function AISelector({ onOpenChange }) {
   const hasCompletion = completion.length > 0;
   if (!editor)
     return null;
-  return /* @__PURE__ */ React.createElement(import_command.Command, { className: "w-[350px]" }, hasCompletion && /* @__PURE__ */ React.createElement("div", { className: "flex max-h-[400px]" }, /* @__PURE__ */ React.createElement(import_scroll_area.ScrollArea, null, /* @__PURE__ */ React.createElement("div", { className: "prose prose-sm p-2 px-4" }, /* @__PURE__ */ React.createElement(import_react_markdown.default, null, completion)))), isLoading && /* @__PURE__ */ React.createElement("div", { className: "text-muted-foreground flex h-12 w-full items-center px-4 text-sm font-medium text-purple-500" }, /* @__PURE__ */ React.createElement(import_magic.default, { className: "mr-2 h-4 w-4 shrink-0  " }), "AI is thinking", /* @__PURE__ */ React.createElement("div", { className: "ml-2 mt-1" }, /* @__PURE__ */ React.createElement(import_crazy_spinner.default, null))), !isLoading && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement(
-    import_command.CommandInput,
-    {
-      value: inputValue,
-      onValueChange: setInputValue,
-      autoFocus: true,
-      placeholder: hasCompletion ? "Tell AI what to do next" : "Ask AI to edit or generate...",
-      onFocus: () => (0, import_extensions.addAIHighlight)(editor)
-    }
-  ), /* @__PURE__ */ React.createElement(
-    import_button.Button,
-    {
-      size: "icon",
-      className: "absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full bg-purple-500 hover:bg-purple-900",
-      onClick: () => {
-        if (completion)
-          return complete(completion, {
-            body: { option: "zap", command: inputValue }
-          }).then(() => setInputValue(""));
-        const slice = editor.state.selection.content();
-        const text = editor.storage.markdown.serializer.serialize(
-          slice.content
-        );
-        complete(text, {
-          body: { option: "zap", command: inputValue }
-        }).then(() => setInputValue(""));
-      }
-    },
-    /* @__PURE__ */ React.createElement(import_lucide_react.ArrowUp, { className: "h-4 w-4" })
-  )), hasCompletion ? /* @__PURE__ */ React.createElement(
-    import_ai_completion_command.default,
-    {
-      onDiscard: () => {
-        onOpenChange(false);
-      },
-      completion
-    }
-  ) : /* @__PURE__ */ React.createElement(
-    import_ai_selector_commands.default,
-    {
-      onSelect: (value, option) => complete(value, { body: { option } })
-    }
-  )));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_command.Command, { className: "w-[350px]", children: [
+    hasCompletion && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex max-h-[400px]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_scroll_area.ScrollArea, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "prose prose-sm p-2 px-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_markdown.default, { children: completion }) }) }) }),
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-muted-foreground flex h-12 w-full items-center px-4 text-sm font-medium text-purple-500", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_magic.default, { className: "mr-2 h-4 w-4 shrink-0  " }),
+      "AI is thinking",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ml-2 mt-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_crazy_spinner.default, {}) })
+    ] }),
+    !isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_command.CommandInput,
+          {
+            value: inputValue,
+            onValueChange: setInputValue,
+            autoFocus: true,
+            placeholder: hasCompletion ? "Tell AI what to do next" : "Ask AI to edit or generate...",
+            onFocus: () => (0, import_extensions.addAIHighlight)(editor)
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_button.Button,
+          {
+            size: "icon",
+            className: "absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full bg-purple-500 hover:bg-purple-900",
+            onClick: () => {
+              if (completion)
+                return complete(completion, {
+                  body: { option: "zap", command: inputValue }
+                }).then(() => setInputValue(""));
+              const slice = editor.state.selection.content();
+              const text = editor.storage.markdown.serializer.serialize(
+                slice.content
+              );
+              complete(text, {
+                body: { option: "zap", command: inputValue }
+              }).then(() => setInputValue(""));
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowUp, { className: "h-4 w-4" })
+          }
+        )
+      ] }),
+      hasCompletion ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ai_completion_command.default,
+        {
+          onDiscard: () => {
+            onOpenChange(false);
+          },
+          completion
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ai_selector_commands.default,
+        {
+          onSelect: (value, option) => complete(value, { body: { option } })
+        }
+      )
+    ] })
+  ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/ui/novel/tailwind/generative/generative-menu-switch.cjs

@@ -31,6 +31,7 @@ __export(generative_menu_switch_exports, {
   default: () => generative_menu_switch_default
 });
 module.exports = __toCommonJS(generative_menu_switch_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_extensions = require("../../novel/src/extensions");
 var import_button = require("../ui/button");
@@ -51,7 +52,7 @@ const GenerativeMenuSwitch = ({
   }, [open]);
   if (!editor)
     return;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_components.EditorBubble,
     {
       tippyOptions: {
@@ -60,20 +61,27 @@ const GenerativeMenuSwitch = ({
           onOpenChange(false);
         }
       },
-      className: "border-muted bg-background flex w-fit max-w-[90vw] overflow-hidden rounded-md border shadow-xl"
-    },
-    open && /* @__PURE__ */ React.createElement(import_ai_selector.AISelector, { open, onOpenChange }),
-    !open && /* @__PURE__ */ React.createElement(import_react.Fragment, null, /* @__PURE__ */ React.createElement(
-      import_button.Button,
-      {
-        className: "gap-1 rounded-none text-purple-500",
-        variant: "ghost",
-        onClick: () => onOpenChange(true),
-        size: "sm"
-      },
-      /* @__PURE__ */ React.createElement(import_magic.default, { className: "h-5 w-5" }),
-      "Ask AI"
-    ), children)
+      className: "border-muted bg-background flex w-fit max-w-[90vw] overflow-hidden rounded-md border shadow-xl",
+      children: [
+        open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai_selector.AISelector, { open, onOpenChange }),
+        !open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_button.Button,
+            {
+              className: "gap-1 rounded-none text-purple-500",
+              variant: "ghost",
+              onClick: () => onOpenChange(true),
+              size: "sm",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_magic.default, { className: "h-5 w-5" }),
+                "Ask AI"
+              ]
+            }
+          ),
+          children
+        ] })
+      ]
+    }
   );
 };
 var generative_menu_switch_default = GenerativeMenuSwitch;

package/dist/ui/novel/tailwind/selectors/color-selector.cjs

@@ -21,6 +21,7 @@ __export(color_selector_exports, {
   ColorSelector: () => ColorSelector
 });
 module.exports = __toCommonJS(color_selector_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_lucide_react = require("lucide-react");
 var import_button = require("../ui/button");
 var import_popover = require("../ui/popover");
@@ -111,63 +112,85 @@ const ColorSelector = (props) => {
   const activeHighlightItem = HIGHLIGHT_COLORS.find(
     ({ color }) => editor.isActive("highlight", { color })
   );
-  return /* @__PURE__ */ React.createElement(import_popover.Popover, { modal: true, open: props.open, onOpenChange: props.onOpenChange }, /* @__PURE__ */ React.createElement(import_popover.PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(import_button.Button, { size: "sm", className: "gap-2 rounded-none", variant: "ghost" }, /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: "rounded-sm px-1",
-      style: {
-        color: activeColorItem == null ? void 0 : activeColorItem.color,
-        backgroundColor: activeHighlightItem == null ? void 0 : activeHighlightItem.color
-      }
-    },
-    "A"
-  ), /* @__PURE__ */ React.createElement(import_lucide_react.ChevronDown, { className: "h-4 w-4" }))), /* @__PURE__ */ React.createElement(
-    import_popover.PopoverContent,
-    {
-      sideOffset: 5,
-      className: "my-1 flex max-h-80 w-48 flex-col overflow-hidden overflow-y-auto rounded border p-1 shadow-xl ",
-      align: "start"
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React.createElement("div", { className: "text-muted-foreground my-1 px-2 text-sm font-semibold" }, "Color"), TEXT_COLORS.map(({ name, color }, index) => /* @__PURE__ */ React.createElement(
-      import_components.EditorBubbleItem,
-      {
-        key: index,
-        onSelect: () => {
-          editor.commands.unsetColor();
-          name !== "Default" && editor.chain().focus().setColor(color || "").run();
-        },
-        className: "hover:bg-accent flex cursor-pointer items-center justify-between px-2 py-1 text-sm"
-      },
-      /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
-        "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_popover.Popover, { modal: true, open: props.open, onOpenChange: props.onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_button.Button, { size: "sm", className: "gap-2 rounded-none", variant: "ghost", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "span",
         {
-          className: "rounded-sm border px-2 py-px font-medium",
-          style: { color }
-        },
-        "A"
-      ), /* @__PURE__ */ React.createElement("span", null, name))
-    ))),
-    /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-muted-foreground my-1 px-2 text-sm font-semibold" }, "Background"), HIGHLIGHT_COLORS.map(({ name, color }, index) => /* @__PURE__ */ React.createElement(
-      import_components.EditorBubbleItem,
+          className: "rounded-sm px-1",
+          style: {
+            color: activeColorItem == null ? void 0 : activeColorItem.color,
+            backgroundColor: activeHighlightItem == null ? void 0 : activeHighlightItem.color
+          },
+          children: "A"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronDown, { className: "h-4 w-4" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_popover.PopoverContent,
       {
-        key: index,
-        onSelect: () => {
-          editor.commands.unsetHighlight();
-          name !== "Default" && editor.commands.setHighlight({ color });
-        },
-        className: "hover:bg-accent flex cursor-pointer items-center justify-between px-2 py-1 text-sm"
-      },
-      /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: "rounded-sm border px-2 py-px font-medium",
-          style: { backgroundColor: color }
-        },
-        "A"
-      ), /* @__PURE__ */ React.createElement("span", null, name)),
-      editor.isActive("highlight", { color }) && /* @__PURE__ */ React.createElement(import_lucide_react.Check, { className: "h-4 w-4" })
-    )))
-  ));
+        sideOffset: 5,
+        className: "my-1 flex max-h-80 w-48 flex-col overflow-hidden overflow-y-auto rounded border p-1 shadow-xl ",
+        align: "start",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-muted-foreground my-1 px-2 text-sm font-semibold", children: "Color" }),
+            TEXT_COLORS.map(({ name, color }, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.EditorBubbleItem,
+              {
+                onSelect: () => {
+                  editor.commands.unsetColor();
+                  name !== "Default" && editor.chain().focus().setColor(color || "").run();
+                },
+                className: "hover:bg-accent flex cursor-pointer items-center justify-between px-2 py-1 text-sm",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "div",
+                    {
+                      className: "rounded-sm border px-2 py-px font-medium",
+                      style: { color },
+                      children: "A"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: name })
+                ] })
+              },
+              index
+            ))
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-muted-foreground my-1 px-2 text-sm font-semibold", children: "Background" }),
+            HIGHLIGHT_COLORS.map(({ name, color }, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_components.EditorBubbleItem,
+              {
+                onSelect: () => {
+                  editor.commands.unsetHighlight();
+                  name !== "Default" && editor.commands.setHighlight({ color });
+                },
+                className: "hover:bg-accent flex cursor-pointer items-center justify-between px-2 py-1 text-sm",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        className: "rounded-sm border px-2 py-px font-medium",
+                        style: { backgroundColor: color },
+                        children: "A"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: name })
+                  ] }),
+                  editor.isActive("highlight", { color }) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { className: "h-4 w-4" })
+                ]
+              },
+              index
+            ))
+          ] })
+        ]
+      }
+    )
+  ] });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {