ab-nextjs-core 0.1.4 → 0.1.6

package/ab-screen-layout/styles.module.css

@@ -27,7 +27,7 @@
 * @name: AB Screen Layout - Component Stylesheet (plain CSS, Tailwind-independent)
 * @file: ab-screen-layout/styles.module.css
 * @type: CSS Module
-* @authors: Abraham Ukachi <abraham.ukachi@laplateforme.io>
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
 */
 
 /*

package/index.ts

@@ -27,7 +27,7 @@
 * @name: Core - Package Catalog
 * @file: index.ts
 * @type: TypeScript
-* @authors: Abraham Ukachi <abraham.ukachi@laplateforme.io>
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
 */
 
 /*

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ab-nextjs-core",
-  "version": "0.1.4",
-  "description": "\ud83c\udf31 A lightweight collection of server & client React components as core abElements (i.e. ab-app-layout, ab-screen-layout, ...) created by Abraham Ukachi, and optimized for Next.js applications \ud83d\ude0e.",
+  "version": "0.1.6",
+  "description": "🌱 A lightweight collection of server & client React components as core abElements (i.e. ab-app-layout, ab-screen-layout, ...) created by Abraham Ukachi, and optimized for Next.js applications 😎.",
   "type": "module",
   "main": "index.ts",
   "types": "types/index.d.ts",
@@ -16,6 +16,7 @@
   "scripts": {
     "lint": "eslint . --fix",
     "test": "vitest run",
+    "typecheck": "tsc --noEmit -p .",
     "check:publish": "node scripts/check-publish-deps.mjs",
     "prepublishOnly": "node scripts/check-publish-deps.mjs"
   },
@@ -31,7 +32,7 @@
   "author": {
     "name": "Abraham Ukachi",
     "url": "https://github.com/abraham-ukachi",
-    "email": "abraham.ukachi@laplateforme.io"
+    "email": "abrahamukachi@gmail.com"
   },
   "license": "MIT",
   "peerDependencies": {

package/server/ab-app-layout/index.tsx

@@ -24,7 +24,7 @@
 * SOFTWARE.
 *
 * @project: ab-nextjs-core
-* @authors: Abraham Ukachi <abraham.ukachi@laplateforme.io>
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
 */
 
 /*
@@ -33,10 +33,12 @@
 * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 */
 
-import type { ReactElement, ReactNode } from 'react';
+import { isValidElement, type ReactElement, type ReactNode } from 'react';
 import clsx from 'clsx';
 import AbLinearProgress from '../../ab-linear-progress';
 import styles from './styles.module.css';
