ab-nextjs-core 0.1.0 → 0.1.1

package/README.md

@@ -36,6 +36,18 @@
 
 
 
+## Tooling
+
+This package targets **Next.js 16.3.4** / **React 19** (eslint 9 flat config + vitest).
+Layout shells are **Done** (LYD-faithful slot API). Consumers must configure Tailwind so its content covers this package (CSS Modules use `@apply`).
+
+
+Layout stylesheets are **plain CSS modules** (no Tailwind `@apply`) so Next/Turbopack consumers never hit CssSyntaxError expanding package CSS. Theme colors use CSS variables (`--color-background`, `--color-dark-background`, falling back to `--surface`).
+
+Peer: `clsx`, `next@16.3.4`, `react@^19`, `react-dom@^19`.
+
+Optional: wrap client `AbAsideLayout` with `AbPageProvider` / `useAbPage` for aside open state.
+
 ## Getting Started
 
 ### Installation
@@ -61,10 +73,10 @@ A list of all the supported **core server components** and their current status:
 
 | No. | Name | File | Status |
 |:----|:-----|:-----|:-------|
-| 1 | *`AbAppLayout`* | **server/ab-app-layout/index.tsx** | Pending |
-| 2 | *`AbScreenLayout`* | **server/ab-screen-layout/index.tsx** | Pending |
-| 3 | *`AbMainLayout`* | **server/ab-main-layout/index.tsx** | Pending |
-| 4 | *`AbAsideLayout`* | **server/ab-aside-layout/index.tsx** | Pending |
+| 1 | *`AbAppLayout`* | **server/ab-app-layout/index.tsx** | Done |
+| 2 | *`AbScreenLayout`* | **server/ab-screen-layout/index.tsx** | Done |
+| 3 | *`AbMainLayout`* | **server/ab-main-layout/index.tsx** | Done |
+| 4 | *`AbAsideLayout`* | **server/ab-aside-layout/index.tsx** | Done |
 
 
 
@@ -74,10 +86,10 @@ A list of all the supported **core client components** and their current status:
 
 | No. | Name | File | Status |
 |:----|:-----|:-----|:-------|
-| 1 | *`AbAppLayout`* | **ab-app-layout/index.tsx** | Pending |
-| 2 | *`AbScreenLayout`* | **ab-screen-layout/index.tsx** | Pending |
-| 3 | *`AbMainLayout`* | **ab-main-layout/index.tsx** | Pending |
-| 4 | *`AbAsideLayout`* | **ab-aside-layout/index.tsx** | Pending |
+| 1 | *`AbAppLayout`* | **ab-app-layout/index.tsx** | Done |
+| 2 | *`AbScreenLayout`* | **ab-screen-layout/index.tsx** | Done |
+| 3 | *`AbMainLayout`* | **ab-main-layout/index.tsx** | Done |
+| 4 | *`AbAsideLayout`* | **ab-aside-layout/index.tsx** | Done |
 
 
 
@@ -87,6 +99,30 @@ A list of all the supported **core client components** and their current status:
 
 
 
+
+
+## Imports
+
+```ts
+// catalog
+import { supportedCore } from 'ab-nextjs-core'
+
+// server layouts
+import AbAppLayout from 'ab-nextjs-core/server/ab-app-layout'
+import AbScreenLayout from 'ab-nextjs-core/server/ab-screen-layout'
+import AbMainLayout from 'ab-nextjs-core/server/ab-main-layout'
+import AbAsideLayout from 'ab-nextjs-core/server/ab-aside-layout'
+
+// client layouts
+import AbAppLayout from 'ab-nextjs-core/ab-app-layout'
+import AbScreenLayout from 'ab-nextjs-core/ab-screen-layout'
+import AbMainLayout from 'ab-nextjs-core/ab-main-layout'
+import AbAsideLayout from 'ab-nextjs-core/ab-aside-layout'
+import { AbPageProvider, useAbPage } from 'ab-nextjs-core/ab-page-provider'
+```
+
+> NOTE: `AbAppLayout` does **not** bake in sidebar/navbar/i18n — pass `sideBar` / `navBar` slots from the consumer. Content rule: `content ?? children`.
+
 ## Learn More abElements
 
 To learn more about **`abElements`**, take a look at the following resources:

