afterbefore 0.1.19 → 0.2.1

package/dist/overlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/overlay/index.tsx","../../src/overlay/state.ts","../../src/overlay/capture.ts","../../src/overlay/ui/icon.tsx","../../src/overlay/ui/menu.tsx","../../src/overlay/ui/selector.tsx","../../src/overlay/ui/status.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useCallback, useRef } from \"react\";\nimport { useOverlayState } from \"./state\";\nimport type { CaptureMode } from \"./state\";\nimport { capture } from \"./capture\";\nimport { Icon } from \"./ui/icon\";\nimport { Menu } from \"./ui/menu\";\nimport { Selector } from \"./ui/selector\";\nimport { Status } from \"./ui/status\";\n\nasync function saveCapture(\n  type: \"before\" | \"after\",\n  mode: CaptureMode,\n  dataUrl: string,\n) {\n  try {\n    const res = await fetch(\"/__afterbefore/save\", {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify({ type, mode, image: dataUrl }),\n    });\n    if (!res.ok) throw new Error(\"Save failed\");\n  } catch {\n    // Fallback: browser download (no branch info available client-side)\n    const link = document.createElement(\"a\");\n    link.download = `${type}.png`;\n    link.href = dataUrl;\n    link.click();\n  }\n}\n\nexport function AfterBefore() {\n  const { state, captureComplete, reset } = useOverlayState();\n  const [menuOpen, setMenuOpen] = useState(false);\n  const [statusOpen, setStatusOpen] = useState(false);\n  const [selectorActive, setSelectorActive] = useState(false);\n  const [loading, setLoading] = useState(false);\n  const iconPos = useRef<{ x: number; y: number }>({ x: 24, y: 0 });\n\n  const handlePositionChange = useCallback(\n    (pos: { x: number; y: number }) => {\n      iconPos.current = pos;\n    },\n    [],\n  );\n\n  const handleIconClick = useCallback(() => {\n    if (loading) return;\n\n    if (state.phase === \"ready\") {\n      setStatusOpen((prev: boolean) => !prev);\n      setMenuOpen(false);\n    } else {\n      setMenuOpen((prev: boolean) => !prev);\n      setStatusOpen(false);\n    }\n  }, [state.phase, loading]);\n\n  const performCapture = useCallback(\n    async (\n      mode: CaptureMode,\n      area?: { x: number; y: number; width: number; height: number },\n    ) => {\n      setLoading(true);\n      try {\n        const dataUrl = await capture({ mode, area });\n        const type = state.phase === \"idle\" ? \"before\" : \"after\";\n        await saveCapture(type, mode, dataUrl);\n        captureComplete({\n          dataUrl,\n          mode,\n          timestamp: Date.now(),\n        });\n      } catch (err) {\n        console.error(\"[afterbefore] Capture failed:\", err);\n      } finally {\n        setLoading(false);\n      }\n    },\n    [state.phase, captureComplete],\n  );\n\n  const handleModeSelect = useCallback(\n    (mode: CaptureMode) => {\n      setMenuOpen(false);\n      if (mode === \"area\") {\n        setSelectorActive(true);\n      } else {\n        performCapture(mode);\n      }\n    },\n    [performCapture],\n  );\n\n  const handleAreaSelect = useCallback(\n    (area: { x: number; y: number; width: number; height: number }) => {\n      setSelectorActive(false);\n      performCapture(\"area\", area);\n    },\n    [performCapture],\n  );\n\n  const handleAreaCancel = useCallback(() => {\n    setSelectorActive(false);\n  }, []);\n\n  const handleReset = useCallback(() => {\n    reset();\n    setStatusOpen(false);\n    setMenuOpen(false);\n  }, [reset]);\n\n  const handleMenuClose = useCallback(() => {\n    setMenuOpen(false);\n  }, []);\n\n  const handleStatusClose = useCallback(() => {\n    setStatusOpen(false);\n  }, []);\n\n  return (\n    <div data-afterbefore=\"true\">\n      <Icon\n        phase={state.phase}\n        onClick={handleIconClick}\n        loading={loading}\n        onPositionChange={handlePositionChange}\n      />\n\n      {menuOpen &&\n        (state.phase === \"idle\" || state.phase === \"captured-before\") && (\n          <Menu\n            onSelect={handleModeSelect}\n            onClose={handleMenuClose}\n            position={iconPos.current}\n          />\n        )}\n\n      {selectorActive && (\n        <Selector onSelect={handleAreaSelect} onCancel={handleAreaCancel} />\n      )}\n\n      {statusOpen && state.phase === \"ready\" && (\n        <Status\n          onReset={handleReset}\n          position={iconPos.current}\n          onClose={handleStatusClose}\n        />\n      )}\n    </div>\n  );\n}\n","import { useState, useCallback } from \"react\";\n\nexport type CaptureMode = \"viewport\" | \"fullpage\" | \"area\";\n\nexport type OverlayPhase = \"idle\" | \"captured-before\" | \"ready\";\n\nexport interface CaptureResult {\n  dataUrl: string;\n  mode: CaptureMode;\n  timestamp: number;\n}\n\nexport interface OverlayState {\n  phase: OverlayPhase;\n  before: CaptureResult | null;\n  after: CaptureResult | null;\n}\n\nconst initialState: OverlayState = {\n  phase: \"idle\",\n  before: null,\n  after: null,\n};\n\nexport function useOverlayState() {\n  const [state, setState] = useState<OverlayState>(initialState);\n\n  const captureComplete = useCallback(\n    (result: CaptureResult) => {\n      setState((prev) => {\n        if (prev.phase === \"idle\") {\n          return { ...prev, phase: \"captured-before\", before: result };\n        }\n        if (prev.phase === \"captured-before\") {\n          return { ...prev, phase: \"ready\", after: result };\n        }\n        return prev;\n      });\n    },\n    [],\n  );\n\n  const reset = useCallback(() => {\n    setState(initialState);\n  }, []);\n\n  return { state, captureComplete, reset };\n}\n","import { toPng } from \"html-to-image\";\nimport type { CaptureMode } from \"./state\";\n\ninterface CaptureOptions {\n  mode: CaptureMode;\n  area?: { x: number; y: number; width: number; height: number };\n}\n\nexport async function capture(options: CaptureOptions): Promise<string> {\n  const { mode, area } = options;\n\n  if (mode === \"viewport\") {\n    return captureViewport();\n  }\n  if (mode === \"fullpage\") {\n    return captureFullPage();\n  }\n  if (mode === \"area\" && area) {\n    return captureArea(area);\n  }\n  throw new Error(`Invalid capture mode: ${mode}`);\n}\n\nasync function captureViewport(): Promise<string> {\n  const dataUrl = await toPng(document.documentElement, {\n    width: window.innerWidth,\n    height: window.innerHeight,\n    style: {\n      overflow: \"hidden\",\n    },\n    filter: filterOverlay,\n  });\n  return dataUrl;\n}\n\nasync function captureFullPage(): Promise<string> {\n  const scrollY = window.scrollY;\n  const body = document.body;\n  const html = document.documentElement;\n\n  const fullHeight = Math.max(\n    body.scrollHeight,\n    body.offsetHeight,\n    html.clientHeight,\n    html.scrollHeight,\n    html.offsetHeight,\n  );\n\n  const dataUrl = await toPng(document.documentElement, {\n    width: window.innerWidth,\n    height: fullHeight,\n    style: {\n      overflow: \"visible\",\n      height: `${fullHeight}px`,\n    },\n    filter: filterOverlay,\n  });\n\n  // Restore scroll position (toPng may have changed it)\n  window.scrollTo(0, scrollY);\n  return dataUrl;\n}\n\nasync function captureArea(area: {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}): Promise<string> {\n  // Capture the full viewport first\n  const fullDataUrl = await captureViewport();\n\n  // Crop to selection using an offscreen canvas\n  const img = await loadImage(fullDataUrl);\n  const dpr = window.devicePixelRatio || 1;\n\n  const canvas = document.createElement(\"canvas\");\n  canvas.width = area.width * dpr;\n  canvas.height = area.height * dpr;\n\n  const ctx = canvas.getContext(\"2d\")!;\n  ctx.drawImage(\n    img,\n    area.x * dpr,\n    area.y * dpr,\n    area.width * dpr,\n    area.height * dpr,\n    0,\n    0,\n    area.width * dpr,\n    area.height * dpr,\n  );\n\n  return canvas.toDataURL(\"image/png\");\n}\n\nfunction loadImage(src: string): Promise<HTMLImageElement> {\n  return new Promise((resolve, reject) => {\n    const img = new Image();\n    img.onload = () => resolve(img);\n    img.onerror = reject;\n    img.src = src;\n  });\n}\n\n/** Filter out the afterbefore overlay from screenshots */\nfunction filterOverlay(node: HTMLElement): boolean {\n  return !node.dataset?.afterbefore;\n}\n","\"use client\";\n\nimport React, { useRef, useCallback, useEffect, useState } from \"react\";\nimport type { OverlayPhase } from \"../state\";\n\ninterface IconProps {\n  phase: OverlayPhase;\n  onClick: () => void;\n  loading?: boolean;\n  onPositionChange?: (pos: { x: number; y: number }) => void;\n}\n\nconst ICON_SIZE = 40;\nconst EDGE_MARGIN = 24;\n\nexport function Icon({ phase, onClick, loading, onPositionChange }: IconProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [pos, setPos] = useState({ x: EDGE_MARGIN, y: -1 });\n  const dragState = useRef<{\n    dragging: boolean;\n    startX: number;\n    startY: number;\n    origX: number;\n    origY: number;\n    distance: number;\n  } | null>(null);\n\n  // Initialize y position on mount (need window.innerHeight)\n  useEffect(() => {\n    setPos((prev) => {\n      if (prev.y === -1) {\n        const y = window.innerHeight - ICON_SIZE - EDGE_MARGIN;\n        return { x: prev.x, y };\n      }\n      return prev;\n    });\n  }, []);\n\n  // Report position changes upstream\n  useEffect(() => {\n    if (pos.y !== -1) {\n      onPositionChange?.({ x: pos.x, y: pos.y });\n    }\n  }, [pos, onPositionChange]);\n\n  const handleMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      dragState.current = {\n        dragging: true,\n        startX: e.clientX,\n        startY: e.clientY,\n        origX: pos.x,\n        origY: pos.y,\n        distance: 0,\n      };\n    },\n    [pos],\n  );\n\n  useEffect(() => {\n    const handleMouseMove = (e: MouseEvent) => {\n      const ds = dragState.current;\n      if (!ds || !ds.dragging) return;\n\n      const dx = e.clientX - ds.startX;\n      const dy = e.clientY - ds.startY;\n      ds.distance = Math.sqrt(dx * dx + dy * dy);\n\n      const newX = Math.max(\n        0,\n        Math.min(window.innerWidth - ICON_SIZE, ds.origX + dx),\n      );\n      const newY = Math.max(\n        0,\n        Math.min(window.innerHeight - ICON_SIZE, ds.origY + dy),\n      );\n      setPos({ x: newX, y: newY });\n    };\n\n    const handleMouseUp = () => {\n      const ds = dragState.current;\n      if (!ds) return;\n\n      if (ds.distance < 5) {\n        onClick();\n      }\n      dragState.current = null;\n    };\n\n    window.addEventListener(\"mousemove\", handleMouseMove);\n    window.addEventListener(\"mouseup\", handleMouseUp);\n    return () => {\n      window.removeEventListener(\"mousemove\", handleMouseMove);\n      window.removeEventListener(\"mouseup\", handleMouseUp);\n    };\n  }, [onClick]);\n\n  // Don't render until y is initialized\n  if (pos.y === -1) return null;\n\n  return (\n    <div\n      ref={ref}\n      data-afterbefore=\"true\"\n      onMouseDown={handleMouseDown}\n      style={{\n        position: \"fixed\",\n        left: pos.x,\n        top: pos.y,\n        width: ICON_SIZE,\n        height: ICON_SIZE,\n        borderRadius: \"50%\",\n        background: \"rgba(30, 30, 30, 0.85)\",\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        cursor: \"grab\",\n        zIndex: 2147483647,\n        boxShadow: \"0 2px 8px rgba(0,0,0,0.3)\",\n        transition: \"background 0.15s\",\n        userSelect: \"none\",\n      }}\n      onMouseEnter={(e) => {\n        (e.currentTarget as HTMLDivElement).style.background =\n          \"rgba(30, 30, 30, 0.95)\";\n      }}\n      onMouseLeave={(e) => {\n        (e.currentTarget as HTMLDivElement).style.background =\n          \"rgba(30, 30, 30, 0.85)\";\n      }}\n    >\n      <style\n        dangerouslySetInnerHTML={{\n          __html: `\n@keyframes ab-pulse {\n  0%, 100% { transform: scale(1); opacity: 1; }\n  50% { transform: scale(1.08); opacity: 0.85; }\n}\n@keyframes ab-spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}`,\n        }}\n      />\n\n      {loading ? (\n        <svg\n          width=\"20\"\n          height=\"20\"\n          viewBox=\"0 0 20 20\"\n          style={{ animation: \"ab-spin 0.8s linear infinite\" }}\n        >\n          <circle\n            cx=\"10\"\n            cy=\"10\"\n            r=\"8\"\n            fill=\"none\"\n            stroke=\"white\"\n            strokeWidth=\"2\"\n            strokeDasharray=\"40\"\n            strokeDashoffset=\"10\"\n            strokeLinecap=\"round\"\n          />\n        </svg>\n      ) : phase === \"ready\" ? (\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\n          <path\n            d=\"M4 10l4 4 8-8\"\n            fill=\"none\"\n            stroke=\"#4ade80\"\n            strokeWidth=\"2.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      ) : (\n        <div\n          style={{\n            position: \"relative\",\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            animation:\n              phase === \"captured-before\"\n                ? \"ab-pulse 2s ease-in-out infinite\"\n                : \"none\",\n          }}\n        >\n          {/* Camera icon */}\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\n            <rect\n              x=\"2\"\n              y=\"5\"\n              width=\"16\"\n              height=\"12\"\n              rx=\"2\"\n              fill=\"none\"\n              stroke=\"white\"\n              strokeWidth=\"1.5\"\n            />\n            <circle\n              cx=\"10\"\n              cy=\"11\"\n              r=\"3\"\n              fill=\"none\"\n              stroke=\"white\"\n              strokeWidth=\"1.5\"\n            />\n            <path d=\"M7 5l1-2h4l1 2\" fill=\"none\" stroke=\"white\" strokeWidth=\"1.5\" />\n          </svg>\n\n          {/* Badge for captured-before */}\n          {phase === \"captured-before\" && (\n            <div\n              style={{\n                position: \"absolute\",\n                top: -6,\n                right: -8,\n                width: 14,\n                height: 14,\n                borderRadius: \"50%\",\n                background: \"#3b82f6\",\n                color: \"white\",\n                fontSize: \"9px\",\n                fontWeight: 700,\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                lineHeight: 1,\n                fontFamily: \"system-ui, sans-serif\",\n              }}\n            >\n              1\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n","\"use client\";\n\nimport React, { useEffect, useRef, useCallback } from \"react\";\nimport type { CaptureMode } from \"../state\";\n\ninterface MenuProps {\n  onSelect: (mode: CaptureMode) => void;\n  onClose: () => void;\n  position: { x: number; y: number };\n}\n\nconst modes: { mode: CaptureMode; label: string; icon: React.ReactNode }[] = [\n  {\n    mode: \"viewport\",\n    label: \"Viewport\",\n    icon: (\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n        <rect\n          x=\"1\"\n          y=\"2\"\n          width=\"14\"\n          height=\"11\"\n          rx=\"1.5\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n        />\n        <line\n          x1=\"1\"\n          y1=\"14\"\n          x2=\"15\"\n          y2=\"14\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n        />\n      </svg>\n    ),\n  },\n  {\n    mode: \"fullpage\",\n    label: \"Full Page\",\n    icon: (\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n        <rect\n          x=\"3\"\n          y=\"1\"\n          width=\"10\"\n          height=\"14\"\n          rx=\"1.5\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n        />\n        <line\n          x1=\"5.5\"\n          y1=\"4\"\n          x2=\"10.5\"\n          y2=\"4\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"5.5\"\n          y1=\"6.5\"\n          x2=\"10.5\"\n          y2=\"6.5\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"5.5\"\n          y1=\"9\"\n          x2=\"10.5\"\n          y2=\"9\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1\"\n          strokeLinecap=\"round\"\n        />\n      </svg>\n    ),\n  },\n  {\n    mode: \"area\",\n    label: \"Select Area\",\n    icon: (\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n        <path\n          d=\"M1 5V2.5A1.5 1.5 0 012.5 1H5\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n        />\n        <path\n          d=\"M11 1h2.5A1.5 1.5 0 0115 2.5V5\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n        />\n        <path\n          d=\"M15 11v2.5a1.5 1.5 0 01-1.5 1.5H11\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n        />\n        <path\n          d=\"M5 15H2.5A1.5 1.5 0 011 13.5V11\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n        />\n      </svg>\n    ),\n  },\n];\n\nconst MENU_WIDTH = 160;\n\nexport function Menu({ onSelect, onClose, position }: MenuProps) {\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  const handleClickOutside = useCallback(\n    (e: MouseEvent) => {\n      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {\n        onClose();\n      }\n    },\n    [onClose],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        onClose();\n      }\n    },\n    [onClose],\n  );\n\n  useEffect(() => {\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n      document.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, [handleClickOutside, handleKeyDown]);\n\n  // Position the menu above the icon, clamped to viewport\n  const menuLeft = Math.max(\n    8,\n    Math.min(position.x - MENU_WIDTH / 2 + 20, window.innerWidth - MENU_WIDTH - 8),\n  );\n  const menuBottom = window.innerHeight - position.y + 8;\n\n  return (\n    <div\n      ref={menuRef}\n      data-afterbefore=\"true\"\n      style={{\n        position: \"fixed\",\n        left: menuLeft,\n        bottom: menuBottom,\n        width: MENU_WIDTH,\n        background: \"rgba(24, 24, 27, 0.95)\",\n        borderRadius: 10,\n        padding: 4,\n        boxShadow: \"0 4px 20px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08)\",\n        zIndex: 2147483647,\n        fontFamily: \"system-ui, -apple-system, sans-serif\",\n        backdropFilter: \"blur(12px)\",\n      }}\n    >\n      {modes.map(({ mode, label, icon }) => (\n        <button\n          key={mode}\n          onClick={() => onSelect(mode)}\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: 8,\n            width: \"100%\",\n            padding: \"8px 10px\",\n            border: \"none\",\n            background: \"transparent\",\n            color: \"rgba(255,255,255,0.9)\",\n            fontSize: 13,\n            borderRadius: 6,\n            cursor: \"pointer\",\n            textAlign: \"left\",\n            transition: \"background 0.1s\",\n          }}\n          onMouseEnter={(e) => {\n            (e.currentTarget as HTMLButtonElement).style.background =\n              \"rgba(255,255,255,0.1)\";\n          }}\n          onMouseLeave={(e) => {\n            (e.currentTarget as HTMLButtonElement).style.background = \"transparent\";\n          }}\n        >\n          <span\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              color: \"rgba(255,255,255,0.6)\",\n            }}\n          >\n            {icon}\n          </span>\n          {label}\n        </button>\n      ))}\n    </div>\n  );\n}\n","\"use client\";\n\nimport React, { useState, useRef, useCallback, useEffect } from \"react\";\n\ninterface SelectorProps {\n  onSelect: (area: {\n    x: number;\n    y: number;\n    width: number;\n    height: number;\n  }) => void;\n  onCancel: () => void;\n}\n\nconst MIN_SIZE = 10;\n\nexport function Selector({ onSelect, onCancel }: SelectorProps) {\n  const [selection, setSelection] = useState<{\n    startX: number;\n    startY: number;\n    endX: number;\n    endY: number;\n  } | null>(null);\n  const dragging = useRef(false);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        onCancel();\n      }\n    },\n    [onCancel],\n  );\n\n  useEffect(() => {\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [handleKeyDown]);\n\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n    dragging.current = true;\n    setSelection({\n      startX: e.clientX,\n      startY: e.clientY,\n      endX: e.clientX,\n      endY: e.clientY,\n    });\n  }, []);\n\n  const handleMouseMove = useCallback((e: React.MouseEvent) => {\n    if (!dragging.current) return;\n    setSelection((prev) => {\n      if (!prev) return prev;\n      return { ...prev, endX: e.clientX, endY: e.clientY };\n    });\n  }, []);\n\n  const handleMouseUp = useCallback(() => {\n    if (!dragging.current || !selection) return;\n    dragging.current = false;\n\n    const x = Math.min(selection.startX, selection.endX);\n    const y = Math.min(selection.startY, selection.endY);\n    const width = Math.abs(selection.endX - selection.startX);\n    const height = Math.abs(selection.endY - selection.startY);\n\n    if (width >= MIN_SIZE && height >= MIN_SIZE) {\n      onSelect({ x, y, width, height });\n    } else {\n      setSelection(null);\n    }\n  }, [selection, onSelect]);\n\n  // Compute the normalized rect for display\n  const rect = selection\n    ? {\n        x: Math.min(selection.startX, selection.endX),\n        y: Math.min(selection.startY, selection.endY),\n        w: Math.abs(selection.endX - selection.startX),\n        h: Math.abs(selection.endY - selection.startY),\n      }\n    : null;\n\n  return (\n    <div\n      data-afterbefore=\"true\"\n      onMouseDown={handleMouseDown}\n      onMouseMove={handleMouseMove}\n      onMouseUp={handleMouseUp}\n      style={{\n        position: \"fixed\",\n        inset: 0,\n        zIndex: 2147483647,\n        cursor: \"crosshair\",\n      }}\n    >\n      {/* Dimmed overlay using clip-path to cut out the selection */}\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          background: \"rgba(0, 0, 0, 0.4)\",\n          pointerEvents: \"none\",\n          ...(rect && rect.w > 0 && rect.h > 0\n            ? {\n                clipPath: `polygon(\n                  0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%,\n                  ${rect.x}px ${rect.y}px,\n                  ${rect.x}px ${rect.y + rect.h}px,\n                  ${rect.x + rect.w}px ${rect.y + rect.h}px,\n                  ${rect.x + rect.w}px ${rect.y}px,\n                  ${rect.x}px ${rect.y}px\n                )`,\n              }\n            : {}),\n        }}\n      />\n\n      {/* Selection border and label */}\n      {rect && rect.w > 0 && rect.h > 0 && (\n        <>\n          <div\n            style={{\n              position: \"absolute\",\n              left: rect.x,\n              top: rect.y,\n              width: rect.w,\n              height: rect.h,\n              border: \"2px solid rgba(59, 130, 246, 0.8)\",\n              borderRadius: 2,\n              pointerEvents: \"none\",\n              boxShadow: \"0 0 0 1px rgba(0,0,0,0.3)\",\n            }}\n          />\n          {/* Dimensions label */}\n          <div\n            style={{\n              position: \"absolute\",\n              left: rect.x + rect.w / 2,\n              top: rect.y + rect.h + 8,\n              transform: \"translateX(-50%)\",\n              background: \"rgba(24, 24, 27, 0.9)\",\n              color: \"rgba(255,255,255,0.9)\",\n              fontSize: 11,\n              fontFamily: \"system-ui, -apple-system, monospace\",\n              padding: \"2px 8px\",\n              borderRadius: 4,\n              whiteSpace: \"nowrap\",\n              pointerEvents: \"none\",\n            }}\n          >\n            {Math.round(rect.w)} &times; {Math.round(rect.h)}\n          </div>\n        </>\n      )}\n\n      {/* Instruction hint when nothing selected yet */}\n      {!selection && (\n        <div\n          style={{\n            position: \"absolute\",\n            top: \"50%\",\n            left: \"50%\",\n            transform: \"translate(-50%, -50%)\",\n            color: \"rgba(255,255,255,0.7)\",\n            fontSize: 14,\n            fontFamily: \"system-ui, -apple-system, sans-serif\",\n            pointerEvents: \"none\",\n            textShadow: \"0 1px 4px rgba(0,0,0,0.5)\",\n          }}\n        >\n          Drag to select an area &middot; Esc to cancel\n        </div>\n      )}\n    </div>\n  );\n}\n","\"use client\";\n\nimport React, { useState, useRef, useEffect, useCallback } from \"react\";\n\ninterface StatusProps {\n  onReset: () => void;\n  position: { x: number; y: number };\n  onClose: () => void;\n}\n\ninterface Toast {\n  message: string;\n  type: \"success\" | \"error\";\n}\n\nconst PANEL_WIDTH = 220;\n\nexport function Status({ onReset, position, onClose }: StatusProps) {\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [toast, setToast] = useState<Toast | null>(null);\n  const [pushing, setPushing] = useState(false);\n\n  const showToast = useCallback((message: string, type: Toast[\"type\"]) => {\n    setToast({ message, type });\n    setTimeout(() => setToast(null), 3000);\n  }, []);\n\n  // Click outside to close\n  useEffect(() => {\n    const handler = (e: MouseEvent) => {\n      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {\n        onClose();\n      }\n    };\n    document.addEventListener(\"mousedown\", handler);\n    return () => document.removeEventListener(\"mousedown\", handler);\n  }, [onClose]);\n\n  // Escape to close\n  useEffect(() => {\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") onClose();\n    };\n    document.addEventListener(\"keydown\", handler);\n    return () => document.removeEventListener(\"keydown\", handler);\n  }, [onClose]);\n\n  const handleOpenFolder = async () => {\n    try {\n      const res = await fetch(\"/__afterbefore/open\", { method: \"POST\" });\n      if (!res.ok) throw new Error();\n      showToast(\"Opened folder\", \"success\");\n    } catch {\n      showToast(\"Could not open folder\", \"error\");\n    }\n  };\n\n  const handleCopyMarkdown = async () => {\n    try {\n      const res = await fetch(\"/__afterbefore/markdown\");\n      if (!res.ok) throw new Error();\n      const { markdown } = await res.json();\n      await navigator.clipboard.writeText(markdown);\n      showToast(\"Copied!\", \"success\");\n    } catch {\n      showToast(\"Copy failed\", \"error\");\n    }\n  };\n\n  const handlePush = async () => {\n    setPushing(true);\n    try {\n      const res = await fetch(\"/__afterbefore/push\", { method: \"POST\" });\n      const data = await res.json();\n      if (!res.ok) {\n        showToast(data.error || \"Push failed\", \"error\");\n      } else if (data.pr) {\n        showToast(`Posted to PR #${data.pr}`, \"success\");\n      } else {\n        showToast(\"No PR found\", \"error\");\n      }\n    } catch {\n      showToast(\"Push failed\", \"error\");\n    } finally {\n      setPushing(false);\n    }\n  };\n\n  const handleReset = () => {\n    onReset();\n    onClose();\n  };\n\n  const panelLeft = Math.max(\n    8,\n    Math.min(position.x - PANEL_WIDTH / 2 + 20, window.innerWidth - PANEL_WIDTH - 8),\n  );\n  const panelBottom = window.innerHeight - position.y + 8;\n\n  const buttonStyle: React.CSSProperties = {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: 6,\n    width: \"100%\",\n    padding: \"7px 10px\",\n    border: \"none\",\n    background: \"transparent\",\n    color: \"rgba(255,255,255,0.9)\",\n    fontSize: 13,\n    borderRadius: 6,\n    cursor: \"pointer\",\n    textAlign: \"left\" as const,\n    fontFamily: \"system-ui, -apple-system, sans-serif\",\n    transition: \"background 0.1s\",\n  };\n\n  const onEnter = (e: React.MouseEvent) => {\n    (e.currentTarget as HTMLButtonElement).style.background =\n      \"rgba(255,255,255,0.1)\";\n  };\n  const onLeave = (e: React.MouseEvent) => {\n    (e.currentTarget as HTMLButtonElement).style.background = \"transparent\";\n  };\n\n  return (\n    <div\n      ref={panelRef}\n      data-afterbefore=\"true\"\n      style={{\n        position: \"fixed\",\n        left: panelLeft,\n        bottom: panelBottom,\n        width: PANEL_WIDTH,\n        background: \"rgba(24, 24, 27, 0.95)\",\n        borderRadius: 10,\n        boxShadow:\n          \"0 4px 20px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08)\",\n        zIndex: 2147483647,\n        fontFamily: \"system-ui, -apple-system, sans-serif\",\n        backdropFilter: \"blur(12px)\",\n        overflow: \"hidden\",\n      }}\n    >\n      {/* Header */}\n      <div\n        style={{\n          padding: \"10px 12px 6px\",\n          fontSize: 12,\n          fontWeight: 600,\n          color: \"rgba(255,255,255,0.5)\",\n          letterSpacing: \"0.02em\",\n        }}\n      >\n        Before &amp; After captured\n      </div>\n\n      {/* Actions */}\n      <div style={{ padding: \"0 4px 4px\" }}>\n        <button\n          style={buttonStyle}\n          onClick={handleOpenFolder}\n          onMouseEnter={onEnter}\n          onMouseLeave={onLeave}\n        >\n          <FolderIcon />\n          Open Folder\n        </button>\n        <button\n          style={buttonStyle}\n          onClick={handleCopyMarkdown}\n          onMouseEnter={onEnter}\n          onMouseLeave={onLeave}\n        >\n          <CopyIcon />\n          Copy Markdown\n        </button>\n        <button\n          style={buttonStyle}\n          onClick={handlePush}\n          disabled={pushing}\n          onMouseEnter={onEnter}\n          onMouseLeave={onLeave}\n        >\n          <PushIcon />\n          {pushing ? \"Pushing...\" : \"Push to PR\"}\n        </button>\n\n        {/* Separator */}\n        <div\n          style={{\n            height: 1,\n            background: \"rgba(255,255,255,0.08)\",\n            margin: \"4px 6px\",\n          }}\n        />\n\n        <button\n          style={{ ...buttonStyle, color: \"rgba(255,255,255,0.5)\" }}\n          onClick={handleReset}\n          onMouseEnter={onEnter}\n          onMouseLeave={onLeave}\n        >\n          <ResetIcon />\n          Reset\n        </button>\n      </div>\n\n      {/* Toast */}\n      {toast && (\n        <div\n          style={{\n            position: \"absolute\",\n            bottom: \"100%\",\n            left: \"50%\",\n            transform: \"translateX(-50%)\",\n            marginBottom: 8,\n            padding: \"6px 12px\",\n            borderRadius: 6,\n            fontSize: 12,\n            fontWeight: 500,\n            whiteSpace: \"nowrap\",\n            color: \"white\",\n            background:\n              toast.type === \"success\"\n                ? \"rgba(34, 197, 94, 0.9)\"\n                : \"rgba(239, 68, 68, 0.9)\",\n            boxShadow: \"0 2px 8px rgba(0,0,0,0.3)\",\n          }}\n        >\n          {toast.message}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction FolderIcon() {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 14 14\"\n      style={{ color: \"rgba(255,255,255,0.5)\" }}\n    >\n      <path\n        d=\"M1.5 3A1.5 1.5 0 013 1.5h2.38a1 1 0 01.72.3L7 2.72a1 1 0 00.72.3H11A1.5 1.5 0 0112.5 4.5v6A1.5 1.5 0 0111 12H3A1.5 1.5 0 011.5 10.5V3z\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.3\"\n      />\n    </svg>\n  );\n}\n\nfunction CopyIcon() {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 14 14\"\n      style={{ color: \"rgba(255,255,255,0.5)\" }}\n    >\n      <rect\n        x=\"4\"\n        y=\"4\"\n        width=\"8.5\"\n        height=\"8.5\"\n        rx=\"1.5\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.3\"\n      />\n      <path\n        d=\"M10 4V2.5A1.5 1.5 0 008.5 1h-6A1.5 1.5 0 001 2.5v6A1.5 1.5 0 002.5 10H4\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.3\"\n      />\n    </svg>\n  );\n}\n\nfunction PushIcon() {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 14 14\"\n      style={{ color: \"rgba(255,255,255,0.5)\" }}\n    >\n      <path\n        d=\"M7 11V3m0 0L4 6m3-3l3 3\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.3\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\nfunction ResetIcon() {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 14 14\"\n      style={{ color: \"rgba(255,255,255,0.4)\" }}\n    >\n      <path\n        d=\"M2.5 7a4.5 4.5 0 118 2.5\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.3\"\n        strokeLinecap=\"round\"\n      />\n      <path\n        d=\"M2.5 3v4h4\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.3\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n"],"mappings":"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","names":["useState","useCallback","useRef","useCallback","useState","useEffect","useRef","useCallback","jsx","jsxs","useState","useRef","useCallback","useEffect","jsx","jsxs","useState","useRef","useEffect","useCallback","jsx","jsxs","jsx","jsxs","useState","useRef","useCallback"]}

