@intlayer/design-system 9.0.0-canary.9 → 9.0.0

package/dist/esm/components/MarkdownEditor/novel/extensions/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../../src/components/MarkdownEditor/novel/extensions/index.ts"],"sourcesContent":["import { InputRule } from '@tiptap/core';\nimport CharacterCount from '@tiptap/extension-character-count';\nimport { Color } from '@tiptap/extension-color';\nimport Highlight from '@tiptap/extension-highlight';\nimport HorizontalRule from '@tiptap/extension-horizontal-rule';\nimport TiptapImage from '@tiptap/extension-image';\nimport TiptapLink from '@tiptap/extension-link';\nimport Placeholder from '@tiptap/extension-placeholder';\nimport { TaskItem } from '@tiptap/extension-task-item';\nimport { TaskList } from '@tiptap/extension-task-list';\nimport { TextStyle } from '@tiptap/extension-text-style';\nimport TiptapUnderline from '@tiptap/extension-underline';\nimport Youtube from '@tiptap/extension-youtube';\nimport StarterKit from '@tiptap/starter-kit';\nimport GlobalDragHandle from 'tiptap-extension-global-drag-handle';\nimport { Markdown } from 'tiptap-markdown';\nimport CustomKeymap from './custom-keymap';\nimport { ImageResizer } from './image-resizer';\nimport UpdatedImage from './updated-image';\n\nconst PlaceholderExtension = Placeholder.configure({\n  placeholder: ({ node }) => {\n    if (node.type.name === 'heading') {\n      return `Heading ${node.attrs.level}`;\n    }\n    return \"Press '/' for commands\";\n  },\n  includeChildren: true,\n});\n\nconst HighlightExtension = Highlight.configure({\n  multicolor: true,\n});\n\nconst MarkdownExtension = Markdown.configure({\n  html: false,\n  transformCopiedText: true,\n});\n\nconst Horizontal = HorizontalRule.extend({\n  addInputRules() {\n    return [\n      new InputRule({\n        find: /^(?:---|—-|___\\s|\\*\\*\\*\\s)$/u,\n        handler: ({ state, range }) => {\n          const attributes = {};\n\n          const { tr } = state;\n          const start = range.from;\n          const end = range.to;\n\n          tr.insert(start - 1, this.type.create(attributes)).delete(\n            tr.mapping.map(start),\n            tr.mapping.map(end)\n          );\n        },\n      }),\n    ];\n  },\n});\n\nexport * from './ai-highlight';\nexport * from './slash-command';\nexport {\n  CharacterCount,\n  Color,\n  CustomKeymap,\n  GlobalDragHandle,\n  HighlightExtension,\n  Horizontal as HorizontalRule,\n  ImageResizer,\n  InputRule,\n  MarkdownExtension,\n  PlaceholderExtension as Placeholder,\n  StarterKit,\n  TaskItem,\n  TaskList,\n  TextStyle,\n  TiptapImage,\n  TiptapLink,\n  TiptapUnderline,\n  UpdatedImage,\n  Youtube,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,uBAAuB,YAAY,UAAU;CACjD,cAAc,EAAE,WAAW;AACzB,MAAI,KAAK,KAAK,SAAS,UACrB,QAAO,WAAW,KAAK,MAAM;AAE/B,SAAO;;CAET,iBAAiB;CAClB,CAAC;AAEF,MAAM,qBAAqB,UAAU,UAAU,EAC7C,YAAY,MACb,CAAC;AAEF,MAAM,oBAAoB,SAAS,UAAU;CAC3C,MAAM;CACN,qBAAqB;CACtB,CAAC;AAEF,MAAM,aAAa,eAAe,OAAO,EACvC,gBAAgB;AACd,QAAO,CACL,IAAI,UAAU;EACZ,MAAM;EACN,UAAU,EAAE,OAAO,YAAY;GAC7B,MAAM,aAAa,EAAE;GAErB,MAAM,EAAE,OAAO;GACf,MAAM,QAAQ,MAAM;GACpB,MAAM,MAAM,MAAM;AAElB,MAAG,OAAO,QAAQ,GAAG,KAAK,KAAK,OAAO,WAAW,CAAC,CAAC,OACjD,GAAG,QAAQ,IAAI,MAAM,EACrB,GAAG,QAAQ,IAAI,IAAI,CACpB;;EAEJ,CAAC,CACH;GAEJ,CAAC"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../../src/components/MarkdownEditor/novel/extensions/index.ts"],"sourcesContent":["import { InputRule } from '@tiptap/core';\nimport CharacterCount from '@tiptap/extension-character-count';\nimport { Color } from '@tiptap/extension-color';\nimport Highlight from '@tiptap/extension-highlight';\nimport HorizontalRule from '@tiptap/extension-horizontal-rule';\nimport TiptapImage from '@tiptap/extension-image';\nimport TiptapLink from '@tiptap/extension-link';\nimport Placeholder from '@tiptap/extension-placeholder';\nimport { TaskItem } from '@tiptap/extension-task-item';\nimport { TaskList } from '@tiptap/extension-task-list';\nimport { TextStyle } from '@tiptap/extension-text-style';\nimport TiptapUnderline from '@tiptap/extension-underline';\nimport Youtube from '@tiptap/extension-youtube';\nimport StarterKit from '@tiptap/starter-kit';\nimport GlobalDragHandle from 'tiptap-extension-global-drag-handle';\nimport { Markdown } from 'tiptap-markdown';\nimport CustomKeymap from './custom-keymap';\nimport { ImageResizer } from './image-resizer';\nimport UpdatedImage from './updated-image';\n\nconst PlaceholderExtension = Placeholder.configure({\n  placeholder: ({ node }) => {\n    if (node.type.name === 'heading') {\n      return `Heading ${node.attrs.level}`;\n    }\n    return \"Press '/' for commands\";\n  },\n  includeChildren: true,\n});\n\nconst HighlightExtension = Highlight.configure({\n  multicolor: true,\n});\n\nconst MarkdownExtension = Markdown.configure({\n  html: false,\n  transformCopiedText: true,\n});\n\nconst Horizontal = HorizontalRule.extend({\n  addInputRules() {\n    return [\n      new InputRule({\n        find: /^(?:---|—-|___\\s|\\*\\*\\*\\s)$/u,\n        handler: ({ state, range }) => {\n          const attributes = {};\n\n          const { tr } = state;\n          const start = range.from;\n          const end = range.to;\n\n          tr.insert(start - 1, this.type.create(attributes)).delete(\n            tr.mapping.map(start),\n            tr.mapping.map(end)\n          );\n        },\n      }),\n    ];\n  },\n});\n\nexport * from './ai-highlight';\nexport * from './slash-command';\nexport {\n  CharacterCount,\n  Color,\n  CustomKeymap,\n  GlobalDragHandle,\n  HighlightExtension,\n  Horizontal as HorizontalRule,\n  ImageResizer,\n  InputRule,\n  MarkdownExtension,\n  PlaceholderExtension as Placeholder,\n  StarterKit,\n  TaskItem,\n  TaskList,\n  TextStyle,\n  TiptapImage,\n  TiptapLink,\n  TiptapUnderline,\n  UpdatedImage,\n  Youtube,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,uBAAuB,YAAY,UAAU;CACjD,cAAc,EAAE,WAAW;EACzB,IAAI,KAAK,KAAK,SAAS,WACrB,OAAO,WAAW,KAAK,MAAM;EAE/B,OAAO;CACT;CACA,iBAAiB;AACnB,CAAC;AAED,MAAM,qBAAqB,UAAU,UAAU,EAC7C,YAAY,KACd,CAAC;AAED,MAAM,oBAAoB,SAAS,UAAU;CAC3C,MAAM;CACN,qBAAqB;AACvB,CAAC;AAED,MAAM,aAAa,eAAe,OAAO,EACvC,gBAAgB;CACd,OAAO,CACL,IAAI,UAAU;EACZ,MAAM;EACN,UAAU,EAAE,OAAO,YAAY;GAC7B,MAAM,aAAa,CAAC;GAEpB,MAAM,EAAE,OAAO;GACf,MAAM,QAAQ,MAAM;GACpB,MAAM,MAAM,MAAM;GAElB,GAAG,OAAO,QAAQ,GAAG,KAAK,KAAK,OAAO,UAAU,CAAC,CAAC,CAAC,OACjD,GAAG,QAAQ,IAAI,KAAK,GACpB,GAAG,QAAQ,IAAI,GAAG,CACpB;EACF;CACF,CAAC,CACH;AACF,EACF,CAAC"}

package/dist/esm/components/MarkdownEditor/novel/extensions/slash-command.mjs

@@ -2,7 +2,6 @@ import { EditorCommandOut } from "../components/editor-command.mjs";
 import { ReactRenderer } from "@tiptap/react";
 import { Extension } from "@tiptap/core";
 import Suggestion from "@tiptap/suggestion";
-import tippy from "tippy.js";
 
 //#region src/components/MarkdownEditor/novel/extensions/slash-command.tsx
 const Command = Extension.create({
@@ -25,6 +24,51 @@ const Command = Extension.create({
 		})];
 	}
 });
+/**
+* Minimal floating popup anchored to the caret. Replaces the tippy.js
+* dependency: the popup is a fixed-position element appended to the given
+* container, placed below the reference rect (flipped above when it would
+* overflow the viewport) and repositioned on scroll/resize.
+*/
+const createSuggestionPopup = (content, getReferenceClientRect, container) => {
+	let getRect = getReferenceClientRect;
+	const element = document.createElement("div");
+	element.style.position = "fixed";
+	element.style.top = "0";
+	element.style.left = "0";
+	element.style.zIndex = "50";
+	element.style.maxWidth = "90vw";
+	element.appendChild(content);
+	container.appendChild(element);
+	const reposition = () => {
+		const referenceRect = getRect?.();
+		if (!referenceRect) return;
+		const viewportPadding = 8;
+		const { offsetWidth, offsetHeight } = element;
+		const top = referenceRect.bottom + offsetHeight > window.innerHeight - viewportPadding ? referenceRect.top - offsetHeight : referenceRect.bottom;
+		const left = Math.min(referenceRect.left, window.innerWidth - offsetWidth - viewportPadding);
+		element.style.top = `${Math.max(top, viewportPadding)}px`;
+		element.style.left = `${Math.max(left, viewportPadding)}px`;
+	};
+	reposition();
+	requestAnimationFrame(reposition);
+	window.addEventListener("resize", reposition);
+	window.addEventListener("scroll", reposition, true);
+	return {
+		setReferenceClientRect: (nextGetReferenceClientRect) => {
+			getRect = nextGetReferenceClientRect;
+			reposition();
+		},
+		hide: () => {
+			element.style.display = "none";
+		},
+		destroy: () => {
+			window.removeEventListener("resize", reposition);
+			window.removeEventListener("scroll", reposition, true);
+			element.remove();
+		}
+	};
+};
 const renderItems = (elementRef) => {
 	let component = null;
 	let popup = null;
@@ -36,29 +80,21 @@ const renderItems = (elementRef) => {
 			});
 			const { selection } = props.editor.state;
 			if (selection.$from.node(selection.$from.depth).type.name === "codeBlock") return false;
-			popup = tippy("body", {
-				getReferenceClientRect: props.clientRect,
-				appendTo: () => elementRef ? elementRef.current : document.body,
-				content: component.element,
-				showOnCreate: true,
-				interactive: true,
-				trigger: "manual",
-				placement: "bottom-start"
-			});
+			popup = createSuggestionPopup(component.element, props.clientRect, elementRef?.current ?? document.body);
 		},
 		onUpdate: (props) => {
 			component?.updateProps(props);
-			popup?.[0]?.setProps({ getReferenceClientRect: props.clientRect });
+			popup?.setReferenceClientRect(props.clientRect);
 		},
 		onKeyDown: (props) => {
 			if (props.event.key === "Escape") {
-				popup?.[0]?.hide();
+				popup?.hide();
 				return true;
 			}
 			return component?.ref?.onKeyDown(props);
 		},
 		onExit: () => {
-			popup?.[0]?.destroy();
+			popup?.destroy();
 			component?.destroy();
 		}
 	};

package/dist/esm/components/MarkdownEditor/novel/extensions/slash-command.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"slash-command.mjs","names":[],"sources":["../../../../../../src/components/MarkdownEditor/novel/extensions/slash-command.tsx"],"sourcesContent":["import type { Editor, Range } from '@tiptap/core';\nimport { Extension } from '@tiptap/core';\nimport { ReactRenderer } from '@tiptap/react';\nimport Suggestion, { type SuggestionOptions } from '@tiptap/suggestion';\nimport type { ReactNode, RefObject } from 'react';\nimport tippy, {\n  type GetReferenceClientRect,\n  type Instance,\n  type Props,\n} from 'tippy.js';\nimport { EditorCommandOut } from '../components/editor-command';\n\nconst Command = Extension.create({\n  name: 'slash-command',\n  addOptions() {\n    return {\n      suggestion: {\n        char: '/',\n        command: ({ editor, range, props }) => {\n          props.command({ editor, range });\n        },\n      } as SuggestionOptions,\n    };\n  },\n  addProseMirrorPlugins() {\n    return [\n      Suggestion({\n        editor: this.editor,\n        ...this.options.suggestion,\n      }),\n    ];\n  },\n});\n\nconst renderItems = (elementRef?: RefObject<Element> | null) => {\n  let component: ReactRenderer | null = null;\n  let popup: Instance<Props>[] | null = null;\n\n  return {\n    onStart: (props: { editor: Editor; clientRect: DOMRect }) => {\n      component = new ReactRenderer(EditorCommandOut, {\n        props,\n        editor: props.editor,\n      });\n\n      const { selection } = props.editor.state;\n\n      const parentNode = selection.$from.node(selection.$from.depth);\n      const blockType = parentNode.type.name;\n\n      if (blockType === 'codeBlock') {\n        return false;\n      }\n\n      // @ts-ignore\n      popup = tippy('body', {\n        getReferenceClientRect: props.clientRect,\n        appendTo: () => (elementRef ? elementRef.current : document.body),\n        content: component.element,\n        showOnCreate: true,\n        interactive: true,\n        trigger: 'manual',\n        placement: 'bottom-start',\n      });\n    },\n    onUpdate: (props: {\n      editor: Editor;\n      clientRect: GetReferenceClientRect;\n    }) => {\n      component?.updateProps(props);\n\n      popup?.[0]?.setProps({\n        getReferenceClientRect: props.clientRect,\n      });\n    },\n\n    onKeyDown: (props: { event: KeyboardEvent }) => {\n      if (props.event.key === 'Escape') {\n        popup?.[0]?.hide();\n\n        return true;\n      }\n\n      // @ts-ignore\n      return component?.ref?.onKeyDown(props);\n    },\n    onExit: () => {\n      popup?.[0]?.destroy();\n      component?.destroy();\n    },\n  };\n};\n\nexport interface SuggestionItem {\n  title: string;\n  description: string;\n  icon: ReactNode;\n  searchTerms?: string[];\n  command?: (props: { editor: Editor; range: Range }) => void;\n}\n\nexport const createSuggestionItems = (items: SuggestionItem[]) => items;\n\nexport const handleCommandNavigation = (event: KeyboardEvent) => {\n  if (['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key)) {\n    const slashCommand = document.querySelector('#slash-command');\n    if (slashCommand) {\n      return true;\n    }\n  }\n};\n\nexport { Command, renderItems };\n"],"mappings":";;;;;;;AAYA,MAAM,UAAU,UAAU,OAAO;CAC/B,MAAM;CACN,aAAa;AACX,SAAO,EACL,YAAY;GACV,MAAM;GACN,UAAU,EAAE,QAAQ,OAAO,YAAY;AACrC,UAAM,QAAQ;KAAE;KAAQ;KAAO,CAAC;;GAEnC,EACF;;CAEH,wBAAwB;AACtB,SAAO,CACL,WAAW;GACT,QAAQ,KAAK;GACb,GAAG,KAAK,QAAQ;GACjB,CAAC,CACH;;CAEJ,CAAC;AAEF,MAAM,eAAe,eAA2C;CAC9D,IAAI,YAAkC;CACtC,IAAI,QAAkC;AAEtC,QAAO;EACL,UAAU,UAAmD;AAC3D,eAAY,IAAI,cAAc,kBAAkB;IAC9C;IACA,QAAQ,MAAM;IACf,CAAC;GAEF,MAAM,EAAE,cAAc,MAAM,OAAO;AAKnC,OAHmB,UAAU,MAAM,KAAK,UAAU,MAAM,MAC5B,CAAC,KAAK,SAEhB,YAChB,QAAO;AAIT,WAAQ,MAAM,QAAQ;IACpB,wBAAwB,MAAM;IAC9B,gBAAiB,aAAa,WAAW,UAAU,SAAS;IAC5D,SAAS,UAAU;IACnB,cAAc;IACd,aAAa;IACb,SAAS;IACT,WAAW;IACZ,CAAC;;EAEJ,WAAW,UAGL;AACJ,cAAW,YAAY,MAAM;AAE7B,WAAQ,IAAI,SAAS,EACnB,wBAAwB,MAAM,YAC/B,CAAC;;EAGJ,YAAY,UAAoC;AAC9C,OAAI,MAAM,MAAM,QAAQ,UAAU;AAChC,YAAQ,IAAI,MAAM;AAElB,WAAO;;AAIT,UAAO,WAAW,KAAK,UAAU,MAAM;;EAEzC,cAAc;AACZ,WAAQ,IAAI,SAAS;AACrB,cAAW,SAAS;;EAEvB;;AAWH,MAAa,yBAAyB,UAA4B;AAElE,MAAa,2BAA2B,UAAyB;AAC/D,KAAI;EAAC;EAAW;EAAa;EAAQ,CAAC,SAAS,MAAM,IAAI,EAEvD;MADqB,SAAS,cAAc,iBAC5B,CACd,QAAO"}
+{"version":3,"file":"slash-command.mjs","names":[],"sources":["../../../../../../src/components/MarkdownEditor/novel/extensions/slash-command.tsx"],"sourcesContent":["import type { Editor, Range } from '@tiptap/core';\nimport { Extension } from '@tiptap/core';\nimport { ReactRenderer } from '@tiptap/react';\nimport Suggestion, { type SuggestionOptions } from '@tiptap/suggestion';\nimport type { ReactNode, RefObject } from 'react';\nimport { EditorCommandOut } from '../components/editor-command';\n\nconst Command = Extension.create({\n  name: 'slash-command',\n  addOptions() {\n    return {\n      suggestion: {\n        char: '/',\n        command: ({ editor, range, props }) => {\n          props.command({ editor, range });\n        },\n      } as SuggestionOptions,\n    };\n  },\n  addProseMirrorPlugins() {\n    return [\n      Suggestion({\n        editor: this.editor,\n        ...this.options.suggestion,\n      }),\n    ];\n  },\n});\n\ntype ClientRectGetter = (() => DOMRect | null) | null | undefined;\n\ntype SuggestionPopup = {\n  setReferenceClientRect: (getReferenceClientRect: ClientRectGetter) => void;\n  hide: () => void;\n  destroy: () => void;\n};\n\n/**\n * Minimal floating popup anchored to the caret. Replaces the tippy.js\n * dependency: the popup is a fixed-position element appended to the given\n * container, placed below the reference rect (flipped above when it would\n * overflow the viewport) and repositioned on scroll/resize.\n */\nconst createSuggestionPopup = (\n  content: HTMLElement,\n  getReferenceClientRect: ClientRectGetter,\n  container: HTMLElement\n): SuggestionPopup => {\n  let getRect = getReferenceClientRect;\n\n  const element = document.createElement('div');\n  element.style.position = 'fixed';\n  element.style.top = '0';\n  element.style.left = '0';\n  element.style.zIndex = '50';\n  element.style.maxWidth = '90vw';\n  element.appendChild(content);\n  container.appendChild(element);\n\n  const reposition = () => {\n    const referenceRect = getRect?.();\n    if (!referenceRect) return;\n\n    const viewportPadding = 8;\n    const { offsetWidth, offsetHeight } = element;\n\n    const overflowsBottom =\n      referenceRect.bottom + offsetHeight >\n      window.innerHeight - viewportPadding;\n    const top = overflowsBottom\n      ? referenceRect.top - offsetHeight\n      : referenceRect.bottom;\n    const left = Math.min(\n      referenceRect.left,\n      window.innerWidth - offsetWidth - viewportPadding\n    );\n\n    element.style.top = `${Math.max(top, viewportPadding)}px`;\n    element.style.left = `${Math.max(left, viewportPadding)}px`;\n  };\n\n  // The React content renders asynchronously; measure again on the next frame\n  // so the initial placement uses the real popup size.\n  reposition();\n  requestAnimationFrame(reposition);\n  window.addEventListener('resize', reposition);\n  window.addEventListener('scroll', reposition, true);\n\n  return {\n    setReferenceClientRect: (nextGetReferenceClientRect) => {\n      getRect = nextGetReferenceClientRect;\n      reposition();\n    },\n    hide: () => {\n      element.style.display = 'none';\n    },\n    destroy: () => {\n      window.removeEventListener('resize', reposition);\n      window.removeEventListener('scroll', reposition, true);\n      element.remove();\n    },\n  };\n};\n\nconst renderItems = (elementRef?: RefObject<HTMLElement> | null) => {\n  let component: ReactRenderer | null = null;\n  let popup: SuggestionPopup | null = null;\n\n  return {\n    onStart: (props: { editor: Editor; clientRect: ClientRectGetter }) => {\n      component = new ReactRenderer(EditorCommandOut, {\n        props,\n        editor: props.editor,\n      });\n\n      const { selection } = props.editor.state;\n\n      const parentNode = selection.$from.node(selection.$from.depth);\n      const blockType = parentNode.type.name;\n\n      if (blockType === 'codeBlock') {\n        return false;\n      }\n\n      popup = createSuggestionPopup(\n        component.element as HTMLElement,\n        props.clientRect,\n        elementRef?.current ?? document.body\n      );\n    },\n    onUpdate: (props: { editor: Editor; clientRect: ClientRectGetter }) => {\n      component?.updateProps(props);\n\n      popup?.setReferenceClientRect(props.clientRect);\n    },\n\n    onKeyDown: (props: { event: KeyboardEvent }) => {\n      if (props.event.key === 'Escape') {\n        popup?.hide();\n\n        return true;\n      }\n\n      // @ts-ignore\n      return component?.ref?.onKeyDown(props);\n    },\n    onExit: () => {\n      popup?.destroy();\n      component?.destroy();\n    },\n  };\n};\n\nexport interface SuggestionItem {\n  title: string;\n  description: string;\n  icon: ReactNode;\n  searchTerms?: string[];\n  command?: (props: { editor: Editor; range: Range }) => void;\n}\n\nexport const createSuggestionItems = (items: SuggestionItem[]) => items;\n\nexport const handleCommandNavigation = (event: KeyboardEvent) => {\n  if (['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key)) {\n    const slashCommand = document.querySelector('#slash-command');\n    if (slashCommand) {\n      return true;\n    }\n  }\n};\n\nexport { Command, renderItems };\n"],"mappings":";;;;;;AAOA,MAAM,UAAU,UAAU,OAAO;CAC/B,MAAM;CACN,aAAa;EACX,OAAO,EACL,YAAY;GACV,MAAM;GACN,UAAU,EAAE,QAAQ,OAAO,YAAY;IACrC,MAAM,QAAQ;KAAE;KAAQ;IAAM,CAAC;GACjC;EACF,EACF;CACF;CACA,wBAAwB;EACtB,OAAO,CACL,WAAW;GACT,QAAQ,KAAK;GACb,GAAG,KAAK,QAAQ;EAClB,CAAC,CACH;CACF;AACF,CAAC;;;;;;;AAgBD,MAAM,yBACJ,SACA,wBACA,cACoB;CACpB,IAAI,UAAU;CAEd,MAAM,UAAU,SAAS,cAAc,KAAK;CAC5C,QAAQ,MAAM,WAAW;CACzB,QAAQ,MAAM,MAAM;CACpB,QAAQ,MAAM,OAAO;CACrB,QAAQ,MAAM,SAAS;CACvB,QAAQ,MAAM,WAAW;CACzB,QAAQ,YAAY,OAAO;CAC3B,UAAU,YAAY,OAAO;CAE7B,MAAM,mBAAmB;EACvB,MAAM,gBAAgB,UAAU;EAChC,IAAI,CAAC,eAAe;EAEpB,MAAM,kBAAkB;EACxB,MAAM,EAAE,aAAa,iBAAiB;EAKtC,MAAM,MAFJ,cAAc,SAAS,eACvB,OAAO,cAAc,kBAEnB,cAAc,MAAM,eACpB,cAAc;EAClB,MAAM,OAAO,KAAK,IAChB,cAAc,MACd,OAAO,aAAa,cAAc,eACpC;EAEA,QAAQ,MAAM,MAAM,GAAG,KAAK,IAAI,KAAK,eAAe,EAAE;EACtD,QAAQ,MAAM,OAAO,GAAG,KAAK,IAAI,MAAM,eAAe,EAAE;CAC1D;CAIA,WAAW;CACX,sBAAsB,UAAU;CAChC,OAAO,iBAAiB,UAAU,UAAU;CAC5C,OAAO,iBAAiB,UAAU,YAAY,IAAI;CAElD,OAAO;EACL,yBAAyB,+BAA+B;GACtD,UAAU;GACV,WAAW;EACb;EACA,YAAY;GACV,QAAQ,MAAM,UAAU;EAC1B;EACA,eAAe;GACb,OAAO,oBAAoB,UAAU,UAAU;GAC/C,OAAO,oBAAoB,UAAU,YAAY,IAAI;GACrD,QAAQ,OAAO;EACjB;CACF;AACF;AAEA,MAAM,eAAe,eAA+C;CAClE,IAAI,YAAkC;CACtC,IAAI,QAAgC;CAEpC,OAAO;EACL,UAAU,UAA4D;GACpE,YAAY,IAAI,cAAc,kBAAkB;IAC9C;IACA,QAAQ,MAAM;GAChB,CAAC;GAED,MAAM,EAAE,cAAc,MAAM,OAAO;GAKnC,IAHmB,UAAU,MAAM,KAAK,UAAU,MAAM,KAC7B,CAAC,CAAC,KAAK,SAEhB,aAChB,OAAO;GAGT,QAAQ,sBACN,UAAU,SACV,MAAM,YACN,YAAY,WAAW,SAAS,IAClC;EACF;EACA,WAAW,UAA4D;GACrE,WAAW,YAAY,KAAK;GAE5B,OAAO,uBAAuB,MAAM,UAAU;EAChD;EAEA,YAAY,UAAoC;GAC9C,IAAI,MAAM,MAAM,QAAQ,UAAU;IAChC,OAAO,KAAK;IAEZ,OAAO;GACT;GAGA,OAAO,WAAW,KAAK,UAAU,KAAK;EACxC;EACA,cAAc;GACZ,OAAO,QAAQ;GACf,WAAW,QAAQ;EACrB;CACF;AACF;AAUA,MAAa,yBAAyB,UAA4B;AAElE,MAAa,2BAA2B,UAAyB;CAC/D,IAAI;EAAC;EAAW;EAAa;CAAO,CAAC,CAAC,SAAS,MAAM,GAAG,GAEtD;MADqB,SAAS,cAAc,gBAC7B,GACb,OAAO;CACT;AAEJ"}

