@pagehub/sdk 0.1.0

package/dist/chunks/ContainerMainTab-DRQEISlP.js

@@ -0,0 +1,92 @@
+import { jsx as p, Fragment as O, jsxs as C } from "react/jsx-runtime";
+import { bS as P, M as F, N as S, bT as x, bU as b, bV as v, bW as M } from "./index-lNS44FHV.js";
+import { u as R, L as I } from "./useLayoutPreset-C1i4ig-r.js";
+import { r as j } from "./helpers-Bnp6O4wY.js";
+import { ROOT_NODE as T } from "@craftjs/utils";
+import { useNode as H, useEditor as h } from "@craftjs/core";
+var k = /* @__PURE__ */ ((e) => (e.Page = "page", e.Section = "section", e.Header = "header", e.Footer = "footer", e.Component = "component", e.Container = "container", e.Form = "form", e.Background = "background", e))(k || {});
+const q = () => {
+  var a, c;
+  const { parent: e, currentNodeType: t, isCanvas: r } = H((s) => {
+    var d;
+    return {
+      parent: s.data.parent,
+      currentNodeType: (d = s.data.props) == null ? void 0 : d.type,
+      isCanvas: s.data.isCanvas
+    };
+  }), { query: o } = h(), n = o.node(e || T).get(), i = (c = (a = n == null ? void 0 : n.data) == null ? void 0 : a.props) == null ? void 0 : c.type;
+  return Object.values(k).includes(t) ? t : i === "page" ? "section" : r ? "container" : null;
+}, w = () => {
+  var a, c, s;
+  const e = q(), { parent: t } = H((d) => ({
+    parent: d.data.parent
+  })), { query: r } = h(), o = r.node(t || T).get(), n = (a = o == null ? void 0 : o.data) != null && a.parent ? r.node(o.data.parent).get() : null, i = ((s = (c = n == null ? void 0 : n.data) == null ? void 0 : c.props) == null ? void 0 : s.type) === "page";
+  return {
+    type: e,
+    isPage: e === "page",
+    isSection: e === "section",
+    isHeader: e === "header",
+    isFooter: e === "footer",
+    isComponent: e === "component",
+    isContainer: e === "container",
+    isForm: e === "form",
+    isBackground: e === "background",
+    isContent: i
+  };
+}, K = M.find((e) => e.id === "bgImage"), V = () => {
+  var y;
+  const { isHeader: e, isFooter: t, isPage: r, isComponent: o } = w(), { query: n } = h(), i = n.node("ROOT").get(), a = ((y = i == null ? void 0 : i.data) == null ? void 0 : y.nodes) || [], c = a.some((g) => {
+    var l, m;
+    const u = n.node(g).get();
+    return ((m = (l = u == null ? void 0 : u.data) == null ? void 0 : l.props) == null ? void 0 : m.type) === "header";
+  }), s = a.some((g) => {
+    var l, m;
+    const u = n.node(g).get();
+    return ((m = (l = u == null ? void 0 : u.data) == null ? void 0 : l.props) == null ? void 0 : m.type) === "footer";
+  }), d = !r && !o && !t && (!c || e), f = !r && !o && !e && (!s || t);
+  return !d && !f ? null : /* @__PURE__ */ C(
+    F,
+    {
+      title: "Container Role",
+      icon: /* @__PURE__ */ p(v, {}),
+      help: "Mark this as the site header or footer.",
+      children: [
+        d && /* @__PURE__ */ p(
+          b,
+          {
+            propKey: "type",
+            propType: "component",
+            type: "toggle",
+            option: e ? "This is the Header" : "Make this the Header",
+            on: "header"
+          }
+        ),
+        f && /* @__PURE__ */ p(
+          b,
+          {
+            propKey: "type",
+            propType: "component",
+            type: "toggle",
+            option: t ? "This is the Footer" : "Make this the Footer",
+            on: "footer"
+          }
+        ),
+        /* @__PURE__ */ p("p", { className: "text-neutral-content mt-2 text-xs", children: "Headers and footers are special containers that appear on all pages." })
+      ]
+    }
+  );
+}, W = () => {
+  var o;
+  const t = (o = P().data) == null ? void 0 : o.props, r = R({ propKey: "layoutPreset" });
+  return (t == null ? void 0 : t.type) === "imageContainer" ? /* @__PURE__ */ p(O, { children: j({
+    Content: /* @__PURE__ */ C(F, { collapsible: !1, children: [
+      /* @__PURE__ */ p(S, { id: "settings/ai-button" }),
+      /* @__PURE__ */ p(x, { def: K })
+    ] }),
+    Type: /* @__PURE__ */ p(I, { lp: r })
+  }) }) : null;
+};
+export {
+  W as ContainerMainTab,
+  V as HeaderFooterToggles
+};

