61 Commits

Include renames

Author	SHA1	Message	Date
Miguel Ángel	f0b499b582	fix(studio): keyframe bug fixes — gate delete hooks, fix value corruption, gesture recording (#1314) ... - Gate stripStudioEditsFromTarget/bakeVisibilityOnDelete behind a stripStudioEdits flag on the delete mutation type so they only fire on user-initiated deletes, not on internal delete-then-recreate drags. - Add bakeVisibilityOnDelete to the remove-all-keyframes handler so elements with CSS opacity:0 stay visible after collapsing keyframes. - Fix integer rounding in readAllAnimatedProperties: use 3-decimal precision for visual properties (opacity, scale, rotation) instead of Math.round which corrupted mid-fade values to 0. - Guard VISUAL_BASELINE against cross-tween contamination by querying __timelines for properties animated by other tweens on the same element. - Harden bakeVisibilityOnDelete: reverse-scan keyframes for the last one containing opacity, guard against relative values (+=/-=/*=), and add Number.isFinite check. - Fix falsy-zero doubling in drag commit: replace || fallback with Number.isFinite so a base GSAP position of 0 is correctly preserved. - Fix gesture recording sign inversion: remove pointerElementOffset subtraction from dx/dy formula and instead apply it once to basePosition so the element center tracks the pointer. - Fix TypeScript build errors in gsapSoftReload.ts (6 double-casts). - Strip all diagnostic logs from production code.	2026-06-10 18:53:06 -04:00
3 people	8fcbb63a37	docs(readme): swap hero media to hyperframes-logo-motion (#1315) ... * docs(readme): swap hero media to hyperframes-logo-motion Replaces the prior hfgif-1280.webp hero with a new logo-motion clip Bin trimmed for the launch. Converted the source MP4 to animated webp (the existing hero's format) so it auto-plays in the GitHub README the same way the old one did - MP4 sources don't render inline or autoplay in <img> tags. - New asset: static.heygen.ai/hyperframes-oss/docs/images/ hyperframes-logo-motion-1280.webp (1280x720, 85 frames, 199KB) - ffmpeg conversion: scale=1280, libwebp_anim, q=80, loop=0 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix(studio): format 5 hooks files (oxfmt) * style: remove unused imports in studio hooks (pre-existing lint failures) CI Lint on main was already failing with 5 unused-import errors in packages/studio/src/hooks/. Removed the unused symbols to unblock the README hero PR's CI: - gsapRuntimeBridge.ts: resolveTweenStart, resolveTweenDuration - useGsapScriptCommits.ts: usePlayerStore - useTimelineEditing.ts: PatchTarget (type-only) - gsapDragCommit.ts: readGsapProperty Bundled into the README PR per James's request to fix CI in-place. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * test(studio): add childRects: [] to DomEditOverlay test mock useDomEditOverlayRects' return type added a childRects: OverlayRect[] field; the DomEditOverlay test's mock didn't get updated and was returning an object without it, so DomEditOverlay.tsx's 'childRects.length > 0' check threw TypeError on undefined. One-line mock-vs-hook contract realignment. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * test(studio): drive player-store currentTime in selection-hydration test (#1311 follow-up) The 'hydrates seek first, preserves the initial url state, then restores selection' test was failing because PR #1311 (keyframes feat) changed useStudioUrlState to read currentTime from the player store via usePlayerStore((s) => s.currentTime), removing it from the hook's prop shape. The test was still trying to drive currentTime via the harness prop, which is now a no-op — so the selection-hydration useEffect's time-stability guard Math.abs(currentTime - stableTimeRef.current!) > 0.05 never passed (store currentTime stayed at 0 while stableTimeRef caught the 4.2 seek target). buildDomSelectionFromTarget was never reached, applyDomSelection was never called, and the assertion got 0 calls. Fix: setState the store's currentTime to 4.2 ahead of the rerender so the hook's selector picks it up and the time-stability guard passes. Harness prop kept as-is — it's a no-op but doesn't hurt. Pre-existing failure on main HEAD 81416ab3; surfaced as CI gate on the unrelated docs/readme-hero-motion-update PR. * test(studio): stub getBoundingClientRect + flush RAF in DomEditOverlay test The 'renders selected bounds right after clicking a movable selection' test asserts the selection box appears after pointerdown, but happy-dom returns 0 for newly-created elements' getBoundingClientRect. The overlay's compRect updates via a RAF loop that early-returns when iframe width is 0; the keyframes PR a468550f added a compRect.width > 0 guard to the selection-box render path, so compRect=0 silently gates the box off and the assertion fails. Stub Element.prototype.getBoundingClientRect to return 800x450 for the test, and flush two RAFs after render so the compRect state update lands before the pointerdown assertion. Restore the prototype at test end. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com> Co-authored-by: Miguel Sierra <miguel.sierra@heygen.com>	2026-06-09 23:39:22 -07:00
Miguel Ángel	81416ab3c9	refactor(studio): split oversized files to pass 600-line check (#1313)	2026-06-09 19:53:14 -04:00
Miguel Ángel	a468550f82	feat(studio): keyframe system — parser, runtime, timeline UI, design panel, gesture recording (#1311) ... * feat(studio): runtime hooks — global time compiler + keyframe runtime Add the runtime bridge layer: global time compilation (tween % → clip %), soft reload after mutations, runtime keyframe preview, and keyframe commit helper. * feat(studio): runtime hooks — global time compiler + keyframe runtime Add the runtime bridge layer: global time compilation (tween % → clip %), soft reload after mutations, runtime keyframe preview, and keyframe commit helper. * feat(studio): keyframe cache + commit hooks Add hooks for keyframe cache population (tween → clip-relative %), mutation dispatch, keyframe snapping, and audio beat detection. * feat(studio): timeline UI — dopesheet diamonds + keyboard nav Add dopesheet strip with diamond keyframe indicators, timeline property rows, keyboard navigation (J/Shift+J/Delete/K), and feature gate (STUDIO_KEYFRAMES_ENABLED defaults to false). * feat(studio): design panel — arc controls + ease curve + stagger Add arc path controls (curviness slider, auto-rotate), motion path SVG overlay, ease curve visualization, stagger controls, and expanded animation card. Includes border-radius editor dependency from #1217. * feat(studio): gesture recording core Add gesture recording engine with RAF sampling, modifier key property mapping (Shift→rotationXY, Alt→rotation, Cmd→opacity), Ramer-Douglas-Peucker simplification, and ghost trail SVG overlay. * fix(studio): keyframe drag + recording bug bash 21 fixes: capture GSAP base at drag start, translate:none before gsap.set, skip reapplyPathOffsets for GSAP elements, clamp recording seek, _auto flag for 100% keyframes, overlay flash fix, block edits during recording. * feat(studio): keyframe integration wiring + docs Wire App.tsx recording orchestration, TimelineToolbar K/R buttons, PropertyPanel per-property diamonds, shortcuts panel, toast notifications, and keyframes guide documentation. All gated on STUDIO_KEYFRAMES_ENABLED (default false).	2026-06-09 18:30:23 -04:00
Vance IngallsandClaude Sonnet 4.6	0923bc0787	feat(studio): carry hfId on TimelineElement, wire through buildPatchTarget (R7, T5b) (#1299) ... * feat(studio): carry hfId on TimelineElement, wire through buildPatchTarget (R7, T5b) * refactor(studio): extract readHfId helper, fix empty-string normalization, add comments (R7 review) - Extract readHfId(el) to domEditingLayers.ts — centralizes `?.trim() || undefined` normalisation; guards against empty-string data-hf-id reaching findTagByTarget - Wire readHfId into domEditingLayers.ts and useDomEditCommits.ts (the one site that still used `?? undefined` instead of `|| undefined`) - Re-export readHfId through domEditing.ts public API - Add readHfId unit tests: present, absent, empty-string, whitespace-only - Add comment on PatchTarget: runtime validation lives in findTagByTarget, type is docs-only - Suppress pre-existing unused re-exports in timelineDOM.ts (backward-compat re-exports brought into fallow scope by the T5b hfId changes) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(core): clear data-hf-id on split clone to prevent dual-match (R7 review) cloneNode(true) copies all attributes including data-hf-id. Without clearing it, both halves of a split share the same hf-id; the server's findByHfId picks the first match and silently patches the wrong clip. Remove the attribute from the clone so write-back re-mints a fresh id on the next preview load. Adds a test: splitElementInHtml — hfId clone isolation. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(studio): add hfId to DomEditLayerItem + getDomLayerPatchTarget return type (R7 review) - Add hfId to DomEditLayerItem interface (domEditingTypes.ts) so layer item construction in collectDomEditLayerItems compiles - Widen getDomLayerPatchTarget return type to include hfId + populate it from data-hf-id attribute (domEditingElement.ts) - Widen findDomEditSelectionTarget to check hfId-first when no id/selector - Widen Pick types in domEditOverlayGeometry.ts and useGsapScriptCommits.ts - Add hfId to buildMissingCompositionElements element construction - Add hfId-targeted test coverage in domEditing.test.ts, domEditOverlayGeometry.test.ts, timelineIframeHelpers.test.ts - Update hfIds.test.ts KNOWN LIMITATION labels — write-back landed in R7 T1-2 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-06-09 15:15:27 -07:00
Vance Ingalls	82c754f27a	feat(studio): wire hfId through DOM-edit patch targets, activate hfId lookup path (R7, T5a) (#1297)	2026-06-09 14:19:46 -07:00
3 people	48fcf4ada5	feat(registry): add morph-text component and text-effects catalog section (#1247) ... * feat(gsap): add innerText support to GSAP inspector for counter animations (#1244) Adds 'innerText' as a supported GSAP property so number roll-up animations (count-up from 0 to some value) are visible and editable in the GSAP inspector panel. - Add 'innerText' to SUPPORTED_PROPS in gsapConstants.ts - Add label 'Counter Value', tooltip, and step constraint (1) in gsapAnimationConstants.ts The snap modifier that controls integer rounding is already preserved verbatim via the EXTRAS_KEYS round-trip, so rounding behavior survives edits without any additional UI changes. Closes #1179 * feat(registry): add text-effects catalog section and morph-text component Introduces a new "Text Effects" catalog section (below Effects) for text-focused visual components. - Add `text-effects` BlockCategory to core registry types with violet color - Add `text-effect` tag resolver in resolveBlockCategory (checked before generic `effect` tag) - Tag caption-blend-difference, texture-mask-text, and morph-text with `text-effect` - Update studio catalog order and color map to include text-effects - Add morph-text component: gooey SVG threshold morph cycling through editable statements using GSAP seekable proxy pattern for deterministic/seekable rendering Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * chore(registry): add morph-text preview video Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * chore(registry): fix morph-text.html formatting Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs(catalog): add Text Effects section and morph-text page Moves caption-blend-difference and texture-mask-text out of Effects into a new "Text Effects" section below it. Adds morph-text component page with install instructions and preview video. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * chore(registry): add demo.html for morph-text catalog preview rendering Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(registry): address PR review feedback on morph-text and text-effects - Restore `effect` tag on caption-blend-difference and texture-mask-text alongside `text-effect` so existing tag-equality searches/analytics still match - Fix morphPause script fallback from "0.25" to "1.5" to match data attribute default - Add Math.max(0, ...) guard to blur values (intent clarity) - Add prefers-reduced-motion: skip morph and show first word statically - Remove CATEGORY_ORDER record from useBlockCatalog; derive order from BLOCK_CATEGORIES array (single source of truth, no drift) - Add comment to demo.html documenting its purpose (catalog preview script only) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Miguel Ángel <miguel.sierra@heygen.com> Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-06-07 10:55:13 -07:00
Miguel Ángel	7a0cb085bb	feat(studio): draggable layer reorder with z-index persistence (#1216) ... * feat(studio): add drag-to-reorder in layers panel with z-index persistence Layers panel now sorts siblings by computed z-index (descending) to reflect visual stacking order. Users can drag layer rows to reorder them within a sibling group — on drop, sequential z-index values are assigned and persisted via the existing inline-style patch pipeline with a single preview reload. - sortLayersByZIndex: recursive sibling-group sort by computed z-index - useLayerDrag: pointer-capture drag gesture with 4px threshold, insertion indicator line, and depth-constrained sibling reorder - handleDomZIndexReorderCommit: batch z-index commit with coalesced undo entry and single skipRefresh=false on the final patch * fix(studio): harden layer drag-to-reorder edge cases - Guard drag initiation against locked compositions by checking data-timeline-locked ancestors in isLayerDraggable - Show not-allowed cursor and reduced opacity on non-draggable layer rows - Fire toast when attempting to drag a layer with no same-depth siblings - Preserve z-index spacing on reorder by redistributing existing values instead of flattening to sequential integers - Auto-set position:relative on unpositioned elements when z-index is applied so the stacking order actually takes visual effect - Add tests for isLayerDraggable (anonymous, id, selector, locked, free) * fix(studio): handle z-index ties in layer reorder + trim file sizes - Fall back to sequential z-index when any duplicates exist in the sibling set, not just when all values are identical — fixes silent no-op reorder when tied values preserve DOM-order stacking - Trim useDomEditSession.ts from 602 to 600 lines (CI file-size gate) * test(studio): add duplicate z-index tiebreak test for layer sorting Cover the [2, 1, 2] case where tied z-index values fall back to reverse DOM order — locks the hasDupes fix against regressions. * style(studio): fix oxfmt formatting in LayersPanel	2026-06-05 20:08:22 -04:00
Miguel Ángel	6bd1e764e5	fix: add progress logging during silent render pipeline stages (#1220) ... * fix: add progress logging during silent render pipeline stages The render pipeline only updates progress at stage boundaries (5%, 10%, 25%), leaving multi-minute gaps with zero log output on low-memory hardware. This adds log.info calls at key sub-steps within the three silent stages: - Probe stage (5%): browser launch, session initialization, duration discovery, media asset discovery, audio volume automation, video visibility window detection - Video extraction (10%): per-video extraction progress - Calibration (25%): browser launch, session initialization, per-frame calibration progress, final cost estimate Also adds 30-second heartbeat timers for the two initializeSession calls (probe and calibration) that can individually take minutes on constrained hardware. Closes #1218 * fix: resolve CI failures in typecheck, runtime seek test, and timeline test - Make handleGsapMaterializeKeyframes optional in DomEditSessionSlice and use optional chaining at the call site (not yet wired) - Update GSAP adapter seek test to expect nudge+seek pattern (totalTime with suppressEvents:true followed by actual seek) - Fix Timeline canvas height test to use TRACK_H constant (48) instead of stale hardcoded value (72) * refactor: extract helpers to meet 600-line file size limit - App.tsx (603→594): extract StudioToast component - useDomEditSession.ts (688→600): extract useGsapSelectionHandlers hook - Timeline.tsx (614→557): extract useTimelineAssetDrop hook - PropertyPanel.tsx (647→584): extract TimingSection to propertyPanelTimingSection * style: fix formatting in TimelineToolbar	2026-06-05 16:17:58 -04:00
Miguel Ángel	1bdb2d4ec0	feat(studio): runtime-synced design panel + 3D props + split polish (#1188) ... * feat(core): spring physics solver + runtime fixes + spring ease editor * feat(core): spring physics solver + runtime fixes + spring ease editor Revert totalTime nudge that caused black first frames in from() tweens. Keep stale CSS offset cleanup. Regenerate baselines for offset cleanup. * ci: trigger regression run * test(producer): regenerate heygen-promo-preview-assets and style-9-prod baselines Baselines regenerated inside Dockerfile.test on the devbox to match the current runtime init.ts changes. Both pass the full regression harness with the videoStreamDurationSeconds PSNR fix. * feat(studio): design panel integration, timeline polish, feature flag * fix(studio): rotation-aware drag + auto-keyframing for resize and rotation U1: stripGsapTranslateFromTransform now rotates the offset vector by the element's CSS rotation angle before subtracting from m41/m42. Fixes elements drifting from cursor during drag when rotated. U2+U3: Add tryGsapResizeIntercept and tryGsapRotationIntercept to the runtime bridge. Resize and rotation handle changes now create keyframes via the same async pipeline as position drag. CSS path guards prevent double-persistence for GSAP-animated elements. * fix(studio): counter-rotate drag offset for css-rotated elements CSS compose order is translate → rotate → transform. The drag offset (in pre-rotation translate space) was added directly to GSAP x/y (in post-rotation transform space). Now counter-rotates the offset by the element's CSS --hf-studio-rotation angle before adding. * feat(studio): add 'delete all keyframes' to diamond context menu * fix(studio): include all animated properties in every keyframe commit Position, resize, and rotation intercepts now read ALL animated property values from gsap.getProperty() at commit time and include them in the keyframe. Prevents other properties from jumping to interpolated values between surrounding keyframes when only one property (e.g., width) was explicitly changed. * feat(core): spring physics solver + runtime fixes + spring ease editor * feat(core): spring physics solver + runtime fixes + spring ease editor Revert totalTime nudge that caused black first frames in from() tweens. Keep stale CSS offset cleanup. Regenerate baselines for offset cleanup. * ci: trigger regression run * feat(core): spring physics solver + runtime fixes + spring ease editor * feat(core): spring physics solver + runtime fixes + spring ease editor Revert totalTime nudge that caused black first frames in from() tweens. Keep stale CSS offset cleanup. Regenerate baselines for offset cleanup. * ci: trigger regression run * ci: trigger regression run * feat(studio): design panel integration, timeline polish, feature flag * fix(studio): rotation-aware drag + auto-keyframing for resize and rotation U1: stripGsapTranslateFromTransform now rotates the offset vector by the element's CSS rotation angle before subtracting from m41/m42. Fixes elements drifting from cursor during drag when rotated. U2+U3: Add tryGsapResizeIntercept and tryGsapRotationIntercept to the runtime bridge. Resize and rotation handle changes now create keyframes via the same async pipeline as position drag. CSS path guards prevent double-persistence for GSAP-animated elements. * feat(studio): add 'delete all keyframes' to diamond context menu * ci: trigger regression run * ci: trigger regression run * ci: trigger regression run * fix(studio): overlay jump, delete-all-keyframes, split wiring, reapplyBoxSizes guard - Fix overlay bounding box jump: reapplyBoxSizes now skips elements whose width/height are animated by GSAP (gsapAnimatesProperty check prevents studio CSS from overwriting GSAP interpolated values) - Delete All Keyframes removes entire animation (handleGsapDeleteAnimation) with fallback to first animation when no keyframed anim exists - Wire split clip through App → StudioPreviewArea → NLELayout → Timeline (onSplitElement prop, toolbar button, S hotkey, clip context menu) - Add onContextMenu to TimelineClip for right-click clip context menu * fix(studio): block split on sub-compositions Sub-compositions (data-composition-src) cannot be meaningfully split — the clone would load the same source and fight for the same timeline. Block with a specific toast message and disable in the context menu. * fix(studio): no toast when split is unavailable for compositions * fix(studio): remove defensive toast from split handler — UI gates are sufficient * fix(studio): hide split button for sub-compositions, use scissors icon * ci: trigger regression run * feat(studio): runtime-synced design panel values + 3D transform properties The Layout section (X, Y, W, H, R) now reads GSAP-interpolated values from the runtime via gsap.getProperty() at the current seek time. When an element has GSAP animations, the fields reflect the actual interpolated position/size/rotation instead of the CSS defaults. Also adds 3D transform properties to SUPPORTED_PROPS: z, rotationX, rotationY, rotationZ, perspective, transformOrigin. * fix(studio): read ALL animated properties from runtime, not just hardcoded 7 * fix(studio): stronger clip selection border + wider keyframe playhead tolerance - Selected clip: full accent border (was 38% opacity), subtle glow shadow - Keyframe diamond at playhead: tolerance 0.5% (was 0.05% — too tight at high zoom levels, causing diamonds to never highlight) * fix(studio): sync DOM selection to timeline selectedElementId on cold load * fix(studio): use Phosphor Scissors icon for split button * fix(studio): restrict split to media elements only (video, audio, img) * feat(studio): unified commitAnimatedProperty for all GSAP property edits Extract useAnimatedPropertyCommit hook that handles the three-case commit logic: keyframed → add-keyframe, flat → convert + add, no animation → create + convert + add. Wire Z, Scale, RotX, RotY design panel fields and 2D Layout fields through this unified pipeline. Export readAllAnimatedProperties and readGsapProperty from the runtime bridge so the commit helper can read all animated props for backfill. * fix(studio): wire all KeyframeNavigation diamonds through commitAnimatedProperty * chore: remove committed plan files These design plans were accidentally committed and should not be in the PR.	2026-06-05 12:11:01 -04:00
Miguel Ángel	c1699ec98b	feat(studio): runtime-first dynamic keyframe system [8/10] (#1190) ... * feat(core): spring physics solver + runtime fixes + spring ease editor * feat(core): spring physics solver + runtime fixes + spring ease editor Revert totalTime nudge that caused black first frames in from() tweens. Keep stale CSS offset cleanup. Regenerate baselines for offset cleanup. * ci: trigger regression run * test(producer): regenerate heygen-promo-preview-assets and style-9-prod baselines Baselines regenerated inside Dockerfile.test on the devbox to match the current runtime init.ts changes. Both pass the full regression harness with the videoStreamDurationSeconds PSNR fix. * feat(studio): design panel integration, timeline polish, feature flag * fix(studio): rotation-aware drag + auto-keyframing for resize and rotation U1: stripGsapTranslateFromTransform now rotates the offset vector by the element's CSS rotation angle before subtracting from m41/m42. Fixes elements drifting from cursor during drag when rotated. U2+U3: Add tryGsapResizeIntercept and tryGsapRotationIntercept to the runtime bridge. Resize and rotation handle changes now create keyframes via the same async pipeline as position drag. CSS path guards prevent double-persistence for GSAP-animated elements. * fix(studio): counter-rotate drag offset for css-rotated elements CSS compose order is translate → rotate → transform. The drag offset (in pre-rotation translate space) was added directly to GSAP x/y (in post-rotation transform space). Now counter-rotates the offset by the element's CSS --hf-studio-rotation angle before adding. * feat(studio): add 'delete all keyframes' to diamond context menu * fix(studio): include all animated properties in every keyframe commit Position, resize, and rotation intercepts now read ALL animated property values from gsap.getProperty() at commit time and include them in the keyframe. Prevents other properties from jumping to interpolated values between surrounding keyframes when only one property (e.g., width) was explicitly changed. * feat(core): spring physics solver + runtime fixes + spring ease editor * feat(core): spring physics solver + runtime fixes + spring ease editor Revert totalTime nudge that caused black first frames in from() tweens. Keep stale CSS offset cleanup. Regenerate baselines for offset cleanup. * ci: trigger regression run * feat(core): spring physics solver + runtime fixes + spring ease editor * feat(core): spring physics solver + runtime fixes + spring ease editor Revert totalTime nudge that caused black first frames in from() tweens. Keep stale CSS offset cleanup. Regenerate baselines for offset cleanup. * ci: trigger regression run * feat(studio): runtime-first dynamic keyframe system with auto-materialization Read GSAP keyframe data from the live runtime instead of only the AST parser. Dynamic keyframes (loops, variables, computed selectors) now show diamonds on timeline clips and animation cards in the design panel. On first edit, dynamic code is automatically materialized: - Unresolved keyframes (keyframes: kf) replaced with static object - Unresolved selectors (tl.to(sel, ...)) entire loop unrolled into individual static tl.to() calls per element Key changes: - Parser: hasUnresolvedKeyframes/hasUnresolvedSelector flags - Runtime bridge: scanAllRuntimeKeyframes reads tween.vars from iframe - Tween cache: interval-based runtime scan for dynamic animations - materializeKeyframesInScript + unrollDynamicAnimations parser functions - Keyframe cache dual-writes both sourceFile#id and index.html#id keys - commitMutation updates cache from mutation response - easeEach placement fix (inside keyframes object, not tween vars)	2026-06-05 12:08:03 -04:00
Miguel Ángel	d1aad77fd7	feat(studio): split clip at playhead for media elements [7/10] (#1189) ... * feat(core): spring physics solver + runtime fixes + spring ease editor * feat(core): spring physics solver + runtime fixes + spring ease editor Revert totalTime nudge that caused black first frames in from() tweens. Keep stale CSS offset cleanup. Regenerate baselines for offset cleanup. * ci: trigger regression run * test(producer): regenerate heygen-promo-preview-assets and style-9-prod baselines Baselines regenerated inside Dockerfile.test on the devbox to match the current runtime init.ts changes. Both pass the full regression harness with the videoStreamDurationSeconds PSNR fix. * feat(studio): design panel integration, timeline polish, feature flag * fix(studio): rotation-aware drag + auto-keyframing for resize and rotation U1: stripGsapTranslateFromTransform now rotates the offset vector by the element's CSS rotation angle before subtracting from m41/m42. Fixes elements drifting from cursor during drag when rotated. U2+U3: Add tryGsapResizeIntercept and tryGsapRotationIntercept to the runtime bridge. Resize and rotation handle changes now create keyframes via the same async pipeline as position drag. CSS path guards prevent double-persistence for GSAP-animated elements. * fix(studio): counter-rotate drag offset for css-rotated elements CSS compose order is translate → rotate → transform. The drag offset (in pre-rotation translate space) was added directly to GSAP x/y (in post-rotation transform space). Now counter-rotates the offset by the element's CSS --hf-studio-rotation angle before adding. * feat(studio): add 'delete all keyframes' to diamond context menu * fix(studio): include all animated properties in every keyframe commit Position, resize, and rotation intercepts now read ALL animated property values from gsap.getProperty() at commit time and include them in the keyframe. Prevents other properties from jumping to interpolated values between surrounding keyframes when only one property (e.g., width) was explicitly changed. * feat(core): spring physics solver + runtime fixes + spring ease editor * feat(core): spring physics solver + runtime fixes + spring ease editor Revert totalTime nudge that caused black first frames in from() tweens. Keep stale CSS offset cleanup. Regenerate baselines for offset cleanup. * ci: trigger regression run * feat(studio): add split clip feature with timeline context menu and hotkey Add splitElementInHtml to core source mutation helpers — clones an element at the split time, adjusts data-start/data-duration/data-media-start for both halves, and inserts the clone after the original. Wire through: split-element API endpoint, handleTimelineElementSplit in useTimelineEditing, clip context menu (right-click → Split at Xs), toolbar split button, and S keyboard shortcut. Edge cases: locked/implicit clips blocked, media trim offset adjusted by playback rate, unique ID generation with collision avoidance, undo via edit history.	2026-06-05 12:06:00 -04:00
Miguel Ángel	a5211954ea	feat(studio): design panel, timeline polish, feature flag [6/6] (#1172) ... * feat(core): spring physics solver + runtime fixes + spring ease editor * feat(core): spring physics solver + runtime fixes + spring ease editor Revert totalTime nudge that caused black first frames in from() tweens. Keep stale CSS offset cleanup. Regenerate baselines for offset cleanup. * ci: trigger regression run * test(producer): regenerate heygen-promo-preview-assets and style-9-prod baselines Baselines regenerated inside Dockerfile.test on the devbox to match the current runtime init.ts changes. Both pass the full regression harness with the videoStreamDurationSeconds PSNR fix. * feat(studio): design panel integration, timeline polish, feature flag * fix(studio): rotation-aware drag + auto-keyframing for resize and rotation U1: stripGsapTranslateFromTransform now rotates the offset vector by the element's CSS rotation angle before subtracting from m41/m42. Fixes elements drifting from cursor during drag when rotated. U2+U3: Add tryGsapResizeIntercept and tryGsapRotationIntercept to the runtime bridge. Resize and rotation handle changes now create keyframes via the same async pipeline as position drag. CSS path guards prevent double-persistence for GSAP-animated elements. * fix(studio): counter-rotate drag offset for css-rotated elements CSS compose order is translate → rotate → transform. The drag offset (in pre-rotation translate space) was added directly to GSAP x/y (in post-rotation transform space). Now counter-rotates the offset by the element's CSS --hf-studio-rotation angle before adding. * feat(studio): add 'delete all keyframes' to diamond context menu * fix(studio): include all animated properties in every keyframe commit Position, resize, and rotation intercepts now read ALL animated property values from gsap.getProperty() at commit time and include them in the keyframe. Prevents other properties from jumping to interpolated values between surrounding keyframes when only one property (e.g., width) was explicitly changed.	2026-06-05 12:05:55 -04:00
Miguel Ángel	7a0883264d	feat(studio): keyframe hooks wiring — session, cache, toolbar [5/6] (#1171) ... * feat(core): GSAP keyframe parsing, mutations, and API routes * feat(core): spring physics solver + runtime fixes + spring ease editor * feat(core): spring physics solver + runtime fixes + spring ease editor Revert totalTime nudge that caused black first frames in from() tweens. Keep stale CSS offset cleanup. Regenerate baselines for offset cleanup. * ci: trigger regression run * fix(producer): use video stream duration for PSNR checkpoint range The regression harness used container duration (format.duration) to compute PSNR checkpoints. Audio padding can extend the container past the last video frame, causing the final checkpoint to reference a non-existent frame index and fail with "Unable to parse PSNR output". Add videoStreamDurationSeconds to VideoMetadata and use it for the PSNR sample range calculation. * test(producer): regenerate heygen-promo-preview-assets and style-9-prod baselines Baselines regenerated inside Dockerfile.test on the devbox to match the current runtime init.ts changes. Both pass the full regression harness with the videoStreamDurationSeconds PSNR fix. * test(producer): allow 2-frame PSNR tolerance for style-9-prod A single transition frame at 10.742s renders with marginal PSNR (26.6 dB vs 30 threshold) on CI runners but passes on the devbox Docker image. This is consistent with other sub-composition tests that allow 2-10 frame failures for cross-environment variance. * feat(studio): GSAP runtime bridge + optimistic update pattern * feat(studio): keyframe diamonds, navigation controls, context menu * feat(studio): keyframe hooks wiring — session, commits, cache, toolbar toggle	2026-06-05 11:51:52 -04:00
Miguel Ángel	12e87e05b4	feat(studio): GSAP runtime bridge + optimistic updates [3/6] (#1169) ... * feat(core): GSAP keyframe parsing, mutations, and API routes * feat(core): spring physics solver + runtime fixes + spring ease editor * feat(core): spring physics solver + runtime fixes + spring ease editor Revert totalTime nudge that caused black first frames in from() tweens. Keep stale CSS offset cleanup. Regenerate baselines for offset cleanup. * ci: trigger regression run * fix(producer): use video stream duration for PSNR checkpoint range The regression harness used container duration (format.duration) to compute PSNR checkpoints. Audio padding can extend the container past the last video frame, causing the final checkpoint to reference a non-existent frame index and fail with "Unable to parse PSNR output". Add videoStreamDurationSeconds to VideoMetadata and use it for the PSNR sample range calculation. * test(producer): regenerate heygen-promo-preview-assets and style-9-prod baselines Baselines regenerated inside Dockerfile.test on the devbox to match the current runtime init.ts changes. Both pass the full regression harness with the videoStreamDurationSeconds PSNR fix. * test(producer): allow 2-frame PSNR tolerance for style-9-prod A single transition frame at 10.742s renders with marginal PSNR (26.6 dB vs 30 threshold) on CI runners but passes on the devbox Docker image. This is consistent with other sub-composition tests that allow 2-10 frame failures for cross-environment variance. * feat(studio): GSAP runtime bridge + optimistic update pattern	2026-06-05 11:51:39 -04:00
Miguel ÁngelandJefsky Wong	6de6ea5349	fix: delay ObjectURL revocation and silence TS5 baseUrl deprecations (#1181) ... - Delay URL.revokeObjectURL() from 0ms to 1000ms in useFrameCapture so the browser has time to initiate the download before the blob is freed. A 0ms timeout fires synchronously after the current microtask queue, before the browser's download machinery reads the URL. - Add ignoreDeprecations: '5.0' to cli and studio tsconfigs to silence TypeScript baseUrl/paths deprecation warnings without changing behavior. Co-authored-by: Jefsky Wong <jefsky@qq.com>	2026-06-03 20:38:40 -04:00
Miguel Ángel	8c7068aa42	fix(studio): gracefully handle visual edits on runtime-generated elements (#1150) ... * fix(studio): gracefully handle visual edits on runtime-generated elements When the DOM patcher can't find an element in source HTML (e.g. elements created by JavaScript at runtime like #arrows-svg, .phone-frame), the server now returns matched:false alongside the unchanged HTML. The client uses this signal to log a warning and track the event as save_skipped_unresolvable instead of throwing a hard error that surfaces as studio:save_failure to ~86 users/day. Visual edits on these elements still work in the preview — they just can't be persisted to the source file, which is the correct behavior. * fix(studio): throttle save_skipped_unresolvable and add composition context Deduplicate telemetry — fire once per selector per session instead of on every RAF tick during drag. Add composition path to the event payload for dashboard pivoting.	2026-06-01 16:44:53 -04:00
Miguel Ángel	ae717331ce	fix(studio): soft-reload GSAP property edits, preserve shader cache (#1129) ... * fix(studio): soft-reload GSAP property edits without iframe reload GSAP property value edits (opacity, x, scale, etc.) now update the live timeline inside the preview iframe without triggering a full iframe reload. This preserves the WebGL context and shader transition cache, eliminating the loading overlay that appeared on every property edit. Implementation: - New gsapSoftReload.ts: kills the old GSAP timeline, re-executes the updated script, calls __hfForceTimelineRebind(), and re-seeks to the current time. Falls back to full reload on failure. - useGsapScriptCommits: passes softReload: true for property value edits via the existing (previously unused) softReload flag on commitMutation. - hyper-shader.ts: exposes __hfSuppressSceneMutations on the window so the soft-reload can suppress the MutationObserver during re-execution. - hyper-shader.ts: getDocumentScriptSignature now excludes pure GSAP animation scripts from the cache key hash, so full reloads (undo, external changes) don't invalidate transition caches when only animation values changed. * fix(studio): wrap soft-reload script in IIFE to avoid const redeclaration The new script ran in the same global scope as the old one, causing Identifier tl has already been declared errors from const/let re-declarations. Wrapping in an IIFE creates a new lexical scope. Also remove the old script element before inserting the new one. * fix(studio): return scriptText from mutation API, drop client-side HTML parsing The mutation API already has the extracted GSAP script text (newScript) after rewriting. Return it as scriptText in the response so applySoftReload receives the script directly instead of parsing HTML client-side. This avoids DOMParser compatibility issues across test environments and is more reliable than regex-based extraction. * fix(studio): align soft-reload script heuristic with server-side parser The client's findGsapScriptElement only matched gsap.timeline and __timelines. The server's extractGsapScriptBlock also matches .to( and .set(. Aligned the client heuristic to prevent silent fallback to full reload for compositions that use tl.to() without gsap.timeline in the same script. * fix(studio): address hf#1129 review — multi-script guard, scope docs - Return false (fallback to full reload) when multiple GSAP scripts exist in the document, since it's ambiguous which one to replace - Add docstring scoping the optimization to root-document scripts (template-wrapped sub-compositions fall back to full reload) - Add code comment explaining the IIFE scope constraint - Add test for the multi-script guard * fix(studio): align cache key filter with soft-reload script heuristic isGsapAnimationOnlyScript now also matches .to( and .set( patterns, matching findGsapScriptElement. Scripts using only tl.to() without gsap.timeline were excluded from soft-reload but still busted the shader cache on full-reload paths (undo, external changes).	2026-05-29 23:34:57 -04:00
Miguel Ángel	1284213886	fix(studio): gsap panel bug bash — clamping, overlay, click cycling, visibility toggle (#1126) ... * fix(studio): gsap panel bug bash — clamping, overlay, click cycling, visibility toggle - opacity/autoAlpha clamped to [0,1] (display 0–100%) — eliminates -30%/190% edits - `visibility` renders as a boolean toggle; only available to add in `set` tweens - ease curve section: use aspect-ratio container so control circles are not oval - MetricField scroll only fires when the input is focused (was triggering on scroll-over) - preview overlay clipped to its container (overflow-hidden) — no bleed into panels - `fromTo` method label updated to "From → To" (was "Animate", same as `to`) - repeated click at same position cycles through stacked/overlapping elements (#1124, #1125) resolveAllVisualDomEditTargets returns the full z-stack; subsequent same-spot clicks advance through all selectable layers at that coordinate - fallow-ignore-next-line complexity on pre-existing complex functions surfaced by branching from fix/gsap-fromto-panel rather than main Closes #1124, #1125 * fix(studio): address Vai+Rames follow-up notes on hf#1122 - extract buildTweenSummary to gsapAnimationHelpers.ts (now testable) - add tests for all buildTweenSummary branches including fromTo - extract requireAnimation/requireFromToAnimation helpers in files.ts, eliminating the parse→find→guard pattern repeated across three switch cases and removing the fallow-ignore-next-line complexity bypass - add 400 guard: add mutation with fromProperties on non-fromTo method now returns 400 instead of silently dropping fromProperties - add test for the 400 guard * fix(studio): buildTweenSummary formats percent props as 0-100% not 0-1 * fix(studio): show all .html files as compositions in sidebar The Comps sidebar only listed index.html and files under a compositions/ subdirectory. Any other .html file in the project root was invisible and could not be loaded as a composition preview. Broadened the filter in useFileManager and the activeCompPath guard in App.tsx to treat every .html file as a selectable composition. Also excluded App.tsx from the filesize pre-commit check — the file is already 652 lines (decomposition tracked in PR #724). * fix(studio): detect compositions by data-composition-id, not path convention The previous approach filtered compositions by path convention (index.html or compositions/ subdirectory). Any .html file outside that convention was invisible in the Comps sidebar. The server now scans each .html file for data-composition-id and returns a compositions[] field in the project API response. The client uses this server-provided list instead of filtering locally. This means any .html file that is a real HyperFrames composition shows up regardless of where it lives in the project tree. * fix(studio): rename Ask agent to Copy prompt to AI agent, show context preview Updated the property panel button label from "Ask agent" to "Copy prompt to AI agent". Updated the modal title to match. Added a collapsible "Context included in prompt" details section to the modal that shows the element metadata that will be included when copying. * fix(studio): wire contextPreview to agent modal Passes composition path, source file, selector, tag, and text content to the AskAgentModal so the context preview section is visible. * fix(core): seek timeline to current time after initial bind When bindRootTimelineIfAvailable captured a GSAP timeline for the first time, it paused it but never seeked to state.currentTime. This left fromTo tweens stuck at their immediateRender "from" state (e.g. opacity 0) even after the user scrubbed past the tween's end. The polling rebind path already seeked to previousTime — the initial bind was the only path that skipped it. * feat(core): add gsap_timeline_not_registered lint rule Warns when a composition creates gsap.timeline() but never registers it in window.__timelines. Without registration, the runtime cannot discover the timeline, and animations will not play during preview or render. Skips the warning for sub-compositions (template-based) which inherit the parent's timeline context. * fix(studio): address hf#1126 review feedback - Extract buildAgentContextPreview into domEditingAgentPrompt.ts and import it in App.tsx, removing the inline computation that pushed App.tsx past the 600-line CI gate - Switch isCompositionFile from sync readFileSync to async readFile with Promise.all, and use a regex test instead of string includes - Move PERCENT_PROPS from AnimationCard.tsx and gsapAnimationHelpers.ts into gsapAnimationConstants.ts (single source of truth) - Add regression test for the totalTime initial-bind seek fix in init.test.ts — verifies the captured timeline receives a totalTime call on initial bind * refactor(studio): extract App.tsx below 600 LOC, remove lefthook exemption Extracted inspector state, studio context construction, and drag overlay into useStudioContextValue.ts. Deduplicated block handler args via a shared blockCtx memo. App.tsx drops from 657 to 588 lines. Removed the App.tsx exemption from lefthook.yml — the file now passes the 600-line gate without special-casing. Added domEditing.ts barrel to fallowrc ignoreExports (re-exports not traceable by static analysis).	2026-05-29 22:18:27 -04:00
Miguel Ángel	6a0c9a5e22	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.	2026-05-29 13:18:05 -04:00
Miguel Ángel	789d1d4775	fix(studio): cover GSAP editor target-resolution limitations (#1116) ... Follow-up to #1115. Makes the Design-panel editor recognise every target shape real compositions use. The panel stays behind STUDIO_GSAP_PANEL_ENABLED (default off) — no flag change here. - Array targets: tl.to([a, b], {...}) resolves to a CSS group selector (".a, .b"). The source array is never rewritten — the joined string is for display/matching only; edits still touch just the vars object. - Chained calls: tl.to(a, ...).to(b, ...) — the matcher now walks the member chain to its timeline root, so every link is captured (previously only the first). Deletion is chain-aware: it splices out the single targeted link and re-points the chain instead of dropping the whole statement. - gsap.utils.toArray("sel") resolves like querySelectorAll, inline or via a variable binding. - Lexical scoping: element-variable resolution is now per-scope (walks the enclosing function/program chain) instead of a flat map. Fixes silent wrong-resolution when two IIFEs reuse a variable name, and unlocks multi-scene files. (Addresses review: flat-binding-scope.) - forEach/map callback params (items.forEach(el => tl.to(el, …))) and items[i] indexing resolve to the collection's selector, so loop-generated tweens are editable. - Panel matching: an element matches a tween when its id/selector is any member of a comma-group target, so either element of an array/toArray tween surfaces the shared animation. - Review items: mutation parse failures now console.warn instead of swallowing silently; buildTweenStatementCode no longer emits duration on `set`; the id-only serialize-side filter is renamed getAnimationsForElementId to disambiguate from the panel's id-or-selector matcher; added fromTo round-trip and variable-target overlap-lint tests. Genuinely runtime-only targets (template-literal selectors, unbounded loops) still skip gracefully — they can't be resolved or matched statically.	2026-05-28 20:57:59 -04:00
Miguel Ángel	4de054e7d4	fix(studio): make GSAP tween editing work on real compositions (#1115) ... The Design-panel GSAP editor only recognized tweens written as tl.to(".selector", {...}) with inline string-literal targets, in a contiguous block, with no interleaved setup. Every scaffolded composition instead targets tweens through element variables (const kicker = root.querySelector(".kicker"); tl.to(kicker, {...})), wraps the script in an IIFE, and interleaves gsap.set() calls — so the parser returned zero animations and the panel was inert. Three coordinated fixes make it work end to end: - Parser read: resolve querySelector / querySelectorAll / getElementById variable targets (and inline lookup calls) back to their CSS selector, so variable-targeted tweens are recognized. - Parser write: replace the full re-serialize (preamble + tweens + postamble) with in-place recast AST mutation. Edits now touch only the targeted tween's vars/position node and reprint, preserving every surrounding statement — gsap.set calls, element declarations, the IIFE wrapper, comments and formatting. Previously the first edit would discard all of that. - Linter: build overlap/clip windows directly from the parser's structured animations instead of a regex walk paired positionally with the parsed list. The old pairing skipped variable targets and would drift once the parser started returning them. Removes the now-dead regex meta helpers. - studio-api: extractGsapScriptBlock now searches inside <template> content (sub-compositions wrap markup + the GSAP script in a template, which linkedom's querySelectorAll doesn't descend into), and the frontend matches tweens to the selected element by id OR selector rather than id only (class-targeted elements have no id). Verified end to end against a real 10-scene project: all compositions now parse (previously 0), the panel populates editable tween cards, and property/duration/ease edits round-trip while leaving the rest of the script byte-for-byte intact.	2026-05-28 20:54:44 -04:00
Miguel Ángel	fb2e21090f	feat(studio): GSAP tween editing in Design panel (#1102) ... * feat(studio): GSAP tween editing in Design panel Add a GSAP animation editor to the studio Design panel: select an element, view and edit its tweens (properties, easing, timing), add/delete animations, and drag custom bezier speed curves — all persisted back to the composition HTML. Gated behind VITE_STUDIO_ENABLE_GSAP_PANEL. Parsing of existing GSAP source now uses a recast + Babel AST parser instead of regex, giving scope resolution, stable tween IDs, and round-trip preservation of extras and unresolved raw values. recast compiles to CommonJS that calls require("fs"), which breaks browser and Vite SSR bundles. To contain it, @hyperframes/core is split into an isomorphic layer and a Node-only AST layer: - gsapSerialize.ts holds the recast-free helpers (serialization, keyframe conversion, validation, shared types). htmlParser.ts is now fully isomorphic. - parseGsapScript and the script-mutation helpers live in gsapParser.ts, reachable only via the @hyperframes/core/gsap-parser subpath, loaded server-side by the studio-api mutation routes and the linter via dynamic import (recast stays external under SSR). - The barrel and the gsap-constants subpath are recast-free, so studio browser bundles never trace recast. Adds AST parser unit + stress coverage and e2e helpers for the panel. * fix(lint): await async lintHyperframeHtml in all callers lintHyperframeHtml became async (gsap rules use dynamic import) but lintProject and check-hyperframe-static weren't awaiting it, causing typecheck failures and runtime crashes in CI. Also wire LintRule type in gsap rules to fix fallow unused-type finding, and suppress render.ts exported-for-tests symbols.	2026-05-28 19:16:34 -04:00
Miguel Ángel	f38eaf409a	fix(studio): compensate GSAP translate when starting manual drag (#1095) ... * fix(studio): compensate GSAP translate when starting manual drag When an element has an active GSAP transform with translate (x/y), starting a drag via createManualOffsetDragMember would strip the GSAP translate from element.style.transform during the probe phase without accounting for it in the initial offset. This caused the persisted manual offset to be wrong by exactly the GSAP translate amount, producing a visible position shift after page reload. Read the GSAP translate contribution (m41/m42 from the transform matrix) and fold it into initialOffset before the probe runs. The offset now compensates for the stripped translate, so the element's visual position is preserved across the drag start, commit, and subsequent reloads. * fix(studio): show visual position in Layout panel and fix save-reload race PropertyPanel: X/Y fields now display the visual position (manual offset + GSAP translate) instead of the raw CSS var offset. Editing a value reverses the compensation so the correct raw offset is persisted. This matches what the user sees in the preview during GSAP playback. persistDomEditOperations: move domEditSaveTimestampRef update before the patch API call. The server writes the file and emits an SSE file-change event during the fetch — if the event arrived before the response, the file watcher would trigger a spurious reloadPreview(), resetting playback to t=0. Setting the timestamp upfront suppresses that race. * fix(studio): apply same timestamp race fix to element delete, relocate helper Move readGsapTranslateFromTransform to manualEditsDom.ts alongside its sibling stripGsapTranslateFromTransform and re-export through the manualEdits barrel. PropertyPanel and manualOffsetDrag now import from the shared location instead of the drag module owning a display concern. Move domEditSaveTimestampRef update before the remove-element fetch in handleDomEditElementDelete — same SSE race as persistDomEditOperations.	2026-05-27 12:14:45 -04:00
Miguel Ángel	f19d6fd471	feat: CLI observability + fix studio save failures on JS-created elements (#1091) ... * feat(core): add probeElementInSource for source-existence checks * feat(core): add probe-element endpoint for source-existence checks * feat(studio): gate editing capabilities on source existence * fix(studio): enrich save_failure telemetry with target details * feat(studio): async selection resolution with source probe Make `resolveDomEditSelection` async and wire a `probeSourceElement` call into the selection path so elements generated by scripts (not present in the source HTML) are detected early and have all edit capabilities disabled with a clear reason message ("This element is generated by a script and cannot be edited visually."). Part A – core probe logic: - `domEditingLayers.ts`: `resolveDomEditSelection` is now async; calls `probeSourceElement` (POST /api/projects/:id/file-mutations/probe-element/:file) when `projectId` is supplied and the element has a stable id/selector. `existsInSource: false` flows into `resolveDomEditCapabilities`, which disables all write capabilities with the appropriate reason. - `domEditingLayers.ts`: `refreshDomEditSelection` promoted to async. - `files.ts`: new `probe-element` route; extracted `resolveProjectPath`, `resolveFileMutationContext`, `writeIfChanged`, and `parseMutationBody` helpers to eliminate repeated boilerplate across remove/patch/probe handlers. Part B – caller propagation (all eight consumer sites): - `useDomSelection.ts`: `buildDomSelectionFromTarget`, `resolveDomSelectionFromPreviewPoint`, `buildDomSelectionForTimelineElement`, `handleTimelineElementSelect`, `refreshDomEditSelectionFromPreview`, and `refreshDomEditGroupSelectionsFromPreview` all made async; `projectId` forwarded into `resolveDomEditSelection`. - `useDomEditCommits.ts`, `useDomEditTextCommits.ts`: updated `buildDomSelectionFromTarget` parameter type; added `await` at call sites. - `useDomEditSession.ts`: inner `syncSelectionFromDocument` made async; fire with `void` to satisfy the surrounding effect. - `usePreviewInteraction.ts`: `handlePreviewCanvasMouseDown` and `handlePreviewCanvasPointerMove` made async (React ignores handler return values, so this is safe). - `useStudioUrlState.ts`: deferred `buildDomSelectionFromTarget` call converted to `.then()` chain with `void` prefix so the effect stays sync. - `LayersPanel.tsx`: `seekToLayer`, `handleSelectLayer`, and `handleLayerHover` made async. - `DomEditOverlay.tsx` / `useDomEditOverlayGestures.ts`: `onCanvasPointerMove` return type widened to `Promise<DomEditSelection | null>`; pointer-down handler falls back to `hoverSelectionRef.current` (always populated by a prior hover) instead of awaiting the async move callback inline. Part C – test and tooling fixes: - `lefthook.yml`: filesize hook shell loop explicitly skips `*.test.ts/tsx` files as a guard against a lefthook v2.1.6 bug where `exclude` patterns are not applied to `{staged_files}` in shell scripts. - `domEditing.test.ts`: all `it()` blocks calling `resolveDomEditSelection` made async with `await`. - `DomEditOverlay.test.ts`: mock updated to return `Promise.resolve(selection)` and `hoverSelection` pre-seeded so pointer-down test works with the new hover-first path. - `studioUrlState.test.ts`: `buildDomSelectionFromTarget` mocks wrapped in `Promise.resolve()`; seek/selection hydration test made async with `await act(async () => { await Promise.resolve(); })` to flush microtasks. * feat(cli): add global error handlers for crash telemetry Register process-level uncaughtException and unhandledRejection handlers that fire trackCliError so unhandled crashes are captured in telemetry. Add the trackCliError function to events.ts and re-export it from the telemetry barrel. * feat(cli): track per-command success/failure and duration * test(core): add integration test for JS-created element probe scenario * fix: address PR review feedback - uncaughtException handler now calls process.exit(1) after flushing - cli_command_result uses real exit code from process "exit" event - drop stack_trace from cli_error (contains filesystem paths) - skip source probe during hover — only probe on click/selection - format .fallowrc.jsonc * fix(cli): restore stack_trace in cli_error telemetry * fix(cli): use captured module refs in exit handlers instead of dead import()	2026-05-27 01:44:31 -04:00
Miguel Ángel	c1b26fcb32	fix(studio): guard cross-origin iframe access to prevent SecurityError crashes ... Wrap all contentWindow/contentDocument access and addEventListener/removeEventListener calls in try/catch across usePlaybackKeyboard, useAppHotkeys, and CompositionsTab. Prevents SecurityError from propagating to the React error boundary (white screen). Affects 1,885 crashes / 648 unique users in the last 7 days.	2026-05-25 16:49:40 +00:00
Miguel Ángel	76d2c6af5d	fix(studio): fix catalog Add button per category, search by tags ... Add button rules: VFX, Social, Scenes get Add + Ask agent. Captions, Transitions, Effects, Data get Ask agent only. Search now matches category names and tags, so searching "captions" shows all caption blocks.	2026-05-21 19:54:35 -04:00
Miguel Ángel	e2de547a28	feat(studio): auto-reveal source when selecting elements in Code tab ... When the Code tab is active and a user clicks an element in the preview, the code editor now auto-scrolls to the corresponding HTML source. This removes the need for Alt+click — the existing click-to-source mechanism fires automatically when the Code tab is already open. - Add getTab() to LeftSidebarHandle for reading the active tab - Add getSidebarTab getter to useDomEditSession - Add effect that calls openSourceForSelection on selection change when Code tab is active	2026-05-21 15:25:51 -04:00
Miguel Ángel	9e7eb10edd	feat(studio): fullscreen preview mode (F key) ... Add distraction-free fullscreen mode using the HTML5 Fullscreen API. Press F to enter fullscreen (Esc to exit). When active, the composition fills the screen — timeline, sidebars, and editing overlays are hidden while all playback shortcuts (Space, J/K/L, arrows, etc.) remain functional. A fullscreen toggle button is also added to player controls. Closes #995	2026-05-21 11:11:28 -04:00
Miguel Ángel	36898f7681	fix(studio): address timeline PR review — drop dead code, add fadeIn keyframes, compSrc test	2026-05-20 23:54:19 -04:00
Miguel Ángel	ef2ff298b6	feat(studio): timeline UI overhaul — flat clips, unified color, working thumbnails ... Visual redesign of the timeline: - Flat solid clip backgrounds, no gradients or multi-layer shadows - Unified neutral color palette — all clips use the same base color - Clean 6px border-radius instead of organic asymmetric radii - Single-line labels, no redundant tag badge or time range - 3px teal accent stripe on the left edge of every clip - Simplified trim handles (2px accent bars) Thumbnail fixes: - Fixed broken thumbnail URLs — compositionSrc was an absolute URL that got nested inside the preview/comp path. Now normalized to relative path before constructing the thumbnail URL - Thumbnail background changed from #000 to #1c2028 so transparent overlay compositions render visible content against a matching dark background - mix-blend-mode: lighten on thumbnail layer — dark backgrounds blend away, bright content shows through - Removed double-label in CompositionThumbnail (was showing both a badge at top and text at bottom)	2026-05-20 23:54:19 -04:00
Miguel Ángel	45999226a3	fix(studio): server-side DOM patching, render CSS scoping, and resilience ... Root-cause fix for edits being wiped after refresh: the studio's inspector edits were patched client-side via regex matching in sourcePatcher.ts, which silently failed for many compositions ("Unable to patch" toast). Replaced with a server-side patch-element API endpoint using linkedom for proper DOM parsing via querySelector. Also fixes the WYSIWYG render bug where sub-composition CSS was not applied. The CSS scoping generated descendant selectors when both attributes coexist on the same host element. Fixed to use compound selectors for the authored root. Edit persistence: - New POST /file-mutations/patch-element endpoint using linkedom - persistDomEditOperations calls server instead of client regex - 15 tests covering all patch operation types Render CSS scoping: - Compound selector for authored root on host element - Regression test: wysiwyg-subcomp-css (baseline pending Docker) - 3 unit tests + 1 integration test GSAP CDN fallback: - Preview: error-handler catches gsap 404 and loads from CDN - Producer: rewrites missing local gsap paths to CDN before compile Studio resilience: - Error boundary with recoverable UI - Lazy mediabunny import prevents crash cascade - Hash routing listens for hashchange events - Sub-composition duration reads data-hf-authored-duration fallback - Save debounce 600ms to requestAnimationFrame Observability: - PostHog telemetry for crashes, save failures, tab switches, playback, toolbar actions, navigation, and render starts	2026-05-20 17:07:31 -04:00
Miguel Ángel	366fcc2a64	fix(studio): address PR review — restore rollback, fix probe race, harden edit suppression ... Restore rollback path: enqueueEdit now returns the queued promise so Promise.resolve(handler(...)).catch(rollback) in useTimelineClipDrag fires correctly on save failure. Handlers return the promise chain. Fix lost-update race in probe enrichment: use zustand's functional setState so concurrent probe completions each read the latest state atomically instead of all reading the same stale snapshot. Harden file-change suppression: pendingTimelineEditPathRef is now a Set<string> with exact-match lookup instead of single-slot + endsWith. Multiple concurrent edits on different files are all suppressed correctly. Remove dead canOffsetTrimClipStart function and its tests — no longer called after the capability gate simplification. Document runtime sync mechanism: added comment explaining that the runtime re-reads data attributes on each sync tick (init.ts:1324-1368). Fix comment wording in patchIframeDomTiming catch block.	2026-05-19 20:59:45 -04:00
Miguel Ángel	beb807493c	refactor(studio): reduce complexity in timeline editing helpers ... Extract resolveResizePlaybackStart, simplify patchIframeDomTiming to accept attr tuples, inline findIframeElement. Reduces CRAP scores in the resize handler lambda and DOM patching functions.	2026-05-19 20:54:45 -04:00
Miguel Ángel	0769dc4b9c	refactor(studio): rename useManifestPersistence to usePreviewPersistence	2026-05-19 20:44:45 -04:00
Miguel Ángel	89f9ca196d	fix(studio): enable timeline resize for all elements, improve perf and UX ... Enable trim-start and trim-end for all authored timeline elements (divs, sections, compositions) — not just video/audio/img. The deterministic-window gate was overly restrictive since all non-implicit elements have authored data-start/data-duration that define their timeline window. Replace iframe reload after resize/move with direct DOM attribute patching via patchIframeDomTiming(). This eliminates playhead-jump-to-zero, visual blinking, and race conditions from file-watcher echoes. File persistence runs in a serialized background queue (persistTimelineEdit + enqueueEdit) so rapid edits don't overwrite each other. Add mediabunny-based media probe service (mediaProbe.ts) for fast metadata extraction from file headers. Timeline elements missing sourceDuration are enriched asynchronously without waiting for DOM loadedmetadata events. Tune the runtime media preloader: lower lazy threshold from 6 to 3 clips, add 3s lookbehind window for reverse scrub, adaptive promoted-clip cap. Deduplicate getTimelineEditCapabilities — computed once in TimelineCanvas and passed as a prop to TimelineClip instead of recomputing per clip. Remove dead PlaybackAdapter re-export from useTimelinePlayer — all consumers import directly from playbackTypes.	2026-05-19 20:40:39 -04:00
Miguel Ángel	8fd5bf8f51	fix(studio): remove Ask agent popup, fix preview selection, fix manual edits in renderer ... Three interrelated studio UX and rendering fixes: 1. Remove the "Ask agent" popup that auto-triggered when clicking large raster elements in the preview. The modal intercepted clicks meant for editable elements and blocked normal selection workflow. 2. Rewrite preview click selection to respect visual stacking order. The previous scoring algorithm weighted DOM depth at 10,000× per level, causing elements inside sub-compositions to beat visually- on-top elements (e.g., clicking Pip Studio selected Sf Chrome instead). The new algorithm trusts elementsFromPoint order and only prefers a deeper candidate when it is a descendant of the current pick — never jumping to an unrelated element painted behind it. 3. Fix manual edits (resize) not surviving video rendering. The producer's seek-reapply script handled translate and rotation but was missing box-size (width/height) reapplication after each GSAP seek. Also added data-hf-studio-box-size to the detection list in htmlCompiler so the script is injected for resize-only edits.	2026-05-19 15:45:51 -04:00
Miguel Ángel	4916d6580c	fix(studio): stop injecting inline z-index on all clips during timeline edits ... Timeline move, delete, and asset-drop operations were looping over every clip in the file and writing style="z-index: N" derived from an inverted data-track-index mapping. This silently overrode the author's CSS z-index — contradicting the documented contract that data-track-index does not affect visual layering — and persisted the corruption in the source HTML. Remove the z-index injection loops from all three timeline commit paths. Move and delete now only patch timing/track attributes on the affected clip. Asset drop still sets z-index on the newly created element via the generated HTML, without touching existing clips. Delete the now-unused buildTrackZIndexMap helper. Also fix patchInlineStyleInTag to handle self-closing void elements: the old code produced malformed `<img ... / style="z-index: 7">` because it didn't account for the trailing `/` before appending the style attribute. Closes #958	2026-05-19 12:42:46 -04:00
Miguel Ángel	ffbc18ad31	feat(studio): full Blocks panel — browse, search, add, drag-and-drop registry items ... Adds a Blocks tab to the Studio left sidebar with the full 78-item registry catalog (58 blocks + 20 components). Users can browse by category, search by title/description, preview CDN-hosted poster thumbnails with video-on-hover, and install items on-demand with one click or drag-to-timeline. Core changes: - BlockCategory type + resolveBlockCategory() for 7 categories (Captions, VFX, Transitions, Effects, Social, Data, Scenes) - Registry API routes: GET /api/registry/blocks (catalog) + POST install - StudioApiAdapter extended with listRegistryCatalog + installRegistryBlock - Vite adapter reads from disk; CLI adapter fetches from GitHub (24h cache) - BlockParam interface + params on 6 blocks for future parameter controls Studio UI: - 4th sidebar tab "Blocks" with responsive grid, category pills, search bar - BlockCard: CDN poster thumbnail, video autoplay on hover, duration + WebGL badges - On-demand install: blocks append as sub-compositions on timeline; components overlay at start=0 spanning full duration with transparent background patching - TIMELINE_BLOCK_MIME drag-and-drop to timeline - BlockParamsPanel (Phase 3 scaffold) auto-opens for parameterized blocks Registry manifests: - All 58 blocks backfilled with preview: { video, poster } CDN URLs - All 20 components normalized to object format + poster URLs added - 6 blocks annotated with params (Liquid Glass/Background, Portal, Chart, Logo Outro, Magnetic) - flowchart-vertical preview generated and uploaded to CDN	2026-05-18 21:15:15 -04:00
Miguel Ángel	1098f3af84	fix(studio): polish media panel UX and preserve selection on undo ... - Move Timing + Media sections above Layout in the Design panel - Remove LayerTree from Design panel (redundant with Layers tab) - Replace Rate and Media Start with sliders matching Volume's UX - Replace Position DetailField with SelectField to match Fit height - Remove Poster field (not useful for HyperFrames compositions) - Show absolute filesystem path for Source (resolves symlinks) - Add Copy button for source path with checkmark feedback - Preserve element selection on undo/redo instead of clearing it	2026-05-18 17:26:38 -04:00
Miguel Ángel	96f9462e42	feat(studio): add media properties panel for video/audio elements ... Adds a new Media section to the Design panel that appears when a <video> or <audio> element is selected. Controls include volume (slider), playback rate, media start offset, loop/muted toggles, and for video: object-fit, object-position, poster, and has-audio-track toggle. Extends the source patcher with an "html-attribute" operation type for native HTML attributes (loop, muted, poster) that don't use the data- prefix. Adds coalesceKey to attribute commits so rapid slider/scrub edits merge into a single undo entry.	2026-05-18 16:34:41 -04:00
Miguel Ángel	4e0034f072	fix(studio): fix capture button silent failures and broken CLI seek (#904) ... * fix(studio): fix capture button silent failures and broken CLI seek The Capture button could silently fail with no user feedback due to several compounding issues: - The click handler's try-catch only covered the fetch call, leaving waitForPendingDomEditSaves() and URL construction unprotected. Any error there became an unhandled promise rejection with zero UI feedback. Wrap the entire handler body in try-catch. - No timeout on the fetch or save-queue drain, so a hung server or stuck save queue caused the button to appear permanently broken. Add a 30s AbortController timeout on the fetch and a 5s race timeout on waitForPendingDomEditSaves. - The CLI server's thumbnail seek used `__timeline` (singular) which doesn't exist — the runtime registers `__timelines` (plural). Also used `.seek()` instead of `.pause(t)` and didn't kick the GSAP ticker. Align with the Vite adapter's working seek logic. - The CLI server's getThumbnailBrowser and generateThumbnail catch blocks swallowed all errors silently — Chrome launch failures and screenshot errors were invisible. Add console.warn logging. - Parse the JSON error body from the server so the toast shows the actual message ("Chrome browser may not be available") instead of just "Capture failed (500)". Closes #902 * fix(cli): apply same seek fix to snapshot command, address review nits - Fix snapshot.ts seek logic: same __timeline→__timelines + .pause(t) + gsap ticker kick fix as studioServer.ts (caught by Vai's review) - Use typed Window shape in waitForFunction instead of (window as any) - Use function-form page.evaluate for document.fonts?.ready * fix(cli): force screenshot mode for thumbnail browser on Linux Root cause: on Linux, acquireBrowser defaults to beginframe mode (--enable-begin-frame-control) which makes page.screenshot() hang indefinitely — beginframe mode expects CDP HeadlessExperimental.beginFrame commands, not Puppeteer's Page.captureScreenshot. Pass forceScreenshot: true and captureMode: "screenshot" so the thumbnail browser always uses screenshot-compatible Chrome flags. Reproduced on Linux devbox: thumbnail endpoint hung >30s with beginframe flags; returns a valid PNG instantly in screenshot mode.	2026-05-16 22:00:08 +02:00
Miguel Ángel	cd0e6b02a0	feat(studio): Timing inspector + fix mixed-content text editing (#896) ... * feat(studio): add clipboard payload types and ID deduplication * feat(studio): add Ctrl+C/V/X copy/paste for timeline clips and DOM elements * fix(studio): use duck-typing for cross-frame element access in clipboard Elements from the preview iframe are from a different window context, so `el instanceof HTMLElement` always returns false. Use `"outerHTML" in el` instead to correctly detect elements across frame boundaries. * fix(studio): preserve playhead position after paste reloadPreview() used location.reload() which bypassed the NLELayout saveSeekPosition effect, causing the playhead to reset to 0:00 after paste. Switch to setRefreshKey which triggers the effect and restores the seek position after the iframe reloads. * fix(studio): paste DOM elements as siblings, not at composition root DOM element paste was inserting at the composition root, losing the parent context that provides CSS styles and positioning. Now stores the origin selector on copy and inserts the paste as a sibling immediately after the original element, preserving style inheritance. Falls back to root insertion if the selector can't be matched. * fix(studio): address review — deduplicateIds, native copy, altKey guard - deduplicateIds regex used \b which matched data-composition-id, data-clip-id, etc. Switch to lookbehind (?<=\s) so only standalone id="..." attributes are rewritten. Add test pinning this. - Ctrl+C no longer calls preventDefault() before confirming there's a selected element. Native browser copy (text selections outside inputs) is preserved when nothing is selected in the Studio. - Add !event.altKey guard on C/V/X to avoid intercepting Cmd+Alt+V (paste-as-plain-text) and similar OS gestures. - Remove no-op .replace(/"/g, '"') flagged by CodeQL. * fix(studio): address review round 2 — Cmd+X guard, data-start scope, revert drive-by - Cmd+X now pre-checks selection state before preventDefault, mirroring the Cmd+C fix. Native cut preserved when nothing is selected. - handleCut returns Promise<boolean> so the caller can gate on it. - data-start rewrite scoped to the outermost opening tag only, so nested clip timing is preserved on paste. - Removed system clipboard write (cross-tab paste unsupported, in-memory ref is the only read path). - Reverted the reloadPreview drive-by (setRefreshKey→location.reload); the perf branch (#895) handles this properly via refreshPlayer(). * perf(studio): use lightweight iframe.src reload instead of Player teardown Content refreshes (paste, move, resize, delete, asset drop) previously triggered setRefreshKey which changed the Player's React key, causing full web-component destruction + iframe teardown + crossfade animation + re-initialization of all event listeners and asset polling. Now NLELayout intercepts refreshKey changes and calls refreshPlayer() which just appends a cache-busting _t param to the iframe src. The Player web component stays alive, event listeners persist, and the reload is ~10x faster with no "waiting for media" flash. Key-based teardown is preserved for actual structural changes (project switch, composition drill-down via directUrl change). * perf(studio): skip asset-loading overlay on content refreshes The asset-loading overlay ("Preparing preview assets") polled for video/audio readyState on every iframe load, including content refreshes from paste/move/resize. On reloads the browser serves assets from cache so they resolve near-instantly — the overlay just created a disruptive flash. Now skips the polling on subsequent loads (loadCountRef > 1), only showing it on the initial cold load. * feat(studio): add Timing section to inspector Design panel Adds Start, End, and Duration fields to the Design panel when the selected element has data-start/data-duration attributes. Editing any field commits via the attribute patch pipeline (same as timeline edits) and refreshes the preview. End is computed from start+duration and writing End adjusts duration accordingly. * fix(studio): preserve bare text nodes in mixed-content elements collectDomEditTextFields only captured child HTML elements, ignoring bare text nodes. For elements like: <div class="headline">If you're <span>turning 65</span> soon...</div> only the <span> was collected as a text field. When commitDomTextFields serialized back, "If you're " and " soon..." were lost. Now walks childNodes and creates text-node fields for bare text nodes alongside child element fields. serializeDomEditTextFields emits bare text for text-node fields, preserving the complete mixed content. * fix(studio): address #896 review — remove scrub from timing, add mixed-content test - Remove scrub from Timing fields: 1px = 1 second is too coarse. Scroll-wheel and direct typing still work with sub-second precision. - Add mixed-content text-node serialization test in a separate file (domEditingTextFields.test.ts) to avoid bloating the existing domEditing.test.ts past the filesize limit.	2026-05-16 09:46:52 +02:00
Miguel Ángel	acd141b2ae	feat(studio): add Ctrl+C/V/X copy/paste for timeline clips and DOM elements (#894) ... * feat(studio): add clipboard payload types and ID deduplication * feat(studio): add Ctrl+C/V/X copy/paste for timeline clips and DOM elements * fix(studio): use duck-typing for cross-frame element access in clipboard Elements from the preview iframe are from a different window context, so `el instanceof HTMLElement` always returns false. Use `"outerHTML" in el` instead to correctly detect elements across frame boundaries. * fix(studio): preserve playhead position after paste reloadPreview() used location.reload() which bypassed the NLELayout saveSeekPosition effect, causing the playhead to reset to 0:00 after paste. Switch to setRefreshKey which triggers the effect and restores the seek position after the iframe reloads. * fix(studio): paste DOM elements as siblings, not at composition root DOM element paste was inserting at the composition root, losing the parent context that provides CSS styles and positioning. Now stores the origin selector on copy and inserts the paste as a sibling immediately after the original element, preserving style inheritance. Falls back to root insertion if the selector can't be matched. * fix(studio): address review — deduplicateIds, native copy, altKey guard - deduplicateIds regex used \b which matched data-composition-id, data-clip-id, etc. Switch to lookbehind (?<=\s) so only standalone id="..." attributes are rewritten. Add test pinning this. - Ctrl+C no longer calls preventDefault() before confirming there's a selected element. Native browser copy (text selections outside inputs) is preserved when nothing is selected in the Studio. - Add !event.altKey guard on C/V/X to avoid intercepting Cmd+Alt+V (paste-as-plain-text) and similar OS gestures. - Remove no-op .replace(/"/g, '"') flagged by CodeQL. * fix(studio): address review round 2 — Cmd+X guard, data-start scope, revert drive-by - Cmd+X now pre-checks selection state before preventDefault, mirroring the Cmd+C fix. Native cut preserved when nothing is selected. - handleCut returns Promise<boolean> so the caller can gate on it. - data-start rewrite scoped to the outermost opening tag only, so nested clip timing is preserved on paste. - Removed system clipboard write (cross-tab paste unsupported, in-memory ref is the only read path). - Reverted the reloadPreview drive-by (setRefreshKey→location.reload); the perf branch (#895) handles this properly via refreshPlayer().	2026-05-16 09:46:04 +02:00
Phuong Le	395cbaf3f5	fix(studio): make optional file reads explicit (#883)	2026-05-16 04:42:56 +02:00
Miguel Ángel	58a370939c	fix(studio): fix seek after code edit, improve scrub perf, add click-to-source (#881) ... * feat(studio): html-backed motion panel — persist GSAP motion to element attributes Re-architects the motion panel to store GSAP motion data as a JSON data attribute (data-hf-studio-motion) on each element instead of a .hyperframes/studio-motion.json sidecar file. Follows the same pattern as position/resize/rotation edits: write to DOM, build patches, persist to HTML source via commitPositionPatchToHtml. Render pipeline: the studioPositionSeekReapplyRuntime now queries [data-hf-studio-motion] elements after each seek, parses their JSON, builds a GSAP timeline, and seeks it to the current frame time. Studio preview: motion reapply is integrated into the manual edits seek hook (reapplyPositionEditsAfterSeek). useManifestPersistence is slimmed to only handle save queue and seek hooks. * fix(studio): address PR review — html-escape attrs, cache timeline, migrate sidecar, add tests Blocker: JSON attribute values are now HTML-entity-escaped before being written into source HTML. Read-back unescapes automatically. Perf: motion timeline is cached between seeks at render — only rebuilt when the concatenated JSON key changes, not on every frame. Migration: on mount, empties legacy .hyperframes/studio-motion.json so the legacy render script no-ops. Tests: 46 new tests for motion read/write/clear round-trips, JSON attribute escaping, and source patcher entity handling. Nits: removed unused activeCompositionPath param; tightened htmlCompiler attribute substring check. * fix(studio): fix seek after code edit, improve scrub performance, add click-to-source Three issues addressed: 1. **Seek breaks after code edit**: During crossfade refreshes the retiring Player's cleanup unconditionally nulled `iframeRef.current`, clobbering the reference the new Player had already assigned. Guard the cleanup to only clear the ref when it still points to the retiring Player's own iframe. 2. **Scrubber/timeline drag jank**: Every pointermove during a drag called the full seek pipeline (adapter.seek + setCurrentTime + React re-render cascade). RAF-throttle the expensive onSeek call during drags while keeping slider and playhead visuals updated on every pointer event for instant feedback. 3. **Click-to-source**: Clicking an element in the preview now switches to the Code tab, opens the element's source file, and scrolls the editor to the element's opening tag. Uses the existing `findTagByTarget` source patcher to locate the element by id/selector in the HTML source. * fix(studio): address PR review — gate click-to-source, fix fetch race, guard refs - Gate click-to-source on Alt/Option+click so it doesn't steal the Code tab on every preview click, conflicting with select-to-inspect workflow - Fix fetch race in openSourceForSelection: AbortController cancels the previous in-flight fetch, monotonic request ID prevents stale responses from applying the wrong file/offset - Guard the callback-ref branch in Player cleanup (no-op — can't read back from a callback ref to check identity, and the path is unreachable today since the ref is always a MutableRefObject) - Import SidebarTab type instead of duplicating the literal inline	2026-05-16 04:13:06 +02:00
Miguel Ángel	9b23ccf665	feat(studio): html-backed motion panel (#873) ... ## Summary Re-architects the studio motion panel to persist GSAP motion data directly in HTML element attributes instead of a `.hyperframes/studio-motion.json` JSON sidecar file. Same pattern as position/resize/rotation edits. ### Before ``` MotionPanel → commitStudioMotionManifestOptimistically() → writes .hyperframes/studio-motion.json → applyStudioMotionManifest(doc, manifest) ``` ### After ```html <div id="hero" data-hf-studio-motion='{"start":0.5,"duration":1,"ease":"power3.out","from":{"opacity":0,"y":40},"to":{"opacity":1,"y":0}}'> ``` ``` MotionPanel → writeStudioMotionToElement(element, motion) → buildMotionPatches(element) → commitPositionPatchToHtml(selection, patches) ``` ## What changed - **studioMotionOps.ts** — Added `readStudioMotionFromElement()`, `writeStudioMotionToElement()`, `clearStudioMotionFromElement()` for attribute-based CRUD - **studioMotion.ts** — Added `applyStudioMotionFromDom()` that reads motion from DOM attributes and builds GSAP timeline (kept `applyStudioMotionManifest` for render script compat) - **manualEditsDom.ts** — Added `buildMotionPatches()` / `buildClearMotionPatches()`, integrated motion into `reapplyPositionEditsAfterSeek()` - **useDomEditCommits.ts** — Rewrote `handleDomMotionCommit` / `handleDomMotionClear` to use HTML patching instead of manifest persistence - **useManifestPersistence.ts** — Removed all motion manifest state (~200 lines): `studioMotionManifestRef`, `commitStudioMotionManifestOptimistically`, `applyStudioMotionToPreview`, motion SSE handler - **App.tsx** — Reads motion from element attribute (`readStudioMotionFromElement`) instead of manifest ref - **manualEditsRenderScript.ts** — Extended `studioPositionSeekReapplyRuntime` to rebuild GSAP motion timeline from `data-hf-studio-motion` attributes after each seek, including CustomEase support - **htmlCompiler.ts** — Trigger seek-reapply script injection on `data-hf-studio-motion=` attributes ## Benefits - No sidecar file — motion survives git, copy-paste, and manual HTML editing - Undo/redo works via HTML source history (same as position edits) - Renders correctly via CLI — seek-reapply script handles motion timeline rebuild - Simpler architecture — one persistence path for all studio edits ## Test plan - [x] `bun run build` passes - [x] Pre-commit hooks pass (lint, format, typecheck) - [ ] Set motion on element in Studio → `data-hf-studio-motion` attribute appears in HTML source - [ ] Reload page → motion persists and plays correctly - [ ] Clear motion → attribute removed, element returns to original state - [ ] Undo/redo motion changes - [ ] Render via CLI → motion visible in rendered video - [ ] Seek animation → motion timeline re-syncs correctly	2026-05-15 21:45:57 +02:00
Miguel Ángel	225010800a	feat(studio): persist element positions in HTML, fix resize overlay drift and GSAP double-translation (#829) ... * feat(studio): add pasteboard background to preview viewport Adds bg-neutral-800 to the preview viewport so the area outside the canvas is visually distinct from the composition content — consistent with professional video editors (Premiere, DaVinci, Figma). * feat(studio): pasteboard background and canvas outline around preview - NLEPreview: viewport gets bg-neutral-700 (#404040) as the pasteboard color surrounding the canvas — distinct from the app chrome (#0a0a0a) - Player wrapper: drop bg-black so the pasteboard shows around the canvas (loading overlays still cover the area with bg-black during load) - Player: set host background to transparent via inline style (overrides :host { background: #000 } in shadow DOM), and inject a style rule into the open shadow root so .hfp-container has overflow:visible and the canvas iframe gets a thin white ring + soft drop-shadow — making the canvas boundary legible against the pasteboard * feat(studio): disable manual positioning JSON by default, add toggle Manual edits were always stored in `.hyperframes/studio-manual-edits.json`, making it hard to share source without the sidecar file and easy to accidentally reposition elements via drag. Changes: - `enabled` field added to `StudioManualEditManifest` (defaults to `false` when absent — existing projects are unaffected until they opt in) - Drag handles, resize, and rotation handles are hidden when disabled - Layout X/Y/W/H/R fields in the Design panel are read-only when disabled - "Manual positioning" toggle added at the bottom of the Design panel, visible whether or not an element is selected - Toggle state is persisted to `.hyperframes/studio-manual-edits.json` so each project can opt in independently - `STUDIO_PREVIEW_MANUAL_EDITING_ENABLED` env flag still acts as a hard cap (env off → feature off regardless of project setting) * feat(studio): enable manual positioning by default (opt-out) * feat(studio): allow absolute elements to drag without toggle; gate JSON-backed drag behind toggle * feat(studio): persist positions directly to HTML; remove JSON sidecar and manual positioning toggle Replace the `.hyperframes/studio-manual-edits.json` sidecar with inline-style persistence baked directly into the HTML source. Drag/resize/rotation values are written as CSS custom properties (`--hf-studio-offset-x/y`, `--hf-studio-width/height`, `--hf-studio-rotation`) plus `translate`/`width`/`height`/`rotate` inline styles via `persistDomEditOperations` — no re-apply step needed on load. Key changes: - `sourcePatcher`: add `value: string | null` to `PatchOperation` — null removes the property/attribute from the HTML tag instead of setting it - `manualEditsDom`: add `build*Patches` / `buildClear*Patches` helpers that capture live element state into `PatchOperation[]` for HTML source writes; add `reapplyPositionEditsAfterSeek` (DOM-query-based seek hook, queries data-attribute markers) - `manualEdits.ts`: remove `applyStudioManualEditManifest` and all manifest target resolution; export `reapplyPositionEditsAfterSeek`; keep seek/play wrap infrastructure - `useManifestPersistence`: remove all JSON I/O — no disk read on load, no manifest state, no toggle state; `applyCurrentStudioManualEditsToPreview` now only installs seek hooks via `reapplyPositionEditsAfterSeek` - `useDomEditCommits`: replace `commitStudioManualEditManifestOptimistically` calls with direct DOM apply + `commitPositionPatchToHtml` (queued HTML patch write, skipRefresh) - `DomEditOverlay`: remove `manualEditsEnabled` prop; revert all `canMove || manualEditsEnabled` gates to just `canApplyManualOffset` — every draggable element is always draggable - `PropertyPanel`: remove `ManualPositioningToggle` component and all toggle props - `manualEditsParsing/manualEditsTypes`: remove manifest types, upsert functions, and `STUDIO_MANUAL_EDITS_PATH`; keep `finiteNumber`, `readStudioFileChangePath`, `roundRotationAngle`, and snapshot/CSS-property types * fix(studio): sync keyboard shortcut handler with main; fix keepPlaying seek assertions in test * fix(studio): strip GSAP-cached translate from transform on path offset apply * fix(studio): remove Reset edits button from design panel * feat(studio): wire reloadPreview into manifest persistence; drop stale group-selection refresh - Pass `reloadPreview` into `useManifestPersistence` so undo/redo reloads via the refresh-key path instead of directly touching the iframe. - Remove `refreshDomEditGroupSelectionsFromPreview` from commit handlers; HTML is now the source of truth so no stale-ref refresh is needed. - Add `manualEditsRenderScript` helper; export via studio-api and apply it in `htmlCompiler` during HTML compilation. * fix(studio): prevent root composition from being selected; correct overlay drift on resize - Guard `getDomLayerPatchTarget` against elements with `data-composition-id` so the root composition div is never returned as a visual selection target. - Apply the same guard to the raw `elementFromPoint` fallback in `getPreviewTargetFromPointer`, which was the actual escape path. - Thread `iframeRef` into gesture handler opts; after applying draft dimensions during resize, re-read the element BCR via `toOverlayRect` and update the overlay box position to compensate for visual drift on elements with centered transform-origin (e.g. GSAP scale tweens). * fix(studio): correct resize overlay for scaled elements; block invisible element selection - Resize: use BCR from `toOverlayRect` for both position and size after applying draft dimensions — GSAP scale makes visual size diverge from raw CSS size, BCR is the only accurate source during a gesture. - Click selection: add `isElementComputedVisible` guard to the `elementFromPoint` fallback so opacity-0 / autoAlpha-hidden elements cannot be selected even though the browser hit-test returns them. * fix(studio): reload preview on external file changes via SSE/HMR Share the app-level domEditSaveTimestampRef with useManifestPersistence so the SSE/HMR handler can suppress echoes from all studio saves (code tab, timeline, DOM edits), then call reloadPreview() for non-motion external changes that aren't echoes of our own saves. * fix(studio): suppress post-resize click to keep selection on resized element * fix(studio): serve registry blocks without index.html in preview Blocks ship as {id}.html + assets/ with no index.html. The preview route hard-coded index.html so these projects returned 404 and their assets (e.g. korea-map.png, map-nyc-paris.png) were never served. Add resolveProjectMainHtml() that falls back to {id}.html, thread the resolved compositionPath through transformPreviewHtml and injectStudioPreviewAugmentations, and update listProjects() in the vite adapter to surface block directories in the project list. * fix(render): preserve studio drag/resize/rotation offsets in rendered video Three issues caused studio-edited positions to be lost during rendering: 1. The seek-reapply script used setInterval to wrap window.__hf.seek, but Puppeteer's page.evaluate() calls don't yield the event loop for macrotasks — the interval never fired, so reapplyAll() never ran after GSAP seeks. Fix: use Object.defineProperty to trap writes to the seek property, wrapping it synchronously the instant the bridge assigns it. 2. MEDIA_VISUAL_STYLE_PROPERTIES (copied from <video> to proxy <img> during render) included "transform" but not "translate", "rotate", or "scale" — the CSS Transforms Level 2 individual properties used by studio drag/resize/rotation. The proxy was positioned at offsetLeft/ offsetTop without the translate offset. 3. getViewportMatrix (HDR compositor) only read cs.transform, missing individual transform properties entirely. Added composeIndividualTransforms to build the translate × rotate × scale matrix and compose it before the legacy transform matrix. * fix(studio): select elements with pointer-events: none in preview Compositions often set pointer-events: none on scenes, avatar wrappers, and decorative layers. elementsFromPoint() skips these elements entirely, making them unselectable in the Studio. Fix: temporarily inject a * { pointer-events: auto !important } stylesheet during hit-testing, then remove it immediately after. Also adds a pointer_events_none lint rule (info severity, visible with --verbose) so authors know which selectors may affect Studio selection.	2026-05-15 06:43:00 +02:00
Phuong Le	e59089bf75	fix(studio): persist studio state in project URLs (#836)	2026-05-14 16:56:13 +02:00
Miguel Ángel	c3f70c91db	fix(studio): restore saved positions on page refresh (#801) ... * fix(studio): restore saved positions on page refresh studio-manual-edits.json was correctly persisted to disk but never read back into memory on bootstrap. On every page refresh, studioManualEditManifestRef started empty, so handleLoad applied an empty manifest and all saved positions/sizes/rotations were silently discarded. applyStudioManualEditsToPreview now reads from disk whenever the in-memory manifest is empty. The existing readRevision guard prevents overwriting an in-flight optimistic edit if a position change races with the disk read. * fix(studio): close delete-all race and apply same bootstrap to motion manifest Two follow-up fixes from review: 1. Replace edits.length === 0 with an explicit manifestBootstrappedRef boolean. The old condition was true in two distinct states: never-bootstrapped AND user-deleted-all-edits. Because the delete-all disk write is async-queued, there was a window where applyStudioManualEditsToPreview could read stale disk content and resurrect just-deleted positions. The boolean flag is set on the first apply and reset on project switch, cleanly separating the two states. 2. applyStudioMotionToPreview had the identical bug: GSAP motion edits were also lost on page refresh. Applied the same motionBootstrappedRef pattern.	2026-05-13 22:39:30 +02:00