@kolkrabbi/kol-component 0.245.0 → 0.246.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.245.0",
+  "version": "0.246.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-search": "^0.3.0",
-    "@kolkrabbi/kol-markdown": "^0.1.3"
+    "@kolkrabbi/kol-markdown": "^0.1.3",
+    "@kolkrabbi/kol-search": "^0.3.0"
   },
   "peerDependencies": {
     "@kolkrabbi/kol-icons": ">=0.22.0",

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