radiant-docs 0.1.47 → 0.1.49

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

@@ -16,6 +16,7 @@ interface Props {
   showLineNumbers?: boolean | string;
   hideLanguageIcon?: boolean | string;
   inCodeGroup?: boolean | string;
+  flushTop?: boolean | string;
   highlightedLines?: string;
   collapsedLines?: string;
 }
@@ -28,6 +29,7 @@ const {
   showLineNumbers = false,
   hideLanguageIcon = false,
   inCodeGroup = false,
+  flushTop = false,
   highlightedLines = "",
   collapsedLines = "",
 } = Astro.props as Props;
@@ -191,6 +193,7 @@ const parsedShowFilename = parsedInCodeGroup
   : toBoolean(showFilename, false);
 const parsedShowLineNumbers = toBoolean(showLineNumbers, false);
 const parsedHideLanguageIcon = toBoolean(hideLanguageIcon, false);
+const parsedFlushTop = !parsedInCodeGroup && toBoolean(flushTop, false);
 const shouldRenderLanguageIcon = !parsedHideLanguageIcon;
 
 const trimmedFilename = filename.trim();
@@ -199,10 +202,14 @@ const displayFilename =
     ? trimmedFilename
     : buildDefaultCodeFileName(normalizedLanguage);
 
-const { lines: tokenLines } = await getCodeLineTokens({
+const { lines: tokenLines, themeColors } = await getCodeLineTokens({
   code: raw,
   language: normalizedLanguage,
 });
+const codeThemeStyle = [
+  `--rd-code-line-highlight-theme-bg-light:${themeColors.lineHighlightBackground.light}`,
+  `--rd-code-line-highlight-theme-bg-dark:${themeColors.lineHighlightBackground.dark}`,
+].join(";");
 
 const rawLines = raw.split("\n");
 const normalizedRawLines = rawLines.length > 0 ? rawLines : [""];
@@ -244,20 +251,23 @@ const renderedCodeLinesHtml = normalizedTokenLines
 
     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 dark:bg-neutral-800/70"
-      : "flex min-w-full";
+      : !parsedInCodeGroup && !parsedShowFilename
+        ? "flex-1 whitespace-pre pl-4 pr-8.5"
+        : "flex-1 whitespace-pre pl-4 pr-4";
+    const lineHighlightAttribute = isHighlighted
+      ? ' data-rd-code-line-highlighted="true"'
+      : "";
 
-    return `<span class="${lineClass}">${lineNumberHtml}<span class="${lineContentClass}">${tokenHtml}</span></span>`;
+    return `<span class="flex min-w-full"${lineHighlightAttribute}>${lineNumberHtml}<span class="${lineContentClass}">${tokenHtml}</span></span>`;
   })
   .join("");
 ---
 
 <div
   class:list={[
-    "group/prose-code not-prose relative w-full max-w-full min-w-0 rounded-xl",
-    parsedInCodeGroup ? "my-0" : "rd-prose-block shadow-xs",
+    "group/prose-code not-prose relative w-full max-w-full min-w-0",
+    parsedFlushTop ? "rounded-b-xl" : "rounded-xl",
+    parsedInCodeGroup ? "my-0" : "rd-prose-block",
   ]}
   data-rd-code-block-root="true"
   data-rd-collapsed-lines={collapsedLinesValue}
@@ -268,21 +278,26 @@ const renderedCodeLinesHtml = normalizedTokenLines
   data-rd-tab-hide-icon={parsedInCodeGroup && parsedHideLanguageIcon
     ? "true"
     : undefined}
