@copilotkit/react-textarea 0.10.0 → 0.12.0

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/styles.css","../src/components/base-copilot-textarea/base-copilot-textarea.css"],"sourcesContent":["/*\n! tailwindcss v3.3.0 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: #e5e7eb; /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n*/\n\nhtml {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  -o-tab-size: 4;\n     tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n  font-feature-settings: normal; /* 5 */\n  font-variation-settings: normal; /* 6 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  font-weight: inherit; /* 1 */\n  line-height: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n  display: none;\n}\n\n*, ::before, ::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n}\n\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n}\n.block {\n  display: block;\n}\n.inline {\n  display: inline;\n}\n.resize-y {\n  resize: vertical;\n}\n.overflow-y-auto {\n  overflow-y: auto;\n}\n.border {\n  border-width: 1px;\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.italic {\n  font-style: italic;\n}\n.filter {\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n",".copilot-textarea.with-branding::after {\n    content: ''; /* Initially empty because we overrdie this CSS dynamically and we want to avoid flashing */\n    position: absolute;\n}\n    \n  \n.copilot-textarea.no-branding::after {\n    content: '';\n}"],"mappings":";AAOA;AAAA;AAAA;AAGE;AACA;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AAAA;AAYF;AACE;AACA;AACA;AACA;AACG;AACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAQF;AACE;AACA;AAAA;AASF;AACE;AACA;AACA;AAAA;AAOF;AACE;AACQ;AAAA;AAOV;AAAA;AAAA;AAAA;AAAA;AAAA;AAME;AACA;AAAA;AAOF;AACE;AACA;AAAA;AAOF;AAAA;AAEE;AAAA;AAQF;AAAA;AAAA;AAAA;AAIE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAOF;AACE;AAAA;AAOF;AAAA;AAEE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AASF;AACE;AACA;AACA;AAAA;AASF;AAAA;AAAA;AAAA;AAAA;AAKE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAOF;AAAA;AAEE;AAAA;AAQF;AAAA;AAAA;AAAA;AAIE;AACA;AACA;AAAA;AAOF;AACE;AAAA;AAOF;AACE;AAAA;AAOF;AACE;AAAA;AAOF;AAAA;AAEE;AAAA;AAQF;AACE;AACA;AAAA;AAOF;AACE;AAAA;AAQF;AACE;AACA;AAAA;AAOF;AACE;AAAA;AAOF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AAAA;AAAA;AAGE;AACA;AACA;AAAA;AAOF;AACE;AAAA;AAQF;AAAA;AACE;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAOF;AAAA;AAEE;AAAA;AAMF;AACE;AAAA;AASF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQE;AACA;AAAA;AAOF;AAAA;AAEE;AACA;AAAA;AAIF;AACE;AAAA;AAGF;AAAA;AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;;;AC/eF;AACI;AACA;AAAA;AAIJ;AACI;AAAA;","names":[]}
+{"version":3,"sources":["../src/styles.css","../src/components/base-copilot-textarea/base-copilot-textarea.css"],"sourcesContent":["/*\n! tailwindcss v3.3.0 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: #e5e7eb; /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n*/\n\nhtml {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  -o-tab-size: 4;\n     tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n  font-feature-settings: normal; /* 5 */\n  font-variation-settings: normal; /* 6 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  font-weight: inherit; /* 1 */\n  line-height: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n  display: none;\n}\n\n*, ::before, ::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n}\n\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n}\n.block {\n  display: block;\n}\n.inline {\n  display: inline;\n}\n.resize-y {\n  resize: vertical;\n}\n.overflow-y-auto {\n  overflow-y: auto;\n}\n.border {\n  border-width: 1px;\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.italic {\n  font-style: italic;\n}\n.blur {\n  --tw-blur: blur(8px);\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.filter {\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n",".copilot-textarea.with-branding::after {\n    content: ''; /* Initially empty because we overrdie this CSS dynamically and we want to avoid flashing */\n    position: absolute;\n}\n    \n  \n.copilot-textarea.no-branding::after {\n    content: '';\n}"],"mappings":";AAOA;AAAA;AAAA;AAGE;AACA;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AAAA;AAYF;AACE;AACA;AACA;AACA;AACG;AACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAQF;AACE;AACA;AAAA;AASF;AACE;AACA;AACA;AAAA;AAOF;AACE;AACQ;AAAA;AAOV;AAAA;AAAA;AAAA;AAAA;AAAA;AAME;AACA;AAAA;AAOF;AACE;AACA;AAAA;AAOF;AAAA;AAEE;AAAA;AAQF;AAAA;AAAA;AAAA;AAIE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAOF;AACE;AAAA;AAOF;AAAA;AAEE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AASF;AACE;AACA;AACA;AAAA;AASF;AAAA;AAAA;AAAA;AAAA;AAKE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAOF;AAAA;AAEE;AAAA;AAQF;AAAA;AAAA;AAAA;AAIE;AACA;AACA;AAAA;AAOF;AACE;AAAA;AAOF;AACE;AAAA;AAOF;AACE;AAAA;AAOF;AAAA;AAEE;AAAA;AAQF;AACE;AACA;AAAA;AAOF;AACE;AAAA;AAQF;AACE;AACA;AAAA;AAOF;AACE;AAAA;AAOF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AAAA;AAAA;AAGE;AACA;AACA;AAAA;AAOF;AACE;AAAA;AAQF;AAAA;AACE;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAOF;AAAA;AAEE;AAAA;AAMF;AACE;AAAA;AASF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQE;AACA;AAAA;AAOF;AAAA;AAEE;AACA;AAAA;AAIF;AACE;AAAA;AAGF;AAAA;AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AAAA;;;ACnfF;AACI;AACA;AAAA;AAIJ;AACI;AAAA;","names":[]}

package/dist/index.d.ts

@@ -1,7 +1,9 @@
-export { BaseCopilotTextarea, BaseCopilotTextareaProps } from './components/base-copilot-textarea/base-copilot-textarea.js';
+export { BaseCopilotTextarea } from './components/base-copilot-textarea/base-copilot-textarea.js';
 export { CopilotTextarea, CopilotTextareaProps } from './components/copilot-textarea/copilot-textarea.js';
 export { BaseAutosuggestionsConfig, defaultBaseAutosuggestionsConfig } from './types/base/base-autosuggestions-config.js';
 export { AutosuggestionsBareFunction } from './types/base/autosuggestions-bare-function.js';
+export { BaseCopilotTextareaProps } from './types/base/base-copilot-textarea-props.js';
+export { HTMLCopilotTextAreaElement } from './types/html-copilot-textarea-element.js';
 export { AutosuggestionsConfig, MakeSystemPrompt, defaultAutosuggestionsConfig, defaultFewShotMessages, defaultMakeSystemPrompt } from './types/standard-autosuggestions/autosuggestions-config.js';
 export { MinimalChatGPTMessage } from './types/standard-autosuggestions/minimal-chat-gpt-message.js';
 import 'react';

package/dist/index.mjs

@@ -1,27 +1,29 @@
-import './chunk-FD6FGKYY.mjs';
-import './chunk-IU3WTXLQ.mjs';
+import './chunk-DE5K76I2.mjs';
+import './chunk-WADHCMPK.mjs';
 import './chunk-MMVDU6DF.mjs';
-export { CopilotTextarea } from './chunk-NHLYAJCQ.mjs';
+export { CopilotTextarea } from './chunk-DCQ27XRF.mjs';
 import './chunk-A3SFEHWZ.mjs';
 import './chunk-AZQCUNBV.mjs';
 export { defaultAutosuggestionsConfig, defaultFewShotMessages, defaultMakeSystemPrompt } from './chunk-EHQ5TN4R.mjs';
-export { BaseCopilotTextarea } from './chunk-CU2M5BIJ.mjs';
+export { BaseCopilotTextarea } from './chunk-M6QFKIBE.mjs';
+import './chunk-HZGSG7ST.mjs';
+import './chunk-UW3ITU2Y.mjs';
+import './chunk-CSGFJU3L.mjs';
+import './chunk-AOEXKPIX.mjs';
 import './chunk-WJYQWL4I.mjs';
 import './chunk-4XYYSJ5C.mjs';
 import './chunk-TSF4AJIK.mjs';
-import './chunk-3UQM3NLM.mjs';
+import './chunk-KCHYD3EB.mjs';
+import './chunk-KGKLUWKW.mjs';
 import './chunk-WJHSY5T6.mjs';
 export { defaultBaseAutosuggestionsConfig } from './chunk-7KWRVIYV.mjs';
 import './chunk-LNAIMEB2.mjs';
 import './chunk-OELUUJZY.mjs';
-import './chunk-THWPPG6M.mjs';
+import './chunk-IGQI27NI.mjs';
+import './chunk-IU3WTXLQ.mjs';
 import './chunk-H4VKQGVU.mjs';
-import './chunk-E2UEE45I.mjs';
-import './chunk-UW3ITU2Y.mjs';
-import './chunk-KGKLUWKW.mjs';
-import './chunk-6SYD77G6.mjs';
-import './chunk-KCHYD3EB.mjs';
 import './chunk-NKW5OU2S.mjs';
+import './chunk-3UQM3NLM.mjs';
 import './chunk-MRXNTQOX.mjs';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map

package/dist/types/base/base-copilot-textarea-props.d.ts

@@ -0,0 +1,38 @@
+import { TextareaHTMLAttributes } from 'react';
+import { BaseAutosuggestionsConfig } from './base-autosuggestions-config.js';
+
+/**
+ * `BaseCopilotTextareaProps` defines the properties for the `BaseCopilotTextarea` component.
+ *
+ * @extends {Omit<TextareaHTMLAttributes<HTMLDivElement>, "onChange">}
+ *
+ * @property {boolean} [disableBranding=false] - Determines whether branding should be disabled. Default is `false`.
+ *
+ * @property {React.CSSProperties} [placeholderStyle] - Specifies the CSS styles to apply to the placeholder text.
+ *
+ * @property {React.CSSProperties} [suggestionsStyle] - Specifies the CSS styles to apply to the suggestions list.
+ *
+ * @property {string} [value] - The initial value of the textarea. Can be controlled via `onValueChange`.
+ *
+ * @property {(value: string) => void} [onValueChange] - Callback invoked when the value of the textarea changes.
+ *
+ * @property {(event: React.ChangeEvent<HTMLTextAreaElement>) => void} [onChange] - Callback invoked when a `change` event is triggered on the textarea element. The event only actually includes the `event.target.value` and `event.currentTarget.value` properties (all that is required in 99% of cases).
+ *
+ * @property {Partial<BaseAutosuggestionsConfig> & {
+ *   purposePrompt: string;
+ * }} autosuggestionsConfig - Configuration settings for the autosuggestions feature.
+ * Includes a mandatory `purposePrompt` to guide the autosuggestions.
+ */
+interface BaseCopilotTextareaProps extends Omit<TextareaHTMLAttributes<HTMLDivElement>, "onChange"> {
+    disableBranding?: boolean;
+    placeholderStyle?: React.CSSProperties;
+    suggestionsStyle?: React.CSSProperties;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    autosuggestionsConfig: Partial<BaseAutosuggestionsConfig> & {
+        purposePrompt: string;
+    };
+}
+
+export { BaseCopilotTextareaProps };

package/dist/types/base/base-copilot-textarea-props.mjs

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=base-copilot-textarea-props.mjs.map

package/dist/types/base/base-copilot-textarea-props.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/dist/types/base/index.d.ts

@@ -1,2 +1,4 @@
 export { BaseAutosuggestionsConfig, defaultBaseAutosuggestionsConfig } from './base-autosuggestions-config.js';
 export { AutosuggestionsBareFunction } from './autosuggestions-bare-function.js';
+export { BaseCopilotTextareaProps } from './base-copilot-textarea-props.js';
+import 'react';

package/dist/types/html-copilot-textarea-element.d.ts

@@ -0,0 +1,7 @@
+interface HTMLCopilotTextAreaElement extends HTMLElement {
+    value: string;
+    focus: () => void;
+    blur: () => void;
+}
+
+export { HTMLCopilotTextAreaElement };

package/dist/types/html-copilot-textarea-element.mjs

@@ -0,0 +1,3 @@
+import '../chunk-WADHCMPK.mjs';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=html-copilot-textarea-element.mjs.map

package/dist/types/html-copilot-textarea-element.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/dist/types/index.d.ts

@@ -1,4 +1,7 @@
 export { BaseAutosuggestionsConfig, defaultBaseAutosuggestionsConfig } from './base/base-autosuggestions-config.js';
 export { AutosuggestionsBareFunction } from './base/autosuggestions-bare-function.js';
+export { BaseCopilotTextareaProps } from './base/base-copilot-textarea-props.js';
+export { HTMLCopilotTextAreaElement } from './html-copilot-textarea-element.js';
 export { AutosuggestionsConfig, MakeSystemPrompt, defaultAutosuggestionsConfig, defaultFewShotMessages, defaultMakeSystemPrompt } from './standard-autosuggestions/autosuggestions-config.js';
 export { MinimalChatGPTMessage } from './standard-autosuggestions/minimal-chat-gpt-message.js';
+import 'react';

package/dist/types/index.mjs

@@ -1,4 +1,5 @@
-import '../chunk-FD6FGKYY.mjs';
+import '../chunk-DE5K76I2.mjs';
+import '../chunk-WADHCMPK.mjs';
 import '../chunk-AZQCUNBV.mjs';
 export { defaultAutosuggestionsConfig, defaultFewShotMessages, defaultMakeSystemPrompt } from '../chunk-EHQ5TN4R.mjs';
 import '../chunk-WJHSY5T6.mjs';

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.10.0",
+  "version": "0.12.0",
   "sideEffects": [
     "**/*.css"
   ],
@@ -30,9 +30,9 @@
     "ts-jest": "^29.1.1",
     "tsup": "^6.1.3",
     "typescript": "^4.9.4",
+    "eslint-config-custom": "0.2.0",
     "tailwind-config": "0.1.0",
-    "tsconfig": "0.3.0",
-    "eslint-config-custom": "0.2.0"
+    "tsconfig": "0.3.0"
   },
   "dependencies": {
     "ai": "^2.1.22",

package/src/components/base-copilot-textarea/base-copilot-textarea.tsx

@@ -1,16 +1,10 @@
-import "./base-copilot-textarea.css";
-import {
-  TextareaHTMLAttributes,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Descendant, Editor } from "slate";
 import { Editable, Slate } from "slate-react";
 import { twMerge } from "tailwind-merge";
-import { useAutosuggestions } from "../../hooks/use-autosuggestions";
-import { useCopilotTextareaEditor } from "../../hooks/use-copilot-textarea-editor";
+import { useAutosuggestions } from "../../hooks/base-copilot-textarea-implementation/use-autosuggestions";
+import { useCopilotTextareaEditor } from "../../hooks/base-copilot-textarea-implementation/use-copilot-textarea-editor";
+import { usePopulateCopilotTextareaRef } from "../../hooks/base-copilot-textarea-implementation/use-populate-copilot-textarea-ref";
 import {
   getFullEditorTextWithNewlines,
   getTextAroundCursor,
@@ -24,164 +18,200 @@ import {
   defaultBaseAutosuggestionsConfig,
 } from "../../types/base";
 import { AutosuggestionState } from "../../types/base/autosuggestion-state";
+import { BaseCopilotTextareaProps } from "../../types/base/base-copilot-textarea-props";
+import "./base-copilot-textarea.css";
 import { makeRenderElementFunction } from "./render-element";
 import { makeRenderPlaceholderFunction } from "./render-placeholder";
 import { useAddBrandingCss } from "./use-add-branding-css";
 
-export interface BaseCopilotTextareaProps
-  extends TextareaHTMLAttributes<HTMLDivElement> {
-  disableBranding?: boolean;
-  placeholderStyle?: React.CSSProperties;
-  suggestionsStyle?: React.CSSProperties;
-  value?: string;
-  onValueChange?: (value: string) => void;
-  autosuggestionsConfig: Partial<BaseAutosuggestionsConfig> & {
-    purposePrompt: string;
-  };
+export interface HTMLCopilotTextAreaElement extends HTMLElement {
+  value: string;
+  focus: () => void;
+  blur: () => void;
 }
 
-export function BaseCopilotTextarea(
-  props: BaseCopilotTextareaProps & {
-    autosuggestionsFunction: AutosuggestionsBareFunction;
-  }
-): JSX.Element {
-  const autosuggestionsConfig: BaseAutosuggestionsConfig = {
-    ...defaultBaseAutosuggestionsConfig,
-    ...props.autosuggestionsConfig,
-  };
-
-  const valueOnInitialRender = useMemo(() => props.value ?? "", []);
-  const [lastKnownFullEditorText, setLastKnownFullEditorText] =
-    useState(valueOnInitialRender);
-
-  const initialValue: Descendant[] = useMemo(() => {
-    return [
-      {
-        type: "paragraph",
-        children: [{ text: valueOnInitialRender }],
-      },
-    ];
-  }, [valueOnInitialRender]);
-
-  const editor = useCopilotTextareaEditor();
-
-  const insertText = useCallback(
-    (autosuggestion: AutosuggestionState) => {
-      Editor.insertText(editor, autosuggestion.text, {
-        at: autosuggestion.point,
-      });
+export const BaseCopilotTextarea = React.forwardRef(
+  (
+    props: BaseCopilotTextareaProps & {
+      autosuggestionsFunction: AutosuggestionsBareFunction;
     },
-    [editor]
-  );
-
-  const {
-    currentAutocompleteSuggestion,
-    onChangeHandler: onChangeHandlerForAutocomplete,
-    onKeyDownHandler: onKeyDownHandlerForAutocomplete,
-  } = useAutosuggestions(
-    autosuggestionsConfig.debounceTime,
-    autosuggestionsConfig.acceptAutosuggestionKey,
-    props.autosuggestionsFunction,
-    insertText,
-    autosuggestionsConfig.disableWhenEmpty,
-    autosuggestionsConfig.disabled
-  );
-
-  // sync autosuggestions state with the editor
-  useEffect(() => {
-    clearAutocompletionsFromEditor(editor);
-    if (currentAutocompleteSuggestion) {
-      addAutocompletionsToEditor(
-        editor,
-        currentAutocompleteSuggestion.text,
-        currentAutocompleteSuggestion.point
-      );
-    }
-  }, [currentAutocompleteSuggestion]);
-
-  const suggestionStyleAugmented: React.CSSProperties = useMemo(() => {
-    return {
-      fontStyle: "italic",
-      color: "gray",
-      ...props.suggestionsStyle,
+    ref: React.Ref<HTMLCopilotTextAreaElement>
+  ): JSX.Element => {
+    const autosuggestionsConfig: BaseAutosuggestionsConfig = {
+      ...defaultBaseAutosuggestionsConfig,
+      ...props.autosuggestionsConfig,
     };
-  }, [props.suggestionsStyle]);
-
-  useAddBrandingCss(suggestionStyleAugmented, props.disableBranding);
-
-  const renderElementMemoized = useMemo(() => {
-    return makeRenderElementFunction(suggestionStyleAugmented);
-  }, [suggestionStyleAugmented]);
 
-  const renderPlaceholderMemoized = useMemo(() => {
-    // For some reason slateJS specifies a top value of 0, which makes for strange styling. We override this here.
-    const placeholderStyleSlatejsOverrides: React.CSSProperties = {
-      top: undefined,
-    };
-
-    const placeholderStyleAugmented: React.CSSProperties = {
-      ...placeholderStyleSlatejsOverrides,
-      ...props.placeholderStyle,
-    };
-
-    return makeRenderPlaceholderFunction(placeholderStyleAugmented);
-  }, [props.placeholderStyle]);
-
-  // update the editor text, but only when the value changes from outside the component
-  useEffect(() => {
-    if (props.value === lastKnownFullEditorText) {
-      return;
-    }
-
-    setLastKnownFullEditorText(props.value ?? "");
-    replaceEditorText(editor, props.value ?? "");
-  }, [props.value]);
-
-  // separate into TextareaHTMLAttributes<HTMLDivElement> and CopilotTextareaProps
-  const {
-    placeholderStyle,
-    value,
-    onValueChange,
-    autosuggestionsConfig: autosuggestionsConfigFromProps,
-    autosuggestionsFunction,
-    className,
-    ...propsToForward
-  } = props;
-
-  const moddedClassName = (() => {
-    const baseClassName = "copilot-textarea";
-    const brandingClass = props.disableBranding
-      ? "no-branding"
-      : "with-branding";
-    const defaultTailwindClassName = "bg-white overflow-y-auto resize-y";
-    const mergedClassName = twMerge(defaultTailwindClassName, className ?? "");
-    return `${baseClassName} ${brandingClass} ${mergedClassName}`;
-  })();
-
-  return (
-    // Add the editable component inside the context.
-    <Slate
-      editor={editor}
-      initialValue={initialValue}
-      onChange={(value) => {
-        const newEditorState = getTextAroundCursor(editor);
-
-        const fullEditorText = newEditorState
-          ? newEditorState.textBeforeCursor + newEditorState.textAfterCursor
-          : getFullEditorTextWithNewlines(editor); // we don't double-parse the editor. When `newEditorState` is null, we didn't parse the editor yet.
-
-        setLastKnownFullEditorText(fullEditorText);
-        onChangeHandlerForAutocomplete(newEditorState);
-        props.onValueChange?.(fullEditorText);
-      }}
-    >
-      <Editable
-        renderElement={renderElementMemoized}
-        renderPlaceholder={renderPlaceholderMemoized}
-        onKeyDown={onKeyDownHandlerForAutocomplete}
-        className={moddedClassName}
-        {...propsToForward}
-      />
-    </Slate>
-  );
+    const valueOnInitialRender = useMemo(() => props.value ?? "", []);
+    const [lastKnownFullEditorText, setLastKnownFullEditorText] =
+      useState(valueOnInitialRender);
+
+    const initialValue: Descendant[] = useMemo(() => {
+      return [
+        {
+          type: "paragraph",
+          children: [{ text: valueOnInitialRender }],
+        },
+      ];
+    }, [valueOnInitialRender]);
+
+    const editor = useCopilotTextareaEditor();
+
+    const insertText = useCallback(
+      (autosuggestion: AutosuggestionState) => {
+        Editor.insertText(editor, autosuggestion.text, {
+          at: autosuggestion.point,
+        });
+      },
+      [editor]
+    );
+
+    const {
+      currentAutocompleteSuggestion,
+      onChangeHandler: onChangeHandlerForAutocomplete,
+      onKeyDownHandler: onKeyDownHandlerForAutocomplete,
+    } = useAutosuggestions(
+      autosuggestionsConfig.debounceTime,
+      autosuggestionsConfig.acceptAutosuggestionKey,
+      props.autosuggestionsFunction,
+      insertText,
+      autosuggestionsConfig.disableWhenEmpty,
+      autosuggestionsConfig.disabled
+    );
+
+    // sync autosuggestions state with the editor
+    useEffect(() => {
+      clearAutocompletionsFromEditor(editor);
+      if (currentAutocompleteSuggestion) {
+        addAutocompletionsToEditor(
+          editor,
+          currentAutocompleteSuggestion.text,
+          currentAutocompleteSuggestion.point
+        );
+      }
+    }, [currentAutocompleteSuggestion]);
+
+    const suggestionStyleAugmented: React.CSSProperties = useMemo(() => {
+      return {
+        fontStyle: "italic",
+        color: "gray",
+        ...props.suggestionsStyle,
+      };
+    }, [props.suggestionsStyle]);
+
+    useAddBrandingCss(suggestionStyleAugmented, props.disableBranding);
+
+    const renderElementMemoized = useMemo(() => {
+      return makeRenderElementFunction(suggestionStyleAugmented);
+    }, [suggestionStyleAugmented]);
+
+    const renderPlaceholderMemoized = useMemo(() => {
+      // For some reason slateJS specifies a top value of 0, which makes for strange styling. We override this here.
+      const placeholderStyleSlatejsOverrides: React.CSSProperties = {
+        top: undefined,
+      };
+
+      const placeholderStyleAugmented: React.CSSProperties = {
+        ...placeholderStyleSlatejsOverrides,
+        ...props.placeholderStyle,
+      };
+
+      return makeRenderPlaceholderFunction(placeholderStyleAugmented);
+    }, [props.placeholderStyle]);
+
+    // update the editor text, but only when the value changes from outside the component
+    useEffect(() => {
+      if (props.value === lastKnownFullEditorText) {
+        return;
+      }
+
+      setLastKnownFullEditorText(props.value ?? "");
+      replaceEditorText(editor, props.value ?? "");
+    }, [props.value]);
+
+    // separate into TextareaHTMLAttributes<HTMLDivElement> and CopilotTextareaProps
+    const {
+      placeholderStyle,
+      value,
+      onValueChange,
+      autosuggestionsConfig: autosuggestionsConfigFromProps,
+      autosuggestionsFunction,
+      className,
+      onChange,
+      onKeyDown,
+      ...propsToForward
+    } = props;
+
+    const moddedClassName = (() => {
+      const baseClassName = "copilot-textarea";
+      const brandingClass = props.disableBranding
+        ? "no-branding"
+        : "with-branding";
+      const defaultTailwindClassName = "bg-white overflow-y-auto resize-y";
+      const mergedClassName = twMerge(
+        defaultTailwindClassName,
+        className ?? ""
+      );
+      return `${baseClassName} ${brandingClass} ${mergedClassName}`;
+    })();
+
+    usePopulateCopilotTextareaRef(editor, ref);
+
+    return (
+      <Slate
+        editor={editor}
+        initialValue={initialValue}
+        onChange={(value) => {
+          const newEditorState = getTextAroundCursor(editor);
+
+          const fullEditorText = newEditorState
+            ? newEditorState.textBeforeCursor + newEditorState.textAfterCursor
+            : getFullEditorTextWithNewlines(editor); // we don't double-parse the editor. When `newEditorState` is null, we didn't parse the editor yet.
+
+          setLastKnownFullEditorText(fullEditorText);
+          onChangeHandlerForAutocomplete(newEditorState);
+
+          props.onValueChange?.(fullEditorText);
+          props.onChange?.(makeSemiFakeReactTextAreaEvent(fullEditorText));
+        }}
+      >
+        <Editable
+          renderElement={renderElementMemoized}
+          renderPlaceholder={renderPlaceholderMemoized}
+          onKeyDown={(event) => {
+            onKeyDownHandlerForAutocomplete(event); // forward the event for internal use
+            props.onKeyDown?.(event); // forward the event for external use
+          }}
+          className={moddedClassName}
+          {...propsToForward}
+        />
+      </Slate>
+    );
+  }
+);
+
+// Consumers of <textarea> expect a `onChange: (React.ChangeEvent<HTMLTextAreaElement>) => void` event handler to be passed in.
+// This is *extremely* common, and we want to support it.
+//
+// We can't support the full functionality, but in 99% of cases, the consumer only cares about the `event.target.value` property --
+// that's how they get the new value of the textarea.
+//
+// So, the tradeoff we are making is minimizing compiler complaint, with a small chance of runtime error.
+// The alternative would be defining a different onChange entrypoint (we actually do have that in `onValueChange`),
+// And starting to explain subtleties to users the moment they try to use the component for the first time for very basic functionality.
+//
+// If this proves problematic, we can always revisit this decision.
+function makeSemiFakeReactTextAreaEvent(
+  currentText: string
+): React.ChangeEvent<HTMLTextAreaElement> {
+  return {
+    target: {
+      value: currentText,
+      type: "copilot-textarea",
+    },
+    currentTarget: {
+      value: currentText,
+      type: "copilot-textarea",
+    },
+  } as React.ChangeEvent<HTMLTextAreaElement>;
 }

package/src/components/base-copilot-textarea/use-add-branding-css.tsx

@@ -4,11 +4,14 @@ export function useAddBrandingCss(
   suggestionStyleAugmented: React.CSSProperties,
   disableBranding: boolean | undefined
 ) {
+  const cssSelector = ".copilot-textarea.with-branding";
   useEffect(() => {
     if (disableBranding) {
       return;
     }
 
+    // ---
+    // 1: Add the CSS to the DOM
     const styleEl = document.createElement("style");
     styleEl.id = "dynamic-styles";
 
@@ -36,16 +39,37 @@ export function useAddBrandingCss(
 
     // Append it to the ::after class
     styleEl.innerHTML = `
-      .copilot-textarea.with-branding::after {
+      ${cssSelector}::after {
         ${dynamicStyles}
       }
     `;
 
     document.head.appendChild(styleEl);
 
+    // ---
+    // 2: Add the scroll listener (to keep the branding in the bottom right as the textarea scrolls)
+    const textarea = document.querySelector(cssSelector);
+    const handleScroll = () => {
+      const styleEl = document.getElementById("dynamic-styles");
+      if (styleEl && textarea) {
+        const offsetFromBottom = -textarea.scrollTop + 6;
+        const offsetFromRight = -textarea.scrollLeft + 6;
+        styleEl.innerHTML = `
+          ${cssSelector}::after {
+            ${dynamicStyles}
+            bottom: ${offsetFromBottom}px;
+            right: ${offsetFromRight}px;
+          }
+        `;
+      }
+    };
+
+    textarea?.addEventListener("scroll", handleScroll);
+
     // Cleanup
     return () => {
       document.getElementById("dynamic-styles")?.remove();
+      textarea?.removeEventListener("scroll", handleScroll);
     };
   }, [disableBranding, suggestionStyleAugmented]);
 }