@plannotator/ui 0.22.0 → 0.24.0

package/components/AnnotationPanel.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Annotation, AnnotationType, Block, type CodeAnnotation, type EditorAnnotation } from '../types';
+import { AnnotationType, type Annotation, type Block, type CodeAnnotation, type EditorAnnotation } from '../types';
 import { isCurrentUser } from '../utils/identity';
 import { ImageThumbnail } from './ImageThumbnail';
 import { EditorAnnotationCard } from './EditorAnnotationCard';
@@ -73,12 +73,18 @@ interface PanelProps {
   /** Committed direct edits to one or more documents. Rendered as pinned cards
     *  above the annotation timeline with expandable unified diffs. */
   directEdits?: DirectEditsPanelItem[] | null;
+  /** Host slot rendered at the foot of each plan-annotation card (e.g. reply/
+    *  resolve UI). The panel stays presentation-only; clicks inside the slot
+    *  do not select the card. Default: nothing rendered. */
+  renderCardFooter?: (annotation: Annotation) => React.ReactNode;
+  /** Hide every mutation affordance (delete/edit buttons on all card kinds).
+    *  Selection and scrolling still work. Default false — today's behavior. */
+  readOnly?: boolean;
 }
 
 export const AnnotationPanel: React.FC<PanelProps> = ({
   isOpen,
   annotations,
-  blocks,
   onSelect,
   onDelete,
   onEdit,
@@ -97,6 +103,8 @@ export const AnnotationPanel: React.FC<PanelProps> = ({
   otherFileAnnotations,
   onOtherFileAnnotationsClick,
   directEdits = null,
+  renderCardFooter,
+  readOnly = false,
 }) => {
   const isMobile = useIsMobile();
   const [copiedText, setCopiedText] = useState(false);
@@ -195,6 +203,8 @@ export const AnnotationPanel: React.FC<PanelProps> = ({
                   onSelect={() => onSelect(entry.annotation.id)}
                   onDelete={() => onDelete(entry.annotation.id)}
                   onEdit={onEdit ? (updates: Partial<Annotation>) => onEdit(entry.annotation.id, updates) : undefined}
+                  readOnly={readOnly}
+                  footer={renderCardFooter?.(entry.annotation)}
                 />
               ) : (
                 <CodeAnnotationCard
@@ -205,6 +215,7 @@ export const AnnotationPanel: React.FC<PanelProps> = ({
                   onSelect={() => onSelectCodeAnnotation?.(entry.annotation.id)}
                   onDelete={() => onDeleteCodeAnnotation?.(entry.annotation.id)}
                   onEdit={onEditCodeAnnotation ? (updates: Partial<CodeAnnotation>) => onEditCodeAnnotation(entry.annotation.id, updates) : undefined}
+                  readOnly={readOnly}
                 />
               )
             ))}
@@ -221,7 +232,7 @@ export const AnnotationPanel: React.FC<PanelProps> = ({
                   <EditorAnnotationCard
                     key={ann.id}
                     annotation={ann}
-                    onDelete={() => onDeleteEditorAnnotation?.(ann.id)}
+                    onDelete={readOnly ? undefined : () => onDeleteEditorAnnotation?.(ann.id)}
                   />
                 ))}
               </>
@@ -418,7 +429,9 @@ const AnnotationCard: React.FC<{
   onSelect: () => void;
   onDelete: () => void;
   onEdit?: (updates: Partial<Annotation>) => void;
-}> = ({ annotation, isSelected, isMe, onSelect, onDelete, onEdit }) => {
+  readOnly?: boolean;
+  footer?: React.ReactNode;
+}> = ({ annotation, isSelected, isMe, onSelect, onDelete, onEdit, readOnly = false, footer }) => {
   const [isEditing, setIsEditing] = useState(false);
   const [editText, setEditText] = useState(annotation.text || '');
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -517,26 +530,28 @@ const AnnotationCard: React.FC<{
         <span className="text-[10px] text-muted-foreground/50 truncate">
           {annotation.author ? `${annotation.author}${isMe ? ' (me)' : ''} · ` : ''}{formatTimestamp(annotation.createdA)}
         </span>
-        <div className="ml-auto flex items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 [@media(hover:none)]:opacity-100">
-          {onEdit && annotation.type !== AnnotationType.DELETION && !isEditing && (
+        {!readOnly && (
+          <div className="ml-auto flex items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 [@media(hover:none)]:opacity-100">
+            {onEdit && annotation.type !== AnnotationType.DELETION && !isEditing && (
+              <button
+                type="button"
+                onClick={handleStartEdit}
+                className="relative rounded-md p-1.5 text-muted-foreground transition-colors before:absolute before:-inset-1.5 before:content-[''] hover:text-foreground"
+                title="Edit annotation"
+              >
+                <PencilIcon />
+              </button>
+            )}
             <button
               type="button"
-              onClick={handleStartEdit}
-              className="relative rounded-md p-1.5 text-muted-foreground transition-colors before:absolute before:-inset-1.5 before:content-[''] hover:text-foreground"
-              title="Edit annotation"
+              onClick={(e: React.MouseEvent<HTMLButtonElement>) => { e.stopPropagation(); onDelete(); }}
+              className="relative rounded-md p-1.5 text-muted-foreground transition-colors before:absolute before:-inset-1.5 before:content-[''] hover:text-destructive"
+              title="Delete annotation"
             >
-              <PencilIcon />
+              <TrashCardIcon />
             </button>
-          )}
-          <button
-            type="button"
-            onClick={(e: React.MouseEvent<HTMLButtonElement>) => { e.stopPropagation(); onDelete(); }}
-            className="relative rounded-md p-1.5 text-muted-foreground transition-colors before:absolute before:-inset-1.5 before:content-[''] hover:text-destructive"
-            title="Delete annotation"
-          >
-            <TrashCardIcon />
-          </button>
-        </div>
+          </div>
+        )}
       </div>
 
       {/* Global Comment - show text directly */}
@@ -585,6 +600,19 @@ const AnnotationCard: React.FC<{
           ))}
         </div>
       )}
