radiant-docs 0.1.48 → 0.1.50

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

@@ -60,16 +60,20 @@ const isInitiallyExpanded = shouldShowAllCode || totalLineCount <= visibleLines;
 ---
 
 <div
-  class="rd-prose-block rd-component-preview flex w-full max-w-full min-w-0 flex-col"
+  class="rd-prose-block rd-component-preview isolate flex w-full max-w-full min-w-0 flex-col"
   data-rd-component-preview-root="true"
 >
   <div
-    class="w-full max-w-full min-w-0 overflow-x-auto rounded-t-xl border border-b-0 bg-white dark:bg-neutral-800/15 p-4 xs:p-6 sm:p-12 shadow-xs [&>:first-child]:mt-0! [&>:last-child]:mb-0!"
+    class="relative z-10 w-full max-w-full min-w-0 rounded-t-xl border-[0.5px] border-b-0 border-(--rd-code-tab-edge-border) bg-(--rd-code-surface) p-2"
   >
-    <slot />
+    <div
+      class="bg-white dark:bg-neutral-900/70 rounded-xl border-[0.5px] border-neutral-900/10 dark:border-white/8 p-4 xs:p-6 sm:p-9 sm:px-12 *:first:mt-0! *:last:mb-0! shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-8px_rgba(0,0,0,0.08)] dark:shadow-[0_-0.5px_1px_rgba(255,255,255,0.1),0_5px_12px_-4px_rgba(0,0,0,0.15)] overflow-x-auto"
+    >
+      <slot />
+    </div>
   </div>
   <div
-    class="rd-component-preview__code not-prose relative overflow-hidden rounded-b-xl bg-neutral-50 dark:bg-(--rd-code-surface)"
+    class="rd-component-preview__code not-prose relative z-0 overflow-hidden rounded-b-xl"
     data-rd-preview-expanded={isInitiallyExpanded ? "true" : "false"}
     style={{ "--rd-preview-visible-lines": String(visibleLines) }}
   >
@@ -82,16 +86,19 @@ const isInitiallyExpanded = shouldShowAllCode || totalLineCount <= visibleLines;
       hideLanguageIcon={hideLanguageIcon}
       highlightedLines={highlightedLines}
       collapsedLines={collapsedLines}
+      flushTop
     />
     <div
-      class="rd-component-preview__overlay pointer-events-none absolute inset-x-px inset-y-px hidden items-end justify-center rounded-b-xl pb-4"
+      class="rd-component-preview__overlay pointer-events-none absolute inset-0 hidden items-end justify-center rounded-b-xl pb-4"
       data-rd-preview-overlay
       aria-hidden="true"
     >
-      <div class="bg-white dark:bg-neutral-800">
+      <div
+        class="bg-white dark:bg-neutral-800 rounded-xl [corner-shape:superellipse(1.2)]"
+      >
         <button
           type="button"
-          class="pointer-events-auto inline-flex h-8 items-center justify-center rounded-md border border-neutral-200 bg-white px-3 text-sm font-medium text-neutral-700 shadow-xl transition-colors duration-150 hover:bg-neutral-50 cursor-pointer dark:border-neutral-700 dark:bg-neutral-700/30 dark:text-neutral-200 dark:hover:bg-neutral-700/50"
+          class="pointer-events-auto inline-flex h-8 items-center justify-center rounded-xl [corner-shape:superellipse(1.2)] border-[0.5px] border-neutral-900/10 dark:border-white/8 bg-linear-to-br from-white via-white/10 to-neutral-900/5 dark:from-white/7 dark:via-white/6 dark:to-white/2 px-3 text-sm font-medium text-neutral-600 hover:text-neutral-900 dark:text-neutral-300/90 hover:dark:text-neutral-200 transition-colors duration-200 hover:bg-neutral-50/80 cursor-pointer dark:hover:bg-neutral-700/30 shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-4px_rgba(0,0,0,0.08)] dark:shadow-[0_-0.5px_0px_rgba(255,255,255,0.15),0_5px_12px_-4px_rgba(0,0,0,0.18)]"
           data-rd-preview-expand
         >
           View code
