@amplifyup/sdk 0.1.11 → 0.1.13

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.
package/dist/index.d.mts CHANGED
@@ -38,6 +38,15 @@ declare class AmplifyUpSDK {
38
38
  private messageListener;
39
39
  private mutationObserver;
40
40
  private composerDragHandlers;
41
+ /** Last slot highlighted during Composer drag — avoid clear/re-add flicker. */
42
+ private lastComposerDragSlot;
43
+ /** Consecutive miss frames before clearing highlight (anti-jitter). */
44
+ private composerDragMissFrames;
45
+ /**
46
+ * Parent overlay is driving drag via postMessage. Native iframe dragleave must
47
+ * not clear highlight — overlay takeover fires a spurious document dragleave.
48
+ */
49
+ private composerOverlayDragActive;
41
50
  private isVisualEditorMode;
42
51
  private eventSelectionMode;
43
52
  private eventSelectionClickHandler;
@@ -216,6 +225,22 @@ declare class AmplifyUpSDK {
216
225
  * Generate a CSS selector for an element
217
226
  */
218
227
  private generateSelectorForElement;
228
+ /** Clear drag-over highlight state (Composer overlay path or native drag end). */
229
+ private clearComposerDragHighlight;
230
+ /** Re-apply drag-over class only if missing (avoids classList churn / flicker). */
231
+ private ensureDragOverClass;
232
+ /**
233
+ * Composer drag targets the innermost (most specific) slot under the cursor.
234
+ * e.g. FullWidthGrid's main wins over a page-level main that wraps it.
235
+ */
236
+ private resolveSlotAtPoint;
237
+ /** Parent layout node that owns this slot (null for page-level code main). */
238
+ private parentComponentForSlot;
239
+ private pointInRect;
240
+ private setComposerDragHighlight;
241
+ private handleComposerDragAtPoint;
242
+ private postDropOnSlot;
243
+ private handleComposerDropAtPoint;
219
244
  /**
220
245
  * Enable component highlighting
221
246
  */
package/dist/index.d.ts CHANGED
@@ -38,6 +38,15 @@ declare class AmplifyUpSDK {
38
38
  private messageListener;
39
39
  private mutationObserver;
40
40
  private composerDragHandlers;
41
+ /** Last slot highlighted during Composer drag — avoid clear/re-add flicker. */
42
+ private lastComposerDragSlot;
43
+ /** Consecutive miss frames before clearing highlight (anti-jitter). */
44
+ private composerDragMissFrames;
45
+ /**
46
+ * Parent overlay is driving drag via postMessage. Native iframe dragleave must
47
+ * not clear highlight — overlay takeover fires a spurious document dragleave.
48
+ */
49
+ private composerOverlayDragActive;
41
50
  private isVisualEditorMode;
42
51
  private eventSelectionMode;
43
52
  private eventSelectionClickHandler;
@@ -216,6 +225,22 @@ declare class AmplifyUpSDK {
216
225
  * Generate a CSS selector for an element
217
226
  */
218
227
  private generateSelectorForElement;
228
+ /** Clear drag-over highlight state (Composer overlay path or native drag end). */
229
+ private clearComposerDragHighlight;
230
+ /** Re-apply drag-over class only if missing (avoids classList churn / flicker). */
231
+ private ensureDragOverClass;
232
+ /**
233
+ * Composer drag targets the innermost (most specific) slot under the cursor.
234
+ * e.g. FullWidthGrid's main wins over a page-level main that wraps it.
235
+ */
236
+ private resolveSlotAtPoint;
237
+ /** Parent layout node that owns this slot (null for page-level code main). */
238
+ private parentComponentForSlot;
239
+ private pointInRect;
240
+ private setComposerDragHighlight;
241
+ private handleComposerDragAtPoint;
242
+ private postDropOnSlot;
243
+ private handleComposerDropAtPoint;
219
244
  /**
220
245
  * Enable component highlighting
221
246
  */
package/dist/index.js CHANGED
@@ -344,6 +344,15 @@ var AmplifyUpSDK = class {
344
344
  this.messageListener = null;
345
345
  this.mutationObserver = null;
346
346
  this.composerDragHandlers = null;
347
+ /** Last slot highlighted during Composer drag — avoid clear/re-add flicker. */
348
+ this.lastComposerDragSlot = null;
349
+ /** Consecutive miss frames before clearing highlight (anti-jitter). */
350
+ this.composerDragMissFrames = 0;
351
+ /**
352
+ * Parent overlay is driving drag via postMessage. Native iframe dragleave must
353
+ * not clear highlight — overlay takeover fires a spurious document dragleave.
354
+ */
355
+ this.composerOverlayDragActive = false;
347
356
  this.isVisualEditorMode = false;
348
357
  this.eventSelectionMode = false;
349
358
  this.eventSelectionClickHandler = null;
@@ -874,6 +883,12 @@ Available Console Commands:
874
883
  }
875
884
  throw new Error(`Failed to fetch page: ${response.statusText}`);
876
885
  }
886
+ const contentType = response.headers.get("content-type") || "";
887
+ if (!contentType.includes("application/json")) {
888
+ throw new Error(
889
+ `Layout provider returned non-JSON (${contentType || "unknown"}). Check Composer preview routing.`
890
+ );
891
+ }
877
892
  const data = await response.json();
878
893
  const pageConfig = data.page;
879
894
  if (pageConfig?.eventTracking) {
@@ -1158,33 +1173,94 @@ Available Console Commands:
1158
1173
  }
1159
1174
  return;
1160
1175
  }
1176
+ if (event.data?.type === "COMPOSER_DRAG_START") {
1177
+ this.composerOverlayDragActive = true;
1178
+ if (typeof document !== "undefined") {
1179
+ document.body.classList.add("amplifyup-composer-dragging");
1180
+ }
1181
+ return;
1182
+ }
1183
+ if (event.data?.type === "COMPOSER_DRAG_AT_POINT") {
1184
+ const { x, y } = event.data;
1185
+ if (typeof x === "number" && typeof y === "number") {
1186
+ this.handleComposerDragAtPoint(x, y);
1187
+ }
1188
+ return;
1189
+ }
1190
+ if (event.data?.type === "COMPOSER_DROP_AT_POINT") {
1191
+ const { x, y } = event.data;
1192
+ if (typeof x === "number" && typeof y === "number") {
1193
+ this.handleComposerDropAtPoint(x, y);
1194
+ }
1195
+ return;
1196
+ }
1197
+ if (event.data?.type === "COMPOSER_DRAG_END") {
1198
+ this.composerOverlayDragActive = false;
1199
+ this.clearComposerDragHighlight();
1200
+ return;
1201
+ }
1161
1202
  if (event.data?.type === "GET_ELEMENT_POSITION") {
1162
- const { componentId, slotName } = event.data;
1163
- const selector = slotName ? `[data-amplifyup-slot="${slotName}"], [data-slot-id="${slotName}"]` : `[data-amplifyup-component="${componentId}"], [data-component-id="${componentId}"]`;
1164
- console.log("[AmplifyUp SDK] Finding element position:", { selector, componentId, slotName });
1165
- const element = document.querySelector(selector);
1203
+ const { componentId, slotName, nodeId, isPageSlot } = event.data;
1204
+ let element = null;
1205
+ if (isPageSlot || slotName === "main" && !nodeId && !componentId) {
1206
+ element = document.querySelector(
1207
+ '[data-slot-source="page"]'
1208
+ );
1209
+ }
1210
+ if (!element && nodeId && slotName) {
1211
+ element = document.querySelector(
1212
+ `[data-parent-node-id="${nodeId}"][data-slot-id="${slotName}"], [data-parent-node-id="${nodeId}"][data-amplifyup-slot="${slotName}"]`
1213
+ );
1214
+ }
1215
+ if (!element && nodeId && !slotName) {
1216
+ element = document.querySelector(
1217
+ `[data-node-id="${nodeId}"]`
1218
+ );
1219
+ }
1220
+ if (!element && slotName) {
1221
+ element = document.querySelector(
1222
+ `[data-amplifyup-slot="${slotName}"], [data-slot-id="${slotName}"]`
1223
+ );
1224
+ }
1225
+ if (!element && componentId) {
1226
+ element = document.querySelector(
1227
+ `[data-amplifyup-component="${componentId}"], [data-component-id="${componentId}"]`
1228
+ );
1229
+ }
1230
+ console.log("[AmplifyUp SDK] Finding element position:", {
1231
+ componentId,
1232
+ slotName,
1233
+ nodeId,
1234
+ isPageSlot,
1235
+ found: !!element
1236
+ });
1166
1237
  if (element) {
1167
1238
  const rect = element.getBoundingClientRect();
1168
1239
  const position = {
1169
1240
  x: rect.left + rect.width / 2,
1170
- // Center of element
1171
1241
  y: rect.top - 50,
1172
- // Position above element
1173
1242
  width: rect.width,
1174
1243
  height: rect.height
1175
1244
  };
1176
- console.log("[AmplifyUp SDK] Element position calculated:", { rect, position });
1245
+ const bounds = {
1246
+ top: rect.top,
1247
+ left: rect.left,
1248
+ width: rect.width,
1249
+ height: rect.height
1250
+ };
1177
1251
  if (window.parent && window.parent !== window) {
1178
1252
  window.parent.postMessage({
1179
1253
  type: "ELEMENT_POSITION",
1180
- componentId,
1181
- slotName,
1182
- position
1254
+ componentId: componentId || null,
1255
+ slotName: slotName || null,
1256
+ nodeId: nodeId || null,
1257
+ isPageSlot: !!isPageSlot,
1258
+ position,
1259
+ bounds
1183
1260
  }, "*");
1184
- console.log("[AmplifyUp SDK] Sent ELEMENT_POSITION message");
1185
1261
  }
1186
1262
  } else {
1187
- console.warn("[AmplifyUp SDK] Element not found for selector:", selector);
1263
+ console.warn("[AmplifyUp SDK] Element not found for position request");
1188
1264
  }
1189
1265
  return;
1190
1266
  }
@@ -1291,6 +1367,157 @@ Available Console Commands:
1291
1367
  }
1292
1368
  return el.tagName.toLowerCase();
1293
1369
  }
