ab-nextjs-core 0.1.0 → 0.1.1

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

@@ -0,0 +1,155 @@
+/* 
+* @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 (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>
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+
+/* ===== AB ASIDE LAYOUT STYLES ===== */
+
+.abAsideLayout {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  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;
+}
+
+.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; }
+}

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

@@ -0,0 +1,119 @@
+/* 
+* @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 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+import type { ReactElement, ReactNode } from 'react';
+import clsx from 'clsx';
+import AbLinearProgress from '../../ab-linear-progress';
+import styles from './styles.module.css';
+
+export interface AbMainLayoutProps {
+  orientation: 'vertical' | 'horizontal';
+  className?: string;
+  hidden?: boolean;
+  pageName?: string;
+  screenName?: string;
+  header?: ReactNode;
+  content?: ReactNode;
+  footer?: ReactNode;
+  children?: ReactNode;
+  menus?: ReactNode;
+}
+
+/**
+ * Ab Main Layout — Core Server Component (from LYD LydMainLayout).
+ */
+const AbMainLayout = ({
+  orientation,
+  className,
+  hidden,
+  pageName,
+  screenName,
+  header,
+  content,
+  footer,
+  children,
+  menus,
+}: AbMainLayoutProps): ReactElement => {
+  return (
+    <main
+      className={clsx(
+        ['AbMainLayout', 'group-mainLayout', styles.abMainLayout, className],
+        { 'has-screen-name': !!screenName },
+      )}
+      style={{ maxHeight: screenName ? 'initial' : undefined }}
+      hidden={hidden}
+      data-page-name={pageName}
+      data-screen-name={screenName}
+    >
+      <div className={clsx(['HeaderWrapper', styles.abMainLayout__headerWrapper])}>
+        {header}
+      </div>
+
+      <div
+        className={clsx([
+          'ContentWrapper',
+          styles.abMainLayout__contentWrapper,
+          orientation === 'horizontal' && 'md:!flex-row',
+        ])}
+        data-orientation={orientation ? orientation.toString() : undefined}
+      >
+        {content ?? children}
+      </div>
+
+      <div className={clsx(['FooterWrapper', styles.abMainLayout__footerWrapper])}>
+        {footer}
+      </div>
+
+      <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>
+  );
+};
+
+export default AbMainLayout;

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

