@podoba/react 0.0.30 → 0.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@podoba/react",
-	"version": "0.0.30",
+	"version": "0.0.34",
 	"type": "module",
 	"description": "podoba React components — React Aria Components + Tailwind primitives + layout, built with uic.",
 	"repository": {
@@ -13,7 +13,8 @@
 	"main": "./src/index.ts",
 	"types": "./src/index.ts",
 	"exports": {
-		".": "./src/index.ts"
+		".": "./src/index.ts",
+		"./editor": "./src/editor/index.ts"
 	},
 	"files": [
 		"src",
@@ -27,17 +28,48 @@
 		"typecheck": "tsc --build"
 	},
 	"dependencies": {
-		"@podoba/tokens": "^0.0.30",
-		"@podoba/tailwind": "^0.0.30",
+		"@podoba/tokens": "^0.0.34",
+		"@podoba/tailwind": "^0.0.34",
 		"react-aria-components": "1.18.0",
 		"class-variance-authority": "0.7.1",
 		"clsx": "2.1.1",
 		"tailwind-merge": "3.6.0",
 		"@radix-ui/react-slot": "1.2.4"
 	},
+	"//tiptap": "Only `@podoba/react/editor` (BlockEditor) needs Tiptap. Optional peers, not dependencies: the base package must not make every consumer install ProseMirror, and a peer keeps ONE @tiptap/pm in the tree — two copies of prosemirror-model break instanceof across the editor.",
 	"peerDependencies": {
 		"react": ">=19",
-		"react-dom": ">=19"
+		"react-dom": ">=19",
+		"@tiptap/react": "^3.27.4",
+		"@tiptap/pm": "^3.27.4",
+		"@tiptap/starter-kit": "^3.27.4",
+		"@tiptap/extension-placeholder": "^3.27.4",
+		"@tiptap/extension-highlight": "^3.27.4",
+		"@tiptap/extension-task-list": "^3.27.4",
+		"@tiptap/extension-task-item": "^3.27.4"
+	},
+	"peerDependenciesMeta": {
+		"@tiptap/react": {
+			"optional": true
+		},
+		"@tiptap/pm": {
+			"optional": true
+		},
+		"@tiptap/starter-kit": {
+			"optional": true
+		},
+		"@tiptap/extension-placeholder": {
+			"optional": true
+		},
+		"@tiptap/extension-highlight": {
+			"optional": true
+		},
+		"@tiptap/extension-task-list": {
+			"optional": true
+		},
+		"@tiptap/extension-task-item": {
+			"optional": true
+		}
 	},
 	"devDependencies": {
 		"react": "^19.2.1",
@@ -45,6 +77,13 @@
 		"@types/react": "^19.2.7",
 		"@types/react-dom": "^19.2.3",
 		"typescript": "^5.9.3",
-		"@types/bun": "^1.3.3"
+		"@types/bun": "^1.3.3",
+		"@tiptap/react": "^3.27.4",
+		"@tiptap/pm": "^3.27.4",
+		"@tiptap/starter-kit": "^3.27.4",
+		"@tiptap/extension-placeholder": "^3.27.4",
+		"@tiptap/extension-highlight": "^3.27.4",
+		"@tiptap/extension-task-list": "^3.27.4",
+		"@tiptap/extension-task-item": "^3.27.4"
 	}
 }

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

@@ -1,4 +1,4 @@
-import { type ReactNode, useState } from 'react'
+import { type ReactNode, useEffect, useId, useRef, useState } from 'react'
 import { Button } from './button'
 import { DisplayHeading } from './text'
 
@@ -8,10 +8,9 @@ import { DisplayHeading } from './text'
  *
  * gs-platform's header is a two-column grid: a left "welcome" section
  * (optional breadcrumbs + a large greeting line) and a right section holding an
- * `ExpandableCTA` — a collapsed teal pill that expands into an inline
- * create-hub panel. We port that interaction to React Aria + Tailwind + the
- * teal accent token (`brand-secondary`), dropping gs-platform's mobile
- * fixed-sheet behaviour for a simpler inline disclosure.
+ * `ExpandableCTA` — a collapsed teal pill that expands into a create-hub panel.
+ * The supplied hero `CtaPill` owns the source mobile fixed-bar treatment; this
+ * header switches to the desktop 2/3 + 1/3 grid at the matching 768px breakpoint.
  *
  * The expandable CTA is a controlled disclosure: the collapsed teal pill is a
  * React Aria `Button` (keyboard + focus ring + press handling) wired to a
