@kolkrabbi/kol-component 0.194.0 → 0.195.0

package/package.json

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

@@ -357,9 +357,37 @@ export function MediaLibraryBrowse({
         onSettings={() => setSettingsOpen(true)} />
 
       <div className="flex flex-col gap-3">
-        {/* Breadcrumb (uppercase, active segment at full ink) · folder-view toggle */}
+        {/* Breadcrumb (uppercase, active segment at full ink) · folder-view toggle
+          *
+          * AT 390 THIS ROW FAILED (ColumnBrowserStackMode items 3 + 7, kol-r2b2
+          * 2026-09-03, measured on a live site): breadcrumb, the folder-view
+          * toggle and the ROW·COLUMN pair share one `justify-between` line with
+          * no wrap or collapse rule, so the crumbs wrapped to two lines and
+          * `COLUMN` was cut off. Below `md` the crumb becomes ONE middle-elided
+          * path line and the toggles collapse into the settings drawer — where
+          * both already live, so nothing new was minted to hold them. Both
+          * references (iOS Files, Dropbox) put these behind a `···` too. */}
         <div className="flex items-center justify-between gap-4">
-          <div className="flex items-center gap-2 kol-mono-12">
+          {/* the elided line — first segment, an ellipsis for anything between,
+            * and the current one. Below `md` only. */}
+          <div className="flex md:hidden items-center gap-2 kol-mono-12 min-w-0">
+            <button className={crumbCls(appRoot)} onClick={() => { setAppRoot(true); setPickedFile(null); setPrefix('') }}>{ROOT}</button>
+            {!appRoot && bucketMeta.id && crumbs.length > 1 && (
+              <><span className="text-oq-32">/</span><span className="text-oq-32">…</span></>
+            )}
+            {!appRoot && bucketMeta.id && (
+              <span className="flex items-center gap-2 min-w-0">
+                <span className="text-oq-32">/</span>
+                <button
+                  className={`${crumbCls(true)} truncate`}
+                  onClick={() => setPrefix(crumbs.length ? crumbs.join('/') + '/' : '')}
+                >
+                  {(crumbs[crumbs.length - 1] ?? label).toUpperCase()}
+                </button>
+              </span>
+            )}
+          </div>
+          <div className="hidden md:flex items-center gap-2 kol-mono-12">
             <button className={crumbCls(appRoot)} onClick={() => { setAppRoot(true); setPickedFile(null); setPrefix('') }}>{ROOT}</button>
             {!appRoot && bucketMeta.id && (
               <span className="flex items-center gap-2">
@@ -381,7 +409,10 @@ export function MediaLibraryBrowse({
               <span className="flex items-center gap-2"><span className="text-oq-32">/</span><span className="text-oq-96">{pickedFile.key.slice(prefix.length).toUpperCase()}</span></span>
             )}
           </div>
-          <div className="flex items-center gap-6">
+          {/* the control cluster is desktop-only — below `md` these two toggles
+            * are the same setting the drawer already carries, and nothing in
+            * this row survives 390 */}
+          <div className="hidden md:flex items-center gap-6">
             <ViewToggle viewMode={folderView} onViewChange={(v) => setSettings({ ...settings, folderView: v })} variant="icon" options={FOLDER_VIEW_OPTIONS} />
             <Divider variant="vertical" />
             <div className="flex items-center gap-4">