@hyperframes/studio 0.8.113 → 0.8.115

package/src/components/editor/colorBrowserCanvas.test.ts

@@ -0,0 +1,116 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+const CHROME_147_FILL_STYLE: Record<string, string> = {
+  transparent: "rgba(0, 0, 0, 0)",
+  white: "#ffffff",
+  red: "#ff0000",
+  currentcolor: "#000000",
+  "hsl(210 40% 50%)": "#4d80b3",
+  "rgb(100%, 0%, 0%)": "#ff0000",
+  "hsl(0 100% 50% / 0.001)": "rgba(255, 0, 0, 0)",
+  "oklch(0.7 0.15 200)": "oklch(0.7 0.15 200)",
+  "oklch(0.7 0.15 200 / 0.25)": "oklch(0.7 0.15 200 / 0.25)",
+  "color-mix(in oklab, oklch(0.7 0.15 200), red 50%)": "oklab(0.663983 0.0419629 0.0372782)",
+  "color-mix(in srgb, #ff000000, #0000ffff 50%)": "color(srgb 0 0 1 / 0.5)",
+};
+
+const CHROME_147_RELATIVE_SRGB: Record<string, string> = {
+  currentcolor: "color(srgb 0 0 0)",
+  "hsl(0 100% 50% / 0.001)": "color(srgb 1 0 0 / 0.001)",
+  "oklch(0.7 0.15 200)": "color(srgb -0.316663 0.724435 0.764448)",
+  "oklch(0.7 0.15 200 / 0.25)": "color(srgb -0.316663 0.724435 0.764448 / 0.25)",
+  "color-mix(in oklab, oklch(0.7 0.15 200), red 50%)": "color(srgb 0.698277 0.535308 0.473819)",
+  "color-mix(in srgb, #ff000000, #0000ffff 50%)": "color(srgb 0 0 1 / 0.5)",
+  "color-mix(in srgb, hwb(0 0% 0%), hwb(240 0% 0%) 50%)": "color(srgb 0.5 0 0.5)",
+  "color-mix(in oklab, red, blue 50%)": "color(srgb 0.550402 0.325634 0.636508)",
+  "color-mix(in srgb, red, blue 50%)": "color(srgb 0.5 0 0.5)",
+  "light-dark(white, red)": "color(srgb 1 1 1)",
+};
+
+async function loadColorModulesWithChromeCanvas() {
+  let fillStyle = "#000000";
+  const context = {
+    get fillStyle() {
+      return fillStyle;
+    },
+    set fillStyle(next: string) {
+      const relative = /^color\(from (.+) srgb r g b \/ alpha\)$/.exec(next);
+      fillStyle =
+        (relative ? CHROME_147_RELATIVE_SRGB[relative[1]] : CHROME_147_FILL_STYLE[next]) ??
+        fillStyle;
+    },
+  };
+  vi.stubGlobal("CSS", { supports: () => true });
+  vi.stubGlobal("document", { createElement: () => ({ getContext: () => context }) });
+  vi.resetModules();
+  return { ...(await import("./colorValue")), ...(await import("./gradientValue")) };
+}
+
+describe("parseCssColor with a browser canvas", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.resetModules();
+  });
+
+  it.each([
+    ["red", { red: 255, green: 0, blue: 0, alpha: 1 }],
+    ["hsl(210 40% 50%)", { red: 77, green: 128, blue: 179, alpha: 1 }],
+    ["rgb(100%, 0%, 0%)", { red: 255, green: 0, blue: 0, alpha: 1 }],
+    ["oklch(0.7 0.15 200)", { red: 0, green: 185, blue: 195, alpha: 1 }],
+    ["oklch(0.7 0.15 200 / 0.25)", { red: 0, green: 185, blue: 195, alpha: 0.25 }],
+    ["hsl(0 100% 50% / 0.001)", { red: 255, green: 0, blue: 0, alpha: 0.001 }],
+    ["inherit", null],
+    ["currentcolor", null],
+    ["light-dark(white, red)", null],
+  ])("resolves %s through the canvas, or null if it must not", async (input, expected) => {
+    const { parseCssColor: parseFresh } = await loadColorModulesWithChromeCanvas();
+    expect(parseFresh(input)).toEqual(expected);
+  });
+});
+
+describe("insertGradientStop with a browser canvas", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.resetModules();
+  });
+
+  it.each([
+    ["oklch(0.7 0.15 200)", "red", "#B28979"],
+    ["#ff000000", "#0000ffff", "rgba(0, 0, 255, 0.5)"],
+  ])("gives %s to %s the midpoint the browser paints", async (left, right, expected) => {
+    const { parseGradient: parse, insertGradientStop: insert } =
+      await loadColorModulesWithChromeCanvas();
+    const model = parse(`linear-gradient(90deg, ${left} 0%, ${right} 100%)`);
+    expect(model).not.toBeNull();
+    expect(insert(model!, 50).stops[1].color).toBe(expected);
+  });
+
+  it.each([
+    ["hwb stops mix in sRGB like rgb()", "hwb(0 0% 0%) 0%, hwb(240 0% 0%) 100%", 50, "#800080"],
+    [
+      "one modern stop moves every interval to Oklab",
+      "red 0%, blue 50%, oklch(0.7 0.15 200) 100%",
+      25,
+      "#8C53A2",
+    ],
+    [
+      "an unresolved var() stop leaves a legacy interval in sRGB",
+      "red 0%, blue 50%, var(--third, red) 100%",
+      25,
+      "#800080",
+    ],
+    [
+      "a modern stop with a var() inside still moves every interval to Oklab",
+      "red 0%, blue 50%, oklch(var(--l, 0.7) 0.1 200) 100%",
+      25,
+      "#8C53A2",
+    ],
+  ])("%s", async (_case, stops, position, expected) => {
+    const { parseGradient: parse, insertGradientStop: insert } =
+      await loadColorModulesWithChromeCanvas();
+    const model = parse(`linear-gradient(90deg, ${stops})`);
+    expect(model).not.toBeNull();
+    const inserted = insert(model!, position).stops.find((stop) => stop.position === position);
+    expect(inserted?.color).toBe(expected);
+  });
+});

