@kolkrabbi/kol-component 0.54.0 → 0.55.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.54.0",
+  "version": "0.55.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

@@ -3,6 +3,7 @@ import Tag from '../atoms/Tag.jsx'
 import Divider from '../atoms/Divider.jsx'
 import Button from '../atoms/Button.jsx'
 import { Icon } from '@kolkrabbi/kol-icons'
+import { glyphSize } from '../hooks/glyphLadders.js'
 import IconFrame from '../atoms/IconFrame.jsx'
 
 /**
@@ -228,7 +229,11 @@ const ContentFilters = ({
               aria-label="Toggle filters"
               style={{ background: 'transparent', border: 'none', cursor: 'pointer', color: 'inherit' }}
             >
-              <IconSeam name="filter" size={16} />
+              {/* SOLO ladder, md rung — a 32px square takes a 20px glyph.
+                * Both header glyphs were 16 (the sm rung) in md boxes, which is
+                * the exact hand-transcription hooks/glyphLadders.js exists to
+                * stop and the one ActionButton's docstring already names. */}
+              <IconSeam name="filter" size={glyphSize('md', true)} />
             </button>
             <div
               className="kol-expand flex items-center justify-center rounded-sm cursor-pointer hover:bg-fg-04"
@@ -254,7 +259,7 @@ const ContentFilters = ({
                   position: searchOpen ? 'absolute' : 'relative',
                 }}
               >
-                <IconSeam name="search" size={16} />
+                <IconSeam name="search" size={glyphSize('md', true)} />
               </span>
               {searchOpen && (
                 <input
@@ -284,6 +289,34 @@ const ContentFilters = ({
         </div>
 
         <div className="flex items-center gap-8">
+          {/* The count and LIST/GRID ride the HEADER row, above the divider.
+            *
+            * "N of N" appears ONLY while the filter panel is open (user ruling
+            * 2026-08-15) — with nothing filtered it always reads "12 of 12",
+            * which is a number that has never once told anyone anything. It
+            * earns its place the moment a filter can change it.
+            *
+            * Ink stays `text-fg-64`: static information, not a toggle, so it
+            * takes neither the 96 active nor the 32 rest. */}
+          {showCount && isExpanded && (
+            <span className={countClassName} style={{ letterSpacing: 1 }}>
+              {filteredItems.length} of {totalCount}
+            </span>
+          )}
+          {layoutOptions && (
+            <div className="flex items-center gap-4">
+              {layoutOptions.map((opt) => (
+                <span
+                  key={opt.value}
+                  onClick={() => setLayout(opt.value)}
+                  className={`${layoutClassName} cursor-pointer select-none ${layout === opt.value ? stripActiveClassName : stripRestClassName}`}
+                  style={{ letterSpacing: 1 }}
+                >
+                  {opt.label}
+                </span>
+              ))}
+            </div>
+          )}
           {/* RECENT / SAVED is the SAME STRIP as LIST / GRID, not a ViewToggle.
             * Read off kol-monitor's original (_tmp/2026-08-15-shell-adoption/
             * ContentFilters.jsx:225-232): inline spans, `kol-helper-14`,
@@ -312,16 +345,15 @@ const ContentFilters = ({
 
       <Divider className="mb-4" />
 
-      {/* ONE ROW BELOW THE DIVIDER (user ruling 2026-08-15, four rounds of QA
-        * against a fork of this file). Filter groups are left-aligned COLUMNS —
-        * label above values — and appear only while the filter toggle is open.
-        * The layout strip is right-aligned and ALWAYS visible.
+      {/* BELOW the divider: the filter GROUPS only. Left-aligned columns —
+        * label above values — visible only while the filter toggle is open.
         *
-        * `items-start` is load-bearing: it pins the strip to the label row so
-        * the values hang beneath it. The strip previously rendered in its own
-        * row AFTER this block, which is why expanding a filter group pushed it
-        * down the page — the defect that started the whole ticket. */}
-      {(layoutOptions || isExpanded || showCount) && (
+        * The count + layout strip moved ABOVE the divider into the header row
+        * (user ruling 2026-08-15, later pass), reversing the earlier "one row
+        * below the divider" cut. It also settles the defect that ruling was
+        * fighting for good: the strip cannot be pushed down the page by an
+        * expanding filter group if it is not in the same row as one. */}
+      {isExpanded && (
         <div className="flex items-start justify-between gap-16 pb-4">
           <div className="flex items-start gap-16">
             {isExpanded && filterGroups.map((group) => renderFilterGroup(group))}
@@ -336,31 +368,6 @@ const ContentFilters = ({
               </button>
             )}
           </div>
-          {/* The count rides the LAYOUT row, not the header (user ruling
-            * 2026-08-15) — same `kol-helper-12` + 1px tracking as LIST/GRID
-            * beside it. Ink stays `text-fg-64`: it is static information, not
-            * a toggle, so it takes neither the 96 active nor the 32 rest. */}
-          <div className="flex items-center gap-4 flex-shrink-0">
-            {showCount && (
-              <span className={countClassName} style={{ letterSpacing: 1 }}>
-                {filteredItems.length} of {totalCount}
-              </span>
-            )}
-            {layoutOptions && (
-              <div className="flex items-center gap-4">
-                {layoutOptions.map((opt) => (
-                  <span
-                    key={opt.value}
-                    onClick={() => setLayout(opt.value)}
-                    className={`${layoutClassName} cursor-pointer select-none ${layout === opt.value ? stripActiveClassName : stripRestClassName}`}
-                    style={{ letterSpacing: 1 }}
-                  >
-                    {opt.label}
-                  </span>
-                ))}
-              </div>
-            )}
-          </div>
         </div>
       )}