@kolkrabbi/kol-component 0.104.2 → 0.105.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.104.2",
+  "version": "0.105.0",
   "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/organisms/ContentFilters.jsx

@@ -42,8 +42,9 @@ import IconFrame from '../atoms/IconFrame.jsx'
  * @param {boolean} props.titleUppercase      — cases the title (default false)
  * @param {string}  props.labelClassName      — filter-group label type/ink (default `kol-eyebrow text-fg-96`)
  * @param {boolean} props.labelUppercase      — cases the group label (default true)
- * groups: `{ label, key, values, stack?, className?, wrapClassName? }` — a short group (≤ 6 values) hugs its chips,
- * a long one flows; `stack` pins either way; `className` / `wrapClassName` are per-group seams
+ * groups: `{ label, key, values, stack?, className?, wrapClassName? }` — THE FIRST GROUP HUGS ITS CHIPS, EVERY
+ * GROUP AFTER IT FLOWS (user law 2026-08-27, by position, never by chip count); `stack` is the explicit
+ * override; `className` / `wrapClassName` are per-group seams
  * @param {string}  props.tagVariant          — filter chip variant ('primary' grey fill)
  * @param {string}  props.tagSize             — filter chip size
  * @param {string}  props.tagActiveClassName  — chip ink, selected
@@ -245,12 +246,15 @@ const ContentFilters = ({
     </div>
   ) : null
 
-  const renderFilterGroup = (group) => {
-    /* the FIRST group hugs its chips, the rest flow (the ruled shape — /prints;
-     * ContentFiltersEqualColumns was withdrawn 2026-08-27 same day: the "equal
-     * columns" ask was a misread). A short group (≤ 6) hugs by default;
-     * `stack` pins either way (kol-fxr passes `stack: i === 0`). */
-    const stacked = group.stack ?? (group.values?.length ?? 0) <= 6
+  const renderFilterGroup = (group, index = 0) => {
+    /* THE LAW (user ruling 2026-08-27, said "for the 10th time" — ContentFiltersFirstGroupHugs):
+     * THE FIRST FILTER GROUP HUGS ITS CHIPS — IT IS NARROW. EVERY GROUP AFTER IT
+     * FLOWS ACROSS THE REST OF THE ROW. By POSITION, never by chip count. The
+     * reference is kol-website /prints: CATEGORY hugs at the left, YEAR flows
+     * beside it. Not equal columns (0.104.1, a misread — reverted), not "short
+     * groups stack" (0.101, one page's ruling — reverted). `stack` stays the
+     * explicit override; kol-fxr pins `stack: i === 0`. */
+    const stacked = group.stack ?? index === 0
     return (
     <div key={group.key} className={`flex flex-col gap-3 ${stacked ? 'shrink-0' : 'min-w-0 flex-1'} ${group.className ?? ''}`.trim()}>
       {/* THE CATEGORY LABEL IS THE ACTIVE INK — `kol-helper-12` at `text-fg-96`,
@@ -444,7 +448,7 @@ const ContentFilters = ({
         <div className="flex items-start justify-between gap-16">
           <div className="flex min-w-0 flex-1 items-start gap-16">
             {leadingActions}
-            {isExpanded && filterGroups.map((group) => renderFilterGroup(group))}
+            {isExpanded && filterGroups.map((group, i) => renderFilterGroup(group, i))}
             {isExpanded && activeFilters.size > 0 && (
               <button
                 type="button"

package/src/organisms/SectionCta.jsx

@@ -18,7 +18,7 @@ import { minHeightClass } from './sectionHeights.js'
  *
  * @param {'full'|'80'|'60'|string} [height='60']  min-height on the family's ladder — full = 100dvh,
  *   80 = 70svh / 80vh, 60 = 50svh / 60vh (default), 40 = 35svh / 40vh; content stays vertically centred inside it
- * @param {'editorial'|'centered'} variant
+ * @param {'editorial'|'centered'|'connect'} variant  `connect` = editorial with the contact copy as defaults (/ CONNECT · WORKING ON A PROJECT? · SEND A MESSAGE · CONTACT · hello@kolkrabbi.io), every prop still overridable
  * @param {ReactNode} headline · body · actions   centered: the SectionText slots
  * @param {ReactNode} eyebrow       left-column display wordmark (kol-sans-display-01)
  * @param {ReactNode} promptLabel   prompt-row label
@@ -47,6 +47,17 @@ export default function SectionCta({
   slotStyle,
   className = '',
 }) {
+  /* `connect` (SectionCtaConnectVariant, kol-website 2026-08-27 — user: "it's stupid
+   * to make a prefix family that we opt out of at the first opportunity"): the
+   * editorial layout with the site's contact copy as defaults — every one still
+   * overridable by the props. Pages speak SectionCta directly; ConnectCta retires. */
+  if (variant === 'connect') {
+    eyebrow = eyebrow ?? '/ CONNECT'
+    promptLabel = promptLabel ?? 'WORKING ON A PROJECT?'
+    heading = heading ?? 'SEND A MESSAGE'
+    contactLabel = contactLabel ?? 'CONTACT'
+    email = email ?? 'hello@kolkrabbi.io'
+  }
   if (variant === 'centered') {
     return (
       <section className={`w-full flex flex-col justify-center py-24 ${surfaceClass(background, 'auto')} ${minHeightClass(height)} ${className}`.replace(/\s+/g, ' ').trim()}>