@plannotator/ui 0.27.0 → 0.29.0

package/components/VimModeOverlay.tsx

@@ -0,0 +1,235 @@
+import {
+  useLayoutEffect,
+  useRef,
+  useState,
+  type RefObject,
+} from 'react';
+import { createPortal } from 'react-dom';
+import type { InputMethod } from '../types';
+import type { SemanticTarget } from '../utils/blockTargeting';
+import {
+  resolveTextPosition,
+  type VimSelectionState,
+} from '../utils/vimNavigation';
+import { getVimHudPhase, type VimHudCommand } from '../utils/vimHud';
+import { VimKeyHud } from './VimKeyHud';
+import { VimTargetReticle } from './VimTargetReticle';
+
+interface CursorPosition {
+  readonly top: number;
+  readonly left: number;
+  readonly height: number;
+}
+
+/** Props for Vim's cursor, status, and contextual-help feedback. */
+export interface VimModeOverlayProps {
+  containerRef: RefObject<HTMLElement | null>;
+  inputMethod: InputMethod;
+  state: VimSelectionState;
+  focused: boolean;
+  hudEnabled: boolean;
+  keyPanelEnabled: boolean;
+  hudCommand: VimHudCommand | null;
+  activeTarget: SemanticTarget | null;
+  helpOpen: boolean;
+  onHelpOpenChange: (open: boolean) => void;
+  onKeyPanelHide?: () => void;
+  onHudFocusLeave: () => void;
+}
+
+/**
+ * Render immediate, non-interactive feedback for Vim mode without changing
+ * document layout or intercepting pointer selection.
+ */
+export function VimModeOverlay({
+  containerRef,
+  inputMethod,
+  state,
+  focused,
+  hudEnabled,
+  keyPanelEnabled,
+  hudCommand,
+  activeTarget,
+  helpOpen,
+  onHelpOpenChange,
+  onKeyPanelHide,
+  onHudFocusLeave,
+}: VimModeOverlayProps) {
+  const [cursorPosition, setCursorPosition] = useState<CursorPosition | null>(null);
+  const rafRef = useRef(0);
+
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (
+      !container
+      || !focused
+      || state.phase !== 'text'
+    ) {
+      setCursorPosition(null);
+      return;
+    }
+    const cursor = state.cursor;
+
+    const update = () => {
+      const point = resolveTextPosition(container, cursor);
+      if (!point) {
+        setCursorPosition(null);
+        return;
+      }
+
+      const range = document.createRange();
+      range.setStart(point.node, point.offset);
+      range.collapse(true);
+      const rect = range.getClientRects()[0] ?? range.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      const parent = point.node.parentElement;
+      const lineHeight = parent
+        ? Number.parseFloat(getComputedStyle(parent).lineHeight)
+        : Number.NaN;
+      setCursorPosition({
+        top: rect.top - containerRect.top,
+        left: rect.left - containerRect.left,
+        height: rect.height || lineHeight || 18,
+      });
+    };
+
+    const scheduleUpdate = () => {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(update);
+    };
+
+    update();
+    window.addEventListener('resize', scheduleUpdate, { passive: true });
+    window.addEventListener('scroll', scheduleUpdate, { passive: true, capture: true });
+    return () => {
+      cancelAnimationFrame(rafRef.current);
+      window.removeEventListener('resize', scheduleUpdate);
+      window.removeEventListener('scroll', scheduleUpdate, true);
+    };
+  }, [containerRef, focused, state]);
+
+  const active = state.phase !== 'inactive'
+    && (focused || state.phase === 'action');
+  const keyPanelVisible = hudEnabled
+    && (helpOpen || (keyPanelEnabled && active));
+  const phaseLabel = state.phase === 'visual-block'
+    ? 'VISUAL BLOCK'
+    : state.phase === 'text'
+      ? 'NORMAL'
+      : state.phase.toUpperCase();
+  const inputLabel = inputMethod === 'pinpoint' ? 'PINPOINT' : 'SELECT';
+  const hudPhase = getVimHudPhase(state.phase, hudCommand?.actionId);
+
+  return (
+    <>
+      {cursorPosition && (
+        <div
+          data-vim-cursor
+          aria-hidden="true"
+          className="absolute z-[26] w-[2px] rounded-full bg-primary pointer-events-none"
+          style={{
+            top: cursorPosition.top,
+            left: cursorPosition.left,
+            height: cursorPosition.height,
+          }}
+        />
+      )}
+
+      {active && hudEnabled && (
+        <VimTargetReticle
+          containerRef={containerRef}
+          state={state}
+          target={activeTarget}
+          command={hudCommand}
+        />
+      )}
+
+      {keyPanelVisible && createPortal(
+        <VimKeyHud
+          command={hudCommand}
+          phase={hudPhase}
+          inputMethod={inputMethod}
+          expanded={helpOpen}
+          onExpandedChange={onHelpOpenChange}
+          onHide={
+            onKeyPanelHide
+              ? () => {
+                onHelpOpenChange(false);
+                onKeyPanelHide();
+              }
+              : undefined
+          }
+          onFocusLeave={onHudFocusLeave}
+        />,
+        document.body,
+      )}
+
+      {active && !hudEnabled && createPortal(
+        <div
+          data-vim-mode-badge
+          aria-live="polite"
+          className="fixed bottom-4 left-1/2 z-[120] -translate-x-1/2 rounded-md border border-primary/30 bg-popover/95 px-2.5 py-1 font-mono text-[10px] font-semibold tracking-wide text-primary shadow-lg backdrop-blur-sm pointer-events-none"
+        >
+          {phaseLabel} · {inputLabel}
+        </div>,
+        document.body,
+      )}
+
+      {helpOpen && !hudEnabled && createPortal(
+        <div
+          className="fixed inset-0 z-[140] flex items-center justify-center bg-background/65 p-4 backdrop-blur-sm"
+          role="dialog"
+          aria-modal="true"
+          aria-label="Vim controls"
+          onKeyDown={(event) => {
+            if (event.key === 'Escape' || event.key === '?') {
+              event.preventDefault();
+              event.stopPropagation();
+              onHelpOpenChange(false);
+            }
+          }}
+          onMouseDown={(event) => {
+            if (event.target === event.currentTarget) onHelpOpenChange(false);
+          }}
+        >
+          <div className="w-full max-w-lg rounded-xl border border-border bg-popover p-5 shadow-2xl">
+            <div className="mb-4 flex items-start justify-between gap-4">
+              <div>
+                <div className="text-sm font-semibold">Vim controls</div>
+                <div className="text-xs text-muted-foreground">
+                  Move through document structure, refine into text, then annotate.
+                </div>
+              </div>
+              <button
+                type="button"
+                onClick={() => onHelpOpenChange(false)}
+                className="rounded px-2 py-1 text-xs text-muted-foreground hover:bg-muted hover:text-foreground"
+              >
+                Close
+              </button>
+            </div>
+            <div className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-xs">
+              <kbd className="font-mono text-primary">j / k · gg / G</kbd>
+              <span>Previous / next block or sibling; first / last block</span>
+              <kbd className="font-mono text-primary">h / l · Esc</kbd>
+              <span>Move out, refine inward, or back out one level</span>
+              <kbd className="font-mono text-primary">v / V</kbd>
+              <span>Precise text / whole-block selection</span>
+              <kbd className="font-mono text-primary">h j k l · w b e · 0 $</kbd>
+              <span>Text motions after entering NORMAL</span>
+              <kbd className="font-mono text-primary">o</kbd>
+              <span>Swap the ends of a Visual selection</span>
+              <kbd className="font-mono text-primary">Enter</kbd>
+              <span>Use the active annotation mode</span>
+              <kbd className="font-mono text-primary">Space · c d m t y</kbd>
+              <span>Actions, comment, delete, markup, tag, copy</span>
+              <kbd className="font-mono text-primary">Esc · ?</kbd>
+              <span>Cancel current state / toggle this help</span>
+            </div>
+          </div>
+        </div>,
+        document.body,
+      )}
+    </>
+  );
+}

