@arbidocs/react 0.5.111 → 0.5.113

package/dist/annotations/AnnotationPageOverlay.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/annotations/AnnotationPageOverlay.tsx"],
+  "sourcesContent": ["/**\n * The annotation layer for ONE page: draws its marks and handles the tools.\n *\n * It fills the page area (absolute, inset 0) and positions everything in percentages of it, so\n * marks follow zoom for free. Pointer maths uses the overlay's live box at event time.\n *\n * Event routing: in the text tools (highlight, redact text) the overlay lets pointer events fall\n * through to pdf.js's text layer so the browser can select text; `useTextSelectionMarks` turns\n * that selection into marks. In the draw tools the overlay captures the pointer. In select mode\n * only the marks themselves are interactive.\n */\n\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type KeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n} from 'react'\nimport { Check, MessageSquare, RotateCcw, Send, Trash2, X } from 'lucide-react'\nimport { cn } from '../lib/utils'\nimport { DRAW_TOOLS, TEXT_TOOLS, type AnnotationController } from './controller'\nimport { dragToNorm, isTooSmall } from './geometry'\nimport {\n  clampRect,\n  type Annotation,\n  type CommentAnnotation,\n  type NormRect,\n  type RedactionAnnotation,\n} from './model'\nimport { dragRect, patchForRect, singleRect, type DragMode } from './overlay-geometry'\nimport { PAGE_ATTRIBUTE } from './selection-marks'\n\nconst FALLBACK_PAGE_WIDTH_PT = 612\nconst COMMENT_ICON_PX = 24\nconst DEFAULT_STAMP = { w: 0.32, h: 0.06 }\nconst MOVE_THRESHOLD_PX = 3\n\ninterface DragState {\n  id: string\n  mode: DragMode\n  startX: number\n  startY: number\n  origin: NormRect\n  rect: NormRect\n  moved: boolean\n}\ninterface Point {\n  x: number\n  y: number\n}\n\nfunction useElementSize(ref: React.RefObject<HTMLElement | null>) {\n  const [size, setSize] = useState({ width: 0, height: 0 })\n  useLayoutEffect(() => {\n    const el = ref.current\n    if (!el) return\n    const measure = () => {\n      const r = el.getBoundingClientRect()\n      setSize((prev) =>\n        prev.width === r.width && prev.height === r.height\n          ? prev\n          : { width: r.width, height: r.height }\n      )\n    }\n    measure()\n    const observer = new ResizeObserver(measure)\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [ref])\n  return size\n}\n\n/**\n * Whether the page this overlay sits on has selectable text. A scanned page has none (the parser\n * keeps OCR separately, not in the PDF), so the text tools cannot select anything there.\n */\nfunction useHasTextLayer(ref: React.RefObject<HTMLElement | null>) {\n  const [hasText, setHasText] = useState(false)\n  useLayoutEffect(() => {\n    const container = ref.current?.parentElement\n    if (!container) return\n    const check = () => setHasText(container.querySelector('.textLayer span') !== null)\n    check()\n    const observer = new MutationObserver(check)\n    observer.observe(container, { childList: true, subtree: true })\n    return () => observer.disconnect()\n  }, [ref])\n  return hasText\n}\n\nconst pct = (n: number) => `${n * 100}%`\nconst rectStyle = (r: NormRect): CSSProperties => ({\n  left: pct(r.x),\n  top: pct(r.y),\n  width: pct(r.w),\n  height: pct(r.h),\n})\n\nexport interface AnnotationPageOverlayProps {\n  controller: AnnotationController\n  pageNumber: number\n  /** Page width in PDF points, to size strokes like an export. Defaults to US Letter. */\n  pageWidthPt?: number\n}\n\nexport function AnnotationPageOverlay({\n  controller,\n  pageNumber,\n  pageWidthPt,\n}: AnnotationPageOverlayProps) {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const size = useElementSize(rootRef)\n  const pxPerPt = size.width / (pageWidthPt ?? FALLBACK_PAGE_WIDTH_PT)\n  const { tool, selectedId, settings } = controller\n\n  const [draft, setDraft] = useState<{ a: Point; b: Point } | null>(null)\n  const [drag, setDrag] = useState<DragState | null>(null)\n  const [openComment, setOpenComment] = useState<string | null>(null)\n\n  const marks = controller.layer.annotations.filter((a) => a.page === pageNumber)\n  const hasText = useHasTextLayer(rootRef)\n  const readOnly = controller.readOnly\n  // On a page with no selectable text (a scan) the text tools draw an area instead.\n  const drawing =\n    !readOnly && (DRAW_TOOLS.includes(tool) || (TEXT_TOOLS.includes(tool) && !hasText))\n\n  // A comment opened by the tool or from elsewhere shows its popover only while it is selected.\n  useEffect(() => {\n    if (openComment && selectedId !== openComment) setOpenComment(null)\n  }, [selectedId, openComment])\n\n  const local = useCallback((e: { clientX: number; clientY: number }): Point => {\n    const r = rootRef.current!.getBoundingClientRect()\n    return { x: e.clientX - r.left, y: e.clientY - r.top }\n  }, [])\n  const pageSize = () => {\n    const r = rootRef.current!.getBoundingClientRect()\n    return { width: r.width, height: r.height }\n  }\n\n  const finishDraft = useCallback(\n    (a: Point, b: Point) => {\n      const page = pageSize()\n      const rect = dragToNorm(a, b, page)\n      if (tool === 'box') {\n        if (isTooSmall(rect)) return\n        controller.add({\n          kind: 'box',\n          page: pageNumber,\n          rect,\n          color: settings.colors.box,\n          strokeWidth: settings.strokeWidth,\n        })\n      } else if (tool === 'highlight') {\n        if (isTooSmall(rect)) return\n        controller.add({\n          kind: 'highlight',\n          page: pageNumber,\n          rects: [rect],\n          color: settings.colors.highlight,\n        })\n      } else if (tool === 'redact-area' || tool === 'redact-text') {\n        if (isTooSmall(rect)) return\n        controller.add({\n          kind: 'redaction',\n          page: pageNumber,\n          rects: [rect],\n          reason: settings.redactionReason,\n          status: 'pending',\n        })\n      } else if (tool === 'stamp' && settings.stampImage) {\n        // One's saved signature: about 6% of the page high, in the picture's proportions.\n        const { image, label } = settings.stampImage\n        const size = pngPixelSize(image)\n        const h = 0.06\n        const w = Math.min(\n          0.5,\n          (h * page.height * (size.width / Math.max(1, size.height))) / page.width\n        )\n        const id = controller.add({\n          kind: 'stamp',\n          page: pageNumber,\n          rect: clampRect({ x: a.x / page.width - w / 2, y: a.y / page.height - h / 2, w, h }),\n          label,\n          color: '#0d1a59',\n          image,\n        })\n        controller.setSettings({ stampImage: null })\n        controller.setTool('select')\n        if (id) controller.select(id)\n      } else if (tool === 'stamp') {\n        const placed = isTooSmall(rect)\n          ? clampRect({\n              x: a.x / page.width - DEFAULT_STAMP.w / 2,\n              y: a.y / page.height - DEFAULT_STAMP.h / 2,\n              ...DEFAULT_STAMP,\n            })\n          : rect\n        controller.add({\n          kind: 'stamp',\n          page: pageNumber,\n          rect: placed,\n          label: settings.stampLabel,\n          color: settings.colors.stamp,\n        })\n      } else if (tool === 'comment') {\n        const anchor = clampRect({\n          x: a.x / page.width,\n          y: a.y / page.height,\n          w: COMMENT_ICON_PX / page.width,\n          h: COMMENT_ICON_PX / page.height,\n        })\n        const id = controller.add({\n          kind: 'comment',\n          page: pageNumber,\n          rect: anchor,\n          body: '',\n          replies: [],\n          resolved: false,\n        })\n        if (id) {\n          controller.setTool('select')\n          controller.select(id)\n          setOpenComment(id)\n        }\n      }\n    },\n    [controller, tool, settings, pageNumber]\n  )\n\n  const onRootPointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {\n    if (!drawing || e.button !== 0 || e.target !== e.currentTarget) return\n    e.currentTarget.setPointerCapture(e.pointerId)\n    const p = local(e)\n    setDraft({ a: p, b: p })\n  }\n  const onRootPointerMove = (e: ReactPointerEvent<HTMLDivElement>) => {\n    if (draft) setDraft({ a: draft.a, b: local(e) })\n  }\n  const onRootPointerUp = (e: ReactPointerEvent<HTMLDivElement>) => {\n    if (!draft) return\n    const b = local(e)\n    const a = draft.a\n    setDraft(null)\n    finishDraft(a, b)\n  }\n\n  const beginDrag = (e: ReactPointerEvent<HTMLElement>, a: Annotation, mode: DragMode) => {\n    const origin = singleRect(a)\n    if (!origin || e.button !== 0 || readOnly) return\n    e.stopPropagation()\n    e.currentTarget.setPointerCapture(e.pointerId)\n    setDrag({\n      id: a.id,\n      mode,\n      startX: e.clientX,\n      startY: e.clientY,\n      origin,\n      rect: origin,\n      moved: false,\n    })\n  }\n  const moveDrag = (e: ReactPointerEvent<HTMLElement>) => {\n    if (!drag) return\n    const page = pageSize()\n    const dxPx = e.clientX - drag.startX\n    const dyPx = e.clientY - drag.startY\n    const moved = drag.moved || Math.hypot(dxPx, dyPx) > MOVE_THRESHOLD_PX\n    if (!moved) return\n    setDrag({\n      ...drag,\n      moved: true,\n      rect: dragRect(drag.origin, drag.mode, dxPx / page.width, dyPx / page.height),\n    })\n  }\n  const endDrag = (a: Annotation) => {\n    if (!drag) return\n    if (drag.moved) controller.update(a.id, patchForRect(a, drag.rect))\n    setDrag(null)\n  }\n\n  // View only: comments still open (to be read); nothing else reacts to the pointer.\n  const interactive = (a: Annotation) =>\n    readOnly\n      ? a.kind === 'comment'\n      : tool === 'select' || (tool === 'comment' && a.kind === 'comment')\n\n  const selected = marks.find((a) => a.id === selectedId)\n\n  return (\n    <div\n      ref={rootRef}\n      {...{ [PAGE_ATTRIBUTE]: pageNumber }}\n      data-testid={`annotation-overlay-${pageNumber}`}\n      className={cn(\n        'absolute inset-0 z-10 select-none overflow-hidden',\n        drawing && 'cursor-crosshair'\n      )}\n      style={{\n        pointerEvents: drawing ? 'auto' : 'none',\n        touchAction: drawing ? 'none' : undefined,\n      }}\n      onPointerDown={onRootPointerDown}\n      onPointerMove={onRootPointerMove}\n      onPointerUp={onRootPointerUp}\n      onPointerCancel={() => setDraft(null)}\n    >\n      {marks.map((a) => (\n        <MarkView\n          key={a.id}\n          annotation={a}\n          rectOverride={drag?.id === a.id ? drag.rect : undefined}\n          pxPerPt={pxPerPt}\n          width={size.width}\n          height={size.height}\n          selected={a.id === selectedId}\n          interactive={interactive(a)}\n          onPointerDown={(e) => {\n            if (!interactive(a)) return\n            e.stopPropagation()\n            controller.select(a.id)\n            if (a.kind === 'comment') setOpenComment(a.id)\n            beginDrag(e, a, 'move')\n          }}\n          onPointerMove={moveDrag}\n          onPointerUp={() => endDrag(a)}\n          onActivate={() => {\n            controller.select(a.id)\n            if (a.kind === 'comment') setOpenComment(a.id)\n          }}\n          onDelete={() => controller.remove(a.id)}\n        />\n      ))}\n\n      {selected && tool === 'select' && !readOnly && singleRect(selected) && (\n        <Handles\n          rect={drag?.id === selected.id ? drag.rect : singleRect(selected)!}\n          onPointerDown={(e, mode) => beginDrag(e, selected, mode)}\n          onPointerMove={moveDrag}\n          onPointerUp={() => endDrag(selected)}\n        />\n      )}\n\n      {selected && tool === 'select' && !readOnly && (\n        <ActionBar\n          annotation={selected}\n          controller={controller}\n          rect={drag?.id === selected.id ? drag.rect : firstRect(selected)}\n        />\n      )}\n\n      {draft && <Draft draft={draft} tool={tool} />}\n\n      {openComment && selected?.kind === 'comment' && selected.id === openComment && (\n        <CommentPopover\n          key={selected.id}\n          annotation={selected}\n          controller={controller}\n          pageHeight={size.height}\n          onClose={() => {\n            setOpenComment(null)\n            controller.select(null)\n          }}\n        />\n      )}\n    </div>\n  )\n}\n\nconst firstRect = (a: Annotation): NormRect =>\n  a.kind === 'highlight' || a.kind === 'redaction' ? a.rects[0] : a.rect\n\ninterface MarkViewProps {\n  annotation: Annotation\n  rectOverride?: NormRect\n  pxPerPt: number\n  width: number\n  height: number\n  selected: boolean\n  interactive: boolean\n  onPointerDown: (e: ReactPointerEvent<HTMLElement>) => void\n  onPointerMove: (e: ReactPointerEvent<HTMLElement>) => void\n  onPointerUp: () => void\n  onActivate: () => void\n  onDelete: () => void\n}\n\nfunction MarkView(props: MarkViewProps) {\n  const { annotation: a, rectOverride, pxPerPt, width, height, selected, interactive } = props\n  const handlers = {\n    onPointerDown: props.onPointerDown,\n    onPointerMove: props.onPointerMove,\n    onPointerUp: props.onPointerUp,\n    onPointerCancel: props.onPointerUp,\n    onKeyDown: (e: KeyboardEvent<HTMLElement>) => {\n      if (e.key === 'Enter') props.onActivate()\n      if (e.key === 'Delete' || e.key === 'Backspace') {\n        e.preventDefault()\n        props.onDelete()\n      }\n    },\n  }\n  const base = (label: string): Record<string, unknown> => ({\n    'data-testid': `annotation-mark-${a.id}`,\n    'data-kind': a.kind,\n    'data-selected': selected ? 'true' : undefined,\n    role: 'button',\n    tabIndex: interactive ? 0 : -1,\n    'aria-label': label,\n    ...handlers,\n  })\n  const ring = selected ? 'outline outline-2 outline-offset-2 outline-primary' : ''\n  const events = interactive ? 'auto' : 'none'\n  // A selected mark that can be moved must not be taken as a page pan by a finger.\n  const dragsByTouch = selected && singleRect(a) !== null\n  const cursor = interactive ? (singleRect(a) ? 'move' : 'pointer') : undefined\n\n  if (a.kind === 'highlight') {\n    return (\n      <>\n        {a.rects.map((r, i) => (\n          <div\n            key={i}\n            {...(i === 0 ? base(`Highlight: ${a.text ?? ''}`) : {})}\n            className={cn('absolute rounded-sm', i === 0 && ring)}\n            style={{\n              ...rectStyle(r),\n              background: a.color,\n              mixBlendMode: 'multiply',\n              opacity: 0.7,\n              pointerEvents: events,\n              touchAction: dragsByTouch ? 'none' : undefined,\n              cursor,\n            }}\n          />\n        ))}\n      </>\n    )\n  }\n\n  if (a.kind === 'box') {\n    const r = rectOverride ?? a.rect\n    return (\n      <div\n        {...base('Box')}\n        className={cn('absolute', ring)}\n        style={{\n          ...rectStyle(r),\n          border: `${a.strokeWidth * pxPerPt}px solid ${a.color}`,\n          pointerEvents: events,\n          touchAction: dragsByTouch ? 'none' : undefined,\n          cursor,\n          boxSizing: 'border-box',\n        }}\n      />\n    )\n  }\n\n  if (a.kind === 'stamp' && a.image) {\n    const r = rectOverride ?? a.rect\n    return (\n      <div\n        {...base(`Stamp: ${a.label}`)}\n        className={cn('absolute', ring)}\n        style={{\n          ...rectStyle(r),\n          pointerEvents: events,\n          touchAction: dragsByTouch ? 'none' : undefined,\n          cursor,\n        }}\n      >\n        <img\n          src={`data:image/png;base64,${a.image}`}\n          alt={a.label}\n          draggable={false}\n          className=\"pointer-events-none h-full w-full object-contain select-none\"\n        />\n      </div>\n    )\n  }\n\n  if (a.kind === 'stamp') {\n    const r = rectOverride ?? a.rect\n    const fontPx = Math.max(\n      6,\n      Math.min(r.h * height * 0.6, (r.w * width * 0.9) / Math.max(1, a.label.length * 0.7))\n    )\n    return (\n      <div\n        {...base(`Stamp: ${a.label}`)}\n        className={cn('absolute flex items-center justify-center font-bold uppercase', ring)}\n        style={{\n          ...rectStyle(r),\n          border: `${2 * pxPerPt}px solid ${a.color}`,\n          color: a.color,\n          fontSize: fontPx,\n          lineHeight: 1,\n          pointerEvents: events,\n          touchAction: dragsByTouch ? 'none' : undefined,\n          cursor,\n          boxSizing: 'border-box',\n          fontFamily: 'Helvetica, Arial, sans-serif',\n        }}\n      >\n        {a.label}\n      </div>\n    )\n  }\n\n  if (a.kind === 'comment') {\n    const r = rectOverride ?? a.rect\n    return (\n      <button\n        type=\"button\"\n        {...base(`Comment: ${a.body || 'empty'}`)}\n        // Clicking a marker must not take focus from the text box it opens (see CommentPopover).\n        onMouseDown={(e) => e.preventDefault()}\n        className={cn(\n          'absolute flex items-center justify-center rounded-md border border-amber-700/60 bg-amber-300 text-amber-900 shadow-sm',\n          a.resolved && 'opacity-50',\n          ring\n        )}\n        style={{\n          left: pct(r.x),\n          top: pct(r.y),\n          width: COMMENT_ICON_PX,\n          height: COMMENT_ICON_PX,\n          pointerEvents: events,\n          touchAction: dragsByTouch ? 'none' : undefined,\n          cursor,\n        }}\n      >\n        <MessageSquare size={14} />\n        {a.replies.length > 0 && (\n          <span className=\"absolute -right-1 -top-1 rounded-full bg-amber-900 px-1 text-[9px] leading-3 text-white\">\n            {a.replies.length}\n          </span>\n        )}\n      </button>\n    )\n  }\n\n  return <RedactionView {...props} annotation={a} ring={ring} cursor={cursor} base={base} />\n}\n\nfunction RedactionView({\n  annotation: a,\n  rectOverride,\n  interactive,\n  selected,\n  ring,\n  cursor,\n  base,\n}: MarkViewProps & {\n  annotation: RedactionAnnotation\n  ring: string\n  cursor: string | undefined\n  base: (label: string) => Record<string, unknown>\n}) {\n  const events = interactive ? 'auto' : 'none'\n  const dragsByTouch = selected && singleRect(a) !== null\n  const rects = rectOverride ? [rectOverride] : a.rects\n  const approved = a.status === 'approved'\n  const rejected = a.status === 'rejected'\n  // The reason is what a reviewer approves or rejects against: hover and screen readers get it whole.\n  const label = `Redaction (${a.status}, not applied): ${a.reason}`\n  return (\n    <>\n      {rects.map((r, i) => (\n        <div\n          key={i}\n          {...(i === 0 ? { ...base(label), title: label } : {})}\n          data-status={i === 0 ? a.status : undefined}\n          className={cn(\n            'absolute flex items-center justify-center overflow-hidden text-[10px] leading-none',\n            i === 0 && ring\n          )}\n          style={{\n            ...rectStyle(r),\n            pointerEvents: events,\n            touchAction: dragsByTouch ? 'none' : undefined,\n            cursor,\n            boxSizing: 'border-box',\n            ...(approved\n              ? { background: '#000', color: '#fff' }\n              : rejected\n                ? { border: '1px dotted #868e96', opacity: 0.6 }\n                : {\n                    background: 'rgba(224,49,49,0.18)',\n                    border: '2px dashed #e03131',\n                    color: '#c92a2a',\n                  }),\n          }}\n        >\n          {i === 0 && !rejected && <span className=\"truncate px-1\">[REDACTED]</span>}\n        </div>\n      ))}\n    </>\n  )\n}\n\nfunction Draft({ draft, tool }: { draft: { a: Point; b: Point }; tool: string }) {\n  const x = Math.min(draft.a.x, draft.b.x)\n  const y = Math.min(draft.a.y, draft.b.y)\n  const w = Math.abs(draft.b.x - draft.a.x)\n  const h = Math.abs(draft.b.y - draft.a.y)\n  const redact = tool === 'redact-area' || tool === 'redact-text'\n  return (\n    <div\n      data-testid=\"annotation-draft\"\n      className=\"pointer-events-none absolute\"\n      style={{\n        left: x,\n        top: y,\n        width: w,\n        height: h,\n        border: redact ? '2px dashed #e03131' : '2px solid #1c7ed6',\n        background: redact ? 'rgba(224,49,49,0.18)' : 'rgba(28,126,214,0.08)',\n      }}\n    />\n  )\n}\n\nconst HANDLES: Array<{ mode: DragMode; style: CSSProperties; cursor: string }> = [\n  { mode: 'nw', style: { left: 0, top: 0 }, cursor: 'nwse-resize' },\n  { mode: 'ne', style: { left: '100%', top: 0 }, cursor: 'nesw-resize' },\n  { mode: 'sw', style: { left: 0, top: '100%' }, cursor: 'nesw-resize' },\n  { mode: 'se', style: { left: '100%', top: '100%' }, cursor: 'nwse-resize' },\n]\n\nfunction Handles({\n  rect,\n  onPointerDown,\n  onPointerMove,\n  onPointerUp,\n}: {\n  rect: NormRect\n  onPointerDown: (e: ReactPointerEvent<HTMLElement>, mode: DragMode) => void\n  onPointerMove: (e: ReactPointerEvent<HTMLElement>) => void\n  onPointerUp: () => void\n}) {\n  return (\n    <div className=\"pointer-events-none absolute\" style={rectStyle(rect)}>\n      {HANDLES.map((h) => (\n        // The visible dot is small; the element a finger or pointer hits is a larger transparent\n        // square around it (44px on touch screens, the usual minimum target).\n        <div\n          key={h.mode}\n          data-testid={`annotation-handle-${h.mode}`}\n          className=\"pointer-events-auto absolute flex h-6 w-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center pointer-coarse:h-11 pointer-coarse:w-11\"\n          style={{ ...h.style, cursor: h.cursor, touchAction: 'none' }}\n          onPointerDown={(e) => onPointerDown(e, h.mode)}\n          onPointerMove={onPointerMove}\n          onPointerUp={onPointerUp}\n          onPointerCancel={onPointerUp}\n        >\n          <span className=\"pointer-events-none h-3 w-3 rounded-full border-2 border-primary bg-background\" />\n        </div>\n      ))}\n    </div>\n  )\n}\n\nconst ACTION =\n  'inline-flex h-7 w-7 items-center justify-center rounded text-foreground hover:bg-muted'\n\nfunction ActionBar({\n  annotation: a,\n  controller,\n  rect,\n}: {\n  annotation: Annotation\n  controller: AnnotationController\n  rect: NormRect\n}) {\n  // Sit above the mark; flip below when it is too close to the top of the page.\n  const above = rect.y > 0.05\n  return (\n    <div\n      data-testid=\"annotation-actions\"\n      className=\"pointer-events-auto absolute z-20 flex gap-0.5 rounded-md border border-border bg-background p-0.5 shadow-md\"\n      style={{\n        left: pct(rect.x),\n        top: above ? `calc(${pct(rect.y)} - 36px)` : `calc(${pct(rect.y + rect.h)} + 6px)`,\n      }}\n      onPointerDown={(e) => e.stopPropagation()}\n    >\n      {a.kind === 'redaction' && (\n        <span\n          className=\"max-w-44 truncate self-center px-1.5 text-xs text-muted-foreground\"\n          title={a.reason}\n          data-testid=\"annotation-action-reason\"\n        >\n          {a.reason}\n        </span>\n      )}\n      {a.kind === 'redaction' && a.status !== 'approved' && (\n        <button\n          type=\"button\"\n          className={ACTION}\n          title=\"Approve redaction\"\n          aria-label=\"Approve redaction\"\n          data-testid=\"annotation-action-approve\"\n          onClick={() => controller.setRedactionStatus([a.id], 'approved')}\n        >\n          <Check size={15} />\n        </button>\n      )}\n      {a.kind === 'redaction' && a.status !== 'rejected' && (\n        <button\n          type=\"button\"\n          className={ACTION}\n          title=\"Reject redaction (leave visible)\"\n          aria-label=\"Reject redaction\"\n          data-testid=\"annotation-action-reject\"\n          onClick={() => controller.setRedactionStatus([a.id], 'rejected')}\n        >\n          <X size={15} />\n        </button>\n      )}\n      {a.kind === 'redaction' && a.status !== 'pending' && (\n        <button\n          type=\"button\"\n          className={ACTION}\n          title=\"Back to pending\"\n          aria-label=\"Mark pending\"\n          data-testid=\"annotation-action-pending\"\n          onClick={() => controller.setRedactionStatus([a.id], 'pending')}\n        >\n          <RotateCcw size={15} />\n        </button>\n      )}\n      <button\n        type=\"button\"\n        className={ACTION}\n        title=\"Delete\"\n        aria-label=\"Delete annotation\"\n        data-testid=\"annotation-action-delete\"\n        onClick={() => controller.remove(a.id)}\n      >\n        <Trash2 size={15} />\n      </button>\n    </div>\n  )\n}\n\nfunction CommentPopover({\n  annotation: a,\n  controller,\n  pageHeight,\n  onClose,\n}: {\n  annotation: CommentAnnotation\n  controller: AnnotationController\n  pageHeight: number\n  onClose: () => void\n}) {\n  const [body, setBody] = useState(a.body)\n  const [reply, setReply] = useState('')\n  const [lift, setLift] = useState(0)\n  const popRef = useRef<HTMLDivElement>(null)\n  // Text typed but not yet saved; kept in a ref so the unmount cleanup below sees the latest.\n  const unsaved = useRef<string | null>(null)\n  const readOnly = controller.readOnly\n  const mine = a.author === controller.author && !readOnly\n  useEffect(() => setBody(a.body), [a.body])\n  // A comment low on the page would hang its reply box past the page edge, where the\n  // overlay clips it; lift the popover just enough to keep it on the page, never past its top.\n  useLayoutEffect(() => {\n    const el = popRef.current\n    if (!el) return\n    const top = a.rect.y * pageHeight\n    const fit = () => setLift(Math.min(top, Math.max(0, top + el.offsetHeight - pageHeight)))\n    fit()\n    const observer = new ResizeObserver(fit)\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [a.rect.y, pageHeight])\n\n  const commitBody = () => {\n    if (mine && body !== a.body) controller.update(a.id, { body })\n    unsaved.current = null\n  }\n  // Switching to another comment unmounts this box (its key is the comment id): save what was\n  // typed here then, whether or not the text box got a blur first.\n  useEffect(\n    () => () => {\n      if (unsaved.current !== null) controller.update(a.id, { body: unsaved.current })\n      unsaved.current = null\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- runs once, when this comment's box unmounts\n    [a.id]\n  )\n  const close = () => {\n    commitBody()\n    // an empty comment with no replies is a stray click, not a note worth keeping\n    if (!readOnly && body.trim() === '' && a.replies.length === 0) controller.remove(a.id)\n    onClose()\n  }\n  const sendReply = () => {\n    const text = reply.trim()\n    if (!text) return\n    commitBody()\n    controller.reply(a.id, text)\n    setReply('')\n  }\n  const onRight = a.rect.x > 0.6\n\n  return (\n    <div\n      ref={popRef}\n      data-testid=\"annotation-comment-popover\"\n      className=\"pointer-events-auto absolute z-30 w-64 rounded-lg border border-border bg-background p-3 text-sm shadow-lg\"\n      style={{\n        top: pct(a.rect.y),\n        marginTop: -lift,\n        ...(onRight\n          ? { right: `calc(${pct(1 - a.rect.x)} + 8px)` }\n          : { left: `calc(${pct(a.rect.x)} + ${COMMENT_ICON_PX + 8}px)` }),\n      }}\n      onPointerDown={(e) => e.stopPropagation()}\n    >\n      <div className=\"mb-2 flex items-center justify-between gap-2 text-xs text-muted-foreground\">\n        <span className=\"truncate\">\n          {a.author} \u00B7 {new Date(a.createdAt).toLocaleString()}\n        </span>\n        <button\n          type=\"button\"\n          aria-label=\"Close comment\"\n          data-testid=\"annotation-comment-close\"\n          className={ACTION}\n          onClick={close}\n        >\n          <X size={14} />\n        </button>\n      </div>\n      <textarea\n        autoFocus={a.body === ''}\n        data-testid=\"annotation-comment-body\"\n        className=\"field-sizing-content max-h-60 min-h-24 w-full resize-y rounded-md border border-input bg-background p-2 text-sm\"\n        placeholder=\"Add a comment\"\n        value={body}\n        readOnly={!mine}\n        onChange={(e) => {\n          setBody(e.target.value)\n          unsaved.current = e.target.value\n        }}\n        onBlur={commitBody}\n        onKeyDown={(e) => {\n          if (e.key === 'Escape') close()\n          if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {\n            commitBody()\n            onClose()\n          }\n        }}\n      />\n      {a.replies.length > 0 && (\n        <ul\n          className=\"mt-2 max-h-40 space-y-2 overflow-y-auto\"\n          data-testid=\"annotation-comment-replies\"\n        >\n          {a.replies.map((r) => (\n            <li key={r.id} className=\"rounded-md bg-muted p-2\">\n              <div className=\"text-xs text-muted-foreground\">{r.author}</div>\n              <div className=\"whitespace-pre-wrap break-words\">{r.body}</div>\n            </li>\n          ))}\n        </ul>\n      )}\n      {!readOnly && (\n        <div className=\"mt-2 flex gap-1\">\n          <input\n            data-testid=\"annotation-comment-reply\"\n            className=\"h-8 min-w-0 flex-1 rounded-md border border-input bg-background px-2 text-sm\"\n            placeholder=\"Reply\"\n            value={reply}\n            onChange={(e) => setReply(e.target.value)}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter') {\n                e.preventDefault()\n                sendReply()\n              }\n            }}\n          />\n          <button\n            type=\"button\"\n            aria-label=\"Send reply\"\n            data-testid=\"annotation-comment-send\"\n            className={ACTION}\n            onClick={sendReply}\n          >\n            <Send size={14} />\n          </button>\n        </div>\n      )}\n      {readOnly ? (\n        <div className=\"mt-2 text-xs text-muted-foreground\" data-testid=\"annotation-comment-status\">\n          {a.resolved ? 'Resolved' : 'Open'}\n        </div>\n      ) : (\n        <div className=\"mt-2 flex items-center justify-between\">\n          <button\n            type=\"button\"\n            data-testid=\"annotation-comment-resolve\"\n            className=\"text-xs text-primary hover:underline\"\n            onClick={() => controller.resolve(a.id, !a.resolved)}\n          >\n            {a.resolved ? 'Reopen' : 'Resolve'}\n          </button>\n          <button\n            type=\"button\"\n            data-testid=\"annotation-comment-delete\"\n            className=\"text-xs text-destructive hover:underline\"\n            onClick={() => {\n              controller.remove(a.id)\n              onClose()\n            }}\n          >\n            Delete\n          </button>\n        </div>\n      )}\n    </div>\n  )\n}\n\n/** A PNG's pixel size from its header (IHDR). */\nfunction pngPixelSize(base64: string): { width: number; height: number } {\n  const raw = atob(base64.slice(0, 64))\n  const at = (i: number) =>\n    ((raw.charCodeAt(i) << 24) |\n      (raw.charCodeAt(i + 1) << 16) |\n      (raw.charCodeAt(i + 2) << 8) |\n      raw.charCodeAt(i + 3)) >>>\n    0\n  return { width: at(16), height: at(20) }\n}\n"],
+  "mappings": "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",
+  "names": ["size"]
+}

