@kolkrabbi/kol-component 0.130.0 → 0.132.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.130.0",
+  "version": "0.132.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",

package/src/index.js

@@ -82,8 +82,6 @@ export { default as Dropdown } from './molecules/Dropdown.jsx'
 export { default as FieldRow, StatusChip } from './molecules/FieldRow.jsx'
 export { default as FramedMediaBand } from './organisms/FramedMediaBand.jsx'
 export { default as Image } from './atoms/Image.jsx'
-export { default as MediaCard } from './molecules/MediaCard.jsx'
-export { default as MediaRow } from './molecules/MediaRow.jsx'
 
 /* content-card system (2026-08-15) — the ruled card/row family:
  * docs/documentation/03-components/06-content-card-system.md */

package/src/molecules/ContentCard.jsx

@@ -29,12 +29,11 @@ import ContentText from './ContentText.jsx'
 /* ruled defaults — defaults, not hardcodes; `ratio` stays overridable while
  * the A4 question is open (06-content-card-system.md §4). */
 const RATIOS = {
-  default: '1 / 1',
+  file: '1 / 1',
   catalog: '1 / 1.41421',
-  print: '1 / 1.41421',
   article: '16 / 9',
-  work: '3 / 4',
-  typeface: '1 / 1.41421',
+  showcase: '3 / 4',
+  showcaseCanvas: '1 / 1.41421',
 }
 
 /* ruled box values per variant, verbatim from the §3 reference cards —
@@ -43,24 +42,23 @@ const BOX = {
   /* no border (ColumnBrowser round, user 2026-08-27: "I don't like the border, I feel
    * like I've said that before" — the ListingCardThumbBorder ruling): the selected
    * state reads from the checked ToggleCheckbox, not a fg-64 border */
-  default:  { layout: 'stack', border: null, bg: 'var(--kol-fg-02)', pad: 'var(--kol-pad-card-sm)' },
+  file:  { layout: 'stack', border: null, bg: 'var(--kol-fg-02)', pad: 'var(--kol-pad-card-sm)' },
   /* THE FRAME READS BACKWARDS (CatalogCardFrameAndZoom, kol-website 2026-08-28 — user, on a 212-tile
    * grid: no frame at rest; the old rest value is the hover): a wall of fg-04 frames is a grid of boxes,
    * louder than what they hold. Rest `transparent` (the 1px stays, so the hover step never relayouts),
    * hover fg-04. Was fg-04 → fg-16 (ShellHomeSystem, 2026-08-27). */
   catalog:  { layout: 'fill-card', border: 'transparent', bg: 'var(--kol-fg-04)', pad: 'var(--kol-pad-card-sm) var(--kol-pad-card-md)', plateTop: true, plateBg: 'var(--kol-surface-primary)', frameHover: 'var(--kol-fg-04)' },
   /* flip: PrintGridCard's 3D turn on `isFlipped` → `selected` (ContentRowsAndPrintCard, 2026-08-27) */
-  print:    { layout: 'fill-card', border: null, bg: 'var(--kol-surface-secondary)', pad: 'var(--kol-pad-card-sm) var(--kol-pad-card-md)', plateTop: true, flip: true },
   article:  { layout: 'stack', border: null, bg: null, pad: '0', mediaGap: 'var(--kol-spacing-4)' },
   /* work is a DRAWER: image-only at rest, and on hover a light plate rises
    * over the bottom of the artwork carrying the title + meta. This is the
    * shipped WorkCard and it was wrong to reject it as "hiding the title" — a
    * work shelf is a wall of images by design, and the caption is the reveal. */
-  work:     { layout: 'drawer', border: 'var(--kol-fg-04)', bg: null, pad: 'var(--kol-pad-card-md)', padMd: 'var(--kol-pad-card-lg)' },
+  showcase: { layout: 'drawer', border: 'var(--kol-fg-04)', bg: null, pad: 'var(--kol-pad-card-md)', padMd: 'var(--kol-pad-card-lg)' },
   /* typeface's card is a FIXED 500px tall specimen board, not a ratio — the
    * shipped item is `h-[500px]`, and a ratio re-crops the glyph at every
    * column width, which is the one thing a specimen must not do. */
