@hyperframes/studio 0.6.86 → 0.6.87

package/src/components/editor/DomEditOverlay.tsx

@@ -90,6 +90,29 @@ export const DomEditOverlay = memo(function DomEditOverlay({
 }: DomEditOverlayProps) {
   const overlayRef = useRef<HTMLDivElement | null>(null);
   const boxRef = useRef<HTMLDivElement | null>(null);
+
+  const selectionShapeStyles = (() => {
+    const fallback = {
+      borderRadius: 4 as string | number,
+      clipPath: undefined as string | undefined,
+    };
+    if (!selection?.element) return fallback;
+    try {
+      const tag = selection.element.tagName.toLowerCase();
+      if (tag === "svg" || tag === "img" || tag === "video" || tag === "canvas") return fallback;
+      const win = selection.element.ownerDocument.defaultView;
+      if (!win) return fallback;
+      const cs = win.getComputedStyle(selection.element);
+      const br = cs.borderRadius;
+      const cp = cs.clipPath;
+      return {
+        borderRadius: br && br !== "0px" ? br : 4,
+        clipPath: cp && cp !== "none" ? cp : undefined,
+      };
+    } catch {
+      return fallback;
+    }
+  })();
   const gestureRef = useRef<GestureState | null>(null);
   const groupGestureRef = useRef<GroupGestureState | null>(null);
   const blockedMoveRef = useRef<BlockedMoveState | null>(null);
@@ -134,6 +157,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
     groupOverlayItems,
     groupOverlayItemsRef,
     setGroupOverlayItems,
+    childRects,
   } = useDomEditOverlayRects({
     iframeRef,
     overlayRef,
@@ -228,6 +252,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
     groupOverlayItems.every((item) => item.selection.capabilities.canApplyManualOffset);
 
   const handleOverlayMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (!allowCanvasMovement) return;
     if (suppressNextOverlayMouseDownRef.current) {
       suppressNextOverlayMouseDownRef.current = false;
       suppressNextBoxMouseDownRef.current = false;
@@ -288,6 +313,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
   };
 
   const handleBoxClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (!allowCanvasMovement) return;
     if (gestureRef.current || groupGestureRef.current) return;
     if (suppressNextBoxClickRef.current) {
       suppressNextBoxClickRef.current = false;
@@ -320,20 +346,37 @@ export const DomEditOverlay = memo(function DomEditOverlay({
       onPointerUp={gestures.onPointerUp}
       onPointerCancel={() => gestures.clearPointerState(selectionRef)}
     >
-      {hoverSelection && hoverRect && (
+      {hoverSelection && hoverRect && compRect.width > 0 && (
         <div
           aria-hidden="true"
           data-dom-edit-hover-box="true"
-          className="pointer-events-none absolute rounded-xl border border-studio-accent/80 bg-studio-accent/5 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]"
-          style={{
-            left: hoverRect.left,
-            top: hoverRect.top,
-            width: hoverRect.width,
-            height: hoverRect.height,
-          }}
+          className="pointer-events-none absolute border border-studio-accent/80 bg-studio-accent/5 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]"
+          style={(() => {
+            let br: string | number = 4;
+            let cp: string | undefined;
+            try {
+              const el = hoverSelection.element;
+              const tag = el.tagName.toLowerCase();
+              if (tag !== "svg" && tag !== "img" && tag !== "video" && tag !== "canvas") {
+                const cs = el.ownerDocument.defaultView?.getComputedStyle(el);
+                if (cs?.borderRadius && cs.borderRadius !== "0px") br = cs.borderRadius;
+                if (cs?.clipPath && cs.clipPath !== "none") cp = cs.clipPath;
+              }
+            } catch {
+              /* cross-origin guard */
+            }
+            return {
+              left: hoverRect.left,
+              top: hoverRect.top,
+              width: hoverRect.width,
+              height: hoverRect.height,
+              borderRadius: br,
+              clipPath: cp,
+            };
+          })()}
         />
       )}
-      {hasGroupSelection && groupOverlayItems.length > 1 && groupBounds && (
+      {hasGroupSelection && groupOverlayItems.length > 1 && groupBounds && compRect.width > 0 && (
         <>
           {groupOverlayItems.map((item) => (
             <div
@@ -367,7 +410,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
           />
         </>
       )}
-      {!hasGroupSelection && selection && overlayRect && (
+      {!hasGroupSelection && selection && overlayRect && compRect.width > 0 && (
         <>
           {allowCanvasMovement && selection.capabilities.canApplyManualRotation && (
             <div
@@ -398,12 +441,14 @@ export const DomEditOverlay = memo(function DomEditOverlay({
             key={selectionKey}
             ref={boxRef}
             data-dom-edit-selection-box="true"
-            className="pointer-events-auto absolute rounded-xl border border-studio-accent/80 bg-studio-accent/5 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]"
+            className={`pointer-events-auto absolute ${selectionShapeStyles.clipPath ? "shadow-[inset_0_0_0_2px_rgba(60,230,172,0.6)]" : "border border-studio-accent/80 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]"} bg-studio-accent/5`}
             style={{
               left: overlayRect.left,
               top: overlayRect.top,
               width: overlayRect.width,
               height: overlayRect.height,
+              borderRadius: selectionShapeStyles.borderRadius,
+              clipPath: selectionShapeStyles.clipPath,
               cursor:
                 allowCanvasMovement && selection.capabilities.canApplyManualOffset
                   ? "move"
@@ -441,6 +486,20 @@ export const DomEditOverlay = memo(function DomEditOverlay({
           </div>
         </>
       )}
+      {childRects.length > 0 &&
+        compRect.width > 0 &&
+        childRects.map((cr, i) => (
+          <div
+            key={i}
+            className="pointer-events-none absolute border border-dashed border-white/20 rounded-sm"
+            style={{
+              left: cr.left,
+              top: cr.top,
+              width: cr.width,
+              height: cr.height,
+            }}
+          />
+        ))}
       <GridOverlay
         visible={gridVisible}
         spacing={gridSpacing}

package/src/components/editor/DopesheetStrip.tsx

@@ -0,0 +1,141 @@
+import { memo, useCallback, useRef } from "react";
+
+interface DopesheetKeyframe {
+  percentage: number;
+  properties: Record<string, number | string>;
+  ease?: string;
+}
+
+interface DopesheetStripProps {
+  keyframes: DopesheetKeyframe[];
+  selectedPercentage: number | null;
+  currentPercentage: number;
+  accentColor?: string;
+  onSelectKeyframe: (percentage: number) => void;
+  onDragKeyframe?: (fromPct: number, toPct: number) => void;
+}
+
+const DIAMOND_SIZE = 8;
+const HALF = DIAMOND_SIZE / 2;
+const STRIP_HEIGHT = 20;
+const PADDING_X = 8;
+
+export const DopesheetStrip = memo(function DopesheetStrip({
+  keyframes,
+  selectedPercentage,
+  currentPercentage,
+  accentColor = "#3CE6AC",
+  onSelectKeyframe,
+  onDragKeyframe,
+}: DopesheetStripProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const dragRef = useRef<{ startX: number; startPct: number } | null>(null);
+
+  const sorted = keyframes.slice().sort((a, b) => a.percentage - b.percentage);
+
+  const handlePointerDown = useCallback(
+    (e: React.PointerEvent, pct: number) => {
+      if (e.button !== 0) return;
+      e.stopPropagation();
+      const startX = e.clientX;
+
+      const handleMove = (me: PointerEvent) => {
+        if (Math.abs(me.clientX - startX) > 4) {
+          dragRef.current = { startX, startPct: pct };
+        }
+      };
+
+      const handleUp = (ue: PointerEvent) => {
+        document.removeEventListener("pointermove", handleMove);
+        document.removeEventListener("pointerup", handleUp);
+        if (dragRef.current && containerRef.current && onDragKeyframe) {
+          const rect = containerRef.current.getBoundingClientRect();
+          const usableWidth = rect.width - PADDING_X * 2;
+          const dx = ue.clientX - dragRef.current.startX;
+          const dpct = (dx / usableWidth) * 100;
+          const newPct = Math.max(0, Math.min(100, Math.round((pct + dpct) * 10) / 10));
+          if (newPct !== pct) onDragKeyframe(pct, newPct);
+        } else {
+          onSelectKeyframe(pct);
+        }
+        dragRef.current = null;
+      };
+
+      document.addEventListener("pointermove", handleMove);
+      document.addEventListener("pointerup", handleUp);
+    },
+    [onSelectKeyframe, onDragKeyframe],
+  );
+
+  return (
+    <div
+      ref={containerRef}
+      className="relative w-full rounded-md bg-neutral-900/60 border border-neutral-800/50"
+      style={{ height: STRIP_HEIGHT }}
+    >
+      {/* Playhead indicator */}
+      <div
+        className="absolute top-0 bottom-0 w-px bg-white/30"
+        style={{
+          left: `${PADDING_X + (currentPercentage / 100) * (100 - PADDING_X * 2)}%`,
+          marginLeft: -0.5,
+        }}
+      />
+
+      {/* Diamond markers */}
+      <svg
+        className="absolute inset-0 w-full"
+        style={{ height: STRIP_HEIGHT }}
+        viewBox={`0 0 100 ${STRIP_HEIGHT}`}
+        preserveAspectRatio="none"
+      >
+        {sorted.map((kf) => {
+          const x = PADDING_X + (kf.percentage / 100) * (100 - PADDING_X * 2);
+          const y = STRIP_HEIGHT / 2;
+          const isSelected =
+            selectedPercentage !== null && Math.abs(kf.percentage - selectedPercentage) < 0.5;
+          const isHold = kf.ease === "steps(1)";
+          const fillColor = isSelected ? accentColor : "#737373";
+
+          return (
+            <g
+              key={kf.percentage}
+              onPointerDown={(e) => handlePointerDown(e, kf.percentage)}
+              style={{ cursor: "pointer" }}
+            >
+              {isHold ? (
+                <rect
+                  x={x - HALF}
+                  y={y - HALF}
+                  width={DIAMOND_SIZE}
+                  height={DIAMOND_SIZE}
+                  fill={fillColor}
+                />
+              ) : (
+                <rect
+                  x={x - HALF}
+                  y={y - HALF}
+                  width={DIAMOND_SIZE}
+                  height={DIAMOND_SIZE}
+                  fill={fillColor}
+                  transform={`rotate(45, ${x}, ${y})`}
+                />
+              )}
+            </g>
+          );
+        })}
+      </svg>
+
+      {/* Time labels */}
+      {sorted.length > 0 && (
+        <div
+          className="absolute bottom-0 left-0 right-0 flex justify-between px-2 text-[8px] text-neutral-600 pointer-events-none"
+          style={{ lineHeight: "10px" }}
+        >
+          <span>{sorted[0].percentage}%</span>
+          {sorted.length > 1 && <span>{sorted[sorted.length - 1].percentage}%</span>}
+        </div>
+      )}
+    </div>
+  );
+});

package/src/components/editor/EaseCurveSection.tsx

@@ -1,6 +1,80 @@
-import { useCallback, useRef, useState } from "react";
+import { memo, useCallback, useRef, useState } from "react";
 import { EASE_CURVES, EASE_LABELS, parseCustomEaseFromString } from "./gsapAnimationConstants";
 
+const PRESET_GRID_EASES = [
+  "none",
+  "power2.out",
+  "power2.in",
+  "power2.inOut",
+  "power3.out",
+  "back.out",
+  "expo.out",
+  "elastic.out",
+] as const;
+
+function MiniCurveSvg({
+  curve,
+  active,
+}: {
+  curve: [number, number, number, number];
+  active: boolean;
+}) {
+  const [x1, y1, x2, y2] = curve;
+  const s = 24;
+  const p = 3;
+  const g = s - p * 2;
+  const sx = (px: number) => p + g * px;
+  const sy = (py: number) => s - p - g * py;
+  const d = `M${p},${s - p} C${sx(x1)},${sy(y1)} ${sx(x2)},${sy(y2)} ${s - p},${p}`;
+  return (
+    <svg width={s} height={s} viewBox={`0 0 ${s} ${s}`}>
+      <path
+        d={d}
+        fill="none"
+        stroke={active ? "#3CE6AC" : "#737373"}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+const EasePresetGrid = memo(function EasePresetGrid({
+  currentEase,
+  onSelect,
+}: {
+  currentEase: string;
+  onSelect: (ease: string) => void;
+}) {
+  return (
+    <div className="grid grid-cols-4 gap-1 mb-2">
+      {PRESET_GRID_EASES.map((name) => {
+        const curve = EASE_CURVES[name];
+        if (!curve) return null;
+        const isActive = currentEase === name;
+        return (
+          <button
+            key={name}
+            type="button"
+            onClick={() => onSelect(name)}
+            className={`flex flex-col items-center gap-0.5 rounded-md p-1 transition-colors ${
+              isActive ? "bg-panel-accent/10 ring-1 ring-panel-accent/30" : "hover:bg-neutral-800"
+            }`}
+            title={EASE_LABELS[name] ?? name}
+          >
+            <MiniCurveSvg curve={curve} active={isActive} />
+            <span
+              className={`text-[8px] leading-none ${isActive ? "text-panel-accent" : "text-neutral-500"}`}
+            >
+              {(EASE_LABELS[name] ?? name).split(" ").slice(0, 2).join(" ")}
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+});
+
 function round2(n: number): number {
   return Math.round(n * 100) / 100;
 }
@@ -108,12 +182,13 @@ export function EaseCurveSection({
 
   return (
     <div className="rounded-lg bg-neutral-900/50 p-2">
+      <EasePresetGrid currentEase={ease} onSelect={(name) => onCustomEaseCommit(name)} />
       <div className="mb-1.5 flex items-center justify-between">
         <span className="text-[10px] font-medium text-neutral-500">Speed curve</span>
         <button
           type="button"
           onClick={play}
-          className="rounded px-1.5 py-0.5 text-[10px] font-medium text-emerald-400 transition-colors hover:bg-emerald-500/10"
+          className="rounded px-1.5 py-0.5 text-[10px] font-medium text-panel-accent transition-colors hover:bg-panel-accent/10"
         >
           {progress !== null ? "Playing…" : "Preview"}
         </button>
@@ -165,17 +240,17 @@ export function EaseCurveSection({
             y1={end.y}
             x2={p2.x}
             y2={p2.y}
-            stroke="rgba(52,211,153,0.25)"
+            stroke="rgba(45,212,191,0.25)"
             strokeWidth="1"
           />
-          <path d={curvePath} fill="none" stroke="#34d399" strokeWidth="2" strokeLinecap="round" />
-          {progress !== null && <circle cx={dotX} cy={dotY} r="4" fill="#34d399" />}
+          <path d={curvePath} fill="none" stroke="#3CE6AC" strokeWidth="2" strokeLinecap="round" />
+          {progress !== null && <circle cx={dotX} cy={dotY} r="4" fill="#3CE6AC" />}
           <circle
             cx={p1.x}
             cy={p1.y}
             r="5"
             fill="#0a0a1a"
-            stroke="#34d399"
+            stroke="#3CE6AC"
             strokeWidth="2"
             className="cursor-grab active:cursor-grabbing"
             onPointerDown={(e) => handlePointerDown("p1", e)}
@@ -185,7 +260,7 @@ export function EaseCurveSection({
             cy={p2.y}
             r="5"
             fill="#0a0a1a"
-            stroke="#34d399"
+            stroke="#3CE6AC"
             strokeWidth="2"
             className="cursor-grab active:cursor-grabbing"
             onPointerDown={(e) => handlePointerDown("p2", e)}

package/src/components/editor/GestureTrailOverlay.tsx

@@ -0,0 +1,132 @@
+import { memo, useMemo } from "react";
+import type { GestureSample } from "../../hooks/useGestureRecording";
+
+interface GestureTrailOverlayProps {
+  samples: GestureSample[];
+  sampleCount?: number;
+  trail?: Array<{ x: number; y: number }>;
+  simplifiedPoints?: Map<number, Record<string, number>>;
+  canvasRect: { left: number; top: number; width: number; height: number };
+  compositionSize?: { width: number; height: number };
+  mode: "recording" | "preview";
+  accentColor?: string;
+}
+
+export const GestureTrailOverlay = memo(function GestureTrailOverlay({
+  samples,
+  sampleCount,
+  trail,
+  simplifiedPoints,
+  canvasRect,
+  compositionSize,
+  mode,
+  accentColor = "#3CE6AC",
+}: GestureTrailOverlayProps) {
+  const trailPoints = useMemo(() => {
+    if (trail && trail.length > 1) {
+      return trail.map((p) => `${p.x - canvasRect.left},${p.y - canvasRect.top}`).join(" ");
+    }
+    if (samples.length === 0) return "";
+    return samples
+      .filter((s) => s.properties.x != null && s.properties.y != null)
+      .map((s) => `${s.properties.x},${s.properties.y}`)
+      .join(" ");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [samples, trail, sampleCount, canvasRect.left, canvasRect.top]);
+
+  const simplifiedPath = useMemo(() => {
+    if (!simplifiedPoints || simplifiedPoints.size === 0) return "";
+    const pts: Array<{ x: number; y: number; pct: number }> = [];
+    for (const [pct, props] of simplifiedPoints) {
+      if (props.x != null && props.y != null) {
+        pts.push({ x: props.x, y: props.y, pct });
+      }
+    }
+    pts.sort((a, b) => a.pct - b.pct);
+    if (pts.length === 0) return "";
+    return pts.map((p) => `${p.x},${p.y}`).join(" ");
+  }, [simplifiedPoints]);
+
+  const diamondPositions = useMemo(() => {
+    if (!simplifiedPoints || simplifiedPoints.size === 0) return [];
+    const pts: Array<{ x: number; y: number; pct: number }> = [];
+    for (const [pct, props] of simplifiedPoints) {
+      if (props.x != null && props.y != null) {
+        pts.push({ x: props.x, y: props.y, pct });
+      }
+    }
+    return pts.sort((a, b) => a.pct - b.pct);
+  }, [simplifiedPoints]);
+
+  if (samples.length < 2 && !simplifiedPoints) return null;
+
+  return (
+    <svg
+      className="pointer-events-none fixed z-50"
+      style={{
+        left: canvasRect.left,
+        top: canvasRect.top,
+        width: canvasRect.width,
+        height: canvasRect.height,
+      }}
+      viewBox={
+        trail && trail.length > 1
+          ? `0 0 ${canvasRect.width} ${canvasRect.height}`
+          : `0 0 ${compositionSize?.width ?? canvasRect.width} ${compositionSize?.height ?? canvasRect.height}`
+      }
+    >
+      {mode === "recording" && trailPoints && (
+        <polyline
+          points={trailPoints}
+          fill="none"
+          stroke={accentColor}
+          strokeWidth="2"
+          strokeOpacity="0.6"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      )}
+
+      {mode === "preview" && (
+        <>
+          {trailPoints && (
+            <polyline
+              points={trailPoints}
+              fill="none"
+              stroke={accentColor}
+              strokeWidth="1"
+              strokeOpacity="0.2"
+              strokeDasharray="4 3"
+              strokeLinecap="round"
+            />
+          )}
+          {simplifiedPath && (
+            <polyline
+              points={simplifiedPath}
+              fill="none"
+              stroke={accentColor}
+              strokeWidth="2"
+              strokeOpacity="0.8"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          )}
+          {diamondPositions.map((pt) => (
+            <g key={pt.pct} transform={`translate(${pt.x}, ${pt.y})`}>
+              <rect
+                x="-4"
+                y="-4"
+                width="8"
+                height="8"
+                rx="1"
+                transform="rotate(45)"
+                fill={accentColor}
+                fillOpacity="0.9"
+              />
+            </g>
+          ))}
+        </>
+      )}
+    </svg>
+  );
+});

package/src/components/editor/GsapAnimationSection.tsx

@@ -1,5 +1,5 @@
 import { memo, useState } from "react";
-import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import type { ArcPathSegment, GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { Film } from "../../icons/SystemIcons";
 import { Section } from "./propertyPanelPrimitives";
 import { ADD_METHODS, ADD_METHOD_LABELS, METHOD_TOOLTIPS } from "./gsapAnimationConstants";
@@ -23,6 +23,15 @@ interface GsapAnimationSectionProps {
   onAddAnimation: (method: "to" | "from" | "set" | "fromTo") => void;
   onLivePreview?: (property: string, value: number | string) => void;
   onLivePreviewEnd?: () => void;
+  onSetArcPath?: (
+    animationId: string,
+    config: { enabled: boolean; autoRotate?: boolean | number; segments?: ArcPathSegment[] },
+  ) => void;
+  onUpdateArcSegment?: (
+    animationId: string,
+    segmentIndex: number,
+    update: Partial<ArcPathSegment>,
+  ) => void;
 }
 
 export const GsapAnimationSection = memo(function GsapAnimationSection({
@@ -40,6 +49,8 @@ export const GsapAnimationSection = memo(function GsapAnimationSection({
   onAddAnimation,
   onLivePreview,
   onLivePreviewEnd,
+  onSetArcPath,
+  onUpdateArcSegment,
 }: GsapAnimationSectionProps) {
   const [addMenuOpen, setAddMenuOpen] = useState(false);
 
@@ -75,6 +86,8 @@ export const GsapAnimationSection = memo(function GsapAnimationSection({
               onRemoveFromProperty={onRemoveFromProperty}
               onLivePreview={onLivePreview}
               onLivePreviewEnd={onLivePreviewEnd}
+              onSetArcPath={onSetArcPath}
+              onUpdateArcSegment={onUpdateArcSegment}
             />
           ))}
 

package/src/components/editor/KeyframeDiamond.tsx

@@ -7,6 +7,7 @@ interface KeyframeDiamondProps {
   onClick: () => void;
   title?: string;
   size?: number;
+  isHold?: boolean;
 }
 
 // fallow-ignore-next-line complexity
@@ -15,10 +16,11 @@ export const KeyframeDiamond = memo(function KeyframeDiamond({
   onClick,
   title,
   size = 10,
+  isHold = false,
 }: KeyframeDiamondProps) {
   const isFilled = state === "active";
   const opacity = state === "ghost" ? 0.25 : state === "inactive" ? 0.6 : 1;
-  const color = state === "active" ? "#3b82f6" : "#a3a3a3";
+  const color = state === "active" ? "#3CE6AC" : "#a3a3a3";
 
   return (
     <button
@@ -32,17 +34,30 @@ export const KeyframeDiamond = memo(function KeyframeDiamond({
       title={title}
     >
       <svg width={size} height={size} viewBox="0 0 10 10">
-        <rect
-          x="5"
-          y="0.7"
-          width="6"
-          height="6"
-          rx="1"
-          transform="rotate(45 5 0.7)"
-          fill={isFilled ? "currentColor" : "none"}
-          stroke="currentColor"
-          strokeWidth="1.2"
-        />
+        {isHold ? (
+          <rect
+            x="2"
+            y="2"
+            width="6"
+            height="6"
+            rx="0.5"
+            fill={isFilled ? "currentColor" : "none"}
+            stroke="currentColor"
+            strokeWidth="1.2"
+          />
+        ) : (
+          <rect
+            x="5"
+            y="0.7"
+            width="6"
+            height="6"
+            rx="1"
+            transform="rotate(45 5 0.7)"
+            fill={isFilled ? "currentColor" : "none"}
+            stroke="currentColor"
+            strokeWidth="1.2"
+          />
+        )}
       </svg>
     </button>
   );