@copilotkit/react-textarea 1.1.1-athena-preview.1 → 1.1.1-athena-preview.2

package/CHANGELOG.md

@@ -1,24 +1,33 @@
 # ui
 
-## 1.1.1-athena-preview.1
+## 1.1.1-athena-preview.2
 
 ### Patch Changes
 
-- Remote actions preview
+- 638d51d9: appendMessage fix 1
+- faccbe1d: state-abuse resistance for useCopilotChat
+- b0cf700e: remove unnecessary logging
+- Add useCopilotChat stale actions fix
+- Updated dependencies [638d51d9]
+- Updated dependencies [faccbe1d]
+- Updated dependencies [b0cf700e]
 - Updated dependencies
-  - @copilotkit/runtime-client-gql@1.1.1-athena-preview.1
-  - @copilotkit/react-core@1.1.1-athena-preview.1
-  - @copilotkit/shared@1.1.1-athena-preview.1
+  - @copilotkit/react-core@1.1.1-athena-preview.2
+  - @copilotkit/runtime-client-gql@1.1.1-athena-preview.2
+  - @copilotkit/shared@1.1.1-athena-preview.2
 
-## 1.1.1-feat-runtime-remote-actions.0
+## 1.1.1
 
 ### Patch Changes
 
-- Remote actions preview
+- - improved documentation
+  - center textarea popup
+  - show/hide dev console
+  - forward maxTokens, stop and force function calling
 - Updated dependencies
-  - @copilotkit/runtime-client-gql@1.1.1-feat-runtime-remote-actions.0
-  - @copilotkit/react-core@1.1.1-feat-runtime-remote-actions.0
-  - @copilotkit/shared@1.1.1-feat-runtime-remote-actions.0
+  - @copilotkit/react-core@1.1.1
+  - @copilotkit/runtime-client-gql@1.1.1
+  - @copilotkit/shared@1.1.1
 
 ## 1.1.0
 

package/dist/{chunk-P774SJMD.mjs → chunk-2PEBAJRK.mjs}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-HL7EF7KA.mjs";
 import {
   BaseCopilotTextarea
-} from "./chunk-5EDG5WL3.mjs";
+} from "./chunk-32Q3LXX3.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -57,4 +57,4 @@ var CopilotTextarea = React.forwardRef(
 export {
   CopilotTextarea
 };
-//# sourceMappingURL=chunk-P774SJMD.mjs.map
+//# sourceMappingURL=chunk-2PEBAJRK.mjs.map