package/ab-app-layout/index.tsx

@@ -0,0 +1,107 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-core
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the 'Software'), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+* copies of the Software, and to permit persons to whom the Software is
+* furnished to do so, subject to the following conditions: 
+*  
+* The above copyright notice and this permission notice shall be included in all 
+* copies or substantial portions of the Software. 
+*
+* THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
+* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+* SOFTWARE.
+*
+* @project: ab-nextjs-core
+* @authors: Abraham Ukachi <abraham.ukachi@laplateforme.io>
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+'use client';
+
+import type { ReactElement, ReactNode } from 'react';
+import clsx from 'clsx';
+import AbLinearProgress from '../ab-linear-progress';
+import styles from './styles.module.css';
+
+export interface AbAppLayoutProps {
+  orientation: 'vertical' | 'horizontal';
+  className?: string;
+  hidden?: boolean;
+  pageName?: string;
+  header?: ReactNode;
+  sideBar?: ReactNode;
+  content?: ReactNode;
+  navBar?: ReactNode;
+  footer?: ReactNode;
+  children?: ReactNode;
+  menus?: ReactNode;
+}
+
+/** Client markup mirror of server AbAppLayout (slots only). */
+const AbAppLayout = ({
+  orientation,
+  className,
+  hidden,
+  pageName,
+  header,
+  sideBar,
+  content,
+  navBar,
+  footer,
+  children,
+  menus,
+}: AbAppLayoutProps): ReactElement => {
+  return (
+    <div
+      className={clsx(['AbAppLayout', styles.abAppLayout, className])}
+      hidden={hidden}
+      data-page-name={pageName}
+      data-orientation={orientation ?? ''}
+    >
+      <div className={clsx(['HeaderWrapper', styles.abAppLayout__headerWrapper])}>
+        {header}
+      </div>
+      <div className={clsx(['ContentWrapper', styles.abAppLayout__contentWrapper])}>
+        {sideBar}
+        {content ?? children}
+        {navBar}
+      </div>
+      <div className={clsx(['FooterWrapper', styles.abAppLayout__footerWrapper])}>
+        {footer}
+      </div>
+      <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])} />
+    </div>
+  );
+};
+
+export default AbAppLayout;

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

@@ -0,0 +1,145 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-core
+* ~~~~~~~~~~~~
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the 'Software'), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+* copies of the Software, and to permit persons to whom the Software is
+* furnished to do so, subject to the following conditions:
+*
+* The above copyright notice and this permission notice shall be included in all
+* copies or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+* SOFTWARE.
+*
+* @project: ab-nextjs-core
+* @name: AB App Layout - Component Stylesheet (plain CSS, Tailwind-independent)
+* @file: ab-app-layout/styles.module.css
+* @type: CSS Module
+* @authors: Abraham Ukachi <abraham.ukachi@laplateforme.io>
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+
+/* ===== AB APP LAYOUT STYLES ===== */
+
+.abAppLayout {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.abAppLayout__headerWrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: auto;
+  z-index: 20;
+  pointer-events: none;
+}
+
+.abAppLayout__contentWrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  justify-content: space-between;
+  z-index: 10;
+}
+
+@media (min-width: 768px) {
+  .abAppLayout__contentWrapper { flex-direction: row; }
+}
+
+@media (min-width: 1536px) {
+  .abAppLayout__contentWrapper > *:nth-child(1) {
+    border-top-right-radius: 1.5rem;
+    border-bottom-right-radius: 1.5rem;
+    overflow: hidden;
+    margin-top: auto;
+    margin-bottom: auto;
+    margin-left: 0;
+    margin-right: 0;
+    max-height: calc(100vh - 3rem);
+  }
+
+  .abAppLayout__contentWrapper > *:nth-child(2) {
+    margin: 1.5rem;
+    border-radius: 1.5rem;
+    max-height: calc(100vh - 3rem);
+  }
+}
+
+.abAppLayout__footerWrapper {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: auto;
+  z-index: 20;
+  pointer-events: none;
+}
+
+.abAppLayout__backdrop {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 40;
+  backdrop-filter: blur(4px);
+}
+
+.abAppLayout__menus,
+.abAppLayout__dialogs,
+.abAppLayout__toasts {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 50;
+}
+
+.abAppLayout__toasts { animation: abCoreFadeIn 300ms ease-in-out; }
+
+.abAppLayout__canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 50;
+}
+
+@keyframes abCoreFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}