1370
+ /** Clear drag-over highlight state (Composer overlay path or native drag end). */
1371
+ clearComposerDragHighlight() {
1372
+ if (typeof document === "undefined") return;
1373
+ const slotSelector = "[data-slot-id], [data-amplifyup-slot]";
1374
+ document.querySelectorAll(`${slotSelector}.amplifyup-drag-over-slot`).forEach((el) => {
1375
+ el.classList.remove("amplifyup-drag-over-slot");
1376
+ });
1377
+ document.body.classList.remove("amplifyup-drag-no-drop");
1378
+ document.body.classList.remove("amplifyup-composer-dragging");
1379
+ this.lastComposerDragSlot = null;
1380
+ this.composerDragMissFrames = 0;
1381
+ }
1382
+ /** Re-apply drag-over class only if missing (avoids classList churn / flicker). */
1383
+ ensureDragOverClass(slot) {
1384
+ if (!slot.classList.contains("amplifyup-drag-over-slot")) {
1385
+ slot.classList.add("amplifyup-drag-over-slot");
1386
+ }
1387
+ if (document.body.classList.contains("amplifyup-drag-no-drop")) {
1388
+ document.body.classList.remove("amplifyup-drag-no-drop");
1389
+ }
1390
+ }
1391
+ /**
1392
+ * Composer drag targets the innermost (most specific) slot under the cursor.
1393
+ * e.g. FullWidthGrid's main wins over a page-level main that wraps it.
1394
+ */
1395
+ resolveSlotAtPoint(x, y) {
1396
+ if (typeof document === "undefined") return null;
1397
+ const slotSelector = "[data-slot-id], [data-amplifyup-slot]";
1398
+ const containing = [];
1399
+ document.querySelectorAll(slotSelector).forEach((node) => {
1400
+ const el = node;
1401
+ const r = el.getBoundingClientRect();
1402
+ if (x >= r.left && x <= r.right && y >= r.top && y <= r.bottom) {
1403
+ containing.push(el);
1404
+ }
1405
+ });
1406
+ if (containing.length === 0) return null;
1407
+ const innermost = containing.filter(
1408
+ (el) => !containing.some((other) => other !== el && el.contains(other))
1409
+ );
1410
+ if (innermost.length === 1) return innermost[0];
1411
+ let best = innermost[0];
1412
+ let bestArea = Infinity;
1413
+ for (const el of innermost) {
1414
+ const r = el.getBoundingClientRect();
1415
+ const area = Math.max(1, r.width) * Math.max(1, r.height);
1416
+ if (area < bestArea) {
1417
+ bestArea = area;
1418
+ best = el;
1419
+ }
1420
+ }
1421
+ return best;
1422
+ }
1423
+ /** Parent layout node that owns this slot (null for page-level code main). */
1424
+ parentComponentForSlot(slotEl) {
1425
+ let componentId = slotEl.getAttribute("data-parent-component-id");
1426
+ let nodeId = slotEl.getAttribute("data-parent-node-id");
1427
+ let el = slotEl.parentElement;
1428
+ while (el && (!nodeId || !componentId)) {
1429
+ if (!nodeId && el.hasAttribute("data-node-id")) {
1430
+ nodeId = el.getAttribute("data-node-id");
1431
+ }
1432
+ if (!componentId) {
1433
+ componentId = el.getAttribute("data-amplifyup-component") || el.getAttribute("data-component-id");
1434
+ }
1435
+ if (nodeId) break;
1436
+ el = el.parentElement;
1437
+ }
1438
+ return { componentId, nodeId };
1439
+ }
1440
+ pointInRect(x, y, el, pad = 8) {
1441
+ const r = el.getBoundingClientRect();
1442
+ return x >= r.left - pad && x <= r.right + pad && y >= r.top - pad && y <= r.bottom + pad;
1443
+ }
1444
+ setComposerDragHighlight(slot, x, y) {
1445
+ if (slot && slot === this.lastComposerDragSlot) {
1446
+ this.composerDragMissFrames = 0;
1447
+ this.ensureDragOverClass(slot);
1448
+ return;
1449
+ }
1450
+ if (slot && this.lastComposerDragSlot && this.lastComposerDragSlot.contains(slot) && slot !== this.lastComposerDragSlot) {
1451
+ this.composerDragMissFrames = 0;
1452
+ this.lastComposerDragSlot.classList.remove("amplifyup-drag-over-slot");
1453
+ this.lastComposerDragSlot = slot;
1454
+ this.ensureDragOverClass(slot);
1455
+ return;
1456
+ }
1457
+ if (this.lastComposerDragSlot && typeof x === "number" && typeof y === "number" && this.pointInRect(x, y, this.lastComposerDragSlot)) {
1458
+ if (!slot || slot.contains(this.lastComposerDragSlot) || slot === this.lastComposerDragSlot) {
1459
+ this.composerDragMissFrames = 0;
1460
+ this.ensureDragOverClass(this.lastComposerDragSlot);
1461
+ return;
1462
+ }
1463
+ }
1464
+ if (slot) {
1465
+ this.composerDragMissFrames = 0;
1466
+ if (this.lastComposerDragSlot && this.lastComposerDragSlot !== slot) {
1467
+ this.lastComposerDragSlot.classList.remove("amplifyup-drag-over-slot");
1468
+ }
1469
+ this.lastComposerDragSlot = slot;
1470
+ this.ensureDragOverClass(slot);
1471
+ return;
1472
+ }
1473
+ this.composerDragMissFrames += 1;
1474
+ if (this.lastComposerDragSlot && this.composerDragMissFrames < 8) {
1475
+ this.ensureDragOverClass(this.lastComposerDragSlot);
1476
+ return;
1477
+ }
1478
+ if (this.lastComposerDragSlot) {
1479
+ this.lastComposerDragSlot.classList.remove("amplifyup-drag-over-slot");
1480
+ this.lastComposerDragSlot = null;
1481
+ }
1482
+ if (!document.body.classList.contains("amplifyup-drag-no-drop")) {
1483
+ document.body.classList.add("amplifyup-drag-no-drop");
1484
+ }
1485
+ }
1486
+ handleComposerDragAtPoint(x, y) {
1487
+ this.composerOverlayDragActive = true;
1488
+ if (!document.body.classList.contains("amplifyup-composer-dragging")) {
1489
+ document.body.classList.add("amplifyup-composer-dragging");
1490
+ }
1491
+ this.setComposerDragHighlight(this.resolveSlotAtPoint(x, y), x, y);
1492
+ }
1493
+ postDropOnSlot(slotEl) {
1494
+ const win = window;
1495
+ if (!win.parent || win.parent === win) return;
1496
+ const slotName = slotEl.getAttribute("data-amplifyup-slot") || slotEl.getAttribute("data-slot-id");
1497
+ if (!slotName) return;
1498
+ const { componentId, nodeId } = this.parentComponentForSlot(slotEl);
1499
+ const isEmpty = slotEl.getAttribute("data-slot-empty") === "true";
1500
+ win.parent.postMessage(
1501
+ {
1502
+ type: "DROP_ON_SLOT",
1503
+ slotName,
1504
+ slotElement: {
1505
+ path: slotEl.getAttribute("data-slot-path"),
1506
+ isEmpty,
1507
+ parentComponentId: componentId,
1508
+ parentNodeId: nodeId
1509
+ }
1510
+ },
1511
+ "*"
1512
+ );
1513
+ }
1514
+ handleComposerDropAtPoint(x, y) {
1515
+ if (typeof document === "undefined") return;
1516
+ const htmlEl = this.resolveSlotAtPoint(x, y);
1517
+ this.clearComposerDragHighlight();
1518
+ if (!htmlEl) return;
1519
+ this.postDropOnSlot(htmlEl);
1520
+ }
1294
1521
  /**
1295
1522
  * Enable component highlighting
1296
1523
  */
