fix(studio): surface fromTo from-state in GSAP design panel (#1122)

* fix(studio): surface fromTo from-state in GSAP design panel

Closes #1121.

The core already parsed, serialized, and mutated fromProperties end to end
(gsapParser.ts, applyUpdatesToCall, buildTweenStatementCode). The panel
never wired it in — AnimationCard only read animation.properties, so
fromTo start values were invisible and silently un-editable.

Changes:
- files.ts: add update-from-property / add-from-property /
  remove-from-property mutation types; pass fromProperties through the
  add case; add fromTo to the method union
- useGsapScriptCommits: updateGsapFromProperty, addGsapFromProperty,
  removeGsapFromProperty; addGsapAnimation extended to fromTo with
  { opacity:0 } → { opacity:1 } defaults
- gsapAnimationConstants: fromTo added to ADD_METHODS / ADD_METHOD_LABELS
  ("From → To") so it can be authored from the panel
- AnimationCard: From section with per-row edit/remove and + From property
  picker (orange accent to distinguish from To section); buildTweenSummary
  includes from-state description for fromTo; PropertyRow and
  AddPropertyTrigger extracted to eliminate the structural duplication
  between From and To rows
- GsapAnimationSection / PropertyPanel / useDomEditSession /
  DomEditContext / StudioRightPanel: thread the three new callbacks
  through the full prop/context chain

* test(studio): add API-level tests for fromProperties mutation routes

Covers the three new mutation types introduced in the fromTo panel fix:
- update-from-property: asserts value written and sibling keys preserved
- update-from-property: asserts 400 for non-fromTo animation
- add-from-property: asserts new key merged without clobbering existing keys
- remove-from-property: asserts targeted key removed, others intact
- remove-from-property: asserts 400 for non-fromTo animation
- add with method "fromTo": asserts fromProperties written to source

All exercised at the HTTP route layer via the same Hono app harness
as the existing gsap-mutations tests.
This commit is contained in:
Miguel Ángel
2026-05-29 13:18:05 -04:00
committed by GitHub
parent 62475b7649
commit 6a0c9a5e22
10 changed files with 590 additions and 77 deletions
@@ -17,7 +17,10 @@ interface GsapAnimationSectionProps {
onDeleteAnimation: (animationId: string) => void;
onAddProperty: (animationId: string, property: string) => void;
onRemoveProperty: (animationId: string, property: string) => void;
onAddAnimation: (method: "to" | "from" | "set") => void;
onUpdateFromProperty?: (animationId: string, property: string, value: number | string) => void;
onAddFromProperty?: (animationId: string, property: string) => void;
onRemoveFromProperty?: (animationId: string, property: string) => void;
onAddAnimation: (method: "to" | "from" | "set" | "fromTo") => void;
onLivePreview?: (property: string, value: number | string) => void;
onLivePreviewEnd?: () => void;
}
@@ -31,6 +34,9 @@ export const GsapAnimationSection = memo(function GsapAnimationSection({
onDeleteAnimation,
onAddProperty,
onRemoveProperty,
onUpdateFromProperty,
onAddFromProperty,
onRemoveFromProperty,
onAddAnimation,
onLivePreview,
onLivePreviewEnd,
@@ -64,6 +70,9 @@ export const GsapAnimationSection = memo(function GsapAnimationSection({
onDeleteAnimation={onDeleteAnimation}
onAddProperty={onAddProperty}
onRemoveProperty={onRemoveProperty}
onUpdateFromProperty={onUpdateFromProperty}
onAddFromProperty={onAddFromProperty}
onRemoveFromProperty={onRemoveFromProperty}
onLivePreview={onLivePreview}
onLivePreviewEnd={onLivePreviewEnd}
/>