From 9af7b6ee170007133b5f9bfee8fe871abcab3511 Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Wed, 8 Jul 2026 20:32:22 -0700
Subject: [PATCH 01/12] feat(studio): add flat-inspector tokens and
 STUDIO_FLAT_INSPECTOR_ENABLED flag

---
 .fallowrc.jsonc                                        |  6 ++++++
 .../editor/manualEditingAvailability.test.ts           | 10 ++++++++++
 .../src/components/editor/manualEditingAvailability.ts |  9 +++++++++
 packages/studio/src/styles/tailwind-preset.shared.js   |  4 ++++
 4 files changed, 29 insertions(+)

diff --git a/.fallowrc.jsonc b/.fallowrc.jsonc
index 32a6d5bc85..eba158acaf 100644
--- a/.fallowrc.jsonc
+++ b/.fallowrc.jsonc
@@ -260,6 +260,12 @@
       "file": "packages/core/src/figma/manifest.ts",
       "exports": ["mediaDir", "typeDirPath", "isFigmaManifestRecord"],
     },
+    // STUDIO_FLAT_INSPECTOR_ENABLED: exported for use by downstream studio
+    // inspector redesign tasks; consumed by components in later PRs.
+    {
+      "file": "packages/studio/src/components/editor/manualEditingAvailability.ts",
+      "exports": ["STUDIO_FLAT_INSPECTOR_ENABLED"],
+    },
   ],
   "ignoreDependencies": [
     // Runtime/dynamic deps not visible to static analysis: tsup `external`,
diff --git a/packages/studio/src/components/editor/manualEditingAvailability.test.ts b/packages/studio/src/components/editor/manualEditingAvailability.test.ts
index acd1f06940..2b36fe6406 100644
--- a/packages/studio/src/components/editor/manualEditingAvailability.test.ts
+++ b/packages/studio/src/components/editor/manualEditingAvailability.test.ts
@@ -105,4 +105,14 @@ describe("manual editing availability", () => {
     expect(resolveStudioBooleanEnvFlag({ EMPTY: "" }, ["EMPTY"], true)).toBe(true);
     expect(resolveStudioBooleanEnvFlag({ UNKNOWN: "maybe" }, ["UNKNOWN"], false)).toBe(false);
   });
+
+  it("defaults the flat inspector flag to false and honors an explicit override", async () => {
+    const off = await loadAvailabilityWithEnv({});
+    expect(off.STUDIO_FLAT_INSPECTOR_ENABLED).toBe(false);
+
+    const on = await loadAvailabilityWithEnv({
+      VITE_STUDIO_FLAT_INSPECTOR_ENABLED: "true",
+    });
+    expect(on.STUDIO_FLAT_INSPECTOR_ENABLED).toBe(true);
+  });
 });
diff --git a/packages/studio/src/components/editor/manualEditingAvailability.ts b/packages/studio/src/components/editor/manualEditingAvailability.ts
index b49a0523ca..5a9c802347 100644
--- a/packages/studio/src/components/editor/manualEditingAvailability.ts
+++ b/packages/studio/src/components/editor/manualEditingAvailability.ts
@@ -97,4 +97,13 @@ export const STUDIO_SDK_RESOLVER_SHADOW_ENABLED = resolveStudioBooleanEnvFlag(
   true,
 );
 
+// Studio inspector redesign ("Ledger, flat" — design_handoff_studio_inspector):
+// flat identity header/footer/groups behind a flag for incremental review.
+// Default false; enable via VITE_STUDIO_FLAT_INSPECTOR_ENABLED=true.
+export const STUDIO_FLAT_INSPECTOR_ENABLED = resolveStudioBooleanEnvFlag(
+  env,
+  ["VITE_STUDIO_ENABLE_FLAT_INSPECTOR", "VITE_STUDIO_FLAT_INSPECTOR_ENABLED"],
+  false,
+);
+
 export const STUDIO_MANUAL_EDITING_DISABLED_TITLE = "Manual editing is temporarily disabled";
diff --git a/packages/studio/src/styles/tailwind-preset.shared.js b/packages/studio/src/styles/tailwind-preset.shared.js
index 35142881ea..0ba4a2ba6d 100644
--- a/packages/studio/src/styles/tailwind-preset.shared.js
+++ b/packages/studio/src/styles/tailwind-preset.shared.js
@@ -17,6 +17,8 @@ const studioPreset = {
           hover: "#27272A",
           border: "#1E1E1E",
           "border-input": "#27272A",
+          hairline: "#1A1A1C",
+          "text-0": "#FAFAFA",
           "text-1": "#E4E4E7",
           "text-2": "#A1A1AA",
           "text-3": "#71717A",
@@ -24,6 +26,8 @@ const studioPreset = {
           "text-5": "#3F3F46",
           accent: "#3CE6AC",
           danger: "#EF4444",
+          media: "#00E3FF",
+          container: "#F5A623",
         },
       },
     },

From 50ccc06cbad36c0382e791b23759225ba073e074 Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Wed, 8 Jul 2026 20:36:24 -0700
Subject: [PATCH 02/12] feat(studio): add 3-tier value/label color resolver for
 the flat inspector

---
 .../editor/propertyPanelValueTier.test.ts     | 32 +++++++++++++++++++
 .../editor/propertyPanelValueTier.ts          | 28 ++++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 packages/studio/src/components/editor/propertyPanelValueTier.test.ts
 create mode 100644 packages/studio/src/components/editor/propertyPanelValueTier.ts

diff --git a/packages/studio/src/components/editor/propertyPanelValueTier.test.ts b/packages/studio/src/components/editor/propertyPanelValueTier.test.ts
new file mode 100644
index 0000000000..80e4c22048
--- /dev/null
+++ b/packages/studio/src/components/editor/propertyPanelValueTier.test.ts
@@ -0,0 +1,32 @@
+import { describe, expect, it } from "vitest";
+import {
+  resolveValueTier,
+  VALUE_TIER_LABEL_CLASS,
+  VALUE_TIER_VALUE_CLASS,
+} from "./propertyPanelValueTier";
+
+describe("resolveValueTier", () => {
+  it("is 'default' when there is no explicit declaration", () => {
+    expect(resolveValueTier(undefined, "400")).toBe("default");
+    expect(resolveValueTier("", "400")).toBe("default");
+  });
+
+  it("is 'explicitDefault' when the explicit value equals the default", () => {
+    expect(resolveValueTier("400", "400")).toBe("explicitDefault");
+    expect(resolveValueTier(" normal ", "normal")).toBe("explicitDefault");
+  });
+
+  it("is 'explicitCustom' when the explicit value differs from the default", () => {
+    expect(resolveValueTier("3.96px", "0px")).toBe("explicitCustom");
+  });
+});
+
+describe("value tier class maps", () => {
+  it("covers all three tiers for both label and value", () => {
+    for (const tier of ["default", "explicitDefault", "explicitCustom"] as const) {
+      expect(VALUE_TIER_LABEL_CLASS[tier]).toBeTruthy();
+      expect(VALUE_TIER_VALUE_CLASS[tier]).toBeTruthy();
+    }
+    expect(VALUE_TIER_VALUE_CLASS.explicitCustom).toBe("text-panel-accent");
+  });
+});
diff --git a/packages/studio/src/components/editor/propertyPanelValueTier.ts b/packages/studio/src/components/editor/propertyPanelValueTier.ts
new file mode 100644
index 0000000000..0e92f8b04d
--- /dev/null
+++ b/packages/studio/src/components/editor/propertyPanelValueTier.ts
@@ -0,0 +1,28 @@
+/**
+ * The flat inspector's 3-state value coloring (design_handoff_studio_inspector,
+ * verified against Studio Panel Redesign.dc.html #10a): a property row is either
+ * unset (no explicit declaration), explicitly declared but equal to its default
+ * (no visual "set" signal), or explicitly declared and different from its default
+ * (mint value + emphasized label + reset affordance).
+ */
+export type PropertyValueTier = "default" | "explicitDefault" | "explicitCustom";
+
+export function resolveValueTier(
+  explicitValue: string | undefined,
+  defaultValue: string,
+): PropertyValueTier {
+  if (explicitValue == null || explicitValue.trim() === "") return "default";
+  return explicitValue.trim() === defaultValue.trim() ? "explicitDefault" : "explicitCustom";
+}
+
+export const VALUE_TIER_LABEL_CLASS: Record<PropertyValueTier, string> = {
+  default: "text-panel-text-3",
+  explicitDefault: "text-panel-text-2",
+  explicitCustom: "text-panel-text-0",
+};
+
+export const VALUE_TIER_VALUE_CLASS: Record<PropertyValueTier, string> = {
+  default: "text-panel-text-3",
+  explicitDefault: "text-panel-text-0",
+  explicitCustom: "text-panel-accent",
+};

From 050a8f02338ca90fcd0449f1df0a6e1ed2d1450f Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Wed, 8 Jul 2026 20:44:29 -0700
Subject: [PATCH 03/12] feat(studio): add FlatRow and FlatSegmentedRow
 flat-inspector primitives

---
 .../propertyPanelFlatPrimitives.test.tsx      | 101 +++++++++++++
 .../editor/propertyPanelFlatPrimitives.tsx    | 133 ++++++++++++++++++
 .../editor/propertyPanelPrimitives.tsx        |   2 +-
 3 files changed, 235 insertions(+), 1 deletion(-)
 create mode 100644 packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
 create mode 100644 packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx

diff --git a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
new file mode 100644
index 0000000000..30ad145c9d
--- /dev/null
+++ b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
@@ -0,0 +1,101 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { FlatRow, FlatSegmentedRow } from "./propertyPanelFlatPrimitives";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function renderInto(node: React.ReactElement) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  act(() => {
+    root.render(node);
+  });
+  return { host, root };
+}
+
+describe("FlatRow", () => {
+  it("renders the default tier with no reset button", () => {
+    const { host, root } = renderInto(
+      <FlatRow label="Weight" value="400 · Regular" tier="default" onCommit={vi.fn()} />,
+    );
+    const value = host.querySelector('[data-flat-row-value="true"]');
+    expect(value?.className).toContain("text-panel-text-3");
+    expect(host.querySelector('[data-flat-row-reset="true"]')).toBeNull();
+    act(() => root.unmount());
+  });
+
+  it("renders the explicitCustom tier with a mint value and a reset button", () => {
+    const onReset = vi.fn();
+    const { host, root } = renderInto(
+      <FlatRow
+        label="Letter spacing"
+        value="3.96px"
+        tier="explicitCustom"
+        onCommit={vi.fn()}
+        onReset={onReset}
+      />,
+    );
+    const value = host.querySelector('[data-flat-row-value="true"]');
+    expect(value?.className).toContain("text-panel-accent");
+    const reset = host.querySelector<HTMLButtonElement>('[data-flat-row-reset="true"]');
+    expect(reset).not.toBeNull();
+    act(() => reset?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onReset).toHaveBeenCalledTimes(1);
+    act(() => root.unmount());
+  });
+
+  it("commits edits through the underlying CommitField input", () => {
+    const onCommit = vi.fn();
+    const { host, root } = renderInto(
+      <FlatRow label="Size" value="22px" tier="explicitDefault" onCommit={onCommit} />,
+    );
+    const input = host.querySelector<HTMLInputElement>("input");
+    if (!input) throw new Error("expected an input");
+    act(() => {
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        "value",
+      )?.set;
+      nativeInputValueSetter?.call(input, "24px");
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+    act(() => {
+      input.dispatchEvent(new Event("focusout", { bubbles: true }));
+    });
+    expect(onCommit).toHaveBeenCalledWith("24px");
+    act(() => root.unmount());
+  });
+});
+
+describe("FlatSegmentedRow", () => {
+  it("underlines the active option in mint and leaves others muted", () => {
+    const onChange = vi.fn();
+    const { host, root } = renderInto(
+      <FlatSegmentedRow
+        label="Align"
+        options={[
+          { key: "left", node: "L", active: false },
+          { key: "right", node: "R", active: true },
+        ]}
+        onChange={onChange}
+      />,
+    );
+    const options = host.querySelectorAll('[data-flat-segment="true"]');
+    expect(options).toHaveLength(2);
+    expect((options[0] as HTMLElement).className).toContain("text-panel-text-4");
+    expect((options[1] as HTMLElement).className).toContain("border-panel-accent");
+    act(() =>
+      (options[0] as HTMLElement).dispatchEvent(new MouseEvent("click", { bubbles: true })),
+    );
+    expect(onChange).toHaveBeenCalledWith("left");
+    act(() => root.unmount());
+  });
+});
diff --git a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
new file mode 100644
index 0000000000..5acd863ff6
--- /dev/null
+++ b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
@@ -0,0 +1,133 @@
+import { type ReactNode } from "react";
+import { RotateCcw } from "../../icons/SystemIcons";
+import { CommitField } from "./propertyPanelPrimitives";
+import {
+  VALUE_TIER_LABEL_CLASS,
+  VALUE_TIER_VALUE_CLASS,
+  type PropertyValueTier,
+} from "./propertyPanelValueTier";
+
+/* ------------------------------------------------------------------ */
+/*  FlatRow — single-column label/value property row                   */
+/* ------------------------------------------------------------------ */
+
+export function FlatRow({
+  label,
+  value,
+  tier,
+  disabled,
+  liveCommit,
+  suffix,
+  dropdown,
+  onCommit,
+  onReset,
+}: {
+  label: string;
+  value: string;
+  tier: PropertyValueTier;
+  disabled?: boolean;
+  liveCommit?: boolean;
+  suffix?: ReactNode;
+  /** Renders a trailing 10px caret-down, for select-backed rows. */
+  dropdown?: boolean;
+  onCommit: (nextValue: string) => void;
+  onReset?: () => void;
+}) {
+  return (
+    <div className="group flex min-h-[30px] items-center justify-between gap-3">
+      <span className={`text-[11px] ${VALUE_TIER_LABEL_CLASS[tier]}`}>{label}</span>
+      <span className="flex min-w-0 flex-shrink-0 items-center gap-1.5">
+        <span
+          data-flat-row-value="true"
+          className={`min-w-0 border-b pb-px font-mono text-[11px] ${VALUE_TIER_VALUE_CLASS[tier]} ${
+            tier === "explicitCustom"
+              ? "border-transparent group-hover:border-panel-accent/35"
+              : "border-transparent group-hover:border-panel-border-input"
+          }`}
+        >
+          <CommitField
+            value={value}
+            disabled={disabled}
+            liveCommit={liveCommit}
+            onCommit={onCommit}
+          />
+        </span>
+        {suffix}
+        {tier === "explicitCustom" && onReset && (
+          <button
+            type="button"
+            data-flat-row-reset="true"
+            title="Remove — fall back to default"
+            onClick={onReset}
+            className="flex-shrink-0 text-panel-text-3 opacity-0 transition-opacity hover:text-panel-text-1 group-hover:opacity-100"
+          >
+            <RotateCcw size={11} />
+          </button>
+        )}
+        {dropdown && (
+          <svg
+            width="10"
+            height="10"
+            viewBox="0 0 10 10"
+            fill="currentColor"
+            className="flex-shrink-0 text-panel-text-5"
+          >
+            <path d="M2 3l3 4 3-4z" />
+          </svg>
+        )}
+      </span>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  FlatSegmentedRow — inline glyph runs, no container background      */
+/* ------------------------------------------------------------------ */
+
+export interface FlatSegmentOption {
+  key: string;
+  node: ReactNode;
+  active: boolean;
+}
+
+export function FlatSegmentedRow({
+  label,
+  options,
+  disabled,
+  /** Index (0-based) after which to render a 12px spacer — for combined rows
+   *  like Text's "Case · Style", which pack two independent option groups. */
+  spacerAfterIndex,
+  onChange,
+}: {
+  label: string;
+  options: FlatSegmentOption[];
+  disabled?: boolean;
+  spacerAfterIndex?: number;
+  onChange: (nextKey: string) => void;
+}) {
+  return (
+    <div className="flex min-h-[32px] items-center justify-between">
+      <span className="text-[11px] text-panel-text-3">{label}</span>
+      <span className="flex items-center gap-0.5">
+        {options.map((option, index) => (
+          <span key={option.key} className="flex items-center">
+            <button
+              type="button"
+              data-flat-segment="true"
+              disabled={disabled}
+              onClick={() => onChange(option.key)}
+              className={`px-1.5 py-1 text-[11px] transition-colors disabled:cursor-not-allowed ${
+                option.active
+                  ? "border-b-2 border-panel-accent text-panel-text-0"
+                  : "border-b-2 border-transparent text-panel-text-4 hover:text-panel-text-2"
+              }`}
+            >
+              {option.node}
+            </button>
+            {spacerAfterIndex === index && <span className="w-3" aria-hidden="true" />}
+          </span>
+        ))}
+      </span>
+    </div>
+  );
+}
diff --git a/packages/studio/src/components/editor/propertyPanelPrimitives.tsx b/packages/studio/src/components/editor/propertyPanelPrimitives.tsx
index ae12435607..d8a36eeef1 100644
--- a/packages/studio/src/components/editor/propertyPanelPrimitives.tsx
+++ b/packages/studio/src/components/editor/propertyPanelPrimitives.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
 import { adjustNumericToken, FIELD, LABEL, parseNumericToken } from "./propertyPanelHelpers";
 
-function CommitField({
+export function CommitField({
   value,
   disabled,
   liveCommit,

From e20edefc95066711025e0282854133a63a9eaef2 Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Wed, 8 Jul 2026 20:57:11 -0700
Subject: [PATCH 04/12] feat(studio): add FlatGroup accordion and
 PinnedZoneDivider primitives

---
 .../propertyPanelFlatPrimitives.test.tsx      |  60 ++++++++++-
 .../editor/propertyPanelFlatPrimitives.tsx    | 102 ++++++++++++++++++
 2 files changed, 161 insertions(+), 1 deletion(-)

diff --git a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
index 30ad145c9d..33b71d41e9 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
@@ -3,7 +3,12 @@
 import React, { act } from "react";
 import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { FlatRow, FlatSegmentedRow } from "./propertyPanelFlatPrimitives";
+import {
+  FlatGroup,
+  FlatRow,
+  FlatSegmentedRow,
+  PinnedZoneDivider,
+} from "./propertyPanelFlatPrimitives";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -99,3 +104,56 @@ describe("FlatSegmentedRow", () => {
     act(() => root.unmount());
   });
 });
+
+describe("FlatGroup", () => {
+  it("renders the open header (name + pin + caret) and shows children", () => {
+    const onToggleOpen = vi.fn();
+    const onTogglePin = vi.fn();
+    const { host, root } = renderInto(
+      <FlatGroup
+        title="Text"
+        isOpen
+        isPinned={false}
+        onToggleOpen={onToggleOpen}
+        onTogglePin={onTogglePin}
+      >
+        <div data-testid="body">body</div>
+      </FlatGroup>,
+    );
+    expect(host.querySelector('[data-testid="body"]')).not.toBeNull();
+    const pin = host.querySelector<HTMLButtonElement>('[data-flat-group-pin="true"]');
+    act(() => pin?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onTogglePin).toHaveBeenCalledTimes(1);
+    act(() => root.unmount());
+  });
+
+  it("renders the collapsed row (name + summary + caret-right) and no children", () => {
+    const onToggleOpen = vi.fn();
+    const { host, root } = renderInto(
+      <FlatGroup
+        title="Style"
+        isOpen={false}
+        isPinned={false}
+        onToggleOpen={onToggleOpen}
+        onTogglePin={vi.fn()}
+        summary="fill none · 100%"
+      >
+        <div data-testid="body">body</div>
+      </FlatGroup>,
+    );
+    expect(host.querySelector('[data-testid="body"]')).toBeNull();
+    expect(host.textContent).toContain("fill none · 100%");
+    const row = host.querySelector<HTMLButtonElement>('[data-flat-group-collapsed="true"]');
+    act(() => row?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onToggleOpen).toHaveBeenCalledTimes(1);
+    act(() => root.unmount());
+  });
+});
+
+describe("PinnedZoneDivider", () => {
+  it("renders the 'one open below' label", () => {
+    const { host, root } = renderInto(<PinnedZoneDivider />);
+    expect(host.textContent).toContain("one open below");
+    act(() => root.unmount());
+  });
+});
diff --git a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
index 5acd863ff6..067ecb7a7b 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
@@ -131,3 +131,105 @@ export function FlatSegmentedRow({
     </div>
   );
 }
+
+/* ------------------------------------------------------------------ */
+/*  FlatGroup — one-open-at-a-time accordion group (controlled)        */
+/* ------------------------------------------------------------------ */
+
+export function FlatGroup({
+  title,
+  isOpen,
+  isPinned,
+  onToggleOpen,
+  onTogglePin,
+  accessory,
+  summary,
+  children,
+}: {
+  title: string;
+  isOpen: boolean;
+  isPinned: boolean;
+  onToggleOpen: () => void;
+  onTogglePin: () => void;
+  accessory?: ReactNode;
+  summary?: string;
+  children: ReactNode;
+}) {
+  if (!isOpen) {
+    return (
+      <button
+        type="button"
+        data-flat-group-collapsed="true"
+        onClick={onToggleOpen}
+        className="flex min-h-10 w-full items-center justify-between gap-2 border-b border-panel-hairline px-4 text-left"
+      >
+        <span className="flex min-w-0 items-center gap-2">
+          <span className="text-[12px] font-medium text-panel-text-2">{title}</span>
+          {summary && (
+            <span className="min-w-0 truncate font-mono text-[9px] text-panel-text-4">
+              {summary}
+            </span>
+          )}
+        </span>
+        <svg
+          width="12"
+          height="12"
+          viewBox="0 0 12 12"
+          fill="currentColor"
+          className="flex-shrink-0 text-panel-text-5"
+        >
+          <path d="M4 2l4 4-4 4z" />
+        </svg>
+      </button>
+    );
+  }
+
+  return (
+    <div className="border-b border-panel-hairline px-4 py-3" data-flat-group-open="true">
+      <div className="mb-2.5 flex items-center justify-between">
+        <span className="text-[12px] font-semibold text-panel-text-0">{title}</span>
+        <span className="flex items-center gap-2.5 text-panel-text-5">
+          {accessory}
+          <button
+            type="button"
+            data-flat-group-pin="true"
+            title={isPinned ? "Unpin" : "Pin"}
+            onClick={onTogglePin}
+            className={isPinned ? "text-panel-accent" : "text-panel-text-5 hover:text-panel-text-3"}
+          >
+            <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+              <path d="M4 1h4v3.2l1.4 1.4V7H7v4L6 12l-1-1V7H2.6V5.6L4 4.2z" />
+            </svg>
+          </button>
+          <button
+            type="button"
+            onClick={onToggleOpen}
+            title="Collapse"
+            className="text-panel-text-3"
+          >
+            <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+              <path d="M2 4l4 4 4-4z" />
+            </svg>
+          </button>
+        </span>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  PinnedZoneDivider                                                   */
+/* ------------------------------------------------------------------ */
+
+export function PinnedZoneDivider() {
+  return (
+    <div className="flex items-center gap-3 px-4 py-2">
+      <span className="h-px flex-1 bg-panel-hairline" aria-hidden="true" />
+      <span className="text-[8px] font-semibold uppercase tracking-[0.14em] text-panel-text-5">
+        one open below
+      </span>
+      <span className="h-px flex-1 bg-panel-hairline" aria-hidden="true" />
+    </div>
+  );
+}

From 860f4ca057b562d9fb82514bf3a57094023a600a Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Wed, 8 Jul 2026 21:02:38 -0700
Subject: [PATCH 05/12] feat(studio): add flat identity header for the
 inspector

---
 .../editor/PropertyPanelFlatHeader.test.tsx   | 79 ++++++++++++++++
 .../editor/PropertyPanelFlatHeader.tsx        | 89 +++++++++++++++++++
 2 files changed, 168 insertions(+)
 create mode 100644 packages/studio/src/components/editor/PropertyPanelFlatHeader.test.tsx
 create mode 100644 packages/studio/src/components/editor/PropertyPanelFlatHeader.tsx

diff --git a/packages/studio/src/components/editor/PropertyPanelFlatHeader.test.tsx b/packages/studio/src/components/editor/PropertyPanelFlatHeader.test.tsx
new file mode 100644
index 0000000000..2d467db82b
--- /dev/null
+++ b/packages/studio/src/components/editor/PropertyPanelFlatHeader.test.tsx
@@ -0,0 +1,79 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { PropertyPanelFlatHeader } from "./PropertyPanelFlatHeader";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function renderHeader(overrides: Partial<Parameters<typeof PropertyPanelFlatHeader>[0]> = {}) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  const props = {
+    name: "Mono Label",
+    meta: ".mono-label · div",
+    elementKind: "text" as const,
+    hidden: false,
+    copied: false,
+    onCopy: vi.fn(),
+    onClear: vi.fn(),
+    showUngroup: false,
+    ...overrides,
+  };
+  act(() => {
+    root.render(<PropertyPanelFlatHeader {...props} />);
+  });
+  return { host, root, props };
+}
+
+describe("PropertyPanelFlatHeader", () => {
+  it("renders name, meta, and the mint text-type icon", () => {
+    const { host, root } = renderHeader();
+    expect(host.textContent).toContain("Mono Label");
+    expect(host.textContent).toContain(".mono-label · div");
+    const icon = host.querySelector('[data-flat-header-icon="true"]');
+    expect(icon?.className).toContain("text-panel-accent");
+    act(() => root.unmount());
+  });
+
+  it("colors the media icon cyan and the other icon amber", () => {
+    const { host: mediaHost, root: mediaRoot } = renderHeader({ elementKind: "media" });
+    expect(mediaHost.querySelector('[data-flat-header-icon="true"]')?.className).toContain(
+      "text-panel-media",
+    );
+    act(() => mediaRoot.unmount());
+
+    const { host: otherHost, root: otherRoot } = renderHeader({ elementKind: "other" });
+    expect(otherHost.querySelector('[data-flat-header-icon="true"]')?.className).toContain(
+      "text-panel-container",
+    );
+    act(() => otherRoot.unmount());
+  });
+
+  it("fires onCopy and onClear from their action buttons", () => {
+    const { host, root, props } = renderHeader();
+    const copy = host.querySelector<HTMLButtonElement>(
+      '[aria-label="Copy element info to clipboard"]',
+    );
+    const clear = host.querySelector<HTMLButtonElement>('[aria-label="Clear selection"]');
+    act(() => copy?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    act(() => clear?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(props.onCopy).toHaveBeenCalledTimes(1);
+    expect(props.onClear).toHaveBeenCalledTimes(1);
+    act(() => root.unmount());
+  });
+
+  it("only renders Ungroup when showUngroup is true", () => {
+    const { host: without } = renderHeader({ showUngroup: false });
+    expect(without.querySelector('[aria-label="Ungroup"]')).toBeNull();
+
+    const { host: withUngroup } = renderHeader({ showUngroup: true, onUngroup: vi.fn() });
+    expect(withUngroup.querySelector('[aria-label="Ungroup"]')).not.toBeNull();
+  });
+});
diff --git a/packages/studio/src/components/editor/PropertyPanelFlatHeader.tsx b/packages/studio/src/components/editor/PropertyPanelFlatHeader.tsx
new file mode 100644
index 0000000000..d56468eb58
--- /dev/null
+++ b/packages/studio/src/components/editor/PropertyPanelFlatHeader.tsx
@@ -0,0 +1,89 @@
+import { Eye, EyeSlash } from "@phosphor-icons/react";
+import { ClipboardList, Film, Square, Type, X } from "../../icons/SystemIcons";
+
+const ICON_BY_KIND = { text: Type, media: Film, other: Square } as const;
+const ICON_COLOR_BY_KIND = {
+  text: "text-panel-accent",
+  media: "text-panel-media",
+  other: "text-panel-container",
+} as const;
+
+export function PropertyPanelFlatHeader({
+  name,
+  meta,
+  elementKind,
+  hidden,
+  onToggleHidden,
+  copied,
+  onCopy,
+  onClear,
+  onUngroup,
+  showUngroup,
+}: {
+  name: string;
+  meta: string;
+  elementKind: "text" | "media" | "other";
+  hidden: boolean;
+  onToggleHidden?: () => void;
+  copied: boolean;
+  onCopy: () => void;
+  onClear: () => void;
+  onUngroup?: () => void;
+  showUngroup: boolean;
+}) {
+  const Icon = ICON_BY_KIND[elementKind];
+  const visibilityLabel = hidden ? "Show element" : "Hide element";
+
+  return (
+    <div className="flex items-center gap-2.5 border-b border-panel-hairline px-4 py-3">
+      <Icon
+        size={15}
+        data-flat-header-icon="true"
+        className={`flex-shrink-0 ${ICON_COLOR_BY_KIND[elementKind]}`}
+      />
+      <div className="flex min-w-0 flex-1 items-baseline gap-2">
+        <span className="truncate text-[13px] font-semibold text-panel-text-0">{name}</span>
+        <span className="truncate font-mono text-[10px] text-panel-text-4">{meta}</span>
+      </div>
+      <div className="flex flex-shrink-0 items-center gap-2.5 text-panel-text-3">
+        {showUngroup && (
+          <button type="button" aria-label="Ungroup" title="Ungroup (⌘⇧G)" onClick={onUngroup}>
+            <svg
+              width="13"
+              height="13"
+              viewBox="0 0 16 16"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+            >
+              <rect x="1.5" y="1.5" width="7" height="7" rx="1" />
+              <rect x="7.5" y="7.5" width="7" height="7" rx="1" />
+            </svg>
+          </button>
+        )}
+        {onToggleHidden && (
+          <button
+            type="button"
+            aria-label={visibilityLabel}
+            title={visibilityLabel}
+            onClick={onToggleHidden}
+          >
+            {hidden ? <EyeSlash size={13} weight="bold" /> : <Eye size={13} weight="bold" />}
+          </button>
+        )}
+        <button
+          type="button"
+          aria-label="Copy element info to clipboard"
+          title={copied ? "Copied!" : "Copy element info for any AI agent"}
+          onClick={onCopy}
+          className={copied ? "text-panel-accent" : undefined}
+        >
+          <ClipboardList size={13} />
+        </button>
+        <button type="button" aria-label="Clear selection" onClick={onClear}>
+          <X size={13} />
+        </button>
+      </div>
+    </div>
+  );
+}

From 74cd2d15b22035d9d189ba6acde93f7882c851c5 Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Wed, 8 Jul 2026 21:07:19 -0700
Subject: [PATCH 06/12] feat(studio): add flat footer (ask agent + record) for
 the inspector

---
 .../editor/PropertyPanelFlatFooter.test.tsx   | 55 ++++++++++++++++++
 .../editor/PropertyPanelFlatFooter.tsx        | 58 +++++++++++++++++++
 2 files changed, 113 insertions(+)
 create mode 100644 packages/studio/src/components/editor/PropertyPanelFlatFooter.test.tsx
 create mode 100644 packages/studio/src/components/editor/PropertyPanelFlatFooter.tsx

diff --git a/packages/studio/src/components/editor/PropertyPanelFlatFooter.test.tsx b/packages/studio/src/components/editor/PropertyPanelFlatFooter.test.tsx
new file mode 100644
index 0000000000..0ae07968f4
--- /dev/null
+++ b/packages/studio/src/components/editor/PropertyPanelFlatFooter.test.tsx
@@ -0,0 +1,55 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { PropertyPanelFlatFooter } from "./PropertyPanelFlatFooter";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function renderFooter(overrides: Partial<Parameters<typeof PropertyPanelFlatFooter>[0]> = {}) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  act(() => {
+    root.render(<PropertyPanelFlatFooter {...overrides} />);
+  });
+  return { host, root };
+}
+
+describe("PropertyPanelFlatFooter", () => {
+  it("renders the ask-agent affordance and fires onAskAgent on click", () => {
+    const onAskAgent = vi.fn();
+    const { host, root } = renderFooter({ onAskAgent });
+    expect(host.textContent).toContain("Ask agent about this element");
+    const askButton = host.querySelector<HTMLButtonElement>('[data-flat-footer-ask="true"]');
+    act(() => askButton?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onAskAgent).toHaveBeenCalledTimes(1);
+    act(() => root.unmount());
+  });
+
+  it("shows the idle record affordance and toggles recording on click", () => {
+    const onToggleRecording = vi.fn();
+    const { host, root } = renderFooter({ recordingState: "idle", onToggleRecording });
+    const recordButton = host.querySelector<HTMLButtonElement>('[data-flat-footer-record="true"]');
+    expect(recordButton?.title).toBe("Record gesture (R)");
+    act(() => recordButton?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onToggleRecording).toHaveBeenCalledTimes(1);
+    act(() => root.unmount());
+  });
+
+  it("shows the recording duration while recording", () => {
+    const { host, root } = renderFooter({
+      recordingState: "recording",
+      recordingDuration: 2.4,
+      onToggleRecording: vi.fn(),
+    });
+    const recordButton = host.querySelector<HTMLButtonElement>('[data-flat-footer-record="true"]');
+    expect(recordButton?.title).toBe("Stop recording 2.4s");
+    act(() => root.unmount());
+  });
+});
diff --git a/packages/studio/src/components/editor/PropertyPanelFlatFooter.tsx b/packages/studio/src/components/editor/PropertyPanelFlatFooter.tsx
new file mode 100644
index 0000000000..90c898f860
--- /dev/null
+++ b/packages/studio/src/components/editor/PropertyPanelFlatFooter.tsx
@@ -0,0 +1,58 @@
+export function PropertyPanelFlatFooter({
+  onAskAgent,
+  recordingState,
+  recordingDuration,
+  onToggleRecording,
+}: {
+  onAskAgent?: () => void;
+  recordingState?: "idle" | "recording" | "preview";
+  recordingDuration?: number;
+  onToggleRecording?: () => void;
+}) {
+  const recording = recordingState === "recording";
+  const recordTitle = recording
+    ? `Stop recording ${(recordingDuration ?? 0).toFixed(1)}s`
+    : "Record gesture (R)";
+
+  return (
+    <div className="flex items-center justify-between border-t border-panel-hairline px-4 py-[11px]">
+      <button
+        type="button"
+        data-flat-footer-ask="true"
+        onClick={onAskAgent}
+        disabled={!onAskAgent}
+        className="flex items-center gap-[7px] text-[11px] font-medium text-panel-text-2 disabled:cursor-not-allowed"
+      >
+        <svg
+          width="13"
+          height="13"
+          viewBox="0 0 16 16"
+          fill="currentColor"
+          className="text-panel-accent"
+        >
+          <path d="M8 1l1.4 4.6L14 7l-4.6 1.4L8 13l-1.4-4.6L2 7l4.6-1.4z" />
+        </svg>
+        Ask agent about this element
+      </button>
+      {onToggleRecording && (
+        <button
+          type="button"
+          data-flat-footer-record="true"
+          aria-label={recordTitle}
+          title={recordTitle}
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={onToggleRecording}
+          className={recording ? "text-panel-danger animate-pulse" : "text-panel-danger"}
+        >
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
+            {recording ? (
+              <rect x="2" y="2" width="10" height="10" rx="1.5" />
+            ) : (
+              <circle cx="7" cy="7" r="6" />
+            )}
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+}

From 547e947eb1c08fae9145f4df938d0a2b45b0814b Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Wed, 8 Jul 2026 21:25:46 -0700
Subject: [PATCH 07/12] feat(studio): add flat trigger variants for ColorField,
 FontFamilyField, TextAreaField

---
 .fallowrc.jsonc                               |   6 +
 .../editor/propertyPanelColor.test.tsx        |  28 +++
 .../components/editor/propertyPanelColor.tsx  |  26 +++
 .../editor/propertyPanelFont.test.tsx         |  30 +++
 .../components/editor/propertyPanelFont.tsx   | 219 ++++++++++--------
 .../editor/propertyPanelSections.tsx          |  52 +++--
 6 files changed, 256 insertions(+), 105 deletions(-)
 create mode 100644 packages/studio/src/components/editor/propertyPanelColor.test.tsx
 create mode 100644 packages/studio/src/components/editor/propertyPanelFont.test.tsx

diff --git a/.fallowrc.jsonc b/.fallowrc.jsonc
index eba158acaf..1447133942 100644
--- a/.fallowrc.jsonc
+++ b/.fallowrc.jsonc
@@ -266,6 +266,12 @@
       "file": "packages/studio/src/components/editor/manualEditingAvailability.ts",
       "exports": ["STUDIO_FLAT_INSPECTOR_ENABLED"],
     },
+    // TextAreaField: newly exported for FlatTextSection (flat inspector
+    // redesign, Task 8), which lands in a later commit on this branch.
+    {
+      "file": "packages/studio/src/components/editor/propertyPanelSections.tsx",
+      "exports": ["TextAreaField"],
+    },
   ],
   "ignoreDependencies": [
     // Runtime/dynamic deps not visible to static analysis: tsup `external`,
diff --git a/packages/studio/src/components/editor/propertyPanelColor.test.tsx b/packages/studio/src/components/editor/propertyPanelColor.test.tsx
new file mode 100644
index 0000000000..f49c22386c
--- /dev/null
+++ b/packages/studio/src/components/editor/propertyPanelColor.test.tsx
@@ -0,0 +1,28 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ColorField } from "./propertyPanelColor";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("ColorField flat trigger", () => {
+  it("renders label and value inline with a small swatch, no boxed border", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(<ColorField flat label="Color" value="rgb(255, 176, 32)" onCommit={vi.fn()} />);
+    });
+    const trigger = host.querySelector<HTMLButtonElement>('[data-flat-color-trigger="true"]');
+    expect(trigger).not.toBeNull();
+    expect(trigger?.className).not.toContain("border-neutral-800");
+    expect(host.textContent).toContain("Color");
+    act(() => root.unmount());
+  });
+});
diff --git a/packages/studio/src/components/editor/propertyPanelColor.tsx b/packages/studio/src/components/editor/propertyPanelColor.tsx
index 962f0e9172..ea6dbb6008 100644
--- a/packages/studio/src/components/editor/propertyPanelColor.tsx
+++ b/packages/studio/src/components/editor/propertyPanelColor.tsx
@@ -121,11 +121,13 @@ export function ColorField({
   label,
   value,
   disabled,
+  flat,
   onCommit,
 }: {
   label: string;
   value: string;
   disabled?: boolean;
+  flat?: boolean;
   onCommit: (nextValue: string) => void;
 }) {
   const buttonRef = useRef<HTMLButtonElement | null>(null);
@@ -349,6 +351,30 @@ export function ColorField({
     }
   };
 
+  if (flat) {
+    return (
+      <div className="flex min-h-[30px] items-center justify-between">
+        <span className="text-[11px] text-panel-text-2">{label}</span>
+        <button
+          type="button"
+          data-flat-color-trigger="true"
+          disabled={disabled}
+          aria-label={`Pick ${label.toLowerCase()} color`}
+          ref={buttonRef}
+          onClick={openPicker}
+          className="flex items-center gap-2 disabled:cursor-not-allowed"
+        >
+          <span
+            className="h-4 w-4 flex-shrink-0 rounded-[4px]"
+            style={{ backgroundColor: value || "transparent" }}
+          />
+          <span className="font-mono text-[11px] text-panel-text-0">{value}</span>
+        </button>
+        {picker}
+      </div>
+    );
+  }
+
   return (
     <div className="grid min-w-0 gap-1.5">
       <span className={LABEL}>{label}</span>
diff --git a/packages/studio/src/components/editor/propertyPanelFont.test.tsx b/packages/studio/src/components/editor/propertyPanelFont.test.tsx
new file mode 100644
index 0000000000..fe4d32a684
--- /dev/null
+++ b/packages/studio/src/components/editor/propertyPanelFont.test.tsx
@@ -0,0 +1,30 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { FontFamilyField } from "./propertyPanelFont";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("FontFamilyField flat trigger", () => {
+  it("renders as a label/value row with a trailing dropdown caret, no boxed border", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(
+        <FontFamilyField flat value="JetBrains Mono" importedFonts={[]} onCommit={vi.fn()} />,
+      );
+    });
+    const trigger = host.querySelector<HTMLButtonElement>('[data-flat-font-trigger="true"]');
+    expect(trigger).not.toBeNull();
+    expect(trigger?.className).not.toContain("border-neutral-800");
+    expect(host.textContent).toContain("JetBrains Mono");
+    act(() => root.unmount());
+  });
+});
diff --git a/packages/studio/src/components/editor/propertyPanelFont.tsx b/packages/studio/src/components/editor/propertyPanelFont.tsx
index a0fd50d7ab..47f9cce4c7 100644
--- a/packages/studio/src/components/editor/propertyPanelFont.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFont.tsx
@@ -123,12 +123,14 @@ function loadImportedFontStylesheet(asset: ImportedFontAsset): void {
 export function FontFamilyField({
   value,
   disabled,
+  flat,
   importedFonts,
   onImportFonts,
   onCommit,
 }: {
   value: string;
   disabled?: boolean;
+  flat?: boolean;
   importedFonts: ImportedFontAsset[];
   onImportFonts?: (files: FileList | File[]) => Promise<ImportedFontAsset[]>;
   onCommit: (nextValue: string) => void;
@@ -366,6 +368,130 @@ export function FontFamilyField({
     setOpen(false);
   };
 
+  const dropdown = open && (
+    <div className="absolute left-0 right-0 top-[calc(100%+6px)] z-50 overflow-hidden rounded-xl border border-neutral-700 bg-neutral-950 shadow-2xl">
+      <div className="grid grid-cols-[minmax(0,1fr)_auto_auto] gap-2 border-b border-neutral-800 p-2">
+        <input
+          ref={inputRef}
+          type="text"
+          value={query}
+          disabled={disabled}
+          placeholder={loadingGoogleFonts ? "Loading Google Fonts..." : "Search fonts"}
+          onChange={(e) => setQuery(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Escape") {
+              e.preventDefault();
+              setOpen(false);
+            }
+            if (e.key === "Enter" && filteredOptions[0]) {
+              e.preventDefault();
+              commitFamily(filteredOptions[0]);
+            }
+          }}
+          className="min-w-0 rounded-lg border border-neutral-800 bg-neutral-900 px-2.5 py-2 text-[11px] font-medium text-neutral-100 outline-none placeholder:text-neutral-600 focus:border-neutral-600"
+        />
+        {canQueryLocalFonts && (
+          <button
+            type="button"
+            disabled={disabled || loadingLocalFonts}
+            onClick={loadBrowserLocalFonts}
+            className="rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 text-[10px] font-medium text-neutral-400 transition-colors hover:border-neutral-600 hover:text-neutral-100 disabled:cursor-not-allowed disabled:text-neutral-700"
+          >
+            {loadingLocalFonts ? "..." : "Local"}
+          </button>
+        )}
+        <button
+          type="button"
+          disabled={disabled || importingFonts || !onImportFonts}
+          onClick={() => fontInputRef.current?.click()}
+          className="rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 text-[10px] font-medium text-neutral-400 transition-colors hover:border-neutral-600 hover:text-neutral-100 disabled:cursor-not-allowed disabled:text-neutral-700"
+        >
+          {importingFonts ? "..." : "Import"}
+        </button>
+        <input
+          ref={fontInputRef}
+          type="file"
+          accept=".ttf,.otf,.ttc,.woff,.woff2,.eot,font/*"
+          multiple
+          aria-label="Import local font files"
+          disabled={disabled || importingFonts || !onImportFonts}
+          className="hidden"
+          onChange={async (event) => {
+            await handleImportFonts(event.target.files);
+            event.target.value = "";
+          }}
+        />
+      </div>
+      {fontNotice && (
+        <div className="border-b border-neutral-800 px-3 py-2 text-[10px] leading-4 text-neutral-500">
+          {fontNotice}
+        </div>
+      )}
+      <div className="max-h-64 overflow-y-auto p-1">
+        {filteredOptions.length === 0 ? (
+          <div className="px-2 py-3 text-[11px] text-neutral-500">No fonts found.</div>
+        ) : (
+          filteredOptions.map((option) => (
+            <button
+              key={`${option.source}-${option.family}`}
+              type="button"
+              onClick={() => commitFamily(option)}
+              className={`flex w-full min-w-0 items-center justify-between gap-3 rounded-lg px-2 py-2 text-left text-[11px] transition-colors ${
+                option.family === currentFamily
+                  ? "bg-studio-accent/15 text-neutral-50"
+                  : "text-neutral-300 hover:bg-neutral-900 hover:text-neutral-100"
+              }`}
+            >
+              <span className="flex min-w-0 items-center gap-1.5">
+                <span className="truncate font-medium">{option.family}</span>
+                {renderAliasFor(option.family) && (
+                  <span className="flex-shrink-0 text-[9px] text-neutral-500">
+                    → {renderAliasFor(option.family)}
+                  </span>
+                )}
+              </span>
+              <span className="flex-shrink-0 text-[9px] uppercase tracking-[0.14em] text-neutral-600">
+                {option.source}
+              </span>
+            </button>
+          ))
+        )}
+      </div>
+    </div>
+  );
+
+  if (flat) {
+    return (
+      <div ref={containerRef} className="relative flex min-h-[30px] items-center justify-between">
+        <span className="text-[11px] text-panel-text-2">Font</span>
+        <button
+          type="button"
+          data-flat-font-trigger="true"
+          disabled={disabled}
+          onClick={() => setOpen((next) => !next)}
+          className="flex items-center gap-1.5 disabled:cursor-not-allowed"
+        >
+          <span
+            className="max-w-[200px] truncate font-mono text-[11px] text-panel-text-0"
+            style={{ fontFamily: value }}
+          >
+            {currentFamily}
+          </span>
+          <svg
+            width="10"
+            height="10"
+            viewBox="0 0 10 10"
+            fill="currentColor"
+            className="flex-shrink-0 text-panel-text-5"
+          >
+            <path d="M2 3l3 4 3-4z" />
+          </svg>
+        </button>
+        {dropdown}
+      </div>
+    );
+  }
+
   return (
     <div ref={containerRef} className="relative grid min-w-0 gap-1.5">
       <span className={LABEL}>Font family</span>
@@ -385,98 +511,7 @@ export function FontFamilyField({
           Font
         </span>
       </button>
-
-      {open && (
-        <div className="absolute left-0 right-0 top-[calc(100%+6px)] z-50 overflow-hidden rounded-xl border border-neutral-700 bg-neutral-950 shadow-2xl">
-          <div className="grid grid-cols-[minmax(0,1fr)_auto_auto] gap-2 border-b border-neutral-800 p-2">
-            <input
-              ref={inputRef}
-              type="text"
-              value={query}
-              disabled={disabled}
-              placeholder={loadingGoogleFonts ? "Loading Google Fonts..." : "Search fonts"}
-              onChange={(e) => setQuery(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === "Escape") {
-                  e.preventDefault();
-                  setOpen(false);
-                }
-                if (e.key === "Enter" && filteredOptions[0]) {
-                  e.preventDefault();
-                  commitFamily(filteredOptions[0]);
-                }
-              }}
-              className="min-w-0 rounded-lg border border-neutral-800 bg-neutral-900 px-2.5 py-2 text-[11px] font-medium text-neutral-100 outline-none placeholder:text-neutral-600 focus:border-neutral-600"
-            />
-            {canQueryLocalFonts && (
-              <button
-                type="button"
-                disabled={disabled || loadingLocalFonts}
-                onClick={loadBrowserLocalFonts}
-                className="rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 text-[10px] font-medium text-neutral-400 transition-colors hover:border-neutral-600 hover:text-neutral-100 disabled:cursor-not-allowed disabled:text-neutral-700"
-              >
-                {loadingLocalFonts ? "..." : "Local"}
-              </button>
-            )}
-            <button
-              type="button"
-              disabled={disabled || importingFonts || !onImportFonts}
-              onClick={() => fontInputRef.current?.click()}
-              className="rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 text-[10px] font-medium text-neutral-400 transition-colors hover:border-neutral-600 hover:text-neutral-100 disabled:cursor-not-allowed disabled:text-neutral-700"
-            >
-              {importingFonts ? "..." : "Import"}
-            </button>
-            <input
-              ref={fontInputRef}
-              type="file"
-              accept=".ttf,.otf,.ttc,.woff,.woff2,.eot,font/*"
-              multiple
-              aria-label="Import local font files"
-              disabled={disabled || importingFonts || !onImportFonts}
-              className="hidden"
-              onChange={async (event) => {
-                await handleImportFonts(event.target.files);
-                event.target.value = "";
-              }}
-            />
-          </div>
-          {fontNotice && (
-            <div className="border-b border-neutral-800 px-3 py-2 text-[10px] leading-4 text-neutral-500">
-              {fontNotice}
-            </div>
-          )}
-          <div className="max-h-64 overflow-y-auto p-1">
-            {filteredOptions.length === 0 ? (
-              <div className="px-2 py-3 text-[11px] text-neutral-500">No fonts found.</div>
-            ) : (
-              filteredOptions.map((option) => (
-                <button
-                  key={`${option.source}-${option.family}`}
-                  type="button"
-                  onClick={() => commitFamily(option)}
-                  className={`flex w-full min-w-0 items-center justify-between gap-3 rounded-lg px-2 py-2 text-left text-[11px] transition-colors ${
-                    option.family === currentFamily
-                      ? "bg-studio-accent/15 text-neutral-50"
-                      : "text-neutral-300 hover:bg-neutral-900 hover:text-neutral-100"
-                  }`}
-                >
-                  <span className="flex min-w-0 items-center gap-1.5">
-                    <span className="truncate font-medium">{option.family}</span>
-                    {renderAliasFor(option.family) && (
-                      <span className="flex-shrink-0 text-[9px] text-neutral-500">
-                        → {renderAliasFor(option.family)}
-                      </span>
-                    )}
-                  </span>
-                  <span className="flex-shrink-0 text-[9px] uppercase tracking-[0.14em] text-neutral-600">
-                    {option.source}
-                  </span>
-                </button>
-              ))
-            )}
-          </div>
-        </div>
-      )}
+      {dropdown}
     </div>
   );
 }
diff --git a/packages/studio/src/components/editor/propertyPanelSections.tsx b/packages/studio/src/components/editor/propertyPanelSections.tsx
index 84ea41980e..a14ea65ae1 100644
--- a/packages/studio/src/components/editor/propertyPanelSections.tsx
+++ b/packages/studio/src/components/editor/propertyPanelSections.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, type ChangeEvent } from "react";
 import { Plus, Type } from "../../icons/SystemIcons";
 import { isTextEditableSelection, type DomEditSelection } from "./domEditing";
 import type { ImportedFontAsset } from "./fontAssets";
@@ -59,17 +59,19 @@ function detectAvailableWeights(fontFamily: string): string[] {
   return available.length > 0 ? available : ALL_WEIGHTS;
 }
 
-function TextAreaField({
+export function TextAreaField({
   label,
   value,
   disabled,
   autoFocus,
+  flat,
   onCommit,
 }: {
   label: string;
   value: string;
   disabled?: boolean;
   autoFocus?: boolean;
+  flat?: boolean;
   onCommit: (nextValue: string) => void;
 }) {
   const [draft, setDraft] = useState(value);
@@ -105,6 +107,38 @@ function TextAreaField({
     }, 120);
   };
 
+  const handleFocus = () => {
+    focusedRef.current = true;
+  };
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setDraft(e.target.value);
+    scheduleCommit(e.target.value);
+  };
+  const handleBlur = () => {
+    focusedRef.current = false;
+    commitDraft(draft);
+  };
+
+  if (flat) {
+    return (
+      <div className="border-l-2 border-panel-border-input py-0.5 pl-[10px]">
+        <div className="mb-[3px] text-[9px] font-semibold uppercase tracking-[0.12em] text-panel-text-5">
+          {label}
+        </div>
+        <textarea
+          ref={textareaRef}
+          value={draft}
+          disabled={disabled}
+          rows={2}
+          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"
+        />
+      </div>
+    );
+  }
+
   return (
     <label className="grid min-w-0 gap-1.5">
       <span className={LABEL}>{label}</span>
@@ -114,17 +148,9 @@ function TextAreaField({
           value={draft}
           disabled={disabled}
           rows={4}
-          onFocus={() => {
-            focusedRef.current = true;
-          }}
-          onChange={(e) => {
-            setDraft(e.target.value);
-            scheduleCommit(e.target.value);
-          }}
-          onBlur={() => {
-            focusedRef.current = false;
-            commitDraft(draft);
-          }}
+          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"
         />
       </div>

From c0a9fbc2b03480dc6eb621dc0428b4a6f32f3503 Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Wed, 8 Jul 2026 21:52:20 -0700
Subject: [PATCH 08/12] feat(studio): add FlatTextSection, the flat inspector's
 canonical reference group

---
 .../editor/propertyPanelFlatTextSection.tsx   | 243 ++++++++++++++++++
 .../editor/propertyPanelSections.test.tsx     | 135 ++++++++++
 .../editor/propertyPanelSections.tsx          |   8 +-
 3 files changed, 382 insertions(+), 4 deletions(-)
 create mode 100644 packages/studio/src/components/editor/propertyPanelFlatTextSection.tsx
 create mode 100644 packages/studio/src/components/editor/propertyPanelSections.test.tsx

diff --git a/packages/studio/src/components/editor/propertyPanelFlatTextSection.tsx b/packages/studio/src/components/editor/propertyPanelFlatTextSection.tsx
new file mode 100644
index 0000000000..dde867a46f
--- /dev/null
+++ b/packages/studio/src/components/editor/propertyPanelFlatTextSection.tsx
@@ -0,0 +1,243 @@
+import { Plus } from "../../icons/SystemIcons";
+import { isTextEditableSelection, type DomEditSelection } from "./domEditing";
+import type { ImportedFontAsset } from "./fontAssets";
+import { normalizeTextMetricValue } from "./propertyPanelHelpers";
+import { ColorField } from "./propertyPanelColor";
+import { FontFamilyField } from "./propertyPanelFont";
+import { FlatRow, FlatSegmentedRow } from "./propertyPanelFlatPrimitives";
+import {
+  resolveValueTier,
+  VALUE_TIER_LABEL_CLASS,
+  VALUE_TIER_VALUE_CLASS,
+} from "./propertyPanelValueTier";
+import {
+  detectAvailableWeights,
+  getTextFieldColor,
+  getTextStyleValue,
+  TextAreaField,
+  TextSection,
+  WEIGHT_LABELS,
+} from "./propertyPanelSections";
+
+/* ------------------------------------------------------------------ */
+/*  Flat text section (design_handoff_studio_inspector, #10a)          */
+/* ------------------------------------------------------------------ */
+
+const ALIGN_OPTIONS = [
+  { key: "left", label: "left", node: "L" },
+  { key: "center", label: "center", node: "C" },
+  { key: "right", label: "right", node: "R" },
+  { key: "justify", label: "justify", node: "J" },
+];
+
+const CASE_OPTIONS = [
+  { key: "none", node: "–" },
+  { key: "uppercase", node: "AG" },
+  { key: "lowercase", node: "ag" },
+];
+
+function FlatTextFieldEditor({
+  field,
+  styles,
+  fontAssets,
+  onImportFonts,
+  onSetText,
+  onSetTextFieldStyle,
+}: {
+  field: DomEditSelection["textFields"][number];
+  styles: Record<string, string>;
+  fontAssets: ImportedFontAsset[];
+  onImportFonts?: (files: FileList | File[]) => Promise<ImportedFontAsset[]>;
+  onSetText: (value: string, fieldKey?: string) => void;
+  onSetTextFieldStyle: (fieldKey: string, property: string, value: string) => void;
+}) {
+  const weight = getTextStyleValue(field, styles, "font-weight", "400");
+  const weightOptions = detectAvailableWeights(
+    field.computedStyles["font-family"] || styles["font-family"] || "",
+  );
+  const align = getTextStyleValue(field, styles, "text-align", "start");
+  const textTransform = getTextStyleValue(field, styles, "text-transform", "none");
+  const fontStyle = getTextStyleValue(field, styles, "font-style", "normal");
+
+  return (
+    <>
+      <TextAreaField
+        flat
+        label="Content"
+        value={field.value}
+        onCommit={(next) => onSetText(next, field.key)}
+      />
+      <FontFamilyField
+        flat
+        value={field.computedStyles["font-family"] || styles["font-family"] || "inherit"}
+        importedFonts={fontAssets}
+        onImportFonts={onImportFonts}
+        onCommit={(next) => onSetTextFieldStyle(field.key, "font-family", next)}
+      />
+      <FlatRow
+        label="Size"
+        value={field.computedStyles["font-size"] || styles["font-size"] || "16px"}
+        tier={resolveValueTier(field.inlineStyles["font-size"], styles["font-size"] || "16px")}
+        onCommit={(next) => onSetTextFieldStyle(field.key, "font-size", next)}
+      />
+      <div className="flex min-h-[30px] items-center justify-between">
+        <span
+          className={
+            VALUE_TIER_LABEL_CLASS[resolveValueTier(field.inlineStyles["font-weight"], "400")]
+          }
+          style={{ fontSize: 11 }}
+        >
+          Weight
+        </span>
+        <label className="flex items-center gap-1.5">
+          <select
+            value={weight}
+            onChange={(e) => onSetTextFieldStyle(field.key, "font-weight", e.target.value)}
+            className={`appearance-none bg-transparent text-right font-mono text-[11px] outline-none ${
+              VALUE_TIER_VALUE_CLASS[resolveValueTier(field.inlineStyles["font-weight"], "400")]
+            }`}
+          >
+            {(weightOptions.includes(weight) ? weightOptions : [weight, ...weightOptions]).map(
+              (option) => (
+                <option key={option} value={option}>
+                  {WEIGHT_LABELS[option] ?? option}
+                </option>
+              ),
+            )}
+          </select>
+          <svg
+            width="10"
+            height="10"
+            viewBox="0 0 10 10"
+            fill="currentColor"
+            className="flex-shrink-0 text-panel-text-5"
+          >
+            <path d="M2 3l3 4 3-4z" />
+          </svg>
+        </label>
+      </div>
+      <FlatRow
+        label="Letter spacing"
+        value={getTextStyleValue(field, styles, "letter-spacing", "0px")}
+        tier={resolveValueTier(field.inlineStyles["letter-spacing"], "0px")}
+        onCommit={(next) =>
+          onSetTextFieldStyle(
+            field.key,
+            "letter-spacing",
+            normalizeTextMetricValue("letter-spacing", next),
+          )
+        }
+        onReset={() => onSetTextFieldStyle(field.key, "letter-spacing", "")}
+      />
+      <FlatRow
+        label="Line height"
+        value={getTextStyleValue(field, styles, "line-height", "normal")}
+        tier={resolveValueTier(field.inlineStyles["line-height"], "normal")}
+        onCommit={(next) =>
+          onSetTextFieldStyle(
+            field.key,
+            "line-height",
+            normalizeTextMetricValue("line-height", next),
+          )
+        }
+        onReset={() => onSetTextFieldStyle(field.key, "line-height", "")}
+      />
+      <FlatSegmentedRow
+        label="Align"
+        options={ALIGN_OPTIONS.map((option) => ({
+          key: option.key,
+          node: option.node,
+          active: align === option.key || (option.key === "left" && align === "start"),
+        }))}
+        onChange={(next) => onSetTextFieldStyle(field.key, "text-align", next)}
+      />
+      <FlatSegmentedRow
+        label="Case · Style"
+        options={[
+          ...CASE_OPTIONS.map((option) => ({
+            key: option.key,
+            node: option.node,
+            active: textTransform === option.key,
+          })),
+          { key: "normal", node: "A", active: fontStyle === "normal" },
+          { key: "italic", node: "A", active: fontStyle === "italic" },
+        ]}
+        spacerAfterIndex={2}
+        onChange={(next) => {
+          if (next === "normal" || next === "italic") {
+            onSetTextFieldStyle(field.key, "font-style", next);
+          } else {
+            onSetTextFieldStyle(field.key, "text-transform", next);
+          }
+        }}
+      />
+      <ColorField
+        flat
+        label="Color"
+        value={getTextFieldColor(field, styles)}
+        onCommit={(next) => onSetTextFieldStyle(field.key, "color", next)}
+      />
+    </>
+  );
+}
+
+export function FlatTextSection({
+  element,
+  styles,
+  fontAssets,
+  onImportFonts,
+  onSetText,
+  onSetTextFieldStyle,
+  onAddTextField,
+  onRemoveTextField,
+}: {
+  element: DomEditSelection;
+  styles: Record<string, string>;
+  fontAssets: ImportedFontAsset[];
+  onImportFonts?: (files: FileList | File[]) => Promise<ImportedFontAsset[]>;
+  onSetText: (value: string, fieldKey?: string) => void;
+  onSetTextFieldStyle: (fieldKey: string, property: string, value: string) => void;
+  onAddTextField: (afterFieldKey?: string) => string | Promise<string | null> | null;
+  onRemoveTextField: (fieldKey: string) => void;
+}) {
+  if (!isTextEditableSelection(element)) return null;
+  const textFields = element.textFields;
+  const activeField = textFields[0];
+  if (!activeField) return null;
+
+  if (textFields.length > 1) {
+    return (
+      <TextSection
+        element={element}
+        styles={styles}
+        fontAssets={fontAssets}
+        onImportFonts={onImportFonts}
+        onSetText={onSetText}
+        onSetTextFieldStyle={onSetTextFieldStyle}
+        onAddTextField={onAddTextField}
+        onRemoveTextField={onRemoveTextField}
+      />
+    );
+  }
+
+  return (
+    <div className="space-y-1.5">
+      <FlatTextFieldEditor
+        field={activeField}
+        styles={styles}
+        fontAssets={fontAssets}
+        onImportFonts={onImportFonts}
+        onSetText={onSetText}
+        onSetTextFieldStyle={onSetTextFieldStyle}
+      />
+      <button
+        type="button"
+        onClick={() => void onAddTextField(activeField.key)}
+        className="mt-0.5 flex items-center gap-[5px] text-[10px] text-panel-text-4 hover:text-panel-text-2"
+      >
+        <Plus size={10} />
+        Add text field
+      </button>
+    </div>
+  );
+}
diff --git a/packages/studio/src/components/editor/propertyPanelSections.test.tsx b/packages/studio/src/components/editor/propertyPanelSections.test.tsx
new file mode 100644
index 0000000000..52fc8dd07f
--- /dev/null
+++ b/packages/studio/src/components/editor/propertyPanelSections.test.tsx
@@ -0,0 +1,135 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { FlatTextSection } from "./propertyPanelFlatTextSection";
+import type { DomEditSelection } from "./domEditingTypes";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function makeElement(overrides: Partial<DomEditSelection> = {}): DomEditSelection {
+  return {
+    element: document.createElement("div"),
+    id: "mono-label",
+    selector: ".mono-label",
+    label: "Mono Label",
+    tagName: "div",
+    sourceFile: "index.html",
+    compositionPath: "index.html",
+    isCompositionHost: false,
+    isInsideLockedComposition: false,
+    boundingBox: { x: 0, y: -24, width: 257, height: 29 },
+    textContent: "PACKETS / FRAME",
+    dataAttributes: {},
+    inlineStyles: {},
+    computedStyles: {},
+    textFields: [
+      {
+        key: "field-0",
+        label: "Text",
+        value: "PACKETS / FRAME",
+        tagName: "div",
+        attributes: [],
+        inlineStyles: { "letter-spacing": "3.96px" },
+        computedStyles: {
+          "font-family": "JetBrains Mono",
+          "font-size": "22px",
+          "font-weight": "400",
+          "letter-spacing": "3.96px",
+          "line-height": "normal",
+          "text-align": "right",
+          "text-transform": "none",
+          "font-style": "normal",
+          color: "rgb(255, 176, 32)",
+        },
+        source: "self",
+      },
+    ],
+    capabilities: {
+      canSelect: true,
+      canEditStyles: true,
+      canCrop: true,
+      canMove: true,
+      canResize: true,
+      canApplyManualOffset: true,
+      canApplyManualSize: true,
+      canApplyManualRotation: true,
+    },
+    ...overrides,
+  } as DomEditSelection;
+}
+
+function renderSection(overrides: Partial<DomEditSelection> = {}) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  const element = makeElement(overrides);
+  act(() => {
+    root.render(
+      <FlatTextSection
+        element={element}
+        styles={{}}
+        fontAssets={[]}
+        onSetText={vi.fn()}
+        onSetTextFieldStyle={vi.fn()}
+        onAddTextField={vi.fn()}
+        onRemoveTextField={vi.fn()}
+      />,
+    );
+  });
+  return { host, root };
+}
+
+describe("FlatTextSection", () => {
+  it("renders the content block and every row from #10a", () => {
+    const { host, root } = renderSection();
+    expect(host.textContent).toContain("PACKETS / FRAME");
+    expect(host.textContent).toContain("Font");
+    expect(host.textContent).toContain("Weight");
+    expect(host.textContent).toContain("Letter spacing");
+    expect(host.textContent).toContain("Line height");
+    expect(host.textContent).toContain("Align");
+    act(() => root.unmount());
+  });
+
+  it("colors letter-spacing mint (explicit, differs from 0px default) with a reset button", () => {
+    const { host, root } = renderSection();
+    const resetButtons = host.querySelectorAll('[data-flat-row-reset="true"]');
+    expect(resetButtons.length).toBeGreaterThan(0);
+    act(() => root.unmount());
+  });
+
+  it("commits a font-weight change through onSetTextFieldStyle", () => {
+    const onSetTextFieldStyle = vi.fn();
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    const element = makeElement();
+    act(() => {
+      root.render(
+        <FlatTextSection
+          element={element}
+          styles={{}}
+          fontAssets={[]}
+          onSetText={vi.fn()}
+          onSetTextFieldStyle={onSetTextFieldStyle}
+          onAddTextField={vi.fn()}
+          onRemoveTextField={vi.fn()}
+        />,
+      );
+    });
+    const select = host.querySelector<HTMLSelectElement>("select");
+    if (!select) throw new Error("expected a weight <select>");
+    act(() => {
+      select.value = "700";
+      select.dispatchEvent(new Event("change", { bubbles: true }));
+    });
+    expect(onSetTextFieldStyle).toHaveBeenCalledWith("field-0", "font-weight", "700");
+    act(() => root.unmount());
+  });
+});
diff --git a/packages/studio/src/components/editor/propertyPanelSections.tsx b/packages/studio/src/components/editor/propertyPanelSections.tsx
index a14ea65ae1..dede93388b 100644
--- a/packages/studio/src/components/editor/propertyPanelSections.tsx
+++ b/packages/studio/src/components/editor/propertyPanelSections.tsx
@@ -18,14 +18,14 @@ function formatTextFieldPreview(value: string): string {
   return `${collapsed.slice(0, 55)}…`;
 }
 
-function getTextFieldColor(
+export function getTextFieldColor(
   field: { computedStyles: Record<string, string> },
   inheritedStyles: Record<string, string>,
 ): string {
   return field.computedStyles.color || inheritedStyles.color || "rgb(0, 0, 0)";
 }
 
-function getTextStyleValue(
+export function getTextStyleValue(
   field: { computedStyles: Record<string, string> },
   inheritedStyles: Record<string, string>,
   property: string,
@@ -35,7 +35,7 @@ function getTextStyleValue(
 }
 
 const ALL_WEIGHTS = ["100", "200", "300", "400", "500", "600", "700", "800", "900"];
-const WEIGHT_LABELS: Record<string, string> = {
+export const WEIGHT_LABELS: Record<string, string> = {
   "100": "100 · Thin",
   "200": "200 · Extra Light",
   "300": "300 · Light",
@@ -47,7 +47,7 @@ const WEIGHT_LABELS: Record<string, string> = {
   "900": "900 · Black",
 };
 
-function detectAvailableWeights(fontFamily: string): string[] {
+export function detectAvailableWeights(fontFamily: string): string[] {
   const fonts = document.fonts;
   if (!fonts) return ALL_WEIGHTS;
   const family = fontFamily.split(",")[0]?.trim().replace(/['"]/g, "");

From f81189204b0d8974389ab6ae559dbb9f94f1dd44 Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Wed, 8 Jul 2026 22:04:57 -0700
Subject: [PATCH 09/12] feat(studio): add flat empty and multi-select states
 (#6b)

---
 .../editor/PropertyPanelEmptyState.test.tsx   |  74 +++++++
 .../editor/PropertyPanelEmptyState.tsx        | 180 +++++++++++++++++-
 .../components/editor/propertyPanelTypes.ts   |   3 +
 3 files changed, 256 insertions(+), 1 deletion(-)
 create mode 100644 packages/studio/src/components/editor/PropertyPanelEmptyState.test.tsx

diff --git a/packages/studio/src/components/editor/PropertyPanelEmptyState.test.tsx b/packages/studio/src/components/editor/PropertyPanelEmptyState.test.tsx
new file mode 100644
index 0000000000..397fb161cf
--- /dev/null
+++ b/packages/studio/src/components/editor/PropertyPanelEmptyState.test.tsx
@@ -0,0 +1,74 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { PropertyPanelEmptyState } from "./PropertyPanelEmptyState";
+import type { DomEditSelection } from "./domEditingTypes";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function renderInto(node: React.ReactElement) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  act(() => {
+    root.render(node);
+  });
+  return { host, root };
+}
+
+describe("PropertyPanelEmptyState — flat empty", () => {
+  it("shows the cursor glyph, headline, and the two shortcut rows", () => {
+    const { host, root } = renderInto(<PropertyPanelEmptyState flat multiSelectCount={0} />);
+    expect(host.textContent).toContain("Nothing selected");
+    expect(host.textContent).toContain("Record a gesture");
+    expect(host.textContent).toContain("Describe a change to the agent");
+    act(() => root.unmount());
+  });
+});
+
+describe("PropertyPanelEmptyState — flat multi-select", () => {
+  const elements = [
+    { id: "mono-label", selector: ".mono-label", label: "Mono Label", tagName: "div" },
+    { id: null, selector: "#s2-chart", label: "S2 Chart", tagName: "div" },
+  ] as unknown as DomEditSelection[];
+
+  it("lists each selected element and wires group/hide-all/clear actions", () => {
+    const onGroupSelection = vi.fn();
+    const onHideAllSelected = vi.fn();
+    const onClearSelection = vi.fn();
+    const { host, root } = renderInto(
+      <PropertyPanelEmptyState
+        flat
+        multiSelectCount={2}
+        multiSelectedElements={elements}
+        onGroupSelection={onGroupSelection}
+        onHideAllSelected={onHideAllSelected}
+        onClearSelection={onClearSelection}
+      />,
+    );
+    expect(host.textContent).toContain("2 elements selected");
+    expect(host.textContent).toContain("Mono Label");
+    expect(host.textContent).toContain("S2 Chart");
+
+    const group = host.querySelector<HTMLButtonElement>('[data-flat-multiselect-group="true"]');
+    act(() => group?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onGroupSelection).toHaveBeenCalledTimes(1);
+
+    const hideAll = host.querySelector<HTMLButtonElement>(
+      '[data-flat-multiselect-hide-all="true"]',
+    );
+    act(() => hideAll?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onHideAllSelected).toHaveBeenCalledTimes(1);
+
+    const clear = host.querySelector<HTMLButtonElement>('[data-flat-multiselect-clear="true"]');
+    act(() => clear?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onClearSelection).toHaveBeenCalledTimes(1);
+    act(() => root.unmount());
+  });
+});
diff --git a/packages/studio/src/components/editor/PropertyPanelEmptyState.tsx b/packages/studio/src/components/editor/PropertyPanelEmptyState.tsx
index 7070a9e366..4a30f867e7 100644
--- a/packages/studio/src/components/editor/PropertyPanelEmptyState.tsx
+++ b/packages/studio/src/components/editor/PropertyPanelEmptyState.tsx
@@ -1,6 +1,184 @@
 import { Eye, Layers } from "../../icons/SystemIcons";
+import type { DomEditSelection } from "./domEditingTypes";
+
+function FlatEmptyState() {
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-2.5 px-8 py-10 text-center">
+      <span className="flex h-11 w-11 items-center justify-center rounded-xl border border-panel-border-input bg-panel-input text-panel-text-3">
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 20 20"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.4"
+        >
+          <path d="M4 3l6 14 2-6 6-2z" strokeLinejoin="round" />
+        </svg>
+      </span>
+      <div className="text-[13px] font-semibold text-panel-text-0">Nothing selected</div>
+      <div className="max-w-[250px] text-[11px] leading-[1.5] text-panel-text-3">
+        Click any element on the canvas to edit it, or drag to select several.
+      </div>
+      <div className="mt-2 flex w-full flex-col gap-1.5">
+        <span className="flex items-center justify-between rounded-lg border border-panel-border bg-panel-bg px-3 py-2">
+          <span className="flex items-center gap-2 text-[11px] text-panel-text-2">
+            <span className="text-panel-danger">●</span>
+            Record a gesture
+          </span>
+          <span className="rounded border border-panel-border-input px-[5px] py-px font-mono text-[9px] text-panel-text-5">
+            R
+          </span>
+        </span>
+        <span className="flex items-center justify-between rounded-lg border border-panel-border bg-panel-bg px-3 py-2">
+          <span className="flex items-center gap-2 text-[11px] text-panel-text-2">
+            <span className="text-panel-accent">✦</span>
+            Describe a change to the agent
+          </span>
+          <span className="rounded border border-panel-border-input px-[5px] py-px font-mono text-[9px] text-panel-text-5">
+            ⌘K
+          </span>
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function elementKindGlyph(element: DomEditSelection): { glyph: string; className: string } {
+  if (element.tagName === "video" || element.tagName === "audio" || element.tagName === "img") {
+    return { glyph: "◆", className: "bg-panel-media/10 text-panel-media" };
+  }
+  if (element.textFields?.length > 0) {
+    return { glyph: "T", className: "bg-panel-accent/10 text-panel-accent" };
+  }
+  return { glyph: "▦", className: "bg-panel-container/10 text-panel-container" };
+}
+
+function FlatMultiSelectState({
+  multiSelectCount,
+  multiSelectedElements = [],
+  onGroupSelection,
+  onHideAllSelected,
+  onClearSelection,
+}: {
+  multiSelectCount: number;
+  multiSelectedElements?: DomEditSelection[];
+  onGroupSelection?: () => void;
+  onHideAllSelected?: () => void;
+  onClearSelection?: () => void;
+}) {
+  return (
+    <div className="flex flex-col gap-3 px-4 py-3">
+      <div className="flex items-center gap-3 rounded-xl border border-panel-border bg-panel-surface p-3">
+        <span className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-panel-accent/10 text-panel-accent">
+          <Layers size={16} />
+        </span>
+        <div className="min-w-0 flex-1">
+          <div className="text-[13px] font-semibold text-panel-text-0">
+            {multiSelectCount} elements selected
+          </div>
+          <div className="mt-px font-mono text-[10px] text-panel-text-3">
+            shift-click to add or remove
+          </div>
+        </div>
+        <button
+          type="button"
+          data-flat-multiselect-clear="true"
+          aria-label="Clear selection"
+          onClick={onClearSelection}
+          className="flex h-[26px] w-[26px] flex-shrink-0 items-center justify-center text-panel-text-3"
+        >
+          <svg
+            width="13"
+            height="13"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+          >
+            <path d="M3 3l10 10M13 3L3 13" />
+          </svg>
+        </button>
+      </div>
+      <div className="flex flex-col gap-1">
+        {multiSelectedElements.map((element) => {
+          const { glyph, className } = elementKindGlyph(element);
+          return (
+            <span
+              key={element.id ?? element.selector}
+              className="flex items-center gap-2 rounded-lg border border-panel-border bg-panel-bg px-2.5 py-[7px]"
+            >
+              <span
+                className={`flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded text-[9px] font-bold ${className}`}
+              >
+                {glyph}
+              </span>
+              <span className="min-w-0 flex-1 truncate text-[11px] text-panel-text-1">
+                {element.label}
+              </span>
+              <span className="flex-shrink-0 font-mono text-[9px] text-panel-text-4">
+                {element.id ? `#${element.id}` : element.selector}
+              </span>
+            </span>
+          );
+        })}
+      </div>
+      <div className="flex gap-2">
+        <button
+          type="button"
+          data-flat-multiselect-group="true"
+          onClick={onGroupSelection}
+          className="flex h-[34px] flex-1 items-center justify-center gap-2 rounded-lg bg-panel-hover text-[11px] font-semibold text-panel-text-0"
+        >
+          <Layers size={13} />
+          Group selection
+        </button>
+        <button
+          type="button"
+          data-flat-multiselect-hide-all="true"
+          onClick={onHideAllSelected}
+          className="flex h-[34px] items-center gap-1.5 rounded-lg border border-panel-border-input bg-panel-input px-3 text-[11px] font-medium text-panel-text-2"
+        >
+          <Eye size={13} />
+          Hide all
+        </button>
+      </div>
+      <span className="text-center text-[10px] text-panel-text-5">
+        Select a single element to edit its properties
+      </span>
+    </div>
+  );
+}
+
+export function PropertyPanelEmptyState({
+  multiSelectCount,
+  flat,
+  multiSelectedElements,
+  onGroupSelection,
+  onHideAllSelected,
+  onClearSelection,
+}: {
+  multiSelectCount: number;
+  flat?: boolean;
+  multiSelectedElements?: DomEditSelection[];
+  onGroupSelection?: () => void;
+  onHideAllSelected?: () => void;
+  onClearSelection?: () => void;
+}) {
+  if (flat) {
+    return multiSelectCount > 1 ? (
+      <FlatMultiSelectState
+        multiSelectCount={multiSelectCount}
+        multiSelectedElements={multiSelectedElements}
+        onGroupSelection={onGroupSelection}
+        onHideAllSelected={onHideAllSelected}
+        onClearSelection={onClearSelection}
+      />
+    ) : (
+      <FlatEmptyState />
+    );
+  }
 
-export function PropertyPanelEmptyState({ multiSelectCount }: { multiSelectCount: number }) {
   return (
     <div className="flex h-full flex-col bg-neutral-900">
       <div className="flex flex-1 flex-col items-center justify-center px-6 text-center">
diff --git a/packages/studio/src/components/editor/propertyPanelTypes.ts b/packages/studio/src/components/editor/propertyPanelTypes.ts
index 48dfef8c58..833264e018 100644
--- a/packages/studio/src/components/editor/propertyPanelTypes.ts
+++ b/packages/studio/src/components/editor/propertyPanelTypes.ts
@@ -25,6 +25,9 @@ export interface PropertyPanelProps {
   assets: string[];
   element: DomEditSelection | null;
   multiSelectCount?: number;
+  multiSelectedElements?: DomEditSelection[];
+  onGroupSelection?: () => void;
+  onHideAllSelected?: () => void;
   copiedAgentPrompt: boolean;
   onClearSelection: () => void;
   onUngroup?: () => void;

From 7aab757e992e4dac6824a3a61ceb53bc4c84efec Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Wed, 8 Jul 2026 22:18:41 -0700
Subject: [PATCH 10/12] feat(studio): wire group-selection and hide-all into
 the property panel

---
 packages/studio/src/components/StudioRightPanel.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/studio/src/components/StudioRightPanel.tsx b/packages/studio/src/components/StudioRightPanel.tsx
index c65fd3d0c4..c8f0bf8282 100644
--- a/packages/studio/src/components/StudioRightPanel.tsx
+++ b/packages/studio/src/components/StudioRightPanel.tsx
@@ -109,6 +109,7 @@ export function StudioRightPanel({
     copiedAgentPrompt,
     clearDomSelection,
     handleUngroupSelection,
+    handleGroupSelection,
     handleDomStyleCommit,
     handleDomAttributeCommit,
     handleDomAttributeLiveCommit,
@@ -342,6 +343,10 @@ export function StudioRightPanel({
     [projectId, refreshFileTree, showToast],
   );
 
+  const handleHideAllSelected = () =>
+    domEditGroupSelections
+      .map((el) => el.id ?? el.selector)
+      .forEach((key) => key && void onToggleElementHidden?.(key, true));
   const propertyPanel = (
     <DesignPanelPromoteProvider
       selection={domEditGroupSelections.length > 1 ? null : domEditSelection}
@@ -359,6 +364,9 @@ export function StudioRightPanel({
         assets={assets}
         element={domEditGroupSelections.length > 1 ? null : domEditSelection}
         multiSelectCount={domEditGroupSelections.length}
+        multiSelectedElements={domEditGroupSelections}
+        onGroupSelection={handleGroupSelection}
+        onHideAllSelected={handleHideAllSelected}
         copiedAgentPrompt={copiedAgentPrompt}
         onClearSelection={clearDomSelection}
         onToggleElementHidden={onToggleElementHidden}

From dc915b3b4048d25e18490f10b85461b2c86f2b31 Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Wed, 8 Jul 2026 22:44:21 -0700
Subject: [PATCH 11/12] feat(studio): render the flat Ledger inspector shell
 behind STUDIO_FLAT_INSPECTOR_ENABLED

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../components/editor/PropertyPanel.test.tsx  | 142 ++++++++++++
 .../src/components/editor/PropertyPanel.tsx   | 197 ++++++++---------
 .../components/editor/PropertyPanelFlat.tsx   | 209 ++++++++++++++++++
 .../components/editor/propertyPanelHelpers.ts |  53 +++++
 .../editor/propertyPanelSections.tsx          |   2 +-
 5 files changed, 503 insertions(+), 100 deletions(-)
 create mode 100644 packages/studio/src/components/editor/PropertyPanel.test.tsx
 create mode 100644 packages/studio/src/components/editor/PropertyPanelFlat.tsx

diff --git a/packages/studio/src/components/editor/PropertyPanel.test.tsx b/packages/studio/src/components/editor/PropertyPanel.test.tsx
new file mode 100644
index 0000000000..6b2ac355e6
--- /dev/null
+++ b/packages/studio/src/components/editor/PropertyPanel.test.tsx
@@ -0,0 +1,142 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { PropertyPanelProps } from "./propertyPanelHelpers";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+// PropertyPanel calls useStudioShellContext() unconditionally; supply the one
+// field it reads (showToast) so the component can mount without the full shell.
+vi.mock("../../contexts/StudioContext", async () => {
+  const actual = await vi.importActual<typeof import("../../contexts/StudioContext")>(
+    "../../contexts/StudioContext",
+  );
+  return { ...actual, useStudioShellContext: () => ({ showToast: vi.fn() }) };
+});
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  vi.doUnmock("./manualEditingAvailability");
+  vi.resetModules();
+});
+
+function baseElement() {
+  return {
+    element: document.createElement("div"),
+    id: "mono-label",
+    selector: ".mono-label",
+    label: "Mono Label",
+    tagName: "div",
+    sourceFile: "index.html",
+    compositionPath: "index.html",
+    isCompositionHost: false,
+    isInsideLockedComposition: false,
+    boundingBox: { x: 0, y: -24, width: 257, height: 29 },
+    textContent: "PACKETS / FRAME",
+    dataAttributes: {},
+    inlineStyles: {},
+    computedStyles: {},
+    textFields: [
+      {
+        key: "field-0",
+        label: "Text",
+        value: "PACKETS / FRAME",
+        tagName: "div",
+        attributes: [],
+        inlineStyles: {},
+        computedStyles: {},
+        source: "self",
+      },
+    ],
+    capabilities: {
+      canSelect: true,
+      canEditStyles: true,
+      canCrop: true,
+      canMove: true,
+      canResize: true,
+      canApplyManualOffset: true,
+      canApplyManualSize: true,
+      canApplyManualRotation: true,
+    },
+  };
+}
+
+async function renderPanel(flatEnabled: boolean) {
+  vi.resetModules();
+  vi.doMock("./manualEditingAvailability", async () => {
+    const actual = await vi.importActual<typeof import("./manualEditingAvailability")>(
+      "./manualEditingAvailability",
+    );
+    return { ...actual, STUDIO_FLAT_INSPECTOR_ENABLED: flatEnabled };
+  });
+  const { PropertyPanel } = await import("./PropertyPanel");
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  // Only the props the render path touches are supplied; the rest are unused at
+  // mount (handlers fire on interaction), so cast a minimal object to the full
+  // props shape rather than stubbing all ~15 required fields.
+  const props = {
+    element: baseElement(),
+    onSetStyle: vi.fn(),
+    onSetText: vi.fn(),
+  } as unknown as PropertyPanelProps;
+  act(() => {
+    root.render(<PropertyPanel {...props} />);
+  });
+  return { host, root };
+}
+
+// renderPanel resetModules()+dynamic-imports PropertyPanel (needed for a fresh
+// flag read); transforming the full section graph uncached can exceed the 5s
+// default under heavy parallel full-suite load, so give these a wider margin.
+const RENDER_TIMEOUT_MS = 20_000;
+
+describe("PropertyPanel — STUDIO_FLAT_INSPECTOR_ENABLED off", () => {
+  it(
+    "renders the legacy header, not the flat header",
+    async () => {
+      const { host, root } = await renderPanel(false);
+      expect(host.querySelector('[data-flat-header-icon="true"]')).toBeNull();
+      expect(host.textContent).toContain("Mono Label");
+      act(() => root.unmount());
+    },
+    RENDER_TIMEOUT_MS,
+  );
+});
+
+describe("PropertyPanel — STUDIO_FLAT_INSPECTOR_ENABLED on", () => {
+  it(
+    "renders the flat header, the Text group open by default, and the flat footer",
+    async () => {
+      const { host, root } = await renderPanel(true);
+      expect(host.querySelector('[data-flat-header-icon="true"]')).not.toBeNull();
+      expect(host.querySelector('[data-flat-group-open="true"]')).not.toBeNull();
+      expect(host.textContent).toContain("Ask agent about this element");
+      act(() => root.unmount());
+    },
+    RENDER_TIMEOUT_MS,
+  );
+
+  it(
+    "collapses the Text group on caret click and can reopen it",
+    async () => {
+      const { host, root } = await renderPanel(true);
+      const collapseButton = host.querySelector<HTMLButtonElement>(
+        '[data-flat-group-open="true"] button[title="Collapse"]',
+      );
+      act(() => collapseButton?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+      expect(host.querySelector('[data-flat-group-open="true"]')).toBeNull();
+      const collapsedRow = host.querySelector<HTMLButtonElement>(
+        '[data-flat-group-collapsed="true"]',
+      );
+      expect(collapsedRow).not.toBeNull();
+      act(() => collapsedRow?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+      expect(host.querySelector('[data-flat-group-open="true"]')).not.toBeNull();
+      act(() => root.unmount());
+    },
+    RENDER_TIMEOUT_MS,
+  );
+});
diff --git a/packages/studio/src/components/editor/PropertyPanel.tsx b/packages/studio/src/components/editor/PropertyPanel.tsx
index 53009b45b3..e0c544effd 100644
--- a/packages/studio/src/components/editor/PropertyPanel.tsx
+++ b/packages/studio/src/components/editor/PropertyPanel.tsx
@@ -5,6 +5,7 @@ import { InspectorHeaderActions } from "./InspectorHeaderActions";
 import { useStudioShellContext } from "../../contexts/StudioContext";
 import { readStudioBoxSize, readStudioPathOffset, readStudioRotation } from "./manualEdits";
 import {
+  buildElementInfoText,
   EMPTY_STYLES,
   formatPxMetricValue,
   parsePxMetricValue,
@@ -24,7 +25,12 @@ import { TextSection, StyleSections } from "./propertyPanelSections";
 import { GsapAnimationSection } from "./GsapAnimationSection";
 import { PropertyPanel3dTransform } from "./propertyPanel3dTransform";
 import { KeyframeNavigation } from "./KeyframeNavigation";
-import { STUDIO_GSAP_PANEL_ENABLED, STUDIO_KEYFRAMES_ENABLED } from "./manualEditingAvailability";
+import {
+  STUDIO_FLAT_INSPECTOR_ENABLED,
+  STUDIO_GSAP_PANEL_ENABLED,
+  STUDIO_KEYFRAMES_ENABLED,
+} from "./manualEditingAvailability";
+import { PropertyPanelFlat } from "./PropertyPanelFlat";
 import { usePlayerStore, liveTime } from "../../player";
 import { TimingSection } from "./propertyPanelTimingSection";
 import { type PropertyPanelProps } from "./propertyPanelHelpers";
@@ -46,61 +52,64 @@ export {
 } from "./propertyPanelHelpers";
 
 // fallow-ignore-next-line complexity
-export const PropertyPanel = memo(function PropertyPanel({
-  projectId,
-  projectDir,
-  assets,
-  element,
-  multiSelectCount = 0,
-  copiedAgentPrompt: _copiedAgentPrompt,
-  onClearSelection,
-  onUngroup,
-  onSetStyle,
-  onSetAttribute,
-  onSetAttributeLive,
-  onApplyColorGradingScope,
-  onSetHtmlAttribute,
-  onRemoveBackground,
-  onSetManualOffset,
-  onSetManualSize,
-  onSetManualRotation,
-  onSetText,
-  onSetTextFieldStyle,
-  onAddTextField,
-  onRemoveTextField,
-  onAskAgent: _onAskAgent,
-  onToggleElementHidden,
-  onImportAssets,
-  fontAssets = [],
-  onImportFonts,
-  previewIframeRef,
-  gsapAnimations = [],
-  gsapMultipleTimelines,
-  gsapUnsupportedTimelinePattern,
-  onUpdateGsapProperty,
-  onUpdateGsapMeta,
-  onDeleteGsapAnimation,
-  onAddGsapProperty,
-  onRemoveGsapProperty,
-  onUpdateGsapFromProperty,
-  onAddGsapFromProperty,
-  onRemoveGsapFromProperty,
-  onAddGsapAnimation,
-  onSetArcPath,
-  onUpdateArcSegment,
-  onUnroll,
-  onUpdateKeyframeEase,
-  onSetAllKeyframeEases,
-  onAddKeyframe,
-  onRemoveKeyframe,
-  onConvertToKeyframes,
-  onCommitAnimatedProperty,
-  onCommitAnimatedProperties,
-  onSeekToTime,
-  recordingState,
-  recordingDuration,
-  onToggleRecording,
-}: PropertyPanelProps) {
+export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelProps) {
+  const {
+    projectId,
+    projectDir,
+    assets,
+    element,
+    multiSelectCount = 0,
+    multiSelectedElements,
+    onGroupSelection,
+    onHideAllSelected,
+    copiedAgentPrompt: _copiedAgentPrompt,
+    onClearSelection,
+    onUngroup,
+    onSetStyle,
+    onSetAttribute,
+    onSetAttributeLive,
+    onApplyColorGradingScope,
+    onSetHtmlAttribute,
+    onRemoveBackground,
+    onSetManualOffset,
+    onSetManualSize,
+    onSetManualRotation,
+    onSetText,
+    onSetTextFieldStyle,
+    onAddTextField,
+    onRemoveTextField,
+    onToggleElementHidden,
+    onImportAssets,
+    fontAssets = [],
+    onImportFonts,
+    previewIframeRef,
+    gsapAnimations = [],
+    gsapMultipleTimelines,
+    gsapUnsupportedTimelinePattern,
+    onUpdateGsapProperty,
+    onUpdateGsapMeta,
+    onDeleteGsapAnimation,
+    onAddGsapProperty,
+    onRemoveGsapProperty,
+    onUpdateGsapFromProperty,
+    onAddGsapFromProperty,
+    onRemoveGsapFromProperty,
+    onAddGsapAnimation,
+    onSetArcPath,
+    onUpdateArcSegment,
+    onUnroll,
+    onUpdateKeyframeEase,
+    onSetAllKeyframeEases,
+    onAddKeyframe,
+    onRemoveKeyframe,
+    onConvertToKeyframes,
+    onCommitAnimatedProperty,
+    onCommitAnimatedProperties,
+    onSeekToTime,
+    recordingState,
+    recordingDuration,
+    onToggleRecording,
+  } = props;
   const styles = element?.computedStyles ?? EMPTY_STYLES;
   const { showToast } = useStudioShellContext();
   const [clipboardCopied, setClipboardCopied] = useState(false);
@@ -170,13 +179,22 @@ export const PropertyPanel = memo(function PropertyPanel({
   };
 
   if (!element) {
-    return <PropertyPanelEmptyState multiSelectCount={multiSelectCount} />;
+    return (
+      <PropertyPanelEmptyState
+        flat={STUDIO_FLAT_INSPECTOR_ENABLED}
+        multiSelectCount={multiSelectCount}
+        multiSelectedElements={multiSelectedElements}
+        onGroupSelection={onGroupSelection}
+        onHideAllSelected={onHideAllSelected}
+        onClearSelection={onClearSelection}
+      />
+    );
   }
 
   const manualOffsetEditingDisabled = !element.capabilities.canApplyManualOffset;
   const manualSizeEditingDisabled = !element.capabilities.canApplyManualSize;
   const manualRotationEditingDisabled = !element.capabilities.canApplyManualRotation;
-  const sourceLabel = element.id ? `#${element.id}` : element.selector;
+  const sourceLabel = element.id ? `#${element.id}` : (element.selector ?? "");
   const showEditableSections = element.capabilities.canEditStyles;
   // Capabilities are already resolved on the selection; recompute only sections,
   // feeding the live GSAP tween count (arrives on the gsapAnimations prop, not the
@@ -234,48 +252,8 @@ export const PropertyPanel = memo(function PropertyPanel({
   const displayH = gsapRuntimeValues?.height ?? resolvedHeight;
   const displayR = gsapRuntimeValues?.rotation ?? manualRotation.angle;
 
-  // fallow-ignore-next-line complexity
   const handleCopyElementInfo = () => {
-    const file = element.sourceFile ?? "index.html";
-    let lineNum: number | null = null;
-    try {
-      const src = previewIframeRef?.current?.contentDocument?.documentElement?.outerHTML ?? "";
-      if (src && element.id) {
-        const idx = src.indexOf(`id="${element.id}"`);
-        if (idx > -1) lineNum = src.slice(0, idx).split("\n").length;
-      }
-      if (!lineNum && element.selector) {
-        const tag = element.tagName.toLowerCase();
-        const cls = element.selector.startsWith(".")
-          ? element.selector.slice(1).split(".")[0]
-          : null;
-        const search = cls ? `class="${cls}` : `<${tag}`;
-        const idx = src.indexOf(search);
-        if (idx > -1) lineNum = src.slice(0, idx).split("\n").length;
-      }
-    } catch {}
-    const fileLoc = lineNum ? `${file}:${lineNum}` : file;
-    const lines = [
-      `Element: ${element.label} (${sourceLabel})`,
-      `File: ${fileLoc}`,
-      `Position: x=${Math.round(element.boundingBox.x)}, y=${Math.round(element.boundingBox.y)}`,
-      `Size: ${Math.round(element.boundingBox.width)}×${Math.round(element.boundingBox.height)}`,
-      `Tag: <${element.tagName}>`,
-    ];
-    if (element.computedStyles["z-index"] && element.computedStyles["z-index"] !== "auto") {
-      lines.push(`Z-index: ${element.computedStyles["z-index"]}`);
-    }
-    if (gsapAnimations.length > 0) {
-      const anim = gsapAnimations[0];
-      lines.push(
-        `Animation: ${anim.method}() ${anim.duration}s at ${anim.position}s, ease: ${anim.ease ?? "default"}`,
-      );
-      const props = Object.entries(anim.properties)
-        .map(([k, v]) => `${k}: ${v}`)
-        .join(", ");
-      if (props) lines.push(`Properties: ${props}`);
-    }
-    const text = lines.join("\n");
+    const text = buildElementInfoText(element, sourceLabel, gsapAnimations, previewIframeRef);
     void navigator.clipboard.writeText(text);
     showToast(`Copied element info for ${element.label} — paste into any AI agent`, "info");
     setClipboardCopied(true);
@@ -283,6 +261,27 @@ export const PropertyPanel = memo(function PropertyPanel({
     clipboardTimerRef.current = setTimeout(() => setClipboardCopied(false), 1500);
   };
 
+  if (STUDIO_FLAT_INSPECTOR_ENABLED) {
+    // Forward the raw props (handlers, ids, assets, recording, fonts, etc.) and
+    // the values the legacy path already computed above (so they aren't derived
+    // twice). PropertyPanelFlat owns the one-open/pin group state.
+    return (
+      <PropertyPanelFlat
+        {...props}
+        element={element}
+        styles={styles}
+        sections={sections}
+        sourceLabel={sourceLabel}
+        gsapBorderRadius={gsapBorderRadius}
+        showEditableSections={showEditableSections}
+        selectedElementHidden={selectedElementHidden}
+        selectedElementId={selectedElementId}
+        clipboardCopied={clipboardCopied}
+        onCopyElementInfo={handleCopyElementInfo}
+      />
+    );
+  }
+
   return (
     <div className="flex h-full min-h-0 flex-col overflow-hidden bg-panel-bg text-panel-text-1">
       <div className="px-4 py-3">
diff --git a/packages/studio/src/components/editor/PropertyPanelFlat.tsx b/packages/studio/src/components/editor/PropertyPanelFlat.tsx
new file mode 100644
index 0000000000..e20b2c7294
--- /dev/null
+++ b/packages/studio/src/components/editor/PropertyPanelFlat.tsx
@@ -0,0 +1,209 @@
+import { useState } from "react";
+import { resolveEditingSections } from "@hyperframes/core/editing";
+import type { DomEditSelection } from "./domEditing";
+import type { PropertyPanelProps } from "./propertyPanelHelpers";
+import { PropertyPanelFlatHeader } from "./PropertyPanelFlatHeader";
+import { PropertyPanelFlatFooter } from "./PropertyPanelFlatFooter";
+import { FlatGroup } from "./propertyPanelFlatPrimitives";
+import { FlatTextSection } from "./propertyPanelFlatTextSection";
+import { formatTextFieldPreview, StyleSections } from "./propertyPanelSections";
+import { TimingSection } from "./propertyPanelTimingSection";
+import { ColorGradingSection } from "./propertyPanelColorGradingSection";
+import { MediaSection } from "./propertyPanelMediaSection";
+
+type EditingSections = ReturnType<typeof resolveEditingSections>;
+
+/**
+ * The flat "Ledger" inspector shell (design_handoff_studio_inspector).
+ *
+ * Extracted from PropertyPanel so that file stays under the 600-LOC gate
+ * (same one-directional-import precedent as FlatTextSection). Rendered only
+ * when STUDIO_FLAT_INSPECTOR_ENABLED is on; owns the one-open/pin group state.
+ *
+ * Intentionally omits the Layout `Section` and `GsapAnimationSection` (Motion)
+ * — flattening those is Layout/Motion plan territory (plans 3–4). A text
+ * element with the flag on will not show Layout/Motion controls; that
+ * regression is scoped and acceptable for an unreleased, flag-gated feature.
+ */
+// fallow-ignore-next-line complexity
+export function PropertyPanelFlat({
+  element,
+  styles,
+  sections,
+  sourceLabel,
+  gsapAnimations = [],
+  gsapBorderRadius,
+  fontAssets = [],
+  showEditableSections,
+  selectedElementHidden,
+  selectedElementId,
+  clipboardCopied,
+  onCopyElementInfo,
+  projectId,
+  projectDir,
+  assets,
+  previewIframeRef,
+  onClearSelection,
+  onUngroup,
+  onSetStyle,
+  onSetAttribute,
+  onSetAttributeLive,
+  onApplyColorGradingScope,
+  onSetHtmlAttribute,
+  onRemoveBackground,
+  onSetText,
+  onSetTextFieldStyle,
+  onAddTextField,
+  onRemoveTextField,
+  onAskAgent,
+  onToggleElementHidden,
+  onImportAssets,
+  onImportFonts,
+  recordingState,
+  recordingDuration,
+  onToggleRecording,
+}: Pick<
+  PropertyPanelProps,
+  | "projectId"
+  | "projectDir"
+  | "assets"
+  | "previewIframeRef"
+  | "onClearSelection"
+  | "onUngroup"
+  | "onSetStyle"
+  | "onSetAttribute"
+  | "onSetAttributeLive"
+  | "onApplyColorGradingScope"
+  | "onSetHtmlAttribute"
+  | "onRemoveBackground"
+  | "onSetText"
+  | "onSetTextFieldStyle"
+  | "onAddTextField"
+  | "onRemoveTextField"
+  | "onAskAgent"
+  | "onToggleElementHidden"
+  | "onImportAssets"
+  | "onImportFonts"
+  | "fontAssets"
+  | "gsapAnimations"
+  | "recordingState"
+  | "recordingDuration"
+  | "onToggleRecording"
+> & {
+  element: DomEditSelection;
+  styles: Record<string, string>;
+  sections: EditingSections;
+  sourceLabel: string;
+  gsapBorderRadius: { tl: number; tr: number; br: number; bl: number } | null;
+  showEditableSections: boolean;
+  selectedElementHidden: boolean;
+  selectedElementId: string | null;
+  clipboardCopied: boolean;
+  onCopyElementInfo: () => void;
+}) {
+  const [openGroupId, setOpenGroupId] = useState<string>("text");
+  const [pinnedGroupIds, setPinnedGroupIds] = useState<string[]>([]);
+
+  const elementKind = sections.media ? "media" : element.textFields.length > 0 ? "text" : "other";
+
+  return (
+    <div className="flex h-full min-h-0 flex-col overflow-hidden bg-panel-bg text-panel-text-1">
+      <PropertyPanelFlatHeader
+        name={element.label}
+        meta={`${sourceLabel} · ${element.tagName}`}
+        elementKind={elementKind}
+        hidden={selectedElementHidden}
+        onToggleHidden={
+          selectedElementId && onToggleElementHidden
+            ? () => void onToggleElementHidden(selectedElementId, !selectedElementHidden)
+            : undefined
+        }
+        copied={clipboardCopied}
+        onCopy={onCopyElementInfo}
+        onClear={onClearSelection}
+        onUngroup={onUngroup}
+        showUngroup={Boolean(onUngroup && element.dataAttributes["hf-group"] != null)}
+      />
+      <div className="flex-1 overflow-y-auto">
+        <FlatGroup
+          title="Text"
+          isOpen={openGroupId === "text" || pinnedGroupIds.includes("text")}
+          isPinned={pinnedGroupIds.includes("text")}
+          onToggleOpen={() => setOpenGroupId((current) => (current === "text" ? "" : "text"))}
+          onTogglePin={() =>
+            setPinnedGroupIds((current) =>
+              current.includes("text")
+                ? current.filter((id) => id !== "text")
+                : [...current, "text"],
+            )
+          }
+          summary={formatTextFieldPreview(element.textFields[0]?.value ?? "")}
+        >
+          <FlatTextSection
+            element={element}
+            styles={styles}
+            fontAssets={fontAssets}
+            onImportFonts={onImportFonts}
+            onSetText={onSetText}
+            onSetTextFieldStyle={onSetTextFieldStyle}
+            onAddTextField={onAddTextField}
+            onRemoveTextField={onRemoveTextField}
+          />
+        </FlatGroup>
+
+        {sections.timing && (
+          <TimingSection
+            element={element}
+            animations={gsapAnimations}
+            onSetAttribute={onSetAttribute}
+          />
+        )}
+        {sections.colorGrading && (
+          <ColorGradingSection
+            key={[
+              element.id ?? "",
+              element.hfId ?? "",
+              element.selector ?? "",
+              String(element.selectorIndex ?? ""),
+            ].join("|")}
+            projectId={projectId}
+            element={element}
+            assets={assets}
+            previewIframeRef={previewIframeRef}
+            onImportAssets={onImportAssets}
+            onSetAttributeLive={onSetAttributeLive}
+            onApplyScope={onApplyColorGradingScope}
+          />
+        )}
+        {sections.media && (
+          <MediaSection
+            projectDir={projectDir}
+            element={element}
+            styles={styles}
+            onSetStyle={onSetStyle}
+            onSetAttribute={onSetAttribute}
+            onSetHtmlAttribute={onSetHtmlAttribute}
+            onRemoveBackground={onRemoveBackground}
+          />
+        )}
+        {showEditableSections && (
+          <StyleSections
+            projectId={projectId}
+            element={element}
+            styles={styles}
+            assets={assets}
+            onSetStyle={onSetStyle}
+            onImportAssets={onImportAssets}
+            gsapBorderRadius={gsapBorderRadius}
+          />
+        )}
+      </div>
+      <PropertyPanelFlatFooter
+        onAskAgent={onAskAgent}
+        recordingState={recordingState}
+        recordingDuration={recordingDuration}
+        onToggleRecording={onToggleRecording}
+      />
+    </div>
+  );
+}
diff --git a/packages/studio/src/components/editor/propertyPanelHelpers.ts b/packages/studio/src/components/editor/propertyPanelHelpers.ts
index 0032c7ca30..993ea77c05 100644
--- a/packages/studio/src/components/editor/propertyPanelHelpers.ts
+++ b/packages/studio/src/components/editor/propertyPanelHelpers.ts
@@ -505,3 +505,56 @@ export function readGsapBorderRadiusForPanel(
     return null;
   }
 }
+
+/**
+ * Builds the multi-line "element info" text copied to the clipboard for an AI
+ * agent. Shared by both the legacy and flat inspector headers (the flat split
+ * needs the same string), so it lives here rather than as a PropertyPanel
+ * closure. Pure — the caller owns the clipboard write, toast, and copied state.
+ */
+// fallow-ignore-next-line complexity
+export function buildElementInfoText(
+  element: DomEditSelection,
+  sourceLabel: string,
+  gsapAnimations: GsapAnimation[],
+  previewIframeRef?: React.RefObject<HTMLIFrameElement | null>,
+): string {
+  const file = element.sourceFile ?? "index.html";
+  let lineNum: number | null = null;
+  try {
+    const src = previewIframeRef?.current?.contentDocument?.documentElement?.outerHTML ?? "";
+    if (src && element.id) {
+      const idx = src.indexOf(`id="${element.id}"`);
+      if (idx > -1) lineNum = src.slice(0, idx).split("\n").length;
+    }
+    if (!lineNum && element.selector) {
+      const tag = element.tagName.toLowerCase();
+      const cls = element.selector.startsWith(".") ? element.selector.slice(1).split(".")[0] : null;
+      const search = cls ? `class="${cls}` : `<${tag}`;
+      const idx = src.indexOf(search);
+      if (idx > -1) lineNum = src.slice(0, idx).split("\n").length;
+    }
+  } catch {}
+  const fileLoc = lineNum ? `${file}:${lineNum}` : file;
+  const lines = [
+    `Element: ${element.label} (${sourceLabel})`,
+    `File: ${fileLoc}`,
+    `Position: x=${Math.round(element.boundingBox.x)}, y=${Math.round(element.boundingBox.y)}`,
+    `Size: ${Math.round(element.boundingBox.width)}×${Math.round(element.boundingBox.height)}`,
+    `Tag: <${element.tagName}>`,
+  ];
+  if (element.computedStyles["z-index"] && element.computedStyles["z-index"] !== "auto") {
+    lines.push(`Z-index: ${element.computedStyles["z-index"]}`);
+  }
+  if (gsapAnimations.length > 0) {
+    const anim = gsapAnimations[0];
+    lines.push(
+      `Animation: ${anim.method}() ${anim.duration}s at ${anim.position}s, ease: ${anim.ease ?? "default"}`,
+    );
+    const props = Object.entries(anim.properties)
+      .map(([k, v]) => `${k}: ${v}`)
+      .join(", ");
+    if (props) lines.push(`Properties: ${props}`);
+  }
+  return lines.join("\n");
+}
diff --git a/packages/studio/src/components/editor/propertyPanelSections.tsx b/packages/studio/src/components/editor/propertyPanelSections.tsx
index dede93388b..007e4098c1 100644
--- a/packages/studio/src/components/editor/propertyPanelSections.tsx
+++ b/packages/studio/src/components/editor/propertyPanelSections.tsx
@@ -12,7 +12,7 @@ import { PromotableControl } from "./PromotableControl";
 /*  Text helpers (used only by text section components)                */
 /* ------------------------------------------------------------------ */
 
-function formatTextFieldPreview(value: string): string {
+export function formatTextFieldPreview(value: string): string {
   const collapsed = value.trim().replace(/\s+/g, " ");
   if (collapsed.length <= 56) return collapsed;
   return `${collapsed.slice(0, 55)}…`;

From 6e9d99ef8f3aec054aebd05c9b2201f15aec4665 Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Thu, 9 Jul 2026 00:19:55 -0700
Subject: [PATCH 12/12] fix(studio): gate flat Text group to text-editable
 elements, dedupe heading in multi-field fallback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The flat inspector's Text FlatGroup rendered unconditionally, showing an
empty "Text" header for non-text elements (image, video, etc). Gate it on
isTextEditableSelection(element) so it disappears entirely when there's no
text to edit.

Also, the legacy multi-field TextSection (used as a fallback when an
element has 2+ text fields) rendered its own internal "Text" heading
nested inside the new flat Text FlatGroup, producing a doubled "Text"
heading. Add a hideOwnHeading prop to TextSection (default false, so its
other — legacy, non-flat — call site is unaffected) and pass it from
FlatTextSection's fallback path.
---
 .../components/editor/PropertyPanel.test.tsx  |  73 ++++++++-
 .../components/editor/PropertyPanelFlat.tsx   |  58 ++++---
 .../editor/propertyPanelFlatTextSection.tsx   |   4 +
 .../editor/propertyPanelSections.test.tsx     |  26 +++
 .../editor/propertyPanelSections.tsx          | 152 ++++++++++--------
 5 files changed, 217 insertions(+), 96 deletions(-)

diff --git a/packages/studio/src/components/editor/PropertyPanel.test.tsx b/packages/studio/src/components/editor/PropertyPanel.test.tsx
index 6b2ac355e6..5c3845e591 100644
--- a/packages/studio/src/components/editor/PropertyPanel.test.tsx
+++ b/packages/studio/src/components/editor/PropertyPanel.test.tsx
@@ -63,7 +63,47 @@ function baseElement() {
   };
 }
 
-async function renderPanel(flatEnabled: boolean) {
+// Bug 1 fixture: no text fields at all, so isTextEditableSelection(element) is
+// false — the Text FlatGroup must not render (not even empty/collapsed).
+function nonTextElement() {
+  return {
+    ...baseElement(),
+    id: "image-clip",
+    selector: "#image-clip",
+    label: "Image Clip",
+    tagName: "img",
+    textContent: "",
+    textFields: [],
+  };
+}
+
+// Bug 2 fixture: 2+ text fields, which routes FlatTextSection to the legacy
+// multi-field <TextSection> fallback — must not double-render the "Text"
+// heading (FlatGroup's own heading + TextSection's internal Section heading).
+function multiFieldTextElement() {
+  const base = baseElement();
+  return {
+    ...base,
+    textFields: [
+      base.textFields[0],
+      {
+        key: "field-1",
+        label: "Text",
+        value: "SECOND FIELD",
+        tagName: "div",
+        attributes: [],
+        inlineStyles: {},
+        computedStyles: {},
+        source: "self",
+      },
+    ],
+  };
+}
+
+async function renderPanel(
+  flatEnabled: boolean,
+  elementOverride: ReturnType<typeof baseElement> = baseElement(),
+) {
   vi.resetModules();
   vi.doMock("./manualEditingAvailability", async () => {
     const actual = await vi.importActual<typeof import("./manualEditingAvailability")>(
@@ -79,9 +119,11 @@ async function renderPanel(flatEnabled: boolean) {
   // mount (handlers fire on interaction), so cast a minimal object to the full
   // props shape rather than stubbing all ~15 required fields.
   const props = {
-    element: baseElement(),
+    element: elementOverride,
+    assets: [],
     onSetStyle: vi.fn(),
     onSetText: vi.fn(),
+    onSetAttributeLive: vi.fn(),
   } as unknown as PropertyPanelProps;
   act(() => {
     root.render(<PropertyPanel {...props} />);
@@ -139,4 +181,31 @@ describe("PropertyPanel — STUDIO_FLAT_INSPECTOR_ENABLED on", () => {
     },
     RENDER_TIMEOUT_MS,
   );
+
+  it(
+    "renders no Text group at all for a non-text element (bug 1)",
+    async () => {
+      const { host, root } = await renderPanel(true, nonTextElement());
+      expect(host.querySelector('[data-flat-group-open="true"]')).toBeNull();
+      expect(host.querySelector('[data-flat-group-collapsed="true"]')).toBeNull();
+      act(() => root.unmount());
+    },
+    RENDER_TIMEOUT_MS,
+  );
+
+  it(
+    "renders exactly one Text heading for a multi-field text element (bug 2)",
+    async () => {
+      const { host, root } = await renderPanel(true, multiFieldTextElement());
+      // The FlatGroup's own "Text" heading is the only one that should exist —
+      // the legacy TextSection's internal Section heading (data-panel-section
+      // ="text") must be suppressed when it's used as the flat fallback.
+      expect(host.querySelector('[data-flat-group-open="true"]')).not.toBeNull();
+      expect(host.querySelector('[data-panel-section="text"]')).toBeNull();
+      // Content from the legacy multi-field fallback must still render.
+      expect(host.textContent).toContain("Text layers");
+      act(() => root.unmount());
+    },
+    RENDER_TIMEOUT_MS,
+  );
 });
diff --git a/packages/studio/src/components/editor/PropertyPanelFlat.tsx b/packages/studio/src/components/editor/PropertyPanelFlat.tsx
index e20b2c7294..a6dfca7182 100644
--- a/packages/studio/src/components/editor/PropertyPanelFlat.tsx
+++ b/packages/studio/src/components/editor/PropertyPanelFlat.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { resolveEditingSections } from "@hyperframes/core/editing";
 import type { DomEditSelection } from "./domEditing";
+import { isTextEditableSelection } from "./domEditing";
 import type { PropertyPanelProps } from "./propertyPanelHelpers";
 import { PropertyPanelFlatHeader } from "./PropertyPanelFlatHeader";
 import { PropertyPanelFlatFooter } from "./PropertyPanelFlatFooter";
@@ -101,9 +102,14 @@ export function PropertyPanelFlat({
   clipboardCopied: boolean;
   onCopyElementInfo: () => void;
 }) {
+  // Defaulting to "text" is harmless for a non-text element even though the
+  // Text FlatGroup won't render (nothing else reads openGroupId yet) — this
+  // only matters once a second FlatGroup exists (Plan 2+), at which point a
+  // non-text element should default-open that group instead.
   const [openGroupId, setOpenGroupId] = useState<string>("text");
   const [pinnedGroupIds, setPinnedGroupIds] = useState<string[]>([]);
 
+  const isTextEditable = isTextEditableSelection(element);
   const elementKind = sections.media ? "media" : element.textFields.length > 0 ? "text" : "other";
 
   return (
@@ -125,31 +131,33 @@ export function PropertyPanelFlat({
         showUngroup={Boolean(onUngroup && element.dataAttributes["hf-group"] != null)}
       />
       <div className="flex-1 overflow-y-auto">
-        <FlatGroup
-          title="Text"
-          isOpen={openGroupId === "text" || pinnedGroupIds.includes("text")}
-          isPinned={pinnedGroupIds.includes("text")}
-          onToggleOpen={() => setOpenGroupId((current) => (current === "text" ? "" : "text"))}
-          onTogglePin={() =>
-            setPinnedGroupIds((current) =>
-              current.includes("text")
-                ? current.filter((id) => id !== "text")
-                : [...current, "text"],
-            )
-          }
-          summary={formatTextFieldPreview(element.textFields[0]?.value ?? "")}
-        >
-          <FlatTextSection
-            element={element}
-            styles={styles}
-            fontAssets={fontAssets}
-            onImportFonts={onImportFonts}
-            onSetText={onSetText}
-            onSetTextFieldStyle={onSetTextFieldStyle}
-            onAddTextField={onAddTextField}
-            onRemoveTextField={onRemoveTextField}
-          />
-        </FlatGroup>
+        {isTextEditable && (
+          <FlatGroup
+            title="Text"
+            isOpen={openGroupId === "text" || pinnedGroupIds.includes("text")}
+            isPinned={pinnedGroupIds.includes("text")}
+            onToggleOpen={() => setOpenGroupId((current) => (current === "text" ? "" : "text"))}
+            onTogglePin={() =>
+              setPinnedGroupIds((current) =>
+                current.includes("text")
+                  ? current.filter((id) => id !== "text")
+                  : [...current, "text"],
+              )
+            }
+            summary={formatTextFieldPreview(element.textFields[0]?.value ?? "")}
+          >
+            <FlatTextSection
+              element={element}
+              styles={styles}
+              fontAssets={fontAssets}
+              onImportFonts={onImportFonts}
+              onSetText={onSetText}
+              onSetTextFieldStyle={onSetTextFieldStyle}
+              onAddTextField={onAddTextField}
+              onRemoveTextField={onRemoveTextField}
+            />
+          </FlatGroup>
+        )}
 
         {sections.timing && (
           <TimingSection
diff --git a/packages/studio/src/components/editor/propertyPanelFlatTextSection.tsx b/packages/studio/src/components/editor/propertyPanelFlatTextSection.tsx
index dde867a46f..85685d5918 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatTextSection.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatTextSection.tsx
@@ -206,6 +206,9 @@ export function FlatTextSection({
   if (!activeField) return null;
 
   if (textFields.length > 1) {
+    // The parent FlatGroup (PropertyPanelFlat) already renders a "Text"
+    // heading around this section — suppress TextSection's own internal
+    // heading so the flat panel doesn't show "Text" twice in a row.
     return (
       <TextSection
         element={element}
@@ -216,6 +219,7 @@ export function FlatTextSection({
         onSetTextFieldStyle={onSetTextFieldStyle}
         onAddTextField={onAddTextField}
         onRemoveTextField={onRemoveTextField}
+        hideOwnHeading
       />
     );
   }
diff --git a/packages/studio/src/components/editor/propertyPanelSections.test.tsx b/packages/studio/src/components/editor/propertyPanelSections.test.tsx
index 52fc8dd07f..fbcff5e0f9 100644
--- a/packages/studio/src/components/editor/propertyPanelSections.test.tsx
+++ b/packages/studio/src/components/editor/propertyPanelSections.test.tsx
@@ -132,4 +132,30 @@ describe("FlatTextSection", () => {
     expect(onSetTextFieldStyle).toHaveBeenCalledWith("field-0", "font-weight", "700");
     act(() => root.unmount());
   });
+
+  it("suppresses TextSection's own heading when falling back for a multi-field element", () => {
+    const { host, root } = renderSection({
+      textFields: [
+        makeElement().textFields[0],
+        {
+          key: "field-1",
+          label: "Text",
+          value: "SECOND FIELD",
+          tagName: "div",
+          attributes: [],
+          inlineStyles: {},
+          computedStyles: {},
+          source: "self",
+        },
+      ],
+    });
+    // TextSection's own Section wrapper (data-panel-section="text") must not
+    // render here — the caller (PropertyPanelFlat's FlatGroup) already shows
+    // a "Text" heading, so a second one from the legacy component would be a
+    // doubled heading.
+    expect(host.querySelector('[data-panel-section="text"]')).toBeNull();
+    // The multi-field fallback's own content must still render.
+    expect(host.textContent).toContain("Text layers");
+    act(() => root.unmount());
+  });
 });
diff --git a/packages/studio/src/components/editor/propertyPanelSections.tsx b/packages/studio/src/components/editor/propertyPanelSections.tsx
index 007e4098c1..e1b0b8923a 100644
--- a/packages/studio/src/components/editor/propertyPanelSections.tsx
+++ b/packages/studio/src/components/editor/propertyPanelSections.tsx
@@ -382,6 +382,7 @@ export function TextSection({
   onSetTextFieldStyle,
   onAddTextField,
   onRemoveTextField,
+  hideOwnHeading = false,
 }: {
   element: DomEditSelection;
   styles: Record<string, string>;
@@ -391,6 +392,11 @@ export function TextSection({
   onSetTextFieldStyle: (fieldKey: string, property: string, value: string) => void;
   onAddTextField: (afterFieldKey?: string) => string | Promise<string | null> | null;
   onRemoveTextField: (fieldKey: string) => void;
+  /** Skip TextSection's own "Text" Section heading/wrapper — for callers (the
+   *  flat inspector's multi-field fallback) that already render their own
+   *  "Text" heading one level up, to avoid a doubled heading. Defaults to
+   *  false so the legacy (non-flat) call site is unaffected. */
+  hideOwnHeading?: boolean;
 }) {
   const hasTextControls = isTextEditableSelection(element);
   const [activeTextFieldKey, setActiveTextFieldKey] = useState<string | null>(
@@ -412,85 +418,93 @@ export function TextSection({
   if (!activeField) return null;
 
   if (textFields.length === 1) {
+    const content = (
+      <TextFieldEditor
+        field={activeField}
+        styles={styles}
+        fontAssets={fontAssets}
+        onImportFonts={onImportFonts}
+        showRemove={false}
+        onSetText={onSetText}
+        onSetTextFieldStyle={onSetTextFieldStyle}
+        onRemoveTextField={onRemoveTextField}
+      />
+    );
+    if (hideOwnHeading) return content;
     return (
       <Section title="Text" icon={<Type size={15} />} defaultCollapsed>
-        <TextFieldEditor
-          field={activeField}
-          styles={styles}
-          fontAssets={fontAssets}
-          onImportFonts={onImportFonts}
-          showRemove={false}
-          onSetText={onSetText}
-          onSetTextFieldStyle={onSetTextFieldStyle}
-          onRemoveTextField={onRemoveTextField}
-        />
+        {content}
       </Section>
     );
   }
 
-  return (
-    <Section title="Text" icon={<Type size={15} />}>
-      <div className="space-y-4">
-        <div className="grid gap-1.5">
-          <div className="flex min-w-0 flex-wrap items-center justify-between gap-2">
-            <span className={LABEL}>Text layers</span>
-            <button
-              type="button"
-              onClick={() => {
-                void Promise.resolve(onAddTextField(activeField.key)).then((nextKey) => {
-                  if (nextKey) setActiveTextFieldKey(nextKey);
-                });
-              }}
-              className="inline-flex h-7 max-w-full items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white"
-            >
-              <Plus size={12} className="flex-shrink-0" />
-              <span className="truncate">Add text</span>
-            </button>
-          </div>
-          <div className="grid gap-2">
-            {textFields.map((field, index) => {
-              const active = field.key === activeField.key;
-              return (
-                <button
-                  key={field.key}
-                  type="button"
-                  onClick={() => setActiveTextFieldKey(field.key)}
-                  className={`min-w-0 w-full rounded-xl border px-3 py-2 text-left transition-colors ${
-                    active
-                      ? "border-studio-accent/50 bg-studio-accent/10"
-                      : "border-neutral-800 bg-neutral-900/80 hover:border-neutral-700 hover:bg-neutral-900"
-                  }`}
-                >
-                  <div className="flex min-w-0 items-center justify-between gap-2">
-                    <div className="flex min-w-0 items-center gap-2">
-                      <span
-                        className="h-4 w-4 flex-shrink-0 rounded border border-neutral-700 bg-neutral-950"
-                        style={{ backgroundColor: getTextFieldColor(field, styles) }}
-                      />
-                      <span className="min-w-0 truncate text-[11px] font-medium text-neutral-100">
-                        {formatTextFieldPreview(field.value) || `Text ${index + 1}`}
-                      </span>
-                    </div>
-                    <span className="flex-shrink-0 rounded-md border border-neutral-700 bg-neutral-950 px-1.5 py-0.5 text-[10px] text-neutral-500">
-                      {field.tagName}
+  const content = (
+    <div className="space-y-4">
+      <div className="grid gap-1.5">
+        <div className="flex min-w-0 flex-wrap items-center justify-between gap-2">
+          <span className={LABEL}>Text layers</span>
+          <button
+            type="button"
+            onClick={() => {
+              void Promise.resolve(onAddTextField(activeField.key)).then((nextKey) => {
+                if (nextKey) setActiveTextFieldKey(nextKey);
+              });
+            }}
+            className="inline-flex h-7 max-w-full items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white"
+          >
+            <Plus size={12} className="flex-shrink-0" />
+            <span className="truncate">Add text</span>
+          </button>
+        </div>
+        <div className="grid gap-2">
+          {textFields.map((field, index) => {
+            const active = field.key === activeField.key;
+            return (
+              <button
+                key={field.key}
+                type="button"
+                onClick={() => setActiveTextFieldKey(field.key)}
+                className={`min-w-0 w-full rounded-xl border px-3 py-2 text-left transition-colors ${
+                  active
+                    ? "border-studio-accent/50 bg-studio-accent/10"
+                    : "border-neutral-800 bg-neutral-900/80 hover:border-neutral-700 hover:bg-neutral-900"
+                }`}
+              >
+                <div className="flex min-w-0 items-center justify-between gap-2">
+                  <div className="flex min-w-0 items-center gap-2">
+                    <span
+                      className="h-4 w-4 flex-shrink-0 rounded border border-neutral-700 bg-neutral-950"
+                      style={{ backgroundColor: getTextFieldColor(field, styles) }}
+                    />
+                    <span className="min-w-0 truncate text-[11px] font-medium text-neutral-100">
+                      {formatTextFieldPreview(field.value) || `Text ${index + 1}`}
                     </span>
                   </div>
-                </button>
-              );
-            })}
-          </div>
+                  <span className="flex-shrink-0 rounded-md border border-neutral-700 bg-neutral-950 px-1.5 py-0.5 text-[10px] text-neutral-500">
+                    {field.tagName}
+                  </span>
+                </div>
+              </button>
+            );
+          })}
         </div>
-        <TextFieldEditor
-          field={activeField}
-          styles={styles}
-          fontAssets={fontAssets}
-          onImportFonts={onImportFonts}
-          showRemove={true}
-          onSetText={onSetText}
-          onSetTextFieldStyle={onSetTextFieldStyle}
-          onRemoveTextField={onRemoveTextField}
-        />
       </div>
+      <TextFieldEditor
+        field={activeField}
+        styles={styles}
+        fontAssets={fontAssets}
+        onImportFonts={onImportFonts}
+        showRemove={true}
+        onSetText={onSetText}
+        onSetTextFieldStyle={onSetTextFieldStyle}
+        onRemoveTextField={onRemoveTextField}
+      />
+    </div>
+  );
+  if (hideOwnHeading) return content;
+  return (
+    <Section title="Text" icon={<Type size={15} />}>
+      {content}
     </Section>
   );
 }