@agent-native/core 0.90.1 → 0.90.2

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

@@ -0,0 +1,116 @@
+/**
+ * Frame-tool size presets — the equivalent of Figma's right-panel preset list
+ * that replaces the inspector while the Frame tool (F / A) is armed. Each
+ * category maps to a `framePresets.categories.<key>` i18n label; preset
+ * `name` values are product/device names and are intentionally left as
+ * untranslated literals (matching Figma's own behavior).
+ *
+ * Pure data + a couple of small pure helpers so the shape can be unit tested
+ * without mounting EditPanel.
+ *
+ * i18n-raw-literal-disable-file: every `name` below is a real-world
+ * product/device name (iPhone, Android, Instagram Post, etc.) and must stay
+ * untranslated in every locale, matching Figma's own preset list behavior.
+ */
+
+export type FrameSizePresetCategoryKey =
+  | "phone"
+  | "tablet"
+  | "desktop"
+  | "presentation"
+  | "watch"
+  | "paper"
+  | "socialMedia";
+
+export interface FrameSizePreset {
+  /** Product/device name — kept as a literal, never translated. */
+  name: string;
+  width: number;
+  height: number;
+}
+
+export interface FrameSizePresetCategory {
+  key: FrameSizePresetCategoryKey;
+  presets: FrameSizePreset[];
+}
+
+/**
+ * Ordered categories, first-group-expanded-by-default matching Figma (Phone
+ * first). Sizes are Figma's current preset list, abbreviated to the most
+ * common devices per category.
+ */
+export const FRAME_SIZE_PRESET_CATEGORIES: FrameSizePresetCategory[] = [
+  {
+    key: "phone",
+    presets: [
+      { name: "iPhone 17", width: 402, height: 874 },
+      { name: "iPhone 16 & 17 Pro", width: 402, height: 874 },
+      { name: "iPhone 16", width: 393, height: 852 },
+      { name: "iPhone 16 & 17 Pro Max", width: 440, height: 956 },
+      { name: "iPhone 16 Plus", width: 430, height: 932 },
+      { name: "iPhone Air", width: 420, height: 912 },
+      { name: "iPhone 14 & 15 Pro Max", width: 430, height: 932 },
+      { name: "iPhone 14 & 15 Pro", width: 393, height: 852 },
+      { name: "iPhone 13 & 14", width: 390, height: 844 },
+      { name: "iPhone 14 Plus", width: 428, height: 926 },
+      { name: "Android Compact", width: 412, height: 917 },
+      { name: "Android Medium", width: 700, height: 840 },
+    ],
+  },
+  {
+    key: "tablet",
+    presets: [
+      { name: "iPad mini 8.3", width: 744, height: 1133 },
+      { name: "Surface Pro 8", width: 1440, height: 960 },
+      { name: 'iPad Pro 11"', width: 834, height: 1194 },
+      { name: 'iPad Pro 12.9"', width: 1024, height: 1366 },
+      { name: "Android Expanded", width: 1280, height: 800 },
+    ],
+  },
+  {
+    key: "desktop",
+    presets: [
+      { name: "Desktop", width: 1440, height: 1024 },
+      { name: "Wireframe", width: 1440, height: 1024 },
+      { name: "MacBook Air", width: 1280, height: 832 },
+      { name: 'MacBook Pro 14"', width: 1512, height: 982 },
+      { name: 'MacBook Pro 16"', width: 1728, height: 1117 },
+      { name: "TV", width: 1280, height: 720 },
+    ],
+  },
+  {
+    key: "presentation",
+    presets: [
+      { name: "Slide 16:9", width: 1920, height: 1080 },
+      { name: "Slide 4:3", width: 1024, height: 768 },
+    ],
+  },
+  {
+    key: "watch",
+    presets: [{ name: "Apple Watch 45mm", width: 198, height: 242 }],
+  },
+  {
+    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 },
+    ],
+  },
+  {
+    key: "socialMedia",
+    presets: [
+      { name: "Instagram Post", width: 1080, height: 1080 },
+      { name: "Instagram Story", width: 1080, height: 1920 },
+      { name: "X Post", width: 1200, height: 675 },
+      { name: "Facebook Cover", width: 820, height: 312 },
+      { name: "LinkedIn Cover", width: 1584, height: 396 },
+    ],
+  },
+];
+
+/** Flat list of every preset across all categories — used for lookups/tests. */
+export function allFrameSizePresets(): FrameSizePreset[] {
+  return FRAME_SIZE_PRESET_CATEGORIES.flatMap((category) => category.presets);
+}

