@mohasinac/appkit 4.56.0 → 4.58.0

package/dist/ui/components/PosterCard.d.ts

@@ -0,0 +1,99 @@
+import React from "react";
+/**
+ * PosterCard — an image-led tile: artwork fills the card, a scrim carries the
+ * type, links sit as chips on the dark end.
+ *
+ * 🛑 The artwork is a `media` SLOT, not a `src` prop, and that is deliberate.
+ * This file lives in `ui/components/`, and reaching down into
+ * `features/media/MediaImage` from here would invert the layering and put a
+ * feature module on the import chain of every consumer of the UI barrel — the
+ * shape Root Cause #6/#18 is about. Taking a node instead lets the homepage
+ * pass `<MediaImage>` and the category tile pass `next/image`, each with the
+ * `sizes` hint that is right for its own grid.
+ *
+ * The caller wraps it in its own `<Link>`/`<a>` when the WHOLE card is one
+ * destination (the category tile), or leaves it inert and lets the chips be
+ * the links (the systems matrix). It is never both: a card that is a link and
+ * also contains links nests interactive content, which no browser resolves the
+ * way the markup implies.
+ */
+export declare const POSTER_CLASS: {
+    readonly root: "appkit-poster";
+    readonly tall: "appkit-poster--tall";
+    readonly compact: "appkit-poster--compact";
+    readonly media: "appkit-poster__media";
+    readonly scrim: "appkit-poster__scrim";
+    readonly body: "appkit-poster__body";
+    readonly eyebrow: "appkit-poster__eyebrow";
+    readonly title: "appkit-poster__title";
+    readonly text: "appkit-poster__text";
+    readonly meta: "appkit-poster__meta";
+    readonly chips: "appkit-poster__chips";
+    readonly chip: "appkit-poster__chip";
+    readonly chipKey: "appkit-poster__chip--key";
+    readonly grid: "appkit-poster-grid";
+    readonly grid1: "appkit-poster-grid--1";
+    readonly grid2: "appkit-poster-grid--2";
+    readonly grid3: "appkit-poster-grid--3";
+    readonly grid4: "appkit-poster-grid--4";
+};
+export type PosterCardHeight = "compact" | "default" | "tall";
+export interface PosterCardProps {
+    /** The artwork. Rendered into an absolutely-positioned fill box. */
+    media?: React.ReactNode;
+    /** Small uppercase label above the title — a date range, a count, an era. */
+    eyebrow?: React.ReactNode;
+    title?: React.ReactNode;
+    /** One short paragraph. Clamped to three lines by the stylesheet. */
+    text?: React.ReactNode;
+    /** A line below the body — an item count, a price band. */
+    meta?: React.ReactNode;
+    /** The chip row. Pass `<PosterChip>`s. */
+    chips?: React.ReactNode;
+    height?: PosterCardHeight;
+    className?: string;
+}
+export declare function PosterCard({ media, eyebrow, title, text, meta, chips, height, className, }: PosterCardProps): React.JSX.Element;
+export interface PosterChipProps {
+    href?: string;
+    /** Solid-fill emphasis, for the one or two widest destinations on a card. */
+    emphasis?: "glass" | "solid";
+    target?: "_blank" | "_self";
+    children: React.ReactNode;
+}
+/**
+ * One chip. Renders an `<a>` when it has an `href` and a `<span>` otherwise,
+ * so a non-navigating chip is not announced as a link.
+ *
+ * 🛑 A plain `<a>`, not `next/link`, because `PosterCard` lives in the UI layer
+ * and must not pull a framework router into every consumer of the barrel — the
+ * same reason `media` is a slot. Consumers that want client-side navigation
+ * compose their own link around the chip classes via `POSTER_CLASS`.
+ */
+export declare function PosterChip({ href, emphasis, target, children, }: PosterChipProps): React.JSX.Element;
+export declare const PLAIN_CLASS: {
+    readonly root: "appkit-plain-card";
+    readonly eyebrow: "appkit-plain-card__eyebrow";
+    readonly title: "appkit-plain-card__title";
+    readonly text: "appkit-plain-card__text";
+    readonly chips: "appkit-plain-card__chips";
+    readonly chip: "appkit-chip";
+    readonly chipKey: "appkit-chip--key";
+};
+export interface PlainCardProps {
+    eyebrow?: React.ReactNode;
+    title?: React.ReactNode;
+    text?: React.ReactNode;
+    chips?: React.ReactNode;
+    /** Anything that has to sit below the chip row — an embedded form. */
+    footer?: React.ReactNode;
+    className?: string;
+}
+export declare function PlainCard({ eyebrow, title, text, chips, footer, className, }: PlainCardProps): React.JSX.Element;
+export interface PosterGridProps {
+    columns?: 1 | 2 | 3 | 4;
+    children: React.ReactNode;
+    className?: string;
+}
+/** 1 → 2 → N. See the note on `.appkit-poster-grid` for why not `Grid cols="cards"`. */
+export declare function PosterGrid({ columns, children, className }: PosterGridProps): React.JSX.Element;

package/dist/ui/components/PosterCard.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Heading, Text } from "./Typography.js";
+/**
+ * PosterCard — an image-led tile: artwork fills the card, a scrim carries the
+ * type, links sit as chips on the dark end.
+ *
+ * 🛑 The artwork is a `media` SLOT, not a `src` prop, and that is deliberate.
+ * This file lives in `ui/components/`, and reaching down into
+ * `features/media/MediaImage` from here would invert the layering and put a
+ * feature module on the import chain of every consumer of the UI barrel — the
+ * shape Root Cause #6/#18 is about. Taking a node instead lets the homepage
+ * pass `<MediaImage>` and the category tile pass `next/image`, each with the
+ * `sizes` hint that is right for its own grid.
+ *
+ * The caller wraps it in its own `<Link>`/`<a>` when the WHOLE card is one
+ * destination (the category tile), or leaves it inert and lets the chips be
+ * the links (the systems matrix). It is never both: a card that is a link and
+ * also contains links nests interactive content, which no browser resolves the
+ * way the markup implies.
+ */
+/* ── Class names ──────────────────────────────────────────────────────────
+ *
+ * Exported because two consumers compose their own inner markup (the matrix
+ * renders a chip per taxonomy link, the tile renders a count), and a literal
+ * typed at the call site is a class `audit-dead-css-classes` would have to
+ * find by luck.
+ */
+export const POSTER_CLASS = {
+    root: "appkit-poster",
+    tall: "appkit-poster--tall",
+    compact: "appkit-poster--compact",
+    media: "appkit-poster__media",
+    scrim: "appkit-poster__scrim",
+    body: "appkit-poster__body",
+    eyebrow: "appkit-poster__eyebrow",
+    title: "appkit-poster__title",
+    text: "appkit-poster__text",
+    meta: "appkit-poster__meta",
+    chips: "appkit-poster__chips",
+    chip: "appkit-poster__chip",
+    chipKey: "appkit-poster__chip--key",
+    grid: "appkit-poster-grid",
+    grid1: "appkit-poster-grid--1",
+    grid2: "appkit-poster-grid--2",
+    grid3: "appkit-poster-grid--3",
+    grid4: "appkit-poster-grid--4",
+};
+const HEIGHT_CLASS = {
+    compact: POSTER_CLASS.compact,
+    default: "",
+    tall: POSTER_CLASS.tall,
+};
+export function PosterCard({ media, eyebrow, title, text, meta, chips, height = "default", className = "", }) {
+    const classes = [POSTER_CLASS.root, HEIGHT_CLASS[height], className]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsxs("div", { className: classes, children: [media ? _jsx("div", { className: POSTER_CLASS.media, children: media }) : null, _jsx("div", { className: POSTER_CLASS.scrim, "aria-hidden": "true" }), _jsxs("div", { className: POSTER_CLASS.body, children: [eyebrow ? _jsx("span", { className: POSTER_CLASS.eyebrow, children: eyebrow }) : null, title ? (_jsx(Heading, { level: 3, size: height === "compact" ? "lg" : "2xl", weight: "bold", color: "inherit", className: POSTER_CLASS.title, children: title })) : null, text ? (_jsx(Text, { size: "sm", color: "inherit", truncate: 3, className: POSTER_CLASS.text, children: text })) : null, meta ? _jsx("span", { className: POSTER_CLASS.meta, children: meta }) : null, chips ? _jsx("div", { className: POSTER_CLASS.chips, children: chips }) : null] })] }));
+}
+/**
+ * One chip. Renders an `<a>` when it has an `href` and a `<span>` otherwise,
+ * so a non-navigating chip is not announced as a link.
+ *
+ * 🛑 A plain `<a>`, not `next/link`, because `PosterCard` lives in the UI layer
+ * and must not pull a framework router into every consumer of the barrel — the
+ * same reason `media` is a slot. Consumers that want client-side navigation
+ * compose their own link around the chip classes via `POSTER_CLASS`.
+ */
+export function PosterChip({ href, emphasis = "glass", target, children, }) {
+    const classes = [POSTER_CLASS.chip, emphasis === "solid" ? POSTER_CLASS.chipKey : ""]
+        .filter(Boolean)
+        .join(" ");
+    if (!href)
+        return _jsx("span", { className: classes, children: children });
+    return (_jsx("a", { href: href, className: classes, target: target ?? "_self", rel: target === "_blank" ? "noopener noreferrer" : undefined, children: children }));
+}
+/* ── The no-artwork sibling ───────────────────────────────────────────────
+ *
+ * Lives in this file, not at the call site, for one mechanical reason: raw
+ * `<div>`/`<span>`/`<h3>`/`<p>` are blocked outside the primitive source
+ * directories by `audit-html-wrappers`, and `features/homepage/` is not one.
+ * The two cards are also one decision — a `custom-cards` section can mix cards
+ * that have an image with cards that do not, and they have to read as one row.
+ */
+export const PLAIN_CLASS = {
+    root: "appkit-plain-card",
+    eyebrow: "appkit-plain-card__eyebrow",
+    title: "appkit-plain-card__title",
+    text: "appkit-plain-card__text",
+    chips: "appkit-plain-card__chips",
+    chip: "appkit-chip",
+    chipKey: "appkit-chip--key",
+};
+export function PlainCard({ eyebrow, title, text, chips, footer, className = "", }) {
+    const classes = [PLAIN_CLASS.root, className].filter(Boolean).join(" ");
+    return (_jsxs("div", { className: classes, children: [eyebrow ? _jsx("span", { className: PLAIN_CLASS.eyebrow, children: eyebrow }) : null, title ? (_jsx(Heading, { level: 3, size: "xl", weight: "bold", color: "inherit", className: PLAIN_CLASS.title, children: title })) : null, text ? (_jsx(Text, { size: "sm", color: "inherit", className: PLAIN_CLASS.text, children: text })) : null, chips ? _jsx("div", { className: PLAIN_CLASS.chips, children: chips }) : null, footer] }));
+}
+const GRID_CLASS = {
+    1: POSTER_CLASS.grid1,
+    2: POSTER_CLASS.grid2,
+    3: POSTER_CLASS.grid3,
+    4: POSTER_CLASS.grid4,
+};
+/** 1 → 2 → N. See the note on `.appkit-poster-grid` for why not `Grid cols="cards"`. */
+export function PosterGrid({ columns = 4, children, className = "" }) {
+    const classes = [POSTER_CLASS.grid, GRID_CLASS[columns], className]
+        .filter(Boolean)
+        .join(" ");
+    return _jsx("div", { className: classes, children: children });
+}

