@intlayer/design-system 8.4.5 → 8.4.7

package/dist/esm/components/TextArea/AutocompleteTextArea.mjs

@@ -1,258 +1,93 @@
 'use client';
 
-import { useAutocomplete } from "../../hooks/reactQuery.mjs";
-import { AutoSizedTextArea } from "./AutoSizeTextArea.mjs";
+import { ContentEditableTextArea } from "./ContentEditableTextArea.mjs";
 import { useEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useConfiguration } from "@intlayer/editor-react";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/components/TextArea/AutocompleteTextArea.tsx
 /**
-* Custom hook for debouncing values to prevent excessive API calls.
-*
-* Delays updating the returned value until the input value has stopped changing
-* for the specified delay period.
-*
-* @param value - The value to debounce
-* @param delay - Delay in milliseconds before updating the debounced value
-* @returns The debounced value that only updates after the delay period
-*
-* @example
-* ```tsx
-* const [searchTerm, setSearchTerm] = useState('');
-* const debouncedSearchTerm = useDebounce(searchTerm, 300);
-*
-* useEffect(() => {
-*   if (debouncedSearchTerm) {
-*     performSearch(debouncedSearchTerm);
-*   }
-* }, [debouncedSearchTerm]);
-* ```
-*/
-const useDebounce = (value, delay) => {
-	const [debouncedValue, setDebouncedValue] = useState(value);
-	useEffect(() => {
-		const timer = setTimeout(() => {
-			setDebouncedValue(value);
-		}, delay);
-		return () => clearTimeout(timer);
-	}, [value, delay]);
-	return debouncedValue;
-};
-/**
 * AutoCompleteTextarea Component
 *
-* An intelligent textarea that provides AI-powered autocomplete suggestions as users type,
-* combining auto-sizing functionality with contextual text completion.
-*
-* ## Features
-* - **AI-Powered Suggestions**: Context-aware autocomplete using configured AI models
-* - **Debounced API Calls**: Efficient suggestion fetching with 200ms debounce
-* - **Visual Suggestions**: Inline preview of suggested completions
-* - **Keyboard Navigation**: Tab key to accept suggestions
-* - **Context Analysis**: Uses surrounding text for better suggestions
-* - **Auto-Sizing**: Inherits all AutoSizedTextArea capabilities
-* - **Performance Optimized**: Smart caching and minimal re-renders
-*
-* ## Technical Implementation
-* - **Debounce Strategy**: 200ms delay before fetching suggestions
-* - **Context Window**: 5 lines before/after cursor for context
-* - **Minimum Trigger**: Requires 3+ characters before suggesting
-* - **Position Tracking**: Ghost layer for accurate suggestion positioning
-* - **Cursor Management**: Tracks cursor position during suggestion fetch
+* A textarea with inline autocomplete ghost text, built on a contentEditable div
+* instead of a native `<textarea>`. Ghost text (suggestions) is rendered inline
+* at the cursor position and can be accepted with the Tab key.
 *
-* ## AI Integration
-* - Uses configured AI model (OpenAI, Anthropic, etc.)
-* - Sends context-aware prompts for relevant suggestions
-* - Respects temperature and model settings from configuration
-* - Handles API errors gracefully without interrupting user flow
-*
-* ## Use Cases
-* - **Content Creation**: Blog posts, articles, documentation
-* - **Code Comments**: Intelligent code documentation assistance
-* - **Email Composition**: Professional email writing assistance
-* - **Creative Writing**: Story and narrative completion
-* - **Technical Documentation**: API docs, README files
-* - **Social Media**: Post creation with engagement optimization
+* The component wraps `ContentEditableTextArea` and manages suggestion state.
+* When `suggestion` prop is provided it is shown as ghost text at the end of the
+* current text. When `isActive` is false, ghost text is hidden.
 *
 * @example
 * ```tsx
-* // Blog writing assistant
-* const [blogPost, setBlogPost] = useState('');
-* const [isAiEnabled, setIsAiEnabled] = useState(true);
-*
-* <div className="space-y-4">
-*   <div className="flex items-center gap-2">
-*     <Switch
-*       checked={isAiEnabled}
-*       onChange={setIsAiEnabled}
-*     />
-*     <label>AI Writing Assistant</label>
-*   </div>
-*
-*   <AutoCompleteTextarea
-*     value={blogPost}
-*     onChange={(e) => setBlogPost(e.target.value)}
-*     placeholder="Start writing your blog post..."
-*     isActive={isAiEnabled}
-*     autoSize={true}
-*     maxRows={15}
-*     className="min-h-[200px] font-serif text-lg leading-relaxed"
-*   />
-* </div>
-*
-* // Code documentation assistant
-* <AutoCompleteTextarea
-*   value={docComment}
-*   onChange={handleDocChange}
-*   placeholder="/** Describe this function... *\/"
-*   isActive={true}
-*   autoSize={true}
-*   maxRows={8}
-*   className="font-mono text-sm"
-* />
-*
-* // Email composition with templates
 * <AutoCompleteTextarea
-*   defaultValue="Dear "
-*   placeholder="AI will help complete your email..."
+*   value={content}
+*   onChange={handleChange}
+*   suggestion="suggested completion..."
 *   isActive={true}
 *   autoSize={true}
-*   maxRows={12}
-*   variant={InputVariant.DEFAULT}
 * />
 * ```
-*
-* ## Accessibility
-* - Ghost layer is properly hidden from screen readers
-* - Maintains focus management during suggestion acceptance
-* - Preserves keyboard navigation patterns
-* - Respects reduced motion preferences
 */
 const AutoCompleteTextarea = ({ isActive = true, suggestion: suggestionProp, ...props }) => {
-	const defaultValue = String(props.value ?? props.defaultValue ?? "");
-	const { mutate: autocomplete } = useAutocomplete();
-	const configuration = useConfiguration();
-	const [isTyped, setIsTyped] = useState(false);
-	const [text, setText] = useState(defaultValue);
+	const [text, setText] = useState(String(props.value ?? props.defaultValue ?? ""));
 	const [suggestion, setSuggestion] = useState("");
-	const textareaRef = useRef(null);
-	const placeholderRef = useRef(null);
-	const ghostLayerRef = useRef(null);
-	const [suggestionPosition, setSuggestionPosition] = useState(null);
-	const [cursorAtFetch, setCursorAtFetch] = useState(-1);
-	const debouncedText = useDebounce(text, 200);
+	const editorRef = useRef(null);
 	useEffect(() => {
 		if (typeof props.value === "undefined") return;
-		setText(defaultValue);
+		setText(String(props.value ?? props.defaultValue ?? ""));
 	}, [props.value, props.defaultValue]);
-	useEffect(() => {
-		if (!isActive) return;
-		if (!isTyped) return;
-		if (debouncedText.length > 3) setSuggestion("");
-		else setSuggestion("");
-	}, [
-		debouncedText,
-		isActive,
-		autocomplete,
-		configuration
-	]);
-	useEffect(() => {
-		if (!suggestion || cursorAtFetch === -1 || !placeholderRef.current || !ghostLayerRef.current) {
-			setSuggestionPosition(null);
-			return;
-		}
-		const rect = placeholderRef.current.getBoundingClientRect();
-		const parentRect = ghostLayerRef.current.getBoundingClientRect();
-		setSuggestionPosition({
-			left: rect.left - parentRect.left,
-			top: rect.top - parentRect.top
-		});
-	}, [
-		suggestion,
-		cursorAtFetch,
-		text
-	]);
 	const acceptSuggestion = () => {
-		const currentCursor = textareaRef.current?.selectionStart ?? cursorAtFetch;
-		if (currentCursor !== cursorAtFetch) return;
-		setText(text.slice(0, currentCursor) + suggestion + text.slice(currentCursor));
+		const active = suggestionProp ?? suggestion;
+		if (!active) return;
+		const cursor = editorRef.current?.getCursorOffset() ?? text.length;
+		setText(text.slice(0, cursor) + active + text.slice(cursor));
 		setSuggestion("");
-		setCursorAtFetch(-1);
 		setTimeout(() => {
-			textareaRef.current?.focus();
-			const newCursorPos = currentCursor + suggestion.length;
-			textareaRef.current?.setSelectionRange(newCursorPos, newCursorPos);
+			editorRef.current?.focus();
+			editorRef.current?.setCursorAtOffset(cursor + active.length);
 		}, 0);
 	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: "relative w-full",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				ref: ghostLayerRef,
-				className: "pointer-events-none absolute inset-0 whitespace-pre-wrap break-words px-1 py-3 text-base leading-[1.45rem] md:py-1 md:text-sm md:leading-[1.23rem]",
-				"aria-hidden": "true",
-				children: [suggestion && cursorAtFetch !== -1 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-					/* @__PURE__ */ jsx("span", {
-						className: "align-text-top text-transparent",
-						children: text.slice(0, cursorAtFetch)
-					}),
-					/* @__PURE__ */ jsx("span", {
-						ref: placeholderRef,
-						style: { visibility: "hidden" },
-						"aria-hidden": "true",
-						children: suggestion
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "align-text-top text-transparent",
-						children: text.slice(cursorAtFetch)
-					})
-				] }) : /* @__PURE__ */ jsx("span", {
-					className: "align-text-top text-transparent",
-					children: text
-				}), suggestionProp && /* @__PURE__ */ jsx("span", {
-					className: "align-text-top text-neutral",
-					children: suggestionProp
-				})]
-			}),
-			suggestion && suggestionPosition && /* @__PURE__ */ jsx("div", {
-				className: "pointer-events-none whitespace-pre-wrap break-words text-base text-neutral leading-[1.45rem] md:text-sm md:leading-[1.23rem]",
-				style: {
-					position: "absolute",
-					left: suggestionPosition.left,
-					top: suggestionPosition.top
-				},
-				children: suggestion
-			}),
-			/* @__PURE__ */ jsx(AutoSizedTextArea, {
-				...props,
-				ref: textareaRef,
-				value: text,
-				onChange: (e) => {
-					setIsTyped(true);
-					setText(e.target.value);
-					setSuggestion("");
-					props.onChange?.(e);
-				},
-				onKeyDown: (e) => {
-					if (e.key === "Tab" && suggestion) {
-						e.preventDefault();
-						acceptSuggestion();
-					}
-					props.onKeyDown?.(e);
-				},
-				onSelect: (e) => {
-					if (suggestion && e.target.selectionStart !== cursorAtFetch) {
-						setSuggestion("");
-						setCursorAtFetch(-1);
-					}
-					props.onSelect?.(e);
-				}
-			})
-		]
+	const activeGhost = isActive ? suggestionProp ?? (suggestion || void 0) : void 0;
+	const textLines = text.split("\n");
+	return /* @__PURE__ */ jsx(ContentEditableTextArea, {
+		ref: editorRef,
+		value: text,
+		onChange: (val) => {
+			setText(val);
+			setSuggestion("");
+			if (props.onChange) {
+				const evt = {
+					target: { value: val },
+					currentTarget: { value: val }
+				};
+				props.onChange(evt);
+			}
+		},
+		onKeyDown: (e) => {
+			if (e.key === "Tab" && (suggestionProp ?? suggestion)) {
+				e.preventDefault();
+				acceptSuggestion();
+			}
+			props.onKeyDown?.(e);
+		},
+		ghostText: activeGhost,
+		ghostLine: suggestionProp ? textLines.length - 1 : void 0,
+		ghostOffset: suggestionProp ? textLines[textLines.length - 1]?.length ?? 0 : void 0,
+		placeholder: props.placeholder,
+		disabled: props.disabled,
+		autoSize: props.autoSize,
+		maxRows: props.maxRows,
+		minRows: props.rows,
+		variant: props.variant,
+		validationStyleEnabled: props.validationStyleEnabled,
+		className: props.className,
+		dir: props.dir,
+		"aria-label": props["aria-label"],
+		"aria-invalid": props["aria-invalid"],
+		"aria-describedby": props["aria-describedby"],
+		"data-testid": props["data-testid"]
 	});
 };
 
 //#endregion