+// 🫥 G50: empty-slot helper
+import { toAbSlot } from '../../ab-page-provider/slot';
 
 export interface AbAppLayoutProps {
   orientation: 'vertical' | 'horizontal';
@@ -50,6 +52,13 @@ export interface AbAppLayoutProps {
   footer?: ReactNode;
   children?: ReactNode;
   menus?: ReactNode;
+  /** 🧭 0.1.6 (G17): `'panes'` = the docs shell (4 breakpoints, rail, overlay aside). Default keeps the old layout. */
+  variant?: 'default' | 'panes';
+  /** 🧷 0.1.6: collapse the sidebar to the icon rail (tablet and up, `variant="panes"`). */
+  railCollapsed?: boolean;
+  /** 🧰 0.1.6: render the legacy #backdrop / #menus / #dialogs / #toasts / progress / canvas layers.
+   *  Default: on for `variant="default"`, off for `"panes"` (the shell brings its own menus and dialogs). */
+  overlays?: boolean;
 }
 
 /**
@@ -68,17 +77,33 @@ const AbAppLayout = ({
   footer,
   children,
   menus,
+  variant = 'default', // 🧭
+  railCollapsed = false, // 🧷
+  overlays, // 🧰
 }: AbAppLayoutProps): ReactElement => {
+  // 🧱 panes: the header slot is a plain grid row (0px when empty). Its child (e.g. AbAppBar) brings its own
+  //    <header>, so we never nest one header inside another. Same when the slot child IS a <header>.
+  const HeaderTag = variant === 'panes' || (isValidElement(header) && header.type === 'header') ? 'div' : 'header';
+  // 🧰 legacy overlay layers (off in panes unless asked for)
+  const showOverlays = overlays ?? variant !== 'panes';
+  // 🫥 G50 (D37): panes never render an empty header / footer row (0px); the CSS :empty / :has() catch the rest
+  const top = toAbSlot(header);
+  const showHeader = variant !== 'panes' || top != null;
+  const showFooter = variant !== 'panes' || toAbSlot(footer) != null;
   return (
     <div
       className={clsx(['AbAppLayout', styles.abAppLayout, className])}
       hidden={hidden}
       data-page-name={pageName}
       data-orientation={orientation ?? ''}
+      data-variant={variant} // 🧭 CSS hook for the panes
+      data-rail={railCollapsed ? 'true' : 'false'} // 🧷
     >
-      <header className={clsx(['HeaderWrapper', styles.abAppLayout__headerWrapper])}>
-        {header}
-      </header>
+      {showHeader && (
+        <HeaderTag className={clsx(['HeaderWrapper', styles.abAppLayout__headerWrapper])} data-ab-part="header">
+          {variant === 'panes' ? top : header}
+        </HeaderTag>
+      )}
 
       <div className={clsx(['ContentWrapper', styles.abAppLayout__contentWrapper])}>
         {sideBar}
@@ -86,26 +111,32 @@ const AbAppLayout = ({
         {navBar}
       </div>
 
-      <footer className={clsx(['FooterWrapper', styles.abAppLayout__footerWrapper])}>
-        {footer}
-      </footer>
-
-      <div id="backdrop" className={clsx(['Backdrop', styles.abAppLayout__backdrop])} hidden />
-      <div id="menus" className={clsx(['Menus', styles.abAppLayout__menus])} hidden>
-        {menus}
-      </div>
-      <div id="dialogs" className={clsx(['Dialogs', styles.abAppLayout__dialogs])} hidden />
-      <div id="toasts" className={clsx(['Toasts', styles.abAppLayout__toasts])} hidden />
-
-      <AbLinearProgress
-        className="absolute top-0 left-0 right-0 z-50 !h-0.5 lg:!h-1"
-        color="secondary"
-        hidden={true}
-        isIndeterminate={true}
-        progress={25}
-      />
-
-      <canvas className={clsx(['Canvas', styles.abAppLayout__canvas])} />
+      {showFooter && (
+        <footer className={clsx(['FooterWrapper', styles.abAppLayout__footerWrapper])} data-ab-part="footer">
+          {footer}
+        </footer>
+      )}
+      {/* 🧰 legacy layers (ids kept for old apps) */}
+      {showOverlays && (
+        <>
+          <div id="backdrop" className={clsx(['Backdrop', styles.abAppLayout__backdrop])} hidden />
+          <div id="menus" className={clsx(['Menus', styles.abAppLayout__menus])} hidden>
+            {menus}
+          </div>
+          <div id="dialogs" className={clsx(['Dialogs', styles.abAppLayout__dialogs])} hidden />
+          <div id="toasts" className={clsx(['Toasts', styles.abAppLayout__toasts])} hidden />
+          <AbLinearProgress
+            className="absolute top-0 left-0 right-0 z-50 !h-0.5 lg:!h-1"
+            color="secondary"
+            hidden={true}
+            isIndeterminate={true}
+            progress={25}
+          />
+          <canvas className={clsx(['Canvas', styles.abAppLayout__canvas])} />
+        </>
+      )}
+      {/* 📋 panes: still render menus when the app passes some */}
+      {!showOverlays && menus != null && <div className={clsx(['Menus', styles.abAppLayout__menus])}>{menus}</div>}
     </div>
   );
 };

package/server/ab-app-layout/styles.module.css

@@ -27,7 +27,7 @@
 * @name: AB App Layout - Component Stylesheet (plain CSS, Tailwind-independent)
 * @file: server/ab-app-layout/styles.module.css
 * @type: CSS Module
