@kolkrabbi/kol-component 0.51.0 → 0.53.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.51.0",
+  "version": "0.53.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/molecules/ContentCard.jsx

@@ -67,9 +67,13 @@ const HOVER = {
  * of its own; article frames because its media is a 16/9 thumbnail that rarely
  * fills its box. */
 const MEDIA = {
-  print:   { ring: true },
+  /* zoom is for IMAGE-LED cards — where the artwork is the content and the
+   * card is a frame around it. A catalog tile whose preview is a diagram, or
+   * a default file card whose thumb is a 48px chip, gets nothing from it. */
+  print:   { ring: true, zoom: true },
+  work:    { zoom: true },
   /* ListingCard's card media steps its border on hover — fg-08 → fg-16 */
-  article: { frame: true, borderHover: true },
+  article: { frame: true, borderHover: true, zoom: true },
 }
 
 export default function ContentCard({
@@ -80,6 +84,7 @@ export default function ContentCard({
   fit,
   frame,
   ring,
+  zoom,
   control,
   actions,
   selected = false,
@@ -146,6 +151,7 @@ export default function ContentCard({
     frame: frame ?? MEDIA[variant]?.frame ?? false,
     ring: ring ?? MEDIA[variant]?.ring ?? false,
     borderHover: MEDIA[variant]?.borderHover ?? false,
+    zoom: zoom ?? MEDIA[variant]?.zoom ?? false,
   }
 
   /* `control` — the in-frame control slot (user ruling 2026-08-15). One node,

package/src/molecules/ContentMedia.jsx

@@ -53,6 +53,8 @@ import AssetPlaceholder from '../utilities/AssetPlaceholder.jsx'
  * @param {string}    bg        tint only, no border — a raw token value
  * @param {string}    borderHover  border colour on hover (article's fg-16 step)
  * @param {boolean}   ring      hairline border OVER the media, inset
+ * @param {boolean}   zoom      the artwork creeps up inside its frame on the
+ *                              CARD's hover — image-led variants only
  * @param {ReactNode} children  the real media
  */
 const FIT = {
@@ -70,6 +72,7 @@ export default function ContentMedia({
   bg,
   borderHover,
   ring = false,
+  zoom = false,
   children,
   className = '',
 }) {
@@ -79,7 +82,7 @@ export default function ContentMedia({
   const round = radius ? 'rounded-[var(--kol-radius-sm)]' : ''
   return (
     <div
-      className={`relative w-full overflow-hidden ${round} ${FIT[fit] ?? FIT.cover} ${frame ? 'bg-fg-04 border border-fg-08' : ''} ${border ? 'border border-fg-08' : ''} ${borderHover ? 'transition-colors hover:border-fg-16' : ''} ${ratio == null ? 'h-full' : ''} ${className}`.trim()}
+      className={`relative w-full overflow-hidden ${round} ${FIT[fit] ?? FIT.cover} ${frame ? 'bg-fg-04 border border-fg-08' : ''} ${border ? 'border border-fg-08' : ''} ${zoom ? 'kol-media-zoom' : ''} ${borderHover ? 'transition-colors hover:border-fg-16' : ''} ${ratio == null ? 'h-full' : ''} ${className}`.trim()}
       style={{ ...(ratio != null ? { aspectRatio: ratio } : null), background: bg }}
     >
       {children}

package/src/molecules/ContentRow.jsx

@@ -118,7 +118,7 @@ export default function ContentRow({
   )
 
   const common = {
-    className: `kol-row flex ${box.column ? 'flex-col' : ''} ${box.align} ${box.divider ? 'border-b border-fg-08' : ''} ${box.frame ? 'rounded-[var(--kol-radius-sm)] border' : ''} ${interactive ? 'cursor-pointer select-none' : ''} ${interactive && box.hover ? 'kol-content-hover' : ''} ${interactive && box.frameHover ? 'kol-content-hover-frame' : ''} ${className}`.trim(),
+    className: `kol-row group flex ${box.column ? 'flex-col' : ''} ${box.align} ${box.divider ? 'kol-row--divided' : ''} ${box.frame ? 'rounded-[var(--kol-radius-sm)] border' : ''} ${interactive ? 'cursor-pointer select-none' : ''} ${interactive && box.hover ? 'kol-content-hover' : ''} ${interactive && box.frameHover ? 'kol-content-hover-frame' : ''} ${className}`.trim(),
     style: vars,
   }
 

package/src/organisms/ContentCollection.jsx

@@ -26,10 +26,13 @@ import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
  * never a fixed track count — 05-layout-systems.md, the card-wall law: *"the
  * shell rails eat width that viewport breakpoints can't see, so a forced count
  * compresses every card"* (user call 2026-08-09). Hence `auto-fill` +
- * `minmax()`, with the law's 20rem minimum as the default.
+ * `minmax()`, with the law's minimum as the default — written in PX, not rem
+ * (user ruling 2026-08-15). A track width is a LAYOUT measure, not type: rem
+ * ties it to the root font-size, so a user bumping their browser text size
+ * silently re-counts the columns of every wall in the estate.
  *
  * @param {string}  form     'grid' | 'list'
- * @param {string}  min      grid track minimum, card form (default 20rem — the law)
+ * @param {string}  min      grid track minimum, card form (default 320px)
  * @param {string}  listMin  OPT-IN: makes the list multi-column too, for a dense
  *                           file-browser cut. Unset = one full-width column
  * @param {number}  gap      px between items — defaults PER FORM (grid 24,
@@ -41,7 +44,7 @@ import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
  */
 export default function ContentCollection({
   form = 'grid',
-  min = '20rem',
+  min = '320px',
   listMin,
   gap,
   stagger = true,