@janbox/storefront-builder 1.0.0

package/dist/editor.js

@@ -0,0 +1,867 @@
+import { b as E, g as x, a as e, c as b, d as ie, j as i, N as R, B as z, F as _, e as le, f as ae, u as C, W as ce, h as de, i as $, k as we, P as he } from "./countdown-timer.node-CTPWHLr7.js";
+import { a as ue, b as A, c as S, D as pe, d as me, W as p, e as k, f as ge, g as fe, h as G, i as U, j as ke, k as be, l as F, m as ve, n as D, o as H, F as Ce, A as q, p as xe, C as Z, q as Q, r as Ne, s as ye, T as Le, t as V, R as Se } from "./index-CY7cmOMU.js";
+import { v as Ft } from "./index-CY7cmOMU.js";
+import je from "mitt";
+import { createContext as X, useRef as K, useState as j, useEffect as N, createElement as Y, Fragment as L, Suspense as Ee } from "react";
+import { useToggle as J } from "usehooks-ts";
+import { Global as ee, CacheProvider as Me, createElement as De } from "@emotion/react";
+import { useFloating as We, autoUpdate as Ae, flip as Ie, size as Re, useHover as ze, safePolygon as Fe, useFocus as He, useDismiss as Ve, useRole as Te, useInteractions as Pe, FloatingPortal as te } from "@floating-ui/react";
+import { flatten as Be } from "flat";
+import { flatMap as Oe, throttle as _e, isFunction as T, isNumber as P } from "lodash-es";
+import $e, { useFrame as Ge } from "react-frame-component";
+import { Layers as Ue, useLayer as qe } from "@craftjs/layers";
+import { useNode as Ze, ROOT_NODE as W } from "@craftjs/core";
+const oe = "en", Qe = X(oe), M = (s, t = !0) => {
+  const r = `--text-${s}--{{property}}`, o = t ? `var(${r})` : r;
+  return {
+    fontSize: o.replace("{{property}}", "font-size"),
+    lineHeight: o.replace("{{property}}", "line-height")
+  };
+}, Xe = X(null), Ke = ({ theme: s, children: t, locale: r = oe }) => /* @__PURE__ */ E.jsxs(Xe.Provider, { value: s, children: [
+  /* @__PURE__ */ E.jsx(ee, { styles: Ye(s) }),
+  /* @__PURE__ */ E.jsx(Qe.Provider, { value: r, children: t })
+] }), Ye = ({ palette: s, typography: t }) => {
+  const r = Be(s), o = Object.fromEntries(
+    Object.keys(r).map((n) => [x(n, !1), r[n]])
+  ), w = Object.fromEntries(
+    Oe(
+      Object.keys(t).map((n) => {
+        const d = M(n, !1), { fontSize: l, lineHeight: a } = t[n];
+        return [
+          [d.fontSize, l],
+          [d.lineHeight, a]
+        ];
+      })
+    )
+  );
+  return {
+    // ─── Reset / Preflight ───────────────────────────────────────────────────
+    // 1. Prevent padding and border from affecting element width.
+    // 2. Allow adding a border to an element by just adding a border-width.
+    "*, ::before, ::after": {
+      boxSizing: "border-box",
+      // 1
+      borderWidth: 0,
+      // 2
+      borderStyle: "solid",
+      // 2
+      borderColor: x("border.default")
+    },
+    // 1. Use a consistent sensible line-height in all browsers.
+    // 2. Prevent adjustments of font size after orientation changes in iOS.
+    // 3. Use a more readable tab size.
+    // 4. Use the user's configured `sans` font-family by default.
+    // 5. Use the user's configured `sans` font-feature-settings by default.
+    // 6. Use the user's configured `sans` font-variation-settings by default.
+    // 7. Disable tap highlights on iOS
+    "html, :host": {
+      lineHeight: 1.5,
+      // 1
+      WebkitTextSizeAdjust: "100%",
+      // 2
+      MozTabSize: 4,
+      // 3
+      tabSize: 4,
+      // 3
+      fontFamily: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+      // 4
+      fontFeatureSettings: "normal",
+      // 5
+      fontVariationSettings: "normal",
+      // 6
+      WebkitTapHighlightColor: "transparent"
+      // 7
+    },
+    // 1. Remove the margin in all browsers.
+    // 2. Inherit line-height from `html` — overridden below by app-level typography.
+    body: {
+      margin: 0,
+      // 1
+      // ─── App-level styles ───────────────────────────────────────────
+      display: "flex",
+      flexDirection: "column",
+      minHeight: "100dvh",
+      color: x("neutral.600"),
+      backgroundColor: x("background.default"),
+      fontSize: M("sm").fontSize,
+      lineHeight: M("sm").lineHeight
+    },
+    // 1. Add the correct height in Firefox.
+    // 2. Correct the inheritance of border color in Firefox.
+    // 3. Ensure horizontal rules are visible by default.
+    hr: {
+      height: 0,
+      // 1
+      color: "inherit",
+      // 2
+      borderTopWidth: "1px"
+      // 3
+    },
+    // Add the correct text decoration in Chrome, Edge, and Safari.
+    "abbr:where([title])": {
+      textDecoration: "underline dotted"
+    },
+    // Remove the default font size and weight for headings.
+    "h1, h2, h3, h4, h5, h6": {
+      fontSize: "inherit",
+      fontWeight: "inherit"
+    },
+    // Reset links to optimize for opt-in styling instead of opt-out.
+    a: {
+      color: "inherit",
+      textDecoration: "inherit"
+    },
+    // Add the correct font weight in Edge and Safari.
+    "b, strong": {
+      fontWeight: "bolder"
+    },
+    // 1. Use the user's configured `mono` font-family by default.
+    // 2. Use the user's configured `mono` font-feature-settings by default.
+    // 3. Use the user's configured `mono` font-variation-settings by default.
+    // 4. Correct the odd `em` font sizing in all browsers.
+    "code, kbd, samp, pre": {
+      fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+      // 1
+      fontFeatureSettings: "normal",
+      // 2
+      fontVariationSettings: "normal",
+      // 3
+      fontSize: "1em"
+      // 4
+    },
+    // Add the correct font size in all browsers.
+    small: {
+      fontSize: "80%"
+    },
+    // Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+    "sub, sup": {
+      fontSize: "75%",
+      lineHeight: 0,
+      position: "relative",
+      verticalAlign: "baseline"
+    },
+    sub: {
+      bottom: "-0.25em"
+    },
+    sup: {
+      top: "-0.5em"
+    },
+    // 1. Remove text indentation from table contents in Chrome and Safari.
+    // 2. Correct table border color inheritance in all Chrome and Safari.
+    // 3. Remove gaps between table borders by default.
+    table: {
+      textIndent: 0,
+      // 1
+      borderColor: "inherit",
+      // 2
+      borderCollapse: "collapse"
+      // 3
+    },
+    // 1. Change the font styles in all browsers.
+    // 2. Remove the margin in Firefox and Safari.
+    // 3. Remove default padding in all browsers.
+    "button, input, optgroup, select, textarea": {
+      fontFamily: "inherit",
+      // 1
+      fontFeatureSettings: "inherit",
+      // 1
+      fontVariationSettings: "inherit",
+      // 1
+      fontSize: "100%",
+      // 1
+      fontWeight: "inherit",
+      // 1
+      lineHeight: "inherit",
+      // 1
+      letterSpacing: "inherit",
+      // 1
+      color: "inherit",
+      // 1
+      margin: 0,
+      // 2
+      padding: 0
+      // 3
+    },
+    // Remove the inheritance of text transform in Edge and Firefox.
+    "button, select": {
+      textTransform: "none"
+    },
+    // 1. Correct the inability to style clickable types in iOS and Safari.
+    // 2. Remove default button styles.
+    "button, input:where([type='button']), input:where([type='reset']), input:where([type='submit'])": {
+      WebkitAppearance: "button",
+      // 1
+      backgroundColor: "transparent",
+      // 2
+      backgroundImage: "none"
+      // 2
+    },
+    // Use the modern Firefox focus style for all focusable elements.
+    ":-moz-focusring": {
+      outline: "auto"
+    },
+    // Remove the additional `:invalid` styles in Firefox.
+    ":-moz-ui-invalid": {
+      boxShadow: "none"
+    },
+    // Add the correct vertical alignment in Chrome and Firefox.
+    progress: {
+      verticalAlign: "baseline"
+    },
+    // Correct the cursor style of increment and decrement buttons in Safari.
+    "::-webkit-inner-spin-button, ::-webkit-outer-spin-button": {
+      height: "auto"
+    },
+    // 1. Correct the odd appearance in Chrome and Safari.
+    // 2. Correct the outline style in Safari.
+    "[type='search']": {
+      WebkitAppearance: "textfield",
+      // 1
+      outlineOffset: "-2px"
+      // 2
+    },
+    // Remove the inner padding in Chrome and Safari on macOS.
+    "::-webkit-search-decoration": {
+      WebkitAppearance: "none"
+    },
+    // 1. Correct the inability to style clickable types in iOS and Safari.
+    // 2. Change font properties to `inherit` in Safari.
+    "::-webkit-file-upload-button": {
+      WebkitAppearance: "button",
+      // 1
+      font: "inherit"
+      // 2
+    },
+    // Add the correct display in Chrome and Safari.
+    summary: {
+      display: "list-item"
+    },
+    // Removes the default spacing and border for appropriate elements.
+    "blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre": {
+      margin: 0
+    },
+    fieldset: {
+      margin: 0,
+      padding: 0
+    },
+    legend: {
+      padding: 0
+    },
+    "ol, ul, menu": {
+      listStyle: "none",
+      margin: 0,
+      padding: 0
+    },
+    // Reset default styling for dialogs.
+    dialog: {
+      padding: 0
+    },
+    // Prevent resizing textareas horizontally by default.
+    textarea: {
+      resize: "vertical"
+    },
+    // 1. Reset the default placeholder opacity in Firefox.
+    // 2. Set the default placeholder color to gray 400.
+    "input::placeholder, textarea::placeholder": {
+      opacity: 1,
+      // 1
+      color: x("neutral.400")
+    },
+    // Set the default cursor for buttons.
+    "button, [role='button']": {
+      cursor: "pointer"
+    },
+    // Make sure disabled buttons don't get the pointer cursor.
+    ":disabled": {
+      cursor: "default"
+    },
+    // 1. Make replaced elements `display: block` by default.
+    // 2. Add `vertical-align: middle` to align replaced elements more sensibly by default.
+    "img, svg, video, canvas, audio, iframe, embed, object": {
+      display: "block",
+      // 1
+      verticalAlign: "middle"
+      // 2
+    },
+    // Constrain images and videos to the parent width and preserve their intrinsic aspect ratio.
+    "img, video": {
+      maxWidth: "100%",
+      height: "auto"
+    },
+    // Make elements with the HTML hidden attribute stay hidden by default.
+    "[hidden]:where(:not([hidden='until-found']))": {
+      display: "none"
+    },
+    // ─── CSS Variables ───────────────────────────────────────────────────────
+    ":root": {
+      ...o,
+      ...w
+    }
+  };
+};
+class Je {
+  constructor() {
+    this.componentControls = /* @__PURE__ */ new Set();
+  }
+  /**
+   * Subscribe a component's internal `VisualElementDragControls` to the user-facing API.
+   *
+   * @internal
+   */
+  subscribe(t) {
+    return this.componentControls.add(t), () => this.componentControls.delete(t);
+  }
+  /**
+   * Start a drag gesture on every `motion` component that has this set of drag controls
+   * passed into it via the `dragControls` prop.
+   *
+   * ```jsx
+   * dragControls.start(e, {
+   *   snapToCursor: true
+   * })
+   * ```
+   *
+   * @param event - PointerEvent
+   * @param options - Options
+   *
+   * @public
+   */
+  start(t, r) {
+    this.componentControls.forEach((o) => {
+      o.start(t.nativeEvent || t, r);
+    });
+  }
+}
+const et = () => new Je();
+function tt() {
+  return ue(et);
+}
+const ne = ({ children: s, viewport: t, containerProps: r }) => {
+  const o = K(null), [{ theme: w }] = A(), [n, d] = j({
+    width: 0,
+    height: 0
+  });
+  N(() => {
+    const f = _e((I) => {
+      const y = I.at(0)?.target;
+      if (!y) return;
+      const { width: re, height: se } = y.getBoundingClientRect();
+      d(() => ({
+        width: re,
+        height: se
+      }));
+    }, 200), v = new ResizeObserver(f);
+    return o.current && v.observe(o.current), () => v.disconnect();
+  }, []);
+  const l = T(t?.width) ? t.width(n.width) : t?.width, a = T(t?.height) ? t.height(n.height) : t?.height, u = P(l) ? n.width / l : 1, h = P(a) ? n.height / a : 1, c = Math.min(u, h, 1), g = (a ?? n.height / c) || 0, m = (l ?? n.width / c) || 0;
+  return /* @__PURE__ */ e("div", { ...r, className: b("tw:w-full tw:h-full tw:p-2 tw:bg-ic-ink-1s", r?.className), children: /* @__PURE__ */ e("div", { className: b("tw:w-full tw:h-full tw:overflow-hidden tw:relative"), ref: o, children: /* @__PURE__ */ e(
+    "div",
+    {
+      style: {
+        transform: `scale(${c})`,
+        width: m,
+        height: g,
+        marginLeft: (n.width - m) / 2,
+        marginTop: (n.height - g) / 2
+      },
+      className: "tw:absolute",
+      children: /* @__PURE__ */ e(
+        $e,
+        {
+          sandbox: "allow-same-origin allow-scripts allow-popups allow-presentation",
+          allow: "autoplay; encrypted-media",
+          width: l ?? "100%",
+          height: a ?? "100%",
+          children: /* @__PURE__ */ e(ot, { theme: w, children: s })
+        }
+      )
+    }
+  ) }) });
+}, ot = ({ children: s, theme: t }) => {
+  const { document: r, window: o } = Ge(), [w, n] = j(!1), d = K(window.customElements.define.bind(window.customElements));
+  N(() => {
+    const a = d.current;
+    return o && (window.customElements.define = function(u, h, c) {
+      window.customElements.get(u) || o.customElements.define(u, h, c), a(u, h, c);
+    }), r?.head.replaceWith(document.head.cloneNode(!0)), n(!0), () => {
+      window.customElements.define = a;
+    };
+  }, [r, o]);
+  const l = ie({
+    key: "css",
+    container: r?.head
+  });
+  return w ? /* @__PURE__ */ e(_, { children: /* @__PURE__ */ i(Me, { value: l, children: [
+    /* @__PURE__ */ e(
+      ee,
+      {
+        styles: {
+          ".frame-content": {
+            display: "flex",
+            flexDirection: "column",
+            minHeight: "100vh",
+            justifyContent: "center"
+          },
+          [`& *[${R.DATA_NODE_DROP_TARGET}=${z.True}]`]: {
+            outlineWidth: 1,
+            outlineStyle: "solid",
+            outlineOffset: -1,
+            outlineColor: "green"
+          },
+          [`& *[${R.DATA_NODE_DROP_TARGET_ERROR}=${z.True}]`]: {
+            outlineColor: "red"
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ e(Ke, { theme: t, children: s })
+  ] }) }) : null;
+}, nt = ({ render: s }) => {
+  const { id: t, renderer: r } = Ze((n) => ({
+    resolvedId: ae(n),
+    renderer: le(n).renderer
+  })), {
+    queryParams: { mode: o }
+  } = S(), { isActive: w } = C((n, d) => ({
+    isActive: d.getEvent("selected").contains(t) && t !== W
+  }));
+  return r ? Y(r, { render: s }) : /* @__PURE__ */ i(L, { children: [
+    w && o === "full" && /* @__PURE__ */ i(L, { children: [
+      /* @__PURE__ */ e(pe, {}),
+      /* @__PURE__ */ e(me, {})
+    ] }),
+    s
+  ] });
+}, B = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 5L5 8L8 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 8H14C17.314 8 20 10.462 20 13.5V13.5C20 16.538 17.314 19 14 19H6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, rt = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 19.0004C11.158 19.0004 10.315 18.8224 9.496 18.5054" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.882 12.4678C18.99 15.9668 15.495 18.9998 12 18.9998" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.079 8.9209C19.77 9.7299 20.384 10.6119 20.882 11.5329C21.039 11.8239 21.039 12.1769 20.882 12.4679" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 19L19 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.77299 14.2271C8.54299 12.9971 8.54299 11.0021 9.77299 9.77211C11.003 8.54211 12.998 8.54211 14.228 9.77211" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.044 6.956C15.497 5.759 13.748 5 12 5C8.50499 5 5.00999 8.033 3.11799 11.533C2.96099 11.824 2.96099 12.177 3.11799 12.468C4.06399 14.217 5.40999 15.849 6.95599 17.045" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, st = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.11799 12.467C2.96099 12.176 2.96099 11.823 3.11799 11.532C5.00999 8.033 8.50499 5 12 5C15.495 5 18.99 8.033 20.882 11.533C21.039 11.824 21.039 12.177 20.882 12.468C18.99 15.967 15.495 19 12 19C8.50499 19 5.00999 15.967 3.11799 12.467Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.1213 9.87868C15.2929 11.0502 15.2929 12.9497 14.1213 14.1213C12.9497 15.2929 11.0502 15.2929 9.87866 14.1213C8.70709 12.9497 8.70709 11.0502 9.87866 9.87868C11.0502 8.70711 12.9497 8.70711 14.1213 9.87868" stroke="currentColor" stroke-width="1.4286" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, it = '<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class=""><path d="M9.75 3C8.50736 3 7.5 4.00736 7.5 5.25C7.5 5.66421 7.83579 6 8.25 6C8.66421 6 9 5.66421 9 5.25C9 4.83579 9.33579 4.5 9.75 4.5H13.75C14.1642 4.5 14.5 4.83579 14.5 5.25V14.75C14.5 15.1642 14.1642 15.5 13.75 15.5H9.75C9.33579 15.5 9 15.1642 9 14.75C9 14.3358 8.66421 14 8.25 14C7.83579 14 7.5 14.3358 7.5 14.75C7.5 15.9926 8.50736 17 9.75 17H13.75C14.9926 17 16 15.9926 16 14.75V5.25C16 4.00736 14.9926 3 13.75 3H9.75Z" fill="currentColor"></path><path d="M12.25 10.75C12.6642 10.75 13 10.4142 13 10C13 9.58579 12.6642 9.25 12.25 9.25L6.56066 9.25L7.53033 8.28033C7.82322 7.98744 7.82322 7.51256 7.53033 7.21967C7.23744 6.92678 6.76256 6.92678 6.46967 7.21967L4.21967 9.46967C4.07902 9.61032 4 9.80109 4 10C4 10.1989 4.07902 10.3897 4.21967 10.5303L6.46967 12.7803C6.76256 13.0732 7.23744 13.0732 7.53033 12.7803C7.82322 12.4874 7.82322 12.0126 7.53033 11.7197L6.56066 10.75H12.25Z" fill="currentColor"></path></svg>', O = je(), lt = () => {
+  const {
+    queryParams: { mode: s, screen: t },
+    setQueryParams: r
+  } = S(), { actions: o, canRedo: w, canUndo: n } = C((h, c) => ({
+    enabled: h.options.enabled,
+    canUndo: c.history.canUndo(),
+    canRedo: c.history.canRedo()
+  })), d = (h) => {
+    r({
+      screen: h
+    });
+  }, l = () => {
+    r({ mode: s === "full" ? "compact" : "full" });
+  }, a = () => {
+    O.emit("close");
+  }, u = () => {
+    o.selectNode(), O.emit("submit");
+  };
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: b(
+        "tw:flex tw:items-center tw:gap-4 tw:p-2 tw:justify-between tw:bg-ic-ink-6s tw:text-ic-white-6s tw:text-sm"
+      ),
+      children: [
+        /* @__PURE__ */ i("div", { className: "tw:flex tw:items-center tw:gap-3", children: [
+          /* @__PURE__ */ e(k, { size: "32", onClick: a, children: /* @__PURE__ */ e(p, { source: it }) }),
+          /* @__PURE__ */ e(fe, { onSelectionChange: d, value: t, children: ge.map(({ icon: h, size: c }) => /* @__PURE__ */ e(k, { value: c, children: /* @__PURE__ */ e(p, { source: h }) }, c)) }),
+          /* @__PURE__ */ i("div", { className: "tw:p-1 tw:flex tw:items-center tw:gap-2 tw:bg-ic-white-1s tw:rounded-lg", children: [
+            /* @__PURE__ */ e(k, { onClick: o.history.undo, disabled: !n, children: /* @__PURE__ */ e(p, { source: B }) }),
+            /* @__PURE__ */ e(k, { onClick: o.history.redo, disabled: !w, children: /* @__PURE__ */ e(p, { source: B, className: "tw:rotate-180" }) })
+          ] }),
+          /* @__PURE__ */ e("div", { className: "tw:p-1 tw:flex tw:items-center tw:gap-2 tw:bg-ic-white-1s tw:rounded-lg", children: /* @__PURE__ */ e(k, { onClick: l, children: /* @__PURE__ */ e(p, { source: s === "full" ? st : rt }) }) })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "tw:flex tw:items-center tw:gap-3", children: /* @__PURE__ */ e(G, { onClick: u, children: "Save" }) })
+      ]
+    }
+  );
+}, at = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 19.9997L16.3763 16.376" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 11.25C4 15.2541 7.24594 18.5 11.25 18.5C15.2541 18.5 18.5 15.2541 18.5 11.25C18.5 7.24594 15.2541 4 11.25 4V4C7.24606 4.00029 4.00029 7.24606 4 11.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, ct = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 6L9 12L15 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, dt = ({ elements: s, sections: t }) => /* @__PURE__ */ i("div", { className: "tw:flex tw:flex-col tw:h-full", children: [
+  /* @__PURE__ */ e("div", { className: "tw:flex tw:items-center tw:p-2 tw:gap-3", children: /* @__PURE__ */ e(U, { fullWidth: !0, placeholder: "Search...", prefix: /* @__PURE__ */ e(p, { source: at }) }) }),
+  /* @__PURE__ */ i(ke, { defaultIndex: 1, className: "tw:flex-1 tw:overflow-hidden tw:border-t tw:border-ic-white-1s", children: [
+    /* @__PURE__ */ i(be, { children: [
+      /* @__PURE__ */ e(F, { className: "tw:flex-1", children: "Sections" }),
+      /* @__PURE__ */ e(F, { className: "tw:flex-1", children: "Elements" })
+    ] }),
+    /* @__PURE__ */ i(ve, { className: "tw:flex-1 tw:overflow-hidden", children: [
+      /* @__PURE__ */ e(H, { children: /* @__PURE__ */ e(D, { className: "tw:h-full tw:py-2", children: t.map((r, o) => /* @__PURE__ */ e(ht, { group: r }, o)) }) }),
+      /* @__PURE__ */ e(H, { className: "tw:h-full tw:overflow-hidden", children: /* @__PURE__ */ e(D, { className: "tw:h-full tw:py-2", children: s.map((r, o) => /* @__PURE__ */ e(wt, { group: r }, o)) }) })
+    ] })
+  ] })
+] }), wt = ({ group: s }) => {
+  const [t, r] = J(!0), { actions: o, connectors: w } = C();
+  return /* @__PURE__ */ i("div", { className: "tw:flex tw:flex-col tw:text-sm", children: [
+    /* @__PURE__ */ e(G, { onClick: r, className: "tw:bg-transparent", children: /* @__PURE__ */ i("div", { className: "tw:flex tw:items-center tw:justify-between tw:flex-1 tw:text-sm", children: [
+      s.name,
+      /* @__PURE__ */ e(
+        p,
+        {
+          source: q,
+          className: b("tw:transition-transform", {
+            "tw:rotate-180": !t
+          })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ e(xe, { open: t, children: /* @__PURE__ */ e("div", { className: "tw:px-4 tw:py-2 tw:grid tw:grid-cols-2 tw:gap-4", children: s.elements.map((n, d) => /* @__PURE__ */ i("div", { className: "tw:space-y-1", children: [
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: b(
+            "tw:bg-ic-ink-6s tw:relative tw:transition-transform tw:rounded-lg tw:hover:scale-105 tw:pointer-events-auto tw:aspect-video tw:overflow-hidden",
+            "tw:cursor-grabbing tw:flex tw:flex-col tw:gap-1 tw:items-center tw:justify-center tw:p-1 tw:opacity-100 tw:text-ic-white-5s",
+            "tw:after:absolute tw:after:inset-0 tw:after:content-empty tw:after:bg-ic-white-1s"
+          ),
+          ref: (l) => {
+            l && w.create(l, n.template, {
+              onCreate(a) {
+                (typeof n.autoFocus == "function" ? n.autoFocus(a) : n.autoFocus) && o.selectNode(a.rootNodeId), n.onCreate?.(a);
+              }
+            });
+          },
+          children: /* @__PURE__ */ e(ce, { width: void 0, height: void 0, ...n.icon })
+        }
+      ),
+      /* @__PURE__ */ e("p", { className: "tw:text-xs tw:mx-auto tw:text-center", children: n.name })
+    ] }, d)) }) })
+  ] });
+}, ht = ({ group: s }) => {
+  const [t, r] = j(!1), { refs: o, floatingStyles: w, context: n } = We({
+    open: t,
+    onOpenChange: r,
+    placement: "right-start",
+    middleware: [
+      Ie(),
+      Re({
+        apply({ elements: g }) {
+          const m = {
+            zIndex: `${Ce}`,
+            height: `${g.reference.getBoundingClientRect().height}px`
+          };
+          Object.assign(g.floating.style, m);
+        }
+      })
+    ],
+    whileElementsMounted: Ae
+  });
+  N(() => {
+    o.setPositionReference(document.querySelector("aside"));
+  }, [o]);
+  const d = ze(n, { move: !1, handleClose: Fe() }), l = He(n), a = Ve(n), u = Te(n), { getReferenceProps: h, getFloatingProps: c } = Pe([d, l, a, u]);
+  return /* @__PURE__ */ i(L, { children: [
+    /* @__PURE__ */ i(
+      "button",
+      {
+        className: b(
+          "tw:w-full tw:text-left tw:flex tw:items-center tw:text-ic-white-5s tw:gap-2 tw:p-2 tw:rounded-lg",
+          "tw:hover:text-ic-white-6s tw:hover:bg-ic-white-1s tw:hover:font-medium"
+        ),
+        ...h(),
+        ref: o.setReference,
+        children: [
+          /* @__PURE__ */ e("div", { className: "tw:bg-ic-white-1s tw:p-1.5 tw:rounded-lg", children: /* @__PURE__ */ e(p, { ...s.icon }) }),
+          /* @__PURE__ */ e("span", { className: "tw:flex-1 tw:truncate", children: s.name }),
+          /* @__PURE__ */ e(p, { className: "tw:rotate-180", source: ct })
+        ]
+      }
+    ),
+    t && /* @__PURE__ */ e(te, { children: /* @__PURE__ */ e("div", { style: w, ...c(), ref: o.setFloating, children: /* @__PURE__ */ i("div", { className: "tw:h-full tw:flex tw:flex-col tw:border-l tw:border-t tw:border-ic-white-2s tw:bg-ic-ink-6s tw:text-ic-white-6s tw:text-sm", children: [
+      /* @__PURE__ */ e("div", { className: "tw:h-12 tw:px-2 tw:flex tw:items-center", children: /* @__PURE__ */ e("h6", { className: "tw:font-medium", children: s.name }) }),
+      /* @__PURE__ */ e(D, { className: "tw:flex-1 tw:px-3", children: /* @__PURE__ */ e("div", { className: "tw:flex tw:flex-col tw:gap-4", children: s.sections.map((g, m) => /* @__PURE__ */ De(ut, { ...g, key: m })) }) })
+    ] }) }) })
+  ] });
+}, ut = ({ template: s, autoFocus: t = !0, onCreate: r }) => {
+  const [, o] = j(!1), [w] = A(), { actions: n, connectors: d, resolver: l } = C((a) => ({
+    resolver: a.options.resolver
+  }));
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: "tw:cursor-grab tw:border tw:border-ic-white-1s tw:rounded-lg tw:overflow-hidden",
+      ref: (a) => {
+        a && d.create(a, s, {
+          onCreate(u) {
+            t && n.selectNode(u.rootNodeId), r?.(u);
+          }
+        });
+      },
+      onDragStart: () => o(!0),
+      onDragEnd: () => o(!1),
+      children: /* @__PURE__ */ e("div", { className: "tw:relative tw:aspect-video tw:rounded-lg tw:overflow-hidden tw:w-60 tw:pointer-events-none", children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-0", children: /* @__PURE__ */ e(
+        ne,
+        {
+          containerProps: {
+            style: {
+              backgroundColor: w.theme.palette.background.default
+            }
+          },
+          viewport: { width: de.md.minWidth },
+          children: /* @__PURE__ */ e(Z, { resolver: l, children: /* @__PURE__ */ e(Q, {}) })
+        }
+      ) }) })
+    }
+  );
+}, pt = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 2H9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 9.5V12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.257 16.6214L7.075 13.4394C6.489 12.8534 6.489 11.9034 7.075 11.3184V11.3184C7.661 10.7324 8.611 10.7324 9.196 11.3184" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.086 10.9643L10.611 8.49028C10.025 7.90428 9.07498 7.90428 8.48998 8.49028V8.49028C7.90398 9.07628 7.90398 10.0263 8.48998 10.6113L10.965 13.0863" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.318 9.19722C10.732 8.61122 10.732 7.66122 11.318 7.07622V7.07622C11.904 6.49022 12.854 6.49022 13.439 7.07622L15.914 9.55122" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.854 8.49019C14.268 7.90419 14.268 6.95419 14.854 6.36919V6.36919C15.44 5.78319 16.39 5.78319 16.975 6.36919L18.743 8.13719L18.036 7.43019L19.804 9.19819C22.733 12.1272 22.733 16.8762 19.804 19.8052V19.8052C16.875 22.7342 12.126 22.7342 9.19702 19.8052L7.92902 18.5372C7.60902 18.2172 7.42902 17.7832 7.42902 17.3302V17.3302C7.42902 16.8772 7.60902 16.4432 7.92902 16.1232L8.84302 15.2092" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 2H4C2.895 2 2 2.895 2 4V5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 17V18C2 19.105 2.895 20 4 20H5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20 5V4C20 2.895 19.105 2 18 2H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, mt = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="6.49771" cy="5.49762" r="2.50104" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="6.49771" cy="18.503" r="2.50104" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.49771 7.99854V16.0019" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="17.5023" cy="13.0006" r="2.50104" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.49771 7.99854V7.99854C6.49771 10.7611 8.73722 13.0006 11.4998 13.0006H15.0013" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, gt = (s) => {
+  const { query: t, actions: r } = C(), {
+    id: o,
+    expanded: w,
+    actions: n,
+    displayName: d,
+    children: l,
+    depth: a
+  } = qe((m) => ({
+    expanded: m.expanded,
+    displayName: $(t.node(m.id).get())
+  })), { selected: u, selectable: h } = C((m, f) => {
+    const v = f.node(o).get();
+    return {
+      selected: f.getEvent("selected").contains(o),
+      nodeDOM: v.dom,
+      selectable: we(v)
+    };
+  });
+  N(() => {
+    o === W && n.setExpandedState(!0);
+  }, [n, o]), N(() => {
+    if (l.length === 0) return;
+    l.some((f) => {
+      const v = t.getEvent("selected").all();
+      return v.includes(f) ? !0 : t.node(f).descendants(!0).some((y) => v.includes(y));
+    }) && n.setExpandedState(!0);
+  }, [l, n, t]);
+  const c = () => {
+    r.selectNode(o);
+  }, g = (m) => {
+    m.stopPropagation(), n.toggleLayer();
+  };
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: "tw:py-1",
+      children: [
+        /* @__PURE__ */ i(
+          "div",
+          {
+            onClick: c,
+            style: {
+              paddingLeft: Math.max(0, a - 1) * 16
+            },
+            className: b(
+              "tw:flex tw:items-center tw:gap-0.5 tw:cursor-pointer tw:rounded-1 tw:pr-2 tw:py-1 tw:border tw:border-ic-white-1s tw:hover:bg-ic-white-1s",
+              {
+                hidden: o === W,
+                "tw:bg-ic-black-7s": u,
+                "tw:pointer-events-none": !h
+              }
+            ),
+            children: [
+              l.length ? /* @__PURE__ */ e(k, { className: "tw:pointer-events-auto", onClick: g, children: /* @__PURE__ */ e(
+                p,
+                {
+                  className: b("tw:transition-transform tw:-rotate-90", {
+                    "tw:rotate-0": w
+                  }),
+                  size: 16,
+                  source: q
+                }
+              ) }) : /* @__PURE__ */ e("div", { className: "tw:p-1", children: /* @__PURE__ */ e(p, { size: 16, source: mt }) }),
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  className: b("tw:flex-1 tw:truncate", {
+                    "tw:text-ic-white-3s": !h
+                  }),
+                  children: d
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "tw:space-y-1", children: s.children })
+      ]
+    }
+  );
+}, ft = ({ onClose: s }) => {
+  const t = tt(), r = (o) => {
+    t.start(o);
+  };
+  return /* @__PURE__ */ e(te, { children: /* @__PURE__ */ i(
+    ye.div,
+    {
+      drag: !0,
+      dragControls: t,
+      dragListener: !1,
+      style: { zIndex: 1e5, width: 320, height: 400, top: 80, right: 40 },
+      className: "tw:fixed tw:rounded-2 tw:bg-ic-ink-6s tw:text-white tw:flex tw:flex-col tw:border tw:border-ic-white-2s",
+      children: [
+        /* @__PURE__ */ i(
+          "div",
+          {
+            onPointerDown: r,
+            className: "tw:py-2 tw:cursor-grab tw:flex tw:items-center tw:justify-between tw:px-4",
+            children: [
+              /* @__PURE__ */ i("div", { className: "tw:flex tw:items-center tw:gap-2", children: [
+                /* @__PURE__ */ e(p, { source: pt }),
+                /* @__PURE__ */ e("p", { className: "tw:text-sm tw:font-medium", children: "Layers" })
+              ] }),
+              /* @__PURE__ */ e(k, { onClick: s, children: /* @__PURE__ */ e(p, { source: Ne }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "tw:flex-1 tw:overflow-auto tw:border-t tw:border-ic-white-1s tw:p-2", children: /* @__PURE__ */ e(Ue, { renderLayer: gt }) })
+      ]
+    }
+  ) });
+}, kt = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 7.024L11.987 11.049L21 7.024L12.013 3L3 7.024Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.436 14.484L21 16.976L11.987 21L3 16.976L8.564 14.491" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.436 9.50903L21 12L11.987 16.024L3 12L8.564 9.51603" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, bt = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 12H19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 7L5 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 17L5 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, vt = ({ insert: s }) => {
+  const [t, r] = J(!1), {
+    queryParams: {
+      action: o = "insert"
+      /* Insert */
+    },
+    setQueryParams: w
+  } = S(), { actions: n, isDeletable: d, focusedNode: l } = C((c, g) => {
+    const m = g.getEvent("selected").first(), f = m ? g.node(m) : null;
+    return {
+      enabled: c.options.enabled,
+      isDeletable: !!(f?.isDeletable() && (f.get().data.custom?.deletable ?? !0)),
+      focusedNode: f?.get()
+    };
+  }), a = () => {
+    n.selectNode();
+  }, u = (c) => {
+    n.delete(c.currentTarget.value);
+  }, h = (c) => {
+    const g = c.currentTarget.value;
+    g === "layers" ? r() : (a(), w({
+      action: g
+    }));
+  };
+  return /* @__PURE__ */ i(L, { children: [
+    /* @__PURE__ */ i("aside", { className: "tw:flex tw:items-stretch tw:bg-ic-ink-6s tw:relative tw:border-t tw:border-ic-white-2s tw:text-ic-white-6s tw:text-sm", children: [
+      /* @__PURE__ */ i("div", { className: "tw:px-1 tw:flex tw:flex-col tw:gap-1", children: [
+        !!s && /* @__PURE__ */ i(_, { children: [
+          /* @__PURE__ */ e(
+            k,
+            {
+              tooltip: {
+                content: "Insert",
+                placement: "right"
+              },
+              onClick: h,
+              value: "insert",
+              className: "tw:relative",
+              size: "32",
+              children: /* @__PURE__ */ e(p, { source: he })
+            }
+          ),
+          /* @__PURE__ */ e("hr", { className: "tw:border-ic-white-2s" })
+        ] }),
+        /* @__PURE__ */ e(
+          k,
+          {
+            tooltip: {
+              content: "Layers",
+              placement: "right"
+            },
+            onClick: h,
+            value: "layers",
+            className: "tw:relative",
+            size: "32",
+            children: /* @__PURE__ */ e(p, { source: kt })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ i(
+        "div",
+        {
+          className: b("tw:relative tw:flex tw:flex-col tw:border-l tw:border-ic-white-1s tw:w-72 tw:overflow-auto"),
+          children: [
+            !l?.related.inspector && /* @__PURE__ */ e("div", { className: "tw:flex-1 tw:overflow-auto scrollbar", children: o === "insert" && !!s && /* @__PURE__ */ e(dt, { elements: s.elements, sections: s.sections }) }),
+            !!l?.related?.inspector && /* @__PURE__ */ i("div", { className: "tw:flex tw:flex-col tw:flex-1 tw:overflow-hidden", children: [
+              /* @__PURE__ */ i("div", { className: "tw:flex tw:items-center tw:gap-2 tw:px-2 tw:py-2", children: [
+                /* @__PURE__ */ e(k, { onClick: a, children: /* @__PURE__ */ e(p, { source: bt }) }),
+                /* @__PURE__ */ e("div", { className: "tw:flex-1 tw:overflow-hidden", children: /* @__PURE__ */ e(U, { fullWidth: !0, value: $(l), size: "32" }) }),
+                d && /* @__PURE__ */ e(k, { value: l.id, onClick: u, children: /* @__PURE__ */ e(p, { className: "tw:text-ic-red-4s", source: Le }) })
+              ] }),
+              /* @__PURE__ */ e("div", { className: "tw:flex-1 tw:overflow-auto tw:border-t tw:border-ic-white-1s scrollbar-hidden", children: /* @__PURE__ */ e(Ee, { fallback: null, children: Y(l.related.inspector) }) })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    t && /* @__PURE__ */ e(ft, { onClose: r })
+  ] });
+}, It = ({ theme: s, insert: t }) => {
+  const {
+    queryParams: { screen: r }
+  } = S();
+  return A({
+    theme: s
+  }), /* @__PURE__ */ e(Z, { enabled: !0, onRender: nt, children: /* @__PURE__ */ i("div", { className: "tw:flex tw:flex-col tw:w-screen tw:h-screen tw:bg-ic-ink-6s tw:text-ic-white-6s", children: [
+    /* @__PURE__ */ e(lt, {}),
+    /* @__PURE__ */ i("div", { className: "tw:flex-1 tw:overflow-hidden tw:flex", children: [
+      /* @__PURE__ */ e(vt, { insert: t }),
+      /* @__PURE__ */ e(
+        ne,
+        {
+          viewport: {
+            width: (o) => r === "lg" ? Math.max(o, V[r]) : V[r]
+          },
+          children: /* @__PURE__ */ e(Q, { children: /* @__PURE__ */ e(Se, {}) })
+        }
+      )
+    ] })
+  ] }) });
+};
+export {
+  It as Editor,
+  S as useEditorQueryParams,
+  Ft as useEditorResponsive,
+  A as useEditorState
+};