package/dist/server/middleware.d.ts

@@ -0,0 +1,8 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+declare function handleAfterBefore(req: NextRequest): Promise<NextResponse>;
+declare const config: {
+    matcher: string;
+};
+
+export { config, handleAfterBefore };

package/dist/server/middleware.js

@@ -0,0 +1,29 @@
+import {
+  handleOpen,
+  handlePush,
+  handleSave
+} from "../chunk-DAWAW3ZL.js";
+
+// src/server/middleware.ts
+import { NextResponse } from "next/server";
+async function handleAfterBefore(req) {
+  const { pathname } = req.nextUrl;
+  if (pathname === "/__afterbefore/save" && req.method === "POST") {
+    return handleSave(req);
+  }
+  if (pathname === "/__afterbefore/push" && req.method === "POST") {
+    return handlePush(req);
+  }
+  if (pathname === "/__afterbefore/open" && req.method === "POST") {
+    return handleOpen(req);
+  }
+  return NextResponse.json({ error: "Not found" }, { status: 404 });
+}
+var config = {
+  matcher: "/__afterbefore/:path*"
+};
+export {
+  config,
+  handleAfterBefore
+};
+//# sourceMappingURL=middleware.js.map

package/dist/server/middleware.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/server/middleware.ts"],"sourcesContent":["import { NextRequest, NextResponse } from \"next/server\";\nimport { handleSave } from \"./save\";\nimport { handlePush } from \"./push\";\nimport { handleOpen } from \"./open\";\n\nexport async function handleAfterBefore(\n  req: NextRequest,\n): Promise<NextResponse> {\n  const { pathname } = req.nextUrl;\n\n  if (pathname === \"/__afterbefore/save\" && req.method === \"POST\") {\n    return handleSave(req);\n  }\n  if (pathname === \"/__afterbefore/push\" && req.method === \"POST\") {\n    return handlePush(req);\n  }\n  if (pathname === \"/__afterbefore/open\" && req.method === \"POST\") {\n    return handleOpen(req);\n  }\n\n  return NextResponse.json({ error: \"Not found\" }, { status: 404 });\n}\n\nexport const config = {\n  matcher: \"/__afterbefore/:path*\",\n};\n"],"mappings":";;;;;;;AAAA,SAAsB,oBAAoB;AAK1C,eAAsB,kBACpB,KACuB;AACvB,QAAM,EAAE,SAAS,IAAI,IAAI;AAEzB,MAAI,aAAa,yBAAyB,IAAI,WAAW,QAAQ;AAC/D,WAAO,WAAW,GAAG;AAAA,EACvB;AACA,MAAI,aAAa,yBAAyB,IAAI,WAAW,QAAQ;AAC/D,WAAO,WAAW,GAAG;AAAA,EACvB;AACA,MAAI,aAAa,yBAAyB,IAAI,WAAW,QAAQ;AAC/D,WAAO,WAAW,GAAG;AAAA,EACvB;AAEA,SAAO,aAAa,KAAK,EAAE,OAAO,YAAY,GAAG,EAAE,QAAQ,IAAI,CAAC;AAClE;AAEO,IAAM,SAAS;AAAA,EACpB,SAAS;AACX;","names":[]}

