@aura3d/editor-runtime 1.0.6 → 1.1.0

package/src/TimelineUI.ts

@@ -0,0 +1,153 @@
+import { TimelineEditorController, type TimelineEditorSnapshot } from "./TimelineEditorController";
+
+export interface TimelineUIOptions {
+  readonly document?: Document;
+  readonly className?: string;
+  readonly onRender?: (snapshot: TimelineEditorSnapshot) => void;
+}
+
+export interface TimelineUIRenderResult {
+  readonly root: HTMLElement;
+  readonly snapshot: TimelineEditorSnapshot;
+  dispose(): void;
+  render(): TimelineUIRenderResult;
+}
+
+export class TimelineUI {
+  private readonly documentRef: Document;
+  private readonly listeners: (() => void)[] = [];
+
+  constructor(
+    private readonly controller: TimelineEditorController,
+    private readonly container: HTMLElement,
+    private readonly options: TimelineUIOptions = {}
+  ) {
+    this.documentRef = options.document ?? container.ownerDocument;
+  }
+
+  render(): TimelineUIRenderResult {
+    this.dispose();
+    const snapshot = this.controller.snapshot();
+    this.container.replaceChildren();
+    this.container.className = this.options.className ?? "aura-timeline";
+    this.container.tabIndex = this.container.tabIndex >= 0 ? this.container.tabIndex : 0;
+
+    const toolbar = this.el("div", "aura-timeline__toolbar");
+    toolbar.append(
+      this.button("Play", () => {
+        this.controller.togglePlayback();
+        this.render();
+      }),
+      this.button("Start", () => {
+        this.controller.scrubTo(0);
+        this.render();
+      }),
+      this.button("End", () => {
+        this.controller.scrubTo(this.controller.timeline.duration);
+        this.render();
+      })
+    );
+
+    const ruler = this.el("div", "aura-timeline__ruler");
+    const durationPixels = Math.max(1, this.controller.timeline.duration * snapshot.zoomPixelsPerSecond);
+    ruler.style.width = `${durationPixels}px`;
+    ruler.append(this.marker("playhead", this.controller.timeline.currentTime));
+    for (let second = 0; second <= Math.ceil(this.controller.timeline.duration); second += 1) {
+      const tick = this.marker("tick", second);
+      tick.textContent = `${second}s`;
+      ruler.append(tick);
+    }
+
+    const tracks = this.el("div", "aura-timeline__tracks");
+    for (const track of this.controller.timeline.tracks) {
+      const trackSnapshot = snapshot.tracks.find((candidate) => candidate.id === track.id);
+      const lane = this.el("div", "aura-timeline__track");
+      lane.dataset.trackId = track.id;
+      lane.dataset.trackKind = trackSnapshot?.kind ?? "generic";
+      lane.dataset.waveform = String(trackSnapshot?.kind === "dialogue" || trackSnapshot?.kind === "audio" || trackSnapshot?.kind === "sfx" || trackSnapshot?.kind === "viseme");
+      lane.style.minHeight = `${trackSnapshot?.laneHeight ?? 32}px`;
+      const label = this.el("div", "aura-timeline__track-label");
+      label.textContent = track.name;
+      const clips = this.el("div", "aura-timeline__clips");
+      clips.style.width = `${durationPixels}px`;
+      for (const clip of track.clips) {
+        const clipEl = this.el("button", "aura-timeline__clip") as HTMLButtonElement;
+        clipEl.type = "button";
+        clipEl.dataset.clipId = clip.id;
+        clipEl.textContent = clip.name;
+        clipEl.style.left = `${clip.startTime * snapshot.zoomPixelsPerSecond}px`;
+        clipEl.style.width = `${Math.max(8, clip.duration * snapshot.zoomPixelsPerSecond)}px`;
+        clipEl.style.background = trackSnapshot?.color ?? "#334155";
+        if (snapshot.selectedIds.includes(clip.id)) clipEl.dataset.selected = "true";
+        const click = (event: MouseEvent): void => {
+          if (trackSnapshot?.kind === "shot") {
+            this.controller.jumpToShot(clip.id);
+          }
+          this.controller.selectClip(clip.id, event.shiftKey);
+          this.render();
+        };
+        clipEl.addEventListener("click", click);
+        this.listeners.push(() => clipEl.removeEventListener("click", click));
+        clips.append(clipEl);
+      }
+      lane.append(label, clips);
+      tracks.append(lane);
+    }
+
+    const minimap = this.el("div", "aura-timeline__minimap");
+    minimap.style.setProperty("--aura-timeline-duration-px", `${durationPixels}px`);
+    minimap.textContent = `${snapshot.timeline.clipCount} clips`;
+
+    const keydown = (event: KeyboardEvent): void => {
+      if (this.controller.handleKeyboardShortcut(event.key)) {
+        event.preventDefault();
+        this.render();
+      }
+    };
+    this.container.addEventListener("keydown", keydown);
+    this.listeners.push(() => this.container.removeEventListener("keydown", keydown));
+
+    this.container.append(toolbar, ruler, tracks, minimap);
+    this.options.onRender?.(snapshot);
+    return {
+      root: this.container,
+      snapshot,
+      dispose: () => this.dispose(),
+      render: () => this.render()
+    };
+  }
+
+  dispose(): void {
+    for (const dispose of this.listeners.splice(0)) dispose();
+  }
+
+  private button(label: string, onClick: () => void): HTMLButtonElement {
+    const button = this.el("button", "aura-timeline__button") as HTMLButtonElement;
+    button.type = "button";
+    button.textContent = label;
+    button.addEventListener("click", onClick);
+    this.listeners.push(() => button.removeEventListener("click", onClick));
+    return button;
+  }
+
+  private marker(kind: string, time: number): HTMLElement {
+    const marker = this.el("div", `aura-timeline__${kind}`);
+    marker.style.left = `${time * this.controller.zoomPixelsPerSecond}px`;
+    marker.dataset.time = String(time);
+    return marker;
+  }
+
+  private el(tagName: string, className: string): HTMLElement {
+    const element = this.documentRef.createElement(tagName);
+    element.className = className;
+    return element;
+  }
+}
+
+export function renderTimelineUI(
+  controller: TimelineEditorController,
+  container: HTMLElement,
+  options: TimelineUIOptions = {}
+): TimelineUIRenderResult {
+  return new TimelineUI(controller, container, options).render();
+}

