feat(nexus): add promote-transition css-first animation overlay
Phase 12 — renders the 700ms compress-and-rise transition from spec §5.6 using CSS keyframes inlined via a scoped <style> tag. Chat ribbon compresses to 30vh with an inset shadow (0–200ms), brainstormer panel slides up from the bottom (200–500ms), SOURCE CONVERSATION label fades in (500–700ms). Honors prefers-reduced-motion. No motion library. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Nexus Dev
parent
70698b9e58
commit
b277527510
2 changed files with 302 additions and 0 deletions
154
ui/src/components/assistant/PromoteTransition.test.tsx
Normal file
154
ui/src/components/assistant/PromoteTransition.test.tsx
Normal file
|
|
@ -0,0 +1,154 @@
|
||||||
|
// @vitest-environment jsdom
|
||||||
|
|
||||||
|
import { act } from "react";
|
||||||
|
import { createRoot } from "react-dom/client";
|
||||||
|
import { afterEach, beforeEach, describe, expect, it } from "vitest";
|
||||||
|
import { PromoteTransition } from "./PromoteTransition";
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
|
||||||
|
|
||||||
|
describe("<PromoteTransition />", () => {
|
||||||
|
let container: HTMLDivElement;
|
||||||
|
let root: ReturnType<typeof createRoot> | null = null;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
container = document.createElement("div");
|
||||||
|
document.body.appendChild(container);
|
||||||
|
root = null;
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
if (root) {
|
||||||
|
act(() => {
|
||||||
|
root!.unmount();
|
||||||
|
});
|
||||||
|
root = null;
|
||||||
|
}
|
||||||
|
if (container.parentNode) container.remove();
|
||||||
|
});
|
||||||
|
|
||||||
|
function render(node: React.ReactNode) {
|
||||||
|
root = createRoot(container);
|
||||||
|
act(() => {
|
||||||
|
root!.render(node);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
it("renders nothing in idle state", () => {
|
||||||
|
render(
|
||||||
|
<PromoteTransition
|
||||||
|
state="idle"
|
||||||
|
panelChildren={<div data-testid="panel">panel</div>}
|
||||||
|
>
|
||||||
|
<div data-testid="ribbon">ribbon</div>
|
||||||
|
</PromoteTransition>,
|
||||||
|
);
|
||||||
|
expect(container.querySelector('[data-testid="promote-transition"]')).toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("renders nothing in done state", () => {
|
||||||
|
render(
|
||||||
|
<PromoteTransition
|
||||||
|
state="done"
|
||||||
|
panelChildren={<div data-testid="panel">panel</div>}
|
||||||
|
>
|
||||||
|
<div data-testid="ribbon">ribbon</div>
|
||||||
|
</PromoteTransition>,
|
||||||
|
);
|
||||||
|
expect(container.querySelector('[data-testid="promote-transition"]')).toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("renders nothing in error state", () => {
|
||||||
|
render(
|
||||||
|
<PromoteTransition
|
||||||
|
state="error"
|
||||||
|
panelChildren={<div data-testid="panel">panel</div>}
|
||||||
|
>
|
||||||
|
<div data-testid="ribbon">ribbon</div>
|
||||||
|
</PromoteTransition>,
|
||||||
|
);
|
||||||
|
expect(container.querySelector('[data-testid="promote-transition"]')).toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("renders the overlay, ribbon, panel and label in prompting state", () => {
|
||||||
|
render(
|
||||||
|
<PromoteTransition
|
||||||
|
state="prompting"
|
||||||
|
panelChildren={<div data-testid="panel">panel</div>}
|
||||||
|
>
|
||||||
|
<div data-testid="ribbon">ribbon</div>
|
||||||
|
</PromoteTransition>,
|
||||||
|
);
|
||||||
|
const overlay = container.querySelector('[data-testid="promote-transition"]') as HTMLElement;
|
||||||
|
expect(overlay).not.toBeNull();
|
||||||
|
expect(overlay.getAttribute("data-state")).toBe("prompting");
|
||||||
|
expect(overlay.getAttribute("aria-live")).toBe("polite");
|
||||||
|
expect(overlay.getAttribute("role")).toBe("region");
|
||||||
|
|
||||||
|
const ribbon = container.querySelector('[data-testid="promote-chat-ribbon"]') as HTMLElement;
|
||||||
|
const panelContainer = container.querySelector('[data-testid="promote-panel-container"]') as HTMLElement;
|
||||||
|
const label = container.querySelector('[data-testid="promote-source-label"]') as HTMLElement;
|
||||||
|
|
||||||
|
expect(ribbon).not.toBeNull();
|
||||||
|
expect(panelContainer).not.toBeNull();
|
||||||
|
expect(label).not.toBeNull();
|
||||||
|
|
||||||
|
// State data attribute is threaded to the animated children so CSS can
|
||||||
|
// select them.
|
||||||
|
expect(ribbon.getAttribute("data-pstate")).toBe("prompting");
|
||||||
|
expect(panelContainer.getAttribute("data-pstate")).toBe("prompting");
|
||||||
|
expect(label.getAttribute("data-pstate")).toBe("prompting");
|
||||||
|
|
||||||
|
// Children render inside the right slots.
|
||||||
|
expect(ribbon.querySelector('[data-testid="ribbon"]')).not.toBeNull();
|
||||||
|
expect(panelContainer.querySelector('[data-testid="panel"]')).not.toBeNull();
|
||||||
|
|
||||||
|
// Source conversation label text.
|
||||||
|
expect(label.textContent?.trim().toLowerCase()).toBe("source conversation");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("updates data-state to creating while the API call is in flight", () => {
|
||||||
|
render(
|
||||||
|
<PromoteTransition
|
||||||
|
state="creating"
|
||||||
|
panelChildren={<div data-testid="panel">panel</div>}
|
||||||
|
>
|
||||||
|
<div data-testid="ribbon">ribbon</div>
|
||||||
|
</PromoteTransition>,
|
||||||
|
);
|
||||||
|
const overlay = container.querySelector('[data-testid="promote-transition"]') as HTMLElement;
|
||||||
|
expect(overlay.getAttribute("data-state")).toBe("creating");
|
||||||
|
const ribbon = container.querySelector('[data-testid="promote-chat-ribbon"]') as HTMLElement;
|
||||||
|
expect(ribbon.getAttribute("data-pstate")).toBe("creating");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("inlines a <style> tag with the keyframe CSS", () => {
|
||||||
|
render(
|
||||||
|
<PromoteTransition
|
||||||
|
state="prompting"
|
||||||
|
panelChildren={<div data-testid="panel">panel</div>}
|
||||||
|
>
|
||||||
|
<div data-testid="ribbon">ribbon</div>
|
||||||
|
</PromoteTransition>,
|
||||||
|
);
|
||||||
|
const style = container.querySelector("style") as HTMLStyleElement;
|
||||||
|
expect(style).not.toBeNull();
|
||||||
|
expect(style.textContent ?? "").toContain("nx-promote-ribbon");
|
||||||
|
expect(style.textContent ?? "").toContain("max-height");
|
||||||
|
expect(style.textContent ?? "").toContain("prefers-reduced-motion");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("has an accessible label on the overlay region", () => {
|
||||||
|
render(
|
||||||
|
<PromoteTransition
|
||||||
|
state="prompting"
|
||||||
|
panelChildren={<div>panel</div>}
|
||||||
|
>
|
||||||
|
<div>ribbon</div>
|
||||||
|
</PromoteTransition>,
|
||||||
|
);
|
||||||
|
const overlay = container.querySelector('[data-testid="promote-transition"]') as HTMLElement;
|
||||||
|
expect(overlay.getAttribute("aria-label")).toBe("Promote to project");
|
||||||
|
});
|
||||||
|
});
|
||||||
148
ui/src/components/assistant/PromoteTransition.tsx
Normal file
148
ui/src/components/assistant/PromoteTransition.tsx
Normal file
|
|
@ -0,0 +1,148 @@
|
||||||
|
// [nexus] Phase 12 — PromoteTransition.
|
||||||
|
//
|
||||||
|
// CSS-first animation container that drives the 700ms compress-and-rise
|
||||||
|
// moment from spec §5.6. When `state` is `prompting` or `creating`:
|
||||||
|
//
|
||||||
|
// 0–200ms : chat ribbon collapses 100% → 30vh (inset shadow fades in)
|
||||||
|
// 200–500ms: brainstormer panel slides up from below into bottom 70%
|
||||||
|
// 500–700ms: SOURCE CONVERSATION label fades in above the ribbon
|
||||||
|
//
|
||||||
|
// On `idle` / `done` the overlay unmounts. `prefers-reduced-motion` is
|
||||||
|
// honored via inline CSS — transitions are set to `none`.
|
||||||
|
//
|
||||||
|
// This component is intentionally CSS-only; no motion library dependency.
|
||||||
|
import { useEffect, useRef } from "react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
export type PromoteTransitionState = "idle" | "prompting" | "creating" | "done" | "error";
|
||||||
|
|
||||||
|
export interface PromoteTransitionProps {
|
||||||
|
/** The hook's promote state kind. */
|
||||||
|
state: PromoteTransitionState;
|
||||||
|
/**
|
||||||
|
* The compressed chat ribbon. Caller passes whatever the source view
|
||||||
|
* should look like — usually the current ChatMessageList in a scrollable
|
||||||
|
* container.
|
||||||
|
*/
|
||||||
|
children: React.ReactNode;
|
||||||
|
/**
|
||||||
|
* The rising brainstormer panel content. Usually <BrainstormerPanel />.
|
||||||
|
*/
|
||||||
|
panelChildren: React.ReactNode;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Inlined styles for the transition so we do NOT need to touch the global
|
||||||
|
// stylesheet. A <style> tag is rendered once per overlay mount and scopes
|
||||||
|
// via a class name.
|
||||||
|
const TRANSITION_STYLE = `
|
||||||
|
.nx-promote-ribbon {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
max-height: 100%;
|
||||||
|
transition: max-height 200ms cubic-bezier(0.22, 1, 0.36, 1),
|
||||||
|
box-shadow 200ms ease-out;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.nx-promote-ribbon[data-pstate="prompting"],
|
||||||
|
.nx-promote-ribbon[data-pstate="creating"] {
|
||||||
|
max-height: 30vh;
|
||||||
|
box-shadow: inset 0 -16px 24px -12px rgba(0, 0, 0, 0.55);
|
||||||
|
}
|
||||||
|
.nx-promote-panel {
|
||||||
|
transform: translateY(100%);
|
||||||
|
opacity: 0;
|
||||||
|
transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
|
||||||
|
opacity 300ms ease-out;
|
||||||
|
transition-delay: 0ms;
|
||||||
|
}
|
||||||
|
.nx-promote-panel[data-pstate="prompting"],
|
||||||
|
.nx-promote-panel[data-pstate="creating"] {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
transition-delay: 200ms;
|
||||||
|
}
|
||||||
|
.nx-promote-label {
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 200ms ease-out;
|
||||||
|
transition-delay: 0ms;
|
||||||
|
}
|
||||||
|
.nx-promote-label[data-pstate="prompting"],
|
||||||
|
.nx-promote-label[data-pstate="creating"] {
|
||||||
|
opacity: 1;
|
||||||
|
transition-delay: 500ms;
|
||||||
|
}
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.nx-promote-ribbon,
|
||||||
|
.nx-promote-panel,
|
||||||
|
.nx-promote-label {
|
||||||
|
transition: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export function PromoteTransition({
|
||||||
|
state,
|
||||||
|
children,
|
||||||
|
panelChildren,
|
||||||
|
className,
|
||||||
|
}: PromoteTransitionProps) {
|
||||||
|
const rootRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
// When the transition first mounts (state flipped to prompting), move
|
||||||
|
// focus to the overlay so screen readers announce the aria-live region.
|
||||||
|
useEffect(() => {
|
||||||
|
if (state === "prompting" || state === "creating") {
|
||||||
|
rootRef.current?.focus();
|
||||||
|
}
|
||||||
|
}, [state]);
|
||||||
|
|
||||||
|
if (state === "idle" || state === "done" || state === "error") {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={rootRef}
|
||||||
|
tabIndex={-1}
|
||||||
|
data-testid="promote-transition"
|
||||||
|
data-state={state}
|
||||||
|
aria-live="polite"
|
||||||
|
role="region"
|
||||||
|
aria-label="Promote to project"
|
||||||
|
className={cn(
|
||||||
|
"absolute inset-0 z-40 flex flex-col bg-background",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<style>{TRANSITION_STYLE}</style>
|
||||||
|
|
||||||
|
{/* SOURCE CONVERSATION label */}
|
||||||
|
<div
|
||||||
|
data-testid="promote-source-label"
|
||||||
|
data-pstate={state}
|
||||||
|
className="nx-promote-label px-6 pt-3 text-[10px] uppercase tracking-[0.14em] text-muted-foreground"
|
||||||
|
>
|
||||||
|
Source Conversation
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Compressed chat ribbon */}
|
||||||
|
<div
|
||||||
|
data-testid="promote-chat-ribbon"
|
||||||
|
data-pstate={state}
|
||||||
|
className="nx-promote-ribbon flex-shrink-0 px-6 py-2"
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Rising brainstormer panel */}
|
||||||
|
<div
|
||||||
|
data-testid="promote-panel-container"
|
||||||
|
data-pstate={state}
|
||||||
|
className="nx-promote-panel relative flex-1 min-h-0"
|
||||||
|
>
|
||||||
|
{panelChildren}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue