radiant-docs 0.1.38 → 0.1.40

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

@@ -4,7 +4,7 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
 ---
 
 <div
-  class="group/prose-code-group not-prose relative my-6 w-full max-w-full min-w-0"
+  class="group/prose-code-group not-prose relative my-6 w-full max-w-full min-w-0 shadow-xs rounded-xl"
   data-rd-code-group-root="true"
 >
   <div
@@ -19,7 +19,7 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
           <div
             data-rd-code-group-pill
             aria-hidden="true"
-            class="pointer-events-none absolute top-1/2 z-0 h-[28px] -translate-y-1/2 rounded-[9px] border-[0.5px] border-neutral-200 bg-white shadow-xs opacity-0 transition-[left,width,opacity] duration-200 ease-out dark:border-neutral-700/70 dark:bg-(--rd-code-surface)"
+            class="pointer-events-none absolute top-1/2 z-0 h-[28px] -translate-y-1/2 rounded-[9px] border-[0.5px] border-neutral-200 bg-white opacity-0 transition-[left,width,opacity] duration-200 ease-out dark:border-neutral-700/70 dark:bg-(--rd-code-surface)"
           >
           </div>
         </div>
@@ -58,10 +58,13 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
     </div>
   </div>
 
-  <div data-rd-code-group-content class="min-w-0">
+  <div
+    data-rd-code-group-content
+    class="relative min-w-0 overflow-hidden transition-[height] duration-300 ease-in-out"
+  >
     <slot />
   </div>
-  <script is:inline>
+  <script is:inline data-astro-rerun>
     (() => {
       const script = document.currentScript;
       if (!(script instanceof HTMLScriptElement)) return;
@@ -74,14 +77,27 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
       const pillElement = root.querySelector("[data-rd-code-group-pill]");
       const copyButton = root.querySelector("[data-rd-copy-trigger='true']");
 
-      if (!contentElement || !tabsElement || !pillElement) return;
+      if (
+        !(contentElement instanceof HTMLElement) ||
+        !(tabsElement instanceof HTMLElement) ||
+        !(pillElement instanceof HTMLElement)
+      ) {
+        return;
+      }
 
       const codeItems = Array.from(
         contentElement.querySelectorAll("[data-rd-code-group-item='true']"),
-      );
+      ).filter((item) => item instanceof HTMLElement);
       if (codeItems.length === 0) return;
 
+      const prefersReducedMotion =
+        typeof window.matchMedia === "function" &&
+        window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      const TRANSITION_DURATION_MS = prefersReducedMotion ? 0 : 300;
+
       let activeIndex = 0;
+      let transitionTimeoutId = null;
+      let activeItemResizeObserver = null;
 
       const setCopiedState = (button, copied) => {
         const copyIcon = button.querySelector("[data-rd-copy-icon]");
@@ -146,14 +162,28 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
         tabWrapper.appendChild(tabButton);
         tabsElement.appendChild(tabWrapper);
 
+        const panelCandidate = itemElement.querySelector(
+          "[data-rd-code-group-panel='true']",
+        );
+        const panelElement =
+          panelCandidate instanceof HTMLElement ? panelCandidate : itemElement;
+        const frameElement =
+          itemElement.firstElementChild instanceof HTMLElement
+            ? itemElement.firstElementChild
+            : null;
+
         return {
           itemElement,
+          panelElement,
+          frameElement,
           tabWrapper,
           tabButton,
           iconContainer,
         };
       });
 