package/dist/chunk-2PEBAJRK.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/copilot-textarea/copilot-textarea.tsx"],"sourcesContent":["/**\n * <br/>\n * <img src=\"/images/CopilotTextarea.gif\" width=\"500\" />\n *\n * `<CopilotTextarea>` is a React component that acts as a drop-in replacement for the standard `<textarea>`,\n *  offering enhanced autocomplete features powered by AI. It is context-aware, integrating seamlessly with the\n * [`useCopilotReadable`](/reference/hooks/useCopilotReadable) hook to provide intelligent suggestions based on the application context.\n *\n * In addition, it provides a hovering editor window (available by default via `Cmd + K` on Mac and `Ctrl + K` on Windows) that allows the user to\n * suggest changes to the text, for example providing a summary or rephrasing the text.\n *\n * ## Example\n *\n * ```tsx\n * import { CopilotTextarea } from '@copilot/react-ui';\n *\n * <CopilotTextarea\n *   autosuggestionsConfig={{\n *     textareaPurpose:\n *      \"the body of an email message\",\n *     chatApiConfigs: {},\n *   }}\n * />\n * ```\n *\n * ## Usage\n *\n * ### Install Dependencies\n *\n * This component is part of the [@copilotkit/react-ui](https://npmjs.com/package/@copilotkit/react-ui) package.\n *\n * ```shell npm2yarn \\\"@copilotkit/react-ui\"\\\n * npm install @copilotkit/react-core @copilotkit/react-ui\n * ```\n *\n * ### Usage\n *\n * Use the CopilotTextarea component in your React application similarly to a standard `<textarea />`,\n * with additional configurations for AI-powered features.\n *\n * For example:\n *\n * ```tsx\n * import { CopilotTextarea } from \"@copilotkit/react-textarea\";\n * import { useState } from \"react\";\n *\n * export function ExampleComponent() {\n *   const [text, setText] = useState(\"\");\n *\n *   return (\n *     <CopilotTextarea\n *       className=\"custom-textarea-class\"\n *       value={text}\n *       onValueChange={(value: string) => setText(value)}\n *       placeholder=\"Enter your text here...\"\n *       autosuggestionsConfig={{\n *         textareaPurpose: \"Provide context or purpose of the textarea.\",\n *         chatApiConfigs: {\n *           suggestionsApiConfig: {\n *             maxTokens: 20,\n *             stop: [\".\", \"?\", \"!\"],\n *           },\n *         },\n *       }}\n *     />\n *   );\n * }\n * ```\n *\n * ### Look & Feel\n *\n * By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:\n * ```tsx fileName=\"YourRootComponent.tsx\" {2}\n * ...\n * import \"@copilotkit/react-ui/styles.css\";\n *\n * export function YourRootComponent() {\n *   return (\n *     <CopilotKit>\n *       ...\n *     </CopilotKit>\n *   );\n * }\n * ```\n * For more information about how to customize the styles, check out the [Customize Look & Feel](/concepts/customize-look-and-feel) guide.\n * */\nimport React from \"react\";\nimport { useMakeStandardAutosuggestionFunction } from \"../../hooks/make-autosuggestions-function/use-make-standard-autosuggestions-function\";\nimport { HTMLCopilotTextAreaElement } from \"../../types\";\nimport { BaseCopilotTextareaProps } from \"../../types/base/base-copilot-textarea-props\";\nimport {\n  AutosuggestionsConfig,\n  defaultAutosuggestionsConfig,\n} from \"../../types/autosuggestions-config\";\nimport { BaseCopilotTextarea } from \"../base-copilot-textarea/base-copilot-textarea\";\nimport { useMakeStandardInsertionOrEditingFunction } from \"../../hooks/make-autosuggestions-function/use-make-standard-insertion-function\";\nimport merge from \"lodash.merge\";\nimport { AutosuggestionsConfigUserSpecified } from \"../../types/autosuggestions-config/autosuggestions-config-user-specified\";\n\n// Like the base copilot textarea props,\n// but with baseAutosuggestionsConfig replaced with autosuggestionsConfig.\nexport interface CopilotTextareaProps\n  extends Omit<BaseCopilotTextareaProps, \"baseAutosuggestionsConfig\"> {\n  /**\n   * Configuration settings for the autosuggestions feature.\n   * For full reference, [check the interface on GitHub](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-textarea/src/types/base/base-copilot-textarea-props.tsx#L8).\n   *\n   * <PropertyReference name=\"textareaPurpose\" type=\"string\" required={true} >\n   *   The purpose of the text area in plain text.\n   *\n   *   Example: *\"The body of the email response\"*\n   * </PropertyReference>\n   *\n   * <PropertyReference name=\"chatApiConfigs\" type=\"ChatApiConfigs\" >\n   *   The chat API configurations.\n   *\n   *   <strong>NOTE:</strong> You must provide specify at least one of `suggestionsApiConfig` or `insertionApiConfig`.\n   *\n   *   <PropertyReference name=\"suggestionsApiConfig\" type=\"SuggestionsApiConfig\">\n   *       For full reference, please [click here](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-textarea/src/types/autosuggestions-config/suggestions-api-config.tsx#L4).\n   *   </PropertyReference>\n   *   <PropertyReference name=\"insertionApiConfig\" type=\"InsertionApiConfig\">\n   *       For full reference, please [click here](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-textarea/src/types/autosuggestions-config/insertions-api-config.tsx#L4).\n   *   </PropertyReference>\n   * </PropertyReference>\n   *\n   * <PropertyReference name=\"disabled\" type=\"boolean\" >\n   *   Whether the textarea is disabled.\n   * </PropertyReference>\n   *\n   * <PropertyReference name=\"disableBranding\" type=\"boolean\" >\n   *   Whether to disable the CopilotKit branding.\n   * </PropertyReference>\n   *\n   * <PropertyReference name=\"placeholderStyle\" type=\"React.CSSProperties\" >\n   *   Specifies the CSS styles to apply to the placeholder text.\n   * </PropertyReference>\n   *\n   * <PropertyReference name=\"suggestionsStyle\" type=\"React.CSSProperties\" >\n   *   Specifies the CSS styles to apply to the suggestions list.\n   * </PropertyReference>\n   *\n   * <PropertyReference name=\"hoverMenuClassname\" type=\"string\" >\n   *   A class name to apply to the editor popover window.\n   * </PropertyReference>\n   *\n   * <PropertyReference name=\"value\" type=\"string\" >\n   *   The initial value of the textarea. Can be controlled via `onValueChange`.\n   * </PropertyReference>\n   *\n   * <PropertyReference name=\"onValueChange\" type=\"(value: string) => void\" >\n   *   Callback invoked when the value of the textarea changes.\n   * </PropertyReference>\n   *\n   * <PropertyReference name=\"onChange\" type=\"(event: React.ChangeEvent<HTMLTextAreaElement>) => void\" >\n   *   Callback invoked when a `change` event is triggered on the textarea element.\n   * </PropertyReference>\n   *\n   * <PropertyReference name=\"shortcut\" type=\"string\" >\n   *   The shortcut to use to open the editor popover window. Default is `\"Cmd-k\"`.\n   * </PropertyReference>\n   */\n  autosuggestionsConfig: AutosuggestionsConfigUserSpecified;\n}\n\n/**\n * A copilot textarea that uses the standard autosuggestions function.\n */\nexport const CopilotTextarea = React.forwardRef(\n  (props: CopilotTextareaProps, ref: React.Ref<HTMLCopilotTextAreaElement>) => {\n    // separate the AutosuggestionsConfigUserSpecified from the rest of the props\n    const { autosuggestionsConfig: autosuggestionsConfigUserSpecified, ...forwardedProps } = props;\n\n    const autosuggestionsConfig: AutosuggestionsConfig = merge(\n      defaultAutosuggestionsConfig,\n      autosuggestionsConfigUserSpecified,\n    );\n\n    const autosuggestionsFunction = useMakeStandardAutosuggestionFunction(\n      autosuggestionsConfig.textareaPurpose,\n      autosuggestionsConfig.contextCategories,\n      autosuggestionsConfig.chatApiConfigs.suggestionsApiConfig,\n    );\n\n    const insertionOrEditingFunction = useMakeStandardInsertionOrEditingFunction(\n      autosuggestionsConfig.textareaPurpose,\n      autosuggestionsConfig.contextCategories,\n      autosuggestionsConfig.chatApiConfigs.insertionApiConfig,\n      autosuggestionsConfig.chatApiConfigs.editingApiConfig,\n    );\n\n    return (\n      <>\n        <BaseCopilotTextarea\n          ref={ref}\n          {...forwardedProps}\n          baseAutosuggestionsConfig={{\n            ...autosuggestionsConfig,\n            apiConfig: {\n              insertionOrEditingFunction: insertionOrEditingFunction,\n              autosuggestionsFunction: autosuggestionsFunction,\n            },\n          }}\n        />\n      </>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAsFA,OAAO,WAAW;AAUlB,OAAO,WAAW;AAgGZ,mBACE,WADF;AAxBC,IAAM,kBAAkB,MAAM;AAAA,EACnC,CAAC,OAA6B,QAA+C;AAE3E,UAAyF,YAAjF,yBAAuB,mCA3KnC,IA2K6F,IAAnB,2BAAmB,IAAnB,CAA9D;AAER,UAAM,wBAA+C;AAAA,MACnD;AAAA,MACA;AAAA,IACF;AAEA,UAAM,0BAA0B;AAAA,MAC9B,sBAAsB;AAAA,MACtB,sBAAsB;AAAA,MACtB,sBAAsB,eAAe;AAAA,IACvC;AAEA,UAAM,6BAA6B;AAAA,MACjC,sBAAsB;AAAA,MACtB,sBAAsB;AAAA,MACtB,sBAAsB,eAAe;AAAA,MACrC,sBAAsB,eAAe;AAAA,IACvC;AAEA,WACE,gCACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,SACI,iBAFL;AAAA,QAGC,2BAA2B,iCACtB,wBADsB;AAAA,UAEzB,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACF;","names":[]}