package/dist/esm/components/MarkdownEditor/novel/extensions/updated-image.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"updated-image.mjs","names":[],"sources":["../../../../../../src/components/MarkdownEditor/novel/extensions/updated-image.ts"],"sourcesContent":["import Image from '@tiptap/extension-image';\n\nconst UpdatedImage = Image.extend({\n  name: 'image',\n  addAttributes() {\n    return {\n      ...this.parent?.(),\n      width: {\n        default: null,\n      },\n      height: {\n        default: null,\n      },\n    };\n  },\n});\n\nexport default UpdatedImage;\n"],"mappings":";;;AAEA,MAAM,eAAe,MAAM,OAAO;CAChC,MAAM;CACN,gBAAgB;AACd,SAAO;GACL,GAAG,KAAK,UAAU;GAClB,OAAO,EACL,SAAS,MACV;GACD,QAAQ,EACN,SAAS,MACV;GACF;;CAEJ,CAAC"}
+{"version":3,"file":"updated-image.mjs","names":[],"sources":["../../../../../../src/components/MarkdownEditor/novel/extensions/updated-image.ts"],"sourcesContent":["import Image from '@tiptap/extension-image';\n\nconst UpdatedImage = Image.extend({\n  name: 'image',\n  addAttributes() {\n    return {\n      ...this.parent?.(),\n      width: {\n        default: null,\n      },\n      height: {\n        default: null,\n      },\n    };\n  },\n});\n\nexport default UpdatedImage;\n"],"mappings":";;;AAEA,MAAM,eAAe,MAAM,OAAO;CAChC,MAAM;CACN,gBAAgB;EACd,OAAO;GACL,GAAG,KAAK,SAAS;GACjB,OAAO,EACL,SAAS,KACX;GACA,QAAQ,EACN,SAAS,KACX;EACF;CACF;AACF,CAAC"}

package/dist/esm/components/MarkdownEditor/novel/plugins/upload-images.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"upload-images.mjs","names":[],"sources":["../../../../../../src/components/MarkdownEditor/novel/plugins/upload-images.tsx"],"sourcesContent":["import { type EditorState, Plugin, PluginKey } from '@tiptap/pm/state';\nimport { Decoration, DecorationSet, type EditorView } from '@tiptap/pm/view';\n\nconst uploadKey = new PluginKey('upload-image');\n\nexport const UploadImagesPlugin = ({ imageClass }: { imageClass: string }) =>\n  new Plugin({\n    key: uploadKey,\n    state: {\n      init() {\n        return DecorationSet.empty;\n      },\n      apply(tr, set) {\n        set = set.map(tr.mapping, tr.doc);\n        // See if the transaction adds or removes any placeholders\n        //@ts-expect-error - not yet sure what the type I need here\n        const action = tr.getMeta(this);\n        if (action?.add) {\n          const { id, pos, src } = action.add;\n\n          const placeholder = document.createElement('div');\n          placeholder.setAttribute('class', 'img-placeholder');\n          const image = document.createElement('img');\n          image.setAttribute('class', imageClass);\n          image.src = src;\n          placeholder.appendChild(image);\n          const deco = Decoration.widget(pos + 1, placeholder, {\n            id,\n          });\n          set = set.add(tr.doc, [deco]);\n        } else if (action?.remove) {\n          set = set.remove(\n            set.find(\n              undefined,\n              undefined,\n              (spec) => spec.id === action.remove.id\n            )\n          );\n        }\n        return set;\n      },\n    },\n    props: {\n      decorations(state) {\n        return this.getState(state);\n      },\n    },\n  });\n\nfunction findPlaceholder(state: EditorState, id: object) {\n  const decos = uploadKey.getState(state) as DecorationSet;\n  const found = decos.find(undefined, undefined, (spec) => spec.id === id);\n  return found.length ? found[0]?.from : null;\n}\n\nexport interface ImageUploadOptions {\n  validateFn?: (file: File) => void;\n  onUpload: (file: File) => Promise<unknown>;\n}\n\nexport const createImageUpload =\n  ({ validateFn, onUpload }: ImageUploadOptions): UploadFn =>\n  (file, view, pos) => {\n    // check if the file is an image\n    const validated = validateFn?.(file);\n    if (!validated) return;\n    // A fresh object to act as the ID for this upload\n    const id = {};\n\n    // Replace the selection with a placeholder\n    const tr = view.state.tr;\n    if (!tr.selection.empty) tr.deleteSelection();\n\n    const reader = new FileReader();\n    reader.readAsDataURL(file);\n    reader.onload = () => {\n      tr.setMeta(uploadKey, {\n        add: {\n          id,\n          pos,\n          src: reader.result,\n        },\n      });\n      view.dispatch(tr);\n    };\n\n    onUpload(file).then(\n      (src) => {\n        const { schema } = view.state;\n\n        const pos = findPlaceholder(view.state, id);\n\n        // If the content around the placeholder has been deleted, drop\n        // the image\n        if (pos == null) return;\n\n        // Otherwise, insert it at the placeholder's position, and remove\n        // the placeholder\n\n        // When BLOB_READ_WRITE_TOKEN is not valid or unavailable, read\n        // the image locally\n        const imageSrc = typeof src === 'object' ? reader.result : src;\n\n        const node = schema.nodes.image?.create({ src: imageSrc });\n        if (!node) return;\n\n        const transaction = view.state.tr\n          .replaceWith(pos, pos, node)\n          .setMeta(uploadKey, { remove: { id } });\n        view.dispatch(transaction);\n      },\n      () => {\n        // Deletes the image placeholder on error\n        const transaction = view.state.tr\n          .delete(pos, pos)\n          .setMeta(uploadKey, { remove: { id } });\n        view.dispatch(transaction);\n      }\n    );\n  };\n\nexport type UploadFn = (file: File, view: EditorView, pos: number) => void;\n\nexport const handleImagePaste = (\n  view: EditorView,\n  event: ClipboardEvent,\n  uploadFn: UploadFn\n) => {\n  if (event.clipboardData?.files.length) {\n    event.preventDefault();\n    const [file] = Array.from(event.clipboardData.files);\n    const pos = view.state.selection.from;\n\n    if (file) uploadFn(file, view, pos);\n    return true;\n  }\n  return false;\n};\n\nexport const handleImageDrop = (\n  view: EditorView,\n  event: DragEvent,\n  moved: boolean,\n  uploadFn: UploadFn\n) => {\n  if (!moved && event.dataTransfer?.files.length) {\n    event.preventDefault();\n    const [file] = Array.from(event.dataTransfer.files);\n    const coordinates = view.posAtCoords({\n      left: event.clientX,\n      top: event.clientY,\n    });\n    // here we deduct 1 from the pos or else the image will create an extra node\n    if (file) uploadFn(file, view, coordinates?.pos ?? 0 - 1);\n    return true;\n  }\n  return false;\n};\n"],"mappings":"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"}
+{"version":3,"file":"upload-images.mjs","names":[],"sources":["../../../../../../src/components/MarkdownEditor/novel/plugins/upload-images.tsx"],"sourcesContent":["import { type EditorState, Plugin, PluginKey } from '@tiptap/pm/state';\nimport { Decoration, DecorationSet, type EditorView } from '@tiptap/pm/view';\n\nconst uploadKey = new PluginKey('upload-image');\n\nexport const UploadImagesPlugin = ({ imageClass }: { imageClass: string }) =>\n  new Plugin({\n    key: uploadKey,\n    state: {\n      init() {\n        return DecorationSet.empty;\n      },\n      apply(tr, set) {\n        set = set.map(tr.mapping, tr.doc);\n        // See if the transaction adds or removes any placeholders\n        //@ts-expect-error - not yet sure what the type I need here\n        const action = tr.getMeta(this);\n        if (action?.add) {\n          const { id, pos, src } = action.add;\n\n          const placeholder = document.createElement('div');\n          placeholder.setAttribute('class', 'img-placeholder');\n          const image = document.createElement('img');\n          image.setAttribute('class', imageClass);\n          image.src = src;\n          placeholder.appendChild(image);\n          const deco = Decoration.widget(pos + 1, placeholder, {\n            id,\n          });\n          set = set.add(tr.doc, [deco]);\n        } else if (action?.remove) {\n          set = set.remove(\n            set.find(\n              undefined,\n              undefined,\n              (spec) => spec.id === action.remove.id\n            )\n          );\n        }\n        return set;\n      },\n    },\n    props: {\n      decorations(state) {\n        return this.getState(state);\n      },\n    },\n  });\n\nfunction findPlaceholder(state: EditorState, id: object) {\n  const decos = uploadKey.getState(state) as DecorationSet;\n  const found = decos.find(undefined, undefined, (spec) => spec.id === id);\n  return found.length ? found[0]?.from : null;\n}\n\nexport interface ImageUploadOptions {\n  validateFn?: (file: File) => void;\n  onUpload: (file: File) => Promise<unknown>;\n}\n\nexport const createImageUpload =\n  ({ validateFn, onUpload }: ImageUploadOptions): UploadFn =>\n  (file, view, pos) => {\n    // check if the file is an image\n    const validated = validateFn?.(file);\n    if (!validated) return;\n    // A fresh object to act as the ID for this upload\n    const id = {};\n\n    // Replace the selection with a placeholder\n    const tr = view.state.tr;\n    if (!tr.selection.empty) tr.deleteSelection();\n\n    const reader = new FileReader();\n    reader.readAsDataURL(file);\n    reader.onload = () => {\n      tr.setMeta(uploadKey, {\n        add: {\n          id,\n          pos,\n          src: reader.result,\n        },\n      });\n      view.dispatch(tr);\n    };\n\n    onUpload(file).then(\n      (src) => {\n        const { schema } = view.state;\n\n        const pos = findPlaceholder(view.state, id);\n\n        // If the content around the placeholder has been deleted, drop\n        // the image\n        if (pos == null) return;\n\n        // Otherwise, insert it at the placeholder's position, and remove\n        // the placeholder\n\n        // When BLOB_READ_WRITE_TOKEN is not valid or unavailable, read\n        // the image locally\n        const imageSrc = typeof src === 'object' ? reader.result : src;\n\n        const node = schema.nodes.image?.create({ src: imageSrc });\n        if (!node) return;\n\n        const transaction = view.state.tr\n          .replaceWith(pos, pos, node)\n          .setMeta(uploadKey, { remove: { id } });\n        view.dispatch(transaction);\n      },\n      () => {\n        // Deletes the image placeholder on error\n        const transaction = view.state.tr\n          .delete(pos, pos)\n          .setMeta(uploadKey, { remove: { id } });\n        view.dispatch(transaction);\n      }\n    );\n  };\n\nexport type UploadFn = (file: File, view: EditorView, pos: number) => void;\n\nexport const handleImagePaste = (\n  view: EditorView,\n  event: ClipboardEvent,\n  uploadFn: UploadFn\n) => {\n  if (event.clipboardData?.files.length) {\n    event.preventDefault();\n    const [file] = Array.from(event.clipboardData.files);\n    const pos = view.state.selection.from;\n\n    if (file) uploadFn(file, view, pos);\n    return true;\n  }\n  return false;\n};\n\nexport const handleImageDrop = (\n  view: EditorView,\n  event: DragEvent,\n  moved: boolean,\n  uploadFn: UploadFn\n) => {\n  if (!moved && event.dataTransfer?.files.length) {\n    event.preventDefault();\n    const [file] = Array.from(event.dataTransfer.files);\n    const coordinates = view.posAtCoords({\n      left: event.clientX,\n      top: event.clientY,\n    });\n    // here we deduct 1 from the pos or else the image will create an extra node\n    if (file) uploadFn(file, view, coordinates?.pos ?? 0 - 1);\n    return true;\n  }\n  return false;\n};\n"],"mappings":"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"}

