@hyperframes/studio 0.6.0-alpha.9 → 0.6.1

package/src/contexts/DomEditContext.tsx

@@ -0,0 +1,137 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+import type { useDomEditSession } from "../hooks/useDomEditSession";
+
+type DomEditValue = ReturnType<typeof useDomEditSession>;
+
+const DomEditContext = createContext<DomEditValue | null>(null);
+
+export function useDomEditContext(): DomEditValue {
+  const ctx = useContext(DomEditContext);
+  if (!ctx) throw new Error("useDomEditContext must be used within DomEditProvider");
+  return ctx;
+}
+
+export function DomEditProvider({
+  value: {
+    domEditSelection,
+    domEditGroupSelections,
+    domEditHoverSelection,
+    agentModalOpen,
+    agentModalAnchorPoint,
+    copiedAgentPrompt,
+    agentPromptSelectionContext,
+    domEditSelectionRef,
+    handleTimelineElementSelect,
+    handlePreviewCanvasMouseDown,
+    handlePreviewCanvasPointerMove,
+    handlePreviewCanvasPointerLeave,
+    applyDomSelection,
+    clearDomSelection,
+    handleDomStyleCommit,
+    handleDomPathOffsetCommit,
+    handleDomGroupPathOffsetCommit,
+    handleDomBoxSizeCommit,
+    handleDomRotationCommit,
+    handleDomManualEditsReset,
+    handleDomMotionCommit,
+    handleDomMotionClear,
+    handleDomTextCommit,
+    handleDomTextFieldStyleCommit,
+    handleDomAddTextField,
+    handleDomRemoveTextField,
+    handleAskAgent,
+    handleAgentModalSubmit,
+    handleBlockedDomMove,
+    handleDomManualDragStart,
+    handleDomEditElementDelete,
+    buildDomSelectionForTimelineElement,
+    resolveImportedFontAsset,
+    setAgentModalOpen,
+    setAgentPromptSelectionContext,
+    setAgentModalAnchorPoint,
+  },
+  children,
+}: {
+  value: DomEditValue;
+  children: ReactNode;
+}) {
+  const stable = useMemo<DomEditValue>(
+    () => ({
+      domEditSelection,
+      domEditGroupSelections,
+      domEditHoverSelection,
+      agentModalOpen,
+      agentModalAnchorPoint,
+      copiedAgentPrompt,
+      agentPromptSelectionContext,
+      domEditSelectionRef,
+      handleTimelineElementSelect,
+      handlePreviewCanvasMouseDown,
+      handlePreviewCanvasPointerMove,
+      handlePreviewCanvasPointerLeave,
+      applyDomSelection,
+      clearDomSelection,
+      handleDomStyleCommit,
+      handleDomPathOffsetCommit,
+      handleDomGroupPathOffsetCommit,
+      handleDomBoxSizeCommit,
+      handleDomRotationCommit,
+      handleDomManualEditsReset,
+      handleDomMotionCommit,
+      handleDomMotionClear,
+      handleDomTextCommit,
+      handleDomTextFieldStyleCommit,
+      handleDomAddTextField,
+      handleDomRemoveTextField,
+      handleAskAgent,
+      handleAgentModalSubmit,
+      handleBlockedDomMove,
+      handleDomManualDragStart,
+      handleDomEditElementDelete,
+      buildDomSelectionForTimelineElement,
+      resolveImportedFontAsset,
+      setAgentModalOpen,
+      setAgentPromptSelectionContext,
+      setAgentModalAnchorPoint,
+    }),
+    [
+      domEditSelection,
+      domEditGroupSelections,
+      domEditHoverSelection,
+      agentModalOpen,
+      agentModalAnchorPoint,
+      copiedAgentPrompt,
+      agentPromptSelectionContext,
+      domEditSelectionRef,
+      handleTimelineElementSelect,
+      handlePreviewCanvasMouseDown,
+      handlePreviewCanvasPointerMove,
+      handlePreviewCanvasPointerLeave,
+      applyDomSelection,
+      clearDomSelection,
+      handleDomStyleCommit,
+      handleDomPathOffsetCommit,
+      handleDomGroupPathOffsetCommit,
+      handleDomBoxSizeCommit,
+      handleDomRotationCommit,
+      handleDomManualEditsReset,
+      handleDomMotionCommit,
+      handleDomMotionClear,
+      handleDomTextCommit,
+      handleDomTextFieldStyleCommit,
+      handleDomAddTextField,
+      handleDomRemoveTextField,
+      handleAskAgent,
+      handleAgentModalSubmit,
+      handleBlockedDomMove,
+      handleDomManualDragStart,
+      handleDomEditElementDelete,
+      buildDomSelectionForTimelineElement,
+      resolveImportedFontAsset,
+      setAgentModalOpen,
+      setAgentPromptSelectionContext,
+      setAgentModalAnchorPoint,
+    ],
+  );
+  return <DomEditContext value={stable}>{children}</DomEditContext>;
+}

