@kolkrabbi/kol-component 0.15.2 → 0.19.0

package/src/molecules/ShellSearchOverlay.jsx

@@ -1,5 +1,6 @@
 import { useEffect, useId, useRef, useState } from 'react'
 import SearchInput from '../atoms/SearchInput.jsx'
+import Tag from '../atoms/Tag.jsx'
 
 /**
  * HighlightMatch — default row renderer: underlines the first
@@ -51,6 +52,15 @@ export default function ShellSearchOverlay({
   open,
   onClose,
   results = [],
+  /* EXPANDED — the palette's second state (user ruling 2026-08-01). Enter
+   * commits the query and opens `children` as the results body; the palette
+   * and the old tag overlay are one surface with two states, not two
+   * components. `chips` are the committed tag facets of the same query. */
+  expanded = false,
+  onExpand,
+  chips = [],
+  onRemoveChip,
+  children,
   query = '',
   onQueryChange,
   onSelect,
@@ -60,6 +70,9 @@ export default function ShellSearchOverlay({
   const listRef = useRef(null)
   const listId = useId()
   const [activeIndex, setActiveIndex] = useState(0)
+  /* Has the user actually chosen a row? See the Enter branch — without this,
+   * index 0 counts as a selection and Enter navigates somewhere unasked. */
+  const [navigated, setNavigated] = useState(false)
   const active = results.length > 0 ? Math.min(activeIndex, results.length - 1) : -1
 
   /* Focus in on open, restore the opener on close. querySelector instead of
@@ -73,7 +86,7 @@ export default function ShellSearchOverlay({
   }, [open])
 
   /* Roving row resets to the top on every query change / reopen. */
-  useEffect(() => { setActiveIndex(0) }, [query, open])
+  useEffect(() => { setActiveIndex(0); setNavigated(false) }, [query, open])
 
   /* Keep the active row visible inside the scrolling list. */
   useEffect(() => {
@@ -96,13 +109,21 @@ export default function ShellSearchOverlay({
       onClose?.()
     } else if (e.key === 'ArrowDown') {
       e.preventDefault()
+      setNavigated(true)
       setActiveIndex((i) => Math.min(i + 1, results.length - 1))
     } else if (e.key === 'ArrowUp') {
       e.preventDefault()
+      setNavigated(true)
       setActiveIndex((i) => Math.max(i - 1, 0))
-    } else if (e.key === 'Enter' && active >= 0) {
+    } else if (e.key === 'Enter') {
       e.preventDefault()
-      select(results[active])
+      /* Enter COMMITS the query and expands. It only selects when the user has
+       * actually arrowed to a row — `activeIndex` starts at 0, so "a row is
+       * highlighted" is true from the first keystroke and testing `active >= 0`
+       * made Enter navigate to whatever happened to be first. Committing a
+       * query must never be a navigation you didn't choose. */
+      if (navigated) select(results[active])
+      else onExpand?.()
     } else if (e.key === 'Tab') {
       /* Focus trap — the input is the palette's only tab stop. */
       e.preventDefault()
@@ -112,7 +133,7 @@ export default function ShellSearchOverlay({
   return (
     <div className="fixed inset-0 z-[300] flex items-start justify-center pt-[20vh]">
       <div
-        className="absolute inset-0 bg-black/60 backdrop-blur-[1px]"
+        className="absolute inset-0 kol-overlay-scrim"
         onClick={onClose}
         aria-hidden="true"
       />
@@ -121,13 +142,26 @@ export default function ShellSearchOverlay({
         role="dialog"
         aria-modal="true"
         aria-label="Search"
-        className="relative w-full max-w-lg mx-4 overflow-hidden bg-surface-primary border border-fg-08 rounded-[var(--kol-radius-2xl)] shadow-[0_20px_60px_rgba(0,0,0,0.4)]"
+        className={`kol-overlay-panel mx-4 ${expanded ? 'max-w-[var(--kol-content-panel)]' : 'max-w-lg'}`}
       >
+        {/* THE MODE, said out loud (user 2026-08-01: "how do you set search
+          * mode? theres no helper, message or mode clearly readble"). Two
+          * modes exist — FILTER (tags narrow a set) and FIND (a keyword jumps
+          * to a destination) — and the only signal was whether chips happened
+          * to be present. The chips ARE the mode, so they get a label. */}
+        {chips.length > 0 && (
+          <div className="flex flex-wrap items-center gap-1.5 px-4 pt-3">
+            <span className="kol-helper-10 text-fg-48 shrink-0">FILTERING BY</span>
+            {chips.map((t) => (
+              <Tag key={t} onRemove={() => onRemoveChip?.(t)}>{t}</Tag>
+            ))}
+          </div>
+        )}
         <SearchInput
           bare
           value={query}
           onChange={(e) => onQueryChange?.(e.target.value)}
-          placeholder={placeholder}
+          placeholder={chips.length > 0 ? 'Narrow these results…' : placeholder}
           onKeyDown={handleKeyDown}
           role="combobox"
           aria-expanded={results.length > 0}
@@ -135,7 +169,24 @@ export default function ShellSearchOverlay({
           aria-activedescendant={active >= 0 ? optionId(results[active]) : undefined}
         />
 
-        {results.length > 0 && (
+        {/* WHY THIS IS NOT `molecules/Dropdown` (asked 2026-08-01). Dropdown is
+          * a SELECT: a trigger, a `value`, `onChange(value)`, and rows that are
+          * options. This is a COMBOBOX — a text query filtering a live list
+          * whose rows carry a `group`, a `hint`, and may fire an `action`
+          * instead of selecting a value. Same ARIA family, different control.
+          * Folding one into the other would mean giving Dropdown a query, a
+          * hint slot and an action escape hatch, i.e. building this inside it.
+          *
+          * THE ROW CONTRACT (was documented nowhere):
+          *   label     the row's text, match-highlighted against the query
+          *   group     right-aligned origin — 'Atoms', 'Documentation', 'Tags'
+          *   hint      subtext shown when the LABEL was not what matched
+          *   href      a destination; dismisses the palette
+          *   action    a closure; runs and KEEPS the palette open (tag rows)
+          * Built by `buildShellSearchItems` (showcase/src/nav/shell-nav.js). */}
+        {expanded ? (
+          <div className="border-t border-fg-08 max-h-[70vh] overflow-y-auto">{children}</div>
+        ) : results.length > 0 && (
           <ul
             ref={listRef}
             id={listId}
@@ -151,7 +202,7 @@ export default function ShellSearchOverlay({
                 /* preventDefault keeps focus in the input through the click */
                 onMouseDown={(e) => e.preventDefault()}
                 onClick={() => select(item)}
-                onMouseEnter={() => setActiveIndex(i)}
+                onMouseEnter={() => { setActiveIndex(i); setNavigated(true) }}
                 className={`flex items-center gap-2 px-4 py-1.5 cursor-pointer kol-mono-14 transition-colors ${
                   i === active ? 'bg-fg-08 text-fg' : 'text-fg-64'
                 }`}

package/src/molecules/SpectrumControls.jsx

@@ -103,7 +103,7 @@ export function HueStrip({ hue, onChange }) {
       aria-valuenow={Math.round(hue)}
       onPointerDown={onDown}
       onKeyDown={onKeyDown}
-      className="relative rounded-[2px] cursor-pointer touch-none"
+      className="relative rounded-[var(--kol-radius-xs)] cursor-pointer touch-none"
       style={{ height: 12, background: HUE_GRADIENT }}
     >
       {/* Handle positions inside an inset region so 0..100% maps to the
@@ -118,7 +118,7 @@ export function HueStrip({ hue, onChange }) {
 /**
  * SBSquare — 2D saturation/value picker: white→hue horizontal gradient with
  * a black overlay fading upward, crosshair handle. Fills its container
- * (consumer owns the size — and the rounding: apply `rounded-[2px]
+ * (consumer owns the size — and the rounding: apply `rounded-[var(--kol-radius-xs)]
  * overflow-hidden` on the wrapper). Focus + arrow keys nudge: Left/Right =
  * saturation ±1, Up/Down = value ±1 (role="slider").
  *
@@ -174,7 +174,7 @@ export function SBSquare({ hue, sat, val, onChange }) {
 
   const sb = `linear-gradient(to bottom, transparent 0%, #000 100%), linear-gradient(to right, #fff 0%, hsl(${hue},100%,50%) 100%)`
   /* Gradient field is rectangular — rounding is the consumer's job (apply
-   * `rounded-[2px] overflow-hidden` on the wrapper). Putting border-radius
+   * `rounded-[var(--kol-radius-xs)] overflow-hidden` on the wrapper). Putting border-radius
    * on the gradient itself produces tiny antialiasing artifacts at the
    * corners; clipping via overflow-hidden on the parent is cleaner. */
   return (
@@ -480,7 +480,7 @@ function SvgHandle({ cx, cy, r = 2.4 }) {
 /**
  * SpectrumControls — the composed classic square picker: HueStrip stacked
  * over a fill-height SBSquare, per the source color panel's Hue mode layout
- * (SBSquare wrapped in `rounded-[2px] overflow-hidden`, see its comment).
+ * (SBSquare wrapped in `rounded-[var(--kol-radius-xs)] overflow-hidden`, see its comment).
  * Fills its container — the consumer owns the outer size. For the ring
  * picker, use WheelTriangle directly; the primitives are also exported for
  * custom layouts.
@@ -496,7 +496,7 @@ export default function SpectrumControls({ value, onChange }) {
   return (
     <div className="flex flex-col gap-3 w-full h-full min-h-0">
       <HueStrip hue={hue} onChange={(h) => onChange({ hue: h, sat, val })} />
-      <div className="flex-1 min-h-0 rounded-[2px] overflow-hidden">
+      <div className="flex-1 min-h-0 rounded-[var(--kol-radius-xs)] overflow-hidden">
         <SBSquare hue={hue} sat={sat} val={val} onChange={(s, v) => onChange({ hue, sat: s, val: v })} />
       </div>
     </div>

package/src/organisms/ContentFilters.jsx

@@ -4,6 +4,7 @@ import Divider from '../atoms/Divider.jsx'
 import Button from '../atoms/Button.jsx'
 import { Icon } from '@kolkrabbi/kol-icons'
 import ViewToggle from '../atoms/ViewToggle'
+import IconFrame from '../atoms/IconFrame.jsx'
 
 /**
  * ContentFilters — universal filter component for content grids.
@@ -43,6 +44,7 @@ const ContentFilters = ({
   searchKeys = ['label', 'name', 'title', 'type'],
   headerActions,
   showCountOnlyWhenFiltering = false,
+  className = '',
 }) => {
   const [activeFilters, setActiveFilters] = useState(new Set())
   const [isExpanded, setIsExpanded] = useState(false)
@@ -133,16 +135,19 @@ const ContentFilters = ({
   )
 
   return (
-    <div className="w-full" style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
+    /* minHeight 0 on both this root and the body below: without it a flex
+     * 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">
         <div className="flex items-center gap-6">
-          <h2 className="flex items-center gap-1">
-            {titleIcon && (
-              <span className="kol-btn kol-btn-secondary kol-btn-md kol-btn-icon">
-                <Icon name={titleIcon} size={20} />
-              </span>
-            )}
-            <span className="kol-btn kol-btn-md kol-helper-16">{title}</span>
+          {/* IconFrame, NOT a kol-btn span: this is decoration and clicks
+            * nothing, so it must not wear a button's chrome. The atom exists
+            * for exactly this (lobby ruling 2026-07-30 — "icons only, NO
+            * 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="kol-helper-16">{title}</span>
           </h2>
           <Divider variant="vertical" className="self-stretch py-1" />
           <div className="flex items-center gap-1">
@@ -170,8 +175,11 @@ const ContentFilters = ({
                 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-btn kol-btn-md kol-btn-icon flex items-center justify-center flex-shrink-0"
+                className="flex items-center justify-center flex-shrink-0"
                 style={{
                   opacity: searchOpen ? 0 : 1,
                   transition: 'opacity 300ms cubic-bezier(0.16, 1, 0.3, 1)',
@@ -260,7 +268,7 @@ const ContentFilters = ({
         </div>
       )}
 
-      <div className="mt-8" style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
+      <div className="mt-8" style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
         {renderItem(filteredItems, viewMode, layout)}
       </div>
     </div>

package/src/organisms/FeatureSplit.jsx

@@ -70,7 +70,7 @@ export default function FeatureSplit({
           {ctas && <div className="flex flex-wrap gap-4 pt-2">{ctas}</div>}
         </div>
         {media && (
-          <div className="kol-feature-split-visual relative aspect-[4/5] rounded-[4px] overflow-hidden">
+          <div className="kol-feature-split-visual relative aspect-[4/5] rounded-[var(--kol-radius-sm)] overflow-hidden">
             {media}
             {caption && <div className="kol-feature-split-visual-veil" aria-hidden="true" />}
             {caption && <span className="kol-feature-split-visual-caption">{caption}</span>}

package/src/organisms/GalleryCarousel.jsx

@@ -56,7 +56,7 @@ export default function GalleryCarousel({ media = [], title = '', defaultAspect
           return (
             <div
               key={item.url || i}
-              className="w-full overflow-hidden rounded-[2px] cursor-pointer"
+              className="w-full overflow-hidden rounded-[var(--kol-radius-xs)] cursor-pointer"
               style={{ aspectRatio: aspect }}
               onPointerDown={onPointerDown}
               onPointerMove={onPointerMove}