hyperframes 0.7.21 → 0.7.22

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 {
@@ -5196,11 +5197,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,
@@ -12819,14 +12815,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 +13493,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 +18701,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 +18824,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 +18835,7 @@ var PropertyPanel = memo22(function PropertyPanel2({
           onSetAttribute
         }
       ),
-      isMediaElement(element) && /* @__PURE__ */ jsx54(
+      sections.media && /* @__PURE__ */ jsx54(
         MediaSection,
         {
           projectDir,
@@ -18855,7 +18846,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 +22328,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 +22373,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,14 +22411,24 @@ 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 (the runtime-node filter already dropped absent-from-
+      // source ids, so an emitted one is in source ≥1×). >1 = duplicate ids →
+      // resolver picked the wrong instance; =1 = single static node the SDK
+      // parse dropped (foreign-content exclusion / sub-comp inlining gap).
+      ...isElementNotFound && sourceContent !== void 0 ? { sourceHfIdCount: countHfIdInSource(sourceContent, hfId) } : {},
       mismatchCount: mismatches.length,
       mismatches: JSON.stringify(redactMismatches(mismatches))
     });
@@ -22438,6 +22443,7 @@ function recordResolverParity(session, hfId, opLabel) {
     trackStudioEvent("sdk_resolver_shadow", {
       hfId,
       opLabel,
+      sessionElementCount: session.getElements().length,
       mismatchCount: 1,
       mismatches: JSON.stringify([
         { kind: "element_not_found", hfId }
@@ -22450,11 +22456,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 }
@@ -29916,7 +29924,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,
@@ -32559,26 +32567,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 +32828,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 +36957,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,
@@ -44757,7 +44757,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;