@kolkrabbi/kol-component 0.96.0 → 0.97.1

package/package.json

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

@@ -25,10 +25,10 @@ import { Icon } from '@kolkrabbi/kol-icons'
  * author strings in their final case at the call site.
  *
  * @param {ReactNode} title            header heading (kol-helper-16)
- * @param {string}    icon             Icon name for the header (16px); also the 96px no-visual fallback
- * @param {string|ReactNode} visual    image URL, `.svg` mask URL, or inline node
+ * @param {string}    icon             Icon name for the header (16px)
+ * @param {string|ReactNode} visual    image URL, `.svg` mask URL, or inline node; NONE = a text-only tile (title + description, min-h 180, the .feature-card frame/hover)
  * @param {ReactNode} description      footer line (kol-mono-12, muted)
- * @param {string}    backgroundColor  card background utility class
+ * @param {string}    backgroundColor  card background utility class (default: bg-surface-primary with a visual, transparent text-only)
  * @param {string}    href             link target; `http*`/`mailto` → new tab, else plain same-tab anchor
  * @param {Function}  onNavigate       (event) => void — click seam on the same-tab anchor (SPA intercept)
  * @param {'auto'|'9/6'|'10/6'|'16/9'|'1/1'} imageAspectRatio  aspect class on the visual middle
@@ -39,7 +39,7 @@ export default function SectionCardItem({
   icon,
   visual,
   description,
-  backgroundColor = 'bg-surface-primary',
+  backgroundColor,
   href,
   onNavigate,
   imageAspectRatio = 'auto',
@@ -48,6 +48,11 @@ export default function SectionCardItem({
   style,
 }) {
   const isSvgUrl = typeof visual === 'string' && visual.endsWith('.svg')
+  /* TEXT-ONLY (FoundrySpecimenSections, 2026-08-27): no `visual` = a title +
+   * description tile — the frame and hover of kol-website's .feature-card, no
+   * 96px icon fallback. Hover only, never a persistent selected state. */
+  const textOnly = visual == null
+  const bg = backgroundColor ?? (textOnly ? 'bg-transparent' : 'bg-surface-primary')
 
   const aspectClasses = {
     'auto': '',
@@ -58,7 +63,15 @@ export default function SectionCardItem({
   }
   const aspectClass = aspectClasses[imageAspectRatio] || ''
 
-  const content = (
+  const content = textOnly ? (
+    <>
+      <div className="w-full flex items-start justify-between gap-2">
+        <h3 className="kol-helper-16">{title}</h3>
+        {icon && <Icon name={icon} size={16} className="shrink-0" />}
+      </div>
+      <p className="kol-mono-12 text-fg-48">{description}</p>
+    </>
+  ) : (
     <>
       <div className="w-full flex items-center justify-between gap-2">
         <h3 className="kol-helper-16">{title}</h3>
@@ -106,7 +119,9 @@ export default function SectionCardItem({
     </>
   )
 
-  const baseClasses = `kol-card-feature w-full flex-1 h-[304px] md:h-72 p-4 md:p-6 gap-4 ${backgroundColor} rounded border border-fg-08 flex flex-col justify-between items-start overflow-hidden ${className}`.trim()
+  const baseClasses = textOnly
+    ? `kol-card-feature kol-card-feature--text w-full flex-1 min-h-[180px] p-4 md:p-5 lg:p-6 gap-2 ${bg} rounded border border-fg-08 flex flex-col justify-between items-start overflow-hidden ${className}`
+    : `kol-card-feature w-full flex-1 h-[304px] md:h-72 p-4 md:p-6 gap-4 ${bg} rounded border border-fg-08 flex flex-col justify-between items-start overflow-hidden ${className}`.trim()
 
   if (href) {
     const isExternal = href.startsWith('http') || href.startsWith('mailto')

package/src/organisms/ColumnBrowser.jsx

@@ -151,6 +151,10 @@ export default function ColumnBrowser({
   const [picked, setPicked] = useState(null)
   // Keyboard cursor: which column, which row. Clicks keep it in sync.
   const [cursor, setCursor] = useState({ col: 0, idx: 0 })
+  /* the cursor is NOT drawn until the keyboard is used (ColumnBrowserCursorStart,
+   * kol-r2b2 2026-08-27): at rest it sat on row 0 beside the open folder and
+   * read as a second selection. Arrows arm it; a click seeds it. */
+  const [cursorActive, setCursorActive] = useState(false)
   const rootRef = useRef(null)
 
   const levelsOf = (pfx) => {
@@ -181,6 +185,7 @@ export default function ColumnBrowser({
     }
     if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) return
     e.preventDefault()
+    setCursorActive(true)
     const lv = levelsOf(prefix)
     const col = Math.min(cursor.col, lv.length - 1)
     const items = itemsAt(lv[col])
@@ -260,9 +265,9 @@ export default function ColumnBrowser({
                 icon="folder"
                 label={f.replace(/\/$/, '')}
                 active={f === activeFolder}
-                cursor={cursor.col === k && cursor.idx === i}
+                cursor={cursorActive && cursor.col === k && cursor.idx === i}
                 trailing={<Icon name="chevron-right" size={12} className="text-fg-32" />}
-                onClick={() => { setCursor({ col: k, idx: i }); rootRef.current?.focus(); setPicked(null); onPrefix(level + f) }}
+                onClick={() => { setCursor({ col: k, idx: i }); setCursorActive(true); rootRef.current?.focus(); setPicked(null); onPrefix(level + f) }}
               />
             ))}
             {files.map((o, i) => (
@@ -272,8 +277,8 @@ export default function ColumnBrowser({
                 label={o.displayKey ?? o.key}
                 muted={shown?.key !== o.key}
                 active={shown?.key === o.key}
-                cursor={cursor.col === k && cursor.idx === folders.length + i}
-                onClick={() => { setCursor({ col: k, idx: folders.length + i }); rootRef.current?.focus(); setPicked(o) }}
+                cursor={cursorActive && cursor.col === k && cursor.idx === folders.length + i}
+                onClick={() => { setCursor({ col: k, idx: folders.length + i }); setCursorActive(true); rootRef.current?.focus(); setPicked(o) }}
               />
             ))}
             {folders.length === 0 && files.length === 0 && (

package/src/organisms/ContentFilters.jsx

@@ -295,7 +295,8 @@ const ContentFilters = ({
             * 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">
+          {/* the icon gap matches the specimen header — 16 from md (FoundrySpecimenSections, 2026-08-27) */}
+          <h2 className="flex items-center gap-2 md:gap-4">
             {titleIcon && <IconFrame name={titleIcon} variant="secondary" size="md" />}
             {/* `pr-4` by rule (ContentFiltersTitleGap, kol-website 2026-08-27): the
               * divider sat 24px from the title's text edge but 32 from the