+  style={codeThemeStyle}
 >
   <div
     class:list={[
-      "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",
+      "w-full max-w-full min-w-0 bg-(--rd-code-surface)",
+      parsedInCodeGroup
+        ? "rounded-tr-none rounded-xl"
+        : parsedFlushTop
+          ? "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 dark:border-neutral-800 dark:bg-neutral-900/60 dark:inset-shadow-neutral-900/80">
+        <div class="flex items-center justify-between gap-2 border-b-[0.5px] border-(--rd-code-tab-edge-border)">
           <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)" />
-              <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 dark:text-neutral-300">
+            <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)" />
+              <CodeTabEdge 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 py-1.5 text-xs font-medium text-neutral-700 dark:text-neutral-300 rounded-tl-xl border-t-[0.5px] border-l-[0.5px] border-(--rd-code-tab-edge-border)">
                 {shouldRenderLanguageIcon ? (
                   <CodeLanguageIcon
                     language={normalizedLanguage}
@@ -294,8 +309,8 @@ const renderedCodeLinesHtml = normalizedTokenLines
               </div>
             </div>
           </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 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)" />
             <CodeTabEdge className="pointer-events-none absolute -top-px right-full z-10 h-[calc(100%+2px)] rotate-y-180" />
             <button
               type="button"
@@ -323,7 +338,13 @@ const renderedCodeLinesHtml = normalizedTokenLines
     }
 
     <div
-      class="relative min-w-0"
+      class:list={[
+        "relative min-w-0 border-[0.5px] overflow-hidden border-(--rd-code-tab-edge-border)",
+        parsedFlushTop ? "rounded-b-xl" : "rounded-xl",
+        parsedFlushTop && "border-t-0",
+        parsedShowFilename && "border-t-0 rounded-t-none",
+        parsedInCodeGroup && "rounded-tl-xl border-0!",
+      ]}
       data-rd-code-group-panel={parsedInCodeGroup ? "true" : undefined}
     >
       {
@@ -331,7 +352,7 @@ const renderedCodeLinesHtml = normalizedTokenLines
           <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 dark:border-neutral-700/50 dark:bg-(--rd-code-surface) dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-200"
+              class="pointer-events-none inline-flex size-7 appearance-none items-center justify-center rounded-md bg-(--rd-code-surface)/40 backdrop-blur-sm text-neutral-500/80 outline-none ring-0 transition-colors duration-150 hover:text-neutral-700 focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 cursor-pointer group-hover/prose-code:pointer-events-auto group-focus-within/prose-code:pointer-events-auto dark:text-neutral-400 dark:hover:text-neutral-200 relative before:absolute before:inset-1 hover:before:inset-0 before:rounded-md hover:before:bg-neutral-900/4 dark:hover:before:bg-white/4 before:duration-150"
               data-rd-copy-trigger="true"
               data-rd-copy-content={encodedRaw}
               aria-label="Copy code"
@@ -344,7 +365,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 dark:text-green-400/90"
+                class="absolute size-3.5 stroke-3 origin-center scale-25 rotate-6 opacity-0 text-green-800/70 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"
               />
@@ -372,7 +393,7 @@ const renderedCodeLinesHtml = normalizedTokenLines
         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 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>
+          class="relative m-0 min-w-full bg-(--rd-code-surface) p-0 text-[13px] leading-6"><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>

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

@@ -4,33 +4,29 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
 ---
 
 <div
-  class="rd-prose-block group/prose-code-group not-prose relative w-full max-w-full min-w-0 shadow-xs rounded-xl"
+  class="rd-prose-block group/prose-code-group not-prose relative w-full max-w-full min-w-0 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 dark:border-neutral-800 dark:bg-neutral-900/60 dark:inset-shadow-neutral-900/80"
-  >
+  <div class="relative z-10 overflow-visible rounded-t-xl">
     <div class="flex min-w-0 items-end justify-between gap-2">
       <div class="min-w-0 flex-1 overflow-hidden rounded-t-xl">
         <div
           data-rd-code-group-tabs
-          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
             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 opacity-0 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) opacity-0 transition-[left,width,opacity] duration-200 ease-out"
           >
           </div>
         </div>
       </div>
 
       <div
