@kolkrabbi/kol-component 0.58.0 → 0.60.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.58.0",
+  "version": "0.60.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/molecules/SearchInput.jsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
+import { glyphSize } from '../hooks/glyphLadders.js'
 
 /**
  * SearchInput — controlled search field on the .kol-control shell. The
@@ -42,8 +43,29 @@ import { Icon } from '@kolkrabbi/kol-icons'
  * @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 = '',
@@ -76,6 +98,9 @@ export default function SearchInput({
     if (expanding && isOpen) inputRef.current?.focus()
   }, [expanding, isOpen])
 
+  /* the pinned squares, 05-control-chrome.md — sm 28 · md 32 · lg 36 */
+  const square = { sm: 28, md: 32, lg: 36 }[size] ?? 32
+
   if (expanding) {
     return (
       <div
@@ -84,20 +109,23 @@ export default function SearchInput({
            filter icon it sits beside. `bg-fg-04` was unconditional, so the
            collapsed pill rendered as a filled circle next to a bare glyph and
            the pair looked like two different kinds of control. */
-        className={`kol-expand flex items-center rounded-full h-9 ${isOpen ? 'bg-fg-04' : ''} ${className}`.trim()}
-        /* motion is `.kol-expand` in kol-theme; only the WIDTH is per-instance */
-        style={{ width: isOpen ? expandedWidth : 36 }}
+        /* THE SQUARE FOLLOWS THE LADDER, and it follows `size` like every other
+           control: sm 28 · md 32 · lg 36 (hooks/glyphLadders.js). This was a
+           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 }}
       >
         <button
           type="button"
-          className={`flex items-center justify-center w-9 h-9 rounded-full text-auto flex-shrink-0 border border-transparent ${isOpen ? '' : 'transition-colors hover:border-fg-12'}`}
+          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, md rung — a 36px trigger is the md square and takes
-              a 20px glyph, not the sm rung's 16 */}
-          <Icon name="search" size={20} className="text-fg-80" />
+          {/* SOLO ladder — the glyph moves WITH the square, never independently */}
+          <Icon name="search" size={glyphSize(size, true)} className="text-oq-80" />
         </button>
         {isOpen && (
           <input
@@ -108,7 +136,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 pr-4 min-w-0 appearance-none [&::-webkit-search-cancel-button]:hidden`}
             onKeyDown={(e) => { if (e.key === 'Escape') setOpen(false) }}
             {...inputProps}
           />
@@ -142,7 +170,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).
    *
@@ -95,9 +100,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('')
 
@@ -237,7 +242,18 @@ const ContentFilters = ({
      * child refuses to shrink past its content, so a scrollable body pushed
      * the whole card taller instead of scrolling inside it. */
     <div className={`w-full ${className}`.trim()} style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
-      <div className="flex items-center justify-between mb-4">
+      {/* ONE VERTICAL RHYTHM for the whole block, chosen together instead of
+        * four independent literals (header mb-4, divider mb-4, strip row pb-4,
+        * body mt-8 — none of which knew about the others):
+        *
+        *   header  → divider   12  the divider belongs TO the header, close
+        *   divider → strip     12  same, it belongs to what follows
+        *   strip   → content   24  the one real break, wall starts here
+        *
+        * 12/12/24 on the --kol-spacing-* rungs. The old 16/16/32 spaced the
+        * divider equally from both sides, so it read as a free-floating line
+        * rather than the header's own baseline. */}
+      <div className="flex items-center justify-between" style={{ marginBottom: 'var(--kol-spacing-3)' }}>
         <div className="flex items-center gap-6">
           {/* IconFrame, NOT a kol-btn span: this is decoration and clicks
             * nothing, so it must not wear a button's chrome. The atom exists
@@ -249,19 +265,23 @@ const ContentFilters = ({
           </h2>
           <Divider variant="vertical" className="self-stretch py-1" />
           <div className="flex items-center gap-1">
-            <button
-              type="button"
+            {/* IconFrame, not a kol-btn with its chrome cancelled inline.
+              * 05-control-chrome.md:109 — "any icon-only control in chrome is
+              * IconFrame; nothing hand-writes the square". This wore
+              * `kol-btn-md kol-btn-icon` and then removed the background, the
+              * border and the colour by inline style, which is the whole button
+              * paid for and thrown away — and it left the control with no
+              * states at all while the search beside it had hover.
+              *
+              * `nav` rests at oq-64 and lights to full ink when the panel is
+              * open, so the toggle finally SHOWS that it is on. */}
+            <IconFrame
+              name="filter"
+              variant={isExpanded ? 'primary' : 'nav'}
+              size="md"
               onClick={() => setIsExpanded(!isExpanded)}
-              className="kol-btn kol-btn-md kol-btn-icon"
               aria-label="Toggle filters"
-              style={{ background: 'transparent', border: 'none', cursor: 'pointer', color: 'inherit' }}
-            >
-              {/* 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>
+            />
             {/* 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
@@ -279,6 +299,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>
@@ -321,7 +347,9 @@ const ContentFilters = ({
         </div>
       </div>
 
-      <Divider className="mb-4" />
+      {/* Divider takes className, NOT style — a style prop here is silently
+        * dropped, which is how this margin nearly went missing. */}
+      <Divider className="mb-3" />
 
       {/* BELOW the divider: the filter GROUPS only. Left-aligned columns —
         * label above values — visible only while the filter toggle is open.
@@ -337,7 +365,7 @@ const ContentFilters = ({
         * the whole row on `isExpanded` hid the strip until you opened filters,
         * which is not a state anyone would guess at. */}
       {(isExpanded || (layoutPlacement === 'below' && layoutStrip)) && (
-        <div className="flex items-start justify-between gap-16 pb-4">
+        <div className="flex items-start justify-between gap-16">
           <div className="flex min-w-0 flex-1 items-start gap-16">
             {isExpanded && filterGroups.map((group) => renderFilterGroup(group))}
             {isExpanded && activeFilters.size > 0 && (
@@ -369,7 +397,7 @@ const ContentFilters = ({
         </div>
       )}
 
-      <div className="mt-8" style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
+      <div style={{ marginTop: 'var(--kol-spacing-6)', display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
         {renderItem(filteredItems, viewMode, layout)}
       </div>
     </div>