-* @authors: Abraham Ukachi <abraham.ukachi@laplateforme.io>
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
 */
 
 /*
@@ -143,3 +143,220 @@
   from { opacity: 0; }
   to { opacity: 1; }
 }
+
+/* ================================================================== */
+/* 🧭 0.1.6 (G17 + D34/D35 layout rule): docs-shell panes             */
+/*    opt in with variant="panes". Children of the content wrapper     */
+/*    are matched by data-ab-part:                                     */
+/*    sidebar | rail (nav) · main · aside · bottomBar (nav)            */
+/*    📱 <768  · 📟 768–1023 · 💻 1024–1439 joined · 🖥️ ≥1440 gapped   */
+/*                                                                     */
+/*    📏 THE LAYOUT RULE (God, D34):                                   */
+/*    · the app is ONE 100dvh box and the DOCUMENT NEVER SCROLLS       */
+/*    · header / footer rows are 0px (not rendered / :empty) when empty*/
+/*    · sidebar, main content and aside content each scroll on their   */
+/*      own (min-height:0 + overflow:auto + overscroll containment)    */
+/*    · no hard-coded bar heights: rows size to their content          */
+/*    Tokens: --ab-pane-gap / --ab-pane-radius / --ab-divider-hairline */
+/*    (ab-nextjs-theme ≥ 0.3.4), with safe fallbacks                    */
+/* ================================================================== */
+
+/* 🔒 G54: lock the document while a panes layout is on the page (CSS-only via :has, so the server twin
+ *    works without JS; the client twin also sets html[data-ab-layout-lock] for browsers without :has) */
+:global(html:has(.AbAppLayout[data-variant="panes"])),
+:global(html:has(.AbAppLayout[data-variant="panes"])) :global(body),
+:global(html[data-ab-layout-lock]),
+:global(html[data-ab-layout-lock]) :global(body) {
+  height: 100%; /* 📏 */
+  overflow: hidden; /* 🚫 the page itself never scrolls */
+  overscroll-behavior: none; /* 🚫 no iOS rubber band pulling the whole app */
+}
+
+.abAppLayout[data-variant="panes"] {
+  --ab-sidebar-width: 280px; /* 🗂️ expanded sidebar */
+  --ab-rail-width: 72px; /* 🧷 collapsed rail (icons only) */
+  --ab-aside-width: min(40vw, 360px); /* 📑 "On this page" */
+  --ab-rail-duration: 200ms; /* 🎞️ rail collapse (brief §4) */
+  display: grid; /* 🧱 rows: header · panes · footer */
+  grid-template-rows: auto minmax(0, 1fr) auto; /* 📏 empty header/footer rows are 0px */
+  grid-template-columns: minmax(0, 1fr); /* 🚫 no horizontal overflow */
+  width: 100%; /* ↔️ */
+  height: 100vh; /* 🕰️ fallback */
+  height: 100dvh; /* 📱 the dynamic viewport (mobile toolbars) */
+  min-height: 0; /* 🚫 */
+  overflow: hidden; /* 🔒 the app box never scrolls */
+  overscroll-behavior: contain; /* 🚫 scroll chaining */
+}
+
+/* 🔝🦶 app header / footer: plain grid rows in the flow, 0px + invisible when empty (G50) */
+.abAppLayout[data-variant="panes"] > .abAppLayout__headerWrapper,
+.abAppLayout[data-variant="panes"] > .abAppLayout__footerWrapper {
+  position: relative; /* 📌 in the flow (no overlay) */
+  inset: auto; /* 🧹 the legacy absolute overlay */
+  z-index: 25; /* ⬆️ above the panes, below the sheet (30) */
+  pointer-events: auto; /* 🖱️ the legacy wrapper disabled them */
+  min-width: 0; /* 🚫 overflow */
+  padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px); /* 📱 notch */
+}
+.abAppLayout[data-variant="panes"] > .abAppLayout__headerWrapper { grid-row: 1; padding-top: env(safe-area-inset-top, 0px); } /* 🔝 row 1 · 📱 */
+/* 📏 WebKit e2e (2026-10-20): pin the panes to the 1fr row. Auto-placement moved them into row 1 (auto) when
+   the header was absent or collapsed, and the panes measured 0px tall */
+.abAppLayout[data-variant="panes"] > .abAppLayout__contentWrapper { grid-row: 2; } /* 🧱 the minmax(0,1fr) row */
+.abAppLayout[data-variant="panes"] > .abAppLayout__footerWrapper { grid-row: 3; padding-bottom: env(safe-area-inset-bottom, 0px); } /* 📱 */
+/* 🫥 D37: not rendered when the prop is null; :empty / :has() collapse what still reaches the DOM */
+.abAppLayout[data-variant="panes"] > .abAppLayout__headerWrapper:empty,
+.abAppLayout[data-variant="panes"] > .abAppLayout__footerWrapper:empty,
+.abAppLayout[data-variant="panes"] > .abAppLayout__headerWrapper:not(:has(> *)),
+.abAppLayout[data-variant="panes"] > .abAppLayout__footerWrapper:not(:has(> *)) {
+  display: none; /* 📏 0px */
+}
+/* 📋 menus the app passes: no full-screen click shield */
+.abAppLayout[data-variant="panes"] > .abAppLayout__menus {
+  display: contents; /* 🫥 */
+}
+
+/* 🧱 the panes row: a bounded box (the positioning context for sheets and future drawers) */
+.abAppLayout[data-variant="panes"] .abAppLayout__contentWrapper {
+  position: relative; /* 📍 sheets / drawers are scoped to it */
+  flex-direction: column; /* 📱 stack */
+  height: 100%; /* 📏 the 1fr row */
+  min-height: 0; /* 🚫 lets the children shrink and scroll */
+  min-width: 0; /* 🚫 overflow */
+  overflow: hidden; /* 🔒 */
+  justify-content: flex-start; /* ⬆️ */
+}
+
+/* 📜 every pane: bounded, scrolls on its own, never chains to the page (G51 + G54) */
+.abAppLayout[data-variant="panes"] .abAppLayout__contentWrapper > :is([data-ab-part="sidebar"], [data-ab-part="rail"], [data-ab-part="main"], [data-ab-part="aside"]) {
+  min-height: 0; /* 🚫 */
+  max-height: none; /* 🧹 legacy 100vh caps */
+  box-sizing: border-box; /* 📦 */
+  overscroll-behavior: contain; /* 🚫 scroll chaining */
+}
+
+/* 📱 mobile: one column, no sidebar, bottom bar visible, aside only as a full-pane sheet */
+.abAppLayout[data-variant="panes"] .abAppLayout__contentWrapper > :is([data-ab-part="sidebar"], [data-ab-part="rail"]) {
+  display: none; /* 🙈 the bottom bar takes over */
+}
+.abAppLayout[data-variant="panes"] .abAppLayout__contentWrapper > [data-ab-part="main"] {
+  flex: 1 1 0; /* ↔️↕️ the rest of the box */
+  min-width: 0; /* 🚫 overflow */
+  height: auto; /* 📏 the flex item size */
+  overflow: hidden; /* 🔒 its content wrapper is the scroller */
+}
+.abAppLayout[data-variant="panes"] .abAppLayout__contentWrapper > [data-ab-part="aside"] {
+  position: absolute; /* 📄 sheet over main, INSIDE the app box */
+  inset: 0; /* 🧱 100% (TOC button) */
+  width: 100%;
+  height: auto; /* 📏 from inset */
+  z-index: 30; /* ⬆️ above main + header, below menus/dialogs (50) */
+  overflow: hidden; /* 🔒 its content wrapper scrolls */
+}
+.abAppLayout[data-variant="panes"] .abAppLayout__contentWrapper > [data-ab-part="aside"]:not([data-open-on-mobile="true"]) {
+  display: none; /* 🙈 closed by default on mobile */
+}
+/* 🌫️ sheet backdrop (rendered by AbAsideLayout): only while the sheet is open */
+.abAppLayout[data-variant="panes"] .abAppLayout__contentWrapper > [data-ab-part="aside-backdrop"] {
+  display: none; /* 🙈 */
+}
+.abAppLayout[data-variant="panes"] .abAppLayout__contentWrapper > [data-ab-part="bottomBar"] {
+  flex: none; /* 📏 its own height: a row at the bottom of the box (no sticky needed) */
+  padding-bottom: env(safe-area-inset-bottom, 0px); /* 📱 home indicator */
+}
+
+/* 📟 tablet: sidebar (or rail) + main; the aside overlays on the right over a backdrop; no bottom bar */
+@media (min-width: 768px) {
+  .abAppLayout[data-variant="panes"] .abAppLayout__contentWrapper {
+    flex-direction: row; /* ➡️ */
+    align-items: stretch; /* 📏 every pane is full height */
+  }
+  .abAppLayout[data-variant="panes"] .abAppLayout__contentWrapper > :is([data-ab-part="sidebar"], [data-ab-part="rail"]) {
+    display: flex; /* 👀 */
+    flex: none;
+    width: var(--ab-sidebar-width); /* 🗂️ */
+    max-width: none; /* 🧹 the component's own cap */
+    height: auto; /* 📏 stretched by the row */
+    overflow: hidden auto; /* 📜 D42: the sidebar is the third scroller */
+    scrollbar-gutter: stable; /* 📏 no jump when it starts scrolling */
+    transition: width var(--ab-rail-duration) ease; /* 🎞️ rail */
+  }
+  .abAppLayout[data-variant="panes"][data-rail="true"] .abAppLayout__contentWrapper > :is([data-ab-part="sidebar"], [data-ab-part="rail"]),
+  .abAppLayout[data-variant="panes"] .abAppLayout__contentWrapper > [data-ab-part="rail"] {
+    width: var(--ab-rail-width); /* 🧷 rail (layout flag or AbSidebar's own rail markup) */
+  }
+  .abAppLayout[data-variant="panes"] .abAppLayout__contentWrapper > [data-ab-part="bottomBar"] {
+    display: none; /* 🙈 sidebar replaces it */
+  }
+  .abAppLayout[data-variant="panes"] .abAppLayout__contentWrapper > [data-ab-part="aside"] {
+    inset: 0 0 0 auto; /* ➡️ pinned right, inside the panes box */
+    width: var(--ab-aside-width); /* 📑 ~30–40% */
+    border-left: var(--ab-divider-hairline, 1px solid rgb(0 0 0 / 0.12)); /* ➖ */
+    background: var(--ab-color-surface, Canvas); /* 🎨 opaque over the page */
+  }
+  /* 🌫️ tablet overlay backdrop (James review): dims the panes, click closes the sheet */
+  .abAppLayout[data-variant="panes"] .abAppLayout__contentWrapper > [data-ab-part="aside-backdrop"][data-open="true"] {
+    display: block; /* 👀 */
+    position: absolute; /* 📄 inside the panes box */
+    inset: 0; /* 🧱 */
+    z-index: 29; /* ⬇️ just under the sheet */
+    background: rgb(0 0 0 / 0.32); /* 🌫️ scrim */
+  }
+}
+
+/* 💻 laptop: three joined panes with hairline dividers, aside in the flow */
+@media (min-width: 1024px) {
+  .abAppLayout[data-variant="panes"] .abAppLayout__contentWrapper > :is([data-ab-part="sidebar"], [data-ab-part="rail"]) {
+    border-right: var(--ab-divider-hairline, 1px solid rgb(0 0 0 / 0.12)); /* ➖ joined */
+  }
+  .abAppLayout[data-variant="panes"] .abAppLayout__contentWrapper > [data-ab-part="aside"] {
+    position: relative; /* 📌 back in the flow, a full-height column */
+    inset: auto; /* 🧹 the tablet overlay */
+    height: auto; /* 📏 stretched by the row */
+    flex: none;
+    z-index: auto;
+    background: none; /* 🎨 */
+  }
+  .abAppLayout[data-variant="panes"] .abAppLayout__contentWrapper > [data-ab-part="aside"][data-opened="true"] {
+    display: flex; /* 👀 laptop+ follows data-opened (isAsideOpen), not the small-screen flag (same specificity as the :not() rule, later wins) */
+  }
+  .abAppLayout[data-variant="panes"] .abAppLayout__contentWrapper > [data-ab-part="aside"]:not([data-opened="true"]) {
+    display: none; /* 🙈 closed with the »/« toggle */
+  }
+  .abAppLayout[data-variant="panes"] .abAppLayout__contentWrapper > [data-ab-part="aside-backdrop"] {
+    display: none !important; /* 🙈 no sheet on laptop+ */
+  }
+}
+
+/* 🖥️ desktop: gapped panes with radii, no dividers */
+@media (min-width: 1440px) {
+  .abAppLayout[data-variant="panes"] .abAppLayout__contentWrapper {
+    gap: var(--ab-pane-gap, 12px); /* 🧱 */
+    padding: var(--ab-pane-gap, 12px); /* 🖼️ outer gap */
+    box-sizing: border-box;
+  }
+  .abAppLayout[data-variant="panes"] .abAppLayout__contentWrapper > :is([data-ab-part="sidebar"], [data-ab-part="rail"]),
+  .abAppLayout[data-variant="panes"] .abAppLayout__contentWrapper > [data-ab-part="main"],
+  .abAppLayout[data-variant="panes"] .abAppLayout__contentWrapper > [data-ab-part="aside"] {
+    border: 0; /* 🚫 dividers */
+    border-radius: var(--ab-pane-radius, 16px); /* 🔲 */
+    overflow: hidden; /* ✂️ radius */
+    margin: 0; /* 🧹 legacy 2xl margins */
+  }
+  .abAppLayout[data-variant="panes"] .abAppLayout__contentWrapper > :is([data-ab-part="sidebar"], [data-ab-part="rail"]) {
+    overflow: hidden auto; /* 📜 the sidebar still scrolls (radius kept) */
+  }
+}
+
+/* ♿ reduced motion: the rail snaps instead of animating */
+@media (prefers-reduced-motion: reduce) {
+  .abAppLayout[data-variant="panes"] .abAppLayout__contentWrapper > :is([data-ab-part="sidebar"], [data-ab-part="rail"]) {
+    transition: none;
+  }
+}
+
+/* 🚫 JS off: nothing can toggle the rail, so the sidebar stays expanded (gap-review, Joseph) */
+@media (scripting: none) {
+  .abAppLayout[data-variant="panes"][data-rail="true"] .abAppLayout__contentWrapper > :is([data-ab-part="sidebar"], [data-ab-part="rail"]) {
+    width: var(--ab-sidebar-width);
+  }
+}

