@react-fabric/core 1.0.0-beta.0

package/src/core/boundary/ErrorBoundary.module.css

@@ -0,0 +1,65 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * 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.
+ */
+
+@layer comp {
+  .errorBoundary {
+    grid-area: inherit;
+    align-self: flex-start;
+
+    max-height: calc(100% - 2rem);
+    margin: 1rem;
+
+    background-color: theme(colors.danger.500);
+    background-image: repeating-linear-gradient(
+      135deg,
+      rgba(255 255 255 / 50%) 0 4px,
+      rgba(255 255 255 / 20%) 4px 8px
+    );
+
+    & .boundaryContent {
+      grid-template: "icon message" auto "detail detail" auto / auto 1fr;
+      background-color: var(--fabric-bg);
+    }
+
+    & .boundaryIcon {
+      grid-area: icon;
+    }
+
+    & .boundaryMessage {
+      grid-area: message;
+    }
+
+    & .boundaryDetail {
+      grid-area: detail;
+      grid-template-rows: auto 1fr;
+
+      & .boundaryLink {
+        /* might add styles later */
+      }
+    }
+
+    & .boundaryStack {
+      /* might add styles later */
+    }
+  }
+}

package/src/core/boundary/ErrorBoundary.tsx

@@ -0,0 +1,146 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * 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.
+ */
+
+import { useLogger } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { Component } from "react";
+import { useTranslation } from "react-i18next";
+import { Fragment } from "react/jsx-runtime";
+import { useMemoDebugger } from "../../hooks/useEffectDebugger";
+import { usePropToggle } from "../../hooks/usePropToggle";
+import { type ChildrenProp } from "../../types";
+import classes from "./ErrorBoundary.module.css";
+import { ErrorIcon } from "./ErrorIcon";
+import { useGlobals } from "../../context/Global";
+
+const DefaultError = ({ error }: { error?: string }) => {
+  const { t } = useTranslation("core");
+  return (
+    <Fragment>
+      <h6>{t("error.title")}</h6>
+      <p className="line-clamp-4">{error}</p>
+    </Fragment>
+  );
+};
+
+const ErrorMessage = ({ error, errorElement }: KeyValue) => {
+  const { errorElement: globalError } = useGlobals();
+  const EE = useMemoDebugger(
+    () => errorElement ?? globalError ?? DefaultError,
+    [],
+    "ErrorBoundary element",
+  );
+  return (
+    <Fragment>
+      <ErrorIcon />
+      <div className={classNames(classes.boundaryMessage, "p-2")}>
+        <EE error={error} />
+      </div>
+    </Fragment>
+  );
+};
+
+const ErrorStack = ({ error, stack }: KeyValue) => {
+  const [show, toggleShow] = usePropToggle(false);
+  useLogger().error(error, {}, stack);
+  return (
+    <div className={classNames(classes.boundaryDetail, "overflow-hidden grid")}>
+      <div
+        className={classNames(
+          classes.boundaryLink,
+          "px-2 py-1 text-xs text-end",
+        )}
+      >
+        <span role="link" tabIndex={0} className="link" onClick={toggleShow}>
+          {show ? "Hide Detail" : "Show Detail"}
+        </span>
+      </div>
+      {show && (
+        <div
+          className={classNames(
+            classes.boundaryStack,
+            "overflow-auto p-2 text-xs border-t",
+          )}
+        >
+          <pre className="whitespace-pre-wrap">{stack}</pre>
+        </div>
+      )}
+    </div>
+  );
+};
+
+/**
+ * An error boundary wrapper higher-order component designed to provide consistent error display across the application will trap runtime errors
+ */
+export class ErrorBoundary extends Component<
+  {
+    /**
+     * custom error display
+     */
+    errorElement?: React.ComponentType<{ error?: string }>;
+  } & ChildrenProp,
+  { hasError: boolean; error?: string; stack?: AnyObject }
+> {
+  public static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error: error.message, stack: error.stack };
+  }
+
+  constructor(props: AnyObject) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  public componentDidCatch(error: Error) {
+    this.setState({ hasError: true, error: error.message, stack: error.stack });
+  }
+
+  render() {
+    const env = process.env.NODE_ENV;
+    if (this.state.hasError) {
+      const { errorElement: E } = this.props;
+      // You can render any custom fallback UI
+      return (
+        <div
+          className={classNames(
+            classes.errorBoundary,
+            "grid grid-rows-1 overflow-hidden p-0.5 rounded-capped",
+          )}
+        >
+          <div
+            className={classNames(
+              classes.boundaryContent,
+              "overflow-hidden grid rounded-capped",
+            )}
+          >
+            <ErrorMessage error={this.state.error} errorElement={E} />
+            {env === "development" && (
+              <ErrorStack error={this.state.error} stack={this.state.stack} />
+            )}
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/core/boundary/ErrorIcon.tsx

@@ -0,0 +1,50 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * 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.
+ */
+
+import classNames from "classnames";
+import classes from "./ErrorBoundary.module.css";
+
+export const ErrorIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 64 64"
+    className={classNames(classes.boundaryIcon, "size-6 m-2")}
+  >
+    <path
+      fill="#808080"
+      d="M64 32c0 17.673-14.327 32-32 32s-32-14.327-32-32 14.327-32 32-32 32 14.327 32 32z"
+    />
+    <path
+      fill="#fff"
+      d="M63.5 32c0 17.397-14.103 31.5-31.5 31.5s-31.5-14.103-31.5-31.5 14.103-31.5 31.5-31.5 31.5 14.103 31.5 31.5z"
+    />
+    <path
+      fill="#f44336"
+      d="M60 32c0 15.464-12.536 28-28 28s-28-12.536-28-28c0-15.464 12.536-28 28-28s28 12.536 28 28z"
+    />
+    <path
+      fill="#fff"
+      d="M50.667 35.733h-37.333c-1.031 0-1.867-0.835-1.867-1.867v-3.733c0-1.031 0.835-1.867 1.867-1.867h37.333c1.031 0 1.867 0.835 1.867 1.867v3.733c0 1.031-0.835 1.867-1.867 1.867z"
+    />
+  </svg>
+);

package/src/core/content/Content.module.css

@@ -0,0 +1,40 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * 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.
+ */
+
+@layer comp {
+  .content {
+    --fabric-content: color-mix(in lab, var(--fabric-bg) 97%, var(--tint));
+
+    overflow: auto;
+    padding: 1rem;
+    background-color: var(--fabric-content);
+  }
+}
+
+@layer util {
+  .content {
+    width: unset;
+    height: unset;
+    margin: unset;
+  }
+}

package/src/core/content/Content.tsx

@@ -0,0 +1,91 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * 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.
+ */
+
+import classNames from "classnames";
+import { useImperativeHandle } from "react";
+import { useDebounce } from "../../hooks/useDebounce";
+import { useResizeObserver } from "../../hooks/useResizeObserver";
+import {
+  type ChildrenProp,
+  type CssProp,
+  type PositionObject,
+  type RefProp,
+  type SizeObject,
+  type TestProps,
+} from "../../types";
+import { ErrorBoundary } from "../boundary/ErrorBoundary";
+import classes from "./Content.module.css";
+
+export interface ContentProps
+  extends ChildrenProp,
+    CssProp,
+    RefProp,
+    TestProps {
+  /**
+   * scroll vevent handler
+   */
+  onScroll?: (event: PositionObject) => void;
+  /**
+   * scroll vevent handler
+   */
+  onResize?: (event: SizeObject) => void;
+}
+
+/**
+ * Scrollable content element
+ */
+export const Content = ({
+  ref,
+  children,
+  className,
+  onScroll,
+  onResize,
+  "data-testid": testId,
+  "data-test-value": testValue,
+}: ContentProps) => {
+  const resizeHandle = useResizeObserver(onResize);
+  const scrollHandler = useDebounce(
+    (e: React.UIEvent<HTMLDivElement>) => {
+      onScroll?.({
+        // @ts-expect-error ignore
+        left: e.target.scrollLeft,
+        // @ts-expect-error ignore
+        top: e.target.scrollTop,
+      });
+    },
+    [onScroll],
+  );
+  useImperativeHandle(ref, () => resizeHandle.current as AnyObject, []);
+  return (
+    <section
+      data-ref="content"
+      data-testid={testId}
+      data-test-value={testValue}
+      ref={resizeHandle}
+      onScroll={scrollHandler}
+      className={classNames(classes.content, "area-content", className)}
+    >
+      <ErrorBoundary>{children}</ErrorBoundary>
+    </section>
+  );
+};

package/src/core/headfoot/HeadFoot.module.css

@@ -0,0 +1,38 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * 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.
+ */
+
+@layer comp {
+  .headfoot {
+    .buttonWrapper + .buttonWrapper {
+      margin-inline-start: 0.25rem;
+    }
+  }
+}
+
+@layer util {
+  .headfoot {
+    width: unset;
+    height: unset;
+    margin: unset;
+  }
+}

package/src/core/headfoot/HeadFoot.tsx

@@ -0,0 +1,114 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * 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.
+ */
+
+import classNames from "classnames";
+import { useMemoDebugger } from "../../hooks/useEffectDebugger";
+import {
+  type AriaProps,
+  type ChildrenProp,
+  type ColorWithGrays,
+  type CssProp,
+  type TestProps,
+} from "../../types";
+import { getBgClass, getColor, getColorClass } from "../../utils";
+import classes from "./HeadFoot.module.css";
+
+interface BaseProps extends CssProp, AriaProps, ChildrenProp, TestProps {
+  dir?: "ltr" | "rtl";
+  /**
+   * background color
+   */
+  bg?: ColorWithGrays | string;
+  /**
+   * background color
+   */
+  color?: ColorWithGrays | string;
+}
+
+type DefaultProps = BaseProps & { flex?: false };
+type FlexProps = BaseProps & {
+  flex: true;
+  align?: "start" | "end" | "center" | "stretch";
+  justify?: "start" | "end" | "center" | "between";
+};
+
+export type HeadFootProps = DefaultProps | FlexProps;
+
+const HeadFoot = ({
+  as: E,
+  children,
+  className,
+  bg,
+  color,
+  flex,
+  area,
+  dir,
+  align = "center",
+  justify = "start",
+  ...aria
+}: KeyValue & { as: "header" | "footer" }) => {
+  /** ***************** style map *******************/
+  const styles = useMemoDebugger(
+    () => {
+      const s: KeyValue = {};
+      if (bg) {
+        s.backgroundColor = getColor(bg);
+      }
+      if (color) {
+        s.color = getColor(color);
+      }
+      return s;
+    },
+    [bg],
+    "HeadFoot styles",
+  );
+
+  return (
+    <E
+      dir={dir}
+      className={classNames(
+        classes.headfoot,
+        className,
+        bg && getBgClass(bg),
+        color && getColorClass(color),
+        area === "head" ? "area-head" : "area-foot",
+        `leading-none`,
+        flex && "flex flex-nowrap gap-px",
+        align && `items-${align}`,
+        justify && `justify-${justify}`,
+      )}
+      style={styles}
+      {...aria}
+    >
+      {children}
+    </E>
+  );
+};
+
+export const Header = (props: HeadFootProps) => (
+  <HeadFoot as="header" area="head" {...props} />
+);
+
+export const Footer = (props: HeadFootProps) => (
+  <HeadFoot as="footer" area="foot" {...props} />
+);

package/src/core/index.ts

@@ -0,0 +1,32 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * 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.
+ */
+
+export { Aside } from "./aside/Aside";
+export { ErrorBoundary } from "./boundary/ErrorBoundary";
+export { Content } from "./content/Content";
+export { Footer, Header } from "./headfoot/HeadFoot";
+export { Page } from "./page/Page";
+export { Col, Container, Row } from "./responsive/Responsive";
+export { Section } from "./section/Section";
+export { ThemeProvider } from "./theme/ThemeProvider";
+export { Viewport } from "./viewport/Viewport";

package/src/core/page/Page.module.css

@@ -0,0 +1,46 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * 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.
+ */
+
+@layer comp {
+  .page {
+    --fabric-page: color-mix(in lab, var(--fabric-bg) 94%, var(--tint));
+    --fabric-page-title: color-mix(in lab, var(--fabric-bg) 90%, var(--tint));
+
+    grid-template: "title title title" auto "head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
+    background-color: var(--fabric-page);
+
+    .pageTitle {
+      grid-area: title;
+      color: theme(colors.primary.600);
+      background-color: var(--fabric-page-title);
+    }
+  }
+}
+
+@layer util {
+  .pageTitle {
+    width: unset;
+    height: unset;
+    margin: unset;
+  }
+}