@kolkrabbi/kol-shell 0.51.0 → 0.53.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.51.0",
+  "version": "0.53.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.179.0",
-    "@kolkrabbi/kol-icons": "^0.25.0",
-    "@kolkrabbi/kol-framework": "^0.42.0",
-    "@kolkrabbi/kol-theme": "^0.138.0"
+    "@kolkrabbi/kol-component": "^0.201.0",
+    "@kolkrabbi/kol-framework": "^0.44.0",
+    "@kolkrabbi/kol-icons": "^0.26.0",
+    "@kolkrabbi/kol-theme": "^0.142.0"
   },
   "files": [
     "src",

package/src/ShortcutsOverlay.jsx

@@ -1,4 +1,5 @@
 import { useEffect } from 'react'
+import { SettingsSections } from '@kolkrabbi/kol-component'
 
 /**
  * ShortcutsOverlay — the keyboard-shortcut sheet: blurred scrim, centred
@@ -21,10 +22,18 @@ import { useEffect } from 'react'
  * have lost the grouping. That consumer kept a 99-line local overlay instead,
  * which is the duplication this component exists to end.
  *
- * ONE GRID, NOT NESTED ONES. The headings span both columns
- * (`gridColumn: 1 / -1`) so every `keys` cell in the sheet stays on the same
- * axis — nesting a grid per section would let each group compute its own
- * column width and the keys would stagger down the panel.
+ * ONE COMPONENT WITH THE SETTINGS PAGE AND THE DRAWER (user, 2026-09-03:
+ * *"align it more to the settings sidebar"* → *"lets normalise a component
+ * they can grab"*). This sheet and `SettingsShortcuts` render the SAME keymap
+ * array and had drifted into two anatomies — a bespoke two-column grid with a
+ * plain `text-fg-32` heading and hand-rolled `<span>` pairs here, against
+ * eyebrow sections over `SettingsRow`s there, down to the combo being `fg-96`
+ * in one and `fg-32` in the other. Both go through `SettingsSections` now, the
+ * same call the settings page and the settings drawer use, so a shortcut reads
+ * identically wherever it is shown and a change to the row lands in all of
+ * them. The FRAME stays each one's own: a scrim and a centred sheet here, a
+ * six-column grid on the page, a right-anchored drawer over the thing you are
+ * looking at.
  *
  * `keys` is a DISPLAY STRING and is never bound — this component shows a
  * keymap, it does not own one. Formatting a combo (⌘⇧Z) is the consumer's,
@@ -36,15 +45,15 @@ import { useEffect } from 'react'
 
 const isSectioned = (list) => Array.isArray(list?.[0]?.items)
 
-/* One row of the shared grid. `contents` keeps the pair on the parent grid
- * rather than making the wrapper a cell of its own. */
-function Row({ label, combo, keys }) {
-  return (
-    <span className="contents">
-      <span>{label}</span><span className="text-fg-96">{combo ?? keys}</span>
-    </span>
-  )
-}
+/* A shortcut as a settings ROW: the label on the left, the combo as the row's
+ * value. `labelWidth="auto"` makes the label yield and the combo hug — a combo
+ * is one token by nature and must not wrap. */
+const toRow = ({ label, combo, keys }) => ({
+  label,
+  align: 'fill',
+  labelWidth: 'auto',
+  value: <span className="text-fg-32 kol-helper-12 whitespace-nowrap">{combo ?? keys}</span>,
+})
 
 export default function ShortcutsOverlay({ shortcuts = [], onClose }) {
   useEffect(() => {
@@ -65,24 +74,23 @@ export default function ShortcutsOverlay({ shortcuts = [], onClose }) {
       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
-          ? shortcuts.map(({ section, items = [] }, i) => (
-            <span key={section} className="contents">
-              <span
-                className="text-fg-32"
-                style={{ gridColumn: '1 / -1', marginTop: i === 0 ? 0 : 14 }}
-              >
-                {section}
-              </span>
-              {items.map(({ label, combo, keys }) => (
-                <Row key={`${section}:${label}`} label={label} combo={combo} keys={keys} />
-              ))}
-            </span>
-          ))
-          : shortcuts.map(({ label, combo, keys }) => (
-            <Row key={label} label={label} combo={combo} keys={keys} />
-          ))}
+      {/* `bg-oq-04`, not `bg-surface-primary` (user, 2026-09-03: *"this is too
+          bright"*). Over a near-black editor canvas the raised page surface
+          reads as a lit slab, and an `fg-16` stroke on top of it was the
+          brightest edge on screen. The OPAQUE ramp is right here: the sheet
+          must not let the canvas through, and `oq-04` is a 4 % lift off the
+          ground rather than a surface from the page's own ladder — so the
+          panel separates from the scrimmed canvas without a stroke. */}
+      <div
+        className="kol-shortcuts-panel text-fg-64 kol-helper-12 bg-oq-04 flex flex-col gap-6"
+        style={{ padding: 24, borderRadius: 4 }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <SettingsSections
+          sections={sectioned
+            ? shortcuts.map(({ section, items = [] }) => ({ label: section, rowGap: 1, rows: items.map(toRow) }))
+            : [{ rowGap: 1, rows: shortcuts.map(toRow) }]}
+        />
       </div>
     </div>
   )