package/components/VimTargetReticle.tsx

@@ -0,0 +1,284 @@
+import {
+  useLayoutEffect,
+  useRef,
+  useState,
+  type RefObject,
+} from 'react';
+import { useScrollViewport } from '../hooks/useScrollViewport';
+import type { SemanticTarget } from '../utils/blockTargeting';
+import {
+  createRangeBetweenTextPositions,
+  resolveTextPosition,
+  type VimRestorableState,
+  type VimSelectionState,
+} from '../utils/vimNavigation';
+import type { VimHudCommand } from '../utils/vimHud';
+import { getVimReticleLabel } from '../utils/vimReticle';
+
+const CORNER_SIZE = 28;
+const MIN_TARGET_WIDTH = 44;
+const MIN_TARGET_HEIGHT = 32;
+const TARGET_PADDING_X = 5;
+const TARGET_PADDING_Y = 4;
+
+interface ReticlePosition {
+  readonly top: number;
+  readonly left: number;
+  readonly width: number;
+  readonly height: number;
+  readonly labelTop: number;
+}
+
+/** Live document geometry and command context required by the Vim target reticle. */
+export interface VimTargetReticleProps {
+  readonly containerRef: RefObject<HTMLElement | null>;
+  readonly state: VimSelectionState;
+  readonly target: SemanticTarget | null;
+  readonly command: VimHudCommand | null;
+}
+
+function effectiveState(state: VimSelectionState): VimRestorableState | null {
+  if (state.phase === 'inactive') return null;
+  return state.phase === 'action' ? state.returnTo : state;
+}
+
+function getRangeRect(range: Range): DOMRect | null {
+  let rects: DOMRect[] = [];
+  if (typeof range.getClientRects === 'function') {
+    try {
+      rects = Array.from(range.getClientRects());
+    } catch {
+      rects = [];
+    }
+  }
+  const visibleRects = rects.filter((rect) => rect.width > 0 || rect.height > 0);
+  if (visibleRects.length === 0) {
+    if (typeof range.getBoundingClientRect !== 'function') return null;
+    try {
+      return range.getBoundingClientRect();
+    } catch {
+      return null;
+    }
+  }
+
+  const left = Math.min(...visibleRects.map((rect) => rect.left));
+  const top = Math.min(...visibleRects.map((rect) => rect.top));
+  const right = Math.max(...visibleRects.map((rect) => rect.right));
+  const bottom = Math.max(...visibleRects.map((rect) => rect.bottom));
+  return new DOMRect(left, top, right - left, bottom - top);
+}
+
+function getNativeSelectionRect(container: HTMLElement): DOMRect | null {
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) return null;
+  const range = selection.getRangeAt(0);
+  if (
+    !container.contains(range.startContainer)
+    || !container.contains(range.endContainer)
+  ) {
+    return null;
+  }
+  return getRangeRect(range);
+}
+
+function getTargetRect(
+  container: HTMLElement,
+  state: VimRestorableState,
+  target: SemanticTarget | null,
+): DOMRect | null {
+  if (state.phase === 'block' || state.phase === 'inline') {
+    return target?.element.getBoundingClientRect() ?? null;
+  }
+
+  if (state.phase === 'visual') {
+    const range = createRangeBetweenTextPositions(
+      container,
+      state.anchor,
+      state.cursor,
+    );
+    return range ? getRangeRect(range) : null;
+  }
+
+  if (state.phase === 'visual-block') {
+    return getNativeSelectionRect(container);
+  }
+
+  const point = resolveTextPosition(container, state.cursor);
+  if (!point) return null;
+  const range = document.createRange();
+  range.setStart(point.node, point.offset);
+  range.collapse(true);
+  const rect = getRangeRect(range);
+  if (!rect) return null;
+
+  const parent = point.node.parentElement;
+  const lineHeight = parent
+    ? Number.parseFloat(getComputedStyle(parent).lineHeight)
+    : Number.NaN;
+  return new DOMRect(
+    rect.left,
+    rect.top,
+    Math.max(rect.width, 1),
+    rect.height || lineHeight || 18,
+  );
+}
+
+function relativePosition(
+  targetRect: DOMRect,
+  containerRect: DOMRect,
+  compact: boolean,
+  minimumLabelViewportTop: number,
+): ReticlePosition {
+  const paddingX = compact ? 10 : TARGET_PADDING_X;
+  const paddingY = compact ? 6 : TARGET_PADDING_Y;
+  const naturalWidth = targetRect.width + paddingX * 2;
+  const naturalHeight = targetRect.height + paddingY * 2;
+  const width = Math.max(MIN_TARGET_WIDTH, naturalWidth);
+  const height = Math.max(MIN_TARGET_HEIGHT, naturalHeight);
+  const targetCenterX = targetRect.left - containerRect.left + targetRect.width / 2;
+  const targetCenterY = targetRect.top - containerRect.top + targetRect.height / 2;
+  const left = Math.max(0, targetCenterX - width / 2);
+  const top = Math.max(0, targetCenterY - height / 2);
+  const aboveLabelTop = top - 36;
+
+  return {
+    left,
+    top,
+    width,
+    height,
+    labelTop: aboveLabelTop + containerRect.top >= minimumLabelViewportTop
+      ? aboveLabelTop
+      : Math.max(
+          top + height + 6,
+          minimumLabelViewportTop - containerRect.top,
+        ),
+  };
+}
+
+/**
+ * Draw the video HUD's targeting treatment on top of the real Vim target.
+ *
+ * Geometry always comes from the live semantic element, caret, or browser
+ * selection. The overlay never owns focus and never participates in layout.
+ */
+export function VimTargetReticle({
+  containerRef,
+  state,
+  target,
+  command,
+}: VimTargetReticleProps) {
+  const [position, setPosition] = useState<ReticlePosition | null>(null);
+  const rafRef = useRef(0);
+  const scrollViewport = useScrollViewport();
+  const restoredState = effectiveState(state);
+
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container || !restoredState) {
+      setPosition(null);
+      return;
+    }
+
+    const update = () => {
+      const targetRect = getTargetRect(container, restoredState, target);
+      if (!targetRect) {
+        setPosition(null);
+        return;
+      }
+      const containerRect = container.getBoundingClientRect();
+      const viewportTop = scrollViewport?.getBoundingClientRect().top ?? containerRect.top;
+      const stickyBottom = container
+        .querySelector<HTMLElement>('[data-sticky-actions]')
+        ?.getBoundingClientRect()
+        .bottom;
+      setPosition(relativePosition(
+        targetRect,
+        containerRect,
+        restoredState.phase === 'text',
+        Math.max(viewportTop + 4, stickyBottom ? stickyBottom + 6 : 0),
+      ));
+    };
+    const scheduleUpdate = () => {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(update);
+    };
+
+    update();
+    window.addEventListener('resize', scheduleUpdate, { passive: true });
+    scrollViewport?.addEventListener('scroll', scheduleUpdate, { passive: true });
+    const resizeObserver = typeof ResizeObserver === 'undefined'
+      ? null
+      : new ResizeObserver(scheduleUpdate);
+    resizeObserver?.observe(container);
+    if (target?.element) resizeObserver?.observe(target.element);
+    return () => {
+      cancelAnimationFrame(rafRef.current);
+      window.removeEventListener('resize', scheduleUpdate);
+      scrollViewport?.removeEventListener('scroll', scheduleUpdate);
+      resizeObserver?.disconnect();
+    };
+  }, [containerRef, restoredState, scrollViewport, target]);
+
+  if (!position || !restoredState) return null;
+
+  const label = getVimReticleLabel(restoredState, target, command);
+  const cornerRight = Math.max(0, position.width - CORNER_SIZE);
+  const cornerBottom = Math.max(0, position.height - CORNER_SIZE);
+  const fillTransform = `translate3d(${position.left}px, ${position.top}px, 0) scale(${
+    position.width / 100
+  }, ${position.height / 100})`;
+
+  return (
+    <div
+      data-vim-target-reticle
+      data-vim-target-label={label}
+      data-vim-target-phase={restoredState.phase}
+      aria-hidden="true"
+      className="vim-target-reticle"
+    >
+      <div
+        data-vim-target-fill
+        className="vim-target-reticle__fill"
+        style={{ transform: fillTransform }}
+      />
+      <div
+        data-vim-target-corner="top-left"
+        className="vim-target-reticle__corner vim-target-reticle__corner--top-left"
+        style={{ transform: `translate3d(${position.left}px, ${position.top}px, 0)` }}
+      />
+      <div
+        data-vim-target-corner="top-right"
+        className="vim-target-reticle__corner vim-target-reticle__corner--top-right"
+        style={{
+          transform: `translate3d(${position.left + cornerRight}px, ${position.top}px, 0)`,
+        }}
+      />
+      <div
+        data-vim-target-corner="bottom-left"
+        className="vim-target-reticle__corner vim-target-reticle__corner--bottom-left"
+        style={{
+          transform: `translate3d(${position.left}px, ${position.top + cornerBottom}px, 0)`,
+        }}
+      />
+      <div
+        data-vim-target-corner="bottom-right"
+        className="vim-target-reticle__corner vim-target-reticle__corner--bottom-right"
+        style={{
+          transform: `translate3d(${
+            position.left + cornerRight
+          }px, ${position.top + cornerBottom}px, 0)`,
+        }}
+      />
+      <div
+        data-vim-target-label
+        className="vim-target-reticle__label"
+        style={{
+          transform: `translate3d(${position.left}px, ${position.labelTop}px, 0)`,
+        }}
+      >
+        <span className="vim-target-reticle__label-dot" />
+        <span>{label}</span>
+      </div>
+    </div>
+  );
+}