package/server/ab-aside-layout/index.tsx

@@ -24,7 +24,7 @@
 * SOFTWARE.
 *
 * @project: ab-nextjs-core
-* @authors: Abraham Ukachi <abraham.ukachi@laplateforme.io>
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
 */
 
 /*
@@ -37,18 +37,33 @@ import type { ReactElement, ReactNode } from 'react';
 import clsx from 'clsx';
 import AbLinearProgress from '../../ab-linear-progress';
 import styles from './styles.module.css';
+// 🫥 G52: empty-slot helper (strings get a <span>, so the :has() collapse never hides text)
+import { toAbSlot } from '../../ab-page-provider/slot';
+// 📌 G55 (Joseph): client island that publishes this pane's scroller on useAbPage()
+import AbScrollRegistrar from '../../ab-page-provider/scroll-registrar';
 
 export interface AbAsideLayoutProps {
   orientation: 'vertical' | 'horizontal';
   className?: string;
   hidden?: boolean;
   pageName?: string;
+  /** 🔝 0.1.6 (G52): the aside pane's header slot (data-ab-part="aside-header"); 0px and not rendered when empty. */
+  asideHeader?: ReactNode;
+  /** 🔚 0.1.6 (G52): the aside pane's bottom bar slot (data-ab-part="aside-bar"); 0px and not rendered when empty. */
+  asideBar?: ReactNode;
+  /** @deprecated 0.1.6: use `asideHeader` (kept as an alias for one minor). */
   header?: ReactNode;
   content?: ReactNode;
