@podoba/react 0.0.32 → 0.0.35

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@podoba/react",
-	"version": "0.0.32",
+	"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.32",
-		"@podoba/tailwind": "^0.0.32",
+		"@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>
+}