@etus/ui 0.4.0-beta.2 → 0.4.0-beta.20

package/dist/chunk-YC5VVIZO.js

@@ -0,0 +1,92 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import { GripVerticalIcon } from 'lucide-react';
+import * as ResizablePrimitive from 'react-resizable-panels';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var resizablePanelGroupVariants = cva([
+  "flex h-full w-full",
+  "data-[panel-group-direction=vertical]:flex-col"
+]);
+var resizablePanelVariants = cva([
+  // Base styles - intentionally minimal as panel content varies
+]);
+var resizableHandleVariants = cva(
+  [
+    "bg-[color:var(--resizable-handle-bg)] relative flex items-center justify-center",
+    "focus-visible:ring-[color:var(--resizable-handle-ring)] focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden",
+    // Horizontal (default) styles
+    "w-[var(--resizable-handle-width-default)] after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2",
+    // Vertical direction styles
+    "data-[panel-group-direction=vertical]:h-[var(--resizable-handle-width-vertical)] data-[panel-group-direction=vertical]:w-full",
+    "data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1",
+    "data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0",
+    "data-[panel-group-direction=vertical]:after:-translate-y-1/2",
+    // Rotate handle icon in vertical mode
+    "[&[data-panel-group-direction=vertical]>div]:rotate-90"
+  ],
+  {
+    variants: {
+      /**
+       * Visual variant of the handle
+       * - default: Visible border line
+       * - invisible: No visible line, just cursor change
+       * - highlighted: More prominent handle on hover
+       */
+      variant: {
+        default: "",
+        invisible: "bg-transparent after:bg-transparent",
+        highlighted: "hover:bg-primary/20 transition-colors"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var resizableHandleGripVariants = cva([
+  "bg-[color:var(--resizable-handle-grip-bg)] z-10 flex h-[var(--resizable-handle-grip-height)] w-[var(--resizable-handle-grip-width)] items-center justify-center rounded-[var(--resizable-handle-grip-radius)] border"
+]);
+function ResizablePanelGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ResizablePrimitive.Group,
+    {
+      className: cn(resizablePanelGroupVariants(), className),
+      "data-slot": "resizable-panel-group",
+      ...props
+    }
+  );
+}
+function ResizablePanel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ResizablePrimitive.Panel,
+    {
+      className: cn(resizablePanelVariants(), className),
+      "data-slot": "resizable-panel",
+      ...props
+    }
+  );
+}
+function ResizableHandle({
+  withHandle,
+  variant,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ResizablePrimitive.Separator,
+    {
+      className: cn(resizableHandleVariants({ variant }), className),
+      "data-slot": "resizable-handle",
+      ...props,
+      children: withHandle && /* @__PURE__ */ jsx("div", { className: cn(resizableHandleGripVariants()), children: /* @__PURE__ */ jsx(GripVerticalIcon, { className: "size-2.5" }) })
+    }
+  );
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup, resizableHandleGripVariants, resizableHandleVariants, resizablePanelGroupVariants, resizablePanelVariants };
+//# sourceMappingURL=chunk-YC5VVIZO.js.map
+//# sourceMappingURL=chunk-YC5VVIZO.js.map

