@kolkrabbi/kol-component 0.148.0 → 0.150.0

package/package.json

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

@@ -154,7 +154,7 @@ export { kindOf, extOf, isSystemFile, KINDS, KIND_LABEL, DEFAULT_KINDS, isSegmen
 export { nearestRatio, RATIOS } from './utilities/ratios.js'
 /* the grab gesture — shared so kol-shell's NavRail and kol-framework's
  * useDragResize wear ONE implementation (OneGrabGestureBothRails, 2026-08-30) */
-export { default as useGrabEdge } from './utilities/useGrabEdge.js'
+export { default as useGrabEdge } from './hooks/useGrabEdge.js'
 export { default as markdownToHtml, inlineToHtml } from './utilities/markdownToHtml.js'
 export { default as RecordManager } from './organisms/RecordManager.jsx'
 export { default as SpectrumGrid } from './organisms/SpectrumGrid.jsx'
@@ -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/ContentRow.jsx

@@ -62,7 +62,16 @@ 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. */
-  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 },
+  /* `heightSm` — a FIXED rung below the md container, the floor above it
+   * (ContentRowShowcaseImageDrivenHeight, kol-website 2026-09-01, user ruling:
+   * the row's height is a function of the image, content fits inside it). On a
+   * 390 phone the narrow text column wrapped five tags to four rows and grew
+   * the row 62px past its floor, stranding the 136px thumb in dead space —
+   * 60px of ragged heights down one list. 168 is the floor's own number
+   * (136 thumb + 2×16 pad), so this is a change of KIND, not of value; the
+   * text has 136 to live in and the tags line goes single-row below md
+   * (ContentText's showcase ramp) so the cut lands on the chips, not mid-row. */
+  showcase: { thumb: 'fill', ratio: '1 / 1', pad: S4, gap: S4, frame: 'transparent', frameHover: 'var(--kol-fg-08)', bg: 'var(--kol-surface-secondary)', minH: 168, heightSm: 168, align: 'items-stretch', thumbRadius: 'var(--kol-radius-xs)', thumbBorder: false },
   /* ROSTER — a PICKABLE row (ContentRowRosterVariant, kol-chess 2026-08-31):
    * filled tile, no border, no divider, fixed height, square thumb, two
    * truncated lines that FILL the row rather than setting it.
@@ -171,6 +180,9 @@ export default function ContentRow({
      * so a consumer that wants a taller pick row gets one; what it cannot get is
      * a row whose height drifts with its own copy. */
     '--kol-row-h': box.height != null ? `${minHeight ?? box.height}px` : undefined,
+    /* the stacked case's fixed rung — `heightSm` variants only; `minHeight`
+     * still overrides, same contract as `height` above */
+    '--kol-row-h-sm': box.heightSm != null ? `${minHeight ?? box.heightSm}px` : undefined,
     /* `fill` = the rung minus the vertical padding — a definite number, not a
      * stretch (a min-height row has no definite cross size, so a stretched
      * aspect-ratio square resolved to the image's intrinsic width).
@@ -261,7 +273,7 @@ export default function ContentRow({
   )
 
   const common = {
-    className: `kol-row group flex ${box.column ? 'flex-col' : ''} ${box.align} ${box.height != null ? 'kol-row--fixed' : ''} ${box.divider ? 'kol-row--divided' : ''} ${box.frame ? 'rounded-[var(--kol-radius-sm)] border' : ''} ${interactive ? 'cursor-pointer select-none' : ''} ${interactive && box.hover ? 'kol-content-hover' : ''} ${interactive && box.frameHover ? 'kol-content-hover-frame' : ''} ${className}`.trim(),
+    className: `kol-row group flex ${box.column ? 'flex-col' : ''} ${box.align} ${box.height != null ? 'kol-row--fixed' : ''} ${box.heightSm != null ? 'kol-row--fixed-sm' : ''} ${box.divider ? 'kol-row--divided' : ''} ${box.frame ? 'rounded-[var(--kol-radius-sm)] border' : ''} ${interactive ? 'cursor-pointer select-none' : ''} ${interactive && box.hover ? 'kol-content-hover' : ''} ${interactive && box.frameHover ? 'kol-content-hover-frame' : ''} ${className}`.trim(),
     style: vars,
   }
 

package/src/molecules/ContentText.jsx

@@ -28,6 +28,8 @@
  *                    dateClass, sizeClass, metaClass — full class overrides
  */
 
+import Tag from '../atoms/Tag'
+
 /* THE ROW INK LADDER — three rungs, and only three (2026-08-15).
  *
  * A work row was rendering its small title, its big description AND its type
@@ -89,7 +91,11 @@ const RAMP = {
     /* RULED ON /work beside the local WorkListItem (WorkListingRowsAndFilters,
      * 2026-08-27): the typeface row's voices — title + type kol-mono-14 full
      * 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' },
+    /* tags go SINGLE-ROW below md (ContentRowShowcaseImageDrivenHeight,
+     * 2026-09-01): the row wears a fixed rung there, and a wrapping tag block
+     * was what grew it past the floor — the cut lands on the chips' right
+     * edge, not mid-row. */
+    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 max-md:flex-nowrap max-md:overflow-hidden' },
   },
   /* ROSTER — a pickable row's two lines, both TRUNCATED (ContentRowRosterVariant,
    * kol-chess 2026-08-31). Written out rather than derived from `showcase`: the
@@ -222,9 +228,31 @@ export default function ContentText({
    * it overrode the class (user 2026-08-27: "I had put A HOVER OPACITY drop,
    * WHERE IS IT"). The hook is re-attached after the override. */
   const hook = (slot) => (overrides[slot] && /\bkol-content-title-dim\b/.test(ramp[slot] ?? '') ? ' kol-content-title-dim' : '')
+
+  /* An ARRAY-valued slot never renders as concatenated text
+   * (ContentTextTagsSlotRendersRawArray, 2026-09-01). React writes an array of
+   * strings as adjacent text nodes, and CSS folds contiguous text into ONE
+   * anonymous flex item — so the tags ramp's `gap-2` spaced nothing and the
+   * run-on string inherited the section's font. Strings in `tags` become the
+   * chip the estate's correct tag rows already wear (the tertiary Tag);
+   * elements a consumer pre-built pass through untouched. Any other slot's
+   * array (kol-website passes `meta={[date, readingTime]}`) gets one span per
+   * item plus the same flex seam, so the values separate instead of running on. */
+  const content = (slot) => {
+    const v = values[slot]
+    if (!Array.isArray(v)) return v
+    if (slot === 'tags')
+      return v.map((t, i) =>
+        typeof t === 'string' || typeof t === 'number' ? (
+          <Tag key={i} variant="tertiary" size="sm">{t}</Tag>
+        ) : t
+      )
+    return v.map((item, i) => <span key={i}>{item}</span>)
+  }
+  const spread = (slot) => (Array.isArray(values[slot]) && slot !== 'tags' ? ' flex flex-wrap gap-2' : '')
   const line = (slot) =>
     values[slot] == null ? null : (
-      <div key={slot} className={`${overrides[slot] ?? ramp[slot] ?? ''}${extra(slot)}${hook(slot)}`.trim()}>{values[slot]}</div>
+      <div key={slot} className={`${overrides[slot] ?? ramp[slot] ?? ''}${extra(slot)}${hook(slot)}${spread(slot)}`.trim()}>{content(slot)}</div>
     )
 
   /* RECURSIVE (2026-08-15) — an entry inside a line/between/group may itself be

package/src/molecules/SearchInput.jsx

@@ -198,7 +198,9 @@ export default function SearchInput({
   }
   const shellCls = [
     bare
-      ? 'flex w-full gap-2.5 px-4 py-3'
+      /* kol-control--bare: zero-chrome marker so the theme's coarse-pointer
+       * 16px floor covers this body plan too (OverlaySearchFieldZoomsIOS) */
+      ? 'kol-control--bare flex w-full gap-2.5 px-4 py-3'
       : `kol-control kol-control--${variant} kol-control-${size} gap-2${toneClass(tone) ? ' kol-tone-sunken' : ''}`,
     'items-center cursor-text',
     SIZE_TYPE[size],

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/ShellDrawer.jsx