package/dist/{chunk-5EDG5WL3.mjs → chunk-32Q3LXX3.mjs}

@@ -12,7 +12,7 @@ import {
 } from "./chunk-DRV2FOHZ.mjs";
 import {
   usePopulateCopilotTextareaRef
-} from "./chunk-FMQG2ZM3.mjs";
+} from "./chunk-QJNFNPWH.mjs";
 import {
   replaceEditorText
 } from "./chunk-5UNJXFUO.mjs";
@@ -24,7 +24,7 @@ import {
 } from "./chunk-7LSRNPNI.mjs";
 import {
   HoveringToolbar
-} from "./chunk-6QIA4FWK.mjs";
+} from "./chunk-6HH3NECQ.mjs";
 import {
   HoveringEditorProvider,
   useHoveringEditorContext
@@ -261,4 +261,4 @@ function makeSemiFakeReactTextAreaEvent(currentText) {
 export {
   BaseCopilotTextarea
 };
-//# sourceMappingURL=chunk-5EDG5WL3.mjs.map
+//# sourceMappingURL=chunk-32Q3LXX3.mjs.map

package/dist/{chunk-6QIA4FWK.mjs → chunk-6HH3NECQ.mjs}

@@ -1,6 +1,6 @@
 import {
   HoveringInsertionPromptBox
-} from "./chunk-2RGJ6YD6.mjs";
+} from "./chunk-GXU6UYHI.mjs";
 import {
   useHoveringEditorContext
 } from "./chunk-LYB4B6MK.mjs";
@@ -62,6 +62,7 @@ var HoveringToolbar = (props) => {
       left = window.innerWidth - el.offsetWidth - minGapFromEdge;
     }
     el.style.opacity = "1";
+    el.style.position = "absolute";
     el.style.top = `${top}px`;
     el.style.left = `${left}px`;
   });
