@hyperframes/studio 0.8.51 → 0.8.53-desktop.0

package/src/player/store/previewIframeStore.test.tsx

@@ -0,0 +1,29 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, it } from "vitest";
+import { useOwnPreviewIframe, usePreviewIframeStore } from "./previewIframeStore";
+
+Reflect.set(globalThis, "IS_REACT_ACT_ENVIRONMENT", true);
+
+it("clears the store on owner unmount so a remount starts from null", () => {
+  const seen: Array<HTMLIFrameElement | null> = [];
+  const Owner = () => {
+    seen.push(useOwnPreviewIframe());
+    return null;
+  };
+  const iframe = document.createElement("iframe");
+  const first = createRoot(document.createElement("div"));
+  act(() => first.render(<Owner />));
+  act(() => usePreviewIframeStore.getState().setIframe(iframe));
+  expect(seen.at(-1)).toBe(iframe);
+
+  act(() => first.unmount());
+  expect(usePreviewIframeStore.getState().iframe).toBeNull();
+
+  seen.length = 0;
+  const second = createRoot(document.createElement("div"));
+  act(() => second.render(<Owner />));
+  expect(seen).toEqual([null]);
+  act(() => second.unmount());
+});

package/src/player/store/previewIframeStore.ts

@@ -0,0 +1,25 @@
+import { create } from "zustand";
+import { useMountEffect } from "../../hooks/useMountEffect";
+
+interface PreviewIframeState {
+  iframe: HTMLIFrameElement | null;
+  setIframe: (iframe: HTMLIFrameElement | null) => void;
+}
+
+/** The one owner of "the live preview iframe element"; a promoted reload replaces it. */
+export const usePreviewIframeStore = create<PreviewIframeState>((set) => ({
+  iframe: null,
+  // Return the same state reference on a no-op set so zustand skips the
+  // notify (Object.is check in setState) instead of merging a new object
+  // every time a caller re-pushes the current value.
+  setIframe: (iframe) => set((state) => (Object.is(state.iframe, iframe) ? state : { iframe })),
+}));
+
+/** Subscribe an effect to the live iframe by listing the result in its dependencies. */
+export const useLivePreviewIframe = () => usePreviewIframeStore((s) => s.iframe);
+
+/** The owner's hook: reads the live iframe and clears it on unmount so a remount starts from null. */
+export function useOwnPreviewIframe() {
+  useMountEffect(() => () => usePreviewIframeStore.getState().setIframe(null));
+  return useLivePreviewIframe();
+}

package/src/renderQueueExports.test.tsx

@@ -0,0 +1,58 @@
+// @vitest-environment happy-dom
+// Imports the render queue the way a host app does: by package name, through the declared exports.
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { describe, expect, it, vi } from "vitest";
+import {
+  RenderQueue,
+  getPersistedRenderSettings,
+  persistRenderSettings,
+  useRenderQueue,
+  type FfmpegStatus,
+  type RenderJob,
+} from "@hyperframes/studio";
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+describe("render queue package exports", () => {
+  it("exposes the hook and settings helpers", () => {
+    expect(typeof useRenderQueue).toBe("function");
+    persistRenderSettings("webm", "high", 30);
+    expect(getPersistedRenderSettings()).toMatchObject({
+      format: "webm",
+      quality: "high",
+      fps: 30,
+    });
+  });
+
+  it("mounts RenderQueue with a host-supplied job", async () => {
+    const job: RenderJob = {
+      id: "j1",
+      status: "complete",
+      progress: 100,
+      filename: "host-render.mp4",
+      createdAt: 0,
+    };
+    const ffmpeg: FfmpegStatus = { ok: true };
+    const el = document.createElement("div");
+    document.body.append(el);
+    const root = createRoot(el);
+    await act(async () => {
+      root.render(
+        <RenderQueue
+          jobs={[job]}
+          projectId="p"
+          onDelete={vi.fn()}
+          onClearCompleted={vi.fn()}
+          onStartRender={vi.fn()}
+          isRendering={false}
+          ffmpeg={ffmpeg}
+          ffmpegChecking={false}
+          onRecheckFfmpeg={vi.fn()}
+        />,
+      );
+    });
+    expect(el.textContent).toContain("host-render.mp4");
+    await act(async () => root.unmount());
+  });
+});

