ab-nextjs-core 0.1.4 → 0.1.6

package/server/ab-main-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,6 +37,10 @@ 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 AbMainLayoutProps {
   orientation: 'vertical' | 'horizontal';
@@ -44,11 +48,22 @@ export interface AbMainLayoutProps {
   hidden?: boolean;
   pageName?: string;
   screenName?: string;
+  /** 🔝 0.1.6 (G52): the main pane's header slot (data-ab-part="main-header"); 0px and not rendered when empty. */
+  mainHeader?: ReactNode;
+  /** 🔚 0.1.6 (G52): the main pane's bottom bar slot (data-ab-part="main-bar"); 0px and not rendered when empty. */
+  mainBar?: ReactNode;
+  /** @deprecated 0.1.6: use `mainHeader` (kept as an alias for one minor). */
   header?: ReactNode;
   content?: ReactNode;
+  /** @deprecated 0.1.6: use `mainBar` (kept as an alias for one minor). */
   footer?: ReactNode;
   children?: ReactNode;
   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;
 }
 
 /**
@@ -60,14 +75,22 @@ const AbMainLayout = ({
   hidden,
   pageName,
   screenName,
-  header,
+  mainHeader,
+  mainBar,
+  header, // 🕰️ deprecated alias
   content,
-  footer,
+  footer, // 🕰️ deprecated alias
   children,
   menus,
+  id, // 🆔
+  chrome = true, // 🧰
 }: AbMainLayoutProps): ReactElement => {
+  // 🔝🔚 G52: the new slot names win, the 0.1.5 names still work
+  const top = toAbSlot(mainHeader ?? header);
+  const bar = toAbSlot(mainBar ?? footer);
   return (
     <main
+      id={id} // 🆔 0.1.6
       className={clsx(
         ['AbMainLayout', 'group-mainLayout', styles.abMainLayout, className],
         { 'has-screen-name': !!screenName },
@@ -78,9 +101,11 @@ const AbMainLayout = ({
       data-ab-part="main"
       data-screen-name={screenName}
     >
-      <header className={clsx(['HeaderWrapper', styles.abMainLayout__headerWrapper])}>
-        {header}
-      </header>
+      {top != null && ( // 🫥 not rendered when empty (D37)
+        <header className={clsx(['HeaderWrapper', styles.abMainLayout__headerWrapper])} data-ab-part="main-header">
+          {top}
+        </header>
+      )}
 
       <div
         className={clsx([
@@ -88,31 +113,40 @@ const AbMainLayout = ({
           styles.abMainLayout__contentWrapper,
           orientation === 'horizontal' && 'md:!flex-row',
         ])}
+        data-ab-part="main-content" // 📜 G51/G55: THE scroller of this pane (useAbScrollSpy root)
         data-orientation={orientation ? orientation.toString() : undefined}
       >
+        {/* 📜 sets mainScrollElement (server components can't hold refs) */}
+        <AbScrollRegistrar pane="main" />
         {content ?? children}
       </div>
 
-      <footer className={clsx(['FooterWrapper', styles.abMainLayout__footerWrapper])}>
-        {footer}
-      </footer>
-
-      <div className={clsx(['Backdrop', styles.abMainLayout__backdrop])} hidden />
-      <div className={clsx(['Menus', styles.abMainLayout__menus])} hidden>
-        {menus}
-      </div>
-      <div className={clsx(['Dialogs', styles.abMainLayout__dialogs])} hidden />
-      <div className={clsx(['Toasts', styles.abMainLayout__toasts])} hidden />
-
-      <AbLinearProgress
-        className="absolute top-0 left-0 right-0 z-50 !w-1/2 place-self-center !my-1 3xl:!my-2 !mx-auto !h-0.5 lg:!h-1 3xl:!h-1.5"
-        color="secondary"
-        hidden={true}
-        isIndeterminate={true}
-        progress={25}
-      />
+      {bar != null && ( // 🫥 not rendered when empty (D37)
+        <footer className={clsx(['FooterWrapper', styles.abMainLayout__footerWrapper])} data-ab-part="main-bar">
+          {bar}
+        </footer>
+      )}
 
