radiant-docs 0.1.37 → 0.1.39

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

@@ -101,7 +101,7 @@ validateProps(
 
 <figure
   class:list={[
-    "p-1.5 pb-1 xs:pb-1.5 group border border-neutral-200/80 dark:border-neutral-800 shadow-xs bg-neutral-50 dark:bg-neutral-900 rounded-2xl",
+    "p-1.5 pb-1 xs:pb-1.5 group border border-neutral-200 dark:border-neutral-800 shadow-xs bg-neutral-50 dark:bg-(--rd-code-surface) rounded-2xl",
     hasCustomImageWidth ? "w-fit max-w-full mx-auto" : "w-full",
   ]}
   x-data="{ 
@@ -204,7 +204,7 @@ validateProps(
   }"
 >
   <div
-    class="overflow-hidden rounded-xl border border-neutral-200/50 dark:border-neutral-800/50 bg-neutral-100 dark:bg-black/20"
+    class="overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-(--rd-code-surface)"
   >
     <img
       {...attrs}

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

@@ -14,24 +14,24 @@ validateProps(
   {
     title: { required: true, type: "string" },
   },
-  Astro.url.pathname
+  Astro.url.pathname,
 );
 ---
 
 <div
   class:list={[
     "relative pl-10 step-item pb-4 last:pb-0 space-y-4",
-    "before:absolute before:left-[10.5px] before:top-8 before:bottom-0 before:w-px before:bg-linear-[transparent,var(--color-neutral-200)_10%,var(--color-neutral-200)_90%,transparent]",
+    "before:absolute before:left-[10.5px] before:top-8 before:bottom-0 before:w-px before:bg-linear-[transparent,var(--color-neutral-200)_10%,var(--color-neutral-200)_90%,transparent] dark:before:bg-linear-[transparent,var(--color-neutral-700)_10%,var(--color-neutral-700)_90%,transparent]",
   ]}
   data-step-panel
 >
   <div
     class:list={[
       "flex items-center gap-1.5 not-prose",
-      "step-number before:bg-neutral-900 before:size-[22px] before:rounded-full before:text-white before:flex before:items-center before:justify-center before:text-xs before:font-bold before:absolute before:left-px before:top-[3px] before:shadow-[inset_0_1px_0_rgb(255,255,255,0.2),0_0_0_1px_var(--color-neutral-800),var(--shadow-md)]",
+      "step-number before:size-6 before:bg-linear-to-b before:from-neutral-900/80 before:to-neutral-900 dark:before:from-neutral-100 dark:before:to-neutral-200 before:rounded-full before:text-white before:flex before:items-center before:justify-center before:text-xs before:font-bold dark:before:font-extrabold before:absolute before:left-px before:top-[3px] before:shadow-sm dark:before:bg-neutral-200 dark:before:text-neutral-900",
     ]}
   >
-    <h3 class="text-lg font-semibold text-neutral-900">
+    <h3 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
       {title}
     </h3>
   </div>

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

@@ -19,7 +19,7 @@ validateProps(
 ---
 
 <section data-label={label} data-icon={icon || ""}>
-  <div class="*:m-0! *:mb-2">
+  <div class="*:first:mt-0! *:last:mb-0!">
     <slot />
   </div>
 </section>

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

@@ -3,16 +3,18 @@ import Icon from '../ui/Icon.astro';
 
 const html = await Astro.slots.render("default");
 
-const labelRegex = /label="([^"]+)"/g;
-const iconRegex = /icon="([^"]*)"/g;
+const tabRegex = /<section\b([^>]*)\bdata-label="([^"]*)"([^>]*)>(.*?)<\/section>/gs;
+const dataIconRegex = /\bdata-icon="([^"]*)"/;
 let labels = [];
 let icons = [];
+let tabContents = [];
 let match;