+
+      {/* Host footer slot (reply/resolve UI etc.) — interactions inside it
+          must not toggle card selection. */}
+      {footer != null && footer !== false && (
+        <div
+          data-annotation-card-footer="true"
+          className="mt-2"
+          onClick={(e: React.MouseEvent) => e.stopPropagation()}
+          onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()}
+        >
+          {footer}
+        </div>
+      )}
     </div>
   );
 };
@@ -596,7 +624,8 @@ const CodeAnnotationCard: React.FC<{
   onSelect: () => void;
   onDelete: () => void;
   onEdit?: (updates: Partial<CodeAnnotation>) => void;
-}> = ({ annotation, isSelected, isMe, onSelect, onDelete, onEdit }) => {
+  readOnly?: boolean;
+}> = ({ annotation, isSelected, isMe, onSelect, onDelete, onEdit, readOnly = false }) => {
   const [isEditing, setIsEditing] = useState(false);
   const [editText, setEditText] = useState(annotation.text || '');
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -650,26 +679,28 @@ const CodeAnnotationCard: React.FC<{
         <span className="text-[10px] text-muted-foreground/50 truncate">
           {annotation.author ? `${annotation.author}${isMe ? ' (me)' : ''} · ` : ''}{formatTimestamp(annotation.createdAt)}
         </span>
-        <div className="ml-auto flex items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 [@media(hover:none)]:opacity-100">
-          {onEdit && !isEditing && (
+        {!readOnly && (
+          <div className="ml-auto flex items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 [@media(hover:none)]:opacity-100">
+            {onEdit && !isEditing && (
+              <button
+                type="button"
+                onClick={(e) => { e.stopPropagation(); setIsEditing(true); }}
+                className="relative rounded-md p-1.5 text-muted-foreground transition-colors before:absolute before:-inset-1.5 before:content-[''] hover:text-foreground"
+                title="Edit annotation"
+              >
+                <PencilIcon />
+              </button>
+            )}
             <button
               type="button"
-              onClick={(e) => { e.stopPropagation(); setIsEditing(true); }}
-              className="relative rounded-md p-1.5 text-muted-foreground transition-colors before:absolute before:-inset-1.5 before:content-[''] hover:text-foreground"
-              title="Edit annotation"
+              onClick={(e) => { e.stopPropagation(); onDelete(); }}
+              className="relative rounded-md p-1.5 text-muted-foreground transition-colors before:absolute before:-inset-1.5 before:content-[''] hover:text-destructive"
+              title="Delete annotation"
             >
-              <PencilIcon />
+              <TrashCardIcon />
             </button>
-          )}
-          <button
-            type="button"
-            onClick={(e) => { e.stopPropagation(); onDelete(); }}
-            className="relative rounded-md p-1.5 text-muted-foreground transition-colors before:absolute before:-inset-1.5 before:content-[''] hover:text-destructive"
-            title="Delete annotation"
-          >
-            <TrashCardIcon />
-          </button>
-        </div>
+          </div>
+        )}
       </div>
 
       {/* File / line meta */}

package/components/AnnotationToolbar.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useMemo, useCallback } from "react";
+import React, { useState, useEffect, useRef, useMemo } from "react";
 import { AnnotationType } from "../types";
 import { createPortal } from "react-dom";
 import { useDismissOnOutsideAndEscape } from "../hooks/useDismissOnOutsideAndEscape";

package/components/BlockRenderer.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Block } from "../types";
+import type { Block } from "../types";
 import { InlineMarkdown } from "./InlineMarkdown";
 import { ListItemBody } from "./ListItemBody";
 import { CodeBlock } from "./blocks/CodeBlock";

