alinea/dist/dashboard/view/Viewport.js

[](https://npmjs.org/package/alinea) [](https://packagephobia.com/result?p=alinea)

import "../../chunks/chunk-U5RRZUYZ.js";

// src/dashboard/view/Viewport.tsx
import { useContrastColor } from "alinea/ui/hook/UseContrastColor";
import { fromModule } from "alinea/ui/util/Styler";
import { useEffect, useLayoutEffect } from "react";
import { usePreferences } from "../hook/UsePreferences.js";

// src/dashboard/view/Viewport.module.scss
var Viewport_module_default = {
  "root": "alinea-Viewport",
  "is-light": "alinea-Viewport-is-light",
  "isLight": "alinea-Viewport-is-light",
  "is-dark": "alinea-Viewport-is-dark",
  "isDark": "alinea-Viewport-is-dark",
  "main": "alinea-Viewport-main",
  "is-contain": "alinea-Viewport-is-contain",
  "isContain": "alinea-Viewport-is-contain"
};

// src/dashboard/view/Viewport.tsx
import { jsx } from "react/jsx-runtime";
var styles = fromModule(Viewport_module_default);
var useIsomorphicEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
function Viewport({
  children,
  color = "#6673FC",
  contain,
  attachToBody,
  ...props
}) {
  const accentColor = color;
  const accentColorForeground = useContrastColor(accentColor);
  const { scheme, size } = usePreferences();
  useEffect(() => {
    if (!size)
      return;
    document.documentElement.style.fontSize = `${size}px`;
  }, [size]);
  const style = {
    "--alinea-accent": accentColor,
    "--alinea-accent-foreground": accentColorForeground
  };
  const className = styles.root(scheme);
  const styleString = Object.entries(style).map(([key, value]) => {
    return `${key}: ${value}`;
  }).join("; ");
  useIsomorphicEffect(() => {
    if (attachToBody) {
      document.body.className = className;
      document.body.style.cssText = styleString;
    }
  }, [attachToBody, styleString, className]);
  useIsomorphicEffect(() => {
    const meta = document.createElement("meta");
    meta.setAttribute("content", accentColor);
    meta.setAttribute("name", "theme-color");
    document.head.appendChild(meta);
    return () => {
      document.head.removeChild(meta);
    };
  }, [accentColor]);
  const mainProps = attachToBody ? {} : { className, style };
  return /* @__PURE__ */ jsx("main", { ...mainProps, className: styles.main.mergeProps(props)({ contain }), children });
}
export {
  Viewport
};