package/src/styles/classCandidates.test.ts

@@ -0,0 +1,105 @@
+import { describe, expect, it } from "vitest";
+import { extractClassCandidates } from "./classCandidates";
+
+function bases(source: string): string[] {
+  return extractClassCandidates(source)
+    .map((candidate) => candidate.base)
+    .sort();
+}
+
+describe("extractClassCandidates", () => {
+  it("reads a plain className attribute", () => {
+    expect(bases(`<div className="text-center border-dashed" />`)).toEqual([
+      "border-dashed",
+      "text-center",
+    ]);
+  });
+
+  it("reads every string a class-building call is given", () => {
+    const source = `<div className={cn("flex", open && "bg-surface", { "text-accent": on })} />`;
+
+    expect(bases(source)).toEqual(["bg-surface", "flex", "text-accent"]);
+  });
+
+  it("reads a class map that never touches a className literal", () => {
+    // The shape Studio's primitives use: the utility only reaches markup
+    // through a lookup, so an attribute-only reader would miss it entirely.
+    const source = `const sizeStyles: Record<ButtonSize, string> = {
+      sm: "h-7 px-2.5 rounded-button",
+    };`;
+
+    expect(bases(source)).toEqual(["h-7", "px-2.5", "rounded-button"]);
+  });
+
+  it("reads a class map whose name says nothing about classes", () => {
+    // The defect this replaced: candidate-ness was decided by the binding's
+    // name, so the same classes were gated in `sizeStyles` and invisible in
+    // `buttonSizes`. What makes them classes is where they are used.
+    const source = `const fooSizes = { md: "h-ctl rounded-hologram" };
+      const Foo = ({ size }) => <span className={cn(fooSizes[size])} />;`;
+
+    expect(bases(source)).toEqual(["h-ctl", "rounded-hologram"]);
+  });
+
+  it("follows an identifier that contains a dollar sign", () => {
+    const source = `const $cls = "flex-none";\nconst a = <div className={$cls} />;`;
+
+    expect(bases(source)).toEqual(["flex-none"]);
+  });
+
+  it("does not read a lookup key's default value as a class", () => {
+    // `variant` is the key, not the class list, so the default it falls back
+    // to is a map entry name and never reaches markup.
+    const source = `const map = { ghost: "bg-transparent" };
+      const Foo = ({ variant = "ghost" }) => <span className={map[variant]} />;`;
+
+    expect(bases(source)).toEqual(["bg-transparent"]);
+  });
+
+  it("leaves a lookup table alone when nothing uses it as a class", () => {
+    const source = `const labels = { md: "Medium size" };
+      const Foo = () => <span title={labels.md} />;`;
+
+    expect(bases(source)).toEqual([]);
+  });
+
+  it("drops the template chunk that touches an interpolation", () => {
+    expect(bases("<div className={`w-${i} flex`} />")).toEqual(["flex"]);
+  });
+
+  it("keeps a chunk that whitespace separates from the interpolation", () => {
+    expect(bases("<div className={`${base} flex `} />")).toEqual(["flex"]);
+  });
+
+  it("strips variant prefixes, including bracketed ones", () => {
+    const source = `<div className="hover:bg-surface/50 md:group-data-[open]:text-accent" />`;
+
+    expect(bases(source)).toEqual(["bg-surface/50", "text-accent"]);
+  });
+
+  it("flags bracketed arbitrary values so the sweep can count them", () => {
+    const found = extractClassCandidates(`<div className="text-[11px] text-center" />`);
+
+    expect(found.filter((candidate) => candidate.arbitrary).map((c) => c.raw)).toEqual([
+      "text-[11px]",
+    ]);
+  });
+
+  it("ignores strings that are not class lists", () => {
+    const source = `const styles = getComputedStyle(el);
+      const label = "Export video";
+      log("failed to open the project file");`;
+
+    expect(bases(source)).toEqual([]);
+  });
+
+  it("does not read past the end of a class region", () => {
+    const source = `<div className="flex" title="Export video" />`;
+
+    expect(bases(source)).toEqual(["flex"]);
+  });
+
+  it("survives an unterminated region without hanging", () => {
+    expect(bases(`<div className={cn("flex",`)).toEqual(["flex"]);
+  });
+});

