@liveblocks/react-lexical 1.12.0-lexical3

package/dist/floating-selection-container.js

@@ -0,0 +1,157 @@
+'use strict';
+
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var lexical = require('lexical');
+var React = require('react');
+var index_js = require('use-sync-external-store/shim/index.js');
+var reactDom = require('react-dom');
+var selection = require('@lexical/selection');
+var commentPluginProvider = require('./comments/comment-plugin-provider.js');
+
+const FloatingSelectionContainer = React.forwardRef(function FloatingSelectionContainer2(props, forwardedRef) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const selection = useSelection();
+  if (selection === null)
+    return null;
+  if (selection.isCollapsed())
+    return null;
+  const info = editor.getEditorState().read(() => {
+    return {
+      anchor: {
+        node: selection.anchor.getNode(),
+        offset: selection.anchor.offset
+      },
+      focus: {
+        node: selection.focus.getNode(),
+        offset: selection.focus.offset
+      }
+    };
+  });
+  const root = editor.getRootElement();
+  if (root === null)
+    return null;
+  const rootContainer = root.parentElement;
+  if (rootContainer === null)
+    return null;
+  return reactDom.createPortal(
+    /* @__PURE__ */ React.createElement(FloatingSelectionContainerImpl, {
+      ...props,
+      selection: info,
+      ref: forwardedRef
+    }),
+    rootContainer
+  );
+});
+const FloatingSelectionContainerImpl = React.forwardRef(function FloatingSelectionContainer3(props, forwardedRef) {
+  const {
+    children,
+    selection: selection$1,
+    sideOffset = 0,
+    alignOffset = 0,
+    collisionPadding = 0
+  } = props;
+  const hideFloatingComposer = commentPluginProvider.useHideFloatingComposer();
+  const containerRef = React.useRef(null);
+  const divRef = React.useRef(null);
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  React.useImperativeHandle(
+    forwardedRef,
+    () => divRef.current
+  );
+  React.useEffect(() => {
+    return editor.registerUpdateListener(({ editorState: state, tags }) => {
+      if (tags.has("collaboration"))
+        return;
+      state.read(() => hideFloatingComposer());
+    });
+  }, [editor, hideFloatingComposer]);
+  React.useLayoutEffect(() => {
+    const content = divRef.current;
+    if (content === null)
+      return;
+    const parent = containerRef.current;
+    if (parent === null)
+      return;
+    function positionContent() {
+      const content2 = divRef.current;
+      if (content2 === null)
+        return;
+      const parent2 = content2.parentElement;
+      if (parent2 === null)
+        return;
+      const range = selection.createDOMRange(
+        editor,
+        selection$1.anchor.node,
+        selection$1.anchor.offset,
+        selection$1.focus.node,
+        selection$1.focus.offset
+      );
+      if (range === null)
+        return;
+      const rect = range.getBoundingClientRect();
+      let left = rect.left - parent2.getBoundingClientRect().left;
+      let top = rect.bottom - parent2.getBoundingClientRect().top;
+      left += alignOffset;
+      const width = content2.getBoundingClientRect().width;
+      left = left + rect.width / 2 - width / 2;
+      if (left < collisionPadding) {
+        left = collisionPadding;
+      } else if (left + width > parent2.getBoundingClientRect().right - parent2.getBoundingClientRect().left - collisionPadding) {
+        left = parent2.getBoundingClientRect().right - parent2.getBoundingClientRect().left - width - collisionPadding;
+      }
+      top += sideOffset;
+      const height = content2.getBoundingClientRect().height;
+      if (top + height > parent2.getBoundingClientRect().height - parent2.getBoundingClientRect().top + collisionPadding) {
+        top = rect.top - parent2.getBoundingClientRect().top - height;
+        top -= sideOffset;
+      }
+      content2.style.left = `${left}px`;
+      content2.style.top = `${top}px`;
+    }
+    const observer = new ResizeObserver(positionContent);
+    observer.observe(parent);
+    const unsubscribeFromUpdates = editor.registerUpdateListener(positionContent);
+    return () => {
+      observer.disconnect();
+      unsubscribeFromUpdates();
+    };
+  }, [selection$1, editor]);
+  return /* @__PURE__ */ React.createElement("div", {
+    ref: containerRef,
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none"
+    }
+  }, /* @__PURE__ */ React.createElement("div", {
+    ref: divRef,
+    style: {
+      position: "absolute",
+      pointerEvents: "auto"
+    }
+  }, children));
+});
+function useSelection() {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const subscribe = React.useCallback(
+    (onStoreChange) => {
+      return editor.registerUpdateListener(onStoreChange);
+    },
+    [editor]
+  );
+  const getSnapshot = React.useCallback(() => {
+    return editor.getEditorState().read(() => {
+      const selection = lexical.$getSelection();
+      if (!lexical.$isRangeSelection(selection))
+        return null;
+      return selection;
+    });
+  }, [editor]);
+  return index_js.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+
+exports.FloatingSelectionContainer = FloatingSelectionContainer;
+//# sourceMappingURL=floating-selection-container.js.map

package/dist/floating-selection-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-selection-container.js","sources":["../src/floating-selection-container.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n  RangeSelection,\n  $getSelection,\n  $isRangeSelection,\n  LexicalNode,\n} from \"lexical\";\nimport React, {\n  forwardRef,\n  PropsWithChildren,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n} from \"react\";\nimport { useSyncExternalStore } from \"use-sync-external-store/shim/index.js\";\nimport { createPortal } from \"react-dom\";\nimport { createDOMRange } from \"@lexical/selection\";\nimport { useHideFloatingComposer } from \"./comments/comment-plugin-provider\";\n\nexport interface FloatingSelectionContainerProps {\n  sideOffset?: number;\n  alignOffset?: number;\n  collisionPadding?: number;\n}\n\nexport const FloatingSelectionContainer = forwardRef<\n  HTMLDivElement | null,\n  PropsWithChildren<FloatingSelectionContainerProps>\n>(function FloatingSelectionContainer(props, forwardedRef) {\n  const [editor] = useLexicalComposerContext();\n  const selection = useSelection();\n\n  if (selection === null) return null;\n\n  if (selection.isCollapsed()) return null;\n\n  const info = editor.getEditorState().read(() => {\n    return {\n      anchor: {\n        node: selection.anchor.getNode(),\n        offset: selection.anchor.offset,\n      },\n      focus: {\n        node: selection.focus.getNode(),\n        offset: selection.focus.offset,\n      },\n    };\n  });\n\n  const root = editor.getRootElement();\n  if (root === null) return null;\n\n  const rootContainer = root.parentElement;\n  if (rootContainer === null) return null;\n\n  return createPortal(\n    <FloatingSelectionContainerImpl\n      {...props}\n      selection={info}\n      ref={forwardedRef}\n    />,\n    rootContainer\n  );\n});\n\ntype SelectionInfo = {\n  anchor: {\n    node: LexicalNode;\n    offset: number;\n  };\n  focus: {\n    node: LexicalNode;\n    offset: number;\n  };\n};\n\ninterface FloatingSelectionContainerImplProps\n  extends FloatingSelectionContainerProps {\n  selection: SelectionInfo;\n}\n\nconst FloatingSelectionContainerImpl = forwardRef<\n  HTMLDivElement | null,\n  PropsWithChildren<FloatingSelectionContainerImplProps>\n>(function FloatingSelectionContainer(props, forwardedRef) {\n  const {\n    children,\n    selection,\n    sideOffset = 0,\n    alignOffset = 0,\n    collisionPadding = 0,\n  } = props;\n\n  const hideFloatingComposer = useHideFloatingComposer();\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const divRef = useRef<HTMLDivElement>(null);\n\n  const [editor] = useLexicalComposerContext();\n\n  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(\n    forwardedRef,\n    () => divRef.current\n  );\n\n  useEffect(() => {\n    return editor.registerUpdateListener(({ editorState: state, tags }) => {\n      // Ignore selection updates related to collaboration\n      if (tags.has(\"collaboration\")) return;\n      state.read(() => hideFloatingComposer());\n    });\n  }, [editor, hideFloatingComposer]);\n\n  useLayoutEffect(() => {\n    const content = divRef.current;\n    if (content === null) return;\n\n    const parent = containerRef.current;\n    if (parent === null) return;\n\n    function positionContent() {\n      const content = divRef.current;\n      if (content === null) return;\n\n      const parent = content.parentElement;\n      if (parent === null) return;\n\n      // Create a DOM range from the selection\n      const range = createDOMRange(\n        editor,\n        selection.anchor.node,\n        selection.anchor.offset,\n        selection.focus.node,\n        selection.focus.offset\n      );\n\n      if (range === null) return;\n\n      // Get the bounding client rect of the DOM (selection) range\n      const rect = range.getBoundingClientRect();\n\n      // Set the position of the floating container\n      let left = rect.left - parent.getBoundingClientRect().left;\n      let top = rect.bottom - parent.getBoundingClientRect().top;\n\n      // Apply the align offset\n      left += alignOffset;\n\n      // Get the width and height of the content\n      const width = content.getBoundingClientRect().width;\n      left = left + rect.width / 2 - width / 2;\n\n      // Ensure content does not overflow the container\n      if (left < collisionPadding) {\n        left = collisionPadding;\n      } else if (\n        left + width >\n        parent.getBoundingClientRect().right -\n          parent.getBoundingClientRect().left -\n          collisionPadding\n      ) {\n        left =\n          parent.getBoundingClientRect().right -\n          parent.getBoundingClientRect().left -\n          width -\n          collisionPadding;\n      }\n\n      // Apply the side offset\n      top += sideOffset;\n\n      const height = content.getBoundingClientRect().height;\n\n      if (\n        top + height >\n        parent.getBoundingClientRect().height -\n          parent.getBoundingClientRect().top +\n          collisionPadding\n      ) {\n        top = rect.top - parent.getBoundingClientRect().top - height;\n        top -= sideOffset;\n      }\n\n      content.style.left = `${left}px`;\n      content.style.top = `${top}px`;\n    }\n\n    // Observe resizes of the container element to redraw the selection\n    const observer = new ResizeObserver(positionContent);\n    observer.observe(parent);\n\n    // Listen to updates in the editor to redraw the selection\n    const unsubscribeFromUpdates =\n      editor.registerUpdateListener(positionContent);\n\n    return () => {\n      observer.disconnect();\n      unsubscribeFromUpdates();\n    };\n  }, [selection, editor]);\n\n  return (\n    <div\n      ref={containerRef}\n      style={{\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        width: \"100%\",\n        height: \"100%\",\n        pointerEvents: \"none\",\n      }}\n    >\n      <div\n        ref={divRef}\n        style={{\n          position: \"absolute\",\n          pointerEvents: \"auto\",\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n});\n\nfunction useSelection(): RangeSelection | null {\n  const [editor] = useLexicalComposerContext();\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => {\n      return editor.registerUpdateListener(onStoreChange);\n    },\n    [editor]\n  );\n\n  const getSnapshot = useCallback(() => {\n    return editor.getEditorState().read(() => {\n      const selection = $getSelection();\n      if (!$isRangeSelection(selection)) return null;\n\n      return selection;\n    });\n  }, [editor]);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n"],"names":["forwardRef","FloatingSelectionContainer","useLexicalComposerContext","createPortal","selection","useHideFloatingComposer","useRef","useImperativeHandle","useEffect","useLayoutEffect","content","parent","createDOMRange","useCallback","$getSelection","$isRangeSelection","useSyncExternalStore"],"mappings":"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"}

