@hyperframes/studio 0.6.53 → 0.6.54

package/src/components/editor/EaseCurveSection.tsx

@@ -0,0 +1,213 @@
+import { useCallback, useRef, useState } from "react";
+import { EASE_CURVES, EASE_LABELS, parseCustomEaseFromString } from "./gsapAnimationConstants";
+
+function round2(n: number): number {
+  return Math.round(n * 100) / 100;
+}
+
+export function EaseCurveSection({
+  ease,
+  duration,
+  onCustomEaseCommit,
+}: {
+  ease: string;
+  duration?: number;
+  onCustomEaseCommit: (ease: string) => void;
+}) {
+  const isCustom = ease.startsWith("custom(");
+  const curveFromPreset = EASE_CURVES[ease];
+  const customPoints = isCustom ? parseCustomEaseFromString(ease) : null;
+  const curve: [number, number, number, number] | null =
+    isCustom && customPoints
+      ? [customPoints.x1, customPoints.y1, customPoints.x2, customPoints.y2]
+      : (curveFromPreset ?? null);
+
+  const [draft, setDraft] = useState<[number, number, number, number] | null>(null);
+  const [progress, setProgress] = useState<number | null>(null);
+  const draggingRef = useRef<"p1" | "p2" | null>(null);
+  const svgRef = useRef<SVGSVGElement | null>(null);
+  const rafRef = useRef<number>(0);
+
+  const play = useCallback(() => {
+    const start = performance.now();
+    const dur = 1000;
+    const tick = (now: number) => {
+      const t = Math.min((now - start) / dur, 1);
+      setProgress(t);
+      if (t < 1) rafRef.current = requestAnimationFrame(tick);
+      else setTimeout(() => setProgress(null), 400);
+    };
+    cancelAnimationFrame(rafRef.current);
+    rafRef.current = requestAnimationFrame(tick);
+  }, []);
+
+  const active = draft ?? curve;
+  if (!active) return null;
+  const [x1, y1, x2, y2] = active;
+
+  const w = 200;
+  const h = 100;
+  const pad = 14;
+  const gw = w - pad * 2;
+  const gh = h - pad * 2;
+
+  const toSvg = (px: number, py: number) => ({
+    x: pad + gw * px,
+    y: h - pad - gh * py,
+  });
+
+  const curvePath = `M${pad},${h - pad} C${toSvg(x1, y1).x},${toSvg(x1, y1).y} ${toSvg(x2, y2).x},${toSvg(x2, y2).y} ${w - pad},${pad}`;
+
+  let dotX = pad;
+  let dotY = h - pad;
+  if (progress !== null) {
+    const t = progress;
+    const mt = 1 - t;
+    dotX = pad + gw * (mt * mt * mt * 0 + 3 * mt * mt * t * x1 + 3 * mt * t * t * x2 + t * t * t);
+    dotY =
+      h - pad - gh * (mt * mt * mt * 0 + 3 * mt * mt * t * y1 + 3 * mt * t * t * y2 + t * t * t);
+  }
+
+  const handlePointerDown = (handle: "p1" | "p2", e: React.PointerEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    draggingRef.current = handle;
+    (e.target as SVGElement).setPointerCapture(e.pointerId);
+    if (!draft) setDraft([x1, y1, x2, y2]);
+  };
+
+  const handlePointerMove = (e: React.PointerEvent<SVGSVGElement>) => {
+    if (!draggingRef.current || !svgRef.current) return;
+    e.preventDefault();
+    const rect = svgRef.current.getBoundingClientRect();
+    const sx = ((e.clientX - rect.left) / rect.width) * w;
+    const sy = ((e.clientY - rect.top) / rect.height) * h;
+    const px = Math.max(0, Math.min(1, (sx - pad) / gw));
+    const py = Math.max(-1, Math.min(2, (h - pad - sy) / gh));
+    const prev = draft ?? [x1, y1, x2, y2];
+    const next: [number, number, number, number] =
+      draggingRef.current === "p1"
+        ? [round2(px), round2(py), prev[2], prev[3]]
+        : [prev[0], prev[1], round2(px), round2(py)];
+    setDraft(next);
+  };
+
+  const handlePointerUp = () => {
+    if (!draggingRef.current || !draft) return;
+    draggingRef.current = null;
+    const path = `M0,0 C${draft[0]},${draft[1]} ${draft[2]},${draft[3]} 1,1`;
+    onCustomEaseCommit(`custom(${path})`);
+    setDraft(null);
+  };
+
+  const p1 = toSvg(x1, y1);
+  const p2 = toSvg(x2, y2);
+  const start = toSvg(0, 0);
+  const end = toSvg(1, 1);
+  const label = isCustom ? "Custom curve" : (EASE_LABELS[ease] ?? ease);
+
+  return (
+    <div className="rounded-lg bg-neutral-900/50 p-2">
+      <div className="mb-1.5 flex items-center justify-between">
+        <span className="text-[10px] font-medium text-neutral-500">Speed curve</span>
+        <button
+          type="button"
+          onClick={play}
+          className="rounded px-1.5 py-0.5 text-[10px] font-medium text-emerald-400 transition-colors hover:bg-emerald-500/10"
+        >
+          {progress !== null ? "Playing…" : "Preview"}
+        </button>
+      </div>
+      <div className="overflow-hidden rounded pt-[72px] -mt-[72px]">
+        <svg
+          ref={svgRef}
+          width="100%"
+          height={h}
+          viewBox={`0 0 ${w} ${h}`}
+          preserveAspectRatio="none"
+          style={{ overflow: "visible" }}
+          className="touch-none select-none"
+          onPointerMove={handlePointerMove}
+          onPointerUp={handlePointerUp}
+          onPointerCancel={handlePointerUp}
+        >
+          <line
+            x1={pad}
+            y1={h - pad}
+            x2={w - pad}
+            y2={h - pad}
+            stroke="white"
+            strokeOpacity="0.06"
+            strokeWidth="0.5"
+          />
+          <line
+            x1={pad}
+            y1={pad}
+            x2={pad}
+            y2={h - pad}
+            stroke="white"
+            strokeOpacity="0.06"
+            strokeWidth="0.5"
+          />
+          <line
+            x1={start.x}
+            y1={start.y}
+            x2={p1.x}
+            y2={p1.y}
+            stroke="rgba(52,211,153,0.25)"
+            strokeWidth="1"
+          />
+          <line
+            x1={end.x}
+            y1={end.y}
+            x2={p2.x}
+            y2={p2.y}
+            stroke="rgba(52,211,153,0.25)"
+            strokeWidth="1"
+          />
+          <path d={curvePath} fill="none" stroke="#34d399" strokeWidth="2" strokeLinecap="round" />
+          {progress !== null && <circle cx={dotX} cy={dotY} r="4" fill="#34d399" />}
+          <circle
+            cx={p1.x}
+            cy={p1.y}
+            r="5"
+            fill="#0a0a1a"
+            stroke="#34d399"
+            strokeWidth="2"
+            className="cursor-grab active:cursor-grabbing"
+            onPointerDown={(e) => handlePointerDown("p1", e)}
+          />
+          <circle
+            cx={p2.x}
+            cy={p2.y}
+            r="5"
+            fill="#0a0a1a"
+            stroke="#34d399"
+            strokeWidth="2"
+            className="cursor-grab active:cursor-grabbing"
+            onPointerDown={(e) => handlePointerDown("p2", e)}
+          />
+          {duration != null && duration > 0 && (
+            <>
+              <text x={pad} y={h - 1} textAnchor="start" className="fill-neutral-600 text-[8px]">
+                0s
+              </text>
+              <text
+                x={pad + gw / 2}
+                y={h - 1}
+                textAnchor="middle"
+                className="fill-neutral-600 text-[8px]"
+              >
+                {(duration / 2).toFixed(1)}s
+              </text>
+              <text x={w - pad} y={h - 1} textAnchor="end" className="fill-neutral-600 text-[8px]">
+                {duration}s
+              </text>
+            </>
+          )}
+        </svg>
+      </div>
+      <p className="mt-1 text-center text-[10px] text-neutral-500">{label}</p>
+    </div>
+  );
+}

