@hyperframes/studio 0.6.0-alpha.8 → 0.6.0

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>
+    </>
+  );
+}

package/src/components/TimelineToolbar.tsx

@@ -0,0 +1,89 @@
+import {
+  getNextTimelineZoomPercent,
+  getTimelineZoomPercent,
+} from "../player/components/timelineZoom";
+import { getTimelineToggleTitle } from "../utils/timelineDiscovery";
+import { usePlayerStore } from "../player";
+
+interface TimelineToolbarProps {
+  toggleTimelineVisibility: () => void;
+}
+
+export function TimelineToolbar({ toggleTimelineVisibility }: TimelineToolbarProps) {
+  const zoomMode = usePlayerStore((s) => s.zoomMode);
+  const manualZoomPercent = usePlayerStore((s) => s.manualZoomPercent);
+  const setZoomMode = usePlayerStore((s) => s.setZoomMode);
+  const setManualZoomPercent = usePlayerStore((s) => s.setManualZoomPercent);
+  const displayedTimelineZoomPercent = getTimelineZoomPercent(zoomMode, manualZoomPercent);
+
+  return (
+    <div className="border-b border-neutral-800/40 bg-neutral-950/96">
+      <div className="flex items-center justify-between px-3 py-2">
+        <div className="text-[10px] font-medium uppercase tracking-[0.16em] text-neutral-500">
+          Timeline
+        </div>
+        <div className="flex items-center gap-1">
+          <button
+            type="button"
+            onClick={() => setZoomMode("fit")}
+            className={`h-7 px-2.5 rounded-md border text-[11px] font-medium transition-colors ${
+              zoomMode === "fit"
+                ? "border-studio-accent/30 bg-studio-accent/10 text-studio-accent"
+                : "border-neutral-800 text-neutral-400 hover:border-neutral-700 hover:text-neutral-200"
+            }`}
+            title="Fit timeline to width"
+          >
+            Fit
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              setZoomMode("manual");
+              setManualZoomPercent(getNextTimelineZoomPercent("out", zoomMode, manualZoomPercent));
+            }}
+            className="h-7 w-7 rounded-md border border-neutral-800 text-neutral-400 transition-colors hover:border-neutral-700 hover:text-neutral-200"
+            title="Zoom out"
+          >
+            -
+          </button>
+          <div className="min-w-[58px] text-center text-[10px] font-medium tabular-nums text-neutral-500">
+            {`${displayedTimelineZoomPercent}%`}
+          </div>
+          <button
+            type="button"
+            onClick={() => {
+              setZoomMode("manual");
+              setManualZoomPercent(getNextTimelineZoomPercent("in", zoomMode, manualZoomPercent));
+            }}
+            className="h-7 w-7 rounded-md border border-neutral-800 text-neutral-400 transition-colors hover:border-neutral-700 hover:text-neutral-200"
+            title="Zoom in"
+          >
+            +
+          </button>
+          <button
+            type="button"
+            onClick={toggleTimelineVisibility}
+            className="ml-1 flex h-7 w-7 items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-neutral-900 hover:text-neutral-200"
+            title={getTimelineToggleTitle(true)}
+            aria-label="Hide timeline editor"
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.8"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M5 7h14" />
+              <path d="m8 11 4 4 4-4" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/editor/DomEditOverlay.tsx

@@ -85,6 +85,20 @@ interface DomEditOverlayProps {
   onRotationCommit: (selection: DomEditSelection, next: { angle: number }) => Promise<void> | void;
 }
 
+function isElementVisibleForOverlay(el: HTMLElement): boolean {
+  const win = el.ownerDocument.defaultView;
+  if (!win) return true;
+  let current: HTMLElement | null = el;
+  while (current) {
+    const computed = win.getComputedStyle(current);
+    if (computed.display === "none" || computed.visibility === "hidden") return false;
+    const opacity = Number.parseFloat(computed.opacity);
+    if (Number.isFinite(opacity) && opacity <= 0.01) return false;
+    current = current.parentElement;
+  }
+  return true;
+}
+
 function toOverlayRect(
   overlayEl: HTMLDivElement,
   iframe: HTMLIFrameElement,
@@ -534,7 +548,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
 
       if (sel) {
         const el = resolveElement(doc, sel, resolvedElementRef);
-        if (el) {
+        if (el && isElementVisibleForOverlay(el)) {
           setNextOverlayRect(toOverlayRect(overlayEl, iframe, el));
         } else {
           clearOverlayRect();

package/src/components/editor/PropertyPanel.test.ts

@@ -4,10 +4,8 @@ import {
   buildStrokeWidthStyleUpdates,
   getClipPathInsetPx,
   getCssFilterFunctionPx,
-  getPropertyPanelVisibleSections,
   inferBoxShadowPreset,
   inferClipPathPreset,
-  isPropertyPanelMediaLikeSelection,
   normalizePanelPxValue,
   setCssFilterFunctionPx,
 } from "./PropertyPanel";
@@ -66,51 +64,4 @@ describe("PropertyPanel style helpers", () => {
     expect(buildStrokeStyleUpdates("none", "4px")).toEqual([["border-style", "none"]]);
     expect(buildStrokeStyleUpdates("solid", "4px")).toEqual([["border-style", "solid"]]);
   });
-
-  it("orders the simplified default inspector sections around high-confidence edits", () => {
-    expect(
-      getPropertyPanelVisibleSections({
-        hasSelection: true,
-        canEditStyles: true,
-        hasTextControls: true,
-        hasColorControls: true,
-      }),
-    ).toEqual(["Text", "Layout", "Colors", "Radius", "Shadow"]);
-
-    expect(
-      getPropertyPanelVisibleSections({
-        hasSelection: true,
-        canEditStyles: true,
-        hasTextControls: false,
-        hasColorControls: false,
-      }),
-    ).toEqual(["Layout", "Radius", "Shadow"]);
-  });
-
-  it("treats media tags and background-image layers as image-like controls", () => {
-    expect(
-      isPropertyPanelMediaLikeSelection({
-        tagName: "img",
-        styles: {},
-      }),
-    ).toBe(true);
-
-    expect(
-      isPropertyPanelMediaLikeSelection({
-        tagName: "div",
-        styles: {
-          "background-image": "url(/assets/studio.png)",
-        },
-      }),
-    ).toBe(true);
-
-    expect(
-      isPropertyPanelMediaLikeSelection({
-        tagName: "div",
-        styles: {
-          "background-image": "none",
-        },
-      }),
-    ).toBe(false);
-  });
 });