-        class="relative h-9 w-5 shrink-0 rounded-tr-xl bg-white dark:bg-(--rd-code-surface)"
+        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-white dark: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 right-full z-10 h-[calc(100%+2px)] rotate-y-180"
@@ -49,7 +45,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 dark:text-green-400/90"
+            class="absolute size-3.5 stroke-3 origin-center scale-25 rotate-6 opacity-0 text-green-800/70 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"
           />
@@ -60,7 +56,8 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
 
   <div
     data-rd-code-group-content
-    class="relative min-w-0 overflow-hidden transition-[height] duration-300 ease-in-out"
+    class="relative min-w-0 overflow-hidden transition-[height] bg-(--rd-code-surface) rounded-xl rounded-tr-none border-[0.5px] border-(--rd-code-tab-edge-border)"
+    style="transition-duration: var(--rd-panel-transition-duration); transition-timing-function: var(--rd-panel-transition-easing);"
   >
     <slot />
   </div>
@@ -93,7 +90,20 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
       const prefersReducedMotion =
         typeof window.matchMedia === "function" &&
         window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-      const TRANSITION_DURATION_MS = prefersReducedMotion ? 0 : 300;
+      const rootStyles = window.getComputedStyle(document.documentElement);
+      const configuredDurationMs = Number.parseFloat(
+        rootStyles.getPropertyValue("--rd-panel-transition-duration-ms"),
+      );
+      const configuredEasing = rootStyles
+        .getPropertyValue("--rd-panel-transition-easing")
+        .trim();
+      const TRANSITION_DURATION_MS = prefersReducedMotion
+        ? 0
+        : Number.isFinite(configuredDurationMs)
+          ? configuredDurationMs
+          : 400;
+      const TRANSITION_EASING =
+        configuredEasing || "cubic-bezier(0.22, 1, 0.36, 1)";
 
       let activeIndex = 0;
       let transitionTimeoutId = null;
@@ -139,10 +149,14 @@ 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-muted-foreground transition-colors duration-150 focus:outline-none focus-visible:outline-none cursor-pointer ${hasTabIcon ? "gap-2" : ""}`;
+        tabButton.className =
+          "relative 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";
         tabButton.setAttribute("aria-label", filename);
         tabButton.setAttribute("data-rd-code-group-tab", String(index));
 
+        const tabContent = document.createElement("span");
+        tabContent.className = `pointer-events-none inline-flex h-[28px] items-center ${hasTabIcon ? "gap-2" : ""}`;
+
         let iconContainer = null;
         if (hasTabIcon) {
           iconContainer = document.createElement("span");
@@ -156,9 +170,10 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
         labelElement.textContent = filename;
 
         if (iconContainer) {
-          tabButton.appendChild(iconContainer);
+          tabContent.appendChild(iconContainer);
         }
-        tabButton.appendChild(labelElement);
+        tabContent.appendChild(labelElement);
+        tabButton.appendChild(tabContent);
         tabWrapper.appendChild(tabButton);
         tabsElement.appendChild(tabWrapper);
 
@@ -183,6 +198,7 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
       });
 
       contentElement.style.transitionDuration = `${TRANSITION_DURATION_MS}ms`;
+      contentElement.style.transitionTimingFunction = TRANSITION_EASING;
 
       const syncPill = () => {
         const activeTab = tabs[activeIndex]?.tabWrapper;
@@ -205,12 +221,11 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
       const updateTabButtonStates = () => {
         tabs.forEach(({ tabButton, iconContainer }, index) => {
           const isActive = index === activeIndex;
-          tabButton.classList.toggle("text-foreground", isActive);
-          tabButton.classList.toggle("text-muted-foreground", !isActive);
-
+          tabButton.classList.toggle("text-neutral-500/80", !isActive);
+          tabButton.classList.toggle("dark:text-neutral-400/80", !isActive);
           if (!iconContainer) return;
-          iconContainer.classList.toggle("opacity-100", isActive);
           iconContainer.classList.toggle("opacity-80", !isActive);
+          iconContainer.classList.toggle("grayscale-100", !isActive);
         });
         syncPill();
       };
@@ -269,15 +284,31 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
         activeItemResizeObserver.observe(activeItem);
       };
 
+      const setItemToTransitionPosition = (itemElement) => {
+        itemElement.style.position = "absolute";
+        itemElement.style.inset = "";
+        itemElement.style.top = "0";
+        itemElement.style.right = "0";
+        itemElement.style.bottom = "";
+        itemElement.style.left = "0";
+      };
+
       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.inset = "";
+          itemElement.style.top = isActive ? "" : "0";
+          itemElement.style.right = isActive ? "" : "0";
+          itemElement.style.bottom = isActive ? "" : "0";
+          itemElement.style.left = 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";
+          itemElement.style.transform = "translateX(0)";
+          itemElement.style.animation = "none";
+          itemElement.style.willChange = "auto";
           panelElement.style.transform = "translateX(0)";
           panelElement.style.animation = "none";
           panelElement.style.willChange = "auto";
@@ -313,8 +344,6 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
         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;
@@ -331,37 +360,35 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
           });
         }
 
-        previousItem.style.position = "absolute";
-        previousItem.style.inset = "0";
+        setItemToTransitionPosition(previousItem);
         previousItem.style.opacity = "1";
         previousItem.style.visibility = "visible";
         previousItem.style.pointerEvents = "none";
         previousItem.style.zIndex = "1";
+        previousItem.style.transform = "translateX(0)";
+        previousItem.style.willChange = "transform, opacity";
         previousPanel.style.transform = "translateX(0)";
-        previousPanel.style.willChange = "transform";
-        if (previousFrame) {
-          previousFrame.style.height = "100%";
-        }
-        previousPanel.style.animation =
+        previousPanel.style.animation = "none";
+        previousPanel.style.willChange = "auto";
+        previousItem.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`;
+            ? `rd-code-group-slide-out-to-left ${TRANSITION_DURATION_MS}ms ${TRANSITION_EASING} both`
+            : `rd-code-group-slide-out-to-right ${TRANSITION_DURATION_MS}ms ${TRANSITION_EASING} both`;
 
