@hyperframes/studio 0.6.0-alpha.9 → 0.6.1

package/src/components/StudioHeader.tsx

@@ -0,0 +1,133 @@
+import type { MouseEvent } from "react";
+import { RotateCcw, RotateCw, Camera } from "../icons/SystemIcons";
+import {
+  STUDIO_INSPECTOR_PANELS_ENABLED,
+  STUDIO_MANUAL_EDITING_DISABLED_TITLE,
+} from "./editor/manualEditingAvailability";
+import { getHistoryShortcutLabel } from "../utils/studioHelpers";
+import { useStudioContext } from "../contexts/StudioContext";
+import { usePanelLayoutContext } from "../contexts/PanelLayoutContext";
+import { useDomEditContext } from "../contexts/DomEditContext";
+
+export interface StudioHeaderProps {
+  captureFrameHref: string;
+  captureFrameFilename: string;
+  handleCaptureFrameClick: (event: MouseEvent<HTMLAnchorElement>) => void;
+  refreshCaptureFrameTime: () => void;
+  inspectorButtonActive: boolean;
+  inspectorPanelActive: boolean;
+}
+
+export function StudioHeader({
+  captureFrameHref,
+  captureFrameFilename,
+  handleCaptureFrameClick,
+  refreshCaptureFrameTime,
+  inspectorButtonActive,
+  inspectorPanelActive,
+}: StudioHeaderProps) {
+  const { projectId, editHistory, handleUndo, handleRedo } = useStudioContext();
+  const { rightCollapsed, setRightCollapsed, setRightPanelTab } = usePanelLayoutContext();
+  const { clearDomSelection } = useDomEditContext();
+
+  return (
+    <div className="flex items-center justify-between h-10 px-3 bg-neutral-900 border-b border-neutral-800 flex-shrink-0">
+      {/* Left: project name */}
+      <div className="flex items-center gap-2">
+        <span className="text-[11px] font-medium text-neutral-400">{projectId}</span>
+      </div>
+      {/* Right: toolbar buttons */}
+      <div className="flex items-center gap-1.5">
+        <button
+          type="button"
+          onClick={() => void handleUndo()}
+          disabled={!editHistory.canUndo}
+          className={`h-7 w-7 flex items-center justify-center rounded-md border transition-colors ${
+            editHistory.canUndo
+              ? "border-neutral-700 text-neutral-300 hover:border-neutral-500 hover:bg-neutral-800"
+              : "border-neutral-900 text-neutral-700"
+          }`}
+          title={
+            editHistory.undoLabel
+              ? `Undo ${editHistory.undoLabel} (${getHistoryShortcutLabel("undo")})`
+              : `Undo (${getHistoryShortcutLabel("undo")})`
+          }
+          aria-label="Undo"
+        >
+          <RotateCcw size={14} />
+        </button>
+        <button
+          type="button"
+          onClick={() => void handleRedo()}
+          disabled={!editHistory.canRedo}
+          className={`h-7 w-7 flex items-center justify-center rounded-md border transition-colors ${
+            editHistory.canRedo
+              ? "border-neutral-700 text-neutral-300 hover:border-neutral-500 hover:bg-neutral-800"
+              : "border-neutral-900 text-neutral-700"
+          }`}
+          title={
+            editHistory.redoLabel
+              ? `Redo ${editHistory.redoLabel} (${getHistoryShortcutLabel("redo")})`
+              : `Redo (${getHistoryShortcutLabel("redo")})`
+          }
+          aria-label="Redo"
+        >
+          <RotateCw size={14} />
+        </button>
+        <a
+          href={captureFrameHref}
+          download={captureFrameFilename}
+          onClick={handleCaptureFrameClick}
+          onFocus={refreshCaptureFrameTime}
+          onPointerDown={refreshCaptureFrameTime}
+          className="h-7 flex items-center gap-1.5 px-2.5 rounded-md text-[11px] font-medium border border-neutral-700 text-neutral-300 transition-colors hover:border-neutral-500 hover:bg-neutral-800"
+          title="Capture current frame"
+          aria-label="Capture current frame"
+        >
+          <Camera size={14} />
+          <span>Capture</span>
+        </a>
+        <button
+          type="button"
+          onClick={() => {
+            if (!STUDIO_INSPECTOR_PANELS_ENABLED) return;
+            if (rightCollapsed || !inspectorPanelActive) {
+              setRightPanelTab("design");
+              setRightCollapsed(false);
+              return;
+            }
+            clearDomSelection();
+            setRightCollapsed(true);
+          }}
+          disabled={!STUDIO_INSPECTOR_PANELS_ENABLED}
+          className={`h-7 flex items-center gap-1.5 px-2.5 rounded-md text-[11px] font-medium border transition-colors ${
+            inspectorButtonActive
+              ? "text-studio-accent bg-studio-accent/10 border-studio-accent/30"
+              : STUDIO_INSPECTOR_PANELS_ENABLED
+                ? "text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800 border-transparent"
+                : "cursor-not-allowed border-transparent text-neutral-700"
+          }`}
+          title={
+            STUDIO_INSPECTOR_PANELS_ENABLED ? "Inspector" : STUDIO_MANUAL_EDITING_DISABLED_TITLE
+          }
+          aria-label={
+            STUDIO_INSPECTOR_PANELS_ENABLED ? "Inspector" : STUDIO_MANUAL_EDITING_DISABLED_TITLE
+          }
+        >
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <polygon points="10 8 16 12 10 16" fill="currentColor" stroke="none" />
+          </svg>
+          Inspector
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/StudioLeftSidebar.tsx

@@ -0,0 +1,125 @@
+import type { RefObject } from "react";
+import { SourceEditor } from "./editor/SourceEditor";
+import { LeftSidebar, type LeftSidebarHandle } from "./sidebar/LeftSidebar";
+import { MediaPreview } from "./MediaPreview";
+import { isMediaFile } from "../utils/mediaTypes";
+import { usePanelLayoutContext } from "../contexts/PanelLayoutContext";
+import { useStudioContext } from "../contexts/StudioContext";
+import { useFileManagerContext } from "../contexts/FileManagerContext";
+
+export interface StudioLeftSidebarProps {
+  leftSidebarRef: RefObject<LeftSidebarHandle | null>;
+  onSelectComposition: (comp: string) => void;
+  onLint: () => void;
+  linting: boolean;
+}
+
+export function StudioLeftSidebar({
+  leftSidebarRef,
+  onSelectComposition,
+  onLint,
+  linting,
+}: StudioLeftSidebarProps) {
+  const {
+    leftCollapsed,
+    leftWidth,
+    toggleLeftSidebar,
+    handlePanelResizeStart,
+    handlePanelResizeMove,
+    handlePanelResizeEnd,
+  } = usePanelLayoutContext();
+  const { projectId } = useStudioContext();
+  const {
+    compositions,
+    assets,
+    editingFile,
+    fileTree,
+    handleFileSelect,
+    handleCreateFile,
+    handleCreateFolder,
+    handleDeleteFile,
+    handleRenameFile,
+    handleDuplicateFile,
+    handleMoveFile,
+    handleImportFiles,
+    handleContentChange,
+  } = useFileManagerContext();
+
+  if (leftCollapsed) {
+    return (
+      <div className="flex w-10 flex-shrink-0 flex-col items-center border-r border-neutral-800/50 bg-neutral-950 pt-1">
+        <button
+          type="button"
+          onClick={toggleLeftSidebar}
+          className="flex h-8 w-8 items-center justify-center rounded-md border border-transparent text-neutral-500 transition-colors hover:border-neutral-800 hover:bg-neutral-900 hover:text-neutral-300"
+          title="Show sidebar"
+          aria-label="Show sidebar"
+        >
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M5 4v16" />
+            <path d="m10 7 5 5-5 5" />
+          </svg>
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <LeftSidebar
+        ref={leftSidebarRef}
+        width={leftWidth}
+        projectId={projectId}
+        compositions={compositions}
+        assets={assets}
+        activeComposition={editingFile?.path ?? null}
+        onSelectComposition={onSelectComposition}
+        fileTree={fileTree}
+        editingFile={editingFile}
+        onSelectFile={handleFileSelect}
+        onCreateFile={handleCreateFile}
+        onCreateFolder={handleCreateFolder}
+        onDeleteFile={handleDeleteFile}
+        onRenameFile={handleRenameFile}
+        onDuplicateFile={handleDuplicateFile}
+        onMoveFile={handleMoveFile}
+        onImportFiles={handleImportFiles}
+        codeChildren={
+          editingFile ? (
+            isMediaFile(editingFile.path) ? (
+              <MediaPreview projectId={projectId} filePath={editingFile.path} />
+            ) : (
+              <SourceEditor
+                content={editingFile.content ?? ""}
+                filePath={editingFile.path}
+                onChange={handleContentChange}
+              />
+            )
+          ) : undefined
+        }
+        onLint={onLint}
+        linting={linting}
+        onToggleCollapse={toggleLeftSidebar}
+      />
+      <div
+        className="group w-2 flex-shrink-0 cursor-col-resize flex items-center justify-center"
+        style={{ touchAction: "none" }}
+        onPointerDown={(e) => handlePanelResizeStart("left", e)}
+        onPointerMove={handlePanelResizeMove}
+        onPointerUp={handlePanelResizeEnd}
+      >
+        <div className="h-[52px] w-px bg-white/12 transition-colors group-hover:bg-white/18 group-active:bg-white/24" />
+      </div>
+    </>
+  );
+}

package/src/components/StudioPreviewArea.tsx

@@ -0,0 +1,167 @@
+import type { ReactNode } from "react";
+import { NLELayout } from "./nle/NLELayout";
+import { CaptionOverlay } from "../captions/components/CaptionOverlay";
+import { CaptionTimeline } from "../captions/components/CaptionTimeline";
+import { DomEditOverlay } from "./editor/DomEditOverlay";
+import type { TimelineElement } from "../player";
+import type { BlockedTimelineEditIntent } from "../player/components/timelineEditing";
+import {
+  STUDIO_INSPECTOR_PANELS_ENABLED,
+  STUDIO_PREVIEW_MANUAL_EDITING_ENABLED,
+  STUDIO_PREVIEW_SELECTION_ENABLED,
+} from "./editor/manualEditingAvailability";
+import { useStudioContext } from "../contexts/StudioContext";
+import { useDomEditContext } from "../contexts/DomEditContext";
+
+export interface StudioPreviewAreaProps {
+  timelineToolbar: ReactNode;
+  renderClipContent: (
+    element: TimelineElement,
+    style: { clip: string; label: string },
+  ) => ReactNode;
+  // Timeline editing
+  handleTimelineElementDelete: (element: TimelineElement) => Promise<void> | void;
+  handleTimelineAssetDrop: (
+    assetPath: string,
+    placement: Pick<TimelineElement, "start" | "track">,
+  ) => Promise<void> | void;
+  handleTimelineFileDrop: (
+    files: File[],
+    placement?: Pick<TimelineElement, "start" | "track">,
+  ) => Promise<void> | void;
+  handleTimelineElementMove: (
+    element: TimelineElement,
+    updates: Pick<TimelineElement, "start" | "track">,
+  ) => Promise<void> | void;
+  handleTimelineElementResize: (
+    element: TimelineElement,
+    updates: Pick<TimelineElement, "start" | "duration" | "playbackStart">,
+  ) => Promise<void> | void;
+  handleBlockedTimelineEdit: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
+  setCompIdToSrc: (map: Map<string, string>) => void;
+  setCompositionLoading: (loading: boolean) => void;
+  shouldShowSelectedDomBounds: boolean;
+}
+
+export function StudioPreviewArea({
+  timelineToolbar,
+  renderClipContent,
+  handleTimelineElementDelete,
+  handleTimelineAssetDrop,
+  handleTimelineFileDrop,
+  handleTimelineElementMove,
+  handleTimelineElementResize,
+  handleBlockedTimelineEdit,
+  setCompIdToSrc,
+  setCompositionLoading,
+  shouldShowSelectedDomBounds,
+}: StudioPreviewAreaProps) {
+  const {
+    projectId,
+    refreshKey,
+    activeCompPath,
+    setActiveCompPath,
+    captionEditMode,
+    compositionLoading,
+    isPlaying,
+    previewIframeRef,
+    refreshPreviewDocumentVersion,
+    handlePreviewIframeRef,
+    timelineVisible,
+    toggleTimelineVisibility,
+  } = useStudioContext();
+
+  const {
+    domEditHoverSelection,
+    domEditSelection,
+    domEditGroupSelections,
+    handleTimelineElementSelect,
+    handlePreviewCanvasMouseDown,
+    handlePreviewCanvasPointerMove,
+    handlePreviewCanvasPointerLeave,
+    applyDomSelection,
+    handleBlockedDomMove,
+    handleDomManualDragStart,
+    handleDomPathOffsetCommit,
+    handleDomGroupPathOffsetCommit,
+    handleDomBoxSizeCommit,
+    handleDomRotationCommit,
+  } = useDomEditContext();
+
+  return (
+    <div className="flex-1 relative min-w-0">
+      <NLELayout
+        projectId={projectId}
+        refreshKey={refreshKey}
+        activeCompositionPath={activeCompPath}
+        timelineToolbar={timelineToolbar}
+        renderClipContent={renderClipContent}
+        onDeleteElement={handleTimelineElementDelete}
+        onAssetDrop={handleTimelineAssetDrop}
+        onFileDrop={handleTimelineFileDrop}
+        onMoveElement={handleTimelineElementMove}
+        onResizeElement={handleTimelineElementResize}
+        onBlockedEditAttempt={handleBlockedTimelineEdit}
+        onSelectTimelineElement={handleTimelineElementSelect}
+        onCompIdToSrcChange={setCompIdToSrc}
+        onCompositionLoadingChange={setCompositionLoading}
+        onCompositionChange={(compPath) => {
+          // Sync activeCompPath when user drills down via timeline double-click
+          // or navigates back via breadcrumb — keeps sidebar + thumbnails in sync.
+          // Guard against no-op updates to prevent circular refresh cascades
+          // between activeCompPath → compositionStack → onCompositionChange.
+          if (compPath !== activeCompPath) {
+            setActiveCompPath(compPath);
+            refreshPreviewDocumentVersion();
+          }
+        }}
+        onIframeRef={handlePreviewIframeRef}
+        previewOverlay={
+          captionEditMode ? (
+            <CaptionOverlay iframeRef={previewIframeRef} />
+          ) : STUDIO_INSPECTOR_PANELS_ENABLED ? (
+            <DomEditOverlay
+              iframeRef={previewIframeRef}
+              activeCompositionPath={activeCompPath}
+              hoverSelection={
+                STUDIO_PREVIEW_SELECTION_ENABLED &&
+                !captionEditMode &&
+                !compositionLoading &&
+                !isPlaying
+                  ? domEditHoverSelection
+                  : null
+              }
+              selection={shouldShowSelectedDomBounds ? domEditSelection : null}
+              groupSelections={shouldShowSelectedDomBounds ? domEditGroupSelections : []}
+              allowCanvasMovement={STUDIO_PREVIEW_MANUAL_EDITING_ENABLED}
+              onCanvasMouseDown={handlePreviewCanvasMouseDown}
+              onCanvasPointerMove={handlePreviewCanvasPointerMove}
+              onCanvasPointerLeave={handlePreviewCanvasPointerLeave}
+              onSelectionChange={applyDomSelection}
+              onBlockedMove={handleBlockedDomMove}
+              onManualDragStart={handleDomManualDragStart}
+              onPathOffsetCommit={handleDomPathOffsetCommit}
+              onGroupPathOffsetCommit={handleDomGroupPathOffsetCommit}
+              onBoxSizeCommit={handleDomBoxSizeCommit}
+              onRotationCommit={handleDomRotationCommit}
+            />
+          ) : null
+        }
+        timelineFooter={
+          captionEditMode ? (
+            <div className="border-t border-neutral-800/30 flex-shrink-0" style={{ height: 60 }}>
+              <div className="flex items-center gap-1.5 px-2 py-0.5">
+                <span className="text-[9px] font-medium text-neutral-500 uppercase tracking-wider">
+                  Captions
+                </span>
+              </div>
+              <CaptionTimeline pixelsPerSecond={100} />
+            </div>
+          ) : undefined
+        }
+        timelineVisible={timelineVisible}
+        onToggleTimeline={toggleTimelineVisibility}
+      />
+    </div>
+  );
+}

package/src/components/StudioRightPanel.tsx

@@ -0,0 +1,198 @@
+import { PropertyPanel } from "./editor/PropertyPanel";
+import { MotionPanel } from "./editor/MotionPanel";
+import { CaptionPropertyPanel } from "../captions/components/CaptionPropertyPanel";
+import { RenderQueue } from "./renders/RenderQueue";
+import type { RenderJob } from "./renders/useRenderQueue";
+import type { StudioGsapMotion } from "./editor/studioMotion";
+import {
+  STUDIO_INSPECTOR_PANELS_ENABLED,
+  STUDIO_MOTION_PANEL_ENABLED,
+} from "./editor/manualEditingAvailability";
+import { useCallback } from "react";
+import { resolveDomEditSelection, type DomEditLayerItem } from "./editor/domEditing";
+import { useStudioContext } from "../contexts/StudioContext";
+import { usePanelLayoutContext } from "../contexts/PanelLayoutContext";
+import { useFileManagerContext } from "../contexts/FileManagerContext";
+import { useDomEditContext } from "../contexts/DomEditContext";
+
+export interface StudioRightPanelProps {
+  selectedStudioMotion: StudioGsapMotion | null;
+  designPanelActive: boolean;
+  motionPanelActive: boolean;
+}
+
+export function StudioRightPanel({
+  selectedStudioMotion,
+  designPanelActive,
+  motionPanelActive,
+}: StudioRightPanelProps) {
+  const {
+    rightWidth,
+    rightPanelTab,
+    setRightPanelTab,
+    handlePanelResizeStart,
+    handlePanelResizeMove,
+    handlePanelResizeEnd,
+  } = usePanelLayoutContext();
+
+  const {
+    captionEditMode,
+    previewIframeRef,
+    projectId,
+    activeCompPath,
+    compositionDimensions,
+    waitForPendingDomEditSaves,
+    renderQueue,
+  } = useStudioContext();
+
+  const {
+    domEditSelection,
+    domEditGroupSelections,
+    copiedAgentPrompt,
+    clearDomSelection,
+    handleDomStyleCommit,
+    handleDomPathOffsetCommit,
+    handleDomBoxSizeCommit,
+    handleDomRotationCommit,
+    handleDomTextCommit,
+    handleDomTextFieldStyleCommit,
+    handleDomAddTextField,
+    handleDomRemoveTextField,
+    handleDomManualEditsReset,
+    handleAskAgent,
+    handleDomMotionCommit,
+    handleDomMotionClear,
+    applyDomSelection,
+  } = useDomEditContext();
+
+  const { assets, fontAssets, handleImportFiles, handleImportFonts } = useFileManagerContext();
+
+  const isMasterView = !activeCompPath || activeCompPath === "index.html";
+  const handleSelectLayer = useCallback(
+    (layer: DomEditLayerItem) => {
+      const selection = resolveDomEditSelection(layer.element, {
+        activeCompositionPath: activeCompPath,
+        isMasterView,
+        preferClipAncestor: false,
+      });
+      if (selection) applyDomSelection(selection);
+    },
+    [activeCompPath, isMasterView, applyDomSelection],
+  );
+
+  const renderJobs = renderQueue.jobs as RenderJob[];
+
+  return (
+    <>
+      <div
+        className="group w-2 flex-shrink-0 cursor-col-resize flex items-center justify-center"
+        style={{ touchAction: "none" }}
+        onPointerDown={(e) => handlePanelResizeStart("right", e)}
+        onPointerMove={handlePanelResizeMove}
+        onPointerUp={handlePanelResizeEnd}
+      >
+        <div className="h-[52px] w-px bg-white/12 transition-colors group-hover:bg-white/18 group-active:bg-white/24" />
+      </div>
+      <div
+        className="flex flex-col border-l border-neutral-800 bg-neutral-900 flex-shrink-0"
+        style={{ width: rightWidth }}
+      >
+        {captionEditMode ? (
+          <CaptionPropertyPanel iframeRef={previewIframeRef} />
+        ) : (
+          <>
+            <div className="flex items-center gap-1 border-b border-neutral-800 px-3 py-2">
+              {STUDIO_INSPECTOR_PANELS_ENABLED && (
+                <>
+                  <button
+                    type="button"
+                    onClick={() => setRightPanelTab("design")}
+                    className={`h-8 rounded-xl px-3 text-[11px] font-medium transition-colors ${
+                      rightPanelTab === "design"
+                        ? "bg-neutral-800 text-white"
+                        : "text-neutral-500 hover:bg-neutral-800/70 hover:text-neutral-200"
+                    }`}
+                  >
+                    Design
+                  </button>
+                  {STUDIO_MOTION_PANEL_ENABLED && (
+                    <button
+                      type="button"
+                      onClick={() => setRightPanelTab("motion")}
+                      className={`h-8 rounded-xl px-3 text-[11px] font-medium transition-colors ${
+                        rightPanelTab === "motion"
+                          ? "bg-neutral-800 text-white"
+                          : "text-neutral-500 hover:bg-neutral-800/70 hover:text-neutral-200"
+                      }`}
+                    >
+                      Motion
+                    </button>
+                  )}
+                </>
+              )}
+              <button
+                type="button"
+                onClick={() => setRightPanelTab("renders")}
+                className={`h-8 rounded-xl px-3 text-[11px] font-medium transition-colors ${
+                  rightPanelTab === "renders"
+                    ? "bg-neutral-800 text-white"
+                    : "text-neutral-500 hover:bg-neutral-800/70 hover:text-neutral-200"
+                }`}
+              >
+                {renderJobs.length > 0 ? `Renders (${renderJobs.length})` : "Renders"}
+              </button>
+            </div>
+            <div className="min-h-0 flex-1">
+              {designPanelActive ? (
+                <PropertyPanel
+                  projectId={projectId}
+                  assets={assets}
+                  element={domEditGroupSelections.length > 1 ? null : domEditSelection}
+                  multiSelectCount={domEditGroupSelections.length}
+                  copiedAgentPrompt={copiedAgentPrompt}
+                  onClearSelection={clearDomSelection}
+                  onSetStyle={handleDomStyleCommit}
+                  onSetManualOffset={handleDomPathOffsetCommit}
+                  onSetManualSize={handleDomBoxSizeCommit}
+                  onSetManualRotation={handleDomRotationCommit}
+                  onSetText={handleDomTextCommit}
+                  onSetTextFieldStyle={handleDomTextFieldStyleCommit}
+                  onAddTextField={handleDomAddTextField}
+                  onRemoveTextField={handleDomRemoveTextField}
+                  onResetManualEdits={handleDomManualEditsReset}
+                  onAskAgent={handleAskAgent}
+                  onImportAssets={handleImportFiles}
+                  fontAssets={fontAssets}
+                  onImportFonts={handleImportFonts}
+                  activeCompositionPath={activeCompPath}
+                  onSelectLayer={handleSelectLayer}
+                />
+              ) : motionPanelActive ? (
+                <MotionPanel
+                  element={domEditGroupSelections.length > 1 ? null : domEditSelection}
+                  motion={selectedStudioMotion}
+                  onClearSelection={clearDomSelection}
+                  onSetMotion={handleDomMotionCommit}
+                  onClearMotion={handleDomMotionClear}
+                />
+              ) : (
+                <RenderQueue
+                  jobs={renderJobs}
+                  projectId={projectId}
+                  onDelete={renderQueue.deleteRender}
+                  onClearCompleted={renderQueue.clearCompleted}
+                  onStartRender={async (format, quality, resolution, fps) => {
+                    await waitForPendingDomEditSaves();
+                    await renderQueue.startRender({ fps, quality, format, resolution });
+                  }}
+                  compositionDimensions={compositionDimensions}
+                  isRendering={renderQueue.isRendering}
+                />
+              )}
+            </div>
+          </>
+        )}
+      </div>
+    </>
+  );
+}