@kolkrabbi/kol-workshop 0.1.5 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-workshop",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "private": false,
   "description": "KOL workshop/docs system — a handrolled markdown engine, search, tag system (incl. a d3 tag graph), docs viewer, and docs shell. Sits above @kolkrabbi/kol-{theme,icons,component,framework}; content is consumer-injected (the package never globs docs).",
   "license": "MIT",
@@ -14,10 +14,10 @@
   "dependencies": {
     "d3": "^7.9.0",
     "@kolkrabbi/kol-brand": "^0.1.2",
-    "@kolkrabbi/kol-framework": "0.3.3",
-    "@kolkrabbi/kol-component": "0.8.0",
-    "@kolkrabbi/kol-theme": "0.7.3",
-    "@kolkrabbi/kol-icons": "0.5.0"
+    "@kolkrabbi/kol-icons": "0.7.0",
+    "@kolkrabbi/kol-component": "0.12.0",
+    "@kolkrabbi/kol-framework": "0.5.0",
+    "@kolkrabbi/kol-theme": "0.11.1"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",

package/src/compositions/WorkshopSidebar.jsx

@@ -61,7 +61,8 @@ const DocsSidebar = ({ inventory = [], docHref, basePath, onNavigate, collapsed,
 
   return (
     <div className="space-y-4">
-      <div className="shell-sidebar-toggle shell-sidebar-label" style={{ justifyContent: 'space-between', paddingRight: '4px' }}>
+      {/* kol-helper-10 types the wrapper box itself (was an untyped 16px box) */}
+      <div className="shell-sidebar-toggle shell-sidebar-label kol-helper-10" style={{ justifyContent: 'space-between', paddingRight: '4px' }}>
         <Link to={docHref()} className="shell-sidebar-label kol-helper-10 text-meta" onClick={(e) => {
           if (collapsed && onToggle) onToggle()
           if (onNavigate) onNavigate(e)

package/src/shell/ShellLayout.jsx

@@ -22,27 +22,26 @@ export const ShellFullHeightContext = createContext(null)
 export const ShellTocCollapsedContext = createContext(null)
 
 const NavColumn = ({ children }) => (
-  <aside className="hidden lg:block shrink-0 pt-6 md:pt-6 lg:pt-8">
-    <div className="shell-sidebar-sticky sticky top-8 max-h-[calc(100vh-8rem)] overflow-y-auto">
-      {children}
-    </div>
+  <aside className="shell-sidebar-sticky hidden lg:block shrink-0 h-full min-h-0 overflow-y-auto overscroll-none pt-6 md:pt-6 lg:pt-8 pb-8">
+    {children}
   </aside>
 )
 
 const MainColumn = ({ children, fullHeight }) => (
-  <main className={`w-full min-w-0${fullHeight ? ' h-full flex flex-col' : ''}`}>
+  <main
+    className={`w-full min-w-0 h-full min-h-0 ${fullHeight ? 'overflow-hidden flex flex-col' : 'overflow-y-auto overscroll-none'}`}
+    style={fullHeight ? undefined : { scrollbarGutter: 'stable' }}
+  >
     {fullHeight
       ? children
-      : <div className="pt-6 md:pt-6 lg:pt-8 pb-8">{children}</div>
+      : <div className="pt-6 md:pt-6 lg:pt-8 pb-16">{children}</div>
     }
   </main>
 )
 
 const TocColumn = ({ children }) => (
-  <aside className="hidden lg:block shrink-0 pt-6 md:pt-6 lg:pt-8">
-    <div className="sticky top-8 max-h-[calc(100vh-8rem)] overflow-y-auto">
-      {children}
-    </div>
+  <aside className="shell-sidebar-sticky hidden lg:block shrink-0 h-full min-h-0 overflow-y-auto overscroll-none pt-6 md:pt-6 lg:pt-8 pb-8">
+    {children}
   </aside>
 )
 
@@ -150,10 +149,12 @@ const ShellLayout = ({ routes = [], basePath = '/', brandLogoSrc, brandLogoAlt =
             tocCollapsed={tocCollapsed}
           />
 
+          {/* Three independent scroll regions: each rail scrolls its own overflow,
+            * main scrolls unless a page locks it (ShellFullHeightContext — embeds).
+            * overscroll-none stops chaining between regions and the edge bounce. */}
           <div className="flex-1 overflow-hidden">
-            <div className={`h-full ${isFullHeight ? 'overflow-hidden' : 'overflow-y-auto'}`} style={{ scrollbarGutter: 'stable' }}>
-              <div className={`w-full px-4 md:px-5 lg:px-6${isFullHeight ? ' h-full' : ' pb-16'}`}>
-                <div className={`shell-content-grid grid gap-8 ${gridCols}${isFullHeight ? ' h-full' : ''}`} data-layout={layoutType}>
+            <div className="h-full w-full px-4 md:px-5 lg:px-6">
+              <div className={`shell-content-grid grid gap-8 ${gridCols} h-full min-h-0`} data-layout={layoutType}>
                   {showNav && (
                     <NavColumn>
                       {renderSidebar ? renderSidebar({}) : <ShellSidebar routes={routes} basePath={basePath} />}
@@ -176,7 +177,6 @@ const ShellLayout = ({ routes = [], basePath = '/', brandLogoSrc, brandLogoAlt =
                 </div>
               </div>
             </div>
-          </div>
 
           <ShellDrawer
             isOpen={isNavDrawerOpen}

package/src/shell/ShellSidebar.jsx

@@ -65,7 +65,8 @@ const ShellSidebar = ({ routes = [], basePath = '/', onNavigate, label = 'Naviga
 
   return (
     <div className="space-y-4">
-      <div className="shell-sidebar-toggle shell-sidebar-label" style={{ justifyContent: 'space-between', paddingRight: '4px' }}>
+      {/* kol-helper-10 types the wrapper box itself (was an untyped 16px box) */}
+      <div className="shell-sidebar-toggle shell-sidebar-label kol-helper-10" style={{ justifyContent: 'space-between', paddingRight: '4px' }}>
         {labelTo ? (
           <Link to={labelTo} className="shell-sidebar-label kol-helper-10 text-meta" onClick={(e) => {
             if (navCollapsed && handleToggle) handleToggle()