@kolkrabbi/kol-framework 0.60.0 → 0.62.0

package/kol-framework.css

@@ -32,14 +32,24 @@ 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);
 }
 
 :root {
   --kol-topnav-h: 0px;
+  /* WebsiteLayout's top bar (LayoutsAndWebsiteLayout, 2026-10-28; kolkrabbi.io's `--kol-nav-h`): the bar is fixed and floats
+     over the page, so a full-bleed hero reserves this. Measured 68px at 390 and 1280 — one value everywhere. */
+  --kol-nav-h: 68px;
   /* 16rem — the rail width, one number (2026-07-31). It read 260 while every
      grid track that had to line up with it read 256, so the shell header's
      brand block sat 4 off the sidebar column it exists to align to. */
@@ -250,6 +260,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.62.0",
   "description": "Site shell and page layout",
   "license": "MIT",
   "type": "module",
@@ -14,18 +14,22 @@
     "./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",
     "react": "^18.3.0 || ^19.0.0",
     "react-dom": "^18.3.0 || ^19.0.0",
-    "react-router-dom": "^6.0.0 || ^7.0.0"
+    "react-router-dom": "^6.0.0 || ^7.0.0",
+    "framer-motion": "^12.0.0",
+    "gsap": "^3.13.0"
   },
   "devDependencies": {
+    "framer-motion": "^12.0.0",
+    "gsap": "^3.13.0",
     "@kolkrabbi/kol-markdown": "0.2.0",
-    "@kolkrabbi/kol-component": "^0.308.0",
-    "@kolkrabbi/kol-icons": "^0.50.0"
+    "@kolkrabbi/kol-icons": "^0.52.0",
+    "@kolkrabbi/kol-component": "^0.311.0"
   },
   "files": [
     "src",
@@ -49,5 +53,8 @@
   },
   "sideEffects": [
     "*.css"
-  ]
+  ],
+  "dependencies": {
+    "@gsap/react": "^2.1.2"
+  }
 }

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 */
@@ -33,3 +35,16 @@ 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'
+
+/* a website's frame — kolkrabbi.io's top bar, takeover menu, footer and cursor layer, carried verbatim
+ * (LayoutsAndWebsiteLayout, 2026-10-28); what the site says comes in as props. Its intro is kol-foundry's
+ * `WebsiteIntroLoader` (drawn by TextPressure); its ASCII cursor is kol-component's `AsciiCursor`. */
+export { default as WebsiteLayout } from './website/WebsiteLayout.jsx'
+export { default as WebsiteNavbar } from './website/Navbar.jsx'
+export { default as TakeoverMenu } from './website/TakeoverMenu.jsx'
+export { default as WebsiteFooter } from './website/Footer.jsx'
+export { default as RouteLoader } from './website/RouteLoader.jsx'
+export { CursorProvider, useCursor } from './website/CursorContext.jsx'
+export { default as CursorOverlay } from './website/CursorOverlay.jsx'
+export { default as CursorTrail } from './website/CursorTrail.jsx'
+export { WorkViewProvider, useWorkView } from './website/WorkViewContext.jsx'

package/src/website/CursorContext.jsx

@@ -0,0 +1,51 @@
+import React from 'react'
+
+const CursorContext = React.createContext({
+  position: { x: 0, y: 0 },
+  visible: false,
+  setVisible: () => {},
+  cardHover: null,
+  setCardHover: () => {},
+  clearCardHover: () => {}
+})
+
+export function CursorProvider({ children }) {
+  // Initialize cursor at center of viewport
+  const [position, setPosition] = React.useState(() => ({
+    x: typeof window !== 'undefined' ? window.innerWidth / 2 : 0,
+    y: typeof window !== 'undefined' ? window.innerHeight / 2 : 0
+  }))
+  const [visible, setVisible] = React.useState(false)
+  const [cardHover, setCardHoverState] = React.useState(null)
+
+  React.useEffect(() => {
+    function handleMove(event) {
+      setPosition({ x: event.clientX, y: event.clientY })
+    }
+    window.addEventListener('mousemove', handleMove)
+    return () => window.removeEventListener('mousemove', handleMove)
+  }, [])
+
+  const setCardHover = React.useCallback((rect) => {
+    setCardHoverState(rect)
+  }, [])
+
+  const clearCardHover = React.useCallback(() => {
+    setCardHoverState(null)
+  }, [])
+
+  const value = React.useMemo(() => ({
+    position,
+    visible,
+    setVisible,
+    cardHover,
+    setCardHover,
+    clearCardHover
+  }), [position, visible, cardHover, setCardHover, clearCardHover])
+
+  return <CursorContext.Provider value={value}>{children}</CursorContext.Provider>
+}
+
+export function useCursor() {
+  return React.useContext(CursorContext)
+}

