dishui 0.0.97 → 0.0.104

package/dist/components/pro/RichTextEditor/RichTextEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.js","names":[],"sources":["../../../../src/components/pro/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["import React, { useEffect, useCallback, useState, useRef } from 'react';\nimport { cn } from '../../../utils/cn';\nimport { useEditor, EditorContent } from '@tiptap/react';\nimport StarterKit from '@tiptap/starter-kit';\nimport Underline from '@tiptap/extension-underline';\nimport { TextStyle } from '@tiptap/extension-text-style';\nimport Color from '@tiptap/extension-color';\nimport Highlight from '@tiptap/extension-highlight';\nimport TextAlign from '@tiptap/extension-text-align';\nimport Link from '@tiptap/extension-link';\nimport { Table } from '@tiptap/extension-table';\nimport TableRow from '@tiptap/extension-table-row';\nimport TableCell from '@tiptap/extension-table-cell';\nimport TableHeader from '@tiptap/extension-table-header';\nimport Placeholder from '@tiptap/extension-placeholder';\nimport TaskList from '@tiptap/extension-task-list';\nimport TaskItem from '@tiptap/extension-task-item';\nimport Subscript from '@tiptap/extension-subscript';\nimport Superscript from '@tiptap/extension-superscript';\nimport Typography from '@tiptap/extension-typography';\nimport FontFamily from '@tiptap/extension-font-family';\n\nimport Toolbar from './Toolbar';\nimport AIRewrite from './AIRewrite';\nimport ContextMenu from './ContextMenu';\nimport CommentPanel from './CommentPanel';\nimport type { CommentPanelHandle } from './CommentPanel';\nimport CommentDialog from './CommentDialog';\nimport CommentPopover from './CommentPopover';\nimport SlashMenu from './SlashMenu';\nimport BubbleToolbar from './BubbleToolbar';\nimport BlockHandle from './BlockHandle';\nimport { MarkdownBlockExtension } from './extensions/MarkdownBlock';\nimport { CodeBlockExtension } from './extensions/CodeBlockView';\nimport FontSize from './extensions/FontSize';\nimport { ResizableImage } from './extensions/ResizableImage';\nimport { FloatingDialogExtension } from './extensions/FloatingDialog';\nimport { CommentMark } from './extensions/CommentMark';\nimport type { CommentThread } from './extensions/CommentMark';\nimport type { RichTextEditorProps } from './types';\nimport './styles.css';\n\nfunction generateId() {\n  return `c_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;\n}\n\nconst RichTextEditor: React.FC<RichTextEditorProps> = ({\n  content,\n  value,\n  onChange,\n  onChangeJSON,\n  placeholder = 'Start writing...',\n  editable = true,\n  aiConfig,\n  toolbarConfig,\n  minHeight = '200px',\n  maxHeight,\n  className = '',\n  autofocus = false,\n  labels,\n  editorRef,\n  notionMode: initialNotionMode = false,\n  showComments: initialShowComments = false,\n  commentThreads: externalThreads,\n  onCommentThreadsChange,\n  currentUser,\n}) => {\n  const [formatPainterActive, setFormatPainterActive] = useState(false);\n  const [showAIPanel, setShowAIPanel] = useState(false);\n  const [aiSelection, setAiSelection] = useState('');\n  const [aiSelectionRange, setAiSelectionRange] = useState({ from: 0, to: 0 });\n  const [notionMode, setNotionMode] = useState(initialNotionMode);\n  const [showComments, setShowComments] = useState(initialShowComments);\n  const [internalThreads, setInternalThreads] = useState<CommentThread[]>([]);\n  const [commentDialogOpen, setCommentDialogOpen] = useState(false);\n  const [commentSelectionRange, setCommentSelectionRange] = useState({ from: 0, to: 0 });\n  const commentPanelRef = useRef<CommentPanelHandle>(null);\n\n  const threads = externalThreads ?? internalThreads;\n  const setThreads = onCommentThreadsChange ?? setInternalThreads;\n\n  const editor = useEditor({\n    extensions: [\n      StarterKit.configure({\n        codeBlock: false,\n        heading: { levels: [1, 2, 3, 4, 5, 6] },\n        // v3 StarterKit bundles these; explicit extensions below stay in charge.\n        link: false,\n        underline: false,\n      }),\n      Underline,\n      TextStyle,\n      Color,\n      Highlight.configure({ multicolor: true }),\n      TextAlign.configure({\n        types: ['heading', 'paragraph'],\n      }),\n      Link.configure({\n        openOnClick: false,\n        autolink: true,\n        HTMLAttributes: { class: 'rte-link' },\n      }),\n      ResizableImage.configure({ inline: false, allowBase64: true }),\n      Table.configure({ resizable: true }),\n      TableRow,\n      TableCell,\n      TableHeader,\n      Placeholder.configure({ placeholder }),\n      CodeBlockExtension,\n      TaskList,\n      TaskItem.configure({ nested: true }),\n      Subscript,\n      Superscript,\n      Typography,\n      FontFamily,\n      FontSize,\n      FloatingDialogExtension,\n      MarkdownBlockExtension,\n      CommentMark,\n    ],\n    content: value || content || '',\n    editable,\n    autofocus: autofocus ? 'end' : false,\n    onUpdate: ({ editor: e }) => {\n      onChange?.(e.getHTML());\n      onChangeJSON?.(e.getJSON() as Record<string, unknown>);\n    },\n  });\n\n  useEffect(() => {\n    if (editorRef && editor) {\n      editorRef.current = editor;\n    }\n  }, [editor, editorRef]);\n\n  useEffect(() => {\n    if (editor && value !== undefined) {\n      const currentHTML = editor.getHTML();\n      if (value !== currentHTML) {\n        editor.commands.setContent(value, { emitUpdate: false });\n      }\n    }\n  }, [editor, value]);\n\n  useEffect(() => {\n    if (editor) {\n      editor.setEditable(editable);\n    }\n  }, [editor, editable]);\n\n  const handleAIClick = useCallback(() => {\n    if (!editor) return;\n    const { from, to } = editor.state.selection;\n    const text = from !== to\n      ? editor.state.doc.textBetween(from, to, ' ')\n      : '';\n    setAiSelection(text);\n    setAiSelectionRange({ from, to });\n    setShowAIPanel(true);\n  }, [editor]);\n\n  const requestAddComment = useCallback(() => {\n    if (!editor) return;\n    const { from, to } = editor.state.selection;\n    if (from === to) return;\n    setCommentSelectionRange({ from, to });\n    setCommentDialogOpen(true);\n  }, [editor]);\n\n  const handleCommentSubmit = useCallback((text: string) => {\n    if (!editor) return;\n    const id = generateId();\n    const thread: CommentThread = {\n      id,\n      resolved: false,\n      comments: [{\n        id: generateId(),\n        author: currentUser || 'User',\n        text,\n        createdAt: Date.now(),\n      }],\n      createdAt: Date.now(),\n    };\n    editor.chain()\n      .focus()\n      .setTextSelection(commentSelectionRange)\n      .setComment(id)\n      .run();\n    setThreads([...threads, thread]);\n    setCommentDialogOpen(false);\n  }, [editor, commentSelectionRange, threads, setThreads, currentUser]);\n\n  const handleScrollToThread = useCallback((id: string) => {\n    commentPanelRef.current?.scrollToThread(id);\n  }, []);\n\n  if (!editor) return null;\n\n  const minH = typeof minHeight === 'number' ? `${minHeight}px` : minHeight;\n  const maxH = maxHeight ? (typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight) : undefined;\n\n  const containerClass = cn(\n    'rte-container',\n    formatPainterActive && 'rte-container--format-painter',\n    notionMode && 'rte-container--notion',\n    className,\n  );\n\n  const activeCommentCount = threads.filter((t) => !t.resolved).length;\n\n  const modeToggle = (\n    <div className=\"rte-mode-toggle\">\n      <button\n        type=\"button\"\n        className={`rte-mode-toggle__btn ${!notionMode ? 'rte-mode-toggle__btn--active' : ''}`}\n        onClick={() => setNotionMode(false)}\n        title=\"Classic mode\"\n      >\n        Classic\n      </button>\n      <button\n        type=\"button\"\n        className={`rte-mode-toggle__btn ${notionMode ? 'rte-mode-toggle__btn--active' : ''}`}\n        onClick={() => setNotionMode(true)}\n        title=\"Notion-style mode\"\n      >\n        Notion\n      </button>\n      <div className=\"rte-toolbar__divider\" style={{ height: 20, margin: '0 4px' }} />\n      <button\n        type=\"button\"\n        className={`rte-toolbar__btn rte-toolbar__comment-btn ${showComments ? 'rte-toolbar__btn--active' : ''}`}\n        onClick={() => setShowComments(!showComments)}\n        title=\"Toggle comments\"\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n          <path d=\"M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z\" />\n        </svg>\n        {activeCommentCount > 0 && <span className=\"rte-toolbar__comment-badge\" />}\n      </button>\n    </div>\n  );\n\n  return (\n    <div className={containerClass} style={{ minHeight: minH, maxHeight: maxH }}>\n      {editable && !notionMode && (\n        <Toolbar\n          editor={editor}\n          config={toolbarConfig}\n          labels={labels}\n          hasAI={!!aiConfig}\n          onAIClick={handleAIClick}\n          onFormatPainterChange={setFormatPainterActive}\n        >\n          {modeToggle}\n        </Toolbar>\n      )}\n\n      {editable && notionMode && (\n        <div className=\"rte-notion-topbar\">\n          {modeToggle}\n        </div>\n      )}\n\n      <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>\n        <div className=\"rte-editor-wrapper\" style={{ flex: 1 }}>\n          <EditorContent editor={editor} className=\"rte-editor-content\" />\n          {editable && <ContextMenu editor={editor} labels={labels} onAIClick={aiConfig ? handleAIClick : undefined} />}\n          {editable && <SlashMenu editor={editor} />}\n          {editable && notionMode && <BubbleToolbar editor={editor} onAddComment={requestAddComment} />}\n          {editable && notionMode && <BlockHandle editor={editor} />}\n          <CommentPopover\n            editor={editor}\n            threads={threads}\n            onThreadsChange={setThreads}\n            showPanel={showComments}\n            onOpenPanel={() => setShowComments(true)}\n            onScrollToThread={handleScrollToThread}\n            currentUser={currentUser}\n          />\n        </div>\n\n        {showComments && (\n          <CommentPanel\n            ref={commentPanelRef}\n            editor={editor}\n            threads={threads}\n            onThreadsChange={setThreads}\n            onRequestAddComment={requestAddComment}\n            currentUser={currentUser}\n          />\n        )}\n      </div>\n\n      {aiConfig && showAIPanel && (\n        <AIRewrite\n          editor={editor}\n          aiConfig={aiConfig}\n          labels={labels}\n          initialSelection={aiSelection}\n          selectionRange={aiSelectionRange}\n          onClose={() => setShowAIPanel(false)}\n        />\n      )}\n\n      <CommentDialog\n        open={commentDialogOpen}\n        onSubmit={handleCommentSubmit}\n        onClose={() => setCommentDialogOpen(false)}\n      />\n    </div>\n  );\n};\n\nexport default RichTextEditor;\n"],"mappings":"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"}
+{"version":3,"file":"RichTextEditor.js","names":[],"sources":["../../../../src/components/pro/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["import React, { useEffect, useCallback, useState, useRef } from 'react';\nimport { cn } from '../../../utils/cn';\nimport { useEditor, EditorContent } from '@tiptap/react';\nimport StarterKit from '@tiptap/starter-kit';\nimport Underline from '@tiptap/extension-underline';\nimport { TextStyle } from '@tiptap/extension-text-style';\nimport Color from '@tiptap/extension-color';\nimport Highlight from '@tiptap/extension-highlight';\nimport TextAlign from '@tiptap/extension-text-align';\nimport Link from '@tiptap/extension-link';\nimport { Table } from '@tiptap/extension-table';\nimport TableRow from '@tiptap/extension-table-row';\nimport TableCell from '@tiptap/extension-table-cell';\nimport TableHeader from '@tiptap/extension-table-header';\nimport Placeholder from '@tiptap/extension-placeholder';\nimport TaskList from '@tiptap/extension-task-list';\nimport TaskItem from '@tiptap/extension-task-item';\nimport Subscript from '@tiptap/extension-subscript';\nimport Superscript from '@tiptap/extension-superscript';\nimport Typography from '@tiptap/extension-typography';\nimport FontFamily from '@tiptap/extension-font-family';\n\nimport Toolbar from './Toolbar';\nimport AIRewrite from './AIRewrite';\nimport ContextMenu from './ContextMenu';\nimport CommentPanel from './CommentPanel';\nimport type { CommentPanelHandle } from './CommentPanel';\nimport CommentDialog from './CommentDialog';\nimport CommentPopover from './CommentPopover';\nimport SlashMenu from './SlashMenu';\nimport BubbleToolbar from './BubbleToolbar';\nimport BlockHandle from './BlockHandle';\nimport { MarkdownBlockExtension } from './extensions/MarkdownBlock';\nimport { CodeBlockExtension } from './extensions/CodeBlockView';\nimport FontSize from './extensions/FontSize';\nimport { ResizableImage } from './extensions/ResizableImage';\nimport { FloatingDialogExtension } from './extensions/FloatingDialog';\nimport { CommentMark } from './extensions/CommentMark';\nimport type { CommentThread } from './extensions/CommentMark';\nimport type { RichTextEditorProps } from './types';\nimport './styles.css';\n\nfunction generateId() {\n  return `c_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;\n}\n\nconst RichTextEditor: React.FC<RichTextEditorProps> = ({\n  content,\n  value,\n  onChange,\n  onChangeJSON,\n  placeholder = 'Start writing...',\n  editable = true,\n  aiConfig,\n  onRequestAIConfig,\n  toolbarConfig,\n  minHeight = '200px',\n  maxHeight,\n  className = '',\n  autofocus = false,\n  labels,\n  editorRef,\n  showComments: initialShowComments = false,\n  commentThreads: externalThreads,\n  onCommentThreadsChange,\n  currentUser,\n}) => {\n  const [formatPainterActive, setFormatPainterActive] = useState(false);\n  const [showAIPanel, setShowAIPanel] = useState(false);\n  const [aiSelection, setAiSelection] = useState('');\n  const [aiSelectionRange, setAiSelectionRange] = useState({ from: 0, to: 0 });\n  const [showComments, setShowComments] = useState(initialShowComments);\n  const [internalThreads, setInternalThreads] = useState<CommentThread[]>([]);\n  const [commentDialogOpen, setCommentDialogOpen] = useState(false);\n  const [commentSelectionRange, setCommentSelectionRange] = useState({ from: 0, to: 0 });\n  const commentPanelRef = useRef<CommentPanelHandle>(null);\n\n  const threads = externalThreads ?? internalThreads;\n  const setThreads = onCommentThreadsChange ?? setInternalThreads;\n\n  const editor = useEditor({\n    extensions: [\n      StarterKit.configure({\n        codeBlock: false,\n        heading: { levels: [1, 2, 3, 4, 5, 6] },\n        // v3 StarterKit bundles these; explicit extensions below stay in charge.\n        link: false,\n        underline: false,\n      }),\n      Underline,\n      TextStyle,\n      Color,\n      Highlight.configure({ multicolor: true }),\n      TextAlign.configure({\n        types: ['heading', 'paragraph'],\n      }),\n      Link.configure({\n        openOnClick: false,\n        autolink: true,\n        HTMLAttributes: { class: 'rte-link' },\n      }),\n      ResizableImage.configure({ inline: false, allowBase64: true }),\n      Table.configure({ resizable: true }),\n      TableRow,\n      TableCell,\n      TableHeader,\n      Placeholder.configure({ placeholder }),\n      CodeBlockExtension,\n      TaskList,\n      TaskItem.configure({ nested: true }),\n      Subscript,\n      Superscript,\n      Typography,\n      FontFamily,\n      FontSize,\n      FloatingDialogExtension,\n      MarkdownBlockExtension,\n      CommentMark,\n    ],\n    content: value || content || '',\n    editable,\n    autofocus: autofocus ? 'end' : false,\n    onUpdate: ({ editor: e }) => {\n      onChange?.(e.getHTML());\n      onChangeJSON?.(e.getJSON() as Record<string, unknown>);\n    },\n  });\n\n  useEffect(() => {\n    if (editorRef && editor) {\n      editorRef.current = editor;\n    }\n  }, [editor, editorRef]);\n\n  useEffect(() => {\n    if (editor && value !== undefined) {\n      const currentHTML = editor.getHTML();\n      if (value !== currentHTML) {\n        editor.commands.setContent(value, { emitUpdate: false });\n      }\n    }\n  }, [editor, value]);\n\n  useEffect(() => {\n    if (editor) {\n      editor.setEditable(editable);\n    }\n  }, [editor, editable]);\n\n  const handleAIClick = useCallback(() => {\n    if (!editor) return;\n    const { from, to } = editor.state.selection;\n    const text = from !== to\n      ? editor.state.doc.textBetween(from, to, ' ')\n      : '';\n    setAiSelection(text);\n    setAiSelectionRange({ from, to });\n    setShowAIPanel(true);\n  }, [editor]);\n\n  const requestAddComment = useCallback(() => {\n    if (!editor) return;\n    const { from, to } = editor.state.selection;\n    if (from === to) return;\n    setCommentSelectionRange({ from, to });\n    setCommentDialogOpen(true);\n  }, [editor]);\n\n  const handleCommentSubmit = useCallback((text: string) => {\n    if (!editor) return;\n    const id = generateId();\n    const thread: CommentThread = {\n      id,\n      resolved: false,\n      comments: [{\n        id: generateId(),\n        author: currentUser || 'User',\n        text,\n        createdAt: Date.now(),\n      }],\n      createdAt: Date.now(),\n    };\n    editor.chain()\n      .focus()\n      .setTextSelection(commentSelectionRange)\n      .setComment(id)\n      .run();\n    setThreads([...threads, thread]);\n    setCommentDialogOpen(false);\n  }, [editor, commentSelectionRange, threads, setThreads, currentUser]);\n\n  const handleScrollToThread = useCallback((id: string) => {\n    commentPanelRef.current?.scrollToThread(id);\n  }, []);\n\n  if (!editor) return null;\n\n  const minH = typeof minHeight === 'number' ? `${minHeight}px` : minHeight;\n  const maxH = maxHeight ? (typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight) : undefined;\n\n  const containerClass = cn(\n    'rte-container',\n    formatPainterActive && 'rte-container--format-painter',\n    className,\n  );\n\n  const activeCommentCount = threads.filter((t) => !t.resolved).length;\n\n  const showCommentButton = toolbarConfig?.buttons?.comments ?? true;\n  const toolbarEnd = showCommentButton ? (\n    <div className=\"rte-toolbar__end\">\n      <button\n        type=\"button\"\n        className={`rte-toolbar__btn rte-toolbar__comment-btn ${showComments ? 'rte-toolbar__btn--active' : ''}`}\n        onClick={() => setShowComments(!showComments)}\n        title=\"Toggle comments\"\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n          <path d=\"M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z\" />\n        </svg>\n        {activeCommentCount > 0 && <span className=\"rte-toolbar__comment-badge\" />}\n      </button>\n    </div>\n  ) : null;\n\n  return (\n    <div className={containerClass} style={{ minHeight: minH, maxHeight: maxH }}>\n      {editable && (\n        <Toolbar\n          editor={editor}\n          config={toolbarConfig}\n          labels={labels}\n          hasAI={!!aiConfig}\n          onAIClick={handleAIClick}\n          onRequestAIConfig={onRequestAIConfig}\n          onFormatPainterChange={setFormatPainterActive}\n        >\n          {toolbarEnd}\n        </Toolbar>\n      )}\n\n\n      <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>\n        <div className=\"rte-editor-wrapper\" style={{ flex: 1 }}>\n          <EditorContent editor={editor} className=\"rte-editor-content\" />\n          {editable && <ContextMenu editor={editor} labels={labels} onAIClick={aiConfig ? handleAIClick : undefined} />}\n          {editable && <SlashMenu editor={editor} />}\n          {editable && <BubbleToolbar editor={editor} onAddComment={requestAddComment} />}\n          {editable && <BlockHandle editor={editor} persistent />}\n          <CommentPopover\n            editor={editor}\n            threads={threads}\n            onThreadsChange={setThreads}\n            showPanel={showComments}\n            onOpenPanel={() => setShowComments(true)}\n            onScrollToThread={handleScrollToThread}\n            currentUser={currentUser}\n          />\n        </div>\n\n        {showComments && (\n          <CommentPanel\n            ref={commentPanelRef}\n            editor={editor}\n            threads={threads}\n            onThreadsChange={setThreads}\n            onRequestAddComment={requestAddComment}\n            currentUser={currentUser}\n          />\n        )}\n      </div>\n\n      {aiConfig && showAIPanel && (\n        <AIRewrite\n          editor={editor}\n          aiConfig={aiConfig}\n          labels={labels}\n          initialSelection={aiSelection}\n          selectionRange={aiSelectionRange}\n          onClose={() => setShowAIPanel(false)}\n        />\n      )}\n\n      <CommentDialog\n        open={commentDialogOpen}\n        onSubmit={handleCommentSubmit}\n        onClose={() => setCommentDialogOpen(false)}\n      />\n    </div>\n  );\n};\n\nexport default RichTextEditor;\n"],"mappings":"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"}

package/dist/components/pro/RichTextEditor/Toolbar/ColorPicker.js

@@ -1,38 +1,39 @@
-import { useEffect as e, useId as t, useRef as n, useState as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useAnchoredDropdown as e } from "./useAnchoredDropdown.js";
+import { useEffect as t, useId as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/pro/RichTextEditor/Toolbar/ColorPicker.tsx
-var o = /* @__PURE__ */ "#000000.#434343.#666666.#999999.#cccccc.#eeeeee.#ffffff.#ff0000.#ff4500.#ff8c00.#ffd700.#32cd32.#00bfff.#8a2be2.#ff69b4.#dc143c.#ff6347.#ffa500.#9acd32.#20b2aa.#4169e1.#9370db.#db7093.#b22222.#d2691e.#daa520.#228b22.#008b8b.#191970.#4b0082".split("."), s = ({ value: s, onChange: c, title: l, icon: u, kind: d = "text", buttonClassName: f = "rte-toolbar__btn" }) => {
-	let [p, m] = r(!1), h = n(null), g = n(null), _ = t(), v = l || (d === "text" ? "Text color" : "Highlight color"), y = `${v}: ${s || (d === "text" ? "Default" : "None")}`;
-	return e(() => {
+var s = /* @__PURE__ */ "#000000.#434343.#666666.#999999.#cccccc.#eeeeee.#ffffff.#ff0000.#ff4500.#ff8c00.#ffd700.#32cd32.#00bfff.#8a2be2.#ff69b4.#dc143c.#ff6347.#ffa500.#9acd32.#20b2aa.#4169e1.#9370db.#db7093.#b22222.#d2691e.#daa520.#228b22.#008b8b.#191970.#4b0082".split("."), c = ({ value: c, onChange: l, title: u, icon: d, kind: f = "text", buttonClassName: p = "rte-toolbar__btn" }) => {
+	let [m, h] = i(!1), g = r(null), _ = r(null), v = r(null), y = n(), b = e(m, _, v), x = u || (f === "text" ? "Text color" : "Highlight color"), S = `${x}: ${c || (f === "text" ? "Default" : "None")}`;
+	return t(() => {
 		let e = (e) => {
-			h.current && !h.current.contains(e.target) && m(!1);
+			g.current && !g.current.contains(e.target) && h(!1);
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, []), /* @__PURE__ */ a("div", {
-		ref: h,
+	}, []), /* @__PURE__ */ o("div", {
+		ref: g,
 		className: "rte-toolbar__color-picker",
 		onBlur: (e) => {
-			e.currentTarget.contains(e.relatedTarget) || m(!1);
+			e.currentTarget.contains(e.relatedTarget) || h(!1);
 		},
 		onKeyDown: (e) => {
-			e.key === "Escape" && p && (e.preventDefault(), e.stopPropagation(), m(!1), g.current?.focus());
+			e.key === "Escape" && m && (e.preventDefault(), e.stopPropagation(), h(!1), _.current?.focus());
 		},
-		children: [/* @__PURE__ */ i("button", {
+		children: [/* @__PURE__ */ a("button", {
 			type: "button",
-			ref: g,
-			className: `${f} rte-toolbar__color-trigger`,
-			onClick: () => m(!p),
-			title: y,
-			"aria-label": y,
-			"aria-expanded": p,
-			"aria-controls": p ? _ : void 0,
-			children: /* @__PURE__ */ a("span", {
-				className: `rte-toolbar__color-icon rte-toolbar__color-icon--${d}`,
+			ref: _,
+			className: `${p} rte-toolbar__color-trigger`,
+			onClick: () => h(!m),
+			title: S,
+			"aria-label": S,
+			"aria-expanded": m,
+			"aria-controls": m ? y : void 0,
+			children: /* @__PURE__ */ o("span", {
+				className: `rte-toolbar__color-icon rte-toolbar__color-icon--${f}`,
 				"aria-hidden": "true",
-				children: [u || (d === "text" ? /* @__PURE__ */ i("span", {
+				children: [d || (f === "text" ? /* @__PURE__ */ a("span", {
 					className: "rte-toolbar__color-letter",
 					children: "A"
-				}) : /* @__PURE__ */ i("svg", {
+				}) : /* @__PURE__ */ a("svg", {
 					width: "18",
 					height: "16",
 					viewBox: "0 0 24 24",
@@ -41,42 +42,44 @@ var o = /* @__PURE__ */ "#000000.#434343.#666666.#999999.#cccccc.#eeeeee.#ffffff
 					strokeWidth: "2",
 					strokeLinecap: "round",
 					strokeLinejoin: "round",
-					children: /* @__PURE__ */ i("path", { d: "m14 3 7 7-9 9-7-7zM5 12l-2 7 2 2 7-2M14 7l3 3M3 21h6" })
-				})), /* @__PURE__ */ i("span", {
-					className: `rte-toolbar__color-indicator${s ? "" : " rte-toolbar__color-indicator--empty"}`,
-					style: { backgroundColor: s || void 0 }
+					children: /* @__PURE__ */ a("path", { d: "m14 3 7 7-9 9-7-7zM5 12l-2 7 2 2 7-2M14 7l3 3M3 21h6" })
+				})), /* @__PURE__ */ a("span", {
+					className: `rte-toolbar__color-indicator${c ? "" : " rte-toolbar__color-indicator--empty"}`,
+					style: { backgroundColor: c || void 0 }
 				})]
 			})
-		}), p && /* @__PURE__ */ a("div", {
-			id: _,
+		}), m && /* @__PURE__ */ o("div", {
+			ref: v,
+			id: y,
 			className: "rte-toolbar__color-dropdown",
 			role: "group",
-			"aria-label": v,
-			children: [o.map((e) => /* @__PURE__ */ i("button", {
+			"aria-label": x,
+			style: b,
+			children: [s.map((e) => /* @__PURE__ */ a("button", {
 				type: "button",
-				className: `rte-toolbar__color-swatch ${e === s ? "rte-toolbar__color-swatch--active" : ""}`,
+				className: `rte-toolbar__color-swatch ${e === c ? "rte-toolbar__color-swatch--active" : ""}`,
 				style: { backgroundColor: e },
 				onClick: () => {
-					c(e), m(!1);
+					l(e), h(!1);
 				},
-				title: `${v}: ${e}`,
-				"aria-label": `${v}: ${e}`,
-				"aria-pressed": e.toLowerCase() === s.toLowerCase()
-			}, e)), /* @__PURE__ */ i("button", {
+				title: `${x}: ${e}`,
+				"aria-label": `${x}: ${e}`,
+				"aria-pressed": e.toLowerCase() === c.toLowerCase()
+			}, e)), /* @__PURE__ */ a("button", {
 				type: "button",
 				className: "rte-toolbar__color-clear",
 				onClick: () => {
-					c(""), m(!1);
+					l(""), h(!1);
 				},
-				title: `Clear ${v}`,
-				"aria-label": `Clear ${v}`,
-				"aria-pressed": !s,
+				title: `Clear ${x}`,
+				"aria-label": `Clear ${x}`,
+				"aria-pressed": !c,
 				children: "Clear"
 			})]
 		})]
 	});
 };
 //#endregion
-export { s as ColorPicker };
+export { c as ColorPicker };
 
 //# sourceMappingURL=ColorPicker.js.map

package/dist/components/pro/RichTextEditor/Toolbar/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","names":[],"sources":["../../../../../src/components/pro/RichTextEditor/Toolbar/ColorPicker.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useId } from 'react';\n\ninterface ColorPickerProps {\n  value: string;\n  onChange: (color: string) => void;\n  title?: string;\n  icon?: React.ReactNode;\n  kind?: 'text' | 'highlight';\n  /** Button class; defaults to the classic toolbar button. Bubble toolbar passes its own. */\n  buttonClassName?: string;\n}\n\nconst COLORS = [\n  '#000000', '#434343', '#666666', '#999999', '#cccccc', '#eeeeee', '#ffffff',\n  '#ff0000', '#ff4500', '#ff8c00', '#ffd700', '#32cd32', '#00bfff', '#8a2be2',\n  '#ff69b4', '#dc143c', '#ff6347', '#ffa500', '#9acd32', '#20b2aa', '#4169e1',\n  '#9370db', '#db7093', '#b22222', '#d2691e', '#daa520', '#228b22', '#008b8b',\n  '#191970', '#4b0082',\n];\n\nexport const ColorPicker: React.FC<ColorPickerProps> = ({ value, onChange, title, icon, kind = 'text', buttonClassName = 'rte-toolbar__btn' }) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const paletteId = useId();\n  const label = title || (kind === 'text' ? 'Text color' : 'Highlight color');\n  const description = `${label}: ${value || (kind === 'text' ? 'Default' : 'None')}`;\n\n  useEffect(() => {\n    const handler = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener('mousedown', handler);\n    return () => document.removeEventListener('mousedown', handler);\n  }, []);\n\n  return (\n    <div ref={ref} className=\"rte-toolbar__color-picker\"\n      onBlur={(event) => {\n        if (!event.currentTarget.contains(event.relatedTarget)) setIsOpen(false);\n      }}\n      onKeyDown={(event) => {\n        if (event.key === 'Escape' && isOpen) {\n          event.preventDefault();\n          event.stopPropagation();\n          setIsOpen(false);\n          triggerRef.current?.focus();\n        }\n      }}>\n      <button\n        type=\"button\"\n        ref={triggerRef}\n        className={`${buttonClassName} rte-toolbar__color-trigger`}\n        onClick={() => setIsOpen(!isOpen)}\n        title={description}\n        aria-label={description}\n        aria-expanded={isOpen}\n        aria-controls={isOpen ? paletteId : undefined}\n      >\n        <span className={`rte-toolbar__color-icon rte-toolbar__color-icon--${kind}`} aria-hidden=\"true\">\n          {icon || (kind === 'text' ? <span className=\"rte-toolbar__color-letter\">A</span> : (\n            <svg width=\"18\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n              <path d=\"m14 3 7 7-9 9-7-7zM5 12l-2 7 2 2 7-2M14 7l3 3M3 21h6\" />\n            </svg>\n          ))}\n          <span\n            className={`rte-toolbar__color-indicator${value ? '' : ' rte-toolbar__color-indicator--empty'}`}\n            style={{ backgroundColor: value || undefined }}\n          />\n        </span>\n      </button>\n      {isOpen && (\n        <div id={paletteId} className=\"rte-toolbar__color-dropdown\" role=\"group\" aria-label={label}>\n          {COLORS.map((c) => (\n            <button\n              key={c}\n              type=\"button\"\n              className={`rte-toolbar__color-swatch ${c === value ? 'rte-toolbar__color-swatch--active' : ''}`}\n              style={{ backgroundColor: c }}\n              onClick={() => { onChange(c); setIsOpen(false); }}\n              title={`${label}: ${c}`}\n              aria-label={`${label}: ${c}`}\n              aria-pressed={c.toLowerCase() === value.toLowerCase()}\n            />\n          ))}\n          <button\n            type=\"button\"\n            className=\"rte-toolbar__color-clear\"\n            onClick={() => { onChange(''); setIsOpen(false); }}\n            title={`Clear ${label}`}\n            aria-label={`Clear ${label}`}\n            aria-pressed={!value}\n          >\n            Clear\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;AAYA,IAAM,IAAS,2QAMf,GAEa,KAA2C,EAAE,UAAO,aAAU,UAAO,SAAM,UAAO,QAAQ,qBAAkB,yBAAyB;CAChJ,IAAM,CAAC,GAAQ,KAAa,EAAS,EAAK,GACpC,IAAM,EAAuB,IAAI,GACjC,IAAa,EAA0B,IAAI,GAC3C,IAAY,EAAM,GAClB,IAAQ,MAAU,MAAS,SAAS,eAAe,oBACnD,IAAc,GAAG,EAAM,IAAI,MAAU,MAAS,SAAS,YAAY;CAYzE,OAVA,QAAgB;EACd,IAAM,KAAW,MAAkB;GACjC,AAAI,EAAI,WAAW,CAAC,EAAI,QAAQ,SAAS,EAAE,MAAc,KACvD,EAAU,EAAK;EAEnB;EAEA,OADA,SAAS,iBAAiB,aAAa,CAAO,SACjC,SAAS,oBAAoB,aAAa,CAAO;CAChE,GAAG,CAAC,CAAC,GAGH,kBAAC,OAAD;EAAU;EAAK,WAAU;EACvB,SAAS,MAAU;GACjB,AAAK,EAAM,cAAc,SAAS,EAAM,aAAa,KAAG,EAAU,EAAK;EACzE;EACA,YAAY,MAAU;GACpB,AAAI,EAAM,QAAQ,YAAY,MAC5B,EAAM,eAAe,GACrB,EAAM,gBAAgB,GACtB,EAAU,EAAK,GACf,EAAW,SAAS,MAAM;EAE9B;EAXF,UAAA,CAYE,kBAAC,UAAD;GACE,MAAK;GACL,KAAK;GACL,WAAW,GAAG,EAAgB;GAC9B,eAAe,EAAU,CAAC,CAAM;GAChC,OAAO;GACP,cAAY;GACZ,iBAAe;GACf,iBAAe,IAAS,IAAY,KAAA;GAEpC,UAAA,kBAAC,QAAD;IAAM,WAAW,oDAAoD;IAAQ,eAAY;IAAzF,UAAA,CACG,MAAS,MAAS,SAAS,kBAAC,QAAD;KAAM,WAAU;KAA4B,UAAA;IAAO,CAAA,IAC7E,kBAAC,OAAD;KAAK,OAAM;KAAK,QAAO;KAAK,SAAQ;KAAY,MAAK;KAAO,QAAO;KAAe,aAAY;KAAI,eAAc;KAAQ,gBAAe;KACrI,UAAA,kBAAC,QAAD,EAAM,GAAE,uDAAwD,CAAA;IAC7D,CAAA,IAEP,kBAAC,QAAD;KACE,WAAW,+BAA+B,IAAQ,KAAK;KACvD,OAAO,EAAE,iBAAiB,KAAS,KAAA,EAAU;IAC9C,CAAA,CACG;;EACA,CAAA,GACP,KACC,kBAAC,OAAD;GAAK,IAAI;GAAW,WAAU;GAA8B,MAAK;GAAQ,cAAY;GAArF,UAAA,CACG,EAAO,KAAK,MACX,kBAAC,UAAD;IAEE,MAAK;IACL,WAAW,6BAA6B,MAAM,IAAQ,sCAAsC;IAC5F,OAAO,EAAE,iBAAiB,EAAE;IAC5B,eAAe;KAAe,AAAb,EAAS,CAAC,GAAG,EAAU,EAAK;IAAG;IAChD,OAAO,GAAG,EAAM,IAAI;IACpB,cAAY,GAAG,EAAM,IAAI;IACzB,gBAAc,EAAE,YAAY,MAAM,EAAM,YAAY;GACrD,GARM,CAQN,CACF,GACD,kBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,eAAe;KAAgB,AAAd,EAAS,EAAE,GAAG,EAAU,EAAK;IAAG;IACjD,OAAO,SAAS;IAChB,cAAY,SAAS;IACrB,gBAAc,CAAC;IAChB,UAAA;GAEO,CAAA,CACL;EAEJ,CAAA,CAAA;;AAET"}
+{"version":3,"file":"ColorPicker.js","names":[],"sources":["../../../../../src/components/pro/RichTextEditor/Toolbar/ColorPicker.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useId } from 'react';\nimport { useAnchoredDropdown } from './useAnchoredDropdown';\n\ninterface ColorPickerProps {\n  value: string;\n  onChange: (color: string) => void;\n  title?: string;\n  icon?: React.ReactNode;\n  kind?: 'text' | 'highlight';\n  /** Button class; defaults to the classic toolbar button. Bubble toolbar passes its own. */\n  buttonClassName?: string;\n}\n\nconst COLORS = [\n  '#000000', '#434343', '#666666', '#999999', '#cccccc', '#eeeeee', '#ffffff',\n  '#ff0000', '#ff4500', '#ff8c00', '#ffd700', '#32cd32', '#00bfff', '#8a2be2',\n  '#ff69b4', '#dc143c', '#ff6347', '#ffa500', '#9acd32', '#20b2aa', '#4169e1',\n  '#9370db', '#db7093', '#b22222', '#d2691e', '#daa520', '#228b22', '#008b8b',\n  '#191970', '#4b0082',\n];\n\nexport const ColorPicker: React.FC<ColorPickerProps> = ({ value, onChange, title, icon, kind = 'text', buttonClassName = 'rte-toolbar__btn' }) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const paletteRef = useRef<HTMLDivElement>(null);\n  const paletteId = useId();\n  const dropdownStyle = useAnchoredDropdown(isOpen, triggerRef, paletteRef);\n  const label = title || (kind === 'text' ? 'Text color' : 'Highlight color');\n  const description = `${label}: ${value || (kind === 'text' ? 'Default' : 'None')}`;\n\n  useEffect(() => {\n    const handler = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener('mousedown', handler);\n    return () => document.removeEventListener('mousedown', handler);\n  }, []);\n\n  return (\n    <div ref={ref} className=\"rte-toolbar__color-picker\"\n      onBlur={(event) => {\n        if (!event.currentTarget.contains(event.relatedTarget)) setIsOpen(false);\n      }}\n      onKeyDown={(event) => {\n        if (event.key === 'Escape' && isOpen) {\n          event.preventDefault();\n          event.stopPropagation();\n          setIsOpen(false);\n          triggerRef.current?.focus();\n        }\n      }}>\n      <button\n        type=\"button\"\n        ref={triggerRef}\n        className={`${buttonClassName} rte-toolbar__color-trigger`}\n        onClick={() => setIsOpen(!isOpen)}\n        title={description}\n        aria-label={description}\n        aria-expanded={isOpen}\n        aria-controls={isOpen ? paletteId : undefined}\n      >\n        <span className={`rte-toolbar__color-icon rte-toolbar__color-icon--${kind}`} aria-hidden=\"true\">\n          {icon || (kind === 'text' ? <span className=\"rte-toolbar__color-letter\">A</span> : (\n            <svg width=\"18\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n              <path d=\"m14 3 7 7-9 9-7-7zM5 12l-2 7 2 2 7-2M14 7l3 3M3 21h6\" />\n            </svg>\n          ))}\n          <span\n            className={`rte-toolbar__color-indicator${value ? '' : ' rte-toolbar__color-indicator--empty'}`}\n            style={{ backgroundColor: value || undefined }}\n          />\n        </span>\n      </button>\n      {isOpen && (\n        <div ref={paletteRef} id={paletteId} className=\"rte-toolbar__color-dropdown\" role=\"group\" aria-label={label} style={dropdownStyle}>\n          {COLORS.map((c) => (\n            <button\n              key={c}\n              type=\"button\"\n              className={`rte-toolbar__color-swatch ${c === value ? 'rte-toolbar__color-swatch--active' : ''}`}\n              style={{ backgroundColor: c }}\n              onClick={() => { onChange(c); setIsOpen(false); }}\n              title={`${label}: ${c}`}\n              aria-label={`${label}: ${c}`}\n              aria-pressed={c.toLowerCase() === value.toLowerCase()}\n            />\n          ))}\n          <button\n            type=\"button\"\n            className=\"rte-toolbar__color-clear\"\n            onClick={() => { onChange(''); setIsOpen(false); }}\n            title={`Clear ${label}`}\n            aria-label={`Clear ${label}`}\n            aria-pressed={!value}\n          >\n            Clear\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;AAaA,IAAM,IAAS,2QAMf,GAEa,KAA2C,EAAE,UAAO,aAAU,UAAO,SAAM,UAAO,QAAQ,qBAAkB,yBAAyB;CAChJ,IAAM,CAAC,GAAQ,KAAa,EAAS,EAAK,GACpC,IAAM,EAAuB,IAAI,GACjC,IAAa,EAA0B,IAAI,GAC3C,IAAa,EAAuB,IAAI,GACxC,IAAY,EAAM,GAClB,IAAgB,EAAoB,GAAQ,GAAY,CAAU,GAClE,IAAQ,MAAU,MAAS,SAAS,eAAe,oBACnD,IAAc,GAAG,EAAM,IAAI,MAAU,MAAS,SAAS,YAAY;CAYzE,OAVA,QAAgB;EACd,IAAM,KAAW,MAAkB;GACjC,AAAI,EAAI,WAAW,CAAC,EAAI,QAAQ,SAAS,EAAE,MAAc,KACvD,EAAU,EAAK;EAEnB;EAEA,OADA,SAAS,iBAAiB,aAAa,CAAO,SACjC,SAAS,oBAAoB,aAAa,CAAO;CAChE,GAAG,CAAC,CAAC,GAGH,kBAAC,OAAD;EAAU;EAAK,WAAU;EACvB,SAAS,MAAU;GACjB,AAAK,EAAM,cAAc,SAAS,EAAM,aAAa,KAAG,EAAU,EAAK;EACzE;EACA,YAAY,MAAU;GACpB,AAAI,EAAM,QAAQ,YAAY,MAC5B,EAAM,eAAe,GACrB,EAAM,gBAAgB,GACtB,EAAU,EAAK,GACf,EAAW,SAAS,MAAM;EAE9B;EAXF,UAAA,CAYE,kBAAC,UAAD;GACE,MAAK;GACL,KAAK;GACL,WAAW,GAAG,EAAgB;GAC9B,eAAe,EAAU,CAAC,CAAM;GAChC,OAAO;GACP,cAAY;GACZ,iBAAe;GACf,iBAAe,IAAS,IAAY,KAAA;GAEpC,UAAA,kBAAC,QAAD;IAAM,WAAW,oDAAoD;IAAQ,eAAY;IAAzF,UAAA,CACG,MAAS,MAAS,SAAS,kBAAC,QAAD;KAAM,WAAU;KAA4B,UAAA;IAAO,CAAA,IAC7E,kBAAC,OAAD;KAAK,OAAM;KAAK,QAAO;KAAK,SAAQ;KAAY,MAAK;KAAO,QAAO;KAAe,aAAY;KAAI,eAAc;KAAQ,gBAAe;KACrI,UAAA,kBAAC,QAAD,EAAM,GAAE,uDAAwD,CAAA;IAC7D,CAAA,IAEP,kBAAC,QAAD;KACE,WAAW,+BAA+B,IAAQ,KAAK;KACvD,OAAO,EAAE,iBAAiB,KAAS,KAAA,EAAU;IAC9C,CAAA,CACG;;EACA,CAAA,GACP,KACC,kBAAC,OAAD;GAAK,KAAK;GAAY,IAAI;GAAW,WAAU;GAA8B,MAAK;GAAQ,cAAY;GAAO,OAAO;GAApH,UAAA,CACG,EAAO,KAAK,MACX,kBAAC,UAAD;IAEE,MAAK;IACL,WAAW,6BAA6B,MAAM,IAAQ,sCAAsC;IAC5F,OAAO,EAAE,iBAAiB,EAAE;IAC5B,eAAe;KAAe,AAAb,EAAS,CAAC,GAAG,EAAU,EAAK;IAAG;IAChD,OAAO,GAAG,EAAM,IAAI;IACpB,cAAY,GAAG,EAAM,IAAI;IACzB,gBAAc,EAAE,YAAY,MAAM,EAAM,YAAY;GACrD,GARM,CAQN,CACF,GACD,kBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,eAAe;KAAgB,AAAd,EAAS,EAAE,GAAG,EAAU,EAAK;IAAG;IACjD,OAAO,SAAS;IAChB,cAAY,SAAS;IACrB,gBAAc,CAAC;IAChB,UAAA;GAEO,CAAA,CACL;EAEJ,CAAA,CAAA;;AAET"}

package/dist/components/pro/RichTextEditor/Toolbar/FloatingDialogMenu.js

@@ -1,12 +1,13 @@
-import { useEffect as e, useRef as t, useState as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { flushSync as a } from "react-dom";
+import { useAnchoredDropdown as e } from "./useAnchoredDropdown.js";
+import { useEffect as t, useRef as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { flushSync as o } from "react-dom";
 //#region src/components/pro/RichTextEditor/Toolbar/FloatingDialogMenu.tsx
-var o = [
+var s = [
 	{
 		key: "block",
 		labelKey: "layoutBlock",
-		icon: /* @__PURE__ */ i("svg", {
+		icon: /* @__PURE__ */ a("svg", {
 			width: "14",
 			height: "14",
 			viewBox: "0 0 24 24",
@@ -14,20 +15,20 @@ var o = [
 			stroke: "currentColor",
 			strokeWidth: "2",
 			children: [
-				/* @__PURE__ */ r("rect", {
+				/* @__PURE__ */ i("rect", {
 					x: "3",
 					y: "5",
 					width: "18",
 					height: "14",
 					rx: "2"
 				}),
-				/* @__PURE__ */ r("line", {
+				/* @__PURE__ */ i("line", {
 					x1: "3",
 					y1: "3",
 					x2: "21",
 					y2: "3"
 				}),
-				/* @__PURE__ */ r("line", {
+				/* @__PURE__ */ i("line", {
 					x1: "3",
 					y1: "21",
 					x2: "21",
@@ -39,7 +40,7 @@ var o = [
 	{
 		key: "wrap-left",
 		labelKey: "layoutWrapLeft",
-		icon: /* @__PURE__ */ i("svg", {
+		icon: /* @__PURE__ */ a("svg", {
 			width: "14",
 			height: "14",
 			viewBox: "0 0 24 24",
@@ -47,38 +48,38 @@ var o = [
 			stroke: "currentColor",
 			strokeWidth: "2",
 			children: [
-				/* @__PURE__ */ r("rect", {
+				/* @__PURE__ */ i("rect", {
 					x: "2",
 					y: "4",
 					width: "10",
 					height: "8",
 					rx: "1"
 				}),
-				/* @__PURE__ */ r("line", {
+				/* @__PURE__ */ i("line", {
 					x1: "15",
 					y1: "5",
 					x2: "22",
 					y2: "5"
 				}),
-				/* @__PURE__ */ r("line", {
+				/* @__PURE__ */ i("line", {
 					x1: "15",
 					y1: "8",
 					x2: "22",
 					y2: "8"
 				}),
-				/* @__PURE__ */ r("line", {
+				/* @__PURE__ */ i("line", {
 					x1: "15",
 					y1: "11",
 					x2: "22",
 					y2: "11"
 				}),
-				/* @__PURE__ */ r("line", {
+				/* @__PURE__ */ i("line", {
 					x1: "2",
 					y1: "15",
 					x2: "22",
 					y2: "15"
 				}),
-				/* @__PURE__ */ r("line", {
+				/* @__PURE__ */ i("line", {
 					x1: "2",
 					y1: "18",
 					x2: "22",
@@ -90,7 +91,7 @@ var o = [
 	{
 		key: "wrap-right",
 		labelKey: "layoutWrapRight",
-		icon: /* @__PURE__ */ i("svg", {
+		icon: /* @__PURE__ */ a("svg", {
 			width: "14",
 			height: "14",
 			viewBox: "0 0 24 24",
@@ -98,38 +99,38 @@ var o = [
 			stroke: "currentColor",
 			strokeWidth: "2",
 			children: [
-				/* @__PURE__ */ r("rect", {
+				/* @__PURE__ */ i("rect", {
 					x: "12",
 					y: "4",
 					width: "10",
 					height: "8",
 					rx: "1"
 				}),
-				/* @__PURE__ */ r("line", {
+				/* @__PURE__ */ i("line", {
 					x1: "2",
 					y1: "5",
 					x2: "9",
 					y2: "5"
 				}),
-				/* @__PURE__ */ r("line", {
+				/* @__PURE__ */ i("line", {
 					x1: "2",
 					y1: "8",
 					x2: "9",
 					y2: "8"
 				}),
-				/* @__PURE__ */ r("line", {
+				/* @__PURE__ */ i("line", {
 					x1: "2",
 					y1: "11",
 					x2: "9",
 					y2: "11"
 				}),
-				/* @__PURE__ */ r("line", {
+				/* @__PURE__ */ i("line", {
 					x1: "2",
 					y1: "15",
 					x2: "22",
 					y2: "15"
 				}),
-				/* @__PURE__ */ r("line", {
+				/* @__PURE__ */ i("line", {
 					x1: "2",
 					y1: "18",
 					x2: "22",
@@ -141,7 +142,7 @@ var o = [
 	{
 		key: "float",
 		labelKey: "layoutFloat",
-		icon: /* @__PURE__ */ i("svg", {
+		icon: /* @__PURE__ */ a("svg", {
 			width: "14",
 			height: "14",
 			viewBox: "0 0 24 24",
@@ -149,25 +150,25 @@ var o = [
 			stroke: "currentColor",
 			strokeWidth: "2",
 			children: [
-				/* @__PURE__ */ r("rect", {
+				/* @__PURE__ */ i("rect", {
 					x: "6",
 					y: "6",
 					width: "12",
 					height: "12",
 					rx: "2"
 				}),
-				/* @__PURE__ */ r("path", {
+				/* @__PURE__ */ i("path", {
 					d: "M2 2h4M18 2h4M2 22h4M18 22h4",
 					strokeDasharray: "2 2"
 				}),
-				/* @__PURE__ */ r("line", {
+				/* @__PURE__ */ i("line", {
 					x1: "2",
 					y1: "12",
 					x2: "6",
 					y2: "12",
 					strokeDasharray: "2 2"
 				}),
-				/* @__PURE__ */ r("line", {
+				/* @__PURE__ */ i("line", {
 					x1: "18",
 					y1: "12",
 					x2: "22",
@@ -177,25 +178,26 @@ var o = [
 			]
 		})
 	}
-], s = ({ labels: s, onInsert: c }) => {
-	let [l, u] = n(!1), d = t(null), f = t("");
-	return e(() => {
+], c = ({ labels: c, onInsert: l }) => {
+	let [u, d] = r(!1), f = n(null), p = n(null), m = n(null), h = e(u, p, m), g = n("");
+	return t(() => {
 		let e = (e) => {
-			d.current && !d.current.contains(e.target) && u(!1);
+			f.current && !f.current.contains(e.target) && d(!1);
 		};
 		return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
-	}, []), /* @__PURE__ */ i("div", {
-		ref: d,
+	}, []), /* @__PURE__ */ a("div", {
+		ref: f,
 		className: "rte-toolbar__template-menu",
 		onPointerDown: (e) => {
-			f.current = e.pointerType;
+			g.current = e.pointerType;
 		},
-		children: [/* @__PURE__ */ i("button", {
+		children: [/* @__PURE__ */ a("button", {
 			type: "button",
-			className: `rte-toolbar__btn ${l ? "rte-toolbar__btn--active" : ""}`,
-			"aria-expanded": l,
-			onClick: () => u(!l),
-			title: s.floatingDialog || "Floating Dialog",
+			ref: p,
+			className: `rte-toolbar__btn ${u ? "rte-toolbar__btn--active" : ""}`,
+			"aria-expanded": u,
+			onClick: () => d(!u),
+			title: c.floatingDialog || "Floating Dialog",
 			style: {
 				width: "auto",
 				padding: "0 6px",
@@ -203,7 +205,7 @@ var o = [
 				display: "inline-flex",
 				alignItems: "center"
 			},
-			children: [/* @__PURE__ */ i("svg", {
+			children: [/* @__PURE__ */ a("svg", {
 				width: "16",
 				height: "16",
 				viewBox: "0 0 24 24",
@@ -213,53 +215,57 @@ var o = [
 				strokeLinecap: "round",
 				strokeLinejoin: "round",
 				children: [
-					/* @__PURE__ */ r("rect", {
+					/* @__PURE__ */ i("rect", {
 						x: "2",
 						y: "4",
 						width: "13",
 						height: "10",
 						rx: "2"
 					}),
-					/* @__PURE__ */ r("path", { d: "M9 10h11a2 2 0 012 2v6a2 2 0 01-2 2H9a2 2 0 01-2-2v-2" }),
-					/* @__PURE__ */ r("line", {
+					/* @__PURE__ */ i("path", { d: "M9 10h11a2 2 0 012 2v6a2 2 0 01-2 2H9a2 2 0 01-2-2v-2" }),
+					/* @__PURE__ */ i("line", {
 						x1: "7",
 						y1: "14",
 						x2: "13",
 						y2: "14"
 					})
 				]
-			}), /* @__PURE__ */ r("svg", {
+			}), /* @__PURE__ */ i("svg", {
 				width: "10",
 				height: "10",
 				viewBox: "0 0 24 24",
 				fill: "none",
 				stroke: "currentColor",
 				strokeWidth: "2.5",
-				children: /* @__PURE__ */ r("polyline", { points: "6 9 12 15 18 9" })
+				children: /* @__PURE__ */ i("polyline", { points: "6 9 12 15 18 9" })
 			})]
-		}), l && /* @__PURE__ */ r("div", {
+		}), u && /* @__PURE__ */ i("div", {
+			ref: m,
 			className: "rte-toolbar__template-dropdown",
-			style: { minWidth: 140 },
-			children: o.map((e) => /* @__PURE__ */ i("button", {
+			style: {
+				...h,
+				minWidth: 140
+			},
+			children: s.map((e) => /* @__PURE__ */ a("button", {
 				type: "button",
 				className: "rte-toolbar__template-item",
 				onClick: (t) => {
-					let n = t.detail === 0 || f.current !== "touch";
-					a(() => u(!1)), c(e.key, n);
+					let n = t.detail === 0 || g.current !== "touch";
+					o(() => d(!1)), l(e.key, n);
 				},
-				children: [/* @__PURE__ */ r("span", {
+				children: [/* @__PURE__ */ i("span", {
 					className: "rte-toolbar__template-icon",
 					style: {
 						display: "flex",
 						alignItems: "center"
 					},
 					children: e.icon
-				}), /* @__PURE__ */ r("span", { children: s[e.labelKey] || e.labelKey })]
+				}), /* @__PURE__ */ i("span", { children: c[e.labelKey] || e.labelKey })]
 			}, e.key))
 		})]
 	});
 };
 //#endregion
-export { s as FloatingDialogMenu };
+export { c as FloatingDialogMenu };
 
 //# sourceMappingURL=FloatingDialogMenu.js.map

package/dist/components/pro/RichTextEditor/Toolbar/FloatingDialogMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingDialogMenu.js","names":[],"sources":["../../../../../src/components/pro/RichTextEditor/Toolbar/FloatingDialogMenu.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport { flushSync } from 'react-dom';\nimport type { RichTextEditorLabels } from '../types';\n\ninterface FloatingDialogMenuProps {\n  labels: RichTextEditorLabels;\n  onInsert: (layout: 'block' | 'wrap-left' | 'wrap-right' | 'float', focusEditor?: boolean) => void;\n}\n\nconst DIALOG_LAYOUT_OPTIONS: { key: 'block' | 'wrap-left' | 'wrap-right' | 'float'; labelKey: keyof RichTextEditorLabels; icon: React.ReactNode }[] = [\n  {\n    key: 'block', labelKey: 'layoutBlock',\n    icon: <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" /><line x1=\"3\" y1=\"3\" x2=\"21\" y2=\"3\" /><line x1=\"3\" y1=\"21\" x2=\"21\" y2=\"21\" /></svg>,\n  },\n  {\n    key: 'wrap-left', labelKey: 'layoutWrapLeft',\n    icon: <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><rect x=\"2\" y=\"4\" width=\"10\" height=\"8\" rx=\"1\" /><line x1=\"15\" y1=\"5\" x2=\"22\" y2=\"5\" /><line x1=\"15\" y1=\"8\" x2=\"22\" y2=\"8\" /><line x1=\"15\" y1=\"11\" x2=\"22\" y2=\"11\" /><line x1=\"2\" y1=\"15\" x2=\"22\" y2=\"15\" /><line x1=\"2\" y1=\"18\" x2=\"22\" y2=\"18\" /></svg>,\n  },\n  {\n    key: 'wrap-right', labelKey: 'layoutWrapRight',\n    icon: <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><rect x=\"12\" y=\"4\" width=\"10\" height=\"8\" rx=\"1\" /><line x1=\"2\" y1=\"5\" x2=\"9\" y2=\"5\" /><line x1=\"2\" y1=\"8\" x2=\"9\" y2=\"8\" /><line x1=\"2\" y1=\"11\" x2=\"9\" y2=\"11\" /><line x1=\"2\" y1=\"15\" x2=\"22\" y2=\"15\" /><line x1=\"2\" y1=\"18\" x2=\"22\" y2=\"18\" /></svg>,\n  },\n  {\n    key: 'float', labelKey: 'layoutFloat',\n    icon: <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><rect x=\"6\" y=\"6\" width=\"12\" height=\"12\" rx=\"2\" /><path d=\"M2 2h4M18 2h4M2 22h4M18 22h4\" strokeDasharray=\"2 2\" /><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\" strokeDasharray=\"2 2\" /><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\" strokeDasharray=\"2 2\" /></svg>,\n  },\n];\n\nexport const FloatingDialogMenu: React.FC<FloatingDialogMenuProps> = ({ labels, onInsert }) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n  const pointerType = useRef('');\n\n  useEffect(() => {\n    const handler = (e: PointerEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) setIsOpen(false);\n    };\n    document.addEventListener('pointerdown', handler);\n    return () => document.removeEventListener('pointerdown', handler);\n  }, []);\n\n  return (\n    <div ref={ref} className=\"rte-toolbar__template-menu\" onPointerDown={(event) => { pointerType.current = event.pointerType; }}>\n      <button\n        type=\"button\"\n        className={`rte-toolbar__btn ${isOpen ? 'rte-toolbar__btn--active' : ''}`}\n        aria-expanded={isOpen}\n                onClick={() => setIsOpen(!isOpen)}\n        title={labels.floatingDialog || 'Floating Dialog'}\n        style={{ width: 'auto', padding: '0 6px', gap: '2px', display: 'inline-flex', alignItems: 'center' }}\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n          <rect x=\"2\" y=\"4\" width=\"13\" height=\"10\" rx=\"2\" />\n          <path d=\"M9 10h11a2 2 0 012 2v6a2 2 0 01-2 2H9a2 2 0 01-2-2v-2\" />\n          <line x1=\"7\" y1=\"14\" x2=\"13\" y2=\"14\" />\n        </svg>\n        <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\">\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </button>\n      {isOpen && (\n        <div className=\"rte-toolbar__template-dropdown\" style={{ minWidth: 140 }}>\n          {DIALOG_LAYOUT_OPTIONS.map((opt) => (\n            <button\n              key={opt.key}\n              type=\"button\"\n              className=\"rte-toolbar__template-item\"\n              onClick={(event) => {\n                              const focusEditor = event.detail === 0 || pointerType.current !== 'touch';\n                              flushSync(() => setIsOpen(false));\n                              onInsert(opt.key, focusEditor);\n                            }}\n            >\n              <span className=\"rte-toolbar__template-icon\" style={{ display: 'flex', alignItems: 'center' }}>{opt.icon}</span>\n              <span>{labels[opt.labelKey] || opt.labelKey}</span>\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"FloatingDialogMenu.js","names":[],"sources":["../../../../../src/components/pro/RichTextEditor/Toolbar/FloatingDialogMenu.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport { flushSync } from 'react-dom';\nimport type { RichTextEditorLabels } from '../types';\nimport { useAnchoredDropdown } from './useAnchoredDropdown';\n\ninterface FloatingDialogMenuProps {\n  labels: RichTextEditorLabels;\n  onInsert: (layout: 'block' | 'wrap-left' | 'wrap-right' | 'float', focusEditor?: boolean) => void;\n}\n\nconst DIALOG_LAYOUT_OPTIONS: { key: 'block' | 'wrap-left' | 'wrap-right' | 'float'; labelKey: keyof RichTextEditorLabels; icon: React.ReactNode }[] = [\n  {\n    key: 'block', labelKey: 'layoutBlock',\n    icon: <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" /><line x1=\"3\" y1=\"3\" x2=\"21\" y2=\"3\" /><line x1=\"3\" y1=\"21\" x2=\"21\" y2=\"21\" /></svg>,\n  },\n  {\n    key: 'wrap-left', labelKey: 'layoutWrapLeft',\n    icon: <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><rect x=\"2\" y=\"4\" width=\"10\" height=\"8\" rx=\"1\" /><line x1=\"15\" y1=\"5\" x2=\"22\" y2=\"5\" /><line x1=\"15\" y1=\"8\" x2=\"22\" y2=\"8\" /><line x1=\"15\" y1=\"11\" x2=\"22\" y2=\"11\" /><line x1=\"2\" y1=\"15\" x2=\"22\" y2=\"15\" /><line x1=\"2\" y1=\"18\" x2=\"22\" y2=\"18\" /></svg>,\n  },\n  {\n    key: 'wrap-right', labelKey: 'layoutWrapRight',\n    icon: <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><rect x=\"12\" y=\"4\" width=\"10\" height=\"8\" rx=\"1\" /><line x1=\"2\" y1=\"5\" x2=\"9\" y2=\"5\" /><line x1=\"2\" y1=\"8\" x2=\"9\" y2=\"8\" /><line x1=\"2\" y1=\"11\" x2=\"9\" y2=\"11\" /><line x1=\"2\" y1=\"15\" x2=\"22\" y2=\"15\" /><line x1=\"2\" y1=\"18\" x2=\"22\" y2=\"18\" /></svg>,\n  },\n  {\n    key: 'float', labelKey: 'layoutFloat',\n    icon: <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><rect x=\"6\" y=\"6\" width=\"12\" height=\"12\" rx=\"2\" /><path d=\"M2 2h4M18 2h4M2 22h4M18 22h4\" strokeDasharray=\"2 2\" /><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\" strokeDasharray=\"2 2\" /><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\" strokeDasharray=\"2 2\" /></svg>,\n  },\n];\n\nexport const FloatingDialogMenu: React.FC<FloatingDialogMenuProps> = ({ labels, onInsert }) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const dropdownStyle = useAnchoredDropdown(isOpen, triggerRef, dropdownRef);\n  const pointerType = useRef('');\n\n  useEffect(() => {\n    const handler = (e: PointerEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) setIsOpen(false);\n    };\n    document.addEventListener('pointerdown', handler);\n    return () => document.removeEventListener('pointerdown', handler);\n  }, []);\n\n  return (\n    <div ref={ref} className=\"rte-toolbar__template-menu\" onPointerDown={(event) => { pointerType.current = event.pointerType; }}>\n      <button\n        type=\"button\"\n        ref={triggerRef}\n        className={`rte-toolbar__btn ${isOpen ? 'rte-toolbar__btn--active' : ''}`}\n        aria-expanded={isOpen}\n        onClick={() => setIsOpen(!isOpen)}\n        title={labels.floatingDialog || 'Floating Dialog'}\n        style={{ width: 'auto', padding: '0 6px', gap: '2px', display: 'inline-flex', alignItems: 'center' }}\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n          <rect x=\"2\" y=\"4\" width=\"13\" height=\"10\" rx=\"2\" />\n          <path d=\"M9 10h11a2 2 0 012 2v6a2 2 0 01-2 2H9a2 2 0 01-2-2v-2\" />\n          <line x1=\"7\" y1=\"14\" x2=\"13\" y2=\"14\" />\n        </svg>\n        <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\">\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </button>\n      {isOpen && (\n        <div ref={dropdownRef} className=\"rte-toolbar__template-dropdown\" style={{ ...dropdownStyle, minWidth: 140 }}>\n          {DIALOG_LAYOUT_OPTIONS.map((opt) => (\n            <button\n              key={opt.key}\n              type=\"button\"\n              className=\"rte-toolbar__template-item\"\n              onClick={(event) => {\n                const focusEditor = event.detail === 0 || pointerType.current !== 'touch';\n                flushSync(() => setIsOpen(false));\n                onInsert(opt.key, focusEditor);\n              }}\n            >\n              <span className=\"rte-toolbar__template-icon\" style={{ display: 'flex', alignItems: 'center' }}>{opt.icon}</span>\n              <span>{labels[opt.labelKey] || opt.labelKey}</span>\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;AAUA,IAAM,IAAgJ;CACpJ;EACE,KAAK;EAAS,UAAU;EACxB,MAAM,kBAAC,OAAD;GAAK,OAAM;GAAK,QAAO;GAAK,SAAQ;GAAY,MAAK;GAAO,QAAO;GAAe,aAAY;GAA9F,UAAA;IAAkG,kBAAC,QAAD;KAAM,GAAE;KAAI,GAAE;KAAI,OAAM;KAAK,QAAO;KAAK,IAAG;IAAK,CAAA;IAAC,kBAAC,QAAD;KAAM,IAAG;KAAI,IAAG;KAAI,IAAG;KAAK,IAAG;IAAK,CAAA;IAAC,kBAAC,QAAD;KAAM,IAAG;KAAI,IAAG;KAAK,IAAG;KAAK,IAAG;IAAM,CAAA;GAAM;;CAC7O;CACA;EACE,KAAK;EAAa,UAAU;EAC5B,MAAM,kBAAC,OAAD;GAAK,OAAM;GAAK,QAAO;GAAK,SAAQ;GAAY,MAAK;GAAO,QAAO;GAAe,aAAY;GAA9F,UAAA;IAAkG,kBAAC,QAAD;KAAM,GAAE;KAAI,GAAE;KAAI,OAAM;KAAK,QAAO;KAAI,IAAG;IAAK,CAAA;IAAC,kBAAC,QAAD;KAAM,IAAG;KAAK,IAAG;KAAI,IAAG;KAAK,IAAG;IAAK,CAAA;IAAC,kBAAC,QAAD;KAAM,IAAG;KAAK,IAAG;KAAI,IAAG;KAAK,IAAG;IAAK,CAAA;IAAC,kBAAC,QAAD;KAAM,IAAG;KAAK,IAAG;KAAK,IAAG;KAAK,IAAG;IAAM,CAAA;IAAC,kBAAC,QAAD;KAAM,IAAG;KAAI,IAAG;KAAK,IAAG;KAAK,IAAG;IAAM,CAAA;IAAC,kBAAC,QAAD;KAAM,IAAG;KAAI,IAAG;KAAK,IAAG;KAAK,IAAG;IAAM,CAAA;GAAM;;CAClW;CACA;EACE,KAAK;EAAc,UAAU;EAC7B,MAAM,kBAAC,OAAD;GAAK,OAAM;GAAK,QAAO;GAAK,SAAQ;GAAY,MAAK;GAAO,QAAO;GAAe,aAAY;GAA9F,UAAA;IAAkG,kBAAC,QAAD;KAAM,GAAE;KAAK,GAAE;KAAI,OAAM;KAAK,QAAO;KAAI,IAAG;IAAK,CAAA;IAAC,kBAAC,QAAD;KAAM,IAAG;KAAI,IAAG;KAAI,IAAG;KAAI,IAAG;IAAK,CAAA;IAAC,kBAAC,QAAD;KAAM,IAAG;KAAI,IAAG;KAAI,IAAG;KAAI,IAAG;IAAK,CAAA;IAAC,kBAAC,QAAD;KAAM,IAAG;KAAI,IAAG;KAAK,IAAG;KAAI,IAAG;IAAM,CAAA;IAAC,kBAAC,QAAD;KAAM,IAAG;KAAI,IAAG;KAAK,IAAG;KAAK,IAAG;IAAM,CAAA;IAAC,kBAAC,QAAD;KAAM,IAAG;KAAI,IAAG;KAAK,IAAG;KAAK,IAAG;IAAM,CAAA;GAAM;;CAC7V;CACA;EACE,KAAK;EAAS,UAAU;EACxB,MAAM,kBAAC,OAAD;GAAK,OAAM;GAAK,QAAO;GAAK,SAAQ;GAAY,MAAK;GAAO,QAAO;GAAe,aAAY;GAA9F,UAAA;IAAkG,kBAAC,QAAD;KAAM,GAAE;KAAI,GAAE;KAAI,OAAM;KAAK,QAAO;KAAK,IAAG;IAAK,CAAA;IAAC,kBAAC,QAAD;KAAM,GAAE;KAA+B,iBAAgB;IAAO,CAAA;IAAC,kBAAC,QAAD;KAAM,IAAG;KAAI,IAAG;KAAK,IAAG;KAAI,IAAG;KAAK,iBAAgB;IAAO,CAAA;IAAC,kBAAC,QAAD;KAAM,IAAG;KAAK,IAAG;KAAK,IAAG;KAAK,IAAG;KAAK,iBAAgB;IAAO,CAAA;GAAM;;CAC1V;AACF,GAEa,KAAyD,EAAE,WAAQ,kBAAe;CAC7F,IAAM,CAAC,GAAQ,KAAa,EAAS,EAAK,GACpC,IAAM,EAAuB,IAAI,GACjC,IAAa,EAA0B,IAAI,GAC3C,IAAc,EAAuB,IAAI,GACzC,IAAgB,EAAoB,GAAQ,GAAY,CAAW,GACnE,IAAc,EAAO,EAAE;CAU7B,OARA,QAAgB;EACd,IAAM,KAAW,MAAoB;GACnC,AAAI,EAAI,WAAW,CAAC,EAAI,QAAQ,SAAS,EAAE,MAAc,KAAG,EAAU,EAAK;EAC7E;EAEA,OADA,SAAS,iBAAiB,eAAe,CAAO,SACnC,SAAS,oBAAoB,eAAe,CAAO;CAClE,GAAG,CAAC,CAAC,GAGH,kBAAC,OAAD;EAAU;EAAK,WAAU;EAA6B,gBAAgB,MAAU;GAAE,EAAY,UAAU,EAAM;EAAa;EAA3H,UAAA,CACE,kBAAC,UAAD;GACE,MAAK;GACL,KAAK;GACL,WAAW,oBAAoB,IAAS,6BAA6B;GACrE,iBAAe;GACf,eAAe,EAAU,CAAC,CAAM;GAChC,OAAO,EAAO,kBAAkB;GAChC,OAAO;IAAE,OAAO;IAAQ,SAAS;IAAS,KAAK;IAAO,SAAS;IAAe,YAAY;GAAS;GAPrG,UAAA,CASE,kBAAC,OAAD;IAAK,OAAM;IAAK,QAAO;IAAK,SAAQ;IAAY,MAAK;IAAO,QAAO;IAAe,aAAY;IAAI,eAAc;IAAQ,gBAAe;IAAvI,UAAA;KACE,kBAAC,QAAD;MAAM,GAAE;MAAI,GAAE;MAAI,OAAM;MAAK,QAAO;MAAK,IAAG;KAAK,CAAA;KACjD,kBAAC,QAAD,EAAM,GAAE,wDAAyD,CAAA;KACjE,kBAAC,QAAD;MAAM,IAAG;MAAI,IAAG;MAAK,IAAG;MAAK,IAAG;KAAM,CAAA;IACnC;GACL,CAAA,GAAA,kBAAC,OAAD;IAAK,OAAM;IAAK,QAAO;IAAK,SAAQ;IAAY,MAAK;IAAO,QAAO;IAAe,aAAY;IAC5F,UAAA,kBAAC,YAAD,EAAU,QAAO,iBAAkB,CAAA;GAChC,CAAA,CACC;EACP,CAAA,GAAA,KACC,kBAAC,OAAD;GAAK,KAAK;GAAa,WAAU;GAAiC,OAAO;IAAE,GAAG;IAAe,UAAU;GAAI;GACxG,UAAA,EAAsB,KAAK,MAC1B,kBAAC,UAAD;IAEE,MAAK;IACL,WAAU;IACV,UAAU,MAAU;KAClB,IAAM,IAAc,EAAM,WAAW,KAAK,EAAY,YAAY;KAElE,AADA,QAAgB,EAAU,EAAK,CAAC,GAChC,EAAS,EAAI,KAAK,CAAW;IAC/B;IARF,UAAA,CAUE,kBAAC,QAAD;KAAM,WAAU;KAA6B,OAAO;MAAE,SAAS;MAAQ,YAAY;KAAS;KAAI,UAAA,EAAI;IAAW,CAAA,GAC/G,kBAAC,QAAD,EAAA,UAAO,EAAO,EAAI,aAAa,EAAI,SAAe,CAAA,CAC5C;GAXD,GAAA,EAAI,GAWH,CACT;EACE,CAAA,CAEJ;;AAET"}