diff --git a/packages/studio/src/components/StudioRightPanel.tsx b/packages/studio/src/components/StudioRightPanel.tsx
index b7d2c6810..ef82b14ac 100644
--- a/packages/studio/src/components/StudioRightPanel.tsx
+++ b/packages/studio/src/components/StudioRightPanel.tsx
@@ -12,8 +12,7 @@ import {
 
 /** Motion data without targeting metadata. */
 type StudioMotionData = Omit<StudioGsapMotion, "kind" | "target" | "updatedAt">;
-import { useCallback } from "react";
-import { resolveDomEditSelection, type DomEditLayerItem } from "./editor/domEditing";
+
 import { useStudioContext } from "../contexts/StudioContext";
 import { usePanelLayoutContext } from "../contexts/PanelLayoutContext";
 import { useFileManagerContext } from "../contexts/FileManagerContext";
@@ -67,23 +66,10 @@ export function StudioRightPanel({
     handleAskAgent,
     handleDomMotionCommit,
     handleDomMotionClear,
-    applyDomSelection,
   } = useDomEditContext();
 
-  const { assets, fontAssets, handleImportFiles, handleImportFonts } = useFileManagerContext();
-
-  const isMasterView = !activeCompPath || activeCompPath === "index.html";
-  const handleSelectLayer = useCallback(
-    (layer: DomEditLayerItem) => {
-      const selection = resolveDomEditSelection(layer.element, {
-        activeCompositionPath: activeCompPath,
-        isMasterView,
-        preferClipAncestor: false,
-      });
-      if (selection) applyDomSelection(selection);
-    },
-    [activeCompPath, isMasterView, applyDomSelection],
-  );
+  const { assets, fontAssets, projectDir, handleImportFiles, handleImportFonts } =
+    useFileManagerContext();
 
   const renderJobs = renderQueue.jobs as RenderJob[];
 
@@ -164,6 +150,7 @@ export function StudioRightPanel({
               ) : designPanelActive ? (
                 <PropertyPanel
                   projectId={projectId}
+                  projectDir={projectDir}
                   assets={assets}
                   element={domEditGroupSelections.length > 1 ? null : domEditSelection}
                   multiSelectCount={domEditGroupSelections.length}
@@ -183,8 +170,6 @@ export function StudioRightPanel({
                   onImportAssets={handleImportFiles}
                   fontAssets={fontAssets}
                   onImportFonts={handleImportFonts}
-                  activeCompositionPath={activeCompPath}
-                  onSelectLayer={handleSelectLayer}
                 />
               ) : motionPanelActive ? (
                 <MotionPanel
diff --git a/packages/studio/src/components/editor/PropertyPanel.tsx b/packages/studio/src/components/editor/PropertyPanel.tsx
index 719062e29..94b23687c 100644
--- a/packages/studio/src/components/editor/PropertyPanel.tsx
+++ b/packages/studio/src/components/editor/PropertyPanel.tsx
@@ -1,11 +1,6 @@
 import { memo } from "react";
 import { Clock, Eye, Layers, MessageSquare, Move, X } from "../../icons/SystemIcons";
-import {
-  collectDomEditLayerItems,
-  getDomEditLayerKey,
-  type DomEditSelection,
-  type DomEditLayerItem,
-} from "./domEditing";
+import { type DomEditSelection } from "./domEditing";
 import { readStudioBoxSize, readStudioPathOffset, readStudioRotation } from "./manualEdits";
 import type { ImportedFontAsset } from "./fontAssets";
 import {
@@ -34,6 +29,7 @@ export {
 
 interface PropertyPanelProps {
   projectId: string;
+  projectDir: string | null;
   assets: string[];
   element: DomEditSelection | null;
   multiSelectCount?: number;
@@ -53,68 +49,6 @@ interface PropertyPanelProps {
   onImportAssets?: (files: FileList) => Promise<string[]>;
   fontAssets?: ImportedFontAsset[];
   onImportFonts?: (files: FileList | File[]) => Promise<ImportedFontAsset[]>;
-  activeCompositionPath?: string | null;
-  onSelectLayer?: (layer: DomEditLayerItem) => void;
-}
-
-/* ------------------------------------------------------------------ */
-/*  LayerTree                                                          */
-/* ------------------------------------------------------------------ */
-
-function LayerTree({
-  element,
-  activeCompositionPath,
-  onSelectLayer,
-}: {
-  element: DomEditSelection | null;
-  activeCompositionPath: string | null;
-  onSelectLayer: (layer: DomEditLayerItem) => void;
-}) {
-  const isMasterView = !activeCompositionPath || activeCompositionPath === "index.html";
-  const layers = collectDomEditLayerItems(element?.element, {
-    activeCompositionPath,
-    isMasterView,
-  });
-  if (layers.length <= 1) return null;
-
-  const selectedKey = element ? getDomEditLayerKey(element) : null;
-
-  return (
-    <Section title="Layers" icon={<Layers size={15} />}>
-      <div className="space-y-0.5">
-        {layers.map((layer) => {
-          const selected = layer.key === selectedKey;
-          return (
-            <button
-              key={layer.key}
-              type="button"
-              onClick={() => onSelectLayer(layer)}
-              className={`flex w-full items-center gap-2 rounded-lg px-2 py-1.5 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 * 12 }}
-            >
-              <span
-                className={`flex h-5 w-5 flex-shrink-0 items-center justify-center rounded text-[9px] font-bold uppercase ${
-                  selected
-                    ? "bg-studio-accent/18 text-studio-accent"
-                    : "bg-neutral-800 text-neutral-500"
-                }`}
-              >
-                {layer.tagName.slice(0, 2)}
-              </span>
-              <span className="min-w-0 flex-1 truncate text-xs">{layer.label}</span>
-              {layer.childCount > 0 && (
-                <span className="text-[9px] tabular-nums text-neutral-500">{layer.childCount}</span>
-              )}
-            </button>
-          );
-        })}
-      </div>
-    </Section>
-  );
 }
 
 /* ------------------------------------------------------------------ */
@@ -184,6 +118,7 @@ function TimingSection({
 
 export const PropertyPanel = memo(function PropertyPanel({
   projectId,
+  projectDir,
   assets,
   element,
   multiSelectCount = 0,
@@ -203,8 +138,6 @@ export const PropertyPanel = memo(function PropertyPanel({
   onImportAssets,
   fontAssets = [],
   onImportFonts,
-  activeCompositionPath = null,
-  onSelectLayer,
 }: PropertyPanelProps) {
   const styles = element?.computedStyles ?? EMPTY_STYLES;
 
@@ -334,11 +267,18 @@ export const PropertyPanel = memo(function PropertyPanel({
           onRemoveTextField={onRemoveTextField}
         />
 
-        {onSelectLayer && (
-          <LayerTree
+        {element.dataAttributes.start != null && (
+          <TimingSection element={element} onSetAttribute={onSetAttribute} />
+        )}
+
+        {isMediaElement(element) && (
+          <MediaSection
+            projectDir={projectDir}
             element={element}
-            activeCompositionPath={activeCompositionPath}
-            onSelectLayer={onSelectLayer}
+            styles={styles}
+            onSetStyle={onSetStyle}
+            onSetAttribute={onSetAttribute}
+            onSetHtmlAttribute={onSetHtmlAttribute}
           />
         )}
 
@@ -388,20 +328,6 @@ export const PropertyPanel = memo(function PropertyPanel({
           </div>
         </Section>
 
-        {element.dataAttributes.start != null && (
-          <TimingSection element={element} onSetAttribute={onSetAttribute} />
-        )}
-
-        {isMediaElement(element) && (
-          <MediaSection
-            element={element}
-            styles={styles}
-            onSetStyle={onSetStyle}
-            onSetAttribute={onSetAttribute}
-            onSetHtmlAttribute={onSetHtmlAttribute}
-          />
-        )}
-
         {showEditableSections && (
           <StyleSections
             projectId={projectId}
diff --git a/packages/studio/src/components/editor/propertyPanelMediaSection.tsx b/packages/studio/src/components/editor/propertyPanelMediaSection.tsx
index 640aa4f6b..33269298d 100644
--- a/packages/studio/src/components/editor/propertyPanelMediaSection.tsx
+++ b/packages/studio/src/components/editor/propertyPanelMediaSection.tsx
@@ -1,4 +1,5 @@
-import { Film, Music } from "../../icons/SystemIcons";
+import { useState } from "react";
+import { Check, ClipboardList, Film, Music } from "../../icons/SystemIcons";
 import type { DomEditSelection } from "./domEditing";
 import {
   formatNumericValue,
@@ -6,14 +7,7 @@ import {
   parseNumericValue,
   RESPONSIVE_GRID,
 } from "./propertyPanelHelpers";
-import {
-  DetailField,
-  MetricField,
-  Section,
-  SegmentedControl,
-  SelectField,
-  SliderControl,
-} from "./propertyPanelPrimitives";
+import { Section, SegmentedControl, SelectField, SliderControl } from "./propertyPanelPrimitives";
 
 const MEDIA_TAGS = new Set(["video", "audio"]);
 
@@ -26,19 +20,15 @@ function formatTimingValue(seconds: number): string {
   return `${seconds.toFixed(2)}s`;
 }
 
-function parseTimingValue(input: string): number | null {
-  const cleaned = input.replace(/s$/i, "").trim();
-  const parsed = Number.parseFloat(cleaned);
-  return Number.isFinite(parsed) && parsed >= 0 ? parsed : null;
-}
-
 export function MediaSection({
+  projectDir,
   element,
   styles,
   onSetStyle,
   onSetAttribute,
   onSetHtmlAttribute,
 }: {
+  projectDir: string | null;
   element: DomEditSelection;
   styles: Record<string, string>;
   onSetStyle: (prop: string, value: string) => void | Promise<void>;
@@ -65,8 +55,17 @@ export function MediaSection({
   const objectFit = styles["object-fit"] || "contain";
   const objectPosition = styles["object-position"] || "center";
 
-  const poster = el.getAttribute("poster") ?? "";
-  const src = el.getAttribute("src") ?? "";
+  const sourceDuration =
+    Number.parseFloat(element.dataAttributes["source-duration"] ?? "") ||
+    (el as HTMLMediaElement).duration ||
+    0;
+  const mediaStartMax = Math.max(30, Math.ceil(sourceDuration || mediaStart + 10));
+
+  const srcAttr = el.getAttribute("src") ?? "";
+  const [copied, setCopied] = useState(false);
+
+  const absoluteSrc =
+    projectDir && srcAttr && !srcAttr.startsWith("http") ? `${projectDir}/${srcAttr}` : srcAttr;
 
   return (
     <Section
@@ -74,11 +73,29 @@ export function MediaSection({
       icon={isVideo ? <Film size={15} /> : <Music size={15} />}
     >
       <div className="space-y-4">
-        {src && (
+        {srcAttr && (
           <div className="min-w-0">
-            <div className="text-[10px] uppercase tracking-[0.12em] text-neutral-500">Source</div>
-            <div className="mt-1 truncate text-[11px] font-medium text-neutral-300" title={src}>
-              {src.split("/").pop() || src}
+            <div className="flex items-center justify-between gap-2">
+              <div className="text-[10px] uppercase tracking-[0.12em] text-neutral-500">Source</div>
+              <button
+                type="button"
+                onClick={() => {
+                  void navigator.clipboard.writeText(absoluteSrc).then(() => {
+                    setCopied(true);
+                    setTimeout(() => setCopied(false), 1500);
+                  });
+                }}
+                className="flex h-6 items-center gap-1 rounded-lg border border-neutral-700 bg-neutral-950 px-2 text-[10px] font-medium text-neutral-400 transition-colors hover:border-neutral-600 hover:text-neutral-200"
+              >
+                {copied ? <Check size={11} /> : <ClipboardList size={11} />}
+                <span>{copied ? "Copied" : "Copy"}</span>
+              </button>
+            </div>
+            <div
+              className="mt-1 truncate text-[11px] font-medium text-neutral-300"
+              title={absoluteSrc}
+            >
+              {absoluteSrc}
             </div>
           </div>
         )}
@@ -98,25 +115,35 @@ export function MediaSection({
           />
         </div>
 
-        <MetricField
-          label="Rate"
-          value={formatNumericValue(playbackRate)}
-          onCommit={(next) => {
-            const parsed = Number.parseFloat(next);
-            if (!Number.isFinite(parsed) || parsed < 0.1 || parsed > 5) return;
-            void onSetAttribute("playback-rate", formatNumericValue(parsed));
-          }}
-        />
+        <div className="grid min-w-0 gap-1.5">
+          <span className={LABEL}>Playback rate</span>
+          <SliderControl
+            value={playbackRate * 100}
+            min={25}
+            max={300}
+            step={5}
+            displayValue={`${formatNumericValue(playbackRate)}x`}
+            formatDisplayValue={(next) => `${formatNumericValue(next / 100)}x`}
+            onCommit={(next) => {
+              void onSetAttribute("playback-rate", formatNumericValue(next / 100));
+            }}
+          />
+        </div>
 
-        <MetricField
-          label="Media start"
-          value={formatTimingValue(mediaStart)}
-          onCommit={(next) => {
-            const parsed = parseTimingValue(next);
-            if (parsed == null) return;
-            void onSetAttribute("media-start", parsed.toFixed(2));
-          }}
-        />
+        <div className="grid min-w-0 gap-1.5">
+          <span className={LABEL}>Media start</span>
+          <SliderControl
+            value={Math.round(mediaStart * 100)}
+            min={0}
+            max={mediaStartMax * 100}
+            step={10}
+            displayValue={formatTimingValue(mediaStart)}
+            formatDisplayValue={(next) => formatTimingValue(next / 100)}
+            onCommit={(next) => {
+              void onSetAttribute("media-start", (next / 100).toFixed(2));
+            }}
+          />
+        </div>
 
         <div className={RESPONSIVE_GRID}>
           <div className="grid min-w-0 gap-1.5">
@@ -180,22 +207,25 @@ export function MediaSection({
                 }}
                 options={["contain", "cover", "fill", "none", "scale-down"]}
               />
-              <DetailField
+              <SelectField
                 label="Position"
                 value={objectPosition}
-                onCommit={(next) => {
+                onChange={(next) => {
                   void onSetStyle("object-position", next);
                 }}
+                options={[
+                  "center",
+                  "top",
+                  "bottom",
+                  "left",
+                  "right",
+                  "left top",
+                  "right top",
+                  "left bottom",
+                  "right bottom",
+                ]}
               />
             </div>
-
-            <DetailField
-              label="Poster"
-              value={poster}
-              onCommit={(next) => {
-                void onSetHtmlAttribute("poster", next || null);
-              }}
-            />
           </>
         )}
       </div>
diff --git a/packages/studio/src/hooks/useAppHotkeys.ts b/packages/studio/src/hooks/useAppHotkeys.ts
index 111ecc69a..31ebac4a7 100644
--- a/packages/studio/src/hooks/useAppHotkeys.ts
+++ b/packages/studio/src/hooks/useAppHotkeys.ts
@@ -57,7 +57,6 @@ export function useAppHotkeys({
   handleTimelineElementDelete,
   handleDomEditElementDelete,
   domEditSelectionRef,
-  clearDomSelectionRef,
   editHistory,
   readOptionalProjectFile,
   readProjectFile,
@@ -116,12 +115,10 @@ export function useAppHotkeys({
       return;
     }
     if (result.ok && result.label) {
-      clearDomSelectionRef.current();
       await syncHistoryPreviewAfterApply(result.paths);
       showToast(`Undid ${result.label}`, "info");
     }
   }, [
-    clearDomSelectionRef,
     editHistory,
     readHistoryProjectFile,
     showToast,
@@ -141,12 +138,10 @@ export function useAppHotkeys({
       return;
     }
     if (result.ok && result.label) {
-      clearDomSelectionRef.current();
       await syncHistoryPreviewAfterApply(result.paths);
       showToast(`Redid ${result.label}`, "info");
     }
   }, [
-    clearDomSelectionRef,
     editHistory,
     readHistoryProjectFile,
     showToast,
diff --git a/packages/studio/vite.adapter.ts b/packages/studio/vite.adapter.ts
index c61e3cf05..bbcb553ec 100644
--- a/packages/studio/vite.adapter.ts
+++ b/packages/studio/vite.adapter.ts
@@ -1,6 +1,6 @@
 // Vite adapter that wires the shared Studio API to the local filesystem and build tools.
 
-import { readFileSync, readdirSync, existsSync, writeFileSync } from "node:fs";
+import { readFileSync, readdirSync, existsSync, writeFileSync, realpathSync } from "node:fs";
 import { join, relative, resolve, isAbsolute } from "node:path";
 import type { ViteDevServer } from "vite";
 import {
@@ -132,7 +132,11 @@ export function createViteAdapter(dataDir: string, server: ViteDevServer): Studi
             if (session.projectId) {
               projectDir = join(dataDir, session.projectId);
               if (existsSync(projectDir)) {
-                return { id: session.projectId, dir: projectDir, title: session.title };
+                return {
+                  id: session.projectId,
+                  dir: realpathSync(projectDir),
+                  title: session.title,
+                };
               }
             }
           } catch {
@@ -141,7 +145,7 @@ export function createViteAdapter(dataDir: string, server: ViteDevServer): Studi
         }
         return null;
       }
-      return { id, dir: projectDir };
+      return { id, dir: realpathSync(projectDir) };
     },
 
     async bundle(dir: string) {