"use client";

import { ViewTransition } from "react";
import type { ReactNode } from "react";

/**
 * Page-content wrapper. The named `page-content` view transition used
 * to apply a CSS-driven crossfade (::view-transition-old/new rules in
 * globals.css) on every navigation. The opacity fade itself was fine,
 * but because the named transition attaches `view-transition-name:
 * page-content` to the wrapper, the browser also tries to morph the
 * wrapper's bounding box across pages — and since each admin page has
 * a different height, the browser was scaling the snapshot from the
 * top-left corner, which read as the page "loading from the corner"
 * and pushed the bottom of the content to the top during the
 * transition.
 *
 * `update="none"` opts out of the named transition entirely. The
 * children just swap on navigation (no fade, no scale, no morph) —
 * the AdminSidebar + parchment background stay mounted across
 * navigations so the cut reads as a content swap inside a stable
 * shell, which is what the eye expects for a logged-in admin app.
 *
 * If we ever want a subtle crossfade back, the right shape is a
 * pure-opacity ::view-transition-old/new pair with NO named wrapper
 * (i.e. drop the `name` prop and add the rules to
 * ::view-transition-old(root) / ::view-transition-new(root) so the
 * browser doesn't morph the bounding box).
 */
export function SmoothViewTransition({ children }: { children: ReactNode }) {
  return <ViewTransition update="none">{children}</ViewTransition>;
}
