@kolkrabbi/kol-component 0.148.0 → 0.149.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.148.0",
+  "version": "0.149.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/hooks/useInViewAttention.js

@@ -0,0 +1,54 @@
+import { useEffect, useRef, useState } from 'react'
+
+/**
+ * useInViewAttention — which card has the reader's attention when there is no
+ * hover to give it. Returns `[ref, active]`; put the ref on the card's root.
+ *
+ * ── WHY THIS IS A SHARED HOOK (CardSetInViewAttention, kol-website 2026-08-31)
+ * Every card in the set expresses attention as `:hover`, and a touch device
+ * cannot hold hover — the cards are anchors, so a tap navigates rather than
+ * dwelling. On a phone the whole hover vocabulary is dead: zooms never fire,
+ * borders never step, media never scales.
+ *
+ * `TiltBento` solved that for ONE component in 0.145.0 with its own observer.
+ * The second component to need it could not have it, so kol-website ended up
+ * carrying `useMobileActiveCard.js` — the same observer, the same root margin —
+ * to put `.is-viewing` on `.kol-card-feature`. A DS behaviour living in a
+ * consumer, and the third consumer would have written it again. Two components
+ * solving one thing two ways in one evening is the cost, not the behaviour.
+ *
+ * ── THE MECHANISM
+ * An IntersectionObserver whose root is squeezed to the viewport's middle band
+ * intersects only the element crossing the centre line. At most one full-width
+ * card in a column is ever active — the same "one at a time" hover gives a
+ * mouse — with NO cross-card coordination and no shared store: each card
+ * answers for itself. A "most-visible card wins" rule would need the cards to
+ * know about each other, which none of them has a way to arrange.
+ *
+ * `-45%` top and bottom is TiltBento's measured value, carried unchanged rather
+ * than re-derived. A wall of small tiles wants none of this — that is what the
+ * `enabled` flag is for, and every consuming component exposes it as an escape.
+ *
+ * @param {boolean} enabled  usually `coarse && mode !== 'static'`
+ * @param {string}  band     root margin; the default is the ruled centre band
+ * @returns {[React.RefObject, boolean]}
+ */
+export default function useInViewAttention(enabled, band = '-45% 0px -45% 0px') {
+  const ref = useRef(null)
+  const [active, setActive] = useState(false)
+
+  useEffect(() => {
+    const el = ref.current
+    if (!enabled || !el || typeof IntersectionObserver === 'undefined') return undefined
+    const io = new IntersectionObserver(([entry]) => setActive(entry.isIntersecting), {
+      rootMargin: band,
+      threshold: 0,
+    })
+    io.observe(el)
+    return () => io.disconnect()
+  }, [enabled, band])
+
+  /* never leaks a stale `true` when the flag goes off (a pointer change, or a
+   * consumer switching the escape on) */
+  return [ref, enabled && active]
+}

package/src/index.js

@@ -182,6 +182,7 @@ export { default as useScrollSpy } from './hooks/useScrollSpy.js'
 export { default as useTilt } from './hooks/useTilt.js'
 export { default as usePlayback } from './hooks/usePlayback.js'
 export { default as useCoarsePointer } from './hooks/useCoarsePointer.js'
+export { default as useInViewAttention } from './hooks/useInViewAttention.js'
 export { default as useAxisAnimation } from './hooks/useAxisAnimation.js'
 export { useEyedropper, pickFromCanvasElement } from './hooks/useEyedropper.js'
 export { default as usePlaceholders } from './hooks/usePlaceholders.js'

package/src/molecules/SectionCardItem.jsx

@@ -1,4 +1,6 @@
 import { Icon } from '@kolkrabbi/kol-icons'
+import useCoarsePointer from '../hooks/useCoarsePointer.js'
+import useInViewAttention from '../hooks/useInViewAttention.js'
 
 /* taxonomy-ok: nests only kol-icons's Icon (a package import the
  * relative-import check can't see). */