package/dist/chunk-YC5VVIZO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ResizablePanels/ResizablePanels.variants.ts","../src/components/layout/ResizablePanels/ResizablePanels.tsx"],"names":[],"mappings":";;;;;;AAMO,IAAM,8BAA8B,GAAA,CAAI;AAAA,EAC7C,oBAAA;AAAA,EACA;AACF,CAAC;AAMM,IAAM,yBAAyB,GAAA,CAAI;AAAA;AAE1C,CAAC;AAMM,IAAM,uBAAA,GAA0B,GAAA;AAAA,EACrC;AAAA,IACE,iFAAA;AAAA,IACA,uIAAA;AAAA;AAAA,IAEA,0HAAA;AAAA;AAAA,IAEA,+HAAA;AAAA,IACA,oGAAA;AAAA,IACA,8GAAA;AAAA,IACA,8DAAA;AAAA;AAAA,IAEA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,EAAA;AAAA,QACT,SAAA,EAAW,qCAAA;AAAA,QACX,WAAA,EAAa;AAAA;AACf,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ;AAKO,IAAM,8BAA8B,GAAA,CAAI;AAAA,EAC7C;AACF,CAAC;AC3CD,SAAS,mBAAA,CAAoB;AAAA,EAC3B,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA6B;AAC3B,EAAA,uBACE,GAAA;AAAA,IAAoB,kBAAA,CAAA,KAAA;AAAA,IAAnB;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,2BAAA,EAA4B,EAAG,SAAS,CAAA;AAAA,MACtD,WAAA,EAAU,uBAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,cAAA,CAAe,EAAE,SAAA,EAAW,GAAG,OAAM,EAAwB;AACpE,EAAA,uBACE,GAAA;AAAA,IAAoB,kBAAA,CAAA,KAAA;AAAA,IAAnB;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,sBAAA,EAAuB,EAAG,SAAS,CAAA;AAAA,MACjD,WAAA,EAAU,iBAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,eAAA,CAAgB;AAAA,EACvB,UAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAyB;AACvB,EAAA,uBACE,GAAA;AAAA,IAAoB,kBAAA,CAAA,SAAA;AAAA,IAAnB;AAAA,MACC,WAAW,EAAA,CAAG,uBAAA,CAAwB,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,MAC7D,WAAA,EAAU,kBAAA;AAAA,MACT,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA,UAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,2BAAA,EAA6B,CAAA,EAC9C,QAAA,kBAAA,GAAA,CAAC,gBAAA,EAAA,EAAiB,SAAA,EAAU,UAAA,EAAW,CAAA,EACzC;AAAA;AAAA,GAEJ;AAEJ","file":"chunk-YC5VVIZO.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * ResizablePanelGroup variant styles\n * Container for resizable panels with direction support\n */\nexport const resizablePanelGroupVariants = cva([\n  \"flex h-full w-full\",\n  \"data-[panel-group-direction=vertical]:flex-col\",\n])\n\n/**\n * ResizablePanel variant styles\n * Individual panel that can be resized\n */\nexport const resizablePanelVariants = cva([\n  // Base styles - intentionally minimal as panel content varies\n])\n\n/**\n * ResizableHandle variant styles\n * Draggable divider between panels\n */\nexport const resizableHandleVariants = cva(\n  [\n    \"bg-[color:var(--resizable-handle-bg)] relative flex items-center justify-center\",\n    \"focus-visible:ring-[color:var(--resizable-handle-ring)] focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden\",\n    // Horizontal (default) styles\n    \"w-[var(--resizable-handle-width-default)] after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2\",\n    // Vertical direction styles\n    \"data-[panel-group-direction=vertical]:h-[var(--resizable-handle-width-vertical)] data-[panel-group-direction=vertical]:w-full\",\n    \"data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1\",\n    \"data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0\",\n    \"data-[panel-group-direction=vertical]:after:-translate-y-1/2\",\n    // Rotate handle icon in vertical mode\n    \"[&[data-panel-group-direction=vertical]>div]:rotate-90\",\n  ],\n  {\n    variants: {\n      /**\n       * Visual variant of the handle\n       * - default: Visible border line\n       * - invisible: No visible line, just cursor change\n       * - highlighted: More prominent handle on hover\n       */\n      variant: {\n        default: \"\",\n        invisible: \"bg-transparent after:bg-transparent\",\n        highlighted: \"hover:bg-primary/20 transition-colors\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\n/**\n * ResizableHandle grip (visible handle indicator) styles\n */\nexport const resizableHandleGripVariants = cva([\n  \"bg-[color:var(--resizable-handle-grip-bg)] z-10 flex h-[var(--resizable-handle-grip-height)] w-[var(--resizable-handle-grip-width)] items-center justify-center rounded-[var(--resizable-handle-grip-radius)] border\",\n])\n\nexport type ResizablePanelGroupVariantProps = VariantProps<typeof resizablePanelGroupVariants>\nexport type ResizablePanelVariantProps = VariantProps<typeof resizablePanelVariants>\nexport type ResizableHandleVariantProps = VariantProps<typeof resizableHandleVariants>\n","\"use client\"\n\nimport type {\n  ResizableHandleProps,\n  ResizablePanelGroupProps,\n  ResizablePanelProps,\n} from \"./ResizablePanels.types\"\n\nimport { GripVerticalIcon } from \"lucide-react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  resizableHandleGripVariants,\n  resizableHandleVariants,\n  resizablePanelGroupVariants,\n  resizablePanelVariants,\n} from \"./ResizablePanels.variants\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePanelGroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      className={cn(resizablePanelGroupVariants(), className)}\n      data-slot=\"resizable-panel-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ className, ...props }: ResizablePanelProps) {\n  return (\n    <ResizablePrimitive.Panel\n      className={cn(resizablePanelVariants(), className)}\n      data-slot=\"resizable-panel\"\n      {...props}\n    />\n  )\n}\n\nfunction ResizableHandle({\n  withHandle,\n  variant,\n  className,\n  ...props\n}: ResizableHandleProps) {\n  return (\n    <ResizablePrimitive.Separator\n      className={cn(resizableHandleVariants({ variant }), className)}\n      data-slot=\"resizable-handle\"\n      {...props}\n    >\n      {withHandle && (\n        <div className={cn(resizableHandleGripVariants())}>\n          <GripVerticalIcon className=\"size-2.5\" />\n        </div>\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n"]}

