@hyperframes/studio 0.6.102 → 0.6.104

package/dist/assets/{index-BZKngETE.js → index-JOvcn0L_.js}

@@ -1 +1 @@
-import{g as P}from"./index-BzjItfjX.js";function j(c,d){for(var s=0;s<d.length;s++){const a=d[s];if(typeof a!="string"&&!Array.isArray(a)){for(const i in a)if(i!=="default"&&!(i in c)){const l=Object.getOwnPropertyDescriptor(a,i);l&&Object.defineProperty(c,i,l.get?l:{enumerable:!0,get:()=>a[i]})}}}return Object.freeze(Object.defineProperty(c,Symbol.toStringTag,{value:"Module"}))}var v={},w;function k(){if(w)return v;w=1,Object.defineProperty(v,"__esModule",{value:!0}),v.default=d;var c=window.OfflineAudioContext||window.webkitOfflineAudioContext;function d(e){var r=a(e);return r.start(0),[i,y,O(e.sampleRate),s].reduce(function(t,o){return o(t)},r.buffer.getChannelData(0))}function s(e){return e.sort(function(r,t){return t.count-r.count}).splice(0,5)[0].tempo}function a(e){var r=e.length,t=e.numberOfChannels,o=e.sampleRate,n=new c(t,r,o),u=n.createBufferSource();u.buffer=e;var f=n.createBiquadFilter();return f.type="lowpass",u.connect(f),f.connect(n.destination),u}function i(e){for(var r=[],t=.9,o=.3,n=15;r.length<n&&t>=o;)r=l(e,t),t-=.05;if(r.length<n)throw new Error("Could not find enough samples for a reliable detection.");return r}function l(e,r){for(var t=[],o=0,n=e.length;o<n;o+=1)e[o]>r&&(t.push(o),o+=1e4);return t}function y(e){var r=[];return e.forEach(function(t,o){for(var n=function(x){var g=e[o+x]-t,_=r.some(function(h){if(h.interval===g)return h.count+=1});_||r.push({interval:g,count:1})},u=0;u<10;u+=1)n(u)}),r}function O(e){return function(r){var t=[];return r.forEach(function(o){if(o.interval!==0){for(var n=60/(o.interval/e);n<90;)n*=2;for(;n>180;)n/=2;n=Math.round(n);var u=t.some(function(f){if(f.tempo===n)return f.count+=o.count});u||t.push({tempo:n,count:o.count})}}),t}}return v}var p,b;function q(){return b||(b=1,p=k().default),p}var m=q();const A=P(m),D=j({__proto__:null,default:A},[m]);export{D as i};
+import{g as P}from"./index-CtVcyRD2.js";function j(c,d){for(var s=0;s<d.length;s++){const a=d[s];if(typeof a!="string"&&!Array.isArray(a)){for(const i in a)if(i!=="default"&&!(i in c)){const l=Object.getOwnPropertyDescriptor(a,i);l&&Object.defineProperty(c,i,l.get?l:{enumerable:!0,get:()=>a[i]})}}}return Object.freeze(Object.defineProperty(c,Symbol.toStringTag,{value:"Module"}))}var v={},w;function k(){if(w)return v;w=1,Object.defineProperty(v,"__esModule",{value:!0}),v.default=d;var c=window.OfflineAudioContext||window.webkitOfflineAudioContext;function d(e){var r=a(e);return r.start(0),[i,y,O(e.sampleRate),s].reduce(function(t,o){return o(t)},r.buffer.getChannelData(0))}function s(e){return e.sort(function(r,t){return t.count-r.count}).splice(0,5)[0].tempo}function a(e){var r=e.length,t=e.numberOfChannels,o=e.sampleRate,n=new c(t,r,o),u=n.createBufferSource();u.buffer=e;var f=n.createBiquadFilter();return f.type="lowpass",u.connect(f),f.connect(n.destination),u}function i(e){for(var r=[],t=.9,o=.3,n=15;r.length<n&&t>=o;)r=l(e,t),t-=.05;if(r.length<n)throw new Error("Could not find enough samples for a reliable detection.");return r}function l(e,r){for(var t=[],o=0,n=e.length;o<n;o+=1)e[o]>r&&(t.push(o),o+=1e4);return t}function y(e){var r=[];return e.forEach(function(t,o){for(var n=function(x){var g=e[o+x]-t,_=r.some(function(h){if(h.interval===g)return h.count+=1});_||r.push({interval:g,count:1})},u=0;u<10;u+=1)n(u)}),r}function O(e){return function(r){var t=[];return r.forEach(function(o){if(o.interval!==0){for(var n=60/(o.interval/e);n<90;)n*=2;for(;n>180;)n/=2;n=Math.round(n);var u=t.some(function(f){if(f.tempo===n)return f.count+=o.count});u||t.push({tempo:n,count:o.count})}}),t}}return v}var p,b;function q(){return b||(b=1,p=k().default),p}var m=q();const A=P(m),D=j({__proto__:null,default:A},[m]);export{D as i};

