radiant-docs 0.1.60 → 0.1.61

package/package.json

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

package/template/src/components/OpenApiPage.astro

@@ -111,13 +111,29 @@ const formattedBodyDescription = bodyDescription
             />
           )
         }
-        <div class="xl:hidden space-y-6 mt-6">
-          <RequestSnippets
-            api={api}
-            method={route.openApiMethod}
-            path={route.openApiPath}
-          />
-          {responses && <ResponseSnippets responses={responses} />}
+        <div data-inline-snippet-stack class="xl:hidden space-y-6 mt-6">
+          <div
+            data-snippet-slot
+            data-inline-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}
+              path={route.openApiPath}
+            />
+          </div>
+          {
+            responses && (
+              <div
+                data-snippet-slot
+                data-inline-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>
+            )
+          }
         </div>
         <div class="mt-10">
           <!-- Request -->
@@ -157,10 +173,9 @@ const formattedBodyDescription = bodyDescription
                     />
                   )}
                   {hasCommonFields && (
-                    <div x-data="{ expanded: false }" class="mt-4">
+                    <div x-data="{ expanded: true }" class="mt-4">
                       <div
-                        class="w-full overflow-hidden rounded-xl border border-neutral-200 bg-white transition-colors duration-200 dark:border-neutral-800 dark:bg-(--rd-code-surface)"
-                        x-bind:class="expanded ? 'border-neutral-300 dark:border-neutral-700' : 'border-neutral-200 dark:border-neutral-800'"
+                        class="w-full overflow-hidden rounded-xl border-[0.5px] border-neutral-900/8 bg-white shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-6px_rgba(0,0,0,0.08)] transition-colors duration-200 dark:border-white/6 dark:bg-(--rd-code-surface) dark:shadow-[0_-.5px_1px_rgba(255,255,255,0.15),0_5px_12px_-6px_rgba(0,0,0,0.2)]"
                       >
                         <button
                           type="button"
@@ -201,10 +216,9 @@ const formattedBodyDescription = bodyDescription
                             <div class="mb-2 text-xs font-medium text-neutral-600 dark:text-neutral-400">
                               {variant.label}
                             </div>
-                            <div x-data="{ expanded: false }">
+                            <div x-data="{ expanded: true }">
                               <div
-                                class="w-full overflow-hidden rounded-lg border border-neutral-200 bg-white transition-colors duration-200 dark:border-neutral-800 dark:bg-(--rd-code-surface)"
-                                x-bind:class="expanded ? 'border-neutral-300 dark:border-neutral-700' : 'border-neutral-200 dark:border-neutral-800'"
+                                class="w-full overflow-hidden rounded-lg border-[0.5px] border-neutral-900/8 bg-white shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-6px_rgba(0,0,0,0.08)] transition-colors duration-200 dark:border-white/6 dark:bg-(--rd-code-surface) dark:shadow-[0_-.5px_1px_rgba(255,255,255,0.15),0_5px_12px_-6px_rgba(0,0,0,0.2)]"
                               >
                                 <button
                                   type="button"
@@ -485,4 +499,138 @@ const formattedBodyDescription = bodyDescription
     );
     applySlotHeights();
   }
