@kolkrabbi/kol-component 0.213.0 → 0.215.0

package/package.json

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

@@ -99,7 +99,10 @@ const SORT_OPTIONS = [
 ]
 
 /* bytes → weight: `utilities/formatSize` since 0.178.0 — one copy, exported */
-const formatDate = (iso) => (iso ? new Date(iso).toISOString().slice(0, 10) : '')
+/* the pages' shared date default. Named `default*` because BOTH pages now take
+ * a `formatDate` prop, and a prop of the same name would shadow this into a TDZ
+ * error at the destructure. */
+const defaultFormatDate = (iso) => (iso ? new Date(iso).toISOString().slice(0, 10) : '')
 const isImage = (ct) => !!ct && ct.startsWith('image/')
 const isVideo = (ct) => !!ct && ct.startsWith('video/')
 
@@ -378,7 +381,9 @@ export function MediaLibraryBrowse({
    * `ColumnBrowser`, IT IS ADDED HERE IN THE SAME EDIT, unless the page holds a
    * real opinion about it (it owns `height`, the widths and `partition`, so
    * those are deliberately absent from this list). */
-  thumbnailFor, folderMeta, formatDate, stackView,
+  thumbnailFor, folderMeta, stackView,
+  /* defaulted, not bare — see the note on the sibling page */
+  formatDate = defaultFormatDate,
   /* THE TAB PILL'S LIST (ColumnBrowserMobileViews item 16). What a tab MEANS is
    * the consumer's — a repo whose surfaces are routes wires its router here.
    * No tabs, no pill, and the page is exactly what it was. */
@@ -601,17 +606,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 +674,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>
   )
@@ -692,6 +704,21 @@ export function MediaLibraryLibrary({
   /* the same pill the browse page takes — the wall is one of the surfaces it
      switches between, so it has to carry it too (item 16) */
   tabs, activeTab, onTabChange,
+  /* A SEAM ON ONE PAGE IS A SEAM ON BOTH, when the field is one both render
+   * (FormatDateSkipsTheLibraryPage, kol-r2b2 2026-09-04). This reached
+   * `MediaLibraryBrowse` and not here, so a consumer passing ONE props object
+   * to both got `19.6.2026` on the Browse tab and `2026-06-19` on the Files tab
+   * — two formats for one field, one tap apart. The desktop stack had the same
+   * mismatch; the tab pill just moved the two halves close enough to see it.
+   *
+   * THE RULE, WIDENED — the fourth defect of this exact shape (`settingsFooter`
+   * documented and hardcoded past · `thumbnailFor` and `folderMeta` not
+   * forwarded · now this). These two pages are ONE SURFACE SPLIT IN TWO and a
+   * consumer hands the same props object to both, so: a prop naming how a
+   * SHARED FIELD renders is added to BOTH pages in the same edit. Props about a
+   * concept only one page has stay put — `thumbnailFor`, `folderMeta` and
+   * `stackView` are folder and stack concepts and are correctly absent here. */
+  formatDate = defaultFormatDate,
 }) {
   const [ownBucket, setOwnBucket] = useState(bucket)
   const bucketId = bucket ?? ownBucket

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