-  typeface: { layout: 'canvas', border: 'var(--kol-fg-08)', bg: 'var(--kol-surface-primary)', pad: 'var(--kol-pad-card-lg)', height: 500 },
+  showcaseCanvas: { layout: 'canvas', border: 'var(--kol-fg-08)', bg: 'var(--kol-surface-primary)', pad: 'var(--kol-pad-card-lg)', height: 500 },
 }
 
 /* HOVER is a bg STEP on the opaque tier, per 05-control-chrome.md's state model
@@ -69,16 +67,15 @@ const BOX = {
  * control vanishing. article is the exception the shipped card already set: it
  * has no surface of its own to step, so it dims its title instead. */
 const HOVER = {
-  default:  'var(--kol-oq-04)',
+  file:  'var(--kol-oq-04)',
   catalog:  'var(--kol-surface-tertiary)',
-  print:    'var(--kol-oq-04)',
   /* article and work take NO surface hover, and that is a decision not a gap:
    * article has no surface of its own (its media frame, when on, steps its
    * border instead), and work's whole hover IS the drawer rising. A second wash under
    * either would be two answers to one question. */
   article:  null,
-  work:     null,
-  typeface: 'var(--kol-surface-inverse)',
+  showcase: null,
+  showcaseCanvas: 'var(--kol-surface-inverse)',
 }
 
 /* per-variant media treatment. `ring` sits OVER the artwork, `frame` UNDER it —
@@ -89,17 +86,39 @@ const MEDIA = {
   /* zoom is for IMAGE-LED cards — where the artwork is the content and the
    * card is a frame around it. A catalog tile whose preview is a diagram, or
    * a default file card whose thumb is a 48px chip, gets nothing from it. */
-  /* fade: PrintGridCard's image fade-in + loading="lazy", carried (2026-08-27) */
-  print:   { ring: true, zoom: true, fade: true },
-  work:    { zoom: true },
+  /* `print` FOLDED INTO `catalog` 2026-08-29 (user: "print doesnt need to exist
+   * all together, it can just use catalog"). Its two behaviours became PROPS,
+   * because a 3D turn and an image fade-in are things a card DOES, not kinds of
+   * content it holds: `flip` and `fade`. Its zoom is catalog's already (below).
+   * `ring` was removed the same day — it stays an opt-in on ContentMedia. */
+  showcase: { zoom: true },
   /* frame OFF by default (ListingCardThumbBorder, user 2026-08-27: "I hate
    * border — remove border"): the article thumb's hairline is opt-in —
    * `frame` turns it on, and with it the fg-08 → fg-16 hover step */
   article: { frame: false, borderHover: true, zoom: true },
 }
 
