@hyperframes/studio 0.6.85 → 0.6.87

package/src/components/TimelineToolbar.tsx

@@ -1,3 +1,5 @@
+import { useRef } from "react";
+import { useEnableKeyframes, type EnableKeyframesSession } from "../hooks/useEnableKeyframes";
 import {
   getNextTimelineZoomPercent,
   getTimelineZoomPercent,
@@ -7,88 +9,12 @@ import { usePlayerStore, type TimelineElement } from "../player";
 import { STUDIO_KEYFRAMES_ENABLED } from "./editor/manualEditingAvailability";
 import { Tooltip } from "./ui";
 import { Scissors } from "../icons/SystemIcons";
-import type { GsapAnimation, GsapPercentageKeyframe } from "@hyperframes/core/gsap-parser";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "./editor/domEditingTypes";
 
-function interpolateKeyframeProperties(
-  keyframes: GsapPercentageKeyframe[],
-  pct: number,
-): Record<string, number> {
-  const sorted = keyframes.slice().sort((a, b) => a.percentage - b.percentage);
-  const allProps = new Set<string>();
-  for (const kf of sorted) {
-    for (const p of Object.keys(kf.properties)) {
-      if (typeof kf.properties[p] === "number") allProps.add(p);
-    }
-  }
-  const result: Record<string, number> = {};
-  for (const prop of allProps) {
-    let prev: { pct: number; val: number } | null = null;
-    let next: { pct: number; val: number } | null = null;
-    for (const kf of sorted) {
-      const v = kf.properties[prop];
-      if (typeof v !== "number") continue;
-      if (kf.percentage <= pct) prev = { pct: kf.percentage, val: v };
-      if (kf.percentage >= pct && !next) next = { pct: kf.percentage, val: v };
-    }
-    if (prev && next && prev.pct !== next.pct) {
-      const t = (pct - prev.pct) / (next.pct - prev.pct);
-      result[prop] = Math.round(prev.val + t * (next.val - prev.val));
-    } else if (prev) {
-      result[prop] = Math.round(prev.val);
-    } else if (next) {
-      result[prop] = Math.round(next.val);
-    }
-  }
-  return result;
-}
-
-function readRuntimeKeyframeValues(
-  iframe: HTMLIFrameElement | null,
-  sel: DomEditSelection,
-  keyframes: GsapPercentageKeyframe[],
-): Record<string, number> {
-  if (!iframe?.contentWindow) return {};
-  let gsap: { getProperty?: (el: Element, prop: string) => number } | undefined;
-  try {
-    gsap = (iframe.contentWindow as Window & { gsap?: typeof gsap }).gsap;
-  } catch {
-    return {};
-  }
-  if (!gsap?.getProperty) return {};
-  const selector = sel.id ? `#${sel.id}` : sel.selector;
-  if (!selector) return {};
-  let doc: Document | null = null;
-  try {
-    doc = iframe.contentDocument;
-  } catch {
-    return {};
-  }
-  const element = doc?.querySelector(selector);
-  if (!element) return {};
-  const allProps = new Set<string>();
-  for (const kf of keyframes) {
-    for (const p of Object.keys(kf.properties)) {
-      if (typeof kf.properties[p] === "number") allProps.add(p);
-    }
-  }
-  const result: Record<string, number> = {};
-  for (const prop of allProps) {
-    const val = Number(gsap.getProperty(element, prop));
-    if (Number.isFinite(val)) result[prop] = Math.round(val);
-  }
-  return result;
-}
-
-interface DomEditSessionSlice {
+interface DomEditSessionSlice extends EnableKeyframesSession {
   domEditSelection: DomEditSelection | null;
   selectedGsapAnimations: GsapAnimation[];
-  handleGsapRemoveKeyframe: (animId: string, pct: number) => void;
-  handleGsapAddKeyframe: (animId: string, pct: number, prop: string, val: number | string) => void;
-  handleGsapConvertToKeyframes: (animId: string) => void;
-  handleGsapMaterializeKeyframes?: (animId: string) => Promise<void>;
-  handleGsapAddAnimation: (method: "to" | "from" | "set" | "fromTo") => void;
-  previewIframeRef?: React.RefObject<HTMLIFrameElement | null>;
 }
 
 interface TimelineToolbarProps {
@@ -97,15 +23,20 @@ interface TimelineToolbarProps {
   onSplitElement?: (element: TimelineElement, splitTime: number) => void;
 }
 
-// fallow-ignore-next-line complexity
 function useKeyframeToggle(session?: DomEditSessionSlice) {
   const currentTime = usePlayerStore((s) => s.currentTime);
+  const sessionRef = useRef(session);
+  sessionRef.current = session;
+
+  const onToggle = useEnableKeyframes(
+    sessionRef as React.RefObject<EnableKeyframesSession | undefined>,
+  );
+
   if (!session) return { state: "none" as const, onToggle: undefined };
 
   const sel = session.domEditSelection;
   const anims = session.selectedGsapAnimations;
   const kfAnim = anims.find((a) => a.keyframes);
-  const flatAnim = anims.find((a) => !a.keyframes);
 
   let state: "active" | "inactive" | "none" = "none";
   if (kfAnim?.keyframes && sel) {
@@ -120,48 +51,7 @@ function useKeyframeToggle(session?: DomEditSessionSlice) {
       : "inactive";
   }
 
-  // fallow-ignore-next-line complexity
-  const onToggle = sel
-    ? async () => {
-        const t = usePlayerStore.getState().currentTime;
-        if (kfAnim?.keyframes) {
-          if (kfAnim.hasUnresolvedKeyframes) {
-            await session.handleGsapMaterializeKeyframes?.(kfAnim.id);
-          }
-          const elStart = Number.parseFloat(sel.dataAttributes?.start ?? "0") || 0;
-          const elDuration = Number.parseFloat(sel.dataAttributes?.duration ?? "1") || 1;
-          const pct =
-            elDuration > 0
-              ? Math.max(0, Math.min(100, Math.round(((t - elStart) / elDuration) * 1000) / 10))
-              : 0;
-          const existing = kfAnim.keyframes.keyframes.find(
-            (k) => Math.abs(k.percentage - pct) <= 1,
-          );
-          if (existing) {
-            session.handleGsapRemoveKeyframe(kfAnim.id, existing.percentage);
-          } else {
-            const runtimeValues = readRuntimeKeyframeValues(
-              session.previewIframeRef?.current ?? null,
-              sel,
-              kfAnim.keyframes.keyframes,
-            );
-            const values =
-              Object.keys(runtimeValues).length > 0
-                ? runtimeValues
-                : interpolateKeyframeProperties(kfAnim.keyframes.keyframes, pct);
-            for (const [prop, val] of Object.entries(values)) {
-              session.handleGsapAddKeyframe(kfAnim.id, pct, prop, val);
-            }
-          }
-        } else if (flatAnim) {
-          session.handleGsapConvertToKeyframes(flatAnim.id);
-        } else {
-          session.handleGsapAddAnimation("to");
-        }
-      }
-    : undefined;
-
-  return { state, onToggle };
+  return { state, onToggle: sel ? onToggle : undefined };
 }
 
 export function TimelineToolbar({

package/src/components/editor/AnimationCard.tsx

@@ -17,6 +17,9 @@ import {
 } from "./gsapAnimationConstants";
 import { buildTweenSummary } from "./gsapAnimationHelpers";
 import { EaseCurveSection } from "./EaseCurveSection";
+import { ArcPathControls } from "./ArcPathControls";
+import type { ArcPathSegment } from "@hyperframes/core/gsap-parser";
+import { P } from "./panelTokens";
 const BOOLEAN_PROPS = new Set(["visibility"]);
 const STRING_PROPS = new Set(["filter", "clipPath"]);
 
@@ -97,11 +100,18 @@ function PropertyRow({
           <button
             type="button"
             onClick={() => onCommit(isVisible ? "hidden" : "visible")}
-            className={`flex-shrink-0 w-7 h-4 rounded-full transition-colors relative ${isVisible ? "bg-emerald-500/30" : "bg-neutral-700"}`}
+            className={`flex-shrink-0 rounded-full transition-all duration-150 relative`}
+            style={{ width: 28, height: 16, background: isVisible ? P.accent : P.borderInput }}
             title={isVisible ? "Visible — click to hide" : "Hidden — click to show"}
           >
             <span
-              className={`absolute top-0.5 h-3 w-3 rounded-full transition-transform ${isVisible ? "bg-emerald-400 translate-x-3.5" : "bg-neutral-500 translate-x-0.5"}`}
+              className="absolute top-[2px] left-0 rounded-full transition-transform duration-150"
+              style={{
+                width: 12,
+                height: 12,
+                background: isVisible ? P.white : P.textMuted,
+                transform: isVisible ? "translateX(14px)" : "translateX(2px)",
+              }}
             />
           </button>
         </div>
@@ -241,6 +251,15 @@ interface AnimationCardProps {
   onRemoveFromProperty?: (animationId: string, property: string) => 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;
 }
 
 // fallow-ignore-next-line complexity
@@ -257,6 +276,8 @@ export const AnimationCard = memo(function AnimationCard({
   onRemoveFromProperty,
   onLivePreview,
   onLivePreviewEnd,
+  onSetArcPath,
+  onUpdateArcSegment,
 }: AnimationCardProps) {
   const [expanded, setExpanded] = useState(defaultExpanded);
   const [addingProp, setAddingProp] = useState(false);
@@ -329,7 +350,7 @@ export const AnimationCard = memo(function AnimationCard({
   const [copied, setCopied] = useState(false);
 
   const methodLabel = METHOD_LABELS[animation.method] ?? animation.method;
-  const easeName = animation.ease ?? "none";
+  const easeName = animation.ease ?? animation.keyframes?.easeEach ?? "none";
   const easeLabel = easeName.startsWith("custom(")
     ? "Custom curve"
     : (EASE_LABELS[easeName] ?? easeName);
@@ -348,7 +369,7 @@ export const AnimationCard = memo(function AnimationCard({
         className="flex w-full items-center gap-2 py-1.5"
       >
         <span
-          className="rounded bg-emerald-500/10 px-1.5 py-0.5 text-[10px] font-semibold text-emerald-400"
+          className="rounded bg-panel-accent/10 px-1.5 py-0.5 text-[10px] font-semibold text-panel-accent"
           title={METHOD_TOOLTIPS[animation.method]}
         >
           {methodLabel}
@@ -420,13 +441,13 @@ export const AnimationCard = memo(function AnimationCard({
               <>
                 <SelectField
                   label="Speed"
-                  value={
-                    animation.ease?.startsWith("custom(") ? "custom" : (animation.ease ?? "none")
-                  }
+                  value={easeName.startsWith("custom(") ? "custom" : easeName}
                   options={[...SUPPORTED_EASES, "custom"]}
                   onChange={(next) => {
                     if (next === "custom") {
-                      const points = controlPointsForGsapEase(animation.ease ?? "power2.out");
+                      const points = controlPointsForGsapEase(
+                        easeName !== "none" ? easeName : "power2.out",
+                      );
                       const path = `M0,0 C${points.x1},${points.y1} ${points.x2},${points.y2} 1,1`;
                       onUpdateMeta(animation.id, { ease: `custom(${path})` });
                     } else {
@@ -435,7 +456,7 @@ export const AnimationCard = memo(function AnimationCard({
                   }}
                 />
                 <EaseCurveSection
-                  ease={animation.ease ?? "none"}
+                  ease={easeName}
                   duration={animation.duration}
                   onCustomEaseCommit={(customEase) =>
                     onUpdateMeta(animation.id, { ease: customEase })
@@ -477,7 +498,7 @@ export const AnimationCard = memo(function AnimationCard({
             )}
 
             {animation.method === "fromTo" && Object.keys(animation.properties).length > 0 && (
-              <p className="text-[9px] font-semibold uppercase tracking-wider text-emerald-400/70">
+              <p className="text-[9px] font-semibold uppercase tracking-wider text-panel-accent/70">
                 To
               </p>
             )}
@@ -500,6 +521,39 @@ export const AnimationCard = memo(function AnimationCard({
               </div>
             )}
 
+            {onSetArcPath &&
+              (animation.properties.x != null ||
+                animation.properties.y != null ||
+                animation.keyframes) && (
+                <div className="border-t border-neutral-800 pt-3">
+                  <ArcPathControls
+                    arcPath={
+                      animation.arcPath ?? { enabled: false, autoRotate: false, segments: [] }
+                    }
+                    segmentCount={Math.max(
+                      animation.properties.x != null || animation.properties.y != null ? 1 : 0,
+                      (animation.keyframes?.keyframes?.length ?? 0) - 1,
+                    )}
+                    onToggle={(enabled) =>
+                      onSetArcPath(animation.id, {
+                        enabled,
+                        segments: animation.arcPath?.segments,
+                      })
+                    }
+                    onUpdateSegment={(index, update) =>
+                      onUpdateArcSegment?.(animation.id, index, update)
+                    }
+                    onToggleAutoRotate={(autoRotate) =>
+                      onSetArcPath(animation.id, {
+                        enabled: true,
+                        autoRotate,
+                        segments: animation.arcPath?.segments,
+                      })
+                    }
+                  />
+                </div>
+              )}
+
             <div className="flex items-center gap-2 pt-1">
               <AddPropertyTrigger
                 adding={addingProp}

package/src/components/editor/ArcPathControls.tsx

@@ -0,0 +1,131 @@
+import { memo, useCallback } from "react";
+import type { ArcPathConfig, ArcPathSegment } from "@hyperframes/core/gsap-parser";
+import { SliderControl } from "./propertyPanelPrimitives";
+import { LABEL } from "./propertyPanelHelpers";
+import { P } from "./panelTokens";
+
+interface ArcPathControlsProps {
+  arcPath: ArcPathConfig;
+  segmentCount: number;
+  onToggle: (enabled: boolean) => void;
+  onUpdateSegment: (index: number, update: Partial<ArcPathSegment>) => void;
+  onToggleAutoRotate: (autoRotate: boolean) => void;
+  disabled?: boolean;
+}
+
+export const ArcPathControls = memo(function ArcPathControls({
+  arcPath,
+  segmentCount,
+  onToggle,
+  onUpdateSegment,
+  onToggleAutoRotate,
+  disabled,
+}: ArcPathControlsProps) {
+  const handleToggle = useCallback(() => {
+    onToggle(!arcPath.enabled);
+  }, [arcPath.enabled, onToggle]);
+
+  const handleAutoRotate = useCallback(() => {
+    onToggleAutoRotate(!arcPath.autoRotate);
+  }, [arcPath.autoRotate, onToggleAutoRotate]);
+
+  if (segmentCount < 1) {
+    return (
+      <div className="rounded-md border border-neutral-800 bg-neutral-900/50 px-3 py-2">
+        <p className="text-[11px] text-neutral-500">
+          Add at least 2 position keyframes to enable arc motion.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <span className={LABEL}>Arc Motion</span>
+        <button
+          type="button"
+          onClick={handleToggle}
+          disabled={disabled}
+          className="relative rounded-full transition-all duration-150"
+          style={{ width: 28, height: 16, background: arcPath.enabled ? P.accent : P.borderInput }}
+          title={arcPath.enabled ? "Disable arc motion" : "Enable arc motion"}
+        >
+          <span
+            className="absolute top-[2px] left-0 rounded-full transition-transform duration-150"
+            style={{
+              width: 12,
+              height: 12,
+              background: arcPath.enabled ? P.white : P.textMuted,
+              transform: arcPath.enabled ? "translateX(14px)" : "translateX(2px)",
+            }}
+          />
+        </button>
+      </div>
+
+      {arcPath.enabled && (
+        <>
+          <div className="flex items-center justify-between">
+            <span className={LABEL}>Auto-Rotate</span>
+            <button
+              type="button"
+              onClick={handleAutoRotate}
+              disabled={disabled}
+              className="relative rounded-full transition-all duration-150"
+              style={{
+                width: 28,
+                height: 16,
+                background: arcPath.autoRotate ? P.accent : "#27272A",
+              }}
+              title={
+                arcPath.autoRotate
+                  ? "Disable auto-rotate along path"
+                  : "Rotate element to follow path tangent"
+              }
+            >
+              <span
+                className="absolute top-[2px] left-0 rounded-full transition-transform duration-150"
+                style={{
+                  width: 12,
+                  height: 12,
+                  background: arcPath.autoRotate ? P.white : P.textMuted,
+                  transform: arcPath.autoRotate ? "translateX(14px)" : "translateX(2px)",
+                }}
+              />
+            </button>
+          </div>
+
+          {arcPath.segments.map((seg, i) => (
+            <div key={i} className="grid min-w-0 gap-1.5">
+              <div className="flex items-center justify-between">
+                <span className={LABEL}>
+                  {segmentCount === 1 ? "Curviness" : `Segment ${i + 1}`}
+                </span>
+                {seg.cp1 && seg.cp2 && (
+                  <button
+                    type="button"
+                    onClick={() => onUpdateSegment(i, { cp1: undefined, cp2: undefined })}
+                    className="text-[9px] font-medium text-neutral-500 transition-colors hover:text-neutral-300"
+                    title="Reset to auto-generated control points"
+                  >
+                    Reset
+                  </button>
+                )}
+              </div>
+              <SliderControl
+                value={seg.curviness}
+                min={0}
+                max={3}
+                step={0.1}
+                disabled={disabled}
+                displayValue={seg.curviness.toFixed(1)}
+                formatDisplayValue={(v) => v.toFixed(1)}
+                onCommit={(v) => onUpdateSegment(i, { curviness: v })}
+              />
+            </div>
+          ))}
+        </>
+      )}
+    </div>
+  );
+});

package/src/components/editor/BorderRadiusEditor.tsx

@@ -0,0 +1,209 @@
+import { useCallback, useState } from "react";
+import { MetricField } from "./propertyPanelPrimitives";
+import { formatNumericValue, parseNumericValue, RESPONSIVE_GRID } from "./propertyPanelHelpers";
+
+type Corner = "tl" | "tr" | "br" | "bl";
+
+interface BorderRadiusEditorProps {
+  tl: number;
+  tr: number;
+  br: number;
+  bl: number;
+  disabled?: boolean;
+  onCommit: (corner: Corner | "all", value: number) => void;
+}
+
+const PREVIEW_W = 72;
+const PREVIEW_H = 52;
+const MAX_RADIUS = 26;
+
+function clampRadius(v: number): number {
+  return Math.max(0, Math.min(MAX_RADIUS, v));
+}
+
+function scaleRadius(v: number, maxPx: number): number {
+  if (maxPx <= 0) return 0;
+  return clampRadius(Math.round((v / Math.max(maxPx, 1)) * MAX_RADIUS));
+}
+
+export function BorderRadiusEditor({
+  tl,
+  tr,
+  br,
+  bl,
+  disabled,
+  onCommit,
+}: BorderRadiusEditorProps) {
+  const uniform = tl === tr && tr === br && br === bl;
+  const [linked, setLinked] = useState(uniform);
+
+  const maxVal = Math.max(tl, tr, br, bl, 1);
+  const sTL = scaleRadius(tl, maxVal);
+  const sTR = scaleRadius(tr, maxVal);
+  const sBR = scaleRadius(br, maxVal);
+  const sBL = scaleRadius(bl, maxVal);
+
+  const handleCornerCommit = useCallback(
+    (corner: Corner, raw: string) => {
+      const v = parseNumericValue(raw) ?? 0;
+      if (linked) {
+        onCommit("all", v);
+      } else {
+        onCommit(corner, v);
+      }
+    },
+    [linked, onCommit],
+  );
+
+  const handleToggleLinked = useCallback(() => {
+    if (!linked && !uniform) {
+      onCommit("all", tl);
+    }
+    setLinked((l) => !l);
+  }, [linked, uniform, tl, onCommit]);
+
+  const path = buildRoundedRectPath(PREVIEW_W, PREVIEW_H, sTL, sTR, sBR, sBL);
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-3">
+        <svg
+          width={PREVIEW_W}
+          height={PREVIEW_H}
+          viewBox={`0 0 ${PREVIEW_W} ${PREVIEW_H}`}
+          className="flex-shrink-0"
+        >
+          <path
+            d={path}
+            fill="rgba(255,255,255,0.06)"
+            stroke="rgba(255,255,255,0.24)"
+            strokeWidth={1.5}
+          />
+          <circle
+            cx={sTL}
+            cy={sTL}
+            r={3}
+            fill={linked ? "#3b82f6" : "#a78bfa"}
+            className="cursor-pointer"
+          />
+          <circle
+            cx={PREVIEW_W - sTR}
+            cy={sTR}
+            r={3}
+            fill={linked ? "#3b82f6" : "#a78bfa"}
+            className="cursor-pointer"
+          />
+          <circle
+            cx={PREVIEW_W - sBR}
+            cy={PREVIEW_H - sBR}
+            r={3}
+            fill={linked ? "#3b82f6" : "#a78bfa"}
+            className="cursor-pointer"
+          />
+          <circle
+            cx={sBL}
+            cy={PREVIEW_H - sBL}
+            r={3}
+            fill={linked ? "#3b82f6" : "#a78bfa"}
+            className="cursor-pointer"
+          />
+        </svg>
+
+        <button
+          type="button"
+          className="flex h-7 w-7 items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
+          onClick={handleToggleLinked}
+          disabled={disabled}
+          title={linked ? "Unlink corners" : "Link all corners"}
+        >
+          {linked ? (
+            <svg
+              width={14}
+              height={14}
+              viewBox="0 0 16 16"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={1.5}
+            >
+              <path d="M6 12H4a4 4 0 010-8h2M10 4h2a4 4 0 010 8h-2M5 8h6" />
+            </svg>
+          ) : (
+            <svg
+              width={14}
+              height={14}
+              viewBox="0 0 16 16"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={1.5}
+            >
+              <path d="M6 12H4a4 4 0 010-8h2M10 4h2a4 4 0 010 8h-2" />
+            </svg>
+          )}
+        </button>
+      </div>
+
+      {linked ? (
+        <MetricField
+          label="All"
+          value={formatNumericValue(tl)}
+          disabled={disabled}
+          liveCommit
+          onCommit={(next) => handleCornerCommit("tl", next)}
+        />
+      ) : (
+        <div className={RESPONSIVE_GRID}>
+          <MetricField
+            label="TL"
+            value={formatNumericValue(tl)}
+            disabled={disabled}
+            liveCommit
+            onCommit={(next) => handleCornerCommit("tl", next)}
+          />
+          <MetricField
+            label="TR"
+            value={formatNumericValue(tr)}
+            disabled={disabled}
+            liveCommit
+            onCommit={(next) => handleCornerCommit("tr", next)}
+          />
+          <MetricField
+            label="BL"
+            value={formatNumericValue(bl)}
+            disabled={disabled}
+            liveCommit
+            onCommit={(next) => handleCornerCommit("bl", next)}
+          />
+          <MetricField
+            label="BR"
+            value={formatNumericValue(br)}
+            disabled={disabled}
+            liveCommit
+            onCommit={(next) => handleCornerCommit("br", next)}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function buildRoundedRectPath(
+  w: number,
+  h: number,
+  tl: number,
+  tr: number,
+  br: number,
+  bl: number,
+): string {
+  return [
+    `M ${tl} 0`,
+    `L ${w - tr} 0`,
+    `Q ${w} 0 ${w} ${tr}`,
+    `L ${w} ${h - br}`,
+    `Q ${w} ${h} ${w - br} ${h}`,
+    `L ${bl} ${h}`,
+    `Q 0 ${h} 0 ${h - bl}`,
+    `L 0 ${tl}`,
+    `Q 0 0 ${tl} 0`,
+    "Z",
+  ].join(" ");
+}