pmx-canvas 0.1.16 → 0.1.18

package/src/client/App.tsx

@@ -41,10 +41,12 @@ import { connectSSE } from './state/sse-bridge';
 import {
   IconArrange,
   IconClearTrace,
+  IconEraser,
   IconFitAll,
   IconLogo,
   IconMinimap,
   IconMoon,
+  IconPen,
   IconResetView,
   IconSearch,
   IconShortcuts,
@@ -71,6 +73,8 @@ function sendIntent(type: string, payload: Record<string, unknown> = {}): void {
   });
 }
 
+type AnnotationTool = 'pen' | 'eraser' | null;
+
 function ToolbarHint({
   label,
   detail,
@@ -108,6 +112,9 @@ function Toolbar({
   snapshotBtnRef,
   onOpenPalette,
   onOpenShortcuts,
+  annotationTool,
+  onToggleAnnotationMode,
+  onToggleAnnotationEraser,
 }: {
   minimapVisible: boolean;
   onToggleMinimap: () => void;
@@ -116,6 +123,9 @@ function Toolbar({
   snapshotBtnRef: { current: HTMLButtonElement | null };
   onOpenPalette: () => void;
   onOpenShortcuts: () => void;
+  annotationTool: AnnotationTool;
+  onToggleAnnotationMode: () => void;
+  onToggleAnnotationEraser: () => void;
 }) {
   const status = connectionStatus.value;
   const hasSynced = hasInitialServerLayout.value;
@@ -278,6 +288,37 @@ function Toolbar({
 
         <div class="separator" />
 
+        <ToolbarHint
+          label={annotationTool === 'pen' ? 'Stop annotating' : 'Annotate canvas'}
+          detail="Draw directly on the canvas for human-visible markup"
+        >
+          <button
+            type="button"
+            onClick={onToggleAnnotationMode}
+            aria-label={annotationTool === 'pen' ? 'Stop annotating' : 'Annotate canvas'}
+            aria-pressed={annotationTool === 'pen'}
+            style={{ color: annotationTool === 'pen' ? 'var(--c-accent)' : undefined }}
+          >
+            <IconPen />
+          </button>
+        </ToolbarHint>
+        <ToolbarHint
+          label={annotationTool === 'eraser' ? 'Stop erasing' : 'Erase annotations'}
+          detail="Click a drawn annotation to remove it"
+        >
+          <button
+            type="button"
+            onClick={onToggleAnnotationEraser}
+            aria-label={annotationTool === 'eraser' ? 'Stop erasing' : 'Erase annotations'}
+            aria-pressed={annotationTool === 'eraser'}
+            style={{ color: annotationTool === 'eraser' ? 'var(--c-accent)' : undefined }}
+          >
+            <IconEraser />
+          </button>
+        </ToolbarHint>
+
+        <div class="separator" />
+
         <ToolbarHint label="Search nodes and actions" shortcut={`${MOD_KEY}+K`}>
           <button
             type="button"
@@ -341,6 +382,7 @@ export function App() {
   const [snapshotOpen, setSnapshotOpen] = useState(false);
   const [paletteOpen, setPaletteOpen] = useState(false);
   const [shortcutsOpen, setShortcutsOpen] = useState(false);
+  const [annotationTool, setAnnotationTool] = useState<AnnotationTool>(null);
   const snapshotBtnRef = useRef<HTMLButtonElement>(null);
   const { menu, openNodeMenu, openCanvasMenu, closeMenu } = useContextMenu();
   const hasInitialLayout = hasInitialServerLayout.value;
@@ -348,14 +390,18 @@ export function App() {
   const handleToggleMinimap = useCallback(() => setMinimapVisible((v) => !v), []);
   const handleToggleSnapshot = useCallback(() => setSnapshotOpen((v) => !v), []);
   const handleCloseSnapshot = useCallback(() => setSnapshotOpen(false), []);
+  const handleToggleAnnotationMode = useCallback(() => setAnnotationTool((tool) => tool === 'pen' ? null : 'pen'), []);
+  const handleToggleAnnotationEraser = useCallback(() => setAnnotationTool((tool) => tool === 'eraser' ? null : 'eraser'), []);
 
   const handleMinimapNavigate = useCallback((x: number, y: number) => {
     animateViewport({ x, y, scale: viewport.value.scale }, 200);
   }, []);
 
   useEffect(() => {
-    const disconnect = connectSSE();
+    return connectSSE();
+  }, []);
 
+  useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       const mod = e.metaKey || e.ctrlKey;
 
@@ -366,6 +412,13 @@ export function App() {
         return;
       }
 
+      // Esc exits annotation tools before handling overlays or selection.
+      if (e.key === 'Escape' && annotationTool) {
+        e.preventDefault();
+        setAnnotationTool(null);
+        return;
+      }
+
       // Esc always collapses expanded node first (even from inside inputs)
       if (e.key === 'Escape' && expandedNodeId.value && !pendingExpandedNodeCloseId.value) {
         e.preventDefault();
@@ -428,10 +481,9 @@ export function App() {
 
     document.addEventListener('keydown', handleKeyDown);
     return () => {
-      disconnect();
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [closeMenu, paletteOpen, shortcutsOpen]);
+  }, [annotationTool, closeMenu, paletteOpen, shortcutsOpen]);
 
   useEffect(() => {
     if (!hasInitialLayout) return;
@@ -465,6 +517,9 @@ export function App() {
           snapshotBtnRef={snapshotBtnRef}
           onOpenPalette={() => setPaletteOpen(true)}
           onOpenShortcuts={() => setShortcutsOpen((v) => !v)}
+          annotationTool={annotationTool}
+          onToggleAnnotationMode={handleToggleAnnotationMode}
+          onToggleAnnotationEraser={handleToggleAnnotationEraser}
         />
         <div class="hud-right">
           {dockedRight.map((n) => (
@@ -477,6 +532,8 @@ export function App() {
       <CanvasViewport
         onNodeContextMenu={openNodeMenu}
         onCanvasContextMenu={openCanvasMenu}
+        annotationMode={annotationTool !== null}
+        annotationTool={annotationTool}
       />
       {hasInitialLayout && allNodes.filter((n) => !n.dockPosition).length === 0 && (
         <WelcomeCard onOpenPalette={() => setPaletteOpen(true)} />

package/src/client/canvas/AnnotationLayer.tsx

@@ -0,0 +1,28 @@
+import type { CanvasAnnotation, CanvasAnnotationPoint } from '../types';
+
+function pointsToPath(points: CanvasAnnotationPoint[]): string {
+  const [first, ...rest] = points;
+  if (!first) return '';
+  return rest.reduce((path, point) => `${path} L ${point.x} ${point.y}`, `M ${first.x} ${first.y}`);
+}
+
+export function AnnotationLayer({ annotations }: { annotations: CanvasAnnotation[] }) {
+  if (annotations.length === 0) return null;
+
+  return (
+    <svg class="annotation-layer" aria-hidden="true">
+      {annotations.map((annotation) => (
+        <path
+          key={annotation.id}
+          d={pointsToPath(annotation.points)}
+          fill="none"
+          stroke={annotation.color === 'currentColor' ? 'var(--c-annotation)' : annotation.color}
+          stroke-width={annotation.width}
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          opacity="0.9"
+        />
+      ))}
+    </svg>
+  );
+}

package/src/client/canvas/CanvasViewport.tsx

@@ -20,16 +20,20 @@ import {
   draggingEdge,
   edges,
   expandedNodeId,
+  annotations,
   nodes,
   selectNodes,
   setViewport,
   viewport,
+  createAnnotationFromClient,
+  removeAnnotationFromClient,
 } from '../state/canvas-store';
 import { createEdgeFromClient, createNodeFromClient } from '../state/intent-bridge';
-import type { CanvasNodeState } from '../types';
+import type { CanvasAnnotation, CanvasNodeState } from '../types';
 import { FocusFieldLayer } from './FocusFieldLayer';
 import { CanvasNode } from './CanvasNode';
 import { EdgeLayer } from './EdgeLayer';
+import { AnnotationLayer } from './AnnotationLayer';
 import { activeGuides } from './snap-guides';
 import { usePanZoom } from './use-pan-zoom';
 
@@ -70,6 +74,45 @@ function renderNodeContent(node: CanvasNodeState) {
   }
 }
 
+function distanceToSegment(
+  point: { x: number; y: number },
+  start: { x: number; y: number },
+  end: { x: number; y: number },
+): number {
+  const dx = end.x - start.x;
+  const dy = end.y - start.y;
+  const lengthSquared = dx * dx + dy * dy;
+  if (lengthSquared === 0) return Math.hypot(point.x - start.x, point.y - start.y);
+  const t = Math.max(0, Math.min(1, ((point.x - start.x) * dx + (point.y - start.y) * dy) / lengthSquared));
+  return Math.hypot(point.x - (start.x + t * dx), point.y - (start.y + t * dy));
+}
+
+function findAnnotationAtPoint(
+  annotationList: CanvasAnnotation[],
+  point: { x: number; y: number },
+  hitRadius: number,
+): CanvasAnnotation | null {
+  for (let i = annotationList.length - 1; i >= 0; i--) {
+    const annotation = annotationList[i];
+    if (!annotation) continue;
+    const pad = hitRadius + annotation.width;
+    if (
+      point.x < annotation.bounds.x - pad ||
+      point.x > annotation.bounds.x + annotation.bounds.width + pad ||
+      point.y < annotation.bounds.y - pad ||
+      point.y > annotation.bounds.y + annotation.bounds.height + pad
+    ) continue;
+    for (let index = 1; index < annotation.points.length; index++) {
+      const start = annotation.points[index - 1];
+      const end = annotation.points[index];
+      if (start && end && distanceToSegment(point, start, end) <= hitRadius + annotation.width / 2) {
+        return annotation;
+      }
+    }
+  }
+  return null;
+}
+
 interface LassoRect {
   startX: number;
   startY: number;
@@ -77,9 +120,27 @@ interface LassoRect {
   currentY: number;
 }
 
+interface AnnotationDraft {
+  id: string;
+  type: 'freehand';
+  points: Array<{ x: number; y: number }>;
+  bounds: { x: number; y: number; width: number; height: number };
+  color: string;
+  width: number;
+  createdAt: string;
+}
+
+const ANNOTATION_COLOR = 'currentColor';
+const ANNOTATION_WIDTH = 4;
+const ERASER_HIT_RADIUS = 14;
+
+type AnnotationTool = 'pen' | 'eraser' | null;
+
 interface CanvasViewportProps {
   onNodeContextMenu?: (e: MouseEvent, nodeId: string) => void;
   onCanvasContextMenu?: (e: MouseEvent, canvasX: number, canvasY: number) => void;
+  annotationMode?: boolean;
+  annotationTool?: AnnotationTool;
 }
 
 const IMAGE_EXTS = new Set(['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'bmp', 'ico', 'avif']);
@@ -165,10 +226,13 @@ export function getRenderableWorldNodes(
   return worldNodes;
 }
 
-export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu }: CanvasViewportProps) {
+export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotationMode = false, annotationTool = null }: CanvasViewportProps) {
   const v = viewport.value;
   const isLassoing = useRef(false);
+  const isAnnotating = useRef(false);
+  const annotationPoints = useRef<Array<{ x: number; y: number }>>([]);
   const [lasso, setLasso] = useState<LassoRect | null>(null);
+  const [draftAnnotation, setDraftAnnotation] = useState<AnnotationDraft | null>(null);
   const [dropActive, setDropActive] = useState(false);
   const dropCounter = useRef(0);
   // Ref mirrors lasso state so pointer handlers always read the latest value
@@ -177,15 +241,16 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu }: Canva
 
   const containerRef = usePanZoom({
     viewport,
+    disabled: annotationMode,
     onViewportChange: (next) => {
       // Don't pan while lassoing — usePanZoom's pointerdown still fires
       // (native listener) before our Preact handler can stopPropagation.
-      if (isLassoing.current) return;
+      if (isLassoing.current || annotationMode) return;
       cancelViewportAnimation();
       setViewport(next);
     },
     onViewportCommit: (next) => {
-      if (isLassoing.current) return;
+      if (isLassoing.current || annotationMode) return;
       cancelViewportAnimation();
       commitViewport(next);
     },
@@ -222,7 +287,53 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu }: Canva
   const handlePointerDown = useCallback(
     (e: PointerEvent) => {
       const container = containerRef.current;
-      if (!container || e.target !== container) return;
+      if (!container) return;
+
+      if (annotationTool === 'eraser') {
+        const target = e.target instanceof Element ? e.target : null;
+        if (target?.closest('.hud-layer, .snapshot-panel, .context-menu, .command-palette')) return;
+        e.preventDefault();
+        e.stopPropagation();
+        const rect = container.getBoundingClientRect();
+        const vp = viewport.value;
+        const point = {
+          x: (e.clientX - rect.left - vp.x) / vp.scale,
+          y: (e.clientY - rect.top - vp.y) / vp.scale,
+        };
+        const hit = findAnnotationAtPoint(Array.from(annotations.value.values()), point, ERASER_HIT_RADIUS / vp.scale);
+        if (hit) void removeAnnotationFromClient(hit.id);
+        return;
+      }
+
+      if (annotationTool === 'pen') {
+        const target = e.target instanceof Element ? e.target : null;
+        if (target?.closest('.hud-layer, .snapshot-panel, .context-menu, .command-palette')) return;
+        e.preventDefault();
+        e.stopPropagation();
+        activeNodeId.value = null;
+        clearSelection();
+        isAnnotating.current = true;
+        const rect = container.getBoundingClientRect();
+        const vp = viewport.value;
+        const point = {
+          x: (e.clientX - rect.left - vp.x) / vp.scale,
+          y: (e.clientY - rect.top - vp.y) / vp.scale,
+        };
+        annotationPoints.current = [point];
+        setDraftAnnotation({
+          id: 'draft-annotation',
+          type: 'freehand',
+          points: [point],
+          bounds: { x: 0, y: 0, width: 0, height: 0 },
+          color: ANNOTATION_COLOR,
+          width: ANNOTATION_WIDTH,
+          createdAt: '',
+        });
+        container.setPointerCapture(e.pointerId);
+        return;
+      }
+
+      if (e.target !== container) return;
 
       if (!e.shiftKey) {
         if (!lassoRef.current) {
@@ -243,11 +354,27 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu }: Canva
       setLasso(initial);
       container.setPointerCapture(e.pointerId);
     },
-    [containerRef],
+    [annotationTool, containerRef],
   );
 
   const handlePointerMove = useCallback(
     (e: PointerEvent) => {
+      if (isAnnotating.current) {
+        const container = containerRef.current;
+        if (!container) return;
+        const rect = container.getBoundingClientRect();
+        const vp = viewport.value;
+        const point = {
+          x: (e.clientX - rect.left - vp.x) / vp.scale,
+          y: (e.clientY - rect.top - vp.y) / vp.scale,
+        };
+        const previous = annotationPoints.current.at(-1);
+        if (previous && Math.hypot(point.x - previous.x, point.y - previous.y) < 2) return;
+        annotationPoints.current = [...annotationPoints.current, point];
+        setDraftAnnotation((draft) => draft ? { ...draft, points: annotationPoints.current } : null);
+        return;
+      }
+
       if (!isLassoing.current || !lassoRef.current) return;
       const rect = containerRef.current?.getBoundingClientRect();
       if (!rect) return;
@@ -262,7 +389,22 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu }: Canva
     [containerRef],
   );
 
-  const handlePointerUp = useCallback(() => {
+  const handlePointerUp = useCallback((e: PointerEvent) => {
+    if (isAnnotating.current) {
+      isAnnotating.current = false;
+      const points = annotationPoints.current;
+      annotationPoints.current = [];
+      setDraftAnnotation(null);
+      if (points.length >= 2) {
+        void createAnnotationFromClient({ points, color: ANNOTATION_COLOR, width: ANNOTATION_WIDTH });
+      }
+      const container = containerRef.current;
+      if (container?.hasPointerCapture(e.pointerId)) {
+        container.releasePointerCapture(e.pointerId);
+      }
+      return;
+    }
+
     const current = lassoRef.current;
     if (!isLassoing.current || !current) return;
     isLassoing.current = false;
@@ -306,6 +448,14 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu }: Canva
     setLasso(null);
   }, []);
 
+  useEffect(() => {
+    if (annotationMode) return;
+    if (!isAnnotating.current && !draftAnnotation) return;
+    isAnnotating.current = false;
+    annotationPoints.current = [];
+    setDraftAnnotation(null);
+  }, [annotationMode, draftAnnotation]);
+
   // ── Drag-to-connect: track cursor in world space, hit-test on drop ──
   useEffect(() => {
     function handleMove(e: PointerEvent) {
@@ -359,6 +509,7 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu }: Canva
   // ── Double-click on background → create new markdown node ──
   const handleDblClick = useCallback(
     (e: MouseEvent) => {
+      if (annotationMode) return;
       const container = containerRef.current;
       if (!container || e.target !== container) return;
       const rect = container.getBoundingClientRect();
@@ -377,11 +528,12 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu }: Canva
         height: nodeH,
       });
     },
-    [containerRef],
+    [annotationMode, containerRef],
   );
 
   const handleContextMenu = useCallback(
     (e: MouseEvent) => {
+      if (annotationMode) return;
       if (!onCanvasContextMenu) return;
 
       const container = containerRef.current;
@@ -396,7 +548,7 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu }: Canva
       const canvasY = (e.clientY - rect.top - v.y) / v.scale;
       onCanvasContextMenu(e, canvasX, canvasY);
     },
-    [containerRef, onCanvasContextMenu],
+    [annotationMode, containerRef, onCanvasContextMenu],
   );
 
   // ── Drag-and-drop files from filesystem ──
@@ -543,7 +695,11 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu }: Canva
         height: '100%',
         position: 'relative',
         overflow: 'hidden',
-        cursor: draggingEdge.value ? 'crosshair' : isLassoing.current ? 'crosshair' : 'grab',
+        cursor: annotationTool === 'eraser'
+          ? 'cell'
+          : annotationMode || draggingEdge.value || isLassoing.current
+            ? 'crosshair'
+            : 'grab',
       }}
     >
       {/* D4: CSS matrix(a,b,c,d,tx,ty) — scale uniformly (a=d=scale, b=c=0)
@@ -561,6 +717,8 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu }: Canva
       >
         <FocusFieldLayer />
         <EdgeLayer nodes={nodes} edges={edges} />
+        <AnnotationLayer annotations={Array.from(annotations.value.values())} />
+        {draftAnnotation && draftAnnotation.points.length >= 2 && <AnnotationLayer annotations={[draftAnnotation]} />}
         {worldNodes.map((node) => (
           <CanvasNode key={node.id} node={node} onContextMenu={onNodeContextMenu}>
             {renderNodeContent(node)}
@@ -579,6 +737,7 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu }: Canva
           </svg>
         )}
       </div>
+      {annotationMode && <div class={`annotation-capture-layer${annotationTool === 'eraser' ? ' erasing' : ''}`} aria-hidden="true" />}
       {lassoStyle && <div class="lasso-rect" style={lassoStyle} />}
       {dropActive && (
         <div class="drop-zone-overlay">

package/src/client/canvas/ContextPinBar.tsx

@@ -1,12 +1,13 @@
 import {
   clearContextPins,
   contextPinnedNodeIds,
+  hasOpenDockedContextPanel,
 } from '../state/canvas-store';
 import { attentionHistoryOpen } from '../state/attention-store';
 
 export function ContextPinBar() {
   const count = contextPinnedNodeIds.value.size;
-  if (count === 0 || attentionHistoryOpen.value) return null;
+  if (count === 0 || attentionHistoryOpen.value || hasOpenDockedContextPanel.value) return null;
 
   return (
     <div class="context-pin-bar">

package/src/client/canvas/use-pan-zoom.ts

@@ -14,6 +14,7 @@ interface PanZoomOptions {
   viewport: Signal<ViewportState>;
   onViewportChange: (v: ViewportState) => void;
   onViewportCommit: (v: ViewportState) => void;
+  disabled?: boolean;
 }
 
 /**
@@ -23,7 +24,7 @@ interface PanZoomOptions {
  * - Pointer drag on background: pan
  * - Pinch (touch): zoom
  */
-export function usePanZoom({ viewport, onViewportChange, onViewportCommit }: PanZoomOptions) {
+export function usePanZoom({ viewport, onViewportChange, onViewportCommit, disabled = false }: PanZoomOptions) {
   const containerRef = useRef<HTMLDivElement>(null);
   const isPanning = useRef(false);
   const lastPointer = useRef({ x: 0, y: 0 });
@@ -42,6 +43,7 @@ export function usePanZoom({ viewport, onViewportChange, onViewportCommit }: Pan
 
   const handleWheel = useCallback(
     (e: WheelEvent) => {
+      if (disabled) return;
       e.preventDefault();
       const v = viewport.value;
 
@@ -74,21 +76,23 @@ export function usePanZoom({ viewport, onViewportChange, onViewportCommit }: Pan
         scheduleViewportCommit(next);
       }
     },
-    [viewport, onViewportChange, scheduleViewportCommit],
+    [disabled, viewport, onViewportChange, scheduleViewportCommit],
   );
 
   const handlePointerDown = useCallback((e: PointerEvent) => {
+    if (disabled) return;
     // Only pan when clicking the canvas background (not nodes)
     const container = containerRef.current;
     if (!container || e.target !== container) return;
     isPanning.current = true;
     lastPointer.current = { x: e.clientX, y: e.clientY };
     container.setPointerCapture(e.pointerId);
-  }, []);
+  }, [disabled]);
 
   const handlePointerMove = useCallback(
     (e: PointerEvent) => {
       if (!isPanning.current) return;
+      if (disabled) return;
       const dx = e.clientX - lastPointer.current.x;
       const dy = e.clientY - lastPointer.current.y;
       lastPointer.current = { x: e.clientX, y: e.clientY };
@@ -96,7 +100,7 @@ export function usePanZoom({ viewport, onViewportChange, onViewportCommit }: Pan
       const v = viewport.value;
       onViewportChange({ x: v.x + dx, y: v.y + dy, scale: v.scale });
     },
-    [viewport, onViewportChange],
+    [disabled, viewport, onViewportChange],
   );
 
   const handlePointerUp = useCallback(() => {
@@ -109,6 +113,7 @@ export function usePanZoom({ viewport, onViewportChange, onViewportCommit }: Pan
   // Touch pinch
   const handleTouchMove = useCallback(
     (e: TouchEvent) => {
+      if (disabled) return;
       if (e.touches.length !== 2) {
         lastPinchDist.current = 0;
         return;
@@ -142,7 +147,7 @@ export function usePanZoom({ viewport, onViewportChange, onViewportCommit }: Pan
       }
       lastPinchDist.current = dist;
     },
-    [viewport, onViewportChange, scheduleViewportCommit],
+    [disabled, viewport, onViewportChange, scheduleViewportCommit],
   );
 
   const handleTouchEnd = useCallback(() => {

package/src/client/icons.tsx

@@ -117,6 +117,28 @@ export function IconMoon(p: IconProps): JSX.Element {
   );
 }
 
+/** Pen stroke — canvas annotation mode */
+export function IconPen(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="M3 13l2.8-.7L13 5.1 10.9 3 3.7 10.2 3 13Z" />
+      <path d="M9.8 4.1l2.1 2.1" />
+      <path d="M2.5 14h11" />
+    </Icon>
+  );
+}
+
+/** Eraser — remove canvas annotations */
+export function IconEraser(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="M3 10.5 8.5 5a2 2 0 0 1 2.8 0l1.7 1.7a2 2 0 0 1 0 2.8L8.5 14H5.8L3 11.2Z" />
+      <path d="M7.5 6 12 10.5" />
+      <path d="M8.5 14H14" />
+    </Icon>
+  );
+}
+
 /** Camera — snapshots */
 export function IconSnapshot(p: IconProps): JSX.Element {
   return (