[Website] Preserve example tabs across the RSC boundary

website/mdx-components.tsx

@@ -93,10 +93,14 @@ const components: MDXComponents = {
   InputChoiceTabs,
   PipelineChoiceTabs,
   ExampleTabs,
-  Implementation,
-  Code,
-  ExampleCode,
-  Schema,
+  // Component identity is not stable across the RSC/client boundary. Give the
+  // marker elements a serializable discriminator for ExampleTabs to inspect.
+  Implementation: (props) => (
+    <Implementation {...props} exampleTab="implementation" />
+  ),
+  Code: (props) => <Code {...props} exampleTab="code" />,
+  ExampleCode: (props) => <ExampleCode {...props} exampleTab="code" />,
+  Schema: (props) => <Schema {...props} exampleTab="schema" />,
   PackageInstallation,
 };
 

website/src/components/ExampleTabs.tsx

@@ -4,37 +4,51 @@ import { Children, isValidElement, type FC, type ReactNode } from "react";
 import { usePathname } from "next/navigation";
 import { Tab, Tabs } from "@/src/design-system/Tabs";
 
-type WithChildren = { children?: ReactNode };
+type ExampleTabKind = "implementation" | "code" | "schema";
 
-export const Implementation: FC<WithChildren> = () => null;
-export const Code: FC<WithChildren> = () => null;
-export const Schema: FC<WithChildren> = () => null;
+interface ExampleTabMarkerProps {
+  readonly children?: ReactNode;
+  readonly exampleTab: ExampleTabKind;
+}
+
+interface ExampleTabsProps {
+  readonly children?: ReactNode;
+}
+
+export const Implementation: FC<ExampleTabMarkerProps> = () => null;
+export const Code: FC<ExampleTabMarkerProps> = () => null;
+export const Schema: FC<ExampleTabMarkerProps> = () => null;
 export const ExampleCode = Code;
 
-const LABELS = new Map<unknown, string>([
-  [Implementation, "Implementation-first"],
-  [Code, "Code-first"],
-  [Schema, "Schema-first"],
+const LABELS = new Map<ExampleTabKind, string>([
+  ["implementation", "Implementation-first"],
+  ["code", "Code-first"],
+  ["schema", "Schema-first"],
 ]);
 
-const ORDER = [Implementation, Code, Schema];
+const ORDER: ExampleTabKind[] = ["implementation", "code", "schema"];
+
+function isExampleTabKind(value: unknown): value is ExampleTabKind {
+  return LABELS.has(value as ExampleTabKind);
+}
 
-export const ExampleTabs: FC<WithChildren> = ({ children }) => {
+export const ExampleTabs: FC<ExampleTabsProps> = ({ children }) => {
   const pathname = usePathname();
   const showSchema = !pathname?.includes("/v16/");
 
-  const byType = new Map<unknown, ReactNode>();
+  const byType = new Map<ExampleTabKind, ReactNode>();
   for (const child of Children.toArray(children)) {
     if (!isValidElement(child)) {
       continue;
     }
-    if (LABELS.has(child.type)) {
-      byType.set(child.type, (child.props as WithChildren).children);
+    const props = child.props as Partial<ExampleTabMarkerProps>;
+    if (isExampleTabKind(props.exampleTab)) {
+      byType.set(props.exampleTab, props.children);
     }
   }
 
   const tabs = ORDER.filter((type) => byType.has(type)).filter(
-    (type) => showSchema || type !== Schema,
+    (type) => showSchema || type !== "schema",
   );
 
   return (

website/src/nitro/demos/tabs/TraceScreen.tsx

@@ -1707,7 +1707,7 @@ function OperationScreen() {
               Latency Distribution
             </span>
             <span style={{ fontSize: 11.5, color: token.textSecondary }}>
-              Total operations: {DIST.total.toLocaleString()}
+              Total operations: {DIST.total.toLocaleString("en-US")}
             </span>
             <span
               style={{ marginLeft: "auto", fontSize: 11, color: token.textDim }}

website/src/nitro/lib/motion.tsx

@@ -1,17 +1,25 @@
 import { MotionConfig, cubicBezier, useReducedMotion } from "motion/react";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useSyncExternalStore } from "react";
 import type { ReactNode } from "react";
 
 export type ReducedMotionMode = "user" | "always" | "never";
 
 const ReducedMotionContext = createContext<ReducedMotionMode>("user");
+const emptySubscribe = () => () => {};
+const getClientSnapshot = () => true;
+const getServerSnapshot = () => false;
 
 export function useReducedMotionPreference(): boolean {
   const mode = useContext(ReducedMotionContext);
   const media = useReducedMotion() ?? false;
+  const hydrated = useSyncExternalStore(
+    emptySubscribe,
+    getClientSnapshot,
+    getServerSnapshot,
+  );
   if (mode === "always") return true;
   if (mode === "never") return false;
-  return media;
+  return hydrated && media;
 }
 
 export const ease = {

website/src/nitro/lib/scale.ts

@@ -28,7 +28,10 @@ export function logScale(
   const l0 = Math.log10(Math.max(d0, min));
   const l1 = Math.log10(Math.max(d1, min));
   const m = l1 === l0 ? 0 : (r1 - r0) / (l1 - l0);
-  return (x: number) => r0 + (Math.log10(Math.max(x, min)) - l0) * m;
+  // Math.log10 can differ by a few ulps across JavaScript runtimes. Bound the
+  // precision so server-rendered coordinates match during browser hydration.
+  return (x: number) =>
+    +(r0 + (Math.log10(Math.max(x, min)) - l0) * m).toFixed(6);
 }
 
 const f = (n: number) => (Number.isFinite(n) ? +n.toFixed(2) : 0);