@kolkrabbi/kol-component 0.240.0 → 0.242.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.240.0",
+  "version": "0.242.0",
   "description": "The core component library",
   "license": "MIT",
   "type": "module",
@@ -26,8 +26,8 @@
     "embla-carousel-react": "^8.6.0",
     "pdfjs-dist": "^6.3.289",
     "react-syntax-highlighter": "^16.1.1",
-    "@kolkrabbi/kol-search": "^0.3.0",
-    "@kolkrabbi/kol-markdown": "^0.1.3"
+    "@kolkrabbi/kol-markdown": "^0.1.3",
+    "@kolkrabbi/kol-search": "^0.3.0"
   },
   "peerDependencies": {
     "@kolkrabbi/kol-icons": ">=0.22.0",

package/src/organisms/MediaLibrary.jsx

@@ -3,8 +3,8 @@ import { Icon } from '@kolkrabbi/kol-icons'
 import ActionButton from '../molecules/ActionButton.jsx'
 import Button from '../atoms/Button.jsx'
 import Divider from '../atoms/Divider.jsx'
+import Dropdown from '../molecules/Dropdown.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'
@@ -12,6 +12,7 @@ import { Tooltip } from '../utilities/Popover.jsx'
 import ContentCard from '../molecules/ContentCard.jsx'
 import ContentRow from '../molecules/ContentRow.jsx'
 import ContentFilters from './ContentFilters.jsx'
+import { MenuItem, MenuDropdownItem, MenuDropdownDivider } from '../molecules/MenuItem.jsx'
 import MediaViewer from './MediaViewer.jsx'
 import { MediaLibraryBrowse, MediaLibraryLibrary } from './MediaLibraryPages.jsx'
 import MediaLibraryExplorer from './MediaLibraryExplorer.jsx'
@@ -136,6 +137,8 @@ function kindOf(o) {
  * every stream it held. A picker asks for what it can pick: `['image','video']`. */
 function acceptsKind(accept) {
   if (!accept || accept === 'all') return () => true
+  /* a function reads the object itself — a vector-only picker wants `.svg`, which is `image` by kind */
+  if (typeof accept === 'function') return accept
   const wanted = new Set(Array.isArray(accept) ? accept : [accept])
   return (o) => wanted.has(o.kind)
 }
@@ -298,6 +301,14 @@ export function MediaLibraryProvider({
    * from the flat view you just left. Derived, not an effect. */
   const [paging, setPaging] = useState({ id: null, visible: 0 })
 
+  /* THE STORE (2026-10-07, design-editor's picker folded into this one): a client with
+   * `buckets()` lists one at a time and the modal's header switches it — the browse page's
+   * rule, "a client with none is one bucket and no dropdown". Switching lands at the root:
+   * a prefix is one bucket's path. */
+  const buckets = useMemo(() => client?.buckets?.() ?? [], [client])
+  const [bucket, setBucketState] = useState(() => buckets[0]?.id ?? null)
+  const setBucket = (id) => { setBucketState(id); setPrefix('') }
+
   useEffect(() => {
     if (!client) return undefined
     let cancelled = false
@@ -305,12 +316,12 @@ export function MediaLibraryProvider({
     setLoading(true)
     setError(null)
     client
-      .listMedia('', { signal: controller.signal })
+      .listMedia('', { signal: controller.signal, bucket: bucket ?? undefined })
       .then((objs) => { if (!cancelled) setObjects(objs) })
       .catch((e) => { if (!cancelled && e.name !== 'AbortError') setError(e.message) })
       .finally(() => { if (!cancelled) setLoading(false) })
     return () => { cancelled = true; controller.abort() }
-  }, [client])
+  }, [client, bucket])
 
   /* click an inactive field → ascending; click the active one → flip */
   const sortBy = (by) =>
@@ -344,6 +355,10 @@ export function MediaLibraryProvider({
     const kindCounts = files.reduce((acc, o) => { acc[o.kind] = (acc[o.kind] || 0) + 1; return acc }, {})
     const kindsPresent = Object.keys(kindCounts).sort().map((k) => ({ value: k, label: KIND_LABEL[k] ?? k, count: kindCounts[k] }))
 
+    /* `q` is the paging key's and the stats' view of the search — the engine swap (kol-search,
+     * 2026-09-29) dropped its definition and the modal threw on open; found 2026-10-07 when the
+     * editor's doors moved onto it, since no consumer had opened this variant in between. */
+    const q = search.trim().toLowerCase()
     const filtered = filterMedia(files.filter((o) => kinds.size === 0 || kinds.has(o.kind)), search, { nameOf: (o) => o.displayKey })
     const sorted = sortFiles(filtered, sort)
 
@@ -396,10 +411,13 @@ export function MediaLibraryProvider({
       viewable,
       loading,
       error,
-      mediaUrl: client?.mediaUrl ?? ((key) => key),
+      bucket,
+      buckets,
+      setBucket,
+      mediaUrl: client?.mediaUrl ? (key) => client.mediaUrl(key, bucket ?? undefined) : (key) => key,
       proxied: client?.proxied ?? ((url) => url),
     }
-  }, [objects, prefix, flat, sort, search, kinds, paging, pageSize, loading, error, accept, client])
+  }, [objects, prefix, flat, sort, search, kinds, paging, pageSize, loading, error, accept, client, bucket, buckets])
 
   return <MediaLibraryContext.Provider value={value}>{children}</MediaLibraryContext.Provider>
 }
@@ -880,7 +898,7 @@ function PickerBody({ items, viewMode, onOpen, onPick }) {
 /* The picker's chrome — ContentFilters owns the animated search, the kind
  * filter, the view toggle and the N-of-M count; sort rides its header slot. */
 function LibraryChrome({ onOpen, onPick }) {
-  const { folders, sorted, sort, sortBy } = useMediaLibrary()
+  const { folders, sorted, sort, sortBy, bucket, buckets, setBucket } = useMediaLibrary()
   const [viewMode, setViewMode] = useState('grid')
 
   const items = useMemo(
@@ -891,6 +909,11 @@ function LibraryChrome({ onOpen, onPick }) {
     [folders, sorted],
   )
   const kinds = useMemo(() => [...new Set(sorted.map((o) => o.kind))].sort(), [sorted])
+  /* THE STORE — the header at `md+`, a row above the list on a phone. `cls` on the control rather
+   * than a wrapper: a `display: contents` wrapper lost to the phone hide in one host. */
+  const store = (cls = '') => buckets.length > 1 && (
+    <Dropdown size="sm" className={`min-w-0 max-w-[45vw] md:w-48 md:max-w-none ${cls}`.trim()} options={buckets.map((b) => ({ value: b.id, label: b.label }))} value={bucket} onChange={setBucket} aria-label="Store" />
+  )
 
   return (
     <>
@@ -900,16 +923,40 @@ function LibraryChrome({ onOpen, onPick }) {
         titleIcon="folder"
         totalCount={items.length}
         searchKeys={['name']}
-        viewMode={viewMode}
-        onViewModeChange={setViewMode}
-        viewModeOptions={VIEW_OPTIONS}
         mutuallyExclusiveFilters={['kind']}
         filterGroups={[{ label: 'Kind', key: 'kind', values: ['folder', ...kinds] }]}
-        headerActions={
-          <SegmentedToggle size="sm" value={sort.by} onChange={sortBy} options={SORT_OPTIONS} ariaLabel="Sort by" />
-        }
-        renderItem={(filtered, mode) => (
-          <PickerBody items={filtered} viewMode={mode} onOpen={onOpen} onPick={onPick} />
+        /* THE WALL'S ROW (2026-10-08, one header for the family): the view pair as icons on the row's
+         * trailing slot, the sort as the row below at `md+` — what `MediaLibraryLibrary` draws — and
+         * below `md` both fold into one `···`, the browse page's fold. It wore GRID · LIST as text and
+         * four sort cells in the header. The store (when the client has more than one) rides the
+         * header at `md+` and is a row above the list on a phone. Decided on the recommendation. */
+        headerActions={store('max-md:hidden')}
+        trailingActions={(
+          <>
+            <div className="hidden md:flex items-center gap-6"><ViewToggle viewMode={viewMode} onViewChange={setViewMode} variant="icon" options={VIEW_OPTIONS} /></div>
+            <div className="md:hidden">
+              <MenuItem label={<Icon name="more" size={16} />} caret={false} align="end" size="sm" buttonClassName="shrink-0 px-2">
+                {({ close }) => (
+                  <div className="py-1 w-[200px]">
+                    {VIEW_OPTIONS.map((opt) => (
+                      <MenuDropdownItem key={opt.value} onClick={() => { setViewMode(opt.value); close() }} shortcut={viewMode === opt.value ? <Icon name="check" size={11} /> : undefined}>{opt.label}</MenuDropdownItem>
+                    ))}
+                    <MenuDropdownDivider />
+                    {SORT_OPTIONS.map((opt) => (
+                      <MenuDropdownItem key={opt.value} onClick={() => { sortBy(opt.value); close() }} shortcut={sort.by === opt.value ? <Icon name={sort.dir === 'desc' ? 'arrow-down' : 'arrow-up'} size={11} /> : undefined}>{opt.label}</MenuDropdownItem>
+                    ))}
+                  </div>
+                )}
+              </MenuItem>
+            </div>
+          </>
+        )}
+        belowActions={<div className="h-8 hidden md:flex items-center"><SortControls /></div>}
+        renderItem={(filtered) => (
+          <>
+            {buckets.length > 1 && <div className="md:hidden flex items-center gap-3 flex-wrap" style={{ marginBottom: 'var(--kol-spacing-3)' }}>{store()}</div>}
+            <PickerBody items={filtered} viewMode={viewMode} onOpen={onOpen} onPick={onPick} />
+          </>
         )}
       />
       <PathBar />
@@ -931,7 +978,9 @@ function PickerShell({ onClose, onPick }) {
       {/* While the viewer is up it owns Escape — handing the picker a no-op
         * close means one keypress steps back one level instead of exiting the
         * whole picker, which is the behaviour the fxr fork hand-rolled. */}
-      <FullscreenOverlay open onClose={viewerIndex === null ? onClose : () => {}}>
+      {/* `scrim` — a modal OVER the page it was opened from, not an opaque surface in its place
+        * (user, 2026-10-07, on labs: "its not overlay, its complete full screen") */}
+      <FullscreenOverlay open scrim onClose={viewerIndex === null ? onClose : () => {}}>
         <div className="kol-media-picker">
           <LibraryChrome onOpen={setViewerIndex} onPick={pick} />
         </div>

package/src/organisms/MediaLibraryPages.jsx

@@ -1077,6 +1077,10 @@ export function MediaLibraryBrowse({
   /* `bucketLevel` — keep title → bucket → folders with ONE bucket (kol-client-olina 2026-09-23).
    * Absent, a one-bucket consumer collapses the level as ruled 2026-09-03. */
   bucketLevel = false,
+  /* `onPickFile(o | null)` — the selected file, reported as it changes (picker A, 2026-10-08: the
+   * browse surface inside the modal card needs the selection for its Use button). Keys are
+   * bucket-relative. Absent, nothing. */
+  onPickFile,
 }) {
   const [ownPrefix, setOwnPrefix] = useState('')
   const prefix = prefixProp ?? ownPrefix
@@ -1090,6 +1094,7 @@ export function MediaLibraryBrowse({
   const [settingsOpen, setSettingsOpen] = useState(false)
   const [trashOpen, setTrashOpen] = useState(false)
   const [pickedFile, setPickedFile] = useState(null)
+  useEffect(() => { onPickFile?.(pickedFile) }, [pickedFile]) // eslint-disable-line react-hooks/exhaustive-deps
   /* ROW VIEW PICKS, and only one at a time: a click selects and fills the preview, a DOUBLE click
    * opens (user 2026-09-22, Finder's behaviour — "clicking shouldnt automatically open it"). The
    * chevron still expands in place, which is the third thing and always was. */
@@ -2600,8 +2605,12 @@ export function MediaLibraryBrowse({
 
         {/* ONE MENU FOR EVERY ROW. `useContextMenu` carries the payload from whichever row opened
           * it, so this is a single instance rather than one per row, and the entries are built from
-          * what `fileActions` actually supplies — a read-only bucket gets no menu at all. */}
-        {canWrite && (
+          * what `fileActions` actually supplies. IT MOUNTS ON A READ-ONLY BUCKET TOO (kol-website,
+          * 2026-10-08: on B2 "I cant right click to get context modal … cant download assets"): Copy URL
+          * and Download are read verbs — the client's URLs — and gating the whole menu on `canWrite`
+          * took them away with the write verbs. `fa` is the write seam: empty when the bucket cannot
+          * be written, so every write verb below folds away and the read verbs stay. */}
+        {(() => { const fa = canWrite ? fileActions : {}; return (
           <ContextMenu menu={menu}>
             {(target) => {
               if (!target) return null
@@ -2611,7 +2620,7 @@ export function MediaLibraryBrowse({
                * not one of them — renaming five things to one name is not a thing — so it stays
                * single and disappears from a multi-selection rather than lying about what it does. */
               const many = (target.targets ?? []).length > 1 ? target.targets : null
-              const custom = (fileActions.items ?? []).filter((it) => !it.when || it.when(target))
+              const custom = (fa.items ?? []).filter((it) => !it.when || it.when(target))
               const customItems = custom.length > 0 && (
                 <>
                   <MenuDropdownDivider />
@@ -2625,7 +2634,7 @@ export function MediaLibraryBrowse({
                   <>
                     <MenuDropdownItem disabled>{many.length} selected</MenuDropdownItem>
                     <MenuDropdownDivider />
-                    {fileActions.move && (
+                    {fa.move && (
                       <MenuDropdownItem iconLeft={<Icon name="arrow-right" size={14} />} onClick={() => doBatch(many, 'move', 'Move')}>Move {many.length} to…</MenuDropdownItem>
                     )}
                     {many.every((p) => !p.endsWith('/')) && (
@@ -2635,7 +2644,7 @@ export function MediaLibraryBrowse({
                         {canTag && <MenuDropdownItem iconLeft={<Icon name="hash-01" size={14} />} onClick={() => doTags(many)}>Add tags to {many.length}…</MenuDropdownItem>}
                       </>
                     )}
-                    {fileActions.remove && (
+                    {fa.remove && (
                       <MenuDropdownItem iconLeft={<Icon name="trash" size={14} />} onClick={() => doBatch(many, 'remove', 'Delete')}>Delete {many.length}</MenuDropdownItem>
                     )}
                     {customItems}
@@ -2644,7 +2653,7 @@ export function MediaLibraryBrowse({
               }
               return (
                 <>
-                  {fileActions.createFolder && (
+                  {fa.createFolder && (
                     <MenuDropdownItem iconLeft={<Icon name="folder" size={14} />} onClick={() => doCreateFolder(isFolder ? target.path : (isLevel ? target.path : prefix))}>
                       New folder{isFolder ? ` in ${target.path.replace(/\/$/, '').split('/').pop()}` : ''}
                     </MenuDropdownItem>
@@ -2655,7 +2664,7 @@ export function MediaLibraryBrowse({
                     <MenuDropdownItem iconLeft={<Icon name="file" size={14} />} onClick={() => newDocument(isFolder ? target.path : (isLevel ? target.path : prefix))}>
                       New document…
                     </MenuDropdownItem>
-                  ) : fileActions.createFile && (
+                  ) : fa.createFile && (
                     <MenuDropdownItem iconLeft={<Icon name="file" size={14} />} onClick={() => doCreateFile(isFolder ? target.path : (isLevel ? target.path : prefix))}>
                       New file
                     </MenuDropdownItem>
@@ -2666,10 +2675,10 @@ export function MediaLibraryBrowse({
                     </MenuDropdownItem>
                   )}
                   {!isLevel && <MenuDropdownDivider />}
-                  {!isLevel && fileActions.rename && (
+                  {!isLevel && fa.rename && (
                     <MenuDropdownItem iconLeft={<Icon name="edit" size={14} />} onClick={() => doRename(target.path, isFolder)}>Rename</MenuDropdownItem>
                   )}
-                  {!isLevel && fileActions.move && (
+                  {!isLevel && fa.move && (
                     <MenuDropdownItem iconLeft={<Icon name="arrow-right" size={14} />} onClick={() => doMove(target.path)}>Move to…</MenuDropdownItem>
                   )}
                   {/* A FOLDER GETS COPY URL TOO (user 2026-09-23) — through the SAME `mediaUrl`
@@ -2693,7 +2702,7 @@ export function MediaLibraryBrowse({
                   {target.type === 'file' && canEdit && editKindOf(target.o ?? { key: target.path }) && (
                     <MenuDropdownItem iconLeft={<Icon name="edit" size={14} />} onClick={() => openEditor(objects.find((o) => o.key === target.path) ?? { key: target.path })}>Edit</MenuDropdownItem>
                   )}
-                  {!isLevel && fileActions.remove && (
+                  {!isLevel && fa.remove && (
                     <>
                       <MenuDropdownDivider />
                       <MenuDropdownItem iconLeft={<Icon name="trash" size={14} />} onClick={() => doDelete(target.path, isFolder)}>Delete</MenuDropdownItem>
@@ -2704,7 +2713,7 @@ export function MediaLibraryBrowse({
               )
             }}
           </ContextMenu>
-        )}
+        ) })()}
         {busyAction && <span className="sr-only" role="status">Working…</span>}
 
         {/* THE TAB PILL (item 16) — floats over the list, so the list owes it
@@ -3112,8 +3121,31 @@ export function MediaLibraryLibrary({
         layoutOptions={layoutOptions}
         layout={layout}
         onLayoutChange={setLayout}
-        trailingActions={<div className="flex items-center gap-6"><ViewToggle viewMode={layout} onViewChange={setLayout} variant="icon" options={LAYOUT_OPTIONS} /></div>}
-        belowActions={layout === 'off' ? null : <div className="h-8 flex items-center"><SortControls options={SORT_OPTIONS} sortBy={sortBy} sortDir={sortDir} onSort={handleSort} /></div>}
+        /* BELOW `md` THE VIEWS AND THE SORT FOLD INTO ONE `···` (2026-10-08, apps/media/library at 390:
+         * the FILES row, the three view icons and NAME · DATE · SIZE · KIND stacked three rows over the
+         * list) — the browse page's fold, item 15, so the two pages fold the same way. Decided on the
+         * recommendation, for review. */
+        trailingActions={(
+          <>
+            <div className="hidden md:flex items-center gap-6"><ViewToggle viewMode={layout} onViewChange={setLayout} variant="icon" options={LAYOUT_OPTIONS} /></div>
+            <div className="md:hidden">
+              <MenuItem label={<Icon name="more" size={16} />} caret={false} align="end" size="sm" buttonClassName="shrink-0 px-2">
+                {({ close }) => (
+                  <div className="py-1 w-[200px]">
+                    {LAYOUT_OPTIONS.map((opt) => (
+                      <MenuDropdownItem key={opt.value} onClick={() => { setLayout(opt.value); close() }} shortcut={layout === opt.value ? <Icon name="check" size={11} /> : undefined}>{opt.label}</MenuDropdownItem>
+                    ))}
+                    <MenuDropdownDivider />
+                    {SORT_OPTIONS.map((opt) => (
+                      <MenuDropdownItem key={opt.value} onClick={() => { handleSort(opt.value); close() }} shortcut={sortBy === opt.value ? <Icon name={sortDir === 'desc' ? 'arrow-down' : 'arrow-up'} size={11} /> : undefined}>{opt.label}</MenuDropdownItem>
+                    ))}
+                  </div>
+                )}
+              </MenuItem>
+            </div>
+          </>
+        )}
+        belowActions={layout === 'off' ? null : <div className="h-8 hidden md:flex items-center"><SortControls options={SORT_OPTIONS} sortBy={sortBy} sortDir={sortDir} onSort={handleSort} /></div>}
         /* ONE WALL BODY, shared with the merged surface (2026-09-22) */
         renderItem={(filtered) => (
           <WallBody files={filtered} layout={layout} sortBy={sortBy} sortDir={sortDir} pageSize={pageSize} listId={listId}

package/src/organisms/MediaTileGallery.jsx

@@ -25,9 +25,12 @@ export default function MediaTileGallery({ items = [], layout = 'stack', cols =
 
   return (
     <>
+      {/* `cols` is the count from `sm` up; below it the grid is two across (08-breakpoints rule 6 —
+        * grid collapse is canonical, first break sm). The count rides a variable so the theme's one
+        * phone rule can override it: an inline `gridTemplateColumns` could not be out-ranked. */}
       <div
-        className={isGrid ? 'grid gap-4' : 'flex flex-col gap-4'}
-        style={isGrid ? { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` } : undefined}
+        className={isGrid ? 'kol-media-tiles grid gap-4' : 'flex flex-col gap-4'}
+        style={isGrid ? { '--kol-media-tiles-cols': cols } : undefined}
       >
         {items.map((item, i) => (
           <figure key={i} className="min-w-0">

package/src/organisms/MediaViewer.jsx

@@ -66,8 +66,13 @@ function ViewerStage({ media, index, onIndexChange }) {
     return () => document.removeEventListener('keydown', onKey)
   }, [emblaApi])
 
+  /* THE STAGE SETS ITS OWN WIDTH (2026-10-08, apps/media/viewer): FullscreenOverlay's sheet hugs
+   * its content, and the overlay is a grid whose one track is sized by that content — so `w-full`
+   * here resolved against nothing, the embla track grew to every slide side by side (six slides,
+   * 3888px at 1440) and the stage showed blank with the first image 1.6k off the left edge. The
+   * viewport minus the overlay's 24px lane each side is the width a fullscreen stage means. */
   return (
-    <div className="relative w-full">
+    <div className="relative w-[calc(100vw-3rem)]">
       <div className="overflow-hidden" ref={emblaRef}>
         <div className="flex items-center">
           {media.map((item, i) => (
@@ -122,8 +127,15 @@ export default function MediaViewer({ open, media = [], index = 0, onIndexChange
   const actionRow = typeof actions === 'function' ? actions(media[index], index) : actions
 
   return (
-    <FullscreenOverlay open onClose={onClose}>
+    /* `scrim` (2026-10-08, apps/media/viewer): without it the overlay painted its opaque light
+     * surface, and the viewer's inverse ink — caption, the paging chips — drew light on light and
+     * read as "an image and nothing else". The chips (md and up) and the caption were always there. */
+    <FullscreenOverlay open scrim onClose={onClose}>
       <ViewerStage media={media} index={index} onIndexChange={onIndexChange} />
+      {/* on a phone the chips are off and a swipe pages — the position says there is more */}
+      {media.length > 1 && (
+        <div className="md:hidden mt-3 text-center kol-helper-12 text-fg-inverse-64" aria-live="polite">{index + 1} / {media.length}</div>
+      )}
       {actionRow && (
         <div className="mt-4 flex items-center justify-center gap-2">{actionRow}</div>
       )}