package/components/ai/DocumentAIChatPanel.tsx

@@ -84,7 +84,7 @@ export const DocumentAIChatPanel: React.FC<DocumentAIChatPanelProps> = ({
   }, [generalInput, onAskGeneral]);
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col flex-1 min-h-0">
       <OverlayScrollArea className="flex-1 min-h-0">
         <div ref={scrollRef} className="p-2 space-y-3">
           {messages.length === 0 && !isCreatingSession && (

package/components/blocks/CodeBlock.tsx

@@ -1,12 +1,13 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github-dark.css';
 import type { Block } from '../../types';
+import { copyTextToClipboard } from '../../utils/clipboard';
+import { applyHighlight, codeBlockClassName } from '../../utils/codeHighlight';
+import { useFenceTheme } from '../../hooks/useFenceTheme';
 
 interface CodeBlockProps {
   block: Block;
-  onHover: (element: HTMLElement) => void;
-  onLeave: () => void;
+  onHover?: (element: HTMLElement) => void;
+  onLeave?: () => void;
   isHovered: boolean;
 }
 
@@ -14,42 +15,41 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({ block, onHover, onLeave })
   const [copied, setCopied] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
   const codeRef = useRef<HTMLElement>(null);
+  const fenceTheme = useFenceTheme();
 
-  // Highlight code block on mount and when content/language changes
+  // Highlight on mount, on content/language change, and whenever the palette
+  // changes. Language-less fences stay plain text (#1212) — nothing is guessed.
   useEffect(() => {
     if (codeRef.current) {
-      // Reset any previous highlighting
-      codeRef.current.removeAttribute('data-highlighted');
-      codeRef.current.className = `hljs font-mono${block.language ? ` language-${block.language}` : ''}`;
-      hljs.highlightElement(codeRef.current);
+      codeRef.current.className = codeBlockClassName(block.language);
+      applyHighlight(codeRef.current, block.content, block.language, fenceTheme);
     }
-  }, [block.content, block.language]);
+  }, [block.content, block.language, fenceTheme]);
 
   const handleCopy = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(block.content);
