@kolkrabbi/kol-shell 0.49.0 → 0.51.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.49.0",
+  "version": "0.51.0",
   "private": false,
   "description": "KOL application shell — fixed 48px NavRail + AppShell layout root, PageShell/PageHeader scaffolds, ContentFilters catalog organism, GridCard, SettingsScaffold, WalkthroughPanel, ShortcutsOverlay. App chrome (kol-framework owns site chrome). Nav items, content, shortcuts and settings are consumer-injected. Sits above @kolkrabbi/kol-{theme,component,framework}.",
   "license": "MIT",
@@ -12,7 +12,7 @@
     "./src/*": "./src/*"
   },
   "peerDependencies": {
-    "@kolkrabbi/kol-component": ">=0.174.0",
+    "@kolkrabbi/kol-component": ">=0.178.0",
     "@kolkrabbi/kol-icons": ">=0.16.0",
     "@kolkrabbi/kol-theme": ">=0.138.0",
     "gsap": "^3.13.0",
@@ -20,8 +20,8 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
+    "@kolkrabbi/kol-component": "^0.179.0",
     "@kolkrabbi/kol-icons": "^0.25.0",
-    "@kolkrabbi/kol-component": "^0.177.0",
     "@kolkrabbi/kol-framework": "^0.42.0",
     "@kolkrabbi/kol-theme": "^0.138.0"
   },

package/src/CatalogPage.jsx

@@ -1,5 +1,5 @@
 import { useCallback, useRef, useState } from 'react'
-import { ContentCard, ContentFilters, ContentRow } from '@kolkrabbi/kol-component'
+import { ActionButton, ContentCard, ContentFilters, ContentRow, SizeOrDownload, formatSize } from '@kolkrabbi/kol-component'
 import PageShell from './PageShell.jsx'
 import { PageHeader } from '@kolkrabbi/kol-component'
 import WalkthroughPanel from './WalkthroughPanel.jsx'
@@ -37,6 +37,11 @@ import WalkthroughPanel from './WalkthroughPanel.jsx'
  * variant's A4, so nothing existing moves. Anything `ContentFilters` takes that the page has no
  * prop for goes through `filtersProps` — `mutuallyExclusiveFilters` was the gap.
  *
