@hyperframes/studio 0.7.6 → 0.7.7

package/src/components/editor/propertyPanelHelpers.ts

@@ -67,6 +67,7 @@ export interface PropertyPanelProps {
   ) => 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,
@@ -211,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)",
@@ -272,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,
@@ -320,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()) {
@@ -485,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/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/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>
+  );
+}