{label}
{showValue ? (
@@ -3479,6 +3508,7 @@ export function SliderCell({
step={step}
value={value}
disabled={disabled}
+ style={{ "--slider-pct": `${pct}%` } as CSSProperties}
onChange={(e) => onChange(Number(e.target.value))}
onMouseUp={onCommit}
onTouchEnd={onCommit}
diff --git a/src/components/ai-edition/SliderCell.test.tsx b/src/components/ai-edition/SliderCell.test.tsx
new file mode 100644
index 000000000..77c5dc9f2
--- /dev/null
+++ b/src/components/ai-edition/SliderCell.test.tsx
@@ -0,0 +1,65 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { SliderCell } from "./RightPanes";
+
+describe("SliderCell", () => {
+ it("computes and sets --slider-pct gauge property correctly", () => {
+ render(
+
,
+ );
+ const slider = screen.getByRole("slider", { name: "Volume" });
+ expect(slider.style.getPropertyValue("--slider-pct")).toBe("25%");
+ });
+
+ it("clamps --slider-pct to 0% and 100% at boundaries", () => {
+ const { rerender } = render(
+
,
+ );
+ const slider = screen.getByRole("slider", { name: "Opacity" });
+ expect(slider.style.getPropertyValue("--slider-pct")).toBe("0%");
+
+ rerender(
+
,
+ );
+ expect(slider.style.getPropertyValue("--slider-pct")).toBe("100%");
+ });
+
+ it("applies full layout class when full prop is true", () => {
+ const { container } = render(
+
,
+ );
+ const cell = container.firstElementChild;
+ expect(cell?.className).toContain("full");
+ });
+});
diff --git a/src/components/ai-edition/TranscriptPane.captions.test.tsx b/src/components/ai-edition/TranscriptPane.captions.test.tsx
index 96aae2c17..39c9f4482 100644
--- a/src/components/ai-edition/TranscriptPane.captions.test.tsx
+++ b/src/components/ai-edition/TranscriptPane.captions.test.tsx
@@ -104,4 +104,16 @@ describe("caption settings on the transcript tab", () => {
// mounted whole rather than reimplemented into the popover.
expect(await screen.findByText("Show captions")).toBeInTheDocument();
});
+
+ it("renders a close button and closes the popover when clicked", async () => {
+ const user = userEvent.setup();
+ mount([TRANSCRIPT]);
+ await user.click(screen.getByRole("button", { name: "Captions" }));
+ expect(await screen.findByText("Show captions")).toBeInTheDocument();
+
+ const closeBtn = screen.getByRole("button", { name: "Close" });
+ expect(closeBtn).toBeInTheDocument();
+ await user.click(closeBtn);
+ expect(screen.queryByText("Show captions")).not.toBeInTheDocument();
+ });
});
diff --git a/src/components/ai-edition/v4/FloatingInspector.test.tsx b/src/components/ai-edition/v4/FloatingInspector.test.tsx
new file mode 100644
index 000000000..39f644435
--- /dev/null
+++ b/src/components/ai-edition/v4/FloatingInspector.test.tsx
@@ -0,0 +1,89 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("@/contexts/I18nContext", () => ({
+ useScopedT: (scope: string) => (key: string) => `${scope}.${key}`,
+}));
+
+vi.mock("../RightPanes", () => ({
+ AudioPane: () =>
AudioPane
,
+ AudioTrackPane: ({ onClose }: { onClose?: () => void }) => (
+
+ AudioTrackPane
+ {onClose ? (
+
+ ) : null}
+
+ ),
+ CursorPane: () =>
CursorPane
,
+ LayoutPane: () =>
LayoutPane
,
+ SliderCell: () =>
SliderCell
,
+ Toggle: () =>
Toggle
,
+ TranscriptPane: () =>
TranscriptPane
,
+ VideoEffectsPane: () =>
VideoEffectsPane
,
+}));
+
+vi.mock("../CaptionsPane", () => ({
+ CaptionsPane: () =>
CaptionsPane
,
+}));
+
+import { FloatingInspector } from "./FloatingInspector";
+
+describe("FloatingInspector", () => {
+ const defaultProps: React.ComponentProps
= {
+ facet: "layout" as const,
+ open: true,
+ onFacetChange: vi.fn(),
+ onToggleOpen: vi.fn(),
+ clips: [],
+ onEditClip: vi.fn(),
+ transcriptProps: {} as unknown as React.ComponentProps<
+ typeof FloatingInspector
+ >["transcriptProps"],
+ tl: {
+ selection: null,
+ clearSelection: vi.fn(),
+ selectedAudioTrackId: null,
+ selectAudioTrack: vi.fn(),
+ } as unknown as React.ComponentProps["tl"],
+ };
+
+ it("renders layout facet button on rail with camera icon and settings.layout.title", () => {
+ render();
+ const layoutBtn = screen.getByRole("button", { name: "settings.layout.title" });
+ expect(layoutBtn).toBeInTheDocument();
+ // lucide Camera icon renders an svg with class lucide-camera
+ const svg = layoutBtn.querySelector("svg");
+ expect(svg?.classList.contains("lucide-camera")).toBe(true);
+ });
+
+ it("renders collapse button with editor.inspector.collapseInspector and collapses inspector when clicked", () => {
+ const onToggleOpen = vi.fn();
+ render();
+ const collapseBtn = screen.getByRole("button", { name: "editor.inspector.collapseInspector" });
+ expect(collapseBtn).toBeInTheDocument();
+ const svg = collapseBtn.querySelector("svg");
+ expect(svg?.classList.contains("lucide-chevron-right")).toBe(true);
+
+ fireEvent.click(collapseBtn);
+ expect(onToggleOpen).toHaveBeenCalledTimes(1);
+ });
+
+ it("renders close button on AudioTrackPane when audio track is selected and deselects on click", () => {
+ const clearSelection = vi.fn();
+ const tl = {
+ ...defaultProps.tl,
+ selectedAudioTrackId: "audio-1",
+ clearSelection,
+ };
+ render();
+ expect(screen.getByTestId("audio-track-pane")).toBeInTheDocument();
+ const closeBtn = screen.getByRole("button", { name: "common.actions.close" });
+ fireEvent.click(closeBtn);
+ expect(clearSelection).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/src/components/ai-edition/v4/FloatingInspector.tsx b/src/components/ai-edition/v4/FloatingInspector.tsx
index 254da35f2..36c3da3cc 100644
--- a/src/components/ai-edition/v4/FloatingInspector.tsx
+++ b/src/components/ai-edition/v4/FloatingInspector.tsx
@@ -1,8 +1,8 @@
import {
AudioLines,
+ Camera,
ChevronRight,
FileText,
- Layout as LayoutIcon,
Maximize2,
MousePointer2,
Pencil,
@@ -63,7 +63,7 @@ const FACETS: Array<{ id: Facet; labelKey: string; icon: typeof SlidersHorizonta
// Background is a SECTION of this facet now, not a facet of its own — see
// VideoEffectsPane for why the split had nowhere to sit.
{ id: "effects", labelKey: "effects.title", icon: SlidersHorizontal },
- { id: "layout", labelKey: "layout.title", icon: LayoutIcon },
+ { id: "layout", labelKey: "layout.title", icon: Camera },
{ id: "audio", labelKey: "audio.title", icon: AudioLines },
{ id: "cursor", labelKey: "cursor.title", icon: MousePointer2 },
{ id: "transcript", labelKey: "facets.transcript", icon: FileText },
@@ -117,7 +117,7 @@ export function FloatingInspector({
const selection = tl.selection;
// An imported audio track is selected (issue #350) — like a region selection it
// takes over the inspector body with its own pane (see AudioTrackPane).
- const audioTrackSelected = tl.selectedAudioTrackId !== null;
+ const audioTrackSelected = Boolean(tl.selectedAudioTrackId);
const effectiveOpen = open || selection !== null || audioTrackSelected;
return (
@@ -126,7 +126,7 @@ export function FloatingInspector({
{selection ? (
tl.clearSelection()} />
) : audioTrackSelected ? (
-
+ tl.clearSelection()} />
) : (
)}
@@ -272,19 +272,13 @@ function paneHeader(icon: React.ReactNode, title: string, onClose: () => void, c