package/dist/annotations/AnnotationToolbar.js

@@ -0,0 +1,398 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import {
+  ChevronDown,
+  EyeOff,
+  Highlighter,
+  MessageSquare,
+  MousePointer2,
+  Redo2,
+  ScanText,
+  Square,
+  Stamp,
+  Undo2
+} from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { Button } from "../ui/button.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "../ui/dropdown-menu.js";
+import {
+  HIGHLIGHT_COLORS,
+  MARK_COLORS,
+  REDACTION_REASONS,
+  STAMP_PRESETS,
+  layerStatusText
+} from "./controller.js";
+import { pendingRedactions } from "./state.js";
+import { useAnnotationShortcuts } from "./useAnnotationShortcuts.js";
+import { useTextSelectionMarks } from "./useTextSelectionMarks.js";
+const TOOLS = [
+  { tool: "select", label: "Select", icon: /* @__PURE__ */ jsx(MousePointer2, { size: 16 }) },
+  { tool: "highlight", label: "Highlight", icon: /* @__PURE__ */ jsx(Highlighter, { size: 16 }) },
+  { tool: "box", label: "Box", icon: /* @__PURE__ */ jsx(Square, { size: 16 }) },
+  { tool: "comment", label: "Comment", icon: /* @__PURE__ */ jsx(MessageSquare, { size: 16 }) },
+  { tool: "stamp", label: "Stamp", icon: /* @__PURE__ */ jsx(Stamp, { size: 16 }) },
+  { tool: "redact-text", label: "Redact text", icon: /* @__PURE__ */ jsx(ScanText, { size: 16 }) },
+  { tool: "redact-area", label: "Redact area", icon: /* @__PURE__ */ jsx(EyeOff, { size: 16 }) }
+];
+function Swatches({
+  colors,
+  value,
+  onChange,
+  label
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", role: "group", "aria-label": label, children: colors.map((c) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": `${label} ${c}`,
+      "aria-pressed": c === value,
+      "data-testid": `annotation-color-${c.slice(1)}`,
+      className: cn(
+        "h-5 w-5 rounded-full border border-border",
+        c === value && "ring-2 ring-primary ring-offset-1"
+      ),
+      style: { background: c },
+      onClick: () => onChange(c)
+    },
+    c
+  )) });
+}
+function PresetField({
+  label,
+  testId,
+  value,
+  presets,
+  maxLength,
+  className,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        "aria-label": label,
+        "data-testid": testId,
+        className: cn("h-8 rounded-l-md border border-input bg-background px-2 text-sm", className),
+        value,
+        maxLength,
+        onFocus: (e) => e.currentTarget.select(),
+        onChange: (e) => onChange(e.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": `Choose ${label.toLowerCase()}`,
+          title: `Choose ${label.toLowerCase()}`,
+          "data-testid": `${testId}-presets`,
+          className: "flex h-8 items-center rounded-r-md border border-l-0 border-input bg-background px-1.5 text-muted-foreground hover:bg-accent",
+          children: /* @__PURE__ */ jsx(ChevronDown, { size: 14 })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", children: presets.map((p) => /* @__PURE__ */ jsx(DropdownMenuItem, { onSelect: () => onChange(p), children: p }, p)) })
+    ] })
+  ] });
+}
+function AnnotationToolbar({
+  controller,
+  onFreeze,
+  actions,
+  className
+}) {
+  useTextSelectionMarks(controller);
+  useAnnotationShortcuts(controller);
+  const [reviewing, setReviewing] = useState(false);
+  const { tool, settings } = controller;
+  const pending = pendingRedactions(controller.layer);
+  const redactions = controller.layer.annotations.filter((a) => a.kind === "redaction");
+  const redactionCount = redactions.length;
+  const approved = redactions.filter((a) => a.status === "approved").length;
+  const rejected = redactions.filter((a) => a.status === "rejected").length;
+  const colored = tool === "highlight" || tool === "box" || tool === "stamp";
+  const redacting = tool === "redact-text" || tool === "redact-area";
+  const status = layerStatusText(controller);
+  const editable = !controller.readOnly;
+  const redactionControls = /* @__PURE__ */ jsxs(Fragment, { children: [
+    editable && redacting && /* @__PURE__ */ jsx(
+      PresetField,
+      {
+        label: "Redaction reason",
+        testId: "annotation-redaction-reason",
+        className: "w-44",
+        value: settings.redactionReason,
+        presets: REDACTION_REASONS,
+        maxLength: 80,
+        onChange: (redactionReason) => controller.setSettings({ redactionReason })
+      }
+    ),
+    redactionCount > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", "data-testid": "annotation-review", children: [
+      /* @__PURE__ */ jsxs("span", { className: "rounded-md bg-muted px-2 py-1", "data-testid": "annotation-pending-count", children: [
+        pending.length,
+        " pending \xB7 ",
+        approved,
+        " approved, not applied \xB7 ",
+        rejected,
+        " rejected"
+      ] }),
+      editable && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: "outline",
+            disabled: pending.length === 0,
+            "data-testid": "annotation-approve-all",
+            onClick: () => controller.setRedactionStatus(
+              pending.map((a) => a.id),
+              "approved"
+            ),
+            children: "Approve all"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: "outline",
+            disabled: pending.length === 0,
+            "data-testid": "annotation-reject-all",
+            onClick: () => controller.setRedactionStatus(
+              pending.map((a) => a.id),
+              "rejected"
+            ),
+            children: "Reject all"
+          }
+        )
+      ] })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "toolbar",
+      "aria-label": "Annotation tools",
+      "data-testid": "annotation-toolbar",
+      className: cn(
+        "flex flex-wrap items-center gap-x-3 gap-y-2 border-b border-border bg-background px-3 py-2",
+        className
+      ),
+      children: [
+        editable && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center gap-1 border-r border-border pr-3",
+            role: "group",
+            "aria-label": "History",
+            children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  size: "icon",
+                  variant: "ghost",
+                  title: "Undo",
+                  "aria-label": "Undo",
+                  "data-testid": "annotation-undo",
+                  disabled: !controller.canUndo,
+                  onClick: controller.undo,
+                  children: /* @__PURE__ */ jsx(Undo2, { size: 16 })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  size: "icon",
+                  variant: "ghost",
+                  title: "Redo",
+                  "aria-label": "Redo",
+                  "data-testid": "annotation-redo",
+                  disabled: !controller.canRedo,
+                  onClick: controller.redo,
+                  children: /* @__PURE__ */ jsx(Redo2, { size: 16 })
+                }
+              )
+            ]
+          }
+        ),
+        editable && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", role: "group", "aria-label": "Tool", children: TOOLS.map(({ tool: t, label, icon }) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "icon",
+            variant: tool === t ? "default" : "ghost",
+            title: label,
+            "aria-label": label,
+            "aria-pressed": tool === t,
+            "data-testid": `annotation-tool-${t}`,
+            onClick: () => controller.setTool(t),
+            children: icon
+          },
+          t
+        )) }),
+        editable && colored && /* @__PURE__ */ jsx(
+          Swatches,
+          {
+            label: "Colour",
+            colors: tool === "highlight" ? HIGHLIGHT_COLORS : MARK_COLORS,
+            value: settings.colors[tool],
+            onChange: (c) => controller.setSettings({ colors: { ...settings.colors, [tool]: c } })
+          }
+        ),
+        editable && tool === "stamp" && settings.stampImage && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", "data-testid": "annotation-place-signature", children: [
+          "Click where your ",
+          settings.stampImage.label.toLowerCase(),
+          " goes."
+        ] }),
+        editable && tool === "stamp" && !settings.stampImage && /* @__PURE__ */ jsx(
+          PresetField,
+          {
+            label: "Stamp text",
+            testId: "annotation-stamp-label",
+            className: "w-40",
+            value: settings.stampLabel,
+            presets: STAMP_PRESETS,
+            maxLength: 40,
+            onChange: (stampLabel) => controller.setSettings({ stampLabel })
+          }
+        ),
+        (redacting || redactionCount > 0) && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex w-full flex-wrap items-center gap-x-3 gap-y-2",
+            "data-testid": "annotation-redaction-row",
+            children: [
+              redactionControls,
+              redactionCount > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    size: "sm",
+                    variant: "outline",
+                    onClick: () => setReviewing((on) => !on),
+                    "aria-expanded": reviewing,
+                    "data-testid": "annotation-review-toggle",
+                    children: "Review redactions"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: "w-full text-xs text-amber-700 dark:text-amber-400",
+                    role: "status",
+                    "data-testid": "annotation-preview-warning",
+                    children: "Preview only: black boxes, including approved ones, have not removed the underlying content. Apply approved redactions to create a redacted copy."
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        reviewing && redactionCount > 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "max-h-64 w-full overflow-auto rounded border",
+            "data-testid": "annotation-redaction-review-list",
+            children: /* @__PURE__ */ jsxs("table", { className: "w-full text-left text-sm", children: [
+              /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                /* @__PURE__ */ jsx("th", { className: "p-2", children: "Page" }),
+                /* @__PURE__ */ jsx("th", { children: "Reason" }),
+                /* @__PURE__ */ jsx("th", { children: "Review status" }),
+                /* @__PURE__ */ jsx("th", { children: "Decision" })
+              ] }) }),
+              /* @__PURE__ */ jsx("tbody", { children: redactions.map((a) => /* @__PURE__ */ jsxs("tr", { className: "border-t", "data-testid": `redaction-review-${a.id}`, children: [
+                /* @__PURE__ */ jsx("td", { className: "p-2", children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => controller.select(a.id), children: [
+                  "Page ",
+                  a.page
+                ] }) }),
+                /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    "aria-label": `Reason for redaction ${a.id}`,
+                    value: a.reason,
+                    disabled: !editable,
+                    className: "rounded border bg-background px-2 py-1",
+                    onChange: (e) => controller.update(a.id, {
+                      reason: e.target.value,
+                      status: "pending",
+                      reviewedBy: void 0,
+                      reviewedAt: void 0
+                    })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("td", { children: a.status === "approved" ? "Approved \xB7 not applied" : a.status }),
+                /* @__PURE__ */ jsx("td", { className: "flex gap-1 p-2", children: editable && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "button",
+                      size: "sm",
+                      variant: "outline",
+                      disabled: a.status === "approved",
+                      onClick: () => controller.setRedactionStatus([a.id], "approved"),
+                      children: "Approve"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "button",
+                      size: "sm",
+                      variant: "outline",
+                      disabled: a.status === "rejected",
+                      onClick: () => controller.setRedactionStatus([a.id], "rejected"),
+                      children: "Reject"
+                    }
+                  )
+                ] }) })
+              ] }, a.id)) })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-end gap-3 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-testid": "annotation-status",
+              role: "status",
+              "data-state": controller.readOnly ? "readonly" : controller.offline ? "offline" : controller.error ? "error" : controller.saving ? "saving" : controller.dirty ? "dirty" : "saved",
+              className: cn(controller.error && !controller.offline && "text-destructive"),
+              title: controller.error ?? void 0,
+              children: status
+            }
+          ),
+          actions,
+          onFreeze && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              "data-testid": "annotation-freeze",
+              onClick: onFreeze,
+              disabled: pending.length > 0,
+              title: pending.length ? "Approve or reject each proposed redaction first" : void 0,
+              children: [
+                /* @__PURE__ */ jsx(EyeOff, { size: 14 }),
+                redactionCount ? "Apply approved redactions" : "Create annotated copy"
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  AnnotationToolbar
+};
+//# sourceMappingURL=AnnotationToolbar.js.map

