@hyperframes/studio 0.8.50 → 0.8.52

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;
@@ -67,6 +65,10 @@ 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;
 }
 
@@ -76,7 +78,6 @@ export interface EditorShellProps extends TimelineEditCallbackDeps {
 export function EditorShell({
   left,
   right,
-  hidden,
   timelineToolbar,
   renderClipContent,
   handleTimelineElementDelete,
@@ -157,7 +158,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 +280,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 +317,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

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>

package/src/components/RightPanelTabs.test.tsx

@@ -0,0 +1,151 @@
+// @vitest-environment happy-dom
+
+/**
+ * The strip's keyboard behaviour, which tab reads as selected, and how the hotkey
+ * filters classify the elements (KTD13). The arrow-key tests are new behaviour, not a port.
+ */
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, expect, it, vi } from "vitest";
+import { RightPanelTabs, type RightPanelTabDescriptor } from "./RightPanelTabs";
+import { isTypingTarget } from "../utils/typingTarget";
+import { shouldIgnorePlaybackShortcutTarget } from "../player/lib/playbackShortcuts";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const IDS = ["design", "layers", "renders", "variables"];
+
+let mounted: { root: Root; host: HTMLElement } | null = null;
+
+afterEach(() => {
+  if (!mounted) return;
+  const { root, host } = mounted;
+  mounted = null;
+  act(() => root.unmount());
+  host.remove();
+});
+
+/** The harness owns the active state too, so a selection moves as it does in the real panel. */
+function mount(
+  initialActive: string[],
+  activateOnFocus = true,
+): {
+  host: HTMLElement;
+  selections: ReturnType<typeof vi.fn>;
+} {
+  const selections = vi.fn();
+
+  function Harness() {
+    const [active, setActive] = React.useState(initialActive);
+    const tabs: RightPanelTabDescriptor[] = IDS.map((id) => ({
+      id,
+      label: id,
+      tooltip: `${id} tooltip`,
+      active: active.includes(id),
+      onSelect: () => {
+        selections(id);
+        setActive([id]);
+      },
+    }));
+    return <RightPanelTabs tabs={tabs} activateOnFocus={activateOnFocus} />;
+  }
+
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  mounted = { root, host };
+  act(() => root.render(<Harness />));
+  return { host, selections };
+}
+
+function tab(host: HTMLElement, id: string): HTMLElement {
+  const el = host.querySelector<HTMLElement>(`[data-tab-id="${id}"]`);
+  if (!el) throw new Error(`no tab for ${id}`);
+  return el;
+}
+
+function selected(host: HTMLElement): string | null {
+  return (
+    host.querySelector('[role="tab"][aria-selected="true"]')?.getAttribute("data-tab-id") ?? null
+  );
+}
+
+/** Base UI moves the roving tabindex synchronously and the focus one task later. */
+async function arrow(key: string): Promise<void> {
+  const target = document.activeElement ?? document.body;
+  act(() => {
+    target.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true, composed: true }));
+  });
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  });
+}
+
+it("moves from Design to Layers with ArrowRight and asks the panel to switch", async () => {
+  const { host, selections } = mount(["design"]);
+  act(() => tab(host, "design").focus());
+
+  await arrow("ArrowRight");
+
+  expect(document.activeElement).toBe(tab(host, "layers"));
+  expect(selections).toHaveBeenCalledWith("layers");
+});
+
+it("only moves focus on an arrow key when selection would toggle a pane", async () => {
+  const { host, selections } = mount(["design"], false);
+  act(() => tab(host, "design").focus());
+
+  await arrow("ArrowRight");
+
+  expect(document.activeElement).toBe(tab(host, "layers"));
+  expect(selections).not.toHaveBeenCalled();
+});
+
+it("jumps to the first and last tab with Home and End", async () => {
+  const { host, selections } = mount(["design"]);
+  act(() => tab(host, "design").focus());
+
+  await arrow("End");
+  expect(document.activeElement).toBe(tab(host, "variables"));
+  expect(selections).toHaveBeenLastCalledWith("variables");
+
+  await arrow("Home");
+  expect(document.activeElement).toBe(tab(host, "design"));
+  expect(selections).toHaveBeenLastCalledWith("design");
+});
+
+it("selects the tab whose content is on screen", () => {
+  const { host } = mount(["renders"]);
+
+  expect(selected(host)).toBe("renders");
+});
+
+it("leaves every tab unselected when the panel shows something the strip has no tab for", () => {
+  // Block params take over the panel body without a tab of their own. The old
+  // buttons all read unpressed in that state; nothing should read selected now.
+  const { host } = mount([]);
+
+  expect(selected(host)).toBe(null);
+});
+
+it("keeps a second open pane looking open in the legacy split inspector", () => {
+  // Design and Layers render together there. Only one tab can carry
+  // aria-selected, so the other has to keep the selected look or the strip
+  // would claim a pane is closed while it is on screen.
+  const { host } = mount(["design", "layers"]);
+
+  expect(selected(host)).toBe("design");
+  expect(tab(host, "layers").className).toContain("bg-hover");
+});
+
+it("classifies its tabs for the hotkey filters exactly as the old buttons did (KTD13)", () => {
+  // The old strip rendered plain <button>s: not a typing target, and claimed by
+  // the playback filter through its `button` selector. Base UI's tab is a
+  // <button> too, so both verdicts have to be unchanged.
+  const { host } = mount(["design"]);
+  const el = tab(host, "design");
+
+  expect(el.tagName).toBe("BUTTON");
+  expect(isTypingTarget(el)).toBe(false);
+  expect(shouldIgnorePlaybackShortcutTarget(el)).toBe(true);
+});

