prev-cli 0.24.20 → 0.25.0

package/src/theme/hooks/useApprovalStatus.ts

@@ -0,0 +1,50 @@
+import { useState, useCallback } from 'react'
+import { storage } from '../storage'
+import type { ApprovalStatus, StatusEntry, AuditLogEntry, UserIdentity } from '../types'
+
+const DEFAULT_ENTRY: StatusEntry = {
+  previewName: '',
+  status: 'draft',
+  updatedAt: '',
+  updatedBy: '',
+}
+
+export function useApprovalStatus(previewName: string) {
+  const [entry, setEntry] = useState<StatusEntry>(
+    () => storage.get<StatusEntry>(`status:${previewName}`) ?? { ...DEFAULT_ENTRY, previewName }
+  )
+
+  const changeStatus = useCallback((newStatus: ApprovalStatus) => {
+    const user = storage.get<UserIdentity>('user')
+    const now = new Date().toISOString()
+
+    // Record audit log
+    const audit: AuditLogEntry = {
+      previewName,
+      from: entry.status,
+      to: newStatus,
+      changedBy: user?.name || 'Anonymous',
+      changedAt: now,
+    }
+    storage.set(`audit:${previewName}:${Date.now()}`, audit)
+
+    // Update status
+    const updated: StatusEntry = {
+      previewName,
+      status: newStatus,
+      updatedAt: now,
+      updatedBy: user?.name || 'Anonymous',
+    }
+    storage.set(`status:${previewName}`, updated)
+    setEntry(updated)
+  }, [previewName, entry.status])
+
+  const getAuditLog = useCallback((): AuditLogEntry[] => {
+    return storage
+      .list(`audit:${previewName}:`)
+      .map(k => storage.get<AuditLogEntry>(k))
+      .filter(Boolean) as AuditLogEntry[]
+  }, [previewName])
+
+  return { status: entry.status, changeStatus, entry, getAuditLog }
+}

package/src/theme/hooks/useSnapshots.ts

