@hyperframes/studio 0.8.50 → 0.8.51

package/dist/styles/tailwind-preset.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/styles/tailwind-preset.shared.js","../../src/styles/tailwind-preset.ts"],"sourcesContent":["const studioPreset = {\n  theme: {\n    extend: {\n      colors: {\n        studio: {\n          bg: \"#0a0a0a\",\n          surface: \"#141414\",\n          border: \"#262626\",\n          text: \"#e5e5e5\",\n          muted: \"#737373\",\n          accent: \"#3CE6AC\",\n        },\n        panel: {\n          bg: \"#0C0C0E\",\n          // Open inspector-section body — slightly lighter than headers (bg)\n          // so the recessed scrollable region reads distinct.\n          \"bg-inset\": \"#121214\",\n          input: \"#161618\",\n          surface: \"#18181B\",\n          hover: \"#27272A\",\n          border: \"#1E1E1E\",\n          \"border-input\": \"#27272A\",\n          hairline: \"#1A1A1C\",\n          \"text-0\": \"#FAFAFA\",\n          \"text-1\": \"#E4E4E7\",\n          \"text-2\": \"#A1A1AA\",\n          \"text-3\": \"#71717A\",\n          \"text-4\": \"#52525B\",\n          \"text-5\": \"#3F3F46\",\n          accent: \"#3CE6AC\",\n          danger: \"#EF4444\",\n          media: \"#00E3FF\",\n          container: \"#F5A623\",\n        },\n      },\n    },\n  },\n  plugins: [],\n};\n\nexport default studioPreset;\n","import studioPreset from \"./tailwind-preset.shared.js\";\n\nexport default studioPreset;\n"],"mappings":";;;AAAA,IAAM,eAAe;AAAA,EACnB,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,QAAQ;AAAA,QACN,QAAQ;AAAA,UACN,IAAI;AAAA,UACJ,SAAS;AAAA,UACT,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,QACA,OAAO;AAAA,UACL,IAAI;AAAA;AAAA;AAAA,UAGJ,YAAY;AAAA,UACZ,OAAO;AAAA,UACP,SAAS;AAAA,UACT,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,gBAAgB;AAAA,UAChB,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,WAAW;AAAA,QACb;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACA,SAAS,CAAC;AACZ;AAEA,IAAO,iCAAQ;;;ACtCf,IAAO,0BAAQ;","names":[]}
+{"version":3,"sources":["../../src/styles/tailwind-preset.shared.js","../../src/styles/tailwind-preset.ts"],"sourcesContent":["/** @deprecated Superseded by `src/styles/theme.css` (published as\n * `@hyperframes/studio/theme.css`); kept one more major for Tailwind v3\n * consumers. Values are byte-identical; theme.test.ts fails if they drift. */\nconst studioPreset = {\n  theme: {\n    extend: {\n      colors: {\n        studio: {\n          bg: \"#0a0a0a\",\n          surface: \"#141414\",\n          border: \"#262626\",\n          text: \"#e5e5e5\",\n          muted: \"#737373\",\n          accent: \"#3CE6AC\",\n        },\n        panel: {\n          bg: \"#0C0C0E\",\n          // Open inspector-section body — slightly lighter than headers (bg)\n          // so the recessed scrollable region reads distinct.\n          \"bg-inset\": \"#121214\",\n          input: \"#161618\",\n          surface: \"#18181B\",\n          hover: \"#27272A\",\n          border: \"#1E1E1E\",\n          \"border-input\": \"#27272A\",\n          hairline: \"#1A1A1C\",\n          \"text-0\": \"#FAFAFA\",\n          \"text-1\": \"#E4E4E7\",\n          \"text-2\": \"#A1A1AA\",\n          \"text-3\": \"#71717A\",\n          \"text-4\": \"#52525B\",\n          \"text-5\": \"#3F3F46\",\n          accent: \"#3CE6AC\",\n          danger: \"#EF4444\",\n          media: \"#00E3FF\",\n          container: \"#F5A623\",\n        },\n      },\n    },\n  },\n  plugins: [],\n};\n\nexport default studioPreset;\n","import studioPreset from \"./tailwind-preset.shared.js\";\n\nexport default studioPreset;\n"],"mappings":";;;AAGA,IAAM,eAAe;AAAA,EACnB,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,QAAQ;AAAA,QACN,QAAQ;AAAA,UACN,IAAI;AAAA,UACJ,SAAS;AAAA,UACT,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,QACA,OAAO;AAAA,UACL,IAAI;AAAA;AAAA;AAAA,UAGJ,YAAY;AAAA,UACZ,OAAO;AAAA,UACP,SAAS;AAAA,UACT,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,gBAAgB;AAAA,UAChB,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,WAAW;AAAA,QACb;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACA,SAAS,CAAC;AACZ;AAEA,IAAO,iCAAQ;;;ACzCf,IAAO,0BAAQ;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.50",
+  "version": "0.8.51",
   "description": "",
   "repository": {
     "type": "git",
@@ -23,6 +23,7 @@
       "import": "./dist/styles/tailwind-preset.js",
       "types": "./dist/styles/tailwind-preset.d.ts"
     },
+    "./theme.css": "./src/styles/theme.css",
     "./package.json": "./package.json"
   },
   "publishConfig": {
@@ -44,32 +45,30 @@
     "@phosphor-icons/react": "^2.1.10",
     "@tanstack/react-virtual": "^3.14.6",
     "bpm-detective": "^2.0.5",
-    "dompurify": "^3.2.4",
+    "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
-    "marked": "^14.1.4",
     "mediabunny": "^1.45.3",
-    "@hyperframes/player": "0.8.50",
-    "@hyperframes/core": "0.8.50",
-    "@hyperframes/studio-server": "0.8.50",
-    "@hyperframes/sdk": "0.8.50",
-    "@hyperframes/parsers": "0.8.50"
+    "@hyperframes/core": "0.8.51",
+    "@hyperframes/player": "0.8.51",
+    "@hyperframes/studio-server": "0.8.51",
+    "@hyperframes/sdk": "0.8.51",
+    "@hyperframes/parsers": "0.8.51"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.3.3",
     "@types/react": "19",
     "@types/react-dom": "19",
     "@vitejs/plugin-react": "^4.0.0",
-    "autoprefixer": "^10.4.0",
     "chokidar": "^4.0.3",
     "fake-indexeddb": "^6.2.5",
-    "postcss": "^8.4.0",
     "puppeteer-core": "^25.2.1",
-    "tailwindcss": "^3.4.0",
+    "tailwindcss": "^4.3.3",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0",
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.50"
+    "@hyperframes/producer": "0.8.51"
   },
   "peerDependencies": {
     "react": "19",

package/src/App.tsx

@@ -53,8 +53,6 @@ import { StudioRightPanel } from "./components/StudioRightPanel";
 import { TimelineToolbar } from "./components/TimelineToolbar";
 import { StudioPlaybackProvider, StudioShellProvider } from "./contexts/StudioContext";
 import { PanelLayoutProvider } from "./contexts/PanelLayoutContext";
-import { ViewModeProvider, useViewModeState } from "./contexts/ViewModeContext";
-import { StoryboardView } from "./components/storyboard/StoryboardView";
 import { FileManagerProvider } from "./contexts/FileManagerContext";
 import { DomEditProvider } from "./contexts/DomEditContext";
 import { StudioSplash } from "./components/StudioSplash";
@@ -68,7 +66,6 @@ const getTimelineSelectionSet = () => usePlayerStore.getState().selectedElementI
 export function StudioApp() {
   const { projectId, resolving, waitingForServer } = useServerConnection();
   const initialUrlStateRef = useRef(readStudioUrlStateFromWindow());
-  const viewModeValue = useViewModeState();
   useStudioSessionStart(projectId, resolving, waitingForServer);
   const [compIdToSrc, setCompIdToSrc] = useState<Map<string, string>>(new Map());
   const [previewIframe, setPreviewIframe] = useState<HTMLIFrameElement | null>(null);
@@ -327,10 +324,8 @@ export function StudioApp() {
     effectiveTimelineDuration,
   });
   const compositionDimensions = useCompositionDimensions(previewIframeRef);
-  const { lintModal, linting, handleLint, closeLintModal, findingsByFile } = useLintModal(
-    projectId,
-    refreshKey,
-  );
+  const { lintModal, linting, handleLint, closeLintModal, findingsByFile, hasLintError } =
+    useLintModal(projectId, refreshKey);
   const frameCapture = useFrameCapture({
     projectId,
     activeCompPath,
@@ -441,144 +436,136 @@ export function StudioApp() {
   return (
     <StudioShellProvider value={studioCtxValue}>
       <StudioPlaybackProvider value={studioCtxValue}>
-        <ViewModeProvider value={viewModeValue}>
-          <PanelLayoutProvider value={panelLayout}>
-            <FileManagerProvider value={fileManager}>
-              <DomEditProvider value={domEditSession}>
-                <div
-                  className="flex flex-col h-full w-full bg-neutral-950 relative"
-                  onDragOver={fileDrop.onDragOver}
-                  onDrop={fileDrop.onDrop}
-                >
-                  <StudioHeader
-                    captureFrameHref={frameCapture.captureFrameHref}
-                    captureFrameFilename={frameCapture.captureFrameFilename}
-                    handleCaptureFrameClick={frameCapture.handleCaptureFrameClick}
-                    refreshCaptureFrameTime={frameCapture.refreshCaptureFrameTime}
-                    capturing={frameCapture.capturing}
-                    inspectorButtonActive={inspectorButtonActive}
-                    inspectorPanelActive={inspectorPanelActive}
-                    onExport={() => {
-                      void (async () => {
-                        await previewPersistence.waitForPendingDomEditSaves();
-                        await renderQueue.startRender(undefined);
-                      })();
-                    }}
+        <PanelLayoutProvider value={panelLayout}>
+          <FileManagerProvider value={fileManager}>
+            <DomEditProvider value={domEditSession}>
+              <div
+                className="flex flex-col h-full w-full bg-neutral-950 relative"
+                onDragOver={fileDrop.onDragOver}
+                onDrop={fileDrop.onDrop}
+              >
+                <StudioHeader
+                  captureFrameHref={frameCapture.captureFrameHref}
+                  captureFrameFilename={frameCapture.captureFrameFilename}
+                  handleCaptureFrameClick={frameCapture.handleCaptureFrameClick}
+                  refreshCaptureFrameTime={frameCapture.refreshCaptureFrameTime}
+                  capturing={frameCapture.capturing}
+                  inspectorButtonActive={inspectorButtonActive}
+                  inspectorPanelActive={inspectorPanelActive}
+                  onExport={() => {
+                    void (async () => {
+                      await previewPersistence.waitForPendingDomEditSaves();
+                      await renderQueue.startRender(undefined);
+                    })();
+                  }}
+                />
+                {previewPersistence.domEditSaveQueuePaused && !externalFileChanges.blocked && (
+                  <SaveQueuePausedBanner
+                    message={previewPersistence.domEditSaveQueuePaused}
+                    onRetry={previewPersistence.resetDomEditSaveQueueBreaker}
                   />
-                  {previewPersistence.domEditSaveQueuePaused && !externalFileChanges.blocked && (
-                    <SaveQueuePausedBanner
-                      message={previewPersistence.domEditSaveQueuePaused}
-                      onRetry={previewPersistence.resetDomEditSaveQueueBreaker}
-                    />
-                  )}
-                  <ExternalFileConflictBanner coordinator={externalFileChanges} />
-                  {viewModeValue.viewMode === "storyboard" && (
-                    <StoryboardView
-                      projectId={projectId}
+                )}
+                <ExternalFileConflictBanner coordinator={externalFileChanges} />
+                <EditorShell
+                  left={
+                    <StudioLeftSidebar
+                      leftSidebarRef={leftSidebarRef}
                       onSelectComposition={handleSelectComposition}
+                      onAddBlock={handleAddBlock}
+                      onPreviewBlock={setBlockPreview}
+                      onLint={handleLint}
+                      linting={linting}
+                      lintFindingCount={lintModal?.length ?? findingsByFile.size}
+                      lintFindingsByFile={findingsByFile}
+                      lintHasError={hasLintError}
+                      onAddAssetToTimeline={handleAddAssetAtPlayhead}
+                      onAddCompositionToTimeline={handleAddCompositionAtPlayhead}
                     />
-                  )}
-                  <EditorShell
-                    hidden={viewModeValue.viewMode === "storyboard"}
-                    left={
-                      <StudioLeftSidebar
-                        leftSidebarRef={leftSidebarRef}
-                        onSelectComposition={handleSelectComposition}
-                        onAddBlock={handleAddBlock}
-                        onPreviewBlock={setBlockPreview}
-                        onLint={handleLint}
-                        linting={linting}
-                        lintFindingCount={lintModal?.length ?? findingsByFile.size}
-                        lintFindingsByFile={findingsByFile}
-                        onAddAssetToTimeline={handleAddAssetAtPlayhead}
-                        onAddCompositionToTimeline={handleAddCompositionAtPlayhead}
+                  }
+                  right={
+                    panelLayout.effectiveRightCollapsed ? null : (
+                      <StudioRightPanel
+                        designPanelActive={designPanelActive}
+                        activeBlockParams={activeBlockParams}
+                        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}
                       />
-                    }
-                    right={
-                      panelLayout.effectiveRightCollapsed ? null : (
-                        <StudioRightPanel
-                          designPanelActive={designPanelActive}
-                          activeBlockParams={activeBlockParams}
-                          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}
-                        />
-                      )
-                    }
-                    timelineToolbar={timelineToolbar}
-                    renderClipContent={renderClipContent}
-                    handleTimelineElementDelete={timelineEditing.handleTimelineElementDelete}
-                    handleTimelineAssetDrop={timelineEditing.handleTimelineAssetDrop}
-                    handleTimelineBlockDrop={handleTimelineBlockDrop}
-                    handleTimelineCompositionDrop={timelineEditing.handleTimelineCompositionDrop}
-                    handlePreviewBlockDrop={handlePreviewBlockDrop}
-                    handleTimelineFileDrop={timelineEditing.handleTimelineFileDrop}
-                    handleTimelineElementMove={timelineEditing.handleTimelineElementMove}
-                    handleTimelineElementsMove={handleTimelineElementsMove}
-                    handleTimelineElementResize={timelineEditing.handleTimelineElementResize}
-                    handleTimelineGroupResize={timelineEditing.handleTimelineGroupResize}
-                    handleToggleTrackHidden={timelineEditing.handleToggleTrackHidden}
-                    setAudioGroupAttribute={timelineEditing.setAudioGroupAttribute}
-                    handleGroupClips={timelineEditing.handleAutoGroupCarveSources}
-                    setElementFxAttribute={timelineEditing.setElementFxAttribute}
-                    handleBlockedTimelineEdit={timelineEditing.handleBlockedTimelineEdit}
-                    handleTimelineElementSplit={timelineEditing.handleTimelineElementSplit}
-                    handleRazorSplit={timelineEditing.handleRazorSplit}
-                    handleRazorSplitAll={timelineEditing.handleRazorSplitAll}
-                    onCopyClip={handleCopy}
-                    onPasteClip={handlePaste}
-                    onDuplicateClip={handleDuplicate}
-                    canPasteClip={canPaste}
-                    setCompIdToSrc={setCompIdToSrc}
-                    setCompositionLoading={setCompositionLoading}
-                    shouldShowMotionPath={shouldShowMotionPath}
-                    shouldShowSelectedDomBounds={shouldShowSelectedDomBounds}
-                    isGestureRecording={gestureState === "recording"}
-                    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
-                    }
-                  />
-                  <StudioOverlays
-                    projectId={projectId}
-                    projectDir={fileManager.projectDir}
-                    lintModal={lintModal}
-                    closeLintModal={closeLintModal}
-                    consoleErrors={consoleErrors}
-                    clearConsoleErrors={() => setConsoleErrors(null)}
-                    domEditSession={domEditSession}
-                    activeCompPath={activeCompPath}
-                    toasts={toasts}
-                    dismissToast={dismissToast}
-                  />
-                </div>
-              </DomEditProvider>
-            </FileManagerProvider>
-          </PanelLayoutProvider>
-        </ViewModeProvider>
+                    )
+                  }
+                  timelineToolbar={timelineToolbar}
+                  renderClipContent={renderClipContent}
+                  handleTimelineElementDelete={timelineEditing.handleTimelineElementDelete}
+                  handleTimelineAssetDrop={timelineEditing.handleTimelineAssetDrop}
+                  handleTimelineBlockDrop={handleTimelineBlockDrop}
+                  handleTimelineCompositionDrop={timelineEditing.handleTimelineCompositionDrop}
+                  handlePreviewBlockDrop={handlePreviewBlockDrop}
+                  handleTimelineFileDrop={timelineEditing.handleTimelineFileDrop}
+                  handleTimelineElementMove={timelineEditing.handleTimelineElementMove}
+                  handleTimelineElementsMove={handleTimelineElementsMove}
+                  handleTimelineElementResize={timelineEditing.handleTimelineElementResize}
+                  handleTimelineGroupResize={timelineEditing.handleTimelineGroupResize}
+                  handleToggleTrackHidden={timelineEditing.handleToggleTrackHidden}
+                  setAudioGroupAttribute={timelineEditing.setAudioGroupAttribute}
+                  handleGroupClips={timelineEditing.handleAutoGroupCarveSources}
+                  setElementFxAttribute={timelineEditing.setElementFxAttribute}
+                  handleBlockedTimelineEdit={timelineEditing.handleBlockedTimelineEdit}
+                  handleTimelineElementSplit={timelineEditing.handleTimelineElementSplit}
+                  handleRazorSplit={timelineEditing.handleRazorSplit}
+                  handleRazorSplitAll={timelineEditing.handleRazorSplitAll}
+                  onCopyClip={handleCopy}
+                  onPasteClip={handlePaste}
+                  onDuplicateClip={handleDuplicate}
+                  canPasteClip={canPaste}
+                  setCompIdToSrc={setCompIdToSrc}
+                  setCompositionLoading={setCompositionLoading}
+                  shouldShowMotionPath={shouldShowMotionPath}
+                  shouldShowSelectedDomBounds={shouldShowSelectedDomBounds}
+                  isGestureRecording={gestureState === "recording"}
+                  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
+                  }
+                />
+                <StudioOverlays
+                  projectId={projectId}
+                  projectDir={fileManager.projectDir}
+                  lintModal={lintModal}
+                  closeLintModal={closeLintModal}
+                  consoleErrors={consoleErrors}
+                  clearConsoleErrors={() => setConsoleErrors(null)}
+                  domEditSession={domEditSession}
+                  activeCompPath={activeCompPath}
+                  toasts={toasts}
+                  dismissToast={dismissToast}
+                />
+              </div>
+            </DomEditProvider>
+          </FileManagerProvider>
+        </PanelLayoutProvider>
       </StudioPlaybackProvider>
     </StudioShellProvider>
   );

package/src/captions/components/CaptionAnimationPanel.tsx

@@ -171,7 +171,7 @@ function AnimationPhase({
               }}
               className="flex-1 accent-studio-accent disabled:opacity-40"
             />
-            <span className="text-2xs text-neutral-400 font-mono w-8 text-right flex-shrink-0">
+            <span className="text-2xs text-neutral-400 font-mono w-8 text-right shrink-0">
               {intensity.toFixed(2)}
             </span>
           </div>
@@ -249,7 +249,7 @@ export const CaptionAnimationPanel = memo(function CaptionAnimationPanel() {
   return (
     <div className="flex flex-col h-full min-h-0">
       {gated && (
-        <div className="flex-shrink-0 mx-3 mt-2 px-2 py-1.5 rounded border border-amber-500/30 bg-amber-500/10">
+        <div className="shrink-0 mx-3 mt-2 px-2 py-1.5 rounded-sm border border-amber-500/30 bg-amber-500/10">
           <p className="text-2xs text-amber-300/90 leading-snug">
             Animation editing isn&apos;t applied to playback or saved yet, so these controls are
             disabled.
@@ -286,13 +286,13 @@ export const CaptionAnimationPanel = memo(function CaptionAnimationPanel() {
       </div>
 
       {/* Footer */}
-      <div className="flex-shrink-0 px-3 py-2 border-t border-neutral-800">
+      <div className="shrink-0 px-3 py-2 border-t border-neutral-800">
         <button
           type="button"
           onClick={handleApplyToAll}
           disabled={gated}
           title={gated ? "Disabled until animation editing is applied to playback" : undefined}
-          className="w-full py-1.5 rounded border border-neutral-700 text-2xs text-neutral-300 hover:border-studio-accent/50 hover:text-studio-accent transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:border-neutral-700 disabled:hover:text-neutral-300"
+          className="w-full py-1.5 rounded-sm border border-neutral-700 text-2xs text-neutral-300 hover:border-studio-accent/50 hover:text-studio-accent transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:border-neutral-700 disabled:hover:text-neutral-300"
         >
           Apply to all groups
         </button>

package/src/captions/components/CaptionOverlayUtils.ts

@@ -221,9 +221,8 @@ export function registerCaptionIframe(ref: React.RefObject<HTMLIFrameElement | n
 
 /**
  * True when the caption preview iframe is mounted AND visible. The caption
- * store's isEditMode stays true while the preview is merely hidden (e.g.
- * storyboard view), so hotkeys must not route ⌘Z to the caption stack unless
- * the user can actually see the captions the undo would change.
+ * store's isEditMode stays true while the preview is merely hidden, so hotkeys must not
+ * route ⌘Z to the caption stack unless the user can see the captions the undo would change.
  */
 export function isCaptionPreviewVisible(): boolean {
   const iframe = registeredIframe?.current;

package/src/captions/components/CaptionPropertyPanel.tsx

@@ -213,7 +213,7 @@ export const CaptionPropertyPanel = memo(function CaptionPropertyPanel({
   return (
     <div className="flex flex-col h-full min-h-0">
       {/* Header */}
-      <div className="px-3 py-2 border-b border-neutral-800 flex-shrink-0">
+      <div className="px-3 py-2 border-b border-neutral-800 shrink-0">
         <div className="flex items-center justify-between mb-1.5">
           <span className="text-2xs text-neutral-500">{countLabel}</span>
         </div>
@@ -225,7 +225,7 @@ export const CaptionPropertyPanel = memo(function CaptionPropertyPanel({
             aria-selected={activeTab === "style"}
             onClick={() => setActiveTab("style")}
             className={[
-              "flex-1 py-0.5 rounded text-2xs font-medium transition-colors",
+              "flex-1 py-0.5 rounded-sm text-2xs font-medium transition-colors",
               activeTab === "style"
                 ? "bg-studio-accent/20 text-studio-accent border border-studio-accent/50"
                 : "text-neutral-500 border border-neutral-800 hover:text-neutral-300 hover:border-neutral-600",
@@ -239,7 +239,7 @@ export const CaptionPropertyPanel = memo(function CaptionPropertyPanel({
             aria-selected={activeTab === "animation"}
             onClick={() => setActiveTab("animation")}
             className={[
-              "flex-1 py-0.5 rounded text-2xs font-medium transition-colors",
+              "flex-1 py-0.5 rounded-sm text-2xs font-medium transition-colors",
               activeTab === "animation"
                 ? "bg-studio-accent/20 text-studio-accent border border-studio-accent/50"
                 : "text-neutral-500 border border-neutral-800 hover:text-neutral-300 hover:border-neutral-600",

package/src/captions/components/CaptionTimeline.tsx

@@ -109,7 +109,7 @@ export const CaptionTimeline = memo(function CaptionTimeline({
               tabIndex={0}
               aria-label={`Caption word "${seg.text}"`}
               aria-pressed={isSelected}
-              className={`absolute top-1 bottom-1 rounded flex items-center overflow-hidden cursor-pointer focus-visible:ring-1 focus-visible:ring-white outline-none${
+              className={`absolute top-1 bottom-1 rounded flex items-center overflow-hidden cursor-pointer focus-visible:ring-1 focus-visible:ring-white outline-hidden${
                 isSelected ? " ring-1 ring-white/50 z-10" : ""
               }`}
               style={{

package/src/captions/components/shared.tsx

@@ -2,7 +2,7 @@ import type React from "react";
 import { useEffect, useRef, useState } from "react";
 
 export const inputCls =
-  "w-full bg-neutral-900 border border-neutral-800 rounded px-1.5 py-0.5 text-2xs text-neutral-200 font-mono outline-none focus:border-studio-accent disabled:opacity-40 disabled:cursor-not-allowed";
+  "w-full bg-neutral-900 border border-neutral-800 rounded-sm px-1.5 py-0.5 text-2xs text-neutral-200 font-mono outline-hidden focus:border-studio-accent disabled:opacity-40 disabled:cursor-not-allowed";
 
 export function Section({ label, children }: { label: string; children: React.ReactNode }) {
   return (
@@ -20,7 +20,7 @@ export function Section({ label, children }: { label: string; children: React.Re
 export function Row({ label, children }: { label: string; children: React.ReactNode }) {
   return (
     <div className="flex items-center gap-2">
-      <span className="text-2xs text-neutral-600 w-14 text-right flex-shrink-0">{label}</span>
+      <span className="text-2xs text-neutral-600 w-14 text-right shrink-0">{label}</span>
       <div className="flex-1 min-w-0">{children}</div>
     </div>
   );

package/src/components/AskAgentModal.tsx

@@ -66,8 +66,8 @@ export function AskAgentModal({
     <div
       className={
         anchorPoint
-          ? "hf-backdrop-in fixed inset-0 z-[100] bg-black/60 backdrop-blur-sm"
-          : "hf-backdrop-in fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm"
+          ? "hf-backdrop-in fixed inset-0 z-100 bg-black/60 backdrop-blur-xs"
+          : "hf-backdrop-in fixed inset-0 z-100 flex items-center justify-center bg-black/60 backdrop-blur-xs"
       }
       onClick={requestClose}
     >
@@ -77,7 +77,7 @@ export function AskAgentModal({
         aria-modal="true"
         aria-label="Copy prompt to AI agent"
         tabIndex={-1}
-        className={`w-[480px] rounded-2xl border border-neutral-800 bg-neutral-950 shadow-2xl outline-none ${
+        className={`w-[480px] rounded-2xl border border-neutral-800 bg-neutral-950 shadow-2xl outline-hidden ${
           anchorPoint ? "fixed" : ""
         }`}
         style={modalPositionStyle}
@@ -112,7 +112,7 @@ export function AskAgentModal({
         <div className="px-5 py-4 space-y-3">
           <textarea
             ref={inputRef}
-            className="w-full h-24 px-3 py-2 rounded-lg border border-neutral-800 bg-neutral-900/60 text-sm text-neutral-200 placeholder-neutral-600 resize-none focus:outline-none focus:border-studio-accent/60 focus:ring-1 focus:ring-studio-accent/30"
+            className="w-full h-24 px-3 py-2 rounded-lg border border-neutral-800 bg-neutral-900/60 text-sm text-neutral-200 placeholder-neutral-600 resize-none focus:outline-hidden focus:border-studio-accent/60 focus:ring-1 focus:ring-studio-accent/30"
             placeholder="Describe what you want to change…"
             value={value}
             onChange={(e) => setValue(e.target.value)}
@@ -127,7 +127,7 @@ export function AskAgentModal({
               <summary className="text-[11px] text-neutral-500 cursor-pointer select-none hover:text-neutral-400">
                 Context included in prompt
               </summary>
-              <pre className="mt-2 max-h-40 overflow-auto rounded-lg bg-neutral-900/80 px-3 py-2 text-[11px] leading-relaxed text-neutral-500 whitespace-pre-wrap break-words border border-neutral-800/50">
+              <pre className="mt-2 max-h-40 overflow-auto rounded-lg bg-neutral-900/80 px-3 py-2 text-[11px] leading-relaxed text-neutral-500 whitespace-pre-wrap wrap-break-word border border-neutral-800/50">
                 {contextPreview}
               </pre>
             </details>

package/src/components/EditorShell.tsx

@@ -16,12 +16,12 @@ import type { BlockPreviewInfo } from "./sidebar/BlocksTab";
 import type { GestureRecordingState } from "./editor/GestureRecordControl";
 import { useTimelineSelectionPreviewSync } from "../hooks/useTimelineSelectionPreviewSync";
 import { StudioAgentTools } from "../webmcp/StudioAgentTools";
+import type { TimelineDropPlacement } from "../player/components/timelineCallbacks";
 
 type RenderClipContent = (
   element: TimelineElement,
   style: { clip: string; label: string },
 ) => ReactNode;
-type TimelineDropPlacement = Pick<TimelineElement, "start" | "track">;
 
 // The seven move/resize/split/razor handlers come from TimelineEditCallbackDeps
 // (shared with useTimelineEditCallbacks); the rest are drop + wiring props.
@@ -30,8 +30,6 @@ export interface EditorShellProps extends TimelineEditCallbackDeps {
   left: ReactNode;
   /** Right panel (inspector/design) or null when collapsed, in the top row. */
   right: ReactNode;
-  /** Hide the whole shell (e.g. while the storyboard view is active). */
-  hidden?: boolean;
   timelineToolbar: ReactNode;
   renderClipContent: RenderClipContent;
   handleTimelineElementDelete: (element: TimelineElement) => Promise<void> | void;
@@ -76,7 +74,6 @@ export interface EditorShellProps extends TimelineEditCallbackDeps {
 export function EditorShell({
   left,
   right,
-  hidden,
   timelineToolbar,
   renderClipContent,
   handleTimelineElementDelete,
@@ -157,7 +154,7 @@ export function EditorShell({
   });
 
   return (
-    <div className={`flex flex-col flex-1 min-h-0${hidden ? " hidden" : ""}`}>
+    <div className="flex flex-col flex-1 min-h-0">
       <TimelineEditProvider value={timelineEditCallbacks}>
         <NLEProvider
           projectId={projectId}
@@ -279,7 +276,7 @@ function EditorShellBody({
       ref={containerRef}
       // Shell canvas is a step LIGHTER than the near-black panel cards so the
       // gaps between panels read as visible seams (CapCut-style).
-      className="flex flex-col flex-1 min-h-0 bg-[#18181B]"
+      className="flex flex-col flex-1 min-h-0 bg-panel-surface"
       onKeyDown={handleKeyDown}
       tabIndex={-1}
     >
@@ -316,7 +313,7 @@ function EditorShellBody({
         onSelectTimelineElement={onSelectTimelineElement}
         timelineFooter={
           captionEditMode ? (
-            <div className="border-t border-neutral-800/30 flex-shrink-0" style={{ height: 60 }}>
+            <div className="border-t border-neutral-800/30 shrink-0" style={{ height: 60 }}>
               <div className="flex items-center gap-1.5 px-2 py-0.5">
                 <span className="text-[9px] font-medium text-neutral-500 uppercase tracking-wider">
                   Captions