@kolkrabbi/kol-component 0.54.0 → 0.56.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.54.0",
+  "version": "0.56.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'
 
 /**
@@ -171,8 +172,13 @@ const ContentFilters = ({
    * as the component tier's ONE documented exception to the no-casing law,
    * because a filter value is data with no authoring site. Consumers must not
    * uppercase these themselves. */
+  /* A group either STACKS its values in a narrow column or WRAPS them across
+   * the room it is given (`group.stack`). Both shapes are live on kol-website's
+   * /work: a short closed set like Type reads as a column you scan down, while
+   * ~45 tags must wrap or they run off the page. One shape for both meant the
+   * short group ate a full row it did not need. */
   const renderFilterGroup = (group) => (
-    <div key={group.key} className="flex flex-col gap-3">
+    <div key={group.key} className={`flex flex-col gap-3 ${group.stack ? 'shrink-0' : 'min-w-0 flex-1'}`}>
       {/* THE CATEGORY LABEL IS THE ACTIVE INK — `kol-helper-12` at `text-fg-96`,
         * the same full opacity a SELECTED layout item wears (user ruling
         * 2026-08-15: "TAGS and other categories are ACTIVE state full opacity").
@@ -186,7 +192,7 @@ const ContentFilters = ({
       <h4 className={labelClassName} style={labelUppercase ? { textTransform: 'uppercase' } : undefined}>
         {group.label}
       </h4>
-      <div className="flex flex-wrap gap-4">
+      <div className={group.stack ? 'flex flex-col items-start gap-2' : 'flex flex-wrap gap-2'}>
         {group.values.map((value) => (
           <Tag
             key={value}
@@ -228,7 +234,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 +264,7 @@ const ContentFilters = ({
                   position: searchOpen ? 'absolute' : 'relative',
                 }}
               >
-                <IconSeam name="search" size={16} />
+                <IconSeam name="search" size={glyphSize('md', true)} />
               </span>
               {searchOpen && (
                 <input
@@ -284,6 +294,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 +350,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 +373,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>
       )}