@podoba/react 0.0.34 → 0.0.35

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@podoba/react",
-	"version": "0.0.34",
+	"version": "0.0.35",
 	"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.34",
-		"@podoba/tailwind": "^0.0.34",
+		"@podoba/tokens": "^0.0.35",
+		"@podoba/tailwind": "^0.0.35",
 		"react-aria-components": "1.18.0",
 		"class-variance-authority": "0.7.1",
 		"clsx": "2.1.1",

package/src/components/asset-masonry-grid.examples.tsx

@@ -0,0 +1,9 @@
+import { AssetMasonryGrid } from './asset-masonry-grid'
+
+const cards = [160, 300, 200, 240, 180, 260].map((height, index) => ({ id: String(index), aspectRatio: 1, content: <div className="rounded-lg bg-surface-muted p-4" style={{ height }}>Asset {index + 1}</div> }))
+export const examples = {
+	default: () => <AssetMasonryGrid items={cards} label="Assets" />,
+	variants: () => <div className="max-w-md"><AssetMasonryGrid items={cards} label="Narrow assets" /></div>,
+	states: () => <AssetMasonryGrid items={[]} label="Empty assets" />,
+}
+export const meta = { category: 'Layout', description: 'Measured asset masonry with source responsive widths and shortest-column placement.' }

package/src/components/asset-masonry-grid.tsx

@@ -0,0 +1,62 @@
+import { useLayoutEffect, useRef, useState, type ReactNode } from 'react'
+
+export function assetMasonryColumns(width: number) {
+	const gap = 12
+	if (width <= 0) return { count: 1, width: 200, gap }
+	const minimum = width < 768 ? 200 : width < 1024 ? 250 : 280
+	const count = Math.max(width < 768 ? 1 : width < 1024 ? 2 : 3, Math.floor((width + gap) / (minimum + gap)))
+	return { count, width: (width - (count - 1) * gap) / count, gap }
+}
+
+export function assetMasonryPositions(heights: number[], count: number, gap = 12) {
+	const bottoms = Array.from({ length: Math.max(1, count) }, () => 0)
+	const positions = heights.map(height => {
+		const column = bottoms.indexOf(Math.min(...bottoms))
+		const top = bottoms[column] ?? 0
+		bottoms[column] = top + height + gap
+		return { column, top }
+	})
+	return { positions, height: heights.length ? Math.max(...bottoms) - gap : 0 }
+}
+
+/** Source shortest-column order, measuring children so metadata cannot overlap. */
+export function AssetMasonryGrid({ items, label }: {
+	items: { id: string; aspectRatio: number; content: ReactNode }[]
+	label: string
+}) {
+	const container = useRef<HTMLUListElement>(null)
+	const [width, setWidth] = useState(0)
+	const [measured, setMeasured] = useState<Record<string, { width: number; height: number }>>({})
+	const columns = assetMasonryColumns(width)
+	// Callers build `items` inline, so depending on the ARRAY identity tore down the
+	// ResizeObserver, rebuilt it and re-observed every child on each parent render.
+	// The observer only cares about which children exist — key on the id list.
+	const itemsKey = items.map(item => item.id).join('\u0000')
+	useLayoutEffect(() => {
+		const node = container.current
+		if (!node) return
+		const measure = () => {
+			setWidth(node.clientWidth)
+			const next: typeof measured = {}
+			for (const child of node.children) {
+				if (!(child instanceof HTMLElement) || !child.dataset.masonryId) continue
+				next[child.dataset.masonryId] = { width: child.offsetWidth, height: child.offsetHeight }
+			}
+			setMeasured(previous => JSON.stringify(previous) === JSON.stringify(next) ? previous : next)
+		}
+		measure()
+		const observer = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(measure)
+		observer?.observe(node)
+		for (const child of node.children) observer?.observe(child)
+		return () => observer?.disconnect()
+	}, [itemsKey, columns.width])
+	const heights = items.map(item => {
+		const size = measured[item.id]
+		if (size && Math.abs(size.width - columns.width) < 1 && size.height > 0) return size.height
+		return Math.min(800, Math.max(150, columns.width / (item.aspectRatio > 0 ? item.aspectRatio : 1)))
+	})
+	const layout = assetMasonryPositions(heights, columns.count, columns.gap)
+	return <ul ref={container} aria-label={label} data-testid="asset-grid" className="relative m-0 w-full list-none p-0" style={{ height: layout.height }}>
+		{items.map((item, index) => <li key={item.id} data-masonry-id={item.id} className="absolute" style={{ width: columns.width, insetInlineStart: (layout.positions[index]?.column ?? 0) * (columns.width + columns.gap), top: layout.positions[index]?.top ?? 0 }}>{item.content}</li>)}
+	</ul>
+}

package/src/components/asset-selection-surface.examples.tsx