package/dist/ui/components/PosterCard.style.css

@@ -0,0 +1,466 @@
+/*
+ * PosterCard — an image-led tile. Artwork fills the whole card, a vertical
+ * scrim carries the type, and the links sit as chips on the dark end.
+ *
+ * 🛑 This family is THEME-INVARIANT on purpose, and that is not the usual
+ * mistake. Root Cause #67 is about pairing a theme-INVERTING token
+ * (`bg-{status}-surface`) with a fixed `text-white`; here the background is a
+ * photograph plus an opaque dark scrim in BOTH themes, so white ink is correct
+ * in both and a theme-relative token would be the bug. Same reasoning as
+ * `surface="media-dark"`.
+ *
+ * 🛑 Colours are `rgb(… / α)`, never hex — `audit-hex-tokens` walks
+ * `appkit/src` and a standalone hex literal is a category-D violation.
+ *
+ * 🛑 The scrim lives here rather than on a call site's className because
+ * `audit-html-wrappers/RAW_GRADIENT_UTILITY` blocks `bg-gradient-to-*` outside
+ * primitive sources, and because both consumers (the homepage systems matrix
+ * and the Shop-by-Category tiles) need the identical ramp — two hand-written
+ * copies is how they drift.
+ */
+
+/* The near-black the whole family composes against. Declared once so the card
+   base, the scrim stops and the solid chip's ink cannot disagree. */
+.appkit-poster {
+  --appkit-poster-ink: 9 9 11;
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  min-height: 20rem;
+  overflow: hidden;
+  isolation: isolate;
+  border-radius: var(--appkit-radius-2xl);
+  background-color: rgb(var(--appkit-poster-ink));
+  /* The card is itself a link on the category tile. */
+  text-decoration: none;
+  /* A hairline INSIDE the radius. A `border` would be clipped by
+     `overflow: hidden` on the image corners; an inset ring is not. */
+  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
+  transition:
+    transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
+    box-shadow 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
+}
+
+.appkit-poster--tall {
+  min-height: 26rem;
+}
+
+.appkit-poster--compact {
+  min-height: 14rem;
+}
+
+.appkit-poster--compact .appkit-poster__body {
+  gap: var(--appkit-space-1);
+  padding: var(--appkit-space-4);
+}
+
+/* Hover lift. Guarded so a touch device — where `:hover` sticks after a tap —
+   never leaves a card translated. */
+@media (hover: hover) {
+  .appkit-poster:hover {
+    transform: translateY(-3px);
+    box-shadow:
+      inset 0 0 0 1px rgb(255 255 255 / 0.16),
+      0 18px 40px -18px rgb(0 0 0 / 0.55);
+  }
+
+  .appkit-poster:hover .appkit-poster__media {
+    transform: scale(1.06);
+  }
+}
+
+/* The whole card is a link on the category tile, so the ring must be visible
+   against the artwork rather than against a surface token. */
+.appkit-poster:focus-visible,
+.appkit-poster:has(:focus-visible) {
+  outline: 2px solid rgb(255 255 255 / 0.9);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .appkit-poster,
+  .appkit-poster__media {
+    transition: none;
+  }
+
+  .appkit-poster:hover {
+    transform: none;
+  }
+
+  .appkit-poster:hover .appkit-poster__media {
+    transform: none;
+  }
+}
+
+/* ── Artwork ──────────────────────────────────────────────────────────── */
+
+/*
+ * The positioned parent `MediaImage` needs — it renders `fill`, so without an
+ * absolutely-positioned ancestor Next warns and the image collapses.
+ *
+ * `object-position: center 22%` rather than `center`: every one of the four
+ * generation posters is portrait key art with the cast in the upper half and a
+ * burnt-in wordmark at the bottom, so a centred crop in a landscape-ish box
+ * frames torsos and puts the wordmark straight under the card's own title.
+ */
+.appkit-poster__media {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  transform-origin: center 30%;
+  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
+}
+
+.appkit-poster__media img {
+  object-position: center 22%;
+}
+
+/* ── Scrim ────────────────────────────────────────────────────────────── */
+
+/*
+ * Two ramps, and both are load-bearing:
+ *
+ *  - the vertical one takes the bottom ~55% to near-opaque so body copy and a
+ *    dozen chips are readable over busy, saturated artwork, while leaving the
+ *    top third nearly clear so the art is still the thing you see;
+ *  - the horizontal one is a shallow left wash, so the first word of every
+ *    line has contrast even where the art happens to be pale.
+ *
+ * The stops are deliberately uneven. A linear fade reads as a grey veil over
+ * the whole image; an eased one looks like light falling off.
+ */
+.appkit-poster__scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  background:
+    linear-gradient(
+      to top,
+      rgb(var(--appkit-poster-ink) / 0.97) 0%,
+      rgb(var(--appkit-poster-ink) / 0.93) 22%,
+      rgb(var(--appkit-poster-ink) / 0.72) 42%,
+      rgb(var(--appkit-poster-ink) / 0.34) 64%,
+      rgb(var(--appkit-poster-ink) / 0.08) 84%,
+      rgb(var(--appkit-poster-ink) / 0) 100%
+    ),
+    linear-gradient(
+      to right,
+      rgb(var(--appkit-poster-ink) / 0.55) 0%,
+      rgb(var(--appkit-poster-ink) / 0.12) 48%,
+      rgb(var(--appkit-poster-ink) / 0) 100%
+    );
+}
+
+/* ── Content ──────────────────────────────────────────────────────────── */
+
+.appkit-poster__body {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  gap: var(--appkit-space-3);
+  padding: var(--appkit-space-5);
+}
+
+.appkit-poster__eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--appkit-space-2);
+  color: rgb(255 255 255 / 0.62);
+  font-size: var(--appkit-text-xs);
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  font-variant-numeric: tabular-nums;
+}
+
+/* A short rule before the eyebrow — the one piece of ornament in the card, and
+   it earns its place by separating the date range from the artwork behind it. */
+.appkit-poster__eyebrow::before {
+  content: "";
+  width: 1.25rem;
+  height: 1px;
+  flex: none;
+  background: rgb(255 255 255 / 0.45);
+}
+
+/*
+ * 🛑 NO `font-size` and NO `font-weight` here, and that is a decision.
+ *
+ * The title and body render through `<Heading>`/`<Text>`, which emit
+ * `.appkit-text--2xl` / `.appkit-font--bold` — plain CSS classes at the same
+ * (0,1,0) specificity as these. A tie is broken by ORDER IN THE BUNDLE, which
+ * is `index.style.css`'s import list: an invisible dependency that flips the
+ * moment someone reorders an unrelated line. So size and weight are passed as
+ * PROPS (including the compact tile's smaller title) and this rule owns only
+ * what a prop cannot express.
+ *
+ * Line clamping is `truncate={3}` on the `<Text>` for the same reason —
+ * one owner, not two.
+ */
+.appkit-poster__title {
+  margin: 0;
+  color: rgb(255 255 255);
+  line-height: 1.15;
+  letter-spacing: -0.015em;
+  text-wrap: balance;
+}
+
+.appkit-poster__text {
+  margin: 0;
+  color: rgb(255 255 255 / 0.68);
+  line-height: 1.55;
+}
+
+.appkit-poster__meta {
+  color: rgb(255 255 255 / 0.55);
+  font-size: var(--appkit-text-xs);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Chips ────────────────────────────────────────────────────────────── */
+
+/*
+ * A hairline rule above the chip row. The body copy and the links are two
+ * different kinds of thing — prose versus navigation — and on a card with
+ * seven or eight chips that boundary is what stops the block reading as a
+ * paragraph that ran out of punctuation.
+ */
+.appkit-poster__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--appkit-space-2);
+  margin-top: var(--appkit-space-1);
+  padding-top: var(--appkit-space-3);
+  border-top: 1px solid rgb(255 255 255 / 0.12);
+}
+
+.appkit-poster__chip {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  padding: 0.3125rem 0.6875rem;
+  border: 1px solid rgb(255 255 255 / 0.16);
+  border-radius: var(--appkit-radius-full);
+  background: rgb(255 255 255 / 0.09);
+  /* Progressive: unsupported browsers get the flat 9% wash, which is already
+     legible against the scrim. Nothing depends on the blur. */
+  backdrop-filter: blur(8px);
+  color: rgb(255 255 255 / 0.88);
+  font-size: var(--appkit-text-xs);
+  font-weight: 500;
+  line-height: 1.25;
+  white-space: nowrap;
+  text-decoration: none;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease;
+}
+
+.appkit-poster__chip:hover {
+  background: rgb(255 255 255 / 0.2);
+  border-color: rgb(255 255 255 / 0.38);
+  color: rgb(255 255 255);
+}
+
+/*
+ * The destination chips — "Parts", "Launchers", "Stadiums". These are the
+ * widest pages behind the card, so they invert to a solid fill and sort to the
+ * end of the row. One emphasis level, never two: a card where three chips all
+ * shout has no hierarchy at all.
+ */
+.appkit-poster__chip--key {
+  background: rgb(255 255 255 / 0.95);
+  border-color: transparent;
+  color: rgb(var(--appkit-poster-ink));
+  font-weight: 600;
+}
+
+.appkit-poster__chip--key:hover {
+  background: rgb(255 255 255);
+  border-color: transparent;
+  color: rgb(var(--appkit-poster-ink));
+}
+
+/* ── On-surface chips ─────────────────────────────────────────────────────
+ *
+ * The light-theme counterpart of `.appkit-poster__chip`, for the same control
+ * on a card that has NO artwork — a `custom-cards` section an admin authored
+ * without images still renders a row of taxonomy links, and those must not
+ * fall back to the four generic button variants that made the row read as a
+ * pile of mismatched buttons.
+ *
+ * Theme-RELATIVE, unlike everything above: there is no scrim here, so the ink
+ * has to invert with the theme. `bg-{…}-surface`-style tokens throughout, no
+ * fixed white — Root Cause #67.
+ */
+
+.appkit-chip {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  padding: 0.3125rem 0.6875rem;
+  border: 1px solid var(--appkit-color-border);
+  border-radius: var(--appkit-radius-full);
+  background: var(--appkit-color-surface-elevated);
+  color: var(--appkit-color-text-muted);
+  font-size: var(--appkit-text-xs);
+  font-weight: 500;
+  line-height: 1.25;
+  white-space: nowrap;
+  text-decoration: none;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease;
+}
+
+.appkit-chip:hover {
+  border-color: var(--appkit-color-primary);
+  background: var(--appkit-color-primary-surface);
+  color: var(--appkit-color-primary);
+}
+
+.appkit-chip--key {
+  border-color: transparent;
+  background: var(--appkit-color-primary);
+  color: var(--appkit-color-text-on-primary);
+  font-weight: 600;
+}
+
+.appkit-chip--key:hover {
+  border-color: transparent;
+  background: var(--appkit-color-primary-600);
+  color: var(--appkit-color-text-on-primary);
+}
+
+/* ── Plain card ───────────────────────────────────────────────────────────
+ *
+ * The no-artwork sibling of `.appkit-poster`. Same radius, same hairline, same
+ * hover — so a mixed section (some cards with images, some without) still
+ * reads as one row rather than two designs.
+ */
+
+.appkit-plain-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--appkit-space-3);
+  padding: var(--appkit-space-5);
+  min-height: 14rem;
+  border-radius: var(--appkit-radius-2xl);
+  background: var(--appkit-color-surface);
+  box-shadow: inset 0 0 0 1px var(--appkit-color-border);
+  transition:
+    transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
+    box-shadow 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
+}
+
+@media (hover: hover) {
+  .appkit-plain-card:hover {
+    transform: translateY(-3px);
+    box-shadow:
+      inset 0 0 0 1px var(--appkit-color-primary),
+      0 18px 40px -18px rgb(0 0 0 / 0.18);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .appkit-plain-card {
+    transition: none;
+  }
+
+  .appkit-plain-card:hover {
+    transform: none;
+  }
+}
+
+.appkit-plain-card__eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--appkit-space-2);
+  color: var(--appkit-color-text-faint);
+  font-size: var(--appkit-text-xs);
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  font-variant-numeric: tabular-nums;
+}
+
+.appkit-plain-card__eyebrow::before {
+  content: "";
+  width: 1.25rem;
+  height: 1px;
+  flex: none;
+  background: var(--appkit-color-border);
+}
+
+/* Size and weight come from the `<Heading>`/`<Text>` props — see the note on
+   `.appkit-poster__title`. */
+.appkit-plain-card__title {
+  margin: 0;
+  color: var(--appkit-color-text);
+  line-height: 1.2;
+  letter-spacing: -0.015em;
+  text-wrap: balance;
+}
+
+.appkit-plain-card__text {
+  margin: 0;
+  color: var(--appkit-color-text-muted);
+  line-height: 1.55;
+}
+
+.appkit-plain-card__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--appkit-space-2);
+  margin-top: auto;
+  padding-top: var(--appkit-space-3);
+  border-top: 1px solid var(--appkit-color-border-subtle);
+}
+
+/* ── Grid ─────────────────────────────────────────────────────────────── */
+
+/*
+ * Posters are tall, so they do NOT use `<Grid cols="cards">` — that ladder's
+ * `auto-fill` tier is tuned for ~240px product tiles and would open a fifth
+ * track on a wide screen, breaking a set of exactly four generations into
+ * "four and a gap". A fixed 1 → 2 → 4 ladder is the honest shape for a fixed
+ * set.
+ */
+.appkit-poster-grid {
+  display: grid;
+  gap: var(--appkit-space-4);
+  grid-template-columns: minmax(0, 1fr);
+}
+
+/* Explicit rather than inherited from the base. A modifier that generates no
+   rule of its own is what `audit-dead-css-classes` exists to catch, and
+   "it happens to equal the default today" is not a reason to omit it. */
+.appkit-poster-grid--1 {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+@media (min-width: 40rem) {
+  .appkit-poster-grid--2,
+  .appkit-poster-grid--3,
+  .appkit-poster-grid--4 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 64rem) {
+  .appkit-poster-grid--4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .appkit-poster-grid--3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}

package/dist/ui/components/index.style.css

@@ -77,6 +77,7 @@
 @import "./Menu.style.css";
 @import "./OverflowRow.style.css";
 @import "./MediaTabs.style.css";
+@import "./PosterCard.style.css";
 @import "./Semantic.style.css";
 @import "./UnsavedChangesModal.style.css";
 @import "../DataTable.style.css";

package/dist/ui/index.d.ts

@@ -109,6 +109,8 @@ export { ImageMosaic, MOSAIC_MIN } from "./components/ImageMosaic";
 export type { ImageMosaicProps, ImageMosaicSize } from "./components/ImageMosaic";
 export { SplitTile } from "./components/SplitTile";
 export type { SplitTileProps, SplitTilePane } from "./components/SplitTile";
+export { PosterCard, PosterChip, PosterGrid, PlainCard, POSTER_CLASS, PLAIN_CLASS, } from "./components/PosterCard";
+export type { PosterCardProps, PosterCardHeight, PosterChipProps, PosterGridProps, PlainCardProps, } from "./components/PosterCard";
 export type { ImageLightboxProps, LightboxImage, } from "./components/ImageLightbox";
 export { ImageLightbox } from "./components/ImageLightbox";
 export type { TagInputProps } from "./components/TagInput";