@@ -1317,35 +1544,25 @@ Available Console Commands:
1317
1544
  this.teardownComposerDragDrop();
1318
1545
  const slotSelector = "[data-slot-id], [data-amplifyup-slot]";
1319
1546
  const clearDragOverState = () => {
1320
- document.querySelectorAll(`${slotSelector}.amplifyup-drag-over-slot`).forEach((el) => {
1321
- el.classList.remove("amplifyup-drag-over-slot");
1322
- });
1323
- document.body.classList.remove("amplifyup-drag-no-drop");
1547
+ this.clearComposerDragHighlight();
1324
1548
  };
1325
1549
  const dragenter = (e) => {
1326
1550
  e.preventDefault();
1327
- if (e.dataTransfer?.types?.length) {
1328
- document.body.classList.add("amplifyup-drag-no-drop");
1329
- }
1330
1551
  };
1331
1552
  const dragover = (e) => {
1332
1553
  e.preventDefault();
1333
- const target = e.target;
1334
- const slot = target?.closest?.(slotSelector);
1554
+ if (this.composerOverlayDragActive) {
1555
+ if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
1556
+ return;
1557
+ }
1558
+ const slot = this.resolveSlotAtPoint(e.clientX, e.clientY);
1335
1559
  if (e.dataTransfer) {
1336
1560
  e.dataTransfer.dropEffect = slot ? "copy" : "none";
1337
1561
  }
1338
- document.querySelectorAll(`${slotSelector}.amplifyup-drag-over-slot`).forEach((el) => {
1339
- el.classList.remove("amplifyup-drag-over-slot");
1340
- });
1341
- if (slot) {
1342
- slot.classList.add("amplifyup-drag-over-slot");
1343
- document.body.classList.remove("amplifyup-drag-no-drop");
1344
- } else {
1345
- document.body.classList.add("amplifyup-drag-no-drop");
1346
- }
1562
+ this.setComposerDragHighlight(slot, e.clientX, e.clientY);
1347
1563
  };
