import { j as e } from "./_virtual/jsx-runtime.js";
import { useEditorEnabled as $, useChatVisible as M, usePanel as O, useEditorHelpers as W, useSelectedBrickId as q, useSelectedSectionId as F, useDebugMode as G } from "./use-editor.js";
import { lazy as l, useRef as E, useEffect as K, Suspense as m } from "react";
import { tw as U, css as h, tx as b } from "./packages/style-system/dist/twind.js";
import "./node_modules/.pnpm/@formkit_auto-animate@0.8.2/node_modules/@formkit/auto-animate/index.js";
import { Toaster as V } from "./node_modules/.pnpm/react-hot-toast@2.5.2_react-dom@18.3.0-canary-3d9b20132-20240124_react@18.3.0-canary-3d_c02c1e17bf76c343fd22d1f22394ecf5/node_modules/react-hot-toast/dist/index.js";
import { usePageAutoSave as X } from "./packages/components/src/editor/hooks/use-page-autosave.js";
import { getThemeCss as Y } from "./get-theme-css.js";
import { useEditorHotKeys as _ } from "./packages/components/src/editor/hooks/use-editor-hot-keys.js";
import J from "./packages/components/src/editor/components/ThemesPreviewList.js";
import Q from "./packages/components/src/editor/components/BlankWaitPage.js";
import { h as Z } from "./packages/sdk/dist/shared/chunk-NLEWXPVM.js";
import "@sinclair/typebox";
import "./packages/sdk/dist/shared/chunk-AQPN5SE2.js";
import "./packages/sdk/dist/shared/chunk-DQXDGV67.js";
import "./packages/sdk/dist/shared/chunk-7DMUDZ4H.js";
import "./packages/sdk/dist/shared/chunk-LSPN22SI.js";
import "./packages/sdk/dist/shared/chunk-ETYYRWLK.js";
import "./packages/sdk/dist/shared/chunk-4TH3C76A.js";
import "./packages/sdk/dist/shared/chunk-FKNNTHWX.js";
import "./packages/sdk/dist/shared/chunk-JS4K5JRM.js";
import "./packages/sdk/dist/shared/chunk-WU6Q4WYD.js";
import "./packages/sdk/dist/shared/chunk-QISTDGPP.js";
import "./packages/sdk/dist/shared/chunk-LFQZRGHS.js";
import "./packages/sdk/dist/shared/chunk-SLRU4CT6.js";
import "./packages/sdk/dist/shared/chunk-TTTXV7TJ.js";
import "./packages/sdk/dist/shared/chunk-UHF6IEKV.js";
import "./packages/sdk/dist/shared/chunk-LGP6GWIY.js";
import "./packages/sdk/dist/shared/chunk-X43MB5WD.js";
import "./packages/sdk/dist/shared/chunk-NNI225RG.js";
import "./packages/sdk/dist/shared/chunk-ZQGNYK5I.js";
import "./packages/sdk/dist/shared/chunk-KHFNN4P3.js";
import "./packages/sdk/dist/shared/chunk-BZGNY7LB.js";
import "./packages/sdk/dist/shared/chunk-IIFTGWFZ.js";
import { isEqual as D } from "lodash-es";
import "./packages/sdk/dist/shared/chunk-UU2MSQXY.js";
import "./packages/sdk/dist/shared/chunk-T3LIA4YB.js";
import "./packages/sdk/dist/shared/chunk-YBGPPF7T.js";
import "./packages/sdk/dist/shared/chunk-UMHXXXVP.js";
import "./packages/sdk/dist/shared/chunk-5N6MBJJ4.js";
import { useIsLocalDev as ee } from "./packages/components/src/editor/hooks/use-is-local-dev.js";
import { useDraft as te, useSections as re, useThemes as oe, useGenerationState as ie, useDraftHelpers as T } from "./use-page-data.js";
import { DragDropProvider as se } from "./node_modules/.pnpm/@dnd-kit_react@0.1.21_react-dom@18.3.0-canary-3d9b20132-20240124_react@18.3.0-canary-3d_d5e73c0d556c94305a83c95cc0a8798b/node_modules/@dnd-kit/react/index.js";
import { move as ae } from "./node_modules/.pnpm/@dnd-kit_helpers@0.1.21/node_modules/@dnd-kit/helpers/dist/index.js";
import ne from "./packages/components/src/editor/components/Modal.js";
import le from "./packages/components/src/editor/hooks/use-beforeunload.js";
import { Switch as ce } from "./node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/switch.js";
import { Button as C } from "./node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/button.js";
const de = l(() => import("./packages/components/src/editor/components/Tour.js")), me = l(() => import("./packages/components/src/editor/components/NavBar.js")), pe = l(() => import("./packages/components/src/editor/components/Chat.js")), ue = l(() => import("./packages/components/src/editor/components/EditablePage.js")), fe = l(() => import("./Page.js")), w = l(() => import("./packages/components/src/editor/components/DeviceFrame.js")), ge = l(() => import("./packages/components/src/editor/components/Panel.js"));
function ut(c) {
  const f = E(null), i = te(), N = $(), P = M(), v = re(), { panelPosition: R } = O(), S = oe(), a = ie(), d = T(), { setDraggingBrickType: B, toggleDebugMode: A, hidePanel: he } = W(), I = q(), z = F(), L = ee(), y = G(), p = E(null);
  return X(), _(), le(() => !!i.dirty, "You have unsaved changes. Are you sure you want to leave?"), K(() => {
    const o = i.previewTheme ?? i.theme;
    o && U(h(Y(o)));
  }, [i.previewTheme, i.theme]), N ? /* @__PURE__ */ e.jsx(
    se,
    {
      onDragStart: (o, g) => {
        const { operation: t } = o;
        if (t.source?.type === "library") {
          const r = t.source.data.manifest.type;
          B(r);
          return;
        }
        if (console.log(`Started dragging ${t.source?.id}`), t.source?.id) {
          const r = document.getElementById(t.source.id);
          if (!r)
            return;
          console.log(`adding class ${t.source.id}`), r?.classList.add("moving"), r.style.setProperty("box-shadow", "0 4px 8px rgba(0, 0, 0, 0.2)", "important"), r.style.setProperty("outline", "2px solid var(--violet-8)", "important"), r.style.setProperty("outline-offset", "0px", "important"), window.getComputedStyle(r).getPropertyValue("background-color") === "rgba(0, 0, 0, 0)" && (console.log("Changing background color to upstart-200"), r.style.setProperty("background-color", "var(--violet-a5)", "important"));
        }
      },
      onDragOver: (o, g) => {
        const { operation: t } = o, r = t.source?.type === "library";
        if (t.canceled || !t.target)
          return;
        if (t.target?.data?.manifest?.isContainer && t.activatorEvent?.metaKey) {
          console.log("operation.activatorEvent", t.activatorEvent), console.error("Dropping over a container, disable reordering"), o.preventDefault();
          return;
        }
        const u = v.reduce(
          (s, x) => (s[x.id] = x.bricks.filter((n) => !d.getParentBrick(n.id)).map((n) => n.id), s),
          {}
        );
        r && (u.$library$ = p.current ? [] : [t.source.id]);
        const j = ae(u, o);
        if (D(u, j))
          console.debug("Items are equal, no changes made");
        else
          for (const s of v)
            if (!D(u[s.id], j[s.id])) {
              console.log("Rebuilding section", s.id);
              const x = {
                ...s,
                bricks: j[s.id].map((n, H) => {
                  if (r && n === t.source.id && !d.getBrick(n)) {
                    const k = Z(t.source.data?.manifest.type, !0);
                    return p.current = k.id, d.addBrick(k, s.id, H, null), k;
                  }
                  return d.getBrick(n);
                })
              };
              d.updateSection(s.id, x);
            }
      },
      onDragEnd: (o) => {
        console.log("Ended dragging", o);
        const {
          operation: { source: g }
        } = o;
        p.current && d.updateBrickProps(p.current, { ghost: !1 }), B(null), p.current = null, g?.id && setTimeout(() => {
          const t = document.getElementById(g.id);
          t && (t.classList.remove("moving"), t.style.removeProperty("box-shadow"), t.style.removeProperty("outline"), t.style.removeProperty("outline-offset"), t.style.removeProperty("background-color"));
        }, 200);
      },
      children: /* @__PURE__ */ e.jsxs(
        "div",
        {
          id: "editor",
          className: b(
            "grid relative transition-all mx-auto w-full",
            xe(a, P),
            "min-h-[100dvh] max-h-[100dvh]",
            a.isReady === !1 && h({
              background: `linear-gradient(120deg,
              oklab(from #9291e7 l a b / 0.65),
              oklab(from #7270c6 l a b / 0.65),
              oklab(from #c050c2 l a b / 0.65),
              oklab(from #ef50a2 l a b / 0.65),
              oklab(from #ff6285 l a b / 0.65),
              oklab(from #ff806b l a b / 0.65),
              oklab(from #ffa25a l a b / 0.65),
              oklab(from #ffc358 l a b / 0.65)
          )`
            }),
            a.isReady === !1 && "transition-all duration-500 ease-in-out"
          ),
          ...c,
          ref: f,
          children: [
            v.length > 0 && a.isReady && /* @__PURE__ */ e.jsx(m, { children: /* @__PURE__ */ e.jsx(de, {}) }),
            /* @__PURE__ */ e.jsx(m, { children: /* @__PURE__ */ e.jsx(me, {}) }),
            P && /* @__PURE__ */ e.jsx(m, { children: /* @__PURE__ */ e.jsx(pe, {}) }),
            /* @__PURE__ */ e.jsxs(m, { children: [
              /* @__PURE__ */ e.jsx(ne, {}),
              /* @__PURE__ */ e.jsx(ge, {})
            ] }),
            /* @__PURE__ */ e.jsxs(
              "main",
              {
                className: b(
                  "flex-1 flex place-content-center z-40 overflow-x-auto overscroll-none",
                  a.isReady === !1 && "!hidden",
                  h({
                    gridArea: "main",
                    scrollbarColor: "var(--violet-4) var(--violet-2)",
                    scrollBehavior: "smooth",
                    scrollbarGutter: "stable",
                    scrollbarWidth: R === "left" ? "thin" : "none",
                    "&:hover": {
                      scrollbarColor: "var(--violet-7) var(--violet-3)"
                    }
                  })
                ),
                children: [
                  a.isReady && /* @__PURE__ */ e.jsx(m, { children: /* @__PURE__ */ e.jsxs(w, { children: [
                    /* @__PURE__ */ e.jsx(ue, {}),
                    i.previewTheme && /* @__PURE__ */ e.jsx(be, {})
                  ] }) }),
                  !a.isReady && (S.length > 0 ? /* @__PURE__ */ e.jsx(w, { children: /* @__PURE__ */ e.jsx(J, { themes: S }) }) : /* @__PURE__ */ e.jsx(w, { children: /* @__PURE__ */ e.jsx(Q, {}) })),
                  /* @__PURE__ */ e.jsx(
                    V,
                    {
                      toastOptions: {
                        position: "bottom-center",
                        style: {
                          background: "rgba(0, 0, 0, 0.85)",
                          color: "white",
                          fontSize: "0.85rem",
                          fontWeight: "500"
                          // marginBottom: "1rem",
                        },
                        className: b("last:mb-1 px-1 py-1 rounded-lg"),
                        error: {
                          style: {
                            background: "#880808"
                          }
                        }
                      }
                    }
                  ),
                  L && /* @__PURE__ */ e.jsxs(
                    "div",
                    {
                      className: "fixed flex max-w-[548px] items-center divide-x divide-gray-300 bottom-0 right-6 p-2 text-xs text-gray-500 bg-gray-100 dark:bg-dark-800 z-[19999] rounded-t-md",
                      style: {
                        // Shadow to the top left corner
                        boxShadow: "0 -2px 4px rgba(0, 0, 0, 0.1), -2px 0 4px rgba(0, 0, 0, 0.1)"
                      },
                      children: [
                        /* @__PURE__ */ e.jsxs("div", { className: "px-2", children: [
                          "Selected brick: ",
                          I ?? "none"
                        ] }),
                        /* @__PURE__ */ e.jsxs("div", { className: "px-2", children: [
                          "Selected section: ",
                          z ?? "none"
                        ] }),
                        /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 px-2", children: [
                          /* @__PURE__ */ e.jsx(ce, { defaultChecked: y, onCheckedChange: A, size: "1", id: "debug-mode" }),
                          /* @__PURE__ */ e.jsxs("label", { htmlFor: "debug-mode", className: "cursor-pointer select-none", children: [
                            "Debug mode",
                            " ",
                            /* @__PURE__ */ e.jsx("b", { className: b("font-semibold", y ? "text-upstart-600" : "text-gray-500"), children: y ? "on" : "off" })
                          ] })
                        ] })
                      ]
                    }
                  )
                ]
              }
            )
          ]
        }
      )
    }
  ) : /* @__PURE__ */ e.jsx("div", { className: "@container", children: /* @__PURE__ */ e.jsx(m, { children: /* @__PURE__ */ e.jsx(
    fe,
    {
      page: {
        ...i,
        attributes: i.pageAttributes
      },
      site: { ...i, attributes: i.siteAttributes }
    }
  ) }) });
}
function xe(c, f) {
  return h({
    gridTemplateAreas: f ? '"navbar navbar" "chat main"' : '"navbar" "main"',
    gridTemplateRows: "64px 1fr",
    gridTemplateColumns: c.isReady === !1 ? "1fr 0px" : f ? "360px 1fr" : "1fr"
    // maxWidth: generationState.isReady === false ? "clamp(500px, 40dvw, 650px)" : "none",
  });
}
function be() {
  const { validatePreviewTheme: c } = T();
  return /* @__PURE__ */ e.jsx("div", { className: "fixed bottom-0 left-0 right-0 flex justify-center items-center z-[9999]", children: /* @__PURE__ */ e.jsxs("div", { className: "p-3 pb-2 bg-black/70 backdrop-blur-md rounded-t-lg max-w-fit flex gap-2 shadow-xl", children: [
    /* @__PURE__ */ e.jsx(C, { variant: "solid", color: "gray", onClick: () => c(!1), children: "Revert" }),
    /* @__PURE__ */ e.jsx(C, { onClick: () => c(!0), variant: "solid", children: "Accept theme" })
  ] }) });
}
export {
  ut as default
};
//# sourceMappingURL=Editor.js.map