package/dist/server/route.d.ts

@@ -0,0 +1,10 @@
+import { NextResponse, NextRequest } from 'next/server';
+
+declare function POST(req: NextRequest, { params }: {
+    params: Promise<{
+        path: string[];
+    }>;
+}): Promise<NextResponse>;
+declare function GET(): Promise<NextResponse>;
+
+export { GET, POST };

package/dist/server/route.js

@@ -0,0 +1,30 @@
+import {
+  handleOpen,
+  handlePush,
+  handleSave
+} from "../chunk-DAWAW3ZL.js";
+
+// src/server/route.ts
+import { NextResponse } from "next/server";
+async function POST(req, { params }) {
+  const { path } = await params;
+  const action = path?.[0];
+  switch (action) {
+    case "save":
+      return handleSave(req);
+    case "push":
+      return handlePush(req);
+    case "open":
+      return handleOpen(req);
+    default:
+      return NextResponse.json({ error: "Not found" }, { status: 404 });
+  }
+}
+async function GET() {
+  return NextResponse.json({ status: "afterbefore dev server" });
+}
+export {
+  GET,
+  POST
+};
+//# sourceMappingURL=route.js.map

package/dist/server/route.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/server/route.ts"],"sourcesContent":["import { NextRequest, NextResponse } from \"next/server\";\nimport { handleSave } from \"./save\";\nimport { handlePush } from \"./push\";\nimport { handleOpen } from \"./open\";\n\nexport async function POST(\n  req: NextRequest,\n  { params }: { params: Promise<{ path: string[] }> },\n): Promise<NextResponse> {\n  const { path } = await params;\n  const action = path?.[0];\n\n  switch (action) {\n    case \"save\":\n      return handleSave(req);\n    case \"push\":\n      return handlePush(req);\n    case \"open\":\n      return handleOpen(req);\n    default:\n      return NextResponse.json({ error: \"Not found\" }, { status: 404 });\n  }\n}\n\nexport async function GET(): Promise<NextResponse> {\n  return NextResponse.json({ status: \"afterbefore dev server\" });\n}\n"],"mappings":";;;;;;;AAAA,SAAsB,oBAAoB;AAK1C,eAAsB,KACpB,KACA,EAAE,OAAO,GACc;AACvB,QAAM,EAAE,KAAK,IAAI,MAAM;AACvB,QAAM,SAAS,OAAO,CAAC;AAEvB,UAAQ,QAAQ;AAAA,IACd,KAAK;AACH,aAAO,WAAW,GAAG;AAAA,IACvB,KAAK;AACH,aAAO,WAAW,GAAG;AAAA,IACvB,KAAK;AACH,aAAO,WAAW,GAAG;AAAA,IACvB;AACE,aAAO,aAAa,KAAK,EAAE,OAAO,YAAY,GAAG,EAAE,QAAQ,IAAI,CAAC;AAAA,EACpE;AACF;AAEA,eAAsB,MAA6B;AACjD,SAAO,aAAa,KAAK,EAAE,QAAQ,yBAAyB,CAAC;AAC/D;","names":[]}

