@kolkrabbi/kol-framework 0.58.0 → 0.60.0

package/kol-framework.css

@@ -211,6 +211,45 @@ body {
   line-height: 1;
   transition: transform 150ms ease, opacity 120ms ease, visibility 0s linear 120ms;
 }
+/* THE SPLIT ROW (user 2026-10-28: "expand anywhere except the title"): a foldernote's row is two targets on one box.
+ * The caret button fills the row under the link (the Tooltip wrapper is the positioned box, so it covers the head and
+ * not the open list below), its chevron where the floated caret sat; the link above passes the pointer through except
+ * on its glyph and title. The row still brightens as one when either half is hovered. */
+.kol-sidenav-hop-caret--row {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  justify-content: flex-end;
+  align-items: flex-start;
+  /* the chevron's 12 from the top and 16 from the edge ride the element as utilities (`pt-3 pr-4`) — a padding here
+   * would lose to the utility layer, which is how the first cut put the chevron 12px high */
+}
+.kol-sidenav-hop-chevron {
+  display: inline-flex;
+  transition: transform 150ms ease;
+}
+.kol-sidenav-hop--split {
+  pointer-events: none;
+}
+.kol-sidenav-hop--split .kol-sidenav-hop-icon,
+.kol-sidenav-hop--split .kol-sidenav-hop-title {
+  pointer-events: auto;
+}
+.kol-sidenav-hop-split:has(> .kol-sidenav-hop-caret--row:hover) .kol-sidenav-hop {
+  color: var(--kol-fg-96);
+}
+.kol-sidenav-hop-split:has(> .kol-sidenav-hop-caret--row:hover) .kol-sidenav-hop-icon {
+  color: var(--kol-surface-on-primary);
+}
+:root[data-sidenav="collapsed"] .kol-sidenav-hop--split { pointer-events: auto; }
+/* THE TREE FADES AT ITS CLIP (user 2026-10-28: "we also are missing a fade when list clips in navrail") — the app rail's
+ * `.kol-shell-rail-list--fade` and the workshop rail's `.shell-rail`, the same 3rem ramp; the element's `pb-12` (a utility,
+ * which a components-layer padding here could not outrank) lets the last row scroll clear of it, so at the end of the list nothing stays faded. `NavRail variant="site" fade={false}` drops it. */
+.kol-sidenav-scroll--fade {
+  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
+  mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
+}
 .kol-sidenav-list {
   display: flex;
   flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-framework",
-  "version": "0.58.0",
+  "version": "0.60.0",
   "description": "Site shell and page layout",
   "license": "MIT",
   "type": "module",
@@ -23,9 +23,9 @@
     "react-router-dom": "^6.0.0 || ^7.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-component": "^0.307.0",
     "@kolkrabbi/kol-markdown": "0.2.0",
-    "@kolkrabbi/kol-icons": "^0.48.0"
+    "@kolkrabbi/kol-component": "^0.308.0",
+    "@kolkrabbi/kol-icons": "^0.50.0"
   },
   "files": [
     "src",

package/src/documentFiles.js

@@ -0,0 +1,27 @@
+import { kindOf, extOf } from '@kolkrabbi/kol-component'
+
+/* DOCUMENT FILES — the files beside a folder's markdown (DocumentIndexFilesAndIcons049, kol-website 2026-10-28, a point
+ * of the MarkdownPage ticket: *"a folder may also hold PDFs and images; the contents index lists them beside the md
+ * pages and opens them in the DS QuickLook, not as pages"*). The consumer globs them as URLs and hands the modules over:
+ *
+ *   documentFiles(import.meta.glob('./brand/business/**\/*.{pdf,png,jpg,jpeg,webp,svg}', { query: '?url', import: 'default', eager: true }))
+ *   → [{ id, title, group, file, ext, kind }]   in the glob's (path) order
+ *
+ *   id      the file's stem without a `NN-` prefix (`02-business-plan.pdf` → `business-plan`)
+ *   title   the stem, unprefixed and titlecased (`Business Plan`)
+ *   group   the file's parent folder, titlecased and unprefixed (`frumkvaedi-2024/` → `Frumkvaedi 2024`); '' at the root
+ *   file    the served URL; ext its extension; kind the DS's (`kindOf`: pdf · image · video · audio · …)
+ *
+ * A row is what `DocumentIndex` draws as a card in its part and opens in Quick Look. `documentTabs` is the markdown half. */
+const unprefix = (s) => s.replace(/^\d+[-_.]\s*/, '')
+const titleCase = (s) => s.replace(/[-_]+/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
+
+export default function documentFiles(modules = {}, { root = '' } = {}) {
+  return Object.entries(modules).map(([path, url]) => {
+    const rel = root && path.startsWith(root) ? path.slice(root.length) : path
+    const parts = rel.replace(/^\.?\//, '').split('/')
+    const name = parts.pop()
+    const stem = name.replace(/\.[a-z0-9]+$/i, '')
+    return { id: unprefix(stem), title: titleCase(unprefix(stem)), group: parts.length ? titleCase(unprefix(parts[parts.length - 1])) : '', file: typeof url === 'string' ? url : '', ext: extOf(name), kind: kindOf({ key: name }) }
+  })
+}

package/src/index.js

@@ -32,3 +32,4 @@ export { default as CategoryPage } from './CategoryPage.jsx'
 export { default as MarkdownPage } from './MarkdownPage.jsx'
 export { default as LinkPreview } from './LinkPreview.jsx'
 export { default as documentTabs } from './documentTabs.js'
+export { default as documentFiles } from './documentFiles.js'