package/src/contexts/FileManagerContext.tsx

@@ -0,0 +1,110 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+import type { useFileManager } from "../hooks/useFileManager";
+
+type FileManagerValue = ReturnType<typeof useFileManager>;
+
+const FileManagerContext = createContext<FileManagerValue | null>(null);
+
+export function useFileManagerContext(): FileManagerValue {
+  const ctx = useContext(FileManagerContext);
+  if (!ctx) throw new Error("useFileManagerContext must be used within FileManagerProvider");
+  return ctx;
+}
+
+export function FileManagerProvider({
+  value: {
+    editingFile,
+    setEditingFile,
+    projectDir,
+    fileTree,
+    setFileTree,
+    editingPathRef,
+    projectIdRef,
+    saveTimerRef,
+    importedFontAssetsRef,
+    readProjectFile,
+    writeProjectFile,
+    readOptionalProjectFile,
+    handleFileSelect,
+    handleContentChange,
+    refreshFileTree,
+    uploadProjectFiles,
+    handleCreateFile,
+    handleCreateFolder,
+    handleDeleteFile,
+    handleRenameFile,
+    handleDuplicateFile,
+    handleMoveFile,
+    handleImportFiles,
+    handleImportFonts,
+    compositions,
+    assets,
+    fontAssets,
+  },
+  children,
+}: {
+  value: FileManagerValue;
+  children: ReactNode;
+}) {
+  const stable = useMemo<FileManagerValue>(
+    () => ({
+      editingFile,
+      setEditingFile,
+      projectDir,
+      fileTree,
+      setFileTree,
+      editingPathRef,
+      projectIdRef,
+      saveTimerRef,
+      importedFontAssetsRef,
+      readProjectFile,
+      writeProjectFile,
+      readOptionalProjectFile,
+      handleFileSelect,
+      handleContentChange,
+      refreshFileTree,
+      uploadProjectFiles,
+      handleCreateFile,
+      handleCreateFolder,
+      handleDeleteFile,
+      handleRenameFile,
+      handleDuplicateFile,
+      handleMoveFile,
+      handleImportFiles,
+      handleImportFonts,
+      compositions,
+      assets,
+      fontAssets,
+    }),
+    [
+      editingFile,
+      setEditingFile,
+      projectDir,
+      fileTree,
+      setFileTree,
+      editingPathRef,
+      projectIdRef,
+      saveTimerRef,
+      importedFontAssetsRef,
+      readProjectFile,
+      writeProjectFile,
+      readOptionalProjectFile,
+      handleFileSelect,
+      handleContentChange,
+      refreshFileTree,
+      uploadProjectFiles,
+      handleCreateFile,
+      handleCreateFolder,
+      handleDeleteFile,
+      handleRenameFile,
+      handleDuplicateFile,
+      handleMoveFile,
+      handleImportFiles,
+      handleImportFonts,
+      compositions,
+      assets,
+      fontAssets,
+    ],
+  );
+  return <FileManagerContext value={stable}>{children}</FileManagerContext>;
+}

package/src/contexts/PanelLayoutContext.tsx

@@ -0,0 +1,68 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+import type { usePanelLayout } from "../hooks/usePanelLayout";
+
+type PanelLayoutValue = ReturnType<typeof usePanelLayout>;
+
+const PanelLayoutContext = createContext<PanelLayoutValue | null>(null);
+
+export function usePanelLayoutContext(): PanelLayoutValue {
+  const ctx = useContext(PanelLayoutContext);
+  if (!ctx) throw new Error("usePanelLayoutContext must be used within PanelLayoutProvider");
+  return ctx;
+}
+
+export function PanelLayoutProvider({
+  value: {
+    leftWidth,
+    setLeftWidth,
+    rightWidth,
+    leftCollapsed,
+    setLeftCollapsed,
+    rightCollapsed,
+    setRightCollapsed,
+    rightPanelTab,
+    setRightPanelTab,
+    toggleLeftSidebar,
+    handlePanelResizeStart,
+    handlePanelResizeMove,
+    handlePanelResizeEnd,
+  },
+  children,
+}: {
+  value: PanelLayoutValue;
+  children: ReactNode;
+}) {
+  const stable = useMemo<PanelLayoutValue>(
+    () => ({
+      leftWidth,
+      setLeftWidth,
+      rightWidth,
+      leftCollapsed,
+      setLeftCollapsed,
+      rightCollapsed,
+      setRightCollapsed,
+      rightPanelTab,
+      setRightPanelTab,
+      toggleLeftSidebar,
+      handlePanelResizeStart,
+      handlePanelResizeMove,
+      handlePanelResizeEnd,
+    }),
+    [
+      leftWidth,
+      setLeftWidth,
+      rightWidth,
+      leftCollapsed,
+      setLeftCollapsed,
+      rightCollapsed,
+      setRightCollapsed,
+      rightPanelTab,
+      setRightPanelTab,
+      toggleLeftSidebar,
+      handlePanelResizeStart,
+      handlePanelResizeMove,
+      handlePanelResizeEnd,
+    ],
+  );
+  return <PanelLayoutContext value={stable}>{children}</PanelLayoutContext>;
+}

