@kolkrabbi/kol-component 0.220.0 → 0.222.0

package/package.json

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

@@ -120,6 +120,7 @@ export { default as Slider } from './molecules/Slider.jsx'
 export { default as SpecList } from './molecules/SpecList.jsx'
 export { default as SpectrumControls, HueStrip, SBSquare, WheelTriangle } from './organisms/SpectrumControls.jsx'
 export { default as SplitToolButton } from './molecules/SplitToolButton.jsx'
+export { default as ToolPalette } from './organisms/ToolPalette.jsx'
 export { default as SwatchControls, SwatchStack, EyedropPick } from './molecules/SwatchControls.jsx'
 export { default as TabsRow } from './molecules/TabsRow.jsx'
 
@@ -152,7 +153,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/molecules/SplitToolButton.jsx

@@ -54,7 +54,14 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  * @param {boolean} props.active - Whether this tool group is the active tool — lit trigger, `aria-pressed`
  * @param {'xs'|'sm'|'md'|'lg'} props.size - Trigger box on the pinned-square ladder — 22 · 26 · 32 · 40 (default: 'md'). The glyph follows the SOLO ladder; it is never set at the call site
  * @param {boolean} props.blurOnClick - Blur the trigger after click so a canvas can reclaim focus and refresh its cursor (default: false)
+ * @param {Function} props.onTrigger - Replaces the trigger's arm: fires with the trigger variant's id on every click. For a fold of one-shot ACTIONS (Boolean: the trigger re-runs the last-picked op) — no pressed state is implied (default: arm via `onChange`)
+ * @param {boolean} props.disabled - Disables the trigger — `.kol-btn:disabled` dims it (default: false)
+ * @param {ElementType} props.iconComponent - Glyph renderer receiving `{ name, size, className, style }` — Button's seam (default: DS `Icon`)
  * @param {string} props.aria-label - Trigger label fallback when no variant resolves
+ *
+ * A variant may carry its own `onSelect()` — that row does its own thing instead of `onChange`
+ * (Text: "Text" arms the tool, "Kinetic type" inserts a layer). Without `lastPicked` the trigger
+ * remembers the last row picked from the menu (kol-fxr ToolPalette, editor-panels-the-held-specs A3).
  * @param {string} props.className - Additional classes on the trigger
  */
 
