@kolkrabbi/kol-framework 0.59.0 → 0.61.0

package/kol-framework.css

@@ -32,8 +32,15 @@ body {
  * law, brand-app ruling): text is selectable everywhere — copyability beats
  * chrome purity. */
 
-/* Selection highlight uses brand-primary so it reads on-brand when it appears. */
+/* SELECTED TEXT IS NEUTRAL BY DEFAULT (ArticleRendererHomeHeroSelection, kol-website 2026-10-28 — user: accents are opt-in,
+ * not default; brand's selections were yellow): the page's own ink pair, inverted — a white highlight with dark ink in dark
+ * mode, its inverse in light. An app (or any subtree) opts into the accent with `.kol-select-accent`. */
 ::selection {
+  background-color: var(--kol-surface-on-primary);
+  color: var(--kol-surface-primary);
+}
+.kol-select-accent::selection,
+.kol-select-accent ::selection {
   background-color: var(--kol-accent-primary);
   color: var(--kol-accent-on-primary);
 }
@@ -211,6 +218,59 @@ 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);
+}
+/* THE SITE HERO'S WASH (SiteHero, 2026-10-28) — kol-website's `.landing-hero-overlay` and `.stack-hero-overlay`, one rule:
+ * the inverse ink mixed over the image, 32 % light · 80 % dark, the theme law's selectors (explicit > system > light).
+ * SiteHero's `overlay` prop sets the two variables. */
+.kol-site-hero-overlay {
+  background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) var(--kol-site-hero-mix, 32%), transparent);
+}
+:is([data-theme="dark"], .dark) .kol-site-hero-overlay {
+  background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) var(--kol-site-hero-mix-dark, 80%), transparent);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .kol-site-hero-overlay {
+    background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) var(--kol-site-hero-mix-dark, 80%), transparent);
+  }
+}
 .kol-sidenav-list {
   display: flex;
   flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-framework",
-  "version": "0.59.0",
+  "version": "0.61.0",
   "description": "Site shell and page layout",
   "license": "MIT",
   "type": "module",
@@ -14,7 +14,7 @@
     "./kol-brand-color.css": "./kol-brand-color.css"
   },
   "peerDependencies": {
-    "@kolkrabbi/kol-component": ">=0.298.0",
+    "@kolkrabbi/kol-component": ">=0.308.0",
     "@kolkrabbi/kol-icons": ">=0.18.0",
     "@kolkrabbi/kol-markdown": ">=0.2.0",
     "@kolkrabbi/kol-theme": ">=0.186.0",
@@ -23,9 +23,9 @@
     "react-router-dom": "^6.0.0 || ^7.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-markdown": "0.2.0",
-    "@kolkrabbi/kol-component": "^0.307.0",
-    "@kolkrabbi/kol-icons": "^0.49.0"
+    "@kolkrabbi/kol-component": "^0.310.0",
+    "@kolkrabbi/kol-icons": "^0.52.0",
+    "@kolkrabbi/kol-markdown": "0.2.0"
   },
   "files": [
     "src",

package/src/SiteHero.jsx

@@ -0,0 +1,64 @@
+import { VectorLoader } from '@kolkrabbi/kol-component'
+
+/**
+ * SiteHero — A site's landing: a full-screen image, a wash, the mark, the name. kol-website apps/brand's `Landing`, class
+ * for class (ArticleRendererHomeHeroSelection, kol-website 2026-10-28 — three hand-built copies: brand's Landing, record's
+ * Home, site-hub's Home; web's /stack hero wears the same wash). Every part is optional, so the next site needs no copy.
+ *
+ * Not `PageHero`: that is a page's opening band (label · title · lede beside a mark). This is the home page itself.
+ *
+ * @param {Object}    image      `{ src, srcSet?, sizes?, position?, alt? }` — the ground, `object-cover`, `sizes` 100vw by default
+ * @param {ReactNode} media      any node in place of `image` (a video, a canvas), filling the ground
+ * @param {ReactNode|string} mark  a node, or an SVG url inlined in currentColor (`VectorLoader`); the hero sizes it, the
+ *                               landing's clamp(140px, 16vw, 220px)
+ * @param {string}    markTitle  the mark's accessible name when it is a url
+ * @param {ReactNode} title      the h1, `kol-prose-display uppercase`
+ * @param {ReactNode} tagline    `kol-prose-tagline`
+ * @param {ReactNode} actions    buttons under the tagline, wrapped and centred
+ * @param {number|{light,dark}|false} overlay  the wash: the inverse ink mixed over the image, 32 % light · 80 % dark by
+ *                               default (the sites' line); a number sets both, `false` drops it
+ * @param {'center'|'start'} align  the text column — centred (default) or from the left
+ * @param {string}    minHeight  default `100dvh`
+ */
+export default function SiteHero({ image, media, mark, markTitle, title, tagline, actions, overlay, align = 'center', minHeight = '100dvh', className = '' }) {
+  const start = align === 'start'
+  const wash = overlay === false ? null
+    : typeof overlay === 'number' ? { '--kol-site-hero-mix': `${overlay}%`, '--kol-site-hero-mix-dark': `${overlay}%` }
+    : overlay && typeof overlay === 'object' ? { ...(overlay.light != null && { '--kol-site-hero-mix': `${overlay.light}%` }), ...(overlay.dark != null && { '--kol-site-hero-mix-dark': `${overlay.dark}%` }) }
+    : {}
+  return (
+    <section className={`relative flex items-center ${start ? 'justify-start' : 'justify-center'} overflow-hidden ${className}`.trim()} style={{ minHeight }}>
+      {(image || media) && (
+        <div className="absolute inset-0 w-full h-full">
+          {media ?? (
+            <img
+              src={image.src}
+              srcSet={image.srcSet}
+              sizes={image.srcSet ? (image.sizes ?? '100vw') : undefined}
+              alt={image.alt ?? ''}
+              className="w-full h-full object-cover"
+              style={{ objectPosition: image.position ?? 'center' }}
+            />
+          )}
+        </div>
+      )}
+      {wash && <div className="kol-site-hero-overlay absolute inset-0 w-full h-full pointer-events-none" style={wash} aria-hidden="true" />}
+
+      <div className={`relative z-[1] flex flex-col gap-10 px-8 ${start ? 'items-start text-left' : 'items-center text-center'}`}>
+        {mark && (
+          <div className="w-[clamp(140px,16vw,220px)] text-emphasis">
+            {typeof mark === 'string'
+              ? <VectorLoader src={mark} size="100%" className="block" role={markTitle ? 'img' : undefined} aria-label={markTitle} />
+              : mark}
+          </div>
+        )}
+
+        {title && <h1 className="kol-prose-display uppercase">{title}</h1>}
+
+        {tagline && <p className="kol-prose-tagline">{tagline}</p>}
+
+        {actions && <div className={`flex flex-wrap items-center gap-3 mt-4 ${start ? 'justify-start' : 'justify-center'}`}>{actions}</div>}
+      </div>
+    </section>
+  )
+}

package/src/index.js

@@ -26,6 +26,8 @@ export { default as PageSection } from './PageSection.jsx'
 export { default as PortalFooter } from './PortalFooter.jsx'
 export { default as ScrollToTop } from './ScrollToTop.jsx'
 export { default as PageHero, default as BrandHero, default as SubPageHero } from './PageHero.jsx'
+/* a site's landing — the full-screen image, wash, mark and name (ArticleRendererHomeHeroSelection, 2026-10-28) */
+export { default as SiteHero } from './SiteHero.jsx'
 export { default as CategoryPage } from './CategoryPage.jsx'
 /* the document page (plan-2026-10-28-document W5.2): a markdown file as `.kol-sheet`, the hover card for its links,
  * a folder of files as page rows */