@@ -0,0 +1,32 @@
+import { useLayoutEffect, useRef, useState } from 'react'
+import { AssetSelectionSurface, AssetSelectionGrid, AssetSelectionEmpty, AssetLibraryPreview } from './asset-selection-surface'
+import { Button } from './button'
+import { SectionTabs } from './section-tabs'
+
+function Example({ linked = false, pending = false, error = false }) {
+	const [open, setOpen] = useState(false)
+	const [selectedId, setSelectedId] = useState<string | null>('landscape')
+	return <>
+		<Button onPress={() => setOpen(true)}>Open asset selection</Button>
+		<AssetSelectionSurface isOpen={open} onOpenChange={setOpen} closeLabel="Close" isPending={pending}
+			title={linked ? <>Review linked assets <span className="text-fg-subtle">and add more</span><br />to this <span className="text-fg-subtle">project.</span></> : <>Choose assets <span className="text-fg-subtle">from storage</span><br />and add them to <span className="text-fg-subtle">this project.</span></>}
+			filters={<SectionTabs active="all" onChange={() => {}} tabs={[{key:'all',label:'All'},{key:'print',label:'Print'}]} />}
+			error={error ? 'The selected asset could not be added. Please try again.' : undefined}
+			footer={<><Button variant="secondary" isDisabled={pending} onPress={() => setOpen(false)}>Close</Button><Button isDisabled={pending} isPending={pending}>{pending ? 'Adding…' : linked ? 'Add another asset' : 'Add selected asset'}</Button></>}
+		>
+			{linked ? <AssetSelectionGrid selectedId={selectedId} onSelect={setSelectedId} onContextMenu={() => {}} items={[
+				{ id: 'landscape', label: 'Landscape sample', tags: ['Social', 'Campaign'], width: 600, height: 400, preview: <div className="h-full bg-surface-muted" /> },
+				{ id: 'portrait', label: 'Portrait sample', tags: ['Print'], width: 400, height: 600, preview: <div className="h-full bg-surface-card" /> },
+			]} /> : <AssetSelectionEmpty title="No linked assets yet." description="Add the first asset from storage to start production." />}
+		</AssetSelectionSurface>
+	</>
+}
+
+export const examples = {
+	default: () => <Example />,
+	variants: () => <Example linked />,
+	states: () => <><Example pending /><Example error /></>,
+	libraryEmpty: () => <><AssetSelectionEmpty variant="library" title="No assets found" /><AssetSelectionEmpty variant="library" title="No assets found" description="Try removing filters to see more assets" /></>,
+	libraryPreviews: () => <div className="grid max-w-3xl grid-cols-3 gap-3">{[1, 1.5, 0.75].map((ratio, index) => <AssetLibraryPreview key={ratio} label={`Preview ${index + 1}`} selected={index === 1} aspectRatio={ratio} tags={index ? ['Campaign', 'Print', 'Approved', 'Archive'] : []} onPress={() => {}}><div className="h-full min-h-[150px] bg-surface-muted" /></AssetLibraryPreview>)}</div>,
+}
+export const meta = { category: 'Composite', description: 'Scrollable asset selection with pinned filters and confirmation controls.' }

package/src/components/asset-selection-surface.tsx

