@hyperframes/studio 0.6.52 → 0.6.54

package/src/components/editor/AnimationCard.tsx

@@ -0,0 +1,325 @@
+import { memo, useCallback, useMemo, useState } from "react";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import { SUPPORTED_EASES, SUPPORTED_PROPS } from "@hyperframes/core/gsap-constants";
+import { RESPONSIVE_GRID } from "./propertyPanelHelpers";
+import { MetricField, SelectField } from "./propertyPanelPrimitives";
+import { controlPointsForGsapEase } from "./studioMotion";
+import {
+  EASE_LABELS,
+  METHOD_LABELS,
+  METHOD_TOOLTIPS,
+  PROP_LABELS,
+  PROP_TOOLTIPS,
+  PROP_UNITS,
+} from "./gsapAnimationConstants";
+import { EaseCurveSection } from "./EaseCurveSection";
+
+const PERCENT_PROPS = new Set(["opacity", "autoAlpha"]);
+function isPercentProp(prop: string): boolean {
+  return PERCENT_PROPS.has(prop);
+}
+
+function buildTweenSummary(animation: GsapAnimation): string {
+  const easeName = animation.ease ?? "none";
+  const ease = EASE_LABELS[easeName] ?? easeName;
+  const props = Object.entries(animation.properties);
+  const target = animation.targetSelector;
+  const dur = animation.duration ?? 0;
+  const pos = animation.position;
+  const propDescs = props.map(([p, v]) => {
+    const label = (PROP_LABELS[p] ?? p).toLowerCase();
+    const unit = PROP_UNITS[p] ?? "";
+    return `${label} to ${v}${unit}`;
+  });
+  const propText = propDescs.length > 0 ? propDescs.join(", ") : "no properties yet";
+  if (animation.method === "set") return `At ${pos}s, instantly set ${target}'s ${propText}.`;
+  if (animation.method === "from")
+    return `Starting at ${pos}s, over ${dur}s, ${target} enters from ${propText} using a ${ease.toLowerCase()} curve.`;
+  return `Starting at ${pos}s, over ${dur}s, animate ${target}'s ${propText} using a ${ease.toLowerCase()} curve.`;
+}
+
+function parseNumericOrString(raw: string): number | string {
+  const num = Number(raw);
+  return Number.isFinite(num) ? num : raw;
+}
+
+interface AnimationCardProps {
+  animation: GsapAnimation;
+  defaultExpanded: boolean;
+  onUpdateProperty: (animationId: string, property: string, value: number | string) => void;
+  onUpdateMeta: (
+    animationId: string,
+    updates: { duration?: number; ease?: string; position?: number },
+  ) => void;
+  onDeleteAnimation: (animationId: string) => void;
+  onAddProperty: (animationId: string, property: string) => void;
+  onRemoveProperty: (animationId: string, property: string) => void;
+  onLivePreview?: (property: string, value: number | string) => void;
+  onLivePreviewEnd?: () => void;
+}
+
+// fallow-ignore-next-line complexity
+export const AnimationCard = memo(function AnimationCard({
+  animation,
+  defaultExpanded,
+  onUpdateProperty,
+  onUpdateMeta,
+  onDeleteAnimation,
+  onAddProperty,
+  onRemoveProperty,
+  onLivePreview,
+  onLivePreviewEnd,
+}: AnimationCardProps) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const [addingProp, setAddingProp] = useState(false);
+
+  const usedProps = useMemo(
+    () => new Set(Object.keys(animation.properties)),
+    [animation.properties],
+  );
+  const availableProps = useMemo(
+    () => SUPPORTED_PROPS.filter((p) => !usedProps.has(p)),
+    [usedProps],
+  );
+
+  const commitProperty = useCallback(
+    (prop: string, raw: string) => {
+      const value = parseNumericOrString(raw);
+      onUpdateProperty(animation.id, prop, value);
+      onLivePreviewEnd?.();
+    },
+    [animation.id, onUpdateProperty, onLivePreviewEnd],
+  );
+
+  const scrubProperty = useCallback(
+    (prop: string, raw: string) => {
+      onLivePreview?.(prop, parseNumericOrString(raw));
+    },
+    [onLivePreview],
+  );
+
+  const commitDuration = useCallback(
+    (raw: string) => {
+      const num = Number(raw);
+      if (Number.isFinite(num) && num >= 0)
+        onUpdateMeta(animation.id, { duration: Math.max(0, num) });
+    },
+    [animation.id, onUpdateMeta],
+  );
+
+  const commitPosition = useCallback(
+    (raw: string) => {
+      const num = Number(raw);
+      if (Number.isFinite(num) && num >= 0)
+        onUpdateMeta(animation.id, { position: Math.max(0, num) });
+    },
+    [animation.id, onUpdateMeta],
+  );
+
+  const [copied, setCopied] = useState(false);
+
+  const methodLabel = METHOD_LABELS[animation.method] ?? animation.method;
+  const easeName = animation.ease ?? "none";
+  const easeLabel = easeName.startsWith("custom(")
+    ? "Custom curve"
+    : (EASE_LABELS[easeName] ?? easeName);
+  const endTime =
+    typeof animation.position === "number"
+      ? animation.position + (animation.duration ?? 0)
+      : animation.position;
+
+  const summary = useMemo(() => buildTweenSummary(animation), [animation]);
+
+  return (
+    <div className="border-b border-neutral-800 pb-3">
+      <button
+        type="button"
+        onClick={() => setExpanded((v) => !v)}
+        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"
+          title={METHOD_TOOLTIPS[animation.method]}
+        >
+          {methodLabel}
+        </span>
+        <span className="text-[11px] font-medium text-neutral-400" title="When this effect plays">
+          {typeof animation.position === "number" ? `${animation.position}s` : animation.position} –{" "}
+          {typeof endTime === "number" ? `${endTime.toFixed(1)}s` : endTime}
+        </span>
+        <span className="ml-auto text-[10px] text-neutral-500" title={easeName}>
+          {easeLabel}
+        </span>
+        <svg
+          width="10"
+          height="10"
+          viewBox="0 0 10 10"
+          fill="currentColor"
+          className={`flex-shrink-0 text-neutral-500 transition-transform ${expanded ? "" : "-rotate-90"}`}
+        >
+          <path d="M2 3l3 4 3-4z" />
+        </svg>
+      </button>
+
+      {expanded && (
+        <div className="pt-2">
+          <div className="space-y-3">
+            <div className="flex items-start gap-2">
+              <p className="flex-1 text-[10px] leading-relaxed text-neutral-400 italic">
+                {summary}
+              </p>
+              <button
+                type="button"
+                onClick={() => {
+                  void navigator.clipboard.writeText(summary);
+                  setCopied(true);
+                  setTimeout(() => setCopied(false), 1500);
+                }}
+                className="flex-shrink-0 rounded px-1.5 py-0.5 text-[9px] font-medium text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
+                title="Copy description to clipboard — paste into agent prompts"
+              >
+                {copied ? "Copied" : "Copy"}
+              </button>
+            </div>
+            <div className={RESPONSIVE_GRID}>
+              {animation.method !== "set" && (
+                <MetricField
+                  label="Length"
+                  value={String(Math.max(0, animation.duration ?? 0))}
+                  suffix="s"
+                  tooltip="How long this effect lasts"
+                  onCommit={commitDuration}
+                />
+              )}
+              <MetricField
+                label="Starts at"
+                value={
+                  typeof animation.position === "string"
+                    ? animation.position
+                    : String(Math.max(0, animation.position))
+                }
+                suffix={typeof animation.position === "number" ? "s" : undefined}
+                tooltip="When this effect begins on the timeline"
+                onCommit={commitPosition}
+              />
+            </div>
+
+            {animation.method !== "set" && (
+              <>
+                <SelectField
+                  label="Speed"
+                  value={
+                    animation.ease?.startsWith("custom(") ? "custom" : (animation.ease ?? "none")
+                  }
+                  options={[...SUPPORTED_EASES, "custom"]}
+                  onChange={(next) => {
+                    if (next === "custom") {
+                      const points = controlPointsForGsapEase(animation.ease ?? "power2.out");
+                      const path = `M0,0 C${points.x1},${points.y1} ${points.x2},${points.y2} 1,1`;
+                      onUpdateMeta(animation.id, { ease: `custom(${path})` });
+                    } else {
+                      onUpdateMeta(animation.id, { ease: next });
+                    }
+                  }}
+                />
+                <EaseCurveSection
+                  ease={animation.ease ?? "none"}
+                  duration={animation.duration}
+                  onCustomEaseCommit={(customEase) =>
+                    onUpdateMeta(animation.id, { ease: customEase })
+                  }
+                />
+              </>
+            )}
+
+            {Object.keys(animation.properties).length > 0 && (
+              <div className="space-y-1.5">
+                {Object.entries(animation.properties).map(([prop, val]) => (
+                  <div key={prop} className="flex items-center gap-1">
+                    <div className="min-w-0 flex-1">
+                      <MetricField
+                        label={PROP_LABELS[prop] ?? prop}
+                        value={
+                          isPercentProp(prop) ? String(Math.round(Number(val) * 100)) : String(val)
+                        }
+                        suffix={PROP_UNITS[prop]}
+                        tooltip={PROP_TOOLTIPS[prop]}
+                        scrub
+                        liveCommit
+                        onCommit={(raw) => {
+                          const adjusted = isPercentProp(prop) ? String(Number(raw) / 100) : raw;
+                          scrubProperty(prop, adjusted);
+                          commitProperty(prop, adjusted);
+                        }}
+                      />
+                    </div>
+                    <button
+                      type="button"
+                      onClick={() => onRemoveProperty(animation.id, prop)}
+                      className="flex-shrink-0 rounded p-0.5 text-neutral-600 transition-colors hover:bg-neutral-800 hover:text-red-400"
+                      title={`Remove ${PROP_LABELS[prop] ?? prop}`}
+                    >
+                      <svg
+                        width="12"
+                        height="12"
+                        viewBox="0 0 12 12"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="1.5"
+                      >
+                        <path d="M3 3l6 6M9 3l-6 6" />
+                      </svg>
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            <div className="flex items-center gap-2 pt-1">
+              {addingProp && availableProps.length > 0 ? (
+                <select
+                  autoFocus
+                  className="min-w-0 rounded-lg border border-neutral-700 bg-neutral-900 px-2 py-1 text-[11px] text-neutral-100 outline-none"
+                  defaultValue=""
+                  onChange={(e) => {
+                    if (e.target.value) onAddProperty(animation.id, e.target.value);
+                    setAddingProp(false);
+                  }}
+                  onBlur={() => setAddingProp(false)}
+                >
+                  <option value="" disabled>
+                    Choose effect…
+                  </option>
+                  {availableProps.map((p) => (
+                    <option key={p} value={p}>
+                      {PROP_LABELS[p] ?? p}
+                    </option>
+                  ))}
+                </select>
+              ) : (
+                availableProps.length > 0 && (
+                  <button
+                    type="button"
+                    onClick={() => setAddingProp(true)}
+                    className="text-[11px] font-medium text-neutral-400 transition-colors hover:text-neutral-200"
+                    title="Add another animated property to this effect"
+                  >
+                    + Effect
+                  </button>
+                )
+              )}
+              <button
+                type="button"
+                onClick={() => onDeleteAnimation(animation.id)}
+                className="ml-auto text-[11px] font-medium text-red-400 transition-colors hover:text-red-300"
+                title="Remove this animation"
+              >
+                Remove
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});

package/src/components/editor/EaseCurveSection.tsx

@@ -0,0 +1,213 @@
+import { useCallback, useRef, useState } from "react";
+import { EASE_CURVES, EASE_LABELS, parseCustomEaseFromString } from "./gsapAnimationConstants";
+
+function round2(n: number): number {
+  return Math.round(n * 100) / 100;
+}
+
+export function EaseCurveSection({
+  ease,
+  duration,
+  onCustomEaseCommit,
+}: {
+  ease: string;
+  duration?: number;
+  onCustomEaseCommit: (ease: string) => void;
+}) {
+  const isCustom = ease.startsWith("custom(");
+  const curveFromPreset = EASE_CURVES[ease];
+  const customPoints = isCustom ? parseCustomEaseFromString(ease) : null;
+  const curve: [number, number, number, number] | null =
+    isCustom && customPoints
+      ? [customPoints.x1, customPoints.y1, customPoints.x2, customPoints.y2]
+      : (curveFromPreset ?? null);
+
+  const [draft, setDraft] = useState<[number, number, number, number] | null>(null);
+  const [progress, setProgress] = useState<number | null>(null);
+  const draggingRef = useRef<"p1" | "p2" | null>(null);
+  const svgRef = useRef<SVGSVGElement | null>(null);
+  const rafRef = useRef<number>(0);
+
+  const play = useCallback(() => {
+    const start = performance.now();
+    const dur = 1000;
+    const tick = (now: number) => {
+      const t = Math.min((now - start) / dur, 1);
+      setProgress(t);
+      if (t < 1) rafRef.current = requestAnimationFrame(tick);
+      else setTimeout(() => setProgress(null), 400);
+    };
+    cancelAnimationFrame(rafRef.current);
+    rafRef.current = requestAnimationFrame(tick);
+  }, []);
+
+  const active = draft ?? curve;
+  if (!active) return null;
+  const [x1, y1, x2, y2] = active;
+
+  const w = 200;
+  const h = 100;
+  const pad = 14;
+  const gw = w - pad * 2;
+  const gh = h - pad * 2;
+
+  const toSvg = (px: number, py: number) => ({
+    x: pad + gw * px,
+    y: h - pad - gh * py,
+  });
+
+  const curvePath = `M${pad},${h - pad} C${toSvg(x1, y1).x},${toSvg(x1, y1).y} ${toSvg(x2, y2).x},${toSvg(x2, y2).y} ${w - pad},${pad}`;
+
+  let dotX = pad;
+  let dotY = h - pad;
+  if (progress !== null) {
+    const t = progress;
+    const mt = 1 - t;
+    dotX = pad + gw * (mt * mt * mt * 0 + 3 * mt * mt * t * x1 + 3 * mt * t * t * x2 + t * t * t);
+    dotY =
+      h - pad - gh * (mt * mt * mt * 0 + 3 * mt * mt * t * y1 + 3 * mt * t * t * y2 + t * t * t);
+  }
+
+  const handlePointerDown = (handle: "p1" | "p2", e: React.PointerEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    draggingRef.current = handle;
+    (e.target as SVGElement).setPointerCapture(e.pointerId);
+    if (!draft) setDraft([x1, y1, x2, y2]);
+  };
+
+  const handlePointerMove = (e: React.PointerEvent<SVGSVGElement>) => {
+    if (!draggingRef.current || !svgRef.current) return;
+    e.preventDefault();
+    const rect = svgRef.current.getBoundingClientRect();
+    const sx = ((e.clientX - rect.left) / rect.width) * w;
+    const sy = ((e.clientY - rect.top) / rect.height) * h;
+    const px = Math.max(0, Math.min(1, (sx - pad) / gw));
+    const py = Math.max(-1, Math.min(2, (h - pad - sy) / gh));
+    const prev = draft ?? [x1, y1, x2, y2];
+    const next: [number, number, number, number] =
+      draggingRef.current === "p1"
+        ? [round2(px), round2(py), prev[2], prev[3]]
+        : [prev[0], prev[1], round2(px), round2(py)];
+    setDraft(next);
+  };
+
+  const handlePointerUp = () => {
+    if (!draggingRef.current || !draft) return;
+    draggingRef.current = null;
+    const path = `M0,0 C${draft[0]},${draft[1]} ${draft[2]},${draft[3]} 1,1`;
+    onCustomEaseCommit(`custom(${path})`);
+    setDraft(null);
+  };
+
+  const p1 = toSvg(x1, y1);
+  const p2 = toSvg(x2, y2);
+  const start = toSvg(0, 0);
+  const end = toSvg(1, 1);
+  const label = isCustom ? "Custom curve" : (EASE_LABELS[ease] ?? ease);
+
+  return (
+    <div className="rounded-lg bg-neutral-900/50 p-2">
+      <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"
+        >
+          {progress !== null ? "Playing…" : "Preview"}
+        </button>
+      </div>
+      <div className="overflow-hidden rounded pt-[72px] -mt-[72px]">
+        <svg
+          ref={svgRef}
+          width="100%"
+          height={h}
+          viewBox={`0 0 ${w} ${h}`}
+          preserveAspectRatio="none"
+          style={{ overflow: "visible" }}
+          className="touch-none select-none"
+          onPointerMove={handlePointerMove}
+          onPointerUp={handlePointerUp}
+          onPointerCancel={handlePointerUp}
+        >
+          <line
+            x1={pad}
+            y1={h - pad}
+            x2={w - pad}
+            y2={h - pad}
+            stroke="white"
+            strokeOpacity="0.06"
+            strokeWidth="0.5"
+          />
+          <line
+            x1={pad}
+            y1={pad}
+            x2={pad}
+            y2={h - pad}
+            stroke="white"
+            strokeOpacity="0.06"
+            strokeWidth="0.5"
+          />
+          <line
+            x1={start.x}
+            y1={start.y}
+            x2={p1.x}
+            y2={p1.y}
+            stroke="rgba(52,211,153,0.25)"
+            strokeWidth="1"
+          />
+          <line
+            x1={end.x}
+            y1={end.y}
+            x2={p2.x}
+            y2={p2.y}
+            stroke="rgba(52,211,153,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" />}
+          <circle
+            cx={p1.x}
+            cy={p1.y}
+            r="5"
+            fill="#0a0a1a"
+            stroke="#34d399"
+            strokeWidth="2"
+            className="cursor-grab active:cursor-grabbing"
+            onPointerDown={(e) => handlePointerDown("p1", e)}
+          />
+          <circle
+            cx={p2.x}
+            cy={p2.y}
+            r="5"
+            fill="#0a0a1a"
+            stroke="#34d399"
+            strokeWidth="2"
+            className="cursor-grab active:cursor-grabbing"
+            onPointerDown={(e) => handlePointerDown("p2", e)}
+          />
+          {duration != null && duration > 0 && (
+            <>
+              <text x={pad} y={h - 1} textAnchor="start" className="fill-neutral-600 text-[8px]">
+                0s
+              </text>
+              <text
+                x={pad + gw / 2}
+                y={h - 1}
+                textAnchor="middle"
+                className="fill-neutral-600 text-[8px]"
+              >
+                {(duration / 2).toFixed(1)}s
+              </text>
+              <text x={w - pad} y={h - 1} textAnchor="end" className="fill-neutral-600 text-[8px]">
+                {duration}s
+              </text>
+            </>
+          )}
+        </svg>
+      </div>
+      <p className="mt-1 text-center text-[10px] text-neutral-500">{label}</p>
+    </div>
+  );
+}

package/src/components/editor/GsapAnimationSection.tsx

@@ -0,0 +1,112 @@
+import { memo, useState } from "react";
+import type { 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";
+import { AnimationCard } from "./AnimationCard";
+
+interface GsapAnimationSectionProps {
+  animations: GsapAnimation[];
+  multipleTimelines?: boolean;
+  unsupportedTimelinePattern?: boolean;
+  onUpdateProperty: (animationId: string, property: string, value: number | string) => void;
+  onUpdateMeta: (
+    animationId: string,
+    updates: { duration?: number; ease?: string; position?: number },
+  ) => void;
+  onDeleteAnimation: (animationId: string) => void;
+  onAddProperty: (animationId: string, property: string) => void;
+  onRemoveProperty: (animationId: string, property: string) => void;
+  onAddAnimation: (method: "to" | "from" | "set") => void;
+  onLivePreview?: (property: string, value: number | string) => void;
+  onLivePreviewEnd?: () => void;
+}
+
+export const GsapAnimationSection = memo(function GsapAnimationSection({
+  animations,
+  multipleTimelines,
+  unsupportedTimelinePattern,
+  onUpdateProperty,
+  onUpdateMeta,
+  onDeleteAnimation,
+  onAddProperty,
+  onRemoveProperty,
+  onAddAnimation,
+  onLivePreview,
+  onLivePreviewEnd,
+}: GsapAnimationSectionProps) {
+  const [addMenuOpen, setAddMenuOpen] = useState(false);
+
+  return (
+    <Section title="Animation" icon={<Film size={15} />}>
+      {multipleTimelines && (
+        <p className="mb-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-amber-400">
+          This file has multiple GSAP timelines. Animation editing is disabled to prevent data loss
+          — consolidate into a single timeline to enable editing.
+        </p>
+      )}
+      {unsupportedTimelinePattern && (
+        <p className="mb-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-amber-400">
+          This composition uses a timeline assignment pattern (window.__timelines[...]) that the
+          editor doesn&apos;t support. Use a variable declaration (const tl = gsap.timeline()) to
+          enable editing.
+        </p>
+      )}
+      {multipleTimelines || unsupportedTimelinePattern ? null : (
+        <div className="space-y-2">
+          {animations.map((anim, index) => (
+            <AnimationCard
+              key={anim.id}
+              animation={anim}
+              defaultExpanded={index === 0}
+              onUpdateProperty={onUpdateProperty}
+              onUpdateMeta={onUpdateMeta}
+              onDeleteAnimation={onDeleteAnimation}
+              onAddProperty={onAddProperty}
+              onRemoveProperty={onRemoveProperty}
+              onLivePreview={onLivePreview}
+              onLivePreviewEnd={onLivePreviewEnd}
+            />
+          ))}
+
+          <div className="relative pt-1">
+            {addMenuOpen ? (
+              <div className="flex gap-1.5">
+                {ADD_METHODS.map((method) => (
+                  <button
+                    key={method}
+                    type="button"
+                    title={METHOD_TOOLTIPS[method]}
+                    onClick={() => {
+                      onAddAnimation(method);
+                      setAddMenuOpen(false);
+                    }}
+                    className="rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 py-1.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white"
+                  >
+                    {ADD_METHOD_LABELS[method] ?? method}
+                  </button>
+                ))}
+                <button
+                  type="button"
+                  onClick={() => setAddMenuOpen(false)}
+                  className="px-1.5 text-[11px] text-neutral-500 hover:text-neutral-300"
+                >
+                  Cancel
+                </button>
+              </div>
+            ) : (
+              <button
+                type="button"
+                onClick={() => setAddMenuOpen(true)}
+                className="text-[11px] font-medium text-neutral-400 transition-colors hover:text-neutral-200"
+                title="Add a new animation effect to this element"
+              >
+                + Add effect
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+});