prev-cli 0.24.20 → 0.25.0

package/src/theme/previews/SnapshotButton.tsx

@@ -0,0 +1,68 @@
+import React, { useState, useCallback } from 'react'
+import { Icon } from '../icons'
+
+interface SnapshotButtonProps {
+  onCapture: () => void
+}
+
+export function SnapshotButton({ onCapture }: SnapshotButtonProps) {
+  const [flashing, setFlashing] = useState(false)
+
+  const handleClick = useCallback(() => {
+    onCapture()
+    setFlashing(true)
+    setTimeout(() => setFlashing(false), 300)
+  }, [onCapture])
+
+  return (
+    <div style={{ position: 'relative', display: 'inline-flex' }}>
+      <button
+        onClick={handleClick}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '6px',
+          border: 'none',
+          borderRadius: '8px',
+          cursor: 'pointer',
+          backgroundColor: 'var(--fd-muted)',
+          color: 'var(--fd-muted-foreground)',
+          transition: 'all 0.15s ease',
+        }}
+        onMouseEnter={e => {
+          e.currentTarget.style.backgroundColor = 'var(--fd-secondary)'
+          e.currentTarget.style.color = 'var(--fd-foreground)'
+        }}
+        onMouseLeave={e => {
+          e.currentTarget.style.backgroundColor = 'var(--fd-muted)'
+          e.currentTarget.style.color = 'var(--fd-muted-foreground)'
+        }}
+        title="Capture snapshot"
+      >
+        <Icon name="camera" size={14} />
+      </button>
+
+      {/* Flash overlay */}
+      {flashing && (
+        <div
+          style={{
+            position: 'fixed',
+            inset: 0,
+            backgroundColor: 'white',
+            zIndex: 9999,
+            pointerEvents: 'none',
+            animation: 'snapshot-flash 300ms ease-out forwards',
+          }}
+        />
+      )}
+
+      <style>{`
+        @keyframes snapshot-flash {
+          0% { opacity: 0.6; }
+          100% { opacity: 0; }
+        }
+      `}</style>
+    </div>
+  )
+}

package/src/theme/previews/SnapshotCompare.tsx

