@hyperframes/studio 0.6.95 → 0.6.97

package/src/components/editor/PropertyPanel.tsx

@@ -21,6 +21,7 @@ import { STUDIO_GSAP_PANEL_ENABLED, STUDIO_KEYFRAMES_ENABLED } from "./manualEdi
 import { usePlayerStore, liveTime } from "../../player";
 import { TimingSection } from "./propertyPanelTimingSection";
 import { type PropertyPanelProps } from "./propertyPanelHelpers";
+import { GestureRecordPanelButton } from "./GestureRecordControl";
 
 // Re-export helpers that external consumers import from this module
 export {
@@ -34,10 +35,6 @@ export {
   setCssFilterFunctionPx,
 } from "./propertyPanelHelpers";
 
-/* ------------------------------------------------------------------ */
-/*  PropertyPanel                                                      */
-/* ------------------------------------------------------------------ */
-
 // fallow-ignore-next-line complexity
 export const PropertyPanel = memo(function PropertyPanel({
   projectId,
@@ -177,10 +174,12 @@ export const PropertyPanel = memo(function PropertyPanel({
       return;
     }
     const current = readStudioPathOffset(element.element);
-    onSetManualOffset(element, {
-      x: axis === "x" ? parsed : current.x,
-      y: axis === "y" ? parsed : current.y,
-    });
+    void Promise.resolve(
+      onSetManualOffset(element, {
+        x: axis === "x" ? parsed : current.x,
+        y: axis === "y" ? parsed : current.y,
+      }),
+    ).catch(() => undefined);
   };
 
   // fallow-ignore-next-line complexity
@@ -204,17 +203,19 @@ export const PropertyPanel = memo(function PropertyPanel({
       current.height > 0
         ? current.height
         : (parsePxMetricValue(styles.height ?? "") ?? element.boundingBox.height);
-    onSetManualSize(element, {
-      width: axis === "width" ? parsed : width,
-      height: axis === "height" ? parsed : height,
-    });
+    void Promise.resolve(
+      onSetManualSize(element, {
+        width: axis === "width" ? parsed : width,
+        height: axis === "height" ? parsed : height,
+      }),
+    ).catch(() => undefined);
   };
 
   const manualRotation = readStudioRotation(element.element);
   const commitManualRotation = (nextValue: string) => {
     const parsed = Number.parseFloat(nextValue);
     if (!Number.isFinite(parsed)) return;
-    onSetManualRotation(element, { angle: parsed });
+    void Promise.resolve(onSetManualRotation(element, { angle: parsed })).catch(() => undefined);
   };
 
   const elStart = Number.parseFloat(element?.dataAttributes?.start ?? "0") || 0;
@@ -354,6 +355,14 @@ export const PropertyPanel = memo(function PropertyPanel({
         </div>
       </div>
       <div className="flex-1 overflow-y-auto">
+        {onToggleRecording && (
+          <GestureRecordPanelButton
+            recordingState={recordingState}
+            recordingDuration={recordingDuration}
+            onToggleRecording={onToggleRecording}
+          />
+        )}
+
         <TextSection
           element={element}
           styles={styles}
@@ -558,31 +567,6 @@ export const PropertyPanel = memo(function PropertyPanel({
             />
           )}
 
-        {onToggleRecording && (
-          <div className="px-4 pb-3">
-            <button
-              type="button"
-              onMouseDown={(e) => e.preventDefault()}
-              onClick={onToggleRecording}
-              className={`w-full flex items-center justify-center gap-2 rounded-lg py-2 text-[11px] font-medium transition-colors ${
-                recordingState === "recording"
-                  ? "bg-red-500/15 text-red-400 border border-red-500/30 animate-pulse"
-                  : "bg-panel-input text-panel-text-2 hover:bg-panel-hover border border-panel-border"
-              }`}
-            >
-              <svg width="10" height="10" viewBox="0 0 10 10">
-                {recordingState === "recording" ? (
-                  <rect x="1" y="1" width="8" height="8" rx="1" fill="currentColor" />
-                ) : (
-                  <circle cx="5" cy="5" r="4.5" fill="currentColor" />
-                )}
-              </svg>
-              {recordingState === "recording"
-                ? `Stop recording ${(recordingDuration ?? 0).toFixed(1)}s — press R`
-                : "Record gesture (R) — move pointer to capture motion"}
-            </button>
-          </div>
-        )}
         {showEditableSections && (
           <StyleSections
             projectId={projectId}

package/src/components/editor/domEditing.test.ts

@@ -431,6 +431,90 @@ describe("resolveDomEditSelection", () => {
     });
   });
 
+  it("keeps the full-canvas stage layer transform disabled while allowing style edits", async () => {
+    const document = createDocument(`
+      <div data-hf-id="hf-stage" id="stage">
+        <button id="cta">Add to basket</button>
+      </div>
+    `);
+    document.documentElement.setAttribute("data-composition-id", "root");
+    document.documentElement.setAttribute("data-width", "1920");
+    document.documentElement.setAttribute("data-height", "1080");
+    setElementRect(document.documentElement, { left: 0, top: 0, width: 1920, height: 1080 });
+    const stage = document.getElementById("stage") as HTMLElement;
+    setElementRect(stage, { left: 0, top: 0, width: 1920, height: 1080 });
+
+    const selection = await resolveDomEditSelection(stage, {
+      activeCompositionPath: null,
+      isMasterView: true,
+      skipSourceProbe: true,
+    });
+
+    expect(selection?.id).toBe("stage");
+    expect(selection?.capabilities).toMatchObject({
+      canSelect: true,
+      canEditStyles: true,
+      canMove: false,
+      canResize: false,
+      canApplyManualOffset: false,
+      canApplyManualSize: false,
+      canApplyManualRotation: false,
+      reasonIfDisabled: "The root composition defines the preview bounds.",
+    });
+  });
+
+  it("keeps direct full-bleed absolute layers editable", async () => {
+    const document = createDocument(`
+      <div id="hero" style="position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;"></div>
+    `);
+    document.documentElement.setAttribute("data-composition-id", "root");
+    document.documentElement.setAttribute("data-width", "1920");
+    document.documentElement.setAttribute("data-height", "1080");
+    setElementRect(document.documentElement, { left: 0, top: 0, width: 1920, height: 1080 });
+    const hero = document.getElementById("hero") as HTMLElement;
+    setElementRect(hero, { left: 0, top: 0, width: 1920, height: 1080 });
+
+    const selection = await resolveDomEditSelection(hero, {
+      activeCompositionPath: null,
+      isMasterView: true,
+      skipSourceProbe: true,
+    });
+
+    expect(selection?.id).toBe("hero");
+    expect(selection?.capabilities).toMatchObject({
+      canSelect: true,
+      canEditStyles: true,
+      canMove: true,
+      canResize: true,
+      canApplyManualOffset: true,
+      canApplyManualSize: true,
+      canApplyManualRotation: true,
+    });
+  });
+
+  it("lets full-canvas layers opt out of root-layer classification", async () => {
+    const document = createDocument(`
+      <div data-hf-allow-root-edit id="editable-stage">
+        <button id="cta">Add to basket</button>
+      </div>
+    `);
+    document.documentElement.setAttribute("data-composition-id", "root");
+    document.documentElement.setAttribute("data-width", "1920");
+    document.documentElement.setAttribute("data-height", "1080");
+    setElementRect(document.documentElement, { left: 0, top: 0, width: 1920, height: 1080 });
+    const editableStage = document.getElementById("editable-stage") as HTMLElement;
+    setElementRect(editableStage, { left: 0, top: 0, width: 1920, height: 1080 });
+
+    const selection = await resolveDomEditSelection(editableStage, {
+      activeCompositionPath: null,
+      isMasterView: true,
+      skipSourceProbe: true,
+    });
+
+    expect(selection?.id).toBe("editable-stage");
+    expect(selection?.capabilities.canApplyManualOffset).toBe(true);
+  });
+
   it("resolves child clicks inside a composition host to the child in master view", async () => {
     const document = createDocument(`
       <div data-composition-id="main">

package/src/components/editor/domEditingLayers.ts

@@ -31,6 +31,7 @@ import {
   getDirectLayerChildren,
   getSelectionCandidate,
 } from "./domEditingElement";
+import { isCompositionRootLayer } from "./domEditingRootLayer";
 
 // ─── Text fields ────────────────────────────────────────────────────────────
 
@@ -179,6 +180,7 @@ export function resolveDomEditCapabilities(args: {
   inlineStyles: Record<string, string>;
   computedStyles: Record<string, string>;
   isCompositionHost: boolean;
+  isCompositionRoot?: boolean;
   isInsideLockedComposition: boolean;
   isMasterView: boolean;
   existsInSource?: boolean;
@@ -211,6 +213,19 @@ export function resolveDomEditCapabilities(args: {
     };
   }
 
+  if (args.isCompositionRoot) {
+    return {
+      canSelect: true,
+      canEditStyles: true,
+      canMove: false,
+      canResize: false,
+      canApplyManualOffset: false,
+      canApplyManualSize: false,
+      canApplyManualRotation: false,
+      reasonIfDisabled: "The root composition defines the preview bounds.",
+    };
+  }
+
   const position = args.computedStyles.position;
   const left = parsePx(args.inlineStyles.left) ?? parsePx(args.computedStyles.left);
   const top = parsePx(args.inlineStyles.top) ?? parsePx(args.computedStyles.top);
@@ -341,6 +356,9 @@ export async function resolveDomEditSelection(
       undefined;
     const inlineStyles = getInlineStyles(current);
     const computedStyles = getCuratedComputedStyles(current);
+    const isCompositionRoot =
+      (current.hasAttribute("data-composition-id") && !compositionSrc) ||
+      isCompositionRootLayer(current, doc, computedStyles);
     const textFields = collectDomEditTextFields(current);
     const isInsideLocked = Boolean(findClosestByAttribute(current, ["data-timeline-locked"]));
     let existsInSource: boolean | undefined;
@@ -361,6 +379,7 @@ export async function resolveDomEditSelection(
       inlineStyles,
       computedStyles,
       isCompositionHost: Boolean(compositionSrc),
+      isCompositionRoot,
       isInsideLockedComposition: isInsideLocked,
       isMasterView: options.isMasterView,
       existsInSource,

package/src/components/editor/domEditingRootLayer.ts

@@ -0,0 +1,64 @@
+import { parsePx } from "./domEditingDom";
+
+const COMPOSITION_ROOT_LAYER_EPSILON_PX = 1;
+
+function readPositiveDimension(value: string | null): number | null {
+  if (!value) return null;
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+}
+
+function approximatelyEqual(a: number, b: number) {
+  return Math.abs(a - b) <= COMPOSITION_ROOT_LAYER_EPSILON_PX;
+}
+
+function getCompositionRootBounds(doc: Document) {
+  const root =
+    doc.querySelector<HTMLElement>("[data-composition-id]") ?? doc.documentElement ?? null;
+  const rootWidth = readPositiveDimension(root?.getAttribute("data-width") ?? null);
+  const rootHeight = readPositiveDimension(root?.getAttribute("data-height") ?? null);
+  if (!root || !rootWidth || !rootHeight) return null;
+  return { rect: root.getBoundingClientRect(), width: rootWidth, height: rootHeight };
+}
+
+function getRenderedLayerSize(element: HTMLElement, computedStyles: Record<string, string>) {
+  const rect = element.getBoundingClientRect();
+  const width = rect.width || parsePx(computedStyles.width);
+  const height = rect.height || parsePx(computedStyles.height);
+  return width && height ? { width, height } : null;
+}
+
+function matchesCompositionRootBounds(
+  elementRect: DOMRect,
+  elementSize: { width: number; height: number },
+  rootBounds: { rect: DOMRect; width: number; height: number },
+) {
+  return (
+    approximatelyEqual(elementRect.left, rootBounds.rect.left) &&
+    approximatelyEqual(elementRect.top, rootBounds.rect.top) &&
+    approximatelyEqual(elementSize.width, rootBounds.width) &&
+    approximatelyEqual(elementSize.height, rootBounds.height)
+  );
+}
+
+function isExplicitFullBleedLayer(computedStyles: Record<string, string>) {
+  return computedStyles.position === "absolute" || computedStyles.position === "fixed";
+}
+
+export function isCompositionRootLayer(
+  element: HTMLElement,
+  doc: Document,
+  computedStyles: Record<string, string>,
+) {
+  if (element.parentElement !== doc.body) return false;
+  if (element.hasAttribute("data-hf-allow-root-edit")) return false;
+  if (isExplicitFullBleedLayer(computedStyles)) return false;
+
+  const rootBounds = getCompositionRootBounds(doc);
+  const elementSize = getRenderedLayerSize(element, computedStyles);
+  return Boolean(
+    rootBounds &&
+    elementSize &&
+    matchesCompositionRootBounds(element.getBoundingClientRect(), elementSize, rootBounds),
+  );
+}

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

@@ -16,13 +16,12 @@ describe("manual editing availability", () => {
     vi.resetModules();
   });
 
-  it("enables inspector selection and manual dragging by default while motion stays opt-in", async () => {
+  it("enables inspector selection and manual dragging by default", async () => {
     const availability = await loadAvailabilityWithEnv({});
 
     expect(availability.STUDIO_PREVIEW_MANUAL_EDITING_ENABLED).toBe(true);
     expect(availability.STUDIO_PREVIEW_SELECTION_ENABLED).toBe(true);
     expect(availability.STUDIO_INSPECTOR_PANELS_ENABLED).toBe(true);
-    expect(availability.STUDIO_MOTION_PANEL_ENABLED).toBe(false);
   });
 
   it("enables GSAP drag intercept by default", async () => {

package/src/components/editor/manualEditingAvailability.ts

@@ -2,7 +2,6 @@ export type StudioFeatureFlagEnv = Record<string, boolean | string | undefined>;
 
 const STUDIO_PREVIEW_MANUAL_DRAGGING_ENV = "VITE_STUDIO_ENABLE_PREVIEW_MANUAL_DRAGGING";
 const STUDIO_INSPECTOR_PANELS_ENV = "VITE_STUDIO_ENABLE_INSPECTOR_PANELS";
-const STUDIO_MOTION_PANEL_ENV = "VITE_STUDIO_ENABLE_MOTION_PANEL";
 const TRUTHY_ENV_VALUES = new Set(["1", "true", "yes", "on", "enabled"]);
 const FALSY_ENV_VALUES = new Set(["0", "false", "no", "off", "disabled"]);
 
@@ -53,12 +52,6 @@ export const STUDIO_INSPECTOR_PANELS_ENABLED = resolveStudioBooleanEnvFlag(
   true,
 );
 
-export const STUDIO_MOTION_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
-  env,
-  [STUDIO_MOTION_PANEL_ENV, "VITE_STUDIO_MOTION_PANEL_ENABLED"],
-  false,
-);
-
 export const STUDIO_BLOCKS_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
   env,
   ["VITE_STUDIO_ENABLE_BLOCKS_PANEL", "VITE_STUDIO_BLOCKS_PANEL_ENABLED"],

package/src/contexts/DomEditContext.tsx

@@ -37,8 +37,7 @@ export function DomEditProvider({
     handleDomBoxSizeCommit,
     handleDomRotationCommit,
     handleDomManualEditsReset,
-    handleDomMotionCommit,
-    handleDomMotionClear,
+
     handleDomTextCommit,
     handleDomTextFieldStyleCommit,
     handleDomAddTextField,
@@ -111,8 +110,6 @@ export function DomEditProvider({
       handleDomBoxSizeCommit,
       handleDomRotationCommit,
       handleDomManualEditsReset,
-      handleDomMotionCommit,
-      handleDomMotionClear,
       handleDomTextCommit,
       handleDomTextFieldStyleCommit,
       handleDomAddTextField,
@@ -179,8 +176,6 @@ export function DomEditProvider({
       handleDomBoxSizeCommit,
       handleDomRotationCommit,
       handleDomManualEditsReset,
-      handleDomMotionCommit,
-      handleDomMotionClear,
       handleDomTextCommit,
       handleDomTextFieldStyleCommit,
       handleDomAddTextField,

package/src/hooks/gsapScriptCommitHelpers.ts

@@ -0,0 +1,128 @@
+import { findUnsafeDomPatchValues } from "@hyperframes/core/studio-api/finite-mutation";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+
+export const PROPERTY_DEFAULTS: Record<string, number> = {
+  opacity: 1,
+  x: 0,
+  y: 0,
+  scale: 1,
+  scaleX: 1,
+  scaleY: 1,
+  rotation: 0,
+  width: 100,
+  height: 100,
+};
+
+export function ensureElementAddressable(selection: DomEditSelection): {
+  selector: string;
+  autoId?: string;
+} {
+  if (selection.id) return { selector: `#${selection.id}` };
+  if (selection.selector) return { selector: selection.selector };
+
+  const el = selection.element;
+  const doc = el.ownerDocument;
+  const tag = el.tagName.toLowerCase();
+  let id = tag;
+  let n = 1;
+  while (doc.getElementById(id)) {
+    n += 1;
+    id = `${tag}-${n}`;
+  }
+  el.setAttribute("id", id);
+  return { selector: `#${id}`, autoId: id };
+}
+
+export class GsapMutationHttpError extends Error {
+  constructor(
+    readonly statusCode: number,
+    readonly responseBody: unknown,
+  ) {
+    super(formatGsapMutationHttpErrorMessage(statusCode, responseBody));
+    this.name = "GsapMutationHttpError";
+  }
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+export async function readJsonResponseBody(res: Response): Promise<unknown> {
+  const contentType = res.headers.get("content-type") ?? "";
+  if (!contentType.includes("application/json")) {
+    return await res.text().catch(() => null);
+  }
+  return await res.json().catch(() => null);
+}
+
+function formatGsapMutationHttpErrorMessage(statusCode: number, body: unknown): string {
+  if (isRecord(body) && typeof body.error === "string") {
+    return body.error;
+  }
+  return `GSAP mutation failed with status ${statusCode}`;
+}
+
+export function formatGsapMutationRejectionToast(error: GsapMutationHttpError): string {
+  const body = error.responseBody;
+  if (isRecord(body)) {
+    const fields = Array.isArray(body.fields)
+      ? body.fields.filter((field): field is string => typeof field === "string")
+      : [];
+    const suffix = fields.length > 0 ? ` (${fields.join(", ")})` : "";
+    return `Couldn't save animation: ${formatGsapMutationHttpErrorMessage(
+      error.statusCode,
+      body,
+    )}${suffix}`;
+  }
+  return `Couldn't save animation: ${error.message}`;
+}
+
+interface AssignAutoIdParams {
+  projectId: string;
+  targetPath: string;
+  selection: DomEditSelection;
+  autoId: string;
+  showToast?: (message: string, tone?: "error" | "info") => void;
+}
+
+export async function assignGsapTargetAutoIdIfNeeded({
+  projectId,
+  targetPath,
+  selection,
+  autoId,
+  showToast,
+}: AssignAutoIdParams): Promise<boolean> {
+  const patchBody = {
+    target: {
+      id: selection.id,
+      hfId: selection.hfId,
+      selector: selection.selector,
+      selectorIndex: selection.selectorIndex,
+    },
+    operations: [{ type: "html-attribute", property: "id", value: autoId }],
+  };
+  const unsafePatchFields = findUnsafeDomPatchValues(patchBody);
+  if (unsafePatchFields.length > 0) {
+    showToast?.("Couldn't assign element id because the patch contains invalid values", "error");
+    return false;
+  }
+  const res = await fetch(
+    `/api/projects/${encodeURIComponent(projectId)}/file-mutations/patch-element/${encodeURIComponent(targetPath)}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(patchBody),
+    },
+  );
+  if (!res.ok) {
+    showToast?.(
+      formatGsapMutationRejectionToast(
+        new GsapMutationHttpError(res.status, await readJsonResponseBody(res)),
+      ),
+      "error",
+    );
+    return false;
+  }
+  const data = (await res.json()) as { changed?: boolean };
+  return data.changed === true;
+}