@patterninc/pattern-ui 0.0.0-main.20260929.db2f8e8fde0d

package/src/components/MarketplacePdpCard/MarketplacePdpCardChrome.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react'
+
+import { ButtonInset } from '../ButtonInset/ButtonInset'
+import ArrowUpRightIcon from '../icons/ArrowUpRightIcon'
+import type { MarketplacePdpProduct } from './MarketplacePdpCardTypes'
+
+export interface MarketplacePdpChromeProps {
+  product: MarketplacePdpProduct
+  /** Optional test id rendered as the `qa-test-id` attribute for QA testing */
+  qaTestId?: string
+}
+
+/**
+ * Returns the URL only when its scheme is http or https. Blocks javascript:, data:, and any other
+ * scheme that could be used as an injection vector when product.url is data-driven.
+ */
+function safeHttpUrl(url: string): string | null {
+  try {
+    const { protocol } = new URL(url)
+    return protocol === 'http:' || protocol === 'https:' ? url : null
+  } catch {
+    return null
+  }
+}
+
+/** Fixed URL bar at the top of the PDP card. Static — never zooms or pans. */
+export function MarketplacePdpCardChrome({
+  product,
+  qaTestId = 'marketplace-pdp-card-chrome',
+}: MarketplacePdpChromeProps): React.ReactElement {
+  const displayUrl = product.url.replace(/^https?:\/\//, '')
+  const validatedUrl = safeHttpUrl(product.url)
+  return (
+    <div
+      className='flex shrink-0 items-center gap-3 border-b border-border-soft bg-base-inverse px-3.5 py-3'
+      qa-test-id={qaTestId}
+    >
+      <div className='flex shrink-0 items-center gap-1' aria-hidden>
+        <span className='block size-2 rounded-full bg-negative-base' />
+        <span className='block size-2 rounded-full bg-notice-base' />
+        <span className='block size-2 rounded-full bg-positive-base' />
+      </div>
+      {/* URL bar */}
+      <div className='flex h-6 min-w-0 flex-1 items-center rounded-full bg-base-weak px-2.5 py-1'>
+        {/* 9px is intentionally sub-scale — matches a real browser's compact address bar aesthetic */}
+        <p className='truncate font-mono text-[9px] leading-4 text-text-soft'>{displayUrl}</p>
+      </div>
+      <ButtonInset
+        type='button'
+        variant='inverse'
+        icon={ArrowUpRightIcon}
+        aria-label={`Open ${displayUrl} in a new tab`}
+        disabled={validatedUrl === null}
+        onClick={() => {
+          if (validatedUrl) window.open(validatedUrl, '_blank', 'noopener,noreferrer')
+        }}
+      />
+    </div>
+  )
+}

package/src/components/MarketplacePdpCard/MarketplacePdpCardContainer.tsx

@@ -0,0 +1,45 @@
+import { cn } from 'cn'
+import * as React from 'react'
+
+import type { MarketplacePdpVariant } from './MarketplacePdpCardTypes'
+
+export interface MarketplacePdpContainerProps extends React.ComponentProps<'div'> {
+  variant?: MarketplacePdpVariant
+  /**
+   * When true, the container fills its parent's height rather than hugging content. Camera zoom
+   * does not need this: the body freezes its rest height and clips inside it. The detail variant
+   * always caps at the parent (`max-h-full`) so a tall listing cannot outgrow the available
+   * viewport.
+   */
+  fillHeight?: boolean
+  /** Optional test id rendered as the `qa-test-id` attribute for QA testing */
+  qaTestId?: string
+}
+
+export function MarketplacePdpCardContainer({
+  variant = 'inline',
+  fillHeight = false,
+  className,
+  children,
+  qaTestId = 'marketplace-pdp-card-container',
+  ...props
+}: MarketplacePdpContainerProps): React.ReactElement {
+  // Hug content unless fillHeight stretches to the parent. Always cap detail at the parent so a
+  // tall listing clips inside the rounded chrome instead of overflowing the camera/clip viewport.
+  const detailHeight = fillHeight ? 'h-full max-h-full' : 'max-h-full'
+  return (
+    <div
+      qa-test-id={qaTestId}
+      {...props}
+      className={cn(
+        // rounded-[20px]: 20px sits between rounded-2xl (16px) and rounded-3xl (24px)
+        '@container flex w-full flex-col overflow-hidden rounded-[20px] border border-border-soft',
+        variant === 'detail' && cn('min-h-0 min-w-0', detailHeight),
+        className,
+      )}
+      data-card-container
+    >
+      {children}
+    </div>
+  )
+}

package/src/components/MarketplacePdpCard/MarketplacePdpCardStage.tsx

@@ -0,0 +1,320 @@
+import { cn } from 'cn'
+import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
+import React, { createContext, useContext, useLayoutEffect, useRef, useState } from 'react'
+
+// ─── Effective-region resolution ─────────────────────────────────────────────
+
+/**
+ * Walks the slash-separated shot id upward until a registered region is found. `'list/5'` with only
+ * `'list'` registered → returns `'list'`. Port of StageContext.resolveEffectiveRegion from the
+ * Stage system.
+ */
+export function resolveEffectiveRegion(
+  shotId: string | null | undefined,
+  registry: Map<string, HTMLElement>,
+): string | null {
+  if (!shotId) return null
+  if (registry.has(shotId)) return shotId
+  let cursor = shotId
+  while (cursor.includes('/')) {
+    cursor = cursor.slice(0, cursor.lastIndexOf('/'))
+    if (registry.has(cursor)) return cursor
+  }
+  return null
+}
+
+// ─── Camera ───────────────────────────────────────────────────────────────────
+
+export interface CameraTransform {
+  x: number
+  y: number
+  scale: number
+}
+
+export const IDENTITY_TRANSFORM: CameraTransform = { x: 0, y: 0, scale: 1 }
+
+const CAMERA_PADDING = 28
+const CAMERA_MAX_SCALE = 3
+/**
+ * Inset when the tag fits inside the highlight. Tailwind `spacing-3` is 12px; Figma `--spacing-12`
+ * is commented out in the theme.
+ */
+export const ANNOTATION_INSET = 12
+/** Gap below the highlight when the tag cannot fit inside. Tailwind `spacing-2` is 8px. */
+export const ANNOTATION_OVERFLOW_GAP = 8
+/** Camera spring — matches pattern-pi Stage (`storyboard.ts` CAMERA.spring). */
+export const CAMERA_SPRING = { type: 'spring' as const, duration: 0.55, bounce: 0 }
+
+/**
+ * Highlight waits until the camera reads as landed (320ms perceptual + 60ms). The comment Tag stays
+ * mounted at opacity 0.01 during the zoom so backdrop-filter is sampled, then fades in after land.
+ */
+export const HIGHLIGHT_ENTER_DELAY_S = 0.38
+const HIGHLIGHT_SPRING = { type: 'spring' as const, stiffness: 360, damping: 32 }
+const FOCUS_EXIT_DURATION_S = 0.16
+
+/**
+ * Given the current camera scale, computes the new (x, y, scale) that centres `regionEl` inside
+ * `viewportEl`, assuming `setEl` has `transform-origin: 0 0`. Port of
+ * useStageCamera.computeShotTransform.
+ */
+export function computeCameraTransform(
+  regionEl: HTMLElement,
+  setEl: HTMLElement,
+  viewportEl: HTMLElement,
+  currentScale: number,
+): CameraTransform {
+  const regionRect = regionEl.getBoundingClientRect()
+  const setRect = setEl.getBoundingClientRect()
+  const viewportRect = viewportEl.getBoundingClientRect()
+
+  // De-apply the current scale to get natural set-local coordinates.
+  const natOffX = (regionRect.left - setRect.left) / currentScale
+  const natOffY = (regionRect.top - setRect.top) / currentScale
+  const natW = regionRect.width / currentScale
+  const natH = regionRect.height / currentScale
+
+  const VW = viewportRect.width
+  const VH = viewportRect.height
+  const scale = Math.min(
+    VW / Math.max(1, natW + CAMERA_PADDING * 2),
+    VH / Math.max(1, natH + CAMERA_PADDING * 2),
+    CAMERA_MAX_SCALE,
+  )
+  const x = VW / 2 - (natOffX + natW / 2) * scale
+  // Never push the set below its natural top (plus padding). Regions at the top of the set
+  // (e.g. a square hero) would otherwise be "centered" by pushing the whole set down.
+  const y = Math.min(VH / 2 - (natOffY + natH / 2) * scale, CAMERA_PADDING)
+  return { x, y, scale }
+}
+
+// ─── Context ──────────────────────────────────────────────────────────────────
+
+export interface PdpStageContextValue {
+  effectiveRegionId: string | null
+  cameraMode: boolean
+  /** Current camera scale. `1` when the camera is off. Used to counter-scale the in-highlight tag. */
+  cameraScale: number
+  /**
+   * Compact control rendered inside the active highlight after settle. Prefer a Tag
+   * (`data-slot="tag"`) so placement and the fade measure the control; other nodes use the
+   * annotation box.
+   */
+  annotation?: React.ReactNode
+  /** False while the camera is springing. Tag stays mounted at opacity 0.01 so blur is warm. */
+  annotationVisible: boolean
+  registerRegion: (id: string, el: HTMLElement) => void
+  unregisterRegion: (id: string) => void
+}
+
+const noop = (): void => undefined
+
+const PdpStageContext = createContext<PdpStageContextValue>({
+  effectiveRegionId: null,
+  cameraMode: false,
+  cameraScale: 1,
+  annotationVisible: false,
+  registerRegion: noop,
+  unregisterRegion: noop,
+})
+
+export const PdpStageProvider = PdpStageContext.Provider
+
+export function usePdpStage(): PdpStageContextValue {
+  return useContext(PdpStageContext)
+}
+
+// ─── PdpRegion ────────────────────────────────────────────────────────────────
+
+export interface PdpRegionProps {
+  /** Region identifier — matched against activeShotId and sub-paths of it. */
+  id: string
+  /** Host element type. Defaults to `'div'`. Use `'li'` for bullet items. */
+  as?: React.ElementType
+  children?: React.ReactNode
+  className?: string
+  /**
+   * Fill the highlight with a faint purple tint. Default: true. Pass `false` for image regions
+   * where the fill would obscure visual content.
+   */
+  highlightFill?: boolean
+  /** Border-radius of the highlight ring. Default: `'medium'`. */
+  highlightRadius?: 'small' | 'medium' | 'large'
+  /**
+   * Expand the highlight ring beyond the region's natural edges (in px). Positive values push the
+   * ring outward; negative pull it inward.
+   */
+  highlightInset?: {
+    top?: number
+    right?: number
+    bottom?: number
+    left?: number
+  }
+  /** Optional test id rendered as the `qa-test-id` attribute for QA testing */
+  qaTestId?: string
+}
+
+const RADIUS_CLASS: Record<string, string> = {
+  small: 'rounded-lg',
+  medium: 'rounded-xl',
+  large: 'rounded-2xl',
+}
+
+export function PdpRegion({
+  id,
+  as: Tag = 'div',
+  children,
+  className,
+  highlightFill = true,
+  highlightRadius = 'medium',
+  highlightInset,
+  qaTestId = 'pdp-region',
+}: PdpRegionProps): React.ReactElement {
+  const {
+    effectiveRegionId,
+    cameraMode,
+    cameraScale,
+    annotation,
+    annotationVisible,
+    registerRegion,
+    unregisterRegion,
+  } = usePdpStage()
+  const reducedMotion = useReducedMotion()
+  const elRef = useRef<HTMLElement | null>(null)
+  const highlightRef = useRef<HTMLDivElement | null>(null)
+  const [outside, setOutside] = useState(false)
+
+  const refCallback = (el: HTMLElement | null) => {
+    elRef.current = el
+  }
+  // useLayoutEffect so regions are registered before the camera useEffect fires.
+  useLayoutEffect(() => {
+    const el = elRef.current
+    if (!el) return
+    registerRegion(id, el)
+    return () => unregisterRegion(id)
+  }, [id, registerRegion, unregisterRegion])
+
+  const isActive = effectiveRegionId === id
+  const showAnnotation = isActive && annotation != null
+  const inverseScale = cameraScale > 0 ? 1 / cameraScale : 1
+  const tagRef = refCallback as React.Ref<HTMLElement>
+  const highlightDelay = cameraMode && !reducedMotion ? HIGHLIGHT_ENTER_DELAY_S : 0
+  const exitTransition = { duration: reducedMotion ? 0 : FOCUS_EXIT_DURATION_S }
+
+  useLayoutEffect(() => {
+    if (!showAnnotation) {
+      setOutside(false)
+      return
+    }
+    const highlight = highlightRef.current
+    const tag = highlight?.querySelector('[data-slot="tag"]')
+    const box = highlight?.querySelector('[data-pdp-annotation-box]')
+    const measureEl = tag instanceof HTMLElement ? tag : box instanceof HTMLElement ? box : null
+    if (!(highlight && measureEl)) return
+    const visualW = measureEl.offsetWidth * inverseScale
+    const visualH = measureEl.offsetHeight * inverseScale
+    setOutside(
+      visualH + ANNOTATION_INSET * 2 > highlight.clientHeight ||
+        visualW + ANNOTATION_INSET * 2 > highlight.clientWidth,
+    )
+  }, [showAnnotation, inverseScale])
+
+  return (
+    <Tag
+      ref={tagRef}
+      className={cn('relative overflow-visible', className)}
+      data-active-region={isActive ? '' : undefined}
+      data-hang-inset-top={highlightInset?.top ?? 0}
+      data-hang-inset-right={highlightInset?.right ?? 0}
+      data-hang-inset-bottom={highlightInset?.bottom ?? 0}
+      qa-test-id={qaTestId}
+    >
+      {children}
+      <AnimatePresence>
+        {isActive ? (
+          <motion.div
+            ref={highlightRef}
+            key='highlight'
+            aria-hidden={annotationVisible ? undefined : true}
+            className='pointer-events-none absolute overflow-visible'
+            style={{
+              top: -(highlightInset?.top ?? 0),
+              right: -(highlightInset?.right ?? 0),
+              bottom: -(highlightInset?.bottom ?? 0),
+              left: -(highlightInset?.left ?? 0),
+            }}
+            initial={{ opacity: 1 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0, transition: exitTransition }}
+            data-pdp-region-highlight=''
+            qa-test-id='pdp-region-highlight'
+          >
+            <motion.div
+              aria-hidden
+              className={cn(
+                'absolute inset-0 border-2 border-secondary-base',
+                RADIUS_CLASS[highlightRadius],
+                highlightFill && 'bg-depth-secondary-10',
+              )}
+              initial={{ opacity: 0 }}
+              animate={{
+                opacity: 1,
+                transition: reducedMotion
+                  ? { duration: 0 }
+                  : { ...HIGHLIGHT_SPRING, delay: highlightDelay },
+              }}
+            />
+            <AnimatePresence>
+              {showAnnotation ? (
+                <motion.div
+                  key='annotation'
+                  className='pointer-events-none absolute overflow-visible'
+                  data-pdp-region-annotation=''
+                  data-pdp-annotation-placement={outside ? 'outside' : 'inside'}
+                  qa-test-id='pdp-region-annotation'
+                  initial={false}
+                  animate={{ opacity: 1 }}
+                  exit={{
+                    opacity: 0,
+                    transition: exitTransition,
+                  }}
+                  style={
+                    outside
+                      ? {
+                          top: `calc(100% + ${ANNOTATION_OVERFLOW_GAP}px)`,
+                          right: 0,
+                          bottom: 'auto',
+                        }
+                      : {
+                          top: 'auto',
+                          right: ANNOTATION_INSET,
+                          bottom: ANNOTATION_INSET,
+                        }
+                  }
+                  onClick={(event: React.MouseEvent) => event.stopPropagation()}
+                  onPointerDown={(event: React.PointerEvent) => event.stopPropagation()}
+                >
+                  <div
+                    data-pdp-annotation-box=''
+                    data-annotation-visible={annotationVisible ? '' : undefined}
+                    className={cn(
+                      'w-fit pdp-annotation-box',
+                      annotationVisible ? 'pointer-events-auto' : 'pointer-events-none',
+                    )}
+                    style={{
+                      transform: `scale(${inverseScale})`,
+                      transformOrigin: outside ? 'top right' : 'bottom right',
+                    }}
+                  >
+                    {annotation}
+                  </div>
+                </motion.div>
+              ) : null}
+            </AnimatePresence>
+          </motion.div>
+        ) : null}
+      </AnimatePresence>
+    </Tag>
+  )
+}

package/src/components/MarketplacePdpCard/MarketplacePdpCardTypes.ts

@@ -0,0 +1,20 @@
+/** Shared types for MarketplacePdpCard and its sub-components. */
+
+export interface MarketplacePdpProduct {
+  id: string
+  name: string
+  url: string
+  /** Fallback URL shown before any progressive slot resolves. */
+  heroImage: string
+  thumbnails: string[]
+  /** Slot keys (e.g. `'thumb-0'`) that are actively being generated. */
+  thumbnailsPending?: string[]
+  bullets: string[]
+  body?: string
+}
+
+export interface ResolvedSlotState {
+  imageUrl?: string
+}
+
+export type MarketplacePdpVariant = 'inline' | 'detail'