@kolkrabbi/kol-component 0.213.0 → 0.214.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.213.0",
+  "version": "0.214.0",
   "description": "KOL design-system components \u2014 atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",

package/src/organisms/MediaLibraryPages.jsx

@@ -601,17 +601,6 @@ export function MediaLibraryBrowse({
           <MediaSettings bucketMeta={bucketMeta} settings={settings} profile={profile} onChange={setSettings} onReset={() => setSettings(null)} onClose={() => setSettingsOpen(false)} settingsFooter={settingsFooter} />
         )}
 
-        {/* THE TAB PILL (item 16) — floats over the list, so the list owes it
-            room or its last row sits under the bar forever. Below `md` only;
-            above it the 2026-08-26 one-view ruling stands and nothing here
-            renders. */}
-        {tabs?.length > 0 && (
-          <>
-            <div className="md:hidden" aria-hidden="true" style={{ height: TABBAR_H }} />
-            <MobileTabBar tabs={tabs} value={activeTab} onChange={onTabChange} />
-          </>
-        )}
-
         {folderView === 'columns' ? (
           <div ref={columnsRef} className="relative">
             <ColumnBrowser
@@ -680,6 +669,24 @@ export function MediaLibraryBrowse({
           </p>
         )}
         {void onOpen}
+
+        {/* THE TAB PILL (item 16) — floats over the list, so the list owes it
+            room or its last row sits under the bar forever.
+            THE SPACER GOES LAST, AND THAT IS THE WHOLE POINT
+            (TabBarSpacerAboveTheList, kol-r2b2 2026-09-04). `MobileTabBar` is
+            `fixed`, so where it sits in the tree is irrelevant — the SPACER is
+            in NORMAL FLOW, so its position is everything. Rendered before the
+            list it failed twice at once: a 56px hole punched into the gap under
+            the pinned search, and the last row still running 99px under the
+            bar. The comment above named the failure it was meant to prevent and
+            the block sat in the wrong place anyway. Below `md` only; above it
+            the 2026-08-26 one-view ruling stands. */}
+        {tabs?.length > 0 && (
+          <>
+            <div className="md:hidden" aria-hidden="true" style={{ height: TABBAR_H }} />
+            <MobileTabBar tabs={tabs} value={activeTab} onChange={onTabChange} />
+          </>
+        )}
       </div>
     </div>
   )

package/src/utilities/FullscreenOverlay.jsx

@@ -18,7 +18,26 @@ import CloseButton from './CloseButton.jsx'
 const FOCUSABLE =
   'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
 
-export default function FullscreenOverlay({ open, onClose, closeButton = true, children }) {
+export default function FullscreenOverlay({
+  open, onClose, closeButton = true,
+  /* WHERE FOCUS LANDS ON OPEN. The sheet takes it by default, which is right
+   * for a browser and wrong for a sheet opened to be TYPED IN: a child's
+   * `autoFocus` cannot win, because child effects run BEFORE the parent's and
+   * this one moves focus afterwards — so the field focuses and is immediately
+   * robbed, with nothing in either file looking wrong (kol-fxr measured it on
+   * design-editor 0.10.0: Save As routed into the dialog correctly and focus
+   * sat on `.kol-overlay-sheet`). Pass a ref to the node that should hold it.
+   * A ref that is empty on mount falls back to the sheet, so a conditional
+   * field cannot leave the overlay unfocused.
+   *
+   * The ref may point at the control ITSELF or at a WRAPPER around it — the
+   * first focusable descendant is taken. That is deliberate: a DS input is a
+   * component, not a DOM node, and whether it forwards a ref is a detail no
+   * caller should have to know to put focus in it. A plain `<div ref>` always
+   * works. */
+  initialFocus,
+  children,
+}) {
   const sheetRef = useRef(null)
 
   /* Escape closes; Tab is TRAPPED in the sheet (SettingsPanel, 2026-08-26 —
@@ -45,13 +64,19 @@ export default function FullscreenOverlay({ open, onClose, closeButton = true, c
     const prev = document.body.style.overflow
     document.body.style.overflow = 'hidden'
     const prevFocus = document.activeElement
-    sheetRef.current?.focus()
+    const wanted = initialFocus?.current
+    const target = wanted
+      ? (typeof wanted.focus === 'function' && wanted.matches?.(FOCUSABLE)
+          ? wanted
+          : wanted.querySelector?.(FOCUSABLE) ?? wanted)
+      : sheetRef.current
+    target?.focus?.()
     return () => {
       document.removeEventListener('keydown', onKey)
       document.body.style.overflow = prev
       if (prevFocus instanceof HTMLElement) prevFocus.focus()
     }
-  }, [open, onClose])
+  }, [open, onClose, initialFocus])
 
   if (!open) return null