-export { AutoCompleteTextarea, useDebounce };
+export { AutoCompleteTextarea };
 //# sourceMappingURL=AutocompleteTextArea.mjs.map

package/dist/esm/components/TextArea/AutocompleteTextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteTextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/AutocompleteTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { useAutocomplete } from '@hooks/reactQuery';\nimport type { AutocompleteResponse } from '@intlayer/backend';\nimport { useConfiguration } from '@intlayer/editor-react';\nimport { type FC, useEffect, useRef, useState } from 'react';\nimport {\n  AutoSizedTextArea,\n  type AutoSizedTextAreaProps,\n} from './AutoSizeTextArea';\n\n/**\n * Custom hook for debouncing values to prevent excessive API calls.\n *\n * Delays updating the returned value until the input value has stopped changing\n * for the specified delay period.\n *\n * @param value - The value to debounce\n * @param delay - Delay in milliseconds before updating the debounced value\n * @returns The debounced value that only updates after the delay period\n *\n * @example\n * ```tsx\n * const [searchTerm, setSearchTerm] = useState('');\n * const debouncedSearchTerm = useDebounce(searchTerm, 300);\n *\n * useEffect(() => {\n *   if (debouncedSearchTerm) {\n *     performSearch(debouncedSearchTerm);\n *   }\n * }, [debouncedSearchTerm]);\n * ```\n */\nexport const useDebounce = <T,>(value: T, delay: number): T => {\n  const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setDebouncedValue(value);\n    }, delay);\n\n    // Cleanup the timer if value changes before 'delay' ms\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n\n  return debouncedValue;\n};\n\n/**\n * Props for the AutocompleteTextArea component.\n *\n * Extends AutoSizedTextAreaProps with AI-powered autocomplete functionality.\n *\n * @example\n * ```tsx\n * // AI-powered autocomplete textarea\n * <AutoCompleteTextarea\n *   placeholder=\"Start typing for AI suggestions...\"\n *   isActive={true}\n *   autoSize={true}\n *   maxRows={10}\n * />\n *\n * // Manual suggestion mode\n * <AutoCompleteTextarea\n *   value={content}\n *   onChange={handleChange}\n *   suggestion=\"Consider adding more details about...\"\n *   isActive={false}\n * />\n *\n * // Disabled autocomplete for sensitive content\n * <AutoCompleteTextarea\n *   placeholder=\"Private notes (no AI assistance)\"\n *   isActive={false}\n *   autoSize={true}\n * />\n * ```\n */\nexport type AutocompleteTextAreaProps = AutoSizedTextAreaProps & {\n  /** Whether AI autocomplete is active and should fetch suggestions */\n  isActive?: boolean;\n  /** Manual suggestion text to display (overrides AI suggestions) */\n  suggestion?: string;\n};\n\n/**\n * AutoCompleteTextarea Component\n *\n * An intelligent textarea that provides AI-powered autocomplete suggestions as users type,\n * combining auto-sizing functionality with contextual text completion.\n *\n * ## Features\n * - **AI-Powered Suggestions**: Context-aware autocomplete using configured AI models\n * - **Debounced API Calls**: Efficient suggestion fetching with 200ms debounce\n * - **Visual Suggestions**: Inline preview of suggested completions\n * - **Keyboard Navigation**: Tab key to accept suggestions\n * - **Context Analysis**: Uses surrounding text for better suggestions\n * - **Auto-Sizing**: Inherits all AutoSizedTextArea capabilities\n * - **Performance Optimized**: Smart caching and minimal re-renders\n *\n * ## Technical Implementation\n * - **Debounce Strategy**: 200ms delay before fetching suggestions\n * - **Context Window**: 5 lines before/after cursor for context\n * - **Minimum Trigger**: Requires 3+ characters before suggesting\n * - **Position Tracking**: Ghost layer for accurate suggestion positioning\n * - **Cursor Management**: Tracks cursor position during suggestion fetch\n *\n * ## AI Integration\n * - Uses configured AI model (OpenAI, Anthropic, etc.)\n * - Sends context-aware prompts for relevant suggestions\n * - Respects temperature and model settings from configuration\n * - Handles API errors gracefully without interrupting user flow\n *\n * ## Use Cases\n * - **Content Creation**: Blog posts, articles, documentation\n * - **Code Comments**: Intelligent code documentation assistance\n * - **Email Composition**: Professional email writing assistance\n * - **Creative Writing**: Story and narrative completion\n * - **Technical Documentation**: API docs, README files\n * - **Social Media**: Post creation with engagement optimization\n *\n * @example\n * ```tsx\n * // Blog writing assistant\n * const [blogPost, setBlogPost] = useState('');\n * const [isAiEnabled, setIsAiEnabled] = useState(true);\n *\n * <div className=\"space-y-4\">\n *   <div className=\"flex items-center gap-2\">\n *     <Switch\n *       checked={isAiEnabled}\n *       onChange={setIsAiEnabled}\n *     />\n *     <label>AI Writing Assistant</label>\n *   </div>\n *\n *   <AutoCompleteTextarea\n *     value={blogPost}\n *     onChange={(e) => setBlogPost(e.target.value)}\n *     placeholder=\"Start writing your blog post...\"\n *     isActive={isAiEnabled}\n *     autoSize={true}\n *     maxRows={15}\n *     className=\"min-h-[200px] font-serif text-lg leading-relaxed\"\n *   />\n * </div>\n *\n * // Code documentation assistant\n * <AutoCompleteTextarea\n *   value={docComment}\n *   onChange={handleDocChange}\n *   placeholder=\"/** Describe this function... *\\/\"\n *   isActive={true}\n *   autoSize={true}\n *   maxRows={8}\n *   className=\"font-mono text-sm\"\n * />\n *\n * // Email composition with templates\n * <AutoCompleteTextarea\n *   defaultValue=\"Dear \"\n *   placeholder=\"AI will help complete your email...\"\n *   isActive={true}\n *   autoSize={true}\n *   maxRows={12}\n *   variant={InputVariant.DEFAULT}\n * />\n * ```\n *\n * ## Accessibility\n * - Ghost layer is properly hidden from screen readers\n * - Maintains focus management during suggestion acceptance\n * - Preserves keyboard navigation patterns\n * - Respects reduced motion preferences\n */\nexport const AutoCompleteTextarea: FC<AutocompleteTextAreaProps> = ({\n  isActive = true,\n  suggestion: suggestionProp,\n  ...props\n}) => {\n  const defaultValue = String(props.value ?? props.defaultValue ?? '');\n  const { mutate: autocomplete } = useAutocomplete();\n  const configuration = useConfiguration();\n  const [isTyped, setIsTyped] = useState(false);\n  const [text, setText] = useState(defaultValue);\n  const [suggestion, setSuggestion] = useState('');\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const placeholderRef = useRef<HTMLSpanElement>(null);\n  const ghostLayerRef = useRef<HTMLDivElement>(null);\n  const [suggestionPosition, setSuggestionPosition] = useState<{\n    left: number;\n    top: number;\n  } | null>(null);\n  const [cursorAtFetch, setCursorAtFetch] = useState(-1);\n\n  // Only update this “debouncedText” after the user stops typing for 200ms\n  const debouncedText = useDebounce(text, 200);\n\n  useEffect(() => {\n    if (typeof props.value === 'undefined') return;\n    setText(defaultValue);\n  }, [props.value, props.defaultValue]);\n\n  useEffect(() => {\n    if (!isActive) return;\n    if (!isTyped) return;\n\n    const fetchSuggestion = async () => {\n      try {\n        const cursor =\n          textareaRef.current?.selectionStart ?? debouncedText.length;\n        const before = debouncedText.slice(0, cursor);\n        const after = debouncedText.slice(cursor);\n        const numLines = 5;\n        const beforeLines = before.split('\\n');\n        const contextBeforeLines = beforeLines.slice(\n          Math.max(0, beforeLines.length - numLines - 1),\n          -1\n        );\n        const contextBefore = contextBeforeLines.join('\\n');\n        const currentLine = beforeLines[beforeLines.length - 1] ?? '';\n        const afterLines = after.split('\\n');\n        const contextAfter = afterLines.slice(1, numLines + 1).join('\\n');\n\n        autocomplete(\n          {\n            text: before,\n            contextBefore,\n            currentLine,\n            contextAfter,\n            aiOptions: {\n              apiKey: configuration.ai?.apiKey,\n              model: configuration.ai?.model,\n              temperature: configuration.ai?.temperature,\n            },\n          },\n          {\n            onSuccess: (data: AutocompleteResponse) => {\n              setSuggestion(data.data?.autocompletion ?? '');\n              setCursorAtFetch(cursor);\n            },\n          }\n        );\n      } catch (err) {\n        console.error('Autocomplete error:', err);\n      }\n    };\n\n    if (debouncedText.length > 3) {\n      // Only fetch if user typed more than 3 chars and has paused\n      setSuggestion('');\n      // TODO: Uncomment this when the autocomplete works well enough\n      // fetchSuggestion();\n    } else {\n      // If typed less than threshold, clear the suggestion\n      setSuggestion('');\n    }\n  }, [debouncedText, isActive, autocomplete, configuration]);\n\n  useEffect(() => {\n    if (\n      !suggestion ||\n      cursorAtFetch === -1 ||\n      !placeholderRef.current ||\n      !ghostLayerRef.current\n    ) {\n      setSuggestionPosition(null);\n      return;\n    }\n\n    const rect = placeholderRef.current.getBoundingClientRect();\n    const parentRect = ghostLayerRef.current.getBoundingClientRect();\n    setSuggestionPosition({\n      left: rect.left - parentRect.left,\n      top: rect.top - parentRect.top,\n    });\n  }, [suggestion, cursorAtFetch, text]);\n\n  const acceptSuggestion = () => {\n    const currentCursor = textareaRef.current?.selectionStart ?? cursorAtFetch;\n    if (currentCursor !== cursorAtFetch) return;\n    const newText =\n      text.slice(0, currentCursor) + suggestion + text.slice(currentCursor);\n    setText(newText);\n    setSuggestion('');\n    setCursorAtFetch(-1);\n    setTimeout(() => {\n      textareaRef.current?.focus();\n      const newCursorPos = currentCursor + suggestion.length;\n      textareaRef.current?.setSelectionRange(newCursorPos, newCursorPos);\n    }, 0);\n  };\n\n  return (\n    <div className=\"relative w-full\">\n      <div\n        ref={ghostLayerRef}\n        className=\"pointer-events-none absolute inset-0 whitespace-pre-wrap break-words px-1 py-3 text-base leading-[1.45rem] md:py-1 md:text-sm md:leading-[1.23rem]\"\n        aria-hidden=\"true\"\n      >\n        {suggestion && cursorAtFetch !== -1 ? (\n          <>\n            <span className=\"align-text-top text-transparent\">\n              {text.slice(0, cursorAtFetch)}\n            </span>\n            <span\n              ref={placeholderRef}\n              style={{ visibility: 'hidden' }}\n              aria-hidden=\"true\"\n            >\n              {suggestion}\n            </span>\n            <span className=\"align-text-top text-transparent\">\n              {text.slice(cursorAtFetch)}\n            </span>\n          </>\n        ) : (\n          <span className=\"align-text-top text-transparent\">{text}</span>\n        )}\n        {suggestionProp && (\n          <span className=\"align-text-top text-neutral\">{suggestionProp}</span>\n        )}\n      </div>\n      {suggestion && suggestionPosition && (\n        <div\n          className=\"pointer-events-none whitespace-pre-wrap break-words text-base text-neutral leading-[1.45rem] md:text-sm md:leading-[1.23rem]\"\n          style={{\n            position: 'absolute',\n            left: suggestionPosition.left,\n            top: suggestionPosition.top,\n          }}\n        >\n          {suggestion}\n        </div>\n      )}\n      <AutoSizedTextArea\n        {...props}\n        ref={textareaRef}\n        value={text}\n        onChange={(e) => {\n          setIsTyped(true);\n          setText(e.target.value);\n          setSuggestion('');\n          props.onChange?.(e);\n        }}\n        onKeyDown={(e) => {\n          if (e.key === 'Tab' && suggestion) {\n            e.preventDefault();\n            acceptSuggestion();\n          }\n          props.onKeyDown?.(e);\n        }}\n        onSelect={(e) => {\n          if (\n            suggestion &&\n            (e.target as HTMLTextAreaElement).selectionStart !== cursorAtFetch\n          ) {\n            setSuggestion('');\n            setCursorAtFetch(-1);\n          }\n          props.onSelect?.(e);\n        }}\n      />\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"AutocompleteTextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/AutocompleteTextArea.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ChangeEvent,\n  type FC,\n  type KeyboardEvent,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport type { AutoSizedTextAreaProps } from './AutoSizeTextArea';\nimport {\n  ContentEditableTextArea,\n  type ContentEditableTextAreaHandle,\n} from './ContentEditableTextArea';\n\n/**\n * Props for the AutocompleteTextArea component.\n *\n * Extends AutoSizedTextAreaProps with inline autocomplete functionality\n * using a contentEditable-based textarea.\n *\n * @example\n * ```tsx\n * <AutoCompleteTextarea\n *   placeholder=\"Start typing...\"\n *   isActive={true}\n *   autoSize={true}\n *   maxRows={10}\n * />\n * ```\n */\nexport type AutocompleteTextAreaProps = AutoSizedTextAreaProps & {\n  /** Whether inline autocomplete ghost text is active */\n  isActive?: boolean;\n  /** Manual suggestion text to display as ghost text after the cursor */\n  suggestion?: string;\n};\n\n/**\n * AutoCompleteTextarea Component\n *\n * A textarea with inline autocomplete ghost text, built on a contentEditable div\n * instead of a native `<textarea>`. Ghost text (suggestions) is rendered inline\n * at the cursor position and can be accepted with the Tab key.\n *\n * The component wraps `ContentEditableTextArea` and manages suggestion state.\n * When `suggestion` prop is provided it is shown as ghost text at the end of the\n * current text. When `isActive` is false, ghost text is hidden.\n *\n * @example\n * ```tsx\n * <AutoCompleteTextarea\n *   value={content}\n *   onChange={handleChange}\n *   suggestion=\"suggested completion...\"\n *   isActive={true}\n *   autoSize={true}\n * />\n * ```\n */\nexport const AutoCompleteTextarea: FC<AutocompleteTextAreaProps> = ({\n  isActive = true,\n  suggestion: suggestionProp,\n  ...props\n}) => {\n  const defaultValue = String(props.value ?? props.defaultValue ?? '');\n  const [text, setText] = useState(defaultValue);\n  const [suggestion, setSuggestion] = useState('');\n  const editorRef = useRef<ContentEditableTextAreaHandle>(null);\n\n  useEffect(() => {\n    if (typeof props.value === 'undefined') return;\n    setText(String(props.value ?? props.defaultValue ?? ''));\n  }, [props.value, props.defaultValue]);\n\n  const acceptSuggestion = () => {\n    const active = suggestionProp ?? suggestion;\n    if (!active) return;\n\n    const cursor = editorRef.current?.getCursorOffset() ?? text.length;\n    const next = text.slice(0, cursor) + active + text.slice(cursor);\n    setText(next);\n    setSuggestion('');\n\n    setTimeout(() => {\n      editorRef.current?.focus();\n      editorRef.current?.setCursorAtOffset(cursor + active.length);\n    }, 0);\n  };\n\n  const activeGhost = isActive\n    ? (suggestionProp ?? (suggestion || undefined))\n    : undefined;\n  const textLines = text.split('\\n');\n  const activeLine = suggestionProp ? textLines.length - 1 : undefined;\n  const activeOffset = suggestionProp\n    ? (textLines[textLines.length - 1]?.length ?? 0)\n    : undefined;\n\n  return (\n    <ContentEditableTextArea\n      ref={editorRef}\n      value={text}\n      onChange={(val) => {\n        setText(val);\n        setSuggestion('');\n\n        if (props.onChange) {\n          const evt = {\n            target: { value: val },\n            currentTarget: { value: val },\n          } as ChangeEvent<HTMLTextAreaElement>;\n          props.onChange(evt);\n        }\n      }}\n      onKeyDown={(e) => {\n        if (e.key === 'Tab' && (suggestionProp ?? suggestion)) {\n          e.preventDefault();\n          acceptSuggestion();\n        }\n        props.onKeyDown?.(e as unknown as KeyboardEvent<HTMLTextAreaElement>);\n      }}\n      ghostText={activeGhost}\n      ghostLine={activeLine}\n      ghostOffset={activeOffset}\n      placeholder={props.placeholder}\n      disabled={props.disabled}\n      autoSize={props.autoSize}\n      maxRows={props.maxRows}\n      minRows={props.rows}\n      variant={props.variant}\n      validationStyleEnabled={props.validationStyleEnabled}\n      className={props.className}\n      dir={props.dir as 'ltr' | 'rtl' | 'auto'}\n      aria-label={props['aria-label']}\n      aria-invalid={props['aria-invalid']}\n      aria-describedby={props['aria-describedby']}\n      data-testid={(props as Record<string, unknown>)['data-testid'] as string}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,MAAa,wBAAuD,EAClE,WAAW,MACX,YAAY,gBACZ,GAAG,YACC;CAEJ,MAAM,CAAC,MAAM,WAAW,SADH,OAAO,MAAM,SAAS,MAAM,gBAAgB,GAAG,CACtB;CAC9C,MAAM,CAAC,YAAY,iBAAiB,SAAS,GAAG;CAChD,MAAM,YAAY,OAAsC,KAAK;AAE7D,iBAAgB;AACd,MAAI,OAAO,MAAM,UAAU,YAAa;AACxC,UAAQ,OAAO,MAAM,SAAS,MAAM,gBAAgB,GAAG,CAAC;IACvD,CAAC,MAAM,OAAO,MAAM,aAAa,CAAC;CAErC,MAAM,yBAAyB;EAC7B,MAAM,SAAS,kBAAkB;AACjC,MAAI,CAAC,OAAQ;EAEb,MAAM,SAAS,UAAU,SAAS,iBAAiB,IAAI,KAAK;AAE5D,UADa,KAAK,MAAM,GAAG,OAAO,GAAG,SAAS,KAAK,MAAM,OAAO,CACnD;AACb,gBAAc,GAAG;AAEjB,mBAAiB;AACf,aAAU,SAAS,OAAO;AAC1B,aAAU,SAAS,kBAAkB,SAAS,OAAO,OAAO;KAC3D,EAAE;;CAGP,MAAM,cAAc,WACf,mBAAmB,cAAc,UAClC;CACJ,MAAM,YAAY,KAAK,MAAM,KAAK;AAMlC,QACE,oBAAC,yBAAD;EACE,KAAK;EACL,OAAO;EACP,WAAW,QAAQ;AACjB,WAAQ,IAAI;AACZ,iBAAc,GAAG;AAEjB,OAAI,MAAM,UAAU;IAClB,MAAM,MAAM;KACV,QAAQ,EAAE,OAAO,KAAK;KACtB,eAAe,EAAE,OAAO,KAAK;KAC9B;AACD,UAAM,SAAS,IAAI;;;EAGvB,YAAY,MAAM;AAChB,OAAI,EAAE,QAAQ,UAAU,kBAAkB,aAAa;AACrD,MAAE,gBAAgB;AAClB,sBAAkB;;AAEpB,SAAM,YAAY,EAAmD;;EAEvE,WAAW;EACX,WA7Be,iBAAiB,UAAU,SAAS,IAAI;EA8BvD,aA7BiB,iBAChB,UAAU,UAAU,SAAS,IAAI,UAAU,IAC5C;EA4BA,aAAa,MAAM;EACnB,UAAU,MAAM;EAChB,UAAU,MAAM;EAChB,SAAS,MAAM;EACf,SAAS,MAAM;EACf,SAAS,MAAM;EACf,wBAAwB,MAAM;EAC9B,WAAW,MAAM;EACjB,KAAK,MAAM;EACX,cAAY,MAAM;EAClB,gBAAc,MAAM;EACpB,oBAAkB,MAAM;EACxB,eAAc,MAAkC;EAChD"}