@kolkrabbi/kol-framework 0.6.4 → 0.8.0

package/kol-framework.css

@@ -76,6 +76,11 @@ body {
 }
 
 @media (min-width: 1280px) { :root { --kol-container-max: 1600px; } }
+/* The ladder's last rung is the law's frame itself: --kol-container-max is the
+ * responsive RESOLUTION of --kol-content-shell (kol-theme), not a second width
+ * family. Before 2026-07-30 the ladder stopped at 1600 while the stated law
+ * said 1800 — same element, two answers (lobby/WidthSystemContradictions). */
+@media (min-width: 1920px) { :root { --kol-container-max: var(--kol-content-shell, 1800px); } }
 
 /* :root[data-sidenav="collapsed"] removed 2026-07-29 — the manual collapse
  * feature died with the editor's exit (brand ruling); the responsive rail
@@ -159,6 +164,35 @@ body {
   flex-direction: column;
 }
 
+/* ───── Full-bleed (THE one mechanism, 2026-07-30) ─────
+ * Cancels the page inset with a negative margin — container-relative, so it is
+ * correct inside any layout, including .kol-brand-layout's sidenav grid.
+ * Promoted from kol-website's local `@utility full-bleed`.
+ *
+ * THE INSET IS A PARAMETER (2026-07-30, second pass). v1 hardwired
+ * --kol-pad-section-x, which silently assumed every consumer pads its pages
+ * with the DS ladder. kol-website's apps/web does not — it pads with
+ * `.breakpoint-padding` (1 / 1.25 / 1.5rem) and uses zero .kol-page classes,
+ * so adopting the hardwired rule over-pulled by 4–24px and every hero
+ * overhung the viewport. A cancellation utility must cancel the inset that is
+ * ACTUALLY THERE; the DS cannot know that from inside the package.
+ *
+ * So: --kol-full-bleed-inset defaults to the DS ladder (zero change for
+ * consumers on .kol-page) and is overridable by any consumer running its own
+ * inset — scope it on the padded wrapper, or on :root for a whole app:
+ *
+ *   :root { --kol-full-bleed-inset: 1rem; }
+ *   @media (min-width: 768px)  { :root { --kol-full-bleed-inset: 1.25rem; } }
+ *   @media (min-width: 1024px) { :root { --kol-full-bleed-inset: 1.5rem; } }
+ *
+ * NEVER use the viewport trick (`width:100vw; margin-left: calc(50% - 50vw)`):
+ * 50vw measures the VIEWPORT, and inside a sidenav grid the content track is
+ * not viewport-centred — the element overhangs left by ~half the sidenav width
+ * and any `overflow:hidden` ancestor clips it (the /review slice bug). */
+.kol-full-bleed {
+  margin-inline: calc(-1 * var(--kol-full-bleed-inset, var(--kol-pad-section-x)));
+}
+
 /* ───── Standard 4-col content grid ─────
    The page-wide grid all chapter content lays out against. Always 4 cols.
    Rows size to content; children control their own height via aspect-ratio

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-framework",
-  "version": "0.6.4",
+  "version": "0.8.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",
@@ -27,8 +27,8 @@
     "app-shell"
   ],
   "dependencies": {
-    "@kolkrabbi/kol-component": "0.13.0",
-    "@kolkrabbi/kol-icons": "0.8.10"
+    "@kolkrabbi/kol-component": "workspace:*",
+    "@kolkrabbi/kol-icons": "workspace:*"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",
@@ -43,4 +43,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/ThemeToggle.jsx

@@ -36,20 +36,26 @@ const MODE_LABEL = { light: 'Light mode', dark: 'Dark mode', system: 'System' }
 const NEXT_MODE = { light: 'dark', dark: 'system', system: 'light' }
 
 export default function ThemeToggle({ variant = 'icon', size = 'md', className = '' }) {
-  const { isDark, mode, cycle } = useTheme()
+  const { mode, cycle } = useTheme()
 
   const next = NEXT_MODE[mode]
   const nextLabel = next === 'system' ? 'system theme' : `${next} mode`
   const handleToggle = cycle
 
-  /* The roll: the strip slides one glyph-width per mode while the split-circle
-   * glyphs spin 180° in the same clock — dark→light rolls forward (>>),
-   * light→dark rolls back (<<), system slides on to the desktop glyph. */
-  const glyphSpin = {
-    transform: isDark ? 'rotate(0deg)' : 'rotate(180deg)',
+  /* The ROLL (redone 2026-07-30 — the 0.5.13 motion was declared FAILED).
+   * Wheel mechanics, not slide+flip: rotation ACCUMULATES with the slot
+   * (-180° per glyph-width) and runs on the same 500ms/ease clock as the
+   * strip's translateX, so the split-circle reads as a coin rolling to its
+   * next position — travel left = CCW, travel right = CW, two slots = two
+   * full half-turns. The old code rotated on `isDark` alone, desynced from
+   * the travel, which is exactly why it read as a slide with a flip bolted
+   * on. The desktop glyph doesn't spin — it's not a wheel; it slides in as
+   * the no-choice state. */
+  const slot = mode === 'dark' ? 0 : mode === 'light' ? 1 : 2
+  const glyphRoll = {
+    transform: `rotate(${slot * -180}deg)`,
     lineHeight: 0,
   }
-  const slot = mode === 'dark' ? 0 : mode === 'light' ? 1 : 2
   const iconSwap = (size) => (
     <span
       className="relative inline-block overflow-hidden"
@@ -60,10 +66,10 @@ export default function ThemeToggle({ variant = 'icon', size = 'md', className =
         className="flex transition-transform duration-500 ease-in-out"
         style={{ width: size * 3, transform: `translateX(-${slot * size}px)` }}
       >
-        <span className="inline-flex transition-transform duration-500 ease-in-out" style={glyphSpin}>
+        <span className="inline-flex transition-transform duration-500 ease-in-out" style={glyphRoll}>
           <Icon name="mode-toggle-01" size={size} />
         </span>
-        <span className="inline-flex transition-transform duration-500 ease-in-out" style={glyphSpin}>
+        <span className="inline-flex transition-transform duration-500 ease-in-out" style={glyphRoll}>
           <Icon name="mode-toggle-01" size={size} />
         </span>
         <span className="inline-flex" style={{ lineHeight: 0 }}>