@plannotator/ui 0.52.1 → 0.53.0

package/components/CodeFilePopout.tsx

@@ -92,7 +92,7 @@ function buildPierreCSS(mode: 'dark' | 'light', bg: string, fg: string): string
     pre, code { background-color: ${bg} !important; }
     [data-column-number] { background-color: ${bg} !important; }
     [data-file] { height: 100% !important; }
-    [data-code] { height: 100% !important; overflow-y: auto !important; }
+    [data-code] { height: 100% !important; overflow-y: auto !important; align-content: start; }
     [data-line] { cursor: pointer; }
   `;
 }
@@ -283,21 +283,46 @@ const CodeInlineAnnotation: React.FC<{
   );
 };
 
-export const CodeFilePopout: React.FC<CodeFilePopoutProps> = ({
-  open,
-  onClose,
+export interface CodeFileViewProps {
+  filepath: string;
+  contents: string;
+  prerenderedHTML?: string;
+  annotations?: CodeAnnotation[];
+  selectedAnnotationId?: string | null;
+  onAddAnnotation?: (annotation: CodeFileAnnotationInput) => void;
+  onEditAnnotation?: (id: string, updates: Partial<CodeAnnotation>) => void;
+  onDeleteAnnotation?: (id: string) => void;
+  onSelectAnnotation?: (id: string | null) => void;
+  /** Whether the comment composer offers image attachments. Default true (the popout's behavior). */
+  allowImages?: boolean;
+  /** The file area's class. Default: fills the rest of a flex column. */
+  className?: string;
+  /** The highlighting language, instead of Pierre's inference from the name (`'text'`: no highlighting, for a very large file). */
+  lang?: string;
+  /** Long lines: `'scroll'` sideways (the default) or `'wrap'` onto the next row, for a minified file. */
+  overflow?: 'scroll' | 'wrap';
+}
+
+/**
+ * One code file drawn by Pierre's `File`, with line and range comments: the
+ * gutter `+`, a click on a line, a dragged range or a text selection opens
+ * the comment composer, and saved comments render inline under their lines.
+ * The body of `CodeFilePopout`, usable on its own (the Inbox's file pane).
+ */
+export const CodeFileView: React.FC<CodeFileViewProps> = ({
   filepath,
   contents,
   prerenderedHTML,
-  error,
-  requestedPath,
   annotations = [],
   selectedAnnotationId,
   onAddAnnotation,
   onEditAnnotation,
   onDeleteAnnotation,
   onSelectAnnotation,
-  container,
+  allowImages = true,
+  className = 'flex-1 min-h-0',
+  lang,
+  overflow = 'scroll',
 }) => {
   const { resolvedMode } = useTheme();
   const mode = resolvedMode ?? 'dark';
@@ -306,7 +331,6 @@ export const CodeFilePopout: React.FC<CodeFilePopoutProps> = ({
     type: mode as 'dark' | 'light',
     css: buildPierreCSS(mode, colors.bg, colors.fg),
   }));
-  const [copied, setCopied] = useState(false);
   const [pendingComment, setPendingComment] = useState<PendingComment | null>(null);
   const fileAreaRef = useRef<HTMLDivElement>(null);
   const lastPointerRectRef = useRef<DOMRect | null>(null);
@@ -328,7 +352,6 @@ export const CodeFilePopout: React.FC<CodeFilePopoutProps> = ({
 
   const displayName = filepath.split('/').pop() || filepath;
   const relativePath = filepath.replace(/.*\/(?=.*\/)/, '');
-  const lineCount = useMemo(() => contents.split('\n').length, [contents]);
   const selectedCodeAnnotation = useMemo(
     () => annotations.find((ann) => ann.id === selectedAnnotationId),
     [annotations, selectedAnnotationId],
@@ -457,6 +480,94 @@ export const CodeFilePopout: React.FC<CodeFilePopoutProps> = ({
     );
   }, [onAddAnnotation, openCommentForRange]);
 
+  return (
+    <>
+      <div
+        ref={fileAreaRef}
+        className={className}
+        onPointerMove={(e) => {
+          lastPointerRectRef.current = new DOMRect(e.clientX, e.clientY, 0, 0);
+        }}
+        onMouseUp={() => {
+          requestAnimationFrame(openCommentForBrowserSelection);
+        }}
+      >
+        <File
+          key={filepath}
+          file={lang ? { name: displayName, contents, lang } : { name: displayName, contents }}
+          prerenderedHTML={effectivePrerenderedHTML}
+          className="h-full"
+          lineAnnotations={lineAnnotations}
+          selectedLines={selectedLines}
+          renderAnnotation={renderAnnotation}
+          renderGutterUtility={renderGutterUtility}
+          style={{
+            '--diffs-dark-bg': colors.bg,
+            '--diffs-light-bg': colors.bg,
+            '--diffs-dark': colors.fg,
+            '--diffs-light': colors.fg,
+          } as React.CSSProperties}
+          options={{
+            themeType: pierreTheme.type,
+            unsafeCSS: pierreTheme.css,
+            overflow,
+            disableFileHeader: true,
+            enableLineSelection: true,
+            enableGutterUtility: !!onAddAnnotation,
+            lineHoverHighlight: onAddAnnotation ? 'line' : 'disabled',
+            onLineClick: handleLineClick,
+            onLineSelectionEnd: handleLineSelectionEnd,
+          }}
+        />
+      </div>
+      {pendingComment && onAddAnnotation && (
+        <CommentPopover
+          anchorEl={pendingComment.anchorEl}
+          anchorRect={pendingComment.anchorRect}
+          contextText={pendingComment.contextText}
+          isGlobal={false}
+          skillReferences
+          allowImages={allowImages}
+          onSubmit={(text, images) => {
+            onAddAnnotation({
+              filePath: filepath,
+              lineStart: pendingComment.range.start,
+              lineEnd: pendingComment.range.end,
+              text,
+              images,
+              originalCode: pendingComment.originalCode,
+            });
+            setPendingComment(null);
+          }}
+          onClose={() => setPendingComment(null)}
+        />
+      )}
+    </>
+  );
+};
+
+export const CodeFilePopout: React.FC<CodeFilePopoutProps> = ({
+  open,
+  onClose,
+  filepath,
+  contents,
+  prerenderedHTML,
+  error,
+  requestedPath,
+  annotations = [],
+  selectedAnnotationId,
+  onAddAnnotation,
+  onEditAnnotation,
+  onDeleteAnnotation,
+  onSelectAnnotation,
+  container,
+}) => {
+  const [copied, setCopied] = useState(false);
+
+  const displayName = filepath.split('/').pop() || filepath;
+  const relativePath = filepath.replace(/.*\/(?=.*\/)/, '');
+  const lineCount = useMemo(() => contents.split('\n').length, [contents]);
+
   const handleCopy = async () => {
     if (await copyTextToClipboard(contents)) {
       setCopied(true);
@@ -539,65 +650,17 @@ export const CodeFilePopout: React.FC<CodeFilePopoutProps> = ({
       </div>
 
       <div className="border-t border-border/30" />
-      <div
-        ref={fileAreaRef}
-        className="flex-1 min-h-0"
-        onPointerMove={(e) => {
-          lastPointerRectRef.current = new DOMRect(e.clientX, e.clientY, 0, 0);
-        }}
-        onMouseUp={() => {
-          requestAnimationFrame(openCommentForBrowserSelection);
-        }}
-      >
-        <File
-          key={filepath}
-          file={{ name: displayName, contents }}
-          prerenderedHTML={effectivePrerenderedHTML}
-          className="h-full"
-          lineAnnotations={lineAnnotations}
-          selectedLines={selectedLines}
-          renderAnnotation={renderAnnotation}
-          renderGutterUtility={renderGutterUtility}
-          style={{
-            '--diffs-dark-bg': colors.bg,
-            '--diffs-light-bg': colors.bg,
-            '--diffs-dark': colors.fg,
-            '--diffs-light': colors.fg,
-          } as React.CSSProperties}
-          options={{
-            themeType: pierreTheme.type,
-            unsafeCSS: pierreTheme.css,
-            overflow: 'scroll',
-            disableFileHeader: true,
-            enableLineSelection: true,
-            enableGutterUtility: !!onAddAnnotation,
-            lineHoverHighlight: onAddAnnotation ? 'line' : 'disabled',
-            onLineClick: handleLineClick,
-            onLineSelectionEnd: handleLineSelectionEnd,
-          }}
-        />
-      </div>
-      {pendingComment && onAddAnnotation && (
-        <CommentPopover
-          anchorEl={pendingComment.anchorEl}
-          anchorRect={pendingComment.anchorRect}
-          contextText={pendingComment.contextText}
-          isGlobal={false}
-          skillReferences
-          onSubmit={(text, images) => {
-            onAddAnnotation({
-              filePath: filepath,
-              lineStart: pendingComment.range.start,
-              lineEnd: pendingComment.range.end,
-              text,
-              images,
-              originalCode: pendingComment.originalCode,
-            });
-            setPendingComment(null);
-          }}
-          onClose={() => setPendingComment(null)}
-        />
-      )}
+      <CodeFileView
+        filepath={filepath}
+        contents={contents}
+        prerenderedHTML={prerenderedHTML}
+        annotations={annotations}
+        selectedAnnotationId={selectedAnnotationId}
+        onAddAnnotation={onAddAnnotation}
+        onEditAnnotation={onEditAnnotation}
+        onDeleteAnnotation={onDeleteAnnotation}
+        onSelectAnnotation={onSelectAnnotation}
+      />
     </PopoutDialog>
   );
 };

package/components/CommentPopover.tsx

@@ -7,16 +7,10 @@ import { SparklesIcon } from './SparklesIcon';
 import { hasUnsavedCommentContent } from '../utils/commentContent';
 import { useSkillReferenceAutocomplete } from '../hooks/useSkillReferenceAutocomplete';
 import { HumanOnlySkillNotice, SkillReferenceMenu } from './SkillReferenceMenu';
-import type { SkillReferenceToken } from '../utils/skillReferences';
-import {
-  mentionTokenRanges,
-  mergeTokenRanges,
-  skillTokenRanges,
-  type ComposerTokenRange,
-} from '../utils/composerTokens';
+import { ComposerTokenTextarea, type ComposerMentionChips } from './ComposerTokenTextarea';
 import { useMentionAutocomplete } from '../hooks/useMentionAutocomplete';
 import { MentionAutocompleteMenu, mentionActiveOptionId } from './MentionAutocomplete';
-import type { MentionPerson, MentionSource } from '../utils/mentions';
+import type { MentionSource } from '../utils/mentions';
 import {
   hasPrimaryCoarsePointer,
   shouldUseExpandedComposer,
@@ -24,6 +18,8 @@ import {
   type VisibleViewportBounds,
 } from '../hooks/useViewportEnvironment';
 
+export type { ComposerMentionChips } from './ComposerTokenTextarea';
+
 export interface CommentAskAIContext {
   kind: 'general' | 'selection';
   label?: string;
@@ -714,7 +710,7 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
                 onSelect={skillAc.select}
               />
             )}
-            <ComposerTextarea
+            <ComposerTokenTextarea
               textareaRef={focusOnMountRef}
               value={text}
               onChange={(e) => { setText(e.target.value); readComposerCaret(); }}
@@ -867,7 +863,7 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
             onSelect={skillAc.select}
           />
         )}
-        <ComposerTextarea
+        <ComposerTokenTextarea
           textareaRef={focusOnMountRef}
           value={text}
           onChange={(e) => { setText(e.target.value); readComposerCaret(); }}
@@ -930,345 +926,6 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
   );
 };
 
-// ---------------------------------------------------------------------------
-// Composer textarea with skill-reference token highlighting
-// ---------------------------------------------------------------------------
-
-/** Classes shared by the textarea and its highlight mirror — font, size,
- * and box metrics MUST stay identical or the overlay drifts out of alignment. */
-const COMPOSER_TEXT_CLASSES = 'w-full bg-transparent text-sm px-1 py-0.5';
-
-/** Per-composer memo for the overlay gutter sync below. */
-interface OverlayGutterState {
-  /** The overlay the applied value belongs to (a remount invalidates it). */
-  overlay: HTMLElement | null;
-  /** Last `offsetWidth - clientWidth` seen on the textarea. */
-  raw: number;
-  /** Extra right padding currently written inline on the overlay, in px. */
-  applied: number;
-}
-
-const cssPx = (value: string): number => {
-  const n = parseFloat(value);
-  return Number.isFinite(n) ? n : 0;
-};
-
-/**
- * Keep the mirror's text column exactly as wide as the textarea's (#1525).
- *
- * A layout-consuming vertical scrollbar (Windows/Linux classic scrollbars; the
- * app's `scrollbar-width: thin` makes them ~12px) narrows the textarea's
- * content box once the composer hits its max height — but the overlay is
- * `overflow: hidden` and keeps its full width, so from the first line that
- * wraps differently the painted glyphs drift away from the native caret, which
- * is the one thing the textarea itself still draws. `scrollbar-gutter: stable`
- * cannot fix this: it is ignored on an `overflow: hidden` box. Mirroring the
- * measured scrollbar width onto the overlay's right padding makes both boxes
- * wrap identically again (and stops the overlay painting under the scrollbar).
- *
- * Overlay scrollbars (macOS, iOS, any touch surface) consume no layout, so the
- * measured width is 0 — and then this writes NOTHING at all, leaving the
- * class-driven padding untouched exactly as before the fix.
- */
-function syncOverlayGutter(
-  el: HTMLTextAreaElement,
-  overlay: HTMLElement,
-  state: OverlayGutterState,
-  raw: number,
-): void {
-  // Nothing measurable changed since the last sync — the common case.
-  if (overlay === state.overlay && raw === state.raw) return;
-  state.overlay = overlay;
-  state.raw = raw;
-
-  const clear = () => {
-    if (state.applied === 0) return; // never wrote anything; leave the DOM alone
-    overlay.style.removeProperty('padding-right');
-    state.applied = 0;
-  };
-
-  const style = getComputedStyle(el);
-  // `offsetWidth - clientWidth` is scrollbar + left/right borders. The borders
-  // are shared with the overlay (both boxes are border-box), so only the
-  // scrollbar part is the extra gutter the mirror is missing.
-  const borders = cssPx(style.borderLeftWidth) + cssPx(style.borderRightWidth);
-  const scrollbar = Math.max(0, raw - borders);
-  if (scrollbar === 0) {
-    clear();
-    return;
-  }
-  // Base padding is read from the textarea (never the overlay, whose computed
-  // value may already include a gutter we wrote), so the two can never drift
-  // apart if COMPOSER_TEXT_CLASSES changes.
-  const base = parseFloat(style.paddingRight);
-  if (!Number.isFinite(base)) {
-    clear(); // unmeasurable: fall back to the pre-fix behavior
-    return;
-  }
-  overlay.style.paddingRight = `${base + scrollbar}px`;
-  state.applied = scrollbar;
-}
-
-/**
- * The default chip look: the theme's primary at a wash, one shade stronger
- * than a skill reference's so the two token kinds in one overlay read as
- * siblings rather than the same thing. Deliberately no ring: every class here
- * is one the package already emitted, so a host build's CSS (and the portable
- * guide viewer's) is byte-identical to 0.43.2. A host that wants a pill adds
- * `box-shadow: 0 0 0 Npx <background>` through `tokenClassName` — paint, not
- * layout, per the metric rule above.
- */
-const MENTION_CHIP_CLASSES = 'text-primary bg-primary/15 rounded-[3px]';
-
-/**
- * One token's span in the highlight overlay.
- *
- * METRIC RULE, load-bearing for every token kind: a span may change COLOR,
- * BACKGROUND, BORDER-RADIUS, BOX-SHADOW and TEXT-DECORATION only. Anything
- * that moves a glyph — padding, margin, border width, font-weight,
- * letter-spacing, font-size — would shift the overlay's text off the
- * textarea's own layout and drift the caret away from the painted glyphs. A
- * pill's breathing room is faked with a paint-only `box-shadow` ring in the
- * chip's own background color.
- */
-function renderTokenSpan(
-  range: ComposerTokenRange,
-  text: string,
-  mentionTokenClassName?: string,
-): React.ReactNode {
-  if (range.kind === 'mention') {
-    // `data-mention-token` / `data-mention-kind` are the host's styling hook;
-    // `tokenClassName` is appended verbatim and is the host's to keep
-    // metric-safe (see the rule above).
-    return (
-      <span
-        key={`mention-${range.start}`}
-        data-mention-token={range.person.id}
-        data-mention-kind={range.person.kind}
-        className={`${MENTION_CHIP_CLASSES}${
-          mentionTokenClassName ? ` ${mentionTokenClassName}` : ''
-        }`}
-      >
-        {text}
-      </span>
-    );
-  }
-  // Human-only tokens carry a quiet dotted underline as their inline marker
-  // (text-decoration never affects glyph layout, so overlay alignment is
-  // safe). The accessible explanation lives in HumanOnlySkillNotice below
-  // the textarea — this overlay is aria-hidden.
-  return (
-    <span
-      key={`skill-${range.start}`}
-      data-skill-ref-token={range.skill.entry.name}
-      data-skill-ref-human-only={range.skill.entry.humanOnly ? 'true' : undefined}
-      className={`text-primary bg-primary/10 rounded-[3px] ${
-        range.skill.entry.humanOnly
-          ? 'underline decoration-dotted decoration-primary/60 underline-offset-2'
-          : ''
-      }`}
-    >
-      {text}
-    </span>
-  );
-}
-
-/** The mention half of the highlight layer. Null → no mention source at all. */
-export interface ComposerMentionChips {
-  /** The people whose `@Label` token still survives in the text. */
-  readonly people: readonly MentionPerson[];
-  /** Host class appended to each chip (see `MentionSource.tokenClassName`). */
-  readonly tokenClassName?: string;
-}
-
-interface ComposerTextareaProps {
-  value: string;
-  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-  onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
-  /** Caret observer (skill autocomplete). */
-  onSelectCaret: () => void;
-  placeholder: string;
-  /** Mode-specific min/max height classes. */
-  sizeClassName: string;
-  textareaRef: (el: HTMLTextAreaElement | null) => void;
-  /** Positioned skill-reference occurrences to highlight. */
-  tokens: SkillReferenceToken[];
-  /** Off → no skill-reference contribution to the highlight layer. */
-  skillReferences: boolean;
-  /**
-   * The mention contribution, or null with no `mentionSource`. Present (even
-   * with nobody tagged yet) it turns the overlay on, so the first pick paints
-   * a chip without swapping the textarea for a different element.
-   */
-  mentionChips: ComposerMentionChips | null;
-  /** ARIA relationship to the skill-reference listbox. */
-  listboxId: string;
-  listboxOpen: boolean;
-  activeOptionId?: string;
-}
-
-/**
- * The composer's textarea. With NEITHER token source active this is exactly
- * the pre-feature `<textarea>`; with either one on, its tokens are painted by
- * a mirrored, aria-hidden overlay rendered BEHIND a transparent-text textarea
- * (a textarea cannot style substrings). ONE overlay serves both sources: two
- * mirrored layers could never stay pixel-aligned with each other, and only
- * one of them could own the scroll sync. The overlay shares the exact
- * font/padding/wrapping metrics and mirrors scroll position, and token spans
- * obey the metric rule on `renderTokenSpan` (paint only, never layout), so
- * the glyphs the browser lays out in the textarea and the glyphs the overlay
- * paints coincide. During IME composition the overlay hides and the textarea
- * text becomes visible again (`.pn-ref-composing`), keeping native
- * composition rendering (underlines, candidate highlights) intact.
- */
-const ComposerTextarea: React.FC<ComposerTextareaProps> = ({
-  value,
-  onChange,
-  onKeyDown,
-  onSelectCaret,
-  placeholder,
-  sizeClassName,
-  textareaRef,
-  tokens,
-  skillReferences,
-  mentionChips,
-  listboxId,
-  listboxOpen,
-  activeOptionId,
-}) => {
-  const overlayRef = useRef<HTMLDivElement>(null);
-  const [composing, setComposing] = useState(false);
-  const gutterRef = useRef<OverlayGutterState>({ overlay: null, raw: 0, applied: 0 });
-
-  const syncScroll = useCallback((el: HTMLTextAreaElement) => {
-    const overlay = overlayRef.current;
-    if (!overlay) return;
-    // Reads before writes so a sync costs at most one forced layout.
-    const { scrollTop, scrollLeft } = el;
-    const raw = el.offsetWidth - el.clientWidth;
-    overlay.scrollTop = scrollTop;
-    overlay.scrollLeft = scrollLeft;
-    syncOverlayGutter(el, overlay, gutterRef.current, raw);
-  }, []);
-
-  const innerRef = useRef<HTMLTextAreaElement | null>(null);
-  const attachRef = useCallback(
-    (el: HTMLTextAreaElement | null) => {
-      innerRef.current = el;
-      textareaRef(el);
-    },
-    [textareaRef],
-  );
-
-  // The overlay exists while EITHER source is active. `mentionChips` turns it
-  // on for the whole life of a mention composer, not only once somebody is
-  // tagged, so a pick never swaps the textarea element under the caret.
-  const mentionPeople = mentionChips?.people;
-  const highlight = skillReferences || mentionChips !== null;
-
-  // The one list of spans the overlay paints, from every active source.
-  // Skill references are the earlier group, so they win a byte both claim.
-  const ranges = useMemo(
-    () =>
-      mergeTokenRanges(value, [
-        skillReferences ? skillTokenRanges(tokens) : [],
-        mentionPeople ? mentionTokenRanges(value, mentionPeople) : [],
-      ]),
-    [value, tokens, skillReferences, mentionPeople],
-  );
-
-  // Keep the mirror aligned when the value changes without a scroll event
-  // (e.g. programmatic insertion moving the caret into a scrolled region).
-  useEffect(() => {
-    if (innerRef.current) syncScroll(innerRef.current);
-  }, [value, syncScroll]);
-
-  // `syncScroll` otherwise only runs on scroll and on value change, so a
-  // window/panel resize that grows or drops the textarea's scrollbar without a
-  // keystroke would leave the gutter stale until the next one.
-  useEffect(() => {
-    const el = innerRef.current;
-    if (!el || typeof ResizeObserver === 'undefined') return;
-    const observer = new ResizeObserver(() => {
-      if (innerRef.current) syncScroll(innerRef.current);
-    });
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [highlight, syncScroll]);
-
-  if (!highlight) {
-    return (
-      <textarea
-        data-pn-mobile-editable="true"
-        // Absent any open menu these are all undefined, so the plain textarea
-        // renders exactly the attributes it always did.
-        aria-autocomplete={listboxOpen ? 'list' : undefined}
-        aria-controls={listboxOpen ? listboxId : undefined}
-        aria-activedescendant={activeOptionId}
-        ref={attachRef}
-        value={value}
-        onChange={onChange}
-        onKeyDown={onKeyDown}
-        onSelect={onSelectCaret}
-        placeholder={placeholder}
-        className={`${COMPOSER_TEXT_CLASSES} placeholder:text-muted-foreground resize-none focus:outline-none ${sizeClassName}`}
-        style={{ fieldSizing: 'content' } as React.CSSProperties}
-      />
-    );
-  }
-
-  const segments: React.ReactNode[] = [];
-  let pos = 0;
-  for (const range of ranges) {
-    if (range.start > pos) segments.push(value.slice(pos, range.start));
-    segments.push(
-      renderTokenSpan(range, value.slice(range.start, range.end), mentionChips?.tokenClassName),
-    );
-    pos = range.end;
-  }
-  segments.push(value.slice(pos));
-
-  return (
-    <div className="relative">
-      <div
-        ref={overlayRef}
-        aria-hidden="true"
-        // Names the SKILL-reference layer, so a skill composer's overlay is
-        // byte-identical to the one it rendered before mentions existed; a
-        // mentions-only overlay is found by its mirror attribute below.
-        data-skill-ref-overlay={skillReferences ? 'true' : undefined}
-        data-pn-mobile-editable-mirror="true"
-        className={`${COMPOSER_TEXT_CLASSES} ${sizeClassName} pointer-events-none absolute inset-0 overflow-hidden whitespace-pre-wrap break-words`}
-        style={composing ? { visibility: 'hidden' } : undefined}
-      >
-        {segments}
-        {'\n'}
-      </div>
-      <textarea
-        data-pn-mobile-editable="true"
-        aria-label={placeholder}
-        aria-autocomplete="list"
-        aria-haspopup="listbox"
-        aria-controls={listboxOpen ? listboxId : undefined}
-        aria-owns={listboxOpen ? listboxId : undefined}
-        aria-activedescendant={activeOptionId}
-        ref={attachRef}
-        value={value}
-        onChange={onChange}
-        onKeyDown={onKeyDown}
-        onSelect={onSelectCaret}
-        onScroll={(e) => syncScroll(e.currentTarget)}
-        onCompositionStart={() => setComposing(true)}
-        onCompositionEnd={() => setComposing(false)}
-        placeholder={placeholder}
-        className={`${COMPOSER_TEXT_CLASSES} placeholder:text-muted-foreground resize-none focus:outline-none relative pn-ref-input ${
-          composing ? 'pn-ref-composing' : ''
-        } ${sizeClassName}`}
-        style={{ fieldSizing: 'content' } as React.CSSProperties}
-      />
-    </div>
-  );
-};
 
 // Icons