radiant-docs 0.1.20 → 0.1.21

package/package.json

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

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

@@ -56,170 +56,169 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
   <div data-rd-code-group-content class="min-w-0">
     <slot />
   </div>
-</div>
-
-<script is:inline>
-  (() => {
-    const script = document.currentScript;
-    if (!(script instanceof HTMLScriptElement)) return;
+  <script is:inline>
+    (() => {
+      const script = document.currentScript;
+      if (!(script instanceof HTMLScriptElement)) return;
 
-    const root = script.previousElementSibling;
-    if (!(root instanceof HTMLElement)) return;
+      const root = script.closest("[data-rd-code-group-root='true']");
+      if (!(root instanceof HTMLElement)) return;
 
-    const contentElement = root.querySelector("[data-rd-code-group-content]");
-    const tabsElement = root.querySelector("[data-rd-code-group-tabs]");
-    const pillElement = root.querySelector("[data-rd-code-group-pill]");
-    const copyButton = root.querySelector("[data-rd-copy-trigger='true']");
+      const contentElement = root.querySelector("[data-rd-code-group-content]");
+      const tabsElement = root.querySelector("[data-rd-code-group-tabs]");
+      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 || !tabsElement || !pillElement) return;
 
-    const codeItems = Array.from(
-      contentElement.querySelectorAll("[data-rd-code-group-item='true']"),
-    );
-    if (codeItems.length === 0) return;
+      const codeItems = Array.from(
+        contentElement.querySelectorAll("[data-rd-code-group-item='true']"),
+      );
+      if (codeItems.length === 0) return;
 
-    let activeIndex = 0;
+      let activeIndex = 0;
 
-    const setCopiedState = (button, copied) => {
-      const copyIcon = button.querySelector("[data-rd-copy-icon]");
-      const checkIcon = button.querySelector("[data-rd-copy-check]");
-      if (!copyIcon || !checkIcon) return;
+      const setCopiedState = (button, copied) => {
+        const copyIcon = button.querySelector("[data-rd-copy-icon]");
+        const checkIcon = button.querySelector("[data-rd-copy-check]");
+        if (!copyIcon || !checkIcon) return;
 
-      if (copied) {
-        copyIcon.classList.add("scale-50", "opacity-0", "-rotate-6");
-        copyIcon.classList.remove("scale-100", "opacity-100", "rotate-0");
+        if (copied) {
+          copyIcon.classList.add("scale-50", "opacity-0", "-rotate-6");
+          copyIcon.classList.remove("scale-100", "opacity-100", "rotate-0");
 
-        checkIcon.classList.remove("scale-50", "opacity-0", "rotate-6");
-        checkIcon.classList.add("scale-110", "opacity-100", "rotate-0");
-        return;
-      }
+          checkIcon.classList.remove("scale-50", "opacity-0", "rotate-6");
+          checkIcon.classList.add("scale-110", "opacity-100", "rotate-0");
+          return;
+        }
 
-      copyIcon.classList.remove("scale-50", "opacity-0", "-rotate-6");
-      copyIcon.classList.add("scale-100", "opacity-100", "rotate-0");
+        copyIcon.classList.remove("scale-50", "opacity-0", "-rotate-6");
+        copyIcon.classList.add("scale-100", "opacity-100", "rotate-0");
 
-      checkIcon.classList.remove("scale-110", "opacity-100", "rotate-0");
-      checkIcon.classList.add("scale-50", "opacity-0", "rotate-6");
-    };
+        checkIcon.classList.remove("scale-110", "opacity-100", "rotate-0");
+        checkIcon.classList.add("scale-50", "opacity-0", "rotate-6");
+      };
 
-    const tabs = codeItems.map((itemElement, index) => {
-      const filename =
-        itemElement.getAttribute("data-rd-tab-filename") ??
-        `file-name-${index + 1}.txt`;
-      const tabIconTemplate = itemElement.querySelector(
-        "template[data-rd-code-group-tab-icon]",
-      );
+      const tabs = codeItems.map((itemElement, index) => {
+        const filename =
+          itemElement.getAttribute("data-rd-tab-filename") ??
+          `file-name-${index + 1}.txt`;
+        const tabIconTemplate = itemElement.querySelector(
+          "template[data-rd-code-group-tab-icon]",
+        );
+
+        const tabWrapper = document.createElement("div");
+        tabWrapper.className = "relative z-10 text-xs font-medium";
+
+        const tabButton = document.createElement("button");
+        tabButton.type = "button";
+        tabButton.className =
+          "relative inline-flex h-9 items-center gap-2 border-0 bg-transparent px-3 py-1.5 text-xs font-medium text-neutral-600 transition-colors duration-150 focus:outline-none focus-visible:outline-none cursor-pointer";
+        tabButton.setAttribute("aria-label", filename);
+        tabButton.setAttribute("data-rd-code-group-tab", String(index));
+
+        const iconContainer = document.createElement("span");
+        iconContainer.className =
+          "pointer-events-none inline-flex shrink-0 items-center rounded-[4px] transition-opacity duration-150";
+
+        if (tabIconTemplate && tabIconTemplate.innerHTML.trim().length > 0) {
+          iconContainer.innerHTML = tabIconTemplate.innerHTML;
+        } else {
+          iconContainer.classList.add("hidden");
+        }
 
-      const tabWrapper = document.createElement("div");
-      tabWrapper.className = "relative z-10 text-xs font-medium";
+        const labelElement = document.createElement("span");
+        labelElement.className = "whitespace-pre leading-none";
+        labelElement.textContent = filename;
+
+        tabButton.appendChild(iconContainer);
+        tabButton.appendChild(labelElement);
+        tabWrapper.appendChild(tabButton);
+        tabsElement.appendChild(tabWrapper);
+
+        return {
+          itemElement,
+          tabWrapper,
+          tabButton,
+          iconContainer,
+        };
+      });
 
-      const tabButton = document.createElement("button");
-      tabButton.type = "button";
-      tabButton.className =
-        "relative inline-flex h-9 items-center gap-2 border-0 bg-transparent px-3 py-1.5 text-xs font-medium text-neutral-600 transition-colors duration-150 focus:outline-none focus-visible:outline-none cursor-pointer";
-      tabButton.setAttribute("aria-label", filename);
-      tabButton.setAttribute("data-rd-code-group-tab", String(index));
+      const syncPill = () => {
+        const activeTab = tabs[activeIndex]?.tabWrapper;
+        if (!activeTab) {
+          pillElement.classList.add("opacity-0");
+          pillElement.classList.remove("opacity-100");
+          return;
+        }
 
-      const iconContainer = document.createElement("span");
-      iconContainer.className =
-        "pointer-events-none inline-flex shrink-0 items-center rounded-[4px] transition-opacity duration-150";
+        const activeRect = activeTab.getBoundingClientRect();
+        const tabsRect = tabsElement.getBoundingClientRect();
+        const left = activeRect.left - tabsRect.left + tabsElement.scrollLeft;
+        const width = activeRect.width;
+        pillElement.style.left = `${left}px`;
+        pillElement.style.width = `${width}px`;
+        pillElement.classList.remove("opacity-0");
+        pillElement.classList.add("opacity-100");
+      };
 
-      if (tabIconTemplate && tabIconTemplate.innerHTML.trim().length > 0) {
-        iconContainer.innerHTML = tabIconTemplate.innerHTML;
-      } else {
-        iconContainer.classList.add("hidden");
-      }
+      const syncActiveTab = () => {
+        tabs.forEach(({ itemElement, tabButton, iconContainer }, index) => {
+          const isActive = index === activeIndex;
+          itemElement.style.display = isActive ? "" : "none";
+          tabButton.classList.toggle("text-neutral-900", isActive);
+          tabButton.classList.toggle("text-neutral-600", !isActive);
+
+          if (iconContainer.classList.contains("hidden")) return;
+          iconContainer.classList.toggle("opacity-100", isActive);
+          iconContainer.classList.toggle("opacity-80", !isActive);
+        });
+        syncPill();
+      };
 
-      const labelElement = document.createElement("span");
-      labelElement.className = "whitespace-pre leading-none";
-      labelElement.textContent = filename;
+      tabs.forEach(({ tabButton }, index) => {
+        tabButton.addEventListener("click", () => {
+          if (activeIndex === index) return;
+          activeIndex = index;
+          syncActiveTab();
+        });
+      });
 
-      tabButton.appendChild(iconContainer);
-      tabButton.appendChild(labelElement);
-      tabWrapper.appendChild(tabButton);
-      tabsElement.appendChild(tabWrapper);
+      if (copyButton) {
+        let timeoutId = null;
+        copyButton.addEventListener("click", async () => {
+          const activeItem = tabs[activeIndex]?.itemElement;
+          const encodedCopyValue =
+            activeItem?.getAttribute("data-rd-copy-content") ?? "";
+          const copyValue = decodeURIComponent(encodedCopyValue);
+
+          try {
+            await navigator.clipboard.writeText(copyValue);
+            setCopiedState(copyButton, true);
+
+            if (timeoutId) window.clearTimeout(timeoutId);
+            timeoutId = window.setTimeout(() => {
+              setCopiedState(copyButton, false);
+              timeoutId = null;
+            }, 1200);
+          } catch {
+            setCopiedState(copyButton, false);
+          }
+        });
+      }
 
-      return {
-        itemElement,
-        tabWrapper,
-        tabButton,
-        iconContainer,
-      };
-    });
-
-    const syncPill = () => {
-      const activeTab = tabs[activeIndex]?.tabWrapper;
-      if (!activeTab) {
-        pillElement.classList.add("opacity-0");
-        pillElement.classList.remove("opacity-100");
-        return;
+      const resizeObserver =
+        typeof ResizeObserver !== "undefined"
+          ? new ResizeObserver(() => syncPill())
+          : null;
+      if (resizeObserver) {
+        resizeObserver.observe(tabsElement);
       }
 
-      const activeRect = activeTab.getBoundingClientRect();
-      const tabsRect = tabsElement.getBoundingClientRect();
-      const left = activeRect.left - tabsRect.left + tabsElement.scrollLeft;
-      const width = activeRect.width;
-      pillElement.style.left = `${left}px`;
-      pillElement.style.width = `${width}px`;
-      pillElement.classList.remove("opacity-0");
-      pillElement.classList.add("opacity-100");
-    };
-
-    const syncActiveTab = () => {
-      tabs.forEach(({ itemElement, tabButton, iconContainer }, index) => {
-        const isActive = index === activeIndex;
-        itemElement.style.display = isActive ? "" : "none";
-        tabButton.classList.toggle("text-neutral-900", isActive);
-        tabButton.classList.toggle("text-neutral-600", !isActive);
-
-        if (iconContainer.classList.contains("hidden")) return;
-        iconContainer.classList.toggle("opacity-100", isActive);
-        iconContainer.classList.toggle("opacity-80", !isActive);
-      });
-      syncPill();
-    };
-
-    tabs.forEach(({ tabButton }, index) => {
-      tabButton.addEventListener("click", () => {
-        if (activeIndex === index) return;
-        activeIndex = index;
-        syncActiveTab();
-      });
-    });
-
-    if (copyButton) {
-      let timeoutId = null;
-      copyButton.addEventListener("click", async () => {
-        const activeItem = tabs[activeIndex]?.itemElement;
-        const encodedCopyValue =
-          activeItem?.getAttribute("data-rd-copy-content") ?? "";
-        const copyValue = decodeURIComponent(encodedCopyValue);
-
-        try {
-          await navigator.clipboard.writeText(copyValue);
-          setCopiedState(copyButton, true);
-
-          if (timeoutId) window.clearTimeout(timeoutId);
-          timeoutId = window.setTimeout(() => {
-            setCopiedState(copyButton, false);
-            timeoutId = null;
-          }, 1200);
-        } catch {
-          setCopiedState(copyButton, false);
-        }
-      });
-    }
-
-    const resizeObserver =
-      typeof ResizeObserver !== "undefined"
-        ? new ResizeObserver(() => syncPill())
-        : null;
-    if (resizeObserver) {
-      resizeObserver.observe(tabsElement);
-    }
-
-    tabsElement.addEventListener("scroll", syncPill, { passive: true });
-    window.addEventListener("resize", syncPill);
-    syncActiveTab();
-    requestAnimationFrame(syncPill);
-  })();
-</script>
+      tabsElement.addEventListener("scroll", syncPill, { passive: true });
+      window.addEventListener("resize", syncPill);
+      syncActiveTab();
+      requestAnimationFrame(syncPill);
+    })();
+  </script>
+</div>