hyperframes 0.7.45 → 0.7.47

package/dist/studio/assets/{index-CbQKp0Ek.js → index-uvB30_yI.js}

@@ -1,4 +1,4 @@
-import{n as Qi}from"./index-CZUbpYhQ.js";/*!
+import{n as Qi}from"./index-VsAbY3rl.js";/*!
  * Copyright (c) 2026-present, Vanilagy and contributors
  *
  * This Source Code Form is subject to the terms of the Mozilla Public

package/dist/studio/index.d.ts

@@ -52,9 +52,12 @@ interface ClipManifestClip {
     start: number;
     duration: number;
     track: number;
+    zIndex?: number;
+    stackingContextId?: string | null;
     kind: "video" | "audio" | "image" | "element" | "composition";
     tagName: string | null;
     compositionId: string | null;
+    compositionAncestors?: string[];
     parentCompositionId: string | null;
     compositionSrc: string | null;
     assetUrl: string | null;
@@ -83,6 +86,16 @@ interface TimelineElement {
     start: number;
     duration: number;
     track: number;
+    /** Resolved z-index for stacking-aware timeline ordering. */
+    zIndex?: number;
+    /** True when the effective z-index was authored inline or through CSS, not auto. */
+    hasExplicitZIndex?: boolean;
+    /** Stacking context this element belongs to; root clips use the root composition id. */
+    stackingContextId?: string | null;
+    /** Nearest parent composition context, matching RuntimeTimelineClip. */
+    parentCompositionId?: string | null;
+    /** Composition ancestry from root to nearest parent, matching RuntimeTimelineClip. */
+    compositionAncestors?: string[];
     domId?: string;
     /** Stable `data-hf-id` attribute value — used as primary patch target when present */
     hfId?: string;
