@kolkrabbi/kol-component 0.110.0 → 0.112.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.110.0",
+  "version": "0.112.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/index.js

@@ -137,7 +137,7 @@ export { default as LoaderOverlay } from './utilities/LoaderOverlay.jsx'
 export { default as MediaLibrary, MediaLibraryProvider, useMediaLibrary, MediaPicker, MediaBrowser } from './organisms/MediaLibrary.jsx'
 export { default as MediaTileGallery } from './organisms/MediaTileGallery.jsx'
 export { default as MediaViewer } from './organisms/MediaViewer.jsx'
-export { default as SettingsPanel, SettingsSection, SettingsRow, SettingsSwitch, SettingsChoice, SettingsMulti, SettingsChipRow, SettingsFooter } from './organisms/SettingsPanel.jsx'
+export { default as SettingsPanel, LabeledControlSection, SettingsRow, SettingsSwitch, SettingsChoice, SettingsMulti, SettingsChipRow, SettingsFooter } from './organisms/SettingsPanel.jsx'
 export { default as SectionNewsletter } from './organisms/SectionNewsletter.jsx'
 export { default as NewsletterBand } from './organisms/NewsletterBand.jsx'
 export { default as ColumnBrowser } from './organisms/ColumnBrowser.jsx'

package/src/molecules/ContentMedia.jsx

@@ -78,8 +78,12 @@ const FIT = {
   /* a consumer WRAPPER div fills the frame as an img/video does (ColumnBrowser round, 2026-08-27 — kol-r2b2's wrapped thumb fell back to the image's intrinsic size) */
   cover:   '[&>img]:h-full [&>img]:w-full [&>img]:object-cover [&>video]:h-full [&>video]:w-full [&>video]:object-cover [&>div]:h-full [&>div]:w-full',
   /* GridCard's previewFit, verbatim: `img { max-width: none; transform: scale(.5 | .3); transform-origin: top left }` */
-  natural: '[&>img]:max-w-none [&>img]:scale-50 [&>img]:origin-top-left',
-  compact: '[&>img]:max-w-none [&>img]:scale-[.3] [&>img]:origin-top-left',
+  /* the ANCHOR is the consumer's (ContentMediaFocusBinding, kol-monitor 2026-08-27 — user: "make it
+   * so that the focus can be set per repo"): `--kol-media-focus`, bound once on a consumer's :root,
+   * pins the fit AND the hover zoom (kol-theme `.kol-media-zoom`, same token) — the two share
+   * `transform-origin`. Unset = today's values: top left here, center on the zoom. */
+  natural: '[&>img]:max-w-none [&>img]:scale-50 [&>img]:origin-[var(--kol-media-focus,top_left)]',
+  compact: '[&>img]:max-w-none [&>img]:scale-[.3] [&>img]:origin-[var(--kol-media-focus,top_left)]',
 }
 
 /* the fade: the child <img> is cloned with loading="lazy" and `kol-media-fade`,

package/src/organisms/ContentFilters.jsx

@@ -42,8 +42,10 @@ 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? }` — 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
+ * groups: `{ label, key, values, stack?, className?, wrapClassName? }` — THE FIRST GROUP IS ONE CATALOG COLUMN
+ * WIDE (`(row − 120px) / 6`, the `1fr` of `repeat(6, 1fr)` gap 24 — a fraction, never a px; `.kol-filters-first`,
+ * kol-theme ≥0.73.0), EVERY GROUP AFTER IT FLOWS (user law 2026-08-27, by position, never by chip count —
+ * the hug's width overruled the same day: "nope not hug, fix a size"); `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
@@ -247,16 +249,22 @@ const ContentFilters = ({
   ) : null
 
   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`. */
+    /* THE LAW (user ruling 2026-08-27, said "for the 10th time" — ContentFiltersFirstGroupHugs,
+     * its WIDTH overruled the same day — ContentFiltersFirstGroupFixedWidth, kol-monitor: "nope
+     * not hug, fix a size … if columns, maybe just use one?"): THE FIRST FILTER GROUP IS ONE
+     * CATALOG COLUMN WIDE — `.kol-filters-first` (kol-theme): `(100cqw − 120px) / 6`, the `1fr`
+     * of the catalog's `repeat(6, 1fr)` gap 24, measured on the header row as a container so
+     * the count/strip beside the groups never narrows it. It sits over the first card; EVERY
+     * GROUP AFTER IT FLOWS across the rest of the row, starting over the second. By POSITION,
+     * never by chip count. A page without a 6-column catalog gets the same fraction of its row.
+     * Not a hug (0.104.3 — the column was 78px on one surface and 92 on the next), not equal
+     * columns (0.104.1), not "short groups stack" (0.101). `stack` stays the explicit override
+     * (`stack: false` on the first makes it flow); `group.className` still wins on width — the
+     * rule sits in the components layer. */
     const stacked = group.stack ?? index === 0
+    const first = index === 0 && stacked
     return (
-    <div key={group.key} className={`flex flex-col gap-3 ${stacked ? 'shrink-0' : 'min-w-0 flex-1'} ${group.className ?? ''}`.trim()}>
+    <div key={group.key} className={`flex flex-col gap-3 ${first ? 'kol-filters-first' : 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`,
         * the same full opacity a SELECTED layout item wears (user ruling
         * 2026-08-15: "TAGS and other categories are ACTIVE state full opacity").
@@ -445,7 +453,7 @@ const ContentFilters = ({
         * the whole row on `isExpanded` hid the strip until you opened filters,
         * which is not a state anyone would guess at. */}
       {(isExpanded || (layoutPlacement === 'below' && layoutStrip) || leadingActions || belowActions) && (
-        <div className="flex items-start justify-between gap-16">
+        <div className="kol-filters-row flex items-start justify-between gap-16">
           <div className="flex min-w-0 flex-1 items-start gap-16">
             {leadingActions}
             {isExpanded && filterGroups.map((group, i) => renderFilterGroup(group, i))}

package/src/organisms/SettingsPanel.jsx

@@ -130,11 +130,15 @@ export function SettingsSwitch({ on = false, onChange, disabled = false, disable
   )
 }
 
-/** SettingsSection — a section of the panel (SettingsPanelApproved, 2026-08-27):
- *  the EYEBROW (`kol-eyebrow text-fg-80`) standing apart from the rows (gap-3),
- *  the rows in their own stack — `rowGap` 1 for switch rows (24 tall already),
- *  2 for dropdown rows. `divided` = a hairline above (between sections). */
-export function SettingsSection({ label, divided = false, rowGap = 2, children, className = '' }) {
+/** LabeledControlSection — a section of LabeledControls: the EYEBROW
+ *  (`kol-eyebrow text-fg-80`) standing apart from the rows (gap-3), the rows in
+ *  their own stack — `rowGap` 1 for switch rows (24 tall already), 2 for
+ *  dropdown rows. `divided` = a hairline above (between sections).
+ *  Was `SettingsSection` until 2026-08-27 (LabeledControlSection, kol-r2b2 —
+ *  user ruling: it named the place it was first used, not what it is; kol-fxr
+ *  took it for a params rail the same day). RENAMED, NO ALIAS — the render is
+ *  the 0.104.0 locked composition, untouched. */
+export function LabeledControlSection({ label, divided = false, rowGap = 2, children, className = '' }) {
   return (
     <div className={`flex flex-col gap-3 ${divided ? 'kol-section--divided' : ''} ${className}`.replace(/\s+/g, ' ').trim()}>
       {label && <p className="kol-eyebrow text-fg-80">{label}</p>}