@podoba/react 0.0.40 → 0.0.41

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@podoba/react",
-	"version": "0.0.40",
+	"version": "0.0.41",
 	"type": "module",
 	"description": "podoba React components — React Aria Components + Tailwind primitives + layout, built with uic.",
 	"repository": {
@@ -28,8 +28,8 @@
 		"typecheck": "tsc --build"
 	},
 	"dependencies": {
-		"@podoba/tokens": "^0.0.40",
-		"@podoba/tailwind": "^0.0.40",
+		"@podoba/tokens": "^0.0.41",
+		"@podoba/tailwind": "^0.0.41",
 		"react-aria-components": "1.18.0",
 		"class-variance-authority": "0.7.1",
 		"clsx": "2.1.1",

package/src/components/animated-summary-text.tsx

@@ -0,0 +1,98 @@
+import type { CSSProperties, ReactNode } from 'react'
+
+/**
+ * AnimatedSummaryText: the gs `SummaryContentTile` sentence reveal (Tasks summary,
+ * project and brand dashboard summary tiles).
+ *
+ * Every character is its own `inline-block` token playing `summary-token-reveal`
+ * (680ms `cubic-bezier(0.19, 1, 0.22, 1)`: opacity 0, 8px down and 6px blur, clear
+ * by 58%, settled at 100%), delayed `min(index * 22, 1800)ms`. Words are
+ * `inline-block whitespace-nowrap` so a word never breaks mid-reveal, and a `\n`
+ * in the text becomes a line break (pass an already balanced sentence).
+ *
+ * Accessibility: the per-character copy is `aria-hidden`; assistive technology
+ * reads one visually hidden string instead of single letters. Under
+ * `prefers-reduced-motion: reduce` no token animates and the sentence is simply
+ * shown. The reveal replays whenever `text` changes.
+ *
+ * Renders inline (`<span>`): place it inside the caller's paragraph, which owns the
+ * type scale, colour and `max-width`. Presentational only: no i18n, no data.
+ */
+
+export interface AnimatedSummarySegment {
+	text: string
+	/** Highlighted runs take `highlightClassName` (gs `summaryHighlight`, primary ink). */
+	highlighted?: boolean
+}
+
+export interface AnimatedSummaryTextProps {
+	/** The full sentence. `\n` renders as a line break. */
+	text: string
+	/**
+	 * Optional highlighted runs. Their texts joined must equal `text`; when omitted the
+	 * whole sentence is one plain segment.
+	 */
+	segments?: ReadonlyArray<AnimatedSummarySegment>
+	/** Class for highlighted words (e.g. `text-fg`). */
+	highlightClassName?: string
+	/** Per-character delay step (source 22ms). */
+	stepMs?: number
+	/** Delay ceiling (source 1800ms). */
+	maxDelayMs?: number
+	className?: string
+}
+
+const tokenClass = 'inline-block animate-summary-token will-change-[opacity,filter,transform] motion-reduce:animate-none'
+
+export function AnimatedSummaryText({
+	text,
+	segments,
+	highlightClassName,
+	stepMs = 22,
+	maxDelayMs = 1800,
+	className,
+}: AnimatedSummaryTextProps) {
+	const parts = segments && segments.length > 0 ? segments : [{ text, highlighted: false }]
+	let tokenIndex = 0
+	const nodes: ReactNode[] = []
+
+	parts.forEach((segment, segmentIndex) => {
+		segment.text.split(/(\n|\s+)/).forEach((part, partIndex) => {
+			if (!part) return
+			const key = `${segmentIndex}-${partIndex}`
+			if (part === '\n') {
+				nodes.push(<br key={`${key}-br`} />)
+				return
+			}
+			if (/^\s+$/.test(part)) {
+				nodes.push(part)
+				return
+			}
+			const wordClass = ['inline-block whitespace-nowrap', segment.highlighted ? highlightClassName : '']
+				.filter(Boolean)
+				.join(' ')
+			nodes.push(
+				<span key={key} className={wordClass}>
+					{Array.from(part).map((character, characterIndex) => {
+						const style: CSSProperties = { animationDelay: `${Math.min(tokenIndex * stepMs, maxDelayMs)}ms` }
+						tokenIndex += 1
+						return (
+							<span key={characterIndex} className={tokenClass} style={style} data-summary-token="">
+								{character}
+							</span>
+						)
+					})}
+				</span>,
+			)
+		})
+	})
+
+	return (
+		<span className={className} data-animated-summary="">
+			<span className="sr-only">{text.replace(/\s*\n\s*/g, ' ')}</span>
+			<span key={text} aria-hidden="true">
+				{nodes}
+			</span>
+		</span>
+	)
+}

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

@@ -51,6 +51,13 @@ export type BrandPageHeaderProps = {
 	 * navigation link, not ornament (#25).
 	 */
 	parentLink?: ReactNode
+	/**
+	 * Ink of `parentLink`. `muted` (default) is `fg-muted` (5.98:1). `soft` is the
+	 * lighter large-text grey `fg-muted-large` (3.4:1 on `surface`, above the WCAG
+	 * 1.4.3 3:1 floor for this 30px row), the closest AA match to the source's
+	 * decorative #b3b3b3 parent line. Hover still resolves to `fg`.
+	 */
+	parentLinkTone?: 'muted' | 'soft'
 	/** Optional breadcrumb trail rendered above the greeting. */
 	breadcrumbs?: BrandPageHeaderCrumb[]
 	/**
@@ -84,6 +91,7 @@ export function BrandPageHeader({
 	variant = 'default',
 	headingLevel = 1,
 	parentLink,
+	parentLinkTone = 'muted',
 	breadcrumbs,
 	cta,
 	ctaLabel,
@@ -299,7 +307,9 @@ export function BrandPageHeader({
 						// readable `fg-muted` (5.98:1) rather than `fg-subtle`.
 						<nav
 							aria-label="Breadcrumb"
-							className="h-8 text-display-large font-medium leading-8 tracking-wide text-fg-muted transition-colors [&_a:hover]:text-fg [&_a]:block [&_a]:h-8 [&_a]:text-fg-muted [&_a]:no-underline [&_a]:outline-none [&_a:focus-visible]:underline"
+							className={`h-8 text-display-large font-medium leading-8 tracking-wide transition-colors [&_a:hover]:text-fg [&_a]:block [&_a]:h-8 [&_a]:no-underline [&_a]:outline-none [&_a:focus-visible]:underline ${
+								parentLinkTone === 'soft' ? 'text-fg-muted-large [&_a]:text-fg-muted-large' : 'text-fg-muted [&_a]:text-fg-muted'
+							}`}
 						>
 							{parentLink}
 						</nav>

package/src/components/combobox.tsx

@@ -17,6 +17,7 @@ import {
 } from 'react-aria-components'
 import { uic } from '../utils/uic'
 import { useInFocusOverlay } from './focus-context'
+import { fieldDescriptionClass, fieldErrorClass } from './field-appearance'
 
 /**
  * ComboBox — a filterable single-select: a text input that narrows a listbox as
@@ -76,7 +77,7 @@ export const ComboBox = <T extends object>({
 	const inFocus = useInFocusOverlay()
 	const { contains } = useFilter({ sensitivity: 'base' })
 	const desc = description ? (
-		<Text slot="description" className="text-label text-fg-muted">
+		<Text slot="description" className={fieldDescriptionClass}>
 			{description}
 		</Text>
 	) : null
@@ -108,7 +109,7 @@ export const ComboBox = <T extends object>({
 					</ListBox>
 				</Autocomplete>
 				{desc}
-				{errorMessage ? <span className="text-label text-danger">{errorMessage}</span> : null}
+				{errorMessage ? <span className={fieldErrorClass}>{errorMessage}</span> : null}
 			</div>
 		)
 	}
@@ -132,7 +133,7 @@ export const ComboBox = <T extends object>({
 				</RACButton>
 			</div>
 			{desc}
-			<FieldError className="text-label text-danger">{errorMessage}</FieldError>
+			<FieldError className={fieldErrorClass}>{errorMessage}</FieldError>
 			<Popover className="min-w-[var(--trigger-width)] overflow-hidden rounded-lg bg-surface-card shadow-lg">
 				<ListBox
 					className="flex max-h-72 flex-col gap-0.5 overflow-auto overscroll-contain p-1 outline-none"

package/src/components/date-field.tsx

@@ -12,6 +12,7 @@ import {
 	type TimeFieldProps as RACTimeFieldProps,
 	type TimeValue,
 } from 'react-aria-components'
+import { fieldDescriptionClass, fieldErrorClass } from './field-appearance'
 
 /**
  * DateField / TimeField — segmented, keyboard-first date and time entry (type or
@@ -43,11 +44,11 @@ export const DateField = <T extends DateValue>({ label, description, errorMessag
 		<Label className="text-heading5 font-medium text-fg">{label}</Label>
 		<DateInput className={dateInputClass}>{(segment) => <DateSegment segment={segment} className={segmentClass} />}</DateInput>
 		{description ? (
-			<Text slot="description" className="text-label text-fg-muted">
+			<Text slot="description" className={fieldDescriptionClass}>
 				{description}
 			</Text>
 		) : null}
-		<FieldError className="text-label text-danger">{errorMessage}</FieldError>
+		<FieldError className={fieldErrorClass}>{errorMessage}</FieldError>
 	</RACDateField>
 )
 
@@ -62,10 +63,10 @@ export const TimeField = <T extends TimeValue>({ label, description, errorMessag
 		<Label className="text-heading5 font-medium text-fg">{label}</Label>
 		<DateInput className={dateInputClass}>{(segment) => <DateSegment segment={segment} className={segmentClass} />}</DateInput>
 		{description ? (
-			<Text slot="description" className="text-label text-fg-muted">
+			<Text slot="description" className={fieldDescriptionClass}>
 				{description}
 			</Text>
 		) : null}
-		<FieldError className="text-label text-danger">{errorMessage}</FieldError>
+		<FieldError className={fieldErrorClass}>{errorMessage}</FieldError>
 	</RACTimeField>
 )

package/src/components/date-picker.tsx

@@ -23,6 +23,7 @@ import {
 import { clsx } from 'clsx'
 import { dateInputClass, segmentClass } from './date-field'
 import { useInFocusOverlay } from './focus-context'
+import { fieldDescriptionClass, fieldErrorClass } from './field-appearance'
 
 /**
  * DatePicker — a `DateField` with a calendar popover. Built on React Aria
@@ -106,11 +107,11 @@ export const DatePicker = <T extends DateValue>({ label, description, errorMessa
 				)}
 			</Group>
 			{description ? (
-				<Text slot="description" className="text-label text-fg-muted">
+				<Text slot="description" className={fieldDescriptionClass}>
 					{description}
 				</Text>
 			) : null}
-			<FieldError className="text-label text-danger">{errorMessage}</FieldError>
+			<FieldError className={fieldErrorClass}>{errorMessage}</FieldError>
 			{inFocus ? (
 				<div className="mt-2 -ml-2">
 					<CalendarBody />

package/src/components/field-appearance.ts

@@ -15,3 +15,10 @@ export const filledFieldClasses =
 	'focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 ' +
 	'data-[invalid]:ring-1 data-[invalid]:ring-danger data-[invalid]:outline-danger ' +
 	'data-[disabled]:bg-surface-muted data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed'
+
+/** gs `.helperText` (`--font-size-label-2`): 14px/18px under a field. The source ink
+ * `#7d786f` fails WCAG AA, so it keeps the readable `fg-muted`. */
+export const fieldDescriptionClass = 'text-small text-fg-muted'
+
+/** gs `.errorText`: 16px, line-height normal, error red (`danger`, 4.83:1 on white). */
+export const fieldErrorClass = 'text-body leading-[normal] text-danger'

package/src/components/input.tsx

@@ -8,7 +8,7 @@ import {
 	type TextFieldProps,
 } from 'react-aria-components'
 import { uic } from '../utils/uic'
-import { filledFieldClasses, type FieldAppearance } from './field-appearance'
+import { fieldDescriptionClass, fieldErrorClass, filledFieldClasses, type FieldAppearance } from './field-appearance'
 
 /**
  * Input — labelled single-line text field.
@@ -78,10 +78,10 @@ export const Input = ({ label, description, errorMessage, placeholder, size, app
 		<Label className="text-panel-heading font-medium text-fg">{label}</Label>
 		<StyledInput className={inputClassName} placeholder={placeholder} appearance={appearance} fieldSize={size ?? (appearance === 'filled' ? 'filled' : undefined)} />
 		{description ? (
-			<Text slot="description" className="text-label text-fg-muted">
+			<Text slot="description" className={fieldDescriptionClass}>
 				{description}
 			</Text>
 		) : null}
-		<FieldError className="text-label text-danger">{errorMessage}</FieldError>
+		<FieldError className={fieldErrorClass}>{errorMessage}</FieldError>
 	</TextField>
 )

package/src/components/multiselect.tsx

@@ -14,6 +14,7 @@ import {
 import { clsx } from 'clsx'
 import { uic } from '../utils/uic'
 import { useInFocusOverlay } from './focus-context'
+import { fieldDescriptionClass, fieldErrorClass } from './field-appearance'
 
 /**
  * MultiSelect — a dropdown that selects several options at once.
@@ -142,8 +143,8 @@ export const MultiSelect = ({
 		list
 	)
 
-	const desc = description ? <span className="text-label text-fg-muted">{description}</span> : null
-	const err = isInvalid && errorMessage ? <span className="text-label text-danger">{errorMessage}</span> : null
+	const desc = description ? <span className={fieldDescriptionClass}>{description}</span> : null
+	const err = isInvalid && errorMessage ? <span className={fieldErrorClass}>{errorMessage}</span> : null
 
 	return (
 		<div className={clsx('flex flex-col gap-2', className)}>

package/src/components/number-field.tsx

@@ -9,6 +9,7 @@ import {
 	type NumberFieldProps as RACNumberFieldProps,
 	Text,
 } from 'react-aria-components'
+import { fieldDescriptionClass, fieldErrorClass } from './field-appearance'
 
 /**
  * NumberField — numeric input with steppers, min/max and locale-aware formatting
@@ -51,10 +52,10 @@ export const NumberField = ({ label, description, errorMessage, placeholder, ...
 			</RACButton>
 		</Group>
 		{description ? (
-			<Text slot="description" className="text-label text-fg-muted">
+			<Text slot="description" className={fieldDescriptionClass}>
 				{description}
 			</Text>
 		) : null}
-		<FieldError className="text-label text-danger">{errorMessage}</FieldError>
+		<FieldError className={fieldErrorClass}>{errorMessage}</FieldError>
 	</RACNumberField>
 )

package/src/components/preview-motion.tsx

@@ -15,7 +15,10 @@ import { type CSSProperties, type ReactNode, useEffect, useRef, useState } from
  * All of it is ornamental: every layer is `aria-hidden`, nothing here carries content,
  * and under `prefers-reduced-motion: reduce` neither the timed states nor any motion
  * run (the skeleton shows the source static gradient, the reveal never engages).
- * Colours are the source literals; the skeleton is a fixed light surface by design.
+ * Skeleton colours: the light theme keeps the source literals (#ffffff base, #c7fee0
+ * glow) exactly; under `[data-theme="dark"]` the base follows `surface` and the glow
+ * becomes a brand-green tint of it, so a loading preview is not a white block on the
+ * dark shell.
  */
 
 function usePrefersReducedMotion(): boolean {
@@ -69,9 +72,14 @@ export function useMinimumVisible(active: boolean, minMs = 500): boolean {
 	return reduce ? active : held
 }
 
-const SKELETON_ANIMATED =
-	'linear-gradient(80deg, #ffffff 0%, #ffffff 12.5%, #c7fee0 27.5%, #ffffff 41.5%, #ffffff 50%, #ffffff 62.5%, #c7fee0 77.5%, #ffffff 91.5%, #ffffff 100%)'
-const SKELETON_STATIC = 'linear-gradient(80deg, #ffffff 25%, #c7fee0 55%, #ffffff 83%)'
+const SKELETON_BASE = 'var(--preview-skeleton-base)'
+const SKELETON_GLOW = 'var(--preview-skeleton-glow)'
+const SKELETON_ANIMATED = `linear-gradient(80deg, ${SKELETON_BASE} 0%, ${SKELETON_BASE} 12.5%, ${SKELETON_GLOW} 27.5%, ${SKELETON_BASE} 41.5%, ${SKELETON_BASE} 50%, ${SKELETON_BASE} 62.5%, ${SKELETON_GLOW} 77.5%, ${SKELETON_BASE} 91.5%, ${SKELETON_BASE} 100%)`
+const SKELETON_STATIC = `linear-gradient(80deg, ${SKELETON_BASE} 25%, ${SKELETON_GLOW} 55%, ${SKELETON_BASE} 83%)`
+// Light: the source literals. Dark: theme `surface` with an 18% brand-green glow.
+const SKELETON_THEME =
+	'[--preview-skeleton-base:#ffffff] [--preview-skeleton-glow:#c7fee0] ' +
+	'dark:[--preview-skeleton-base:var(--color-surface)] dark:[--preview-skeleton-glow:color-mix(in_srgb,var(--color-brand-green)_18%,var(--color-surface))]'
 
 export interface PreviewSkeletonProps {
 	/** Accessible status text (translated by the caller), e.g. "Rendering preview". */
@@ -91,7 +99,7 @@ export function PreviewSkeleton({ label, className }: PreviewSkeletonProps) {
 			aria-label={label}
 			aria-hidden={label ? undefined : true}
 			data-preview-skeleton=""
-			className={['absolute inset-0 overflow-hidden', reduce ? '' : 'animate-preview-skeleton-shimmer', className]
+			className={['absolute inset-0 overflow-hidden', SKELETON_THEME, reduce ? '' : 'animate-preview-skeleton-shimmer', className]
 				.filter(Boolean)
 				.join(' ')}
 			style={style}

package/src/components/radio.tsx

@@ -8,6 +8,7 @@ import {
 	type RadioProps as RACRadioProps,
 	Text,
 } from 'react-aria-components'
+import { fieldDescriptionClass, fieldErrorClass } from './field-appearance'
 
 /**
  * RadioGroup + Radio — labelled single-choice control.
@@ -34,11 +35,11 @@ export const RadioGroup = ({ label, description, errorMessage, children, ...prop
 		{label ? <Label className="text-small font-medium text-fg">{label}</Label> : null}
 		<div className="flex flex-col gap-3">{children}</div>
 		{description ? (
-			<Text slot="description" className="text-label text-fg-muted">
+			<Text slot="description" className={fieldDescriptionClass}>
 				{description}
 			</Text>
 		) : null}
-		<FieldError className="text-label text-danger">{errorMessage}</FieldError>
+		<FieldError className={fieldErrorClass}>{errorMessage}</FieldError>
 	</RACRadioGroup>
 )
 

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

@@ -2,6 +2,7 @@ import { type ClipboardEvent as ReactClipboardEvent, type ReactNode, useEffect,
 import { clsx } from 'clsx'
 import { SAFE_LINK_HINT, safeLinkUrl } from '../utils/safe-link-url'
 import { useInFocusOverlay } from './focus-context'
+import { fieldDescriptionClass, fieldErrorClass } from './field-appearance'
 
 /**
  * RichTextEditor — a dependency-free contentEditable WYSIWYG that emits an HTML
@@ -155,8 +156,8 @@ export function RichTextEditor({
 					onPaste={onPaste}
 				/>
 			</div>
-			{description ? <span className="text-label text-fg-muted">{description}</span> : null}
-			{isInvalid && errorMessage ? <span className="text-label text-danger">{errorMessage}</span> : null}
+			{description ? <span className={fieldDescriptionClass}>{description}</span> : null}
+			{isInvalid && errorMessage ? <span className={fieldErrorClass}>{errorMessage}</span> : null}
 		</div>
 	)
 }

package/src/components/search-field.tsx

@@ -7,6 +7,7 @@ import {
 	type SearchFieldProps as RACSearchFieldProps,
 	Text,
 } from 'react-aria-components'
+import { fieldDescriptionClass } from './field-appearance'
 
 /**
  * SearchField — a text input for search, with a clear (✕) button that appears
@@ -58,7 +59,7 @@ export const SearchField = ({ label, description, placeholder, ...props }: Searc
 			</RACButton>
 		</div>
 		{description ? (
-			<Text slot="description" className="text-label text-fg-muted">
+			<Text slot="description" className={fieldDescriptionClass}>
 				{description}
 			</Text>
 		) : null}

package/src/components/section-tabs.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
 import { Button } from './button'
+import { SwitchViewIcon } from './source-icons'
 
 /**
  * SectionTabs — horizontal section/filter tab row (port of gs-platform
@@ -22,6 +23,15 @@ export type SectionTab = {
 	label: ReactNode
 	/** Disabled tabs render dimmed with a "Soon" badge and cannot be selected. */
 	disabled?: boolean
+	/**
+	 * gs `switchable` tab: pressing the already selected tab switches the view
+	 * (e.g. Tasks list and board) instead of re-selecting it. While selected it shows
+	 * the source "switch view" burst before the label, revealed on hover and keyboard
+	 * focus (width 0 to 14px, opacity 0 to 1, 120ms `ease`).
+	 */
+	switchable?: boolean
+	/** Native tooltip on a selected switchable tab (translated, e.g. "Switch view"). */
+	switchHintLabel?: string
 }
 
 export type SectionTabsProps = {
@@ -63,6 +73,14 @@ const tabBase =
 
 const tabActive = 'bg-surface-muted text-fg'
 
+// gs `.tabButton` (switchable form): 12px gap, so the selected tab is 12px wider even
+// while the 0px icon is hidden (measured 77px at rest, 91px on hover for "All (18)").
+const tabSwitchable = 'group/switch'
+const tabSwitchIcon =
+	'h-3.5 w-0 shrink-0 overflow-hidden opacity-0 transition-[width,opacity] duration-120 ease-[ease] motion-reduce:transition-none ' +
+	'group-data-[hovered]/switch:w-3.5 group-data-[hovered]/switch:opacity-100 ' +
+	'group-data-[focus-visible]/switch:w-3.5 group-data-[focus-visible]/switch:opacity-100'
+
 export function SectionTabs({
 	tabs,
 	active,
@@ -105,6 +123,7 @@ export function SectionTabs({
 			) : null}
 			{tabs.map((tab) => {
 				const selected = active === tab.key
+				const switchHint = Boolean(tab.switchable && selected && !tab.disabled)
 				return (
 					<Button
 						key={tab.key}
@@ -112,9 +131,20 @@ export function SectionTabs({
 						isDisabled={tab.disabled}
 						aria-pressed={selected}
 						onPress={() => onChange(tab.key)}
-						className={[tabBase, selected && !tab.disabled ? tabActive : ''].filter(Boolean).join(' ')}
+						data-switchable={switchHint || undefined}
+						className={[tabBase, selected && !tab.disabled ? tabActive : '', switchHint ? tabSwitchable : '']
+							.filter(Boolean)
+							.join(' ')}
 					>
-						<span>{tab.label}</span>
+						{switchHint ? (
+							// React Aria's Button drops `title`, so the native hint rides on the content.
+							<span title={tab.switchHintLabel} className="inline-flex items-center gap-3">
+								<SwitchViewIcon className={tabSwitchIcon} />
+								<span>{tab.label}</span>
+							</span>
+						) : (
+							<span>{tab.label}</span>
+						)}
 						{tab.disabled ? (
 							<span className="inline-flex items-center rounded-full bg-surface-muted px-1.5 py-0.5 text-micro font-medium leading-none text-fg-muted">
 								{soonLabel}

package/src/components/select.tsx

@@ -14,7 +14,7 @@ import {
 } from 'react-aria-components'
 import { uic } from '../utils/uic'
 import { useInFocusOverlay } from './focus-context'
-import type { FieldAppearance } from './field-appearance'
+import { fieldDescriptionClass, fieldErrorClass, type FieldAppearance } from './field-appearance'
 
 const SelectAppearanceContext = createContext<FieldAppearance>('outlined')
 const filledPopoverStyle: CSSProperties & { '--select-popup-max-width': string } = {
@@ -143,11 +143,11 @@ export const Select = <T extends object>({
 		</SelectListBox>
 	)
 	const desc = description ? (
-		<Text slot="description" className="text-label text-fg-muted">
+		<Text slot="description" className={fieldDescriptionClass}>
 			{description}
 		</Text>
 	) : null
-	const err = <FieldError className="text-label text-danger">{errorMessage}</FieldError>
+	const err = <FieldError className={fieldErrorClass}>{errorMessage}</FieldError>
 
 	return (
 		<SelectAppearanceContext.Provider value={appearance}>

package/src/components/source-icons.tsx

@@ -0,0 +1,60 @@
+import type { IconProps } from './icons'
+
+/**
+ * Original Manager glyphs that the curated 24px line set in `icons.tsx` has no
+ * equivalent for. The Radix ones are Radix Icons 1.3.2 (MIT) on their 15px grid,
+ * filled with `currentColor`, exactly as the Manager rendered them (the document
+ * library Scope / Role / Status column headers). `SwitchViewIcon` is the Manager's
+ * 16px "switch view" burst shown on a selected switchable section tab.
+ *
+ * All are decorative (`aria-hidden`); size via width/height or `className`.
+ */
+
+/** Radix `LayersIcon` (document library "Scope" header). */
+export const LayersIcon = (props: IconProps) => (
+	<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true" {...props}>
+		<path
+			d="M7.75432 0.819537C7.59742 0.726821 7.4025 0.726821 7.24559 0.819537L1.74559 4.06954C1.59336 4.15949 1.49996 4.32317 1.49996 4.5C1.49996 4.67683 1.59336 4.84051 1.74559 4.93046L7.24559 8.18046C7.4025 8.27318 7.59742 8.27318 7.75432 8.18046L13.2543 4.93046C13.4066 4.84051 13.5 4.67683 13.5 4.5C13.5 4.32317 13.4066 4.15949 13.2543 4.06954L7.75432 0.819537ZM7.49996 7.16923L2.9828 4.5L7.49996 1.83077L12.0171 4.5L7.49996 7.16923ZM1.5695 7.49564C1.70998 7.2579 2.01659 7.17906 2.25432 7.31954L7.49996 10.4192L12.7456 7.31954C12.9833 7.17906 13.2899 7.2579 13.4304 7.49564C13.5709 7.73337 13.4921 8.03998 13.2543 8.18046L7.75432 11.4305C7.59742 11.5232 7.4025 11.5232 7.24559 11.4305L1.74559 8.18046C1.50786 8.03998 1.42901 7.73337 1.5695 7.49564ZM1.56949 10.4956C1.70998 10.2579 2.01658 10.1791 2.25432 10.3195L7.49996 13.4192L12.7456 10.3195C12.9833 10.1791 13.2899 10.2579 13.4304 10.4956C13.5709 10.7334 13.4921 11.04 13.2543 11.1805L7.75432 14.4305C7.59742 14.5232 7.4025 14.5232 7.24559 14.4305L1.74559 11.1805C1.50785 11.04 1.42901 10.7334 1.56949 10.4956Z"
+			fill="currentColor"
+			fillRule="evenodd"
+			clipRule="evenodd"
+		/>
+	</svg>
+)
+
+/** Radix `BadgeIcon` (document library "Role" header). */
+export const BadgeIcon = (props: IconProps) => (
+	<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true" {...props}>
+		<path
+			d="M3.5 6H11.5C12.3284 6 13 6.67157 13 7.5C13 8.32843 12.3284 9 11.5 9H3.5C2.67157 9 2 8.32843 2 7.5C2 6.67157 2.67157 6 3.5 6ZM1 7.5C1 6.11929 2.11929 5 3.5 5H11.5C12.8807 5 14 6.11929 14 7.5C14 8.88071 12.8807 10 11.5 10H3.5C2.11929 10 1 8.88071 1 7.5ZM4.5 7C4.22386 7 4 7.22386 4 7.5C4 7.77614 4.22386 8 4.5 8H10.5C10.7761 8 11 7.77614 11 7.5C11 7.22386 10.7761 7 10.5 7H4.5Z"
+			fill="currentColor"
+			fillRule="evenodd"
+			clipRule="evenodd"
+		/>
+	</svg>
+)
+
+/** Radix `CheckCircledIcon` (document library "Status" header). */
+export const CheckCircledIcon = (props: IconProps) => (
+	<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true" {...props}>
+		<path
+			d="M7.49991 0.877045C3.84222 0.877045 0.877075 3.84219 0.877075 7.49988C0.877075 11.1575 3.84222 14.1227 7.49991 14.1227C11.1576 14.1227 14.1227 11.1575 14.1227 7.49988C14.1227 3.84219 11.1576 0.877045 7.49991 0.877045ZM1.82708 7.49988C1.82708 4.36686 4.36689 1.82704 7.49991 1.82704C10.6329 1.82704 13.1727 4.36686 13.1727 7.49988C13.1727 10.6329 10.6329 13.1727 7.49991 13.1727C4.36689 13.1727 1.82708 10.6329 1.82708 7.49988ZM10.1589 5.53774C10.3178 5.31191 10.2636 5.00001 10.0378 4.84109C9.81194 4.68217 9.50004 4.73642 9.34112 4.96225L6.51977 8.97154L5.35681 7.78706C5.16334 7.59002 4.84677 7.58711 4.64973 7.78058C4.45268 7.97404 4.44978 8.29061 4.64325 8.48765L6.22658 10.1003C6.33054 10.2062 6.47617 10.2604 6.62407 10.2483C6.77197 10.2363 6.90686 10.1591 6.99226 10.0377L10.1589 5.53774Z"
+			fill="currentColor"
+			fillRule="evenodd"
+			clipRule="evenodd"
+		/>
+	</svg>
+)
+
+/** Manager "switch view" burst (16px grid, 1.5px round stroke). */
+export const SwitchViewIcon = (props: IconProps) => (
+	<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" {...props}>
+		<path d="M8 2V6M8 10V14M2 8H6M10 8H14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+		<path
+			d="M11.657 4.343L13.071 2.929M2.929 13.071L4.343 11.657M13.071 13.071L11.657 11.657M4.343 4.343L2.929 2.929"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+		/>
+	</svg>
+)

package/src/components/tag-group.tsx

@@ -9,6 +9,7 @@ import {
 	TagList,
 	Text,
 } from 'react-aria-components'
+import { fieldDescriptionClass } from './field-appearance'
 
 /**
  * TagGroup + Tag — a set of chips (labels, filters, or a removable tag input).
@@ -26,7 +27,7 @@ export const TagGroup = ({ label, description, children, ...props }: TagGroupPro
 		{label ? <Label className="text-heading5 font-medium text-fg">{label}</Label> : null}
 		<TagList className="flex flex-wrap gap-2 outline-none">{children}</TagList>
 		{description ? (
-			<Text slot="description" className="text-label text-fg-muted">
+			<Text slot="description" className={fieldDescriptionClass}>
 				{description}
 			</Text>
 		) : null}

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

@@ -37,7 +37,7 @@ export const CatalogSummaryGrid = uic('div', { displayName: 'CatalogSummaryGrid'
 const SummaryHead = uic('div', { displayName: 'CatalogSummaryHead', baseClass: 'flex w-full min-w-0 items-center justify-between gap-3' })
 export const CatalogSummaryBadge = uic('span', { displayName: 'CatalogSummaryBadge', baseClass: 'ml-3 flex h-6 shrink-0 items-center rounded-2xl px-2.5 text-micro font-medium leading-5', style: { fontFeatureSettings: '"liga" off, "clig" off' }, variants: { color: { green: 'bg-brand-green text-fg-on-brand', grey: 'bg-surface-muted text-(--color-neutral-600)' } }, defaultVariants: { color: 'grey' } })
 const SummaryTitle = uic('h2', { displayName: 'CatalogSummaryTitle', baseClass: 'm-0 min-w-0 truncate text-heading5 font-medium' })
-const SummaryTail = uic('div', { displayName: 'CatalogSummaryTail', baseClass: 'mt-auto flex flex-col gap-1 text-small font-normal text-fg-workflow-muted' })
+const SummaryTail = uic('div', { displayName: 'CatalogSummaryTail', baseClass: 'mt-auto flex flex-col gap-1 text-small font-normal text-fg-muted' })
 /** Source gs Tile image cover: caller artwork under a transparent → 30% → 50% black gradient. */
 function CatalogCover({ preview }: { preview: ReactNode }) {
 	return <>

package/src/components/textarea.tsx

@@ -8,7 +8,7 @@ import {
 	type TextFieldProps,
 } from 'react-aria-components'
 import { uic } from '../utils/uic'
-import { filledFieldClasses, type FieldAppearance } from './field-appearance'
+import { fieldDescriptionClass, fieldErrorClass, filledFieldClasses, type FieldAppearance } from './field-appearance'
 
 /**
  * Textarea — labelled multi-line text field.
@@ -64,10 +64,10 @@ export const Textarea = ({ label, description, errorMessage, placeholder, rows,
 		<Label className="text-panel-heading font-medium text-fg">{label}</Label>
 		<StyledTextArea className={textAreaClassName} placeholder={placeholder} rows={rows} appearance={appearance} />
 		{description ? (
-			<Text slot="description" className="text-label text-fg-muted">
+			<Text slot="description" className={fieldDescriptionClass}>
 				{description}
 			</Text>
 		) : null}
-		<FieldError className="text-label text-danger">{errorMessage}</FieldError>
+		<FieldError className={fieldErrorClass}>{errorMessage}</FieldError>
 	</TextField>
 )

package/src/index.ts

@@ -33,6 +33,8 @@ export * from "./components/document-upload-panel";
 export * from "./components/csv-binding-presentation";
 export * from "./components/dialog-action-button";
 export * from "./components/reload-icon";
+export * from "./components/source-icons";
+export * from "./components/animated-summary-text";
 export * from "./components/date-field";
 export * from "./components/date-picker";
 export * from "./components/dialog";