@plannotator/ui 0.30.0 → 0.32.0

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/GraphvizBlock.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useState, useEffect, useCallback } from 'react';
 import { createPortal } from 'react-dom';
-import { instance } from '@viz-js/viz';
+import type { Viz } from '@viz-js/viz';
 import type { Block } from '../types';
 
 interface ViewBox {
@@ -14,13 +14,52 @@ const ZOOM_STEP = 0.25;
 const MIN_ZOOM = 0.25;
 const MAX_ZOOM = 8;
 
-let vizInstancePromise: ReturnType<typeof instance> | null = null;
-
-function getVizInstance() {
-  vizInstancePromise ??= instance();
+/**
+ * The Graphviz engine (about 1.2 MB of Emscripten JS) is imported inside the
+ * render effect, not statically, so a host that bundles by route only fetches
+ * it when a dot fence is on the page. WASM instantiation was already deferred
+ * to first render; in Plannotator's single-file builds the import is inlined
+ * and resolves in a microtask ahead of a render that was already asynchronous.
+ */
+const loadVizInstance = (): Promise<Viz> => import('@viz-js/viz').then((m) => m.instance());
+
+let vizLoader = loadVizInstance;
+let vizInstancePromise: Promise<Viz> | null = null;
+
+/**
+ * Delay before the one automatic re-attempt after a failed engine import.
+ * Only chunking hosts can fail here (a single-file build never fetches).
+ */
+let runtimeRetryDelayMs = 750;
+
+/**
+ * Memoized engine. A rejected load is dropped from the memo so the next call
+ * (the automatic re-attempt, a later mount, or the Retry button) issues a
+ * fresh import() instead of replaying the cached rejection.
+ */
+function getVizInstance(): Promise<Viz> {
+  if (!vizInstancePromise) {
+    const attempt = vizLoader().catch((err: unknown) => {
+      if (vizInstancePromise === attempt) vizInstancePromise = null;
+      throw err;
+    });
+    vizInstancePromise = attempt;
+  }
   return vizInstancePromise;
 }
 
+/** Test hook: stand in for the engine import and shorten the retry delay. */
+export function __setVizLoaderForTests(
+  loader: (() => Promise<Viz>) | undefined,
+  options?: { retryDelayMs?: number },
+): void {
+  vizLoader = loader ?? loadVizInstance;
+  vizInstancePromise = null;
+  runtimeRetryDelayMs = options?.retryDelayMs ?? 750;
+}
+
+const wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));
+
 function parseViewBox(svgEl: SVGSVGElement): ViewBox | null {
   const raw = svgEl.getAttribute('viewBox');
   if (!raw) return null;
@@ -107,6 +146,11 @@ export const GraphvizBlock: React.FC<{ block: Block }> = ({ block }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [svg, setSvg] = useState('');
   const [error, setError] = useState<string | null>(null);
+  // True when the failure was the engine import itself (a chunking host's
+  // fetch), which is the only failure a Retry can change; a dot syntax error
+  // keeps the panel exactly as it always was.
+  const [runtimeUnavailable, setRuntimeUnavailable] = useState(false);
+  const [retryToken, setRetryToken] = useState(0);
   const [showSource, setShowSource] = useState(false);
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -158,8 +202,28 @@ export const GraphvizBlock: React.FC<{ block: Block }> = ({ block }) => {
     let cancelled = false;
 
     const renderDiagram = async () => {
+      let viz: Viz;
+      try {
+        try {
+          viz = await getVizInstance();
+        } catch {
+          // Transient chunk failure on a chunking host: one automatic
+          // re-attempt with a fresh import() after a short delay. In a
+          // single-file build the first await never rejects, so this branch
+          // is unreachable there and the success path is unchanged.
+          await wait(runtimeRetryDelayMs);
+          if (cancelled) return;
+          viz = await getVizInstance();
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : 'Failed to render diagram');
+          setRuntimeUnavailable(true);
+          setSvg('');
+        }
+        return;
+      }
       try {
-        const viz = await getVizInstance();
         const renderedSvg = await viz.renderString(block.content, { format: 'svg' });
         const cleaned = renderedSvg
           .replace(/ width="[^"]*"/, ' width="100%"')
@@ -177,10 +241,12 @@ export const GraphvizBlock: React.FC<{ block: Block }> = ({ block }) => {
           naturalBoundsRef.current = parseViewBoxFromMarkup(cleaned);
           setSvg(cleaned);
           setError(null);
+          setRuntimeUnavailable(false);
         }
       } catch (err) {
         if (!cancelled) {
           setError(err instanceof Error ? err.message : 'Failed to render diagram');
+          setRuntimeUnavailable(false);
           setSvg('');
         }
       }
@@ -191,7 +257,7 @@ export const GraphvizBlock: React.FC<{ block: Block }> = ({ block }) => {
     return () => {
       cancelled = true;
     };
-  }, [block.content]);
+  }, [block.content, retryToken]);
 
   useEffect(() => {
     zoomLevelRef.current = 1;
@@ -362,6 +428,19 @@ export const GraphvizBlock: React.FC<{ block: Block }> = ({ block }) => {
             <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
           </svg>
           <span className="text-xs text-destructive font-medium">Graphviz Error</span>
+          {runtimeUnavailable && (
+            <button
+              type="button"
+              onClick={() => {
+                setError(null);
+                setRetryToken((token) => token + 1);
+              }}
+              className="ml-auto rounded-md border border-destructive/30 px-2 py-0.5 text-xs text-destructive hover:bg-destructive/10"
+              title="Retry loading the diagram renderer"
+            >
+              Retry
+            </button>
+          )}
         </div>
         <pre className="p-3 text-xs text-destructive/80 overflow-x-auto">{error}</pre>
         <pre className="p-3 text-xs text-muted-foreground bg-muted/30 border-t border-border/30 overflow-x-auto">

package/components/HtmlSurfaceControls.tsx

@@ -0,0 +1,170 @@
+/**
+ * Header controls for a raw-HTML or live-app annotation surface: the eye
+ * (show/hide the floating tools over the page), the optional refresh, and
+ * the pen (Annotate/Interact toggle). Presentation only; every state lives
+ * in the host. Each control renders only when its handler is passed, so a
+ * read-only document can show the eye without a pen.
+ *
+ * The markup, data attributes (`data-html-tools-toggle`, `data-html-refresh`,
+ * `data-html-annotate-toggle`), aria state and the pixel-stable pen border
+ * are the exact ones Plannotator's header shipped with; hosts get the same
+ * control, and `labels` overrides the strings without touching the DOM.
+ */
+
+/** String overrides. Every key optional; defaults are Plannotator's strings. */
+export interface HtmlSurfaceControlLabels {
+  /** Pen title while Annotate is armed. */
+  annotateTitle?: string;
+  /** Pen title while in Interact mode. */
+  interactTitle?: string;
+  /** Pen aria-label while armed. Default: none (the title carries the name). */
+  annotateLabel?: string;
+  /** Pen aria-label while in Interact mode. Default: none. */
+  interactLabel?: string;
+  /** Eye title and screen-reader text while the tools are visible. */
+  hideTools?: string;
+  /** Eye title and screen-reader text while the tools are hidden. */
+  showTools?: string;
+  /** Refresh visible text while idle. */
+  refresh?: string;
+  /** Refresh visible text while a refresh is in flight. */
+  refreshing?: string;
+  /** Refresh title and aria-label while idle. */
+  refreshTitle?: string;
+  /** Refresh title and aria-label while a refresh is in flight. */
+  refreshingTitle?: string;
+}
+
+export const DEFAULT_HTML_SURFACE_CONTROL_LABELS: Required<
+  Omit<HtmlSurfaceControlLabels, 'annotateLabel' | 'interactLabel'>
+> = {
+  annotateTitle: 'Annotate mode: click an element or select text to comment. Esc to interact',
+  interactTitle: 'Interact mode: clicks reach the page (text selection still comments). Click to annotate',
+  hideTools: 'Hide tools',
+  showTools: 'Show tools',
+  refresh: 'Refresh',
+  refreshing: 'Refreshing',
+  refreshTitle: 'Refresh document',
+  refreshingTitle: 'Refreshing document',
+};
+
+export interface HtmlSurfaceControlsProps {
+  /** Whether Annotate is armed (pen pressed). */
+  armed: boolean;
+  /** Flip Annotate/Interact. The pen renders only when provided. */
+  onToggleArmed?: () => void;
+  /** Whether the floating tools over the page are hidden (eye-off). */
+  toolsHidden?: boolean;
+  /** Flip the tools. The eye (and the refresh beside it) render only when provided. */
+  onToggleTools?: () => void;
+  /** Whether a refresh is offered for this document. */
+  canRefresh?: boolean;
+  onRefresh?: () => void;
+  isRefreshing?: boolean;
+  /** Compact touch shells put these actions in a menu instead: render nothing. */
+  compact?: boolean;
+  labels?: HtmlSurfaceControlLabels;
+}
+
+export function HtmlSurfaceControls({
+  armed,
+  onToggleArmed,
+  toolsHidden = false,
+  onToggleTools,
+  canRefresh = false,
+  onRefresh,
+  isRefreshing = false,
+  compact = false,
+  labels,
+}: HtmlSurfaceControlsProps) {
+  if (compact) return null;
+  const text = { ...DEFAULT_HTML_SURFACE_CONTROL_LABELS, ...labels };
+  const penLabel = armed ? labels?.annotateLabel : labels?.interactLabel;
+  return (
+    <>
+      {/* Show/hide tools: removes ALL floating chrome (sidebar tongue tabs +
+          the comment/attachments cluster) from the DOM, leaving nothing over
+          the page. Sits left of the pen; this button is the only way back,
+          so it never hides itself. Eye = tools visible, eye-off = hidden. */}
+      {onToggleTools && (
+        <div className="ml-1 flex items-center gap-0.5">
+          {canRefresh && onRefresh && (
+            <button
+              type="button"
+              data-html-refresh
+              // aria-disabled rather than disabled: a disabled control drops
+              // keyboard focus to body when activated. useHtmlRefresh already
+              // dedups in-flight requests, so an extra click is harmless.
+              onClick={isRefreshing ? undefined : onRefresh}
+              aria-disabled={isRefreshing}
+              className="flex items-center gap-1.5 rounded px-1.5 py-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground aria-disabled:cursor-wait aria-disabled:opacity-70"
+              title={isRefreshing ? text.refreshingTitle : text.refreshTitle}
+              aria-label={isRefreshing ? text.refreshingTitle : text.refreshTitle}
+            >
+              <svg
+                aria-hidden="true"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className={`h-3.5 w-3.5 ${isRefreshing ? 'animate-spin motion-reduce:animate-none' : ''}`}
+              >
+                <path d="M20 11a8.1 8.1 0 0 0-15.5-2M4 4v5h5" />
+                <path d="M4 13a8.1 8.1 0 0 0 15.5 2M20 20v-5h-5" />
+              </svg>
+              <span className="hidden sm:inline">{isRefreshing ? text.refreshing : text.refresh}</span>
+            </button>
+          )}
+          <button
+            type="button"
+            data-html-tools-toggle
+            onClick={onToggleTools}
+            aria-pressed={toolsHidden}
+            className="cursor-pointer rounded-md border border-transparent p-1.5 text-xs font-medium text-muted-foreground transition-all hover:bg-muted hover:text-foreground"
+            title={toolsHidden ? text.showTools : text.hideTools}
+          >
+            {toolsHidden ? (
+              <svg aria-hidden="true" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" />
+              </svg>
+            ) : (
+              <svg aria-hidden="true" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+              </svg>
+            )}
+            <span className="sr-only">{toolsHidden ? text.showTools : text.hideTools}</span>
+          </button>
+        </div>
+      )}
+
+      {/* Interact/Annotate toggle. A PEN icon (deliberately not a speech
+          bubble: an annotations-panel bubble beside it must stay
+          distinguishable at a glance, and so must AI sparkles). Always the
+          same icon: armed shows the accent color plus a visible border;
+          unarmed is muted with a TRANSPARENT border of the same width, so
+          the button's box is pixel-identical in both states. */}
+      {onToggleArmed && (
+        <button
+          type="button"
+          data-html-annotate-toggle
+          onClick={onToggleArmed}
+          aria-pressed={armed}
+          className={`p-1.5 rounded-md border text-xs font-medium transition-all cursor-pointer ${
+            armed
+              ? 'border-primary/60 bg-primary/15 text-primary'
+              : 'border-transparent text-muted-foreground hover:text-foreground hover:bg-muted'
+          }`}
+          title={armed ? text.annotateTitle : text.interactTitle}
+          {...(penLabel !== undefined ? { 'aria-label': penLabel } : {})}
+        >
+          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.862 4.487zm0 0L19.5 7.125" />
+          </svg>
+        </button>
+      )}
+    </>
+  );
+}

package/components/InlineMarkdown.tsx

@@ -4,11 +4,13 @@ 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";
 import { CodeFilePicker } from "./CodeFilePicker";
-import { normalizeMathTex, renderMathToHtml } from "./blocks/MathBlock";
+import { normalizeMathTex, renderMathToHtml } from "../utils/math";
+import { useMathRenderer } from "../hooks/useMathRenderer";
 
 export interface DocPreviewResult {
   contents?: string;
@@ -41,6 +43,9 @@ export const resetDocPreviewFetcher = (): void => {
   docPreviewFetcher = defaultDocPreviewFetcher;
 };
 
+/** Read the active fetcher at call time (so a late override is honored). */
+export const getDocPreviewFetcher = (): DocPreviewFetcher => docPreviewFetcher;
+
 /**
  * Decide how a candidate code-file path should render based on validation state:
  *   - 'link'           → clickable, opens directly via onOpenCodeFile(resolvedOrInput)
@@ -308,7 +313,23 @@ const CodeFileIcon = () => (
 
 const InlineMath: React.FC<{ tex: string }> = ({ tex }) => {
   const normalizedTex = normalizeMathTex(tex);
-  const html = useMemo(() => renderMathToHtml(normalizedTex, false), [normalizedTex]);
+  const renderer = useMathRenderer();
+  const html = useMemo(() => renderMathToHtml(normalizedTex, false, renderer), [normalizedTex, renderer]);
+
+  // Same wrapper in both branches (see MathBlock): the placeholder carries the
+  // attributes annotation restore keys on, with the TeX as a text child.
+  if (html === null) {
+    return (
+      <span
+        className="math-inline math-annotatable text-foreground"
+        data-math-tex={normalizedTex}
+        data-math-display="false"
+        aria-label={normalizedTex}
+      >
+        {normalizedTex}
+      </span>
+    );
+  }
 
   return (
     <span
@@ -877,7 +898,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 +1030,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);

package/components/KeyboardShortcuts.tsx

@@ -84,9 +84,17 @@ const inputMethodShortcuts: ShortcutSection = {
   ],
 };
 
+const documentViewShortcuts: ShortcutSection = {
+  title: 'View',
+  shortcuts: [
+    { keys: [modKey, '.'], desc: 'Toggle focus mode', hint: 'Collapses the Contents sidebar and the right-hand panel together; press again to restore whatever was open before. Markdown documents only; HTML pages keep their own layout.' },
+  ],
+};
+
 const annotationShortcuts: ShortcutSection = {
   title: 'Annotations',
   shortcuts: [
+    { keys: [shiftKey, '1-4'], desc: 'Switch annotation mode', hint: '1 Markup, 2 Comment, 3 Redline, 4 Label — matches the toolstrip order' },
     { keys: ['a-z'], desc: 'Start typing comment', hint: 'When the annotation toolbar is open, any letter key opens the comment editor with that character' },
     { keys: [altKey, '1-0'], desc: 'Apply quick label', hint: 'Instantly applies the Nth preset label (0 = 10th). When the label picker is open, bare digits also work.' },
     { keys: [modKey, enter], desc: 'Submit comment' },
@@ -108,6 +116,7 @@ const imageAnnotatorShortcuts: ShortcutSection = {
 };
 
 const sharedPlanEditorShortcuts: ShortcutSection[] = [
+  documentViewShortcuts,
   inputMethodShortcuts,
   annotationShortcuts,
   imageAnnotatorShortcuts,

package/components/Landing.tsx

@@ -50,7 +50,7 @@ export const Landing: React.FC<LandingProps> = ({ onEnter, shareBaseUrl }) => {
           <div className="max-w-2xl">
             <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-xs font-medium mb-6">
               <span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
-              For Claude Code & OpenCode
+              For Claude Code &amp; OpenCode
             </div>
 
             <div className="flex items-center gap-6 mb-4">