package/src/components/editor/colorValue.test.ts

@@ -28,6 +28,22 @@ describe("parseCssColor", () => {
     });
   });
 
+  it.each([
+    ["#0f172acc", { red: 15, green: 23, blue: 42, alpha: 0.8 }],
+    ["#f008", { red: 255, green: 0, blue: 0, alpha: 136 / 255 }],
+    ["rgb(255 0 0 / 50%)", { red: 255, green: 0, blue: 0, alpha: 0.5 }],
+    ["rgb(100% 0% 0% / 0.001)", { red: 255, green: 0, blue: 0, alpha: 0.001 }],
+  ])("parses %s without a browser", (input, expected) => {
+    expect(parseCssColor(input)).toEqual(expected);
+  });
+
+  it.each(["", "#12", "notacolor", "currentcolor", "none", "rgb(1..2, 3, 4)", "rgb(1. 2 3)"])(
+    "rejects %s without a browser",
+    (input) => {
+      expect(parseCssColor(input)).toBeNull();
+    },
+  );
+
   it("parses transparent", () => {
     expect(parseCssColor("transparent")).toEqual({
       red: 0,

package/src/components/editor/colorValue.ts

@@ -29,49 +29,125 @@ function formatAlpha(value: number): string {
   return `${roundToCenti(clampAlpha(value))}`;
 }
 
-export function parseCssColor(value: string): ParsedColor | null {
+function parseComponent(value: string, scale: number): number {
+  return value.endsWith("%") ? (Number(value.slice(0, -1)) * scale) / 100 : Number(value);
+}
+
+const NUMBER = String.raw`(?:\d+(?:\.\d+)?|\.\d+)`;
+const COMMA_RGB = new RegExp(
+  String.raw`^rgba?\(\s*(${NUMBER})\s*,\s*(${NUMBER})\s*,\s*(${NUMBER})(?:\s*,\s*(${NUMBER}))?\s*\)$`,
+);
+const SPACE_RGB = new RegExp(
+  String.raw`^rgba?\(\s*(${NUMBER}%?)\s+(${NUMBER}%?)\s+(${NUMBER}%?)(?:\s*\/\s*(${NUMBER}%?))?\s*\)$`,
+);
+
+function parseSerializedColor(value: string): ParsedColor | null {
   const trimmed = value.trim().toLowerCase();
   if (!trimmed) return null;
   if (trimmed === "transparent") {
     return { red: 0, green: 0, blue: 0, alpha: 0 };
   }
 
-  const shortHex = trimmed.match(/^#([0-9a-f]{3})$/i);
-  if (shortHex) {
-    const [r, g, b] = shortHex[1].split("");
-    return {
-      red: Number.parseInt(r + r, 16),
-      green: Number.parseInt(g + g, 16),
-      blue: Number.parseInt(b + b, 16),
-      alpha: 1,
-    };
-  }
-
-  const hex = trimmed.match(/^#([0-9a-f]{6})$/i);
+  const hex = trimmed.match(/^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/);
   if (hex) {
+    const digits = hex[1].length <= 4 ? [...hex[1]].map((digit) => digit + digit).join("") : hex[1];
     return {
-      red: Number.parseInt(hex[1].slice(0, 2), 16),
-      green: Number.parseInt(hex[1].slice(2, 4), 16),
-      blue: Number.parseInt(hex[1].slice(4, 6), 16),
-      alpha: 1,
+      red: Number.parseInt(digits.slice(0, 2), 16),
+      green: Number.parseInt(digits.slice(2, 4), 16),
+      blue: Number.parseInt(digits.slice(4, 6), 16),
+      alpha: digits.length === 8 ? Number.parseInt(digits.slice(6, 8), 16) / 255 : 1,
     };
   }
 
-  const rgba = trimmed.match(
-    /^rgba?\(\s*([0-9.]+)\s*,\s*([0-9.]+)\s*,\s*([0-9.]+)(?:\s*,\s*([0-9.]+))?\s*\)$/i,
-  );
+  const rgba = trimmed.match(COMMA_RGB) ?? trimmed.match(SPACE_RGB);
   if (rgba) {
     return {
-      red: clampChannel(Number.parseFloat(rgba[1])),
-      green: clampChannel(Number.parseFloat(rgba[2])),
-      blue: clampChannel(Number.parseFloat(rgba[3])),
-      alpha: clampAlpha(rgba[4] != null ? Number.parseFloat(rgba[4]) : 1),
+      red: clampChannel(parseComponent(rgba[1], 255)),
+      green: clampChannel(parseComponent(rgba[2], 255)),
+      blue: clampChannel(parseComponent(rgba[3], 255)),
+      alpha: clampAlpha(rgba[4] != null ? parseComponent(rgba[4], 1) : 1),
     };
   }
 
   return null;
 }
 
+let colorContext: CanvasRenderingContext2D | null = null;
+
+function canResolveInBrowser(value: string): boolean {
+  return (
+    typeof document !== "undefined" &&
+    typeof CSS !== "undefined" &&
+    CSS.supports("color", value) &&
+    !/\bcurrentcolor\b|\bvar\s*\(|\blight-dark\s*\(/i.test(value)
+  );
+}
+
+function parseBrowserColor(value: string): ParsedColor | null {
+  try {
+    if (!canResolveInBrowser(value)) return null;
+    colorContext ??= document.createElement("canvas").getContext("2d");
+    if (!colorContext) return null;
+    return (
+      parseCanvasColor(
+        colorContext,
+        `color(from ${value} srgb r g b / alpha)`,
+        parseSrgbSerialization,
+      ) ?? parseCanvasColor(colorContext, value, parseSerializedColor)
+    );
+  } catch {
+    return null;
+  }
+}
+
+function parseCanvasColor(
+  context: CanvasRenderingContext2D,
+  value: string,
+  parse: (serialized: string) => ParsedColor | null,
+): ParsedColor | null {
+  const serialized = readCanvasColor(context, value);
+  return serialized === null ? null : parse(serialized);
+}
+
+function readCanvasColor(context: CanvasRenderingContext2D, value: string): string | null {
+  context.fillStyle = "transparent";
+  context.fillStyle = value;
+  const first = context.fillStyle;
+  context.fillStyle = "white";
+  context.fillStyle = value;
+  return typeof first === "string" && first === context.fillStyle ? first : null;
+}
+
+function parseSrgbSerialization(serialized: string): ParsedColor | null {
+  const match = serialized.match(/^color\(srgb ([^ ]+) ([^ ]+) ([^ /)]+)(?: \/ ([^)]+))?\)$/);
+  if (!match) return null;
+  const channels = match.slice(1, 4).map(Number);
+  const alpha = match[4] === undefined ? 1 : Number(match[4]);
+  if (!channels.every(Number.isFinite) || !Number.isFinite(alpha)) return null;
+  return {
+    red: clampChannel(channels[0] * 255),
+    green: clampChannel(channels[1] * 255),
+    blue: clampChannel(channels[2] * 255),
+    alpha: clampAlpha(alpha),
+  };
+}
+
+export function parseCssColor(value: string): ParsedColor | null {
+  return parseSerializedColor(value) ?? parseBrowserColor(value.trim());
+}
+
+export function resolvePickerColor(
+  value: string | undefined,
+  element: Element | null,
+  fallback: string,
+): string {
+  const view = element?.ownerDocument.defaultView;
+  const parsed =
+    (value ? parseCssColor(value) : null) ??
+    (element && view ? parseCssColor(view.getComputedStyle(element).color) : null);
+  return parsed ? toHexColor(parsed) : fallback;
+}
+
 export function toColorPickerValue(value: string): string {
   const parsed = parseCssColor(value);
   if (!parsed) return "#000000";

package/src/components/editor/commitPreflightHandles.test.tsx

@@ -287,7 +287,7 @@ describe("handles follow what Studio would commit", () => {
       { x: 0, y: 0 },
       commitList,
       preview,
-      vi.fn(),
+      vi.fn(async () => undefined),
       undefined,
       preflightOnly,
     );
@@ -401,7 +401,7 @@ describe("handles follow what Studio would commit", () => {
       { x: 0, y: 0 },
       [stagger],
       preview,
-      vi.fn(),
+      vi.fn(async () => undefined),
       undefined,
       groupPreflight,
     );

package/src/components/editor/cropResize.test.ts

@@ -93,6 +93,17 @@ describe("crop during a resize", () => {
     Object.assign(window, { __timelines: undefined });
   });
 
+  it("leaves a crop alone when GSAP tweens it by object-of-arrays keyframes", () => {
+    const tweened = sizedElement(300, 200, "inset(0px 60px 0px 0px)");
+    const kf = { clipPath: ["inset(0px 60px 0px 0px)", "inset(0px 120px 0px 0px)"] };
+    const child = { targets: () => [tweened], vars: { keyframes: kf } };
+    Object.assign(window, { __timelines: { main: { getChildren: () => [child] } } });
+    const stage = prepareCropResize(tweened);
+    tweened.style.width = "450px";
+    expect(stage()).toBeNull();
+    Object.assign(window, { __timelines: undefined });
+  });
+
   it("decides before the write, which may add a width tween of its own", () => {
     const el = sizedElement(300, 200, "inset(0px 60px 0px 0px)");
     const stage = prepareCropResize(el);

package/src/components/editor/cropResize.ts

@@ -1,8 +1,8 @@
+import type { DomEditPersistOutcome } from "../../hooks/domEditCommitTypes";
 import type { PatchOperation } from "../../utils/sourcePatcher";
 import type { CommitMutation } from "../../hooks/gsapScriptCommitTypes";
 import type { DomEditSelection } from "./domEditingTypes";
-import { gsapAnimatesProperty } from "./gsapAnimatesProperty";
-import { elementHasNonHoldTween } from "../../hooks/gsapRuntimeKeyframes";
+import { elementHasNonHoldTween, gsapWritesChannels } from "../../hooks/gsapRuntimeKeyframes";
 import { buildInsetClipPathSides, type ParsedInsetClipPathSides } from "./clipPathHelpers";
 import { hasCropInsets, readElementCropInsets } from "./domEditOverlayCrop";
 import { forgetStudioBoxSizeDraftBase, readStudioBoxSizeDraftBase } from "./manualEditsDom";
@@ -21,7 +21,7 @@ type Follows = Record<keyof Box, boolean>;
 
 /** Per axis, whether a crop follows a resize: not when GSAP drives the clip or tweens that axis's size. */
 function cropFollows(element: HTMLElement): Follows {
-  const clip = gsapAnimatesProperty(element, "clipPath");
+  const clip = gsapWritesChannels(element, ["clipPath"]);
   return {
     width: !clip && !elementHasNonHoldTween(element, ["width"]),
     height: !clip && !elementHasNonHoldTween(element, ["height"]),
@@ -95,7 +95,7 @@ type PatchCommit = (
   selection: DomEditSelection,
   patches: PatchOperation[],
   options: { label: string; coalesceKey: string; coalesceMs?: number },
-) => Promise<void>;
+) => Promise<DomEditPersistOutcome | undefined>;
 
 /** Stage the crop and save it under the resize's undo key, taking it back off the element if that fails. */
 export async function saveCropResize(
@@ -103,11 +103,11 @@ export async function saveCropResize(
   selection: DomEditSelection,
   commit: PatchCommit,
   coalesceKey: string,
-): Promise<void> {
+): Promise<DomEditPersistOutcome | undefined> {
   const crop = stage();
   if (!crop) return;
   try {
-    await commit(selection, [crop.patch], {
+    return await commit(selection, [crop.patch], {
       label: "Resize layer",
       coalesceKey,
       coalesceMs: Number.POSITIVE_INFINITY,

package/src/components/editor/domEditingDom.ts

@@ -30,6 +30,10 @@ export function isTextBearingTag(tagName: string): boolean {
   return ["div", "span", "p", "strong", "h1", "h2", "h3", "h4", "h5", "h6"].includes(tagName);
 }
 
+export function isEditableTextLeaf(el: HTMLElement): boolean {
+  return isTextBearingTag(el.tagName.toLowerCase()) && el.children.length === 0;
+}
+
 /** Does this node render AT ALL, ignoring what it inherits? Sole owner of the
  *  rule; the walk below only decides which nodes to ask it about. */
 function elementRendersItself(win: Window, el: HTMLElement): boolean {

package/src/components/editor/domEditingLayers.ts

@@ -23,8 +23,8 @@ import {
   getInlineStyles,
   getSelectorIndex,
   getSourceFileForElement,
+  isEditableTextLeaf,
   isHtmlElement,
-  isTextBearingTag,
 } from "./domEditingDom";
 import {
   findElementForSelection,
@@ -35,10 +35,6 @@ import { isCompositionRootLayer } from "./domEditingRootLayer";
 import { withSelectorIndexPass } from "../../utils/sourceScopedSelectorIndex";
 import { type DomEditLayerWalkCache, readDomEditLayerWalkEntry } from "./domEditLayerWalkCache";
 
-export function isEditableTextLeaf(el: HTMLElement): boolean {
-  return isTextBearingTag(el.tagName.toLowerCase()) && el.children.length === 0;
-}
-
 function sameTagChildIndex(el: HTMLElement): number {
   let index = 0;
   let sibling = el.previousElementSibling;

package/src/components/editor/gradientValue.ts

@@ -1,4 +1,5 @@
 import { roundToCenti } from "../../utils/rounding";
+import { parseCssColor, type ParsedColor } from "./colorValue";
 
 export type GradientKind = "linear" | "radial" | "conic";
 
@@ -384,20 +385,42 @@ function interpolateGradientStopColor(model: GradientModel, position: number): s
 
   const leftColor = left.color;
   const rightColor = right.color;
-  const leftParsed = leftColor ? parseColorString(leftColor) : null;
-  const rightParsed = rightColor ? parseColorString(rightColor) : null;
+  const ratio = (clampedPosition - left.position) / Math.max(1, right.position - left.position);
+  const mixed = parseCssColor(mixLikeTheGradient(sortedStops, leftColor, rightColor, ratio));
+  if (mixed) return formatStopColor(mixed);
+
+  const leftParsed = leftColor ? parseCssColor(leftColor) : null;
+  const rightParsed = rightColor ? parseCssColor(rightColor) : null;
   if (!leftParsed || !rightParsed) return left.color;
 
-  const ratio = (clampedPosition - left.position) / Math.max(1, right.position - left.position);
   const red = blendChannel(leftParsed.red, rightParsed.red, ratio);
   const green = blendChannel(leftParsed.green, rightParsed.green, ratio);
   const blue = blendChannel(leftParsed.blue, rightParsed.blue, ratio);
-  const alpha = round(leftParsed.alpha + (rightParsed.alpha - leftParsed.alpha) * ratio);
+  const alpha = leftParsed.alpha + (rightParsed.alpha - leftParsed.alpha) * ratio;
+  return formatStopColor({ red, green, blue, alpha });
+}
+
+const LEGACY_COLOR = /^(?:#|(?:rgba?|hsla?|hwb)\(|[a-z]+$)/i;
 
+const isLegacy = (color: string) => LEGACY_COLOR.test(color.trim());
+const isModern = (color: string) => !isLegacy(color) && !/^var\(/i.test(color.trim());
+
+function mixLikeTheGradient(
+  stops: GradientStop[],
+  left: string,
+  right: string,
+  ratio: number,
+): string {
+  const space = stops.some((stop) => isModern(stop.color)) ? "oklab" : "srgb";
+  return `color-mix(in ${space}, ${left}, ${right} ${round(ratio * 100)}%)`;
+}
+
+function formatStopColor(color: ParsedColor): string {
+  const { red, green, blue } = color;
+  const alpha = round(color.alpha);
   if (alpha >= 1) {
     return `#${formatHex(red)}${formatHex(green)}${formatHex(blue)}`.toUpperCase();
   }
-
   return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
 }
 
@@ -412,34 +435,3 @@ export function insertGradientStop(model: GradientModel, position: number): Grad
     stops: nextStops,
   };
 }
-
-function parseColorString(
-  value: string,
-): { red: number; green: number; blue: number; alpha: number } | null {
-  const trimmed = value.trim().toLowerCase();
-  if (trimmed === "transparent") {
-    return { red: 0, green: 0, blue: 0, alpha: 0 };
-  }
-
-  const hex = trimmed.match(/^#([0-9a-f]{6})$/i);
-  if (hex) {
-    return {
-      red: Number.parseInt(hex[1].slice(0, 2), 16),
-      green: Number.parseInt(hex[1].slice(2, 4), 16),
-      blue: Number.parseInt(hex[1].slice(4, 6), 16),
-      alpha: 1,
-    };
-  }
-
-  const rgba = trimmed.match(
-    /^rgba?\(\s*([0-9.]+)\s*,\s*([0-9.]+)\s*,\s*([0-9.]+)(?:\s*,\s*([0-9.]+))?\s*\)$/i,
-  );
-  if (!rgba) return null;
-
-  return {
-    red: Number.parseFloat(rgba[1]),
-    green: Number.parseFloat(rgba[2]),
-    blue: Number.parseFloat(rgba[3]),
-    alpha: rgba[4] != null ? Number.parseFloat(rgba[4]) : 1,
-  };
-}

package/src/components/editor/gsapAnimatesProperty.ts

@@ -1,56 +1,2 @@
 export const gsapRendersTransform = (el: Element) =>
   !!(el as { _gsap?: { renderTransform?: unknown } })._gsap?.renderTransform;
-
-/**
- * Checks whether GSAP actively animates one or more CSS/GSAP properties on
- * the given element by inspecting all registered `__timelines`.
- */
-// fallow-ignore-next-line complexity
-export function gsapAnimatesProperty(el: HTMLElement, ...props: string[]): boolean {
-  const win = el.ownerDocument.defaultView as
-    | (Window & {
-        __timelines?: Record<
-          string,
-          {
-            getChildren?: (
-              deep: boolean,
-            ) => Array<{ targets?: () => Element[]; vars?: Record<string, unknown> }>;
-          }
-        >;
-      })
-    | null;
-  if (!win?.__timelines) return false;
-  const propSet = new Set(props);
-  for (const tl of Object.values(win.__timelines)) {
-    if (!tl?.getChildren) continue;
-    try {
-      for (const child of tl.getChildren(true)) {
-        if (!child.targets || !child.vars) continue;
-        let targetsEl = false;
-        for (const t of child.targets()) {
-          if (t === el || (el.id && t.id === el.id)) {
-            targetsEl = true;
-            break;
-          }
-        }
-        if (!targetsEl) continue;
-        const vars = child.vars;
-        for (const p of propSet) {
-          if (p in vars) return true;
-        }
-        if (vars.keyframes && typeof vars.keyframes === "object") {
-          for (const kfVal of Object.values(vars.keyframes as Record<string, unknown>)) {
-            if (kfVal && typeof kfVal === "object") {
-              for (const p of propSet) {
-                if (p in (kfVal as Record<string, unknown>)) return true;
-              }
-            }
-          }
-        }
-      }
-    } catch {
-      /* */
-    }
-  }
-  return false;
-}

package/src/components/editor/inlineTextStyleRange.test.ts

@@ -2,7 +2,11 @@
 
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { applyInlineStyle } from "./inlineTextStyleRange";
-import { readInlineStyle, readInlineStyleSpread } from "./inlineTextStyleRead";
+import {
+  readFirstPaintedElement,
+  readInlineStyle,
+  readInlineStyleSpread,
+} from "./inlineTextStyleRead";
 
 afterEach(() => {
   vi.restoreAllMocks();
@@ -741,3 +745,29 @@ describe("readInlineStyleSpread", () => {
     expect(readInlineStyleSpread(rangeOver(host, 0, 5), "color")).toEqual([]);
   });
 });
+
+describe("readFirstPaintedElement", () => {
+  it("names the span that paints the text when the selection starts on its parent", () => {
+    const host = mount('<span style="color: red">Hello</span>');
+    const range = document.createRange();
+    range.selectNodeContents(host);
+
+    expect(readFirstPaintedElement(range, "color")).toBe(host.querySelector("span"));
+  });
+
+  it("skips a leading space, which paints nothing", () => {
+    const host = mount(' <span style="color: red">Hello</span>');
+
+    expect(readFirstPaintedElement(rangeOver(host, 0, 6), "color")).toBe(
+      host.querySelector("span"),
+    );
+  });
+
+  it("names the element of the colour the swatch shows, past text with no colour of its own", () => {
+    const host = mount('<span style="color: red"> </span>x<span style="color: lime">y</span>');
+    const range = rangeOver(host, 0, 3);
+
+    expect(readInlineStyleSpread(range, "color")).toEqual(["lime"]);
+    expect(readFirstPaintedElement(range, "color")).toBe(host.querySelectorAll("span")[1]);
+  });
+});

package/src/components/editor/inlineTextStyleRange.ts

@@ -49,6 +49,7 @@ interface StyledRun {
    * identity to lose, and merges with its neighbour exactly as before.
    */
   identity: string;
+  painter?: Element | null;
 }
 
 export type InlineStyleDelta = Record<string, string | null>;
@@ -185,6 +186,7 @@ function holdsBothEnds(host: Element, range: Range): boolean {
 export interface InlineStyleChar {
   char: string;
   style: Readonly<Record<string, string>>;
+  painter: Element | null;
 }
 
 /** Every character the range covers with its style, or null when it covers none. */
@@ -197,7 +199,7 @@ export function readCoveredInlineStyleChars(range: Range): readonly InlineStyleC
   const collapsed = start === end;
   const covered = charRuns(readRuns(host))
     .slice(collapsed ? Math.max(0, start - 1) : start, collapsed ? Math.max(1, start) : end)
-    .map((entry) => ({ char: entry.char, style: entry.style }));
+    .map((entry) => ({ char: entry.char, style: entry.style, painter: entry.painter ?? null }));
   return covered.length > 0 ? covered : null;
 }
 
@@ -244,7 +246,7 @@ function visitRunFrame(frame: RunWalkFrame, runs: StyledRun[]): RunWalkFrame[] {
   const { node, inherited, origin } = frame;
   if (node.nodeType === 3) {
     const text = node.textContent ?? "";
-    if (text) runs.push(styledRun(text, inherited, origin));
+    if (text) runs.push({ ...styledRun(text, inherited, origin), painter: node.parentElement });
     return [];
   }
   if (!isStyleElement(node)) return [];
@@ -312,6 +314,7 @@ function charRuns(runs: StyledRun[]): Array<Omit<StyledRun, "text"> & { char: st
         style: run.style,
         origin: run.origin,
         identity: run.identity,
+        painter: run.painter,
       });
     }
   }

package/src/components/editor/inlineTextStyleRead.ts

@@ -45,3 +45,12 @@ export function readInlineStyleSpread(range: Range, property: string): string[]
   }
   return spread;
 }
+
+export function readFirstPaintedElement(range: Range, property: string): Element | null {
+  const covered = readCoveredInlineStyleChars(range);
+  if (!covered) return null;
+  const painted = covered.filter(({ char }) => char.trim());
+  const owner =
+    painted.find(({ style }) => style[property] !== undefined) ?? painted[0] ?? covered[0];
+  return owner?.painter ?? null;
+}

package/src/components/editor/manualEdits.ts

@@ -10,6 +10,7 @@ export {
 } from "./manualEditsTypes";
 
 export {
+  mergeFileChangeAffectedCompositions,
   readFileChangeAffectedCompositions,
   readFileChangeAffectsPreview,
   readFileChangeField,

package/src/components/editor/manualEditsDom.ts

@@ -32,7 +32,7 @@ import {
   STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR,
   STUDIO_ROTATION_TRANSFORM_ORIGIN,
 } from "./manualEditsTypes";
-import { gsapAnimatesProperty } from "./gsapAnimatesProperty";
+import { gsapWritesChannels } from "../../hooks/gsapRuntimeKeyframes";
 import { splitTopLevelWhitespace } from "./manualEditsStyleHelpers";
 import { roundTo3, roundToLayoutPx } from "../../utils/rounding";
 import { BOX_SIZE_STYLE_PROPS } from "./manualEditsDomPatches";
@@ -317,7 +317,7 @@ function applyStudioPathOffsetViaGsap(
   element: HTMLElement,
   offset: { x: number; y: number },
 ): boolean {
-  if (!gsapAnimatesProperty(element, "x", "y")) return false;
+  if (!gsapWritesChannels(element, ["x", "y"])) return false;
   element.style.setProperty("translate", "none");
   const win = element.ownerDocument.defaultView as
     | (Window & {