hyperframes 0.7.21 → 0.7.23

package/dist/studio/index.js

@@ -4,6 +4,7 @@ import {
   buildDomEditStylePatchOperation,
   buildDomEditTextPatchOperation,
   collectDomEditLayerItems,
+  domEditSelectionToFacts,
   findElementForSelection,
   findElementForTimelineElement,
   getDomEditLayerKey,
@@ -17,7 +18,7 @@ import {
   resolveDomEditSelection,
   serializeDomEditTextFields,
   setCompositionSourceMap
-} from "./chunk-SBGXX7WY.js";
+} from "./chunk-AN2EWWK3.js";
 
 // src/components/nle/NLELayout.tsx
 import {
@@ -1469,6 +1470,72 @@ function generateId() {
   return `${Date.now()}-${Math.random().toString(36).slice(2)}`;
 }
 
+// src/utils/safeStorage.ts
+function safeLocalStorage() {
+  try {
+    return typeof localStorage === "undefined" ? null : localStorage;
+  } catch {
+    return null;
+  }
+}
+function safeSessionStorage() {
+  try {
+    return typeof sessionStorage === "undefined" ? null : sessionStorage;
+  } catch {
+    return null;
+  }
+}
+
+// src/telemetry/distinctId.ts
+var DISTINCT_ID_KEY = "hyperframes-studio:anonymousId";
+var LEGACY_STUDIO_ANON_ID_KEY = "hf-studio-anon-id";
+var cachedId = null;
+function getCliDistinctId() {
+  try {
+    const id = typeof window === "undefined" ? void 0 : window.__HF_CLI_DISTINCT_ID;
+    return typeof id === "string" && id.length > 0 ? id : null;
+  } catch {
+    return null;
+  }
+}
+function persist(ls, id) {
+  for (const key of [DISTINCT_ID_KEY, LEGACY_STUDIO_ANON_ID_KEY]) {
+    try {
+      ls.setItem(key, id);
+    } catch {
+    }
+  }
+}
+function resolveStudioDistinctId() {
+  if (cachedId) return cachedId;
+  const ls = safeLocalStorage();
+  const cliId = getCliDistinctId();
+  if (cliId) {
+    cachedId = cliId;
+    if (ls) persist(ls, cliId);
+    return cliId;
+  }
+  if (ls) {
+    let existing = null;
+    try {
+      existing = ls.getItem(DISTINCT_ID_KEY) ?? ls.getItem(LEGACY_STUDIO_ANON_ID_KEY);
+    } catch {
+    }
+    if (existing) {
+      cachedId = existing;
+      persist(ls, existing);
+      return existing;
+    }
+  } else {
+    cachedId = "anonymous";
+    return cachedId;
+  }
+  const id = generateId();
+  cachedId = id;
+  persist(ls, id);
+  return id;
+}
+
 // src/utils/studioTelemetry.ts
 var POSTHOG_API_KEY = "phc_zjjbX0PnWxERXrMHhkEJWj9A9BhGVLRReICgsfTMmpx";
 var POSTHOG_HOST = "https://us.i.posthog.com";
@@ -1476,23 +1543,8 @@ var FLUSH_INTERVAL_MS = 3e4;
 var FLUSH_TIMEOUT_MS = 5e3;
 var queue = [];
 var flushTimer = null;
-var distinctId = null;
 function getDistinctId() {
-  if (distinctId) return distinctId;
-  try {
-    const stored = localStorage.getItem("hf-studio-anon-id");
-    if (stored) {
-      distinctId = stored;
-      return stored;
-    }
-  } catch {
-  }
-  distinctId = generateId();
-  try {
-    localStorage.setItem("hf-studio-anon-id", distinctId);
-  } catch {
-  }
-  return distinctId;
+  return resolveStudioDistinctId();
 }
 function isEnabled() {
   try {
@@ -2824,7 +2876,7 @@ function useMusicBeatAnalysis() {
       void io.writeProjectFile(beatPath, content).catch(() => {
       });
     };
-    const persist = () => {
+    const persist2 = () => {
       const s = usePlayerStore.getState();
       const a = s.beatAnalysis;
       if (!a) return;
@@ -2836,7 +2888,7 @@ function useMusicBeatAnalysis() {
         flush2();
       }, PERSIST_DEBOUNCE_MS);
     };
-    setBeatPersist(persist);
+    setBeatPersist(persist2);
     return () => {
       if (timer) clearTimeout(timer);
       flush2();
@@ -5196,11 +5248,6 @@ var STUDIO_RAZOR_TOOL_ENABLED = resolveStudioBooleanEnvFlag(
   ["VITE_STUDIO_ENABLE_RAZOR_TOOL", "VITE_STUDIO_RAZOR_TOOL_ENABLED"],
   true
 );
-var STUDIO_STORYBOARD_ENABLED = resolveStudioBooleanEnvFlag(
-  env,
-  ["VITE_STUDIO_ENABLE_STORYBOARD", "VITE_STUDIO_STORYBOARD_ENABLED"],
-  false
-);
 var STUDIO_PREVIEW_SELECTION_ENABLED = STUDIO_INSPECTOR_PANELS_ENABLED;
 var STUDIO_SDK_CUTOVER_ENABLED = resolveStudioBooleanEnvFlag(
   env,
@@ -9473,30 +9520,10 @@ function useCompositionStack({
 }
 
 // src/telemetry/config.ts
-var ANON_ID_KEY = "hyperframes-studio:anonymousId";
 var OPT_OUT_KEY = "hyperframes-studio:telemetryDisabled";
 var NOTICE_KEY = "hyperframes-studio:telemetryNoticeShown";
-function safeLocalStorage() {
-  try {
-    return typeof localStorage === "undefined" ? null : localStorage;
-  } catch {
-    return null;
-  }
-}
-function newAnonymousId() {
-  return generateId();
-}
 function getAnonymousId() {
-  const ls = safeLocalStorage();
-  if (!ls) return "anonymous";
-  const existing = ls.getItem(ANON_ID_KEY);
-  if (existing) return existing;
-  const id = newAnonymousId();
-  try {
-    ls.setItem(ANON_ID_KEY, id);
-  } catch {
-  }
-  return id;
+  return resolveStudioDistinctId();
 }
 function isOptedOut() {
   return safeLocalStorage()?.getItem(OPT_OUT_KEY) === "1";
@@ -9511,13 +9538,6 @@ function markNoticeShown() {
   }
 }
 var SESSION_FIRED_KEY = "hyperframes-studio:sessionStartFired";
-function safeSessionStorage() {
-  try {
-    return typeof sessionStorage === "undefined" ? null : sessionStorage;
-  } catch {
-    return null;
-  }
-}
 function hasFiredSessionStart() {
   return safeSessionStorage()?.getItem(SESSION_FIRED_KEY) === "1";
 }
@@ -9612,12 +9632,12 @@ function trackEvent(event, properties = {}) {
 }
 function flush() {
   if (eventQueue.length === 0) return;
-  const distinctId2 = getAnonymousId();
+  const distinctId = getAnonymousId();
   const batch = eventQueue.map((e) => ({
     event: e.event,
     // $ip: null tells PostHog to not record the request IP.
     properties: { ...e.properties, $ip: null },
-    distinct_id: distinctId2,
+    distinct_id: distinctId,
     timestamp: e.timestamp
   }));
   eventQueue = [];
@@ -12819,14 +12839,11 @@ function createTransformCommitHandlers({
 
 // src/components/editor/PropertyPanel.tsx
 import { classifyPropertyGroup } from "@hyperframes/core/gsap-parser";
+import { resolveEditingSections } from "@hyperframes/core/editing";
 
 // src/components/editor/propertyPanelMediaSection.tsx
 import { useState as useState20 } from "react";
 import { Fragment as Fragment10, jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
-var MEDIA_TAGS = /* @__PURE__ */ new Set(["video", "audio"]);
-function isMediaElement(element) {
-  return MEDIA_TAGS.has(element.tagName);
-}
 function MediaSection({
   projectDir,
   element,
@@ -13500,9 +13517,6 @@ var DEFAULT_COLOR_GRADING = {
   colorSpace: HF_COLOR_GRADING_COLOR_SPACE
 };
 var COLOR_GRADING_DATA_KEY = HF_COLOR_GRADING_ATTR.replace(/^data-/, "");
-function isColorGradingCapableElement(element) {
-  return element.tagName === "video" || element.tagName === "img";
-}
 function readColorGradingFromElement(element) {
   const grading = normalizeHfColorGrading2(element.dataAttributes[COLOR_GRADING_DATA_KEY]) ?? DEFAULT_COLOR_GRADING;
   return { ...grading, intensity: 1 };
@@ -18711,6 +18725,7 @@ var PropertyPanel = memo22(function PropertyPanel2({
   const manualRotationEditingDisabled = !element.capabilities.canApplyManualRotation;
   const sourceLabel = element.id ? `#${element.id}` : element.selector;
   const showEditableSections = element.capabilities.canEditStyles;
+  const sections = resolveEditingSections(domEditSelectionToFacts(element, gsapAnimations.length));
   const manualOffset = readStudioPathOffset(element.element);
   const manualSize = readStudioBoxSize(element.element);
   const resolvedWidth = manualSize.width > 0 ? manualSize.width : parsePxMetricValue(styles.width ?? "") ?? element.boundingBox.width;
@@ -18833,7 +18848,7 @@ var PropertyPanel = memo22(function PropertyPanel2({
           onRemoveTextField
         }
       ),
-      (element.dataAttributes.start != null || gsapAnimations.length > 0) && // Render whenever there's an authored clip range OR animations to infer
+      sections.timing && // Render whenever there's an authored clip range OR animations to infer
       // one from — a pure-GSAP element with no data-start still gets a Timing
       // range (TimingSection derives it from its tweens).
       /* @__PURE__ */ jsx54(
@@ -18844,7 +18859,7 @@ var PropertyPanel = memo22(function PropertyPanel2({
           onSetAttribute
         }
       ),
-      isMediaElement(element) && /* @__PURE__ */ jsx54(
+      sections.media && /* @__PURE__ */ jsx54(
         MediaSection,
         {
           projectDir,
@@ -18855,7 +18870,7 @@ var PropertyPanel = memo22(function PropertyPanel2({
           onSetHtmlAttribute
         }
       ),
-      STUDIO_COLOR_GRADING_ENABLED && isColorGradingCapableElement(element) && /* @__PURE__ */ jsx54(
+      STUDIO_COLOR_GRADING_ENABLED && sections.colorGrading && /* @__PURE__ */ jsx54(
         ColorGradingSection,
         {
           element,
@@ -22337,6 +22352,9 @@ function normalizeText(v) {
   const t = v.trim();
   return t === "" ? null : t;
 }
+function countHfIdInSource(source, id) {
+  return source.split(`data-hf-id="${id}"`).length - 1 + (source.split(`data-hf-id='${id}'`).length - 1);
+}
 function resolveSnapshot(session, id) {
   const els = session.getElements();
   const exact = els.find((el) => el.scopedId === id);
@@ -22379,8 +22397,9 @@ function checkOpValue(op, el, hfId) {
   if (actual === expected) return null;
   return { kind: "value_mismatch", hfId, property, expected, actual };
 }
-function sdkResolverShadowCheck(session, hfId, ops) {
+function sdkResolverShadowCheck(session, hfId, ops, sourceContent) {
   if (!resolveSnapshot(session, hfId)) {
+    if (sourceContent !== void 0 && !sourceContent.includes(hfId)) return [];
     return [{ kind: "element_not_found", hfId }];
   }
   const shadowable = ops.filter(isShadowableOp);
@@ -22416,28 +22435,58 @@ function redactMismatches(mismatches) {
     actual: redactValue(m.actual)
   }));
 }
-function runResolverShadow(session, hfId, ops) {
+function runResolverShadow(session, hfId, ops, sourceContent) {
   if (!STUDIO_SDK_RESOLVER_SHADOW_ENABLED) return;
   if (!hfId) return;
   try {
-    const mismatches = sdkResolverShadowCheck(session, hfId, ops);
+    const mismatches = sdkResolverShadowCheck(session, hfId, ops, sourceContent);
     if (mismatches.length === 0) return;
+    const isElementNotFound = mismatches.some((m) => m.kind === "element_not_found");
     trackStudioEvent("sdk_resolver_shadow", {
       hfId,
+      // sessionElementCount > 0 + element_not_found = runtime-only element;
+      // sessionElementCount === 0 = session is empty/broken (actionable).
+      sessionElementCount: session.getElements().length,
+      // Count of data-hf-id="<id>" occurrences in source for an emitted
+      // element_not_found. >1 = duplicate ids → resolver picked the wrong
+      // instance; =1 = single static node the SDK parse dropped (foreign-content
+      // exclusion / sub-comp inlining gap); =0 = the runtime-node filter above
+      // uses a loose substring match (biased toward keeping signal) while this
+      // count uses a strict attribute match — an emitted event with count 0
+      // means hfId appeared in source as plain text (e.g. a class name, comment,
+      // or script string) but never as a data-hf-id attribute. Treat 0 as "not
+      // a genuine attribute occurrence," not as a contradiction.
+      ...isElementNotFound && sourceContent !== void 0 ? { sourceHfIdCount: countHfIdInSource(sourceContent, hfId) } : {},
       mismatchCount: mismatches.length,
       mismatches: JSON.stringify(redactMismatches(mismatches))
     });
   } catch {
   }
 }
-function recordResolverParity(session, hfId, opLabel) {
+async function recordResolverParity(session, hfId, opLabel, readSource) {
   if (!STUDIO_SDK_RESOLVER_SHADOW_ENABLED) return;
   if (!session || !hfId) return;
   try {
     if (resolveSnapshot(session, hfId)) return;
+    const sessionElementCount = session.getElements().length;
+    let source;
+    if (readSource) {
+      try {
+        source = await readSource();
+      } catch {
+        source = void 0;
+      }
+    }
+    if (source !== void 0 && !source.includes(hfId)) return;
     trackStudioEvent("sdk_resolver_shadow", {
       hfId,
       opLabel,
+      sessionElementCount,
+      // sourceHfIdCount: strict data-hf-id="..." attribute count. Can be 0 even
+      // on an emitted (non-suppressed) event — the suppression check above is a
+      // loose substring match (biased toward keeping signal); see the longer
+      // comment on this field in runResolverShadow for the full explanation.
+      ...source !== void 0 ? { sourceHfIdCount: countHfIdInSource(source, hfId) } : {},
       mismatchCount: 1,
       mismatches: JSON.stringify([
         { kind: "element_not_found", hfId }
@@ -22450,11 +22499,13 @@ function recordAnimationResolverParity(session, animationId, opLabel) {
   if (!STUDIO_SDK_RESOLVER_SHADOW_ENABLED) return;
   if (!session || !animationId) return;
   try {
-    const resolves = session.getElements().some((el) => el.animationIds.includes(animationId));
+    const elements = session.getElements();
+    const resolves = elements.some((el) => el.animationIds.includes(animationId));
     if (resolves) return;
     trackStudioEvent("sdk_resolver_shadow", {
       animationId,
       opLabel,
+      sessionElementCount: elements.length,
       mismatchCount: 1,
       mismatches: JSON.stringify([
         { kind: "animation_not_found", animationId }
@@ -22551,7 +22602,7 @@ function isSafeAttributeValue(name, value) {
   return true;
 }
 
-// src/utils/sdkCutover.ts
+// src/utils/sdkCutoverEligibility.ts
 var CUTOVER_OP_TYPES = /* @__PURE__ */ new Set([
   "inline-style",
   "text-content",
@@ -22611,6 +22662,8 @@ function shouldDeclineTextCutoverForTarget(target, ops) {
 function shouldUseSdkCutover(flagEnabled, hasSession, hfId, ops) {
   return flagEnabled && hasSession && !!hfId && ops.length > 0 && ops.every((o) => CUTOVER_OP_TYPES.has(o.type)) && !ops.some(mapsToReservedAttr) && !hasUnsafeHtmlAttributeOp(ops);
 }
+
+// src/utils/sdkCutover.ts
 async function captureOnDiskBefore(deps, targetPath, serializedFallback) {
   if (!deps.readProjectFile) return serializedFallback;
   try {
@@ -22666,7 +22719,13 @@ async function sdkCutoverPersist(selection, ops, originalContent, targetPath, sd
   }
 }
 async function sdkTimingPersist(hfId, targetPath, timingUpdate, sdkSession, deps, options) {
-  recordResolverParity(sdkSession, hfId, "setTiming");
+  const timingSrc = deps.readProjectFile;
+  void recordResolverParity(
+    sdkSession,
+    hfId,
+    "setTiming",
+    timingSrc ? () => timingSrc(targetPath) : void 0
+  );
   if (!STUDIO_SDK_CUTOVER_ENABLED) return false;
   if (!sdkSession || !sdkSession.getElement(hfId)) return false;
   if (wrongCompositionFile(deps, targetPath)) return false;
@@ -22685,8 +22744,15 @@ async function sdkTimingPersist(hfId, targetPath, timingUpdate, sdkSession, deps
   }
 }
 function sdkGsapTweenPersist(targetPath, op, sdkSession, deps, options) {
-  if (op.kind === "add") recordResolverParity(sdkSession, op.target, "addGsapTween");
-  else
+  if (op.kind === "add") {
+    const gsapSrc = deps.readProjectFile;
+    void recordResolverParity(
+      sdkSession,
+      op.target,
+      "addGsapTween",
+      gsapSrc ? () => gsapSrc(targetPath) : void 0
+    );
+  } else
     recordAnimationResolverParity(
       sdkSession,
       op.animationId,
@@ -22832,7 +22898,12 @@ function sdkReplaceWithKeyframesPersist(targetPath, animationId, targetSelector,
   );
 }
 async function sdkDeletePersist(hfId, originalContent, targetPath, sdkSession, deps) {
-  recordResolverParity(sdkSession, hfId, "removeElement");
+  void recordResolverParity(
+    sdkSession,
+    hfId,
+    "removeElement",
+    () => Promise.resolve(originalContent)
+  );
   if (!STUDIO_SDK_CUTOVER_ENABLED) return false;
   if (!sdkSession || !sdkSession.getElement(hfId)) return false;
   if (wrongCompositionFile(deps, targetPath)) return false;
@@ -29761,7 +29832,7 @@ function useDomEditSession({
   showToast,
   refreshPreviewDocumentVersion,
   queueDomEditSave,
-  readProjectFile: _readProjectFile,
+  readProjectFile,
   writeProjectFile,
   updateEditingFileContent,
   domEditSaveTimestampRef,
@@ -29785,7 +29856,6 @@ function useDomEditSession({
   forceReloadSdkSession
 }) {
   void _setRefreshKey;
-  void _readProjectFile;
   const {
     domEditSelection,
     domEditGroupSelections,
@@ -29916,7 +29986,7 @@ function useDomEditSession({
     buildDomSelectionFromTarget,
     forceReloadSdkSession,
     onTrySdkPersist: sdkSession ? (selection, operations, originalContent, targetPath, options) => {
-      runResolverShadow(sdkSession, selection.hfId, operations);
+      runResolverShadow(sdkSession, selection.hfId, operations, originalContent);
       return sdkCutoverPersist(
         selection,
         operations,
@@ -29944,7 +30014,9 @@ function useDomEditSession({
     // SDK persist), but the tripwire is decoupled from cutover — record whether
     // the SDK resolves each reordered element (the reorderElements op's targets).
     onReorderShadow: sdkSession ? (targets) => {
-      for (const target of targets) recordResolverParity(sdkSession, target, "reorderElements");
+      const reorderSrc = activeCompPath ? () => readProjectFile(activeCompPath) : void 0;
+      for (const target of targets)
+        void recordResolverParity(sdkSession, target, "reorderElements", reorderSrc);
     } : void 0
   });
   const { groupSelection, ungroupSelection } = useGroupCommits({
@@ -32559,26 +32631,18 @@ function writeViewModeToUrl(mode) {
   }
   window.history.replaceState(window.history.state, "", url);
 }
-function useViewModeState(enabled) {
-  const [viewMode, setMode] = useState58(
-    () => enabled ? readViewModeFromUrl() : "timeline"
-  );
+function useViewModeState() {
+  const [viewMode, setMode] = useState58(() => readViewModeFromUrl());
   useEffect44(() => {
-    if (!enabled) return;
     const onPopState = () => setMode(readViewModeFromUrl());
     window.addEventListener("popstate", onPopState);
     return () => window.removeEventListener("popstate", onPopState);
-  }, [enabled]);
-  const setViewMode = useCallback77(
-    (mode) => {
-      if (!enabled) return;
-      setMode(mode);
-      writeViewModeToUrl(mode);
-    },
-    [enabled]
-  );
-  const effectiveMode = enabled ? viewMode : "timeline";
-  return useMemo27(() => ({ viewMode: effectiveMode, setViewMode }), [effectiveMode, setViewMode]);
+  }, []);
+  const setViewMode = useCallback77((mode) => {
+    setMode(mode);
+    writeViewModeToUrl(mode);
+  }, []);
+  return useMemo27(() => ({ viewMode, setViewMode }), [viewMode, setViewMode]);
 }
 var ViewModeContext = createContext5(null);
 function useViewMode() {
@@ -32828,7 +32892,7 @@ function StudioHeader({
       /* @__PURE__ */ jsx67("span", { className: "text-neutral-700 select-none", "aria-hidden": "true", children: "|" }),
       /* @__PURE__ */ jsx67("span", { className: "text-[11px] font-medium text-neutral-300", children: projectId })
     ] }),
-    STUDIO_STORYBOARD_ENABLED && /* @__PURE__ */ jsx67(ViewModeToggle, {}),
+    /* @__PURE__ */ jsx67(ViewModeToggle, {}),
     /* @__PURE__ */ jsxs56("div", { className: "flex items-center gap-1.5", children: [
       /* @__PURE__ */ jsx67(
         "button",
@@ -36957,7 +37021,7 @@ function OffCanvasIndicators({
     const selectOffCanvas = async () => {
       const el = elements.current.get(r.key);
       if (!el) return;
-      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-VZMLL4AP.js");
+      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-EK7R7R4G.js");
       const acp = activeCompositionPathRef.current ?? "index.html";
       const sel = await resolveDomEditSelection2(el, {
         activeCompositionPath: acp,
@@ -42664,9 +42728,9 @@ function makeSlideshowNotesController() {
     });
   };
   return {
-    schedule(manifest, persist, delayMs) {
+    schedule(manifest, persist2, delayMs) {
       if (timer !== null) clearTimeout(timer);
-      pending = { manifest, persist };
+      pending = { manifest, persist: persist2 };
       timer = setTimeout(() => {
         timer = null;
         drainPending();
@@ -44757,7 +44821,7 @@ import { jsx as jsx113, jsxs as jsxs96 } from "react/jsx-runtime";
 function StudioApp() {
   const { projectId, resolving, waitingForServer } = useServerConnection();
   const initialUrlStateRef = useRef90(readStudioUrlStateFromWindow());
-  const viewModeValue = useViewModeState(STUDIO_STORYBOARD_ENABLED);
+  const viewModeValue = useViewModeState();
   useEffect67(() => {
     if (resolving || waitingForServer) return;
     if (hasFiredSessionStart()) return;