@ifc-lite/viewer 1.17.4 → 1.18.0

package/src/components/viewer/annotations/AnnotationLayer.tsx

@@ -0,0 +1,287 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * DOM-billboard overlay for annotation pins.
+ *
+ * Sits on top of the WebGPU canvas and re-projects every pin's world
+ * position to screen space each frame via the camera callbacks.
+ * Uses a single rAF loop driven by camera/canvas events (we listen
+ * to a per-frame tick exposed by the camera) so the loop pauses when
+ * nothing's moving — the runtime cost when idle is zero.
+ *
+ * Key invariants:
+ *   • The layer is `pointer-events: none` by default. Each pin and
+ *     popover opts into `pointer-events: auto` so 3D interactions
+ *     (orbit, pan, pick) still pass through the empty space between
+ *     pins.
+ *   • Only one popover or drop-input is visible at a time. They
+ *     anchor to the pin's last projected position and re-anchor as
+ *     the camera moves.
+ *   • Persistence happens on commit/edit/delete via the slice's
+ *     localStorage write — this layer never touches storage directly.
+ */
+
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useViewerStore } from '@/store';
+import { useIfc } from '@/hooks/useIfc';
+import type { AnnotationPosition } from '@/store/slices/annotationsSlice';
+import { AnnotationPin } from './AnnotationPin';
+import { AnnotationPopover } from './AnnotationPopover';
+import { AnnotationDropInput } from './AnnotationDropInput';
+
+interface ProjectedPin {
+  id: string;
+  index: number;
+  /** Screen-space position relative to the canvas. Null when behind the camera. */
+  screen: { x: number; y: number } | null;
+  preview: string;
+}
+
+function makePreview(note: string, maxLen = 60): string {
+  const trimmed = note.trim();
+  if (trimmed.length === 0) return '(empty note)';
+  return trimmed.length > maxLen ? `${trimmed.slice(0, maxLen)}…` : trimmed;
+}
+
+/**
+ * Pins live in the canvas's coordinate space. The wrapping <div>
+ * matches the canvas's bounding rect; pins are positioned absolutely
+ * within it. We mirror the canvas geometry via a ResizeObserver +
+ * a per-frame projection tick.
+ */
+export function AnnotationLayer() {
+  const annotations = useViewerStore((s) => s.annotations);
+  const draft = useViewerStore((s) => s.draft);
+  const selectedAnnotationId = useViewerStore((s) => s.selectedAnnotationId);
+  const selectAnnotation = useViewerStore((s) => s.selectAnnotation);
+  const updateAnnotation = useViewerStore((s) => s.updateAnnotation);
+  const removeAnnotation = useViewerStore((s) => s.removeAnnotation);
+  const commitDraft = useViewerStore((s) => s.commitDraft);
+  const cancelDraft = useViewerStore((s) => s.cancelDraft);
+  const cameraCallbacks = useViewerStore((s) => s.cameraCallbacks);
+  const { ifcDataStore, models } = useIfc();
+
+  // Track canvas geometry so the overlay sits exactly on top.
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [bounds, setBounds] = useState<{ width: number; height: number } | null>(null);
+
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const parent = container.parentElement;
+    if (!parent) return;
+
+    let observer: ResizeObserver | null = null;
+
+    const measure = (canvas: HTMLCanvasElement) => {
+      const rect = canvas.getBoundingClientRect();
+      setBounds({ width: rect.width, height: rect.height });
+    };
+
+    const bind = (canvas: HTMLCanvasElement) => {
+      measure(canvas);
+      observer = new ResizeObserver(() => measure(canvas));
+      observer.observe(canvas);
+    };
+
+    const initialCanvas = parent.querySelector('canvas') as HTMLCanvasElement | null;
+    if (initialCanvas) {
+      bind(initialCanvas);
+      return () => observer?.disconnect();
+    }
+
+    // Canvas not mounted yet (initial mount before viewport renders) —
+    // watch the parent for the canvas to appear, then bind once it does.
+    const mutationObserver = new MutationObserver(() => {
+      const canvas = parent.querySelector('canvas') as HTMLCanvasElement | null;
+      if (canvas) {
+        bind(canvas);
+        mutationObserver.disconnect();
+      }
+    });
+    mutationObserver.observe(parent, { childList: true, subtree: true });
+
+    return () => {
+      mutationObserver.disconnect();
+      observer?.disconnect();
+    };
+  }, []);
+
+  // Stable list view so React doesn't churn when the Map identity
+  // changes but the entries are equal.
+  const annotationList = useMemo(() => Array.from(annotations.values()), [annotations]);
+
+  // Per-frame projection tick. We don't have a global "camera moved"
+  // event, so a rAF loop is the cheapest way to keep pins glued to
+  // the world. The loop is mostly idle — projection is < 10 µs per
+  // pin and the typical scene has < 20 pins.
+  const [projectedPins, setProjectedPins] = useState<ProjectedPin[]>([]);
+  const [draftScreen, setDraftScreen] = useState<{ x: number; y: number } | null>(null);
+
+  useEffect(() => {
+    const project = cameraCallbacks.projectToScreen;
+    if (!project) {
+      setProjectedPins([]);
+      setDraftScreen(null);
+      return;
+    }
+
+    let raf: number | null = null;
+    let lastSerialized = '';
+
+    const tick = () => {
+      const next: ProjectedPin[] = annotationList.map((ann, i) => ({
+        id: ann.id,
+        index: i + 1,
+        screen: project(ann.position),
+        preview: makePreview(ann.note),
+      }));
+
+      // Cheap deep-eq check: serialize the screen positions. Skip the
+      // setState when nothing moved, otherwise we re-render every
+      // frame even when the camera is still.
+      const serialized = next.map((p) => `${p.id}:${p.screen?.x ?? 'x'}:${p.screen?.y ?? 'y'}`).join(',');
+      if (serialized !== lastSerialized) {
+        lastSerialized = serialized;
+        setProjectedPins(next);
+      }
+
+      const draftPos = useViewerStore.getState().draft?.position ?? null;
+      const draftScreenNext = draftPos ? project(draftPos) : null;
+      setDraftScreen((prev) => {
+        if (prev === draftScreenNext) return prev;
+        if (prev && draftScreenNext && prev.x === draftScreenNext.x && prev.y === draftScreenNext.y) {
+          return prev;
+        }
+        return draftScreenNext;
+      });
+
+      raf = requestAnimationFrame(tick);
+    };
+
+    raf = requestAnimationFrame(tick);
+    return () => {
+      if (raf !== null) cancelAnimationFrame(raf);
+    };
+    // The list of annotations is captured per-render via annotationList;
+    // that closure is what the rAF tick reads. Pin position changes
+    // automatically pick up via the next render's loop replacement.
+  }, [cameraCallbacks, annotationList]);
+
+  const selectedAnnotation = selectedAnnotationId ? annotations.get(selectedAnnotationId) : null;
+  const selectedScreen = useMemo(() => {
+    if (!selectedAnnotation) return null;
+    return projectedPins.find((p) => p.id === selectedAnnotation.id)?.screen ?? null;
+  }, [selectedAnnotation, projectedPins]);
+
+  // Resolve entity type + id for the popover header. Cheap lookup
+  // against whichever data store the annotation was anchored to.
+  const resolveEntityType = (modelId: string | null, expressId: number | null): string | null => {
+    if (expressId === null) return null;
+    // Federation safety: when the annotation carries a modelId that
+    // isn't in the current `models` map, falling back to
+    // `ifcDataStore` would silently resolve `expressId` against the
+    // wrong model (the same id can exist in many federated models).
+    // The fallback is therefore restricted to single-model sessions.
+    let dataStore: typeof ifcDataStore | null;
+    if (!modelId) {
+      dataStore = ifcDataStore;
+    } else {
+      const scoped = models.get(modelId)?.ifcDataStore;
+      if (scoped) {
+        dataStore = scoped;
+      } else if (models.size <= 1) {
+        dataStore = ifcDataStore;
+      } else {
+        return null;
+      }
+    }
+    if (!dataStore?.entities) return null;
+    return dataStore.entities.getTypeName(expressId) || null;
+  };
+
+  if (!bounds) {
+    return <div ref={containerRef} className="absolute inset-0 pointer-events-none" />;
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className="absolute inset-0 pointer-events-none overflow-hidden"
+      aria-label="Annotations layer"
+    >
+      {/* Pins */}
+      {projectedPins.map((pin) => {
+        if (!pin.screen) return null;
+        const annotation = annotations.get(pin.id);
+        if (!annotation) return null;
+        const isSelected = selectedAnnotationId === pin.id;
+        return (
+          <div
+            key={pin.id}
+            data-annotation-pin-id={pin.id}
+            className="absolute pointer-events-auto"
+            style={{
+              left: pin.screen.x,
+              top: pin.screen.y,
+              transform: 'translate(-50%, -50%)',
+              animationDelay: `${pin.index * 40}ms`,
+            }}
+          >
+            <AnnotationPin
+              index={pin.index}
+              selected={isSelected}
+              preview={pin.preview}
+              onClick={() => selectAnnotation(isSelected ? null : pin.id)}
+            />
+          </div>
+        );
+      })}
+
+      {/* Popover for the selected pin */}
+      {selectedAnnotation && selectedScreen && (
+        <AnnotationPopover
+          annotation={selectedAnnotation}
+          anchorX={selectedScreen.x}
+          anchorY={selectedScreen.y}
+          canvasWidth={bounds.width}
+          canvasHeight={bounds.height}
+          entityType={resolveEntityType(selectedAnnotation.modelId, selectedAnnotation.entityExpressId)}
+          onSave={(note) => updateAnnotation(selectedAnnotation.id, note)}
+          onDelete={() => removeAnnotation(selectedAnnotation.id)}
+          onClose={() => selectAnnotation(null)}
+        />
+      )}
+
+      {/* Drop input + ghost pin while drafting */}
+      {draft && draftScreen && (
+        <>
+          <div
+            className="absolute pointer-events-none"
+            style={{
+              left: draftScreen.x,
+              top: draftScreen.y,
+              transform: 'translate(-50%, -50%)',
+            }}
+          >
+            <AnnotationPin index={annotationList.length + 1} variant="draft" />
+          </div>
+          <AnnotationDropInput
+            anchorX={draftScreen.x}
+            anchorY={draftScreen.y}
+            canvasWidth={bounds.width}
+            canvasHeight={bounds.height}
+            entityType={resolveEntityType(draft.modelId, draft.entityExpressId)}
+            entityExpressId={draft.entityExpressId}
+            onSave={(note) => commitDraft(note)}
+            onCancel={cancelDraft}
+          />
+        </>
+      )}
+    </div>
+  );
+}
+
+export type { AnnotationPosition };

