@hyperframes/studio 0.6.5 → 0.6.7

package/src/components/editor/manualEditsParsing.ts

@@ -1,142 +1,10 @@
-import type { DomEditSelection } from "./domEditing";
-import type {
-  StudioManualEdit,
-  StudioManualEditManifest,
-  StudioManualEditTarget,
-  StudioPathOffsetEdit,
-  StudioBoxSizeEdit,
-  StudioRotationEdit,
-} from "./manualEditsTypes";
-import { STUDIO_MANUAL_EDITS_PATH } from "./manualEditsTypes";
-
 /* ── Helpers ──────────────────────────────────────────────────────── */
 export function finiteNumber(value: unknown): number | null {
   return typeof value === "number" && Number.isFinite(value) ? value : null;
 }
 
-/* ── Manifest factory ─────────────────────────────────────────────── */
-export function emptyStudioManualEditManifest(): StudioManualEditManifest {
-  return { version: 1, edits: [] };
-}
-
-/* ── Parsing ──────────────────────────────────────────────────────── */
-function parsePathOffsetEdit(value: unknown): StudioPathOffsetEdit | null {
-  if (!value || typeof value !== "object") return null;
-  const record = value as Record<string, unknown>;
-  if (record.kind !== "path-offset") return null;
-  const target = record.target;
-  if (!target || typeof target !== "object") return null;
-  const targetRecord = target as Record<string, unknown>;
-  const sourceFile = typeof targetRecord.sourceFile === "string" ? targetRecord.sourceFile : "";
-  if (!sourceFile) return null;
-
-  const selector = typeof targetRecord.selector === "string" ? targetRecord.selector : undefined;
-  const id = typeof targetRecord.id === "string" ? targetRecord.id : undefined;
-  if (!selector && !id) return null;
-
-  const x = finiteNumber(record.x);
-  const y = finiteNumber(record.y);
-  if (x == null || y == null) return null;
-
-  return {
-    kind: "path-offset",
-    target: {
-      sourceFile,
-      selector,
-      selectorIndex: finiteNumber(targetRecord.selectorIndex) ?? undefined,
-      id,
-    },
-    x,
-    y,
-    updatedAt: typeof record.updatedAt === "string" ? record.updatedAt : undefined,
-  };
-}
-
-function parseBoxSizeEdit(value: unknown): StudioBoxSizeEdit | null {
-  if (!value || typeof value !== "object") return null;
-  const record = value as Record<string, unknown>;
-  if (record.kind !== "box-size") return null;
-  const target = record.target;
-  if (!target || typeof target !== "object") return null;
-  const targetRecord = target as Record<string, unknown>;
-  const sourceFile = typeof targetRecord.sourceFile === "string" ? targetRecord.sourceFile : "";
-  if (!sourceFile) return null;
-
-  const selector = typeof targetRecord.selector === "string" ? targetRecord.selector : undefined;
-  const id = typeof targetRecord.id === "string" ? targetRecord.id : undefined;
-  if (!selector && !id) return null;
-
-  const width = finiteNumber(record.width);
-  const height = finiteNumber(record.height);
-  if (width == null || height == null || width <= 0 || height <= 0) return null;
-
-  return {
-    kind: "box-size",
-    target: {
-      sourceFile,
-      selector,
-      selectorIndex: finiteNumber(targetRecord.selectorIndex) ?? undefined,
-      id,
-    },
-    width,
-    height,
-    updatedAt: typeof record.updatedAt === "string" ? record.updatedAt : undefined,
-  };
-}
-
-function parseRotationEdit(value: unknown): StudioRotationEdit | null {
-  if (!value || typeof value !== "object") return null;
-  const record = value as Record<string, unknown>;
-  if (record.kind !== "rotation") return null;
-  const target = record.target;
-  if (!target || typeof target !== "object") return null;
-  const targetRecord = target as Record<string, unknown>;
-  const sourceFile = typeof targetRecord.sourceFile === "string" ? targetRecord.sourceFile : "";
-  if (!sourceFile) return null;
-
-  const selector = typeof targetRecord.selector === "string" ? targetRecord.selector : undefined;
-  const id = typeof targetRecord.id === "string" ? targetRecord.id : undefined;
-  if (!selector && !id) return null;
-
-  const angle = finiteNumber(record.angle);
-  if (angle == null) return null;
-
-  return {
-    kind: "rotation",
-    target: {
-      sourceFile,
-      selector,
-      selectorIndex: finiteNumber(targetRecord.selectorIndex) ?? undefined,
-      id,
-    },
-    angle,
-    updatedAt: typeof record.updatedAt === "string" ? record.updatedAt : undefined,
-  };
-}
-
-function parseManualEdit(value: unknown): StudioManualEdit | null {
-  return parsePathOffsetEdit(value) ?? parseBoxSizeEdit(value) ?? parseRotationEdit(value);
-}
-
-export function parseStudioManualEditManifest(content: string): StudioManualEditManifest {
-  if (!content.trim()) return emptyStudioManualEditManifest();
-
-  try {
-    const parsed = JSON.parse(content) as unknown;
-    if (!parsed || typeof parsed !== "object") return emptyStudioManualEditManifest();
-    const edits = (parsed as { edits?: unknown }).edits;
-    if (!Array.isArray(edits)) return emptyStudioManualEditManifest();
-    return {
-      version: 1,
-      edits: edits.map(parseManualEdit).filter((edit): edit is StudioManualEdit => edit !== null),
-    };
-  } catch {
-    return emptyStudioManualEditManifest();
-  }
-}
-
-export function serializeStudioManualEditManifest(manifest: StudioManualEditManifest): string {
-  return `${JSON.stringify(manifest, null, 2)}\n`;
+export function roundRotationAngle(angle: number): number {
+  return Math.round(angle * 10) / 10;
 }
 
 /* ── File path utilities ──────────────────────────────────────────── */
@@ -172,109 +40,3 @@ function readStudioFileChangePathFromValue(value: unknown): string | null {
 export function readStudioFileChangePath(payload: unknown): string | null {
   return readStudioFileChangePathFromValue(payload);
 }
-
-export function isStudioManualEditManifestPath(path: string | null): boolean {
-  if (!path) return false;
-  const normalized = normalizeStudioFileChangePath(path);
-  return (
-    normalized === STUDIO_MANUAL_EDITS_PATH || normalized.endsWith(`/${STUDIO_MANUAL_EDITS_PATH}`)
-  );
-}
-
-/* ── Target / upsert helpers ──────────────────────────────────────── */
-function selectionTarget(selection: DomEditSelection): StudioManualEditTarget {
-  return {
-    sourceFile: selection.sourceFile || "index.html",
-    selector: selection.selector,
-    selectorIndex: selection.selectorIndex,
-    id: selection.id ?? undefined,
-  };
-}
-
-function targetKey(target: StudioManualEditTarget): string {
-  return [
-    target.sourceFile,
-    target.id ?? "",
-    target.selector ?? "",
-    target.selectorIndex ?? "",
-  ].join("|");
-}
-
-export function roundRotationAngle(angle: number): number {
-  return Math.round(angle * 10) / 10;
-}
-
-export function upsertStudioPathOffsetEdit(
-  manifest: StudioManualEditManifest,
-  selection: DomEditSelection,
-  offset: { x: number; y: number },
-): StudioManualEditManifest {
-  const target = selectionTarget(selection);
-  const key = targetKey(target);
-  const nextEdit: StudioPathOffsetEdit = {
-    kind: "path-offset",
-    target,
-    x: Math.round(offset.x),
-    y: Math.round(offset.y),
-    updatedAt: new Date().toISOString(),
-  };
-
-  const edits = manifest.edits.filter(
-    (edit) => edit.kind !== "path-offset" || targetKey(edit.target) !== key,
-  );
-  edits.push(nextEdit);
-  return { version: 1, edits };
-}
-
-export function upsertStudioBoxSizeEdit(
-  manifest: StudioManualEditManifest,
-  selection: DomEditSelection,
-  size: { width: number; height: number },
-): StudioManualEditManifest {
-  const target = selectionTarget(selection);
-  const key = targetKey(target);
-  const nextEdit: StudioBoxSizeEdit = {
-    kind: "box-size",
-    target,
-    width: Math.round(Math.max(1, size.width)),
-    height: Math.round(Math.max(1, size.height)),
-    updatedAt: new Date().toISOString(),
-  };
-
-  const edits = manifest.edits.filter(
-    (edit) => edit.kind !== "box-size" || targetKey(edit.target) !== key,
-  );
-  edits.push(nextEdit);
-  return { version: 1, edits };
-}
-
-export function upsertStudioRotationEdit(
-  manifest: StudioManualEditManifest,
-  selection: DomEditSelection,
-  rotation: { angle: number },
-): StudioManualEditManifest {
-  const target = selectionTarget(selection);
-  const key = targetKey(target);
-  const nextEdit: StudioRotationEdit = {
-    kind: "rotation",
-    target,
-    angle: roundRotationAngle(rotation.angle),
-    updatedAt: new Date().toISOString(),
-  };
-
-  const edits = manifest.edits.filter(
-    (edit) => edit.kind !== "rotation" || targetKey(edit.target) !== key,
-  );
-  edits.push(nextEdit);
-  return { version: 1, edits };
-}
-
-export function removeStudioManualEditsForSelection(
-  manifest: StudioManualEditManifest,
-  selection: DomEditSelection,
-): StudioManualEditManifest {
-  const key = targetKey(selectionTarget(selection));
-  const edits = manifest.edits.filter((edit) => targetKey(edit.target) !== key);
-  if (edits.length === manifest.edits.length) return manifest;
-  return { version: 1, edits };
-}

package/src/components/editor/manualEditsTypes.ts

@@ -1,5 +1,4 @@
 /* ── Public constants ──────────────────────────────────────────────── */
-export const STUDIO_MANUAL_EDITS_PATH = ".hyperframes/studio-manual-edits.json";
 export const STUDIO_OFFSET_X_PROP = "--hf-studio-offset-x";
 export const STUDIO_OFFSET_Y_PROP = "--hf-studio-offset-y";
 export const STUDIO_WIDTH_PROP = "--hf-studio-width";
@@ -40,44 +39,6 @@ export const STUDIO_MANUAL_EDITS_PLAYBACK_FRAME_PROP = "__hfStudioManualEditsPla
 
 export const STUDIO_ROTATION_TRANSFORM_ORIGIN = "center center";
 
-/* ── Edit types ───────────────────────────────────────────────────── */
-export interface StudioManualEditTarget {
-  sourceFile: string;
-  selector?: string;
-  selectorIndex?: number;
-  id?: string;
-}
-
-export interface StudioPathOffsetEdit {
-  kind: "path-offset";
-  target: StudioManualEditTarget;
-  x: number;
-  y: number;
-  updatedAt?: string;
-}
-
-export interface StudioBoxSizeEdit {
-  kind: "box-size";
-  target: StudioManualEditTarget;
-  width: number;
-  height: number;
-  updatedAt?: string;
-}
-
-export interface StudioRotationEdit {
-  kind: "rotation";
-  target: StudioManualEditTarget;
-  angle: number;
-  updatedAt?: string;
-}
-
-export type StudioManualEdit = StudioPathOffsetEdit | StudioBoxSizeEdit | StudioRotationEdit;
-
-export interface StudioManualEditManifest {
-  version: 1;
-  edits: StudioManualEdit[];
-}
-
 export type StudioManualEditSeekWindow = Window & {
   __hf?: Record<string, unknown>;
   __player?: Record<string, unknown>;
@@ -87,7 +48,7 @@ export type StudioManualEditSeekWindow = Window & {
   __hfStudioManualEditsPlaybackFrame?: number | null;
 };
 
-/* ── Snapshot types ───────────────────────────────────────────────── */
+/* ── Snapshot types (used by drag/drop restore) ───────────────────── */
 export interface StudioBoxSizeSnapshot {
   width: string;
   height: string;

package/src/components/editor/useDomEditOverlayGestures.ts

@@ -23,7 +23,7 @@ import {
   restoreStudioPathOffset,
   restoreStudioRotation,
 } from "./manualEdits";
-import { type GroupOverlayItem, type OverlayRect } from "./domEditOverlayGeometry";
+import { type GroupOverlayItem, type OverlayRect, toOverlayRect } from "./domEditOverlayGeometry";
 import {
   BLOCKED_MOVE_THRESHOLD_PX,
   type BlockedMoveState,
@@ -43,6 +43,7 @@ import {
 // Refs are stable across renders; values are read via .current.
 export type UseDomEditOverlayGesturesOptions = {
   overlayRef: RefObject<HTMLDivElement | null>;
+  iframeRef: RefObject<HTMLIFrameElement | null>;
   boxRef: RefObject<HTMLDivElement | null>;
   selectionRef: RefObject<DomEditSelection | null>;
   overlayRectRef: RefObject<OverlayRect | null>;
@@ -194,17 +195,31 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         dy,
         uniform: e.shiftKey,
       });
+      applyStudioBoxSizeDraft(sel.element, nextSize);
+
+      // Re-read BCR after applying dimensions. For elements with a GSAP
+      // scale transform and centered transform-origin the visual top-left
+      // drifts and the visual size diverges from the raw CSS size, so BCR
+      // is the only accurate source for both.
+      const overlayEl = opts.overlayRef.current;
+      const iframe = opts.iframeRef.current;
+      const refreshed = overlayEl && iframe ? toOverlayRect(overlayEl, iframe, sel.element) : null;
+      const overlayLeft = refreshed ? refreshed.left : g.originLeft;
+      const overlayTop = refreshed ? refreshed.top : g.originTop;
+      const overlayWidth = refreshed ? refreshed.width : nextSize.overlayWidth;
+      const overlayHeight = refreshed ? refreshed.height : nextSize.overlayHeight;
+      box.style.left = `${overlayLeft}px`;
+      box.style.top = `${overlayTop}px`;
+      box.style.width = `${overlayWidth}px`;
+      box.style.height = `${overlayHeight}px`;
       setDraftOverlayRect({
-        left: g.originLeft,
-        top: g.originTop,
-        width: nextSize.overlayWidth,
-        height: nextSize.overlayHeight,
+        left: overlayLeft,
+        top: overlayTop,
+        width: overlayWidth,
+        height: overlayHeight,
         editScaleX: g.editScaleX,
         editScaleY: g.editScaleY,
       });
-      box.style.width = `${nextSize.overlayWidth}px`;
-      box.style.height = `${nextSize.overlayHeight}px`;
-      applyStudioBoxSizeDraft(sel.element, nextSize);
     }
   };
 
@@ -281,6 +296,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         box.style.height = `${g.originHeight}px`;
       }
       restoreGestureOverlayRect(g);
+      opts.suppressNextBoxClickRef.current = true;
       return;
     }
 
@@ -341,6 +357,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
           if (g.pathOffsetMember) endManualOffsetDragMembers([g.pathOffsetMember]);
         });
     } else {
+      opts.suppressNextBoxClickRef.current = true;
       const finalSize = readStudioBoxSize(sel.element);
       applyStudioBoxSize(sel.element, finalSize);
       void Promise.resolve(opts.onBoxSizeCommitRef.current(sel, finalSize))

package/src/components/nle/NLEPreview.tsx

@@ -264,7 +264,7 @@ export const NLEPreview = memo(function NLEPreview({
     <div className="flex flex-col h-full min-h-0">
       <div
         ref={viewportRef}
-        className="relative flex-1 flex items-center justify-center p-2 overflow-hidden min-h-0 outline-none focus:ring-1 focus:ring-studio-accent/40"
+        className="relative flex-1 flex items-center justify-center p-2 overflow-hidden min-h-0 outline-none focus:ring-1 focus:ring-studio-accent/40 bg-neutral-700"
         tabIndex={0}
         aria-label="Composition preview"
         onPointerDown={handlePointerDown}

package/src/components/sidebar/CompositionsTab.tsx

@@ -8,6 +8,8 @@ interface CompositionsTabProps {
 }
 
 const DEFAULT_PREVIEW_STAGE = { width: 1920, height: 1080 };
+const CARD_W = 80;
+const CARD_H = 45;
 const THUMBNAIL_SEEK_TIME_SECONDS = 3;
 const THUMBNAIL_PLAYBACK_SYNC_ATTEMPTS = 10;
 
@@ -132,11 +134,13 @@ function CompCard({
   const name = comp.replace(/^compositions\//, "").replace(/\.html$/, "");
   const previewUrl = `/api/projects/${projectId}/preview/comp/${comp}`;
   const previewScale = resolveCompositionPreviewScale({
-    cardWidth: 80,
-    cardHeight: 45,
+    cardWidth: CARD_W,
+    cardHeight: CARD_H,
     stageWidth: stageSize.width,
     stageHeight: stageSize.height,
   });
+  const thumbnailOffsetX = (CARD_W - stageSize.width * previewScale) / 2;
+  const thumbnailOffsetY = (CARD_H - stageSize.height * previewScale) / 2;
 
   useEffect(() => {
     requestIframePlaybackSync(hovered);
@@ -166,11 +170,13 @@ function CompCard({
           src={previewUrl}
           sandbox="allow-scripts allow-same-origin"
           loading="lazy"
-          className="absolute left-0 top-0 border-none pointer-events-none"
+          className="absolute border-none pointer-events-none"
           style={{
             transformOrigin: "0 0",
             width: stageSize.width,
             height: stageSize.height,
+            left: thumbnailOffsetX,
+            top: thumbnailOffsetY,
             transform: `scale(${previewScale})`,
           }}
           onLoad={(e) => {

package/src/contexts/DomEditContext.tsx

@@ -44,6 +44,7 @@ export function DomEditProvider({
     handleBlockedDomMove,
     handleDomManualDragStart,
     handleDomEditElementDelete,
+    buildDomSelectionFromTarget,
     buildDomSelectionForTimelineElement,
     updateDomEditHoverSelection,
     resolveImportedFontAsset,
@@ -89,6 +90,7 @@ export function DomEditProvider({
       handleBlockedDomMove,
       handleDomManualDragStart,
       handleDomEditElementDelete,
+      buildDomSelectionFromTarget,
       buildDomSelectionForTimelineElement,
       updateDomEditHoverSelection,
       resolveImportedFontAsset,
@@ -128,6 +130,7 @@ export function DomEditProvider({
       handleBlockedDomMove,
       handleDomManualDragStart,
       handleDomEditElementDelete,
+      buildDomSelectionFromTarget,
       buildDomSelectionForTimelineElement,
       updateDomEditHoverSelection,
       resolveImportedFontAsset,

package/src/contexts/FileManagerContext.tsx

@@ -17,6 +17,7 @@ export function FileManagerProvider({
     setEditingFile,
     projectDir,
     fileTree,
+    fileTreeLoaded,
     setFileTree,
     editingPathRef,
     projectIdRef,
@@ -52,6 +53,7 @@ export function FileManagerProvider({
       setEditingFile,
       projectDir,
       fileTree,
+      fileTreeLoaded,
       setFileTree,
       editingPathRef,
       projectIdRef,
@@ -81,6 +83,7 @@ export function FileManagerProvider({
       setEditingFile,
       projectDir,
       fileTree,
+      fileTreeLoaded,
       setFileTree,
       editingPathRef,
       projectIdRef,

package/src/hooks/useAppHotkeys.ts

@@ -3,7 +3,6 @@ import { usePlayerStore } from "../player";
 import type { TimelineElement } from "../player";
 import type { DomEditSelection } from "../components/editor/domEditing";
 import type { LeftSidebarHandle } from "../components/sidebar/LeftSidebar";
-import { STUDIO_MANUAL_EDITS_PATH } from "../components/editor/manualEdits";
 import { STUDIO_MOTION_PATH } from "../components/editor/studioMotion";
 import { shouldHandleTimelineToggleHotkey, isEditableTarget } from "../utils/timelineDiscovery";
 import { shouldIgnoreHistoryShortcut } from "../utils/studioHelpers";
@@ -85,9 +84,7 @@ export function useAppHotkeys({
 
   const readHistoryProjectFile = useCallback(
     async (path: string): Promise<string> => {
-      return path === STUDIO_MANUAL_EDITS_PATH || path === STUDIO_MOTION_PATH
-        ? readOptionalProjectFile(path)
-        : readProjectFile(path);
+      return path === STUDIO_MOTION_PATH ? readOptionalProjectFile(path) : readProjectFile(path);
     },
     [readOptionalProjectFile, readProjectFile],
   );