@agent-native/core 0.92.12 → 0.93.0

package/corpus/templates/design/app/components/design/bridge/embedded-wheel.bridge.ts

@@ -11,6 +11,8 @@
  *   __EMBEDDED_WHEEL_FORWARDING_ENABLED__  — boolean literal "true"/"false"
  *   __EMBEDDED_SPACE_KEY_FORWARDING_ENABLED__ — boolean literal; true only
  *     when the editor-chrome bridge is absent (Interact mode)
+ *   __EDITING_SAFETY_ENABLED__ — boolean literal; true outside Interact mode
+ *     to freeze authored motion and block native link/form navigation
  *
  * Protocol (iframe → parent, only when enabled):
  *
@@ -35,10 +37,12 @@
  */
 declare var __EMBEDDED_WHEEL_FORWARDING_ENABLED__: boolean;
 declare var __EMBEDDED_SPACE_KEY_FORWARDING_ENABLED__: boolean;
+declare var __EDITING_SAFETY_ENABLED__: boolean;
 
 (function () {
   var wheelEnabled = __EMBEDDED_WHEEL_FORWARDING_ENABLED__;
   var spaceKeyForwardingEnabled = __EMBEDDED_SPACE_KEY_FORWARDING_ENABLED__;
+  var editingSafetyEnabled = __EDITING_SAFETY_ENABLED__;
   var leftButtonEnabled = false;
   var temporarySpacePanEnabled = false;
   var activePointerId: number | null = null;
@@ -53,6 +57,19 @@ declare var __EMBEDDED_SPACE_KEY_FORWARDING_ENABLED__: boolean;
   var lastShiftKey = false;
   var lastAltKey = false;
 
+  if (editingSafetyEnabled) {
+    var freezeStyle = document.createElement("style");
+    freezeStyle.setAttribute("data-agent-native-editing-safety-style", "");
+    freezeStyle.textContent =
+      "html,body{animation:none!important;transition:none!important;scroll-behavior:auto!important}" +
+      "body *:not([data-agent-native-edit-overlay]):not([data-agent-native-edit-overlay] *){" +
+      "animation:none!important;transition:none!important;scroll-behavior:auto!important}" +
+      "body *:not([data-agent-native-edit-overlay]):not([data-agent-native-edit-overlay] *)::before," +
+      "body *:not([data-agent-native-edit-overlay]):not([data-agent-native-edit-overlay] *)::after{" +
+      "animation:none!important;transition:none!important}";
+    (document.head || document.documentElement).appendChild(freezeStyle);
+  }
+
   function clamp(value: number, limit: number): number {
     var number = Number(value) || 0;
     if (number > limit) return limit;
@@ -66,6 +83,18 @@ declare var __EMBEDDED_SPACE_KEY_FORWARDING_ENABLED__: boolean;
     if (e.stopImmediatePropagation) e.stopImmediatePropagation();
   }
 
+  function stopEditingNavigation(e: Event): void {
+    if (!editingSafetyEnabled) return;
+    stopNativeInteraction(e);
+  }
+
+  function stopEditingLinkNavigation(e: MouseEvent): void {
+    if (!editingSafetyEnabled) return;
+    var target = e.target as Element | null;
+    if (!target || !target.closest) return;
+    if (target.closest("a[href], area[href]")) stopNativeInteraction(e);
+  }
+
   function postToParent(message: Record<string, unknown>): void {
     try {
       (window.parent as Window).postMessage(message, "*");
@@ -286,6 +315,13 @@ declare var __EMBEDDED_SPACE_KEY_FORWARDING_ENABLED__: boolean;
     if (document.visibilityState === "hidden") cancelActivePan();
   }
 
+  var reloadReported = false;
+  function reportRuntimeReload(): void {
+    if (!editingSafetyEnabled || reloadReported) return;
+    reloadReported = true;
+    postToParent({ type: "agent-native:runtime-reloading" });
+  }
+
   var wheelTarget: EventTarget =
     document.documentElement || document.body || document;
   wheelTarget.addEventListener("wheel", onWheel as EventListener, {
@@ -297,11 +333,15 @@ declare var __EMBEDDED_SPACE_KEY_FORWARDING_ENABLED__: boolean;
   document.addEventListener("pointerup", onPointerUp, true);
   document.addEventListener("pointercancel", onPointerCancel, true);
   document.addEventListener("click", suppressTrailingClick, true);
+  document.addEventListener("click", stopEditingLinkNavigation, true);
   document.addEventListener("auxclick", suppressTrailingClick, true);
+  document.addEventListener("submit", stopEditingNavigation, true);
   document.addEventListener("keydown", onKeyDown, true);
   document.addEventListener("keyup", onKeyUp, true);
   window.addEventListener("message", onHostMessage);
   window.addEventListener("blur", onWindowBlur);
   document.addEventListener("visibilitychange", onWindowBlur);
+  window.addEventListener("beforeunload", reportRuntimeReload);
+  window.addEventListener("pagehide", reportRuntimeReload);
   window.addEventListener("pagehide", cancelActivePan);
 })();

package/corpus/templates/design/app/components/design/code-workbench/CodeWorkbench.tsx

@@ -49,6 +49,7 @@ import {
 export interface CodeWorkbenchLocalhostConnection {
   connectionId: string;
   label: string;
+  rootPath?: string;
 }
 
 export interface CodeWorkbenchActiveFile {

package/corpus/templates/design/app/components/design/code-workbench/explorer/ExplorerView.tsx

@@ -139,6 +139,7 @@ export function ExplorerView({
           key={provider.key}
           providerKey={provider.key}
           providerLabel={`LOCAL FILES — ${provider.label}` /* i18n-ignore */}
+          providerTitle={provider.rootPath}
           capabilities={provider.capabilities}
           nodes={buildFileTree(localhostFiles[provider.key] ?? [])}
           activeUri={activeUri}

package/corpus/templates/design/app/components/design/code-workbench/explorer/FileTree.tsx

@@ -48,6 +48,7 @@ interface PendingNewFile {
 interface FileTreeProps {
   providerKey: string;
   providerLabel: string;
+  providerTitle?: string;
   capabilities: WorkspaceCapabilities;
   nodes: TreeNode[];
   activeUri: string | null;
@@ -69,6 +70,7 @@ interface FileTreeProps {
 export function FileTree({
   providerKey,
   providerLabel,
+  providerTitle,
   capabilities,
   nodes,
   activeUri,
@@ -297,7 +299,9 @@ export function FileTree({
   return (
     <div className="flex flex-col">
       <div className="group/header flex h-[22px] shrink-0 items-center gap-1 px-2 pt-1 text-[11px] font-bold uppercase tracking-wide text-[var(--workbench-muted-fg)]">
-        <span className="min-w-0 flex-1 truncate">{providerLabel}</span>
+        <span className="min-w-0 flex-1 truncate" title={providerTitle}>
+          {providerLabel}
+        </span>
         <div className="flex shrink-0 items-center gap-0.5 opacity-0 group-hover/header:opacity-100">
           {capabilities.create ? (
             <HeaderIconButton

package/corpus/templates/design/app/components/design/code-workbench/workspace/create-providers.ts

@@ -8,6 +8,7 @@ export interface CreateWorkspaceProvidersOptions {
   localhostConnections: Array<{
     connectionId: string;
     label: string;
+    rootPath?: string;
   }>;
 }
 
@@ -30,6 +31,7 @@ export function createWorkspaceProviders(
       createLocalhostProvider({
         connectionId: connection.connectionId,
         label: connection.label,
+        rootPath: connection.rootPath,
         canEdit: options.canEdit,
         designId: options.designId,
       }),

package/corpus/templates/design/app/components/design/code-workbench/workspace/localhost-provider.ts

@@ -71,6 +71,7 @@ function isVersionConflictError(error: unknown): boolean {
 export interface CreateLocalhostProviderOptions {
   connectionId: string;
   label: string;
+  rootPath?: string;
   /**
    * Whether the current user has editor access to the design. Local files are
    * editable whenever this is true — the write-consent grant is enforced
@@ -91,7 +92,7 @@ export interface CreateLocalhostProviderOptions {
 export function createLocalhostProvider(
   options: CreateLocalhostProviderOptions,
 ): WorkspaceProvider {
-  const { connectionId, label, canEdit, designId } = options;
+  const { connectionId, label, rootPath, canEdit, designId } = options;
   const key = `localhost:${connectionId}`;
 
   const capabilities: WorkspaceCapabilities = {
@@ -169,6 +170,7 @@ export function createLocalhostProvider(
     key,
     kind: "localhost",
     label,
+    rootPath,
     capabilities,
     listFiles,
     readFile,

package/corpus/templates/design/app/components/design/code-workbench/workspace/types.ts

@@ -43,6 +43,8 @@ export interface WorkspaceProvider {
   kind: WorkspaceRootKind;
   /** Explorer section label, e.g. "Design files" or the local app name. */
   label: string;
+  /** Absolute connected folder path, shown only as local workspace context. */
+  rootPath?: string;
   capabilities: WorkspaceCapabilities;
   listFiles(): Promise<WorkspaceFileEntry[]>;
   readFile(path: string): Promise<WorkspaceReadResult>;

package/corpus/templates/design/app/components/design/edit-panel/element-identity.ts

@@ -36,6 +36,25 @@ export function elementStableKey(element: ElementInfo): string {
   return element.sourceId || element.id || element.selector || element.tagName;
 }
 
+/**
+ * Stable identity for inspector interaction-state UI (Default / Hover /
+ * Focus / Focus visible / Pressed / Disabled).
+ *
+ * Unlike `elementIdentityKey`, this intentionally excludes the bounding box:
+ * editing width/height/position while a non-default state is selected must
+ * not look like a new selection and snap the picker back to Default. The file
+ * id is included because generated node ids are only document-local; moving
+ * between two screens that both contain `button_1` is a real selection change
+ * and must clear the previous screen's forced preview.
+ */
+export function interactionStateSelectionKey(
+  element: ElementInfo,
+  fileId: string | null | undefined,
+  selectedCount: number,
+): string {
+  return `${fileId || "no-file"}:${selectedCount}:${elementStableKey(element)}`;
+}
+
 /**
  * Module-level aspect-ratio lock state, keyed by elementStableKey. Module
  * scope (not React state) so the lock survives EditPanel remounts across

package/corpus/templates/design/app/components/design/edit-panel/frame-presets-panel.tsx

@@ -80,6 +80,7 @@ const FRAME_PRESET_CATEGORY_LABEL_KEYS: Record<
   watch: "editPanel.framePresets.categories.watch",
   paper: "editPanel.framePresets.categories.paper",
   socialMedia: "editPanel.framePresets.categories.socialMedia",
+  adUnit: "editPanel.framePresets.categories.adUnit",
 };
 
 /**

package/corpus/templates/design/app/components/design/edit-panel/interaction-state-helpers.ts

@@ -43,3 +43,30 @@ export function resolveInteractionStateValue(
   const override = stateStyles[property] ?? stateStyles[kebabProperty];
   return override !== undefined ? override : baseValue;
 }
+
+/**
+ * Project active state declarations onto an ElementInfo snapshot so every
+ * existing inspector section reads the same override-or-base values without
+ * each field needing bespoke state plumbing. Stored CSS names are kebab-case;
+ * bridge computed/inline maps are primarily camelCase, so both aliases are
+ * populated. Returns the original object for Default/no overrides.
+ */
+export function elementWithInteractionStateStyles(
+  element: ElementInfo,
+  stateStyles: Record<string, string> | undefined,
+): ElementInfo {
+  if (!stateStyles || Object.keys(stateStyles).length === 0) return element;
+  const aliases: Record<string, string> = {};
+  for (const [property, value] of Object.entries(stateStyles)) {
+    const camel = property.replace(/-([a-z])/g, (_, letter: string) =>
+      letter.toUpperCase(),
+    );
+    aliases[property] = value;
+    aliases[camel] = value;
+  }
+  return {
+    ...element,
+    computedStyles: { ...element.computedStyles, ...aliases },
+    inlineStyles: { ...(element.inlineStyles ?? {}), ...aliases },
+  };
+}

package/corpus/templates/design/app/components/design/inspector/InteractionStatePanel.tsx

@@ -1,13 +1,11 @@
 /**
- * InteractionStatePanel — the Webflow-style element interaction-state
+ * InteractionStatePanel — the Figma-style element interaction-state
  * selector (Default / Hover / Focus / Focus-visible / Active / Disabled).
  *
  * Rendered at the top of the style sections when exactly one element is
  * selected (see `EditPanel`'s mount site). Selecting a non-default state:
- *   1. Visually marks the control as "editing <State>" so users can't
- *      forget they're no longer editing the element's base styling
- *      (Webflow/Framer convention — a persistent, unmissable accent, not a
- *      transient toast).
+ *   1. Keeps the selected state visible in the trigger and marks the active
+ *      menu row with Figma's trailing selection dot.
  *   2. Tells the parent via `onInteractionStateChange` so DesignEditor can
  *      force the canvas preview (phase 2 — see `shared/interaction-states.ts`
  *      module doc for the forced-preview attribute mechanism this drives).
@@ -32,7 +30,7 @@ import {
   IconHandClick,
   IconBan,
 } from "@tabler/icons-react";
-import { Fragment } from "react";
+import { Fragment, useCallback, useRef } from "react";
 
 import {
   DropdownMenu,
@@ -54,6 +52,15 @@ export type { InteractionState };
 /** `null` (or omitted) means the Default (base) state is active. */
 export type ActiveInteractionState = InteractionState | null;
 
+const TRANSIENT_CLOSE_WINDOW_MS = 400;
+
+export function isImmediateInteractionMenuClose(
+  openedAt: number,
+  now: number,
+): boolean {
+  return openedAt > 0 && now - openedAt < TRANSIENT_CLOSE_WINDOW_MS; // i18n-ignore -- numeric timing guard; no user-visible copy.
+}
+
 export interface InteractionStatePanelProps {
   /** `null` = Default. */
   activeState: ActiveInteractionState;
@@ -71,6 +78,14 @@ export interface InteractionStatePanelProps {
    * dropdown's per-row accent dot. Does not affect availability.
    */
   statesWithOverrides?: ReadonlySet<InteractionState>;
+  /**
+   * Controlled dropdown state owned by EditPanel. The inspector's element
+   * subtree can transiently unmount while a just-authored style is reconciled;
+   * keeping this one level higher prevents that refresh from closing a menu
+   * the user just opened.
+   */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }
 
 const STATE_ICONS: Record<InteractionState, typeof IconPointer> = {
@@ -114,90 +129,131 @@ export function InteractionStatePanel({
   onActiveStateChange,
   availableStates = DEFAULT_AVAILABLE_STATES,
   statesWithOverrides,
+  open,
+  onOpenChange,
 }: InteractionStatePanelProps) {
   const t = useT();
   const isNonDefault = activeState !== null;
+  const openedAtRef = useRef(0);
+  const ignoreNextImplicitCloseRef = useRef(false);
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (nextOpen) {
+        openedAtRef.current = performance.now();
+        ignoreNextImplicitCloseRef.current = true;
+        onOpenChange?.(true);
+        return;
+      }
+      const ignoreThisClose =
+        ignoreNextImplicitCloseRef.current &&
+        isImmediateInteractionMenuClose(openedAtRef.current, performance.now());
+      // One-shot even when the close arrived outside the timing window: no
+      // later outside click can be trapped by an opening event that never
+      // produced the reconciliation callback.
+      ignoreNextImplicitCloseRef.current = false;
+      if (ignoreThisClose) return;
+      onOpenChange?.(false);
+    },
+    [onOpenChange],
+  );
+  const closeMenu = useCallback(() => {
+    ignoreNextImplicitCloseRef.current = false;
+    onOpenChange?.(false);
+  }, [onOpenChange]);
+  // The menu's order is part of the Figma interaction contract. Callers may
+  // narrow the applicable states, but cannot accidentally reorder or repeat
+  // them by passing a differently ordered capability list.
+  const orderedAvailableStates = DEFAULT_AVAILABLE_STATES.filter((state) =>
+    availableStates.includes(state),
+  );
+
+  const selectionDot = (selected: boolean, hasOverride = false) => {
+    if (!selected && !hasOverride) return null;
+    return (
+      <span
+        className={cn(
+          "size-1.5 shrink-0 rounded-full",
+          selected
+            ? "bg-muted-foreground"
+            : "bg-[var(--design-editor-accent-color)]",
+        )}
+        aria-label={
+          hasOverride
+            ? t("editPanel.interactionStates.hasOverrideIndicator")
+            : undefined
+        }
+        aria-hidden={hasOverride ? undefined : "true"}
+      />
+    );
+  };
 
   return (
     <div className="border-b border-[var(--design-editor-control-border)] px-2 py-1.5">
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <button
-                type="button"
-                className={cn(
-                  "flex h-7 w-full cursor-pointer items-center gap-1.5 rounded-md px-2 text-left text-[12px] font-semibold outline-none transition-colors",
-                  isNonDefault
-                    ? "bg-[var(--design-editor-accent-color)] text-white shadow-[0_0_0_1px_var(--design-editor-accent-color)]"
-                    : "bg-[var(--design-editor-control-bg)] text-foreground hover:bg-[var(--design-editor-panel-raised-bg)]",
-                )}
-                aria-label={t("editPanel.interactionStates.selectorLabel")}
-              >
-                {isNonDefault ? (
-                  <span
-                    className="size-1.5 shrink-0 rounded-full bg-white"
-                    aria-hidden="true"
-                  />
-                ) : null}
-                <span className="min-w-0 flex-1 truncate">
-                  {isNonDefault
-                    ? t("editPanel.interactionStates.editingState", {
-                        state: stateLabel(t, activeState),
-                      })
-                    : stateLabel(t, null)}
-                </span>
-                <IconChevronDown className="size-3.5 shrink-0 opacity-70" />
-              </button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start" className="w-48">
+      <DropdownMenu open={open} onOpenChange={handleOpenChange}>
+        <DropdownMenuTrigger asChild>
+          <button
+            type="button"
+            className="flex h-7 w-full cursor-pointer items-center gap-1.5 rounded-md bg-[var(--design-editor-control-bg)] px-2 text-left text-[12px] font-semibold text-foreground outline-none transition-colors hover:bg-[var(--design-editor-panel-raised-bg)] focus-visible:ring-1 focus-visible:ring-ring"
+            aria-label={t("editPanel.interactionStates.selectorLabel")}
+            aria-description={
+              isNonDefault
+                ? t("editPanel.interactionStates.editingStateTooltip", {
+                    state: stateLabel(t, activeState),
+                  })
+                : t("editPanel.interactionStates.selectorTooltip")
+            }
+            data-interaction-state={activeState ?? "default"}
+          >
+            <span className="min-w-0 flex-1 truncate">
+              {stateLabel(t, activeState)}
+            </span>
+            <IconChevronDown className="size-3.5 shrink-0 opacity-70" />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          align="start"
+          className="w-48"
+          aria-label={t("editPanel.interactionStates.selectorLabel")}
+          onEscapeKeyDown={closeMenu}
+        >
+          <DropdownMenuItem
+            onSelect={() => {
+              onActiveStateChange(null);
+              closeMenu();
+            }}
+            className={cn("px-3", activeState === null && "font-semibold")}
+            role="menuitemradio"
+            aria-checked={activeState === null}
+            data-interaction-state-option="default"
+          >
+            <span className="flex-1">{stateLabel(t, null)}</span>
+            {selectionDot(activeState === null)}
+          </DropdownMenuItem>
+          {orderedAvailableStates.map((state) => {
+            const Icon = STATE_ICONS[state];
+            const hasOverride = statesWithOverrides?.has(state) ?? false;
+            const selected = activeState === state;
+            return (
               <DropdownMenuItem
-                onClick={() => onActiveStateChange(null)}
-                className={cn(activeState === null && "font-semibold")}
+                key={state}
+                onSelect={() => {
+                  onActiveStateChange(state);
+                  closeMenu();
+                }}
+                className={cn("px-3", selected && "font-semibold")}
+                role="menuitemradio"
+                aria-checked={selected}
+                data-interaction-state-option={state}
+                data-has-override={hasOverride || undefined}
               >
-                <span className="flex-1">{stateLabel(t, null)}</span>
-                {activeState === null && (
-                  <span className="size-1.5 rounded-full bg-primary" />
-                )}
+                <Icon className="mr-2 size-3.5 shrink-0" />
+                <span className="flex-1">{stateLabel(t, state)}</span>
+                {selectionDot(selected, hasOverride)}
               </DropdownMenuItem>
-              {availableStates.map((state) => {
-                const Icon = STATE_ICONS[state];
-                const hasOverride = statesWithOverrides?.has(state) ?? false;
-                return (
-                  <DropdownMenuItem
-                    key={state}
-                    onClick={() => onActiveStateChange(state)}
-                    className={cn(activeState === state && "font-semibold")}
-                  >
-                    <Icon className="mr-2 size-3.5 shrink-0" />
-                    <span className="flex-1">{stateLabel(t, state)}</span>
-                    {hasOverride && (
-                      <span
-                        className={cn(
-                          "size-1.5 shrink-0 rounded-full",
-                          activeState === state
-                            ? "bg-primary"
-                            : "bg-[var(--design-editor-accent-color)]",
-                        )}
-                        aria-label={t(
-                          "editPanel.interactionStates.hasOverrideIndicator",
-                        )}
-                      />
-                    )}
-                  </DropdownMenuItem>
-                );
-              })}
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </TooltipTrigger>
-        <TooltipContent>
-          {isNonDefault
-            ? t("editPanel.interactionStates.editingStateTooltip", {
-                state: stateLabel(t, activeState),
-              })
-            : t("editPanel.interactionStates.selectorTooltip")}
-        </TooltipContent>
-      </Tooltip>
+            );
+          })}
+        </DropdownMenuContent>
+      </DropdownMenu>
     </div>
   );
 }

package/corpus/templates/design/app/components/design/inspector/frame-size-presets.ts

@@ -20,7 +20,8 @@ export type FrameSizePresetCategoryKey =
   | "presentation"
   | "watch"
   | "paper"
-  | "socialMedia";
+  | "socialMedia"
+  | "adUnit";
 
 export interface FrameSizePreset {
   /** Product/device name — kept as a literal, never translated. */
@@ -90,12 +91,19 @@ export const FRAME_SIZE_PRESET_CATEGORIES: FrameSizePresetCategory[] = [
     presets: [{ name: "Apple Watch 45mm", width: 198, height: 242 }],
   },
   {
+    // Sized in 96dpi CSS pixels (this app's canvas/export unit — see
+    // createSinglePageRasterPdf), NOT the 72dpi point values Figma's own
+    // "Paper" preset list shows. Using point values here would author a
+    // canvas frame ~25% smaller than the real physical page once exported to
+    // PDF (612x792 "Letter"-as-points renders as a 6.375x8.25in page instead
+    // of true 8.5x11in). 816x1056 / 794x1123 are the standard 96dpi
+    // equivalents for US Letter and A4.
     key: "paper",
     presets: [
-      { name: "A4", width: 595, height: 842 },
-      { name: "A5", width: 420, height: 595 },
-      { name: "Letter", width: 612, height: 792 },
-      { name: "Tabloid", width: 792, height: 1224 },
+      { name: "Letter", width: 816, height: 1056 },
+      { name: "A4", width: 794, height: 1123 },
+      { name: "A5", width: 559, height: 794 },
+      { name: "Tabloid", width: 1056, height: 1632 },
     ],
   },
   {
@@ -108,6 +116,18 @@ export const FRAME_SIZE_PRESET_CATEGORIES: FrameSizePresetCategory[] = [
       { name: "LinkedIn Cover", width: 1584, height: 396 },
     ],
   },
+  {
+    // Standard IAB ad-unit sizes, in CSS px (matches every other category's
+    // 96dpi-px convention above, and this app's PNG/PDF export pixel math).
+    key: "adUnit",
+    presets: [
+      { name: "Medium Rectangle", width: 300, height: 250 },
+      { name: "Leaderboard", width: 728, height: 90 },
+      { name: "Wide Skyscraper", width: 160, height: 600 },
+      { name: "Mobile Leaderboard", width: 320, height: 50 },
+      { name: "Billboard", width: 970, height: 250 },
+    ],
+  },
 ];
 
 /** Flat list of every preset across all categories — used for lookups/tests. */

package/corpus/templates/design/app/components/design/multi-screen/chrome-transitions.ts

@@ -7,7 +7,7 @@ const CHROME_OPACITY_TRANSITION = "opacity 150ms ease-out";
 const CHROME_BORDER_SETTLE_TRANSITION = `inset ${CHROME_SETTLE_MS}ms ease-out, border-width ${CHROME_SETTLE_MS}ms ease-out, border-radius ${CHROME_SETTLE_MS}ms ease-out, ${CHROME_OPACITY_TRANSITION}`;
 const SELECTION_BOX_SETTLE_TRANSITION = `border-width ${CHROME_SETTLE_MS}ms ease-out, border-radius ${CHROME_SETTLE_MS}ms ease-out, ${CHROME_OPACITY_TRANSITION}`;
 const CHROME_HANDLE_SETTLE_TRANSITION = `width ${CHROME_SETTLE_MS}ms ease-out, height ${CHROME_SETTLE_MS}ms ease-out, border-width ${CHROME_SETTLE_MS}ms ease-out, top ${CHROME_SETTLE_MS}ms ease-out, bottom ${CHROME_SETTLE_MS}ms ease-out, left ${CHROME_SETTLE_MS}ms ease-out, right ${CHROME_SETTLE_MS}ms ease-out, ${CHROME_OPACITY_TRANSITION}`;
-// Frame header (name + "Full view" button) is counter-scaled via
+// Frame header (name + "Interact" button) is counter-scaled via
 // transform to stay a fixed screen size; ease that scale on zoom-settle. opacity
 // is included so the button's hover-fade (transition-opacity) keeps working.
 const CHROME_LABEL_SETTLE_TRANSITION = `transform ${CHROME_SETTLE_MS}ms ease-out, ${CHROME_OPACITY_TRANSITION}`;