@podoba/react 0.0.7 → 0.0.8

package/src/components/focus-field.tsx

@@ -0,0 +1,213 @@
+import {
+	createContext,
+	type ReactNode,
+	useCallback,
+	useContext,
+	useEffect,
+	useId,
+	useMemo,
+	useRef,
+	useState,
+} from 'react'
+import { createPortal } from 'react-dom'
+import { clsx } from 'clsx'
+import { FocusOverlayContext } from './focus-context'
+
+/**
+ * FocusFields + FocusField — immersive focus-mode field editing.
+ *
+ * Ported from gs-platform's FormWithPreview overlay pattern. Wrap a form in
+ * `<FocusFields>`; each `<FocusField>` renders as a compact card (icon · label ·
+ * value preview). Clicking one enters focus mode: the rest of the form blurs and
+ * dims, and the field's editor (`children`) takes over the form area at a large
+ * size. Esc or a click on the backdrop closes it.
+ *
+ * Generic by design — `children` is any editor (an input, textarea, select…). The
+ * card owns the label, so pass a *label-less* control as children. Text controls
+ * are auto-enlarged and stripped to a bare headline look in the overlay.
+ */
+
+type FocusCtx = {
+	activeId: string | null
+	activate: (id: string) => void
+	close: () => void
+	host: HTMLElement | null
+}
+
+const FocusFieldsContext = createContext<FocusCtx | null>(null)
+
+function useFocusFields(): FocusCtx {
+	const ctx = useContext(FocusFieldsContext)
+	if (!ctx) throw new Error('<FocusField> must be rendered inside <FocusFields>')
+	return ctx
+}
+
+export function FocusFields({ children, className }: { children: ReactNode; className?: string }) {
+	const [activeId, setActiveId] = useState<string | null>(null)
+	const [host, setHost] = useState<HTMLDivElement | null>(null)
+	const close = useCallback(() => setActiveId(null), [])
+	const activate = useCallback((id: string) => setActiveId(id), [])
+
+	useEffect(() => {
+		if (!activeId) return
+		const onKey = (e: KeyboardEvent) => {
+			if (e.key === 'Escape') close()
+		}
+		document.addEventListener('keydown', onKey)
+		return () => document.removeEventListener('keydown', onKey)
+	}, [activeId, close])
+
+	const ctx = useMemo<FocusCtx>(() => ({ activeId, activate, close, host }), [activeId, activate, close, host])
+
+	return (
+		<FocusFieldsContext.Provider value={ctx}>
+			<div className={clsx('relative', className)}>
+				<div
+					className={clsx(
+						'transition-[filter,opacity] duration-200',
+						activeId && 'pointer-events-none select-none opacity-40 blur-[3px]',
+					)}
+					aria-hidden={activeId ? true : undefined}
+				>
+					{children}
+				</div>
+				{activeId ? (
+					// Backdrop over the form; the portalled editor sits at the top and
+					// stops propagation so only clicks outside it close focus mode.
+					<div className="absolute inset-0 z-20 overflow-auto" onClick={close}>
+						<div ref={setHost} onClick={(e) => e.stopPropagation()} />
+					</div>
+				) : null}
+			</div>
+		</FocusFieldsContext.Provider>
+	)
+}
+
+// In the overlay, enlarge and de-chrome text controls into a bare headline editor.
+const OVERLAY_EDITOR =
+	'[&_input]:w-full [&_input]:border-0 [&_input]:bg-transparent [&_input]:p-0 [&_input]:text-3xl [&_input]:font-medium [&_input]:text-fg [&_input]:outline-none [&_input]:shadow-none [&_input]:ring-0 [&_input]:placeholder:text-fg-subtle ' +
+	'[&_textarea]:min-h-40 [&_textarea]:w-full [&_textarea]:resize-none [&_textarea]:border-0 [&_textarea]:bg-transparent [&_textarea]:p-0 [&_textarea]:text-3xl [&_textarea]:font-medium [&_textarea]:text-fg [&_textarea]:outline-none [&_textarea]:placeholder:text-fg-subtle'
+
+function IconBadge({ icon }: { icon: ReactNode }) {
+	return (
+		<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-surface-muted text-sm font-medium text-fg">
+			{icon}
+		</div>
+	)
+}
+
+export type FocusFieldProps = {
+	/** Field label (shown on the card and above the overlay editor). */
+	label: ReactNode
+	/** Optional leading icon (e.g. a "T" for text). */
+	icon?: ReactNode
+	/** Current value shown on the collapsed card. */
+	preview?: ReactNode
+	/** Shown on the card when there's no value. */
+	placeholder?: ReactNode
+	/** The editor, shown in the overlay when focused. */
+	children: ReactNode
+	/**
+	 * How the editor is presented in the overlay:
+	 * - `"text"` (default): treat `children` as a bare text control and enlarge it
+	 *   to a headline; FocusField supplies the label.
+	 * - `"control"`: render `children` (a self-labelled field component) as-is, with
+	 *   no enlargement and no FocusField label (the control provides its own).
+	 */
+	editor?: 'text' | 'control'
+	className?: string
+}
+
+export function FocusField({
+	label,
+	icon,
+	preview,
+	placeholder,
+	children,
+	editor = 'text',
+	className,
+}: FocusFieldProps) {
+	const ctx = useFocusFields()
+	const id = useId()
+	const active = ctx.activeId === id
+	const contentRef = useRef<HTMLDivElement>(null)
+
+	// Move focus into the editor once it's mounted (the portal host appears a
+	// render after activation, so wait for ctx.host before focusing).
+	useEffect(() => {
+		if (!active || !ctx.host) return
+		const el = contentRef.current?.querySelector<HTMLElement>('input, textarea, [contenteditable="true"]')
+		el?.focus()
+	}, [active, ctx.host])
+
+	const hasValue = preview !== undefined && preview !== null && preview !== ''
+
+	return (
+		<>
+			<div
+				role="button"
+				tabIndex={0}
+				aria-label={typeof label === 'string' ? label : undefined}
+				onClick={() => ctx.activate(id)}
+				onKeyDown={(e) => {
+					if (e.key === 'Enter' || e.key === ' ') {
+						e.preventDefault()
+						ctx.activate(id)
+					}
+				}}
+				className={clsx(
+					// Field-group divider: a bottom border on each row, none on the last.
+					'flex w-full cursor-text items-start gap-3 border-b border-border p-3 text-left outline-none transition-colors last:border-b-0',
+					'hover:bg-surface-card focus-visible:ring-2 focus-visible:ring-ring',
+					className,
+				)}
+			>
+				{icon ? <IconBadge icon={icon} /> : null}
+				<div className="min-w-0 flex-1">
+					<div className="text-sm text-fg-muted">{label}</div>
+					<div className="mt-1 truncate text-base text-fg">
+						{hasValue ? preview : <span className="text-fg-subtle">{placeholder}</span>}
+					</div>
+				</div>
+			</div>
+			{active && ctx.host
+				? createPortal(
+						// No card/shadow: a full-bleed white area at the top that gradient-fades
+						// to transparent, so it melts into the blurred form below.
+						<div
+							ref={contentRef}
+							className="relative min-h-[60vh] w-full bg-gradient-to-b from-surface from-0% via-surface via-65% to-transparent px-3 pt-3"
+						>
+							<button
+								type="button"
+								onClick={ctx.close}
+								aria-label="Close"
+								className="absolute right-3 top-3 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-fg-subtle outline-none transition-colors hover:bg-surface-muted hover:text-fg focus-visible:ring-2 focus-visible:ring-ring"
+							>
+								<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
+									<path d="M6 6l12 12M18 6 6 18" />
+								</svg>
+							</button>
+							{/* Tell field components they're in a focus overlay so they can
+							    render an enhanced view (e.g. an inline open calendar). */}
+							<FocusOverlayContext.Provider value={true}>
+								{editor === 'control' ? (
+									// Self-labelled field component — render it as-is (enhanced by context).
+									<div className="max-w-md pr-10">{children}</div>
+								) : (
+									<div className="flex items-start gap-3">
+										{icon ? <IconBadge icon={icon} /> : null}
+										<div className="min-w-0 flex-1 pr-10">
+											<div className="text-sm text-fg-muted">{label}</div>
+											<div className={OVERLAY_EDITOR}>{children}</div>
+										</div>
+									</div>
+								)}
+							</FocusOverlayContext.Provider>
+						</div>,
+						ctx.host,
+					)
+				: null}
+		</>
+	)
+}