package/dist/floating-selection-container.mjs

@@ -0,0 +1,155 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getSelection, $isRangeSelection } from 'lexical';
+import React__default, { forwardRef, useRef, useImperativeHandle, useEffect, useLayoutEffect, useCallback } from 'react';
+import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
+import { createPortal } from 'react-dom';
+import { createDOMRange } from '@lexical/selection';
+import { useHideFloatingComposer } from './comments/comment-plugin-provider.mjs';
+
+const FloatingSelectionContainer = forwardRef(function FloatingSelectionContainer2(props, forwardedRef) {
+  const [editor] = useLexicalComposerContext();
+  const selection = useSelection();
+  if (selection === null)
+    return null;
+  if (selection.isCollapsed())
+    return null;
+  const info = editor.getEditorState().read(() => {
+    return {
+      anchor: {
+        node: selection.anchor.getNode(),
+        offset: selection.anchor.offset
+      },
+      focus: {
+        node: selection.focus.getNode(),
+        offset: selection.focus.offset
+      }
+    };
+  });
+  const root = editor.getRootElement();
+  if (root === null)
+    return null;
+  const rootContainer = root.parentElement;
+  if (rootContainer === null)
+    return null;
+  return createPortal(
+    /* @__PURE__ */ React__default.createElement(FloatingSelectionContainerImpl, {
+      ...props,
+      selection: info,
+      ref: forwardedRef
+    }),
+    rootContainer
+  );
+});
+const FloatingSelectionContainerImpl = forwardRef(function FloatingSelectionContainer3(props, forwardedRef) {
+  const {
+    children,
+    selection,
+    sideOffset = 0,
+    alignOffset = 0,
+    collisionPadding = 0
+  } = props;
+  const hideFloatingComposer = useHideFloatingComposer();
+  const containerRef = useRef(null);
+  const divRef = useRef(null);
+  const [editor] = useLexicalComposerContext();
+  useImperativeHandle(
+    forwardedRef,
+    () => divRef.current
+  );
+  useEffect(() => {
+    return editor.registerUpdateListener(({ editorState: state, tags }) => {
+      if (tags.has("collaboration"))
+        return;
+      state.read(() => hideFloatingComposer());
+    });
+  }, [editor, hideFloatingComposer]);
+  useLayoutEffect(() => {
+    const content = divRef.current;
+    if (content === null)
+      return;
+    const parent = containerRef.current;
+    if (parent === null)
+      return;
+    function positionContent() {
+      const content2 = divRef.current;
+      if (content2 === null)
+        return;
+      const parent2 = content2.parentElement;
+      if (parent2 === null)
+        return;
+      const range = createDOMRange(
+        editor,
+        selection.anchor.node,
+        selection.anchor.offset,
+        selection.focus.node,
+        selection.focus.offset
+      );
+      if (range === null)
+        return;
+      const rect = range.getBoundingClientRect();
+      let left = rect.left - parent2.getBoundingClientRect().left;
+      let top = rect.bottom - parent2.getBoundingClientRect().top;
+      left += alignOffset;
+      const width = content2.getBoundingClientRect().width;
+      left = left + rect.width / 2 - width / 2;
+      if (left < collisionPadding) {
+        left = collisionPadding;
+      } else if (left + width > parent2.getBoundingClientRect().right - parent2.getBoundingClientRect().left - collisionPadding) {
+        left = parent2.getBoundingClientRect().right - parent2.getBoundingClientRect().left - width - collisionPadding;
+      }
+      top += sideOffset;
+      const height = content2.getBoundingClientRect().height;
+      if (top + height > parent2.getBoundingClientRect().height - parent2.getBoundingClientRect().top + collisionPadding) {
+        top = rect.top - parent2.getBoundingClientRect().top - height;
+        top -= sideOffset;
+      }
+      content2.style.left = `${left}px`;
+      content2.style.top = `${top}px`;
+    }
+    const observer = new ResizeObserver(positionContent);
+    observer.observe(parent);
+    const unsubscribeFromUpdates = editor.registerUpdateListener(positionContent);
+    return () => {
+      observer.disconnect();
+      unsubscribeFromUpdates();
+    };
+  }, [selection, editor]);
+  return /* @__PURE__ */ React__default.createElement("div", {
+    ref: containerRef,
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none"
+    }
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    ref: divRef,
+    style: {
+      position: "absolute",
+      pointerEvents: "auto"
+    }
+  }, children));
+});
+function useSelection() {
+  const [editor] = useLexicalComposerContext();
+  const subscribe = useCallback(
+    (onStoreChange) => {
+      return editor.registerUpdateListener(onStoreChange);
+    },
+    [editor]
+  );
+  const getSnapshot = useCallback(() => {
+    return editor.getEditorState().read(() => {
+      const selection = $getSelection();
+      if (!$isRangeSelection(selection))
+        return null;
+      return selection;
+    });
+  }, [editor]);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+
+export { FloatingSelectionContainer };
+//# sourceMappingURL=floating-selection-container.mjs.map

package/dist/floating-selection-container.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-selection-container.mjs","sources":["../src/floating-selection-container.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n  RangeSelection,\n  $getSelection,\n  $isRangeSelection,\n  LexicalNode,\n} from \"lexical\";\nimport React, {\n  forwardRef,\n  PropsWithChildren,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n} from \"react\";\nimport { useSyncExternalStore } from \"use-sync-external-store/shim/index.js\";\nimport { createPortal } from \"react-dom\";\nimport { createDOMRange } from \"@lexical/selection\";\nimport { useHideFloatingComposer } from \"./comments/comment-plugin-provider\";\n\nexport interface FloatingSelectionContainerProps {\n  sideOffset?: number;\n  alignOffset?: number;\n  collisionPadding?: number;\n}\n\nexport const FloatingSelectionContainer = forwardRef<\n  HTMLDivElement | null,\n  PropsWithChildren<FloatingSelectionContainerProps>\n>(function FloatingSelectionContainer(props, forwardedRef) {\n  const [editor] = useLexicalComposerContext();\n  const selection = useSelection();\n\n  if (selection === null) return null;\n\n  if (selection.isCollapsed()) return null;\n\n  const info = editor.getEditorState().read(() => {\n    return {\n      anchor: {\n        node: selection.anchor.getNode(),\n        offset: selection.anchor.offset,\n      },\n      focus: {\n        node: selection.focus.getNode(),\n        offset: selection.focus.offset,\n      },\n    };\n  });\n\n  const root = editor.getRootElement();\n  if (root === null) return null;\n\n  const rootContainer = root.parentElement;\n  if (rootContainer === null) return null;\n\n  return createPortal(\n    <FloatingSelectionContainerImpl\n      {...props}\n      selection={info}\n      ref={forwardedRef}\n    />,\n    rootContainer\n  );\n});\n\ntype SelectionInfo = {\n  anchor: {\n    node: LexicalNode;\n    offset: number;\n  };\n  focus: {\n    node: LexicalNode;\n    offset: number;\n  };\n};\n\ninterface FloatingSelectionContainerImplProps\n  extends FloatingSelectionContainerProps {\n  selection: SelectionInfo;\n}\n\nconst FloatingSelectionContainerImpl = forwardRef<\n  HTMLDivElement | null,\n  PropsWithChildren<FloatingSelectionContainerImplProps>\n>(function FloatingSelectionContainer(props, forwardedRef) {\n  const {\n    children,\n    selection,\n    sideOffset = 0,\n    alignOffset = 0,\n    collisionPadding = 0,\n  } = props;\n\n  const hideFloatingComposer = useHideFloatingComposer();\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const divRef = useRef<HTMLDivElement>(null);\n\n  const [editor] = useLexicalComposerContext();\n\n  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(\n    forwardedRef,\n    () => divRef.current\n  );\n\n  useEffect(() => {\n    return editor.registerUpdateListener(({ editorState: state, tags }) => {\n      // Ignore selection updates related to collaboration\n      if (tags.has(\"collaboration\")) return;\n      state.read(() => hideFloatingComposer());\n    });\n  }, [editor, hideFloatingComposer]);\n\n  useLayoutEffect(() => {\n    const content = divRef.current;\n    if (content === null) return;\n\n    const parent = containerRef.current;\n    if (parent === null) return;\n\n    function positionContent() {\n      const content = divRef.current;\n      if (content === null) return;\n\n      const parent = content.parentElement;\n      if (parent === null) return;\n\n      // Create a DOM range from the selection\n      const range = createDOMRange(\n        editor,\n        selection.anchor.node,\n        selection.anchor.offset,\n        selection.focus.node,\n        selection.focus.offset\n      );\n\n      if (range === null) return;\n\n      // Get the bounding client rect of the DOM (selection) range\n      const rect = range.getBoundingClientRect();\n\n      // Set the position of the floating container\n      let left = rect.left - parent.getBoundingClientRect().left;\n      let top = rect.bottom - parent.getBoundingClientRect().top;\n\n      // Apply the align offset\n      left += alignOffset;\n\n      // Get the width and height of the content\n      const width = content.getBoundingClientRect().width;\n      left = left + rect.width / 2 - width / 2;\n\n      // Ensure content does not overflow the container\n      if (left < collisionPadding) {\n        left = collisionPadding;\n      } else if (\n        left + width >\n        parent.getBoundingClientRect().right -\n          parent.getBoundingClientRect().left -\n          collisionPadding\n      ) {\n        left =\n          parent.getBoundingClientRect().right -\n          parent.getBoundingClientRect().left -\n          width -\n          collisionPadding;\n      }\n\n      // Apply the side offset\n      top += sideOffset;\n\n      const height = content.getBoundingClientRect().height;\n\n      if (\n        top + height >\n        parent.getBoundingClientRect().height -\n          parent.getBoundingClientRect().top +\n          collisionPadding\n      ) {\n        top = rect.top - parent.getBoundingClientRect().top - height;\n        top -= sideOffset;\n      }\n\n      content.style.left = `${left}px`;\n      content.style.top = `${top}px`;\n    }\n\n    // Observe resizes of the container element to redraw the selection\n    const observer = new ResizeObserver(positionContent);\n    observer.observe(parent);\n\n    // Listen to updates in the editor to redraw the selection\n    const unsubscribeFromUpdates =\n      editor.registerUpdateListener(positionContent);\n\n    return () => {\n      observer.disconnect();\n      unsubscribeFromUpdates();\n    };\n  }, [selection, editor]);\n\n  return (\n    <div\n      ref={containerRef}\n      style={{\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        width: \"100%\",\n        height: \"100%\",\n        pointerEvents: \"none\",\n      }}\n    >\n      <div\n        ref={divRef}\n        style={{\n          position: \"absolute\",\n          pointerEvents: \"auto\",\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n});\n\nfunction useSelection(): RangeSelection | null {\n  const [editor] = useLexicalComposerContext();\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => {\n      return editor.registerUpdateListener(onStoreChange);\n    },\n    [editor]\n  );\n\n  const getSnapshot = useCallback(() => {\n    return editor.getEditorState().read(() => {\n      const selection = $getSelection();\n      if (!$isRangeSelection(selection)) return null;\n\n      return selection;\n    });\n  }, [editor]);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n"],"names":["FloatingSelectionContainer","React","content","parent"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,61 @@
+import React, { ComponentType, HTMLAttributes } from 'react';
+import * as lexical from 'lexical';
+import { InitialConfigType } from '@lexical/react/LexicalComposer';
+import { ComposerProps } from '@liveblocks/react-comments';
+import { BaseMetadata } from '@liveblocks/core';
+
+declare const ThreadPanel: () => React.JSX.Element;
+
+declare type LiveblocksPluginProviderProps = {
+    children?: React.ReactNode;
+};
+declare const LiveblocksPluginProvider: ({ children, }: LiveblocksPluginProviderProps) => JSX.Element;
+
+interface MentionProps {
+    /**
+     * The mention's user ID.
+     */
+    userId: string;
+}
+interface MentionSuggestionsProps {
+    /**
+     * The list of suggested user IDs.
+     */
+    userIds: string[];
+}
+interface EditorComponents {
+    Mention: ComponentType<MentionProps>;
+    MentionSuggestions: ComponentType<MentionSuggestionsProps>;
+}
+interface LiveblocksConfig {
+    /**
+     * Whether comments are enabled. Defaults to true.
+     */
+    comments?: boolean;
+    /**
+     * The components displayed within the editor.
+     */
+    components?: Partial<EditorComponents>;
+}
+declare function liveblocksLexicalConfig(editorConfig: InitialConfigType, config?: LiveblocksConfig): {
+    nodes: (lexical.KlassConstructor<typeof lexical.LexicalNode> | lexical.LexicalNodeReplacement)[];
+    editorState: null;
+    editor__DEPRECATED?: lexical.LexicalEditor | null | undefined;
+    namespace: string;
+    onError: (error: Error, editor: lexical.LexicalEditor) => void;
+    editable?: boolean | undefined;
+    theme?: lexical.EditorThemeClasses | undefined;
+    html?: lexical.HTMLConfig | undefined;
+};
+
+declare const Mention: React.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+
+declare type ThreadMetadata = {
+    resolved?: boolean;
+};
+declare type FloatingComposerProps<M extends BaseMetadata = ThreadMetadata> = Omit<ComposerProps<M>, "threadId" | "commentId">;
+declare const FloatingComposer: React.ForwardRefExoticComponent<FloatingComposerProps<ThreadMetadata> & React.RefAttributes<HTMLFormElement>>;
+
+declare function useCreateThread(): () => void;
+
+export { FloatingComposer, LiveblocksPluginProvider, Mention, ThreadPanel, liveblocksLexicalConfig, useCreateThread };

package/dist/index.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var core = require('@liveblocks/core');
+var version = require('./version.js');
+var ThreadPanel = require('./comments/ThreadPanel.js');
+var liveblocksConfig = require('./liveblocks-config.js');
+var liveblocksPluginProvider = require('./liveblocks-plugin-provider.js');
+var mentionComponent = require('./mentions/mention-component.js');
+var floatingComposer = require('./comments/floating-composer.js');
+var commentPluginProvider = require('./comments/comment-plugin-provider.js');
+
+core.detectDupes(version.PKG_NAME, version.PKG_VERSION, version.PKG_FORMAT);
+
+exports.ThreadPanel = ThreadPanel.ThreadPanel;
+exports.liveblocksLexicalConfig = liveblocksConfig.liveblocksLexicalConfig;
+exports.LiveblocksPluginProvider = liveblocksPluginProvider.LiveblocksPluginProvider;
+exports.Mention = mentionComponent.Mention;
+exports.FloatingComposer = floatingComposer.FloatingComposer;
+exports.useCreateThread = commentPluginProvider.useCreateThread;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport { ThreadPanel } from \"./comments/ThreadPanel\";\nexport { liveblocksLexicalConfig } from \"./liveblocks-config\";\nexport { LiveblocksPluginProvider } from \"./liveblocks-plugin-provider\";\nexport { Mention } from \"./mentions/mention-component\";\nexport { FloatingComposer } from \"./comments/floating-composer\";\nexport { useCreateThread } from \"./comments/comment-plugin-provider\";\n"],"names":["detectDupes","PKG_NAME","PKG_VERSION","PKG_FORMAT"],"mappings":";;;;;;;;;;;AAIAA,gBAAY,CAAAC,gBAAA,EAAUC,qBAAaC,kBAAU,CAAA;;;;;;;;;"}

