@kolkrabbi/kol-component 0.90.2 → 0.91.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.90.2",
+  "version": "0.91.1",
   "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/molecules/ContentCard.jsx

@@ -91,6 +91,8 @@ const MEDIA = {
 
 export default function ContentCard({
   variant = 'default',
+  hero = false,
+  label,
   pad,
   media,
   ratio,
@@ -110,10 +112,31 @@ export default function ContentCard({
   ...text
 }) {
   const box = BOX[variant] ?? BOX.default
+  /* 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
+   * right — the media on the zoom's hero rung (1.02), the text on
+   * ContentText's `hero` form (display-03 title). article only; the row form
+   * has no hero. */
+  const isHero = hero && variant === 'article'
+  const { meta: heroMeta, ...textSlots } = text
+  if (!isHero) Object.assign(textSlots, { meta: text.meta })
+  if (isHero) delete textSlots.tags
+  const metaChips = isHero && heroMeta != null ? (Array.isArray(heroMeta) ? heroMeta : [heroMeta]) : null
+  const heroHeader = isHero && (label != null || metaChips?.length) ? (
+    <div className="kol-card-hero-header flex items-center justify-between" style={{ marginBottom: 'var(--kol-spacing-4)' }}>
+      {label != null && <div className="kol-helper-14 text-meta">{label}</div>}
+      {metaChips?.length > 0 && (
+        <div className="flex gap-3 kol-helper-12 text-meta">
+          {metaChips.map((item, i) => <span key={i}>{item}</span>)}
+        </div>
+      )}
+    </div>
+  ) : null
   const r = ratio ?? RATIOS[variant]
   const padding = pad ? `var(--kol-pad-card-${pad})` : box.pad
   /* image-only cards (print) pass no text slots — the empty plate must not render */
-  const hasText = ['title', 'body', 'kicker', 'detail', 'date', 'size', 'meta', 'tags'].some((k) => text[k] != null)
+  const hasText = ['title', 'body', 'kicker', 'detail', 'date', 'size', 'meta', 'tags'].some((k) => textSlots[k] != null)
   /* `actions` sit IN THE TEXT PLATE, bottom-right (user ruling 2026-08-15:
    * *"space in text bottom right"*). Not stacked under the copy in their own
    * row — that grew the card — and not on the media, which was my call to make
@@ -138,7 +161,7 @@ export default function ContentCard({
         zIndex: box.layout === 'canvas' ? 1 : undefined,
       }}
     >
-      {hasText && <ContentText variant={variant} form="card" {...text} />}
+      {hasText && <ContentText variant={variant} form={isHero ? 'hero' : 'card'} {...textSlots} />}
       {/* ABSOLUTE, not a flex sibling: the plate's height moves with the title
         * and the meta, so a laid-out stack would stretch or drift with it. The
         * inset reads the SAME pad token the plate uses, so the icons sit the
@@ -166,7 +189,7 @@ export default function ContentCard({
     frame: frame ?? MEDIA[variant]?.frame ?? false,
     ring: ring ?? MEDIA[variant]?.ring ?? false,
     borderHover: MEDIA[variant]?.borderHover ?? false,
-    zoom: zoom ?? MEDIA[variant]?.zoom ?? false,
+    zoom: zoom ?? (isHero ? 'hero' : MEDIA[variant]?.zoom ?? false),
   }
 
   /* `control` — the in-frame control slot (user ruling 2026-08-15). One node,
@@ -181,6 +204,7 @@ export default function ContentCard({
   const body =
     box.layout === 'stack' ? (
       <>
+        {heroHeader}
         <div className="relative">
           <ContentMedia ratio={r} {...mediaProps}>{media}</ContentMedia>
           {controlNode}
@@ -241,6 +265,7 @@ export default function ContentCard({
   const hoverBg = HOVER[variant]
 
   const common = {
+    'data-tags': isHero && Array.isArray(text.tags) && text.tags.length ? text.tags.join(' ') : undefined,
     className: `kol-card group flex ${expanded ? 'flex-row-reverse' : 'flex-col'} ${box.layout === 'drawer' ? 'relative overflow-hidden rounded-[var(--kol-radius-sm)]' : ''} ${framed ? 'overflow-hidden rounded-[var(--kol-radius-sm)]' : ''} ${box.border ? 'border' : ''} ${box.layout === 'canvas' ? 'relative' : ''} ${interactive ? 'cursor-pointer select-none' : ''} ${hoverBg && interactive ? 'kol-content-hover' : ''} ${className}`.trim(),
     style: {
       /* same reason as ContentRow: rest colours are PROPERTIES, because an

package/src/molecules/ContentText.jsx

@@ -20,6 +20,7 @@
  * @param {ReactNode} kicker     article only
  * @param {ReactNode} detail     catalog · print
  * @param {ReactNode} date       default · article · typeface
+ * @param {'card'|'row'|'hero'} form  the block's form; `hero` is article's featured text (ContentCard `hero`)
  * @param {ReactNode} size       default · article (file size / read length)
  * @param {ReactNode} meta       work only
  * @param {number}    gap        inner line gap in px (defaults per variant/form)
@@ -64,6 +65,12 @@ const RAMP = {
     /* kol-content-title-dim: the title dims to 70% on card hover (StackCardHover, 2026-08-27 — ListingCard's move, kol-theme) */
     card: { kicker: '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' },
     row:  { kicker: 'kol-mono-12 text-meta', title: 'kol-sans-heading-04 text-emphasis kol-content-title-dim', body: 'kol-mono-12 text-body', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-meta', tags: 'flex flex-wrap gap-2' },
+    /* HERO — the featured card riding a page's fold (ContentCard `hero`,
+     * 2026-08-27): ListingCard size="hero"'s text, read off Stack — kicker in
+     * the helper-16 voice, title on display-03 (Stack's ruled hero title),
+     * body mono-14. One emphasis (the title), everything else meta/body. */
+    /* UPPERCASE title, clamped 2, body clamped 2 — the shipped Stack hero, carried through (user 2026-08-27: "UPPERCASE THE FUCKING TITLE") */
+    hero: { kicker: 'kol-helper-16 text-meta', title: 'kol-sans-display-03 text-emphasis uppercase line-clamp-2 kol-content-title-dim', body: 'kol-mono-14 text-body line-clamp-2', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-meta', tags: 'flex flex-wrap gap-2' },
   },
   work: {
     /* INVERSE ink — the card's plate is the drawer, `surface-inverse`. Leaving
@@ -111,6 +118,8 @@ const ORDER = {
    * form's own outer gap. A flat column gave every line the same gap, which
    * read as unrelated lines rather than a heading with its standfirst. */
   article:  { card: ['tags', 'kicker', ['stack', 'title', 'body'], ['group', 'date', 'size']], row: ['kicker', ['stack', 'title', 'body'], ['group', 'date', 'size']] },
+  /* the hero carries its tags as data (ListingCard hero: `data-tags` only) and its meta in the header row above the media — neither is a text line here */
+  articleHero: ['kicker', ['stack', 'title', 'body'], ['group', 'date', 'size']],
   /* work CARD = the drawer's two lines: title, then one meta line.
    *
    * work ROW = WorkListItem, read off the live /work listing: a LEFT column of
@@ -155,7 +164,7 @@ const GAPS = {
   default: { 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)' },
+  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)' },
 }
@@ -169,7 +178,7 @@ export default function ContentText({
   className = '',
 }) {
   const ramp = RAMP[variant]?.[form] ?? RAMP.default[form] ?? RAMP.default.card
-  const order = ORDER[variant]?.[form] ?? ORDER.default.card
+  const order = (form === 'hero' && ORDER[`${variant}Hero`]) || ORDER[variant]?.[form] || ORDER.default.card
   const values = { title, body, kicker, detail, date, size, meta, tags }
   const overrides = { title: titleClass, body: bodyClass, kicker: kickerClass, detail: detailClass, date: dateClass, size: sizeClass, meta: metaClass, tags: tagsClass }
 

package/src/organisms/ContentFilters.jsx

@@ -22,6 +22,9 @@ import IconFrame from '../atoms/IconFrame.jsx'
  * @param {Function} props.renderItem — (filteredItems, viewMode, layout) => ReactNode
  * @param {Array} props.viewModeOptions — optional view mode options for the view strip
  * @param {string} props.defaultViewMode — default view mode (falls back to the FIRST option)
+ * @param {string} props.layout — controlled LIST/GRID value (kol-r2b2 2026-08-27: a consumer that persists
+ *   layout per bucket needs the strip's value back; `defaultLayout` alone kept it internal)
+ * @param {Function} props.onLayoutChange — (layout) => void, fires on every strip click
  * @param {Function} props.onFilterChange — optional callback when filters change
  * @param {Array} props.mutuallyExclusiveFilters — filter keys that should be mutually exclusive
  * @param {Array} props.customFilterKeys — filter keys handled by renderItem, not by ContentFilters
@@ -60,6 +63,8 @@ const ContentFilters = ({
   defaultViewMode,
   layoutOptions,
   defaultLayout,
+  layout: layoutProp,
+  onLayoutChange,
   /* WHERE the LIST/GRID strip sits — the two arrangements kol-monitor and
    * kol-website each settled on, made interchangeable (user ruling 2026-08-15).
    *
@@ -115,7 +120,13 @@ const ContentFilters = ({
   const [isExpanded, setIsExpanded] = useState(false)
   const [internalViewMode, setInternalViewMode] = useState(defaultViewMode ?? viewModeOptions?.[0]?.value)
   const viewMode = viewModeProp !== undefined ? viewModeProp : internalViewMode
-  const [layout, setLayout] = useState(defaultLayout ?? layoutOptions?.[0]?.value ?? 'grid')
+  /* Controlled when `layout` is passed, internal otherwise — the same pair viewMode uses. */
+  const [internalLayout, setInternalLayout] = useState(defaultLayout ?? layoutOptions?.[0]?.value ?? 'grid')
+  const layout = layoutProp !== undefined ? layoutProp : internalLayout
+  const setLayout = (next) => {
+    setInternalLayout(next)
+    onLayoutChange?.(next)
+  }
   const [searchOpen, setSearchOpen] = useState(false)
   const [searchText, setSearchText] = useState('')