+  /** @deprecated 0.1.6: use `asideBar` (kept as an alias for one minor). */
   footer?: ReactNode;
   children?: ReactNode;
   dividerHidden?: boolean;
   menus?: ReactNode;
+  /** 🆔 0.1.6: element id (e.g. the skip-link target), no inner wrapper needed. */
+  id?: string;
+  /** @deprecated 0.1.6: `false` drops the legacy backdrop / menus / dialogs / toasts / progress / canvas layers.
+   *  Empty header / bar slots are never rendered any more, so this only gates those layers (default `true`). */
+  chrome?: boolean;
 }
 
 /**
@@ -59,23 +74,33 @@ const AbAsideLayout = ({
   className,
   hidden,
   pageName,
-  header,
+  asideHeader,
+  asideBar,
+  header, // 🕰️ deprecated alias
   content,
-  footer,
+  footer, // 🕰️ deprecated alias
   children,
   dividerHidden,
   menus,
+  id, // 🆔
+  chrome = true, // 🧰
 }: AbAsideLayoutProps): ReactElement => {
+  // 🔝🔚 G52: the new slot names win, the 0.1.5 names still work
+  const top = toAbSlot(asideHeader ?? header);
+  const bar = toAbSlot(asideBar ?? footer);
   return (
     <aside
+      id={id ?? 'ab-aside'} // 🆔 0.1.6 (James review): same default as AbPageProvider's asideId, for aria-controls
       className={clsx(['AbAsideLayout', styles.abAsideLayout, className])}
       hidden={hidden}
       data-page-name={pageName}
       data-ab-part="aside"
     >
-      <header className={clsx(['HeaderWrapper', styles.abAsideLayout__headerWrapper])}>
-        {header}
-      </header>
+      {top != null && ( // 🫥 not rendered when empty (D37)
+        <header className={clsx(['HeaderWrapper', styles.abAsideLayout__headerWrapper])} data-ab-part="aside-header">
+          {top}
+        </header>
+      )}
 
       <div
         className={clsx([
@@ -83,34 +108,43 @@ const AbAsideLayout = ({
           styles.abAsideLayout__contentWrapper,
           orientation === 'horizontal' && '!flex-row',
         ])}
+        data-ab-part="aside-content" // 📜 G51/G55: THE scroller of this pane (useAbScrollSpy root)
       >
+        {/* 📜 sets asideScrollElement (server components can't hold refs) */}
+        <AbScrollRegistrar pane="aside" />
         {content ?? children}
       </div>
 
