fix(studio): unify property panel audio detection

Author: vanceingalls

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

@@ -22,7 +22,7 @@ afterEach(() => {
   vi.resetModules();
 });
 
-function baseElement() {
+function baseElement(): NonNullable<PropertyPanelProps["element"]> {
   return {
     element: document.createElement("div"),
     id: "mono-label",
@@ -81,7 +81,7 @@ function nonTextElement() {
 // flat multi-field layer list (FlatTextLayerList + FlatTextFieldEditor) —
 // must not double-render the "Text" heading (FlatGroup's own heading; this
 // component never renders one of its own).
-function multiFieldTextElement() {
+function multiFieldTextElement(): NonNullable<PropertyPanelProps["element"]> {
   const base = baseElement();
   return {
     ...base,
@@ -179,8 +179,10 @@ function sixGroupElement() {
 
 /** An `<audio>` clip: placed on the timeline, but nothing a tween could move. */
 function audioClipElement() {
+  const element = document.createElement("audio");
   return {
     ...baseElement(),
+    element,
     id: "vo-1",
     selector: "#vo-1",
     label: "Vo 1",
@@ -199,8 +201,10 @@ function audioClipElement() {
  * Start/Duration back on a thing that has no range.
  */
 function audioBusElement() {
+  const element = document.createElement("hf-audio-group");
   return {
     ...baseElement(),
+    element,
     id: "voiceover",
     selector: "#voiceover",
     label: "Voiceover",
@@ -229,7 +233,7 @@ const INFERRED_TIMING_ANIMATION = {
 
 async function renderPanel(
   flatEnabled: boolean,
-  elementOverride: ReturnType<typeof baseElement> = baseElement(),
+  elementOverride: NonNullable<PropertyPanelProps["element"]> = baseElement(),
   propsOverride: Partial<PropertyPanelProps> = {},
   currentTime?: number,
 ) {
@@ -987,6 +991,31 @@ describe("PropertyPanel — flat group entrance animation scoping (fix round)",
 });
 
 describe("PropertyPanel — Motion is for things that move", () => {
+  it.each([
+    ["a custom music tag", () => document.createElement("music")],
+    [
+      "an element with an audio source",
+      () => {
+        const element = document.createElement("div");
+        element.setAttribute("src", "voiceover.mp3");
+        return element;
+      },
+    ],
+  ])("recognizes %s through the shared audio predicate", async (_label, makeElement) => {
+    const fixture = {
+      ...audioClipElement(),
+      element: makeElement(),
+      tagName: "div",
+    };
+    const { host, root } = await renderPanel(true, fixture);
+    const titles = Array.from(
+      host.querySelectorAll<HTMLElement>("[data-flat-group-collapsed], [data-flat-group-open]"),
+    ).map((node) => node.textContent ?? "");
+    expect(titles.some((title) => title.includes("Motion"))).toBe(false);
+    expect(titles.some((title) => title.includes("Timing"))).toBe(true);
+    act(() => root.unmount());
+  });
+
   it(
     "calls the section Timing on an audio clip, and offers no tween editor",
     async () => {

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

@@ -36,7 +36,7 @@ import { type PropertyPanelProps } from "./propertyPanelHelpers";
 import { GestureRecordPanelButton } from "./GestureRecordControl";
 import { PropertyPanelEmptyState } from "./PropertyPanelEmptyState";
 import { DesignPanelInputProvider } from "../../contexts/DesignPanelInputContext";
-import { HF_AUDIO_GROUP_TAG } from "@hyperframes/core/audio-groups";
+import { isAudioDomElement } from "../../utils/timelineInspector";
 
 // Re-export helpers that external consumers import from this module
 export {
@@ -132,8 +132,7 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
    * `<hf-audio-group>` has no visual to hide at all, and its mute lives on its
    * own row.
    */
-  const selectedTag = element?.tagName?.toLowerCase();
-  const audioSelection = selectedTag === "audio" || selectedTag === HF_AUDIO_GROUP_TAG;
+  const audioSelection = isAudioDomElement(element?.element);
   // Live during playback, the store's when paused — see the hook. Shared with the
   // audio FX panel, which follows the playhead for the same reason: a value the
   // timeline drives has to be shown moving, not frozen at what the attribute says.

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

@@ -1,13 +1,13 @@
 import { scopedElementKey } from "../../hooks/gsapKeyframeCacheHelpers";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useShallow } from "zustand/react/shallow";
 import { DesignPanelInputProvider } from "../../contexts/DesignPanelInputContext";
 import { slugifyDesignInput } from "../../utils/designInputTracking";
 import { isTextEditableSelection } from "./domEditing";
 import type { PropertyPanelFlatProps } from "./propertyPanelFlatProps";
 import { formatPxMetricValue } from "./propertyPanelHelpers";
 import { audioFxSummary } from "./audioFxSummary";
-import { HF_AUDIO_GROUP_TAG, resolveAudioGroups } from "@hyperframes/core/audio-groups";
+import { resolveAudioGroups } from "@hyperframes/core/audio-groups";
 import { PropertyPanelFlatHeader } from "./PropertyPanelFlatHeader";
 import { PropertyPanelFlatFooter } from "./PropertyPanelFlatFooter";
 import { closedGroupHeader, isSelectionHidden } from "./propertyPanelFlatClosedGroup";
@@ -43,6 +43,7 @@ import {
   EMPTY_GSAP_EFFECT_HANDLERS,
   type FlatGroupDescriptor,
 } from "./propertyPanelFlatDescriptors";
+import { isAudioDomElement } from "../../utils/timelineInspector";
 
 /** The flat inspector shell with one shared open-group state. */
 // fallow-ignore-next-line complexity
@@ -170,6 +171,7 @@ export function PropertyPanelFlat({
       timelineSessionEpoch: state.timelineSessionEpoch,
     })),
   );
+  const storeElements = usePlayerStore((state) => state.elements);
   // Identity of the element THIS panel actually renders (not the store's
   // selectedElementId, which flips synchronously on selection while the panel
   // still renders the previous element during async DOM-selection resolution):
@@ -282,8 +284,7 @@ export function PropertyPanelFlat({
           onSetAllKeyframeEases,
         }
       : null;
-  const selectedTag = element.tagName?.toLowerCase();
-  const audioSelection = selectedTag === "audio" || selectedTag === HF_AUDIO_GROUP_TAG;
+  const audioSelection = isAudioDomElement(element.element);
   // Handlers being wired is necessary but not sufficient: App.tsx always passes
   // them, so this alone showed the tween editor for every selection — including
   // an `<audio>` clip and an `<hf-audio-group>` bus, neither of which has a
@@ -300,12 +301,13 @@ export function PropertyPanelFlat({
   // "in Voiceover" for a member (see `audioFxSummary`). Resolved from the live
   // document because membership lives on the members, so the owning group's
   // LABEL is not on the selected element.
-  const audioGroupLabel = ((): string | undefined => {
+  const audioGroupLabel = useMemo((): string | undefined => {
     const doc = element.element?.ownerDocument;
     const id = element.id;
     if (!doc || !id) return undefined;
-    return resolveAudioGroups(doc).find((g) => g.memberIds.includes(id))?.label;
-  })();
+    return resolveAudioGroups(doc).find((group) => group.memberIds.includes(id))?.label;
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- store replacement signals live group membership changed
+  }, [element, storeElements]);
 
   const groups: FlatGroupDescriptor[] = [];
   if (isTextEditable) {