@kolkrabbi/kol-component 0.238.0 → 0.239.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.238.0",
+  "version": "0.239.1",
   "description": "The core component library",
   "license": "MIT",
   "type": "module",
@@ -26,7 +26,7 @@
     "embla-carousel-react": "^8.6.0",
     "pdfjs-dist": "^6.3.289",
     "react-syntax-highlighter": "^16.1.1",
-    "@kolkrabbi/kol-markdown": "^0.1.2",
+    "@kolkrabbi/kol-markdown": "^0.1.3",
     "@kolkrabbi/kol-search": "^0.3.0"
   },
   "peerDependencies": {
@@ -38,7 +38,7 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-icons": "^0.33.0"
+    "@kolkrabbi/kol-icons": "^0.33.1"
   },
   "files": [
     "src",

package/src/atoms/Button.jsx

@@ -12,7 +12,7 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  *
  * @param {Object} props
  * @param {ReactNode} props.children - Button content
- * @param {'accent'|'danger'|'nav'} props.variant - The intent; the GROUND is `tone`. `primary · secondary · outline · ghost · grey · control` are deprecated aliases of tones (2026-10-01, on the retirement ledger): pass `tone` — `secondary` is `tone="inverted"`, `control` is `tone="ghost"`, the rest keep their name. Visual variant. UNSET (the default) inherits the tone of the nearest `kol-tone-*` wrapper, else renders primary; the five ground variants are aliases of `tone`. `danger` is the destructive treatment (--ui-error fill); `nav` is the chrome rung — transparent, oq-64 ink, one step brighter than `ghost`; `control` is an alias for `ghost` (legacy call-sites).
+ * @param {'accent'|'danger'|'nav'|'tab'} props.variant - The intent; the GROUND is `tone`. `tab` is the tab chip (2026-10-02): quiet text at rest, a soft filled chip while `pressed`. `primary · secondary · outline · ghost · grey · control` are deprecated aliases of tones (2026-10-01, on the retirement ledger): pass `tone` — `secondary` is `tone="inverted"`, `control` is `tone="ghost"`, the rest keep their name. Visual variant. UNSET (the default) inherits the tone of the nearest `kol-tone-*` wrapper, else renders primary; the five ground variants are aliases of `tone`. `danger` is the destructive treatment (--ui-error fill); `nav` is the chrome rung — transparent, oq-64 ink, one step brighter than `ghost`; `control` is an alias for `ghost` (legacy call-sites).
  * @param {'xs'|'sm'|'md'|'lg'} props.size - Button size (default: 'md'); xs is the panel rung (ControlsXsRung, 2026-09-01) — kol-mono-8 in a 22px shell (20 icon-only), opt-in by prop
  * @param {string} props.iconLeft - Icon name to display on the left
  * @param {string} props.iconRight - Icon name to display on the right
@@ -93,7 +93,7 @@ const Button = ({
     warned.add(variant)
     console.warn(`Button: variant="${variant}" is deprecated — use tone="${VARIANT_TONE[variant]}"`)
   }
-  const KNOWN = ['primary', 'secondary', 'accent', 'outline', 'ghost', 'nav', 'danger', 'grey']
+  const KNOWN = ['primary', 'secondary', 'accent', 'outline', 'ghost', 'nav', 'tab', 'danger', 'grey']
   const known = !resolvedVariant || KNOWN.includes(resolvedVariant)
   if (!known && import.meta.env.DEV) console.warn(`Button: unknown variant "${resolvedVariant}" — rendering the inherited tone (primary)`)
   const variantClass = resolvedVariant && known ? `kol-btn-${resolvedVariant}` : ''

package/src/molecules/ContentText.jsx

@@ -69,7 +69,11 @@ const RAMP = {
     /* detail truncates (ShellHomeSystem, 2026-08-27): a wrapping blurb set three
      * cards' plates at three heights and misaligned the media */
     card: { title: 'kol-mono-14 text-emphasis', detail: 'kol-mono-10 text-meta truncate' },
-    row:  { title: 'kol-mono-12 text-emphasis', detail: 'kol-mono-10 text-meta' },
+    /* ONE LINE, BOTH (2026-10-03): the row is a fixed 36px rung and neither slot truncated, so a
+     * long detail took its full width and the title wrapped under it — "Slit-Scan Camera" on three
+     * lines in a row twice the height of its neighbours. The title keeps its width and the detail
+     * gives way (`lead` below). */
+    row:  { title: 'kol-mono-12 text-emphasis truncate', detail: 'kol-mono-10 text-meta truncate' },
   },
   /* `print` folded into `catalog` 2026-08-29 — its row was already catalog's,
    * and its card differed only by `detail` not truncating. It aliases now. */
@@ -136,6 +140,9 @@ const RAMP = {
  * ['group', …] = 16px baseline group · ['between', …] = header.between ·
  * ['stack', …] = a vertical block on the tight 4px gap, nestable inside any of
  * the above. In a `between`, the LEADING part flexes and the trailing one hugs.
+ * ['lead', …] is a `between` the other way round: the leading part keeps its own
+ * width and the TRAILING one takes what is left and truncates — for a row whose
+ * trailing text is the long one (catalog's detail).
  *
  * A third kind, ['line', …] — fixed-width trailing columns for a table-like
  * row — was removed 2026-08-15. `default.row` was its only caller and moved to
@@ -148,7 +155,7 @@ const ORDER = {
   file:  { card: ['title', ['group', 'date', 'size']], row: ['title', ['group', 'date', 'size']] },
   /* slide: title, then date · size · slide count on one baseline (read off olina's /slide-deck) */
   slide: { card: ['title', ['group', 'date', 'size', 'meta']], row: ['title', ['group', 'date', 'size', 'meta']] },
-  catalog:  { card: ['title', 'detail'], row: [['between', 'title', 'detail']] },
+  catalog:  { card: ['title', 'detail'], row: [['lead', 'title', 'detail']] },
   /* title + body are ONE block in BOTH forms — a `stack`, so they sit on the
    * tight 4px internal gap while tags, kicker and the meta group keep the
    * form's own outer gap. A flat column gave every line the same gap, which
@@ -318,7 +325,8 @@ export default function ContentText({
   const render = (entry, i, trailing = false) => {
     if (typeof entry === 'string') return line(entry)
     const [kind, ...slots] = entry
-    const parts = slots.map((s, j) => render(s, j, kind === 'between' && j === slots.length - 1)).filter(Boolean)
+    const split = kind === 'between' || kind === 'lead'
+    const parts = slots.map((s, j) => render(s, j, split && j === slots.length - 1)).filter(Boolean)
     if (!parts.length) return null
     if (kind === 'stack') {
       /* A TRAILING column right-aligns (user ruling 2026-08-15) — it sits at
@@ -338,16 +346,21 @@ export default function ContentText({
          * baseline — a two-line column has no single baseline to share with the
          * title beside it, and baseline-aligning it hangs the second line below
          * the row's floor. */
-        className={`flex min-w-0 ${parts.length > 1 && Array.isArray(slots[slots.length - 1]) ? 'items-center' : 'items-baseline'} ${kind === 'between' ? 'justify-between' : ''}`}
+        className={`flex min-w-0 ${parts.length > 1 && Array.isArray(slots[slots.length - 1]) ? 'items-center' : 'items-baseline'} ${split ? 'justify-between' : ''}`}
         style={{ gap: 'var(--kol-spacing-6)' }}
       >
         {/* the LEADING part of a `between` takes the room; the trailing column
           * hugs its content. Without this the left stack sized to its content
           * and the big line truncated at a quarter of the row's width while
           * empty space sat between the two columns. */}
-        {kind === 'between' && parts.length > 1
+        {split && parts.length > 1
           ? parts.map((p, j) => (
-              <div key={j} className={j === 0 ? 'min-w-0 flex-1' : 'shrink-0 text-right'}>{p}</div>
+              /* `lead`: the leading part is its own width (a flex item's default — it shrinks only
+               * when it alone is wider than the row); the trailing one starts from nothing and
+               * takes the remainder, so it is the one that truncates */
+              <div key={j} className={kind === 'lead'
+                ? (j === 0 ? 'min-w-0' : 'min-w-0 flex-1 text-right')
+                : (j === 0 ? 'min-w-0 flex-1' : 'shrink-0 text-right')}>{p}</div>
             ))
           : parts}
       </div>

package/src/molecules/TabChips.jsx

@@ -1,3 +1,5 @@
+import Button from '../atoms/Button.jsx'
+
 /**
  * TabChips — Tabs as a row of chips. the active tab is a filled chip, the rest are quiet text.
  *
@@ -10,28 +12,37 @@
  *
  * Labels render as authored. Selection is the parent's.
  *
+ * ON THE CONTROL SIZE RAMP (user 2026-10-02: *"can we make the tabtoggle align with the size ramp
+ * controls use?"*). A chip was a bare button at its own 24px, beside a 26px dropdown in the same
+ * bar. Each chip is a `Button variant="tab"` now, so `size` is the ramp's (22 · 26 · 32 · 40) and
+ * the chip's look is a Button state anything else can wear.
+ *
  * @param {Array}    tabs       `[{ id, label }]`
  * @param {string}   value      id of the active tab (controlled)
  * @param {Function} onChange   `(id) => void`
+ * @param {'xs'|'sm'|'md'|'lg'} [size='sm'] the control ramp's rung
  * @param {string}   [ariaLabel] accessible name for the strip
  * @param {string}   [className] extra classes on the row
  */
-export default function TabChips({ tabs = [], value, onChange, ariaLabel, className = '' }) {
+export default function TabChips({ tabs = [], value, onChange, size = 'sm', ariaLabel, className = '' }) {
   return (
     <div className={`flex items-center gap-1 ${className}`.trim()} role="tablist" aria-label={ariaLabel}>
       {tabs.map((t) => {
         const active = t.id === value
         return (
-          <button
+          /* a tab is selected, not pressed — the role's own attribute replaces Button's aria-pressed */
+          <Button
             key={t.id}
-            type="button"
+            variant="tab"
+            size={size}
+            pressed={active}
             role="tab"
             aria-selected={active}
+            aria-pressed={undefined}
             onClick={() => onChange?.(t.id)}
-            className={`kol-mono-12 rounded-[var(--kol-radius-sm)] px-3 py-1 transition-colors [@media(pointer:coarse)]:min-h-8 ${active ? 'bg-fg-08 text-emphasis' : 'text-meta hover:text-emphasis'}`}
           >
             {t.label}
-          </button>
+          </Button>
         )
       })}
     </div>

package/src/organisms/ContentFilters.jsx

@@ -226,13 +226,25 @@ const ContentFilters = ({
     onFilterChange?.(activeFilters, mode)
   }
 
+  /* A CHIP THAT IS NOT OFFERED DOES NOT FILTER (2026-10-03, kol-mirror's Library on the hub). The
+   * set outlives a change of `filterGroups` — a page with views swaps the groups under it — and a
+   * chip picked in one view kept filtering the next, where no item carries its key: an empty list
+   * under a "(1) filter active" whose chip is nowhere on the page. Only what the current groups
+   * offer applies (and the consumer's own `customFilterKeys`). The stored set is left alone, so
+   * the chip is still on when its view comes back. */
+  const liveFilters = useMemo(() => {
+    const offered = new Set(filterGroups.flatMap((g) => g.values.map((v) => `${g.key}:${v}`)))
+    const live = [...activeFilters].filter((f) => offered.has(f) || customFilterKeys.includes(f.split(':')[0]))
+    return live.length === activeFilters.size ? activeFilters : new Set(live)
+  }, [activeFilters, filterGroups, customFilterKeys])
+
   const filteredItems = useMemo(() => {
     /* the KOL engine, not a private substring match (apps review 2026-09-29) — utilities/searchItems */
     let result = filterItems(items, searchText, { keys: searchKeys })
-    if (activeFilters.size === 0) return result
+    if (liveFilters.size === 0) return result
     return result.filter((item) => {
       let matches = true
-      activeFilters.forEach((filter) => {
+      liveFilters.forEach((filter) => {
         const [filterType, value] = filter.split(':')
         if (customFilterKeys.includes(filterType)) return
         const itemValue = item[filterType]
@@ -244,9 +256,9 @@ const ContentFilters = ({
       })
       return matches
     })
-  }, [items, activeFilters, customFilterKeys, searchText, searchKeys])
+  }, [items, liveFilters, customFilterKeys, searchText, searchKeys])
 
-  const showCount = !showCountOnlyWhenFiltering || isExpanded || searchOpen || activeFilters.size > 0
+  const showCount = !showCountOnlyWhenFiltering || isExpanded || searchOpen || liveFilters.size > 0
 
   /* THE FILTER VALUE IS A TAG — the atom's whole reason to exist ("a Tag with
    * no handler is a Pill wearing the wrong name"). Three defects lived here
@@ -464,12 +476,12 @@ const ContentFilters = ({
             />
             {headerActions}
           </div>
-          {activeFilters.size > 0 && (
+          {liveFilters.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="underline">({liveFilters.size}) {liveFilters.size === 1 ? 'filter' : 'filters'} active</span>
               <span className="hidden group-hover:inline text-fg-64">×</span>
             </span>
           )}
@@ -543,14 +555,14 @@ const ContentFilters = ({
           <div className="flex min-w-0 flex-1 items-start gap-8 md:gap-16">
             {leadingActions}
             {isExpanded && filterGroups.map((group, i) => renderFilterGroup(group, i))}
-            {isExpanded && activeFilters.size > 0 && (
+            {isExpanded && liveFilters.size > 0 && (
               <button
                 type="button"
                 onClick={clearAllFilters}
                 className="kol-helper-12 transition-colors underline text-fg-32 hover:text-fg-48"
                 style={{ background: 'transparent', border: 'none', cursor: 'pointer' }}
               >
-                Clear all ({activeFilters.size})
+                Clear all ({liveFilters.size})
               </button>
             )}
           </div>

package/src/organisms/SectionSplit.jsx

@@ -47,7 +47,10 @@ import { minHeightClass } from './sectionHeights.js'
  * @param {ReactNode} media        image / video / interactive node for the visual column
  * @param {string}    [ratio='4/5'] aspect ratio of the media frame. THE FRAME IS BOUNDED BY THE
  *   RUNG (SectionSplitMediaBounded, 2026-08-27): its height is the section's `height` rung minus
- *   the vertical padding, its width follows the ratio (capped at the column). Before, the frame
+ *   the vertical padding, its width follows the ratio (capped at the column) — the RUNG is the
+ *   dimension that holds and the WIDTH the one that yields, so a frame can stand narrower than its
+ *   column; take a taller rung for bigger media. Below 901px, stacked, it is the other way round:
+ *   the frame is as wide as the column and its height follows the ratio. Before, the frame
  *   was as wide as its column and set the section's height itself, so `40` · `60` · `80`
  *   rendered identically — a ladder that only floors is decorative for a card with media.
  * @param {boolean}   [mediaHover=false] zoom the media on frame hover (the CardFeatureItem numbers)
@@ -251,7 +254,15 @@ export default function SectionSplit({
              * silently, which is why it was reported as a ProfileCard crop.
              * Below 901 the frame is `w-full` + ratio: width decides, height
              * follows, media never clips. ≥901 nothing moves. */
-            className={`kol-section-split-visual relative w-full max-w-full justify-self-center rounded-[var(--kol-radius-sm)] min-[901px]:h-[calc(var(--kol-section-h,60vh)_-_2*var(--kol-section-py,4rem))] ${mediaClip ? 'overflow-hidden' : ''} ${mediaHover ? 'is-hoverable' : ''} ${mediaFirst ? 'order-1' : ''} ${centred ? 'max-w-[640px]' : ''}`.replace(/\s+/g, ' ').trim()}
+            /* …AND THE WIDTH FOLLOWS AGAIN FROM 901 (section-split-frame-ratio-holds-at-desktop,
+             * kol-website 2026-10-02; user: *"why is this no longer its original ratio? its
+             * squished?"*). `w-full` was written for the stack and applied at every width, so
+             * beside the text the frame had BOTH dimensions fixed — the column's width and the
+             * rung's height — and `aspect-ratio` had nothing left to decide: a `5/4` frame
+             * rendered 2.22 at 1600 and cropped its image. From 901 the width is `auto` again:
+             * the rung sets the height, the ratio sets the width, the column caps it — the
+             * 2026-08-27 rule written on the `ratio` prop. */
+            className={`kol-section-split-visual relative w-full min-[901px]:w-auto max-w-full justify-self-center rounded-[var(--kol-radius-sm)] min-[901px]:h-[calc(var(--kol-section-h,60vh)_-_2*var(--kol-section-py,4rem))] ${mediaClip ? 'overflow-hidden' : ''} ${mediaHover ? 'is-hoverable' : ''} ${mediaFirst ? 'order-1' : ''} ${centred ? 'max-w-[640px]' : ''}`.replace(/\s+/g, ' ').trim()}
             style={{ aspectRatio: ratio }}
           >
             {media ?? (placeholder === true