@@ -0,0 +1,167 @@
+/* 
+* @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 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>
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+
+/* ===== AB MAIN LAYOUT STYLES ===== */
+
+.abMainLayout {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  z-index: 20;
+  background-color: var(--color-background, var(--surface, #ffffff));
+}
+
+@media (max-width: 639px) {
+  .abMainLayout { max-height: calc(100vh - 60px); }
+}
+
+@media (max-width: 767px) {
+  .abMainLayout { max-height: calc(100vh - 64px); }
+}
+
+@media (min-width: 1536px) {
+  .abMainLayout { border-radius: 1.5rem; }
+}
+
+:global(.dark) .abMainLayout,
+:global([data-theme="dark"]) .abMainLayout {
+  background-color: var(--color-dark-background, var(--surface, #0a0a0a));
+}
+
+.abMainLayout__headerWrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: auto;
+  z-index: 20;
+  pointer-events: none;
+}
+
+.abMainLayout__contentWrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: fit-content;
+  flex-grow: 1;
+  flex: 1 1 0%;
+  justify-content: space-between;
+  z-index: 10;
+  overflow: auto;
+  overflow-x: hidden;
+}
+
+.abMainLayout__footerWrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: auto;
+  z-index: 20;
+  pointer-events: none;
+}
+
+.abMainLayout__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) .abMainLayout__footerWrapper::before,
+:global([data-theme="dark"]) .abMainLayout__footerWrapper::before {
+  background-image: linear-gradient(to bottom, transparent, var(--color-dark-background, var(--surface, #0a0a0a)));
+}
+
+.abMainLayout__backdrop {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 40;
+  backdrop-filter: blur(12px);
+  background-color: rgb(0 0 0 / 0.1);
+}
+
+:global(.dark) .abMainLayout__backdrop,
+:global([data-theme="dark"]) .abMainLayout__backdrop {
+  background-color: rgb(0 0 0 / 0.5);
+}
+
+.abMainLayout__menus {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 50;
+  padding-bottom: 0;
+}
+
+.abMainLayout__dialogs,
+.abMainLayout__toasts {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 50;
+}
+
+.abMainLayout__toasts { animation: abCoreFadeIn 300ms ease-in-out; }
+
+.abMainLayout__canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 50;
+}
+
+@keyframes abCoreFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}

package/server/ab-screen-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 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+import type { ReactElement, ReactNode } from 'react';
+import clsx from 'clsx';
+import AbLinearProgress from '../../ab-linear-progress';
+import styles from './styles.module.css';
+
+export interface AbScreenLayoutProps {
+  orientation: 'vertical' | 'horizontal';
+  className?: string;
+  hidden?: boolean;
+  screenName?: string;
+  header?: ReactNode;
+  content?: ReactNode;
+  footer?: ReactNode;
+  children?: ReactNode;
+  menus?: ReactNode;
+}
+
+/**
+ * Ab Screen Layout — Core Server Component (from LYD LydScreenLayout).
+ * No NetworkProvider / LydName — portals keep #backdrop/menus/dialogs/toasts ids.
+ */
+const AbScreenLayout = ({
+  orientation,
+  className,
+  hidden,
+  screenName,
+  header,
+  content,
+  footer,
+  children,
+  menus,
+}: AbScreenLayoutProps): ReactElement => {
+  return (
+    <div
+      className={clsx(['AbScreenLayout', styles.abScreenLayout, className])}
+      hidden={hidden}
+      data-screen-name={screenName}
+      data-orientation={orientation ?? ''}
+    >
+      <div className={clsx(['HeaderWrapper', styles.abScreenLayout__headerWrapper])}>
+        {header}
+      </div>
+
+      <div className={clsx(['ContentWrapper', styles.abScreenLayout__contentWrapper])}>
+        {content ?? children}
+      </div>
+
+      <div className={clsx(['FooterWrapper', styles.abScreenLayout__footerWrapper])}>
+        {footer}
+      </div>
+
+      <div id="backdrop" className={clsx(['Backdrop', styles.abScreenLayout__backdrop])} hidden />
+      <div id="menus" className={clsx(['Menus', styles.abScreenLayout__menus])} hidden>
+        {menus}
+      </div>
+      <div id="dialogs" className={clsx(['Dialogs', styles.abScreenLayout__dialogs])} hidden />
+      <div id="toasts" className={clsx(['Toasts', styles.abScreenLayout__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.abScreenLayout__canvas])} />
+    </div>
+  );
+};
+
+export default AbScreenLayout;

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

@@ -0,0 +1,134 @@
+/* 
+* @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 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>
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+
+/* ===== AB SCREEN LAYOUT STYLES ===== */
+
+.abScreenLayout {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.abScreenLayout__headerWrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: auto;
+  z-index: 20;
+  pointer-events: none;
+}
+
+.abScreenLayout__contentWrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  justify-content: space-between;
+  z-index: 10;
+}
+
+@media (min-width: 768px) {
+  .abScreenLayout__contentWrapper { flex-direction: row; }
+}
+
+@media (min-width: 1536px) {
+  .abScreenLayout__contentWrapper > *:nth-child(1) {
+    margin: 1.5rem;
+    border-radius: 1.5rem;
+    max-height: calc(100vh - 3rem);
+  }
+}
+
+.abScreenLayout__footerWrapper {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: auto;
+  z-index: 20;
+  pointer-events: none;
+}
+
+.abScreenLayout__backdrop {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 40;
+  backdrop-filter: blur(4px);
+}
+
+.abScreenLayout__menus,
+.abScreenLayout__dialogs,
+.abScreenLayout__toasts {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 50;
+}
+
+.abScreenLayout__toasts { animation: abCoreFadeIn 300ms ease-in-out; }
+
+.abScreenLayout__canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 50;
+}
+
+@keyframes abCoreFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}

package/types/css.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}

package/types/index.d.ts

@@ -0,0 +1,14 @@
+export type CoreCatalogEntry = {
+  name: string;
+  file: string;
+  kind: 'server' | 'client';
+  status: string;
+};
+
+export declare const supportedCore: Array<CoreCatalogEntry>;
+
+declare const abCore: {
+  supportedCore: Array<CoreCatalogEntry>;
+};
+
+export default abCore;