@@ -120,4 +121,4 @@ function editorState(editor, selection) {
 export {
   HoveringToolbar
 };
-//# sourceMappingURL=chunk-6QIA4FWK.mjs.map
+//# sourceMappingURL=chunk-6HH3NECQ.mjs.map

package/dist/chunk-6HH3NECQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/hovering-toolbar/hovering-toolbar.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { Editor, Location, Transforms } from \"slate\";\nimport { useSlate, useSlateSelection } from \"slate-react\";\nimport { HoveringInsertionPromptBox } from \"./text-insertion-prompt-box\";\nimport { Menu, Portal } from \"./hovering-toolbar-components\";\nimport { useHoveringEditorContext } from \"./hovering-editor-provider\";\nimport {\n  getFullEditorTextWithNewlines,\n  getTextAroundSelection,\n} from \"../../lib/get-text-around-cursor\";\nimport {\n  EditingEditorState,\n  InsertionEditorApiConfig,\n} from \"../../types/base/autosuggestions-bare-function\";\n\nexport interface HoveringToolbarProps {\n  apiConfig: InsertionEditorApiConfig;\n  contextCategories: string[];\n  hoverMenuClassname: string | undefined;\n}\n\nexport const HoveringToolbar = (props: HoveringToolbarProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const editor = useSlate();\n  const selection = useSlateSelection();\n  const { isDisplayed, setIsDisplayed } = useHoveringEditorContext();\n\n  // only render on client\n  const [isClient, setIsClient] = useState(false);\n  useEffect(() => {\n    setIsClient(true);\n  }, []);\n\n  useEffect(() => {\n    const el = ref.current;\n    const { selection } = editor;\n\n    if (!el) {\n      return;\n    }\n\n    if (!selection) {\n      el.removeAttribute(\"style\");\n      return;\n    }\n\n    const domSelection = window.getSelection();\n    if (!domSelection || domSelection.rangeCount === 0) {\n      return;\n    }\n\n    const domRange = domSelection.getRangeAt(0);\n    const rect = domRange.getBoundingClientRect();\n\n    // We use window = (0,0,0,0) as a signal that the selection is not in the original copilot-textarea,\n    // but inside the hovering window.\n    //\n    // in such case, we simply do nothing.\n    if (rect.top === 0 && rect.left === 0 && rect.width === 0 && rect.height === 0) {\n      return;\n    }\n    const minGapFromEdge = 60;\n    const verticalOffsetFromCorner = 35;\n    const horizontalOffsetFromCorner = 15;\n    let top = rect.top + window.scrollY - el.offsetHeight + verticalOffsetFromCorner;\n    // make sure top is in the viewport and not too close to the edge\n    if (top < minGapFromEdge) {\n      top = rect.bottom + window.scrollY + minGapFromEdge;\n    } else if (top + el.offsetHeight > window.innerHeight - minGapFromEdge) {\n      top = rect.top + window.scrollY - el.offsetHeight - minGapFromEdge;\n    }\n\n    let left =\n      rect.left + window.scrollX - el.offsetWidth / 2 + rect.width / 2 + horizontalOffsetFromCorner;\n    // make sure left is in the viewport and not too close to the edge\n    if (left < minGapFromEdge) {\n      left = minGapFromEdge;\n    } else if (left + el.offsetWidth > window.innerWidth - minGapFromEdge) {\n      left = window.innerWidth - el.offsetWidth - minGapFromEdge;\n    }\n\n    el.style.opacity = \"1\";\n    el.style.position = \"absolute\";\n\n    el.style.top = `${top}px`;\n    el.style.left = `${left}px`;\n  });\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (ref.current && !ref.current.contains(event.target as Node)) {\n        setIsDisplayed(false);\n      }\n    };\n\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [ref, setIsDisplayed]);\n\n  if (!isClient) {\n    return null;\n  }\n\n  return (\n    <Portal>\n      <Menu\n        ref={ref}\n        className={\n          \"copilot-kit-textarea-css-scope \" +\n          (props.hoverMenuClassname ||\n            \"p-2 absolute z-10 top-[-10000px] left-[-10000px] mt-[-6px] opacity-0 transition-opacity duration-700\")\n        }\n      >\n        {isDisplayed && selection && (\n          <HoveringInsertionPromptBox\n            editorState={editorState(editor, selection)}\n            apiConfig={props.apiConfig}\n            closeWindow={() => {\n              setIsDisplayed(false);\n            }}\n            performInsertion={(insertedText) => {\n              // replace the selection with the inserted text\n              Transforms.delete(editor, { at: selection });\n              Transforms.insertText(editor, insertedText, {\n                at: selection,\n              });\n              setIsDisplayed(false);\n            }}\n            contextCategories={props.contextCategories}\n          />\n        )}\n      </Menu>\n    </Portal>\n  );\n};\n\nfunction editorState(editor: Editor, selection: Location): EditingEditorState {\n  const textAroundCursor = getTextAroundSelection(editor);\n  if (textAroundCursor) {\n    return textAroundCursor;\n  }\n\n  return {\n    textBeforeCursor: getFullEditorTextWithNewlines(editor),\n    textAfterCursor: \"\",\n    selectedText: \"\",\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,SAAS,WAAW,QAAQ,gBAAgB;AAC5C,SAA2B,kBAAkB;AAC7C,SAAS,UAAU,yBAAyB;AAkHlC;AA/FH,IAAM,kBAAkB,CAAC,UAAgC;AAC9D,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,SAAS,SAAS;AACxB,QAAM,YAAY,kBAAkB;AACpC,QAAM,EAAE,aAAa,eAAe,IAAI,yBAAyB;AAGjE,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,YAAU,MAAM;AACd,gBAAY,IAAI;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,UAAM,KAAK,IAAI;AACf,UAAM,EAAE,WAAAA,WAAU,IAAI;AAEtB,QAAI,CAAC,IAAI;AACP;AAAA,IACF;AAEA,QAAI,CAACA,YAAW;AACd,SAAG,gBAAgB,OAAO;AAC1B;AAAA,IACF;AAEA,UAAM,eAAe,OAAO,aAAa;AACzC,QAAI,CAAC,gBAAgB,aAAa,eAAe,GAAG;AAClD;AAAA,IACF;AAEA,UAAM,WAAW,aAAa,WAAW,CAAC;AAC1C,UAAM,OAAO,SAAS,sBAAsB;AAM5C,QAAI,KAAK,QAAQ,KAAK,KAAK,SAAS,KAAK,KAAK,UAAU,KAAK,KAAK,WAAW,GAAG;AAC9E;AAAA,IACF;AACA,UAAM,iBAAiB;AACvB,UAAM,2BAA2B;AACjC,UAAM,6BAA6B;AACnC,QAAI,MAAM,KAAK,MAAM,OAAO,UAAU,GAAG,eAAe;AAExD,QAAI,MAAM,gBAAgB;AACxB,YAAM,KAAK,SAAS,OAAO,UAAU;AAAA,IACvC,WAAW,MAAM,GAAG,eAAe,OAAO,cAAc,gBAAgB;AACtE,YAAM,KAAK,MAAM,OAAO,UAAU,GAAG,eAAe;AAAA,IACtD;AAEA,QAAI,OACF,KAAK,OAAO,OAAO,UAAU,GAAG,cAAc,IAAI,KAAK,QAAQ,IAAI;AAErE,QAAI,OAAO,gBAAgB;AACzB,aAAO;AAAA,IACT,WAAW,OAAO,GAAG,cAAc,OAAO,aAAa,gBAAgB;AACrE,aAAO,OAAO,aAAa,GAAG,cAAc;AAAA,IAC9C;AAEA,OAAG,MAAM,UAAU;AACnB,OAAG,MAAM,WAAW;AAEpB,OAAG,MAAM,MAAM,GAAG;AAClB,OAAG,MAAM,OAAO,GAAG;AAAA,EACrB,CAAC;AAED,YAAU,MAAM;AACd,UAAM,qBAAqB,CAAC,UAAsB;AAChD,UAAI,IAAI,WAAW,CAAC,IAAI,QAAQ,SAAS,MAAM,MAAc,GAAG;AAC9D,uBAAe,KAAK;AAAA,MACtB;AAAA,IACF;AAEA,aAAS,iBAAiB,aAAa,kBAAkB;AACzD,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,kBAAkB;AAAA,IAC9D;AAAA,EACF,GAAG,CAAC,KAAK,cAAc,CAAC;AAExB,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,UACC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WACE,qCACC,MAAM,sBACL;AAAA,MAGH,yBAAe,aACd;AAAA,QAAC;AAAA;AAAA,UACC,aAAa,YAAY,QAAQ,SAAS;AAAA,UAC1C,WAAW,MAAM;AAAA,UACjB,aAAa,MAAM;AACjB,2BAAe,KAAK;AAAA,UACtB;AAAA,UACA,kBAAkB,CAAC,iBAAiB;AAElC,uBAAW,OAAO,QAAQ,EAAE,IAAI,UAAU,CAAC;AAC3C,uBAAW,WAAW,QAAQ,cAAc;AAAA,cAC1C,IAAI;AAAA,YACN,CAAC;AACD,2BAAe,KAAK;AAAA,UACtB;AAAA,UACA,mBAAmB,MAAM;AAAA;AAAA,MAC3B;AAAA;AAAA,EAEJ,GACF;AAEJ;AAEA,SAAS,YAAY,QAAgB,WAAyC;AAC5E,QAAM,mBAAmB,uBAAuB,MAAM;AACtD,MAAI,kBAAkB;AACpB,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,kBAAkB,8BAA8B,MAAM;AAAA,IACtD,iBAAiB;AAAA,IACjB,cAAc;AAAA,EAChB;AACF;","names":["selection"]}