1348
1564
  const dragleave = (e) => {
1565
+ if (this.composerOverlayDragActive) return;
1349
1566
  const related = e.relatedTarget;
1350
1567
  if (!related || !document.body.contains(related)) {
1351
1568
  clearDragOverState();
@@ -1353,20 +1570,10 @@ Available Console Commands:
1353
1570
  };
1354
1571
  const drop = (e) => {
1355
1572
  e.preventDefault();
1356
- const target = e.target;
1357
- const slot = target?.closest?.(slotSelector);
1573
+ const slot = this.resolveSlotAtPoint(e.clientX, e.clientY);
1358
1574
  clearDragOverState();
1359
1575
  if (!slot || !this.isVisualEditorMode) return;
1360
- const slotName = slot.getAttribute("data-amplifyup-slot") || slot.getAttribute("data-slot-id");
1361
- const isEmpty = slot.getAttribute("data-slot-empty") === "true";
1362
- const win = window;
1363
- if (slotName && win.parent && win.parent !== win) {
1364
- win.parent.postMessage({
1365
- type: "DROP_ON_SLOT",
1366
- slotName,
1367
- slotElement: { path: slot.getAttribute("data-slot-path"), isEmpty }
1368
- }, "*");
1369
- }
1576
+ this.postDropOnSlot(slot);
1370
1577
  };
1371
1578
  const mouseover = (e) => {
1372
1579
  if (!this.showZonesEnabled) return;
@@ -1405,7 +1612,11 @@ Available Console Commands:
1405
1612
  document.removeEventListener("mouseover", h.mouseover, true);
1406
1613
  document.removeEventListener("mouseout", h.mouseout, true);
1407
1614
  this.composerDragHandlers = null;
1615
+ this.composerOverlayDragActive = false;
1616
+ this.lastComposerDragSlot = null;
1617
+ this.composerDragMissFrames = 0;
1408
1618
  document.body.classList.remove("amplifyup-drag-no-drop");
1619
+ document.body.classList.remove("amplifyup-composer-dragging");
1409
1620
  document.querySelectorAll("[data-slot-id].amplifyup-drag-over-slot, [data-amplifyup-slot].amplifyup-drag-over-slot").forEach((el) => {
1410
1621
  el.classList.remove("amplifyup-drag-over-slot");
1411
1622
  });
@@ -1446,21 +1657,32 @@ Available Console Commands:
1446
1657
  '[data-slot-id="main"], [data-amplifyup-slot="main"] {',
1447
1658
  " min-height: 50vh !important;",
1448
1659
  "}",
1449
- '[data-slot-id="main"][data-slot-empty="true"]::before,',
1450
- '[data-amplifyup-slot="main"][data-slot-empty="true"]::before {',
1451
- ' content: "Drop components here" !important;',
1452
- " position: absolute !important;",
1453
- " top: 50% !important; left: 50% !important;",
1454
- " transform: translate(-50%, -50%) !important;",
1455
- " font-size: 14px !important; font-weight: 500 !important;",
1456
- " color: rgba(34, 197, 94, 0.65) !important;",
1660
+ /* Single empty-state hint — Slot React label uses .amplifyup-slot-placeholder */
1661
+ ".amplifyup-slot-placeholder {",
1662
+ " display: flex !important;",
1663
+ " align-items: center !important;",
1664
+ " justify-content: center !important;",
1665
+ " min-height: inherit !important;",
1666
+ " color: rgba(34, 197, 94, 0.75) !important;",
1667
+ " font-size: 14px !important;",
1668
+ " font-weight: 500 !important;",
1457
1669
  " pointer-events: none !important;",
1458
- " white-space: nowrap !important;",
1670
+ " text-align: center !important;",
1459
1671
  "}",
1460
1672
  "[data-slot-id].amplifyup-slot-hover, [data-amplifyup-slot].amplifyup-slot-hover {",
1461
1673
  " outline-color: rgba(34, 197, 94, 1) !important;",
1462
1674
  " background: rgba(34, 197, 94, 0.06) !important;",
1463
1675
  "}",
1676
+ /* During any Composer drag, hide idle slot labels so they don't flash
1677
+ when the active drag-over class briefly changes */
1678
+ "body.amplifyup-composer-dragging .amplifyup-slot-placeholder {",
1679
+ " visibility: hidden !important;",
1680
+ " opacity: 0 !important;",
1681
+ "}",
1682
+ "body.amplifyup-composer-dragging [data-slot-id]::before,",
1683
+ "body.amplifyup-composer-dragging [data-amplifyup-slot]::before {",
1684
+ " content: none !important;",
1685
+ "}",
1464
1686
  "[data-slot-id].amplifyup-drag-over-slot, [data-amplifyup-slot].amplifyup-drag-over-slot {",
1465
1687
  " outline: 2px solid rgba(34, 197, 94, 1) !important;",
1466
1688
  " background: rgba(34, 197, 94, 0.18) !important;",
@@ -1476,7 +1698,7 @@ Available Console Commands:
1476
1698
  " color: rgb(22, 163, 74) !important;",
1477
1699
  " pointer-events: none !important;",
1478
1700
  " white-space: nowrap !important;",
1479
- " z-index: 1 !important;",
1701
+ " z-index: 2 !important;",
1480
1702
  "}",
1481
1703
  "body.amplifyup-drag-no-drop { cursor: no-drop !important; }",
1482
1704
  "body.amplifyup-drag-no-drop::before {",
@@ -1603,18 +1825,23 @@ Available Console Commands:
1603
1825
  sendSelectionMessage(element, hierarchy, isEmpty) {
1604
1826
  if (!this.isVisualEditorMode) return;
1605
1827
  const componentId = element.getAttribute("data-amplifyup-component") || element.getAttribute("data-component-id");
1606
- const slotName = element.getAttribute("data-amplifyup-slot") || element.getAttribute("data-slot-id");
1828
+ const slotName = componentId ? null : element.getAttribute("data-amplifyup-slot") || element.getAttribute("data-slot-id");
1607
1829
  const componentName = element.getAttribute("data-component-name");
1608
1830
  const hierarchyInfo = hierarchy.map((el, index) => {
1609
1831
  const elComponentId = el.getAttribute("data-amplifyup-component") || el.getAttribute("data-component-id");
1610
1832
  const elSlotName = el.getAttribute("data-amplifyup-slot") || el.getAttribute("data-slot-id");
1611
1833
  const elComponentName = el.getAttribute("data-component-name");
1834
+ const isSlot = !elComponentId && !!elSlotName;
1835
+ const isPageSlot = isSlot && el.getAttribute("data-slot-source") === "page";
1836
+ const nodeId = el.getAttribute("data-node-id") || (isSlot ? el.getAttribute("data-parent-node-id") : null);
1612
1837
  return {
1613
1838
  index,
1614
1839
  componentId: elComponentId,
1615
- componentName: elComponentName,
1616
- slotName: elSlotName,
1617
- isSlot: !!elSlotName
1840
+ componentName: isPageSlot ? "Page" : elComponentName,
1841
+ slotName: isSlot ? elSlotName : null,
1842
+ isSlot,
1843
+ isPageSlot,
1844
+ nodeId
1618
1845
  };
1619
1846
  });
1620
1847
  const rect = element.getBoundingClientRect ? element.getBoundingClientRect() : null;
@@ -1651,7 +1878,6 @@ Available Console Commands:
1651
1878
  return;
1652
1879
  }
1653
1880
  const doc = document;
1654
- const win = window;
1655
1881
  if (highlightComponents) {
1656
1882
  const componentElements = doc.querySelectorAll("[data-amplifyup-component], [data-component-id]");
1657
1883
  console.log("[AmplifyUp SDK] Found", componentElements.length, "components to highlight");
@@ -1712,52 +1938,8 @@ Available Console Commands:
1712
1938
  e.stopPropagation();
1713
1939
  this.sendSelectionMessage(htmlEl, hierarchy, isEmpty);
1714
1940
  };
1715
- const handleDrop = (e) => {
1716
- e.preventDefault();
1717
- e.stopPropagation();
1718
- htmlEl.classList.remove("amplifyup-drag-over-slot");
1719
- if (!win.parent || win.parent === win) return;
1720
- win.parent.postMessage({
1721
- type: "DROP_ON_SLOT",
1722
- slotName,
1723
- slotElement: { path: htmlEl.getAttribute("data-slot-path"), isEmpty }
1724
- }, "*");
1725
- try {
1726
- const data = JSON.parse(e.dataTransfer.getData("application/json"));
1727
- if (data.type === "component") {
1728
- win.parent.postMessage({
1729
- type: "COMPONENT_DROPPED",
1730
- componentId: data.componentId,
1731
- componentName: data.componentName,
1732
- slotName,
1733
- slotElement: { path: htmlEl.getAttribute("data-slot-path"), isEmpty }
1734
- }, "*");
1735
- }
1736
- } catch (_err) {
1737
- }
1738
- };
1739
- const handleDragOver = (e) => {
1740
- e.preventDefault();
1741
- e.stopPropagation();
1742
- e.dataTransfer.dropEffect = "copy";
1743
- htmlEl.classList.add("amplifyup-drag-over-slot");
1744
- };
1745
- const handleDragLeave = (e) => {
1746
- const related = e.relatedTarget;
1747
- if (!related || !htmlEl.contains(related)) {
1748
- htmlEl.classList.remove("amplifyup-drag-over-slot");
1749
- }
1750
- };
1751
1941
  htmlEl.addEventListener("click", handleClick);
1752
- htmlEl.addEventListener("dragover", handleDragOver);
1753
- htmlEl.addEventListener("dragleave", handleDragLeave);
1754
- htmlEl.addEventListener("drop", handleDrop);
1755
- htmlEl._amplifyupSlotHandlers = {
1756
- handleClick,
1757
- handleDragOver,
1758
- handleDragLeave,
1759
- handleDrop
1760
- };
1942
+ htmlEl._amplifyupSlotHandlers = { handleClick };
1761
1943
  });
1762
1944
  }
1763
1945
  }