@@ -28,6 +27,12 @@ export type BrandPageHeaderCrumb = {
 	onPress?: () => void
 }
 
+export type BrandPageHeaderCtaRenderProps = {
+	expanded: boolean
+	controls: string
+	toggle: () => void
+}
+
 export type BrandPageHeaderProps = {
 	/** The large greeting / page-title slot (e.g. "Good morning Jonas 👋"). */
 	greeting: ReactNode
@@ -37,17 +42,19 @@ export type BrandPageHeaderProps = {
 	 * gs-style "title to go back": a muted, clickable PARENT link rendered as the
 	 * line ABOVE the title (so the title reads "Parent ⏎ Current"). Pass a real
 	 * router `<Link>` so it's an anchor (cmd/middle-click, deep-link-safe), exactly
-	 * like gs's `parentLink`. The header styles it muted with a hover→fg affordance.
+	 * like gs's `parentLink`. The header uses the source's decorative `fg-subtle`
+	 * (#b3b3b3) with a hover→fg affordance.
 	 */
 	parentLink?: ReactNode
 	/** Optional breadcrumb trail rendered above the greeting. */
 	breadcrumbs?: BrandPageHeaderCrumb[]
 	/**
-	 * Arbitrary right-column CTA node (e.g. the gs hero `CtaPill` banner). When
-	 * set it REPLACES the collapsed-pill ExpandableCTA — use this for the
-	 * gs-faithful "Let's create something" hero. `ctaLabel`/`createHub` are ignored.
+	 * Arbitrary right-column CTA node (e.g. the gs hero `CtaPill` banner), or a
+	 * render function receiving the disclosure state and generated controls id.
+	 * Prefer the render function when the CTA opens `createHub`, so its trigger can
+	 * expose `aria-expanded` and `aria-controls`.
 	 */
-	cta?: ReactNode
+	cta?: ReactNode | ((state: BrandPageHeaderCtaRenderProps) => ReactNode)
 	/** Label on the collapsed teal "Create" pill. Required to render the CTA. */
 	ctaLabel?: ReactNode
 	/** Inline content revealed when the CTA expands (the create hub). */
@@ -59,11 +66,14 @@ export type BrandPageHeaderProps = {
 	closeLabel?: string
 	/** Sticky header on scroll. */
 	sticky?: boolean
+	/**
+	 * Dock the supplied CTA to the safe bottom edge below 768px, matching the
+	 * source Manager's collapsed ExpandableCTA. Enabled by default.
+	 */
+	mobileCtaDocked?: boolean
 	className?: string
 }
 
-const PANEL_ID = 'brand-page-header-create-hub'
-
 export function BrandPageHeader({
 	greeting,
 	headingLevel = 1,
@@ -76,18 +86,152 @@ export function BrandPageHeader({
 	onExpandedChange,
 	closeLabel = 'Close',
 	sticky = false,
+	mobileCtaDocked = true,
 	className,
 }: BrandPageHeaderProps) {
 	const [internalExpanded, setInternalExpanded] = useState(false)
+	const [mobileSheet, setMobileSheet] = useState(false)
+	const [mobileFull, setMobileFull] = useState(false)
 	const isControlled = expandedProp !== undefined
 	const expanded = isControlled ? expandedProp : internalExpanded
 	const hasExpandable = Boolean(createHub)
 	const HeadingTag = `h${headingLevel}` as const
+	const panelId = useId()
+	const panelRef = useRef<HTMLDivElement>(null)
+	const contentRef = useRef<HTMLDivElement>(null)
+	const returnFocusRef = useRef<HTMLElement | null>(null)
+	const touchStartYRef = useRef(0)
+	const touchStartScrollTopRef = useRef(0)
 
 	const setExpanded = (next: boolean) => {
 		if (!isControlled) setInternalExpanded(next)
 		onExpandedChange?.(next)
 	}
+	const renderedCta =
+		typeof cta === 'function'
+			? cta({
+					expanded,
+					controls: panelId,
+					toggle: () => setExpanded(!expanded),
+				})
+			: cta
+
+	useEffect(() => {
+		if (!expanded || !hasExpandable || typeof window === 'undefined') return
+
+		returnFocusRef.current =
+			document.activeElement instanceof HTMLElement ? document.activeElement : null
+
+		let lockedScrollY = 0
+		let restoreBody: (() => void) | undefined
+
+		const updateComposition = () => {
+			const isMobile = window.innerWidth < 768
+			setMobileSheet(isMobile)
+
+			const content = contentRef.current
+			setMobileFull(Boolean(isMobile && content && content.scrollHeight >= window.innerHeight * 0.4))
+
+			if (isMobile && !restoreBody) {
+				lockedScrollY = window.scrollY
+				const previous = {
+					overflow: document.body.style.overflow,
+					position: document.body.style.position,
+					top: document.body.style.top,
+					width: document.body.style.width,
+				}
+				document.body.style.overflow = 'hidden'
+				document.body.style.position = 'fixed'
+				document.body.style.top = `-${lockedScrollY}px`
+				document.body.style.width = '100%'
+				restoreBody = () => {
+					document.body.style.overflow = previous.overflow
+					document.body.style.position = previous.position
+					document.body.style.top = previous.top
+					document.body.style.width = previous.width
+					window.scrollTo(0, lockedScrollY)
+				}
+			} else if (!isMobile && restoreBody) {
+				restoreBody()
+				restoreBody = undefined
+			}
+		}
+
+		const keepFocusInsideMobileSheet = (event: KeyboardEvent) => {
+			if (event.key === 'Escape') {
+				event.preventDefault()
+				setExpanded(false)
+				return
+			}
+			if (event.key !== 'Tab' || window.innerWidth >= 768 || !panelRef.current) return
+
+			const focusable = Array.from(
+				panelRef.current.querySelectorAll<HTMLElement>(
+					'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+				),
+			).filter((node) => {
+				const style = window.getComputedStyle(node)
+				return (
+					!node.hidden &&
+					!node.closest('[hidden]') &&
+					node.getAttribute('aria-hidden') !== 'true' &&
+					style.display !== 'none' &&
+					style.visibility !== 'hidden'
+				)
+			})
+			if (focusable.length === 0) {
+				event.preventDefault()
+				panelRef.current.focus()
+				return
+			}
+			const first = focusable[0]
+			const last = focusable[focusable.length - 1]
+			if (!panelRef.current.contains(document.activeElement)) {
+				event.preventDefault()
+				const boundary = event.shiftKey ? last : first
+				boundary?.focus()
+				return
+			}
+			if (event.shiftKey && document.activeElement === first) {
+				event.preventDefault()
+				last?.focus()
+			} else if (!event.shiftKey && document.activeElement === last) {
+				event.preventDefault()
+				first?.focus()
+			}
+		}
+
+		updateComposition()
+		const observer =
+			typeof ResizeObserver === 'undefined' || !contentRef.current
+				? undefined
+				: new ResizeObserver(updateComposition)
+		if (contentRef.current) observer?.observe(contentRef.current)
+		window.addEventListener('resize', updateComposition)
+		document.addEventListener('keydown', keepFocusInsideMobileSheet)
+
+		return () => {
+			observer?.disconnect()
+			window.removeEventListener('resize', updateComposition)
+			document.removeEventListener('keydown', keepFocusInsideMobileSheet)
+			restoreBody?.()
+			returnFocusRef.current?.focus()
+			returnFocusRef.current = null
+			setMobileSheet(false)
+			setMobileFull(false)
+		}
+	}, [expanded, hasExpandable])
+
+	useEffect(() => {
+		if (!expanded || !hasExpandable || typeof window === 'undefined') return
+		const frame = window.requestAnimationFrame(() => {
+			const selector = mobileSheet
+				? '[data-create-hub-focus="mobile"]'
+				: '[data-create-hub-focus="desktop"]'
+			panelRef.current?.querySelector<HTMLElement>(selector)?.focus()
+		})
+		return () => window.cancelAnimationFrame(frame)
+	}, [expanded, hasExpandable, mobileSheet])
 
 	return (
 		<div
@@ -99,8 +243,8 @@ export function BrandPageHeader({
 				.filter(Boolean)
 				.join(' ')}
 		>
-			<div className="flex flex-col gap-2 sm:grid sm:grid-cols-3 sm:items-stretch sm:gap-4">
-				<div className="flex min-w-0 flex-1 flex-col gap-1 sm:col-span-2">
+			<div className="flex flex-col gap-2 md:grid md:grid-cols-3 md:items-stretch md:gap-4">
+				<div className="flex min-w-0 flex-1 flex-col gap-1 md:col-span-2">
 					{breadcrumbs && breadcrumbs.length > 0 ? (
 						<nav aria-label="Breadcrumb" className="flex flex-wrap items-center gap-1 text-compact text-fg-muted">
 							{breadcrumbs.map((crumb, i) => (
@@ -128,7 +272,7 @@ export function BrandPageHeader({
 								// `[&_a]` styles the nested router <Link> (anchor) without @app/ui
 								// importing the router.
 								<>
-									<span className="text-fg-muted transition-colors [&_a:hover]:text-fg [&_a]:text-fg-muted [&_a]:no-underline [&_a]:outline-none [&_a:focus-visible]:underline">
+									<span className="text-fg-subtle transition-colors [&_a:hover]:text-fg [&_a]:text-fg-subtle [&_a]:no-underline [&_a]:outline-none [&_a:focus-visible]:underline">
 										{parentLink}
 									</span>
 									<br />
@@ -141,14 +285,25 @@ export function BrandPageHeader({
 
 				{cta ? (
 					// Hero CTA spans 4 of 12 columns (one third) — the greeting takes the rest.
-					<div className="h-full min-w-0">{cta}</div>
+					<div
+						className={
+							[
+								mobileCtaDocked
+									? 'fixed inset-x-0 bottom-0 z-40 min-w-0 px-3 pb-mobile-cta-bottom md:static md:inset-auto md:z-auto md:h-full md:p-0'
+									: 'h-full min-w-0',
+								expanded ? 'hidden' : '',
+							].join(' ')
+						}
+					>
+						{renderedCta}
+					</div>
 				) : ctaLabel ? (
 					<div className="shrink-0">
 						{hasExpandable ? (
 							<Button
 								onPress={() => setExpanded(!expanded)}
 								aria-expanded={expanded}
-								aria-controls={PANEL_ID}
+								aria-controls={panelId}
 								className="h-10 rounded-full bg-brand-secondary px-5 text-small font-medium text-fg data-[hovered]:opacity-90 data-[pressed]:opacity-80"
 							>
 								{ctaLabel}
@@ -162,35 +317,80 @@ export function BrandPageHeader({
 				) : null}
 			</div>
 
-			{hasExpandable ? (
-				<div
-					id={PANEL_ID}
-					role="region"
-					aria-label={typeof ctaLabel === 'string' ? ctaLabel : undefined}
-					hidden={!expanded}
-					className="mt-4"
-				>
-					{expanded ? (
-						<div className="relative rounded-lg border border-border bg-surface-card p-4 animate-expand-cta motion-reduce:animate-none">
-							<Button
-								variant="ghost"
-								aria-label={closeLabel}
-								onPress={() => setExpanded(false)}
-								className="absolute right-2 top-2 h-7 w-7 rounded-full p-0 text-fg-muted data-[hovered]:bg-surface-muted data-[hovered]:text-fg"
-							>
-								<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-									<path
-										d="M6 6l12 12M18 6L6 18"
-										stroke="currentColor"
-										strokeWidth="2"
-										strokeLinecap="round"
-									/>
-								</svg>
-							</Button>
+			{hasExpandable && expanded ? (
+				<>
+					<div
+						aria-hidden="true"
+						onClick={() => setExpanded(false)}
+						className="fixed inset-0 z-40 bg-black/50 animate-create-hub-backdrop md:hidden motion-reduce:animate-none"
+					/>
+					<div
+						ref={panelRef}
+						id={panelId}
+						role={mobileSheet ? 'dialog' : 'region'}
+						aria-modal={mobileSheet || undefined}
+						aria-label={typeof ctaLabel === 'string' ? ctaLabel : undefined}
+						tabIndex={-1}
+						onTouchStart={(event) => {
+							const touch = event.touches[0]
+							if (!touch || !contentRef.current) return
+							touchStartYRef.current = touch.clientY
+							touchStartScrollTopRef.current = contentRef.current.scrollTop
+						}}
+						onTouchMove={(event) => {
+							const touch = event.touches[0]
+							if (
+								!touch ||
+								touchStartScrollTopRef.current > 10 ||
+								touch.clientY - touchStartYRef.current < 80
+							) {
+								return
+							}
+							event.preventDefault()
+							setExpanded(false)
+						}}
+						className={[
+							'fixed inset-x-0 bottom-0 z-50 flex flex-col overflow-hidden bg-brand-green',
+							'outline-none motion-reduce:animate-none',
+							'md:relative md:inset-auto md:z-auto md:mt-4 md:max-h-none md:origin-top-right md:rounded-lg md:animate-create-hub-desktop',
+							mobileFull
+								? 'top-0 max-h-create-hub-full animate-create-hub-full'
+								: 'max-h-create-hub-partial animate-create-hub-sheet',
+						].join(' ')}
+					>
+						<Button
+							variant="ghost"
+							aria-label={closeLabel}
+							data-create-hub-focus="mobile"
+							onPress={() => setExpanded(false)}
+							className="h-10 w-full shrink-0 rounded-none p-0 md:hidden data-[hovered]:bg-transparent"
+						>
+							<span className="h-1 w-10 rounded-full bg-fg/25" aria-hidden="true" />
+						</Button>
+						<Button
+							variant="ghost"
+							aria-label={closeLabel}
+							data-create-hub-focus="desktop"
+							onPress={() => setExpanded(false)}
+							className="absolute right-4 top-14 z-10 hidden h-8 w-8 rounded-md p-0 text-fg md:flex data-[hovered]:bg-black/5"
+						>
+							<svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+								<path
+									d="M6 6l12 12M18 6L6 18"
+									stroke="currentColor"
+									strokeWidth="2"
+									strokeLinecap="round"
+								/>
+							</svg>
+						</Button>
+						<div
+							ref={contentRef}
+							className="min-h-0 flex-1 overflow-y-auto overscroll-contain md:overflow-visible"
+						>
 							{createHub}
 						</div>
-					) : null}
-				</div>
+					</div>
+				</>
 			) : null}
 		</div>
 	)

package/src/components/button.tsx

@@ -19,9 +19,9 @@ export const Button = uic(RACButton, {
 		'data-[pending]:opacity-70 data-[pending]:cursor-progress',
 	variants: {
 		variant: {
-			// primary (gs `_primary`): base neutral-400 (#242423 = surface-inverted) →
-			// hover neutral-600 (#333333) + `0 0 5px rgba(0,0,0,.5)` shadow → active back
-			// to neutral-400 (surface-inverted, no shadow).
+			// primary (gs `_primary`): base brand-primary (#0d0d0d light / brand-green on
+			// dark) → hover neutral-600 (#333333) + `0 0 5px rgba(0,0,0,.5)` shadow →
+			// active back to brand-primary (no shadow).
 			primary:
 				'bg-brand-primary text-fg-inverted hover:bg-neutral-600 hover:shadow-[0_0_5px_0_rgba(0,0,0,0.5)] data-[pressed]:bg-brand-primary data-[pressed]:shadow-none',
 			// secondary: #f7f6f2 (surface-card) + 1px #eceae1 (border); hover bg #eceae1

package/src/components/cta-pill.tsx

@@ -5,8 +5,11 @@ import type { ReactNode } from 'react'
  * something" (the middle word emphasised) with an action control on the right.
  *
  * The copy is three fragments (`lead` · `emphasis` · `tail`) so a consumer can
- * translate each per-locale while keeping the middle-word highlight. Presentational
- * only (hard rule #1): every string arrives via props — no i18n, no domain data.
+ * translate each per-locale while keeping the middle-word highlight. With
+ * `mobileHeader`, it adopts the source ExpandableCTA's 99px mobile touch surface;
+ * `BrandPageHeader` owns the safe-bottom positioning and returns it to the one-third
+ * desktop grid at the `md` breakpoint. Presentational only (hard rule #1): every
+ * string arrives via props — no i18n, no domain data.
  *
  * a11y NOTE: the background is the FIXED light brand-secondary (#6eddb1) — it does
  * not flip with the theme, so every sentence fragment sits on `fg-on-brand` (stable
@@ -23,11 +26,23 @@ export interface CtaPillProps {
 	tail: ReactNode
 	/** Right-side action control (e.g. a Create button). */
 	children: ReactNode
+	/**
+	 * Use the source mobile header density (99px minimum height and doubled
+	 * horizontal content padding). Positioning stays with `BrandPageHeader`.
+	 */
+	mobileHeader?: boolean
 }
 
-export function CtaPill({ lead, emphasis, tail, children }: CtaPillProps) {
+export function CtaPill({ lead, emphasis, tail, children, mobileHeader = false }: CtaPillProps) {
 	return (
-		<div className="flex h-full min-h-16 w-full items-center justify-between gap-nav-x rounded-lg bg-brand-green py-2.5 pr-3 pl-4.5">
+		<div
+			className={[
+				'flex h-full w-full items-center justify-between gap-nav-x rounded-lg bg-brand-green',
+				mobileHeader
+					? 'min-h-mobile-cta px-12 py-5 shadow-mobile-cta md:min-h-16 md:py-2.5 md:pr-3 md:pl-4.5 md:shadow-none'
+					: 'min-h-16 py-2.5 pr-3 pl-4.5',
+			].join(' ')}
+		>
 			<p className="min-w-0 text-heading4 font-medium leading-5 tracking-tight text-fg-on-brand">
 				{lead} <span className="font-semibold">{emphasis}</span> {tail}
 			</p>

package/src/components/dialog.tsx

@@ -133,6 +133,10 @@ export const Dialog = ({
 		// Either way the RACDialog render-prop `close` resolves against the active
 		// overlay state, so `close()` works in both modes.
 		<ModalOverlay
+			// Full-screen is an immersive takeover: swap the light scrim for a heavier
+			// backdrop blur so the page behind reads as clearly blurred around the
+			// near-fullscreen canvas. (tailwind-merge dedupes the base blur/scrim.)
+			className={isFlex ? 'bg-black/25 backdrop-blur-lg' : undefined}
 			isOpen={isOpen}
 			defaultOpen={defaultOpen}
 			onOpenChange={onOpenChange}

package/src/components/input.tsx

@@ -20,15 +20,21 @@ import { uic } from '../utils/uic'
  */
 const StyledInput = uic(RACInput, {
 	displayName: 'InputControl',
-	// gs source: borderless cream fill, 8px radius, 14/18 text and 16px inline
-	// padding. Focus keeps an explicit ring for keyboard accessibility.
+	// White fill + border so the field reads as editable. The gs original used a
+	// borderless cream (#f7f6f2 → surface-card) fill, but our Card surface is ALSO
+	// surface-card — and in dark theme surface-card and surface are the SAME colour
+	// (#242423) — so a borderless cream field vanishes on both. Inverted: active =
+	// surface, disabled = the muted cream. border #eceae1 → border · hover #aba89c →
+	// fg-subtle · focus #75e7b8 → brand-green · error → danger. This is the shared
+	// filled-field skin (textarea / combobox / date-field / number-field /
+	// search-field); `fieldSize` adds the single-line height on top.
 	baseClass:
-		'w-full rounded-lg border-0 bg-surface-card px-4 text-small text-fg ' +
+		'w-full rounded-lg border border-border bg-surface px-4 text-small text-fg ' +
 		'outline-none transition-colors duration-200 placeholder:text-fg-muted ' +
-		'data-[hovered]:bg-surface-muted ' +
-		'data-[focused]:ring-2 data-[focused]:ring-ring ' +
-		'data-[invalid]:ring-2 data-[invalid]:ring-danger ' +
-		'data-[disabled]:bg-surface-muted data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',
+		'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-2 data-[invalid]:ring-danger ' +
+		'data-[disabled]:bg-surface-muted data-[disabled]:opacity-60 data-[disabled]:pointer-events-none',
 	variants: {
 		// `fieldSize` (not `size`) to avoid colliding with the native <input size>
 		// attribute, which RAC's Input inherits (a numeric prop).

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

@@ -1,12 +1,19 @@
 import { type ClipboardEvent as ReactClipboardEvent, type ReactNode, useEffect, useRef } from 'react'
 import { clsx } from 'clsx'
+import { SAFE_LINK_HINT, safeLinkUrl } from '../utils/safe-link-url'
 import { useInFocusOverlay } from './focus-context'
 
 /**
  * RichTextEditor — a dependency-free contentEditable WYSIWYG that emits an HTML
  * string (round-trips with any `set:html` / `dangerouslySetInnerHTML` renderer,
  * so no value migration and no bundled ProseMirror). Ported from pramen's
- * cms-editor `RichText`; TipTap is the upgrade path if tables/embeds are needed.
+ * cms-editor `RichText`.
+ *
+ * Still the right pick for a short caption/bio field. For document-shaped content
+ * — blocks, a `/` palette, tables/embeds — reach for `BlockEditor` from
+ * `@podoba/react/editor` instead; it is the Tiptap-backed upgrade this component's
+ * `execCommand` core cannot grow into. Both emit the same HTML-string value, so
+ * swapping one for the other needs no data migration.
  *
  * The `prose prose-sm` body relies on the @tailwindcss/typography plugin, which
  * @podoba/tailwind's preset already registers.
@@ -32,7 +39,7 @@ const RT_TOOLS: Array<{ label: string; title: string; run: (exec: (c: string, a?
 			if (!raw) return
 			const url = safeLinkUrl(raw)
 			if (!url) {
-				window.alert('Only http(s), mailto, tel, or relative (/, #) links are allowed.')
+				window.alert(SAFE_LINK_HINT)
 				return
 			}
 			x('createLink', url)
@@ -42,13 +49,6 @@ const RT_TOOLS: Array<{ label: string; title: string; run: (exec: (c: string, a?
 	{ label: 'Clear', title: 'Clear formatting', run: (x) => x('removeFormat') },
 ]
 
-/** Allow-list for a link href: http(s), mailto, tel, or a relative/anchor path.
- * The prefix allow-list inherently rejects `javascript:`/`data:`/`vbscript:`. */
-function safeLinkUrl(raw: string): string | null {
-	const url = raw.trim()
-	return /^(https?:\/\/|mailto:|tel:|\/|#)/i.test(url) ? url : null
-}
-
 /** Cosmetic scrub (NOT a security boundary — sanitise on the server). */
 function scrubHtml(html: string): string {
 	return html

package/src/components/select.tsx

@@ -21,24 +21,26 @@ import { useInFocusOverlay } from './focus-context'
  * RAC handles the listbox ARIA pattern, keyboard navigation, typeahead and
  * focus management. Styling via `uic`. Pass options as `SelectItem` children.
  *
- * Re-skinned 1:1 to gs-platform's designer spec (Figma GraphicStandard 1.5,
- * node 2115-4271 — `Select.module.scss`): a tall (min-h 58px) borderless filled
- * trigger on the cream `surface-card`, matching our `Input` / `Textarea` fill so
- * the form controls stay consistent. gs token map: bg #f7f6f2 → surface-card ·
- * hover #eceae1 → surface-muted · text #0d0d0d → fg · placeholder → fg-muted ·
+ * Re-skinned to gs-platform's designer spec (Figma GraphicStandard 1.5, node
+ * 2115-4271 — `Select.module.scss`): a tall (58px) filled trigger matching our
+ * `Input` / `Textarea` so the form controls stay consistent. gs token map:
+ * hover border #aba89c → fg-subtle · text #0d0d0d → fg · placeholder → fg-muted ·
  * 8px radius → rounded-lg · 6px item radius → rounded-md · error → danger.
  */
 const SelectTrigger = uic(RACButton, {
 	displayName: 'SelectTrigger',
-	// Exact gs source control: 58px tall, 20px inline padding, borderless cream
-	// fill and 8px radius.
+	// gs source control geometry (58px tall, 20px inline padding, 8px radius) with
+	// the shared bordered fill: gs draws it borderless on cream, but our Card is
+	// also surface-card and dark theme collapses surface-card onto surface, so a
+	// borderless cream trigger disappears. White fill + border keeps it visible and
+	// consistent with the other form controls; hover darkens the border.
 	baseClass:
-		'flex h-control-tall w-full items-center justify-between gap-2.5 rounded-lg border-0 bg-surface-card px-5 ' +
+		'flex h-control-tall w-full items-center justify-between gap-2.5 rounded-lg border border-border bg-surface px-5 ' +
 		'text-small text-fg outline-none transition-colors ' +
-		'data-[hovered]:bg-surface-muted ' +
+		'data-[hovered]:border-fg-subtle ' +
 		'data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring ' +
-		'group-data-[invalid]:ring-2 group-data-[invalid]:ring-danger ' +
-		'data-[disabled]:bg-surface-muted data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',
+		'group-data-[invalid]:border-danger group-data-[invalid]:ring-2 group-data-[invalid]:ring-danger ' +
+		'data-[disabled]:bg-surface-muted data-[disabled]:opacity-60 data-[disabled]:pointer-events-none',
 })
 
 export const SelectItem = uic(ListBoxItem, {