@kolkrabbi/kol-component 0.59.0 → 0.61.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.59.0",
+  "version": "0.61.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",
@@ -30,7 +30,7 @@
     "@floating-ui/react": "^0.27.19",
     "embla-carousel-react": "^8.6.0",
     "react-syntax-highlighter": "^16.1.1",
-    "@kolkrabbi/kol-icons": "^0.17.0"
+    "@kolkrabbi/kol-icons": "^0.18.0"
   },
   "peerDependencies": {
     "framer-motion": "^12.0.0",

package/src/molecules/SearchInput.jsx

@@ -43,8 +43,29 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  * @param {string}   className    extra classes on the shell
  */
 
+/* ONE type system and ONE glyph system for the whole component.
+ *
+ * It had two of each. The chromed path typed on `kol-mono-*` while the
+ * expanding path typed on `kol-helper-*`; the chromed path drew a FLAT 14px
+ * glyph at every size (`{ sm: 14, md: 14 }` — a size table that does not size)
+ * while the expanding path read the SOLO ladder. So the same component
+ * rendered two different fields depending on which branch you hit, and neither
+ * matched the IconFrame sitting next to it.
+ *
+ * Type is the mono ramp — a search field holds a query that can wrap, and
+ * `kol-helper-*` is line-height-1 chrome.
+ *
+ * The GLYPH READS BOTH LADDERS, because this component has both cases and they
+ * are the exact split `glyphLadders.js` exists for:
+ *
+ *   SOLO      the collapsed `expanding` trigger — a glyph ALONE in a pinned
+ *             square, nothing beside it. 16 / 20 / 24.
+ *   ADJACENT  the leading glyph inside an open field, sitting in the input's
+ *             line box beside the query text. 14 / 16 / 18.
+ *
+ * The flat `{ sm: 14, md: 14 }` it used to carry was the ADJACENT sm rung
+ * frozen for both sizes — right ladder, no size. */
 const SIZE_TYPE = { sm: 'kol-mono-12', md: 'kol-mono-14' }
-const ICON_SIZE = { sm: 14, md: 14 }
 
 export default function SearchInput({
   value = '',
@@ -79,10 +100,32 @@ export default function SearchInput({
 
   /* the pinned squares, 05-control-chrome.md — sm 28 · md 32 · lg 36 */
   const square = { sm: 28, md: 32, lg: 36 }[size] ?? 32
+  /* THE OPEN FIELD IS SHORTER THAN THE TRIGGER'S HIT AREA. The square is the
+   * click target and it is INVISIBLE at rest (no fill), so the pill does not
+   * have to inherit its height — at 32 the field read as a chunky input beside
+   * two bare glyphs. It sits one rung down and centres inside the same box. */
+  const fieldH = square - 4
+
+  /* Escape closes, and so does clicking away — a field that can only be closed
+   * by emptying it and blurring is a trap, and this one had neither wired. The
+   * listener only exists while open. */
+  const shellRef = useRef(null)
+  useEffect(() => {
+    if (!expanding || !isOpen) return undefined
+    const away = (e) => { if (shellRef.current && !shellRef.current.contains(e.target)) setOpen(false) }
+    const esc = (e) => { if (e.key === 'Escape') setOpen(false) }
+    document.addEventListener('mousedown', away)
+    document.addEventListener('keydown', esc)
+    return () => {
+      document.removeEventListener('mousedown', away)
+      document.removeEventListener('keydown', esc)
+    }
+  }, [expanding, isOpen])
 
   if (expanding) {
     return (
       <div
+        ref={shellRef}
         /* THE FILL BELONGS TO THE FIELD, NOT THE TRIGGER. At rest this is a
            glyph you click, and it must read as one — bare, exactly like the
            filter icon it sits beside. `bg-fg-04` was unconditional, so the
@@ -93,19 +136,27 @@ export default function SearchInput({
            hardcoded 36 — the LG square — so an expanding search sat beside a
            `kol-btn-md` filter button at two different sizes. */
         className={`kol-expand flex items-center rounded-full ${isOpen ? 'bg-fg-04' : ''} ${className}`.trim()}
-        style={{ height: square, width: isOpen ? expandedWidth : square }}
+        style={{ height: isOpen ? fieldH : square, width: isOpen ? expandedWidth : square }}
       >
-        <button
-          type="button"
-          className={`flex items-center justify-center rounded-full text-auto flex-shrink-0 border border-transparent ${isOpen ? '' : 'transition-colors hover:border-oq-16'}`}
-          style={{ width: square, height: square }}
-          onClick={() => !isOpen && setOpen(true)}
-          aria-label={triggerLabel}
-          aria-expanded={isOpen}
-        >
-          {/* SOLO ladder — the glyph moves WITH the square, never independently */}
-          <Icon name="search" size={glyphSize(size, true)} className="text-oq-80" />
-        </button>
+        {/* THE GLYPH IS THE CLOSED STATE, and only that (user ruling
+            2026-08-15). Once the field is open the caret is the affordance;
+            keeping the magnifier there spends the widest part of the pill
+            restating what the blinking cursor already says. */}
+        {!isOpen && (
+          <button
+            type="button"
+            className="flex items-center justify-center rounded-full text-auto flex-shrink-0 border border-transparent transition-colors hover:border-oq-16"
+            style={{ width: square, height: square }}
+            onClick={() => setOpen(true)}
+            aria-label={triggerLabel}
+            aria-expanded={false}
+          >
+            {/* SOLO ladder, and NO ink class — it inherits from its chrome
+                exactly as IconFrame's glyph does, so it cannot drift from the
+                icon beside it. */}
+            <Icon name="search" size={glyphSize(size, true)} />
+          </button>
+        )}
         {isOpen && (
           <input
             ref={inputRef}
@@ -115,7 +166,7 @@ export default function SearchInput({
             readOnly={!onChange || undefined}
             placeholder={placeholder}
             spellCheck={false}
-            className="bg-transparent outline-none kol-helper-14 flex-1 text-fg-80 caret-current pr-4 min-w-0 appearance-none [&::-webkit-search-cancel-button]:hidden"
+            className={`bg-transparent outline-none ${SIZE_TYPE[size] ?? SIZE_TYPE.md} flex-1 text-oq-80 caret-current px-4 min-w-0 appearance-none [&::-webkit-search-cancel-button]:hidden`}
             onKeyDown={(e) => { if (e.key === 'Escape') setOpen(false) }}
             {...inputProps}
           />
@@ -149,7 +200,8 @@ export default function SearchInput({
         aria-hidden="true"
         className={`flex items-center shrink-0 ${bare ? 'text-fg-48' : 'text-auto opacity-50'}`}
       >
-        <Icon name="search" size={ICON_SIZE[size] ?? 14} />
+        {/* ADJACENT — this glyph sits in the field's line box beside the query */}
+        <Icon name="search" size={glyphSize(size)} />
       </span>
       <input
         type="search"

package/src/organisms/ContentFilters.jsx

@@ -21,7 +21,7 @@ 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 {string} props.defaultViewMode — default view mode (default: 'list')
+ * @param {string} props.defaultViewMode — default view mode (falls back to the FIRST option)
  * @param {Function} props.onFilterChange — optional callback when filters change
  * @param {Array} props.mutuallyExclusiveFilters — filter keys that should be mutually exclusive
  * @param {Array} props.customFilterKeys — filter keys handled by renderItem, not by ContentFilters
@@ -52,9 +52,14 @@ const ContentFilters = ({
   viewModeOptions,
   viewMode: viewModeProp,
   onViewModeChange,
-  defaultViewMode = 'list',
+  /* NO literal default. A strip always has exactly one active item, so the
+   * fallback must be the FIRST OPTION, not a guess — `'list'` matched nothing
+   * in a RECENT/SAVED strip, so any consumer that passed options without also
+   * passing a default rendered BOTH items in the rest state and the strip
+   * looked broken rather than unset. Same for `defaultLayout`. */
+  defaultViewMode,
   layoutOptions,
-  defaultLayout = 'grid',
+  defaultLayout,
   /* WHERE the LIST/GRID strip sits — the two arrangements kol-monitor and
    * kol-website each settled on, made interchangeable (user ruling 2026-08-15).
    *
@@ -76,8 +81,12 @@ const ContentFilters = ({
   /* THE LOOK SEAMS. Every one defaults to what the component shipped, so
    * passing nothing renders exactly as before — these exist because the
    * hardcoded values were the wrong call for every consumer but one. */
+  /* The title is the SAME as RECENT/SAVED (user ruling 2026-08-15) — same
+   * rung, same casing, same tracking. It sits at the other end of the same
+   * row, so a different treatment reads as two unrelated things rather than
+   * one strip of chrome. */
   titleClassName = 'kol-helper-14',
-  titleUppercase = false,
+  titleUppercase = true,
   labelClassName = 'kol-helper-12 text-fg-96',
   labelUppercase = true,
   tagVariant = 'primary',
@@ -86,8 +95,13 @@ const ContentFilters = ({
   tagRestClassName = 'text-fg-48',
   viewClassName = 'kol-helper-14',
   layoutClassName = 'kol-helper-12',
-  stripActiveClassName = 'text-fg-96',
-  stripRestClassName = 'text-fg-32 hover:text-fg-48',
+  /* REST WAS TOO DARK (user ruling 2026-08-15). `fg-32` is a third of the ink
+   * and read as DISABLED rather than unselected — the same complaint the
+   * IconFrame `nav` variant already settled ("the dimmed row read as disabled
+   * beside the ThemeToggle"). Rest is now the ghost rung, oq-48, and the whole
+   * pair moves to the opaque tier so it never washes out over a tinted surface. */
+  stripActiveClassName = 'text-oq-96',
+  stripRestClassName = 'text-oq-48 hover:text-oq-64',
   countClassName = 'kol-helper-12 text-fg-64',
 }) => {
   /* Icon seam — consumers on a local icon shelf pass their own component
@@ -95,9 +109,9 @@ const ContentFilters = ({
   const IconSeam = iconComponent || Icon
   const [activeFilters, setActiveFilters] = useState(new Set())
   const [isExpanded, setIsExpanded] = useState(false)
-  const [internalViewMode, setInternalViewMode] = useState(defaultViewMode)
+  const [internalViewMode, setInternalViewMode] = useState(defaultViewMode ?? viewModeOptions?.[0]?.value)
   const viewMode = viewModeProp !== undefined ? viewModeProp : internalViewMode
-  const [layout, setLayout] = useState(defaultLayout)
+  const [layout, setLayout] = useState(defaultLayout ?? layoutOptions?.[0]?.value ?? 'grid')
   const [searchOpen, setSearchOpen] = useState(false)
   const [searchText, setSearchText] = useState('')
 
@@ -256,7 +270,7 @@ const ContentFilters = ({
             * states"); the span here was the same defect that promoted it. */}
           <h2 className="flex items-center gap-2">
             {titleIcon && <IconFrame name={titleIcon} variant="secondary" size="md" />}
-            <span className={titleClassName} style={titleUppercase ? { textTransform: 'uppercase' } : undefined}>{title}</span>
+            <span className={titleClassName} style={titleUppercase ? { textTransform: 'uppercase', letterSpacing: 1 } : undefined}>{title}</span>
           </h2>
           <Divider variant="vertical" className="self-stretch py-1" />
           <div className="flex items-center gap-1">
@@ -270,9 +284,16 @@ const ContentFilters = ({
               *
               * `nav` rests at oq-64 and lights to full ink when the panel is
               * open, so the toggle finally SHOWS that it is on. */}
+            {/* MD — 32px square, 20px glyph (user ruling 2026-08-15). The
+              * squares are 28 · 32 · 36, so 32 is the MIDDLE rung, not a large
+              * one; the search beside it takes the same. */}
             <IconFrame
               name="filter"
-              variant={isExpanded ? 'primary' : 'nav'}
+              /* `nav` ALWAYS — no container. The open state is the panel
+               * appearing below; painting a filled square behind the glyph as
+               * well says the same thing twice and puts a box in a row that
+               * has none. */
+              variant="nav"
               size="md"
               onClick={() => setIsExpanded(!isExpanded)}
               aria-label="Toggle filters"
@@ -294,6 +315,12 @@ const ContentFilters = ({
               onChange={(e) => setSearchText(e.target.value)}
               expandedWidth={200}
               triggerLabel="Search"
+              /* NO placeholder. The field opens from a glyph you just clicked —
+               * the caret is the affordance, and a greyed "Search…" sitting in
+               * a 200px pill is the widest thing in the header saying the least.
+               * The organism's own field never had one. */
+              placeholder=""
+              size="md"
             />
             {headerActions}
           </div>
@@ -375,7 +402,9 @@ const ContentFilters = ({
             * 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">
+          {/* ONE LINE — the count sits BESIDE LIST/GRID, not stacked above it.
+            * They are the same strip of chrome reading left to right. */}
+          <div className="flex flex-shrink-0 items-center gap-4">
             {showCount && isExpanded && (
               <span className={countClassName} style={{ letterSpacing: 1 }}>
                 {filteredItems.length} of {totalCount}