package/dist/annotations/AnnotationToolbar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/annotations/AnnotationToolbar.tsx"],
+  "sourcesContent": ["/**\n * Toolbar for the annotation layer: pick a tool, set its options, review redactions, undo/redo,\n * and hand off to freezing. Holds no annotation state: everything goes through the controller.\n */\n\nimport { useState, type ReactNode } from 'react'\nimport {\n  ChevronDown,\n  EyeOff,\n  Highlighter,\n  MessageSquare,\n  MousePointer2,\n  Redo2,\n  ScanText,\n  Square,\n  Stamp,\n  Undo2,\n} from 'lucide-react'\nimport { cn } from '../lib/utils'\nimport { Button } from '../ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '../ui/dropdown-menu'\nimport {\n  HIGHLIGHT_COLORS,\n  MARK_COLORS,\n  REDACTION_REASONS,\n  STAMP_PRESETS,\n  type AnnotationController,\n  type AnnotationTool,\n  layerStatusText,\n  type ColoredTool,\n} from './controller'\nimport { pendingRedactions } from './state'\nimport { useAnnotationShortcuts } from './useAnnotationShortcuts'\nimport { useTextSelectionMarks } from './useTextSelectionMarks'\n\nconst TOOLS: Array<{ tool: AnnotationTool; label: string; icon: ReactNode }> = [\n  { tool: 'select', label: 'Select', icon: <MousePointer2 size={16} /> },\n  { tool: 'highlight', label: 'Highlight', icon: <Highlighter size={16} /> },\n  { tool: 'box', label: 'Box', icon: <Square size={16} /> },\n  { tool: 'comment', label: 'Comment', icon: <MessageSquare size={16} /> },\n  { tool: 'stamp', label: 'Stamp', icon: <Stamp size={16} /> },\n  { tool: 'redact-text', label: 'Redact text', icon: <ScanText size={16} /> },\n  { tool: 'redact-area', label: 'Redact area', icon: <EyeOff size={16} /> },\n]\n\nfunction Swatches({\n  colors,\n  value,\n  onChange,\n  label,\n}: {\n  colors: string[]\n  value: string\n  onChange: (color: string) => void\n  label: string\n}) {\n  return (\n    <div className=\"flex items-center gap-1\" role=\"group\" aria-label={label}>\n      {colors.map((c) => (\n        <button\n          key={c}\n          type=\"button\"\n          aria-label={`${label} ${c}`}\n          aria-pressed={c === value}\n          data-testid={`annotation-color-${c.slice(1)}`}\n          className={cn(\n            'h-5 w-5 rounded-full border border-border',\n            c === value && 'ring-2 ring-primary ring-offset-1'\n          )}\n          style={{ background: c }}\n          onClick={() => onChange(c)}\n        />\n      ))}\n    </div>\n  )\n}\n\n/**\n * A text field with its presets one click away. A native `<datalist>` hid them: its popup opens\n * only on some clicks and keys, shows no hint that a list exists, and lives outside the page.\n * The text is selected on focus, so typing (or a finger with no select-all) replaces it.\n */\nfunction PresetField({\n  label,\n  testId,\n  value,\n  presets,\n  maxLength,\n  className,\n  onChange,\n}: {\n  label: string\n  testId: string\n  value: string\n  presets: string[]\n  maxLength: number\n  className: string\n  onChange: (value: string) => void\n}) {\n  return (\n    <div className=\"flex items-center\">\n      <input\n        aria-label={label}\n        data-testid={testId}\n        className={cn('h-8 rounded-l-md border border-input bg-background px-2 text-sm', className)}\n        value={value}\n        maxLength={maxLength}\n        onFocus={(e) => e.currentTarget.select()}\n        onChange={(e) => onChange(e.target.value)}\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <button\n            type=\"button\"\n            aria-label={`Choose ${label.toLowerCase()}`}\n            title={`Choose ${label.toLowerCase()}`}\n            data-testid={`${testId}-presets`}\n            className=\"flex h-8 items-center rounded-r-md border border-l-0 border-input bg-background px-1.5 text-muted-foreground hover:bg-accent\"\n          >\n            <ChevronDown size={14} />\n          </button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          {presets.map((p) => (\n            <DropdownMenuItem key={p} onSelect={() => onChange(p)}>\n              {p}\n            </DropdownMenuItem>\n          ))}\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n\nexport interface AnnotationToolbarProps {\n  controller: AnnotationController\n  /** Apply the annotations and redactions to a new document copy. */\n  onFreeze?: () => void\n  /** Extra host actions at the end of the bar (e.g. \"Download with markup\"). */\n  actions?: ReactNode\n  className?: string\n}\n\nexport function AnnotationToolbar({\n  controller,\n  onFreeze,\n  actions,\n  className,\n}: AnnotationToolbarProps) {\n  useTextSelectionMarks(controller)\n  useAnnotationShortcuts(controller)\n\n  const [reviewing, setReviewing] = useState(false)\n  const { tool, settings } = controller\n  const pending = pendingRedactions(controller.layer)\n  const redactions = controller.layer.annotations.filter((a) => a.kind === 'redaction')\n  const redactionCount = redactions.length\n  const approved = redactions.filter((a) => a.status === 'approved').length\n  const rejected = redactions.filter((a) => a.status === 'rejected').length\n  const colored = tool === 'highlight' || tool === 'box' || tool === 'stamp'\n  const redacting = tool === 'redact-text' || tool === 'redact-area'\n  const status = layerStatusText(controller)\n  const editable = !controller.readOnly\n\n  // The redaction reason and the review row get a line of their own while they apply, so the\n  // page below does not move when the first pending redaction appears.\n  const redactionControls = (\n    <>\n      {editable && redacting && (\n        <PresetField\n          label=\"Redaction reason\"\n          testId=\"annotation-redaction-reason\"\n          className=\"w-44\"\n          value={settings.redactionReason}\n          presets={REDACTION_REASONS}\n          maxLength={80}\n          onChange={(redactionReason) => controller.setSettings({ redactionReason })}\n        />\n      )}\n\n      {redactionCount > 0 && (\n        <div className=\"flex items-center gap-2 text-sm\" data-testid=\"annotation-review\">\n          <span className=\"rounded-md bg-muted px-2 py-1\" data-testid=\"annotation-pending-count\">\n            {pending.length} pending \u00B7 {approved} approved, not applied \u00B7 {rejected} rejected\n          </span>\n          {editable && (\n            <>\n              <Button\n                type=\"button\"\n                size=\"sm\"\n                variant=\"outline\"\n                disabled={pending.length === 0}\n                data-testid=\"annotation-approve-all\"\n                onClick={() =>\n                  controller.setRedactionStatus(\n                    pending.map((a) => a.id),\n                    'approved'\n                  )\n                }\n              >\n                Approve all\n              </Button>\n              <Button\n                type=\"button\"\n                size=\"sm\"\n                variant=\"outline\"\n                disabled={pending.length === 0}\n                data-testid=\"annotation-reject-all\"\n                onClick={() =>\n                  controller.setRedactionStatus(\n                    pending.map((a) => a.id),\n                    'rejected'\n                  )\n                }\n              >\n                Reject all\n              </Button>\n            </>\n          )}\n        </div>\n      )}\n    </>\n  )\n\n  return (\n    <div\n      role=\"toolbar\"\n      aria-label=\"Annotation tools\"\n      data-testid=\"annotation-toolbar\"\n      className={cn(\n        'flex flex-wrap items-center gap-x-3 gap-y-2 border-b border-border bg-background px-3 py-2',\n        className\n      )}\n    >\n      {editable && (\n        <div\n          className=\"flex items-center gap-1 border-r border-border pr-3\"\n          role=\"group\"\n          aria-label=\"History\"\n        >\n          <Button\n            type=\"button\"\n            size=\"icon\"\n            variant=\"ghost\"\n            title=\"Undo\"\n            aria-label=\"Undo\"\n            data-testid=\"annotation-undo\"\n            disabled={!controller.canUndo}\n            onClick={controller.undo}\n          >\n            <Undo2 size={16} />\n          </Button>\n          <Button\n            type=\"button\"\n            size=\"icon\"\n            variant=\"ghost\"\n            title=\"Redo\"\n            aria-label=\"Redo\"\n            data-testid=\"annotation-redo\"\n            disabled={!controller.canRedo}\n            onClick={controller.redo}\n          >\n            <Redo2 size={16} />\n          </Button>\n        </div>\n      )}\n\n      {editable && (\n        <div className=\"flex items-center gap-1\" role=\"group\" aria-label=\"Tool\">\n          {TOOLS.map(({ tool: t, label, icon }) => (\n            <Button\n              key={t}\n              type=\"button\"\n              size=\"icon\"\n              variant={tool === t ? 'default' : 'ghost'}\n              title={label}\n              aria-label={label}\n              aria-pressed={tool === t}\n              data-testid={`annotation-tool-${t}`}\n              onClick={() => controller.setTool(t)}\n            >\n              {icon}\n            </Button>\n          ))}\n        </div>\n      )}\n\n      {editable && colored && (\n        <Swatches\n          label=\"Colour\"\n          colors={tool === 'highlight' ? HIGHLIGHT_COLORS : MARK_COLORS}\n          value={settings.colors[tool as ColoredTool]}\n          onChange={(c) => controller.setSettings({ colors: { ...settings.colors, [tool]: c } })}\n        />\n      )}\n\n      {editable && tool === 'stamp' && settings.stampImage && (\n        <span className=\"text-xs text-muted-foreground\" data-testid=\"annotation-place-signature\">\n          Click where your {settings.stampImage.label.toLowerCase()} goes.\n        </span>\n      )}\n\n      {editable && tool === 'stamp' && !settings.stampImage && (\n        <PresetField\n          label=\"Stamp text\"\n          testId=\"annotation-stamp-label\"\n          className=\"w-40\"\n          value={settings.stampLabel}\n          presets={STAMP_PRESETS}\n          maxLength={40}\n          onChange={(stampLabel) => controller.setSettings({ stampLabel })}\n        />\n      )}\n\n      {(redacting || redactionCount > 0) && (\n        <div\n          className=\"flex w-full flex-wrap items-center gap-x-3 gap-y-2\"\n          data-testid=\"annotation-redaction-row\"\n        >\n          {redactionControls}\n          {redactionCount > 0 && (\n            <>\n              <Button\n                type=\"button\"\n                size=\"sm\"\n                variant=\"outline\"\n                onClick={() => setReviewing((on) => !on)}\n                aria-expanded={reviewing}\n                data-testid=\"annotation-review-toggle\"\n              >\n                Review redactions\n              </Button>\n              <p\n                className=\"w-full text-xs text-amber-700 dark:text-amber-400\"\n                role=\"status\"\n                data-testid=\"annotation-preview-warning\"\n              >\n                Preview only: black boxes, including approved ones, have not removed the underlying\n                content. Apply approved redactions to create a redacted copy.\n              </p>\n            </>\n          )}\n        </div>\n      )}\n\n      {reviewing && redactionCount > 0 && (\n        <div\n          className=\"max-h-64 w-full overflow-auto rounded border\"\n          data-testid=\"annotation-redaction-review-list\"\n        >\n          <table className=\"w-full text-left text-sm\">\n            <thead>\n              <tr>\n                <th className=\"p-2\">Page</th>\n                <th>Reason</th>\n                <th>Review status</th>\n                <th>Decision</th>\n              </tr>\n            </thead>\n            <tbody>\n              {redactions.map((a) => (\n                <tr key={a.id} className=\"border-t\" data-testid={`redaction-review-${a.id}`}>\n                  <td className=\"p-2\">\n                    <button type=\"button\" onClick={() => controller.select(a.id)}>\n                      Page {a.page}\n                    </button>\n                  </td>\n                  <td>\n                    <input\n                      aria-label={`Reason for redaction ${a.id}`}\n                      value={a.reason}\n                      disabled={!editable}\n                      className=\"rounded border bg-background px-2 py-1\"\n                      onChange={(e) =>\n                        controller.update(a.id, {\n                          reason: e.target.value,\n                          status: 'pending',\n                          reviewedBy: undefined,\n                          reviewedAt: undefined,\n                        })\n                      }\n                    />\n                  </td>\n                  <td>{a.status === 'approved' ? 'Approved \u00B7 not applied' : a.status}</td>\n                  <td className=\"flex gap-1 p-2\">\n                    {editable && (\n                      <>\n                        <Button\n                          type=\"button\"\n                          size=\"sm\"\n                          variant=\"outline\"\n                          disabled={a.status === 'approved'}\n                          onClick={() => controller.setRedactionStatus([a.id], 'approved')}\n                        >\n                          Approve\n                        </Button>\n                        <Button\n                          type=\"button\"\n                          size=\"sm\"\n                          variant=\"outline\"\n                          disabled={a.status === 'rejected'}\n                          onClick={() => controller.setRedactionStatus([a.id], 'rejected')}\n                        >\n                          Reject\n                        </Button>\n                      </>\n                    )}\n                  </td>\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        </div>\n      )}\n\n      {/* Its own line, so the tools above never move when the status text or actions change. */}\n      <div className=\"flex w-full items-center justify-end gap-3 text-xs text-muted-foreground\">\n        <span\n          data-testid=\"annotation-status\"\n          role=\"status\"\n          data-state={\n            controller.readOnly\n              ? 'readonly'\n              : controller.offline\n                ? 'offline'\n                : controller.error\n                  ? 'error'\n                  : controller.saving\n                    ? 'saving'\n                    : controller.dirty\n                      ? 'dirty'\n                      : 'saved'\n          }\n          className={cn(controller.error && !controller.offline && 'text-destructive')}\n          title={controller.error ?? undefined}\n        >\n          {status}\n        </span>\n        {actions}\n        {onFreeze && (\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            data-testid=\"annotation-freeze\"\n            onClick={onFreeze}\n            disabled={pending.length > 0}\n            title={pending.length ? 'Approve or reject each proposed redaction first' : undefined}\n          >\n            <EyeOff size={14} />\n            {redactionCount ? 'Apply approved redactions' : 'Create annotated copy'}\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}