@kolkrabbi/kol-component 0.168.0 → 0.170.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.168.0",
+  "version": "0.170.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/molecules/ShellDrawer.jsx

@@ -38,6 +38,7 @@ const FOCUSABLE =
  * @param {number|string} height    panel height (px number or CSS length); omit for a content-sized sheet — `bottom` only
  * @param {ReactNode}     header    header-row content beside the close button (replaces the source's baked-in wordmark)
  * @param {boolean}       backdrop  render the dimming scrim (default true); false = panel alone, no darken/blur, close via × / Esc
+ * @param {'xs'|'sm'|'md'|'lg'} closeSize  the close control's rung (default 'sm' — match the controls in the panel)
  * @param {ReactNode}     children  scrollable panel body
  * @param {string}        className extra classes on the panel
  */
@@ -50,6 +51,14 @@ export default function ShellDrawer({
   header,
   closeSide = 'end',
   backdrop = true,
+  /* THE CLOSE SITS ON THE ROW'S RUNG (user 2026-09-03, on the settings drawer:
+   * *"does this button follow the size ladder?"*). It was pinned `md` (32) while
+   * every control in the panel below it — the switches, the dropdowns, the reset
+   * frame — is `sm` (26), so the one control that is not a setting was the
+   * largest thing on the surface. A size is a height and a row is one height;
+   * `sm` is the default because a drawer header sits over its own controls.
+   * Named `closeSize`, not `size` — `size` is already the panel's own box. */
+  closeSize = 'sm',
   children,
   className = '',
   /* SettingsPanelApproved (2026-08-27): the settings drawer has neither */
@@ -207,7 +216,7 @@ export default function ShellDrawer({
           {closeSide !== 'start' && (
             <Button
               variant="nav"
-              size="md"
+              size={closeSize}
               iconOnly="x"
               onClick={onClose}
               aria-label="Close"

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/utilities/FullscreenOverlay.jsx

@@ -6,8 +6,11 @@ import Button from '../atoms/Button.jsx'
  * wears. Owns dismissal (Escape, backdrop, close button), scroll lock and
  * stacking; the consumer supplies the panel.
  *
- * The close control is the DS `Button` (quiet, icon-only, the `x` glyph) —
- * the same idiom as ShellLayout's. It was a hand-rolled <button> printing a
+ * The close control is the DS `Button` (icon-only, the `x` glyph) — the estate's
+ * ONE close idiom, and therefore ONE SIZE: `sm` (26), matching `ShellDrawer`'s
+ * (2026-09-03). It took Button's `md` default while the drawer's went to `sm`,
+ * which is two sizes for one idiom — the thing the single-idiom ruling exists to
+ * stop. It was a hand-rolled <button> printing a
  * literal `×` TEXT CHARACTER until 2026-08-01: no icon, no states, and a
  * typographic multiplication sign standing in for a glyph the icon set has
  * always shipped.
@@ -69,10 +72,11 @@ export default function FullscreenOverlay({ open, onClose, closeButton = true, c
            * user ruling): the estate's close X is the drawer trigger's bare
            * `nav` glyph — the boxed outline treatment was a second design one
            * tap away from the first, and had he kept a box it would have worn
-           * `primary`, never `outline`. Same variant, same default square as
-           * the trigger. */
+           * `primary`, never `outline`. Same variant as the trigger; the SQUARE
+           * is `sm` since 2026-09-03, one size for the one idiom. */
           <Button
             variant="nav"
+            size="sm"
             iconOnly="x"
             className="kol-overlay-close"
             onClick={onClose}