@kolkrabbi/kol-component 0.239.0 → 0.240.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.239.0",
+  "version": "0.240.0",
   "description": "The core component library",
   "license": "MIT",
   "type": "module",
@@ -38,7 +38,7 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-icons": "^0.33.0"
+    "@kolkrabbi/kol-icons": "^0.33.1"
   },
   "files": [
     "src",

package/src/molecules/ContentText.jsx

@@ -69,7 +69,11 @@ const RAMP = {
     /* detail truncates (ShellHomeSystem, 2026-08-27): a wrapping blurb set three
      * cards' plates at three heights and misaligned the media */
     card: { title: 'kol-mono-14 text-emphasis', detail: 'kol-mono-10 text-meta truncate' },
-    row:  { title: 'kol-mono-12 text-emphasis', detail: 'kol-mono-10 text-meta' },
+    /* ONE LINE, BOTH (2026-10-03): the row is a fixed 36px rung and neither slot truncated, so a
+     * long detail took its full width and the title wrapped under it — "Slit-Scan Camera" on three
+     * lines in a row twice the height of its neighbours. The title keeps its width and the detail
+     * gives way (`lead` below). */
+    row:  { title: 'kol-mono-12 text-emphasis truncate', detail: 'kol-mono-10 text-meta truncate' },
   },
   /* `print` folded into `catalog` 2026-08-29 — its row was already catalog's,
    * and its card differed only by `detail` not truncating. It aliases now. */
@@ -136,6 +140,9 @@ const RAMP = {
  * ['group', …] = 16px baseline group · ['between', …] = header.between ·
  * ['stack', …] = a vertical block on the tight 4px gap, nestable inside any of
  * the above. In a `between`, the LEADING part flexes and the trailing one hugs.
+ * ['lead', …] is a `between` the other way round: the leading part keeps its own
+ * width and the TRAILING one takes what is left and truncates — for a row whose
+ * trailing text is the long one (catalog's detail).
  *
  * A third kind, ['line', …] — fixed-width trailing columns for a table-like
  * row — was removed 2026-08-15. `default.row` was its only caller and moved to
@@ -148,7 +155,7 @@ const ORDER = {
   file:  { card: ['title', ['group', 'date', 'size']], row: ['title', ['group', 'date', 'size']] },
   /* slide: title, then date · size · slide count on one baseline (read off olina's /slide-deck) */
   slide: { card: ['title', ['group', 'date', 'size', 'meta']], row: ['title', ['group', 'date', 'size', 'meta']] },
-  catalog:  { card: ['title', 'detail'], row: [['between', 'title', 'detail']] },
+  catalog:  { card: ['title', 'detail'], row: [['lead', 'title', 'detail']] },
   /* title + body are ONE block in BOTH forms — a `stack`, so they sit on the
    * tight 4px internal gap while tags, kicker and the meta group keep the
    * form's own outer gap. A flat column gave every line the same gap, which
@@ -318,7 +325,8 @@ export default function ContentText({
   const render = (entry, i, trailing = false) => {
     if (typeof entry === 'string') return line(entry)
     const [kind, ...slots] = entry
-    const parts = slots.map((s, j) => render(s, j, kind === 'between' && j === slots.length - 1)).filter(Boolean)
+    const split = kind === 'between' || kind === 'lead'
+    const parts = slots.map((s, j) => render(s, j, split && j === slots.length - 1)).filter(Boolean)
     if (!parts.length) return null
     if (kind === 'stack') {
       /* A TRAILING column right-aligns (user ruling 2026-08-15) — it sits at
@@ -338,16 +346,21 @@ export default function ContentText({
          * baseline — a two-line column has no single baseline to share with the
          * title beside it, and baseline-aligning it hangs the second line below
          * the row's floor. */
-        className={`flex min-w-0 ${parts.length > 1 && Array.isArray(slots[slots.length - 1]) ? 'items-center' : 'items-baseline'} ${kind === 'between' ? 'justify-between' : ''}`}
+        className={`flex min-w-0 ${parts.length > 1 && Array.isArray(slots[slots.length - 1]) ? 'items-center' : 'items-baseline'} ${split ? 'justify-between' : ''}`}
         style={{ gap: 'var(--kol-spacing-6)' }}
       >
         {/* the LEADING part of a `between` takes the room; the trailing column
           * hugs its content. Without this the left stack sized to its content
           * and the big line truncated at a quarter of the row's width while
           * empty space sat between the two columns. */}
-        {kind === 'between' && parts.length > 1
+        {split && parts.length > 1
           ? parts.map((p, j) => (
-              <div key={j} className={j === 0 ? 'min-w-0 flex-1' : 'shrink-0 text-right'}>{p}</div>
+              /* `lead`: the leading part is its own width (a flex item's default — it shrinks only
+               * when it alone is wider than the row); the trailing one starts from nothing and
+               * takes the remainder, so it is the one that truncates */
+              <div key={j} className={kind === 'lead'
+                ? (j === 0 ? 'min-w-0' : 'min-w-0 flex-1 text-right')
+                : (j === 0 ? 'min-w-0 flex-1' : 'shrink-0 text-right')}>{p}</div>
             ))
           : parts}
       </div>

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

@@ -226,13 +226,25 @@ const ContentFilters = ({
     onFilterChange?.(activeFilters, mode)
   }
 
+  /* A CHIP THAT IS NOT OFFERED DOES NOT FILTER (2026-10-03, kol-mirror's Library on the hub). The
+   * set outlives a change of `filterGroups` — a page with views swaps the groups under it — and a
+   * chip picked in one view kept filtering the next, where no item carries its key: an empty list
+   * under a "(1) filter active" whose chip is nowhere on the page. Only what the current groups
+   * offer applies (and the consumer's own `customFilterKeys`). The stored set is left alone, so
+   * the chip is still on when its view comes back. */
+  const liveFilters = useMemo(() => {
+    const offered = new Set(filterGroups.flatMap((g) => g.values.map((v) => `${g.key}:${v}`)))
+    const live = [...activeFilters].filter((f) => offered.has(f) || customFilterKeys.includes(f.split(':')[0]))
+    return live.length === activeFilters.size ? activeFilters : new Set(live)
+  }, [activeFilters, filterGroups, customFilterKeys])
+
   const filteredItems = useMemo(() => {
     /* the KOL engine, not a private substring match (apps review 2026-09-29) — utilities/searchItems */
     let result = filterItems(items, searchText, { keys: searchKeys })
-    if (activeFilters.size === 0) return result
+    if (liveFilters.size === 0) return result
     return result.filter((item) => {
       let matches = true
-      activeFilters.forEach((filter) => {
+      liveFilters.forEach((filter) => {
         const [filterType, value] = filter.split(':')
         if (customFilterKeys.includes(filterType)) return
         const itemValue = item[filterType]
@@ -244,9 +256,9 @@ const ContentFilters = ({
       })
       return matches
     })
-  }, [items, activeFilters, customFilterKeys, searchText, searchKeys])
+  }, [items, liveFilters, customFilterKeys, searchText, searchKeys])
 
-  const showCount = !showCountOnlyWhenFiltering || isExpanded || searchOpen || activeFilters.size > 0
+  const showCount = !showCountOnlyWhenFiltering || isExpanded || searchOpen || liveFilters.size > 0
 
   /* THE FILTER VALUE IS A TAG — the atom's whole reason to exist ("a Tag with
    * no handler is a Pill wearing the wrong name"). Three defects lived here
@@ -464,12 +476,12 @@ const ContentFilters = ({
             />
             {headerActions}
           </div>
-          {activeFilters.size > 0 && (
+          {liveFilters.size > 0 && (
             <span
               className="kol-helper-12 text-fg-48 cursor-pointer select-none group flex items-center gap-2"
               onClick={(e) => { e.stopPropagation(); clearAllFilters() }}
             >
-              <span className="underline">({activeFilters.size}) {activeFilters.size === 1 ? 'filter' : 'filters'} active</span>
+              <span className="underline">({liveFilters.size}) {liveFilters.size === 1 ? 'filter' : 'filters'} active</span>
               <span className="hidden group-hover:inline text-fg-64">×</span>
             </span>
           )}
@@ -543,14 +555,14 @@ const ContentFilters = ({
           <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 && (
+            {isExpanded && liveFilters.size > 0 && (
               <button
                 type="button"
                 onClick={clearAllFilters}
                 className="kol-helper-12 transition-colors underline text-fg-32 hover:text-fg-48"
                 style={{ background: 'transparent', border: 'none', cursor: 'pointer' }}
               >
-                Clear all ({activeFilters.size})
+                Clear all ({liveFilters.size})
               </button>
             )}
           </div>

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`) */