@@ -0,0 +1,147 @@
+import { useState, useCallback, useRef } from 'react'
+import { storage } from '../storage'
+import type { Snapshot } from '../types'
+
+const MAX_SNAPSHOTS = 20
+
+export function useSnapshots(previewName?: string) {
+  const capturingRef = useRef(false)
+  const loadAll = (): Snapshot[] => {
+    const all = storage
+      .list('snapshots:')
+      .map(k => storage.get<Snapshot>(k))
+      .filter(Boolean) as Snapshot[]
+
+    // Sort newest first
+    all.sort((a, b) => b.createdAt.localeCompare(a.createdAt))
+
+    return previewName
+      ? all.filter(s => s.previewName === previewName)
+      : all
+  }
+
+  const [snapshots, setSnapshots] = useState<Snapshot[]>(loadAll)
+
+  const refresh = useCallback(() => {
+    setSnapshots(loadAll())
+  }, [previewName])
+
+  const captureSnapshot = useCallback(
+    async (
+      iframeRef: React.RefObject<HTMLIFrameElement | null>,
+      metadata: {
+        previewName: string
+        stateOrStep: string
+        viewport: string
+        label?: string
+      },
+    ) => {
+      if (capturingRef.current) return
+      capturingRef.current = true
+
+      const id = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
+      const now = new Date().toISOString()
+
+      let screenshotDataUrl = ''
+
+      try {
+        const iframe = iframeRef.current
+        if (iframe?.contentDocument) {
+          const doc = iframe.contentDocument
+          const serializer = new XMLSerializer()
+          const html = serializer.serializeToString(doc)
+          const width = iframe.clientWidth || 800
+          const height = iframe.clientHeight || 600
+
+          // Draw via SVG foreignObject onto canvas
+          const svg = `
+            <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
+              <foreignObject width="100%" height="100%">
+                ${html}
+              </foreignObject>
+            </svg>
+          `
+
+          const canvas = document.createElement('canvas')
+          canvas.width = width
+          canvas.height = height
+          const ctx = canvas.getContext('2d')
+          const img = new Image()
+          const blob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' })
+          const url = URL.createObjectURL(blob)
+
+          try {
+            img.src = url
+            await img.decode()
+            ctx?.drawImage(img, 0, 0)
+            screenshotDataUrl = canvas.toDataURL('image/png')
+          } catch {
+            // tainted canvas or draw failure
+          } finally {
+            URL.revokeObjectURL(url)
+          }
+        }
+      } catch {
+        // cross-origin or other access error
+      }
+
+      // Fallback placeholder if capture failed
+      if (!screenshotDataUrl) {
+        const w = 320
+        const h = 200
+        const placeholderSvg = `
+          <svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}">
+            <rect width="${w}" height="${h}" fill="#f0f0f0" rx="8"/>
+            <text x="50%" y="45%" text-anchor="middle" fill="#999" font-size="14" font-family="system-ui">
+              ${metadata.previewName}
+            </text>
+            <text x="50%" y="60%" text-anchor="middle" fill="#bbb" font-size="11" font-family="system-ui">
+              Cross-origin snapshot
+            </text>
+          </svg>
+        `
+        screenshotDataUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(placeholderSvg.trim())}`
+      }
+
+      const snapshot: Snapshot = {
+        id,
+        previewName: metadata.previewName,
+        stateOrStep: metadata.stateOrStep,
+        viewport: metadata.viewport,
+        screenshotDataUrl,
+        createdAt: now,
+        label: metadata.label,
+      }
+
+      storage.set(`snapshots:${id}`, snapshot)
+
+      // Enforce cap: delete oldest beyond MAX_SNAPSHOTS
+      const allKeys = storage.list('snapshots:')
+      if (allKeys.length > MAX_SNAPSHOTS) {
+        const allSnapshots = allKeys
+          .map(k => storage.get<Snapshot>(k))
+          .filter(Boolean) as Snapshot[]
+        allSnapshots.sort((a, b) => a.createdAt.localeCompare(b.createdAt))
+
+        const toDelete = allSnapshots.slice(0, allSnapshots.length - MAX_SNAPSHOTS)
+        for (const s of toDelete) {
+          storage.remove(`snapshots:${s.id}`)
+        }
+      }
+
+      setSnapshots(loadAll())
+      capturingRef.current = false
+    },
+    [previewName],
+  )
+
+  const deleteSnapshot = useCallback(
+    (id: string) => {
+      storage.remove(`snapshots:${id}`)
+      setSnapshots(loadAll())
+    },
+    [previewName],
+  )
+
+  return { snapshots, captureSnapshot, deleteSnapshot, refresh }
+}

package/src/theme/hooks/useStorage.ts

@@ -0,0 +1,26 @@
+import { useState, useCallback } from 'react'
+import { storage } from '../storage'
+
+export function useStorage<T>(key: string, initial: T): [T, (v: T) => void] {
+  const [value, setValue] = useState<T>(() => storage.get<T>(key) ?? initial)
+
+  const update = useCallback((v: T) => {
+    storage.set(key, v)
+    setValue(v)
+  }, [key])
+
+  return [value, update]
+}
+
+export function useStorageList<T>(prefix: string): [T[], () => void] {
+  const load = () =>
+    storage.list(prefix).map(k => storage.get<T>(k)).filter(Boolean) as T[]
+
+  const [items, setItems] = useState<T[]>(load)
+
+  const refresh = useCallback(() => {
+    setItems(load())
+  }, [prefix])
+
+  return [items, refresh]
+}

package/src/theme/hooks/useTokenOverrides.ts

@@ -0,0 +1,56 @@
+import { useState, useCallback } from 'react'
+import { storage } from '../storage'
+import type { TokenOverride } from '../types'
+
+const STORAGE_KEY = 'token-overrides'
+
+export function useTokenOverrides() {
+  const [overrides, setOverrides] = useState<TokenOverride[]>(
+    () => storage.get<TokenOverride[]>(STORAGE_KEY) ?? []
+  )
+
+  const persist = (next: TokenOverride[]) => {
+    storage.set(STORAGE_KEY, next)
+    setOverrides(next)
+  }
+
+  const setOverride = useCallback(
+    (category: string, name: string, originalValue: string, newValue: string) => {
+      setOverrides(prev => {
+        const idx = prev.findIndex(o => o.category === category && o.name === name)
+        const entry: TokenOverride = { category, name, originalValue, overrideValue: newValue }
+        const next = idx >= 0
+          ? prev.map((o, i) => (i === idx ? entry : o))
+          : [...prev, entry]
+        storage.set(STORAGE_KEY, next)
+        return next
+      })
+    },
+    [],
+  )
+
+  const removeOverride = useCallback(
+    (category: string, name: string) => {
+      setOverrides(prev => {
+        const next = prev.filter(o => !(o.category === category && o.name === name))
+        storage.set(STORAGE_KEY, next)
+        return next
+      })
+    },
+    [],
+  )
+
+  const resetAll = useCallback(() => {
+    persist([])
+  }, [])
+
+  const toCssOverrides = useCallback((): string => {
+    if (overrides.length === 0) return ''
+    const declarations = overrides
+      .map(o => `  --prev-token-${o.category}-${o.name}: ${o.overrideValue};`)
+      .join('\n')
+    return `:root {\n${declarations}\n}`
+  }, [overrides])
+
+  return { overrides, setOverride, removeOverride, resetAll, toCssOverrides }
+}

package/src/theme/hooks/useViewport.ts

@@ -0,0 +1,23 @@
+import { useState, useCallback } from 'react'
+import { storage } from '../storage'
+
+export type Viewport = 'mobile' | 'tablet' | 'desktop'
+
+export const VIEWPORT_WIDTHS: Record<Viewport, number> = {
+  mobile: 375,
+  tablet: 768,
+  desktop: 1280,
+}
+
+export function useViewport(): [Viewport, (v: Viewport) => void] {
+  const [viewport, setViewportState] = useState<Viewport>(
+    () => storage.get<Viewport>('viewport-pref') ?? 'desktop'
+  )
+
+  const setViewport = useCallback((v: Viewport) => {
+    storage.set('viewport-pref', v)
+    setViewportState(v)
+  }, [])
+
+  return [viewport, setViewport]
+}

package/src/theme/icons.tsx

@@ -92,13 +92,51 @@ export function IconSprite() {
       <symbol id="icon-arrow-left" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
         <path d="M19 12H5M12 19l-7-7 7-7" />
       </symbol>
+
+      {/* Pin (map pin) */}
+      <symbol id="icon-pin" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z" />
+        <circle cx="12" cy="9" r="2.5" />
+      </symbol>
+
+      {/* Camera */}
+      <symbol id="icon-camera" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
+        <circle cx="12" cy="13" r="4" />
+      </symbol>
+
+      {/* Check Circle */}
+      <symbol id="icon-check-circle" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+        <path d="M22 4L12 14.01l-3-3" />
+      </symbol>
+
+      {/* Palette */}
+      <symbol id="icon-palette" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <circle cx="13.5" cy="6.5" r="0.5" fill="currentColor" />
+        <circle cx="17.5" cy="10.5" r="0.5" fill="currentColor" />
+        <circle cx="8.5" cy="7.5" r="0.5" fill="currentColor" />
+        <circle cx="6.5" cy="12.5" r="0.5" fill="currentColor" />
+        <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.93 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.04-.23-.29-.38-.63-.38-1.02 0-.83.67-1.5 1.5-1.5H16c3.31 0 6-2.69 6-6 0-5.17-4.49-8.94-10-8.94z" />
+      </symbol>
+
+      {/* Map / Flow diagram */}
+      <symbol id="icon-map" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M1 6v16l7-4 8 4 7-4V2l-7 4-8-4-7 4z" />
+        <path d="M8 2v16M16 6v16" />
+      </symbol>
+
+      {/* Message Circle */}
+      <symbol id="icon-message-circle" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
+      </symbol>
     </svg>
   )
 }
 
 // Icon component that references symbols from the sprite
 interface IconProps {
-  name: 'menu' | 'grid' | 'sun' | 'moon' | 'maximize' | 'minimize' | 'x' | 'chevron-right' | 'file' | 'folder' | 'mobile' | 'tablet' | 'desktop' | 'sliders' | 'loader' | 'arrow-left'
+  name: 'menu' | 'grid' | 'sun' | 'moon' | 'maximize' | 'minimize' | 'x' | 'chevron-right' | 'file' | 'folder' | 'mobile' | 'tablet' | 'desktop' | 'sliders' | 'loader' | 'arrow-left' | 'pin' | 'camera' | 'check-circle' | 'palette' | 'map' | 'message-circle'
   size?: number
   className?: string
   style?: React.CSSProperties

package/src/theme/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Documentation</title>
+  <!-- Preconnect to Google Fonts for faster loading -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <!-- Preload critical fonts -->
+  <link rel="preload" href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=IBM+Plex+Mono:wght@400;500&display=swap" as="style" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=IBM+Plex+Mono:wght@400;500&display=swap" />
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="./entry.tsx"></script>
+</body>
+</html>

package/src/theme/mdx-components.tsx

@@ -33,7 +33,7 @@ function routeExists(href: string): boolean {
 // Custom link component that validates internal links and uses router
 function MdxLink({ href, children, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
   const isInternal = isInternalLink(href || '')
-  const isDev = import.meta.env?.DEV ?? false
+  const isDev = import.meta.env.DEV ?? false
 
   // For internal links, use TanStack Router's Link
   if (isInternal && href) {

package/src/theme/previews/AnnotationLayer.tsx

@@ -0,0 +1,285 @@
+import React, { useState, useRef, useEffect } from 'react'
+import type { AnnotationCategory } from '../types'
+import { useAnnotations } from '../hooks/useAnnotations'
+import { AnnotationPin } from './AnnotationPin'
+import { AnnotationThread } from './AnnotationThread'
+import { Icon } from '../icons'
+
+const CATEGORY_COLORS: Record<AnnotationCategory, string> = {
+  bug: 'oklch(0.65 0.20 25)',
+  copy: 'oklch(0.65 0.15 250)',
+  design: 'oklch(0.65 0.18 310)',
+  general: 'oklch(0.65 0.10 85)',
+}
+
+const CATEGORIES: AnnotationCategory[] = ['bug', 'copy', 'design', 'general']
+
+interface AnnotationLayerProps {
+  previewName: string
+  stateOrStep: string
+  enabled: boolean
+  children: React.ReactNode
+}
+
+interface PendingPin {
+  x: number
+  y: number
+}
+
+export function AnnotationLayer({ previewName, stateOrStep, enabled, children }: AnnotationLayerProps) {
+  const { annotations, createAnnotation, addComment, resolveAnnotation, deleteAnnotation } =
+    useAnnotations(previewName, stateOrStep)
+  const [activeId, setActiveId] = useState<string | null>(null)
+  const [pending, setPending] = useState<PendingPin | null>(null)
+  const [pendingCategory, setPendingCategory] = useState<AnnotationCategory>('general')
+  const [pendingText, setPendingText] = useState('')
+  const containerRef = useRef<HTMLDivElement>(null)
+  const formRef = useRef<HTMLDivElement>(null)
+
+  // Filter annotations for the current state/step
+  const visible = annotations.filter(a => a.stateOrStep === stateOrStep)
+
+  // Close on outside click
+  useEffect(() => {
+    if (!activeId && !pending) return
+    const handler = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setActiveId(null)
+        setPending(null)
+      }
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [activeId, pending])
+
+  const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!enabled) return
+    const rect = e.currentTarget.getBoundingClientRect()
+    const x = ((e.clientX - rect.left) / rect.width) * 100
+    const y = ((e.clientY - rect.top) / rect.height) * 100
+    setActiveId(null)
+    setPending({ x, y })
+    setPendingCategory('general')
+    setPendingText('')
+  }
+
+  const handleCreate = () => {
+    const text = pendingText.trim()
+    if (!text || !pending) return
+    createAnnotation(pending.x, pending.y, pendingCategory, text)
+    setPending(null)
+    setPendingText('')
+  }
+
+  return (
+    <div ref={containerRef} style={{ position: 'relative' }}>
+      {children}
+
+      {/* Clickable overlay when annotation mode is enabled */}
+      {enabled && (
+        <div
+          onClick={handleOverlayClick}
+          style={{
+            position: 'absolute',
+            inset: 0,
+            cursor: 'crosshair',
+            zIndex: 15,
+          }}
+        />
+      )}
+
+      {/* Existing pins */}
+      {visible.map((a, i) => (
+        <AnnotationPin
+          key={a.id}
+          x={a.x}
+          y={a.y}
+          index={i + 1}
+          category={a.category}
+          resolved={a.resolved}
+          isActive={activeId === a.id}
+          onClick={() => {
+            setActiveId(activeId === a.id ? null : a.id)
+            setPending(null)
+          }}
+        />
+      ))}
+
+      {/* Active thread */}
+      {activeId && (() => {
+        const annotation = visible.find(a => a.id === activeId)
+        if (!annotation) return null
+        return (
+          <AnnotationThread
+            annotation={annotation}
+            onAddComment={(text) => addComment(annotation.id, text)}
+            onResolve={() => resolveAnnotation(annotation.id)}
+            onDelete={() => {
+              deleteAnnotation(annotation.id)
+              setActiveId(null)
+            }}
+            onClose={() => setActiveId(null)}
+          />
+        )
+      })()}
+
+      {/* New annotation form */}
+      {pending && (
+        <div
+          ref={formRef}
+          onClick={(e) => e.stopPropagation()}
+          style={{
+            position: 'absolute',
+            left: `${pending.x}%`,
+            top: `${pending.y}%`,
+            transform: 'translate(12px, -12px)',
+            width: '240px',
+            backgroundColor: 'var(--fd-card)',
+            borderRadius: '12px',
+            boxShadow: '0 12px 40px -8px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.06)',
+            zIndex: 30,
+            overflow: 'hidden',
+            fontSize: '13px',
+          }}
+        >
+          {/* Category selector */}
+          <div style={{
+            padding: '10px 12px',
+            borderBottom: '1px solid var(--fd-border)',
+            backgroundColor: 'var(--fd-muted)',
+          }}>
+            <div style={{
+              fontSize: '11px',
+              fontWeight: 600,
+              color: 'var(--fd-muted-foreground)',
+              textTransform: 'uppercase',
+              letterSpacing: '0.04em',
+              marginBottom: '8px',
+            }}>
+              Category
+            </div>
+            <div style={{ display: 'flex', gap: '6px' }}>
+              {CATEGORIES.map(cat => (
+                <button
+                  key={cat}
+                  onClick={() => setPendingCategory(cat)}
+                  title={cat}
+                  style={{
+                    width: '28px',
+                    height: '28px',
+                    borderRadius: '50%',
+                    border: pendingCategory === cat
+                      ? '2px solid var(--fd-foreground)'
+                      : '2px solid transparent',
+                    backgroundColor: CATEGORY_COLORS[cat],
+                    cursor: 'pointer',
+                    padding: 0,
+                    boxShadow: pendingCategory === cat
+                      ? `0 0 0 2px var(--fd-card), 0 0 0 4px ${CATEGORY_COLORS[cat]}`
+                      : 'none',
+                    transition: 'box-shadow 0.15s ease',
+                  }}
+                />
+              ))}
+            </div>
+          </div>
+
+          {/* Comment input */}
+          <div style={{ padding: '10px 12px' }}>
+            <textarea
+              value={pendingText}
+              onChange={e => setPendingText(e.target.value)}
+              onKeyDown={e => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                  e.preventDefault()
+                  handleCreate()
+                }
+              }}
+              placeholder="Describe the issue..."
+              autoFocus
+              rows={3}
+              style={{
+                width: '100%',
+                padding: '8px 10px',
+                fontSize: '12px',
+                border: '1px solid var(--fd-border)',
+                borderRadius: '6px',
+                backgroundColor: 'var(--fd-background)',
+                color: 'var(--fd-foreground)',
+                outline: 'none',
+                resize: 'vertical',
+                fontFamily: 'inherit',
+                boxSizing: 'border-box',
+              }}
+            />
+          </div>
+
+          {/* Actions */}
+          <div style={{
+            padding: '8px 12px',
+            borderTop: '1px solid var(--fd-border)',
+            display: 'flex',
+            gap: '6px',
+            justifyContent: 'flex-end',
+          }}>
+            <button
+              onClick={() => setPending(null)}
+              style={{
+                padding: '5px 10px',
+                fontSize: '11px',
+                fontWeight: 500,
+                border: '1px solid var(--fd-border)',
+                borderRadius: '6px',
+                backgroundColor: 'var(--fd-background)',
+                color: 'var(--fd-muted-foreground)',
+                cursor: 'pointer',
+              }}
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleCreate}
+              style={{
+                padding: '5px 12px',
+                fontSize: '11px',
+                fontWeight: 600,
+                border: 'none',
+                borderRadius: '6px',
+                backgroundColor: 'var(--fd-primary)',
+                color: 'var(--fd-primary-foreground)',
+                cursor: 'pointer',
+                opacity: pendingText.trim() ? 1 : 0.5,
+              }}
+              disabled={!pendingText.trim()}
+            >
+              Add Pin
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Pending pin marker */}
+      {pending && (
+        <div style={{
+          position: 'absolute',
+          left: `${pending.x}%`,
+          top: `${pending.y}%`,
+          transform: 'translate(-50%, -50%)',
+          width: '24px',
+          height: '24px',
+          borderRadius: '50%',
+          border: '2px solid white',
+          backgroundColor: CATEGORY_COLORS[pendingCategory],
+          boxShadow: `0 0 0 3px ${CATEGORY_COLORS[pendingCategory]}, 0 2px 8px rgba(0, 0, 0, 0.3)`,
+          zIndex: 22,
+          pointerEvents: 'none',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}>
+          <Icon name="pin" size={14} style={{ color: 'white' }} />
+        </div>
+      )}
+    </div>
+  )
+}