import {
  Fab,
  MdFullscreen,
  Phone,
  Share,
  Tablet,
  ToggleButton,
  ToggleButtonGroup,
  Tv
} from "./chunk-chunk-I3IRTDHL.mjs";
import {
  MotionConfig,
  createDomMotionComponent
} from "./chunk-chunk-AUDPAVZ7.mjs";
import {
  createRoot
} from "./chunk-chunk-VBXYEQ4D.mjs";
import {
  Fragment,
  jsx,
  jsxs
} from "./chunk-chunk-UXTPUCZZ.mjs";
import {
  css
} from "./chunk-chunk-IED4JNFA.mjs";
import "./chunk-chunk-LTSGBJ7N.mjs";
import "./chunk-chunk-5EZCS5NB.mjs";
import {
  D,
  M,
  h,
  init_compat_module,
  y2 as y
} from "./chunk-chunk-E4NYPI5M.mjs";
import {
  __name,
  init_define_process
} from "./chunk-chunk-5RXWZEI4.mjs";

// src/renderPreviewWindow.tsx
init_define_process();
init_compat_module();

// src/DraggableWindow.tsx
init_define_process();
init_compat_module();

// src/Qr.lazy.tsx
init_define_process();
init_compat_module();
var LQR = M(() => import("./chunk-Qr-CWUB7LQS.mjs"));
var QRButton = /* @__PURE__ */ __name(({ url }) => /* @__PURE__ */ jsx(D, { fallback: /* @__PURE__ */ jsx("div", { children: "qr" }), children: /* @__PURE__ */ jsx(LQR, { url }) }), "QRButton");