package/dist/chunks/ContainerOverflowSectionPanel-vD4aCNtT.js

@@ -0,0 +1,119 @@
+import { jsxs as o, jsx as e, Fragment as n } from "react/jsx-runtime";
+import { bU as l, c5 as u, d8 as m } from "./index-lNS44FHV.js";
+import { useNode as g } from "@craftjs/core";
+function y() {
+  const { craftName: t, scrollEffect: r, dragScroll: i, autoHide: s } = g((a) => {
+    var d, h, f;
+    const c = ((d = a.data) == null ? void 0 : d.props) || {}, p = c.overflow || {};
+    return {
+      craftName: ((h = a.data) == null ? void 0 : h.name) || ((f = a.data) == null ? void 0 : f.displayName),
+      scrollEffect: c.scrollEffect,
+      dragScroll: p.dragScroll,
+      autoHide: p.autoHide
+    };
+  });
+  return t !== "Container" ? null : r === "horizontal-scroll" ? /* @__PURE__ */ o("p", { className: "text-neutral-content text-xs leading-relaxed", children: [
+    "CSS overflow options are disabled while",
+    " ",
+    /* @__PURE__ */ e("span", { className: "text-base-content font-medium", children: "Scroll Effect → Horizontal Scroll" }),
+    " ",
+    "(GSAP) is on. Use one or the other."
+  ] }) : /* @__PURE__ */ o(n, { children: [
+    /* @__PURE__ */ e(
+      l,
+      {
+        propKey: "overflow.dragScroll",
+        propType: "component",
+        type: "toggle",
+        label: "Drag to scroll (published)",
+        labelWidth: "w-56",
+        on: !0
+      }
+    ),
+    /* @__PURE__ */ e(
+      l,
+      {
+        propKey: "overflow.autoHide",
+        propType: "component",
+        type: "toggle",
+        label: "Auto-hide scrollbar",
+        labelWidth: "w-56",
+        on: !0
+      }
+    ),
+    (i || s) && /* @__PURE__ */ o(n, { children: [
+      i && /* @__PURE__ */ o(n, { children: [
+        /* @__PURE__ */ o(
+          l,
+          {
+            propKey: "overflow.smoothing",
+            propType: "component",
+            type: "select",
+            label: "Drag feel",
+            labelWidth: "w-56",
+            valueCoalesce: 0,
+            children: [
+              /* @__PURE__ */ e("option", { value: "0", children: "Direct (1:1 with pointer)" }),
+              /* @__PURE__ */ e("option", { value: "0.12", children: "Light ease" }),
+              /* @__PURE__ */ e("option", { value: "0.2", children: "Fluid" }),
+              /* @__PURE__ */ e("option", { value: "0.28", children: "Very fluid" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          l,
+          {
+            propKey: "overflow.wheelHorizontal",
+            propType: "component",
+            type: "toggle",
+            label: "Vertical wheel scrolls horizontally",
+            labelWidth: "w-56",
+            on: !0
+          }
+        )
+      ] }),
+      s && /* @__PURE__ */ e(
+        l,
+        {
+          propKey: "overflow.hideDelay",
+          propType: "component",
+          type: "number",
+          label: "Scrollbar hide delay (ms)",
+          labelWidth: "w-56",
+          valueCoalesce: 1e3
+        }
+      )
+    ] }),
+    /* @__PURE__ */ o("p", { className: "text-neutral-content text-xs leading-relaxed", children: [
+      /* @__PURE__ */ e("span", { className: "text-base-content font-medium", children: "overflow-x-auto" }),
+      " is added automatically unless you set another",
+      " ",
+      /* @__PURE__ */ e("span", { className: "text-base-content font-medium", children: "overflow-x-*" }),
+      " in Classes. Use a horizontal row (e.g. flex) for your strip. Drag scroll runs on the live site only, not while editing the canvas. If motion feels like it snaps to cards, remove",
+      " ",
+      /* @__PURE__ */ e("span", { className: "text-base-content font-medium", children: "scroll-snap-*" }),
+      " from Classes on this container or its children."
+    ] })
+  ] });
+}
+function S({ initialPosition: t, onClose: r }) {
+  return /* @__PURE__ */ e(
+    u,
+    {
+      isOpen: !0,
+      onClose: r,
+      title: "Scroll Behavior",
+      storageKey: "container-overflow",
+      minWidth: 300,
+      maxWidth: 520,
+      minHeight: 320,
+      initialPosition: t,
+      zIndex: m,
+      scrollable: !0,
+      children: /* @__PURE__ */ e(y, {})
+    }
+  );
+}
+export {
+  S as default
+};

package/dist/chunks/ContainerOverflowSectionPopover-BU5rAXVC.js

@@ -0,0 +1,24 @@
+import { jsxs as m, Fragment as u, jsx as e } from "react/jsx-runtime";
+import { useNode as f } from "@craftjs/core";
+import { useState as P, Suspense as d, lazy as v } from "react";
+import { u as O } from "./usePopoverAutoOpen-BJbJARN-.js";
+import { cg as g } from "./index-lNS44FHV.js";
+const I = v(() => import("./ContainerOverflowSectionPanel-vD4aCNtT.js")), S = 360;
+function j({ def: o }) {
+  const [t, n] = P(!1), { triggerRef: i, initialPos: s, setInitialPos: r, computePosition: a } = g(S), { id: l } = f((c) => ({ id: c.id })), p = () => {
+    r(a()), n(!0);
+  };
+  return O({ nodeId: l, defId: o == null ? void 0 : o.id, onOpen: p }), /* @__PURE__ */ m(u, { children: [
+    /* @__PURE__ */ e("span", { ref: i, "aria-hidden": !0, className: "block size-0" }),
+    t && /* @__PURE__ */ e(d, { fallback: null, children: /* @__PURE__ */ e(
+      I,
+      {
+        initialPosition: s,
+        onClose: () => n(!1)
+      }
+    ) })
+  ] });
+}
+export {
+  j as default
+};

package/dist/chunks/ContainerPaddingOverlay-d02HWvB3.js

@@ -0,0 +1,334 @@
+import { jsx as D } from "react/jsx-runtime";
+import { useNode as H, useEditor as it } from "@craftjs/core";
+import { bX as E, bY as rt, bZ as dt, b_ as O, R as P, D as q, bn as at, b$ as ct, c0 as lt } from "./index-lNS44FHV.js";
+import { useState as N, useRef as V, useEffect as B, useCallback as ut } from "react";
+import pt from "react-dom";
+const W = {
+  0: "0",
+  1: "px",
+  2: "0.5",
+  4: "1",
+  6: "1.5",
+  8: "2",
+  10: "2.5",
+  12: "3",
+  14: "3.5",
+  16: "4",
+  20: "5",
+  24: "6",
+  28: "7",
+  32: "8",
+  36: "9",
+  40: "10",
+  44: "11",
+  48: "12",
+  56: "14",
+  64: "16",
+  80: "20",
+  96: "24",
+  112: "28",
+  128: "32",
+  144: "36",
+  160: "40",
+  176: "44",
+  192: "48",
+  208: "52",
+  224: "56",
+  240: "60",
+  256: "64",
+  288: "72",
+  320: "80",
+  384: "96"
+}, ft = Object.keys(W).map(Number);
+function Y(t) {
+  const s = Math.max(0, t);
+  if (s > 404) return s;
+  let i = 0, n = s;
+  for (const c of ft) {
+    const r = Math.abs(s - c);
+    r < n && (n = r, i = c);
+  }
+  return i;
+}
+function mt(t, s) {
+  const i = W[s], n = `p${t[0]}`;
+  return i != null ? `${n}-${i}` : `${n}-[${s}px]`;
+}
+const K = [
+  { cls: "w-1/4", ratio: 0.25 },
+  { cls: "w-1/3", ratio: 1 / 3 },
+  { cls: "w-1/2", ratio: 0.5 },
+  { cls: "w-2/3", ratio: 2 / 3 },
+  { cls: "w-3/4", ratio: 0.75 },
+  { cls: "w-full", ratio: 1 }
+];
+function J(t, s) {
+  if (s <= 0) return { cls: `w-[${Math.round(t)}px]`, px: t };
+  const i = t / s;
+  let n = K[0], c = Math.abs(i - n.ratio);
+  for (const r of K) {
+    const f = Math.abs(i - r.ratio);
+    f < c && (c = f, n = r);
+  }
+  return { cls: n.cls, px: Math.round(n.ratio * s) };
+}
+function Q(t) {
+  const s = Y(t), i = W[s];
+  return i != null ? { cls: `h-${i}`, px: s } : { cls: `h-[${Math.round(t)}px]`, px: Math.round(t) };
+}
+const x = 8;
+function ht(t, s, i) {
+  const n = t.getBoundingClientRect(), c = window.getComputedStyle(t), r = parseFloat(c.paddingTop) || 0, f = parseFloat(c.paddingRight) || 0, e = parseFloat(c.paddingBottom) || 0, v = parseFloat(c.paddingLeft) || 0;
+  if (i > n.bottom && i <= n.bottom + x && s >= n.left && s <= n.right)
+    return { side: "bottom", mode: "resize" };
+  if (s > n.right && s <= n.right + x && i >= n.top && i <= n.bottom)
+    return { side: "right", mode: "resize" };
+  if (s >= n.left && s <= n.right && i >= n.top && i <= n.bottom) {
+    const T = i - n.top, R = n.bottom - i, w = s - n.left, C = n.right - s, m = 12, M = document.getElementById("viewport");
+    if (M == null || M.getBoundingClientRect().left, T < m && r > 0) return { side: "top", mode: "padding" };
+    if (R < m && e > 0) return { side: "bottom", mode: "padding" };
+    if (w < m && v > 0) return { side: "left", mode: "padding" };
+    if (C < m && f > 0) return { side: "right", mode: "padding" };
+    if (T < m && r === 0) return { side: "top", mode: "padding" };
+    if (R < m && e === 0) return { side: "bottom", mode: "padding" };
+    if (w < m && v === 0) return { side: "left", mode: "padding" };
+    if (C < m && f === 0) return { side: "right", mode: "padding" };
+  }
+  return null;
+}
+function gt({
+  targetElement: t,
+  isActive: s,
+  setProp: i,
+  classPrefixView: n,
+  classDark: c
+}) {
+  const [r, f] = N(null), [e, v] = N(null), [T, R] = N(null), [w, C] = N(null), m = V(null), M = V(e);
+  M.current = e, m.current = T;
+  const S = V(null), A = V(null), [Z, X] = N(E());
+  B(() => rt(X), []), B(() => {
+    if (!t || !s || e || Z) return;
+    const o = (l) => {
+      if (E()) {
+        S.current && clearTimeout(S.current), A.current = null, f(null);
+        return;
+      }
+      const d = ht(t, l.clientX, l.clientY), a = d ? `${d.side}:${d.mode}` : null;
+      if (a !== A.current) {
+        if (A.current = a, S.current && clearTimeout(S.current), !d) {
+          f(null);
+          return;
+        }
+        S.current = setTimeout(() => f(d), 400);
+      }
+    };
+    return document.addEventListener("mousemove", o), () => {
+      document.removeEventListener("mousemove", o), S.current && clearTimeout(S.current), A.current = null;
+    };
+  }, [t, s, e, Z]);
+  const L = ut(() => {
+    if (!t) return null;
+    const o = t.getBoundingClientRect(), l = window.getComputedStyle(t), d = M.current || r;
+    if (!d) return null;
+    const a = parseFloat(l.paddingTop) || 0, g = parseFloat(l.paddingRight) || 0, h = parseFloat(l.paddingBottom) || 0, p = parseFloat(l.paddingLeft) || 0;
+    if (d.mode === "padding")
+      switch (d.side) {
+        case "top":
+          return { x: o.left, y: o.top, w: o.width, h: Math.max(a, 6) };
+        case "bottom":
+          return {
+            x: o.left,
+            y: o.bottom - Math.max(h, 6),
+            w: o.width,
+            h: Math.max(h, 6)
+          };
+        case "left":
+          return { x: o.left, y: o.top, w: Math.max(p, 6), h: o.height };
+        case "right":
+          return {
+            x: o.right - Math.max(g, 6),
+            y: o.top,
+            w: Math.max(g, 6),
+            h: o.height
+          };
+      }
+    else
+      switch (d.side) {
+        case "top":
+          return { x: o.left, y: o.top - x, w: o.width, h: x };
+        case "bottom":
+          return { x: o.left, y: o.bottom, w: o.width, h: x };
+        case "left":
+          return { x: o.left - x, y: o.top, w: x, h: o.height };
+        case "right":
+          return { x: o.right, y: o.top, w: x, h: o.height };
+      }
+  }, [t, r]);
+  B(() => {
+    if (!t || !s) {
+      C(null);
+      return;
+    }
+    const o = () => {
+      M.current || C(L());
+    };
+    o();
+    const l = setInterval(o, 200);
+    return () => clearInterval(l);
+  }, [t, s, L]), B(() => {
+    if (!e || !t) return;
+    const o = e.side === "top" || e.side === "bottom", l = (a) => {
+      var p;
+      const h = (o ? a.clientY : a.clientX) - e.startPos;
+      if (e.mode === "padding") {
+        const b = e.side === "bottom" || e.side === "right" ? -1 : 1, u = Y(e.initial + h * b);
+        R(u);
+        const y = `padding${e.side.charAt(0).toUpperCase() + e.side.slice(1)}`;
+        t.style[y] = `${u}px`;
+      } else {
+        const b = e.side === "left" || e.side === "top" ? -1 : 1, u = Math.max(0, e.initial + h * b);
+        if (o) {
+          const y = Q(u);
+          R(y.px), t.style.height = `${y.px}px`;
+        } else {
+          const y = e.parentSize || ((p = t.parentElement) == null ? void 0 : p.offsetWidth) || 0, j = J(u, y);
+          R(j.px), t.style.width = `${j.px}px`;
+        }
+      }
+      C(L());
+    }, d = () => {
+      var g;
+      const a = m.current;
+      if (e.mode === "padding") {
+        const h = `padding${e.side.charAt(0).toUpperCase() + e.side.slice(1)}`;
+        if (t.style[h] = "", a != null) {
+          const p = mt(e.side, a), b = O(n, c);
+          i((u) => {
+            u.className = P(u.className || "", b + p);
+          });
+        }
+      } else if (e.side === "top" || e.side === "bottom") {
+        if (t.style.height = "", a != null) {
+          const p = Q(a), b = O(n, c);
+          i((u) => {
+            u.className = P(u.className || "", b + p.cls);
+          });
+        }
+      } else if (t.style.width = "", a != null) {
+        const p = e.parentSize || ((g = t.parentElement) == null ? void 0 : g.offsetWidth) || 0, b = J(a, p), u = O(n, c);
+        i((y) => {
+          y.className = P(y.className || "", u + b.cls);
+        });
+      }
+      v(null), R(null), document.body.style.cursor = "", requestAnimationFrame(() => C(L()));
+    };
+    return document.addEventListener("mousemove", l), document.addEventListener("mouseup", d), () => {
+      document.removeEventListener("mousemove", l), document.removeEventListener("mouseup", d);
+    };
+  }, [e, t, i, n, c, L]);
+  const $ = typeof document < "u" ? document.getElementById("viewport") : null;
+  if (!$ || !(e || r) || !w) return null;
+  const k = $.getBoundingClientRect(), F = parseFloat(getComputedStyle($.parentElement || $).zoom) || 1, tt = -k.left, et = -k.top, ot = (e == null ? void 0 : e.mode) || (r == null ? void 0 : r.mode), G = (e == null ? void 0 : e.side) || (r == null ? void 0 : r.side), z = G === "top" || G === "bottom", U = z ? "ns-resize" : "ew-resize", _ = ot === "padding", nt = _ ? e ? "rgba(147, 196, 125, 0.5)" : "rgba(147, 196, 125, 0.3)" : e ? "rgba(59, 130, 246, 0.4)" : "rgba(59, 130, 246, 0.2)", st = _ ? "#15803d" : "#1d4ed8";
+  let I = "";
+  if (e && T != null)
+    I = `${Math.round(T)}px`;
+  else if (r && t) {
+    const o = window.getComputedStyle(t);
+    if (_) {
+      const l = {
+        top: o.paddingTop,
+        bottom: o.paddingBottom,
+        left: o.paddingLeft,
+        right: o.paddingRight
+      };
+      I = `${Math.round(parseFloat(l[r.side]) || 0)}px`;
+    } else
+      I = z ? `${Math.round(t.offsetHeight)}px` : `${Math.round(t.offsetWidth)}px`;
+  }
+  return pt.createPortal(
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ D(
+      "div",
+      {
+        "data-node-control": "true",
+        onMouseDown: (o) => {
+          var h;
+          if (!t || !r) return;
+          o.preventDefault(), o.stopPropagation();
+          const l = t.getBoundingClientRect(), d = window.getComputedStyle(t);
+          let a, g;
+          if (r.mode === "padding") {
+            const p = {
+              top: d.paddingTop,
+              bottom: d.paddingBottom,
+              left: d.paddingLeft,
+              right: d.paddingRight
+            };
+            a = parseFloat(p[r.side]) || 0;
+          } else
+            a = z ? l.height : l.width, z || (g = ((h = t.parentElement) == null ? void 0 : h.offsetWidth) || 0);
+          v({
+            side: r.side,
+            mode: r.mode,
+            startPos: z ? o.clientY : o.clientX,
+            initial: a,
+            parentSize: g
+          }), document.body.style.cursor = U;
+        },
+        style: {
+          position: "absolute",
+          left: (w.x + tt) / F + $.scrollLeft,
+          top: (w.y + et) / F + $.scrollTop,
+          width: w.w / F,
+          height: w.h / F,
+          backgroundColor: nt,
+          cursor: U,
+          zIndex: dt,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          transition: e ? "none" : "all 0.15s ease"
+        },
+        children: /* @__PURE__ */ D(
+          "span",
+          {
+            style: {
+              fontSize: 11,
+              fontWeight: 600,
+              color: st,
+              backgroundColor: "rgba(255, 255, 255, 0.9)",
+              padding: "1px 5px",
+              borderRadius: 3,
+              fontFamily: "system-ui, -apple-system, sans-serif",
+              pointerEvents: "none",
+              userSelect: "none",
+              whiteSpace: "nowrap"
+            },
+            children: I
+          }
+        )
+      }
+    ),
+    $
+  );
+}
+function Ct() {
+  const { id: t, dom: s } = H((e) => ({ dom: e.dom })), { isSelected: i } = it((e, v) => ({
+    isSelected: v.getEvent("selected").contains(t)
+  })), {
+    actions: { setProp: n }
+  } = H(), c = q(at), r = q(ct).dark ?? !1, f = lt(c);
+  return !s || !i ? null : /* @__PURE__ */ D(
+    gt,
+    {
+      targetElement: s,
+      isActive: i,
+      setProp: n,
+      classPrefixView: f,
+      classDark: r
+    }
+  );
+}
+export {
+  Ct as ContainerPaddingOverlay
+};

package/dist/chunks/ContainerScrollEffectSection-DKYCjFgT.js

@@ -0,0 +1,122 @@
+import { jsx as e, Fragment as r, jsxs as o } from "react/jsx-runtime";
+import { useNode as m, useEditor as y } from "@craftjs/core";
+import { bU as t, ds as S } from "./index-lNS44FHV.js";
+function E() {
+  const { id: i, craftName: u, containerType: a, scrollEffect: c } = m((l) => {
+    var h;
+    const n = ((h = l.data) == null ? void 0 : h.props) || {}, d = l.data;
+    return {
+      id: l.id,
+      craftName: d.name || d.displayName,
+      containerType: n.type,
+      scrollEffect: n.scrollEffect
+    };
+  }), { actions: s } = y();
+  if (u !== "Container") return null;
+  const p = a === "section", f = !p && !["header", "footer", "page", "component"].includes(a);
+  return /* @__PURE__ */ e(r, { children: p ? /* @__PURE__ */ o(r, { children: [
+    /* @__PURE__ */ o(
+      t,
+      {
+        propKey: "scrollEffect",
+        propType: "component",
+        type: "select",
+        label: "Effect",
+        onChange: (l) => {
+          l === "horizontal-scroll" && s.setProp(i, (n) => {
+            (n.scrollDirection == null || n.scrollDirection === "") && (n.scrollDirection = "ltr"), n.scrollSpeed == null && (n.scrollSpeed = 1.5);
+          });
+        },
+        children: [
+          /* @__PURE__ */ e("option", { value: "", children: "None" }),
+          /* @__PURE__ */ e("option", { value: "horizontal-scroll", children: "Horizontal Scroll" }),
+          /* @__PURE__ */ e("option", { value: "scroll-timeline", children: "Scroll Timeline" })
+        ]
+      }
+    ),
+    c === "horizontal-scroll" && /* @__PURE__ */ o(r, { children: [
+      /* @__PURE__ */ o(
+        t,
+        {
+          propKey: "scrollDirection",
+          propType: "component",
+          type: "select",
+          label: "Direction",
+          valueCoalesce: "ltr",
+          children: [
+            /* @__PURE__ */ e("option", { value: "ltr", children: "Left to Right" }),
+            /* @__PURE__ */ e("option", { value: "rtl", children: "Right to Left" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(
+        t,
+        {
+          propKey: "scrollSnap",
+          propType: "component",
+          type: "toggle",
+          label: "Snap to panels",
+          on: !0
+        }
+      ),
+      /* @__PURE__ */ o(
+        t,
+        {
+          propKey: "scrollSpeed",
+          propType: "component",
+          type: "select",
+          label: "Speed",
+          valueCoalesce: 1.5,
+          children: [
+            /* @__PURE__ */ e("option", { value: "1", children: "Fast" }),
+            /* @__PURE__ */ e("option", { value: "1.5", children: "Normal" }),
+            /* @__PURE__ */ e("option", { value: "2", children: "Slow" }),
+            /* @__PURE__ */ e("option", { value: "3", children: "Very Slow" })
+          ]
+        }
+      )
+    ] }),
+    c === "scroll-timeline" && /* @__PURE__ */ o(
+      t,
+      {
+        propKey: "scrollTimelineRunway",
+        propType: "component",
+        type: "select",
+        label: "Runway",
+        children: [
+          /* @__PURE__ */ e("option", { value: "2", children: "Short" }),
+          /* @__PURE__ */ e("option", { value: "3", children: "Normal" }),
+          /* @__PURE__ */ e("option", { value: "5", children: "Long" }),
+          /* @__PURE__ */ e("option", { value: "8", children: "Epic" })
+        ]
+      }
+    ),
+    c && /* @__PURE__ */ o(t, { propKey: "scrollSmoothing", propType: "component", type: "select", label: "Smoothing", children: [
+      /* @__PURE__ */ e("option", { value: "0", children: "None (instant)" }),
+      /* @__PURE__ */ e("option", { value: "0.5", children: "Light" }),
+      /* @__PURE__ */ e("option", { value: "0.8", children: "Normal" }),
+      /* @__PURE__ */ e("option", { value: "1.5", children: "Heavy" })
+    ] })
+  ] }) : /* @__PURE__ */ e(r, { children: f ? /* @__PURE__ */ o(r, { children: [
+    /* @__PURE__ */ o("p", { className: "text-neutral-content text-xs leading-relaxed", children: [
+      "Scroll effects only run when this container is a",
+      " ",
+      /* @__PURE__ */ e("span", { className: "text-base-content font-medium", children: "section" }),
+      ". Use the button, or set this container's type to Section in component settings."
+    ] }),
+    /* @__PURE__ */ e(
+      S,
+      {
+        className: "mt-2",
+        icon: null,
+        onClick: () => s.setProp(i, (l) => {
+          l.type = "section";
+        }),
+        children: "Use section type"
+      }
+    )
+  ] }) : /* @__PURE__ */ e("p", { className: "text-neutral-content text-xs leading-relaxed", children: "Scroll effects are not available for this container role (e.g. header, footer, or page). Use a section block inside this area if you need scroll effects." }) }) });
+}
+export {
+  E as ContainerScrollEffectSection
+};