radiant-docs 0.1.41 → 0.1.43

package/package.json

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

package/template/astro.config.mjs

@@ -14,54 +14,57 @@ import remarkDemoteH1 from "./src/lib/mdx/remark-demote-h1";
 import remarkResolveInternalLinks from "./src/lib/mdx/remark-resolve-internal-links";
 import remarkStandaloneImageComponent from "./src/lib/mdx/remark-standalone-image-component";
 import rehypeExternalLinks from "./src/lib/mdx/rehype-external-links";
+import rehypePrefixPreviewHeadingIds from "./src/lib/mdx/rehype-prefix-preview-heading-ids";
 import remarkGfm from "remark-gfm";
 import rehypeSlug from "rehype-slug";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 
-const headingAnchorIcon = {
+function createLucideIconNode({ className, path }) {
+  return {
+    type: "element",
+    tagName: "svg",
+    properties: {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      ariaHidden: "true",
+    },
+    children: [
+      {
+        type: "element",
+        tagName: "path",
+        properties: {
+          d: path,
+        },
+        children: [],
+      },
+    ],
+  };
+}
+
+const headingAnchorContent = {
   type: "element",
-  tagName: "svg",
+  tagName: "span",
   properties: {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: ["heading-anchor-icon"],
+    className: ["heading-anchor-icons"],
     ariaHidden: "true",
   },
   children: [
-    {
-      type: "element",
-      tagName: "path",
-      properties: {
-        d: "M9 17H7A5 5 0 0 1 7 7h2",
-      },
-      children: [],
-    },
-    {
-      type: "element",
-      tagName: "path",
-      properties: {
-        d: "M15 7h2a5 5 0 1 1 0 10h-2",
-      },
-      children: [],
-    },
-    {
-      type: "element",
-      tagName: "line",
-      properties: {
-        x1: "8",
-        x2: "16",
-        y1: "12",
-        y2: "12",
-      },
-      children: [],
-    },
+    createLucideIconNode({
+      className: ["heading-anchor-icon", "heading-anchor-link-icon"],
+      path: "M9 17H7A5 5 0 0 1 7 7h2m6 0h2a5 5 0 1 1 0 10h-2m-7-5h8",
+    }),
+    createLucideIconNode({
+      className: ["heading-anchor-icon", "heading-anchor-check-icon"],
+      path: "M20 6L9 17l-5-5",
+    }),
   ],
 };
 
@@ -342,12 +345,13 @@ export default defineConfig({
       ],
       rehypePlugins: [
         rehypeSlug,
+        rehypePrefixPreviewHeadingIds,
         rehypeExternalLinks,
         [
           rehypeAutolinkHeadings,
           {
             behavior: "append",
-            content: headingAnchorIcon,
+            content: headingAnchorContent,
             properties: {
               className: ["heading-anchor"],
               ariaLabel: "Copy section link",

package/template/package-lock.json

@@ -21,6 +21,7 @@
         "@iconify-json/simple-icons": "^1.2.69",
         "@iconify/react": "^6.0.2",
         "@jongwooo/prism-theme-github": "^1.15.1",
+        "@paper-design/shaders": "^0.0.76",
         "@preact/preset-vite": "^2.10.3",
         "@readme/oas-to-snippet": "^29.3.0",
         "@resvg/resvg-js": "^2.6.2",
@@ -2826,6 +2827,12 @@
         "win32"
       ]
     },
+    "node_modules/@paper-design/shaders": {
+      "version": "0.0.76",
+      "resolved": "https://registry.npmjs.org/@paper-design/shaders/-/shaders-0.0.76.tgz",
+      "integrity": "sha512-AcNDY4J66YQHUfQYFInkCP7M9VOje0od7wLpOR7LtCmc532opJy6ll+h1W9zBovz8tt9U7OADUmJ/qKEXyOX/A==",
+      "license": "SEE LICENSE IN https://github.com/paper-design/shaders/blob/main/LICENSE"
+    },
     "node_modules/@preact/preset-vite": {
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/@preact/preset-vite/-/preset-vite-2.10.3.tgz",

package/template/package.json

@@ -25,6 +25,7 @@
     "@iconify-json/simple-icons": "^1.2.69",
     "@iconify/react": "^6.0.2",
     "@jongwooo/prism-theme-github": "^1.15.1",
+    "@paper-design/shaders": "^0.0.76",
     "@preact/preset-vite": "^2.10.3",
     "@readme/oas-to-snippet": "^29.3.0",
     "@resvg/resvg-js": "^2.6.2",

package/template/src/components/Header.astro

@@ -1,10 +1,14 @@
 ---
 import Icon from "./ui/Icon.astro";
-import { getConfig } from "../lib/validation";
+import { getConfig, type ThemeColorByMode } from "../lib/validation";
 import Search from "./Search.astro";
 import LogoLink from "./LogoLink.astro";
-import sparkleIcon from "../assets/icons/sparkle.svg?url";
 import { withBasePath } from "../lib/base-path";
+import { getAssistantPanelRuntimeConfig } from "../lib/assistant-panel-config";
+import {
+  getDocsBaseColorShade,
+  getThemeForegroundColor,
+} from "../lib/theme-css";
 
 interface Props {
   showAskAiTrigger?: boolean;
@@ -12,6 +16,98 @@ interface Props {
 
 const { showAskAiTrigger = false } = Astro.props as Props;
 const config = await getConfig();
+const assistantNavbarButton = config.assistant?.navbarButton;
+const showAssistantNavbarButton =
+  showAskAiTrigger && assistantNavbarButton?.enabled !== false;
+const assistantNavbarButtonText = assistantNavbarButton?.text ?? "Ask";
+const assistantRuntimeConfig = showAssistantNavbarButton
+  ? getAssistantPanelRuntimeConfig(config)
+  : null;
+const assistantHeaderIconSrc =
+  assistantRuntimeConfig?.launcherIconImageSrc ?? "";
+
+function getConfiguredColorForMode(
+  value: string | ThemeColorByMode | undefined,
+  mode: "light" | "dark",
+): string | undefined {
+  if (typeof value === "string") return value;
+  return value?.[mode];
+}
+
+function getDefaultButtonColor(mode: "light" | "dark"): string {
+  return getDocsBaseColorShade(
+    config.theme,
+    mode,
+    mode === "light" ? "900" : "100",
+  );
+}
+
+function getButtonForegroundColor(
+  mode: "light" | "dark",
+  color: string,
+): string {
+  return getThemeForegroundColor(
+    color,
+    getDocsBaseColorShade(config.theme, mode, "900"),
+  );
+}
+
+function getAssistantNavbarButtonColor(mode: "light" | "dark"): string {
+  return (
+    getConfiguredColorForMode(config.assistant?.navbarButton?.color, mode) ??
+    getConfiguredColorForMode(config.assistant?.button?.color, mode) ??
+    getDefaultButtonColor(mode)
+  );
+}
+
+function getNavbarPrimaryThemeColor(mode: "light" | "dark"): string {
+  return (
+    getConfiguredColorForMode(config.navbar?.primary?.color, mode) ??
+    getDefaultButtonColor(mode)
+  );
+}
+
+const assistantHeaderThemeColors = showAssistantNavbarButton
+  ? {
+      light: getAssistantNavbarButtonColor("light"),
+      dark: getAssistantNavbarButtonColor("dark"),
+    }
+  : null;
+const assistantHeaderButtonStyle = assistantHeaderThemeColors
+  ? [
+      `--assistant-header-theme-light: ${assistantHeaderThemeColors.light}`,
+      `--assistant-header-theme-dark: ${assistantHeaderThemeColors.dark}`,
+      `--assistant-header-foreground-light: ${
+        config.assistant?.icon?.color ??
+        getButtonForegroundColor("light", assistantHeaderThemeColors.light)
+      }`,
+      `--assistant-header-foreground-dark: ${
+        config.assistant?.icon?.color ??
+        getButtonForegroundColor("dark", assistantHeaderThemeColors.dark)
+      }`,
+    ].join("; ")
+  : "";
+
+const navbarPrimaryThemeColors = config.navbar?.primary
+  ? {
+      light: getNavbarPrimaryThemeColor("light"),
+      dark: getNavbarPrimaryThemeColor("dark"),
+    }
+  : null;
+const navbarPrimaryButtonStyle = navbarPrimaryThemeColors
+  ? [
+      `--navbar-primary-theme-light: ${navbarPrimaryThemeColors.light}`,
+      `--navbar-primary-theme-dark: ${navbarPrimaryThemeColors.dark}`,
+      `--navbar-primary-foreground-light: ${getButtonForegroundColor(
+        "light",
+        navbarPrimaryThemeColors.light,
+      )}`,
+      `--navbar-primary-foreground-dark: ${getButtonForegroundColor(
+        "dark",
+        navbarPrimaryThemeColors.dark,
+      )}`,
+    ].join("; ")
+  : "";
 ---
 
 <header
@@ -56,20 +152,23 @@ const config = await getConfig();
         <div class="flex items-center gap-2 mx-0 md:mx-auto lg:mx-0">
           <Search />
           {
-            showAskAiTrigger ? (
+            showAssistantNavbarButton ? (
               <button
                 type="button"
-                class="hidden md:inline-flex items-center gap-2 h-8 rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-[var(--color-theme-top)] to-[var(--color-theme-bottom)] px-3 text-[13px] font-[350] text-[var(--color-theme-foreground)] shadow-sm hover:opacity-95 cursor-pointer"
-                onclick="window.__assistantOpenRequested = true; window.dispatchEvent(new CustomEvent('ask-ai:open'));"
+                aria-label="Open assistant"
+                class="assistant-header-trigger hidden md:inline-flex items-center gap-2 h-8 rounded-lg [corner-shape:superellipse(1.2)] px-3 text-[13px] font-[350] dark:font-[450] transition-opacity duration-200 hover:opacity-95 cursor-pointer"
+                style={assistantHeaderButtonStyle}
+                onclick="window.__assistantToggleRequested = true; window.dispatchEvent(new CustomEvent('ask-ai:toggle'));"
               >
-                <img
-                  src={sparkleIcon}
-                  alt=""
-                  aria-hidden="true"
-                  class="size-3 -ml-px"
-                  style="filter: var(--color-theme-icon-filter);"
-                />
-                Ask AI
+                {assistantHeaderIconSrc ? (
+                  <img
+                    src={assistantHeaderIconSrc}
+                    alt=""
+                    aria-hidden="true"
+                    class="size-4 -ml-px object-contain"
+                  />
+                ) : null}
+                {assistantNavbarButtonText}
               </button>
             ) : null
           }
@@ -90,7 +189,7 @@ const config = await getConfig();
                     <a
                       class:list={[
                         "items-center gap-1 text-[13px] font-[450] dark:font-normal text-neutral-600/85 hover:text-neutral-600 dark:text-neutral-200/90 dark:hover:text-neutral-200 duration-200 px-1.5 py-[5px] whitespace-nowrap",
-                        showAskAiTrigger && a.length === 3 && i === 2
+                        showAssistantNavbarButton && a.length === 3 && i === 2
                           ? "hidden 2xl:flex"
                           : "flex",
                       ]}
@@ -112,7 +211,7 @@ const config = await getConfig();
               {config.navbar.secondary && (
                 <a
                   class:list={[
-                    "h-[33px] items-center gap-1.5 px-[11px] text-[13px] bg-white/90 dark:bg-neutral-800/80 text-neutral-600/85 hover:text-neutral-600 dark:text-neutral-200/95 dark:hover:text-neutral-200 rounded-lg [corner-shape:superellipse(1.2)] border border-neutral-200 dark:border-neutral-700/40 shadow-xs transition-all whitespace-nowrap",
+                    "h-[33px] items-center gap-1.5 px-[11px] text-[13px] bg-linear-to-br from-neutral-100/70 to-neutral-100/90 dark:bg-none dark:bg-neutral-800/80 text-neutral-900/85 hover:text-neutral-600 dark:text-neutral-200/95 dark:hover:text-neutral-200 rounded-lg [corner-shape:superellipse(1.2)] border-[0.5px] border-neutral-900/10 dark:border-white/5 transition-all whitespace-nowrap",
                     config.navbar.primary ? "hidden lg:flex" : "flex",
                   ]}
                   href={withBasePath(config.navbar.secondary.href)}
@@ -131,8 +230,9 @@ const config = await getConfig();
               {config.navbar.primary && (
                 <a
                   class:list={[
-                    "font-[350] h-8 flex items-center gap-2 px-3 text-[13px] rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-[var(--color-theme-top)] to-[var(--color-theme-bottom)] text-[var(--color-theme-foreground)] duration-200 shadow-sm transition-all whitespace-nowrap hover:opacity-95",
+                    "navbar-primary-trigger font-[350] dark:font-[450] h-8 flex items-center gap-2 px-3 text-[13px] rounded-lg [corner-shape:superellipse(1.2)] duration-200 transition-all whitespace-nowrap hover:opacity-95",
                   ]}
+                  style={navbarPrimaryButtonStyle}
                   href={withBasePath(config.navbar.primary.href)}
                 >
                   {config.navbar.primary.icon && (
@@ -153,3 +253,37 @@ const config = await getConfig();
     </div>
   </div>
 </header>
+
+<style>
+  .assistant-header-trigger {
+    --assistant-header-theme: var(--assistant-header-theme-light);
+    --assistant-header-foreground: var(--assistant-header-foreground-light);
+    background: linear-gradient(
+      to bottom,
+      color-mix(in oklab, var(--assistant-header-theme) 88%, white),
+      color-mix(in oklab, var(--assistant-header-theme) 90%, black)
+    );
+    color: var(--assistant-header-foreground);
+  }
+
+  :global(.dark) .assistant-header-trigger {
+    --assistant-header-theme: var(--assistant-header-theme-dark);
+    --assistant-header-foreground: var(--assistant-header-foreground-dark);
+  }
+
+  .navbar-primary-trigger {
+    --navbar-primary-theme: var(--navbar-primary-theme-light);
+    --navbar-primary-foreground: var(--navbar-primary-foreground-light);
+    background: linear-gradient(
+      to bottom,
+      color-mix(in oklab, var(--navbar-primary-theme) 88%, white),
+      color-mix(in oklab, var(--navbar-primary-theme) 90%, black)
+    );
+    color: var(--navbar-primary-foreground);
+  }
+
+  :global(.dark) .navbar-primary-trigger {
+    --navbar-primary-theme: var(--navbar-primary-theme-dark);
+    --navbar-primary-foreground: var(--navbar-primary-foreground-dark);
+  }
+</style>

package/template/src/components/MdxPage.astro

@@ -8,6 +8,9 @@ import Steps from "./user/Steps.astro";
 import Step from "./user/Step.astro";
 import Accordion from "./user/Accordion.astro";
 import AccordionGroup from "./user/AccordionGroup.astro";
+import Card from "./user/Card.astro";
+import Column from "./user/Column.astro";
+import Columns from "./user/Columns.astro";
 import TableOfContents from "./TableOfContents.astro";
 import Image from "./user/Image.astro";
 import CodeBlock from "./user/CodeBlock.astro";
@@ -16,6 +19,7 @@ import ComponentPreview from "./user/ComponentPreview.astro";
 import ComponentPreviewBlock from "./user/ComponentPreviewBlock.astro";
 import type { MdxRoute, Route } from "../lib/routes";
 import PagePagination from "./PagePagination.astro";
+import { PREVIEW_HEADING_ID_PREFIX } from "../lib/mdx/rehype-prefix-preview-heading-ids";
 
 interface Props {
   entry: any;
@@ -30,6 +34,9 @@ const { entry, route, previousRoute, nextRoute, homePath } = Astro.props;
 const components = {
   Accordion,
   AccordionGroup,
+  Card,
+  Column,
+  Columns,
   Callout,
   Tabs,
   Tab,
@@ -50,30 +57,32 @@ const description =
     ? entry.data.description.trim()
     : undefined;
 
-const tocHeadings = headings.filter(({ depth }) => depth === 2 || depth === 3);
+const tocHeadings = headings.filter(
+  ({ depth, slug }) =>
+    (depth === 2 || depth === 3) &&
+    !slug.startsWith(PREVIEW_HEADING_ID_PREFIX),
+);
 ---
 
 <Layout pageTitle={title} pageDescription={description}>
-  <article>
-    <header class="mb-6">
-      <h1 class="text-4xl font-semibold tracking-tight">{title}</h1>
-    </header>
-    <div class="flex w-full min-w-0 justify-between gap-x-12">
-      <div class="min-w-0 flex-1">
-        <div class="prose-rules">
-          <Content components={components} />
-        </div>
-        <PagePagination
-          previousRoute={previousRoute}
-          nextRoute={nextRoute}
-          homePath={homePath}
-        />
-      </div>
-      <aside class="hidden xl:block w-56 shrink-0">
-        <TableOfContents headings={tocHeadings} />
-      </aside>
+  <div class="flex w-full min-w-0 justify-between gap-x-10">
+    <div class="mx-auto max-w-3xl w-full">
+      <header class="mb-6">
+        <h1 class="text-4xl font-semibold tracking-tight">{title}</h1>
+      </header>
+      <article class="prose-rules">
+        <Content components={components} />
+      </article>
+      <PagePagination
+        previousRoute={previousRoute}
+        nextRoute={nextRoute}
+        homePath={homePath}
+      />
     </div>
-  </article>
+    <aside class="hidden xl:block w-48 shrink-0">
+      <TableOfContents headings={tocHeadings} />
+    </aside>
+  </div>
   <script is:inline>
     function fallbackCopy(text) {
       const textarea = document.createElement("textarea");
@@ -101,7 +110,52 @@ const tocHeadings = headings.filter(({ depth }) => depth === 2 || depth === 3);
       return fallbackCopy(text);
     }
 
-    async function copyHeadingUrlFromHash(hash) {
+    var headingCopyStateTimers =
+      window.__headingCopyStateTimers instanceof WeakMap
+        ? window.__headingCopyStateTimers
+        : new WeakMap();
+    window.__headingCopyStateTimers = headingCopyStateTimers;
+
+    function showHeadingCopiedState(anchor) {
+      if (!(anchor instanceof HTMLElement)) return;
+
+      const defaultLabel =
+        anchor.dataset.defaultAriaLabel ||
+        anchor.getAttribute("aria-label") ||
+        "Copy section link";
+      const defaultTitle =
+        anchor.dataset.defaultTitle ||
+        anchor.getAttribute("title") ||
+        defaultLabel;
+      anchor.dataset.defaultAriaLabel = defaultLabel;
+      anchor.dataset.defaultTitle = defaultTitle;
+
+      const existingTimeout = headingCopyStateTimers.get(anchor);
+      if (existingTimeout) window.clearTimeout(existingTimeout);
+
+      anchor.dataset.copyState = "copied";
+      anchor.setAttribute("aria-label", "Copied section link");
+      anchor.setAttribute("title", "Copied");
+
+      const timeout = window.setTimeout(() => {
+        if (anchor.dataset.copyState === "copied") {
+          delete anchor.dataset.copyState;
+          anchor.setAttribute(
+            "aria-label",
+            anchor.dataset.defaultAriaLabel || "Copy section link",
+          );
+          anchor.setAttribute(
+            "title",
+            anchor.dataset.defaultTitle || "Copy section link",
+          );
+        }
+        headingCopyStateTimers.delete(anchor);
+      }, 1400);
+
+      headingCopyStateTimers.set(anchor, timeout);
+    }
+
+    async function copyHeadingUrlFromHash(hash, stateTarget) {
       const url = `${window.location.origin}${window.location.pathname}${hash}`;
       const copied = await copyToClipboard(url);
       if (!copied) return false;
@@ -112,6 +166,8 @@ const tocHeadings = headings.filter(({ depth }) => depth === 2 || depth === 3);
         window.location.hash = hash;
       }
 
+      showHeadingCopiedState(stateTarget);
+
       return true;
     }
 
@@ -134,7 +190,7 @@ const tocHeadings = headings.filter(({ depth }) => depth === 2 || depth === 3);
             return;
           }
 
-          const copied = await copyHeadingUrlFromHash(hash);
+          const copied = await copyHeadingUrlFromHash(hash, anchor);
           if (!copied) {
             if (isPointerClick) anchor.blur();
             return;
@@ -160,7 +216,10 @@ const tocHeadings = headings.filter(({ depth }) => depth === 2 || depth === 3);
           const id = heading.getAttribute("id");
           if (!id) return;
 
-          await copyHeadingUrlFromHash(`#${id}`);
+          await copyHeadingUrlFromHash(
+            `#${id}`,
+            heading.querySelector("a.heading-anchor"),
+          );
         });
       });
     }

package/template/src/components/PagePagination.astro

@@ -23,17 +23,35 @@ function buildHref(route: Route): string {
 
 {
   (previousRoute || nextRoute) && (
-    <nav class="w-full max-w-2xl pt-16 dark:border-neutral-800" aria-label="Page pagination">
-      <div class="grid gap-3 sm:grid-cols-2">
+    <nav class="w-full pt-16" aria-label="Page pagination">
+      <div class="flex gap-4 xs:grid-cols-2">
         {previousRoute && (
           <a
             href={buildHref(previousRoute)}
-            class="group flex flex-col rounded-lg border border-neutral-200/90 bg-white/70 p-4 transition-colors hover:border-neutral-300 dark:border-neutral-800 dark:bg-neutral-900/40 dark:hover:border-neutral-700 shadow-xs"
+            class="group flex-1 flex min-w-0 flex-col py-4 px-5 relative z-10 before:-z-10 before:absolute before:inset-0 hover:before:-inset-1 before:rounded-xl before:bg-neutral-50 hover:before:bg-neutral-100/80 dark:before:bg-(--rd-code-surface)/70 dark:hover:before:bg-(--rd-code-surface) before:duration-200 before:ease-in-out"
           >
-            <span class="block text-[10px] font-medium uppercase tracking-wide text-neutral-400 dark:text-neutral-400">
+            <span class="inline-flex items-center text-sm tracking-wide text-neutral-500/90 dark:text-neutral-300/70">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2.2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="size-3.5 group-hover:-translate-x-[5px] duration-200 ease-in-out"
+              >
+                <path d="m12 19-7-7 7-7" />
+                <path
+                  d="M19 12H5"
+                  class="scale-x-0 group-hover:scale-x-100 origin-[30%] duration-200 ease-in-out"
+                />
+              </svg>
               Previous
             </span>
-            <div class="font-medium text-neutral-900 dark:text-neutral-100">
+            <div class="min-w-0 max-w-full wrap-break-word font-medium text-neutral-900 dark:text-neutral-100">
               {previousRoute.title}
             </div>
           </a>
@@ -43,14 +61,32 @@ function buildHref(route: Route): string {
           <a
             href={buildHref(nextRoute)}
             class:list={[
-              "group flex flex-col rounded-lg border border-neutral-200/90 bg-white/70 p-4 transition-colors hover:border-neutral-300/80 dark:border-neutral-800 dark:bg-neutral-900/40 dark:hover:border-neutral-700 shadow-xs",
+              "group flex-1 flex min-w-0 flex-col py-4 px-5 relative z-10 before:-z-10 before:absolute before:inset-0 hover:before:-inset-1 before:rounded-xl before:bg-neutral-50 hover:before:bg-neutral-100/80 dark:before:bg-(--rd-code-surface)/70 dark:hover:before:bg-(--rd-code-surface) before:duration-200 before:ease-in-out",
               !previousRoute && "sm:col-start-2",
             ]}
           >
-            <span class="block text-right text-[10px] font-medium uppercase tracking-wide text-neutral-400 dark:text-neutral-400">
+            <span class="ml-auto inline-flex items-center text-sm tracking-wide text-neutral-500/90 dark:text-neutral-300/70">
               Next
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2.2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="size-3.5 group-hover:translate-x-[5px] duration-200 ease-in-out"
+              >
+                <path
+                  d="M5 12h14"
+                  class="scale-x-0 group-hover:scale-x-100 origin-[70%] duration-200 ease-in-out"
+                />
+                <path d="m12 5 7 7-7 7" />
+              </svg>
             </span>
-            <div class="text-right font-medium text-neutral-900 dark:text-neutral-100">
+            <div class="min-w-0 max-w-full wrap-break-word text-right font-medium text-neutral-900 dark:text-neutral-100">
               {nextRoute.title}
             </div>
           </a>

package/template/src/components/Sidebar.astro

@@ -3,6 +3,12 @@ import { getConfig, type DocsConfig } from "../lib/validation";
 import ThemeSwitcher from "./ThemeSwitcher.astro";
 import SidebarMenu from "./SidebarMenu.astro";
 
+interface Props {
+  askAiEnabled?: boolean;
+}
+
+const { askAiEnabled = false } = Astro.props as Props;
+
 const config: DocsConfig = await getConfig();
 ---
 
@@ -13,7 +19,10 @@ const config: DocsConfig = await getConfig();
     <SidebarMenu navigation={config.navigation} />
   </nav>
   <div
-    class="mt-auto bg-background z-10 p-3 border-t border-t-border-light flex gap-1.5 justify-end items-center"
+    class:list={[
+      "mt-auto bg-background z-10 p-3 border-t border-t-border-light flex gap-1.5 items-center",
+      askAiEnabled ? "justify-start" : "justify-end",
+    ]}
   >
     <span class="text-neutral-400 text-xs font-light">Theme</span>
     <ThemeSwitcher />