@plannotator/ui 0.53.1 → 0.54.0

package/components/DecisionControl.tsx

@@ -8,6 +8,7 @@ import { ConfirmDialog, type ConfirmDialogProps } from './ConfirmDialog';
 import { useDismissablePopover } from '../hooks/useDismissablePopover';
 import { useCompactTouchLayout } from '../hooks/useIsMobile';
 import { cn } from '../lib/utils';
+import { isCommentSubmitKey } from '../utils/commentSubmitKey';
 import type {
   DecisionActionId,
   DecisionComposer,
@@ -57,6 +58,16 @@ export interface DecisionControlProps {
   dismissOnIframeFocus?: boolean;
   /** Confirm surface override; defaults to the ui ConfirmDialog. */
   confirmDialog?: React.ComponentType<ConfirmDialogProps>;
+  /**
+   * Rows rendered under the decisions, inside the same menu (#1057: plan
+   * review's "After approval, switch to" agent picker and Claude Code's
+   * permission-mode line). Not decisions: they never close the menu by
+   * themselves. Interactive rows use `role="menuitem"` or
+   * `role="menuitemradio"` so the arrow keys reach them. Absent: the menu is
+   * the decisions alone, exactly as before. A function receives
+   * `closeMenu`, for a row that leaves the menu (e.g. one opening Settings).
+   */
+  menuFooter?: React.ReactNode | ((api: { closeMenu: () => void }) => React.ReactNode);
 }
 
 const NOTE_MAX_HEIGHT_PX = 144;
@@ -98,6 +109,14 @@ export interface DecisionNoteFieldProps {
   placeholder?: string;
   disabled?: boolean;
   autoFocus?: boolean;
+  /**
+   * The field is a COMMENT composer (the review sidebar's "+ General
+   * comment"), so the "Enter saves a comment" setting applies: pass its value
+   * and a plain Enter also submits (Shift+Enter stays a new line). Default
+   * false: in the decision control's own composer a note rides a decision,
+   * and only Mod+Enter fires it.
+   */
+  enterSubmits?: boolean;
 }
 
 /**
@@ -114,6 +133,7 @@ export const DecisionNoteField: React.FC<DecisionNoteFieldProps> = ({
   placeholder = 'Add a note...',
   disabled = false,
   autoFocus = true,
+  enterSubmits = false,
 }) => {
   const ref = useAutoGrow(text);
 
@@ -132,15 +152,15 @@ export const DecisionNoteField: React.FC<DecisionNoteFieldProps> = ({
         onCancel();
         return;
       }
-      if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+      if (enterSubmits ? isCommentSubmitKey(event, true) : event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
         event.stopPropagation();
         if (!disabled) onSubmit();
       }
-      // Plain Enter falls through: the field is multi-line and Enter's job is
-      // a newline.
+      // Otherwise plain Enter falls through: the field is multi-line and
+      // Enter's job is a newline.
     },
-    [disabled, onCancel, onSubmit],
+    [disabled, enterSubmits, onCancel, onSubmit],
   );
 
   return (
@@ -255,6 +275,7 @@ export const DecisionControl: React.FC<DecisionControlProps> = ({
   labelBreakpoint = 'md',
   dismissOnIframeFocus = false,
   confirmDialog,
+  menuFooter,
 }) => {
   const rootRef = useRef<HTMLDivElement>(null);
   const popoverRef = useRef<HTMLDivElement>(null);
@@ -402,7 +423,9 @@ export const DecisionControl: React.FC<DecisionControlProps> = ({
       const keys = ['ArrowDown', 'ArrowUp', 'Home', 'End'];
       if (!keys.includes(event.key)) return;
       const items = Array.from(
-        popoverRef.current?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]:not(:disabled)') ?? [],
+        popoverRef.current?.querySelectorAll<HTMLButtonElement>(
+          '[role="menuitem"]:not(:disabled), [role="menuitemradio"]:not(:disabled)',
+        ) ?? [],
       );
       if (items.length === 0) return;
       event.preventDefault();
@@ -548,6 +571,9 @@ export const DecisionControl: React.FC<DecisionControlProps> = ({
                   />
                 </React.Fragment>
               ))}
+              {typeof menuFooter === 'function'
+                ? menuFooter({ closeMenu: () => closePopover() })
+                : menuFooter}
             </div>
           ) : activeItem?.composer ? (
             <div className="p-2">

package/components/DiagramBlock.tsx

@@ -16,6 +16,7 @@ import { svgContentSize } from './diagram/svgContentSize';
 import type { DiagramComment, DiagramCreateComment } from './diagram/useDiagramComments';
 import type { DiagramRenderState } from './diagram/useDiagramRender';
 import { useTheme } from './ThemeProvider';
+import { LazyBlockBoundary } from './LazyBlockBoundary';
 
 /**
  * A diagram fence in the document: the fence's language picks the engine
@@ -345,7 +346,7 @@ export const DiagramBlock: React.FC<DiagramBlockProps & { kind: DiagramKind }> =
           appears in a node label) can never wrap a <mark> inside the svg. */}
       <div ref={rootRef} className="annotation-exclude my-5 group relative" data-block-id={block.id} data-pinpoint-ignore="" data-diagram-block={kind}>
         {svgReady && !showSource && (
-          <div data-print-hide="" className="absolute top-2 right-2 z-10 flex items-center gap-1 opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity">
+          <div data-print-hide="" className="absolute top-2 right-2 z-10 flex items-center gap-1 opacity-0 group-hover:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100 transition-opacity">
             <button
               type="button"
               onClick={() => setShowSource(true)}
@@ -404,17 +405,21 @@ export const DiagramBlock: React.FC<DiagramBlockProps & { kind: DiagramKind }> =
         )}
       </div>
       {isExpanded && svgReady && typeof document !== 'undefined' && (
-        <Suspense fallback={null}>
-          <DiagramPopout
-            {...viewerProps}
-            open
-            onClose={() => setIsExpanded(false)}
-            title={`${label} diagram`}
-            renderId={`${kind}-${block.id}-popout`}
-            onAskAI={handlePopoutAskAI}
-            dataAttributes={{ 'data-block-id': block.id }}
-          />
-        </Suspense>
+        // A popout chunk that cannot load leaves the inline diagram as it is
+        // and says so under it.
+        <LazyBlockBoundary fallback={(notice) => <div className="mb-5">{notice}</div>}>
+          <Suspense fallback={null}>
+            <DiagramPopout
+              {...viewerProps}
+              open
+              onClose={() => setIsExpanded(false)}
+              title={`${label} diagram`}
+              renderId={`${kind}-${block.id}-popout`}
+              onAskAI={handlePopoutAskAI}
+              dataAttributes={{ 'data-block-id': block.id }}
+            />
+          </Suspense>
+        </LazyBlockBoundary>
       )}
     </>
   );

