@plannotator/ui 0.27.0 → 0.29.0

package/components/ExportModal.tsx

@@ -11,6 +11,7 @@ import { getObsidianSettings, getEffectiveVaultPath } from '../utils/obsidian';
 import { getBearSettings } from '../utils/bear';
 import { getOctarineSettings } from '../utils/octarine';
 import { wrapFeedbackForAgent } from '../utils/parser';
+import { copyTextToClipboard } from '../utils/clipboard';
 import { OverlayScrollArea } from './OverlayScrollArea';
 
 /** POST body shape sent to the notes endpoint (mirrors what the Notes tab builds today). */
@@ -57,6 +58,13 @@ interface ExportModalProps {
   initialTab?: Tab;
   /** Override the save-to-notes wire. Default: POST /api/save-notes (today's behavior). */
   onSaveToNotes?: (payload: SaveToNotesPayload) => Promise<SaveToNotesResult>;
+  /**
+   * Wrap the annotations output for the clipboard Copy button. Annotate
+   * sessions pass a mode-aware wrapper so Copy matches Send Feedback instead
+   * of the plan-deny framing (#1107). Default: plan-deny wrap (today's
+   * plan-review behavior).
+   */
+  wrapCopiedAnnotations?: (feedback: string) => string;
 }
 
 type Tab = 'share' | 'annotations' | 'notes';
