@hyperframes/studio 0.8.104 → 0.8.106

package/src/components/sidebar/CompositionsTab.rootBadge.test.tsx

@@ -1,57 +1,11 @@
 // @vitest-environment happy-dom
 
-import { act } from "react";
-import { createRoot, type Root } from "react-dom/client";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { usePlayerStore } from "../../player/store/playerStore";
+import { describe, expect, it } from "vitest";
 import { resolveMasterCompositionPath } from "../../utils/studioUrlState";
-import { CompositionsTab } from "./CompositionsTab";
+import { mountCompositionsTab } from "./compositionsTabTestUtils";
 
-Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
-(
-  window as unknown as { happyDOM: { settings: { disableIframePageLoading: boolean } } }
-).happyDOM.settings.disableIframePageLoading = true;
-
-let root: Root | null = null;
-
-afterEach(() => {
-  if (root) act(() => root?.unmount());
-  root = null;
-  document.body.innerHTML = "";
-  usePlayerStore.setState({ thumbnailRevisions: {} });
-});
-
-function mount(compositions: string[], masterCompositionPath: string | null) {
-  const host = document.createElement("div");
-  document.body.append(host);
-  root = createRoot(host);
-  act(() => {
-    root?.render(
-      <CompositionsTab
-        projectId="demo"
-        compositions={compositions}
-        activeComposition={null}
-        masterCompositionPath={masterCompositionPath}
-        onSelect={vi.fn()}
-      />,
-    );
-  });
-  return host;
-}
-
-describe("CompositionsTab card thumbnails", () => {
-  it("waits for the live preview to boot and keeps them through edit reloads", () => {
-    usePlayerStore.getState().reset();
-    const host = mount(["index.html"], "index.html");
-    expect(host.querySelector("img")).toBeNull();
-
-    act(() => usePlayerStore.getState().markPreviewBooted());
-    expect(host.querySelector("img")?.getAttribute("src")).toContain("/thumbnail/index.html");
-
-    act(() => usePlayerStore.getState().setTimelineReady(false));
-    expect(host.querySelector("img")).not.toBeNull();
-  });
-});
+const mount = (compositions: string[], masterCompositionPath: string | null) =>
+  mountCompositionsTab({ compositions, masterCompositionPath });
 
 describe("CompositionsTab root badge", () => {
   it("marks the composition matching masterCompositionPath as root", () => {

package/src/components/sidebar/CompositionsTab.thumbnails.test.tsx

@@ -0,0 +1,256 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { thumbnailScheduler } from "../../player/lib/thumbnailScheduler";
+import { TIMELINE_VIEWPORT_BUDGETS } from "../../player/lib/timelineViewportBudgets";
+import { CompositionThumbnail } from "../../player/components/CompositionThumbnail";
+import { usePlayerStore } from "../../player/store/playerStore";
+import { renderPosterForNextOpen } from "../nle/PreviewPoster";
+import { mountCompositionsTab } from "./compositionsTabTestUtils";
+
+class DecodingImage {
+  onload: (() => void) | null = null;
+  onerror: (() => void) | null = null;
+  naturalWidth = 16;
+  naturalHeight = 9;
+  set src(value: string) {
+    if (value) queueMicrotask(() => this.onload?.());
+  }
+}
+
+let autoIntersect = true;
+const observed: Array<{
+  element: Element;
+  callback: IntersectionObserverCallback;
+  root?: Element | Document | null;
+}> = [];
+class ViewportObserver {
+  constructor(
+    private readonly callback: IntersectionObserverCallback,
+    private readonly options?: IntersectionObserverInit,
+  ) {}
+  observe(element: Element) {
+    observed.push({ element, callback: this.callback, root: this.options?.root });
+    if (autoIntersect) this.enter();
+  }
+  enter() {
+    const entry = { isIntersecting: true } as IntersectionObserverEntry;
+    this.callback([entry], this as unknown as IntersectionObserver);
+  }
+  disconnect() {}
+}
+
+interface Render {
+  url: URL;
+  signal: AbortSignal;
+  answer: (status?: number) => void;
+}
+
+const real = {
+  IntersectionObserver: globalThis.IntersectionObserver,
+  fetch: globalThis.fetch,
+  Image: globalThis.Image,
+  create: URL.createObjectURL,
+  revoke: URL.revokeObjectURL,
+};
+let renders: Render[] = [];
+let inFlight = 0;
+let peak = 0;
+let frames = 0;
+
+beforeEach(() => {
+  renders = [];
+  [inFlight, peak, frames] = [0, 0, 0];
+  globalThis.fetch = vi.fn(
+    (input: RequestInfo | URL, init?: RequestInit) =>
+      new Promise<Response>((resolve, reject) => {
+        const signal = init?.signal ?? new AbortController().signal;
+        peak = Math.max(peak, ++inFlight);
+        const end = () => (inFlight -= 1);
+        signal.addEventListener("abort", () => {
+          end();
+          reject(new DOMException("Aborted", "AbortError"));
+        });
+        const answer = (status = 200) => {
+          end();
+          resolve(new Response(new Blob(["png"]), { status }));
+        };
+        renders.push({ url: new URL(String(input), window.location.origin), signal, answer });
+      }),
+  ) as typeof fetch;
+  globalThis.Image = DecodingImage as unknown as typeof Image;
+  globalThis.IntersectionObserver = ViewportObserver as unknown as typeof IntersectionObserver;
+  [autoIntersect, observed.length] = [true, 0];
+  URL.createObjectURL = vi.fn(() => `blob:frame-${++frames}`);
+  URL.revokeObjectURL = vi.fn();
+  usePlayerStore.setState({ previewBooted: true });
+});
+
+afterEach(() => {
+  Object.assign(globalThis, {
+    fetch: real.fetch,
+    Image: real.Image,
+    IntersectionObserver: real.IntersectionObserver,
+  });
+  Object.assign(URL, { createObjectURL: real.create, revokeObjectURL: real.revoke });
+});
+
+const mount = (compositions?: string[]) => mountCompositionsTab(compositions && { compositions });
+const settle = () => act(() => new Promise((resolve) => setTimeout(resolve, 5)));
+const shown = (host: HTMLElement) => host.querySelector("img")?.getAttribute("src") ?? null;
+
+async function nextRevisionShows(host: HTMLElement, revision: string, frame: string) {
+  act(() => usePlayerStore.getState().bumpThumbnailRevisions(null));
+  expect(renders.at(-1)!.url.searchParams.get("revision")).toBe(revision);
+  renders.at(-1)!.answer();
+  await settle();
+  expect(shown(host)).toBe(frame);
+}
+
+describe("composition card thumbnails", () => {
+  it("render through the thumbnail scheduler once the preview boots, and never point an image at the route", async () => {
+    usePlayerStore.getState().reset();
+    const host = mount();
+    expect(renders).toHaveLength(0);
+
+    act(() => usePlayerStore.getState().markPreviewBooted());
+    expect(renders.map((r) => [r.url.pathname, r.url.searchParams.get("t")])).toEqual([
+      ["/api/projects/demo/thumbnail/compositions/headline.html", "3.00"],
+    ]);
+    renders[0]!.answer();
+    await settle();
+    expect(shown(host)).toBe("blob:frame-1");
+    expect(host.querySelector("iframe")).toBeNull();
+
+    act(() => usePlayerStore.getState().setTimelineReady(false));
+    expect(shown(host)).toBe("blob:frame-1");
+  });
+
+  it("wait until a card is near the viewport, so an offscreen card never renders ahead of a visible one", () => {
+    autoIntersect = false;
+    mount(["compositions/above.html", "compositions/seen.html", "compositions/below.html"]);
+    expect(renders).toHaveLength(0);
+
+    const seen = observed.find((o) =>
+      o.element.closest("[draggable]")?.textContent?.includes("seen"),
+    )!;
+    act(() =>
+      seen.callback(
+        [{ isIntersecting: true } as IntersectionObserverEntry],
+        {} as IntersectionObserver,
+      ),
+    );
+    expect(renders.map((r) => r.url.pathname)).toEqual([
+      "/api/projects/demo/thumbnail/compositions/seen.html",
+    ]);
+    expect(seen.root).toBe(document.querySelector("[data-composition-list]"));
+  });
+
+  it("keep showing the last frame, leased, until the next revision's frame is ready", async () => {
+    const host = mount();
+    renders[0]!.answer();
+    await settle();
+    act(() => usePlayerStore.getState().bumpThumbnailRevisions(null));
+    expect(shown(host)).toBe("blob:frame-1");
+    thumbnailScheduler.invalidateProject("demo");
+    expect(URL.revokeObjectURL).not.toHaveBeenCalledWith("blob:frame-1");
+
+    renders.at(-1)!.answer();
+    await settle();
+    expect(shown(host)).toBe("blob:frame-2");
+  });
+
+  it("keep the last frame through a new revision even when the scheduler has evicted it", async () => {
+    const host = mount();
+    renders[0]!.answer();
+    await settle();
+    const fillers = Array.from({ length: 100 }, (_, i) =>
+      thumbnailScheduler.acquire(
+        {
+          key: `filler-${i}`,
+          projectId: "demo",
+          sessionEpoch: 0,
+          kind: "image",
+          priority: "visible",
+          load: async () => ({
+            value: { kind: "image", url: `blob:filler-${i}`, aspect: 1 },
+            weight: 1,
+          }),
+        },
+        () => {},
+      ),
+    );
+    while (
+      thumbnailScheduler.getDiagnostics().queued + thumbnailScheduler.getDiagnostics().active >
+      0
+    ) {
+      await settle();
+    }
+    for (const filler of fillers) filler.release();
+
+    act(() => usePlayerStore.getState().bumpThumbnailRevisions(null));
+    expect(renders.map((r) => r.url.searchParams.get("revision"))).toEqual(["0", "1"]);
+    expect(shown(host)).toBe("blob:frame-1");
+    expect(URL.revokeObjectURL).not.toHaveBeenCalledWith("blob:frame-1");
+  });
+
+  it("share one render with the timeline's thumbnail of the same composition", () => {
+    mount();
+    const timeline = createRoot(document.body.appendChild(document.createElement("div")));
+    try {
+      act(() =>
+        timeline.render(
+          <CompositionThumbnail
+            previewUrl="/api/projects/demo/preview/comp/compositions/headline.html"
+            label=""
+            labelColor=""
+            projectId="demo"
+            sessionEpoch={usePlayerStore.getState().timelineSessionEpoch}
+            seekTime={3}
+            duration={0}
+          />,
+        ),
+      );
+      expect(renders).toHaveLength(1);
+    } finally {
+      act(() => timeline.unmount());
+    }
+  });
+
+  it("keep the cards and the poster render to the scheduler's cap, so Studio's own requests get a connection", async () => {
+    const cap = TIMELINE_VIEWPORT_BUDGETS.concurrentCompositionFetches;
+    mount(Array.from({ length: 6 }, (_, i) => `compositions/scene-${i}.html`));
+    renderPosterForNextOpen("demo");
+    expect(inFlight).toBe(cap);
+
+    while (renders.some((r) => !r.signal.aborted)) {
+      renders.shift()!.answer();
+      await settle();
+    }
+    expect(renders).toHaveLength(0);
+    expect(globalThis.fetch).toHaveBeenCalledTimes(7);
+    expect(peak).toBe(cap);
+  });
+
+  it("abort a stale revision's render, and free its frame when the scheduler evicts it", async () => {
+    const host = mount();
+    const first = renders[0]!;
+    await nextRevisionShows(host, "1", "blob:frame-1");
+    expect(first.signal.aborted).toBe(true);
+    await nextRevisionShows(host, "2", "blob:frame-2");
+
+    thumbnailScheduler.invalidateProject("demo");
+    expect(URL.revokeObjectURL).toHaveBeenCalledWith("blob:frame-1");
+    expect(URL.revokeObjectURL).not.toHaveBeenCalledWith("blob:frame-2");
+  });
+
+  it("show a fallback when the render fails, and retry it at the next content revision", async () => {
+    const host = mount();
+    renders[0]!.answer(500);
+    await settle();
+    expect(host.textContent).toContain("Preview unavailable");
+    await nextRevisionShows(host, "1", "blob:frame-1");
+  });
+});

package/src/components/sidebar/CompositionsTab.tsx

@@ -1,7 +1,14 @@
 import { buildProjectApiPath } from "../../utils/projectRouting";
-import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useThumbnailLease } from "../../hooks/useThumbnailLease";
+import {
+  thumbnailScheduler,
+  type ThumbnailRequest,
+  type ThumbnailSnapshot,
+} from "../../player/lib/thumbnailScheduler";
 import {
   buildCompositionThumbnailUrl,
+  compositionThumbnailRequest,
   resolveThumbnailSeekTime,
   THUMBNAIL_SEEK_TIME_SECONDS,
 } from "../../player/components/CompositionThumbnail";
@@ -125,6 +132,38 @@ export function syncIframePlayback(iframe: HTMLIFrameElement | null, shouldPlay:
   }
 }
 
+const imageUrlOf = (snapshot: ThumbnailSnapshot) =>
+  snapshot.status === "ready" && snapshot.value.kind === "image" ? snapshot.value.url : null;
+
+// A layout effect takes the old frame's lease before the passive cleanup drops the first one.
+function useLastFrame(request: ThumbnailRequest | null, snapshot: ThumbnailSnapshot) {
+  const current = imageUrlOf(snapshot);
+  const [kept, setKept] = useState<{ request: ThumbnailRequest; url: string } | null>(null);
+  if (request && current && kept?.request !== request) setKept({ request, url: current });
+  useLayoutEffect(() => {
+    if (!kept || kept.request === request) return;
+    const lease = thumbnailScheduler.acquire(kept.request, () => {});
+    return () => lease.release();
+  }, [kept, request]);
+  return current ?? kept?.url ?? null;
+}
+
+function useNearViewport<T extends Element>(): [(element: T | null) => void, boolean] {
+  const [element, setElement] = useState<T | null>(null);
+  const [near, setNear] = useState(false);
+  useEffect(() => {
+    if (!element || near) return;
+    if (typeof IntersectionObserver === "undefined") return setNear(true);
+    const observer = new IntersectionObserver(
+      (entries) => entries.some((entry) => entry.isIntersecting) && setNear(true),
+      { root: element.closest("[data-composition-list]"), rootMargin: "200px" },
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [element, near]);
+  return [setElement, near];
+}
+
 function CompCard({
   projectId,
   comp,
@@ -153,7 +192,6 @@ function CompCard({
   const [hovered, setHovered] = useState(false);
   const [stageSize, setStageSize] = useState(DEFAULT_PREVIEW_STAGE);
   const [livePreviewLoaded, setLivePreviewLoaded] = useState(false);
-  const [failedThumbnailUrl, setFailedThumbnailUrl] = useState<string | null>(null);
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
   const hoverTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const syncTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -192,7 +230,21 @@ function CompCard({
   const name = comp.replace(/^compositions\//, "").replace(/\.html$/, "");
   const previewUrl = compositionPreviewUrl(projectId, comp);
   const thumbnailUrl = compositionCardThumbnailUrl(projectId, comp, contentRevision);
-  const thumbnailFailed = failedThumbnailUrl === thumbnailUrl;
+  const [thumbnailBox, nearViewport] = useNearViewport<HTMLDivElement>();
+  const timelineSessionEpoch = usePlayerStore((state) => state.timelineSessionEpoch);
+  const thumbnailRequest = useMemo(
+    () =>
+      previewBooted && nearViewport
+        ? compositionThumbnailRequest(thumbnailUrl, projectId, {
+            sessionEpoch: timelineSessionEpoch,
+            rich: true,
+          })
+        : null,
+    [previewBooted, nearViewport, thumbnailUrl, projectId, timelineSessionEpoch],
+  );
+  const thumbnail = useThumbnailLease(thumbnailRequest);
+  const frameUrl = useLastFrame(thumbnailRequest, thumbnail);
+  const thumbnailFailed = thumbnail.status === "error";
   const previewScale = resolveCompositionPreviewScale({
     cardWidth: CARD_W,
     cardHeight: CARD_H,
@@ -250,19 +302,20 @@ function CompCard({
           : "border-l-2 border-transparent hover:bg-neutral-800/50"
       }`}
     >
-      <div className="w-20 h-[45px] rounded-sm overflow-hidden bg-neutral-900 shrink-0 relative">
+      <div
+        ref={thumbnailBox}
+        className="w-20 h-[45px] rounded-sm overflow-hidden bg-neutral-900 shrink-0 relative"
+      >
         {thumbnailFailed ? (
           <div className="absolute inset-0 flex items-center justify-center px-1 text-center text-[8px] leading-tight text-neutral-600">
             Preview unavailable
           </div>
-        ) : !previewBooted ? null : (
+        ) : !frameUrl ? null : (
           <img
-            src={thumbnailUrl}
+            src={frameUrl}
             alt=""
             draggable={false}
-            loading="lazy"
             decoding="async"
-            onError={() => setFailedThumbnailUrl(thumbnailUrl)}
             className={`absolute inset-0 h-full w-full object-contain transition-opacity ${
               livePreviewLoaded ? "opacity-0" : "opacity-100"
             }`}
@@ -320,7 +373,7 @@ function CompCard({
           {lintInfo && lintInfo.count > 0 && (
             <span
               aria-label={`${lintInfo.count} lint finding${lintInfo.count === 1 ? "" : "s"}`}
-              className="shrink-0 min-w-[16px] text-center rounded-full bg-amber-500/20 px-1 text-[8px] font-bold text-amber-400"
+              className="shrink-0 min-w-[16px] text-center rounded-full bg-amber-500/20 px-1 text-[8px] font-bold text-warning-ink"
             >
               {lintInfo.count}
             </span>
@@ -337,7 +390,7 @@ function CompCard({
             event.stopPropagation();
             onAddToTimeline();
           }}
-          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-sm text-neutral-600 opacity-0 transition-[color,background-color,opacity] hover:bg-neutral-800 hover:text-studio-accent group-hover/card:opacity-100 group-focus-within/card:opacity-100 focus:opacity-100"
+          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-sm text-neutral-600 opacity-0 transition-[color,background-color,opacity] hover:bg-neutral-800 hover:text-accent-ink group-hover/card:opacity-100 group-focus-within/card:opacity-100 focus:opacity-100"
         >
           <span aria-hidden="true">+</span>
         </button>
@@ -358,7 +411,7 @@ function CompCard({
             className={`flex h-6 w-6 shrink-0 items-center justify-center rounded transition-colors ${
               isRendering
                 ? "text-neutral-600 cursor-not-allowed"
-                : "text-neutral-600 hover:text-studio-accent hover:bg-neutral-800"
+                : "text-neutral-600 hover:text-accent-ink hover:bg-neutral-800"
             }`}
           >
             <svg
@@ -405,7 +458,7 @@ export const CompositionsTab = memo(function CompositionsTab({
   }
 
   return (
-    <div className="flex-1 overflow-y-auto">
+    <div className="flex-1 overflow-y-auto" data-composition-list>
       {compositions.map((comp) => (
         <CompCard
           key={`${projectId}:${comp}`}

package/src/components/sidebar/PromptPreviewModal.tsx

@@ -106,10 +106,10 @@ export function PromptPreviewModal({
           <button
             className={`px-4 py-1.5 rounded-lg text-xs font-medium transition-colors active:scale-[0.97] ${
               copyState === "copied"
-                ? "bg-emerald-500 text-white"
+                ? "bg-accent text-on-accent"
                 : copyState === "failed"
-                  ? "bg-red-500 text-white"
-                  : "bg-studio-accent/90 text-neutral-950 hover:bg-studio-accent"
+                  ? "bg-danger text-on-danger"
+                  : "bg-accent text-on-accent hover:bg-accent-hover"
             }`}
             onClick={handleCopy}
           >

package/src/components/sidebar/SidebarLintButton.tsx

@@ -17,7 +17,7 @@ export function SidebarLintButton({
         type="button"
         onClick={onLint}
         disabled={linting}
-        className="w-full flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-md text-[11px] font-medium text-neutral-500 enabled:hover:text-amber-300 enabled:hover:bg-neutral-800 enabled:active:scale-[0.98] transition-colors disabled:opacity-40"
+        className="w-full flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-md text-[11px] font-medium text-neutral-500 enabled:hover:text-warning-ink enabled:hover:bg-neutral-800 enabled:active:scale-[0.98] transition-colors disabled:opacity-40"
       >
         <svg
           width="12"
@@ -38,8 +38,8 @@ export function SidebarLintButton({
             style={hasError ? { animationIterationCount: ERROR_PULSES_BEFORE_IDLE } : undefined}
             className={
               hasError
-                ? "ml-1 min-w-[16px] rounded-full bg-panel-danger/25 px-1 text-[9px] font-bold text-panel-danger animate-pulse motion-reduce:animate-none"
-                : "ml-1 min-w-[16px] rounded-full bg-amber-500/20 px-1 text-[9px] font-bold text-amber-400"
+                ? "ml-1 min-w-[16px] rounded-full bg-danger px-1 text-[9px] font-bold text-on-danger animate-pulse motion-reduce:animate-none"
+                : "ml-1 min-w-[16px] rounded-full bg-amber-500/20 px-1 text-[9px] font-bold text-warning-ink"
             }
           >
             {findingCount}

package/src/components/sidebar/compositionsTabTestUtils.tsx

@@ -0,0 +1,39 @@
+import { act, type ComponentProps } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, vi } from "vitest";
+import { thumbnailScheduler } from "../../player/lib/thumbnailScheduler";
+import { usePlayerStore } from "../../player/store/playerStore";
+import { CompositionsTab } from "./CompositionsTab";
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+(
+  window as unknown as { happyDOM: { settings: { disableIframePageLoading: boolean } } }
+).happyDOM.settings.disableIframePageLoading = true;
+
+let root: Root | null = null;
+
+afterEach(() => {
+  if (root) act(() => root?.unmount());
+  root = null;
+  thumbnailScheduler.invalidateProject("demo");
+  document.body.innerHTML = "";
+  usePlayerStore.setState({ thumbnailRevisions: {} });
+});
+
+export function mountCompositionsTab(props: Partial<ComponentProps<typeof CompositionsTab>> = {}) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+  act(() => {
+    root?.render(
+      <CompositionsTab
+        projectId="demo"
+        compositions={["compositions/headline.html"]}
+        activeComposition={null}
+        onSelect={vi.fn()}
+        {...props}
+      />,
+    );
+  });
+  return host;
+}

package/src/components/timelineToolbarStyles.ts

@@ -1,5 +1,5 @@
 // CapCut-flat icon buttons: a transparent 28px hit area with a subtle hover wash.
 export const flatBtn = "flex h-7 w-7 items-center justify-center rounded-md transition-colors";
-export const flatIdle = `${flatBtn} text-neutral-400 hover:bg-white/6 hover:text-neutral-200 active:scale-[0.98]`;
-export const flatActive = `${flatBtn} bg-white/8 text-neutral-100 active:scale-[0.98]`;
-export const flatDisabled = `${flatBtn} text-neutral-700 cursor-not-allowed`;
+export const flatIdle = `${flatBtn} text-text-2 hover:bg-hover hover:text-text-0 active:bg-press active:scale-[0.98]`;
+export const flatActive = `${flatBtn} bg-on text-text-0 hover:bg-on-hover active:scale-[0.98]`;
+export const flatDisabled = `${flatBtn} text-text-off cursor-not-allowed`;

package/src/components/ui/Button.tsx

@@ -50,8 +50,8 @@ export const buttonBase = cn(
  */
 export const buttonVariants: Record<ButtonVariant, string> = {
   primary: cn(
-    "bg-accent text-bg-0 font-semibold",
-    "enabled:hover:brightness-110 data-[preview-state=hover]:brightness-110",
+    "bg-accent text-on-accent font-semibold",
+    "enabled:hover:bg-accent-hover data-[preview-state=hover]:bg-accent-hover",
     "enabled:active:scale-[0.98] data-[preview-state=active]:scale-[0.98]",
   ),
   secondary: cn(
@@ -60,8 +60,8 @@ export const buttonVariants: Record<ButtonVariant, string> = {
     "enabled:active:scale-[0.98] data-[preview-state=active]:scale-[0.98]",
   ),
   danger: cn(
-    "bg-danger text-text-0 font-medium",
-    "enabled:hover:brightness-110 data-[preview-state=hover]:brightness-110",
+    "bg-danger text-on-danger font-medium",
+    "enabled:hover:brightness-95 data-[preview-state=hover]:brightness-95",
     "enabled:active:scale-[0.98] data-[preview-state=active]:scale-[0.98]",
   ),
   ghost: cn(