@hyperframes/studio 0.6.72 → 0.6.74

package/src/components/editor/gsapAnimationConstants.ts

@@ -27,6 +27,16 @@ export const PROP_LABELS: Record<string, string> = {
   autoAlpha: "Visibility",
   visibility: "Visible",
   scaleX_alias: "Stretch X",
+  filter: "Filter",
+  clipPath: "Clip Path",
+  color: "Color",
+  backgroundColor: "Background",
+  borderColor: "Border Color",
+  borderRadius: "Radius",
+  fontSize: "Font Size",
+  letterSpacing: "Tracking",
+  skewX: "Skew X",
+  skewY: "Skew Y",
 };
 
 export const PROP_UNITS: Record<string, string> = {
@@ -83,6 +93,11 @@ export const EASE_LABELS: Record<string, string> = {
   "expo.out": "Very snappy stop",
   "expo.in": "Very slow start",
   "expo.inOut": "Dramatic ease",
+  "spring-gentle": "Gentle spring",
+  "spring-bouncy": "Bouncy spring",
+  "spring-stiff": "Stiff spring",
+  "spring-wobbly": "Wobbly spring",
+  "spring-heavy": "Heavy spring",
 };
 
 export const EASE_CURVES: Record<string, [number, number, number, number]> = {
@@ -123,6 +138,33 @@ export function parseCustomEaseFromString(ease: string): {
 
 export const PERCENT_PROPS = new Set(["opacity", "autoAlpha"]);
 
+export const PROP_CONSTRAINTS: Record<string, { min?: number; max?: number; step?: number }> = {
+  opacity: { min: 0, max: 1, step: 0.01 },
+  autoAlpha: { min: 0, max: 1, step: 0.01 },
+  scale: { min: -10, max: 10, step: 0.01 },
+  scaleX: { min: -10, max: 10, step: 0.01 },
+  scaleY: { min: -10, max: 10, step: 0.01 },
+  rotation: { step: 1 },
+  skewX: { min: -90, max: 90, step: 1 },
+  skewY: { min: -90, max: 90, step: 1 },
+  width: { min: 0, step: 1 },
+  height: { min: 0, step: 1 },
+  borderRadius: { min: 0, step: 1 },
+  x: { step: 1 },
+  y: { step: 1 },
+  fontSize: { min: 1, step: 1 },
+  letterSpacing: { step: 0.1 },
+};
+
+export function clampPropertyValue(prop: string, value: number): number {
+  const constraint = PROP_CONSTRAINTS[prop];
+  if (!constraint) return value;
+  let clamped = value;
+  if (constraint.min !== undefined) clamped = Math.max(constraint.min, clamped);
+  if (constraint.max !== undefined) clamped = Math.min(constraint.max, clamped);
+  return clamped;
+}
+
 export const ADD_METHODS = ["to", "from", "fromTo", "set"] as const;
 
 export const ADD_METHOD_LABELS: Record<string, string> = {

package/src/components/editor/gsapAnimationHelpers.ts

@@ -14,7 +14,8 @@ export function buildTweenSummary(animation: GsapAnimation): string {
   const props = Object.entries(animation.properties);
   const target = animation.targetSelector;
   const dur = animation.duration ?? 0;
-  const pos = animation.position;
+  const rawPos = animation.position;
+  const pos = typeof rawPos === "number" ? parseFloat(rawPos.toFixed(3)) : rawPos;
   const propDescs = props.map(([p, v]) => {
     const label = (PROP_LABELS[p] ?? p).toLowerCase();
     return `${label} to ${formatPropValue(p, v)}`;

package/src/components/editor/manualEditingAvailability.ts

@@ -68,6 +68,12 @@ export const STUDIO_BLOCKS_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
 export const STUDIO_GSAP_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
   env,
   ["VITE_STUDIO_ENABLE_GSAP_PANEL", "VITE_STUDIO_GSAP_PANEL_ENABLED"],
+  true,
+);
+
+export const STUDIO_KEYFRAMES_ENABLED = resolveStudioBooleanEnvFlag(
+  env,
+  ["VITE_STUDIO_ENABLE_KEYFRAMES", "VITE_STUDIO_KEYFRAMES_ENABLED"],
   false,
 );
 

package/src/components/editor/manualEditsDom.ts

@@ -223,6 +223,7 @@ function isIdentityAfterTranslateStrip(m: DOMMatrix): boolean {
 }
 
 function stripGsapTranslateFromTransform(element: HTMLElement): void {
+  if (element.hasAttribute(STUDIO_MANUAL_EDIT_GESTURE_ATTR)) return;
   const transform = element.style.getPropertyValue("transform");
   if (!transform || transform === "none") return;
   const DOMMatrixCtor = (element.ownerDocument.defaultView as (Window & typeof globalThis) | null)
@@ -233,8 +234,11 @@ function stripGsapTranslateFromTransform(element: HTMLElement): void {
     if (m.m41 === 0 && m.m42 === 0) return;
     const offsetX = readPxCustomProperty(element, STUDIO_OFFSET_X_PROP);
     const offsetY = readPxCustomProperty(element, STUDIO_OFFSET_Y_PROP);
-    m.m41 -= offsetX;
-    m.m42 -= offsetY;
+    const angle = Math.atan2(m.b, m.a);
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    m.m41 -= offsetX * cos - offsetY * sin;
+    m.m42 -= offsetX * sin + offsetY * cos;
     if (Math.abs(m.m41) < 0.01 && Math.abs(m.m42) < 0.01 && isIdentityAfterTranslateStrip(m)) {
       element.style.removeProperty("transform");
     } else {
@@ -512,8 +516,58 @@ function reapplyPathOffsets(doc: Document): void {
   }
 }
 
+function gsapAnimatesProperty(el: HTMLElement, ...props: string[]): boolean {
+  const win = el.ownerDocument.defaultView as
+    | (Window & {
+        __timelines?: Record<
+          string,
+          {
+            getChildren?: (
+              deep: boolean,
+            ) => Array<{ targets?: () => Element[]; vars?: Record<string, unknown> }>;
+          }
+        >;
+      })
+    | null;
+  if (!win?.__timelines) return false;
+  const propSet = new Set(props);
+  for (const tl of Object.values(win.__timelines)) {
+    if (!tl?.getChildren) continue;
+    try {
+      for (const child of tl.getChildren(true)) {
+        if (!child.targets || !child.vars) continue;
+        let targetsEl = false;
+        for (const t of child.targets()) {
+          if (t === el || (el.id && t.id === el.id)) {
+            targetsEl = true;
+            break;
+          }
+        }
+        if (!targetsEl) continue;
+        const vars = child.vars;
+        for (const p of propSet) {
+          if (p in vars) return true;
+        }
+        if (vars.keyframes && typeof vars.keyframes === "object") {
+          for (const kfVal of Object.values(vars.keyframes as Record<string, unknown>)) {
+            if (kfVal && typeof kfVal === "object") {
+              for (const p of propSet) {
+                if (p in (kfVal as Record<string, unknown>)) return true;
+              }
+            }
+          }
+        }
+      }
+    } catch {
+      /* */
+    }
+  }
+  return false;
+}
+
 function reapplyBoxSizes(doc: Document): void {
   for (const el of queryStudioElements(doc, STUDIO_BOX_SIZE_ATTR)) {
+    if (gsapAnimatesProperty(el, "width", "height")) continue;
     const w = Number.parseFloat(el.style.getPropertyValue(STUDIO_WIDTH_PROP));
     const h = Number.parseFloat(el.style.getPropertyValue(STUDIO_HEIGHT_PROP));
     if (Number.isFinite(w) && Number.isFinite(h) && w > 0 && h > 0) {

package/src/components/editor/manualOffsetDrag.ts

@@ -236,9 +236,25 @@ export function createManualOffsetDragMember(input: {
   const gestureToken = beginStudioManualEditGesture(input.element);
   const measured = measureManualOffsetDragScreenToOffsetMatrix(input.element, initialOffset);
   if (!measured.ok) {
-    restoreStudioPathOffset(input.element, initialPathOffset);
-    endStudioManualEditGesture(input.element, gestureToken);
-    return { ok: false, reason: measured.reason, selection: input.selection };
+    // Fallback: when GSAP transforms interfere with probe measurement, use
+    // the preview scale as an approximation. The commit path reads the actual
+    // GSAP position from the iframe runtime, so visual imprecision during
+    // drag is acceptable — the final committed position is always exact.
+    const scaleX = input.rect.editScaleX || 1;
+    const scaleY = input.rect.editScaleY || 1;
+    return {
+      ok: true,
+      member: {
+        key: input.key,
+        selection: input.selection,
+        element: input.element,
+        initialOffset,
+        initialPathOffset,
+        gestureToken,
+        screenToOffset: { a: 1 / scaleX, b: 0, c: 0, d: 1 / scaleY },
+        originRect: input.rect,
+      },
+    };
   }
 
   return {

package/src/components/editor/propertyPanelHelpers.ts

@@ -1,5 +1,61 @@
 import { parseCssColor, type ParsedColor } from "./colorValue";
 import { COMMON_LOCAL_FONT_FAMILIES } from "./fontCatalog";
+import type { DomEditSelection } from "./domEditing";
+import type { ImportedFontAsset } from "./fontAssets";
+
+export interface PropertyPanelProps {
+  projectId: string;
+  projectDir: string | null;
+  assets: string[];
+  element: DomEditSelection | null;
+  multiSelectCount?: number;
+  copiedAgentPrompt: boolean;
+  onClearSelection: () => void;
+  onSetStyle: (prop: string, value: string) => void | Promise<void>;
+  onSetAttribute: (attr: string, value: string) => void | Promise<void>;
+  onSetHtmlAttribute: (attr: string, value: string | null) => void | Promise<void>;
+  onSetManualOffset: (element: DomEditSelection, next: { x: number; y: number }) => void;
+  onSetManualSize: (element: DomEditSelection, next: { width: number; height: number }) => void;
+  onSetManualRotation: (element: DomEditSelection, next: { angle: number }) => void;
+  onSetText: (value: string, fieldKey?: string) => void;
+  onSetTextFieldStyle: (fieldKey: string, property: string, value: string) => void;
+  onAddTextField: (afterFieldKey?: string) => string | Promise<string | null> | null;
+  onRemoveTextField: (fieldKey: string) => void;
+  onAskAgent: () => void;
+  onImportAssets?: (files: FileList) => Promise<string[]>;
+  fontAssets?: ImportedFontAsset[];
+  onImportFonts?: (files: FileList | File[]) => Promise<ImportedFontAsset[]>;
+  previewIframeRef?: React.RefObject<HTMLIFrameElement | null>;
+  gsapAnimations?: import("@hyperframes/core/gsap-parser").GsapAnimation[];
+  gsapMultipleTimelines?: boolean;
+  gsapUnsupportedTimelinePattern?: boolean;
+  onUpdateGsapProperty?: (animId: string, prop: string, value: number | string) => void;
+  onUpdateGsapMeta?: (
+    animId: string,
+    updates: { duration?: number; ease?: string; position?: number },
+  ) => void;
+  onDeleteGsapAnimation?: (animId: string) => void;
+  onAddGsapProperty?: (animId: string, prop: string) => void;
+  onRemoveGsapProperty?: (animId: string, prop: string) => void;
+  onUpdateGsapFromProperty?: (animId: string, prop: string, value: number | string) => void;
+  onAddGsapFromProperty?: (animId: string, prop: string) => void;
+  onRemoveGsapFromProperty?: (animId: string, prop: string) => void;
+  onAddGsapAnimation?: (method: "to" | "from" | "set" | "fromTo") => void;
+  onAddKeyframe?: (
+    animationId: string,
+    percentage: number,
+    property: string,
+    value: number | string,
+  ) => void;
+  onRemoveKeyframe?: (animationId: string, percentage: number) => void;
+  onConvertToKeyframes?: (animationId: string) => void;
+  onCommitAnimatedProperty?: (
+    selection: DomEditSelection,
+    property: string,
+    value: number | string,
+  ) => Promise<void>;
+  onSeekToTime?: (time: number) => void;
+}
 
 /* ------------------------------------------------------------------ */
 /*  Font types & constants (shared by font and section modules)        */
@@ -399,3 +455,37 @@ export function extractBackgroundImageUrl(value: string | undefined): string {
   if (endParen < index) return "";
   return value.slice(index, endParen).trim();
 }
+
+// ── Fit to children ──────────────────────────────────────────────────
+
+export function computeFitToChildrenSize(
+  element: DomEditSelection,
+): { width: number; height: number } | null {
+  const el = element.element;
+  const win = el.ownerDocument?.defaultView;
+  const children = Array.from(el.children).filter((c): c is HTMLElement => c.nodeType === 1);
+  if (children.length === 0) return null;
+  let minX = Infinity,
+    minY = Infinity,
+    maxX = -Infinity,
+    maxY = -Infinity;
+  for (const child of children) {
+    if (win) {
+      const cs = win.getComputedStyle(child);
+      if (cs.visibility === "hidden" || cs.display === "none") continue;
+    }
+    const r = child.getBoundingClientRect();
+    if (r.width === 0 && r.height === 0) continue;
+    minX = Math.min(minX, r.left);
+    minY = Math.min(minY, r.top);
+    maxX = Math.max(maxX, r.right);
+    maxY = Math.max(maxY, r.bottom);
+  }
+  if (!isFinite(minX)) return null;
+  const parentRect = el.getBoundingClientRect();
+  const scaleX = parentRect.width > 0 ? element.boundingBox.width / parentRect.width : 1;
+  const scaleY = parentRect.height > 0 ? element.boundingBox.height / parentRect.height : 1;
+  const width = Math.round((maxX - minX) * scaleX);
+  const height = Math.round((maxY - minY) * scaleY);
+  return width > 0 && height > 0 ? { width, height } : null;
+}

package/src/components/editor/propertyPanelTimingSection.tsx

@@ -0,0 +1,64 @@
+import { Clock } from "../../icons/SystemIcons";
+import type { DomEditSelection } from "./domEditing";
+import { RESPONSIVE_GRID } from "./propertyPanelHelpers";
+import { MetricField, Section } from "./propertyPanelPrimitives";
+
+function formatTimingValue(seconds: number): string {
+  if (!Number.isFinite(seconds) || seconds < 0) return "0.00s";
+  return `${seconds.toFixed(2)}s`;
+}
+
+function parseTimingValue(input: string): number | null {
+  const cleaned = input.replace(/s$/i, "").trim();
+  const parsed = Number.parseFloat(cleaned);
+  return Number.isFinite(parsed) && parsed >= 0 ? parsed : null;
+}
+
+export function TimingSection({
+  element,
+  onSetAttribute,
+}: {
+  element: DomEditSelection;
+  onSetAttribute: (attr: string, value: string) => void | Promise<void>;
+}) {
+  const start = Number.parseFloat(element.dataAttributes.start ?? "0") || 0;
+  const duration =
+    Number.parseFloat(
+      element.dataAttributes.duration ?? element.dataAttributes["hf-authored-duration"] ?? "0",
+    ) || 0;
+  const end = start + duration;
+
+  const commitStart = (nextValue: string) => {
+    const parsed = parseTimingValue(nextValue);
+    if (parsed == null) return;
+    void onSetAttribute("start", parsed.toFixed(2));
+  };
+
+  const commitDuration = (nextValue: string) => {
+    const parsed = parseTimingValue(nextValue);
+    if (parsed == null || parsed <= 0) return;
+    void onSetAttribute("duration", parsed.toFixed(2));
+  };
+
+  const commitEnd = (nextValue: string) => {
+    const parsed = parseTimingValue(nextValue);
+    if (parsed == null || parsed <= start) return;
+    void onSetAttribute("duration", (parsed - start).toFixed(2));
+  };
+
+  return (
+    <Section title="Timing" icon={<Clock size={15} />}>
+      <div className={RESPONSIVE_GRID}>
+        <MetricField label="Start" value={formatTimingValue(start)} onCommit={commitStart} />
+        <MetricField label="End" value={formatTimingValue(end)} onCommit={commitEnd} />
+      </div>
+      <div className="mt-3">
+        <MetricField
+          label="Duration"
+          value={formatTimingValue(duration)}
+          onCommit={commitDuration}
+        />
+      </div>
+    </Section>
+  );
+}