@@ -32,6 +34,13 @@ import { Icon } from '@kolkrabbi/kol-icons'
  * @param {string}    href             link target; `http*`/`mailto` → new tab, else plain same-tab anchor
  * @param {Function}  onNavigate       (event) => void — click seam on the same-tab anchor (SPA intercept)
  * @param {'auto'|'9/6'|'10/6'|'16/9'|'1/1'} imageAspectRatio  aspect class on the visual middle
+ * @param {'in-view'|'static'} [coarseReveal='in-view']  what counts as attention on a device with no
+ *   hover (CardSetInViewAttention, kol-website 2026-08-31). A touch device cannot hold hover and the
+ *   card is an anchor, so a tap navigates — the whole hover vocabulary was dead on a phone and the
+ *   zoom never fired at all. `in-view` stamps `data-attention` on the card crossing the viewport's
+ *   centre band, which the theme's hover rules ALSO key on, so hover and in-view resolve to ONE
+ *   treatment rather than two parallel sets that drift. `static` opts out — a wall of small tiles
+ *   does not want a tile lighting up as it passes the centre. Fine pointers never change.
  * @param {number}    zoom  hover zoom scale for THIS card's visual (default 1.03, the shipped value).
  *   Per-feature because the right amount belongs to the artwork, not the component: 3% is correct on
  *   a dense photographic visual and invisible on sparse line-art, and one set can hold both
@@ -48,10 +57,14 @@ export default function SectionCardItem({
   onNavigate,
   imageAspectRatio = 'auto',
   zoom,
+  coarseReveal = 'in-view',
   imagePosition = 'center',
   className = '',
   style,
 }) {
+  const coarse = useCoarsePointer()
+  const [viewRef, attention] = useInViewAttention(coarse && coarseReveal === 'in-view')
+
   const isSvgUrl = typeof visual === 'string' && visual.endsWith('.svg')
   /* TEXT-ONLY (FoundrySpecimenSections, 2026-08-27): no `visual` = a title +
    * description tile — the frame and hover of kol-website's .feature-card, no
@@ -150,6 +163,8 @@ export default function SectionCardItem({
     if (isExternal) {
       return (
         <a
+          ref={viewRef}
+          data-attention={attention || undefined}
           href={href}
           className={`${baseClasses} hover:border-fg-32 transition-colors duration-300`}
           style={rootStyle}
@@ -163,6 +178,8 @@ export default function SectionCardItem({
 
     return (
       <a
+        ref={viewRef}
+        data-attention={attention || undefined}
         href={href}
         onClick={onNavigate}
         className={`${baseClasses} hover:border-fg-24 transition-colors duration-300`}
@@ -173,5 +190,5 @@ export default function SectionCardItem({
     )
   }
 
-  return <div className={baseClasses} style={rootStyle}>{content}</div>
+  return <div ref={viewRef} data-attention={attention || undefined} className={baseClasses} style={rootStyle}>{content}</div>
 }

package/src/molecules/TiltBento.jsx

@@ -1,4 +1,5 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useState } from 'react'
+import useInViewAttention from '../hooks/useInViewAttention.js'
 import { motion } from 'framer-motion'
 import HlsVideo from '../atoms/HlsVideo.jsx'
 import AssetPlaceholder from '../utilities/AssetPlaceholder.jsx'
@@ -31,36 +32,8 @@ function useCoarsePointer() {
   return coarse
 }
 
-/* WHICH CARD HAS ATTENTION WHEN THERE IS NO HOVER (TiltBentoCoarseRevealInView,
- * kol-website 2026-08-31). Coarse devices used to render every card fully open —
- * title, subtitle, description and CTA stacked over the artwork at once — which
- * on a column of full-width cards means the text permanently competes with the
- * image it sits on, on the device where the image is largest relative to it.
- *
- * An IntersectionObserver whose root is squeezed to the viewport's middle band
- * (-45% top and bottom) intersects ONLY the element crossing the centre line, so
- * at most one full-width card in a column is ever active. That is the same "one
- * open at a time" a mouse gets from hover, with no cross-card coordination and
- * no shared store — each card answers for itself.
- *
- * The component's vocabulary does not change: the title is always visible, the
- * scrim and the rest reveal on attention. Only the definition of attention
- * differs per input type. */
-function useInViewCentre(enabled) {
-  const ref = useRef(null)
-  const [inView, setInView] = useState(false)
-  useEffect(() => {
-    const el = ref.current
-    if (!enabled || !el || typeof IntersectionObserver === 'undefined') return
-    const io = new IntersectionObserver(([entry]) => setInView(entry.isIntersecting), {
-      rootMargin: '-45% 0px -45% 0px',
-      threshold: 0,
-    })
-    io.observe(el)
-    return () => io.disconnect()
-  }, [enabled])
-  return [ref, enabled && inView]
-}
+/* the shared card-set behaviour (CardSetInViewAttention, 2026-08-31) — this
+ * component's observer was the precedent and is now the hook itself. */
 
 /**
  * Media — internal, NOT exported. Sniffs `src` by extension and renders the
@@ -164,7 +137,7 @@ export default function TiltBento({
   const reduced = usePrefersReducedMotion()
   const coarse = useCoarsePointer()
   const tilt = useTilt()
-  const [viewRef, centred] = useInViewCentre(coarse && coarseReveal === 'in-view')
+  const [viewRef, centred] = useInViewAttention(coarse && coarseReveal === 'in-view')
   /* On a coarse pointer the card is "open" when it holds the centre; under
    * `static` it is always open, which is what shipped before. */
   const coarseOpen = coarseReveal === 'static' || centred

package/src/organisms/ContentCollection.jsx

@@ -40,7 +40,9 @@ import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
  * a class built at runtime is never emitted.
  *
  * @param {string}  form     'grid' | 'list'
- * @param {string}  min      grid track minimum, card form (default 320px) — the FLUID wall's floor
+ * @param {string}  min      grid track minimum, card form (default 320px) — the FLUID wall's floor.
+ *                           Emitted as `min(<value>, 100%)`, so it can never demand a column wider
+ *                           than its container (ContentGridMinColumnWidth, 2026-08-31)
  * @param {string}  minCol   the floor a `cols` track may not go under. DEFAULTS TO `min` (320px), so
  *                           the count path and the fluid path share one ruled minimum and raising
  *                           `min` raises both (ContentCollectionMinColumnWidth, kol-chess
@@ -144,8 +146,16 @@ export default function ContentCollection({
             /* minmax(0, 1fr), never a bare 1fr (= minmax(auto, 1fr)): a truncated
            * nowrap line handed its min-content width to the track and a /work row
            * measured 3586px in a 1232px wall (CollectionItemMinWidth, 2026-08-27) */
-          ? (listMin ? `repeat(auto-fill, minmax(${listMin}, 1fr))` : 'minmax(0, 1fr)')
-            : `repeat(auto-fill, minmax(${min}, 1fr))`,
+          /* `min(<fixed>, 100%)`, never a bare fixed track (ContentGridMinColumnWidth,
+             * kol-website 2026-08-31). `minmax(352px, 1fr)` DEMANDS 352 whatever the
+             * container is, so in a 302px column the track wins and the nearest
+             * overflow-x ancestor starts scrolling sideways — `main` scrolled 342 to
+             * 372 on /workshop while the page itself never overflowed, which is why it
+             * was reported as a broken gutter. Identical above the breakpoint,
+             * collapses to the container below it. A content grid may never demand a
+             * column wider than what it is in. */
+          ? (listMin ? `repeat(auto-fill, minmax(min(${listMin}, 100%), 1fr))` : 'minmax(0, 1fr)')
+            : `repeat(auto-fill, minmax(min(${min}, 100%), 1fr))`,
         gap: g,
       }}
     >

package/src/organisms/SectionCards.jsx

@@ -1,4 +1,5 @@
 import SectionCardItem from '../molecules/SectionCardItem.jsx'
+import { FULL_BLEED } from './sectionBleed.js'
 import { surfaceClass } from './sectionSurface.js'
 import SectionText, { HEADLINE_ROLE } from '../molecules/SectionText.jsx'
 import useSectionTheme from '../hooks/useSectionTheme.js'
@@ -32,11 +33,19 @@ import { minHeightClass } from './sectionHeights.js'
  * @param {string}    itemClassName         extra classes on every card (reveal seam)
  * @param {object|Function} itemStyle       inline style per card, or `(index) => style`
  * @param {object}    slotClass · slotStyle  per-slot class / style on the header text
+ * @param {boolean}  [fullBleed=false]  the FILL breaks the page gutter while the content keeps it —
+ *   the family's shared breakout (`sectionBleed.js`, SectionFamilyFullBleed, kol-website 2026-08-31).
+ *   Any member of this family can be a filled surface, and a filled surface inside `.kol-page` has its
+ *   colour clipped by the gutter on mobile. Viewport-relative, so unlike `.kol-full-bleed` it does not
+ *   over-bleed in a parent with no gutter of its own. The section's horizontal padding re-insets the
+ *   CONTENT, so only the fill moves. Default false — nothing renders differently until it is passed.
  * @param {string}    sectionClassName · wrapperClassName · cardsWrapperClassName · actionsClassName · headerClassName · headerTextWidthClass  layout seams
  * @param {'primary'|'secondary'|'tertiary'|'inverse'|'auto'|'none'|string} background  the section's surface
  *   (SectionBackgroundProp, 2026-08-27) — a named surface, `none`, or a raw utility / token string; default = what it painted before
  */
 export default function SectionCards({
+  fullBleed = false,
+  coarseReveal = 'in-view',
   theme,
   background,
   height = '60',
@@ -67,7 +76,7 @@ export default function SectionCards({
   const eb = eyebrow ?? label
   const [themeRef, themeStamp] = useSectionTheme(theme)
   return (
-    <section ref={themeRef} data-theme={themeStamp} className={`w-full flex flex-col justify-center ${minHeightClass(height)} ${surfaceClass(background, theme ? 'primary' : 'none')} ${sectionClassName}`.replace(/\s+/g, ' ').trim()}>
+    <section ref={themeRef} data-theme={themeStamp} className={`${fullBleed ? FULL_BLEED : 'w-full'} flex flex-col justify-center ${minHeightClass(height)} ${surfaceClass(background, theme ? 'primary' : 'none')} ${sectionClassName}`.replace(/\s+/g, ' ').trim()}>
       <div className={wrapperClassName}>
         {(eb || headline || body) && (
           <SectionText
@@ -101,6 +110,7 @@ export default function SectionCards({
                 backgroundColor={feature.backgroundColor}
                 imageAspectRatio={feature.imageAspectRatio}
                 zoom={feature.zoom}
+                coarseReveal={coarseReveal}
                 onNavigate={onNavigate ? (event) => onNavigate(event, feature) : undefined}
                 className={itemClassName}
                 style={typeof itemStyle === 'function' ? itemStyle(index) : itemStyle}

package/src/organisms/SectionCta.jsx

@@ -1,4 +1,5 @@
 import Button from '../atoms/Button.jsx'
+import { FULL_BLEED } from './sectionBleed.js'
 import { surfaceClass } from './sectionSurface.js'
 import SectionText from '../molecules/SectionText.jsx'
 import { minHeightClass } from './sectionHeights.js'
@@ -26,11 +27,18 @@ import { minHeightClass } from './sectionHeights.js'
  * @param {ReactNode} contactLabel  contact-row label
  * @param {string}    email         contact-row value + `mailto:` target; omit to drop the row
  * @param {{label: ReactNode, value: ReactNode, href?: string}[]} secondaryRows  extra rows between prompt and contact
+ * @param {boolean}  [fullBleed=false]  the FILL breaks the page gutter while the content keeps it —
+ *   the family's shared breakout (`sectionBleed.js`, SectionFamilyFullBleed, kol-website 2026-08-31).
+ *   Any member of this family can be a filled surface, and a filled surface inside `.kol-page` has its
+ *   colour clipped by the gutter on mobile. Viewport-relative, so unlike `.kol-full-bleed` it does not
+ *   over-bleed in a parent with no gutter of its own. The section's horizontal padding re-insets the
+ *   CONTENT, so only the fill moves. Default false — nothing renders differently until it is passed.
  * @param {string}    className     extra classes on the section
  * @param {'primary'|'secondary'|'tertiary'|'inverse'|'auto'|'none'|string} background  the section's surface
  *   (SectionBackgroundProp, 2026-08-27) — a named surface, `none`, or a raw utility / token string; default = what it painted before
  */
 export default function SectionCta({
+  fullBleed = false,
   variant = 'editorial',
   background,
   height = '60',
@@ -60,7 +68,7 @@ export default function SectionCta({
   }
   if (variant === 'centered') {
     return (
-      <section className={`w-full flex flex-col justify-center py-24 ${surfaceClass(background, 'auto')} ${minHeightClass(height)} ${className}`.replace(/\s+/g, ' ').trim()}>
+      <section className={`${fullBleed ? FULL_BLEED : 'w-full'} flex flex-col justify-center py-24 ${surfaceClass(background, 'auto')} ${minHeightClass(height)} ${className}`.replace(/\s+/g, ' ').trim()}>
         <div className="w-full max-w-[var(--kol-container-max,var(--kol-content-shell,1800px))] mx-auto">
           <div className="w-32 h-px bg-fg-24 mx-auto mb-8" />
           <SectionText
@@ -87,7 +95,7 @@ export default function SectionCta({
     ...(email ? [{ label: contactLabel, value: email, href: `mailto:${email}` }] : []),
   ]
   return (
-    <section className={`w-full ${surfaceClass(background, 'auto')} flex flex-col justify-center ${minHeightClass(height)} ${className}`.replace(/\s+/g, ' ').trim()}>
+    <section className={`${fullBleed ? FULL_BLEED : 'w-full'} ${surfaceClass(background, 'auto')} flex flex-col justify-center ${minHeightClass(height)} ${className}`.replace(/\s+/g, ' ').trim()}>
       {/* the family's ONE cap — the shell's --kol-container-max ladder (user
         * ruling 2026-08-26; the 1600 SectionCtaEditorial asked for was a third
         * number beside split's 1200 and cards' 1400) — the surface stays full

package/src/organisms/SectionFaq.jsx

@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { FULL_BLEED } from './sectionBleed.js'
 import { surfaceClass } from './sectionSurface.js'
 import { Accordion, AccordionPanel } from '../molecules/Accordion.jsx'
 import SectionText from '../molecules/SectionText.jsx'
@@ -17,11 +18,18 @@ import { minHeightClass } from './sectionHeights.js'
  * @param {{ q: ReactNode, a: ReactNode, meta?: ReactNode }[]} items
  * @param {boolean}   [singleOpen=false]  opening one panel closes the others
  * @param {number}    [defaultOpen]       index open on mount (singleOpen) — omit for all closed
+ * @param {boolean}  [fullBleed=false]  the FILL breaks the page gutter while the content keeps it —
+ *   the family's shared breakout (`sectionBleed.js`, SectionFamilyFullBleed, kol-website 2026-08-31).
+ *   Any member of this family can be a filled surface, and a filled surface inside `.kol-page` has its
+ *   colour clipped by the gutter on mobile. Viewport-relative, so unlike `.kol-full-bleed` it does not
+ *   over-bleed in a parent with no gutter of its own. The section's horizontal padding re-insets the
+ *   CONTENT, so only the fill moves. Default false — nothing renders differently until it is passed.
  * @param {string}    className · innerClassName  layout seams
  * @param {'primary'|'secondary'|'tertiary'|'inverse'|'auto'|'none'|string} background  the section's surface
  *   (SectionBackgroundProp, 2026-08-27) — a named surface, `none`, or a raw utility / token string; default = what it painted before
  */
 export default function SectionFaq({
+  fullBleed = false,
   eyebrow,
   label,
   headline,
@@ -44,7 +52,7 @@ export default function SectionFaq({
   const eb = eyebrow ?? label
   const [open, setOpen] = useState(defaultOpen ?? null)
   return (
-    <section className={`kol-section-faq w-full flex flex-col justify-center px-5 py-16 md:px-8 md:py-24 lg:px-14 ${minHeightClass(height)} ${surfaceClass(background, 'none')} ${className}`.replace(/\s+/g, ' ').trim()}>
+    <section className={`kol-section-faq ${fullBleed ? FULL_BLEED : 'w-full'} flex flex-col justify-center px-5 py-16 md:px-8 md:py-24 lg:px-14 ${minHeightClass(height)} ${surfaceClass(background, 'none')} ${className}`.replace(/\s+/g, ' ').trim()}>
       <div className="w-full max-w-[var(--kol-container-max,var(--kol-content-shell,1800px))] mx-auto">
       <div className={innerClassName}>
         {(eb || headline || body || actions) && (

package/src/organisms/SectionHero.jsx

@@ -1,4 +1,5 @@
 import { isValidElement } from 'react'
+import { FULL_BLEED, bleedClass } from './sectionBleed.js'
 import { surfaceClass } from './sectionSurface.js'
 import HlsVideo from '../atoms/HlsVideo.jsx'
 import Image from '../atoms/Image.jsx'
@@ -197,7 +198,7 @@ export default function SectionHero({
 
   if (variant === 'split') {
     const mediaFirst = align !== 'right'
-    const bleed = fullBleed ? 'w-screen ml-[calc(50%-50vw)]' : 'w-full'
+    const bleed = bleedClass(fullBleed)
     const mediaNode = media == null
       ? <AssetPlaceholder radius={false} className="h-full w-full" />
       : isValidElement(media) || typeof media !== 'object'
@@ -264,7 +265,7 @@ export default function SectionHero({
             autoPlayInterval={autoPlayInterval}
             navPosition={navPosition}
             {...Object.fromEntries(Object.entries({ renderTitle, ctaLabel, onNavigate, showTitle, showDescription, showCta, titleClassName, descriptionClassName, options }).filter(([, v]) => v !== undefined))}
-            className={`kol-section-hero-carousel ${fullBleed ? 'w-screen ml-[calc(50%-50vw)]' : ''} ${className}`.replace(/\s+/g, ' ').trim()}
+            className={`kol-section-hero-carousel ${fullBleed ? FULL_BLEED : ''} ${className}`.replace(/\s+/g, ' ').trim()}
           >
             {children}
           </FeaturedCarousel>
@@ -280,7 +281,7 @@ export default function SectionHero({
         autoPlayInterval={autoPlayInterval}
         navPosition={navPosition}
         {...Object.fromEntries(Object.entries({ renderTitle, ctaLabel, onNavigate, showTitle, showDescription, showCta, titleClassName, descriptionClassName, options }).filter(([, v]) => v !== undefined))}
-        className={`kol-section-hero-carousel ${fullBleed ? 'w-screen ml-[calc(50%-50vw)]' : ''} ${className}`.replace(/\s+/g, ' ').trim()}
+        className={`kol-section-hero-carousel ${fullBleed ? FULL_BLEED : ''} ${className}`.replace(/\s+/g, ' ').trim()}
       >
         {children}
       </FeaturedCarousel>
@@ -340,7 +341,7 @@ export default function SectionHero({
   const footVar = foot ? { '--kol-section-foot-overlap': `${overlap}px` } : undefined
 
   return withFoot(
-    <section ref={themeRef} data-theme={themeStamp} className={`kol-full-bleed-hero relative isolate w-full overflow-hidden ${themed} ${heightCls} ${fullBleed ? 'w-screen ml-[calc(50%-50vw)]' : ''} ${className}`.replace(/\s+/g, ' ').trim()} style={footVar}>
+    <section ref={themeRef} data-theme={themeStamp} className={`kol-full-bleed-hero relative isolate w-full overflow-hidden ${themed} ${heightCls} ${fullBleed ? FULL_BLEED : ''} ${className}`.replace(/\s+/g, ' ').trim()} style={footVar}>
       <MediaLayer media={media} />
       {overlayOpacity > 0 && (
         <div

package/src/organisms/SectionNewsletter.jsx

@@ -1,4 +1,5 @@
 import { useId, useState } from 'react'
+import { bleedClass } from './sectionBleed.js'
 import { surfaceClass } from './sectionSurface.js'
 import Input from '../atoms/Input.jsx'
 import Button from '../atoms/Button.jsx'
@@ -126,7 +127,7 @@ export default function SectionNewsletter({
         * boundary and read as breaking out of it. `px-5` is a floor the band owns.
         * Desktop does not move — the measure caps below the padded width, so the
         * inner block still centres at 80px from the band edge. */
-        className={`kol-section-newsletter ${fullBleed ? 'w-screen ml-[calc(50%-50vw)]' : 'w-full'} flex flex-col justify-center px-5 sm:px-8 py-24 ${surfaceClass(background, theme ? 'primary' : 'none')} ${theme ? 'text-auto' : ''} ${minHeightClass(height)} ${className}`.replace(/\s+/g, ' ').trim()}
+        className={`kol-section-newsletter ${bleedClass(fullBleed)} flex flex-col justify-center px-5 sm:px-8 py-24 ${surfaceClass(background, theme ? 'primary' : 'none')} ${theme ? 'text-auto' : ''} ${minHeightClass(height)} ${className}`.replace(/\s+/g, ' ').trim()}
     >
       {/* the family's ONE cap — the shell's --kol-container-max ladder — and
         * inside it the lede's MEASURE on a wrapper (SectionNewsletterForm,

package/src/organisms/SectionSplit.jsx

@@ -1,4 +1,5 @@
 import SectionText from '../molecules/SectionText.jsx'
+import { FULL_BLEED } from './sectionBleed.js'
 import { surfaceClass } from './sectionSurface.js'
 import useSectionTheme from '../hooks/useSectionTheme.js'
 import { minHeightClass } from './sectionHeights.js'
@@ -87,7 +88,7 @@ export default function SectionSplit({
   const sectionStyle = bgImage
     ? { backgroundImage: `url(${bgImage})`, backgroundSize: 'cover', backgroundPosition: 'center' }
     : undefined
-  const bleed = fullBleed ? 'w-screen ml-[calc(50%-50vw)]' : ''
+  const bleed = fullBleed ? FULL_BLEED : ''
   const centred = align === 'center'
   const mediaFirst = align === 'left'
   const grid = centred

package/src/organisms/sectionBleed.js

@@ -0,0 +1,27 @@
+/* ONE BREAKOUT, ONE LITERAL (SectionFamilyFullBleed, kol-website 2026-08-31).
+ *
+ * `SectionHero` had `fullBleed`; `SectionNewsletter` needed it and copied the
+ * literal character for character. That copy was the right call at the time and
+ * is exactly the argument for this file: the second organism to need a thing had
+ * to duplicate the first, and the third would have too.
+ *
+ * WHY IT IS A FILLED-SECTION PROBLEM, not a newsletter one. Any member of the
+ * family can be a filled surface, and a filled surface inside `.kol-page` has its
+ * colour clipped by the page gutter on mobile — strips of page down both sides of
+ * the fill. Reported once per organism until the prop is shared.
+ *
+ * NOT `.kol-full-bleed`: that escape is CONTAINER-relative, so on an organism
+ * whose own parent has no gutter it over-bleeds — kol-website hit exactly that on
+ * an Instagram section the same evening. This is viewport-relative and does not
+ * care what it is nested in.
+ *
+ * The section's own horizontal padding re-insets the CONTENT, so only the fill
+ * moves. Default false everywhere: the blast radius is wide and shallow — no
+ * consumer's rendering changes until it passes the prop.
+ *
+ * Literal strings, never built at runtime — Tailwind's scanner cannot see a class
+ * assembled from parts. */
+export const FULL_BLEED = 'w-screen ml-[calc(50%-50vw)]'
+export const NO_BLEED = 'w-full'
+
+export const bleedClass = (fullBleed) => (fullBleed ? FULL_BLEED : NO_BLEED)