package/dist/assets/{index-C0vMHtMH.js → index-_elwW-31.js}

@@ -1,4 +1,4 @@
-import{n as Qi}from"./index-BzjItfjX.js";/*!
+import{n as Qi}from"./index-CtVcyRD2.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

@@ -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-BzjItfjX.js"></script>
+    <script type="module" crossorigin src="/assets/index-CtVcyRD2.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-BITwbxi-.css">
   </head>
   <body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.6.102",
+  "version": "0.6.104",
   "description": "",
   "repository": {
     "type": "git",
@@ -33,9 +33,9 @@
     "@phosphor-icons/react": "^2.1.10",
     "bpm-detective": "^2.0.5",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.6.102",
-    "@hyperframes/player": "0.6.102",
-    "@hyperframes/sdk": "0.6.102"
+    "@hyperframes/core": "0.6.104",
+    "@hyperframes/player": "0.6.104",
+    "@hyperframes/sdk": "0.6.104"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -49,7 +49,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.6.102"
+    "@hyperframes/producer": "0.6.104"
   },
   "peerDependencies": {
     "react": "19",

package/src/App.tsx

@@ -175,7 +175,7 @@ export function StudioApp() {
     reloadPreview: () => setRefreshKey((k) => k + 1),
     pendingTimelineEditPathRef,
   });
-  const sdkSession = useSdkSession(projectId, activeCompPath);
+  const sdkSession = useSdkSession(projectId, activeCompPath ?? "index.html");
   const timelineEditing = useTimelineEditing({
     projectId,
     activeCompPath,

package/src/components/renders/useRenderQueue.ts

@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { trackStudioRenderStart } from "../../telemetry/events";
+import { getAnonymousId } from "../../telemetry/config";
 
 export interface RenderJob {
   id: string;
@@ -109,10 +110,15 @@ export function useRenderQueue(projectId: string | null) {
         format: string;
         resolution?: string;
         composition?: string;
+        telemetryDistinctId: string;
       } = {
         fps,
         quality,
         format,
+        // So the server-emitted render_complete/render_error is attributed to
+        // this browser user (same id studio_* events use), making the render
+        // funnel joinable. Matches studio_render_start fired just above.
+        telemetryDistinctId: getAnonymousId(),
       };
       if (resolution && resolution !== "auto") body.resolution = resolution;
       if (composition) body.composition = composition;

package/src/hooks/useTimelineEditing.ts

@@ -5,7 +5,7 @@
 // fallow-ignore-file complexity
 import { useCallback, useRef } from "react";
 import type { Composition } from "@hyperframes/sdk";
-import { runShadowTiming } from "../utils/sdkShadow";
+import { runShadowDelete, runShadowTiming } from "../utils/sdkShadow";
 import type { TimelineElement } from "../player";
 import { usePlayerStore } from "../player";
 import { useRazorSplit } from "./useRazorSplit";
@@ -288,6 +288,7 @@ export function useTimelineEditing({
           );
         usePlayerStore.getState().setSelectedElementId(null);
         reloadPreview();
+        if (sdkSession) runShadowDelete(sdkSession, element.hfId);
         showToast(`Deleted ${label}. Use Undo to restore it.`, "info");
       } catch (error) {
         const message = error instanceof Error ? error.message : "Failed to delete timeline clip";
@@ -303,6 +304,7 @@ export function useTimelineEditing({
       domEditSaveTimestampRef,
       reloadPreview,
       isRecordingRef,
+      sdkSession,
     ],
   );
 

package/src/utils/sdkShadow.test.ts

@@ -108,6 +108,20 @@ describe("sdkShadowDispatch (integration)", () => {
     expect(session.getElement("hf-box")?.inlineStyles.color).toBe("#00f");
   });
 
+  it("does NOT false-mismatch a hyphenated style property (kebab op vs camelCase snapshot)", async () => {
+    const { sdkShadowDispatch } = await import("./sdkShadow");
+    const session = await openComposition(BASE_HTML);
+
+    const ops: PatchOperation[] = [
+      { type: "inline-style", property: "background-color", value: "rgb(255, 79, 88)" },
+    ];
+    const result = sdkShadowDispatch(session, "hf-box", ops);
+
+    expect(result.dispatched).toBe(true);
+    expect(result.mismatches).toHaveLength(0); // was 1 before the kebab→camel read-back fix
+    expect(session.getElement("hf-box")?.inlineStyles.backgroundColor).toBe("rgb(255, 79, 88)");
+  });
+
   it("returns dispatched:false when hfId not found in session", async () => {
     const { sdkShadowDispatch } = await import("./sdkShadow");
     const session = await openComposition(BASE_HTML);
@@ -143,6 +157,21 @@ describe("sdkShadowDispatch (integration)", () => {
     expect(session.getElement("hf-box")?.attributes["data-name"]).toBe("hero");
   });
 
+  // fallow-ignore-next-line code-duplication
+  it("does NOT false-mismatch studio-internal data-hf-* marker attributes", async () => {
+    const { sdkShadowDispatch } = await import("./sdkShadow");
+    const session = await openComposition(BASE_HTML);
+
+    // path-offset drags emit these already-data-prefixed, SDK-excluded markers.
+    const ops: PatchOperation[] = [
+      { type: "attribute", property: "data-hf-studio-path-offset", value: "true" },
+    ];
+    const result = sdkShadowDispatch(session, "hf-box", ops);
+
+    expect(result.dispatched).toBe(true);
+    expect(result.mismatches).toHaveLength(0); // filtered, not double-prefixed + flagged
+  });
+
   it("returns dispatch_error when dispatch throws — does not propagate", async () => {
     const { sdkShadowDispatch } = await import("./sdkShadow");
     const session = await openComposition(BASE_HTML);
@@ -301,6 +330,21 @@ tl.to("[data-hf-id=\\"hf-box\\"]", { opacity: "1", duration: 0.5 }, 0);
 window.__timelines["t"] = tl;`;
     expect(gsapFidelityMismatches(numeric, stringy)).toEqual([]);
   });
+
+  it("matches the same element across different selector forms when a resolver is given", () => {
+    // SDK writes [data-hf-id="hf-x"], server writes .x — same element, same tween.
+    const sdk = `var tl = gsap.timeline({ paused: true });
+tl.to("[data-hf-id=\\"hf-x\\"]", { x: 200, duration: 0.8 }, 0.5);
+window.__timelines["t"] = tl;`;
+    const server = `var tl = gsap.timeline({ paused: true });
+tl.to(".x", { x: 200, duration: 0.8 }, 0.5);
+window.__timelines["t"] = tl;`;
+    const resolve = (sel: string) => (/hf-x|\.x/.test(sel) ? "hf-x" : sel);
+    // Without a resolver: selector-form divergence → present/absent mismatch.
+    expect(gsapFidelityMismatches(sdk, server).length).toBeGreaterThan(0);
+    // With a resolver: matched by element → no mismatch.
+    expect(gsapFidelityMismatches(sdk, server, resolve)).toEqual([]);
+  });
 });
 
 describe("runShadowGsapFidelity", () => {

package/src/utils/sdkShadow.ts

@@ -23,6 +23,22 @@ import type { PatchOperation } from "./sourcePatcher";
  * Multiple inline-style ops are coalesced into a single setStyle (SDK batches
  * style changes naturally). One SDK op is emitted per non-style op.
  */