package/dist/chunk-YMCKML6D.js

@@ -0,0 +1,539 @@
+import { Toggle } from './chunk-2XNMKALT.js';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from './chunk-OCH7GGZF.js';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from './chunk-TIPKU427.js';
+import { Divider } from './chunk-LCBB3N5H.js';
+import { cn } from './chunk-RVAYDRMA.js';
+import { BoldIcon, ItalicIcon, StrikethroughIcon, CodeIcon, Heading1Icon, Heading2Icon, Heading3Icon, ListIcon, ListOrderedIcon, ListTodoIcon, QuoteIcon, LinkIcon, ImageIcon, HelpCircleIcon } from 'lucide-react';
+import { marked } from 'marked';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var markdownEditorVariants = cva(
+  "bg-background text-foreground border rounded-md overflow-hidden",
+  {
+    variants: {
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      disabled: false
+    }
+  }
+);
+var markdownToolbarVariants = cva(
+  "bg-muted flex flex-wrap items-center gap-1 border-b p-1",
+  {
+    variants: {
+      position: {
+        top: "rounded-t-md",
+        bottom: "rounded-b-md border-t border-b-0"
+      }
+    },
+    defaultVariants: {
+      position: "top"
+    }
+  }
+);
+var markdownEditorAreaVariants = cva(
+  "font-mono text-sm resize-none bg-background p-4 focus:outline-none w-full",
+  {
+    variants: {
+      disabled: {
+        true: "cursor-not-allowed",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      disabled: false
+    }
+  }
+);
+var markdownPreviewVariants = cva(
+  "prose prose-sm dark:prose-invert max-w-none p-4 bg-muted/50 overflow-auto",
+  {
+    variants: {
+      mode: {
+        split: "flex-1",
+        tabs: "",
+        preview: ""
+      }
+    },
+    defaultVariants: {
+      mode: "tabs"
+    }
+  }
+);
+marked.setOptions({
+  breaks: true,
+  gfm: true
+});
+function MarkdownHelp({ open, onOpenChange }) {
+  const syntaxExamples = [
+    { syntax: "**bold**", description: "Bold text" },
+    { syntax: "*italic*", description: "Italic text" },
+    { syntax: "~~strikethrough~~", description: "Strikethrough" },
+    { syntax: "# Heading 1", description: "Large heading" },
+    { syntax: "## Heading 2", description: "Medium heading" },
+    { syntax: "### Heading 3", description: "Small heading" },
+    { syntax: "[link](url)", description: "Hyperlink" },
+    { syntax: "![alt](url)", description: "Image" },
+    { syntax: "> quote", description: "Blockquote" },
+    { syntax: "`code`", description: "Inline code" },
+    { syntax: "```code block```", description: "Code block" },
+    { syntax: "- item", description: "Unordered list" },
+    { syntax: "1. item", description: "Ordered list" },
+    { syntax: "- [ ] task", description: "Task list" }
+  ];
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Markdown Syntax" }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: "Quick reference for markdown formatting" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2 text-sm", children: syntaxExamples.map(({ syntax, description }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("code", { className: "bg-muted rounded px-1.5 py-0.5 font-mono text-xs", children: syntax }),
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: description })
+    ] }, syntax)) })
+  ] }) });
+}
+function MarkdownPreview({ content, className }) {
+  const html = React.useMemo(() => {
+    if (!content) return "";
+    return marked.parse(content);
+  }, [content]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(markdownPreviewVariants(), className),
+      dangerouslySetInnerHTML: { __html: html },
+      "data-slot": "markdown-preview"
+    }
+  );
+}
+function MarkdownToolbar({
+  className,
+  disabled = false,
+  editorRef,
+  showHelp = true,
+  onHelpClick
+}) {
+  const handleAction = React.useCallback(
+    (before, after) => {
+      if (disabled || !editorRef.current) return;
+      editorRef.current.wrapSelection(before, after);
+    },
+    [disabled, editorRef]
+  );
+  const handleInsert = React.useCallback(
+    (text) => {
+      if (disabled || !editorRef.current) return;
+      editorRef.current.insertText(text);
+    },
+    [disabled, editorRef]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": "Markdown formatting",
+      className: cn(markdownToolbarVariants(), className),
+      "data-slot": "markdown-toolbar",
+      role: "toolbar",
+      children: [
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Bold (Ctrl+B)",
+            disabled,
+            pressed: false,
+            size: "sm",
+            onPressedChange: () => {
+              handleAction("**", "**");
+            },
+            children: /* @__PURE__ */ jsx(BoldIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Italic (Ctrl+I)",
+            disabled,
+            pressed: false,
+            size: "sm",
+            onPressedChange: () => {
+              handleAction("*", "*");
+            },
+            children: /* @__PURE__ */ jsx(ItalicIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Strikethrough",
+            disabled,
+            pressed: false,
+            size: "sm",
+            onPressedChange: () => {
+              handleAction("~~", "~~");
+            },
+            children: /* @__PURE__ */ jsx(StrikethroughIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Inline code (Ctrl+E)",
+            disabled,
+            pressed: false,
+            size: "sm",
+            onPressedChange: () => {
+              handleAction("`", "`");
+            },
+            children: /* @__PURE__ */ jsx(CodeIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, { className: "mx-1 h-6", orientation: "vertical" }),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Heading 1",
+            disabled,
+            pressed: false,
+            size: "sm",
+            onPressedChange: () => {
+              handleInsert("# ");
+            },
+            children: /* @__PURE__ */ jsx(Heading1Icon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Heading 2",
+            disabled,
+            pressed: false,
+            size: "sm",
+            onPressedChange: () => {
+              handleInsert("## ");
+            },
+            children: /* @__PURE__ */ jsx(Heading2Icon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Heading 3",
+            disabled,
+            pressed: false,
+            size: "sm",
+            onPressedChange: () => {
+              handleInsert("### ");
+            },
+            children: /* @__PURE__ */ jsx(Heading3Icon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, { className: "mx-1 h-6", orientation: "vertical" }),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Bullet list",
+            disabled,
+            pressed: false,
+            size: "sm",
+            onPressedChange: () => {
+              handleInsert("- ");
+            },
+            children: /* @__PURE__ */ jsx(ListIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Numbered list",
+            disabled,
+            pressed: false,
+            size: "sm",
+            onPressedChange: () => {
+              handleInsert("1. ");
+            },
+            children: /* @__PURE__ */ jsx(ListOrderedIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Task list",
+            disabled,
+            pressed: false,
+            size: "sm",
+            onPressedChange: () => {
+              handleInsert("- [ ] ");
+            },
+            children: /* @__PURE__ */ jsx(ListTodoIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, { className: "mx-1 h-6", orientation: "vertical" }),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Quote",
+            disabled,
+            pressed: false,
+            size: "sm",
+            onPressedChange: () => {
+              handleInsert("> ");
+            },
+            children: /* @__PURE__ */ jsx(QuoteIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Link (Ctrl+K)",
+            disabled,
+            pressed: false,
+            size: "sm",
+            onPressedChange: () => {
+              handleAction("[", "](url)");
+            },
+            children: /* @__PURE__ */ jsx(LinkIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Image",
+            disabled,
+            pressed: false,
+            size: "sm",
+            onPressedChange: () => {
+              handleAction("![", "](url)");
+            },
+            children: /* @__PURE__ */ jsx(ImageIcon, { className: "size-4" })
+          }
+        ),
+        showHelp && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Divider, { className: "mx-1 h-6", orientation: "vertical" }),
+          /* @__PURE__ */ jsx(
+            Toggle,
+            {
+              "aria-label": "Markdown help",
+              disabled,
+              pressed: false,
+              size: "sm",
+              onPressedChange: onHelpClick,
+              children: /* @__PURE__ */ jsx(HelpCircleIcon, { className: "size-4" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function MarkdownEditor({
+  "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel = "Markdown editor",
+  allowImages: _allowImages = true,
+  className,
+  defaultValue = "",
+  disabled = false,
+  maxHeight,
+  minHeight = "200px",
+  mode = "tabs",
+  onBlur,
+  onChange,
+  onFocus,
+  onImageUpload: _onImageUpload,
+  placeholder = "Write markdown...",
+  readOnly = false,
+  ref,
+  showHelp = true,
+  showToolbar = true,
+  toolbar: _toolbar,
+  value
+}) {
+  const textareaRef = React.useRef(null);
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const [showHelpModal, setShowHelpModal] = React.useState(false);
+  const currentValue = value ?? internalValue;
+  const editorRef = React.useRef(null);
+  React.useImperativeHandle(
+    ref,
+    () => {
+      const methods = {
+        blur: () => textareaRef.current?.blur(),
+        focus: () => textareaRef.current?.focus(),
+        getSelection: () => {
+          const textarea = textareaRef.current;
+          if (!textarea) return { start: 0, end: 0, text: "" };
+          return {
+            end: textarea.selectionEnd,
+            start: textarea.selectionStart,
+            text: textarea.value.substring(
+              textarea.selectionStart,
+              textarea.selectionEnd
+            )
+          };
+        },
+        getValue: () => textareaRef.current?.value ?? "",
+        insertText: (text) => {
+          const textarea = textareaRef.current;
+          if (!textarea) return;
+          const start = textarea.selectionStart;
+          const end = textarea.selectionEnd;
+          const newValue = currentValue.slice(0, start) + text + currentValue.slice(end);
+          if (value === void 0) {
+            setInternalValue(newValue);
+          }
+          onChange?.(newValue);
+          requestAnimationFrame(() => {
+            textarea.selectionStart = start + text.length;
+            textarea.selectionEnd = start + text.length;
+            textarea.focus();
+          });
+        },
+        setValue: (newValue) => {
+          if (value === void 0) {
+            setInternalValue(newValue);
+          }
+          onChange?.(newValue);
+        },
+        wrapSelection: (before, after) => {
+          const textarea = textareaRef.current;
+          if (!textarea) return;
+          const start = textarea.selectionStart;
+          const end = textarea.selectionEnd;
+          const selectedText = currentValue.substring(start, end);
+          const newText = before + selectedText + after;
+          const newValue = currentValue.slice(0, start) + newText + currentValue.slice(end);
+          if (value === void 0) {
+            setInternalValue(newValue);
+          }
+          onChange?.(newValue);
+          requestAnimationFrame(() => {
+            textarea.selectionStart = start + before.length;
+            textarea.selectionEnd = start + before.length + selectedText.length;
+            textarea.focus();
+          });
+        }
+      };
+      editorRef.current = methods;
+      return methods;
+    },
+    [currentValue, onChange, value]
+  );
+  const handleChange = React.useCallback(
+    (e) => {
+      const newValue = e.target.value;
+      if (value === void 0) {
+        setInternalValue(newValue);
+      }
+      onChange?.(newValue);
+    },
+    [onChange, value]
+  );
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      if (disabled || readOnly) return;
+      const isMod = e.metaKey || e.ctrlKey;
+      if (isMod && e.key === "b") {
+        e.preventDefault();
+        editorRef.current?.wrapSelection("**", "**");
+      } else if (isMod && e.key === "i") {
+        e.preventDefault();
+        editorRef.current?.wrapSelection("*", "*");
+      } else if (isMod && e.key === "k") {
+        e.preventDefault();
+        editorRef.current?.wrapSelection("[", "](url)");
+      } else if (isMod && e.key === "e") {
+        e.preventDefault();
+        editorRef.current?.wrapSelection("`", "`");
+      }
+    },
+    [disabled, readOnly]
+  );
+  const isDisabled = disabled || readOnly;
+  const editorStyle = {
+    maxHeight,
+    minHeight
+  };
+  const renderEditor = () => /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref: textareaRef,
+      "aria-describedby": ariaDescribedBy,
+      "aria-label": ariaLabel,
+      "aria-multiline": "true",
+      className: cn(markdownEditorAreaVariants({ disabled: isDisabled })),
+      disabled,
+      placeholder,
+      readOnly,
+      role: "textbox",
+      style: editorStyle,
+      value: currentValue,
+      onBlur,
+      onChange: handleChange,
+      onFocus,
+      onKeyDown: handleKeyDown
+    }
+  );
+  const renderPreview = () => /* @__PURE__ */ jsx(
+    MarkdownPreview,
+    {
+      className: mode === "split" ? "flex-1" : void 0,
+      content: currentValue
+    }
+  );
+  const renderContent = () => {
+    switch (mode) {
+      case "editor":
+        return renderEditor();
+      case "preview":
+        return renderPreview();
+      case "split":
+        return /* @__PURE__ */ jsxs("div", { className: "flex flex-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto border-r", style: editorStyle, children: renderEditor() }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", style: editorStyle, children: renderPreview() })
+        ] });
+      case "tabs":
+      default:
+        return /* @__PURE__ */ jsxs(Tabs, { className: "flex-1", defaultValue: "editor", children: [
+          /* @__PURE__ */ jsxs(TabsList, { className: "mx-2 mt-2", children: [
+            /* @__PURE__ */ jsx(TabsTrigger, { value: "editor", children: "Editor" }),
+            /* @__PURE__ */ jsx(TabsTrigger, { value: "preview", children: "Preview" })
+          ] }),
+          /* @__PURE__ */ jsx(TabsContent, { className: "mt-0", value: "editor", children: renderEditor() }),
+          /* @__PURE__ */ jsx(TabsContent, { className: "mt-0", value: "preview", children: renderPreview() })
+        ] });
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(markdownEditorVariants({ disabled }), className),
+        "data-slot": "markdown-editor",
+        children: [
+          showToolbar && mode !== "preview" && /* @__PURE__ */ jsx(
+            MarkdownToolbar,
+            {
+              disabled: isDisabled,
+              editorRef,
+              showHelp,
+              onHelpClick: () => {
+                setShowHelpModal(true);
+              }
+            }
+          ),
+          renderContent()
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(MarkdownHelp, { open: showHelpModal, onOpenChange: setShowHelpModal })
+  ] });
+}
+
+export { MarkdownEditor, MarkdownHelp, MarkdownPreview, MarkdownToolbar };
+//# sourceMappingURL=chunk-YMCKML6D.js.map
+//# sourceMappingURL=chunk-YMCKML6D.js.map