@kolkrabbi/kol-component 0.239.1 → 0.240.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.239.1",
+  "version": "0.240.0",
   "description": "The core component library",
   "license": "MIT",
   "type": "module",
@@ -26,8 +26,8 @@
     "embla-carousel-react": "^8.6.0",
     "pdfjs-dist": "^6.3.289",
     "react-syntax-highlighter": "^16.1.1",
-    "@kolkrabbi/kol-markdown": "^0.1.3",
-    "@kolkrabbi/kol-search": "^0.3.0"
+    "@kolkrabbi/kol-search": "^0.3.0",
+    "@kolkrabbi/kol-markdown": "^0.1.3"
   },
   "peerDependencies": {
     "@kolkrabbi/kol-icons": ">=0.22.0",

package/src/organisms/ColumnBrowser.jsx

@@ -681,8 +681,11 @@ export default function ColumnBrowser({
   const rootRef = useRef(null)
   /* `autoFocus` (ColumnBrowserSeams, kol-r2b2 2026-08-28): the arrow keys were dead until a row was
    * clicked — nothing focused the root on mount, and the consumer reached into the DOM for it. Re-run
-   * on `prefix`, so a bucket switch from the header (which takes focus) hands the keyboard back. */
-  useEffect(() => { if (autoFocus) rootRef.current?.focus() }, [autoFocus, prefix])
+   * on `prefix`, so a bucket switch from the header (which takes focus) hands the keyboard back.
+   * `preventScroll` (explorer-autofocus-scrolls-the-fixed-page, kol-website 2026-10-06): inside
+   * `PageShell mode="fixed"` the focus scrolled the page's scroller 102px to bring the browser into
+   * view, and the header opened off-screen. The keyboard still lands here; the page stays put. */
+  useEffect(() => { if (autoFocus) rootRef.current?.focus({ preventScroll: true }) }, [autoFocus, prefix])
 
   /* THE KEYBOARD SELECTS TOO (user 2026-09-23: *"the highlight focus is on the correct item, this
    * has been a problem for awhile"*). Clicks reported through `onSelectClick`; the arrows moved

package/src/organisms/SectionSplit.jsx

@@ -195,13 +195,18 @@ export default function SectionSplit({
     <section
       ref={themeRef}
       data-theme={themeStamp}
-      className={`kol-section-split flex flex-col justify-center px-5 py-16 md:px-8 md:py-24 lg:px-14 lg:py-32 [--kol-section-py:4rem] md:[--kol-section-py:6rem] lg:[--kol-section-py:8rem] ${minHeightClass(height)} ${surfaceClass(background, 'none')} ${bleed} ${className}`.replace(/\s+/g, ' ').trim()}
+      className={`kol-section-split flex flex-col justify-center py-16 md:py-24 lg:py-32 [--kol-section-py:4rem] md:[--kol-section-py:6rem] lg:[--kol-section-py:8rem] ${minHeightClass(height)} ${surfaceClass(background, 'none')} ${bleed} ${className}`.replace(/\s+/g, ' ').trim()}
       style={sectionStyle}
     >
       {/* ONE cap for the whole section family (user ruling 2026-08-26): the shell's
         * --kol-container-max ladder — 100% → 1400 → 1600 → 1800. Split ran 1200,
         * cards 1400, the CTA 1600: three numbers for one job, unflagged. */}
-      <div className={`w-full max-w-[var(--kol-container-max,var(--kol-content-shell,1800px))] mx-auto ${grid} ${innerClassName}`.replace(/\s+/g, ' ').trim()}>
+      {/* …AND THE RULED GUTTER IS INSIDE THAT CAP (section-split-content-media-and-ruled-gutter,
+        * kol-website 2026-10-06): the section padded itself px-5/8/14 OUTSIDE the cap, so its text
+        * started 56 at 1440 against 48 for every `.kol-page` band below it, and at 1920 the padding
+        * fell outside the cap and did nothing. Now the inner box is `.kol-page`'s own measure —
+        * the cap, then `--kol-pad-section-x` inside it. `fill` keeps its edge-to-edge halves. */}
+      <div className={`w-full max-w-[var(--kol-container-max,var(--kol-content-shell,1800px))] mx-auto px-[var(--kol-pad-section-x,20px)] ${grid} ${innerClassName}`.replace(/\s+/g, ' ').trim()}>
         {/* `order` rather than `flex-row-reverse`: the grid is one column below
           * 901px, and DOM order is what decides the stack there. */}
         <SectionText
@@ -262,8 +267,13 @@ export default function SectionSplit({
              * rendered 2.22 at 1600 and cropped its image. From 901 the width is `auto` again:
              * the rung sets the height, the ratio sets the width, the column caps it — the
              * 2026-08-27 rule written on the `ratio` prop. */
-            className={`kol-section-split-visual relative w-full min-[901px]:w-auto 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 }}
+            /* `ratio="auto"` IS CONTENT, NOT A FRAME (section-split-content-media-and-ruled-gutter,
+             * kol-website 2026-10-06): with no ratio there is nothing for the width to follow, so
+             * the rung-minus-padding height made a fixed window over a card with its own height —
+             * /studio's 621px ProfileCard showed as a 104px strip at 1440. Auto media takes the
+             * column's width and its own height, at every width; a ratio keeps the bounded rule. */
+            className={`kol-section-split-visual relative w-full max-w-full justify-self-center rounded-[var(--kol-radius-sm)] ${ratio === 'auto' ? '' : 'min-[901px]:w-auto 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={ratio === 'auto' ? undefined : { aspectRatio: ratio }}
           >
             {media ?? (placeholder === true
               ? <AssetPlaceholder className="h-full w-full" />

package/src/utilities/Popover.jsx

@@ -121,7 +121,10 @@ export function usePopover({
 
   const interactions = useInteractions([
     useClick(data.context, { enabled: click }),
-    useHover(data.context, { enabled: hover, delay: hoverDelay, move: false }),
+    /* `mouseOnly` — a hover is a mouse's (2026-10-05, found on labs' phone sheet). Touch has none:
+     * a tap read as a hover that never ends, so a tooltip opened on the tap and stayed over the
+     * next control. Only Tooltip opens on hover, and the keyboard still reaches it through `focus`. */
+    useHover(data.context, { enabled: hover, delay: hoverDelay, move: false, mouseOnly: true }),
     useFocus(data.context, { enabled: focus }),
     /* `dismiss` may be an object of floating-ui's own options — `{ outsidePress: false }` keeps Esc
      * and drops the outside click (Dropdown `stayOpen`) */