+// "attribute" PatchOperations carry the data- attribute NAME. Studio passes
+// some already prefixed (e.g. "data-hf-studio-path-offset") and some bare
+// (e.g. "name"); prefix only when needed, never double-prefix.
+function attrName(property: string): string {
+  return property.startsWith("data-") ? property : `data-${property}`;
+}
+
+// The SDK element model excludes data-hf-* attributes (document.ts skips them),
+// so shadowing studio-internal markers (data-hf-studio-path-offset, etc.) can
+// never match — drop those ops from the shadow instead of false-mismatching.
+function isShadowableOp(op: PatchOperation): boolean {
+  if (op.type === "attribute") return !attrName(op.property).startsWith("data-hf-");
+  if (op.type === "html-attribute") return !op.property.startsWith("data-hf-");
+  return true;
+}
+
 export function patchOpsToSdkEditOps(hfId: string, ops: PatchOperation[]): EditOp[] {
   const result: EditOp[] = [];
   const styles: Record<string, string | null> = {};
@@ -38,7 +54,7 @@ export function patchOpsToSdkEditOps(hfId: string, ops: PatchOperation[]): EditO
       result.push({
         type: "setAttribute",
         target: hfId,
-        name: `data-${op.property}`,
+        name: attrName(op.property),
         value: op.value,
       });
     } else if (op.type === "html-attribute") {
@@ -98,17 +114,24 @@ function flattenSnapshot(snap: ElementSnapshot): FlatSnapshot {
 
 type OpFieldResolver = (op: PatchOperation, flat: FlatSnapshot) => OpFields;
 
+// Snapshot inlineStyles are camelCase (CSSStyleDeclaration convention); PatchOperation
+// style properties are kebab-case ("background-color"). Convert for read-back, else
+// every hyphenated property false-mismatches against a null actual.
+function kebabToCamel(prop: string): string {
+  return prop.replace(/-([a-z])/g, (_, c: string) => c.toUpperCase());
+}
+
 const OP_FIELD_RESOLVERS: Record<string, OpFieldResolver> = {
   "inline-style": (op, flat) => ({
     property: op.property,
     expected: op.value,
-    actual: flat.styles[op.property] ?? null,
+    actual: flat.styles[kebabToCamel(op.property)] ?? flat.styles[op.property] ?? null,
   }),
   "text-content": (op, flat) => ({ property: "text", expected: op.value ?? "", actual: flat.text }),
   attribute: (op, flat) => ({
-    property: `data-${op.property}`,
+    property: attrName(op.property),
     expected: op.value ?? null,
-    actual: flat.attrs[`data-${op.property}`] ?? null,
+    actual: flat.attrs[attrName(op.property)] ?? null,
   }),
   "html-attribute": (op, flat) => ({
     property: op.property,
@@ -157,8 +180,11 @@ export function sdkShadowDispatch(
   if (!session.getElement(hfId)) {
     return { dispatched: false, mismatches: [{ kind: "element_not_found", hfId }] };
   }
+  // Drop studio-internal markers the SDK model can't represent (data-hf-*), so
+  // canvas-drag/path-offset edits don't false-mismatch on bookkeeping attrs.
+  const shadowable = ops.filter(isShadowableOp);
   try {
-    const sdkOps = patchOpsToSdkEditOps(hfId, ops);
+    const sdkOps = patchOpsToSdkEditOps(hfId, shadowable);
     session.batch(() => {
       for (const op of sdkOps) session.dispatch(op);
     });
@@ -169,7 +195,7 @@ export function sdkShadowDispatch(
     };
   }
   const flat = flattenSnapshot(session.getElement(hfId));
-  const mismatches = ops
+  const mismatches = shadowable
     .map((op) => checkOpParity(op, flat, hfId))
     .filter((m): m is SdkShadowMismatch => m !== null);
   return { dispatched: true, mismatches };

package/src/utils/sdkShadowGsapFidelity.ts

@@ -36,10 +36,35 @@ function extractGsapScript(html: string): string | null {
   return null;
 }
 
-function animById(script: string): Map<string, GsapAnimation> {
+function posKey(position: unknown): string {
+  if (typeof position === "number") return String(position);
+  const n = Number(position);
+  return Number.isNaN(n) ? String(position) : String(n);
+}
+
+// Key a tween by its RESOLVED target element (not raw selector) + method +
+// position. The SDK writer emits [data-hf-id="X"] selectors while the server
+// emits class/other selectors for the SAME element; keying by resolved element
+// matches them so the diff compares values instead of flagging present/absent.
+//
+// ponytail: one-tween-per-(element, method, position) assumption — coincident
+// tweens (same element+method+position, different props) collapse, last wins,
+// so the diff under-reports them. Props can't go in the key (a matched pair
+// must share a key for the field-diff to run; raw props would split real value
+// drift into present/absent). Not seen in studio-emitted templates; add a
+// property-NAME hash to the key if coincident tweens show up in the wild.
+function tweenKey(anim: GsapAnimation, resolveSelector?: (sel: string) => string): string {
+  const sel = resolveSelector ? resolveSelector(anim.targetSelector) : anim.targetSelector;
+  return `${sel}|${anim.method}|${posKey(anim.position)}`;
+}
+
+function animByKey(
+  script: string,
+  resolveSelector?: (sel: string) => string,
+): Map<string, GsapAnimation> {
   const map = new Map<string, GsapAnimation>();
   const parsed = parseGsapScriptAcorn(script);
-  for (const anim of parsed.animations) map.set(anim.id, anim);
+  for (const anim of parsed.animations) map.set(tweenKey(anim, resolveSelector), anim);
   return map;
 }
 
@@ -73,37 +98,41 @@ function canonicalProps(obj: Record<string, unknown> | undefined): string {
 }
 
 /**
- * Structurally diff two GSAP scripts by tween id. Reports a tween present in
- * one but not the other, and per-field value drift (method, position, duration,
- * ease, properties, fromProperties). Comparison is canonical (see above) so
- * writer formatting differences do not produce false mismatches.
+ * Structurally diff two GSAP scripts. Tweens are matched by resolved target
+ * element + method + position (see tweenKey), so the SDK's [data-hf-id]
+ * selectors and the server's class selectors for the same element don't
+ * false-flag present/absent. Reports a tween present in one but not the other,
+ * and per-field value drift (duration, ease, properties, fromProperties).
+ * Comparison is canonical so writer formatting differences don't register.
+ *
+ * Pass resolveSelector (selector → canonical element id) to enable the
+ * element-based matching; without it, matching falls back to raw selector.
  */
 // fallow-ignore-next-line complexity
 export function gsapFidelityMismatches(
   sdkScript: string,
   serverScript: string,
+  resolveSelector?: (sel: string) => string,
 ): SdkShadowMismatch[] {
-  const sdk = animById(sdkScript);
-  const server = animById(serverScript);
+  const sdk = animByKey(sdkScript, resolveSelector);
+  const server = animByKey(serverScript, resolveSelector);
   const mismatches: SdkShadowMismatch[] = [];
-  const ids = new Set([...sdk.keys(), ...server.keys()]);
-  for (const id of ids) {
-    const a = sdk.get(id);
-    const b = server.get(id);
+  const keys = new Set([...sdk.keys(), ...server.keys()]);
+  for (const key of keys) {
+    const a = sdk.get(key);
+    const b = server.get(key);
     if (!a || !b) {
       mismatches.push({
         kind: "value_mismatch",
-        hfId: id,
+        hfId: key,
         property: "tween",
         expected: b ? "present" : "absent",
         actual: a ? "present" : "absent",
       });
       continue;
     }
-    // [property, sdk-value, server-value, equal?]
+    // method + position are part of the key (already equal); compare values.
     const fields: Array<[string, unknown, unknown, boolean]> = [
-      ["method", a.method, b.method, a.method === b.method],
-      ["position", a.position, b.position, numericEqual(a.position, b.position)],
       ["duration", a.duration, b.duration, numericEqual(a.duration, b.duration)],
       ["ease", a.ease, b.ease, a.ease === b.ease],
       [
@@ -123,7 +152,7 @@ export function gsapFidelityMismatches(
       if (!equal) {
         mismatches.push({
           kind: "value_mismatch",
-          hfId: id,
+          hfId: key,
           property,
           expected: bv == null ? null : JSON.stringify(bv),
           actual: av == null ? null : JSON.stringify(av),
@@ -158,6 +187,33 @@ export function resolveGsapFidelityArgs(
   return { before, op: shadowGsapOp, serverScript };
 }
 
+// Resolve a CSS selector to a canonical element id (data-hf-id) using the pre-op
+// document, so tweens that target the same element via different selectors
+// ([data-hf-id="X"] vs .X) match in the fidelity diff. Falls back to the raw
+// selector when it can't resolve (DOMParser unavailable, no match, bad selector).
+//
+// ponytail: first-match heuristic — querySelector returns the FIRST match, so an
+// ambiguous selector (e.g. .x shared by two elements) may map to a different id
+// than the SDK side's [data-hf-id] target and still flag present/absent. Safe
+// for studio templates (one tween per data-hf-id); upgrade to querySelectorAll +
+// uniqueness check if ambiguous selectors appear.
+function makeSelectorResolver(html: string): (sel: string) => string {
+  let doc: Document | null = null;
+  try {
+    doc = new DOMParser().parseFromString(html, "text/html");
+  } catch {
+    doc = null;
+  }
+  return (sel) => {
+    if (!doc) return sel;
+    try {
+      return doc.querySelector(sel)?.getAttribute("data-hf-id") ?? sel;
+    } catch {
+      return sel;
+    }
+  };
+}
+
 /**
  * Shadow GSAP value fidelity: open a fresh SDK doc from the server's pre-op
  * file, apply the same tween op, serialize, and diff the SDK's GSAP script
@@ -189,7 +245,11 @@ export async function runShadowGsapFidelity(
       });
       return;
     }
-    const mismatches = gsapFidelityMismatches(sdkScript, serverScript);
+    const mismatches = gsapFidelityMismatches(
+      sdkScript,
+      serverScript,
+      makeSelectorResolver(beforeHtml),
+    );
     trackStudioEvent("sdk_shadow_dispatch", {
       op: "gsap_fidelity",
       dispatched: true,