+/* VARIANTS ARE CONTENT KINDS, NEVER PAGE NAMES (user ruling 2026-08-29:
+ * "naming the variants by their use location doesnt make sense, because print
+ * doesnt use print variant"). Six page-named variants became four kinds —
+ * file · catalog · article · showcase — and the old names alias onto them:
+ *
+ *   default  → file            the fallback's name described its position
+ *   print    → catalog         /prints renders `work` rows and a plateless
+ *                              catalog card; `flip` + `fade` became props
+ *   work     → showcase        /work is a location; a work is a shown piece
+ *   typeface → showcase +      same card, full overlay instead of a drawer
+ *              layout="canvas"
+ *
+ * `layout` is the discriminator inside `showcase` because `reveal` was already
+ * taken by the consumer's overlay NODE. Its values are the box vocabulary the
+ * component already spoke: drawer (default) · canvas. */
+const ALIAS = { default: 'file', print: 'catalog', work: 'showcase', typeface: 'showcaseCanvas' }
+const LAYOUT_KEY = { canvas: 'showcaseCanvas', drawer: 'showcase' }
+
 export default function ContentCard({
-  variant = 'default',
+  variant: variantProp = 'file',
+  layout,
   hero = false,
   label,
   pad,
@@ -109,6 +128,9 @@ export default function ContentCard({
   frame,
   ring,
   zoom,
+  /* `flip` + `fade` — behaviours, not variants (the print fold, 2026-08-29) */
+  flip,
+  fade,
   /* plateRule (CatalogCardFrameAndZoom): the plate's top hairline — default the variant's (catalog and
    * print draw it); `false` turns it off without an `!important` in a consumer sheet */
   plateRule,
@@ -125,7 +147,12 @@ export default function ContentCard({
   className = '',
   ...text
 }) {
-  const box = BOX[variant] ?? BOX.default
+  const aliased = ALIAS[variantProp] ?? variantProp
+  /* `layout` only re-keys inside the showcase family — it is not a general
+   * escape hatch that would let any variant borrow another's box. */
+  const variant = aliased.startsWith('showcase') && layout ? LAYOUT_KEY[layout] ?? aliased : aliased
+  const box = BOX[variant] ?? BOX.file
+  const doFlip = flip ?? box.flip
   /* HERO (2026-08-27 — the featured card riding a page's fold; ListingCard
    * size="hero" had no ContentCard equivalent, which is why Stack still
    * imported it): a header row above the media — `label` left, `meta` chips
@@ -205,7 +232,7 @@ export default function ContentCard({
     borderHover: MEDIA[variant]?.borderHover ?? false,
     /* a catalog card with REAL media is image-led: it zooms (ShellHomeSystem) */
     zoom: zoom ?? (isHero ? 'hero' : variant === 'catalog' ? media != null : MEDIA[variant]?.zoom ?? false),
-    fade: MEDIA[variant]?.fade ?? false,
+    fade: fade ?? MEDIA[variant]?.fade ?? false,
   }
 
   /* `control` — the in-frame control slot (user ruling 2026-08-15). One node,
@@ -236,12 +263,12 @@ export default function ContentCard({
       </>
     ) : box.layout === 'fill-card' ? (
       <>
-        <div className="flex-1 min-w-0 min-h-0 relative overflow-hidden" style={{ ...(expanded ? { flex: '0 0 50%' } : null), ...(box.flip ? { perspective: '1000px' } : null) }}>
+        <div className="flex-1 min-w-0 min-h-0 relative overflow-hidden" style={{ ...(expanded ? { flex: '0 0 50%' } : null), ...(doFlip ? { perspective: '1000px' } : null) }}>
           {/* the FLIP (print): PrintGridCard's turn, verbatim — preserve-3d,
             * 0.4s ease-out, rotateY(180deg) while `selected`; the consumer's
             * `onClick` reads the rect off `event.currentTarget` for its
             * FLIP-transition (the seam was always reachable) */}
-          {box.flip ? (
+          {doFlip ? (
             <div className="h-full w-full" style={{ transformStyle: 'preserve-3d', backfaceVisibility: 'hidden', transition: 'transform 0.4s ease-out', transform: selected ? 'rotateY(180deg)' : 'rotateY(0deg)' }}>
               <ContentMedia ratio={null} {...mediaProps}>{media}</ContentMedia>
             </div>

package/src/molecules/ContentRow.jsx

@@ -10,12 +10,17 @@ import ContentText from './ContentText.jsx'
  * thumb; article rides a 120px 16:9 thumb; work a framed 64px row; typeface a
  * framed no-thumb block.
  *
- * @param {string}    variant   default | catalog | print | article | work | typeface
+ * @param {string}    variant   file | catalog | print | article | work | typeface
+ *                             (`default` is an alias of `file`)
  * @param {ReactNode} media     thumb content (omit → placeholder)
  * @param {number|'fill'} thumb  thumb edge px — overrides the ruled default; 0 hides; `'fill'` = a square
  *                             the height of the row's content, whatever the rung (WorkListingRowsAndFilters)
  * @param {string}    ratio     thumb aspect-ratio — overrides the ruled default
  * @param {number}    paddingY  vertical padding px — overrides the ruled default
+ * @param {{label: ReactNode, value: ReactNode}[]} specs  label/value pairs on the
+ *                             row's trailing edge, independent of variant.
+ *                             Horizontal variants only — `typeface` is a column
+ *                             and takes a band through `footer` instead.
  * @param {boolean}   selected
  * @param {Function}  onClick
  * text slots + *Class seams forwarded to ContentText.
@@ -25,12 +30,15 @@ import ContentText from './ContentText.jsx'
  * --kol-spacing-* tokens (2=8 · 3=12 · 4=16 · 6=24), never a literal */
 const S2 = 'var(--kol-spacing-2)', S3 = 'var(--kol-spacing-3)', S4 = 'var(--kol-spacing-4)', S6 = 'var(--kol-spacing-6)'
 const BOX = {
-  default:  { thumb: 48,  ratio: '1 / 1',  pad: `${S2} 0`,     gap: S3, align: 'items-center', divider: true, hover: 'var(--kol-oq-04)' },
+  /* NO hover wash (user 2026-08-29, on the variant-reference page: "makes a
+   * grey background, remove it"). The default row is a bare ruled line — a
+   * full-width grey band under it is heavier than the line itself. Scoped to
+   * `default`: catalog and print still carry the same `oq-04`, unruled. */
+  file:  { thumb: 48,  ratio: '1 / 1',  pad: `${S2} 0`,     gap: S3, align: 'items-center', divider: true },
   /* catalog/print rows render AT 36px — the shipped GridCard list row is a
    * fixed 36 and the Y padding was what pushed it past that. X padding stays;
    * `minH` is now the whole height budget and the row centres inside it. */
   catalog:  { thumb: 0,   ratio: '1 / 1',  pad: `0 ${S3}`,     gap: S3, frame: 'var(--kol-fg-04)', bg: 'var(--kol-surface-tertiary)', minH: 36, align: 'items-center', hover: 'var(--kol-oq-04)' },
-  print:    { thumb: 0,   ratio: '1 / 1',  pad: `0 ${S3}`,     gap: S3, frame: 'var(--kol-fg-04)', bg: 'var(--kol-surface-tertiary)', minH: 36, align: 'items-center', hover: 'var(--kol-oq-04)' },
   /* ListingCard's row thumb is `bg-fg-12` bare — a tint, no border. */
   /* article had NO hover of any kind — the only row in the family you could
    * point at and get nothing back. It has no surface of its own, so it takes
@@ -44,22 +52,32 @@ const BOX = {
    * the content height (136 in a 168 row) with no hairline, the frame steps
    * transparent → fg-08 on hover ("0 → 16 is a big jump"). No md step: the rows
    * were approved at their base values. */
-  work:     { thumb: 'fill', ratio: '1 / 1', pad: S4, gap: S4, frame: 'transparent', frameHover: 'var(--kol-fg-08)', bg: 'var(--kol-surface-secondary)', minH: 168, align: 'items-stretch', thumbRadius: 'var(--kol-radius-xs)', thumbBorder: false },
+  showcase: { thumb: 'fill', ratio: '1 / 1', pad: S4, gap: S4, frame: 'transparent', frameHover: 'var(--kol-fg-08)', bg: 'var(--kol-surface-secondary)', minH: 168, align: 'items-stretch', thumbRadius: 'var(--kol-radius-xs)', thumbBorder: false },
   /* typeface's row is a COLUMN, not a line: a header (name/styles left,
    * classification/year right) with a full-width specimen band under it. The
    * shipped item is `flex-col gap-6`, and forcing it into the horizontal
    * thumb-beside-text shape is what turned its alphabet into a 160px thumb. */
-  typeface: { thumb: 0,   ratio: '1 / 1',  pad: S6,            gap: S6, column: true, frame: 'var(--kol-fg-08)', bg: 'transparent', minH: 160, align: 'items-start', hover: 'color-mix(in srgb, var(--kol-surface-on-primary) 1%, transparent)', frameHover: 'color-mix(in srgb, var(--kol-surface-on-primary) 24%, transparent)' },
+  showcaseCanvas: { thumb: 0,   ratio: '1 / 1',  pad: S6,            gap: S6, column: true, frame: 'var(--kol-fg-08)', bg: 'transparent', minH: 160, align: 'items-start', hover: 'color-mix(in srgb, var(--kol-surface-on-primary) 1%, transparent)', frameHover: 'color-mix(in srgb, var(--kol-surface-on-primary) 24%, transparent)' },
 }
 
+/* `default` → `file` (user 2026-08-29). The variant was named after being the
+ * fallback, which described its position in the map rather than its content;
+ * every consumer of it is a file browser (r2b2 via MediaLibrary, the brand
+ * app's LibraryLocal + SlideDeckManager) and its slots are filename · date ·
+ * size. `default` keeps working as an alias — see 04-retirements.md. */
+const ALIAS = { default: 'file', print: 'catalog', work: 'showcase', typeface: 'showcaseCanvas' }
+const LAYOUT_KEY = { column: 'showcaseCanvas', line: 'showcase' }
+
 export default function ContentRow({
-  variant = 'default',
+  variant: variantProp = 'file',
+  layout,
   media,
   thumb,
   ratio,
   paddingY,
   actions,
   footer,
+  specs,
   selected = false,
   onClick,
   href,
@@ -67,7 +85,9 @@ export default function ContentRow({
   className = '',
   ...text
 }) {
-  const box = BOX[variant] ?? BOX.default
+  const aliased = ALIAS[variantProp] ?? variantProp
+  const variant = aliased.startsWith('showcase') && layout ? LAYOUT_KEY[layout] ?? aliased : aliased
+  const box = BOX[variant] ?? BOX.file
   const thumbPx = thumb ?? box.thumb
   const padY = (paddingY != null ? `${paddingY}px` : String(box.pad)).trim().split(/\s+/)[0]
 
@@ -133,6 +153,22 @@ export default function ContentRow({
         </div>
       )}
       <ContentText variant={variant} form="row" className="flex-1" {...text} />
+      {/* `specs` rides the trailing edge on EVERY variant — year · material ·
+       * edition is a content difference, not a geometry one, and minting a
+       * seventh page-named box for it is the exact mistake §1 of the ticket is
+       * about (RowVariantNamesAndSpecs, 2026-08-29).
+       * ponytail: horizontal rows only — a column variant (`typeface`) has no
+       * right column to ride. Give it a band via `footer` instead. */}
+      {specs?.length > 0 && (
+        <dl className="kol-row-specs shrink-0">
+          {specs.map(({ label, value }, i) => (
+            <div key={label ?? i}>
+              <dt>{label}</dt>
+              <dd>{value}</dd>
+            </div>
+          ))}
+        </dl>
+      )}
       {/* trailing edge, never in the text flow — MediaRow's placement */}
       {actions && <div className="shrink-0">{actions}</div>}
     </>

package/src/molecules/ContentText.jsx

@@ -47,7 +47,7 @@
 
 /* [variant][form][slot] → 'type-class ink-role', verbatim from the ruled table */
 const RAMP = {
-  default: {
+  file: {
     card: { title: 'kol-sans-heading-04 text-emphasis truncate', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-meta' },
     row:  { title: 'kol-sans-heading-05 text-emphasis truncate', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-meta' },
   },
@@ -57,12 +57,8 @@ const RAMP = {
     card: { title: 'kol-mono-14 text-emphasis', detail: 'kol-mono-10 text-meta truncate' },
     row:  { title: 'kol-mono-12 text-emphasis', detail: 'kol-mono-10 text-meta' },
   },
-  print: {
-    card: { title: 'kol-mono-14 text-emphasis', detail: 'kol-mono-10 text-meta' },
-    /* mono-12 + emphasis, matching catalog — print's row IS catalog's row, so
-     * the two must not disagree about their own type. */
-    row:  { title: 'kol-mono-12 text-emphasis', detail: 'kol-mono-10 text-meta' },
-  },
+  /* `print` folded into `catalog` 2026-08-29 — its row was already catalog's,
+   * and its card differed only by `detail` not truncating. It aliases now. */
   article: {
     /* kol-content-title-dim: the title dims to 70% on card hover (StackCardHover, 2026-08-27 — ListingCard's move, kol-theme) */
     card: { eyebrow: 'kol-mono-12 text-meta', title: 'kol-sans-heading-03 text-emphasis kol-content-title-dim', body: 'kol-mono-14 text-body', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-meta', tags: 'flex flex-wrap gap-2' },
@@ -75,7 +71,7 @@ const RAMP = {
      * display-03 uppercase, clamp 2, dim on hover; body mono-14 fg-48 clamp 2. */
     hero: { eyebrow: 'kol-card-kicker tracking-wide text-fg-64', title: 'kol-sans-display-03 uppercase line-clamp-2 kol-content-title-dim', body: 'kol-mono-14 text-fg-48 line-clamp-2', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-meta', tags: 'flex flex-wrap gap-2' },
   },
-  work: {
+  showcase: {
     /* INVERSE ink — the card's plate is the drawer, `surface-inverse`. Leaving
      * these on `text-emphasis` painted light type on a light plate and the
      * caption disappeared. */
@@ -95,7 +91,7 @@ const RAMP = {
      * ink, the year kol-mono-12 fg-64. Body unchanged (the site passes its face). */
     row:  { title: 'kol-mono-14 uppercase text-emphasis truncate', body: 'kol-sans-heading-03 leading-tight text-emphasis truncate', meta: 'kol-mono-14 text-emphasis', date: 'kol-mono-12 text-fg-64', tags: 'flex flex-wrap items-center gap-1.5' },
   },
-  typeface: {
+  showcaseCanvas: {
     /* RULED ON SCREEN (TypefaceCardAndRow, kol-website 2026-08-27): name and
      * classification are FULL ink, the year steps to 64; the card's title is the
      * row's title string — one title voice for the typeface family. Ink only. */
@@ -122,9 +118,8 @@ const RAMP = {
  * Directions are the RULED structures (06-content-card-system.md §2 boxes),
  * read off the shipped components and the live pages they render on. */
 const ORDER = {
-  default:  { card: ['title', ['group', 'date', 'size']], row: ['title', ['group', 'date', 'size']] },
+  file:  { card: ['title', ['group', 'date', 'size']], row: ['title', ['group', 'date', 'size']] },
   catalog:  { card: ['title', 'detail'], row: [['between', 'title', 'detail']] },
-  print:    { card: ['title', 'detail'], row: [['between', 'title', 'detail']] },
   /* title + body are ONE block in BOTH forms — a `stack`, so they sit on the
    * tight 4px internal gap while tags, kicker and the meta group keep the
    * form's own outer gap. A flat column gave every line the same gap, which
@@ -142,12 +137,12 @@ const ORDER = {
   /* WorkListItem's inner column is `justify-between` with the header row on
    * top and the description BELOW IT, spanning the full width — not tucked
    * inside the left column, which is what squeezed the big line. */
-  work:     { card: ['title', 'meta'], row: [['between', ['stack', 'title', 'tags'], ['stack', 'meta', 'date']], 'body'] },
+  showcase: { card: ['title', 'meta'], row: [['between', ['stack', 'title', 'tags'], ['stack', 'meta', 'date']], 'body'] },
   /* typeface row = ONE header line, both sides stacked: name over styles on the
    * left, classification over year on the right. Verbatim from the shipped
    * item, which had been flattened into title-left / date-right and lost the
    * styles line into a body slot below. */
-  typeface: { card: ['title', 'body'], row: [['between', ['stack', 'title', 'body'], ['stack', 'detail', 'date']]] },
+  showcaseCanvas: { card: ['title', 'body'], row: [['between', ['stack', 'title', 'body'], ['stack', 'detail', 'date']]] },
 }
 
 /* inner line gap per variant/form, read from the shipped boxes and spelled in
@@ -163,26 +158,29 @@ const ORDER = {
  * `self-stretch`, NOT `h-full` — the row carries `min-height`, never `height`,
  * so `height: 100%` resolves against an indefinite parent, computes to auto,
  * and shrink-wraps the column. Which is exactly what it did. */
-const FILL = { work: true }
+const FILL = { showcase: true }
 
 /* gap INSIDE a ['stack', …] block. Defaults to the tight 4px pair article
  * wants; work's header stack is the shipped gap-1 md:gap-2. */
 const STACK = {
-  work: 'var(--kol-spacing-2)',
-  typeface: 'var(--kol-spacing-2)',
+  showcase: 'var(--kol-spacing-2)',
+  showcaseCanvas: 'var(--kol-spacing-2)',
 }
 
 const GAPS = {
-  default: { card: 'var(--kol-spacing-3)', row: 'var(--kol-spacing-2)' },
+  file: { card: 'var(--kol-spacing-3)', row: 'var(--kol-spacing-2)' },
   catalog: { card: 'var(--kol-spacing-1)', row: 'var(--kol-spacing-2)' },
-  print: { card: 'var(--kol-spacing-2)', row: 'var(--kol-spacing-2)' },
   article: { card: 'var(--kol-spacing-3)', row: 'var(--kol-spacing-3)', hero: 'var(--kol-spacing-3)' },
-  work: { card: 'var(--kol-spacing-2)', row: 'var(--kol-spacing-4)' },
-  typeface: { card: 'var(--kol-spacing-2)', row: 'var(--kol-spacing-6)' },
+  showcase: { card: 'var(--kol-spacing-2)', row: 'var(--kol-spacing-4)' },
+  showcaseCanvas: { card: 'var(--kol-spacing-2)', row: 'var(--kol-spacing-6)' },
 }
 
+/* `default` → `file` (user 2026-08-29) — kept working as an alias here too,
+ * because ContentText is exported and a consumer can drive it directly. */
+const ALIAS = { default: 'file', print: 'catalog', work: 'showcase', typeface: 'showcaseCanvas' }
+
 export default function ContentText({
-  variant = 'default',
+  variant: variantProp = 'file',
   form = 'card',
   title, body, eyebrow, kicker, detail, date, size, meta, tags,
   gap, clamp,
@@ -192,8 +190,9 @@ export default function ContentText({
   /* `kicker` / `kickerClass` = aliases of `eyebrow` / `eyebrowClass` (2026-08-27) */
   eyebrow = eyebrow ?? kicker
   eyebrowClass = eyebrowClass ?? kickerClass
-  const ramp = RAMP[variant]?.[form] ?? RAMP.default[form] ?? RAMP.default.card
-  const order = (form === 'hero' && ORDER[`${variant}Hero`]) || ORDER[variant]?.[form] || ORDER.default.card
+  const variant = ALIAS[variantProp] ?? variantProp
+  const ramp = RAMP[variant]?.[form] ?? RAMP.file[form] ?? RAMP.file.card
+  const order = (form === 'hero' && ORDER[`${variant}Hero`]) || ORDER[variant]?.[form] || ORDER.file.card
   const values = { title, body, eyebrow, detail, date, size, meta, tags }
   const overrides = { title: titleClass, body: bodyClass, eyebrow: eyebrowClass, detail: detailClass, date: dateClass, size: sizeClass, meta: metaClass, tags: tagsClass }
 

package/src/molecules/MediaCard.jsx

@@ -1,103 +0,0 @@
-import { Icon } from '@kolkrabbi/kol-icons'
-
-/* taxonomy-ok: nests kol-icons's Icon (a package import the relative-import
- * check can't see) plus the same-file SelectIndicator. */
-
-/**
- * @deprecated 2026-08-26 — absorbed by `ContentCard variant="default"` in @kolkrabbi/kol-component
- * (the Content Set, 2026-08-15). Step 1 of the retirement wave: this export
- * stays and renders unchanged until the next major, then it is removed.
- * Consumers: swap on your next bump. Map + row-by-row diff:
- * docs/documentation/03-components/06-content-card-system.md.
- *
- * SelectIndicator — passive square check indicator for multi-select rows and
- * cards. `on` = checked. Deliberately NOT ToggleCheckbox: that is a labeled
- * form control with a real <input>, which double-fires inside a click-target
- * card and misleads assistive tech — here the CARD is the toggle, this is
- * only its visual state. Inline CSS vars because `bg-fg-default` isn't a
- * generated Tailwind utility; the checked fill reads from
- * `--kol-surface-on-primary` (solid fg, theme-correct).
- *
- * Shared by MediaCard and MediaRow; not exported from the package barrel.
- */
-export function SelectIndicator({ on = false }) {
-  return (
-    <span
-      className="w-4 h-4 shrink-0 rounded-sm border flex items-center justify-center transition-colors"
-      style={
-        on
-          ? { background: 'var(--kol-surface-on-primary)', borderColor: 'var(--kol-surface-on-primary)' }
-          : { background: 'var(--kol-fg-ab-16, rgba(0,0,0,0.15))', borderColor: 'var(--kol-fg-ab-48, rgba(0,0,0,0.4))' }
-      }
-      aria-hidden="true"
-    >
-      {on && <Icon name="check" size={11} style={{ color: 'var(--kol-surface-primary)' }} />}
-    </span>
-  )
-}
-
-/**
- * MediaCard — grid tile for one media object: square thumbnail with a
- * top-right download overlay (or a top-left select checkbox in select mode),
- * then name / meta / actions stacked below. The grid-view counterpart to
- * MediaRow (same slot contract).
- *
- * Presentational — the parent supplies rendered slots; no media loading,
- * fetch, or rename logic lives here. Grid track sizing belongs to the parent
- * list; the card just fills its cell.
- *
- * @param {ReactNode} thumb        square thumbnail (image/video/placeholder)
- * @param {ReactNode} name         name cell (plain text or an inline editor)
- * @param {string}    meta         one-line secondary text (e.g. "1.2 MB · 2026-06-19")
- * @param {ReactNode} actions      row of action buttons (hidden in select mode)
- * @param {string}    downloadHref href for the overlay download button (omit to hide)
- * @param {boolean}   selectMode   selection mode on → checkbox replaces download, whole card toggles
- * @param {boolean}   selected     this card is selected (stronger border + checked box)
- * @param {Function}  onSelect     (event) => void — card click in select mode; gets shiftKey for range
- */
-export default function MediaCard({
-  thumb,
-  name,
-  meta,
-  actions,
-  downloadHref,
-  selectMode = false,
-  selected = false,
-  onSelect,
-}) {
-  return (
-    <li
-      onClick={selectMode ? onSelect : undefined}
-      className={`flex flex-col rounded overflow-hidden border bg-fg-02 ${selectMode ? 'cursor-pointer select-none' : ''}`}
-      style={{ borderColor: selected ? 'var(--kol-fg-64)' : 'var(--kol-fg-12)' }}
-    >
-      <div className="aspect-square relative">
-        {thumb}
-        {selectMode ? (
-          <span
-            className="kol-frame-control kol-frame-control--top-left rounded p-1"
-            style={{ background: 'var(--kol-fg-ab-12, rgba(0,0,0,0.4))', backdropFilter: 'blur(4px)' }}
-          >
-            <SelectIndicator on={selected} />
-          </span>
-        ) : downloadHref ? (
-          <a
-            href={downloadHref}
-            aria-label="Download"
-            title="Download"
-            className="kol-frame-control inline-flex items-center justify-center w-8 h-8 rounded text-emphasis hover:bg-fg-ab-24 transition-colors"
-            style={{ background: 'var(--kol-fg-ab-12, rgba(0,0,0,0.4))', backdropFilter: 'blur(4px)' }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            <Icon name="download" size={16} />
-          </a>
-        ) : null}
-      </div>
-      <div className="p-3 flex flex-col gap-2">
-        {name}
-        <p className="kol-mono-12 text-fg-48">{meta}</p>
-        {!selectMode && actions}
-      </div>
-    </li>
-  )
-}

package/src/molecules/MediaRow.jsx

@@ -1,55 +0,0 @@
-import { SelectIndicator } from './MediaCard.jsx'
-
-/**
- * @deprecated 2026-08-26 — absorbed by `ContentRow variant="default"` in @kolkrabbi/kol-component
- * (the Content Set, 2026-08-15). Step 1 of the retirement wave: this export
- * stays and renders unchanged until the next major, then it is removed.
- * Consumers: swap on your next bump. Map + row-by-row diff:
- * docs/documentation/03-components/06-content-card-system.md.
- *
- * MediaRow — list row for one media object: optional select checkbox, small
- * thumbnail, name (flex), fixed-width date + size columns, then actions.
- * The list-view counterpart to MediaCard (same slot contract).
- *
- * Presentational — the parent supplies rendered slots; interaction outside
- * select mode lives in the thumb / name / actions slots. Column widths are
- * consumer-tunable via `dateWidth` / `sizeWidth`.
- *
- * @param {ReactNode} thumb       small thumbnail (48px square)
- * @param {ReactNode} name        name cell (plain text or an inline editor)
- * @param {string}    date        right-aligned date column
- * @param {string}    size        right-aligned size column
- * @param {ReactNode} actions     row of action buttons (hidden in select mode)
- * @param {string}    dateWidth   Tailwind width class for the date column
- * @param {string}    sizeWidth   Tailwind width class for the size column
- * @param {boolean}   selectMode  selection mode on → checkbox shown, whole row toggles, actions hidden
- * @param {boolean}   selected    this row is selected (highlight + checked box)
- * @param {Function}  onSelect    (event) => void — row click in select mode; gets shiftKey for range
- */
-export default function MediaRow({
-  thumb,
-  name,
-  date,
-  size,
-  actions,
-  dateWidth = 'w-24',
-  sizeWidth = 'w-20',
-  selectMode = false,
-  selected = false,
-  onSelect,
-}) {
-  return (
-    <li
-      onClick={selectMode ? onSelect : undefined}
-      className={`flex items-center gap-3 py-2 border-b ${selectMode ? 'cursor-pointer select-none' : ''} ${selected ? 'bg-fg-08' : ''}`}
-      style={{ borderColor: 'var(--kol-fg-08)' }}
-    >
-      {selectMode && <SelectIndicator on={selected} />}
-      <div className="w-12 h-12 shrink-0 rounded overflow-hidden">{thumb}</div>
-      <div className="flex-1 min-w-0">{name}</div>
-      <p className={`kol-mono-12 text-fg-32 shrink-0 text-right ${dateWidth}`}>{date}</p>
-      <p className={`kol-mono-12 text-fg-48 shrink-0 text-right ${sizeWidth}`}>{size}</p>
-      {!selectMode && <div className="shrink-0">{actions}</div>}
-    </li>
-  )
-}