package/src/components/RightPanelTabs.tsx

@@ -0,0 +1,59 @@
+/**
+ * The inspector tab strip on the shared Tabs primitive. The selected tab is derived from the
+ * panel's state; in the legacy split inspector two can be open, only one holds `aria-selected`.
+ */
+
+import { Tab, Tabs, TabsList, Tooltip, cn } from "./ui";
+
+export interface RightPanelTabDescriptor {
+  /** Stable id, also the `data-tab-id` attribute the strip is queried by. */
+  id: string;
+  label: string;
+  tooltip: string;
+  /** Whether this tab's content is on screen right now. */
+  active: boolean;
+  /** Run when the strip moves to this tab, by click or by arrow key. */
+  onSelect: () => void;
+}
+
+/** The look `aria-selected` gives the selected tab, for a second open pane. */
+const SELECTED_LOOK = "bg-hover text-text-0";
+
+export function RightPanelTabs({
+  tabs,
+  activateOnFocus = true,
+}: {
+  tabs: readonly RightPanelTabDescriptor[];
+  /** False when `onSelect` toggles a pane, so an arrow key only moves focus. */
+  activateOnFocus?: boolean;
+}) {
+  // `null` when the layout holds a tab this strip does not show (block params),
+  // which leaves every tab unselected, exactly as the old buttons did.
+  const value = tabs.find((tab) => tab.active)?.id ?? null;
+
+  return (
+    <Tabs
+      value={value}
+      onValueChange={(next) => {
+        tabs.find((tab) => tab.id === next)?.onSelect();
+      }}
+    >
+      <TabsList
+        aria-label="Inspector panels"
+        activateOnFocus={activateOnFocus}
+        className="flex min-w-0 items-center gap-1 overflow-hidden rounded-none border-b border-border-strong bg-transparent px-3 py-2"
+      >
+        {tabs.map((tab) => (
+          <Tooltip key={tab.id} label={tab.tooltip} side="bottom">
+            <Tab
+              value={tab.id}
+              className={cn("h-ctl-lg rounded-lg px-3 font-medium", tab.active && SELECTED_LOOK)}
+            >
+              {tab.label}
+            </Tab>
+          </Tooltip>
+        ))}
+      </TabsList>
+    </Tabs>
+  );
+}

package/src/components/SaveQueuePausedBanner.tsx

@@ -8,14 +8,14 @@ interface SaveQueuePausedBannerProps {
 export function SaveQueuePausedBanner({ message, onRetry }: SaveQueuePausedBannerProps) {
   return (
     <div
-      className="hf-backdrop-in absolute left-1/2 top-14 z-[92] flex max-w-[calc(100vw-32px)] -translate-x-1/2 items-center gap-3 rounded-md border border-red-500/30 bg-red-950/85 px-4 py-2 text-[12px] font-medium text-red-100 shadow-lg shadow-black/30"
+      className="hf-backdrop-in absolute left-1/2 top-14 z-92 flex max-w-[calc(100vw-32px)] -translate-x-1/2 items-center gap-3 rounded-md border border-red-500/30 bg-red-950/85 px-4 py-2 text-[12px] font-medium text-red-100 shadow-lg shadow-black/30"
       role="alert"
     >
       <span>{message}</span>
       <button
         type="button"
         onClick={onRetry}
-        className="rounded border border-red-300/20 px-2 py-1 text-[11px] text-red-100 transition-colors hover:bg-red-400/10 active:scale-[0.98]"
+        className="rounded-sm border border-red-300/20 px-2 py-1 text-[11px] text-red-100 transition-colors hover:bg-red-400/10 active:scale-[0.98]"
       >
         Retry saving
       </button>