@@ -141,10 +141,15 @@ export default function ShellDrawer({
   return createPortal(
     <>
       {backdrop && (
-        <div
+        /* A BUTTON, not a div (OverlayScrimTapDismiss, 2026-09-01): iOS Safari
+         * does not bubble tap-clicks from non-interactive elements, so a div
+         * scrim's onClick never fires on a phone — the same line that broke
+         * the search overlay's dismiss. */
+        <button
+          type="button"
+          aria-label="Close"
           className={`fixed inset-0 z-[100] kol-overlay-scrim ${motionBackdrop}`}
           onClick={onClose}
-          aria-hidden="true"
         />
       )}
       <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/ContentFilters.jsx

@@ -319,7 +319,7 @@ const ContentFilters = ({
         * divider equally from both sides, so it read as a free-floating line
         * rather than the header's own baseline. */}
       <div className="flex items-center justify-between" style={{ marginBottom: 'var(--kol-spacing-3)' }}>
-        <div className="flex items-center gap-6">
+        <div className="flex items-center gap-3 md:gap-6">
           {/* IconFrame, NOT a kol-btn span: this is decoration and clicks
             * nothing, so it must not wear a button's chrome. The atom exists
             * for exactly this (lobby ruling 2026-07-30 — "icons only, NO
@@ -331,8 +331,12 @@ const ContentFilters = ({
               * divider sat 24px from the title's text edge but 32 from the
               * icon glyphs (the frames carry 8px of air a side) and read pushed
               * toward the title; 16px on the title side balances it. The seam
-              * `titleClassName` stays what it was. */}
-            <span className={`${titleClassName} pr-4`} style={titleUppercase ? { textTransform: 'uppercase', letterSpacing: 1 } : undefined}>{title}</span>
+              * `titleClassName` stays what it was.
+              * MOBILE RUNG (ContentFiltersMobileGaps, 2026-09-01): the seam and
+              * the pad both halve below md — gap-3 + pr-2 keeps the same
+              * frame-air balance (12+8 glyph side · 12+8 title side) without
+              * spending 40px of a 390px viewport on one divider. */}
+            <span className={`${titleClassName} pr-2 md:pr-4`} style={titleUppercase ? { textTransform: 'uppercase', letterSpacing: 1 } : undefined}>{title}</span>
           </h2>
           <Divider variant="vertical" />
           <div className="flex items-center gap-1">
@@ -457,8 +461,8 @@ const ContentFilters = ({
         * the whole row on `isExpanded` hid the strip until you opened filters,
         * which is not a state anyone would guess at. */}
       {(isExpanded || (layoutPlacement === 'below' && layoutStrip) || leadingActions || belowActions) && (
-        <div className="kol-filters-row flex items-start justify-between gap-16">
-          <div className="flex min-w-0 flex-1 items-start gap-16">
+        <div className="kol-filters-row flex items-start justify-between gap-8 md:gap-16">
+          <div className="flex min-w-0 flex-1 items-start gap-8 md:gap-16">
             {leadingActions}
             {isExpanded && filterGroups.map((group, i) => renderFilterGroup(group, i))}
             {isExpanded && activeFilters.size > 0 && (

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'
@@ -125,8 +126,14 @@ export default function SectionNewsletter({
         * at 390 the field and submit ran edge to edge against the band's own
         * 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()}
+        * inner block still centres at 80px from the band edge.
+        *
+        * `py-16 md:py-24` (SectionNewsletterMobileFoot, 2026-09-01): the flat
+        * `py-24` left 96px of empty band under the Subscribe button at 390 — a
+        * fifth of the card. 16/24 is the FAMILY's own mobile rung (SectionFaq,
+        * SectionSplit carry it already); this band was the outlier holding the
+        * desktop constant. Desktop unmoved. */
+        className={`kol-section-newsletter ${bleedClass(fullBleed)} flex flex-col justify-center px-5 sm:px-8 py-16 md: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
@@ -146,8 +147,18 @@ export default function SectionSplit({
              * phone with browser chrome sits in the 660–720 band, which is why
              * this was reported from a device four times and never reproduced
              * against a nominal 844-tall test. `max-w-full` alone only caps. */
-            className={`kol-section-split-visual relative w-full max-w-full justify-self-center rounded-[var(--kol-radius-sm)] ${mediaClip ? 'overflow-hidden' : ''} ${mediaHover ? 'is-hoverable' : ''} ${mediaFirst ? 'order-1' : ''} ${centred ? 'max-w-[640px]' : ''}`.replace(/\s+/g, ' ').trim()}
-            style={{ aspectRatio: ratio, height: 'calc(var(--kol-section-h, 60vh) - 2 * var(--kol-section-py, 4rem))' }}
+            /* THE RUNG STOPS AT THE STACK (SectionSplitVisualHeightRemainder,
+             * kol-website 2026-09-01). The bounded-frame height (rung − 2×py,
+             * SectionSplitMediaBounded) is a two-column ruling: it holds where
+             * the text sits BESIDE the media. Stacked below 901px the text sits
+             * ABOVE it, the same calc handed the frame whatever the rung's
+             * arithmetic left (rung 40 at a 700-tall phone = 117px), and
+             * `overflow-hidden` clipped a 350px card to a letterbox strip —
+             * silently, which is why it was reported as a ProfileCard crop.
+             * Below 901 the frame is `w-full` + ratio: width decides, height
+             * follows, media never clips. ≥901 nothing moves. */
+            className={`kol-section-split-visual relative w-full max-w-full justify-self-center rounded-[var(--kol-radius-sm)] min-[901px]:h-[calc(var(--kol-section-h,60vh)_-_2*var(--kol-section-py,4rem))] ${mediaClip ? 'overflow-hidden' : ''} ${mediaHover ? 'is-hoverable' : ''} ${mediaFirst ? 'order-1' : ''} ${centred ? 'max-w-[640px]' : ''}`.replace(/\s+/g, ' ').trim()}
+            style={{ aspectRatio: ratio }}
           >
             {media}
             {caption && <div className="kol-section-split-visual-veil" aria-hidden="true" />}

package/src/organisms/ShellSearchOverlay.jsx

@@ -132,10 +132,16 @@ export default function ShellSearchOverlay({
 
   return (
     <div className="fixed inset-0 flex items-start justify-center pt-[20vh]" style={{ zIndex: 'var(--kol-z-modal, 100)' }}>
-      <div
+      {/* A BUTTON, not a div (OverlayScrimTapDismiss, 2026-09-01): iOS Safari
+        * does not bubble tap-clicks from non-interactive elements, so the div's
+        * onClick never fired on a phone and the only way out was the close
+        * control. A button always fires — and it ends the other half of the
+        * defect, an interactive target carrying `aria-hidden`. */}
+      <button
+        type="button"
+        aria-label="Close search"
         className="absolute inset-0 kol-overlay-scrim"
         onClick={onClose}
-        aria-hidden="true"
       />
       <div
         ref={panelRef}

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)