@kolkrabbi/kol-component 0.245.0 → 0.247.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.245.0",
+  "version": "0.247.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.1"
+    "@kolkrabbi/kol-icons": "^0.35.0"
   },
   "files": [
     "src",

package/src/index.js

@@ -38,6 +38,9 @@ export { default as IconFrame } from './atoms/IconFrame.jsx'
 export { default as ExitPreview } from './utilities/ExitPreview.jsx'
 export { default as Figure } from './atoms/Figure.jsx'
 export { default as FullscreenOverlay } from './utilities/FullscreenOverlay.jsx'
+/* the overlay layer stack — which open layer owns Escape; exported so a layer in another package
+ * (kol-shell's walkthrough) joins the same stack instead of a second one (2026-10-09) */
+export { pushLayer, popLayer, isTopLayer } from './utilities/layerStack.js'
 /* BackgroundVideo — renamed from HlsVideo and moved to utilities 2026-10-01 (user ruling: no UI,
  * and the name said how it streams, not what it is for). `HlsVideo` is the alias, on the ledger. */
 export { default as BackgroundVideo, default as HlsVideo } from './utilities/BackgroundVideo.jsx'

package/src/molecules/ContentRow.jsx

@@ -6,8 +6,8 @@ import ContentText from './ContentText.jsx'
  * the variant has one) beside the ruled text. Box values — thumb size, gap,
  * padding, frame — default per variant to the RULED structures from the live
  * review (06-content-card-system.md §2 boxes): default is a bare table-like
- * line with a 48px thumb; catalog/print are framed between-headers with no
- * thumb; article rides a 120px 16:9 thumb; work a framed 64px row; typeface a
+ * line with a 48px thumb; catalog/print are framed between-headers with a
+ * 36 square thumb when `media` is passed (none without); article rides a 120px 16:9 thumb; work a framed 64px row; typeface a
  * framed no-thumb block.
  *
  * @param {string}    variant   file | catalog | print | article | work | typeface | roster