package/src/components/editor/GsapAnimationSection.tsx

@@ -0,0 +1,112 @@
+import { memo, useState } from "react";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import { Film } from "../../icons/SystemIcons";
+import { Section } from "./propertyPanelPrimitives";
+import { ADD_METHODS, ADD_METHOD_LABELS, METHOD_TOOLTIPS } from "./gsapAnimationConstants";
+import { AnimationCard } from "./AnimationCard";
+
+interface GsapAnimationSectionProps {
+  animations: GsapAnimation[];
+  multipleTimelines?: boolean;
+  unsupportedTimelinePattern?: boolean;
+  onUpdateProperty: (animationId: string, property: string, value: number | string) => void;
+  onUpdateMeta: (
+    animationId: string,
+    updates: { duration?: number; ease?: string; position?: number },
+  ) => void;
+  onDeleteAnimation: (animationId: string) => void;
+  onAddProperty: (animationId: string, property: string) => void;
+  onRemoveProperty: (animationId: string, property: string) => void;
+  onAddAnimation: (method: "to" | "from" | "set") => void;
+  onLivePreview?: (property: string, value: number | string) => void;
+  onLivePreviewEnd?: () => void;
+}
+
+export const GsapAnimationSection = memo(function GsapAnimationSection({
+  animations,
+  multipleTimelines,
+  unsupportedTimelinePattern,
+  onUpdateProperty,
+  onUpdateMeta,
+  onDeleteAnimation,
+  onAddProperty,
+  onRemoveProperty,
+  onAddAnimation,
+  onLivePreview,
+  onLivePreviewEnd,
+}: GsapAnimationSectionProps) {
+  const [addMenuOpen, setAddMenuOpen] = useState(false);
+
+  return (
+    <Section title="Animation" icon={<Film size={15} />}>
+      {multipleTimelines && (
+        <p className="mb-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-amber-400">
+          This file has multiple GSAP timelines. Animation editing is disabled to prevent data loss
+          — consolidate into a single timeline to enable editing.
+        </p>
+      )}
+      {unsupportedTimelinePattern && (
+        <p className="mb-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-amber-400">
+          This composition uses a timeline assignment pattern (window.__timelines[...]) that the
+          editor doesn&apos;t support. Use a variable declaration (const tl = gsap.timeline()) to
+          enable editing.
+        </p>
+      )}
+      {multipleTimelines || unsupportedTimelinePattern ? null : (
+        <div className="space-y-2">
+          {animations.map((anim, index) => (
+            <AnimationCard
+              key={anim.id}
+              animation={anim}
+              defaultExpanded={index === 0}
+              onUpdateProperty={onUpdateProperty}
+              onUpdateMeta={onUpdateMeta}
+              onDeleteAnimation={onDeleteAnimation}
+              onAddProperty={onAddProperty}
+              onRemoveProperty={onRemoveProperty}
+              onLivePreview={onLivePreview}
+              onLivePreviewEnd={onLivePreviewEnd}
+            />
+          ))}
+
+          <div className="relative pt-1">
+            {addMenuOpen ? (
+              <div className="flex gap-1.5">
+                {ADD_METHODS.map((method) => (
+                  <button
+                    key={method}
+                    type="button"
+                    title={METHOD_TOOLTIPS[method]}
+                    onClick={() => {
+                      onAddAnimation(method);
+                      setAddMenuOpen(false);
+                    }}
+                    className="rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 py-1.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white"
+                  >
+                    {ADD_METHOD_LABELS[method] ?? method}
+                  </button>
+                ))}
+                <button
+                  type="button"
+                  onClick={() => setAddMenuOpen(false)}
+                  className="px-1.5 text-[11px] text-neutral-500 hover:text-neutral-300"
+                >
+                  Cancel
+                </button>
+              </div>
+            ) : (
+              <button
+                type="button"
+                onClick={() => setAddMenuOpen(true)}
+                className="text-[11px] font-medium text-neutral-400 transition-colors hover:text-neutral-200"
+                title="Add a new animation effect to this element"
+              >
+                + Add effect
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+});

package/src/components/editor/PropertyPanel.tsx

@@ -1,12 +1,7 @@
 import { memo } from "react";
 import { Clock, Eye, Layers, MessageSquare, Move, X } from "../../icons/SystemIcons";
 import { type DomEditSelection } from "./domEditing";
-import {
-  readStudioBoxSize,
-  readStudioPathOffset,
-  readStudioRotation,
-  readGsapTranslateFromTransform,
-} from "./manualEdits";
+import { readStudioBoxSize, readStudioPathOffset, readStudioRotation } from "./manualEdits";
 import type { ImportedFontAsset } from "./fontAssets";
 import {
   EMPTY_STYLES,
@@ -18,12 +13,13 @@ import {
 import { MetricField, Section } from "./propertyPanelPrimitives";
 import { isMediaElement, MediaSection } from "./propertyPanelMediaSection";
 import { TextSection, StyleSections } from "./propertyPanelSections";
+import { GsapAnimationSection } from "./GsapAnimationSection";
+import { STUDIO_GSAP_PANEL_ENABLED } from "./manualEditingAvailability";
 
 // Re-export helpers that external consumers import from this module
 export {
   buildStrokeStyleUpdates,
   buildStrokeWidthStyleUpdates,
-  clampPanelNumber,
   getCssFilterFunctionPx,
   getClipPathInsetPx,
   inferBoxShadowPreset,
@@ -54,6 +50,18 @@ interface PropertyPanelProps {
   onImportAssets?: (files: FileList) => Promise<string[]>;
   fontAssets?: ImportedFontAsset[];
   onImportFonts?: (files: FileList | File[]) => Promise<ImportedFontAsset[]>;
+  gsapAnimations?: import("@hyperframes/core/gsap-parser").GsapAnimation[];
+  gsapMultipleTimelines?: boolean;
+  gsapUnsupportedTimelinePattern?: boolean;
+  onUpdateGsapProperty?: (animId: string, prop: string, value: number | string) => void;
+  onUpdateGsapMeta?: (
+    animId: string,
+    updates: { duration?: number; ease?: string; position?: number },
+  ) => void;
+  onDeleteGsapAnimation?: (animId: string) => void;
+  onAddGsapProperty?: (animId: string, prop: string) => void;
+  onRemoveGsapProperty?: (animId: string, prop: string) => void;
+  onAddGsapAnimation?: (method: "to" | "from" | "set") => void;
 }
 
 /* ------------------------------------------------------------------ */
@@ -146,6 +154,15 @@ export const PropertyPanel = memo(function PropertyPanel({
   onImportAssets,
   fontAssets = [],
   onImportFonts,
+  gsapAnimations = [],
+  gsapMultipleTimelines,
+  gsapUnsupportedTimelinePattern,
+  onUpdateGsapProperty,
+  onUpdateGsapMeta,
+  onDeleteGsapAnimation,
+  onAddGsapProperty,
+  onRemoveGsapProperty,
+  onAddGsapAnimation,
 }: PropertyPanelProps) {
   const styles = element?.computedStyles ?? EMPTY_STYLES;
 
@@ -186,11 +203,6 @@ export const PropertyPanel = memo(function PropertyPanel({
   const sourceLabel = element.id ? `#${element.id}` : element.selector;
   const showEditableSections = element.capabilities.canEditStyles;
   const manualOffset = readStudioPathOffset(element.element);
-  const gsapTranslate = readGsapTranslateFromTransform(element.element);
-  const visualOffset = {
-    x: manualOffset.x + gsapTranslate.x,
-    y: manualOffset.y + gsapTranslate.y,
-  };
   const manualSize = readStudioBoxSize(element.element);
   const resolvedWidth =
     manualSize.width > 0
@@ -204,11 +216,10 @@ export const PropertyPanel = memo(function PropertyPanel({
   const commitManualOffset = (axis: "x" | "y", nextValue: string) => {
     const parsed = parsePxMetricValue(nextValue);
     if (parsed == null) return;
-    const currentRaw = readStudioPathOffset(element.element);
-    const currentGsap = readGsapTranslateFromTransform(element.element);
+    const current = readStudioPathOffset(element.element);
     onSetManualOffset(element, {
-      x: axis === "x" ? parsed - currentGsap.x : currentRaw.x,
-      y: axis === "y" ? parsed - currentGsap.y : currentRaw.y,
+      x: axis === "x" ? parsed : current.x,
+      y: axis === "y" ? parsed : current.y,
     });
   };
 
@@ -300,14 +311,14 @@ export const PropertyPanel = memo(function PropertyPanel({
           <div className={RESPONSIVE_GRID}>
             <MetricField
               label="X"
-              value={formatPxMetricValue(visualOffset.x)}
+              value={formatPxMetricValue(manualOffset.x)}
               disabled={manualOffsetEditingDisabled}
               scrub
               onCommit={(next) => commitManualOffset("x", next)}
             />
             <MetricField
               label="Y"
-              value={formatPxMetricValue(visualOffset.y)}
+              value={formatPxMetricValue(manualOffset.y)}
               disabled={manualOffsetEditingDisabled}
               scrub
               onCommit={(next) => commitManualOffset("y", next)}
@@ -342,6 +353,25 @@ export const PropertyPanel = memo(function PropertyPanel({
           </div>
         </Section>
 
+        {STUDIO_GSAP_PANEL_ENABLED &&
+          onUpdateGsapProperty &&
+          onUpdateGsapMeta &&
+          onDeleteGsapAnimation &&
+          onAddGsapProperty &&
+          onAddGsapAnimation && (
+            <GsapAnimationSection
+              animations={gsapAnimations}
+              multipleTimelines={gsapMultipleTimelines}
+              unsupportedTimelinePattern={gsapUnsupportedTimelinePattern}
+              onUpdateProperty={onUpdateGsapProperty}
+              onUpdateMeta={onUpdateGsapMeta}
+              onDeleteAnimation={onDeleteGsapAnimation}
+              onAddProperty={onAddGsapProperty}
+              onRemoveProperty={onRemoveGsapProperty ?? (() => {})}
+              onAddAnimation={onAddGsapAnimation}
+            />
+          )}
+
         {showEditableSections && (
           <StyleSections
             projectId={projectId}

package/src/components/editor/domEditingTypes.ts

@@ -1,4 +1,5 @@
 import type { PatchTarget } from "../../utils/sourcePatcher";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 
 export const CURATED_STYLE_PROPERTIES = [
   "position",
@@ -86,6 +87,7 @@ export interface DomEditSelection extends PatchTarget {
   computedStyles: Record<string, string>;
   textFields: DomEditTextField[];
   capabilities: DomEditCapabilities;
+  gsapAnimations?: GsapAnimation[];
 }
 
 export interface DomEditLayerItem {

package/src/components/editor/gsapAnimationConstants.ts

@@ -0,0 +1,130 @@
+import { controlPointsForGsapEase } from "./studioMotion";
+
+export const METHOD_LABELS: Record<string, string> = {
+  set: "Set",
+  to: "Animate",
+  from: "Animate In",
+  fromTo: "Animate",
+};
+
+export const METHOD_TOOLTIPS: Record<string, string> = {
+  set: "Instantly snap to these values — no transition",
+  to: "Smoothly animate the element to these target values",
+  from: "Element starts at these values and transitions to its normal state",
+  fromTo: "Animate from one state to another",
+};
+
+export const PROP_LABELS: Record<string, string> = {
+  x: "Move X",
+  y: "Move Y",
+  width: "Width",
+  height: "Height",
+  rotation: "Rotate",
+  opacity: "Opacity",
+  scale: "Scale",
+  scaleX: "Scale X",
+  scaleY: "Scale Y",
+  autoAlpha: "Visibility",
+  visibility: "Visible",
+  scaleX_alias: "Stretch X",
+};
+
+export const PROP_UNITS: Record<string, string> = {
+  x: "px",
+  y: "px",
+  width: "px",
+  height: "px",
+  rotation: "°",
+  opacity: "%",
+  scale: "×",
+  scaleX: "×",
+  scaleY: "×",
+  autoAlpha: "%",
+  visibility: "",
+};
+
+export const PROP_TOOLTIPS: Record<string, string> = {
+  x: "Move left/right (negative = left, positive = right)",
+  y: "Move up/down (negative = up, positive = down)",
+  opacity: "How visible (0 = invisible, 1 = fully visible)",
+  scale: "Size multiplier (1 = normal, 2 = double, 0.5 = half)",
+  scaleX: "Horizontal stretch (1 = normal)",
+  scaleY: "Vertical stretch (1 = normal)",
+  rotation: "Spin angle (360 = full rotation)",
+  width: "Element width",
+  height: "Element height",
+  autoAlpha: "Like opacity but hides element completely at 0",
+  visibility: "Show or hide the element",
+};
+
+export const EASE_LABELS: Record<string, string> = {
+  none: "Constant speed",
+  "power1.out": "Gentle slowdown",
+  "power2.out": "Smooth slowdown",
+  "power3.out": "Snappy slowdown",
+  "power4.out": "Sharp slowdown",
+  "power1.in": "Gentle speedup",
+  "power2.in": "Smooth speedup",
+  "power3.in": "Strong speedup",
+  "power4.in": "Sharp speedup",
+  "power1.inOut": "Gentle ease",
+  "power2.inOut": "Smooth ease",
+  "power3.inOut": "Strong ease",
+  "power4.inOut": "Sharp ease",
+  "back.out": "Overshoot & settle",
+  "back.in": "Pull back & go",
+  "back.inOut": "Pull & overshoot",
+  "elastic.out": "Springy bounce",
+  "elastic.in": "Wind up spring",
+  "elastic.inOut": "Full spring",
+  "bounce.out": "Drop & bounce",
+  "bounce.in": "Reverse bounce",
+  "bounce.inOut": "Double bounce",
+  "expo.out": "Very snappy stop",
+  "expo.in": "Very slow start",
+  "expo.inOut": "Dramatic ease",
+};
+
+export const EASE_CURVES: Record<string, [number, number, number, number]> = {
+  none: [0, 0, 1, 1],
+  "power1.out": [0, 0, 0.58, 1],
+  "power2.out": [0.16, 1, 0.3, 1],
+  "power3.out": [0.08, 0.82, 0.17, 1],
+  "power4.out": [0.06, 0.73, 0.09, 1],
+  "power1.in": [0.42, 0, 1, 1],
+  "power2.in": [0.55, 0.06, 0.68, 0.19],
+  "power3.in": [0.6, 0.04, 0.98, 0.34],
+  "power4.in": [0.7, 0, 0.84, 0],
+  "power1.inOut": [0.42, 0, 0.58, 1],
+  "power2.inOut": [0.45, 0.05, 0.55, 0.95],
+  "power3.inOut": [0.65, 0.05, 0.35, 1],
+  "power4.inOut": [0.76, 0, 0.24, 1],
+  "back.out": [0.34, 1.56, 0.64, 1],
+  "back.in": [0.36, 0, 0.66, -0.56],
+  "back.inOut": [0.68, -0.55, 0.27, 1.55],
+  "expo.out": [0.16, 1, 0.3, 1],
+  "expo.in": [0.7, 0, 0.84, 0],
+  "expo.inOut": [0.87, 0, 0.13, 1],
+};
+
+export function parseCustomEaseFromString(ease: string): {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+} {
+  const match = ease.match(/^custom\((.+)\)$/);
+  if (!match) return controlPointsForGsapEase("power2.out");
+  const data = match[1];
+  const nums = data.match(/[\d.]+/g)?.map(Number);
+  if (!nums || nums.length < 6) return controlPointsForGsapEase("power2.out");
+  return { x1: nums[2], y1: nums[3], x2: nums[4], y2: nums[5] };
+}
+
+export const ADD_METHODS = ["to", "from", "set"] as const;
+
+export const ADD_METHOD_LABELS: Record<string, string> = {
+  to: "Animate",
+  from: "Animate In",
+  set: "Set Instantly",
+};

package/src/components/editor/manualEditingAvailability.ts

@@ -65,6 +65,12 @@ export const STUDIO_BLOCKS_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
   true,
 );
 
+export const STUDIO_GSAP_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
+  env,
+  ["VITE_STUDIO_ENABLE_GSAP_PANEL", "VITE_STUDIO_GSAP_PANEL_ENABLED"],
+  false,
+);
+
 export const STUDIO_PREVIEW_SELECTION_ENABLED = STUDIO_INSPECTOR_PANELS_ENABLED;
 
 export const STUDIO_MANUAL_EDITING_DISABLED_TITLE = "Manual editing is temporarily disabled";