@kolkrabbi/kol-component 0.108.0 → 0.109.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.108.0",
+  "version": "0.109.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/MediaLibrary.jsx

@@ -1,13 +1,15 @@
 import { createContext, useContext, useEffect, useMemo, useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
+import ActionButton from '../atoms/ActionButton.jsx'
 import Button from '../atoms/Button.jsx'
 import Divider from '../atoms/Divider.jsx'
 import Input from '../atoms/Input.jsx'
 import SegmentedToggle from '../atoms/SegmentedToggle.jsx'
+import SizeOrDownload from '../atoms/SizeOrDownload.jsx'
 import ViewToggle from '../atoms/ViewToggle.jsx'
 import FullscreenOverlay from '../utilities/FullscreenOverlay.jsx'
-import MediaCard from '../molecules/MediaCard.jsx'
-import MediaRow from '../molecules/MediaRow.jsx'
+import ContentCard from '../molecules/ContentCard.jsx'
+import ContentRow from '../molecules/ContentRow.jsx'
 import ContentFilters from './ContentFilters.jsx'
 import MediaViewer from './MediaViewer.jsx'
 import { SettingsChipRow, chipCls } from './SettingsPanel.jsx'
@@ -25,8 +27,12 @@ import { SettingsChipRow, chipCls } from './SettingsPanel.jsx'
  * Same contract as kol-dashboards / kol-chess / kol-content.
  *
  * COMPOSED, NOT BUILT. Every part is an existing DS member:
- *   MediaCard      — the grid tile (thumb · download chip · name · meta · actions)
- *   MediaRow       — the list row (thumb · name · date · size · actions)
+ *   ContentCard    — the grid tile, `variant="default"` (thumb · download in the
+ *                    frame corner · title · date · size-or-download · inline actions)
+ *   ContentRow     — the list row, `variant="default"` (thumb · title · date · size · actions)
+ *                    MediaCard / MediaRow retired 2026-08-26 (ContentSetRetirement);
+ *                    this was the DS's own last composition of them, swapped 2026-08-27
+ *                    onto kol-r2b2 FileList's ContentCard / ContentRow shape.
  *   MediaViewer    — the lightbox, via its `actions` slot
  *   ContentFilters — the PICKER's chrome (search, kind filter, view toggle, N-of-M)
  *   FullscreenOverlay — the picker's scrim, dismissal and close button
@@ -650,7 +656,7 @@ function Toolbar({ viewMode, onViewMode }) {
  * picker; `onPick` is the only difference between them. */
 function FilesBody({ files, viewMode, onOpen, onPick }) {
   const { mediaUrl, viewable, prefix, stats, more, pageSize, showMore } = useMediaLibrary()
-  const [copied, copy] = useCopy()
+  const [, copy] = useCopy()
 
   if (files.length === 0) {
     return (
@@ -680,46 +686,60 @@ function FilesBody({ files, viewMode, onOpen, onPick }) {
       </div>
     )
   }
-  const actionsFor = (row) => (
-    <div className="flex items-center gap-2">
-      {onPick && <Button size="sm" onClick={() => onPick(row)}>Use</Button>}
-      <Button variant="secondary" size="sm" onClick={() => copy(urlFor(row))}>
-        {copied === urlFor(row) ? 'Copied' : 'Copy URL'}
-      </Button>
-      <Button variant="ghost" size="sm" iconOnly="download" iconSize={14} href={urlFor(row)} aria-label={`Download ${row.displayKey}`} />
+  /* INLINE controls, never labelled Buttons (ContentSetRetirement, 2026-08-27):
+   * the card's `actions` float in the plate's corner beside the title, so a
+   * labelled Button there sits on the copy — kol-r2b2's column of
+   * `.kol-inline-control`s is the shape that fits. The card's download is the
+   * frame-corner `control` + the size slot (SizeOrDownload); the row keeps its
+   * glyph beside Copy. `Use` (picker only) is the same control wearing `plus`. */
+  const actionsFor = (row, form) => (
+    <div className={form === 'row' ? 'flex items-center gap-2' : 'flex h-full flex-col items-center justify-between'}>
+      {onPick && <ActionButton chrome="inline" size="sm" icon="plus" confirmIcon="check" label="Use" confirmLabel="Used" onAction={() => onPick(row)} />}
+      <ActionButton chrome="inline" size="sm" icon="copy" confirmIcon="check" label="Copy URL" confirmLabel="Copied" onAction={() => copy(urlFor(row))} />
+      {form === 'row' && (
+        <ActionButton chrome="inline" size="sm" icon="download" confirmIcon="check" label="Download" confirmLabel="Downloaded" href={urlFor(row)} />
+      )}
     </div>
   )
-  const nameFor = (row) => <p className="kol-mono-12 text-body truncate" title={row.key}>{row.displayKey}</p>
-  const date = (row) => (row.uploaded ? String(row.uploaded).slice(0, 10) : '')
+  /* the title voice is the family's ruled default (heading-04 card / heading-05
+   * row, truncated by ContentText); the full key rides as the tooltip, as before */
+  const nameFor = (row) => <span title={row.key}>{row.displayKey}</span>
+  const date = (row) => (row.uploaded ? String(row.uploaded).slice(0, 10) : undefined)
+  const size = (row) => formatSize(row.size) || undefined
 
   return (
     <>
       {viewMode === 'list' ? (
-        <ul className="kol-media-list">
+        <div className="kol-media-list">
           {files.map((row) => (
-            <MediaRow
+            <ContentRow
               key={row.key}
-              thumb={thumbFor(row)}
-              name={nameFor(row)}
+              variant="default"
+              media={thumbFor(row)}
+              title={nameFor(row)}
               date={date(row)}
-              size={formatSize(row.size)}
-              actions={actionsFor(row)}
+              size={size(row)}
+              actions={actionsFor(row, 'row')}
             />
           ))}
-        </ul>
+        </div>
       ) : (
-        <ul className="kol-media-grid">
+        <div className="kol-media-grid">
           {files.map((row) => (
-            <MediaCard
+            <ContentCard
               key={row.key}
-              thumb={thumbFor(row)}
-              name={nameFor(row)}
-              meta={`${formatSize(row.size)}${date(row) ? ` · ${date(row)}` : ''}`}
-              downloadHref={urlFor(row)}
-              actions={actionsFor(row)}
+              variant="default"
+              media={thumbFor(row)}
+              control={
+                <ActionButton chrome="media" icon="download" confirmIcon="check" label="Download" confirmLabel="Downloaded" href={urlFor(row)} />
+              }
+              title={nameFor(row)}
+              date={date(row)}
+              size={size(row) && <SizeOrDownload href={urlFor(row)}>{size(row)}</SizeOrDownload>}
+              actions={actionsFor(row, 'card')}
             />
           ))}
-        </ul>
+        </div>
       )}
       {more > 0 && (
         <button