@pagehub/sdk 0.1.0

package/dist/chunks/ModifiersModal-BnWIL5Y2.js

@@ -0,0 +1,329 @@
+import { jsx as t, jsxs as s, Fragment as V } from "react/jsx-runtime";
+import { ROOT_NODE as R } from "@craftjs/utils";
+import { useEditor as X } from "@craftjs/core";
+import { useState as d, useEffect as Y, useCallback as Z } from "react";
+import { B as ee, c5 as te, aS as ne, aT as se, f as le, aU as ae, aV as ie, d as re, P as W, cQ as ce, bC as oe, ct as de } from "./index-lNS44FHV.js";
+function ge({ isOpen: A, onClose: I }) {
+  const { actions: M, query: D } = X(), [x, P] = d({}), [r, k] = d(""), [w, C] = d(null), [g, m] = d(""), [N, u] = d(""), [v, f] = d(""), [y, h] = d(""), [T, E] = d(!1), [_, O] = d("");
+  Y(() => {
+    var e, l;
+    if (A)
+      try {
+        const n = D.node(R).get(), a = ((l = (e = n == null ? void 0 : n.data) == null ? void 0 : e.props) == null ? void 0 : l.modifiers) || {};
+        P(JSON.parse(JSON.stringify(a)));
+        const i = Object.keys(a);
+        !r && i.length > 0 && k(i[0]);
+      } catch (n) {
+        ee.error("Error loading modifiers:", n);
+      }
+  }, [A, D]);
+  const c = x[r] || [], S = Object.keys(x).sort(), B = Z(
+    (e) => {
+      const l = {};
+      for (const [n, a] of Object.entries(e))
+        a.length > 0 && (l[n] = a);
+      P(l), M.setProp(R, (n) => {
+        n.modifiers = Object.keys(l).length > 0 ? l : void 0;
+      });
+    },
+    [M]
+  ), G = (e) => {
+    const l = { ...x };
+    if (l[r] = c.filter((n, a) => a !== e), l[r].length === 0) {
+      delete l[r];
+      const n = Object.keys(l);
+      k(n[0] || "");
+    }
+    B(l);
+  }, J = (e) => {
+    C(e), m(c[e].name), u(c[e].label), f(c[e].classes || ""), h(c[e].description || ""), E(!1);
+  }, F = () => {
+    var n, a;
+    if (!g.trim() || !N.trim()) return;
+    const e = { ...x }, l = [...c];
+    if (w !== null) {
+      const i = c[w], p = { name: g.trim(), label: N.trim() };
+      if (v.trim() && (p.classes = v.trim()), y.trim() && (p.description = y.trim()), l[w] = p, (i == null ? void 0 : i.classes) !== p.classes) {
+        const $ = ((i == null ? void 0 : i.classes) || "").split(/\s+/).filter(Boolean), q = (p.classes || "").split(/\s+/).filter(Boolean), Q = D.getSerializedNodes();
+        for (const [H, L] of Object.entries(Q))
+          H === "ROOT" || !(((a = (n = L == null ? void 0 : L.props) == null ? void 0 : n.root) == null ? void 0 : a.activeModifiers) || []).includes(i.name) || M.setProp(H, (b) => {
+            const z = (b.className || "").split(/\s+/).filter(Boolean).filter((j) => !$.includes(j));
+            for (const j of q)
+              z.includes(j) || z.push(j);
+            b.className = z.join(" "), b.root || (b.root = {}), b.root.modifierClasses || (b.root.modifierClasses = {}), b.root.modifierClasses[p.name] = p.classes || "";
+          });
+      }
+    }
+    e[r] = l, B(e), C(null), m(""), u(""), f(""), h("");
+  }, K = () => {
+    const e = _.trim();
+    if (!g.trim() || !N.trim() || !e) return;
+    const l = g.trim().toLowerCase().replace(/\s+/g, "-"), n = { ...x };
+    if (n[e] || (n[e] = []), n[e].some((i) => i.name === l)) return;
+    const a = { name: l, label: N.trim() };
+    v.trim() && (a.classes = v.trim()), y.trim() && (a.description = y.trim()), n[e].push(a), B(n), k(e), E(!1), m(""), u(""), f(""), h(""), O("");
+  }, U = () => {
+    E(!0), C(null), m(""), u(""), f(""), h(""), O(r);
+  }, o = "w-full rounded-lg border border-base-300 bg-input px-3 py-2 text-sm text-base-content placeholder:text-neutral-content focus:outline-none focus:ring-2 focus:ring-ring";
+  return /* @__PURE__ */ t(
+    te,
+    {
+      isOpen: A,
+      onClose: I,
+      title: "Modifiers",
+      backdrop: !0,
+      storageKey: "modifiers-manager",
+      autoSize: !1,
+      defaultWidth: 500,
+      defaultHeight: Math.round(typeof window < "u" ? window.innerHeight - 120 : 600),
+      minWidth: 360,
+      maxWidth: 700,
+      minHeight: 300,
+      edges: ["e", "s", "se", "w", "sw"],
+      children: /* @__PURE__ */ s("div", { className: "flex h-full flex-col", children: [
+        S.length > 0 && !T && /* @__PURE__ */ t("div", { className: "border-base-300 bg-neutral border-b px-4 py-2", children: /* @__PURE__ */ t(
+          ne,
+          {
+            value: r,
+            onChange: (e) => {
+              k(e), C(null);
+            },
+            children: /* @__PURE__ */ s("div", { className: "relative", children: [
+              /* @__PURE__ */ s(se, { className: "border-base-300 bg-input text-base-content focus:ring-ring flex w-full items-center justify-between rounded-lg border px-4 py-2 text-left text-sm focus:ring-2 focus:outline-none", children: [
+                /* @__PURE__ */ t("span", { children: r || "Select type" }),
+                /* @__PURE__ */ t(le, { className: "text-neutral-content" })
+              ] }),
+              /* @__PURE__ */ t(
+                ae,
+                {
+                  anchor: "bottom start",
+                  className: "pagehub-sdk-root ph-select-content",
+                  modal: !1,
+                  children: S.map((e) => /* @__PURE__ */ t(ie, { value: e, className: "ph-select-item", children: ({ selected: l }) => {
+                    var n;
+                    return /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ t("span", { className: "flex w-4 shrink-0 items-center justify-center", children: l && /* @__PURE__ */ t(re, { size: 14 }) }),
+                      e,
+                      /* @__PURE__ */ t("span", { className: "text-neutral-content ml-auto text-xs", children: ((n = x[e]) == null ? void 0 : n.length) || 0 })
+                    ] });
+                  } }, e))
+                }
+              )
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ s("div", { className: "scrollbar-light bg-base-100 flex-1 overflow-y-auto p-4", children: [
+          T && /* @__PURE__ */ s("div", { className: "border-base-300 bg-neutral/50 space-y-3 rounded-lg border p-4", children: [
+            /* @__PURE__ */ t("p", { className: "text-sm font-medium", children: "New Modifier" }),
+            /* @__PURE__ */ s("div", { children: [
+              /* @__PURE__ */ t("label", { className: "text-neutral-content mb-1 block text-xs font-medium", children: "Component Type" }),
+              /* @__PURE__ */ t(
+                "input",
+                {
+                  type: "text",
+                  value: _,
+                  onChange: (e) => O(e.target.value),
+                  placeholder: "e.g. Button, Container",
+                  className: o
+                }
+              )
+            ] }),
+            /* @__PURE__ */ s("div", { children: [
+              /* @__PURE__ */ t("label", { className: "text-neutral-content mb-1 block text-xs font-medium", children: "Label" }),
+              /* @__PURE__ */ t(
+                "input",
+                {
+                  type: "text",
+                  value: N,
+                  onChange: (e) => u(e.target.value),
+                  placeholder: "e.g. Outline, Rounded",
+                  className: o,
+                  autoFocus: !0
+                }
+              )
+            ] }),
+            /* @__PURE__ */ s("div", { children: [
+              /* @__PURE__ */ t("label", { className: "text-neutral-content mb-1 block text-xs font-medium", children: "Modifier Name" }),
+              /* @__PURE__ */ t(
+                "input",
+                {
+                  type: "text",
+                  value: g,
+                  onChange: (e) => m(e.target.value),
+                  placeholder: "e.g. section-wrapper",
+                  className: o
+                }
+              )
+            ] }),
+            /* @__PURE__ */ s("div", { children: [
+              /* @__PURE__ */ t("label", { className: "text-neutral-content mb-1 block text-xs font-medium", children: "Classes (optional — for composite modifiers)" }),
+              /* @__PURE__ */ t(
+                "textarea",
+                {
+                  value: v,
+                  onChange: (e) => f(e.target.value),
+                  placeholder: "e.g. flex flex-col gap-space-md w-full",
+                  className: `${o} min-h-[3rem] resize-y`,
+                  rows: 2
+                }
+              )
+            ] }),
+            /* @__PURE__ */ s("div", { children: [
+              /* @__PURE__ */ t("label", { className: "text-neutral-content mb-1 block text-xs font-medium", children: "Description (optional — shown as help text in the editor)" }),
+              /* @__PURE__ */ t(
+                "input",
+                {
+                  type: "text",
+                  value: y,
+                  onChange: (e) => h(e.target.value),
+                  placeholder: "e.g. Adds an outline border, removes fill",
+                  className: o
+                }
+              )
+            ] }),
+            /* @__PURE__ */ s("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ t("button", { onClick: K, className: "btn btn-primary flex-1", children: "Add" }),
+              /* @__PURE__ */ t(
+                "button",
+                {
+                  onClick: () => {
+                    E(!1), m(""), u(""), f(""), h(""), O("");
+                  },
+                  className: "btn btn-secondary flex-1",
+                  children: "Cancel"
+                }
+              )
+            ] })
+          ] }),
+          !T && /* @__PURE__ */ s(V, { children: [
+            S.length === 0 && /* @__PURE__ */ t("p", { className: "text-neutral-content text-center text-sm", children: 'No modifiers yet. Click "Add Modifier" to create one.' }),
+            r && c.length === 0 && /* @__PURE__ */ s("p", { className: "text-neutral-content text-center text-sm", children: [
+              "No modifiers for ",
+              r,
+              "."
+            ] }),
+            /* @__PURE__ */ t("div", { className: "space-y-1", children: c.map((e, l) => /* @__PURE__ */ t("div", { children: w === l ? /* @__PURE__ */ s("div", { className: "border-base-300 bg-neutral/50 space-y-2 rounded-lg border p-3", children: [
+              /* @__PURE__ */ s("div", { children: [
+                /* @__PURE__ */ t("label", { className: "text-neutral-content mb-1 block text-xs font-medium", children: "Label" }),
+                /* @__PURE__ */ t(
+                  "input",
+                  {
+                    value: N,
+                    onChange: (n) => u(n.target.value),
+                    className: o,
+                    autoFocus: !0
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ s("div", { children: [
+                /* @__PURE__ */ t("label", { className: "text-neutral-content mb-1 block text-xs font-medium", children: "Modifier Name" }),
+                /* @__PURE__ */ t(
+                  "input",
+                  {
+                    value: g,
+                    onChange: (n) => m(n.target.value),
+                    className: o,
+                    onKeyDown: (n) => {
+                      n.key === "Enter" && F();
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ s("div", { children: [
+                /* @__PURE__ */ t("label", { className: "text-neutral-content mb-1 block text-xs font-medium", children: "Classes (composite)" }),
+                /* @__PURE__ */ t(
+                  "textarea",
+                  {
+                    value: v,
+                    onChange: (n) => f(n.target.value),
+                    className: `${o} min-h-[3rem] resize-y`,
+                    rows: 2,
+                    placeholder: "e.g. flex flex-col gap-space-md w-full"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ s("div", { children: [
+                /* @__PURE__ */ t("label", { className: "text-neutral-content mb-1 block text-xs font-medium", children: "Description (optional)" }),
+                /* @__PURE__ */ t(
+                  "input",
+                  {
+                    type: "text",
+                    value: y,
+                    onChange: (n) => h(n.target.value),
+                    className: o,
+                    placeholder: "e.g. Adds an outline border, removes fill"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ s("div", { className: "flex gap-2", children: [
+                /* @__PURE__ */ t("button", { onClick: F, className: "btn btn-primary flex-1", children: "Save" }),
+                /* @__PURE__ */ t(
+                  "button",
+                  {
+                    onClick: () => C(null),
+                    className: "btn btn-secondary flex-1",
+                    children: "Cancel"
+                  }
+                )
+              ] })
+            ] }) : /* @__PURE__ */ s("div", { className: "hover:bg-neutral flex items-center gap-2 rounded-md px-3 py-2", children: [
+              /* @__PURE__ */ s("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ s("div", { children: [
+                  /* @__PURE__ */ t("span", { className: "text-sm font-medium", children: e.label }),
+                  /* @__PURE__ */ s("span", { className: "text-neutral-content ml-2 text-xs", children: [
+                    ".",
+                    e.name
+                  ] }),
+                  e.classes && /* @__PURE__ */ s("span", { className: "text-neutral-content/60 ml-1 text-[9px]", children: [
+                    "×",
+                    e.classes.split(/\s+/).filter(Boolean).length
+                  ] })
+                ] }),
+                e.description && /* @__PURE__ */ t("p", { className: "text-neutral-content/70 truncate text-[10px]", children: e.description }),
+                e.classes && /* @__PURE__ */ t("p", { className: "text-neutral-content/50 truncate text-[10px]", children: e.classes })
+              ] }),
+              /* @__PURE__ */ t(
+                "button",
+                {
+                  onClick: () => J(l),
+                  className: "text-neutral-content hover:text-base-content",
+                  "data-tooltip-id": W,
+                  "data-tooltip-content": "Edit",
+                  children: /* @__PURE__ */ t(ce, { size: 14 })
+                }
+              ),
+              /* @__PURE__ */ t(
+                "button",
+                {
+                  onClick: () => G(l),
+                  className: "text-neutral-content hover:text-error",
+                  "data-tooltip-id": W,
+                  "data-tooltip-content": "Delete",
+                  children: /* @__PURE__ */ t(oe, { size: 14 })
+                }
+              )
+            ] }) }, l)) })
+          ] })
+        ] }),
+        /* @__PURE__ */ s("div", { className: "border-base-300 bg-neutral flex gap-3 border-t p-4", children: [
+          !T && /* @__PURE__ */ s(
+            "button",
+            {
+              type: "button",
+              onClick: U,
+              className: "btn btn-primary flex flex-1 items-center justify-center gap-1",
+              children: [
+                /* @__PURE__ */ t(de, { size: 14 }),
+                "Add Modifier"
+              ]
+            }
+          ),
+          /* @__PURE__ */ t("button", { type: "button", onClick: I, className: "btn btn-secondary flex-1", children: "Done" })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  ge as ModifiersModal
+};

package/dist/chunks/ModifiersPickerPanel-C9YlQggG.js

@@ -0,0 +1,241 @@
+import { jsx as n, jsxs as l, Fragment as y } from "react/jsx-runtime";
+import { dR as v, dt as N, c6 as w, P as b, R as u, dn as C, c5 as k, d8 as P } from "./index-lNS44FHV.js";
+import { useState as M, useMemo as A } from "react";
+import { u as L } from "./useModifiers-BUaftv28.js";
+function S({ name: e }) {
+  return /* @__PURE__ */ n("div", { className: "text-neutral-content/80 mt-1 mb-1.5 px-0.5 text-[10px] font-semibold tracking-wide uppercase", children: e });
+}
+function E({
+  mod: e,
+  active: r,
+  onToggle: i,
+  onHoverPreview: t
+}) {
+  const s = e.classes ? e.classes.split(/\s+/).filter(Boolean).length : 0;
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: u(
+        "border-base-300 hover:border-base-content/40 group flex items-stretch overflow-hidden rounded-md border bg-transparent transition-colors",
+        r && "border-primary bg-primary/5 hover:border-primary"
+      ),
+      children: [
+        /* @__PURE__ */ l(
+          "button",
+          {
+            type: "button",
+            onClick: i,
+            className: "hover:bg-base-200 flex min-w-0 flex-1 flex-col items-start gap-0.5 px-2 py-1.5 text-left transition-colors",
+            children: [
+              /* @__PURE__ */ l("div", { className: "flex w-full items-baseline justify-between gap-1.5", children: [
+                /* @__PURE__ */ n(
+                  "span",
+                  {
+                    className: u(
+                      "truncate text-xs font-medium",
+                      r ? "text-primary" : "text-base-content"
+                    ),
+                    children: e.label
+                  }
+                ),
+                /* @__PURE__ */ l("span", { className: "flex shrink-0 items-center gap-1.5", children: [
+                  s > 0 && /* @__PURE__ */ l("span", { className: u("text-[9px]", r ? "text-primary/60" : "opacity-50"), children: [
+                    "×",
+                    s
+                  ] }),
+                  e.origin === "site" && /* @__PURE__ */ n("span", { className: "text-[9px] opacity-40", children: "custom" })
+                ] })
+              ] }),
+              e.description && /* @__PURE__ */ n("p", { className: "line-clamp-2 text-[10px] leading-snug opacity-70", children: e.description })
+            ]
+          }
+        ),
+        /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            onMouseEnter: t,
+            "aria-label": `Preview ${e.label}`,
+            "data-tooltip-id": b,
+            "data-tooltip-content": "Hold to preview",
+            "data-tooltip-place": "left",
+            "data-tooltip-delay-show": 400,
+            className: "border-base-300/70 text-neutral-content hover:bg-primary/10 hover:text-primary flex shrink-0 items-center justify-center border-l border-dashed px-2 opacity-50 transition-[color,background-color,opacity] group-hover:opacity-100",
+            children: /* @__PURE__ */ n(C, { className: "size-3.5", "aria-hidden": !0 })
+          }
+        )
+      ]
+    }
+  );
+}
+function z({
+  mods: e,
+  isActive: r,
+  onToggle: i,
+  onHoverPreview: t
+}) {
+  return /* @__PURE__ */ n("div", { className: "flex flex-col gap-1", children: e.map((s) => /* @__PURE__ */ n(
+    E,
+    {
+      mod: s,
+      active: r(s),
+      onToggle: () => i(s),
+      onHoverPreview: () => t(s)
+    },
+    s.name
+  )) });
+}
+function _({
+  mods: e,
+  isActive: r,
+  onToggle: i
+}) {
+  const t = e.find((a) => r(a)), s = (t == null ? void 0 : t.name) ?? "", m = [
+    { value: "", label: "—", tooltip: "None", widthClass: "flex-none w-7" },
+    ...e.map((a) => ({
+      value: a.name,
+      label: a.label,
+      tooltip: a.description || a.classes || a.name
+    }))
+  ];
+  return /* @__PURE__ */ n(
+    w,
+    {
+      value: s,
+      onChange: (a) => {
+        if (!a) {
+          t && i(t);
+          return;
+        }
+        const c = e.find((p) => p.name === a);
+        c && i(c);
+      },
+      options: m,
+      tooltipId: b
+    }
+  );
+}
+function j({
+  mods: e,
+  isActive: r,
+  onToggle: i
+}) {
+  const t = e.find((o) => r(o)), s = (t == null ? void 0 : t.name) ?? "";
+  return /* @__PURE__ */ l(y, { children: [
+    /* @__PURE__ */ l(N, { value: s, onChange: (o) => {
+      if (!o && t) {
+        i(t);
+        return;
+      }
+      const a = e.find((c) => c.name === o);
+      a && i(a);
+    }, placeholder: "None", children: [
+      /* @__PURE__ */ n("option", { value: "", children: "None" }),
+      e.map((o) => /* @__PURE__ */ n("option", { value: o.name, children: o.label }, o.name))
+    ] }),
+    (t == null ? void 0 : t.description) && /* @__PURE__ */ n("p", { className: "text-neutral-content/70 mt-1 text-[10px] leading-snug", children: t.description })
+  ] });
+}
+function B({
+  cat: e,
+  isActive: r,
+  onToggle: i,
+  onHoverPreview: t
+}) {
+  return /* @__PURE__ */ l("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ n(S, { name: e.name }),
+    e.renderAs === "patterns" || e.renderAs === "chips" ? /* @__PURE__ */ n(
+      z,
+      {
+        mods: e.mods,
+        isActive: r,
+        onToggle: i,
+        onHoverPreview: t
+      }
+    ) : e.renderAs === "dropdown" ? /* @__PURE__ */ n(j, { mods: e.mods, isActive: r, onToggle: i }) : /* @__PURE__ */ n(_, { mods: e.mods, isActive: r, onToggle: i })
+  ] });
+}
+function H(e, r) {
+  return [
+    e.label,
+    e.name,
+    e.category ?? "",
+    e.description ?? "",
+    e.classes ?? ""
+  ].join(" ").toLowerCase().includes(r);
+}
+function I() {
+  const {
+    categorized: e,
+    isActive: r,
+    previewModifier: i,
+    commitModifier: t,
+    toggleModifier: s,
+    endPreview: m,
+    hasModifiers: o
+  } = L(), [a, c] = M(""), p = a.trim().toLowerCase(), f = A(() => {
+    if (!p) return e;
+    const d = [];
+    for (const h of e) {
+      const x = h.mods.filter((g) => H(g, p));
+      x.length !== 0 && d.push({ ...h, mods: x, renderAs: "chips" });
+    }
+    return d;
+  }, [e, p]);
+  return o ? /* @__PURE__ */ l("div", { className: "flex flex-col gap-1", onMouseLeave: m, children: [
+    /* @__PURE__ */ n(
+      v,
+      {
+        value: a,
+        onChange: c,
+        placeholder: "Search modifiers",
+        className: "mb-1",
+        size: "slim"
+      }
+    ),
+    f.length === 0 ? /* @__PURE__ */ l("div", { className: "text-neutral-content py-6 text-center text-xs", children: [
+      "No modifiers match “",
+      a,
+      "”"
+    ] }) : f.map((d) => /* @__PURE__ */ n(
+      B,
+      {
+        cat: d,
+        isActive: r,
+        onToggle: d.renderAs === "dropdown" ? s : t,
+        onHoverPreview: i
+      },
+      d.name
+    ))
+  ] }) : /* @__PURE__ */ n("div", { className: "text-neutral-content py-6 text-center text-xs", children: "No modifiers available for this component." });
+}
+function D({
+  initialPosition: e,
+  onClose: r,
+  defaultWidth: i,
+  defaultHeight: t
+}) {
+  return /* @__PURE__ */ n(
+    k,
+    {
+      isOpen: !0,
+      onClose: r,
+      title: "Modifiers",
+      storageKey: "modifiers-picker",
+      autoSize: !1,
+      defaultWidth: i,
+      defaultHeight: t,
+      minWidth: 280,
+      maxWidth: 420,
+      minHeight: 240,
+      initialPosition: e,
+      persistSize: !1,
+      zIndex: P,
+      scrollable: !0,
+      children: /* @__PURE__ */ n(I, {})
+    }
+  );
+}
+export {
+  D as default
+};

package/dist/chunks/NodeAiContextInputPopover-Brcd2Cr8.js

@@ -0,0 +1,65 @@
+import { jsxs as C, Fragment as E, jsx as r } from "react/jsx-runtime";
+import { ROOT_NODE as I } from "@craftjs/utils";
+import { useNode as O } from "@craftjs/core";
+import { useState as b, Suspense as T, lazy as R } from "react";
+import { cg as j, c1 as k, dg as v } from "./index-lNS44FHV.js";
+import { u as z } from "./usePopoverAutoOpen-BJbJARN-.js";
+const _ = R(() => import("./NodeAiContextPanel-BZSjQInG.js")), $ = 380, L = 32;
+function f(t, e) {
+  return t.length <= e ? t : t.slice(0, e - 1).trimEnd() + "…";
+}
+function W(t, e) {
+  const o = t.trim().length > 0, i = e.length > 0;
+  return o && i ? `${f(t, 20)} · ${e.length} tag${e.length === 1 ? "" : "s"}` : o ? f(t, L) : i ? e.length <= 2 ? e.join(", ") : `${e.length} tags` : "";
+}
+function q({ def: t }) {
+  const [e, o] = b(!1), { triggerRef: i, initialPos: m, setInitialPos: p, computePosition: h } = j($), {
+    actions: { setProp: P },
+    id: a,
+    notes: l,
+    tags: c
+  } = O((n) => {
+    var d, u;
+    const s = ((u = (d = n.data) == null ? void 0 : d.props) == null ? void 0 : u.design) || {};
+    return {
+      id: n.id,
+      notes: typeof s.notes == "string" ? s.notes : "",
+      tags: Array.isArray(s.tags) ? s.tags.filter((y) => typeof y == "string") : []
+    };
+  }), A = a === I || !l.trim() && c.length === 0, N = W(l, c), g = () => {
+    p(h()), o(!0);
+  };
+  z({ nodeId: a, defId: t == null ? void 0 : t.id, onOpen: g });
+  const x = () => {
+    P((n) => {
+      n.design && (delete n.design.notes, delete n.design.tags, Object.keys(n.design).length === 0 && delete n.design);
+    });
+  };
+  return /* @__PURE__ */ C(E, { children: [
+    A ? (
+      // Popover-only section: section title click opens the panel via the
+      // open-request atom. No visible `+`, just an invisible anchor so
+      // computePosition() can place the panel at the section's right edge.
+      /* @__PURE__ */ r("span", { ref: i, "aria-hidden": !0, className: "block size-0" })
+    ) : /* @__PURE__ */ r(
+      k,
+      {
+        mode: "popover",
+        ref: i,
+        open: e,
+        onTriggerClick: () => e ? o(!1) : g(),
+        onClear: () => {
+          e && o(!1), x();
+        },
+        triggerAriaLabel: "Edit AI context",
+        clearAriaLabel: "Clear AI context",
+        leading: /* @__PURE__ */ r(v, { className: "size-3.5", "aria-hidden": !0 }),
+        summary: N
+      }
+    ),
+    e && /* @__PURE__ */ r(T, { fallback: null, children: /* @__PURE__ */ r(_, { initialPosition: m, onClose: () => o(!1) }) })
+  ] });
+}
+export {
+  q as default
+};