@@ -81,6 +89,7 @@ export const ExportModal: React.FC<ExportModalProps> = ({
   isApiMode = false,
   initialTab,
   onSaveToNotes = defaultSaveToNotes,
+  wrapCopiedAnnotations = wrapFeedbackForAgent,
 }) => {
   const defaultTab = initialTab || (sharingEnabled ? 'share' : 'annotations');
   const [activeTab, setActiveTab] = useState<Tab>(defaultTab);
@@ -115,17 +124,16 @@ export const ExportModal: React.FC<ExportModalProps> = ({
   const isOctarineReady = octarineSettings.enabled && octarineSettings.workspace.trim().length > 0;
 
   const handleCopy = async (text: string, which: 'short' | 'full' | 'annotations') => {
-    try {
-      await navigator.clipboard.writeText(text);
+    if (await copyTextToClipboard(text)) {
       setCopied(which);
       setTimeout(() => setCopied(false), 2000);
-    } catch (e) {
-      console.error('Failed to copy:', e);
+    } else {
+      console.error('Failed to copy');
     }
   };
 
   const handleCopyAnnotations = async () => {
-    await handleCopy(wrapFeedbackForAgent(annotationsOutput), 'annotations');
+    await handleCopy(wrapCopiedAnnotations(annotationsOutput), 'annotations');
   };
 
   // Whether the hash URL is large enough to warrant a short URL option
@@ -309,7 +317,7 @@ export const ExportModal: React.FC<ExportModalProps> = ({
                     </button>
                   </div>
                   <p className="text-[10px] text-muted-foreground mt-1">
-                    Encrypted short link. Your plan is end-to-end encrypted before it leaves your browser — not even the server can read it.
+                    Encrypted short link. The browser uploads AES-256-GCM ciphertext; the decryption key stays in the URL fragment.
                   </p>
                 </div>
               ) : isGeneratingShortUrl ? (
@@ -376,13 +384,13 @@ export const ExportModal: React.FC<ExportModalProps> = ({
                 </div>
                 {!shortShareUrl && !isGeneratingShortUrl && !urlIsLarge && (
                   <p className="text-[10px] text-muted-foreground mt-1">
-                    Your plan is encoded entirely in the URL — it never touches a server.
+                    Shared content is compressed, not encrypted, in the URL fragment. The portal request does not include that fragment.
                   </p>
                 )}
               </div>}
 
               <p className="text-xs text-muted-foreground">
-                Only someone with this exact link can view your plan. Short links are end-to-end encrypted — the decryption key is in the URL and never sent to the server.
+                Anyone with the full link can view the shared content, including services used to send the link. Hosted short-link ciphertext expires after 7 days.
               </p>
             </div>
           ) : activeTab === 'notes' && showNotesTab ? (

package/components/GraphvizBlock.tsx

@@ -458,7 +458,7 @@ export const GraphvizBlock: React.FC<{ block: Block }> = ({ block }) => {
 
   const inlineSource = (
     <pre className="rounded-lg text-[13px] overflow-x-auto bg-muted/50 border border-border/30 p-4">
-      <code className={`hljs font-mono language-${block.language ?? 'graphviz'}`}>{block.content}</code>
+      <code className={`pn-code font-mono language-${block.language ?? 'graphviz'}`}>{block.content}</code>
     </pre>
   );
 

package/components/InlineMarkdown.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useRef, useCallback, useEffect, useMemo } from "react";
 import { createPortal } from "react-dom";
-import hljs from "highlight.js";
 import { isCodeFilePath, isCodeFilePathStrict, CODE_PATH_BARE_REGEX, parseCodePath } from "@plannotator/core/code-file";
+import { ensureHighlight, highlightToHtml } from "../utils/codeHighlight";
+import { useFenceTheme } from "../hooks/useFenceTheme";
 import { transformPlainText } from "../utils/inlineTransforms";
 import { getImageSrc } from "./ImageThumbnail";
 import { useCodePathValidation, type CodePathValidationContextValue } from "./CodePathValidationContext";
@@ -93,18 +94,34 @@ const CodeSnippetPreview: React.FC<{
   const end = Math.min(allLines.length, (lineEnd ?? line));
   const snippet = allLines.slice(start, end).join('\n');
 
-  const highlightedLines = useMemo(() => {
-    const lang = extToLanguage(filepath);
-    const lines = snippet.split('\n');
-    return lines.map(line => {
-      try {
-        if (lang) return hljs.highlight(line, { language: lang }).value;
-        return hljs.highlightAuto(line).value;
-      } catch {
-        return line.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-      }
+  const fenceTheme = useFenceTheme();
+  // Bumped once the grammar is attached, to re-run the memo below with the
+  // highlighter warm. Until then the snippet renders as plain text — no
+  // auto-detection, and an unknown extension simply stays plain.
+  const [highlighterGeneration, setHighlighterGeneration] = useState(0);
+  const lang = extToLanguage(filepath);
+
+  useEffect(() => {
+    if (!lang) return;
+    let cancelled = false;
+    void ensureHighlight(lang, fenceTheme).then((ok) => {
+      if (ok && !cancelled) setHighlighterGeneration((n) => n + 1);
     });
-  }, [snippet, filepath]);
+    return () => { cancelled = true; };
+  }, [lang, fenceTheme]);
+
+  const highlightedLines = useMemo(() => {
+    // Highlight the snippet as one unit so multi-line constructs (block
+    // comments, template literals) tokenise correctly, then split back into
+    // rows: the highlighter joins lines with "\n" and never emits one inside a
+    // span, so the split is exact.
+    const html = lang ? highlightToHtml(snippet, lang, fenceTheme) : null;
+    if (html !== null) return html.split('\n');
+    return snippet.split('\n').map(line =>
+      line.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'));
+    // highlighterGeneration is the "grammar just became available" signal.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [snippet, lang, fenceTheme, highlighterGeneration]);
 
   if (!anchorEl) return null;
 
@@ -126,7 +143,7 @@ const CodeSnippetPreview: React.FC<{
         <span>{filepath.split('/').pop()}</span>
         <span className="opacity-60">{lineEnd && lineEnd !== line ? `lines ${line}–${lineEnd}` : `line ${line}`}</span>
       </div>
-      <div className="hljs code-snippet-preview overflow-auto text-[12px] leading-5 min-h-0" style={{ padding: 0, background: 'var(--code-bg, #1e293b)' }}>
+      <div className="code-snippet-preview overflow-auto text-[12px] leading-5 min-h-0" style={{ padding: 0, background: 'var(--code-bg, #1e293b)' }}>
         <table className="border-collapse w-full">
           <tbody>
             {snippet.split('\n').map((_, i) => (

package/components/KeyboardShortcuts.tsx

@@ -1,4 +1,9 @@
 import React from 'react';
+import {
+  formatShortcutBindingTokens,
+  listScopeShortcuts,
+  vimSelectionShortcuts,
+} from '../shortcuts';
 import { isMac, modKey, altKey } from '../utils/platform';
 
 /* ─── Key cap component ─── */
@@ -108,6 +113,24 @@ const sharedPlanEditorShortcuts: ShortcutSection[] = [
   imageAnnotatorShortcuts,
 ];
 
+const vimShortcuts: ShortcutSection[] = (() => {
+  const sections = new Map<string, Shortcut[]>();
+  const entries = listScopeShortcuts(vimSelectionShortcuts)
+    .sort((left, right) => (left.displayOrder ?? 0) - (right.displayOrder ?? 0));
+
+  for (const entry of entries) {
+    const shortcuts = sections.get(entry.section) ?? [];
+    shortcuts.push({
+      keys: formatShortcutBindingTokens(entry.bindings[0] ?? ''),
+      desc: entry.description,
+      hint: entry.hint,
+    });
+    sections.set(entry.section, shortcuts);
+  }
+
+  return Array.from(sections, ([title, shortcuts]) => ({ title, shortcuts }));
+})();
+
 const planActionShortcuts: ShortcutSection = {
   title: 'Actions',
   shortcuts: [
@@ -152,6 +175,7 @@ const reviewShortcuts: ShortcutSection[] = [
     title: 'Actions',
     shortcuts: [
       { keys: [modKey, enter], desc: 'Approve / Send feedback' },
+      { keys: [modKey, shiftKey, 'Y'], desc: 'Copy feedback', hint: 'Copies the same feedback that gets submitted' },
       { keys: [altKey, altKey], desc: 'Toggle destination', hint: 'Double-tap to switch between GitHub and Agent in PR review mode' },
       { keys: [modKey, 'B'], desc: 'Toggle file tree' },
       { keys: [modKey, '.'], desc: 'Toggle sidebar' },
@@ -191,8 +215,19 @@ const reviewShortcuts: ShortcutSection[] = [
 
 /* ─── Exported panel ─── */
 
-export const KeyboardShortcuts: React.FC<{ mode: 'plan' | 'annotate' | 'review' }> = ({ mode }) => {
-  const sections = mode === 'review' ? reviewShortcuts : mode === 'annotate' ? annotateShortcuts : planShortcuts;
+/** Render the surface shortcut reference, including opt-in Vim commands. */
+export const KeyboardShortcuts: React.FC<{
+  mode: 'plan' | 'annotate' | 'review';
+  vimModeEnabled?: boolean;
+}> = ({ mode, vimModeEnabled = false }) => {
+  const baseSections = mode === 'review'
+    ? reviewShortcuts
+    : mode === 'annotate'
+      ? annotateShortcuts
+      : planShortcuts;
+  const sections = vimModeEnabled && mode !== 'review'
+    ? [...vimShortcuts, ...baseSections]
+    : baseSections;
 
   return (
     <div className="space-y-4">

package/components/Landing.tsx

@@ -197,8 +197,8 @@ export const Landing: React.FC<LandingProps> = ({ onEnter, shareBaseUrl }) => {
               <div>
                 <h3 className="font-semibold mb-1">Runs locally.</h3>
                 <p className="text-muted-foreground text-sm">
-                  Local plugin. No network requests. Plannotator runs entirely
-                  in your browser. Plans never leave your machine.
+                  Reviews and saved data stay local by default. Every load checks
+                  GitHub for updates, with no current opt-out, but sends no review content.
                 </p>
               </div>
             </div>
@@ -219,11 +219,11 @@ export const Landing: React.FC<LandingProps> = ({ onEnter, shareBaseUrl }) => {
                 </svg>
               </div>
               <div>
-                <h3 className="font-semibold mb-1">Share privately.</h3>
+                <h3 className="font-semibold mb-1">Know what a link contains.</h3>
                 <p className="text-muted-foreground text-sm">
-                  Collaborate without a backend. Plans and annotations compress
-                  into the URL itself — share a link. No accounts, no database,
-                  no third parties. Inspired by{" "}
+                  Small shares contain compressed, unencrypted content in the
+                  URL fragment. Short links upload encrypted ciphertext. Anyone
+                  with the full link can read the shared content. Inspired by{" "}
                   <a
                     href="https://github.com/antonmedv/textarea"
                     target="_blank"
@@ -418,7 +418,7 @@ export const Landing: React.FC<LandingProps> = ({ onEnter, shareBaseUrl }) => {
             </li>
             <li className="flex items-center gap-2">
               <span className="text-primary">•</span>
-              URL sharing via deflate compression — no backend required
+              Hash-based URL sharing, with an optional encrypted paste service
             </li>
           </ul>
 

package/components/MarkdownDiff.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {
+  MarkdownDiff as PackagedMarkdownDiff,
+  type MarkdownDiffHandle,
+  type MarkdownDiffProps as PackagedMarkdownDiffProps,
+} from '@plannotator/markdown-editor';
+import '@plannotator/markdown-editor/themes/plannotator.css';
+import { useTheme } from './ThemeProvider';
+
+export type { MarkdownDiffHandle };
+
+/* @plannotator/ui is the single supported contract for hosts — do NOT import
+   AtomicDiffEditor or @plannotator/atomic-editor directly (both are outside
+   the import allowlist). Extension builders (wikiLinks, slashCommands,
+   selectionToolbar) are re-exported from ./MarkdownEditor; build them there
+   and pass the result through the `extensions` prop below — the frozen diff
+   view composes them the same way the editor does. */
+
+/* Grid-mode card utilities mirror components/MarkdownEditor.tsx exactly, so a
+   host toggling editor <-> diff keeps identical card chrome. They stay here
+   (not in the package) because they're Plannotator design-system Tailwind
+   classes and this file is @source-scanned. */
+const GRID_CARD_CLASSES = 'px-5 md:px-8 lg:px-10 xl:px-12 shadow-xl border border-border/50';
+
+export interface MarkdownDiffProps
+  extends Omit<PackagedMarkdownDiffProps, 'mode' | 'cardClassName'> {
+  /** Mirrors MarkdownEditor's grid card chrome so editor <-> diff doesn't jump. */
+  gridEnabled?: boolean;
+  /** Theme color mode. Defaults to the ThemeProvider's resolved mode (Plannotator
+      passes nothing); a host without ThemeProvider can supply it directly. */
+  mode?: PackagedMarkdownDiffProps['mode'];
+}
+
+/* Theme-bridging shim around @plannotator/markdown-editor's MarkdownDiff — the
+   frozen two-revision comparison surface (newer revision as the real document,
+   deletions projected struck-through in place). Same pattern as the
+   MarkdownEditor shim: resolve the color mode from ThemeProvider beneath the
+   host's provider and pass it down as a prop.
+
+   The byte contract lives on `editorHandleRef`: getMarkdown() returns the
+   exact `modifiedMarkdown` supplied, getOriginalMarkdown() the exact
+   `originalMarkdown` — both byte-identical to the inputs. The surface itself
+   is frozen: document-changing transactions are rejected at the state and
+   view boundaries, and the content DOM is contenteditable="false".
+
+   `extensions` follows the editor's calling convention: CAPTURED ONCE per
+   mounted comparison (keyed on `documentId` + both document strings) — pass a
+   stable array and feed changing data through callbacks that close over live
+   state. Build extensions against YOUR copy of the `@codemirror/*` packages;
+   two live copies of `@codemirror/state` break the view. */
+export const MarkdownDiff: React.FC<MarkdownDiffProps> = ({ gridEnabled, mode, ...props }) => {
+  const { resolvedMode } = useTheme();
+  return (
+    <PackagedMarkdownDiff
+      {...props}
+      mode={mode ?? resolvedMode}
+      cardClassName={gridEnabled ? GRID_CARD_CLASSES : undefined}
+    />
+  );
+};

package/components/MenuVersionSection.tsx

@@ -3,6 +3,7 @@ import { TextShimmer } from './TextShimmer';
 import type { UpdateInfo } from '../hooks/useUpdateCheck';
 import type { Origin } from '@plannotator/core/agents';
 import { isWindows } from '../utils/platform';
+import { copyTextToClipboard } from '../utils/clipboard';
 
 const PI_INSTALL_COMMAND = 'pi install npm:@plannotator/pi-extension';
 
@@ -32,12 +33,11 @@ export const MenuVersionSection: React.FC<MenuVersionSectionProps> = ({
   const hasUpdate = !!updateInfo?.updateAvailable;
 
   const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(getInstallCommand(origin, isWSL));
+    if (await copyTextToClipboard(getInstallCommand(origin, isWSL))) {
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
-    } catch (e) {
-      console.error('Failed to copy:', e);
+    } else {
+      console.error('Failed to copy');
     }
   };
 

package/components/MermaidBlock.tsx

@@ -523,7 +523,7 @@ const MermaidBlockImpl: React.FC<{ block: Block }> = ({ block }) => {
 
   const inlineSource = (
     <pre className="rounded-lg text-[13px] overflow-x-auto bg-muted/50 border border-border/30 p-4">
-      <code className="hljs font-mono language-mermaid">{block.content}</code>
+      <code className="pn-code font-mono language-mermaid">{block.content}</code>
     </pre>
   );
 

package/components/ModeToggle.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { useTheme } from './ThemeProvider';
+import { THEME_MODES } from './themeModes';
 
 export function ModeToggle() {
   const { theme, setTheme } = useTheme();
@@ -48,17 +49,17 @@ export function ModeToggle() {
 
       {isOpen && (
         <div className="absolute right-0 mt-1 w-32 rounded-lg border border-border bg-popover shadow-xl z-50 overflow-hidden py-1">
-          {(['light', 'dark', 'system'] as const).map((t) => (
+          {THEME_MODES.map(({ id, label }) => (
             <button
-              key={t}
-              onClick={() => { setTheme(t); setIsOpen(false); }}
-              className={`w-full px-3 py-1.5 text-left text-xs capitalize transition-colors ${
-                theme === t
+              key={id}
+              onClick={() => { setTheme(id); setIsOpen(false); }}
+              className={`w-full px-3 py-1.5 text-left text-xs transition-colors ${
+                theme === id
                   ? 'text-primary bg-primary/10 font-medium'
                   : 'text-popover-foreground hover:bg-muted'
               }`}
             >
-              {t}
+              {label}
             </button>
           ))}
         </div>

package/components/OpenInAppButton.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { ChevronDown, Check, Copy, MoreHorizontal } from 'lucide-react';
 import { AppIcon } from './icons/AppIcon';
 import { getLastOpenInApp, setLastOpenInApp } from '../utils/storage';
+import { copyTextToClipboard } from '../utils/clipboard';
 import type { OpenInKind } from '@plannotator/core/open-in-apps';
 import {
   DropdownMenu,
@@ -163,11 +164,7 @@ export const OpenInAppButton: React.FC<OpenInAppButtonProps> = ({
   };
 
   const copyText = async (text: string) => {
-    try {
-      await navigator.clipboard.writeText(text);
-    } catch {
-      /* ignore */
-    }
+    await copyTextToClipboard(text);
     setMenuOpen(false);
   };
 

package/components/PinpointOverlay.tsx

@@ -65,22 +65,24 @@ export const PinpointOverlay: React.FC<PinpointOverlayProps> = ({ target, contai
 
   return (
     <>
-      {/* Outline box */}
+      {/* Background wash */}
       <div
-        className="border-2 border-dashed border-primary/50 bg-primary/5 rounded"
+        data-pinpoint-overlay
+        className="bg-primary/10 rounded-sm"
         style={{
           position: 'absolute',
-          top: position.top - 2,
-          left: position.left - 2,
-          width: position.width + 4,
-          height: position.height + 4,
+          top: position.top,
+          left: position.left,
+          width: position.width,
+          height: position.height,
           pointerEvents: 'none',
           zIndex: 20,
-          transition: 'all 100ms ease-out',
+          transition: 'top 100ms ease-out, left 100ms ease-out, width 100ms ease-out, height 100ms ease-out',
         }}
       />
       {/* Label badge */}
       <div
+        data-pinpoint-label={target.label}
         style={{
           position: 'absolute',
           top: position.top - 22,

package/components/PlanHeaderMenu.tsx

@@ -6,7 +6,7 @@ import {
   ActionMenuSectionLabel,
 } from './ActionMenu';
 import { useTheme } from './ThemeProvider';
-import { SunIcon, MoonIcon, SystemIcon } from './icons/themeIcons';
+import { THEME_MODES } from './themeModes';
 import { ReviewAgentsIcon } from './ReviewAgentsIcon';
 import { MenuVersionSection } from './MenuVersionSection';
 import { TextShimmer } from './TextShimmer';
@@ -67,6 +67,7 @@ export const PlanHeaderMenu: React.FC<PlanHeaderMenuProps> = ({
 
   return (
     <ActionMenu
+      panelWidth="wide"
       renderTrigger={({ isOpen, toggleMenu }) => (
         <button
           onClick={() => {
@@ -101,21 +102,21 @@ export const PlanHeaderMenu: React.FC<PlanHeaderMenuProps> = ({
           <div className="px-3 py-2 space-y-1.5">
             <ActionMenuSectionLabel>Theme</ActionMenuSectionLabel>
             <div className="flex items-center gap-1 rounded-lg bg-muted/50 p-0.5">
-              {(['light', 'dark', 'system'] as const).map((mode) => (
+              {THEME_MODES.map(({ id, label, Icon }) => (
                 <button
-                  key={mode}
+                  key={id}
                   onClick={() => {
                     closeMenu();
-                    setTheme(mode);
+                    setTheme(id);
                   }}
                   className={`flex flex-1 items-center justify-center gap-1.5 rounded-md px-2 py-1 text-[11px] font-medium transition-colors ${
-                    theme === mode
+                    theme === id
                       ? 'bg-background text-foreground shadow-sm'
                       : 'text-muted-foreground hover:text-foreground'
                   }`}
                 >
-                  {mode === 'light' ? <SunIcon /> : mode === 'dark' ? <MoonIcon /> : <SystemIcon />}
-                  <span className="capitalize">{mode}</span>
+                  <Icon />
+                  <span>{label}</span>
                 </button>
               ))}
             </div>
@@ -296,4 +297,3 @@ const NoteIcon = () => (
     <path strokeLinecap="round" strokeLinejoin="round" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
   </svg>
 );
-

package/components/PopoutDialog.tsx

@@ -1,10 +1,15 @@
 import React, { useCallback } from 'react';
 import { Dialog } from '@base-ui/react/dialog';
 
-const ANNOTATION_SELECTORS = [
+export const ANNOTATION_SELECTORS = [
   '.annotation-toolbar',
   '[data-comment-popover="true"]',
   '[data-floating-picker="true"]',
+  // Transient hidden textarea created by the legacy clipboard fallback
+  // (packages/ui/utils/clipboard.ts). It briefly steals focus during copy;
+  // without this guard the focus-out close reason would dismiss the popout
+  // whenever a copy button inside it falls back to execCommand.
+  '[data-clipboard-fallback="true"]',
 ];
 
 interface PopoutDialogProps {

package/components/ResizeHandle.tsx

@@ -89,6 +89,7 @@ export const ResizeHandle: React.FC<Props> = ({
           portaled to body so the zero-width parent doesn't clip it. */}
       {showTip && typeof document !== 'undefined' && createPortal(
         <div
+          data-print-hide
           style={{ position: 'fixed', left: tip.x + 14, top: tip.y + 16, zIndex: 100 }}
           className="pointer-events-none whitespace-nowrap rounded-md bg-surface-1 px-2 py-1 text-xs text-foreground shadow-md ring-1 ring-border/60"
         >