@kolkrabbi/kol-component 0.73.0 → 0.74.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.73.0",
+  "version": "0.74.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/ContentText.jsx

@@ -227,7 +227,11 @@ export default function ContentText({
     )
   }
 
-  const nodes = order.map(render)
+  /* NOT `order.map(render)`: map passes (entry, index, ARRAY) and the array
+   * landed in `trailing`, so every top-level stack right-aligned — the article
+   * card's title and body sat flush right under left-aligned tags for eleven
+   * days (found on the comparison page, 2026-08-26). */
+  const nodes = order.map((entry, i) => render(entry, i))
 
   return (
     <div

package/src/organisms/SectionHero.jsx

@@ -2,7 +2,9 @@ import { isValidElement } from 'react'
 import HlsVideo from '../atoms/HlsVideo.jsx'
 import Image from '../atoms/Image.jsx'
 import OverlayGlassPanel from '../utilities/OverlayGlassPanel.jsx'
-import SectionText from '../molecules/SectionText.jsx'
+import AssetPlaceholder from '../utilities/AssetPlaceholder.jsx'
+import ContentMedia from '../molecules/ContentMedia.jsx'
+import SectionText, { HEADLINE_ROLE } from '../molecules/SectionText.jsx'
 
 /** Height presets; anything else is passed through as a class string. */
 const HEIGHTS = {
@@ -66,7 +68,16 @@ function MediaLayer({ media }) {
  * the hero renders your node exactly as before — the escape hatch, and what
  * every existing call site does; nothing there moves.
  *
- * @param {ReactNode|{src, kind, poster, srcSet, alt}} media  background
+ * TWO VARIANTS (user ask 2026-08-26). `media` (default): the cover-fit hero
+ * above. `split`: the whole viewport in two halves — media fills one edge to
+ * edge (no media → AssetPlaceholder), the text sits centred in the other, no
+ * glass panel, headline UPPERCASE by role (`.kol-section-text-caps`). It is
+ * SectionSplit blown up to 100vh/100vw with no padding, no ratio, no cap.
+ * `align` picks the media side there ('left' default · 'right'); below `md`
+ * the halves stack, media first.
+ *
+ * @param {'media'|'split'} variant
+ * @param {ReactNode|{src, kind, poster, srcSet, alt}} media  background (media) / the half (split)
  * @param {number}    overlayOpacity 0–100 surface-primary scrim over the media (default 0)
  * @param {string}    height         'screen' | 'lg' | 'md' preset, or a height class string
  * @param {ReactNode} label · headline · body · actions  the composed text (SectionText)
@@ -74,10 +85,14 @@ function MediaLayer({ media }) {
  * @param {string}    [panelMaxWidth='max-w-[440px]']  the glass panel's cap on the composed route
  * @param {ReactNode} panel          a caller-authored content node; wins over the text props and children
  * @param {ReactNode} children       fallback content slot
- * @param {string}    align          'center' | 'start' | 'end' — horizontal placement of the content
+ * @param {string}    align          media: 'center' | 'start' | 'end' — placement of the content ·
+ *                                   split: 'left' | 'right' — the media side
+ * @param {boolean}   fullBleed      span the full viewport width (100vw breakout) — split
  * @param {string}    className      extra classes on the section
  */
 export default function SectionHero({
+  variant = 'media',
+  fullBleed = false,
   media,
   overlayOpacity = 0,
   height = 'lg',
@@ -92,6 +107,37 @@ export default function SectionHero({
   align = 'center',
   className = '',
 }) {
+  if (variant === 'split') {
+    const mediaFirst = align !== 'right'
+    const bleed = fullBleed ? 'w-screen ml-[calc(50%-50vw)]' : 'w-full'
+    const mediaNode = media == null
+      ? <AssetPlaceholder radius={false} className="h-full w-full" />
+      : isValidElement(media) || typeof media !== 'object'
+        ? <ContentMedia ratio={null} radius={false} fit="cover" className="h-full">{media}</ContentMedia>
+        : <MediaLayer media={media} />
+    return (
+      <section className={`kol-section-hero-split grid min-h-screen grid-cols-1 md:grid-cols-2 ${bleed} ${className}`.replace(/\s+/g, ' ').trim()}>
+        <div className={`relative min-h-[50vh] overflow-hidden md:min-h-0 ${mediaFirst ? '' : 'md:order-2'}`.trim()}>{mediaNode}</div>
+        <div className={`flex items-center justify-center p-10 ${mediaFirst ? '' : 'md:order-1'}`.trim()}>
+          <SectionText
+            label={label}
+            headline={headline}
+            headlineSize={headlineSize === 'display-04' ? 'heading-02' : headlineSize}
+            headlineClass={`${HEADLINE_ROLE[headlineSize === 'display-04' ? 'heading-02' : headlineSize] ?? HEADLINE_ROLE['heading-02']} kol-section-text-caps`}
+            body={body}
+            actions={actions}
+            align="center"
+            gap="gap-6"
+            labelClass="kol-helper-12 text-meta"
+            bodyClass="kol-sans-body-02 text-body"
+            actionsClass="flex flex-wrap gap-4 justify-center"
+            className="max-w-[var(--kol-content-column)]"
+          />
+        </div>
+      </section>
+    )
+  }
+
   const heightCls = HEIGHTS[height] || height
   const alignCls =
     align === 'start' ? 'justify-start'