@podoba/react 0.0.36 → 0.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@podoba/react",
-	"version": "0.0.36",
+	"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.36",
-		"@podoba/tailwind": "^0.0.36",
+		"@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/button.tsx

@@ -10,10 +10,11 @@ import { uic } from '../utils/uic'
 export const Button = uic(RACButton, {
 	displayName: 'Button',
 	// gs `Button.module.scss`: pill radius, FIXED 13px / weight-400 text (`text-compact`)
-	// on every size — size variants change PADDING ONLY, never the text scale. 200ms
-	// ease-in-out transition.
+	// on every size — size variants change PADDING ONLY, never the text scale. The
+	// source eases background-color, color, box-shadow and border-color over 120ms `ease`.
 	baseClass:
-		'inline-flex items-center justify-center gap-2 rounded-full text-compact leading-4 transition-all duration-200 ease-in-out ' +
+		'inline-flex items-center justify-center gap-2 rounded-full text-compact leading-4 ' +
+		'transition-[background-color,color,box-shadow,border-color] duration-120 ease-[ease] motion-reduce:transition-none ' +
 		'outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2 ' +
 		// Inactive states (disabled / pending) soften the LABEL ONLY and leave every
 		// variant on its own surface. Two reasons:

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)
@@ -118,16 +123,17 @@ const MenuItem = uic(RACMenuItem, {
 	// upstream API — a hand-written custom property has nowhere to be defined and
 	// silently resolves to nothing.
 	baseClass:
-		'flex min-h-8.5 cursor-pointer select-none items-center gap-2.5 rounded-[10px] px-3 py-1.5 ' +
+		'flex min-h-8.5 min-w-0 cursor-pointer select-none items-center gap-2.5 rounded-[10px] px-3 py-1.5 ' +
 		'text-compact leading-4 tracking-normal font-normal text-white outline-none ' +
 		'data-[focused]:bg-[#2f2f2f] data-[focused]:font-medium data-[hovered]:bg-[#2f2f2f] data-[hovered]:font-medium ' +
 		'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45',
 	variants: {
-		// gs `--color-error-light` (#ffb5b5), a light red tuned for this dark panel.
-		// `--color-danger-light` DOES exist, but it flips to a ~15% translucent red
-		// under `[data-theme="dark"]` and would all but vanish here; `text-danger`
+		// gs `var(--color-error-light, #ffb5b5)`: the Manager defines `--color-error-light`
+		// as #fee2e2, so the rendered source ink is #fee2e2 (the #ffb5b5 fallback never
+		// applies). `--color-danger-light` DOES exist, but it flips to a ~15% translucent
+		// red under `[data-theme="dark"]` and would all but vanish here; `text-danger`
 		// (#dc2626) is a light-surface red that fails contrast on #242424.
-		destructive: { true: 'text-[#ffb5b5] data-[focused]:text-[#ffb5b5]' },
+		destructive: { true: 'text-[#fee2e2] data-[focused]:text-[#fee2e2]' },
 	},
 }) as (
 	props: React.ComponentProps<typeof RACMenuItem> & { destructive?: boolean },
@@ -142,7 +148,9 @@ const panelClass =
 	'w-[258px] max-w-[calc(100vw-16px)] max-h-[calc(100vh-16px)] box-border overflow-y-auto rounded-xl ' +
 	'bg-gradient-to-b from-[#242424] to-[#1f1f1f] ' +
 	'px-1.5 py-2 shadow-[0_12px_28px_rgba(0,0,0,0.22)] outline-none'
-const menuClass = 'grid gap-0.5 outline-none'
+// `minmax(0, 1fr)` tracks: an `auto` grid column grows to the items' nowrap
+// min-content, so a long label plus a trailing pill pushed rows past the 258px panel.
+const menuClass = 'grid grid-cols-[minmax(0,1fr)] gap-0.5 outline-none'
 
 const CursorPopoverSurface = uic(RACPopover, {
 	displayName: 'ContextMenuPopoverSurface',
@@ -264,7 +272,7 @@ function ContextMenuBody({
 			{groups.map((group, gi) => (
 				// gs separates groups with an 18px top margin (`.group + .group`), not a
 				// rule line — so the first group sits flush, the rest gain the gap.
-				<RACMenuSection key={groupId(group, gi)} className={gi > 0 ? 'mt-4.5 grid gap-0.5' : 'grid gap-0.5'}>
+				<RACMenuSection key={groupId(group, gi)} className={gi > 0 ? 'mt-4.5 grid min-w-0 grid-cols-[minmax(0,1fr)] gap-0.5' : 'grid min-w-0 grid-cols-[minmax(0,1fr)] gap-0.5'}>
 					{group.label ? (
 						// The grid contributes 2px: 2px margin + 2px gap = source 4px below label.
 						<Header className="mx-2 mt-1.5 mb-0.5 text-compact leading-4 tracking-normal font-medium text-white">{group.label}</Header>
@@ -350,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 })
@@ -371,6 +388,7 @@ function WrapperContextMenu({
 			setResolved(groupsRef.current({ target }))
 		}
 		setPosition({ x, y })
+		targetRef.current = target
 		setOpen(true)
 	}
 
@@ -431,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/count-up.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, type ElementType } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState, type ElementType } from 'react'
 
 /**
  * CountUp — animates a number from 0 up to `value` on mount (and whenever `value`
@@ -20,6 +20,10 @@ export interface CountUpProps {
 
 const easeOutCubic = (t: number): number => 1 - Math.pow(1 - t, 3)
 
+// Layout effect in the browser so the reset to 0 commits before the first paint
+// (a passive effect painted the final value for one frame, then jumped to 0).
+const useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect
+
 export function CountUp({
 	value,
 	durationMs = 900,
@@ -31,13 +35,14 @@ export function CountUp({
 	const rafRef = useRef<number | null>(null)
 	const startRef = useRef<number | null>(null)
 
-	useEffect(() => {
+	useBrowserLayoutEffect(() => {
 		if (typeof window === 'undefined') return
 		const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
 		if (reduce || durationMs <= 0) {
 			setDisplay(value)
 			return
 		}
+		setDisplay(0)
 		startRef.current = null
 		const tick = (now: number) => {
 			if (startRef.current === null) startRef.current = now

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/dropdown-menu.tsx

@@ -40,14 +40,17 @@ import { uic } from '../utils/uic'
  * ```
  *
  * gs token map (this is the LIGHT menu, so the gs literals map cleanly to our
- * tokens): content bg white → `surface` · 1px `#eceae1` border → `border` · 8px
- * radius → `rounded-lg` · `shadow-lg` · item 12/16px padding → `py-3 px-4` · 6px
- * item radius → `rounded-md` · item hover `#f7f6f2` → `surface-card` · item text
- * `#0d0d0d` → `fg` · section label `#aba89c` 13px → `text-fg-muted text-compact`
+ * tokens): content bg `--color-background-secondary` (#f7f6f2) → `surface-card` ·
+ * 1px `#eceae1` border → `border` · 8px radius → `rounded-lg` · `shadow-lg` · item
+ * 12/16px padding → `py-3 px-4` · 16px/22px base text → `text-body leading-5.5` ·
+ * 6px item radius → `rounded-md` · item highlight `--color-background-hover`
+ * (#eceae1) → `surface-muted` · item text `#0d0d0d` → `fg` · section label 13px →
+ * `text-fg-muted text-compact`. Motion: gs `slideDownAndFade` in / `slideUpAndFade`
+ * out, 200ms `cubic-bezier(0.16, 1, 0.3, 1)` (`animate-dropdown-in` / `-out`).
  * (#25: the source grey is 2.10:1 on `surface`; a section label is read, not ornament)
  * · separator `#eceae1` → `border`. The destructive item uses `text-danger`
  * (`#dc2626`) — a light-surface red that reads correctly here (unlike the dark
- * ContextMenu, which needs the lighter `#ffb5b5`).
+ * ContextMenu, which needs the lighter `#fee2e2`).
  *
  * Presentational only (hard rule #1) — no app imports.
  */
@@ -55,18 +58,25 @@ import { uic } from '../utils/uic'
 /** Re-export of RAC `MenuTrigger`; owns the open/close state for the pair. */
 export const DropdownMenuTrigger = RACMenuTrigger
 
-// gs `.item`: 12/16px padding, 6px radius, base text on white; hover/focus wash
-// `#f7f6f2` (→ surface-card). We light up both `data-[focused]` (keyboard) and
-// `data-[hovered]` (pointer) so keyboard focus stays clearly visible. Item text
-// size follows the house light Select (`text-small`) rather than gs's 16px base so
-// the two light dropdowns stay consistent.
+/** Shared gs dropdown panel skin (also used by the Topbar `UserMenu`). */
+export const dropdownMenuPanelClass =
+	'min-w-[220px] rounded-lg border border-border bg-surface-card p-2 shadow-lg outline-none ' +
+	'data-[entering]:animate-dropdown-in data-[exiting]:animate-dropdown-out motion-reduce:animate-none'
+
+// gs `.item`: 12/16px padding, 6px radius, 16px/22px base text; the Radix
+// `[data-highlighted]` wash is `#eceae1` (→ surface-muted). Radix highlights on
+// pointer hover and keyboard focus, never on a pointer open, so we key on
+// `data-[hovered]` + `data-[focus-visible]` rather than RAC's plain `data-[focused]`
+// (which also marks the first item when a mouse press opens the menu).
+export const dropdownMenuItemClass =
+	'flex cursor-pointer select-none items-center gap-2.5 rounded-md px-4 py-3 ' +
+	'text-body leading-5.5 font-normal text-fg outline-none ' +
+	'data-[focus-visible]:bg-surface-muted data-[hovered]:bg-surface-muted ' +
+	'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50'
+
 export const DropdownMenuItem = uic(RACMenuItem, {
 	displayName: 'DropdownMenuItem',
-	baseClass:
-		'flex cursor-pointer select-none items-center gap-2.5 rounded-md px-4 py-3 ' +
-		'text-small text-fg outline-none ' +
-		'data-[focused]:bg-surface-card data-[hovered]:bg-surface-card ' +
-		'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+	baseClass: dropdownMenuItemClass,
 	variants: {
 		// gs has no destructive item style on the light menu; we add the house danger
 		// token (red text), which reads correctly on the white / cream surface.
@@ -128,11 +138,11 @@ export function DropdownMenu<T extends object>({
 }: DropdownMenuProps<T>) {
 	return (
 		// gs `.content`: min-width 220px, 8px padding (`p-2`), 8px radius, 1px
-		// `#eceae1` border, white fill, `shadow-lg`.
+		// `#eceae1` border, `#f7f6f2` fill, `shadow-lg`, 200ms slide/fade both ways.
 		<RACPopover
 			placement={placement}
 			className={
-				'min-w-[220px] rounded-lg border border-border bg-surface p-2 shadow-lg outline-none' +
+				dropdownMenuPanelClass +
 				(popoverClassName ? ` ${popoverClassName}` : '')
 			}
 		>

package/src/components/field-appearance.ts

@@ -9,6 +9,9 @@ export const filledFieldClasses =
 	'border-0 bg-surface-card text-small font-normal leading-4.5 text-fg ' +
 	'outline-none transition-colors duration-200 motion-reduce:transition-none placeholder:text-fg-muted placeholder:font-normal ' +
 	'data-[hovered]:bg-surface-muted data-[focused]:bg-surface-card ' +
-	'focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 ' +
+	// `outline-none` above zeroes Tailwind v4's `--tw-outline-style`, so the focus
+	// width alone would still resolve to `outline-style: none`. Restate the solid
+	// style or the gs 2px focus outline never paints (WCAG 2.4.7).
+	'focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 ' +
 	'data-[invalid]:ring-1 data-[invalid]:ring-danger data-[invalid]:outline-danger ' +
 	'data-[disabled]:bg-surface-muted data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed'

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/section-tabs.tsx

@@ -52,9 +52,12 @@ const GridGlyph = () => (
 	</svg>
 )
 
+// gs `.tabButton`: inactive ink `#242423` (the light-theme neutral that
+// `surface-inverted` carries; it flips to a light ink on the dark shell), selected
+// and hovered `fg` on `surface-muted`, background + colour eased over 120ms `ease`.
 const tabBase =
-	'inline-flex h-7 shrink-0 items-center gap-2 rounded-sm px-nav-x py-1.5 text-compact font-normal text-fg-muted outline-none ' +
-	'transition-colors duration-150 ease-in-out data-[hovered]:bg-surface-muted data-[hovered]:text-fg ' +
+	'inline-flex h-7 shrink-0 items-center gap-2 rounded-sm px-nav-x py-1.5 text-compact font-normal text-surface-inverted outline-none ' +
+	'transition-colors duration-120 ease-[ease] motion-reduce:transition-none data-[hovered]:bg-surface-muted data-[hovered]:text-fg ' +
 	'data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring ' +
 	'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:bg-transparent data-[disabled]:text-fg-muted'
 
@@ -90,7 +93,7 @@ export function SectionTabs({
 						aria-pressed={isResetSelected}
 						onPress={onReset}
 						className={[
-							resetContent ? tabBase : 'h-7 w-7 rounded-sm p-0 text-fg-muted data-[hovered]:text-fg',
+							resetContent ? tabBase : 'h-7 w-7 rounded-sm p-0 text-surface-inverted data-[hovered]:text-fg',
 							isResetSelected ? tabActive : '',
 						]
 							.filter(Boolean)

package/src/components/select.tsx

@@ -43,7 +43,7 @@ const SelectTrigger = uic(RACButton, {
 		appearance: {
 			filled: 'min-h-control-tall border-0 bg-surface-card py-5 font-normal leading-4.5 duration-200 motion-reduce:transition-none ' +
 				'data-[hovered]:bg-surface-muted group-data-[open]:bg-surface-card ' +
-				'data-[focus-visible]:outline-2 data-[focus-visible]:outline-ring data-[focus-visible]:outline-offset-2 ' +
+				'data-[focus-visible]:outline-solid data-[focus-visible]:outline-2 data-[focus-visible]:outline-ring data-[focus-visible]:outline-offset-2 ' +
 				'group-data-[invalid]:ring-1 group-data-[invalid]:ring-danger ' +
 				'data-[disabled]:bg-surface-card data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
 			outlined: 'h-control-tall border border-border bg-surface ' +
@@ -66,7 +66,7 @@ const StyledSelectItem = uic(ListBoxItem, {
 		appearance: {
 			filled: 'min-w-0 overflow-hidden px-5 py-0 font-normal leading-4.5 max-md:min-h-11 ' +
 				'data-[hovered]:font-medium data-[focused]:font-medium data-[selected]:font-medium ' +
-				'data-[focus-visible]:outline-2 data-[focus-visible]:outline-ring data-[focus-visible]:-outline-offset-2',
+				'data-[focus-visible]:outline-solid data-[focus-visible]:outline-2 data-[focus-visible]:outline-ring data-[focus-visible]:-outline-offset-2',
 			outlined: 'px-3 py-2 ' +
 		'data-[hovered]:bg-surface-muted data-[focused]:bg-surface-muted data-[selected]:font-medium ' +
 		'data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',

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

@@ -98,7 +98,8 @@ export function SettingsDialogSurface({ variant, isOpen, onOpenChange, isPending
 							<Body ref={bodyRef} className={bodyClass} data-testid={bodyTestId}>{children}</Body>
 						</Container>
 					</ScrollBody>
-					<footer className={catalog ? 'shrink-0 border-t border-border bg-surface pt-3' : create ? 'shrink-0 border-t border-border bg-surface pt-4' : 'shrink-0 border-t border-border bg-surface pt-5'}>
+					{/* gs dialog footers sit on the white surface with no rule above them. */}
+					<footer className={catalog ? 'shrink-0 bg-surface pt-3' : create ? 'shrink-0 bg-surface pt-4' : 'shrink-0 bg-surface pt-5'}>
 						<Container className={containerClass}>
 							<div className={`flex justify-end ${csv || basic ? 'items-center gap-1' : variant === 'edit' ? 'gap-3' : 'gap-2'}`}>{footer}</div>
 						</Container>
@@ -130,15 +131,16 @@ export function WizardFormDialog({ isOpen, onOpenChange, isPending = false, isEx
 				</Button>
 				<header className="shrink-0"><Container className="max-w-384 px-5 min-[901px]:px-6"><DisplayHeading id={titleId} className="m-0 whitespace-pre-line pb-0.5 text-fg-muted" style={{ letterSpacing: 0 }}>{title}</DisplayHeading></Container></header>
 				<ScrollBody style={{ scrollbarGutter: 'stable' }}><Container className="max-w-384 px-5 min-[901px]:px-6"><Body className="gap-8">{children}</Body></Container></ScrollBody>
-				<footer className="shrink-0 border-t border-border bg-surface pt-5"><Container className="max-w-384 px-5 min-[901px]:px-6"><div className="flex flex-wrap justify-end gap-2">{footer}</div></Container></footer>
+				<footer className="shrink-0 bg-surface pt-5"><Container className="max-w-384 px-5 min-[901px]:px-6"><div className="flex flex-wrap justify-end gap-2">{footer}</div></Container></footer>
 			</Layout>
 		</Panel>
 	</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)
@@ -151,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.
@@ -172,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 } })
 
@@ -220,7 +228,7 @@ export function ProductionSettingsDialog({ isOpen, onOpenChange, prefix, title,
 }
 
 const DisclosureRoot = uic(AriaDisclosure, { displayName: 'SettingsDisclosureRoot', baseClass: 'group/settings-disclosure flex min-w-0 flex-col gap-3' })
-const DisclosureTrigger = uic(AriaButton, { displayName: 'SettingsDisclosureTrigger', baseClass: 'flex w-full cursor-pointer items-start justify-between gap-3 bg-transparent p-0 text-left outline-none data-[focus-visible]:outline-2 data-[focus-visible]:outline-ring data-[focus-visible]:outline-offset-2' })
+const DisclosureTrigger = uic(AriaButton, { displayName: 'SettingsDisclosureTrigger', baseClass: 'flex w-full cursor-pointer items-start justify-between gap-3 bg-transparent p-0 text-left outline-none data-[focus-visible]:outline-solid data-[focus-visible]:outline-2 data-[focus-visible]:outline-ring data-[focus-visible]:outline-offset-2' })
 const DisclosureCopy = uic('span', { displayName: 'SettingsDisclosureCopy', baseClass: 'flex min-w-0 flex-col gap-1' })
 const DisclosureTitle = uic('strong', { displayName: 'SettingsDisclosureTitle', baseClass: 'text-body font-medium leading-normal text-fg' })
 const DisclosureHint = uic('span', { displayName: 'SettingsDisclosureHint', baseClass: 'text-body font-normal leading-normal text-fg-workflow-muted' })

package/src/components/table.tsx

@@ -116,7 +116,7 @@ export function Table<Row>({
 
 	return (
 		<div className={['w-full overflow-x-auto', className].filter(Boolean).join(' ')}>
-			<table style={team ? { '--table-columns': gridTemplate } as CSSProperties : undefined} className={`w-full border-collapse text-small ${worksheet ? 'border-b border-border font-normal leading-4.5' : ''} ${team ? 'block border-b border-border font-normal leading-4.5' : ''}`} {...aria}>
+			<table style={team ? { '--table-columns': gridTemplate } as CSSProperties : undefined} className={`w-full border-collapse text-small ${worksheet ? 'border-b border-border font-normal leading-4.5' : ''} ${team ? 'block font-normal leading-4.5' : ''}`} {...aria}>
 				<thead className={team ? 'block' : undefined}>
 					<tr className={`${worksheet ? '' : 'border-b border-border'} ${team ? 'grid grid-cols-[var(--table-columns)] gap-3 bg-surface-muted px-4 max-[1023px]:hidden' : ''}`}>
 						{columns.map((column) => {
@@ -131,7 +131,7 @@ export function Table<Row>({
 									aria-sort={
 										canSort ? (active ? (sort?.dir === 'asc' ? 'ascending' : 'descending') : 'none') : undefined
 									}
-									className={`${ALIGN_CLASS[align]} ${worksheet ? 'border-0 px-3 py-4 align-middle font-mono text-small font-normal leading-4.5 tracking-normal text-fg normal-case bg-surface whitespace-nowrap' : team ? 'border-0 px-4 py-3 align-middle font-mono text-small font-normal leading-4.5 tracking-normal text-fg normal-case whitespace-nowrap' : 'px-4 py-3 text-label font-medium tracking-wide text-fg-muted uppercase'}`}
+									className={`${ALIGN_CLASS[align]} ${worksheet ? 'border-0 px-3 py-4 align-middle font-mono text-small font-normal leading-4.5 tracking-normal text-fg normal-case bg-surface whitespace-nowrap' : team ? 'border-0 px-0 py-3 align-middle font-mono text-small font-normal leading-4.5 tracking-normal text-fg normal-case whitespace-nowrap' : 'px-4 py-3 text-label font-medium tracking-wide text-fg-muted uppercase'}`}
 								>
 									{canSort ? (
 										<button

package/src/components/tabs.tsx

@@ -25,9 +25,12 @@ export const TabList = uic(RACTabList, {
 
 export const Tab = uic(RACTab, {
 	displayName: 'Tab',
+	// gs `Tabs.module.scss` `.trigger`: 12/16px padding, heading-5 (16px/20px) medium,
+	// `--color-text-secondary` ink (#242423, the light neutral `surface-inverted`
+	// carries), 2px underline, `all 200ms ease-in-out`.
 	baseClass:
-		'cursor-pointer select-none border-b-2 border-transparent px-4 py-3 text-small font-medium text-fg-muted ' +
-		'outline-none transition-colors ' +
+		'cursor-pointer select-none border-b-2 border-transparent px-4 py-3 text-heading5 font-medium text-surface-inverted ' +
+		'outline-none transition-all duration-200 ease-[ease-in-out] motion-reduce:transition-none ' +
 		'data-[hovered]:text-fg ' +
 		'data-[selected]:border-brand-primary data-[selected]:text-fg ' +
 		'data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring ' +

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/components/textarea.tsx

@@ -58,8 +58,10 @@ export type TextareaProps = TextFieldProps & {
 }
 
 export const Textarea = ({ label, description, errorMessage, placeholder, rows, textAreaClassName, appearance = 'outlined', ...props }: TextareaProps) => (
-	<TextField {...props} className={`flex w-full flex-col ${appearance === 'filled' ? 'gap-3' : 'gap-2'}`}>
-		<Label className={`${appearance === 'filled' ? 'text-panel-heading' : 'text-small'} font-medium text-fg`}>{label}</Label>
+	// Label and gap match `Input` in both appearances (gs 17px/20px field label,
+	// 12px to the control), so a Title + Description pair reads as one form.
+	<TextField {...props} className="flex w-full flex-col gap-3">
+		<Label className="text-panel-heading font-medium text-fg">{label}</Label>
 		<StyledTextArea className={textAreaClassName} placeholder={placeholder} rows={rows} appearance={appearance} />
 		{description ? (
 			<Text slot="description" className="text-label text-fg-muted">

package/src/components/tile.tsx

@@ -395,10 +395,44 @@ const BADGE: Record<BadgeColor, string> = {
 
 export function Badge({ label, color = 'grey' }: { label: ReactNode; color?: BadgeColor }) {
 	return (
+		// gs `Tag.module.scss`: 24px tall, 0 10px padding, 16px (`radius-2xl`) corners,
+		// 10px/20px medium label (Label 4). The source's `margin-left: 12px` is layout
+		// the caller owns, so it is not baked in here.
 		<span
-			className={`inline-flex items-center rounded-full px-3 py-1 text-caption font-medium leading-none ${BADGE[color]}`}
+			className={`inline-flex h-6 shrink-0 items-center whitespace-nowrap rounded-2xl px-2.5 text-micro font-medium leading-5 ${BADGE[color]}`}
 		>
 			{label}
 		</span>
 	)
 }
+
+/**
+ * Chip: the gs `GSChip` dot pill used for task status and priority cells.
+ *
+ * Distinct from {@link Badge} (gs `Tag`): a Chip is the table-cell pill with a
+ * leading 8px dot, 13px/16px regular label, 24px height and 0 12px padding. gs has
+ * two tones only: `green` (translucent mint surface, brand-green dot) for work that
+ * is moving or finished, and `grey` (neutral surface, neutral dot) for everything
+ * else. The dot is decorative; the label carries the meaning.
+ */
+export type ChipColor = 'green' | 'grey'
+
+const CHIP: Record<ChipColor, { surface: string; dot: string }> = {
+	// gs `rgba(150, 246, 194, 0.8)` → accent-green-lighter at 80%; dot brand green.
+	green: { surface: 'bg-accent-green-lighter/80 text-fg-on-brand', dot: 'bg-brand-green' },
+	// gs neutral-100 surface; the source neutral-200 dot (#aba89c) maps to the
+	// nearest shared neutral. Ornamental: the adjacent label is the content.
+	grey: { surface: 'bg-surface-muted text-fg', dot: 'bg-neutral-300' },
+}
+
+export function Chip({ label, color = 'grey' }: { label: ReactNode; color?: ChipColor }) {
+	const tone = CHIP[color]
+	return (
+		<span
+			className={`inline-flex h-6 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-2xl px-3 text-compact font-normal leading-4 ${tone.surface}`}
+		>
+			<span aria-hidden="true" className={`size-2 shrink-0 rounded-full ${tone.dot}`} />
+			{label}
+		</span>
+	)
+}

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";

package/src/layout/topbar.tsx

@@ -8,13 +8,16 @@ import {
 	ListBox,
 	ListBoxItem,
 	type ListBoxItemProps,
+	Header,
 	Menu as RACMenu,
 	MenuItem as RACMenuItem,
 	type MenuItemProps,
+	MenuSection,
 	MenuTrigger,
 	Popover,
 } from 'react-aria-components'
 import { uic } from '../utils/uic'
+import { dropdownMenuItemClass, dropdownMenuPanelClass, DropdownMenuSeparator } from '../components/dropdown-menu'
 
 /**
  * Topbar — sticky application header (ported pattern from gs-manager's
@@ -87,8 +90,12 @@ const TopbarActions = uic('div', {
 const TopbarNavLink = uic('a', {
 	displayName: 'Topbar.NavLink',
 	baseClass:
+		// gs inactive ink is `#242423` (the neutral that `surface-inverted` carries in
+		// light theme and flips to a light ink on the dark shell); hover/active darken to
+		// `fg`. gs `Button.module.scss` eases bg + colour over 120ms `ease`.
 		'inline-flex items-center rounded-sm px-[13px] py-[6px] text-compact leading-4 tracking-[0] whitespace-nowrap ' +
-		'text-fg no-underline transition-colors hover:bg-surface-muted hover:text-fg outline-none ' +
+		'text-surface-inverted no-underline transition-colors duration-120 ease-[ease] motion-reduce:transition-none ' +
+		'hover:bg-surface-muted hover:text-fg outline-none ' +
 		'focus-visible:ring-2 focus-visible:ring-ring ' +
 		'data-[active]:bg-surface-muted data-[active]:text-fg',
 	// `active` is accepted both as an explicit prop (uic emits `data-active=""` when
@@ -194,7 +201,8 @@ export const UserMenu = ({ trigger, triggerLabel, onAction, children }: UserMenu
 		>
 			{trigger}
 		</RACButton>
-		<Popover className="min-w-40 rounded-md border border-border bg-surface p-1 shadow-lg">
+		{/* gs Hub account menu = the shared gs DropdownMenu panel, bottom-end aligned. */}
+		<Popover placement="bottom end" className={dropdownMenuPanelClass}>
 			<RACMenu onAction={onAction} className="outline-none">
 				{children}
 			</RACMenu>
@@ -204,11 +212,46 @@ export const UserMenu = ({ trigger, triggerLabel, onAction, children }: UserMenu
 
 export const UserMenuItem = uic(RACMenuItem, {
 	displayName: 'UserMenu.Item',
-	baseClass:
-		'flex cursor-pointer select-none items-center rounded-sm px-3 py-2 text-small text-fg outline-none ' +
-		'data-[focused]:bg-surface-muted data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',
+	baseClass: `${dropdownMenuItemClass} data-[disabled]:pointer-events-none`,
 }) as (props: MenuItemProps) => ReactNode
 
+/**
+ * Two-line item copy (gs `.menuItemStack`): a primary label with a small muted hint
+ * underneath, e.g. "Manager / Current" or "Settings / Opens in GS Manager".
+ */
+export const UserMenuItemText = ({ label, hint }: { label: ReactNode; hint?: ReactNode }) => (
+	<span className="flex min-w-0 flex-col items-start gap-1">
+		<span>{label}</span>
+		{hint ? <span className="text-micro leading-5 font-normal text-fg-muted">{hint}</span> : null}
+	</span>
+)
+
+/**
+ * Non-interactive identity block at the top of the account menu (gs
+ * `.userMenuLabel`): the person's name (13px medium) over a muted detail line.
+ */
+export const UserMenuIdentity = ({ name, detail }: { name: ReactNode; detail?: ReactNode }) => (
+	<MenuSection>
+		<Header className="flex flex-col gap-1 px-4 py-3">
+			<span className="text-compact font-medium text-fg">{name}</span>
+			{detail ? <span className="mt-1 text-micro leading-5 font-medium text-fg-muted">{detail}</span> : null}
+		</Header>
+	</MenuSection>
+)
+
+export type UserMenuSectionProps = { label?: ReactNode; children: ReactNode; 'aria-label'?: string }
+
+/** A labelled group of account-menu items (gs `.menuSectionLabel`, e.g. "Apps"). */
+export const UserMenuSection = ({ label, children, ...props }: UserMenuSectionProps) => (
+	<MenuSection {...props}>
+		{label ? <Header className="px-2 pt-2 pb-1 text-micro leading-5 font-medium text-fg-muted">{label}</Header> : null}
+		{children}
+	</MenuSection>
+)
+
+/** 1px rule between account-menu groups (gs `.separator`). */
+export const UserMenuSeparator = DropdownMenuSeparator
+
 export const Topbar = Object.assign(TopbarRoot, {
 	Brand: TopbarBrand,
 	Nav: TopbarNav,