-      <canvas className={clsx(['Canvas', styles.abMainLayout__canvas])} />
+      {chrome && ( // 🧰 0.1.6: legacy layers
+        <>
+        <div className={clsx(['Backdrop', styles.abMainLayout__backdrop])} hidden />
+        <div className={clsx(['Menus', styles.abMainLayout__menus])} hidden>
+          {menus}
+        </div>
+        <div className={clsx(['Dialogs', styles.abMainLayout__dialogs])} hidden />
+        <div className={clsx(['Toasts', styles.abMainLayout__toasts])} hidden />
+  
+        <AbLinearProgress
+          className="absolute top-0 left-0 right-0 z-50 !w-1/2 place-self-center !my-1 3xl:!my-2 !mx-auto !h-0.5 lg:!h-1 3xl:!h-1.5"
+          color="secondary"
+          hidden={true}
+          isIndeterminate={true}
+          progress={25}
+        />
+  
+        <canvas className={clsx(['Canvas', styles.abMainLayout__canvas])} />
+        </>
+      )}
     </main>
   );
 };

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

@@ -27,7 +27,7 @@
 * @name: AB Main Layout - Component Stylesheet (plain CSS, Tailwind-independent)
 * @file: server/ab-main-layout/styles.module.css
 * @type: CSS Module
-* @authors: Abraham Ukachi <abraham.ukachi@laplateforme.io>
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
 */
 
 /*
@@ -165,3 +165,45 @@
   from { opacity: 0; }
   to { opacity: 1; }
 }
+
+/* ================================================================== */
+/* 📏 0.1.6 layout rule (G51 + G52 + G54): a bounded box whose CONTENT */
+/*    scrolls on its own; main-header / main-bar collapse when empty   */
+/* ================================================================== */
+/* 🫥 D37: an empty slot is 0px (also outside panes: an empty wrapper had no size anyway) */
+.abMainLayout__headerWrapper:empty,
+.abMainLayout__footerWrapper:empty,
+:global(.AbAppLayout[data-variant="panes"]) .abMainLayout__headerWrapper:not(:has(> *)),
+:global(.AbAppLayout[data-variant="panes"]) .abMainLayout__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"]) .abMainLayout {
+  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"]) .abMainLayout__headerWrapper,
+:global(.AbAppLayout[data-variant="panes"]) .abMainLayout__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"]) .abMainLayout__footerWrapper {
+  padding-bottom: env(safe-area-inset-bottom, 0px); /* 📱 home indicator */
+}
+:global(.AbAppLayout[data-variant="panes"]) .abMainLayout__footerWrapper::before {
+  content: none; /* 🧹 no gradient over the scroller */
+}
+:global(.AbAppLayout[data-variant="panes"]) .abMainLayout__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; /* ⬆️ */
+}

package/server/ab-screen-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>
 */
 
 /*
@@ -72,7 +72,7 @@ const AbScreenLayout = ({
       data-screen-name={screenName}
       data-orientation={orientation ?? ''}
     >
-      <header className={clsx(['HeaderWrapper', styles.abScreenLayout__headerWrapper])}>
+      <header className={clsx(['HeaderWrapper', styles.abScreenLayout__headerWrapper])} data-ab-part="header">
         {header}
       </header>
 
@@ -80,7 +80,7 @@ const AbScreenLayout = ({
         {content ?? children}
       </div>
 
-      <footer className={clsx(['FooterWrapper', styles.abScreenLayout__footerWrapper])}>
+      <footer className={clsx(['FooterWrapper', styles.abScreenLayout__footerWrapper])} data-ab-part="footer">
         {footer}
       </footer>
 

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

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