@paramrig/web 0.1.0

package/dist/paramrig-web.js

@@ -0,0 +1,533 @@
+const be = "paramrig.web";
+function m(t) {
+  return !!t && typeof t == "object" && !Array.isArray(t);
+}
+function N(t) {
+  return typeof t == "string" && /^[a-zA-Z0-9][a-zA-Z0-9_-]{0,127}$/.test(t);
+}
+function k(t) {
+  return typeof t == "string" && t.length > 0 && t.length <= 2e3;
+}
+function Ze(t) {
+  if (!m(t)) return !1;
+  const s = (c, a) => a < 12 && (c === null || typeof c == "boolean" || typeof c == "string" && c.length <= 1e5 || typeof c == "number" && Number.isFinite(c) || Array.isArray(c) && c.length <= 1e3 && c.every((d) => s(d, a + 1)) || m(c) && Object.keys(c).length <= 1e3 && Object.entries(c).every(([d, p]) => !["__proto__", "prototype", "constructor"].includes(d) && s(p, a + 1)));
+  return s(t, 0);
+}
+function lt(t) {
+  if (!m(t) || t.version !== 1 || !N(t.id) || !k(t.name) || !k(t.revision) || typeof t.origin != "string") throw new Error("Invalid web project manifest.");
+  const s = new URL(t.origin);
+  if (!["http:", "https:"].includes(s.protocol) || s.origin !== t.origin || s.username || s.password) throw new Error("The project origin must be an HTTP or HTTPS origin.");
+  if (!Array.isArray(t.pages) || !t.pages.length || t.pages.length > 100 || !t.pages.every((o) => m(o) && N(o.id) && k(o.name) && typeof o.path == "string" && o.path.startsWith("/") && new URL(o.path, s).origin === s.origin)) throw new Error("Declare valid project pages.");
+  if (!Array.isArray(t.groups) || !t.groups.every((o) => m(o) && N(o.id) && k(o.label))) throw new Error("Invalid control groups.");
+  if (!Array.isArray(t.parameters) || t.parameters.length > 500) throw new Error("Invalid controls.");
+  const c = /* @__PURE__ */ new Set(["number", "color", "select", "curve", "switch", "gradient", "text", "vector", "range", "palette", "points", "radial", "group", "list", "resource", "gizmo2d", "gizmo3d", "camera", "textureFrame", "multiselect", "action", "preset"]), a = (o, x = 0) => !(x > 8 || !m(o) || !N(o.id) || !k(o.label) || typeof o.group != "string" || !c.has(String(o.kind)) || !Ze({ value: o.defaultValue }) || o.kind === "number" && !(typeof o.min == "number" && typeof o.max == "number" && o.min <= o.max && typeof o.step == "number" && o.step > 0) || ["select", "preset", "multiselect"].includes(String(o.kind)) && !(Array.isArray(o.options) && o.options.every((y) => m(y) && typeof y.value == "string" && k(y.label))) || o.kind === "group" && !(Array.isArray(o.fields) && o.fields.every((y) => a(y, x + 1))) || o.kind === "list" && !a(o.item, x + 1));
+  if (!t.parameters.every((o) => a(o))) throw new Error("Invalid control definition.");
+  const d = t.parameters.map((o) => o.id);
+  if (new Set(d).size !== d.length || new Set(t.pages.map((o) => o.id)).size !== t.pages.length) throw new Error("Control and page IDs must be unique.");
+  const p = t.pages;
+  if (!Array.isArray(t.bindings) || !t.bindings.every((o) => m(o) && d.includes(String(o.paramId)) && ["global", "page", "element"].includes(String(o.scope)) && ["css-variable", "style", "adapter"].includes(String(o.kind)) && k(o.property) && (o.scope !== "element" || m(o.target) && k(o.target.id)) && (o.scope !== "page" || p.some((x) => x.id === o.pageId)))) throw new Error("Invalid web bindings.");
+  return structuredClone(t);
+}
+function Ve(t) {
+  return m(t) && ["x", "y", "width", "height"].every((s) => Number.isFinite(t[s])) && Number(t.width) >= 0 && Number(t.height) >= 0;
+}
+function se(t) {
+  const s = (c) => c === void 0 || m(c) && k(c.id) && (c.instance === void 0 || k(c.instance));
+  return m(t) && k(t.key) && typeof t.tag == "string" && s(t.stable) && typeof t.selector == "string" && typeof t.fingerprint == "string" && typeof t.label == "string" && typeof t.pageId == "string" && Array.isArray(t.ancestors) && t.ancestors.every((c) => m(c) && k(c.key) && typeof c.label == "string" && s(c.stable)) && Ve(t.rect) && (t.clip === void 0 || Ve(t.clip)) && ["resolved", "provisional", "missing", "ambiguous"].includes(String(t.status)) && (t.controls === void 0 || Number.isInteger(t.controls) && Number(t.controls) >= 0 && Number(t.controls) <= 1e3);
+}
+const he = (t) => typeof t == "string" && /^#[\da-f]{3,8}$/i.test(t);
+function dt(t) {
+  return m(t) && he(t.outline) && he(t.chip) && he(t.chipText);
+}
+function ut(t) {
+  return m(t) && typeof t.pageId == "string" && typeof t.url == "string" && m(t.viewport) && ["width", "height", "dpr"].every((s) => Number.isFinite(t.viewport[s]) && Number(t.viewport[s]) > 0) && m(t.scroll) && Number.isFinite(t.scroll.x) && Number.isFinite(t.scroll.y) && Array.isArray(t.scrollers) && t.scrollers.length <= 1e3 && t.scrollers.every((s) => m(s) && se(s.target) && Number.isFinite(s.x) && Number.isFinite(s.y));
+}
+function pt(t) {
+  return m(t) && N(t.id) && ["note", "arrow", "rectangle", "ellipse", "highlight", "pen"].includes(String(t.tool)) && typeof t.color == "string" && /^#[\da-f]{6}$/i.test(t.color) && typeof t.width == "number" && t.width > 0 && t.width <= 32 && typeof t.pageId == "string" && m(t.viewport) && Number.isFinite(t.viewport.width) && Number.isFinite(t.viewport.height) && Array.isArray(t.points) && t.points.length <= 1e4 && t.points.every((s) => m(s) && Number.isFinite(s.x) && Number.isFinite(s.y));
+}
+function Xe(t, s) {
+  return { channel: be, version: 1, sessionId: t, payload: s };
+}
+function ft(t, s) {
+  return { channel: be, version: 1, type: "sdk-present", projectId: t, instanceId: s };
+}
+function gt(t) {
+  return m(t) && t.channel === be && typeof t.version == "number" && N(t.sessionId) && m(t.payload) && typeof t.payload.type == "string";
+}
+function mt(t) {
+  switch (t.type) {
+    case "hello":
+      return N(t.projectId);
+    case "values":
+      return Ze(t.values) && typeof t.source == "boolean";
+    case "select":
+      return se(t.target);
+    case "reveal-target":
+      return se(t.target);
+    case "restore-context":
+      return ut(t.context);
+    case "navigate":
+      return typeof t.path == "string";
+    case "capture":
+      return N(t.requestId);
+    case "configure":
+      return (t.chrome === void 0 || dt(t.chrome)) && (t.activeMarks === void 0 || Array.isArray(t.activeMarks) && t.activeMarks.every(N)) && (t.activeTargets === void 0 || Array.isArray(t.activeTargets) && t.activeTargets.every((s) => typeof s == "string" && s.length < 2e3)) && (t.displayScale === void 0 || typeof t.displayScale == "number" && t.displayScale >= 0.05 && t.displayScale <= 4) && ["browse", "select", "annotate"].includes(String(t.mode)) && ["note", "arrow", "rectangle", "ellipse", "highlight", "pen"].includes(String(t.tool)) && typeof t.color == "string" && /^#[\da-f]{6}$/i.test(t.color) && Array.isArray(t.targets) && t.targets.every(se) && Array.isArray(t.marks) && t.marks.every(pt);
+    default:
+      return !1;
+  }
+}
+function Ye(t, s, c) {
+  if (!t.targetKey) return t.points.map((d) => ({ x: d.x - c.x, y: d.y - c.y }));
+  const a = s.find((d) => d.key === t.targetKey);
+  return !a || a.status === "missing" || a.status === "ambiguous" ? null : t.points.map((d) => ({ x: a.rect.x + d.x * a.rect.width, y: a.rect.y + d.y * a.rect.height }));
+}
+function Be(t, s, c) {
+  return s ? { x: (t.x - s.rect.x) / Math.max(1, s.rect.width), y: (t.y - s.rect.y) / Math.max(1, s.rect.height) } : { x: t.x + c.x, y: t.y + c.y };
+}
+function yt(t) {
+  const s = t.map((p) => p.x), c = t.map((p) => p.y), a = Math.min(...s), d = Math.min(...c);
+  return { x: a, y: d, width: Math.max(...s) - a, height: Math.max(...c) - d };
+}
+function ht(t, s) {
+  const c = s[0], a = s.at(-1);
+  if (!c || !a) return "";
+  const d = yt([c, a]);
+  if (t.tool === "rectangle" || t.tool === "highlight") return `M${d.x},${d.y}h${d.width}v${d.height}h${-d.width}Z`;
+  if (t.tool === "ellipse") return `M${d.x},${d.y + d.height / 2}a${d.width / 2},${d.height / 2} 0 1 0 ${d.width},0a${d.width / 2},${d.height / 2} 0 1 0 ${-d.width},0`;
+  if (t.tool === "note") return `M${c.x - 6},${c.y}a6,6 0 1 0 12,0a6,6 0 1 0 -12,0`;
+  if (t.tool === "arrow") {
+    const p = Math.atan2(a.y - c.y, a.x - c.x), o = 12;
+    return `M${c.x},${c.y}L${a.x},${a.y}M${a.x - Math.cos(p - 0.5) * o},${a.y - Math.sin(p - 0.5) * o}L${a.x},${a.y}L${a.x - Math.cos(p + 0.5) * o},${a.y - Math.sin(p + 0.5) * o}`;
+  }
+  return s.map((p, o) => `${o ? "L" : "M"}${p.x},${p.y}`).join(" ");
+}
+const wt = ["http://localhost:5174", "http://127.0.0.1:5174"], qe = (t) => {
+  try {
+    return typeof t == "string" && new URL(t).origin === t;
+  } catch {
+    return !1;
+  }
+}, we = () => ({ dispose() {
+} });
+let q = null;
+const Je = { px: 1, pt: 96 / 72, pc: 16, in: 96, cm: 96 / 2.54, mm: 96 / 25.4, q: 96 / 101.6 }, bt = { s: 1, ms: 1 / 1e3 }, xt = { deg: 1, grad: 0.9, rad: 180 / Math.PI, turn: 360 };
+function Ge(t, s, c) {
+  if (t in Je) return Je[t];
+  const a = (d) => parseFloat(getComputedStyle(d).fontSize) || 16;
+  if (t === "rem") return a(document.documentElement);
+  if (t === "em") return a(c === "font-size" && s.parentElement ? s.parentElement : s);
+  if (t === "vw") return window.innerWidth / 100;
+  if (t === "vh") return window.innerHeight / 100;
+  if (t === "vmin") return Math.min(window.innerWidth, window.innerHeight) / 100;
+  if (t === "vmax") return Math.max(window.innerWidth, window.innerHeight) / 100;
+}
+function Et(t, s, c, a, d) {
+  for (const x of [bt, xt]) if (s in x && c in x) return t * x[s] / x[c];
+  const p = Ge(s, a, d), o = Ge(c, a, d);
+  return p !== void 0 && o !== void 0 && o > 0 ? t * p / o : void 0;
+}
+function At(t, s, c) {
+  const a = /^(-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?)([a-z%]*)$/i.exec(t);
+  if (!a) {
+    const y = parseFloat(t);
+    return Number.isFinite(y) ? y : void 0;
+  }
+  const d = Number(a[1]), p = a[2].toLowerCase(), o = (s.unit ?? "").toLowerCase();
+  if (!p || p === o) return d;
+  const x = Et(d, p, o, c, s.property);
+  return x === void 0 ? void 0 : Math.round(x * 1e6) / 1e6;
+}
+function St({ manifest: t, hostOrigin: s = wt, adapters: c = {} }) {
+  const a = lt(t), d = typeof s == "string" ? [s] : [...s];
+  if (!d.length || d.some((e) => !qe(e)))
+    return console.warn(`ParamRig: hostOrigin must be one or more workbench origins such as "http://localhost:5174", but is ${JSON.stringify(s)}. The page is left untouched.`), we();
+  if (a.origin !== location.origin)
+    return console.warn(`ParamRig: this page is at ${location.origin} and .paramrig/manifest.json declares ${a.origin}. Open the page at the manifest origin, or set the manifest's "origin" to ${location.origin}. The page is left untouched.`), we();
+  if (window.parent === window) return we();
+  q && (console.warn("ParamRig: connectWeb was called again before the previous connection was disposed. The previous one is replaced; call dispose() in the effect cleanup and in the hot-reload handler."), q.dispose());
+  let p = "", o = "";
+  const x = crypto.randomUUID();
+  let y = "browse", J = "note", xe = "#df7757", ae = 1, Ee, ce = [], le = [], I = [], T = [], A = null, K = null, b = null, L, H, z, G = null, V = null, de = !1, ue = !1, Z = 0, Ae = "", Se = "", pe = "", $e = [], D = { outline: "#488a99", chip: "#1e2423", chipText: "#eef2f1" };
+  const fe = document.documentElement.style.touchAction, Q = /* @__PURE__ */ new Map(), F = /* @__PURE__ */ new Map(), O = Object.fromEntries(a.parameters.map((e) => [e.id, structuredClone(e.defaultValue)])), M = "http://www.w3.org/2000/svg", E = document.createElement("paramrig-overlay");
+  E.tabIndex = -1, E.setAttribute("aria-label", "Page selection. Use arrow keys to select ancestors, children and siblings."), Object.assign(E.style, { position: "fixed", inset: "0", pointerEvents: "none", zIndex: "2147483647", contain: "strict", outline: "none" });
+  const Qe = E.attachShadow({ mode: "closed" }), C = document.createElementNS(M, "svg");
+  C.setAttribute("width", "100%"), C.setAttribute("height", "100%"), C.style.overflow = "visible", Qe.append(C);
+  const S = () => a.pages.find((e) => new URL(e.path, a.origin).pathname === location.pathname)?.id ?? location.pathname, Ie = (e) => `id:${encodeURIComponent(S())}:${encodeURIComponent(e.id)}:${encodeURIComponent(e.instance ?? "")}`, X = (e) => {
+    const r = e.getAttribute("data-paramrig-id");
+    if (!r) return;
+    const n = e.getAttribute("data-paramrig-instance") ?? e.closest("[data-paramrig-instance]")?.getAttribute("data-paramrig-instance") ?? void 0;
+    return { id: r, ...n ? { instance: n } : {} };
+  }, ge = (e, r = !1) => [...document.querySelectorAll(`[data-paramrig-id="${CSS.escape(e.id)}"]`)].filter((n) => !r && e.instance === void 0 || X(n)?.instance === e.instance);
+  function ve(e) {
+    const r = [];
+    let n = e;
+    for (; n && n !== document.documentElement; ) {
+      if (n.id && document.querySelectorAll(`#${CSS.escape(n.id)}`).length === 1) {
+        r.unshift(`#${CSS.escape(n.id)}`);
+        break;
+      }
+      const i = n.parentElement ? [...n.parentElement.children].filter((l) => l.tagName === n.tagName) : [];
+      r.unshift(`${n.localName}:nth-of-type(${i.indexOf(n) + 1})`), n = n.parentElement;
+    }
+    return r.join(" > ") || "html";
+  }
+  const et = (e) => `${e.localName}|${e.getAttribute("role") ?? ""}|${e.getAttribute("aria-label") ?? ""}|${(e.textContent ?? "").trim().replace(/\s+/g, " ").slice(0, 160)}`, ke = (e) => {
+    const r = e.replace(/[-_]+/g, " ").trim();
+    return r ? r[0].toUpperCase() + r.slice(1) : "";
+  }, Le = (e) => {
+    const r = e.getAttribute("data-paramrig-label");
+    if (r) return r.slice(0, 90);
+    const n = e.getAttribute("data-paramrig-id");
+    if (n && ke(n)) return ke(n).slice(0, 60);
+    const i = e.getAttribute("aria-label");
+    return i ? i.slice(0, 90) : ((e.matches("a,button,p,h1,h2,h3,h4,h5,h6,label,span,li,em,strong,small,figcaption,summary,td,th,dt,dd,legend") ? (e.textContent ?? "").trim().replace(/\s+/g, " ") : "") || `Unnamed ${e.localName}`).slice(0, 60);
+  }, tt = (e) => {
+    const r = X(e);
+    return r ? new Set(a.bindings.filter((n) => te(n) && n.scope === "element" && n.target?.id === r.id && (n.target.instance === void 0 || n.target.instance === r.instance)).map((n) => n.paramId)).size : 0;
+  };
+  function P(e, r = !0) {
+    const n = X(e), i = ve(e), l = n ? Ie(n) : `dom:${S()}:${i}`, u = e.getBoundingClientRect();
+    let g = 0, h = 0, f = innerWidth, W = innerHeight;
+    for (let $ = e.parentElement; $; $ = $.parentElement) {
+      const _ = getComputedStyle($), U = $.getBoundingClientRect();
+      /(auto|scroll|hidden|clip)/.test(_.overflowX) && (g = Math.max(g, U.left), f = Math.min(f, U.right)), /(auto|scroll|hidden|clip)/.test(_.overflowY) && (h = Math.max(h, U.top), W = Math.min(W, U.bottom));
+    }
+    const oe = { x: g, y: h, width: Math.max(0, f - g), height: Math.max(0, W - h) }, Y = e.closest("[data-paramrig-source]")?.getAttribute("data-paramrig-source");
+    Q.set(l, e);
+    const B = [];
+    if (r) {
+      let $ = e.parentElement;
+      for (; $ && B.length < 12; ) {
+        const _ = X($), U = _ ? Ie(_) : `dom:${S()}:${ve($)}`;
+        Q.set(U, $), B.push({ key: U, label: Le($), stable: _ }), $ = $.parentElement;
+      }
+    }
+    return { key: l, stable: n, selector: i, fingerprint: et(e), label: Le(e), tag: e.localName, ...Y ? { source: Y } : {}, pageId: S(), rect: { x: u.x, y: u.y, width: u.width, height: u.height }, clip: oe, ancestors: B, controls: tt(e), status: n ? ge(n, !0).length === 1 ? "resolved" : "ambiguous" : "provisional" };
+  }
+  function ee(e) {
+    if (e.pageId !== S()) return { target: { ...e, status: "missing" } };
+    if (e.stable) {
+      const n = ge(e.stable, !0);
+      return n.length !== 1 ? { target: { ...e, status: n.length ? "ambiguous" : "missing" } } : { element: n[0], target: { ...P(n[0]), key: e.key } };
+    }
+    const r = Q.get(e.key);
+    return r?.isConnected ? { element: r, target: { ...P(r), key: e.key } } : { target: { ...e, status: "missing" } };
+  }
+  function nt() {
+    const e = [...document.querySelectorAll("[data-paramrig-id]")].slice(0, 200), r = `${S()}|${e.map((n) => `${n.getAttribute("data-paramrig-id")}/${X(n)?.instance ?? ""}`).join(",")}`;
+    return r !== pe && (pe = r, $e = e.map((n) => P(n, !1))), $e;
+  }
+  function me() {
+    const e = [];
+    for (const r of document.querySelectorAll("[data-paramrig-id]")) (r.scrollTop || r.scrollLeft) && e.push({ target: P(r, !1), x: r.scrollLeft, y: r.scrollTop });
+    return { pageId: S(), url: location.href, viewport: { width: innerWidth, height: innerHeight, dpr: devicePixelRatio }, scroll: { x: scrollX, y: scrollY }, scrollers: e };
+  }
+  function v(e) {
+    p && o && !ue && window.parent.postMessage(Xe(p, e), o);
+  }
+  function rt() {
+    C.replaceChildren(), delete E.dataset.hover;
+    const e = (n) => {
+      if (!n?.clip) return C;
+      const i = document.createElementNS(M, "clipPath"), l = document.createElementNS(M, "rect"), u = `paramrig-clip-${C.childElementCount}`;
+      i.id = u;
+      for (const h of ["x", "y", "width", "height"]) l.setAttribute(h, String(n.clip[h]));
+      i.append(l), C.append(i);
+      const g = document.createElementNS(M, "g");
+      return g.setAttribute("clip-path", `url(#${u})`), C.append(g), g;
+    }, r = y === "browse" ? [] : [A, ...I.filter((n) => ce.includes(n.key))];
+    for (const n of r.filter((i) => !!i && !["missing", "ambiguous"].includes(i.status))) {
+      const i = e(n), l = document.createElementNS(M, "rect");
+      for (const u of ["x", "y", "width", "height"]) l.setAttribute(u, String(n.rect[u]));
+      l.setAttribute("fill", `${D.outline.slice(0, 7)}14`), l.setAttribute("stroke", D.outline), l.setAttribute("stroke-width", "1.5"), i.append(l), n === A && it(i, n);
+    }
+    for (const n of [...T.filter((i) => i.id !== b?.id), ...b ? [b] : []]) {
+      if (n.pageId !== S()) continue;
+      const i = Ye(n, [...I, ...L ? [L] : []], { x: scrollX, y: scrollY });
+      if (!i) continue;
+      const l = e(n.targetKey ? [...I, ...L ? [L] : []].find((h) => h.key === n.targetKey) : void 0), u = document.createElementNS(M, "path"), g = y !== "annotate" || le.includes(n.id);
+      if (u.setAttribute("d", ht(n, i)), u.setAttribute("stroke", n.color), u.setAttribute("stroke-width", String(n.width)), u.setAttribute("stroke-linecap", "round"), u.setAttribute("stroke-linejoin", "round"), u.setAttribute("fill", n.tool === "highlight" ? `${n.color}33` : n.tool === "note" ? n.color : "none"), l.append(u), g || u.setAttribute("opacity", ".35"), y === "annotate" && g) for (const h of [i[0], i.at(-1)].filter((f) => !!f)) {
+        const f = document.createElementNS(M, "circle");
+        f.setAttribute("cx", String(h.x)), f.setAttribute("cy", String(h.y)), f.setAttribute("r", "3"), f.setAttribute("fill", n.color), l.append(f);
+      }
+    }
+  }
+  function it(e, r) {
+    const n = 1 / Math.max(0.05, ae), i = 11 * n, l = 18 * n, u = 6 * n, g = r.controls ? `${r.label} · ${r.controls} control${r.controls === 1 ? "" : "s"}` : r.label;
+    E.dataset.hover = g;
+    const h = document.createElementNS(M, "rect"), f = document.createElementNS(M, "text");
+    f.textContent = g, f.setAttribute("font-family", "system-ui, -apple-system, Segoe UI, sans-serif"), f.setAttribute("font-size", String(i)), f.setAttribute("fill", D.chipText), f.setAttribute("dominant-baseline", "central"), e.append(h, f);
+    const W = Math.min((f.getComputedTextLength?.() ?? g.length * i * 0.55) + u * 2, innerWidth), oe = Math.max(0, Math.min(innerWidth - W, r.rect.x)), Y = r.rect.y - l - 2 * n >= 0 ? r.rect.y - l - 2 * n : Math.min(innerHeight - l, r.rect.y + 2 * n);
+    for (const [B, $] of [["x", oe], ["y", Y], ["width", W], ["height", l], ["rx", 3 * n]]) h.setAttribute(B, String($));
+    h.setAttribute("fill", D.chip), h.setAttribute("stroke", D.outline), h.setAttribute("stroke-width", String(n)), f.setAttribute("x", String(oe + u)), f.setAttribute("y", String(Y + l / 2));
+  }
+  function ot() {
+    if (Z = 0, !p || ue) return;
+    if (I = I.map((l) => ee(l).target), A) {
+      const l = Q.get(A.key);
+      A = l?.isConnected ? P(l) : null;
+    }
+    const e = JSON.stringify([A, I, ce, T, b, y, scrollX, scrollY]);
+    e !== Se && (rt(), Se = e);
+    const r = me(), n = nt(), i = JSON.stringify([r, I, pe]);
+    i !== Ae && (Ae = i, v({ type: "scene", context: r, targets: I, page: n })), !document.hidden && (y !== "browse" || T.length > 0 || I.length > 0) && w();
+  }
+  function w() {
+    !Z && p && (Z = requestAnimationFrame(ot));
+  }
+  function Me(e) {
+    return e.target ? ge(e.target) : [document.documentElement];
+  }
+  function te(e) {
+    return !e.pageId || e.pageId === S();
+  }
+  function ne() {
+    for (const [e, r] of F) if (e instanceof HTMLElement || e instanceof SVGElement) for (const [n, i] of r)
+      i.value ? e.style.setProperty(n, i.value, i.priority) : e.style.removeProperty(n);
+    F.clear();
+    for (const e of Object.values(c)) e.restore();
+  }
+  function Ce() {
+    for (const e of a.bindings.filter(te)) {
+      const r = a.parameters.find((l) => l.id === e.paramId);
+      if (e.kind === "adapter") {
+        c[e.property] && (O[e.paramId] = c[e.property].read());
+        continue;
+      }
+      const n = Me(e)[0];
+      if (!n) continue;
+      const i = getComputedStyle(n).getPropertyValue(e.property).trim();
+      if (i)
+        if (r.kind === "number") {
+          const l = At(i, e, n);
+          l !== void 0 && (O[r.id] = l);
+        } else if (r.kind === "color") {
+          if (/^#[\da-f]{6}([\da-f]{2})?$/i.test(i)) {
+            O[r.id] = i.toLowerCase();
+            continue;
+          }
+          const l = document.createElement("canvas").getContext("2d");
+          if (l) {
+            l.fillStyle = i, l.fillRect(0, 0, 1, 1);
+            const u = l.getImageData(0, 0, 1, 1).data;
+            O[r.id] = `#${[...u].slice(0, r.alpha ? 4 : 3).map((g) => g.toString(16).padStart(2, "0")).join("")}`;
+          }
+        } else O[r.id] = i;
+    }
+  }
+  function Pe() {
+    if (ne(), !V || de) {
+      w();
+      return;
+    }
+    for (const e of a.bindings.filter(te)) {
+      const r = V[e.paramId];
+      if (!(r === void 0 || JSON.stringify(r) === JSON.stringify(O[e.paramId])) && e.kind === "adapter") {
+        if (!c[e.property]) {
+          v({ type: "error", message: `Missing adapter: ${e.property}` });
+          continue;
+        }
+        c[e.property].apply(r);
+      }
+    }
+    Ne(), w();
+  }
+  function Ne() {
+    if (!(!V || de)) {
+      for (const [e] of F) e.isConnected || F.delete(e);
+      for (const e of a.bindings.filter((r) => te(r) && r.kind !== "adapter")) {
+        const r = V[e.paramId];
+        if (!(r === void 0 || JSON.stringify(r) === JSON.stringify(O[e.paramId])) && !(typeof r != "string" && typeof r != "number")) {
+          for (const n of Me(e)) if (n instanceof HTMLElement || n instanceof SVGElement) {
+            const i = F.get(n) ?? /* @__PURE__ */ new Map();
+            i.has(e.property) || i.set(e.property, { value: n.style.getPropertyValue(e.property), priority: n.style.getPropertyPriority(e.property) }), F.set(n, i);
+            const l = `${r}${e.unit ?? ""}`, u = document.createElement("span").style;
+            u.setProperty(e.property, l, "important");
+            const g = u.getPropertyValue(e.property);
+            g && (n.style.getPropertyValue(e.property) !== g || n.style.getPropertyPriority(e.property) !== u.getPropertyPriority(e.property)) && n.style.setProperty(e.property, g, "important");
+          }
+        }
+      }
+    }
+  }
+  function Te() {
+    v({ type: "ready", instanceId: x, manifest: a, sourceValues: O, context: me() }), w();
+  }
+  function re(e, r = !1) {
+    K = e, A = P(e), v({ type: "selection", target: A, additive: r }), w();
+  }
+  async function st(e) {
+    try {
+      const { toPng: r } = await import("./index-L3Zm-CoX.js"), n = await r(document.documentElement, { filter: (i) => i !== E, pixelRatio: 1, width: innerWidth, height: innerHeight, style: { transform: `translate(${-scrollX}px, ${-scrollY}px)`, transformOrigin: "0 0" } });
+      v({ type: "capture", requestId: e, dataUrl: n });
+    } catch (r) {
+      v({ type: "capture", requestId: e, error: r instanceof Error ? r.message : "DOM capture is unavailable." });
+    }
+  }
+  function Oe(e) {
+    if (e.source !== window.parent || !gt(e.data) || (o ? e.origin !== o : !d.includes(e.origin))) return;
+    const r = e.data;
+    if (r.payload.type === "hello") {
+      if (r.payload.projectId !== a.id) return;
+      if (r.version !== 1) {
+        window.parent.postMessage(Xe(r.sessionId, { type: "error", message: "Incompatible web protocol. Update the project integration." }), e.origin);
+        return;
+      }
+      if (o = e.origin, p !== r.sessionId) {
+        p = r.sessionId;
+        try {
+          ne(), Ce();
+        } catch (i) {
+          v({ type: "error", message: `Cannot read the source controls: ${String(i)}` });
+          return;
+        }
+        E.isConnected || document.documentElement.append(E);
+      }
+      Te();
+      return;
+    }
+    if (r.sessionId !== p || r.version !== 1 || !mt(r.payload)) return;
+    const n = r.payload;
+    if (n.type === "configure" && ((n.mode !== y || n.tool !== J) && R(), y = n.mode, ae = n.displayScale ?? 1, n.chrome && (D = n.chrome), y === "browse" && (A = null), J = n.tool, xe = n.color, I = n.targets, T = n.marks, Ee = n.activeTarget, ce = n.activeTargets ?? (n.activeTarget ? [n.activeTarget] : []), le = n.activeMarks ?? T.map((i) => i.id), document.documentElement.style.touchAction = y === "annotate" ? "none" : fe, w()), n.type === "values") {
+      V = n.values, de = n.source;
+      try {
+        Pe();
+      } catch (i) {
+        v({ type: "error", message: String(i) });
+      }
+    }
+    if (n.type === "select") {
+      const i = ee(n.target);
+      i.element && (i.element.scrollIntoView({ block: "nearest", inline: "nearest" }), re(i.element));
+    }
+    if (n.type === "reveal-target" && ee(n.target).element?.scrollIntoView({ block: "nearest", inline: "nearest" }), n.type === "restore-context" && n.context.pageId === S()) {
+      for (const i of n.context.scrollers) ee(i.target).element?.scrollTo(i.x, i.y);
+      window.scrollTo(n.context.scroll.x, n.context.scroll.y), w();
+    }
+    if (n.type === "navigate") {
+      const i = new URL(n.path, a.origin);
+      i.origin === a.origin && a.pages.some((l) => l.path === n.path) && location.assign(i);
+    }
+    n.type === "capture" && st(n.requestId);
+  }
+  function j() {
+    return p && y !== "browse";
+  }
+  function Re(e) {
+    return e.composedPath().find((r) => r instanceof Element && r !== E && !E.contains(r));
+  }
+  function Ue(e) {
+    if (!j() || e.button !== 0) return;
+    e.preventDefault(), e.stopImmediatePropagation();
+    const r = Re(e);
+    if (!r) return;
+    if (E.focus({ preventScroll: !0 }), y === "select") {
+      re(r, e.shiftKey);
+      return;
+    }
+    const n = { x: e.clientX, y: e.clientY };
+    H = void 0;
+    for (const i of [...T].reverse().filter((l) => l.pageId === S() && le.includes(l.id))) {
+      const l = Ye(i, I, { x: scrollX, y: scrollY });
+      if (!l) continue;
+      const u = I.find((f) => f.key === i.targetKey)?.clip;
+      if (u && (n.x < u.x || n.y < u.y || n.x > u.x + u.width || n.y > u.y + u.height)) continue;
+      const g = (e.pointerType === "touch" ? 22 : 16) / ae, h = [0, l.length - 1].find((f) => Math.hypot(l[f].x - n.x, l[f].y - n.y) <= g);
+      if (h !== void 0) {
+        b = structuredClone(i), H = h, L = I.find((f) => f.key === i.targetKey);
+        break;
+      }
+    }
+    if (!b) {
+      L = J === "note" ? P(r) : I.find((l) => l.key === Ee && !["missing", "ambiguous"].includes(l.status));
+      const i = Be(n, L, { x: scrollX, y: scrollY });
+      b = { id: crypto.randomUUID(), tool: J, color: xe, width: 2, points: [i, i], targetKey: L?.key, pageId: S(), viewport: { width: innerWidth, height: innerHeight } };
+    }
+    z = e.pointerId, G = r;
+    try {
+      r.setPointerCapture(e.pointerId);
+    } catch {
+    }
+    w();
+  }
+  function ze(e) {
+    if (j()) {
+      if (b && e.pointerId === z) {
+        e.preventDefault(), e.stopImmediatePropagation();
+        const r = Be({ x: e.clientX, y: e.clientY }, L, { x: scrollX, y: scrollY });
+        H !== void 0 ? b.points[H] = r : b.tool === "pen" ? b.points.length < 1e4 && b.points.push(r) : b.points[b.points.length - 1] = r;
+      } else {
+        const r = Re(e);
+        A = r ? P(r) : null;
+      }
+      w();
+    }
+  }
+  function De(e) {
+    j() && (e.preventDefault(), e.stopImmediatePropagation(), b && e.pointerId === z && (v({ type: "mark", mark: b, target: L, context: me() }), T = [...T.filter((r) => r.id !== b.id), b], R()));
+  }
+  function R() {
+    if (G && z !== void 0)
+      try {
+        G.releasePointerCapture(z);
+      } catch {
+      }
+    b = null, z = void 0, G = null, L = void 0, H = void 0, w();
+  }
+  function ie(e) {
+    !j() || e.relatedTarget || !A || (A = null, w());
+  }
+  function Fe() {
+    R(), A && (A = null, w());
+  }
+  function je(e) {
+    j() && (e.preventDefault(), e.stopImmediatePropagation());
+  }
+  function We(e) {
+    if (!j()) return;
+    if (e.key === "Escape") {
+      R(), A = null, y = "browse", document.documentElement.style.touchAction = fe, v({ type: "exit-tool" }), w(), e.preventDefault();
+      return;
+    }
+    if (e.key.toLowerCase() === "c" && !e.metaKey && !e.ctrlKey && !e.altKey && K?.isConnected) {
+      e.preventDefault(), e.stopImmediatePropagation(), v({ type: "comment", target: P(K) });
+      return;
+    }
+    if ((e.metaKey || e.ctrlKey) && ["z", "y"].includes(e.key.toLowerCase())) {
+      e.preventDefault(), e.stopImmediatePropagation(), v({ type: "history", direction: e.shiftKey || e.key === "y" ? "redo" : "undo" });
+      return;
+    }
+    const r = K?.isConnected ? K : document.body, n = e.key === "ArrowUp" ? r.parentElement : e.key === "ArrowDown" ? r.firstElementChild : e.key === "ArrowRight" ? r.nextElementSibling : e.key === "ArrowLeft" ? r.previousElementSibling : null;
+    n && n !== E && (e.preventDefault(), e.stopImmediatePropagation(), re(n)), e.key === "Enter" && (e.preventDefault(), re(r));
+  }
+  const _e = new MutationObserver((e) => {
+    !p || e.every((r) => r.target === E || E.contains(r.target)) || (Ne(), w());
+  });
+  _e.observe(document.documentElement, { subtree: !0, childList: !0, attributes: !0, characterData: !0 });
+  const Ke = new ResizeObserver(w);
+  Ke.observe(document.documentElement), window.addEventListener("message", Oe), window.addEventListener("scroll", w, !0), window.addEventListener("resize", w), window.addEventListener("pointerdown", Ue, !0), window.addEventListener("pointermove", ze, !0), window.addEventListener("pointerup", De, !0), window.addEventListener("pointercancel", R, !0), window.addEventListener("click", je, !0), window.addEventListener("keydown", We, !0), window.addEventListener("blur", Fe), window.addEventListener("pointerout", ie, !0), window.addEventListener("pointerleave", ie, !0);
+  const at = () => {
+    const e = location.ancestorOrigins?.[0];
+    if (qe(e)) return e;
+    try {
+      return document.referrer ? new URL(document.referrer).origin : void 0;
+    } catch {
+      return;
+    }
+  };
+  window.parent.postMessage(ft(a.id, x), at() ?? "*");
+  let He = S();
+  const ct = setInterval(() => {
+    p && (He !== S() && (He = S(), ne(), Ce(), Pe(), Te()), w());
+  }, 750), ye = {
+    dispose() {
+      q === ye && (q = null), ue = !0, R(), ne(), document.documentElement.style.touchAction = fe, E.remove(), _e.disconnect(), Ke.disconnect(), clearInterval(ct), cancelAnimationFrame(Z), window.removeEventListener("message", Oe), window.removeEventListener("scroll", w, !0), window.removeEventListener("resize", w), window.removeEventListener("pointerdown", Ue, !0), window.removeEventListener("pointermove", ze, !0), window.removeEventListener("pointerup", De, !0), window.removeEventListener("pointercancel", R, !0), window.removeEventListener("click", je, !0), window.removeEventListener("keydown", We, !0), window.removeEventListener("blur", Fe), window.removeEventListener("pointerout", ie, !0), window.removeEventListener("pointerleave", ie, !0);
+    }
+  };
+  return q = ye, ye;
+}
+export {
+  wt as DEFAULT_HOST_ORIGINS,
+  St as connectWeb,
+  lt as parseManifest
+};