@kolkrabbi/kol-workshop 0.37.0 → 0.38.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-workshop",
-  "version": "0.37.0",
+  "version": "0.38.0",
   "private": false,
   "description": "Docs viewer, shell and tag system",
   "license": "MIT",
@@ -13,14 +13,14 @@
   },
   "dependencies": {
     "d3": "^7.9.0",
-    "@kolkrabbi/kol-markdown": "^0.1.2",
-    "@kolkrabbi/kol-brand": "^0.1.3",
-    "@kolkrabbi/kol-search": "^0.3.0"
+    "@kolkrabbi/kol-markdown": "^0.1.3",
+    "@kolkrabbi/kol-search": "^0.3.0",
+    "@kolkrabbi/kol-brand": "^0.1.3"
   },
   "peerDependencies": {
     "@kolkrabbi/kol-component": ">=0.237.0",
     "@kolkrabbi/kol-framework": ">=0.45.0",
-    "@kolkrabbi/kol-theme": ">=0.163.0",
+    "@kolkrabbi/kol-theme": ">=0.165.0",
     "@kolkrabbi/kol-icons": ">=0.18.0",
     "gsap": "^3.13.0",
     "react": "^18.3.0 || ^19.0.0",
@@ -28,10 +28,10 @@
     "react-router-dom": "^6.0.0 || ^7.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-framework": "^0.48.0",
-    "@kolkrabbi/kol-theme": "^0.163.0",
-    "@kolkrabbi/kol-component": "^0.237.0",
-    "@kolkrabbi/kol-icons": "^0.33.0"
+    "@kolkrabbi/kol-component": "^0.239.0",
+    "@kolkrabbi/kol-icons": "^0.33.0",
+    "@kolkrabbi/kol-theme": "^0.165.0",
+    "@kolkrabbi/kol-framework": "^0.49.0"
   },
   "files": [
     "src",

package/src/docs/render-tokens.jsx

@@ -63,7 +63,8 @@ export const renderInlineTokens = (
           return token.text
         }
         return (
-          <a key={tokenKey} href={token.url} className={linkCls}>
+          /* a link that leaves the site opens a new tab (2026-10-02); a relative or `#` link stays */
+          <a key={tokenKey} href={token.url} className={linkCls} {...(/^https?:/.test(token.url) ? { target: '_blank', rel: 'noreferrer' } : null)}>
             {token.text}
           </a>
         )

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 { IconFrame, ShellDrawer, ShellSearchOverlay, ShortcutsOverlay, SettingsPanel, SettingsSections, SettingsSwitch, Tooltip, useDragResize } from '@kolkrabbi/kol-component'
+import { FullscreenOverlay, IconFrame, ShellDrawer, ShellSearchOverlay, 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'
@@ -262,6 +262,7 @@ const ShellLayout = ({ routes = [], basePath = '/', brand: brandProp, brandLogoS
   const [isFullHeight, setIsFullHeight] = useState(false)
   const [contentWidth, setContentWidth] = useState('canvas')
   const [isShortcutsOpen, setIsShortcutsOpen] = useState(false)
+  const [isTreeOpen, setIsTreeOpen] = useState(false)
   const location = useLocation()
   const navigate = useNavigate()
 
@@ -318,6 +319,7 @@ const ShellLayout = ({ routes = [], basePath = '/', brand: brandProp, brandLogoS
       { id: 'toc', label: 'Right rail', combo: ']' },
       { id: 'rails', label: 'Both rails', combo: '\\' },
       { id: 'fold', label: 'Fold / expand all', combo: 'C' },
+      { id: 'tree', label: 'Whole tree', combo: 'T' },
       { id: 'esc', label: 'Close', combo: 'Esc' },
     ] },
     ...(shortcuts.length ? [{ section: 'Page', items: shortcuts.map(({ id, label, combo }) => ({ id, label, combo })) }] : []),
@@ -366,6 +368,11 @@ const ShellLayout = ({ routes = [], basePath = '/', brand: brandProp, brandLogoS
         e.preventDefault()
         foldedRef.current = !foldedRef.current
         window.dispatchEvent(new CustomEvent(RAIL_FOLD_EVENT, { detail: { collapsed: foldedRef.current } }))
+      } else if (e.key === 't' || e.key === 'T') {
+        /* THE WHOLE TREE (user 2026-10-02: *"C … is just about the visual tree per space, I was
+         * talking about a shortcut to get the entire tree in any given view"*) */
+        e.preventDefault()
+        setIsTreeOpen((v) => !v)
       } else if (shortcutsRef.current.some((s) => s.key === e.key)) {
         e.preventDefault()
         shortcutsRef.current.find((s) => s.key === e.key).run()
@@ -655,6 +662,25 @@ const ShellLayout = ({ routes = [], basePath = '/', brand: brandProp, brandLogoS
 
           {isShortcutsOpen && <ShortcutsOverlay shortcuts={SHORTCUTS} onClose={() => setIsShortcutsOpen(false)} />}
 
+          {/* THE WHOLE TREE, FROM ANY PAGE (`T`, 2026-10-02): every space's rail side by side, every
+            * fold open, over the page like the search modal. Each column is the consumer's own rail
+            * for that space (`renderSidebar`) drawn in the `full` rail mode, so it cannot list
+            * anything the rails do not. A row closes the sheet and goes there. */}
+          <FullscreenOverlay open={isTreeOpen} onClose={() => setIsTreeOpen(false)} scrim>
+            <div className="shell-tree bg-surface-primary">
+              {routes.map((route) => (
+                <section key={route.id ?? route.path} className="shell-tree-space">
+                  <Link to={route.path?.startsWith('/') ? route.path : `${basePath}/${route.path ?? ''}`} className="kol-doc-eyebrow text-emphasis" onClick={() => setIsTreeOpen(false)}>{route.label}</Link>
+                  <ShellRailModeContext.Provider value="full">
+                    {renderSidebar
+                      ? renderSidebar({ activeRoute: route, onNavigate: () => setIsTreeOpen(false), mode: 'full' })
+                      : <ShellSidebar routes={route.children ?? []} basePath={basePath} label={null} onNavigate={() => setIsTreeOpen(false)} />}
+                  </ShellRailModeContext.Provider>
+                </section>
+              ))}
+            </div>
+          </FullscreenOverlay>
+
           {/* THE SHELL'S SETTINGS (2026-09-28, user: "might we also want to utilize a
             * settings page or settings sidebar … to offload some functional
             * settings, search settings, sidenav settings"). A right drawer over

package/src/shell/ShellSidebar.jsx

@@ -30,7 +30,8 @@ export const RAIL_FOLD_EVENT = 'kol-rail-fold'
  * we dont use it, I want to see it"*). Beside visible and hidden: `icons` — the rail is a narrow
  * strip, one glyph per group, and opens on hover. The column that holds the rail (`ShellNavColumn`)
  * provides the state; every ShellSidebar inside it reads it, so a consumer's rail takes the state
- * without passing a prop. Outside a provider a rail is `open`, as it always was. */
+ * without passing a prop. Outside a provider a rail is `open`, as it always was. A third value,
+ * `full`, is the whole-tree sheet's: an open rail with every fold open. */
 export const ShellRailModeContext = createContext('open')
 
 const ShellSidebar = ({ routes = [], basePath = '/', onNavigate, label = 'Navigation', labelTo, collapsed, onToggle, defaultCollapsed = false }) => {
@@ -48,8 +49,8 @@ const ShellSidebar = ({ routes = [], basePath = '/', onNavigate, label = 'Naviga
 
   /* THE RAIL FOLLOWS YOU — INTO A CHILD ONLY (2026-09-30, reversing the 2026-09-28 "open the
    * group you are in" on its landing page too). Landing on a page INSIDE a chapter opens that
-   * chapter and folds the rest; a chapter's own home keeps that chapter open (2026-10-01, see
-   * `chainTo`). Every other chapter starts
+   * chapter and folds the rest; a chapter's own home leaves that chapter's fold alone (2026-10-02,
+   * see `chainTo`). Every other chapter starts
    * folded — including ones this rail has never seen (a Group-by switch hands it new ids, and an
    * unknown id used to read as open, so every chapter sprang open).
    *
@@ -72,28 +73,32 @@ const ShellSidebar = ({ routes = [], basePath = '/', onNavigate, label = 'Naviga
       /* deepest first: `/sets` holds `/sets/app-shell` by prefix, but the set's own row is the place */
       const deeper = chainTo(r.children, [...trail, r])
       if (deeper) return deeper
-      if (r.children.some(isHere)) return [...trail, r]
-      /* A GROUP'S OWN HOME KEEPS IT OPEN (user 2026-10-01: *"I dont want to collapse the list
-       * like that when I just want to go to atoms home and still see the atoms list"* — reverses
-       * the 2026-09-30 "a chapter's own home opens nothing"). The label is a link; only the
-       * chevron folds. */
-      if (r.path && getChildPath(r, basePath).replace(/\/$/, '') === normalizedPath) return [...trail, r]
+      /* A GROUP'S OWN HOME LEAVES ITS FOLD AS IT WAS (user 2026-10-02, said many times: *"just
+       * clicking a title opens the home, if I want to expand then I fucking click the expand
+       * chevron"*). The 2026-10-01 reading opened the group on its own home, so a title click
+       * expanded its children; the 2026-09-30 one folded it. Neither: the way down to it opens,
+       * the group itself stays as the chevron left it — open stays open, folded stays folded.
+       * Checked BEFORE the children: a vault chapter's home is also its `About` row, and reading
+       * that as "a child is here" opened every Docs chapter on a title click.
+       * `validate:rail-pages` P5 holds it. */
+      if (r.path && getChildPath(r, basePath).replace(/\/$/, '') === normalizedPath) return { open: trail, keep: r.id }
+      if (r.children.some(isHere)) return { open: [...trail, r] }
     }
     return null
   }
-  const followed = () => {
-    const chain = chainTo(routes)
-    if (!chain) return null
-    const open = new Set(chain.map((g) => g.id))
-    return Object.fromEntries(groupsOf(routes).map((g) => [g.id, !open.has(g.id)]))
+  const followed = (prev = {}) => {
+    const at = chainTo(routes)
+    if (!at) return null
+    const open = new Set(at.open.map((g) => g.id))
+    return Object.fromEntries(groupsOf(routes).map((g) => [g.id, g.id === at.keep ? (prev[g.id] ?? true) : !open.has(g.id)]))
   }
   const [collapsedSections, setCollapsedSections] = useState(() => followed() ?? {})
   useEffect(() => {
-    const next = followed()
-    if (next) setCollapsedSections(next)
+    setCollapsedSections((prev) => followed(prev) ?? prev)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [normalizedPath, routes, basePath])
-  const isFolded = (route) => collapsedSections[route.id] ?? true
+  /* `full` — the whole-tree sheet (`T`, 2026-10-02): every fold open, nothing to follow */
+  const isFolded = (route) => (mode === 'full' ? false : collapsedSections[route.id] ?? true)
 
   /* FOLD ALL (2026-09-30, the names audit: *"shortcut collapse/expand the categories"*). The
    * shell's `C` key broadcasts one target state; every rail's chapters take it. */
@@ -210,7 +215,7 @@ const ShellSidebar = ({ routes = [], basePath = '/', onNavigate, label = 'Naviga
           label={label}
           to={labelTo}
           count={leafCount}
-          collapsed={navCollapsed}
+          collapsed={mode === 'full' ? false : navCollapsed}
           onToggle={handleToggle}
           onNavigate={onNavigate}
           icon={Icon}