@hyperframes/studio 0.6.107 → 0.6.108

package/dist/assets/{index-zIK7PWvk.js → index-Btg-jqxS.js}

@@ -1 +1 @@
-import{g as P}from"./index-CVHV-S-B.js";function j(c,d){for(var s=0;s<d.length;s++){const a=d[s];if(typeof a!="string"&&!Array.isArray(a)){for(const i in a)if(i!=="default"&&!(i in c)){const l=Object.getOwnPropertyDescriptor(a,i);l&&Object.defineProperty(c,i,l.get?l:{enumerable:!0,get:()=>a[i]})}}}return Object.freeze(Object.defineProperty(c,Symbol.toStringTag,{value:"Module"}))}var v={},w;function k(){if(w)return v;w=1,Object.defineProperty(v,"__esModule",{value:!0}),v.default=d;var c=window.OfflineAudioContext||window.webkitOfflineAudioContext;function d(e){var r=a(e);return r.start(0),[i,y,O(e.sampleRate),s].reduce(function(t,o){return o(t)},r.buffer.getChannelData(0))}function s(e){return e.sort(function(r,t){return t.count-r.count}).splice(0,5)[0].tempo}function a(e){var r=e.length,t=e.numberOfChannels,o=e.sampleRate,n=new c(t,r,o),u=n.createBufferSource();u.buffer=e;var f=n.createBiquadFilter();return f.type="lowpass",u.connect(f),f.connect(n.destination),u}function i(e){for(var r=[],t=.9,o=.3,n=15;r.length<n&&t>=o;)r=l(e,t),t-=.05;if(r.length<n)throw new Error("Could not find enough samples for a reliable detection.");return r}function l(e,r){for(var t=[],o=0,n=e.length;o<n;o+=1)e[o]>r&&(t.push(o),o+=1e4);return t}function y(e){var r=[];return e.forEach(function(t,o){for(var n=function(x){var g=e[o+x]-t,_=r.some(function(h){if(h.interval===g)return h.count+=1});_||r.push({interval:g,count:1})},u=0;u<10;u+=1)n(u)}),r}function O(e){return function(r){var t=[];return r.forEach(function(o){if(o.interval!==0){for(var n=60/(o.interval/e);n<90;)n*=2;for(;n>180;)n/=2;n=Math.round(n);var u=t.some(function(f){if(f.tempo===n)return f.count+=o.count});u||t.push({tempo:n,count:o.count})}}),t}}return v}var p,b;function q(){return b||(b=1,p=k().default),p}var m=q();const A=P(m),D=j({__proto__:null,default:A},[m]);export{D as i};
+import{g as P}from"./index-BgbVhDYd.js";function j(c,d){for(var s=0;s<d.length;s++){const a=d[s];if(typeof a!="string"&&!Array.isArray(a)){for(const i in a)if(i!=="default"&&!(i in c)){const l=Object.getOwnPropertyDescriptor(a,i);l&&Object.defineProperty(c,i,l.get?l:{enumerable:!0,get:()=>a[i]})}}}return Object.freeze(Object.defineProperty(c,Symbol.toStringTag,{value:"Module"}))}var v={},w;function k(){if(w)return v;w=1,Object.defineProperty(v,"__esModule",{value:!0}),v.default=d;var c=window.OfflineAudioContext||window.webkitOfflineAudioContext;function d(e){var r=a(e);return r.start(0),[i,y,O(e.sampleRate),s].reduce(function(t,o){return o(t)},r.buffer.getChannelData(0))}function s(e){return e.sort(function(r,t){return t.count-r.count}).splice(0,5)[0].tempo}function a(e){var r=e.length,t=e.numberOfChannels,o=e.sampleRate,n=new c(t,r,o),u=n.createBufferSource();u.buffer=e;var f=n.createBiquadFilter();return f.type="lowpass",u.connect(f),f.connect(n.destination),u}function i(e){for(var r=[],t=.9,o=.3,n=15;r.length<n&&t>=o;)r=l(e,t),t-=.05;if(r.length<n)throw new Error("Could not find enough samples for a reliable detection.");return r}function l(e,r){for(var t=[],o=0,n=e.length;o<n;o+=1)e[o]>r&&(t.push(o),o+=1e4);return t}function y(e){var r=[];return e.forEach(function(t,o){for(var n=function(x){var g=e[o+x]-t,_=r.some(function(h){if(h.interval===g)return h.count+=1});_||r.push({interval:g,count:1})},u=0;u<10;u+=1)n(u)}),r}function O(e){return function(r){var t=[];return r.forEach(function(o){if(o.interval!==0){for(var n=60/(o.interval/e);n<90;)n*=2;for(;n>180;)n/=2;n=Math.round(n);var u=t.some(function(f){if(f.tempo===n)return f.count+=o.count});u||t.push({tempo:n,count:o.count})}}),t}}return v}var p,b;function q(){return b||(b=1,p=k().default),p}var m=q();const A=P(m),D=j({__proto__:null,default:A},[m]);export{D as i};

