@podoba/react 0.0.34 → 0.0.35

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>
+}

package/src/components/subtle.tsx

@@ -1,10 +1,12 @@
-import type { ReactNode } from 'react'
+import type { ComponentProps } from 'react'
+
+import { uic } from '../utils/uic'
 
 /**
- * Subtle — inline de-emphasised text (the light `fg-subtle` grey, #b3b3b3). Wraps its
- * children in a `text-fg-subtle` span; anything OUTSIDE it stays at the surrounding
- * full-contrast `fg`. Compose it freely to two-tone arbitrary runs of a line — unlike
- * a fixed-slot header it handles mid-line emphasis in ANY order and ANY language:
+ * Subtle — inline de-emphasised text. Wraps its children in a de-emphasised span;
+ * anything OUTSIDE it stays at the surrounding full-contrast `fg`. Compose it freely
+ * to two-tone arbitrary runs of a line — unlike a fixed-slot header it handles
+ * mid-line emphasis in ANY order and ANY language:
  *
  *   <h1>
  *     <Subtle>Good afternoon</Subtle> {name} 👋
@@ -15,7 +17,61 @@ import type { ReactNode } from 'react'
  * With i18n, put the `<subtle>…</subtle>` runs INSIDE the translation string and render
  * it via `<Trans components={{ subtle: <Subtle /> }} />`, so each locale places the
  * emphasis where its own word order needs it. Presentational only (hard rule #1).
+ *
+ * ## Tone
+ *
+ * `muted` (the default) is `fg-muted`. It clears WCAG 2.1 AA normal-text contrast on
+ * the READING surfaces — `surface` 5.98:1, `surface-card` 5.53:1, `surface-muted`
+ * 4.96:1 in light; 6.52:1 / 5.30:1 in dark. Meaningful copy — a greeting, a task
+ * count, a caption — belongs here.
+ *
+ * `muted` covers the reading surfaces and nothing else. Every surface that carries
+ * its OWN ink needs the matching tone, because `fg-muted` is below AA on all of
+ * them — `Tile.mutedTone()` has always encoded this pairing, and these two tones
+ * are the same rule made reachable from a bare run of text:
+ *
+ *   surface-inverted (#242423 — does NOT flip, so it is a dark panel in the LIGHT
+ *     theme too: a dark `Tile`, `Badge color="dark"`)   fg-muted 2.60:1
+ *     → `inverted`, `fg-inverted/60` — 6.49:1 light, 4.99:1 dark
+ *
+ *   the FIXED brand fills, which never flip: brand-green (fg-muted 3.95:1),
+ *     accent-yellow (4.01:1), brand-secondary (3.60:1) — a teal or yellow `Tile`,
+ *     a `CtaPill`, a green/yellow `Badge`
+ *     → `on-brand`, `fg-on-brand/70` — 6.08:1 / 6.11:1 / 5.78:1, theme-stable
+ *
+ * All four blends are asserted in @podoba/tokens `contrast.test.ts`.
+ *
+ * ## Migrating from ≤ 0.0.34
+ *
+ * BREAKING on `surface-inverted` ONLY. `fg-subtle` is light enough that it happened
+ * to PASS on that dark panel (7.41:1) while failing everywhere else, so a run that
+ * sat on a dark `Tile` had a working colour by accident and now needs
+ * `tone="inverted"` to keep it. Nothing detects this for you: the tone is a prop,
+ * and no lint rule knows which surface a run lands on — grep for `<Subtle` and
+ * `tone="subtle"` inside dark `Tile`s and `bg-surface-inverted` panels.
+ *
+ * Everywhere else the new default is an improvement, not a migration. On the
+ * reading surfaces it goes 2.10 → 5.98 (and 1.74 → 4.96 on `surface-muted`); on the
+ * brand fills 1.39 → 3.95, which is better but still short of AA — those runs were
+ * ALWAYS broken and `tone="on-brand"` is the fix, not a regression to undo.
+ *
+ * `decorative` is the lighter `fg-subtle` (#b3b3b3) this component used to apply
+ * unconditionally. It measures 2.10:1 on `surface` and 1.94:1 on `surface-card`, below
+ * even the 3:1 large-text floor, so it is ORNAMENTAL ONLY: separators, watermarks,
+ * repeated decorative runs that carry no information a reader would miss. Never put
+ * text a user has to read behind it.
  */
