@pagehub/sdk 0.1.0

package/dist/chunks/ActionInput-BAnMJFmV.js

@@ -0,0 +1,925 @@
+import { jsxs as o, Fragment as m, jsx as e } from "react/jsx-runtime";
+import { c1 as x, cD as Q, f as K, dX as R, dY as X, dZ as Z, d_ as z, d$ as H, aX as G, cm as J, A as ee, c6 as te, dx as $, ct as ae, e0 as ne, dt as w } from "./index-lNS44FHV.js";
+import { forwardRef as le, useMemo as re, useState as O, useEffect as U, useRef as E } from "react";
+import { useEditor as se } from "@craftjs/core";
+import { ROOT_NODE as oe } from "@craftjs/utils";
+import { C as ie, d as ce, a as de } from "./ConditionsInput-D73bEU2r.js";
+function pe({ action: a, patch: t }) {
+  return /* @__PURE__ */ o(m, { children: [
+    /* @__PURE__ */ e("p", { className: "text-neutral-content text-[10px] leading-snug", children: "Adds the current product to the shopping cart. Must be inside a data-bound Container." }),
+    /* @__PURE__ */ o(x, { children: [
+      /* @__PURE__ */ e("label", { className: "text-neutral-content shrink-0 px-1 text-xs", children: "Quantity" }),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          type: "number",
+          min: 1,
+          max: 99,
+          value: a.quantity || 1,
+          onChange: (n) => t({ quantity: parseInt(n.target.value) || 1 }),
+          className: "h-full w-full bg-transparent px-1 text-xs outline-none"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ o(x, { children: [
+      /* @__PURE__ */ e("label", { className: "text-neutral-content shrink-0 px-1 text-xs", children: "Qty field" }),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          type: "text",
+          defaultValue: a.quantityField || "",
+          onChange: (n) => t({ quantityField: n.target.value || void 0 }),
+          placeholder: "input name (overrides static)",
+          className: "h-full w-full bg-transparent px-1 text-xs outline-none"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ o(x, { children: [
+      /* @__PURE__ */ e("label", { className: "text-neutral-content shrink-0 px-1 text-xs", children: "Variant state" }),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          type: "text",
+          defaultValue: a.variantMatchStateKey || "",
+          onChange: (n) => t({ variantMatchStateKey: n.target.value || void 0 }),
+          placeholder: "pdp:current:matching-variant",
+          className: "h-full w-full bg-transparent px-1 text-xs outline-none"
+        }
+      )
+    ] })
+  ] });
+}
+function ue({
+  action: a,
+  patch: t
+}) {
+  return /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(
+    "input",
+    {
+      type: "text",
+      defaultValue: a.text || "",
+      onChange: (n) => t({ text: n.target.value }),
+      placeholder: "Text to copy...",
+      className: "h-full w-full bg-transparent px-1 text-xs outline-none",
+      "aria-label": "Text to copy"
+    }
+  ) });
+}
+function he({ action: a, patch: t }) {
+  return /* @__PURE__ */ o(m, { children: [
+    /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(
+      "input",
+      {
+        type: "url",
+        defaultValue: a.url || "",
+        onChange: (n) => t({ url: n.target.value }),
+        placeholder: "https://example.com/file.pdf",
+        className: "h-full w-full bg-transparent px-1 text-xs outline-none",
+        "aria-label": "File URL"
+      }
+    ) }),
+    /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(
+      "input",
+      {
+        type: "text",
+        defaultValue: a.filename || "",
+        onChange: (n) => t({ filename: n.target.value }),
+        placeholder: "Filename (optional)",
+        className: "h-full w-full bg-transparent px-1 text-xs outline-none",
+        "aria-label": "Download filename"
+      }
+    ) })
+  ] });
+}
+const ge = le(function({ onClick: t, open: n = !1, tooltip: l = "Open", className: c = "" }, r) {
+  return /* @__PURE__ */ e(
+    Q,
+    {
+      ref: r,
+      onClick: (d) => {
+        d.stopPropagation(), t == null || t(d);
+      },
+      "aria-expanded": n,
+      ariaLabel: l,
+      tooltip: l,
+      className: c,
+      children: /* @__PURE__ */ e(
+        K,
+        {
+          className: `size-3 transition-transform ${n ? "rotate-180" : ""}`,
+          "aria-hidden": !0
+        }
+      )
+    }
+  );
+});
+function me(a) {
+  const t = a ?? "";
+  if (!t) return { kind: "empty", href: "" };
+  if (t.startsWith("ref:")) {
+    const n = t.match(/^ref:([^/?#]+)(.*)$/);
+    return n ? { kind: "page", href: t, pageId: n[1], path: n[2] || "" } : { kind: "page", href: t, pageId: t.slice(4), path: "" };
+  }
+  if (t.startsWith("#")) return { kind: "anchor", href: t };
+  if (t.startsWith("mailto:")) {
+    const n = t.slice(7), l = n.indexOf("?");
+    if (l === -1) return { kind: "email", href: t, email: n };
+    const c = n.slice(0, l), r = new URLSearchParams(n.slice(l + 1));
+    return {
+      kind: "email",
+      href: t,
+      email: c,
+      subject: r.get("subject") || "",
+      body: r.get("body") || ""
+    };
+  }
+  return t.startsWith("tel:") ? { kind: "phone", href: t } : { kind: "url", href: t };
+}
+function xe(a, t, n) {
+  if (!a) return "";
+  const l = new URLSearchParams();
+  t && l.set("subject", t), n && l.set("body", n);
+  const c = l.toString();
+  return `mailto:${a}${c ? `?${c}` : ""}`;
+}
+function fe({ action: a, onChange: t, placeholder: n = "Page or URL..." }) {
+  const l = (a == null ? void 0 : a.href) ?? "", c = a == null ? void 0 : a.target, r = re(() => me(l), [l]), [d, i] = O(l);
+  U(() => i(l), [l]);
+  const [f, h] = O(!1), C = E(null), k = E(null), { pages: y } = se((s) => {
+    var P, S, M, V;
+    const g = [], N = s.nodes[oe];
+    if ((P = N == null ? void 0 : N.data) != null && P.nodes)
+      for (const j of N.data.nodes) {
+        const F = s.nodes[j];
+        ((M = (S = F == null ? void 0 : F.data) == null ? void 0 : S.props) == null ? void 0 : M.type) === "page" && g.push({
+          id: j,
+          displayName: ((V = F.data.custom) == null ? void 0 : V.displayName) || "Untitled Page"
+        });
+      }
+    return { pages: g };
+  }), v = R("all"), u = r.kind === "page" ? y.find((s) => s.id === r.pageId) : null, p = (s) => {
+    t({ type: "link", href: s, ...c ? { target: c } : {} });
+  }, b = (s) => {
+    t({ type: "link", href: l, ...s ? { target: s } : {} });
+  }, T = () => {
+    d !== l && p(d);
+  }, W = (s) => {
+    p(`ref:${s}${r.path ?? ""}`), h(!1);
+  }, q = (s) => {
+    p(`#${s}`), h(!1);
+  }, B = (s) => {
+    r.kind !== "page" || !r.pageId || p(`ref:${r.pageId}${s}`);
+  }, A = (s, g) => {
+    const N = s === "email" ? g : r.email ?? "", P = s === "subject" ? g : r.subject ?? "", S = s === "body" ? g : r.body ?? "";
+    p(xe(N, P, S));
+  }, I = r.kind === "email" ? X : r.kind === "phone" ? Z : r.kind === "anchor" ? z : r.kind === "page" ? H : G, L = r.kind === "page", Y = L && u ? u.displayName : d;
+  return /* @__PURE__ */ o("div", { className: "link-input flex flex-col gap-2", children: [
+    /* @__PURE__ */ e(
+      x,
+      {
+        onClick: () => h((s) => !s),
+        trailing: /* @__PURE__ */ o(m, { children: [
+          l && /* @__PURE__ */ e(J, { onClick: () => p(""), tooltip: "Clear link" }),
+          /* @__PURE__ */ e(
+            ge,
+            {
+              ref: C,
+              open: f,
+              onClick: () => h((s) => !s),
+              tooltip: "Pick page or anchor"
+            }
+          )
+        ] }),
+        children: /* @__PURE__ */ o("div", { ref: k, className: "flex h-full min-w-0 flex-1 items-center gap-1.5", children: [
+          /* @__PURE__ */ e(I, { className: "text-neutral-content size-3.5 shrink-0", "aria-hidden": !0 }),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              id: "ph-link-input",
+              type: "text",
+              value: L ? Y : d,
+              readOnly: L,
+              onChange: (s) => i(s.target.value),
+              onBlur: T,
+              onClick: (s) => s.stopPropagation(),
+              onFocus: () => h(!0),
+              onKeyDown: (s) => {
+                s.key === "Enter" ? (s.preventDefault(), T()) : s.key === "Escape" && i(l);
+              },
+              placeholder: n,
+              className: "h-full flex-1 bg-transparent px-1 text-xs outline-none",
+              "aria-label": "Link destination"
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ o(
+      ee,
+      {
+        open: f,
+        onOpenChange: h,
+        anchor: k,
+        placement: "bottom-start",
+        matchAnchorWidth: { min: 240, max: 480 },
+        ignoreOutsideClicks: [k],
+        className: "pagehub-sdk-root ph-select-content max-h-64 overflow-y-auto",
+        children: [
+          y.length > 0 && /* @__PURE__ */ o(m, { children: [
+            /* @__PURE__ */ e("div", { className: "ph-select-group text-base-content px-2 pt-1 pb-1.5 font-bold", children: "Pages" }),
+            y.map((s) => {
+              const g = r.pageId === s.id;
+              return /* @__PURE__ */ o(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => W(s.id),
+                  "data-selected": g || void 0,
+                  className: "ph-select-item data-selected:bg-primary data-selected:text-primary-content",
+                  children: [
+                    /* @__PURE__ */ e(H, { className: "size-3.5 shrink-0 opacity-70" }),
+                    /* @__PURE__ */ e("span", { className: "truncate", children: s.displayName })
+                  ]
+                },
+                s.id
+              );
+            })
+          ] }),
+          v.length > 0 && /* @__PURE__ */ o(m, { children: [
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: `ph-select-group text-base-content px-2 pb-1.5 font-bold ${y.length > 0 ? "pt-2" : "pt-1"}`,
+                children: "Anchors"
+              }
+            ),
+            v.map((s) => {
+              const g = r.kind === "anchor" && l === `#${s.anchor}`;
+              return /* @__PURE__ */ o(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => q(s.anchor),
+                  "data-selected": g || void 0,
+                  className: "ph-select-item data-selected:bg-primary data-selected:text-primary-content",
+                  children: [
+                    /* @__PURE__ */ e(z, { className: "size-3.5 shrink-0 opacity-70" }),
+                    /* @__PURE__ */ e("span", { className: "truncate", children: s.label }),
+                    /* @__PURE__ */ o("span", { className: "text-neutral-content ml-auto truncate font-mono text-[10px]", children: [
+                      "#",
+                      s.anchor
+                    ] })
+                  ]
+                },
+                s.nodeId
+              );
+            })
+          ] }),
+          y.length === 0 && v.length === 0 && /* @__PURE__ */ e("div", { className: "text-neutral-content px-3 py-3 text-xs", children: "No pages or anchors found. Type a URL above." })
+        ]
+      }
+    ),
+    r.kind === "page" && /* @__PURE__ */ e(
+      "input",
+      {
+        type: "text",
+        value: r.path ?? "",
+        onChange: (s) => B(s.target.value),
+        placeholder: "Path (optional, e.g. /{{item.slug}})",
+        className: "input-plain w-full",
+        "aria-label": "Page path suffix"
+      }
+    ),
+    r.kind === "email" && /* @__PURE__ */ o(m, { children: [
+      /* @__PURE__ */ e(
+        "input",
+        {
+          type: "email",
+          value: r.email ?? "",
+          onChange: (s) => A("email", s.target.value),
+          placeholder: "hello@example.com",
+          className: "input-plain w-full",
+          "aria-label": "Email address"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          type: "text",
+          value: r.subject ?? "",
+          onChange: (s) => A("subject", s.target.value),
+          placeholder: "Subject (optional)",
+          className: "input-plain w-full",
+          "aria-label": "Email subject"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          type: "text",
+          value: r.body ?? "",
+          onChange: (s) => A("body", s.target.value),
+          placeholder: "Body (optional)",
+          className: "input-plain w-full",
+          "aria-label": "Email body"
+        }
+      )
+    ] }),
+    (r.kind === "url" || r.kind === "page") && /* @__PURE__ */ e(
+      te,
+      {
+        "aria-label": "Link target",
+        value: c || "_self",
+        onChange: b,
+        options: [
+          { value: "_self", label: "Same tab" },
+          { value: "_blank", label: "New tab" }
+        ]
+      }
+    )
+  ] });
+}
+function be({
+  action: a,
+  replace: t
+}) {
+  return /* @__PURE__ */ e(fe, { action: a, onChange: t });
+}
+function ye({
+  action: a,
+  patch: t
+}) {
+  return /* @__PURE__ */ o("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ o("p", { className: "text-neutral-content text-[10px] leading-snug", children: [
+      "Writes ",
+      /* @__PURE__ */ e("code", { className: "text-[9px]", children: "key" }),
+      " → ",
+      /* @__PURE__ */ e("code", { className: "text-[9px]", children: "value" }),
+      " ",
+      "to ",
+      /* @__PURE__ */ e("code", { className: "text-[9px]", children: "window.localStorage" }),
+      " when the button is clicked. Pairs with a load-trigger Show / Hide action whose Local Storage condition watches the same key — once the key is set, the target stays hidden on subsequent visits."
+    ] }),
+    /* @__PURE__ */ o("label", { className: "flex flex-col gap-1 text-[10px]", children: [
+      /* @__PURE__ */ e("span", { className: "text-neutral-content", children: "Key" }),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          className: "bg-base-100 border-base-300 rounded-field border px-2 py-1 text-xs",
+          value: a.key || "",
+          onChange: (n) => t({ key: n.target.value }),
+          placeholder: "ph-cookie-consent"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ o("label", { className: "flex flex-col gap-1 text-[10px]", children: [
+      /* @__PURE__ */ e("span", { className: "text-neutral-content", children: "Value" }),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          className: "bg-base-100 border-base-300 rounded-field border px-2 py-1 text-xs",
+          value: a.value || "",
+          onChange: (n) => t({ value: n.target.value }),
+          placeholder: "dismissed"
+        }
+      )
+    ] })
+  ] });
+}
+function ve({
+  action: a,
+  patch: t
+}) {
+  return /* @__PURE__ */ o("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ o("p", { className: "text-neutral-content text-[10px] leading-snug", children: [
+      "Clears the ",
+      /* @__PURE__ */ e("code", { className: "text-[9px]", children: "key" }),
+      " from",
+      " ",
+      /* @__PURE__ */ e("code", { className: "text-[9px]", children: "window.localStorage" }),
+      ' — useful for "show this banner again" links.'
+    ] }),
+    /* @__PURE__ */ o("label", { className: "flex flex-col gap-1 text-[10px]", children: [
+      /* @__PURE__ */ e("span", { className: "text-neutral-content", children: "Key" }),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          className: "bg-base-100 border-base-300 rounded-field border px-2 py-1 text-xs",
+          value: a.key || "",
+          onChange: (n) => t({ key: n.target.value }),
+          placeholder: "ph-cookie-consent"
+        }
+      )
+    ] })
+  ] });
+}
+const Ne = de.map((a) => ({
+  id: a.value,
+  label: a.label,
+  data: a.value
+}));
+function ke({ value: a, onChange: t }) {
+  var v;
+  const n = Array.isArray(a) ? a : [], l = ((v = n[0]) == null ? void 0 : v.conditions) ?? [], c = n.slice(1), r = (u) => {
+    if (u.length === 0 && c.length === 0) {
+      t([]);
+      return;
+    }
+    t([{ conditions: u, logic: "all" }, ...c]);
+  }, d = (u, p) => {
+    r(l.map((b, T) => T === u ? { ...b, ...p } : b));
+  }, i = (u) => {
+    r(l.filter((p, b) => b !== u));
+  }, f = E(l.length), [h, C] = O(null);
+  U(() => {
+    l.length > f.current && C(l.length - 1), f.current = l.length;
+  }, [l.length]);
+  const k = () => C(null), y = (u) => {
+    u.data && r([...l, ce(u.data)]);
+  };
+  return /* @__PURE__ */ o("div", { className: "flex flex-col gap-1", children: [
+    l.map((u, p) => /* @__PURE__ */ e(
+      ie,
+      {
+        cond: u,
+        autoOpen: p === h,
+        onAutoOpenConsumed: k,
+        onChange: (b) => d(p, b),
+        onRemove: () => i(p)
+      },
+      p
+    )),
+    /* @__PURE__ */ e(
+      $,
+      {
+        items: Ne,
+        onSelect: y,
+        triggerClassName: "text-neutral-content hover:bg-base-200 hover:text-base-content border-base-300 flex w-full items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-dashed px-2 py-1.5 text-[11px] transition-colors",
+        trigger: /* @__PURE__ */ o(m, { children: [
+          /* @__PURE__ */ e(ae, { className: "size-3.5 shrink-0", "aria-hidden": !0 }),
+          /* @__PURE__ */ e("span", { className: "truncate", children: l.length === 0 ? "Only fire if…" : "Add condition" })
+        ] }),
+        triggerAriaLabel: "Add condition",
+        searchPlaceholder: "Search conditions…",
+        anchor: "bottom start",
+        panelWidthClass: "w-56"
+      }
+    )
+  ] });
+}
+function D({
+  value: a,
+  filter: t,
+  label: n,
+  onChange: l
+}) {
+  const r = R(t).map((i) => ({
+    id: i.anchor,
+    label: i.label,
+    hint: i.anchor,
+    keywords: [i.anchor, i.componentType],
+    data: i.anchor
+  })), d = n.toLowerCase();
+  return /* @__PURE__ */ e(
+    x,
+    {
+      trailing: /* @__PURE__ */ e(
+        $,
+        {
+          items: r,
+          onSelect: (i) => l(i.data ?? i.id),
+          trigger: /* @__PURE__ */ e(K, { className: "size-3.5", "aria-hidden": !0 }),
+          triggerAriaLabel: `Pick ${d} from page`,
+          triggerClassName: "text-neutral-content hover:text-base-content hover:bg-base-200 flex size-5 shrink-0 items-center justify-center rounded-md transition-colors",
+          searchPlaceholder: `Search ${d}…`,
+          emptyMessage: `No ${d}s on this page yet`,
+          anchor: "bottom end"
+        }
+      ),
+      children: /* @__PURE__ */ e(
+        "input",
+        {
+          type: "text",
+          value: a || "",
+          onChange: (i) => l(i.target.value),
+          placeholder: `${n} id…`,
+          className: "h-full w-full bg-transparent px-1 text-xs outline-none",
+          "aria-label": n
+        }
+      )
+    }
+  );
+}
+function we({
+  action: a,
+  patch: t
+}) {
+  const n = a.trigger === "load";
+  return /* @__PURE__ */ o(m, { children: [
+    /* @__PURE__ */ o("div", { className: "flex items-stretch gap-2", children: [
+      /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ e(
+        D,
+        {
+          value: a.target,
+          filter: "all",
+          label: "Target",
+          onChange: (l) => t({ target: l })
+        }
+      ) }),
+      /* @__PURE__ */ e(ne, { target: a.target })
+    ] }),
+    /* @__PURE__ */ o("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ o(
+        w,
+        {
+          value: a.direction || "toggle",
+          onChange: (l) => t({ direction: l }),
+          propKey: "actionDirection",
+          children: [
+            /* @__PURE__ */ e("option", { value: "toggle", children: "Toggle" }),
+            /* @__PURE__ */ e("option", { value: "show", children: "Show" }),
+            /* @__PURE__ */ e("option", { value: "hide", children: "Hide" }),
+            /* @__PURE__ */ e("option", { value: "tab", children: "Tab" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ o(
+        w,
+        {
+          value: a.trigger || "click",
+          onChange: (l) => t({ trigger: l }),
+          propKey: "actionTrigger",
+          children: [
+            /* @__PURE__ */ e("option", { value: "click", children: "On Click" }),
+            /* @__PURE__ */ e("option", { value: "hover", children: "On Hover" }),
+            /* @__PURE__ */ e("option", { value: "load", children: "On Load" })
+          ]
+        }
+      )
+    ] }),
+    n && /* @__PURE__ */ e(
+      ke,
+      {
+        value: a.conditions,
+        onChange: (l) => t({ conditions: l })
+      }
+    )
+  ] });
+}
+function _({
+  value: a,
+  selfId: t,
+  ensureSelfId: n,
+  onChange: l
+}) {
+  const c = R("all"), r = "__ph_self__", d = [];
+  (n || t) && d.push({
+    id: r,
+    label: "This element (self)",
+    hint: t || "stamps an id when picked",
+    keywords: ["self", "this", t || ""],
+    data: r
+  });
+  for (const i of c)
+    t && i.anchor === t || d.push({
+      id: i.anchor,
+      label: i.label,
+      hint: i.anchor,
+      keywords: [i.anchor, i.componentType],
+      data: i.anchor
+    });
+  return /* @__PURE__ */ e(
+    x,
+    {
+      trailing: /* @__PURE__ */ e(
+        $,
+        {
+          items: d,
+          onSelect: (i) => {
+            const f = i.data ?? i.id;
+            if (f === r) {
+              const h = (n == null ? void 0 : n()) ?? t;
+              h && l(h);
+              return;
+            }
+            l(f);
+          },
+          trigger: /* @__PURE__ */ e(K, { className: "size-3.5", "aria-hidden": !0 }),
+          triggerAriaLabel: "Pick state key from page",
+          triggerClassName: "text-neutral-content hover:text-base-content hover:bg-base-200 flex size-5 shrink-0 items-center justify-center rounded-md transition-colors",
+          searchPlaceholder: "Search elements…",
+          emptyMessage: "No element ids on this page yet",
+          anchor: "bottom end"
+        }
+      ),
+      children: /* @__PURE__ */ e(
+        "input",
+        {
+          type: "text",
+          value: a || "",
+          onChange: (i) => l(i.target.value),
+          placeholder: "Element id or named state…",
+          className: "h-full w-full bg-transparent px-1 text-xs outline-none",
+          "aria-label": "State key"
+        }
+      )
+    }
+  );
+}
+function Ce({
+  action: a,
+  patch: t,
+  selfId: n,
+  ensureSelfId: l
+}) {
+  return /* @__PURE__ */ o("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ o("p", { className: "text-neutral-content text-[10px] leading-snug", children: [
+      "Writes ",
+      /* @__PURE__ */ e("code", { className: "text-[9px]", children: "key" }),
+      " → ",
+      /* @__PURE__ */ e("code", { className: "text-[9px]", children: "value" }),
+      " ",
+      "to the central state registry. Pair with a State condition (visibility / className gating) elsewhere on the page to react."
+    ] }),
+    l && /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          const r = (l == null ? void 0 : l()) ?? n;
+          r && t({ key: r, value: r });
+        },
+        className: "text-primary hover:bg-base-200 self-start rounded-md px-2 py-1 text-[10px] font-medium transition-colors",
+        children: "Use this element for key + value"
+      }
+    ),
+    /* @__PURE__ */ o("label", { className: "flex flex-col gap-1 text-[10px]", children: [
+      /* @__PURE__ */ e("span", { className: "text-neutral-content", children: "Key" }),
+      /* @__PURE__ */ e(
+        _,
+        {
+          value: a.key || "",
+          selfId: n,
+          ensureSelfId: l,
+          onChange: (r) => t({ key: r })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ o("label", { className: "flex flex-col gap-1 text-[10px]", children: [
+      /* @__PURE__ */ e("span", { className: "text-neutral-content", children: "Kind" }),
+      /* @__PURE__ */ o(
+        w,
+        {
+          value: a.kind || "value",
+          onChange: (r) => t({ kind: r }),
+          propKey: "setStateKind",
+          children: [
+            /* @__PURE__ */ e("option", { value: "value", children: "Value" }),
+            /* @__PURE__ */ e("option", { value: "visibility", children: "Visibility" }),
+            /* @__PURE__ */ e("option", { value: "selection", children: "Selection" }),
+            /* @__PURE__ */ e("option", { value: "flag", children: "Flag" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ o("label", { className: "flex flex-col gap-1 text-[10px]", children: [
+      /* @__PURE__ */ e("span", { className: "text-neutral-content", children: "Value" }),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          className: "bg-base-100 border-base-300 rounded-field border px-2 py-1 text-xs",
+          value: a.value || "",
+          onChange: (r) => t({ value: r.target.value }),
+          placeholder: '"shown" / "panel-1" / "{{item.id}}"'
+        }
+      )
+    ] })
+  ] });
+}
+function Te({
+  action: a,
+  patch: t,
+  selfId: n,
+  ensureSelfId: l
+}) {
+  const c = Array.isArray(a.values) ? a.values : ["", ""];
+  return /* @__PURE__ */ o("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ o("p", { className: "text-neutral-content text-[10px] leading-snug", children: [
+      "Flips a state between two values on click. Defaults: visibility kind toggles",
+      " ",
+      /* @__PURE__ */ e("code", { className: "text-[9px]", children: "shown / hidden" }),
+      "; flag kind toggles",
+      " ",
+      /* @__PURE__ */ e("code", { className: "text-[9px]", children: "on / off" }),
+      ". Override with explicit values."
+    ] }),
+    /* @__PURE__ */ o("label", { className: "flex flex-col gap-1 text-[10px]", children: [
+      /* @__PURE__ */ e("span", { className: "text-neutral-content", children: "Key" }),
+      /* @__PURE__ */ e(
+        _,
+        {
+          value: a.key || "",
+          selfId: n,
+          ensureSelfId: l,
+          onChange: (r) => t({ key: r })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ o("label", { className: "flex flex-col gap-1 text-[10px]", children: [
+      /* @__PURE__ */ e("span", { className: "text-neutral-content", children: "Kind" }),
+      /* @__PURE__ */ o(
+        w,
+        {
+          value: a.kind || "flag",
+          onChange: (r) => t({ kind: r }),
+          propKey: "toggleStateKind",
+          children: [
+            /* @__PURE__ */ e("option", { value: "flag", children: "Flag" }),
+            /* @__PURE__ */ e("option", { value: "visibility", children: "Visibility" }),
+            /* @__PURE__ */ e("option", { value: "value", children: "Value" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ o("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ o("label", { className: "flex flex-1 flex-col gap-1 text-[10px]", children: [
+        /* @__PURE__ */ e("span", { className: "text-neutral-content", children: "Value A" }),
+        /* @__PURE__ */ e(
+          "input",
+          {
+            className: "bg-base-100 border-base-300 rounded-field border px-2 py-1 text-xs",
+            value: c[0],
+            onChange: (r) => t({ values: [r.target.value, c[1]] }),
+            placeholder: "optional"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ o("label", { className: "flex flex-1 flex-col gap-1 text-[10px]", children: [
+        /* @__PURE__ */ e("span", { className: "text-neutral-content", children: "Value B" }),
+        /* @__PURE__ */ e(
+          "input",
+          {
+            className: "bg-base-100 border-base-300 rounded-field border px-2 py-1 text-xs",
+            value: c[1],
+            onChange: (r) => t({ values: [c[0], r.target.value] }),
+            placeholder: "optional"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function Pe({
+  action: a,
+  patch: t,
+  selfId: n,
+  ensureSelfId: l
+}) {
+  return /* @__PURE__ */ o("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ e("p", { className: "text-neutral-content text-[10px] leading-snug", children: 'Removes the state entry entirely. Useful for "reset to default" buttons.' }),
+    /* @__PURE__ */ o("label", { className: "flex flex-col gap-1 text-[10px]", children: [
+      /* @__PURE__ */ e("span", { className: "text-neutral-content", children: "Key" }),
+      /* @__PURE__ */ e(
+        _,
+        {
+          value: a.key || "",
+          selfId: n,
+          ensureSelfId: l,
+          onChange: (c) => t({ key: c })
+        }
+      )
+    ] })
+  ] });
+}
+function Se({
+  action: a,
+  patch: t
+}) {
+  return /* @__PURE__ */ o(m, { children: [
+    /* @__PURE__ */ o("p", { className: "text-neutral-content text-[10px] leading-snug", children: [
+      "Toggles the site light/dark preference (stored in",
+      " ",
+      /* @__PURE__ */ e("code", { className: "text-[9px]", children: "ph-theme" }),
+      ", same as the editor chrome)."
+    ] }),
+    /* @__PURE__ */ e(
+      D,
+      {
+        value: a.dismissTarget || "",
+        filter: "all",
+        label: "Dismiss target (optional)",
+        onChange: (n) => t({ dismissTarget: n || void 0 })
+      }
+    ),
+    a.dismissTarget ? /* @__PURE__ */ o(
+      w,
+      {
+        value: a.dismissMethod || "style",
+        onChange: (n) => t({ dismissMethod: n }),
+        propKey: "toggleThemeDismissMethod",
+        children: [
+          /* @__PURE__ */ e("option", { value: "style", children: "Hide: style (display:none)" }),
+          /* @__PURE__ */ e("option", { value: "class", children: "Hide: .hidden class" })
+        ]
+      }
+    ) : null
+  ] });
+}
+const Re = {
+  link: { type: "link", href: "" },
+  "open-modal": { type: "open-modal", anchor: "" },
+  "show-hide": { type: "show-hide", target: "", direction: "toggle", trigger: "click" },
+  "copy-to-clipboard": { type: "copy-to-clipboard", text: "" },
+  "download-file": { type: "download-file", url: "" },
+  "toggle-theme": { type: "toggle-theme" },
+  "add-to-cart": { type: "add-to-cart" },
+  "toggle-cart": { type: "toggle-cart" },
+  "cart-checkout": { type: "cart-checkout" },
+  "manage-subscription": { type: "manage-subscription" },
+  "agent-send": { type: "agent-send", field: "agentMessage" },
+  "set-local-storage": { type: "set-local-storage", key: "", value: "" },
+  "remove-local-storage": { type: "remove-local-storage", key: "" },
+  "set-state": { type: "set-state", key: "", value: "" },
+  "toggle-state": { type: "toggle-state", key: "" },
+  "clear-state": { type: "clear-state", key: "" },
+  "increment-state": { type: "increment-state", key: "", step: 1 },
+  "decrement-state": { type: "decrement-state", key: "", step: 1 }
+};
+function $e({
+  action: a,
+  patch: t,
+  replace: n,
+  selfId: l,
+  ensureSelfId: c
+}) {
+  switch (a.type) {
+    case "link":
+      return /* @__PURE__ */ e(be, { action: a, replace: n });
+    case "open-modal":
+      return /* @__PURE__ */ e(
+        D,
+        {
+          value: a.anchor,
+          filter: "modal",
+          label: "Modal",
+          onChange: (r) => t({ anchor: r })
+        }
+      );
+    case "show-hide":
+      return /* @__PURE__ */ e(we, { action: a, patch: t });
+    case "copy-to-clipboard":
+      return /* @__PURE__ */ e(ue, { action: a, patch: t });
+    case "download-file":
+      return /* @__PURE__ */ e(he, { action: a, patch: t });
+    case "toggle-theme":
+      return /* @__PURE__ */ e(Se, { action: a, patch: t });
+    case "add-to-cart":
+      return /* @__PURE__ */ e(pe, { action: a, patch: t });
+    case "toggle-cart":
+      return /* @__PURE__ */ e("p", { className: "text-neutral-content text-[10px] leading-snug", children: "Opens or closes the shopping cart drawer." });
+    case "cart-checkout":
+      return /* @__PURE__ */ e("p", { className: "text-neutral-content text-[10px] leading-snug", children: "Redirects to Stripe Checkout with the current cart contents." });
+    case "manage-subscription":
+      return /* @__PURE__ */ e("p", { className: "text-neutral-content text-[10px] leading-snug", children: "Redirects logged-in customers to the Stripe customer portal to manage subscriptions." });
+    case "set-local-storage":
+      return /* @__PURE__ */ e(ye, { action: a, patch: t });
+    case "remove-local-storage":
+      return /* @__PURE__ */ e(ve, { action: a, patch: t });
+    case "set-state":
+      return /* @__PURE__ */ e(
+        Ce,
+        {
+          action: a,
+          patch: t,
+          selfId: l,
+          ensureSelfId: c
+        }
+      );
+    case "toggle-state":
+      return /* @__PURE__ */ e(
+        Te,
+        {
+          action: a,
+          patch: t,
+          selfId: l,
+          ensureSelfId: c
+        }
+      );
+    case "clear-state":
+      return /* @__PURE__ */ e(
+        Pe,
+        {
+          action: a,
+          patch: t,
+          selfId: l,
+          ensureSelfId: c
+        }
+      );
+    default:
+      return null;
+  }
+}
+export {
+  Re as A,
+  $e as a
+};