// src/DraggableWindow.tsx
var motion = {
  div: createDomMotionComponent("div")
};
var breakPoints = [
  innerWidth < 750 ? innerWidth : 750,
  innerWidth < 1025 && innerWidth > 750 ? innerWidth : 1024,
  innerWidth > 1024 ? innerWidth : 1920
];
var sizes = [10, 25, 50, 75, 100];
var DraggableWindow = /* @__PURE__ */ __name(({
  // OnRestore,
  children,
  codeSpace
  // HashCode,
}) => {
  const [scaleRange, changeScaleRange] = h(100);
  const [delay, _setDelay] = h(2);
  const maxScaleRange = 100;
  const startPositions = { bottom: 0, right: 0 };
  const [{ bottom, right }, setPositions] = h(startPositions);
  const [width, setWidth] = h(innerWidth);
  const scale = scaleRange / 100;
  y(() => {
    const reveal2 = /* @__PURE__ */ __name(() => {
      changeScaleRange(Math.min(50, 50 / 1 / (1 / devicePixelRatio)));
      setWidth(innerWidth);
      setPositions({
        bottom: 20,
        right: 20
      });
      setTimeout(() => {
        _setDelay(0);
      }, 2e3);
    }, "reveal");
    setTimeout(() => {
      reveal2();
    }, 2e3);
  }, []);
  const bgColor = getComputedStyle(
    document.body,
    null
  ).getPropertyValue("background-color").slice(4, -1).split(",").slice(0, 4).map((x) => Number(x) || 0);
  const [bg, setBG] = h(bgColor);
  const [r, g, b, a] = bg;
  const rgba = /* @__PURE__ */ __name((r2, g2, b2, a2) => `rgba(${r2},${g2},${b2},${a2})`, "rgba");
  y(() => {
    const intervalHandler = setInterval(() => {
      const bgColor2 = getComputedStyle(
        document.body,
        null
      ).getPropertyValue("background-color").slice(4, -1).split(",").slice(0, 4).map((x) => Number(x) || 0);
      if (JSON.stringify(bg) !== JSON.stringify(bgColor2))
        setBG(bgColor2);
    }, 1e3 / 2);
    return () => clearInterval(intervalHandler);
  }, []);
  const duration = sessionStorage && Number(sessionStorage.getItem("duration")) || 1;
  const type = (sessionStorage == null ? void 0 : sessionStorage.getItem("type")) || "spring";
  return /* @__PURE__ */ jsx(MotionConfig, { transition: { delay, type, duration }, children: /* @__PURE__ */ jsx(
    motion.div,
    {
      layout: true,
      initial: {
        padding: 0,
        top: 0,
        right: 0,
        backgroundColor: "rgba(0, 0,0, 0)",
        borderRadius: 0
      },
      animate: {
        padding: 8,
        top: bottom,
        right,
        backgroundColor: `${rgba(r | 96, g | 66, b || 160, a || 0.7)}`,
        borderRadius: 16
      },
      css: css`
          z-index: 10;
          backdrop-filter: blur(15px);
          position: fixed;
        `,
      drag: true,
      dragMomentum: false,
      dragConstraints: {
        left: -innerWidth,
        right: width - 20 - width / 6,
        bottom: innerHeight
      },
      dragElastic: 0.5,
      children: /* @__PURE__ */ jsxs("div", { style: { display: "flex" }, children: [
        /* @__PURE__ */ jsxs(
          "div",
          {
            css: css`
              display: flex;
              width: 100%;
              flex-direction: column;
              align-items: center;
            `,
            children: [
              /* @__PURE__ */ jsx(
                motion.div,
                {
                  layout: true,
                  css: css`
                overflow: hidden;
                display: flex;
                justify-content: space-evenly;
              `,
                  initial: { height: 0, width: 0 },
                  animate: {
                    height: "42px",
                    width: "100%"
                  },
                  children: /* @__PURE__ */ jsx(
                    ToggleButtonGroup,
                    {
                      value: scaleRange,
                      size: "small",
                      exclusive: true,
                      onChange: (_e, newScale) => {
                        newScale && changeScaleRange(newScale);
                      },
                      children: Array.from((/* @__PURE__ */ new Set([
                        ...sizes.filter((x) => x < maxScaleRange),
                        scaleRange,
                        maxScaleRange
                      ])).values()).sort((a2, b2) => a2 - b2).map((size) => /* @__PURE__ */ jsx(
                        ToggleButton,
                        {
                          value: size,
                          children: /* @__PURE__ */ jsxs(
                            "span",
                            {
                              css: css`
                       color: ${size === scaleRange ? "var(--text-color-highlight)" : "var(--text-color-normal)"};
                       `,
                              children: [
                                size,
                                "%"
                              ]
                            }
                          )
                        },
                        `${size}`
                      ))
                    }
                  )
                }
              ),
              /* @__PURE__ */ jsx(
                motion.div,
                {
                  transition: { scale: { type: "spring" } },
                  css: css`
                display: block;
                 border-radius: 8px;
                 background-color: ${rgba(r, g, b, 0.7)};
               `,
                  initial: {
                    height: window.innerHeight,
                    width: window.innerWidth
                  },
                  animate: {
                    height: window.innerHeight * scale,
                    width: window.innerWidth * scale
                  },
                  children: /* @__PURE__ */ jsx(
                    motion.div,
                    {
                      transition: {
                        zoom: { type: "spring" }
                      },
                      css: css`
              transform-origin:top left;
                
                display: inline-block;
                height:  100%; 
                 width: 100%; 
                 border-radius: 8px;
                 background-color: ${rgba(r, g, b, 0.7)};
                 overflow: hidden;
                 
               `,
                      initial: {
                        scale: 1
                      },
                      animate: {
                        height: window.innerHeight,
                        width: window.innerWidth,
                        scale: 1 * scale
                      },
                      children
                    }
                  )
                }
              ),
              /* @__PURE__ */ jsx(
                motion.div,
                {
                  layout: true,
                  css: css`
              overflow: hidden;
              display: flex;
              justify-content: space-evenly;`,
                  initial: { height: "0px", width: "0%" },
                  animate: {
                    height: "42px",
                    width: "100%"
                  },
                  children: /* @__PURE__ */ jsx(
                    ToggleButtonGroup,
                    {
                      value: width,
                      size: "small",
                      exclusive: true,
                      onChange: (_e, newSize) => {
                        if (newSize) {
                          setWidth(newSize);
                        }
                      },
                      children: breakPoints.map((size) => /* @__PURE__ */ jsx(
                        ToggleButton,
                        {
                          value: size,
                          children: size === breakPoints[0] ? /* @__PURE__ */ jsx(
                            "span",
                            {
                              css: css`
                        color: ${width === breakPoints[0] ? "var(--text-color-highlight)" : "var(--text-color-normal)"};
                        `,
                              children: /* @__PURE__ */ jsx(Phone, {})
                            }
                          ) : size === breakPoints[1] ? /* @__PURE__ */ jsx(
                            "span",
                            {
                              css: css`
                        color: ${width === breakPoints[1] ? "var(--text-color-highlight)" : "var(--text-color-normal)"};
                        `,
                              children: /* @__PURE__ */ jsx(Tablet, {})
                            }
                          ) : /* @__PURE__ */ jsx(
                            "span",
                            {
                              css: css`
                        color: ${width === breakPoints[2] ? "var(--text-color-highlight)" : "var(--text-color-normal)"};
                      `,
                              children: /* @__PURE__ */ jsx(Tv, {})
                            }
                          )
                        },
                        `${size}`
                      ))
                    }
                  )
                }
              )
            ]
          }
        ),
        /* @__PURE__ */ jsx(
          motion.div,
          {
            layout: true,
            css: css`overflow: hidden;`,
            initial: { height: "0%", width: "0px" },
            animate: { height: "100%", width: "88px" },
            children: /* @__PURE__ */ jsxs(
              "div",
              {
                css: css`
              padding: 16px;
              display: flex;
              overflow: "hidden";
              align-items: center;          
              flex-direction: column;
              `,
                children: [
                  /* @__PURE__ */ jsx(
                    Fab,
                    {
                      onClick: () => {
                        var _a;
                        (_a = document.querySelector("#root")) == null ? void 0 : _a.requestFullscreen();
                      },
                      children: /* @__PURE__ */ jsx(
                        "span",
                        {
                          css: css`
                font-size: 20pt;
              `,
                          children: /* @__PURE__ */ jsx(MdFullscreen, {}, "fs")
                        }
                      )
                    },
                    "fullscreen"
                  ),
                  /* @__PURE__ */ jsx(
                    QRButton,
                    {
                      url: `${location.origin}/live/${codeSpace}/public`
                    }
                  ),
                  /* @__PURE__ */ jsx(
                    Fab,
                    {
                      onClick: () => open(`/live/${codeSpace}/public`),
                      children: /* @__PURE__ */ jsx(Share, {})
                    },
                    "Share"
                  )
                ]
              }
            )
          }
        )
      ] })
    }
  ) });
}, "DraggableWindow");
var DraggableWindow_default = DraggableWindow;