package/dist/index.mjs

@@ -0,0 +1,11 @@
+import { detectDupes } from '@liveblocks/core';
+import { PKG_NAME, PKG_VERSION, PKG_FORMAT } from './version.mjs';
+export { ThreadPanel } from './comments/ThreadPanel.mjs';
+export { liveblocksLexicalConfig } from './liveblocks-config.mjs';
+export { LiveblocksPluginProvider } from './liveblocks-plugin-provider.mjs';
+export { Mention } from './mentions/mention-component.mjs';
+export { FloatingComposer } from './comments/floating-composer.mjs';
+export { useCreateThread } from './comments/comment-plugin-provider.mjs';
+
+detectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport { ThreadPanel } from \"./comments/ThreadPanel\";\nexport { liveblocksLexicalConfig } from \"./liveblocks-config\";\nexport { LiveblocksPluginProvider } from \"./liveblocks-plugin-provider\";\nexport { Mention } from \"./mentions/mention-component\";\nexport { FloatingComposer } from \"./comments/floating-composer\";\nexport { useCreateThread } from \"./comments/comment-plugin-provider\";\n"],"names":[],"mappings":";;;;;;;;;AAIA,WAAY,CAAA,QAAA,EAAU,aAAa,UAAU,CAAA"}

package/dist/liveblocks-config.js