package/dist/esm/components/MarkdownEditor/novel/utils/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":[],"sources":["../../../../../../src/components/MarkdownEditor/novel/utils/atoms.ts"],"sourcesContent":["import type { Range } from '@tiptap/core';\nimport { useSyncExternalStore } from 'react';\n\ntype Listener = () => void;\n\n/**\n * Minimal module-level observable store.\n *\n * rendered by Tiptap in a separate React root (outside the editor's provider\n * tree), so the query/range state has to live in a plain module singleton that\n * both roots can read and write — no shared React context needed. This is what\n * `useSyncExternalStore` store removes the dependency with identical behaviour.\n */\nconst createExternalStore = <T>(initialValue: T) => {\n  let value = initialValue;\n  const listeners = new Set<Listener>();\n\n  return {\n    getSnapshot: (): T => value,\n    setValue: (next: T): void => {\n      if (Object.is(next, value)) return;\n      value = next;\n      for (const listener of listeners) listener();\n    },\n    subscribe: (listener: Listener): (() => void) => {\n      listeners.add(listener);\n      return () => {\n        listeners.delete(listener);\n      };\n    },\n  };\n};\n\nexport const queryStore = createExternalStore('');\nexport const rangeStore = createExternalStore<Range | null>(null);\n\n/** Subscribe to the current slash-command query string. */\nexport const useQuery = (): string =>\n  useSyncExternalStore(\n    queryStore.subscribe,\n    queryStore.getSnapshot,\n    queryStore.getSnapshot\n  );\n\n/** Subscribe to the current slash-command range. */\nexport const useRange = (): Range | null =>\n  useSyncExternalStore(\n    rangeStore.subscribe,\n    rangeStore.getSnapshot,\n    rangeStore.getSnapshot\n  );\n"],"mappings":";;;;;;;;;;;AAaA,MAAM,uBAA0B,iBAAoB;CAClD,IAAI,QAAQ;CACZ,MAAM,4BAAY,IAAI,KAAe;AAErC,QAAO;EACL,mBAAsB;EACtB,WAAW,SAAkB;AAC3B,OAAI,OAAO,GAAG,MAAM,MAAM,CAAE;AAC5B,WAAQ;AACR,QAAK,MAAM,YAAY,UAAW,WAAU;;EAE9C,YAAY,aAAqC;AAC/C,aAAU,IAAI,SAAS;AACvB,gBAAa;AACX,cAAU,OAAO,SAAS;;;EAG/B;;AAGH,MAAa,aAAa,oBAAoB,GAAG;AACjD,MAAa,aAAa,oBAAkC,KAAK;;AAGjE,MAAa,iBACX,qBACE,WAAW,WACX,WAAW,aACX,WAAW,YACZ;;AAGH,MAAa,iBACX,qBACE,WAAW,WACX,WAAW,aACX,WAAW,YACZ"}
+{"version":3,"file":"atoms.mjs","names":[],"sources":["../../../../../../src/components/MarkdownEditor/novel/utils/atoms.ts"],"sourcesContent":["import type { Range } from '@tiptap/core';\nimport { useSyncExternalStore } from 'react';\n\ntype Listener = () => void;\n\n/**\n * Minimal module-level observable store.\n *\n * rendered by Tiptap in a separate React root (outside the editor's provider\n * tree), so the query/range state has to live in a plain module singleton that\n * both roots can read and write — no shared React context needed. This is what\n * `useSyncExternalStore` store removes the dependency with identical behaviour.\n */\nconst createExternalStore = <T>(initialValue: T) => {\n  let value = initialValue;\n  const listeners = new Set<Listener>();\n\n  return {\n    getSnapshot: (): T => value,\n    setValue: (next: T): void => {\n      if (Object.is(next, value)) return;\n      value = next;\n      for (const listener of listeners) listener();\n    },\n    subscribe: (listener: Listener): (() => void) => {\n      listeners.add(listener);\n      return () => {\n        listeners.delete(listener);\n      };\n    },\n  };\n};\n\nexport const queryStore = createExternalStore('');\nexport const rangeStore = createExternalStore<Range | null>(null);\n\n/** Subscribe to the current slash-command query string. */\nexport const useQuery = (): string =>\n  useSyncExternalStore(\n    queryStore.subscribe,\n    queryStore.getSnapshot,\n    queryStore.getSnapshot\n  );\n\n/** Subscribe to the current slash-command range. */\nexport const useRange = (): Range | null =>\n  useSyncExternalStore(\n    rangeStore.subscribe,\n    rangeStore.getSnapshot,\n    rangeStore.getSnapshot\n  );\n"],"mappings":";;;;;;;;;;;AAaA,MAAM,uBAA0B,iBAAoB;CAClD,IAAI,QAAQ;CACZ,MAAM,4BAAY,IAAI,IAAc;CAEpC,OAAO;EACL,mBAAsB;EACtB,WAAW,SAAkB;GAC3B,IAAI,OAAO,GAAG,MAAM,KAAK,GAAG;GAC5B,QAAQ;GACR,KAAK,MAAM,YAAY,WAAW,SAAS;EAC7C;EACA,YAAY,aAAqC;GAC/C,UAAU,IAAI,QAAQ;GACtB,aAAa;IACX,UAAU,OAAO,QAAQ;GAC3B;EACF;CACF;AACF;AAEA,MAAa,aAAa,oBAAoB,EAAE;AAChD,MAAa,aAAa,oBAAkC,IAAI;;AAGhE,MAAa,iBACX,qBACE,WAAW,WACX,WAAW,aACX,WAAW,WACb;;AAGF,MAAa,iBACX,qBACE,WAAW,WACX,WAAW,aACX,WAAW,WACb"}

package/dist/esm/components/MarkdownEditor/novel/utils/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../../src/components/MarkdownEditor/novel/utils/index.ts"],"sourcesContent":["import { Fragment, type Node } from '@tiptap/pm/model';\nimport type { EditorInstance } from '../components';\n\nexport const isValidUrl = (url: string) => {\n  try {\n    new URL(url);\n    return true;\n  } catch (_e) {\n    return false;\n  }\n};\n\nexport const getUrlFromString = (str: string) => {\n  if (isValidUrl(str)) return str;\n  try {\n    if (str.includes('.') && !str.includes(' ')) {\n      return new URL(`https://${str}`).toString();\n    }\n  } catch (_e) {\n    return null;\n  }\n};\n\n// Get the text before a given position in markdown format\nexport const getPrevText = (editor: EditorInstance, position: number) => {\n  const nodes: Node[] = [];\n  editor.state.doc.forEach((node, pos) => {\n    if (pos >= position) return;\n    nodes.push(node);\n  });\n  const fragment = Fragment.fromArray(nodes);\n  const doc = editor.state.doc.copy(fragment);\n\n  return editor.storage.markdown.serializer.serialize(doc) as string;\n};\n\n// Get all content from the editor in markdown format\nexport const getAllContent = (editor: EditorInstance) => {\n  const fragment = editor.state.doc.content;\n  const doc = editor.state.doc.copy(fragment);\n\n  return editor.storage.markdown.serializer.serialize(doc) as string;\n};\n"],"mappings":";;;AAGA,MAAa,cAAc,QAAgB;AACzC,KAAI;AACF,MAAI,IAAI,IAAI;AACZ,SAAO;UACA,IAAI;AACX,SAAO;;;AAIX,MAAa,oBAAoB,QAAgB;AAC/C,KAAI,WAAW,IAAI,CAAE,QAAO;AAC5B,KAAI;AACF,MAAI,IAAI,SAAS,IAAI,IAAI,CAAC,IAAI,SAAS,IAAI,CACzC,QAAO,IAAI,IAAI,WAAW,MAAM,CAAC,UAAU;UAEtC,IAAI;AACX,SAAO;;;AAKX,MAAa,eAAe,QAAwB,aAAqB;CACvE,MAAM,QAAgB,EAAE;AACxB,QAAO,MAAM,IAAI,SAAS,MAAM,QAAQ;AACtC,MAAI,OAAO,SAAU;AACrB,QAAM,KAAK,KAAK;GAChB;CACF,MAAM,WAAW,SAAS,UAAU,MAAM;CAC1C,MAAM,MAAM,OAAO,MAAM,IAAI,KAAK,SAAS;AAE3C,QAAO,OAAO,QAAQ,SAAS,WAAW,UAAU,IAAI;;AAI1D,MAAa,iBAAiB,WAA2B;CACvD,MAAM,WAAW,OAAO,MAAM,IAAI;CAClC,MAAM,MAAM,OAAO,MAAM,IAAI,KAAK,SAAS;AAE3C,QAAO,OAAO,QAAQ,SAAS,WAAW,UAAU,IAAI"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../../src/components/MarkdownEditor/novel/utils/index.ts"],"sourcesContent":["import { Fragment, type Node } from '@tiptap/pm/model';\nimport type { EditorInstance } from '../components';\n\nexport const isValidUrl = (url: string) => {\n  try {\n    new URL(url);\n    return true;\n  } catch (_e) {\n    return false;\n  }\n};\n\nexport const getUrlFromString = (str: string) => {\n  if (isValidUrl(str)) return str;\n  try {\n    if (str.includes('.') && !str.includes(' ')) {\n      return new URL(`https://${str}`).toString();\n    }\n  } catch (_e) {\n    return null;\n  }\n};\n\n// Get the text before a given position in markdown format\nexport const getPrevText = (editor: EditorInstance, position: number) => {\n  const nodes: Node[] = [];\n  editor.state.doc.forEach((node, pos) => {\n    if (pos >= position) return;\n    nodes.push(node);\n  });\n  const fragment = Fragment.fromArray(nodes);\n  const doc = editor.state.doc.copy(fragment);\n\n  return editor.storage.markdown.serializer.serialize(doc) as string;\n};\n\n// Get all content from the editor in markdown format\nexport const getAllContent = (editor: EditorInstance) => {\n  const fragment = editor.state.doc.content;\n  const doc = editor.state.doc.copy(fragment);\n\n  return editor.storage.markdown.serializer.serialize(doc) as string;\n};\n"],"mappings":";;;AAGA,MAAa,cAAc,QAAgB;CACzC,IAAI;EACF,IAAI,IAAI,GAAG;EACX,OAAO;CACT,SAAS,IAAI;EACX,OAAO;CACT;AACF;AAEA,MAAa,oBAAoB,QAAgB;CAC/C,IAAI,WAAW,GAAG,GAAG,OAAO;CAC5B,IAAI;EACF,IAAI,IAAI,SAAS,GAAG,KAAK,CAAC,IAAI,SAAS,GAAG,GACxC,OAAO,IAAI,IAAI,WAAW,KAAK,CAAC,CAAC,SAAS;CAE9C,SAAS,IAAI;EACX,OAAO;CACT;AACF;AAGA,MAAa,eAAe,QAAwB,aAAqB;CACvE,MAAM,QAAgB,CAAC;CACvB,OAAO,MAAM,IAAI,SAAS,MAAM,QAAQ;EACtC,IAAI,OAAO,UAAU;EACrB,MAAM,KAAK,IAAI;CACjB,CAAC;CACD,MAAM,WAAW,SAAS,UAAU,KAAK;CACzC,MAAM,MAAM,OAAO,MAAM,IAAI,KAAK,QAAQ;CAE1C,OAAO,OAAO,QAAQ,SAAS,WAAW,UAAU,GAAG;AACzD;AAGA,MAAa,iBAAiB,WAA2B;CACvD,MAAM,WAAW,OAAO,MAAM,IAAI;CAClC,MAAM,MAAM,OAAO,MAAM,IAAI,KAAK,QAAQ;CAE1C,OAAO,OAAO,QAAQ,SAAS,WAAW,UAAU,GAAG;AACzD"}

