@adityabheke/renderer-package 1.0.0

package/dist/index.js

@@ -0,0 +1,898 @@
+// src/renderer/PageRenderer.tsx
+import React2, { useEffect } from "react";
+
+// src/renderer/utils/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/renderer/utils/responsive.ts
+var ANIMATION_VARIANTS = {
+  none: "",
+  fadeIn: "animate-in fade-in duration-700 fill-mode-both",
+  fromBottom: "animate-in fade-in slide-in-from-bottom-5 duration-700 fill-mode-both",
+  fromTop: "animate-in fade-in slide-in-from-top-5 duration-700 fill-mode-both",
+  fromLeft: "animate-in fade-in slide-in-from-left-5 duration-700 fill-mode-both",
+  fromRight: "animate-in fade-in slide-in-from-right-5 duration-700 fill-mode-both"
+};
+var FONT_SCALE_MAP = {
+  XS: "12px",
+  SM: "16px",
+  MD: "20px",
+  LG: "34px",
+  XL: "48px"
+};
+function buildFontWeightVars(fontWeight) {
+  return {
+    "--fw-base": fontWeight?.mobile || "400",
+    "--fw-sm": fontWeight?.mobile || "400",
+    "--fw-md": fontWeight?.tablet || "400",
+    "--fw-lg": fontWeight?.tablet || "400",
+    "--fw-xl": fontWeight?.desktop || "400",
+    "--fw-2xl": fontWeight?.desktop || "400"
+  };
+}
+function buildTextAlignVars(textAlign) {
+  return {
+    "--ta-base": textAlign?.mobile || "left",
+    "--ta-sm": textAlign?.mobile || "left",
+    "--ta-md": textAlign?.tablet || "left",
+    "--ta-lg": textAlign?.tablet || "left",
+    "--ta-xl": textAlign?.desktop || "left",
+    "--ta-2xl": textAlign?.desktop || "left"
+  };
+}
+function buildFontSizeVars(fontScale) {
+  return {
+    "--fs-base": FONT_SCALE_MAP[fontScale?.mobile || "XS"],
+    "--fs-sm": FONT_SCALE_MAP[fontScale?.mobile || "SM"],
+    "--fs-md": FONT_SCALE_MAP[fontScale?.tablet || "MD"],
+    "--fs-lg": FONT_SCALE_MAP[fontScale?.tablet || "LG"],
+    "--fs-xl": FONT_SCALE_MAP[fontScale?.desktop || "XL"],
+    "--fs-2xl": FONT_SCALE_MAP[fontScale?.desktop || "XL"]
+  };
+}
+function buildPaddingVars(padding) {
+  return {
+    "--p-base": `${padding?.mobile || 0}px`,
+    "--p-sm": `${padding?.mobile || 0}px`,
+    "--p-md": `${padding?.tablet || 0}px`,
+    "--p-lg": `${padding?.tablet || 0}px`,
+    "--p-xl": `${padding?.desktop || 0}px`,
+    "--p-2xl": `${padding?.desktop || 0}px`
+  };
+}
+var LEVEL_TO_SCALE = {
+  h1: "XL",
+  h2: "LG",
+  h3: "MD",
+  h4: "SM",
+  h5: "XS",
+  h6: "XS"
+};
+function buildHeadingFontSizeVars(level) {
+  return {
+    "--fs-base": FONT_SCALE_MAP[LEVEL_TO_SCALE[level?.mobile || "h1"]],
+    "--fs-sm": FONT_SCALE_MAP[LEVEL_TO_SCALE[level?.mobile || "h1"]],
+    "--fs-md": FONT_SCALE_MAP[LEVEL_TO_SCALE[level?.tablet || "h1"]],
+    "--fs-lg": FONT_SCALE_MAP[LEVEL_TO_SCALE[level?.tablet || "h1"]],
+    "--fs-xl": FONT_SCALE_MAP[LEVEL_TO_SCALE[level?.desktop || "h1"]],
+    "--fs-2xl": FONT_SCALE_MAP[LEVEL_TO_SCALE[level?.desktop || "h1"]]
+  };
+}
+function buildButtonFontSizeVars(fontSize) {
+  return {
+    "--btns-base": `${fontSize?.mobile || 16}px`,
+    "--btns-sm": `${fontSize?.mobile || 16}px`,
+    "--btns-md": `${fontSize?.tablet || 16}px`,
+    "--btns-lg": `${fontSize?.tablet || 16}px`,
+    "--btns-xl": `${fontSize?.desktop || 16}px`,
+    "--btns-2xl": `${fontSize?.desktop || 16}px`
+  };
+}
+function buildButtonPaddingVars(paddingX, paddingY) {
+  return {
+    "--btnpx-base": `${paddingX?.mobile || 20}px`,
+    "--btnpy-base": `${paddingY?.mobile || 10}px`,
+    "--btnpx-sm": `${paddingX?.mobile || 20}px`,
+    "--btnpy-sm": `${paddingY?.mobile || 10}px`,
+    "--btnpx-md": `${paddingX?.tablet || 20}px`,
+    "--btnpy-md": `${paddingY?.tablet || 10}px`,
+    "--btnpx-lg": `${paddingX?.tablet || 20}px`,
+    "--btnpy-lg": `${paddingY?.tablet || 10}px`,
+    "--btnpx-xl": `${paddingX?.desktop || 20}px`,
+    "--btnpy-xl": `${paddingY?.desktop || 10}px`,
+    "--btnpx-2xl": `${paddingX?.desktop || 20}px`,
+    "--btnpy-2xl": `${paddingY?.desktop || 10}px`
+  };
+}
+function buildButtonRadiusVars(borderRadius) {
+  return {
+    "--btnr-base": `${borderRadius?.mobile || 4}px`,
+    "--btnr-sm": `${borderRadius?.mobile || 4}px`,
+    "--btnr-md": `${borderRadius?.tablet || 4}px`,
+    "--btnr-lg": `${borderRadius?.tablet || 4}px`,
+    "--btnr-xl": `${borderRadius?.desktop || 4}px`,
+    "--btnr-2xl": `${borderRadius?.desktop || 4}px`
+  };
+}
+function buildWidthHeightVars(width, height) {
+  return {
+    "--w-base": width?.mobile || "auto",
+    "--h-base": height?.mobile || "auto",
+    "--w-sm": width?.mobile || "auto",
+    "--h-sm": height?.mobile || "auto",
+    "--w-md": width?.tablet || "auto",
+    "--h-md": height?.tablet || "auto",
+    "--w-lg": width?.tablet || "auto",
+    "--h-lg": height?.tablet || "auto",
+    "--w-xl": width?.desktop || "auto",
+    "--h-xl": height?.desktop || "auto",
+    "--w-2xl": width?.desktop || "auto",
+    "--h-2xl": height?.desktop || "auto"
+  };
+}
+function buildBorderRadiusVars(borderRadius) {
+  return {
+    "--r-base": `${borderRadius?.mobile || 0}px`,
+    "--r-sm": `${borderRadius?.mobile || 0}px`,
+    "--r-md": `${borderRadius?.tablet || 0}px`,
+    "--r-lg": `${borderRadius?.tablet || 0}px`,
+    "--r-xl": `${borderRadius?.desktop || 0}px`,
+    "--r-2xl": `${borderRadius?.desktop || 0}px`
+  };
+}
+function buildMarginVars(margin) {
+  return {
+    "--m-base": `${margin?.mobile || 0}px`,
+    "--m-sm": `${margin?.mobile || 0}px`,
+    "--m-md": `${margin?.tablet || 0}px`,
+    "--m-lg": `${margin?.tablet || 0}px`,
+    "--m-xl": `${margin?.desktop || 0}px`,
+    "--m-2xl": `${margin?.desktop || 0}px`
+  };
+}
+function buildFlexDirectionVars(direction) {
+  return {
+    "--fd-base": direction?.mobile || "column",
+    "--fd-sm": direction?.mobile || "column",
+    "--fd-md": direction?.tablet || "column",
+    "--fd-lg": direction?.tablet || "column",
+    "--fd-xl": direction?.desktop || "column",
+    "--fd-2xl": direction?.desktop || "column"
+  };
+}
+function buildAlignItemsVars(align) {
+  return {
+    "--ai-base": align?.mobile || "stretch",
+    "--ai-sm": align?.mobile || "stretch",
+    "--ai-md": align?.tablet || "stretch",
+    "--ai-lg": align?.tablet || "stretch",
+    "--ai-xl": align?.desktop || "stretch",
+    "--ai-2xl": align?.desktop || "stretch"
+  };
+}
+function buildJustifyContentVars(justify) {
+  return {
+    "--jc-base": justify?.mobile || "flex-start",
+    "--jc-sm": justify?.mobile || "flex-start",
+    "--jc-md": justify?.tablet || "flex-start",
+    "--jc-lg": justify?.tablet || "flex-start",
+    "--jc-xl": justify?.desktop || "flex-start",
+    "--jc-2xl": justify?.desktop || "flex-start"
+  };
+}
+function buildGapVars(gap) {
+  return {
+    "--g-base": `${gap?.mobile || 0}px`,
+    "--g-sm": `${gap?.mobile || 0}px`,
+    "--g-md": `${gap?.tablet || 0}px`,
+    "--g-lg": `${gap?.tablet || 0}px`,
+    "--g-xl": `${gap?.desktop || 0}px`,
+    "--g-2xl": `${gap?.desktop || 0}px`
+  };
+}
+function buildFlexWrapVars(wrap) {
+  const getWrap = (val) => val ? "wrap" : "nowrap";
+  return {
+    "--fw-base": getWrap(wrap?.mobile),
+    "--fw-sm": getWrap(wrap?.mobile),
+    "--fw-md": getWrap(wrap?.tablet),
+    "--fw-lg": getWrap(wrap?.tablet),
+    "--fw-xl": getWrap(wrap?.desktop),
+    "--fw-2xl": getWrap(wrap?.desktop)
+  };
+}
+
+// src/renderer/components/core/Button.tsx
+import { jsx } from "react/jsx-runtime";
+var Button = ({
+  text,
+  fontSize,
+  backgroundColor,
+  isBackgroundTransparent,
+  color,
+  paddingX,
+  paddingY,
+  borderRadius,
+  variant,
+  shadowBlur,
+  shadowColor,
+  className,
+  animationType = "none"
+}) => {
+  const styles = {
+    backgroundColor: variant === "solid" ? isBackgroundTransparent ? "transparent" : backgroundColor : "transparent",
+    color: variant === "solid" ? color : backgroundColor,
+    border: variant === "outline" ? `2px solid ${backgroundColor}` : "none",
+    cursor: "pointer",
+    transition: "all 0.2s",
+    fontWeight: "600",
+    display: "inline-block",
+    boxShadow: `0 0 ${shadowBlur}px 0px ${shadowColor}`,
+    ...buildButtonFontSizeVars(fontSize),
+    ...buildButtonPaddingVars(paddingX, paddingY),
+    ...buildButtonRadiusVars(borderRadius)
+  };
+  const animationClass = ANIMATION_VARIANTS[animationType] || "";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "inline-block transition-all duration-200",
+        animationClass,
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: cn(
+            "transition-all duration-200",
+            "[font-size:var(--btns-base)] @sm:[font-size:var(--btns-sm)] @md:[font-size:var(--btns-md)] @lg:[font-size:var(--btns-lg)] @xl:[font-size:var(--btns-xl)] @2xl:[font-size:var(--btns-2xl)]",
+            "[padding:var(--btnpy-base)_var(--btnpx-base)] @sm:[padding:var(--btnpy-sm)_var(--btnpx-sm)] @md:[padding:var(--btnpy-md)_var(--btnpx-md)] @lg:[padding:var(--btnpy-lg)_var(--btnpx-lg)] @xl:[padding:var(--btnpy-xl)_var(--btnpx-xl)] @2xl:[padding:var(--btnpy-2xl)_var(--btnpx-2xl)]",
+            "[border-radius:var(--btnr-base)] @sm:[border-radius:var(--btnr-sm)] @md:[border-radius:var(--btnr-md)] @lg:[border-radius:var(--btnr-lg)] @xl:[border-radius:var(--btnr-xl)] @2xl:[border-radius:var(--btnr-2xl)]"
+          ),
+          style: {
+            ...styles,
+            "--shadow-color": shadowColor
+          },
+          children: text
+        }
+      )
+    },
+    animationType
+  );
+};
+
+// src/renderer/components/core/Heading.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Heading = ({
+  text,
+  level,
+  textAlign,
+  fontWeight,
+  color,
+  textShadowBlur,
+  textShadowColor,
+  className,
+  animationType = "none"
+}) => {
+  const Component = level?.desktop || level?.tablet || level?.mobile || "h1";
+  const animationClass = ANIMATION_VARIANTS[animationType] || "";
+  const currentLevel = level?.desktop || "h1";
+  const trackingClass = currentLevel === "h1" || currentLevel === "h2" ? "tracking-tight" : "tracking-normal";
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: cn(
+        "transition-all duration-300 w-full",
+        animationClass,
+        className
+      ),
+      children: /* @__PURE__ */ jsx2(
+        Component,
+        {
+          className: cn(
+            trackingClass,
+            "[text-align:var(--ta-base)] @sm:[text-align:var(--ta-sm)] @md:[text-align:var(--ta-md)] @lg:[text-align:var(--ta-lg)] @xl:[text-align:var(--ta-xl)] @2xl:[text-align:var(--ta-2xl)]",
+            "[font-size:var(--fs-base)] @sm:[font-size:var(--fs-sm)] @md:[font-size:var(--fs-md)] @lg:[font-size:var(--fs-lg)] @xl:[font-size:var(--fs-xl)] @2xl:[font-size:var(--fs-2xl)]",
+            "[font-weight:var(--fw-base)] @sm:[font-weight:var(--fw-sm)] @md:[font-weight:var(--fw-md)] @lg:[font-weight:var(--fw-lg)] @xl:[font-weight:var(--fw-xl)] @2xl:[font-weight:var(--fw-2xl)]",
+            "transition-all duration-300"
+          ),
+          style: {
+            ...buildHeadingFontSizeVars(level),
+            ...buildFontWeightVars(fontWeight),
+            ...buildTextAlignVars(textAlign),
+            color,
+            outline: "none",
+            lineHeight: "1.2",
+            textShadow: `0 0 ${textShadowBlur}px ${textShadowColor}`
+          },
+          children: text
+        }
+      )
+    },
+    `${animationType}-${level?.mobile || ""}-${level?.desktop || ""}`
+  );
+};
+
+// src/renderer/components/core/Image.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Image = ({
+  src,
+  alt,
+  width,
+  height,
+  objectFit,
+  borderRadius,
+  shadowBlur,
+  shadowColor,
+  animationType = "none"
+}) => {
+  const animationClass = ANIMATION_VARIANTS[animationType] || "";
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: cn(
+        "transition-all duration-200 inline-block overflow-hidden",
+        animationClass,
+        "[width:var(--w-base)] @sm:[width:var(--w-sm)] @md:[width:var(--w-md)] @lg:[width:var(--w-lg)] @xl:[width:var(--w-xl)] @2xl:[width:var(--w-2xl)]",
+        "[height:var(--h-base)] @sm:[height:var(--h-sm)] @md:[height:var(--h-md)] @lg:[height:var(--h-lg)] @xl:[height:var(--h-xl)] @2xl:[height:var(--h-2xl)]",
+        "[border-radius:var(--r-base)] @sm:[border-radius:var(--r-sm)] @md:[border-radius:var(--r-md)] @lg:[border-radius:var(--r-lg)] @xl:[border-radius:var(--r-xl)] @2xl:[border-radius:var(--r-2xl)]"
+      ),
+      style: {
+        ...buildWidthHeightVars(width, height),
+        ...buildBorderRadiusVars(borderRadius),
+        boxShadow: `0 0 ${shadowBlur}px 0px ${shadowColor}`
+      },
+      children: /* @__PURE__ */ jsx3(
+        "img",
+        {
+          src: src || "https://via.placeholder.com/150",
+          alt,
+          className: "w-full h-full",
+          style: { objectFit }
+        }
+      )
+    },
+    animationType
+  );
+};
+
+// src/renderer/components/core/Text.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Text = ({
+  text,
+  fontScale,
+  textAlign,
+  fontWeight,
+  color,
+  padding,
+  textShadowBlur,
+  textShadowColor,
+  className,
+  animationType = "none"
+}) => {
+  const animationClass = ANIMATION_VARIANTS[animationType] || "";
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: cn(
+        "transition-all duration-300",
+        animationClass,
+        "[padding:var(--p-base)] @sm:[padding:var(--p-sm)] @md:[padding:var(--p-md)] @lg:[padding:var(--p-lg)] @xl:[padding:var(--p-xl)] @2xl:[padding:var(--p-2xl)]",
+        className
+      ),
+      style: {
+        ...buildPaddingVars(padding)
+      },
+      children: /* @__PURE__ */ jsx4(
+        "p",
+        {
+          className: cn("[text-align:var(--ta-base)] @sm:[text-align:var(--ta-sm)] @md:[text-align:var(--ta-md)] @lg:[text-align:var(--ta-lg)] @xl:[text-align:var(--ta-xl)] @2xl:[text-align:var(--ta-2xl)] [font-size:var(--fs-base)] @sm:[font-size:var(--fs-sm)] @md:[font-size:var(--fs-md)] @lg:[font-size:var(--fs-lg)] @xl:[font-size:var(--fs-xl)] @2xl:[font-size:var(--fs-2xl)] [font-weight:var(--fw-base)] @sm:[font-weight:var(--fw-sm)] @md:[font-weight:var(--fw-md)] @lg:[font-weight:var(--fw-lg)] @xl:[font-weight:var(--fw-xl)] @2xl:[font-weight:var(--fw-2xl)] transition-all duration-300"),
+          style: {
+            ...buildFontSizeVars(fontScale),
+            ...buildFontWeightVars(fontWeight),
+            ...buildTextAlignVars(textAlign),
+            color,
+            outline: "none",
+            whiteSpace: "pre-wrap",
+            textShadow: `0 0 ${textShadowBlur}px ${textShadowColor}`
+          },
+          children: text
+        }
+      )
+    },
+    `${animationType}-${fontScale}`
+  );
+};
+
+// src/renderer/components/core/Divider.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Divider = ({
+  height,
+  color,
+  backgroundColor,
+  marginY
+}) => {
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      className: cn(
+        "transition-all duration-200 w-full"
+      ),
+      style: {
+        paddingTop: `${marginY}px`,
+        paddingBottom: `${marginY}px`,
+        backgroundColor
+      },
+      children: /* @__PURE__ */ jsx5(
+        "div",
+        {
+          style: {
+            height: `${height}px`,
+            backgroundColor: color,
+            width: "100%"
+          }
+        }
+      )
+    }
+  );
+};
+
+// src/renderer/components/core/Video.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Video = ({
+  url,
+  width,
+  aspectRatio,
+  borderRadius,
+  animationType = "none"
+}) => {
+  const getEmbedUrl = (url2) => {
+    if (url2.includes("youtube.com/watch?v=")) {
+      return url2.replace("watch?v=", "embed/");
+    }
+    if (url2.includes("youtu.be/")) {
+      return url2.replace("youtu.be/", "youtube.com/embed/");
+    }
+    return url2;
+  };
+  const animationClass = ANIMATION_VARIANTS[animationType] || "";
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: cn(
+        "transition-all duration-200 p-2 overflow-hidden",
+        animationClass
+      ),
+      style: {
+        width: width || "100%",
+        aspectRatio,
+        borderRadius: `${borderRadius}px`
+      },
+      children: /* @__PURE__ */ jsx6(
+        "iframe",
+        {
+          src: getEmbedUrl(url),
+          className: "w-full h-full border-none",
+          allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+          allowFullScreen: true
+        }
+      )
+    },
+    animationType
+  );
+};
+
+// src/renderer/components/core/Icon.tsx
+import * as LucideIcons from "lucide-react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Icon = ({
+  name,
+  size,
+  color
+}) => {
+  const LucideIcon = LucideIcons[name];
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className: cn(
+        "transition-all duration-200 inline-block p-1"
+      ),
+      children: LucideIcon ? /* @__PURE__ */ jsx7(LucideIcon, { size, color }) : /* @__PURE__ */ jsx7("span", { children: "Icon not found" })
+    }
+  );
+};
+
+// src/renderer/components/layout/Section.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Section = ({
+  children,
+  padding = { mobile: 20, tablet: 28, desktop: 40 },
+  backgroundColor = "#ffffff",
+  alignItems = "center",
+  justifyContent = "center",
+  className,
+  style
+}) => {
+  return /* @__PURE__ */ jsx8(
+    "section",
+    {
+      className: cn(
+        "@container",
+        "flex flex-col cursor-pointer transition-all duration-200",
+        "[padding:var(--p-base)] @sm:[padding:var(--p-sm)] @md:[padding:var(--p-md)] @lg:[padding:var(--p-lg)] @xl:[padding:var(--p-xl)] @2xl:[padding:var(--p-2xl)]",
+        "w-full min-h-screen",
+        className
+      ),
+      style: {
+        ...buildPaddingVars(padding),
+        backgroundColor,
+        alignItems,
+        justifyContent,
+        ...style
+      },
+      children
+    }
+  );
+};
+
+// src/renderer/components/layout/Box.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Box = ({
+  children,
+  padding,
+  margin,
+  backgroundColor,
+  isBackgroundTransparent,
+  borderRadius,
+  width,
+  height,
+  flexDirection,
+  alignItems,
+  justifyContent,
+  gap,
+  borderWidth,
+  borderColor,
+  shadowBlur,
+  shadowColor,
+  className,
+  style,
+  animationType = "none",
+  flexWrap = { mobile: false, tablet: false, desktop: false }
+}) => {
+  const animationClass = ANIMATION_VARIANTS[animationType] || "";
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      className: cn(
+        "transition-all min-h-10 min-w-10 duration-200 flex",
+        animationClass,
+        "[padding:var(--p-base)] @sm:[padding:var(--p-sm)] @md:[padding:var(--p-md)] @lg:[padding:var(--p-lg)] @xl:[padding:var(--p-xl)] @2xl:[padding:var(--p-2xl)]",
+        "[margin:var(--m-base)] @sm:[margin:var(--m-sm)] @md:[margin:var(--m-md)] @lg:[margin:var(--m-lg)] @xl:[margin:var(--m-xl)] @2xl:[margin:var(--m-2xl)]",
+        "[border-radius:var(--r-base)] @sm:[border-radius:var(--r-sm)] @md:[border-radius:var(--r-md)] @lg:[border-radius:var(--r-lg)] @xl:[border-radius:var(--r-xl)] @2xl:[border-radius:var(--r-2xl)]",
+        "[width:var(--w-base)] @sm:[width:var(--w-sm)] @md:[width:var(--w-md)] @lg:[width:var(--w-lg)] @xl:[width:var(--w-xl)] @2xl:[width:var(--w-2xl)]",
+        "[height:var(--h-base)] @sm:[height:var(--h-sm)] @md:[height:var(--h-md)] @lg:[height:var(--h-lg)] @xl:[height:var(--h-xl)] @2xl:[height:var(--h-2xl)]",
+        "[flex-direction:var(--fd-base)] @sm:[flex-direction:var(--fd-sm)] @md:[flex-direction:var(--fd-md)] @lg:[flex-direction:var(--fd-lg)] @xl:[flex-direction:var(--fd-xl)] @2xl:[flex-direction:var(--fd-2xl)]",
+        "[align-items:var(--ai-base)] @sm:[align-items:var(--ai-sm)] @md:[align-items:var(--ai-md)] @lg:[align-items:var(--ai-lg)] @xl:[align-items:var(--ai-xl)] @2xl:[align-items:var(--ai-2xl)]",
+        "[justify-content:var(--jc-base)] @sm:[justify-content:var(--jc-sm)] @md:[justify-content:var(--jc-md)] @lg:[justify-content:var(--jc-lg)] @xl:[justify-content:var(--jc-xl)] @2xl:[justify-content:var(--jc-2xl)]",
+        "[flex-wrap:var(--fw-base)] @sm:[flex-wrap:var(--fw-sm)] @md:[flex-wrap:var(--fw-md)] @lg:[flex-wrap:var(--fw-lg)] @xl:[flex-wrap:var(--fw-xl)] @2xl:[flex-wrap:var(--fw-2xl)]",
+        "[gap:var(--g-base)] @sm:[gap:var(--g-sm)] @md:[gap:var(--g-md)] @lg:[gap:var(--g-lg)] @xl:[gap:var(--g-xl)] @2xl:[gap:var(--g-2xl)]",
+        className
+      ),
+      style: {
+        backgroundColor: isBackgroundTransparent ? "transparent" : backgroundColor,
+        border: borderWidth ? `${borderWidth}px solid ${borderColor}` : "none",
+        boxShadow: `0 0 ${shadowBlur}px 0px ${shadowColor}`,
+        ...buildPaddingVars(padding),
+        ...buildMarginVars(margin),
+        ...buildBorderRadiusVars(borderRadius),
+        ...buildWidthHeightVars(width, height),
+        ...buildFlexDirectionVars(flexDirection),
+        ...buildAlignItemsVars(alignItems),
+        ...buildJustifyContentVars(justifyContent),
+        ...buildGapVars(gap),
+        ...buildFlexWrapVars(flexWrap),
+        ...style
+      },
+      children
+    },
+    animationType
+  );
+};
+
+// src/renderer/components/layout/ColumnLayouts.tsx
+import { jsxs } from "react/jsx-runtime";
+var TwoColumnLayout = ({ gap = 16, slots, children }) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: { gap },
+      className: cn(
+        "w-full transition-all flex flex-row duration-200"
+      ),
+      children: [
+        slots?.["left-col"],
+        slots?.["right-col"],
+        children
+      ]
+    }
+  );
+};
+var ThreeColumnLayout = ({ gap = 16, slots, children }) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: { gap },
+      className: cn(
+        "w-full transition-all flex flex-row duration-200"
+      ),
+      children: [
+        slots?.["left-col"],
+        slots?.["center-col"],
+        slots?.["right-col"],
+        children
+      ]
+    }
+  );
+};
+
+// src/renderer/components/layout/Grid.tsx
+import React from "react";
+import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
+var Grid = ({ children, slots, columns = 3, rows = 1, gap = 16 }) => {
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: cn(
+        "w-full grid transition-all duration-200"
+      ),
+      style: {
+        gridTemplateColumns: `repeat(${columns}, 1fr)`,
+        gridTemplateRows: `repeat(${rows}, auto)`,
+        gap: `${gap}px`
+      },
+      children: [
+        children,
+        slots && Object.values(slots).map((slot, i) => /* @__PURE__ */ jsx10(React.Fragment, { children: slot }, i))
+      ]
+    }
+  );
+};
+
+// src/renderer/components/prebuilt/Hero.tsx
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+var Hero = ({
+  children,
+  slots,
+  className,
+  padding = { mobile: 40, tablet: 50, desktop: 60 },
+  backgroundColor,
+  bgImage,
+  showOverlay = false,
+  overlayColor = "#000000",
+  overlayOpacity = 0.5
+}) => {
+  return /* @__PURE__ */ jsxs3(
+    Section,
+    {
+      alignItems: "center",
+      justifyContent: "center",
+      padding,
+      backgroundColor,
+      className,
+      style: {
+        backgroundImage: bgImage ? `url(${bgImage})` : void 0,
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        position: "relative"
+      },
+      children: [
+        showOverlay && /* @__PURE__ */ jsx11(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: overlayColor,
+              opacity: overlayOpacity,
+              zIndex: 1
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs3("div", { style: { position: "relative", zIndex: 2, width: "100%", height: "100%", display: "flex", justifyContent: "center", alignItems: "center" }, children: [
+          slots?.["hero-box"],
+          children
+        ] })
+      ]
+    }
+  );
+};
+
+// src/renderer/components/prebuilt/ContentSections.tsx
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+var FAQItem = ({ slots, children }) => {
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: cn(
+        "transition-all duration-200 p-6 bg-white border border-gray-100 rounded-xl w-full",
+        "shadow-sm hover:shadow-md"
+      ),
+      children: [
+        slots?.["question"],
+        /* @__PURE__ */ jsx12("div", { className: "mt-2 pt-2 border-t border-gray-50", children: slots?.["answer"] }),
+        children
+      ]
+    }
+  );
+};
+var FAQ = ({ children, slots, className, padding = { mobile: 40, tablet: 50, desktop: 60 }, backgroundColor = "transparent" }) => {
+  return /* @__PURE__ */ jsx12(Section, { alignItems: "center", justifyContent: "center", padding, backgroundColor, className, children: /* @__PURE__ */ jsxs4("div", { className: "w-full flex flex-col items-center", children: [
+    slots?.["faq-header"],
+    slots?.["faq-description"],
+    slots?.["faq-list"],
+    children
+  ] }) });
+};
+var PricingCard = ({ children, slots, isPopular = false }) => {
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: cn(
+        "transition-all flex flex-col items-center justify-start p-8 bg-white border border-gray-100 rounded-xl w-full min-w-1/4 max-w-sm mx-auto",
+        "shadow-lg",
+        isPopular && "border-blue-500 scale-105 z-10"
+      ),
+      children: [
+        isPopular && /* @__PURE__ */ jsx12("span", { className: "bg-blue-600 text-white text-xs font-bold px-3 py-1 rounded-full -mt-12 mb-6", children: " MOST POPULAR" }),
+        slots?.["plan-name"],
+        slots?.["plan-price"],
+        slots?.["plan-features"],
+        slots?.["plan-button"],
+        children
+      ]
+    }
+  );
+};
+var PricingTable = ({ children, slots, className, padding = { mobile: 40, tablet: 50, desktop: 60 }, backgroundColor = "transparent" }) => {
+  return /* @__PURE__ */ jsx12(
+    Section,
+    {
+      alignItems: "center",
+      justifyContent: "center",
+      padding,
+      backgroundColor,
+      className,
+      children: /* @__PURE__ */ jsxs4("div", { className: "w-full flex flex-col items-center", children: [
+        slots?.["pricing-header"],
+        slots?.["pricing-subtext"],
+        slots?.["pricing-container"],
+        children
+      ] })
+    }
+  );
+};
+
+// src/renderer/components/prebuilt/Footer.tsx
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+var FooterSimple = ({
+  children,
+  slots,
+  backgroundColor = "#ffffff",
+  className
+}) => {
+  return /* @__PURE__ */ jsx13(
+    "footer",
+    {
+      className: cn(
+        "w-full py-8 border-t border-gray-200 transition-all duration-200",
+        className
+      ),
+      style: { backgroundColor },
+      children: /* @__PURE__ */ jsxs5("div", { className: "max-w-6xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-4", children: [
+        slots?.["footer-logo"],
+        slots?.["footer-copy"],
+        slots?.["f-link-1"],
+        slots?.["f-link-2"],
+        children
+      ] })
+    }
+  );
+};
+
+// src/renderer/ComponentRegistry.ts
+var componentRegistry = {
+  Button,
+  Heading,
+  Image,
+  Text,
+  Divider,
+  Video,
+  Icon,
+  Section,
+  Box,
+  TwoColumnLayout,
+  ThreeColumnLayout,
+  Grid,
+  Hero,
+  FAQ,
+  FAQItem,
+  PricingTable,
+  PricingCard,
+  FooterSimple
+};
+
+// src/renderer/RenderNode.tsx
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+var RenderNode = ({ id, data }) => {
+  const node = data[id];
+  if (!node || node.hidden) return null;
+  const { type, props = {}, nodes = [], linkedNodes } = node;
+  if (typeof type === "string") {
+    const Tag = type;
+    return /* @__PURE__ */ jsxs6(Tag, { id, ...props, children: [
+      nodes.map((childId) => /* @__PURE__ */ jsx14(RenderNode, { id: childId, data }, childId)),
+      linkedNodes && Object.values(linkedNodes).map((linkedId) => /* @__PURE__ */ jsx14(RenderNode, { id: linkedId, data }, linkedId))
+    ] });
+  }
+  const componentName = type?.resolvedName;
+  const Component = componentRegistry[componentName];
+  if (!Component) {
+    console.log(`Component not found in registry: ${componentName}`);
+    return null;
+  }
+  const slots = {};
+  if (linkedNodes) {
+    Object.entries(linkedNodes).forEach(([key, linkedId]) => {
+      slots[key] = /* @__PURE__ */ jsx14(RenderNode, { id: linkedId, data }, linkedId);
+    });
+  }
+  return /* @__PURE__ */ jsx14(Component, { id, ...props, slots, children: nodes.map((childId) => /* @__PURE__ */ jsx14(RenderNode, { id: childId, data }, childId)) });
+};
+
+// src/renderer/PageRenderer.tsx
+import { useLocation } from "react-router-dom";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var PageRenderer = ({ url }) => {
+  const { pathname } = useLocation();
+  const [json, setJson] = React2.useState(null);
+  const [ready, setReady] = React2.useState(false);
+  const fetchPageSchema = async (slug) => {
+    const response = await fetch(`${url}?slug=${slug}`);
+    const data = await response.json();
+    if (data.success) {
+      setJson(data.data.schema);
+    }
+  };
+  useEffect(() => {
+    const slug = pathname.startsWith("/") ? pathname.slice(1) : pathname;
+    console.log("SLug:", slug);
+    fetchPageSchema(slug);
+  }, [pathname]);
+  useEffect(() => {
+    if (json) {
+      requestAnimationFrame(() => {
+        setReady(true);
+      });
+    }
+  }, [json]);
+  if (!json || !json.ROOT) {
+    console.log("Invalid Craft JSON");
+    return null;
+  }
+  if (!ready) {
+    return /* @__PURE__ */ jsx15("div", { className: "h-screen flex items-center justify-center", children: /* @__PURE__ */ jsx15("div", { className: "animate-spin h-10 w-10 border-4 border-blue-500 border-t-transparent rounded-full" }) });
+  }
+  return /* @__PURE__ */ jsx15(RenderNode, { id: "ROOT", data: json });
+};
+export {
+  PageRenderer,
+  componentRegistry
+};