@kolkrabbi/kol-framework 0.4.2 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-framework",
-  "version": "0.4.2",
+  "version": "0.5.1",
   "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",
@@ -27,8 +27,8 @@
     "app-shell"
   ],
   "dependencies": {
-    "@kolkrabbi/kol-component": "0.10.1",
-    "@kolkrabbi/kol-icons": "0.6.1"
+    "@kolkrabbi/kol-component": "0.12.0",
+    "@kolkrabbi/kol-icons": "0.7.0"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",

package/src/ShellHeader.jsx

@@ -133,7 +133,7 @@ export default function ShellHeader({
                       onClick={onTocToggle}
                       aria-label="Toggle table of contents sidebar"
                     >
-                      <Icon name="dock-right" size={18} />
+                      <Icon name="panel-right" size={18} />
                     </button>
                   )}
                 </div>

package/src/ThemeToggle.jsx

@@ -69,16 +69,17 @@ export default function ThemeToggle({ variant = 'icon', className = '' }) {
     )
   }
 
-  // variant === 'icon' (default)
+  // variant === 'icon' (default) — 36×36 button / 20px glyph, the DS reference
+  // (user-verified 2026-07-15; was 32/18, which consumers shimmed via CSS)
   return (
     <button
       type="button"
       onClick={handleToggle}
       aria-label={`Switch to ${next} mode`}
       title={`Switch to ${next} mode`}
-      className={`inline-flex items-center justify-center w-8 h-8 p-0 bg-transparent border-0 cursor-pointer text-emphasis hover:opacity-80 transition-opacity duration-300 ${className}`.trim()}
+      className={`inline-flex items-center justify-center w-9 h-9 p-0 bg-transparent border-0 cursor-pointer text-emphasis hover:opacity-80 transition-opacity duration-300 ${className}`.trim()}
     >
-      {iconSwap(18)}
+      {iconSwap(20)}
     </button>
   )
 }

package/src/theme.js

@@ -2,10 +2,11 @@ import { useEffect, useState } from 'react'
 
 /* Theme-state machinery — the logic behind ThemeToggle, exported so app code
  * (navbars, heroes, anything theme-aware) can read/set the theme without
- * mounting the toggle UI. Policy (unchanged from ThemeToggle): the DS is
- * light-first; an explicit choice is an app-set data-theme attribute or a
- * saved user toggle, and absent both the page follows prefers-color-scheme
- * via the theme CSS. `data-theme` + localStorage are written ONLY through
+ * mounting the toggle UI. Policy: the DS is light-first (USER law, theme
+ * 0.9.2 dropped the OS-follow auto-dark CSS); an explicit choice is an
+ * app-set data-theme attribute or a saved user toggle, and absent both the
+ * theme is light — never the OS preference, so state can't disagree with
+ * what the CSS renders. `data-theme` + localStorage are written ONLY through
  * applyTheme (a user action) — mounting a reader leaves the DOM untouched. */
 
 export const THEME_STORAGE_KEY = 'kol-theme'
@@ -22,8 +23,7 @@ function getExplicitTheme() {
 
 export function getInitialTheme() {
   if (typeof document === 'undefined') return 'light'
-  return getExplicitTheme()
-    ?? (window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light')
+  return getExplicitTheme() ?? 'light'
 }
 
 /** Stamp + persist an explicit theme choice. */
@@ -37,8 +37,8 @@ export function applyTheme(theme) {
  *
  * All instances observe the html `data-theme` attribute, so any writer
  * (this hook's setTheme, ThemeToggle, an app boot script) updates every
- * reader. When the page has no explicit choice, instances follow the
- * system preference. Returns { theme, isDark, setTheme, toggle }.
+ * reader. When the page has no explicit choice, the theme is light
+ * (light-first law). Returns { theme, isDark, setTheme, toggle }.
  */
 export function useTheme() {
   const [theme, setThemeState] = useState(getInitialTheme)
@@ -62,18 +62,8 @@ export function useTheme() {
     })
     observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })
 
-    /* No explicit choice anywhere — follow the system, like the theme CSS. */
-    const mq = window.matchMedia?.('(prefers-color-scheme: dark)')
-    const onChange = (e) => {
-      try { if (localStorage.getItem(THEME_STORAGE_KEY)) return } catch { /* storage blocked */ }
-      if (document.documentElement.dataset.theme) return
-      setThemeState(e.matches ? 'dark' : 'light')
-    }
-    mq?.addEventListener?.('change', onChange)
-
     return () => {
       observer.disconnect()
-      mq?.removeEventListener?.('change', onChange)
     }
   }, [])