package/dist/{chunk-2RGJ6YD6.mjs → chunk-GXU6UYHI.mjs}

@@ -1,6 +1,6 @@
 import {
   HoveringInsertionPromptBoxCore
-} from "./chunk-UNLOFAW7.mjs";
+} from "./chunk-WPOOZJ3W.mjs";
 
 // src/components/hovering-toolbar/text-insertion-prompt-box/hovering-insertion-prompt-box.tsx
 import { jsx } from "react/jsx-runtime";
@@ -28,4 +28,4 @@ var HoveringInsertionPromptBox = (props) => {
 export {
   HoveringInsertionPromptBox
 };
-//# sourceMappingURL=chunk-2RGJ6YD6.mjs.map
+//# sourceMappingURL=chunk-GXU6UYHI.mjs.map

package/dist/{chunk-QQLDM3AI.mjs → chunk-I72DKFHD.mjs}

@@ -15,8 +15,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = (_a) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, __spreadValues({ className: cn(className) }, props));
+  var _b = _a, {
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx("div", { className: cn(className), children }) }));
 };
 DialogPortal.displayName = DialogPrimitive.Portal.displayName;
 var DialogOverlay = React.forwardRef((_a, ref) => {
@@ -105,4 +111,4 @@ export {
   DialogTitle,
   DialogDescription
 };
-//# sourceMappingURL=chunk-QQLDM3AI.mjs.map
+//# sourceMappingURL=chunk-I72DKFHD.mjs.map

package/dist/chunk-I72DKFHD.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/dialog.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst Dialog = DialogPrimitive.Root;\n\nconst DialogTrigger = DialogPrimitive.Trigger;\n\nconst DialogPortal = ({\n  className,\n  children,\n  ...props\n}: DialogPrimitive.DialogPortalProps & { className?: string }) => (\n  <DialogPrimitive.Portal {...props}>\n    <div className={cn(className)}>{children}</div>\n  </DialogPrimitive.Portal>\n);\n\nDialogPortal.displayName = DialogPrimitive.Portal.displayName;\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className,\n    )}\n    {...props}\n  />\n));\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\">\n        <X className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n));\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn(\"flex flex-col space-y-1.5 text-center sm:text-left\", className)} {...props} />\n);\nDialogHeader.displayName = \"DialogHeader\";\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\", className)}\n    {...props}\n  />\n);\nDialogFooter.displayName = \"DialogFooter\";\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\"text-lg font-semibold leading-none tracking-tight\", className)}\n    {...props}\n  />\n));\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n));\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\nexport {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n};\n"],"mappings":";;;;;;;;;;AAAA,YAAY,WAAW;AACvB,YAAY,qBAAqB;AACjC,SAAS,SAAS;AAcd,cAoCE,YApCF;AAVJ,IAAM,SAAyB;AAE/B,IAAM,gBAAgC;AAEtC,IAAM,eAAe,CAAC,OAIyC;AAJzC,eACpB;AAAA;AAAA,IACA;AAAA,EAZF,IAUsB,IAGjB,kBAHiB,IAGjB;AAAA,IAFH;AAAA,IACA;AAAA;AAGA,6BAAiB,wBAAhB,iCAA2B,QAA3B,EACC,8BAAC,SAAI,WAAW,GAAG,SAAS,GAAI,UAAS,IAC3C;AAAA;AAGF,aAAa,cAA8B,uBAAO;AAElD,IAAM,gBAAsB,iBAG1B,CAAC,IAAyB,QAAK;AAA9B,eAAE,YAzBL,IAyBG,IAAgB,kBAAhB,IAAgB,CAAd;AACH;AAAA,IAAiB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,OACI;AAAA,EACN;AAAA,CACD;AACD,cAAc,cAA8B,wBAAQ;AAEpD,IAAM,gBAAsB,iBAG1B,CAAC,IAAmC,QAAK;AAAxC,eAAE,aAAW,SAxChB,IAwCG,IAA0B,kBAA1B,IAA0B,CAAxB,aAAW;AACd,8BAAC,gBACC;AAAA,wBAAC,iBAAc;AAAA,IACf;AAAA,MAAiB;AAAA,MAAhB;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,SACI,QANL;AAAA,QAQE;AAAA;AAAA,UACD,qBAAiB,uBAAhB,EAAsB,WAAU,iRAC/B;AAAA,gCAAC,KAAE,WAAU,WAAU;AAAA,YACvB,oBAAC,UAAK,WAAU,WAAU,mBAAK;AAAA,aACjC;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAAA,CACD;AACD,cAAc,cAA8B,wBAAQ;AAEpD,IAAM,eAAe,CAAC,OAA+D;AAA/D,eAAE,YA7DxB,IA6DsB,IAAgB,kBAAhB,IAAgB,CAAd;AACtB,6BAAC,wBAAI,WAAW,GAAG,sDAAsD,SAAS,KAAO,MAAO;AAAA;AAElG,aAAa,cAAc;AAE3B,IAAM,eAAe,CAAC,OAA+D;AAA/D,eAAE,YAlExB,IAkEsB,IAAgB,kBAAhB,IAAgB,CAAd;AACtB;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,iEAAiE,SAAS;AAAA,OACpF;AAAA,EACN;AAAA;AAEF,aAAa,cAAc;AAE3B,IAAM,cAAoB,iBAGxB,CAAC,IAAyB,QAAK;AAA9B,eAAE,YA7EL,IA6EG,IAAgB,kBAAhB,IAAgB,CAAd;AACH;AAAA,IAAiB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,WAAW,GAAG,qDAAqD,SAAS;AAAA,OACxE;AAAA,EACN;AAAA,CACD;AACD,YAAY,cAA8B,sBAAM;AAEhD,IAAM,oBAA0B,iBAG9B,CAAC,IAAyB,QAAK;AAA9B,eAAE,YAzFL,IAyFG,IAAgB,kBAAhB,IAAgB,CAAd;AACH;AAAA,IAAiB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,WAAW,GAAG,iCAAiC,SAAS;AAAA,OACpD;AAAA,EACN;AAAA,CACD;AACD,kBAAkB,cAA8B,4BAAY;","names":[]}

