@hyperframes/studio 0.7.57 → 0.7.58

package/src/components/editor/domEditingDom.ts

@@ -4,6 +4,7 @@
  * No imports from other domEditing* modules — safe to import from anywhere.
  */
 import { COLOR_GRADING_SOURCE_HIDDEN_ATTR } from "@hyperframes/core/color-grading";
+import { getSourceScopedSelectorIndex } from "../../utils/sourceScopedSelectorIndex";
 import { CURATED_STYLE_PROPERTIES } from "./domEditingTypes";
 
 // ─── Type guard ───────────────────────────────────────────────────────────────
@@ -296,11 +297,9 @@ export function getSelectorIndex(
 ): number | undefined {
   if (!selector?.startsWith(".")) return undefined;
 
-  const candidates = querySelectorAllSafely(doc, selector).filter(
-    (candidate): candidate is HTMLElement =>
-      isHtmlElement(candidate) &&
-      getSourceFileForElement(candidate, activeCompositionPath).sourceFile === sourceFile,
+  return getSourceScopedSelectorIndex(doc, el, selector, sourceFile, (candidate) =>
+    isHtmlElement(candidate)
+      ? getSourceFileForElement(candidate, activeCompositionPath).sourceFile
+      : undefined,
   );
-  const index = candidates.indexOf(el);
-  return index >= 0 ? index : undefined;
 }

package/src/components/editor/domEditingElement.ts

@@ -246,45 +246,28 @@ export function findElementForSelection(
   selection: FindElementSelection,
   activeCompositionPath: string | null = null,
 ): HTMLElement | null {
+  const sourceMatches = (candidate: Element): candidate is HTMLElement =>
+    isHtmlElement(candidate) &&
+    (!selection.sourceFile ||
+      getSourceFileForElement(candidate, activeCompositionPath).sourceFile ===
+        selection.sourceFile);
+  const findAll = (selector: string): HTMLElement[] =>
+    querySelectorAllSafely(doc, selector).filter(sourceMatches);
+
   if (selection.hfId) {
-    const byHfId = doc.querySelector(`[data-hf-id="${CSS.escape(selection.hfId)}"]`);
-    if (isHtmlElement(byHfId)) return byHfId;
+    const byHfId = findAll(`[data-hf-id="${escapeCssString(selection.hfId)}"]`)[0];
+    if (byHfId) return byHfId;
   }
 
   if (selection.id) {
-    const byId = doc.getElementById(selection.id);
-    if (
-      isHtmlElement(byId) &&
-      (!selection.sourceFile ||
-        getSourceFileForElement(byId, activeCompositionPath).sourceFile === selection.sourceFile)
-    ) {
-      return byId;
-    }
+    // Flattened sub-compositions can repeat authored ids. getElementById returns
+    // only the first document match, so filter every id match by source first.
+    const byId = findAll(`[id="${escapeCssString(selection.id)}"]`)[0];
+    if (byId) return byId;
   }
 
   if (!selection.selector) return null;
-
-  // fallow-ignore-next-line code-duplication
-  if (selection.selector.startsWith(".") && selection.selectorIndex != null) {
-    const matches = querySelectorAllSafely(doc, selection.selector).filter(
-      (candidate): candidate is HTMLElement =>
-        isHtmlElement(candidate) &&
-        (!selection.sourceFile ||
-          getSourceFileForElement(candidate, activeCompositionPath).sourceFile ===
-            selection.sourceFile),
-    );
-    return matches[selection.selectorIndex] ?? null;
-  }
-
-  // fallow-ignore-next-line code-duplication
-  const matches = querySelectorAllSafely(doc, selection.selector).filter(
-    (candidate): candidate is HTMLElement =>
-      isHtmlElement(candidate) &&
-      (!selection.sourceFile ||
-        getSourceFileForElement(candidate, activeCompositionPath).sourceFile ===
-          selection.sourceFile),
-  );
-  return matches[0] ?? null;
+  return findAll(selection.selector)[selection.selectorIndex ?? 0] ?? null;
 }
 
 // fallow-ignore-next-line complexity

package/src/components/editor/layersPanelSort.ts

@@ -0,0 +1,80 @@
+import type { DomEditLayerItem } from "./domEditingTypes";
+import { getElementZIndex } from "../../player/lib/layerOrdering";
+
+interface CollapsedState {
+  [key: string]: boolean;
+}
+
+// ── Pure helpers ──────────────────────────────────────────────────────
+
+// fallow-ignore-next-line complexity
+export function sortLayersByZIndex(layers: DomEditLayerItem[]): DomEditLayerItem[] {
+  if (layers.length <= 1) return layers;
+
+  const minDepth = layers[0].depth;
+  for (let i = 1; i < layers.length; i++) {
+    if (layers[i].depth < minDepth) return layers;
+  }
+
+  const chunks: Array<{ root: DomEditLayerItem; children: DomEditLayerItem[]; domIndex: number }> =
+    [];
+
+  for (let i = 0; i < layers.length; i++) {
+    if (layers[i].depth === minDepth) {
+      const children: DomEditLayerItem[] = [];
+      let j = i + 1;
+      while (j < layers.length && layers[j].depth > minDepth) {
+        children.push(layers[j]);
+        j++;
+      }
+      chunks.push({ root: layers[i], children, domIndex: chunks.length });
+    }
+  }
+
+  if (chunks.length <= 1) {
+    if (chunks.length === 1 && chunks[0].children.length > 0) {
+      const sorted = sortLayersByZIndex(chunks[0].children);
+      return [chunks[0].root, ...sorted];
+    }
+    return layers;
+  }
+
+  chunks.sort((a, b) => {
+    const zA = getElementZIndex(a.root.element);
+    const zB = getElementZIndex(b.root.element);
+    if (zA !== zB) return zB - zA;
+    return b.domIndex - a.domIndex;
+  });
+
+  const result: DomEditLayerItem[] = [];
+  for (const chunk of chunks) {
+    result.push(chunk.root);
+    if (chunk.children.length > 0) {
+      result.push(...sortLayersByZIndex(chunk.children));
+    }
+  }
+  return result;
+}
+
+export function getVisibleLayers(
+  layers: DomEditLayerItem[],
+  collapsed: CollapsedState,
+): DomEditLayerItem[] {
+  if (Object.keys(collapsed).length === 0) return layers;
+
+  const result: DomEditLayerItem[] = [];
+  let skipDepth = -1;
+
+  for (const layer of layers) {
+    if (skipDepth >= 0 && layer.depth > skipDepth) continue;
+    skipDepth = -1;
+
+    result.push(layer);
+
+    if (collapsed[layer.key] && layer.childCount > 0) {
+      skipDepth = layer.depth;
+    }
+  }
+
+  return result;
+}

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

@@ -0,0 +1,169 @@
+// @vitest-environment jsdom
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  LAYER_REVEAL_LIFT_Z,
+  LAYER_REVEAL_PENDING_COMMIT_ATTR,
+  beginLayerRevealCommit,
+  completeLayerRevealCommit,
+  liftElementToTop,
+  restoreLiftedElement,
+  useLayerRevealOverride,
+} from "./useLayerRevealOverride";
+import { readEffectiveZIndex } from "./canvasContextMenuZOrder";
+import { getElementZIndex } from "../../player/lib/layerOrdering";
+import {
+  LAYER_REVEAL_PRIOR_Z_ATTR,
+  readTimelineElementZIndex,
+} from "../../player/lib/timelineElementHelpers";
+import { installReactActEnvironment } from "../../hooks/domSelectionTestHarness";
+
+installReactActEnvironment();
+
+function makeEl(zIndex?: string, position?: string): HTMLElement {
+  const el = document.createElement("div");
+  if (zIndex != null) el.style.zIndex = zIndex;
+  if (position != null) el.style.position = position;
+  document.body.appendChild(el);
+  return el;
+}
+
+describe("liftElementToTop / restoreLiftedElement", () => {
+  it("paints on top but every z reader keeps reporting the TRUE z", () => {
+    const el = makeEl("6", "absolute");
+    const lift = liftElementToTop(el);
+    expect(lift).not.toBeNull();
+    // The renderer sees the lifted value…
+    expect(el.style.zIndex).toBe(LAYER_REVEAL_LIFT_Z);
+    // …every studio reader sees the true z.
+    expect(readEffectiveZIndex(el)).toBe(6);
+    expect(getElementZIndex(el)).toBe(6);
+    expect(readTimelineElementZIndex(el)).toBe(6);
+
+    restoreLiftedElement(el, lift!);
+    expect(el.style.zIndex).toBe("6");
+    expect(el.hasAttribute(LAYER_REVEAL_PRIOR_Z_ATTR)).toBe(false);
+  });
+
+  it("gives a static element a temporary position:relative and restores it", () => {
+    const el = makeEl();
+    const lift = liftElementToTop(el)!;
+    expect(el.style.position).toBe("relative");
+    expect(lift.positionLifted).toBe(true);
+    restoreLiftedElement(el, lift);
+    expect(el.style.position).toBe("");
+    expect(el.style.zIndex).toBe("");
+  });
+
+  it("a z-reorder commit consumes the lift: restore becomes a no-op", () => {
+    const el = makeEl("3", "absolute");
+    const lift = liftElementToTop(el)!;
+    // Simulate handleDomZIndexReorderCommit: real z written, attrs removed.
+    el.removeAttribute(LAYER_REVEAL_PRIOR_Z_ATTR);
+    el.style.zIndex = "8";
+    restoreLiftedElement(el, lift);
+    expect(el.style.zIndex).toBe("8"); // the commit's value survives
+    expect(readEffectiveZIndex(el)).toBe(8);
+  });
+
+  it("durable z persistence consumes its pending reveal ownership", () => {
+    const el = makeEl("3", "absolute");
+    const lift = liftElementToTop(el)!;
+    const ownership = beginLayerRevealCommit(el)!;
+    el.style.zIndex = "8";
+
+    expect(el.hasAttribute(LAYER_REVEAL_PENDING_COMMIT_ATTR)).toBe(true);
+    completeLayerRevealCommit(el, ownership);
+    restoreLiftedElement(el, lift);
+
+    expect(el.style.zIndex).toBe("8");
+    expect(el.hasAttribute(LAYER_REVEAL_PENDING_COMMIT_ATTR)).toBe(false);
+    expect(el.hasAttribute(LAYER_REVEAL_PRIOR_Z_ATTR)).toBe(false);
+  });
+
+  it("does not clobber a z someone else wrote while lifted", () => {
+    const el = makeEl("3", "absolute");
+    const lift = liftElementToTop(el)!;
+    el.style.zIndex = "42"; // e.g. a GSAP seek or manual edit
+    restoreLiftedElement(el, lift);
+    expect(el.style.zIndex).toBe("42");
+  });
+});
+
+describe("useLayerRevealOverride — delayed reveal ownership", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    document.body.innerHTML = "";
+  });
+
+  it("cancels a pending reveal when selection changes or playback begins", () => {
+    const host = document.createElement("div");
+    const selected = makeEl("2", "absolute");
+    const other = makeEl("3", "absolute");
+    document.body.appendChild(host);
+    const root = createRoot(host);
+    let scheduleReveal: ((element: HTMLElement, delayMs: number) => void) | undefined;
+
+    function Harness({ element, isPlaying }: { element: HTMLElement; isPlaying: boolean }) {
+      ({ scheduleReveal } = useLayerRevealOverride({
+        isPlaying,
+        selectedElement: element,
+      }));
+      return null;
+    }
+
+    act(() => {
+      root.render(React.createElement(Harness, { element: selected, isPlaying: false }));
+    });
+    act(() => scheduleReveal!(selected, 150));
+    expect(vi.getTimerCount()).toBe(1);
+
+    act(() => {
+      root.render(React.createElement(Harness, { element: other, isPlaying: false }));
+    });
+    expect(vi.getTimerCount()).toBe(0);
+
+    act(() => scheduleReveal!(other, 150));
+    expect(vi.getTimerCount()).toBe(1);
+    act(() => {
+      root.render(React.createElement(Harness, { element: other, isPlaying: true }));
+    });
+    expect(vi.getTimerCount()).toBe(0);
+
+    act(() => vi.advanceTimersByTime(150));
+    expect(selected.style.zIndex).toBe("2");
+    expect(other.style.zIndex).toBe("3");
+    act(() => root.unmount());
+  });
+
+  it("revalidates the current selection before a delayed reveal runs", () => {
+    const host = document.createElement("div");
+    const selected = makeEl("2", "absolute");
+    const stale = makeEl("3", "absolute");
+    document.body.appendChild(host);
+    const root = createRoot(host);
+    let scheduleReveal: ((element: HTMLElement, delayMs: number) => void) | undefined;
+
+    function Harness() {
+      ({ scheduleReveal } = useLayerRevealOverride({
+        isPlaying: false,
+        selectedElement: selected,
+      }));
+      return null;
+    }
+
+    act(() => root.render(React.createElement(Harness)));
+    act(() => scheduleReveal!(stale, 150));
+    expect(vi.getTimerCount()).toBe(1);
+    act(() => vi.advanceTimersByTime(150));
+
+    expect(stale.style.zIndex).toBe("3");
+    expect(stale.hasAttribute(LAYER_REVEAL_PRIOR_Z_ATTR)).toBe(false);
+    act(() => root.unmount());
+  });
+});