package/dist/assets/{index-P52mbTRb.js → index-tn9M43-U.js}

@@ -1,4 +1,4 @@
-import{n as Qi}from"./index-CVHV-S-B.js";/*!
+import{n as Qi}from"./index-BgbVhDYd.js";/*!
  * Copyright (c) 2026-present, Vanilagy and contributors
  *
  * This Source Code Form is subject to the terms of the Mozilla Public

package/dist/index.html

@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>HyperFrames Studio</title>
-    <script type="module" crossorigin src="/assets/index-CVHV-S-B.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BrhJl2JY.css">
+    <script type="module" crossorigin src="/assets/index-BgbVhDYd.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BVqybwMG.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.6.107",
+  "version": "0.6.108",
   "description": "",
   "repository": {
     "type": "git",
@@ -33,9 +33,9 @@
     "@phosphor-icons/react": "^2.1.10",
     "bpm-detective": "^2.0.5",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.6.107",
-    "@hyperframes/player": "0.6.107",
-    "@hyperframes/sdk": "0.6.107"
+    "@hyperframes/player": "0.6.108",
+    "@hyperframes/core": "0.6.108",
+    "@hyperframes/sdk": "0.6.108"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -49,7 +49,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.6.107"
+    "@hyperframes/producer": "0.6.108"
   },
   "peerDependencies": {
     "react": "19",

package/src/App.tsx

@@ -409,6 +409,7 @@ export function StudioApp() {
     shouldShowSelectedDomBounds,
   } = useInspectorState(
     panelLayout.rightPanelTab,
+    panelLayout.rightInspectorPanes,
     panelLayout.rightCollapsed,
     isPlaying,
     gestureState === "recording",

package/src/components/StudioRightPanel.tsx

@@ -1,3 +1,4 @@
+import { useCallback, useRef, useState, type PointerEvent as ReactPointerEvent } from "react";
 import { Tooltip } from "./ui";
 import { PropertyPanel } from "./editor/PropertyPanel";
 import { LayersPanel } from "./editor/LayersPanel";
@@ -14,6 +15,9 @@ import { useFileManagerContext } from "../contexts/FileManagerContext";
 import { useDomEditContext } from "../contexts/DomEditContext";
 import { usePlayerStore } from "../player";
 
+const MIN_INSPECTOR_SPLIT_PERCENT = 20;
+const MAX_INSPECTOR_SPLIT_PERCENT = 75;
+
 export interface StudioRightPanelProps {
   designPanelActive: boolean;
   activeBlockParams?: {
@@ -41,6 +45,8 @@ export function StudioRightPanel({
     rightWidth,
     rightPanelTab,
     setRightPanelTab,
+    rightInspectorPanes,
+    toggleRightInspectorPane,
     handlePanelResizeStart,
     handlePanelResizeMove,
     handlePanelResizeEnd,
@@ -63,6 +69,7 @@ export function StudioRightPanel({
     clearDomSelection,
     handleDomStyleCommit,
     handleDomAttributeCommit,
+    handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
     handleDomPathOffsetCommit,
     handleDomBoxSizeCommit,
@@ -96,7 +103,130 @@ export function StudioRightPanel({
   const { assets, fontAssets, projectDir, handleImportFiles, handleImportFonts } =
     useFileManagerContext();
 
+  const [layersPanePercent, setLayersPanePercent] = useState(40);
+  const splitContainerRef = useRef<HTMLDivElement>(null);
+  const splitDragRef = useRef<{
+    startY: number;
+    startPercent: number;
+    height: number;
+  } | null>(null);
+
   const renderJobs = renderQueue.jobs as RenderJob[];
+  const inspectorTabActive = rightPanelTab === "design" || rightPanelTab === "layers";
+  const designPaneOpen = inspectorTabActive && rightInspectorPanes.design && designPanelActive;
+  const layersPaneOpen =
+    inspectorTabActive && rightInspectorPanes.layers && STUDIO_INSPECTOR_PANELS_ENABLED;
+
+  const handleInspectorPaneButtonClick = (pane: "design" | "layers") => {
+    if (!inspectorTabActive) {
+      setRightPanelTab(pane);
+      return;
+    }
+    toggleRightInspectorPane(pane);
+  };
+
+  const handleInspectorSplitResizeStart = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      event.currentTarget.setPointerCapture(event.pointerId);
+      const height = splitContainerRef.current?.getBoundingClientRect().height ?? 0;
+      splitDragRef.current = {
+        startY: event.clientY,
+        startPercent: layersPanePercent,
+        height,
+      };
+    },
+    [layersPanePercent],
+  );
+
+  const handleInspectorSplitResizeMove = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
+    const drag = splitDragRef.current;
+    if (!drag || drag.height <= 0) return;
+    const deltaPercent = ((event.clientY - drag.startY) / drag.height) * 100;
+    const next = Math.min(
+      MAX_INSPECTOR_SPLIT_PERCENT,
+      Math.max(MIN_INSPECTOR_SPLIT_PERCENT, drag.startPercent + deltaPercent),
+    );
+    setLayersPanePercent(next);
+  }, []);
+
+  const handleInspectorSplitResizeEnd = useCallback(() => {
+    splitDragRef.current = null;
+  }, []);
+
+  const propertyPanel = (
+    <PropertyPanel
+      projectId={projectId}
+      projectDir={projectDir}
+      assets={assets}
+      element={domEditGroupSelections.length > 1 ? null : domEditSelection}
+      multiSelectCount={domEditGroupSelections.length}
+      copiedAgentPrompt={copiedAgentPrompt}
+      onClearSelection={clearDomSelection}
+      onSetStyle={handleDomStyleCommit}
+      onSetAttribute={handleDomAttributeCommit}
+      onSetAttributeLive={handleDomAttributeLiveCommit}
+      onSetHtmlAttribute={handleDomHtmlAttributeCommit}
+      onSetManualOffset={handleDomPathOffsetCommit}
+      onSetManualSize={handleDomBoxSizeCommit}
+      onSetManualRotation={handleDomRotationCommit}
+      onSetText={handleDomTextCommit}
+      onSetTextFieldStyle={handleDomTextFieldStyleCommit}
+      onAddTextField={handleDomAddTextField}
+      onRemoveTextField={handleDomRemoveTextField}
+      onAskAgent={handleAskAgent}
+      onImportAssets={handleImportFiles}
+      fontAssets={fontAssets}
+      onImportFonts={handleImportFonts}
+      previewIframeRef={previewIframeRef}
+      gsapAnimations={selectedGsapAnimations}
+      gsapMultipleTimelines={gsapMultipleTimelines}
+      gsapUnsupportedTimelinePattern={gsapUnsupportedTimelinePattern}
+      onUpdateGsapProperty={handleGsapUpdateProperty}
+      onUpdateGsapMeta={handleGsapUpdateMeta}
+      onDeleteGsapAnimation={handleGsapDeleteAnimation}
+      onAddGsapProperty={handleGsapAddProperty}
+      onRemoveGsapProperty={handleGsapRemoveProperty}
+      onUpdateGsapFromProperty={handleGsapUpdateFromProperty}
+      onAddGsapFromProperty={handleGsapAddFromProperty}
+      onRemoveGsapFromProperty={handleGsapRemoveFromProperty}
+      onAddGsapAnimation={handleGsapAddAnimation}
+      onCommitAnimatedProperty={commitAnimatedProperty}
+      onAddKeyframe={handleGsapAddKeyframe}
+      onRemoveKeyframe={handleGsapRemoveKeyframe}
+      onConvertToKeyframes={handleGsapConvertToKeyframes}
+      onSeekToTime={(t) => usePlayerStore.getState().requestSeek(t)}
+      onSetArcPath={handleSetArcPath}
+      onUpdateArcSegment={handleUpdateArcSegment}
+      onUnroll={handleUnroll}
+      recordingState={recordingState}
+      recordingDuration={recordingDuration}
+      onToggleRecording={onToggleRecording}
+    />
+  );
+
+  const renderQueuePanel = (
+    <RenderQueue
+      jobs={renderJobs}
+      projectId={projectId}
+      onDelete={renderQueue.deleteRender}
+      onClearCompleted={renderQueue.clearCompleted}
+      onStartRender={async (format, quality, resolution, fps) => {
+        await waitForPendingDomEditSaves();
+        const composition =
+          activeCompPath && activeCompPath !== "index.html" ? activeCompPath : undefined;
+        await renderQueue.startRender({
+          fps,
+          quality,
+          format,
+          resolution,
+          composition,
+        });
+      }}
+      compositionDimensions={compositionDimensions}
+      isRendering={renderQueue.isRendering}
+    />
+  );
 
   return (
     <>
@@ -123,9 +253,9 @@ export function StudioRightPanel({
                   <Tooltip label="Element styles and properties" side="bottom">
                     <button
                       type="button"
-                      onClick={() => setRightPanelTab("design")}
+                      onClick={() => handleInspectorPaneButtonClick("design")}
                       className={`h-8 rounded-xl px-3 text-[11px] font-medium transition-colors ${
-                        rightPanelTab === "design"
+                        designPaneOpen
                           ? "bg-neutral-800 text-white"
                           : "text-neutral-500 hover:bg-neutral-800/70 hover:text-neutral-200"
                       }`}
@@ -136,9 +266,9 @@ export function StudioRightPanel({
                   <Tooltip label="Composition layer stack" side="bottom">
                     <button
                       type="button"
-                      onClick={() => setRightPanelTab("layers")}
+                      onClick={() => handleInspectorPaneButtonClick("layers")}
                       className={`h-8 rounded-xl px-3 text-[11px] font-medium transition-colors ${
-                        rightPanelTab === "layers"
+                        layersPaneOpen
                           ? "bg-neutral-800 text-white"
                           : "text-neutral-500 hover:bg-neutral-800/70 hover:text-neutral-200"
                       }`}
@@ -171,79 +301,35 @@ export function StudioRightPanel({
                   compositionPath={activeBlockParams.compositionPath}
                   onClose={onCloseBlockParams ?? (() => {})}
                 />
-              ) : rightPanelTab === "layers" ? (
+              ) : layersPaneOpen && designPaneOpen ? (
+                <div ref={splitContainerRef} className="flex h-full min-h-0 flex-col">
+                  <div
+                    className="min-h-[120px] overflow-hidden"
+                    style={{ flexBasis: `${layersPanePercent}%`, flexShrink: 0 }}
+                  >
+                    <LayersPanel />
+                  </div>
+                  <div
+                    role="separator"
+                    aria-label="Resize Layers and Design panes"
+                    aria-orientation="horizontal"
+                    className="group flex h-2 flex-shrink-0 cursor-row-resize items-center justify-center border-y border-neutral-800 bg-neutral-900"
+                    style={{ touchAction: "none" }}
+                    onPointerDown={handleInspectorSplitResizeStart}
+                    onPointerMove={handleInspectorSplitResizeMove}
+                    onPointerUp={handleInspectorSplitResizeEnd}
+                    onPointerCancel={handleInspectorSplitResizeEnd}
+                  >
+                    <div className="h-px w-10 rounded-full bg-white/12 transition-colors group-hover:bg-white/24 group-active:bg-studio-accent/70" />
+                  </div>
+                  <div className="min-h-0 flex-1 overflow-hidden">{propertyPanel}</div>
+                </div>
+              ) : layersPaneOpen ? (
                 <LayersPanel />
-              ) : designPanelActive ? (
-                <PropertyPanel
-                  projectId={projectId}
-                  projectDir={projectDir}
-                  assets={assets}
-                  element={domEditGroupSelections.length > 1 ? null : domEditSelection}
-                  multiSelectCount={domEditGroupSelections.length}
-                  copiedAgentPrompt={copiedAgentPrompt}
-                  onClearSelection={clearDomSelection}
-                  onSetStyle={handleDomStyleCommit}
-                  onSetAttribute={handleDomAttributeCommit}
-                  onSetHtmlAttribute={handleDomHtmlAttributeCommit}
-                  onSetManualOffset={handleDomPathOffsetCommit}
-                  onSetManualSize={handleDomBoxSizeCommit}
-                  onSetManualRotation={handleDomRotationCommit}
-                  onSetText={handleDomTextCommit}
-                  onSetTextFieldStyle={handleDomTextFieldStyleCommit}
-                  onAddTextField={handleDomAddTextField}
-                  onRemoveTextField={handleDomRemoveTextField}
-                  onAskAgent={handleAskAgent}
-                  onImportAssets={handleImportFiles}
-                  fontAssets={fontAssets}
-                  onImportFonts={handleImportFonts}
-                  previewIframeRef={previewIframeRef}
-                  gsapAnimations={selectedGsapAnimations}
-                  gsapMultipleTimelines={gsapMultipleTimelines}
-                  gsapUnsupportedTimelinePattern={gsapUnsupportedTimelinePattern}
-                  onUpdateGsapProperty={handleGsapUpdateProperty}
-                  onUpdateGsapMeta={handleGsapUpdateMeta}
-                  onDeleteGsapAnimation={handleGsapDeleteAnimation}
-                  onAddGsapProperty={handleGsapAddProperty}
-                  onRemoveGsapProperty={handleGsapRemoveProperty}
-                  onUpdateGsapFromProperty={handleGsapUpdateFromProperty}
-                  onAddGsapFromProperty={handleGsapAddFromProperty}
-                  onRemoveGsapFromProperty={handleGsapRemoveFromProperty}
-                  onAddGsapAnimation={handleGsapAddAnimation}
-                  onCommitAnimatedProperty={commitAnimatedProperty}
-                  onAddKeyframe={handleGsapAddKeyframe}
-                  onRemoveKeyframe={handleGsapRemoveKeyframe}
-                  onConvertToKeyframes={handleGsapConvertToKeyframes}
-                  onSeekToTime={(t) => usePlayerStore.getState().requestSeek(t)}
-                  onSetArcPath={handleSetArcPath}
-                  onUpdateArcSegment={handleUpdateArcSegment}
-                  onUnroll={handleUnroll}
-                  recordingState={recordingState}
-                  recordingDuration={recordingDuration}
-                  onToggleRecording={onToggleRecording}
-                />
+              ) : designPaneOpen ? (
+                propertyPanel
               ) : (
-                <RenderQueue
-                  jobs={renderJobs}
-                  projectId={projectId}
-                  onDelete={renderQueue.deleteRender}
-                  onClearCompleted={renderQueue.clearCompleted}
-                  onStartRender={async (format, quality, resolution, fps) => {
-                    await waitForPendingDomEditSaves();
-                    const composition =
-                      activeCompPath && activeCompPath !== "index.html"
-                        ? activeCompPath
-                        : undefined;
-                    await renderQueue.startRender({
-                      fps,
-                      quality,
-                      format,
-                      resolution,
-                      composition,
-                    });
-                  }}
-                  compositionDimensions={compositionDimensions}
-                  isRendering={renderQueue.isRendering}
-                />
+                renderQueuePanel
               )}
             </div>
           </>

package/src/components/editor/PropertyPanel.tsx

@@ -14,11 +14,19 @@ import { MetricField, Section } from "./propertyPanelPrimitives";
 import { createTransformCommitHandlers } from "./propertyPanelTransformCommit";
 import { classifyPropertyGroup } from "@hyperframes/core/gsap-parser";
 import { isMediaElement, MediaSection } from "./propertyPanelMediaSection";
+import {
+  ColorGradingSection,
+  isColorGradingCapableElement,
+} from "./propertyPanelColorGradingSection";
 import { TextSection, StyleSections } from "./propertyPanelSections";
 import { GsapAnimationSection } from "./GsapAnimationSection";
 import { PropertyPanel3dTransform } from "./propertyPanel3dTransform";
 import { KeyframeNavigation } from "./KeyframeNavigation";
-import { STUDIO_GSAP_PANEL_ENABLED, STUDIO_KEYFRAMES_ENABLED } from "./manualEditingAvailability";
+import {
+  STUDIO_COLOR_GRADING_ENABLED,
+  STUDIO_GSAP_PANEL_ENABLED,
+  STUDIO_KEYFRAMES_ENABLED,
+} from "./manualEditingAvailability";
 import { usePlayerStore, liveTime } from "../../player";
 import { TimingSection } from "./propertyPanelTimingSection";
 import { type PropertyPanelProps } from "./propertyPanelHelpers";
@@ -47,6 +55,7 @@ export const PropertyPanel = memo(function PropertyPanel({
   onClearSelection,
   onSetStyle,
   onSetAttribute,
+  onSetAttributeLive,
   onSetHtmlAttribute,
   onSetManualOffset,
   onSetManualSize,
@@ -355,6 +364,22 @@ export const PropertyPanel = memo(function PropertyPanel({
           />
         )}
 
+        {STUDIO_COLOR_GRADING_ENABLED && isColorGradingCapableElement(element) && (
+          <ColorGradingSection
+            key={[
+              element.id ?? "",
+              element.hfId ?? "",
+              element.selector ?? "",
+              String(element.selectorIndex ?? ""),
+            ].join("|")}
+            element={element}
+            assets={assets}
+            previewIframeRef={previewIframeRef}
+            onImportAssets={onImportAssets}
+            onSetAttributeLive={onSetAttributeLive}
+          />
+        )}
+
         <Section title="Layout" icon={<Move size={15} />}>
           <div className={RESPONSIVE_GRID}>
             <div className="flex items-center gap-1">

package/src/components/editor/domEditOverlayGeometry.ts

@@ -1,4 +1,5 @@
 import { type DomEditSelection, findElementForSelection } from "./domEditing";
+import { isElementVisibleThroughAncestors } from "./domEditingDom";
 
 export interface OverlayRect {
   left: number;
@@ -21,17 +22,7 @@ export type ResolvedElementRef = {
 };
 
 export 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;
+  return isElementVisibleThroughAncestors(el);
 }
 
 function readPositiveDimension(value: string | null): number | null {

package/src/components/editor/domEditingDom.ts

@@ -57,6 +57,27 @@ export function isTextBearingTag(tagName: string): boolean {
   return ["div", "span", "p", "strong", "h1", "h2", "h3", "h4", "h5", "h6"].includes(tagName);
 }
 
+const COLOR_GRADING_SOURCE_HIDDEN_ATTR = "data-hf-color-grading-source-hidden";
+
+export function isElementVisibleThroughAncestors(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 &&
+      !current.hasAttribute(COLOR_GRADING_SOURCE_HIDDEN_ATTR)
+    )
+      return false;
+    current = current.parentElement;
+  }
+  return true;
+}
+
 // ─── Style accessors ──────────────────────────────────────────────────────────
 
 export function getCuratedComputedStyles(el: HTMLElement): Record<string, string> {

package/src/components/editor/domEditingElement.ts

@@ -15,6 +15,7 @@ import {
   getSelectorIndex,
   getSourceFileForElement,
   isHtmlElement,
+  isElementVisibleThroughAncestors,
   normalizeTimelineCompositionSource,
   querySelectorAllSafely,
 } from "./domEditingDom";
@@ -22,17 +23,7 @@ import {
 // ─── Visibility ──────────────────────────────────────────────────────────────
 
 export function isElementComputedVisible(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;
+  return isElementVisibleThroughAncestors(el);
 }
 
 const VISUAL_LEAF_TAGS = new Set(["img", "video", "canvas", "svg", "audio"]);

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

@@ -29,6 +29,18 @@ describe("manual editing availability", () => {
     expect(availability.STUDIO_GSAP_DRAG_INTERCEPT_ENABLED).toBe(true);
   });
 
+  it("keeps color grading off by default", async () => {
+    const availability = await loadAvailabilityWithEnv({});
+    expect(availability.STUDIO_COLOR_GRADING_ENABLED).toBe(false);
+  });
+
+  it("enables color grading with an explicit env flag", async () => {
+    const availability = await loadAvailabilityWithEnv({
+      VITE_STUDIO_ENABLE_COLOR_GRADING: "1",
+    });
+    expect(availability.STUDIO_COLOR_GRADING_ENABLED).toBe(true);
+  });
+
   it("disables GSAP drag intercept when env var is false", async () => {
     const availability = await loadAvailabilityWithEnv({
       VITE_STUDIO_ENABLE_GSAP_DRAG_INTERCEPT: "false",

package/src/components/editor/manualEditingAvailability.ts

@@ -64,6 +64,12 @@ export const STUDIO_GSAP_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
   true,
 );
 
+export const STUDIO_COLOR_GRADING_ENABLED = resolveStudioBooleanEnvFlag(
+  env,
+  ["VITE_STUDIO_ENABLE_COLOR_GRADING", "VITE_STUDIO_COLOR_GRADING_ENABLED"],
+  false,
+);
+
 export const STUDIO_KEYFRAMES_ENABLED = resolveStudioBooleanEnvFlag(
   env,
   ["VITE_STUDIO_ENABLE_KEYFRAMES", "VITE_STUDIO_KEYFRAMES_ENABLED"],