@kolkrabbi/kol-component 0.249.0 → 0.251.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.249.0",
+  "version": "0.251.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",
@@ -38,7 +38,7 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-icons": "^0.35.0"
+    "@kolkrabbi/kol-icons": "^0.37.0"
   },
   "files": [
     "src",

package/src/organisms/MediaLibrary.jsx

@@ -2,6 +2,7 @@ import { createContext, useContext, useEffect, useMemo, useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import ActionButton from '../molecules/ActionButton.jsx'
 import Button from '../atoms/Button.jsx'
+import CloseButton from '../atoms/CloseButton.jsx'
 import Divider from '../atoms/Divider.jsx'
 import Dropdown from '../molecules/Dropdown.jsx'
 import Input from '../atoms/Input.jsx'
@@ -1084,7 +1085,10 @@ function PickerBrowse({ client, accept, onClose, onSelect, title = 'MEDIA', ...b
     onClose?.()
   }
   return (
-    <FullscreenOverlay open scrim onClose={onClose}>
+    /* THE X SITS ON THE HEADER ROW (MediaPickerCloseOnTheHeaderRow, kol-fxr 2026-10-10 — user: *"x
+     * close is in a weird place, align better"*). The overlay's corner close floated ~100px above
+     * the header and lined up with nothing; it rides `headerTrailing`, after the gear, instead. */
+    <FullscreenOverlay open scrim onClose={onClose} closeButton={false}>
       <div className="kol-media-picker gap-4">
         <MediaLibraryBrowse
           {...browseProps}
@@ -1095,6 +1099,7 @@ function PickerBrowse({ client, accept, onClose, onSelect, title = 'MEDIA', ...b
           settings={settings}
           onSettingsChange={setSettings}
           onPickFile={setFile}
+          headerTrailing={<>{browseProps.headerTrailing}<CloseButton onClick={onClose} /></>}
         />
         <div className="mt-auto flex items-center justify-end gap-4">
           <span className="kol-mono-12 text-fg-48 truncate mr-auto">{file ? file.key : 'Select a file'}</span>

package/src/organisms/MediaLibraryPages.jsx

@@ -2599,7 +2599,7 @@ export function MediaLibraryBrowse({
             {atTop ? '1 folder' : `${bucketList.length} ${bucketList.length === 1 ? 'bucket' : 'buckets'}`}
             {folderTree && ` · ${Object.values(folderTree).reduce((n, t) => n + (t.files ?? 0), 0)} files · ${formatSize(Object.values(folderTree).reduce((n, t) => n + (t.bytes ?? 0), 0))}`}
           </p>
-          {isWall ? sizeSlider : rowSlider}
+          {isWall ? sizeSlider : !phone && rowSlider}
           </div>
         ) : isWall ? (
           /* ONE LINE'S HEIGHT, like the other views' count line — the slider is 24px tall and made