package/src/VisualReviewDashboard.ts

@@ -0,0 +1,87 @@
+import type {
+  EpisodeReviewManualVisemeEdit,
+  EpisodeReviewNote,
+  EpisodeReviewPanelSnapshot,
+  EpisodeReviewRejectedFrame,
+  EpisodeReviewWaveformLane
+} from "./EpisodeReviewPanel";
+
+export interface VisualReviewDashboardPackage {
+  readonly packageId: string;
+  readonly status: EpisodeReviewPanelSnapshot["status"];
+  readonly failedFrameCount: number;
+  readonly noteCount: number;
+  readonly waveformLaneCount: number;
+  readonly manualVisemeEditCount: number;
+  readonly approvalBlocked: boolean;
+}
+
+export interface VisualReviewDashboardSnapshot {
+  readonly kind: "visual-review-dashboard";
+  readonly packageCount: number;
+  readonly packages: readonly VisualReviewDashboardPackage[];
+  readonly failedFrames: readonly (EpisodeReviewRejectedFrame & { readonly packageId: string })[];
+  readonly reviewerNotes: readonly (EpisodeReviewNote & { readonly packageId: string })[];
+  readonly waveformLanes: readonly (EpisodeReviewWaveformLane & { readonly packageId: string })[];
+  readonly manualVisemeEdits: readonly (EpisodeReviewManualVisemeEdit & { readonly packageId: string })[];
+  readonly approvalBlockedPackageIds: readonly string[];
+  readonly evidence: {
+    readonly listsFailedFrames: boolean;
+    readonly listsReviewerNotes: boolean;
+    readonly waveformReview: boolean;
+    readonly manualVisemeEdits: boolean;
+    readonly approvalBlocking: boolean;
+  };
+}
+
+export class VisualReviewDashboard {
+  private reviews: readonly EpisodeReviewPanelSnapshot[];
+
+  constructor(reviews: readonly EpisodeReviewPanelSnapshot[]) {
+    this.reviews = reviews.map((review) => ({ ...review }));
+  }
+
+  setReviews(reviews: readonly EpisodeReviewPanelSnapshot[]): VisualReviewDashboardSnapshot {
+    this.reviews = reviews.map((review) => ({ ...review }));
+    return this.snapshot();
+  }
+
+  snapshot(): VisualReviewDashboardSnapshot {
+    const packages = this.reviews.map((review) => ({
+      packageId: review.packageId,
+      status: review.status,
+      failedFrameCount: review.rejectedFrameCount,
+      noteCount: review.noteCount,
+      waveformLaneCount: review.waveformLaneCount,
+      manualVisemeEditCount: review.manualVisemeEditCount,
+      approvalBlocked: review.rejectedFrameCount > 0
+    }));
+    const failedFrames = this.reviews.flatMap((review) => review.rejectedFrames.map((frame) => ({ ...frame, packageId: review.packageId })));
+    const reviewerNotes = this.reviews.flatMap((review) => review.notes.map((note) => ({ ...note, packageId: review.packageId })));
+    const waveformLanes = this.reviews.flatMap((review) => (review.waveformLanes ?? []).map((lane) => ({ ...lane, packageId: review.packageId })));
+    const manualVisemeEdits = this.reviews.flatMap((review) => (review.manualVisemeEdits ?? []).map((edit) => ({ ...edit, packageId: review.packageId })));
+    const approvalBlockedPackageIds = packages.filter((item) => item.approvalBlocked).map((item) => item.packageId);
+
+    return {
+      kind: "visual-review-dashboard",
+      packageCount: packages.length,
+      packages,
+      failedFrames,
+      reviewerNotes,
+      waveformLanes,
+      manualVisemeEdits,
+      approvalBlockedPackageIds,
+      evidence: {
+        listsFailedFrames: failedFrames.length > 0,
+        listsReviewerNotes: reviewerNotes.length > 0,
+        waveformReview: waveformLanes.length > 0,
+        manualVisemeEdits: manualVisemeEdits.length > 0,
+        approvalBlocking: approvalBlockedPackageIds.length > 0
+      }
+    };
+  }
+}
+
+export function createVisualReviewDashboard(reviews: readonly EpisodeReviewPanelSnapshot[]): VisualReviewDashboard {
+  return new VisualReviewDashboard(reviews);
+}