// src/renderPreviewWindow.tsx
import { swVersion } from "/swVersion.mjs";
var reveal = /* @__PURE__ */ __name((_tmp) => {
}, "reveal");
var RainbowContainer = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx(
  "div",
  {
    css: css`
height: 100%;
width: 100%;
background-blend-mode: overlay;
background:  repeating-radial-gradient(circle at bottom left, 
              #fedc00 0, #fedc00 5.5555555556%, 
              #fcb712 0, #fcb712 11.1111111111%, 
              #f7921e 0, #f7921e 16.6666666667%, 
            #e87f24 0, #e87f24 22.2222222222%, 
            #dd6227 0, #dd6227 27.7777777778%,
             #dc4c27 0, #dc4c27 33.3333333333%, 
            #ca3435 0, #ca3435 38.8888888889%, 
            #b82841 0, #b82841 44.4444444444%, 
            #953751 0, #953751 50%, #364c88 0, 
            #364c88 55.5555555556%, #16599d 0, 
            #16599d 61.1111111111%, #02609e 0, 
            #02609e 66.6666666667%, #0073a9 0, 
            #0073a9 72.2222222222%, #008aa4 0, 
            #008aa4 77.7777777778%, #239a87 0, 
            #239a87 83.3333333333%, #7cba6d 0, 
            #7cba6d 88.8888888889%, #becc2f 0, 
            #becc2f 94.4444444444%, #e0d81d 0, 
            #e0d81d 100%), 
            repeating-radial-gradient(circle at bottom right, 
              #fedc00 0, #fedc00 5.5555555556%, 
              #fcb712 0, #fcb712 11.1111111111%, 
              #f7921e 0, #f7921e 16.6666666667%, 
              #e87f24 0, #e87f24 22.2222222222%, 
              #dd6227 0, #dd6227 27.7777777778%, 
              #dc4c27 0, #dc4c27 33.3333333333%, 
              #ca3435 0, #ca3435 38.8888888889%, 
              #b82841 0, #b82841 44.4444444444%, 
              #953751 0, #953751 50%,
               #364c88 0, #364c88 55.5555555556%, 
               #16599d 0, #16599d 61.1111111111%, 
               #02609e 0, #02609e 66.6666666667%, 
               #0073a9 0, #0073a9 72.2222222222%, 
               #008aa4 0, #008aa4 77.7777777778%,
                #239a87 0, #239a87 83.3333333333%, 
                #7cba6d 0, #7cba6d 88.8888888889%, 
                #becc2f 0, #becc2f 94.4444444444%, 
                #e0d81d 0, #e0d81d 100%);
`,
    children
  }
), "RainbowContainer");
var AppToRender = /* @__PURE__ */ __name(({ codeSpace }) => {
  const sp = new URLSearchParams(location.search);
  const onlyEdit = sp.has("edit");
  const [hideRest, setHideRest] = h(true);
  const Editor = M(() => import("./chunk-Editor-OPOTPOAP.mjs"));
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    onlyEdit ? null : /* @__PURE__ */ jsx(DraggableWindow_default, { codeSpace, children: /* @__PURE__ */ jsx(
      "iframe",
      {
        onLoad: () => reveal(setHideRest(false)),
        css: css`height: 100%; width: 100%; border: 0;`,
        src: `/live/${codeSpace}/?v=` + swVersion
      }
    ) }),
    hideRest ? null : /* @__PURE__ */ jsx(RainbowContainer, { children: /* @__PURE__ */ jsx(D, { fallback: /* @__PURE__ */ jsx(Fragment, {}), children: /* @__PURE__ */ jsx(
      Editor,
      {
        codeSpace
      }
    ) }) })
  ] });
}, "AppToRender");
var singleton = { started: false };
var renderPreviewWindow = /* @__PURE__ */ __name(async ({ codeSpace }) => {
  if (singleton.started)
    return;
  singleton.started = true;
  let rootEl = document.createElement("div");
  rootEl.style.opacity = "0";
  rootEl.style.height = "0px";
  const root = createRoot(rootEl);
  document.getElementById("root").appendChild(rootEl);
  reveal = /* @__PURE__ */ __name(() => {
    const re = document.getElementById("root");
    rootEl.style.height = "100%";
    re == null ? void 0 : re.removeChild(re.firstElementChild);
    rootEl.style.opacity = "1";
  }, "reveal");
  root.render(/* @__PURE__ */ jsx(AppToRender, { codeSpace }));
}, "renderPreviewWindow");
export {
  renderPreviewWindow
};
