radiant-docs 0.1.38 → 0.1.39

package/package.json

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

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

@@ -256,8 +256,8 @@ const renderedCodeLinesHtml = normalizedTokenLines
 
 <div
   class:list={[
-    "group/prose-code not-prose relative w-full max-w-full min-w-0",
-    parsedInCodeGroup ? "my-0" : "my-6",
+    "group/prose-code not-prose relative w-full max-w-full min-w-0 rounded-xl",
+    parsedInCodeGroup ? "my-0" : "my-6 shadow-xs",
   ]}
   data-rd-code-block-root="true"
   data-rd-collapsed-lines={collapsedLinesValue}
@@ -271,7 +271,7 @@ const renderedCodeLinesHtml = normalizedTokenLines
 >
   <div
     class:list={[
-      "w-full max-w-full min-w-0 overflow-hidden border border-neutral-200 bg-white shadow-xs dark:border-neutral-800 dark:bg-(--rd-code-surface)",
+      "w-full max-w-full min-w-0 overflow-hidden border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-(--rd-code-surface)",
       parsedInCodeGroup ? "rounded-t-none rounded-b-xl" : "rounded-xl",
     ]}
   >
@@ -322,7 +322,10 @@ const renderedCodeLinesHtml = normalizedTokenLines
       ) : null
     }
 
-    <div class="relative min-w-0">
+    <div
+      class="relative min-w-0"
+      data-rd-code-group-panel={parsedInCodeGroup ? "true" : undefined}
+    >
       {
         !parsedInCodeGroup && !parsedShowFilename ? (
           <div class="pointer-events-none absolute right-2 top-2 z-20">

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,7 +58,10 @@ 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>
@@ -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,61 @@ 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>
+  @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),

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

@@ -27,17 +27,55 @@ if (labels.length === 0) {
 
 <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];
@@ -48,20 +86,54 @@ if (labels.length === 0) {
       };
     }
   },
-  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 w-fit rounded-lg border border-neutral-200 bg-neutral-100/80 p-[3px] inset-shadow-sm dark:border-none dark:bg-neutral-800/50"
+    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] -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."
@@ -74,12 +146,12 @@ 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-foreground" : "text-muted-foreground"]}
         :class={`{
@@ -88,30 +160,63 @@ class="my-5">
       }`}
       >
         {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>
+
+<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/styles/global.css

@@ -151,6 +151,29 @@
   }
 }
 
+/* Markdown table styling */
+.prose-rules :where(table) {
+  @apply w-full overflow-hidden rounded-xl border border-neutral-200 shadow-xs dark:border-neutral-800;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+.prose-rules :where(thead th) {
+  @apply bg-neutral-50 dark:bg-neutral-900/60;
+}
+
+.prose-rules :where(th, td) {
+  @apply border-b border-neutral-200 px-4 py-2 align-top dark:border-neutral-800;
+}
+
+.prose-rules :where(th + th, td + td) {
+  @apply border-l border-neutral-200 dark:border-neutral-800;
+}
+
+.prose-rules :where(tbody tr:last-child td) {
+  @apply border-b-0;
+}
+
 /* Code single-line styling */
 :is(.prose, .prose-rules) :not(pre) > code {
   @apply px-1 py-px bg-neutral-100/90 text-neutral-600 rounded-md font-mono font-medium border border-neutral-200/80 after:hidden before:hidden dark:bg-neutral-800/80 dark:text-neutral-200 dark:border-neutral-700/80;