package/components/EditorAnnotationCard.tsx

@@ -14,7 +14,8 @@ type EditorAnnotationVariant = 'plan' | 'code-review';
 
 interface EditorAnnotationCardProps {
   annotation: EditorAnnotation;
-  onDelete: () => void;
+  /** Omit to render the card read-only (no delete affordance). */
+  onDelete?: () => void;
   variant?: EditorAnnotationVariant;
 }
 
@@ -38,15 +39,17 @@ export const EditorAnnotationCard: React.FC<EditorAnnotationCardProps> = ({ anno
         <span className="text-[10px] font-mono text-muted-foreground/50 truncate" title={annotation.filePath}>
           {annotation.filePath}:{lineRange}
         </span>
-        <button
-          onClick={(e) => { e.stopPropagation(); onDelete(); }}
-          className="ml-auto relative rounded-md p-1.5 text-muted-foreground transition-colors before:absolute before:-inset-1.5 before:content-[''] opacity-0 group-hover:opacity-100 [@media(hover:none)]:opacity-100 hover:text-destructive"
-          title="Delete annotation"
-        >
-          <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </button>
+        {onDelete && (
+          <button
+            onClick={(e) => { e.stopPropagation(); onDelete(); }}
+            className="ml-auto relative rounded-md p-1.5 text-muted-foreground transition-colors before:absolute before:-inset-1.5 before:content-[''] opacity-0 group-hover:opacity-100 [@media(hover:none)]:opacity-100 hover:text-destructive"
+            title="Delete annotation"
+          >
+            <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        )}
       </div>
 
       {/* Selected text */}

package/components/ImageAnnotator/index.tsx

@@ -2,7 +2,7 @@ import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { Canvas } from './Canvas';
 import { Toolbar } from './Toolbar';
 import { renderStroke } from './utils';
-import type { Point, Stroke, Tool, AnnotatorState } from './types';
+import type { Point, AnnotatorState } from './types';
 import { DEFAULT_STATE } from './types';
 
 interface ImageAnnotatorProps {

package/components/OpenInAppButton.tsx

@@ -212,22 +212,24 @@ export const OpenInAppButton: React.FC<OpenInAppButtonProps> = ({
         )}
         {/* Chevron (with primary) or standalone overflow (copy-only). */}
         <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
-          <DropdownMenuTrigger asChild>
-            <button
-              type="button"
-              disabled={isDisabled}
-              className={`text-xs flex items-center py-1 transition-colors text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed ${
-                openable ? 'px-1 border-l border-border/50' : 'px-1.5'
-              }`}
-              title={openable ? 'Open in…' : 'File actions'}
-              aria-label={openable ? 'Choose app to open in' : 'File actions'}
-            >
-              {openable ? (
-                <ChevronDown className="w-3 h-3" />
-              ) : (
-                <MoreHorizontal className="w-3.5 h-3.5" />
-              )}
-            </button>
+          <DropdownMenuTrigger
+            render={
+              <button
+                type="button"
+                disabled={isDisabled}
+                className={`text-xs flex items-center py-1 transition-colors text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed ${
+                  openable ? 'px-1 border-l border-border/50' : 'px-1.5'
+                }`}
+                title={openable ? 'Open in…' : 'File actions'}
+                aria-label={openable ? 'Choose app to open in' : 'File actions'}
+              />
+            }
+          >
+            {openable ? (
+              <ChevronDown className="w-3 h-3" />
+            ) : (
+              <MoreHorizontal className="w-3.5 h-3.5" />
+            )}
           </DropdownMenuTrigger>
           <DropdownMenuContent
             align="end"
@@ -235,7 +237,7 @@ export const OpenInAppButton: React.FC<OpenInAppButtonProps> = ({
             className="min-w-[12rem]"
             // Don't snap focus (and its focus ring) back onto the trigger when
             // the menu closes — that left-edge bar reads as a stray artifact.
-            onCloseAutoFocus={(event) => event.preventDefault()}
+            finalFocus={false}
           >
             {openable &&
               grouped.map((group, gi) => (
@@ -244,10 +246,8 @@ export const OpenInAppButton: React.FC<OpenInAppButtonProps> = ({
                   {group.map((app) => (
                     <DropdownMenuItem
                       key={app.id}
-                      onSelect={(e) => {
-                        e.preventDefault();
-                        selectApp(app.id);
-                      }}
+                      closeOnClick={false}
+                      onClick={() => selectApp(app.id)}
                       className="text-xs"
                     >
                       <AppIcon id={app.icon} className="w-4 h-4" />
@@ -260,10 +260,8 @@ export const OpenInAppButton: React.FC<OpenInAppButtonProps> = ({
             {openable && (filePath || diffText) && <DropdownMenuSeparator />}
             {filePath && (
               <DropdownMenuItem
-                onSelect={(e) => {
-                  e.preventDefault();
-                  void copyText(filePath);
-                }}
+                closeOnClick={false}
+                onClick={() => void copyText(filePath)}
                 className="text-xs"
               >
                 <Copy className="w-4 h-4" />
@@ -272,10 +270,8 @@ export const OpenInAppButton: React.FC<OpenInAppButtonProps> = ({
             )}
             {diffText && (
               <DropdownMenuItem
-                onSelect={(e) => {
-                  e.preventDefault();
-                  void copyText(diffText);
-                }}
+                closeOnClick={false}
+                onClick={() => void copyText(diffText)}
                 className="text-xs"
               >
                 <Copy className="w-4 h-4" />

package/components/PopoutDialog.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import * as Dialog from '@radix-ui/react-dialog';
+import { Dialog } from '@base-ui/react/dialog';
 
 const ANNOTATION_SELECTORS = [
   '.annotation-toolbar',
@@ -14,7 +14,7 @@ interface PopoutDialogProps {
   container?: HTMLElement | null;
   className?: string;
   children: React.ReactNode;
-  /** Extra data attributes to spread onto Dialog.Content */
+  /** Extra data attributes to spread onto the dialog popup */
   dataAttributes?: Record<string, string>;
 }
 
@@ -36,55 +36,69 @@ export const PopoutDialog: React.FC<PopoutDialogProps> = ({
     [onClose],
   );
 
-  const handleInteractOutside = useCallback(
-    (e: Event) => {
-      const target = e.target as Element | null;
-      if (!target) return;
-      if (ANNOTATION_SELECTORS.some((sel) => target.closest(sel))) {
-        e.preventDefault();
+  const handleOpenChange = useCallback(
+    (next: boolean, eventDetails: Dialog.Root.ChangeEventDetails) => {
+      if (next) return;
+      // Interactions with annotation UI (toolbars/popovers portal outside the
+      // dialog) must not dismiss the popout — the Radix version guarded this
+      // via onInteractOutside preventDefault; Base UI expresses it as
+      // cancelling the outside-press/focus-out close reason.
+      if (eventDetails.reason === 'outside-press' || eventDetails.reason === 'focus-out') {
+        // For focus events the annotation UI may sit on either side of the
+        // event (target = element losing focus, relatedTarget = gaining), so
+        // guard both.
+        const event = eventDetails.event as Event | undefined;
+        const candidates = [
+          event?.target as Element | null,
+          (event as FocusEvent | undefined)?.relatedTarget as Element | null,
+        ];
+        if (
+          candidates.some(
+            (el) => el instanceof Element && ANNOTATION_SELECTORS.some((sel) => el.closest(sel)),
+          )
+        ) {
+          eventDetails.cancel();
+          return;
+        }
       }
+      onClose();
     },
-    [],
+    [onClose],
   );
 
   return (
-    <Dialog.Root
-      open={open}
-      onOpenChange={(next) => { if (!next) onClose(); }}
-      modal={false}
-    >
+    <Dialog.Root open={open} onOpenChange={handleOpenChange} modal={false}>
       <Dialog.Portal container={container ?? undefined}>
-        {/* Radix ignores Dialog.Overlay when modal={false}, so we use a plain
-            div for the backdrop. This gives us the dark scrim + blur while
-            keeping annotation toolbars (which portal outside the dialog)
-            interactive. */}
+        {/* Non-modal dialogs render no library backdrop, so we use a plain
+            div for the dark scrim + blur while keeping annotation toolbars
+            (which portal outside the dialog) interactive. */}
         <div
           className="fixed inset-0 z-50 bg-black/50 backdrop-blur-[2px]"
           onClick={handleBackdropClick}
           aria-hidden="true"
         />
-        <Dialog.Content
+        <Dialog.Popup
           className={`fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 bg-background border border-border rounded-xl shadow-2xl flex flex-col overflow-hidden ${className ?? 'w-[calc(100vw-4rem)] max-w-[min(calc(100vw-4rem),1500px)] max-h-[calc(100vh-4rem)]'}`}
           data-popout="true"
-          aria-describedby={undefined}
-          onOpenAutoFocus={(e) => e.preventDefault()}
-          onInteractOutside={handleInteractOutside}
+          initialFocus={false}
           {...dataAttributes}
         >
           <Dialog.Title className="sr-only">{title}</Dialog.Title>
-          <Dialog.Close asChild>
-            <button
-              className="absolute top-3 right-3 z-20 p-1.5 rounded-md text-muted-foreground/70 hover:bg-muted hover:text-foreground transition-colors"
-              aria-label="Close"
-            >
-              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </button>
+          <Dialog.Close
+            render={
+              <button
+                className="absolute top-3 right-3 z-20 p-1.5 rounded-md text-muted-foreground/70 hover:bg-muted hover:text-foreground transition-colors"
+                aria-label="Close"
+              />
+            }
+          >
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
           </Dialog.Close>
 
           {children}
-        </Dialog.Content>
+        </Dialog.Popup>
       </Dialog.Portal>
     </Dialog.Root>
   );

package/components/Popover.tsx

@@ -1,27 +1,33 @@
-import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
 import React from 'react';
 
 const Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
-const PopoverAnchor = PopoverPrimitive.Anchor;
 
 const PopoverContent = React.forwardRef<
-  React.ComponentRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = 'center', sideOffset = 6, children, ...props }, ref) => (
+  HTMLDivElement,
+  PopoverPrimitive.Popup.Props &
+    Pick<PopoverPrimitive.Positioner.Props, 'side' | 'sideOffset' | 'align' | 'alignOffset'>
+>(({ className, side, align = 'center', sideOffset = 6, alignOffset, children, ...props }, ref) => (
   <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
+    <PopoverPrimitive.Positioner
+      side={side}
       align={align}
       sideOffset={sideOffset}
-      className={`bg-popover text-popover-foreground border border-border/50 rounded-lg shadow-xl z-[100] outline-none popover-enter ${className ?? ''}`}
-      {...props}
+      alignOffset={alignOffset}
+      className="isolate z-[100]"
     >
-      {children}
-    </PopoverPrimitive.Content>
+      <PopoverPrimitive.Popup
+        ref={ref}
+        className={`bg-popover text-popover-foreground border border-border/50 rounded-lg shadow-xl z-[100] outline-none origin-[var(--transform-origin)] transition-[opacity,scale] duration-150 ease-out data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 ${className ?? ''}`}
+        {...props}
+      >
+        {children}
+      </PopoverPrimitive.Popup>
+    </PopoverPrimitive.Positioner>
   </PopoverPrimitive.Portal>
 ));
 
 PopoverContent.displayName = 'PopoverContent';
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
+export { Popover, PopoverTrigger, PopoverContent };

package/components/SearchableSelect.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useRef, useCallback, type ReactNode } from 'react';
+import React, { useState, useMemo, useRef, useCallback, type ReactElement, type ReactNode } from 'react';
 import { Popover, PopoverTrigger, PopoverContent } from './Popover';
 
 interface SearchableSelectProps<T extends { id: string }> {
@@ -7,7 +7,7 @@ interface SearchableSelectProps<T extends { id: string }> {
   onSelect: (item: T) => void;
   filterFn: (item: T, query: string) => boolean;
   renderItem: (item: T, state: { isSelected: boolean; isFocused: boolean }) => ReactNode;
-  renderTrigger: (state: { open: boolean }) => ReactNode;
+  renderTrigger: (state: { open: boolean }) => ReactElement;
   headerContent?: ReactNode;
   placeholder?: string;
   emptyMessage?: string;
@@ -85,14 +85,11 @@ export function SearchableSelect<T extends { id: string }>({
 
   return (
     <Popover open={open} onOpenChange={handleOpenChange}>
-      <PopoverTrigger asChild>{renderTrigger({ open })}</PopoverTrigger>
+      <PopoverTrigger render={renderTrigger({ open })} />
       <PopoverContent
         align={align}
         className={`${width} p-0`}
-        onOpenAutoFocus={(e) => {
-          e.preventDefault();
-          inputRef.current?.focus();
-        }}
+        initialFocus={inputRef}
       >
         {/* Search row */}
         <div className="flex items-center gap-2 border-b border-border/50 px-3 py-2">

package/components/Tooltip.tsx

@@ -1,11 +1,39 @@
 import React from 'react';
-import * as RadixTooltip from '@radix-ui/react-tooltip';
+import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
 
-export const TooltipProvider = RadixTooltip.Provider;
+/**
+ * TooltipProvider keeps the Radix-era prop names (`delayDuration`,
+ * `skipDelayDuration`, `disableHoverableContent`) as its public API and maps
+ * them onto Base UI's Provider (`delay`, `timeout`) — call sites in the apps
+ * stay unchanged. `disableHoverableContent` has no provider-level equivalent
+ * in Base UI (it moved to per-root `disableHoverablePopup`), so it is carried
+ * via context and applied to every Tooltip root under the provider.
+ */
+const DisableHoverablePopupContext = React.createContext(false);
+
+interface TooltipProviderProps {
+  delayDuration?: number;
+  skipDelayDuration?: number;
+  disableHoverableContent?: boolean;
+  children?: React.ReactNode;
+}
+
+export const TooltipProvider: React.FC<TooltipProviderProps> = ({
+  delayDuration,
+  skipDelayDuration,
+  disableHoverableContent = false,
+  children,
+}) => (
+  <BaseTooltip.Provider delay={delayDuration} timeout={skipDelayDuration}>
+    <DisableHoverablePopupContext.Provider value={disableHoverableContent}>
+      {children}
+    </DisableHoverablePopupContext.Provider>
+  </BaseTooltip.Provider>
+);
 
 interface TooltipProps {
   content: React.ReactNode;
-  children: React.ReactNode;
+  children: React.ReactElement;
   side?: 'top' | 'right' | 'bottom' | 'left';
   align?: 'start' | 'center' | 'end';
   delayDuration?: number;
@@ -26,20 +54,22 @@ export const Tooltip: React.FC<TooltipProps> = ({
   delayDuration,
   sideOffset = 8,
   wide = false,
-}) => (
-  <RadixTooltip.Root delayDuration={delayDuration}>
-    <RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>
-    <RadixTooltip.Portal>
-      <RadixTooltip.Content
-        side={side}
-        align={align}
-        sideOffset={sideOffset}
-        className={`z-50 px-2 py-1 text-xs bg-popover text-popover-foreground border border-border rounded shadow-md origin-[var(--radix-tooltip-content-transform-origin)] transition-[opacity,transform] duration-150 ease-out data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=delayed-open]:opacity-100 data-[state=delayed-open]:scale-100 data-[state=instant-open]:opacity-100 data-[state=instant-open]:scale-100 ${
-          wide ? 'max-w-[260px] leading-snug whitespace-normal' : 'whitespace-nowrap'
-        }`}
-      >
-        {content}
-      </RadixTooltip.Content>
-    </RadixTooltip.Portal>
-  </RadixTooltip.Root>
-);
+}) => {
+  const disableHoverablePopup = React.useContext(DisableHoverablePopupContext);
+  return (
+    <BaseTooltip.Root disableHoverablePopup={disableHoverablePopup}>
+      <BaseTooltip.Trigger render={children} delay={delayDuration} />
+      <BaseTooltip.Portal>
+        <BaseTooltip.Positioner side={side} align={align} sideOffset={sideOffset} className="isolate z-50">
+          <BaseTooltip.Popup
+            className={`z-50 px-2 py-1 text-xs bg-popover text-popover-foreground border border-border rounded shadow-md origin-[var(--transform-origin)] transition-[opacity,scale] duration-150 ease-out data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 ${
+              wide ? 'max-w-[260px] leading-snug whitespace-normal' : 'whitespace-nowrap'
+            }`}
+          >
+            {content}
+          </BaseTooltip.Popup>
+        </BaseTooltip.Positioner>
+      </BaseTooltip.Portal>
+    </BaseTooltip.Root>
+  );
+};