package/src/website/CursorOverlay.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { useCursor } from './CursorContext'
+
+export default function CursorOverlay() {
+  const { position, visible } = useCursor()
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        left: 0,
+        top: 0,
+        width: '100vw',
+        height: '100vh',
+        pointerEvents: 'none',
+        zIndex: 60,
+      }}
+    >
+      <div
+        className="bg-fg-08 border-auto"
+        style={{
+          position: 'absolute',
+          transform: `translate(${position.x - 16}px, ${position.y - 16}px)`,
+          width: 32,
+          height: 32,
+          borderRadius: '999px',
+          border: '1px solid',
+          opacity: visible ? 1 : 0,
+          transition: 'opacity 150ms ease',
+        }}
+      />
+    </div>
+  )
+}

package/src/website/CursorTrail.jsx

@@ -0,0 +1,88 @@
+import { useEffect } from 'react'
+import { motion, useMotionValue, useSpring } from 'framer-motion'
+import { useCursor } from './CursorContext'
+
+const CursorTrail = () => {
+  const { position } = useCursor()
+  const cursorX = useMotionValue(0)
+  const cursorY = useMotionValue(0)
+
+  const springConfig = { damping: 28, stiffness: 170 }
+
+  // Chain followers: each follows the previous one
+  const follower1X = useSpring(cursorX, springConfig)
+  const follower1Y = useSpring(cursorY, springConfig)
+
+  const follower2X = useSpring(follower1X, springConfig)
+  const follower2Y = useSpring(follower1Y, springConfig)
+
+  const follower3X = useSpring(follower2X, springConfig)
+  const follower3Y = useSpring(follower2Y, springConfig)
+
+  useEffect(() => {
+    cursorX.set(position.x)
+    cursorY.set(position.y)
+  }, [position.x, position.y, cursorX, cursorY])
+
+  return (
+    <>
+      {/* Main cursor dot */}
+      <motion.div
+        className="fixed w-4 h-4 rounded-full pointer-events-none z-[9999]"
+        style={{
+          backgroundColor: 'var(--kol-color-absolute-white)',
+          left: 0,
+          top: 0,
+          x: cursorX,
+          y: cursorY,
+          translateX: '-50%',
+          translateY: '-50%',
+        }}
+      />
+
+      {/* Follower 1 - closest */}
+      <motion.div
+        className="fixed w-8 h-8 rounded-full border-2 pointer-events-none z-[9998] opacity-50"
+        style={{
+          borderColor: 'var(--kol-color-absolute-white)',
+          left: 0,
+          top: 0,
+          x: follower1X,
+          y: follower1Y,
+          translateX: '-50%',
+          translateY: '-50%',
+        }}
+      />
+
+      {/* Follower 2 - middle */}
+      <motion.div
+        className="fixed w-12 h-12 rounded-full border pointer-events-none z-[9997] opacity-30"
+        style={{
+          borderColor: 'var(--kol-color-absolute-white)',
+          left: 0,
+          top: 0,
+          x: follower2X,
+          y: follower2Y,
+          translateX: '-50%',
+          translateY: '-50%',
+        }}
+      />
+
+      {/* Follower 3 - furthest */}
+      <motion.div
+        className="fixed w-16 h-16 rounded-full border pointer-events-none z-[9996] opacity-20"
+        style={{
+          borderColor: 'var(--kol-color-absolute-white)',
+          left: 0,
+          top: 0,
+          x: follower3X,
+          y: follower3Y,
+          translateX: '-50%',
+          translateY: '-50%',
+        }}
+      />
+    </>
+  )
+}
+
+export default CursorTrail

