@hyperframes/studio 0.8.112 → 0.8.114

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.112",
+  "version": "0.8.114",
   "description": "",
   "repository": {
     "type": "git",
@@ -60,12 +60,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.8.112",
-    "@hyperframes/parsers": "0.8.112",
-    "@hyperframes/player": "0.8.112",
-    "@hyperframes/sdk": "0.8.112",
-    "@hyperframes/studio-server": "0.8.112",
-    "@hyperframes/shader-transitions": "0.8.112"
+    "@hyperframes/player": "0.8.114",
+    "@hyperframes/parsers": "0.8.114",
+    "@hyperframes/sdk": "0.8.114",
+    "@hyperframes/shader-transitions": "0.8.114",
+    "@hyperframes/studio-server": "0.8.114",
+    "@hyperframes/core": "0.8.114"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -81,7 +81,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.112"
+    "@hyperframes/producer": "0.8.114"
   },
   "peerDependencies": {
     "react": "19",
@@ -99,6 +99,7 @@
     "test:thumbnail-save": "node tests/e2e/thumbnail-save.mjs",
     "test:timeline-virtualization": "TIMELINE_ROW_VIRTUALIZATION=on TIMELINE_ELEMENT_COUNT=50000 node tests/e2e/timeline-virtualization.mjs",
     "test:watch": "vitest",
+    "test:colors:browser": "node tests/e2e/native-css-colors.mjs",
     "report:sdk-cutover": "bun src/utils/sdkCutoverPolicy.report.ts",
     "test:timeline-default": "bun run test:timeline-virtualization"
   }

package/src/App.tsx

@@ -1,6 +1,8 @@
 import { useOwnPreviewIframe, usePreviewIframeStore } from "./player/store/previewIframeStore";
 import { buildProjectApiPath } from "./utils/projectRouting";
-import { useState, useCallback, useRef, useMemo, useLayoutEffect } from "react";
+import { useState, useCallback, useRef, useMemo } from "react";
+import { useStableHandlers } from "./hooks/useStableHandlers";
+import { useHistoryFlags, useToolbarSession } from "./hooks/useShellSlices";
 import { useDismissingTabSetter, useRightPanelIntent } from "./hooks/useRightPanelIntents";
 import { useRenderQueue } from "./components/renders/useRenderQueue";
 import { usePlayerStore } from "./player";
@@ -46,10 +48,9 @@ import {
 import type { DomEditSelection } from "./components/editor/domEditing";
 import { StudioHeader } from "./components/StudioHeader";
 import { useGestureCommit } from "./hooks/useGestureCommit";
-import { GestureTrailOverlay } from "./components/editor/GestureTrailOverlay";
-import { StudioLeftPanels } from "./components/StudioLeftPanels";
+import { useGestureTrailOverlay } from "./hooks/useGestureTrailOverlay";
 import { EditorShell } from "./components/EditorShell";
-import { StudioRightPanels } from "./components/StudioRightPanels";
+import { useStudioSidePanels } from "./hooks/useStudioSidePanels";
 import { TimelineToolbar } from "./components/TimelineToolbar";
 import { StudioPlaybackProvider, StudioShellProvider } from "./contexts/StudioContext";
 import { PanelLayoutProvider } from "./contexts/PanelLayoutContext";
@@ -99,17 +100,18 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
     rightCollapsed: initialUrlStateRef.current.rightCollapsed,
     rightPanelTab: initialUrlStateRef.current.rightPanelTab,
   });
-  const editHistory = usePersistentEditHistory({ projectId });
+  const editHistory = useStableHandlers(usePersistentEditHistory({ projectId }), projectId);
   const handleDomZIndexReorderCommitRef = useRef<TimelineZIndexReorderCommit | null>(null);
   const pendingTimelineEditPathRef = useRef(new Set<string>());
   const isGestureRecordingRef = useRef(false);
   const reloadPreview = useCallback(() => setRefreshKey((k) => k + 1), []);