package/src/components/viewer/annotations/AnnotationPin.tsx

@@ -0,0 +1,90 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * Single annotation pin — a 14px circle anchored to a screen point.
+ *
+ * The dot itself is small; we wrap it in a 24×24 invisible hit-target
+ * so it stays comfortable on touch and doesn't fight pointer events
+ * on the surrounding canvas. The pin sits in the canvas overlay layer
+ * (`AnnotationLayer`) which positions it absolutely each frame.
+ */
+
+import { forwardRef } from 'react';
+import { cn } from '@/lib/utils';
+
+export interface AnnotationPinProps {
+  /** Index in the rendered list — 1-based. Shown inside the dot when ≤ 9. */
+  index: number;
+  /** Highlights the dot with the emerald ring used for selection across the viewer. */
+  selected?: boolean;
+  /** Tooltip preview when the user hovers (author + first ~40 chars of note). */
+  preview?: string;
+  /** Called when the dot is clicked. */
+  onClick?: () => void;
+  /** Called when the dot is right-clicked — used by the layer for "delete via menu". */
+  onContextMenu?: (e: React.MouseEvent) => void;
+  /** Visual variant. `draft` is a slightly washed-out pin used while the note input is open. */
+  variant?: 'idle' | 'draft';
+}
+
+export const AnnotationPin = forwardRef<HTMLButtonElement, AnnotationPinProps>(
+  function AnnotationPin({ index, selected, preview, onClick, onContextMenu, variant = 'idle' }, ref) {
+    // 1-character glyph: the index for ≤ 9, ellipsis otherwise. Keeps
+    // the pin readable at 14px without feeling crowded.
+    const glyph = index <= 9 ? String(index) : '·';
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        title={preview}
+        aria-label={preview ? `Annotation ${index}: ${preview}` : `Annotation ${index}`}
+        onClick={onClick}
+        onContextMenu={onContextMenu}
+        className={cn(
+          // 24×24 invisible hit-target around a 14px dot — touch comfort
+          // without bloating the visual.
+          'group relative inline-flex h-6 w-6 items-center justify-center',
+          // Keyboard focus ring uses the same emerald accent as selection.
+          'cursor-pointer outline-none rounded-full',
+          'focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-1 focus-visible:ring-offset-background',
+        )}
+      >
+        <span
+          aria-hidden
+          className={cn(
+            // Inner dot: 14px disc, amber accent, white glyph centered.
+            // Drop shadow grounds it against the rendered scene; without
+            // it the pin floats and reads as a UI bug.
+            'flex h-3.5 w-3.5 items-center justify-center rounded-full',
+            'text-[8px] font-mono font-bold leading-none text-white tabular-nums',
+            'shadow-[0_1px_4px_rgba(0,0,0,0.35),0_0_0_1px_rgba(0,0,0,0.15)]',
+            'transition-transform duration-150 ease-out',
+            'group-hover:scale-[1.18]',
+            // Idle pulse on first paint — drawn from the layer's
+            // animation-delay so a freshly committed pin announces
+            // itself once and then settles.
+            variant === 'idle' && 'annotation-pin-idle',
+            variant === 'draft' && 'opacity-70',
+          )}
+          style={{
+            backgroundColor: variant === 'draft' ? '#fbbf24' : '#f59e0b',
+          }}
+        >
+          {glyph}
+        </span>
+        {selected && (
+          <span
+            aria-hidden
+            // Selection ring — emerald, matches the existing
+            // "constructive" accent (Raw STEP nav, duplicate path).
+            // Sits one pixel outside the dot via `ring-offset`.
+            className="pointer-events-none absolute inset-[5px] rounded-full ring-2 ring-emerald-500 ring-offset-1 ring-offset-transparent"
+          />
+        )}
+      </button>
+    );
+  },
+);

