@kolkrabbi/kol-shell 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.1.0",
+  "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",
@@ -20,10 +20,10 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-component": "^0.38.0",
-    "@kolkrabbi/kol-icons": "^0.16.0",
-    "@kolkrabbi/kol-framework": "^0.20.0",
-    "@kolkrabbi/kol-theme": "^0.41.0"
+    "@kolkrabbi/kol-framework": "^0.20.1",
+    "@kolkrabbi/kol-icons": "^0.17.0",
+    "@kolkrabbi/kol-theme": "^0.42.2",
+    "@kolkrabbi/kol-component": "^0.43.0"
   },
   "files": [
     "src",

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="md"
-                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 }}>
@@ -236,33 +238,37 @@ const ContentFilters = ({
 
       <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>
+      {/* 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}
+              value={layout}
+              onChange={setLayout}
+              size={12}
+              tracked
+              className="gap-4"
+            />
           )}
         </div>
       )}
 
-      {/* Layout toggle */}
-      {layoutOptions && (
-        <TabStrip
-          options={layoutOptions}
-          value={layout}
-          onChange={setLayout}
-          size={12}
-          tracked
-          className="justify-end gap-4 mt-4"
-        />
-      )}
-
       {/* Render filtered items */}
       <div className="mt-8" style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
         {renderItem(filteredItems, viewMode, layout)}

package/src/PageHeader.jsx

@@ -7,7 +7,9 @@
 export default function PageHeader({ title, subtitle }) {
   return (
     <>
-      <h1 className="text-fg-96 kol-heading-sm">{title}</h1>
+      {/* gap inline, never in kol-heading-sm — margin in a shared type class
+          leaks estate-wide (ShellHeaderFilterRefinements, 2026-08-15) */}
+      <h1 className="text-fg-96 kol-heading-sm" style={{ marginBottom: 8 }}>{title}</h1>
       <p className="text-fg-48 kol-mono-14" style={{ marginBottom: 40 }}>{subtitle}</p>
     </>
   )

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}