package/corpus/templates/design/app/components/design/inspector/index.ts

@@ -7,6 +7,10 @@ export {
   type AlignmentVertical,
   type DistributionAxis,
 } from "./AlignmentMatrix";
+export {
+  BreakpointOverrideIndicator,
+  type BreakpointOverrideIndicatorProps,
+} from "./BreakpointOverrideIndicator";
 export {
   AutoLayoutMatrix,
   type AutoLayoutDirection,
@@ -38,8 +42,10 @@ export {
   type ExportSettingsValue,
 } from "./ExportSettingsPanel";
 export {
+  beginEyedropperPick,
   DesignColorPicker,
   endPointerGesture,
+  hasEyeDropperSupport,
   POINTER_GESTURE_IDLE,
   startPointerGesture,
   type DesignColorMode,
@@ -54,6 +60,13 @@ export {
   type DesignPaintType,
   type PointerGestureState,
 } from "./DesignColorPicker";
+export {
+  allFrameSizePresets,
+  FRAME_SIZE_PRESET_CATEGORIES,
+  type FrameSizePreset,
+  type FrameSizePresetCategory,
+  type FrameSizePresetCategoryKey,
+} from "./frame-size-presets";
 export {
   GradientEditor,
   defaultGradient,
@@ -73,6 +86,19 @@ export {
   type ImageFillValue,
   type ImageFitMode,
 } from "./ImageFillControls";
+export {
+  InteractionStateOverrideIndicator,
+  InteractionStatePanel,
+  type ActiveInteractionState,
+  type InteractionState,
+  type InteractionStatePanelProps,
+} from "./InteractionStatePanel";
+export {
+  MotionKeyframeDiamond,
+  motionPropertyHasKeyframe,
+  type MotionKeyframeCssProperty,
+  type MotionKeyframeDiamondProps,
+} from "./MotionKeyframeDiamond";
 export {
   ShaderFillsPanel,
   descriptorFromPreset,

package/corpus/templates/design/app/components/design/inspector/scrub-input-utils.ts

@@ -114,6 +114,35 @@ export function normalizeScrubNumber(
   return Object.is(next, -0) ? 0 : next;
 }
 
+/**
+ * Whether a field's unit should snap to whole numbers while the user is
+ * actively pointer-dragging (scrubbing) it. Px-type fields (padding, gap,
+ * position, size, radius, etc.) read as integers in Figma-style editors even
+ * though the underlying `precision` option (which also governs *typed* input
+ * and keyboard nudges) allows one decimal place so a typed "12.5" still
+ * commits legally. Scoped to "px" specifically — unitless fields like
+ * line-height (precision-based, fractional by design) and other units (deg,
+ * %) are untouched.
+ */
+export function scrubSnapsToInteger(unit: string | undefined): boolean {
+  return unit === "px";
+}
+
+/**
+ * Rounds a live scrub-drag value to a whole number when the field's unit
+ * calls for integer-only scrubbing (see `scrubSnapsToInteger`), applied
+ * *before* `normalizeScrubNumber`'s own min/max/precision clamp so a
+ * following precision clamp (if any) can't reintroduce a fraction. Only the
+ * pointer-drag scrub gesture should call this — typed input and keyboard
+ * nudges keep their existing `precision`-based rounding untouched.
+ */
+export function roundScrubDragValue(
+  value: number,
+  unit: string | undefined,
+): number {
+  return scrubSnapsToInteger(unit) ? Math.round(value) : value;
+}
+
 export function formatScrubValue(
   value: number,
   options: Pick<ScrubExpressionOptions, "precision" | "unit"> = {},

package/corpus/templates/design/app/components/design/multi-screen/alt-hover-measurement.ts

@@ -0,0 +1,171 @@
+import type {
+  DistanceGuideBand,
+  EqualGapGuide,
+  FrameBounds,
+} from "@shared/canvas-math";
+
+import type {
+  AlignmentGuide,
+  AltHoverMeasurement,
+  AltHoverMeasurementLine,
+} from "./types";
+
+// Snap/guide recompute runs every rAF-coalesced mousemove during a drag and
+// always returns a freshly-allocated array, so referential-equality bail in
+// setState never fires even when the guides are unchanged frame-to-frame
+// (e.g. holding steady mid-drag, or dragging along an axis with no new
+// alignment). Shallow field-compare avoids the wasted re-render (PF15).
+export function alignmentGuidesEqual(a: AlignmentGuide[], b: AlignmentGuide[]) {
+  if (a === b) return true;
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    const x = a[i];
+    const y = b[i];
+    if (
+      x.orientation !== y.orientation ||
+      x.position !== y.position ||
+      x.start !== y.start ||
+      x.end !== y.end
+    ) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export function distanceGuideBandEqual(
+  a: DistanceGuideBand,
+  b: DistanceGuideBand,
+): boolean {
+  return (
+    a.gapStart === b.gapStart &&
+    a.gapEnd === b.gapEnd &&
+    a.crossStart === b.crossStart &&
+    a.crossEnd === b.crossEnd
+  );
+}
+
+export function equalGapGuidesEqual(a: EqualGapGuide[], b: EqualGapGuide[]) {
+  if (a === b) return true;
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    const x = a[i];
+    const y = b[i];
+    if (
+      x.orientation !== y.orientation ||
+      x.gap !== y.gap ||
+      !distanceGuideBandEqual(x.bands[0], y.bands[0]) ||
+      !distanceGuideBandEqual(x.bands[1], y.bands[1])
+    ) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export function altHoverMeasurementLineEqual(
+  a: AltHoverMeasurementLine | null,
+  b: AltHoverMeasurementLine | null,
+): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return (
+    a.orientation === b.orientation &&
+    a.gap === b.gap &&
+    a.start === b.start &&
+    a.end === b.end &&
+    a.crossPosition === b.crossPosition &&
+    a.overlaps === b.overlaps
+  );
+}
+
+export function altHoverMeasurementEqual(
+  a: AltHoverMeasurement | null,
+  b: AltHoverMeasurement | null,
+): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return (
+    altHoverMeasurementLineEqual(a.horizontal, b.horizontal) &&
+    altHoverMeasurementLineEqual(a.vertical, b.vertical)
+  );
+}
+
+/** Computes the Figma-style alt-hover measurement lines between a selection's
+ *  bounding box and a hovered object's bounding box: one horizontal gap (x
+ *  axis) and one vertical gap (y axis), each with the px distance and the
+ *  line's placement. Pure/testable — no DOM, no React state. Returns null for
+ *  an axis where the two boxes overlap (nothing meaningful to measure there),
+ *  matching Figma's behavior of only showing the line(s) that represent real
+ *  empty space. */
+export function computeAltHoverMeasurement(
+  selectionBounds: FrameBounds,
+  hoveredBounds: FrameBounds,
+): AltHoverMeasurement {
+  const horizontalOverlap =
+    selectionBounds.top < hoveredBounds.bottom &&
+    selectionBounds.bottom > hoveredBounds.top;
+  const verticalOverlap =
+    selectionBounds.left < hoveredBounds.right &&
+    selectionBounds.right > hoveredBounds.left;
+
+  let horizontal: AltHoverMeasurementLine | null = null;
+  if (selectionBounds.right <= hoveredBounds.left) {
+    horizontal = {
+      orientation: "horizontal",
+      gap: hoveredBounds.left - selectionBounds.right,
+      start: selectionBounds.right,
+      end: hoveredBounds.left,
+      crossPosition: horizontalOverlap
+        ? (Math.max(selectionBounds.top, hoveredBounds.top) +
+            Math.min(selectionBounds.bottom, hoveredBounds.bottom)) /
+          2
+        : (selectionBounds.centerY + hoveredBounds.centerY) / 2,
+      overlaps: false,
+    };
+  } else if (hoveredBounds.right <= selectionBounds.left) {
+    horizontal = {
+      orientation: "horizontal",
+      gap: selectionBounds.left - hoveredBounds.right,
+      start: hoveredBounds.right,
+      end: selectionBounds.left,
+      crossPosition: horizontalOverlap
+        ? (Math.max(selectionBounds.top, hoveredBounds.top) +
+            Math.min(selectionBounds.bottom, hoveredBounds.bottom)) /
+          2
+        : (selectionBounds.centerY + hoveredBounds.centerY) / 2,
+      overlaps: false,
+    };
+  }
+
+  let vertical: AltHoverMeasurementLine | null = null;
+  if (selectionBounds.bottom <= hoveredBounds.top) {
+    vertical = {
+      orientation: "vertical",
+      gap: hoveredBounds.top - selectionBounds.bottom,
+      start: selectionBounds.bottom,
+      end: hoveredBounds.top,
+      crossPosition: verticalOverlap
+        ? (Math.max(selectionBounds.left, hoveredBounds.left) +
+            Math.min(selectionBounds.right, hoveredBounds.right)) /
+          2
+        : (selectionBounds.centerX + hoveredBounds.centerX) / 2,
+      overlaps: false,
+    };
+  } else if (hoveredBounds.bottom <= selectionBounds.top) {
+    vertical = {
+      orientation: "vertical",
+      gap: selectionBounds.top - hoveredBounds.bottom,
+      start: hoveredBounds.bottom,
+      end: selectionBounds.top,
+      crossPosition: verticalOverlap
+        ? (Math.max(selectionBounds.left, hoveredBounds.left) +
+            Math.min(selectionBounds.right, hoveredBounds.right)) /
+          2
+        : (selectionBounds.centerX + hoveredBounds.centerX) / 2,
+      overlaps: false,
+    };
+  }
+
+  return { horizontal, vertical };
+}

package/corpus/templates/design/app/components/design/multi-screen/board-surface-html.ts

@@ -0,0 +1,220 @@
+export function hasBoardSurfaceContent(html: string | undefined) {
+  if (!html) return false;
+  const bodyMatch = html.match(/<body\b[^>]*>([\s\S]*?)<\/body>/i);
+  const content = bodyMatch?.[1] ?? html;
+  return content.replace(/<!--[\s\S]*?-->/g, "").trim().length > 0;
+}
+
+const BOARD_SURFACE_RENDER_STYLE = `<style data-agent-native-board-surface-render>html,body{background:transparent!important;background-color:transparent!important;background-image:none!important;}body{margin:0!important;position:relative;overflow:visible;}body>:not([data-agent-native-node-id]):not(style):not(script),body>[data-agent-native-node-id]:not([data-an-primitive]):not([data-agent-native-preserve-styles="true"]):has([data-agent-native-node-id]),body>[data-agent-native-node-id="body"],body>[data-agent-native-node-id="Body"],body>[data-agent-native-layer-name="body"],body>[data-agent-native-layer-name="Body"],body>[data-agent-native-layer-name="<body>"]{background:transparent!important;background-color:transparent!important;background-image:none!important;box-shadow:none!important;}[data-agent-native-board-backdrop-candidate="true"]{display:none!important;pointer-events:none!important;}</style>`;
+export const BOARD_SURFACE_BACKGROUND = "hsl(0 0% 10%)";
+
+const BOARD_SURFACE_BACKDROP_MIN_EDGE_PX = 2400;
+const BOARD_SURFACE_BACKDROP_MIN_AREA_PX = 8_000_000;
+const HTML_VOID_TAGS = new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr",
+]);
+const HTML_TAG_RE = /<!--[\s\S]*?-->|<\/?([a-zA-Z][\w:-]*)([^<>]*?)\/?>/g;
+
+function getHtmlAttributeValue(tag: string, name: string) {
+  const match = tag.match(
+    new RegExp(
+      `\\s${name}\\s*=\\s*(?:"([^"]*)"|'([^']*)'|([^\\s"'=<>]+))`,
+      "i",
+    ),
+  );
+  return match?.[1] ?? match?.[2] ?? match?.[3] ?? "";
+}
+
+function getCssDeclarationValue(style: string, name: string) {
+  const match = style.match(
+    new RegExp(`(?:^|;)\\s*${name}\\s*:\\s*([^;]+)`, "i"),
+  );
+  return match?.[1]?.trim() ?? "";
+}
+
+function getCssPixelValue(style: string, name: string) {
+  const value = getCssDeclarationValue(style, name);
+  const match = value.match(/^(-?\d+(?:\.\d+)?)px$/i);
+  if (!match?.[1]) return null;
+  const parsed = Number(match[1]);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+function parseCssColor(value: string) {
+  const trimmed = value.trim().toLowerCase();
+  if (!trimmed || trimmed === "transparent") return null;
+  const rgb = trimmed.match(
+    /^rgba?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)(?:\s*,\s*(\d+(?:\.\d+)?))?\s*\)$/,
+  );
+  if (rgb?.[1] && rgb[2] && rgb[3]) {
+    const alpha = rgb[4] === undefined ? 1 : Number(rgb[4]);
+    if (alpha <= 0) return null;
+    return [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])] as const;
+  }
+  const hex = trimmed.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+  if (!hex?.[1]) return null;
+  const raw = hex[1];
+  const full =
+    raw.length === 3
+      ? raw
+          .split("")
+          .map((part) => part + part)
+          .join("")
+      : raw;
+  return [
+    Number.parseInt(full.slice(0, 2), 16),
+    Number.parseInt(full.slice(2, 4), 16),
+    Number.parseInt(full.slice(4, 6), 16),
+  ] as const;
+}
+
+function isNeutralBackdropColor(value: string) {
+  const color = parseCssColor(value);
+  if (!color) return false;
+  const max = Math.max(...color);
+  const min = Math.min(...color);
+  return min >= 180 && max - min <= 24;
+}
+
+function isAccidentalBoardBackdropTag(tag: string) {
+  if (
+    getHtmlAttributeValue(tag, "data-agent-native-board-backdrop-candidate")
+  ) {
+    return false;
+  }
+  const primitive = getHtmlAttributeValue(
+    tag,
+    "data-an-primitive",
+  ).toLowerCase();
+  if (primitive !== "rectangle" && primitive !== "rect") return false;
+  const style = getHtmlAttributeValue(tag, "style");
+  if (!style) return false;
+  const width = getCssPixelValue(style, "width");
+  const height = getCssPixelValue(style, "height");
+  if (width === null || height === null) return false;
+  if (
+    width < BOARD_SURFACE_BACKDROP_MIN_EDGE_PX ||
+    height < BOARD_SURFACE_BACKDROP_MIN_EDGE_PX ||
+    width * height < BOARD_SURFACE_BACKDROP_MIN_AREA_PX
+  ) {
+    return false;
+  }
+  const background =
+    getCssDeclarationValue(style, "background-color") ||
+    getCssDeclarationValue(style, "background");
+  return isNeutralBackdropColor(background);
+}
+
+function markAccidentalBoardBackdropCandidates(html: string) {
+  return html.replace(HTML_TAG_RE, (tag: string, tagName?: string) => {
+    if (!tagName || tag.startsWith("</")) return tag;
+    if (!isAccidentalBoardBackdropTag(tag)) return tag;
+    return tag.replace(
+      /\/?>$/,
+      (ending) => ` data-agent-native-board-backdrop-candidate="true"${ending}`,
+    );
+  });
+}
+
+function findLastHtmlStackTagIndex(
+  stack: Array<{ tagName: string; nodeId: string }>,
+  tagName: string,
+) {
+  for (let i = stack.length - 1; i >= 0; i--) {
+    if (stack[i]?.tagName === tagName) return i;
+  }
+  return -1;
+}
+
+function getCurrentLayerParentNodeId(
+  stack: Array<{ tagName: string; nodeId: string }>,
+) {
+  for (let i = stack.length - 1; i >= 0; i--) {
+    const nodeId = stack[i]?.nodeId;
+    if (nodeId) return nodeId;
+  }
+  return "body";
+}
+
+export function getBoardSurfaceRenderContent(html: string) {
+  if (!html) return html;
+  const renderHtml = markAccidentalBoardBackdropCandidates(html);
+  if (renderHtml.includes("data-agent-native-board-surface-render")) {
+    return renderHtml;
+  }
+  if (/<\/head>/i.test(html)) {
+    return renderHtml.replace(
+      /<\/head>/i,
+      `${BOARD_SURFACE_RENDER_STYLE}</head>`,
+    );
+  }
+  if (/<body\b/i.test(html)) {
+    return renderHtml.replace(/<body\b/i, `${BOARD_SURFACE_RENDER_STYLE}<body`);
+  }
+  return `${BOARD_SURFACE_RENDER_STYLE}${renderHtml}`;
+}
+
+/** Simple djb2-xor string hash, used to build cheap cache keys elsewhere in
+ *  the multi-screen canvas (board content signatures, primitive-parse cache
+ *  keys, etc). */
+export function hashString(s: string): string {
+  let h = 5381;
+  for (let i = 0; i < s.length; i++) {
+    // h = h * 33 ^ charCode  (djb2 xor variant)
+    h = ((h << 5) + h) ^ s.charCodeAt(i);
+    h = h >>> 0; // keep as unsigned 32-bit
+  }
+  return h.toString(16);
+}
+
+export function getBoardContentLayerSignature(html: string) {
+  const layers: string[] = [];
+  const stack: Array<{ tagName: string; nodeId: string }> = [];
+  const childCountsByParent = new Map<string, number>();
+
+  for (const match of html.matchAll(HTML_TAG_RE)) {
+    const token = match[0];
+    const tagName = match[1]?.toLowerCase();
+    if (!tagName) continue;
+
+    if (token.startsWith("</")) {
+      const index = findLastHtmlStackTagIndex(stack, tagName);
+      if (index >= 0) stack.splice(index);
+      continue;
+    }
+
+    const nodeId = getHtmlAttributeValue(token, "data-agent-native-node-id");
+    if (nodeId) {
+      const parentNodeId = getCurrentLayerParentNodeId(stack);
+      const childIndex = childCountsByParent.get(parentNodeId) ?? 0;
+      childCountsByParent.set(parentNodeId, childIndex + 1);
+      layers.push(`${nodeId}<${parentNodeId}#${childIndex}`);
+    }
+
+    const selfClosing = token.endsWith("/>") || HTML_VOID_TAGS.has(tagName);
+    if (!selfClosing) stack.push({ tagName, nodeId });
+  }
+
+  return `${layers.length}:${hashString(layers.join("\n"))}`;
+}
+
+export function getBoardContentKey(args: {
+  boardFileId: string;
+  boardFileContent: string;
+  boardIsActive: boolean;
+}) {
+  return `${args.boardFileId}:surface`;
+}

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

@@ -0,0 +1,35 @@
+// During a zoom gesture the constant-size selection chrome is frozen (we don't
+// re-render); on commit it recomputes to its fixed screen size. These transitions
+// are enabled only for that brief settle, so normal selection, resize, and
+// screen-switch geometry stays pinned to the frame.
+export const CHROME_SETTLE_MS = 150;
+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
+// 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}`;
+
+export function getChromeBorderTransition(chromeSettling: boolean) {
+  return chromeSettling
+    ? CHROME_BORDER_SETTLE_TRANSITION
+    : CHROME_OPACITY_TRANSITION;
+}
+
+export function getSelectionBoxTransition(chromeSettling: boolean) {
+  return chromeSettling ? SELECTION_BOX_SETTLE_TRANSITION : "none";
+}
+
+export function getChromeHandleTransition(chromeSettling: boolean) {
+  return chromeSettling
+    ? CHROME_HANDLE_SETTLE_TRANSITION
+    : CHROME_OPACITY_TRANSITION;
+}
+
+export function getChromeLabelTransition(chromeSettling: boolean) {
+  return chromeSettling
+    ? CHROME_LABEL_SETTLE_TRANSITION
+    : CHROME_OPACITY_TRANSITION;
+}