@kolkrabbi/kol-shell 0.51.0 → 0.52.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.51.0",
+  "version": "0.52.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.200.0",
+    "@kolkrabbi/kol-icons": "^0.26.0",
+    "@kolkrabbi/kol-framework": "^0.44.0",
+    "@kolkrabbi/kol-theme": "^0.142.0"
   },
   "files": [
     "src",

package/src/ShortcutsOverlay.jsx

@@ -1,4 +1,5 @@
 import { useEffect } from 'react'
+import { LabeledControlSection, SettingsRow } from '@kolkrabbi/kol-component'
 
 /**
  * ShortcutsOverlay — the keyboard-shortcut sheet: blurred scrim, centred
@@ -21,10 +22,16 @@ 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 IDIOM WITH THE SETTINGS PAGE (user, 2026-09-03: *"align it more to the
+ * settings sidebar who uses LabelledControls and LabelledControlsSection"*).
+ * This sheet and `SettingsShortcuts` render the SAME keymap array, and they
+ * had drifted into two anatomies: a bespoke two-column grid with a plain
+ * `text-fg-32` heading and hand-rolled `<span>` pairs here, against
+ * `kol-eyebrow` sections over `SettingsRow`s there — down to the combo being
+ * `fg-96` in one and `fg-32` in the other. Both are `LabeledControlSection` +
+ * `SettingsRow` now, so a shortcut reads identically wherever it is shown and
+ * a change to the row lands in both. The column shape stays each one's own:
+ * a tall single column here, a six-column grid on the settings page.
  *
  * `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,13 +43,14 @@ 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. */
+/* One row — `SettingsRow`, the same one the settings page's `SettingsShortcuts`
+ * uses, with the same `labelWidth="auto"` so the label yields and the combo
+ * hugs (a combo is one token by nature and must not wrap). */
 function Row({ label, combo, keys }) {
   return (
-    <span className="contents">
-      <span>{label}</span><span className="text-fg-96">{combo ?? keys}</span>
-    </span>
+    <SettingsRow label={label} align="fill" labelWidth="auto">
+      <span className="text-fg-32 kol-helper-12 whitespace-nowrap">{combo ?? keys}</span>
+    </SettingsRow>
   )
 }
 
@@ -65,24 +73,33 @@ 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 }}>
+      {/* `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()}
+      >
         {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>
+          ? shortcuts.map(({ section, items = [] }) => (
+            <LabeledControlSection key={section} label={section} rowGap={1}>
               {items.map(({ label, combo, keys }) => (
                 <Row key={`${section}:${label}`} label={label} combo={combo} keys={keys} />
               ))}
-            </span>
+            </LabeledControlSection>
           ))
-          : shortcuts.map(({ label, combo, keys }) => (
-            <Row key={label} label={label} combo={combo} keys={keys} />
-          ))}
+          : (
+            <LabeledControlSection rowGap={1}>
+              {shortcuts.map(({ label, combo, keys }) => (
+                <Row key={label} label={label} combo={combo} keys={keys} />
+              ))}
+            </LabeledControlSection>
+          )}
       </div>
     </div>
   )