package/dist/chunk-QJNFNPWH.mjs

@@ -0,0 +1,85 @@
+import {
+  replaceEditorText
+} from "./chunk-5UNJXFUO.mjs";
+import {
+  getFullEditorTextWithNewlines
+} from "./chunk-ECR45NSD.mjs";
+
+// src/hooks/base-copilot-textarea-implementation/use-populate-copilot-textarea-ref.ts
+import React from "react";
+import { ReactEditor } from "slate-react";
+function usePopulateCopilotTextareaRef(editor, ref) {
+  React.useImperativeHandle(ref, () => {
+    class Combined {
+      constructor(customMethods2, editorHtmlElement2) {
+        this.customMethods = customMethods2;
+        this.editorHtmlElement = editorHtmlElement2;
+      }
+      get(target, propKey) {
+        if (this.isKeyOfCustomMethods(propKey)) {
+          const value = this.customMethods[propKey];
+          if (typeof value === "function") {
+            return value.bind(this.customMethods);
+          }
+          return value;
+        } else if (this.isKeyOfHTMLElement(propKey)) {
+          const value = this.editorHtmlElement[propKey];
+          if (typeof value === "function") {
+            return value.bind(this.editorHtmlElement);
+          }
+          return value;
+        }
+      }
+      set(target, propKey, value) {
+        if (this.isKeyOfCustomMethods(propKey)) {
+          this.customMethods[propKey] = value;
+        } else if (this.isKeyOfHTMLElement(propKey)) {
+          this.editorHtmlElement[propKey] = value;
+        } else {
+          target[propKey] = value;
+        }
+        return true;
+      }
+      isKeyOfCustomMethods(key) {
+        return key in this.customMethods;
+      }
+      isKeyOfHTMLElement(key) {
+        return key in this.editorHtmlElement;
+      }
+    }
+    const handler = {
+      get(target, propKey) {
+        return target.get(target, propKey);
+      },
+      set(target, propKey, value) {
+        return target.set(target, propKey, value);
+      }
+    };
+    class CustomMethods {
+      constructor(editor2) {
+        this.editor = editor2;
+      }
+      focus() {
+        ReactEditor.focus(this.editor);
+      }
+      blur() {
+        ReactEditor.blur(this.editor);
+      }
+      get value() {
+        return getFullEditorTextWithNewlines(this.editor);
+      }
+      set value(value) {
+        replaceEditorText(this.editor, value);
+      }
+    }
+    const editorHtmlElement = ReactEditor.toDOMNode(editor, editor);
+    const customMethods = new CustomMethods(editor);
+    const combined = new Combined(customMethods, editorHtmlElement);
+    return new Proxy(combined, handler);
+  }, [editor]);
+}
+
+export {
+  usePopulateCopilotTextareaRef
+};
+//# sourceMappingURL=chunk-QJNFNPWH.mjs.map