+
+  const inlineStack = document.querySelector("[data-inline-snippet-stack]");
+
+  if (inlineStack instanceof HTMLElement) {
+    const inlineSlots = Array.from(
+      inlineStack.querySelectorAll("[data-inline-snippet-slot]"),
+    ).filter((slot) => slot instanceof HTMLElement);
+
+    const getInlineViewportHeight = () => {
+      if (window.visualViewport?.height) {
+        return Math.floor(window.visualViewport.height);
+      }
+      return Math.floor(window.innerHeight);
+    };
+
+    const getInlineSlotHeightCap = () => {
+      const viewportCap = Math.floor(getInlineViewportHeight() * 0.7);
+      return Math.max(0, Math.min(448, viewportCap));
+    };
+
+    const inlinePrefersReducedMotion =
+      typeof window.matchMedia === "function" &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const inlineSlotHeightTransitionMs = 360;
+    let isAnimatingInlineSlotHeights = false;
+    let inlineSlotHeightAnimationTimeoutId = null;
+
+    const resetInlineSlotHeights = () => {
+      for (const slot of inlineSlots) {
+        slot.style.height = "";
+        slot.style.maxHeight = "";
+      }
+    };
+
+    const applyInlineSlotHeights = ({ animate = false } = {}) => {
+      if (!inlineSlots.length) return;
+      if (isAnimatingInlineSlotHeights && !animate) return;
+
+      if (window.getComputedStyle(inlineStack).display === "none") {
+        resetInlineSlotHeights();
+        return;
+      }
+
+      const shouldAnimate = animate && !inlinePrefersReducedMotion;
+      const previousHeights = shouldAnimate
+        ? inlineSlots.map((slot) =>
+            Math.ceil(slot.getBoundingClientRect().height),
+          )
+        : [];
+      const previousTransitions = shouldAnimate
+        ? inlineSlots.map((slot) => slot.style.transition)
+        : [];
+      const heightCap = getInlineSlotHeightCap();
+
+      if (shouldAnimate) {
+        for (const slot of inlineSlots) {
+          slot.style.transition = "none";
+        }
+      }
+
+      for (const slot of inlineSlots) {
+        slot.style.height = "auto";
+        slot.style.maxHeight = "none";
+      }
+
+      const targetHeights = inlineSlots.map((slot) => {
+        const naturalHeight = Math.ceil(slot.scrollHeight);
+        return Math.min(naturalHeight, heightCap);
+      });
+
+      const setInlineSlotHeights = () => {
+        for (let i = 0; i < inlineSlots.length; i += 1) {
+          const height = targetHeights[i];
+          inlineSlots[i].style.height = `${height}px`;
+          inlineSlots[i].style.maxHeight = `${height}px`;
+        }
+      };
+
+      if (!shouldAnimate) {
+        setInlineSlotHeights();
+        return;
+      }
+
+      isAnimatingInlineSlotHeights = true;
+      if (inlineSlotHeightAnimationTimeoutId) {
+        window.clearTimeout(inlineSlotHeightAnimationTimeoutId);
+      }
+
+      for (let i = 0; i < inlineSlots.length; i += 1) {
+        const height = previousHeights[i];
+        inlineSlots[i].style.height = `${height}px`;
+        inlineSlots[i].style.maxHeight = `${height}px`;
+      }
+
+      void inlineStack.offsetHeight;
+
+      for (let i = 0; i < inlineSlots.length; i += 1) {
+        inlineSlots[i].style.transition = previousTransitions[i];
+      }
+
+      window.requestAnimationFrame(setInlineSlotHeights);
+
+      inlineSlotHeightAnimationTimeoutId = window.setTimeout(() => {
+        isAnimatingInlineSlotHeights = false;
+        inlineSlotHeightAnimationTimeoutId = null;
+        applyInlineSlotHeights();
+      }, inlineSlotHeightTransitionMs + 80);
+    };
+
+    let inlineSlotAnimationFrameId = null;
+    const scheduleInlineSlotHeights = (options = {}) => {
+      if (inlineSlotAnimationFrameId) {
+        window.cancelAnimationFrame(inlineSlotAnimationFrameId);
+      }
+
+      inlineSlotAnimationFrameId = window.requestAnimationFrame(() => {
+        inlineSlotAnimationFrameId = window.requestAnimationFrame(() => {
+          inlineSlotAnimationFrameId = null;
+          applyInlineSlotHeights(options);
+        });
+      });
+    };
+
+    const inlineResizeObserver = new ResizeObserver(scheduleInlineSlotHeights);
+    inlineResizeObserver.observe(inlineStack);
+
+    window.addEventListener("resize", scheduleInlineSlotHeights);
+    window.visualViewport?.addEventListener("resize", scheduleInlineSlotHeights);
+    window.addEventListener(
+      "rd:snippet-content-change",
+      () => scheduleInlineSlotHeights({ animate: true }),
+    );
+    scheduleInlineSlotHeights();
+  }
 </script>

package/template/src/components/chat/AssistantEmbedPanel.tsx