+      contentElement.style.transitionDuration = `${TRANSITION_DURATION_MS}ms`;
+
       const syncPill = () => {
         const activeTab = tabs[activeIndex]?.tabWrapper;
         if (!activeTab) {
@@ -172,10 +202,9 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
         pillElement.classList.add("opacity-100");
       };
 
-      const syncActiveTab = () => {
-        tabs.forEach(({ itemElement, tabButton, iconContainer }, index) => {
+      const updateTabButtonStates = () => {
+        tabs.forEach(({ tabButton, iconContainer }, index) => {
           const isActive = index === activeIndex;
-          itemElement.style.display = isActive ? "" : "none";
           tabButton.classList.toggle("text-foreground", isActive);
           tabButton.classList.toggle("text-muted-foreground", !isActive);
 
@@ -186,11 +215,163 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
         syncPill();
       };
 
+      const getItemOuterHeight = (itemElement) => {
+        const frameElement =
+          itemElement.firstElementChild instanceof HTMLElement
+            ? itemElement.firstElementChild
+            : null;
+        if (frameElement) {
+          const frameRectHeight = frameElement.getBoundingClientRect().height;
+          if (Number.isFinite(frameRectHeight) && frameRectHeight > 0) {
+            return Math.ceil(frameRectHeight);
+          }
+
+          const frameOffsetHeight = frameElement.offsetHeight;
+          if (Number.isFinite(frameOffsetHeight) && frameOffsetHeight > 0) {
+            return frameOffsetHeight;
+          }
+        }
+
+        const rectHeight = itemElement.getBoundingClientRect().height;
+        if (Number.isFinite(rectHeight) && rectHeight > 0) {
+          return Math.ceil(rectHeight);
+        }
+
+        const offsetHeight = itemElement.offsetHeight;
+        if (Number.isFinite(offsetHeight) && offsetHeight > 0) {
+          return offsetHeight;
+        }
+
+        return itemElement.scrollHeight;
+      };
+
+      const syncContentHeight = () => {
+        const activeItem = tabs[activeIndex]?.itemElement;
+        if (!activeItem) return;
+        contentElement.style.height = `${getItemOuterHeight(activeItem)}px`;
+      };
+
+      const observeActiveItemHeight = () => {
+        if (activeItemResizeObserver) {
+          activeItemResizeObserver.disconnect();
+          activeItemResizeObserver = null;
+        }
+
+        if (typeof ResizeObserver === "undefined") return;
+
+        const activeItem = tabs[activeIndex]?.itemElement;
+        if (!activeItem) return;
+
+        activeItemResizeObserver = new ResizeObserver(() => {
+          if (transitionTimeoutId !== null) return;
+          syncContentHeight();
+        });
+        activeItemResizeObserver.observe(activeItem);
+      };
+
+      const setPanelsToRestState = () => {
+        tabs.forEach(({ itemElement, panelElement, frameElement }, index) => {
+          const isActive = index === activeIndex;
+          itemElement.style.position = isActive ? "relative" : "absolute";
+          itemElement.style.inset = isActive ? "" : "0";
+          itemElement.style.opacity = isActive ? "1" : "0";
+          itemElement.style.visibility = isActive ? "visible" : "hidden";
+          itemElement.style.pointerEvents = isActive ? "auto" : "none";
+          itemElement.style.zIndex = isActive ? "1" : "0";
+          panelElement.style.transform = "translateX(0)";
+          panelElement.style.animation = "none";
+          panelElement.style.willChange = "auto";
+          if (frameElement) {
+            frameElement.style.height = "";
+          }
+        });
+      };
+
+      const normalizeToCurrentState = () => {
+        setPanelsToRestState();
+        syncContentHeight();
+        observeActiveItemHeight();
+      };
+
+      const transitionToIndex = (nextIndex) => {
+        if (nextIndex === activeIndex) return;
+
+        if (transitionTimeoutId !== null) {
+          window.clearTimeout(transitionTimeoutId);
+          transitionTimeoutId = null;
+          normalizeToCurrentState();
+        }
+
+        const previousIndex = activeIndex;
+        const direction = nextIndex > previousIndex ? 1 : -1;
+        activeIndex = nextIndex;
+        updateTabButtonStates();
+
+        const previousTab = tabs[previousIndex];
+        const nextTab = tabs[nextIndex];
+        const previousItem = previousTab?.itemElement;
+        const nextItem = nextTab?.itemElement;
+        const previousPanel = previousTab?.panelElement;
+        const nextPanel = nextTab?.panelElement;
+        const previousFrame = previousTab?.frameElement;
+        const nextFrame = nextTab?.frameElement;
+        if (!previousItem || !nextItem || !previousPanel || !nextPanel) {
+          normalizeToCurrentState();
+          return;
+        }
+
+        const previousHeight = getItemOuterHeight(previousItem);
+        const nextHeight = getItemOuterHeight(nextItem);
+        contentElement.style.height = `${previousHeight}px`;
+        if (TRANSITION_DURATION_MS === 0) {
+          contentElement.style.height = `${nextHeight}px`;
+        } else {
+          requestAnimationFrame(() => {
+            contentElement.style.height = `${nextHeight}px`;
+          });
+        }
+
+        previousItem.style.position = "absolute";
+        previousItem.style.inset = "0";
+        previousItem.style.opacity = "1";
+        previousItem.style.visibility = "visible";
+        previousItem.style.pointerEvents = "none";
+        previousItem.style.zIndex = "1";
+        previousPanel.style.transform = "translateX(0)";
+        previousPanel.style.willChange = "transform";
+        if (previousFrame) {
+          previousFrame.style.height = "100%";
+        }
+        previousPanel.style.animation =
+          direction === 1
+            ? `rd-code-group-slide-out-to-left ${TRANSITION_DURATION_MS}ms ease-in-out both`
+            : `rd-code-group-slide-out-to-right ${TRANSITION_DURATION_MS}ms ease-in-out both`;
+
+        nextItem.style.position = "absolute";
+        nextItem.style.inset = "0";
+        nextItem.style.opacity = "1";
+        nextItem.style.visibility = "visible";
+        nextItem.style.pointerEvents = "auto";
+        nextItem.style.zIndex = "2";
+        nextPanel.style.transform = "translateX(0)";
+        nextPanel.style.willChange = "transform";
+        if (nextFrame) {
+          nextFrame.style.height = "100%";
+        }
+        nextPanel.style.animation =
+          direction === 1
+            ? `rd-code-group-slide-in-from-right ${TRANSITION_DURATION_MS}ms ease-in-out both`
+            : `rd-code-group-slide-in-from-left ${TRANSITION_DURATION_MS}ms ease-in-out both`;
+
+        transitionTimeoutId = window.setTimeout(() => {
+          transitionTimeoutId = null;
+          normalizeToCurrentState();
+        }, TRANSITION_DURATION_MS);
+      };
+
       tabs.forEach(({ tabButton }, index) => {
         tabButton.addEventListener("click", () => {
-          if (activeIndex === index) return;
-          activeIndex = index;
-          syncActiveTab();
+          transitionToIndex(index);
         });
       });
 
@@ -226,9 +407,76 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
       }
 
       tabsElement.addEventListener("scroll", syncPill, { passive: true });
-      window.addEventListener("resize", syncPill);
-      syncActiveTab();
+      window.addEventListener("resize", () => {
+        syncPill();
+        if (transitionTimeoutId === null) {
+          syncContentHeight();
+        }
+      });
+      updateTabButtonStates();
+      normalizeToCurrentState();
       requestAnimationFrame(syncPill);
     })();
   </script>
 </div>
+
+<style>
+  [data-rd-code-group-content] > [data-rd-code-group-item="true"] {
+    position: relative;
+    z-index: 1;
+  }
+
+  [data-rd-code-group-content]
+    > [data-rd-code-group-item="true"]:not(:first-child) {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  @keyframes rd-code-group-slide-in-from-right {
+    from {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes rd-code-group-slide-in-from-left {
+    from {
+      transform: translateX(-100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes rd-code-group-slide-out-to-left {
+    from {
+      transform: translateX(0);
+      opacity: 1;
+    }
+    to {
+      transform: translateX(-100%);
+      opacity: 0;
+    }
+  }
+
+  @keyframes rd-code-group-slide-out-to-right {
+    from {
+      transform: translateX(0);
+      opacity: 1;
+    }
+    to {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+  }
+</style>

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

@@ -69,7 +69,7 @@ const isInitiallyExpanded = shouldShowAllCode || totalLineCount <= visibleLines;
     <slot />
   </div>
   <div
-    class="rd-component-preview__code not-prose relative overflow-hidden rounded-b-xl bg-white dark:bg-(--rd-code-surface)"
+    class="rd-component-preview__code not-prose relative overflow-hidden rounded-b-xl bg-neutral-50 dark:bg-(--rd-code-surface)"
     data-rd-preview-expanded={isInitiallyExpanded ? "true" : "false"}
     style={{ "--rd-preview-visible-lines": String(visibleLines) }}
   >
@@ -142,7 +142,7 @@ const isInitiallyExpanded = shouldShowAllCode || totalLineCount <= visibleLines;
   }
 
   .rd-component-preview__code :global(.group\/prose-code > div) {
-    background-color: #fff !important;
+    background-color: var(--color-neutral-50) !important;
     border-top-left-radius: 0 !important;
     border-top-right-radius: 0 !important;
   }
@@ -153,7 +153,7 @@ const isInitiallyExpanded = shouldShowAllCode || totalLineCount <= visibleLines;
 
   .rd-component-preview__code :global(.group\/prose-code pre),
   .rd-component-preview__code :global(.group\/prose-code code) {
-    background-color: #fff !important;
+    background-color: var(--color-neutral-50) !important;
   }
 
   :global(.dark) .rd-component-preview__code :global(.group\/prose-code pre),
@@ -199,6 +199,7 @@ const isInitiallyExpanded = shouldShowAllCode || totalLineCount <= visibleLines;
 
 <script
   is:inline
+  data-astro-rerun
   define:vars={{
     visibleLines,
     totalLineCount,

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

@@ -1,28 +1,54 @@
 ---
-import type { HTMLAttributes } from "astro/types";
-import { validateProps } from "../../lib/component-error";
+import { validateNoUnknownProps, validateProps } from "../../lib/component-error";
 import { renderMarkdown } from "../../lib/utils";
 import { resolveStaticAssetUrl } from "../../lib/static-asset-url";
 
-interface Props extends HTMLAttributes<"img"> {
+interface Props {
   src: string;
+  alt?: string;
+  title?: string;
+  width?: number | string;
   zoom?: boolean;
 }
 
-const { title, zoom = true, ...attrs } = Astro.props as Props;
+const imageProps = Astro.props as Record<string, unknown>;
+
+validateNoUnknownProps(
+  "Image",
+  imageProps,
+  ["src", "alt", "title", "width", "zoom"],
+  Astro.url.pathname,
+);
+
+validateProps(
+  "Image",
+  imageProps,
+  {
+    src: { required: true, type: "string" },
+    alt: { type: "string" },
+    title: { type: "string" },
+    width: { type: ["number", "string"] },
+    zoom: { type: "boolean" },
+  },
+  Astro.url.pathname,
+);
+
+const { src, alt, title, width, zoom = true } = imageProps as Props;
 const zoomEnabled = zoom !== false;
-const attrsRecord = attrs as Record<string, unknown>;
-if (typeof attrsRecord.src === "string") {
-  attrsRecord.src = resolveStaticAssetUrl(attrsRecord.src);
+const resolvedSrc = resolveStaticAssetUrl(src);
+const rawWidth = width;
+const imageAttrs: Record<string, unknown> = { src: resolvedSrc };
+if (typeof alt === "string") {
+  imageAttrs.alt = alt;
+}
+if (width !== undefined) {
+  imageAttrs.width = width;
+}
+
+const zoomAttrs: Record<string, unknown> = { src: resolvedSrc };
+if (typeof alt === "string") {
+  zoomAttrs.alt = alt;
 }
-const rawStyle = attrsRecord.style;
-const rawWidth = attrsRecord.width;
-const zoomAttrs: Record<string, unknown> = { ...attrsRecord };
-delete zoomAttrs.style;
-delete zoomAttrs.width;
-delete zoomAttrs.height;
-delete zoomAttrs.class;
-delete zoomAttrs.className;
 
 function isConstrainedWidthValue(value: unknown): boolean {
   if (typeof value === "number") {
@@ -55,48 +81,12 @@ function isConstrainedWidthValue(value: unknown): boolean {
   return true;
 }
 
-function hasStyleWidthConstraint(styleValue: unknown): boolean {
-  if (typeof styleValue === "string") {
-    const widthMatch = styleValue.match(/(?:^|;)\s*width\s*:\s*([^;]+)/i);
-    const maxWidthMatch = styleValue.match(
-      /(?:^|;)\s*max-width\s*:\s*([^;]+)/i,
-    );
-
-    return (
-      isConstrainedWidthValue(widthMatch?.[1]) ||
-      isConstrainedWidthValue(maxWidthMatch?.[1])
-    );
-  }
-
-  if (!styleValue || typeof styleValue !== "object") return false;
-  const styleObject = styleValue as Record<string, unknown>;
-
-  return (
-    isConstrainedWidthValue(styleObject.width) ||
-    isConstrainedWidthValue(styleObject.maxWidth) ||
-    isConstrainedWidthValue(styleObject["max-width"])
-  );
-}
-
-const hasCustomImageWidth =
-  isConstrainedWidthValue(rawWidth) || hasStyleWidthConstraint(rawStyle);
+const hasCustomImageWidth = isConstrainedWidthValue(rawWidth);
 
 const captionHtml =
   typeof title === "string" && title.trim().length > 0
     ? (await renderMarkdown(title)).replace(/^<p>([\s\S]*)<\/p>\n?$/, "$1")
     : "";
-
-validateProps(
-  "Image",
-  Astro.props as Record<string, any>,
-  {
-    src: { required: true, type: "string" },
-    alt: { type: "string" },
-    title: { type: "string" },
-    zoom: { type: "boolean" },
-  },
-  Astro.url.pathname,
-);
 ---
 
 <figure
@@ -207,7 +197,7 @@ validateProps(
     class="overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-(--rd-code-surface)"
   >
     <img
-      {...attrs}
+      {...imageAttrs}
       x-ref="img"
       title={title}
       class:list={[