@podoba/react 0.0.37 → 0.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@podoba/react",
-	"version": "0.0.37",
+	"version": "0.0.38",
 	"type": "module",
 	"description": "podoba React components — React Aria Components + Tailwind primitives + layout, built with uic.",
 	"repository": {
@@ -28,8 +28,8 @@
 		"typecheck": "tsc --build"
 	},
 	"dependencies": {
-		"@podoba/tokens": "^0.0.37",
-		"@podoba/tailwind": "^0.0.37",
+		"@podoba/tokens": "^0.0.38",
+		"@podoba/tailwind": "^0.0.38",
 		"react-aria-components": "1.18.0",
 		"class-variance-authority": "0.7.1",
 		"clsx": "2.1.1",

package/src/components/context-menu.tsx

@@ -96,6 +96,11 @@ interface ContextMenuWrapperProps {
 	soonLabel?: ReactNode
 	'aria-label'?: string
 	className?: string
+	/**
+	 * Notified when the wrapper's menu opens or closes. `target` is the element that
+	 * was right-clicked (null on close), so a surface can mark the item the menu acts on.
+	 */
+	onOpenChange?: (isOpen: boolean, target: HTMLElement | null) => void
 }
 
 const itemId = (item: ContextMenuItem, fallback: number): string => item.id ?? item.key ?? String(fallback)
@@ -353,8 +358,17 @@ function WrapperContextMenu({
 	soonLabel,
 	'aria-label': ariaLabel = 'Actions',
 	className,
+	onOpenChange,
 }: ContextMenuWrapperProps): React.JSX.Element {
-	const [isOpen, setOpen] = useState(false)
+	const [isOpen, setOpenState] = useState(false)
+	const onOpenChangeRef = useRef(onOpenChange)
+	onOpenChangeRef.current = onOpenChange
+	const targetRef = useRef<HTMLElement | null>(null)
+	const setOpen = useCallback((open: boolean) => {
+		setOpenState(open)
+		if (!open) targetRef.current = null
+		onOpenChangeRef.current?.(open, open ? targetRef.current : null)
+	}, [])
 	const wrapperRef = useRef<HTMLDivElement>(null)
 	const popoverRef = useRef<HTMLElement>(null)
 	const [position, setPosition] = useState({ x: 0, y: 0 })
@@ -374,6 +388,7 @@ function WrapperContextMenu({
 			setResolved(groupsRef.current({ target }))
 		}
 		setPosition({ x, y })
+		targetRef.current = target
 		setOpen(true)
 	}
 
@@ -434,6 +449,8 @@ function WrapperContextMenu({
 				setResolved(groupsRef.current({ target }))
 			}
 			setPosition({ x: clientX, y: clientY })
+			targetRef.current = target
+			onOpenChangeRef.current?.(true, target)
 		}
 		document.addEventListener('contextmenu', handle, true)
 		return () => document.removeEventListener('contextmenu', handle, true)

package/src/components/cta-pill.tsx

@@ -39,11 +39,12 @@ export function CtaPill({ lead, emphasis, tail, children, mobileHeader = false }
 			className={[
 				'flex h-full w-full items-center justify-between gap-nav-x rounded-lg bg-brand-green',
 				mobileHeader
-					? 'min-h-mobile-cta px-12 py-5 shadow-mobile-cta md:min-h-16 md:py-2.5 md:pr-3 md:pl-4.5 md:shadow-none'
-					: 'min-h-16 py-2.5 pr-3 pl-4.5',
+					? 'min-h-mobile-cta px-12 py-5 shadow-mobile-cta md:min-h-16 md:py-2.75 md:pr-3 md:pl-4.5 md:shadow-none'
+					: 'min-h-16 py-2.75 pr-3 pl-4.5',
 			].join(' ')}
 		>
-			<p className="min-w-0 text-heading4 font-medium leading-5 tracking-tight text-fg-on-brand">
+			{/* gs `CTA`: 11px 12px 11px 18px box, 18px/20px medium heading at -0.36px (-0.02em). */}
+			<p className="min-w-0 text-heading4 font-medium leading-5 tracking-[-0.02em] text-fg-on-brand">
 				{lead} <span className="font-semibold">{emphasis}</span> {tail}
 			</p>
 			<div className="shrink-0">{children}</div>

package/src/components/preview-motion.tsx

@@ -0,0 +1,215 @@
+import { type CSSProperties, type ReactNode, useEffect, useRef, useState } from 'react'
+
+/**
+ * Preview loading and reveal motion, ported from gs-platform `PreviewSkeletonGradient`
+ * and `TemplatePreview`'s particulate reveal.
+ *
+ * - {@link PreviewSkeleton}: the mint shimmer shown while a template preview renders
+ *   (80deg gradient, 240% background, 2400ms ease-in-out pan). Pair it with
+ *   {@link useMinimumVisible} for the source 500ms minimum.
+ * - {@link PreviewReveal}: wraps rendered artwork. When `revealKey` changes (a new
+ *   preview decoded) or the artwork is pressed, the artwork dims to 22% with
+ *   `saturate(.7) contrast(.86)` for `durationMs` (source 1400ms) while a blurred
+ *   green/blue sweep and 64 resolving particles play over it, then fades back in.
+ *
+ * All of it is ornamental: every layer is `aria-hidden`, nothing here carries content,
+ * and under `prefers-reduced-motion: reduce` neither the timed states nor any motion
+ * run (the skeleton shows the source static gradient, the reveal never engages).
+ * Colours are the source literals; the skeleton is a fixed light surface by design.
+ */
+
+function usePrefersReducedMotion(): boolean {
+	const [reduce, setReduce] = useState(false)
+	useEffect(() => {
+		if (typeof window === 'undefined' || !window.matchMedia) return
+		const media = window.matchMedia('(prefers-reduced-motion: reduce)')
+		const change = () => setReduce(media.matches)
+		change()
+		media.addEventListener('change', change)
+		return () => media.removeEventListener('change', change)
+	}, [])
+	return reduce
+}
+
+/**
+ * Keeps `active` true for at least `minMs` after it turns on (source 500ms skeleton
+ * minimum), so a cached preview does not flash a one-frame skeleton. Under reduced
+ * motion it returns `active` unchanged.
+ */
+export function useMinimumVisible(active: boolean, minMs = 500): boolean {
+	const reduce = usePrefersReducedMotion()
+	const [held, setHeld] = useState(active)
+	const since = useRef<number | null>(active ? Date.now() : null)
+	useEffect(() => {
+		if (reduce) {
+			setHeld(active)
+			return
+		}
+		if (active) {
+			if (since.current === null) since.current = Date.now()
+			setHeld(true)
+			return
+		}
+		if (since.current === null) {
+			setHeld(false)
+			return
+		}
+		const remaining = minMs - (Date.now() - since.current)
+		if (remaining <= 0) {
+			since.current = null
+			setHeld(false)
+			return
+		}
+		const timer = setTimeout(() => {
+			since.current = null
+			setHeld(false)
+		}, remaining)
+		return () => clearTimeout(timer)
+	}, [active, minMs, reduce])
+	return reduce ? active : held
+}
+
+const SKELETON_ANIMATED =
+	'linear-gradient(80deg, #ffffff 0%, #ffffff 12.5%, #c7fee0 27.5%, #ffffff 41.5%, #ffffff 50%, #ffffff 62.5%, #c7fee0 77.5%, #ffffff 91.5%, #ffffff 100%)'
+const SKELETON_STATIC = 'linear-gradient(80deg, #ffffff 25%, #c7fee0 55%, #ffffff 83%)'
+
+export interface PreviewSkeletonProps {
+	/** Accessible status text (translated by the caller), e.g. "Rendering preview". */
+	label?: string
+	className?: string
+}
+
+/** The source mint shimmer. Fills its positioned parent. */
+export function PreviewSkeleton({ label, className }: PreviewSkeletonProps) {
+	const reduce = usePrefersReducedMotion()
+	const style: CSSProperties = reduce
+		? { backgroundImage: SKELETON_STATIC, backgroundSize: '100% 100%', backgroundPosition: '50% 50%' }
+		: { backgroundImage: SKELETON_ANIMATED, backgroundSize: '240% 240%' }
+	return (
+		<div
+			role={label ? 'status' : undefined}
+			aria-label={label}
+			aria-hidden={label ? undefined : true}
+			data-preview-skeleton=""
+			className={['absolute inset-0 overflow-hidden', reduce ? '' : 'animate-preview-skeleton-shimmer', className]
+				.filter(Boolean)
+				.join(' ')}
+			style={style}
+		/>
+	)
+}
+
+const PARTICLES = Array.from({ length: 64 }, (_, index) => ({
+	x: 3 + ((index * 37) % 94),
+	y: 3 + ((index * 53) % 94),
+	size: 6 + (index % 7) * 2,
+	dx: ((index * 29) % 48) - 24,
+	dy: ((index * 17) % 44) - 22,
+	delay: (index % 16) * 45,
+	duration: 1200 + (index % 5) * 140,
+	color: index % 5 === 0 ? 'var(--color-accent-blue)' : index % 3 === 0 ? 'var(--color-brand-green)' : '#0d0d0d',
+	square: index % 4 === 3,
+	wide: index % 6 === 5,
+}))
+
+export interface PreviewRevealProps {
+	children: ReactNode
+	/**
+	 * Changing this (e.g. to the decoded preview URL or a render revision) plays the
+	 * reveal. `null`/`undefined` means nothing is rendered yet.
+	 */
+	revealKey?: string | number | null
+	/** How long the reveal stays visible (source 1400ms). */
+	durationMs?: number
+	/** Replay the reveal when the artwork is pressed (source behaviour, default true). */
+	replayOnPress?: boolean
+	className?: string
+}
+
+export function PreviewReveal({ children, revealKey, durationMs = 1400, replayOnPress = true, className }: PreviewRevealProps) {
+	const reduce = usePrefersReducedMotion()
+	const [revealing, setRevealing] = useState(false)
+	const [run, setRun] = useState(0)
+	const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+	const play = () => {
+		if (reduce) return
+		setRun((n) => n + 1)
+		setRevealing(true)
+		if (timer.current) clearTimeout(timer.current)
+		timer.current = setTimeout(() => setRevealing(false), durationMs)
+	}
+
+	useEffect(() => {
+		if (revealKey === null || revealKey === undefined) return
+		play()
+		// Replays only when the artwork identity changes; `play` is recreated each render.
+	}, [revealKey])
+
+	useEffect(() => () => {
+		if (timer.current) clearTimeout(timer.current)
+	}, [])
+
+	const active = revealing && !reduce
+	return (
+		<div
+			className={['relative', className].filter(Boolean).join(' ')}
+			data-revealing={active || undefined}
+			onPointerDown={replayOnPress ? play : undefined}
+		>
+			<div
+				className={`h-full w-full transition-[opacity,filter] duration-220 ease-[ease] motion-reduce:transition-none ${
+					active ? 'opacity-22 saturate-70 contrast-86' : ''
+				}`}
+			>
+				{children}
+			</div>
+			<div
+				aria-hidden="true"
+				className={`pointer-events-none absolute inset-0 z-2 transition-opacity duration-180 ease-[ease] ${active ? 'opacity-100' : 'opacity-0'}`}
+			>
+				{active ? (
+					<div
+						key={run}
+						className="absolute inset-0 overflow-hidden"
+						style={{
+							background:
+								'radial-gradient(circle at 18% 24%, color-mix(in srgb, var(--color-accent-blue) 18%, transparent), transparent 22%), radial-gradient(circle at 82% 74%, color-mix(in srgb, var(--color-brand-green) 22%, transparent), transparent 24%)',
+						}}
+					>
+						<div
+							className="absolute -top-[36%] -bottom-[36%] -left-[32%] w-[44%] animate-preview-sweep opacity-90 blur-[14px]"
+							style={{
+								background:
+									'linear-gradient(90deg, transparent 0%, color-mix(in srgb, #ffffff 52%, transparent) 42%, color-mix(in srgb, var(--color-brand-green) 58%, transparent) 54%, color-mix(in srgb, var(--color-accent-blue) 32%, transparent) 66%, transparent 100%)',
+							}}
+						/>
+						{PARTICLES.map((p, index) => (
+							<span
+								// Fixed, index-derived particle field; the order never changes.
+								key={index}
+								className={`absolute animate-preview-particle opacity-58 mix-blend-screen ${p.square ? 'rounded-[4px] rotate-24' : p.wide ? 'rounded-[4px]' : 'rounded-full'}`}
+								style={
+									{
+										left: `${p.x}%`,
+										top: `${p.y}%`,
+										width: p.wide ? p.size * 1.8 : p.size,
+										height: p.size,
+										marginLeft: -p.size / 2,
+										marginTop: -p.size / 2,
+										background: p.color,
+										boxShadow: `0 0 0 1px color-mix(in srgb, #ffffff 38%, transparent), 0 0 18px color-mix(in srgb, ${p.color} 72%, transparent)`,
+										animationDuration: `${p.duration}ms`,
+										animationDelay: `${p.delay}ms`,
+										'--particle-dx': `${p.dx}px`,
+										'--particle-dy': `${p.dy}px`,
+									} as CSSProperties
+								}
+							/>
+						))}
+					</div>
+				) : null}
+			</div>
+		</div>
+	)
+}

package/src/components/settings-dialog-surface.tsx

@@ -137,9 +137,10 @@ export function WizardFormDialog({ isOpen, onOpenChange, isPending = false, isEx
 	</ModalOverlay>
 }
 
+// The source New section dialog separates its groups by spacing only, no hairlines.
 export function SettingsDialogIdentity({ children }: { children: ReactNode }) {
 	const { variant } = useContext(LayoutContext)
-	return <Group className={variant === 'create' ? 'gap-4 border-b border-border pb-3' : 'gap-8'}>{children}</Group>
+	return <Group className={variant === 'create' ? 'gap-4 pb-3' : 'gap-8'}>{children}</Group>
 }
 export function SettingsDialogDescription({ children }: { children: ReactNode }) {
 	const { variant } = useContext(LayoutContext)
@@ -152,7 +153,7 @@ export function SettingsDialogColumns({ children, metadata = false }: { children
 }
 export function SettingsDialogGroup({ children }: { children: ReactNode }) {
 	const { variant } = useContext(LayoutContext)
-	return <Group className={variant === 'create' ? 'gap-3 border-b border-border pb-3' : undefined}>{children}</Group>
+	return <Group className={variant === 'create' ? 'gap-3 pb-3' : undefined}>{children}</Group>
 }
 
 /** Two-column production metadata grid from the split settings family.
@@ -173,12 +174,18 @@ export function SettingsDialogControl({ children }: { children: ReactNode }) {
 	const { variant } = useContext(LayoutContext)
 	return <Group className={variant === 'edit' ? 'mt-6' : undefined}>{children}</Group>
 }
-export const SettingsDialogLabel = uic('p', { displayName: 'SettingsDialogLabel', baseClass: 'm-0 text-panel-heading font-medium text-fg' })
+const Label = uic('p', { displayName: 'SettingsDialogLabel', baseClass: 'm-0 text-panel-heading font-medium text-fg' })
+/** Group label. The create variant uses the source New section group label: 16px/22px semibold. */
+export function SettingsDialogLabel({ className, ...props }: ComponentProps<typeof Label>) {
+	const { variant } = useContext(LayoutContext)
+	return <Label {...props} className={[variant === 'create' ? 'text-body leading-5.5 font-semibold' : '', className].filter(Boolean).join(' ') || undefined} />
+}
 export const SettingsDialogEmphasis = uic('span', { displayName: 'SettingsDialogEmphasis', baseClass: 'text-fg' })
 const Hint = uic('p', { displayName: 'SettingsDialogHint', baseClass: 'm-0 text-small font-normal text-fg-workflow-muted' })
-export function SettingsDialogHint({ style, ...props }: ComponentProps<typeof Hint>) {
+/** Helper line. The create variant uses the source 16px/22px `#242423` hint. */
+export function SettingsDialogHint({ style, className, ...props }: ComponentProps<typeof Hint>) {
 	const { variant } = useContext(LayoutContext)
-	return <Hint {...props} style={{ ...(variant === 'basic' ? { maxWidth: '48ch' } : {}), ...style }} />
+	return <Hint {...props} className={[variant === 'create' ? 'text-body leading-5.5 text-surface-inverted' : '', className].filter(Boolean).join(' ') || undefined} style={{ ...(variant === 'basic' ? { maxWidth: '48ch' } : {}), ...style }} />
 }
 export const SettingsDialogAction = uic(Button, { displayName: 'SettingsDialogAction', baseClass: 'h-11.5 rounded-full px-6 text-base font-medium leading-5', style: { letterSpacing: 0 } })
 

package/src/components/template-catalog-card.tsx

@@ -43,11 +43,21 @@ export function CatalogSummaryCard({ title, badge, description, details }: { tit
 	return <SummaryCard><SummaryHead><SummaryTitle>{title}</SummaryTitle><span className="shrink-0">{badge}</span></SummaryHead><SummaryTail>{description ? <p className="m-0">{description}</p> : null}<span>{details}</span></SummaryTail></SummaryCard>
 }
 
-/** Compact launcher card. Missing artwork is not replaced by synthetic imagery. */
-export function CatalogLaunchCard({ title, description, details, action }: { title: string; description?: string; details: ReactNode; action: ReactNode }) {
-	return <SummaryCard data-testid="scenario-launch-card" className="relative h-70 min-h-70 max-h-70 transition-colors duration-200 focus-within:ring-2 focus-within:ring-ring">
-		<SummaryHead><SummaryTitle asChild><h3>{title}</h3></SummaryTitle></SummaryHead>
-		<SummaryTail>{description ? <p className="m-0">{description}</p> : null}<span>{details}</span></SummaryTail>
+/**
+ * Compact launcher card. Missing artwork is not replaced by synthetic imagery.
+ * `preview` (optional, caller-rendered real artwork) fills the card as a cover layer
+ * under the source gs Tile image gradient (transparent → 30% → 50% black), and the
+ * title and tail switch to the source white / white 88% ink.
+ */
+export function CatalogLaunchCard({ title, description, details, action, preview }: { title: string; description?: string; details: ReactNode; action: ReactNode; preview?: ReactNode }) {
+	const covered = preview != null
+	return <SummaryCard data-testid="scenario-launch-card" data-preview={covered || undefined} className="relative isolate h-70 min-h-70 max-h-70 transition-colors duration-200 focus-within:ring-2 focus-within:ring-ring">
+		{covered ? <>
+			<div aria-hidden="true" className="absolute inset-0 -z-10 overflow-hidden [&_canvas]:size-full [&_canvas]:object-cover [&_img]:size-full [&_img]:object-cover">{preview}</div>
+			<div aria-hidden="true" className="absolute inset-0 -z-10 bg-linear-to-b from-black/0 via-black/30 to-black/50" />
+		</> : null}
+		<SummaryHead><SummaryTitle asChild className={covered ? 'text-white' : undefined}><h3>{title}</h3></SummaryTitle></SummaryHead>
+		<SummaryTail className={covered ? 'text-white/88' : undefined}>{description ? <p className="m-0">{description}</p> : null}<span>{details}</span></SummaryTail>
 		{action}
 	</SummaryCard>
 }

package/src/index.ts

@@ -67,6 +67,7 @@ export * from "./layout/persistent-page-shell";
 export * from "./components/avatar";
 export * from "./components/brand-page-header";
 export * from "./components/count-up";
+export * from "./components/preview-motion";
 export * from "./components/cta-pill";
 export * from "./components/stat-stack";
 export * from "./components/icons";