-export function Subtle({ children }: { children: ReactNode }) {
-	return <span className="text-fg-subtle">{children}</span>
-}
+export const Subtle = uic('span', {
+	displayName: 'Subtle',
+	variants: {
+		tone: {
+			muted: 'text-fg-muted',
+			inverted: 'text-fg-inverted/60',
+			'on-brand': 'text-fg-on-brand/70',
+			decorative: 'text-fg-subtle',
+		},
+	},
+	defaultVariants: { tone: 'muted' },
+})
+
+export type SubtleProps = ComponentProps<typeof Subtle>

package/src/components/table.examples.tsx

@@ -0,0 +1,9 @@
+import { Table } from './table'
+const columns = [{ key: 'name', header: 'Name' }, { key: 'city', header: 'City' }]
+const data = [{ name: 'Annual report', city: 'Prague' }]
+export const examples = {
+	default: () => <Table columns={columns} data={data} aria-label="Projects" />,
+	worksheet: () => <Table appearance="worksheet" columns={columns} data={data} aria-label="CSV preview" />,
+	empty: () => <Table appearance="worksheet" columns={columns} data={[]} emptyMessage="No preview rows available." aria-label="Empty CSV" />,
+}
+export const meta = { category: 'Composite', description: 'Default data table and the source Manager worksheet appearance with monospace column labels.' }

package/src/components/table.tsx

@@ -1,5 +1,7 @@
-import { useMemo, useState, type ReactNode } from 'react'
+import { useMemo, useState, type CSSProperties, type HTMLAttributes, type ReactNode } from 'react'
 import { ChevronDownIcon, ChevronUpIcon } from './icons'
+export const TABLE_APPEARANCES = ['default', 'worksheet', 'team'] as const
+export type TableAppearance = (typeof TABLE_APPEARANCES)[number]
 
 /**
  * Table — the design-system data table (port of gs-platform's `GSTable`). A light,
@@ -35,10 +37,15 @@ export type TableColumn<Row> = {
 }
 
 export type TableProps<Row> = {
+	/** Worksheet matches Manager's plain GSTable; default preserves existing consumers. */
+	appearance?: TableAppearance
 	columns: TableColumn<Row>[]
 	data: Row[]
 	/** Stable per-row key. Defaults to the row index (fine for static lists). */
 	getRowKey?: (row: Row, index: number) => string
+	/** Additional semantic/event props for each rendered row. */
+	getRowProps?: (row: Row) => HTMLAttributes<HTMLTableRowElement>
+	columnTemplate?: string
 	/** Enable client-side sorting on `sortable` columns. */
 	enableSorting?: boolean
 	/** Whole-row press handler — renders rows as interactive (hover + keyboard). */
