@plannotator/ui 0.53.1 → 0.55.0

package/components/imageZoom.ts

@@ -0,0 +1,276 @@
+/**
+ * The image lightbox's zoom math, kept pure so it can be tested without a
+ * layout engine. A viewport is a translate plus a scale on the image, where
+ * scale 1 is the image's own pixels (Actual size) and the translate is the
+ * image's top-left corner inside the stage, in CSS pixels.
+ *
+ * The rules: the smallest scale is Fit (never above 1, so a small image is
+ * not blown up), the largest is 8 (800%); an axis on which the image is
+ * smaller than the stage is centred, and an axis on which it is larger is
+ * kept covering the stage, so the image can never be panned out of sight.
+ */
+
+export interface ZoomSize {
+  readonly width: number;
+  readonly height: number;
+}
+
+export interface ZoomViewport {
+  readonly x: number;
+  readonly y: number;
+  readonly scale: number;
+}
+
+export interface ZoomLimits {
+  readonly min: number;
+  readonly max: number;
+}
+
+/** The share of the stage Fit may fill on each axis (1 = edge to edge). */
+export interface ZoomInset {
+  readonly x: number;
+  readonly y: number;
+}
+
+/** 800%: an image pixel is then 8 screen pixels, enough to read any screenshot. */
+export const LIGHTBOX_ZOOM_MAX = 8;
+/** Wheel zoom: factor = exp(-deltaY * sensitivity), with deltaY capped so a
+ * mouse notch (100 px) is about 1.28x, close to the diagram canvas's step,
+ * while a trackpad pinch (a few px per event) stays smooth. */
+export const WHEEL_ZOOM_SENSITIVITY = 0.01;
+export const WHEEL_ZOOM_DELTA_CAP = 25;
+/** A plain-wheel gesture keeps the meaning it started with (zoom or scroll)
+ * until the wheel rests this long, so wheeling in past the screen's edge
+ * does not flip from zooming to scrolling halfway through. */
+export const WHEEL_LATCH_MS = 250;
+/** A press that travels less than this is a tap (a click), not a pan. */
+export const TAP_SLOP_MOUSE_PX = 4;
+export const TAP_SLOP_TOUCH_PX = 10;
+/** Two taps this close in time and space are a double tap (or double click). */
+export const DOUBLE_TAP_MS = 300;
+export const DOUBLE_TAP_SLOP_PX = 24;
+/** A double click at Fit zooms to twice the Fit scale. */
+export const DOUBLE_TAP_ZOOM = 2;
+
+/**
+ * Which way Fit fits: the whole image (`contain`, the default), or its width
+ * (a tall screenshot read from the top) or height (a panorama read from the
+ * left). The smallest scale is always `contain`, so a reader can zoom out to
+ * the whole image from either.
+ */
+export type FitAxis = 'contain' | 'width' | 'height';
+
+const FULL: ZoomInset = { x: 1, y: 1 };
+
+function valid(size: ZoomSize | null | undefined): size is ZoomSize {
+  return !!size && size.width > 0 && size.height > 0;
+}
+
+export function clampNumber(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+/** The scale at which the whole image (or its width, or its height) fits the stage, never above 1. */
+export function fitScale(image: ZoomSize, stage: ZoomSize, inset: ZoomInset = FULL, axis: FitAxis = 'contain'): number {
+  if (!valid(image) || !valid(stage)) return 1;
+  const across = (stage.width * inset.x) / image.width;
+  const down = (stage.height * inset.y) / image.height;
+  if (axis === 'width') return Math.min(1, across);
+  if (axis === 'height') return Math.min(1, down);
+  return Math.min(1, across, down);
+}
+
+export function zoomLimits(image: ZoomSize, stage: ZoomSize, inset: ZoomInset = FULL): ZoomLimits {
+  const min = fitScale(image, stage, inset);
+  return { min, max: Math.max(min, LIGHTBOX_ZOOM_MAX) };
+}
+
+function placeAxis(position: number, content: number, room: number): number {
+  if (content <= room) return (room - content) / 2;
+  return clampNumber(position, room - content, 0);
+}
+
+/** The scale within the limits, and the image centred or covering the stage on each axis. */
+export function clampViewport(view: ZoomViewport, image: ZoomSize, stage: ZoomSize, limits: ZoomLimits): ZoomViewport {
+  const scale = clampNumber(view.scale, limits.min, limits.max);
+  return {
+    scale,
+    x: placeAxis(view.x, image.width * scale, stage.width),
+    y: placeAxis(view.y, image.height * scale, stage.height),
+  };
+}
+
+/** Fit: the whole image, centred (or its width from the top, or its height from the left). */
+export function fitViewport(image: ZoomSize, stage: ZoomSize, inset: ZoomInset = FULL, axis: FitAxis = 'contain'): ZoomViewport {
+  const limits = zoomLimits(image, stage, inset);
+  return clampViewport({ x: 0, y: 0, scale: fitScale(image, stage, inset, axis) }, image, stage, limits);
+}
+
+/**
+ * Actual size: the image's own pixels. An axis on which it is larger than the
+ * stage starts at its top or left edge (a tall screenshot is read from the
+ * top); an axis on which it is smaller is centred.
+ */
+export function actualViewport(image: ZoomSize, stage: ZoomSize, inset: ZoomInset = FULL): ZoomViewport {
+  const limits = zoomLimits(image, stage, inset);
+  return clampViewport({ x: 0, y: 0, scale: 1 }, image, stage, limits);
+}
+
+/** Zoom by `factor` about a point of the stage, so the pixel under it stays under it. */
+export function zoomAt(
+  view: ZoomViewport,
+  factor: number,
+  px: number,
+  py: number,
+  image: ZoomSize,
+  stage: ZoomSize,
+  limits: ZoomLimits,
+): ZoomViewport {
+  const scale = clampNumber(view.scale * factor, limits.min, limits.max);
+  const ratio = scale / view.scale;
+  return clampViewport({ x: px - (px - view.x) * ratio, y: py - (py - view.y) * ratio, scale }, image, stage, limits);
+}
+
+/** Move the image by a pointer's travel (or a scroll's, negated by the caller). */
+export function panBy(view: ZoomViewport, dx: number, dy: number, image: ZoomSize, stage: ZoomSize, limits: ZoomLimits): ZoomViewport {
+  return clampViewport({ x: view.x + dx, y: view.y + dy, scale: view.scale }, image, stage, limits);
+}
+
+/** Whether the image is larger than the stage on either axis (so there is something to pan). */
+export function overflows(view: ZoomViewport, image: ZoomSize, stage: ZoomSize): boolean {
+  return image.width * view.scale > stage.width + 0.5 || image.height * view.scale > stage.height + 0.5;
+}
+
+/** Whether a viewport is at the Fit scale (`limits.min`, or a given Fit scale). */
+export function atFit(view: ZoomViewport, limits: ZoomLimits | number): boolean {
+  const fit = typeof limits === 'number' ? limits : limits.min;
+  return Math.abs(view.scale - fit) < 1e-3;
+}
+
+/**
+ * Whether the part of an image on screen (`visibleBox`, its own pixels) can
+ * still pan sideways: `1` shows more of its right (the finger moving left),
+ * `-1` more of its left. A swipe that way pans first, and steps once the
+ * image is at its edge (approval "inbox-image-swipe").
+ */
+export function canPanToward(box: Pick<NaturalBox, 'x' | 'w'> | null, naturalWidth: number, dir: 1 | -1): boolean {
+  if (!box || !(naturalWidth > 0)) return false;
+  return dir > 0 ? box.x + box.w < naturalWidth - 1 : box.x > 1;
+}
+
+/** The share of a stage that leaves `padding` CSS pixels on every side (at least a tenth). */
+export function paddingInset(stage: ZoomSize, padding: number): ZoomInset {
+  if (!valid(stage) || padding <= 0) return FULL;
+  return { x: Math.max(0.1, (stage.width - 2 * padding) / stage.width), y: Math.max(0.1, (stage.height - 2 * padding) / stage.height) };
+}
+
+/**
+ * A wheel event's travel in CSS pixels. Lines (Firefox's mouse wheel) count
+ * 16 px and pages the stage's height. Shift turns a vertical wheel sideways,
+ * as it does on a page (macOS already reports it as deltaX).
+ */
+export function wheelTravel(
+  event: { deltaX: number; deltaY: number; deltaMode: number; shiftKey: boolean },
+  pageHeight: number,
+): { dx: number; dy: number } {
+  const unit = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? pageHeight : 1;
+  let dx = event.deltaX * unit;
+  let dy = event.deltaY * unit;
+  if (event.shiftKey && dx === 0) {
+    dx = dy;
+    dy = 0;
+  }
+  return { dx, dy };
+}
+
+/** The zoom factor for a wheel's vertical travel: up (negative) zooms in. */
+export function wheelZoomFactor(dy: number): number {
+  return Math.exp(-clampNumber(dy, -WHEEL_ZOOM_DELTA_CAP, WHEEL_ZOOM_DELTA_CAP) * WHEEL_ZOOM_SENSITIVITY);
+}
+
+// ---------------------------------------------------------------------------
+// Region boxes (#2100): a box drawn on the image is kept in the image's own
+// (natural) pixels, so it is the same box at every zoom and pan, and the
+// agent can crop exactly that spot. These convert between the stage (CSS
+// pixels, relative to the stage's top-left) and the image.
+// ---------------------------------------------------------------------------
+
+/** A rectangle in the image's own pixels (integers once made by `naturalBoxFromPoints`). */
+export interface NaturalBox {
+  readonly x: number;
+  readonly y: number;
+  readonly w: number;
+  readonly h: number;
+}
+
+/** A rectangle in stage pixels. */
+export interface StageRect {
+  readonly left: number;
+  readonly top: number;
+  readonly width: number;
+  readonly height: number;
+}
+
+/** A stage point (CSS pixels from the stage's top-left) in the image's own pixels. Not clamped. */
+export function stageToNatural(view: ZoomViewport, px: number, py: number): { x: number; y: number } {
+  return { x: (px - view.x) / view.scale, y: (py - view.y) / view.scale };
+}
+
+/**
+ * The box two stage points span (a drag's start and end, in either
+ * direction), in the image's own pixels: clamped to the image, widened to
+ * whole pixels (floor the near edges, ceil the far ones), so the box always
+ * covers what the reviewer drew. Null when nothing of it is on the image.
+ */
+export function naturalBoxFromPoints(
+  view: ZoomViewport,
+  a: { x: number; y: number },
+  b: { x: number; y: number },
+  image: ZoomSize,
+): NaturalBox | null {
+  const p = stageToNatural(view, a.x, a.y);
+  const q = stageToNatural(view, b.x, b.y);
+  const x0 = clampNumber(Math.floor(Math.min(p.x, q.x)), 0, image.width);
+  const y0 = clampNumber(Math.floor(Math.min(p.y, q.y)), 0, image.height);
+  const x1 = clampNumber(Math.ceil(Math.max(p.x, q.x)), 0, image.width);
+  const y1 = clampNumber(Math.ceil(Math.max(p.y, q.y)), 0, image.height);
+  if (x1 - x0 < 1 || y1 - y0 < 1) return null;
+  return { x: x0, y: y0, w: x1 - x0, h: y1 - y0 };
+}
+
+/** Where a natural-pixel box is on the stage at a viewport. */
+export function naturalBoxToStage(view: ZoomViewport, box: NaturalBox): StageRect {
+  return { left: view.x + box.x * view.scale, top: view.y + box.y * view.scale, width: box.w * view.scale, height: box.h * view.scale };
+}
+
+/**
+ * The part of the image the stage shows now, in the image's own pixels:
+ * what Enter comments on in Region mode (the keyboard's way to a box: frame
+ * the spot with Actual size and the scroll keys, then press Enter). Null when
+ * nothing of the image is on the stage.
+ */
+export function visibleNaturalBox(view: ZoomViewport, image: ZoomSize, stage: ZoomSize): NaturalBox | null {
+  return naturalBoxFromPoints(view, { x: 0, y: 0 }, { x: stage.width, y: stage.height }, image);
+}
+
+/** The share of the stage a box fills when the viewer zooms to it. */
+export const ZOOM_TO_BOX_SHARE = 0.5;
+
+/**
+ * The viewport that shows a box large and centred: it fills `share` of the
+ * stage on its tighter axis, within the zoom limits (a box larger than that
+ * share at Fit stays at Fit), then the usual clamp keeps the image covering
+ * the stage, so a box at an edge sits as near the centre as the image allows.
+ */
+export function viewportForBox(
+  box: NaturalBox,
+  image: ZoomSize,
+  stage: ZoomSize,
+  limits: ZoomLimits,
+  share = ZOOM_TO_BOX_SHARE,
+): ZoomViewport {
+  const scale = clampNumber(Math.min((stage.width * share) / Math.max(1, box.w), (stage.height * share) / Math.max(1, box.h)), limits.min, limits.max);
+  const cx = box.x + box.w / 2;
+  const cy = box.y + box.h / 2;
+  return clampViewport({ scale, x: stage.width / 2 - cx * scale, y: stage.height / 2 - cy * scale }, image, stage, limits);
+}

package/components/plan-diff/PlanCleanDiffView.tsx

@@ -573,7 +573,7 @@ const DiffBlockRenderer: React.FC<DiffBlockRendererProps> = ({
   switch (block.type) {
     case "unchanged":
       return (
-        <div className={`plan-diff-unchanged ${unchangedClassName ?? DEFAULT_UNCHANGED_CLASS}`}>
+        <div className={`plan-diff-unchanged ${unchangedClassName ?? DEFAULT_UNCHANGED_CLASS}`} data-doc-text="">
           <MarkdownChunk content={block.content} />
         </div>
       );

package/components/plan-diff/PlanDiffViewer.tsx

@@ -36,6 +36,12 @@ interface PlanDiffViewerProps {
   selectedAnnotationId?: string | null;
   mode?: EditorMode;
   onOpenVscodeDiff?: (baseVersion: number) => Promise<{ ok?: boolean; error?: string }>;
+  /**
+   * Grow the diff card to the full height the parent gives it, like Viewer's
+   * `fillHeight`, so a short diff's card still runs to the bottom of the view.
+   * Default false: the card sizes to its content.
+   */
+  fillHeight?: boolean;
 }
 
 const defaultOpenVscodeDiff = async (
@@ -77,6 +83,7 @@ export const PlanDiffViewer: React.FC<PlanDiffViewerProps> = ({
   selectedAnnotationId,
   mode,
   onOpenVscodeDiff,
+  fillHeight = false,
 }) => {
   const [vscodeDiffLoading, setVscodeDiffLoading] = useState(false);
   const [vscodeDiffError, setVscodeDiffError] = useState<string | null>(null);
@@ -102,8 +109,12 @@ export const PlanDiffViewer: React.FC<PlanDiffViewerProps> = ({
   };
 
   return (
-    <div className="relative z-50 w-full" style={maxWidth ? { maxWidth } : { maxWidth: 832 }}>
-      <article className="w-full bg-card border border-border/50 rounded-xl shadow-xl p-5 md:p-8 lg:p-10 xl:p-12 relative">
+    <div
+      className={`relative z-50 w-full${fillHeight ? ' flex flex-col print:block' : ''}`}
+      data-viewer-fill-height={fillHeight ? '' : undefined}
+      style={maxWidth ? { maxWidth } : { maxWidth: 832 }}
+    >
+      <article className={`w-full ${fillHeight ? 'flex-1 ' : ''}bg-card border border-border/50 rounded-xl shadow-xl p-5 md:p-8 lg:p-10 xl:p-12 relative`} data-doc-text-root="">
         {/* Top-left: repo info + diff badge — matches Viewer layout (flex-col) so badge doesn't jump position */}
         <div className="absolute top-3 left-3 md:top-4 md:left-5 flex flex-col items-start gap-1 text-[9px] text-muted-foreground/50 font-mono">
           {repoInfo && (

package/components/plan-diff/PlanRawDiffView.tsx

@@ -67,7 +67,7 @@ export const PlanRawDiffView: React.FC<PlanRawDiffViewProps> = ({ blocks }) => {
   }, [blocks]);
 
   return (
-    <div className="font-mono text-[13px] leading-relaxed bg-muted/30 rounded-lg border border-border/30 overflow-x-auto">
+    <div className="font-mono text-[13px] leading-relaxed bg-muted/30 rounded-lg border border-border/30 overflow-x-auto" data-doc-text="">
       <div>
         {lines.map((line, index) => (
           <div

package/components/sidebar/FileBrowser.tsx

@@ -10,6 +10,7 @@ import { Search, X } from "lucide-react";
 import type { VaultNode } from "../../types";
 import type { DirState } from "../../hooks/useFileBrowser";
 import { CountBadge } from "./CountBadge";
+import { HostTitle } from "../HostTitle";
 import { ObsidianIconRaw } from "../icons/ObsidianIcons";
 import type { WorkspaceFileChange, WorkspaceStatusPayload } from "@plannotator/core/workspace-status-types";
 import { normalizeBrowserPath } from "@plannotator/core/browser-paths";
@@ -282,7 +283,9 @@ const TreeNode: React.FC<{
           <svg className="w-3 h-3 flex-shrink-0 text-muted-foreground/60" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
             <path strokeLinecap="round" strokeLinejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
           </svg>
-          <span className="truncate">{node.name}</span>
+          <HostTitle title={node.name} cut>
+            <span className="truncate">{node.name}</span>
+          </HostTitle>
           <div className="ml-auto flex flex-shrink-0 items-center gap-1.5 text-[10px]">
             {(aggregateChange.additions > 0 || aggregateChange.deletions > 0) && (
               <>
@@ -360,7 +363,9 @@ const TreeNode: React.FC<{
       <svg className="w-3 h-3 flex-shrink-0 opacity-40" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
         <path strokeLinecap="round" strokeLinejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
       </svg>
-      <span className={`truncate flex-1 min-w-0 ${isDeleted ? "line-through" : ""}`}>{displayName}</span>
+      <HostTitle title={node.name} cut>
+        <span className={`truncate flex-1 min-w-0 ${isDeleted ? "line-through" : ""}`}>{displayName}</span>
+      </HostTitle>
       <div className="ml-auto flex flex-shrink-0 items-center gap-1.5 text-[10px]">
         {isActive && selectionPending && (
           <span className="text-primary">Opening…</span>
@@ -455,10 +460,19 @@ const DirSection: React.FC<{
           selectionPending={selectionPending}
         />
       ))}
+      {dir.truncated && <FileLimitNote limit={dir.fileLimit} />}
     </div>
   );
 };
 
+/** The folder holds more supported files than the server lists; say so once, quietly, at the foot of its tree. */
+export const FileLimitNote: React.FC<{ limit?: number }> = ({ limit }) => (
+  <div data-file-limit-note className="px-2 pt-2 pb-1 text-[10px] leading-snug text-muted-foreground">
+    {limit ? `Showing the first ${limit.toLocaleString("en-US")} files.` : "Showing some of the files."}{" "}
+    Raise <code className="font-mono">PLANNOTATOR_FILE_BROWSER_MAX_FILES</code> to see more.
+  </div>
+);
+
 export const FileBrowser: React.FC<FileBrowserProps> = ({
   dirs,
   expandedFolders,

package/components/sidebar/SidebarTabs.tsx

@@ -24,6 +24,7 @@ interface SidebarTabsProps {
   hasFileAnnotations?: boolean;
   hasMessageAnnotations?: boolean;
   className?: string;
+  style?: React.CSSProperties;
 }
 
 export const SidebarTabs: React.FC<SidebarTabsProps> = ({
@@ -40,11 +41,13 @@ export const SidebarTabs: React.FC<SidebarTabsProps> = ({
   hasFileAnnotations,
   hasMessageAnnotations,
   className,
+  style,
 }) => {
   return (
     <div
       data-sidebar-tabs="true"
       className={`flex flex-col gap-1 pt-3 pl-0.5 flex-shrink-0 ${className ?? ""}`}
+      style={style}
     >
       {showAgentTerminalTab && onToggleAgentTerminal && (
         <button

package/config/index.ts

@@ -4,9 +4,12 @@ export { useConfigValue } from './useConfig';
 export {
   setReviewPanelView,
   setReviewDefaultDiffType,
+  getProviderReviewDefaultDiffType,
+  setProviderReviewDefaultDiffType,
   getPersistedReviewPanelView,
   setReviewAutoViewed,
   needsAutoViewedNotice,
   markAutoViewedNoticeSeen,
   type ReviewDefaultDiffType,
+  type VcsReviewSettingsDescriptor,
 } from './reviewView';

package/config/reviewView.ts

@@ -2,6 +2,20 @@ import { configStore } from './configStore';
 import { SETTINGS } from './settings';
 import { storage } from '../utils/storage';
 
+export interface ReviewSettingsDiffOption {
+  id: string;
+  label: string;
+  description: string;
+}
+
+/** The default-diff choices Settings → Review offers for one VCS. */
+export interface VcsReviewSettingsDescriptor {
+  id: string;
+  label: string;
+  defaultDiffType: string;
+  diffOptions: ReviewSettingsDiffOption[];
+}
+
 /**
  * The ONLY writers for the coupled setting pair (reviewPanelView,
  * defaultDiffType).
@@ -81,6 +95,32 @@ export function setReviewDefaultDiffType(
   }
 }
 
+/**
+ * The saved default diff for a VCS other than Git (today: Jujutsu), read from
+ * `reviewDefaults[id]`. Git keeps its original `defaultDiffType` setting and
+ * its coupled setter above; a value this VCS does not offer reads as its own
+ * default, never as a Git mode.
+ */
+export function getProviderReviewDefaultDiffType(
+  descriptor: VcsReviewSettingsDescriptor,
+  store: PanelViewConfigStore = configStore,
+): string {
+  const configured = store.get('reviewDefaults')[descriptor.id]?.defaultDiffType;
+  return configured && descriptor.diffOptions.some((option) => option.id === configured)
+    ? configured
+    : descriptor.defaultDiffType;
+}
+
+export function setProviderReviewDefaultDiffType(
+  providerId: string,
+  value: string,
+  store: PanelViewConfigStore = configStore,
+): void {
+  store.set('reviewDefaults', {
+    ...store.get('reviewDefaults'),
+    [providerId]: { defaultDiffType: value },
+  });
+}
 
 /**
  * One-time gate for the auto-mark-viewed notice — the toast that fires the
@@ -90,7 +130,7 @@ export function setReviewDefaultDiffType(
  * meaningful revision can re-show it.
  *
  * It lives beside the setting rather than in the review app because BOTH
- * writers of the setting (Settings > Git here, and the file-list gear in the
+ * writers of the setting (Settings → Review here, and the file-list gear in the
  * review app) must consume the gate: someone who found the switch has
  * demonstrably discovered the feature and must never be told about it.
  */