@kolkrabbi/kol-shell 0.52.0 → 0.55.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.52.0",
+  "version": "0.55.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,9 +20,9 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-component": "^0.200.0",
-    "@kolkrabbi/kol-icons": "^0.26.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": [

package/src/ShortcutsOverlay.jsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { LabeledControlSection, SettingsRow } from '@kolkrabbi/kol-component'
+import { SettingsSections } from '@kolkrabbi/kol-component'
 
 /**
  * ShortcutsOverlay — the keyboard-shortcut sheet: blurred scrim, centred
@@ -22,16 +22,18 @@ import { LabeledControlSection, SettingsRow } from '@kolkrabbi/kol-component'
  * have lost the grouping. That consumer kept a 99-line local overlay instead,
  * which is the duplication this component exists to end.
  *
- * 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.
+ * 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,
@@ -43,16 +45,15 @@ import { LabeledControlSection, SettingsRow } from '@kolkrabbi/kol-component'
 
 const isSectioned = (list) => Array.isArray(list?.[0]?.items)
 
-/* 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 (
-    <SettingsRow label={label} align="fill" labelWidth="auto">
-      <span className="text-fg-32 kol-helper-12 whitespace-nowrap">{combo ?? keys}</span>
-    </SettingsRow>
-  )
-}
+/* 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(() => {
@@ -85,21 +86,11 @@ export default function ShortcutsOverlay({ shortcuts = [], onClose }) {
         style={{ padding: 24, borderRadius: 4 }}
         onClick={(e) => e.stopPropagation()}
       >
-        {sectioned
-          ? 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} />
-              ))}
-            </LabeledControlSection>
-          ))
-          : (
-            <LabeledControlSection rowGap={1}>
-              {shortcuts.map(({ label, combo, keys }) => (
-                <Row key={label} label={label} combo={combo} keys={keys} />
-              ))}
-            </LabeledControlSection>
-          )}
+        <SettingsSections
+          sections={sectioned
+            ? shortcuts.map(({ section, items = [] }) => ({ label: section, rowGap: 1, rows: items.map(toRow) }))
+            : [{ rowGap: 1, rows: shortcuts.map(toRow) }]}
+        />
       </div>
     </div>
   )