package/src/website/Footer.jsx

@@ -0,0 +1,27 @@
+/* the line is the site's: `© <year> <owner>` (kolkrabbi.io: Kolkrabbi) */
+function Footer({ owner }) {
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
+  return (
+    <footer className="relative z-10 bg-surface-tertiary px-4 py-6 md:px-6 lg:px-8">
+      <div className="flex justify-between items-center">
+        <p className="kol-helper-12 uppercase">&copy; {new Date().getFullYear()}{owner ? ` ${owner}` : ''}</p>
+        <button
+          type="button"
+          onClick={scrollToTop}
+          className="kol-helper-12 uppercase transition-opacity hover:opacity-70 cursor-pointer"
+        >
+          <span className="flex items-center gap-1">
+            <span>↑</span>
+            Back to top
+          </span>
+        </button>
+      </div>
+    </footer>
+  )
+}
+
+export { Footer }
+export default Footer

package/src/website/Navbar.jsx

@@ -0,0 +1,172 @@
+import { useState, useEffect } from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import TakeoverMenu from './TakeoverMenu'
+
+/**
+ * Navbar — ONE top bar, one structure, every route and every breakpoint.
+ *
+ * Wordmark left; tools slot, theme toggle and menu button right. All nav lives
+ * behind the menu button, so there is no desktop link row and no mega-dropdown
+ * (2026-08-12: the site was serving four different top bars — a link row, a
+ * work-only 8-column grid with no links at all, the workshop shell header, and
+ * nothing on four orphan routes).
+ *
+ * The tools slot is opt-in per route via TOOLS_ROUTES — page-local controls sit
+ * next to the theme toggle instead of replacing the navigation.
+ */
+
+/* THE SEAM (2026-10-28): kolkrabbi.io's tools slot held its `WorkViewToggle` (kol-content's, wired to `useWorkView`) on
+ * /work. The control and its routes are the site's now — `tools={{ routes: ['/work'], node: <WorkViewToggle /> }}`;
+ * `useWorkView` still comes from this frame's `WorkViewProvider`. */
+
+/* Routes whose page-local control rides the navbar's tools slot.
+ *
+ * /stack, /prints and /foundry each already render their own view toggle and
+ * search inside ContentFilters further down the page, so listing them here
+ * would put two of the same control on one screen. They join once those move
+ * up — one line each. */
+
+const tokens = {
+  surface: 'var(--kol-surface-primary)',
+  onSurface: 'var(--kol-surface-on-primary)'
+}
+
+/* The three animated bars of the menu button. */
+const MenuBars = ({ open }) => (
+  <>
+    <span
+      className="block h-0.5 w-8 transition-all duration-300"
+      style={{
+        backgroundColor: tokens.onSurface,
+        transform: open ? 'translateY(8px) rotate(45deg)' : 'none',
+      }}
+    />
+    <span
+      className="block h-0.5 w-8 transition-all duration-300"
+      style={{
+        backgroundColor: tokens.onSurface,
+        opacity: open ? 0 : 1,
+      }}
+    />
+    <span
+      className="block h-0.5 w-8 transition-all duration-300"
+      style={{
+        backgroundColor: tokens.onSurface,
+        transform: open ? 'translateY(-8px) rotate(-45deg)' : 'none',
+      }}
+    />
+  </>
+)
+
+const Navbar = ({ wordmark, logomark, name, navItems, takeover, tools }) => {
+  const TOOLS_ROUTES = tools?.routes ?? []
+  const location = useLocation()
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+  const [isHovered, setIsHovered] = useState(false)
+  const [isVisible, setIsVisible] = useState(true)
+  const [lastScrollY, setLastScrollY] = useState(0)
+
+  const showTools = TOOLS_ROUTES.some(
+    (route) => location.pathname === route || location.pathname.startsWith(`${route}/`)
+  )
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY
+      const viewportMiddle = window.innerHeight / 2
+
+      if (currentScrollY < viewportMiddle) {
+        setIsVisible(true)
+      } else if (currentScrollY > lastScrollY && currentScrollY > viewportMiddle) {
+        setIsVisible(false)
+      } else if (currentScrollY < lastScrollY) {
+        setIsVisible(true)
+      }
+
+      setLastScrollY(currentScrollY)
+    }
+
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [lastScrollY])
+
+  useEffect(() => {
+    setIsMobileMenuOpen(false)
+  }, [location])
+
+  const toggleMobileMenu = () => {
+    setIsMobileMenuOpen((prev) => !prev)
+  }
+
+  return (
+    <>
+      <header
+        className="fixed top-0 left-0 right-0 z-50"
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        style={{
+          transition: 'transform 300ms ease-in-out, opacity 300ms ease',
+          /* Transparent while the takeover is open — an opaque primary strip
+           * across a tertiary field reads as a seam. */
+          backgroundColor: isMobileMenuOpen ? 'transparent' : 'var(--kol-surface-primary)',
+          /* Opacity follows the SLIDE, not the pointer (2026-08-31). It used to
+           * read `isHovered || isMobileMenuOpen || lastScrollY < innerHeight`, so
+           * past one viewport only a hover could bring the bar back — and a touch
+           * device never hovers. Scrolling up set translateY(0) and the bar slid
+           * in at opacity 0, which is why the reveal looked removed on mobile.
+           * `isVisible` is the same state the transform already uses. */
+          opacity: isVisible || isHovered || isMobileMenuOpen ? 1 : 0,
+          transform: isVisible ? 'translateY(0)' : 'translateY(-100%)',
+          color: tokens.onSurface
+        }}
+      >
+        <div className="w-full px-4 py-4 md:px-6 lg:px-8">
+          {/* 8-column grid at lg+, the geometry the /work bar already had: the
+            * wordmark opens column 1, page tools sit at the end of column 7,
+            * the global controls own column 8. A flex row with a margin does
+            * NOT reproduce this — the tools land ~190px too far right at
+            * desktop width. Below lg it collapses to a plain flex row. */}
+          <div className="flex items-center justify-between lg:grid lg:grid-cols-8 lg:gap-0">
+            {/* The takeover carries the big logomark top-left, so the small
+              * wordmark yields while it's open — invisible but still in the
+              * grid, keeping columns 7/8 from shifting. */}
+            <Link
+              to="/"
+              className={`mt-[2px] flex items-center transition-opacity hover:opacity-80 lg:col-start-1 ${isMobileMenuOpen ? 'invisible' : ''}`}
+              style={{ color: 'inherit' }}
+            >
+              <span className="inline-flex [&>svg]:h-6 [&>svg]:w-auto" role="img" aria-label={`${name ?? ''} wordmark`.trim()} dangerouslySetInnerHTML={{ __html: wordmark ?? '' }} />
+            </Link>
+
+            {showTools && !isMobileMenuOpen && (
+              <div className="lg:col-start-7 lg:flex lg:justify-end">
+                {tools.node}
+              </div>
+            )}
+
+            {/* Theme toggle lives inside the takeover, not here — the bar is
+              * wordmark · tools · menu button, nothing else. */}
+            <div className="flex items-center lg:col-start-8 lg:justify-end">
+              <button
+                className="z-50 w-9 h-9 flex flex-col items-center justify-center gap-1.5"
+                onClick={toggleMobileMenu}
+                aria-label="Toggle menu"
+                aria-expanded={isMobileMenuOpen}
+              >
+                <MenuBars open={isMobileMenuOpen} />
+              </button>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* The open menu is a full-bleed opaque takeover (ref. roscoproduction.com):
+        * big logomark top-left, studio line + instagram + theme toggle
+        * bottom-left, nav links bottom-right. The X stays in the z-50 header. */}
+      <TakeoverMenu open={isMobileMenuOpen} onClose={() => setIsMobileMenuOpen(false)} logomark={logomark} name={name} navItems={navItems} {...takeover} />
+
+    </>
+  )
+}
+
+export default Navbar

