@kolkrabbi/kol-shell 0.32.0 → 0.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.32.0",
+  "version": "0.34.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",
@@ -20,10 +20,10 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-component": "^0.150.1",
+    "@kolkrabbi/kol-component": "^0.152.0",
     "@kolkrabbi/kol-icons": "^0.25.0",
     "@kolkrabbi/kol-framework": "^0.36.0",
-    "@kolkrabbi/kol-theme": "^0.119.0"
+    "@kolkrabbi/kol-theme": "^0.120.0"
   },
   "files": [
     "src",

package/src/AppShell.jsx

@@ -293,10 +293,14 @@ export default function AppShell({
         />
       )}
       {drawer && drawerOpen && (
-        <div
+        /* A BUTTON, not a div (the OverlayScrimTapDismiss line, 2026-09-01):
+         * iOS Safari does not bubble tap-clicks from non-interactive elements,
+         * and this scrim exists ONLY on touch devices. */
+        <button
+          type="button"
+          aria-label="Close navigation"
           className="kol-shell-drawer-scrim"
           onClick={() => setDrawerOpen(false)}
-          aria-hidden="true"
         />
       )}
       {!navHidden && (

package/src/CatalogPage.jsx

@@ -111,8 +111,20 @@ export default function CatalogPage({
             if (open) return null
             const cards = rows.map((item) => toCard ? toCard(item, { view: viewMode, layout }) : { title: item.title ?? item.name, detail: item.detail })
             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
+              * ContentCollectionMinColumnWidth and ContentGridMinColumnWidth
+              * closed, unreachable by either because this grid is drawn inline.
+              * `repeat(6, 1fr)` computed six 29px slivers at 390. Same idiom as
+              * ContentCollection:144 — up to 6 (grid) / 4 (list) columns, and a
+              * track may not go under the floor (160 grid / 240 list) nor demand
+              * more than the container. At monitor's desktop widths the sixth-
+              * share clears the floor, so nothing moves there. NB the 2×2
+              * expanded-card neighbour math (computeHiddenSet) stays a
+              * six-column ruling — below the ceiling the hide-set is
+              * desktop-only geometry. */
             return (
-            <div style={{ display: 'grid', gridTemplateColumns: layout === 'list' ? 'repeat(4, 1fr)' : 'repeat(6, 1fr)', gap: layout === 'list' ? 8 : 24 }}>
+            <div style={{ display: 'grid', gridTemplateColumns: layout === 'list' ? 'repeat(auto-fill, minmax(min(100%, max(240px, calc((100% - 3 * 8px) / 4))), 1fr))' : 'repeat(auto-fill, minmax(min(100%, max(160px, calc((100% - 5 * 24px) / 6))), 1fr))', gap: layout === 'list' ? 8 : 24 }}>
               {rows.map((item, i) => {
                 if (hidden.has(i)) return null
                 const c = cards[i]

package/src/NavRail.jsx

@@ -285,7 +285,12 @@ export default function NavRail({
   return (
     <div
       ref={railRef}
-      className="kol-shell-rail bg-surface-primary border-r border-fg-08 fixed inset-y-0 left-0 flex flex-col items-start pt-4 pb-4 px-2 gap-2"
+      /* drawer mode pins RIGHT (ShellDrawerOnRight, kol-chess 2026-09-01, user
+        * ruling): a left drawer put the open close-X mid-screen; on the right
+        * the trigger and the X share the top-right corner at the screen edge.
+        * The theme's off-canvas transform is +100% to match. Desktop rail
+        * unchanged. */
+      className={`kol-shell-rail bg-surface-primary fixed inset-y-0 flex flex-col items-start pt-4 pb-4 px-2 gap-2 ${drawer ? 'right-0 border-l' : 'left-0 border-r'} border-fg-08`}
       /* A drawer takes its own width, NOT the live rail token — that token is
         * zeroed in drawer mode so the content gets the whole viewport back. */
       style={{ width: drawer ? 'var(--kol-shell-drawer-width, 240px)' : `var(${RAIL_W})` }}

package/src/SettingsShortcuts.jsx

@@ -15,6 +15,12 @@ import { SettingsRow } from '@kolkrabbi/kol-component'
  * token by nature — the value cell is `whitespace-nowrap` and the label yields
  * (SettingsShortcutsComboWrap, kol-monitor 2026-08-27: `⌘ K` broke as `⌘` over
  * `K` in the six-column grid — the cell was squeezed to min-content, not full).
+ * `labelWidth="auto"` is what MAKES the label yield
+ * (SettingsShortcutsComboOverflow, kol-monitor 2026-09-01): the row's default
+ * is a fixed 160px label, which in this grid's ~176px columns left the combo
+ * cell 4px — every combo was painting into the 48px column gap, and the first
+ * one longer than the gap (`⌥ then 1–5`) reached the neighbour's labels. The
+ * label truncates, the combo hugs, an over-long combo clips at the column edge.
  *
  * @param {Array}    sections    `[{ section, items: [{ id, label, combo }] }]`
  * @param {Function} comboLabel  (combo) => string (default: the combo as given)
@@ -26,7 +32,7 @@ export default function SettingsShortcuts({ sections = [], comboLabel = (c) => c
         <div key={section} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
           <span className="kol-eyebrow text-strong mb-2">{section}</span>
           {items.map((k) => (
-            <SettingsRow key={k.id ?? k.label} label={k.label} align="fill">
+            <SettingsRow key={k.id ?? k.label} label={k.label} align="fill" labelWidth="auto">
               <span className="text-fg-32 kol-helper-12 whitespace-nowrap">{comboLabel(k.combo)}</span>
             </SettingsRow>
           ))}