@podoba/react 0.0.22 → 0.0.24

package/package.json

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

package/src/components/stats-card.tsx

@@ -1,140 +1,42 @@
-import { Button as RACButton } from 'react-aria-components'
-import { type ReactElement, type ReactNode, cloneElement, isValidElement } from 'react'
-import { uic } from '../utils/uic'
+import { type ReactElement, type ReactNode, isValidElement } from 'react'
+import { Tile } from './tile'
 
 /**
- * StatsCard — KPI card (port of gs-platform `GSStatsCard` / `StatsCard`).
+ * StatsCard — DEPRECATED. Kept as a thin wrapper over the unified {@link Tile} so
+ * existing call sites keep working while every tile shares ONE inner. Prefer `<Tile>`
+ * directly for new code:
+ *   title → eyebrow · value → title · description → text · dark → theme="dark" ·
+ *   align → titleAlign · subtleValue → subtleTitle · asChild+<Link> → link.
  *
- * gs-platform renders title (heading-5) · large value (label-1) · footer
- * (small body) inside a spacious cream `Tile` with panel radius. The `dark`
- * variant mirrors gs's dark "Cloud" tile (inverted surface, light text).
- *
- * Presentational only (hard rule #1): all copy via props, no API/i18n.
- *
- * When `onPress` is set the whole card becomes a React Aria `Button` — it gets
- * keyboard activation, `data-[focus-visible]` ring and `data-[pressed]` for
- * free. Otherwise it renders as a plain non-interactive `div`.
+ * @deprecated use `<Tile>`.
  */
 export type StatsCardProps = {
-	/** Small uppercase-ish label above the value. */
+	/** Small label above the value → Tile `eyebrow`. */
 	title: ReactNode
-	/** The large headline number / value. */
+	/** The large headline number / value → Tile `title`. */
 	value: ReactNode
-	/** Optional supporting footer line (e.g. "+3 this week"). */
+	/** Optional supporting footer line → Tile `footer`. */
 	footer?: ReactNode
-	/** Optional status pill shown at the end of the title row (e.g. a `<Badge>`). */
+	/** Optional status pill → Tile `badge`. */
 	badge?: ReactNode
-	/** Optional muted line under the title (e.g. "Plan sections, tasks and outputs"). */
+	/** Optional muted line under the title → Tile `text`. */
 	description?: ReactNode
-	/** When provided the card becomes a clickable React Aria Button. */
+	/** Clickable via a press handler → Tile `onPress`. */
 	onPress?: () => void
-	/**
-	 * Render the card AS the provided child element (e.g. a router `<Link>`) instead
-	 * of a button — so the whole tile is a real anchor (cmd/middle-click, open in
-	 * new tab, link semantics). The card styling + hover/focus are merged onto the
-	 * child and the title/value/footer are injected as its children. Takes
-	 * precedence over `onPress`.
-	 */
+	/** Render AS the provided child element (a router `<Link>`) → Tile `link`. */
 	asChild?: boolean
-	/** The element to render as the card when `asChild` is set (a single element). */
+	/** The element to render as the card when `asChild` is set. */
 	children?: ReactNode
-	/** Dark/inverted surface (gs's dark "Cloud" tile). */
+	/** Dark/inverted surface → Tile `theme="dark"`. */
 	dark?: boolean
-	/**
-	 * Vertical placement of the value band. `center` (default) is gs's
-	 * `contentAlign="center"` hero-count tile (value fills + centres, footer pinned
-	 * bottom). `top` sits the value directly under the eyebrow (gs's dark "Summary"
-	 * data tile) with the footer pushed to the bottom.
-	 */
+	/** Value placement → Tile `titleAlign` (default `center`). */
 	align?: 'center' | 'top'
-	/** Mute the value colour (gs's Summary tile — a descriptive title, not a hero count). */
+	/** Mute the value colour → Tile `subtleTitle`. */
 	subtleValue?: boolean
-	/** Accessible label for the clickable card (defaults to nothing — title is read). */
 	'aria-label'?: string
 	className?: string
 }
 
