@podoba/react 0.0.32 → 0.0.35

package/src/components/request-changes-modal.tsx

@@ -11,12 +11,16 @@
 // follow-up `changes` task returned by the command.
 //
 // a11y: the textarea is label-associated (htmlFor/id), marked `required` +
-// `aria-invalid` while empty; the server error is role="alert"; confirm shows a
-// pending state and is disabled while in flight or while the note is empty.
+// the server error is role="alert"; confirm shows a pending state and is disabled
+// while in flight or while the note is empty. The note is marked `isRequired`
+// (→ aria-required), NOT aria-invalid-while-empty as the raw textarea used to be:
+// an untouched required field is incomplete, not invalid, and RAC coupling
+// `isInvalid` to the danger ring would alarm the field before anyone typed.
 
-import { useId, useState } from 'react'
+import { useLayoutEffect, useRef, useState } from 'react'
 import { Button } from './button'
 import { Dialog } from './dialog'
+import { Textarea } from './textarea'
 
 /** Strings the request-changes modal renders — supplied by the app (i18n). */
 export interface RequestChangesModalLabels {
@@ -63,14 +67,24 @@ export function RequestChangesModal({
 	labels,
 	'data-testid': testId,
 }: RequestChangesModalProps): React.ReactNode {
-	const noteId = useId()
 	// CONTROLLED textarea: the confirm button's disabled state depends on whether
 	// the note is non-empty, so the value drives dependent UI (unlike approve).
 	const [note, setNote] = useState('')
+	const noteRootRef = useRef<HTMLDivElement>(null)
 	const isEmpty = note.trim().length === 0
 	const canConfirm = !isEmpty && !isPending
 
+	useLayoutEffect(() => {
+		if (!isOpen || isPending) return
+		noteRootRef.current?.querySelector('textarea')?.focus()
+		const frame = requestAnimationFrame(() => {
+			noteRootRef.current?.querySelector('textarea')?.focus()
+		})
+		return () => cancelAnimationFrame(frame)
+	}, [isOpen, isPending])
+
 	const handleConfirm = (): void => {
+		if (isPending) return
 		const trimmed = note.trim()
 		if (trimmed.length === 0) return
 		onConfirm(trimmed)
@@ -82,27 +96,30 @@ export function RequestChangesModal({
 			data-testid={testId ?? 'request-changes-modal'}
 			isOpen={isOpen}
 			onOpenChange={(open) => {
+				if (isPending) return
 				if (!open) setNote('')
 				onOpenChange(open)
 			}}
+			isDismissable={!isPending}
+			closeLabel={labels.cancel}
 		>
 			<div className="flex flex-col gap-3">
 				<p className="text-small text-fg-muted">{labels.body}</p>
-				<label htmlFor={noteId} className="text-small font-medium text-fg">
-					{labels.noteLabel}
-				</label>
-				<textarea
-					id={noteId}
-					data-testid="request-changes-note"
-					value={note}
-					onChange={(event) => setNote(event.target.value)}
-					maxLength={10_000}
-					rows={4}
-					required
-					aria-invalid={isEmpty ? true : undefined}
-					placeholder={labels.notePlaceholder}
-					className="w-full rounded-md border border-border bg-surface px-3 py-2 text-small text-fg outline-none transition-colors placeholder:text-fg-muted focus-visible:ring-2 focus-visible:ring-ring"
-				/>
+				<div ref={noteRootRef}>
+					<Textarea
+						autoFocus
+						appearance="filled"
+						label={labels.noteLabel}
+						data-testid="request-changes-note"
+						value={note}
+						isDisabled={isPending}
+						onChange={setNote}
+						maxLength={10_000}
+						rows={4}
+						isRequired
+						placeholder={labels.notePlaceholder}
+					/>
+				</div>
 				{error ? (
 					<p data-testid="request-changes-error" role="alert" className="text-small text-danger">
 						{error}

package/src/components/rich-text-editor.tsx

@@ -145,7 +145,7 @@ export function RichTextEditor({
 				</div>
 				<div
 					ref={ref}
-					className="prose prose-sm max-w-none px-4 py-3.5 text-small leading-relaxed text-fg outline-none empty:before:text-fg-subtle empty:before:content-[attr(data-placeholder)]"
+					className="prose prose-sm max-w-none px-4 py-3.5 text-small leading-relaxed text-fg outline-none empty:before:text-fg-muted empty:before:content-[attr(data-placeholder)]"
 					style={{ minHeight: bodyMinHeight }}
 					contentEditable
 					suppressContentEditableWarning

package/src/components/select.examples.tsx

@@ -0,0 +1,17 @@
+import { Select, SelectItem } from './select'
+import type { FieldAppearance } from './field-appearance'
+
+function Example({ appearance = 'outlined', disabled = false, invalid = false }: { appearance?: FieldAppearance; disabled?: boolean; invalid?: boolean }) {
+	return <Select appearance={appearance} label="Content behavior" placeholder="Choose behavior" isDisabled={disabled}
+		isInvalid={invalid} errorMessage="Choose a behavior." defaultSelectedKey={invalid ? undefined : 'shared'}>
+		<SelectItem id="shared">Shared across outputs</SelectItem>
+		<SelectItem id="separate">Edited separately per output</SelectItem>
+		<SelectItem id="unavailable" isDisabled>Unavailable behavior</SelectItem>
+	</Select>
+}
+export const examples = {
+	default: () => <Example />,
+	variants: () => <><Example /><Example appearance="filled" /></>,
+	states: () => <><Example appearance="filled" disabled /><Example appearance="filled" invalid /></>,
+}
+export const meta = { category: 'Form', description: 'Outlined and Manager-style filled selects with keyboard/typeahead navigation. Filled options retain a keyboard outline and larger narrow-screen hit targets for accessibility.' }

package/src/components/select.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react'
+import { createContext, useContext, type CSSProperties, type ReactNode } from 'react'
 import {
 	Button as RACButton,
 	FieldError,
@@ -14,6 +14,12 @@ import {
 } from 'react-aria-components'
 import { uic } from '../utils/uic'
 import { useInFocusOverlay } from './focus-context'
+import type { FieldAppearance } from './field-appearance'
+
+const SelectAppearanceContext = createContext<FieldAppearance>('outlined')
+const filledPopoverStyle: CSSProperties & { '--select-popup-max-width': string } = {
+	'--select-popup-max-width': 'calc(100vw - var(--spacing) * 6)',
+}
 
 /**
  * Select — accessible dropdown built on React Aria Components `Select`.
@@ -29,32 +35,77 @@ import { useInFocusOverlay } from './focus-context'
  */
 const SelectTrigger = uic(RACButton, {
 	displayName: 'SelectTrigger',
-	// gs source control geometry (58px tall, 20px inline padding, 8px radius) with
-	// the shared bordered fill: gs draws it borderless on cream, but our Card is
-	// also surface-card and dark theme collapses surface-card onto surface, so a
-	// borderless cream trigger disappears. White fill + border keeps it visible and
-	// consistent with the other form controls; hover darkens the border.
+	// Filled follows the Manager's borderless control; outlined preserves the
+	// existing default for consumers which have not opted into that appearance.
 	baseClass:
-		'flex h-control-tall w-full items-center justify-between gap-2.5 rounded-lg border border-border bg-surface px-5 ' +
-		'text-small text-fg outline-none transition-colors ' +
+		'flex w-full items-center justify-between gap-2.5 rounded-lg px-5 text-small text-fg outline-none transition-colors',
+	variants: {
+		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 ' +
+				'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 ' +
 		'data-[hovered]:border-fg-subtle ' +
 		'data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring ' +
 		'group-data-[invalid]:border-danger group-data-[invalid]:ring-2 group-data-[invalid]:ring-danger ' +
 		'data-[disabled]:bg-surface-muted data-[disabled]:opacity-60 data-[disabled]:pointer-events-none',
+		},
+	},
+	defaultVariants: { appearance: 'outlined' },
 })
 
-export const SelectItem = uic(ListBoxItem, {
+const StyledSelectItem = uic(ListBoxItem, {
 	displayName: 'SelectItem',
-	// gs item: 0/20px padding (px-5, no vertical pad), 6px radius, selected =
-	// medium weight. We add a `surface-muted` focus background (gs highlights with
-	// weight only) so keyboard focus stays clearly visible on the cream content.
+	// Filled highlights through weight, as in Manager. Retain a keyboard outline
+	// and larger narrow-screen hit targets as explicit accessibility exceptions.
 	baseClass:
-		'flex cursor-pointer select-none items-center rounded-md px-3 py-2 text-small text-fg outline-none ' +
+		'flex cursor-pointer select-none items-center rounded-md text-small text-fg outline-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',
+	variants: {
+		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',
+			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',
-}) as (props: ListBoxItemProps) => ReactNode
+		},
+	},
+	defaultVariants: { appearance: 'outlined' },
+}) as (props: ListBoxItemProps & { appearance?: FieldAppearance }) => ReactNode
+
+export const SelectItem = (props: ListBoxItemProps): ReactNode => {
+	const appearance = useContext(SelectAppearanceContext)
+	if (appearance === 'outlined') return <StyledSelectItem {...props} appearance={appearance} />
+	// Manager's ItemText is a single ellipsized line. Keep the full value in the
+	// label/textValue so keyboard search and assistive technology don't see a cut-off label.
+	const { children, textValue, ...rest } = props
+	return <StyledSelectItem {...rest} appearance={appearance} textValue={textValue ?? (typeof children === 'string' ? children : undefined)}>
+		{state => <Text slot="label" className="min-w-0 truncate">{typeof children === 'function' ? children(state) : children}</Text>}
+	</StyledSelectItem>
+}
+
+const SelectListBox = uic(ListBox, {
+	displayName: 'SelectListBox',
+	baseClass: 'flex flex-col overflow-auto overscroll-contain outline-none',
+	variants: { appearance: { outlined: 'max-h-72 gap-0.5 p-1', filled: 'gap-3 px-0 py-5' } },
+	defaultVariants: { appearance: 'outlined' },
+})
+const SelectPopover = uic(Popover, {
+	displayName: 'SelectPopover',
+	baseClass: 'overflow-hidden rounded-lg bg-surface-card shadow-lg',
+	variants: { appearance: {
+		outlined: 'min-w-(--trigger-width)',
+		filled: 'w-(--trigger-width) max-w-(--select-popup-max-width)',
+	} },
+	defaultVariants: { appearance: 'outlined' },
+})
 
 export type SelectProps<T extends object> = RACSelectProps<T> & {
+	appearance?: FieldAppearance
+	/** Keep the accessible label without reserving an empty label row. */
+	isLabelHidden?: boolean
 	/** Visible label (required for accessibility). */
 	label: ReactNode
 	description?: ReactNode
@@ -80,14 +131,16 @@ export const Select = <T extends object>({
 	children,
 	rootClassName,
 	triggerClassName,
+	appearance = 'outlined',
+	isLabelHidden = false,
 	...props
 }: SelectProps<T>) => {
 	// In a focus overlay, show the options inline (seamless) instead of a popover.
 	const inFocus = useInFocusOverlay()
 	const listbox = (
-		<ListBox className="flex max-h-72 flex-col gap-0.5 overflow-auto overscroll-contain p-1 outline-none">
+		<SelectListBox appearance={appearance} style={appearance === 'filled' ? { maxHeight: 'inherit' } : undefined}>
 			{children}
-		</ListBox>
+		</SelectListBox>
 	)
 	const desc = description ? (
 		<Text slot="description" className="text-label text-fg-muted">
@@ -97,8 +150,9 @@ export const Select = <T extends object>({
 	const err = <FieldError className="text-label text-danger">{errorMessage}</FieldError>
 
 	return (
+		<SelectAppearanceContext.Provider value={appearance}>
 		<RACSelect {...props} placeholder={placeholder} className={`group flex flex-col gap-3 ${rootClassName ?? ''}`}>
-			<Label className="text-panel-heading font-medium text-fg">{label}</Label>
+			<Label className={isLabelHidden ? 'sr-only' : 'text-panel-heading font-medium text-fg'}>{label}</Label>
 			{inFocus ? (
 				<>
 					{listbox}
@@ -107,7 +161,7 @@ export const Select = <T extends object>({
 				</>
 			) : (
 				<>
-					<SelectTrigger className={triggerClassName}>
+					<SelectTrigger className={triggerClassName} appearance={appearance}>
 						<SelectValue className="data-[placeholder]:text-fg-muted" />
 						{/* gs chevron: 9.5px caret, dark (neutral-400 → fg), non-interactive. */}
 						<svg
@@ -123,13 +177,15 @@ export const Select = <T extends object>({
 					</SelectTrigger>
 					{desc}
 					{err}
-					{/* Cream fill, 8px radius, shadow-lg, NO border. 4px inset so each option's
-					    highlight sits as a padded pill; small gap for an even list rhythm. */}
-					<Popover className="min-w-[var(--trigger-width)] overflow-hidden rounded-lg bg-surface-card shadow-lg">
+					{/* Filled uses the trigger width and Manager's 4px popup offset. */}
+					<SelectPopover appearance={appearance} offset={appearance === 'filled' ? 4 : undefined}
+						containerPadding={appearance === 'filled' ? 12 : undefined}
+						style={appearance === 'filled' ? filledPopoverStyle : undefined}>
 						{listbox}
-					</Popover>
+					</SelectPopover>
 				</>
 			)}
 		</RACSelect>
+		</SelectAppearanceContext.Provider>
 	)
 }

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

@@ -0,0 +1,44 @@
+import { useState } from 'react'
+import { Button } from './button'
+import { Input } from './input'
+import { WizardForm, WizardBrief, WizardFormDialog, ProductionSettingsDialog, ProductionSettingsAction, SettingsDialogDisclosure, SettingsDialogProductionColumns } from './settings-dialog-surface'
+import { DialogActionButton } from './dialog-action-button'
+import { SettingsDialogSurface, SettingsDialogIdentity, SettingsDialogAction, SettingsDialogEmphasis, SettingsDialogDescription, SettingsDialogLabel, SettingsDialogHint, type SettingsDialogVariant } from './settings-dialog-surface'
+
+function Example({ variant = 'create', pending = false, error = false, wide = false }: { variant?: SettingsDialogVariant; pending?: boolean; error?: boolean; wide?: boolean }) {
+	const [open, setOpen] = useState(false)
+	const Action = variant === 'basic' ? DialogActionButton : SettingsDialogAction
+	return <>
+		<Button onPress={() => setOpen(true)}>Open {variant} dialog{pending ? ' (pending)' : error ? ' (error)' : ''}</Button>
+		<SettingsDialogSurface variant={variant} isOpen={open} onOpenChange={setOpen} isPending={pending}
+			isWide={wide} description={variant === 'csv' ? 'Review the column-to-field mapping before importing.' : undefined}
+			label="Settings example" closeLabel="Close settings"
+			title={variant === 'basic' ? <><SettingsDialogEmphasis>{'Set the project name\nand describe '}</SettingsDialogEmphasis>the brief.</> : variant === 'catalog' ? <>Choose an output template<br />to add to this section.</> : <>Create <span className="text-fg">a new section</span> for your <span className="text-fg">production workspace</span>.</>}
+			footer={<><Action variant="secondary" isDisabled={pending} onPress={() => setOpen(false)}>Cancel</Action><Action isPending={pending} isDisabled={pending}>Save</Action></>}
+		>
+			{variant === 'basic' ? <SettingsDialogDescription><SettingsDialogLabel>Basic information</SettingsDialogLabel><SettingsDialogHint>Keep the project name clear and add a short brief so the team understands what this work is about.</SettingsDialogHint></SettingsDialogDescription> : null}
+			<SettingsDialogIdentity><Input appearance="filled" label="Section name" defaultValue="Spring campaign" isDisabled={pending} /></SettingsDialogIdentity>
+			{error ? <p role="alert" className="text-small text-danger">The changes could not be saved. Please try again.</p> : null}
+		</SettingsDialogSurface>
+	</>
+}
+function ProductionExample() {
+	const [open, setOpen] = useState(false)
+	return <><Button onPress={() => setOpen(true)}>Open production settings</Button><ProductionSettingsDialog isOpen={open} onOpenChange={setOpen} prefix="Template settings" title="Poster" description="Configure production details." closeLabel="Close settings" preview={<span>Artwork preview</span>} footer={<><ProductionSettingsAction variant="secondary" onPress={() => setOpen(false)}>Close</ProductionSettingsAction><ProductionSettingsAction isDisabled>Save</ProductionSettingsAction></>}><SettingsDialogDisclosure title="General"><Input label="Name" appearance="filled" defaultValue="Poster" /></SettingsDialogDisclosure></ProductionSettingsDialog></>
+}
+function WizardExample({ expanded = false, pending = false }: { expanded?: boolean; pending?: boolean }) {
+	const [open, setOpen] = useState(false)
+	return <><Button onPress={() => setOpen(true)}>Open wizard {expanded ? 'catalog' : 'form'}{pending ? ' pending' : ''}</Button><WizardFormDialog isOpen={open} onOpenChange={setOpen} isExpanded={expanded} isPending={pending} closeLabel="Close wizard" title={<>Create a <SettingsDialogEmphasis>new preset</SettingsDialogEmphasis><br />and define its details.</>} footer={<><Button variant="secondary" isDisabled={pending} onPress={() => setOpen(false)}>Cancel</Button><Button isPending={pending} isDisabled={pending}>Next</Button></>}><WizardForm><Input label="Name" appearance="filled" isDisabled={pending} defaultValue="Campaign" /><WizardBrief label="Scenario brief">Prepare the selected templates and shared content.</WizardBrief></WizardForm></WizardFormDialog></>
+}
+export const examples = {
+	wizard: () => <WizardExample />,
+	wizardSizes: () => <><WizardExample /><WizardExample expanded /></>,
+	wizardPending: () => <WizardExample pending />,
+	production: () => <ProductionExample />,
+	default: () => <Example />,
+	productionColumns: () => <SettingsDialogProductionColumns><Input label="Material" appearance="filled" /><Input label="Surface finish" appearance="filled" /></SettingsDialogProductionColumns>,
+	disclosures: () => <><SettingsDialogDisclosure title="Settings" description="Campaign templates"><Input label="Name" appearance="filled" defaultValue="Poster" /></SettingsDialogDisclosure><SettingsDialogDisclosure title="Print" description="Available for Print templates" defaultExpanded={false}><Input label="Material" appearance="filled" isDisabled /></SettingsDialogDisclosure></>,
+	variants: () => <><Example variant="create" /><Example variant="edit" /><Example variant="catalog" /><Example variant="csv" /><Example variant="csv" wide /><Example variant="basic" /></>,
+	states: () => <><Example pending /><Example error /><Example variant="basic" pending /><Example variant="basic" error /></>,
+}
+export const meta = { category: 'Layout', description: 'Responsive settings and catalog frames with fixed headings/actions and a scrolling form body.' }

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

@@ -0,0 +1,240 @@
+import { createContext, useContext, useEffect, useId, useState, type ComponentProps, type CSSProperties, type ReactNode, type RefObject } from 'react'
+import { Button } from './button'
+import { Button as AriaButton, Disclosure as AriaDisclosure, DisclosurePanel as AriaDisclosurePanel } from 'react-aria-components'
+import { ModalDialog, ModalOverlay, ModalSurface } from './dialog'
+import { DisplayHeading, Heading } from './text'
+import { uic } from '../utils/uic'
+
+export const SETTINGS_DIALOG_VARIANTS = ['create', 'edit', 'catalog', 'csv', 'basic'] as const
+export type SettingsDialogVariant = (typeof SETTINGS_DIALOG_VARIANTS)[number]
+
+const LayoutContext = createContext({ variant: 'edit' as SettingsDialogVariant, compact: false })
+const Panel = uic(ModalSurface, { displayName: 'SettingsDialogPanel', baseClass: 'box-border flex flex-col overflow-hidden p-0' })
+const Layout = uic(ModalDialog, { displayName: 'SettingsDialogLayout', baseClass: 'relative flex min-h-0 flex-1 flex-col outline-none' })
+const Container = uic('div', { displayName: 'SettingsDialogContainer', baseClass: 'box-border mx-auto w-full' })
+const ScrollBody = uic('div', { displayName: 'SettingsDialogScrollBody', baseClass: 'min-h-0 flex-1 overflow-y-auto' })
+const Body = uic('div', { displayName: 'SettingsDialogBody', baseClass: 'flex w-full flex-col' })
+const Group = uic('div', { displayName: 'SettingsDialogGroup', baseClass: 'flex min-w-0 flex-col' })
+const Columns = uic('div', { displayName: 'SettingsDialogColumns', baseClass: 'grid' })
+
+/** Label-driven settings/catalog envelope. State, requests and selections belong to callers.
+ * Widths use the viewport-sized, unpadded overlay; rem caps use the shared spacing scale.
+ * Create and edit deliberately have different geometry, including below the 900px breakpoint.
+ */
+export function SettingsDialogSurface({ variant, isOpen, onOpenChange, isPending = false,
+	label, title, closeLabel, children, footer, filters, bodyRef, bodyTestId, description, describedBy, isWide = false, headerBottomPadding = false,
+}: {
+	variant: SettingsDialogVariant
+	isOpen: boolean
+	onOpenChange: (open: boolean) => void
+	isPending?: boolean
+	label?: string
+	title: ReactNode
+	description?: ReactNode
+	/** IDs of caller-owned concise descriptions, e.g. a dynamic calendar hint. */
+	describedBy?: string
+	/** CSV switches from an upload frame to a wide data preview without remounting. */
+	isWide?: boolean
+	/** Adds the source Basic Information title-to-body separation without changing other basic dialogs. */
+	headerBottomPadding?: boolean
+	closeLabel: string
+	children: ReactNode
+	footer: ReactNode
+	filters?: ReactNode
+	bodyRef?: RefObject<HTMLDivElement | null>
+	bodyTestId?: string
+}) {
+	const titleId = useId()
+	const descriptionId = 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 create = variant === 'create'
+	const catalog = variant === 'catalog'
+	const csv = variant === 'csv'
+	const basic = variant === 'basic'
+	const containerClass = csv && isWide ? compact ? 'px-5' : 'px-6' : catalog ? '' : compact
+		? create ? 'px-(--settings-dialog-gutter-inline)' : 'px-5'
+		: create ? 'max-w-200 px-(--settings-dialog-gutter-inline)' : 'max-w-192 px-6'
+	// Source uses spacing8 × .6 (spacing6 × .6 on narrow screens). Tailwind's
+	// numeric spacing utilities do not emit .8/.6 steps, so derive a named value
+	// from the shared spacing token rather than silently emitting no padding.
+	const layoutStyle: CSSProperties & { '--settings-dialog-gutter-inline': string } = {
+		letterSpacing: 0,
+		'--settings-dialog-gutter-inline': compact ? 'calc(var(--spacing) * 3.6)' : 'calc(var(--spacing) * 4.8)',
+	}
+	const panelClass = compact
+		? catalog || (csv && isWide) ? 'h-23/25 w-24/25' : 'h-23/25 w-47/50'
+		: catalog ? 'h-9/10 max-h-324 w-9/10 max-w-432'
+		: csv && isWide ? 'h-9/10 max-h-264 w-9/10 max-w-432'
+		: create ? 'h-9/10 max-h-288 w-1/2 max-w-288' : 'h-9/10 max-h-264 w-9/10 max-w-204'
+	const layoutClass = catalog ? compact ? 'gap-3 p-4' : 'gap-4 p-6'
+		: csv || basic ? compact ? 'gap-8 py-6' : 'gap-10 py-10'
+		: create ? compact ? 'gap-4 py-7.5' : 'gap-5 py-10'
+		: compact ? 'py-6' : 'py-10'
+	const bodyClass = catalog ? '' : basic ? 'gap-8' : create ? compact ? 'gap-4' : 'gap-5' : compact ? 'gap-8' : 'gap-10'
+	return <LayoutContext.Provider value={{ variant, compact }}>
+		<ModalOverlay className="p-0" isOpen={isOpen} onOpenChange={open => { if (!isPending) onOpenChange(open) }} isDismissable={!isPending} isKeyboardDismissDisabled={isPending}>
+			<Panel className={panelClass} data-settings-variant={variant} data-settings-compact={compact}>
+				<Layout aria-label={label} aria-labelledby={label ? undefined : titleId} aria-describedby={[description ? descriptionId : undefined, describedBy].filter(Boolean).join(' ') || undefined} className={layoutClass} style={layoutStyle}>
+					<Button variant="ghost" aria-label={closeLabel} isDisabled={isPending} onPress={() => onOpenChange(false)} className="absolute end-4 top-3.5 z-10 h-8 w-8 rounded-md p-0 text-fg-subtle">
+						<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>
+					<header className={catalog ? 'flex shrink-0 flex-col gap-2' : basic ? headerBottomPadding ? 'shrink-0 pb-4' : 'shrink-0' : create || csv ? 'shrink-0 pb-4' : 'shrink-0 pb-10 max-md:pb-8'}>
+						<Container className={containerClass}>
+							{catalog ? <Heading id={titleId} level="1" className="m-0 mb-4 max-w-5/6 whitespace-pre-line" style={{ letterSpacing: 0 }}>{title}</Heading>
+								: <DisplayHeading id={titleId} className={`m-0 whitespace-pre-line pb-0.5 text-fg-subtle ${create ? 'mb-4 max-w-5/6' : ''}`} style={{ letterSpacing: 0, ...(basic ? { maxWidth: '18ch' } : csv && isWide ? { maxWidth: '34ch' } : {}) }}>{title}</DisplayHeading>}
+							{description ? <p id={descriptionId} className="mb-0 mt-3 text-small font-normal text-fg-workflow-muted" style={{ maxWidth: '48ch' }}>{description}</p> : null}
+						</Container>
+						{filters ? <div className="w-full max-w-80">{filters}</div> : null}
+					</header>
+					<ScrollBody style={{ scrollbarGutter: 'stable' }}>
+						<Container className={containerClass}>
+							<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'}>
+						<Container className={containerClass}>
+							<div className={`flex justify-end ${csv || basic ? 'items-center gap-1' : variant === 'edit' ? 'gap-3' : 'gap-2'}`}>{footer}</div>
+						</Container>
+					</footer>
+				</Layout>
+			</Panel>
+		</ModalOverlay>
+	</LayoutContext.Provider>
+}
+
+/** Multi-step form/catalog envelope. Switching width preserves mounted drafts. */
+export const WizardForm = uic('form', { displayName: 'WizardForm', baseClass: 'flex flex-col gap-8' })
+const BriefText = uic('p', { displayName: 'WizardBriefText', baseClass: 'm-0 min-h-32 rounded-lg bg-surface-card p-4 text-small text-fg-workflow-muted' })
+export function WizardBrief({ label, children }: { label: ReactNode; children: ReactNode }) {
+	const id = useId()
+	return <Group className="gap-2" role="group" aria-labelledby={id}><SettingsDialogLabel id={id}>{label}</SettingsDialogLabel><BriefText>{children}</BriefText></Group>
+}
+
+export function WizardFormDialog({ isOpen, onOpenChange, isPending = false, isExpanded = false, title, closeLabel, children, footer }: {
+	isOpen: boolean; onOpenChange: (open: boolean) => void; isPending?: boolean; isExpanded?: boolean
+	title: ReactNode; closeLabel: string; children: ReactNode; footer: ReactNode
+}) {
+	const titleId = useId()
+	return <ModalOverlay className="p-0" isOpen={isOpen} onOpenChange={open => { if (!isPending) onOpenChange(open) }} isDismissable={!isPending} isKeyboardDismissDisabled={isPending}>
+		<Panel data-wizard-expanded={isExpanded} className={`h-23/25 max-h-23/25 w-24/25 max-w-24/25 min-[901px]:h-9/10 min-[901px]:max-h-288 min-[901px]:w-9/10 ${isExpanded ? 'min-[901px]:max-w-432' : 'min-[901px]:max-w-204'}`}>
+			<Layout aria-labelledby={titleId} className="gap-8 py-6 min-[901px]:gap-10 min-[901px]:py-10">
+				<Button variant="ghost" aria-label={closeLabel} isDisabled={isPending} onPress={() => onOpenChange(false)} className="absolute end-4 top-3.5 z-10 h-8 w-8 rounded-md p-0 text-fg-subtle">
+					<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>
+				<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-subtle" 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>
+			</Layout>
+		</Panel>
+	</ModalOverlay>
+}
+
+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>
+}
+export function SettingsDialogDescription({ children }: { children: ReactNode }) {
+	const { variant } = useContext(LayoutContext)
+	return <Group className={variant === 'create' ? 'mt-2' : variant === 'basic' ? 'gap-1' : undefined}>{children}</Group>
+}
+export function SettingsDialogColumns({ children, metadata = false }: { children: ReactNode; metadata?: boolean }) {
+	const { variant, compact } = useContext(LayoutContext)
+	if (metadata) return <Columns className={`${compact ? 'grid-cols-1' : 'grid-cols-3'} gap-3`}>{children}</Columns>
+	return <Columns className={`${compact ? 'grid-cols-1' : 'grid-cols-2'} ${variant === 'create' ? compact ? 'gap-3' : 'gap-4' : 'gap-8'}`}>{children}</Columns>
+}
+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>
+}
+
+/** Two-column production metadata grid from the split settings family.
+ * Independent of SettingsDialogSurface's 900px breakpoint; this source uses1100px.
+ */
+export function SettingsDialogProductionColumns({ children }: { children: ReactNode }) {
+	const [compact, setCompact] = useState(() => typeof window !== 'undefined' && window.matchMedia('(max-width: 1100px)').matches)
+	useEffect(() => {
+		const media = window.matchMedia('(max-width: 1100px)')
+		const change = () => setCompact(media.matches)
+		change()
+		media.addEventListener('change', change)
+		return () => media.removeEventListener('change', change)
+	}, [])
+	return <Columns data-settings-production-columns className={`${compact ? 'grid-cols-1' : 'grid-cols-2'} min-w-0 gap-4`}>{children}</Columns>
+}
+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' })
+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>) {
+	const { variant } = useContext(LayoutContext)
+	return <Hint {...props} 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 } })
+
+const ProductionLayout = uic(ModalDialog, { displayName: 'ProductionSettingsLayout', baseClass: 'relative grid h-full min-h-0 w-full overflow-hidden outline-none' })
+const ProductionHeader = uic('header', { displayName: 'ProductionSettingsHeader', baseClass: 'flex shrink-0 flex-col items-start gap-4 px-8 pb-6 pt-8' })
+const ProductionTitle = uic('h1', { displayName: 'ProductionSettingsTitle', baseClass: 'm-0 max-w-132 text-display-large font-medium text-fg-muted', style: { letterSpacing: '-0.02em' } })
+const ProductionDescription = uic('p', { displayName: 'ProductionSettingsDescription', baseClass: 'm-0 max-w-132 text-body font-normal text-fg' })
+const ProductionFields = uic('div', { displayName: 'ProductionSettingsFields', baseClass: 'flex min-h-0 flex-col gap-6 px-8 pb-8' })
+const ProductionFooter = uic('footer', { displayName: 'ProductionSettingsFooter', baseClass: 'relative z-10 flex shrink-0 flex-wrap items-center gap-2 bg-surface px-8 pb-8 pt-4' })
+const ProductionPreview = uic('aside', { displayName: 'ProductionSettingsPreview', baseClass: 'relative grid min-h-0 min-w-0 place-items-center overflow-hidden p-10', style: { background: 'radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--color-surface) 8%, transparent) 0, transparent 42%), color-mix(in srgb, var(--color-fg) 84%, var(--color-surface))' } })
+const ProductionArtwork = uic('div', { displayName: 'ProductionSettingsArtwork', baseClass: 'min-h-0 min-w-0 overflow-hidden', style: { width: '80%', height: '80%' } })
+export const ProductionSettingsAction = uic(Button, { displayName: 'ProductionSettingsAction', baseClass: 'min-h-10 rounded-full px-6 text-body font-medium' })
+
+/** Wide production settings, not the content editor's independently tuned split. */
+export function ProductionSettingsDialog({ isOpen, onOpenChange, prefix, title, description, closeLabel, children, preview, footer, testId = 'production-settings' }: {
+	isOpen: boolean; onOpenChange: (open: boolean) => void; prefix: ReactNode; title: ReactNode; description: ReactNode; closeLabel: string
+	children: ReactNode; preview: ReactNode; footer: ReactNode; testId?: string
+}) {
+	const titleId = useId(), descriptionId = useId()
+	const query = '(max-width: 1100px), (orientation: portrait)'
+	const [compact, setCompact] = useState(() => typeof window !== 'undefined' && window.matchMedia(query).matches)
+	useEffect(() => {
+		const media = window.matchMedia(query), change = () => setCompact(media.matches)
+		change(); media.addEventListener('change', change)
+		return () => media.removeEventListener('change', change)
+	}, [])
+	return <ModalOverlay isOpen={isOpen} onOpenChange={onOpenChange} isDismissable className="p-0">
+		<Panel style={{ width: compact ? '96vw' : 'min(90vw, 110rem)', maxWidth: compact ? '96vw' : 'min(90vw, 110rem)', height: compact ? '92vh' : 'min(82vh, 63.125rem)', maxHeight: compact ? '92vh' : 'min(82vh, 63.125rem)' }}>
+			<ProductionLayout aria-labelledby={titleId} aria-describedby={descriptionId} data-testid={testId} data-production-compact={compact} style={{ gridTemplateColumns: compact ? 'minmax(0,1fr)' : 'minmax(calc(var(--spacing) * 90),2fr) minmax(0,4fr)', gridTemplateRows: compact ? 'minmax(18rem,44%) minmax(0,1fr)' : 'minmax(0,1fr)' }}>
+				<section className={`flex min-h-0 min-w-0 flex-col bg-surface ${compact ? 'row-start-2 overflow-y-auto' : 'overflow-hidden'}`} aria-labelledby={titleId}>
+					<ProductionHeader><ProductionTitle id={titleId}>{prefix}{' '}<span className="text-fg">{title}</span></ProductionTitle><ProductionDescription id={descriptionId}>{description}</ProductionDescription></ProductionHeader>
+					<ProductionFields data-testid={`${testId}-form`} className={compact ? 'shrink-0' : 'flex-1 overflow-y-auto'} style={{ scrollbarGutter: 'stable' }}>{children}</ProductionFields>
+					<ProductionFooter>{footer}</ProductionFooter>
+				</section>
+				<ProductionPreview className={compact ? 'col-start-1 row-start-1' : undefined} data-testid={`${testId}-preview`}><ProductionArtwork data-testid={`${testId}-artwork`}>{preview}</ProductionArtwork></ProductionPreview>
+				<Button variant="ghost" aria-label={closeLabel} onPress={() => onOpenChange(false)} className="absolute right-4 top-4 z-20 h-8 w-8 rounded-md p-0 text-white/60 hover:bg-transparent hover:text-white"><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>
+			</ProductionLayout>
+		</Panel>
+	</ModalOverlay>
+}
+
+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 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' })
+const DisclosureBody = uic(AriaDisclosurePanel, { displayName: 'SettingsDisclosureBody', baseClass: 'flex min-w-0 flex-col gap-5 pt-3' })
+
+/** Source outputTaskDropdownPanel: labelled, initially expanded settings group. */
+export function SettingsDialogDisclosure({ title, description, children, defaultExpanded = true }: {
+	title: ReactNode; description?: ReactNode; children: ReactNode; defaultExpanded?: boolean
+}) {
+	return <DisclosureRoot defaultExpanded={defaultExpanded}>
+		<DisclosureTrigger slot="trigger">
+			<DisclosureCopy><DisclosureTitle>{title}</DisclosureTitle>{description ? <DisclosureHint>{description}</DisclosureHint> : null}</DisclosureCopy>
+			<svg aria-hidden="true" width="15" height="15" viewBox="0 0 15 15" fill="none" className="mt-1 shrink-0 text-fg-workflow-muted transition-transform duration-150 group-data-[expanded]/settings-disclosure:rotate-180 motion-reduce:transition-none"><path d="m3.5 5.5 4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
+		</DisclosureTrigger>
+		<DisclosureBody>{children}</DisclosureBody>
+	</DisclosureRoot>
+}