package/src/components/viewer/annotations/AnnotationPopover.tsx

@@ -0,0 +1,296 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * Annotation popover — appears next to a pin when the user clicks
+ * an existing annotation. Read mode shows the note + relative time
+ * + entity context; edit mode swaps in a textarea with Enter-to-save
+ * / Shift+Enter-newline / Esc-cancel semantics.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Pencil, Trash2, X, Check } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import type { Annotation } from '@/store/slices/annotationsSlice';
+
+const MAX_NOTE_LEN = 2000;
+const SOFT_NOTE_LIMIT = 200;
+
+export interface AnnotationPopoverProps {
+  annotation: Annotation;
+  /** Anchor in canvas-relative pixel coordinates. */
+  anchorX: number;
+  anchorY: number;
+  /** Canvas dimensions for edge clamping (so the popover never falls off-screen). */
+  canvasWidth: number;
+  canvasHeight: number;
+  /** Resolved entity type, when the pin is anchored to a known IfcRoot. */
+  entityType?: string | null;
+  onSave: (note: string) => void;
+  onDelete: () => void;
+  onClose: () => void;
+}
+
+const POPOVER_WIDTH = 280;
+const POPOVER_OFFSET_X = 16;
+
+function formatRelativeTime(timestamp: number): string {
+  const diff = Date.now() - timestamp;
+  const minute = 60_000;
+  const hour = 60 * minute;
+  const day = 24 * hour;
+  const week = 7 * day;
+  if (diff < minute) return 'just now';
+  if (diff < hour) return `${Math.floor(diff / minute)}m ago`;
+  if (diff < day) return `${Math.floor(diff / hour)}h ago`;
+  if (diff < week) return `${Math.floor(diff / day)}d ago`;
+  return new Date(timestamp).toLocaleDateString();
+}
+
+export function AnnotationPopover({
+  annotation,
+  anchorX,
+  anchorY,
+  canvasWidth,
+  canvasHeight,
+  entityType,
+  onSave,
+  onDelete,
+  onClose,
+}: AnnotationPopoverProps) {
+  const [editing, setEditing] = useState(annotation.note.length === 0);
+  const [draft, setDraft] = useState(annotation.note);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Reset editor state when the popover is reused for a different
+  // annotation. Without this, switching pins would carry the previous
+  // pin's draft into the new popover.
+  useEffect(() => {
+    setEditing(annotation.note.length === 0);
+    setDraft(annotation.note);
+  }, [annotation.id, annotation.note]);
+
+  // When the user enters edit mode, focus + select the textarea so
+  // typing replaces the existing body cleanly.
+  useEffect(() => {
+    if (editing && textareaRef.current) {
+      textareaRef.current.focus();
+      textareaRef.current.select();
+    }
+  }, [editing]);
+
+  // Close on outside click. Listening at the document level keeps
+  // the popover predictable when the user mouses anywhere else.
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      const node = containerRef.current;
+      if (!node) return;
+      if (node.contains(e.target as Node)) return;
+      // Don't close when the click landed on the same pin — the
+      // pin's onClick handler controls open/close itself.
+      const closestPin = (e.target as HTMLElement).closest?.('[data-annotation-pin-id]');
+      if (closestPin?.getAttribute('data-annotation-pin-id') === annotation.id) return;
+      onClose();
+    };
+    // Defer registration to next tick so the click that opened the
+    // popover doesn't immediately close it.
+    const id = window.setTimeout(() => {
+      document.addEventListener('mousedown', handler);
+    }, 0);
+    return () => {
+      window.clearTimeout(id);
+      document.removeEventListener('mousedown', handler);
+    };
+  }, [annotation.id, onClose]);
+
+  const handleSave = useCallback(() => {
+    onSave(draft);
+    setEditing(false);
+  }, [draft, onSave]);
+
+  const handleCancel = useCallback(() => {
+    setDraft(annotation.note);
+    setEditing(false);
+    if (annotation.note.length === 0) {
+      // No saved body — user backed out of an edit on a freshly
+      // committed pin with no body. Close the popover entirely.
+      onClose();
+    }
+  }, [annotation.note, onClose]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        handleSave();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        handleCancel();
+      }
+    },
+    [handleSave, handleCancel],
+  );
+
+  // Edge clamp the popover. Default: anchor to the right of the pin
+  // with a 16px gap; flip left when the right edge would clip.
+  const wantsLeft = anchorX + POPOVER_OFFSET_X + POPOVER_WIDTH > canvasWidth;
+  const left = wantsLeft
+    ? Math.max(8, anchorX - POPOVER_OFFSET_X - POPOVER_WIDTH)
+    : Math.min(anchorX + POPOVER_OFFSET_X, canvasWidth - POPOVER_WIDTH - 8);
+  const top = Math.min(Math.max(8, anchorY - 12), canvasHeight - 100);
+
+  const charCountVisible = editing && draft.length >= SOFT_NOTE_LIMIT;
+  const overSoftLimit = draft.length > SOFT_NOTE_LIMIT;
+  const overHardLimit = draft.length > MAX_NOTE_LEN;
+
+  return (
+    <div
+      ref={containerRef}
+      role="dialog"
+      aria-label="Annotation"
+      style={{ left, top, width: POPOVER_WIDTH }}
+      className={cn(
+        'absolute z-[60] pointer-events-auto',
+        'rounded-md border border-amber-300/60 dark:border-amber-700/40',
+        'bg-white/95 dark:bg-zinc-950/95 backdrop-blur-md',
+        'shadow-[0_8px_32px_rgba(0,0,0,0.18)]',
+        'overflow-hidden',
+        'animate-in fade-in-0 zoom-in-95 duration-150',
+      )}
+    >
+      {/* Header — entity context + close. Amber accent strip on the
+          left signals this is an annotation surface. */}
+      <div className="flex items-center justify-between gap-2 px-3 py-2 border-b border-zinc-200 dark:border-zinc-800 bg-amber-50/40 dark:bg-amber-950/20">
+        <div className="flex items-center gap-2 min-w-0">
+          <span className="h-2 w-2 rounded-full bg-amber-500 shrink-0" aria-hidden />
+          <span className="font-mono text-[10px] uppercase tracking-wider text-amber-700 dark:text-amber-300 truncate">
+            {entityType ? entityType : 'Annotation'}
+            {annotation.entityExpressId !== null && (
+              <span className="ml-1 text-zinc-400 dark:text-zinc-500">
+                #{annotation.entityExpressId}
+              </span>
+            )}
+          </span>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-5 w-5 p-0 text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200"
+          onClick={onClose}
+          title="Close"
+        >
+          <X className="h-3 w-3" />
+        </Button>
+      </div>
+
+      {/* Body */}
+      <div className="px-3 py-2.5">
+        {editing ? (
+          <>
+            <textarea
+              ref={textareaRef}
+              value={draft}
+              onChange={(e) => setDraft(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Note about this point…"
+              rows={4}
+              maxLength={MAX_NOTE_LEN + 100}
+              className={cn(
+                'w-full resize-none font-mono text-[11px] leading-relaxed',
+                'bg-zinc-50 dark:bg-zinc-900/60 text-zinc-800 dark:text-zinc-200',
+                'border border-zinc-200 dark:border-zinc-800 rounded-sm',
+                'px-2 py-1.5 outline-none focus:ring-1',
+                overHardLimit
+                  ? 'focus:ring-red-400 border-red-300 dark:border-red-700/60'
+                  : 'focus:ring-amber-400/50 focus:border-amber-300/60',
+              )}
+              spellCheck
+              autoCorrect="on"
+            />
+            <div className="mt-1.5 flex items-center justify-between gap-2 text-[10px] font-mono">
+              <span className="text-zinc-400 dark:text-zinc-500">
+                ⏎ save · ⇧⏎ newline · esc cancel
+              </span>
+              {charCountVisible && (
+                <span
+                  className={cn(
+                    'tabular-nums',
+                    overHardLimit
+                      ? 'text-red-500'
+                      : overSoftLimit
+                        ? 'text-amber-600 dark:text-amber-400'
+                        : 'text-zinc-400',
+                  )}
+                >
+                  {draft.length}/{MAX_NOTE_LEN}
+                </span>
+              )}
+            </div>
+            <div className="mt-2 flex items-center justify-end gap-1">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 px-2 text-[11px]"
+                onClick={handleCancel}
+              >
+                Cancel
+              </Button>
+              <Button
+                size="sm"
+                className="h-7 px-2 text-[11px] bg-amber-500 hover:bg-amber-500/90 text-white"
+                onClick={handleSave}
+                disabled={overHardLimit}
+              >
+                <Check className="h-3 w-3 mr-1" />
+                Save
+              </Button>
+            </div>
+          </>
+        ) : (
+          <>
+            {annotation.note ? (
+              <p className="font-mono text-[11px] leading-relaxed text-zinc-800 dark:text-zinc-200 whitespace-pre-wrap break-words max-h-48 overflow-y-auto">
+                {annotation.note}
+              </p>
+            ) : (
+              <p className="font-mono text-[11px] italic text-zinc-400 dark:text-zinc-500">
+                (no note — click the pen icon to add one)
+              </p>
+            )}
+            <div className="mt-2 pt-2 border-t border-zinc-200/60 dark:border-zinc-800/60 flex items-center justify-between gap-2">
+              <span className="text-[9.5px] font-mono uppercase tracking-wider text-zinc-400 dark:text-zinc-500">
+                {formatRelativeTime(annotation.updatedAt)}
+                {annotation.updatedAt !== annotation.createdAt && (
+                  <span className="ml-1">· edited</span>
+                )}
+              </span>
+              <div className="flex items-center gap-0.5">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-6 w-6 p-0 text-zinc-500 hover:text-zinc-800 dark:hover:text-zinc-200"
+                  onClick={() => setEditing(true)}
+                  title="Edit note"
+                >
+                  <Pencil className="h-3 w-3" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-6 w-6 p-0 text-zinc-500 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/30"
+                  onClick={onDelete}
+                  title="Delete annotation"
+                >
+                  <Trash2 className="h-3 w-3" />
+                </Button>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}