@kolkrabbi/kol-component 0.55.0 → 0.57.0

package/package.json

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

@@ -1,9 +1,10 @@
-import { useState, useMemo, useRef, useEffect } from 'react'
+import { useState, useMemo } from 'react'
 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 SearchInput from '../molecules/SearchInput.jsx'
 import IconFrame from '../atoms/IconFrame.jsx'
 
 /**
@@ -54,6 +55,16 @@ const ContentFilters = ({
   defaultViewMode = 'list',
   layoutOptions,
   defaultLayout = 'grid',
+  /* WHERE the LIST/GRID strip sits — the two arrangements kol-monitor and
+   * kol-website each settled on, made interchangeable (user ruling 2026-08-15).
+   *
+   *   'below'   header carries RECENT/SAVED; LIST/GRID sits below the divider
+   *             beside the count. monitor's shape, and the default.
+   *   'header'  LIST/GRID rides the header row instead.
+   *
+   * "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',
   onFilterChange,
   mutuallyExclusiveFilters = [],
   customFilterKeys = [],
@@ -89,11 +100,7 @@ const ContentFilters = ({
   const [layout, setLayout] = useState(defaultLayout)
   const [searchOpen, setSearchOpen] = useState(false)
   const [searchText, setSearchText] = useState('')
-  const searchRef = useRef(null)
 
-  useEffect(() => {
-    if (searchOpen && searchRef.current) searchRef.current.focus()
-  }, [searchOpen])
 
   const toggleFilter = (filterType, value) => {
     const newFilters = new Set(activeFilters)
@@ -172,8 +179,28 @@ 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 layoutStrip = 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>
+  ) : null
+
   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").
@@ -187,7 +214,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}
@@ -235,46 +262,24 @@ const ContentFilters = ({
                 * 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"
-              style={{
-                height: 32,
-                width: searchOpen ? 200 : 32,
-                background: searchOpen ? 'var(--kol-surface-secondary)' : 'transparent',
-                border: 'none',
-                overflow: 'hidden',
-              }}
-              onClick={() => {
-                if (searchOpen) { setSearchOpen(false); setSearchText('') }
-                else setSearchOpen(true)
-              }}
-            >
-              {/* Same fake-button defect as the title icon: a decorative glyph
-                * wearing kol-btn chrome. The clickable thing is the wrapper
-                * div, not this span. */}
-              <span
-                className="kol-expand-content flex items-center justify-center flex-shrink-0"
-                style={{
-                  opacity: searchOpen ? 0 : 1,
-                  position: searchOpen ? 'absolute' : 'relative',
-                }}
-              >
-                <IconSeam name="search" size={glyphSize('md', true)} />
-              </span>
-              {searchOpen && (
-                <input
-                  ref={searchRef}
-                  type="text"
-                  value={searchText}
-                  onChange={(e) => setSearchText(e.target.value)}
-                  onClick={(e) => e.stopPropagation()}
-                  placeholder=""
-                  className="bg-transparent outline-none kol-helper-12 flex-1 text-fg-80 caret-current px-4"
-                  onBlur={() => { if (!searchText) setSearchOpen(false) }}
-                  onKeyDown={(e) => { if (e.key === 'Escape') { setSearchOpen(false); setSearchText('') } }}
-                />
-              )}
-            </div>
+            {/* THE SEARCH IS `SearchInput expanding` — the DS component, fully
+              * round, the same pill the nav shelf uses (user ruling
+              * 2026-08-15). This organism hand-rolled its own: a rounded-sm box
+              * with its own width animation, its own input, its own Escape and
+              * blur handling — a second search field the DS could not see, in
+              * a different shape from the one every other surface serves.
+              *
+              * Open state stays HERE because the filter row reads it (the count
+              * shows while searching); SearchInput takes it controlled. */}
+            <SearchInput
+              expanding
+              open={searchOpen}
+              onOpenChange={(next) => { setSearchOpen(next); if (!next) setSearchText('') }}
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
+              expandedWidth={200}
+              triggerLabel="Search"
+            />
             {headerActions}
           </div>
           {activeFilters.size > 0 && (
@@ -289,34 +294,7 @@ 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>
-          )}
+          {layoutPlacement === 'header' && layoutStrip}
           {/* 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`,
@@ -355,9 +333,9 @@ const ContentFilters = ({
         * 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))}
-            {isExpanded && activeFilters.size > 0 && (
+          <div className="flex min-w-0 flex-1 items-start gap-16">
+            {filterGroups.map((group) => renderFilterGroup(group))}
+            {activeFilters.size > 0 && (
               <button
                 type="button"
                 onClick={clearAllFilters}
@@ -368,6 +346,21 @@ const ContentFilters = ({
               </button>
             )}
           </div>
+
+          {/* BELOW the divider: the count, and LIST/GRID when the arrangement
+            * puts it here. The count is a report of what the filters did, so it
+            * lives with them and appears only while they are open — unfiltered
+            * it always reads "N of N", a number that has never told anyone
+            * anything. Ink stays `text-fg-64`: static information, not a
+            * toggle, so it takes neither the 96 active nor the 32 rest. */}
+          <div className="flex flex-shrink-0 flex-col items-end gap-4">
+            {showCount && (
+              <span className={countClassName} style={{ letterSpacing: 1 }}>
+                {filteredItems.length} of {totalCount}
+              </span>
+            )}
+            {layoutPlacement === 'below' && layoutStrip}
+          </div>
         </div>
       )}