@hyperframes/studio 0.8.50 → 0.8.53-desktop.0

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.selectionSync.test.tsx

@@ -42,7 +42,6 @@ vi.mock("./nle/NLEContext", () => ({
   useNLEContext: () => ({
     compositionStack: [],
     updateCompositionStack: vi.fn(),
-    containerRef: { current: null },
   }),
 }));
 vi.mock("./nle/useTimelineEditCallbacks", () => ({
@@ -53,7 +52,14 @@ vi.mock("./nle/PreviewOverlays", () => ({ PreviewOverlays: () => null }));
 vi.mock("./nle/TimelinePane", () => ({ TimelinePane: () => null }));
 vi.mock("../captions/components/CaptionTimeline", () => ({ CaptionTimeline: () => null }));
 
-Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+Object.assign(globalThis, {
+  IS_REACT_ACT_ENVIRONMENT: true,
+  ResizeObserver: class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  },
+});
 
 afterEach(() => {
   document.body.innerHTML = "";
@@ -69,8 +75,7 @@ describe("EditorShell timeline selection sync", () => {
     act(() => {
       root.render(
         <EditorShell
-          left={null}
-          right={null}
+          panels={null}
           timelineToolbar={null}
           renderClipContent={() => null}
           handleTimelineElementDelete={vi.fn()}

package/src/components/EditorShell.tsx

@@ -16,22 +16,19 @@ 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";
+import { Dock } from "./dock/Dock";
 
 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.
 export interface EditorShellProps extends TimelineEditCallbackDeps {
-  /** Left sidebar (media/library), rendered in the top row. */
-  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;
+  /** Dock.Panel elements for every panel except the built-in preview and timeline. */
+  panels: ReactNode;
   timelineToolbar: ReactNode;
   renderClipContent: RenderClipContent;
   handleTimelineElementDelete: (element: TimelineElement) => Promise<void> | void;
@@ -67,16 +64,18 @@ export interface EditorShellProps extends TimelineEditCallbackDeps {
   isGestureRecording?: boolean;
   recordingState?: GestureRecordingState;
   onToggleRecording?: () => void;
+  /**
+   * Host layer over the preview, positioned with `usePreviewCompositionRect`. Hidden in
+   * fullscreen and during a block preview; below the selection overlay past z-index 10.
+   */
   gestureOverlay?: ReactNode;
 }
 
-// The CapCut-style shell: [left | preview | right] in a top row, with a
-// full-width timeline spanning the bottom. Owns the shared player +
-// composition-stack state via NLEProvider so both rows share one player.
+// 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({
-  left,
-  right,
-  hidden,
+  panels,
   timelineToolbar,
   renderClipContent,
   handleTimelineElementDelete,
@@ -157,7 +156,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}
@@ -177,8 +176,8 @@ export function EditorShell({
           }}
         >
           <EditorShellBody
-            left={left}
-            right={right}
+            projectId={projectId}
+            panels={panels}
             captionEditMode={captionEditMode}
             onSelectTimelineElement={handleTimelineElementSelect}
             onPreviewBlockDrop={handlePreviewBlockDrop}
@@ -212,8 +211,8 @@ export function EditorShell({
 }
 
 interface EditorShellBodyProps {
-  left: ReactNode;
-  right: ReactNode;
+  panels: ReactNode;
+  projectId: string;
   captionEditMode: boolean;
   previewOverlay: ReactNode;
   onSelectTimelineElement: (element: TimelineElement | null) => void;
@@ -238,8 +237,8 @@ interface EditorShellBodyProps {
 }
 
 function EditorShellBody({
-  left,
-  right,
+  panels,
+  projectId,
   captionEditMode,
   previewOverlay,
   onSelectTimelineElement,
@@ -256,7 +255,7 @@ function EditorShellBody({
   onDuplicateClip,
   canPasteClip,
 }: EditorShellBodyProps) {
-  const { compositionStack, updateCompositionStack, containerRef } = useNLEContext();
+  const { compositionStack, updateCompositionStack } = useNLEContext();
 
   // The caption track's blocks are seek targets; CaptionTimeline took an onSeek
   // prop that nothing ever passed, so clicking a block did nothing.
@@ -276,57 +275,55 @@ function EditorShellBody({
 
   return (
     <div
-      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}
     >
       {/* Renders nothing; exposes Studio's state to an agentic browser. Mounted
           here rather than in App because it needs the DomEdit contexts. */}
       <StudioAgentTools />
-      {/* Top row: [left | preview | right] — outer padding + the 8px resize
-          seams give the panels CapCut-style separation on the dark canvas. */}
-      <div className="flex flex-row flex-1 min-h-0 px-px pt-px">
-        {left}
-        <div className="flex-1 min-w-0 flex flex-col relative">
-          <PreviewPane
-            previewOverlay={previewOverlay}
+      <Dock.Root projectId={projectId}>
+        <Dock.Panel id="preview">
+          <div className="relative flex h-full w-full min-w-0 flex-col">
+            <PreviewPane
+              previewOverlay={previewOverlay}
+              onSelectTimelineElement={onSelectTimelineElement}
+              onPreviewBlockDrop={onPreviewBlockDrop}
+            />
+          </div>
+        </Dock.Panel>
+        <Dock.Panel id="timeline">
+          <TimelinePane
+            timelineToolbar={timelineToolbar}
+            renderClipContent={renderClipContent}
+            onFileDrop={onFileDrop}
+            onAssetDrop={onAssetDrop}
+            onBlockDrop={onBlockDrop}
+            onCompositionDrop={onCompositionDrop}
+            onDeleteElement={onDeleteElement}
+            onCopyClip={onCopyClip}
+            onPasteClip={onPasteClip}
+            onDuplicateClip={onDuplicateClip}
+            canPasteClip={canPasteClip}
             onSelectTimelineElement={onSelectTimelineElement}
-            onPreviewBlockDrop={onPreviewBlockDrop}
+            timelineFooter={
+              captionEditMode ? (
+                <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
+                    </span>
+                  </div>
+                  <CaptionTimeline pixelsPerSecond={100} onSeek={seekCaptionTime} />
+                </div>
+              ) : undefined
+            }
           />
-        </div>
-        {right}
-      </div>
-
-      {/* Full-width timeline row */}
-      <TimelinePane
-        timelineToolbar={timelineToolbar}
-        renderClipContent={renderClipContent}
-        onFileDrop={onFileDrop}
-        onAssetDrop={onAssetDrop}
-        onBlockDrop={onBlockDrop}
-        onCompositionDrop={onCompositionDrop}
-        onDeleteElement={onDeleteElement}
-        onCopyClip={onCopyClip}
-        onPasteClip={onPasteClip}
-        onDuplicateClip={onDuplicateClip}
-        canPasteClip={canPasteClip}
-        onSelectTimelineElement={onSelectTimelineElement}
-        timelineFooter={
-          captionEditMode ? (
-            <div className="border-t border-neutral-800/30 flex-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
-                </span>
-              </div>
-              <CaptionTimeline pixelsPerSecond={100} onSeek={seekCaptionTime} />
-            </div>
-          ) : undefined
-        }
-      />
+        </Dock.Panel>
+        {panels}
+      </Dock.Root>
     </div>
   );
 }

package/src/components/ExternalFileConflictBanner.tsx

@@ -32,7 +32,7 @@ function ConflictReview({
 
   return (
     <div
-      className="fixed inset-0 z-[110] flex items-center justify-center bg-black/70 px-5 backdrop-blur-sm"
+      className="fixed inset-0 z-110 flex items-center justify-center bg-black/70 px-5 backdrop-blur-xs"
       onClick={onClose}
     >
       <div
@@ -41,7 +41,7 @@ function ConflictReview({
         aria-modal="true"
         aria-labelledby="external-conflict-title"
         tabIndex={-1}
-        className="max-h-[88vh] w-full max-w-5xl overflow-auto rounded-xl border border-amber-400/30 bg-neutral-950 p-5 text-neutral-100 shadow-2xl outline-none"
+        className="max-h-[88vh] w-full max-w-5xl overflow-auto rounded-xl border border-amber-400/30 bg-neutral-950 p-5 text-neutral-100 shadow-2xl outline-hidden"
         onClick={(event) => event.stopPropagation()}
       >
         <div className="flex items-start justify-between gap-4">
@@ -53,7 +53,7 @@ function ConflictReview({
               Reviewing or exporting does not change either version.
             </p>
           </div>
-          <button type="button" onClick={onClose} className="rounded px-2 py-1 text-neutral-400">
+          <button type="button" onClick={onClose} className="rounded-sm px-2 py-1 text-neutral-400">
             Close
           </button>
         </div>
@@ -68,14 +68,14 @@ function ConflictReview({
                 <div className="flex gap-2">
                   <button
                     type="button"
-                    className="rounded border border-neutral-700 px-2 py-1 text-[11px]"
+                    className="rounded-sm border border-neutral-700 px-2 py-1 text-[11px]"
                     onClick={() => void navigator.clipboard.writeText(side.content)}
                   >
                     Copy
                   </button>
                   <button
                     type="button"
-                    className="rounded border border-neutral-700 px-2 py-1 text-[11px]"
+                    className="rounded-sm border border-neutral-700 px-2 py-1 text-[11px]"
                     onClick={() =>
                       downloadText(`${conflict.error.filePath}.${side.suffix}.html`, side.content)
                     }
@@ -87,7 +87,7 @@ function ConflictReview({
               <textarea
                 readOnly
                 value={side.content}
-                className="h-80 w-full resize-y rounded border border-neutral-800 bg-neutral-900 p-3 font-mono text-[11px] leading-relaxed text-neutral-300"
+                className="h-80 w-full resize-y rounded-sm border border-neutral-800 bg-neutral-900 p-3 font-mono text-[11px] leading-relaxed text-neutral-300"
               />
             </section>
           ))}
@@ -110,7 +110,7 @@ function FailedDraftReview({
   useDialogBehavior({ open: true, onClose, containerRef });
   return (
     <div
-      className="fixed inset-0 z-[110] flex items-center justify-center bg-black/70 px-5 backdrop-blur-sm"
+      className="fixed inset-0 z-110 flex items-center justify-center bg-black/70 px-5 backdrop-blur-xs"
       onClick={onClose}
     >
       <div
@@ -119,7 +119,7 @@ function FailedDraftReview({
         aria-modal="true"
         aria-labelledby="failed-draft-title"
         tabIndex={-1}
-        className="max-h-[88vh] w-full max-w-3xl overflow-auto rounded-xl border border-amber-400/30 bg-neutral-950 p-5 text-neutral-100 shadow-2xl outline-none"
+        className="max-h-[88vh] w-full max-w-3xl overflow-auto rounded-xl border border-amber-400/30 bg-neutral-950 p-5 text-neutral-100 shadow-2xl outline-hidden"
         onClick={(event) => event.stopPropagation()}
       >
         <div className="flex items-start justify-between gap-4">
@@ -131,21 +131,21 @@ function FailedDraftReview({
               Copy or download this draft before choosing to discard it.
             </p>
           </div>
-          <button type="button" onClick={onClose} className="rounded px-2 py-1 text-neutral-400">
+          <button type="button" onClick={onClose} className="rounded-sm px-2 py-1 text-neutral-400">
             Close
           </button>
         </div>
         <div className="mt-4 flex justify-end gap-2">
           <button
             type="button"
-            className="rounded border border-neutral-700 px-2 py-1 text-[11px]"
+            className="rounded-sm border border-neutral-700 px-2 py-1 text-[11px]"
             onClick={() => void navigator.clipboard.writeText(content)}
           >
             Copy
           </button>
           <button
             type="button"
-            className="rounded border border-neutral-700 px-2 py-1 text-[11px]"
+            className="rounded-sm border border-neutral-700 px-2 py-1 text-[11px]"
             onClick={() => downloadText(`${path}.studio.html`, content)}
           >
             Download
@@ -154,7 +154,7 @@ function FailedDraftReview({
         <textarea
           readOnly
           value={content}
-          className="mt-2 h-80 w-full resize-y rounded border border-neutral-800 bg-neutral-900 p-3 font-mono text-[11px] leading-relaxed text-neutral-300"
+          className="mt-2 h-80 w-full resize-y rounded-sm border border-neutral-800 bg-neutral-900 p-3 font-mono text-[11px] leading-relaxed text-neutral-300"
         />
       </div>
     </div>
@@ -176,7 +176,7 @@ export function ExternalFileConflictBanner({
     <>
       <div
         role="alert"
-        className="absolute left-1/2 top-14 z-[94] flex max-w-[calc(100vw-32px)] -translate-x-1/2 flex-wrap items-center gap-3 rounded-md border border-amber-400/30 bg-amber-950/95 px-4 py-2 text-[12px] font-medium text-amber-50 shadow-lg"
+        className="absolute left-1/2 top-14 z-94 flex max-w-[calc(100vw-32px)] -translate-x-1/2 flex-wrap items-center gap-3 rounded-md border border-amber-400/30 bg-amber-950/95 px-4 py-2 text-[12px] font-medium text-amber-50 shadow-lg"
       >
         <span>
           {conflict
@@ -201,7 +201,7 @@ export function ExternalFileConflictBanner({
         <button
           type="button"
           onClick={() => void coordinator.useExternalFile()}
-          className="rounded border border-amber-200/30 px-2 py-1"
+          className="rounded-sm border border-amber-200/30 px-2 py-1"
         >
           Discard Studio edits and reload file
         </button>
@@ -217,7 +217,7 @@ export function ExternalFileConflictBanner({
                 void coordinator.keepStudioFile();
               }
             }}
-            className="rounded border border-red-300/40 px-2 py-1 text-red-100"
+            className="rounded-sm border border-red-300/40 px-2 py-1 text-red-100"
           >
             Overwrite file with Studio version
           </button>
@@ -234,7 +234,7 @@ export function ExternalFileConflictBanner({
                 void coordinator.keepStudioFile();
               }
             }}
-            className="rounded border border-red-300/40 px-2 py-1 text-red-100"
+            className="rounded-sm border border-red-300/40 px-2 py-1 text-red-100"
           >
             Overwrite file with recovered Studio draft
           </button>

package/src/components/LintModal.tsx

@@ -58,7 +58,7 @@ export function LintModal({
 
   return (
     <div
-      className="hf-backdrop-in fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm"
+      className="hf-backdrop-in fixed inset-0 z-100 flex items-center justify-center bg-black/60 backdrop-blur-xs"
       onClick={requestClose}
     >
       <div
@@ -67,7 +67,7 @@ export function LintModal({
         aria-modal="true"
         aria-label={title}
         tabIndex={-1}
-        className="bg-neutral-950 border border-neutral-800 rounded-xl shadow-2xl w-full max-w-xl max-h-[80vh] flex flex-col overflow-hidden outline-none"
+        className="bg-neutral-950 border border-neutral-800 rounded-xl shadow-2xl w-full max-w-xl max-h-[80vh] flex flex-col overflow-hidden outline-hidden"
         onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}
@@ -130,20 +130,13 @@ export function LintModal({
           {errors.map((f, i) => (
             <div key={`e-${i}`} className="py-3 border-b border-neutral-800/50 last:border-0">
               <div className="flex items-start gap-2">
-                <WarningIcon
-                  size={14}
-                  className="text-red-400 flex-shrink-0 mt-0.5"
-                  weight="fill"
-                />
+                <WarningIcon size={14} className="text-red-400 shrink-0 mt-0.5" weight="fill" />
                 <div className="min-w-0">
                   <p className="text-sm text-neutral-200">{f.message}</p>
                   {f.file && <p className="text-xs text-neutral-600 font-mono mt-0.5">{f.file}</p>}
                   {f.fixHint && (
                     <div className="flex items-start gap-1 mt-1.5">
-                      <CaretRightIcon
-                        size={10}
-                        className="text-studio-accent flex-shrink-0 mt-0.5"
-                      />
+                      <CaretRightIcon size={10} className="text-studio-accent shrink-0 mt-0.5" />
                       <p className="text-xs text-studio-accent">{f.fixHint}</p>
                     </div>
                   )}
@@ -154,16 +147,13 @@ export function LintModal({
           {warnings.map((f, i) => (
             <div key={`w-${i}`} className="py-3 border-b border-neutral-800/50 last:border-0">
               <div className="flex items-start gap-2">
-                <WarningIcon size={14} className="text-amber-400 flex-shrink-0 mt-0.5" />
+                <WarningIcon size={14} className="text-amber-400 shrink-0 mt-0.5" />
                 <div className="min-w-0">
                   <p className="text-sm text-neutral-300">{f.message}</p>
                   {f.file && <p className="text-xs text-neutral-600 font-mono mt-0.5">{f.file}</p>}
                   {f.fixHint && (
                     <div className="flex items-start gap-1 mt-1.5">
-                      <CaretRightIcon
-                        size={10}
-                        className="text-studio-accent flex-shrink-0 mt-0.5"
-                      />
+                      <CaretRightIcon size={10} className="text-studio-accent shrink-0 mt-0.5" />
                       <p className="text-xs text-studio-accent">{f.fixHint}</p>
                     </div>
                   )}

package/src/components/MediaPreview.tsx

@@ -45,7 +45,7 @@ export function MediaPreview({ projectId, filePath }: { projectId: string; fileP
           src={serveUrl}
           alt={name}
           onError={setFailed}
-          className="max-w-full max-h-[70%] object-contain rounded border border-neutral-800"
+          className="max-w-full max-h-[70%] object-contain rounded-sm border border-neutral-800"
         />
         <span className="mt-3 text-[11px] text-neutral-500 font-mono">{filePath}</span>
       </div>
@@ -59,7 +59,7 @@ export function MediaPreview({ projectId, filePath }: { projectId: string; fileP
           src={serveUrl}
           controls
           onError={setFailed}
-          className="max-w-full max-h-[70%] rounded border border-neutral-800"
+          className="max-w-full max-h-[70%] rounded-sm border border-neutral-800"
         />
         <span className="mt-3 text-[11px] text-neutral-500 font-mono">{filePath}</span>
       </div>