package/src/index.ts

@@ -1,9 +1,19 @@
 export type { Command, CommandContext } from "./Command";
 export { CommandHistory, CommandTransactionError } from "./CommandHistory";
+export { AssetDropZone, readAssetFromDataTransfer, serializeAssetForDrag } from "./AssetDropZone";
+export type { AssetDropPlacement, AssetDropResult, AssetDropZoneOptions, CartoonAssetCategory, CartoonEditorAssetReference } from "./AssetDropZone";
+export { CameraPathEditor, createCameraPathEditor, readCameraPathKeyframes } from "./CameraPathEditor";
+export type { EditorCameraPathEvidence, EditorCameraPathKeyframe, EditorCameraPathSample, EditorCameraVector3 } from "./CameraPathEditor";
+export { CartoonSceneEditor, createCartoonSceneNode } from "./CartoonSceneEditor";
+export type { CartoonSceneEditorOptions, CartoonSceneEditorSnapshot, CartoonSceneEpisodeSnapshot, CartoonSceneEpisodeState, CartoonSceneNode, CartoonSceneTransform } from "./CartoonSceneEditor";
+export { CurveEditor } from "./CurveEditor";
+export type { TimelineCurveEvidence, TimelineCurvePoint, TimelineCurveSample } from "./CurveEditor";
 export { DiagnosticsOverlayModel } from "./DiagnosticsOverlayModel";
 export type { EditorDiagnosticsInput, EditorDiagnosticsResource, EditorDiagnosticsSnapshot } from "./DiagnosticsOverlayModel";
 export { EditorRuntime } from "./EditorRuntime";
 export type { EditorMode, EditorRuntimeSnapshot } from "./EditorRuntime";
+export { EpisodeReviewPanel, createEpisodeReviewPanel } from "./EpisodeReviewPanel";
+export type { EpisodeReviewManualVisemeEdit, EpisodeReviewNote, EpisodeReviewPanelSnapshot, EpisodeReviewPanelState, EpisodeReviewRejectedFrame, EpisodeReviewStatus, EpisodeReviewWaveformLane } from "./EpisodeReviewPanel";
 export { EditorStateModel, createMemoryEditorStateStorage } from "./EditorStateModel";
 export type { EditorGridSnapSettings, EditorStateChange, EditorStateSnapshot, EditorStateStorage, EditorViewportSettings } from "./EditorStateModel";
 export { EditorPluginHost } from "./EditorPluginHost";
@@ -22,6 +32,15 @@ export { HierarchyModel } from "./HierarchyModel";
 export type { HierarchyLikeNode, HierarchyNodeDescriptor } from "./HierarchyModel";
 export { InspectorModel } from "./InspectorModel";
 export type { InspectorEditableValue, InspectorProperty } from "./InspectorModel";
