@kolkrabbi/kol-component 0.162.0 → 0.163.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.162.0",
+  "version": "0.163.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/organisms/ContentFilters.jsx

@@ -21,6 +21,10 @@ import IconFrame from '../atoms/IconFrame.jsx'
  * @param {Array} props.filterGroups — [{label, key, values}, ...]
  * @param {Function} props.renderItem — (filteredItems, viewMode, layout) => ReactNode
  * @param {Array} props.viewModeOptions — optional view mode options for the view strip
+ * @param {'auto'|'header'|'below'} props.viewPlacement — WHERE the RECENT/SAVED strip sits (ContentFiltersViewStripOverflow,
+ *   kol-mirror 2026-09-02): `auto` (default) rides the header row from `md` and takes its OWN line under the divider
+ *   below it, full width and wrapping — five views at 390 were 440px in a 390px page, two cut off and unreachable;
+ *   `header` always the header row; `below` always its own line. Same family, same rung as LIST/GRID's drop.
  * @param {string} props.defaultViewMode — default view mode (falls back to the FIRST option)
  * @param {string} props.layout — controlled LIST/GRID value (kol-r2b2 2026-08-27: a consumer that persists
  *   layout per bucket needs the strip's value back; `defaultLayout` alone kept it internal)
@@ -90,6 +94,7 @@ const ContentFilters = ({
    * "N of N" is below the divider in BOTH — it is a count of what the filters
    * did, so it belongs with them, and it only renders while they are open. */
   layoutPlacement = 'below',
+  viewPlacement = 'auto',
   onFilterChange,
   mutuallyExclusiveFilters = [],
   customFilterKeys = [],
@@ -302,6 +307,22 @@ const ContentFilters = ({
   )
   }
 
+  /* RECENT / SAVED — one node, two homes (header from md, its own line below) */
+  const viewStrip = (wrapCls) => (
+    <div className={`${wrapCls} items-center gap-4`}>
+      {viewModeOptions.map((opt) => (
+        <span
+          key={opt.value}
+          onClick={() => handleViewModeChange(opt.value)}
+          className={`${viewClassName} cursor-pointer select-none ${viewMode === opt.value ? stripActiveClassName : stripRestClassName}`}
+          style={{ textTransform: 'uppercase', letterSpacing: 1 }}
+        >
+          {opt.label}
+        </span>
+      ))}
+    </div>
+  )
+
   return (
     /* minHeight 0 on both this root and the body below: without it a flex
      * child refuses to shrink past its content, so a scrollable body pushed
@@ -426,20 +447,11 @@ const ContentFilters = ({
             * This REPLACES the filled-chip reading of the 2026-07-28 ruling on
             * this surface — user ruling 2026-08-15: the fork's look, everywhere.
             * One family across the whole row. */}
-          {viewModeOptions && (
-            <div className="flex items-center gap-4">
-              {viewModeOptions.map((opt) => (
-                <span
-                  key={opt.value}
-                  onClick={() => handleViewModeChange(opt.value)}
-                  className={`${viewClassName} cursor-pointer select-none ${viewMode === opt.value ? stripActiveClassName : stripRestClassName}`}
-                  style={{ textTransform: 'uppercase', letterSpacing: 1 }}
-                >
-                  {opt.label}
-                </span>
-              ))}
-            </div>
-          )}
+          {/* THE STRIP HAS A NARROW RUNG (ContentFiltersViewStripOverflow,
+            * kol-mirror 2026-09-02): in the header it is `hidden md:flex` under
+            * `auto`, and the same options render on their own line under the
+            * divider below `md` — full width, wrapping. */}
+          {viewModeOptions && viewPlacement !== 'below' && viewStrip(viewPlacement === 'auto' ? 'hidden md:flex' : 'flex')}
         </div>
       </div>
 
@@ -447,6 +459,14 @@ const ContentFilters = ({
         * dropped, which is how this margin nearly went missing. */}
       <Divider className="mb-3" />
 
+      {/* 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>
+      )}
+
       {/* BELOW the divider: the filter GROUPS only. Left-aligned columns —
         * label above values — visible only while the filter toggle is open.
         *