+    if (await copyTextToClipboard(block.content)) {
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error('Failed to copy:', err);
+    } else {
+      console.error('Failed to copy');
     }
   }, [block.content]);
 
   const handleMouseEnter = () => {
-    if (containerRef.current) {
+    if (containerRef.current && onHover) {
       onHover(containerRef.current);
     }
   };
 
   // Build className for code element
-  const codeClassName = `hljs font-mono${block.language ? ` language-${block.language}` : ''}`;
+  const codeClassName = codeBlockClassName(block.language);
 
   return (
     <div
       ref={containerRef}
       className="relative group my-5"
       data-block-id={block.id}
-      onMouseEnter={handleMouseEnter}
+      onMouseEnter={onHover ? handleMouseEnter : undefined}
       onMouseLeave={onLeave}
     >
       <button
@@ -72,4 +72,4 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({ block, onHover, onLeave })
       </pre>
     </div>
   );
-};
+};

package/components/blocks/TablePopout.tsx

@@ -10,6 +10,7 @@ import {
   type SortingState,
 } from '@tanstack/react-table';
 import type { Block } from '../../types';
+import { copyTextToClipboard } from '../../utils/clipboard';
 import { InlineMarkdown } from '../InlineMarkdown';
 import { PopoutDialog } from '../PopoutDialog';
 import { parseTableContent, buildCsvFromRows, buildMarkdownTable } from './TableBlock';
