@kolkrabbi/kol-workshop 0.39.0 → 0.41.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-workshop",
-  "version": "0.39.0",
+  "version": "0.41.0",
   "private": false,
   "description": "Docs viewer, shell and tag system",
   "license": "MIT",
@@ -13,12 +13,12 @@
   },
   "dependencies": {
     "d3": "^7.9.0",
-    "@kolkrabbi/kol-markdown": "^0.1.3",
     "@kolkrabbi/kol-search": "^0.3.0",
+    "@kolkrabbi/kol-markdown": "^0.1.3",
     "@kolkrabbi/kol-brand": "^0.1.3"
   },
   "peerDependencies": {
-    "@kolkrabbi/kol-component": ">=0.237.0",
+    "@kolkrabbi/kol-component": ">=0.266.0",
     "@kolkrabbi/kol-framework": ">=0.45.0",
     "@kolkrabbi/kol-theme": ">=0.165.0",
     "@kolkrabbi/kol-icons": ">=0.18.0",
@@ -28,10 +28,10 @@
     "react-router-dom": "^6.0.0 || ^7.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-component": "^0.240.0",
-    "@kolkrabbi/kol-framework": "^0.49.0",
-    "@kolkrabbi/kol-theme": "^0.166.0",
-    "@kolkrabbi/kol-icons": "^0.33.1"
+    "@kolkrabbi/kol-component": "^0.274.0",
+    "@kolkrabbi/kol-icons": "^0.39.0",
+    "@kolkrabbi/kol-framework": "^0.51.0",
+    "@kolkrabbi/kol-theme": "^0.176.0"
   },
   "files": [
     "src",

package/src/shell/ShellLayout.jsx

@@ -2,7 +2,7 @@ import { createContext, useContext, useMemo, useRef, useState, useEffect, Suspen
 import { Outlet, Link, useLocation, useNavigate, useNavigationType } from 'react-router-dom'
 import { ShellHeader } from '@kolkrabbi/kol-framework'
 import ShellSidebar, { RAIL_FOLD_EVENT, ShellRailModeContext } from './ShellSidebar.jsx'
-import { FullscreenOverlay, IconFrame, ShellDrawer, ShellSearchOverlay, ShortcutsOverlay, SettingsPanel, SettingsSections, SettingsSwitch, Tooltip, useDragResize } from '@kolkrabbi/kol-component'
+import { FullscreenOverlay, IconFrame, Rail, CommandOverlay, ShortcutsOverlay, SettingsPanel, SettingsSections, SettingsSwitch, Tooltip, useDragResize } from '@kolkrabbi/kol-component'
 import { createIndex, search } from '@kolkrabbi/kol-search'
 import { useTagMode } from '../tags/TagModeContext.jsx'
 import TagModeOverlay from '../tags/TagModeOverlay.jsx'
@@ -602,7 +602,7 @@ const ShellLayout = ({ routes = [], basePath = '/', brand: brandProp, brandLogoS
 
           {/* `open`, not `isOpen` — the old prop name silently kept the drawer
             * shut, so there was no navigation at all below lg. */}
-          <ShellDrawer
+          <Rail
             open={isNavDrawerOpen}
             onClose={() => setIsNavDrawerOpen(false)}
           >
@@ -610,13 +610,13 @@ const ShellLayout = ({ routes = [], basePath = '/', brand: brandProp, brandLogoS
               ? renderSidebar({ activeRoute, onNavigate: () => setIsNavDrawerOpen(false) })
               : <ShellSidebar routes={routes} basePath={basePath} onNavigate={() => setIsNavDrawerOpen(false)} />
             }
-          </ShellDrawer>
+          </Rail>
 
           {/* The overlay owns no filtering — the shell holds the query and
             * feeds it results (the pre-0.12 API `isOpen/routes/items` matched
             * nothing, so ⌘K rendered an empty box and searchItems was dead).
             * Selecting routes to item.href; matchSearchItems is the engine's. */}
-          <ShellSearchOverlay
+          <CommandOverlay
             open={isSearchOpen}
             onClose={closeSearch}
             query={searchQuery}
@@ -658,7 +658,7 @@ const ShellLayout = ({ routes = [], basePath = '/', brand: brandProp, brandLogoS
             }}
           >
             {tagMode.isProvided && tagMode.expanded ? <TagModeOverlay /> : null}
-          </ShellSearchOverlay>
+          </CommandOverlay>
 
           {isShortcutsOpen && <ShortcutsOverlay shortcuts={SHORTCUTS} onClose={() => setIsShortcutsOpen(false)} />}
 
@@ -688,7 +688,7 @@ const ShellLayout = ({ routes = [], basePath = '/', brand: brandProp, brandLogoS
           {/* THE APPROVED DRAWER (2026-09-30): kol-component's `SettingsPanel` — the composition locked
             * 2026-08-27 that media's Display settings and Trash already wear: title header, divided
             * sections. This was a hand-built ShellDrawer + eyebrow + undivided sections. */}
-          <SettingsPanel open={isSettingsOpen} variant="drawer" title="Settings" onClose={() => setIsSettingsOpen(false)}>
+          <SettingsPanel open={isSettingsOpen} variant="rail" title="Settings" onClose={() => setIsSettingsOpen(false)}>
             <SettingsSections sections={settingsSections} divided />
           </SettingsPanel>
         </div>