package/ab-aside-layout/index.tsx

@@ -0,0 +1,188 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-core
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the 'Software'), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+* copies of the Software, and to permit persons to whom the Software is
+* furnished to do so, subject to the following conditions: 
+*  
+* The above copyright notice and this permission notice shall be included in all 
+* copies or substantial portions of the Software. 
+*
+* THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
+* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+* SOFTWARE.
+*
+* @project: ab-nextjs-core
+* @authors: Abraham Ukachi <abraham.ukachi@laplateforme.io>
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+'use client';
+
+import type { ReactElement, ReactNode } from 'react';
+import { useEffect, useRef } from 'react';
+import clsx from 'clsx';
+import { useAbPage } from '../ab-page-provider';
+import AbLinearProgress from '../ab-linear-progress';
+import styles from './styles.module.css';
+
+export interface AbAsideLayoutProps {
+  orientation: 'vertical' | 'horizontal';
+  className?: string;
+  hidden?: boolean;
+  pageName?: string;
+  header?: ReactNode;
+  content?: ReactNode;
+  footer?: ReactNode;
+  children?: ReactNode;
+  dividerHidden?: boolean;
+  menus?: ReactNode;
+}
+
+/**
+ * Ab Aside Layout — Core Client Component (from LYD client LydAsideLayout).
+ * Uses minimal useAbPage contract (AbPageProvider), not LydPageProvider.
+ */
+const AbAsideLayout = ({
+  orientation,
+  className,
+  hidden,
+  pageName,
+  header,
+  content,
+  footer,
+  children,
+  dividerHidden,
+  menus,
+}: AbAsideLayoutProps): ReactElement => {
+  const {
+    isAsideOpen,
+    isAsideOpenOnMobile,
+    asideDuration,
+    asideElement,
+    setAsideElement,
+    isAsideOpening,
+    isAsideClosing,
+    isAsideLoading,
+  } = useAbPage();
+
+  const asideRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    const el = asideRef.current;
+    if (el) setAsideElement(el);
+    return () => setAsideElement(null);
+  }, [setAsideElement]);
+
+  useEffect(() => {
+    const updateAsideParentElement = (
+      parentEl: HTMLElement,
+      open: boolean,
+      openOnMobile: boolean,
+      opening: boolean,
+      closing: boolean,
+    ) => {
+      const parentElWidth = parentEl.clientWidth;
+      parentEl.style.setProperty('--current-aside-width', `${parentElWidth}px`);
+      parentEl.classList.toggle('is-aside-open', open);
+      parentEl.classList.toggle('is-aside-open-on-mobile', openOnMobile);
+      parentEl.classList.toggle('is-aside-opening', opening);
+      parentEl.classList.toggle('is-aside-closing', closing);
+      parentEl.style.setProperty('--aside-duration', `${asideDuration}ms`);
+    };
+
+    const parentEl = asideElement?.parentElement as HTMLElement | null | undefined;
+    const width =
+      typeof window !== 'undefined' ? window.innerWidth : 0;
+
+    if (parentEl && width > 0) {
+      updateAsideParentElement(
+        parentEl,
+        isAsideOpen,
+        isAsideOpenOnMobile,
+        isAsideOpening,
+        isAsideClosing,
+      );
+    }
+  }, [
+    isAsideOpen,
+    isAsideOpenOnMobile,
+    isAsideOpening,
+    isAsideClosing,
+    asideElement,
+    asideDuration,
+  ]);
+
+  return (
+    <aside
+      ref={asideRef}
+      className={clsx(
+        ['AbAsideLayout', 'group/aside-layout', styles.abAsideLayout, className],
+        { 'is-open max-lg:!animate-slide-from-right': isAsideOpen },
+        { 'is-open-on-mobile': isAsideOpenOnMobile },
+        { '!hidden': !isAsideOpen && !isAsideOpening && !isAsideClosing },
+      )}
+      hidden={hidden}
+      data-page-name={pageName}
+      data-opened={isAsideOpen}
+      data-open-on-mobile={isAsideOpenOnMobile}
+    >
+      <div className={clsx(['HeaderWrapper', styles.abAsideLayout__headerWrapper])}>
+        {header}
+      </div>
+
+      <div
+        className={clsx([
+          'ContentWrapper',
+          styles.abAsideLayout__contentWrapper,
+          orientation === 'horizontal' && '!flex-row',
+        ])}
+      >
+        {content ?? children}
+      </div>
+
+      <div className={clsx(['FooterWrapper', styles.abAsideLayout__footerWrapper])}>
+        {footer}
+      </div>
+
+      <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={!isAsideLoading}
+        isIndeterminate={true}
+        progress={25}
+      />
+
+      <canvas className={clsx(['Canvas', styles.abAsideLayout__canvas])} />
+    </aside>
+  );
+};
+
+export default AbAsideLayout;

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