package/src/website/RouteLoader.jsx

@@ -0,0 +1,12 @@
+/**
+ * RouteLoader — intentionally empty.
+ *
+ * Previously rendered a 500ms full-screen spinner on every route change.
+ * No route in this app needs a blind timer overlay — components that
+ * depend on async data handle their own loading states.
+ *
+ * Kept as a no-op export so App.jsx doesn't need a diff.
+ */
+const RouteLoader = () => null
+
+export default RouteLoader

package/src/website/TakeoverMenu.jsx

@@ -0,0 +1,139 @@
+import { useEffect, useRef } from 'react'
+import { Link, NavLink } from 'react-router-dom'
+import gsap from 'gsap'
+import { useGSAP } from '@gsap/react'
+import { Icon } from '@kolkrabbi/kol-icons'
+import { Divider } from '@kolkrabbi/kol-component'
+import ThemeToggle from '../ThemeToggle.jsx'
+
+gsap.registerPlugin(useGSAP)
+
+/**
+ * TakeoverMenu — the site's ONE navigation surface, extracted from Navbar so
+ * other chromes (workshop) can mount the same menu without carrying the top
+ * bar. Full-bleed opaque takeover (ref. roscoproduction.com): big logomark
+ * top-left, studio block + instagram + theme toggle bottom-left, the seven
+ * nav links bottom-right.
+ *
+ * Controlled: `open` drives the GSAP in/out (the panel stays mounted so the
+ * close tween can play; autoAlpha keeps it click-dead when closed), `onClose`
+ * fires on Escape and on any link click. The trigger button stays with the
+ * caller — Navbar's hamburger, workshop's floating +.
+ */
+
+/* THE SEAM (2026-10-28): the links, the mark and the studio block are the site's. kolkrabbi.io's six links (Studio · Work
+ * · Foundry · Stack · Prints · Workshop — flat; Workshop's own sidebar owns its tree) come in as `navItems`. */
+
+export default function TakeoverMenu({ open, onClose, logomark, name, navItems = [], lines = [], blurb, social }) {
+  const menuRef = useRef(null)
+
+  /* Takeover housekeeping: Escape closes, and the page behind doesn't scroll —
+   * it's an opaque mode, not a scrim over live content. Lock the html element
+   * too — the page scrolls on documentElement, so body-only overflow still
+   * leaves the real scrollbar live. */
+  useGSAP(() => {
+    /* The old choreography summed to ~0.9s before the last link landed
+     * (0.35 fade → 0.08 delay → 8 × 0.05 stagger → 0.5 rise) and read as lag.
+     * The panel snaps, the items follow at once; `overwrite` stops a fast
+     * open/close from stacking tweens on the same targets. */
+    if (open) {
+      gsap.to(menuRef.current, { autoAlpha: 1, duration: 0.18, ease: 'power2.out', overwrite: 'auto' })
+      gsap.fromTo(
+        '[data-menu-item]',
+        { y: 16, opacity: 0 },
+        { y: 0, opacity: 1, duration: 0.3, ease: 'power3.out', stagger: 0.025, overwrite: 'auto' }
+      )
+    } else {
+      gsap.to(menuRef.current, { autoAlpha: 0, duration: 0.18, ease: 'power2.in', overwrite: 'auto' })
+    }
+  }, { dependencies: [open], scope: menuRef })
+
+  /* useEffect, NOT useGSAP: useGSAP with `dependencies` reverts its context only
+   * on unmount, so the unlock below never ran on close — html stayed
+   * overflow:hidden after every menu use until a reload (2026-08-26). */
+  useEffect(() => {
+    if (!open) return undefined
+    const onKey = (e) => { if (e.key === 'Escape') onClose() }
+    window.addEventListener('keydown', onKey)
+    const prevBody = document.body.style.overflow
+    const prevHtml = document.documentElement.style.overflow
+    document.body.style.overflow = 'hidden'
+    document.documentElement.style.overflow = 'hidden'
+    return () => {
+      window.removeEventListener('keydown', onKey)
+      document.body.style.overflow = prevBody
+      document.documentElement.style.overflow = prevHtml
+    }
+  }, [open])
+
+  return (
+    <div
+      ref={menuRef}
+      className="fixed inset-0 z-40 bg-surface-secondary shadow-[0_0_0_120px_var(--kol-surface-secondary)] flex flex-col justify-between gap-8 overflow-y-auto px-4 md:px-6 lg:px-8 pt-8 pb-8 md:pb-12"
+      style={{ visibility: 'hidden', opacity: 0 }}
+      aria-hidden={!open}
+    >
+      {/* pt-8 = the header's py-4 plus the 16px the user pushed the logo down.
+        * THE STRIP (2026-09-01 → 09-02): with Safari's toolbar collapsed to the
+        * pill, a real iPhone showed the page's footer in a ~46px band under the
+        * menu. `inset-0`, then `h-dvh`, then `h-[100lvh]` all left it — because
+        * iOS paints the document under the collapsed pill but that band is
+        * OUTSIDE the layout viewport, so no `bottom:0` and no viewport unit
+        * reaches it. The spread shadow is a 120px halo of the panel's own
+        * surface past every edge (three are off-screen); it is not clipped by
+        * the panel's overflow and fades with autoAlpha. `inset-0` alone tracks
+        * the layout viewport exactly at every moment, so the height is back
+        * off. Only a real iPhone can prove this; desktop makes the units equal. */}
+      <Link to="/" onClick={onClose} className="inline-flex w-fit" aria-label={`${name ?? ''} home`.trim()}>
+        <span className="inline-flex h-24 md:h-56 lg:h-72 [&>svg]:h-full [&>svg]:w-auto" role="img" aria-label={name} dangerouslySetInnerHTML={{ __html: logomark ?? '' }} />
+      </Link>
+
+      {/* One row at every width, both columns bottom-aligned — the nav links
+        * reach the bottom edge and the socials/theme pair sits beside them,
+        * not under them (user 2026-09-01). The tagline copy above them is
+        * desktop furniture and hides below md. */}
+      <div className="flex flex-row items-end justify-between gap-8">
+        <div className="flex flex-col items-start gap-6" data-menu-item>
+          {lines.length > 0 && <p className="hidden md:block kol-sans-heading-02 font-medium max-w-[520px]">
+            {lines.map((l) => <span key={l} className="block">{l}</span>)}
+          </p>}
+          {blurb && <p className="hidden md:block kol-mono-16 max-w-[520px]">
+            {blurb}
+          </p>}
+          {(lines.length > 0 || blurb) && <Divider className="hidden md:block w-full max-w-[520px]" />}
+          <div className="flex flex-col items-start gap-4 md:flex-row md:items-center md:gap-8">
+            {/* underline on the handle only — the icon stays clean; 1px keeps
+              * the relative weight of the 4px-on-heading-01 links, pb gives the
+              * trailing underscore air so glyph and line don't merge. */}
+            {social && <a
+              href={social.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="kol-mono-14 inline-flex items-center gap-3"
+            >
+              {social.icon && <Icon name={social.icon} size={16} />}
+              <span className="kol-link-underline [--kol-link-underline-size:1px] pb-0.5">{social.label}</span>
+            </a>}
+            {/* flush · label (docs/visual-reference pick) — labeled,
+              * so it titles itself; no Tooltip wrapper. */}
+            <ThemeToggle variant="flush" />
+          </div>
+        </div>
+
+        <nav aria-label="Primary" className="flex flex-col items-end gap-3 md:gap-4 text-right shrink-0">
+          {navItems.map((item) => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              className="kol-sans-heading-01 kol-link-underline [--kol-link-underline-size:4px]"
+              data-menu-item
+              onClick={onClose}
+            >
+              {item.label}
+            </NavLink>
+          ))}
+        </nav>
+      </div>
+    </div>
+  )
+}