@@ -57,7 +57,10 @@ const BOX = {
   /* catalog/print rows render AT 36px — the shipped GridCard list row is a
    * fixed 36 and the Y padding was what pushed it past that. X padding stays;
    * `minH` is now the whole height budget and the row centres inside it. */
-  catalog:  { thumb: 0,   ratio: '1 / 1',  pad: `0 ${S3}`,     gap: S3, frame: 'var(--kol-fg-04)', bg: 'var(--kol-surface-tertiary)', minH: 36, align: 'items-center', hover: 'var(--kol-oq-04)' },
+  /* catalog carries a thumb (2026-10-09 — user: "catalog should change its default"): the full
+   * 36 rung, square, and ONLY when `media` is passed — every catalog row that never had one keeps
+   * none, rather than growing a MISSING plate (`mediaOnly`). */
+  catalog:  { thumb: 36,  mediaOnly: true, ratio: '1 / 1',  pad: `0 ${S3}`,     gap: S3, frame: 'var(--kol-fg-04)', bg: 'var(--kol-surface-tertiary)', minH: 36, align: 'items-center', hover: 'var(--kol-oq-04)' },
   /* ListingCard's row thumb is `bg-fg-12` bare — a tint, no border. */
   /* article had NO hover of any kind — the only row in the family you could
    * point at and get nothing back. It has no surface of its own, so it takes
@@ -188,7 +191,7 @@ export default function ContentRow({
    * consumer listing coverless documents should not have to say it two
    * different ways on the card and the row. `media={false}` reads the same in
    * both; `thumb` still wins when it is passed explicitly. */
-  const thumbPx = thumb ?? (media === false ? 0 : box.thumb)
+  const thumbPx = thumb ?? (media === false || (box.mediaOnly && media == null) ? 0 : box.thumb)
   const padY = (paddingY != null ? `${paddingY}px` : String(box.pad)).trim().split(/\s+/)[0]
 
   /* The md: STEP is a custom property, not a Tailwind variant. Tailwind cannot

package/src/molecules/SectionText.jsx

@@ -107,7 +107,7 @@ export default function SectionText({
     ? <p className={cls(bodyClass, 'body')} style={slotStyle.body}>{body}</p>
     : <div className={cls(bodyClass, 'body')} style={slotStyle.body}>{body}</div>)
   const cluster = actions && (
-    <div className={cls(`${actionsClass} shrink-0 h-0 self-center`, 'actions')} style={slotStyle.actions}>{actions}</div>
+    <div className={cls(`${actionsClass} shrink-0 md:h-0 md:self-center`, 'actions')} style={slotStyle.actions}>{actions}</div>
   )
   return (
     <div className={`kol-section-text flex flex-col ${gap} ${alignCls} ${className}`.replace(/\s+/g, ' ').trim()} style={style}>
@@ -133,7 +133,10 @@ export default function SectionText({
            * have been space between … on the right edge"). The column is `items-start`, so this
            * row shrank to its content and `justify-between` had no room to act: the cluster sat
            * against the subtitle on every PageHeader with actions. */
-          <div className="flex self-stretch items-baseline justify-between gap-6">
+          /* BELOW `md` THE CLUSTER DROPS UNDER THE BODY (kol-fxr 2026-10-09, HubSettingsHeaderAt390:
+           * at 390 the cluster kept its natural width and left the lede ~110px, three lines). It
+           * takes its own row there, with its real height; the zero-height trick is a desk rule. */
+          <div className="flex flex-col md:flex-row self-stretch md:items-baseline md:justify-between gap-3 md:gap-6">
             {bodyNode}
             {cluster}
           </div>

package/src/organisms/ContentFilters.jsx

@@ -523,19 +523,39 @@ const ContentFilters = ({
 
       {/* the view family's own line below md (`auto`) or always (`below`) —
         * full width, wrapping, so no view is ever off the page */}
-      {viewModeOptions && viewPlacement !== 'header' && (
-        <div className={`${viewPlacement === 'auto' ? 'md:hidden ' : ''}mb-3`}>
-          {viewStrip('flex flex-wrap gap-y-2')}
-        </div>
-      )}
-      {/* the consumer's trailing controls: their OWN line below md (`auto`) or
-        * always (`below`) — full width, wrapping. In the below row's right
-        * group they measured 223px beside LIST/GRID in a 342px track. */}
-      {trailingActions && trailingPlacement !== 'header' && (
-        <div className={`${trailingPlacement === 'auto' ? 'md:hidden ' : ''}mb-3 flex flex-wrap items-center gap-6 gap-y-2`}>
-          {trailingActions}
-        </div>
-      )}
+      {/* BELOW `md` THE VIEW STRIP AND THE TRAILING CONTROLS SHARE ONE WRAPPING LINE (kol-fxr
+        * 2026-10-09, HubSettingsHeaderAt390: fxr's SETTINGS label and its options/shortcuts toggle
+        * were two ragged rows of one rung). Same rung, same line; it still wraps when they do not
+        * fit, so nothing is ever off the page. `below` placements keep their own line at every width. */}
+      {(() => {
+        const view = viewModeOptions && viewPlacement !== 'header'
+        const trail = trailingActions && trailingPlacement !== 'header'
+        const shared = view && trail && viewPlacement === 'auto' && trailingPlacement === 'auto'
+        if (shared) return (
+          <div className="md:hidden mb-3 flex flex-wrap items-center gap-6 gap-y-2">
+            {/* the desk's order — trailing, then the strip — so a consumer's divider sits between them */}
+            {trailingActions}
+            {viewStrip('flex flex-wrap gap-y-2')}
+          </div>
+        )
+        return (
+          <>
+            {view && (
+              <div className={`${viewPlacement === 'auto' ? 'md:hidden ' : ''}mb-3`}>
+                {viewStrip('flex flex-wrap gap-y-2')}
+              </div>
+            )}
+            {/* the consumer's trailing controls: their OWN line below md (`auto`) or
+              * always (`below`) — full width, wrapping. In the below row's right
+              * group they measured 223px beside LIST/GRID in a 342px track. */}
+            {trail && (
+              <div className={`${trailingPlacement === 'auto' ? 'md:hidden ' : ''}mb-3 flex flex-wrap items-center gap-6 gap-y-2`}>
+                {trailingActions}
+              </div>
+            )}
+          </>
+        )
+      })()}
 
       {/* BELOW the divider: the filter GROUPS only. Left-aligned columns —
         * label above values — visible only while the filter toggle is open.