@plannotator/ui 0.30.0 → 0.31.0

package/components/CommentPopover.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useRef, useCallback, useId } from 'react';
 import { createPortal } from 'react-dom';
 import type { ImageAttachment } from '../types';
 import { AttachmentsButton } from './AttachmentsButton';
@@ -9,6 +9,12 @@ import { hasUnsavedCommentContent } from '../utils/commentContent';
 import { useSkillReferenceAutocomplete } from '../hooks/useSkillReferenceAutocomplete';
 import { HumanOnlySkillNotice, SkillReferenceMenu } from './SkillReferenceMenu';
 import type { SkillReferenceToken } from '../utils/skillReferences';
+import {
+  hasPrimaryCoarsePointer,
+  shouldUseExpandedComposer,
+  useVisibleViewportBounds,
+  type VisibleViewportBounds,
+} from '../hooks/useViewportEnvironment';
 
 export interface CommentAskAIContext {
   kind: 'general' | 'selection';
@@ -99,19 +105,40 @@ function useCommentDraftSync(draftKey: string | undefined, text: string, images:
   }, [draftKey, text, images]);
 }
 
-function computePosition(anchorRect: DOMRect): { top: number; left: number; flipAbove: boolean; width: number } {
-  const spaceBelow = window.innerHeight - anchorRect.bottom;
-  const flipAbove = spaceBelow < 280;
-  const width = Math.min(MAX_POPOVER_WIDTH, window.innerWidth - 32);
+interface CommentPopoverPosition {
+  top: number;
+  left: number;
+  flipAbove: boolean;
+  width: number;
+  maxHeight: number;
+  requiresExpanded: boolean;
+}
+
+export function computeCommentPopoverPosition(
+  anchorRect: Pick<DOMRect, 'top' | 'right' | 'bottom' | 'left' | 'width'>,
+  bounds: VisibleViewportBounds,
+): CommentPopoverPosition {
+  const spaceBelow = Math.max(0, bounds.bottom - anchorRect.bottom - GAP);
+  const spaceAbove = Math.max(0, anchorRect.top - bounds.top - GAP);
+  const flipAbove = spaceBelow < 280 && spaceAbove > spaceBelow;
+  const width = Math.min(MAX_POPOVER_WIDTH, bounds.width);
 
   const top = flipAbove
     ? anchorRect.top - GAP
     : anchorRect.bottom + GAP;
 
   let left = anchorRect.left + anchorRect.width / 2 - width / 2;
-  left = Math.max(16, Math.min(left, window.innerWidth - width - 16));
-
-  return { top, left, flipAbove, width };
+  left = Math.max(bounds.left, Math.min(left, bounds.right - width));
+  const maxHeight = flipAbove ? spaceAbove : spaceBelow;
+
+  return {
+    top,
+    left,
+    flipAbove,
+    width,
+    maxHeight,
+    requiresExpanded: maxHeight < 280,
+  };
 }
 
 export const CommentPopover: React.FC<CommentPopoverProps> = ({
@@ -137,11 +164,27 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
   captureStrayKeys = false,
   yieldState,
 }) => {
-  const [mode, setMode] = useState<'popover' | 'dialog'>('popover');
+  const visibleBounds = useVisibleViewportBounds(16);
+  const coarsePointer = hasPrimaryCoarsePointer();
+  const prefersExpandedComposer = shouldUseExpandedComposer({
+    bounds: visibleBounds,
+    coarsePointer,
+  });
+  const [mode, setMode] = useState<'popover' | 'dialog'>(() =>
+    prefersExpandedComposer ? 'dialog' : 'popover'
+  );
+  // Dialog mode has two very different origins. Either the viewport PREFERS an
+  // expanded composer (phones, small windows), or the anchor simply has no room
+  // for a popover and the geometry FORCED it. Only the forced kind can bounce:
+  // collapsing recomputes the same geometry and immediately re-expands, which
+  // ate Escape and made the Collapse button a no-op. Track which one we are in.
+  const [dialogIsForced, setDialogIsForced] = useState(false);
+  // A preference-driven dialog is never the forced kind.
+  const forcedDialog = dialogIsForced && !prefersExpandedComposer;
   const initialDraft = draftKey ? draftStore.get(draftKey) : undefined;
   const [text, setText] = useState(initialDraft?.text ?? initialText);
   const [images, setImages] = useState<ImageAttachment[]>(allowImages ? initialDraft?.images ?? [] : []);
-  const [position, setPosition] = useState<{ top: number; left: number; flipAbove: boolean; width: number } | null>(null);
+  const [position, setPosition] = useState<CommentPopoverPosition | null>(null);
   // Direction of an open popover that has scrolled out of view, or null when on-screen.
   const [offscreen, setOffscreen] = useState<'above' | 'below' | null>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -150,6 +193,18 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
   const hasUnsavedContentRef = useRef(hasUnsavedContent);
   hasUnsavedContentRef.current = hasUnsavedContent;
   const { dragPosition, dragHandleProps, wasDragged, reset: resetDrag } = useDraggable(popoverRef);
+  const openingFocusRef = useRef<HTMLElement | null>(
+    typeof document !== 'undefined'
+      && document.activeElement instanceof HTMLElement
+      && document.activeElement !== document.body
+      && document.activeElement !== document.documentElement
+      ? document.activeElement
+      : anchorEl ?? null,
+  );
+
+  useEffect(() => {
+    if (prefersExpandedComposer && mode === 'popover') setMode('dialog');
+  }, [mode, prefersExpandedComposer]);
 
   useEffect(() => {
     const nextDraft = draftKey ? draftStore.get(draftKey) : undefined;
@@ -167,23 +222,29 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
   useEffect(() => { resetDrag(); }, [anchorEl, anchorRect, resetDrag]);
   useEffect(() => { if (mode === 'popover') resetDrag(); }, [mode, resetDrag]);
 
-  // Track anchor position on scroll/resize (popover mode only, not after user drag)
+  // Track anchor position on scroll and observed viewport changes (popover
+  // mode only, not after user drag).
   useEffect(() => {
     if (mode !== 'popover' || wasDragged) return;
 
     const update = () => {
       const rect = anchorEl?.getBoundingClientRect() ?? anchorRect;
-      if (rect) setPosition(computePosition(rect));
+      if (!rect) return;
+      const nextPosition = computeCommentPopoverPosition(rect, visibleBounds);
+      if (nextPosition.requiresExpanded) {
+        setDialogIsForced(true);
+        setMode('dialog');
+        return;
+      }
+      setPosition(nextPosition);
     };
 
     update();
     window.addEventListener('scroll', update, true);
-    window.addEventListener('resize', update);
     return () => {
       window.removeEventListener('scroll', update, true);
-      window.removeEventListener('resize', update);
     };
-  }, [anchorEl, anchorRect, mode, wasDragged]);
+  }, [anchorEl, anchorRect, mode, visibleBounds, wasDragged]);
 
   // Surface a "jump back" arrow when an open popover scrolls out of view.
   // Re-measures whenever the popover repositions (position updates every scroll
@@ -194,14 +255,12 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
       const el = popoverRef.current;
       if (!el) return;
       const rect = el.getBoundingClientRect();
-      if (rect.bottom < 8) setOffscreen('above');
-      else if (rect.top > window.innerHeight - 8) setOffscreen('below');
+      if (rect.bottom < visibleBounds.top) setOffscreen('above');
+      else if (rect.top > visibleBounds.bottom) setOffscreen('below');
       else setOffscreen(null);
     };
     measure();
-    window.addEventListener('resize', measure);
-    return () => window.removeEventListener('resize', measure);
-  }, [position, dragPosition, mode]);
+  }, [position, dragPosition, mode, visibleBounds]);
 
   const scrollToPopover = useCallback(() => {
     anchorEl?.scrollIntoView({ block: 'center', behavior: 'smooth' });
@@ -212,19 +271,56 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
   // renders after `position` is measured, and WebKit fires 0ms timers ahead of
   // that commit, so an effect keyed on mode alone can run before the textarea
   // exists and never focus it (e.g. in WKWebView hosts like Glimpse).
+  const shouldAutoFocus = !coarsePointer || initialText.length > 0 || isGlobal;
   const focusOnMountRef = useCallback((el: HTMLTextAreaElement | null) => {
     textareaRef.current = el;
-    if (!el) return;
+    if (!el || !shouldAutoFocus) return;
     setTimeout(() => {
       if (!el.isConnected) return;
       el.focus();
       el.selectionStart = el.selectionEnd = el.value.length;
     }, 0);
+  }, [shouldAutoFocus]);
+
+  // A touch-opened composer deliberately does not focus the textarea (and
+  // summon the software keyboard), but hardware-keyboard users still need a
+  // coherent focus target and Escape dismissal.
+  useEffect(() => {
+    if (mode !== 'dialog' || shouldAutoFocus) return;
+    const timer = setTimeout(() => {
+      if (!popoverRef.current?.isConnected) return;
+      popoverRef.current.focus({ preventScroll: true });
+    }, 0);
+    return () => clearTimeout(timer);
+  }, [mode, shouldAutoFocus]);
+
+  const restoreOpeningFocus = useCallback(() => {
+    const target = openingFocusRef.current;
+    requestAnimationFrame(() => {
+      if (!target?.isConnected) return;
+      target.focus({ preventScroll: true });
+    });
   }, []);
 
+  const handleClose = useCallback(
+    (focusDisposition: 'restore-opener' | 'preserve-pointer-target' = 'restore-opener') => {
+      if (draftKey) {
+        if (hasUnsavedCommentContent(text, allowImages ? images : [])) {
+          draftStore.set(draftKey, { text, images: allowImages ? images : [] });
+        } else {
+          draftStore.delete(draftKey);
+        }
+      }
+      onClose();
+      if (focusDisposition === 'restore-opener') restoreOpeningFocus();
+    },
+    [allowImages, draftKey, images, onClose, restoreOpeningFocus, text],
+  );
+
   // Click-outside for popover mode
   useEffect(() => {
     if (mode !== 'popover') return;
+    const shiftSelectionActive = Boolean(targetChips?.length);
 
     const handlePointerDown = (e: PointerEvent) => {
       const target = e.target as Node | null;
@@ -234,12 +330,16 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
       const el = target as HTMLElement;
       if (el.closest?.('[data-popover-layer]')) return;
       if (hasUnsavedContentRef.current) return;
-      onClose();
+      // A same-document multi-select target receives pointerdown before click.
+      // Preserve the existing draft so the following Shift-click can extend
+      // it instead of silently replacing it with a new one.
+      if (shiftSelectionActive && e.shiftKey) return;
+      handleClose('preserve-pointer-target');
     };
 
     document.addEventListener('pointerdown', handlePointerDown, true);
     return () => document.removeEventListener('pointerdown', handlePointerDown, true);
-  }, [mode, onClose]);
+  }, [handleClose, mode, targetChips?.length]);
 
   // Focus choreography (multi-select): after a shift-click adds/removes a
   // target, focus returns to the textarea so typing continues uninterrupted.