-  const fileManager = useFileManager({
+  const fileManagerResult = useFileManager({
     projectId,
     showToast,
     recordEdit: editHistory.recordEdit,
     setRefreshKey,
   });
+  const fileManager = useStableHandlers(fileManagerResult, projectId);
   const masterCompPath = useMemo(
     () => resolveMasterCompositionPath(fileManager.compositions),
     [fileManager.compositions],
@@ -134,8 +136,8 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
   );
   const activeCompPathRef = useRef(activeCompPath);
   activeCompPathRef.current = activeCompPath;
-  const renderQueue = useRenderQueue(projectId, activeCompPathRef);
-  const previewPersistence = usePreviewPersistence({
+  const renderQueue = useStableHandlers(useRenderQueue(projectId, activeCompPathRef), projectId);
+  const previewPersistenceResult = usePreviewPersistence({
     showToast,
     readOptionalProjectFile: fileManager.readOptionalProjectFile,
     writeProjectFile: fileManager.writeProjectFile,
@@ -144,6 +146,7 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
     activeCompPathRef,
     reloadPreview: () => setRefreshKey((k) => k + 1),
   });
+  const previewPersistence = useStableHandlers(previewPersistenceResult, projectId);
   const externalFileChanges = useStudioExternalFileChanges({
     projectId,
     activeCompPath,
@@ -184,15 +187,9 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
   } = useTimelineAddAtPlayhead(
     timelineEditing.handleTimelineAssetDrop,
     timelineEditing.handleTimelineCompositionDrop,
+    projectId,
   );
-  const {
-    activeBlockParams,
-    setActiveBlockParams,
-    handleAddBlock,
-    handleTimelineBlockDrop,
-    handleAddMediaOverlay,
-    handlePreviewBlockDrop,
-  } = useBlockHandlers({
+  const blockHandlersResult = useBlockHandlers({
     projectId,
     blockCtxDeps: {
       activeCompPath,
@@ -209,6 +206,14 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
     setRightCollapsed: panelLayout.setRightCollapsed,
     setRightPanelTab: panelLayout.setRightPanelTab,
   });
+  const {
+    activeBlockParams,
+    setActiveBlockParams,
+    handleAddBlock,
+    handleTimelineBlockDrop,
+    handleAddMediaOverlay,
+    handlePreviewBlockDrop,
+  } = useStableHandlers(blockHandlersResult, projectId);
   const dismissBlockParams = useCallback(() => setActiveBlockParams(null), [setActiveBlockParams]);
   const setRightPanelTab = useDismissingTabSetter(panelLayout.setRightPanelTab, dismissBlockParams);
   const layout = useMemo(
@@ -237,6 +242,7 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
     waitForPendingDomEditSaves: previewPersistence.waitForPendingDomEditSaves,
   });
   const appHotkeys = useAppHotkeys({
+    projectId,
     handleTimelineElementsDelete: timelineEditing.handleTimelineElementsDelete,
     handleLinkEdit: timelineEditing.handleLinkEdit,
     handleTimelineElementDeleteOnly: timelineEditing.handleTimelineElementDeleteOnly,
@@ -269,7 +275,7 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
     onToggleRecording: () => handleToggleRecordingRef.current(),
     readOnlyPreview,
   });
-  const domEditSession = useDomEditSession({
+  const domEditSessionResult = useDomEditSession({
     projectId,
     activeCompPath,
     compIdToSrc,
@@ -309,6 +315,7 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
     handleTimelineElementsDelete: timelineEditing.handleTimelineElementsDelete,
     readOnlyPreview,
   });
+  const domEditSession = useStableHandlers(domEditSessionResult, projectId);
   domEditSelectionBridgeRef.current = domEditSession.domEditSelection;
   const { handleDomZIndexReorderCommit: zCommit, handleDomEditElementDelete: del } = domEditSession;
   handleDomZIndexReorderCommitRef.current = trackedStudioEdit(zCommit);
@@ -342,13 +349,14 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
     effectiveTimelineDuration,
   });
   const compositionDimensions = useCompositionDimensions(previewIframeRef);
-  const lint = useLintModal(projectId, refreshKey);
-  const frameCapture = useFrameCapture({
+  const lint = useStableHandlers(useLintModal(projectId, refreshKey), projectId);
+  const frameCaptureResult = useFrameCapture({
     projectId,
     activeCompPath,
     showToast,
     waitForPendingDomEditSaves: previewPersistence.waitForPendingDomEditSaves,
   });
+  const frameCapture = useStableHandlers(frameCaptureResult, projectId);
   const {
     consoleErrors,
     setConsoleErrors,
@@ -359,6 +367,7 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
   const domEditSessionRef = useRef(domEditSession);
   domEditSessionRef.current = domEditSession;
   const { gestureState, gestureRecording, handleToggleRecording } = useGestureCommit({
+    projectId,
     domEditSessionRef,
     previewIframeRef,
     showToast,
@@ -366,14 +375,11 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
     readOnlyPreview,
   });
   handleToggleRecordingRef.current = handleToggleRecording;
-  const canvasRectRef = useRef<DOMRect | null>(null);
-  useLayoutEffect(() => {
-    if (gestureState !== "recording" || !previewIframe) {
-      canvasRectRef.current = null;
-      return;
-    }
-    canvasRectRef.current = previewIframe.getBoundingClientRect();
-  }, [gestureState, previewIframe]);
+  const gestureOverlay = useGestureTrailOverlay(
+    { gestureState, gestureRecording },
+    previewIframe,
+    compositionDimensions,
+  );
   const handlePreviewIframeRef = useCallback(
     (iframe: HTMLIFrameElement | null) => {
       previewIframeRef.current = iframe;
@@ -415,6 +421,8 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
     setRightPanelTab,
     initialState: initialUrlStateRef.current,
   });
+  const historyFlags = useHistoryFlags(editHistory);
+  const toolbarSession = useToolbarSession(domEditSession);
   const studioCtxValue = buildStudioContextValue({
     projectId: projectId!,
     activeCompPath,
@@ -427,7 +435,7 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
     setRefreshKey,
     timelineElements,
     isPlaying,
-    editHistory,
+    editHistory: historyFlags,
     handleUndo: appHotkeys.handleUndo,
     handleRedo: appHotkeys.handleRedo,
     renderQueue,
@@ -441,11 +449,51 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
   const timelineToolbar = useMemo(
     () => (
       <TimelineToolbar
-        domEditSession={domEditSession}
+        domEditSession={toolbarSession}
         onSplitElement={timelineEditing.handleTimelineElementSplit}
       />
     ),
-    [domEditSession, timelineEditing.handleTimelineElementSplit],
+    [toolbarSession, timelineEditing.handleTimelineElementSplit],
+  );
+  const handleExport = useCallback(() => {
+    void previewPersistence
+      .waitForPendingDomEditSaves()
+      .then(() => renderQueue.startRender(undefined));
+  }, [previewPersistence, renderQueue]);
+  const clearConsoleErrors = useCallback(() => setConsoleErrors(null), [setConsoleErrors]);
+  const panels = useStudioSidePanels(
+    {
+      onSelectComposition: handleSelectComposition,
+      onAddBlock: handleAddBlock,
+      onPreviewBlock: setBlockPreview,
+      onLint: lint.handleLint,
+      linting: lint.linting,
+      lintFindingCount: lint.lintFindingCount,
+      lintFindingsByFile: lint.findingsByFile,
+      lintHasError: lint.hasLintError,
+      onAddAssetToTimeline: handleAddAssetAtPlayhead,
+      onAddCompositionToTimeline: handleAddCompositionAtPlayhead,
+    },
+    {
+      activeBlockParams,
+      onDismissBlockParams: dismissBlockParams,
+      onCloseBlockParams: () => {
+        setActiveBlockParams(null);
+        panelLayout.setRightPanelTab("design");
+      },
+      recordingState: gestureState,
+      recordingDuration: gestureRecording.recordingDuration,
+      onToggleRecording: handleToggleRecording,
+      sdkSession: sdkHandle.session,
+      publishSdkSession: sdkHandle.publish,
+      forceReloadSdkSession: sdkHandle.forceReload,
+      reloadPreview,
+      recordEdit: editHistory.recordEdit,
+      onToggleElementHidden: timelineEditing.handleToggleElementHidden,
+      onAutoGroupCarveSources: timelineEditing.handleAutoGroupCarveSources,
+      onAddMediaOverlay: handleAddMediaOverlay,
+    },
+    projectId,
   );
   if (resolving || waitingForServer || !projectId)
     return <StudioSplash waiting={waitingForServer} />;
@@ -468,12 +516,7 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
                   capturing={frameCapture.capturing}
                   inspectorButtonActive={inspectorButtonActive}
                   inspectorPanelActive={inspectorPanelActive}
-                  onExport={() => {
-                    void (async () => {
-                      await previewPersistence.waitForPendingDomEditSaves();
-                      await renderQueue.startRender(undefined);
-                    })();
-                  }}
+                  onExport={handleExport}
                 />
                 {previewPersistence.domEditSaveQueuePaused && !externalFileChanges.blocked && (
                   <SaveQueuePausedBanner
@@ -491,41 +534,7 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
                 <EditorShell
                   readOnlyPreview={readOnlyPreview}
                   readOnlyPreviewReason={readOnlyPreviewReason}
-                  panels={
-                    <>
-                      <StudioLeftPanels
-                        onSelectComposition={handleSelectComposition}
-                        onAddBlock={handleAddBlock}
-                        onPreviewBlock={setBlockPreview}
-                        onLint={lint.handleLint}
-                        linting={lint.linting}
-                        lintFindingCount={lint.lintFindingCount}
-                        lintFindingsByFile={lint.findingsByFile}
-                        lintHasError={lint.hasLintError}
-                        onAddAssetToTimeline={handleAddAssetAtPlayhead}
-                        onAddCompositionToTimeline={handleAddCompositionAtPlayhead}
-                      />
-                      <StudioRightPanels
-                        activeBlockParams={activeBlockParams}
-                        onDismissBlockParams={dismissBlockParams}
-                        onCloseBlockParams={() => {
-                          setActiveBlockParams(null);
-                          panelLayout.setRightPanelTab("design");
-                        }}
-                        recordingState={gestureState}
-                        recordingDuration={gestureRecording.recordingDuration}
-                        onToggleRecording={handleToggleRecording}
-                        sdkSession={sdkHandle.session}
-                        publishSdkSession={sdkHandle.publish}
-                        forceReloadSdkSession={sdkHandle.forceReload}
-                        reloadPreview={reloadPreview}
-                        recordEdit={editHistory.recordEdit}
-                        onToggleElementHidden={timelineEditing.handleToggleElementHidden}
-                        onAutoGroupCarveSources={timelineEditing.handleAutoGroupCarveSources}
-                        onAddMediaOverlay={handleAddMediaOverlay}
-                      />
-                    </>
-                  }
+                  panels={panels}
                   timelineToolbar={timelineToolbar}
                   renderClipContent={renderClipContent}
                   handleTimelineElementDelete={timelineEditing.handleTimelineElementDelete}
@@ -561,18 +570,7 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
                   recordingState={gestureState}
                   onToggleRecording={handleToggleRecording}
                   blockPreview={blockPreview}
-                  gestureOverlay={
-                    gestureState === "recording" && previewIframe ? (
-                      <GestureTrailOverlay
-                        samples={gestureRecording.samplesRef.current}
-                        sampleCount={gestureRecording.samplesRef.current.length}
-                        trail={gestureRecording.trailRef.current}
-                        canvasRect={canvasRectRef.current!}
-                        compositionSize={compositionDimensions ?? undefined}
-                        mode="recording"
-                      />
-                    ) : undefined
-                  }
+                  gestureOverlay={gestureOverlay}
                 />
                 <StudioOverlays
                   projectId={projectId}
@@ -580,7 +578,7 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
                   lintModal={lint.lintModal}
                   closeLintModal={lint.closeLintModal}
                   consoleErrors={consoleErrors}
-                  clearConsoleErrors={() => setConsoleErrors(null)}
+                  clearConsoleErrors={clearConsoleErrors}
                   domEditSession={domEditSession}
                   activeCompPath={activeCompPath}
                   toasts={toasts}

package/src/components/EditorShell.tsx

@@ -1,4 +1,4 @@
-import { useCallback, type ReactNode } from "react";
+import { memo, useCallback, type ReactNode } from "react";
 import { PreviewPane } from "./nle/PreviewPane";
 import { TimelinePane } from "./nle/TimelinePane";
 import { PreviewOverlays } from "./nle/PreviewOverlays";
@@ -81,7 +81,7 @@ export interface EditorShellProps extends TimelineEditCallbackDeps {
 // The dockable shell: every panel lives in one Dock, arranged by the user's
 // saved layout. Owns the shared player + composition-stack state via
 // NLEProvider so every panel shares one player.
-export function EditorShell({
+export const EditorShell = memo(function EditorShell({
   panels,
   timelineToolbar,
   renderClipContent,
@@ -228,7 +228,7 @@ export function EditorShell({
       </div>
     </PreviewReadOnlyProvider>
   );
-}
+});
 
 interface EditorShellBodyProps {
   panels: ReactNode;

package/src/components/StudioHeader.tsx

@@ -1,4 +1,4 @@
-import { useContext, type MouseEvent } from "react";
+import { memo, useContext, type MouseEvent } from "react";
 import { Camera } from "../icons/SystemIcons";
 import { useStudioShellContext } from "../contexts/StudioContext";
 import { usePanelLayoutContext } from "../contexts/PanelLayoutContext";
@@ -9,7 +9,7 @@ import { InspectorIcon } from "./icons/InspectorIcon";
 import { HyperframesLogo } from "./ui/HyperframesLogo";
 import { ShowThemeToggle, ThemeToggle } from "./ThemeToggle";
 
-export interface StudioHeaderProps {
+interface StudioHeaderProps {
   captureFrameHref: string;
   captureFrameFilename: string;
   handleCaptureFrameClick: (event: MouseEvent<HTMLAnchorElement>) => void;
@@ -35,7 +35,7 @@ export function shouldOpenInspector(
 }
 
 // fallow-ignore-next-line complexity
-export function StudioHeader({
+export const StudioHeader = memo(function StudioHeader({
   captureFrameHref,
   captureFrameFilename,
   handleCaptureFrameClick,
@@ -184,4 +184,4 @@ export function StudioHeader({
       </div>
     </div>
   );
-}
+});

package/src/components/StudioLeftPanels.tsx

@@ -1,4 +1,4 @@
-import { useCallback, type ReactNode } from "react";
+import { memo, useCallback, type ReactNode } from "react";
 import { SourceEditor } from "./editor/SourceEditor";
 import { FileTree } from "./editor/FileTree";
 import { MediaPreview } from "./MediaPreview";
@@ -36,7 +36,7 @@ function PanelColumn({ footer, children }: { footer: ReactNode; children: ReactN
 }
 
 // fallow-ignore-next-line complexity
-export function StudioLeftPanels({
+export const StudioLeftPanels = memo(function StudioLeftPanels({
   onSelectComposition,
   onAddBlock,
   onPreviewBlock,
@@ -159,7 +159,7 @@ export function StudioLeftPanels({
       </Dock.Panel>
     </>
   );
-}
+});
 
 function CodeBody({
   projectId,

package/src/components/StudioOverlays.tsx

@@ -1,4 +1,4 @@
-import type { ComponentProps } from "react";
+import { memo, type ComponentProps } from "react";
 import { LintModal } from "./LintModal";
 import { AskAgentModal } from "./AskAgentModal";
 import { StudioToast } from "./StudioToast";
@@ -9,7 +9,7 @@ import type { useToast } from "../hooks/useToast";
 
 type LintFindings = ComponentProps<typeof LintModal>["findings"];
 
-export interface StudioOverlaysProps {
+interface StudioOverlaysProps {
   projectId: string;
   projectDir?: string | null;
   lintModal: LintFindings | null;
@@ -28,7 +28,7 @@ export interface StudioOverlaysProps {
  * `App.tsx` to keep the shell within the studio's 600-line decomposition budget.
  */
 // fallow-ignore-next-line complexity
-export function StudioOverlays({
+export const StudioOverlays = memo(function StudioOverlays({
   projectId,
   projectDir,
   lintModal,
@@ -91,4 +91,4 @@ export function StudioOverlays({
       </div>
     </>
   );
-}
+});

package/src/components/StudioRightPanels.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { memo, useCallback } from "react";
 import type { StudioRightPanelsProps } from "./StudioRightPanels.types";
 
 import { PropertyPanel } from "./editor/PropertyPanel";
@@ -29,7 +29,9 @@ import { useRemoveBackground } from "../hooks/useRemoveBackground";
 import { useApplyColorGradingScope } from "../hooks/useApplyColorGradingScope";
 
 // fallow-ignore-next-line complexity
-export function StudioRightPanels({
+const seekToTime = (t: number) => usePlayerStore.getState().requestSeek(t);
+
+export const StudioRightPanels = memo(function StudioRightPanels({
   activeBlockParams,
   onCloseBlockParams,
   onDismissBlockParams,
@@ -166,7 +168,7 @@ export function StudioRightPanels({
       handleDomAttributeLiveCommit(attr, value, undefined, { previewOnly: true }),
     [handleDomAttributeLiveCommit],
   );
-  const handleHideAllSelected = () => {
+  const handleHideAllSelected = useCallback(() => {
     // Audio has no visual to hide, and `data-hidden` on an audio element is what
     // MUTES it — preview silences it and the render drops it from the mix. The
     // timeline withholds the eye on an audio track for that reason
@@ -181,7 +183,12 @@ export function StudioRightPanels({
     const { elements } = usePlayerStore.getState();
     const keys = timelineKeysForSelections(domEditGroupSelections, elements, activeCompPath);
     if (keys.length > 0) void onToggleElementHidden?.(keys, true);
-  };
+  }, [domEditGroupSelections, showToast, activeCompPath, onToggleElementHidden]);
+  const convertToKeyframes = useCallback(
+    (animId: string, duration?: number) =>
+      handleGsapConvertToKeyframes(animId, undefined, duration),
+    [handleGsapConvertToKeyframes],
+  );
   const propertyPanel = (
     <DesignPanelPromoteProvider
       selection={domEditGroupSelections.length > 1 ? null : domEditSelection}
@@ -246,10 +253,8 @@ export function StudioRightPanels({
         onCommitAnimatedProperties={commitAnimatedProperties}
         onAddKeyframe={handleGsapAddKeyframe}
         onRemoveKeyframe={handleGsapRemoveKeyframe}
-        onConvertToKeyframes={(animId, duration) =>
-          handleGsapConvertToKeyframes(animId, undefined, duration)
-        }
-        onSeekToTime={(t) => usePlayerStore.getState().requestSeek(t)}
+        onConvertToKeyframes={convertToKeyframes}
+        onSeekToTime={seekToTime}
         onSetArcPath={handleSetArcPath}
         onUpdateArcSegment={handleUpdateArcSegment}
         onUnroll={handleUnroll}
@@ -307,4 +312,4 @@ export function StudioRightPanels({
       </Dock.Panel>
     </>
   );
-}
+});

package/src/components/StudioToast.tsx

@@ -46,5 +46,5 @@ export function StudioToast({ message, tone, leaving, onDismiss }: StudioToastPr
 }
 
 export function toastSurface(isError: boolean): string {
-  return `border shadow-popover backdrop-blur-md ${isError ? "border-danger/40 bg-raised" : "border-border bg-raised/95"}`;
+  return `border shadow-popover bg-raised ${isError ? "border-danger/40" : "border-border"}`;
 }

package/src/components/TimelineToolbar.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { memo, useEffect, useRef } from "react";
 import {
   ArrowsOutLineHorizontal,
   Image,
@@ -141,7 +141,7 @@ function useKeyframeToggle(session?: DomEditSessionSlice) {
 }
 
 // fallow-ignore-next-line complexity
-export function TimelineToolbar({
+export const TimelineToolbar = memo(function TimelineToolbar({
   domEditSession,
   onSplitElement,
   history,
@@ -558,4 +558,4 @@ export function TimelineToolbar({
       </div>
     </div>
   );
-}
+});

package/src/components/editor/InlineTextToolbar.tsx

@@ -1,8 +1,12 @@
 import { useCallback, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import { applyInlineStyle } from "./inlineTextStyleRange";
-import { readInlineStyle, readInlineStyleSpread } from "./inlineTextStyleRead";
-import { parseCssColor, toHexColor } from "./colorValue";
+import {
+  readFirstPaintedElement,
+  readInlineStyle,
+  readInlineStyleSpread,
+} from "./inlineTextStyleRead";
+import { resolvePickerColor } from "./colorValue";
 import type { InlineTextEditSession } from "../../hooks/useInlineTextEdit";
 
 /**
@@ -248,7 +252,11 @@ function placeOverSelection(
     placeBelow,
     styles,
     colours,
-    pickerColour: toPickerColour(styles.color ?? colours[0], doc),
+    pickerColour: resolvePickerColor(
+      styles.color ?? colours[0],
+      readFirstPaintedElement(range, "color"),
+      DEFAULT_COLOR,
+    ),
   };
 }
 
@@ -257,27 +265,3 @@ function isBold(weight: string | undefined): boolean {
   if (weight === "bold" || weight === "bolder") return true;
   return Number.parseInt(weight, 10) >= 600;
 }
-
-/** A colour input accepts only `#rrggbb`; normalise any valid CSS colour to it. */
-function toPickerColour(value: string | undefined, doc: Document): string {
-  if (!value) return DEFAULT_COLOR;
-  const parsed = parseCssColor(value);
-  if (parsed) return toHexColor(parsed);
-
-  // Canvas delegates the full CSS colour grammar to the browser, including
-  // named colours that the small serialisation parser intentionally omits.
-  // DOM-only test environments can lack a canvas implementation, in which
-  // case the picker degrades to its explicit default while the swatch remains
-  // truthful because CSS still paints the original value.
-  try {
-    const context = doc.createElement("canvas").getContext("2d");
-    if (!context) return DEFAULT_COLOR;
-    context.fillStyle = DEFAULT_COLOR;
-    context.fillStyle = value;
-    const normalised =
-      typeof context.fillStyle === "string" ? parseCssColor(context.fillStyle) : null;
-    return normalised ? toHexColor(normalised) : DEFAULT_COLOR;
-  } catch {
-    return DEFAULT_COLOR;
-  }
-}