radiant-docs 0.1.47 → 0.1.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "radiant-docs",
-  "version": "0.1.47",
+  "version": "0.1.49",
   "description": "CLI tool for previewing Radiant documentation locally",
   "type": "module",
   "bin": {

package/template/src/components/LogoLink.astro

@@ -64,7 +64,7 @@ const darkLogoContainerStyle = `padding-top: ${darkLogo.paddingTop}px; padding-b
 
 <a
   href={logoHref}
-  class="h-full flex items-center justify-center gap-2 lg:gap-3 text-xl font-bold text-neutral-800 dark:text-neutral-100 overflow-hidden"
+  class="h-full flex items-center justify-center gap-2 lg:gap-2.5 text-xl font-bold text-neutral-800 dark:text-neutral-100 overflow-hidden"
 >
   {
     lightLogoUrl || darkLogoUrl ? (
@@ -95,7 +95,7 @@ const darkLogoContainerStyle = `padding-top: ${darkLogo.paddingTop}px; padding-b
     logoPillText && (
       <span
         class:list={[
-          "text-[10px] text-neutral-500 font-semibold bg-neutral-100 dark:bg-neutral-800 px-2 py-px rounded-full border border-neutral-200 dark:border-neutral-700/70 shadow-xs",
+          "text-[10px] text-neutral-500 dark:text-neutral-400 font-normal bg-neutral-100 dark:bg-neutral-800 px-2 py-px rounded-full border-[0.5px] border-neutral-900/8 dark:border-neutral-50/8",
         ]}
       >
         {logoPillText}

package/template/src/components/OpenApiPage.astro

@@ -869,7 +869,10 @@ const formattedBodyDescription = bodyDescription
             data-snippet-stack
             class="relative flex min-h-0 w-full min-w-0 flex-col gap-6 overflow-hidden"
           >
-            <div data-snippet-slot class="min-h-0 min-w-0 overflow-hidden">
+            <div
+              data-snippet-slot
+              class="min-h-0 min-w-0 overflow-hidden transition-[height,max-height] duration-[360ms] ease-[cubic-bezier(0.22,1,0.36,1)]"
+            >
               <RequestSnippets
                 api={api}
                 method={route.openApiMethod}
@@ -878,7 +881,10 @@ const formattedBodyDescription = bodyDescription
             </div>
             {
               responses && (
-                <div data-snippet-slot class="min-h-0 min-w-0 overflow-hidden">
+                <div
+                  data-snippet-slot
+                  class="min-h-0 min-w-0 overflow-hidden transition-[height,max-height] duration-[360ms] ease-[cubic-bezier(0.22,1,0.36,1)]"
+                >
                   <ResponseSnippets responses={responses} />
                 </div>
               )
@@ -1087,14 +1093,37 @@ const formattedBodyDescription = bodyDescription
       stack.querySelectorAll("[data-snippet-slot]"),
     ).filter((slot) => slot instanceof HTMLElement);
 
-    const applySlotHeights = () => {
+    const prefersReducedMotion =
+      typeof window.matchMedia === "function" &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+    const slotHeightTransitionMs = 360;
+    let isAnimatingSlotHeights = false;
+    let slotHeightAnimationTimeoutId = null;
+
+    const applySlotHeights = ({ animate = false } = {}) => {
       if (!slots.length) return;
+      if (isAnimatingSlotHeights && !animate) return;
+
+      const shouldAnimate = animate && !prefersReducedMotion;
+      const previousHeights = shouldAnimate
+        ? slots.map((slot) => Math.ceil(slot.getBoundingClientRect().height))
+        : [];
+      const previousTransitions = shouldAnimate
+        ? slots.map((slot) => slot.style.transition)
+        : [];
 
       const viewportBudget = getViewportBudget();
       if (host instanceof HTMLElement && viewportBudget > 0) {
         host.style.maxHeight = `${viewportBudget}px`;
       }
 
+      if (shouldAnimate) {
+        for (const slot of slots) {
+          slot.style.transition = "none";
+        }
+      }
+
       for (const slot of slots) {
         slot.style.height = "auto";
         slot.style.maxHeight = "none";
@@ -1132,89 +1161,117 @@ const formattedBodyDescription = bodyDescription
         0,
       );
 
-      if (naturalTotal <= available) {
-        for (let i = 0; i < slots.length; i += 1) {
-          const height = naturalHeights[i];
-          slots[i].style.height = `${height}px`;
-          slots[i].style.maxHeight = `${height}px`;
-        }
-        return;
-      }
+      let targetHeights = naturalHeights;
 
-      const roundedHeights = new Array(slots.length).fill(0);
-      let remainingHeight = available;
-      let remainingIndexes = slots
-        .map((_, index) => index)
-        .sort((a, b) => naturalHeights[a] - naturalHeights[b]);
-
-      while (remainingIndexes.length > 0) {
-        const evenShare = remainingHeight / remainingIndexes.length;
-        const smallestIndex = remainingIndexes[0];
-        const smallestNatural = naturalHeights[smallestIndex];
-
-        if (smallestNatural <= evenShare) {
-          const fixedHeight = Math.min(smallestNatural, remainingHeight);
-          roundedHeights[smallestIndex] = Math.floor(fixedHeight);
-          remainingHeight -= roundedHeights[smallestIndex];
-          remainingIndexes = remainingIndexes.slice(1);
-          continue;
-        }
+      if (naturalTotal > available) {
+        targetHeights = new Array(slots.length).fill(0);
+        let remainingHeight = available;
+        let remainingIndexes = slots
+          .map((_, index) => index)
+          .sort((a, b) => naturalHeights[a] - naturalHeights[b]);
+
+        while (remainingIndexes.length > 0) {
+          const evenShare = remainingHeight / remainingIndexes.length;
+          const smallestIndex = remainingIndexes[0];
+          const smallestNatural = naturalHeights[smallestIndex];
+
+          if (smallestNatural <= evenShare) {
+            const fixedHeight = Math.min(smallestNatural, remainingHeight);
+            targetHeights[smallestIndex] = Math.floor(fixedHeight);
+            remainingHeight -= targetHeights[smallestIndex];
+            remainingIndexes = remainingIndexes.slice(1);
+            continue;
+          }
 
-        const base = Math.floor(evenShare);
-        const remainder = remainingHeight - base * remainingIndexes.length;
-        for (let i = 0; i < remainingIndexes.length; i += 1) {
-          const index = remainingIndexes[i];
-          roundedHeights[index] = base + (i < remainder ? 1 : 0);
+          const base = Math.floor(evenShare);
+          const remainder = remainingHeight - base * remainingIndexes.length;
+          for (let i = 0; i < remainingIndexes.length; i += 1) {
+            const index = remainingIndexes[i];
+            targetHeights[index] = base + (i < remainder ? 1 : 0);
+          }
+          remainingHeight = 0;
+          remainingIndexes = [];
         }
-        remainingHeight = 0;
-        remainingIndexes = [];
-      }
 
-      let roundedTotal = roundedHeights.reduce((sum, value) => sum + value, 0);
-      let delta = available - roundedTotal;
+        let roundedTotal = targetHeights.reduce((sum, value) => sum + value, 0);
+        let delta = available - roundedTotal;
 
-      if (delta !== 0) {
-        const adjustOrder = slots
-          .map((_, index) => index)
-          .sort((a, b) => roundedHeights[b] - roundedHeights[a]);
+        if (delta !== 0) {
+          const adjustOrder = slots
+            .map((_, index) => index)
+            .sort((a, b) => targetHeights[b] - targetHeights[a]);
 
-        while (delta !== 0) {
-          let changed = false;
+          while (delta !== 0) {
+            let changed = false;
 
-          for (const index of adjustOrder) {
-            if (delta === 0) break;
+            for (const index of adjustOrder) {
+              if (delta === 0) break;
 
-            if (delta > 0) {
-              roundedHeights[index] += 1;
-              delta -= 1;
-              changed = true;
-              continue;
-            }
+              if (delta > 0) {
+                targetHeights[index] += 1;
+                delta -= 1;
+                changed = true;
+                continue;
+              }
 
-            if (roundedHeights[index] > 0) {
-              roundedHeights[index] -= 1;
-              delta += 1;
-              changed = true;
+              if (targetHeights[index] > 0) {
+                targetHeights[index] -= 1;
+                delta += 1;
+                changed = true;
+              }
             }
+
+            if (!changed) break;
           }
+        }
+      }
 
-          if (!changed) break;
+      const setSlotHeights = () => {
+        for (let i = 0; i < slots.length; i += 1) {
+          const height = targetHeights[i];
+          slots[i].style.height = `${height}px`;
+          slots[i].style.maxHeight = `${height}px`;
         }
+      };
+
+      if (!shouldAnimate) {
+        setSlotHeights();
+        return;
+      }
+
+      isAnimatingSlotHeights = true;
+      if (slotHeightAnimationTimeoutId) {
+        window.clearTimeout(slotHeightAnimationTimeoutId);
       }
 
       for (let i = 0; i < slots.length; i += 1) {
-        slots[i].style.height = `${roundedHeights[i]}px`;
-        slots[i].style.maxHeight = `${roundedHeights[i]}px`;
+        const height = previousHeights[i];
+        slots[i].style.height = `${height}px`;
+        slots[i].style.maxHeight = `${height}px`;
       }
+
+      void stack.offsetHeight;
+
+      for (let i = 0; i < slots.length; i += 1) {
+        slots[i].style.transition = previousTransitions[i];
+      }
+
+      window.requestAnimationFrame(setSlotHeights);
+
+      slotHeightAnimationTimeoutId = window.setTimeout(() => {
+        isAnimatingSlotHeights = false;
+        slotHeightAnimationTimeoutId = null;
+        applySlotHeights();
+      }, slotHeightTransitionMs + 80);
     };
 
-    const scheduleApplySlotHeights = () => {
+    const scheduleApplySlotHeights = (options = {}) => {
       window.requestAnimationFrame(() => {
-        window.requestAnimationFrame(applySlotHeights);
+        window.requestAnimationFrame(() => applySlotHeights(options));
       });
     };
 
-    const resizeObserver = new ResizeObserver(applySlotHeights);
+    const resizeObserver = new ResizeObserver(() => applySlotHeights());
     resizeObserver.observe(stack);
     if (host instanceof HTMLElement) {
       resizeObserver.observe(host);
@@ -1230,7 +1287,7 @@ const formattedBodyDescription = bodyDescription
     });
     window.addEventListener(
       "rd:snippet-content-change",
-      scheduleApplySlotHeights,
+      () => scheduleApplySlotHeights({ animate: true }),
     );
     applySlotHeights();
   }

package/template/src/components/PagePagination.astro

@@ -24,7 +24,7 @@ function buildHref(route: Route): string {
 {
   (previousRoute || nextRoute) && (
     <nav class="w-full pt-16" aria-label="Page pagination">
-      <div class="flex gap-4 xs:grid-cols-2">
+      <div class="flex gap-4 flex-col sm:flex-row">
         {previousRoute && (
           <a
             href={buildHref(previousRoute)}

package/template/src/components/SidebarSubgroup.astro

@@ -106,7 +106,7 @@ const containsActivePage = item.pages.some((child) => {
     x-show="expanded"
     x-collapse
     x-cloak
-    class="border-l border-neutral-300/80 ml-[15.5px] pl-2"
+    class="border-l border-neutral-900/12 dark:border-neutral-100/12 ml-[15.5px] pl-2"
   >
     {
       item.pages.map((child) => (

package/template/src/components/endpoint/RequestSnippets.astro

@@ -321,14 +321,52 @@ const hasMultipleRequests = requestSnippetItems.length > 1;
     pillLeft: 0,
     pillWidth: 0,
     pillVisible: false,
+    previousSelected: null,
+    isTransitioning: false,
+    isManagedSlot: false,
+    transitionDirection: 1,
+    transitionDurationMs: 400,
+    transitionEasing: "cubic-bezier(0.22, 1, 0.36, 1)",
     tabSyncHandler: null,
+    transitionTimeoutId: null,
     copyTimeoutId: null,
+    readMotionTokens() {
+      const styles = window.getComputedStyle(document.documentElement);
+      const configuredDurationMs = Number.parseFloat(
+        styles.getPropertyValue("--rd-panel-transition-duration-ms"),
+      );
+      this.transitionDurationMs = Number.isFinite(configuredDurationMs)
+        ? configuredDurationMs
+        : this.transitionDurationMs;
+      this.transitionEasing =
+        styles.getPropertyValue("--rd-panel-transition-easing").trim() ||
+        this.transitionEasing;
+    },
     init() {
-      if (!this.hasMultiple) return;
-      const sync = () => this.syncPill();
+      this.isManagedSlot = !!this.$root?.closest("[data-snippet-slot]");
+      this.readMotionTokens();
+      if (
+        typeof window.matchMedia === "function" &&
+        window.matchMedia("(prefers-reduced-motion: reduce)").matches
+      ) {
+        this.transitionDurationMs = 0;
+      }
+
+      const sync = () => {
+        this.syncPill();
+        this.syncSnippetHeight();
+      };
       this.tabSyncHandler = sync;
       this.$nextTick(() => {
+        if (this.$refs.snippetPanels) {
+          this.$refs.snippetPanels.style.transitionDuration =
+            this.transitionDurationMs + "ms";
+          this.$refs.snippetPanels.style.transitionTimingFunction =
+            this.transitionEasing;
+        }
         this.syncPill();
+        this.syncSnippetHeight();
+        if (!this.hasMultiple) return;
         this.$refs.tabList?.addEventListener("scroll", sync, {
           passive: true,
         });
@@ -352,13 +390,96 @@ const hasMultipleRequests = requestSnippetItems.length > 1;
       this.pillWidth = activeRect.width;
       this.pillVisible = true;
     },
+    getPanelHeight(panel) {
+      if (!panel) return 0;
+      const child = panel.firstElementChild;
+      const childHeight =
+        child instanceof HTMLElement ? child.scrollHeight : 0;
+      return Math.ceil(
+        Math.max(panel.scrollHeight, childHeight, panel.getBoundingClientRect().height),
+      );
+    },
+    syncSnippetHeight() {
+      const panels = this.$refs.snippetPanels;
+      if (!panels) return;
+      if (this.isManagedSlot) {
+        panels.style.height = "";
+        return;
+      }
+      const activePanel = panels.querySelector(
+        '[data-snippet-index="' + this.selected + '"]',
+      );
+      const activeHeight = this.getPanelHeight(activePanel);
+      if (activeHeight > 0) {
+        panels.style.height = activeHeight + "px";
+      }
+    },
+    finishTransition() {
+      this.isTransitioning = false;
+      this.previousSelected = null;
+      this.transitionTimeoutId = null;
+      this.$nextTick(() => {
+        this.syncSnippetHeight();
+        window.dispatchEvent(new CustomEvent("rd:snippet-content-change"));
+      });
+    },
     select(index) {
+      if (index === this.selected) return;
+
+      if (this.transitionTimeoutId) {
+        window.clearTimeout(this.transitionTimeoutId);
+        this.transitionTimeoutId = null;
+        this.isTransitioning = false;
+        this.previousSelected = null;
+      }
+
+      const previousIndex = this.selected;
+      this.previousSelected = previousIndex;
+      this.transitionDirection = index > previousIndex ? 1 : -1;
       this.selected = index;
+      this.isTransitioning = true;
       this.$nextTick(() => {
         this.syncPill();
+        this.syncSnippetHeight();
         window.dispatchEvent(new CustomEvent("rd:snippet-content-change"));
+
+        if (this.transitionDurationMs === 0) {
+          this.finishTransition();
+          return;
+        }
+
+        this.transitionTimeoutId = window.setTimeout(() => {
+          this.finishTransition();
+        }, this.transitionDurationMs);
       });
     },
+    getPanelStyle(index) {
+      const base = "position: absolute; top: 0; right: 0; left: 0;";
+      const isActive = index === this.selected;
+      const isPrevious = this.isTransitioning && index === this.previousSelected;
+
+      if (!isActive && !isPrevious) {
+        return "display: none; opacity: 0; pointer-events: none; visibility: hidden; z-index: 0;";
+      }
+
+      if (!this.isTransitioning) {
+        return "position: relative; transform: translateX(0); opacity: 1; pointer-events: auto; visibility: visible; z-index: 1;";
+      }
+
+      if (isActive) {
+        const animationName =
+          this.transitionDirection === 1
+            ? "rd-snippet-slide-in-from-right"
+            : "rd-snippet-slide-in-from-left";
+        return "position: relative; opacity: 1; pointer-events: auto; visibility: visible; z-index: 2; animation: " + animationName + " " + this.transitionDurationMs + "ms " + this.transitionEasing + " both;";
+      }
+
+      const animationName =
+        this.transitionDirection === 1
+          ? "rd-snippet-slide-out-to-left"
+          : "rd-snippet-slide-out-to-right";
+      return base + " opacity: 1; pointer-events: none; visibility: visible; z-index: 1; animation: " + animationName + " " + this.transitionDurationMs + "ms " + this.transitionEasing + " both;";
+    },
     async copySelected() {
       const snippet = this.snippets[this.selected];
       if (!snippet) return;
@@ -383,21 +504,21 @@ const hasMultipleRequests = requestSnippetItems.length > 1;
 >
   <div class="group/prose-code not-prose relative h-full min-h-0 w-full max-w-full min-w-0">
     <div
-      class="flex h-full min-h-0 w-full max-w-full min-w-0 flex-col overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-xs dark:border-neutral-800 dark:bg-(--rd-code-surface)"
+      class="flex h-full min-h-0 w-full max-w-full min-w-0 flex-col rounded-xl"
     >
       <div
-        class="flex items-center justify-between gap-2 border-b border-neutral-200 bg-neutral-50 rounded-t-xl inset-shadow-sm inset-shadow-neutral-100/80 dark:border-neutral-800 dark:bg-neutral-900/60 dark:inset-shadow-neutral-900/80"
+        class="flex items-center justify-between gap-2"
       >
         {
           hasMultipleRequests ? (
             <div class="min-w-0 flex-1 overflow-hidden rounded-t-xl">
               <div
                 x-ref="tabList"
-                class="relative flex min-w-0 items-end gap-1 overflow-x-auto pl-1 pr-8 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+                class="relative flex min-w-0 items-end gap-1 overflow-x-auto overscroll-x-contain pl-1 pr-8 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
               >
                 <div
                   aria-hidden="true"
-                  class="pointer-events-none absolute top-1/2 z-0 h-[28px] -translate-y-1/2 rounded-lg border-[0.5px] border-neutral-200 bg-white shadow-xs transition-[left,width,opacity] duration-200 ease-out dark:border-neutral-700/70 dark:bg-(--rd-code-surface)"
+                  class="pointer-events-none absolute top-0 z-0 h-[28px] rounded-[9px] border-[0.5px] border-(--rd-code-tab-edge-border) bg-(--rd-code-surface) transition-[left,width,opacity] duration-200 ease-out"
                   x-bind:class="pillVisible ? 'opacity-100' : 'opacity-0'"
                   x-bind:style="'left:' + pillLeft + 'px;width:' + pillWidth + 'px;'"
                 />
@@ -410,28 +531,30 @@ const hasMultipleRequests = requestSnippetItems.length > 1;
                     type="button"
                     x-bind:data-rd-snippet-tab="index"
                     x-on:click="select(index)"
-                    class="relative z-10 inline-flex h-9 items-center gap-2 border-0 bg-transparent px-3 py-1.5 text-xs font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none cursor-pointer"
+                    class="relative z-10 inline-flex h-9 items-start border-0 bg-transparent px-3 py-0 text-xs font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none cursor-pointer"
                     x-bind:class="selected === index ? 'text-foreground' : 'text-muted-foreground'"
                   >
-                    <span
-                      x-show="snippet.iconSvg"
-                      x-html="snippet.iconSvg"
-                      class="pointer-events-none inline-flex size-3.5 shrink-0 items-center rounded-[4px] transition-opacity duration-150"
-                      x-bind:class="selected === index ? 'opacity-100' : 'opacity-70'"></span>
-                    <span class="whitespace-pre leading-none" x-text="snippet.label"></span>
+                    <span class="pointer-events-none inline-flex h-[28px] items-center gap-2">
+                      <span
+                        x-show="snippet.iconSvg"
+                        x-html="snippet.iconSvg"
+                        class="inline-flex size-3.5 shrink-0 items-center rounded-[4px] transition-opacity duration-150"
+                        x-bind:class="selected === index ? 'opacity-100' : 'opacity-70'"></span>
+                      <span class="whitespace-pre leading-none" x-text="snippet.label"></span>
+                    </span>
                   </button>
                 </template>
               </div>
             </div>
           ) : (
             <div class="min-w-0 flex-1">
-              <div class="relative h-9 w-fit max-w-full rounded-tl-xl bg-white dark:bg-(--rd-code-surface)">
-                <div class="absolute inset-x-0 -bottom-px h-px bg-white dark:bg-(--rd-code-surface)"></div>
+              <div class="relative h-9 w-fit max-w-full rounded-tl-xl bg-(--rd-code-surface)">
+                <div class="absolute inset-x-0 -bottom-px h-px bg-(--rd-code-surface)"></div>
                 <CodeTabEdge
-                  className="pointer-events-none absolute -top-px left-full z-10 h-[calc(100%+2px)]"
+                  className="pointer-events-none absolute -top-[0.5px] left-full z-10 h-[calc(100%+1.5px)]"
                 />
 
-                <div class="relative z-20 inline-flex h-9 max-w-full items-center gap-2 pl-5 pr-3 py-1.5 text-xs font-medium text-neutral-700 dark:text-neutral-300">
+                <div class="relative z-20 inline-flex h-9 max-w-full items-center gap-2 rounded-tl-xl border-t-[0.5px] border-l-[0.5px] border-(--rd-code-tab-edge-border) pl-5 pr-3 py-1.5 text-xs font-medium text-neutral-700 dark:text-neutral-300">
                   <span
                     class="size-3.5 shrink-0 self-center rounded-[4px]"
                     set:html={firstSnippet.iconSvg}
@@ -443,8 +566,8 @@ const hasMultipleRequests = requestSnippetItems.length > 1;
           )
         }
 
-        <div class="relative h-9 w-5 shrink-0 rounded-tr-xl bg-white dark:bg-(--rd-code-surface)">
-          <div class="absolute inset-x-0 -bottom-px h-px bg-white dark:bg-(--rd-code-surface)"></div>
+        <div class="relative h-9 w-5 shrink-0 rounded-tr-xl bg-(--rd-code-surface) border-t-[0.5px] border-r-[0.5px] border-(--rd-code-tab-edge-border)">
+          <div class="absolute inset-x-0 -bottom-px h-px bg-(--rd-code-surface)"></div>
           <CodeTabEdge
             className="pointer-events-none absolute -top-px right-full z-10 h-[calc(100%+2px)] rotate-y-180"
           />
@@ -470,14 +593,22 @@ const hasMultipleRequests = requestSnippetItems.length > 1;
         </div>
       </div>
 
-      <div class="relative min-h-0 min-w-0 flex-1 overflow-hidden rounded-b-xl">
-        <div class="relative h-full overflow-auto [scrollbar-width:thin] [scrollbar-color:var(--color-neutral-300)_transparent] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-neutral-300/70 hover:[&::-webkit-scrollbar-thumb]:bg-neutral-300/90 dark:[scrollbar-color:var(--color-neutral-700)_transparent] dark:[&::-webkit-scrollbar-thumb]:bg-neutral-700/70 dark:hover:[&::-webkit-scrollbar-thumb]:bg-neutral-700/90">
-          <div class="pointer-events-none sticky top-0 z-10 -mb-4 h-4 w-full bg-linear-to-b from-white to-transparent dark:from-(--rd-code-surface)"></div>
+      <div class="relative min-h-0 min-w-0 flex-1 overflow-hidden rounded-b-xl rounded-tl-xl border-[0.5px] border-(--rd-code-tab-edge-border) bg-(--rd-code-surface)">
+        <div
+          x-ref="snippetPanels"
+          class="relative h-full overflow-auto transition-[height] motion-reduce:transition-none [scrollbar-width:thin] [scrollbar-color:var(--color-neutral-300)_transparent] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-neutral-300/70 hover:[&::-webkit-scrollbar-thumb]:bg-neutral-300/90 dark:[scrollbar-color:var(--color-neutral-700)_transparent] dark:[&::-webkit-scrollbar-thumb]:bg-neutral-700/70 dark:hover:[&::-webkit-scrollbar-thumb]:bg-neutral-700/90"
+          style="transition-duration: var(--rd-panel-transition-duration); transition-timing-function: var(--rd-panel-transition-easing);"
+        >
           {
             requestSnippetItems.map((snippet, index) => (
               <pre
-                class="relative m-0 min-w-full bg-white p-0 text-[13px] leading-6 dark:bg-(--rd-code-surface)"
-                x-show={`selected === ${index}`}
+                class="relative m-0 min-w-full p-0 text-[13px] leading-6"
+                x-bind:style={`getPanelStyle(${index})`}
+                style={
+                  index === 0
+                    ? "position: relative;"
+                    : "display: none; position: absolute; top: 0; right: 0; left: 0; opacity: 0; visibility: hidden; pointer-events: none;"
+                }
                 {...(index !== 0 ? { "x-cloak": true } : {})}
                 data-snippet-index={index}
               ><code data-rd-code-theme class="block min-w-full py-2.5 font-mono text-neutral-800 dark:text-neutral-200"><Fragment set:html={snippet.renderedCodeLinesHtml} /></code></pre>
@@ -488,3 +619,49 @@ const hasMultipleRequests = requestSnippetItems.length > 1;
     </div>
   </div>
 </div>
+
+<style>
+  @keyframes rd-snippet-slide-in-from-right {
+    from {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes rd-snippet-slide-in-from-left {
+    from {
+      transform: translateX(-100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes rd-snippet-slide-out-to-left {
+    from {
+      transform: translateX(0);
+      opacity: 1;
+    }
+    to {
+      transform: translateX(-100%);
+      opacity: 0;
+    }
+  }
+
+  @keyframes rd-snippet-slide-out-to-right {
+    from {
+      transform: translateX(0);
+      opacity: 1;
+    }
+    to {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+  }
+</style>