@kolkrabbi/kol-framework 0.27.1 → 0.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-framework",
-  "version": "0.27.1",
+  "version": "0.28.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.99.0",
+    "@kolkrabbi/kol-icons": "^0.20.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