@@ -69,10 +76,13 @@ export function Table<Row>({
 	columns,
 	data,
 	getRowKey,
+	getRowProps,
+	columnTemplate,
 	enableSorting = false,
 	onRowClick,
 	emptyMessage = 'No rows.',
 	className,
+	appearance = 'default',
 	...aria
 }: TableProps<Row>) {
 	const [sort, setSort] = useState<{ key: string; dir: 'asc' | 'desc' } | null>(null)
@@ -100,12 +110,15 @@ export function Table<Row>({
 
 	const rowKey = getRowKey ?? ((_row: Row, index: number) => String(index))
 	const interactive = Boolean(onRowClick)
+	const worksheet = appearance === 'worksheet'
+	const team = appearance === 'team'
+	const gridTemplate = columnTemplate ?? `repeat(${columns.length}, minmax(0, 1fr))`
 
 	return (
 		<div className={['w-full overflow-x-auto', className].filter(Boolean).join(' ')}>
-			<table className="w-full border-collapse text-small" {...aria}>
-				<thead>
-					<tr className="border-b border-border">
+			<table style={team ? { '--table-columns': gridTemplate } as CSSProperties : undefined} className={`w-full border-collapse text-small ${worksheet ? 'border-b border-border font-normal leading-4.5' : ''} ${team ? 'block border-b border-border font-normal leading-4.5' : ''}`} {...aria}>
+				<thead className={team ? 'block' : undefined}>
+					<tr className={`${worksheet ? '' : 'border-b border-border'} ${team ? 'grid grid-cols-[var(--table-columns)] gap-3 bg-surface-muted px-4 max-[1023px]:hidden' : ''}`}>
 						{columns.map((column) => {
 							const align = column.align ?? 'left'
 							const canSort = enableSorting && column.sortable
@@ -118,7 +131,7 @@ export function Table<Row>({
 									aria-sort={
 										canSort ? (active ? (sort?.dir === 'asc' ? 'ascending' : 'descending') : 'none') : undefined
 									}
-									className={`${ALIGN_CLASS[align]} px-4 py-3 text-label font-medium tracking-wide text-fg-muted uppercase`}
+									className={`${ALIGN_CLASS[align]} ${worksheet ? 'border-0 px-3 py-4 align-middle font-mono text-small font-normal leading-4.5 tracking-normal text-fg normal-case bg-surface whitespace-nowrap' : team ? 'border-0 px-4 py-3 align-middle font-mono text-small font-normal leading-4.5 tracking-normal text-fg normal-case whitespace-nowrap' : 'px-4 py-3 text-label font-medium tracking-wide text-fg-muted uppercase'}`}
 								>
 									{canSort ? (
 										<button
@@ -145,17 +158,20 @@ export function Table<Row>({
 						})}
 					</tr>
 				</thead>
-				<tbody>
+				<tbody className={team ? 'block' : undefined}>
 					{sorted.length === 0 ? (
 						<tr>
-							<td colSpan={columns.length} className="px-4 py-10 text-center text-small text-fg-muted">
+							<td colSpan={columns.length} className={worksheet ? 'border-y border-border px-6 py-4 text-small font-normal leading-4.5 text-fg' : 'px-4 py-10 text-center text-small text-fg-muted'}>
 								{emptyMessage}
 							</td>
 						</tr>
 					) : (
-						sorted.map((row, index) => (
+						sorted.map((row, index) => {
+						const rowProps = getRowProps?.(row)
+						return (
 							<tr
 								key={rowKey(row, index)}
+								{...rowProps}
 								{...(interactive
 									? {
 											tabIndex: 0,
@@ -169,22 +185,23 @@ export function Table<Row>({
 											},
 										}
 									: {})}
-								className={`border-b border-border/60 outline-none ${
+								className={`${worksheet ? 'min-h-15' : team ? 'grid grid-cols-[var(--table-columns)] gap-3 border-b border-border px-4 py-3 text-label font-normal leading-4.5 max-[1023px]:grid max-[1023px]:grid-cols-1 max-[1023px]:gap-2 max-[1023px]:p-4' : 'border-b border-border/60'} ${team ? 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring' : ''} outline-none ${
 									interactive
 										? 'cursor-pointer transition-colors hover:bg-surface-muted focus-visible:bg-surface-muted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring'
 										: ''
-								}`}
+								}${rowProps?.className ? ` ${rowProps.className}` : ''}`}
 							>
 								{columns.map((column) => {
 									const align = column.align ?? 'left'
 									return (
-										<td key={column.key} className={`${ALIGN_CLASS[align]} px-4 py-3 align-middle text-fg`}>
+										<td key={column.key} className={`${ALIGN_CLASS[align]} ${worksheet ? 'border border-border first:border-l-0 last:border-r-0 px-6 py-4 text-small font-normal leading-4.5' : team ? 'px-0 py-0 align-middle text-small font-normal leading-4.5 max-[1023px]:block' : 'px-4 py-3'} align-middle text-fg`}>
 											{column.render ? column.render(row) : String(defaultSortValue(column, row))}
 										</td>
 									)
 								})}
 							</tr>
-						))
+						)
+						})
 					)}
 				</tbody>
 			</table>

package/src/components/template-catalog-card.examples.tsx

@@ -0,0 +1,25 @@
+import { useState } from 'react'
+import { CatalogMetricCard } from './template-catalog-card'
+import { CatalogLaunchCard, CatalogSummaryBadge, CatalogSummaryGrid, CatalogSummaryCard, TemplateCatalogBrowseCard, TemplateCatalogBrowseGrid } from './template-catalog-card'
+import { TemplateCatalogCard, TemplateCatalogGrid, TemplateReferenceGrid, TemplateReferenceList, TemplateReferenceItem, CatalogMetadataSummary } from './template-catalog-card'
+
+function Example({ selected = false, locked = false, title = 'Annual report' }: { selected?: boolean; locked?: boolean; title?: string }) {
+	const [value, setValue] = useState(selected)
+	return <TemplateCatalogCard title={title} isSelected={value} isSelectionLocked={locked}
+		onToggle={() => setValue(!value)} preview={<span className="flex h-full aspect-3/4 items-center justify-center bg-surface text-fg">Aa</span>} />
+}
+
+export const examples = {
+	metrics: () => <CatalogSummaryGrid>{['0', '205', '—'].map(value => <CatalogMetricCard key={value} title="Templates" value={value} footer={value === '0' ? undefined : 'Catalog'} />)}</CatalogSummaryGrid>,
+	launch: () => <CatalogLaunchCard title="Annual report" description="Prepare the yearly report." details="2 sections · 3 outputs" action={<button type="button" aria-label="Start Annual report" className="absolute inset-0 rounded-lg focus-visible:ring-2 focus-visible:ring-ring" />} />,
+	launchWithoutBrief: () => <CatalogLaunchCard title="Annual report" details="2 sections · 3 outputs" action={<button type="button" disabled aria-label="Start Annual report" className="absolute inset-0 rounded-lg" />} />,
+	summary: () => <CatalogSummaryGrid>{['Campaign', 'Annual report', 'Social launch'].map(title => <CatalogSummaryCard key={title} title={title} badge={<CatalogSummaryBadge color="green">active</CatalogSummaryBadge>} description="Reusable production scenario" details="2 sections · 4 outputs" />)}</CatalogSummaryGrid>,
+	readOnly: () => <TemplateCatalogBrowseGrid><TemplateCatalogBrowseCard title="Annual report" templateId="annual" preview={<span>Aa</span>} /><TemplateCatalogBrowseCard title="A long template title that wraps onto multiple lines" templateId="long" preview={<span>Aa</span>} /></TemplateCatalogBrowseGrid>,
+	metadata: () => <CatalogMetadataSummary title="Summary" ariaLabel="Template summary" items={[{ label: 'Name', value: 'Annual report', fullWidth: true }, { label: 'Type', value: 'Print' }, { label: 'Format', value: 'A4' }, { label: 'Reference ID', value: 'long-reference-123456789012345678901234567890', fullWidth: true }]} />,
+	browsing: () => <TemplateReferenceGrid columns={2}><TemplateReferenceItem title="Annual report" meta="Template" templateId="report" view="preview_grid" onOpen={() => undefined} preview={<span>Aa</span>} /><TemplateReferenceItem title="Unavailable" meta="Template" templateId="missing" view="preview_grid" isDisabled onOpen={() => undefined} preview={<span>Un</span>} /></TemplateReferenceGrid>,
+	list: () => <TemplateReferenceList><TemplateReferenceItem title="Annual report" meta="Template" templateId="report" view="compact_list" onOpen={() => undefined} preview={<span>Aa</span>} /><TemplateReferenceItem title="Unavailable" meta="Template" templateId="missing" view="compact_list" isDisabled onOpen={() => undefined} preview={<span>Un</span>} /></TemplateReferenceList>,
+	default: () => <TemplateCatalogGrid><Example /></TemplateCatalogGrid>,
+	variants: () => <TemplateCatalogGrid><Example /><Example selected /></TemplateCatalogGrid>,
+	states: () => <TemplateCatalogGrid><Example selected locked /><Example title="A long template title that wraps instead of disappearing behind an ellipsis" /></TemplateCatalogGrid>,
+}
+export const meta = { category: 'Composite', description: 'Selection tiles with a contained preview, keyboard focus and locked assignments. Hover and selection share the original green fill.' }