@kolkrabbi/kol-framework 0.27.1 → 0.29.0

package/kol-framework.css

@@ -437,54 +437,15 @@ body {
    Owners: kol-type-roles.css (pre/code) · kol-components-atoms.css
    (-indented / -pullout). Do not re-add them here. */
 
-/* ───── Fullscreen overlay ───── */
-
-.kol-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: var(--kol-z-modal, 100);
-  background: color-mix(in srgb, var(--kol-surface-inverse) 88%, transparent);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 48px 24px;
-}
-
-.kol-overlay-sheet {
-  position: relative;
-  max-width: var(--kol-container-max);
-  max-height: 100%;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.kol-overlay-sheet img {
-  max-width: 100%;
-  max-height: 90vh;
-  object-fit: contain;
-  display: block;
-}
-
-.kol-overlay-close {
-  position: absolute;
-  top: -48px;
-  right: 0;
-  width: 40px;
-  height: 40px;
-  border-radius: 4px;
-  background: transparent;
-  border: 1px solid color-mix(in srgb, var(--kol-surface-on-inverse) 32%, transparent);
-  color: var(--kol-surface-on-inverse);
-  cursor: pointer;
-  font-size: 24px;
-  line-height: 1;
-}
-
-.kol-overlay-close:hover {
-  background: color-mix(in srgb, var(--kol-surface-on-inverse) 8%, transparent);
-}
+/* ───── Fullscreen overlay — RETIRED 2026-08-27 (DocPageAndKindShowcase, kol-r2b2)
+ * The framework shipped its own `.kol-overlay` / `.kol-overlay-sheet` /
+ * `.kol-overlay-close` (an inverse 88 % scrim, a 100 %-wide sheet, a hand-drawn
+ * close) that beat the theme's FullscreenOverlay rules whenever a consumer
+ * imported the framework after the theme — a light wash in dark mode and a sheet
+ * that swallowed every click, so click-away died; kol-r2b2 overrode both. No
+ * framework component renders these classes. The theme's rules
+ * (kol-components-atoms.css: flat `surface-primary` scrim, a sheet that hugs its
+ * panel, the DS Button close) are the one definition. */
 
 /* ───── Carousel (embla) ───── */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-framework",
-  "version": "0.27.1",
+  "version": "0.29.0",
   "description": "KOL app shell — sidenav, layout, theme toggle, footer, heroes + brand color layer. SideNav takes nav data as props so the tree stays app-local.",
   "license": "MIT",
   "type": "module",
@@ -20,8 +20,8 @@
     "react-router-dom": "^6.0.0 || ^7.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-component": "^0.81.0",
-    "@kolkrabbi/kol-icons": "^0.18.0"
+    "@kolkrabbi/kol-component": "^0.114.0",
+    "@kolkrabbi/kol-icons": "^0.23.0"
   },
   "files": [
     "src",

package/src/index.js

@@ -13,7 +13,7 @@ export { default as SideNav } from './SideNav.jsx'
 export { default as useDragResize } from './useDragResize.js'
 export { default as ShellHeader, HEADER_ICON } from './ShellHeader.jsx'
 export { default as ThemeToggle } from './ThemeToggle.jsx'
-export { useTheme, applyTheme, getInitialTheme, THEME_STORAGE_KEY } from './theme.js'
+export { useTheme, applyTheme, getInitialTheme, THEME_STORAGE_KEY, THEME_BOOT_SCRIPT } from './theme.js'
 export { default as Layout } from './Layout.jsx'
 export { default as PageSection } from './PageSection.jsx'
 export { default as PortalFooter } from './PortalFooter.jsx'

package/src/theme.js

@@ -18,6 +18,22 @@ import { useEffect, useState } from 'react'
 
 export const THEME_STORAGE_KEY = 'kol-theme'
 
+/* THE NO-FLASH BOOT SNIPPET (ShellHomeSystem, 2026-08-27 — every app hand-wrote
+ * it against this file's key): inline it in index.html before the app script.
+ * USER law: explicit choice > system > light — a saved light/dark stamps
+ * `data-theme` before first paint; no saved choice leaves the page un-stamped
+ * so the theme CSS follows the OS live. The versioned cutover (v3, 2026-07-30)
+ * discards stamps written by the old two-state toggle, once. */
+export const THEME_BOOT_SCRIPT = `try {
+  if (localStorage.getItem('kol-theme-v') !== '3') {
+    localStorage.removeItem('kol-theme')
+    localStorage.removeItem('theme')
+    localStorage.setItem('kol-theme-v', '3')
+  }
+  var t = localStorage.getItem('kol-theme')
+  if (t === 'light' || t === 'dark') document.documentElement.dataset.theme = t
+} catch (e) {}`
+
 function getExplicitTheme() {
   const attr = document.documentElement.dataset.theme
   if (attr === 'light' || attr === 'dark') return attr