@@ -77,6 +84,9 @@ const SplitToolButton = ({
   active = false,
   size = 'md',
   blurOnClick = false,
+  onTrigger,
+  disabled = false,
+  iconComponent: IconC = Icon,
   className = '',
   'aria-label': ariaLabel,
 }) => {
@@ -89,20 +99,23 @@ const SplitToolButton = ({
     role: 'menu',
   })
 
+  const [ownLast, setOwnLast] = useState(null)
   const byId = (id) => variants.find((v) => v.id === id)
-  const triggerVariant = (active && byId(value)) || byId(lastPicked) || variants[0]
+  const triggerVariant = (active && byId(value)) || byId(lastPicked ?? ownLast) || variants[0]
   const label = triggerVariant?.label ?? ariaLabel
   const title = triggerVariant?.shortcut ? `${label} (${triggerVariant.shortcut})` : label
 
   /* Arm the last-picked variant on the same click that toggles the menu —
    * floating-ui's useClick (on the reference) handles the open/close half. */
   const handleTriggerClick = (event) => {
-    if (!active && triggerVariant) onChange?.(triggerVariant.id)
+    if (onTrigger) { if (triggerVariant) onTrigger(triggerVariant.id) }
+    else if (!active && triggerVariant) onChange?.(triggerVariant.id)
     if (blurOnClick) event.currentTarget.blur()
   }
 
   const handleSelect = (variant) => {
-    onChange?.(variant.id)
+    if (variant.onSelect) variant.onSelect()
+    else { onChange?.(variant.id); setOwnLast(variant.id) }
     setOpen(false)
   }
 
@@ -113,11 +126,12 @@ const SplitToolButton = ({
         {...popover.getReferenceProps({ onClick: handleTriggerClick })}
         type="button"
         className={`relative kol-btn kol-btn-ghost kol-btn-icon kol-btn-${size} ${active ? 'kol-btn-pressed' : 'kol-btn-quiet'} ${className}`.trim()}
-        aria-pressed={active}
+        disabled={disabled}
+        aria-pressed={onTrigger ? undefined : active}
         aria-label={label}
         title={title}
       >
-        {triggerVariant && <Icon name={triggerVariant.icon} size={glyphSize(size, true)} />}
+        {triggerVariant && <IconC name={triggerVariant.icon} size={glyphSize(size, true)} />}
         <FoldIndicator />
       </button>
       {/* w-max — floats size to content, the menu-family law (2026-08-09). */}
@@ -137,7 +151,7 @@ const SplitToolButton = ({
               className="w-full kol-helper-12 px-3 h-8 inline-flex items-center gap-2 text-body hover:text-emphasis text-left"
             >
               <span className="shrink-0 w-4 inline-flex items-center justify-center">
-                <Icon name={variant.icon} size={14} />
+                <IconC name={variant.icon} size={14} />
               </span>
               <span className="flex-1 truncate">{variant.label}</span>
               <span className="kol-helper-10 text-emphasis shrink-0">

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/ToolPalette.jsx

@@ -0,0 +1,70 @@
+import { Icon } from '@kolkrabbi/kol-icons'
+import Button from '../atoms/Button.jsx'
+import Divider from '../atoms/Divider.jsx'
+import SplitToolButton from '../molecules/SplitToolButton.jsx'
+
+/**
+ * ToolPalette — the editor's tool bar as one row (kol-fxr `shell/panels/ToolPalette.jsx`,
+ * editor-panels-the-held-specs A3, 2026-09-25). Four kinds of cell, all on one pinned-square rung:
+ *
+ * - `tool` — arms a mode; lit while `activeId` is its id
+ * - `action` — a one-shot operation (flip, rotate, duplicate)
+ * - `split` — a fold of variants: `SplitToolButton`. A fold of TOOLS arms (Shape); a fold with
+ *   `action: true` runs its variants instead, the trigger re-running the last-picked one
+ *   (Boolean); a variant with `action: true` inside a tool fold is a one-shot row (Text →
+ *   Kinetic type)
+ * - `divider` — a hairline between groups
+ *
+ * The store is the consumer's (the source read `useTool` + `useComposeState` directly): what
+ * is armed, what each action does and **when an item is disabled** — needs a selection, needs
+ * two booleanable layers — all arrive in `items` and are never inferred here.
+ *
+ * `min-w-0 overflow-x-auto`: at a narrow width the row scrolls in its own box instead of
+ * painting over the rail beside it, as the source learned.
+ *
+ * @param {Object} props
+ * @param {Array<{kind: 'tool'|'action'|'split'|'divider', id?: string, icon?: string, label?: string, shortcut?: string, disabled?: boolean, action?: boolean, variants?: Array<{id: string, label: string, icon: string, shortcut?: string, action?: boolean}>}>} props.items - The row, left to right
+ * @param {string} props.activeId - The armed tool's id — a `tool` item's, or any variant's of a tool fold
+ * @param {Function} props.onSelect - (id) => void — a tool (or a tool variant) was armed
+ * @param {Function} props.onAction - (id) => void — an action (or an action variant) was run
+ * @param {'xs'|'sm'|'md'|'lg'} props.size - The rung — 22 · 26 · 32 · 40 (default: 'md', the source's 32)
+ * @param {ElementType} props.iconComponent - Glyph renderer receiving `{ name, size, className, style }` (default: DS `Icon`)
+ * @param {string} props.className - Additional classes on the row
+ */
+const blur = (e) => e.currentTarget.blur()
+
+const ToolPalette = ({
+  items = [],
+  activeId,
+  onSelect,
+  onAction,
+  size = 'md',
+  iconComponent = Icon,
+  className = '',
+}) => (
+  <div className={`flex items-center gap-1 min-w-0 overflow-x-auto ${className}`.trim()}>
+    {items.map((it, i) => {
+      if (it.kind === 'divider') return <Divider key={`d${i}`} variant="vertical" height={20} className="mx-1.5 shrink-0" />
+      const tip = it.shortcut ? `${it.label} (${it.shortcut})` : it.label
+      if (it.kind === 'split') {
+        const variants = (it.variants ?? []).map((v) => (v.action && !it.action ? { ...v, onSelect: () => onAction?.(v.id) } : v))
+        const run = (id) => (it.action ? onAction : onSelect)?.(id)
+        return (
+          <SplitToolButton key={it.id} variants={variants} value={activeId} size={size} iconComponent={iconComponent}
+            active={!it.action && variants.some((v) => v.id === activeId && !v.action)}
+            onChange={run} onTrigger={it.action ? run : undefined}
+            disabled={it.disabled} blurOnClick aria-label={it.label} />
+        )
+      }
+      const isTool = it.kind === 'tool'
+      return (
+        <Button key={it.id} variant="ghost" size={size} quiet iconOnly={it.icon} iconComponent={iconComponent}
+          pressed={isTool ? activeId === it.id : undefined} disabled={it.disabled}
+          aria-label={it.label} title={tip}
+          onClick={(e) => { (isTool ? onSelect : onAction)?.(it.id); blur(e) }} />
+      )
+    })}
+  </div>
+)
+
+export default ToolPalette

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}
-    />
-  )
-}