@kolkrabbi/kol-workshop 0.1.6 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-workshop",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "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",
@@ -13,11 +13,11 @@
   },
   "dependencies": {
     "d3": "^7.9.0",
+    "@kolkrabbi/kol-component": "0.12.3",
+    "@kolkrabbi/kol-theme": "0.11.9",
+    "@kolkrabbi/kol-framework": "0.5.5",
     "@kolkrabbi/kol-brand": "^0.1.2",
-    "@kolkrabbi/kol-component": "0.11.0",
-    "@kolkrabbi/kol-icons": "0.7.0",
-    "@kolkrabbi/kol-framework": "0.5.0",
-    "@kolkrabbi/kol-theme": "0.8.0"
+    "@kolkrabbi/kol-icons": "0.8.3"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",

package/src/docs/DocKit.jsx

@@ -0,0 +1,68 @@
+/**
+ * DocKit — the Doc* composer family over the kol-theme `.kol-doc-*` role set
+ * (theme ≥ 0.11.9). The packaged successors of the showcase-local doc kit
+ * (2026-07-28 doc+card sets epic): thin composers, zero styling of their own —
+ * every text rule lives in kol-type-roles.css.
+ *
+ *   DocHeader  — eyebrow → h1 → lede page header
+ *   DocSection — anchored section: rule + h2 + optional lede + content
+ *   DocTable   — the props table (Prop / Type / Default / Description)
+ *   DocFigure  — framed content container + optional caption
+ */
+
+export function DocHeader({ eyebrow, title, lede, children }) {
+  return (
+    <header className="flex flex-col gap-3">
+      {eyebrow && <p className="kol-doc-eyebrow">{eyebrow}</p>}
+      <h1 className="kol-doc-heading">{title}</h1>
+      {lede && <p className="kol-doc-lede">{lede}</p>}
+      {children}
+    </header>
+  )
+}
+
+export function DocSection({ id, title, lede, children }) {
+  return (
+    <section id={id} className="flex flex-col gap-4 border-t border-fg-08 pt-8 scroll-mt-20">
+      {title && <h2 className="kol-doc-section-title">{title}</h2>}
+      {lede && <p className="kol-doc-body max-w-[65ch]">{lede}</p>}
+      {children}
+    </section>
+  )
+}
+
+export function DocTable({ rows }) {
+  if (!rows?.length) return null
+  return (
+    <div className="kol-doc-figure overflow-x-auto">
+      <table className="kol-doc-table">
+        <thead>
+          <tr>
+            {['Prop', 'Type', 'Default', 'Description'].map((h) => (
+              <th key={h}>{h}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((r) => (
+            <tr key={r.prop}>
+              <td className="kol-doc-table-value text-emphasis">{r.prop}</td>
+              <td className="kol-doc-table-value !whitespace-normal text-meta">{r.type}</td>
+              <td className="kol-doc-table-value text-meta">{r.def}</td>
+              <td>{r.desc}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export function DocFigure({ caption, className = '', children }) {
+  return (
+    <figure className={`kol-doc-figure ${className}`}>
+      {children}
+      {caption && <figcaption className="kol-doc-caption border-t border-fg-08 px-4 py-2.5">{caption}</figcaption>}
+    </figure>
+  )
+}

package/src/docs/index.js

@@ -12,3 +12,4 @@ export { default as DocsArticle } from './DocsArticle.jsx'
 export { default as DocsHeader } from './DocsHeader.jsx'
 export { default as DocsFrontmatter } from './DocsFrontmatter.jsx'
 export { renderInlineTokens } from './render-tokens.jsx'
+export { DocHeader, DocSection, DocTable, DocFigure } from './DocKit.jsx'

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}