@plannotator/ui 0.30.0 → 0.31.0

package/components/VimTargetReticle.tsx

@@ -4,7 +4,11 @@ import {
   useState,
   type RefObject,
 } from 'react';
-import { useScrollViewport } from '../hooks/useScrollViewport';
+import {
+  addScrollViewportListener,
+  getScrollViewportRect,
+  useScrollViewport,
+} from '../hooks/useScrollViewport';
 import type { SemanticTarget } from '../utils/blockTargeting';
 import {
   createRangeBetweenTextPositions,
@@ -186,7 +190,9 @@ export function VimTargetReticle({
         return;
       }
       const containerRect = container.getBoundingClientRect();
-      const viewportTop = scrollViewport?.getBoundingClientRect().top ?? containerRect.top;
+      const viewportTop = scrollViewport
+        ? getScrollViewportRect(scrollViewport).top
+        : containerRect.top;
       const stickyBottom = container
         .querySelector<HTMLElement>('[data-sticky-actions]')
         ?.getBoundingClientRect()
@@ -205,7 +211,9 @@ export function VimTargetReticle({
 
     update();
     window.addEventListener('resize', scheduleUpdate, { passive: true });
-    scrollViewport?.addEventListener('scroll', scheduleUpdate, { passive: true });
+    const removeScrollListener = scrollViewport
+      ? addScrollViewportListener(scrollViewport, scheduleUpdate)
+      : undefined;
     const resizeObserver = typeof ResizeObserver === 'undefined'
       ? null
       : new ResizeObserver(scheduleUpdate);
@@ -214,7 +222,7 @@ export function VimTargetReticle({
     return () => {
       cancelAnimationFrame(rafRef.current);
       window.removeEventListener('resize', scheduleUpdate);
-      scrollViewport?.removeEventListener('scroll', scheduleUpdate);
+      removeScrollListener?.();
       resizeObserver?.disconnect();
     };
   }, [containerRef, restoredState, scrollViewport, target]);

package/components/ai/DocumentAIChatPanel.tsx

@@ -268,6 +268,7 @@ const GeneralInput: React.FC<{
     <div className="border-t border-border/50 p-2">
       <div className="flex items-end gap-1.5">
         <textarea
+          data-pn-mobile-editable="true"
           ref={textareaRef}
           value={value}
           onChange={(event) => onChange(event.target.value)}

package/components/core/button.tsx

@@ -13,6 +13,12 @@ function cx(...classes: Array<string | false | null | undefined>): string {
   return classes.filter(Boolean).join(' ');
 }
 
+/**
+ * Legacy shared button primitive.
+ *
+ * The visual sizes remain compact, while the shared touch marker expands the
+ * physical target only when a coarse pointer is present.
+ */
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({
   className,
   variant = 'outline',
@@ -22,23 +28,25 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({
   ...props
 }, ref) => (
   <button
+    {...props}
     ref={ref}
     type={type}
+    data-pn-touch-target="true"
+    data-pn-touch-target-icon={size === 'icon' || variant === 'icon' ? 'true' : undefined}
     className={cx(
       'inline-flex items-center justify-center gap-2 rounded-md text-xs font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50',
       size === 'sm' && 'h-8 px-2.5',
       size === 'md' && 'h-9 px-3',
       size === 'icon' && 'h-8 w-8',
-      variant === 'primary' && 'bg-primary text-primary-foreground hover:opacity-90',
-      variant === 'outline' && 'border border-border bg-card text-foreground hover:bg-muted',
-      variant === 'ghost' && 'text-muted-foreground hover:bg-muted hover:text-foreground',
+      variant === 'primary' && 'bg-primary text-primary-foreground [@media(hover:hover)_and_(pointer:fine)]:hover:opacity-90',
+      variant === 'outline' && 'border border-border bg-card text-foreground [@media(hover:hover)_and_(pointer:fine)]:hover:bg-muted',
+      variant === 'ghost' && 'text-muted-foreground [@media(hover:hover)_and_(pointer:fine)]:hover:bg-muted [@media(hover:hover)_and_(pointer:fine)]:hover:text-foreground',
       variant === 'icon' && (active
         ? 'border border-primary/50 bg-primary/10 text-primary'
-        : 'border border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground'),
-      variant === 'danger' && 'border border-border bg-background text-muted-foreground hover:border-destructive/50 hover:bg-destructive/10 hover:text-destructive',
+        : 'border border-border bg-background text-muted-foreground [@media(hover:hover)_and_(pointer:fine)]:hover:bg-muted [@media(hover:hover)_and_(pointer:fine)]:hover:text-foreground'),
+      variant === 'danger' && 'border border-border bg-background text-muted-foreground [@media(hover:hover)_and_(pointer:fine)]:hover:border-destructive/50 [@media(hover:hover)_and_(pointer:fine)]:hover:bg-destructive/10 [@media(hover:hover)_and_(pointer:fine)]:hover:text-destructive',
       className
     )}
-    {...props}
   />
 ));
 Button.displayName = 'Button';

package/components/html-viewer/HtmlViewer.tsx

@@ -29,7 +29,6 @@ import {
   type CommentAskAIHandler,
   type CommentTargetChip,
 } from "../CommentPopover";
-import { FloatingQuickLabelPicker } from "../FloatingQuickLabelPicker";
 import { VimKeyHud } from "../VimKeyHud";
 import type { ViewerHandle } from "../Viewer";
 import {
@@ -38,7 +37,12 @@ import {
   type ComposerYieldState,
 } from "./composerYield";
 import { buildSyncNumbering } from "./annotationNumbering";
-import { useHtmlAnnotation } from "./useHtmlAnnotation";
+import {
+  MAX_PAGE_URL_LENGTH,
+  rejectsLiveMessage,
+  useHtmlAnnotation,
+  type HtmlLiveSession,
+} from "./useHtmlAnnotation";
 import {
   THEME_TOKENS,
   buildSrcdocInjection,
@@ -138,6 +142,17 @@ function parseVimBridgeCopy(value: unknown): string | null {
 /** Inputs for the sandboxed raw-HTML viewer and its parent-side annotation UI. */
 export interface HtmlViewerProps {
   rawHtml: string;
+  /** Live proxied-app mode: render `src` (no sandbox, no srcdoc) instead of
+   *  rawHtml. The caller must also set `fullViewport` and `liveSession`. */
+  src?: string;
+  /** Live session credentials paired with `src`: proxy origin + per-session
+   *  token, validated on every inbound message and stamped on every post. */
+  liveSession?: HtmlLiveSession;
+  /** Current page (pathname + search) in a live multi-page session. Restore
+   *  filters annotations to this page; changing it re-applies the filter. */
+  currentPageUrl?: string;
+  /** Live-mode page navigation reports (ready pageUrl + page-change). */
+  onPageChange?: (pageUrl: string) => void;
   annotations: Annotation[];
   onAddAnnotation: (ann: Annotation) => void;
   onSelectAnnotation: (id: string | null) => void;
@@ -145,6 +160,18 @@ export interface HtmlViewerProps {
   mode: EditorMode;
   /** Input method: 'drag' = text selection, 'pinpoint' = click an element. */
   inputMethod: InputMethod;
+  /** Interact/Annotate toggle for HTML and live-app surfaces. While false
+   *  the bridge keeps clicks native (no pinpoint capture, no hover outline)
+   *  and clicks/forms/navigation reach the page untouched. Text
+   *  drag-selection commenting stays live in BOTH modes, and committed
+   *  markers stay visible and clickable in BOTH modes. Default true (armed)
+   *  on both surface kinds. */
+  annotateModeActive?: boolean;
+  /** Esc final rung (bridge-side or the parent-side listener here): the user
+   *  asked to leave Annotate for Interact. The host owns the mode state. */
+  onAnnotateModeExit?: () => void;
+  /** Mod+Shift+A pressed while focus lived inside the iframe. */
+  onAnnotateModeToggle?: () => void;
   /** Opt-in Vim-style keyboard selection. Default false for compatibility. */
   vimModeEnabled?: boolean;
   /** Replace the iframe-local compact badge with the shared live key HUD. */
@@ -189,12 +216,19 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
   (
     {
       rawHtml,
+      src,
+      liveSession,
+      currentPageUrl,
+      onPageChange,
       annotations,
       onAddAnnotation,
       onSelectAnnotation,
       selectedAnnotationId,
       mode,
       inputMethod,
+      annotateModeActive = true,
+      onAnnotateModeExit,
+      onAnnotateModeToggle,
       vimModeEnabled = false,
       vimHudEnabled = false,
       vimHudKeyPanelEnabled = true,
@@ -233,11 +267,44 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
       contextText: string;
     } | null>(null);
 
+    // Live proxied-app mode: the iframe navigates a real origin, so the
+    // srcdoc pipeline is skipped entirely and its messages carry credentials.
+    const liveMode = !!src;
+    const liveSessionRef = useRef<HtmlLiveSession | null>(liveSession ?? null);
+    liveSessionRef.current = liveSession ?? null;
+    const onPageChangeRef = useRef(onPageChange);
+    onPageChangeRef.current = onPageChange;
+    const onAnnotateModeExitRef = useRef(onAnnotateModeExit);
+    onAnnotateModeExitRef.current = onAnnotateModeExit;
+    const onAnnotateModeToggleRef = useRef(onAnnotateModeToggle);
+    onAnnotateModeToggleRef.current = onAnnotateModeToggle;
+
+    /** Single choke point for direct-to-bridge posts: live sessions get the
+     *  token + concrete targetOrigin, srcdoc keeps "*" and no token. */
+    const postToBridge = useCallback((msg: Record<string, unknown>) => {
+      const win = iframeRef.current?.contentWindow;
+      if (!win) return;
+      const live = liveSessionRef.current;
+      if (live) {
+        // Browsers silently drop posts whose targetOrigin does not match the
+        // receiving window (mid-navigation frames); some DOM environments
+        // throw instead, so align with the browser semantics explicitly.
+        try {
+          win.postMessage({ ...msg, token: live.token }, live.origin);
+        } catch {
+          // Dropped, matching browser behavior for unmatched target origins.
+        }
+      } else {
+        win.postMessage(msg, "*");
+      }
+    }, []);
+
     // Host theming is opt-in per document (Plannotator-generated artifacts tag
     // themselves); arbitrary HTML renders untouched, like a standalone tab.
-    const hostTheme = useMemo(() => hasHostThemeOptIn(rawHtml), [rawHtml]);
+    const hostTheme = useMemo(() => !liveMode && hasHostThemeOptIn(rawHtml), [liveMode, rawHtml]);
 
     const srcdoc = useMemo(() => {
+      if (liveMode) return undefined; // src mode: the proxy injects the bridge
       const injection = buildSrcdocInjection({
         tokens: readThemeTokens(),
         isLight: isLightTheme(),
@@ -245,11 +312,12 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
         diffActive: !!diffActive,
       });
       return injectIntoHead(rawHtml, injection);
-    }, [rawHtml, hostTheme, diffActive]);
+    }, [liveMode, rawHtml, hostTheme, diffActive]);
 
     const handleResize = useCallback((height: number) => {
+      if (liveMode) return; // live surfaces are full-viewport; height is ignored
       setIframeHeight(height);
-    }, []);
+    }, [liveMode]);
 
     // Composer yield while shift-selecting (multi-target drafts): fade the
     // composer as the pointer approaches, click-through when over it. Pointer
@@ -299,6 +367,8 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
       selectedAnnotationId,
       mode,
       onResize: handleResize,
+      live: liveSession,
+      onPageChange,
       onBridgePointer: handleBridgePointer,
       onUnanchoredChange,
     });
@@ -353,11 +423,36 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
     useEffect(() => {
       function handler(e: MessageEvent<unknown>) {
         if (e.source !== iframeRef.current?.contentWindow) return;
+        // Live sessions verify origin + token before reading anything.
+        const live = liveSessionRef.current;
+        if (live && rejectsLiveMessage(live, e.origin, e.data)) return;
         if (isBridgeReadyMessage(e.data)) {
           setIframeReadyVersion((version) => version + 1);
           setVimBridgePhase("inactive");
           setVimHudCommand(null);
           setVimHelpOpen(false);
+          // Live ready carries the page identity (validated like page-change)
+          // so reloads and cross-page navigations re-anchor the restore filter.
+          if (live && isRecord(e.data)) {
+            const pageUrl = e.data.pageUrl;
+            if (
+              typeof pageUrl === "string"
+              && pageUrl.length > 0
+              && pageUrl.length <= MAX_PAGE_URL_LENGTH
+            ) {
+              onPageChangeRef.current?.(pageUrl);
+            }
+          }
+          return;
+        }
+        // Interact/Annotate mode messages ride the same authenticated path:
+        // live sessions already rejected wrong-origin/tokenless data above.
+        if (isRecord(e.data) && e.data.type === `${PREFIX}annotate-exit`) {
+          onAnnotateModeExitRef.current?.();
+          return;
+        }
+        if (isRecord(e.data) && e.data.type === `${PREFIX}annotate-toggle`) {
+          onAnnotateModeToggleRef.current?.();
           return;
         }
         const vimCopy = parseVimBridgeCopy(e.data);
@@ -408,9 +503,8 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
 
     const handleVimHelpOpenChange = useCallback((open: boolean) => {
       setVimHelpOpen(open);
-      iframeRef.current?.contentWindow?.postMessage(
+      postToBridge(
         { type: `${PREFIX}set-vim-help`, open },
-        "*",
       );
     }, []);
 
@@ -425,9 +519,8 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
       if (document.activeElement === iframe) return false;
       iframe.focus({ preventScroll: true });
       if (document.activeElement !== iframe) return false;
-      iframe.contentWindow?.postMessage(
+      postToBridge(
         { type: `${PREFIX}focus-vim` },
-        "*",
       );
       return true;
     }, [readOnly, vimModeEnabled]);
@@ -438,13 +531,46 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
       focusDocument: focusVimDocument,
     });
 
+    // Restore filter for live multi-page sessions: only annotations made on
+    // the current page (or without page identity) are pushed for restoration.
+    // Numbering (sync-annotations) still ships the FULL list: numbers are
+    // parent-authoritative and global across pages, matching export.
+    const forCurrentPage = useCallback(
+      (anns: Annotation[]) =>
+        anns.filter((a) => !a.pageUrl || a.pageUrl === currentPageUrl),
+      [currentPageUrl],
+    );
+
     useEffect(() => {
       if (iframeReadyVersion === 0) return;
-      if (annotations.length > 0) {
-        hook.applyAnnotations(annotations);
+      const restorable = forCurrentPage(annotations);
+      if (restorable.length > 0) {
+        hook.applyAnnotations(restorable);
       }
     }, [iframeReadyVersion]); // eslint-disable-line react-hooks/exhaustive-deps
 
+    // Live page navigation with a ready iframe: explicitly clear the previous
+    // page's marks, then re-apply the filtered set. Relying on dead anchors to
+    // hide pins would risk cross-page text-search false matches and waste
+    // reconcile budget.
+    const lastAppliedPageRef = useRef<string | undefined>(currentPageUrl);
+    useEffect(() => {
+      if (lastAppliedPageRef.current === currentPageUrl) return;
+      lastAppliedPageRef.current = currentPageUrl;
+      if (iframeReadyVersion === 0) return;
+      postToBridge({ type: `${PREFIX}clear-marks` });
+      const restorable = forCurrentPage(annotations);
+      if (restorable.length > 0) {
+        hook.applyAnnotations(restorable);
+      }
+      // clear-marks drops the bridge's synced numbering; re-establish it so
+      // restored markers keep their export-matching global numbers.
+      postToBridge({
+        type: `${PREFIX}sync-annotations`,
+        annotations: buildSyncNumbering(annotations),
+      });
+    }, [currentPageUrl, iframeReadyVersion]); // eslint-disable-line react-hooks/exhaustive-deps
+
     // Placed-marker numbering is parent-authoritative and matches the
     // numbers exportAnnotations writes into the submitted feedback: the full
     // list INCLUDING globals is numbered by ARRAY position (the export's
@@ -454,9 +580,8 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
     // order is only a pre-sync fallback.
     useEffect(() => {
       if (iframeReadyVersion === 0) return;
-      iframeRef.current?.contentWindow?.postMessage(
+      postToBridge(
         { type: `${PREFIX}sync-annotations`, annotations: buildSyncNumbering(annotations) },
-        "*",
       );
     }, [iframeReadyVersion, annotations]);
 
@@ -464,31 +589,67 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
     // ready (fresh iframe) and whenever the user switches it in the toolstrip.
     useEffect(() => {
       if (iframeReadyVersion === 0) return;
-      iframeRef.current?.contentWindow?.postMessage(
+      postToBridge(
         { type: `${PREFIX}set-input-method`, method: inputMethod },
-        "*",
       );
     }, [iframeReadyVersion, inputMethod]);
 
+    // Tell the bridge whether Annotate is armed. Same re-post pattern as
+    // set-input-method, so the mode survives live page changes / HMR reloads
+    // and bridge re-injection without ever reloading the iframe.
+    useEffect(() => {
+      if (iframeReadyVersion === 0) return;
+      postToBridge(
+        { type: `${PREFIX}set-annotate-mode`, active: annotateModeActive },
+      );
+    }, [iframeReadyVersion, annotateModeActive]);
+
+    // Parent-side Esc rung: with focus outside the iframe the bridge never
+    // sees the keydown. Any open composer/toolbar/picker still closes first —
+    // their state is read from this render's closure, so an Esc that closed
+    // one this same keydown is not double-consumed here.
+    useEffect(() => {
+      if (readOnly || !annotateModeActive || !onAnnotateModeExit) return;
+      const overlayOpen =
+        !!hook.toolbarState || !!hook.commentPopover || !!hook.quickLabelPicker || !!globalCommentPopover;
+      const onKeyDown = (e: KeyboardEvent) => {
+        if (e.key !== 'Escape' || e.defaultPrevented) return;
+        if (overlayOpen) return;
+        // A text field or dialog owns its own Escape.
+        const target = e.target as HTMLElement | null;
+        if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)) return;
+        if (document.querySelector('[data-plannotator-confirm-dialog="true"]')) return;
+        onAnnotateModeExit();
+      };
+      window.addEventListener('keydown', onKeyDown);
+      return () => window.removeEventListener('keydown', onKeyDown);
+    }, [
+      readOnly,
+      annotateModeActive,
+      onAnnotateModeExit,
+      hook.toolbarState,
+      hook.commentPopover,
+      hook.quickLabelPicker,
+      globalCommentPopover,
+    ]);
+
     useEffect(() => {
       if (iframeReadyVersion === 0) return;
       const iframe = iframeRef.current;
-      iframe?.contentWindow?.postMessage(
+      postToBridge(
         {
           type: `${PREFIX}set-vim-mode`,
           enabled: !readOnly && vimModeEnabled,
           hudEnabled: vimHudEnabled,
           mode,
         },
-        "*",
       );
       if (!readOnly && vimModeEnabled && iframe && iframe === document.activeElement) {
         // The initial parent focus can land before the sandbox bridge is ready.
         // Reassert it after configuration so raw HTML enters BLOCK immediately,
         // matching the Markdown surface instead of waiting for the first key.
-        iframe.contentWindow?.postMessage(
+        postToBridge(
           { type: `${PREFIX}focus-vim` },
-          "*",
         );
       }
     }, [iframeReadyVersion, mode, readOnly, vimHudEnabled, vimModeEnabled]);
@@ -506,9 +667,8 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
         && (document.activeElement === document.body || document.activeElement === null)
       ) {
         iframeRef.current?.focus({ preventScroll: true });
-        iframeRef.current?.contentWindow?.postMessage(
+        postToBridge(
           { type: `${PREFIX}focus-vim` },
-          "*",
         );
       }
     }, [hook.commentPopover, hook.quickLabelPicker, hook.toolbarState, readOnly, vimModeEnabled]);
@@ -516,14 +676,13 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
     useEffect(() => {
       if (iframeReadyVersion === 0) return;
       function sendTheme() {
-        iframeRef.current?.contentWindow?.postMessage(
+        postToBridge(
           {
             type: `${PREFIX}theme`,
             tokens: buildThemeTokenPayload(readThemeTokens(), hostTheme),
             isLight: isLightTheme(),
             hostTheme,
           },
-          "*",
         );
       }
       sendTheme();
@@ -538,7 +697,9 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
     useImperativeHandle(ref, () => ({
       removeHighlight: hook.removeHighlight,
       clearAllHighlights: hook.clearAllHighlights,
-      applySharedAnnotations: hook.applyAnnotations,
+      // Shared/draft restores respect the live page filter too.
+      applySharedAnnotations: (anns: Annotation[]) =>
+        hook.applyAnnotations(forCurrentPage(anns)),
     }));
 
     const handleGlobalCommentSubmit = useCallback(
@@ -629,6 +790,20 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
             data-print-region="article"
             className={fullViewport ? "relative overflow-hidden w-full flex-1" : "relative bg-card rounded-xl shadow-xl overflow-hidden w-full"}
           >
+            {/* Armed affordance: a subtle accent ring floats over the iframe
+                while Annotate is armed (hosts that wire the toggle only).
+                Overlaid + pointer-transparent, so it never shifts layout and
+                never eats a click; an inset shadow on the article itself
+                would paint UNDER the covering iframe. */}
+            {!readOnly && annotateModeActive && (onAnnotateModeExit || onAnnotateModeToggle) && (
+              <div
+                aria-hidden
+                data-print-hide
+                data-annotate-armed-ring
+                className="pointer-events-none absolute inset-0 z-10"
+                style={{ boxShadow: "inset 0 0 0 2px color-mix(in srgb, var(--primary) 45%, transparent)" }}
+              />
+            )}
             {/* Full-viewport mode has no card chrome, so float the same controls
                 over the top-right of the iframe (with a backdrop so they read over
                 any HTML). The selection toolbar is portaled separately. */}
@@ -640,10 +815,12 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
                 {actionButtons}
               </div>
             )}
+            {/* Live proxied-app mode navigates a real loopback origin: no
+                sandbox (the user's own app needs cookies, storage, and
+                same-origin XHR) and no srcdoc. Srcdoc mode is unchanged. */}
             <iframe
               ref={iframeRef}
-              srcDoc={srcdoc}
-              sandbox="allow-scripts"
+              {...(src ? { src } : { srcDoc: srcdoc, sandbox: "allow-scripts" })}
               style={{
                 width: "100%",
                 height: fullViewport ? "100%" : `${iframeHeight}px`,
@@ -700,9 +877,12 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
               positionMode="center-above"
               element={hook.toolbarState.element}
               copyText={hook.toolbarState.selectionText}
+              // HTML/live surfaces are comment-only: no Delete, no quick
+              // labels (onQuickLabel deliberately not passed). The markdown
+              // surface keeps the full toolbar.
+              commentOnly
               onAnnotate={hook.handleAnnotate}
               onRequestComment={hook.handleRequestComment}
-              onQuickLabel={hook.handleQuickLabel}
               onClose={hook.handleToolbarClose}
             />,
             document.body,
@@ -716,6 +896,7 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
               contextText={hook.commentPopover.contextText}
               initialText={hook.commentPopover.initialText}
               isGlobal={false}
+              draftKey={`html:${hook.commentPopover.draftKey}`}
               onSubmit={hook.handleCommentSubmit}
               onClose={hook.handleCommentClose}
               skillReferences
@@ -735,18 +916,6 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
             document.body,
           )}
 
-        {/* Quick label picker portal */}
-        {!readOnly && hook.quickLabelPicker &&
-          createPortal(
-            <FloatingQuickLabelPicker
-              anchorEl={hook.quickLabelPicker.anchorEl}
-              cursorHint={hook.quickLabelPicker.cursorHint}
-              onSelect={hook.handleFloatingQuickLabel}
-              onDismiss={hook.handleQuickLabelPickerDismiss}
-            />,
-            document.body,
-          )}
-
         {/* Global comment popover portal */}
         {!readOnly && globalCommentPopover &&
           createPortal(