radiant-docs 0.1.60 → 0.1.62

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/components/user/Accordion.astro

@@ -70,7 +70,7 @@ const TITLE_SIZE_CLASS = {
     <div class="min-h-0 overflow-hidden">
       <div
         data-rd-accordion-content-inner
-        class="prose-rules max-w-none! *:max-w-none! pb-4!"
+        class="prose-rules max-w-none! pb-4!"
       >
         <slot />
       </div>

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

@@ -108,7 +108,7 @@ const hasTitle = typeof resolvedTitle === "string" && resolvedTitle.length > 0;
             {resolvedTitle}
           </div>
         </div>
-        <div class="prose-rules prose-sm! max-w-none! *:max-w-none! text-neutral-700 dark:text-neutral-300">
+        <div class="prose-rules max-w-none! text-sm! leading-6! text-neutral-700 dark:text-neutral-300">
           <slot />
         </div>
       </>
@@ -129,7 +129,7 @@ const hasTitle = typeof resolvedTitle === "string" && resolvedTitle.length > 0;
             class="mt-0.5 shrink-0 border border-white"
           />
         ) : null}
-        <div class="prose-rules prose-sm! max-w-none! min-w-0 flex-1 *:max-w-none! text-neutral-700 dark:text-neutral-300">
+        <div class="prose-rules max-w-none! min-w-0 flex-1 text-sm! leading-6! text-neutral-700 dark:text-neutral-300">
           <slot />
         </div>
       </div>

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

@@ -258,7 +258,7 @@ const renderedCodeLinesHtml = normalizedTokenLines
       ? ' data-rd-code-line-highlighted="true"'
       : "";
 
-    return `<span class="flex min-w-full"${lineHighlightAttribute}>${lineNumberHtml}<span class="${lineContentClass}">${tokenHtml}</span></span>`;
+    return `<span class="flex w-max min-w-full"${lineHighlightAttribute}>${lineNumberHtml}<span class="${lineContentClass}">${tokenHtml}</span></span>`;
   })
   .join("");
 ---