package/dist/chunk-QJNFNPWH.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/base-copilot-textarea-implementation/use-populate-copilot-textarea-ref.ts"],"sourcesContent":["import React from \"react\";\nimport { Editor } from \"slate\";\nimport { ReactEditor } from \"slate-react\";\nimport { getFullEditorTextWithNewlines } from \"../../lib/get-text-around-cursor\";\nimport { replaceEditorText } from \"../../lib/slatejs-edits/replace-text\";\nimport { HTMLCopilotTextAreaElement } from \"../../types\";\nimport { CustomEditor } from \"../../types/base/custom-editor\";\n\nexport function usePopulateCopilotTextareaRef(\n  editor: Editor,\n  ref: React.Ref<HTMLCopilotTextAreaElement>,\n) {\n  React.useImperativeHandle(ref, () => {\n    class Combined {\n      constructor(\n        private customMethods: CustomMethods,\n        private editorHtmlElement: HTMLElement,\n      ) {}\n\n      [key: string]: any;\n\n      get(target: any, propKey: string): any {\n        if (this.isKeyOfCustomMethods(propKey)) {\n          const value = this.customMethods[propKey];\n          if (typeof value === \"function\") {\n            return value.bind(this.customMethods);\n          }\n          return value;\n        } else if (this.isKeyOfHTMLElement(propKey)) {\n          const value = this.editorHtmlElement[propKey];\n          if (typeof value === \"function\") {\n            return value.bind(this.editorHtmlElement);\n          }\n          return value;\n        }\n      }\n\n      set(target: any, propKey: string, value: any): boolean {\n        if (this.isKeyOfCustomMethods(propKey)) {\n          (this.customMethods as any)[propKey] = value;\n        } else if (this.isKeyOfHTMLElement(propKey)) {\n          (this.editorHtmlElement as any)[propKey] = value;\n        } else {\n          // Default behavior (optional)\n          target[propKey] = value;\n        }\n        return true;\n      }\n\n      private isKeyOfCustomMethods(key: string): key is keyof CustomMethods {\n        return key in this.customMethods;\n      }\n\n      private isKeyOfHTMLElement(key: string): key is keyof HTMLElement {\n        return key in this.editorHtmlElement;\n      }\n    }\n\n    const handler = {\n      get(target: any, propKey: keyof CustomMethods | keyof HTMLElement) {\n        return target.get(target, propKey);\n      },\n      set(target: any, propKey: keyof CustomMethods | keyof HTMLElement, value: any) {\n        return target.set(target, propKey, value);\n      },\n    };\n\n    class CustomMethods {\n      constructor(private editor: CustomEditor) {}\n\n      focus() {\n        ReactEditor.focus(this.editor);\n      }\n\n      blur() {\n        ReactEditor.blur(this.editor);\n      }\n\n      get value() {\n        return getFullEditorTextWithNewlines(this.editor);\n      }\n      set value(value: string) {\n        replaceEditorText(this.editor, value);\n      }\n    }\n\n    const editorHtmlElement = ReactEditor.toDOMNode(editor, editor);\n    const customMethods = new CustomMethods(editor);\n\n    const combined = new Combined(customMethods, editorHtmlElement);\n    return new Proxy(combined, handler);\n  }, [editor]);\n}\n"],"mappings":";;;;;;;;AAAA,OAAO,WAAW;AAElB,SAAS,mBAAmB;AAMrB,SAAS,8BACd,QACA,KACA;AACA,QAAM,oBAAoB,KAAK,MAAM;AACnC,UAAM,SAAS;AAAA,MACb,YACUA,gBACAC,oBACR;AAFQ,6BAAAD;AACA,iCAAAC;AAAA,MACP;AAAA,MAIH,IAAI,QAAa,SAAsB;AACrC,YAAI,KAAK,qBAAqB,OAAO,GAAG;AACtC,gBAAM,QAAQ,KAAK,cAAc,OAAO;AACxC,cAAI,OAAO,UAAU,YAAY;AAC/B,mBAAO,MAAM,KAAK,KAAK,aAAa;AAAA,UACtC;AACA,iBAAO;AAAA,QACT,WAAW,KAAK,mBAAmB,OAAO,GAAG;AAC3C,gBAAM,QAAQ,KAAK,kBAAkB,OAAO;AAC5C,cAAI,OAAO,UAAU,YAAY;AAC/B,mBAAO,MAAM,KAAK,KAAK,iBAAiB;AAAA,UAC1C;AACA,iBAAO;AAAA,QACT;AAAA,MACF;AAAA,MAEA,IAAI,QAAa,SAAiB,OAAqB;AACrD,YAAI,KAAK,qBAAqB,OAAO,GAAG;AACtC,UAAC,KAAK,cAAsB,OAAO,IAAI;AAAA,QACzC,WAAW,KAAK,mBAAmB,OAAO,GAAG;AAC3C,UAAC,KAAK,kBAA0B,OAAO,IAAI;AAAA,QAC7C,OAAO;AAEL,iBAAO,OAAO,IAAI;AAAA,QACpB;AACA,eAAO;AAAA,MACT;AAAA,MAEQ,qBAAqB,KAAyC;AACpE,eAAO,OAAO,KAAK;AAAA,MACrB;AAAA,MAEQ,mBAAmB,KAAuC;AAChE,eAAO,OAAO,KAAK;AAAA,MACrB;AAAA,IACF;AAEA,UAAM,UAAU;AAAA,MACd,IAAI,QAAa,SAAkD;AACjE,eAAO,OAAO,IAAI,QAAQ,OAAO;AAAA,MACnC;AAAA,MACA,IAAI,QAAa,SAAkD,OAAY;AAC7E,eAAO,OAAO,IAAI,QAAQ,SAAS,KAAK;AAAA,MAC1C;AAAA,IACF;AAEA,UAAM,cAAc;AAAA,MAClB,YAAoBC,SAAsB;AAAtB,sBAAAA;AAAA,MAAuB;AAAA,MAE3C,QAAQ;AACN,oBAAY,MAAM,KAAK,MAAM;AAAA,MAC/B;AAAA,MAEA,OAAO;AACL,oBAAY,KAAK,KAAK,MAAM;AAAA,MAC9B;AAAA,MAEA,IAAI,QAAQ;AACV,eAAO,8BAA8B,KAAK,MAAM;AAAA,MAClD;AAAA,MACA,IAAI,MAAM,OAAe;AACvB,0BAAkB,KAAK,QAAQ,KAAK;AAAA,MACtC;AAAA,IACF;AAEA,UAAM,oBAAoB,YAAY,UAAU,QAAQ,MAAM;AAC9D,UAAM,gBAAgB,IAAI,cAAc,MAAM;AAE9C,UAAM,WAAW,IAAI,SAAS,eAAe,iBAAiB;AAC9D,WAAO,IAAI,MAAM,UAAU,OAAO;AAAA,EACpC,GAAG,CAAC,MAAM,CAAC;AACb;","names":["customMethods","editorHtmlElement","editor"]}

package/dist/{chunk-Q5KJBZUF.mjs → chunk-VSVQZUPW.mjs}

@@ -1,7 +1,7 @@
 import {
   Dialog,
   DialogContent
-} from "./chunk-QQLDM3AI.mjs";
+} from "./chunk-I72DKFHD.mjs";
 import {
   cn
 } from "./chunk-YLFAIYRY.mjs";
@@ -121,4 +121,4 @@ export {
   CommandItem,
   CommandShortcut
 };
-//# sourceMappingURL=chunk-Q5KJBZUF.mjs.map
+//# sourceMappingURL=chunk-VSVQZUPW.mjs.map

package/dist/{chunk-5G7N3XVC.mjs → chunk-WGWQRALG.mjs}

@@ -6,7 +6,7 @@ import {
   CommandItem,
   CommandList,
   CommandSeparator
-} from "./chunk-Q5KJBZUF.mjs";
+} from "./chunk-VSVQZUPW.mjs";
 
 // src/components/source-search-box/source-search-box.tsx
 import { useState } from "react";
@@ -80,4 +80,4 @@ export {
   SourceSearchBox,
   Logo
 };
-//# sourceMappingURL=chunk-5G7N3XVC.mjs.map
+//# sourceMappingURL=chunk-WGWQRALG.mjs.map

package/dist/{chunk-UNLOFAW7.mjs → chunk-WPOOZJ3W.mjs}

@@ -15,7 +15,7 @@ import {
 } from "./chunk-LYB4B6MK.mjs";
 import {
   SourceSearchBox
-} from "./chunk-5G7N3XVC.mjs";
+} from "./chunk-WGWQRALG.mjs";
 import {
   streamPromiseFlatten
 } from "./chunk-2QDCE7PD.mjs";
