@hyperframes/studio 0.7.5 → 0.7.7

package/src/components/editor/PropertyPanel.tsx

@@ -84,6 +84,8 @@ export const PropertyPanel = memo(function PropertyPanel({
   onSetArcPath,
   onUpdateArcSegment,
   onUnroll,
+  onUpdateKeyframeEase,
+  onSetAllKeyframeEases,
   onAddKeyframe,
   onRemoveKeyframe,
   onConvertToKeyframes,
@@ -233,6 +235,55 @@ 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");
+    void navigator.clipboard.writeText(text);
+    showToast(`Copied element info for ${element.label} — paste into any AI agent`, "info");
+    setClipboardCopied(true);
+    clearTimeout(clipboardTimerRef.current);
+    clipboardTimerRef.current = setTimeout(() => setClipboardCopied(false), 1500);
+  };
+
   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">
@@ -246,60 +297,7 @@ export const PropertyPanel = memo(function PropertyPanel({
           <div className="flex items-center gap-1">
             <button
               type="button"
-              onClick={() => {
-                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");
-                void navigator.clipboard.writeText(text);
-                showToast(
-                  `Copied element info for ${element.label} — paste into any AI agent`,
-                  "info",
-                );
-                setClipboardCopied(true);
-                clearTimeout(clipboardTimerRef.current);
-                clipboardTimerRef.current = setTimeout(() => setClipboardCopied(false), 1500);
-              }}
+              onClick={handleCopyElementInfo}
               className={`flex h-6 w-6 items-center justify-center rounded transition-colors ${
                 clipboardCopied
                   ? "text-studio-accent"
@@ -350,8 +348,15 @@ export const PropertyPanel = memo(function PropertyPanel({
           onRemoveTextField={onRemoveTextField}
         />
 
-        {element.dataAttributes.start != null && (
-          <TimingSection element={element} onSetAttribute={onSetAttribute} />
+        {(element.dataAttributes.start != null || gsapAnimations.length > 0) && (
+          // Render whenever there's an authored clip range OR animations to infer
+          // one from — a pure-GSAP element with no data-start still gets a Timing
+          // range (TimingSection derives it from its tweens).
+          <TimingSection
+            element={element}
+            animations={gsapAnimations}
+            onSetAttribute={onSetAttribute}
+          />
         )}
         {isMediaElement(element) && (
           <MediaSection
@@ -558,6 +563,8 @@ export const PropertyPanel = memo(function PropertyPanel({
               onSetArcPath={onSetArcPath}
               onUpdateArcSegment={onUpdateArcSegment}
               onUnroll={onUnroll}
+              onUpdateKeyframeEase={onUpdateKeyframeEase}
+              onSetAllKeyframeEases={onSetAllKeyframeEases}
             />
           )}
 

package/src/components/editor/gsapAnimationCallbacks.ts

@@ -28,6 +28,9 @@ export interface GsapAnimationEditCallbacks {
     segmentIndex: number,
     update: Partial<ArcPathSegment>,
   ) => void;
+  onUpdateKeyframeEase?: (animationId: string, percentage: number, ease: string) => void;
+  /** Apply one ease to every keyframe segment at once (clears per-segment overrides). */
+  onSetAllKeyframeEases?: (animationId: string, ease: string) => void;
   /** Unroll a computed (helper/loop) tween into literal tweens so it edits directly. */
   onUnroll?: (animationId: string) => void;
 }

package/src/components/editor/gsapAnimationConstants.ts

@@ -88,38 +88,12 @@ export const PROP_TOOLTIPS: Record<string, string> = {
   innerText: "End value for a number roll-up (the number it counts up/down to)",
 };
 
-export const EASE_LABELS: Record<string, string> = {
-  none: "Constant speed",
-  "power1.out": "Gentle slowdown",
-  "power2.out": "Smooth slowdown",
-  "power3.out": "Snappy slowdown",
-  "power4.out": "Sharp slowdown",
-  "power1.in": "Gentle speedup",
-  "power2.in": "Smooth speedup",
-  "power3.in": "Strong speedup",
-  "power4.in": "Sharp speedup",
-  "power1.inOut": "Gentle ease",
-  "power2.inOut": "Smooth ease",
-  "power3.inOut": "Strong ease",
-  "power4.inOut": "Sharp ease",
-  "back.out": "Overshoot & settle",
-  "back.in": "Pull back & go",
-  "back.inOut": "Pull & overshoot",
-  "elastic.out": "Springy bounce",
-  "elastic.in": "Wind up spring",
-  "elastic.inOut": "Full spring",
-  "bounce.out": "Drop & bounce",
-  "bounce.in": "Reverse bounce",
-  "bounce.inOut": "Double bounce",
-  "expo.out": "Very snappy stop",
-  "expo.in": "Very slow start",
-  "expo.inOut": "Dramatic ease",
-  "spring-gentle": "Gentle spring",
-  "spring-bouncy": "Bouncy spring",
-  "spring-stiff": "Stiff spring",
-  "spring-wobbly": "Wobbly spring",
-  "spring-heavy": "Heavy spring",
-};
+// Ease labels surface the raw GSAP token (e.g. "power2.out", "back.out") rather
+// than friendly names — motion authors recognize the GSAP vocabulary, and the
+// invented labels ("Smooth speedup") confused users. Every consumer reads
+// `EASE_LABELS[token] ?? token`, so an empty map cleanly falls through to the
+// token; re-add an entry here only to override a specific token's display.
+export const EASE_LABELS: Record<string, string> = {};
 
 export const EASE_CURVES: Record<string, [number, number, number, number]> = {
   none: [0, 0, 1, 1],
@@ -141,6 +115,11 @@ export const EASE_CURVES: Record<string, [number, number, number, number]> = {
   "expo.out": [0.16, 1, 0.3, 1],
   "expo.in": [0.7, 0, 0.84, 0],
   "expo.inOut": [0.87, 0, 0.13, 1],
+  // After Effects polarity: "in" eases into the keyframe (slow END, CP2 y=1),
+  // "out" eases out of it (slow START, CP1 y=0). Matches the "(AE)" labels.
+  "ae-ease": [0.333, 0, 0.667, 1],
+  "ae-ease-in": [0.333, 0.333, 0.667, 1],
+  "ae-ease-out": [0.333, 0, 0.667, 0.667],
 };
 
 export function parseCustomEaseFromString(ease: string): {

package/src/components/editor/gsapAnimationHelpers.test.ts

@@ -73,7 +73,7 @@ describe("buildTweenSummary", () => {
     expect(s).toContain("[opacity 0%");
     expect(s).toContain("move x -50px");
     expect(s).toContain("opacity to 100%");
-    expect(s).toContain("very snappy stop");
+    expect(s).toContain("expo.out");
   });
 
   it("handles fromTo with empty fromProperties", () => {

package/src/components/editor/manualOffsetDrag.ts

@@ -443,6 +443,14 @@ export function endManualOffsetDragMembers(members: ManualOffsetDragMember[]): v
     member.element.removeAttribute("data-hf-drag-initial-offset-y");
     member.element.removeAttribute("data-hf-drag-gsap-base-x");
     member.element.removeAttribute("data-hf-drag-gsap-base-y");
+    // Clear the draft's `translate: none` so the soft reload starts clean —
+    // otherwise button-less pointermoves after the reload compute deltas
+    // from a stale base and fling the element off-screen (#1673).
+    // Do NOT clearProps:"transform" — that nukes the committed GSAP position
+    // and causes a visual snap-back before the soft reload re-applies it.
+    if (member.element.style.getPropertyValue("translate") === "none") {
+      member.element.style.removeProperty("translate");
+    }
     resumeGsapTimelines(member.element);
   }
 }

package/src/components/editor/marqueeCommit.ts

@@ -0,0 +1,168 @@
+import { useCallback, useRef, useState } from "react";
+import type { DomEditSelection } from "./domEditing";
+import { collectDomEditLayerItems, resolveDomEditSelection } from "./domEditingLayers";
+import { isElementComputedVisible } from "./domEditingElement";
+import { coversComposition } from "../../utils/studioPreviewHelpers";
+import { elementObbCorners, marqueeIntersectsObb } from "../../utils/marqueeGeometry";
+
+interface MarqueeState {
+  startX: number;
+  startY: number;
+  currentX: number;
+  currentY: number;
+  pointerId: number;
+  pastThreshold: boolean;
+}
+
+const MARQUEE_THRESHOLD_PX = 4;
+
+// fallow-ignore-next-line complexity
+async function runMarqueeIntersection(
+  rect: { left: number; top: number; width: number; height: number },
+  iframe: HTMLIFrameElement,
+  overlayEl: HTMLDivElement,
+  activeCompositionPath: string,
+): Promise<DomEditSelection[]> {
+  const doc = iframe.contentDocument;
+  if (!doc) return [];
+
+  const root = doc.querySelector<HTMLElement>("[data-composition-id]") ?? doc.body;
+  const isMasterView = !activeCompositionPath || activeCompositionPath === "index.html";
+  const items = collectDomEditLayerItems(root, { activeCompositionPath, isMasterView });
+
+  const rootEl = doc.querySelector<HTMLElement>("[data-composition-id]") ?? doc.documentElement;
+  const declW = Number.parseFloat(rootEl?.getAttribute("data-width") ?? "");
+  const declH = Number.parseFloat(rootEl?.getAttribute("data-height") ?? "");
+  const viewport = {
+    width: declW > 0 ? declW : rootEl.getBoundingClientRect().width || 1,
+    height: declH > 0 ? declH : rootEl.getBoundingClientRect().height || 1,
+  };
+
+  const hits: DomEditSelection[] = [];
+  for (const item of items) {
+    const el = item.element;
+    if (!isElementComputedVisible(el)) continue;
+    if (coversComposition(el.getBoundingClientRect(), viewport)) continue;
+    const corners = elementObbCorners(el, overlayEl, iframe);
+    if (!corners) continue;
+    if (!marqueeIntersectsObb(rect, corners)) continue;
+    const sel = await resolveDomEditSelection(el, {
+      activeCompositionPath,
+      isMasterView,
+      skipSourceProbe: true,
+    });
+    if (sel) hits.push(sel);
+  }
+
+  return hits;
+}
+
+interface MarqueeGesturesDeps {
+  iframeRef: React.RefObject<HTMLIFrameElement | null>;
+  overlayRef: React.RefObject<HTMLDivElement | null>;
+  activeCompositionPathRef: React.RefObject<string | null>;
+  onMarqueeSelectRef: React.RefObject<
+    ((selections: DomEditSelection[], additive: boolean) => void) | undefined
+  >;
+  selectionRef: React.RefObject<DomEditSelection | null>;
+  gestures: {
+    onPointerMove: (event: React.PointerEvent<HTMLDivElement>) => void;
+    onPointerUp: (event: React.PointerEvent<HTMLDivElement>) => void;
+    clearPointerState: (ref: React.RefObject<DomEditSelection | null>) => void;
+  };
+}
+
+// fallow-ignore-next-line complexity
+export function useMarqueeGestures(deps: MarqueeGesturesDeps) {
+  const marqueeRef = useRef<MarqueeState | null>(null);
+  const [marqueeRect, setMarqueeRect] = useState<{
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+  } | null>(null);
+
+  const commitMarquee = useCallback(
+    async (
+      rect: { left: number; top: number; width: number; height: number },
+      additive: boolean,
+    ) => {
+      const iframe = deps.iframeRef.current;
+      const overlay = deps.overlayRef.current;
+      if (!iframe || !overlay || !deps.onMarqueeSelectRef.current) return;
+      const acp = deps.activeCompositionPathRef.current ?? "index.html";
+      const hits = await runMarqueeIntersection(rect, iframe, overlay, acp);
+      deps.onMarqueeSelectRef.current(hits, additive);
+    },
+    [deps.iframeRef, deps.overlayRef, deps.onMarqueeSelectRef, deps.activeCompositionPathRef],
+  );
+
+  const onPointerMove = useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      const m = marqueeRef.current;
+      if (m) {
+        const oRect = deps.overlayRef.current?.getBoundingClientRect();
+        if (!oRect) return;
+        m.currentX = event.clientX - oRect.left;
+        m.currentY = event.clientY - oRect.top;
+        if (!m.pastThreshold) {
+          const dx = m.currentX - m.startX;
+          const dy = m.currentY - m.startY;
+          if (Math.hypot(dx, dy) < MARQUEE_THRESHOLD_PX) return;
+          m.pastThreshold = true;
+        }
+        setMarqueeRect({
+          left: Math.min(m.startX, m.currentX),
+          top: Math.min(m.startY, m.currentY),
+          width: Math.abs(m.currentX - m.startX),
+          height: Math.abs(m.currentY - m.startY),
+        });
+        return;
+      }
+      deps.gestures.onPointerMove(event);
+    },
+    [deps.gestures, deps.overlayRef],
+  );
+
+  const onPointerUp = useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      const m = marqueeRef.current;
+      if (m) {
+        marqueeRef.current = null;
+        try {
+          (event.currentTarget as HTMLElement).releasePointerCapture(m.pointerId);
+        } catch {
+          /* already released */
+        }
+        if (m.pastThreshold) {
+          commitMarquee(
+            {
+              left: Math.min(m.startX, m.currentX),
+              top: Math.min(m.startY, m.currentY),
+              width: Math.abs(m.currentX - m.startX),
+              height: Math.abs(m.currentY - m.startY),
+            },
+            event.shiftKey,
+          );
+        } else {
+          deps.onMarqueeSelectRef.current?.([], false);
+        }
+        setMarqueeRect(null);
+        return;
+      }
+      deps.gestures.onPointerUp(event);
+    },
+    [deps.gestures, commitMarquee, deps.onMarqueeSelectRef],
+  );
+
+  const onPointerCancel = useCallback(() => {
+    if (marqueeRef.current) {
+      marqueeRef.current = null;
+      setMarqueeRect(null);
+      return;
+    }
+    deps.gestures.clearPointerState(deps.selectionRef);
+  }, [deps.gestures, deps.selectionRef]);
+
+  return { marqueeRef, marqueeRect, onPointerMove, onPointerUp, onPointerCancel };
+}

package/src/components/editor/propertyPanelHelpers.ts

@@ -66,6 +66,8 @@ export interface PropertyPanelProps {
     value: number | string,
   ) => void;
   onRemoveKeyframe?: (animationId: string, percentage: number) => void;
+  onUpdateKeyframeEase?: (animationId: string, percentage: number, ease: string) => void;
+  onSetAllKeyframeEases?: (animationId: string, ease: string) => void;
   onConvertToKeyframes?: (animationId: string) => void;
   onCommitAnimatedProperty?: (
     selection: DomEditSelection,
@@ -210,7 +212,9 @@ export const LABEL = "text-[11px] font-medium text-panel-text-3";
 export const RESPONSIVE_GRID = "grid grid-cols-[repeat(auto-fit,minmax(118px,1fr))] gap-3";
 export const EMPTY_STYLES: Record<string, string> = {};
 
+// fallow-ignore-next-line unused-exports -- pre-existing; surfaced in this file's diff by an unrelated line shift
 export const EMPTY_FILTER_VALUE = "none";
+// fallow-ignore-next-line unused-exports -- pre-existing; surfaced in this file's diff by an unrelated line shift
 export const BOX_SHADOW_PRESETS = {
   none: "none",
   soft: "0 12px 36px rgba(0, 0, 0, 0.28)",
@@ -271,6 +275,7 @@ export function parsePxMetricValue(value: string): number | null {
   return token.value;
 }
 
+// fallow-ignore-next-line unused-exports -- pre-existing; surfaced in this file's diff by an unrelated line shift
 export function clampPanelNumber(
   value: number,
   min: number,
@@ -319,6 +324,7 @@ export function normalizeTextMetricValue(
 function splitCssFunctions(value: string): string[] {
   const functions: string[] = [];
   let current = "";
+  // fallow-ignore-next-line code-duplication -- pre-existing; surfaced in this file's diff by an unrelated line shift
   let depth = 0;
 
   for (const char of value.trim()) {
@@ -484,6 +490,7 @@ export function extractBackgroundImageUrl(value: string | undefined): string {
 
 // ── GSAP runtime value readers (used by PropertyPanel) ────────────────────
 
+// fallow-ignore-next-line complexity -- pre-existing; surfaced in this file's diff by an unrelated line shift
 export function readGsapRuntimeValuesForPanel(
   gsapAnimId: string | null,
   gsapAnimations: GsapAnimation[],

package/src/components/editor/propertyPanelTimingSection.tsx

@@ -1,3 +1,4 @@
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { Clock } from "../../icons/SystemIcons";
 import type { DomEditSelection } from "./domEditing";
 import { formatTimingValue, RESPONSIVE_GRID } from "./propertyPanelHelpers";
@@ -9,18 +10,45 @@ function parseTimingValue(input: string): number | null {
   return Number.isFinite(parsed) && parsed >= 0 ? parsed : null;
 }
 
+/**
+ * Derive a time range from the element's GSAP tweens (earliest start → latest
+ * end) so an element animated purely by GSAP — with no `data-start` /
+ * `data-duration` — still shows a meaningful Timing range instead of 0s.
+ */
+function deriveTimingFromAnimations(
+  animations: GsapAnimation[],
+): { start: number; duration: number } | null {
+  let lo = Infinity;
+  let hi = -Infinity;
+  for (const a of animations) {
+    const s = a.resolvedStart ?? (typeof a.position === "number" ? a.position : 0);
+    const d = a.duration ?? 0;
+    lo = Math.min(lo, s);
+    hi = Math.max(hi, s + d);
+  }
+  if (!Number.isFinite(lo) || !Number.isFinite(hi) || hi <= lo) return null;
+  return { start: lo, duration: hi - lo };
+}
+
 export function TimingSection({
   element,
+  animations = [],
   onSetAttribute,
 }: {
   element: DomEditSelection;
+  animations?: GsapAnimation[];
   onSetAttribute: (attr: string, value: string) => void | Promise<void>;
 }) {
-  const start = Number.parseFloat(element.dataAttributes.start ?? "0") || 0;
-  const duration =
+  const explicitStart = Number.parseFloat(element.dataAttributes.start ?? "0") || 0;
+  const explicitDuration =
     Number.parseFloat(
       element.dataAttributes.duration ?? element.dataAttributes["hf-authored-duration"] ?? "0",
     ) || 0;
+
+  // No authored clip timing → infer the range from the element's animations.
+  const derived = explicitDuration > 0 ? null : deriveTimingFromAnimations(animations);
+  const start = derived ? derived.start : explicitStart;
+  const duration = derived ? derived.duration : explicitDuration;
   const end = start + duration;
 
   const commitStart = (nextValue: string) => {
@@ -54,6 +82,11 @@ export function TimingSection({
           onCommit={commitDuration}
         />
       </div>
+      {derived && (
+        <p className="mt-2 text-[10px] leading-snug text-neutral-500">
+          Inferred from this element’s animation — edit to pin an explicit clip range.
+        </p>
+      )}
     </Section>
   );
 }

package/src/components/editor/snapTargetCollection.ts

@@ -100,11 +100,6 @@ export function collectSnapContext(input: {
 
   const MAX_SNAP_TARGETS = 80;
   const elements = collectVisibleElements(root, input.excludeElements, MAX_SNAP_TARGETS);
-  if (elements.length >= MAX_SNAP_TARGETS) {
-    console.warn(
-      `[snap] Target cap reached (${MAX_SNAP_TARGETS}). Elements beyond this limit are excluded from snap alignment.`,
-    );
-  }
 
   const entries: Array<{
     rect: { left: number; top: number; width: number; height: number };

package/src/components/editor/useMotionPathData.ts

@@ -119,7 +119,8 @@ export function useMotionPathData(
       return;
     }
     const recompute = () => {
-      const read = readRuntimeKeyframes(iframeRef.current, selector);
+      // Position-only: never let a co-located size/scale tween shadow the path.
+      const read = readRuntimeKeyframes(iframeRef.current, selector, undefined, ["x", "y"]);
       const next = buildMotionPathGeometry(read);
       setGeometry((prev) =>
         prev?.points === next?.points && prev?.kind === next?.kind ? prev : next,

package/src/components/panels/SlideshowPanel.tsx

@@ -50,7 +50,6 @@ export function safeParseManifest(html: string): SlideshowManifest {
   try {
     return parseSlideshowManifest(html) ?? { slides: [] };
   } catch {
-    console.warn("[SlideshowPanel] Failed to parse slideshow manifest; using empty manifest");
     return { slides: [] };
   }
 }

package/src/components/sidebar/AssetContextMenu.tsx

@@ -0,0 +1,97 @@
+export function ContextMenu({
+  x,
+  y,
+  asset,
+  onClose,
+  onCopy,
+  onDelete,
+  onRename,
+}: {
+  x: number;
+  y: number;
+  asset: string;
+  onClose: () => void;
+  onCopy: (path: string) => void;
+  onDelete?: (path: string) => void;
+  onRename?: (oldPath: string, newPath: string) => void;
+}) {
+  return (
+    <div
+      className="fixed inset-0 z-[200]"
+      onClick={onClose}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        onClose();
+      }}
+    >
+      <div
+        className="absolute bg-neutral-900 border border-neutral-700 rounded-lg shadow-xl py-1 min-w-[140px] text-xs"
+        style={{ left: x, top: y }}
+      >
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onCopy(asset);
+            onClose();
+          }}
+          className="w-full text-left px-3 py-1.5 text-neutral-300 hover:bg-neutral-800 transition-colors"
+        >
+          Copy path
+        </button>
+        {onRename && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onClose();
+            }}
+            className="w-full text-left px-3 py-1.5 text-neutral-300 hover:bg-neutral-800 transition-colors"
+          >
+            Rename
+          </button>
+        )}
+        {onDelete && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onDelete(asset);
+              onClose();
+            }}
+            className="w-full text-left px-3 py-1.5 text-red-400 hover:bg-neutral-800 transition-colors"
+          >
+            Delete
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function DeleteConfirm({
+  name,
+  onConfirm,
+  onCancel,
+}: {
+  name: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}) {
+  return (
+    <div className="px-2 py-1.5 bg-red-950/30 border-l-2 border-red-500 flex items-center justify-between gap-2">
+      <span className="text-[10px] text-red-400 truncate">Delete {name}?</span>
+      <div className="flex items-center gap-1 flex-shrink-0">
+        <button
+          onClick={onConfirm}
+          className="px-2 py-0.5 text-[10px] rounded bg-red-600 text-white hover:bg-red-500 transition-colors"
+        >
+          Delete
+        </button>
+        <button
+          onClick={onCancel}
+          className="px-2 py-0.5 text-[10px] rounded text-neutral-400 hover:text-neutral-200 transition-colors"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+}