@kolkrabbi/kol-component 0.223.0 → 0.225.0

package/src/organisms/LayerStack.jsx

@@ -3,7 +3,7 @@ import { Icon } from '@kolkrabbi/kol-icons'
 import Button from '../atoms/Button.jsx'
 import Input from '../atoms/Input.jsx'
 import { MenuDropdownItem, MenuDropdownNest } from '../molecules/MenuItem.jsx'
-import { usePopover, PopoverPanel } from '../utilities/Popover.jsx'
+import { usePopover, PopoverPanel, Tooltip } from '../utilities/Popover.jsx'
 import { rowLabelForLayer, findLayerDeep } from '../hooks/layerTree.js'
 
 /* DS icon names for the engine's types — every one a shipped v1 glyph. A
@@ -51,11 +51,11 @@ function useShiftClickHandlers(onSelect, onShiftSelect) {
 
 function Chevron({ IconC, collapsed, onToggle, title }) {
   return (
+    <Tooltip label={title} asChild>
     <button
       type="button"
       onClick={onToggle}
       aria-expanded={!collapsed}
-      title={title}
       className="kol-layer-stack-collapse"
     >
       <IconC
@@ -64,6 +64,7 @@ function Chevron({ IconC, collapsed, onToggle, title }) {
         style={{ transform: collapsed ? 'rotate(-90deg)' : 'rotate(0deg)', transition: 'transform 150ms' }}
       />
     </button>
+    </Tooltip>
   )
 }
 
@@ -160,24 +161,26 @@ function LayerRow({
             </span>
           </button>
         )}
+        <Tooltip label={layer.visible ? 'Hide' : 'Show'} asChild>
         <button
           type="button"
           onClick={onToggleVisibility}
-          title={layer.visible ? 'Hide' : 'Show'}
           aria-pressed={!layer.visible}
           className={`kol-layer-stack-toggle kol-layer-stack-toggle--eye${active || !layer.visible ? ' is-pinned' : ''}`}
         >
           <IconC name={layer.visible ? 'eye-on' : 'eye-off'} size={12} />
         </button>
+        </Tooltip>
+        <Tooltip label={layer.locked ? 'Unlock' : 'Lock'} asChild>
         <button
           type="button"
           onClick={onToggleLock}
-          title={layer.locked ? 'Unlock' : 'Lock'}
           aria-pressed={!!layer.locked}
           className={`kol-layer-stack-toggle kol-layer-stack-toggle--lock${active || layer.locked ? ' is-pinned' : ''}${layer.locked ? ' is-on' : ''}`}
         >
           <IconC name={layer.locked ? 'lock' : 'unlock'} size={12} />
         </button>
+        </Tooltip>
       </div>
     </div>
   )
@@ -419,16 +422,17 @@ export default function LayerStack({
         * consumer's keymap. */}
       {onGroup && layerSelectionCount >= 2 && (
         <div className="mt-auto flex items-center gap-2 px-3 h-10 border-t border-fg-08">
+          <Tooltip label={`Group ${layerSelectionCount} selected layers`}>
           <Button
             iconComponent={IconC}
             variant="primary"
             size="sm"
             iconLeft="layers"
             onClick={() => onGroup(layerSelectedIds)}
-            title={`Group ${layerSelectionCount} selected layers`}
           >
             Group {layerSelectionCount}
           </Button>
+          </Tooltip>
         </div>
       )}
     </div>