@@ -0,0 +1,184 @@
+import { useEffect, useId, useRef, useState, type ReactNode, type RefObject, type MouseEventHandler } from 'react'
+import { Button } from './button'
+import { Button as AriaButton } from 'react-aria-components'
+import { ModalDialog, ModalOverlay, ModalSurface } from './dialog'
+import { DisplayHeading } from './text'
+import { uic } from '../utils/uic'
+import { assetMasonryColumns, assetMasonryPositions } from './asset-masonry-grid'
+
+const Body = uic('div', {
+	displayName: 'AssetSelectionBody',
+	baseClass: 'min-h-0 flex-1 overflow-y-auto',
+})
+
+const BrowsableAsset = uic('div', {
+	displayName: 'BrowsableAsset',
+	baseClass: 'outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+})
+
+type AssetMenuEvent = Pick<React.MouseEvent, 'preventDefault' | 'stopPropagation' | 'clientX' | 'clientY'> & {
+	currentTarget?: EventTarget | null
+}
+
+export interface AssetSelectionSurfaceProps {
+	isOpen: boolean
+	onOpenChange: (open: boolean) => void
+	isPending?: boolean
+	closeLabel: string
+	title: ReactNode
+	filters?: ReactNode
+	children: ReactNode
+	footer: ReactNode
+	error?: ReactNode
+	overlays?: ReactNode
+	bodyRef?: RefObject<HTMLDivElement | null>
+	onContextMenuCapture?: MouseEventHandler<HTMLDivElement>
+}
+
+/** Linked-assets/storage envelope. Domain state and attachment stay in the app. */
+export function AssetSelectionSurface({
+	isOpen, onOpenChange, isPending = false, closeLabel, title, filters,
+	children, footer, error, overlays, bodyRef, onContextMenuCapture,
+}: AssetSelectionSurfaceProps) {
+	const titleId = useId()
+	const [compact, setCompact] = useState(() => typeof window !== 'undefined' && window.matchMedia('(max-width: 900px)').matches)
+	useEffect(() => {
+		const media = window.matchMedia('(max-width: 900px)')
+		const change = () => setCompact(media.matches)
+		change()
+		media.addEventListener('change', change)
+		return () => media.removeEventListener('change', change)
+	}, [])
+	const close = () => { if (!isPending) onOpenChange(false) }
+	return (
+		<ModalOverlay className="p-0" isOpen={isOpen} onOpenChange={open => { if (!isPending) onOpenChange(open) }} isDismissable={!isPending} isKeyboardDismissDisabled={isPending}>
+			<ModalSurface className={`flex max-h-324 max-w-432 flex-col overflow-hidden p-0 ${compact ? 'h-23/25 w-24/25' : 'h-9/10 w-9/10'}`}>
+				<ModalDialog aria-labelledby={titleId} style={{ letterSpacing: 0 }} className={`relative flex min-h-0 flex-1 flex-col gap-8 outline-none ${compact ? 'px-5 py-6' : 'px-6 py-10'}`} onContextMenuCapture={onContextMenuCapture} onContextMenu={event => event.stopPropagation()}>
+					<header className="flex shrink-0 flex-col gap-3">
+						<DisplayHeading id={titleId} className="mb-4 pb-0.5" style={{ maxWidth: '28ch', letterSpacing: 0 }}>{title}</DisplayHeading>
+						<Button variant="ghost" aria-label={closeLabel} isDisabled={isPending} onPress={close} className="absolute end-4 top-3.5 h-8 w-8 rounded-md p-0 text-fg-subtle">
+							<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true"><path d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd" /></svg>
+						</Button>
+						{filters ? <div className="max-w-full pt-1">{filters}</div> : null}
+					</header>
+					<Body ref={bodyRef} style={{ scrollbarGutter: 'stable' }}>{children}</Body>
+					{error ? <div role="alert" className="shrink-0 rounded-md border border-danger bg-danger/10 px-4 py-3 text-small text-danger">{error}</div> : null}
+					<footer className="flex shrink-0 justify-end gap-2 pt-3 [&>button]:text-body [&>button]:leading-5 [&>button]:font-medium">{footer}</footer>
+					{overlays}
+				</ModalDialog>
+			</ModalSurface>
+		</ModalOverlay>
+	)
+}
+
+export function AssetSelectionEmpty({ title, description, variant = 'selection' }: { title: string; description?: string; variant?: 'selection' | 'library' }) {
+	if (variant === 'library') return <div role="status" className="px-8 py-16 text-center text-fg-muted">
+		<p className="my-2">{title}</p>
+		{description ? <p className="my-2 text-small">{description}</p> : null}
+	</div>
+	return <div role="status" className="flex min-h-96 flex-col items-center justify-center text-center text-fg-muted">
+		<p className="m-0 text-panel-heading font-medium text-fg">{title}</p>
+		{description ? <p className="mt-1 text-small" style={{ maxWidth: '32ch' }}>{description}</p> : null}
+	</div>
+}
+
+/** Library preview: source accent selection and hover-only curated tags. */
+export function AssetLibraryPreview({ label, selected, aspectRatio, tags, onPress, children }: {
+	label: string; selected: boolean; aspectRatio: number; tags: string[]
+	onPress: () => void; children: ReactNode
+}) {
+	return <AriaButton aria-label={label} aria-pressed={selected} onPress={onPress}
+		style={{ aspectRatio }}
+		className={`group relative block min-h-[150px] max-h-[800px] w-full overflow-hidden rounded-lg border p-0 transition-transform duration-200 hover:-translate-y-0.5 hover:shadow-xs hover:border-border-muted active:translate-y-0 focus-visible:ring-2 focus-visible:ring-accent-blue focus-visible:ring-offset-2 motion-reduce:transition-none ${selected ? 'border-accent-blue bg-accent-blue/10' : 'border-border bg-surface-card'}`}>
+		{children}
+		{tags.length ? <span data-testid="asset-card-overlay" className="pointer-events-none absolute inset-x-0 bottom-0 flex flex-wrap items-center gap-1 bg-gradient-to-t from-black/70 to-transparent p-3 opacity-0 transition-opacity duration-250 group-hover:opacity-100 group-focus-visible:opacity-100 motion-reduce:transition-none">
+			{tags.slice(0, 3).map(tag => <span key={tag} className="ms-3 inline-flex h-6 items-center rounded-full bg-surface-muted px-2.5 text-label font-medium leading-5 text-(--color-neutral-600)">{tag}</span>)}
+			{tags.length > 3 ? <span className="text-label font-medium text-white/90">+{tags.length - 3}</span> : null}
+		</span> : null}
+	</AriaButton>
+}
+
+export function AssetSelectionFilters({ items, onChange, disabled = false, autoFocus = false }: {
+	items: { id: string; label: string; selected: boolean }[]
+	onChange: (id: string) => void
+	disabled?: boolean; autoFocus?: boolean
+}) {
+	return <div role="group" className="mb-4 flex min-h-9 w-full flex-wrap content-start items-center gap-2 lg:w-2/3">
+		{items.map((item, index) => <Button key={item.id} autoFocus={autoFocus && index === 0} variant="ghost" isDisabled={disabled} aria-pressed={item.selected}
+			onPress={() => onChange(item.id)} className={`h-7 rounded-sm px-nav-x py-1.5 text-compact font-normal ${item.selected ? 'bg-surface-muted text-fg' : 'text-fg-muted'}`}>{item.label}</Button>)}
+	</div>
+}
+
+export interface AssetSelectionGridItem {
+	id: string
+	label: string
+	tags: string[]
+	width?: number
+	height?: number
+	preview: ReactNode
+}
+
+/** Source masonry geometry: responsive columns, shortest-column placement, 12px gaps. */
+export function AssetSelectionGrid({ items, selectedId, onSelect, onContextMenu }: {
+	items: AssetSelectionGridItem[]
+	selectedId: string | null
+	onSelect?: (id: string) => void
+	onContextMenu: (id: string, event: AssetMenuEvent) => void
+}) {
+	const container = useRef<HTMLDivElement>(null)
+	const [width, setWidth] = useState(0)
+	useEffect(() => {
+		const element = container.current
+		if (!element) return
+		const measure = () => setWidth(element.clientWidth)
+		measure()
+		const observer = new ResizeObserver(measure)
+		observer.observe(element)
+		return () => observer.disconnect()
+	}, [])
+	// Shared with AssetMasonryGrid rather than restated: the two had already drifted.
+	// Only the HEIGHT rule is local — this grid gets explicit width/height per item
+	// (square fallback when either is missing), the other derives from aspectRatio.
+	const columns = assetMasonryColumns(width)
+	const columnWidth = columns.width
+	const heights = items.map(item =>
+		item.width && item.height
+			? Math.min(800, Math.max(150, columnWidth * item.height / item.width))
+			: columnWidth,
+	)
+	const layout = assetMasonryPositions(heights, columns.count, columns.gap)
+	const positioned = items.map((item, index) => ({
+		item,
+		top: layout.positions[index]?.top ?? 0,
+		left: (layout.positions[index]?.column ?? 0) * (columnWidth + columns.gap),
+		height: heights[index] ?? columnWidth,
+	}))
+	return <div ref={container} className="relative w-full" style={{ height: layout.height }}>
+		{positioned.map(({ item, top, left, height }) => {
+			const className = `group relative block h-full w-full overflow-hidden rounded-lg border bg-surface-card p-0 transition-transform duration-200 hover:-translate-y-0.5 active:translate-y-0 motion-reduce:transition-none ${onSelect ? 'hover:shadow-xs hover:border-border-muted' : ''} ${selectedId === item.id ? 'border-accent-blue' : 'border-border'}`
+			const contents = <>{item.preview}
+				{item.tags.length ? <span className="pointer-events-none absolute inset-x-0 bottom-0 flex flex-wrap items-center gap-1 bg-gradient-to-t from-black/70 to-transparent p-3 opacity-0 transition-opacity duration-250 group-hover:opacity-100 group-focus-visible:opacity-100 motion-reduce:transition-none">
+					{item.tags.slice(0, 3).map(tag => <span key={tag} className="ms-3 inline-flex h-6 items-center rounded-full bg-surface-muted px-2.5 text-label font-medium leading-5 text-(--color-neutral-600)">{tag}</span>)}
+					{item.tags.length > 3 ? <span className="text-label font-medium text-white/90">+{item.tags.length - 3}</span> : null}
+				</span> : null}
+			</>
+			return <div key={item.id} data-cloud-asset-id={item.id}
+			onContextMenu={event => onContextMenu(item.id, event)} className="absolute" style={{ top, insetInlineStart: left, width: columnWidth, height }}>
+			<AssetCardKeyboard onContextMenu={event => onContextMenu(item.id, event)}>
+				{onSelect ? <Button variant="ghost" aria-label={item.label} aria-pressed={selectedId === item.id}
+					onPress={() => onSelect(item.id)} className={className}>{contents}</Button>
+					: <BrowsableAsset role="img" aria-label={item.label} tabIndex={0} aria-haspopup="menu" className={className}>{contents}</BrowsableAsset>}
+			</AssetCardKeyboard>
+		</div>})}
+	</div>
+}
+
+/** Browsing is not selection. Keep keyboard access to the same context actions. */
+function AssetCardKeyboard({ children, onContextMenu }: { children: ReactNode; onContextMenu: (event: AssetMenuEvent) => void }) {
+	return <div className="h-full w-full" onKeyDown={event => { if (event.key === 'ContextMenu' || (event.shiftKey && event.key === 'F10')) {
+					const rect = event.currentTarget.getBoundingClientRect()
+					event.preventDefault()
+					event.stopPropagation()
+					onContextMenu({ preventDefault: () => event.preventDefault(), stopPropagation: () => event.stopPropagation(), clientX: rect.left + 16, clientY: rect.top + 16, currentTarget: event.currentTarget })
+				} }}>{children}</div>
+}

package/src/components/brand-page-header.tsx

@@ -33,17 +33,22 @@ export type BrandPageHeaderCtaRenderProps = {
 	toggle: () => void
 }
 
+export type BrandPageHeaderVariant = 'dashboard' | 'default' | 'navigation'
+
 export type BrandPageHeaderProps = {
 	/** The large greeting / page-title slot (e.g. "Good morning Jonas 👋"). */
 	greeting: ReactNode
+	/** Header geometry preset. Dashboard uses the source 20px desktop gutter. */
+	variant?: BrandPageHeaderVariant
 	/** Semantic heading level. Use 2 or 3 when the header is nested below a page title. */
 	headingLevel?: 1 | 2 | 3
 	/**
 	 * gs-style "title to go back": a muted, clickable PARENT link rendered as the
 	 * line ABOVE the title (so the title reads "Parent ⏎ Current"). Pass a real
 	 * router `<Link>` so it's an anchor (cmd/middle-click, deep-link-safe), exactly
-	 * like gs's `parentLink`. The header uses the source's decorative `fg-subtle`
-	 * (#b3b3b3) with a hover→fg affordance.
+	 * like gs's `parentLink`. Rendered in `fg-muted` with a hover→fg affordance —
+	 * the source's decorative `fg-subtle` is 2.10:1 on `surface`, and this row is a
+	 * navigation link, not ornament (#25).
 	 */
 	parentLink?: ReactNode
 	/** Optional breadcrumb trail rendered above the greeting. */
@@ -76,6 +81,7 @@ export type BrandPageHeaderProps = {
 
 export function BrandPageHeader({
 	greeting,
+	variant = 'default',
 	headingLevel = 1,
 	parentLink,
 	breadcrumbs,
@@ -115,6 +121,11 @@ export function BrandPageHeader({
 					toggle: () => setExpanded(!expanded),
 				})
 			: cta
+	// Render the WHOLE trail the caller passed. Collapsing it to `breadcrumbs[-2]`
+	// silently dropped every other crumb (a three-crumb trail rendered one) and
+	// dropped a single crumb entirely unless it happened to be pressable. A caller
+	// that wants only the parent passes only the parent.
+	const visibleBreadcrumbs = breadcrumbs?.filter(Boolean) ?? []
 
 	useEffect(() => {
 		if (!expanded || !hasExpandable || typeof window === 'undefined') return
@@ -236,25 +247,41 @@ export function BrandPageHeader({
 	return (
 		<div
 			className={[
-				'mb-6 w-full',
-				sticky ? 'sticky top-0 z-30 bg-surface' : '',
+				'mb-6 box-border w-auto min-w-0',
+				sticky
+					? [
+						'relative -mx-3 px-3',
+						'md:sticky md:top-0 md:z-30 md:-mx-6 md:bg-surface md:px-6 md:pb-6 md:mb-0',
+						expanded ? 'md:pb-0' : '',
+					].join(' ')
+					: '',
 				className,
 			]
 				.filter(Boolean)
 				.join(' ')}
 		>
-			<div className="flex flex-col gap-2 md:grid md:grid-cols-3 md:items-stretch md:gap-4">
-				<div className="flex min-w-0 flex-1 flex-col gap-1 md:col-span-2">
-					{breadcrumbs && breadcrumbs.length > 0 ? (
-						<nav aria-label="Breadcrumb" className="flex flex-wrap items-center gap-1 text-compact text-fg-muted">
-							{breadcrumbs.map((crumb, i) => (
+			<div
+				className={`grid grid-cols-1 grid-rows-[auto_auto] items-start gap-y-2 ${
+					variant === 'navigation' ? 'md:grid-cols-2' : 'md:grid-cols-[2fr_1fr]'
+				} ${variant === 'dashboard' ? 'md:gap-x-5' : 'md:gap-x-4'}`}
+			>
+				<div className="col-start-1 row-[1/-1] flex w-full min-w-0 flex-col gap-0">
+					{/* EXACTLY ONE Breadcrumb landmark. Rendering the trail and `parentLink`
+					    as siblings produced two <nav aria-label="Breadcrumb"> in one header —
+					    duplicate landmarks sharing an accessible name. `breadcrumbs` is the
+					    richer API, so it wins when a caller passes both.
+					    Ink is `fg-muted` (5.98:1), NOT `fg-subtle` (2.10:1 on surface): a
+					    crumb is a navigation link, which #25 keeps on the readable token. */}
+					{visibleBreadcrumbs.length > 0 ? (
+						<nav aria-label="Breadcrumb" className="m-0 flex w-full min-w-0 flex-wrap items-center gap-1 text-display-large font-medium tracking-wide text-fg-muted">
+							{visibleBreadcrumbs.map((crumb, i) => (
 								<span key={i} className="inline-flex items-center gap-1">
 									{i > 0 ? <span aria-hidden="true">/</span> : null}
 									{crumb.onPress ? (
 										<Button
 											variant="ghost"
 											onPress={crumb.onPress}
-											className="h-auto rounded-sm p-0 text-compact font-normal text-fg-muted data-[hovered]:bg-transparent data-[hovered]:text-fg data-[hovered]:underline"
+											className="h-auto rounded-sm p-0 text-display-large font-medium tracking-wide text-fg-muted data-[hovered]:bg-transparent data-[hovered]:text-fg"
 										>
 											{crumb.label}
 										</Button>
@@ -264,23 +291,27 @@ export function BrandPageHeader({
 								</span>
 							))}
 						</nav>
+					) : parentLink ? (
+						// gs "title to go back". MERGE NOTE: the breadcrumb is a NAV LANDMARK,
+						// not part of the <h1> — a page title should not contain its own parent
+						// link. #25 still applies to the colour: the source's decorative grey is
+						// 2.10:1 on `surface`, and this row is a navigation LINK, so it keeps the
+						// readable `fg-muted` (5.98:1) rather than `fg-subtle`.
+						<nav
+							aria-label="Breadcrumb"
+							className="h-8 text-display-large font-medium leading-8 tracking-wide text-fg-muted transition-colors [&_a:hover]:text-fg [&_a]:block [&_a]:h-8 [&_a]:text-fg-muted [&_a]:no-underline [&_a]:outline-none [&_a:focus-visible]:underline"
+						>
+							{parentLink}
+						</nav>
 					) : null}
-					<DisplayHeading asChild className="tracking-tight">
-						<HeadingTag>
-							{parentLink ? (
-								// gs "title to go back": muted clickable parent line above the title.
-								// `[&_a]` styles the nested router <Link> (anchor) without @app/ui
-								// importing the router.
-								<>
-									<span className="text-fg-subtle transition-colors [&_a:hover]:text-fg [&_a]:text-fg-subtle [&_a]:no-underline [&_a]:outline-none [&_a:focus-visible]:underline">
-										{parentLink}
-									</span>
-									<br />
-								</>
-							) : null}
-							{greeting}
-						</HeadingTag>
-					</DisplayHeading>
+					<div className="flex w-full min-w-0 items-start overflow-visible">
+						<DisplayHeading
+							asChild
+							className="m-0 min-w-0 flex-1 overflow-visible break-words pb-0.5 tracking-[0]"
+						>
+							<HeadingTag>{greeting}</HeadingTag>
+						</DisplayHeading>
+					</div>
 				</div>
 
 				{cta ? (
@@ -289,8 +320,8 @@ export function BrandPageHeader({
 						className={
 							[
 								mobileCtaDocked
-									? 'fixed inset-x-0 bottom-0 z-40 min-w-0 px-3 pb-mobile-cta-bottom md:static md:inset-auto md:z-auto md:h-full md:p-0'
-									: 'h-full min-w-0',
+									? 'fixed inset-x-0 bottom-0 z-40 min-w-0 px-3 pb-mobile-cta-bottom md:static md:inset-auto md:col-start-2 md:row-[1/-1] md:z-auto md:flex md:h-full md:max-w-full md:items-stretch md:justify-end md:self-stretch md:p-0'
+									: 'min-w-0 md:col-start-2 md:row-[1/-1] md:flex md:h-full md:max-w-full md:items-stretch md:justify-end md:self-stretch',
 								expanded ? 'hidden' : '',
 							].join(' ')
 						}
@@ -298,7 +329,7 @@ export function BrandPageHeader({
 						{renderedCta}
 					</div>
 				) : ctaLabel ? (
-					<div className="shrink-0">
+					<div className="shrink-0 md:col-start-2 md:row-[1/-1] md:flex md:items-start md:justify-end">
 						{hasExpandable ? (
 							<Button
 								onPress={() => setExpanded(!expanded)}

package/src/components/button.tsx

@@ -15,15 +15,29 @@ export const Button = uic(RACButton, {
 	baseClass:
 		'inline-flex items-center justify-center gap-2 rounded-full text-compact leading-4 transition-all duration-200 ease-in-out ' +
 		'outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2 ' +
-		'data-[disabled]:opacity-50 data-[disabled]:pointer-events-none ' +
-		'data-[pending]:opacity-70 data-[pending]:cursor-progress',
+		// Inactive states (disabled / pending) soften the LABEL ONLY and leave every
+		// variant on its own surface. Two reasons:
+		//   - fading the whole control (`opacity-*`) blends the label into the parent
+		//     surface and drops it below WCAG AA;
+		//   - repainting every variant onto one muted surface makes a disabled button
+		//     indistinguishable from a hovered one (`secondary`/`ghost` both hover to
+		//     `surface-muted`) and strips the brand fill off a submitting primary CTA.
+		// `text-fg/60` is measured over surface / surface-card / surface-muted in both
+		// themes by packages/tokens `contrast.test.ts`; variants whose ink or surface
+		// differs override it below.
+		'data-[disabled]:text-fg/60 data-[disabled]:pointer-events-none ' +
+		'data-[pending]:text-fg/60 data-[pending]:cursor-progress',
 	variants: {
 		variant: {
 			// primary (gs `_primary`): base brand-primary (#0d0d0d light / brand-green on
 			// dark) → hover neutral-600 (#333333) + `0 0 5px rgba(0,0,0,.5)` shadow →
 			// active back to brand-primary (no shadow).
+			// Keeps the brand fill while inactive — a submitting CTA has to stay the
+			// primary action next to a disabled `secondary` Cancel — so it softens the
+			// INVERTED ink instead of the base one.
 			primary:
-				'bg-brand-primary text-fg-inverted hover:bg-neutral-600 hover:shadow-[0_0_5px_0_rgba(0,0,0,0.5)] data-[pressed]:bg-brand-primary data-[pressed]:shadow-none',
+				'bg-brand-primary text-fg-inverted hover:bg-neutral-600 hover:shadow-[0_0_5px_0_rgba(0,0,0,0.5)] data-[pressed]:bg-brand-primary data-[pressed]:shadow-none ' +
+				'data-[disabled]:text-fg-inverted/70 data-[pending]:text-fg-inverted/70',
 			// secondary: #f7f6f2 (surface-card) + 1px #eceae1 (border); hover bg #eceae1
 			// (surface-muted) + border #aba89c (fg-subtle); active bg #eceae1.
 			secondary:
@@ -31,7 +45,16 @@ export const Button = uic(RACButton, {
 			// ghost: transparent → hover/active #eceae1 (surface-muted).
 			ghost: 'bg-transparent text-fg hover:bg-surface-muted data-[pressed]:bg-surface-muted',
 			// destructive: #ef4444 → danger token; hover/active dim via opacity (gs parity).
-			destructive: 'bg-danger text-danger-fg hover:opacity-90 data-[pressed]:opacity-80',
+			// Enabled white-on-danger is only ~4.8:1, so softening that ink would fail AA
+			// — an inactive destructive drops the red (it no longer affords the action)
+			// and falls back to the base muted ink on `surface-muted`. That pill is
+			// invisible on a `surface-muted` panel, so it outlines itself with an INSET
+			// shadow — a real border would resize the enabled button, and a `ring-*`
+			// would fight the focus ring a pending (still focusable) button can show.
+			destructive:
+				'bg-danger text-danger-fg hover:opacity-90 data-[pressed]:opacity-80 ' +
+				'data-[disabled]:bg-surface-muted data-[disabled]:shadow-[inset_0_0_0_1px_var(--color-border-muted)] ' +
+				'data-[pending]:bg-surface-muted data-[pending]:shadow-[inset_0_0_0_1px_var(--color-border-muted)]',
 		},
 		size: {
 			// gs sizes: PADDING ONLY (spacing-2/4, 3/6, 4/8) — text is a fixed 13px/400

package/src/components/combobox.tsx

@@ -91,7 +91,7 @@ export const ComboBox = <T extends object>({
 					<SearchField aria-label={typeof label === 'string' ? label : 'Search'}>
 						<RACInput
 							placeholder={placeholder}
-							className="w-full border-0 bg-transparent p-0 text-display font-medium text-fg outline-none placeholder:text-fg-subtle"
+							className="w-full border-0 bg-transparent p-0 text-display font-medium text-fg outline-none placeholder:text-fg-muted"
 						/>
 					</SearchField>
 					<ListBox

package/src/components/compact-action-button.examples.tsx

@@ -0,0 +1,7 @@
+import { CompactActionButton } from './compact-action-button'
+export const examples = {
+	default: () => <CompactActionButton>Create Task</CompactActionButton>,
+	variants: () => <><CompactActionButton variant="linear">Cancel</CompactActionButton><CompactActionButton>Mark done</CompactActionButton></>,
+	states: () => <><CompactActionButton isDisabled>Create Task</CompactActionButton><CompactActionButton variant="linear" isDisabled>Cancel</CompactActionButton><CompactActionButton isPending>Marking...</CompactActionButton></>,
+}
+export const meta = { category: 'Primitives', description: 'Compact source Manager actions with primary/linear emphasis, keyboard focus and disabled states.' }

package/src/components/compact-action-button.tsx

@@ -0,0 +1,21 @@
+import { Button as AriaButton } from 'react-aria-components'
+import { uic } from '../utils/uic'
+
+export const COMPACT_ACTION_VARIANTS = ['primary', 'linear'] as const
+export type CompactActionVariant = (typeof COMPACT_ACTION_VARIANTS)[number]
+
+/** Compact Manager action; separate from the larger primitive dialog actions.
+ * Same semantic palette as Button / DialogActionButton. The hover shadow is the
+ * literal Button already uses — no shadow token covers a button lift, and the two
+ * must match. */
+export const CompactActionButton = uic(AriaButton, {
+	displayName: 'CompactActionButton',
+	baseClass: 'inline-flex items-center justify-center rounded-full px-3.5 py-1 text-compact font-normal leading-[normal] cursor-pointer transition-all 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 ' +
+		'data-[hovered]:shadow-[0_0_5px_0_rgba(0,0,0,0.5)] data-[pressed]:shadow-none data-[disabled]:shadow-none data-[disabled]:cursor-not-allowed',
+	variants: { variant: {
+		primary: 'border-0 bg-brand-primary text-fg-inverted data-[hovered]:bg-neutral-600 data-[pressed]:bg-brand-primary data-[disabled]:bg-fg-subtle',
+		linear: 'border border-brand-primary bg-transparent text-brand-primary data-[hovered]:bg-surface-muted data-[pressed]:bg-transparent data-[disabled]:border-fg-subtle data-[disabled]:text-fg-subtle',
+	} },
+	defaultVariants: { variant: 'primary' },
+})

package/src/components/compact-settings-dialog.examples.tsx

@@ -0,0 +1,15 @@
+import { useState } from 'react'
+import { Button } from './button'
+import { CompactSettingsDialog } from './compact-settings-dialog'
+
+function Example({ pending = false }: { pending?: boolean }) {
+	const [open, setOpen] = useState(false)
+	return <>
+		<Button onPress={() => setOpen(true)}>Manage members</Button>
+		<CompactSettingsDialog isOpen={open} onOpenChange={setOpen} isPending={pending} title="Manage project members" description="Add or remove collaborators for this project." closeLabel="Close">
+			<p>No members in this category.</p>
+		</CompactSettingsDialog>
+	</>
+}
+export const examples = { default: () => <Example />, pending: () => <Example pending /> }
+export const meta = { category: 'Composite', description: 'Intrinsic-height form modal with stacked title and description, responsive width, and pending dismissal lock.' }

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

@@ -0,0 +1,48 @@
+import { useId, type ReactNode } from 'react'
+import { Button } from './button'
+import { ModalDialog, ModalOverlay, ModalSurface } from './dialog'
+import { Heading } from './text'
+import { Button as AriaButton } from 'react-aria-components'
+import { uic } from '../utils/uic'
+
+export const MemberSelectionGrid = uic('ul', { displayName: 'MemberSelectionGrid', baseClass: 'm-0 mt-8 grid list-none grid-cols-1 gap-3 p-0 max-[767px]:gap-2 min-[640px]:grid-cols-2 min-[768px]:grid-cols-3 min-[1024px]:grid-cols-4' })
+export const TeamSelectionGrid = uic('ul', { displayName: 'TeamSelectionGrid', baseClass: 'm-0 mt-8 grid list-none grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-4 p-0' })
+export const MemberSelectionCard = uic(AriaButton, {
+	displayName: 'MemberSelectionCard',
+	baseClass: 'flex w-full items-center gap-3 rounded-lg border border-border bg-surface-card p-4 text-start text-fg outline-none transition-all duration-200 data-[hovered]:-translate-y-0.5 data-[hovered]:border-brand-primary data-[hovered]:shadow-[0_4px_12px_rgba(0,0,0,0.1)] aria-pressed:border-brand-primary aria-pressed:bg-surface-muted data-[disabled]:cursor-default data-[disabled]:opacity-60 data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring',
+})
+export const TeamSelectionCard = uic(AriaButton, {
+	displayName: 'TeamSelectionCard',
+	baseClass: 'block w-full rounded-md border-2 border-border bg-transparent p-4 text-start text-fg outline-none transition-all duration-200 data-[hovered]:border-brand-primary aria-pressed:border-brand-primary aria-pressed:bg-surface-muted data-[disabled]:cursor-default data-[disabled]:opacity-60 data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring',
+})
+export const MemberSelectionInfo = uic('span', { displayName: 'MemberSelectionInfo', baseClass: 'min-w-0 flex-1' })
+export const MemberSelectionName = uic('span', { displayName: 'MemberSelectionName', baseClass: 'mb-1 block text-heading5 font-medium text-fg' })
+export const MemberSelectionEmail = uic('span', { displayName: 'MemberSelectionEmail', baseClass: 'block text-compact font-normal text-fg-subtle' })
+export const TeamSelectionName = uic('span', { displayName: 'TeamSelectionName', baseClass: 'mb-1 block font-medium text-fg' })
+export const TeamSelectionMeta = uic('span', { displayName: 'TeamSelectionMeta', baseClass: 'block text-small font-normal text-fg-subtle' })
+
+/** Intrinsic-height form surface. The tall settings and catalog surfaces remain separate. */
+export function CompactSettingsDialog({ isOpen, onOpenChange, isPending = false, title, description, closeLabel, children }: {
+	isOpen: boolean
+	onOpenChange: (open: boolean) => void
+	isPending?: boolean
+	title: string
+	description: string
+	closeLabel: string
+	children: ReactNode
+}) {
+	const titleId = useId()
+	const descriptionId = useId()
+	return <ModalOverlay className="p-0" isOpen={isOpen} onOpenChange={open => { if (!isPending) onOpenChange(open) }} isDismissable={!isPending} isKeyboardDismissDisabled={isPending}>
+		<ModalSurface className="relative w-[90vw] max-w-180 max-h-[85vh] overflow-y-auto p-5 min-[768px]:max-[1023px]:w-[85vw] max-[767px]:w-[calc(100vw-6*var(--spacing))] max-[767px]:max-w-[calc(100vw-6*var(--spacing))] max-[767px]:max-h-[calc(100vh-6*var(--spacing))]">
+			<ModalDialog aria-labelledby={titleId} aria-describedby={descriptionId} className="outline-none">
+				<Heading id={titleId} level="1" className="m-0 mb-4 max-w-5/6 tracking-normal">{title}</Heading>
+				<p id={descriptionId} className="m-0 mb-6 max-w-5/6 text-small font-normal text-fg-workflow-muted">{description}</p>
+				<div className="mt-4">{children}</div>
+				<Button variant="ghost" aria-label={closeLabel} isDisabled={isPending} onPress={() => onOpenChange(false)} className="absolute end-4 top-3.5 h-8 w-8 rounded-md p-0 text-fg-subtle max-[767px]:end-3">
+					<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18" /></svg>
+				</Button>
+			</ModalDialog>
+		</ModalSurface>
+	</ModalOverlay>
+}