@@ -99,22 +100,20 @@ const TablePopoutImpl: React.FC<TablePopoutProps> = ({
     );
 
   const handleCopyMarkdown = async () => {
-    try {
-      await navigator.clipboard.writeText(buildMarkdownTable(headers, getVisibleRowsData()));
+    if (await copyTextToClipboard(buildMarkdownTable(headers, getVisibleRowsData()))) {
       setCopiedMd(true);
       setTimeout(() => setCopiedMd(false), 1500);
-    } catch (err) {
-      console.error('Failed to copy:', err);
+    } else {
+      console.error('Failed to copy');
     }
   };
 
   const handleCopyCsv = async () => {
-    try {
-      await navigator.clipboard.writeText(buildCsvFromRows(headers, getVisibleRowsData()));
+    if (await copyTextToClipboard(buildCsvFromRows(headers, getVisibleRowsData()))) {
       setCopiedCsv(true);
       setTimeout(() => setCopiedCsv(false), 1500);
-    } catch (err) {
-      console.error('Failed to copy:', err);
+    } else {
+      console.error('Failed to copy');
     }
   };
 

package/components/blocks/TableToolbar.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { buildCsv } from './TableBlock';
+import { copyTextToClipboard } from '../../utils/clipboard';
 
 interface TableToolbarProps {
   element: HTMLElement;
@@ -52,22 +53,20 @@ export const TableToolbar: React.FC<TableToolbarProps> = ({
   }, [element]);
 
   const handleCopyMarkdown = async () => {
-    try {
-      await navigator.clipboard.writeText(markdown);
+    if (await copyTextToClipboard(markdown)) {
       setCopiedMd(true);
       setTimeout(() => setCopiedMd(false), 1500);
-    } catch (err) {
-      console.error('Failed to copy:', err);
+    } else {
+      console.error('Failed to copy');
     }
   };
 
   const handleCopyCsv = async () => {
-    try {
-      await navigator.clipboard.writeText(buildCsv(markdown));
+    if (await copyTextToClipboard(buildCsv(markdown))) {
       setCopiedCsv(true);
       setTimeout(() => setCopiedCsv(false), 1500);
-    } catch (err) {
-      console.error('Failed to copy:', err);
+    } else {
+      console.error('Failed to copy');
     }
   };