@plannotator/ui 0.30.0 → 0.31.0

package/hooks/useActiveSection.ts

@@ -1,4 +1,5 @@
 import { useEffect, useState, useRef } from 'react';
+import { getScrollViewportIntersectionRoot } from './useScrollViewport';
 
 /**
  * Track which heading section is currently visible in the viewport
@@ -16,11 +17,12 @@ export function useActiveSection(
   const observerRef = useRef<IntersectionObserver | null>(null);
 
   useEffect(() => {
-    const container = scrollElement ?? containerRef.current;
-    if (!container) return;
+    const contentContainer = containerRef.current ?? scrollElement;
+    const viewport = scrollElement ?? contentContainer;
+    if (!contentContainer || !viewport) return;
     
     // Find all heading elements with data-block-id
-    const headings = container.querySelectorAll('[data-block-type="heading"]');
+    const headings = contentContainer.querySelectorAll('[data-block-type="heading"]');
     if (headings.length === 0) return;
     
     // Track which headings are currently intersecting
@@ -57,7 +59,7 @@ export function useActiveSection(
         }
       },
       {
-        root: container,
+        root: getScrollViewportIntersectionRoot(viewport),
         rootMargin: '-80px 0px -80% 0px', // Activate when heading is near top
         threshold: [0, 0.1, 0.5, 1.0],
       }

package/hooks/useAgentJobs.ts

@@ -37,6 +37,9 @@ export type AgentLaunchParams = {
    *  schema-capable engine and starts a new, normal guide job rather than
    *  mutating the failed one in place. */
   repairOf?: string;
+  /** Reviewer-supplied extra instructions (#1265), appended to the Guided
+   *  Review organizer prompt. Guide launches only; other providers ignore it. */
+  instructions?: string;
 };
 
 /** Does a job belong to the given review context? Jobs launched against a PR

package/hooks/useAnnotationHighlighter.ts

@@ -27,6 +27,7 @@ export interface CommentPopoverState {
   selectedText?: string;
   initialText?: string;
   source?: any;
+  draftKey: string;
 }
 
 export interface QuickLabelPickerState {
@@ -46,6 +47,21 @@ type MathAnnotationSource = {
 const isMathAnnotationSource = (source: any): source is MathAnnotationSource =>
   source?.kind === 'math';
 
+function commentDraftTargetKey(source: any, selectedText: string): string {
+  if (isMathAnnotationSource(source)) {
+    return `math:${source.blockId}:${source.text}`;
+  }
+  const start = source?.startMeta;
+  const end = source?.endMeta;
+  const startKey = start
+    ? `${start.parentTagName}:${start.parentIndex}:${start.textOffset}`
+    : 'unknown';
+  const endKey = end
+    ? `${end.parentTagName}:${end.parentIndex}:${end.textOffset}`
+    : 'unknown';
+  return `selection:${startKey}:${endKey}:${selectedText}`;
+}
+
 type MathAnnotationTarget = {
   element: HTMLElement;
   blockId: string;
@@ -859,6 +875,7 @@ export function useAnnotationHighlighter({
               contextText: source.text.slice(0, 80),
               selectedText: source.text,
               source,
+              draftKey: commentDraftTargetKey(source, source.text),
             });
           } else if (effectiveMode === 'quickLabel') {
             pendingSourceRef.current = source;
@@ -944,6 +961,7 @@ export function useAnnotationHighlighter({
           contextText: source.text.slice(0, 80),
           selectedText: source.text,
           source,
+          draftKey: commentDraftTargetKey(source, source.text),
         });
         return;
       }
@@ -1061,6 +1079,7 @@ export function useAnnotationHighlighter({
         contextText: source.text.slice(0, 80),
         selectedText: source.text,
         source,
+        draftKey: commentDraftTargetKey(source, source.text),
       });
       return;
     }
@@ -1204,6 +1223,7 @@ export function useAnnotationHighlighter({
       selectedText: toolbarState.selectionText,
       initialText: initialChar,
       source: toolbarState.source,
+      draftKey: commentDraftTargetKey(toolbarState.source, toolbarState.selectionText),
     });
     setToolbarState(null);
   };

package/hooks/useIsMobile.ts

@@ -1,5 +1,17 @@
 import { useState, useEffect } from 'react';
 
+/** Maximum CSS viewport width that can enter Plannotator's compact touch shell. */
+export const COMPACT_TOUCH_LAYOUT_MAX_WIDTH = 1024;
+
+/**
+ * Canonical media query for the compact application shell.
+ *
+ * The primary pointer is intentional: `any-pointer: coarse` also matches
+ * touchscreen laptops whose primary mouse or trackpad needs the desktop shell.
+ */
+export const COMPACT_TOUCH_LAYOUT_MEDIA_QUERY =
+  `(max-width: ${COMPACT_TOUCH_LAYOUT_MAX_WIDTH}px) and (pointer: coarse)`;
+
 export function useIsMobile(breakpoint = 768): boolean {
   const [isMobile, setIsMobile] = useState(
     () => typeof window !== 'undefined' ? window.innerWidth < breakpoint : false
@@ -15,3 +27,28 @@ export function useIsMobile(breakpoint = 768): boolean {
 
   return isMobile;
 }
+
+/**
+ * Reports whether the current viewport needs Plannotator's compact touch shell.
+ * Plan and Code Review must share this decision so responsive chrome and scroll
+ * ownership cannot diverge on hybrid devices.
+ */
+export function useCompactTouchLayout(): boolean {
+  const [isCompactTouchLayout, setIsCompactTouchLayout] = useState(
+    () => typeof window !== 'undefined'
+      && window.matchMedia(COMPACT_TOUCH_LAYOUT_MEDIA_QUERY).matches,
+  );
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(COMPACT_TOUCH_LAYOUT_MEDIA_QUERY);
+    const onChange = (event: MediaQueryListEvent) => {
+      setIsCompactTouchLayout(event.matches);
+    };
+
+    mediaQuery.addEventListener('change', onChange);
+    setIsCompactTouchLayout(mediaQuery.matches);
+    return () => mediaQuery.removeEventListener('change', onChange);
+  }, []);
+
+  return isCompactTouchLayout;
+}

