reallysimpledocs 1.0.0-beta.3 → 1.0.0-beta.5

package/src/runtime/components/DefaultHead.astro

@@ -0,0 +1,120 @@
+---
+import Copy from "lucide-static/icons/copy.svg?raw";
+import Check from "lucide-static/icons/check.svg?raw";
+import basecoatJsUrl from "basecoat-css/all.min?url";
+---
+
+<script is:inline>
+  (() => {
+    try {
+      const stored = localStorage.getItem("themeMode");
+      if (stored ? stored === "dark" : matchMedia("(prefers-color-scheme: dark)").matches) {
+        document.documentElement.classList.add("dark");
+      }
+    } catch (_) {}
+  })();
+</script>
+<script src={basecoatJsUrl}></script>
+<script is:inline define:vars={{ copyIcon: Copy, checkIcon: Check }}>
+  const copyText = async (text) => {
+    if (window.isSecureContext && navigator.clipboard?.writeText) {
+      return navigator.clipboard.writeText(text);
+    }
+
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.setAttribute("readonly", "");
+    textarea.style.position = "fixed";
+    textarea.style.top = "-9999px";
+    textarea.style.left = "-9999px";
+    document.body.appendChild(textarea);
+    textarea.select();
+    const ok = document.execCommand("copy");
+    textarea.remove();
+    if (!ok) throw new Error("Copy failed");
+  };
+
+  const activePanelCode = (root) => root.querySelector(':scope > [role="tabpanel"]:not([hidden]) code');
+
+  const initCopyCode = (codeBlock) => {
+    if (codeBlock.dataset.copyCodeInitialized) return;
+    const codeEl = codeBlock.querySelector(":scope > code");
+    if (!codeEl) return;
+
+    let target = null;
+    let frame = codeBlock.closest(".code-group");
+    let getCode = frame ? () => activePanelCode(frame) || codeEl : () => codeEl;
+    if (frame) target = frame.querySelector(":scope > header");
+
+    const preview = codeBlock.closest(".preview");
+    const previewCodePanel = preview?.querySelector(":scope > [data-code-panel]");
+    if (!frame && previewCodePanel?.contains(codeBlock)) {
+      frame = preview;
+      target = frame.querySelector(":scope > header");
+      getCode = () => codeEl;
+    }
+
+    if (!frame) {
+      frame = codeBlock.parentElement?.classList.contains("code-block") ? codeBlock.parentElement : null;
+      if (!frame) {
+        frame = document.createElement("div");
+        frame.className = "code-block";
+        codeBlock.parentNode.insertBefore(frame, codeBlock);
+        frame.appendChild(codeBlock);
+      }
+    }
+
+    target ||= frame.querySelector(":scope > header") || frame;
+    if (target.querySelector(":scope > button[aria-label='Copy code']")) {
+      codeBlock.dataset.copyCodeInitialized = "true";
+      return;
+    }
+
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "btn";
+    button.dataset.variant = "ghost";
+    button.dataset.size = "icon-xs";
+    button.setAttribute("aria-label", "Copy code");
+    button.innerHTML = copyIcon;
+
+    button.addEventListener("click", async () => {
+      const text = (getCode()?.textContent || "").replace(/\n$/, "");
+      if (!text) return;
+
+      try {
+        await copyText(text);
+        button.innerHTML = checkIcon;
+      } catch (error) {
+        console.error("[copy] Failed to copy:", error);
+        button.textContent = "Failed";
+      }
+      window.setTimeout(() => {
+        button.innerHTML = copyIcon;
+      }, 1200);
+    });
+
+    target.appendChild(button);
+    codeBlock.dataset.copyCodeInitialized = "true";
+  };
+
+  const initCopyButtons = (root = document) => {
+    root.querySelectorAll("pre:has(> code):not([data-copy-code-initialized])").forEach(initCopyCode);
+  };
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => initCopyButtons(), { once: true });
+  } else {
+    initCopyButtons();
+  }
+
+  new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      mutation.addedNodes.forEach((node) => {
+        if (node.nodeType !== Node.ELEMENT_NODE) return;
+        if (node.matches?.("pre:has(> code)")) initCopyCode(node);
+        initCopyButtons(node);
+      });
+    }
+  }).observe(document.documentElement, { childList: true, subtree: true });
+</script>

package/src/runtime/components/DefaultHeadContent.astro

@@ -0,0 +1,2 @@
+---
+---

package/src/runtime/components/DefaultSidebarFooter.astro