-      <footer className={clsx(['FooterWrapper', styles.abAsideLayout__footerWrapper])}>
-        {footer}
-      </footer>
-
-      <div className={clsx(['Backdrop', styles.abAsideLayout__backdrop])} hidden />
-      <div className={clsx(['Menus', styles.abAsideLayout__menus])} hidden>
-        {menus}
-      </div>
-      <div className={clsx(['Dialogs', styles.abAsideLayout__dialogs])} hidden />
-      <div className={clsx(['Toasts', styles.abAsideLayout__toasts])} hidden />
-
-      {!dividerHidden && (
-        <span className={clsx(['divider', 'vertical', 'left', styles.abAsideLayout__divider])} />
+      {bar != null && ( // 🫥 not rendered when empty (D37)
+        <footer className={clsx(['FooterWrapper', styles.abAsideLayout__footerWrapper])} data-ab-part="aside-bar">
+          {bar}
+        </footer>
       )}
 
-      <AbLinearProgress
-        className="absolute top-0 left-0 right-0 z-50 !h-0.5 lg:!h-1"
-        color="secondary"
-        hidden={true}
-        isIndeterminate={true}
-        progress={25}
-      />
-
-      <canvas className={clsx(['Canvas', styles.abAsideLayout__canvas])} />
+      {chrome && ( // 🧰 0.1.6: legacy layers
+        <>
+        <div className={clsx(['Backdrop', styles.abAsideLayout__backdrop])} hidden />
+        <div className={clsx(['Menus', styles.abAsideLayout__menus])} hidden>
+          {menus}
+        </div>
+        <div className={clsx(['Dialogs', styles.abAsideLayout__dialogs])} hidden />
+        <div className={clsx(['Toasts', styles.abAsideLayout__toasts])} hidden />
+  
+        {!dividerHidden && (
+          <span className={clsx(['divider', 'vertical', 'left', styles.abAsideLayout__divider])} />
+        )}
+  
+        <AbLinearProgress
+          className="absolute top-0 left-0 right-0 z-50 !h-0.5 lg:!h-1"
+          color="secondary"
+          hidden={true}
+          isIndeterminate={true}
+          progress={25}
+        />
+  
+        <canvas className={clsx(['Canvas', styles.abAsideLayout__canvas])} />
+        </>
+      )}
     </aside>
   );
 };