package/src/styles/classCandidates.ts

@@ -0,0 +1,281 @@
+// Pulls Tailwind class candidates out of a TS/TSX file: only strings unambiguously used as class lists
+// (className/class attributes, cn/clsx/cva-style calls, `*class` properties, identifiers those use,
+// `*Styles`/`*Classes` bindings). Bare strings are ignored so prose and paths never become "classes".
+// Pure: text in, candidates out.
+
+import { escapeRegex } from "../utils/sourcePatcher";
+
+/** A class candidate and where it came from. */
+export interface ClassCandidate {
+  /** The utility with its variant prefixes removed (`hover:bg-x` -> `bg-x`). */
+  readonly base: string;
+  /** The token exactly as it was written, for the failure message. */
+  readonly raw: string;
+  /** True when the utility carries a bracketed arbitrary value. */
+  readonly arbitrary: boolean;
+}
+
+const OPEN: Record<string, string> = { "{": "}", "(": ")", "[": "]" };
+
+// Index of the last char of the non-code span (string, template, line or block comment) starting at
+// `i`, else -1. Known limit: a regex literal containing a quote reads as a string; the cost is a
+// spurious candidate, which the gate reports.
+function endOfSpan(text: string, i: number): number {
+  const ch = text[i];
+  if (ch === '"' || ch === "'" || ch === "`") {
+    return Math.min(endOfString(text, i), text.length - 1);
+  }
+  if (ch !== "/") return -1;
+  if (text[i + 1] === "/") {
+    const end = text.indexOf("\n", i);
+    return end === -1 ? text.length - 1 : end - 1;
+  }
+  if (text[i + 1] === "*") {
+    const end = text.indexOf("*/", i + 2);
+    return end === -1 ? text.length - 1 : end + 1;
+  }
+  return -1;
+}
+
+// Index just past the region starting at `start` (an opening bracket), skipping strings, templates
+// and comments; `text.length` when it never closes.
+function endOfRegion(text: string, start: number): number {
+  const stack: string[] = [];
+  for (let i = start; i < text.length; i += 1) {
+    const span = endOfSpan(text, i);
+    if (span >= i) {
+      i = span;
+      continue;
+    }
+    const ch = text[i];
+    if (OPEN[ch]) {
+      stack.push(OPEN[ch]);
+    } else if (stack.length > 0 && ch === stack[stack.length - 1]) {
+      stack.pop();
+      if (stack.length === 0) return i + 1;
+    }
+  }
+  return text.length;
+}
+
+/** Index of the closing quote of the string that opens at `start`. */
+function endOfString(text: string, start: number): number {
+  const quote = text[start];
+  for (let i = start + 1; i < text.length; i += 1) {
+    if (text[i] === "\\") {
+      i += 1;
+      continue;
+    }
+    if (text[i] === quote) return i;
+    if (quote === "`" && text[i] === "$" && text[i + 1] === "{") {
+      i = endOfRegion(text, i + 1) - 1;
+    }
+  }
+  return text.length;
+}
+
+// Splits a template literal body into safe chunks. A chunk touching an interpolation is dropped at
+// that edge (`w-${size}` claims no class `w-`) unless whitespace separates it from the hole.
+function templateChunks(body: string): string[] {
+  const chunks: string[] = [];
+  let cursor = 0;
+  let precededByHole = false;
+  while (cursor <= body.length) {
+    const hole = body.indexOf("${", cursor);
+    const end = hole === -1 ? body.length : hole;
+    let chunk = body.slice(cursor, end);
+    if (precededByHole && !/^\s/.test(chunk)) chunk = chunk.replace(/^\S+/, "");
+    if (hole !== -1 && !/\s$/.test(chunk)) chunk = chunk.replace(/\S+$/, "");
+    chunks.push(chunk);
+    if (hole === -1) break;
+    cursor = endOfRegion(body, hole + 1);
+    precededByHole = true;
+  }
+  return chunks;
+}
+
+// A same-length copy with comment and string bodies blanked, so offsets line up. Anchors match
+// against it to keep out prose (one apostrophe in a comment opens a string that swallows the rest)
+// and generated code (`captions/generator.ts` writes `x.className = 'word'` into a string).
+function maskLiterals(text: string): string {
+  let out = "";
+  for (let i = 0; i < text.length; i += 1) {
+    const span = endOfSpan(text, i);
+    if (span < i) {
+      out += text[i];
+      continue;
+    }
+    // A comment goes entirely, newlines kept so line numbers survive. A string
+    // keeps its quotes, so the region scan still finds where it ends.
+    const body = " ".repeat(span - i - 1);
+    out +=
+      text[i] === "/"
+        ? text.slice(i, span + 1).replace(/[^\n]/g, " ")
+        : text[i] + body + text[span];
+    i = span;
+  }
+  return out;
+}
+
+// `activeTool === "razor" ? a : b` inside a `className=` region: the operand
+// of a comparison is a value being tested, never a class list.
+const COMPARISON = /(?:[=!]==?|\bcase)\s*$/;
+// A class list never carries a declaration, so `position: absolute; ...` in a
+// constant called `visualStyles` is a stylesheet, not classes.
+const CSS_TEXT = /[a-z-]+\s*:\s*[^;]+;/;
+// The calls whose arguments are class lists.
+const CLASS_BUILDER = /^(?:cn|clsx|classnames|classNames|twMerge|twJoin|cva|tv)$/;
+
+// Written with escapes, not literal quotes: `maskLiterals` reads a quote in
+// a regular-expression literal as the start of a string, and this file is
+// one of the files the gate scans.
+const CLOSE = /[)\]}]/;
+const QUOTE = /[\u0022\u0027\u0060]/;
+
+/**
+ * A string is a class list unless it is being compared against or is a sheet
+ * of CSS text.
+ */
+function isClassList(mask: string, start: number, i: number, body: string): boolean {
+  return !COMPARISON.test(mask.slice(Math.max(start, i - 8), i)) && !CSS_TEXT.test(body);
+}
+
+/**
+ * Does a string inside the bracket that opens at `i` hold classes? A bracket opened by a
+ * non-class-builder name closes the door: `T[f.inlineStyles["font-weight"]]` has a lookup key.
+ */
+function opensClassContext(mask: string, from: number, i: number): boolean {
+  const name = /([A-Za-z_$][\w$]*)\s*$/.exec(mask.slice(Math.max(from, i - 40), i))?.[1];
+  return name === undefined || CLASS_BUILDER.test(name);
+}
+
+/**
+ * Every string and template body inside a source region. Where the strings are
+ * is decided on the mask; what they contain is read from the real text.
+ */
+function stringsIn(text: string, mask: string, start: number, end: number): string[] {
+  const found: string[] = [];
+  const classy: boolean[] = [];
+  for (let i = start; i < end; i += 1) {
+    const ch = mask[i];
+    if (OPEN[ch]) classy.push(opensClassContext(mask, start, i));
+    else if (CLOSE.test(ch)) classy.pop();
+    else if (QUOTE.test(ch)) {
+      const close = endOfString(mask, i);
+      const body = text.slice(i + 1, close);
+      if (classy.at(-1) !== false && isClassList(mask, start, i, body)) {
+        found.push(...(ch === "`" ? templateChunks(body) : [body]));
+      }
+      i = close;
+    }
+  }
+  return found;
+}
+
+/** Split on `:` that sits outside brackets, so `[&:hover]:x` yields `x`. */
+function stripVariants(token: string): string {
+  let depth = 0;
+  let last = 0;
+  for (let i = 0; i < token.length; i += 1) {
+    const ch = token[i];
+    if (ch === "[" || ch === "(") depth += 1;
+    else if (ch === "]" || ch === ")") depth -= 1;
+    else if (ch === ":" && depth === 0) last = i + 1;
+  }
+  return token.slice(last);
+}
+
+// A utility starts with a letter, a digit, `-` (negative), `@` (container
+// query) or `[` (fully arbitrary), and never contains a quote or a backslash.
+// The quotes are written as escapes so this file can be read by its own
+// comment stripper, which treats a quote in a regex literal as a string.
+const TOKEN = /^[-@[a-z0-9][^\s\u0022\u0027\u0060\\]*$/;
+
+// Class contexts: each anchor's balanced region is read for strings. The first `CLASS_POSITIONS` are
+// places a class lands, so identifiers used inside them are followed to their bindings.
+const ANCHORS = [
+  // className={...} / className="..." / class="..."
+  /\bclass(?:Name)?\s*=\s*/g,
+  // cn("..."), clsx(...), twMerge(...), cva(...)
+  /\b(?:cn|clsx|classnames|classNames|twMerge|twJoin|cva|tv)\s*\(/g,
+  // { className: "...", itemClass: "..." }
+  /\b\w*[Cc]lass(?:Names?)?\s*:\s*/g,
+  // const sizeStyles: Record<Size, string> = { ... } / baseClasses = "..." (exported maps used elsewhere)
+  // Prefix and plural both required: bare `style=` is the JSX attribute, `fxPresetStyle` is CSS text.
+  // The optional group is a type annotation; without it the gap spans `computedStyles["z-index"] !== "auto"`.
+  /\b\w+(?:Styles|Classes|ClassNames?)\b(?:\s*:[^=;{}()[\]]*)?\s*=(?!=)\s*/g,
+] as const;
+
+const CLASS_POSITIONS = 3;
+
+/** Bare identifiers in a region of the mask; property accesses excluded. */
+const REFERENCE = /(?<![.\w$])[A-Za-z_$][\w$]*/g;
+
+// A subscript, i.e. the `[variant]` of `variantStyles[variant]`. In
+// `cn(variantStyles[variant])` the class list is the map; the key is a value
+// being looked up, and `variant = "secondary"` is a default, not a class.
+const SUBSCRIPT = /(?<=[\w$)\]])\s*\[[^[\]]*\]/g;
+
+// End of the bracketed region or string at `at`, else -1: `const styles = getComputedStyle(el)`
+// matches the binding-name anchor but is not a class list.
+function regionAfter(mask: string, at: number): number {
+  if (OPEN[mask[at]]) return endOfRegion(mask, at);
+  if (QUOTE.test(mask[at])) return endOfString(mask, at) + 1;
+  return -1;
+}
+
+/** Split one class list into candidates, keeping the first spelling of each. */
+function collect(byRaw: Map<string, ClassCandidate>, list: string): void {
+  for (const raw of list.split(/\s+/)) {
+    if (raw === "" || !TOKEN.test(raw) || byRaw.has(raw)) continue;
+    const base = stripVariants(raw);
+    if (base === "") continue;
+    byRaw.set(raw, { base, raw, arbitrary: base.includes("[") });
+  }
+}
+
+// Every `[start, end)` an anchor opens. `lastIndex` jumps past each region so a nested `cn()`
+// inside a `className=` is not read twice.
+function regionsAfter(mask: string, anchor: RegExp): [number, number][] {
+  const pattern = new RegExp(anchor.source, "g");
+  const regions: [number, number][] = [];
+  let match: RegExpExecArray | null;
+  while ((match = pattern.exec(mask)) !== null) {
+    const start = match.index + match[0].length - (match[0].endsWith("(") ? 1 : 0);
+    const end = regionAfter(mask, start);
+    if (end <= start) continue;
+    regions.push([start, end]);
+    pattern.lastIndex = Math.max(pattern.lastIndex, end);
+  }
+  return regions;
+}
+
+// Every string bound to `name` by an assignment in this file. A name with no literal binding
+// (parameter, import, call result) yields nothing, so an over-broad reference scan is safe.
+function boundStrings(text: string, mask: string, name: string): string[] {
+  const anchor = new RegExp(
+    `(?<![\\w$])${escapeRegex(name)}(?![\\w$])(?:\\s*:[^=;{}()[\\]]*)?\\s*=(?!=)\\s*`,
+  );
+  return regionsAfter(mask, anchor).flatMap(([start, end]) => stringsIn(text, mask, start, end));
+}
+
+/** Every class candidate claimed by one source file. */
+export function extractClassCandidates(source: string): ClassCandidate[] {
+  // Anchors and region bounds come from the mask (code only); the strings
+  // themselves are read back out of the real text.
+  const mask = maskLiterals(source);
+  const byRaw = new Map<string, ClassCandidate>();
+  const referenced = new Set<string>();
+  for (const [index, anchor] of ANCHORS.entries()) {
+    for (const [start, end] of regionsAfter(mask, anchor)) {
+      for (const text of stringsIn(source, mask, start, end)) collect(byRaw, text);
+      if (index >= CLASS_POSITIONS) continue;
+      const used = mask.slice(start, end).replace(SUBSCRIPT, "");
+      for (const [name] of used.matchAll(REFERENCE)) referenced.add(name);
+    }
+  }
+  for (const name of referenced) {
+    for (const text of boundStrings(source, mask, name)) collect(byRaw, text);
+  }
+  return [...byRaw.values()];
+}

