@chaibuilder/pages 0.13.4 → 0.14.1

package/dist/page-creator-Chnj3W4j.js

@@ -0,0 +1,796 @@
+import { jsx as s, jsxs as n, Fragment as We } from "react/jsx-runtime";
+import { Input as M, CommandList as is, Label as I, Popover as ee, PopoverTrigger as se, Button as W, PopoverContent as le, Command as ne, CommandEmpty as ae, CommandGroup as G, CommandItem as R } from "@chaibuilder/sdk/ui";
+import { useState as y, useRef as os, useEffect as Be, useMemo as $ } from "react";
+import { r as te, S as cs, c as Oe } from "./slug-input-rAe3mMkd.js";
+import { useChaiFeatureFlag as ye, usePermissions as us, useLanguages as ms } from "@chaibuilder/sdk";
+import { isEmpty as Ie, startCase as de, filter as hs, find as ge, groupBy as ps, pick as ds, set as P } from "lodash-es";
+import { ChevronDown as re, Search as ie, Check as U } from "lucide-react";
+import { ak as Re, al as Ue, A as oe, h as fs, as as gs, b as ys, c as vs, d as Ns, aw as bs, L as Ss } from "./index-Byi6-4u1.js";
+import { useQuery as ze } from "@tanstack/react-query";
+import { toast as E } from "sonner";
+import { g as $e } from "./get-seo-defaults-9zHebckY.js";
+function ws({
+  value: l,
+  onChange: o,
+  placeholder: v = "Enter custom slug part",
+  dynamicPattern: p,
+  onValidationChange: i
+}) {
+  const [g, u] = y(null), m = os(null), [f, C] = y(p + l);
+  Be(() => {
+    C(p + l);
+  }, [l, p]);
+  const F = (b) => {
+    const S = b.target.value;
+    if (!S.startsWith(p)) {
+      const O = S.replace(p, ""), z = p + O;
+      C(z), o(O);
+      return;
+    }
+    const t = S.substring(p.length).replace(/\//g, "").replace(/\s+/g, "-").replace(/[^a-zA-Z0-9-_.]/g, "-").replace(/-+/g, "-").replace(/^-+/, "").toLowerCase(), a = (t.match(/\./g) || []).length, d = a <= 1;
+    a > 1 ? u("Invalid slug. Only one dot (.) is allowed in the slug") : u(null), i && i(d);
+    const N = p + t;
+    C(N), o(t);
+  }, w = () => {
+    if (m.current) {
+      const b = m.current;
+      setTimeout(() => {
+        const S = p.length;
+        b.setSelectionRange(S, S);
+      }, 0);
+    }
+  }, B = (b) => {
+    const S = b.currentTarget;
+    (S.selectionStart || 0) <= p.length && setTimeout(() => {
+      const t = p.length;
+      S.setSelectionRange(t, t);
+    }, 0);
+  };
+  return /* @__PURE__ */ s("div", { children: /* @__PURE__ */ n("div", { className: "relative", children: [
+    /* @__PURE__ */ n("p", { className: "text-gray-500 text-xs mb-2", children: [
+      `${p}`,
+      " is a dynamic segment of slug"
+    ] }),
+    /* @__PURE__ */ s(
+      M,
+      {
+        ref: m,
+        value: f,
+        onChange: F,
+        onFocus: w,
+        onClick: B,
+        placeholder: v,
+        className: g ? "border-red-500" : ""
+      }
+    ),
+    g && /* @__PURE__ */ s("div", { className: "text-red-500 text-xs mt-1", children: g })
+  ] }) });
+}
+const ce = ({ children: l, onWheel: o, ...v }) => /* @__PURE__ */ s(is, { ...v, onWheel: (i) => {
+  try {
+    i.preventDefault();
+    const g = i.currentTarget;
+    g.scrollTop += i.deltaY;
+  } catch {
+    i.preventDefault();
+  }
+  o && o(i);
+}, children: l }), fe = (...l) => l.filter(Boolean).join(" ");
+function xs({
+  pages: l,
+  selectedParentId: o,
+  onChange: v,
+  className: p,
+  id: i = "parentPage",
+  currentPage: g
+}) {
+  const [u, m] = y(!1), [f, C] = y(""), F = ye("enable-add-page-dropdown");
+  F || (p = "w-full rounded-md border border-gray-300 px-3 py-2");
+  const w = $(() => !l || l.length === 0 ? [] : l.filter((d) => !Ie(d.slug)).filter((d) => d.slug !== "/").sort((d, N) => d.slug.localeCompare(N.slug)), [l]), B = $(() => {
+    if (!f.trim()) return w;
+    const a = f.toLowerCase();
+    return w.filter(
+      (d) => d.name.toLowerCase().includes(a) || d.slug.toLowerCase().includes(a)
+    );
+  }, [w, f]), b = (a) => Math.max(0, (a.match(/\//g) || []).length - 1), S = (a) => "    ".repeat(a), h = (a) => {
+    if (a === "/") return "/";
+    const d = a.split("/").filter(Boolean);
+    if (d.length <= 1) {
+      const N = d[0] || "";
+      return `/${te(N)}`;
+    }
+    return `/${te(d[d.length - 1])}`;
+  }, t = () => {
+    if (!o || o === "none") return "None";
+    const a = w.find((d) => d.id === o);
+    return a ? `${a.name} (${h(a.slug)})` : "None";
+  };
+  return /* @__PURE__ */ n("div", { className: "space-y-0.5", children: [
+    /* @__PURE__ */ s(I, { htmlFor: i, className: "text-sm", children: "Parent" }),
+    F ? /* @__PURE__ */ n(ee, { open: u, onOpenChange: m, children: [
+      /* @__PURE__ */ s(se, { asChild: !0, children: /* @__PURE__ */ n(
+        W,
+        {
+          id: i,
+          variant: "outline",
+          role: "combobox",
+          className: fe("w-full justify-between", p),
+          "data-testid": "parent-page-selector",
+          children: [
+            t(),
+            /* @__PURE__ */ s(re, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ s(le, { className: "w-[var(--radix-popover-trigger-width)] p-0", align: "start", children: /* @__PURE__ */ n(ne, { shouldFilter: !1, children: [
+        /* @__PURE__ */ s("div", { className: "relative border-none py-2", children: /* @__PURE__ */ s("div", { className: "sticky top-0 z-10 bg-white px-3 py-2", children: /* @__PURE__ */ n("div", { className: "relative", children: [
+          /* @__PURE__ */ s(ie, { strokeWidth: 2, className: "absolute left-2 top-2 h-4 w-4 text-gray-400" }),
+          /* @__PURE__ */ s(
+            M,
+            {
+              placeholder: "Search pages...",
+              className: "h-8 pl-8 text-xs",
+              value: f,
+              onChange: (a) => C(a.target.value)
+            }
+          )
+        ] }) }) }),
+        /* @__PURE__ */ n(ce, { className: "max-h-[300px] overflow-y-auto", children: [
+          /* @__PURE__ */ s(ae, { children: "No pages found." }),
+          /* @__PURE__ */ n(G, { children: [
+            /* @__PURE__ */ n(
+              R,
+              {
+                value: "none",
+                onSelect: () => {
+                  v(""), m(!1), C("");
+                },
+                className: "flex cursor-pointer items-center justify-between",
+                children: [
+                  /* @__PURE__ */ s("span", { children: "None" }),
+                  /* @__PURE__ */ s(U, { className: fe("mr-2 h-4 w-4", o ? "opacity-0" : "opacity-100") })
+                ]
+              }
+            ),
+            B.map((a) => {
+              const d = S(b(a.slug)), N = h(a.slug), O = /* @__PURE__ */ n("span", { className: "flex items-center text-sm", children: [
+                d,
+                a.name,
+                /* @__PURE__ */ n("span", { className: "text-xs text-gray-500", children: [
+                  " (",
+                  N,
+                  ")"
+                ] })
+              ] });
+              return /* @__PURE__ */ n(
+                R,
+                {
+                  value: a.id,
+                  onSelect: () => {
+                    v(a.id), m(!1), C("");
+                  },
+                  className: "flex cursor-pointer items-center justify-between whitespace-pre-wrap",
+                  children: [
+                    /* @__PURE__ */ s("span", { children: O }),
+                    /* @__PURE__ */ s(
+                      U,
+                      {
+                        className: fe(
+                          "mr-2 h-4 w-4 shrink-0",
+                          o === a.id ? "opacity-100" : "opacity-0"
+                        )
+                      }
+                    )
+                  ]
+                },
+                a.id
+              );
+            })
+          ] })
+        ] })
+      ] }) })
+    ] }) : /* @__PURE__ */ n(
+      "select",
+      {
+        id: i,
+        value: o || "none",
+        onChange: (a) => v(a.target.value),
+        className: p,
+        "data-testid": "parent-page-selector",
+        children: [
+          /* @__PURE__ */ s("option", { value: "none", children: "None" }),
+          w.map((a) => {
+            const d = b(a.slug), N = d > 0 ? S(d) : "", O = h(a.slug);
+            return (g == null ? void 0 : g.id) === a.id || a.slug.startsWith(g == null ? void 0 : g.slug) ? null : /* @__PURE__ */ n("option", { value: a.id, children: [
+              N,
+              a.name,
+              " (",
+              O,
+              ")"
+            ] }, a.id);
+          })
+        ]
+      }
+    )
+  ] });
+}
+const Cs = (...l) => l.filter(Boolean).join(" "), ks = ({
+  templates: l,
+  selectedTemplateId: o,
+  onSelectTemplate: v,
+  isLoading: p = !1
+}) => {
+  const [i, g] = y(""), [u, m] = y(!1), [f, C] = y(""), F = ye("enable-add-page-dropdown");
+  if (Be(() => {
+    if (o) {
+      const h = l.find((t) => t.id === o);
+      g((h == null ? void 0 : h.preview) || "");
+    } else
+      g("");
+  }, [o, l]), p)
+    return /* @__PURE__ */ s("div", { className: "flex h-fit items-center justify-center text-sm text-gray-500", children: "Loading templates..." });
+  if (l.length === 0)
+    return null;
+  const w = {};
+  l.forEach((h) => {
+    const t = h.libraryName;
+    w[t] || (w[t] = []), w[t].push(h);
+  });
+  const B = Object.entries(w).reduce(
+    (h, [t, a]) => {
+      const d = a.filter(
+        (N) => N.name.toLowerCase().includes(f.toLowerCase()) || t.toLowerCase().includes(f.toLowerCase())
+      );
+      return d.length > 0 && (h[t] = d), h;
+    },
+    {}
+  ), b = l.find((h) => h.id === o), S = b ? de(b.name) : "No Template";
+  return /* @__PURE__ */ n("div", { className: "space-y-4", children: [
+    F ? /* @__PURE__ */ n(ee, { open: u, onOpenChange: m, children: [
+      /* @__PURE__ */ s(se, { asChild: !0, children: /* @__PURE__ */ n(W, { variant: "outline", role: "combobox", className: "w-full justify-between", children: [
+        S,
+        /* @__PURE__ */ s(re, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+      ] }) }),
+      /* @__PURE__ */ s(le, { className: "w-[var(--radix-popover-trigger-width)] p-0", align: "start", children: /* @__PURE__ */ n(ne, { shouldFilter: !1, children: [
+        /* @__PURE__ */ s("div", { className: "sticky top-0 z-10 bg-white px-3 py-2", children: /* @__PURE__ */ n("div", { className: "relative", children: [
+          /* @__PURE__ */ s(ie, { strokeWidth: 2, className: "absolute left-2 top-2 h-4 w-4 text-gray-400" }),
+          /* @__PURE__ */ s(
+            M,
+            {
+              placeholder: "Search templates...",
+              className: "h-8 pl-8 text-xs",
+              value: f,
+              onChange: (h) => C(h.target.value)
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ n(ce, { className: "max-h-[300px] overflow-y-auto", children: [
+          /* @__PURE__ */ s(ae, { children: "No templates found." }),
+          Object.entries(B).map(([h, t]) => /* @__PURE__ */ s(G, { heading: h, children: t.map((a) => /* @__PURE__ */ n(
+            R,
+            {
+              value: a.id,
+              onSelect: () => {
+                v(a.id), m(!1), C("");
+              },
+              className: "flex cursor-pointer items-center justify-between",
+              children: [
+                de(a.name),
+                /* @__PURE__ */ s(
+                  U,
+                  {
+                    className: Cs(
+                      "mr-2 h-4 w-4",
+                      o === a.id ? "opacity-100" : "opacity-0"
+                    )
+                  }
+                )
+              ]
+            },
+            a.id
+          )) }, h))
+        ] })
+      ] }) })
+    ] }) : /* @__PURE__ */ n(
+      "select",
+      {
+        className: "w-full rounded-md border border-gray-300 px-3 py-2",
+        value: o,
+        onChange: (h) => v(h.target.value),
+        children: [
+          /* @__PURE__ */ s("option", { value: "", children: "No Template" }),
+          Object.entries(w).map(([h, t]) => /* @__PURE__ */ s("optgroup", { label: h, children: t.map((a) => /* @__PURE__ */ s("option", { value: a.id, children: de(a.name) }, a.id)) }, h))
+        ]
+      }
+    ),
+    i && /* @__PURE__ */ n("div", { className: "mt-3 overflow-hidden rounded border", children: [
+      /* @__PURE__ */ s("div", { className: "max-h-[200px] overflow-auto", children: /* @__PURE__ */ s("img", { src: i, alt: "Template Preview", className: "w-full object-contain" }) }),
+      /* @__PURE__ */ s("div", { className: "border-t bg-gray-50 p-2 text-xs text-gray-500", children: "Template preview" })
+    ] })
+  ] });
+}, Ls = () => {
+  const l = Re(), o = Ue();
+  return ze({
+    queryKey: [oe.GET_LIBRARIES],
+    staleTime: "static",
+    queryFn: async () => await o(l, { action: oe.GET_LIBRARIES }) || []
+  });
+}, Ts = (l) => {
+  const o = Re(), v = Ue();
+  return ze({
+    queryKey: [oe.GET_TEMPLATES_BY_TYPE, l],
+    staleTime: "static",
+    enabled: !!l,
+    queryFn: async () => {
+      const p = await v(o, {
+        action: oe.GET_TEMPLATES_BY_TYPE,
+        data: { pageType: l }
+      });
+      return (l ? hs(p, { pageType: l }) : p) || [];
+    }
+  });
+}, js = (l) => {
+  const { data: o = [], isLoading: v } = Ts(l), { data: p = [], isLoading: i } = Ls(), g = $(() => v || i ? [] : o.map((m) => {
+    const f = ge(p, { id: m.library });
+    return {
+      ...m,
+      libraryName: (f == null ? void 0 : f.type) !== "shared" ? "Site Library" : (f == null ? void 0 : f.name) + " Library",
+      libraryType: f == null ? void 0 : f.type
+    };
+  }), [o, p, v, i]), u = $(() => ps(g, "libraryName"), [g]);
+  return {
+    data: g,
+    groupedData: u,
+    isLoading: v || i
+  };
+}, V = (...l) => l.filter(Boolean).join(" ");
+function _s({ addEditPage: l, close: o, closePanel: v }) {
+  var Ae, Fe;
+  const { data: p } = fs(), i = $(() => p ?? [], [p]), g = gs(), u = !!(l != null && l.id), { data: m } = ys(), { mutate: f, isPending: C } = vs(), { mutate: F, isPending: w } = Ns(), [B, b] = y(null), [S, h] = y(!0), [t, a] = y((l == null ? void 0 : l.pageType) ?? "page"), { hasPermission: d } = us(), N = d(bs.CHANGE_PAGE_TYPE), [O, z] = y(!1), [_e, qe] = y(""), { selectedLang: Ve, fallbackLang: Ge } = ms(), ve = Ve || Ge, [Y, Z] = y(""), [Ne, H] = y(!1), be = $(() => {
+    const e = i.find((c) => c.key === t);
+    return (e == null ? void 0 : e.hasSlug) === !1;
+  }, [t, i]), [k, Me] = y((l == null ? void 0 : l.parent) ?? ""), [_, Se] = y((l == null ? void 0 : l.name) ?? ""), [T, we] = y((l == null ? void 0 : l.dynamic) ?? !1), [j, K] = y(T ? "" : ((l == null ? void 0 : l.slug) ?? "").split("/").pop() || ""), [xe, Ce] = y((l == null ? void 0 : l.dynamicSlugCustom) ?? ""), [ke, Ye] = y(!0), [Qe, ue] = y(!1), [me, He] = y(""), { data: Le, isLoading: Ke } = js(t), Q = C || w, Te = ye("enable-add-page-dropdown"), he = $(() => !u || !(l != null && l.id) || !m ? null : m.find((e) => e.id === l.id), [u, l == null ? void 0 : l.id, m]), Ze = (he == null ? void 0 : he.online) || !1, Je = $(() => !u || !(l != null && l.id) || !m ? !1 : m.some((e) => e.parent === l.id), [u, l == null ? void 0 : l.id, m]), r = i.find((e) => e.key === t), q = (e) => {
+    if (u && t !== e) {
+      qe(e), z(!0), Z(""), H(!1);
+      return;
+    }
+    a(e), Z(""), H(!1);
+  }, je = () => {
+    a(_e), z(!1), we(!1);
+  }, Xe = (e) => {
+    we(e), e ? K("") : Ce("");
+  }, Pe = (e) => {
+    if (Me(e), e && e !== "none") {
+      const c = m == null ? void 0 : m.find((x) => x.id === e), D = (c == null ? void 0 : c.slug) || "";
+      if (j.startsWith(D)) {
+        const x = j.slice(D.length).replace(/^\/+/, "");
+        K(x);
+      } else
+        K(j.replace(/^\/+/, ""));
+    } else
+      K(j ? `${j}` : "");
+  }, Ee = (e) => {
+    He(e);
+  }, es = () => _.trim() ? T && !Ie(j) ? (b("Slug must be empty when using dynamic slug"), !1) : T && !ke ? (b("Dynamic slug is invalid"), !1) : !0 : (E.error("Name is required"), !1), ss = () => {
+    const e = {
+      pageType: r == null ? void 0 : r.key,
+      name: _,
+      slug: "",
+      hasSlug: !1
+    };
+    u ? F(
+      { id: l == null ? void 0 : l.id, name: _ },
+      {
+        onSuccess: () => {
+          E.success((r == null ? void 0 : r.name) + " updated successfully"), o();
+        }
+      }
+    ) : f(e, {
+      onSuccess: (c) => {
+        o(), g(c.page.id, v);
+      }
+    });
+  }, ls = (e, c) => {
+    if (!e.trim() && !T)
+      return b("Child page slug is required"), !1;
+    const D = te(c), x = Oe(D, e);
+    return Object.keys(Ss).some((X) => x === `/${X}` || (x == null ? void 0 : x.startsWith(`/${X}/`))) ? (b("Slugs cannot start with a language code for primary page"), !1) : !0;
+  }, ns = (e, c) => {
+    const D = te(c), x = Oe(D, e), L = {
+      pageType: t,
+      name: _,
+      slug: x.replace(/\/$/, ""),
+      // remove trailing slashes
+      parent: k,
+      dynamic: T,
+      hasSlug: !0,
+      template: me || void 0,
+      tracking: {},
+      seo: {},
+      jsonLD: {}
+    };
+    if (T && (L.dynamicSlugCustom = xe), u) {
+      const A = ds(L, ["pageType", "parent", "name", "slug", "dynamic", "dynamicSlugCustom"]);
+      F(
+        { id: l == null ? void 0 : l.id, ...A },
+        {
+          onSuccess: () => {
+            E.success("Page updated successfully"), o();
+          }
+        }
+      );
+    } else {
+      const A = ge(i, { key: t });
+      A != null && A.trackingDefault && (L.tracking = A.trackingDefault);
+      const { seo: X, jsonLD: ts } = $e(A, ve);
+      P(L, "seo", X), P(L, "jsonLD", ts), f(L, {
+        onSuccess: (rs) => {
+          o(), g(rs.page.id, v);
+        }
+      });
+    }
+  }, as = () => {
+    const e = {
+      pageType: t,
+      name: _,
+      slug: j === "" ? "/" : `/${j.replace(/\/$/, "")}`,
+      template: me || void 0,
+      parent: null,
+      tracking: {}
+    };
+    if (u)
+      F(
+        { id: l == null ? void 0 : l.id, ...e },
+        {
+          onSuccess: () => {
+            E.success("Page updated successfully"), o();
+          }
+        }
+      );
+    else {
+      const c = ge(i, { key: t });
+      c != null && c.trackingDefault && (e.tracking = c.trackingDefault);
+      const { seo: D, jsonLD: x } = $e(c, ve);
+      P(e, "seo", D), P(e, "jsonLD", x), f(e, {
+        onSuccess: (L) => {
+          var A;
+          (A = L == null ? void 0 : L.page) != null && A.id && g(L.page.id, v), o();
+        }
+      });
+    }
+  }, De = (e) => {
+    if (e.preventDefault(), b(null), !!es()) {
+      if (!(r != null && r.hasSlug)) {
+        ss();
+        return;
+      }
+      if (k && k !== "none") {
+        const c = m == null ? void 0 : m.find((x) => x.id === k), D = (c == null ? void 0 : c.slug) || "";
+        if (!ls(j, D))
+          return;
+        ns(j, D);
+      } else
+        as();
+    }
+  }, { pagesType: pe, partialsType: J } = $(() => {
+    const e = (c) => Y ? c.name.toLowerCase().includes(Y.toLowerCase()) || c.key.toLowerCase().includes(Y.toLowerCase()) : !0;
+    return {
+      pagesType: i.filter((c) => c.hasSlug !== !1 && e(c)),
+      partialsType: i.filter((c) => c.hasSlug === !1 && e(c))
+    };
+  }, [i, Y]);
+  return r != null && r.hasSlug ? /* @__PURE__ */ n("form", { onSubmit: De, className: "mx-auto w-full max-w-md space-y-4", children: [
+    /* @__PURE__ */ n("div", { className: "space-y-0.5", children: [
+      /* @__PURE__ */ s(I, { htmlFor: "pageType", className: "text-sm", children: "Type" }),
+      Te ? /* @__PURE__ */ n(ee, { open: Ne, onOpenChange: H, children: [
+        /* @__PURE__ */ s(se, { asChild: !0, children: /* @__PURE__ */ n(
+          W,
+          {
+            variant: "outline",
+            role: "combobox",
+            disabled: u && !N,
+            className: V(
+              "w-full justify-between",
+              u && !N ? "cursor-not-allowed text-gray-500" : ""
+            ),
+            children: [
+              (r == null ? void 0 : r.name) || "Select page type",
+              /* @__PURE__ */ s(re, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ s(le, { className: "w-[var(--radix-popover-trigger-width)] p-0", align: "start", children: /* @__PURE__ */ n(ne, { shouldFilter: !1, children: [
+          /* @__PURE__ */ s("div", { className: "sticky top-0 z-10 bg-white px-3 py-2", children: /* @__PURE__ */ n("div", { className: "relative", children: [
+            /* @__PURE__ */ s(ie, { strokeWidth: 2, className: "absolute left-2 top-2 h-4 w-4 text-gray-400" }),
+            /* @__PURE__ */ s(
+              M,
+              {
+                placeholder: "Search page types...",
+                className: "h-8 pl-8 text-xs",
+                value: Y,
+                onChange: (e) => Z(e.target.value)
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ n(ce, { className: "overflow-y-auto", children: [
+            /* @__PURE__ */ s(ae, { children: "No page type found." }),
+            u ? be ? /* @__PURE__ */ s(G, { heading: "Partials", children: J.map((e) => /* @__PURE__ */ n(
+              R,
+              {
+                value: e.key,
+                onSelect: () => q(e.key),
+                className: "flex cursor-pointer items-center justify-between",
+                children: [
+                  e.name,
+                  /* @__PURE__ */ s(
+                    U,
+                    {
+                      className: V("mr-2 h-4 w-4", t === e.key ? "opacity-100" : "opacity-0")
+                    }
+                  )
+                ]
+              },
+              e.key
+            )) }) : /* @__PURE__ */ s(G, { heading: "Pages", children: pe.map((e) => /* @__PURE__ */ n(
+              R,
+              {
+                value: e.key,
+                onSelect: () => q(e.key),
+                className: "flex cursor-pointer items-center justify-between",
+                children: [
+                  e.name,
+                  /* @__PURE__ */ s(
+                    U,
+                    {
+                      className: V("mr-2 h-4 w-4", t === e.key ? "opacity-100" : "opacity-0")
+                    }
+                  )
+                ]
+              },
+              e.key
+            )) }) : /* @__PURE__ */ n(We, { children: [
+              pe.length > 0 && /* @__PURE__ */ s(G, { heading: "Pages", children: pe.map((e) => /* @__PURE__ */ n(
+                R,
+                {
+                  value: e.key,
+                  onSelect: () => q(e.key),
+                  className: "flex cursor-pointer items-center justify-between",
+                  children: [
+                    e.name,
+                    /* @__PURE__ */ s(
+                      U,
+                      {
+                        className: V("mr-2 h-4 w-4", t === e.key ? "opacity-100" : "opacity-0")
+                      }
+                    )
+                  ]
+                },
+                e.key
+              )) }),
+              J.length > 0 && /* @__PURE__ */ s(G, { heading: "Partials", children: J.map((e) => /* @__PURE__ */ n(
+                R,
+                {
+                  value: e.key,
+                  onSelect: () => q(e.key),
+                  className: "flex cursor-pointer items-center justify-between",
+                  children: [
+                    e.name,
+                    /* @__PURE__ */ s(
+                      U,
+                      {
+                        className: V("mr-2 h-4 w-4", t === e.key ? "opacity-100" : "opacity-0")
+                      }
+                    )
+                  ]
+                },
+                e.key
+              )) })
+            ] })
+          ] })
+        ] }) })
+      ] }) : /* @__PURE__ */ s(
+        "select",
+        {
+          id: "pageType",
+          value: t,
+          disabled: u && !N,
+          onChange: (e) => q(e.target.value),
+          className: `w-full rounded-md border border-gray-300 px-3 py-2 ${u && !N ? "cursor-not-allowed text-gray-500" : ""}`,
+          children: u ? be ? /* @__PURE__ */ s("optgroup", { label: "Partials", children: i.filter((e) => e.hasSlug === !1).map((e) => /* @__PURE__ */ s("option", { value: e.key, children: e.name }, e.key)) }) : /* @__PURE__ */ s("optgroup", { label: "Pages", children: i.filter((e) => e.hasSlug !== !1).map((e) => /* @__PURE__ */ s("option", { value: e.key, children: e.name }, e.key)) }) : /* @__PURE__ */ n(We, { children: [
+            /* @__PURE__ */ s("optgroup", { label: "Pages", children: i.filter((e) => e.hasSlug !== !1).map((e) => /* @__PURE__ */ s("option", { value: e.key, children: e.name }, e.key)) }),
+            /* @__PURE__ */ s("optgroup", { label: "Partials", children: i.filter((e) => e.hasSlug === !1).map((e) => /* @__PURE__ */ s("option", { value: e.key, children: e.name }, e.key)) })
+          ] })
+        }
+      ),
+      O && /* @__PURE__ */ n("div", { className: "mt-2 rounded-md border border-yellow-200 bg-yellow-50 p-3", children: [
+        /* @__PURE__ */ s("p", { className: "text-sm text-yellow-800", children: "Changing the page type may impact the page data. Are you sure you want to proceed?" }),
+        /* @__PURE__ */ n("div", { className: "mt-2 flex gap-2", children: [
+          /* @__PURE__ */ s(W, { variant: "outline", size: "sm", onClick: () => z(!1), children: "Cancel" }),
+          /* @__PURE__ */ s(W, { variant: "default", size: "sm", onClick: je, children: "Confirm" })
+        ] })
+      ] })
+    ] }),
+    !u && (r == null ? void 0 : r.hasSlug) && Le.length > 0 && /* @__PURE__ */ n("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ s(I, { className: "mb-1 block text-sm", children: "Template" }),
+      /* @__PURE__ */ s(
+        ks,
+        {
+          templates: Le,
+          selectedTemplateId: me,
+          onSelectTemplate: Ee,
+          isLoading: Ke
+        }
+      )
+    ] }),
+    /* @__PURE__ */ s(
+      xs,
+      {
+        pages: m,
+        selectedParentId: k,
+        onChange: Pe,
+        currentPage: l
+      }
+    ),
+    /* @__PURE__ */ n("div", { className: "space-y-0.5", children: [
+      /* @__PURE__ */ s(I, { htmlFor: "name", className: "text-sm", children: "Name" }),
+      /* @__PURE__ */ s(
+        M,
+        {
+          id: "name",
+          value: _,
+          onChange: (e) => Se(e.target.value),
+          required: !0,
+          "aria-required": "true",
+          placeholder: "Enter page name"
+        }
+      )
+    ] }),
+    (r == null ? void 0 : r.dynamicSegments) && k && k !== "none" && /* @__PURE__ */ n("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ n("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ s(
+          "input",
+          {
+            type: "checkbox",
+            id: "useDynamicSlug",
+            checked: T,
+            onChange: (e) => Xe(e.target.checked),
+            className: "rounded border-gray-300"
+          }
+        ),
+        /* @__PURE__ */ s(I, { htmlFor: "useDynamicSlug", className: "text-sm", children: "Use Dynamic Slug" })
+      ] }),
+      T && /* @__PURE__ */ s("div", { className: "space-y-2", children: /* @__PURE__ */ s("div", { className: "space-y-0.5", children: /* @__PURE__ */ s(
+        ws,
+        {
+          value: xe,
+          onChange: Ce,
+          dynamicPattern: (r == null ? void 0 : r.dynamicSlug) || "{{id}}",
+          placeholder: "Enter custom slug part (optional)",
+          onValidationChange: Ye
+        }
+      ) }) })
+    ] }),
+    (!(r != null && r.dynamicSegments) || !T) && /* @__PURE__ */ n("div", { className: "space-y-0.5", children: [
+      /* @__PURE__ */ s(I, { htmlFor: "slug", className: "text-sm", children: "Slug" }),
+      /* @__PURE__ */ s(
+        cs,
+        {
+          value: j,
+          onChange: (e) => {
+            var c;
+            K(e), u && e !== (((c = l == null ? void 0 : l.slug) == null ? void 0 : c.split("/").pop()) || "") ? ue(!!(Ze || Je)) : ue(!1);
+          },
+          placeholder: k && k !== "none" ? "Enter page slug" : t === "page" ? "Leave empty for home page" : "Required - e.g. your-slug",
+          parentSlug: k && k !== "none" ? (Fe = m == null ? void 0 : m.find((e) => e.id === k)) == null ? void 0 : Fe.slug : void 0,
+          onValidationChange: h
+        }
+      ),
+      B && /* @__PURE__ */ s("p", { className: "text-xs text-red-500", children: B }),
+      Qe && /* @__PURE__ */ s("div", { className: "mt-4 rounded-md border border-amber-200 bg-amber-50 p-3", children: /* @__PURE__ */ n("div", { className: "flex items-start space-x-2", children: [
+        /* @__PURE__ */ s("div", { className: "flex-shrink-0", children: /* @__PURE__ */ s("svg", { className: "h-5 w-5 text-amber-400", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ s(
+          "path",
+          {
+            fillRule: "evenodd",
+            d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
+            clipRule: "evenodd"
+          }
+        ) }) }),
+        /* @__PURE__ */ n("div", { className: "flex-1", children: [
+          /* @__PURE__ */ s("h3", { className: "text-sm font-medium text-amber-800", children: "Slug Change Warning" }),
+          /* @__PURE__ */ s("div", { className: "mt-1 text-sm text-amber-700", children: /* @__PURE__ */ s("p", { children: "The previous URL and any child pages will become inaccessible. You may want to set up a redirect to avoid broken links." }) })
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ s(
+      W,
+      {
+        disabled: Q || // Disable if regular slug is invalid and we're not using dynamic slug
+        !S && (!(r != null && r.dynamicSegments) || !T) || // Disable if dynamic slug is invalid and we are using dynamic slug
+        T && !ke,
+        type: "submit",
+        className: "w-full",
+        children: u ? Q ? "Updating..." : "Update page" : Q ? "Creating..." : "Create Page"
+      }
+    )
+  ] }) : /* @__PURE__ */ n("form", { onSubmit: De, className: "mx-auto w-full max-w-md space-y-4", children: [
+    /* @__PURE__ */ n("div", { className: "space-y-0.5", children: [
+      /* @__PURE__ */ s(I, { htmlFor: "pageType", className: "text-sm", children: "Type" }),
+      Te ? /* @__PURE__ */ n(ee, { open: Ne, onOpenChange: H, children: [
+        /* @__PURE__ */ s(se, { asChild: !0, children: /* @__PURE__ */ n(
+          W,
+          {
+            variant: "outline",
+            role: "combobox",
+            disabled: u && !N,
+            className: V(
+              "w-full justify-between",
+              u && !N ? "cursor-not-allowed text-gray-500" : ""
+            ),
+            children: [
+              (r == null ? void 0 : r.name) || "Select page type",
+              /* @__PURE__ */ s(re, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ s(le, { className: "w-[var(--radix-popover-trigger-width)] p-0", align: "start", children: /* @__PURE__ */ n(ne, { shouldFilter: !1, children: [
+          /* @__PURE__ */ s("div", { className: "sticky top-0 z-10 bg-white px-3 py-2", children: /* @__PURE__ */ n("div", { className: "relative", children: [
+            /* @__PURE__ */ s(ie, { strokeWidth: 2, className: "absolute left-2 top-2 h-4 w-4 text-gray-400" }),
+            /* @__PURE__ */ s(
+              M,
+              {
+                placeholder: "Search page types...",
+                className: "h-8 pl-8 text-xs",
+                value: Y,
+                onChange: (e) => Z(e.target.value)
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ n(ce, { className: "max-h-[200px] overflow-y-auto", children: [
+            /* @__PURE__ */ s(ae, { children: "No page type found." }),
+            /* @__PURE__ */ s(G, { heading: "Partials", children: J.map((e) => /* @__PURE__ */ n(
+              R,
+              {
+                value: e.key,
+                onSelect: () => {
+                  q(e.key), H(!1);
+                },
+                className: "flex cursor-pointer items-center justify-between",
+                children: [
+                  e.name,
+                  /* @__PURE__ */ s(U, { className: V("mr-2 h-4 w-4", t === e.key ? "opacity-100" : "opacity-0") })
+                ]
+              },
+              e.key
+            )) })
+          ] })
+        ] }) })
+      ] }) : /* @__PURE__ */ s(
+        "select",
+        {
+          id: "pageType",
+          value: t,
+          disabled: u && !N,
+          onChange: (e) => q(e.target.value),
+          className: `w-full rounded-md border border-gray-300 px-3 py-2 ${u && !N ? "cursor-not-allowed text-gray-500" : ""}`,
+          children: /* @__PURE__ */ s("optgroup", { label: "Partials", children: i.filter((e) => e.hasSlug === !1).map((e) => /* @__PURE__ */ s("option", { value: e.key, children: e.name }, e.key)) })
+        }
+      ),
+      O && /* @__PURE__ */ n("div", { className: "mt-2 rounded-md border border-yellow-200 bg-yellow-50 p-3", children: [
+        /* @__PURE__ */ s("p", { className: "text-sm text-yellow-800", children: "Changing the page type may impact the page data. Are you sure you want to proceed?" }),
+        /* @__PURE__ */ n("div", { className: "mt-2 flex gap-2", children: [
+          /* @__PURE__ */ s(W, { variant: "outline", size: "sm", onClick: () => z(!1), children: "Cancel" }),
+          /* @__PURE__ */ s(W, { variant: "default", size: "sm", onClick: je, children: "Confirm" })
+        ] })
+      ] }),
+      /* @__PURE__ */ s("p", { className: "text-xs text-gray-500", children: (Ae = i.find((e) => e.key === t)) == null ? void 0 : Ae.helpText })
+    ] }),
+    /* @__PURE__ */ n("div", { className: "space-y-0.5", children: [
+      /* @__PURE__ */ s(I, { htmlFor: "name", className: "text-sm", children: "Name" }),
+      /* @__PURE__ */ s(M, { id: "name", value: _, onChange: (e) => Se(e.target.value), required: !0, "aria-required": "true" })
+    ] }),
+    /* @__PURE__ */ s(W, { disabled: Q, type: "submit", className: "w-full", children: u ? Q ? "Updating..." : "Update " + (r == null ? void 0 : r.name) : Q ? "Creating..." : "Create " + (r == null ? void 0 : r.name) })
+  ] });
+}
+export {
+  _s as default
+};