import { p as pageAttributesSchema } from "./chunk-SQ6UIR6O.BSGYRT1Y.js";
import { a8 as resolveSchema, a9 as colorPresets, u as useDraft, w as useSiteAttributes, x as usePageAttributes, r as useGenerationState, aa as defaultProps, I as getSchemaDefaults, ab as sectionProps } from "./use-page-data.CMUQyNAA.js";
import "@sinclair/typebox";
import { c as css, a as tx } from "./twind.DdSZmZu6.js";
import { g as get } from "./get.DbXiVauf.js";
import { useEffect, Suspense, lazy } from "react";
import { jsx } from "react/jsx-runtime";
import { merge, get as get$1 } from "lodash-es";
import { u as useBrickManifest } from "./use-brick-manifest.DJ5dVtct.js";
import { p as propToClass, a as propToStyle } from "./color-system.CS_rItCW.js";
function getStyleProperties(schema, path = "", styles = {}) {
  if (schema.type === "object") {
    for (const key in schema.properties) {
      const prop = resolveSchema(schema.properties[key]);
      if (prop["ui:styleId"]) {
        styles[`${path}${key}`] = prop["ui:styleId"];
      }
      getStyleProperties(prop, `${path}${key}.`, styles);
    }
  } else if (schema.type === "array") {
    getStyleProperties(schema.items, `${path}[].`, styles);
  }
  return styles;
}
function getBackgroundStyles(props) {
  if (!props?.image) {
    return null;
  }
  return [
    css({
      backgroundImage: `url(${props.image})`,
      backgroundSize: props.size ?? "auto",
      backgroundRepeat: props.repeat ?? "no-repeat"
    })
  ];
}
function simplePropertyHandler(cssProp) {
  return function(value, mobileValue) {
    if (!value) {
      return null;
    }
    if (!mobileValue) {
      return css({
        [cssProp]: value
      });
    }
    return `@desktop:(${css({ [cssProp]: value })}) @mobile:(${css({ [cssProp]: mobileValue })})`;
  };
}
function getGapStyles(value, mobileValue) {
  if (!mobileValue) {
    return css({
      gap: value
    });
  }
  return `@desktop:(${css({ gap: value })}) @mobile:(${css({ gap: mobileValue })})`;
}
function getBackgroundColorStyles(value, mobileValue) {
  if (!mobileValue) {
    return propToClass(value, "bg");
  }
  return `@desktop:(${propToClass(value, "bg-color")}) @mobile:(${propToClass(mobileValue, "bg-color")})`;
}
function getColorStyles(value, mobileValue) {
  return propToStyle(value, "color");
}
function getOpacityStyles(opacity) {
  return propToStyle(opacity, "opacity");
}
function simpleClassHandler(value, mobileValue, schema) {
  if (schema?.["ui:desktop-only"]) {
    return `@desktop:(${value})`;
  }
  if (!mobileValue) {
    return value;
  }
  if (value && mobileValue) {
    return `@desktop:(${value}) @mobile:(${mobileValue})`;
  }
  if (mobileValue) {
    return `@mobile:(${mobileValue})`;
  }
}
function simpleClassHandleObject(value, mobileValue, schema) {
  if (schema?.["ui:desktop-only"]) {
    return `@desktop:(${Object.values(value).join(" ")})`;
  }
  if (value && !mobileValue) {
    return Object.values(value);
  }
  if (value && mobileValue) {
    return `@desktop:(${Object.values(value).join(" ")}) @mobile:(${Object.values(mobileValue).join(" ")})`;
  }
  if (mobileValue) {
    return `@mobile:(${Object.values(mobileValue).join(" ")})`;
  }
}
function getFixedPositionedStyles(value) {
  if (!value) {
    return null;
  }
  return "sticky top-0 left-0 right-0 self-start w-fill z-[99999] isolate";
}
function getGrowStyles(props, mobileProps, schema) {
  if (schema?.["ui:desktop-only"]) {
    return `@desktop:(flex-grow)`;
  }
  if (props && mobileProps) {
    return `flex-grow`;
  }
  if (!mobileProps) {
    return props ? "@desktop:(flex-grow)" : null;
  }
  if (mobileProps) {
    return `@mobile:(flex-grow) @desktop:(grow-0)`;
  }
}
function getWrapStyles(value, mobileValue, schema) {
  if (schema?.["ui:desktop-only"]) {
    return `@desktop:(${value ? "flex-wrap" : "flex-nowrap"})`;
  }
  if (!mobileValue) {
    return value ? "flex-wrap" : "flex-nowrap";
  }
  if (value && mobileValue) {
    return `@desktop:(flex-wrap) @mobile:(flex-wrap)`;
  }
  if (mobileValue) {
    return `@mobile:(flex-wrap) @desktop:(flex-nowrap)`;
  }
}
function getColorPresetStyles(value, mobileValue, schema) {
  const presets = schema?.["ui:presets"] ?? colorPresets;
  if (schema?.["ui:desktop-only"]) {
    return `@desktop:(${presets[value]?.className})`;
  }
  if (!mobileValue) {
    return presets[value]?.className;
  }
  if (value && mobileValue) {
    return `@desktop:(${presets[value]?.className}) @mobile:(${presets[mobileValue]?.className})`;
  }
  if (mobileValue) {
    return `@mobile:(${presets[mobileValue]?.className})`;
  }
}
const pageStylesHelpersMap = {
  "presets:color": getColorPresetStyles,
  "styles:gradientDirection": simpleClassHandler
};
const brickStylesHelpersMap = {
  "styles:color": getColorStyles,
  "styles:textShadow": simpleClassHandler,
  "styles:opacity": getOpacityStyles,
  "styles:objectFit": simpleClassHandler,
  "styles:objectPosition": simpleClassHandler,
  "styles:heroSize": simpleClassHandler,
  "styles:fontSize": simpleClassHandler,
  "styles:wrap": getWrapStyles,
  "styles:padding": simplePropertyHandler("padding"),
  // test
  "styles:verticalMargin": simplePropertyHandler("margin-block"),
  // test
  "styles:gap": getGapStyles,
  "styles:gradientDirection": simpleClassHandler,
  "styles:backgroundColor": getBackgroundColorStyles,
  "styles:background": getBackgroundStyles,
  "presets:color": getColorPresetStyles,
  "styles:borderColor": simpleClassHandler,
  "styles:rounding": simpleClassHandler,
  "styles:direction": simpleClassHandler,
  // test putting here
  "styles:alignItems": simpleClassHandler,
  "styles:justifyContent": simpleClassHandler,
  "styles:border": simpleClassHandleObject,
  // "styles:rounding": simpleClassHandler,
  "styles:shadow": simpleClassHandler
};
const brickWrapperStylesHelpersMap = {
  "styles:direction": simpleClassHandler,
  "styles:rounding": simpleClassHandler,
  "styles:justifyContent": simpleClassHandler,
  "styles:alignItems": simpleClassHandler,
  "styles:fixedPositioned": getFixedPositionedStyles,
  "styles:alignSelf": simpleClassHandler,
  "styles:grow": getGrowStyles
};
function extractStylePath(path) {
  if (!path.includes(".")) {
    return path;
  }
  return path.split(".").slice(0, -1).join(".");
}
function useFontWatcher() {
  const draft = useDraft();
  const themeUsed = draft.previewTheme ?? draft.site.theme;
  useEffect(() => {
    buildHtmlHeadLinks();
    updateLinks(themeUsed.typography);
  }, [themeUsed.typography]);
  return themeUsed.typography;
}
function updateLinks(typography) {
  for (const font of ["body", "heading"]) {
    if (typography[font].type === "google") {
      const linkElement = document.getElementById(`stylesheet-font-${font}`);
      linkElement.href = `https://fonts.googleapis.com/css2?family=${typography[font].family.replace(
        / /g,
        "+"
      )}&display=swap`;
    }
  }
}
function buildHtmlHeadLinks() {
  for (const font of ["body", "heading"]) {
    const id = `stylesheet-font-${font}`;
    if (document.getElementById(id)) {
      document.getElementById(id)?.remove();
    }
    const linkElementBody = document.createElement("link");
    linkElementBody.rel = "stylesheet";
    linkElementBody.id = id;
    document.head.appendChild(linkElementBody);
  }
}
function usePageStyle({ editable, showIntro } = {}) {
  const stylesProps = getStyleProperties(pageAttributesSchema);
  const classes = useClassesFromStyleProps$2(stylesProps);
  const typography = useFontWatcher();
  return tx(
    "flex flex-col group/page mx-auto relative max-w-full w-full p-0 antialiased",
    editable && "overflow-hidden min-h-[100cqh]",
    // pageAttributes.colorPreset?.color ?? siteAttributes.colorPreset?.color,
    Object.values(classes),
    getTypographyStyles(typography),
    // Animate all bricks when the page is loading
    editable && showIntro && "[&>.brick-wrapper]:(opacity-0 animate-elastic-pop)"
  );
}
function useClassesFromStyleProps$2(stylesProps) {
  const siteAttributes = useSiteAttributes();
  const pageAttributes = usePageAttributes();
  const classes = Object.entries(stylesProps).reduce(
    (acc, [path, styleId]) => {
      const helper = pageStylesHelpersMap[styleId];
      if (!helper) {
        return acc;
      }
      const part = extractStylePath(path);
      acc[part] = acc[part] ?? [];
      const resolvedProps = get(pageAttributes, path) ?? get(siteAttributes, path);
      const schema = get(pageAttributesSchema.properties, path);
      acc[part].push(tx(helper?.(resolvedProps, void 0, schema)));
      return acc;
    },
    {}
  );
  return classes;
}
function getTypographyStyles(typography) {
  function formatFontFamily(font) {
    return font.type === "stack" ? `var(--font-${font.family})` : `"${font.family}"`;
  }
  return css({
    fontFamily: formatFontFamily(typography.body),
    fontSize: `${typography.base}px`,
    "& h1, & h2, & h3, & h4, & h5, & h6, & h7": {
      fontFamily: formatFontFamily(typography.heading)
    }
  });
}
const bricks = /* @__PURE__ */ Object.assign({ "../bricks/accordion.tsx": () => import("./accordion.BiFOeDBx.js"), "../bricks/box.tsx": () => import("./box.CueluKXP.js"), "../bricks/button.tsx": () => import("./button.CZiVKe2l.js"), "../bricks/card.tsx": () => import("./card.C3N7iouy.js"), "../bricks/carousel.tsx": () => import("./carousel.B4S7Kawg.js"), "../bricks/footer.tsx": () => import("./footer.CJoY1cfh.js"), "../bricks/form.tsx": () => import("./form.CTeBH2pJ.js"), "../bricks/hero.tsx": () => import("./hero.IT5bky8g.js"), "../bricks/html.tsx": () => import("./html.BUWLTGnn.js"), "../bricks/icon.tsx": () => import("./icon.CvOJK-qh.js"), "../bricks/image.tsx": () => import("./image.u5hXnwE8.js"), "../bricks/images-gallery.tsx": () => import("./images-gallery.CvaR-H_I.js"), "../bricks/map.tsx": () => import("./map.gRyBOgUe.js"), "../bricks/navbar.tsx": () => import("./navbar.DTftpYwt.js"), "../bricks/sidebar.tsx": () => import("./sidebar.C5GL92NA.js"), "../bricks/social-links.tsx": () => import("./social-links.MLNI8JQ4.js"), "../bricks/spacer.tsx": () => import("./spacer.NsK8TNHb.js"), "../bricks/table.tsx": () => import("./table.DBgc7mmS.js"), "../bricks/tabs.tsx": () => import("./tabs.B64E6U-j.js"), "../bricks/testimonials.tsx": () => import("./testimonials.CSGVzkVA.js"), "../bricks/text.tsx": () => import("./text.D0YUNhR7.js"), "../bricks/timeline.tsx": () => import("./timeline.TU1-uMEj.js"), "../bricks/video.tsx": () => import("./video.Dm0Isd6X.js").then((n) => n.v) });
const bricksMap = Object.entries(bricks).reduce(
  (acc, [path, importFn]) => {
    const componentName = path.match(/\.\/bricks\/(.*)\.(j|t)sx?$/)[1];
    acc[componentName] = lazy(importFn);
    return acc;
  },
  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
  {}
);
const BrickComponent = ({
  brick,
  editable,
  isDynamicPreview,
  iterationIndex,
  selected
}) => {
  const BrickModule = bricksMap[brick.type];
  if (!BrickModule) {
    console.warn("Brick not found", brick.type);
    return null;
  }
  const brickProps = {
    brick,
    editable,
    isDynamicPreview,
    selected,
    iterationIndex
  };
  return /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(BrickModule, { ...brickProps }) });
};
function useClassesFromStyleProps$1(stylesProps, brick, type) {
  const { props, mobileProps } = brick;
  const pageAttributes = usePageAttributes();
  const mergedProps = merge({}, defaultProps[brick.type].props, props);
  const manifest = useBrickManifest(brick.type);
  const filtered = Object.entries(stylesProps).reduce((acc, [key, value]) => {
    const manifestField = get$1(manifest.props.properties, key);
    if (manifestField) {
      const resolvedField = resolveSchema(manifestField);
      if (resolvedField.metadata?.filter) {
        const filter = resolvedField.metadata.filter;
        if (!filter(resolvedField, mergedProps, pageAttributes)) {
          acc.push(key);
        }
      }
    }
    return acc;
  }, []);
  const helpers = type === "brick" ? brickStylesHelpersMap : brickWrapperStylesHelpersMap;
  const classes = Object.entries(stylesProps).reduce(
    (acc, [path, styleId]) => {
      const helper = helpers[styleId];
      if (!helper) {
        return acc;
      }
      if (filtered.includes(path)) {
        return acc;
      }
      const part = extractStylePath(path);
      acc[part] = acc[part] ?? [];
      const resolvedProps = get$1(mergedProps, path);
      const resolvedMobileProps = get$1(mobileProps, path);
      const schema = get$1(manifest.props.properties, path);
      acc[part].push(tx(helper?.(resolvedProps, resolvedMobileProps, schema)));
      return acc;
    },
    {}
  );
  return classes;
}
function useBrickStyle(brick) {
  const manifest = useBrickManifest(brick.type);
  const stylesProps = getStyleProperties(manifest.props);
  return useClassesFromStyleProps$1(stylesProps, brick, "brick");
}
function useBrickWrapperStyle(_props) {
  const { brick, editable, selected, isContainerChild = false } = _props;
  const { props, mobileProps } = brick;
  const manifest = useBrickManifest(brick.type);
  const stylesProps = getStyleProperties(manifest.props);
  const styleIds = Object.values(stylesProps);
  const classes = useClassesFromStyleProps$1(stylesProps, brick, "wrapper");
  const isContainer = !!manifest.isContainer;
  const { isSetup } = useGenerationState();
  return tx(
    manifest.staticClasses,
    props.className,
    props.preset,
    "brick-wrapper group/brick flex max-w-full",
    isContainer ? "@desktop:min-w-min min-h-fit h-auto flex-wrap" : (
      // ? "@desktop:min-w-min min-h-fit shrink-0 h-auto @mobile:flex-wrap @desktop:flex-nowrap"
      "min-w-min min-h-min"
    ),
    manifest.maxHeight?.mobile && `@mobile:max-h-[${manifest.maxHeight.mobile}px]`,
    manifest.maxHeight?.desktop && `@desktop:max-h-[${manifest.maxHeight.desktop}px]`,
    // !isContainerChild &&
    props.grow ? "@desktop:w-auto" : typeof props.width !== "undefined" ? `@desktop:w-[${props.width}]` : `@desktop:w-[${manifest.defaultWidth.desktop}]`,
    !isContainerChild && (typeof mobileProps?.width !== "undefined" ? `@mobile:min-w-[${mobileProps.width}]` : `@mobile:w-[${manifest.defaultWidth.mobile}]`),
    // Max width
    manifest.maxWidth?.mobile && `@mobile:max-w-[${manifest.maxWidth.mobile}px]`,
    manifest.maxWidth?.desktop && `@desktop:max-w-[${manifest.maxWidth.desktop}px]`,
    typeof props.height !== "undefined" ? css({
      minHeight: `${props.height}`
    }) : `@mobile:min-h-[${manifest.defaultHeight.mobile}] @desktop:min-h-[${manifest.defaultHeight.desktop}]`,
    styleIds.includes("styles:fixedPositioned") === false && "relative",
    // container children expand to fill the space
    isContainerChild && "container-child",
    // When a brick is hidden on mobile, hide the wrapper as well
    "@mobile:[&:has([data-mobile-hidden])]:hidden @desktop:[&:has([data-mobile-hidden])]:flex",
    isSetup && "animate animate-reveal-brick",
    getBrickWrapperEditorStyles(_props),
    ...Object.values(classes).flat()
  );
}
function getBrickWrapperEditorStyles({
  brick,
  editable,
  isContainerChild,
  selected
}) {
  const manifest = useBrickManifest(brick.type);
  const isContainer = !!manifest.isContainer;
  if (!editable) {
    return null;
  }
  return [
    "select-none",
    // "select-none transition-[outline] duration-[200ms]",
    editable && "transition-all duration-300",
    "outline outline-2 outline-transparent outline-dashed",
    {
      "outline-offset-2": !isContainer && !isContainerChild,
      "outline-offset-4": isContainer,
      "outline-offset-0": isContainerChild
    },
    selected && !isContainer && "!outline-upstart-400",
    selected && isContainer && "!outline-orange-300",
    !selected && !isContainerChild && !isContainer && "hover:(outline-upstart-400/60)",
    !selected && !isContainerChild && isContainer && "hover:(outline-orange-300/20)",
    !selected && isContainerChild && "hover:(outline-upstart-400/60) group-hover/brick:(outline-upstart-400/60)",
    css({
      "&.selected-group": {
        outlineColor: "var(--violet-8) !important"
      },
      "&.moving": {
        outlineColor: "var(--violet-8)"
      },
      "&.resizing": {
        outlineColor: "var(--violet-8)",
        minHeight: "min-content"
      },
      "& [data-brick-group]:hover": {
        outline: "1px dashed var(--violet-8)"
      },
      // Hide any UI children elements when dragging
      "&.moving [data-ui]": {
        display: "none"
      }
    })
  ];
}
function useSectionStyle({
  section,
  selected,
  editable,
  previewMode,
  isDropTarget
}) {
  const stylesProps = getStyleProperties(sectionProps);
  const classes = useClassesFromStyleProps(stylesProps, section);
  return tx(
    // @mobile:flex-col @desktop:flex-row
    "flex flex-wrap w-full @container/section group/section overflow-visible relative mx-auto max-sm:max-w-dvw",
    [
      Object.values(classes),
      section.props.maxWidth,
      typeof section.props.minHeight === "string" && section.props.minHeight !== "full" && `min-h-[${section.props.minHeight}]`,
      // full height
      section.props.minHeight === "full" && (editable ? "min-h-[calc(100dvh-60px)]" : "min-h-dvh"),
      css({
        "&:has([data-no-section-padding])": {
          // This is a hack to ensure that the navbar is not affected by the section's padding
          paddingInline: "0px !important",
          paddingBlock: "0px !important"
        }
      }),
      // Section editor styles
      getSectionEditorStyles({ editable, previewMode, selected, isDropTarget }),
      // Manage the section order using css "order" (flex) property
      css({
        order: section.order
      })
    ]
  );
}
function getSectionEditorStyles({ editable, selected, previewMode, isDropTarget }) {
  if (!editable) {
    return null;
  }
  return [
    "select-none relative outline-dashed outline-2 -outline-offset-2",
    !isDropTarget && !selected && "outline-transparent",
    selected || isDropTarget ? "outline-upstart-500/40" : "hover:outline-upstart-500/40",
    // this is the grid overlay shown when dragging
    previewMode && css`
      &:has(.moving), &:has(.moving) ~ section {
        & [data-floating-ui-portal] {
          display: none;
        }
        & .resizable-handle {
          display: none;
        }
      }`
  ];
}
const sectionDefaultProps = getSchemaDefaults(sectionProps);
function useClassesFromStyleProps(stylesProps, section) {
  const { props, mobileProps } = section;
  const pageAttributes = usePageAttributes();
  const mergedProps = merge({}, sectionDefaultProps, props);
  const filtered = Object.entries(stylesProps).reduce((acc, [key, value]) => {
    const manifestField = get$1(sectionProps.properties, key);
    if (manifestField) {
      const resolvedField = resolveSchema(manifestField);
      if (resolvedField.metadata?.filter) {
        const filter = resolvedField.metadata.filter;
        if (!filter(resolvedField, mergedProps, pageAttributes)) {
          acc.push(key);
        }
      }
    }
    return acc;
  }, []);
  const classes = Object.entries(stylesProps).reduce(
    (acc, [path, styleId]) => {
      const helper = brickStylesHelpersMap[styleId] ?? brickWrapperStylesHelpersMap[styleId];
      if (!helper) {
        console.warn("No helper found for styleId", styleId);
        return acc;
      }
      if (filtered.includes(path)) {
        console.warn("Filtered out section path", path);
        return acc;
      }
      const part = extractStylePath(path);
      acc[part] = acc[part] ?? [];
      const resolvedProps = get$1(mergedProps, path);
      const resolvedMobileProps = get$1(mobileProps, path);
      const schema = get$1(sectionProps.properties, path);
      acc[part].push(
        // @ts-expect-error
        tx(helper?.(resolvedProps, resolvedMobileProps, schema))
      );
      return acc;
    },
    {}
  );
  return classes;
}
export {
  BrickComponent as B,
  usePageStyle as a,
  useBrickStyle as b,
  useBrickWrapperStyle as c,
  useSectionStyle as u
};
//# sourceMappingURL=use-section-style.DjjgfIQS.js.map