-while ((match = labelRegex.exec(html)) !== null) {
-  labels.push(match[1]);
-}
-while ((match = iconRegex.exec(html)) !== null) {
-  icons.push(match[1]);
+while ((match = tabRegex.exec(html)) !== null) {
+  const openingAttributes = `${match[1]} ${match[3]}`;
+  const iconMatch = openingAttributes.match(dataIconRegex);
+  labels.push(match[2]);
+  icons.push(iconMatch?.[1] ?? "");
+  tabContents.push(match[4]);
 }
 
 if (labels.length === 0) {
@@ -21,28 +23,59 @@ if (labels.length === 0) {
     `[USER_ERROR]: <Tabs>: Must contain at least two <Tab> children (in ${pagePath}.mdx)`
   );
 }
-
-const tabRegex = /<section[^>]*data-label="[^"]*"[^>]*>(.*?)<\/section>/gs;
-let tabContents = [];
-let contentMatch;
-while ((contentMatch = tabRegex.exec(html)) !== null) {
-  tabContents.push(contentMatch[1]);
-}
 ---
 
 <div x-data="{
   activeTab: 0,
+  previousTab: null,
+  transitionDirection: 1,
+  isTransitioning: false,
+  transitionDurationMs: 300,
+  transitionTimeout: null,
   containerHeight: 'auto',
   markerStyle: { left: null, width: null },
+  resizeHandler: null,
   init() {
+    this.resizeHandler = () => {
+      this.updateMarker(this.activeTab);
+      this.updateHeight(this.isTransitioning);
+    };
+    window.addEventListener('resize', this.resizeHandler);
+
     this.$nextTick(() => {
       this.updateMarker(this.activeTab);
       this.updateHeight();
     });
-    this.$watch('activeTab', (value) => {
-      this.updateMarker(value);
+  },
+  destroy() {
+    if (this.resizeHandler) {
+      window.removeEventListener('resize', this.resizeHandler);
+    }
+    if (this.transitionTimeout) {
+      window.clearTimeout(this.transitionTimeout);
+    }
+  },
+  selectTab(index) {
+    if (index === this.activeTab) return;
+
+    if (this.transitionTimeout) {
+      window.clearTimeout(this.transitionTimeout);
+      this.transitionTimeout = null;
+    }
+
+    this.previousTab = this.activeTab;
+    this.transitionDirection = index > this.activeTab ? 1 : -1;
+    this.isTransitioning = true;
+    this.activeTab = index;
+    this.updateMarker(this.activeTab);
+    this.updateHeight(true);
+
+    this.transitionTimeout = window.setTimeout(() => {
+      this.isTransitioning = false;
+      this.previousTab = null;
+      this.transitionTimeout = null;
       this.updateHeight();
-    });
+    }, this.transitionDurationMs);
   },
   updateMarker(index) {
     const el = this.$refs['tab-' + index];
@@ -53,23 +86,57 @@ while ((contentMatch = tabRegex.exec(html)) !== null) {
       };
     }
   },