+ * @param {'catalog'|'shelf'} preset  the whole page as one word (default `catalog` = today's defaults). `shelf` = a
+ *                                 shelf of slide decks: capped · 3 tracks on a 280 floor · `slide` card and row · stacked
+ *                                 list · `kol-tone-secondary` on the root · the All / Recent view strip; `toCard` returns
+ *                                 the deck's fields and handlers — `title date bytes count cover href onNavigate onDownload
+ *                                 onFavourite onDelete favourited` — and the page renders the slots. Explicit props win.
  * @param {Object}   header        PageHeader props — `{ title, subtitle, size, voice, eyebrow }`
  * @param {Array}    items         the objects `ContentFilters` filters and searches
  * @param {Function} toCard        (item, { view, layout }) => card props (see above)
@@ -82,18 +87,64 @@ function computeHiddenSet(items, expandedIdx) {
   return hiddenSet
 }
 
+/* PRESETS — a whole page frozen as one word (slide-variant-and-shelf-preset,
+ * kol-client-olina 2026-09-03; user, after building /slide-deck by hand through
+ * eleven props: "this is a look I DO NOT want to do this again… this is a
+ * layout SET" · "freeze this so I can use AS IS again"). `catalog` is today's
+ * defaults, byte-identical. `shelf` is olina's /slide-deck as it stood, every
+ * value read off the render. An explicit prop always wins over its preset. */
+const PRESETS = {
+  catalog: {},
+  shelf: {
+    width: 'capped', maxColumns: 3, minColumn: 280,
+    cardVariant: 'slide', rowVariant: 'slide', listLayout: 'stack',
+    /* one word tones every control on the page (tone-is-the-ground-axis) */
+    className: 'kol-tone-secondary',
+    /* the header's right slot is the view strip — ContentFilters' own idiom */
+    views: [{ value: 'all', label: 'All' }, { value: 'recent', label: 'Recent' }], defaultView: 'all',
+  },
+}
+const stop = (e) => { e.preventDefault(); e.stopPropagation() }
+/* the shelf's DATA → the slide variant's slots, the media admin's idiom
+ * (MediaLibraryPages:704) verbatim from olina's /slide-deck: download is the
+ * control ON the image (chrome="media"), the plate carries star (toggle) and
+ * trash (confirm) in a column, the row carries download · star · trash inline;
+ * the size cell is SizeOrDownload; `count` is the slide count. A slot the
+ * consumer supplies itself is left alone. The consumer writes no JSX for
+ * actions — that is the point of the preset. */
+function toSlideCard(c, { layout }) {
+  const { bytes, count, cover, favourited, onDownload, onFavourite, onDelete, downloadHref, ...rest } = c
+  const list = layout === 'list'
+  return {
+    ...rest,
+    media: rest.media ?? (cover ? <img src={cover} alt="" loading="lazy" /> : null),
+    size: rest.size ?? (bytes != null ? <SizeOrDownload href={downloadHref ?? '#'}>{formatSize(bytes)}</SizeOrDownload> : undefined),
+    meta: rest.meta ?? (count ? `${count} slides` : undefined),
+    control: rest.control ?? (!list && onDownload ? <ActionButton chrome="media" icon="download" confirmIcon="check" label="Download" confirmLabel="Downloaded" onAction={onDownload} /> : undefined),
+    actions: rest.actions ?? ((onFavourite || onDelete || (list && onDownload)) ? (
+      <div className={list ? 'flex items-center gap-2' : 'flex h-full flex-col items-center justify-between'} onClick={stop}>
+        {list && onDownload && <ActionButton chrome="inline" size="sm" icon="download" label="Download" onAction={onDownload} />}
+        {onFavourite && <ActionButton chrome="inline" size="sm" icon={favourited ? 'star-solid' : 'star'} label="Favourite" toggle onAction={onFavourite} />}
+        {onDelete && <ActionButton chrome="inline" size="sm" icon="trash" confirmIcon="check" label="Delete" confirmLabel="Deleted" onAction={onDelete} />}
+      </div>
+    ) : undefined),
+  }
+}
+
 export default function CatalogPage({
+  /* FIRST, so every default below can read it */
+  preset = 'catalog',
   header,
-  width = 'bleed',
+  width = PRESETS[preset]?.width ?? 'bleed',
   items = [],
   toCard,
   filtersTitle,
   filterGroups,
   searchKeys = ['title', 'name'],
-  views,
+  views = PRESETS[preset]?.views,
   view,
   onViewChange,
-  defaultView,
+  defaultView = PRESETS[preset]?.defaultView,
   layouts = LAYOUTS,
   defaultLayout = 'grid',
   walkthrough,
@@ -104,24 +155,24 @@ export default function CatalogPage({
   trailingActions,
   /* the grid track's floor. 160 is a 26-tile catalog's; a shelf of three decks
      wants ~280 so the cards read at all. A ceiling of 6 tracks still applies. */
-  minColumn = 160,
+  minColumn = PRESETS[preset]?.minColumn ?? 160,
   /* the ceiling — the six-column ruling is a MAXIMUM; a three-deck shelf says 3
      (kol-client-olina 2026-09-03; user: "why are the cards so small? they could
      use 2 columns each" — raising the floor to force it was backwards) */
-  maxColumns = 6,
+  maxColumns = PRESETS[preset]?.maxColumns ?? 6,
   /* the LIST row's variant. `catalog` (default) is the 36px GridCard row — title
      and detail on one line, no thumb — which is what every app-tier list was
      ruled on (CatalogPageMonitorParity). A catalog whose grid shows a cover
      passes `file`: the 48px thumb row, so the list shows the same cover small
      (kol-client-olina 2026-09-03; user, on the bare row: "ugly ugly ugly"). */
-  rowVariant = 'catalog',
+  rowVariant = PRESETS[preset]?.rowVariant ?? 'catalog',
   /* the GRID card's variant, per page; `toCard` may return `variant` per card */
-  cardVariant = 'catalog',
+  cardVariant = PRESETS[preset]?.cardVariant ?? 'catalog',
   /* the LIST's container. `grid` (default) is monitor's ruling — rows four across
      on a 240 floor, gap 8 (the documented `repeat(4, 1fr)`). `stack` is one row per
      line, which is what a list of files is (MediaLibrary stacks); olina's deck list
      rendered three 300px rows side by side (user: "why is it tiny?"). */
-  listLayout = 'grid',
+  listLayout = PRESETS[preset]?.listLayout ?? 'grid',
   iconComponent,
   showCountOnlyWhenFiltering = true,
   filtersProps,
@@ -155,7 +206,7 @@ export default function CatalogPage({
   }, [minColumn, maxColumns])
 
   return (
-    <PageShell width={width} className={className} style={{ overflow: 'hidden', '--kol-catalog-n': cols ?? undefined, ...style }}>
+    <PageShell width={width} className={`${PRESETS[preset]?.className ?? ''} ${className}`.trim()} style={{ overflow: 'hidden', '--kol-catalog-n': cols ?? undefined, ...style }}>
       {header && <PageHeader {...header} />}
       <div style={{ flex: 1, position: 'relative' }}>
         {open && <WalkthroughPanel steps={walkthrough.steps} iconComponent={walkthrough.iconComponent} />}
@@ -176,7 +227,7 @@ export default function CatalogPage({
           defaultLayout={defaultLayout}
           renderItem={(rows, viewMode, layout) => {
             if (open) return null
-            const cards = rows.map((item) => toCard ? toCard(item, { view: viewMode, layout }) : { title: item.title ?? item.name, detail: item.detail })
+            const cards = rows.map((item) => { const c = toCard ? toCard(item, { view: viewMode, layout }) : { title: item.title ?? item.name, detail: item.detail }; return preset === 'shelf' ? toSlideCard(c, { layout }) : c })
             const hidden = layout === 'list' ? new Set() : computeHiddenSet(rows, cards.findIndex((c) => c.expanded))
             /* COLS IS A CEILING, NOT A COMMAND (CatalogPageMobileColumns,
               * kol-monitor 2026-09-01) — the third home of the defect

package/src/ShortcutsOverlay.jsx

@@ -58,8 +58,12 @@ export default function ShortcutsOverlay({ shortcuts = [], onClose }) {
   return (
     <div
       onClick={onClose}
-      className="fixed inset-0 select-none bg-fg-inverse-08"
-      style={{ display: 'grid', placeItems: 'center', backdropFilter: 'blur(2px)', zIndex: 'var(--kol-z-modal)' }}
+      /* THE scrim (overlay-scrim-outliers, kol-client-olina 2026-09-03; user: "we
+         removed the blur and put just color on the background … we missed this").
+         This drew its own — an 8 % inverse wash plus a 2px blur — after the
+         2026-09-01 no-blur ruling and the one-tint-48 class. */
+      className="fixed inset-0 select-none kol-overlay-scrim"
+      style={{ display: 'grid', placeItems: 'center', zIndex: 'var(--kol-z-modal)' }}
     >
       <div className="text-fg-64 kol-helper-12 bg-surface-primary border border-fg-16" style={{ display: 'grid', gridTemplateColumns: 'auto auto', gap: '10px 62px', padding: 24, borderRadius: 4 }}>
         {sectioned

package/src/TouchDeviceOverlay.jsx

@@ -34,8 +34,10 @@ export default function TouchDeviceOverlay({ appName = 'This app', message }) {
     try { localStorage.setItem(STORAGE_KEY, '1') } catch { /* storage blocked */ }
     setDismissed(true)
   }
+  /* THE scrim, on the z ladder (overlay-scrim-outliers, 2026-09-03): was an 8 %
+     inverse wash + a 2px blur on a literal 100 */
   return (
-    <div className="fixed inset-0 select-none bg-fg-inverse-08" style={{ display: 'grid', placeItems: 'center', backdropFilter: 'blur(2px)', zIndex: 100 }}>
+    <div className="fixed inset-0 select-none kol-overlay-scrim" style={{ display: 'grid', placeItems: 'center', zIndex: 'var(--kol-z-modal)' }}>
       <div className="bg-surface-primary border border-oq-08" style={{ width: 360, borderRadius: 4, padding: '20px 20px 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
         <div className="kol-helper-14 text-fg-96">Desktop recommended</div>
         <div className="kol-mono-12 text-fg-64">