radiant-docs 0.1.37 → 0.1.39

package/template/src/components/user/CodeBlock.astro

@@ -116,25 +116,58 @@ function parseHighlightedLineNumbers(
 
 function buildTokenStyle(token: {
   color?: string;
+  darkColor?: string;
   bgColor?: string;
+  darkBgColor?: string;
   fontStyle?: number;
   htmlStyle?: Record<string, string>;
+  darkHtmlStyle?: Record<string, string>;
 }): string | undefined {
   const styleSegments: string[] = [];
 
-  if (token.color) styleSegments.push(`color:${token.color}`);
-  if (token.bgColor) styleSegments.push(`background-color:${token.bgColor}`);
+  const pushStyleVariable = (property: string, value?: string) => {
+    if (value) styleSegments.push(`${property}:${value}`);
+  };
+
+  pushStyleVariable("--rd-token-color", token.color);
+  pushStyleVariable("--rd-token-color-dark", token.darkColor);
+  pushStyleVariable("--rd-token-bg", token.bgColor);
+  pushStyleVariable("--rd-token-bg-dark", token.darkBgColor);
 
   const fontStyle = typeof token.fontStyle === "number" ? token.fontStyle : 0;
   if ((fontStyle & 1) === 1) styleSegments.push("font-style:italic");
   if ((fontStyle & 2) === 2) styleSegments.push("font-weight:600");
   if ((fontStyle & 4) === 4) styleSegments.push("text-decoration:underline");
 
-  if (token.htmlStyle && typeof token.htmlStyle === "object") {
-    for (const [property, value] of Object.entries(token.htmlStyle)) {
+  const pushHtmlStyle = (
+    styleObject: Record<string, string> | undefined,
+    isDarkStyle: boolean,
+  ) => {
+    if (!styleObject || typeof styleObject !== "object") return;
+
+    for (const [property, value] of Object.entries(styleObject)) {
+      const normalizedProperty = property.trim().toLowerCase();
+      if (normalizedProperty === "color") {
+        pushStyleVariable(
+          isDarkStyle ? "--rd-token-color-dark" : "--rd-token-color",
+          value,
+        );
+        continue;
+      }
+      if (normalizedProperty === "background-color") {
+        pushStyleVariable(
+          isDarkStyle ? "--rd-token-bg-dark" : "--rd-token-bg",
+          value,
+        );
+        continue;
+      }
+
       styleSegments.push(`${property}:${value}`);
     }
-  }
+  };
+
+  pushHtmlStyle(token.htmlStyle, false);
+  pushHtmlStyle(token.darkHtmlStyle, true);
 
   if (!styleSegments.length) return undefined;
   return styleSegments.join(";");
@@ -198,7 +231,7 @@ const renderedCodeLinesHtml = normalizedTokenLines
               const tokenStyleAttribute = tokenStyle
                 ? ` style="${escapeAttribute(tokenStyle)}"`
                 : "";
-              return `<span${tokenStyleAttribute}>${escapeHtml(token.content)}</span>`;
+              return `<span data-rd-token${tokenStyleAttribute}>${escapeHtml(token.content)}</span>`;
             })
             .join("")
         : fallbackLineContent.length > 0
@@ -206,14 +239,14 @@ const renderedCodeLinesHtml = normalizedTokenLines
           : "&nbsp;";
 
     const lineNumberHtml = parsedShowLineNumbers
-      ? `<span class="w-10 shrink-0 select-none pl-4 pr-3 text-right tabular-nums text-neutral-400">${lineNumber}</span>`
+      ? `<span class="w-10 shrink-0 select-none pl-4 pr-3 text-right tabular-nums text-neutral-400 dark:text-neutral-500">${lineNumber}</span>`
       : "";
 
     const lineContentClass = parsedShowLineNumbers
       ? "flex-1 whitespace-pre pr-4"
       : "flex-1 whitespace-pre pr-4 pl-4";
     const lineClass = isHighlighted
-      ? "flex min-w-full bg-neutral-100/80"
+      ? "flex min-w-full bg-neutral-100/80 dark:bg-neutral-800/70"
       : "flex min-w-full";
 
     return `<span class="${lineClass}">${lineNumberHtml}<span class="${lineContentClass}">${tokenHtml}</span></span>`;
@@ -223,8 +256,8 @@ const renderedCodeLinesHtml = normalizedTokenLines
 
 <div
   class:list={[
-    "group/prose-code not-prose relative w-full max-w-full min-w-0",
-    parsedInCodeGroup ? "my-0" : "my-6",
+    "group/prose-code not-prose relative w-full max-w-full min-w-0 rounded-xl",
+    parsedInCodeGroup ? "my-0" : "my-6 shadow-xs",
   ]}
   data-rd-code-block-root="true"
   data-rd-collapsed-lines={collapsedLinesValue}
@@ -238,18 +271,18 @@ const renderedCodeLinesHtml = normalizedTokenLines
 >
   <div
     class:list={[
-      "w-full max-w-full min-w-0 overflow-hidden border border-neutral-200 bg-white shadow-xs",
+      "w-full max-w-full min-w-0 overflow-hidden border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-(--rd-code-surface)",
       parsedInCodeGroup ? "rounded-t-none rounded-b-xl" : "rounded-xl",
     ]}
   >
     {
       !parsedInCodeGroup && parsedShowFilename ? (
-        <div class="flex items-center justify-between gap-2 border-b border-neutral-200 bg-neutral-50 inset-shadow-sm inset-shadow-neutral-100/80">
+        <div class="flex items-center justify-between gap-2 border-b border-neutral-200 bg-neutral-50 inset-shadow-sm inset-shadow-neutral-100/80 dark:border-neutral-800 dark:bg-neutral-900/60 dark:inset-shadow-neutral-900/80">
           <div class="min-w-0 flex-1">
-            <div class="relative h-9 w-fit max-w-full rounded-tl-xl bg-white">
-              <div class="absolute inset-x-0 -bottom-px h-px bg-white" />
+            <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)" />
               <CodeTabEdge className="pointer-events-none absolute -top-px left-full z-10 h-[calc(100%+2px)]" />
-              <div class="relative z-20 inline-flex h-9 max-w-full items-center gap-2 pl-5 py-1.5 text-xs font-medium text-neutral-700">
+              <div class="relative z-20 inline-flex h-9 max-w-full items-center gap-2 pl-5 py-1.5 text-xs font-medium text-neutral-700 dark:text-neutral-300">
                 {shouldRenderLanguageIcon ? (
                   <CodeLanguageIcon
                     language={normalizedLanguage}
@@ -261,12 +294,12 @@ const renderedCodeLinesHtml = normalizedTokenLines
               </div>
             </div>
           </div>
-          <div class="relative h-9 w-5 shrink-0 rounded-tr-xl bg-white">
-            <div class="absolute inset-x-0 -bottom-px h-px bg-white" />
+          <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)" />
             <CodeTabEdge className="pointer-events-none absolute -top-px right-full z-10 h-[calc(100%+2px)] rotate-y-180" />
             <button
               type="button"
-              class="absolute right-2 top-1/2 z-20 inline-flex size-7 -translate-y-1/2 appearance-none items-center justify-center rounded-md border-0 bg-transparent text-neutral-500/80 shadow-none outline-none ring-0 transition-colors duration-150 hover:bg-neutral-50 hover:text-neutral-600 focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 cursor-pointer"
+              class="absolute right-2 top-1/2 z-20 inline-flex size-7 -translate-y-1/2 appearance-none items-center justify-center rounded-md border-0 bg-transparent text-neutral-500/80 shadow-none outline-none ring-0 transition-colors duration-150 hover:bg-neutral-50 hover:text-neutral-600 focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 cursor-pointer dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-200"
               data-rd-copy-trigger="true"
               data-rd-copy-content={encodedRaw}
               aria-label="Copy code"
@@ -279,7 +312,7 @@ const renderedCodeLinesHtml = normalizedTokenLines
               />
               <Icon
                 name="lucide:check"
-                class="absolute size-3.5 stroke-3 origin-center scale-25 rotate-6 opacity-0 text-green-700/80 transition-all duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform motion-reduce:transition-none"
+                class="absolute size-3.5 stroke-3 origin-center scale-25 rotate-6 opacity-0 text-green-700/80 transition-all duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform motion-reduce:transition-none dark:text-green-400/90"
                 data-rd-copy-check
                 aria-hidden="true"
               />
@@ -289,13 +322,16 @@ const renderedCodeLinesHtml = normalizedTokenLines
       ) : null
     }
 
-    <div class="relative min-w-0">
+    <div
+      class="relative min-w-0"
+      data-rd-code-group-panel={parsedInCodeGroup ? "true" : undefined}
+    >
       {
         !parsedInCodeGroup && !parsedShowFilename ? (
           <div class="pointer-events-none absolute right-2 top-2 z-20">
             <button
               type="button"
-              class="pointer-events-auto inline-flex size-7 appearance-none items-center justify-center rounded-md border border-neutral-200/80 text-neutral-500/80 bg-white/80 backdrop-blur-xs outline-none ring-0 transition-colors duration-150 hover:bg-neutral-50 hover:text-neutral-600 focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 cursor-pointer"
+              class="pointer-events-auto inline-flex size-7 appearance-none items-center justify-center rounded-md border border-neutral-200/80 text-neutral-500/80 bg-white/80 backdrop-blur-xs outline-none ring-0 transition-colors duration-150 hover:bg-neutral-50 hover:text-neutral-600 focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 cursor-pointer dark:border-neutral-700/50 dark:bg-(--rd-code-surface) dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-200"
               data-rd-copy-trigger="true"
               data-rd-copy-content={encodedRaw}
               aria-label="Copy code"
@@ -308,7 +344,7 @@ const renderedCodeLinesHtml = normalizedTokenLines
               />
               <Icon
                 name="lucide:check"
-                class="absolute size-3.5 stroke-3 origin-center scale-25 rotate-6 opacity-0 text-green-700/80 transition-all duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform motion-reduce:transition-none"
+                class="absolute size-3.5 stroke-3 origin-center scale-25 rotate-6 opacity-0 text-green-700/80 transition-all duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform motion-reduce:transition-none dark:text-green-400/90"
                 data-rd-copy-check
                 aria-hidden="true"
               />
@@ -333,10 +369,10 @@ const renderedCodeLinesHtml = normalizedTokenLines
 
       <div
         data-rd-code-scroll-area
-        class="relative overflow-x-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"
+        class="relative overflow-x-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"
       >
         <pre
-          class="relative m-0 min-w-full bg-white p-0 text-[13px] leading-6"><code class="block min-w-full py-2.5 font-mono text-neutral-800"><Fragment set:html={renderedCodeLinesHtml} /></code></pre>
+          class="relative m-0 min-w-full bg-white p-0 text-[13px] leading-6 dark:bg-(--rd-code-surface)"><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={renderedCodeLinesHtml} /></code></pre>
       </div>
     </div>
   </div>
@@ -348,7 +384,9 @@ const renderedCodeLinesHtml = normalizedTokenLines
       const root = script.closest("[data-rd-code-block-root='true']");
       if (!(root instanceof HTMLElement)) return;
 
-      const copyButtons = root.querySelectorAll("[data-rd-copy-trigger='true']");
+      const copyButtons = root.querySelectorAll(
+        "[data-rd-copy-trigger='true']",
+      );
       if (copyButtons.length === 0) return;
 
       const setCopiedState = (button, copied) => {

package/template/src/components/user/CodeGroup.astro

@@ -4,11 +4,11 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
 ---
 
 <div
-  class="group/prose-code-group not-prose relative my-6 w-full max-w-full min-w-0"
+  class="group/prose-code-group not-prose relative my-6 w-full max-w-full min-w-0 shadow-xs rounded-xl"
   data-rd-code-group-root="true"
 >
   <div
-    class="relative z-10 overflow-visible rounded-t-xl border border-b-0 border-neutral-200 bg-neutral-50 inset-shadow-sm inset-shadow-neutral-100/80"
+    class="relative z-10 overflow-visible rounded-t-xl border border-b-0 border-neutral-200 bg-neutral-50 inset-shadow-sm inset-shadow-neutral-100/80 dark:border-neutral-800 dark:bg-neutral-900/60 dark:inset-shadow-neutral-900/80"
   >
     <div class="flex min-w-0 items-end justify-between gap-2">
       <div class="min-w-0 flex-1 overflow-hidden rounded-t-xl">
@@ -19,20 +19,25 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
           <div
             data-rd-code-group-pill
             aria-hidden="true"
-            class="pointer-events-none absolute top-1/2 z-0 h-[28px] -translate-y-1/2 rounded-[9px] border-[0.5px] border-neutral-200 bg-white shadow-xs opacity-0 transition-[left,width,opacity] duration-200 ease-out"
+            class="pointer-events-none absolute top-1/2 z-0 h-[28px] -translate-y-1/2 rounded-[9px] border-[0.5px] border-neutral-200 bg-white opacity-0 transition-[left,width,opacity] duration-200 ease-out dark:border-neutral-700/70 dark:bg-(--rd-code-surface)"
           >
           </div>
         </div>
       </div>
 
-      <div class="relative h-9 w-5 shrink-0 rounded-tr-xl bg-white">
-        <div class="absolute inset-x-0 -bottom-px h-px bg-white"></div>
+      <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>
         <CodeTabEdge
           className="pointer-events-none absolute -top-px right-full z-10 h-[calc(100%+2px)] rotate-y-180"
         />
         <button
           type="button"
-          class="absolute right-2 top-1/2 z-20 inline-flex size-7 -translate-y-1/2 appearance-none items-center justify-center rounded-md border-0 bg-transparent text-neutral-500/80 shadow-none outline-none ring-0 transition-colors duration-150 hover:bg-neutral-50 hover:text-neutral-600 focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 cursor-pointer"
+          class="absolute right-2 top-1/2 z-20 inline-flex size-7 -translate-y-1/2 appearance-none items-center justify-center rounded-md border-0 bg-transparent text-neutral-500/80 shadow-none outline-none ring-0 transition-colors duration-150 hover:bg-neutral-50 hover:text-neutral-600 focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 cursor-pointer dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-200"
           data-rd-copy-trigger="true"
           aria-label="Copy code"
         >
@@ -44,7 +49,7 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
           />
           <Icon
             name="lucide:check"
-            class="absolute size-3.5 stroke-3 origin-center scale-25 rotate-6 opacity-0 text-green-700/80 transition-all duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform motion-reduce:transition-none"
+            class="absolute size-3.5 stroke-3 origin-center scale-25 rotate-6 opacity-0 text-green-700/80 transition-all duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform motion-reduce:transition-none dark:text-green-400/90"
             data-rd-copy-check
             aria-hidden="true"
           />
@@ -53,7 +58,10 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
     </div>
   </div>
 
-  <div data-rd-code-group-content class="min-w-0">
+  <div
+    data-rd-code-group-content
+    class="relative min-w-0 overflow-hidden transition-[height] duration-300 ease-in-out"
+  >
     <slot />
   </div>
   <script is:inline>
@@ -69,14 +77,27 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
       const pillElement = root.querySelector("[data-rd-code-group-pill]");
       const copyButton = root.querySelector("[data-rd-copy-trigger='true']");
 
-      if (!contentElement || !tabsElement || !pillElement) return;
+      if (
+        !(contentElement instanceof HTMLElement) ||
+        !(tabsElement instanceof HTMLElement) ||
+        !(pillElement instanceof HTMLElement)
+      ) {
+        return;
+      }
 
       const codeItems = Array.from(
         contentElement.querySelectorAll("[data-rd-code-group-item='true']"),
-      );
+      ).filter((item) => item instanceof HTMLElement);
       if (codeItems.length === 0) return;
 
+      const prefersReducedMotion =
+        typeof window.matchMedia === "function" &&
+        window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      const TRANSITION_DURATION_MS = prefersReducedMotion ? 0 : 300;
+
       let activeIndex = 0;
+      let transitionTimeoutId = null;
+      let activeItemResizeObserver = null;
 
       const setCopiedState = (button, copied) => {
         const copyIcon = button.querySelector("[data-rd-copy-icon]");
@@ -118,8 +139,7 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
 
         const tabButton = document.createElement("button");
         tabButton.type = "button";
-        tabButton.className =
-          `relative inline-flex h-9 items-center border-0 bg-transparent px-3 py-1.5 text-xs font-medium text-neutral-600 transition-colors duration-150 focus:outline-none focus-visible:outline-none cursor-pointer ${hasTabIcon ? "gap-2" : ""}`;
+        tabButton.className = `relative inline-flex h-9 items-center border-0 bg-transparent px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors duration-150 focus:outline-none focus-visible:outline-none cursor-pointer ${hasTabIcon ? "gap-2" : ""}`;
         tabButton.setAttribute("aria-label", filename);
         tabButton.setAttribute("data-rd-code-group-tab", String(index));
 
@@ -142,14 +162,28 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
         tabWrapper.appendChild(tabButton);
         tabsElement.appendChild(tabWrapper);
 
+        const panelCandidate = itemElement.querySelector(
+          "[data-rd-code-group-panel='true']",
+        );
+        const panelElement =
+          panelCandidate instanceof HTMLElement ? panelCandidate : itemElement;
+        const frameElement =
+          itemElement.firstElementChild instanceof HTMLElement
+            ? itemElement.firstElementChild
+            : null;
+
         return {
           itemElement,
+          panelElement,
+          frameElement,
           tabWrapper,
           tabButton,
           iconContainer,
         };
       });
 
+      contentElement.style.transitionDuration = `${TRANSITION_DURATION_MS}ms`;
+
       const syncPill = () => {
         const activeTab = tabs[activeIndex]?.tabWrapper;
         if (!activeTab) {
@@ -168,12 +202,11 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
         pillElement.classList.add("opacity-100");
       };
 
-      const syncActiveTab = () => {
-        tabs.forEach(({ itemElement, tabButton, iconContainer }, index) => {
+      const updateTabButtonStates = () => {
+        tabs.forEach(({ tabButton, iconContainer }, index) => {
           const isActive = index === activeIndex;
-          itemElement.style.display = isActive ? "" : "none";
-          tabButton.classList.toggle("text-neutral-900", isActive);
-          tabButton.classList.toggle("text-neutral-600", !isActive);
+          tabButton.classList.toggle("text-foreground", isActive);
+          tabButton.classList.toggle("text-muted-foreground", !isActive);
 
           if (!iconContainer) return;
           iconContainer.classList.toggle("opacity-100", isActive);
@@ -182,11 +215,163 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
         syncPill();
       };
 
+      const getItemOuterHeight = (itemElement) => {
+        const frameElement =
+          itemElement.firstElementChild instanceof HTMLElement
+            ? itemElement.firstElementChild
+            : null;
+        if (frameElement) {
+          const frameRectHeight = frameElement.getBoundingClientRect().height;
+          if (Number.isFinite(frameRectHeight) && frameRectHeight > 0) {
+            return Math.ceil(frameRectHeight);
+          }
+
+          const frameOffsetHeight = frameElement.offsetHeight;
+          if (Number.isFinite(frameOffsetHeight) && frameOffsetHeight > 0) {
+            return frameOffsetHeight;
+          }
+        }
+
+        const rectHeight = itemElement.getBoundingClientRect().height;
+        if (Number.isFinite(rectHeight) && rectHeight > 0) {
+          return Math.ceil(rectHeight);
+        }
+
+        const offsetHeight = itemElement.offsetHeight;
+        if (Number.isFinite(offsetHeight) && offsetHeight > 0) {
+          return offsetHeight;
+        }
+
+        return itemElement.scrollHeight;
+      };
+
+      const syncContentHeight = () => {
+        const activeItem = tabs[activeIndex]?.itemElement;
+        if (!activeItem) return;
+        contentElement.style.height = `${getItemOuterHeight(activeItem)}px`;
+      };
+
+      const observeActiveItemHeight = () => {
+        if (activeItemResizeObserver) {
+          activeItemResizeObserver.disconnect();
+          activeItemResizeObserver = null;
+        }
+
+        if (typeof ResizeObserver === "undefined") return;
+
+        const activeItem = tabs[activeIndex]?.itemElement;
+        if (!activeItem) return;
+
+        activeItemResizeObserver = new ResizeObserver(() => {
+          if (transitionTimeoutId !== null) return;
+          syncContentHeight();
+        });
+        activeItemResizeObserver.observe(activeItem);
+      };
+
+      const setPanelsToRestState = () => {
+        tabs.forEach(({ itemElement, panelElement, frameElement }, index) => {
+          const isActive = index === activeIndex;
+          itemElement.style.position = isActive ? "relative" : "absolute";
+          itemElement.style.inset = isActive ? "" : "0";
+          itemElement.style.opacity = isActive ? "1" : "0";
+          itemElement.style.visibility = isActive ? "visible" : "hidden";
+          itemElement.style.pointerEvents = isActive ? "auto" : "none";
+          itemElement.style.zIndex = isActive ? "1" : "0";
+          panelElement.style.transform = "translateX(0)";
+          panelElement.style.animation = "none";
+          panelElement.style.willChange = "auto";
+          if (frameElement) {
+            frameElement.style.height = "";
+          }
+        });
+      };
+
+      const normalizeToCurrentState = () => {
+        setPanelsToRestState();
+        syncContentHeight();
+        observeActiveItemHeight();
+      };
+
+      const transitionToIndex = (nextIndex) => {
+        if (nextIndex === activeIndex) return;
+
+        if (transitionTimeoutId !== null) {
+          window.clearTimeout(transitionTimeoutId);
+          transitionTimeoutId = null;
+          normalizeToCurrentState();
+        }
+
+        const previousIndex = activeIndex;
+        const direction = nextIndex > previousIndex ? 1 : -1;
+        activeIndex = nextIndex;
+        updateTabButtonStates();
+
+        const previousTab = tabs[previousIndex];
+        const nextTab = tabs[nextIndex];
+        const previousItem = previousTab?.itemElement;
+        const nextItem = nextTab?.itemElement;
+        const previousPanel = previousTab?.panelElement;
+        const nextPanel = nextTab?.panelElement;
+        const previousFrame = previousTab?.frameElement;
+        const nextFrame = nextTab?.frameElement;
+        if (!previousItem || !nextItem || !previousPanel || !nextPanel) {
+          normalizeToCurrentState();
+          return;
+        }
+
+        const previousHeight = getItemOuterHeight(previousItem);
+        const nextHeight = getItemOuterHeight(nextItem);
+        contentElement.style.height = `${previousHeight}px`;
+        if (TRANSITION_DURATION_MS === 0) {
+          contentElement.style.height = `${nextHeight}px`;
+        } else {
+          requestAnimationFrame(() => {
+            contentElement.style.height = `${nextHeight}px`;
+          });
+        }
+
+        previousItem.style.position = "absolute";
+        previousItem.style.inset = "0";
+        previousItem.style.opacity = "1";
+        previousItem.style.visibility = "visible";
+        previousItem.style.pointerEvents = "none";
+        previousItem.style.zIndex = "1";
+        previousPanel.style.transform = "translateX(0)";
+        previousPanel.style.willChange = "transform";
+        if (previousFrame) {
+          previousFrame.style.height = "100%";
+        }
+        previousPanel.style.animation =
+          direction === 1
+            ? `rd-code-group-slide-out-to-left ${TRANSITION_DURATION_MS}ms ease-in-out both`
+            : `rd-code-group-slide-out-to-right ${TRANSITION_DURATION_MS}ms ease-in-out both`;
+
+        nextItem.style.position = "absolute";
+        nextItem.style.inset = "0";
+        nextItem.style.opacity = "1";
+        nextItem.style.visibility = "visible";
+        nextItem.style.pointerEvents = "auto";
+        nextItem.style.zIndex = "2";
+        nextPanel.style.transform = "translateX(0)";
+        nextPanel.style.willChange = "transform";
+        if (nextFrame) {
+          nextFrame.style.height = "100%";
+        }
+        nextPanel.style.animation =
+          direction === 1
+            ? `rd-code-group-slide-in-from-right ${TRANSITION_DURATION_MS}ms ease-in-out both`
+            : `rd-code-group-slide-in-from-left ${TRANSITION_DURATION_MS}ms ease-in-out both`;
+
+        transitionTimeoutId = window.setTimeout(() => {
+          transitionTimeoutId = null;
+          normalizeToCurrentState();
+        }, TRANSITION_DURATION_MS);
+      };
+
       tabs.forEach(({ tabButton }, index) => {
         tabButton.addEventListener("click", () => {
-          if (activeIndex === index) return;
-          activeIndex = index;
-          syncActiveTab();
+          transitionToIndex(index);
         });
       });
 
@@ -222,9 +407,61 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
       }
 
       tabsElement.addEventListener("scroll", syncPill, { passive: true });
-      window.addEventListener("resize", syncPill);
-      syncActiveTab();
+      window.addEventListener("resize", () => {
+        syncPill();
+        if (transitionTimeoutId === null) {
+          syncContentHeight();
+        }
+      });
+      updateTabButtonStates();
+      normalizeToCurrentState();
       requestAnimationFrame(syncPill);
     })();
   </script>
 </div>
+
+<style>
+  @keyframes rd-code-group-slide-in-from-right {
+    from {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes rd-code-group-slide-in-from-left {
+    from {
+      transform: translateX(-100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes rd-code-group-slide-out-to-left {
+    from {
+      transform: translateX(0);
+      opacity: 1;
+    }
+    to {
+      transform: translateX(-100%);
+      opacity: 0;
+    }
+  }
+
+  @keyframes rd-code-group-slide-out-to-right {
+    from {
+      transform: translateX(0);
+      opacity: 1;
+    }
+    to {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+  }
+</style>

package/template/src/components/user/ComponentPreviewBlock.astro

@@ -64,12 +64,12 @@ const isInitiallyExpanded = shouldShowAllCode || totalLineCount <= visibleLines;
   data-rd-component-preview-root="true"
 >
   <div
-    class="w-full max-w-full min-w-0 overflow-x-auto rounded-t-xl border border-b-0 border-neutral-200 bg-white p-4 xs:p-6 sm:p-12 shadow-xs [&>:first-child]:mt-0! [&>:last-child]:mb-0!"
+    class="w-full max-w-full min-w-0 overflow-x-auto rounded-t-xl border border-b-0 bg-white dark:bg-neutral-800/15 p-4 xs:p-6 sm:p-12 shadow-xs [&>:first-child]:mt-0! [&>:last-child]:mb-0!"
   >
     <slot />
   </div>
   <div
-    class="rd-component-preview__code not-prose relative"
+    class="rd-component-preview__code not-prose relative overflow-hidden rounded-b-xl bg-neutral-50 dark:bg-(--rd-code-surface)"
     data-rd-preview-expanded={isInitiallyExpanded ? "true" : "false"}
     style={{ "--rd-preview-visible-lines": String(visibleLines) }}
   >
@@ -84,17 +84,19 @@ const isInitiallyExpanded = shouldShowAllCode || totalLineCount <= visibleLines;
       collapsedLines={collapsedLines}
     />
     <div
-      class="rd-component-preview__overlay pointer-events-none absolute inset-x-px inset-y-px hidden items-end justify-center rounded-b-xl bg-linear-to-t from-neutral-50/90 to-neutral-50/30 pb-4"
+      class="rd-component-preview__overlay pointer-events-none absolute inset-x-px inset-y-px hidden items-end justify-center rounded-b-xl pb-4"
       data-rd-preview-overlay
       aria-hidden="true"
     >
-      <button
-        type="button"
-        class="pointer-events-auto inline-flex h-8 items-center justify-center rounded-md border border-neutral-200 bg-white px-3 text-sm font-medium text-neutral-700 shadow-md shadow-neutral-200 transition-colors duration-150 hover:bg-neutral-50 cursor-pointer"
-        data-rd-preview-expand
-      >
-        View code
-      </button>
+      <div class="bg-white dark:bg-neutral-800">
+        <button
+          type="button"
+          class="pointer-events-auto inline-flex h-8 items-center justify-center rounded-md border border-neutral-200 bg-white px-3 text-sm font-medium text-neutral-700 shadow-xl transition-colors duration-150 hover:bg-neutral-50 cursor-pointer dark:border-neutral-700 dark:bg-neutral-700/30 dark:text-neutral-200 dark:hover:bg-neutral-700/50"
+          data-rd-preview-expand
+        >
+          View code
+        </button>
+      </div>
     </div>
   </div>
 </div>
@@ -145,14 +147,38 @@ const isInitiallyExpanded = shouldShowAllCode || totalLineCount <= visibleLines;
     border-top-right-radius: 0 !important;
   }
 
+  :global(.dark) .rd-component-preview__code :global(.group\/prose-code > div) {
+    background-color: var(--rd-code-surface) !important;
+  }
+
   .rd-component-preview__code :global(.group\/prose-code pre),
   .rd-component-preview__code :global(.group\/prose-code code) {
     background-color: var(--color-neutral-50) !important;
   }
 
+  :global(.dark) .rd-component-preview__code :global(.group\/prose-code pre),
+  :global(.dark) .rd-component-preview__code :global(.group\/prose-code code) {
+    background-color: var(--rd-code-surface) !important;
+  }
+
   .rd-component-preview__code[data-rd-preview-expanded="false"]
     .rd-component-preview__overlay {
     display: flex;
+    background: linear-gradient(
+      to top,
+      rgb(250 250 250 / 90%),
+      rgb(250 250 250 / 30%)
+    );
+  }
+
+  :global(.dark)
+    .rd-component-preview__code[data-rd-preview-expanded="false"]
+    .rd-component-preview__overlay {
+    background: linear-gradient(
+      to top,
+      color-mix(in srgb, var(--rd-code-surface) 90%, transparent),
+      color-mix(in srgb, var(--rd-code-surface) 35%, transparent)
+    );
   }
 
   .rd-component-preview__code :global([data-rd-code-scroll-area]) {