radiant-docs 0.1.47 → 0.1.49

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

@@ -1,10 +1,9 @@
 ---
 import { validateNoUnknownProps, validateProps } from "../../lib/component-error";
-import { renderMarkdown } from "../../lib/utils";
 import { resolveStaticAssetUrl } from "../../lib/static-asset-url";
 
 interface Props {
-  src: string;
+  src: string | { light?: string; dark?: string };
   alt?: string;
   title?: string;
   width?: number | string;
@@ -24,7 +23,7 @@ validateProps(
   "Image",
   imageProps,
   {
-    src: { required: true, type: "string" },
+    src: { required: true, type: ["string", "object"] },
     alt: { type: "string" },
     title: { type: "string" },
     width: { type: ["number", "string"] },
@@ -35,17 +34,51 @@ validateProps(
 
 const { src, alt, title, width, zoom = true } = imageProps as Props;
 const zoomEnabled = zoom !== false;
-const resolvedSrc = resolveStaticAssetUrl(src);
 const rawWidth = width;
-const imageAttrs: Record<string, unknown> = { src: resolvedSrc };
-if (typeof alt === "string") {
-  imageAttrs.alt = alt;
+
+function normalizeImageSource(value: Props["src"]): {
+  light: string;
+  dark?: string;
+} {
+  if (typeof value === "string") {
+    return { light: value };
+  }
+
+  const light = typeof value.light === "string" ? value.light : "";
+  const dark = typeof value.dark === "string" ? value.dark : undefined;
+
+  return { light, dark };
+}
+
+const normalizedSource = normalizeImageSource(src);
+if (!normalizedSource.light.trim()) {
+  throw new Error(
+    `[USER_ERROR]: <Image>: Invalid prop "src": object form requires a non-empty "light" string (in ${Astro.url.pathname})`,
+  );
 }
-if (width !== undefined) {
-  imageAttrs.width = width;
+
+const resolvedLightSrc = resolveStaticAssetUrl(normalizedSource.light);
+const resolvedDarkSrc =
+  typeof normalizedSource.dark === "string" && normalizedSource.dark.trim()
+    ? resolveStaticAssetUrl(normalizedSource.dark)
+    : undefined;
+const hasDarkSource =
+  typeof resolvedDarkSrc === "string" && resolvedDarkSrc !== resolvedLightSrc;
+
+function createImageAttrs(source: string): Record<string, unknown> {
+  const attrs: Record<string, unknown> = { src: source };
+  if (typeof alt === "string") {
+    attrs.alt = alt;
+  }
+  if (width !== undefined) {
+    attrs.width = width;
+  }
+  return attrs;
 }
 
-const zoomAttrs: Record<string, unknown> = { src: resolvedSrc };
+const lightImageAttrs = createImageAttrs(resolvedLightSrc);
+const darkImageAttrs = hasDarkSource ? createImageAttrs(resolvedDarkSrc!) : null;
+const zoomAttrs: Record<string, unknown> = { src: resolvedLightSrc };
 if (typeof alt === "string") {
   zoomAttrs.alt = alt;
 }
@@ -83,15 +116,15 @@ function isConstrainedWidthValue(value: unknown): boolean {
 
 const hasCustomImageWidth = isConstrainedWidthValue(rawWidth);
 
-const captionHtml =
-  typeof title === "string" && title.trim().length > 0
-    ? (await renderMarkdown(title)).replace(/^<p>([\s\S]*)<\/p>\n?$/, "$1")
-    : "";
+const slotCaptionHtml = Astro.slots.has("default")
+  ? (await Astro.slots.render("default")).trim()
+  : "";
+const hasCaption = slotCaptionHtml.length > 0;
 ---
 
 <figure
   class:list={[
-    "rd-prose-block 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",
+    "rd-prose-block p-1.5 pb-1 xs:pb-1.5 group border-[0.5px] border-neutral-900/8 dark:border-white/6 bg-(--rd-code-surface) rounded-2xl shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-8px_rgba(0,0,0,0.08)] dark:shadow-[0_-.5px_1px_rgba(255,255,255,0.15),0_5px_12px_-8px_rgba(0,0,0,0.2)]",
     hasCustomImageWidth ? "w-fit max-w-full mx-auto" : "w-full",
   ]}
   x-data="{ 
@@ -102,8 +135,16 @@ const captionHtml =
     style: 'visibility: hidden;',
     fullShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
     noShadow: '0 0 0 rgba(0, 0, 0, 0)',
+    zoomSrc: '',
+    activeImage() {
+      const darkImg = this.$refs.darkImg;
+      if (darkImg && window.getComputedStyle(darkImg).display !== 'none') {
+        return darkImg;
+      }
+      return this.$refs.lightImg;
+    },
     computeZoomSize() {
-      const img = this.$refs.img;
+      const img = this.activeImage();
       const zoomContainer = this.$refs.zoomViewport;
       if (!img || !zoomContainer) {
         this.zoomSize = `width: min(92vw, ${this.zoomMaxWidth}px);`;
@@ -138,9 +179,12 @@ const captionHtml =
       return this.zoomSize;
     },
     async zoom() {
+      const img = this.activeImage();
+      if (!img) return;
       // 1. Lock scroll and measure
       document.body.style.overflow = 'hidden';
-      const rect = this.$refs.img.getBoundingClientRect();
+      this.zoomSrc = img.currentSrc || img.src;
+      const rect = img.getBoundingClientRect();
       
       // 2. Prepare the zoomed image (hidden but in DOM)
       this.style = 'opacity: 0; transition: none;';
@@ -176,7 +220,9 @@ const captionHtml =
     },
     close() {
       document.body.style.overflow = 'auto';
-      const rect = this.$refs.img.getBoundingClientRect();
+      const img = this.activeImage();
+      if (!img) return;
+      const rect = img.getBoundingClientRect();
       const zRect = this.$refs.zoomedImg.getBoundingClientRect();
       
       const scale = rect.width / zRect.width;
@@ -194,25 +240,42 @@ const captionHtml =
   }"
 >
   <div
-    class="overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-(--rd-code-surface)"
+    class="overflow-hidden rounded-[11px]"
   >
     <img
-      {...imageAttrs}
-      x-ref="img"
+      {...lightImageAttrs}
+      x-ref="lightImg"
       title={title}
       class:list={[
         "h-auto my-0! block transition-opacity",
+        hasDarkSource && "dark:hidden",
         zoomEnabled && "cursor-zoom-in",
         hasCustomImageWidth ? "max-w-full" : "w-full",
       ]}
       :class="showZoomed ? 'opacity-0 duration-0' : 'opacity-100 duration-300'"
       @click={zoomEnabled ? "zoom()" : undefined}
     />
+    {
+      darkImageAttrs && (
+        <img
+          {...darkImageAttrs}
+          x-ref="darkImg"
+          title={title}
+          class:list={[
+            "h-auto my-0! hidden transition-opacity dark:block",
+            zoomEnabled && "cursor-zoom-in",
+            hasCustomImageWidth ? "max-w-full" : "w-full",
+          ]}
+          :class="showZoomed ? 'opacity-0 duration-0' : 'opacity-100 duration-300'"
+          @click={zoomEnabled ? "zoom()" : undefined}
+        />
+      )
+    }
   </div>
   {
-    title && (
-      <figcaption class="mt-1! xs:mt-1.5! text-center text-xs! xs:text-sm! text-neutral-500 dark:text-neutral-400 font-medium whitespace-pre-line leading-relaxed px-2">
-        <span set:html={captionHtml} />
+    hasCaption && (
+      <figcaption class="prose-rules mt-1! xs:mt-1.5! max-w-none! *:max-w-none! text-center text-xs! xs:text-sm! text-neutral-500 dark:text-neutral-400 leading-relaxed px-2">
+        <Fragment set:html={slotCaptionHtml} />
       </figcaption>
     )
   }
@@ -243,6 +306,7 @@ const captionHtml =
           <img
             {...zoomAttrs}
             x-ref="zoomedImg"
+            :src="zoomSrc || $el.getAttribute('src')"
             class="relative z-10 max-w-full max-h-full object-contain rounded-2xl shadow-none will-change-transform pointer-events-none"
             :style="style"
           />

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

@@ -21,14 +21,14 @@ validateProps(
 <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] dark:before:bg-linear-[transparent,var(--color-neutral-700)_10%,var(--color-neutral-700)_90%,transparent]",
+    "before:mask-b-from-90% before:absolute before:left-[13.25px] before:top-[28px] before:bottom-0 before:w-[1.5px] before:bg-neutral-900/8 dark:before:bg-neutral-50/8",
   ]}
   data-step-panel
 >
   <div
     class:list={[
       "flex items-center gap-1.5 not-prose",
-      "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",
+      "step-number before:leading-none before:size-7 before:bg-neutral-900/6 dark:before:bg-neutral-50/6 before:rounded-full before:text-neutral-700 dark:before:text-neutral-100 before:flex before:items-center before:justify-center before:text-[13px] before:font-medium before:absolute before:left-0 before:top-0",
     ]}
   >
     <h3 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100">

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

@@ -30,12 +30,33 @@ if (labels.length === 0) {
   previousTab: null,
   transitionDirection: 1,
   isTransitioning: false,
-  transitionDurationMs: 300,
+  transitionDurationMs: 400,
+  transitionEasing: 'cubic-bezier(0.22, 1, 0.36, 1)',
   transitionTimeout: null,
   containerHeight: 'auto',
   markerStyle: { left: null, width: null },
   resizeHandler: null,
+  readMotionTokens() {
+    const styles = window.getComputedStyle(document.documentElement);
+    const configuredDurationMs = Number.parseFloat(
+      styles.getPropertyValue('--rd-panel-transition-duration-ms'),
+    );
+    this.transitionDurationMs = Number.isFinite(configuredDurationMs)
+      ? configuredDurationMs
+      : this.transitionDurationMs;
+    this.transitionEasing =
+      styles.getPropertyValue('--rd-panel-transition-easing').trim() ||
+      this.transitionEasing;
+
+    if (
+      typeof window.matchMedia === 'function' &&
+      window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    ) {
+      this.transitionDurationMs = 0;
+    }
+  },
   init() {
+    this.readMotionTokens();
     this.resizeHandler = () => {
       this.updateMarker(this.activeTab);
       this.updateHeight(this.isTransitioning);
@@ -68,7 +89,7 @@ if (labels.length === 0) {
     this.isTransitioning = true;
     this.activeTab = index;
     this.updateMarker(this.activeTab);
-    this.updateHeight(true);
+    this.updateHeight();
 
     this.transitionTimeout = window.setTimeout(() => {
       this.isTransitioning = false;
@@ -87,7 +108,7 @@ if (labels.length === 0) {
     }
   },
   getPanelStyle(index) {
-    const base = 'position: absolute; inset: 0;';
+    const base = 'position: absolute; top: 0; left: 0; right: 0; width: 100%;';
 
     const isActive = index === this.activeTab;
     const isPrevious = this.isTransitioning && index === this.previousTab;
@@ -105,29 +126,23 @@ if (labels.length === 0) {
         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;`;
+      return `${base} opacity: 1; pointer-events: auto; visibility: visible; z-index: 2; animation: ${animationName} ${this.transitionDurationMs}ms ${this.transitionEasing} 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;`;
+    return `${base} opacity: 1; pointer-events: none; visibility: visible; z-index: 1; animation: ${animationName} ${this.transitionDurationMs}ms ${this.transitionEasing} both;`;
   },
-  updateHeight(includePrevious = false) {
+  updateHeight() {
     this.$nextTick(() => {
       const activeSlide = this.$refs['content-' + this.activeTab];
       if (!activeSlide) return;
+      const activeContent = activeSlide.querySelector('[data-rd-tabs-panel-content]');
+      const measuredElement = activeContent || activeSlide;
 
-      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';
+      this.containerHeight = measuredElement.scrollHeight + 'px';
     });
   }
 }"
@@ -167,19 +182,28 @@ class="rd-prose-block">
   </ul>
 
   <div 
-    class="relative mt-4 overflow-hidden transition-[height] duration-300 ease-in-out"
-    :style="'height: ' + containerHeight"
+    class="relative mt-4 overflow-visible transition-[height] motion-reduce:transition-none"
+    :style="'height: ' + containerHeight + '; transition-duration: ' + transitionDurationMs + 'ms; transition-timing-function: ' + transitionEasing + ';'"
   >
-    { tabContents.map((content, index) => (
-      <div
-        {...(index !== 0 ? { "x-cloak": true } : {})}
-        x-ref={`content-${index}`}
-        class="prose-rules w-full max-w-none! *:max-w-none!"
-        :style={`getPanelStyle(${index})`}
-        style={index === 0 ? 'position: relative;' : ''}
-        set:html={content}
-      />
-    )) }
+    <div class="relative -mx-4 h-full overflow-x-clip overflow-y-visible">
+      <div class="relative mx-4 h-full">
+        { tabContents.map((content, index) => (
+          <div
+            {...(index !== 0 ? { "x-cloak": true } : {})}
+            x-ref={`content-${index}`}
+            class="w-full"
+            :style={`getPanelStyle(${index})`}
+            style={index === 0 ? 'position: relative;' : ''}
+          >
+            <div
+              data-rd-tabs-panel-content
+              class="prose-rules w-full max-w-none! *:max-w-none!"
+              set:html={content}
+            />
+          </div>
+        )) }
+      </div>
+    </div>
   </div>
 </div>
 
@@ -187,36 +211,44 @@ class="rd-prose-block">
   @keyframes rd-tabs-slide-in-from-right {
     from {
       transform: translateX(100%);
+      opacity: 0;
     }
     to {
       transform: translateX(0);
+      opacity: 1;
     }
   }
 
   @keyframes rd-tabs-slide-in-from-left {
     from {
       transform: translateX(-100%);
+      opacity: 0;
     }
     to {
       transform: translateX(0);
+      opacity: 1;
     }
   }
 
   @keyframes rd-tabs-slide-out-to-left {
     from {
       transform: translateX(0);
+      opacity: 1;
     }
     to {
       transform: translateX(-100%);
+      opacity: 0;
     }
   }
 
   @keyframes rd-tabs-slide-out-to-right {
     from {
       transform: translateX(0);
+      opacity: 1;
     }
     to {
       transform: translateX(100%);
+      opacity: 0;
     }
   }
 </style>

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

@@ -7,6 +7,12 @@ import {
   type ThemedToken,
 } from "shiki";
 import { DEFAULT_FILE, getIconForFile } from "vscode-icons-js";
+import { getConfig } from "../validation";
+import {
+  DEFAULT_SHIKI_DARK_THEME,
+  DEFAULT_SHIKI_LIGHT_THEME,
+  type CodeSyntaxThemeByMode,
+} from "./shiki-theme-config";
 
 export const DEFAULT_CODE_BLOCK_LANGUAGE = "plaintext";
 
@@ -137,9 +143,8 @@ const CODE_BLOCK_LANGUAGE_ICON_FILE_BY_VALUE: Record<string, string> = {
   yaml: "file_type_yaml_official.svg",
 };
 
-const SHIKI_LIGHT_THEME = "github-light";
-const SHIKI_DARK_THEME = "github-dark";
-const SHIKI_THEMES = [SHIKI_LIGHT_THEME, SHIKI_DARK_THEME] as const;
+const SHIKI_LIGHT_LINE_HIGHLIGHT_FALLBACK = "#f6f8fa";
+const SHIKI_DARK_LINE_HIGHLIGHT_FALLBACK = "#2b3036";
 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.
@@ -159,6 +164,7 @@ let iconFileNameSetPromise: Promise<Set<string>> | null = null;
 let highlighterPromise:
   | Promise<Awaited<ReturnType<typeof getSingletonHighlighter>>>
   | null = null;
+let highlighterThemeKey = "";
 const loadedLanguageSet = new Set<string>([DEFAULT_CODE_BLOCK_LANGUAGE]);
 const languageLoadPromiseByName = new Map<string, Promise<void>>();
 
@@ -371,10 +377,30 @@ function namespaceSvgIds(svg: string, namespace: string): string {
   return namespacedSvg;
 }
 
-async function getHighlighter() {
-  if (!highlighterPromise) {
+async function getConfiguredCodeSyntaxThemes(): Promise<CodeSyntaxThemeByMode> {
+  const config = await getConfig();
+  const configuredSyntaxTheme = config.theme?.code?.syntaxTheme;
+
+  if (typeof configuredSyntaxTheme === "string") {
+    return {
+      light: configuredSyntaxTheme,
+      dark: configuredSyntaxTheme,
+    };
+  }
+
+  return {
+    light: configuredSyntaxTheme?.light ?? DEFAULT_SHIKI_LIGHT_THEME,
+    dark: configuredSyntaxTheme?.dark ?? DEFAULT_SHIKI_DARK_THEME,
+  };
+}
+
+async function getHighlighter(syntaxThemes: CodeSyntaxThemeByMode) {
+  const nextThemeKey = `${syntaxThemes.light}\u0000${syntaxThemes.dark}`;
+
+  if (!highlighterPromise || highlighterThemeKey !== nextThemeKey) {
+    highlighterThemeKey = nextThemeKey;
     highlighterPromise = getSingletonHighlighter({
-      themes: [...SHIKI_THEMES],
+      themes: Array.from(new Set([syntaxThemes.light, syntaxThemes.dark])),
       langs: [DEFAULT_CODE_BLOCK_LANGUAGE],
     });
   }
@@ -382,6 +408,40 @@ async function getHighlighter() {
   return highlighterPromise;
 }
 
+function getThemeColor(
+  highlighter: Awaited<ReturnType<typeof getSingletonHighlighter>>,
+  themeName: string,
+  colorName: string,
+  fallback: string,
+): string {
+  const colorValue = highlighter.getTheme(themeName)?.colors?.[colorName];
+  return typeof colorValue === "string" && colorValue.trim().length > 0
+    ? colorValue.trim()
+    : fallback;
+}
+
+function getCodeThemeColors(
+  highlighter: Awaited<ReturnType<typeof getSingletonHighlighter>>,
+  syntaxThemes: CodeSyntaxThemeByMode,
+): CodeThemeColors {
+  return {
+    lineHighlightBackground: {
+      light: getThemeColor(
+        highlighter,
+        syntaxThemes.light,
+        "editor.lineHighlightBackground",
+        SHIKI_LIGHT_LINE_HIGHLIGHT_FALLBACK,
+      ),
+      dark: getThemeColor(
+        highlighter,
+        syntaxThemes.dark,
+        "editor.lineHighlightBackground",
+        SHIKI_DARK_LINE_HIGHLIGHT_FALLBACK,
+      ),
+    },
+  };
+}
+
 function resolveLoadableLanguage(
   highlighter: Awaited<ReturnType<typeof getSingletonHighlighter>>,
   normalizedLanguage: string,
@@ -496,8 +556,11 @@ export async function getCodeLineTokens({
 }): Promise<{
   normalizedLanguage: string;
   lines: CodeLineToken[][];
+  themeColors: CodeThemeColors;
 }> {
-  const highlighter = await getHighlighter();
+  const syntaxThemes = await getConfiguredCodeSyntaxThemes();
+  const highlighter = await getHighlighter(syntaxThemes);
+  const themeColors = getCodeThemeColors(highlighter, syntaxThemes);
   const normalizedLanguage = normalizeCodeLanguageValue(language);
   const loadableLanguage = resolveLoadableLanguage(
     highlighter,
@@ -525,26 +588,41 @@ export async function getCodeLineTokens({
   }
 
   try {
-    const themedTokenLines = getThemedTokenLines(highlighter, code, targetLanguage);
+    const themedTokenLines = getThemedTokenLines(
+      highlighter,
+      code,
+      targetLanguage,
+      syntaxThemes,
+    );
 
     return {
       normalizedLanguage: targetLanguage,
       lines: mergeTokenLines(themedTokenLines.light, themedTokenLines.dark),
+      themeColors,
     };
   } catch {
     const themedTokenLines = getThemedTokenLines(
       highlighter,
       code,
       DEFAULT_CODE_BLOCK_LANGUAGE,
+      syntaxThemes,
     );
 
     return {
       normalizedLanguage: DEFAULT_CODE_BLOCK_LANGUAGE,
       lines: mergeTokenLines(themedTokenLines.light, themedTokenLines.dark),
+      themeColors,
     };
   }
 }
 
+export type CodeThemeColors = {
+  lineHighlightBackground: {
+    light: string;
+    dark: string;
+  };
+};
+
 export type CodeLineToken = {
   content: string;
   color?: string;
@@ -560,6 +638,7 @@ function getThemedTokenLines(
   highlighter: Awaited<ReturnType<typeof getSingletonHighlighter>>,
   code: string,
   lang: string,
+  syntaxThemes: CodeSyntaxThemeByMode,
 ): {
   light: ThemedToken[][];
   dark: ThemedToken[][];
@@ -567,11 +646,11 @@ function getThemedTokenLines(
   const shikiLanguage = lang as keyof typeof bundledLanguages;
   const lightTokenResult = highlighter.codeToTokens(code, {
     lang: shikiLanguage,
-    theme: SHIKI_LIGHT_THEME,
+    theme: syntaxThemes.light,
   });
   const darkTokenResult = highlighter.codeToTokens(code, {
     lang: shikiLanguage,
-    theme: SHIKI_DARK_THEME,
+    theme: syntaxThemes.dark,
   });
 
   return {

package/template/src/lib/code/shiki-theme-config.ts

@@ -0,0 +1,16 @@
+import { bundledThemes } from "shiki";
+
+export const DEFAULT_SHIKI_LIGHT_THEME = "github-light";
+export const DEFAULT_SHIKI_DARK_THEME = "github-dark";
+
+export type CodeSyntaxThemeByMode = {
+  light: string;
+  dark: string;
+};
+
+export const SHIKI_BUNDLED_THEME_NAMES = Object.keys(bundledThemes).sort();
+const SHIKI_BUNDLED_THEME_NAME_SET = new Set(SHIKI_BUNDLED_THEME_NAMES);
+
+export function isBundledShikiThemeName(value: string): boolean {
+  return SHIKI_BUNDLED_THEME_NAME_SET.has(value);
+}