-// gs Tile: `--radius-lg` (8px) corners, 16px padding, min-height 208px (size
-// "compact"), and it FILLS its grid cell (h-full) so a tall dashboard tile is a
-// tall card. The three bands (title top / value centered / footer bottom) are laid
-// out by StatsCardBody. The "skin" (surface + border) is split out so the dark
-// variant can override it cleanly.
-const baseSurface = 'flex h-full min-h-[208px] flex-col gap-2 rounded-lg p-4 text-left'
-const lightSkin = 'border border-border bg-surface-card'
-const darkSkin = 'border border-transparent bg-surface-inverted'
-
-function StatsCardBody({
-	title,
-	value,
-	footer,
-	badge,
-	description,
-	dark,
-	align = 'center',
-	subtleValue = false,
-}: Pick<StatsCardProps, 'title' | 'value' | 'footer' | 'badge' | 'description' | 'dark' | 'align' | 'subtleValue'>) {
-	const isTop = align === 'top'
-	const valueTone = dark ? (subtleValue ? 'text-white/60' : 'text-white') : subtleValue ? 'text-fg-muted' : 'text-fg'
-	return (
-		<>
-			<div className="flex items-center justify-between gap-2">
-				<span className={`text-body font-medium leading-5 ${dark ? 'text-white' : 'text-fg'}`}>
-					{title}
-				</span>
-				{badge ?? null}
-			</div>
-			{description ? (
-				<span className={`text-compact leading-4 ${dark ? 'text-white/60' : 'text-fg-muted'}`}>
-					{description}
-				</span>
-			) : null}
-			{/*
-			 * `center` (gs `contentAlign="center"`): the value sits in the CENTRE band —
-			 * `flex-1` grows to fill the tile and vertically centres it, pushing any footer
-			 * to the bottom. `top`: the value sits directly under the eyebrow (no grow) and
-			 * the footer takes `mt-auto` to stay pinned at the bottom. Value ramp = gs
-			 * label-1 (1.875rem / 500 / 2rem line). Letter-spacing tracks gs 1:1: light
-			 * tiles use -0.56px via `tracking-wide`; the dark count tile uses gs's em-based
-			 * `-0.02em` (`AssetsTile.module.scss .count`).
-			 */}
-			<span
-				className={`flex ${isTop ? 'items-start pt-5' : 'flex-1 items-center'} text-display font-medium leading-[2rem] ${dark ? 'tracking-normal' : 'tracking-wide'} ${valueTone}`}
-			>
-				{/*
-				 * Inner wrapper is deliberate: the band is a flex container, and flex
-				 * TRIMS the leading whitespace of an anonymous text run — so a value of
-				 * `<CountUp/> {' '} unit` collapses to "1version". Nesting the value in one
-				 * inline span makes it a single flex item, preserving the internal space.
-				 */}
-				<span>{value}</span>
-			</span>
-			{footer ? (
-				<span className={`${isTop ? 'mt-auto ' : ''}pt-4 text-small leading-5 ${dark ? 'text-white/50' : 'text-fg-muted'}`}>
-					{footer}
-				</span>
-			) : null}
-		</>
-	)
-}
-
-const PressableCard = uic(RACButton, {
-	displayName: 'StatsCardButton',
-	baseClass:
-		`${baseSurface} ${lightSkin} ` +
-		'w-full outline-none transition-transform duration-150 ' +
-		'data-[hovered]:scale-[1.02] ' +
-		'data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2 ' +
-		'data-[pressed]:scale-100',
-})
-
-// Anchor interaction skin: same subtle scale-up as the pressable card (gs Tile
-// `whileHover` scale 1.02, no shadow), but driven by CSS `:hover`/`:focus-visible`
-// (real <a>) rather than RAC `data-` attributes.
-const anchorInteractive =
-	'no-underline outline-none transition-transform duration-150 ' +
-	'hover:scale-[1.02] ' +
-	'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
-
 export function StatsCard({
 	title,
 	value,
@@ -145,37 +47,26 @@ export function StatsCard({
 	asChild,
 	children,
 	dark,
-	align,
+	align = 'center',
 	subtleValue,
 	className,
 	...rest
 }: StatsCardProps) {
-	// asChild wins: render the supplied element (typically a router <Link>) as the
-	// card. The body is injected as its children so callers pass a self-closing link.
-	if (asChild && isValidElement(children)) {
-		const child = children as ReactElement<{ className?: string }>
-		const cardClass = [baseSurface, dark ? darkSkin : lightSkin, anchorInteractive, child.props.className, className]
-			.filter(Boolean)
-			.join(' ')
-		return cloneElement(child, { className: cardClass } as { className: string }, <StatsCardBody title={title} value={value} footer={footer} badge={badge} description={description} dark={dark} align={align} subtleValue={subtleValue} />)
-	}
-
-	if (onPress) {
-		// uic merges via tailwind-merge, so `darkSkin` cleanly overrides the
-		// light surface/border in the base class.
-		return (
-			<PressableCard
-				onPress={onPress}
-				className={[dark ? darkSkin : '', className].filter(Boolean).join(' ')}
-				aria-label={rest['aria-label']}
-			>
-				<StatsCardBody title={title} value={value} footer={footer} badge={badge} description={description} dark={dark} align={align} subtleValue={subtleValue} />
-			</PressableCard>
-		)
-	}
+	const link = asChild && isValidElement(children) ? (children as ReactElement) : undefined
 	return (
-		<div className={[baseSurface, dark ? darkSkin : lightSkin, className].filter(Boolean).join(' ')}>
-			<StatsCardBody title={title} value={value} footer={footer} badge={badge} description={description} dark={dark} align={align} subtleValue={subtleValue} />
-		</div>
+		<Tile
+			theme={dark ? 'dark' : 'light'}
+			eyebrow={title}
+			badge={badge}
+			title={value}
+			titleAlign={align}
+			subtleTitle={subtleValue}
+			text={description}
+			footer={footer}
+			link={link}
+			onPress={onPress}
+			aria-label={rest['aria-label']}
+			className={className}
+		/>
 	)
 }

package/src/components/tile.tsx

@@ -1,102 +1,340 @@
-import { type ReactElement, type ReactNode, cloneElement, isValidElement } from 'react'
+import { useState, type ReactElement, type ReactNode, cloneElement, isValidElement } from 'react'
+import { CloseIcon } from './icons'
 
 /**
- * Tile — the canonical dashboard CARD (port of gs-platform's `Tile`).
+ * Tile — the ONE dashboard card (the single source of tile "inner"). Every tile in
+ * the product is a `<Tile>`: they all share the same inner spec — 16px padding, 24px
+ * section gap, 8px radius, `overflow-hidden` — and a common slot set. A given tile
+ * just uses the SUBSET of slots it needs (port of gs-platform `Tile` +
+ * `DashboardContentCard`, matched 1:1).
  *
- * Layout: `head` (label row, optional trailing badge) · `children` (the big
- * content band, fills + top-aligned) · `tail` (footer — links, avatars). 8px
- * panel radius, generous padding, row-gap. Four themes mirror gs's Figma palette
- * via the design tokens: light (surface-card), dark (inverted, light text), teal
- * (brand green), yellow (accent).
+ * Slots (all optional):
+ * - `eyebrow` (+ `badge`) — the small label row at the top (gs heading-5).
+ * - `title` — the big headline / value (gs heading-1). `titleAlign` places it
+ *   top (default) or centred; `subtleTitle` mutes its colour.
+ * - `text` — supporting copy under the title (gs 14px).
+ * - `image` — a side preview in the RIGHT half of the content band.
+ * - `footer` — the bottom band.
+ * - `backgroundImage` / `video` — turn the tile into a full-bleed MEDIA HERO
+ *   (image, or click-to-play inline video); `eyebrow`/`title`/`footer`/`badge`
+ *   become overlays. No modal.
+ * - `children` — an escape hatch for the content band (lists, infographics). When
+ *   present it REPLACES title/text/image.
  *
- * Router-agnostic link (hard rule #1 — podoba never imports a router): pass a
- * link ELEMENT as `link` (e.g. a `<Link/>` from your router, self-closing). The
- * tile clones it, merges the card styling + a hover-lift onto it, and injects the
- * tile body as its children — so the whole tile is a real anchor (cmd/middle-click,
- * open in new tab) without podoba knowing about any router. `children` stays the
- * content band (unlike StatsCard's `asChild`, because a Tile's children is content).
- *
- * Presentational only: all copy via props, no API/i18n.
+ * Clickable: pass a router `<Link/>` as `link` (whole tile becomes a real anchor —
+ * cmd/middle-click, new tab) or an `onPress` handler (button). Router-agnostic (hard
+ * rule #1 — podoba never imports a router). Presentational only: copy via props.
  */
 export type TileTheme = 'light' | 'dark' | 'teal' | 'yellow'
+export type TileAlign = 'top' | 'center'
 
-// Light tiles carry a visible hairline (border-border), matching StatsCard's
-// lightSkin; dark/colored tiles use a transparent border so every tile keeps the
-// same box size (no 1px layout shift between themes).
 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).
 	light: 'border border-border bg-surface-card text-fg',
 	dark: 'border border-transparent bg-surface-inverted text-white',
 	teal: 'border border-transparent bg-brand-secondary text-fg',
 	yellow: 'border border-transparent bg-accent-yellow text-fg',
 }
 