@@ -347,8 +447,9 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
     if (hasUnsavedContent || canSubmitEmpty) {
       if (draftKey) draftStore.delete(draftKey);
       onSubmit(text, allowImages && images.length > 0 ? images : undefined);
+      restoreOpeningFocus();
     }
-  }, [text, images, onSubmit, draftKey, allowImages, allowEmptySubmit, initialText, hasUnsavedContent]);
+  }, [text, images, onSubmit, draftKey, allowImages, allowEmptySubmit, initialText, hasUnsavedContent, restoreOpeningFocus]);
 
   const handleAskAI = useCallback(async () => {
     const question = text.trim();
@@ -382,15 +483,24 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
     textareaRef,
     enabled: skillReferences,
   });
+  const skillListboxId = `skill-reference-listbox-${useId().replace(/:/g, '')}`;
+  const activeSkillOptionId =
+    skillAc.menu?.activeIndex === null || skillAc.menu?.activeIndex === undefined
+      ? undefined
+      : `${skillListboxId}-option-${skillAc.menu.activeIndex}`;
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (skillAc.onKeyDown(e)) return;
     if (e.key === 'Escape') {
       e.stopPropagation();
       if (mode === 'dialog') {
-        setMode('popover');
+        // Collapsing a forced dialog is geometrically impossible, so Escape
+        // closes it (draft-preserving) instead of being swallowed by the
+        // re-expand.
+        if (prefersExpandedComposer || forcedDialog) handleClose();
+        else setMode('popover');
       } else {
-        onClose();
+        handleClose();
       }
       return;
     }