package/src/website/WebsiteLayout.jsx

@@ -0,0 +1,50 @@
+import { Outlet, useLocation } from 'react-router-dom'
+import Navbar from './Navbar'
+import { Footer } from './Footer'
+import { CursorProvider } from './CursorContext'
+import { WorkViewProvider } from './WorkViewContext'
+import CursorOverlay from './CursorOverlay'
+/* kol-component's AsciiCursor — the evolved twin of the site's copy (touch and reduced-motion gated); one, not two */
+import { AsciiCursor } from '@kolkrabbi/kol-component'
+
+/**
+ * WebsiteLayout — a website's frame: the top bar and its takeover menu, full-bleed pages, the footer, an optional cursor
+ * layer. kolkrabbi.io's `components/layout/WebsiteLayout.jsx`, carried verbatim into kol-framework (LayoutsAndWebsiteLayout,
+ * kol-website 2026-10-28 — *"copy it, don't redesign it"*). The one change is the seams: what the site says comes in.
+ *
+ *   wordmark · logomark   raw SVG strings — the bar's wordmark, the takeover's big mark
+ *   name                  the site's name, for the marks' labels ("<name> wordmark", "<name> home")
+ *   navItems              `[{ to, label }]` — the takeover's links (kolkrabbi.io: Studio · Work · Foundry · Stack · Prints · Workshop)
+ *   takeover              `{ lines: [string], blurb, social: { href, label, icon } }` — the takeover's studio block
+ *   owner                 the footer's line: `© <year> <owner>`
+ *   hideChrome            `(pathname) => bool`, or an array of path prefixes — routes that drop the bar and footer
+ *   tools                 `{ routes: [path], node }` — a page control that rides the bar's tools slot on those routes
+ *   cursor                true → the cursor ring and the ASCII cursor (opt-in)
+ *   children              the page; without it, the router's `<Outlet />` (a layout route)
+ *
+ * The intro (`IntroLoader`) and `RouteLoader` are mounted by the site, outside the frame, as kolkrabbi.io does.
+ */
+export default function WebsiteLayout({ wordmark, logomark, name, navItems = [], takeover, owner, hideChrome: hide, tools, cursor = false, children }) {
+  const location = useLocation()
+  const hideChrome = typeof hide === 'function' ? hide(location.pathname) : (hide ?? []).some((p) => location.pathname.startsWith(p))
+
+  return (
+    <WorkViewProvider>
+      <CursorProvider>
+        <div className="min-h-dvh bg-surface-primary">
+          <a
+            href="#main"
+            className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[60] focus:px-4 focus:py-2 focus:rounded bg-accent-primary text-surface-primary kol-mono-14"
+          >
+            Skip to content
+          </a>
+          {!hideChrome && <Navbar wordmark={wordmark} logomark={logomark} name={name} navItems={navItems} takeover={takeover} tools={tools} />}
+          {children ?? <Outlet />}
+          {!hideChrome && <Footer owner={owner} />}
+          {cursor && <CursorOverlay />}
+          {cursor && <AsciiCursor />}
+        </div>
+      </CursorProvider>
+    </WorkViewProvider>
+  )
+}

package/src/website/WorkViewContext.jsx

@@ -0,0 +1,20 @@
+import { createContext, useContext, useState } from 'react'
+
+const WorkViewContext = createContext(null)
+
+export function WorkViewProvider({ children }) {
+  const [viewMode, setViewMode] = useState('list')
+  const [searchQuery, setSearchQuery] = useState('')
+
+  return (
+    <WorkViewContext.Provider value={{ viewMode, setViewMode, searchQuery, setSearchQuery }}>
+      {children}
+    </WorkViewContext.Provider>
+  )
+}
+
+export function useWorkView() {
+  const ctx = useContext(WorkViewContext)
+  if (!ctx) throw new Error('useWorkView must be used within WorkViewProvider')
+  return ctx
+}