@kolkrabbi/kol-shell 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": false,
   "description": "KOL application shell — fixed 48px NavRail + AppShell layout root, PageShell/PageHeader scaffolds, ContentFilters catalog organism, GridCard, SettingsScaffold, WalkthroughPanel, ShortcutsOverlay. App chrome (kol-framework owns site chrome). Nav items, content, shortcuts and settings are consumer-injected. Sits above @kolkrabbi/kol-{theme,component,framework}.",
   "license": "MIT",

package/src/ContentFilters.jsx

@@ -1,5 +1,5 @@
 import { useState, useMemo, useRef, useEffect } from 'react'
-import { Tag, Divider } from '@kolkrabbi/kol-component'
+import { Divider } from '@kolkrabbi/kol-component'
 import { Icon } from '@kolkrabbi/kol-icons'
 import TabStrip from './TabStrip.jsx'
 
@@ -132,29 +132,31 @@ const ContentFilters = ({
     })
   }, [items, activeFilters, customFilterKeys, searchText, searchKeys])
 
-  const renderFilterGroup = (group) => (
-    <div key={group.key}>
-      <h4 className="kol-helper-12 text-fg-48">{group.label}</h4>
-      <div className="flex flex-wrap gap-2 pt-3">
-        {group.values.map((value) => {
-          const filterKey = `${group.key}:${value}`
-          const isActive = activeFilters.has(filterKey)
+  // Filter values wear the LIST/GRID strip idiom, not Tag chips — user ruling
+  // 2026-08-15 ("TAGS should be same style as LIST and GRID"). Label and values
+  // sit on ONE line so the group shares the row with the layout strip.
+  const renderFilterGroup = (group) => {
+    const prefix = `${group.key}:`
+    const selected = new Set(
+      Array.from(activeFilters)
+        .filter((f) => f.startsWith(prefix))
+        .map((f) => f.slice(prefix.length))
+    )
 
-          return (
-            <div key={value} onClick={() => toggleFilter(group.key, value)}>
-              <Tag
-                size="sm"
-                variant="default"
-                className={isActive ? 'border-fg-32' : 'border-fg-08'}
-              >
-                {value}
-              </Tag>
-            </div>
-          )
-        })}
+    return (
+      <div key={group.key} className="flex items-center gap-4">
+        <h4 className="kol-helper-12 text-fg-48">{group.label}</h4>
+        <TabStrip
+          options={group.values.map((v) => ({ value: v, label: v }))}
+          value={selected}
+          onChange={(v) => toggleFilter(group.key, v)}
+          size={12}
+          tracked
+          className="gap-4"
+        />
       </div>
-    </div>
-  )
+    )
+  }
 
   return (
     <div className="w-full" style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
@@ -231,9 +233,29 @@ const ContentFilters = ({
           {viewModeOptions && (
             <TabStrip options={viewModeOptions} value={viewMode} onChange={handleViewModeChange} tracked />
           )}
-          {/* Layout toggle sits at the divider level, right-aligned — below the
-              groups it got pushed down the page whenever they expanded
-              (ShellHeaderFilterRefinements, 2026-08-15) */}
+        </div>
+      </div>
+
+      <Divider className="mb-4" />
+
+      {/* ONE row BELOW the divider: filter groups on the LEFT (only while the
+          filter toggle is open), layout strip on the RIGHT and ALWAYS visible.
+          0.1.1 read "at the divider level" as the header row above it — the
+          filer's verdict corrected that; the strip never belongs in the header
+          (ShellHeaderFilterRefinements, 2026-08-15). */}
+      {(layoutOptions || isExpanded) && (
+        <div className="flex items-center justify-between gap-16 mb-4">
+          <div className="flex items-center gap-16">
+            {isExpanded && filterGroups.map((group) => renderFilterGroup(group))}
+            {isExpanded && activeFilters.size > 0 && (
+              <button
+                onClick={clearAllFilters}
+                className="kol-helper-12 transition-colors underline text-fg-48"
+              >
+                Clear all ({activeFilters.size})
+              </button>
+            )}
+          </div>
           {layoutOptions && (
             <TabStrip
               options={layoutOptions}
@@ -245,23 +267,6 @@ const ContentFilters = ({
             />
           )}
         </div>
-      </div>
-
-      <Divider className="mb-4" />
-
-      {isExpanded && (
-        <div className="flex items-start gap-16">
-          {filterGroups.map((group) => renderFilterGroup(group))}
-          {activeFilters.size > 0 && (
-            <button
-              onClick={clearAllFilters}
-              className="kol-helper-12 transition-colors underline text-fg-48"
-              style={{ marginLeft: 'auto' }}
-            >
-              Clear all ({activeFilters.size})
-            </button>
-          )}
-        </div>
       )}
 
       {/* Render filtered items */}

package/src/TabStrip.jsx

@@ -8,16 +8,25 @@
  * want GRID). `tracked` adds the 1px letter-spacing the view-mode strips
  * carried.
  *
+ * `value` takes a **Set** for a multi-select strip (ContentFilters' filter
+ * values, ruled 2026-08-15 to wear this exact idiom rather than Tag chips) or
+ * a scalar for the single-select tabs. One ink recipe, both behaviours — the
+ * alternative was a second copy of the active/rest classes, which is how the
+ * two shipped shells drifted in the first place.
+ *
  * @param {Array} props.options  `[{ value, label }]`
+ * @param {Set|*} props.value    Set → multi-select · scalar → single-select
  */
 export default function TabStrip({ options = [], value, onChange, size = 14, tracked = false, className = 'gap-6', style }) {
+  const isOn = (opt) => (value instanceof Set ? value.has(opt.value) : value === opt.value)
+
   return (
     <div className={`flex items-center ${className}`.trim()} style={style}>
       {options.map((opt) => (
         <span
           key={opt.value}
           onClick={() => onChange?.(opt.value)}
-          className={`kol-helper-${size} cursor-pointer select-none ${value === opt.value ? 'text-fg-96' : 'text-fg-32 hover:text-fg-48'}`}
+          className={`kol-helper-${size} cursor-pointer select-none ${isOn(opt) ? 'text-fg-96' : 'text-fg-32 hover:text-fg-48'}`}
           style={tracked ? { letterSpacing: 1 } : undefined}
         >
           {opt.label}