"use client";
import { jsx as e, jsxs as B } from "react/jsx-runtime";
import R from "../add-new-section.js";
import E from "../editor-render-content.js";
import { FrameContextManager as N } from "../frame-context-manager.js";
import { RenderFrame as W } from "../render-frame.js";
import { ErrorFallback as $ } from "../../shared/error-fallback.js";
import { BuilderConfiguration as F } from "../../../config/builder.config.js";
import { useAppDispatch as O } from "../../../hooks/use-app-dispatch.js";
import { useAppSelector as o } from "../../../hooks/use-app-selector.js";
import { unselectBlock as j } from "../../../store/builder-slice.js";
import { getContent as L, getActiveThemeSettings as M, getCurrentBreakpoint as P, getCurrentLocale as D } from "../../../../../../store/selectors.js";
import { Breakpoint as H } from "../../../types/responsive.js";
import { classNames as p } from "../../../../../../utils.js";
import { useRef as I, useState as T, useMemo as z, useEffect as K } from "react";
import { ErrorBoundary as U } from "../../../../../../node_modules/.pnpm/react-error-boundary@5.0.0_react@19.0.0/node_modules/react-error-boundary/dist/react-error-boundary.esm.js";
import { EditorAssetManager as q } from "../editor-asset-manager.js";
import "../../../store/theme-slice.js";
import "../../../../../../_virtual/cjs.js";
import { useAction as G } from "../../../hooks/use-action.js";
const fe = () => {
  const i = o(L), l = o(M), { isLeftPanelOpen: f, activeRightPanel: d } = G(), s = o(P), a = o(D), { previewWidth: t } = F.getBreakpoint(s), n = I(null), [u, m] = T({}), h = O(), g = () => {
    h(j());
  }, w = z(() => ({ locale: a }), [a]);
  return K(() => {
    if (!n.current) return;
    const x = n.current, c = new ResizeObserver((v) => {
      const S = v[0].target, { width: b, height: y } = window.getComputedStyle(S), C = parseInt(b, 10), k = parseInt(y, 10), r = C / t, A = k / r;
      if (r > 1) {
        m({
          width: "100%",
          minWidth: `${t}px`,
          height: "100%"
        });
        return;
      }
      m({
        width: `${t}px`,
        height: `${A}px`,
        transform: r > 1 ? "scale(1)" : `scale(${r})`,
        transformOrigin: "top left"
      });
    });
    return c.observe(x), () => {
      c.disconnect();
    };
  }, [t]), /* @__PURE__ */ e(
    "div",
    {
      className: p(
        "relative flex grow justify-center bg-gray-100 p-4 transition-all duration-300",
        f ? "ms-[290px]" : "ms-0",
        d ? "me-[290px]" : "me-0"
      ),
      children: /* @__PURE__ */ e(U, { fallbackRender: $, children: /* @__PURE__ */ e(
        "div",
        {
          className: p(
            "transition-width relative flex h-full w-full border border-gray-200 shadow-sm duration-300"
          ),
          onClick: g,
          ref: n,
          style: {
            width: s === H.DESKTOP ? "100%" : `${t}px`
          },
          children: /* @__PURE__ */ e(W, { className: "absolute mx-auto", style: u, children: /* @__PURE__ */ B(N, { children: [
            /* @__PURE__ */ e(E, { content: i, meta: w }),
            /* @__PURE__ */ e(R, { className: "p-10" }),
            /* @__PURE__ */ e(q, { content: i, themeSettings: l })
          ] }) })
        }
      ) })
    }
  );
};
export {
  fe as CanvasArea
};
//# sourceMappingURL=canvas-area.js.map