-  updateHeight() {
+  getPanelStyle(index) {
+    const base = 'position: absolute; inset: 0;';
+
+    const isActive = index === this.activeTab;
+    const isPrevious = this.isTransitioning && index === this.previousTab;
+
+    if (!isActive && !isPrevious) {
+      return `${base} opacity: 0; pointer-events: none; visibility: hidden; z-index: 0;`;
+    }
+
+    if (!this.isTransitioning) {
+      return 'position: relative; transform: translateX(0); opacity: 1; pointer-events: auto; visibility: visible; z-index: 1;';
+    }
+
+    if (isActive) {
+      const animationName =
+        this.transitionDirection === 1
+          ? 'rd-tabs-slide-in-from-right'
+          : 'rd-tabs-slide-in-from-left';
+      return `${base} opacity: 1; pointer-events: auto; visibility: visible; z-index: 2; animation: ${animationName} ${this.transitionDurationMs}ms ease-in-out both;`;
+    }
+
+    const animationName =
+      this.transitionDirection === 1
+        ? 'rd-tabs-slide-out-to-left'
+        : 'rd-tabs-slide-out-to-right';
+    return `${base} opacity: 1; pointer-events: none; visibility: visible; z-index: 1; animation: ${animationName} ${this.transitionDurationMs}ms ease-in-out both;`;
+  },
+  updateHeight(includePrevious = false) {
     this.$nextTick(() => {
-      // We look for the internal wrapper or the content div specifically
       const activeSlide = this.$refs['content-' + this.activeTab];
-      if (activeSlide) {
-        // scrollHeight is often more reliable than offsetHeight for hidden overflow
-        this.containerHeight = activeSlide.scrollHeight + 'px';
+      if (!activeSlide) return;
+
+      let nextHeight = activeSlide.scrollHeight;
+      if (includePrevious && this.previousTab !== null) {
+        const previousSlide = this.$refs['content-' + this.previousTab];
+        if (previousSlide) {
+          nextHeight = Math.max(nextHeight, previousSlide.scrollHeight);
+        }
       }
+
+      this.containerHeight = nextHeight + 'px';
     });
   }
 }"
 class="my-5">
   <ul
-    class="relative isolate not-prose flex border border-neutral-200 w-fit bg-neutral-100/80 rounded-lg p-[3px] inset-shadow-sm"
+    class="relative isolate not-prose flex w-full max-w-full min-w-0 rounded-lg border border-neutral-100 bg-neutral-100/80 p-[3px] dark:border-none dark:bg-neutral-800/50"
   >
     <div
-      class="absolute top-[3px] bottom-[3px] bg-white rounded-md shadow-sm transition-all duration-300 ease-out -z-10 flex items-center justify-center"
+      class="absolute top-[3px] bottom-[3px] -z-10 flex items-center justify-center rounded-md bg-white shadow-sm transition-all duration-300 ease-out dark:bg-neutral-700/30 dark:border dark:border-neutral-700/40 dark:shadow-black/30."
       style="left: 3px;"
       :style="markerStyle.width ? `left: ${markerStyle.left}; width: ${markerStyle.width}` : ''"
     >
@@ -79,44 +146,77 @@ class="my-5">
     </div>
 
     { labels.map((label, index) => (
-    <li>
+    <li class="min-w-0 flex-1">
       <button
         type="button"
         x-ref={`tab-${index}`}
-        @click={`activeTab = ${index}`}
-        class="relative px-3 h-[32px] font-medium text-sm transition-colors duration-200 cursor-pointer text-nowrap flex items-center gap-2"
+        @click={`selectTab(${index})`}
+        class="relative flex h-[32px] w-full min-w-0 max-w-full cursor-pointer items-center gap-2 px-3 text-sm font-medium transition-colors duration-200"
         style={index === 0 ? "" : ""}
-        class:list={[index === 0 ? "text-neutral-900" : "text-neutral-500"]}
+        class:list={[index === 0 ? "text-foreground" : "text-muted-foreground"]}
         :class={`{
-        'text-neutral-900': activeTab === ${index},
-        'text-neutral-500 hover:text-neutral-600': activeTab !== ${index}
+        'text-foreground': activeTab === ${index},
+        'text-muted-foreground hover:text-foreground': activeTab !== ${index}
       }`}
       >
         {icons[index] && <Icon name={icons[index]} class="size-4 shrink-0" />}
-        {label}
+        <span class="min-w-0 flex-1 truncate" title={label}>{label}</span>
       </button>
     </li>
     )) }
   </ul>
 
   <div 
-    class="mt-4 overflow-hidden transition-[height] duration-300 ease-in-out"
+    class="relative mt-4 overflow-hidden transition-[height] duration-300 ease-in-out"
     :style="'height: ' + containerHeight"
   >
-    <div 
-      class="flex items-start transition-transform duration-300 ease-in-out"
-      :style="'transform: translateX(-' + (activeTab * 100) + '%)'"
-    >
     { tabContents.map((content, index) => (
-      // We add a ref here so we can measure the height
       <div
+        {...(index !== 0 ? { "x-cloak": true } : {})}
         x-ref={`content-${index}`}
-        class="w-full shrink-0 transition-opacity duration-300 ease-in-out"
-        :style={`activeTab === ${index} ? 'opacity: 1' : 'opacity: 0 pointer-events-none'`}
-        style={index === 0 ? 'opacity: 1' : 'opacity: 0'}
+        class="w-full"
+        :style={`getPanelStyle(${index})`}
+        style={index === 0 ? 'position: relative;' : ''}
         set:html={content}
       />
     )) }
-    </div>
   </div>
-</div>
+</div>
+
+<style>
+  @keyframes rd-tabs-slide-in-from-right {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes rd-tabs-slide-in-from-left {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes rd-tabs-slide-out-to-left {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(-100%);
+    }
+  }
+
+  @keyframes rd-tabs-slide-out-to-right {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(100%);
+    }
+  }
+</style>

package/template/src/layouts/Layout.astro

@@ -180,7 +180,7 @@ if (isDev && hasAskAiDevConfig) {
       class="fixed top-1 inset-x-1 h-16 -z-10 bg-background-dark"
       data-vaul-scale-chrome
     >
-      <div class="bg-white w-full h-full rounded-t-2xl"></div>
+      <div class="bg-background w-full h-full rounded-t-2xl"></div>
     </div>
     <div
       class="fixed top-[63px] z-30 w-[5px] right-0 bottom-0 bg-background-dark border-l border-l-border"

package/template/src/lib/code/code-block.ts

@@ -137,7 +137,9 @@ const CODE_BLOCK_LANGUAGE_ICON_FILE_BY_VALUE: Record<string, string> = {
   yaml: "file_type_yaml_official.svg",
 };
 
-const SHIKI_THEME = "github-light";
+const SHIKI_LIGHT_THEME = "github-light";
+const SHIKI_DARK_THEME = "github-dark";
+const SHIKI_THEMES = [SHIKI_LIGHT_THEME, SHIKI_DARK_THEME] as const;
 const BUNDLED_LANGUAGE_SET = new Set(Object.keys(bundledLanguages));
 const LANGUAGE_RUNTIME_DEPENDENCIES: Record<string, string[]> = {
   // MDX tokenization relies on TSX grammar injections for JSX-style tags.
@@ -228,7 +230,7 @@ function pickIconFromFileName(fileName: string): string | null {
   const candidates = uniqueValues([trimmedFileName, trimmedFileName.toLowerCase()]);
   for (const candidate of candidates) {
     const iconFileName = getIconForFile(candidate);
-    if (iconFileName !== DEFAULT_FILE) return iconFileName;
+    if (iconFileName && iconFileName !== DEFAULT_FILE) return iconFileName;
   }
 
   return null;
@@ -372,7 +374,7 @@ function namespaceSvgIds(svg: string, namespace: string): string {
 async function getHighlighter() {
   if (!highlighterPromise) {
     highlighterPromise = getSingletonHighlighter({
-      themes: [SHIKI_THEME],
+      themes: [...SHIKI_THEMES],
       langs: [DEFAULT_CODE_BLOCK_LANGUAGE],
     });
   }
@@ -414,7 +416,7 @@ async function ensureLanguageLoaded(
   }
 
   const loadPromise = highlighter
-    .loadLanguage(language)
+    .loadLanguage(language as keyof typeof bundledLanguages)
     .then(() => {
       loadedLanguageSet.add(language);
     })
@@ -493,7 +495,7 @@ export async function getCodeLineTokens({
   language: string;
 }): Promise<{
   normalizedLanguage: string;
-  lines: ThemedToken[][];
+  lines: CodeLineToken[][];
 }> {
   const highlighter = await getHighlighter();
   const normalizedLanguage = normalizeCodeLanguageValue(language);
@@ -523,24 +525,157 @@ export async function getCodeLineTokens({
   }
 
   try {
-    const tokenResult = highlighter.codeToTokens(code, {
-      lang: targetLanguage,
-      theme: SHIKI_THEME,
-    });
+    const themedTokenLines = getThemedTokenLines(highlighter, code, targetLanguage);
 
     return {
       normalizedLanguage: targetLanguage,
-      lines: tokenResult.tokens,
+      lines: mergeTokenLines(themedTokenLines.light, themedTokenLines.dark),
     };
   } catch {
-    const tokenResult = highlighter.codeToTokens(code, {
-      lang: DEFAULT_CODE_BLOCK_LANGUAGE,
-      theme: SHIKI_THEME,
-    });
+    const themedTokenLines = getThemedTokenLines(
+      highlighter,
+      code,
+      DEFAULT_CODE_BLOCK_LANGUAGE,
+    );
 
     return {
       normalizedLanguage: DEFAULT_CODE_BLOCK_LANGUAGE,
-      lines: tokenResult.tokens,
+      lines: mergeTokenLines(themedTokenLines.light, themedTokenLines.dark),
     };
   }
 }
+
+export type CodeLineToken = {
+  content: string;
+  color?: string;
+  darkColor?: string;
+  bgColor?: string;
+  darkBgColor?: string;
+  fontStyle?: number;
+  htmlStyle?: Record<string, string>;
+  darkHtmlStyle?: Record<string, string>;
+};
+
+function getThemedTokenLines(
+  highlighter: Awaited<ReturnType<typeof getSingletonHighlighter>>,
+  code: string,
+  lang: string,
+): {
+  light: ThemedToken[][];
+  dark: ThemedToken[][];
+} {
+  const shikiLanguage = lang as keyof typeof bundledLanguages;
+  const lightTokenResult = highlighter.codeToTokens(code, {
+    lang: shikiLanguage,
+    theme: SHIKI_LIGHT_THEME,
+  });
+  const darkTokenResult = highlighter.codeToTokens(code, {
+    lang: shikiLanguage,
+    theme: SHIKI_DARK_THEME,
+  });
+
+  return {
+    light: lightTokenResult.tokens,
+    dark: darkTokenResult.tokens,
+  };
+}
+
+function buildLightOnlyTokenLine(lightLine: ThemedToken[]): CodeLineToken[] {
+  return lightLine.map((token) => ({
+    content: token.content,
+    color: token.color,
+    bgColor: token.bgColor,
+    fontStyle: token.fontStyle,
+    htmlStyle: token.htmlStyle,
+  }));
+}
+
+function mergeTokenLineByContent(
+  lightLine: ThemedToken[],
+  darkLine: ThemedToken[],
+): CodeLineToken[] | null {
+  const lightContent = lightLine.map((token) => token.content).join("");
+  const darkContent = darkLine.map((token) => token.content).join("");
+
+  // When themes tokenize the same text with different boundaries (common for markdown),
+  // align on content segments so we can still apply dark token colors reliably.
+  if (lightContent !== darkContent) return null;
+  if (lightContent.length === 0) return [];
+
+  const mergedLine: CodeLineToken[] = [];
+  let lightTokenIndex = 0;
+  let darkTokenIndex = 0;
+  let lightTokenOffset = 0;
+  let darkTokenOffset = 0;
+
+  while (
+    lightTokenIndex < lightLine.length &&
+    darkTokenIndex < darkLine.length
+  ) {
+    const lightToken = lightLine[lightTokenIndex];
+    const darkToken = darkLine[darkTokenIndex];
+
+    if (lightTokenOffset >= lightToken.content.length) {
+      lightTokenIndex += 1;
+      lightTokenOffset = 0;
+      continue;
+    }
+
+    if (darkTokenOffset >= darkToken.content.length) {
+      darkTokenIndex += 1;
+      darkTokenOffset = 0;
+      continue;
+    }
+
+    const lightRemainingLength = lightToken.content.length - lightTokenOffset;
+    const darkRemainingLength = darkToken.content.length - darkTokenOffset;
+    const segmentLength = Math.min(lightRemainingLength, darkRemainingLength);
+    if (segmentLength <= 0) break;
+
+    const lightSegment = lightToken.content.slice(
+      lightTokenOffset,
+      lightTokenOffset + segmentLength,
+    );
+    const darkSegment = darkToken.content.slice(
+      darkTokenOffset,
+      darkTokenOffset + segmentLength,
+    );
+
+    if (lightSegment !== darkSegment) return null;
+
+    mergedLine.push({
+      content: lightSegment,
+      color: lightToken.color,
+      darkColor: darkToken.color,
+      bgColor: lightToken.bgColor,
+      darkBgColor: darkToken.bgColor,
+      fontStyle: lightToken.fontStyle,
+      htmlStyle: lightToken.htmlStyle,
+      darkHtmlStyle: darkToken.htmlStyle,
+    });
+
+    lightTokenOffset += segmentLength;
+    darkTokenOffset += segmentLength;
+  }
+
+  const mergedContent = mergedLine.map((token) => token.content).join("");
+  return mergedContent === lightContent ? mergedLine : null;
+}
+
+function mergeTokenLines(
+  lightTokenLines: ThemedToken[][],
+  darkTokenLines: ThemedToken[][],
+): CodeLineToken[][] {
+  const lineCount = Math.max(lightTokenLines.length, darkTokenLines.length);
+  const mergedLines: CodeLineToken[][] = [];
+
+  for (let lineIndex = 0; lineIndex < lineCount; lineIndex += 1) {
+    const lightLine = lightTokenLines[lineIndex] ?? [];
+    const darkLine = darkTokenLines[lineIndex] ?? [];
+
+    const mergedLine = mergeTokenLineByContent(lightLine, darkLine);
+    mergedLines.push(mergedLine ?? buildLightOnlyTokenLine(lightLine));
+  }
+
+  return mergedLines;
+}