@@ -0,0 +1,2 @@
+---
+---

package/src/runtime/components/DefaultSidebarHeader.astro

@@ -9,7 +9,7 @@ const logo = site.logo?.svg
     : "";
 ---
 
-<a href="/" class="btn-ghost h-12 w-full justify-start p-2">
+<a href="/" class="btn h-12 w-full justify-start p-2" data-variant="ghost" data-size="lg">
   {
     logo && (
       <div class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">

package/src/runtime/components/DocsLayout.astro

@@ -5,29 +5,26 @@ import ArrowRight from "lucide-static/icons/arrow-right.svg?raw";
 import Check from "lucide-static/icons/check.svg?raw";
 import Copy from "lucide-static/icons/copy.svg?raw";
 import Menu from "lucide-static/icons/menu.svg?raw";
-import Moon from "lucide-static/icons/moon.svg?raw";
 import PanelLeft from "lucide-static/icons/panel-left.svg?raw";
 import Search from "lucide-static/icons/search.svg?raw";
-import Sun from "lucide-static/icons/sun.svg?raw";
-import X from "lucide-static/icons/x.svg?raw";
 import ClaudeLogo from "../../icons/logos/claude.svg?raw";
 import CursorLogo from "../../icons/logos/cursor.svg?raw";
 import MarkdownLogo from "../../icons/logos/markdown.svg?raw";
 import OpenAILogo from "../../icons/logos/openai.svg?raw";
 import BaseLayout from "./BaseLayout.astro";
 import CommandDialog from "./CommandDialog.astro";
+import ContentHeader from "virtual:reallysimpledocs/components/ContentHeader";
 import DropdownMenu from "./DropdownMenu.astro";
 import Sidebar from "./Sidebar.astro";
+import ThemeToggle from "./ThemeToggle.astro";
 import { buildMenus, getNavigation } from "../lib/docs.js";
 import { addSvgClass } from "../lib/html.js";
-import { routeFilePath } from "../lib/paths.js";
 import { getSite } from "../lib/site.js";
 
 const { page, headings } = Astro.props;
 const site = getSite(config);
 const navigation = getNavigation(config, page);
 const { sidebar } = buildMenus(config, page.slug);
-const searchIndexUrl = routeFilePath(config.routeBase, "search-index.json");
 const panelLeftIcon = addSvgClass(PanelLeft, "size-4");
 const searchIcon = addSvgClass(Search, "size-4");
 const siteUrl = Astro.site?.toString().replace(/\/$/, "") || site.url || "";
@@ -66,11 +63,13 @@ const actionItems = [
 ---
 
 <BaseLayout title={page.title} description={site.description} pagePath={page.path}>
-  <CommandDialog indexUrl={searchIndexUrl} />
+  <CommandDialog />
   <Sidebar menu={sidebar} />
 
   <main id="content">
-    <header class="bg-background sticky inset-x-0 top-0 isolate z-10 flex shrink-0 items-center gap-2 border-b">
+    <header
+      class="sticky inset-x-0 top-0 isolate z-30 flex shrink-0 items-center gap-2 border-b bg-background"
+    >
       <div class="flex h-14 w-full items-center justify-between gap-2 px-4">
         <button
           type="button"
@@ -79,78 +78,42 @@ const actionItems = [
           data-tooltip="Toggle sidebar"
           data-side="bottom"
           data-align="start"
-          class="btn-sm-icon-ghost"
+          class="btn"
+          data-variant="ghost"
+          data-size="icon-sm"
         >
           <Fragment set:html={panelLeftIcon} />
         </button>
 
-        <button
-          type="button"
-          class="relative flex h-8 w-full min-w-0 max-w-72 cursor-text items-center gap-x-2 rounded-md border border-input bg-background px-3 py-1 text-base text-muted-foreground outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 dark:bg-input/30 sm:ml-auto md:text-sm"
+        <div
+          class="input-group h-8 w-full min-w-0 max-w-72 cursor-text sm:ml-auto"
+          role="button"
+          tabindex="0"
+          aria-label="Search docs"
           onclick="window.rsdOpenCommandSearch ? window.rsdOpenCommandSearch() : document.getElementById('command-search')?.showModal()"
+          onkeydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); window.rsdOpenCommandSearch ? window.rsdOpenCommandSearch() : document.getElementById('command-search')?.showModal(); }"
         >
-          <Fragment set:html={searchIcon} />
-          Search the docs...
-          <kbd class="kbd ml-auto -mr-1.5">⌘K</kbd>
-        </button>
+          <input type="text" placeholder="Search..." readonly tabindex="-1" aria-hidden="true" />
+          <span data-align="start" aria-hidden="true"><Fragment set:html={searchIcon} /></span>
+          <span data-align="end" aria-hidden="true"><kbd class="kbd">⌘K</kbd></span>
+        </div>
 
-        <nav class="hidden items-center gap-2 sm:flex">
-          {
-            (site.links || []).map((link) => (
-              <a
-                class={link.attrs?.class || "btn-sm-outline"}
-                href={link.url}
-                aria-label={link.label}
-                data-tooltip={link.label}
-                data-side="bottom"
-                target={link.attrs?.target}
-                rel={link.attrs?.rel}
-              >
-                {link.icon && <Fragment set:html={link.icon} />}
-                {!link.iconOnly && link.label}
-              </a>
-            ))
-          }
-          <button
-            type="button"
-            aria-label="Toggle dark mode"
-            data-tooltip="Toggle dark mode"
-            data-side="bottom"
-            data-align="end"
-            onclick="document.dispatchEvent(new CustomEvent('basecoat:theme'))"
-            class="btn-sm-icon-outline"
-          >
-            <span class="hidden dark:block"><Fragment set:html={Sun} /></span>
-            <span class="block dark:hidden"><Fragment set:html={Moon} /></span>
-          </button>
-        </nav>
+        <ContentHeader site={site} page={page} />
+        <ThemeToggle />
 
         <div class="sm:hidden">
           <button
             type="button"
-            class="btn-sm-icon-ghost peer group"
-            aria-label="Toggle menu"
+            class="btn peer group"
+            data-variant="ghost"
+            data-size="icon-sm"
+            aria-label="Toggle sidebar"
             aria-expanded="false"
-            aria-controls="mobile-menu"
-            onclick="this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true')"
+            aria-controls="sidebar"
+            onclick="document.getElementById('sidebar')?.toggle()"
           >
-            <span class="group-aria-expanded:hidden"><Fragment set:html={Menu} /></span>
-            <span class="hidden group-aria-expanded:block"><Fragment set:html={X} /></span>
+            <Fragment set:html={Menu} />
           </button>
-          <nav
-            id="mobile-menu"
-            class="fixed inset-0 top-14 z-50 flex invisible -translate-y-16 scale-95 flex-col gap-2 bg-background p-4 opacity-0 transition-all pointer-events-none peer-aria-expanded:visible peer-aria-expanded:translate-y-0 peer-aria-expanded:scale-100 peer-aria-expanded:opacity-100 peer-aria-expanded:pointer-events-auto"
-            data-mobile-menu
-          >
-            {
-              (site.links || []).map((link) => (
-                <a class="btn-lg-ghost justify-between" href={link.url} target={link.attrs?.target} rel={link.attrs?.rel}>
-                  <span>{link.label}</span>
-                  {link.icon && <Fragment set:html={link.icon} />}
-                </a>
-              ))
-            }
-          </nav>
         </div>
       </div>
     </header>
@@ -159,19 +122,20 @@ const actionItems = [
       <article class="min-w-0 flex-1 wrap-break-word">
         <div class="mx-auto w-full max-w-2xl flex-1 space-y-10">
           <header class="space-y-2">
-            <div class="flex items-start gap-x-2">
+            <div class="flex flex-col-reverse items-start gap-3 sm:flex-row sm:gap-x-2">
               <h1 class="mr-auto text-3xl font-semibold tracking-tight sm:text-4xl">{page.title}</h1>
-              <div class="mt-1 flex items-center gap-x-2">
+              <div class="flex w-full items-center justify-end gap-x-2 sm:mt-1 sm:w-auto">
                 <div role="group" class="button-group">
                   <button
                     type="button"
-                    class="btn-sm-secondary"
+                    class="btn"
+                    data-variant="secondary"
+                    data-size="sm"
                     data-md-url={page.markdownPath}
                     onclick="copyPageMarkdown(this)"
                   >
-                    <span data-copy-icon><Fragment set:html={Copy} /></span>
-                    <span data-check-icon class="hidden"><Fragment set:html={Check} /></span>
-                    <span>Copy page</span>
+                    <Fragment set:html={Copy} />
+                    Copy page
                   </button>
                   <hr role="separator" />
                   <DropdownMenu items={actionItems} />
@@ -179,7 +143,7 @@ const actionItems = [
                 <div role="group" class="button-group">
                   {
                     navigation.prev && (
-                      <a href={navigation.prev.path} class="btn-sm-icon-secondary">
+                      <a href={navigation.prev.path} class="btn" data-variant="secondary" data-size="icon-sm">
                         <span class="sr-only">{navigation.prev.title}</span>
                         <Fragment set:html={ArrowLeft} />
                       </a>
@@ -188,7 +152,7 @@ const actionItems = [
                   {navigation.prev && navigation.next && <hr role="separator" />}
                   {
                     navigation.next && (
-                      <a href={navigation.next.path} class="btn-sm-icon-secondary">
+                      <a href={navigation.next.path} class="btn" data-variant="secondary" data-size="icon-sm">
                         <span class="sr-only">{navigation.next.title}</span>
                         <Fragment set:html={ArrowRight} />
                       </a>
@@ -204,7 +168,7 @@ const actionItems = [
           <footer class="mt-12 flex items-center">
             {
               navigation.prev && (
-                <a href={navigation.prev.path} class="btn-sm-secondary mr-auto">
+                <a href={navigation.prev.path} class="btn mr-auto" data-variant="secondary" data-size="sm">
                   <Fragment set:html={ArrowLeft} />
                   {navigation.prev.title}
                 </a>
@@ -212,7 +176,7 @@ const actionItems = [
             }
             {
               navigation.next && (
-                <a href={navigation.next.path} class="btn-sm-secondary ml-auto">
+                <a href={navigation.next.path} class="btn ml-auto" data-variant="secondary" data-size="sm">
                   {navigation.next.title}
                   <Fragment set:html={ArrowRight} />
                 </a>
@@ -222,7 +186,7 @@ const actionItems = [
         </div>
       </article>
       <aside class="hidden w-56 xl:block">
-        <div class="docs-toc sticky top-20 space-y-2 text-sm [&_a]:text-muted-foreground [&_a]:hover:text-foreground [&_a[data-active='true']]:text-foreground [&_ol]:space-y-2 [&_ol_ol]:mt-2 [&_ol_ol]:pl-3" data-docs-toc>
+        <div class="docs-toc sticky top-20 space-y-2 text-sm [&_a]:text-muted-foreground [&_a]:hover:text-foreground [&_a[aria-current='location']]:text-foreground [&_ol]:space-y-2 [&_ol_ol]:mt-2 [&_ol_ol]:pl-3" data-docs-toc>
           <h2 class="flex items-center gap-1 font-medium">
             On this page
           </h2>
@@ -240,30 +204,29 @@ const actionItems = [
     </div>
   </main>
 
-  <script is:inline>
-    async function copyPageMarkdown(button) {
+  <script is:inline define:vars={{ checkIcon: Check }}>
+    window.copyPageMarkdown = async function copyPageMarkdown(button) {
       const markdownUrl = button?.dataset?.mdUrl;
       if (!markdownUrl) return;
-      const copyIcon = button.querySelector("[data-copy-icon]");
-      const checkIcon = button.querySelector("[data-check-icon]");
+      const icon = button.querySelector("svg");
+      const originalIcon = icon?.outerHTML || "";
 
       try {
         const response = await fetch(markdownUrl, { credentials: "same-origin", cache: "no-store" });
         if (!response.ok) throw new Error("Failed to fetch markdown");
         const markdown = await response.text();
         await writeToClipboard(markdown);
-        if (copyIcon && checkIcon) {
-          copyIcon.classList.add("hidden");
-          checkIcon.classList.remove("hidden");
+        if (icon && checkIcon) {
+          icon.outerHTML = checkIcon;
           window.setTimeout(() => {
-            copyIcon.classList.remove("hidden");
-            checkIcon.classList.add("hidden");
+            const currentIcon = button.querySelector("svg");
+            if (currentIcon && originalIcon) currentIcon.outerHTML = originalIcon;
           }, 1200);
         }
       } catch (_) {
         window.open(new URL(markdownUrl, window.location.href).toString(), "_blank", "noopener");
       }
-    }
+    };
 
     async function writeToClipboard(text) {
       if (navigator.clipboard?.writeText && window.isSecureContext) {
@@ -286,55 +249,60 @@ const actionItems = [
 
     function initDocsToc() {
       const toc = document.querySelector("[data-docs-toc]");
-      if (!toc) return;
+      const links = Array.from(toc?.querySelectorAll("[data-toc-link]") || []);
+      if (!links.length) return;
 
-      const links = Array.from(toc.querySelectorAll("[data-toc-link]"));
-      const linkById = new Map();
-      for (const link of links) {
-        const id = decodeURIComponent(link.hash.slice(1));
-        if (id) linkById.set(id, link);
-      }
-
-      const headings = Array.from(linkById.keys())
-        .map((id) => document.getElementById(id))
+      const entries = links
+        .map((link) => {
+          const id = decodeURIComponent(link.hash.slice(1));
+          const heading = id ? document.getElementById(id) : null;
+          return heading ? { id, heading, link } : null;
+        })
         .filter(Boolean);
-      if (!headings.length) return;
+      if (!entries.length) return;
 
-      const setActive = (id) => {
-        for (const link of links) {
-          const active = decodeURIComponent(link.hash.slice(1)) === id;
-          link.dataset.active = active ? "true" : "false";
-          if (active) link.setAttribute("aria-current", "location");
-          else link.removeAttribute("aria-current");
+      const activate = (id) => {
+        for (const entry of entries) {
+          const active = entry.id === id;
+          entry.link.toggleAttribute("data-active", active);
+          if (active) entry.link.setAttribute("aria-current", "location");
+          else entry.link.removeAttribute("aria-current");
         }
       };
 
-      const currentHeading = () => {
-        const offset = 160;
-        let current = headings[0];
-        for (const heading of headings) {
-          if (heading.getBoundingClientRect().top <= offset) current = heading;
+      const activeFromScroll = () => {
+        const marker = Math.min(window.innerHeight * 0.35, 220);
+        let current = entries[0];
+
+        for (const entry of entries) {
+          if (entry.heading.getBoundingClientRect().top <= marker) current = entry;
           else break;
         }
-        return current;
-      };
 
-      const updateActive = () => setActive(currentHeading().id);
-      updateActive();
+        activate(current.id);
+      };
 
-      let queued = false;
-      const queueUpdate = () => {
-        if (queued) return;
-        queued = true;
-        window.requestAnimationFrame(() => {
-          queued = false;
-          updateActive();
+      let frame = 0;
+      const queueActiveUpdate = () => {
+        if (frame) return;
+        frame = window.requestAnimationFrame(() => {
+          frame = 0;
+          activeFromScroll();
         });
       };
 
-      window.addEventListener("scroll", queueUpdate, { passive: true });
-      window.addEventListener("resize", queueUpdate);
-      window.addEventListener("hashchange", () => window.setTimeout(updateActive, 0));
+      if ("IntersectionObserver" in window) {
+        const observer = new IntersectionObserver(queueActiveUpdate, {
+          rootMargin: "-20% 0px -65% 0px",
+          threshold: [0, 1],
+        });
+        for (const entry of entries) observer.observe(entry.heading);
+      }
+
+      activeFromScroll();
+      window.addEventListener("scroll", queueActiveUpdate, { passive: true });
+      window.addEventListener("resize", queueActiveUpdate);
+      window.addEventListener("hashchange", () => window.setTimeout(activeFromScroll, 0));
     }
 
     initDocsToc();

package/src/runtime/components/DropdownMenu.astro

@@ -16,7 +16,7 @@ const { items } = Astro.props;
         rel: item.rel,
       },
     })),
-    triggerAttrs: { class: "btn-sm-icon-secondary" },
+    triggerAttrs: { class: "btn", "data-variant": "secondary", "data-size": "icon-sm" },
     popoverAttrs: { "data-align": "end" },
   })}
 />

package/src/runtime/components/Sidebar.astro

@@ -1,6 +1,7 @@
 ---
 import config from "virtual:reallysimpledocs/config";
 import SidebarHeader from "virtual:reallysimpledocs/components/SidebarHeader";
+import SidebarFooter from "virtual:reallysimpledocs/components/SidebarFooter";
 import { renderSidebarContent } from "../lib/macros.js";
 import { getSite } from "../lib/site.js";
 
@@ -16,5 +17,8 @@ const site = getSite(config);
     <section class="scrollbar">
       <Fragment set:html={renderSidebarContent(menu, "sidebar-content")} />
     </section>
+    <footer>
+      <SidebarFooter site={site} />
+    </footer>
   </nav>
 </aside>

package/src/runtime/components/ThemeToggle.astro

@@ -0,0 +1,21 @@
+---
+import Moon from "lucide-static/icons/moon.svg?raw";
+import Sun from "lucide-static/icons/sun.svg?raw";
+---
+
+<nav class="hidden items-center gap-2 sm:flex">
+  <button
+    type="button"
+    aria-label="Toggle dark mode"
+    data-tooltip="Toggle dark mode"
+    data-side="bottom"
+    data-align="end"
+    onclick="window.basecoat?.theme.toggle()"
+    class="btn"
+    data-variant="ghost"
+    data-size="icon-sm"
+  >
+    <span class="hidden dark:block"><Fragment set:html={Sun} /></span>
+    <span class="block dark:hidden"><Fragment set:html={Moon} /></span>
+  </button>
+</nav>

package/src/runtime/components/mdx/Callout.astro

@@ -4,8 +4,7 @@ import { addSvgClass } from "../../lib/html.js";
 
 const { type, title = "Note", icon: iconName, class: className = "" } = Astro.props;
 const normalizedType = String(type || "").toLowerCase();
-const calloutType = normalizedType === "warning" || normalizedType === "danger" ? normalizedType : "";
-const danger = calloutType === "danger";
+const calloutType = normalizedType === "warning" || normalizedType === "destructive" ? normalizedType : "";
 
 function resolveNamedIcon(name) {
   if (!name || typeof name !== "string") return "";
@@ -24,15 +23,9 @@ function resolveNamedIcon(name) {
 const iconSource = typeof iconName === "string" ? resolveNamedIcon(iconName) : "";
 const icon = addSvgClass(iconSource, "size-4");
 const heading = title;
-const variantClass =
-  calloutType === "warning"
-    ? "[&>svg]:text-amber-700 [&>h3]:text-amber-700 [&>section]:text-amber-700 dark:[&>svg]:text-amber-300 dark:[&>h3]:text-amber-300 dark:[&>section]:text-amber-300"
-    : danger
-      ? "[&>svg]:text-destructive [&>h3]:text-destructive [&>section]:text-destructive"
-      : "";
 ---
 
-<div class:list={[danger ? "alert-destructive" : "alert", "my-6", variantClass, className]}>
+<div class:list={["alert", className]} data-variant={calloutType || undefined}>
   {icon && <Fragment set:html={icon} />}
   <h3>{heading}</h3>
   <section>

package/src/runtime/components/mdx/Card.astro

@@ -1,14 +1,9 @@
 ---
 const { title, description, href, class: className = "" } = Astro.props;
 const Tag = href ? "a" : "article";
-const classes = [
-  "my-6 block w-full rounded-lg border bg-card p-3 text-card-foreground no-underline",
-  href && "transition-colors hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
-  className,
-];
 ---
 
-<Tag href={href} class:list={classes}>
-  {title && <h3 class="font-medium">{title}</h3>}
-  {description && <p class="mt-1 text-sm text-muted-foreground">{description}</p>}
+<Tag href={href} class:list={["docs-card", href && "docs-card-link", className]}>
+  {title && <h3>{title}</h3>}
+  {description && <p>{description}</p>}
 </Tag>

package/src/runtime/components/mdx/CardGrid.astro

@@ -2,6 +2,6 @@
 const { class: className = "" } = Astro.props;
 ---
 
-<div class:list={["my-6 grid w-full gap-4 sm:grid-cols-2 [&>*]:my-0", className]}>
+<div class:list={["grid w-full gap-4 sm:grid-cols-2", className]}>
   <slot />
 </div>

package/src/runtime/components/mdx/Code.astro

@@ -5,10 +5,6 @@ const { lang = "text", title, class: className = "" } = Astro.props;
 const slotHtml = Astro.slots.has("default") ? await Astro.slots.render("default") : "";
 const rawCode = decodeSlotText(slotHtml);
 const html = await highlightCode(rawCode, lang);
-const classes = [
-  "relative my-6 w-full max-w-full overflow-hidden rounded-lg",
-  className,
-];
 
 function decodeSlotText(value) {
   return String(value || "")
@@ -23,17 +19,7 @@ function decodeSlotText(value) {
 }
 ---
 
-<div
-  data-code-block
-  data-code-title={title || undefined}
-  class:list={classes}
->
-  {
-    title && (
-      <header class="flex h-10 items-center gap-2 border-b border-border/50 bg-muted/50 px-3 text-sm font-medium">
-        <span class="mr-auto">{title}</span>
-      </header>
-    )
-  }
+<div class:list={["code-block", className]} data-code-title={title || undefined}>
+  {title && <header><span>{title}</span></header>}
   <Fragment set:html={html} />
 </div>