@kolkrabbi/kol-component 0.59.0 → 0.60.0

package/package.json

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

@@ -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 = '',
@@ -115,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}
           />
@@ -149,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('')
 
@@ -294,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>