@hyperframes/studio 0.7.37 → 0.7.39

package/src/components/StudioHeader.tsx

@@ -1,4 +1,4 @@
-import type { MouseEvent } from "react";
+import { useRef, type MouseEvent } from "react";
 import { RotateCcw, RotateCw, Camera } from "../icons/SystemIcons";
 import {
   STUDIO_INSPECTOR_PANELS_ENABLED,
@@ -9,12 +9,14 @@ import { useStudioShellContext } from "../contexts/StudioContext";
 import { usePanelLayoutContext } from "../contexts/PanelLayoutContext";
 import { useViewMode, type StudioViewMode } from "../contexts/ViewModeContext";
 import { trackStudioEvent } from "../utils/studioTelemetry";
+import { Tooltip } from "./ui";
 
 export interface StudioHeaderProps {
   captureFrameHref: string;
   captureFrameFilename: string;
   handleCaptureFrameClick: (event: MouseEvent<HTMLAnchorElement>) => void;
   refreshCaptureFrameTime: () => void;
+  capturing?: boolean;
   inspectorButtonActive: boolean;
   inspectorPanelActive: boolean;
   onExport?: () => void;
@@ -149,26 +151,45 @@ const VIEW_MODE_OPTIONS: Array<{ mode: StudioViewMode; label: string }> = [
 /** Segmented control switching the main stage between storyboard and preview. */
 function ViewModeToggle() {
   const { viewMode, setViewMode } = useViewMode();
+  const tabRefs = useRef<Array<HTMLButtonElement | null>>([]);
+
+  const selectMode = (mode: StudioViewMode) => {
+    if (mode === viewMode) return;
+    trackStudioEvent("view_mode_toggle", { mode });
+    setViewMode(mode);
+  };
+
+  // Complete APG tabs pattern: roving tabIndex + arrow-key navigation.
+  const handleKeyDown = (e: React.KeyboardEvent, index: number) => {
+    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+    e.preventDefault();
+    const dir = e.key === "ArrowLeft" ? -1 : 1;
+    const next = (index + dir + VIEW_MODE_OPTIONS.length) % VIEW_MODE_OPTIONS.length;
+    tabRefs.current[next]?.focus();
+    selectMode(VIEW_MODE_OPTIONS[next].mode);
+  };
+
   return (
     <div
       className="flex items-center gap-0.5 rounded-md bg-neutral-800 p-0.5"
       role="tablist"
       aria-label="Studio view"
     >
-      {VIEW_MODE_OPTIONS.map(({ mode, label }) => {
+      {VIEW_MODE_OPTIONS.map(({ mode, label }, index) => {
         const active = viewMode === mode;
         return (
           <button
             key={mode}
+            ref={(el) => {
+              tabRefs.current[index] = el;
+            }}
             type="button"
             role="tab"
             aria-selected={active}
-            onClick={() => {
-              if (active) return;
-              trackStudioEvent("view_mode_toggle", { mode });
-              setViewMode(mode);
-            }}
-            className={`rounded px-3 py-1 text-[11px] font-medium transition-colors ${
+            tabIndex={active ? 0 : -1}
+            onClick={() => selectMode(mode)}
+            onKeyDown={(e) => handleKeyDown(e, index)}
+            className={`rounded px-3 py-1 text-[11px] font-medium transition-colors active:scale-[0.98] outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-studio-accent ${
               active ? "bg-neutral-200 text-neutral-900" : "text-neutral-400 hover:text-neutral-200"
             }`}
           >
@@ -186,12 +207,14 @@ export function StudioHeader({
   captureFrameFilename,
   handleCaptureFrameClick,
   refreshCaptureFrameTime,
+  capturing,
   inspectorButtonActive,
   inspectorPanelActive,
   onExport,
 }: StudioHeaderProps) {
-  const { projectId, editHistory, handleUndo, handleRedo } = useStudioShellContext();
+  const { projectId, editHistory, handleUndo, handleRedo, renderQueue } = useStudioShellContext();
   const { rightCollapsed, setRightCollapsed, setRightPanelTab } = usePanelLayoutContext();
+  const isRendering = renderQueue.isRendering;
 
   return (
     <div className="flex items-center justify-between h-10 px-3 bg-neutral-900 border-b border-neutral-800 flex-shrink-0">
@@ -207,118 +230,173 @@ export function StudioHeader({
       <ViewModeToggle />
       {/* Right: toolbar buttons */}
       <div className="flex items-center gap-1.5">
-        <button
-          type="button"
-          onClick={() => {
-            trackStudioEvent("toolbar_action", { action: "undo" });
-            void handleUndo();
-          }}
-          disabled={!editHistory.canUndo}
-          className={`h-7 w-7 flex items-center justify-center rounded-md transition-colors ${
-            editHistory.canUndo
-              ? "text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800"
-              : "text-neutral-700 cursor-default"
-          }`}
-          title={
+        <Tooltip
+          label={
             editHistory.undoLabel
               ? `Undo ${editHistory.undoLabel} (${getHistoryShortcutLabel("undo")})`
               : `Undo (${getHistoryShortcutLabel("undo")})`
           }
-          aria-label="Undo"
+          side="bottom"
         >
-          <RotateCcw size={14} />
-        </button>
-        <button
-          type="button"
-          onClick={() => {
-            trackStudioEvent("toolbar_action", { action: "redo" });
-            void handleRedo();
-          }}
-          disabled={!editHistory.canRedo}
-          className={`h-7 w-7 flex items-center justify-center rounded-md transition-colors ${
-            editHistory.canRedo
-              ? "text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800"
-              : "text-neutral-700 cursor-default"
-          }`}
-          title={
+          <button
+            type="button"
+            onClick={() => {
+              trackStudioEvent("toolbar_action", { action: "undo" });
+              void handleUndo();
+            }}
+            disabled={!editHistory.canUndo}
+            className={`h-7 w-7 flex items-center justify-center rounded-md transition-colors active:scale-[0.98] ${
+              editHistory.canUndo
+                ? "text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800"
+                : "text-neutral-700 cursor-default"
+            }`}
+            aria-label="Undo"
+          >
+            <RotateCcw size={14} />
+          </button>
+        </Tooltip>
+        <Tooltip
+          label={
             editHistory.redoLabel
               ? `Redo ${editHistory.redoLabel} (${getHistoryShortcutLabel("redo")})`
               : `Redo (${getHistoryShortcutLabel("redo")})`
           }
-          aria-label="Redo"
-        >
-          <RotateCw size={14} />
-        </button>
-        <a
-          href={captureFrameHref}
-          download={captureFrameFilename}
-          onClick={(e) => {
-            trackStudioEvent("toolbar_action", { action: "capture_frame" });
-            handleCaptureFrameClick(e);
-          }}
-          onFocus={refreshCaptureFrameTime}
-          onPointerDown={refreshCaptureFrameTime}
-          className="h-7 flex items-center gap-1.5 px-2.5 rounded-md text-[11px] font-medium text-neutral-400 transition-colors hover:text-neutral-200 hover:bg-neutral-800"
-          title="Capture current frame"
-          aria-label="Capture current frame"
+          side="bottom"
         >
-          <Camera size={14} />
-          <span>Capture</span>
-        </a>
-        <button
-          type="button"
-          onClick={() => {
-            if (!STUDIO_INSPECTOR_PANELS_ENABLED) return;
-            if (rightCollapsed || !inspectorPanelActive) {
-              trackStudioEvent("panel_toggle", { panel: "inspector", collapsed: false });
-              setRightPanelTab("design");
-              setRightCollapsed(false);
-              return;
-            }
-            trackStudioEvent("panel_toggle", { panel: "inspector", collapsed: true });
-            // Keep the current selection when collapsing the Inspector — closing
-            // the panel shouldn't deselect the element.
-            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={
+          <button
+            type="button"
+            onClick={() => {
+              trackStudioEvent("toolbar_action", { action: "redo" });
+              void handleRedo();
+            }}
+            disabled={!editHistory.canRedo}
+            className={`h-7 w-7 flex items-center justify-center rounded-md transition-colors active:scale-[0.98] ${
+              editHistory.canRedo
+                ? "text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800"
+                : "text-neutral-700 cursor-default"
+            }`}
+            aria-label="Redo"
+          >
+            <RotateCw size={14} />
+          </button>
+        </Tooltip>
+        <Tooltip label={capturing ? "Capturing frame…" : "Capture current frame"} side="bottom">
+          <a
+            href={captureFrameHref}
+            download={captureFrameFilename}
+            onClick={(e) => {
+              if (capturing) {
+                e.preventDefault();
+                return;
+              }
+              trackStudioEvent("toolbar_action", { action: "capture_frame" });
+              handleCaptureFrameClick(e);
+            }}
+            onFocus={refreshCaptureFrameTime}
+            onPointerDown={refreshCaptureFrameTime}
+            aria-disabled={capturing || undefined}
+            className={`h-7 flex items-center gap-1.5 px-2.5 rounded-md text-[11px] font-medium transition-colors ${
+              capturing
+                ? "text-neutral-600 cursor-default"
+                : "text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800 active:scale-[0.98]"
+            }`}
+            aria-label={capturing ? "Capturing frame" : "Capture current frame"}
+          >
+            {capturing ? (
+              <svg
+                className="animate-spin motion-reduce:animate-none h-3.5 w-3.5"
+                viewBox="0 0 24 24"
+                fill="none"
+                aria-hidden="true"
+              >
+                <circle
+                  className="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  strokeWidth="4"
+                />
+                <path
+                  className="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                />
+              </svg>
+            ) : (
+              <Camera size={14} />
+            )}
+            <span>{capturing ? "Capturing…" : "Capture"}</span>
+          </a>
+        </Tooltip>
+        <Tooltip
+          label={
             STUDIO_INSPECTOR_PANELS_ENABLED ? "Inspector" : STUDIO_MANUAL_EDITING_DISABLED_TITLE
           }
+          side="bottom"
         >
-          <svg
-            width="12"
-            height="12"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
+          <button
+            type="button"
+            onClick={() => {
+              if (!STUDIO_INSPECTOR_PANELS_ENABLED) return;
+              if (rightCollapsed || !inspectorPanelActive) {
+                trackStudioEvent("panel_toggle", { panel: "inspector", collapsed: false });
+                setRightPanelTab("design");
+                setRightCollapsed(false);
+                return;
+              }
+              trackStudioEvent("panel_toggle", { panel: "inspector", collapsed: true });
+              // Keep the current selection when collapsing the Inspector — closing
+              // the panel shouldn't deselect the element.
+              setRightCollapsed(true);
+            }}
+            disabled={!STUDIO_INSPECTOR_PANELS_ENABLED}
+            aria-pressed={inspectorButtonActive}
+            className={`h-7 flex items-center gap-1.5 px-2.5 rounded-md text-[11px] font-medium border transition-colors active:scale-[0.98] ${
+              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"
+            }`}
+            aria-label={
+              STUDIO_INSPECTOR_PANELS_ENABLED ? "Inspector" : STUDIO_MANUAL_EDITING_DISABLED_TITLE
+            }
           >
-            <circle cx="12" cy="12" r="10" />
-            <polygon points="10 8 16 12 10 16" fill="currentColor" stroke="none" />
-          </svg>
-          Inspector
-        </button>
-        <button
-          type="button"
-          onClick={() => {
-            setRightPanelTab("renders");
-            setRightCollapsed(false);
-            onExport?.();
-          }}
-          className="h-7 flex items-center gap-1.5 px-3 rounded-md text-[11px] font-semibold bg-studio-accent text-[#09090B] hover:brightness-110 transition-colors"
+            <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>
+        </Tooltip>
+        <Tooltip
+          label={
+            isRendering ? "A render is already in progress" : "Render and export this composition"
+          }
+          side="bottom"
         >
-          Export
-        </button>
+          <button
+            type="button"
+            disabled={isRendering}
+            onClick={() => {
+              if (isRendering) return;
+              setRightPanelTab("renders");
+              setRightCollapsed(false);
+              onExport?.();
+            }}
+            className="h-7 flex items-center gap-1.5 px-3 rounded-md text-[11px] font-semibold bg-studio-accent text-[#09090B] enabled:hover:brightness-110 transition-[filter,transform] enabled:active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {isRendering ? "Rendering…" : "Export"}
+          </button>
+        </Tooltip>
       </div>
     </div>
   );

package/src/components/StudioLeftSidebar.tsx

@@ -34,6 +34,7 @@ export function StudioLeftSidebar({
   const {
     leftCollapsed,
     leftWidth,
+    setLeftWidth,
     toggleLeftSidebar,
     handlePanelResizeStart,
     handlePanelResizeMove,
@@ -114,14 +115,22 @@ export function StudioLeftSidebar({
         onRenameFile={handleRenameFile}
         onDuplicateFile={handleDuplicateFile}
         onMoveFile={handleMoveFile}
-        onImportFiles={handleImportFiles}
+        onImportFiles={async (files, dir) => {
+          await handleImportFiles(files, dir);
+        }}
         codeChildren={
           editingFile ? (
             isMediaFile(editingFile.path) ? (
               <MediaPreview projectId={projectId} filePath={editingFile.path} />
+            ) : editingFile.content == null ? (
+              // Never mount the editor on unloaded content: a keystroke would
+              // autosave an empty document over the real file.
+              <div className="flex h-full items-center justify-center text-[11px] text-neutral-600">
+                Loading {editingFile.path}…
+              </div>
             ) : (
               <SourceEditor
-                content={editingFile.content ?? ""}
+                content={editingFile.content}
                 filePath={editingFile.path}
                 onChange={handleContentChange}
                 revealOffset={revealSourceOffset}
@@ -140,11 +149,23 @@ export function StudioLeftSidebar({
         onPreviewBlock={onPreviewBlock}
       />
       <div
-        className="group w-2 flex-shrink-0 cursor-col-resize flex items-center justify-center"
+        role="separator"
+        aria-label="Resize sidebar"
+        aria-orientation="vertical"
+        tabIndex={0}
+        className="group w-2 flex-shrink-0 cursor-col-resize flex items-center justify-center outline-none focus-visible:bg-studio-accent/20"
         style={{ touchAction: "none" }}
         onPointerDown={(e) => handlePanelResizeStart("left", e)}
         onPointerMove={handlePanelResizeMove}
         onPointerUp={handlePanelResizeEnd}
+        onPointerCancel={handlePanelResizeEnd}
+        onKeyDown={(e) => {
+          if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+          e.preventDefault();
+          const delta = e.key === "ArrowLeft" ? -16 : 16;
+          const maxLeft = Math.floor(window.innerWidth * 0.5);
+          setLeftWidth(Math.max(160, Math.min(maxLeft, leftWidth + delta)));
+        }}
       >
         <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/StudioOverlays.tsx

@@ -11,6 +11,7 @@ type LintFindings = ComponentProps<typeof LintModal>["findings"];
 
 export interface StudioOverlaysProps {
   projectId: string;
+  projectDir?: string | null;
   lintModal: LintFindings | null;
   closeLintModal: () => void;
   consoleErrors: LintFindings | null;
@@ -18,8 +19,8 @@ export interface StudioOverlaysProps {
   domEditSession: ReturnType<typeof useDomEditSession>;
   activeCompPath: string | null;
   dragOverlayActive: boolean;
-  appToast: ReturnType<typeof useToast>["appToast"];
-  dismissToast: () => void;
+  toasts: ReturnType<typeof useToast>["toasts"];
+  dismissToast: (id: number) => void;
 }
 
 /**
@@ -30,6 +31,7 @@ export interface StudioOverlaysProps {
 // fallow-ignore-next-line complexity
 export function StudioOverlays({
   projectId,
+  projectDir,
   lintModal,
   closeLintModal,
   consoleErrors,
@@ -37,16 +39,30 @@ export function StudioOverlays({
   domEditSession,
   activeCompPath,
   dragOverlayActive,
-  appToast,
+  toasts,
   dismissToast,
 }: StudioOverlaysProps) {
   return (
     <>
       {lintModal !== null && (
-        <LintModal findings={lintModal} projectId={projectId} onClose={closeLintModal} />
+        <LintModal
+          findings={lintModal}
+          projectId={projectId}
+          projectDir={projectDir}
+          onClose={closeLintModal}
+        />
       )}
-      {consoleErrors !== null && consoleErrors.length > 0 && (
-        <LintModal findings={consoleErrors} projectId={projectId} onClose={clearConsoleErrors} />
+      {/* One modal at a time — console errors wait behind an open lint modal
+          instead of stacking two full-screen overlays. */}
+      {lintModal === null && consoleErrors !== null && consoleErrors.length > 0 && (
+        <LintModal
+          findings={consoleErrors}
+          projectId={projectId}
+          projectDir={projectDir}
+          title="Console errors in preview"
+          promptIntro="Fix these runtime console errors from the composition preview"
+          onClose={clearConsoleErrors}
+        />
       )}
       {domEditSession.agentModalOpen && domEditSession.domEditSelection && (
         <AskAgentModal
@@ -62,8 +78,18 @@ export function StudioOverlays({
         />
       )}
       {dragOverlayActive && <StudioGlobalDragOverlay />}
-      {appToast && (
-        <StudioToast message={appToast.message} tone={appToast.tone} onDismiss={dismissToast} />
+      {toasts.length > 0 && (
+        <div className="absolute bottom-6 right-6 z-[91] flex flex-col items-end gap-2">
+          {toasts.map((toast) => (
+            <StudioToast
+              key={toast.id}
+              message={toast.message}
+              tone={toast.tone}
+              leaving={toast.leaving}
+              onDismiss={() => dismissToast(toast.id)}
+            />
+          ))}
+        </div>
       )}
     </>
   );

package/src/components/StudioPreviewArea.tsx

@@ -69,6 +69,8 @@ export interface StudioPreviewAreaProps {
   isGestureRecording?: boolean;
   recordingState?: GestureRecordingState;
   onToggleRecording?: () => void;
+  cropMode?: boolean;
+  onCropModeChange?: (active: boolean) => void;
   gestureOverlay?: ReactNode;
 }
 
@@ -93,6 +95,8 @@ export function StudioPreviewArea({
   isGestureRecording,
   recordingState,
   onToggleRecording,
+  cropMode,
+  onCropModeChange,
   blockPreview,
   gestureOverlay,
 }: StudioPreviewAreaProps) {
@@ -132,6 +136,7 @@ export function StudioPreviewArea({
     handleDomGroupPathOffsetCommit,
     handleDomBoxSizeCommit,
     handleDomRotationCommit,
+    handleDomStyleCommit,
     handleGsapRemoveKeyframe,
     handleGsapMoveKeyframeToPlayhead,
     handleGsapMoveKeyframe,
@@ -375,6 +380,9 @@ export function StudioPreviewArea({
                     onGroupPathOffsetCommit={handleDomGroupPathOffsetCommit}
                     onBoxSizeCommit={handleDomBoxSizeCommit}
                     onRotationCommit={handleDomRotationCommit}
+                    onStyleCommit={handleDomStyleCommit}
+                    cropMode={cropMode}
+                    onCropModeChange={onCropModeChange}
                     gridVisible={snapPrefs.gridVisible}
                     gridSpacing={snapPrefs.gridSpacing}
                     recordingState={recordingState}