@@ -222,4 +222,4 @@ var HoveringInsertionPromptBoxCore = ({
 export {
   HoveringInsertionPromptBoxCore
 };
-//# sourceMappingURL=chunk-UNLOFAW7.mjs.map
+//# sourceMappingURL=chunk-WPOOZJ3W.mjs.map

package/dist/components/base-copilot-textarea/base-copilot-textarea.d.ts

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { BaseCopilotTextareaProps } from '../../types/base/base-copilot-textarea-props.js';
+import { BaseCopilotTextareaProps } from '../../types/base/index.js';
 import '../../types/base/base-autosuggestions-config.js';
 import '../../types/base/autosuggestions-bare-function.js';
 import '@copilotkit/react-core';

package/dist/components/base-copilot-textarea/base-copilot-textarea.js

@@ -516,78 +516,74 @@ function replaceEditorText(editor, newText) {
 
 // src/hooks/base-copilot-textarea-implementation/use-populate-copilot-textarea-ref.ts
 function usePopulateCopilotTextareaRef(editor, ref) {
-  import_react3.default.useImperativeHandle(
-    ref,
-    () => {
-      class Combined {
-        constructor(customMethods2, editorHtmlElement2) {
-          this.customMethods = customMethods2;
-          this.editorHtmlElement = editorHtmlElement2;
-        }
-        get(target, propKey) {
-          if (this.isKeyOfCustomMethods(propKey)) {
-            const value = this.customMethods[propKey];
-            if (typeof value === "function") {
-              return value.bind(this.customMethods);
-            }
-            return value;
-          } else if (this.isKeyOfHTMLElement(propKey)) {
-            const value = this.editorHtmlElement[propKey];
-            if (typeof value === "function") {
-              return value.bind(this.editorHtmlElement);
-            }
-            return value;
+  import_react3.default.useImperativeHandle(ref, () => {
+    class Combined {
+      constructor(customMethods2, editorHtmlElement2) {
+        this.customMethods = customMethods2;
+        this.editorHtmlElement = editorHtmlElement2;
+      }
+      get(target, propKey) {
+        if (this.isKeyOfCustomMethods(propKey)) {
+          const value = this.customMethods[propKey];
+          if (typeof value === "function") {
+            return value.bind(this.customMethods);
           }
-        }
-        set(target, propKey, value) {
-          if (this.isKeyOfCustomMethods(propKey)) {
-            this.customMethods[propKey] = value;
-          } else if (this.isKeyOfHTMLElement(propKey)) {
-            this.editorHtmlElement[propKey] = value;
-          } else {
-            target[propKey] = value;
+          return value;
+        } else if (this.isKeyOfHTMLElement(propKey)) {
+          const value = this.editorHtmlElement[propKey];
+          if (typeof value === "function") {
+            return value.bind(this.editorHtmlElement);
           }
-          return true;
-        }
-        isKeyOfCustomMethods(key) {
-          return key in this.customMethods;
-        }
-        isKeyOfHTMLElement(key) {
-          return key in this.editorHtmlElement;
+          return value;
         }
       }
-      const handler = {
-        get(target, propKey) {
-          return target.get(target, propKey);
-        },
-        set(target, propKey, value) {
-          return target.set(target, propKey, value);
-        }
-      };
-      class CustomMethods {
-        constructor(editor2) {
-          this.editor = editor2;
-        }
-        focus() {
-          import_slate_react2.ReactEditor.focus(this.editor);
-        }
-        blur() {
-          import_slate_react2.ReactEditor.blur(this.editor);
-        }
-        get value() {
-          return getFullEditorTextWithNewlines(this.editor);
-        }
-        set value(value) {
-          replaceEditorText(this.editor, value);
+      set(target, propKey, value) {
+        if (this.isKeyOfCustomMethods(propKey)) {
+          this.customMethods[propKey] = value;
+        } else if (this.isKeyOfHTMLElement(propKey)) {
+          this.editorHtmlElement[propKey] = value;
+        } else {
+          target[propKey] = value;
         }
+        return true;
       }
-      const editorHtmlElement = import_slate_react2.ReactEditor.toDOMNode(editor, editor);
-      const customMethods = new CustomMethods(editor);
-      const combined = new Combined(customMethods, editorHtmlElement);
-      return new Proxy(combined, handler);
-    },
-    [editor]
-  );
+      isKeyOfCustomMethods(key) {
+        return key in this.customMethods;
+      }
+      isKeyOfHTMLElement(key) {
+        return key in this.editorHtmlElement;
+      }
+    }
+    const handler = {
+      get(target, propKey) {
+        return target.get(target, propKey);
+      },
+      set(target, propKey, value) {
+        return target.set(target, propKey, value);
+      }
+    };
+    class CustomMethods {
+      constructor(editor2) {
+        this.editor = editor2;
+      }
+      focus() {
+        import_slate_react2.ReactEditor.focus(this.editor);
+      }
+      blur() {
+        import_slate_react2.ReactEditor.blur(this.editor);
+      }
+      get value() {
+        return getFullEditorTextWithNewlines(this.editor);
+      }
+      set value(value) {
+        replaceEditorText(this.editor, value);
+      }
+    }
+    const editorHtmlElement = import_slate_react2.ReactEditor.toDOMNode(editor, editor);
+    const customMethods = new CustomMethods(editor);
+    const combined = new Combined(customMethods, editorHtmlElement);
+    return new Proxy(combined, handler);
+  }, [editor]);
 }
 
 // src/lib/slatejs-edits/add-autocompletions.ts
@@ -1341,6 +1337,7 @@ var HoveringToolbar = (props) => {
       left = window.innerWidth - el.offsetWidth - minGapFromEdge;
     }
     el.style.opacity = "1";
+    el.style.position = "absolute";
     el.style.top = `${top}px`;
     el.style.left = `${left}px`;
   });