@@ -1963,7 +1963,7 @@ export default function AssistantEmbedPanel({
           <AssistantPanelIcon
             color={launcherIconColor}
             imageSrc={launcherIconImageSrc}
-            className="assistant-embed-header-icon inline-flex size-9 shrink-0 items-center justify-center rounded-md dark:border-[0.5px] border-neutral-900/7 bg-radial from-neutral-700/5 dark:from-white/7 to-neutral-900/7 dark:to-white/5 to-60% text-neutral-900 dark:border-white/7 dark:text-neutral-50 [&_img]:block [&_img]:size-5.5 [&_img]:object-contain [&_svg]:static [&_svg]:block [&_svg]:size-5 [&_svg]:transform-none [&_svg]:opacity-100"
+            className="assistant-embed-header-icon inline-flex size-9 shrink-0 items-center justify-center rounded-md dark:border-[0.5px] border-neutral-900/7 bg-neutral-700/7 dark:bg-white/6 text-neutral-900 dark:border-white/7 dark:text-neutral-50 [&_img]:block [&_img]:size-5.5 [&_img]:object-contain [&_svg]:static [&_svg]:block [&_svg]:size-5 [&_svg]:transform-none [&_svg]:opacity-100"
           />
           <div className="min-w-0 space-y-px">
             <p className="truncate text-sm font-medium leading-3.5 text-neutral-900 dark:text-neutral-50">
@@ -2198,14 +2198,25 @@ export default function AssistantEmbedPanel({
             </p>
             <button
               type="button"
-              className="mt-1 inline-flex items-center gap-1.5 rounded-md border border-neutral-900/8 bg-white px-2.5 py-1.5 text-[13px] font-medium text-neutral-700 shadow-xs transition hover:bg-neutral-50 dark:border-white/10 dark:bg-white/5 dark:text-neutral-200 dark:hover:bg-white/10 cursor-pointer"
+              className="mt-1 inline-flex items-center gap-1.5 rounded-md border border-neutral-900/8 bg-white px-2.5 py-1.5 text-[13px] font-medium text-neutral-700 shadow-xs transition hover:bg-neutral-50/80 dark:border-white/10 dark:bg-white/5 dark:text-neutral-200 dark:hover:bg-white/10 cursor-pointer"
               onClick={handleUnavailableBack}
             >
-              <Icon
-                icon="lucide:arrow-left"
-                className="size-3.5"
-                aria-hidden="true"
-              />
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="14px"
+                height="14px"
+                viewBox="0 0 24 24"
+              >
+                <path d="M0 0h24v24H0z" fill="none" />
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="m12 19l-7-7l7-7m7 7H5"
+                />
+              </svg>
               Back
             </button>
           </div>

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

@@ -1,6 +1,6 @@
 ---
 import { Icon } from "astro-icon/components";
-import { methodColors } from "../../lib/utils";
+import { methodTagColors } from "../../lib/utils";
 import type { OpenApiRoute } from "../../lib/routes";
 
 interface Props {
@@ -9,18 +9,26 @@ interface Props {
 }
 
 const { route, serverUrl } = Astro.props;
+const methodColor =
+  methodTagColors[route.openApiMethod.toLowerCase()] ?? methodTagColors.get;
+
+const pathParts = route.openApiPath
+  .split(/(\{[^}]+\})/g)
+  .filter(Boolean)
+  .map((text) => ({
+    text,
+    isParam: text.startsWith("{") && text.endsWith("}"),
+  }));
 ---
 
 <div
-  class="min-w-0 flex-1 flex items-center p-1 border border-neutral-200 bg-white rounded-xl shadow-xs overflow-hidden dark:border-neutral-800 dark:bg-(--rd-code-surface)"
+  class="min-w-0 flex-1 flex items-center p-1 border-[0.5px] border-neutral-900/8 bg-white rounded-xl shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-6px_rgba(0,0,0,0.08)] overflow-hidden dark:border-white/6 dark:bg-(--rd-code-surface) dark:shadow-[0_-.5px_1px_rgba(255,255,255,0.15),0_5px_12px_-6px_rgba(0,0,0,0.2)]"
 >
   <span
-    class:list={[
-      "shrink-0 inline-block px-1.5 ml-1 text-sm font-semibold rounded-md uppercase border",
-      methodColors[route.openApiMethod.toLowerCase()] || methodColors.get,
-    ]}
+    class="rd-endpoint-method-tag shrink-0 inline-block px-1.5 ml-1 text-sm font-semibold rounded-md uppercase border"
+    style={`--rd-tag-color-light:${methodColor};--rd-tag-color-dark:${methodColor};`}
   >
-    {route.openApiMethod}
+    {route.openApiMethod.toUpperCase()}
   </span>
   <code
     class="group flex-1 mx-2 h-[30px] flex items-center text-[13px] text-neutral-600 dark:text-neutral-300 min-w-0 relative cursor-pointer"
@@ -41,8 +49,23 @@ const { route, serverUrl } = Astro.props;
                 }
               }`
   >
-    <span class="truncate min-w-0 flex-1">
-      {route.openApiPath}
+    <span
+      class="flex min-w-0 flex-1 items-center overflow-hidden whitespace-nowrap"
+    >
+      {
+        pathParts.map((part) =>
+          part.isParam ? (
+            <span
+              class="rd-endpoint-path-param inline-block rounded-sm border p-px leading-none"
+              style={`--rd-tag-color-light:${methodColor};--rd-tag-color-dark:${methodColor};`}
+            >
+              {part.text}
+            </span>
+          ) : (
+            <span>{part.text}</span>
+          ),
+        )
+      }
     </span>
     <div
       class="absolute right-0 top-1/2 -translate-y-1/2 flex items-center gap-1 text-[12px] px-1.5 py-px bg-white border border-neutral-200 rounded-md duration-200 opacity-0 scale-75 group-hover:scale-100 group-hover:opacity-100 group-hover:duration-200 group-hover:ease-out group-hover:delay-75 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300"
@@ -62,3 +85,25 @@ const { route, serverUrl } = Astro.props;
   </code>
   <slot />
 </div>
+
+<style>
+  .rd-endpoint-method-tag,
+  .rd-endpoint-path-param {
+    --rd-tag-color: var(--rd-tag-color-light, var(--color-theme));
+    background-color: color-mix(in oklab, var(--rd-tag-color) 8%, transparent);
+    border-color: color-mix(in oklab, var(--rd-tag-color) 0%, transparent);
+    color: color-mix(in oklab, var(--rd-tag-color) 95%, transparent);
+  }
+
+  :global(.dark) .rd-endpoint-method-tag,
+  :global(.dark) .rd-endpoint-path-param,
+  :global([data-theme="dark"]) .rd-endpoint-method-tag,
+  :global([data-theme="dark"]) .rd-endpoint-path-param {
+    --rd-tag-color: var(
+      --rd-tag-color-dark,
+      var(--rd-tag-color-light, var(--color-theme))
+    );
+    background-color: color-mix(in oklab, var(--rd-tag-color) 12%, transparent);
+    color: color-mix(in oklab, var(--rd-tag-color) 85%, transparent);
+  }
+</style>

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

@@ -587,7 +587,7 @@ const sectionVariantFieldNames = Object.fromEntries(
             }
 
             return (
-              <div class="border border-neutral-200 bg-white shadow-xs rounded-xl p-4 pb-0 dark:border-neutral-800 dark:bg-(--rd-code-surface) [&_[role='region']]:border-b-0">
+              <div class="border-[0.5px] border-neutral-900/8 bg-white shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-6px_rgba(0,0,0,0.08)] rounded-xl p-4 pb-0 dark:border-white/6 dark:bg-(--rd-code-surface) dark:shadow-[0_-.5px_1px_rgba(255,255,255,0.15),0_5px_12px_-6px_rgba(0,0,0,0.2)] [&_[role='region']]:border-b-0">
                 <Accordion title={headers[key]} defaultOpen titleSize="xl">
                   {key === "body" && formattedBodyDescription && (
                     <div

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

@@ -593,7 +593,12 @@ const hasMultipleRequests = requestSnippetItems.length > 1;
         </div>
       </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
+        class:list={[
+          "relative min-h-0 min-w-0 flex-1 overflow-hidden rounded-b-xl border-[0.5px] border-(--rd-code-tab-edge-border) bg-(--rd-code-surface)",
+          hasMultipleRequests && "rounded-tl-xl",
+        ]}
+      >
         <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"

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

@@ -46,7 +46,9 @@ function countImmediateChildren(field: ResponseField): number {
 }
 ---
 
-<div class="flex flex-col gap-4 divide-y divide-neutral-100 dark:divide-neutral-800 *:pb-3 *:last:pb-0">
+<div
+  class="flex flex-col gap-4 divide-y divide-neutral-100 dark:divide-neutral-800 *:pb-3 *:last:pb-0"
+>
   {
     fields.map((field) => {
       const revealedFieldCount = countImmediateChildren(field);
@@ -69,10 +71,7 @@ function countImmediateChildren(field: ResponseField): number {
             exclusiveMaximum={field.exclusiveMaximum}
           />
           {hasExpandableContent && (
-            <div
-              class="mt-2 w-full overflow-hidden rounded-lg border border-neutral-200 bg-white transition-colors duration-200 dark:border-neutral-800 dark:bg-(--rd-code-surface)"
-              x-bind:class="expanded ? 'border-neutral-300 dark:border-neutral-700' : 'border-neutral-200 dark:border-neutral-800'"
-            >
+            <div class="mt-2.5 w-full overflow-hidden rounded-lg border-[0.5px] border-neutral-900/8 bg-white shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-6px_rgba(0,0,0,0.08)] transition-colors duration-200 dark:border-white/6 dark:bg-(--rd-code-surface) dark:shadow-[0_-.5px_1px_rgba(255,255,255,0.15),0_5px_12px_-6px_rgba(0,0,0,0.2)]">
               <button
                 type="button"
                 x-on:click="expanded = !expanded"
@@ -83,19 +82,21 @@ function countImmediateChildren(field: ResponseField): number {
                   <ListChevronsToggle class="size-4 shrink-0 text-neutral-400 group-hover:text-neutral-600 transition duration-200 dark:text-neutral-500 dark:group-hover:text-neutral-300" />
                   <span>
                     {revealedFieldCount}{" "}
-                    {revealedFieldCount === 1
-                      ? "field"
-                      : "fields"}
+                    {revealedFieldCount === 1 ? "field" : "fields"}
                   </span>
                 </span>
               </button>
               <div x-show="expanded" x-collapse x-cloak>
                 <div class="border-t border-neutral-100 px-3 py-3 dark:border-neutral-800">
-                  {field.nested && field.nested.length > 0 && nestedFieldCount > 0 && (
-                    <Astro.self fields={field.nested} depth={depth + 1} />
-                  )}
+                  {field.nested &&
+                    field.nested.length > 0 &&
+                    nestedFieldCount > 0 && (
+                      <Astro.self fields={field.nested} depth={depth + 1} />
+                    )}
                   {field.variants && field.variants.length > 0 && (
-                    <div class:list={["space-y-2", nestedFieldCount > 0 && "mt-3"]}>
+                    <div
+                      class:list={["space-y-2", nestedFieldCount > 0 && "mt-3"]}
+                    >
                       <p class="text-xs text-neutral-500 dark:text-neutral-400">
                         {field.variantType === "anyOf"
                           ? "One or more variants may apply."
@@ -107,7 +108,10 @@ function countImmediateChildren(field: ResponseField): number {
                             <div class="mb-2 text-xs font-medium text-neutral-600 dark:text-neutral-400">
                               {variant.label}
                             </div>
-                            <Astro.self fields={variant.fields} depth={depth + 1} />
+                            <Astro.self
+                              fields={variant.fields}
+                              depth={depth + 1}
+                            />
                           </div>
                           {field.variantType === "oneOf" &&
                             index < field.variants.length - 1 && (

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

@@ -771,10 +771,9 @@ Object.entries(responses)
             {response.variants && response.variants.length > 0 && (
               <p class="mb-2 text-xs text-neutral-500 dark:text-neutral-400">Common fields</p>
             )}
-            <div x-data="{ expanded: false }">
+            <div x-data="{ expanded: true }">
               <div
-                class="w-full overflow-hidden rounded-xl border border-neutral-200 bg-white transition-colors duration-200 dark:border-neutral-800 dark:bg-(--rd-code-surface)"
-                x-bind:class="expanded ? 'border-neutral-300 dark:border-neutral-700' : 'border-neutral-200 dark:border-neutral-800'"
+                class="w-full overflow-hidden rounded-xl border-[0.5px] border-neutral-900/8 bg-white shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-6px_rgba(0,0,0,0.08)] transition-colors duration-200 dark:border-white/6 dark:bg-(--rd-code-surface) dark:shadow-[0_-.5px_1px_rgba(255,255,255,0.15),0_5px_12px_-6px_rgba(0,0,0,0.2)]"
               >
                 <button
                   type="button"
@@ -814,10 +813,9 @@ Object.entries(responses)
                   <div class="mb-2 text-xs font-medium text-neutral-600 dark:text-neutral-400">
                     {variant.label}
                   </div>
-                  <div x-data="{ expanded: false }">
+                  <div x-data="{ expanded: true }">
                     <div
-                      class="w-full overflow-hidden rounded-lg border border-neutral-200 bg-white transition-colors duration-200 dark:border-neutral-800 dark:bg-(--rd-code-surface)"
-                      x-bind:class="expanded ? 'border-neutral-300 dark:border-neutral-700' : 'border-neutral-200 dark:border-neutral-800'"
+                      class="w-full overflow-hidden rounded-lg border-[0.5px] border-neutral-900/8 bg-white shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-6px_rgba(0,0,0,0.08)] transition-colors duration-200 dark:border-white/6 dark:bg-(--rd-code-surface) dark:shadow-[0_-.5px_1px_rgba(255,255,255,0.15),0_5px_12px_-6px_rgba(0,0,0,0.2)]"
                     >
                       <button
                         type="button"

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

@@ -513,7 +513,12 @@ const hasMultipleResponses = responseSnippetItems.length > 1;
         </div>
       </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
+        class:list={[
+          "relative min-h-0 min-w-0 flex-1 overflow-hidden rounded-b-xl border-[0.5px] border-(--rd-code-tab-edge-border) bg-(--rd-code-surface)",
+          hasMultipleResponses && "rounded-tl-xl",
+        ]}
+      >
         <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"

package/template/src/components/sidebar/SidebarEndpointLink.astro

@@ -1,6 +1,6 @@
 ---
 import Tag from "../ui/Tag.astro";
-import { methodColors } from "../../lib/utils";
+import { methodTagColors } from "../../lib/utils";
 import { getOpenApiEndpointRouteHref } from "../../lib/routes";
 import type { NavTag } from "../../lib/validation";
 
@@ -34,6 +34,10 @@ const href = await getOpenApiEndpointRouteHref({
 
 // Use summary for title, fallback to method + path
 const text = title || summary || `${normalizedMethod.toUpperCase()} ${pathStr}`;
+const methodLabel = (
+  normalizedMethod !== "delete" ? normalizedMethod : "del"
+).toUpperCase();
+const methodColor = methodTagColors[normalizedMethod] ?? methodTagColors.get;
 
 // Normalize paths for comparison (remove trailing slashes)
 const currentPath = Astro.url.pathname.replace(/\/$/, "");
@@ -44,22 +48,15 @@ const isActive = currentPath === targetPath;
 <a
   href={href}
   class:list={[
-    "flex items-center px-2 py-[7px] text-sm relative z-0 before:-z-10 before:absolute before:inset-x-0 before:inset-y-px before:rounded-md before:duration-150",
+    "flex items-center gap-2 px-2 py-[7px] text-sm relative z-0 before:-z-10 before:absolute before:inset-x-0 before:inset-y-px before:rounded-md before:duration-150",
     isActive
       ? "before:bg-neutral-200/50 dark:before:bg-neutral-800 text-neutral-900 dark:text-neutral-200"
       : "text-neutral-600 dark:text-neutral-400 hover:before:bg-neutral-100/70 dark:hover:before:bg-neutral-800/50 hover:text-neutral-900 dark:hover:text-neutral-300",
   ]}
 >
-  <span
-    class:list={[
-      "px-1 py-px mr-1.5 border rounded-md text-[10px] font-semibold uppercase",
-      methodColors[normalizedMethod] ?? methodColors.get,
-    ]}
-  >
-    {normalizedMethod !== "delete" ? normalizedMethod : "del"}
-  </span>
-  <div class="flex items-center gap-2 min-w-0">
-    <span>{text}</span>
+  <div class="flex min-w-0 flex-1 items-center gap-2">
+    <span class="min-w-0 truncate">{text}</span>
     {tag && <Tag tag={tag} />}
   </div>
+  <Tag color={methodColor}>{methodLabel}</Tag>
 </a>

package/template/src/components/sidebar/SidebarOpenApi.astro

@@ -31,7 +31,7 @@ const openApiDoc = await loadOpenApiSpec(openApiPath);
 
 // Helper function to parse endpoint string
 function parseEndpointString(
-  endpointStr: string
+  endpointStr: string,
 ): { method: string; path: string } | null {
   const trimmed = endpointStr.trim();
   const parts = trimmed.split(/\s+/);
@@ -57,7 +57,7 @@ function shouldIncludeEndpoint(
   method: string,
   pathStr: string,
   include?: string[],
-  exclude?: string[]
+  exclude?: string[],
 ): boolean {
   const normalizedMethod = method.toUpperCase();
   const normalizedPath = pathStr.toLowerCase();
@@ -168,13 +168,7 @@ const sortedTagGroups: TagGroup[] = Array.from(tagGroups.entries())
     // If there are tagged groups, render them (including "Other" if it exists)
     hasTaggedGroups
       ? sortedTagGroups.map((group, index) => (
-          <li
-            class={
-              index > 0
-                ? "mt-5 pt-[25px] relative before:absolute before:top-0 before:inset-x-0 before:h-px before:bg-linear-[90deg,transparent,var(--color-neutral-200)_20%,var(--color-neutral-200)_80%,transparent] dark:before:bg-linear-[90deg,transparent,var(--color-neutral-700)_20%,var(--color-neutral-700)_80%,transparent]"
-                : ""
-            }
-          >
+          <li class="my-8 first:mt-0 last:mb-0">
             <div class="text-sm font-semibold mb-2 flex items-center gap-2 px-2">
               {group.tag}
             </div>

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

@@ -1,5 +1,6 @@
 ---
-import { renderMarkdown } from "../../lib/utils";
+import { methodTagColors, renderMarkdown } from "../../lib/utils";
+import Tag from "./Tag.astro";
 
 interface Props {
   name: string;
@@ -73,6 +74,9 @@ if (hasMinLength && hasMaxLength) {
 } else if (hasMaxLength) {
   stringLengthLabel = `length <= ${maxLength}`;
 }
+
+const codeChipClass =
+  "mx-px px-[5px] pr-1 bg-neutral-100/80 text-neutral-700/90 rounded-sm leading-none font-mono font-normal border border-neutral-900/4 after:hidden before:hidden dark:bg-neutral-800/90 dark:text-neutral-200/90 dark:border-white/3";
 ---
 
 <div class="space-y-3">
@@ -80,15 +84,14 @@ if (hasMinLength && hasMaxLength) {
     <span class="font-medium leading-4">
       {name}
     </span>
-    <code
-      class="text-[10px] font-medium text-neutral-500 border border-neutral-200/80 bg-neutral-50 px-1 rounded-sm dark:text-neutral-300 dark:border-neutral-700/70 dark:bg-neutral-900/70"
-      >{type}</code
-    >
+    <code class:list={["text-[10px] py-[1.5px]", codeChipClass]}>
+      {type}
+    </code>
     {
       required && (
-        <div class="text-red-700/70 bg-red-50 border border-red-700/10 rounded-full px-1.5 text-[10px] font-mono font-medium leading-none py-0.5 pb-0.5 h-fit dark:text-red-300 dark:bg-red-950/40 dark:border-red-900/40">
+        <Tag color={methodTagColors.delete} class="text-[10px]!">
           required
-        </div>
+        </Tag>
       )
     }
     {
@@ -114,14 +117,14 @@ if (hasMinLength && hasMaxLength) {
         <span class="font-medium text-xs">Options:</span>
         {enumValues.map((v, i, a) => {
           return (
-            <div class="flex">
-              <span class="text-[11px] font-medium text-neutral-600 border border-neutral-200 bg-neutral-50 px-1 py-px rounded-md dark:text-neutral-300 dark:border-neutral-700 dark:bg-neutral-900/70">
-                <code>{v}</code>
-              </span>
+            <div class="inline-flex items-center leading-none">
+              <code class:list={["text-[11px] py-[2px]", codeChipClass]}>
+                {v}
+              </code>
               {a.length - 2 === i ? (
-                <span class="ml-1"> or </span>
+                <span class="ml-1 leading-none"> or </span>
               ) : (
-                a.length - 1 !== i && <span>, </span>
+                a.length - 1 !== i && <span class="leading-none">, </span>
               )}
             </div>
           );
@@ -133,7 +136,7 @@ if (hasMinLength && hasMaxLength) {
     numericRangeLabel && (
       <div class="text-sm">
         <span class="font-medium text-xs">Range:</span>
-        <code class="text-[11px] font-medium text-neutral-600 border border-neutral-200 bg-neutral-50 px-1 py-px rounded-md dark:text-neutral-300 dark:border-neutral-700 dark:bg-neutral-900/70">
+        <code class:list={["text-[11px]", codeChipClass]}>
           {numericRangeLabel}
         </code>
       </div>
@@ -143,7 +146,7 @@ if (hasMinLength && hasMaxLength) {
     stringLengthLabel && (
       <div class="text-sm">
         <span class="font-medium text-xs">Length:</span>
-        <code class="text-[11px] font-medium text-neutral-600 border border-neutral-200 bg-neutral-50 px-1 py-px rounded-md dark:text-neutral-300 dark:border-neutral-700 dark:bg-neutral-900/70">
+        <code class:list={["text-[11px]", codeChipClass]}>
           {stringLengthLabel}
         </code>
       </div>

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

@@ -8,9 +8,10 @@ import {
 interface Props {
   tag?: NavTag;
   color?: string | ThemeColorByMode;
+  class?: string;
 }
 
-const { tag, color } = Astro.props;
+const { tag, color, class: className } = Astro.props;
 const config = await getConfig();
 
 function getTagText(value: NavTag | undefined): string | undefined {
@@ -51,7 +52,10 @@ const colorStyle = resolvedColor
 ---
 
 <span
-  class="rd-tag text-[9px] border px-[5px] py-[2px] rounded-full tracking-wide leading-none font-medium shrink-0"
+  class:list={[
+    "rd-tag text-[9px] border px-[5px] py-[2px] rounded-full tracking-wide leading-none font-medium shrink-0",
+    className,
+  ]}
   style={colorStyle}
 >
   {text ? text : <slot />}
@@ -64,4 +68,14 @@ const colorStyle = resolvedColor
     border-color: color-mix(in oklab, var(--rd-tag-color) 0%, transparent);
     color: color-mix(in oklab, var(--rd-tag-color) 95%, transparent);
   }
+
+  :global(.dark) .rd-tag,
+  :global([data-theme="dark"]) .rd-tag {
+    --rd-tag-color: var(
+      --rd-tag-color-dark,
+      var(--rd-tag-color-light, var(--color-theme))
+    );
+    background-color: color-mix(in oklab, var(--rd-tag-color) 12%, transparent);
+    color: color-mix(in oklab, var(--rd-tag-color) 85%, transparent);
+  }
 </style>

package/template/src/lib/utils.ts

@@ -44,6 +44,17 @@ export const methodColors: Record<string, string> = {
     "bg-red-50 dark:bg-red-900 text-red-700/70 dark:text-red-700/10 border-red-700/10",
 };
 
+export const methodTagColors: Record<string, string> = {
+  get: "#1d4ed8",
+  post: "#15803d",
+  put: "#c2410c",
+  patch: "#a16207",
+  delete: "#b91c1c",
+  head: "#4338ca",
+  options: "#7e22ce",
+  trace: "#3f3f46",
+};
+
 export function deriveTitleFromEntryId(filePath: string): string {
   const filename = path.basename(filePath);
   const raw = filename.replace(/\.(md|mdx)$/i, "");