package/src/components/multiselect.tsx

@@ -13,6 +13,7 @@ import {
 } from 'react-aria-components'
 import { clsx } from 'clsx'
 import { uic } from '../utils/uic'
+import { useInFocusOverlay } from './focus-context'
 
 /**
  * MultiSelect — a dropdown that selects several options at once.
@@ -96,6 +97,7 @@ export const MultiSelect = ({
 	const triggerRef = useRef<HTMLButtonElement>(null)
 	const [open, setOpen] = useState(false)
 	const { contains } = useFilter({ sensitivity: 'base' })
+	const inFocus = useInFocusOverlay()
 	const [internal, setInternal] = useState<Set<string>>(() => new Set(defaultSelectedKeys ?? []))
 	const selected = selectedKeys ?? internal
 
@@ -126,48 +128,64 @@ export const MultiSelect = ({
 		</ListBox>
 	)
 
+	const listContent = searchable ? (
+		<Autocomplete filter={contains}>
+			<SearchField aria-label="Filter options" autoFocus className="border-b border-border p-1">
+				<RACInput
+					placeholder="Search…"
+					className="w-full rounded-md bg-surface px-3 py-2 text-sm text-fg outline-none placeholder:text-fg-muted"
+				/>
+			</SearchField>
+			{list}
+		</Autocomplete>
+	) : (
+		list
+	)
+
+	const desc = description ? <span className="text-xs text-fg-muted">{description}</span> : null
+	const err = isInvalid && errorMessage ? <span className="text-xs text-danger">{errorMessage}</span> : null
+
 	return (
 		<div className={clsx('flex flex-col gap-2', className)}>
 			<span id={labelId} className="text-heading5 font-medium text-fg">
 				{label}
 			</span>
-			<RACButton
-				ref={triggerRef}
-				aria-labelledby={labelId}
-				isDisabled={isDisabled}
-				onPress={() => setOpen(true)}
-				className={clsx(
-					'flex h-12 w-full items-center justify-between gap-2.5 rounded-lg border bg-surface px-4 text-sm text-fg outline-none transition-colors',
-					'data-[hovered]:border-fg-subtle data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring',
-					'data-[disabled]:bg-surface-muted data-[disabled]:opacity-60 data-[disabled]:pointer-events-none',
-					isInvalid ? 'border-danger ring-2 ring-danger' : 'border-border',
-				)}
-			>
-				<span className={clsx('truncate', chosen.length === 0 && 'text-fg-muted')}>{summary}</span>
-				<Chevron />
-			</RACButton>
-			{description ? <span className="text-xs text-fg-muted">{description}</span> : null}
-			{isInvalid && errorMessage ? <span className="text-xs text-danger">{errorMessage}</span> : null}
-			<Popover
-				triggerRef={triggerRef}
-				isOpen={open}
-				onOpenChange={setOpen}
-				className="min-w-[var(--trigger-width)] overflow-hidden rounded-lg bg-surface-card shadow-lg"
-			>
-				{searchable ? (
-					<Autocomplete filter={contains}>
-						<SearchField aria-label="Filter options" autoFocus className="border-b border-border p-1">
-							<RACInput
-								placeholder="Search…"
-								className="w-full rounded-md bg-surface px-3 py-2 text-sm text-fg outline-none placeholder:text-fg-muted"
-							/>
-						</SearchField>
-						{list}
-					</Autocomplete>
-				) : (
-					list
-				)}
-			</Popover>
+			{inFocus ? (
+				// Seamless: no trigger/popover — the checklist sits inline on the panel.
+				<>
+					{listContent}
+					{desc}
+					{err}
+				</>
+			) : (
+				<>
+					<RACButton
+						ref={triggerRef}
+						aria-labelledby={labelId}
+						isDisabled={isDisabled}
+						onPress={() => setOpen(true)}
+						className={clsx(
+							'flex h-12 w-full items-center justify-between gap-2.5 rounded-lg border bg-surface px-4 text-sm text-fg outline-none transition-colors',
+							'data-[hovered]:border-fg-subtle data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring',
+							'data-[disabled]:bg-surface-muted data-[disabled]:opacity-60 data-[disabled]:pointer-events-none',
+							isInvalid ? 'border-danger ring-2 ring-danger' : 'border-border',
+						)}
+					>
+						<span className={clsx('truncate', chosen.length === 0 && 'text-fg-muted')}>{summary}</span>
+						<Chevron />
+					</RACButton>
+					{desc}
+					{err}
+					<Popover
+						triggerRef={triggerRef}
+						isOpen={open}
+						onOpenChange={setOpen}
+						className="min-w-[var(--trigger-width)] overflow-hidden rounded-lg bg-surface-card shadow-lg"
+					>
+						{listContent}
+					</Popover>
+				</>
+			)}
 		</div>
 	)
 }

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

@@ -0,0 +1,134 @@
+// @app/ui — request-changes modal (issue 13).
+//
+// PRESENTATIONAL "request changes" dialog built on the @app/ui <Dialog>
+// (React Aria Modal — focus trap, Esc, aria-modal). The note is REQUIRED:
+// confirm stays DISABLED until the textarea holds a non-empty (trimmed) value,
+// mirroring the server contract (`request_changes` 422s on an empty note).
+//
+// APP-AGNOSTIC (hard rule #1): every string is a prop and the action is
+// delegated via `onConfirm(note)`. The owning surface in apps/web wires the
+// i18n strings + the REST mutation + invalidation, and surfaces the auto-created
+// 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.
+
+import { useId, useState } from 'react'
+import { Button } from './button'
+import { Dialog } from './dialog'
+
+/** Strings the request-changes modal renders — supplied by the app (i18n). */
+export interface RequestChangesModalLabels {
+	/** Dialog heading. */
+	title: string
+	/** Explanatory body copy under the title. */
+	body: string
+	/** Label for the required note textarea. */
+	noteLabel: string
+	/** Placeholder for the note textarea. */
+	notePlaceholder: string
+	/** Cancel button. */
+	cancel: string
+	/** Confirm (request changes) button — idle state. */
+	confirm: string
+	/** Confirm button — pending state. */
+	submitting: string
+}
+
+export interface RequestChangesModalProps {
+	/** Controlled open state. */
+	isOpen: boolean
+	/** Notified on open/close (false on Esc / click-outside / cancel). */
+	onOpenChange: (isOpen: boolean) => void
+	/** Run the request_changes command with the (required, trimmed) note. */
+	onConfirm: (note: string) => void
+	/** Whether the confirm mutation is in flight (disables + shows pending). */
+	isPending?: boolean
+	/** Server / mutation error message to surface inline (role="alert"). */
+	error?: string
+	/** App-supplied i18n strings. */
+	labels: RequestChangesModalLabels
+	/** Optional test id forwarded to the dialog. */
+	'data-testid'?: string
+}
+
+/** Request-changes modal with a REQUIRED note (confirm disabled until non-empty). */
+export function RequestChangesModal({
+	isOpen,
+	onOpenChange,
+	onConfirm,
+	isPending = false,
+	error,
+	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 isEmpty = note.trim().length === 0
+	const canConfirm = !isEmpty && !isPending
+
+	const handleConfirm = (): void => {
+		const trimmed = note.trim()
+		if (trimmed.length === 0) return
+		onConfirm(trimmed)
+	}
+
+	return (
+		<Dialog
+			title={labels.title}
+			data-testid={testId ?? 'request-changes-modal'}
+			isOpen={isOpen}
+			onOpenChange={(open) => {
+				if (!open) setNote('')
+				onOpenChange(open)
+			}}
+		>
+			<div className="flex flex-col gap-3">
+				<p className="text-sm text-fg-muted">{labels.body}</p>
+				<label htmlFor={noteId} className="text-sm 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-sm text-fg outline-none transition-colors placeholder:text-fg-muted focus-visible:ring-2 focus-visible:ring-ring"
+				/>
+				{error ? (
+					<p data-testid="request-changes-error" role="alert" className="text-sm text-danger">
+						{error}
+					</p>
+				) : null}
+				<div className="mt-2 flex justify-end gap-2">
+					<Button
+						variant="secondary"
+						size="sm"
+						isDisabled={isPending}
+						onPress={() => onOpenChange(false)}
+					>
+						{labels.cancel}
+					</Button>
+					<Button
+						data-testid="request-changes-confirm"
+						variant="primary"
+						size="sm"
+						isDisabled={!canConfirm}
+						isPending={isPending}
+						onPress={handleConfirm}
+					>
+						{isPending ? labels.submitting : labels.confirm}
+					</Button>
+				</div>
+			</div>
+		</Dialog>
+	)
+}

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

@@ -1,5 +1,6 @@
 import { type ClipboardEvent as ReactClipboardEvent, type ReactNode, useEffect, useRef } from 'react'
 import { clsx } from 'clsx'
+import { useInFocusOverlay } from './focus-context'
 
 /**
  * RichTextEditor — a dependency-free contentEditable WYSIWYG that emits an HTML
@@ -85,6 +86,9 @@ export function RichTextEditor({
 }: RichTextEditorProps) {
 	const ref = useRef<HTMLDivElement>(null)
 	const last = useRef<string>('')
+	// In a focus overlay, give the body more room to write in.
+	const inFocus = useInFocusOverlay()
+	const bodyMinHeight = inFocus ? Math.max(minHeight, 360) : minHeight
 
 	// Sync only EXTERNAL value changes into the DOM — never on our own keystrokes,
 	// or the caret would jump to the start on every character.
@@ -142,7 +146,7 @@ export function RichTextEditor({
 				<div
 					ref={ref}
 					className="prose prose-sm max-w-none px-4 py-3.5 text-sm leading-relaxed text-fg outline-none empty:before:text-fg-subtle empty:before:content-[attr(data-placeholder)]"
-					style={{ minHeight }}
+					style={{ minHeight: bodyMinHeight }}
 					contentEditable
 					suppressContentEditableWarning
 					data-placeholder={placeholder}

package/src/components/select.tsx

@@ -13,6 +13,7 @@ import {
 	Text,
 } from 'react-aria-components'
 import { uic } from '../utils/uic'
+import { useInFocusOverlay } from './focus-context'
 
 /**
  * Select — accessible dropdown built on React Aria Components `Select`.
@@ -74,41 +75,55 @@ export const Select = <T extends object>({
 	placeholder,
 	children,
 	...props
-}: SelectProps<T>) => (
-	<RACSelect {...props} placeholder={placeholder} className="group flex flex-col gap-2">
-		<Label className="text-heading5 font-medium text-fg">{label}</Label>
-		<SelectTrigger>
-			<SelectValue className="data-[placeholder]:text-fg-muted" />
-			{/* gs chevron: 9.5px caret, dark (neutral-400 → fg), non-interactive. */}
-			<svg
-				width="9.5"
-				height="9.5"
-				viewBox="0 0 12 12"
-				fill="none"
-				aria-hidden="true"
-				className="pointer-events-none shrink-0 text-fg"
-			>
-				<path
-					d="M3 4.5L6 7.5L9 4.5"
-					stroke="currentColor"
-					strokeWidth="1.5"
-					strokeLinecap="round"
-					strokeLinejoin="round"
-				/>
-			</svg>
-		</SelectTrigger>
-		{description ? (
-			<Text slot="description" className="text-xs text-fg-muted">
-				{description}
-			</Text>
-		) : null}
-		<FieldError className="text-xs text-danger">{errorMessage}</FieldError>
-		{/* 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">
-			<ListBox className="flex max-h-64 flex-col gap-0.5 overflow-auto overscroll-contain p-1 outline-none">
-				{children}
-			</ListBox>
-		</Popover>
-	</RACSelect>
-)
+}: 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">
+			{children}
+		</ListBox>
+	)
+	const desc = description ? (
+		<Text slot="description" className="text-xs text-fg-muted">
+			{description}
+		</Text>
+	) : null
+	const err = <FieldError className="text-xs text-danger">{errorMessage}</FieldError>
+
+	return (
+		<RACSelect {...props} placeholder={placeholder} className="group flex flex-col gap-2">
+			<Label className="text-heading5 font-medium text-fg">{label}</Label>
+			{inFocus ? (
+				<>
+					{listbox}
+					{desc}
+					{err}
+				</>
+			) : (
+				<>
+					<SelectTrigger>
+						<SelectValue className="data-[placeholder]:text-fg-muted" />
+						{/* gs chevron: 9.5px caret, dark (neutral-400 → fg), non-interactive. */}
+						<svg
+							width="9.5"
+							height="9.5"
+							viewBox="0 0 12 12"
+							fill="none"
+							aria-hidden="true"
+							className="pointer-events-none shrink-0 text-fg"
+						>
+							<path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+						</svg>
+					</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">
+						{listbox}
+					</Popover>
+				</>
+			)}
+		</RACSelect>
+	)
+}