@kolkrabbi/kol-framework 0.60.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);
 }
@@ -250,6 +257,20 @@ body {
   -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.60.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.308.0",
-    "@kolkrabbi/kol-icons": "^0.50.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 */