@kolkrabbi/kol-component 0.167.0 → 0.169.0

package/package.json

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

@@ -329,10 +329,18 @@ export function MediaLibraryBrowse({
   const crumbs = prefix ? prefix.replace(/\/$/, '').split('/') : []
 
   /* the virtual root — one browser for the whole client: root row = the title,
-   * its children the buckets, stepping into one IS the bucket switch */
+   * its children the buckets, stepping into one IS the bucket switch.
+   *
+   * ONE BUCKET GETS NO BUCKET LEVEL (one-bucket-consumer, kol-client-olina
+   * 2026-09-03): with a single bucket the second column was a row that named
+   * the only thing it could name, under a root that named the app — two levels
+   * to reach a folder. The virtual root collapses to the empty string, which
+   * makes every `slice(VROOT.length)` below a no-op and leaves column 0 as the
+   * bucket's own folders. Multi-bucket browse is untouched. */
+  const single = buckets.length <= 1
   const ROOT = title
   const label = bucketMeta.label || 'bucket'
-  const VROOT = `${ROOT}/${label}/`
+  const VROOT = single ? '' : `${ROOT}/${label}/`
   const treeFolders = (level) => (folderTree?.[bucketMeta.id]?.folders ?? [])
     .filter((p) => p.startsWith(level) && p.length > level.length && !p.slice(level.length, -1).includes('/'))
     .map((p) => p.slice(level.length))
@@ -412,8 +420,10 @@ export function MediaLibraryBrowse({
               columnWidths={settings.columnWidths}
               onColumnResize={(i, px) => setSettings({ ...settings, columnWidths: { ...(settings.columnWidths ?? {}), [i]: px } })}
               objects={objects.filter((o) => !isSystemFile(o.key)).map((o) => ({ ...o, key: `${VROOT}${o.key}` }))}
-              prefix={appRoot ? `${ROOT}/` : `${VROOT}${prefix}`}
+              prefix={single ? prefix : (appRoot ? `${ROOT}/` : `${VROOT}${prefix}`)}
               onPrefix={(v) => {
+                /* single: the browser's path IS the bucket path, no segment to strip */
+                if (single) { setAppRoot(false); setPrefix(v); return }
                 const [, seg, ...rest] = v.split('/')
                 const target = buckets.find((b) => b.label === seg)
                 if (!target && buckets.length) { setAppRoot(true); setPickedFile(null); setPrefix(''); return }
@@ -435,8 +445,10 @@ export function MediaLibraryBrowse({
                 return <KindPreview o={real} urlOf={(x) => mediaUrl(x.key)} poster={poster ? mediaUrl(poster) : undefined} kindOf={kindOf} kindLabel={KIND_LABEL} />
               }}
               partition={(objs, level) => {
-                if (level === '') return { folders: [`${ROOT}/`], files: [] }
-                if (level === `${ROOT}/`) return { folders: (buckets.length ? buckets : [bucketMeta]).map((b) => `${b.label || 'bucket'}/`), files: [] }
+                if (!single) {
+                  if (level === '') return { folders: [`${ROOT}/`], files: [] }
+                  if (level === `${ROOT}/`) return { folders: (buckets.length ? buckets : [bucketMeta]).map((b) => `${b.label || 'bucket'}/`), files: [] }
+                }
                 const live = partition(objs, level)
                 const baked = treeFolders(level.slice(VROOT.length))
                 return { folders: [...new Set([...baked, ...live.folders])].sort(), files: live.files }

package/src/organisms/SettingsPanel.jsx

@@ -16,13 +16,6 @@ import FullscreenOverlay from '../utilities/FullscreenOverlay.jsx'
  * TWO PRESENTATIONS, ONE ANATOMY (the user's ask): `variant="drawer"` is a
  * right-anchored sheet over a scrim, `variant="overlay"` the same panel
  * centred. Only the shell differs; header · intro · sections · footer are the
- * NO SCRIM ON THE SETTINGS DRAWER (user 2026-08-30: "remove the background
- * overlay and blur when settings sidebar is opened"). `backdrop={false}` — the
- * panel alone, no 60% black wash and no `blur(1px)`. You change how a surface
- * looks WHILE looking at it, and a scrim hides the thing you are tuning. Escape
- * and the × still close it; only the dimming is gone. Scoped to this panel —
- * every other ShellDrawer consumer keeps its backdrop.
- *
  * same nodes in both. Neither shell is built here — the drawer IS ShellDrawer
  * (scrim, Escape, focus trap, scroll lock, focus return, the × control) and
  * the overlay IS FullscreenOverlay (scrim, Escape, backdrop dismiss, scroll
@@ -100,8 +93,13 @@ export default function SettingsPanel({
 
   return (
     /* THE APPROVED DRAWER (SettingsPanelApproved, kol-r2b2 2026-08-27 — user: "LOCK
-       THIS"): no edge, no shadow, a Divider under the header, the sections. */
-    <ShellDrawer open={open} onClose={onClose} side="right" width={width} header={header} className={className} edge={false} shadow={false} backdrop={false}>
+       THIS"): no edge, no shadow, a Divider under the header, the sections.
+       THE SCRIM IS BACK (settings-drawer-has-no-surface, kol-client-olina
+       2026-09-03). `backdrop={false}` stood here from 2026-08-30; the drawer
+       paints `bg-surface-primary`, the same token as the page, so the scrim was
+       the only thing separating them — with it off the panel was invisible and
+       the controls floated in the right third of the screen. */
+    <ShellDrawer open={open} onClose={onClose} side="right" width={width} header={header} className={className} edge={false} shadow={false}>
       <div className="flex flex-col gap-4"><Divider />{body}</div>
     </ShellDrawer>
   )