npm - @hyperframes/studio - Versions diffs - 0.6.92 → 0.6.94 - Mend

@hyperframes/studio 0.6.92 → 0.6.94

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/assets/{index-CmRIkCwI.js → index-DvlSlmGV.js} +111 -111
package/dist/assets/{index-CDy8BuGq.js → index-qQxjvtjI.js} +1 -1
package/dist/index.html +1 -1
package/package.json +4 -4
package/src/components/StudioPreviewArea.tsx +0 -9
package/src/components/editor/DomEditOverlay.tsx +0 -63
package/src/components/editor/PropertyPanel.tsx +0 -3
package/src/components/editor/manualEditingAvailability.test.ts +5 -5
package/src/components/editor/manualEditingAvailability.ts +1 -1
package/src/components/editor/useOffScreenIndicators.ts +0 -197

package/dist/assets/{index-CDy8BuGq.js → index-qQxjvtjI.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{n as Qi}from"./index-CmRIkCwI.js";/*!
+import{n as Qi}from"./index-DvlSlmGV.js";/*!
  * Copyright (c) 2026-present, Vanilagy and contributors
  *
  * This Source Code Form is subject to the terms of the Mozilla Public

package/dist/index.html CHANGED Viewed

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>HyperFrames Studio</title>
-    <script type="module" crossorigin src="/assets/index-CmRIkCwI.js"></script>
+    <script type="module" crossorigin src="/assets/index-DvlSlmGV.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-rm9tn9nH.css">
   </head>
   <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.6.92",
+  "version": "0.6.94",
   "description": "",
   "repository": {
     "type": "git",
@@ -31,8 +31,8 @@
     "@codemirror/view": "6.40.0",
     "@phosphor-icons/react": "^2.1.10",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.6.92",
-    "@hyperframes/player": "0.6.92"
+    "@hyperframes/core": "0.6.94",
+    "@hyperframes/player": "0.6.94"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -46,7 +46,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.6.92"
+    "@hyperframes/producer": "0.6.94"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/StudioPreviewArea.tsx CHANGED Viewed

@@ -108,7 +108,6 @@ export function StudioPreviewArea({
     handlePreviewCanvasPointerMove,
     handlePreviewCanvasPointerLeave,
     applyDomSelection,
-    buildDomSelectionFromTarget,
     handleBlockedDomMove,
     handleDomManualDragStart,
     handleDomPathOffsetCommit,
@@ -291,14 +290,6 @@ export function StudioPreviewArea({
                   onRotationCommit={handleDomRotationCommit}
                   gridVisible={snapPrefs.gridVisible}
                   gridSpacing={snapPrefs.gridSpacing}
-                  onSelectElementById={async (id) => {
-                    const iframe = previewIframeRef.current;
-                    const el = iframe?.contentDocument?.getElementById(id);
-                    if (!el) return null;
-                    const sel = await buildDomSelectionFromTarget(el);
-                    if (sel) applyDomSelection(sel, { revealPanel: true });
-                    return sel;
-                  }}
                 />
                 <SnapToolbar onSnapChange={setSnapPrefs} />
                 {gestureOverlay}

package/src/components/editor/DomEditOverlay.tsx CHANGED Viewed

@@ -13,7 +13,6 @@ import { useDomEditOverlayRects } from "./useDomEditOverlayRects";
 import { createDomEditOverlayGestureHandlers } from "./useDomEditOverlayGestures";
 import { SnapGuideOverlay, type SnapGuidesState } from "./SnapGuideOverlay";
 import { GridOverlay } from "./GridOverlay";
-import { useOffScreenIndicators } from "./useOffScreenIndicators";
 // Re-exports for external consumers — preserving existing import paths.
 export {
@@ -55,7 +54,6 @@ interface DomEditOverlayProps {
   ) => void;
   onBlockedMove: (selection: DomEditSelection) => void;
   onManualDragStart?: () => void;
-  onSelectElementById?: (id: string) => Promise<DomEditSelection | null>;
   onPathOffsetCommit: (
     selection: DomEditSelection,
     next: { x: number; y: number },
@@ -85,7 +83,6 @@ export const DomEditOverlay = memo(function DomEditOverlay({
   gridVisible = false,
   gridSpacing = 50,
   onManualDragStart,
-  onSelectElementById,
   onPathOffsetCommit,
   onGroupPathOffsetCommit,
   onBoxSizeCommit,
@@ -215,8 +212,6 @@ export const DomEditOverlay = memo(function DomEditOverlay({
     return () => cancelAnimationFrame(frame);
   });
-  const offScreenIndicators = useOffScreenIndicators({ iframeRef, overlayRef, compRect });
   const gestures = createDomEditOverlayGestureHandlers({
     overlayRef,
     iframeRef,
@@ -521,64 +516,6 @@ export const DomEditOverlay = memo(function DomEditOverlay({
             }}
           />
         ))}
-      {offScreenIndicators.length > 0 &&
-        compRect.width > 0 &&
-        offScreenIndicators.map((ind) => {
-          const isSelected = selection?.id === ind.elementId;
-          return (
-            <div
-              key={`offscreen-${ind.key}`}
-              className={`absolute rounded-sm ${isSelected ? "pointer-events-none" : "cursor-grab"}`}
-              style={{
-                left: ind.left,
-                top: ind.top,
-                width: ind.width,
-                height: ind.height,
-                border: `1.5px dashed var(--panel-accent, #34d399)`,
-                opacity: isSelected ? 0.3 : 0.5,
-                zIndex: isSelected ? 1 : 5,
-              }}
-              onPointerDown={
-                isSelected
-                  ? undefined
-                  : (e) => {
-                      if (e.button !== 0) return;
-                      e.stopPropagation();
-                      e.preventDefault();
-                      const startX = e.clientX;
-                      const startY = e.clientY;
-                      const el = e.currentTarget;
-                      el.setPointerCapture(e.pointerId);
-                      let deltaX = 0;
-                      let deltaY = 0;
-                      let moved = false;
-                      const onMove = (me: PointerEvent) => {
-                        deltaX = me.clientX - startX;
-                        deltaY = me.clientY - startY;
-                        if (Math.abs(deltaX) > 3 || Math.abs(deltaY) > 3) moved = true;
-                        if (moved) {
-                          el.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
-                        }
-                      };
-                      const onUp = async (ue: PointerEvent) => {
-                        el.releasePointerCapture(ue.pointerId);
-                        el.removeEventListener("pointermove", onMove);
-                        el.removeEventListener("pointerup", onUp);
-                        el.style.transform = "";
-                        const sel = await onSelectElementById?.(ind.elementId);
-                        if (moved && sel && onPathOffsetCommit) {
-                          const scale = compRect.scaleX || 1;
-                          onPathOffsetCommit(sel, { x: deltaX / scale, y: deltaY / scale });
-                        }
-                      };
-                      el.addEventListener("pointermove", onMove);
-                      el.addEventListener("pointerup", onUp);
-                    }
-              }
-              title={isSelected ? undefined : `Drag #${ind.elementId}`}
-            />
-          );
-        })}
       <GridOverlay
         visible={gridVisible}
         spacing={gridSpacing}

package/src/components/editor/PropertyPanel.tsx CHANGED Viewed

@@ -353,7 +353,6 @@ export const PropertyPanel = memo(function PropertyPanel({
           </div>
         </div>
       </div>
       <div className="flex-1 overflow-y-auto">
         <TextSection
           element={element}
@@ -369,7 +368,6 @@ export const PropertyPanel = memo(function PropertyPanel({
         {element.dataAttributes.start != null && (
           <TimingSection element={element} onSetAttribute={onSetAttribute} />
         )}
         {isMediaElement(element) && (
           <MediaSection
             projectDir={projectDir}
@@ -585,7 +583,6 @@ export const PropertyPanel = memo(function PropertyPanel({
             </button>
           </div>
         )}
         {showEditableSections && (
           <StyleSections
             projectId={projectId}

package/src/components/editor/manualEditingAvailability.test.ts CHANGED Viewed

@@ -25,16 +25,16 @@ describe("manual editing availability", () => {
     expect(availability.STUDIO_MOTION_PANEL_ENABLED).toBe(false);
   });
-  it("disables GSAP drag intercept by default", async () => {
+  it("enables GSAP drag intercept by default", async () => {
     const availability = await loadAvailabilityWithEnv({});
-    expect(availability.STUDIO_GSAP_DRAG_INTERCEPT_ENABLED).toBe(false);
+    expect(availability.STUDIO_GSAP_DRAG_INTERCEPT_ENABLED).toBe(true);
   });
-  it("enables GSAP drag intercept when env var is set", async () => {
+  it("disables GSAP drag intercept when env var is false", async () => {
     const availability = await loadAvailabilityWithEnv({
-      VITE_STUDIO_ENABLE_GSAP_DRAG_INTERCEPT: "true",
+      VITE_STUDIO_ENABLE_GSAP_DRAG_INTERCEPT: "false",
     });
-    expect(availability.STUDIO_GSAP_DRAG_INTERCEPT_ENABLED).toBe(true);
+    expect(availability.STUDIO_GSAP_DRAG_INTERCEPT_ENABLED).toBe(false);
   });
   it("disables preview selection when the inspector panel flag is explicitly off", async () => {

package/src/components/editor/manualEditingAvailability.ts CHANGED Viewed

@@ -74,7 +74,7 @@ export const STUDIO_GSAP_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
 export const STUDIO_KEYFRAMES_ENABLED = resolveStudioBooleanEnvFlag(
   env,
   ["VITE_STUDIO_ENABLE_KEYFRAMES", "VITE_STUDIO_KEYFRAMES_ENABLED"],
-  true,
+  false,
 );
 export const STUDIO_RAZOR_TOOL_ENABLED = resolveStudioBooleanEnvFlag(

package/src/components/editor/useOffScreenIndicators.ts DELETED Viewed

@@ -1,197 +0,0 @@
-/**
- * Detects GSAP-animated elements whose center is outside the visible composition
- * area and returns edge-clamped indicator positions for each.
- */
-import { useRef, useState, type RefObject } from "react";
-import { useMountEffect } from "../../hooks/useMountEffect";
-export interface OffScreenIndicator {
-  key: string;
-  elementId: string;
-  left: number;
-  top: number;
-  width: number;
-  height: number;
-}
-interface CompRect {
-  left: number;
-  top: number;
-  width: number;
-  height: number;
-  scaleX: number;
-  scaleY: number;
-}
-type TimelineLike = { getChildren?: (nested: boolean) => Array<{ targets?: () => Element[] }> };
-function isHtmlElement(node: unknown): node is HTMLElement {
-  return (
-    typeof node === "object" &&
-    node !== null &&
-    typeof (node as HTMLElement).getBoundingClientRect === "function" &&
-    typeof (node as HTMLElement).tagName === "string"
-  );
-}
-function collectGsapTargetElements(iframe: HTMLIFrameElement): HTMLElement[] {
-  const win = iframe.contentWindow as
-    | (Window & { __timelines?: Record<string, TimelineLike> })
-    | null;
-  if (!win) return [];
-  let timelines: Record<string, TimelineLike> | undefined;
-  try {
-    timelines = win.__timelines;
-  } catch {
-    return [];
-  }
-  if (!timelines) return [];
-  const seen = new Set<HTMLElement>();
-  for (const tl of Object.values(timelines)) {
-    if (!tl?.getChildren) continue;
-    try {
-      for (const child of tl.getChildren(true)) {
-        if (!child.targets) continue;
-        for (const t of child.targets()) {
-          if (isHtmlElement(t)) seen.add(t);
-        }
-      }
-    } catch {
-      // cross-origin or detached timeline — skip
-    }
-  }
-  return Array.from(seen);
-}
-function indicatorsEqual(a: OffScreenIndicator[], b: OffScreenIndicator[]): boolean {
-  if (a.length !== b.length) return false;
-  for (let i = 0; i < a.length; i++) {
-    const ai = a[i]!;
-    const bi = b[i]!;
-    if (
-      ai.key !== bi.key ||
-      Math.abs(ai.left - bi.left) > 0.5 ||
-      Math.abs(ai.top - bi.top) > 0.5 ||
-      Math.abs(ai.width - bi.width) > 0.5 ||
-      Math.abs(ai.height - bi.height) > 0.5
-    )
-      return false;
-  }
-  return true;
-}
-export function useOffScreenIndicators({
-  iframeRef,
-  overlayRef,
-  compRect,
-}: {
-  iframeRef: RefObject<HTMLIFrameElement | null>;
-  overlayRef: RefObject<HTMLDivElement | null>;
-  compRect: CompRect;
-}): OffScreenIndicator[] {
-  const [indicators, setIndicators] = useState<OffScreenIndicator[]>([]);
-  const prevRef = useRef<OffScreenIndicator[]>([]);
-  const compRectRef = useRef(compRect);
-  compRectRef.current = compRect;
-  useMountEffect(() => {
-    let frame = 0;
-    const update = () => {
-      frame = requestAnimationFrame(update);
-      const iframe = iframeRef.current;
-      const overlayEl = overlayRef.current;
-      const cr = compRectRef.current;
-      if (!iframe || !overlayEl || cr.width <= 0 || cr.height <= 0) {
-        if (prevRef.current.length > 0) {
-          prevRef.current = [];
-          setIndicators([]);
-        }
-        return;
-      }
-      const iframeRect = iframe.getBoundingClientRect();
-      const overlayRect = overlayEl.getBoundingClientRect();
-      const doc = iframe.contentDocument;
-      const root =
-        doc?.querySelector<HTMLElement>("[data-composition-id]") ?? doc?.documentElement ?? null;
-      if (!root) return;
-      const declaredWidth =
-        Number.parseFloat(root.getAttribute("data-width") ?? "") || iframeRect.width;
-      const declaredHeight =
-        Number.parseFloat(root.getAttribute("data-height") ?? "") || iframeRect.height;
-      const rootScaleX = iframeRect.width / declaredWidth;
-      const rootScaleY = iframeRect.height / declaredHeight;
-      const targets = collectGsapTargetElements(iframe);
-      if (targets.length === 0) {
-        if (prevRef.current.length > 0) {
-          prevRef.current = [];
-          setIndicators([]);
-        }
-        return;
-      }
-      // Composition bounds in overlay coordinates
-      const compLeft = cr.left;
-      const compTop = cr.top;
-      const compRight = compLeft + cr.width;
-      const compBottom = compTop + cr.height;
-      const next: OffScreenIndicator[] = [];
-      const keyCounts = new Map<string, number>();
-      for (const el of targets) {
-        if (!el.isConnected) continue;
-        const elRect = el.getBoundingClientRect();
-        if (elRect.width <= 0 && elRect.height <= 0) continue;
-        // Element rect in overlay coordinates
-        const elLeft = iframeRect.left - overlayRect.left + elRect.left * rootScaleX;
-        const elTop = iframeRect.top - overlayRect.top + elRect.top * rootScaleY;
-        const elW = elRect.width * rootScaleX;
-        const elH = elRect.height * rootScaleY;
-        // Check if the element is fully inside the composition
-        if (
-          elLeft >= compLeft &&
-          elTop >= compTop &&
-          elLeft + elW <= compRight &&
-          elTop + elH <= compBottom
-        ) {
-          continue;
-        }
-        // Only elements with a real id attribute can be selected via getElementById
-        if (!el.id) continue;
-        const count = keyCounts.get(el.id) ?? 0;
-        keyCounts.set(el.id, count + 1);
-        const key = count > 0 ? `${el.id}:${count}` : el.id;
-        next.push({
-          key,
-          elementId: el.id,
-          left: elLeft,
-          top: elTop,
-          width: elW,
-          height: elH,
-        });
-      }
-      if (!indicatorsEqual(prevRef.current, next)) {
-        prevRef.current = next;
-        setIndicators(next);
-      }
-    };
-    frame = requestAnimationFrame(update);
-    return () => cancelAnimationFrame(frame);
-  });
-  return indicators;
-}