@kolkrabbi/kol-shell 0.1.3 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.1.3",
+  "version": "0.3.0",
   "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-framework": "^0.20.1",
     "@kolkrabbi/kol-icons": "^0.17.0",
+    "@kolkrabbi/kol-component": "^0.44.0",
     "@kolkrabbi/kol-theme": "^0.42.2",
-    "@kolkrabbi/kol-component": "^0.43.0"
+    "@kolkrabbi/kol-framework": "^0.20.1"
   },
   "files": [
     "src",

package/src/TabStrip.jsx

@@ -8,25 +8,22 @@
  * 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.
+ * SINGLE-SELECT ONLY. A `Set` form for multi-select was added 2026-08-15 so the
+ * retired ContentFilters fork could render filter values through this — and
+ * removed the same day with it. A multi-select, handler-carrying, active/rest
+ * chip is a `Tag`; building a second one here under another name in another
+ * package is exactly the duplication kol-shell exists to end.
  *
  * @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 ${isOn(opt) ? 'text-fg-96' : 'text-fg-32 hover:text-fg-48'}`}
+          className={`kol-helper-${size} cursor-pointer select-none ${value === opt.value ? 'text-fg-96' : 'text-fg-32 hover:text-fg-48'}`}
           style={tracked ? { letterSpacing: 1 } : undefined}
         >
           {opt.label}

package/src/index.js

@@ -14,7 +14,9 @@ export { NavHiddenContext, useNavHidden } from './navHidden.js'
 export { default as NavRail } from './NavRail.jsx'
 export { default as PageShell, PageBleed } from './PageShell.jsx'
 export { default as PageHeader } from './PageHeader.jsx'
-export { default as ContentFilters } from './ContentFilters.jsx'
+/* ContentFilters is NOT exported here — it lives in @kolkrabbi/kol-component,
+ * where it always did. This package shipped a recreated duplicate 0.1.0–0.2.0;
+ * retired 2026-08-15, quarantined in _tmp/. Import it from kol-component. */
 export { default as TabStrip } from './TabStrip.jsx'
 export { default as GridCard } from './GridCard.jsx'
 export { default as SettingsScaffold, SettingsSection, LabelRow } from './SettingsScaffold.jsx'

package/src/ContentFilters.jsx

@@ -1,291 +0,0 @@
-import { useState, useMemo, useRef, useEffect } from 'react'
-import { Divider } from '@kolkrabbi/kol-component'
-import { Icon } from '@kolkrabbi/kol-icons'
-import TabStrip from './TabStrip.jsx'
-
-/**
- * ContentFilters — the catalog organism: header row (title + count), a
- * toggled filter-chip panel, the expanding pill search, view-mode/layout
- * strips (TabStrip), and a render-prop for the filtered items.
- *
- * Recreated from the mirror cut (the newer of the two shipped copies) with
- * the shipped defects fixed: the dead ViewToggle import dropped (both repos
- * carried it), `text-transform: uppercase` on the strips dropped (no
- * auto-casing law — author labels in the case they should render; the 1px
- * tracking stays via TabStrip `tracked`), and mirror's `bg-container-secondary`
- * hover (a class no theme CSS defines) → `bg-fg-04`.
- *
- * Grid geometry law (documented default, both source repos, both pages):
- * grid = `repeat(6, 1fr)` gap 24 · list = `repeat(4, 1fr)` gap 8.
- *
- * @param {Array} props.items - Items to filter
- * @param {string} props.title - Section title
- * @param {number} props.totalCount - Count before filtering
- * @param {Array} props.filterGroups - `[{ label, key, values }]`
- * @param {Function} props.renderItem - `(filteredItems, viewMode, layout) => node`
- * @param {Array} props.viewModeOptions - `[{ value, label }]` for the view strip
- * @param {Array} props.mutuallyExclusiveFilters - filter keys that self-clear
- * @param {Array} props.customFilterKeys - keys renderItem handles, not this organism
- * @param {ElementType} props.iconComponent - icon seam (defaults to DS Icon; needs `filter` + `search`)
- */
-const ContentFilters = ({
-  items,
-  title,
-  totalCount,
-  filterGroups = [],
-  renderItem,
-  viewModeOptions,
-  viewMode: viewModeProp,
-  onViewModeChange,
-  defaultViewMode = 'list',
-  layoutOptions,
-  defaultLayout = 'grid',
-  onFilterChange,
-  mutuallyExclusiveFilters = [],
-  customFilterKeys = [],
-  searchKeys = ['label', 'name', 'title', 'type'],
-  headerActions,
-  showCountOnlyWhenFiltering = false,
-  iconComponent,
-}) => {
-  const [activeFilters, setActiveFilters] = useState(new Set())
-  const [isExpanded, setIsExpanded] = useState(false)
-  const [internalViewMode, setInternalViewMode] = useState(defaultViewMode)
-  const viewMode = viewModeProp !== undefined ? viewModeProp : internalViewMode
-  const [layout, setLayout] = useState(defaultLayout)
-  const [searchOpen, setSearchOpen] = useState(false)
-  const [searchText, setSearchText] = useState('')
-  const searchRef = useRef(null)
-  const IconSeam = iconComponent || Icon
-
-  useEffect(() => {
-    if (searchOpen && searchRef.current) searchRef.current.focus()
-  }, [searchOpen])
-
-  const toggleFilter = (filterType, value) => {
-    const newFilters = new Set(activeFilters)
-    const filterKey = `${filterType}:${value}`
-
-    if (newFilters.has(filterKey)) {
-      newFilters.delete(filterKey)
-    } else {
-      if (mutuallyExclusiveFilters.includes(filterType)) {
-        Array.from(newFilters).forEach(existingFilter => {
-          if (existingFilter.startsWith(`${filterType}:`)) {
-            newFilters.delete(existingFilter)
-          }
-        })
-      }
-      newFilters.add(filterKey)
-    }
-
-    setActiveFilters(newFilters)
-    if (onFilterChange) {
-      onFilterChange(newFilters, viewMode)
-    }
-  }
-
-  const clearAllFilters = () => {
-    setActiveFilters(new Set())
-    if (onFilterChange) {
-      onFilterChange(new Set(), viewMode)
-    }
-  }
-
-  const handleViewModeChange = (mode) => {
-    if (onViewModeChange) onViewModeChange(mode)
-    else setInternalViewMode(mode)
-    if (onFilterChange) {
-      onFilterChange(activeFilters, mode)
-    }
-  }
-
-  const filteredItems = useMemo(() => {
-    let result = items
-
-    if (searchText) {
-      const q = searchText.toLowerCase()
-      result = result.filter(item =>
-        searchKeys.some(key => {
-          const val = item[key]
-          return val && String(val).toLowerCase().includes(q)
-        })
-      )
-    }
-
-    if (activeFilters.size === 0) return result
-
-    return result.filter((item) => {
-      let matches = true
-      activeFilters.forEach((filter) => {
-        const [filterType, value] = filter.split(':')
-        if (customFilterKeys.includes(filterType)) return
-
-        const itemValue = item[filterType]
-        if (Array.isArray(itemValue)) {
-          if (!itemValue.includes(value)) matches = false
-        } else {
-          if (itemValue !== value) matches = false
-        }
-      })
-      return matches
-    })
-  }, [items, activeFilters, customFilterKeys, searchText, searchKeys])
-
-  // A group is a COLUMN: label on top, values beneath it — never label-left /
-  // values-right on one line (user ruling 2026-08-15, second QA round). The
-  // label wears the full strip idiom too — tracked `kol-helper-12` at the
-  // strip's rest ink — so a category header and the LIST/GRID items read as one
-  // family ("LIST GRID text has style, that style also on TAGS and any other
-  // filter category"). Rest ink, not active: the label is not interactive.
-  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={group.key} className="flex flex-col gap-3">
-        <h4 className="kol-helper-12 text-fg-32" style={{ letterSpacing: 1 }}>
-          {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 flex-wrap"
-        />
-      </div>
-    )
-  }
-
-  return (
-    <div className="w-full" style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
-      {/* Header with filter toggle + expanding search */}
-      <div className="flex items-center justify-between mb-4">
-        <div className="flex items-center gap-6">
-          <h2 className="kol-helper-14">{title}</h2>
-          <div className="flex items-center gap-1">
-            <button
-              onClick={() => setIsExpanded(!isExpanded)}
-              className="p-2 hover:bg-fg-04 rounded-sm transition-colors leading-none"
-              aria-label="Toggle filters"
-            >
-              <IconSeam name="filter" size={16} />
-            </button>
-            <div
-              className="flex items-center rounded-full cursor-pointer"
-              style={{
-                height: 28,
-                width: searchOpen ? 200 : 28,
-                background: searchOpen ? 'var(--kol-fg-04, rgba(255,255,255,0.04))' : 'transparent',
-                transition: 'width 600ms cubic-bezier(0.16, 1, 0.3, 1), background 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-                overflow: 'hidden',
-              }}
-              onClick={() => {
-                if (searchOpen) { setSearchOpen(false); setSearchText('') }
-                else setSearchOpen(true)
-              }}
-            >
-              <span
-                className="flex items-center justify-center flex-shrink-0"
-                style={{
-                  width: 28, height: 28,
-                  opacity: searchOpen ? 0 : 1,
-                  transition: 'opacity 300ms cubic-bezier(0.16, 1, 0.3, 1)',
-                  position: searchOpen ? 'absolute' : 'relative',
-                }}
-              >
-                <IconSeam name="search" size={16} />
-              </span>
-              {searchOpen && (
-                <input
-                  ref={searchRef}
-                  type="text"
-                  value={searchText}
-                  onChange={e => setSearchText(e.target.value)}
-                  onClick={e => e.stopPropagation()}
-                  placeholder=""
-                  className="bg-transparent outline-none kol-helper-12 flex-1 text-fg-80 caret-current px-4"
-                  onBlur={() => { if (!searchText) { setSearchOpen(false) } }}
-                  onKeyDown={e => { if (e.key === 'Escape') { setSearchOpen(false); setSearchText('') } }}
-                />
-              )}
-            </div>
-            {headerActions}
-          </div>
-          {activeFilters.size > 0 && (
-            <span
-              className="kol-helper-12 text-fg-48 cursor-pointer select-none group flex items-center gap-2"
-              onClick={(e) => { e.stopPropagation(); clearAllFilters() }}
-            >
-              <span className="underline">({activeFilters.size}) {activeFilters.size === 1 ? 'filter' : 'filters'} active</span>
-              <span className="hidden group-hover:inline text-fg-64">×</span>
-            </span>
-          )}
-        </div>
-
-        <div className="flex items-center gap-8">
-          {(!showCountOnlyWhenFiltering || isExpanded || searchOpen || activeFilters.size > 0) && (
-            <span className="kol-helper-14 text-fg-64">
-              {filteredItems.length} of {totalCount}
-            </span>
-          )}
-          {viewModeOptions && (
-            <TabStrip options={viewModeOptions} value={viewMode} onChange={handleViewModeChange} tracked />
-          )}
-        </div>
-      </div>
-
-      <Divider className="mb-4" />
-
-      {/* BELOW the divider: filter groups as left-aligned COLUMNS (only while
-          the filter toggle is open), layout strip RIGHT and ALWAYS visible.
-          `items-start` is load-bearing — it pins the strip to the label row, so
-          the strip and the group labels read as one line and the values hang
-          beneath. 0.1.1 read "at the divider level" as the header row above the
-          divider; the strip never belongs in the header
-          (ShellHeaderFilterRefinements, 2026-08-15). */}
-      {(layoutOptions || isExpanded) && (
-        <div className="flex items-start justify-between gap-16 mb-4">
-          <div className="flex items-start gap-16">
-            {isExpanded && filterGroups.map((group) => renderFilterGroup(group))}
-            {isExpanded && activeFilters.size > 0 && (
-              // Strip rest recipe, not its own ink — this button shares the line
-              // with the labels and values, and that line carries exactly TWO
-              // ink states (user ruling 2026-08-15: "we are not maintaining 3
-              // opacity states for one line in a component").
-              <button
-                onClick={clearAllFilters}
-                className="kol-helper-12 transition-colors underline text-fg-32 hover:text-fg-48"
-              >
-                Clear all ({activeFilters.size})
-              </button>
-            )}
-          </div>
-          {layoutOptions && (
-            <TabStrip
-              options={layoutOptions}
-              value={layout}
-              onChange={setLayout}
-              size={12}
-              tracked
-              className="gap-4"
-            />
-          )}
-        </div>
-      )}
-
-      {/* Render filtered items */}
-      <div className="mt-8" style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
-        {renderItem(filteredItems, viewMode, layout)}
-      </div>
-    </div>
-  )
-}
-
-export default ContentFilters