radiant-docs 0.1.47 → 0.1.48

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

@@ -244,14 +244,37 @@ const hasMultipleResponses = responseSnippetItems.length > 1;
     pillLeft: 0,
     pillWidth: 0,
     pillVisible: false,
+    previousSelected: null,
+    isTransitioning: false,
+    isManagedSlot: false,
+    transitionDirection: 1,
+    transitionDurationMs: 360,
+    transitionEasing: "cubic-bezier(0.22, 1, 0.36, 1)",
     tabSyncHandler: null,
+    transitionTimeoutId: null,
     copyTimeoutId: null,
     init() {
-      if (!this.hasMultiple) return;
-      const sync = () => this.syncPill();
+      this.isManagedSlot = !!this.$root?.closest("[data-snippet-slot]");
+      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.syncPill();
+        this.syncSnippetHeight();
+        if (!this.hasMultiple) return;
         this.$refs.tabList?.addEventListener("scroll", sync, {
           passive: true,
         });
@@ -275,13 +298,96 @@ const hasMultipleResponses = responseSnippetItems.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;
@@ -306,10 +412,10 @@ const hasMultipleResponses = responseSnippetItems.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 rounded-t-xl 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"
+        class="flex items-center justify-between gap-2 bg-(--rd-code-header-surface)"
       >
         {
           hasMultipleResponses ? (
@@ -320,7 +426,7 @@ const hasMultipleResponses = responseSnippetItems.length > 1;
               >
                 <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-1/2 z-0 h-[28px] -translate-y-1/2 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;'"
                 />
@@ -346,13 +452,13 @@ const hasMultipleResponses = responseSnippetItems.length > 1;
             </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-[7px] shrink-0 rounded-full"
                     class:list={[firstResponse.dotClass]}></span>
@@ -363,8 +469,8 @@ const hasMultipleResponses = responseSnippetItems.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"
           />
@@ -390,14 +496,21 @@ const hasMultipleResponses = responseSnippetItems.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] duration-[360ms] ease-[cubic-bezier(0.22,1,0.36,1)] [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"
+        >
           {
             responseSnippetItems.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>
@@ -408,3 +521,49 @@ const hasMultipleResponses = responseSnippetItems.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>

package/template/src/components/ui/CodeTabEdge.astro

@@ -5,18 +5,14 @@ interface Props {
 
 const { className = "" } = Astro.props;
 
-const idPrefix = `code_group_tab_edge_${Math.random().toString(36).slice(2, 9)}`;
-const mask0Id = `code_group_tab_edge_mask0_${idPrefix}`;
-const path1OutsideMaskId = `code_group_tab_edge_path_1_outside_1_${idPrefix}`;
-const path3OutsideMaskId = `code_group_tab_edge_path_3_outside_2_${idPrefix}`;
 const edgeBackgroundColor = "var(--rd-code-tab-edge-bg, #ffffff)";
 const edgeBorderColor = "var(--rd-code-tab-edge-border, #e5e5e5)";
 ---
 
 <svg
   width="60"
-  height="42"
-  viewBox="0 0 60 42"
+  height="38"
+  viewBox="0 0 60 38"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
   class:list={["block", className]}
@@ -24,58 +20,13 @@ const edgeBorderColor = "var(--rd-code-tab-edge-border, #e5e5e5)";
   aria-hidden="true"
   data-pagefind-ignore
 >
-  <mask
-    id={mask0Id}
-    maskUnits="userSpaceOnUse"
-    x="0"
-    y="-1"
-    width="60"
-    height="43"
-    style="mask-type:alpha"
-  >
-    <mask
-      id={path1OutsideMaskId}
-      maskUnits="userSpaceOnUse"
-      x="0"
-      y="-1"
-      width="60"
-      height="43"
-      fill="black"
-    >
-      <rect fill="white" y="-1" width="60" height="43"></rect>
-      <path
-        d="M1 0L8.0783 0C15.772 0 22.7836 4.41324 26.111 11.3501L34.8889 29.6498C38.2164 36.5868 45.228 41 52.9217 41H60H1L1 0Z"
-      ></path>
-    </mask>
-    <path
-      d="M1 0L8.0783 0C15.772 0 22.7836 4.41324 26.111 11.3501L34.8889 29.6498C38.2164 36.5868 45.228 41 52.9217 41H60H1L1 0Z"
-      fill={edgeBackgroundColor}></path>
-    <path
-      d="M1 0V-1H0V0L1 0ZM1 41H0V42H1V41ZM34.8889 29.6498L33.9873 30.0823L34.8889 29.6498ZM26.111 11.3501L27.0127 10.9177L26.111 11.3501ZM1 1H8.0783V-1H1V1ZM60 40H1V42H60V40ZM2 41V0L0 0L0 41H2ZM25.2094 11.7826L33.9873 30.0823L35.7906 29.2174L27.0127 10.9177L25.2094 11.7826ZM52.9217 42H60V40H52.9217V42ZM33.9873 30.0823C37.4811 37.3661 44.8433 42 52.9217 42V40C45.6127 40 38.9517 35.8074 35.7906 29.2174L33.9873 30.0823ZM8.0783 1C15.3873 1 22.0483 5.19257 25.2094 11.7826L27.0127 10.9177C23.5188 3.6339 16.1567 -1 8.0783 -1V1Z"
-      fill={edgeBorderColor}
-      mask={`url(#${path1OutsideMaskId})`}></path>
-  </mask>
-  <g mask={`url(#${mask0Id})`}>
-    <mask
-      id={path3OutsideMaskId}
-      maskUnits="userSpaceOnUse"
-      x="-1"
-      y="0.0244141"
-      width="60"
-      height="43"
-      fill="black"
-    >
-      <rect fill="white" x="-1" y="0.0244141" width="60" height="43"></rect>
-      <path
-        d="M0 1.02441H7.0783C14.772 1.02441 21.7836 5.43765 25.111 12.3746L33.8889 30.6743C37.2164 37.6112 44.228 42.0244 51.9217 42.0244H59H0L0 1.02441Z"
-      ></path>
-    </mask>
-    <path
-      d="M0 1.02441H7.0783C14.772 1.02441 21.7836 5.43765 25.111 12.3746L33.8889 30.6743C37.2164 37.6112 44.228 42.0244 51.9217 42.0244H59H0L0 1.02441Z"
-      fill={edgeBackgroundColor}></path>
-    <path
-      d="M0 1.02441L0 0.0244141H-1V1.02441H0ZM0 42.0244H-1V43.0244H0L0 42.0244ZM33.8889 30.6743L32.9873 31.1068L33.8889 30.6743ZM25.111 12.3746L26.0127 11.9421L25.111 12.3746ZM0 2.02441H7.0783V0.0244141H0L0 2.02441ZM59 41.0244H0L0 43.0244H59V41.0244ZM1 42.0244L1 1.02441H-1L-1 42.0244H1ZM24.2094 12.8071L32.9873 31.1068L34.7906 30.2418L26.0127 11.9421L24.2094 12.8071ZM51.9217 43.0244H59V41.0244H51.9217V43.0244ZM32.9873 31.1068C36.4811 38.3905 43.8433 43.0244 51.9217 43.0244V41.0244C44.6127 41.0244 37.9517 36.8318 34.7906 30.2418L32.9873 31.1068ZM7.0783 2.02441C14.3873 2.02441 21.0483 6.21699 24.2094 12.8071L26.0127 11.9421C22.5188 4.65831 15.1567 0.0244141 7.0783 0.0244141V2.02441Z"
-      fill={edgeBorderColor}
-      mask={`url(#${path3OutsideMaskId})`}></path>
-  </g>
+  <path
+    d="M0 0.75H7.0783C14.772 0.75 21.7836 4.571 25.111 10.578L33.8889 27.422C37.2164 33.429 44.228 37.25 51.9217 37.25H60V38H0V0.75Z"
+    fill={edgeBackgroundColor}></path>
+  <path
+    d="M0 0.75H7.0783C14.772 0.75 21.7836 4.571 25.111 10.578L33.8889 27.422C37.2164 33.429 44.228 37.25 51.9217 37.25H60"
+    fill="none"
+    stroke={edgeBorderColor}
+    stroke-width="0.5"
+    vector-effect="non-scaling-stroke"></path>
 </svg>

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

@@ -92,7 +92,7 @@ const hasTitle = typeof resolvedTitle === "string" && resolvedTitle.length > 0;
 
 <aside
   class:list={[
-    "rd-prose-block relative space-y-1 rounded-xl border-[0.5px] bg-neutral-50/70 border-neutral-900/8 px-4 py-3.5 dark:border-white/6 dark:bg-(--rd-code-surface) shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-6px_rgba(0,0,0,0.08)] dark:shadow-[0_-.5px_1px_rgba(255,255,255,0.15),0_5px_12px_-6px_rgba(0,0,0,0.2)]",
+    "rd-prose-block relative space-y-1 rounded-xl border-[0.5px] bg-neutral-50/70 border-neutral-900/8 dark:border-white/6 px-4 py-3.5 dark:bg-(--rd-code-surface) shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-6px_rgba(0,0,0,0.08)] dark:shadow-[0_-.5px_1px_rgba(255,255,255,0.15),0_5px_12px_-6px_rgba(0,0,0,0.2)]",
     accent ? "pl-6" : "pl-4",
   ]}
   role="note"

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

@@ -199,10 +199,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,12 +248,14 @@ 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("");
 ---
@@ -257,7 +263,7 @@ const renderedCodeLinesHtml = normalizedTokenLines
 <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",
+    parsedInCodeGroup ? "my-0" : "rd-prose-block",
   ]}
   data-rd-code-block-root="true"
   data-rd-collapsed-lines={collapsedLinesValue}
@@ -268,21 +274,22 @@ 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" : "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) bg-(--rd-code-header-surface)">
           <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 +301,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 +330,11 @@ const renderedCodeLinesHtml = normalizedTokenLines
     }
 
     <div
-      class="relative min-w-0"
+      class:list={[
+        "relative min-w-0 border-[0.5px] rounded-xl overflow-hidden border-(--rd-code-tab-edge-border)",
+        parsedShowFilename && "border-t-0 rounded-t-none",
+        parsedInCodeGroup && "rounded-tl-xl border-0!",
+      ]}
       data-rd-code-group-panel={parsedInCodeGroup ? "true" : undefined}
     >
       {
@@ -331,7 +342,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 +355,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 +383,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>