package/src/contexts/StudioContext.tsx

@@ -0,0 +1,135 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+import type { TimelineElement } from "../player";
+import type { CompositionDimensions } from "../components/renders/RenderQueue";
+
+export interface StudioContextValue {
+  projectId: string;
+  activeCompPath: string | null;
+  setActiveCompPath: (path: string | null) => void;
+  showToast: (message: string, tone?: "error" | "info") => void;
+  previewIframeRef: React.MutableRefObject<HTMLIFrameElement | null>;
+  captionEditMode: boolean;
+  compositionLoading: boolean;
+  refreshKey: number;
+  setRefreshKey: React.Dispatch<React.SetStateAction<number>>;
+  currentTime: number;
+  timelineElements: TimelineElement[];
+  isPlaying: boolean;
+  editHistory: {
+    canUndo: boolean;
+    canRedo: boolean;
+    undoLabel: string | undefined;
+    redoLabel: string | undefined;
+  };
+  handleUndo: () => Promise<void>;
+  handleRedo: () => Promise<void>;
+  renderQueue: {
+    jobs: unknown[];
+    isRendering: boolean;
+    deleteRender: (jobId: string) => void;
+    clearCompleted: () => void;
+    startRender: (options: unknown) => Promise<void>;
+  };
+  compositionDimensions: CompositionDimensions | null;
+  waitForPendingDomEditSaves: () => Promise<void>;
+  handlePreviewIframeRef: (iframe: HTMLIFrameElement | null) => void;
+  refreshPreviewDocumentVersion: () => void;
+  timelineVisible: boolean;
+  toggleTimelineVisibility: () => void;
+}
+
+const StudioContext = createContext<StudioContextValue | null>(null);
+
+export function useStudioContext(): StudioContextValue {
+  const ctx = useContext(StudioContext);
+  if (!ctx) throw new Error("useStudioContext must be used within StudioProvider");
+  return ctx;
+}
+
+export function StudioProvider({
+  value,
+  children,
+}: {
+  value: StudioContextValue;
+  children: ReactNode;
+}) {
+  const {
+    projectId,
+    activeCompPath,
+    setActiveCompPath,
+    showToast,
+    previewIframeRef,
+    captionEditMode,
+    compositionLoading,
+    refreshKey,
+    setRefreshKey,
+    currentTime,
+    timelineElements,
+    isPlaying,
+    editHistory,
+    handleUndo,
+    handleRedo,
+    renderQueue,
+    compositionDimensions,
+    waitForPendingDomEditSaves,
+    handlePreviewIframeRef,
+    refreshPreviewDocumentVersion,
+    timelineVisible,
+    toggleTimelineVisibility,
+  } = value;
+
+  const stable = useMemo<StudioContextValue>(
+    () => ({
+      projectId,
+      activeCompPath,
+      setActiveCompPath,
+      showToast,
+      previewIframeRef,
+      captionEditMode,
+      compositionLoading,
+      refreshKey,
+      setRefreshKey,
+      currentTime,
+      timelineElements,
+      isPlaying,
+      editHistory,
+      handleUndo,
+      handleRedo,
+      renderQueue,
+      compositionDimensions,
+      waitForPendingDomEditSaves,
+      handlePreviewIframeRef,
+      refreshPreviewDocumentVersion,
+      timelineVisible,
+      toggleTimelineVisibility,
+    }),
+    // Representative subset of deps that actually change — stable callbacks
+    // (showToast, setActiveCompPath, etc.) are included for correctness but
+    // won't trigger re-renders on their own.
+    [
+      projectId,
+      activeCompPath,
+      captionEditMode,
+      compositionLoading,
+      refreshKey,
+      currentTime,
+      isPlaying,
+      compositionDimensions,
+      timelineVisible,
+      editHistory,
+      timelineElements,
+      renderQueue,
+      setActiveCompPath,
+      showToast,
+      previewIframeRef,
+      setRefreshKey,
+      handleUndo,
+      handleRedo,
+      waitForPendingDomEditSaves,
+      handlePreviewIframeRef,
+      refreshPreviewDocumentVersion,
+      toggleTimelineVisibility,
+    ],
+  );
+  return <StudioContext value={stable}>{children}</StudioContext>;
+}