@pagehub/sdk 0.1.5 → 0.1.7

package/dist/chunks/ContainerMainTab-kkktm1Ns.js

@@ -0,0 +1,1107 @@
+import { jsxs as B, Fragment as J, jsx as t } from "react/jsx-runtime";
+import { u as z, V as D, E as G, g as F, r as ze, a as Le, p as Oe, b as Be, c as se, C as ie, e as fe, t as Ee, T as Me, P as ne, d as Re, S as be, f as He, s as ue, h as de, i as oe, j as me, k as ye, l as Fe, m as Ve, n as V, o as he, q as _e, v as $e, w as we, x as De } from "./index-C66dAl3Q.js";
+import { u as Ge, L as We } from "./useLayoutPreset-wOMV5YnO.js";
+import { r as je } from "./helpers-Cll72tMn.js";
+import { TailwindInput as qe } from "./TailwindInput-660FZtyK.js";
+import { useNode as E, useEditor as W } from "@craftjs/core";
+import d, { useState as Q, useMemo as le, useCallback as Z, Suspense as ve, lazy as Ce, useEffect as ke, useRef as Ue } from "react";
+import { u as Pe } from "./usePopoverPosition-83Vti7Aw.js";
+import { ROOT_NODE as ce } from "@craftjs/utils";
+import { c as Je, T as ae } from "./uiPrimitives-BtohldWg.js";
+import { f as Qe } from "./formatStorage-C3o2s3dk.js";
+import { U as re } from "./index-B-GJd039.js";
+import { P as Xe, p as Ye } from "./popoverOpenRequestAtom-hBS_siXv.js";
+import { S as Ze } from "./SlotRenderer-CaLf_2_C.js";
+var Te = /* @__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))(Te || {});
+const et = () => {
+  var s, i;
+  const { parent: e, currentNodeType: a, isCanvas: o } = E((c) => {
+    var p;
+    return {
+      parent: c.data.parent,
+      currentNodeType: (p = c.data.props) == null ? void 0 : p.type,
+      isCanvas: c.data.isCanvas
+    };
+  }), { query: n } = W(), r = n.node(e || ce).get(), l = (i = (s = r == null ? void 0 : r.data) == null ? void 0 : s.props) == null ? void 0 : i.type;
+  return Object.values(Te).includes(a) ? a : l === "page" ? "section" : o ? "container" : null;
+}, tt = () => {
+  var s, i, c;
+  const e = et(), { parent: a } = E((p) => ({
+    parent: p.data.parent
+  })), { query: o } = W(), n = o.node(a || ce).get(), r = (s = n == null ? void 0 : n.data) != null && s.parent ? o.node(n.data.parent).get() : null, l = ((c = (i = r == null ? void 0 : r.data) == null ? void 0 : i.props) == null ? void 0 : c.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: l
+  };
+}, nt = Ce(() => import("./ColorPanel-DOLrT-gS.js")), ge = 280, ot = 540;
+function at(e) {
+  const {
+    propKey: a,
+    label: o = "",
+    prefix: n = "",
+    index: r = null,
+    propItemKey: l = "",
+    propType: s = "class",
+    onChange: i = () => {
+    },
+    labelHide: c = !1,
+    inline: p = !1,
+    inputWidth: y = "",
+    labelWidth: P = ""
+  } = e, [g, w] = Q(!1), { triggerRef: m, initialPos: u, setInitialPos: v, computePosition: x } = Pe(ge), T = z(D), h = z(G).dark ?? !1, { actions: f, query: S } = W(), {
+    actions: { setProp: M },
+    nodeProps: X,
+    id: j
+  } = E((L) => {
+    var H;
+    return {
+      nodeProps: ((H = L.data) == null ? void 0 : H.props) || {},
+      id: L.id
+    };
+  }), { value: C } = F(e, T, X, h), k = C || "", N = le(() => {
+    var L;
+    try {
+      const H = S.node(ce).get();
+      return ze(((L = H == null ? void 0 : H.data) == null ? void 0 : L.props) || {}).palette;
+    } catch {
+      return [];
+    }
+  }, [S]), b = Le(k, n), [, I] = Oe(b, n), O = Be(b, n, N), R = !!String(k ?? "").trim(), q = O.backgroundColor ?? "", Se = !R || Je(q), Y = s === "class" ? fe(T) : void 0, U = Z(
+    (L) => {
+      se({
+        propKey: a,
+        index: r,
+        propItemKey: l,
+        propType: s,
+        value: L,
+        setProp: M,
+        query: S,
+        actions: f,
+        nodeId: j,
+        ...s === "class" && Y != null ? { view: Y, classDark: h } : {}
+      }), i(I, L);
+    },
+    [
+      f,
+      h,
+      Y,
+      I,
+      j,
+      r,
+      i,
+      l,
+      a,
+      s,
+      S,
+      M
+    ]
+  ), Ne = Z(
+    (L) => {
+      if (!L) return;
+      const H = Qe(L, n);
+      U(H);
+    },
+    [n, U]
+  ), pe = Z(() => {
+    U("");
+  }, [U]), Ae = () => {
+    v(x()), w(!0);
+  }, Ke = R ? I || "Color" : "Pick color";
+  return /* @__PURE__ */ B(J, { children: [
+    /* @__PURE__ */ t(
+      ie,
+      {
+        mode: "popover",
+        ref: m,
+        label: c ? void 0 : o,
+        index: r,
+        propType: s,
+        propKey: a,
+        propItemKey: l,
+        labelWidth: P,
+        open: g,
+        onTriggerClick: () => g ? w(!1) : Ae(),
+        onClear: () => {
+          g && w(!1), pe();
+        },
+        triggerAriaLabel: R ? "Edit color" : "Pick color",
+        clearAriaLabel: "Clear color",
+        variant: R ? "preview" : "default",
+        leading: R ? /* @__PURE__ */ B(J, { children: [
+          Se && /* @__PURE__ */ t(
+            "span",
+            {
+              className: "pointer-events-none absolute inset-0 z-0",
+              style: ae,
+              "aria-hidden": !0
+            }
+          ),
+          /* @__PURE__ */ t(
+            "span",
+            {
+              className: "pointer-events-none absolute inset-0 z-[1]",
+              style: { backgroundColor: q },
+              "aria-hidden": !0
+            }
+          )
+        ] }) : /* @__PURE__ */ t(
+          "span",
+          {
+            className: "block size-3.5 rounded-sm border",
+            style: {
+              backgroundColor: "transparent",
+              ...ae,
+              borderColor: "var(--base-300)"
+            },
+            "aria-hidden": !0
+          }
+        ),
+        summary: R ? null : Ke
+      }
+    ),
+    g && /* @__PURE__ */ t(ve, { fallback: null, children: /* @__PURE__ */ t(
+      nt,
+      {
+        initialPosition: u,
+        onClose: () => w(!1),
+        defaultWidth: ge,
+        defaultHeight: ot,
+        value: k,
+        onChange: Ne,
+        onClear: pe
+      }
+    ) })
+  ] });
+}
+function Ie(e, a, o, n, r) {
+  if (e.input.type === "bundle")
+    return e.input.properties.some(
+      (i) => Ie(i, a, o, n, r)
+    );
+  if (e.input.type === "shorthand") {
+    for (const i of e.input.modes)
+      for (const c of i.tags) {
+        const p = F(
+          { propKey: c, propType: "class" },
+          n,
+          { className: a },
+          r
+        );
+        if (p.value != null && p.value !== "") return !0;
+      }
+    return !1;
+  }
+  if (e.input.type === "multi-toggle") {
+    for (const i of e.input.toggles) {
+      const c = F(
+        { propKey: i.propKey, propType: "class" },
+        n,
+        { className: a },
+        r
+      );
+      if (c.value != null && c.value !== "") return !0;
+    }
+    return !1;
+  }
+  const l = e.propType || "class";
+  if (l === "component") {
+    const i = o[e.propKey || e.id];
+    return i != null && i !== "";
+  }
+  const s = F(
+    { propKey: e.propKey || e.id, propType: l },
+    n,
+    { className: a },
+    r
+  );
+  return s.value != null && s.value !== "";
+}
+function rt(e) {
+  const a = z(D), o = z(G).dark ?? !1, n = E((i) => {
+    var c, p, y;
+    return {
+      className: ((p = (c = i.data) == null ? void 0 : c.props) == null ? void 0 : p.className) || "",
+      componentProps: ((y = i.data) == null ? void 0 : y.props) || {}
+    };
+  });
+  if (e.input.type === "bundle" || e.input.type === "shorthand")
+    return Ie(
+      e,
+      n.className,
+      n.componentProps,
+      a,
+      o
+    );
+  const r = e.propKey || e.id, l = e.propType || "class";
+  if (l === "component") {
+    const i = n.componentProps[r];
+    return i != null && i !== "";
+  }
+  const s = F(
+    { propKey: r, propType: l },
+    a,
+    { className: n.className },
+    o
+  );
+  return s.value != null && s.value !== "";
+}
+const st = /* @__PURE__ */ new Set([
+  "ActionsAddPicker",
+  "AnimationsInput",
+  "ConditionsAddPicker",
+  "HandlersAddPicker",
+  "StateBindingsAddPicker",
+  "GradientInput",
+  "PatternInput",
+  "BackgroundImageInput",
+  "EffectRowInput",
+  "ComponentImportExport",
+  "NodeAiContextSection",
+  "ContainerOverflowSection",
+  "ModifiersAddPicker"
+]);
+function it(e) {
+  return typeof e == "string" && st.has(e);
+}
+function lt({
+  active: e,
+  done: a,
+  onComplete: o,
+  overlay: n,
+  size: r = "default",
+  className: l
+}) {
+  const [s, i] = Q(0);
+  if (ke(() => {
+    if (!e) {
+      i(0);
+      return;
+    }
+    if (typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      i(a ? 100 : 66);
+      return;
+    }
+    if (a) {
+      i(100);
+      const x = setTimeout(() => o == null ? void 0 : o(), 200);
+      return () => clearTimeout(x);
+    }
+    const g = n ? 5 : 8, w = n ? 91 : 93, m = 520;
+    i(g);
+    const u = Date.now(), v = window.setInterval(() => {
+      const x = Date.now() - u, T = Math.min(w, g + (w - g) * (1 - Math.exp(-x / m)));
+      i(T);
+    }, 45);
+    return () => window.clearInterval(v);
+  }, [e, a, n, o]), !e) return null;
+  const c = r === "sm" ? "h-1 w-full max-w-none overflow-hidden rounded-full bg-base-300/90 dark:bg-white/10" : "h-2 w-full max-w-xs overflow-hidden rounded-full bg-gray-200 dark:bg-white/12", p = r === "sm" ? "h-full rounded-full bg-base-content/45 transition-[width] duration-150 ease-out will-change-[width] dark:bg-white/55" : "h-full rounded-full bg-gray-700 transition-[width] duration-150 ease-out will-change-[width] dark:bg-white/80", y = /* @__PURE__ */ t(
+    "div",
+    {
+      className: Ee(c, l),
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": Math.round(s),
+      "aria-label": "Loading",
+      children: /* @__PURE__ */ t("div", { className: p, style: { width: `${Math.max(2, s)}%` } })
+    }
+  );
+  return n ? /* @__PURE__ */ t(
+    "div",
+    {
+      className: "pointer-events-none absolute inset-0 z-20 flex flex-col items-center justify-center gap-3 bg-white/55 backdrop-blur-md dark:bg-black/45",
+      "aria-busy": "true",
+      "aria-label": "Loading",
+      children: y
+    }
+  ) : y;
+}
+function Ft() {
+  return /* @__PURE__ */ t("div", { className: "py-2", "aria-busy": "true", "aria-label": "Loading controls", children: /* @__PURE__ */ t(lt, { active: !0, done: !1, size: "sm" }) });
+}
+const _ = "bg-base-content/5 animate-pulse rounded";
+function xe() {
+  return /* @__PURE__ */ B("div", { className: "flex h-8 items-center gap-0.5", "aria-busy": "true", "aria-label": "Loading control", children: [
+    /* @__PURE__ */ t("span", { className: `${_} h-3 w-20 shrink-0`, "aria-hidden": !0 }),
+    /* @__PURE__ */ t("span", { className: `${_} ml-0.5 h-8 min-w-0 flex-1`, "aria-hidden": !0 })
+  ] });
+}
+function ct() {
+  return /* @__PURE__ */ B("div", { className: "flex flex-col gap-2", "aria-busy": "true", "aria-label": "Loading section", children: [
+    /* @__PURE__ */ t("span", { className: `${_} h-3 w-1/3`, "aria-hidden": !0 }),
+    /* @__PURE__ */ t("span", { className: `${_} h-8 w-full`, "aria-hidden": !0 }),
+    /* @__PURE__ */ t("span", { className: `${_} h-8 w-2/3`, "aria-hidden": !0 })
+  ] });
+}
+function pt() {
+  return /* @__PURE__ */ t("div", { className: "flex h-8 items-center", "aria-busy": "true", "aria-label": "Loading control", children: /* @__PURE__ */ t("span", { className: `${_} h-8 w-full`, "aria-hidden": !0 }) });
+}
+const $ = (e) => ({
+  lazy: e,
+  fallback: /* @__PURE__ */ t(xe, {})
+}), K = (e) => ({
+  lazy: e,
+  fallback: /* @__PURE__ */ t(ct, {})
+}), A = (e) => ({
+  lazy: e,
+  fallback: /* @__PURE__ */ t(pt, {})
+}), ut = {
+  TypographyPresetInput: $(
+    d.lazy(
+      () => import("./TypographyPresetInput-DqnGSgR2.js").then((e) => e.T).then((e) => ({
+        default: e.TypographyPresetInput
+      }))
+    )
+  ),
+  FontFamilyInput: $(
+    d.lazy(
+      () => import("./FontFamilyInput-CVNnVylt.js").then((e) => ({
+        default: e.FontFamilyInput
+      }))
+    )
+  ),
+  LayoutPresetSlot: $(
+    d.lazy(
+      () => import("./LayoutPresetSlot-BqMTdE33.js").then((e) => ({
+        default: e.LayoutPresetSlot
+      }))
+    )
+  ),
+  PropertiesInput: K(
+    d.lazy(
+      () => import("./PropertiesInput-9O39ngbb.js").then((e) => ({ default: e.PropertiesInput }))
+    )
+  ),
+  // Popover variant — chip + FloatingPanel hosting the AI context editor.
+  NodeAiContextSection: A(
+    d.lazy(() => import("./NodeAiContextInputPopover-D5bn5o_T.js"))
+  ),
+  // Popover variant — chip + FloatingPanel hosting the import/export editor.
+  ComponentImportExport: A(
+    d.lazy(() => import("./ComponentImportExportPopover-BY1_oxU8.js"))
+  ),
+  PermissionsSection: K(
+    d.lazy(
+      () => import("./PermissionsSection-DwobrV40.js").then((e) => ({ default: e.PermissionsSection }))
+    )
+  ),
+  // Body — N editable condition chips. Each chip lazy-loads its own
+  // ConditionEditorPanel on click. Pinned (always renders) so the empty
+  // body is fine until the user picks the first type from the header `+`.
+  ConditionsInput: K(
+    d.lazy(
+      () => import("./ConditionsInput-B_5Nge8o.js").then((e) => e.e).then((e) => ({ default: e.ConditionsInput }))
+    )
+  ),
+  // Section-header `+` picker. Popover-mode so AccordionAddMenu mounts it
+  // inside the conditions section title row. Picking a category appends a
+  // condition to `props.conditionGroups` and the body auto-opens the new chip.
+  ConditionsAddPicker: A(d.lazy(() => import("./ConditionsAddPicker-SsHJlc1E.js"))),
+  // State bindings — `props.stateModifiers` array. When the named state matches
+  // the binding's conditions at runtime, modifier classes are appended to the
+  // node's className.
+  StateBindingsInput: K(
+    d.lazy(
+      () => import("./StateBindingsInput-iWiqvAVB.js").then((e) => ({
+        default: e.StateBindingsInput
+      }))
+    )
+  ),
+  StateBindingsAddPicker: A(d.lazy(() => import("./StateBindingsAddPicker-DxMNAWAD.js"))),
+  // Container-only state-registry wiring: visibilityStateKey + computedStateBindings.
+  // Renders alongside StateBindingsInput in the Interactions > State section.
+  ContainerStateBody: K(
+    d.lazy(
+      () => import("./ContainerStateSection-DY_gjBJL.js").then((e) => ({
+        default: e.ContainerStateBody
+      }))
+    )
+  ),
+  // Popover variant — chip + FloatingPanel.
+  AnimationsInput: A(d.lazy(() => import("./AnimationsInputPopover-B2-oNebx.js"))),
+  ContainerScrollEffectSection: K(
+    d.lazy(
+      () => import("./ContainerScrollEffectSection-Dbztqdnr.js").then((e) => ({
+        default: e.ContainerScrollEffectSection
+      }))
+    )
+  ),
+  // Popover variant — chip + FloatingPanel for each effect row.
+  EffectRowInput: A(
+    d.lazy(() => import("./EffectRowInputPopover-CYhfjFwJ.js"))
+  ),
+  // Popover variant — chip + FloatingPanel hosting the overflow editor.
+  ContainerOverflowSection: A(
+    d.lazy(() => import("./ContainerOverflowSectionPopover-CRQ9EPsn.js"))
+  ),
+  DataSourceSectionSlot: K(
+    d.lazy(
+      () => import("./DataSourceSectionSlot-BKoO6Vxn.js").then((e) => ({ default: e.DataSourceSectionSlot }))
+    )
+  ),
+  // Popover variant — chip with image thumbnail + label, opens FloatingPanel
+  // hosting the slim media picker. The chip's `trailingExtras` slot renders
+  // a sliders icon that opens `ImageSettingsPanel` (Focal Point + the 9
+  // registered `image-settings` properties) — same trailingExtras pattern
+  // docs §1 documents (Layout chip's "+ Add container", show-hide chip's
+  // eye toggle).
+  BackgroundImageInput: A(
+    d.lazy(() => import("./BackgroundImageInputPopover-vB_217Ig.js"))
+  ),
+  // Popover variant — chip with pattern thumbnail + label, opens FloatingPanel editor.
+  PatternInput: A(d.lazy(() => import("./PatternInputPopover-qMWBv_nl.js"))),
+  // Popover variant — chip with gradient swatch + label, opens FloatingPanel editor.
+  GradientInput: A(d.lazy(() => import("./GradientInputPopover-1K6O9jBq.js"))),
+  ClassNameInput: K(
+    d.lazy(
+      () => import("./ClassNameInput-Ce0fGQES.js").then((e) => ({ default: e.ClassNameInput }))
+    )
+  ),
+  // List-style Action section (mirrors Conditions): body chip-list + header
+  // `+` picker. Each action chip lazy-loads its own ActionEditorPanel on
+  // click. See ActionsInput.tsx + docs/sdk/editor-popover-pattern.md §8.
+  ActionsInput: K(
+    d.lazy(
+      () => import("./ActionsInput-D0h-zLYj.js").then((e) => ({ default: e.ActionsInput }))
+    )
+  ),
+  ActionsAddPicker: A(d.lazy(() => import("./ActionsAddPicker-BeTPUUor.js"))),
+  // Sibling Handlers section — chip-list of `props.handlers` (event → JS
+  // string map). Each handler chip lazy-loads its own HandlerEditorPanel.
+  // See HandlersInput.tsx + docs/sdk/editor-popover-pattern.md §8.
+  HandlersInput: K(
+    d.lazy(
+      () => import("./HandlersInput-p49STTn8.js").then((e) => ({ default: e.HandlersInput }))
+    )
+  ),
+  HandlersAddPicker: A(d.lazy(() => import("./HandlersAddPicker-DWTgjKgo.js").then((e) => e.c))),
+  FlexDirectionInput: $(
+    d.lazy(
+      () => import("./FlexDirectionInput-C5gYjk5W.js").then((e) => ({
+        default: e.FlexDirectionInput
+      }))
+    )
+  ),
+  TailwindInput: $(
+    d.lazy(
+      () => import("./TailwindInput-660FZtyK.js").then((e) => ({ default: e.TailwindInput }))
+    )
+  ),
+  // Body — N modifier chips (one per `props.root.activeModifiers` entry).
+  // X removes the modifier; click dispatches an open-request to the picker.
+  ModifierChipList: K(
+    d.lazy(
+      () => import("./ModifierChipList-CwsWklih.js").then((e) => ({
+        default: e.ModifierChipList
+      }))
+    )
+  ),
+  // Section-header `+` picker. Popover-mode so AccordionAddMenu mounts it
+  // inside the modifiers section title row. Opens a FloatingPanel with the
+  // categorized preview-rich library (Pattern cards, exclusive segmented
+  // controls, dropdowns, free chips) and the "Save as modifier" footer.
+  ModifiersAddPicker: A(d.lazy(() => import("./ModifiersAddPicker-D-vSYw7O.js"))),
+  // Component-tab affordance for preset wrappers — Add Item / delete-row UI
+  // driven by `node.data.custom.preset` + `presetRegistry.ts`. See
+  // packages/sdk/src/chrome/toolbar/inputs/preset/PresetAddChildList.tsx.
+  PresetAddChildList: K(
+    d.lazy(
+      () => import("./PresetAddChildList-D6a0xdt8.js").then((e) => ({
+        default: e.PresetAddChildList
+      }))
+    )
+  )
+}, ee = /* @__PURE__ */ new Map();
+function dt(e) {
+  if (typeof e != "string") return e;
+  const a = ee.get(e);
+  if (a) return a;
+  const o = ut[e];
+  if (!o) {
+    const s = () => null;
+    return ee.set(e, s), s;
+  }
+  const { lazy: n, fallback: r } = o, l = (s) => /* @__PURE__ */ t(d.Suspense, { fallback: r ?? /* @__PURE__ */ t(xe, {}), children: /* @__PURE__ */ t(n, { ...s }) });
+  return l.displayName = `CustomInput(${e})`, ee.set(e, l), l;
+}
+function mt({ def: e, config: a }) {
+  var T;
+  const { modes: o, tailwindKey: n, varSelectorPrefix: r, allowedTypes: l } = a, s = z(D), i = z(G).dark ?? !1, {
+    actions: { setProp: c },
+    className: p
+  } = E((h) => {
+    var f, S;
+    return {
+      className: typeof ((S = (f = h.data) == null ? void 0 : f.props) == null ? void 0 : S.className) == "string" ? h.data.props.className : ""
+    };
+  }), y = (h) => {
+    const f = F(
+      { propKey: h, propType: "class" },
+      s,
+      { className: p },
+      i
+    );
+    return f.value != null && f.value !== "";
+  }, P = le(() => {
+    var h;
+    for (let f = o.length - 1; f >= 0; f--)
+      if (o[f].tags.some(y)) return o[f].id;
+    return (h = o[0]) == null ? void 0 : h.id;
+  }, [p, s, i]), [g, w] = Q(P), m = o.find((h) => h.id === g) ?? o[0], u = (h) => {
+    if (h.id === g) return;
+    const f = new Set(h.tags);
+    for (const S of o)
+      for (const M of S.tags)
+        f.has(M) || se({ propKey: M, value: "", propType: "class", setProp: c, view: s, classDark: i });
+    w(h.id);
+  }, v = m.columns ?? m.tags.length, x = m.tags.length === 1;
+  return /* @__PURE__ */ B("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ B("div", { className: "flex items-center gap-0.5", children: [
+      /* @__PURE__ */ t("span", { className: "text-base-content w-20 shrink-0 cursor-default truncate text-xs", children: e.label }),
+      /* @__PURE__ */ t("div", { className: "min-w-0 flex-1", children: x ? /* @__PURE__ */ t(
+        re,
+        {
+          propKey: m.tags[0],
+          propTag: m.tags[0],
+          tailwindKey: ((T = m.tailwindKeys) == null ? void 0 : T[0]) ?? n,
+          label: "",
+          labelHide: !0,
+          showVarSelector: !!r,
+          allowedTypes: l,
+          inline: !0
+        }
+      ) : /* @__PURE__ */ t("div", { className: "text-neutral-content flex h-8 items-center text-xs italic opacity-60", children: m.ariaLabel }) }),
+      /* @__PURE__ */ t(yt, { modes: o, activeId: g, onChange: u })
+    ] }),
+    !x && /* @__PURE__ */ t(
+      "div",
+      {
+        className: "grid gap-1.5",
+        style: { gridTemplateColumns: `repeat(${v}, minmax(0, 1fr))` },
+        children: m.tags.map((h, f) => {
+          var S;
+          return /* @__PURE__ */ t("div", { className: "min-w-0", children: /* @__PURE__ */ t(
+            re,
+            {
+              propKey: h,
+              propTag: h,
+              tailwindKey: ((S = m.tailwindKeys) == null ? void 0 : S[f]) ?? n,
+              label: m.labels[f],
+              labelWidth: "w-6",
+              showVarSelector: !!r,
+              allowedTypes: l,
+              inline: !0
+            }
+          ) }, h);
+        })
+      }
+    )
+  ] });
+}
+function yt({
+  modes: e,
+  activeId: a,
+  onChange: o
+}) {
+  return /* @__PURE__ */ t(
+    Me,
+    {
+      compact: !0,
+      optionClassName: "w-7",
+      tooltipId: ne,
+      value: a,
+      onChange: (n) => {
+        const r = e.find((l) => l.id === n);
+        r && o(r);
+      },
+      options: e.map((n) => ({
+        value: n.id,
+        label: n.icon,
+        tooltip: n.ariaLabel,
+        ariaLabel: n.ariaLabel
+      }))
+    }
+  );
+}
+const ht = Ce(() => import("./BundleRowPanel-BcYfyfGQ.js")), gt = 300;
+function ft({ def: e, properties: a, icon: o }) {
+  const [n, r] = Q(!1), { triggerRef: l, initialPos: s, setInitialPos: i, computePosition: c } = Pe(gt), [p, y] = Re(be), P = z(D), g = z(G).dark ?? !1, {
+    actions: { setProp: w },
+    id: m,
+    className: u,
+    componentProps: v
+  } = E((C) => {
+    var k, N, b;
+    return {
+      nodeId: C.id,
+      className: typeof ((N = (k = C.data) == null ? void 0 : k.props) == null ? void 0 : N.className) == "string" ? C.data.props.className : "",
+      componentProps: ((b = C.data) == null ? void 0 : b.props) || {}
+    };
+  }), x = le(() => {
+    const C = [];
+    for (const k of a) {
+      const N = k.propKey || k.id, b = k.propType || "class";
+      if (b === "class") {
+        const { value: I } = F(
+          { propKey: N, propType: "class" },
+          P,
+          { className: u },
+          g
+        );
+        I && typeof I == "string" && C.push(He(I, N));
+      } else if (b === "component" || b === "root") {
+        const I = v == null ? void 0 : v[N];
+        I != null && I !== "" && (typeof I == "string" || typeof I == "number") && C.push(String(I));
+      }
+      if (C.length >= 2) break;
+    }
+    return C.length ? C.join(" · ") : "Add...";
+  }, [a, u, v, P, g]), T = a.find((C) => C.input.type === "color"), h = T ? T.propKey || T.id : null, f = (() => {
+    if (!T || !h) return null;
+    for (const C of (u || "").trim().split(/\s+/)) {
+      if (!C) continue;
+      const { base: k } = ue(C);
+      if (!de(k, h)) continue;
+      const N = k.startsWith(`${T.input.prefix}-`) ? k.slice(T.input.prefix.length + 1) : "";
+      if (N) return `bg-${N}`;
+    }
+    return null;
+  })(), S = () => {
+    i(c()), r(!0);
+  }, M = Ue(!1);
+  ke(() => {
+    M.current || p.has(oe(m, e.id)) && (requestAnimationFrame(() => {
+      i(c()), r(!0);
+    }), M.current = !0);
+  }, [p, m, e.id]);
+  const X = (C) => {
+    const k = a.filter((b) => (b.propType || "class") === "class").map((b) => b.propKey || b.id);
+    w((b) => {
+      const I = typeof b.className == "string" ? b.className : "";
+      b.className = I.trim().split(/\s+/).filter((O) => {
+        if (!O) return !1;
+        const { base: R } = ue(O);
+        return !k.some((q) => de(R, q));
+      }).join(" ");
+      for (const O of a)
+        (O.propType || "class") !== "class" && delete b[O.propKey || O.id];
+      Array.isArray(b.toolbarOrder) && (b.toolbarOrder = b.toolbarOrder.filter((O) => O !== e.id));
+    }, 0);
+    const N = new Set(p);
+    N.delete(oe(m, e.id)), y(N), r(!1);
+  }, j = T ? /* @__PURE__ */ t(
+    "span",
+    {
+      className: "border-base-300 relative size-4 shrink-0 overflow-hidden rounded border",
+      style: f ? void 0 : ae,
+      "aria-hidden": !0,
+      children: f && /* @__PURE__ */ t("span", { className: `absolute inset-0 ${f}`, "aria-hidden": !0 })
+    }
+  ) : o || null;
+  return /* @__PURE__ */ B(J, { children: [
+    /* @__PURE__ */ t(
+      ie,
+      {
+        mode: "popover",
+        ref: l,
+        label: e.label,
+        open: n,
+        onTriggerClick: () => n ? r(!1) : S(),
+        onClear: () => X(),
+        triggerAriaLabel: `Edit ${e.label}`,
+        clearAriaLabel: `Remove ${e.label}`,
+        leading: j,
+        summary: x
+      }
+    ),
+    n && /* @__PURE__ */ t(ve, { fallback: null, children: /* @__PURE__ */ t(
+      ht,
+      {
+        title: e.label,
+        icon: o,
+        storageKey: `bundle-${e.id}`,
+        initialPosition: s,
+        onClose: () => r(!1),
+        properties: a
+      }
+    ) })
+  ] });
+}
+const bt = ({ def: e }) => {
+  const a = z(D), o = z(G).dark ?? !1, n = fe(a), { actions: r, query: l } = W(), {
+    actions: { setProp: s },
+    nodeProps: i,
+    id: c
+  } = E((u) => {
+    var v;
+    return {
+      nodeProps: ((v = u.data) == null ? void 0 : v.props) || {},
+      id: u.id
+    };
+  });
+  if (e.input.type !== "multi-toggle") return null;
+  const { toggles: p } = e.input, y = i.className || "", P = p.map((u) => {
+    const { value: v } = F(
+      { propKey: u.propKey, propType: "class" },
+      a,
+      { className: y },
+      o
+    );
+    return v === u.className;
+  }), g = (u, v) => {
+    se({
+      propKey: p[u].propKey,
+      propType: "class",
+      value: v,
+      setProp: s,
+      query: l,
+      actions: r,
+      nodeId: c,
+      view: n,
+      classDark: o
+    });
+  }, w = () => {
+    for (let u = 0; u < p.length; u++) g(u, "");
+  }, m = P.some(Boolean);
+  return /* @__PURE__ */ t(ie, { frame: "bare", label: e.label, propKey: e.id, propType: "class", children: /* @__PURE__ */ B("div", { role: "group", className: "bg-neutral flex w-full min-w-0 gap-1 rounded-md p-1", children: [
+    /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        onClick: w,
+        disabled: !m,
+        "data-tooltip-id": ne,
+        "data-tooltip-content": "None",
+        className: `flex h-6 min-w-0 flex-1 items-center justify-center rounded text-[11px] leading-tight font-medium transition-colors ${m ? me : ye}`,
+        "aria-label": "Clear all",
+        "aria-pressed": !m,
+        children: /* @__PURE__ */ t(Fe, { className: "size-3.5", "aria-hidden": !0 })
+      }
+    ),
+    p.map((u, v) => {
+      const x = P[v];
+      return /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          onClick: () => g(v, x ? "" : u.className),
+          "data-tooltip-id": ne,
+          "data-tooltip-content": u.tooltip,
+          "aria-label": u.tooltip,
+          "aria-pressed": x,
+          className: `flex h-6 min-w-0 flex-1 items-center justify-center rounded text-[11px] leading-tight font-medium transition-colors ${x ? ye : me}`,
+          children: u.icon
+        },
+        u.propKey + u.className
+      );
+    })
+  ] }) });
+};
+function wt({ def: e, index: a }) {
+  const o = rt(e), { id: n } = E(), r = z(be), l = z(Xe);
+  if (e.pinned) return /* @__PURE__ */ t(te, { def: e, index: a });
+  if (e.input.type === "custom" && it(e.input.component)) return /* @__PURE__ */ t(te, { def: e, index: a });
+  const i = r.has(oe(n, e.id)), c = l.has(Ye(n, e.id));
+  return !o && !i && !c ? null : /* @__PURE__ */ t(te, { def: e, index: a });
+}
+function te({ def: e, index: a }) {
+  const { id: o } = E();
+  return /* @__PURE__ */ t(Ve, { value: { nodeId: o, propId: e.id }, children: /* @__PURE__ */ t(vt, { def: e, index: a }) });
+}
+function vt({ def: e, index: a = "" }) {
+  var l;
+  const o = e.propKey || e.id, n = e.propType || "class", r = e.index || a;
+  switch (e.input.type) {
+    case "tailwind-select": {
+      const { tailwindKey: s, showVarSelector: i, varSelectorPrefix: c, propTag: p } = e.input, y = he[s];
+      return y ? p ? /* @__PURE__ */ t(qe, { propKey: o, label: e.label, prop: s, type: "select" }) : /* @__PURE__ */ t(
+        V,
+        {
+          propKey: o,
+          propType: n,
+          type: "select",
+          label: e.label,
+          max: y.length - 1,
+          min: 0,
+          valueLabels: y,
+          showVarSelector: i,
+          varSelectorPrefix: c,
+          index: r,
+          inline: e.inline
+        }
+      ) : null;
+    }
+    case "tailwind-radio": {
+      const { tailwindKey: s, options: i, cols: c } = e.input, p = i || ((l = he[s]) == null ? void 0 : l.map((y) => ({
+        label: y.replace(/^[^-]+-/, ""),
+        value: y
+      }))) || [];
+      return /* @__PURE__ */ t(
+        V,
+        {
+          propKey: o,
+          propType: n,
+          type: "radio",
+          label: e.label,
+          options: [{ label: "—", value: "" }, ...p],
+          cols: c,
+          inline: e.inline !== !1,
+          index: r
+        }
+      );
+    }
+    case "multi-toggle":
+      return /* @__PURE__ */ t(bt, { def: e });
+    case "universal": {
+      const { propTag: s, allowedTypes: i, showVarSelector: c, labelWidth: p, tailwindKey: y, tailwindOptions: P } = e.input;
+      return /* @__PURE__ */ t(
+        re,
+        {
+          propKey: o,
+          propType: n,
+          propTag: s,
+          label: e.label,
+          allowedTypes: i,
+          showVarSelector: c,
+          labelWidth: p,
+          tailwindKey: y,
+          tailwindOptions: P,
+          index: r,
+          inline: e.inline
+        }
+      );
+    }
+    case "color": {
+      const { prefix: s } = e.input;
+      return /* @__PURE__ */ t(
+        at,
+        {
+          propKey: o,
+          label: e.label,
+          prefix: s,
+          propType: n,
+          index: r,
+          inline: e.inline !== !1
+        }
+      );
+    }
+    case "checkbox": {
+      const { on: s, off: i } = e.input;
+      return /* @__PURE__ */ t(
+        V,
+        {
+          propKey: o,
+          propType: n,
+          type: "checkbox",
+          label: e.label,
+          on: s,
+          option: i || "",
+          labelHide: !0,
+          index: r,
+          inline: e.inline,
+          inputWidth: "w-fit"
+        }
+      );
+    }
+    case "text":
+      return /* @__PURE__ */ t(
+        V,
+        {
+          propKey: o,
+          propType: n,
+          type: "text",
+          label: e.label,
+          placeholder: e.input.placeholder,
+          labelHide: !0,
+          index: r,
+          inline: e.inline
+        }
+      );
+    case "select":
+      return /* @__PURE__ */ t(
+        V,
+        {
+          propKey: o,
+          propType: n,
+          type: "select",
+          label: e.label,
+          index: r,
+          inline: e.inline,
+          children: e.input.options.map((s) => /* @__PURE__ */ t("option", { value: s.value, children: s.label }, String(s.value)))
+        }
+      );
+    case "custom": {
+      const s = dt(e.input.component);
+      return /* @__PURE__ */ t(s, { def: e, index: r });
+    }
+    case "shorthand": {
+      const { type: s, ...i } = e.input;
+      return /* @__PURE__ */ t(mt, { def: e, index: r, config: i });
+    }
+    case "bundle":
+      return /* @__PURE__ */ t(
+        ft,
+        {
+          def: e,
+          index: r,
+          properties: e.input.properties,
+          icon: e.input.icon
+        }
+      );
+    default:
+      return null;
+  }
+}
+const Ct = [
+  {
+    id: "bgColor",
+    label: "Color",
+    section: "background",
+    keywords: ["color", "fill", "bg", "background"],
+    input: { type: "color", prefix: "bg" },
+    hideKey: "bgColor",
+    pinned: !1,
+    sortOrder: 0,
+    inline: !0
+  },
+  {
+    id: "bgImage",
+    label: "Image",
+    section: "background",
+    keywords: ["image", "photo", "picture", "url", "background"],
+    input: { type: "custom", component: "BackgroundImageInput" },
+    isActive: (e, a) => {
+      var o;
+      return !!((o = a == null ? void 0 : a.background) != null && o.image);
+    },
+    sortOrder: 10
+  },
+  {
+    id: "bgPattern",
+    label: "Pattern",
+    section: "background",
+    keywords: ["pattern", "texture", "dots", "grid", "lines", "noise"],
+    input: { type: "custom", component: "PatternInput" },
+    hideKey: "pattern",
+    sortOrder: 20
+  },
+  {
+    id: "bgGradient",
+    label: "Gradient",
+    propKey: "gradients",
+    section: "background",
+    keywords: ["gradient", "linear", "radial", "conic", "from", "to", "via"],
+    input: { type: "custom", component: "GradientInput" },
+    sortOrder: 30
+  },
+  {
+    id: "bgClip",
+    label: "Clip",
+    section: "background",
+    keywords: ["clip", "text", "border", "padding", "content"],
+    input: { type: "universal", tailwindKey: "bgClip" },
+    sortOrder: 100
+  },
+  {
+    id: "blend",
+    label: "Blend",
+    section: "background",
+    keywords: ["blend", "mode", "multiply", "screen", "overlay", "mix", "background"],
+    sortOrder: 110,
+    input: {
+      type: "bundle",
+      icon: d.createElement(_e, { className: "size-3.5" }),
+      properties: [
+        {
+          id: "bgBlend",
+          label: "Background",
+          section: "background",
+          keywords: ["blend", "mode", "multiply", "screen", "overlay"],
+          input: { type: "universal", tailwindKey: "bgBlend" },
+          inline: !0
+        },
+        {
+          id: "mixBlend",
+          label: "Mix",
+          section: "background",
+          keywords: ["mix", "blend", "mode", "multiply", "screen", "overlay"],
+          input: { type: "universal", tailwindKey: "mixBlend" },
+          inline: !0
+        }
+      ]
+    }
+  }
+], kt = Ct.find((e) => e.id === "bgImage"), Pt = () => {
+  var P;
+  const { isHeader: e, isFooter: a, isPage: o, isComponent: n } = tt(), { query: r } = W(), l = r.node("ROOT").get(), s = ((P = l == null ? void 0 : l.data) == null ? void 0 : P.nodes) || [], i = s.some((g) => {
+    var m, u;
+    const w = r.node(g).get();
+    return ((u = (m = w == null ? void 0 : w.data) == null ? void 0 : m.props) == null ? void 0 : u.type) === "header";
+  }), c = s.some((g) => {
+    var m, u;
+    const w = r.node(g).get();
+    return ((u = (m = w == null ? void 0 : w.data) == null ? void 0 : m.props) == null ? void 0 : u.type) === "footer";
+  }), p = !o && !n && !a && (!i || e), y = !o && !n && !e && (!c || a);
+  return !p && !y ? null : /* @__PURE__ */ B(
+    we,
+    {
+      title: "Container Role",
+      icon: /* @__PURE__ */ t(De, {}),
+      help: "Mark this as the site header or footer.",
+      children: [
+        p && /* @__PURE__ */ t(
+          V,
+          {
+            propKey: "type",
+            propType: "component",
+            type: "toggle",
+            option: e ? "This is the Header" : "Make this the Header",
+            on: "header"
+          }
+        ),
+        y && /* @__PURE__ */ t(
+          V,
+          {
+            propKey: "type",
+            propType: "component",
+            type: "toggle",
+            option: a ? "This is the Footer" : "Make this the Footer",
+            on: "footer"
+          }
+        ),
+        /* @__PURE__ */ t("p", { className: "text-neutral-content mt-2 text-xs", children: "Headers and footers are special containers that appear on all pages." })
+      ]
+    }
+  );
+}, Tt = () => {
+  var n;
+  const a = (n = $e().data) == null ? void 0 : n.props, o = Ge({ propKey: "layoutPreset" });
+  return (a == null ? void 0 : a.type) === "imageContainer" ? /* @__PURE__ */ t(J, { children: je({
+    Content: /* @__PURE__ */ B(we, { collapsible: !1, children: [
+      /* @__PURE__ */ t(Ze, { id: "settings/ai-button" }),
+      /* @__PURE__ */ t(wt, { def: kt })
+    ] }),
+    Type: /* @__PURE__ */ t(We, { lp: o })
+  }) }) : null;
+}, Vt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  ContainerMainTab: Tt,
+  HeaderFooterToggles: Pt
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  Vt as C,
+  Ft as L,
+  te as P,
+  wt as a,
+  it as i,
+  Ie as p,
+  dt as r
+};