@agent-native/core-corpus 0.213.1 → 0.216.0

package/corpus/templates/slides-2/app/components/presentation/SlideTransitionStage.tsx

@@ -0,0 +1,297 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { IconX } from "@tabler/icons-react";
+import { useLayoutEffect, useRef } from "react";
+
+import SlideContentRenderer from "@/components/slides-2-runtime/SlideContentRenderer";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import type { Slide } from "@/context/DeckContext";
+import type { AspectRatio } from "@/lib/aspect-ratios";
+
+import type { DesignSystemData } from "../../../shared/api";
+import type { SlidePosition } from "../../../shared/slide-number";
+import { normalizeSlideTransition } from "../../../shared/slide-transitions";
+import {
+  annotateBuildSteps,
+  buildClickCount,
+  getBuildSteps,
+} from "./slide-build-steps";
+import {
+  prefersReducedMotion,
+  resolveSlideTransitionMotion,
+  type LayerTiming,
+  type ResolvedSlideTransitionMotion,
+} from "./slide-transition-motion";
+
+function layerOptions(timing: LayerTiming): KeyframeEffectOptions {
+  return {
+    delay: timing.delay,
+    duration: timing.duration,
+    easing: timing.easing,
+    fill: "both",
+  };
+}
+
+export interface SlideTransitionStageProps {
+  /** Already annotated for the build step it is leaving at. */
+  outgoing: Slide;
+  /** Already annotated for the build step it enters at. */
+  incoming: Slide;
+  outgoingPosition: SlidePosition;
+  incomingPosition: SlidePosition;
+  motion: ResolvedSlideTransitionMotion;
+  sourceDeckId?: string;
+  aspectRatio?: AspectRatio;
+  designSystem?: DesignSystemData;
+  onFinished?: () => void;
+}
+
+export function PresentationSlideLayer({
+  slide,
+  slidePosition,
+  sourceDeckId,
+  aspectRatio,
+  designSystem,
+}: {
+  slide: Slide;
+  slidePosition: SlidePosition;
+  sourceDeckId?: string;
+  aspectRatio?: AspectRatio;
+  designSystem?: DesignSystemData;
+}) {
+  return (
+    <SlideContentRenderer
+      slide={slide}
+      slidePosition={slidePosition}
+      sourceDeckId={sourceDeckId}
+      aspectRatio={aspectRatio}
+      designSystem={designSystem}
+    />
+  );
+}
+
+/**
+ * Plays one slide transition and reports when both layers finish. Callers key
+ * it by flight, so a new transition mounts a new stage. Unmounting cancels the
+ * animations and suppresses onFinished.
+ */
+export function SlideTransitionStage({
+  outgoing,
+  incoming,
+  outgoingPosition,
+  incomingPosition,
+  motion,
+  sourceDeckId,
+  aspectRatio,
+  designSystem,
+  onFinished,
+}: SlideTransitionStageProps) {
+  const outgoingRef = useRef<HTMLDivElement>(null);
+  const incomingRef = useRef<HTMLDivElement>(null);
+  const onFinishedRef = useRef(onFinished);
+  onFinishedRef.current = onFinished;
+
+  // Layout effect so the first painted frame already shows the start keyframes.
+  // Runs once per mount on purpose: `motion` is re-resolved on every render and
+  // restarting on each would make the transition stutter.
+  useLayoutEffect(() => {
+    const outgoingEl = outgoingRef.current;
+    const incomingEl = incomingRef.current;
+    if (!outgoingEl || !incomingEl) {
+      throw new Error("SlideTransitionStage: layers were not mounted");
+    }
+    const animations = [
+      outgoingEl.animate(
+        motion.outgoing.keyframes,
+        layerOptions(motion.outgoing),
+      ),
+      incomingEl.animate(
+        motion.incoming.keyframes,
+        layerOptions(motion.incoming),
+      ),
+    ];
+    let stopped = false;
+    Promise.all(animations.map((animation) => animation.finished)).then(
+      () => {
+        if (!stopped) onFinishedRef.current?.();
+      },
+      (error: unknown) => {
+        // Only our own cancel rejects this promise while the stage is mounted.
+        if (!stopped) throw error;
+      },
+    );
+    return () => {
+      stopped = true;
+      for (const animation of animations) animation.cancel();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <>
+      <div
+        ref={outgoingRef}
+        className="absolute inset-0 z-10"
+        style={{
+          willChange: "transform, opacity",
+          backfaceVisibility: motion.outgoing.backfaceVisibility,
+        }}
+        // aria-hidden alone leaves the layer's controls in the tab order.
+        inert
+        aria-hidden="true"
+      >
+        <PresentationSlideLayer
+          slide={outgoing}
+          slidePosition={outgoingPosition}
+          sourceDeckId={sourceDeckId}
+          aspectRatio={aspectRatio}
+          designSystem={designSystem}
+        />
+      </div>
+      <div
+        ref={incomingRef}
+        className="absolute inset-0 z-20"
+        style={{
+          willChange: "transform, opacity",
+          backfaceVisibility: motion.incoming.backfaceVisibility,
+        }}
+      >
+        <PresentationSlideLayer
+          slide={incoming}
+          slidePosition={incomingPosition}
+          sourceDeckId={sourceDeckId}
+          aspectRatio={aspectRatio}
+          designSystem={designSystem}
+        />
+      </div>
+    </>
+  );
+}
+
+// Black playback surface, like the presentation it previews.
+const PREVIEW_SURFACE_CLASS =
+  "left-0 top-0 h-[100dvh] w-screen max-h-none max-w-none translate-x-0 translate-y-0 gap-0 overflow-hidden rounded-none border-0 bg-black p-0 text-white shadow-none"; // guard:allow-raw-color - fixed black playback surface
+const PREVIEW_CLOSE_CLASS =
+  "absolute end-4 top-4 z-10 rounded-lg bg-white/10 p-3 text-white hover:bg-white/20 sm:p-2"; // guard:allow-raw-color - fixed black playback surface
+
+/**
+ * The pair a transition preview plays for slides[index], with the visible
+ * numbering playback uses: the visible slide before it, then the slide itself.
+ * Null when that slide is skipped, since playback never shows it, or when no
+ * visible slide precedes it, since it has no incoming transition.
+ */
+export function transitionPreviewPair(slides: readonly Slide[], index: number) {
+  const incoming = slides[index];
+  if (!incoming || incoming.skipped) return null;
+  const visible = slides.filter((slide) => Boolean(slide) && !slide.skipped);
+  const position = visible.indexOf(incoming);
+  if (position <= 0) return null;
+  return {
+    outgoing: visible[position - 1],
+    incoming,
+    position,
+    count: visible.length,
+  };
+}
+
+export interface SlideTransitionPreviewProps {
+  slides: Slide[];
+  /** Plays slides[index]'s incoming transition from the visible slide before it. */
+  index: number;
+  aspectRatio?: AspectRatio;
+  designSystem?: DesignSystemData;
+  onClose: () => void;
+}
+
+/** Renders nothing where transitionPreviewPair has no pair to play. */
+export function SlideTransitionPreview({
+  slides,
+  index,
+  aspectRatio,
+  designSystem,
+  onClose,
+}: SlideTransitionPreviewProps) {
+  const t = useT();
+  const pair = transitionPreviewPair(slides, index);
+  if (!pair) return null;
+
+  const {
+    outgoing: outgoingSource,
+    incoming: incomingSource,
+    position,
+    count,
+  } = pair;
+  const outgoingSteps = getBuildSteps(outgoingSource).steps;
+  const incomingSteps = getBuildSteps(incomingSource).steps;
+  // The outgoing slide has just finished its build, so it shows fully built.
+  const outgoing = annotateBuildSteps(
+    outgoingSource,
+    outgoingSteps,
+    buildClickCount(outgoingSteps),
+  );
+  const incoming = annotateBuildSteps(incomingSource, incomingSteps, 0);
+  const motion = resolveSlideTransitionMotion(
+    normalizeSlideTransition(incomingSource.transition),
+    "forward",
+    {
+      speed: incomingSource.transitionSpeed,
+      reducedMotion: prefersReducedMotion(),
+    },
+  );
+  const incomingPosition = { number: position + 1, count };
+
+  return (
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+    >
+      <DialogContent
+        motion="instant"
+        hideClose
+        className={PREVIEW_SURFACE_CLASS}
+      >
+        <DialogTitle className="sr-only">
+          {t("editorToolbar.transition_panel")}
+        </DialogTitle>
+        <div className="relative h-full w-full">
+          {motion ? (
+            <SlideTransitionStage
+              key={index}
+              outgoing={outgoing}
+              incoming={incoming}
+              outgoingPosition={{ number: position, count }}
+              incomingPosition={incomingPosition}
+              motion={motion}
+              aspectRatio={aspectRatio}
+              designSystem={designSystem}
+            />
+          ) : (
+            <div className="absolute inset-0">
+              <SlideContentRenderer
+                slide={incoming}
+                slidePosition={incomingPosition}
+                aspectRatio={aspectRatio}
+                designSystem={designSystem}
+              />
+            </div>
+          )}
+        </div>
+        <DialogClose asChild>
+          <button
+            type="button"
+            className={PREVIEW_CLOSE_CLASS}
+            aria-label={t("comments.close")}
+          >
+            <IconX className="h-5 w-5" />
+          </button>
+        </DialogClose>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/corpus/templates/slides-2/app/components/presentation/present-channel.ts

@@ -0,0 +1,31 @@
+export type PresentMessage =
+  | {
+      type: "state";
+      index: number;
+      /** Build step on that slide, as the audience shows it at the target. */
+      buildStep: number;
+    }
+  | { type: "command"; command: "next" | "prev" }
+  | { type: "hello" }
+  /**
+   * The audience is going away. The presenter stops treating it as connected
+   * until a state message arrives again.
+   */
+  | { type: "bye" };
+
+export function advancePresentIndex(
+  index: number,
+  command: "next" | "prev",
+  slideCount: number,
+): number {
+  if (slideCount <= 0) return 0;
+  const current = Math.max(0, Math.min(index, slideCount - 1));
+  return command === "next"
+    ? Math.min(slideCount - 1, current + 1)
+    : Math.max(0, current - 1);
+}
+
+export function openPresentChannel(deckId: string): BroadcastChannel | null {
+  if (typeof BroadcastChannel === "undefined") return null;
+  return new BroadcastChannel(`slides-2:present:${deckId}`);
+}

package/corpus/templates/slides-2/app/components/presentation/slide-build-steps.ts

@@ -0,0 +1,231 @@
+import type {
+  AnimationType,
+  Slide,
+  SlideAnimation,
+} from "@/context/DeckContext";
+import {
+  findLegacyAnimationContainer,
+  getElementAnimationValue,
+  getPersistedElementPath,
+  resolveRevealSteps,
+  revealStepClicks,
+  revealStepsOf,
+  resolveSlideAnimationElement,
+  type RevealUnresolvedReason,
+} from "@/lib/slide-animation-elements";
+
+import { prefersReducedMotion } from "./slide-transition-motion";
+
+export interface UnresolvedReveal {
+  animationIndex: number;
+  id: string | null;
+  reason: RevealUnresolvedReason;
+}
+
+/** A resolved reveal. `click` is the 1-based press that plays it. */
+export interface BuildStep extends SlideAnimation {
+  click: number;
+}
+
+export interface BuildSteps {
+  /** Resolved reveals, flattened, in playback order. */
+  steps: BuildStep[];
+  /** Reveals that did not resolve. Their objects stay visible and are never hidden. */
+  unresolved: UnresolvedReveal[];
+}
+
+/**
+ * How many presses build the slide. Steps that play together share a click, so
+ * this is not the step count.
+ */
+export function buildClickCount(
+  steps: ReadonlyArray<{ click: number }> | null | undefined,
+): number {
+  return steps?.[steps.length - 1]?.click ?? 0;
+}
+
+/** Whether the slide has builds to hold back. Plain data, so it is safe on the server. */
+export function hasBuildSteps(slide: Slide): boolean {
+  return (slide.animations?.length ?? 0) > 0 || Boolean(slide.splitByParagraph);
+}
+
+// DOMParser exists only in the browser. Nothing that reaches this may run during
+// a server render; the presentation view defers it until after hydration.
+function storedSlideRoot(content: string): Element | null {
+  return new DOMParser()
+    .parseFromString(content, "text/html")
+    .querySelector(".fmd-slide");
+}
+
+function legacyParagraphSteps(content: string): BuildStep[] {
+  const root = storedSlideRoot(content);
+  if (!root) return [];
+
+  const paragraphs = Array.from(
+    root.querySelectorAll(".fmd-pptx-text p[data-pptx-paragraph]"),
+  ).filter((paragraph) => {
+    const textBox = paragraph.closest(".fmd-pptx-text");
+    return (
+      (textBox?.querySelectorAll("p[data-pptx-paragraph]").length ?? 0) > 1
+    );
+  });
+  if (paragraphs.length > 1) {
+    return paragraphs.flatMap((paragraph, index) => {
+      const elementPath = getPersistedElementPath(root, paragraph);
+      return elementPath
+        ? [
+            {
+              id: `auto-paragraph-${index}`,
+              elementIndex: index,
+              elementPath,
+              click: index + 1,
+              type: "slide-up" as AnimationType,
+            },
+          ]
+        : [];
+    });
+  }
+
+  const container = findLegacyAnimationContainer(root);
+  if (!container) return [];
+  return Array.from(container.children).map((_, i) => ({
+    id: `auto-${i}`,
+    elementIndex: i,
+    click: i + 1,
+    type: "slide-up" as AnimationType,
+  }));
+}
+
+export function getBuildSteps(slide: Slide): BuildSteps {
+  if (slide.animations && slide.animations.length > 0) {
+    const outcomes = resolveRevealSteps(
+      storedSlideRoot(slide.content),
+      slide.animations,
+    );
+    const clicks = revealStepClicks(revealStepsOf(outcomes));
+    const steps: BuildStep[] = [];
+    const unresolved: UnresolvedReveal[] = [];
+    for (const outcome of outcomes) {
+      if (!outcome.ok) {
+        unresolved.push({
+          animationIndex: outcome.animationIndex,
+          id: outcome.id,
+          reason: outcome.reason,
+        });
+        continue;
+      }
+      for (const [n, step] of outcome.steps.entries()) {
+        steps.push({
+          id:
+            outcome.steps.length > 1
+              ? `${step.animation.id}-${n + 1}`
+              : step.animation.id,
+          elementIndex: step.path[step.path.length - 1] ?? 0,
+          elementPath: step.path,
+          click: clicks[steps.length]!,
+          type: step.animation.type,
+        });
+      }
+    }
+    return { steps, unresolved };
+  }
+  if (slide.splitByParagraph) {
+    return { steps: legacyParagraphSteps(slide.content), unresolved: [] };
+  }
+  return { steps: [], unresolved: [] };
+}
+
+/**
+ * The slide HTML with each step element marked `data-pstep` and its state at
+ * `buildStep`. Only this initial state is baked in. Later presses move state on
+ * the mounted DOM with setBuildState, so the HTML string stays the same and
+ * the slide is not re-rendered.
+ */
+export function annotateBuildSteps(
+  slide: Slide,
+  steps: readonly BuildStep[] | null | undefined,
+  buildStep: number,
+): Slide {
+  if (!steps || steps.length === 0) return slide;
+  const doc = new DOMParser().parseFromString(slide.content, "text/html");
+  const root = doc.querySelector(".fmd-slide");
+  if (!root) return slide;
+
+  steps.forEach((step, index) => {
+    const element = resolveSlideAnimationElement(root, step);
+    if (!element) return;
+    element.setAttribute("data-pstep", String(index));
+    element.setAttribute(
+      "data-pstep-state",
+      step.click <= buildStep ? "shown" : "hidden",
+    );
+  });
+  return { ...slide, content: doc.head.innerHTML + doc.body.innerHTML };
+}
+
+/** The `data-pstep` element for each step index, or null where it is missing. */
+export function findBuildStepElements(
+  root: ParentNode,
+  count: number,
+): Array<Element | null> {
+  return Array.from({ length: count }, (_, index) =>
+    root.querySelector(`[data-pstep="${index}"]`),
+  );
+}
+
+// Fade in is opacity only, linear, one second. Google Slides has no object
+// duration control yet, so this is the only length.
+const FADE_REVEAL = "elem-appear 1000ms linear both";
+
+/**
+ * The animation an entering reveal plays. Under reduced motion it plays none:
+ * the step still changes visibility, in the same order, just without motion.
+ * Appear has no animation, so it shows at once.
+ */
+export function revealAnimationValue(
+  type: AnimationType,
+  reducedMotion: boolean,
+): string {
+  if (reducedMotion || type === "appear") return "";
+  if (type === "fade") return FADE_REVEAL;
+  return getElementAnimationValue(type);
+}
+
+/**
+ * Moves mounted step elements to `buildStep`. Only steps entering now (index in
+ * (previousStep, buildStep]) get their reveal. Other steps keep their state, so
+ * a press never replays a reveal that already ran. `previousStep` is null for a
+ * freshly mounted DOM, and then nothing animates. `reducedMotion` defaults to the
+ * user's preference, so a caller that omits it still gets no motion under it.
+ */
+export function setBuildState(
+  elements: ReadonlyArray<Element | null>,
+  steps: ReadonlyArray<BuildStep>,
+  buildStep: number,
+  previousStep: number | null,
+  reducedMotion = prefersReducedMotion(),
+): void {
+  elements.forEach((element, index) => {
+    if (!element) return;
+    const click = steps[index]?.click ?? Number.POSITIVE_INFINITY;
+    const reached = click <= buildStep;
+    const seen = previousStep !== null && click <= previousStep;
+    const state = !reached
+      ? "hidden"
+      : previousStep !== null && !seen
+        ? "entering"
+        : "shown";
+    if (element.getAttribute("data-pstep-state") === state) return;
+    element.setAttribute("data-pstep-state", state);
+    // Setting the reveal starts it once. Clearing it on leave means a later
+    // backward or forward press does not replay a keyframe that already ended.
+    // A step still running when the next press arrives leaves "entering" here,
+    // so clearing its animation snaps it to the shown state at once.
+    if (element instanceof HTMLElement || element instanceof SVGElement) {
+      element.style.animation =
+        state === "entering"
+          ? revealAnimationValue(steps[index]?.type ?? "appear", reducedMotion)
+          : "";
+    }
+  });
+}