@kolkrabbi/kol-component 0.149.0 → 0.150.0

package/package.json

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

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

@@ -126,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 ${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()}
+        * 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

@@ -147,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}