@kolkrabbi/kol-component 0.247.0 → 0.249.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.247.0",
+  "version": "0.249.0",
   "description": "The core component library",
   "license": "MIT",
   "type": "module",

package/src/molecules/Modal.jsx

@@ -2,6 +2,7 @@ import { createContext, useCallback, useContext, useEffect, useRef, useState } f
 import { createPortal } from 'react-dom'
 import Button from '../atoms/Button.jsx'
 import Input from '../atoms/Input.jsx'
+import ToggleCheckbox from '../atoms/ToggleCheckbox.jsx'
 
 /**
  * Modal — promise-based prompt + confirm + alert dialogs.
@@ -21,10 +22,26 @@ import Input from '../atoms/Input.jsx'
  * Returned promise resolves to:
  *   - prompt  → string (value) on submit, `null` on cancel
  *   - confirm → boolean: `true` on confirm, `false` on cancel
+ *   - confirm with `options` → `{ ok, values: { [id]: boolean } }` (below)
  *   - alert   → undefined, once dismissed. One button; `okLabel` names it.
  *     Added 2026-09-22 (media-pages-route-dialogs-through-usemodal) so an
  *     error report needs no native `alert()` beside DS prompts.
  *
+ * TOGGLES (upload-dialog-optimise-and-keep-originals, kol-website 2026-10-09): `confirm` takes
+ * `options: [{ id, label, hint?, defaultValue? }]`, drawn as `ToggleCheckbox` rows between the
+ * title and the buttons, so one dialog asks a question and its settings:
+ *
+ *   const { ok, values } = await confirm('Web-optimise raster images?', {
+ *     okLabel: 'Upload',
+ *     options: [
+ *       { id: 'optimise', label: 'Optimise', hint: '≤2560 px, ≤500 KB', defaultValue: true },
+ *       { id: 'keepOriginals', label: 'Keep originals', hint: 'original/<name>', defaultValue: true },
+ *     ],
+ *   })
+ *
+ * `values` comes back on cancel too (the toggles as left), so a consumer can remember them either
+ * way. Without `options`, confirm still resolves a plain boolean — existing callers untouched.
+ *
  * Mounted once at the app root (BrandLayout). Renders into `document.body`
  * via portal, so it floats above any rail / scroll-context.
  */
@@ -45,8 +62,8 @@ export function ModalProvider({ children }) {
     new Promise((resolve) => setState({ kind: 'prompt', title, defaultValue, okLabel, cancelLabel, resolve })),
   [])
 