@@ -413,9 +523,17 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
 
   if (mode === 'dialog') {
     return createPortal(
-      <div data-comment-popover="true" className="fixed inset-0 z-[100] flex items-center justify-center p-4">
+      <div
+        data-comment-popover="true"
+        className="pn-visible-viewport-overlay z-[100] flex items-center justify-center"
+      >
         {/* Backdrop */}
-        <div className="absolute inset-0 bg-background/80 backdrop-blur-sm" />
+        <button
+          type="button"
+          aria-label="Dismiss comment"
+          className="absolute inset-0 bg-background/80 backdrop-blur-sm"
+          onClick={() => handleClose()}
+        />
 
         {/* Dialog card */}
         {/* The expanded dialog deliberately does not yield: it is an explicit
@@ -424,11 +542,21 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
             meaningless there. */}
         <div
           ref={popoverRef}
-          className="relative w-full max-w-xl bg-popover border border-border rounded-xl shadow-2xl flex flex-col"
+          role="dialog"
+          aria-modal="true"
+          aria-label={isGlobal ? 'Global comment' : 'Comment'}
+          tabIndex={-1}
+          className="relative w-full max-w-xl max-h-full min-h-0 bg-popover border border-border rounded-xl shadow-2xl flex flex-col overflow-hidden"
           style={{
             animation: 'comment-dialog-in 0.15s ease-out',
           }}
           onPointerDown={(e) => e.stopPropagation()}
+          onKeyDown={(e) => {
+            if (e.key !== 'Escape') return;
+            e.preventDefault();
+            e.stopPropagation();
+            handleClose();
+          }}
         >
           <style>{`
             @keyframes comment-dialog-in {
@@ -443,15 +571,17 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
               {headerLabel}
             </span>
             <div className="flex items-center gap-1">
+              {!prefersExpandedComposer && !forcedDialog && (
+                <button
+                  onClick={() => { setDialogIsForced(false); setMode('popover'); }}
+                  className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+                  title="Collapse"
+                >
+                  <CollapseIcon />
+                </button>
+              )}
               <button
-                onClick={() => setMode('popover')}
-                className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
-                title="Collapse"
-              >
-                <CollapseIcon />
-              </button>
-              <button
-                onClick={onClose}
+                onClick={() => handleClose()}
                 className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
                 title="Close"
               >
@@ -463,9 +593,10 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
           {chipsRow}
 
           {/* Textarea */}
-          <div className="relative px-4 py-3 flex-1">
+          <div className="relative px-4 py-3 min-h-0 flex-1 overflow-y-auto">
             {skillAc.menu && (
               <SkillReferenceMenu
+                id={skillListboxId}
                 items={skillAc.menu.items}
                 activeIndex={skillAc.menu.activeIndex}
                 onSelect={skillAc.select}
@@ -478,16 +609,19 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
               onKeyDown={handleKeyDown}
               onSelectCaret={skillAc.onSelect}
               placeholder={isGlobal ? 'Add a global comment...' : 'Add a comment...'}
-              sizeClassName="min-h-48 max-h-96"
+              sizeClassName="min-h-32 max-h-full"
               skillReferences={skillReferences}
               tokens={skillAc.referenceTokens}
+              listboxId={skillListboxId}
+              listboxOpen={skillAc.menu !== null}
+              activeOptionId={activeSkillOptionId}
             />
             <HumanOnlySkillNotice skills={skillAc.humanOnlyReferences} />
           </div>
 
           {/* Footer — DOM order sets tab order (Save first); row-reverse keeps the visual layout unchanged */}
-          <div className="flex flex-row-reverse items-center justify-between px-4 py-3 border-t border-border/50">
-            <div className="flex flex-row-reverse items-center gap-3">
+          <div className="flex flex-row-reverse flex-wrap items-center justify-between gap-2 px-4 py-3 border-t border-border/50">
+            <div className="flex flex-row-reverse flex-wrap items-center gap-3">
               <button
                 onClick={handleSubmit}
                 disabled={!canSubmit}
@@ -495,7 +629,9 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
               >
                 {isGlobal ? 'Add' : 'Save'}
               </button>
-              <span className="text-[10px] text-muted-foreground">{submitHint}</span>
+              {!coarsePointer && (
+                <span className="text-[10px] text-muted-foreground">{submitHint}</span>
+              )}
               {onAskAI && (
                 <button
                   onClick={handleAskAI}
@@ -547,11 +683,19 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
         data-comment-popover="true"
       className={`fixed z-[100] bg-popover border border-border rounded-xl shadow-2xl flex flex-col${yieldClass}`}
       style={dragPosition
-        ? { top: dragPosition.top, left: dragPosition.left, width: position.width }
+        ? {
+            top: dragPosition.top,
+            left: dragPosition.left,
+            width: position.width,
+            maxHeight: visibleBounds.height,
+            overflowY: 'auto',
+          }
         : {
             top: position.top,
             left: position.left,
             width: position.width,
+            maxHeight: position.maxHeight,
+            overflowY: 'auto',
             ...(position.flipAbove ? { transform: 'translateY(-100%)' } : {}),
             animation: position.flipAbove
               ? 'comment-popover-in-above 0.15s ease-out'
@@ -579,14 +723,14 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
         </span>
         <div className="flex items-center gap-1">
           <button
-            onClick={() => setMode('dialog')}
+            onClick={() => { setDialogIsForced(false); setMode('dialog'); }}
             className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
             title="Expand"
           >
             <ExpandIcon />
           </button>
           <button
-            onClick={onClose}
+            onClick={() => handleClose()}
             className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
             title="Close"
           >
@@ -601,6 +745,7 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
       <div className="relative px-3 py-2">
         {skillAc.menu && (
           <SkillReferenceMenu
+            id={skillListboxId}
             items={skillAc.menu.items}
             activeIndex={skillAc.menu.activeIndex}
             onSelect={skillAc.select}
@@ -616,6 +761,9 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
           sizeClassName="max-h-64 min-h-[4.5rem]"
           skillReferences={skillReferences}
           tokens={skillAc.referenceTokens}
+          listboxId={skillListboxId}
+          listboxOpen={skillAc.menu !== null}
+          activeOptionId={activeSkillOptionId}
         />
         <HumanOnlySkillNotice skills={skillAc.humanOnlyReferences} />
       </div>
@@ -630,7 +778,9 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
           >
             {isGlobal ? 'Add' : 'Save'}
           </button>
-          <span className="text-[10px] text-muted-foreground">{submitHint}</span>
+          {!coarsePointer && (
+            <span className="text-[10px] text-muted-foreground">{submitHint}</span>
+          )}
           {onAskAI && (
             <button
               onClick={handleAskAI}
@@ -682,6 +832,10 @@ interface ComposerTextareaProps {
   tokens: SkillReferenceToken[];
   /** Off → render the plain pre-feature textarea, byte-for-byte. */
   skillReferences: boolean;
+  /** ARIA relationship to the skill-reference listbox. */
+  listboxId: string;
+  listboxOpen: boolean;
+  activeOptionId?: string;
 }
 
 /**
@@ -706,6 +860,9 @@ const ComposerTextarea: React.FC<ComposerTextareaProps> = ({
   textareaRef,
   tokens,
   skillReferences,
+  listboxId,
+  listboxOpen,
+  activeOptionId,
 }) => {
   const overlayRef = useRef<HTMLDivElement>(null);
   const [composing, setComposing] = useState(false);
@@ -735,6 +892,7 @@ const ComposerTextarea: React.FC<ComposerTextareaProps> = ({
   if (!skillReferences) {
     return (
       <textarea
+        data-pn-mobile-editable="true"
         ref={attachRef}
         value={value}
         onChange={onChange}
@@ -780,6 +938,7 @@ const ComposerTextarea: React.FC<ComposerTextareaProps> = ({
         ref={overlayRef}
         aria-hidden="true"
         data-skill-ref-overlay="true"
+        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}
       >
@@ -787,6 +946,13 @@ const ComposerTextarea: React.FC<ComposerTextareaProps> = ({
         {'\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}

package/components/ConfirmDialog.tsx

@@ -2,7 +2,8 @@
  * Reusable confirmation dialog component
  */
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useId, useRef } from 'react';
+import { Dialog, DialogContent, DialogTitle } from './ui/dialog';
 
 export interface ConfirmDialogProps {
   isOpen: boolean;
@@ -31,6 +32,10 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
   showCancel = false,
   wide = false,
 }) => {
+  const descriptionId = useId();
+  const cancelButtonRef = useRef<HTMLButtonElement>(null);
+  const confirmButtonRef = useRef<HTMLButtonElement>(null);
+
   useEffect(() => {
     if (!isOpen) return;
     const handleKey = (event: KeyboardEvent) => {
@@ -40,11 +45,6 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
         if (onConfirm) onConfirm();
         else onClose();
       }
-      if (event.key === 'Escape') {
-        event.preventDefault();
-        event.stopPropagation();
-        onClose();
-      }
     };
     window.addEventListener('keydown', handleKey);
     return () => window.removeEventListener('keydown', handleKey);
@@ -58,8 +58,8 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
   };
 
   const buttonColors = {
-    info: 'bg-primary text-primary-foreground hover:opacity-90',
-    warning: 'bg-warning text-warning-foreground hover:opacity-90',
+    info: 'bg-primary text-primary-foreground [@media(hover:hover)_and_(pointer:fine)]:hover:opacity-90',
+    warning: 'bg-warning text-warning-foreground [@media(hover:hover)_and_(pointer:fine)]:hover:opacity-90',
   };
 
   const icons = {
@@ -76,40 +76,54 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
   };
 
   return (
-    <div
-      className="fixed inset-0 z-[100] flex items-center justify-center bg-background/80 backdrop-blur-sm p-4"
-      data-plannotator-confirm-dialog="true"
+    <Dialog
+      open={isOpen}
+      disablePointerDismissal
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
     >
-      <div
-        role="dialog"
-        aria-modal="true"
-        className={`bg-card border border-border rounded-xl w-full shadow-2xl p-6 ${wide ? 'max-w-md' : 'max-w-sm'}`}
+      <DialogContent
+        hideClose
+        aria-describedby={descriptionId}
+        initialFocus={() => (showCancel ? cancelButtonRef.current : confirmButtonRef.current)}
+        backdropClassName="bg-background/80 backdrop-blur-sm"
+        className={`bg-card text-foreground rounded-xl shadow-2xl p-6 transition-none ${wide ? 'max-w-md' : 'max-w-sm'}`}
+        data-plannotator-confirm-dialog="true"
       >
         <div className="flex items-center gap-3 mb-4">
-          <div className={`w-10 h-10 rounded-full flex items-center justify-center ${iconColors[variant]}`}>
+          <div className={`w-10 h-10 shrink-0 rounded-full flex items-center justify-center ${iconColors[variant]}`}>
             {icons[variant]}
           </div>
-          <h3 className="font-semibold">{title}</h3>
+          <DialogTitle className="font-semibold tracking-normal">{title}</DialogTitle>
         </div>
-        <div className="text-sm text-muted-foreground mb-2">
-          {message}
-        </div>
-        {subMessage && (
-          <div className="text-xs text-muted-foreground mb-6">
-            {subMessage}
+        <div id={descriptionId}>
+          <div className="text-sm text-muted-foreground mb-2">
+            {message}
           </div>
-        )}
-        {!subMessage && <div className="mb-4" />}
+          {subMessage && (
+            <div className="text-xs text-muted-foreground mb-6">
+              {subMessage}
+            </div>
+          )}
+          {!subMessage && <div className="mb-4" />}
+        </div>
         <div className="flex justify-end gap-2">
           {showCancel && (
             <button
+              ref={cancelButtonRef}
+              type="button"
+              data-pn-touch-target="true"
               onClick={onClose}
-              className="px-4 py-2 rounded-md text-sm font-medium bg-muted text-muted-foreground hover:bg-muted/80 transition-opacity"
+              className="px-4 py-2 rounded-md text-sm font-medium bg-muted text-muted-foreground [@media(hover:hover)_and_(pointer:fine)]:hover:bg-muted/80 transition-opacity"
             >
               {cancelText}
             </button>
           )}
           <button
+            ref={confirmButtonRef}
+            type="button"
+            data-pn-touch-target="true"
             onClick={() => {
               if (onConfirm) {
                 onConfirm();
@@ -122,7 +136,7 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
             {confirmText}
           </button>
         </div>
-      </div>
-    </div>
+      </DialogContent>
+    </Dialog>
   );
 };

package/components/InlineMarkdown.tsx

@@ -4,6 +4,7 @@ import { isCodeFilePath, isCodeFilePathStrict, CODE_PATH_BARE_REGEX, parseCodePa
 import { ensureHighlight, highlightToHtml } from "../utils/codeHighlight";
 import { useFenceTheme } from "../hooks/useFenceTheme";
 import { transformPlainText } from "../utils/inlineTransforms";
+import { hasLinkedDocExtension } from "../utils/markdownExtensions";
 import { getImageSrc } from "./ImageThumbnail";
 import { useCodePathValidation, type CodePathValidationContextValue } from "./CodePathValidationContext";
 import type { ValidationEntry } from "../hooks/useValidatedCodePaths";
@@ -877,7 +878,7 @@ export const InlineMarkdown: React.FC<{
       // targets are opaque doc ids, not paths. null → today's rendering.
       const resolution = resolveLinkedDoc?.(target) ?? null;
       const display = resolution?.label || storedLabel || target;
-      const targetPath = /\.(mdx?|txt|html?)$/i.test(target)
+      const targetPath = hasLinkedDocExtension(target)
         ? target
         : `${target}.md`;
 
@@ -1009,7 +1010,7 @@ export const InlineMarkdown: React.FC<{
       // Fragment is stripped before handing to onOpenLinkedDoc (overlay has
       // no anchor-scroll support today).
       const isLocalDoc =
-        /\.(mdx?|txt|html?)(#.*)?$/i.test(linkUrl) &&
+        hasLinkedDocExtension(linkUrl, { allowFragment: true }) &&
         !linkUrl.startsWith("http://") &&
         !linkUrl.startsWith("https://");
       const isCodeFile = !isLocalDoc && isCodeFilePath(linkUrl);