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