@@ -0,0 +1,89 @@
+'use strict';
+
+var React = require('react');
+var threadMarkNode = require('./comments/thread-mark-node.js');
+var avatar = require('./mentions/avatar.js');
+var mentionComponent = require('./mentions/mention-component.js');
+var mentionNode = require('./mentions/mention-node.js');
+var suggestions = require('./mentions/suggestions.js');
+var user = require('./mentions/user.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+let liveblocksConfig = null;
+const MENTION_CHARACTER = "@";
+const defaultComponents = {
+  Mention: ({ userId }) => {
+    return /* @__PURE__ */ React__namespace.createElement(mentionComponent.Mention, {
+      className: "lb-lexical-mention"
+    }, MENTION_CHARACTER, /* @__PURE__ */ React__namespace.createElement(user, {
+      userId
+    }));
+  },
+  MentionSuggestions: ({ userIds }) => {
+    return /* @__PURE__ */ React__namespace.createElement(suggestions.List, {
+      className: "lb-lexical-suggestions-list"
+    }, userIds.map((userId) => /* @__PURE__ */ React__namespace.createElement(suggestions.Item, {
+      key: userId,
+      value: userId,
+      className: "lb-lexical-suggestions-list-item"
+    }, /* @__PURE__ */ React__namespace.createElement(avatar, {
+      userId,
+      className: "lb-lexical-mention-suggestion-avatar"
+    }), /* @__PURE__ */ React__namespace.createElement(user, {
+      userId,
+      className: "lb-lexical-mention-suggestion-user"
+    }))));
+  }
+};
+function liveblocksLexicalConfig(editorConfig, config = {}) {
+  const { comments = true, components = {} } = config;
+  const nodes = [...editorConfig.nodes ?? []];
+  const Mention2 = components.Mention ?? defaultComponents.Mention;
+  const MentionSuggestions = components.MentionSuggestions ?? defaultComponents.MentionSuggestions;
+  const mentionFactory = mentionNode.createMentionNodeFactory(Mention2);
+  nodes.push(threadMarkNode.ThreadMarkNode, mentionFactory.MentionNode);
+  liveblocksConfig = {
+    comments,
+    mentions: {
+      factory: mentionFactory,
+      components: {
+        MentionSuggestions
+      }
+    }
+  };
+  return {
+    ...editorConfig,
+    nodes,
+    editorState: null
+  };
+}
+function getLiveblocksLexicalConfig() {
+  if (liveblocksConfig === null) {
+    throw new Error("Liveblocks config is not initialized.");
+  }
+  return {
+    ...liveblocksConfig
+  };
+}
+
+exports.getLiveblocksLexicalConfig = getLiveblocksLexicalConfig;
+exports.liveblocksLexicalConfig = liveblocksLexicalConfig;
+//# sourceMappingURL=liveblocks-config.js.map

package/dist/liveblocks-config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"liveblocks-config.js","sources":["../src/liveblocks-config.tsx"],"sourcesContent":["import type { InitialConfigType } from \"@lexical/react/LexicalComposer\";\nimport type { ComponentType } from \"react\";\nimport * as React from \"react\";\n\nimport { ThreadMarkNode } from \"./comments/thread-mark-node\";\nimport type { LiveblocksLexicalInternalConfig } from \"./liveblocks-plugin-provider\";\nimport Avatar from \"./mentions/avatar\";\nimport { Mention } from \"./mentions/mention-component\";\nimport { createMentionNodeFactory } from \"./mentions/mention-node\";\nimport * as Suggestions from \"./mentions/suggestions\";\nimport User from \"./mentions/user\";\n\nlet liveblocksConfig: LiveblocksLexicalInternalConfig | null = null;\n\nexport interface MentionProps {\n  /**\n   * The mention's user ID.\n   */\n  userId: string;\n}\n\nexport interface MentionSuggestionsProps {\n  /**\n   * The list of suggested user IDs.\n   */\n  userIds: string[];\n}\n\ninterface EditorComponents {\n  Mention: ComponentType<MentionProps>;\n  MentionSuggestions: ComponentType<MentionSuggestionsProps>;\n}\n\nexport interface LiveblocksConfig {\n  /**\n   * Whether comments are enabled. Defaults to true.\n   */\n  comments?: boolean;\n  /**\n   * The components displayed within the editor.\n   */\n  components?: Partial<EditorComponents>;\n}\n\nconst MENTION_CHARACTER = \"@\";\nconst defaultComponents: EditorComponents = {\n  Mention: ({ userId }) => {\n    return (\n      <Mention className=\"lb-lexical-mention\">\n        {MENTION_CHARACTER}\n        <User userId={userId} />\n      </Mention>\n    );\n  },\n  MentionSuggestions: ({ userIds }) => {\n    return (\n      <Suggestions.List className=\"lb-lexical-suggestions-list\">\n        {userIds.map((userId) => (\n          <Suggestions.Item\n            key={userId}\n            value={userId}\n            className=\"lb-lexical-suggestions-list-item\"\n          >\n            <Avatar\n              userId={userId}\n              className=\"lb-lexical-mention-suggestion-avatar\"\n            />\n            <User\n              userId={userId}\n              className=\"lb-lexical-mention-suggestion-user\"\n            />\n          </Suggestions.Item>\n        ))}\n      </Suggestions.List>\n    );\n  },\n};\n\nexport function liveblocksLexicalConfig(\n  editorConfig: InitialConfigType,\n  config: LiveblocksConfig = {}\n) {\n  const { comments = true, components = {} } = config;\n\n  const nodes = [...(editorConfig.nodes ?? [])];\n\n  const Mention = components.Mention ?? defaultComponents.Mention;\n  const MentionSuggestions =\n    components.MentionSuggestions ?? defaultComponents.MentionSuggestions;\n\n  const mentionFactory = createMentionNodeFactory(Mention);\n\n  nodes.push(ThreadMarkNode, mentionFactory.MentionNode);\n\n  liveblocksConfig = {\n    comments,\n    mentions: {\n      factory: mentionFactory,\n      components: {\n        MentionSuggestions,\n      },\n    },\n  };\n\n  return {\n    ...editorConfig,\n    nodes,\n    editorState: null, // explicitly null because CollabProvider requires it\n  };\n}\n\nexport function getLiveblocksLexicalConfig(): LiveblocksLexicalInternalConfig {\n  if (liveblocksConfig === null) {\n    throw new Error(\"Liveblocks config is not initialized.\");\n  }\n  return {\n    ...liveblocksConfig,\n  };\n}\n"],"names":["React","Mention","User","Suggestions.List","Suggestions.Item","Avatar","createMentionNodeFactory","ThreadMarkNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,IAAI,gBAA2D,GAAA,IAAA,CAAA;AAgC/D,MAAM,iBAAoB,GAAA,GAAA,CAAA;AAC1B,MAAM,iBAAsC,GAAA;AAAA,EAC1C,OAAS,EAAA,CAAC,EAAE,MAAA,EAAa,KAAA;AACvB,IAAA,uBACGA,gBAAA,CAAA,aAAA,CAAAC,wBAAA,EAAA;AAAA,MAAQ,SAAU,EAAA,oBAAA;AAAA,KAAA,EAChB,mCACAD,gBAAA,CAAA,aAAA,CAAAE,IAAA,EAAA;AAAA,MAAK,MAAA;AAAA,KAAgB,CACxB,CAAA,CAAA;AAAA,GAEJ;AAAA,EACA,kBAAoB,EAAA,CAAC,EAAE,OAAA,EAAc,KAAA;AACnC,IACE,uBAAAF,gBAAA,CAAA,aAAA,CAACG,gBAAA,EAAA;AAAA,MAAiB,SAAU,EAAA,6BAAA;AAAA,KAAA,EACzB,QAAQ,GAAI,CAAA,CAAC,MACZ,qBAAAH,gBAAA,CAAA,aAAA,CAACI,gBAAA,EAAA;AAAA,MACC,GAAK,EAAA,MAAA;AAAA,MACL,KAAO,EAAA,MAAA;AAAA,MACP,SAAU,EAAA,kCAAA;AAAA,KAAA,kBAETJ,gBAAA,CAAA,aAAA,CAAAK,MAAA,EAAA;AAAA,MACC,MAAA;AAAA,MACA,SAAU,EAAA,sCAAA;AAAA,KACZ,mBACCL,gBAAA,CAAA,aAAA,CAAAE,IAAA,EAAA;AAAA,MACC,MAAA;AAAA,MACA,SAAU,EAAA,oCAAA;AAAA,KACZ,CACF,CACD,CACH,CAAA,CAAA;AAAA,GAEJ;AACF,CAAA,CAAA;AAEO,SAAS,uBACd,CAAA,YAAA,EACA,MAA2B,GAAA,EAC3B,EAAA;AACA,EAAA,MAAM,EAAE,QAAW,GAAA,IAAA,EAAM,UAAa,GAAA,IAAO,GAAA,MAAA,CAAA;AAE7C,EAAA,MAAM,QAAQ,CAAC,GAAI,YAAa,CAAA,KAAA,IAAS,EAAG,CAAA,CAAA;AAE5C,EAAMD,MAAAA,QAAAA,GAAU,UAAW,CAAA,OAAA,IAAW,iBAAkB,CAAA,OAAA,CAAA;AACxD,EAAM,MAAA,kBAAA,GACJ,UAAW,CAAA,kBAAA,IAAsB,iBAAkB,CAAA,kBAAA,CAAA;AAErD,EAAM,MAAA,cAAA,GAAiBK,qCAAyBL,QAAO,CAAA,CAAA;AAEvD,EAAM,KAAA,CAAA,IAAA,CAAKM,6BAAgB,EAAA,cAAA,CAAe,WAAW,CAAA,CAAA;AAErD,EAAmB,gBAAA,GAAA;AAAA,IACjB,QAAA;AAAA,IACA,QAAU,EAAA;AAAA,MACR,OAAS,EAAA,cAAA;AAAA,MACT,UAAY,EAAA;AAAA,QACV,kBAAA;AAAA,OACF;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,GAAG,YAAA;AAAA,IACH,KAAA;AAAA,IACA,WAAa,EAAA,IAAA;AAAA,GACf,CAAA;AACF,CAAA;AAEO,SAAS,0BAA8D,GAAA;AAC5E,EAAA,IAAI,qBAAqB,IAAM,EAAA;AAC7B,IAAM,MAAA,IAAI,MAAM,uCAAuC,CAAA,CAAA;AAAA,GACzD;AACA,EAAO,OAAA;AAAA,IACL,GAAG,gBAAA;AAAA,GACL,CAAA;AACF;;;;;"}

package/dist/liveblocks-config.mjs

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { ThreadMarkNode } from './comments/thread-mark-node.mjs';
+import Avatar from './mentions/avatar.mjs';
+import { Mention } from './mentions/mention-component.mjs';
+import { createMentionNodeFactory } from './mentions/mention-node.mjs';
+import { List, Item } from './mentions/suggestions.mjs';
+import User from './mentions/user.mjs';
+
+let liveblocksConfig = null;
+const MENTION_CHARACTER = "@";
+const defaultComponents = {
+  Mention: ({ userId }) => {
+    return /* @__PURE__ */ React.createElement(Mention, {
+      className: "lb-lexical-mention"
+    }, MENTION_CHARACTER, /* @__PURE__ */ React.createElement(User, {
+      userId
+    }));
+  },
+  MentionSuggestions: ({ userIds }) => {
+    return /* @__PURE__ */ React.createElement(List, {
+      className: "lb-lexical-suggestions-list"
+    }, userIds.map((userId) => /* @__PURE__ */ React.createElement(Item, {
+      key: userId,
+      value: userId,
+      className: "lb-lexical-suggestions-list-item"
+    }, /* @__PURE__ */ React.createElement(Avatar, {
+      userId,
+      className: "lb-lexical-mention-suggestion-avatar"
+    }), /* @__PURE__ */ React.createElement(User, {
+      userId,
+      className: "lb-lexical-mention-suggestion-user"
+    }))));
+  }
+};
+function liveblocksLexicalConfig(editorConfig, config = {}) {
+  const { comments = true, components = {} } = config;
+  const nodes = [...editorConfig.nodes ?? []];
+  const Mention2 = components.Mention ?? defaultComponents.Mention;
+  const MentionSuggestions = components.MentionSuggestions ?? defaultComponents.MentionSuggestions;
+  const mentionFactory = createMentionNodeFactory(Mention2);
+  nodes.push(ThreadMarkNode, mentionFactory.MentionNode);
+  liveblocksConfig = {
+    comments,
+    mentions: {
+      factory: mentionFactory,
+      components: {
+        MentionSuggestions
+      }
+    }
+  };
+  return {
+    ...editorConfig,
+    nodes,
+    editorState: null
+  };
+}
+function getLiveblocksLexicalConfig() {
+  if (liveblocksConfig === null) {
+    throw new Error("Liveblocks config is not initialized.");
+  }
+  return {
+    ...liveblocksConfig
+  };
+}
+
+export { getLiveblocksLexicalConfig, liveblocksLexicalConfig };
+//# sourceMappingURL=liveblocks-config.mjs.map

package/dist/liveblocks-config.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"liveblocks-config.mjs","sources":["../src/liveblocks-config.tsx"],"sourcesContent":["import type { InitialConfigType } from \"@lexical/react/LexicalComposer\";\nimport type { ComponentType } from \"react\";\nimport * as React from \"react\";\n\nimport { ThreadMarkNode } from \"./comments/thread-mark-node\";\nimport type { LiveblocksLexicalInternalConfig } from \"./liveblocks-plugin-provider\";\nimport Avatar from \"./mentions/avatar\";\nimport { Mention } from \"./mentions/mention-component\";\nimport { createMentionNodeFactory } from \"./mentions/mention-node\";\nimport * as Suggestions from \"./mentions/suggestions\";\nimport User from \"./mentions/user\";\n\nlet liveblocksConfig: LiveblocksLexicalInternalConfig | null = null;\n\nexport interface MentionProps {\n  /**\n   * The mention's user ID.\n   */\n  userId: string;\n}\n\nexport interface MentionSuggestionsProps {\n  /**\n   * The list of suggested user IDs.\n   */\n  userIds: string[];\n}\n\ninterface EditorComponents {\n  Mention: ComponentType<MentionProps>;\n  MentionSuggestions: ComponentType<MentionSuggestionsProps>;\n}\n\nexport interface LiveblocksConfig {\n  /**\n   * Whether comments are enabled. Defaults to true.\n   */\n  comments?: boolean;\n  /**\n   * The components displayed within the editor.\n   */\n  components?: Partial<EditorComponents>;\n}\n\nconst MENTION_CHARACTER = \"@\";\nconst defaultComponents: EditorComponents = {\n  Mention: ({ userId }) => {\n    return (\n      <Mention className=\"lb-lexical-mention\">\n        {MENTION_CHARACTER}\n        <User userId={userId} />\n      </Mention>\n    );\n  },\n  MentionSuggestions: ({ userIds }) => {\n    return (\n      <Suggestions.List className=\"lb-lexical-suggestions-list\">\n        {userIds.map((userId) => (\n          <Suggestions.Item\n            key={userId}\n            value={userId}\n            className=\"lb-lexical-suggestions-list-item\"\n          >\n            <Avatar\n              userId={userId}\n              className=\"lb-lexical-mention-suggestion-avatar\"\n            />\n            <User\n              userId={userId}\n              className=\"lb-lexical-mention-suggestion-user\"\n            />\n          </Suggestions.Item>\n        ))}\n      </Suggestions.List>\n    );\n  },\n};\n\nexport function liveblocksLexicalConfig(\n  editorConfig: InitialConfigType,\n  config: LiveblocksConfig = {}\n) {\n  const { comments = true, components = {} } = config;\n\n  const nodes = [...(editorConfig.nodes ?? [])];\n\n  const Mention = components.Mention ?? defaultComponents.Mention;\n  const MentionSuggestions =\n    components.MentionSuggestions ?? defaultComponents.MentionSuggestions;\n\n  const mentionFactory = createMentionNodeFactory(Mention);\n\n  nodes.push(ThreadMarkNode, mentionFactory.MentionNode);\n\n  liveblocksConfig = {\n    comments,\n    mentions: {\n      factory: mentionFactory,\n      components: {\n        MentionSuggestions,\n      },\n    },\n  };\n\n  return {\n    ...editorConfig,\n    nodes,\n    editorState: null, // explicitly null because CollabProvider requires it\n  };\n}\n\nexport function getLiveblocksLexicalConfig(): LiveblocksLexicalInternalConfig {\n  if (liveblocksConfig === null) {\n    throw new Error(\"Liveblocks config is not initialized.\");\n  }\n  return {\n    ...liveblocksConfig,\n  };\n}\n"],"names":["Suggestions.List","Suggestions.Item","Mention"],"mappings":";;;;;;;;AAYA,IAAI,gBAA2D,GAAA,IAAA,CAAA;AAgC/D,MAAM,iBAAoB,GAAA,GAAA,CAAA;AAC1B,MAAM,iBAAsC,GAAA;AAAA,EAC1C,OAAS,EAAA,CAAC,EAAE,MAAA,EAAa,KAAA;AACvB,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAA,MAAQ,SAAU,EAAA,oBAAA;AAAA,KAAA,EAChB,mCACA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,MAAK,MAAA;AAAA,KAAgB,CACxB,CAAA,CAAA;AAAA,GAEJ;AAAA,EACA,kBAAoB,EAAA,CAAC,EAAE,OAAA,EAAc,KAAA;AACnC,IACE,uBAAA,KAAA,CAAA,aAAA,CAACA,IAAA,EAAA;AAAA,MAAiB,SAAU,EAAA,6BAAA;AAAA,KAAA,EACzB,QAAQ,GAAI,CAAA,CAAC,MACZ,qBAAA,KAAA,CAAA,aAAA,CAACC,IAAA,EAAA;AAAA,MACC,GAAK,EAAA,MAAA;AAAA,MACL,KAAO,EAAA,MAAA;AAAA,MACP,SAAU,EAAA,kCAAA;AAAA,KAAA,kBAET,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,MACC,MAAA;AAAA,MACA,SAAU,EAAA,sCAAA;AAAA,KACZ,mBACC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,MACC,MAAA;AAAA,MACA,SAAU,EAAA,oCAAA;AAAA,KACZ,CACF,CACD,CACH,CAAA,CAAA;AAAA,GAEJ;AACF,CAAA,CAAA;AAEO,SAAS,uBACd,CAAA,YAAA,EACA,MAA2B,GAAA,EAC3B,EAAA;AACA,EAAA,MAAM,EAAE,QAAW,GAAA,IAAA,EAAM,UAAa,GAAA,IAAO,GAAA,MAAA,CAAA;AAE7C,EAAA,MAAM,QAAQ,CAAC,GAAI,YAAa,CAAA,KAAA,IAAS,EAAG,CAAA,CAAA;AAE5C,EAAMC,MAAAA,QAAAA,GAAU,UAAW,CAAA,OAAA,IAAW,iBAAkB,CAAA,OAAA,CAAA;AACxD,EAAM,MAAA,kBAAA,GACJ,UAAW,CAAA,kBAAA,IAAsB,iBAAkB,CAAA,kBAAA,CAAA;AAErD,EAAM,MAAA,cAAA,GAAiB,yBAAyBA,QAAO,CAAA,CAAA;AAEvD,EAAM,KAAA,CAAA,IAAA,CAAK,cAAgB,EAAA,cAAA,CAAe,WAAW,CAAA,CAAA;AAErD,EAAmB,gBAAA,GAAA;AAAA,IACjB,QAAA;AAAA,IACA,QAAU,EAAA;AAAA,MACR,OAAS,EAAA,cAAA;AAAA,MACT,UAAY,EAAA;AAAA,QACV,kBAAA;AAAA,OACF;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,GAAG,YAAA;AAAA,IACH,KAAA;AAAA,IACA,WAAa,EAAA,IAAA;AAAA,GACf,CAAA;AACF,CAAA;AAEO,SAAS,0BAA8D,GAAA;AAC5E,EAAA,IAAI,qBAAqB,IAAM,EAAA;AAC7B,IAAM,MAAA,IAAI,MAAM,uCAAuC,CAAA,CAAA;AAAA,GACzD;AACA,EAAO,OAAA;AAAA,IACL,GAAG,gBAAA;AAAA,GACL,CAAA;AACF;;;;"}