@kolkrabbi/kol-component 0.220.0 → 0.221.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.220.0",
+  "version": "0.221.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

@@ -152,7 +152,6 @@ export { default as ErrorBoundary } from './utilities/ErrorBoundary.jsx'
 export { default as FeatureSplit } from './organisms/FeatureSplit.jsx'
 export { default as FeaturedCarousel } from './organisms/FeaturedCarousel.jsx'
 export { default as FeaturesCardSection } from './organisms/FeaturesCardSection.jsx'
-export { default as FoundryCTA } from './organisms/FoundryCTA.jsx'
 export { default as SectionHero, default as FullBleedHero } from './organisms/SectionHero.jsx'
 export { default as SectionSplit } from './organisms/SectionSplit.jsx'
 export { default as SectionCards } from './organisms/SectionCards.jsx'

package/src/organisms/ColumnBrowser.jsx

@@ -462,6 +462,11 @@ export default function ColumnBrowser({
   quickLook = null,
   onQuickLook,
   onPick,
+  /* `picked` — the file the CALLER holds picked (a key or an object; kol-client-olina 2026-09-25:
+   * a pick made in rows or grid was lost on the switch to columns, because this browser kept its
+   * own). Given, the browser opens on that file's level with its row selected and previewed, and
+   * follows it when it changes; absent (`undefined`), the pick is internal exactly as before. */
+  picked: pickedIn,
   urlOf,
   kindOf = defaultKindOf,
   kindLabel = DEFAULT_KIND_LABEL,
@@ -559,6 +564,16 @@ export default function ColumnBrowser({
     if (prefix !== level) { keepCursor.current = true; pickedByCollapse.current = true; onPrefix(level) }
   }
   const pickedByCollapse = useRef(false)
+  const pickedInKey = typeof pickedIn === 'string' ? pickedIn : pickedIn?.key ?? null
+  useEffect(() => {
+    if (pickedIn === undefined || (picked?.key ?? null) === pickedInKey) return
+    const o = typeof pickedIn === 'string' ? objects.find((x) => x.key === pickedIn) : pickedIn
+    if (!o) { setPicked(null); return }
+    const level = o.key.slice(0, o.key.lastIndexOf('/') + 1)
+    setPicked(o)
+    setCursor(seedCursor(level))
+    if (prefix !== level) { keepCursor.current = true; pickedByCollapse.current = true; onPrefix(level) }
+  }, [pickedInKey]) // eslint-disable-line react-hooks/exhaustive-deps
   useEffect(() => { if (pickedByCollapse.current) { pickedByCollapse.current = false; return } if (picked) pick(null) }, [prefix]) // eslint-disable-line react-hooks/exhaustive-deps
   useEffect(() => { setExpanded((prev) => (prev.size ? new Set() : prev)) }, [prefix])
   const levelsOf = (pfx) => {
@@ -580,6 +595,12 @@ export default function ColumnBrowser({
    * internal moves land on the same spot, so nothing jumps. */
   const seedCursor = (pfx) => {
     const lv = levelsOf(pfx)
+    /* a caller's `picked` file at this level is where the keyboard starts — on the file, not on
+     * the folder that opened its column */
+    if (pickedInKey?.startsWith(pfx) && !pickedInKey.slice(pfx.length).includes('/')) {
+      const idx = itemsAt(pfx).findIndex((it) => it.type === 'file' && it.o.key === pickedInKey)
+      if (idx >= 0) return { col: lv.length - 1, idx }
+    }
     if (lv.length < 2) return { col: 0, idx: 0 }
     const col = lv.length - 2
     const opened = lv[col + 1].slice(lv[col].length)

package/src/organisms/MediaLibraryPages.jsx

@@ -195,12 +195,19 @@ function useBucketLibrary({ client, bucket, defaults, settings: controlled, onSe
 
 /* ── shared pieces, kol-r2b2's ─────────────────────────────────────────────── */
 
-/* The frame is square until the file reports its size, then snaps to its nearest preset. */
-function ImageFrame({ src }) {
-  const [ratio, setRatio] = useState('1 / 1')
+/* The frame is square until the file reports its size, then snaps to its nearest preset. A photo
+ * near a preset fills it (`cover`, a few percent cropped); a vector or anything past the ladder's
+ * ends — a 2.8:1 wordmark, an 11:1 nav logo — shows whole (`contain`, kol-client-olina 2026-09-25). */
+function ImageFrame({ src, vector }) {
+  const [frame, setFrame] = useState({ ratio: '1 / 1', contain: !!vector })
+  const onLoad = (e) => {
+    const { naturalWidth: w, naturalHeight: h } = e.target
+    const r = w && h ? w / h : 1
+    setFrame({ ratio: nearestRatio(w, h), contain: vector || r > 16 / 9 || r < 9 / 16 })
+  }
   return (
-    <div className="w-full rounded overflow-hidden flex items-center justify-center" style={{ aspectRatio: ratio }}>
-      <img src={src} alt="" className="w-full h-full object-cover" loading="lazy" onLoad={(e) => setRatio(nearestRatio(e.target.naturalWidth, e.target.naturalHeight))} />
+    <div className="w-full rounded overflow-hidden flex items-center justify-center" style={{ aspectRatio: frame.ratio }}>
+      <img src={src} alt="" className={`w-full h-full ${frame.contain ? 'object-contain' : 'object-cover'}`} loading="lazy" onLoad={onLoad} />
     </div>
   )
 }
@@ -1453,7 +1460,7 @@ export function MediaLibraryBrowse({
       <ColumnPreview key={previewFile.key} o={previewFile} urlOf={(o) => mediaUrl(o.key)} kindOf={kindOf} kindLabel={KIND_LABEL}
         formatSize={formatSize} formatDate={formatDate} width={previewWidth}
         renderPreview={(o) => {
-          if (isImage(o.contentType)) return <ImageFrame src={mediaUrl(o.key)} />
+          if (isImage(o.contentType)) return <ImageFrame src={mediaUrl(o.key)} vector={o.contentType === 'image/svg+xml'} />
           const poster = posterFor(o.key, keySet)
           return <KindPreview o={o} urlOf={(x) => mediaUrl(x.key)} poster={poster ? mediaUrl(poster) : undefined} kindOf={kindOf} kindLabel={KIND_LABEL} />
         }} />
@@ -1631,6 +1638,7 @@ export function MediaLibraryBrowse({
                   const real = rest.join('/')
                   if (target && target.id !== bucketMeta.id) switchBucket(target.id, real); else setPrefix(real)
                 }}
+                picked={pickedFile ? { ...pickedFile, key: `${VROOT}${pickedFile.key}` } : null}
                 onPick={(o) => setPickedFile(o ? { ...o, key: o.key.slice(VROOT.length) } : null)}
                 quickLook={quickLook && { ...quickLook, files: quickLook.files.map((o) => ({ ...o, key: `${VROOT}${o.key}` })) }}
                 onQuickLook={(q) => openQuickLook(q && { ...q, files: q.files.map((o) => ({ ...o, key: o.key.slice(VROOT.length) })) })}
@@ -1646,7 +1654,7 @@ export function MediaLibraryBrowse({
                 stackView={stackView ?? settings.stackView ?? 'list'}
                 renderPreview={(o) => {
                   const real = { ...o, key: o.key.slice(VROOT.length) }
-                  if (isImage(real.contentType)) return <ImageFrame src={mediaUrl(real.key)} />
+                  if (isImage(real.contentType)) return <ImageFrame src={mediaUrl(real.key)} vector={real.contentType === 'image/svg+xml'} />
                   const poster = posterFor(real.key, keySet)
                   return <KindPreview o={real} urlOf={(x) => mediaUrl(x.key)} poster={poster ? mediaUrl(poster) : undefined} kindOf={kindOf} kindLabel={KIND_LABEL} />
                 }}

package/src/organisms/SectionCta.jsx

@@ -15,7 +15,7 @@ import { minHeightClass } from './sectionHeights.js'
  * TWO VARIANTS. `editorial` (default): the two-column band above. `centered`
  * (SectionHeroRound2, 2026-08-26): the quiet mid-page tier — a short rule, a
  * heading, a mono line and Buttons, centred — which was `FoundryCTA`, a second
- * way to render SectionText. FoundryCTA is its deprecated alias.
+ * way to render SectionText. FoundryCTA was its alias until 2026-09-25, when it dropped.
  *
  * @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

package/src/organisms/FoundryCTA.jsx

@@ -1,38 +0,0 @@
-import Button from '../atoms/Button.jsx'
-import SectionCta from './SectionCta.jsx'
-
-/* taxonomy-ok: nests component's Button */
-
-/**
- * @deprecated 2026-08-26 — `FoundryCTA` is `SectionCta variant="centered"`
- * (SectionHeroRound2: a second way to render SectionText). Same render; the
- * `action` object(s) become Buttons. Alias kept; removed at the next major.
- *
- * @param {ReactNode} heading · description
- * @param {Object|Array} action    one {href, label, variant?, target?, rel?} or an array
- * @param {Function}  onNavigate   (href, event) => void
- */
-export default function FoundryCTA({ heading, description, action, onNavigate, className = '' }) {
-  const actions = (Array.isArray(action) ? action : [action]).filter(Boolean)
-  return (
-    <SectionCta
-      variant="centered"
-      headline={heading}
-      body={description}
-      className={className}
-      actions={actions.length > 0 ? actions.map((act, i) => (
-        <Button
-          key={i}
-          variant={act.variant === 'secondary' ? 'outline' : 'primary'}
-          size="md"
-          href={act.href}
-          target={act.target}
-          rel={act.rel}
-          onClick={onNavigate ? (e) => onNavigate(act.href, e) : undefined}
-        >
-          {act.label}
-        </Button>
-      )) : undefined}
-    />
-  )
-}