@kolkrabbi/kol-component 0.246.0 → 0.248.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.246.0",
+  "version": "0.248.0",
   "description": "The core component library",
   "license": "MIT",
   "type": "module",
@@ -26,8 +26,8 @@
     "embla-carousel-react": "^8.6.0",
     "pdfjs-dist": "^6.3.289",
     "react-syntax-highlighter": "^16.1.1",
-    "@kolkrabbi/kol-markdown": "^0.1.3",
-    "@kolkrabbi/kol-search": "^0.3.0"
+    "@kolkrabbi/kol-search": "^0.3.0",
+    "@kolkrabbi/kol-markdown": "^0.1.3"
   },
   "peerDependencies": {
     "@kolkrabbi/kol-icons": ">=0.22.0",
@@ -38,7 +38,7 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-icons": "^0.33.1"
+    "@kolkrabbi/kol-icons": "^0.35.0"
   },
   "files": [
     "src",

package/src/molecules/ContentRow.jsx

@@ -6,8 +6,8 @@ import ContentText from './ContentText.jsx'
  * the variant has one) beside the ruled text. Box values — thumb size, gap,
  * padding, frame — default per variant to the RULED structures from the live
  * review (06-content-card-system.md §2 boxes): default is a bare table-like
- * line with a 48px thumb; catalog/print are framed between-headers with no
- * thumb; article rides a 120px 16:9 thumb; work a framed 64px row; typeface a
+ * line with a 48px thumb; catalog/print are framed between-headers with a
+ * 36 square thumb when `media` is passed (none without); article rides a 120px 16:9 thumb; work a framed 64px row; typeface a
  * framed no-thumb block.
  *
  * @param {string}    variant   file | catalog | print | article | work | typeface | roster
@@ -57,7 +57,10 @@ const BOX = {
   /* catalog/print rows render AT 36px — the shipped GridCard list row is a
    * fixed 36 and the Y padding was what pushed it past that. X padding stays;
    * `minH` is now the whole height budget and the row centres inside it. */
-  catalog:  { thumb: 0,   ratio: '1 / 1',  pad: `0 ${S3}`,     gap: S3, frame: 'var(--kol-fg-04)', bg: 'var(--kol-surface-tertiary)', minH: 36, align: 'items-center', hover: 'var(--kol-oq-04)' },
+  /* catalog carries a thumb (2026-10-09 — user: "catalog should change its default"): the full
+   * 36 rung, square, and ONLY when `media` is passed — every catalog row that never had one keeps
+   * none, rather than growing a MISSING plate (`mediaOnly`). */
+  catalog:  { thumb: 36,  mediaOnly: true, ratio: '1 / 1',  pad: `0 ${S3}`,     gap: S3, frame: 'var(--kol-fg-04)', bg: 'var(--kol-surface-tertiary)', minH: 36, align: 'items-center', hover: 'var(--kol-oq-04)' },
   /* ListingCard's row thumb is `bg-fg-12` bare — a tint, no border. */
   /* article had NO hover of any kind — the only row in the family you could
    * point at and get nothing back. It has no surface of its own, so it takes
@@ -188,7 +191,7 @@ export default function ContentRow({
    * consumer listing coverless documents should not have to say it two
    * different ways on the card and the row. `media={false}` reads the same in
    * both; `thumb` still wins when it is passed explicitly. */
-  const thumbPx = thumb ?? (media === false ? 0 : box.thumb)
+  const thumbPx = thumb ?? (media === false || (box.mediaOnly && media == null) ? 0 : box.thumb)
   const padY = (paddingY != null ? `${paddingY}px` : String(box.pad)).trim().split(/\s+/)[0]
 
   /* The md: STEP is a custom property, not a Tailwind variant. Tailwind cannot

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)