@@ -174,36 +181,37 @@ const isInitiallyExpanded = shouldShowAllCode || totalLineCount <= visibleLines;
   .rd-component-preview__code[data-rd-preview-expanded="false"]
     .rd-component-preview__overlay {
     display: flex;
-    background: linear-gradient(
-      to top,
-      rgb(250 250 250 / 90%),
-      rgb(250 250 250 / 30%)
-    );
-  }
-
-  :global(.dark)
-    .rd-component-preview__code[data-rd-preview-expanded="false"]
-    .rd-component-preview__overlay {
-    background: linear-gradient(
-      to top,
-      color-mix(in srgb, var(--rd-code-surface) 90%, transparent),
-      color-mix(in srgb, var(--rd-code-surface) 35%, transparent)
-    );
   }
 
   .rd-component-preview__code :global([data-rd-code-scroll-area]) {
     overflow-y: hidden;
-    transition: max-height 280ms cubic-bezier(0.22, 1, 0.36, 1);
+    transition:
+      max-height 280ms cubic-bezier(0.22, 1, 0.36, 1),
+      mask-image 180ms ease-out;
   }
 
   .rd-component-preview__code[data-rd-preview-expanded="false"]
     :global([data-rd-code-scroll-area]) {
-    max-height: calc(var(--rd-preview-visible-lines, 5) * 1.5rem + 1.25rem);
+    max-height: calc(var(--rd-preview-visible-lines, 5) * 1.5rem + 0.75rem);
+    -webkit-mask-image: linear-gradient(
+      to bottom,
+      rgb(0 0 0 / 80%) 0%,
+      rgb(0 0 0 / 32%) 82%,
+      transparent 110%
+    );
+    mask-image: linear-gradient(
+      to bottom,
+      rgb(0 0 0 / 80%) 0%,
+      rgb(0 0 0 / 32%) 82%,
+      transparent 110%
+    );
   }
 
   .rd-component-preview__code[data-rd-preview-expanded="true"]
     :global([data-rd-code-scroll-area]) {
     max-height: var(--rd-preview-expanded-height, 200rem);
+    -webkit-mask-image: none;
+    mask-image: none;
   }
 </style>
 

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 };
 }
-if (width !== undefined) {
-  imageAttrs.width = width;
+
+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})`,
+  );
 }
 
-const zoomAttrs: Record<string, unknown> = { src: resolvedSrc };
+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 lightImageAttrs = createImageAttrs(resolvedLightSrc);
+const darkImageAttrs = hasDarkSource ? createImageAttrs(resolvedDarkSrc!) : null;
+const zoomAttrs: Record<string, unknown> = { src: resolvedLightSrc };
 if (typeof alt === "string") {
   zoomAttrs.alt = alt;
 }
@@ -81,17 +114,33 @@ function isConstrainedWidthValue(value: unknown): boolean {
   return true;
 }
 
+function toCssWidthValue(value: unknown): string | undefined {
+  if (typeof value === "number") {
+    if (!Number.isFinite(value) || value <= 0) return undefined;
+    return `${value}px`;
+  }
+
+  if (typeof value !== "string") return undefined;
+  const normalized = value.trim();
+  if (!normalized) return undefined;
+
+  return /^-?\d*\.?\d+$/.test(normalized) ? `${normalized}px` : normalized;
+}
+
 const hasCustomImageWidth = isConstrainedWidthValue(rawWidth);
+const contentWidthStyle = hasCustomImageWidth
+  ? `width: ${toCssWidthValue(rawWidth) ?? "auto"};`
+  : undefined;
 
-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 +151,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 +195,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 +236,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,28 +256,46 @@ 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:list={["max-w-full", !hasCustomImageWidth && "w-full"]}
+    style={contentWidthStyle}
   >
-    <img
-      {...imageAttrs}
-      x-ref="img"
-      title={title}
-      class:list={[
-        "h-auto my-0! block transition-opacity",
-        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 class="overflow-hidden rounded-[11px]">
+      <img
+        {...lightImageAttrs}
+        x-ref="lightImg"
+        title={title}
+        class:list={[
+          "h-auto my-0! block w-full transition-opacity",
+          hasDarkSource && "dark:hidden",
+          zoomEnabled && "cursor-zoom-in",
+        ]}
+        :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 w-full transition-opacity dark:block",
+              zoomEnabled && "cursor-zoom-in",
+            ]}
+            :class="showZoomed ? 'opacity-0 duration-0' : 'opacity-100 duration-300'"
+            @click={zoomEnabled ? "zoom()" : undefined}
+          />
+        )
+      }
+    </div>
+    {
+      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>
+      )
+    }
   </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} />
-      </figcaption>
-    )
-  }
 
   {
     zoomEnabled && (
@@ -243,6 +323,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>