@@ -339,7 +339,7 @@ const renderedCodeLinesHtml = normalizedTokenLines
 
     <div
       class:list={[
-        "relative min-w-0 border-[0.5px] overflow-hidden border-(--rd-code-tab-edge-border)",
+        "relative min-w-0 border-[0.5px] overflow-hidden border-(--rd-code-tab-edge-border) bg-(--rd-code-surface)",
         parsedFlushTop ? "rounded-b-xl" : "rounded-xl",
         parsedFlushTop && "border-t-0",
         parsedShowFilename && "border-t-0 rounded-t-none",
@@ -349,10 +349,10 @@ const renderedCodeLinesHtml = normalizedTokenLines
     >
       {
         !parsedInCodeGroup && !parsedShowFilename ? (
-          <div class="pointer-events-none absolute right-2 top-2 z-20">
+          <div class="pointer-events-none absolute right-2 top-2 z-20 [@media(pointer:coarse)]:pointer-events-auto">
             <button
               type="button"
-              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"
+              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 [@media(pointer:coarse)]: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"
@@ -390,10 +390,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 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"
+        class="relative overflow-x-auto overscroll-x-contain bg-(--rd-code-surface) [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-(--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>
+          class="relative m-0 w-max min-w-full bg-(--rd-code-surface) p-0 text-[13px] leading-6"><code data-rd-code-theme class="block w-max min-w-full py-2.5 font-mono text-neutral-800 dark:text-neutral-200"><Fragment set:html={renderedCodeLinesHtml} /></code></pre>
       </div>
     </div>
   </div>
@@ -432,6 +432,52 @@ const renderedCodeLinesHtml = normalizedTokenLines
         checkIcon.classList.add("scale-50", "opacity-0", "rotate-6");
       };
 
+      const fallbackCopy = (text) => {
+        try {
+          const textarea = document.createElement("textarea");
+          textarea.value = text;
+          textarea.setAttribute("readonly", "");
+          textarea.style.position = "fixed";
+          textarea.style.top = "0";
+          textarea.style.left = "0";
+          textarea.style.width = "1px";
+          textarea.style.height = "1px";
+          textarea.style.padding = "0";
+          textarea.style.border = "0";
+          textarea.style.opacity = "0";
+          textarea.style.fontSize = "16px";
+          textarea.style.pointerEvents = "none";
+          document.body.appendChild(textarea);
+
+          try {
+            textarea.focus({ preventScroll: true });
+          } catch {
+            textarea.focus();
+          }
+          textarea.select();
+          textarea.setSelectionRange(0, textarea.value.length);
+
+          const copied = document.execCommand("copy");
+          document.body.removeChild(textarea);
+          return copied;
+        } catch {
+          return false;
+        }
+      };
+
+      const copyToClipboard = async (text) => {
+        try {
+          if (navigator.clipboard?.writeText) {
+            await navigator.clipboard.writeText(text);
+            return true;
+          }
+        } catch {
+          // Fallback below when the async Clipboard API is unavailable or blocked.
+        }
+
+        return fallbackCopy(text);
+      };
+
       copyButtons.forEach((button) => {
         let timeoutId = null;
         button.addEventListener("click", async () => {
@@ -440,7 +486,12 @@ const renderedCodeLinesHtml = normalizedTokenLines
           const copyValue = decodeURIComponent(encodedCopyValue);
 
           try {
-            await navigator.clipboard.writeText(copyValue);
+            const copied = await copyToClipboard(copyValue);
+            if (!copied) {
+              setCopiedState(button, false);
+              return;
+            }
+
             setCopiedState(button, true);
 
             if (timeoutId) window.clearTimeout(timeoutId);

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

@@ -130,6 +130,52 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
         checkIcon.classList.add("scale-50", "opacity-0", "rotate-6");
       };
 
+      const fallbackCopy = (text) => {
+        try {
+          const textarea = document.createElement("textarea");
+          textarea.value = text;
+          textarea.setAttribute("readonly", "");
+          textarea.style.position = "fixed";
+          textarea.style.top = "0";
+          textarea.style.left = "0";
+          textarea.style.width = "1px";
+          textarea.style.height = "1px";
+          textarea.style.padding = "0";
+          textarea.style.border = "0";
+          textarea.style.opacity = "0";
+          textarea.style.fontSize = "16px";
+          textarea.style.pointerEvents = "none";
+          document.body.appendChild(textarea);
+
+          try {
+            textarea.focus({ preventScroll: true });
+          } catch {
+            textarea.focus();
+          }
+          textarea.select();
+          textarea.setSelectionRange(0, textarea.value.length);
+
+          const copied = document.execCommand("copy");
+          document.body.removeChild(textarea);
+          return copied;
+        } catch {
+          return false;
+        }
+      };
+
+      const copyToClipboard = async (text) => {
+        try {
+          if (navigator.clipboard?.writeText) {
+            await navigator.clipboard.writeText(text);
+            return true;
+          }
+        } catch {
+          // Fallback below when the async Clipboard API is unavailable or blocked.
+        }
+
+        return fallbackCopy(text);
+      };
+
       const tabs = codeItems.map((itemElement, index) => {
         const filename =
           itemElement.getAttribute("data-rd-tab-filename") ??
@@ -411,7 +457,12 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
           const copyValue = decodeURIComponent(encodedCopyValue);
 
           try {
-            await navigator.clipboard.writeText(copyValue);
+            const copied = await copyToClipboard(copyValue);
+            if (!copied) {
+              setCopiedState(copyButton, false);
+              return;
+            }
+
             setCopiedState(copyButton, true);
 
             if (timeoutId) window.clearTimeout(timeoutId);

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

@@ -2,7 +2,7 @@
 ---
 
 <div data-rd-column class="min-w-0">
-  <div class="prose-rules max-w-none! *:max-w-none!">
+  <div class="prose-rules max-w-none!">
     <slot />
   </div>
 </div>

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

@@ -27,7 +27,7 @@ const { title } = Astro.props;
       {title}
     </h3>
   </div>
-  <div class="prose-rules max-w-none! *:max-w-none!">
+  <div class="prose-rules max-w-none!">
     <slot />
   </div>
 </div>