package/server/ab-aside-layout/styles.module.css

@@ -27,7 +27,7 @@
 * @name: AB Aside Layout (server) - Component Stylesheet (plain CSS, Tailwind-independent)
 * @file: server/ab-aside-layout/styles.module.css
 * @type: CSS Module
-* @authors: Abraham Ukachi <abraham.ukachi@laplateforme.io>
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
 */
 
 /*
@@ -153,3 +153,45 @@
   from { opacity: 0; }
   to { opacity: 1; }
 }
+
+/* ================================================================== */
+/* 📏 0.1.6 layout rule (G51 + G52 + G54): a bounded box whose CONTENT */
+/*    scrolls on its own; aside-header / aside-bar collapse when empty   */
+/* ================================================================== */
+/* 🫥 D37: an empty slot is 0px (also outside panes: an empty wrapper had no size anyway) */
+.abAsideLayout__headerWrapper:empty,
+.abAsideLayout__footerWrapper:empty,
+:global(.AbAppLayout[data-variant="panes"]) .abAsideLayout__headerWrapper:not(:has(> *)),
+:global(.AbAppLayout[data-variant="panes"]) .abAsideLayout__footerWrapper:not(:has(> *)) {
+  display: none; /* 📏 0px, and no footer gradient */
+}
+/* 🧭 inside AbAppLayout variant="panes": a full-height column, only the content wrapper scrolls */
+:global(.AbAppLayout[data-variant="panes"]) .abAsideLayout {
+  height: 100%; /* 📏 the pane */
+  min-height: 0; /* 🚫 */
+  max-height: none; /* 🧹 the legacy 100vh caps */
+  overflow: hidden; /* 🔒 */
+  display: flex; /* 🧱 header · content · bar */
+  flex-direction: column;
+  margin: 0; /* 🧹 legacy 2xl margins */
+}
+:global(.AbAppLayout[data-variant="panes"]) .abAsideLayout__headerWrapper,
+:global(.AbAppLayout[data-variant="panes"]) .abAsideLayout__footerWrapper {
+  flex: none; /* 📏 rows size to their content: no hard-coded heights */
+  pointer-events: auto; /* 🖱️ real chrome, not an overlay */
+}
+:global(.AbAppLayout[data-variant="panes"]) .abAsideLayout__footerWrapper {
+  padding-bottom: env(safe-area-inset-bottom, 0px); /* 📱 home indicator */
+}
+:global(.AbAppLayout[data-variant="panes"]) .abAsideLayout__footerWrapper::before {
+  content: none; /* 🧹 no gradient over the scroller */
+}
+:global(.AbAppLayout[data-variant="panes"]) .abAsideLayout__contentWrapper {
+  flex: 1 1 0; /* ↕️ the rest */
+  height: auto; /* 📏 */
+  min-height: 0; /* 🚫 lets it scroll */
+  overflow: hidden auto; /* 📜 THE scroller of this pane */
+  overscroll-behavior: contain; /* 🚫 never chains to the page (G54) */
+  scrollbar-gutter: stable; /* 📏 no layout jump */
+  justify-content: flex-start; /* ⬆️ */
+}