-/** Hover-lift + focus ring applied only when the tile is a link. */
-const linkInteractive =
-	'block no-underline outline-none transition-[transform,box-shadow] duration-150 ' +
+// The shared inner for EVERY tile (gs `DashboardContentCard`): 16px padding
+// (`--spacing-4`), 24px section gap, 8px radius, clip overflow. `h-full` fills the
+// 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'
 
 export type TileProps = {
 	/** Surface theme (gs's Figma palette). */
 	theme?: TileTheme
-	/** Label row at the top (optionally a trailing `<Badge>`). */
+	/** Small label row at the top (gs eyebrow / heading-5). */
+	eyebrow?: ReactNode
+	/** @deprecated alias for `eyebrow`. */
 	head?: ReactNode
-	/** The big content band — grows to fill, top-aligned. */
-	children?: ReactNode
-	/** Footer band (links, avatars, meta). */
+	/** Status pill shown next to the eyebrow. */
+	badge?: ReactNode
+	/** Big headline / value (gs heading-1). */
+	title?: ReactNode
+	/** Vertical placement of `title` in the content band (default `top`). */
+	titleAlign?: TileAlign
+	/** Mute the `title` colour (a descriptive title, not a hero count). */
+	subtleTitle?: boolean
+	/** Supporting text under the title (gs 14px). */
+	text?: ReactNode
+	/** Footer band (links, meta, actions). */
+	footer?: ReactNode
+	/** @deprecated alias for `footer`. */
 	tail?: ReactNode
+	/** A side preview element in the right half of the content band. */
+	image?: ReactNode
 	/**
-	 * A link ELEMENT to render the whole tile as (e.g. a router `<Link/>`). The tile
-	 * styling + hover-lift merge onto it and the tile body becomes its children.
+	 * Custom content band — escape hatch for lists / infographics. When present it
+	 * REPLACES `title`/`text`/`image`.
 	 */
+	children?: ReactNode
+	/** Full-bleed background image → the tile becomes a media hero. */
+	backgroundImage?: string
+	imageAlt?: string
+	/** When set (media hero), pressing the tile plays this video INLINE (no modal). */
+	video?: string
+	/** Accessible label for the "stop / back to poster" control while playing. */
+	closeLabel?: string
+	/** A link ELEMENT to render the whole tile as (e.g. a router `<Link/>`). */
 	link?: ReactElement
+	/** A whole-tile press handler (renders a button). `pressLabel` names it for a11y. */
+	onPress?: () => void
+	pressLabel?: string
 	className?: string
+	'aria-label'?: string
 }
 