@@ -164,8 +177,10 @@ interface PlayerState {
     setAutoKeyframeEnabled: (enabled: boolean) => void;
     /** Multi-select: additional selected elements beyond selectedElementId. */
     selectedElementIds: Set<string>;
+    setSelection: (ids: Iterable<string>, anchor?: string | null) => void;
+    addSelectedElementId: (id: string) => void;
     toggleSelectedElementId: (id: string) => void;
-    clearSelectedElementIds: () => void;
+    clearSelection: () => void;
     /** Keyframe data per element id, populated from parsed GSAP animations. */
     keyframeCache: Map<string, KeyframeCacheEntry>;
     setKeyframeCache: (elementId: string, data: KeyframeCacheEntry | undefined) => void;
@@ -179,7 +194,9 @@ interface PlayerState {
     setBeatDragging: (dragging: boolean) => void;
     setElements: (elements: TimelineElement[]) => void;
     setSelectedElementId: (id: string | null) => void;
-    updateElement: (elementId: string, updates: Partial<Pick<TimelineElement, "start" | "duration" | "track" | "playbackStart" | "hidden">>) => void;
+    /** Move the selection anchor within an active multi-selection without collapsing it. */
+    setSelectionAnchor: (id: string | null) => void;
+    updateElement: (elementId: string, updates: Partial<Pick<TimelineElement, "start" | "duration" | "track" | "zIndex" | "hasExplicitZIndex" | "playbackStart" | "hidden">>) => void;
     setZoomMode: (mode: ZoomMode) => void;
     setManualZoomPercent: (percent: number) => void;
     setInPoint: (time: number | null) => void;
@@ -247,8 +264,77 @@ declare const liveTime: {
 };
 declare const usePlayerStore: zustand.UseBoundStore<zustand.StoreApi<PlayerState>>;
 
+type TimelineLayerDropPlacement = {
+    type: "onto";
+    layerId: string;
+} | {
+    type: "between";
+    beforeLayerId: string;
+    afterLayerId: string;
+} | {
+    type: "above";
+    layerId: string;
+} | {
+    type: "below";
+    layerId: string;
+};
+interface TimelineStackingZIndexChange {
+    key: string;
+    zIndex: number;
+    domId?: string;
+    selector?: string;
+    selectorIndex?: number;
+    sourceFile?: string;
+}
+interface TimelineStackingReorderIntent {
+    contextKey: string;
+    placement: TimelineLayerDropPlacement;
+    zIndexChanges: TimelineStackingZIndexChange[];
+}
+
 type BlockedTimelineEditIntent = "move" | "resize-start" | "resize-end";
 
+/**
+ * Source Patcher — Maps visual property edits back to source HTML files.
+ * Handles inline style updates, attribute changes, and text content.
+ */
+interface PatchOperation {
+    type: "inline-style" | "attribute" | "text-content" | "html-attribute";
+    property: string;
+    value: string | null;
+    childSelector?: string;
+    childIndex?: number;
+}
+interface PatchTarget {
+    id?: string | null;
+    hfId?: string;
+    selector?: string;
+    selectorIndex?: number;
+}
+/**
+ * Find which source file contains an element by its ID.
+ */
+declare function resolveSourceFile(elementId: string | null, selector: string, files: Record<string, string>): string | null;
+/**
+ * Apply a patch operation to an HTML source file.
+ */
+declare function applyPatch(html: string, elementId: string, op: PatchOperation): string;
+
+interface TimelineGroupMoveChange {
+    element: TimelineElement;
+    start: number;
+}
+interface TimelineGroupResizeChange {
+    element: TimelineElement;
+    start: number;
+    duration: number;
+    playbackStart?: number;
+}
+interface TimelineGroupCommitOptions {
+    beforeTiming?: Promise<void>;
+    coalesceKey?: string;
+}
+
 /**
  * Shared callback signatures for timeline editing operations.
  * Used by NLELayout, Timeline, and any component that passes through
@@ -269,9 +355,16 @@ interface TimelineDropCallbacks {
     }) => Promise<void> | void;
 }
 interface TimelineEditCallbacks {
-    onMoveElement?: (element: TimelineElement, updates: Pick<TimelineElement, "start" | "track">) => Promise<void> | void;
+    onMoveElement?: (element: TimelineElement, updates: Pick<TimelineElement, "start" | "track"> & {
+        stackingReorder?: TimelineStackingReorderIntent | null;
+    }) => Promise<void> | void;
     onResizeElement?: (element: TimelineElement, updates: Pick<TimelineElement, "start" | "duration" | "playbackStart">) => Promise<void> | void;
+    onMoveElements?: (changes: TimelineGroupMoveChange[], options?: TimelineGroupCommitOptions) => Promise<void> | void;
+    onResizeElements?: (changes: TimelineGroupResizeChange[], options?: TimelineGroupCommitOptions) => Promise<void> | void;
+    onPreviewMoveElements?: (changes: TimelineGroupMoveChange[]) => void;
+    onPreviewResizeElements?: (changes: TimelineGroupResizeChange[]) => void;
     onToggleTrackHidden?: (track: number, hidden: boolean) => Promise<void> | void;
+    onToggleElementHidden?: (elementKey: string, hidden: boolean) => Promise<void> | void;
     onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
     onSplitElement?: (element: TimelineElement, splitTime: number) => Promise<void> | void;
     onRazorSplit?: (element: TimelineElement, splitTime: number) => Promise<void> | void;
@@ -490,32 +583,6 @@ interface SourceEditorProps {
 }
 declare const SourceEditor: react.NamedExoticComponent<SourceEditorProps>;
 
-/**
- * Source Patcher — Maps visual property edits back to source HTML files.
- * Handles inline style updates, attribute changes, and text content.
- */
-interface PatchOperation {
-    type: "inline-style" | "attribute" | "text-content" | "html-attribute";
-    property: string;
-    value: string | null;
-    childSelector?: string;
-    childIndex?: number;
-}
-interface PatchTarget {
-    id?: string | null;
-    hfId?: string;
-    selector?: string;
-    selectorIndex?: number;
-}
-/**
- * Find which source file contains an element by its ID.
- */
-declare function resolveSourceFile(elementId: string | null, selector: string, files: Record<string, string>): string | null;
-/**
- * Apply a patch operation to an HTML source file.
- */
-declare function applyPatch(html: string, elementId: string, op: PatchOperation): string;
-
 interface DomEditCapabilities {
     canSelect: boolean;
     canEditStyles: boolean;

package/dist/studio/index.html

@@ -5,8 +5,8 @@
     <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-CZUbpYhQ.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DoVLXke0.css">
+    <script type="module" crossorigin src="/assets/index-VsAbY3rl.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-Dq7FEg0K.css">
   </head>
   <body>
     <div data-hf-id="hf-aph5" id="root"></div>