package/dist/esm/components/MarkdownEditor/selectors/ColorSelector.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSelector.mjs","names":[],"sources":["../../../../../src/components/MarkdownEditor/selectors/ColorSelector.tsx"],"sourcesContent":["'use client';\n\nimport { Check, ChevronDown } from 'lucide-react';\nimport { type FC, useEffect, useRef, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { useEditor } from '../novel';\n\nexport type ColorMenuItem = {\n  name: string;\n  color: string;\n};\n\nconst TEXT_COLORS: ColorMenuItem[] = [\n  { name: 'Default', color: 'var(--color-text)' },\n  { name: 'Primary', color: 'var(--color-primary-500)' },\n  { name: 'Secondary', color: 'var(--color-secondary)' },\n  { name: 'Success', color: 'var(--color-success)' },\n  { name: 'Warning', color: 'var(--color-warning)' },\n  { name: 'Error', color: 'var(--color-error)' },\n  { name: 'Neutral', color: 'var(--color-neutral)' },\n];\n\nconst HIGHLIGHT_COLORS: ColorMenuItem[] = [\n  { name: 'Default', color: 'transparent' },\n  { name: 'Primary', color: 'var(--color-primary-100)' },\n  { name: 'Secondary', color: 'var(--color-secondary-100)' },\n  { name: 'Success', color: 'var(--color-success-100)' },\n  { name: 'Warning', color: 'var(--color-warning-50)' },\n  { name: 'Error', color: 'var(--color-error-100)' },\n  { name: 'Neutral', color: 'var(--color-neutral-100)' },\n];\n\n/**\n * Bubble-menu selector for text color and highlight color.\n *\n * Uses `onMouseDown` + `preventDefault` on every interactive element so the\n * editor's selection is never cleared while the panel is open.\n */\nexport const ColorSelector: FC = () => {\n  const { editor } = useEditor();\n  const [isOpen, setIsOpen] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const content = useIntlayer('markdown-editor');\n\n  useEffect(() => {\n    if (!isOpen) return;\n    const handleOutsideMouseDown = (event: MouseEvent) => {\n      if (!containerRef.current?.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener('mousedown', handleOutsideMouseDown);\n    return () =>\n      document.removeEventListener('mousedown', handleOutsideMouseDown);\n  }, [isOpen]);\n\n  if (!editor) return null;\n\n  const activeColorItem = TEXT_COLORS.find(({ color }) =>\n    editor.isActive('textStyle', { color })\n  );\n  const activeHighlightItem = HIGHLIGHT_COLORS.find(({ color }) =>\n    editor.isActive('highlight', { color })\n  );\n\n  const getColorName = (name: string) => {\n    switch (name) {\n      case 'Default':\n        return content.colorDefault.value;\n      case 'Primary':\n        return content.colorPrimary.value;\n      case 'Secondary':\n        return content.colorSecondary.value;\n      case 'Success':\n        return content.colorSuccess.value;\n      case 'Warning':\n        return content.colorWarning.value;\n      case 'Error':\n        return content.colorError.value;\n      case 'Neutral':\n        return content.colorNeutral.value;\n      default:\n        return name;\n    }\n  };\n\n  return (\n    <div ref={containerRef} className=\"relative\">\n      <button\n        type=\"button\"\n        onMouseDown={(e) => {\n          e.preventDefault();\n          setIsOpen((prev) => !prev);\n        }}\n        className=\"flex items-center gap-1 whitespace-nowrap rounded-none px-3 py-1.5 text-sm hover:bg-accent\"\n      >\n        <span\n          className=\"rounded-sm px-1 font-medium\"\n          style={{\n            color: activeColorItem?.color,\n            backgroundColor: activeHighlightItem?.color,\n          }}\n        >\n          A\n        </span>\n        <ChevronDown className=\"size-3\" />\n      </button>\n\n      {isOpen && (\n        <div className=\"absolute top-[calc(100%+0.5rem)] left-0 z-50 flex w-40 flex-col rounded-md border bg-popover p-1 shadow-md\">\n          <div className=\"mb-1 px-2 font-semibold text-muted-foreground text-xs\">\n            {content.colorHeading.value}\n          </div>\n          {TEXT_COLORS.map(({ name, color }) => (\n            <button\n              type=\"button\"\n              key={name}\n              onMouseDown={(e) => {\n                e.preventDefault();\n                editor.commands.unsetColor();\n                if (name !== 'Default') {\n                  editor.chain().focus().setColor(color).run();\n                }\n                setIsOpen(false);\n              }}\n              className=\"flex w-full cursor-pointer items-center justify-between rounded-sm px-2 py-1 text-sm hover:bg-accent\"\n            >\n              <div className=\"flex items-center gap-2\">\n                <span\n                  className=\"rounded-sm border px-1.5 font-medium\"\n                  style={{ color }}\n                >\n                  A\n                </span>\n                <span>{getColorName(name)}</span>\n              </div>\n              {editor.isActive('textStyle', { color }) && (\n                <Check className=\"size-3\" />\n              )}\n            </button>\n          ))}\n\n          <div className=\"mt-2 mb-1 px-2 font-semibold text-muted-foreground text-xs\">\n            {content.highlightHeading.value}\n          </div>\n          {HIGHLIGHT_COLORS.map(({ name, color }) => (\n            <button\n              type=\"button\"\n              key={name}\n              onMouseDown={(e) => {\n                e.preventDefault();\n                editor.commands.unsetHighlight();\n                if (name !== 'Default') {\n                  editor.chain().focus().setHighlight({ color }).run();\n                }\n                setIsOpen(false);\n              }}\n              className=\"flex w-full cursor-pointer items-center justify-between rounded-sm px-2 py-1 text-sm hover:bg-accent\"\n            >\n              <div className=\"flex items-center gap-2\">\n                <span\n                  className=\"rounded-sm border px-1.5 font-medium\"\n                  style={{ backgroundColor: color }}\n                >\n                  A\n                </span>\n                <span>{getColorName(name)}</span>\n              </div>\n              {editor.isActive('highlight', { color }) && (\n                <Check className=\"size-3\" />\n              )}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ColorSelector.mjs","names":[],"sources":["../../../../../src/components/MarkdownEditor/selectors/ColorSelector.tsx"],"sourcesContent":["'use client';\n\nimport { Check, ChevronDown } from 'lucide-react';\nimport { type FC, useEffect, useRef, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { useEditor } from '../novel';\n\nexport type ColorMenuItem = {\n  name: string;\n  color: string;\n};\n\nconst TEXT_COLORS: ColorMenuItem[] = [\n  { name: 'Default', color: 'var(--color-text)' },\n  { name: 'Primary', color: 'var(--color-primary-500)' },\n  { name: 'Secondary', color: 'var(--color-secondary)' },\n  { name: 'Success', color: 'var(--color-success)' },\n  { name: 'Warning', color: 'var(--color-warning)' },\n  { name: 'Error', color: 'var(--color-error)' },\n  { name: 'Neutral', color: 'var(--color-neutral)' },\n];\n\nconst HIGHLIGHT_COLORS: ColorMenuItem[] = [\n  { name: 'Default', color: 'transparent' },\n  { name: 'Primary', color: 'var(--color-primary-100)' },\n  { name: 'Secondary', color: 'var(--color-secondary-100)' },\n  { name: 'Success', color: 'var(--color-success-100)' },\n  { name: 'Warning', color: 'var(--color-warning-50)' },\n  { name: 'Error', color: 'var(--color-error-100)' },\n  { name: 'Neutral', color: 'var(--color-neutral-100)' },\n];\n\n/**\n * Bubble-menu selector for text color and highlight color.\n *\n * Uses `onMouseDown` + `preventDefault` on every interactive element so the\n * editor's selection is never cleared while the panel is open.\n */\nexport const ColorSelector: FC = () => {\n  const { editor } = useEditor();\n  const [isOpen, setIsOpen] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const content = useIntlayer('markdown-editor');\n\n  useEffect(() => {\n    if (!isOpen) return;\n    const handleOutsideMouseDown = (event: MouseEvent) => {\n      if (!containerRef.current?.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener('mousedown', handleOutsideMouseDown);\n    return () =>\n      document.removeEventListener('mousedown', handleOutsideMouseDown);\n  }, [isOpen]);\n\n  if (!editor) return null;\n\n  const activeColorItem = TEXT_COLORS.find(({ color }) =>\n    editor.isActive('textStyle', { color })\n  );\n  const activeHighlightItem = HIGHLIGHT_COLORS.find(({ color }) =>\n    editor.isActive('highlight', { color })\n  );\n\n  const getColorName = (name: string) => {\n    switch (name) {\n      case 'Default':\n        return content.colorDefault.value;\n      case 'Primary':\n        return content.colorPrimary.value;\n      case 'Secondary':\n        return content.colorSecondary.value;\n      case 'Success':\n        return content.colorSuccess.value;\n      case 'Warning':\n        return content.colorWarning.value;\n      case 'Error':\n        return content.colorError.value;\n      case 'Neutral':\n        return content.colorNeutral.value;\n      default:\n        return name;\n    }\n  };\n\n  return (\n    <div ref={containerRef} className=\"relative\">\n      <button\n        type=\"button\"\n        onMouseDown={(e) => {\n          e.preventDefault();\n          setIsOpen((prev) => !prev);\n        }}\n        className=\"flex items-center gap-1 whitespace-nowrap rounded-none px-3 py-1.5 text-sm hover:bg-accent\"\n      >\n        <span\n          className=\"rounded-sm px-1 font-medium\"\n          style={{\n            color: activeColorItem?.color,\n            backgroundColor: activeHighlightItem?.color,\n          }}\n        >\n          A\n        </span>\n        <ChevronDown className=\"size-3\" />\n      </button>\n\n      {isOpen && (\n        <div className=\"absolute top-[calc(100%+0.5rem)] left-0 z-50 flex w-40 flex-col rounded-md border bg-popover p-1 shadow-md\">\n          <div className=\"mb-1 px-2 font-semibold text-muted-foreground text-xs\">\n            {content.colorHeading.value}\n          </div>\n          {TEXT_COLORS.map(({ name, color }) => (\n            <button\n              type=\"button\"\n              key={name}\n              onMouseDown={(e) => {\n                e.preventDefault();\n                editor.commands.unsetColor();\n                if (name !== 'Default') {\n                  editor.chain().focus().setColor(color).run();\n                }\n                setIsOpen(false);\n              }}\n              className=\"flex w-full cursor-pointer items-center justify-between rounded-sm px-2 py-1 text-sm hover:bg-accent\"\n            >\n              <div className=\"flex items-center gap-2\">\n                <span\n                  className=\"rounded-sm border px-1.5 font-medium\"\n                  style={{ color }}\n                >\n                  A\n                </span>\n                <span>{getColorName(name)}</span>\n              </div>\n              {editor.isActive('textStyle', { color }) && (\n                <Check className=\"size-3\" />\n              )}\n            </button>\n          ))}\n\n          <div className=\"mt-2 mb-1 px-2 font-semibold text-muted-foreground text-xs\">\n            {content.highlightHeading.value}\n          </div>\n          {HIGHLIGHT_COLORS.map(({ name, color }) => (\n            <button\n              type=\"button\"\n              key={name}\n              onMouseDown={(e) => {\n                e.preventDefault();\n                editor.commands.unsetHighlight();\n                if (name !== 'Default') {\n                  editor.chain().focus().setHighlight({ color }).run();\n                }\n                setIsOpen(false);\n              }}\n              className=\"flex w-full cursor-pointer items-center justify-between rounded-sm px-2 py-1 text-sm hover:bg-accent\"\n            >\n              <div className=\"flex items-center gap-2\">\n                <span\n                  className=\"rounded-sm border px-1.5 font-medium\"\n                  style={{ backgroundColor: color }}\n                >\n                  A\n                </span>\n                <span>{getColorName(name)}</span>\n              </div>\n              {editor.isActive('highlight', { color }) && (\n                <Check className=\"size-3\" />\n              )}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAYA,MAAM,cAA+B;CACnC;EAAE,MAAM;EAAW,OAAO;CAAoB;CAC9C;EAAE,MAAM;EAAW,OAAO;CAA2B;CACrD;EAAE,MAAM;EAAa,OAAO;CAAyB;CACrD;EAAE,MAAM;EAAW,OAAO;CAAuB;CACjD;EAAE,MAAM;EAAW,OAAO;CAAuB;CACjD;EAAE,MAAM;EAAS,OAAO;CAAqB;CAC7C;EAAE,MAAM;EAAW,OAAO;CAAuB;AACnD;AAEA,MAAM,mBAAoC;CACxC;EAAE,MAAM;EAAW,OAAO;CAAc;CACxC;EAAE,MAAM;EAAW,OAAO;CAA2B;CACrD;EAAE,MAAM;EAAa,OAAO;CAA6B;CACzD;EAAE,MAAM;EAAW,OAAO;CAA2B;CACrD;EAAE,MAAM;EAAW,OAAO;CAA0B;CACpD;EAAE,MAAM;EAAS,OAAO;CAAyB;CACjD;EAAE,MAAM;EAAW,OAAO;CAA2B;AACvD;;;;;;;AAQA,MAAa,sBAA0B;CACrC,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,UAAU,YAAY,iBAAiB;CAE7C,gBAAgB;EACd,IAAI,CAAC,QAAQ;EACb,MAAM,0BAA0B,UAAsB;GACpD,IAAI,CAAC,aAAa,SAAS,SAAS,MAAM,MAAc,GACtD,UAAU,KAAK;EAEnB;EACA,SAAS,iBAAiB,aAAa,sBAAsB;EAC7D,aACE,SAAS,oBAAoB,aAAa,sBAAsB;CACpE,GAAG,CAAC,MAAM,CAAC;CAEX,IAAI,CAAC,QAAQ,OAAO;CAEpB,MAAM,kBAAkB,YAAY,MAAM,EAAE,YAC1C,OAAO,SAAS,aAAa,EAAE,MAAM,CAAC,CACxC;CACA,MAAM,sBAAsB,iBAAiB,MAAM,EAAE,YACnD,OAAO,SAAS,aAAa,EAAE,MAAM,CAAC,CACxC;CAEA,MAAM,gBAAgB,SAAiB;EACrC,QAAQ,MAAR;GACE,KAAK,WACH,OAAO,QAAQ,aAAa;GAC9B,KAAK,WACH,OAAO,QAAQ,aAAa;GAC9B,KAAK,aACH,OAAO,QAAQ,eAAe;GAChC,KAAK,WACH,OAAO,QAAQ,aAAa;GAC9B,KAAK,WACH,OAAO,QAAQ,aAAa;GAC9B,KAAK,SACH,OAAO,QAAQ,WAAW;GAC5B,KAAK,WACH,OAAO,QAAQ,aAAa;GAC9B,SACE,OAAO;EACX;CACF;CAEA,OACE,qBAAC,OAAD;EAAK,KAAK;EAAc,WAAU;YAAlC,CACE,qBAAC,UAAD;GACE,MAAK;GACL,cAAc,MAAM;IAClB,EAAE,eAAe;IACjB,WAAW,SAAS,CAAC,IAAI;GAC3B;GACA,WAAU;aANZ,CAQE,oBAAC,QAAD;IACE,WAAU;IACV,OAAO;KACL,OAAO,iBAAiB;KACxB,iBAAiB,qBAAqB;IACxC;cACD;GAEK,IACN,oBAAC,aAAD,EAAa,WAAU,SAAU,EAC3B;MAEP,UACC,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,OAAD;KAAK,WAAU;eACZ,QAAQ,aAAa;IACnB;IACJ,YAAY,KAAK,EAAE,MAAM,YACxB,qBAAC,UAAD;KACE,MAAK;KAEL,cAAc,MAAM;MAClB,EAAE,eAAe;MACjB,OAAO,SAAS,WAAW;MAC3B,IAAI,SAAS,WACX,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,SAAS,KAAK,CAAC,CAAC,IAAI;MAE7C,UAAU,KAAK;KACjB;KACA,WAAU;eAXZ,CAaE,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,QAAD;OACE,WAAU;OACV,OAAO,EAAE,MAAM;iBAChB;MAEK,IACN,oBAAC,QAAD,YAAO,aAAa,IAAI,EAAQ,EAC7B;SACJ,OAAO,SAAS,aAAa,EAAE,MAAM,CAAC,KACrC,oBAAC,OAAD,EAAO,WAAU,SAAU,EAEvB;OAvBD,IAuBC,CACT;IAED,oBAAC,OAAD;KAAK,WAAU;eACZ,QAAQ,iBAAiB;IACvB;IACJ,iBAAiB,KAAK,EAAE,MAAM,YAC7B,qBAAC,UAAD;KACE,MAAK;KAEL,cAAc,MAAM;MAClB,EAAE,eAAe;MACjB,OAAO,SAAS,eAAe;MAC/B,IAAI,SAAS,WACX,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI;MAErD,UAAU,KAAK;KACjB;KACA,WAAU;eAXZ,CAaE,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,QAAD;OACE,WAAU;OACV,OAAO,EAAE,iBAAiB,MAAM;iBACjC;MAEK,IACN,oBAAC,QAAD,YAAO,aAAa,IAAI,EAAQ,EAC7B;SACJ,OAAO,SAAS,aAAa,EAAE,MAAM,CAAC,KACrC,oBAAC,OAAD,EAAO,WAAU,SAAU,EAEvB;OAvBD,IAuBC,CACT;GACE;IAEJ;;AAET"}

package/dist/esm/components/MarkdownEditor/selectors/LinkSelector.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LinkSelector.mjs","names":[],"sources":["../../../../../src/components/MarkdownEditor/selectors/LinkSelector.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@components/Button';\nimport { cn } from '@utils/cn';\nimport { Check, Link2, Trash } from 'lucide-react';\nimport { type FC, useEffect, useRef, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { getUrlFromString, useEditor } from '../novel';\n\n/**\n * Bubble-menu selector for adding / editing / removing a link on the current\n * selection.\n *\n * The trigger uses `onMouseDown` + `preventDefault` to keep the editor\n * selection alive. The input inside the panel is allowed to take real focus\n * (the user needs to type a URL) — the editor re-focuses on submit/remove.\n */\nexport const LinkSelector: FC = () => {\n  const { editor } = useEditor();\n  const [isOpen, setIsOpen] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const content = useIntlayer('markdown-editor');\n\n  useEffect(() => {\n    if (!isOpen) return;\n    const handleOutsideMouseDown = (event: MouseEvent) => {\n      if (!containerRef.current?.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener('mousedown', handleOutsideMouseDown);\n\n    // Programmatically focus the input\n    inputRef.current?.focus();\n\n    return () =>\n      document.removeEventListener('mousedown', handleOutsideMouseDown);\n  }, [isOpen]);\n\n  if (!editor) return null;\n\n  const currentHref = editor.getAttributes('link').href as string | undefined;\n\n  return (\n    <div ref={containerRef} className=\"relative\">\n      <button\n        type=\"button\"\n        onMouseDown={(e) => {\n          e.preventDefault();\n          setIsOpen((prev) => !prev);\n        }}\n        className={cn(\n          'flex items-center gap-1 whitespace-nowrap rounded-none px-3 py-1.5 text-sm hover:bg-accent',\n          editor.isActive('link') && 'text-blue-500'\n        )}\n      >\n        <Link2 className=\"size-4\" />\n        <span className=\"underline decoration-stone-400 underline-offset-4\">\n          {content.link.value}\n        </span>\n      </button>\n\n      {isOpen && (\n        <div className=\"absolute top-[calc(100%+0.5rem)] left-0 z-50\">\n          <form\n            key={currentHref ?? 'no-link'}\n            className=\"flex w-60 gap-1 rounded-md border bg-popover p-1 shadow-md\"\n            onSubmit={(event) => {\n              event.preventDefault();\n              const input = event.currentTarget[0] as HTMLInputElement;\n              const url = getUrlFromString(input.value);\n              if (url) {\n                editor.chain().focus().setLink({ href: url }).run();\n              }\n              setIsOpen(false);\n            }}\n          >\n            <input\n              ref={inputRef}\n              type=\"text\"\n              placeholder={content.linkPlaceholder.value}\n              className=\"flex-1 bg-transparent p-1 text-sm outline-none\"\n              defaultValue={currentHref ?? ''}\n            />\n            {currentHref ? (\n              <Button\n                label={content.removeLink.value}\n                type=\"button\"\n                size=\"icon-sm\"\n                variant=\"outline\"\n                color=\"error\"\n                Icon={Trash}\n                onClick={() => {\n                  editor.chain().focus().unsetLink().run();\n                  if (inputRef.current) inputRef.current.value = '';\n                  setIsOpen(false);\n                }}\n              />\n            ) : (\n              <Button\n                label={content.applyLink.value}\n                type=\"submit\"\n                size=\"icon-sm\"\n                color=\"text\"\n                Icon={Check}\n              />\n            )}\n          </form>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAiBA,MAAa,qBAAyB;CACpC,MAAM,EAAE,WAAW,WAAW;CAC9B,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,UAAU,YAAY,kBAAkB;AAE9C,iBAAgB;AACd,MAAI,CAAC,OAAQ;EACb,MAAM,0BAA0B,UAAsB;AACpD,OAAI,CAAC,aAAa,SAAS,SAAS,MAAM,OAAe,CACvD,WAAU,MAAM;;AAGpB,WAAS,iBAAiB,aAAa,uBAAuB;AAG9D,WAAS,SAAS,OAAO;AAEzB,eACE,SAAS,oBAAoB,aAAa,uBAAuB;IAClE,CAAC,OAAO,CAAC;AAEZ,KAAI,CAAC,OAAQ,QAAO;CAEpB,MAAM,cAAc,OAAO,cAAc,OAAO,CAAC;AAEjD,QACE,qBAAC,OAAD;EAAK,KAAK;EAAc,WAAU;YAAlC,CACE,qBAAC,UAAD;GACE,MAAK;GACL,cAAc,MAAM;AAClB,MAAE,gBAAgB;AAClB,eAAW,SAAS,CAAC,KAAK;;GAE5B,WAAW,GACT,8FACA,OAAO,SAAS,OAAO,IAAI,gBAC5B;aATH,CAWE,oBAAC,OAAD,EAAO,WAAU,UAAW,GAC5B,oBAAC,QAAD;IAAM,WAAU;cACb,QAAQ,KAAK;IACT,EACA;MAER,UACC,oBAAC,OAAD;GAAK,WAAU;aACb,qBAAC,QAAD;IAEE,WAAU;IACV,WAAW,UAAU;AACnB,WAAM,gBAAgB;KACtB,MAAM,QAAQ,MAAM,cAAc;KAClC,MAAM,MAAM,iBAAiB,MAAM,MAAM;AACzC,SAAI,IACF,QAAO,OAAO,CAAC,OAAO,CAAC,QAAQ,EAAE,MAAM,KAAK,CAAC,CAAC,KAAK;AAErD,eAAU,MAAM;;cAVpB,CAaE,oBAAC,SAAD;KACE,KAAK;KACL,MAAK;KACL,aAAa,QAAQ,gBAAgB;KACrC,WAAU;KACV,cAAc,eAAe;KAC7B,GACD,cACC,oBAAC,QAAD;KACE,OAAO,QAAQ,WAAW;KAC1B,MAAK;KACL,MAAK;KACL,SAAQ;KACR,OAAM;KACN,MAAM;KACN,eAAe;AACb,aAAO,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK;AACxC,UAAI,SAAS,QAAS,UAAS,QAAQ,QAAQ;AAC/C,gBAAU,MAAM;;KAElB,IAEF,oBAAC,QAAD;KACE,OAAO,QAAQ,UAAU;KACzB,MAAK;KACL,MAAK;KACL,OAAM;KACN,MAAM;KACN,EAEC;MA1CA,eAAe,UA0Cf;GACH,EAEJ"}
+{"version":3,"file":"LinkSelector.mjs","names":[],"sources":["../../../../../src/components/MarkdownEditor/selectors/LinkSelector.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@components/Button';\nimport { cn } from '@utils/cn';\nimport { Check, Link2, Trash } from 'lucide-react';\nimport { type FC, useEffect, useRef, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { getUrlFromString, useEditor } from '../novel';\n\n/**\n * Bubble-menu selector for adding / editing / removing a link on the current\n * selection.\n *\n * The trigger uses `onMouseDown` + `preventDefault` to keep the editor\n * selection alive. The input inside the panel is allowed to take real focus\n * (the user needs to type a URL) — the editor re-focuses on submit/remove.\n */\nexport const LinkSelector: FC = () => {\n  const { editor } = useEditor();\n  const [isOpen, setIsOpen] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const content = useIntlayer('markdown-editor');\n\n  useEffect(() => {\n    if (!isOpen) return;\n    const handleOutsideMouseDown = (event: MouseEvent) => {\n      if (!containerRef.current?.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener('mousedown', handleOutsideMouseDown);\n\n    // Programmatically focus the input\n    inputRef.current?.focus();\n\n    return () =>\n      document.removeEventListener('mousedown', handleOutsideMouseDown);\n  }, [isOpen]);\n\n  if (!editor) return null;\n\n  const currentHref = editor.getAttributes('link').href as string | undefined;\n\n  return (\n    <div ref={containerRef} className=\"relative\">\n      <button\n        type=\"button\"\n        onMouseDown={(e) => {\n          e.preventDefault();\n          setIsOpen((prev) => !prev);\n        }}\n        className={cn(\n          'flex items-center gap-1 whitespace-nowrap rounded-none px-3 py-1.5 text-sm hover:bg-accent',\n          editor.isActive('link') && 'text-blue-500'\n        )}\n      >\n        <Link2 className=\"size-4\" />\n        <span className=\"underline decoration-stone-400 underline-offset-4\">\n          {content.link.value}\n        </span>\n      </button>\n\n      {isOpen && (\n        <div className=\"absolute top-[calc(100%+0.5rem)] left-0 z-50\">\n          <form\n            key={currentHref ?? 'no-link'}\n            className=\"flex w-60 gap-1 rounded-md border bg-popover p-1 shadow-md\"\n            onSubmit={(event) => {\n              event.preventDefault();\n              const input = event.currentTarget[0] as HTMLInputElement;\n              const url = getUrlFromString(input.value);\n              if (url) {\n                editor.chain().focus().setLink({ href: url }).run();\n              }\n              setIsOpen(false);\n            }}\n          >\n            <input\n              ref={inputRef}\n              type=\"text\"\n              placeholder={content.linkPlaceholder.value}\n              className=\"flex-1 bg-transparent p-1 text-sm outline-none\"\n              defaultValue={currentHref ?? ''}\n            />\n            {currentHref ? (\n              <Button\n                label={content.removeLink.value}\n                type=\"button\"\n                size=\"icon-sm\"\n                variant=\"outline\"\n                color=\"error\"\n                Icon={Trash}\n                onClick={() => {\n                  editor.chain().focus().unsetLink().run();\n                  if (inputRef.current) inputRef.current.value = '';\n                  setIsOpen(false);\n                }}\n              />\n            ) : (\n              <Button\n                label={content.applyLink.value}\n                type=\"submit\"\n                size=\"icon-sm\"\n                color=\"text\"\n                Icon={Check}\n              />\n            )}\n          </form>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAiBA,MAAa,qBAAyB;CACpC,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,UAAU,YAAY,iBAAiB;CAE7C,gBAAgB;EACd,IAAI,CAAC,QAAQ;EACb,MAAM,0BAA0B,UAAsB;GACpD,IAAI,CAAC,aAAa,SAAS,SAAS,MAAM,MAAc,GACtD,UAAU,KAAK;EAEnB;EACA,SAAS,iBAAiB,aAAa,sBAAsB;EAG7D,SAAS,SAAS,MAAM;EAExB,aACE,SAAS,oBAAoB,aAAa,sBAAsB;CACpE,GAAG,CAAC,MAAM,CAAC;CAEX,IAAI,CAAC,QAAQ,OAAO;CAEpB,MAAM,cAAc,OAAO,cAAc,MAAM,CAAC,CAAC;CAEjD,OACE,qBAAC,OAAD;EAAK,KAAK;EAAc,WAAU;YAAlC,CACE,qBAAC,UAAD;GACE,MAAK;GACL,cAAc,MAAM;IAClB,EAAE,eAAe;IACjB,WAAW,SAAS,CAAC,IAAI;GAC3B;GACA,WAAW,GACT,8FACA,OAAO,SAAS,MAAM,KAAK,eAC7B;aATF,CAWE,oBAAC,OAAD,EAAO,WAAU,SAAU,IAC3B,oBAAC,QAAD;IAAM,WAAU;cACb,QAAQ,KAAK;GACV,EACA;MAEP,UACC,oBAAC,OAAD;GAAK,WAAU;aACb,qBAAC,QAAD;IAEE,WAAU;IACV,WAAW,UAAU;KACnB,MAAM,eAAe;KACrB,MAAM,QAAQ,MAAM,cAAc;KAClC,MAAM,MAAM,iBAAiB,MAAM,KAAK;KACxC,IAAI,KACF,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC,CAAC,CAAC,IAAI;KAEpD,UAAU,KAAK;IACjB;cAXF,CAaE,oBAAC,SAAD;KACE,KAAK;KACL,MAAK;KACL,aAAa,QAAQ,gBAAgB;KACrC,WAAU;KACV,cAAc,eAAe;IAC9B,IACA,cACC,oBAAC,QAAD;KACE,OAAO,QAAQ,WAAW;KAC1B,MAAK;KACL,MAAK;KACL,SAAQ;KACR,OAAM;KACN,MAAM;KACN,eAAe;MACb,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC,IAAI;MACvC,IAAI,SAAS,SAAS,SAAS,QAAQ,QAAQ;MAC/C,UAAU,KAAK;KACjB;IACD,KAED,oBAAC,QAAD;KACE,OAAO,QAAQ,UAAU;KACzB,MAAK;KACL,MAAK;KACL,OAAM;KACN,MAAM;IACP,EAEC;MA1CC,eAAe,SA0ChB;EACH,EAEJ;;AAET"}

package/dist/esm/components/MarkdownEditor/selectors/NodeSelector.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NodeSelector.mjs","names":[],"sources":["../../../../../src/components/MarkdownEditor/selectors/NodeSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport {\n  Check,\n  CheckSquare,\n  ChevronDown,\n  Code,\n  Heading1,\n  Heading2,\n  Heading3,\n  ListOrdered,\n  type LucideIcon,\n  TextIcon,\n  TextQuote,\n} from 'lucide-react';\nimport { type FC, useEffect, useRef, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { type EditorInstance, useEditor } from '../novel';\n\nexport type SelectorItem = {\n  name: string;\n  icon: LucideIcon;\n  command: (editor: NonNullable<EditorInstance>) => void;\n  isActive: (editor: NonNullable<EditorInstance>) => boolean;\n};\n\nconst items: SelectorItem[] = [\n  {\n    name: 'Text',\n    icon: TextIcon,\n    command: (editor) => editor.chain().focus().clearNodes().run(),\n    isActive: (editor) =>\n      editor.isActive('paragraph') &&\n      !editor.isActive('bulletList') &&\n      !editor.isActive('orderedList'),\n  },\n  {\n    name: 'Heading 1',\n    icon: Heading1,\n    command: (editor) =>\n      editor.chain().focus().clearNodes().toggleHeading({ level: 1 }).run(),\n    isActive: (editor) => editor.isActive('heading', { level: 1 }),\n  },\n  {\n    name: 'Heading 2',\n    icon: Heading2,\n    command: (editor) =>\n      editor.chain().focus().clearNodes().toggleHeading({ level: 2 }).run(),\n    isActive: (editor) => editor.isActive('heading', { level: 2 }),\n  },\n  {\n    name: 'Heading 3',\n    icon: Heading3,\n    command: (editor) =>\n      editor.chain().focus().clearNodes().toggleHeading({ level: 3 }).run(),\n    isActive: (editor) => editor.isActive('heading', { level: 3 }),\n  },\n  {\n    name: 'To-do List',\n    icon: CheckSquare,\n    command: (editor) =>\n      editor.chain().focus().clearNodes().toggleTaskList().run(),\n    isActive: (editor) => editor.isActive('taskItem'),\n  },\n  {\n    name: 'Bullet List',\n    icon: ListOrdered,\n    command: (editor) =>\n      editor.chain().focus().clearNodes().toggleBulletList().run(),\n    isActive: (editor) => editor.isActive('bulletList'),\n  },\n  {\n    name: 'Numbered List',\n    icon: ListOrdered,\n    command: (editor) =>\n      editor.chain().focus().clearNodes().toggleOrderedList().run(),\n    isActive: (editor) => editor.isActive('orderedList'),\n  },\n  {\n    name: 'Quote',\n    icon: TextQuote,\n    command: (editor) =>\n      editor.chain().focus().clearNodes().toggleBlockquote().run(),\n    isActive: (editor) => editor.isActive('blockquote'),\n  },\n  {\n    name: 'Code',\n    icon: Code,\n    command: (editor) =>\n      editor.chain().focus().clearNodes().toggleCodeBlock().run(),\n    isActive: (editor) => editor.isActive('codeBlock'),\n  },\n];\n\n/**\n * Bubble-menu selector that converts the current block between paragraph,\n * headings, lists, quote and code.\n *\n * Uses `onMouseDown` + `preventDefault` on every interactive element so the\n * editor's selection is never cleared while the panel is open.\n */\nexport const NodeSelector: FC = () => {\n  const { editor } = useEditor();\n  const [isOpen, setIsOpen] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const content = useIntlayer('markdown-editor');\n\n  useEffect(() => {\n    if (!isOpen) return;\n    const handleOutsideMouseDown = (event: MouseEvent) => {\n      if (!containerRef.current?.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener('mousedown', handleOutsideMouseDown);\n    return () =>\n      document.removeEventListener('mousedown', handleOutsideMouseDown);\n  }, [isOpen]);\n\n  if (!editor) return null;\n\n  const activeItem = items.filter((item) => item.isActive(editor)).pop() ?? {\n    name: 'Multiple',\n  };\n\n  const getItemName = (name: string) => {\n    switch (name) {\n      case 'Text':\n        return content.text.value;\n      case 'Heading 1':\n        return content.heading1.value;\n      case 'Heading 2':\n        return content.heading2.value;\n      case 'Heading 3':\n        return content.heading3.value;\n      case 'To-do List':\n        return content.todoList.value;\n      case 'Bullet List':\n        return content.bulletList.value;\n      case 'Numbered List':\n        return content.numberedList.value;\n      case 'Quote':\n        return content.quote.value;\n      case 'Code':\n        return content.code.value;\n      case 'Multiple':\n        return content.multiple.value;\n      default:\n        return name;\n    }\n  };\n\n  return (\n    <div ref={containerRef} className=\"relative\">\n      <button\n        type=\"button\"\n        onMouseDown={(e) => {\n          e.preventDefault();\n          setIsOpen((prev) => !prev);\n        }}\n        className=\"flex items-center gap-1 whitespace-nowrap rounded-none px-3 py-1.5 text-sm hover:bg-accent\"\n      >\n        <span>{getItemName(activeItem.name)}</span>\n        <ChevronDown\n          className={cn('size-3 transition-transform', isOpen && 'rotate-180')}\n        />\n      </button>\n\n      {isOpen && (\n        <div className=\"absolute top-[calc(100%+0.5rem)] left-0 z-50 w-48 rounded-md border bg-popover p-1 shadow-md\">\n          {items.map((item) => (\n            <button\n              type=\"button\"\n              key={item.name}\n              onMouseDown={(e) => {\n                e.preventDefault();\n                item.command(editor);\n                setIsOpen(false);\n              }}\n              className=\"flex w-full cursor-pointer items-center justify-between rounded-sm px-2 py-1 text-sm hover:bg-accent\"\n            >\n              <div className=\"flex items-center space-x-2\">\n                <div className=\"rounded-sm border p-1\">\n                  <item.icon className=\"size-3\" />\n                </div>\n                <span>{getItemName(item.name)}</span>\n              </div>\n              {activeItem.name === item.name && <Check className=\"size-4\" />}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"NodeSelector.mjs","names":[],"sources":["../../../../../src/components/MarkdownEditor/selectors/NodeSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport {\n  Check,\n  CheckSquare,\n  ChevronDown,\n  Code,\n  Heading1,\n  Heading2,\n  Heading3,\n  ListOrdered,\n  type LucideIcon,\n  TextIcon,\n  TextQuote,\n} from 'lucide-react';\nimport { type FC, useEffect, useRef, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { type EditorInstance, useEditor } from '../novel';\n\nexport type SelectorItem = {\n  name: string;\n  icon: LucideIcon;\n  command: (editor: NonNullable<EditorInstance>) => void;\n  isActive: (editor: NonNullable<EditorInstance>) => boolean;\n};\n\nconst items: SelectorItem[] = [\n  {\n    name: 'Text',\n    icon: TextIcon,\n    command: (editor) => editor.chain().focus().clearNodes().run(),\n    isActive: (editor) =>\n      editor.isActive('paragraph') &&\n      !editor.isActive('bulletList') &&\n      !editor.isActive('orderedList'),\n  },\n  {\n    name: 'Heading 1',\n    icon: Heading1,\n    command: (editor) =>\n      editor.chain().focus().clearNodes().toggleHeading({ level: 1 }).run(),\n    isActive: (editor) => editor.isActive('heading', { level: 1 }),\n  },\n  {\n    name: 'Heading 2',\n    icon: Heading2,\n    command: (editor) =>\n      editor.chain().focus().clearNodes().toggleHeading({ level: 2 }).run(),\n    isActive: (editor) => editor.isActive('heading', { level: 2 }),\n  },\n  {\n    name: 'Heading 3',\n    icon: Heading3,\n    command: (editor) =>\n      editor.chain().focus().clearNodes().toggleHeading({ level: 3 }).run(),\n    isActive: (editor) => editor.isActive('heading', { level: 3 }),\n  },\n  {\n    name: 'To-do List',\n    icon: CheckSquare,\n    command: (editor) =>\n      editor.chain().focus().clearNodes().toggleTaskList().run(),\n    isActive: (editor) => editor.isActive('taskItem'),\n  },\n  {\n    name: 'Bullet List',\n    icon: ListOrdered,\n    command: (editor) =>\n      editor.chain().focus().clearNodes().toggleBulletList().run(),\n    isActive: (editor) => editor.isActive('bulletList'),\n  },\n  {\n    name: 'Numbered List',\n    icon: ListOrdered,\n    command: (editor) =>\n      editor.chain().focus().clearNodes().toggleOrderedList().run(),\n    isActive: (editor) => editor.isActive('orderedList'),\n  },\n  {\n    name: 'Quote',\n    icon: TextQuote,\n    command: (editor) =>\n      editor.chain().focus().clearNodes().toggleBlockquote().run(),\n    isActive: (editor) => editor.isActive('blockquote'),\n  },\n  {\n    name: 'Code',\n    icon: Code,\n    command: (editor) =>\n      editor.chain().focus().clearNodes().toggleCodeBlock().run(),\n    isActive: (editor) => editor.isActive('codeBlock'),\n  },\n];\n\n/**\n * Bubble-menu selector that converts the current block between paragraph,\n * headings, lists, quote and code.\n *\n * Uses `onMouseDown` + `preventDefault` on every interactive element so the\n * editor's selection is never cleared while the panel is open.\n */\nexport const NodeSelector: FC = () => {\n  const { editor } = useEditor();\n  const [isOpen, setIsOpen] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const content = useIntlayer('markdown-editor');\n\n  useEffect(() => {\n    if (!isOpen) return;\n    const handleOutsideMouseDown = (event: MouseEvent) => {\n      if (!containerRef.current?.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener('mousedown', handleOutsideMouseDown);\n    return () =>\n      document.removeEventListener('mousedown', handleOutsideMouseDown);\n  }, [isOpen]);\n\n  if (!editor) return null;\n\n  const activeItem = items.filter((item) => item.isActive(editor)).pop() ?? {\n    name: 'Multiple',\n  };\n\n  const getItemName = (name: string) => {\n    switch (name) {\n      case 'Text':\n        return content.text.value;\n      case 'Heading 1':\n        return content.heading1.value;\n      case 'Heading 2':\n        return content.heading2.value;\n      case 'Heading 3':\n        return content.heading3.value;\n      case 'To-do List':\n        return content.todoList.value;\n      case 'Bullet List':\n        return content.bulletList.value;\n      case 'Numbered List':\n        return content.numberedList.value;\n      case 'Quote':\n        return content.quote.value;\n      case 'Code':\n        return content.code.value;\n      case 'Multiple':\n        return content.multiple.value;\n      default:\n        return name;\n    }\n  };\n\n  return (\n    <div ref={containerRef} className=\"relative\">\n      <button\n        type=\"button\"\n        onMouseDown={(e) => {\n          e.preventDefault();\n          setIsOpen((prev) => !prev);\n        }}\n        className=\"flex items-center gap-1 whitespace-nowrap rounded-none px-3 py-1.5 text-sm hover:bg-accent\"\n      >\n        <span>{getItemName(activeItem.name)}</span>\n        <ChevronDown\n          className={cn('size-3 transition-transform', isOpen && 'rotate-180')}\n        />\n      </button>\n\n      {isOpen && (\n        <div className=\"absolute top-[calc(100%+0.5rem)] left-0 z-50 w-48 rounded-md border bg-popover p-1 shadow-md\">\n          {items.map((item) => (\n            <button\n              type=\"button\"\n              key={item.name}\n              onMouseDown={(e) => {\n                e.preventDefault();\n                item.command(editor);\n                setIsOpen(false);\n              }}\n              className=\"flex w-full cursor-pointer items-center justify-between rounded-sm px-2 py-1 text-sm hover:bg-accent\"\n            >\n              <div className=\"flex items-center space-x-2\">\n                <div className=\"rounded-sm border p-1\">\n                  <item.icon className=\"size-3\" />\n                </div>\n                <span>{getItemName(item.name)}</span>\n              </div>\n              {activeItem.name === item.name && <Check className=\"size-4\" />}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/MarkdownEditor/selectors/TextButtons.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextButtons.mjs","names":[],"sources":["../../../../../src/components/MarkdownEditor/selectors/TextButtons.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@components/Button';\nimport { cn } from '@utils/cn';\nimport {\n  BoldIcon,\n  CodeIcon,\n  ItalicIcon,\n  StrikethroughIcon,\n  UnderlineIcon,\n} from 'lucide-react';\nimport { useIntlayer } from 'react-intlayer';\nimport { EditorBubbleItem, useEditor } from '../novel';\nimport type { SelectorItem } from './NodeSelector';\n\n/**\n * Inline mark toggles (bold / italic / underline / strike / code) shown in the\n * bubble menu.\n */\nexport const TextButtons = () => {\n  const { editor } = useEditor();\n  const content = useIntlayer('markdown-editor');\n\n  if (!editor) return null;\n\n  const items: SelectorItem[] = [\n    {\n      name: 'bold',\n      isActive: (currentEditor) => currentEditor.isActive('bold'),\n      command: (currentEditor) =>\n        currentEditor.chain().focus().toggleBold().run(),\n      icon: BoldIcon,\n    },\n    {\n      name: 'italic',\n      isActive: (currentEditor) => currentEditor.isActive('italic'),\n      command: (currentEditor) =>\n        currentEditor.chain().focus().toggleItalic().run(),\n      icon: ItalicIcon,\n    },\n    {\n      name: 'underline',\n      isActive: (currentEditor) => currentEditor.isActive('underline'),\n      command: (currentEditor) =>\n        currentEditor.chain().focus().toggleUnderline().run(),\n      icon: UnderlineIcon,\n    },\n    {\n      name: 'strike',\n      isActive: (currentEditor) => currentEditor.isActive('strike'),\n      command: (currentEditor) =>\n        currentEditor.chain().focus().toggleStrike().run(),\n      icon: StrikethroughIcon,\n    },\n    {\n      name: 'code',\n      isActive: (currentEditor) => currentEditor.isActive('code'),\n      command: (currentEditor) =>\n        currentEditor.chain().focus().toggleCode().run(),\n      icon: CodeIcon,\n    },\n  ];\n\n  const getButtonLabel = (name: string) => {\n    switch (name) {\n      case 'bold':\n        return content.bold.value;\n      case 'italic':\n        return content.italic.value;\n      case 'underline':\n        return content.underline.value;\n      case 'strike':\n        return content.strike.value;\n      case 'code':\n        return content.code.value;\n      default:\n        return name;\n    }\n  };\n\n  return (\n    <div className=\"flex\">\n      {items.map((item) => (\n        <EditorBubbleItem\n          key={item.name}\n          onSelect={(selectedEditor) => item.command(selectedEditor)}\n        >\n          <Button\n            label={getButtonLabel(item.name)}\n            size=\"icon-sm\"\n            variant=\"hoverable\"\n            color=\"text\"\n            roundedSize=\"none\"\n            Icon={item.icon}\n            iconClassName={cn(item.isActive(editor) && 'text-blue-500')}\n          />\n        </EditorBubbleItem>\n      ))}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,MAAa,oBAAoB;CAC/B,MAAM,EAAE,WAAW,WAAW;CAC9B,MAAM,UAAU,YAAY,kBAAkB;AAE9C,KAAI,CAAC,OAAQ,QAAO;CAEpB,MAAM,QAAwB;EAC5B;GACE,MAAM;GACN,WAAW,kBAAkB,cAAc,SAAS,OAAO;GAC3D,UAAU,kBACR,cAAc,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,KAAK;GAClD,MAAM;GACP;EACD;GACE,MAAM;GACN,WAAW,kBAAkB,cAAc,SAAS,SAAS;GAC7D,UAAU,kBACR,cAAc,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK;GACpD,MAAM;GACP;EACD;GACE,MAAM;GACN,WAAW,kBAAkB,cAAc,SAAS,YAAY;GAChE,UAAU,kBACR,cAAc,OAAO,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK;GACvD,MAAM;GACP;EACD;GACE,MAAM;GACN,WAAW,kBAAkB,cAAc,SAAS,SAAS;GAC7D,UAAU,kBACR,cAAc,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK;GACpD,MAAM;GACP;EACD;GACE,MAAM;GACN,WAAW,kBAAkB,cAAc,SAAS,OAAO;GAC3D,UAAU,kBACR,cAAc,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,KAAK;GAClD,MAAM;GACP;EACF;CAED,MAAM,kBAAkB,SAAiB;AACvC,UAAQ,MAAR;GACE,KAAK,OACH,QAAO,QAAQ,KAAK;GACtB,KAAK,SACH,QAAO,QAAQ,OAAO;GACxB,KAAK,YACH,QAAO,QAAQ,UAAU;GAC3B,KAAK,SACH,QAAO,QAAQ,OAAO;GACxB,KAAK,OACH,QAAO,QAAQ,KAAK;GACtB,QACE,QAAO;;;AAIb,QACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,SACV,oBAAC,kBAAD;GAEE,WAAW,mBAAmB,KAAK,QAAQ,eAAe;aAE1D,oBAAC,QAAD;IACE,OAAO,eAAe,KAAK,KAAK;IAChC,MAAK;IACL,SAAQ;IACR,OAAM;IACN,aAAY;IACZ,MAAM,KAAK;IACX,eAAe,GAAG,KAAK,SAAS,OAAO,IAAI,gBAAgB;IAC3D;GACe,EAZZ,KAAK,KAYO,CACnB;EACE"}
+{"version":3,"file":"TextButtons.mjs","names":[],"sources":["../../../../../src/components/MarkdownEditor/selectors/TextButtons.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@components/Button';\nimport { cn } from '@utils/cn';\nimport {\n  BoldIcon,\n  CodeIcon,\n  ItalicIcon,\n  StrikethroughIcon,\n  UnderlineIcon,\n} from 'lucide-react';\nimport { useIntlayer } from 'react-intlayer';\nimport { EditorBubbleItem, useEditor } from '../novel';\nimport type { SelectorItem } from './NodeSelector';\n\n/**\n * Inline mark toggles (bold / italic / underline / strike / code) shown in the\n * bubble menu.\n */\nexport const TextButtons = () => {\n  const { editor } = useEditor();\n  const content = useIntlayer('markdown-editor');\n\n  if (!editor) return null;\n\n  const items: SelectorItem[] = [\n    {\n      name: 'bold',\n      isActive: (currentEditor) => currentEditor.isActive('bold'),\n      command: (currentEditor) =>\n        currentEditor.chain().focus().toggleBold().run(),\n      icon: BoldIcon,\n    },\n    {\n      name: 'italic',\n      isActive: (currentEditor) => currentEditor.isActive('italic'),\n      command: (currentEditor) =>\n        currentEditor.chain().focus().toggleItalic().run(),\n      icon: ItalicIcon,\n    },\n    {\n      name: 'underline',\n      isActive: (currentEditor) => currentEditor.isActive('underline'),\n      command: (currentEditor) =>\n        currentEditor.chain().focus().toggleUnderline().run(),\n      icon: UnderlineIcon,\n    },\n    {\n      name: 'strike',\n      isActive: (currentEditor) => currentEditor.isActive('strike'),\n      command: (currentEditor) =>\n        currentEditor.chain().focus().toggleStrike().run(),\n      icon: StrikethroughIcon,\n    },\n    {\n      name: 'code',\n      isActive: (currentEditor) => currentEditor.isActive('code'),\n      command: (currentEditor) =>\n        currentEditor.chain().focus().toggleCode().run(),\n      icon: CodeIcon,\n    },\n  ];\n\n  const getButtonLabel = (name: string) => {\n    switch (name) {\n      case 'bold':\n        return content.bold.value;\n      case 'italic':\n        return content.italic.value;\n      case 'underline':\n        return content.underline.value;\n      case 'strike':\n        return content.strike.value;\n      case 'code':\n        return content.code.value;\n      default:\n        return name;\n    }\n  };\n\n  return (\n    <div className=\"flex\">\n      {items.map((item) => (\n        <EditorBubbleItem\n          key={item.name}\n          onSelect={(selectedEditor) => item.command(selectedEditor)}\n        >\n          <Button\n            label={getButtonLabel(item.name)}\n            size=\"icon-sm\"\n            variant=\"hoverable\"\n            color=\"text\"\n            roundedSize=\"none\"\n            Icon={item.icon}\n            iconClassName={cn(item.isActive(editor) && 'text-blue-500')}\n          />\n        </EditorBubbleItem>\n      ))}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,MAAa,oBAAoB;CAC/B,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,UAAU,YAAY,iBAAiB;CAE7C,IAAI,CAAC,QAAQ,OAAO;CAEpB,MAAM,QAAwB;EAC5B;GACE,MAAM;GACN,WAAW,kBAAkB,cAAc,SAAS,MAAM;GAC1D,UAAU,kBACR,cAAc,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,CAAC,IAAI;GACjD,MAAM;EACR;EACA;GACE,MAAM;GACN,WAAW,kBAAkB,cAAc,SAAS,QAAQ;GAC5D,UAAU,kBACR,cAAc,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,aAAa,CAAC,CAAC,IAAI;GACnD,MAAM;EACR;EACA;GACE,MAAM;GACN,WAAW,kBAAkB,cAAc,SAAS,WAAW;GAC/D,UAAU,kBACR,cAAc,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,gBAAgB,CAAC,CAAC,IAAI;GACtD,MAAM;EACR;EACA;GACE,MAAM;GACN,WAAW,kBAAkB,cAAc,SAAS,QAAQ;GAC5D,UAAU,kBACR,cAAc,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,aAAa,CAAC,CAAC,IAAI;GACnD,MAAM;EACR;EACA;GACE,MAAM;GACN,WAAW,kBAAkB,cAAc,SAAS,MAAM;GAC1D,UAAU,kBACR,cAAc,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,CAAC,IAAI;GACjD,MAAM;EACR;CACF;CAEA,MAAM,kBAAkB,SAAiB;EACvC,QAAQ,MAAR;GACE,KAAK,QACH,OAAO,QAAQ,KAAK;GACtB,KAAK,UACH,OAAO,QAAQ,OAAO;GACxB,KAAK,aACH,OAAO,QAAQ,UAAU;GAC3B,KAAK,UACH,OAAO,QAAQ,OAAO;GACxB,KAAK,QACH,OAAO,QAAQ,KAAK;GACtB,SACE,OAAO;EACX;CACF;CAEA,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,SACV,oBAAC,kBAAD;GAEE,WAAW,mBAAmB,KAAK,QAAQ,cAAc;aAEzD,oBAAC,QAAD;IACE,OAAO,eAAe,KAAK,IAAI;IAC/B,MAAK;IACL,SAAQ;IACR,OAAM;IACN,aAAY;IACZ,MAAM,KAAK;IACX,eAAe,GAAG,KAAK,SAAS,MAAM,KAAK,eAAe;GAC3D;EACe,GAZX,KAAK,IAYM,CACnB;CACE;AAET"}

package/dist/esm/components/MarkdownEditor/slashCommand.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"slashCommand.mjs","names":[],"sources":["../../../../src/components/MarkdownEditor/slashCommand.tsx"],"sourcesContent":["import { YoutubeLogo } from '@components/SocialNetworks';\nimport {\n  CheckSquare,\n  Code,\n  Heading1,\n  Heading2,\n  Heading3,\n  ImageIcon,\n  List,\n  ListOrdered,\n  Text,\n  TextQuote,\n} from 'lucide-react';\nimport {\n  Command,\n  createSuggestionItems,\n  renderItems,\n  type SuggestionItem,\n  type UploadFn,\n} from './novel';\n\n/**\n * Builds the list of slash-command suggestions. The image command needs the\n * runtime `uploadFn`, hence the factory.\n *\n * @param uploadFn - Novel upload handler used by the \"Image\" command.\n * @param content - The internationalized content object from useIntlayer.\n */\nexport const getSuggestionItems = (\n  uploadFn: UploadFn,\n  content: any\n): SuggestionItem[] =>\n  createSuggestionItems([\n    {\n      title: content.text.value,\n      description: content.textDesc.value,\n      searchTerms: ['p', 'paragraph'],\n      icon: <Text className=\"size-10\" />,\n      command: ({ editor, range }) => {\n        editor\n          .chain()\n          .focus()\n          .deleteRange(range)\n          .toggleNode('paragraph', 'paragraph')\n          .run();\n      },\n    },\n    {\n      title: content.todoList.value,\n      description: content.todoListDesc.value,\n      searchTerms: ['todo', 'task', 'list', 'check', 'checkbox'],\n      icon: <CheckSquare className=\"size-10\" />,\n      command: ({ editor, range }) => {\n        editor.chain().focus().deleteRange(range).toggleTaskList().run();\n      },\n    },\n    {\n      title: content.heading1.value,\n      description: content.heading1Desc.value,\n      searchTerms: ['title', 'big', 'large'],\n      icon: <Heading1 className=\"size-10\" />,\n      command: ({ editor, range }) => {\n        editor\n          .chain()\n          .focus()\n          .deleteRange(range)\n          .setNode('heading', { level: 1 })\n          .run();\n      },\n    },\n    {\n      title: content.heading2.value,\n      description: content.heading2Desc.value,\n      searchTerms: ['subtitle', 'medium'],\n      icon: <Heading2 className=\"size-10\" />,\n      command: ({ editor, range }) => {\n        editor\n          .chain()\n          .focus()\n          .deleteRange(range)\n          .setNode('heading', { level: 2 })\n          .run();\n      },\n    },\n    {\n      title: content.heading3.value,\n      description: content.heading3Desc.value,\n      searchTerms: ['subtitle', 'small'],\n      icon: <Heading3 className=\"size-10\" />,\n      command: ({ editor, range }) => {\n        editor\n          .chain()\n          .focus()\n          .deleteRange(range)\n          .setNode('heading', { level: 3 })\n          .run();\n      },\n    },\n    {\n      title: content.bulletList.value,\n      description: content.bulletListDesc.value,\n      searchTerms: ['unordered', 'point'],\n      icon: <List className=\"size-10\" />,\n      command: ({ editor, range }) => {\n        editor.chain().focus().deleteRange(range).toggleBulletList().run();\n      },\n    },\n    {\n      title: content.numberedList.value,\n      description: content.numberedListDesc.value,\n      searchTerms: ['ordered'],\n      icon: <ListOrdered className=\"size-10\" />,\n      command: ({ editor, range }) => {\n        editor.chain().focus().deleteRange(range).toggleOrderedList().run();\n      },\n    },\n    {\n      title: content.quote.value,\n      description: content.quoteDesc.value,\n      searchTerms: ['blockquote'],\n      icon: <TextQuote className=\"size-10\" />,\n      command: ({ editor, range }) =>\n        editor\n          .chain()\n          .focus()\n          .deleteRange(range)\n          .toggleNode('paragraph', 'paragraph')\n          .toggleBlockquote()\n          .run(),\n    },\n    {\n      title: content.code.value,\n      description: content.codeDesc.value,\n      searchTerms: ['codeblock'],\n      icon: <Code className=\"size-10\" />,\n      command: ({ editor, range }) =>\n        editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),\n    },\n    {\n      title: content.image.value,\n      description: content.imageDesc.value,\n      searchTerms: ['photo', 'picture', 'media'],\n      icon: <ImageIcon className=\"size-10\" />,\n      command: ({ editor, range }) => {\n        editor.chain().focus().deleteRange(range).run();\n        const input = document.createElement('input');\n        input.type = 'file';\n        input.accept = 'image/*';\n        input.onchange = () => {\n          if (input.files?.length) {\n            const file = input.files[0];\n            const pos = editor.view.state.selection.from;\n            uploadFn(file, editor.view, pos);\n          }\n        };\n        input.click();\n      },\n    },\n    {\n      title: content.youtube.value,\n      description: content.youtubeDesc.value,\n      searchTerms: ['video', 'youtube', 'embed'],\n      icon: <YoutubeLogo className=\"size-10\" />,\n      command: ({ editor, range }) => {\n        const videoLink = prompt(content.youtubePrompt.value);\n        // From https://regexr.com/3dj5t\n        const ytRegex =\n          /^((?:https?:)?\\/\\/)?((?:www|m)\\.)?((?:youtube\\.com|youtu.be))(\\/(?:[\\w-]+\\?v=|embed\\/|v\\/)?)([\\w-]+)(\\S+)?$/;\n\n        if (videoLink && ytRegex.test(videoLink)) {\n          editor\n            .chain()\n            .focus()\n            .deleteRange(range)\n            .setYoutubeVideo({ src: videoLink })\n            .run();\n        } else if (videoLink !== null) {\n          alert(content.youtubeError.value);\n        }\n      },\n    },\n  ]);\n\n/**\n * Builds the slash-command extension wired to the given upload handler.\n *\n * @param uploadFn - Novel upload handler used by the \"Image\" command.\n * @param content - The internationalized content object from useIntlayer.\n */\nexport const createSlashCommand = (uploadFn: UploadFn, content: any) => {\n  const suggestionItems = getSuggestionItems(uploadFn, content);\n\n  const slashCommand = Command.configure({\n    suggestion: {\n      items: () => suggestionItems,\n      render: renderItems,\n    },\n  });\n\n  return { slashCommand, suggestionItems };\n};\n"],"mappings":"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"}
+{"version":3,"file":"slashCommand.mjs","names":[],"sources":["../../../../src/components/MarkdownEditor/slashCommand.tsx"],"sourcesContent":["import { YoutubeLogo } from '@components/SocialNetworks';\nimport {\n  CheckSquare,\n  Code,\n  Heading1,\n  Heading2,\n  Heading3,\n  ImageIcon,\n  List,\n  ListOrdered,\n  Text,\n  TextQuote,\n} from 'lucide-react';\nimport {\n  Command,\n  createSuggestionItems,\n  renderItems,\n  type SuggestionItem,\n  type UploadFn,\n} from './novel';\n\n/**\n * Builds the list of slash-command suggestions. The image command needs the\n * runtime `uploadFn`, hence the factory.\n *\n * @param uploadFn - Novel upload handler used by the \"Image\" command.\n * @param content - The internationalized content object from useIntlayer.\n */\nexport const getSuggestionItems = (\n  uploadFn: UploadFn,\n  content: any\n): SuggestionItem[] =>\n  createSuggestionItems([\n    {\n      title: content.text.value,\n      description: content.textDesc.value,\n      searchTerms: ['p', 'paragraph'],\n      icon: <Text className=\"size-10\" />,\n      command: ({ editor, range }) => {\n        editor\n          .chain()\n          .focus()\n          .deleteRange(range)\n          .toggleNode('paragraph', 'paragraph')\n          .run();\n      },\n    },\n    {\n      title: content.todoList.value,\n      description: content.todoListDesc.value,\n      searchTerms: ['todo', 'task', 'list', 'check', 'checkbox'],\n      icon: <CheckSquare className=\"size-10\" />,\n      command: ({ editor, range }) => {\n        editor.chain().focus().deleteRange(range).toggleTaskList().run();\n      },\n    },\n    {\n      title: content.heading1.value,\n      description: content.heading1Desc.value,\n      searchTerms: ['title', 'big', 'large'],\n      icon: <Heading1 className=\"size-10\" />,\n      command: ({ editor, range }) => {\n        editor\n          .chain()\n          .focus()\n          .deleteRange(range)\n          .setNode('heading', { level: 1 })\n          .run();\n      },\n    },\n    {\n      title: content.heading2.value,\n      description: content.heading2Desc.value,\n      searchTerms: ['subtitle', 'medium'],\n      icon: <Heading2 className=\"size-10\" />,\n      command: ({ editor, range }) => {\n        editor\n          .chain()\n          .focus()\n          .deleteRange(range)\n          .setNode('heading', { level: 2 })\n          .run();\n      },\n    },\n    {\n      title: content.heading3.value,\n      description: content.heading3Desc.value,\n      searchTerms: ['subtitle', 'small'],\n      icon: <Heading3 className=\"size-10\" />,\n      command: ({ editor, range }) => {\n        editor\n          .chain()\n          .focus()\n          .deleteRange(range)\n          .setNode('heading', { level: 3 })\n          .run();\n      },\n    },\n    {\n      title: content.bulletList.value,\n      description: content.bulletListDesc.value,\n      searchTerms: ['unordered', 'point'],\n      icon: <List className=\"size-10\" />,\n      command: ({ editor, range }) => {\n        editor.chain().focus().deleteRange(range).toggleBulletList().run();\n      },\n    },\n    {\n      title: content.numberedList.value,\n      description: content.numberedListDesc.value,\n      searchTerms: ['ordered'],\n      icon: <ListOrdered className=\"size-10\" />,\n      command: ({ editor, range }) => {\n        editor.chain().focus().deleteRange(range).toggleOrderedList().run();\n      },\n    },\n    {\n      title: content.quote.value,\n      description: content.quoteDesc.value,\n      searchTerms: ['blockquote'],\n      icon: <TextQuote className=\"size-10\" />,\n      command: ({ editor, range }) =>\n        editor\n          .chain()\n          .focus()\n          .deleteRange(range)\n          .toggleNode('paragraph', 'paragraph')\n          .toggleBlockquote()\n          .run(),\n    },\n    {\n      title: content.code.value,\n      description: content.codeDesc.value,\n      searchTerms: ['codeblock'],\n      icon: <Code className=\"size-10\" />,\n      command: ({ editor, range }) =>\n        editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),\n    },\n    {\n      title: content.image.value,\n      description: content.imageDesc.value,\n      searchTerms: ['photo', 'picture', 'media'],\n      icon: <ImageIcon className=\"size-10\" />,\n      command: ({ editor, range }) => {\n        editor.chain().focus().deleteRange(range).run();\n        const input = document.createElement('input');\n        input.type = 'file';\n        input.accept = 'image/*';\n        input.onchange = () => {\n          if (input.files?.length) {\n            const file = input.files[0];\n            const pos = editor.view.state.selection.from;\n            uploadFn(file, editor.view, pos);\n          }\n        };\n        input.click();\n      },\n    },\n    {\n      title: content.youtube.value,\n      description: content.youtubeDesc.value,\n      searchTerms: ['video', 'youtube', 'embed'],\n      icon: <YoutubeLogo className=\"size-10\" />,\n      command: ({ editor, range }) => {\n        const videoLink = prompt(content.youtubePrompt.value);\n        // From https://regexr.com/3dj5t\n        const ytRegex =\n          /^((?:https?:)?\\/\\/)?((?:www|m)\\.)?((?:youtube\\.com|youtu.be))(\\/(?:[\\w-]+\\?v=|embed\\/|v\\/)?)([\\w-]+)(\\S+)?$/;\n\n        if (videoLink && ytRegex.test(videoLink)) {\n          editor\n            .chain()\n            .focus()\n            .deleteRange(range)\n            .setYoutubeVideo({ src: videoLink })\n            .run();\n        } else if (videoLink !== null) {\n          alert(content.youtubeError.value);\n        }\n      },\n    },\n  ]);\n\n/**\n * Builds the slash-command extension wired to the given upload handler.\n *\n * @param uploadFn - Novel upload handler used by the \"Image\" command.\n * @param content - The internationalized content object from useIntlayer.\n */\nexport const createSlashCommand = (uploadFn: UploadFn, content: any) => {\n  const suggestionItems = getSuggestionItems(uploadFn, content);\n\n  const slashCommand = Command.configure({\n    suggestion: {\n      items: () => suggestionItems,\n      render: renderItems,\n    },\n  });\n\n  return { slashCommand, suggestionItems };\n};\n"],"mappings":"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"}

package/dist/esm/components/MaxHeightSmoother/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/MaxHeightSmoother/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { CSSProperties, FC, HTMLAttributes, ReactNode } from 'react';\n\n/**\n * Props for the MaxHeightSmoother component\n */\ninterface MaxHeightSmootherProps extends HTMLAttributes<HTMLDivElement> {\n  /** Content to render within the smoother container */\n  children: ReactNode;\n  /** Controls collapse state. When true, content is collapsed; when false, expanded; when undefined, relies on hover/focus behavior */\n  isHidden?: boolean;\n  /** Enable expand-on-hover behavior */\n  isOverable?: boolean;\n  /** Enable expand-on-focus behavior for accessibility and keyboard navigation */\n  isFocusable?: boolean;\n  /** Minimum height in pixels for the collapsed state */\n  minHeight?: number;\n}\n\n/**\n * MaxHeightSmoother Component\n *\n * A sophisticated container component that provides smooth height transitions\n * for collapsible content. Implemented entirely in CSS — no client-side\n * JavaScript, hooks, or event listeners — making it compatible with React\n * Server Components and Next.js App Router without `'use client'`.\n *\n * @component\n * @example\n * Basic controlled usage:\n * ```tsx\n * const [isCollapsed, setIsCollapsed] = useState(true);\n *\n * <MaxHeightSmoother isHidden={isCollapsed}>\n *   <div>Your collapsible content here</div>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * Hover-triggered expansion:\n * ```tsx\n * <MaxHeightSmoother isOverable>\n *   <p>This content expands when you hover over the container.</p>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * Focus-triggered expansion (keyboard accessible):\n * ```tsx\n * <MaxHeightSmoother isFocusable>\n *   <p>Tab to focus this container to expand the content.</p>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * With minimum height for preview:\n * ```tsx\n * <MaxHeightSmoother isOverable minHeight={100} className=\"border rounded-lg p-4\">\n *   <h3>Article Preview</h3>\n *   <p>This shows a preview of the content. Hover to see all.</p>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * Combined hover and focus:\n * ```tsx\n * <MaxHeightSmoother isOverable isFocusable minHeight={80}>\n *   <h4>Interactive Card</h4>\n *   <p>Expands on both hover and keyboard focus.</p>\n * </MaxHeightSmoother>\n * ```\n *\n * ## Animation Strategies\n *\n * ### Strategy A — `grid-template-rows` (`minHeight === 0`)\n * Transitions between `grid-rows-[0fr]` and `grid-rows-[1fr]`.\n * Clean and performant; no fixed height ceiling required.\n * Requires `min-h-0` on the inner wrapper so the grid track can fully collapse.\n *\n * ### Strategy B — `max-height` via CSS custom properties (`minHeight > 0`)\n * When a visible preview floor is required, `grid-template-rows` produces a\n * \"dead time\" artifact: the track silently grows from 0 → minHeight before\n * anything visible happens, resulting in a perceived snap.\n *\n * `max-height` sidesteps this entirely — the transition starts from the\n * already-visible floor value, producing a single continuous expansion.\n *\n * The collapsed floor (`--mhs-collapsed`) and expanded ceiling\n * (`--mhs-expanded`) are injected as CSS variables via inline style,\n * NOT as `max-height` directly. This lets Tailwind own `max-height`\n * entirely, so `:hover` and `:focus-within` can override it freely\n * without fighting inline-style specificity.\n *\n * Both variables are consumer-overridable via CSS:\n * ```css\n * .my-container {\n *   --mhs-collapsed: 80px;\n *   --mhs-expanded: 1200px;\n * }\n * ```\n *\n * Trade-off: easing is applied over [minHeight → 3000px], not the real\n * content height. For typical content this is imperceptible. If pixel-perfect\n * easing is critical, use a JS-measured height with a controlled `isHidden`\n * prop and a `style={{ maxHeight }}` override instead.\n *\n * ## Interaction Modes\n *\n * 1. **Controlled** — Pass `isHidden` for external state control (e.g. accordion)\n * 2. **Hover** — Set `isOverable` for mouse hover expansion\n * 3. **Focus** — Set `isFocusable` for keyboard focus expansion\n * 4. **Combined** — Use `isOverable` and `isFocusable` together\n *\n * ## Accessibility\n *\n * - `role=\"button\"` and `tabIndex={0}` when `isFocusable` is true\n * - `aria-expanded` reflects the current disclosure state\n * - Focus expansion via `:focus-within` CSS pseudo-class\n * - `motion-reduce:transition-none` respects `prefers-reduced-motion`\n *\n * Note: because this component relies on CSS pseudo-classes for interaction,\n * keyboard toggle (Enter / Space) is not supported in uncontrolled mode.\n * For full keyboard toggle behaviour, manage `isHidden` externally and\n * wire an `onClick` / `onKeyDown` handler on the parent.\n *\n * ## Performance\n *\n * - Pure CSS animations — no JavaScript timers or DOM measurements\n * - No `'use client'` directive required\n * - Compatible with React Server Components and Next.js App Router\n * - GPU-accelerated transitions\n *\n * @param props - Component props extending HTML div attributes\n * @param props.children - Content to render within the container\n * @param props.isHidden - Controlled collapse state (`true` = collapsed, `false` = expanded)\n * @param props.isOverable - Enable hover-to-expand behaviour\n * @param props.isFocusable - Enable focus-to-expand behaviour with keyboard navigation\n * @param props.minHeight - Minimum height in pixels for the collapsed state (default: 0)\n * @param props.className - Additional CSS classes\n * @param props.style - Inline styles (CSS variable overrides will be merged)\n *\n * @returns A smooth height-transitioning container with configurable interaction modes\n */\nexport const MaxHeightSmoother: FC<MaxHeightSmootherProps> = ({\n  children,\n  isHidden,\n  className = '',\n  isOverable = false,\n  isFocusable = false,\n  minHeight = 0,\n  ...props\n}) => (\n  <div\n    aria-hidden={isFocusable ? isHidden : undefined}\n    tabIndex={isFocusable ? 0 : undefined}\n    role={isFocusable ? 'button' : 'none'}\n    className={cn(\n      'group/height-smoother relative grid w-full grid-rows-[0fr] overflow-hidden transition-all duration-700 ease-in-out',\n      typeof isHidden !== 'undefined' &&\n        !isHidden &&\n        'grid-rows-[1fr] overflow-x-auto',\n      isOverable && 'hover:grid-rows-[1fr] hover:overflow-x-auto',\n      isFocusable &&\n        'focus-within:grid-rows-[1fr] focus-within:overflow-x-auto focus:grid-rows-[1fr] focus:overflow-x-auto',\n      className\n    )}\n    {...props}\n  >\n    <div\n      style={{\n        minHeight: `${minHeight}px`,\n      }}\n      className={cn(\n        isOverable && 'group-hover/height-smoother:visible',\n        isFocusable && 'group-focus/height-smoother:visible',\n        className\n      )}\n    >\n      {children}\n    </div>\n  </div>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+IA,MAAa,qBAAiD,EAC5D,UACA,UACA,YAAY,IACZ,aAAa,OACb,cAAc,OACd,YAAY,GACZ,GAAG,YAEH,oBAAC,OAAD;CACE,eAAa,cAAc,WAAW;CACtC,UAAU,cAAc,IAAI;CAC5B,MAAM,cAAc,WAAW;CAC/B,WAAW,GACT,sHACA,OAAO,aAAa,eAClB,CAAC,YACD,mCACF,cAAc,+CACd,eACE,yGACF,UACD;CACD,GAAI;WAEJ,oBAAC,OAAD;EACE,OAAO,EACL,WAAW,GAAG,UAAU,KACzB;EACD,WAAW,GACT,cAAc,uCACd,eAAe,uCACf,UACD;EAEA;EACG;CACF"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/MaxHeightSmoother/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { CSSProperties, FC, HTMLAttributes, ReactNode } from 'react';\n\n/**\n * Props for the MaxHeightSmoother component\n */\ninterface MaxHeightSmootherProps extends HTMLAttributes<HTMLDivElement> {\n  /** Content to render within the smoother container */\n  children: ReactNode;\n  /** Controls collapse state. When true, content is collapsed; when false, expanded; when undefined, relies on hover/focus behavior */\n  isHidden?: boolean;\n  /** Enable expand-on-hover behavior */\n  isOverable?: boolean;\n  /** Enable expand-on-focus behavior for accessibility and keyboard navigation */\n  isFocusable?: boolean;\n  /** Minimum height in pixels for the collapsed state */\n  minHeight?: number;\n}\n\n/**\n * MaxHeightSmoother Component\n *\n * A sophisticated container component that provides smooth height transitions\n * for collapsible content. Implemented entirely in CSS — no client-side\n * JavaScript, hooks, or event listeners — making it compatible with React\n * Server Components and Next.js App Router without `'use client'`.\n *\n * @component\n * @example\n * Basic controlled usage:\n * ```tsx\n * const [isCollapsed, setIsCollapsed] = useState(true);\n *\n * <MaxHeightSmoother isHidden={isCollapsed}>\n *   <div>Your collapsible content here</div>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * Hover-triggered expansion:\n * ```tsx\n * <MaxHeightSmoother isOverable>\n *   <p>This content expands when you hover over the container.</p>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * Focus-triggered expansion (keyboard accessible):\n * ```tsx\n * <MaxHeightSmoother isFocusable>\n *   <p>Tab to focus this container to expand the content.</p>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * With minimum height for preview:\n * ```tsx\n * <MaxHeightSmoother isOverable minHeight={100} className=\"border rounded-lg p-4\">\n *   <h3>Article Preview</h3>\n *   <p>This shows a preview of the content. Hover to see all.</p>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * Combined hover and focus:\n * ```tsx\n * <MaxHeightSmoother isOverable isFocusable minHeight={80}>\n *   <h4>Interactive Card</h4>\n *   <p>Expands on both hover and keyboard focus.</p>\n * </MaxHeightSmoother>\n * ```\n *\n * ## Animation Strategies\n *\n * ### Strategy A — `grid-template-rows` (`minHeight === 0`)\n * Transitions between `grid-rows-[0fr]` and `grid-rows-[1fr]`.\n * Clean and performant; no fixed height ceiling required.\n * Requires `min-h-0` on the inner wrapper so the grid track can fully collapse.\n *\n * ### Strategy B — `max-height` via CSS custom properties (`minHeight > 0`)\n * When a visible preview floor is required, `grid-template-rows` produces a\n * \"dead time\" artifact: the track silently grows from 0 → minHeight before\n * anything visible happens, resulting in a perceived snap.\n *\n * `max-height` sidesteps this entirely — the transition starts from the\n * already-visible floor value, producing a single continuous expansion.\n *\n * The collapsed floor (`--mhs-collapsed`) and expanded ceiling\n * (`--mhs-expanded`) are injected as CSS variables via inline style,\n * NOT as `max-height` directly. This lets Tailwind own `max-height`\n * entirely, so `:hover` and `:focus-within` can override it freely\n * without fighting inline-style specificity.\n *\n * Both variables are consumer-overridable via CSS:\n * ```css\n * .my-container {\n *   --mhs-collapsed: 80px;\n *   --mhs-expanded: 1200px;\n * }\n * ```\n *\n * Trade-off: easing is applied over [minHeight → 3000px], not the real\n * content height. For typical content this is imperceptible. If pixel-perfect\n * easing is critical, use a JS-measured height with a controlled `isHidden`\n * prop and a `style={{ maxHeight }}` override instead.\n *\n * ## Interaction Modes\n *\n * 1. **Controlled** — Pass `isHidden` for external state control (e.g. accordion)\n * 2. **Hover** — Set `isOverable` for mouse hover expansion\n * 3. **Focus** — Set `isFocusable` for keyboard focus expansion\n * 4. **Combined** — Use `isOverable` and `isFocusable` together\n *\n * ## Accessibility\n *\n * - `role=\"button\"` and `tabIndex={0}` when `isFocusable` is true\n * - `aria-expanded` reflects the current disclosure state\n * - Focus expansion via `:focus-within` CSS pseudo-class\n * - `motion-reduce:transition-none` respects `prefers-reduced-motion`\n *\n * Note: because this component relies on CSS pseudo-classes for interaction,\n * keyboard toggle (Enter / Space) is not supported in uncontrolled mode.\n * For full keyboard toggle behaviour, manage `isHidden` externally and\n * wire an `onClick` / `onKeyDown` handler on the parent.\n *\n * ## Performance\n *\n * - Pure CSS animations — no JavaScript timers or DOM measurements\n * - No `'use client'` directive required\n * - Compatible with React Server Components and Next.js App Router\n * - GPU-accelerated transitions\n *\n * @param props - Component props extending HTML div attributes\n * @param props.children - Content to render within the container\n * @param props.isHidden - Controlled collapse state (`true` = collapsed, `false` = expanded)\n * @param props.isOverable - Enable hover-to-expand behaviour\n * @param props.isFocusable - Enable focus-to-expand behaviour with keyboard navigation\n * @param props.minHeight - Minimum height in pixels for the collapsed state (default: 0)\n * @param props.className - Additional CSS classes\n * @param props.style - Inline styles (CSS variable overrides will be merged)\n *\n * @returns A smooth height-transitioning container with configurable interaction modes\n */\nexport const MaxHeightSmoother: FC<MaxHeightSmootherProps> = ({\n  children,\n  isHidden,\n  className = '',\n  isOverable = false,\n  isFocusable = false,\n  minHeight = 0,\n  ...props\n}) => (\n  <div\n    aria-hidden={isFocusable ? isHidden : undefined}\n    tabIndex={isFocusable ? 0 : undefined}\n    role={isFocusable ? 'button' : 'none'}\n    className={cn(\n      'group/height-smoother relative grid w-full grid-rows-[0fr] overflow-hidden transition-all duration-700 ease-in-out',\n      typeof isHidden !== 'undefined' &&\n        !isHidden &&\n        'grid-rows-[1fr] overflow-x-auto',\n      isOverable && 'hover:grid-rows-[1fr] hover:overflow-x-auto',\n      isFocusable &&\n        'focus-within:grid-rows-[1fr] focus-within:overflow-x-auto focus:grid-rows-[1fr] focus:overflow-x-auto',\n      className\n    )}\n    {...props}\n  >\n    <div\n      style={{\n        minHeight: `${minHeight}px`,\n      }}\n      className={cn(\n        isOverable && 'group-hover/height-smoother:visible',\n        isFocusable && 'group-focus/height-smoother:visible',\n        className\n      )}\n    >\n      {children}\n    </div>\n  </div>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+IA,MAAa,qBAAiD,EAC5D,UACA,UACA,YAAY,IACZ,aAAa,OACb,cAAc,OACd,YAAY,GACZ,GAAG,YAEH,oBAAC,OAAD;CACE,eAAa,cAAc,WAAW;CACtC,UAAU,cAAc,IAAI;CAC5B,MAAM,cAAc,WAAW;CAC/B,WAAW,GACT,sHACA,OAAO,aAAa,eAClB,CAAC,YACD,mCACF,cAAc,+CACd,eACE,yGACF,SACF;CACA,GAAI;WAEJ,oBAAC,OAAD;EACE,OAAO,EACL,WAAW,GAAG,UAAU,IAC1B;EACA,WAAW,GACT,cAAc,uCACd,eAAe,uCACf,SACF;EAEC;CACE;AACF"}

package/dist/esm/components/MaxWidthSmoother/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/MaxWidthSmoother/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { HTMLAttributes } from 'react';\n\ntype Align = 'left' | 'right';\n\ntype MaxWidthSmootherProps = HTMLAttributes<HTMLDivElement> & {\n  isHidden: boolean;\n  minWidth?: number;\n  align?: Align;\n  isDisabled?: boolean;\n};\n\nexport const MaxWidthSmoother = ({\n  children,\n  isHidden,\n  minWidth = 0,\n  align = 'left',\n  isDisabled = false,\n  className,\n  ...props\n}: MaxWidthSmootherProps) => {\n  const isCurrentlyHidden = isHidden && !isDisabled;\n\n  return (\n    <div\n      className={cn(\n        'relative grid h-full grid-cols-[0fr] overflow-x-hidden overflow-y-hidden transition-all duration-500 ease-in-out',\n        isCurrentlyHidden ? '' : 'grid-cols-[1fr]',\n        className\n      )}\n      aria-hidden={isCurrentlyHidden}\n      inert={isCurrentlyHidden ? true : undefined}\n      {...props}\n    >\n      <div\n        style={{\n          minWidth: `${minWidth}px`,\n        }}\n        className={cn(align === 'right' && 'ml-auto')}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;AAYA,MAAa,oBAAoB,EAC/B,UACA,UACA,WAAW,GACX,QAAQ,QACR,aAAa,OACb,WACA,GAAG,YACwB;CAC3B,MAAM,oBAAoB,YAAY,CAAC;AAEvC,QACE,oBAAC,OAAD;EACE,WAAW,GACT,oHACA,oBAAoB,KAAK,mBACzB,UACD;EACD,eAAa;EACb,OAAO,oBAAoB,OAAO;EAClC,GAAI;YAEJ,oBAAC,OAAD;GACE,OAAO,EACL,UAAU,GAAG,SAAS,KACvB;GACD,WAAW,GAAG,UAAU,WAAW,UAAU;GAE5C;GACG;EACF"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/MaxWidthSmoother/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { HTMLAttributes } from 'react';\n\ntype Align = 'left' | 'right';\n\ntype MaxWidthSmootherProps = HTMLAttributes<HTMLDivElement> & {\n  isHidden: boolean;\n  minWidth?: number;\n  align?: Align;\n  isDisabled?: boolean;\n};\n\nexport const MaxWidthSmoother = ({\n  children,\n  isHidden,\n  minWidth = 0,\n  align = 'left',\n  isDisabled = false,\n  className,\n  ...props\n}: MaxWidthSmootherProps) => {\n  const isCurrentlyHidden = isHidden && !isDisabled;\n\n  return (\n    <div\n      className={cn(\n        'relative grid h-full grid-cols-[0fr] overflow-x-hidden overflow-y-hidden transition-all duration-500 ease-in-out',\n        isCurrentlyHidden ? '' : 'grid-cols-[1fr]',\n        className\n      )}\n      aria-hidden={isCurrentlyHidden}\n      inert={isCurrentlyHidden ? true : undefined}\n      {...props}\n    >\n      <div\n        style={{\n          minWidth: `${minWidth}px`,\n        }}\n        className={cn(align === 'right' && 'ml-auto')}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;AAYA,MAAa,oBAAoB,EAC/B,UACA,UACA,WAAW,GACX,QAAQ,QACR,aAAa,OACb,WACA,GAAG,YACwB;CAC3B,MAAM,oBAAoB,YAAY,CAAC;CAEvC,OACE,oBAAC,OAAD;EACE,WAAW,GACT,oHACA,oBAAoB,KAAK,mBACzB,SACF;EACA,eAAa;EACb,OAAO,oBAAoB,OAAO;EAClC,GAAI;YAEJ,oBAAC,OAAD;GACE,OAAO,EACL,UAAU,GAAG,SAAS,IACxB;GACA,WAAW,GAAG,UAAU,WAAW,SAAS;GAE3C;EACE;CACF;AAET"}

package/dist/esm/components/Modal/Modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.mjs","names":["m"],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { useGetElementOrWindow, useScrollBlockage } from '@hooks/index';\nimport { cn } from '@utils/cn';\nimport { cva } from 'class-variance-authority';\nimport { motion as m } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport { type FC, type ReactNode, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Button } from '../Button';\nimport { Container, type ContainerProps } from '../Container';\nimport { H3 } from '../Headers';\n\n/**\n * Enumeration of available modal sizes\n */\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'unset';\n\ntype ModalProps = {\n  children: ReactNode;\n  isOpen: boolean;\n  onClose?: () => void;\n  container?: HTMLElement;\n  disableScroll?: boolean;\n  hasCloseButton?: boolean;\n  title?: ReactNode;\n  size?: ModalSize | `${ModalSize}`;\n  /**\n   * Defines if the modal content area is scrollable.\n   */\n  isScrollable?: boolean | 'x' | 'y';\n} & Partial<\n  Pick<\n    ContainerProps,\n    | 'className'\n    | 'transparency'\n    | 'border'\n    | 'background'\n    | 'roundedSize'\n    | 'borderColor'\n    | 'padding'\n    | 'separator'\n    | 'gap'\n  >\n>;\n\nconst modalVariants = cva(\n  'flex cursor-default flex-col overflow-hidden shadow-sm',\n  {\n    variants: {\n      size: {\n        sm: 'h-auto max-h-[30vh] w-[95vw] max-w-xl',\n        md: 'h-auto max-h-[50vh] w-[95vw] max-w-xl',\n        lg: 'h-auto max-h-[70vh] w-[95vw] max-w-4xl',\n        xl: 'h-auto max-h-[95vh] w-[95vw] max-w-6xl',\n        unset: 'h-auto max-h-[95vh] w-[95vw]',\n      },\n    },\n    defaultVariants: {\n      size: 'unset',\n    },\n  }\n);\n\n// Mapped from Container/index.tsx to apply internally\nconst contentPaddingVariants = {\n  none: 'p-0',\n  sm: 'px-2 py-4',\n  md: 'px-4 py-6',\n  lg: 'px-6 py-8',\n  xl: 'px-8 py-10',\n  '2xl': 'px-10 py-12',\n};\n\nconst MotionModal = m.create(Container);\n\n/**\n * Modal Component\n *\n * A highly customizable modal dialog component with portal rendering, Framer Motion animations,\n * and comprehensive accessibility features. Supports multiple size variants and scroll management.\n *\n * Features:\n * - Portal rendering to any container element (defaults to document.body)\n * - Smooth animations with Framer Motion\n * - Size variants: SM, MD, LG, XL, UNSET with responsive sizing\n * - Optional title and close button\n * - Background scroll prevention\n * - Click-outside-to-close functionality\n * - Full accessibility support with ARIA attributes\n * - Keyboard navigation support (ESC to close)\n * - Extensible styling with Container props\n *\n * @example\n * Basic usage:\n * ```jsx\n * <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>\n *   <p>Modal content goes here</p>\n * </Modal>\n * ```\n *\n * @example\n * With title and close button:\n * ```jsx\n * <Modal\n *   isOpen={isOpen}\n *   onClose={onClose}\n *   title=\"Confirm Action\"\n *   hasCloseButton\n *   size=\"lg\"\n * >\n *   <div>\n *     <p>Are you sure you want to continue?</p>\n *     <Button onClick={onConfirm}>Confirm</Button>\n *   </div>\n * </Modal>\n * ```\n *\n * @example\n * Custom container and styling:\n * ```jsx\n * <Modal\n *   isOpen={isOpen}\n *   onClose={onClose}\n *   container={customContainer}\n *   background=\"card\"\n *   padding=\"lg\"\n *   border=\"default\"\n * >\n *   Content with custom styling\n * </Modal>\n * ```\n *\n * Accessibility Notes:\n * - Modal receives focus when opened\n * - Background content is hidden from screen readers when modal is open\n * - ESC key closes modal (handled by browser for role=\"dialog\")\n * - Click outside modal closes it\n * - Close button has descriptive label for screen readers\n *\n * @param props - Modal component props\n * @returns JSX element rendered via createPortal\n */\nexport const Modal: FC<ModalProps> = ({\n  children,\n  isOpen,\n  container,\n  onClose,\n  hasCloseButton = false,\n  title,\n  size = 'md',\n  className,\n  isScrollable = false, // Enable the scroll of the content\n  disableScroll = true, // Disable the scroll of the background\n  padding = 'none', // Extract padding here\n  ...props\n}) => {\n  const containerElement = useGetElementOrWindow(container);\n\n  useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && isOpen && onClose) {\n        onClose();\n      }\n    };\n    document.addEventListener('keydown', handleEscape);\n    return () => {\n      document.removeEventListener('keydown', handleEscape);\n    };\n  }, [isOpen, onClose]);\n\n  if (!containerElement) return <></>;\n\n  const hasTitle = Boolean(title);\n\n  // Determine the class for the inner content based on the padding prop\n  const contentPaddingClass =\n    contentPaddingVariants[\n      (padding as keyof typeof contentPaddingVariants) || 'none'\n    ];\n\n  return createPortal(\n    <m.div\n      className=\"invisible fixed top-0 left-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-hidden bg-background/40 backdrop-blur\"\n      animate={isOpen ? 'visible' : 'invisible'}\n      variants={{\n        visible: {\n          opacity: 1,\n          visibility: 'visible',\n          transition: { duration: 0.1, when: 'beforeChildren' },\n        },\n        invisible: {\n          opacity: 0,\n          visibility: 'hidden',\n          transition: { duration: 0.1, when: 'afterChildren' },\n        },\n      }}\n      onClick={(e) => {\n        e.stopPropagation();\n        onClose?.();\n      }}\n      aria-hidden={!isOpen}\n    >\n      <MotionModal\n        onClick={(e) => e.stopPropagation()}\n        initial={{ scale: isOpen ? 0.5 : 1 }}\n        animate={{ scale: isOpen ? 1 : 0.5 }}\n        transition={{ duration: 0.3 }}\n        className={modalVariants({ size, className })}\n        role=\"dialog\"\n        aria-modal\n        roundedSize=\"4xl\"\n        // Force the outer container to have no padding so scrollbars hit the edge\n        padding=\"none\"\n        {...props}\n      >\n        {/* HEADER SECTION */}\n        <div\n          className={cn(\n            'relative flex-none px-4 pt-4',\n            hasCloseButton && hasTitle\n              ? `flex items-start`\n              : hasCloseButton\n                ? `flex justify-end`\n                : hasTitle\n                  ? `items-center`\n                  : `hidden`\n          )}\n        >\n          {hasTitle && (\n            <H3 className=\"mb-2 ml-1 flex items-center justify-center font-bold text-lg\">\n              {title}\n            </H3>\n          )}\n          {hasCloseButton && (\n            <Button\n              variant=\"hoverable\"\n              color=\"text\"\n              label=\"Close modal\"\n              className=\"ml-auto\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onClose?.();\n              }}\n              Icon={X}\n              size=\"icon-md\"\n            />\n          )}\n        </div>\n\n        {/* SCROLLABLE WRAPPER - Full width, no padding */}\n        <div\n          className={cn(\n            'flex min-h-0 w-full flex-1 flex-col',\n            // Scrollbars will now appear at the very edge of this div (the modal edge)\n            isScrollable === true && 'overflow-auto',\n            isScrollable === 'y' && 'overflow-y-auto overflow-x-hidden',\n            isScrollable === 'x' && 'overflow-x-auto overflow-y-hidden',\n            !isScrollable && 'overflow-visible'\n          )}\n        >\n          {/* CONTENT PADDING WRAPPER */}\n          {/* We apply the padding class here, effectively putting content inside the scroll area */}\n          <div\n            className={cn(\n              'flex size-full flex-1 flex-col',\n              contentPaddingClass\n            )}\n          >\n            {children}\n          </div>\n        </div>\n      </MotionModal>\n    </m.div>,\n    containerElement\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AA8CA,MAAM,gBAAgB,IACpB,0DACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,OAAO;EACR,EACF;CACD,iBAAiB,EACf,MAAM,SACP;CACF,CACF;AAGD,MAAM,yBAAyB;CAC7B,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACR;AAED,MAAM,cAAcA,OAAE,OAAO,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEvC,MAAa,SAAyB,EACpC,UACA,QACA,WACA,SACA,iBAAiB,OACjB,OACA,OAAO,MACP,WACA,eAAe,OACf,gBAAgB,MAChB,UAAU,QACV,GAAG,YACC;CACJ,MAAM,mBAAmB,sBAAsB,UAAU;AAEzD,mBAAkB;EAAE,KAAK;EAAS,eAAe,UAAU;EAAe,CAAC;AAE3E,iBAAgB;EACd,MAAM,gBAAgB,UAAyB;AAC7C,OAAI,MAAM,QAAQ,YAAY,UAAU,QACtC,UAAS;;AAGb,WAAS,iBAAiB,WAAW,aAAa;AAClD,eAAa;AACX,YAAS,oBAAoB,WAAW,aAAa;;IAEtD,CAAC,QAAQ,QAAQ,CAAC;AAErB,KAAI,CAAC,iBAAkB,QAAO,kCAAK;CAEnC,MAAM,WAAW,QAAQ,MAAM;CAG/B,MAAM,sBACJ,uBACG,WAAmD;AAGxD,QAAO,aACL,oBAACA,OAAE,KAAH;EACE,WAAU;EACV,SAAS,SAAS,YAAY;EAC9B,UAAU;GACR,SAAS;IACP,SAAS;IACT,YAAY;IACZ,YAAY;KAAE,UAAU;KAAK,MAAM;KAAkB;IACtD;GACD,WAAW;IACT,SAAS;IACT,YAAY;IACZ,YAAY;KAAE,UAAU;KAAK,MAAM;KAAiB;IACrD;GACF;EACD,UAAU,MAAM;AACd,KAAE,iBAAiB;AACnB,cAAW;;EAEb,eAAa,CAAC;YAEd,qBAAC,aAAD;GACE,UAAU,MAAM,EAAE,iBAAiB;GACnC,SAAS,EAAE,OAAO,SAAS,KAAM,GAAG;GACpC,SAAS,EAAE,OAAO,SAAS,IAAI,IAAK;GACpC,YAAY,EAAE,UAAU,IAAK;GAC7B,WAAW,cAAc;IAAE;IAAM;IAAW,CAAC;GAC7C,MAAK;GACL;GACA,aAAY;GAEZ,SAAQ;GACR,GAAI;aAXN,CAcE,qBAAC,OAAD;IACE,WAAW,GACT,gCACA,kBAAkB,WACd,qBACA,iBACE,qBACA,WACE,iBACA,SACT;cAVH,CAYG,YACC,oBAAC,IAAD;KAAI,WAAU;eACX;KACE,GAEN,kBACC,oBAAC,QAAD;KACE,SAAQ;KACR,OAAM;KACN,OAAM;KACN,WAAU;KACV,UAAU,MAAM;AACd,QAAE,iBAAiB;AACnB,iBAAW;;KAEb,MAAM;KACN,MAAK;KACL,EAEA;OAGN,oBAAC,OAAD;IACE,WAAW,GACT,uCAEA,iBAAiB,QAAQ,iBACzB,iBAAiB,OAAO,qCACxB,iBAAiB,OAAO,qCACxB,CAAC,gBAAgB,mBAClB;cAID,oBAAC,OAAD;KACE,WAAW,GACT,kCACA,oBACD;KAEA;KACG;IACF,EACM;;EACR,GACR,iBACD"}
+{"version":3,"file":"Modal.mjs","names":["m"],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { useGetElementOrWindow, useScrollBlockage } from '@hooks/index';\nimport { cn } from '@utils/cn';\nimport { cva } from 'class-variance-authority';\nimport { motion as m } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport { type FC, type ReactNode, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Button } from '../Button';\nimport { Container, type ContainerProps } from '../Container';\nimport { H3 } from '../Headers';\n\n/**\n * Enumeration of available modal sizes\n */\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'unset';\n\ntype ModalProps = {\n  children: ReactNode;\n  isOpen: boolean;\n  onClose?: () => void;\n  container?: HTMLElement;\n  disableScroll?: boolean;\n  hasCloseButton?: boolean;\n  title?: ReactNode;\n  size?: ModalSize | `${ModalSize}`;\n  /**\n   * Defines if the modal content area is scrollable.\n   */\n  isScrollable?: boolean | 'x' | 'y';\n} & Partial<\n  Pick<\n    ContainerProps,\n    | 'className'\n    | 'transparency'\n    | 'border'\n    | 'background'\n    | 'roundedSize'\n    | 'borderColor'\n    | 'padding'\n    | 'separator'\n    | 'gap'\n  >\n>;\n\nconst modalVariants = cva(\n  'flex cursor-default flex-col overflow-hidden shadow-sm',\n  {\n    variants: {\n      size: {\n        sm: 'h-auto max-h-[30vh] w-[95vw] max-w-xl',\n        md: 'h-auto max-h-[50vh] w-[95vw] max-w-xl',\n        lg: 'h-auto max-h-[70vh] w-[95vw] max-w-4xl',\n        xl: 'h-auto max-h-[95vh] w-[95vw] max-w-6xl',\n        unset: 'h-auto max-h-[95vh] w-[95vw]',\n      },\n    },\n    defaultVariants: {\n      size: 'unset',\n    },\n  }\n);\n\n// Mapped from Container/index.tsx to apply internally\nconst contentPaddingVariants = {\n  none: 'p-0',\n  sm: 'px-2 py-4',\n  md: 'px-4 py-6',\n  lg: 'px-6 py-8',\n  xl: 'px-8 py-10',\n  '2xl': 'px-10 py-12',\n};\n\nconst MotionModal = m.create(Container);\n\n/**\n * Modal Component\n *\n * A highly customizable modal dialog component with portal rendering, Framer Motion animations,\n * and comprehensive accessibility features. Supports multiple size variants and scroll management.\n *\n * Features:\n * - Portal rendering to any container element (defaults to document.body)\n * - Smooth animations with Framer Motion\n * - Size variants: SM, MD, LG, XL, UNSET with responsive sizing\n * - Optional title and close button\n * - Background scroll prevention\n * - Click-outside-to-close functionality\n * - Full accessibility support with ARIA attributes\n * - Keyboard navigation support (ESC to close)\n * - Extensible styling with Container props\n *\n * @example\n * Basic usage:\n * ```jsx\n * <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>\n *   <p>Modal content goes here</p>\n * </Modal>\n * ```\n *\n * @example\n * With title and close button:\n * ```jsx\n * <Modal\n *   isOpen={isOpen}\n *   onClose={onClose}\n *   title=\"Confirm Action\"\n *   hasCloseButton\n *   size=\"lg\"\n * >\n *   <div>\n *     <p>Are you sure you want to continue?</p>\n *     <Button onClick={onConfirm}>Confirm</Button>\n *   </div>\n * </Modal>\n * ```\n *\n * @example\n * Custom container and styling:\n * ```jsx\n * <Modal\n *   isOpen={isOpen}\n *   onClose={onClose}\n *   container={customContainer}\n *   background=\"card\"\n *   padding=\"lg\"\n *   border=\"default\"\n * >\n *   Content with custom styling\n * </Modal>\n * ```\n *\n * Accessibility Notes:\n * - Modal receives focus when opened\n * - Background content is hidden from screen readers when modal is open\n * - ESC key closes modal (handled by browser for role=\"dialog\")\n * - Click outside modal closes it\n * - Close button has descriptive label for screen readers\n *\n * @param props - Modal component props\n * @returns JSX element rendered via createPortal\n */\nexport const Modal: FC<ModalProps> = ({\n  children,\n  isOpen,\n  container,\n  onClose,\n  hasCloseButton = false,\n  title,\n  size = 'md',\n  className,\n  isScrollable = false, // Enable the scroll of the content\n  disableScroll = true, // Disable the scroll of the background\n  padding = 'none', // Extract padding here\n  ...props\n}) => {\n  const containerElement = useGetElementOrWindow(container);\n\n  useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && isOpen && onClose) {\n        onClose();\n      }\n    };\n    document.addEventListener('keydown', handleEscape);\n    return () => {\n      document.removeEventListener('keydown', handleEscape);\n    };\n  }, [isOpen, onClose]);\n\n  if (!containerElement) return <></>;\n\n  const hasTitle = Boolean(title);\n\n  // Determine the class for the inner content based on the padding prop\n  const contentPaddingClass =\n    contentPaddingVariants[\n      (padding as keyof typeof contentPaddingVariants) || 'none'\n    ];\n\n  return createPortal(\n    <m.div\n      className=\"invisible fixed top-0 left-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-hidden bg-background/40 backdrop-blur\"\n      animate={isOpen ? 'visible' : 'invisible'}\n      variants={{\n        visible: {\n          opacity: 1,\n          visibility: 'visible',\n          transition: { duration: 0.1, when: 'beforeChildren' },\n        },\n        invisible: {\n          opacity: 0,\n          visibility: 'hidden',\n          transition: { duration: 0.1, when: 'afterChildren' },\n        },\n      }}\n      onClick={(e) => {\n        e.stopPropagation();\n        onClose?.();\n      }}\n      aria-hidden={!isOpen}\n    >\n      <MotionModal\n        onClick={(e) => e.stopPropagation()}\n        initial={{ scale: isOpen ? 0.5 : 1 }}\n        animate={{ scale: isOpen ? 1 : 0.5 }}\n        transition={{ duration: 0.3 }}\n        className={modalVariants({ size, className })}\n        role=\"dialog\"\n        aria-modal\n        roundedSize=\"4xl\"\n        // Force the outer container to have no padding so scrollbars hit the edge\n        padding=\"none\"\n        {...props}\n      >\n        {/* HEADER SECTION */}\n        <div\n          className={cn(\n            'relative flex-none px-4 pt-4',\n            hasCloseButton && hasTitle\n              ? `flex items-start`\n              : hasCloseButton\n                ? `flex justify-end`\n                : hasTitle\n                  ? `items-center`\n                  : `hidden`\n          )}\n        >\n          {hasTitle && (\n            <H3 className=\"mb-2 ml-1 flex items-center justify-center font-bold text-lg\">\n              {title}\n            </H3>\n          )}\n          {hasCloseButton && (\n            <Button\n              variant=\"hoverable\"\n              color=\"text\"\n              label=\"Close modal\"\n              className=\"ml-auto\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onClose?.();\n              }}\n              Icon={X}\n              size=\"icon-md\"\n            />\n          )}\n        </div>\n\n        {/* SCROLLABLE WRAPPER - Full width, no padding */}\n        <div\n          className={cn(\n            'flex min-h-0 w-full flex-1 flex-col',\n            // Scrollbars will now appear at the very edge of this div (the modal edge)\n            isScrollable === true && 'overflow-auto',\n            isScrollable === 'y' && 'overflow-y-auto overflow-x-hidden',\n            isScrollable === 'x' && 'overflow-x-auto overflow-y-hidden',\n            !isScrollable && 'overflow-visible'\n          )}\n        >\n          {/* CONTENT PADDING WRAPPER */}\n          {/* We apply the padding class here, effectively putting content inside the scroll area */}\n          <div\n            className={cn(\n              'flex size-full flex-1 flex-col',\n              contentPaddingClass\n            )}\n          >\n            {children}\n          </div>\n        </div>\n      </MotionModal>\n    </m.div>,\n    containerElement\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AA8CA,MAAM,gBAAgB,IACpB,0DACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,OAAO;CACT,EACF;CACA,iBAAiB,EACf,MAAM,QACR;AACF,CACF;AAGA,MAAM,yBAAyB;CAC7B,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;AACT;AAEA,MAAM,cAAcA,OAAE,OAAO,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEtC,MAAa,SAAyB,EACpC,UACA,QACA,WACA,SACA,iBAAiB,OACjB,OACA,OAAO,MACP,WACA,eAAe,OACf,gBAAgB,MAChB,UAAU,QACV,GAAG,YACC;CACJ,MAAM,mBAAmB,sBAAsB,SAAS;CAExD,kBAAkB;EAAE,KAAK;EAAS,eAAe,UAAU;CAAc,CAAC;CAE1E,gBAAgB;EACd,MAAM,gBAAgB,UAAyB;GAC7C,IAAI,MAAM,QAAQ,YAAY,UAAU,SACtC,QAAQ;EAEZ;EACA,SAAS,iBAAiB,WAAW,YAAY;EACjD,aAAa;GACX,SAAS,oBAAoB,WAAW,YAAY;EACtD;CACF,GAAG,CAAC,QAAQ,OAAO,CAAC;CAEpB,IAAI,CAAC,kBAAkB,OAAO,iCAAI;CAElC,MAAM,WAAW,QAAQ,KAAK;CAG9B,MAAM,sBACJ,uBACG,WAAmD;CAGxD,OAAO,aACL,oBAACA,OAAE,KAAH;EACE,WAAU;EACV,SAAS,SAAS,YAAY;EAC9B,UAAU;GACR,SAAS;IACP,SAAS;IACT,YAAY;IACZ,YAAY;KAAE,UAAU;KAAK,MAAM;IAAiB;GACtD;GACA,WAAW;IACT,SAAS;IACT,YAAY;IACZ,YAAY;KAAE,UAAU;KAAK,MAAM;IAAgB;GACrD;EACF;EACA,UAAU,MAAM;GACd,EAAE,gBAAgB;GAClB,UAAU;EACZ;EACA,eAAa,CAAC;YAEd,qBAAC,aAAD;GACE,UAAU,MAAM,EAAE,gBAAgB;GAClC,SAAS,EAAE,OAAO,SAAS,KAAM,EAAE;GACnC,SAAS,EAAE,OAAO,SAAS,IAAI,GAAI;GACnC,YAAY,EAAE,UAAU,GAAI;GAC5B,WAAW,cAAc;IAAE;IAAM;GAAU,CAAC;GAC5C,MAAK;GACL;GACA,aAAY;GAEZ,SAAQ;GACR,GAAI;aAXN,CAcE,qBAAC,OAAD;IACE,WAAW,GACT,gCACA,kBAAkB,WACd,qBACA,iBACE,qBACA,WACE,iBACA,QACV;cAVF,CAYG,YACC,oBAAC,IAAD;KAAI,WAAU;eACX;IACC,IAEL,kBACC,oBAAC,QAAD;KACE,SAAQ;KACR,OAAM;KACN,OAAM;KACN,WAAU;KACV,UAAU,MAAM;MACd,EAAE,gBAAgB;MAClB,UAAU;KACZ;KACA,MAAM;KACN,MAAK;IACN,EAEA;OAGL,oBAAC,OAAD;IACE,WAAW,GACT,uCAEA,iBAAiB,QAAQ,iBACzB,iBAAiB,OAAO,qCACxB,iBAAiB,OAAO,qCACxB,CAAC,gBAAgB,kBACnB;cAIA,oBAAC,OAAD;KACE,WAAW,GACT,kCACA,mBACF;KAEC;IACE;GACF,EACM;;CACR,IACP,gBACF;AACF"}