-/** The head/content/tail bands, shared by the plain + linked renders. */
-function TileBody({ head, children, tail }: Pick<TileProps, 'head' | 'children' | 'tail'>) {
+/** The big "stat" content typography (gs heading-1: 28px / 500 / tight). */
+export const tileStatClass = 'text-display font-medium leading-[30px] tracking-wide'
+
+function titleTone(theme: TileTheme, subtle: boolean): string {
+	if (theme === 'dark') return subtle ? 'text-white/60' : 'text-white'
+	return subtle ? 'text-fg-muted' : 'text-fg'
+}
+
+/** head / content / tail bands — the normal (non-media) layout. */
+function TileBands({
+	theme,
+	eyebrow,
+	badge,
+	title,
+	titleAlign = 'top',
+	subtleTitle = false,
+	text,
+	footer,
+	image,
+	children,
+}: Pick<
+	TileProps,
+	'theme' | 'eyebrow' | 'badge' | 'title' | 'titleAlign' | 'subtleTitle' | 'text' | 'footer' | 'image' | 'children'
+> & { theme: TileTheme }) {
+	const titleNode =
+		title != null ? (
+			<p className={`${tileStatClass} ${theme === 'dark' ? 'tracking-normal' : 'tracking-wide'} ${titleTone(theme, subtleTitle)}`}>
+				{title}
+			</p>
+		) : null
+	const textNode =
+		text != null ? (
+			<p className={`text-small leading-4 ${theme === 'dark' ? 'text-white/60' : 'text-fg-muted'} ${title != null ? 'mt-3' : ''}`}>
+				{text}
+			</p>
+		) : null
+
+	// Content band: custom children win; else a right-side image → two columns; else
+	// the title/text stack (top or vertically centred).
+	let content: ReactNode
+	if (children != null) {
+		content = <div className="flex min-h-0 flex-1 flex-col items-start">{children}</div>
+	} else if (image != null) {
+		content = (
+			<div className="grid min-h-0 flex-1 grid-cols-2 grid-rows-[minmax(0,1fr)] gap-4">
+				<div className="flex min-h-0 min-w-0 flex-col">
+					{titleNode}
+					{textNode}
+				</div>
+				<div className="flex min-h-0 items-end justify-end">{image}</div>
+			</div>
+		)
+	} else {
+		content = (
+			<div className={`flex min-h-0 flex-1 flex-col ${titleAlign === 'center' ? 'justify-center' : ''}`}>
+				{titleNode}
+				{textNode}
+			</div>
+		)
+	}
+
 	return (
 		<>
-			{head ? (
-				<div className="flex items-center justify-between gap-2 text-body font-medium leading-5">
-					{head}
+			{eyebrow != null || badge != null ? (
+				<div className="flex items-center gap-3 text-body font-medium leading-5">
+					{eyebrow}
+					{badge}
 				</div>
 			) : null}
-			<div className="flex min-h-0 flex-1 flex-col items-start">{children}</div>
-			{tail ? <div className="min-w-0">{tail}</div> : null}
+			{content}
+			{footer != null ? <div className="min-w-0">{footer}</div> : null}
 		</>
 	)
 }
 
-const baseSurface = 'flex h-full min-h-[200px] flex-col gap-6 rounded-lg p-6'
+/** Full-bleed media hero (background image, or click-to-play inline video). */
+function MediaHero({
+	backgroundImage,
+	imageAlt,
+	video,
+	eyebrow,
+	title,
+	footer,
+	badge,
+	onPress,
+	pressLabel,
+	closeLabel = 'Close video',
+	className,
+}: Pick<
+	TileProps,
+	'backgroundImage' | 'imageAlt' | 'video' | 'eyebrow' | 'title' | 'footer' | 'badge' | 'onPress' | 'pressLabel' | 'closeLabel' | 'className'
+>) {
+	const [playing, setPlaying] = useState(false)
+	const hasVideo = Boolean(video)
+	const pressable = hasVideo || Boolean(onPress)
+	const handlePress = () => {
+		if (hasVideo) setPlaying(true)
+		else onPress?.()
+	}
+
+	return (
+		<div
+			className={['relative isolate h-full min-h-[200px] w-full overflow-hidden rounded-lg bg-surface-inverted', className]
+				.filter(Boolean)
+				.join(' ')}
+		>
+			{playing && video ? (
+				<>
+					{/* eslint-disable-next-line jsx-a11y/media-has-caption -- caption track is
+					    supplied by the consumer via a fuller player when needed. */}
+					<video
+						src={video}
+						poster={backgroundImage}
+						className="absolute inset-0 z-0 h-full w-full bg-black object-cover"
+						controls
+						autoPlay
+						playsInline
+					/>
+					<button
+						type="button"
+						aria-label={closeLabel}
+						onClick={() => setPlaying(false)}
+						className="absolute right-4 top-4 z-20 flex h-8 w-8 items-center justify-center rounded-full bg-black/60 text-white outline-none transition-colors hover:bg-black/80 focus-visible:ring-2 focus-visible:ring-white/70"
+					>
+						<CloseIcon className="h-4 w-4" />
+					</button>
+				</>
+			) : (
+				<>
+					{backgroundImage ? (
+						<img src={backgroundImage} alt={imageAlt ?? ''} className="absolute inset-0 h-full w-full object-cover" />
+					) : null}
+					{/* Legibility scrim — darkens top + bottom where text sits. */}
+					<div aria-hidden="true" className="absolute inset-0 bg-gradient-to-b from-black/30 via-transparent to-black/60" />
+
+					{pressable ? (
+						<button
+							type="button"
+							onClick={handlePress}
+							aria-label={pressLabel}
+							className="absolute inset-0 z-0 cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white/70"
+						/>
+					) : null}
+
+					{eyebrow ? (
+						<span className="pointer-events-none absolute left-6 top-6 z-10 text-compact font-medium text-white">{eyebrow}</span>
+					) : null}
+
+					{/* Content is click-through so pressing the title/badge falls to the
+					    press overlay; only `footer` re-enables its own pointer events. */}
+					<div className="pointer-events-none absolute inset-x-6 bottom-6 z-10 flex flex-col gap-4">
+						{title ? <h2 className="max-w-md text-display font-medium leading-tight text-white">{title}</h2> : null}
+						{footer != null || badge != null ? (
+							<div className="flex items-center justify-between gap-4">
+								<span className="pointer-events-auto">{footer}</span>
+								<span>{badge}</span>
+							</div>
+						) : null}
+					</div>
+				</>
+			)}
+		</div>
+	)
+}
+
+export function Tile({
+	theme = 'light',
+	eyebrow,
+	head,
+	badge,
+	title,
+	titleAlign,
+	subtleTitle,
+	text,
+	footer,
+	tail,
+	image,
+	children,
+	backgroundImage,
+	imageAlt,
+	video,
+	closeLabel,
+	link,
+	onPress,
+	pressLabel,
+	className,
+	...rest
+}: TileProps) {
+	const eb = eyebrow ?? head
+	const ft = footer ?? tail
 
-export function Tile({ theme = 'light', head, children, tail, link, className }: TileProps) {
+	// Media hero: a background image / inline video with overlaid text.
+	if (backgroundImage || video) {
+		return (
+			<MediaHero
+				backgroundImage={backgroundImage}
+				imageAlt={imageAlt}
+				video={video}
+				eyebrow={eb}
+				title={title}
+				footer={ft}
+				badge={badge}
+				onPress={onPress}
+				pressLabel={pressLabel}
+				closeLabel={closeLabel}
+				className={className}
+			/>
+		)
+	}
+
+	const body = (
+		<TileBands
+			theme={theme}
+			eyebrow={eb}
+			badge={badge}
+			title={title}
+			titleAlign={titleAlign}
+			subtleTitle={subtleTitle}
+			text={text}
+			footer={ft}
+			image={image}
+		>
+			{children}
+		</TileBands>
+	)
 	const surface = [baseSurface, THEME[theme], className].filter(Boolean).join(' ')
 
-	// Link element supplied → render the tile AS that element (real anchor semantics).
+	// A link element → render the tile AS that element (real anchor semantics).
 	if (link && isValidElement(link)) {
 		const el = link as ReactElement<{ className?: string }>
-		const cardClass = [surface, linkInteractive, el.props.className].filter(Boolean).join(' ')
-		return cloneElement(el, { className: cardClass } as { className: string }, (
-			<TileBody head={head} tail={tail}>
-				{children}
-			</TileBody>
-		))
+		const cardClass = [surface, 'block', interactive, el.props.className].filter(Boolean).join(' ')
+		return cloneElement(el, { className: cardClass } as { className: string }, body)
 	}
 
-	return (
-		<div className={surface}>
-			<TileBody head={head} tail={tail}>
-				{children}
-			</TileBody>
-		</div>
-	)
-}
+	if (onPress) {
+		return (
+			<button type="button" onClick={onPress} aria-label={rest['aria-label']} className={`${surface} w-full text-left ${interactive}`}>
+				{body}
+			</button>
+		)
+	}
 
-/**
- * The big "stat" content typography used inside a tile's content band (gs `.content`:
- * 28px / 500 / tight tracking). Apply to the element wrapping a tile's headline value.
- */
-export const tileStatClass = 'text-display font-medium leading-[30px] tracking-wide'
+	return <div className={surface}>{body}</div>
+}
 
 /**
  * Badge — a small presentational status pill (gs `GSTag`). NOTE: this is a plain
@@ -117,7 +355,7 @@ const BADGE: Record<BadgeColor, string> = {
 export function Badge({ label, color = 'grey' }: { label: ReactNode; color?: BadgeColor }) {
 	return (
 		<span
-			className={`inline-flex items-center rounded-full px-2 py-0.5 text-caption font-medium leading-none ${BADGE[color]}`}
+			className={`inline-flex items-center rounded-full px-3 py-1 text-caption font-medium leading-none ${BADGE[color]}`}
 		>
 			{label}
 		</span>

package/src/index.ts

@@ -54,7 +54,6 @@ export * from "./layout/persistent-page-shell";
 export * from "./components/brand-page-header";
 export * from "./components/count-up";
 export * from "./components/cta-pill";
-export * from "./components/feature-tile";
 export * from "./components/stat-stack";
 export * from "./components/icons";
 export * from "./components/subtle";

package/src/components/feature-tile.tsx

@@ -1,140 +0,0 @@
-import { useState, type ReactNode } from 'react'
-import { CloseIcon } from './icons'
-
-/**
- * FeatureTile — a full-width media hero tile: a background image with an overlaid
- * eyebrow (top-left), title (bottom-left), an optional action control and a badge.
- * Generic — the common use is a "start here" tutorial banner, but it fits any
- * promo/feature spotlight. Presentational only (hard rule #1): text arrives via props.
- *
- * Pressing the tile either PLAYS an inline video (when `video` is set — the poster
- * image + overlays are replaced by a `<video controls autoPlay>` filling the tile, no
- * modal) or fires `onPress` (e.g. navigate). `action` / `badge` sit ABOVE the press
- * target (z-10) so their own handlers still work. Falls back to a dark surface when no
- * `image` is given.
- */
-export interface FeatureTileProps {
-	/** Background/poster image URL. Falls back to a dark surface when omitted. */
-	image?: string
-	imageAlt?: string
-	/** When set, pressing the tile plays this video INLINE (no modal). */
-	video?: string
-	/** Small category label, top-left (e.g. "Tutorial"). */
-	eyebrow?: ReactNode
-	/** Large title, bottom-left. */
-	title: ReactNode
-	/** Bottom-left action control (e.g. a round icon button). */
-	action?: ReactNode
-	/** Bottom-right badge (e.g. a duration pill). */
-	badge?: ReactNode
-	/** Press behaviour when there is NO `video`. `pressLabel` names it for a11y. */
-	onPress?: () => void
-	pressLabel?: string
-	/** Accessible label for the "stop / back to poster" control while playing. */
-	closeLabel?: string
-	/** Override the default `aspect-[2/1]` ratio / sizing. */
-	className?: string
-}
-
-export function FeatureTile({
-	image,
-	imageAlt,
-	video,
-	eyebrow,
-	title,
-	action,
-	badge,
-	onPress,
-	pressLabel,
-	closeLabel = 'Close video',
-	className,
-}: FeatureTileProps) {
-	const [playing, setPlaying] = useState(false)
-	const hasVideo = Boolean(video)
-	const pressable = hasVideo || Boolean(onPress)
-
-	const handlePress = () => {
-		if (hasVideo) setPlaying(true)
-		else onPress?.()
-	}
-
-	return (
-		<div
-			className={[
-				// A large fixed-aspect banner (default ~2:1); media covers it. Override the
-				// ratio/size via `className` (e.g. `aspect-[1440/700]`).
-				'relative isolate aspect-[2/1] w-full overflow-hidden rounded-lg bg-surface-inverted',
-				className,
-			]
-				.filter(Boolean)
-				.join(' ')}
-		>
-			{playing && video ? (
-				<>
-					{/* eslint-disable-next-line jsx-a11y/media-has-caption -- caption track is
-					    supplied by the consumer via a fuller player when needed. */}
-					<video
-						src={video}
-						poster={image}
-						className="absolute inset-0 z-0 h-full w-full bg-black object-cover"
-						controls
-						autoPlay
-						playsInline
-					/>
-					<button
-						type="button"
-						aria-label={closeLabel}
-						onClick={() => setPlaying(false)}
-						className="absolute right-4 top-4 z-20 flex h-8 w-8 items-center justify-center rounded-full bg-black/60 text-white outline-none transition-colors hover:bg-black/80 focus-visible:ring-2 focus-visible:ring-white/70"
-					>
-						<CloseIcon className="h-4 w-4" />
-					</button>
-				</>
-			) : (
-				<>
-					{image ? (
-						<img
-							src={image}
-							alt={imageAlt ?? ''}
-							className="absolute inset-0 h-full w-full object-cover"
-						/>
-					) : null}
-					{/* Legibility scrim — darkens the top + bottom where the text sits. */}
-					<div
-						aria-hidden="true"
-						className="absolute inset-0 bg-gradient-to-b from-black/30 via-transparent to-black/60"
-					/>
-
-					{/* Full-bleed press target (behind the content controls). */}
-					{pressable ? (
-						<button
-							type="button"
-							onClick={handlePress}
-							aria-label={pressLabel}
-							className="absolute inset-0 z-0 cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white/70"
-						/>
-					) : null}
-
-					{eyebrow ? (
-						<span className="pointer-events-none absolute left-6 top-6 z-10 text-compact font-medium text-white">
-							{eyebrow}
-						</span>
-					) : null}
-
-					{/* Content is click-through (pointer-events-none) so pressing the title
-					    or badge falls through to the play/press overlay; only `action`
-					    re-enables its own pointer events. */}
-					<div className="pointer-events-none absolute inset-x-6 bottom-6 z-10 flex flex-col gap-4">
-						<h2 className="max-w-md text-display font-medium leading-tight text-white">
-							{title}
-						</h2>
-						<div className="flex items-center justify-between gap-4">
-							<span className="pointer-events-auto">{action}</span>
-							<span>{badge}</span>
-						</div>
-					</div>
-				</>
-			)}
-		</div>
-	)
-}