@supernovaio/prototyping-tooling 0.9.6 → 0.9.7-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/client/general/ForgeClient.d.ts +2 -0
  2. package/dist/client/general/ForgeClient.d.ts.map +1 -1
  3. package/dist/client.js +65 -57
  4. package/dist/{constants-BXKWBfHg.js → constants-DqGvo09s.js} +14 -14
  5. package/dist/host.js +1 -1
  6. package/dist/index.js +1 -1
  7. package/dist/shared/constants.d.ts +1 -0
  8. package/dist/shared/constants.d.ts.map +1 -1
  9. package/package.json +1 -1
package/dist/client/general/ForgeClient.d.ts CHANGED
@@ -10,6 +10,8 @@ import type { ForgeClientOptions } from "./types.js";
10
10
  export declare class ForgeClient {
11
11
  private static instance;
12
12
  private messenger;
13
+ private readyIntervalId;
14
+ private isConnectedToHost;
13
15
  private selectMode;
14
16
  private designMode;
15
17
  private hoverDisabled;
package/dist/client/general/ForgeClient.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ForgeClient.d.ts","sourceRoot":"","sources":["../../../src/client/general/ForgeClient.ts"],"names":[],"mappings":"AACA,OAAO,EAA+C,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAA;AAOhH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAEpD;;;;;;GAMG;AACH,qBAAa,WAAW;IACtB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAA2B;IAClD,OAAO,CAAC,SAAS,CAAiB;IAClC,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,aAAa,CAAQ;IAC7B,OAAO,CAAC,iBAAiB,CAAmB;IAC5C,OAAO,CAAC,iBAAiB,CAAiC;IAC1D,OAAO,CAAC,gBAAgB,CAAsB;IAC9C,OAAO,CAAC,gBAAgB,CAAsB;IAC9C,OAAO,CAAC,OAAO,CAAC,CAAwB;IAExC,OAAO;IA4BP,4EAA4E;IAC5E,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,kBAAkB,GAAG,WAAW;IAO7D,6FAA6F;IAC7F,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAI5C,2FAA2F;IAC3F,kBAAkB,CAAC,WAAW,EAAE,qBAAqB,EAAE,GAAG,IAAI;IAS9D,OAAO,CAAC,oBAAoB;IA8E5B,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,iBAAiB;IAezB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,uBAAuB;IAkB/B,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,yBAAyB;CAkBlC"}
1
+ {"version":3,"file":"ForgeClient.d.ts","sourceRoot":"","sources":["../../../src/client/general/ForgeClient.ts"],"names":[],"mappings":"AACA,OAAO,EAA+C,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAA;AAOhH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAEpD;;;;;;GAMG;AACH,qBAAa,WAAW;IACtB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAA2B;IAClD,OAAO,CAAC,SAAS,CAAiB;IAClC,OAAO,CAAC,eAAe,CAAsB;IAC7C,OAAO,CAAC,iBAAiB,CAAQ;IACjC,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,aAAa,CAAQ;IAC7B,OAAO,CAAC,iBAAiB,CAAmB;IAC5C,OAAO,CAAC,iBAAiB,CAAiC;IAC1D,OAAO,CAAC,gBAAgB,CAAsB;IAC9C,OAAO,CAAC,gBAAgB,CAAsB;IAC9C,OAAO,CAAC,OAAO,CAAC,CAAwB;IAExC,OAAO;IA4BP,4EAA4E;IAC5E,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,kBAAkB,GAAG,WAAW;IAO7D,6FAA6F;IAC7F,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAI5C,2FAA2F;IAC3F,kBAAkB,CAAC,WAAW,EAAE,qBAAqB,EAAE,GAAG,IAAI;IAS9D,OAAO,CAAC,oBAAoB;IAuF5B,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,iBAAiB;IAezB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,SAAS;IAwBjB,OAAO,CAAC,uBAAuB;IAkB/B,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,yBAAyB;CAkBlC"}
package/dist/client.js CHANGED
@@ -1,4 +1,4 @@
1
- import { b as $, c as X, R as Y, d as U, Z as I, C as v, M as O, B as M, e as B, P as G, i as W, a as V, T as j } from "./constants-BXKWBfHg.js";
1
+ import { b as X, c as Y, R as U, d as B, Z as A, C as v, M as O, B as H, e as G, P as V, i as W, a as j, T as k } from "./constants-DqGvo09s.js";
2
2
  import { d as c } from "./debug-CLzmqn3R.js";
3
3
  class z {
4
4
  registry = /* @__PURE__ */ new Map();
@@ -23,7 +23,7 @@ class z {
23
23
  return !t && n[e] && (t = this.registry.get(n[e])), t ? Object.entries(t.props).filter(([o, i]) => i.editable).map(([o, i]) => ({ name: o, type: i.type, options: i.options, default: i.default, editable: i.editable, label: i.label })) : [];
24
24
  }
25
25
  }
26
- function H(r) {
26
+ function M(r) {
27
27
  if (r.id)
28
28
  return [`*[@id="${r.id}"]`];
29
29
  const e = [];
@@ -38,42 +38,42 @@ function H(r) {
38
38
  }
39
39
  return e;
40
40
  }
41
- function T(r) {
41
+ function b(r) {
42
42
  return r.length === 1 && r[0].startsWith("*[@id=") ? `//${r[0]}` : "/" + r.join("/");
43
43
  }
44
44
  const u = { FunctionComponent: 0, ClassComponent: 1, IndeterminateComponent: 2, HostRoot: 3, HostPortal: 4, HostComponent: 5, HostText: 6, Fragment: 7, Mode: 8, ContextConsumer: 9, ContextProvider: 10, ForwardRef: 11, Profiler: 12, SuspenseComponent: 13, MemoComponent: 14, SimpleMemoComponent: 15, LazyComponent: 16, IncompleteClassComponent: 17, DehydratedFragment: 18, SuspenseListComponent: 19, ScopeComponent: 21, OffscreenComponent: 22, LegacyHiddenComponent: 23, CacheComponent: 24, TracingMarkerComponent: 25, HostHoistable: 26, HostSingleton: 27, IncompleteFunctionComponent: 28, Throw: 29, ViewTransitionComponent: 30, ActivityComponent: 31 }, K = /* @__PURE__ */ new Set(["Component", "PureComponent", "Fragment", "Suspense", "Profiler", "StrictMode", "Routes", "Route", "Outlet", "Root", "ErrorBoundaryHandler", "HotReload", "Hot"]), J = [/Boundary$/, /BoundaryHandler$/, /Provider$/, /Consumer$/, /^(Inner|Outer)/, /Router$/, /^Client(Page|Segment|Root)/, /^Server(Root|Component|Render)/, /^RSC/, /Context$/, /^Hot(Reload)?$/, /^(Dev|React)(Overlay|Tools|Root)/, /Overlay$/, /Handler$/, /^With[A-Z]/, /Wrapper$/, /^Root$/];
45
- let b = null;
45
+ let T = null;
46
46
  function x(r) {
47
47
  const e = (t) => t.some((n) => n.startsWith("__reactFiber$") || n.startsWith("__reactInternalInstance$") || n.startsWith("__reactProps$"));
48
48
  return e(Object.keys(r)) || e(Object.getOwnPropertyNames(r));
49
49
  }
50
50
  function q() {
51
- if (b !== null) return b;
51
+ if (T !== null) return T;
52
52
  if (typeof document > "u") return !1;
53
53
  if (document.body && x(document.body))
54
- return c("client", "Detected React on document.body"), b = !0, !0;
55
- for (const e of Y) {
54
+ return c("client", "Detected React on document.body"), T = !0, !0;
55
+ for (const e of U) {
56
56
  const t = document.querySelector(e);
57
57
  if (t) {
58
58
  if (x(t))
59
- return c("client", "Detected React on", e), b = !0, !0;
59
+ return c("client", "Detected React on", e), T = !0, !0;
60
60
  for (const n of t.children)
61
61
  if (x(n))
62
- return c("client", "Detected React on child of", e), b = !0, !0;
62
+ return c("client", "Detected React on child of", e), T = !0, !0;
63
63
  }
64
64
  }
65
65
  if (document.body) {
66
66
  for (const e of document.body.children)
67
67
  if (x(e))
68
- return c("client", "Detected React on body child:", e.tagName), b = !0, !0;
68
+ return c("client", "Detected React on body child:", e.tagName), T = !0, !0;
69
69
  }
70
70
  const r = document.querySelectorAll("*");
71
71
  for (const e of r) {
72
72
  if (x(e))
73
- return c("client", "Detected React on deep scan:", e.tagName), b = !0, !0;
74
- if (r.length > U) break;
73
+ return c("client", "Detected React on deep scan:", e.tagName), T = !0, !0;
74
+ if (r.length > B) break;
75
75
  }
76
- return c("client", "React NOT detected on page"), b = !1, !1;
76
+ return c("client", "React NOT detected on page"), T = !1, !1;
77
77
  }
78
78
  function Z(r) {
79
79
  const e = Object.keys(r);
@@ -91,7 +91,7 @@ function Z(r) {
91
91
  });
92
92
  return i && r[i] || null;
93
93
  }
94
- function A(r) {
94
+ function I(r) {
95
95
  return r ? r.displayName ? r.displayName : r.name ? r.name : null : null;
96
96
  }
97
97
  function Q(r) {
@@ -100,18 +100,18 @@ function Q(r) {
100
100
  if (e === u.ForwardRef) {
101
101
  const i = n;
102
102
  if (i?.render) {
103
- const s = A(i.render);
103
+ const s = I(i.render);
104
104
  if (s) return s;
105
105
  }
106
- return i?.displayName ? i.displayName : A(t);
106
+ return i?.displayName ? i.displayName : I(t);
107
107
  }
108
108
  if (e === u.MemoComponent || e === u.SimpleMemoComponent) {
109
109
  const i = n;
110
110
  if (i?.type) {
111
- const s = A(i.type);
111
+ const s = I(i.type);
112
112
  if (s) return s;
113
113
  }
114
- return i?.displayName ? i.displayName : A(t);
114
+ return i?.displayName ? i.displayName : I(t);
115
115
  }
116
116
  if (e === u.ContextProvider) {
117
117
  const i = t;
@@ -123,9 +123,9 @@ function Q(r) {
123
123
  }
124
124
  if (e === u.LazyComponent) {
125
125
  const i = n;
126
- return i?._status === 1 && i._result ? A(i._result) : null;
126
+ return i?._status === 1 && i._result ? I(i._result) : null;
127
127
  }
128
- return e === u.IncompleteClassComponent || e === u.IncompleteFunctionComponent || e === u.FunctionComponent || e === u.ClassComponent || e === u.IndeterminateComponent ? A(t) : null;
128
+ return e === u.IncompleteClassComponent || e === u.IncompleteFunctionComponent || e === u.FunctionComponent || e === u.ClassComponent || e === u.IndeterminateComponent ? I(t) : null;
129
129
  }
130
130
  function ee(r) {
131
131
  return r.length <= 2 || r.length <= 3 && r === r.toLowerCase();
@@ -133,7 +133,7 @@ function ee(r) {
133
133
  function te(r) {
134
134
  return !(K.has(r) || J.some((e) => e.test(r)));
135
135
  }
136
- function ne(r, e = $, t = X) {
136
+ function ne(r, e = X, t = Y) {
137
137
  if (!q())
138
138
  return c("client", "isReactPage() = false"), { path: null, components: [] };
139
139
  const n = [];
@@ -151,18 +151,18 @@ function ne(r, e = $, t = X) {
151
151
  let S = null, E = null;
152
152
  function N(r, e, t, n = "solid") {
153
153
  const o = document.createElement("div");
154
- return Object.assign(o.style, { position: "fixed", left: `${r.left}px`, top: `${r.top}px`, width: `${r.width}px`, height: `${r.height}px`, border: `1px ${n} ${e}`, backgroundColor: t, pointerEvents: "none", zIndex: I.HOVER_OVERLAY, borderRadius: "2px" }), o;
154
+ return Object.assign(o.style, { position: "fixed", left: `${r.left}px`, top: `${r.top}px`, width: `${r.width}px`, height: `${r.height}px`, border: `1px ${n} ${e}`, backgroundColor: t, pointerEvents: "none", zIndex: A.HOVER_OVERLAY, borderRadius: "2px" }), o;
155
155
  }
156
156
  function oe(r) {
157
- L();
157
+ R();
158
158
  const e = r.getBoundingClientRect();
159
159
  S = N(e, v.SELECT_OVERLAY_BORDER, v.SELECT_OVERLAY_BG), S.className = "forge-overlay", document.body.appendChild(S);
160
160
  }
161
- function L() {
161
+ function R() {
162
162
  S && (S.remove(), S = null);
163
163
  }
164
164
  function ie() {
165
- return E || (E = document.createElement("div"), Object.assign(E.style, { position: "fixed", top: "0", left: "0", width: "100%", height: "100%", backgroundColor: "transparent", pointerEvents: "auto", zIndex: I.HIT_TEST_OVERLAY, cursor: "crosshair" }), E.className = "forge-hit-test-overlay", document.body.appendChild(E), E);
165
+ return E || (E = document.createElement("div"), Object.assign(E.style, { position: "fixed", top: "0", left: "0", width: "100%", height: "100%", backgroundColor: "transparent", pointerEvents: "auto", zIndex: A.HIT_TEST_OVERLAY, cursor: "crosshair" }), E.className = "forge-hit-test-overlay", document.body.appendChild(E), E);
166
166
  }
167
167
  function se() {
168
168
  E && (E.remove(), E = null);
@@ -215,7 +215,7 @@ class D {
215
215
  if (this.accumulationId !== e) {
216
216
  this.accumulationId = e, this.accumulationElements = [], this.clearAnnotationHighlights();
217
217
  for (const n of t) {
218
- const o = { xpath: T(n.xpath), forgeId: n.forgeId, forgeIdIndex: n.forgeIdIndex }, i = this.resolveLocator(o);
218
+ const o = { xpath: b(n.xpath), forgeId: n.forgeId, forgeIdIndex: n.forgeIdIndex }, i = this.resolveLocator(o);
219
219
  i && this.accumulationElements.push(i);
220
220
  }
221
221
  this.refreshAccumulationHighlights(), this.hoverSuppressed = !1, c("annotation", `Entered accumulation mode for ${e} with ${this.accumulationElements.length} elements`);
@@ -243,10 +243,10 @@ class D {
243
243
  const o = document.querySelectorAll(`[data-forge-id="${t}"]`);
244
244
  o.length > 1 && (n = Array.from(o).indexOf(e));
245
245
  }
246
- return { xpath: T(H(e)), forgeId: t, forgeIdIndex: n };
246
+ return { xpath: b(M(e)), forgeId: t, forgeIdIndex: n };
247
247
  }
248
248
  elementToInfo(e) {
249
- return { elementTag: e.tagName.toLowerCase(), xpath: H(e), componentName: e.getAttribute("data-component") || void 0, componentPath: this.getComponentPath(e) || void 0, forgeId: e.getAttribute("data-forge-id") || void 0, forgeIdIndex: this.resolveForgeIdIndex(e), sourcePos: e.getAttribute("data-source-pos") || void 0 };
249
+ return { elementTag: e.tagName.toLowerCase(), xpath: M(e), componentName: e.getAttribute("data-component") || void 0, componentPath: this.getComponentPath(e) || void 0, forgeId: e.getAttribute("data-forge-id") || void 0, forgeIdIndex: this.resolveForgeIdIndex(e), sourcePos: e.getAttribute("data-source-pos") || void 0 };
250
250
  }
251
251
  resolveForgeIdIndex(e) {
252
252
  const t = e.getAttribute("data-forge-id");
@@ -261,8 +261,8 @@ class D {
261
261
  this.messenger.send({ type: "ACCUMULATION_UPDATED", annotation: { id: this.accumulationId, dotX: 0, dotY: 0, mode: "single", elements: [], xpaths: [], elementTag: "" }, origin: O });
262
262
  return;
263
263
  }
264
- const n = e[e.length - 1].getBoundingClientRect(), o = n.left + n.width / 2, i = n.bottom, s = e.map((g) => this.elementToInfo(g)), a = e.map((g) => this.elementToLocator(g)), l = this.getAnchorRect(a), h = o - 2, d = i - M - 2, m = l && l.width > 0 && l.height > 0 ? { x: (h - l.left) / l.width, y: (d - l.top) / l.height } : { x: 0, y: 0 }, p = s[0];
265
- this.messenger.send({ type: "ACCUMULATION_UPDATED", annotation: { id: this.accumulationId, dotX: o, dotY: i, anchorOffset: m, mode: e.length > 1 ? "multi" : "single", elements: s, xpaths: s.map((g) => T(g.xpath)), elementTag: p.elementTag, componentName: p.componentName, componentPath: p.componentPath, forgeId: p.forgeId, sourcePos: p.sourcePos }, origin: O });
264
+ const n = e[e.length - 1].getBoundingClientRect(), o = n.left + n.width / 2, i = n.bottom, s = e.map((g) => this.elementToInfo(g)), a = e.map((g) => this.elementToLocator(g)), l = this.getAnchorRect(a), h = o - 2, d = i - H - 2, m = l && l.width > 0 && l.height > 0 ? { x: (h - l.left) / l.width, y: (d - l.top) / l.height } : { x: 0, y: 0 }, p = s[0];
265
+ this.messenger.send({ type: "ACCUMULATION_UPDATED", annotation: { id: this.accumulationId, dotX: o, dotY: i, anchorOffset: m, mode: e.length > 1 ? "multi" : "single", elements: s, xpaths: s.map((g) => b(g.xpath)), elementTag: p.elementTag, componentName: p.componentName, componentPath: p.componentPath, forgeId: p.forgeId, sourcePos: p.sourcePos }, origin: O });
266
266
  }
267
267
  removeDot(e) {
268
268
  const t = this.dots.get(e);
@@ -274,7 +274,7 @@ class D {
274
274
  restoreDots(e) {
275
275
  this.removeAllDots();
276
276
  for (const t of e) {
277
- const n = t.elements.map((i) => ({ xpath: T(i.xpath), forgeId: i.forgeId, forgeIdIndex: i.forgeIdIndex })), o = this.getAnchorRect(n);
277
+ const n = t.elements.map((i) => ({ xpath: b(i.xpath), forgeId: i.forgeId, forgeIdIndex: i.forgeIdIndex })), o = this.getAnchorRect(n);
278
278
  if (o && t.anchorOffset && o.width > 0 && o.height > 0) {
279
279
  const i = { rx: t.anchorOffset.x, ry: t.anchorOffset.y }, s = o.left + i.rx * o.width, a = o.top + i.ry * o.height;
280
280
  this.createDotAtPosition(s, a, t.mode, t.id, t.order, n, i);
@@ -308,7 +308,7 @@ class D {
308
308
  this.repositionHoverOverlay();
309
309
  };
310
310
  createHitTestOverlay() {
311
- this.hitTestOverlay || (this.hitTestOverlay = document.createElement("div"), Object.assign(this.hitTestOverlay.style, { position: "fixed", top: "0", left: "0", width: "100%", height: "100%", backgroundColor: "transparent", pointerEvents: "auto", zIndex: I.HIT_TEST_OVERLAY, cursor: "crosshair" }), this.hitTestOverlay.className = "forge-annotation-hit-test", document.body.appendChild(this.hitTestOverlay));
311
+ this.hitTestOverlay || (this.hitTestOverlay = document.createElement("div"), Object.assign(this.hitTestOverlay.style, { position: "fixed", top: "0", left: "0", width: "100%", height: "100%", backgroundColor: "transparent", pointerEvents: "auto", zIndex: A.HIT_TEST_OVERLAY, cursor: "crosshair" }), this.hitTestOverlay.className = "forge-annotation-hit-test", document.body.appendChild(this.hitTestOverlay));
312
312
  }
313
313
  removeHitTestOverlay() {
314
314
  this.hitTestOverlay && (this.hitTestOverlay.remove(), this.hitTestOverlay = null);
@@ -411,7 +411,7 @@ class D {
411
411
  const n = this.getComponentPath(e);
412
412
  if (!n) return;
413
413
  const o = document.createElement("div");
414
- Object.assign(o.style, { position: "fixed", zIndex: I.TOOLTIP, backgroundColor: "rgb(238, 248, 255)", color: "rgba(26, 88, 208, 1)", border: "1px solid rgba(86, 153, 255, 0.3)", padding: "4px", borderRadius: "5px", fontSize: "12px", fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", whiteSpace: "nowrap", pointerEvents: "none", boxShadow: "0 2px 8px rgba(0,0,0,0.3)", transition: "opacity 0.1s ease" }), o.textContent = n.map((l) => `<${l}>`).join(" "), o.className = "forge-annotation-component-tooltip", document.body.appendChild(o);
414
+ Object.assign(o.style, { position: "fixed", zIndex: A.TOOLTIP, backgroundColor: "rgb(238, 248, 255)", color: "rgba(26, 88, 208, 1)", border: "1px solid rgba(86, 153, 255, 0.3)", padding: "4px", borderRadius: "5px", fontSize: "12px", fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", whiteSpace: "nowrap", pointerEvents: "none", boxShadow: "0 2px 8px rgba(0,0,0,0.3)", transition: "opacity 0.1s ease" }), o.textContent = n.map((l) => `<${l}>`).join(" "), o.className = "forge-annotation-component-tooltip", document.body.appendChild(o);
415
415
  const i = o.getBoundingClientRect();
416
416
  let s = t.left + t.width / 2 - i.width / 2, a = t.top - i.height - 6;
417
417
  s < 4 && (s = 4), s + i.width > window.innerWidth - 4 && (s = window.innerWidth - i.width - 4), a < 4 && (a = t.bottom + 6), o.style.left = `${s}px`, o.style.top = `${a}px`, this.componentTooltip = o;
@@ -420,7 +420,7 @@ class D {
420
420
  this.componentTooltip && (this.componentTooltip.remove(), this.componentTooltip = null);
421
421
  }
422
422
  showDragRect(e, t, n, o) {
423
- this.dragRect || (this.dragRect = document.createElement("div"), Object.assign(this.dragRect.style, { position: "fixed", border: `1px dashed ${v.ANNOTATION_MULTI}`, backgroundColor: v.DRAG_RECT_BG, pointerEvents: "none", zIndex: I.HOVER_OVERLAY, borderRadius: "4px" }), this.dragRect.className = "forge-annotation-drag-rect", document.body.appendChild(this.dragRect)), Object.assign(this.dragRect.style, { left: `${Math.min(e, n)}px`, top: `${Math.min(t, o)}px`, width: `${Math.abs(n - e)}px`, height: `${Math.abs(o - t)}px` });
423
+ this.dragRect || (this.dragRect = document.createElement("div"), Object.assign(this.dragRect.style, { position: "fixed", border: `1px dashed ${v.ANNOTATION_MULTI}`, backgroundColor: v.DRAG_RECT_BG, pointerEvents: "none", zIndex: A.HOVER_OVERLAY, borderRadius: "4px" }), this.dragRect.className = "forge-annotation-drag-rect", document.body.appendChild(this.dragRect)), Object.assign(this.dragRect.style, { left: `${Math.min(e, n)}px`, top: `${Math.min(t, o)}px`, width: `${Math.abs(n - e)}px`, height: `${Math.abs(o - t)}px` });
424
424
  }
425
425
  removeDragRect() {
426
426
  this.dragRect && (this.dragRect.remove(), this.dragRect = null), this.clearDragHighlights();
@@ -437,12 +437,12 @@ class D {
437
437
  this.dragHighlights = [];
438
438
  }
439
439
  createDot(e, t, n, o, i, s = []) {
440
- const a = this.getAnchorRect(s), l = e - 2, h = t - M - 2, d = a && a.width > 0 && a.height > 0 ? { rx: (l - a.left) / a.width, ry: (h - a.top) / a.height } : { rx: 0, ry: 0 };
440
+ const a = this.getAnchorRect(s), l = e - 2, h = t - H - 2, d = a && a.width > 0 && a.height > 0 ? { rx: (l - a.left) / a.width, ry: (h - a.top) / a.height } : { rx: 0, ry: 0 };
441
441
  this.createDotAtPosition(l, h, n, o, i, s, d);
442
442
  }
443
443
  createDotAtPosition(e, t, n, o, i, s, a) {
444
444
  const l = document.createElement("div");
445
- Object.assign(l.style, { position: "fixed", left: `${e}px`, top: `${t}px`, minWidth: `${B}px`, height: `${M}px`, borderRadius: "50% 50% 50% 0", backgroundColor: "#FFFFFF", border: "1px solid #1A58D0", cursor: "pointer", zIndex: I.ANNOTATION_DOT, transition: "transform 0.15s ease", display: this.markersVisible ? "flex" : "none", alignItems: "center", justifyContent: "center", padding: "0 4px", fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", fontSize: "11px", fontWeight: "700", color: "#1A58D0", lineHeight: "1", userSelect: "none", boxShadow: "0px 1px 3px -1px rgba(9, 18, 42, 0.06), 0px 1px 3px -3px rgba(9, 18, 42, 0.1)" }), l.textContent = String(i), l.className = "forge-annotation-dot", l.dataset.annotationId = o, l.addEventListener("mouseenter", () => {
445
+ Object.assign(l.style, { position: "fixed", left: `${e}px`, top: `${t}px`, minWidth: `${G}px`, height: `${H}px`, borderRadius: "50% 50% 50% 0", backgroundColor: "#FFFFFF", border: "1px solid #1A58D0", cursor: "pointer", zIndex: A.ANNOTATION_DOT, transition: "transform 0.15s ease", display: this.markersVisible ? "flex" : "none", alignItems: "center", justifyContent: "center", padding: "0 4px", fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", fontSize: "11px", fontWeight: "700", color: "#1A58D0", lineHeight: "1", userSelect: "none", boxShadow: "0px 1px 3px -1px rgba(9, 18, 42, 0.06), 0px 1px 3px -3px rgba(9, 18, 42, 0.1)" }), l.textContent = String(i), l.className = "forge-annotation-dot", l.dataset.annotationId = o, l.addEventListener("mouseenter", () => {
446
446
  l.style.transform = "scale(1.05)", this.removeHoverOverlay();
447
447
  }), l.addEventListener("mouseleave", () => {
448
448
  l.style.transform = "scale(1)";
@@ -501,8 +501,8 @@ class D {
501
501
  if (!y || m.has(y) || g instanceof SVGElement && g.tagName.toLowerCase() !== "svg" || g.closest?.("svg") && g.tagName.toLowerCase() !== "svg") return;
502
502
  const f = this.findTopmostWithSameForgeId(g);
503
503
  if (m.has(f.getAttribute("data-forge-id") || "")) return;
504
- const R = f.getBoundingClientRect();
505
- R.right >= i && R.left <= a && R.bottom >= s && R.top <= l && (m.add(y), d.push(f));
504
+ const L = f.getBoundingClientRect();
505
+ L.right >= i && L.left <= a && L.bottom >= s && L.top <= l && (m.add(y), d.push(f));
506
506
  }), this.dragScopeParent) {
507
507
  const p = this.findForgeIdParent(this.dragScopeParent);
508
508
  if (p)
@@ -599,9 +599,9 @@ class D {
599
599
  createAnnotationFromElements(e, t, n, o, i) {
600
600
  const s = i || ae();
601
601
  this.hoverSuppressed = !0, this.removeHoverOverlay();
602
- const a = e.map((f) => this.elementToInfo(f)), l = a.map((f) => ({ xpath: T(f.xpath), forgeId: f.forgeId, forgeIdIndex: f.forgeIdIndex })), h = this.getAnchorRect(l), d = n - 2, m = o - M - 2, p = h && h.width > 0 && h.height > 0 ? { x: (d - h.left) / h.width, y: (m - h.top) / h.height } : { x: 0, y: 0 };
602
+ const a = e.map((f) => this.elementToInfo(f)), l = a.map((f) => ({ xpath: b(f.xpath), forgeId: f.forgeId, forgeIdIndex: f.forgeIdIndex })), h = this.getAnchorRect(l), d = n - 2, m = o - H - 2, p = h && h.width > 0 && h.height > 0 ? { x: (d - h.left) / h.width, y: (m - h.top) / h.height } : { x: 0, y: 0 };
603
603
  this.pendingAnnotations.set(s, { dotX: n, dotY: o, mode: t, locators: l }), this.clearDragHighlights(), this.highlightLocators(l, t === "multi");
604
- const g = a[0], y = { id: s, dotX: n, dotY: o, anchorOffset: p, mode: t, elements: a, xpaths: a.map((f) => T(f.xpath)), elementTag: g.elementTag, componentName: g.componentName, componentPath: g.componentPath, forgeId: g.forgeId, sourcePos: g.sourcePos };
604
+ const g = a[0], y = { id: s, dotX: n, dotY: o, anchorOffset: p, mode: t, elements: a, xpaths: a.map((f) => b(f.xpath)), elementTag: g.elementTag, componentName: g.componentName, componentPath: g.componentPath, forgeId: g.forgeId, sourcePos: g.sourcePos };
605
605
  c("annotation", "Annotation created (pending):", y), this.messenger.send({ type: "ANNOTATION_CREATED", annotation: y, origin: O });
606
606
  }
607
607
  handleDocumentLeave = () => {
@@ -629,7 +629,7 @@ class le {
629
629
  this.hitTestOverlay && (this.hitTestOverlay.removeEventListener("mousemove", this.handleMouseOver), this.hitTestOverlay.removeEventListener("mouseout", this.handleMouseOut), this.hitTestOverlay.removeEventListener("click", this.handleClick)), document.removeEventListener("scroll", this.handleScroll, !0), se(), this.hitTestOverlay = null;
630
630
  }
631
631
  clearHover() {
632
- this.hoveredElement = null, L();
632
+ this.hoveredElement = null, R();
633
633
  }
634
634
  findTopmostElementWithSameId(e) {
635
635
  const t = e.getAttribute("data-forge-id");
@@ -643,7 +643,7 @@ class le {
643
643
  return o;
644
644
  }
645
645
  handleSelectModeClick(e) {
646
- const t = T(H(e));
646
+ const t = b(M(e));
647
647
  c("client", "Element clicked, XPath:", t), this.messenger.send({ type: "XPATH_REPORT", xpath: t, origin: O }), this.messenger.send({ type: "SELECT_MODE_DISABLED", origin: O });
648
648
  }
649
649
  handleMouseOver = (e) => {
@@ -659,16 +659,16 @@ class le {
659
659
  };
660
660
  handleMouseOut = (e) => {
661
661
  if (!this.callbacks.getSelectMode() && !this.callbacks.getDesignMode()) return;
662
- e.target === this.hoveredElement && (this.hoveredElement = null, L());
662
+ e.target === this.hoveredElement && (this.hoveredElement = null, R());
663
663
  };
664
664
  handleClick = (e) => {
665
665
  if (!this.callbacks.getSelectMode() && !this.callbacks.getDesignMode()) return;
666
666
  e.preventDefault(), e.stopPropagation(), this.hitTestOverlay && (this.hitTestOverlay.style.pointerEvents = "none");
667
667
  const t = document.elementFromPoint(e.clientX, e.clientY);
668
- this.hitTestOverlay && (this.hitTestOverlay.style.pointerEvents = "auto"), t && t !== document.body && t !== document.documentElement && (this.callbacks.getSelectMode() && this.callbacks.onSelectClick(t), this.callbacks.getDesignMode() && (L(), this.hoveredElement = null, this.callbacks.onDesignClick(t)));
668
+ this.hitTestOverlay && (this.hitTestOverlay.style.pointerEvents = "auto"), t && t !== document.body && t !== document.documentElement && (this.callbacks.getSelectMode() && this.callbacks.onSelectClick(t), this.callbacks.getDesignMode() && (R(), this.hoveredElement = null, this.callbacks.onDesignClick(t)));
669
669
  };
670
670
  handleScroll = () => {
671
- (this.callbacks.getSelectMode() || this.callbacks.getDesignMode()) && (this.hoveredElement = null, L());
671
+ (this.callbacks.getSelectMode() || this.callbacks.getDesignMode()) && (this.hoveredElement = null, R());
672
672
  };
673
673
  }
674
674
  let w = null, _ = null, P = null;
@@ -681,12 +681,12 @@ async function ce() {
681
681
  const o = t.default;
682
682
  P = typeof o == "function" ? o : o.default;
683
683
  }
684
- function k(r) {
684
+ function F(r) {
685
685
  return typeof r == "boolean" ? { type: "JSXExpressionContainer", expression: { type: "BooleanLiteral", value: r, loc: null }, loc: null } : typeof r == "number" ? { type: "JSXExpressionContainer", expression: { type: "NumericLiteral", value: r, loc: null }, loc: null } : { type: "StringLiteral", value: String(r), loc: null };
686
686
  }
687
- function F(r, e, t) {
687
+ function $(r, e, t) {
688
688
  const n = r.node.attributes.find((o) => o.type === "JSXAttribute" && o.name.type === "JSXIdentifier" && o.name.name === e);
689
- return n && n.type === "JSXAttribute" ? (n.value = k(t), !0) : (r.node.attributes.push({ type: "JSXAttribute", name: { type: "JSXIdentifier", name: e }, value: k(t), loc: null }), !0);
689
+ return n && n.type === "JSXAttribute" ? (n.value = F(t), !0) : (r.node.attributes.push({ type: "JSXAttribute", name: { type: "JSXIdentifier", name: e }, value: F(t), loc: null }), !0);
690
690
  }
691
691
  async function he(r, e, t, n, o) {
692
692
  try {
@@ -701,12 +701,12 @@ async function he(r, e, t, n, o) {
701
701
  const d = `${h.start.line}:${h.start.column}`;
702
702
  a.set(d, l);
703
703
  const m = l.node.attributes.find((p) => p.type === "JSXAttribute" && p.name.type === "JSXIdentifier" && p.name.name === "data-forge-id" && p.value?.type === "StringLiteral");
704
- m && m.type === "JSXAttribute" && m.value.value === e && (s = F(l, t, n));
704
+ m && m.type === "JSXAttribute" && m.value.value === e && (s = $(l, t, n));
705
705
  } }), !s && o) {
706
706
  const l = o.split(":");
707
707
  if (l.length >= 5) {
708
708
  const h = `${l[l.length - 4]}:${l[l.length - 3]}`, d = a.get(h);
709
- d && (s = F(d, t, n));
709
+ d && (s = $(d, t, n));
710
710
  }
711
711
  }
712
712
  if (s)
@@ -757,7 +757,7 @@ class ge {
757
757
  }
758
758
  const n = this.selectController.findTopmostElementWithSameId(e), o = n.getAttribute("data-component"), i = n.getAttribute("data-source-pos"), s = o || n.tagName.toLowerCase();
759
759
  this.clearSelection(), this.selectedElement = n, this.applyHighlight(n);
760
- const a = n.textContent?.trim() || "", l = n.tagName.toLowerCase(), h = T(H(n)), d = this.componentRegistry.getEditableProps(s), m = this.extractPropValues(n, d);
760
+ const a = n.textContent?.trim() || "", l = n.tagName.toLowerCase(), h = b(M(n)), d = this.componentRegistry.getEditableProps(s), m = this.extractPropValues(n, d);
761
761
  c("client", "Element selected in design mode:", { forgeId: t, sourcePos: i, text: a, type: l, componentName: s, editableProps: d, propValues: m }), this.messenger.send({ type: "ELEMENT_SELECTED", forgeId: t, sourcePos: i || void 0, text: a, elementType: l, xpath: h, componentName: s, editableProps: d, propValues: m, origin: O });
762
762
  }
763
763
  updateText(e, t) {
@@ -818,6 +818,8 @@ class ge {
818
818
  class C {
819
819
  static instance = null;
820
820
  messenger;
821
+ readyIntervalId = null;
822
+ isConnectedToHost = !1;
821
823
  selectMode = !1;
822
824
  designMode = !1;
823
825
  hoverDisabled = !1;
@@ -827,7 +829,7 @@ class C {
827
829
  designController;
828
830
  onError;
829
831
  constructor(e) {
830
- this.onError = e?.onError, c("client", "ForgeClient initialized"), this.messenger = new G(), this.componentRegistry = new z(), this.selectController = new le(this.messenger, { getSelectMode: () => this.selectMode, getDesignMode: () => this.designMode, getHoverDisabled: () => this.hoverDisabled, getSelectedDesignElement: () => this.designController.getSelectedElement(), onSelectClick: (t) => this.handleSelectClick(t), onDesignClick: (t) => this.handleDesignClick(t) }), this.designController = new ge(this.messenger, this.componentRegistry, this.selectController), this.setupMessageListener(), this.sendReady(), this.setupForgeIdPropagation(), window.__forgeClient = this;
832
+ this.onError = e?.onError, c("client", "ForgeClient initialized"), this.messenger = new V(), this.componentRegistry = new z(), this.selectController = new le(this.messenger, { getSelectMode: () => this.selectMode, getDesignMode: () => this.designMode, getHoverDisabled: () => this.hoverDisabled, getSelectedDesignElement: () => this.designController.getSelectedElement(), onSelectClick: (t) => this.handleSelectClick(t), onDesignClick: (t) => this.handleDesignClick(t) }), this.designController = new ge(this.messenger, this.componentRegistry, this.selectController), this.setupMessageListener(), this.sendReady(), this.setupForgeIdPropagation(), window.__forgeClient = this;
831
833
  }
832
834
  static getInstance(e) {
833
835
  return C.instance || (C.instance = new C(e)), C.instance;
@@ -842,8 +844,8 @@ class C {
842
844
  c("client", "Setting up message listener..."), this.messenger.onMessage((e) => {
843
845
  if (W(e.data) || !e.data || typeof e.data != "object" || !("origin" in e.data)) return;
844
846
  const t = e.data;
845
- if (t.origin === V) {
846
- c("client", "Received message from host:", t);
847
+ if (t.origin === j) {
848
+ this.isConnectedToHost || (this.isConnectedToHost = !0, this.readyIntervalId !== null && (window.clearInterval(this.readyIntervalId), this.readyIntervalId = null, c("client", "Host connection detected, stopped CHILD_READY retries"))), c("client", "Received message from host:", t);
847
849
  try {
848
850
  switch (t.type) {
849
851
  case "ENABLE_SELECT_MODE":
@@ -918,8 +920,14 @@ class C {
918
920
  }
919
921
  sendReady() {
920
922
  c("client", "Scheduling CHILD_READY message..."), setTimeout(() => {
921
- c("client", "Sending CHILD_READY message to parent"), this.messenger.send({ type: "CHILD_READY", origin: O });
922
- }, j.CHILD_READY_DELAY);
923
+ this.isConnectedToHost || (c("client", "Sending CHILD_READY message to parent"), this.messenger.send({ type: "CHILD_READY", origin: O }), this.readyIntervalId === null && (this.readyIntervalId = window.setInterval(() => {
924
+ if (this.isConnectedToHost) {
925
+ this.readyIntervalId !== null && (window.clearInterval(this.readyIntervalId), this.readyIntervalId = null);
926
+ return;
927
+ }
928
+ c("client", "Retrying CHILD_READY message to parent"), this.messenger.send({ type: "CHILD_READY", origin: O });
929
+ }, k.CHILD_READY_RETRY_INTERVAL)));
930
+ }, k.CHILD_READY_DELAY);
923
931
  }
924
932
  setupForgeIdPropagation() {
925
933
  const e = () => {
@@ -951,5 +959,5 @@ class C {
951
959
  C.getInstance();
952
960
  export {
953
961
  C as ForgeClient,
954
- G as ParentMessenger
962
+ V as ParentMessenger
955
963
  };
package/dist/{constants-BXKWBfHg.js → constants-DqGvo09s.js} RENAMED
@@ -5,7 +5,7 @@ function o(n) {
5
5
  }
6
6
  return !1;
7
7
  }
8
- class a {
8
+ class E {
9
9
  targetWindow;
10
10
  targetOrigin;
11
11
  constructor(e, s = "*") {
@@ -23,7 +23,7 @@ class a {
23
23
  };
24
24
  }
25
25
  }
26
- class r {
26
+ class a {
27
27
  send(e, s) {
28
28
  window.parent && window.parent !== window && window.parent.postMessage(e, s || "*");
29
29
  }
@@ -36,20 +36,20 @@ class r {
36
36
  };
37
37
  }
38
38
  }
39
- const E = "host", O = "sandbox", T = { HIT_TEST_OVERLAY: "9998", HOVER_OVERLAY: "9999", ANNOTATION_DOT: "10000", TOOLTIP: "10001" }, _ = { SELECT_OVERLAY_BORDER: "#1A58D0", SELECT_OVERLAY_BG: "#45ADFF17", DESIGN_SELECTION_OUTLINE: "#9333ea", ANNOTATION_SINGLE: "#1A58D0", ANNOTATION_MULTI: "#1A58D0", ANNOTATION_SINGLE_BG: "#45ADFF17", ANNOTATION_MULTI_BG: "#45ADFF17", DRAG_RECT_BG: "#45ADFF17" }, i = 20, A = 20, N = { CHILD_READY_DELAY: 1e3, CONNECTION_TIMEOUT: 5e3 }, c = ["#root", "#app", "#__next", "[data-reactroot]"], I = 200, d = 30, w = 6;
39
+ const r = "host", T = "sandbox", O = { HIT_TEST_OVERLAY: "9998", HOVER_OVERLAY: "9999", ANNOTATION_DOT: "10000", TOOLTIP: "10001" }, _ = { SELECT_OVERLAY_BORDER: "#1A58D0", SELECT_OVERLAY_BG: "#45ADFF17", DESIGN_SELECTION_OUTLINE: "#9333ea", ANNOTATION_SINGLE: "#1A58D0", ANNOTATION_MULTI: "#1A58D0", ANNOTATION_SINGLE_BG: "#45ADFF17", ANNOTATION_MULTI_BG: "#45ADFF17", DRAG_RECT_BG: "#45ADFF17" }, A = 20, N = 20, i = { CHILD_READY_DELAY: 1e3, CHILD_READY_RETRY_INTERVAL: 3e3, CONNECTION_TIMEOUT: 5e3 }, I = ["#root", "#app", "#__next", "[data-reactroot]"], c = 200, d = 30, L = 6;
40
40
  export {
41
- i as B,
41
+ A as B,
42
42
  _ as C,
43
- O as M,
44
- r as P,
45
- c as R,
46
- N as T,
47
- a as W,
48
- T as Z,
49
- E as a,
50
- w as b,
43
+ T as M,
44
+ a as P,
45
+ I as R,
46
+ i as T,
47
+ E as W,
48
+ O as Z,
49
+ r as a,
50
+ L as b,
51
51
  d as c,
52
- I as d,
53
- A as e,
52
+ c as d,
53
+ N as e,
54
54
  o as i
55
55
  };
package/dist/host.js CHANGED
@@ -1,4 +1,4 @@
1
- import { T as c, W as h, a as i, i as d, M as E } from "./constants-BXKWBfHg.js";
1
+ import { T as c, W as h, a as i, i as d, M as E } from "./constants-DqGvo09s.js";
2
2
  import { d as n } from "./debug-CLzmqn3R.js";
3
3
  class u {
4
4
  iframe;
package/dist/index.js CHANGED
@@ -2,7 +2,7 @@ import { ForgeHost as r } from "./host.js";
2
2
  import { ForgeClient as t } from "./client.js";
3
3
  import { a as S, u as m } from "./useDesignMode-VIipNUSj.js";
4
4
  import { e as p } from "./debug-CLzmqn3R.js";
5
- import { a as E, M as g } from "./constants-BXKWBfHg.js";
5
+ import { a as E, M as g } from "./constants-DqGvo09s.js";
6
6
  export {
7
7
  t as ForgeClient,
8
8
  r as ForgeHost,
package/dist/shared/constants.d.ts CHANGED
@@ -18,6 +18,7 @@ export declare const BADGE_HEIGHT = 20;
18
18
  export declare const BADGE_MIN_WIDTH = 20;
19
19
  export declare const TIMEOUTS: {
20
20
  readonly CHILD_READY_DELAY: 1000;
21
+ readonly CHILD_READY_RETRY_INTERVAL: 3000;
21
22
  readonly CONNECTION_TIMEOUT: 5000;
22
23
  };
23
24
  export declare const REACT_ROOT_SELECTORS: string[];
package/dist/shared/constants.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/shared/constants.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,OAAO;;;;;CAKV,CAAA;AAGV,eAAO,MAAM,MAAM;;;;;;;;;CAST,CAAA;AAGV,eAAO,MAAM,YAAY,KAAK,CAAA;AAC9B,eAAO,MAAM,eAAe,KAAK,CAAA;AAGjC,eAAO,MAAM,QAAQ;;;CAGX,CAAA;AAGV,eAAO,MAAM,oBAAoB,UAAmD,CAAA;AAGpF,eAAO,MAAM,iBAAiB,MAAM,CAAA;AACpC,eAAO,MAAM,mBAAmB,KAAK,CAAA;AACrC,eAAO,MAAM,cAAc,IAAI,CAAA"}
1
+ {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/shared/constants.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,OAAO;;;;;CAKV,CAAA;AAGV,eAAO,MAAM,MAAM;;;;;;;;;CAST,CAAA;AAGV,eAAO,MAAM,YAAY,KAAK,CAAA;AAC9B,eAAO,MAAM,eAAe,KAAK,CAAA;AAGjC,eAAO,MAAM,QAAQ;;;;CAIX,CAAA;AAGV,eAAO,MAAM,oBAAoB,UAAmD,CAAA;AAGpF,eAAO,MAAM,iBAAiB,MAAM,CAAA;AACpC,eAAO,MAAM,mBAAmB,KAAK,CAAA;AACrC,eAAO,MAAM,cAAc,IAAI,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@supernovaio/prototyping-tooling",
3
- "version": "0.9.6",
3
+ "version": "0.9.7-alpha.0",
4
4
  "description": "Prototyping Tooling — iframe communication bridge for design-to-code workflows",
5
5
  "type": "module",
6
6
  "license": "MIT",