@@ -0,0 +1,216 @@
+import React, { useState, useMemo } from 'react'
+import { useSnapshots } from '../hooks/useSnapshots'
+import { Icon } from '../icons'
+
+interface SnapshotCompareProps {
+  leftId?: string
+  rightId?: string
+}
+
+export function SnapshotCompare({ leftId: initialLeftId, rightId: initialRightId }: SnapshotCompareProps) {
+  const { snapshots } = useSnapshots()
+  const [leftId, setLeftId] = useState(initialLeftId || '')
+  const [rightId, setRightId] = useState(initialRightId || '')
+
+  const left = useMemo(() => snapshots.find(s => s.id === leftId), [snapshots, leftId])
+  const right = useMemo(() => snapshots.find(s => s.id === rightId), [snapshots, rightId])
+
+  if (snapshots.length < 2) {
+    return (
+      <div style={{
+        padding: '48px',
+        textAlign: 'center',
+        backgroundColor: 'var(--fd-card)',
+        borderRadius: '16px',
+        border: '1px solid var(--fd-border)',
+      }}>
+        <Icon name="camera" size={48} style={{ opacity: 0.3, marginBottom: '16px' }} />
+        <h2 style={{
+          margin: '0 0 8px',
+          fontSize: '18px',
+          fontWeight: 600,
+          color: 'var(--fd-foreground)',
+        }}>
+          Need at least 2 snapshots
+        </h2>
+        <p style={{
+          margin: 0,
+          fontSize: '14px',
+          color: 'var(--fd-muted-foreground)',
+        }}>
+          Capture snapshots from preview pages to compare them side by side.
+        </p>
+      </div>
+    )
+  }
+
+  const selectStyle: React.CSSProperties = {
+    padding: '6px 10px',
+    fontSize: '12px',
+    border: '1px solid var(--fd-border)',
+    borderRadius: '6px',
+    backgroundColor: 'var(--fd-background)',
+    color: 'var(--fd-foreground)',
+    cursor: 'pointer',
+    maxWidth: '200px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  }
+
+  return (
+    <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '16px',
+      backgroundColor: 'var(--fd-card)',
+      borderRadius: '16px',
+      border: '1px solid var(--fd-border)',
+      overflow: 'hidden',
+    }}>
+      {/* Header with selectors */}
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '16px 24px',
+        borderBottom: '1px solid var(--fd-border)',
+        background: 'linear-gradient(to bottom, var(--fd-card), var(--fd-muted))',
+      }}>
+        <h2 style={{
+          margin: 0,
+          fontSize: '18px',
+          fontWeight: 600,
+          color: 'var(--fd-foreground)',
+          letterSpacing: '-0.02em',
+        }}>
+          Compare Snapshots
+        </h2>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+          <select
+            value={leftId}
+            onChange={e => setLeftId(e.target.value)}
+            style={selectStyle}
+          >
+            <option value="">Select left...</option>
+            {snapshots.map(s => (
+              <option key={s.id} value={s.id}>
+                {s.label || s.previewName} — {s.stateOrStep}
+              </option>
+            ))}
+          </select>
+          <span style={{
+            fontSize: '12px',
+            fontWeight: 600,
+            color: 'var(--fd-muted-foreground)',
+          }}>
+            vs
+          </span>
+          <select
+            value={rightId}
+            onChange={e => setRightId(e.target.value)}
+            style={selectStyle}
+          >
+            <option value="">Select right...</option>
+            {snapshots.map(s => (
+              <option key={s.id} value={s.id}>
+                {s.label || s.previewName} — {s.stateOrStep}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      {/* Side-by-side comparison */}
+      <div style={{
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr',
+        gap: '1px',
+        backgroundColor: 'var(--fd-border)',
+        minHeight: '400px',
+      }}>
+        <ComparePane snapshot={left} label="Left" />
+        <ComparePane snapshot={right} label="Right" />
+      </div>
+
+      {/* Metadata comparison */}
+      {left && right && (
+        <div style={{
+          padding: '16px 24px',
+          borderTop: '1px solid var(--fd-border)',
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr',
+          gap: '24px',
+          fontSize: '12px',
+        }}>
+          <MetadataRow label="Preview" left={left.previewName} right={right.previewName} />
+          <MetadataRow label="State/Step" left={left.stateOrStep} right={right.stateOrStep} />
+          <MetadataRow label="Viewport" left={left.viewport} right={right.viewport} />
+          <MetadataRow label="Captured" left={new Date(left.createdAt).toLocaleString()} right={new Date(right.createdAt).toLocaleString()} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function ComparePane({ snapshot, label }: { snapshot?: { screenshotDataUrl: string; previewName: string }; label: string }) {
+  if (!snapshot) {
+    return (
+      <div style={{
+        backgroundColor: 'var(--fd-muted)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '40px',
+      }}>
+        <span style={{
+          fontSize: '13px',
+          color: 'var(--fd-muted-foreground)',
+        }}>
+          Select {label.toLowerCase()} snapshot
+        </span>
+      </div>
+    )
+  }
+
+  return (
+    <div style={{
+      backgroundColor: 'var(--fd-background)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '16px',
+      overflow: 'auto',
+    }}>
+      <img
+        src={snapshot.screenshotDataUrl}
+        alt={`${label}: ${snapshot.previewName}`}
+        style={{
+          maxWidth: '100%',
+          maxHeight: '500px',
+          objectFit: 'contain',
+          borderRadius: '8px',
+          border: '1px solid var(--fd-border)',
+        }}
+      />
+    </div>
+  )
+}
+
+function MetadataRow({ label, left, right }: { label: string; left: string; right: string }) {
+  const changed = left !== right
+  return (
+    <>
+      <div>
+        <span style={{ fontWeight: 500, color: 'var(--fd-muted-foreground)' }}>{label}: </span>
+        <span style={{ color: 'var(--fd-foreground)' }}>{left}</span>
+      </div>
+      <div>
+        <span style={{ fontWeight: 500, color: 'var(--fd-muted-foreground)' }}>{label}: </span>
+        <span style={{
+          color: changed ? 'oklch(0.55 0.18 25)' : 'var(--fd-foreground)',
+          fontWeight: changed ? 600 : 400,
+        }}>{right}</span>
+      </div>
+    </>
+  )
+}

package/src/theme/previews/SnapshotPanel.tsx

@@ -0,0 +1,274 @@
+import React from 'react'
+import type { Snapshot } from '../types'
+import { Icon } from '../icons'
+
+interface SnapshotPanelProps {
+  snapshots: Snapshot[]
+  onDelete: (id: string) => void
+  onClose: () => void
+}
+
+export function SnapshotPanel({ snapshots, onDelete, onClose }: SnapshotPanelProps) {
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        onClick={onClose}
+        style={{
+          position: 'fixed',
+          inset: 0,
+          backgroundColor: 'rgba(0, 0, 0, 0.2)',
+          backdropFilter: 'blur(2px)',
+          zIndex: 90,
+        }}
+      />
+
+      {/* Panel */}
+      <div style={{
+        position: 'fixed',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        width: '320px',
+        backgroundColor: 'var(--fd-card)',
+        borderLeft: '1px solid var(--fd-border)',
+        backdropFilter: 'blur(12px)',
+        zIndex: 91,
+        display: 'flex',
+        flexDirection: 'column',
+        animation: 'snapshot-panel-slide 200ms ease-out',
+      }}>
+        {/* Header */}
+        <div style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: '16px 20px',
+          borderBottom: '1px solid var(--fd-border)',
+        }}>
+          <h3 style={{
+            margin: 0,
+            fontSize: '14px',
+            fontWeight: 600,
+            color: 'var(--fd-foreground)',
+            letterSpacing: '-0.01em',
+          }}>
+            Snapshots
+          </h3>
+          <button
+            onClick={onClose}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: '4px',
+              border: 'none',
+              borderRadius: '6px',
+              cursor: 'pointer',
+              backgroundColor: 'transparent',
+              color: 'var(--fd-muted-foreground)',
+              transition: 'all 0.1s ease',
+            }}
+            onMouseEnter={e => {
+              e.currentTarget.style.backgroundColor = 'var(--fd-muted)'
+              e.currentTarget.style.color = 'var(--fd-foreground)'
+            }}
+            onMouseLeave={e => {
+              e.currentTarget.style.backgroundColor = 'transparent'
+              e.currentTarget.style.color = 'var(--fd-muted-foreground)'
+            }}
+            title="Close"
+          >
+            <Icon name="x" size={16} />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div style={{
+          flex: 1,
+          overflowY: 'auto',
+          padding: '16px',
+        }}>
+          {snapshots.length === 0 ? (
+            <div style={{
+              textAlign: 'center',
+              padding: '40px 20px',
+              color: 'var(--fd-muted-foreground)',
+            }}>
+              <Icon name="camera" size={32} style={{ opacity: 0.3, marginBottom: '12px' }} />
+              <p style={{ margin: 0, fontSize: '13px' }}>
+                No snapshots yet
+              </p>
+              <p style={{ margin: '4px 0 0', fontSize: '11px', opacity: 0.7 }}>
+                Use the camera button to capture
+              </p>
+            </div>
+          ) : (
+            <div style={{
+              display: 'grid',
+              gridTemplateColumns: '1fr',
+              gap: '12px',
+            }}>
+              {snapshots.map((snapshot, index) => (
+                <SnapshotCard
+                  key={snapshot.id}
+                  snapshot={snapshot}
+                  onDelete={onDelete}
+                  nextSnapshot={index + 1 < snapshots.length ? snapshots[index + 1] : undefined}
+                  canCompare={snapshots.length >= 2}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <style>{`
+        @keyframes snapshot-panel-slide {
+          from { transform: translateX(100%); }
+          to { transform: translateX(0); }
+        }
+      `}</style>
+    </>
+  )
+}
+
+interface SnapshotCardProps {
+  snapshot: Snapshot
+  onDelete: (id: string) => void
+  nextSnapshot?: Snapshot
+  canCompare: boolean
+}
+
+function SnapshotCard({ snapshot, onDelete, nextSnapshot, canCompare }: SnapshotCardProps) {
+  const timestamp = new Date(snapshot.createdAt)
+  const timeStr = timestamp.toLocaleString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+
+  return (
+    <div style={{
+      borderRadius: '10px',
+      border: '1px solid var(--fd-border)',
+      overflow: 'hidden',
+      backgroundColor: 'var(--fd-background)',
+      transition: 'box-shadow 0.15s ease',
+    }}>
+      {/* Thumbnail */}
+      <div style={{
+        position: 'relative',
+        backgroundColor: 'var(--fd-muted)',
+        aspectRatio: '16 / 10',
+        overflow: 'hidden',
+      }}>
+        <img
+          src={snapshot.screenshotDataUrl}
+          alt={`Snapshot of ${snapshot.previewName}`}
+          style={{
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+            display: 'block',
+          }}
+        />
+
+        {/* Delete button overlay */}
+        <button
+          onClick={() => onDelete(snapshot.id)}
+          style={{
+            position: 'absolute',
+            top: '6px',
+            right: '6px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '24px',
+            height: '24px',
+            border: 'none',
+            borderRadius: '6px',
+            cursor: 'pointer',
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            color: 'white',
+            opacity: 0.7,
+            transition: 'opacity 0.1s ease',
+          }}
+          onMouseEnter={e => { e.currentTarget.style.opacity = '1' }}
+          onMouseLeave={e => { e.currentTarget.style.opacity = '0.7' }}
+          title="Delete snapshot"
+        >
+          <Icon name="x" size={12} />
+        </button>
+
+        {/* Viewport badge */}
+        <span style={{
+          position: 'absolute',
+          bottom: '6px',
+          left: '6px',
+          padding: '2px 6px',
+          fontSize: '9px',
+          fontWeight: 600,
+          borderRadius: '4px',
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+          color: 'white',
+          textTransform: 'uppercase',
+          letterSpacing: '0.04em',
+        }}>
+          {snapshot.viewport}
+        </span>
+      </div>
+
+      {/* Info */}
+      <div style={{ padding: '10px 12px' }}>
+        <div style={{
+          fontSize: '12px',
+          fontWeight: 600,
+          color: 'var(--fd-foreground)',
+          marginBottom: '2px',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}>
+          {snapshot.label || snapshot.previewName}
+        </div>
+
+        <div style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: '8px',
+        }}>
+          <span style={{
+            fontSize: '10px',
+            color: 'var(--fd-muted-foreground)',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}>
+            {snapshot.stateOrStep} · {timeStr}
+          </span>
+
+          {canCompare && nextSnapshot && (
+            <a
+              href={`${(typeof window !== 'undefined' ? (import.meta.env?.BASE_URL ?? '/') : '/').replace(/\/$/, '')}/previews/_compare?left=${snapshot.id}&right=${nextSnapshot.id}`}
+              style={{
+                fontSize: '10px',
+                fontWeight: 500,
+                color: 'var(--fd-primary)',
+                textDecoration: 'none',
+                whiteSpace: 'nowrap',
+                transition: 'opacity 0.1s ease',
+              }}
+              onMouseEnter={e => { e.currentTarget.style.opacity = '0.7' }}
+              onMouseLeave={e => { e.currentTarget.style.opacity = '1' }}
+            >
+              Compare
+            </a>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/theme/previews/StatusBadge.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import type { ApprovalStatus } from '../types'
+
+const STATUS_STYLES: Record<ApprovalStatus, { bg: string; color: string; border: string }> = {
+  draft: {
+    bg: 'oklch(0.94 0.06 85)',
+    color: 'oklch(0.45 0.12 85)',
+    border: 'oklch(0.88 0.08 85)',
+  },
+  'in-review': {
+    bg: 'oklch(0.92 0.08 250)',
+    color: 'oklch(0.45 0.18 250)',
+    border: 'oklch(0.85 0.10 250)',
+  },
+  approved: {
+    bg: 'oklch(0.92 0.08 155)',
+    color: 'oklch(0.35 0.12 155)',
+    border: 'oklch(0.85 0.10 155)',
+  },
+  'needs-changes': {
+    bg: 'oklch(0.92 0.08 25)',
+    color: 'oklch(0.45 0.15 25)',
+    border: 'oklch(0.85 0.12 25)',
+  },
+}
+
+const STATUS_LABELS: Record<ApprovalStatus, string> = {
+  draft: 'Draft',
+  'in-review': 'In Review',
+  approved: 'Approved',
+  'needs-changes': 'Needs Changes',
+}
+
+interface StatusBadgeProps {
+  status: ApprovalStatus
+  compact?: boolean
+}
+
+export function StatusBadge({ status, compact }: StatusBadgeProps) {
+  const style = STATUS_STYLES[status]
+  return (
+    <span style={{
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '5px',
+      padding: compact ? '2px 6px' : '3px 10px',
+      fontSize: compact ? '10px' : '11px',
+      fontWeight: 600,
+      borderRadius: '6px',
+      border: `1px solid ${style.border}`,
+      backgroundColor: style.bg,
+      color: style.color,
+      textTransform: 'uppercase',
+      letterSpacing: '0.04em',
+      whiteSpace: 'nowrap',
+    }}>
+      <span style={{
+        width: compact ? '5px' : '6px',
+        height: compact ? '5px' : '6px',
+        borderRadius: '50%',
+        backgroundColor: style.color,
+      }} />
+      {STATUS_LABELS[status]}
+    </span>
+  )
+}