+export { KeyframeEditor, encodeTimelineKeyframes, readTimelineKeyframes, timelineKeyframesByProperty } from "./KeyframeEditor";
+export type {
+  CreateTimelineKeyframeOptions,
+  PasteTimelineKeyframesOptions,
+  TimelineBezierHandle,
+  TimelineKeyframe,
+  TimelineKeyframeInterpolation,
+  TimelineKeyframeValue
+} from "./KeyframeEditor";
 export { sampleLocalizationAccessibilityFixture } from "./LocalizationAccessibilityFixtures";
 export type {
   EditorAccessibilityElementSample,
@@ -34,14 +53,40 @@ export type {
 } from "./LocalizationAccessibilityFixtures";
 export { MaterialVariantWorkflow } from "./MaterialVariantWorkflow";
 export type { MaterialVariantRenderOptions, MaterialVariantState } from "./MaterialVariantWorkflow";
+export { MultiUserReviewWorkflow, createMultiUserReviewWorkflow } from "./MultiUserReviewWorkflow";
+export type {
+  MultiUserReviewWorkflowSnapshot,
+  MultiUserReviewWorkflowState,
+  ReviewDecision,
+  ReviewDecisionStatus,
+  ReviewParticipant,
+  ReviewParticipantRole,
+  ReviewThread,
+  ReviewWorkflowStatus
+} from "./MultiUserReviewWorkflow";
+export { NonlinearAnimationEditor, createNonlinearAnimationEditor } from "./NonlinearAnimationEditor";
+export type {
+  NonlinearAnimationEditorSnapshot,
+  NonlinearAnimationEditorState,
+  NonlinearBinAsset,
+  NonlinearBinAssetKind,
+  NonlinearSequenceConfig,
+  NonlinearSequenceSnapshot
+} from "./NonlinearAnimationEditor";
 export { PickingService } from "./PickingService";
 export type { EditorPickHit, EditorPickTarget, EditorPickingColorId, EditorPickingEvidenceSnapshot } from "./PickingService";
 export { PlayModeBridge } from "./PlayModeBridge";
 export type { SnapshotAdapter } from "./PlayModeBridge";
 export { PrefabRegistry, validatePrefab } from "./PrefabRegistry";
 export type { CreatePrefabOptions, EditorPrefab, EditorPrefabNodeBase, EditorPrefabSchemaVersion, InstantiatePrefabOptions } from "./PrefabRegistry";
+export { PropertyPanel } from "./PropertyPanel";
+export type { PropertyPanelField, PropertyPanelOptions } from "./PropertyPanel";
 export { RotateGizmo } from "./RotateGizmo";
+export { RenderQueuePanel, createRenderQueuePanel } from "./RenderQueuePanel";
+export type { RenderQueuePanelItem, RenderQueuePanelItemStatus, RenderQueuePanelSnapshot } from "./RenderQueuePanel";
 export { ScaleGizmo } from "./ScaleGizmo";
+export { SceneOutliner } from "./SceneOutliner";
+export type { SceneOutlinerItem, SceneOutlinerOptions } from "./SceneOutliner";
 export { Selection } from "./Selection";
 export type { SelectionChange, SelectionId, SelectionListener } from "./Selection";
 export { createOldBranchShaderGraphFixture } from "./ShaderGraphModel";
@@ -63,6 +108,8 @@ export type {
   TimelineRuntimeTargetSnapshot
 } from "./TimelineRuntimeBridge";
 export { TranslateGizmo } from "./TranslateGizmo";
+export { TimelineEditorController } from "./TimelineEditorController";
+export type { TimelineEditorClipboard, TimelineEditorControllerOptions, TimelineEditorSnapshot, TimelineRoutePlaybackBinding } from "./TimelineEditorController";
 export { TimelineClip, TimelineModel, TimelineTrack } from "./TimelineModel";
 export type {
   TimelineActiveClipSnapshot,
@@ -76,6 +123,12 @@ export type {
   TimelineTrackConfig,
   TimelineTrackSnapshot
 } from "./TimelineModel";
+export { TIMELINE_TRACK_TYPES, createTimelineTrackConfig, timelineTrackKindFromConfig, timelineTrackTypeDefinition } from "./TimelineTrackTypes";
+export type { CreateTimelineTrackConfigOptions, TimelineEditorTrackKind, TimelineTrackTypeDefinition } from "./TimelineTrackTypes";
+export { TimelineUI, renderTimelineUI } from "./TimelineUI";
+export type { TimelineUIOptions, TimelineUIRenderResult } from "./TimelineUI";
+export { VisualReviewDashboard, createVisualReviewDashboard } from "./VisualReviewDashboard";
+export type { VisualReviewDashboardPackage, VisualReviewDashboardSnapshot } from "./VisualReviewDashboard";
 export { CreateNodeCommand } from "./commands/CreateNodeCommand";
 export type { NodeContainer } from "./commands/CreateNodeCommand";
 export { DeleteNodeCommand } from "./commands/DeleteNodeCommand";