@@ -0,0 +1,160 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-core
+* ~~~~~~~~~~~~
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the 'Software'), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+* copies of the Software, and to permit persons to whom the Software is
+* furnished to do so, subject to the following conditions:
+*
+* The above copyright notice and this permission notice shall be included in all
+* copies or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+* SOFTWARE.
+*
+* @project: ab-nextjs-core
+* @name: AB Aside Layout (client) - Component Stylesheet (plain CSS, Tailwind-independent)
+* @file: ab-aside-layout/styles.module.css
+* @type: CSS Module
+* @authors: Abraham Ukachi <abraham.ukachi@laplateforme.io>
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+
+/* ===== AB ASIDE LAYOUT STYLES ===== */
+
+.abAsideLayout {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  overflow: hidden;
+  transition-property: all;
+  transition-duration: 300ms;
+  transition-timing-function: ease-in-out;
+  background-color: var(--color-background, var(--surface, #ffffff));
+}
+
+@media (min-width: 1536px) {
+  .abAsideLayout {
+    margin-left: 0.75rem;
+    border-radius: 1.5rem;
+  }
+}
+
+:global(.dark) .abAsideLayout,
+:global([data-theme="dark"]) .abAsideLayout {
+  background-color: var(--color-dark-background, var(--surface, #0a0a0a));
+}
+
+@media (max-width: 767px) {
+  .abAsideLayout__divider { visibility: hidden; }
+}
+
+@media (min-width: 1536px) {
+  .abAsideLayout__divider { visibility: hidden; }
+}
+
+.abAsideLayout__headerWrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: auto;
+  z-index: 20;
+  pointer-events: none;
+}
+
+.abAsideLayout__contentWrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: auto;
+  flex-grow: 1;
+  justify-content: space-between;
+  z-index: 10;
+  overflow: auto;
+  overflow-x: hidden;
+  pointer-events: auto;
+}
+
+.abAsideLayout__footerWrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: auto;
+  z-index: 20;
+  pointer-events: none;
+}
+
+.abAsideLayout__footerWrapper::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  transform: translateY(-100%);
+  background-image: linear-gradient(to bottom, transparent, var(--color-background, var(--surface, #ffffff)));
+}
+
+:global(.dark) .abAsideLayout__footerWrapper::before,
+:global([data-theme="dark"]) .abAsideLayout__footerWrapper::before {
+  background-image: linear-gradient(to bottom, transparent, var(--color-dark-background, var(--surface, #0a0a0a)));
+}
+
+.abAsideLayout__backdrop {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 40;
+  backdrop-filter: blur(4px);
+}
+
+.abAsideLayout__menus,
+.abAsideLayout__dialogs,
+.abAsideLayout__toasts {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 50;
+}
+
+.abAsideLayout__toasts {
+  animation: abCoreFadeIn 300ms ease-in-out;
+}
+
+.abAsideLayout__canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 50;
+}
+
+@keyframes abCoreFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}