-        nextItem.style.position = "absolute";
-        nextItem.style.inset = "0";
+        setItemToTransitionPosition(nextItem);
         nextItem.style.opacity = "1";
         nextItem.style.visibility = "visible";
         nextItem.style.pointerEvents = "auto";
         nextItem.style.zIndex = "2";
+        nextItem.style.transform = "translateX(0)";
+        nextItem.style.willChange = "transform, opacity";
         nextPanel.style.transform = "translateX(0)";
-        nextPanel.style.willChange = "transform";
-        if (nextFrame) {
-          nextFrame.style.height = "100%";
-        }
-        nextPanel.style.animation =
+        nextPanel.style.animation = "none";
+        nextPanel.style.willChange = "auto";
+        nextItem.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`;
+            ? `rd-code-group-slide-in-from-right ${TRANSITION_DURATION_MS}ms ${TRANSITION_EASING} both`
+            : `rd-code-group-slide-in-from-left ${TRANSITION_DURATION_MS}ms ${TRANSITION_EASING} both`;
 
         transitionTimeoutId = window.setTimeout(() => {
           transitionTimeoutId = null;

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

@@ -60,16 +60,20 @@ const isInitiallyExpanded = shouldShowAllCode || totalLineCount <= visibleLines;
 ---
 
 <div
-  class="rd-prose-block rd-component-preview flex w-full max-w-full min-w-0 flex-col"
+  class="rd-prose-block rd-component-preview isolate flex w-full max-w-full min-w-0 flex-col"
   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 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!"
+    class="relative z-10 w-full max-w-full min-w-0 rounded-t-xl border-[0.5px] border-b-0 border-(--rd-code-tab-edge-border) bg-(--rd-code-surface) p-2"
   >
-    <slot />
+    <div
+      class="bg-white dark:bg-neutral-900/70 rounded-xl border-[0.5px] border-neutral-900/10 dark:border-white/8 p-4 xs:p-6 sm:p-9 sm:px-12 *:first:mt-0! *:last:mb-0! shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-8px_rgba(0,0,0,0.08)] dark:shadow-[0_-0.5px_1px_rgba(255,255,255,0.1),0_5px_12px_-4px_rgba(0,0,0,0.15)] overflow-x-auto"
+    >
+      <slot />
+    </div>
   </div>
   <div
-    class="rd-component-preview__code not-prose relative overflow-hidden rounded-b-xl bg-neutral-50 dark:bg-(--rd-code-surface)"
+    class="rd-component-preview__code not-prose relative z-0 overflow-hidden rounded-b-xl"
     data-rd-preview-expanded={isInitiallyExpanded ? "true" : "false"}
     style={{ "--rd-preview-visible-lines": String(visibleLines) }}
   >
@@ -82,16 +86,19 @@ const isInitiallyExpanded = shouldShowAllCode || totalLineCount <= visibleLines;
       hideLanguageIcon={hideLanguageIcon}
       highlightedLines={highlightedLines}
       collapsedLines={collapsedLines}
+      flushTop
     />
     <div
-      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"
+      class="rd-component-preview__overlay pointer-events-none absolute inset-0 hidden items-end justify-center rounded-b-xl pb-4"
       data-rd-preview-overlay
       aria-hidden="true"
     >
-      <div class="bg-white dark:bg-neutral-800">
+      <div
+        class="bg-white dark:bg-neutral-800 rounded-xl [corner-shape:superellipse(1.2)]"
+      >
         <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"
+          class="pointer-events-auto inline-flex h-8 items-center justify-center rounded-xl [corner-shape:superellipse(1.2)] border-[0.5px] border-neutral-900/10 dark:border-white/8 bg-linear-to-br from-white via-white/10 to-neutral-900/5 dark:from-white/7 dark:via-white/6 dark:to-white/2 px-3 text-sm font-medium text-neutral-600 hover:text-neutral-900 dark:text-neutral-300/90 hover:dark:text-neutral-200 transition-colors duration-200 hover:bg-neutral-50/80 cursor-pointer dark:hover:bg-neutral-700/30 shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-4px_rgba(0,0,0,0.08)] dark:shadow-[0_-0.5px_0px_rgba(255,255,255,0.15),0_5px_12px_-4px_rgba(0,0,0,0.6)]"
           data-rd-preview-expand
         >
           View code
@@ -174,36 +181,37 @@ const isInitiallyExpanded = shouldShowAllCode || totalLineCount <= visibleLines;
   .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]) {
     overflow-y: hidden;
-    transition: max-height 280ms cubic-bezier(0.22, 1, 0.36, 1);
+    transition:
+      max-height 280ms cubic-bezier(0.22, 1, 0.36, 1),
+      mask-image 180ms ease-out;
   }
 
   .rd-component-preview__code[data-rd-preview-expanded="false"]
     :global([data-rd-code-scroll-area]) {
-    max-height: calc(var(--rd-preview-visible-lines, 5) * 1.5rem + 1.25rem);
+    max-height: calc(var(--rd-preview-visible-lines, 5) * 1.5rem + 0.75rem);
+    -webkit-mask-image: linear-gradient(
+      to bottom,
+      rgb(0 0 0 / 80%) 0%,
+      rgb(0 0 0 / 32%) 82%,
+      transparent 110%
+    );
+    mask-image: linear-gradient(
+      to bottom,
+      rgb(0 0 0 / 80%) 0%,
+      rgb(0 0 0 / 32%) 82%,
+      transparent 110%
+    );
   }
 
   .rd-component-preview__code[data-rd-preview-expanded="true"]
     :global([data-rd-code-scroll-area]) {
     max-height: var(--rd-preview-expanded-height, 200rem);
+    -webkit-mask-image: none;
+    mask-image: none;
   }
 </style>