@hyperframes/studio 0.6.0-alpha.9 → 0.6.0

package/src/components/AskAgentModal.tsx

@@ -0,0 +1,120 @@
+import { useState, useRef, type CSSProperties } from "react";
+import { useMountEffect } from "../hooks/useMountEffect";
+import { type AgentModalAnchorPoint, clampNumber } from "../utils/studioHelpers";
+
+function getAgentModalPositionStyle(
+  anchorPoint: AgentModalAnchorPoint | null,
+): CSSProperties | undefined {
+  if (!anchorPoint || typeof window === "undefined") return undefined;
+
+  const modalWidth = 480;
+  const estimatedModalHeight = 270;
+  const margin = 16;
+  const left = clampNumber(
+    anchorPoint.x,
+    margin + modalWidth / 2,
+    window.innerWidth - margin - modalWidth / 2,
+  );
+  const top = clampNumber(
+    anchorPoint.y + 12,
+    margin,
+    window.innerHeight - margin - estimatedModalHeight,
+  );
+
+  return { left, top, transform: "translateX(-50%)" };
+}
+
+export function AskAgentModal({
+  selectionLabel,
+  anchorPoint = null,
+  onSubmit,
+  onClose,
+}: {
+  selectionLabel: string;
+  anchorPoint?: AgentModalAnchorPoint | null;
+  onSubmit: (instruction: string) => void;
+  onClose: () => void;
+}) {
+  const [value, setValue] = useState("");
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const modalPositionStyle = getAgentModalPositionStyle(anchorPoint);
+
+  useMountEffect(() => {
+    requestAnimationFrame(() => inputRef.current?.focus());
+  });
+
+  const handleSubmit = () => {
+    if (!value.trim()) return;
+    onSubmit(value.trim());
+  };
+
+  return (
+    <div
+      className={
+        anchorPoint
+          ? "fixed inset-0 z-[100] bg-black/60 backdrop-blur-sm"
+          : "fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm"
+      }
+      onClick={onClose}
+    >
+      <div
+        className={`w-[480px] rounded-2xl border border-neutral-800 bg-neutral-950 shadow-2xl ${
+          anchorPoint ? "fixed" : ""
+        }`}
+        style={modalPositionStyle}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between px-5 py-4 border-b border-neutral-800/60">
+          <div>
+            <h3 className="text-sm font-medium text-neutral-200">Ask agent</h3>
+            <p className="text-xs text-neutral-500 mt-0.5">
+              {selectionLabel.length > 50 ? `${selectionLabel.slice(0, 49)}…` : selectionLabel}
+            </p>
+          </div>
+          <button
+            className="p-1 rounded-md text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800/50"
+            onClick={onClose}
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+            >
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        </div>
+        <div className="px-5 py-4">
+          <textarea
+            ref={inputRef}
+            className="w-full h-24 px-3 py-2 rounded-lg border border-neutral-800 bg-neutral-900/60 text-sm text-neutral-200 placeholder-neutral-600 resize-none focus:outline-none focus:border-studio-accent/60 focus:ring-1 focus:ring-studio-accent/30"
+            placeholder="Describe what you want to change…"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) handleSubmit();
+              if (e.key === "Escape") onClose();
+            }}
+          />
+        </div>
+        <div className="flex items-center justify-between px-5 py-3 border-t border-neutral-800/60">
+          <span className="text-[11px] text-neutral-600">
+            {navigator.platform.includes("Mac") ? "⌘" : "Ctrl"}+Enter to copy
+          </span>
+          <button
+            className="px-4 py-1.5 rounded-lg bg-studio-accent/90 text-xs font-medium text-neutral-950 hover:bg-studio-accent disabled:opacity-40 disabled:cursor-not-allowed"
+            disabled={!value.trim()}
+            onClick={handleSubmit}
+          >
+            Copy prompt
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

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,163 @@
+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.
+          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>
+  );
+}