@@ -469,6 +473,7 @@ export function AddLayerButton({
   return (
     <>
       <span ref={popover.refs.setReference} {...popover.getReferenceProps()} className="inline-flex">
+        <Tooltip label="Add layer">
         <Button
           iconComponent={IconC}
           variant="primary"
@@ -476,8 +481,8 @@ export function AddLayerButton({
           quiet
           iconOnly="plus"
           aria-label="Add layer"
-          title="Add layer"
         />
+        </Tooltip>
       </span>
       <PopoverPanel popover={popover} className="py-1" style={{ width: menuWidth }}>
         {types.map((t) => {

package/src/organisms/MediaLibrary.jsx

@@ -708,7 +708,7 @@ function FilesBody({ files, viewMode, onOpen, onPick }) {
   )
   /* the title voice is the family's ruled default (heading-04 card / heading-05
    * row, truncated by ContentText); the full key rides as the tooltip, as before */
-  const nameFor = (row) => <span title={row.key}>{row.displayKey}</span>
+  const nameFor = (row) => <Tooltip label={row.key} asChild><span>{row.displayKey}</span></Tooltip>
   const date = (row) => (row.uploaded ? String(row.uploaded).slice(0, 10) : undefined)
   const size = (row) => formatSize(row.size) || undefined
 

package/src/organisms/MediaLibraryExplorer.jsx

@@ -1,5 +1,7 @@
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { MediaLibraryBrowse } from './MediaLibraryPages.jsx'
+import { useModal } from '../molecules/Modal.jsx'
+import useMediaQuery from '../hooks/useMediaQuery.js'
 
 /**
  * MediaLibraryExplorer — the media surface, and since 2026-09-22 a thin name for it.
@@ -17,15 +19,77 @@ import { MediaLibraryBrowse } from './MediaLibraryPages.jsx'
  * @param {'columns'|'rows'|'grid'|'list'} view  controlled view; omit and the page reads its own setting
  * @param {Function} onViewChange  (view) => void
  * @param {'columns'|'rows'|'grid'|'list'} defaultView  first view when uncontrolled and nothing is stored
+ *
+ * THE TOOL'S OWN BEHAVIOUR, opt-in (media parity, 2026-09-26 — user: "media in shell is just media in
+ * shell.. so there shouldnt really be a reason to diff"). apps/media carried these in its App.jsx, so
+ * the same tool one shell over had none of them. They are the product's, so they live with it:
+ *
+ * @param {boolean}  keys       the view keys — B browse · F files · R rows · C columns · G grid — and N
+ *                              (new folder, when `fileActions.createFolder` is given), plus K → `onKinds`.
+ *                              Ignored while typing and with ⌘ / Ctrl / ⌥ held
+ * @param {boolean}  phoneTabs  below 768 the surface is three tabs — Browse · Files · Kinds (Kinds only
+ *                              with `onKinds`); a tab picks the view, Kinds opens the overview and leaves
+ *                              the surface where it was
+ * @param {Function} onKinds    opens the app's file-formats overview (K, the Kinds tab)
  */
-export default function MediaLibraryExplorer({ view, onViewChange, defaultView, ...pageProps }) {
+const TABS = [
+  { value: 'browse', label: 'Browse', icon: 'folder' },
+  { value: 'files', label: 'Files', icon: 'view-list' },
+  { value: 'kinds', label: 'Kinds', icon: 'grid' },
+]
+/* a key → the view it shows and the phone tab that view belongs to (apps/media's map, verbatim) */
+const VIEW_KEYS = { b: ['columns', 'browse'], f: ['list', 'files'], r: ['rows', 'browse'], c: ['columns', 'browse'], g: ['grid', 'files'] }
+
+export default function MediaLibraryExplorer({ view, onViewChange, defaultView, keys = false, phoneTabs = false, onKinds, ...pageProps }) {
   const [ownView, setOwnView] = useState(view ?? defaultView)
   const current = view ?? ownView
+  const setView = (v) => { setOwnView(v); onViewChange?.(v) }
+  const [tab, setTab] = useState('browse')
+  const phone = useMediaQuery('(max-width: 767px)')
+  const modal = useModal()
+
+  /* the latest props for the key handler, without re-binding it every render */
+  const live = useRef()
+  live.current = { onKinds, prefix: pageProps.prefix ?? '', createFolder: pageProps.fileActions?.createFolder, modal }
+  useEffect(() => {
+    if (!keys) return undefined
+    const onKey = (e) => {
+      if (e.metaKey || e.ctrlKey || e.altKey) return
+      const el = e.target
+      if (el?.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(el?.tagName ?? '')) return
+      const { onKinds: kinds, prefix, createFolder, modal: m } = live.current
+      if (VIEW_KEYS[e.key]) {
+        e.preventDefault()
+        const [v, t] = VIEW_KEYS[e.key]
+        setOwnView(v); onViewChange?.(v); setTab(t)
+      } else if (e.key === 'k' && kinds) {
+        e.preventDefault(); kinds()
+      } else if (e.key === 'n' && createFolder) {
+        e.preventDefault()
+        m.prompt(`New folder in ${prefix || 'the bucket root'}:`, '', { okLabel: 'Create' }).then((name) => {
+          if (name?.trim()) createFolder(`${prefix}${name.trim().replace(/^\/+|\/+$/g, '')}/`)
+        })
+      }
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [keys]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const onTabChange = (v) => {
+    if (v === 'kinds') { onKinds?.(); return }
+    setTab(v)
+    setView(v === 'files' ? 'list' : 'columns')
+  }
+  const tabProps = phoneTabs && phone
+    ? { tabs: onKinds ? TABS : TABS.filter((t) => t.value !== 'kinds'), activeTab: tab, onTabChange }
+    : {}
+
   return (
     <MediaLibraryBrowse
       {...pageProps}
+      {...tabProps}
       view={current}
-      onViewChange={(v) => { setOwnView(v); onViewChange?.(v) }}
+      onViewChange={setView}
     />
   )
 }