@agent-native/core 0.125.0 → 0.126.0

package/corpus/templates/assets/app/components/generation/GenerationResults.tsx

@@ -89,6 +89,9 @@ export function GenerationResults({ threadId }: { threadId: string | null }) {
   const queryClient = useQueryClient();
   const [clearAllOpen, setClearAllOpen] = useState(false);
   const [previewSlotId, setPreviewSlotId] = useState<string | null>(null);
+  const trayScrollRef = useRef<HTMLDivElement | null>(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
   const stateKey = variantStateKey(threadId);
   const stateQueryKey = useMemo(() => ["app-state", stateKey], [stateKey]);
   const { data: variants } = useQuery({
@@ -129,6 +132,21 @@ export function GenerationResults({ threadId }: { threadId: string | null }) {
         ),
     [variants?.slots],
   );
+  // Variant numbers reflect generation order (oldest = 1), not display order:
+  // refined candidates render first but keep the next number in sequence
+  // instead of stealing "Variant 1" from the newest-first display sort above.
+  const variantNumberBySlotId = useMemo(() => {
+    const map = new Map<string, number>();
+    (variants?.slots ?? [])
+      .slice()
+      .sort(
+        (left, right) =>
+          slotTime(left) - slotTime(right) ||
+          left.slotId.localeCompare(right.slotId),
+      )
+      .forEach((slot, index) => map.set(slot.slotId, index + 1));
+    return map;
+  }, [variants?.slots]);
   const belongsToThread = Boolean(
     variants &&
     (threadId ? variants.threadId === threadId : !variants.threadId),
@@ -165,6 +183,25 @@ export function GenerationResults({ threadId }: { threadId: string | null }) {
     [previewSlotId, slots],
   );
 
+  const updateScrollEdges = () => {
+    const el = trayScrollRef.current;
+    if (!el) return;
+    setCanScrollLeft(el.scrollLeft > 1);
+    setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+  };
+
+  useEffect(() => {
+    // Re-measure after the slot list changes size (new/removed candidates)
+    // since that can flip whether either arrow should be enabled.
+    updateScrollEdges();
+  }, [slots.length]);
+
+  const scrollTrayBy = (direction: 1 | -1) => {
+    const el = trayScrollRef.current;
+    if (!el) return;
+    el.scrollBy({ left: direction * el.clientWidth * 0.9, behavior: "smooth" });
+  };
+
   if (!belongsToThread || !variants) return null;
   if (slots.length === 0) return null;
 
@@ -296,6 +333,7 @@ export function GenerationResults({ threadId }: { threadId: string | null }) {
       <GenerationPreviewDialog
         slot={previewSlot}
         slots={slots}
+        variantNumberBySlotId={variantNumberBySlotId}
         prompt={variants.prompt}
         libraryTitle={libraryTitle}
         isSaving={saveGenerated.isPending}
@@ -351,22 +389,50 @@ export function GenerationResults({ threadId }: { threadId: string | null }) {
             </Button>
           </div>
 
-          <div className="max-h-[min(640px,52vh)] overflow-y-auto p-3">
-            <div className="assets-library-grid grid grid-cols-2 gap-3 sm:grid-cols-3">
-              {slots.map((slot, index) => (
-                <GenerationDraftCard
-                  key={slot.slotId}
-                  slot={slot}
-                  variantNumber={index + 1}
-                  isSaving={saveGenerated.isPending}
-                  isDismissing={dismissSlot.isPending}
-                  onPreview={() => setPreviewSlotId(slot.slotId)}
-                  onSave={() => saveSlot(slot)}
-                  onRefine={() => refineSlot(slot, index + 1)}
-                  onDismiss={() => dismissSlotById(slot)}
-                />
-              ))}
+          <div className="relative">
+            <div
+              ref={trayScrollRef}
+              onScroll={updateScrollEdges}
+              className="assets-library-tray flex gap-3 overflow-x-auto scroll-smooth p-3"
+            >
+              {slots.map((slot) => {
+                const variantNumber =
+                  variantNumberBySlotId.get(slot.slotId) ?? 1;
+                return (
+                  <GenerationDraftCard
+                    key={slot.slotId}
+                    slot={slot}
+                    variantNumber={variantNumber}
+                    isSaving={saveGenerated.isPending}
+                    isDismissing={dismissSlot.isPending}
+                    onPreview={() => setPreviewSlotId(slot.slotId)}
+                    onSave={() => saveSlot(slot)}
+                    onRefine={() => refineSlot(slot, variantNumber)}
+                    onDismiss={() => dismissSlotById(slot)}
+                  />
+                );
+              })}
             </div>
+            {canScrollLeft ? (
+              <button
+                type="button"
+                aria-label={t("library.previousImage")}
+                onClick={() => scrollTrayBy(-1)}
+                className="absolute left-1 top-1/2 z-10 inline-flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full border border-border/80 bg-background/90 text-foreground shadow-sm transition hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                <IconChevronLeft className="h-4 w-4" />
+              </button>
+            ) : null}
+            {canScrollRight ? (
+              <button
+                type="button"
+                aria-label={t("library.nextImage")}
+                onClick={() => scrollTrayBy(1)}
+                className="absolute right-1 top-1/2 z-10 inline-flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full border border-border/80 bg-background/90 text-foreground shadow-sm transition hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                <IconChevronRight className="h-4 w-4" />
+              </button>
+            ) : null}
           </div>
         </div>
       </section>
@@ -399,7 +465,7 @@ function GenerationDraftCard({
     number: variantNumber,
   });
   return (
-    <div className="overflow-hidden rounded-lg border border-border/80 bg-background transition hover:border-foreground/25 hover:bg-muted/10">
+    <div className="w-36 shrink-0 overflow-hidden rounded-lg border border-border/80 bg-background transition hover:border-foreground/25 hover:bg-muted/10 sm:w-44">
       <div className="group relative">
         <button
           type="button"
@@ -510,6 +576,7 @@ function GenerationDraftCard({
 function GenerationPreviewDialog({
   slot,
   slots,
+  variantNumberBySlotId,
   prompt,
   libraryTitle,
   isSaving,
@@ -522,6 +589,7 @@ function GenerationPreviewDialog({
 }: {
   slot: VariantSlot | null;
   slots: VariantSlot[];
+  variantNumberBySlotId: Map<string, number>;
   prompt: string;
   libraryTitle: string | null;
   isSaving: boolean;
@@ -553,7 +621,7 @@ function GenerationPreviewDialog({
   const sources = slot ? assetPreviewSources(slot, "preview") : [];
   const src = sources[0];
   const variantNumber = slot
-    ? slots.findIndex((item) => item.slotId === slot.slotId) + 1
+    ? (variantNumberBySlotId.get(slot.slotId) ?? 0)
     : 0;
   const variantLabel = t("library.variantWithNumber", {
     number: variantNumber,

package/corpus/templates/clips/changelog/2026-07-27-share-notification-emails-now-include-a-clickable-recording-.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-07-27
+---
+
+Share notification emails now include a clickable recording thumbnail that opens the clip

package/corpus/templates/clips/server/db/index.ts

@@ -1,8 +1,12 @@
 import { createGetDb, getDbExec } from "@agent-native/core/db";
-import { getAppProductionUrl } from "@agent-native/core/server";
+import { organizations } from "@agent-native/core/org";
 import { registerShareableResource } from "@agent-native/core/sharing";
 import { eq } from "drizzle-orm";
 
+import {
+  absoluteUrl,
+  recordingShareHeroHtml,
+} from "../lib/share-email-hero.js";
 import * as schema from "./schema.js";
 
 export const getDb = createGetDb(schema);
@@ -22,9 +26,20 @@ async function orgBrandLogoUrl(
     .from(schema.organizationSettings)
     .where(eq(schema.organizationSettings.organizationId, organizationId))
     .limit(1);
-  const logo = row?.brandLogoUrl?.trim();
-  if (!logo) return undefined;
-  return logo.startsWith("/") ? `${getAppProductionUrl()}${logo}` : logo;
+  return absoluteUrl(row?.brandLogoUrl);
+}
+
+/** Show the sharing org's name beside the logo instead of the app name. */
+async function orgBrandName(
+  organizationId: string | undefined,
+): Promise<string | undefined> {
+  if (!organizationId) return undefined;
+  const [row] = await getDb()
+    .select({ name: organizations.name })
+    .from(organizations)
+    .where(eq(organizations.id, organizationId))
+    .limit(1);
+  return row?.name?.trim() || undefined;
 }
 
 registerShareableResource({
@@ -34,8 +49,15 @@ registerShareableResource({
   displayName: "Recording",
   titleColumn: "title",
   getResourcePath: (recording) => `/r/${recording.id}`,
-  getShareEmailLogoUrl: (recording) =>
-    orgBrandLogoUrl(recording.organizationId),
+  getLogoUrl: (recording) => orgBrandLogoUrl(recording.organizationId),
+  getBrandName: (recording) => orgBrandName(recording.organizationId),
+  // Replies reach the person who shared the clip; the sending address stays
+  // the verified one so SPF/DKIM still pass.
+  getSender: (_recording, ctx) => ({
+    fromName: `${ctx.sender.name} via Clips`,
+    replyTo: ctx.sender.email,
+  }),
+  getHeroHtml: (recording, ctx) => recordingShareHeroHtml(recording, ctx),
   getDb,
   ownerAccessIgnoresOrg: true,
 });

package/corpus/templates/clips/server/lib/share-email-hero.ts

@@ -0,0 +1,105 @@
+import {
+  getAppProductionUrl,
+  withConfiguredAppBasePath,
+} from "@agent-native/core/server";
+
+/**
+ * Origin plus the configured mount path. Deployments served under
+ * APP_BASE_PATH (e.g. `/clips`) would otherwise link email assets at the
+ * gateway root, where nothing is served.
+ */
+function appBaseUrl(): string {
+  return withConfiguredAppBasePath(getAppProductionUrl());
+}
+
+/** Make a stored URL absolute for use in emails (relative paths won't load). */
+export function absoluteUrl(
+  url: string | null | undefined,
+): string | undefined {
+  const trimmed = url?.trim();
+  if (!trimmed) return undefined;
+  return trimmed.startsWith("/") ? `${appBaseUrl()}${trimmed}` : trimmed;
+}
+
+function escapeAttr(s: string): string {
+  return s
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+/**
+ * Percent-encode characters that could terminate a CSS `url('…')`. A style
+ * attribute is HTML-decoded before it is parsed as CSS, so HTML escaping alone
+ * does not protect the CSS context — an escaped quote decodes back to a real
+ * one and lets the value break out into further declarations.
+ */
+function escapeCssUrl(url: string): string {
+  return url.replace(
+    /['"()\\\s]/g,
+    (c) => `%${c.charCodeAt(0).toString(16).toUpperCase().padStart(2, "0")}`,
+  );
+}
+
+function isHttpUrl(value: string): boolean {
+  try {
+    const { protocol } = new URL(value);
+    return protocol === "https:" || protocol === "http:";
+  } catch {
+    return false;
+  }
+}
+
+export type ShareHeroRecording = {
+  thumbnailUrl?: string | null;
+  animatedThumbnailUrl?: string | null;
+};
+
+/**
+ * Build the share-email preview for a recording: a 16:9 thumbnail with a
+ * centered play badge, linking to the clip. Uses the background-image + VML
+ * technique so the badge stays centered across clients, including Outlook. The
+ * play badge is served from Clips' own public assets.
+ */
+export function recordingShareHeroHtml(
+  recording: ShareHeroRecording,
+  ctx: { href: string; alt?: string },
+): string | undefined {
+  // GIF-only recordings leave `thumbnailUrl` empty, so fall back to the
+  // animated thumbnail rather than dropping the preview entirely.
+  const thumb = absoluteUrl(
+    recording.thumbnailUrl || recording.animatedThumbnailUrl,
+  );
+  if (!thumb || !isHttpUrl(thumb)) return undefined;
+  const url = escapeAttr(thumb);
+  const cssUrl = escapeAttr(escapeCssUrl(thumb));
+  const href = escapeAttr(ctx.href);
+  const title = escapeAttr(ctx.alt ?? "Play video");
+  const badge = escapeAttr(`${appBaseUrl()}/play-badge.png`);
+  const W = 488;
+  const H = 275;
+  return `
+      <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="margin:24px 0 0 0;">
+        <tr>
+          <td>
+            <a href="${href}" style="display:block; text-decoration:none;" title="${title}">
+              <!--[if mso]>
+              <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:${W}px;height:${H}px;" src="${url}" />
+              <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="false" stroke="false" style="position:absolute;width:${W}px;height:${H}px;">
+              <v:textbox inset="0,0,0,0"><center>
+              <![endif]-->
+              <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="${W}" height="${H}" background="${url}" style="width:100%; max-width:${W}px; height:${H}px; background-image:url('${cssUrl}'); background-size:cover; background-position:center; background-color:#141417; border-radius:12px;">
+                <tr>
+                  <td align="center" valign="middle" height="${H}" style="height:${H}px;">
+                    <img src="${badge}" alt="Play video" width="64" height="64" style="width:64px; height:64px; border:0; display:inline-block;" />
+                  </td>
+                </tr>
+              </table>
+              <!--[if mso]></center></v:textbox></v:rect><![endif]-->
+            </a>
+          </td>
+        </tr>
+      </table>`;
+}

package/corpus/templates/design/.generated/bridge/editor-chrome.generated.ts

@@ -23,6 +23,13 @@ export const editorChromeBridgeScript: string = `"use strict";
         return false;
       }
     })();
+    var selectedLayerDragPriorityEnabled = (function() {
+      try {
+        return !!__SELECTED_LAYER_DRAG_PRIORITY__;
+      } catch (_e) {
+        return false;
+      }
+    })();
     var scaleToolEnabled = false;
     function dndLog(phase, data) {
       if (!window.__DND_DEBUG) return;
@@ -1596,6 +1603,7 @@ export const editorChromeBridgeScript: string = `"use strict";
       clearComponentTag();
     }
     var selectedEl = null;
+    var selectionChromeHidden = false;
     var hoveredEl = null;
     var highlightOverlayStyle = "default";
     var activeNodeHtmlPreview = null;
@@ -2773,7 +2781,11 @@ export const editorChromeBridgeScript: string = `"use strict";
           hideSelectionOverlay();
         }
       } else if (selectedEl) {
-        positionOverlay(selectionOverlay, selectedEl);
+        if (selectionChromeHidden) {
+          hideSelectionOverlay();
+        } else {
+          positionOverlay(selectionOverlay, selectedEl);
+        }
       } else {
         hideParentAutoLayoutOverlay();
       }
@@ -3507,29 +3519,27 @@ export const editorChromeBridgeScript: string = `"use strict";
       document.addEventListener(events.move, onMove, true);
       document.addEventListener(events.up, onUp, true);
     }
-    function openContextMenuAtEvent(e) {
-      stopNativeInteraction(e);
-      blurActiveTextEditor();
+    function collectLayerHitCandidates(clientX, clientY) {
       var shieldPointerEvents = shieldOverlay.style.pointerEvents;
       var selectionPointerEvents = selectionOverlay.style.pointerEvents;
       var highlightPointerEvents = highlightOverlay.style.pointerEvents;
       shieldOverlay.style.pointerEvents = "none";
       selectionOverlay.style.pointerEvents = "none";
       highlightOverlay.style.pointerEvents = "none";
-      var pointTargets = document.elementsFromPoint ? document.elementsFromPoint(e.clientX, e.clientY) : [document.elementFromPoint(e.clientX, e.clientY)];
+      var pointTargets = document.elementsFromPoint ? document.elementsFromPoint(clientX, clientY) : [document.elementFromPoint(clientX, clientY)];
       shieldOverlay.style.pointerEvents = shieldPointerEvents;
       selectionOverlay.style.pointerEvents = selectionPointerEvents;
       highlightOverlay.style.pointerEvents = highlightPointerEvents;
-      var candidateElements = [];
+      var elements = [];
       var layerCandidates = [];
       pointTargets.forEach(function(pointTarget) {
         if (!pointTarget || pointTarget.nodeType !== 1) return;
         if (isOverlayElement(pointTarget)) return;
         var candidate = selectionTargetForHit(pointTarget);
-        if (!candidate || isDocumentRootElement(candidate) || isOverlayElement(candidate) || isLayerInteractionBlocked(candidate) || isTemplateCloneElement(candidate) || candidateElements.indexOf(candidate) !== -1) {
+        if (!candidate || isDocumentRootElement(candidate) || isOverlayElement(candidate) || isLayerInteractionBlocked(candidate) || isTemplateCloneElement(candidate) || elements.indexOf(candidate) !== -1) {
           return;
         }
-        candidateElements.push(candidate);
+        elements.push(candidate);
         var candidateInfo = getElementInfo(candidate);
         var explicitLabel = candidate.getAttribute && candidate.getAttribute("data-agent-native-layer-name") || "";
         var textLabel = (candidate.textContent || "").trim().replace(/\\s+/g, " ");
@@ -3541,6 +3551,30 @@ export const editorChromeBridgeScript: string = `"use strict";
           info: candidateInfo
         });
       });
+      return { elements, layerCandidates };
+    }
+    function stackCycleTarget(clientX, clientY, currentEl) {
+      if (!currentEl) return null;
+      var stack = collectLayerHitCandidates(clientX, clientY);
+      var currentIdx = stack.elements.indexOf(currentEl);
+      if (currentIdx === -1) return null;
+      var keys = stack.layerCandidates.map(function(candidate) {
+        return candidate.key;
+      });
+      var nextKey = nextStackCandidate(
+        keys,
+        stack.layerCandidates[currentIdx].key
+      );
+      if (nextKey === null) return null;
+      var nextEl = stack.elements[keys.indexOf(nextKey)];
+      return nextEl && !isLayerInteractionBlocked(nextEl) ? nextEl : null;
+    }
+    function openContextMenuAtEvent(e) {
+      stopNativeInteraction(e);
+      blurActiveTextEditor();
+      var collected = collectLayerHitCandidates(e.clientX, e.clientY);
+      var candidateElements = collected.elements;
+      var layerCandidates = collected.layerCandidates;
       var target = candidateElements[0] || null;
       var info = null;
       if (target) {
@@ -6238,7 +6272,8 @@ export const editorChromeBridgeScript: string = `"use strict";
             height: dragElStartHeight
           },
           snapCandidateRects,
-          SNAP_THRESHOLD_PX
+          // Convert the screen-space base to content px (1/zoom).
+          SNAP_THRESHOLD_PX * chromeLineScale()
         ) : { dx: 0, dy: 0, guideV: null, guideH: null };
         nextLeft += snapResult.dx;
         nextTop += snapResult.dy;
@@ -6726,6 +6761,29 @@ export const editorChromeBridgeScript: string = `"use strict";
       }
       pendingShieldDrag = null;
     }
+    function dragTargetForPointerDown(args) {
+      var selectedEl2 = args.selectedEl;
+      var hitEl = args.hitEl;
+      var hitRaw = args.hitRaw || hitEl;
+      var selectedAlive = !!args.selectedAlive;
+      if (selectedEl2 && selectedAlive && selectedEl2.contains && selectedEl2.contains(hitRaw)) {
+        return selectedEl2;
+      }
+      if (args.preferSelected && selectedEl2 && selectedAlive) {
+        var r = args.selectedRect;
+        var p = args.point;
+        if (r && p && r.width > 0 && r.height > 0 && p.x >= r.left && p.x <= r.right && p.y >= r.top && p.y <= r.bottom) {
+          return selectedEl2;
+        }
+      }
+      return hitEl;
+    }
+    function nextStackCandidate(candidateKeys, currentKey) {
+      if (!candidateKeys || candidateKeys.length === 0) return null;
+      var idx = candidateKeys.indexOf(currentKey);
+      if (idx === -1) return null;
+      return candidateKeys[(idx + 1) % candidateKeys.length];
+    }
     function beginPotentialShieldDrag(e) {
       stopNativeInteraction(e);
       if (e.button !== 0) return;
@@ -6737,7 +6795,17 @@ export const editorChromeBridgeScript: string = `"use strict";
         beginMarqueeSelection(e);
         return;
       }
-      var dragTarget = selectedEl && document.documentElement.contains(selectedEl) && selectedEl.contains(hit) ? selectedEl : hitTarget;
+      var selectedAlive = !!selectedEl && document.documentElement.contains(selectedEl);
+      var selectedRect = selectedAlive && selectedEl.getBoundingClientRect ? selectedEl.getBoundingClientRect() : null;
+      var dragTarget = dragTargetForPointerDown({
+        selectedEl,
+        selectedAlive,
+        selectedRect,
+        hitEl: hitTarget,
+        hitRaw: hit,
+        point: { x: e.clientX, y: e.clientY },
+        preferSelected: selectedLayerDragPriorityEnabled
+      });
       var clickTarget = hitTarget;
       if (!dragTarget || dragTarget === document.body || dragTarget === document.documentElement || isLayerInteractionBlocked(dragTarget)) {
         return;
@@ -6793,7 +6861,12 @@ export const editorChromeBridgeScript: string = `"use strict";
           postCrossScreenDrag("cancel");
         }
         if (ev) stopNativeInteraction(ev);
-        selectTarget(clickTarget || dragTarget, ev);
+        var cycledEl = !readOnly && (e.metaKey || e.ctrlKey) && !e.shiftKey ? stackCycleTarget(e.clientX, e.clientY, selectedEl) : null;
+        if (cycledEl) {
+          selectTarget(cycledEl);
+        } else {
+          selectTarget(clickTarget || dragTarget, ev);
+        }
         suppressNextShieldClickBriefly();
       }
       clearPendingShieldDrag();
@@ -7876,6 +7949,17 @@ export const editorChromeBridgeScript: string = `"use strict";
         );
         return;
       }
+      if (e.data.type === "set-selection-chrome-hidden") {
+        selectionChromeHidden = !!e.data.hidden;
+        if (selectionChromeHidden) {
+          hideSelectionOverlay();
+        } else if (selectedEl) {
+          positionOverlay(selectionOverlay, selectedEl);
+          updateParentAutoLayoutOverlay(selectedEl);
+          refreshOverlays();
+        }
+        return;
+      }
       if (e.data.type === "select-element") {
         var candidates = [];
         if (Array.isArray(e.data.selectorCandidates)) {
@@ -7908,7 +7992,11 @@ export const editorChromeBridgeScript: string = `"use strict";
           hoveredSpacingHandleKey = "";
         }
         selectedEl = target;
-        positionOverlay(selectionOverlay, target);
+        if (selectionChromeHidden) {
+          hideSelectionOverlay();
+        } else {
+          positionOverlay(selectionOverlay, target);
+        }
         if (hoveredEl === selectedEl) highlightOverlay.style.display = "none";
         if (selectionChangedByHost) {
           postElementSelect(target);

package/corpus/templates/design/app/components/design/DesignCanvas.tsx

@@ -316,6 +316,15 @@ ${editorChromeBridgeScript}
  */
 const LIVE_REFLOW_ENABLED = true;
 
+/**
+ * Rollout gate: when on, a pointerdown inside the current selection's box keeps
+ * the selected element as the drag target even when an overlapping
+ * non-descendant sibling wins the hit test. Baked into the bridge as
+ * `__SELECTED_LAYER_DRAG_PRIORITY__`; flip to `false` for descendant-only
+ * behavior.
+ */
+const SELECTED_LAYER_DRAG_PRIORITY_ENABLED = true;
+
 interface DesignCanvasProps {
   content: string;
   contentKey?: string;
@@ -950,6 +959,10 @@ function buildEditorChromeBridgeScript(args: {
         "__LIVE_REFLOW_ENABLED__",
         LIVE_REFLOW_ENABLED ? "true" : "false",
       )
+      .replace(
+        "__SELECTED_LAYER_DRAG_PRIORITY__",
+        SELECTED_LAYER_DRAG_PRIORITY_ENABLED ? "true" : "false",
+      )
   );
 }
 
@@ -2131,6 +2144,10 @@ export function DesignCanvas({
           .replace(
             "__LIVE_REFLOW_ENABLED__",
             LIVE_REFLOW_ENABLED ? "true" : "false",
+          )
+          .replace(
+            "__SELECTED_LAYER_DRAG_PRIORITY__",
+            SELECTED_LAYER_DRAG_PRIORITY_ENABLED ? "true" : "false",
           );
     // ALWAYS injected (like the other always-on bridges above) so
     // MultiScreenCanvas's cross-screen drag hit-testing