@kolkrabbi/kol-framework 0.15.2 → 0.16.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-framework",
-  "version": "0.15.2",
+  "version": "0.16.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.27.0",
-    "@kolkrabbi/kol-icons": "0.10.0"
+    "@kolkrabbi/kol-component": "^0.32.1",
+    "@kolkrabbi/kol-icons": "^0.12.1"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",

package/src/SideNav.jsx

@@ -63,10 +63,13 @@ export default function SideNav({
   const isActiveCat = (cat) => pagesOf(cat).some((p) => isPageActive(p.to))
 
   /* Every navigation closes the mobile drawer — the prop sat accepted-but-
-   * unread until the kol-website session flagged it (2026-08-09). */
+   * unread until the kol-website session flagged it (2026-08-09) — and, from
+   * the collapsed rail, expands the sidebar ("pressing any icon would expand
+   * the sidebar", same ruling as the chip removal). */
   const handleNavigate = (e) => {
     onNavigate?.(e)
     onCloseDrawer?.()
+    if (collapsed) toggleCollapsed()
   }
 
   /* Which categories are disclosed. INDEPENDENT per category (elder ruling
@@ -78,6 +81,7 @@ export default function SideNav({
     next.has(id) ? next.delete(id) : next.add(id)
     return next
   })
+  const discloseCat = (id) => setOpenCats((prev) => new Set(prev).add(id))
 
   /* One collapse contract, two gestures — the hook owns the stamp, the
    * storage schema and the state; the chip Button and the grab edge both
@@ -91,19 +95,24 @@ export default function SideNav({
       className={`kol-sidenav sticky top-0 self-start h-dvh flex flex-col z-20${background ? ' bg-surface-primary border-r border-fg-08' : ''}${collapsed ? ' is-collapsed' : ''}${drawerOpen ? ' is-drawer-open' : ''}`}
     >
       {/* The elder A/B (closed 2026-08-01): the DS Button IS the collapse
-        * control. Offset is half the pinned sm square, centring it on the
-        * rail's edge — the DS hardcodes that square and exposes no token. */}
-      <Button
-        variant="primary"
-        size="sm"
-        radius="full"
-        iconOnly={collapsed ? 'chevron-right' : 'chevron-left'}
-        aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-        aria-expanded={!collapsed}
-        title={collapsed ? 'Expand' : 'Collapse'}
-        onClick={toggleCollapsed}
-        className="kol-sidenav-toggle absolute top-5 right-[-0.875rem] z-[2]"
-      />
+        * control — EXPANDED ONLY (user ruling 2026-08-09, verbatim: "REMOVE
+        * chevron from collapsed view … from collapsed view pressing any icon
+        * would expand the sidebar!"). The collapsed rail's expand affordance
+        * is the rows themselves. Offset is half the pinned sm square,
+        * centring it on the rail's edge. */}
+      {!collapsed && (
+        <Button
+          variant="primary"
+          size="sm"
+          radius="full"
+          iconOnly="chevron-left"
+          aria-label="Collapse sidebar"
+          aria-expanded
+          title="Collapse"
+          onClick={toggleCollapsed}
+          className="kol-sidenav-toggle absolute top-5 right-[-0.875rem] z-[2]"
+        />
+      )}
 
       <div className="kol-sidenav-scroll flex-1 flex flex-col justify-between overflow-y-auto pt-4 pb-4 [scrollbar-width:thin]">
         <nav aria-label="Sections">
@@ -139,7 +148,17 @@ export default function SideNav({
                   type="button"
                   className={`${rowCls} bg-transparent border-0 cursor-pointer text-left${isActiveCat(cat) ? ' is-active' : ''}`}
                   aria-expanded={isOpen}
-                  onClick={() => toggleCat(cat.id)}
+                  /* Collapsed rail: the click meant "open this" — expand the
+                   * rail AND disclose the category, or the tap is wasted on
+                   * an expand that lands on a closed tree. */
+                  onClick={() => {
+                    if (collapsed) {
+                      toggleCollapsed()
+                      discloseCat(cat.id)
+                    } else {
+                      toggleCat(cat.id)
+                    }
+                  }}
                 >
                   {glyph}
                   <span className="kol-sidenav-hop-label flex-1 min-w-0">{cat.label}</span>