fix(studio): preserve alpha proxy playback (#2625)

* fix(studio): preserve alpha proxy playback

* test(cli): pin VP8 alpha proxy pre-resolution

* fix(studio): emit textarea field-sizing CSS

* test(studio): verify textarea CSS generation

packages/studio/src/components/editor/propertyPanelFlatTextSection.test.tsx

@@ -2,6 +2,8 @@
 
 import React, { act, useState } from "react";
 import { createRoot } from "react-dom/client";
+import postcss from "postcss";
+import tailwindcss from "tailwindcss";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { FlatTextLayerList, FlatTextSection } from "./propertyPanelFlatTextSection";
 import type { DomEditSelection, DomEditTextField } from "./domEditingTypes";
@@ -466,4 +468,41 @@ describe("FlatTextSection — multi-field", () => {
 
     act(() => root.unmount());
   });
+
+  it("keeps Content expandable and grows it with multiline text", async () => {
+    const element = makeMultiFieldElement();
+    element.textFields[0].value = "First line\nSecond line\nThird line";
+
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(
+        <FlatTextSection
+          element={element}
+          styles={{}}
+          fontAssets={[]}
+          onSetText={vi.fn()}
+          onSetTextFieldStyle={vi.fn()}
+          onAddTextField={vi.fn()}
+          onRemoveTextField={vi.fn()}
+        />,
+      );
+    });
+
+    const contentTextarea = host.querySelector<HTMLTextAreaElement>("textarea");
+    expect(contentTextarea?.value).toBe("First line\nSecond line\nThird line");
+    expect(contentTextarea?.classList).toContain("resize-y");
+    expect(contentTextarea?.classList).toContain("overflow-y-auto");
+
+    const compiled = await postcss([
+      tailwindcss({
+        content: [{ raw: host.innerHTML, extension: "html" }],
+        corePlugins: { preflight: false },
+      }),
+    ]).process("@tailwind utilities;", { from: undefined });
+    expect(compiled.css).toContain("field-sizing: content");
+
+    act(() => root.unmount());
+  });
 });

packages/studio/src/components/editor/propertyPanelSections.tsx

@@ -147,7 +147,7 @@ export function TextAreaField({
           onFocus={handleFocus}
           onChange={handleChange}
           onBlur={handleBlur}
-          className="w-full resize-none bg-transparent font-mono text-[11px] leading-normal text-panel-text-0 outline-none disabled:cursor-not-allowed disabled:text-panel-text-4"
+          className="[field-sizing:content] max-h-[40vh] min-h-12 w-full resize-y overflow-x-hidden overflow-y-auto bg-transparent font-mono text-[11px] leading-normal text-panel-text-0 outline-none disabled:cursor-not-allowed disabled:text-panel-text-4"
         />
       </div>
     );
@@ -165,7 +165,7 @@ export function TextAreaField({
           onFocus={handleFocus}
           onChange={handleChange}
           onBlur={handleBlur}
-          className="w-full resize-none bg-transparent text-[11px] font-medium text-neutral-100 outline-none disabled:cursor-not-allowed disabled:text-neutral-600"
+          className="[field-sizing:content] max-h-[40vh] min-h-20 w-full resize-y overflow-x-hidden overflow-y-auto bg-transparent text-[11px] font-medium text-neutral-100 outline-none disabled:cursor-not-allowed disabled:text-neutral-600"
         />
       </div>
     </label>