package/hooks/useLinkedDoc.ts

@@ -90,6 +90,9 @@ export interface UseLinkedDocOptions {
   /** Let the host initialize/restore editable document state and optionally
    *  override the markdown displayed for this file. */
   onDocumentLoaded?: (doc: LinkedDocLoadData) => string | undefined;
+  /** Notify the host after any fetched or already-loaded destination has been
+   *  activated, including HTML documents and backlinks to the source. */
+  onDocumentActivated?: (doc: LinkedDocLoadData & { filepath: string }) => void;
   /** Read current host-owned text when caching a linked doc. */
   getDocumentMarkdown?: (filepath: string, fallback?: string) => string | undefined;
   /** Let the host restore any state that was suspended while a linked doc was active. */
@@ -185,6 +188,7 @@ export function useLinkedDoc(options: UseLinkedDocOptions): UseLinkedDocReturn {
     sourceConverted,
     onBeforeNavigate,
     onDocumentLoaded,
+    onDocumentActivated,
     getDocumentMarkdown,
     onAfterBack,
   } = options;
@@ -292,6 +296,7 @@ export function useLinkedDoc(options: UseLinkedDocOptions): UseLinkedDocReturn {
     // annotations intact.
     if (sourceFilePath && data.filepath === sourceFilePath && savedPlanState.current) {
       back();
+      onDocumentActivated?.(data);
       return;
     }
 
@@ -364,6 +369,7 @@ export function useLinkedDoc(options: UseLinkedDocOptions): UseLinkedDocReturn {
     });
     setError(null);
     sidebar.open(targetTab ?? "toc");
+    onDocumentActivated?.(data);
 
     // Re-apply cached annotations after DOM settles
     if (cached?.annotations.length) {
@@ -393,6 +399,7 @@ export function useLinkedDoc(options: UseLinkedDocOptions): UseLinkedDocReturn {
     sourceFilePath,
     onBeforeNavigate,
     onDocumentLoaded,
+    onDocumentActivated,
     getDocumentMarkdown,
     back,
   ]);

package/hooks/useScrollViewport.ts

@@ -1,5 +1,79 @@
 import { createContext, useContext, createElement, type ReactNode } from 'react';
 
+/** Return whether this element is the browser's page-scrolling element. */
+export function isDocumentScrollViewport(
+  viewport: HTMLElement | null,
+): boolean {
+  return viewport !== null
+    && viewport.ownerDocument.scrollingElement === viewport;
+}
+
+/** Resolve the document scroller without assuming whether WebKit chose html or body. */
+export function getDocumentScrollViewport(
+  targetDocument: Document = document,
+): HTMLElement | null {
+  return targetDocument.scrollingElement as HTMLElement | null;
+}
+
+/**
+ * Page scrolling needs viewport geometry, not the document element's full
+ * content rect. Element-backed scroll areas retain their incumbent geometry.
+ */
+export function getScrollViewportRect(viewport: HTMLElement): DOMRect {
+  if (!isDocumentScrollViewport(viewport)) return viewport.getBoundingClientRect();
+
+  const targetWindow = viewport.ownerDocument.defaultView;
+  const visualViewport = targetWindow?.visualViewport;
+  const left = visualViewport?.offsetLeft ?? 0;
+  const top = visualViewport?.offsetTop ?? 0;
+  const width = visualViewport?.width ?? targetWindow?.innerWidth ?? viewport.clientWidth;
+  const height = visualViewport?.height ?? targetWindow?.innerHeight ?? viewport.clientHeight;
+  const DOMRectConstructor = targetWindow?.DOMRect ?? DOMRect;
+  return new DOMRectConstructor(left, top, width, height);
+}
+
+export function getScrollViewportTop(viewport: HTMLElement): number {
+  if (!isDocumentScrollViewport(viewport)) return viewport.scrollTop;
+  return viewport.ownerDocument.defaultView?.scrollY ?? viewport.scrollTop;
+}
+
+export function scrollViewportTo(
+  viewport: HTMLElement,
+  options: ScrollToOptions,
+): void {
+  if (!isDocumentScrollViewport(viewport)) {
+    viewport.scrollTo(options);
+    return;
+  }
+  viewport.ownerDocument.defaultView?.scrollTo(options);
+}
+
+export function offsetScrollViewport(viewport: HTMLElement, delta: number): void {
+  if (!isDocumentScrollViewport(viewport)) {
+    viewport.scrollTop += delta;
+    return;
+  }
+  viewport.ownerDocument.defaultView?.scrollBy({ top: delta, behavior: 'auto' });
+}
+
+export function addScrollViewportListener(
+  viewport: HTMLElement,
+  listener: EventListener,
+): () => void {
+  const target: EventTarget = isDocumentScrollViewport(viewport)
+    ? viewport.ownerDocument.defaultView ?? viewport
+    : viewport;
+  target.addEventListener('scroll', listener, { passive: true });
+  return () => target.removeEventListener('scroll', listener);
+}
+
+/** A document scroll uses the browser viewport as its IntersectionObserver root. */
+export function getScrollViewportIntersectionRoot(
+  viewport: HTMLElement,
+): Element | null {
+  return isDocumentScrollViewport(viewport) ? null : viewport;
+}
+
 /**
  * Provides the currently-active scroll viewport element to descendants.
  *

package/hooks/useViewportEnvironment.ts

@@ -0,0 +1,350 @@
+import { useEffect, useMemo, useSyncExternalStore } from 'react';
+
+export interface VisualViewportSnapshot {
+  width: number;
+  height: number;
+  offsetTop: number;
+  offsetLeft: number;
+  scale: number;
+}
+
+export interface ViewportEnvironmentInput {
+  layoutWidth: number;
+  layoutHeight: number;
+  visualViewport?: VisualViewportSnapshot | null;
+}
+
+export interface ViewportEnvironment {
+  width: number;
+  height: number;
+  offsetTop: number;
+  offsetLeft: number;
+  keyboardInset: number;
+}
+
+export interface ViewportEdgeInsets {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+export interface VisibleViewportBounds {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+  width: number;
+  height: number;
+}
+
+const ZERO_ENVIRONMENT: ViewportEnvironment = {
+  width: 0,
+  height: 0,
+  offsetTop: 0,
+  offsetLeft: 0,
+  keyboardInset: 0,
+};
+
+const ZERO_INSETS: ViewportEdgeInsets = {
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+};
+
+const VIEWPORT_PROPERTIES = [
+  '--pn-viewport-width',
+  '--pn-viewport-height',
+  '--pn-viewport-offset-top',
+  '--pn-viewport-offset-left',
+  '--pn-keyboard-inset',
+] as const;
+
+type ViewportProperty = (typeof VIEWPORT_PROPERTIES)[number];
+
+let subscriberCount = 0;
+let stopObserving: (() => void) | null = null;
+let currentEnvironment: ViewportEnvironment | null = null;
+const environmentListeners = new Set<() => void>();
+
+function finiteOr(value: number, fallback: number): number {
+  return Number.isFinite(value) ? value : fallback;
+}
+
+function positiveOr(value: number, fallback: number): number {
+  const finite = finiteOr(value, fallback);
+  return finite > 0 ? finite : fallback;
+}
+
+function rounded(value: number): number {
+  return Math.round(value * 100) / 100;
+}
+
+/**
+ * Converts the visual viewport into application-stage geometry. Pinch zoom is
+ * intentionally represented by offsets only: reshaping the app while a user
+ * zooms and pans would fight accessibility zoom. At the normal scale, browser
+ * chrome and the software keyboard are allowed to reduce the usable stage.
+ */
+export function calculateViewportEnvironment({
+  layoutWidth,
+  layoutHeight,
+  visualViewport,
+}: ViewportEnvironmentInput): ViewportEnvironment {
+  const safeLayoutWidth = Math.max(0, finiteOr(layoutWidth, 0));
+  const safeLayoutHeight = Math.max(0, finiteOr(layoutHeight, 0));
+
+  if (!visualViewport) {
+    return {
+      width: rounded(safeLayoutWidth),
+      height: rounded(safeLayoutHeight),
+      offsetTop: 0,
+      offsetLeft: 0,
+      keyboardInset: 0,
+    };
+  }
+
+  const scale = positiveOr(visualViewport.scale, 1);
+  const offsetTop = Math.max(0, finiteOr(visualViewport.offsetTop, 0));
+  const offsetLeft = Math.max(0, finiteOr(visualViewport.offsetLeft, 0));
+  const isPinchZoomed = Math.abs(scale - 1) > 0.01;
+  if (isPinchZoomed) {
+    return {
+      width: rounded(safeLayoutWidth),
+      height: rounded(safeLayoutHeight),
+      offsetTop: rounded(offsetTop),
+      offsetLeft: rounded(offsetLeft),
+      keyboardInset: 0,
+    };
+  }
+
+  const scaledWidth = positiveOr(visualViewport.width, safeLayoutWidth);
+  const scaledHeight = positiveOr(visualViewport.height, safeLayoutHeight);
+  const availableWidth = Math.max(0, safeLayoutWidth - offsetLeft);
+  const availableHeight = Math.max(0, safeLayoutHeight - offsetTop);
+  const width = safeLayoutWidth > 0 ? Math.min(scaledWidth, availableWidth) : scaledWidth;
+  const height = safeLayoutHeight > 0 ? Math.min(scaledHeight, availableHeight) : scaledHeight;
+
+  return {
+    width: rounded(Math.max(0, width)),
+    height: rounded(Math.max(0, height)),
+    offsetTop: rounded(offsetTop),
+    offsetLeft: rounded(offsetLeft),
+    keyboardInset: rounded(Math.max(0, safeLayoutHeight - offsetTop - height)),
+  };
+}
+
+/**
+ * Converts the observed viewport into usable fixed-position bounds. Padding
+ * and safe-area insets are inputs so positioning remains deterministic and
+ * testable instead of reading CSS environment variables in every overlay.
+ */
+export function calculateVisibleViewportBounds(
+  environment: ViewportEnvironment,
+  edgePadding = 0,
+  insets: Partial<ViewportEdgeInsets> = ZERO_INSETS,
+): VisibleViewportBounds {
+  const padding = Math.max(0, finiteOr(edgePadding, 0));
+  const safeInsets = {
+    top: Math.max(0, finiteOr(insets.top ?? 0, 0)),
+    right: Math.max(0, finiteOr(insets.right ?? 0, 0)),
+    bottom: Math.max(0, finiteOr(insets.bottom ?? 0, 0)),
+    left: Math.max(0, finiteOr(insets.left ?? 0, 0)),
+  };
+  const left = environment.offsetLeft + padding + safeInsets.left;
+  const top = environment.offsetTop + padding + safeInsets.top;
+  const right = Math.max(
+    left,
+    environment.offsetLeft + environment.width - padding - safeInsets.right,
+  );
+  const bottom = Math.max(
+    top,
+    environment.offsetTop + environment.height - padding - safeInsets.bottom,
+  );
+
+  return {
+    top: rounded(top),
+    right: rounded(right),
+    bottom: rounded(bottom),
+    left: rounded(left),
+    width: rounded(Math.max(0, right - left)),
+    height: rounded(Math.max(0, bottom - top)),
+  };
+}
+
+export function shouldUseExpandedComposer({
+  bounds,
+  coarsePointer,
+}: {
+  bounds: VisibleViewportBounds;
+  coarsePointer: boolean;
+}): boolean {
+  return coarsePointer || bounds.width < 640 || bounds.height < 420;
+}
+
+/** Returns whether the device's primary pointing input is coarse. */
+export function hasPrimaryCoarsePointer(targetWindow?: Window): boolean {
+  const resolvedWindow = targetWindow ?? (typeof window === 'undefined' ? undefined : window);
+  if (!resolvedWindow?.matchMedia) return false;
+  return resolvedWindow.matchMedia('(pointer: coarse)').matches;
+}
+
+function readViewportEnvironment(targetWindow: Window): ViewportEnvironment {
+  const visualViewport = targetWindow.visualViewport;
+  return calculateViewportEnvironment({
+    layoutWidth: targetWindow.innerWidth,
+    layoutHeight: targetWindow.innerHeight,
+    visualViewport: visualViewport
+      ? {
+          width: visualViewport.width,
+          height: visualViewport.height,
+          offsetTop: visualViewport.offsetTop,
+          offsetLeft: visualViewport.offsetLeft,
+          scale: visualViewport.scale,
+        }
+      : null,
+  });
+}
+
+function environmentsEqual(
+  left: ViewportEnvironment | null,
+  right: ViewportEnvironment,
+): boolean {
+  return !!left
+    && left.width === right.width
+    && left.height === right.height
+    && left.offsetTop === right.offsetTop
+    && left.offsetLeft === right.offsetLeft
+    && left.keyboardInset === right.keyboardInset;
+}
+
+function getViewportEnvironmentSnapshot(): ViewportEnvironment {
+  if (currentEnvironment) return currentEnvironment;
+  if (typeof window === 'undefined') return ZERO_ENVIRONMENT;
+  currentEnvironment = readViewportEnvironment(window);
+  return currentEnvironment;
+}
+
+function cssValues(environment: ViewportEnvironment): Record<ViewportProperty, string> {
+  return {
+    '--pn-viewport-width': `${environment.width}px`,
+    '--pn-viewport-height': `${environment.height}px`,
+    '--pn-viewport-offset-top': `${environment.offsetTop}px`,
+    '--pn-viewport-offset-left': `${environment.offsetLeft}px`,
+    '--pn-keyboard-inset': `${environment.keyboardInset}px`,
+  };
+}
+
+function startViewportEnvironmentObserver(
+  targetWindow: Window,
+  targetDocument: Document,
+): () => void {
+  const rootStyle = targetDocument.documentElement.style;
+  const previousValues = new Map<ViewportProperty, string>();
+  const writtenValues = new Map<ViewportProperty, string>();
+  for (const property of VIEWPORT_PROPERTIES) {
+    previousValues.set(property, rootStyle.getPropertyValue(property));
+  }
+
+  let animationFrame: number | null = null;
+
+  const write = () => {
+    animationFrame = null;
+    const nextEnvironment = readViewportEnvironment(targetWindow);
+    const changed = !environmentsEqual(currentEnvironment, nextEnvironment);
+    currentEnvironment = nextEnvironment;
+    const nextValues = cssValues(nextEnvironment);
+    for (const property of VIEWPORT_PROPERTIES) {
+      const nextValue = nextValues[property];
+      if (writtenValues.get(property) === nextValue) continue;
+      rootStyle.setProperty(property, nextValue);
+      writtenValues.set(property, nextValue);
+    }
+    if (changed) environmentListeners.forEach(listener => listener());
+  };
+
+  const scheduleWrite = () => {
+    if (animationFrame !== null) return;
+    animationFrame = targetWindow.requestAnimationFrame(write);
+  };
+
+  const visualViewport = targetWindow.visualViewport;
+  targetWindow.addEventListener('resize', scheduleWrite);
+  targetWindow.addEventListener('orientationchange', scheduleWrite);
+  targetWindow.addEventListener('pageshow', scheduleWrite);
+  targetDocument.addEventListener('visibilitychange', scheduleWrite);
+  visualViewport?.addEventListener('resize', scheduleWrite);
+  visualViewport?.addEventListener('scroll', scheduleWrite);
+  write();
+
+  return () => {
+    targetWindow.removeEventListener('resize', scheduleWrite);
+    targetWindow.removeEventListener('orientationchange', scheduleWrite);
+    targetWindow.removeEventListener('pageshow', scheduleWrite);
+    targetDocument.removeEventListener('visibilitychange', scheduleWrite);
+    visualViewport?.removeEventListener('resize', scheduleWrite);
+    visualViewport?.removeEventListener('scroll', scheduleWrite);
+    if (animationFrame !== null) targetWindow.cancelAnimationFrame(animationFrame);
+
+    for (const property of VIEWPORT_PROPERTIES) {
+      const previousValue = previousValues.get(property) ?? '';
+      if (previousValue) rootStyle.setProperty(property, previousValue);
+      else rootStyle.removeProperty(property);
+    }
+  };
+}
+
+function acquireViewportEnvironment(): () => void {
+  if (typeof window === 'undefined' || typeof document === 'undefined') return () => {};
+
+  subscriberCount += 1;
+  if (subscriberCount === 1) {
+    stopObserving = startViewportEnvironmentObserver(window, document);
+  }
+
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    subscriberCount = Math.max(0, subscriberCount - 1);
+    if (subscriberCount !== 0) return;
+    stopObserving?.();
+    stopObserving = null;
+    currentEnvironment = null;
+  };
+}
+
+function subscribeViewportEnvironment(listener: () => void): () => void {
+  environmentListeners.add(listener);
+  const release = acquireViewportEnvironment();
+  return () => {
+    environmentListeners.delete(listener);
+    release();
+  };
+}
+
+/**
+ * Keeps Plannotator's shared viewport CSS properties synchronized without
+ * putting high-frequency browser geometry into React state.
+ */
+export function useViewportEnvironment(): void {
+  useEffect(() => acquireViewportEnvironment(), []);
+}
+
+/**
+ * Reactive bounds for fixed overlays. It shares the root observer and its
+ * animation-frame coalescing, so composer consumers do not add parallel
+ * Visual Viewport listeners.
+ */
+export function useVisibleViewportBounds(edgePadding = 0): VisibleViewportBounds {
+  const environment = useSyncExternalStore(
+    subscribeViewportEnvironment,
+    getViewportEnvironmentSnapshot,
+    () => ZERO_ENVIRONMENT,
+  );
+  return useMemo(
+    () => calculateVisibleViewportBounds(environment, edgePadding),
+    [edgePadding, environment],
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plannotator/ui",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "type": "module",
   "exports": {
     "./components/*": "./components/*.tsx",
@@ -10,6 +10,7 @@
     "./components/goal-setup/*": "./components/goal-setup/*.tsx",
     "./components/ImageAnnotator": "./components/ImageAnnotator/index.tsx",
     "./components/html-viewer": "./components/html-viewer/index.ts",
+    "./components/html-viewer/bridge-script": "./components/html-viewer/bridge-script.ts",
     "./components/sidebar/*": "./components/sidebar/*.tsx",
     "./components/plan-diff/*": "./components/plan-diff/*.tsx",
     "./utils/*": "./utils/*.ts",
@@ -68,7 +69,7 @@
     "@lezer/highlight": "^1.2.3",
     "@pierre/diffs": "1.3.2",
     "@plannotator/atomic-editor": "^0.8.0",
-    "@plannotator/core": "0.23.0",
+    "@plannotator/core": "0.24.0",
     "@plannotator/markdown-editor": "^0.4.0",
     "@plannotator/web-highlighter": "^0.8.1",
     "@tanstack/react-table": "^8.21.3",

package/shortcuts/index.ts

@@ -2,12 +2,15 @@ export * from './core';
 export * from './runtime';
 
 // plan-review scopes
+export { annotationModeShortcuts, useAnnotationModeShortcuts } from './plan-review/annotationMode.shortcuts';
 export { annotationToolbarShortcuts, useAnnotationToolbarShortcuts } from './plan-review/annotationToolbar.shortcuts';
 export { annotationPanelShortcuts, useAnnotationPanelShortcuts } from './plan-review/annotationPanel.shortcuts';
 export { commentPopoverShortcuts } from './plan-review/commentPopover.shortcuts';
 export { imageAnnotatorShortcuts, useImageAnnotatorShortcuts } from './plan-review/imageAnnotator.shortcuts';
 export { inputMethodShortcuts } from './plan-review/inputMethod.shortcuts';
+export { htmlAnnotateShortcuts, useHtmlAnnotateShortcuts } from './plan-review/htmlAnnotate.shortcuts';
 export { viewerShortcuts, useViewerShortcuts } from './plan-review/viewer.shortcuts';
+export { documentViewShortcuts, useDocumentViewShortcuts } from './plan-review/documentView.shortcuts';
 export {
   describeVimSelectionAction,
   isVimSelectionActionId,