package/src/styles/hex-baseline.json

@@ -0,0 +1,84 @@
+{
+  "total": 394,
+  "files": {
+    "packages/studio/src/captions/components/CaptionOverlay.tsx": 5,
+    "packages/studio/src/captions/components/CaptionTimeline.tsx": 11,
+    "packages/studio/src/captions/generator.ts": 1,
+    "packages/studio/src/captions/parser.ts": 1,
+    "packages/studio/src/captions/types.ts": 4,
+    "packages/studio/src/components/StudioToast.tsx": 10,
+    "packages/studio/src/components/TimelineToolbar.tsx": 2,
+    "packages/studio/src/components/editor/ArcPathControls.tsx": 1,
+    "packages/studio/src/components/editor/BorderRadiusEditor.tsx": 10,
+    "packages/studio/src/components/editor/DomEditCropHandles.tsx": 1,
+    "packages/studio/src/components/editor/EaseCurveSection.tsx": 2,
+    "packages/studio/src/components/editor/FileTree.tsx": 2,
+    "packages/studio/src/components/editor/FileTreeIcons.tsx": 17,
+    "packages/studio/src/components/editor/FileTreeNodes.tsx": 4,
+    "packages/studio/src/components/editor/GestureTrailOverlay.tsx": 1,
+    "packages/studio/src/components/editor/GridOverlay.tsx": 4,
+    "packages/studio/src/components/editor/InlineTextToolbar.tsx": 2,
+    "packages/studio/src/components/editor/KeyframeDiamond.tsx": 2,
+    "packages/studio/src/components/editor/KeyframeNavigation.tsx": 2,
+    "packages/studio/src/components/editor/MotionPathNode.tsx": 5,
+    "packages/studio/src/components/editor/SnapGuideOverlay.tsx": 3,
+    "packages/studio/src/components/editor/TimelineFxPopover.tsx": 1,
+    "packages/studio/src/components/editor/Transform3DCube.tsx": 6,
+    "packages/studio/src/components/editor/colorValue.ts": 3,
+    "packages/studio/src/components/editor/domEditingElement.ts": 1,
+    "packages/studio/src/components/editor/easeCurveSvg.tsx": 2,
+    "packages/studio/src/components/editor/gradientValue.ts": 6,
+    "packages/studio/src/components/editor/panelTokens.ts": 4,
+    "packages/studio/src/components/editor/propertyPanelColor.tsx": 7,
+    "packages/studio/src/components/editor/propertyPanelColorCurveGraph.tsx": 17,
+    "packages/studio/src/components/editor/propertyPanelColorScopes.tsx": 8,
+    "packages/studio/src/components/editor/propertyPanelColorWheels.tsx": 8,
+    "packages/studio/src/components/editor/propertyPanelFlatEffectsSection.tsx": 5,
+    "packages/studio/src/components/editor/propertyPanelFlatStyleSections.tsx": 2,
+    "packages/studio/src/components/editor/propertyPanelFxCarveModule.tsx": 1,
+    "packages/studio/src/components/editor/propertyPanelFxFamily.ts": 1,
+    "packages/studio/src/components/editor/propertyPanelFxPresetStyle.ts": 24,
+    "packages/studio/src/components/editor/propertyPanelHelpers.ts": 4,
+    "packages/studio/src/components/editor/propertyPanelPrimitives.tsx": 1,
+    "packages/studio/src/components/editor/propertyPanelSections.tsx": 1,
+    "packages/studio/src/components/editor/propertyPanelStyleSections.tsx": 3,
+    "packages/studio/src/components/editor/transform3dProjection.ts": 3,
+    "packages/studio/src/components/feedback/StudioFeedbackCard.tsx": 10,
+    "packages/studio/src/components/panels/VariablesBindElement.tsx": 2,
+    "packages/studio/src/components/panels/VariablesValueControls.tsx": 2,
+    "packages/studio/src/components/sidebar/AudioRow.tsx": 2,
+    "packages/studio/src/components/ui/HyperframesMark.tsx": 4,
+    "packages/studio/src/hooks/useInlineTextEdit.ts": 1,
+    "packages/studio/src/player/components/AudioWaveform.tsx": 6,
+    "packages/studio/src/player/components/BeatStrip.tsx": 6,
+    "packages/studio/src/player/components/CompositionThumbnail.tsx": 2,
+    "packages/studio/src/player/components/ImageThumbnail.tsx": 6,
+    "packages/studio/src/player/components/LayerDisclosureRow.tsx": 3,
+    "packages/studio/src/player/components/Player.tsx": 2,
+    "packages/studio/src/player/components/PlayerControls.tsx": 1,
+    "packages/studio/src/player/components/PlayheadIndicator.tsx": 3,
+    "packages/studio/src/player/components/ShortcutsPanel.tsx": 7,
+    "packages/studio/src/player/components/SpeedMenu.tsx": 2,
+    "packages/studio/src/player/components/TimelineAutomationLane.tsx": 4,
+    "packages/studio/src/player/components/TimelineCanvas.tsx": 13,
+    "packages/studio/src/player/components/TimelineClip.tsx": 2,
+    "packages/studio/src/player/components/TimelineClipDiamonds.tsx": 2,
+    "packages/studio/src/player/components/TimelineDiamondConnectors.tsx": 2,
+    "packages/studio/src/player/components/TimelineEmptyState.tsx": 1,
+    "packages/studio/src/player/components/TimelineFxButton.tsx": 8,
+    "packages/studio/src/player/components/TimelineGroupHeader.tsx": 6,
+    "packages/studio/src/player/components/TimelineGroupLaneLabels.tsx": 1,
+    "packages/studio/src/player/components/TimelineGroupRow.tsx": 1,
+    "packages/studio/src/player/components/TimelineRazorInteraction.tsx": 1,
+    "packages/studio/src/player/components/TimelineRuler.tsx": 1,
+    "packages/studio/src/player/components/TimelineShortcutHint.tsx": 2,
+    "packages/studio/src/player/components/TimelineTrackHeader.tsx": 2,
+    "packages/studio/src/player/components/TimelineTrackPlainHeader.tsx": 2,
+    "packages/studio/src/player/components/VideoThumbnail.tsx": 6,
+    "packages/studio/src/player/components/timelineTheme.ts": 5,
+    "packages/studio/src/player/components/trackHeaderLabelRows.tsx": 6,
+    "packages/studio/src/styles/studio.css": 70,
+    "packages/studio/src/telemetry/client.ts": 1,
+    "packages/studio/src/webmcp/webmcpTestUtils.ts": 1
+  }
+}