@kolkrabbi/kol-workshop 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-workshop",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "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.19",
     "@kolkrabbi/kol-brand": "^0.1.2",
+    "@kolkrabbi/kol-framework": "0.6.4",
     "@kolkrabbi/kol-icons": "0.8.10",
-    "@kolkrabbi/kol-framework": "0.6.2",
-    "@kolkrabbi/kol-theme": "0.12.0"
+    "@kolkrabbi/kol-component": "0.13.1",
+    "@kolkrabbi/kol-theme": "0.12.1"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",

package/src/shell/ShellLayout.jsx

@@ -46,7 +46,7 @@ const TocColumn = ({ children }) => (
   </aside>
 )
 
-const ShellLayout = ({ routes = [], basePath = '/', brandLogoSrc, brandLogoAlt = '', renderSidebar, searchItems, defaultTocContent }) => {
+const ShellLayout = ({ routes = [], basePath = '/', brand: brandProp, brandLogoSrc, brandLogoAlt = '', renderSidebar, searchItems, defaultTocContent, isActive: isActiveProp, actions }) => {
   const [isNavDrawerOpen, setIsNavDrawerOpen] = useState(false)
   const [navCollapsed, setNavCollapsed] = useState(false)
   const [tocCollapsed, setTocCollapsed] = useState(false)
@@ -94,14 +94,20 @@ const ShellLayout = ({ routes = [], basePath = '/', brandLogoSrc, brandLogoAlt =
     href: r.path ? joinPath(r.path) : basePath,
     icon: r.icon,
   }))
-  const isActive = (href) => location.pathname === href || location.pathname.startsWith(`${href}/`)
+  /* Prefix matching is the default, but a consumer can override it: a tab whose
+   * href targets a CHILD page (Docs → /docs/shell-and-layout) must still light
+   * up across the whole /docs prefix, which self-matching can't express. */
+  const isActive = isActiveProp ?? ((href) => location.pathname === href || location.pathname.startsWith(`${href}/`))
   const handleNavigate = (event, item) => {
     if (item.href) {
       event.preventDefault()
       navigate(item.href)
     }
   }
-  const brand = brandLogoSrc ? (
+  /* `brand` takes any node — a consumer that isn't the workshop needs its own
+   * wordmark, and brandLogoSrc only ever accepted an <img>. Falls back to the
+   * logo-src form, then to the KOLKRABBI + WORKSHOP pair. */
+  const brand = brandProp ?? (brandLogoSrc ? (
     <Link to={basePath} className="shell-header-logo flex items-center text-emphasis">
       <img src={brandLogoSrc} alt={brandLogoAlt} className="h-6 w-auto" />
     </Link>
@@ -117,11 +123,16 @@ const ShellLayout = ({ routes = [], basePath = '/', brandLogoSrc, brandLogoAlt =
         <Asset name="wordmark-workshop" title="Workshop" className="inline-flex [&>svg]:h-6 [&>svg]:w-auto" />
       </Link>
     </>
-  )
+  ))
+  /* Consumer `actions` sit BEFORE the search trigger in row 1 — a showcase
+   * needs its own controls (repo link, etc.) beside the shell's. */
   const searchTrigger = (
-    <Tooltip label="Search">
-      <Button variant="ghost" quiet iconOnly="search" iconSize={18} onClick={() => setIsSearchOpen(true)} aria-label="Search" />
-    </Tooltip>
+    <>
+      {actions}
+      <Tooltip label="Search">
+        <Button variant="ghost" quiet iconOnly="search" iconSize={18} onClick={() => setIsSearchOpen(true)} aria-label="Search" />
+      </Tooltip>
+    </>
   )
 
   /* searchItems ({ id, label, href, sectionLabel?, tags?, headings?, keywords? })