@podoba/react 0.0.34 → 0.0.36

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

@@ -0,0 +1,179 @@
+import type { CSSProperties, ReactNode } from 'react'
+import { Button as AriaButton } from 'react-aria-components'
+import { uic } from '../utils/uic'
+import { Tile } from './tile'
+
+export const TEMPLATE_CATALOG_SELECTIONS = ['available', 'selected'] as const
+export type TemplateCatalogSelection = (typeof TEMPLATE_CATALOG_SELECTIONS)[number]
+
+/** Legacy StatsCard label-1 value, distinct from the Tile heading ramp. */
+export const CatalogMetricValue = uic('span', {
+	displayName: 'CatalogMetricValue',
+	baseClass: 'block w-full text-center text-display-large font-medium leading-(--line-height-display-large) tracking-wider',
+})
+
+export const CATALOG_METRIC_FOOTERS = ['present', 'missing'] as const
+export type CatalogMetricFooter = (typeof CATALOG_METRIC_FOOTERS)[number]
+const MetricContent = uic('div', {
+	displayName: 'CatalogMetricContent',
+	baseClass: 'flex min-h-0 w-full flex-1 flex-col items-center justify-center text-center',
+	variants: { footer: { present: '', missing: 'pb-12' } },
+})
+
+/** Compact source statistics: preserve the centered content band without a tail. */
+export function CatalogMetricCard({ title, value, footer, onPress, 'aria-label': ariaLabel }: {
+	title: string; value: ReactNode; footer?: string; onPress?: () => void; 'aria-label'?: string
+}) {
+	return <Tile theme="light" eyebrow={title} footer={footer || undefined} onPress={onPress}
+		aria-label={ariaLabel} className="h-52 min-h-52 max-h-52">
+		<MetricContent data-slot="catalog-metric-content" footer={footer ? 'present' : 'missing'}>
+			<CatalogMetricValue>{value}</CatalogMetricValue>
+		</MetricContent>
+	</Tile>
+}
+
+const SummaryCard = uic('article', { displayName: 'CatalogSummaryCard', baseClass: 'flex h-95 w-full min-w-0 flex-col gap-6 overflow-hidden rounded-lg bg-surface-card p-4 text-fg' })
+export const CatalogSummaryGrid = uic('div', { displayName: 'CatalogSummaryGrid', baseClass: 'grid w-full min-w-0 grid-cols-1 gap-x-2 gap-y-4 overflow-x-hidden min-[768px]:grid-cols-3 min-[768px]:gap-x-3' })
+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' })
+/** Display-only catalog tile. No synthetic imagery when a preview is absent. */
+export function CatalogSummaryCard({ title, badge, description, details }: { title: string; badge: ReactNode; description?: string; details: ReactNode }) {
+	return <SummaryCard><SummaryHead><SummaryTitle>{title}</SummaryTitle><span className="shrink-0">{badge}</span></SummaryHead><SummaryTail>{description ? <p className="m-0">{description}</p> : null}<span>{details}</span></SummaryTail></SummaryCard>
+}
+
+/** Compact launcher card. Missing artwork is not replaced by synthetic imagery. */
+export function CatalogLaunchCard({ title, description, details, action }: { title: string; description?: string; details: ReactNode; action: ReactNode }) {
+	return <SummaryCard data-testid="scenario-launch-card" className="relative h-70 min-h-70 max-h-70 transition-colors duration-200 focus-within:ring-2 focus-within:ring-ring">
+		<SummaryHead><SummaryTitle asChild><h3>{title}</h3></SummaryTitle></SummaryHead>
+		<SummaryTail>{description ? <p className="m-0">{description}</p> : null}<span>{details}</span></SummaryTail>
+		{action}
+	</SummaryCard>
+}
+
+const MetadataSection = uic('section', { displayName: 'CatalogMetadataSection', baseClass: 'm-0 w-full' })
+/** Source metadata layout: full-width identity, paired attributes, wrapping IDs. */
+export function CatalogMetadataSummary({ title, ariaLabel, items }: {
+	title: string; ariaLabel: string; items: { label: string; value: ReactNode; fullWidth?: boolean }[]
+}) {
+	let column = 0
+	return <MetadataSection aria-label={ariaLabel}>
+		<h2 className="mb-3 mt-0 text-heading3 font-medium text-fg">{title}</h2>
+		<dl className="m-0 grid w-full grid-cols-1 border-t border-border min-[641px]:grid-cols-2">
+			{items.map(item => {
+				const second = !item.fullWidth && column % 2 === 1
+				column = item.fullWidth ? 0 : column + 1
+				return <div key={item.label} className={`flex min-w-0 flex-col gap-1 border-b border-border py-3 ${item.fullWidth ? 'col-span-full' : ''} ${second ? 'min-[641px]:border-l min-[641px]:pl-3' : ''}`}>
+					{/* #25: the term of a definition list is meaningful copy — AA `fg-muted`. */}
+					<dt className="m-0 text-body font-normal text-fg-muted">{item.label}</dt>
+					<dd className="m-0 text-body font-normal text-fg [overflow-wrap:anywhere]">{item.value}</dd>
+				</div>
+			})}
+		</dl>
+	</MetadataSection>
+}
+
+export const TEMPLATE_REFERENCE_VIEWS = ['preview_grid', 'compact_list'] as const
+export type TemplateReferenceView = (typeof TEMPLATE_REFERENCE_VIEWS)[number]
+export const TemplateReferenceGrid = uic('div', {
+	displayName: 'TemplateReferenceGrid',
+	baseClass: 'grid w-full grid-cols-1 gap-3',
+	variants: { columns: { 1: 'grid-cols-1', 2: 'min-[761px]:grid-cols-2', 3: 'min-[761px]:grid-cols-3' } },
+	defaultVariants: { columns: 1 },
+})
+export const TemplateReferenceList = uic('div', {
+	displayName: 'TemplateReferenceList', baseClass: 'flex w-full flex-col gap-2',
+})
+const ReferenceButton = uic(AriaButton, {
+	displayName: 'TemplateReferenceButton',
+	baseClass: 'w-full cursor-pointer border-0 p-0 text-start outline-none disabled:cursor-default data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2',
+	variants: { view: {
+		preview_grid: 'flex aspect-square items-center justify-center overflow-hidden rounded-lg bg-surface-card',
+		compact_list: 'grid min-h-14 grid-cols-[3rem_minmax(0,1fr)] items-center gap-3 border-b border-border bg-transparent last:border-b-0',
+	} },
+})
+/** Read-only browsing surfaces: activation opens a preview, never selects it. */
+export function TemplateReferenceItem({ title, meta, preview, view, isDisabled, onOpen, templateId }: {
+	title: string; meta: string; preview: ReactNode; view: TemplateReferenceView
+	isDisabled?: boolean; onOpen: () => void; templateId: string
+}) {
+	return <ReferenceButton type="button" view={view} isDisabled={isDisabled} onPress={onOpen} aria-label={title} data-template-id={templateId}>
+		<span aria-hidden="true" className={view === 'compact_list' ? 'flex size-12 items-center justify-center overflow-hidden rounded-sm bg-surface-card [&>div]:w-full' : 'flex h-full w-full items-center justify-center [&>div]:w-full'}>{preview}</span>
+		{view === 'compact_list' ? <span className="flex min-w-0 flex-col gap-1"><span className="truncate text-small font-medium text-fg">{title}</span><span className="truncate text-label font-medium text-fg-muted">{meta}</span></span> : null}
+	</ReferenceButton>
+}
+
+export const TemplateCatalogGrid = uic('div', {
+	displayName: 'TemplateCatalogGrid',
+	baseClass: 'grid w-full min-w-0 grid-cols-1 items-stretch gap-2 p-0 md:grid-cols-2 md:gap-3 lg:grid-cols-3',
+})
+
+const Card = uic(AriaButton, {
+	displayName: 'TemplateCatalogCardSurface',
+	baseClass: 'group box-border flex h-(--template-catalog-height) min-w-0 w-full cursor-pointer flex-col gap-6 overflow-hidden rounded-lg border-0 p-4 text-start outline-none transition-colors duration-200 motion-reduce:transition-none hover:bg-brand-green hover:text-fg-on-brand data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2',
+	variants: {
+		selection: {
+			available: 'bg-surface-card text-fg',
+			selected: 'bg-brand-green text-fg-on-brand',
+		},
+	},
+	defaultVariants: { selection: 'available' },
+})
+const Title = uic('span', {
+	displayName: 'TemplateCatalogCardTitle',
+	baseClass: 'block min-h-5 min-w-0 shrink-0 text-body font-medium leading-5',
+})
+const Preview = uic('span', {
+	displayName: 'TemplateCatalogCardPreview',
+	baseClass: 'box-border flex min-h-0 w-full flex-1 items-center justify-center overflow-hidden rounded-md bg-transparent p-3 [&>div]:w-full',
+})
+
+const geometry: CSSProperties & { '--template-catalog-height': string } = {
+	'--template-catalog-height': 'clamp(calc(var(--spacing) * 64), 30vw, calc(var(--spacing) * 76))',
+	letterSpacing: 0,
+}
+
+export const TemplateCatalogBrowseGrid = uic('div', {
+	displayName: 'TemplateCatalogBrowseGrid',
+	baseClass: 'grid w-full min-w-0 grid-cols-1 items-stretch gap-2 p-0 md:grid-cols-2 md:gap-3 lg:grid-cols-4',
+})
+const BrowseCard = uic('div', {
+	displayName: 'TemplateCatalogBrowseSurface',
+	baseClass: 'box-border flex h-(--template-catalog-height) min-w-0 w-full cursor-default flex-col gap-6 overflow-hidden rounded-lg border-0 bg-surface-card p-4 text-start text-fg outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+})
+/** Legacy readOnly catalog: no activation, hover shadow or extra card CTA. */
+export function TemplateCatalogBrowseCard({ title, preview, templateId, id, testId }: {
+	title: string; preview: ReactNode; templateId: string; id?: string; testId?: string
+}) {
+	return <BrowseCard role="group" tabIndex={0} aria-label={title} id={id} data-catalog-template-id={templateId} data-testid={testId} style={geometry}>
+		<Title>{title}</Title><Preview aria-hidden="true" className="pointer-events-none">{preview}</Preview>
+	</BrowseCard>
+}
+
+/** Selection-only catalog tile. No badge, selected ring, nested action, or artwork
+ * rounding is added. A locked assignment stays focusable and selected, just as in
+ * the original catalog; aria-disabled and the press guard prevent its removal.
+ * The caller owns selection and supplies a non-interactive, contain-fit preview.
+ */
+export function TemplateCatalogCard({ title, preview, isSelected = false, isSelectionLocked = false,
+	onToggle, onOpen, templateId, testId,
+}: {
+	title: string
+	preview: ReactNode
+	isSelected?: boolean
+	isSelectionLocked?: boolean
+	onToggle?: () => void
+	/** Browsing mode opens a preview, without announcing a toggle state. */
+	onOpen?: () => void
+	templateId?: string
+	testId?: string
+}) {
+	return <Card type="button" selection={isSelected ? 'selected' : 'available'}
+		aria-label={title} aria-pressed={onOpen ? undefined : isSelected} aria-disabled={isSelectionLocked}
+		data-template-id={templateId} data-testid={testId} style={geometry}
+		onPress={() => { if (!isSelectionLocked) { if (onOpen) onOpen(); else onToggle?.() } }}>
+		<Title>{title}</Title>
+		<Preview aria-hidden="true">{preview}</Preview>
+	</Card>
+}

package/src/components/text.tsx

@@ -68,11 +68,24 @@ export const Text = uic('span', {
 			semibold: 'font-medium',
 			bold: 'font-medium',
 		},
+		// `fg-subtle` (#b3b3b3) is 2.10:1 on `surface` — below even the 3:1
+		// large-text floor — so it can never carry meaningful copy. `subtle` is
+		// therefore an AA-safe alias of `muted` (same approach as the semibold /
+		// bold aliases above: the key survives so consumers don't break), and the
+		// light grey moved behind the explicit `decorative` key. See <Subtle>.
+		// NOTE: `default`/`muted` are the READING-surface inks. Surfaces that carry
+		// their own ink need the matching tone — `fg-muted` is 2.60:1 on
+		// `surface-inverted` and 3.60–4.01:1 on the fixed brand fills. Pair
+		// `inverted` there, `on-brand` on brand-green / accent-yellow /
+		// brand-secondary. (`Subtle` has de-emphasised /60 · /70 variants of the
+		// same two for a softened run.)
 		tone: {
 			default: 'text-fg',
 			muted: 'text-fg-muted',
-			subtle: 'text-fg-subtle',
+			subtle: 'text-fg-muted',
+			decorative: 'text-fg-subtle',
 			inverted: 'text-fg-inverted',
+			'on-brand': 'text-fg-on-brand',
 		},
 	},
 	defaultVariants: { size: 'body', weight: 'regular', tone: 'default' },

package/src/components/textarea.examples.tsx

@@ -0,0 +1,8 @@
+import { Textarea } from './textarea'
+
+export const examples = {
+	default: () => <Textarea label="Project name" placeholder="Annual report" />,
+	variants: () => <><Textarea label="Outlined" /><Textarea appearance="filled" label="Filled" placeholder="Annual report" /></>,
+	states: () => <><Textarea appearance="filled" label="Disabled" defaultValue="Saved content" isDisabled /><Textarea appearance="filled" label="Invalid" isInvalid errorMessage="Check the value." /></>,
+}
+export const meta = { category: 'Form', description: 'Labelled textarea with outlined and Manager-style filled appearances, disabled/error states and keyboard focus.' }

package/src/components/textarea.tsx

@@ -8,6 +8,7 @@ import {
 	type TextFieldProps,
 } from 'react-aria-components'
 import { uic } from '../utils/uic'
+import { filledFieldClasses, type FieldAppearance } from './field-appearance'
 
 /**
  * Textarea — labelled multi-line text field.
@@ -26,16 +27,23 @@ const StyledTextArea = uic(RACTextArea, {
 	// (surface), disabled = muted cream. border #eceae1 → border · hover #aba89c →
 	// fg-subtle · focus #75e7b8 → brand-green · error → danger. min-h-[120px] is a
 	// control dimension (not a design token) — gs uses a literal 120px here too.
-	baseClass:
-		'min-h-[120px] w-full resize-y rounded-lg border border-border bg-surface px-4 py-3 text-small text-fg ' +
+	baseClass: 'min-h-30 w-full resize-y rounded-lg px-4 py-3',
+	variants: {
+		appearance: {
+			filled: filledFieldClasses,
+			outlined: 'border border-border bg-surface text-small text-fg ' +
 		'outline-none transition-colors duration-200 placeholder:text-fg-muted ' +
 		'data-[hovered]:border-fg-subtle ' +
 		'data-[focused]:border-brand-green data-[focused]:ring-2 data-[focused]:ring-ring ' +
 		'data-[invalid]:border-danger data-[invalid]:ring-danger ' +
 		'data-[disabled]:bg-surface-muted data-[disabled]:opacity-60 data-[disabled]:pointer-events-none',
+		},
+	},
+	defaultVariants: { appearance: 'outlined' },
 })
 
 export type TextareaProps = TextFieldProps & {
+	appearance?: FieldAppearance
 	/** Visible field label (required for accessibility). */
 	label: ReactNode
 	/** Helper text rendered under the field. */
@@ -45,12 +53,14 @@ export type TextareaProps = TextFieldProps & {
 	placeholder?: string
 	/** Initial visible row count (the field still grows / resizes vertically). */
 	rows?: number
+	/** Optional class for the inner native textarea, used by source-specific modal layouts. */
+	textAreaClassName?: string
 }
 
-export const Textarea = ({ label, description, errorMessage, placeholder, rows, ...props }: TextareaProps) => (
-	<TextField {...props} className="flex w-full flex-col gap-2">
-		<Label className="text-small font-medium text-fg">{label}</Label>
-		<StyledTextArea placeholder={placeholder} rows={rows} />
+export const Textarea = ({ label, description, errorMessage, placeholder, rows, textAreaClassName, appearance = 'outlined', ...props }: TextareaProps) => (
+	<TextField {...props} className={`flex w-full flex-col ${appearance === 'filled' ? 'gap-3' : 'gap-2'}`}>
+		<Label className={`${appearance === 'filled' ? 'text-panel-heading' : 'text-small'} 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">
 				{description}

package/src/components/tile.tsx

@@ -29,16 +29,14 @@ export type TileTheme = 'light' | 'dark' | 'teal' | 'yellow'
 export type TileAlign = 'top' | 'center'
 
 const THEME: Record<TileTheme, string> = {
-	// Light tiles carry a visible hairline; dark/colored use a transparent border so
-	// every tile keeps the same box size (no 1px shift between themes).
 	// Every surface pairs with ITS semantic foreground (never raw white / bare fg):
 	// `surface-inverted` flips with the theme so it needs the flipping `fg-inverted`;
 	// teal/yellow are FIXED light surfaces so they need the stable `fg-on-brand` ink
 	// (theme-flipping `fg` went white-on-pastel in a dark shell).
-	light: 'border border-border bg-surface-card text-fg',
-	dark: 'border border-transparent bg-surface-inverted text-fg-inverted',
-	teal: 'border border-transparent bg-brand-secondary text-fg-on-brand',
-	yellow: 'border border-transparent bg-accent-yellow text-fg-on-brand',
+	light: 'bg-surface-card text-fg',
+	dark: 'bg-surface-inverted text-fg-inverted',
+	teal: 'bg-brand-green text-fg-on-brand',
+	yellow: 'bg-accent-yellow text-fg-on-brand',
 }
 
 // The shared inner for EVERY tile (gs `DashboardContentCard`): 16px padding
@@ -46,10 +44,8 @@ const THEME: Record<TileTheme, string> = {
 // grid cell; `min-h` floors it.
 const baseSurface = 'flex h-full min-h-[200px] flex-col gap-6 overflow-hidden rounded-lg p-4'
 
-/** Hover-lift + focus ring applied only when the tile is interactive. */
-const interactive =
-	'no-underline outline-none transition-[transform,box-shadow] duration-150 ' +
-	'hover:-translate-y-1 hover:shadow-lg focus-visible:ring-2 focus-visible:ring-ring'
+/** Focus treatment for interactive tiles; generic tiles do not lift or cast a shadow. */
+const interactive = 'no-underline outline-none focus-visible:ring-2 focus-visible:ring-ring'
 
 export type TileProps = {
 	/** Surface theme (gs's Figma palette). */
@@ -105,10 +101,12 @@ function titleTone(theme: TileTheme, subtle: boolean): string {
 }
 
 /**
- * Muted supporting text / footer tone per surface. `fg-muted` is tuned for white —
- * on the colored surfaces it drops below AA, so those blend their own paired ink
- * instead (/60 · /70 keep ≥4.5:1 in both themes — verified by the contrast test
- * in @podoba/tokens).
+ * Muted supporting text / footer tone per surface. `fg-muted` is tuned for the READING
+ * surfaces — after #19 it clears AA on all of them, white included, but the binding one
+ * is `surface-muted`/`border` #eceae1, not white. On the colored and inverted surfaces
+ * it still drops below AA (2.60:1 on `surface-inverted`), so those blend their own
+ * paired ink instead (/60 · /70 keep ≥4.5:1 in both themes — verified by the contrast
+ * test in @podoba/tokens).
  */
 function mutedTone(theme: TileTheme): string {
 	if (theme === 'dark') return 'text-fg-inverted/60'
@@ -134,7 +132,7 @@ function TileBands({
 > & { theme: TileTheme }) {
 	const titleNode =
 		title != null ? (
-			<p className={`${tileStatClass} ${theme === 'dark' ? 'tracking-normal' : 'tracking-wide'} ${titleTone(theme, subtleTitle)}`}>
+			<p className={`${tileStatClass} ${titleTone(theme, subtleTitle)}`}>
 				{title}
 			</p>
 		) : null
@@ -386,8 +384,9 @@ const BADGE: Record<BadgeColor, string> = {
 	// brand green for every green tag (New, Active, Published), matching gs 1:1.
 	// Pairing rule (same as Tile THEME): fixed light surfaces take the stable
 	// `fg-on-brand` ink, the flipping inverted surface takes `fg-inverted`, and grey
-	// takes full `fg` — `fg-muted` on `surface-muted` was ~3.7:1, under the 4.5:1
-	// AA floor for caption-size text.
+	// takes full `fg`. #19 lifted `fg-muted` on `surface-muted` from 3.64:1 to 4.96:1,
+	// so it is no longer disqualified outright — a Badge is caption-size and keeps the
+	// stronger ink deliberately, for the margin rather than for compliance.
 	green: 'bg-brand-green text-fg-on-brand',
 	yellow: 'bg-accent-yellow text-fg-on-brand',
 	grey: 'bg-surface-muted text-fg',

package/src/editor/block-editor.tsx

@@ -84,6 +84,36 @@ const SLASH_COMMANDS: readonly SlashCommand[] = [
  * stored — so the menu can be re-placed on scroll/resize without stale coordinates. */
 type SlashState = { from: number; query: string; index: number }
 
+/** Tallest the palette is ever allowed to grow; past this it scrolls. */
+const MENU_MAX_H = 288
+
+/** Caret box + palette size + viewport, in viewport coords. */
+type PlaceInput = { caretTop: number; caretBottom: number; caretLeft: number; wanted: number; width: number; viewportW: number; viewportH: number }
+
+/**
+ * Resolve the palette's fixed position from the caret. Below the caret by default;
+ * flipped above only when above is genuinely roomier; height always capped to the
+ * room on the chosen side so it scrolls rather than overflowing. Both branches are
+ * anchored to the caret, so no result ever needs clamping away from it.
+ * Exported for tests.
+ */
+export function placeSlashMenu({ caretTop, caretBottom, caretLeft, wanted, width, viewportW, viewportH }: PlaceInput): { left: number; top: number; maxHeight: number } {
+	const gap = 6
+	const edge = 8
+	const below = viewportH - edge - (caretBottom + gap)
+	const above = caretTop - gap - edge
+	// Flip only when it buys room. Flipping on any bottom overflow and clamping the
+	// result to `edge` parked the palette at the top of the viewport — over the page
+	// header — whenever the caret sat high in a short viewport.
+	const flip = wanted > below && above > below
+	const maxHeight = Math.max(0, Math.min(wanted, flip ? above : below))
+	return {
+		left: Math.max(edge, Math.min(caretLeft, viewportW - width - edge)),
+		top: flip ? caretTop - gap - maxHeight : caretBottom + gap,
+		maxHeight,
+	}
+}
+
 /** Filter the palette by title or keyword. Exported for tests. */
 export function filterCommands(query: string): SlashCommand[] {
 	const q = query.trim().toLowerCase()
@@ -154,7 +184,7 @@ export function BlockEditor({ value, onChange, placeholder = "Write, or press '/
 	const linkInputRef = useRef<HTMLInputElement>(null)
 
 	const menuRef = useRef<HTMLDivElement>(null)
-	const [menuPos, setMenuPos] = useState<{ left: number; top: number } | null>(null)
+	const [menuPos, setMenuPos] = useState<{ left: number; top: number; maxHeight: number } | null>(null)
 	// The palette portals to <body>, so mount first — a portal has no server render.
 	const [mounted, setMounted] = useState(false)
 	useEffect(() => setMounted(true), [])
@@ -303,8 +333,7 @@ export function BlockEditor({ value, onChange, placeholder = "Write, or press '/
 	)
 	runSlashRef.current = runSlash
 
-	// Place the palette from the caret's CURRENT viewport coords, clamped into the
-	// viewport and flipped above the caret when it would overflow the bottom.
+	// Place the palette from the caret's CURRENT viewport coords.
 	const placeMenu = useCallback(() => {
 		const s = slashRef.current
 		const el = menuRef.current
@@ -312,13 +341,19 @@ export function BlockEditor({ value, onChange, placeholder = "Write, or press '/
 		const size = editor.state.doc.content.size
 		if (s.from > size) return setSlash(null)
 		const caret = editor.view.coordsAtPos(s.from)
-		const rect = el.getBoundingClientRect()
-		const gap = 6
-		const edge = 8
-		let top = caret.bottom + gap
-		if (top + rect.height > window.innerHeight - edge) top = Math.max(edge, caret.top - gap - rect.height)
-		const left = Math.max(edge, Math.min(caret.left, window.innerWidth - rect.width - edge))
-		setMenuPos((prev) => (prev && prev.left === left && prev.top === top ? prev : { left, top }))
+		const next = placeSlashMenu({
+			caretTop: caret.top,
+			caretBottom: caret.bottom,
+			caretLeft: caret.left,
+			// Measure the CONTENT, not the box — the box already carries the cap from the
+			// last placement, so measuring it would let one tight spot shrink every
+			// placement after it. +2 for the 1px border (scrollHeight omits borders).
+			wanted: Math.min(MENU_MAX_H, el.scrollHeight + 2),
+			width: el.getBoundingClientRect().width,
+			viewportW: window.innerWidth,
+			viewportH: window.innerHeight,
+		})
+		setMenuPos((prev) => (prev && prev.left === next.left && prev.top === next.top && prev.maxHeight === next.maxHeight ? prev : next))
 	}, [editor, setSlash])
 
 	useLayoutEffect(() => {
@@ -424,7 +459,7 @@ export function BlockEditor({ value, onChange, placeholder = "Write, or press '/
 										aria-label="Link URL"
 										aria-invalid={linkError ? true : undefined}
 										placeholder="https://, mailto:, /path"
-										className="h-8 w-56 rounded-md border border-border bg-surface px-2 text-small text-fg outline-none placeholder:text-fg-subtle focus:border-brand-green"
+										className="h-8 w-56 rounded-md border border-border bg-surface px-2 text-small text-fg outline-none placeholder:text-fg-muted focus:border-brand-green"
 										onChange={(e) => {
 											setLinkDraft(e.target.value)
 											setLinkError(null)
@@ -493,8 +528,15 @@ export function BlockEditor({ value, onChange, placeholder = "Write, or press '/
 								id={listboxId}
 								role="listbox"
 								aria-label="Insert block"
-								className="fixed z-50 max-h-72 w-64 overflow-auto rounded-lg border border-border bg-surface-card p-1 shadow-md"
-								style={{ left: menuPos?.left ?? 0, top: menuPos?.top ?? 0, visibility: menuPos ? 'visible' : 'hidden' }}
+								className="fixed z-50 w-64 overflow-auto rounded-lg border border-border bg-surface-card p-1 shadow-md"
+								style={{
+									left: menuPos?.left ?? 0,
+									top: menuPos?.top ?? 0,
+									// The cap is placement-derived (room on the chosen side), so it lives here
+									// rather than in a max-h-* class — MENU_MAX_H is the ceiling it clamps to.
+									maxHeight: menuPos?.maxHeight ?? MENU_MAX_H,
+									visibility: menuPos ? 'visible' : 'hidden',
+								}}
 							>
 								{filtered.map((cmd, i) => (
 									// role=option must sit on a plain element — a <button> would override it.
@@ -509,7 +551,7 @@ export function BlockEditor({ value, onChange, placeholder = "Write, or press '/
 										onClick={() => runSlash(cmd)}
 									>
 										<span className="text-small text-fg">{cmd.title}</span>
-										<span className="text-caption text-fg-subtle">{cmd.hint}</span>
+										<span className="text-caption text-fg-muted">{cmd.hint}</span>
 									</div>
 								))}
 							</div>,

package/src/index.ts

@@ -11,7 +11,9 @@ export { uic, uiconfig, type ConfigVariants, type NoInfer } from "./utils/uic";
 
 // --- primitives ---
 export * from "./components/button";
+export * from "./components/compact-action-button";
 export * from "./components/input";
+export * from "./components/field-appearance";
 export * from "./components/textarea";
 export * from "./components/rich-text-editor";
 export * from "./components/focus-field";
@@ -27,12 +29,22 @@ export * from "./components/search-field";
 export * from "./components/slider";
 export * from "./components/tag-group";
 export * from "./components/file-upload";
+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/date-field";
 export * from "./components/date-picker";
 export * from "./components/dialog";
+export { AssetSelectionSurface, AssetSelectionEmpty, AssetLibraryPreview, AssetSelectionFilters, AssetSelectionGrid, type AssetSelectionSurfaceProps } from "./components/asset-selection-surface";
+export { AssetMasonryGrid, assetMasonryColumns, assetMasonryPositions } from './components/asset-masonry-grid';
 export * from "./components/side-panel";
 export * from "./components/dropdown-menu";
 export * from "./components/context-menu";
+export * from "./components/context-search-panel";
+export * from "./components/media-gallery";
+export * from "./components/media-settings-dialog";
+export * from "./components/media-asset-panel";
 export * from "./components/tooltip";
 export * from "./components/toast";
 export * from "./components/disclosure";
@@ -58,9 +70,14 @@ export * from "./components/count-up";
 export * from "./components/cta-pill";
 export * from "./components/stat-stack";
 export * from "./components/icons";
+export * from "./components/context-action-glyph";
 export * from "./components/subtle";
 export * from "./components/stats-card";
+export * from "./components/settings-dialog-surface";
+export * from "./components/template-catalog-card";
 export * from "./components/tile";
+export * from "./components/preview-info-card";
+export * from "./components/empty-panel-action";
 export * from "./components/table";
 export * from "./components/dashboard-grid";
 export * from "./components/task-approval-modal";
@@ -69,3 +86,5 @@ export * from "./components/delivery/download-modal";
 export * from "./components/delivery/send-to-print-modal";
 export * from "./components/delivery/publish-modal";
 export * from "./components/delivery/delivery-status-module";
+export * from './components/date-selection-calendar'
+export * from './components/compact-settings-dialog'

package/src/layout/app-shell.tsx

@@ -151,14 +151,18 @@ export const AppShell = ({
 				{banner ? <div className="shrink-0">{banner}</div> : null}
 
 				{/* Sticky topbar — pins to the top of the viewport once the banner
-				    scrolls past. 24px horizontal page padding (gs `.topbar` `padding: 0
-				    spacing-6`, zero vertical — the Topbar header carries its own 72px
-				    height + bottom border). The border lives on the Topbar header so it
-				    aligns (inset) with the padded content below. `bg-surface` keeps content
-				    from showing through while pinned. z-20 sits above scrolling content but
-				    below the mobile drawer (z-40/z-50); gs's literal z-10001 is to clear a
-				    fullscreen overlay we don't have. */}
-				<div className="sticky top-0 z-20 flex shrink-0 items-center bg-surface px-6">
+				    scrolls past. The Topbar header now carries its own 24px horizontal
+				    padding (matching `Main`) plus its height and bottom border, so this row
+				    supplies NO padding of its own — it would double up. The drawer toggle is
+				    a sibling of the topbar, so it takes the same 24px gutter explicitly;
+				    without it the toggle sat at 8px while every other page element started
+				    at 24px. KNOWN SEAM: because the toggle sits outside the Topbar, the
+				    Topbar's bottom border starts after it on mobile. Closing that would mean
+				    restyling `topbar`, which is an opaque ReactNode here. `bg-surface` keeps
+				    content from showing through while pinned. z-20 sits above scrolling
+				    content but below the mobile drawer (z-40/z-50); gs's literal z-10001 is
+				    to clear a fullscreen overlay we don't have. */}
+				<div className="sticky top-0 z-20 flex shrink-0 items-center bg-surface">
 					{hasSidebar ? (
 						<RACButton
 							aria-label={drawerToggleLabel}
@@ -166,7 +170,7 @@ export const AppShell = ({
 							aria-controls={drawerOpen ? drawerId : undefined}
 							onPress={() => setDrawerOpen((open) => !open)}
 							className={
-								'ml-2 flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-fg outline-none ' +
+								'ms-6 flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-fg outline-none ' +
 								'transition-colors hover:bg-surface-muted md:hidden ' +
 								'data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring'
 							}

package/src/layout/topbar.tsx

@@ -39,26 +39,25 @@ import { uic } from '../utils/uic'
 // right — with a 1px bottom border (`--color-border`). gs sets
 // `padding: 0 spacing-6`; the horizontal page padding is supplied by AppShell's
 // sticky topbar row, so only the fixed height + border live here. The border sits
-// on this header so it aligns (inset) with the padded content below. Height is the
-// gs AppHeader bar (~52px) → `h-14` (56px).
+// on this header so it aligns (inset) with the padded content below. The source
+// Embedded Manager topbar contract is exactly 77px.
 const TopbarRoot = uic('header', {
 	displayName: 'Topbar',
-	baseClass: 'flex h-14 w-full items-center gap-5 border-b border-border',
+	baseClass: 'flex h-[77px] w-full items-center gap-5 border-b border-border px-6',
 })
 
-// gs-manager `.logo`: nav-tab-sized label (13px compact, weight-500, tight
-// tracking) — matches the AppHeader nav-item scale, NOT a page heading.
+// Embedded Hub brand treatment: 14/18, medium, normal tracking.
 const TopbarBrand = uic('div', {
 	displayName: 'Topbar.Brand',
 	baseClass:
-		'flex min-w-0 items-center gap-3 text-compact leading-4 font-medium tracking-tight text-fg',
+		'flex min-w-0 items-center gap-3 text-small leading-[18px] font-medium tracking-[0] text-fg',
 })
 
 // `ml-auto` pushes the nav (and the actions after it) to the right, matching gs's
 // title-left / nav-right layout.
 const TopbarNavBase = uic('nav', {
 	displayName: 'Topbar.Nav',
-	baseClass: 'ml-auto flex min-w-0 items-center gap-2 overflow-x-auto',
+	baseClass: 'ml-auto flex h-9 min-w-0 items-start gap-2 overflow-x-auto',
 })
 
 // `@app/ui` ships no i18n — the accessible name of the nav landmark is REQUIRED
@@ -73,10 +72,8 @@ const TopbarActions = uic('div', {
 
 /**
  * NavLink — a single primary-navigation item. Mirrors gs-manager's AppHeader
- * nav-tab styling (`Button.module.scss` `_tab`): `6px 13px` padding
- * (→ `py-[6px] px-[13px]`), `radius-sm` (2px) corners, 13px dense text, neutral-400
- * foreground → neutral-100 fill on hover/active. The active tab is the SAME weight
- * as the resting tab (only the fill + color change — gs `_tab` has no weight bump).
+ * nav-tab styling: 6px × 13px padding, 2px corners and 13/16 typography.
+ * Hover and active share the neutral-100 fill without changing font weight.
  * gs maps BOTH `--color-background-hover` and `--color-background-active` to
  * `--color-neutral-100`, so a single `surface-muted` token covers both states
  * (no distinct active token to map). Renders an `<a>` by default; pass `asChild`
@@ -90,7 +87,7 @@ const TopbarActions = uic('div', {
 const TopbarNavLink = uic('a', {
 	displayName: 'Topbar.NavLink',
 	baseClass:
-		'inline-flex items-center rounded-sm px-[13px] py-[6px] text-compact leading-4 whitespace-nowrap ' +
+		'inline-flex items-center rounded-sm px-[13px] py-[6px] text-compact leading-4 tracking-[0] whitespace-nowrap ' +
 		'text-fg no-underline transition-colors hover:bg-surface-muted hover:text-fg outline-none ' +
 		'focus-visible:ring-2 focus-visible:ring-ring ' +
 		'data-[active]:bg-surface-muted data-[active]:text-fg',