@pagehub/sdk 0.1.4 → 0.1.6

package/dist/chunks/useLayoutPreset-wOMV5YnO.js

@@ -0,0 +1,528 @@
+import { jsx as e, jsxs as h, Fragment as ae } from "react/jsx-runtime";
+import { useEditor as G, useNode as M, Element as J } from "@craftjs/core";
+import { useState as B, Suspense as le, lazy as ie, useRef as ne, useEffect as H } from "react";
+import { w as de, z as Q, A as te, B as ce, D as me, C as ue, F as fe, G as pe, u as W, V as ge, E as he, M as ye, g as O, H as U, I as be, U as we, J as q, c as xe } from "./index-C66dAl3Q.js";
+import { u as ve } from "./usePopoverPosition-83Vti7Aw.js";
+import { A as X, c as Ne } from "./toolboxUtils-DjTMslSn.js";
+const Ce = ie(() => import("./LayoutPresetPanel-CNAVAcvw.js")), Te = 320, De = /* @__PURE__ */ new Set(["Container", "Data", "Header", "Footer", "Form"]);
+function Pe() {
+  const { match: o } = M((s) => {
+    var a, n;
+    return {
+      match: De.has(((a = s.data) == null ? void 0 : a.name) || ((n = s.data) == null ? void 0 : n.displayName) || "")
+    };
+  });
+  return o;
+}
+function Se(o) {
+  return o === "flex-row" ? /* @__PURE__ */ e(te, { className: "size-3.5 shrink-0", "aria-hidden": !0 }) : o === "flex-col" ? /* @__PURE__ */ e(ce, { className: "size-3.5 shrink-0", "aria-hidden": !0 }) : o === "grid" ? /* @__PURE__ */ e(Q, { className: "size-3.5 shrink-0", "aria-hidden": !0 }) : /* @__PURE__ */ e(me, { className: "size-3.5 shrink-0", "aria-hidden": !0 });
+}
+function Le(o) {
+  return o.split("-").filter(Boolean).map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join(" ");
+}
+function Ae(o) {
+  const s = String(o.currentPresetLayout || "").trim();
+  return s ? Le(s) : o.layoutMode === "block" ? "Block" : o.layoutMode === "flex-row" ? "Side by side" : o.layoutMode === "flex-col" ? "Stacked" : o.layoutMode === "grid" ? "Grid" : "Pick layout";
+}
+function He({ lp: o, sectionWrapper: s = !0 }) {
+  const a = Pe(), { actions: n, query: c } = G(), [u, p] = B(!1), { triggerRef: P, initialPos: w, setInitialPos: x, computePosition: v } = ve(Te), m = async (y) => {
+    y == null || y.stopPropagation();
+    const { Container: R } = await import("./index-C66dAl3Q.js").then((g) => g.fA);
+    X({
+      element: /* @__PURE__ */ e(
+        J,
+        {
+          canvas: !0,
+          is: R,
+          canDelete: !0,
+          className: "gap-section flex w-full flex-col",
+          custom: { displayName: "Container" }
+        }
+      ),
+      actions: n,
+      query: c
+    });
+  }, C = () => {
+    x(v()), p(!0);
+  }, D = Ae(o), _ = Se(o.layoutMode), E = /* @__PURE__ */ h(ae, { children: [
+    /* @__PURE__ */ e(
+      ue,
+      {
+        mode: "popover",
+        ref: P,
+        label: "Layout",
+        open: u,
+        onTriggerClick: () => u ? p(!1) : C(),
+        onClear: () => {
+          u && p(!1), o.switchToMode("block");
+        },
+        triggerAriaLabel: "Pick layout",
+        clearAriaLabel: "Clear layout (Block)",
+        leading: _,
+        summary: D,
+        trailingExtras: a ? /* @__PURE__ */ e(
+          fe,
+          {
+            ariaLabel: "Add container",
+            tooltip: "Add container",
+            onClick: m,
+            children: /* @__PURE__ */ e(pe, { className: "size-3.5", "aria-hidden": !0 })
+          }
+        ) : null
+      }
+    ),
+    u && /* @__PURE__ */ e(le, { fallback: null, children: /* @__PURE__ */ e(
+      Ce,
+      {
+        initialPosition: w,
+        onClose: () => p(!1),
+        lp: o
+      }
+    ) })
+  ] });
+  return s ? /* @__PURE__ */ e(
+    de,
+    {
+      title: "Layout",
+      icon: /* @__PURE__ */ e(Q, {}),
+      propKey: "display",
+      defaultOpen: !0,
+      children: E
+    }
+  ) : E;
+}
+const ke = /^(?:w-full|w-screen|w-auto|w-\d+(?:\.\d+)?(?:\/\d+)?|w-px|w-\[[^\]]+\]|flex-1|flex-auto|flex-none|flex-initial|flex-\[[^\]]+\]|min-w-0|min-w-full|basis-\d+(?:\/\d+)?|basis-\[[^\]]+\])$/, K = (o) => o.split(/\s+/).filter((s) => s && !ke.test(s)).join(" "), Ee = (o, s) => s ? "" : o === "flex-row" ? "flex-1 min-w-0" : o === "flex-col" ? "w-full" : "", Re = () => {
+  const { actions: o, query: s } = G(), { id: a } = M();
+  return { adjustContainerCount: async (c, u, p = {}) => {
+    var D, _, E, y, R;
+    const { Container: P } = await import("./index-C66dAl3Q.js").then((g) => g.fA), w = s.node(a).get(), x = ((D = w == null ? void 0 : w.data) == null ? void 0 : D.nodes) || [], v = x.length, m = Ee(u, !!p.asymmetric), C = Ne(o);
+    if (x.forEach((g) => {
+      var T, L;
+      const d = s.node(g).get();
+      if (!d) return;
+      const S = String(((L = (T = d.data) == null ? void 0 : T.props) == null ? void 0 : L.className) || ""), b = K(S), N = (m ? `${b} ${m}` : b).trim().replace(/\s+/g, " ");
+      N !== S && C.setProp(g, (I) => {
+        I.className = N;
+      });
+    }), v < c) {
+      const g = x[x.length - 1], d = g ? s.node(g).get() : null, b = ((E = (_ = d == null ? void 0 : d.data) == null ? void 0 : _.props) != null && E.className ? K(String(d.data.props.className)) : "flex flex-col gap-4") || "flex flex-col gap-4", N = ((R = (y = d == null ? void 0 : d.data) == null ? void 0 : y.custom) == null ? void 0 : R.displayName) || "Container", T = (m ? `${b} ${m}` : b).trim().replace(/\s+/g, " "), L = c - v;
+      for (let I = 0; I < L; I++)
+        X({
+          element: /* @__PURE__ */ e(
+            J,
+            {
+              canvas: !0,
+              is: P,
+              canDelete: !0,
+              className: T,
+              custom: { displayName: N, layoutChild: !0 }
+            }
+          ),
+          actions: o,
+          query: s,
+          addTo: a
+        });
+    } else if (v > c) {
+      const g = x.filter((b) => {
+        var T, L;
+        const N = s.node(b).get();
+        return ((L = (T = N == null ? void 0 : N.data) == null ? void 0 : T.custom) == null ? void 0 : L.layoutChild) === !0;
+      }), d = v - c;
+      g.slice(-d).forEach((b) => {
+        C.delete(b);
+      });
+    }
+  } };
+};
+function Ie({ config: o }) {
+  const { type: s, columns: a, rows: n = 1, widths: c, spans: u, heights: p, className: P = "", size: w = "md" } = o, x = {
+    sm: "h-4 w-full",
+    md: "h-6 w-full",
+    lg: "h-8 w-full"
+  };
+  return s === "flex" ? /* @__PURE__ */ e(
+    "div",
+    {
+      className: `${x[w]} border-base-300 overflow-hidden rounded-sm border p-px ${P}`,
+      children: /* @__PURE__ */ e("div", { className: "flex h-full gap-px", children: Array.from({ length: a }, (v, m) => {
+        const C = (c == null ? void 0 : c[m]) || "flex-1", D = c ? C.includes("1/2") ? "30" : "20" : "30";
+        return /* @__PURE__ */ e("div", { className: `${C} rounded-sm bg-primary/${D}` }, m);
+      }) })
+    }
+  ) : s === "grid" ? /* @__PURE__ */ e(
+    "div",
+    {
+      className: `${x[w]} border-base-300 overflow-hidden rounded-sm border p-px ${P}`,
+      children: /* @__PURE__ */ e("div", { className: `grid h-full grid-cols-${a} grid-rows-${n} gap-px`, children: Array.from({ length: a * n }, (v, m) => {
+        const C = (u == null ? void 0 : u[m]) || "", D = (p == null ? void 0 : p[m]) || "";
+        return /* @__PURE__ */ e("div", { className: `${C} ${D} bg-primary/30 rounded-sm` }, m);
+      }) })
+    }
+  ) : null;
+}
+const Z = (o) => /* @__PURE__ */ e(Ie, { config: o });
+function Y(o) {
+  const s = o === "column", a = s ? "flex h-full gap-px" : "flex flex-col h-full gap-px", n = "flex-1 rounded-sm bg-primary/30", c = [
+    {
+      name: s ? "Single Column" : "Single Row",
+      icon: /* @__PURE__ */ e("div", { className: "border-base-300 h-6 w-full overflow-hidden rounded-sm border p-px", children: /* @__PURE__ */ e("div", { className: "bg-primary/30 h-full rounded-sm" }) }),
+      layout: "flex",
+      direction: o,
+      flexDirection: s ? "flex-row" : "flex-col",
+      columns: 1,
+      gap: "gap-4"
+    },
+    {
+      name: s ? "Two Columns" : "Two Rows",
+      icon: /* @__PURE__ */ e("div", { className: "border-base-300 h-6 w-full overflow-hidden rounded-sm border p-px", children: /* @__PURE__ */ h("div", { className: a, children: [
+        /* @__PURE__ */ e("div", { className: n }),
+        /* @__PURE__ */ e("div", { className: n })
+      ] }) }),
+      layout: "flex",
+      direction: o,
+      flexDirection: s ? "flex-row" : "flex-col",
+      columns: 2,
+      gap: "gap-4"
+    },
+    {
+      name: s ? "Three Columns" : "Three Rows",
+      icon: /* @__PURE__ */ e("div", { className: "border-base-300 h-6 w-full overflow-hidden rounded-sm border p-px", children: /* @__PURE__ */ h("div", { className: a, children: [
+        /* @__PURE__ */ e("div", { className: n }),
+        /* @__PURE__ */ e("div", { className: n }),
+        /* @__PURE__ */ e("div", { className: n })
+      ] }) }),
+      layout: "flex",
+      direction: o,
+      flexDirection: s ? "flex-row" : "flex-col",
+      columns: 3,
+      gap: "gap-4"
+    },
+    {
+      name: s ? "Four Columns" : "Four Rows",
+      icon: /* @__PURE__ */ e("div", { className: "border-base-300 h-6 w-full overflow-hidden rounded-sm border p-px", children: /* @__PURE__ */ h("div", { className: a, children: [
+        /* @__PURE__ */ e("div", { className: n }),
+        /* @__PURE__ */ e("div", { className: n }),
+        /* @__PURE__ */ e("div", { className: n }),
+        /* @__PURE__ */ e("div", { className: n })
+      ] }) }),
+      layout: "flex",
+      direction: o,
+      flexDirection: s ? "flex-row" : "flex-col",
+      columns: 4,
+      gap: "gap-4"
+    }
+  ];
+  return s ? [
+    ...c,
+    {
+      name: "Wide Left",
+      icon: /* @__PURE__ */ e("div", { className: "border-base-300 h-6 w-full overflow-hidden rounded-sm border p-px", children: /* @__PURE__ */ h("div", { className: "flex h-full gap-px", children: [
+        /* @__PURE__ */ e("div", { className: "bg-primary/30 w-3/4 rounded-sm" }),
+        /* @__PURE__ */ e("div", { className: "bg-primary/20 w-1/4 rounded-sm" })
+      ] }) }),
+      layout: "flex",
+      direction: o,
+      flexDirection: "flex-row",
+      columns: 2,
+      gap: "gap-4",
+      asymmetric: !0,
+      widths: ["w-3/4", "w-1/4"]
+    },
+    {
+      name: "Wide Right",
+      icon: /* @__PURE__ */ e("div", { className: "border-base-300 h-6 w-full overflow-hidden rounded-sm border p-px", children: /* @__PURE__ */ h("div", { className: "flex h-full gap-px", children: [
+        /* @__PURE__ */ e("div", { className: "bg-primary/20 w-1/4 rounded-sm" }),
+        /* @__PURE__ */ e("div", { className: "bg-primary/30 w-3/4 rounded-sm" })
+      ] }) }),
+      layout: "flex",
+      direction: o,
+      flexDirection: "flex-row",
+      columns: 2,
+      gap: "gap-4",
+      asymmetric: !0,
+      widths: ["w-1/4", "w-3/4"]
+    },
+    {
+      name: "Wide Middle",
+      icon: Z({ type: "flex", columns: 3, widths: ["w-1/4", "w-1/2", "w-1/4"] }),
+      layout: "flex",
+      direction: o,
+      flexDirection: "flex-row",
+      columns: 3,
+      gap: "gap-4",
+      asymmetric: !0,
+      widths: ["w-1/4", "w-1/2", "w-1/4"]
+    }
+  ] : c;
+}
+const _e = [
+  {
+    name: "Single Column",
+    icon: /* @__PURE__ */ e("div", { className: "border-base-300 grid h-6 w-full overflow-hidden rounded-sm border p-px", children: /* @__PURE__ */ e("div", { className: "bg-primary/30 rounded-sm" }) }),
+    layout: "grid",
+    columns: 1,
+    gridTemplate: "grid-cols-1",
+    gap: "gap-4"
+  },
+  {
+    name: "Two Columns",
+    icon: /* @__PURE__ */ h("div", { className: "border-base-300 grid h-6 w-full grid-cols-2 gap-px overflow-hidden rounded-sm border p-px", children: [
+      /* @__PURE__ */ e("div", { className: "bg-primary/30 rounded-sm" }),
+      /* @__PURE__ */ e("div", { className: "bg-primary/30 rounded-sm" })
+    ] }),
+    layout: "grid",
+    columns: 2,
+    gridTemplate: "grid-cols-2",
+    gap: "gap-4"
+  },
+  {
+    name: "2x2 Grid",
+    icon: /* @__PURE__ */ h("div", { className: "border-base-300 grid h-6 w-full grid-cols-2 grid-rows-2 gap-px overflow-hidden rounded-sm border p-px", children: [
+      /* @__PURE__ */ e("div", { className: "bg-primary/30 rounded-sm" }),
+      /* @__PURE__ */ e("div", { className: "bg-primary/30 rounded-sm" }),
+      /* @__PURE__ */ e("div", { className: "bg-primary/30 rounded-sm" }),
+      /* @__PURE__ */ e("div", { className: "bg-primary/30 rounded-sm" })
+    ] }),
+    layout: "grid",
+    columns: 4,
+    gridTemplate: "grid-cols-2",
+    gridRows: "grid-rows-2",
+    gap: "gap-4"
+  },
+  {
+    name: "Three Columns",
+    icon: /* @__PURE__ */ h("div", { className: "border-base-300 grid h-6 w-full grid-cols-3 gap-px overflow-hidden rounded-sm border p-px", children: [
+      /* @__PURE__ */ e("div", { className: "bg-primary/30 rounded-sm" }),
+      /* @__PURE__ */ e("div", { className: "bg-primary/30 rounded-sm" }),
+      /* @__PURE__ */ e("div", { className: "bg-primary/30 rounded-sm" })
+    ] }),
+    layout: "grid",
+    columns: 3,
+    gridTemplate: "grid-cols-3",
+    gap: "gap-4"
+  },
+  {
+    name: "3x2 Grid",
+    icon: /* @__PURE__ */ h("div", { className: "border-base-300 grid h-6 w-full grid-cols-3 grid-rows-2 gap-px overflow-hidden rounded-sm border p-px", children: [
+      /* @__PURE__ */ e("div", { className: "bg-primary/30 rounded-sm" }),
+      /* @__PURE__ */ e("div", { className: "bg-primary/30 rounded-sm" }),
+      /* @__PURE__ */ e("div", { className: "bg-primary/30 rounded-sm" }),
+      /* @__PURE__ */ e("div", { className: "bg-primary/30 rounded-sm" }),
+      /* @__PURE__ */ e("div", { className: "bg-primary/30 rounded-sm" }),
+      /* @__PURE__ */ e("div", { className: "bg-primary/30 rounded-sm" })
+    ] }),
+    layout: "grid",
+    columns: 6,
+    gridTemplate: "grid-cols-3",
+    gridRows: "grid-rows-2",
+    gap: "gap-4"
+  },
+  {
+    name: "Four Columns",
+    icon: /* @__PURE__ */ h("div", { className: "border-base-300 grid h-6 w-full grid-cols-4 gap-px overflow-hidden rounded-sm border p-px", children: [
+      /* @__PURE__ */ e("div", { className: "bg-primary/30 rounded-sm" }),
+      /* @__PURE__ */ e("div", { className: "bg-primary/30 rounded-sm" }),
+      /* @__PURE__ */ e("div", { className: "bg-primary/30 rounded-sm" }),
+      /* @__PURE__ */ e("div", { className: "bg-primary/30 rounded-sm" })
+    ] }),
+    layout: "grid",
+    columns: 4,
+    gridTemplate: "grid-cols-4",
+    gap: "gap-4"
+  },
+  {
+    name: "Header + 2 Columns",
+    icon: Z({
+      type: "grid",
+      columns: 2,
+      rows: 4,
+      spans: ["col-span-2 row-span-2", "row-span-2", "row-span-2"]
+    }),
+    layout: "grid",
+    columns: 3,
+    gridTemplate: "grid-cols-2",
+    gridRows: "grid-rows-2",
+    gap: "gap-4"
+  },
+  {
+    name: "Wide Left",
+    icon: /* @__PURE__ */ e("div", { className: "border-base-300 h-6 w-full overflow-hidden rounded-sm border p-px", children: /* @__PURE__ */ h("div", { className: "border-base-300 grid h-full grid-cols-[3fr_1fr] gap-px overflow-hidden rounded-sm border p-px", children: [
+      /* @__PURE__ */ e("div", { className: "bg-primary/30 rounded-sm" }),
+      /* @__PURE__ */ e("div", { className: "bg-primary/20 rounded-sm" })
+    ] }) }),
+    layout: "grid",
+    columns: 2,
+    gridTemplate: "grid-cols-[2fr_1fr]",
+    gap: "gap-4"
+  },
+  {
+    name: "Wide Right",
+    icon: /* @__PURE__ */ e("div", { className: "border-base-300 h-6 w-full overflow-hidden rounded-sm border p-px", children: /* @__PURE__ */ h("div", { className: "border-base-300 grid h-full grid-cols-[1fr_3fr] gap-px overflow-hidden rounded-sm border p-px", children: [
+      /* @__PURE__ */ e("div", { className: "bg-primary/20 rounded-sm" }),
+      /* @__PURE__ */ e("div", { className: "bg-primary/30 rounded-sm" })
+    ] }) }),
+    layout: "grid",
+    columns: 2,
+    gridTemplate: "grid-cols-[1fr_2fr]",
+    gap: "gap-4"
+  },
+  {
+    name: "Wide Middle",
+    icon: /* @__PURE__ */ e("div", { className: "border-base-300 h-6 w-full overflow-hidden rounded-sm border p-px", children: /* @__PURE__ */ h("div", { className: "border-base-300 grid h-full grid-cols-[1fr_2fr_1fr] gap-px overflow-hidden rounded-sm border p-px", children: [
+      /* @__PURE__ */ e("div", { className: "bg-primary/20 rounded-sm" }),
+      /* @__PURE__ */ e("div", { className: "bg-primary/30 rounded-sm" }),
+      /* @__PURE__ */ e("div", { className: "bg-primary/20 rounded-sm" })
+    ] }) }),
+    layout: "grid",
+    columns: 3,
+    gridTemplate: "grid-cols-[1fr_2fr_1fr]",
+    gap: "gap-4"
+  }
+], Oe = [
+  { value: "block", label: "Block" },
+  { value: "inline-block", label: "Inline Block" },
+  { value: "inline-flex", label: "Inline Flex" },
+  { value: "inline-grid", label: "Inline Grid" },
+  { value: "inline", label: "Inline" },
+  { value: "hidden", label: "None" }
+];
+function Ue({ propKey: o, onLayoutChange: s, lockMode: a }) {
+  const { actions: n, query: c } = G(), u = W(ge), p = W(he), P = W(ye), w = p.dark ?? !1, {
+    actions: { setProp: x },
+    id: v,
+    currentLayoutMode: m,
+    currentLayoutColumns: C,
+    currentPresetLayout: D,
+    classNameStr: _
+  } = M((r) => {
+    var l, t, A, k, f, $, F;
+    return {
+      id: r.id,
+      currentLayoutMode: (t = (l = r.data) == null ? void 0 : l.props.root) == null ? void 0 : t.layoutMode,
+      currentLayoutColumns: (k = (A = r.data) == null ? void 0 : A.props.root) == null ? void 0 : k.layoutColumns,
+      currentPresetLayout: ($ = (f = r.data) == null ? void 0 : f.props.root) == null ? void 0 : $[o],
+      classNameStr: ((F = r.data) == null ? void 0 : F.props.className) || ""
+    };
+  }), E = { className: _ }, y = String(
+    O({ propKey: "display", propType: "class" }, u, E, w).value ?? ""
+  ), R = String(
+    O(
+      { propKey: "flexDirection", propType: "class" },
+      u,
+      E,
+      w
+    ).value ?? ""
+  ), g = () => a || (y.includes("grid") ? "grid" : y.includes("flex") ? R.includes("flex-col") ? "flex-col" : "flex-row" : y.includes("block") || y.includes("inline-block") ? "block" : m || "flex-col"), [d, S] = B(
+    () => a ?? g()
+  ), [b, N] = B(!1), T = ne(null), { adjustContainerCount: L } = Re(), I = U(be), ee = U(we);
+  H(() => {
+    if (a) {
+      d !== a && S(a);
+      return;
+    }
+    const r = g();
+    r !== d && S(r);
+  }, [m, y, R, a, d]), H(() => {
+    if (!b) return;
+    const r = (l) => {
+      T.current && !T.current.contains(l.target) && N(!1);
+    };
+    return document.addEventListener("mousedown", r), () => document.removeEventListener("mousedown", r);
+  }, [b]);
+  const i = (r, l, t, A = "class", k) => {
+    xe({
+      propKey: r,
+      value: l,
+      setProp: k ? (f) => n.setProp(k, f) : x,
+      propType: A,
+      view: t,
+      query: c,
+      actions: n,
+      nodeId: k || v,
+      classDark: w
+    });
+  }, z = (r) => {
+    const l = [
+      "flexDirection",
+      "flexWrap",
+      "justifyContent",
+      "alignItems",
+      "gridTemplateColumns",
+      "gridTemplateRows",
+      "gridGap"
+    ];
+    r.forEach((t) => l.forEach((A) => i(A, "", t)));
+  }, V = (r, l) => {
+    l.forEach((t) => {
+      i("display", "flex", t), i("flexDirection", r === "row" ? "flex-row" : "flex-col", t);
+    });
+  }, re = (r, l = "grid-cols-2") => {
+    r.forEach((t) => {
+      i("display", "grid", t), i("gridCols", l, t);
+    });
+  }, oe = (r) => {
+    r.forEach((l) => i("display", "block", l));
+  }, se = a === "grid" || d === "grid" ? _e : Y(d === "flex-row" ? "column" : "row");
+  return {
+    // State
+    layoutMode: d,
+    showDisplayDropdown: b,
+    setShowDisplayDropdown: N,
+    dropdownRef: T,
+    currentDisplay: y,
+    // Presets
+    currentPresets: se,
+    currentLayoutMode: m,
+    currentLayoutColumns: C,
+    currentPresetLayout: D,
+    // Handlers
+    handlePresetSelect: (r) => {
+      var l, t, A, k;
+      if (r.layout === "flex" ? (i("display", "flex", "mobile"), r.flexDirection && i("flexDirection", r.flexDirection, "mobile"), r.flexWrap && i("flexWrap", r.flexWrap, "mobile")) : r.layout === "grid" && (["mobile", "desktop"].forEach((f) => {
+        i("flexDirection", "", f), i("flexWrap", "", f), i("justifyContent", "", f), i("alignItems", "", f);
+      }), i("display", "grid", "desktop"), r.gridTemplate && i("gridCols", r.gridTemplate, "desktop"), r.gridRows && i("gridRows", r.gridRows, "desktop"), i("display", "grid", "mobile"), i("gridCols", "grid-cols-1", "mobile")), r.gap && i("gap", r.gap, "mobile"), i(o, r.name.toLowerCase().replace(/\s+/g, "-"), "mobile", "root"), i("layoutMode", a ?? d, "mobile", "root"), r.columns && i("layoutColumns", String(r.columns), "mobile", "root"), r.columns) {
+        const f = r.layout === "flex" ? r.flexDirection === "flex-row" ? "flex-row" : "flex-col" : "grid";
+        I(!0);
+        try {
+          L(r.columns, f, {
+            asymmetric: !!r.asymmetric
+          });
+        } finally {
+          setTimeout(() => {
+            I(!1);
+            try {
+              ee(c.serialize());
+            } catch {
+            }
+          }, 150);
+        }
+      }
+      if (r.layout === "grid" && r.name === "Header + 2 Columns") {
+        const f = ((t = (l = c.node(v).get()) == null ? void 0 : l.data) == null ? void 0 : t.nodes) || [];
+        f.length > 0 && i("gridColSpan", "col-span-2", "desktop", "class", f[0]);
+      }
+      r.layout === "flex" && r.asymmetric && r.widths && (((k = (A = c.node(v).get()) == null ? void 0 : A.data) == null ? void 0 : k.nodes) || []).forEach(($, F) => {
+        var j;
+        (j = r.widths) != null && j[F] && i("width", r.widths[F], "desktop", "class", $);
+      }), s == null || s(r);
+    },
+    handleDisplayVariant: (r) => {
+      const l = q(p, u, P);
+      l.forEach((t) => i("display", r, t)), (r === "block" || r === "inline" || r === "hidden") && (z(l), r === "block" && S("block")), N(!1);
+    },
+    switchToMode: (r) => {
+      if (a && r !== a) return;
+      const l = q(p, u, P);
+      S(r), z(l), r === "flex-row" ? V("row", l) : r === "flex-col" ? V("column", l) : r === "grid" ? l.forEach((t) => {
+        re([t], t === "desktop" ? "grid-cols-2" : "grid-cols-1");
+      }) : r === "block" && oe(l);
+    }
+  };
+}
+export {
+  Oe as D,
+  _e as G,
+  He as L,
+  Y as g,
+  Ue as u
+};