package/components/EditorAnnotationCard.tsx

@@ -42,7 +42,7 @@ export const EditorAnnotationCard: React.FC<EditorAnnotationCardProps> = ({ anno
         {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"
+            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 group-focus-within: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}>

package/components/ExportModal.tsx

@@ -10,6 +10,7 @@ import React, { useState, useEffect } from 'react';
 import { getObsidianSettings, getEffectiveVaultPath } from '../utils/obsidian';
 import { getBearSettings } from '../utils/bear';
 import { getOctarineSettings } from '../utils/octarine';
+import { getNotionParentPageId, isNotionAvailable } from '../utils/notion';
 import { wrapFeedbackForAgent } from '../utils/parser';
 import { copyTextToClipboard } from '../utils/clipboard';
 import { noteServerSessionMismatch, withServerSession } from '../utils/serverSession';
@@ -20,11 +21,12 @@ interface SaveToNotesPayload {
   obsidian?: object;
   bear?: object;
   octarine?: object;
+  notion?: object;
 }
 
 /** Parsed response from the notes endpoint. */
 interface SaveToNotesResult {
-  results?: Record<string, { success?: boolean; error?: string }>;
+  results?: Record<string, { success?: boolean; error?: string; url?: string }>;
 }
 
 /** Default save-to-notes wire: today's literal POST to /api/save-notes. */
@@ -74,7 +76,7 @@ interface ExportModalProps {
 
 type Tab = 'share' | 'annotations' | 'notes';
 
-type SaveTarget = 'obsidian' | 'bear' | 'octarine';
+type SaveTarget = 'obsidian' | 'bear' | 'octarine' | 'notion';
 type SaveStatus = 'idle' | 'saving' | 'success' | 'error';
 
 export const ExportModal: React.FC<ExportModalProps> = ({
@@ -99,8 +101,9 @@ export const ExportModal: React.FC<ExportModalProps> = ({
   const defaultTab = initialTab || (sharingEnabled ? 'share' : 'annotations');
   const [activeTab, setActiveTab] = useState<Tab>(defaultTab);
   const [copied, setCopied] = useState<'short' | 'full' | 'annotations' | false>(false);
-  const [saveStatus, setSaveStatus] = useState<Record<SaveTarget, SaveStatus>>({ obsidian: 'idle', bear: 'idle', octarine: 'idle' });
+  const [saveStatus, setSaveStatus] = useState<Record<SaveTarget, SaveStatus>>({ obsidian: 'idle', bear: 'idle', octarine: 'idle', notion: 'idle' });
   const [saveErrors, setSaveErrors] = useState<Record<string, string>>({});
+  const [savedUrls, setSavedUrls] = useState<Partial<Record<SaveTarget, string>>>({});
 
   // Reset tab when modal opens
   useEffect(() => {
@@ -112,8 +115,9 @@ export const ExportModal: React.FC<ExportModalProps> = ({
   // Reset save status when modal opens
   useEffect(() => {
     if (isOpen) {
-      setSaveStatus({ obsidian: 'idle', bear: 'idle', octarine: 'idle' });
+      setSaveStatus({ obsidian: 'idle', bear: 'idle', octarine: 'idle', notion: 'idle' });
       setSaveErrors({});
+      setSavedUrls({});
     }
   }, [isOpen]);
 
@@ -127,6 +131,10 @@ export const ExportModal: React.FC<ExportModalProps> = ({
   const isObsidianReady = obsidianSettings.enabled && effectiveVaultPath.trim().length > 0;
   const isBearReady = bearSettings.enabled;
   const isOctarineReady = octarineSettings.enabled && octarineSettings.workspace.trim().length > 0;
+  // Notion shows only when this server offers it (NOTION_TOKEN set, local session).
+  const notionAvailable = isNotionAvailable();
+  const notionParentPageId = getNotionParentPageId();
+  const isNotionReady = notionParentPageId !== null;
 
   const handleCopy = async (text: string, which: 'short' | 'full' | 'annotations') => {
     if (await copyTextToClipboard(text)) {
@@ -162,7 +170,7 @@ export const ExportModal: React.FC<ExportModalProps> = ({
     setSaveStatus(prev => ({ ...prev, [target]: 'saving' }));
     setSaveErrors(prev => { const next = { ...prev }; delete next[target]; return next; });
 
-    const body: { obsidian?: object; bear?: object; octarine?: object } = {};
+    const body: { obsidian?: object; bear?: object; octarine?: object; notion?: object } = {};
 
     if (target === 'obsidian') {
       body.obsidian = {
@@ -183,6 +191,9 @@ export const ExportModal: React.FC<ExportModalProps> = ({
         folder: octarineSettings.folder || 'plannotator',
       };
     }
+    if (target === 'notion' && notionParentPageId) {
+      body.notion = { plan: markdown, parentPageId: notionParentPageId };
+    }
 
     try {
       const data = await onSaveToNotes(body);
@@ -190,6 +201,7 @@ export const ExportModal: React.FC<ExportModalProps> = ({
 
       if (result?.success) {
         setSaveStatus(prev => ({ ...prev, [target]: 'success' }));
+        if (result.url) setSavedUrls(prev => ({ ...prev, [target]: result.url! }));
       } else {
         setSaveStatus(prev => ({ ...prev, [target]: 'error' }));
         setSaveErrors(prev => ({ ...prev, [target]: result?.error || 'Save failed' }));
@@ -205,10 +217,11 @@ export const ExportModal: React.FC<ExportModalProps> = ({
     if (isObsidianReady) targets.push('obsidian');
     if (isBearReady) targets.push('bear');
     if (isOctarineReady) targets.push('octarine');
+    if (isNotionReady) targets.push('notion');
     await Promise.all(targets.map(t => handleSaveToNotes(t)));
   };
 
-  const readyCount = [isObsidianReady, isBearReady, isOctarineReady].filter(Boolean).length;
+  const readyCount = [isObsidianReady, isBearReady, isOctarineReady, isNotionReady].filter(Boolean).length;
 
   // Determine which tabs to show
   const showTabs = sharingEnabled || showNotesTab;
@@ -538,12 +551,69 @@ export const ExportModal: React.FC<ExportModalProps> = ({
                 )}
               </div>
 
+              {/* Notion */}
+              {notionAvailable && (
+                <div className="border border-border rounded-lg p-3 space-y-2">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <span className={`w-2 h-2 rounded-full ${isNotionReady ? 'bg-success' : 'bg-muted-foreground/30'}`} />
+                      <span className="text-sm font-medium">Notion</span>
+                    </div>
+                    {isNotionReady ? (
+                      <button
+                        onClick={() => handleSaveToNotes('notion')}
+                        disabled={saveStatus.notion === 'saving'}
+                        className={`px-3 py-1 rounded-md text-xs font-medium transition-all ${
+                          saveStatus.notion === 'success'
+                            ? 'bg-success/15 text-success'
+                            : saveStatus.notion === 'error'
+                              ? 'bg-destructive/15 text-destructive'
+                              : saveStatus.notion === 'saving'
+                                ? 'bg-muted text-muted-foreground opacity-50'
+                                : 'bg-primary text-primary-foreground hover:opacity-90'
+                        }`}
+                      >
+                        {saveStatus.notion === 'saving' ? 'Saving...'
+                          : saveStatus.notion === 'success' ? 'Saved'
+                          : saveStatus.notion === 'error' ? 'Failed'
+                          : 'Save'}
+                      </button>
+                    ) : (
+                      <span className="text-xs text-muted-foreground">Not configured</span>
+                    )}
+                  </div>
+                  {isNotionReady && (
+                    <div className="text-[10px] text-muted-foreground/70">
+                      Parent page: {notionParentPageId}
+                    </div>
+                  )}
+                  {savedUrls.notion?.startsWith('https://') && (
+                    <a
+                      href={savedUrls.notion}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="block text-[10px] text-primary hover:underline truncate"
+                    >
+                      Open saved page
+                    </a>
+                  )}
+                  {!isNotionReady && (
+                    <div className="text-[10px] text-muted-foreground/70">
+                      Enable in Settings &gt; Saving &gt; Notion
+                    </div>
+                  )}
+                  {saveErrors.notion && (
+                    <div className="text-[10px] text-destructive">{saveErrors.notion}</div>
+                  )}
+                </div>
+              )}
+
               {/* Save All button */}
               {readyCount >= 2 && (
                 <div className="flex justify-end">
                   <button
                     onClick={handleSaveAll}
-                    disabled={saveStatus.obsidian === 'saving' || saveStatus.bear === 'saving' || saveStatus.octarine === 'saving'}
+                    disabled={saveStatus.obsidian === 'saving' || saveStatus.bear === 'saving' || saveStatus.octarine === 'saving' || saveStatus.notion === 'saving'}
                     className="px-3 py-1.5 rounded-md text-xs font-medium bg-primary text-primary-foreground hover:opacity-90 transition-opacity disabled:opacity-50"
                   >
                     Save All

package/components/HostTitle.tsx

@@ -33,9 +33,6 @@ export function getComponentTooltips(): boolean {
   return componentTooltips;
 }
 
-/** How long the pointer rests before a component tooltip opens. */
-const HOST_TITLE_DELAY_MS = 150;
-
 /**
  * Where a tooltip for `trigger` is portaled: the open native `<dialog>` it
  * sits in (a popup in the body is drawn under the dialog's top layer), else
@@ -83,7 +80,6 @@ export function HostTitle({
       content={title}
       side={side}
       wide
-      delayDuration={HOST_TITLE_DELAY_MS}
       escapePassesThrough
       shouldOpen={(trigger) => {
         if (noHover() || (cut && !isTextCut(trigger))) return false;

package/components/ImageAnnotator/Toolbar.tsx

@@ -15,6 +15,8 @@ interface ToolbarProps {
   onRedo?: () => void;
   onClear: () => void;
   onSave: () => void;
+  /** The key named in the ✓'s title: Escape by default; Enter where Escape cancels (`escapeCancels`). */
+  saveKey?: 'Escape' | 'Enter';
 }
 
 const PenIcon = () => (
@@ -85,6 +87,15 @@ const TOOLS: { id: Tool; icon: React.FC; label: string }[] = [
 
 const STROKE_SIZES = [3, 6, 10, 16, 24];
 
+/** The colours' names, for a screen reader (the swatch shows only the colour). */
+const COLOR_NAMES: Record<string, string> = {
+  '#ef4444': 'Red',
+  '#eab308': 'Yellow',
+  '#22c55e': 'Green',
+  '#3b82f6': 'Blue',
+  '#ffffff': 'White',
+};
+
 export const Toolbar: React.FC<ToolbarProps> = ({
   tool,
   color,
@@ -98,6 +109,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
   onRedo,
   onClear,
   onSave,
+  saveKey = 'Escape',
 }) => {
   const currentSizeIndex = STROKE_SIZES.indexOf(strokeSize);
   const canDecrease = currentSizeIndex > 0;
@@ -121,6 +133,8 @@ export const Toolbar: React.FC<ToolbarProps> = ({
             type="button"
             onClick={() => onToolChange(id)}
             title={label}
+            aria-label={label}
+            aria-pressed={tool === id}
             className={`p-1.5 rounded transition-colors ${
               tool === id
                 ? 'bg-primary text-primary-foreground'
@@ -141,6 +155,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
           onClick={() => canDecrease && onStrokeSizeChange(STROKE_SIZES[currentSizeIndex - 1])}
           disabled={!canDecrease}
           title="Smaller stroke"
+          aria-label="Smaller stroke"
           className={`p-1 rounded transition-colors ${
             canDecrease
               ? 'hover:bg-muted text-muted-foreground hover:text-foreground'
@@ -152,6 +167,8 @@ export const Toolbar: React.FC<ToolbarProps> = ({
         <div
           className="w-5 h-5 flex items-center justify-center"
           title={`Stroke size: ${strokeSize}`}
+          role="img"
+          aria-label={`Stroke size: ${strokeSize}`}
         >
           <div
             className="rounded-full"
@@ -167,6 +184,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
           onClick={() => canIncrease && onStrokeSizeChange(STROKE_SIZES[currentSizeIndex + 1])}
           disabled={!canIncrease}
           title="Larger stroke"
+          aria-label="Larger stroke"
           className={`p-1 rounded transition-colors ${
             canIncrease
               ? 'hover:bg-muted text-muted-foreground hover:text-foreground'
@@ -186,6 +204,8 @@ export const Toolbar: React.FC<ToolbarProps> = ({
             key={c}
             type="button"
             onClick={() => onColorChange(c)}
+            aria-label={`Colour: ${COLOR_NAMES[c] ?? c}`}
+            aria-pressed={color === c}
             className={`w-5 h-5 rounded-full border-2 transition-transform ${
               color === c ? 'scale-110 border-foreground' : 'border-transparent hover:scale-105'
             }`}
@@ -202,6 +222,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
         onClick={onUndo}
         disabled={!canUndo}
         title="Undo (Cmd+Z)"
+        aria-label="Undo"
         className={`p-1.5 rounded transition-colors ${
           canUndo
             ? 'hover:bg-muted text-muted-foreground hover:text-foreground'
@@ -217,6 +238,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
           onClick={onRedo}
           disabled={!canRedo}
           title="Redo (Cmd+Shift+Z)"
+          aria-label="Redo"
           className={`p-1.5 rounded transition-colors ${
             canRedo
               ? 'hover:bg-muted text-muted-foreground hover:text-foreground'
@@ -232,6 +254,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
         type="button"
         onClick={onClear}
         title="Clear all"
+        aria-label="Clear all"
         className="p-1.5 rounded transition-colors hover:bg-muted text-muted-foreground hover:text-destructive"
       >
         <ClearIcon />
@@ -245,7 +268,8 @@ export const Toolbar: React.FC<ToolbarProps> = ({
       <button
         type="button"
         onClick={onSave}
-        title="Save (Esc)"
+        title={saveKey === 'Enter' ? 'Save (Enter)' : 'Save (Esc)'}
+        aria-label="Save"
         className="shrink-0 p-1.5 rounded transition-colors bg-success text-success-foreground hover:opacity-90"
       >
         <CheckIcon />

package/components/ImageAnnotator/index.tsx

@@ -20,6 +20,14 @@ interface ImageAnnotatorProps {
   onClose: () => void;
   /** Pre-populated image name (derived from filename) */
   initialName?: string;
+  /**
+   * Optional: Escape cancels (closes without accepting) and a click outside
+   * closes only an empty drawing; Enter and the ✓ accept. Absent: Escape,
+   * Enter and a click outside all accept, exactly as before.
+   */
+  escapeCancels?: boolean;
+  /** Optional: the line under the image in place of "Press Esc or Enter or click outside to accept". */
+  hint?: React.ReactNode;
 }
 
 export const ImageAnnotator: React.FC<ImageAnnotatorProps> = ({
@@ -28,6 +36,8 @@ export const ImageAnnotator: React.FC<ImageAnnotatorProps> = ({
   onAccept,
   onClose,
   initialName = '',
+  escapeCancels = false,
+  hint,
 }) => {
   const [state, setState] = useState<StrokeHistoryState>(DEFAULT_STROKE_HISTORY_STATE);
   const [saving, setSaving] = useState(false);
@@ -170,14 +180,19 @@ export const ImageAnnotator: React.FC<ImageAnnotatorProps> = ({
       },
       save: {
         when: (event) => isOpen && !saving && !keyboardTargetIsInput(event),
-        handle: () => { void handleAccept(); },
+        handle: (event) => {
+          if (escapeCancels && event.key === 'Escape') onClose();
+          else void handleAccept();
+        },
       },
     },
   });
 
   const handleBackdropClick = (e: React.MouseEvent) => {
     if (e.target === e.currentTarget) {
-      handleAccept();
+      // With escapeCancels, a click outside never takes a drawing away: it closes an empty one only.
+      if (!escapeCancels) handleAccept();
+      else if (state.strokes.length === 0) onClose();
     }
   };
 
@@ -209,6 +224,7 @@ export const ImageAnnotator: React.FC<ImageAnnotatorProps> = ({
           onRedo={handleRedo}
           onClear={handleClear}
           onSave={handleAccept}
+          saveKey={escapeCancels ? 'Enter' : 'Escape'}
         />
 
         <Canvas
@@ -250,8 +266,12 @@ export const ImageAnnotator: React.FC<ImageAnnotatorProps> = ({
         )}
 
         {/* Accept hint */}
-        <div className="text-xs text-muted-foreground">
-          Press <kbd className="px-1.5 py-0.5 bg-muted rounded text-foreground">Esc</kbd> or <kbd className="px-1.5 py-0.5 bg-muted rounded text-foreground">Enter</kbd> or click outside to accept
+        <div className="text-xs text-muted-foreground" data-pn-image-annotator-hint>
+          {hint ?? (
+            <>
+              Press <kbd className="px-1.5 py-0.5 bg-muted rounded text-foreground">Esc</kbd> or <kbd className="px-1.5 py-0.5 bg-muted rounded text-foreground">Enter</kbd> or click outside to accept
+            </>
+          )}
         </div>
       </div>