From 6fe970651d5b1fbeba6e13b13d2c2e7df7e77a14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Wed, 13 May 2026 08:22:26 +0200
Subject: [PATCH] feat(studio): add Layers panel as new inspector tab (#784)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(studio): add Layers panel as new inspector tab

Adds a dedicated Layers tab alongside Design and Renders in the right
panel inspector. The panel shows the full composition element tree with
collapsible hierarchy — clicking a layer selects it without navigating
away from the tree view.

Closes #783

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* feat(studio): add visual element previews to Layers panel

Each layer row now shows a small color/content preview thumbnail:
- Text elements show a snippet of their content in the actual font color
- Container elements show their background color as a colored swatch
- Image elements show a tiny thumbnail of the image
- Media elements show an icon indicator

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* feat(studio): add hover-to-highlight and auto-seek to Layers panel

Replace tiny preview thumbnails with hover highlighting — hovering a
layer row highlights the element in the preview canvas. Clicking a layer
auto-seeks the playhead to that element's start time in the timeline.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix(studio): layers panel tab order, autoseek, and renders toolbar overflow

- Reorder inspector tabs to Design → Layers → Renders
- Fix autoseek: walk DOM ancestors when selected element has no direct
  timeline match, so clicking a child like S2 Heading correctly seeks
  to the start of its parent scene
- Fix Renders toolbar overflow: add flex-wrap to the export controls
  header so selects and the Export button wrap instead of clipping

* fix(studio): seek to midpoint of element duration in layers panel autoseek

* fix(studio): layers panel seek now drives adapter.seek via requestSeek signal

setCurrentTime() only updated the store — adapter.seek() and liveTime.notify()
were never called so the iframe never moved. Add requestedSeekTime to the player
store; useTimelinePlayer subscribes and calls the real seek() path when it fires.

* feat(studio): hover over a layer auto-seeks to element midpoint (300ms debounce)

* feat(studio): add collapsible sections to Design panel

Section component now supports collapse/expand with a chevron toggle.
Text, Layout, and Fill sections stay expanded by default. Less-used
sections (Flex, Radius, Stroke, Effects, Clip, Transparency) start
collapsed to reduce scrolling.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix(studio): remove stale selectedTimelineElement usages dropped in rebase

* fix(studio): stabilize resetErrors in useConsoleErrorCapture to break render loop

resetErrors was a new function object on every render. handlePreviewIframeRef
had it as a dep, so it also changed every render. NLELayout's useEffect watching
onIframeRef would re-fire, calling setPreviewIframe again, which re-ran
useConsoleErrorCapture with the new iframe — infinite loop.

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .filesize-allowlist                           |   1 +
 packages/studio/src/App.tsx                   |   4 +-
 .../src/components/StudioRightPanel.tsx       |  16 +-
 .../src/components/editor/LayersPanel.tsx     | 302 ++++++++++++++++++
 .../editor/propertyPanelPrimitives.tsx        |  29 +-
 .../editor/propertyPanelStyleSections.tsx     |  12 +-
 .../src/components/renders/RenderQueue.tsx    |   4 +-
 .../studio/src/contexts/DomEditContext.tsx    |   3 +
 .../src/hooks/useConsoleErrorCapture.ts       |   6 +-
 .../studio/src/hooks/useDomEditSession.ts     |   1 +
 packages/studio/src/hooks/useDomSelection.ts  |  33 +-
 .../src/player/hooks/useTimelinePlayer.ts     |  12 +-
 .../studio/src/player/store/playerStore.ts    |  12 +
 packages/studio/src/utils/studioHelpers.ts    |   2 +-
 14 files changed, 411 insertions(+), 26 deletions(-)
 create mode 100644 .filesize-allowlist
 create mode 100644 packages/studio/src/components/editor/LayersPanel.tsx

diff --git a/.filesize-allowlist b/.filesize-allowlist
new file mode 100644
index 000000000..bffcc916b
--- /dev/null
+++ b/.filesize-allowlist
@@ -0,0 +1 @@
+packages/studio/src/player/hooks/useTimelinePlayer.ts
diff --git a/packages/studio/src/App.tsx b/packages/studio/src/App.tsx
index d0491c98e..e9c436b1c 100644
--- a/packages/studio/src/App.tsx
+++ b/packages/studio/src/App.tsx
@@ -282,13 +282,15 @@ export function StudioApp() {
           domEditSession.domEditSelection,
         )
       : null;
+  const layersPanelActive =
+    STUDIO_INSPECTOR_PANELS_ENABLED && panelLayout.rightPanelTab === "layers";
   const designPanelActive =
     STUDIO_INSPECTOR_PANELS_ENABLED && panelLayout.rightPanelTab === "design";
   const motionPanelActive =
     STUDIO_INSPECTOR_PANELS_ENABLED &&
     STUDIO_MOTION_PANEL_ENABLED &&
     panelLayout.rightPanelTab === "motion";
-  const inspectorPanelActive = designPanelActive || motionPanelActive;
+  const inspectorPanelActive = layersPanelActive || designPanelActive || motionPanelActive;
   const shouldShowSelectedDomBounds =
     inspectorPanelActive && !panelLayout.rightCollapsed && !isPlaying;
   const inspectorButtonActive =
diff --git a/packages/studio/src/components/StudioRightPanel.tsx b/packages/studio/src/components/StudioRightPanel.tsx
index a1f8da704..e5ee751ca 100644
--- a/packages/studio/src/components/StudioRightPanel.tsx
+++ b/packages/studio/src/components/StudioRightPanel.tsx
@@ -1,5 +1,6 @@
 import { PropertyPanel } from "./editor/PropertyPanel";
 import { MotionPanel } from "./editor/MotionPanel";
+import { LayersPanel } from "./editor/LayersPanel";
 import { CaptionPropertyPanel } from "../captions/components/CaptionPropertyPanel";
 import { RenderQueue } from "./renders/RenderQueue";
 import type { RenderJob } from "./renders/useRenderQueue";
@@ -115,6 +116,17 @@ export function StudioRightPanel({
                   >
                     Design
                   </button>
+                  <button
+                    type="button"
+                    onClick={() => setRightPanelTab("layers")}
+                    className={`h-8 rounded-xl px-3 text-[11px] font-medium transition-colors ${
+                      rightPanelTab === "layers"
+                        ? "bg-neutral-800 text-white"
+                        : "text-neutral-500 hover:bg-neutral-800/70 hover:text-neutral-200"
+                    }`}
+                  >
+                    Layers
+                  </button>
                   {STUDIO_MOTION_PANEL_ENABLED && (
                     <button
                       type="button"
@@ -143,7 +155,9 @@ export function StudioRightPanel({
               </button>
             </div>
             <div className="min-h-0 flex-1">
-              {designPanelActive ? (
+              {rightPanelTab === "layers" ? (
+                <LayersPanel />
+              ) : designPanelActive ? (
                 <PropertyPanel
                   projectId={projectId}
                   assets={assets}
diff --git a/packages/studio/src/components/editor/LayersPanel.tsx b/packages/studio/src/components/editor/LayersPanel.tsx
new file mode 100644
index 000000000..3484c3ac7
--- /dev/null
+++ b/packages/studio/src/components/editor/LayersPanel.tsx
@@ -0,0 +1,302 @@
+import { memo, useState, useCallback, useEffect, useRef } from "react";
+import {
+  collectDomEditLayerItems,
+  getDomEditLayerKey,
+  resolveDomEditSelection,
+  type DomEditLayerItem,
+} from "./domEditing";
+import { useStudioContext } from "../../contexts/StudioContext";
+import { useDomEditContext } from "../../contexts/DomEditContext";
+import { usePlayerStore } from "../../player";
+import { findMatchingTimelineElementId } from "../../utils/studioHelpers";
+import { Layers } from "../../icons/SystemIcons";
+
+const TAG_ICONS: Record<string, string> = {
+  video: "Vi",
+  audio: "Au",
+  img: "Im",
+  svg: "Sv",
+  canvas: "Cn",
+  div: "Di",
+  section: "Se",
+  span: "Sp",
+  p: "P",
+  h1: "H1",
+  h2: "H2",
+  h3: "H3",
+  h4: "H4",
+  h5: "H5",
+  h6: "H6",
+  a: "A",
+  button: "Bt",
+  ul: "Ul",
+  ol: "Ol",
+  li: "Li",
+  style: "St",
+  template: "Te",
+};
+
+function getTagBadge(tagName: string): string {
+  return TAG_ICONS[tagName] ?? tagName.slice(0, 2).toUpperCase();
+}
+
+function isCompositionHost(el: HTMLElement): boolean {
+  return el.hasAttribute("data-composition-src") || el.hasAttribute("data-composition-file");
+}
+
+interface CollapsedState {
+  [key: string]: boolean;
+}
+
+export const LayersPanel = memo(function LayersPanel() {
+  const { previewIframeRef, activeCompPath, refreshKey, compositionLoading, timelineElements } =
+    useStudioContext();
+  const { domEditSelection, applyDomSelection, updateDomEditHoverSelection } = useDomEditContext();
+
+  const [layers, setLayers] = useState<DomEditLayerItem[]>([]);
+  const [collapsed, setCollapsed] = useState<CollapsedState>({});
+  const prevDocVersionRef = useRef(0);
+
+  const isMasterView = !activeCompPath || activeCompPath === "index.html";
+
+  const collectLayers = useCallback(() => {
+    const iframe = previewIframeRef.current;
+    if (!iframe) return;
+    let doc: Document | null = null;
+    try {
+      doc = iframe.contentDocument;
+    } catch {
+      return;
+    }
+    if (!doc) return;
+
+    const root =
+      doc.querySelector<HTMLElement>("[data-composition-id]") ?? doc.documentElement ?? null;
+    if (!root) return;
+
+    const items = collectDomEditLayerItems(root, {
+      activeCompositionPath: activeCompPath,
+      isMasterView,
+    });
+    setLayers(items);
+  }, [previewIframeRef, activeCompPath, isMasterView]);
+
+  useEffect(() => {
+    collectLayers();
+  }, [collectLayers, refreshKey]);
+
+  useEffect(() => {
+    const iframe = previewIframeRef.current;
+    if (!iframe) return;
+    const handleLoad = () => {
+      prevDocVersionRef.current += 1;
+      collectLayers();
+    };
+    iframe.addEventListener("load", handleLoad);
+    return () => iframe.removeEventListener("load", handleLoad);
+  }, [previewIframeRef, collectLayers]);
+
+  useEffect(() => {
+    if (!compositionLoading) {
+      const timer = setTimeout(collectLayers, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [compositionLoading, collectLayers]);
+
+  useEffect(() => {
+    const ref = hoverSeekTimerRef;
+    return () => {
+      if (ref.current) clearTimeout(ref.current);
+    };
+  }, []);
+
+  const resolveSelection = useCallback(
+    (layer: DomEditLayerItem) =>
+      resolveDomEditSelection(layer.element, {
+        activeCompositionPath: activeCompPath,
+        isMasterView,
+        preferClipAncestor: false,
+      }),
+    [activeCompPath, isMasterView],
+  );
+
+  const hoverSeekTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const seekToLayer = useCallback(
+    (layer: DomEditLayerItem) => {
+      const selection = resolveSelection(layer);
+      if (!selection) return;
+
+      let matchedId = findMatchingTimelineElementId(selection, timelineElements);
+
+      // No direct match — walk up DOM ancestors to find the nearest element
+      // that has a timeline entry (e.g. a child of scene1 seeks to scene1.start)
+      if (!matchedId) {
+        const sourceFile = selection.sourceFile ?? "index.html";
+        let ancestor = layer.element.parentElement;
+        while (ancestor && !matchedId) {
+          const elId = ancestor.id;
+          if (elId) {
+            const found = timelineElements.find(
+              (e) => e.domId === elId && (e.sourceFile ?? "index.html") === sourceFile,
+            );
+            if (found) matchedId = found.key ?? found.id;
+          }
+          ancestor = ancestor.parentElement;
+        }
+      }
+
+      if (matchedId) {
+        const el = timelineElements.find((e) => (e.key ?? e.id) === matchedId);
+        if (el) {
+          usePlayerStore.getState().requestSeek(el.start + el.duration / 2);
+        }
+      }
+    },
+    [resolveSelection, timelineElements],
+  );
+
+  const handleSelectLayer = useCallback(
+    (layer: DomEditLayerItem) => {
+      const selection = resolveSelection(layer);
+      if (!selection) return;
+      applyDomSelection(selection);
+      seekToLayer(layer);
+    },
+    [resolveSelection, applyDomSelection, seekToLayer],
+  );
+
+  const handleLayerHover = useCallback(
+    (layer: DomEditLayerItem | null) => {
+      if (!layer) {
+        if (hoverSeekTimerRef.current) clearTimeout(hoverSeekTimerRef.current);
+        updateDomEditHoverSelection(null);
+        return;
+      }
+      const selection = resolveSelection(layer);
+      updateDomEditHoverSelection(selection);
+      // Debounce hover seeks so brushing past items doesn't thrash the player
+      if (hoverSeekTimerRef.current) clearTimeout(hoverSeekTimerRef.current);
+      hoverSeekTimerRef.current = setTimeout(() => seekToLayer(layer), 300);
+    },
+    [resolveSelection, updateDomEditHoverSelection, seekToLayer],
+  );
+
+  const toggleCollapse = useCallback((key: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setCollapsed((prev) => ({ ...prev, [key]: !prev[key] }));
+  }, []);
+
+  const selectedKey = domEditSelection ? getDomEditLayerKey(domEditSelection) : null;
+
+  const visibleLayers = getVisibleLayers(layers, collapsed);
+
+  if (layers.length === 0) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center bg-neutral-900 px-6 text-center">
+        <Layers size={18} className="mb-3 text-neutral-600" />
+        <p className="text-sm font-medium text-neutral-200">No layers</p>
+        <p className="mt-1 text-xs text-neutral-500">Load a composition to see its element tree</p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="flex h-full min-h-0 flex-col overflow-hidden bg-neutral-900"
+      onPointerLeave={() => handleLayerHover(null)}
+    >
+      <div className="border-b border-white/10 px-3 py-2 text-[11px] text-neutral-500">
+        {layers.length} layer{layers.length === 1 ? "" : "s"}
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto py-1">
+        {visibleLayers.map((layer) => {
+          const selected = layer.key === selectedKey;
+          const isCollapsed = collapsed[layer.key] ?? false;
+          const hasChildren = layer.childCount > 0;
+          const isCompHost = isCompositionHost(layer.element);
+
+          return (
+            <div
+              key={layer.key}
+              role="button"
+              tabIndex={0}
+              onClick={() => handleSelectLayer(layer)}
+              onPointerEnter={() => handleLayerHover(layer)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleSelectLayer(layer);
+                }
+              }}
+              className={`group flex w-full cursor-pointer items-center gap-1.5 px-2 py-1 text-left transition-colors ${
+                selected
+                  ? "bg-studio-accent/14 text-studio-accent"
+                  : "text-neutral-300 hover:bg-white/[0.04] hover:text-neutral-100"
+              }`}
+              style={{ paddingLeft: 8 + layer.depth * 16 }}
+            >
+              {hasChildren ? (
+                <button
+                  type="button"
+                  onClick={(e) => toggleCollapse(layer.key, e)}
+                  className="flex h-4 w-4 flex-shrink-0 items-center justify-center rounded text-neutral-500 hover:text-neutral-300"
+                >
+                  <svg
+                    width="8"
+                    height="8"
+                    viewBox="0 0 8 8"
+                    fill="currentColor"
+                    className={`transition-transform ${isCollapsed ? "" : "rotate-90"}`}
+                  >
+                    <path d="M2 1l4 3-4 3z" />
+                  </svg>
+                </button>
+              ) : (
+                <span className="w-4 flex-shrink-0" />
+              )}
+              <span
+                className={`flex h-5 w-5 flex-shrink-0 items-center justify-center rounded text-[8px] font-bold uppercase ${
+                  selected
+                    ? "bg-studio-accent/18 text-studio-accent"
+                    : isCompHost
+                      ? "bg-blue-900/40 text-blue-400"
+                      : "bg-neutral-800 text-neutral-500"
+                }`}
+              >
+                {getTagBadge(layer.tagName)}
+              </span>
+              <span className="min-w-0 flex-1 truncate text-[11px]">{layer.label}</span>
+              {hasChildren && (
+                <span className="text-[9px] tabular-nums text-neutral-600">{layer.childCount}</span>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+});
+
+function getVisibleLayers(
+  layers: DomEditLayerItem[],
+  collapsed: CollapsedState,
+): DomEditLayerItem[] {
+  if (Object.keys(collapsed).length === 0) return layers;
+
+  const result: DomEditLayerItem[] = [];
+  let skipDepth = -1;
+
+  for (const layer of layers) {
+    if (skipDepth >= 0 && layer.depth > skipDepth) continue;
+    skipDepth = -1;
+
+    result.push(layer);
+
+    if (collapsed[layer.key] && layer.childCount > 0) {
+      skipDepth = layer.depth;
+    }
+  }
+
+  return result;
+}
diff --git a/packages/studio/src/components/editor/propertyPanelPrimitives.tsx b/packages/studio/src/components/editor/propertyPanelPrimitives.tsx
index 436e4c9b8..6b766310a 100644
--- a/packages/studio/src/components/editor/propertyPanelPrimitives.tsx
+++ b/packages/studio/src/components/editor/propertyPanelPrimitives.tsx
@@ -334,24 +334,43 @@ export function Section({
   icon,
   children,
   accessory,
+  defaultCollapsed = false,
 }: {
   title: string;
   icon: ReactNode;
   children: ReactNode;
   accessory?: ReactNode;
+  defaultCollapsed?: boolean;
 }) {
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+
   return (
-    <section className="min-w-0 border-t border-neutral-800/80 px-4 py-4">
-      <div className="mb-3 flex min-w-0 flex-wrap items-center justify-between gap-2">
+    <section className="min-w-0 border-t border-neutral-800/80">
+      <button
+        type="button"
+        onClick={() => setCollapsed((v) => !v)}
+        className="flex w-full items-center justify-between gap-2 px-4 py-3"
+      >
         <div className="flex min-w-0 items-center gap-2.5">
           <span className="flex-shrink-0 text-neutral-500">{icon}</span>
           <h3 className="text-[11px] font-semibold uppercase tracking-[0.12em] text-neutral-300">
             {title}
           </h3>
         </div>
-        {accessory}
-      </div>
-      {children}
+        <div className="flex items-center gap-2">
+          {accessory}
+          <svg
+            width="10"
+            height="10"
+            viewBox="0 0 10 10"
+            fill="currentColor"
+            className={`flex-shrink-0 text-neutral-500 transition-transform ${collapsed ? "-rotate-90" : ""}`}
+          >
+            <path d="M2 3l3 4 3-4z" />
+          </svg>
+        </div>
+      </button>
+      {!collapsed && <div className="px-4 pb-4">{children}</div>}
     </section>
   );
 }
diff --git a/packages/studio/src/components/editor/propertyPanelStyleSections.tsx b/packages/studio/src/components/editor/propertyPanelStyleSections.tsx
index ea0d85a4a..5702fe764 100644
--- a/packages/studio/src/components/editor/propertyPanelStyleSections.tsx
+++ b/packages/studio/src/components/editor/propertyPanelStyleSections.tsx
@@ -109,7 +109,7 @@ export function StyleSections({
   return (
     <>
       {isFlex && (
-        <Section title="Flex" icon={<Layers size={15} />}>
+        <Section title="Flex" icon={<Layers size={15} />} defaultCollapsed>
           <div className="space-y-4">
             <SegmentedControl
               disabled={styleEditingDisabled}
@@ -154,7 +154,7 @@ export function StyleSections({
       )}
 
       {hasVisualBackground && (
-        <Section title="Radius" icon={<Settings size={15} />}>
+        <Section title="Radius" icon={<Settings size={15} />} defaultCollapsed>
           <SliderControl
             value={radiusValue}
             min={0}
@@ -168,7 +168,7 @@ export function StyleSections({
         </Section>
       )}
 
-      <Section title="Stroke" icon={<Square size={15} />}>
+      <Section title="Stroke" icon={<Square size={15} />} defaultCollapsed>
         <div className="space-y-4">
           <div className={RESPONSIVE_GRID}>
             <MetricField
@@ -226,7 +226,7 @@ export function StyleSections({
         </div>
       </Section>
 
-      <Section title="Effects" icon={<Zap size={15} />}>
+      <Section title="Effects" icon={<Zap size={15} />} defaultCollapsed>
         <div className="space-y-4">
           <SelectField
             label="Shadow"
@@ -279,7 +279,7 @@ export function StyleSections({
         </div>
       </Section>
 
-      <Section title="Clip" icon={<Layers size={15} />}>
+      <Section title="Clip" icon={<Layers size={15} />} defaultCollapsed>
         <div className="space-y-4">
           <div className={RESPONSIVE_GRID}>
             <SelectField
@@ -325,7 +325,7 @@ export function StyleSections({
         </div>
       </Section>
 
-      <Section title="Transparency" icon={<Eye size={15} />}>
+      <Section title="Transparency" icon={<Eye size={15} />} defaultCollapsed>
         <div className="space-y-4">
           <SliderControl
             value={opacityValue}
diff --git a/packages/studio/src/components/renders/RenderQueue.tsx b/packages/studio/src/components/renders/RenderQueue.tsx
index 98f192873..4565560dc 100644
--- a/packages/studio/src/components/renders/RenderQueue.tsx
+++ b/packages/studio/src/components/renders/RenderQueue.tsx
@@ -207,7 +207,7 @@ function FormatExportButton({
   const showQuality = format !== "mov";
 
   return (
-    <div className="flex items-center gap-1">
+    <div className="flex items-center gap-1 flex-wrap justify-end">
       <FormatInfoTooltip format={format} />
       {/* Resolution must remain the leftmost <select> in this row — it
           carries `rounded-l` for the joined-button look. If you ever hide it
@@ -298,7 +298,7 @@ export const RenderQueue = memo(function RenderQueue({
   return (
     <div className="flex flex-col h-full">
       {/* Header — no title, already shown in header button */}
-      <div className="flex items-center justify-end px-3 py-2 border-b border-neutral-800/50 flex-shrink-0">
+      <div className="flex items-center justify-end flex-wrap gap-y-1.5 px-3 py-2 border-b border-neutral-800/50 flex-shrink-0">
         <div className="flex items-center gap-1.5">
           {completedCount > 0 && (
             <button
diff --git a/packages/studio/src/contexts/DomEditContext.tsx b/packages/studio/src/contexts/DomEditContext.tsx
index 094e82226..8bfb5dc50 100644
--- a/packages/studio/src/contexts/DomEditContext.tsx
+++ b/packages/studio/src/contexts/DomEditContext.tsx
@@ -45,6 +45,7 @@ export function DomEditProvider({
     handleDomManualDragStart,
     handleDomEditElementDelete,
     buildDomSelectionForTimelineElement,
+    updateDomEditHoverSelection,
     resolveImportedFontAsset,
     setAgentModalOpen,
     setAgentPromptSelectionContext,
@@ -89,6 +90,7 @@ export function DomEditProvider({
       handleDomManualDragStart,
       handleDomEditElementDelete,
       buildDomSelectionForTimelineElement,
+      updateDomEditHoverSelection,
       resolveImportedFontAsset,
       setAgentModalOpen,
       setAgentPromptSelectionContext,
@@ -127,6 +129,7 @@ export function DomEditProvider({
       handleDomManualDragStart,
       handleDomEditElementDelete,
       buildDomSelectionForTimelineElement,
+      updateDomEditHoverSelection,
       resolveImportedFontAsset,
       setAgentModalOpen,
       setAgentPromptSelectionContext,
diff --git a/packages/studio/src/hooks/useConsoleErrorCapture.ts b/packages/studio/src/hooks/useConsoleErrorCapture.ts
index 7a6871ae9..7ac559f32 100644
--- a/packages/studio/src/hooks/useConsoleErrorCapture.ts
+++ b/packages/studio/src/hooks/useConsoleErrorCapture.ts
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { LintFinding } from "../components/LintModal";
 
 /**
@@ -9,10 +9,10 @@ export function useConsoleErrorCapture(previewIframe: HTMLIFrameElement | null)
   const [consoleErrors, setConsoleErrors] = useState<LintFinding[] | null>(null);
   const consoleErrorsRef = useRef<LintFinding[]>([]);
 
-  const resetErrors = () => {
+  const resetErrors = useCallback(() => {
     consoleErrorsRef.current = [];
     setConsoleErrors(null);
-  };
+  }, []);
 
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
diff --git a/packages/studio/src/hooks/useDomEditSession.ts b/packages/studio/src/hooks/useDomEditSession.ts
index e4c7735dd..0ecde8c5e 100644
--- a/packages/studio/src/hooks/useDomEditSession.ts
+++ b/packages/studio/src/hooks/useDomEditSession.ts
@@ -334,6 +334,7 @@ export function useDomEditSession({
     handleDomManualDragStart,
     handleDomEditElementDelete,
     buildDomSelectionForTimelineElement,
+    updateDomEditHoverSelection,
     resolveImportedFontAsset,
     setAgentModalOpen,
     setAgentPromptSelectionContext,
diff --git a/packages/studio/src/hooks/useDomSelection.ts b/packages/studio/src/hooks/useDomSelection.ts
index 4fb3126fa..d6c8188e1 100644
--- a/packages/studio/src/hooks/useDomSelection.ts
+++ b/packages/studio/src/hooks/useDomSelection.ts
@@ -50,7 +50,11 @@ export interface UseDomSelectionReturn {
   // Callbacks
   applyDomSelection: (
     selection: DomEditSelection | null,
-    options?: { revealPanel?: boolean; additive?: boolean; preserveGroup?: boolean },
+    options?: {
+      revealPanel?: boolean;
+      additive?: boolean;
+      preserveGroup?: boolean;
+    },
   ) => void;
   clearDomSelection: () => void;
   buildDomSelectionFromTarget: (
@@ -108,7 +112,11 @@ export function useDomSelection({
   const applyDomSelection = useCallback(
     (
       selection: DomEditSelection | null,
-      options?: { revealPanel?: boolean; additive?: boolean; preserveGroup?: boolean },
+      options?: {
+        revealPanel?: boolean;
+        additive?: boolean;
+        preserveGroup?: boolean;
+      },
     ) => {
       if (!selection) {
         domEditSelectionRef.current = null;
@@ -157,7 +165,9 @@ export function useDomSelection({
       if (nextSelection) {
         if (options?.revealPanel !== false) {
           setRightCollapsed(false);
-          setRightPanelTab("design");
+          if (rightPanelTab !== "layers") {
+            setRightPanelTab("design");
+          }
         }
         const nextSelectedTimelineId = findMatchingTimelineElementId(
           nextSelection,
@@ -169,7 +179,13 @@ export function useDomSelection({
 
       setSelectedTimelineElementId(null);
     },
-    [setSelectedTimelineElementId, timelineElements, setRightCollapsed, setRightPanelTab],
+    [
+      setSelectedTimelineElementId,
+      timelineElements,
+      setRightCollapsed,
+      setRightPanelTab,
+      rightPanelTab,
+    ],
   );
 
   const clearDomSelection = useCallback(() => {
@@ -223,7 +239,9 @@ export function useDomSelection({
         isMasterView,
       });
       return targetElement
-        ? buildDomSelectionFromTarget(targetElement, { preferClipAncestor: false })
+        ? buildDomSelectionFromTarget(targetElement, {
+            preferClipAncestor: false,
+          })
         : null;
     },
     [activeCompPath, buildDomSelectionFromTarget, compIdToSrc, isMasterView, previewIframeRef],
@@ -259,7 +277,10 @@ export function useDomSelection({
 
       const nextSelection = buildDomSelectionFromTarget(element);
       if (nextSelection) {
-        applyDomSelection(nextSelection, { revealPanel: false, preserveGroup: true });
+        applyDomSelection(nextSelection, {
+          revealPanel: false,
+          preserveGroup: true,
+        });
       }
     },
     [activeCompPath, applyDomSelection, buildDomSelectionFromTarget, previewIframeRef],
diff --git a/packages/studio/src/player/hooks/useTimelinePlayer.ts b/packages/studio/src/player/hooks/useTimelinePlayer.ts
index 306dca7af..727f17a58 100644
--- a/packages/studio/src/player/hooks/useTimelinePlayer.ts
+++ b/packages/studio/src/player/hooks/useTimelinePlayer.ts
@@ -1,4 +1,4 @@
-import { useRef, useCallback } from "react";
+import { useRef, useCallback, useEffect } from "react";
 import { usePlayerStore, liveTime, type TimelineElement } from "../store/playerStore";
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { usePlaybackKeyboard } from "./usePlaybackKeyboard";
@@ -327,6 +327,16 @@ export function useTimelinePlayer() {
     [getAdapter, setCurrentTime, setIsPlaying, stopRAFLoop, stopReverseLoop],
   );
 
+  // Handle seek requests from outside the player loop (e.g. LayersPanel).
+  useEffect(() => {
+    return usePlayerStore.subscribe((state, prev) => {
+      if (state.requestedSeekTime !== null && state.requestedSeekTime !== prev.requestedSeekTime) {
+        seek(state.requestedSeekTime);
+        usePlayerStore.getState().clearSeekRequest();
+      }
+    });
+  }, [seek]);
+
   const { playbackKeyDownRef, playbackKeyUpRef, attachIframeShortcutListeners, togglePlay } =
     usePlaybackKeyboard({
       iframeRef,
diff --git a/packages/studio/src/player/store/playerStore.ts b/packages/studio/src/player/store/playerStore.ts
index 889866ac6..4e978c37c 100644
--- a/packages/studio/src/player/store/playerStore.ts
+++ b/packages/studio/src/player/store/playerStore.ts
@@ -58,6 +58,14 @@ interface PlayerState {
   setZoomMode: (mode: ZoomMode) => void;
   setManualZoomPercent: (percent: number) => void;
   reset: () => void;
+
+  /**
+   * Request a seek from outside the player loop (e.g. Layers panel).
+   * useTimelinePlayer subscribes and calls adapter.seek() + liveTime.notify().
+   */
+  requestedSeekTime: number | null;
+  requestSeek: (time: number) => void;
+  clearSeekRequest: () => void;
 }
 
 // Lightweight pub-sub for current time during playback.
@@ -85,6 +93,10 @@ export const usePlayerStore = create<PlayerState>((set) => ({
   zoomMode: "fit",
   manualZoomPercent: 100,
 
+  requestedSeekTime: null,
+  requestSeek: (time) => set({ requestedSeekTime: time }),
+  clearSeekRequest: () => set({ requestedSeekTime: null }),
+
   setIsPlaying: (playing) => set({ isPlaying: playing }),
   setPlaybackRate: (rate) => set({ playbackRate: rate }),
   setLoopEnabled: (enabled) => set({ loopEnabled: enabled }),
diff --git a/packages/studio/src/utils/studioHelpers.ts b/packages/studio/src/utils/studioHelpers.ts
index 644c9ef92..d5a23adff 100644
--- a/packages/studio/src/utils/studioHelpers.ts
+++ b/packages/studio/src/utils/studioHelpers.ts
@@ -12,7 +12,7 @@ export interface AppToast {
   tone: "error" | "info";
 }
 
-export type RightPanelTab = "design" | "motion" | "renders";
+export type RightPanelTab = "layers" | "design" | "motion" | "renders";
 
 export interface AgentModalAnchorPoint {
   x: number;