-  const confirm = useCallback((title, { okLabel, cancelLabel } = {}) =>
-    new Promise((resolve) => setState({ kind: 'confirm', title, okLabel, cancelLabel, resolve })),
+  const confirm = useCallback((title, { okLabel, cancelLabel, options } = {}) =>
+    new Promise((resolve) => setState({ kind: 'confirm', title, okLabel, cancelLabel, options: options?.length ? options : null, resolve })),
   [])
 
   const alert = useCallback((title, { okLabel } = {}) =>
@@ -66,11 +83,14 @@ export function ModalProvider({ children }) {
 
 function ModalView({ state, closeWith }) {
   const [val, setVal] = useState(state.defaultValue ?? '')
+  const [values, setValues] = useState(() => Object.fromEntries((state.options ?? []).map((o) => [o.id, !!o.defaultValue])))
   const inputRef = useRef(null)
 
-  /* alert resolves `undefined` whichever way it is dismissed */
-  const submit = () => closeWith(state.kind === 'prompt' ? val : state.kind === 'alert' ? undefined : true)
-  const cancel = () => closeWith(state.kind === 'prompt' ? null : state.kind === 'alert' ? undefined : false)
+  /* alert resolves `undefined` whichever way it is dismissed; a confirm with toggles resolves
+   * `{ ok, values }` */
+  const answer = (ok) => (state.options ? { ok, values } : ok)
+  const submit = () => closeWith(state.kind === 'prompt' ? val : state.kind === 'alert' ? undefined : answer(true))
+  const cancel = () => closeWith(state.kind === 'prompt' ? null : state.kind === 'alert' ? undefined : answer(false))
 
   useEffect(() => {
     if (state.kind === 'prompt') inputRef.current?.focus()
@@ -80,7 +100,7 @@ function ModalView({ state, closeWith }) {
     }
     window.addEventListener('keydown', onKey)
     return () => window.removeEventListener('keydown', onKey)
-  }, [state.kind, val, closeWith]) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [state.kind, val, values, closeWith]) // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <div
@@ -118,6 +138,19 @@ function ModalView({ state, closeWith }) {
             className="w-full"
           />
         )}
+        {state.options && (
+          <div className="flex flex-col gap-3">
+            {state.options.map((o) => (
+              <ToggleCheckbox
+                key={o.id}
+                label={o.label}
+                hint={o.hint}
+                checked={values[o.id]}
+                onChange={(next) => setValues((v) => ({ ...v, [o.id]: next }))}
+              />
+            ))}
+          </div>
+        )}
         <div className="flex gap-2 justify-end">
           {state.kind !== 'alert' && <Button size="sm" onClick={cancel}>{state.cancelLabel ?? 'Cancel'}</Button>}
           <Button tone="primary"   size="sm" onClick={submit}>{state.okLabel ?? 'OK'}</Button>
@@ -147,9 +180,10 @@ export function useModal() {
       const v = window.prompt(title, def)
       return v
     },
-    confirm: async (title) => {
-      if (typeof window === 'undefined') return false
-      return window.confirm(title)
+    /* the fallback cannot draw toggles: options come back at their defaults */
+    confirm: async (title, { options } = {}) => {
+      const ok = typeof window !== 'undefined' && window.confirm(title)
+      return options?.length ? { ok, values: Object.fromEntries(options.map((o) => [o.id, !!o.defaultValue])) } : ok
     },
     alert: async (title) => {
       if (typeof window !== 'undefined') window.alert(title)

package/src/organisms/MediaLibrary.jsx

@@ -14,7 +14,7 @@ import ContentRow from '../molecules/ContentRow.jsx'
 import ContentFilters from './ContentFilters.jsx'
 import { MenuItem, MenuDropdownItem, MenuDropdownDivider } from '../molecules/MenuItem.jsx'
 import MediaViewer from './MediaViewer.jsx'
-import { MediaLibraryBrowse, MediaLibraryLibrary } from './MediaLibraryPages.jsx'
+import { MediaLibraryBrowse, MediaLibraryLibrary, SETTINGS_BASE } from './MediaLibraryPages.jsx'
 import MediaLibraryExplorer from './MediaLibraryExplorer.jsx'
 import { SettingsChipRow, chipCls } from './SettingsPanel.jsx'
 import { filterMedia } from '../utilities/mediaSearch.js'
@@ -1021,11 +1021,16 @@ function PickerShell({ onClose, onPick }) {
  * `defaults` to seed) · `folderTree` (browse: the baked tree) · `headerActions`
  * (the app's own upload / write icons) · `refreshKey`.
  *
- * @param {string}   variant  'explorer' | 'browse' | 'library' | 'modal' | 'page' (alias of library)
+ * @param {string}   variant  'explorer' | 'browse' | 'library' | 'modal' | 'picker' | 'page' (alias of library)
+ *   `picker` — the modal card with the BROWSE surface inside it (columns · rows · grid, the
+ *   bucket dropdown, search), read-only, and a Use footer for the selected file. Same props
+ *   as `modal` (`open` · `client` · `accept` · `onClose` · `onSelect`); `modal` keeps its own
+ *   grid | list listing. Was apps/media's picker A (2026-10-08) — a variant, not a choice
+ *   (user 2026-10-09: "why is this even a choice? it should be a variant option").
  *   `explorer` is browse + library as two views of ONE surface — one header, one
  *   count, one listing, a switch beside the bucket dropdown. Prefer it for a new
  *   consumer; the other two remain for the ones that stack them by hand.
- * @param {boolean}  open     modal only — mounts the overlay
+ * @param {boolean}  open     modal / picker only — mounts the overlay
  * @param {object}   client   `{ listMedia, mediaUrl, proxied? }`; omit inside a provider
  * @param {string|string[]} accept  'all' (default) = everything · one kind · an
  *   allow-list `['image','video']`
@@ -1052,6 +1057,7 @@ export default function MediaLibrary({
     if (!open) return null
     return withProvider(<PickerShell onClose={onClose} onPick={onSelect} />, opts)
   }
+  if (variant === 'picker') return open ? <PickerBrowse client={client} accept={accept} onClose={onClose} onSelect={onSelect} {...pageProps} /> : null
   if (variant === 'browse') return <MediaLibraryBrowse client={client} {...pageProps} />
   /* `explorer` = the two above as TWO VIEWS OF ONE SURFACE, one mounted at a
    * time behind a switch in the header — one wordmark, one count, one listing,
@@ -1064,6 +1070,42 @@ export default function MediaLibrary({
   return <MediaLibraryLibrary client={client} {...pageProps} {...seed} />
 }
 
+/* THE PICKER — the browse surface in the modal card. Read-only (no verbs, no drop, no trash: a
+ * picker picks). Its settings are held here and never saved, so a consumer's stored browse
+ * settings are untouched. The views take the card's height less its chrome. */
+const PICKER_CHROME = 280 // ponytail: hand-measured header + count line + footer; tune if the chrome changes
+function PickerBrowse({ client, accept, onClose, onSelect, title = 'MEDIA', ...browseProps }) {
+  const [settings, setSettings] = useState(() => ({ ...SETTINGS_BASE, columnHeight: `calc(var(--kol-media-picker-h) - ${PICKER_CHROME}px)` }))
+  const [bucket, setBucket] = useState(browseProps.bucket)
+  const [file, setFile] = useState(null)
+  const ok = !!file && acceptsKind(accept)({ ...file, kind: kindOf(file) })
+  const use = () => {
+    onSelect?.(client.mediaUrl(file.key, bucket ?? undefined), { contentType: file.contentType, kind: kindOf(file) })
+    onClose?.()
+  }
+  return (
+    <FullscreenOverlay open scrim onClose={onClose}>
+      <div className="kol-media-picker gap-4">
+        <MediaLibraryBrowse
+          {...browseProps}
+          client={client}
+          title={title}
+          bucket={bucket}
+          onBucketChange={(id) => { setBucket(id); browseProps.onBucketChange?.(id) }}
+          settings={settings}
+          onSettingsChange={setSettings}
+          onPickFile={setFile}
+        />
+        <div className="mt-auto flex items-center justify-end gap-4">
+          <span className="kol-mono-12 text-fg-48 truncate mr-auto">{file ? file.key : 'Select a file'}</span>
+          <Button tone="grey" size="md" onClick={onClose}>Cancel</Button>
+          <Button size="md" disabled={!ok} onClick={use}>Use</Button>
+        </div>
+      </div>
+    </FullscreenOverlay>
+  )
+}
+
 /** @deprecated 2026-08-01 — alias of `MediaLibrary variant="modal"`. Kept so
  *  existing call sites and the fxr editor's `onPick` naming keep working;
  *  drops when nobody imports it (04-retirements.md). */