@workerdeck/ui 0.23.0 → 1.1.0

package/src/components/prompt-area/use-prompt-area.ts

@@ -1,36 +1,20 @@
 'use client'
 
 import { cn } from '../../lib/utils.ts'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import type {
-  Segment,
-  TriggerConfig,
-  ActiveTrigger,
-  TriggerSuggestion,
-  ChipSegment,
-  PromptAreaHandle,
-} from './types.ts'
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import type { Segment, TriggerConfig, ActiveTrigger, TriggerSuggestion, ChipSegment, PromptAreaHandle } from './types.ts'
 import {
   detectActiveTrigger,
-  isValidTriggerPosition,
   segmentsToPlainText,
   plainTextToSegments,
+  segmentsContentEqual,
   segmentsEqual,
   resolveChip,
   resolveText,
-  removeChipAtIndex,
-  revertChipAtIndex,
-  replaceTextRange,
-  toggleMarkdownWrap,
   truncateSegmentsToLength,
 } from './prompt-area-engine.ts'
 import {
-  getListContext,
   autoFormatListPrefix,
-  insertListContinuation,
-  indentListItem,
-  outdentListItem,
-  removeListPrefix,
   normalizeListPrefixes,
   renumberOrderedListSegments,
   remapOffset,
@@ -39,34 +23,18 @@ import {
 import {
   isHTMLElement,
   isChipElement,
-  isLinkElement,
   isBRElement,
   chipNodeToSegment,
-  getChipAutoResolved,
-  getDirectChildContaining,
-  indexOfChildNode,
-  domChildIndexToSegmentIndex,
   normalizeEditorDOM,
   decorateEditor,
   safeJsonStringify,
-  getSelectionRange,
 } from './dom-helpers.ts'
-import {
-  saveCursorPosition,
-  restoreCursorPosition,
-  getCursorOffset,
-  setCursorAtOffset,
-  createRangeAtOffset,
-  getSelectionOffsets,
-  setSelectionAtOffsets,
-} from './cursor-helpers.ts'
+import { getCursorOffset, setCursorAtOffset, createRangeAtOffset, getSelectionOffsets, setSelectionAtOffsets } from './cursor-helpers.ts'
 import { usePromptAreaEvents } from './use-prompt-area-events.ts'
+import { usePromptAreaKeydown } from './use-prompt-area-keydown.ts'
+import { useChipEditing } from './use-chip-editing.ts'
 import { useTriggerSearch } from './use-trigger-search.ts'
 
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
 type UsePromptAreaOptions = {
   value: Segment[]
   onChange: (segments: Segment[]) => void
@@ -119,14 +87,15 @@ type UsePromptAreaReturn = {
 /** Debounce interval for grouping typed characters into a single undo snapshot */
 const UNDO_DEBOUNCE_MS = 300
 
-// ---------------------------------------------------------------------------
-// Hook
-// ---------------------------------------------------------------------------
+// Shared default so an omitted `triggers` prop keeps a stable identity across
+// renders — a fresh [] would re-create renderSegmentsToDOM (and everything
+// keyed on it) on every parent render.
+const NO_TRIGGERS: TriggerConfig[] = []
 
 export function usePromptArea({
   value,
   onChange,
-  triggers = [],
+  triggers = NO_TRIGGERS,
   disabled = false,
   onSubmit,
   onEscape,
@@ -149,46 +118,7 @@ export function usePromptArea({
   const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(0)
   const [triggerRect, setTriggerRect] = useState<DOMRect | null>(null)
 
-  // Chip whose dropdown was reopened via `reopenOnChipClick`. While set, the
-  // active dropdown edits this chip in place instead of resolving typed text.
-  // Cleared on dismiss and by any fresh trigger detection (typing).
-  //
-  // `segIndex` is the segment index at CLICK time (computed from the live DOM,
-  // so it's always accurate then) — deliberately not the DOM node itself,
-  // which can detach if `renderSegmentsToDOM` re-renders while the dropdown is
-  // open (external value update, undo/redo). At selection time we re-verify
-  // this index still holds the same chip and fall back to a trigger+value
-  // search if the model shifted underneath, instead of silently no-op'ing.
-  const editingChip = useRef<{ chip: ChipSegment; segIndex: number } | null>(null)
-
-  // The DOM node of the chip currently being edited via `reopenOnChipClick`,
-  // kept in lockstep with `editingChip`/`activeTrigger` (set when opened,
-  // cleared by `dismissTrigger`). Used only to answer "is THIS exact chip
-  // element the one whose dropdown is open right now" by reference identity —
-  // never by trigger+value, which can't distinguish two chips that happen to
-  // share the same value.
-  const openChipNode = useRef<HTMLElement | null>(null)
-
-  // Set by `handleMouseDown` to the chip node a mousedown landed on, but only
-  // when that node === `openChipNode.current` at that instant; read and
-  // cleared by the following `handleClick` to distinguish "reopen" from
-  // "toggle closed" for that one click. A real `onMouseDown` (bubble-phase,
-  // attached to the editor root) is used instead of piggybacking on
-  // `dismissTrigger` because DOM bubbling reaches the editor root before it
-  // reaches `document` (where TriggerPopover's outside-click dismiss listens),
-  // so this always observes `openChipNode` before that dismiss clears it —
-  // and unlike a `dismissTrigger`-driven flag, it is scoped to mousedowns on
-  // this exact node, so Escape/blur/an unrelated dismiss can never poison a
-  // later, unrelated click on the same chip.
-  const suppressReopenChip = useRef<HTMLElement | null>(null)
-
-  const {
-    suggestions,
-    suggestionsLoading,
-    suggestionsError,
-    search: runSearch,
-    reset: resetSearch,
-  } = useTriggerSearch()
+  const { suggestions, suggestionsLoading, suggestionsError, search: runSearch, reset: resetSearch } = useTriggerSearch()
 
   // Guard against circular DOM <-> model syncs
   const isSyncing = useRef(false)
@@ -198,13 +128,13 @@ export function usePromptArea({
   const undoTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
   const undoBaseState = useRef<Segment[] | null>(null)
 
-  // -----------------------------------------------------------------------
   // DOM -> Model: read segments from the contentEditable DOM
-  // -----------------------------------------------------------------------
 
   const readSegmentsFromDOM = useCallback((): Segment[] => {
     const editor = editorRef.current
-    if (!editor) return []
+    if (!editor) {
+      return []
+    }
 
     const segments: Segment[] = []
     // Track whether the editor holds any real content (text/chip) or a sentinel
@@ -235,7 +165,6 @@ export function usePromptArea({
         }
         segments.push({ type: 'text', text: '\n' })
       } else if (isHTMLElement(node)) {
-        // Unknown element — extract text content
         const text = node.textContent ?? ''
         if (text) {
           segments.push({ type: 'text', text })
@@ -244,30 +173,33 @@ export function usePromptArea({
       }
     }
 
-    // When the user empties the editor (types something, then deletes it all),
-    // the browser leaves a lone filler <br> so the contentEditable block stays
-    // visible and focusable. Reading that <br> as a "\n" text segment would make
-    // `value` permanently non-empty and keep the placeholder hidden forever.
-    // A newline we actually rendered always carries surrounding text/chip
-    // content or a trailing sentinel <br>, so when neither is present the only
-    // <br> nodes are filler and the editor is genuinely empty.
-    if (!hasRealContent && !hasSentinel) return []
+    // An emptied editor keeps a lone browser filler <br>; reading it as "\n" would
+    // make `value` permanently non-empty and hide the placeholder forever. A newline
+    // we rendered always carries surrounding content or a trailing sentinel <br>, so
+    // with neither present every <br> is filler and the editor is genuinely empty.
+    if (!hasRealContent && !hasSentinel) {
+      return []
+    }
 
     return segments
   }, [])
 
-  // -----------------------------------------------------------------------
   // Model -> DOM: render segments into the contentEditable div
-  // -----------------------------------------------------------------------
 
   const renderSegmentsToDOM = useCallback(
     (segments: Segment[]) => {
       const editor = editorRef.current
-      if (!editor) return
+      if (!editor) {
+        return
+      }
 
       isSyncing.current = true
 
-      const savedCursor = saveCursorPosition(editor)
+      // Save the caret as a plain-text offset, not a {nodeIndex, offset} pair:
+      // the rebuild plus decorateEditor re-chunk the child nodes, so a node
+      // index recorded against the old tree lands in the wrong node and its
+      // clamped offset silently moves the caret.
+      const savedCursorOffset = getCursorOffset(editor)
 
       // Clear DOM safely (no innerHTML assignment)
       while (editor.firstChild) {
@@ -286,7 +218,6 @@ export function usePromptArea({
             }
           }
         } else {
-          // Render chip as non-editable span
           const chip = document.createElement('span')
           chip.contentEditable = 'false'
           chip.dataset.chipTrigger = seg.trigger
@@ -304,11 +235,7 @@ export function usePromptArea({
           const triggerConfig = triggers.find((t) => t.char === seg.trigger)
           const chipStyle = triggerConfig?.chipStyle ?? 'pill'
           chip.dataset.chipStyle = chipStyle
-          chip.className = cn(
-            'prompt-area-chip',
-            chipStyle === 'inline' && 'prompt-area-chip--inline',
-            triggerConfig?.chipClassName,
-          )
+          chip.className = cn('prompt-area-chip', chipStyle === 'inline' && 'prompt-area-chip--inline', triggerConfig?.chipClassName)
           chip.textContent = `${seg.trigger}${seg.displayText}`
           chip.setAttribute('role', 'button')
           chip.setAttribute('tabindex', '-1')
@@ -326,8 +253,8 @@ export function usePromptArea({
       // Decorate URLs, markdown formatting, and list bullets in text nodes
       decorateEditor(editor, markdownEnabled)
 
-      if (savedCursor) {
-        restoreCursorPosition(editor, savedCursor)
+      if (savedCursorOffset !== null) {
+        setCursorAtOffset(editor, savedCursorOffset)
       }
 
       lastRenderedValue.current = segments
@@ -336,9 +263,27 @@ export function usePromptArea({
     [triggers, markdownEnabled],
   )
 
-  // -----------------------------------------------------------------------
+  // The chip-click editing path (`reopenOnChipClick`) lives in use-chip-editing.ts.
+
+  const chipEditing = useChipEditing({
+    editorRef,
+    triggers,
+    disabled,
+    onChange,
+    renderSegmentsToDOM,
+    onChipClick,
+    onChipAdd,
+    onChipDelete,
+    onLinkClick,
+    setActiveTrigger,
+    setSelectedSuggestionIndex,
+    setTriggerRect,
+    runSearch,
+    activeTrigger,
+    suggestions,
+  })
+
   // Trigger detection (extracted so events module can call it)
-  // -----------------------------------------------------------------------
 
   // Builds the insertChip handed to callback/launch activations: replaces the
   // trigger's range with a chip and notifies onChipAdd.
@@ -359,27 +304,32 @@ export function usePromptArea({
         ...(chip.data !== undefined ? { data: chip.data } : {}),
       })
       const editor = editorRef.current
-      if (editor) setCursorAtOffset(editor, chipResult.cursorOffset)
+      if (editor) {
+        setCursorAtOffset(editor, chipResult.cursorOffset)
+      }
     },
     [onChange, renderSegmentsToDOM, onChipAdd],
   )
 
   const runTriggerDetection = useCallback(() => {
     const editor = editorRef.current
-    if (!editor) return
+    if (!editor) {
+      return
+    }
 
     const segments = readSegmentsFromDOM()
     const plainText = segmentsToPlainText(segments)
     const cursorPos = getCursorOffset(editor)
 
-    if (cursorPos === null) return
+    if (cursorPos === null) {
+      return
+    }
 
     const detected = detectActiveTrigger(plainText, cursorPos, triggers)
 
     // Typing supersedes a chip-click dropdown: whichever branch we take next,
     // the popover no longer edits the clicked chip.
-    editingChip.current = null
-    openChipNode.current = null
+    chipEditing.clear()
 
     if (detected) {
       setActiveTrigger(detected)
@@ -398,12 +348,10 @@ export function usePromptArea({
         }
       }
 
-      // Fetch suggestions for dropdown mode
       if (detected.config.mode === 'dropdown' && detected.config.onSearch) {
         runSearch(detected.query, detected.config)
       }
 
-      // Fire callback for callback mode
       if (detected.config.mode === 'callback' && detected.config.onActivate) {
         detected.config.onActivate({
           text: plainText,
@@ -415,23 +363,18 @@ export function usePromptArea({
       setActiveTrigger(null)
       resetSearch()
     }
-  }, [triggers, readSegmentsFromDOM, buildInsertChip, resetSearch, runSearch])
+  }, [triggers, readSegmentsFromDOM, buildInsertChip, resetSearch, runSearch, chipEditing])
 
-  // -----------------------------------------------------------------------
   // Dismiss trigger
-  // -----------------------------------------------------------------------
 
   const dismissTrigger = useCallback(() => {
-    editingChip.current = null
-    openChipNode.current = null
+    chipEditing.clear()
     setActiveTrigger(null)
     setSelectedSuggestionIndex(0)
     resetSearch()
-  }, [resetSearch])
+  }, [resetSearch, chipEditing])
 
-  // -----------------------------------------------------------------------
   // Wire up edge-case event handlers
-  // -----------------------------------------------------------------------
 
   const events = usePromptAreaEvents({
     editorRef,
@@ -451,13 +394,23 @@ export function usePromptArea({
     onImagePaste,
   })
 
-  // -----------------------------------------------------------------------
   // Sync value prop -> DOM on external changes
-  // -----------------------------------------------------------------------
 
-  useEffect(() => {
-    if (isSyncing.current) return
-    if (segmentsEqual(value, lastRenderedValue.current)) return
+  // Layout effect, not passive: a passive copy of this effect can still be
+  // queued when the next keystroke's input event arrives, and React flushes
+  // pending passive effects before rendering that keystroke's onChange. The
+  // stale flush would compare an older render's `value` against the
+  // lastRenderedValue that handleInput just advanced, read its own echo lag as
+  // an external change, and rewrite the editor to pre-keystroke content —
+  // leaving the caret behind the character once the echo re-rendered it.
+  // Inside the commit, `value` can never be older than lastRenderedValue.
+  useLayoutEffect(() => {
+    if (isSyncing.current) {
+      return
+    }
+    if (segmentsEqual(value, lastRenderedValue.current)) {
+      return
+    }
 
     // Normalize list prefixes (e.g., "- " → "• " when markdown is on)
     // so externally-provided segments render bullet characters correctly.
@@ -469,14 +422,27 @@ export function usePromptArea({
       }
     }
 
+    // A rebuild churns the caret and the decorations, so skip it when the
+    // editor already shows exactly this content — e.g. a consumer echoed our
+    // onChange back re-chunked, or the DOM is split by decorations. Adopt the
+    // value so the equality guard above short-circuits from here on.
+    if (segmentsContentEqual(readSegmentsFromDOM(), value)) {
+      lastRenderedValue.current = value
+      return
+    }
+
     renderSegmentsToDOM(value)
-  }, [value, renderSegmentsToDOM, markdownEnabled, normalizeBullets, onChange])
+  }, [value, readSegmentsFromDOM, renderSegmentsToDOM, markdownEnabled, normalizeBullets, onChange])
 
   // Re-render when markdown mode changes to apply/strip decorations
   // Also convert bullet characters: • ↔ - in text segments
+  // Layout for the same reason as the value sync above: a queued passive copy
+  // could flush mid-typing and render a stale `value`.
   const prevMarkdown = useRef(markdownEnabled)
-  useEffect(() => {
-    if (prevMarkdown.current === markdownEnabled) return
+  useLayoutEffect(() => {
+    if (prevMarkdown.current === markdownEnabled) {
+      return
+    }
     prevMarkdown.current = markdownEnabled
 
     const converted = normalizeBullets ? normalizeListPrefixes(value, markdownEnabled) : value
@@ -490,16 +456,18 @@ export function usePromptArea({
   // Clean up undo debounce timer on unmount
   useEffect(() => {
     return () => {
-      if (undoTimer.current) clearTimeout(undoTimer.current)
+      if (undoTimer.current) {
+        clearTimeout(undoTimer.current)
+      }
     }
   }, [])
 
-  // -----------------------------------------------------------------------
   // Handle input events
-  // -----------------------------------------------------------------------
 
   const handleInput = useCallback(() => {
-    if (isSyncing.current) return
+    if (isSyncing.current) {
+      return
+    }
 
     // During IME composition, sync model but skip trigger detection
     if (events.isComposing.current) {
@@ -556,11 +524,7 @@ export function usePromptArea({
     // numeric prose ("1985. Born / 2020. Died") untouched.
     let nextSegments = segments
     let renumberedCursor: number | null = null
-    if (
-      markdownEnabled &&
-      savedCursorOffset !== null &&
-      hasOrderedListRun(segmentsToPlainText(segments))
-    ) {
+    if (markdownEnabled && savedCursorOffset !== null && hasOrderedListRun(segmentsToPlainText(segments))) {
       const renumbered = renumberOrderedListSegments(segments)
       if (renumbered.edits.length > 0) {
         nextSegments = renumbered.segments
@@ -576,7 +540,9 @@ export function usePromptArea({
 
     lastRenderedValue.current = nextSegments
     onChange(nextSegments)
-    if (undoTimer.current) clearTimeout(undoTimer.current)
+    if (undoTimer.current) {
+      clearTimeout(undoTimer.current)
+    }
     undoTimer.current = setTimeout(() => {
       if (undoBaseState.current) {
         events.pushUndo(undoBaseState.current)
@@ -601,333 +567,13 @@ export function usePromptArea({
     }
 
     runTriggerDetection()
-  }, [
-    onChange,
-    readSegmentsFromDOM,
-    runTriggerDetection,
-    renderSegmentsToDOM,
-    markdownEnabled,
-    normalizeBullets,
-    maxLength,
-    events,
-  ])
-
-  // -----------------------------------------------------------------------
-  // Chip click delegation
-  // -----------------------------------------------------------------------
-
-  const handleClick = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      const target = e.target
-      if (!(target instanceof Node)) return
-
-      const editor = editorRef.current
-      if (!editor) return
-
-      // Walk from the click target up to find a link or chip element
-      let node: Node | null = target
-      while (node && node !== editor) {
-        // Check for URL link click — only navigate on Cmd/Ctrl+Click;
-        // plain click just positions the cursor for editing.
-        if (isLinkElement(node)) {
-          if (e.metaKey || e.ctrlKey) {
-            e.preventDefault()
-            onLinkClick?.(node.href)
-            window.open(node.href, '_blank', 'noopener,noreferrer')
-            return
-          }
-          // Plain click: let the browser place the cursor inside the link text
-          break
-        }
-
-        if (isChipElement(node)) {
-          // Spawn ripple effect. `isChipElement` has already narrowed `node`
-          // to HTMLElement, so no cast is needed.
-          const rect = node.getBoundingClientRect()
-          const ripple = document.createElement('span')
-          ripple.className = 'prompt-area-chip-ripple'
-          const size = Math.max(rect.width, rect.height)
-          ripple.style.width = `${size}px`
-          ripple.style.height = `${size}px`
-          ripple.style.left = `${e.clientX - rect.left - size / 2}px`
-          ripple.style.top = `${e.clientY - rect.top - size / 2}px`
-          node.appendChild(ripple)
-          ripple.addEventListener('animationend', () => ripple.remove())
-
-          const chip = chipNodeToSegment(node)
-          if (chip) {
-            // Native chip-click dropdown: reopen this trigger's suggestions
-            // anchored to the chip so the selection can replace it in place.
-            // Gated on `!disabled` — a disabled composer must not accept edits
-            // through any path, including this one.
-            const config = triggers.find((t) => t.char === chip.trigger)
-            // A click on THIS exact chip element while its own dropdown was
-            // open just closed it (see `suppressReopenChip` and
-            // `handleMouseDown`) — treat that as a toggle-close, not a reopen.
-            const wasOpenForThisChip = suppressReopenChip.current === node
-            suppressReopenChip.current = null
-            if (
-              !disabled &&
-              !wasOpenForThisChip &&
-              config?.reopenOnChipClick &&
-              config.mode === 'dropdown' &&
-              config.onSearch
-            ) {
-              const childIdx = indexOfChildNode(editor, node)
-              editingChip.current = {
-                chip,
-                segIndex: domChildIndexToSegmentIndex(editor, childIdx),
-              }
-              openChipNode.current = node
-              setActiveTrigger({ config, startOffset: 0, query: '' })
-              setSelectedSuggestionIndex(0)
-              setTriggerRect(rect)
-              runSearch('', config)
-            }
-            onChipClick?.(chip)
-          }
-          return
-        }
-        node = node.parentNode
-      }
-    },
-    [onChipClick, onLinkClick, triggers, runSearch, disabled],
-  )
-
-  // -----------------------------------------------------------------------
-  // Chip mousedown delegation — feeds `suppressReopenChip` for handleClick's
-  // toggle-close detection. See `openChipNode`/`suppressReopenChip` above for
-  // why this needs to be a real mousedown listener rather than piggybacking
-  // on `dismissTrigger`.
-  // -----------------------------------------------------------------------
-
-  const handleMouseDown = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
-    const target = e.target
-    const editor = editorRef.current
-    if (!editor || !(target instanceof Node)) {
-      suppressReopenChip.current = null
-      return
-    }
-
-    let node: Node | null = target
-    while (node && node !== editor) {
-      if (isChipElement(node)) {
-        suppressReopenChip.current = openChipNode.current === node ? node : null
-        return
-      }
-      node = node.parentNode
-    }
-    suppressReopenChip.current = null
-  }, [])
-
-  // -----------------------------------------------------------------------
-  // Remove a chip node from DOM and sync model
-  // -----------------------------------------------------------------------
-
-  const removeChipNodeFromDOM = useCallback(
-    (editor: HTMLElement, chipNode: HTMLElement): boolean => {
-      const segments = readSegmentsFromDOM()
-      const chipIdx = indexOfChildNode(editor, chipNode)
-      if (chipIdx === -1) return false
-
-      const segIdx = domChildIndexToSegmentIndex(editor, chipIdx)
-      const deletedChip = segments[segIdx]
-      const newSegments = removeChipAtIndex(segments, segIdx)
-      onChange(newSegments)
-      renderSegmentsToDOM(newSegments)
-
-      if (deletedChip?.type === 'chip') {
-        onChipDelete?.(deletedChip)
-      }
-
-      return true
-    },
-    [readSegmentsFromDOM, onChange, renderSegmentsToDOM, onChipDelete],
-  )
-
-  // -----------------------------------------------------------------------
-  // Revert an auto-resolved chip back to plain text
-  // -----------------------------------------------------------------------
-
-  const revertChipNodeToText = useCallback(
-    (editor: HTMLElement, chipNode: HTMLElement): boolean => {
-      const segments = readSegmentsFromDOM()
-      const chipIdx = indexOfChildNode(editor, chipNode)
-      if (chipIdx === -1) return false
-
-      const segIdx = domChildIndexToSegmentIndex(editor, chipIdx)
-      const revertedChip = segments[segIdx]
-      const result = revertChipAtIndex(segments, segIdx)
-      if (!result) return false
-
-      // Compute cursor target: plain text offset at end of reverted text
-      let targetOffset = 0
-      for (let i = 0; i < segIdx; i++) {
-        const s = segments[i]
-        if (s.type === 'text') {
-          targetOffset += s.text.length
-        } else {
-          targetOffset += s.trigger.length + s.displayText.length
-        }
-      }
-      targetOffset += result.revertedText.length
-
-      onChange(result.segments)
-      renderSegmentsToDOM(result.segments)
-      setCursorAtOffset(editor, targetOffset)
-
-      if (revertedChip?.type === 'chip') {
-        onChipDelete?.(revertedChip)
-      }
-
-      return true
-    },
-    [readSegmentsFromDOM, onChange, renderSegmentsToDOM, onChipDelete],
-  )
-
-  // -----------------------------------------------------------------------
-  // Chip backspace (delete chip behind cursor as whole unit)
-  // -----------------------------------------------------------------------
-
-  const handleChipBackspace = useCallback((): boolean => {
-    const editor = editorRef.current
-    if (!editor) return false
-
-    const range = getSelectionRange()
-    if (!range || !range.collapsed) return false
-
-    const node = range.startContainer
-    const offset = range.startOffset
-
-    // Case 1: cursor is at the editor level (between child nodes)
-    if (node === editor && offset > 0) {
-      const prevChild = editor.childNodes[offset - 1]
-      if (prevChild && isChipElement(prevChild)) {
-        if (getChipAutoResolved(prevChild)) {
-          return revertChipNodeToText(editor, prevChild)
-        }
-        return removeChipNodeFromDOM(editor, prevChild)
-      }
-    }
-
-    // Case 2: cursor is at start of a text node, check previous sibling
-    if (node.nodeType === Node.TEXT_NODE && offset === 0) {
-      const directChild = getDirectChildContaining(editor, node)
-      if (!directChild) return false
-
-      let prevSibling = directChild.previousSibling
-      while (
-        prevSibling &&
-        prevSibling.nodeType === Node.TEXT_NODE &&
-        prevSibling.textContent === ''
-      ) {
-        prevSibling = prevSibling.previousSibling
-      }
-      if (prevSibling && isChipElement(prevSibling)) {
-        if (getChipAutoResolved(prevSibling)) {
-          return revertChipNodeToText(editor, prevSibling)
-        }
-        return removeChipNodeFromDOM(editor, prevSibling)
-      }
-    }
-
-    return false
-  }, [removeChipNodeFromDOM, revertChipNodeToText])
-
-  // -----------------------------------------------------------------------
-  // Chip forward delete (delete chip in front of cursor)
-  // -----------------------------------------------------------------------
-
-  const handleChipForwardDelete = useCallback((): boolean => {
-    const editor = editorRef.current
-    if (!editor) return false
-
-    const range = getSelectionRange()
-    if (!range || !range.collapsed) return false
-
-    const node = range.startContainer
-    const offset = range.startOffset
-
-    // Case 1: cursor at the editor level
-    if (node === editor && offset < editor.childNodes.length) {
-      const nextChild = editor.childNodes[offset]
-      if (nextChild && isChipElement(nextChild)) {
-        return removeChipNodeFromDOM(editor, nextChild)
-      }
-    }
-
-    // Case 2: cursor at end of a text node, check next sibling
-    if (node.nodeType === Node.TEXT_NODE && offset === (node.textContent ?? '').length) {
-      const directChild = getDirectChildContaining(editor, node)
-      if (!directChild) return false
-
-      let nextSibling = directChild.nextSibling
-      while (
-        nextSibling &&
-        nextSibling.nodeType === Node.TEXT_NODE &&
-        nextSibling.textContent === ''
-      ) {
-        nextSibling = nextSibling.nextSibling
-      }
-      if (nextSibling && isChipElement(nextSibling)) {
-        return removeChipNodeFromDOM(editor, nextSibling)
-      }
-    }
-
-    return false
-  }, [removeChipNodeFromDOM])
-
-  // -----------------------------------------------------------------------
-  // Auto-resolve active trigger on space
-  // -----------------------------------------------------------------------
-
-  const autoResolveActiveTrigger = useCallback(
-    (trigger: ActiveTrigger) => {
-      const segments = readSegmentsFromDOM()
-      const query = trigger.query
-
-      // Create a synthetic suggestion so onSelect can customize display text
-      const syntheticSuggestion: TriggerSuggestion = {
-        value: query,
-        label: query,
-      }
-
-      const displayText = trigger.config.onSelect?.(syntheticSuggestion) ?? query
-
-      const chipData = {
-        value: query,
-        displayText: displayText || query,
-        autoResolved: true,
-      }
-      const result = resolveChip(segments, trigger, chipData)
-
-      onChange(result.segments)
-      renderSegmentsToDOM(result.segments)
-
-      onChipAdd?.({
-        type: 'chip',
-        trigger: trigger.config.char,
-        ...chipData,
-      })
-
-      // Position cursor after the auto-resolved chip + trailing space
-      const editor = editorRef.current
-      if (editor) {
-        setCursorAtOffset(editor, result.cursorOffset)
-      }
-
-      dismissTrigger()
-    },
-    [readSegmentsFromDOM, onChange, renderSegmentsToDOM, dismissTrigger, onChipAdd],
-  )
-
-  // -----------------------------------------------------------------------
-  // Select a suggestion from the dropdown
-  // -----------------------------------------------------------------------
+  }, [onChange, readSegmentsFromDOM, runTriggerDetection, renderSegmentsToDOM, markdownEnabled, normalizeBullets, maxLength, events])
 
   const selectSuggestionInternal = useCallback(
     (suggestion: TriggerSuggestion) => {
-      if (!activeTrigger) return
+      if (!activeTrigger) {
+        return
+      }
 
       const segments = readSegmentsFromDOM()
 
@@ -941,7 +587,9 @@ export function usePromptArea({
         onChange(inserted.segments)
         renderSegmentsToDOM(inserted.segments)
         const editor = editorRef.current
-        if (editor) setCursorAtOffset(editor, inserted.cursorOffset)
+        if (editor) {
+          setCursorAtOffset(editor, inserted.cursorOffset)
+        }
         dismissTrigger()
         setTimeout(() => {
           editorRef.current?.focus()
@@ -957,100 +605,17 @@ export function usePromptArea({
         data: suggestion.data,
       }
 
-      // Chip-click dropdown (`reopenOnChipClick`): replace the clicked chip in
-      // place instead of resolving typed trigger text at the caret. Disabled
-      // is re-checked here (not just at open time) in case the composer
-      // became disabled while the popover was still open.
-      const editing = editingChip.current
-      if (editing) {
-        const editor = editorRef.current
-        if (editor && !disabled) {
-          // Re-verify the click-time index still holds the same chip — the
-          // model may have shifted (external value update, undo/redo) while
-          // the dropdown was open. If it moved, recover ONLY when exactly one
-          // chip in the document now matches trigger+value: with duplicates,
-          // guessing risks silently editing the wrong instance, which is
-          // worse than the no-op this falls back to.
-          const atIndex = segments[editing.segIndex]
-          const stillThere =
-            atIndex?.type === 'chip' &&
-            atIndex.trigger === editing.chip.trigger &&
-            atIndex.value === editing.chip.value
-          const segIdx = stillThere
-            ? editing.segIndex
-            : (() => {
-                const matches: number[] = []
-                segments.forEach((seg, i) => {
-                  if (
-                    seg.type === 'chip' &&
-                    seg.trigger === editing.chip.trigger &&
-                    seg.value === editing.chip.value
-                  ) {
-                    matches.push(i)
-                  }
-                })
-                return matches.length === 1 ? matches[0] : -1
-              })()
-          const oldChip = segIdx !== -1 ? segments[segIdx] : undefined
-
-          if (oldChip?.type === 'chip') {
-            const newChip: ChipSegment = {
-              type: 'chip',
-              trigger: activeTrigger.config.char,
-              ...chipData,
-            }
-            let newSegments = segments.map((seg, i) => (i === segIdx ? newChip : seg))
-
-            // Guarantee a real landing spot after the replaced chip, mirroring
-            // resolveChip's trailing-space convention (prompt-area-engine.ts):
-            // if the new chip is now the last segment (or directly followed by
-            // another chip), the caret would land at a bare element boundary
-            // with no text node, which some engines fail to render/snap a
-            // visible caret at.
-            const nextSeg = newSegments[segIdx + 1]
-            const insertedSpace = !nextSeg || nextSeg.type !== 'text' || nextSeg.text.length === 0
-            if (insertedSpace) {
-              newSegments = [
-                ...newSegments.slice(0, segIdx + 1),
-                { type: 'text', text: ' ' },
-                ...newSegments.slice(segIdx + 1),
-              ]
-            }
-
-            events.pushUndo(segments)
-            onChange(newSegments)
-            renderSegmentsToDOM(newSegments)
-
-            // Same value + display text + data: treat as a no-op confirmation
-            // rather than a destructive delete+add — onChipDelete is
-            // documented as firing on backspace/forward-delete, not on
-            // re-confirming the already-selected suggestion.
-            const unchanged =
-              oldChip.value === newChip.value &&
-              oldChip.displayText === newChip.displayText &&
-              safeJsonStringify(oldChip.data) === safeJsonStringify(newChip.data)
-            if (!unchanged) {
-              onChipDelete?.(oldChip)
-              onChipAdd?.(newChip)
-            }
-
-            // +1 when a space was inserted, matching resolveChip's own
-            // "+1 accounts for the trailing space after the chip" placement —
-            // landing exactly at the chip's end would put the caret at the
-            // same bare element boundary the inserted space exists to avoid.
-            const caretOffset =
-              segmentsToPlainText(newSegments.slice(0, segIdx + 1)).length + (insertedSpace ? 1 : 0)
-            setCursorAtOffset(editor, caretOffset)
-          }
-        }
-
+      // Chip-click dropdown (`reopenOnChipClick`): the whole path lives in
+      // use-chip-editing.ts; on true the chip was replaced in place (or the edit
+      // was refused because the composer went disabled) and we only dismiss and
+      // refocus here.
+      if (chipEditing.trySelectEditingChip(segments, chipData, activeTrigger.config.char, events.pushUndo)) {
         dismissTrigger()
         setTimeout(() => {
           editorRef.current?.focus()
         }, 0)
         return
       }
-
       const result = resolveChip(segments, activeTrigger, chipData)
 
       onChange(result.segments)
@@ -1062,7 +627,6 @@ export function usePromptArea({
         ...chipData,
       })
 
-      // Position cursor after the chip + trailing space
       const editor = editorRef.current
       if (editor) {
         setCursorAtOffset(editor, result.cursorOffset)
@@ -1070,348 +634,48 @@ export function usePromptArea({
 
       dismissTrigger()
 
-      // Refocus editor after popover interaction
       setTimeout(() => {
         editorRef.current?.focus()
       }, 0)
     },
-    [
-      activeTrigger,
-      readSegmentsFromDOM,
-      onChange,
-      renderSegmentsToDOM,
-      dismissTrigger,
-      onChipAdd,
-      onChipDelete,
-      events,
-      disabled,
-    ],
+    [activeTrigger, readSegmentsFromDOM, onChange, renderSegmentsToDOM, dismissTrigger, onChipAdd, events, chipEditing],
   )
 
   const selectSuggestion = selectSuggestionInternal
 
-  // Chip-click dropdown: once the empty-query suggestions arrive, preselect
-  // the chip's current value so the list opens "on" the existing choice.
-  useEffect(() => {
-    const editing = editingChip.current
-    if (!editing || !activeTrigger?.config.reopenOnChipClick) return
-    const idx = suggestions.findIndex((s) => s.value === editing.chip.value)
-    if (idx > 0) setSelectedSuggestionIndex(idx)
-  }, [suggestions, activeTrigger])
-
-  // -----------------------------------------------------------------------
-  // Handle key events
-  // -----------------------------------------------------------------------
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLDivElement>) => {
-      const applyEditResult = (
-        editor: HTMLDivElement,
-        result: { segments: Segment[]; cursorOffset: number },
-      ) => {
-        // Ordered-list numbers are a projection of position: rebuild them on
-        // every structural edit and remap the caret across any digit-run width
-        // changes. No-op (same reference) when there are no ordered lists.
-        let { segments, cursorOffset } = result
-        if (markdownEnabled) {
-          const renumbered = renumberOrderedListSegments(segments)
-          segments = renumbered.segments
-          cursorOffset = remapOffset(cursorOffset, renumbered.edits)
-        }
-        lastRenderedValue.current = segments
-        onChange(segments)
-        renderSegmentsToDOM(segments)
-        setCursorAtOffset(editor, cursorOffset)
-      }
-
-      const tryListContinuation = (editor: HTMLDivElement): boolean => {
-        if (!markdownEnabled) return false
-        const segments = readSegmentsFromDOM()
-        const cursorPos = getCursorOffset(editor)
-        if (cursorPos === null) return false
-        const plainText = segmentsToPlainText(segments)
-        if (!getListContext(plainText, cursorPos)) return false
-        const result = insertListContinuation(segments, cursorPos)
-        if (result) applyEditResult(editor, result)
-        return true
-      }
-
-      // 1. Flush pending undo debounce so Cmd+Z has the latest checkpoint
-      if ((e.metaKey || e.ctrlKey) && e.key === 'z' && undoBaseState.current) {
-        if (undoTimer.current) {
-          clearTimeout(undoTimer.current)
-          undoTimer.current = null
-        }
-        events.pushUndo(undoBaseState.current)
-        undoBaseState.current = null
-      }
-
-      // 1a. Undo/redo intercept
-      if (events.handleKeyDownForUndoRedo(e)) return
-
-      // 1.5 Markdown formatting shortcuts (Cmd+B bold, Cmd+I italic)
-      if (
-        markdownEnabled &&
-        (e.metaKey || e.ctrlKey) &&
-        !e.shiftKey &&
-        (e.key === 'b' || e.key === 'i')
-      ) {
-        e.preventDefault()
-        const editor = editorRef.current
-        if (!editor) return
-
-        const offsets = getSelectionOffsets(editor)
-        if (!offsets || offsets.start === offsets.end) return
-
-        const marker = e.key === 'b' ? '**' : '*'
-        const currentSegments = readSegmentsFromDOM()
-        events.pushUndo(currentSegments)
-
-        const result = toggleMarkdownWrap(currentSegments, offsets.start, offsets.end, marker)
-        if (!result) return
-
-        lastRenderedValue.current = result.segments
-        onChange(result.segments)
-        renderSegmentsToDOM(result.segments)
-        setSelectionAtOffsets(editor, result.selectionStart, result.selectionEnd)
-        return
-      }
-
-      // 1.75 Launch triggers: a trigger with mode 'launch' fires onActivate on
-      // keydown and suppresses the char so it never enters the editor — for
-      // opening an external surface (dialog, palette). The DOM read is gated on
-      // the typed key actually matching a launch char, so it stays off the hot
-      // path. insertChip still inserts a chip at the cursor if the consumer
-      // wants one after the external selection.
-      if (
-        !e.metaKey &&
-        !e.ctrlKey &&
-        !e.altKey &&
-        !e.nativeEvent.isComposing &&
-        e.key.length === 1
-      ) {
-        const launcher = triggers.find((t) => t.mode === 'launch' && t.char === e.key)
-        const editor = editorRef.current
-        if (launcher?.onActivate && editor) {
-          const cursorPos = getCursorOffset(editor)
-          if (cursorPos !== null) {
-            const segments = readSegmentsFromDOM()
-            const plainText = segmentsToPlainText(segments)
-            if (isValidTriggerPosition(plainText, cursorPos, launcher.position)) {
-              e.preventDefault()
-              launcher.onActivate({
-                text: plainText,
-                cursorPosition: cursorPos,
-                insertChip: buildInsertChip(
-                  replaceTextRange(segments, cursorPos, cursorPos, launcher.char),
-                  { config: launcher, startOffset: cursorPos, query: '' },
-                ),
-              })
-              return
-            }
-          }
-        }
-      }
-
-      // 2. Trigger dropdown navigation. Gated on the dropdown actually being
-      // ON SCREEN, which matches TriggerPopover's own render condition
-      // (non-empty suggestions, OR loading/error/emptyMessage) rather than
-      // just `suggestions.length > 0` — otherwise a popover left open in a
-      // loading/empty state (e.g. right after a chip-click reopen, before its
-      // empty-query search resolves) lets Enter fall through to onSubmit and
-      // Escape fall through to onEscape while still visibly on screen.
-      const dropdownVisible =
-        activeTrigger &&
-        activeTrigger.config.mode === 'dropdown' &&
-        (suggestions.length > 0 ||
-          suggestionsLoading ||
-          suggestionsError !== null ||
-          !!activeTrigger.config.emptyMessage)
-      if (dropdownVisible) {
-        if (e.key === 'ArrowDown') {
-          e.preventDefault()
-          if (suggestions.length > 0) {
-            setSelectedSuggestionIndex((prev) => Math.min(prev + 1, suggestions.length - 1))
-          }
-          return
-        }
-        if (e.key === 'ArrowUp') {
-          e.preventDefault()
-          if (suggestions.length > 0) {
-            setSelectedSuggestionIndex((prev) => Math.max(prev - 1, 0))
-          }
-          return
-        }
-        if (e.key === 'Enter' || e.key === 'Tab') {
-          e.preventDefault()
-          const selected = suggestions[selectedSuggestionIndex]
-          if (selected) {
-            selectSuggestionInternal(selected)
-          }
-          return
-        }
-        if (e.key === 'Escape') {
-          e.preventDefault()
-          dismissTrigger()
-          return
-        }
-      }
-
-      // 2.5. Auto-resolve on Space when trigger has resolveOnSpace
-      if (e.key === ' ' && activeTrigger && activeTrigger.config.resolveOnSpace) {
-        const query = activeTrigger.query.trim()
-        if (query.length > 0) {
-          e.preventDefault()
-          autoResolveActiveTrigger(activeTrigger)
-          return
-        }
-      }
+  // Handle key events — the numbered router and its chip-deletion helpers live in
+  // use-prompt-area-keydown.ts.
 
-      // 2.6. Tab/Shift+Tab for list indentation (only when trigger dropdown is NOT open)
-      if (markdownEnabled && e.key === 'Tab' && !activeTrigger) {
-        const editor = editorRef.current
-        if (editor) {
-          const segments = readSegmentsFromDOM()
-          const plainText = segmentsToPlainText(segments)
-          const cursorPos = getCursorOffset(editor)
-          if (cursorPos !== null) {
-            const ctx = getListContext(plainText, cursorPos)
-            if (ctx) {
-              e.preventDefault()
-              const result = e.shiftKey
-                ? outdentListItem(segments, cursorPos)
-                : indentListItem(segments, cursorPos)
-              if (result) applyEditResult(editor, result)
-              return
-            }
-          }
-        }
-      }
-
-      // Insert a newline at the model level (avoids the browser's broken
-      // contentEditable behaviour near <a> elements).
-      const insertPlainNewline = (editor: HTMLDivElement): void => {
-        const offsets = getSelectionOffsets(editor)
-        if (!offsets) return
-        const currentSegments = readSegmentsFromDOM()
-        events.pushUndo(currentSegments)
-        const newSegments = replaceTextRange(currentSegments, offsets.start, offsets.end, '\n')
-        applyEditResult(editor, { segments: newSegments, cursorOffset: offsets.start + 1 })
-      }
-
-      // 2.8 Shift+Enter always inserts a newline (after a list-continuation check).
-      if (e.key === 'Enter' && e.shiftKey && !e.nativeEvent.isComposing) {
-        e.preventDefault()
-        const editor = editorRef.current
-        if (editor && !tryListContinuation(editor)) insertPlainNewline(editor)
-        return
-      }
-
-      // 3. Enter without Shift (skipping IME): submit when `submitOnEnter` is
-      // set, else insert a newline — continuing a list if we are in one.
-      //
-      // Under `submitOnEnter`, Enter submits *unconditionally*. It used to try
-      // a list continuation first, which meant that once you had typed a
-      // bullet, the send key silently stopped sending: every Enter added
-      // another empty bullet, and the only way out was to clear the list. Enter
-      // is the send key in a chat composer, and a key that does something else
-      // depending on what the line above happens to start with is not one.
-      // Continuation lives on Shift+Enter (branch 2.8), which is the newline
-      // key here and therefore where "newline, and keep the list going"
-      // belongs. Without `submitOnEnter`, Enter *is* the newline key, so it
-      // keeps the continuation.
-      if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
-        e.preventDefault()
-        if (submitOnEnter) {
-          onSubmit?.(readSegmentsFromDOM())
-          return
-        }
-        const editor = editorRef.current
-        if (editor && !tryListContinuation(editor)) insertPlainNewline(editor)
-        return
-      }
-
-      // 4. Escape
-      if (e.key === 'Escape' && onEscape) {
-        onEscape()
-        return
-      }
-
-      // 4.5 Non-collapsed selection delete (Backspace/Delete across <a> boundaries)
-      if ((e.key === 'Backspace' || e.key === 'Delete') && !e.nativeEvent.isComposing) {
-        const editor = editorRef.current
-        if (editor) {
-          const offsets = getSelectionOffsets(editor)
-          if (offsets && offsets.start !== offsets.end) {
-            e.preventDefault()
-            const currentSegments = readSegmentsFromDOM()
-            events.pushUndo(currentSegments)
-            const newSegments = replaceTextRange(currentSegments, offsets.start, offsets.end, '')
-            applyEditResult(editor, { segments: newSegments, cursorOffset: offsets.start })
-            runTriggerDetection()
-            return
-          }
-        }
-      }
-
-      // 5. Backspace: check list prefix removal, then chip deletion
-      if (e.key === 'Backspace') {
-        const editor = editorRef.current
-        if (editor) {
-          const segments = readSegmentsFromDOM()
-          const cursorPos = getCursorOffset(editor)
-          if (markdownEnabled && cursorPos !== null) {
-            const result = removeListPrefix(segments, cursorPos)
-            if (result) {
-              e.preventDefault()
-              applyEditResult(editor, result)
-              runTriggerDetection()
-              return
-            }
-          }
-        }
-        if (handleChipBackspace()) {
-          e.preventDefault()
-          runTriggerDetection()
-          return
-        }
-      }
-
-      // 6. Delete (forward): delete chip as whole unit
-      if (e.key === 'Delete' && handleChipForwardDelete()) {
-        e.preventDefault()
-        runTriggerDetection()
-        return
-      }
-    },
-    [
-      activeTrigger,
-      suggestions,
-      suggestionsLoading,
-      suggestionsError,
-      selectedSuggestionIndex,
-      onSubmit,
-      submitOnEnter,
-      onEscape,
-      readSegmentsFromDOM,
-      onChange,
-      renderSegmentsToDOM,
-      markdownEnabled,
-      dismissTrigger,
-      handleChipBackspace,
-      handleChipForwardDelete,
-      autoResolveActiveTrigger,
-      runTriggerDetection,
-      selectSuggestionInternal,
-      events,
-      triggers,
-      buildInsertChip,
-    ],
-  )
+  const handleKeyDown = usePromptAreaKeydown({
+    editorRef,
+    triggers,
+    markdownEnabled,
+    submitOnEnter,
+    onSubmit,
+    onEscape,
+    onChange,
+    onChipAdd,
+    onChipDelete,
+    readSegmentsFromDOM,
+    renderSegmentsToDOM,
+    runTriggerDetection,
+    dismissTrigger,
+    buildInsertChip,
+    selectSuggestionInternal,
+    activeTrigger,
+    suggestions,
+    suggestionsLoading,
+    suggestionsError,
+    selectedSuggestionIndex,
+    setSelectedSuggestionIndex,
+    pushUndo: events.pushUndo,
+    handleKeyDownForUndoRedo: events.handleKeyDownForUndoRedo,
+    lastRenderedValue,
+    undoTimer,
+    undoBaseState,
+  })
 
-  // -----------------------------------------------------------------------
   // Imperative handle (memoized to avoid identity changes)
-  // -----------------------------------------------------------------------
 
   const handle: PromptAreaHandle = useMemo(
     () => ({
@@ -1430,7 +694,9 @@ export function usePromptArea({
         onChange([])
         const editor = editorRef.current
         if (editor) {
-          while (editor.firstChild) editor.removeChild(editor.firstChild)
+          while (editor.firstChild) {
+            editor.removeChild(editor.firstChild)
+          }
         }
         events.resetUndoHistory()
         if (undoTimer.current) {
@@ -1445,7 +711,9 @@ export function usePromptArea({
         onChange(segments)
         renderSegmentsToDOM(segments)
         const editor = editorRef.current
-        if (editor) setCursorAtOffset(editor, text.length)
+        if (editor) {
+          setCursorAtOffset(editor, text.length)
+        }
       },
       appendText: (text) => {
         const segments = readSegmentsFromDOM()
@@ -1460,7 +728,9 @@ export function usePromptArea({
         onChange(next)
         renderSegmentsToDOM(next)
         const editor = editorRef.current
-        if (editor) setCursorAtOffset(editor, segmentsToPlainText(next).length)
+        if (editor) {
+          setCursorAtOffset(editor, segmentsToPlainText(next).length)
+        }
       },
       getCursorPosition: () => {
         const editor = editorRef.current
@@ -1468,11 +738,15 @@ export function usePromptArea({
       },
       setCursorPosition: (offset) => {
         const editor = editorRef.current
-        if (editor) setCursorAtOffset(editor, offset)
+        if (editor) {
+          setCursorAtOffset(editor, offset)
+        }
       },
       setCursorToEnd: () => {
         const editor = editorRef.current
-        if (editor) setCursorAtOffset(editor, segmentsToPlainText(readSegmentsFromDOM()).length)
+        if (editor) {
+          setCursorAtOffset(editor, segmentsToPlainText(readSegmentsFromDOM()).length)
+        }
       },
       getSelection: () => {
         const editor = editorRef.current
@@ -1480,15 +754,15 @@ export function usePromptArea({
       },
       setSelection: (start, end) => {
         const editor = editorRef.current
-        if (editor) setSelectionAtOffsets(editor, start, end)
+        if (editor) {
+          setSelectionAtOffsets(editor, start, end)
+        }
       },
     }),
     [readSegmentsFromDOM, onChange, renderSegmentsToDOM, onChipAdd, events],
   )
 
-  // -----------------------------------------------------------------------
   // Compose event handlers
-  // -----------------------------------------------------------------------
 
   const eventHandlers = useMemo(
     () => ({
@@ -1522,8 +796,8 @@ export function usePromptArea({
     selectedSuggestionIndex,
     handleInput,
     handleKeyDown,
-    handleClick,
-    handleMouseDown,
+    handleClick: chipEditing.handleClick,
+    handleMouseDown: chipEditing.handleMouseDown,
     selectSuggestion,
     dismissTrigger,
     handle,