package/package.json

@@ -1,17 +1,22 @@
 {
   "name": "afterbefore",
-  "version": "0.1.19",
-  "description": "Automatic before/after screenshot capture for PRs. Git diff is the config.",
+  "version": "0.2.1",
+  "description": "Before/after screenshot overlay for Next.js development",
   "type": "module",
-  "bin": {
-    "afterbefore": "./dist/cli.js"
-  },
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/overlay/index.js",
+  "types": "./dist/overlay/index.d.ts",
   "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+    "./overlay": {
+      "import": "./dist/overlay/index.js",
+      "types": "./dist/overlay/index.d.ts"
+    },
+    "./next": {
+      "import": "./dist/next.js",
+      "types": "./dist/next.d.ts"
+    },
+    "./server": {
+      "import": "./dist/server/route.js",
+      "types": "./dist/server/route.d.ts"
     }
   },
   "files": [
@@ -28,10 +33,10 @@
   },
   "keywords": [
     "screenshot",
-    "after-before",
-    "diff",
-    "pr",
-    "visual-testing"
+    "before-after",
+    "visual-diff",
+    "nextjs",
+    "dev-overlay"
   ],
   "author": "Kai Revicius",
   "license": "PolyForm-Shield-1.0.0",
@@ -42,14 +47,31 @@
     "node": ">=18"
   },
   "dependencies": {
-    "chalk": "^5.6.2",
-    "commander": "^14.0.3",
-    "es-module-lexer": "^2.0.0",
-    "ora": "^9.3.0",
-    "playwright": "^1.58.2"
+    "html-to-image": "^1.11.11"
+  },
+  "peerDependencies": {
+    "next": ">=14.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": false
+    },
+    "react": {
+      "optional": false
+    },
+    "react-dom": {
+      "optional": false
+    }
   },
   "devDependencies": {
-    "@types/node": "^25.3.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "next": "^15.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^4.0.18"