radiant-docs 0.1.7 → 0.1.8

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

@@ -0,0 +1,400 @@
+---
+import CodeLanguageIcon from "../ui/CodeLanguageIcon.astro";
+import CodeTabEdge from "../ui/CodeTabEdge.astro";
+import { Icon } from "astro-icon/components";
+import {
+  buildDefaultCodeFileName,
+  getCodeLineTokens,
+  normalizeCodeLanguageValue,
+} from "../../lib/code/code-block";
+
+interface Props {
+  language?: string;
+  raw?: string;
+  filename?: string;
+  showFilename?: boolean | string;
+  showLineNumbers?: boolean | string;
+  hideLanguageIcon?: boolean | string;
+  inCodeGroup?: boolean | string;
+  highlightedLines?: string;
+  collapsedLines?: string;
+}
+
+const {
+  language = "plaintext",
+  raw = "",
+  filename = "",
+  showFilename = false,
+  showLineNumbers = false,
+  hideLanguageIcon = false,
+  inCodeGroup = false,
+  highlightedLines = "",
+  collapsedLines = "",
+} = Astro.props as Props;
+
+function toBoolean(value: boolean | string | undefined, defaultValue = false) {
+  if (typeof value === "boolean") return value;
+  if (typeof value === "string") {
+    const normalized = value.trim().toLowerCase();
+    if (normalized === "true") return true;
+    if (normalized === "false") return false;
+  }
+  return defaultValue;
+}
+
+function normalizeHighlightedLinesSpec(value: string): string | null {
+  const normalizedValue = value.trim();
+  if (!normalizedValue) return null;
+
+  const segments = normalizedValue.split(",");
+  const normalizedSegments: string[] = [];
+
+  for (const segment of segments) {
+    const trimmedSegment = segment.trim();
+    if (!trimmedSegment) continue;
+
+    if (/^\d+$/.test(trimmedSegment)) {
+      const lineNumber = Number.parseInt(trimmedSegment, 10);
+      if (lineNumber > 0) normalizedSegments.push(String(lineNumber));
+      continue;
+    }
+
+    const rangeMatch = trimmedSegment.match(/^(\d+)\s*-\s*(\d+)$/);
+    if (!rangeMatch) continue;
+
+    const start = Number.parseInt(rangeMatch[1], 10);
+    const end = Number.parseInt(rangeMatch[2], 10);
+    if (!Number.isFinite(start) || !Number.isFinite(end)) continue;
+    if (start <= 0 || end <= 0) continue;
+
+    const rangeStart = Math.min(start, end);
+    const rangeEnd = Math.max(start, end);
+    normalizedSegments.push(
+      rangeStart === rangeEnd
+        ? String(rangeStart)
+        : `${rangeStart}-${rangeEnd}`,
+    );
+  }
+
+  if (!normalizedSegments.length) return null;
+  return normalizedSegments.join(",");
+}
+
+function parseHighlightedLineNumbers(
+  lineSpec: string,
+  lineCount: number,
+): Set<number> {
+  const normalizedSpec = normalizeHighlightedLinesSpec(lineSpec);
+  if (!normalizedSpec) return new Set();
+
+  const highlightedLineSet = new Set<number>();
+  for (const segment of normalizedSpec.split(",")) {
+    if (/^\d+$/.test(segment)) {
+      const lineNumber = Number.parseInt(segment, 10);
+      if (lineNumber >= 1 && lineNumber <= lineCount) {
+        highlightedLineSet.add(lineNumber);
+      }
+      continue;
+    }
+
+    const rangeMatch = segment.match(/^(\d+)-(\d+)$/);
+    if (!rangeMatch) continue;
+
+    const start = Number.parseInt(rangeMatch[1], 10);
+    const end = Number.parseInt(rangeMatch[2], 10);
+    if (!Number.isFinite(start) || !Number.isFinite(end)) continue;
+
+    const rangeStart = Math.max(1, Math.min(start, end));
+    const rangeEnd = Math.min(lineCount, Math.max(start, end));
+    for (let lineNumber = rangeStart; lineNumber <= rangeEnd; lineNumber += 1) {
+      highlightedLineSet.add(lineNumber);
+    }
+  }
+
+  return highlightedLineSet;
+}
+
+function buildTokenStyle(token: {
+  color?: string;
+  bgColor?: string;
+  fontStyle?: number;
+  htmlStyle?: Record<string, string>;
+}): string | undefined {
+  const styleSegments: string[] = [];
+
+  if (token.color) styleSegments.push(`color:${token.color}`);
+  if (token.bgColor) styleSegments.push(`background-color:${token.bgColor}`);
+
+  const fontStyle = typeof token.fontStyle === "number" ? token.fontStyle : 0;
+  if ((fontStyle & 1) === 1) styleSegments.push("font-style:italic");
+  if ((fontStyle & 2) === 2) styleSegments.push("font-weight:600");
+  if ((fontStyle & 4) === 4) styleSegments.push("text-decoration:underline");
+
+  if (token.htmlStyle && typeof token.htmlStyle === "object") {
+    for (const [property, value] of Object.entries(token.htmlStyle)) {
+      styleSegments.push(`${property}:${value}`);
+    }
+  }
+
+  if (!styleSegments.length) return undefined;
+  return styleSegments.join(";");
+}
+
+function escapeHtml(value: string): string {
+  return value
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;");
+}
+
+function escapeAttribute(value: string): string {
+  return escapeHtml(value).replaceAll('"', "&quot;");
+}
+
+const normalizedLanguage = normalizeCodeLanguageValue(language);
+const parsedInCodeGroup = toBoolean(inCodeGroup, false);
+const parsedShowFilename = parsedInCodeGroup
+  ? true
+  : toBoolean(showFilename, false);
+const parsedShowLineNumbers = toBoolean(showLineNumbers, false);
+const parsedHideLanguageIcon = toBoolean(hideLanguageIcon, false);
+const shouldRenderLanguageIcon = !parsedHideLanguageIcon;
+
+const trimmedFilename = filename.trim();
+const displayFilename =
+  trimmedFilename.length > 0
+    ? trimmedFilename
+    : buildDefaultCodeFileName(normalizedLanguage);
+
+const { lines: tokenLines } = await getCodeLineTokens({
+  code: raw,
+  language: normalizedLanguage,
+});
+
+const rawLines = raw.split("\n");
+const normalizedRawLines = rawLines.length > 0 ? rawLines : [""];
+const lineCount = Math.max(1, normalizedRawLines.length, tokenLines.length);
+const normalizedTokenLines = Array.from(
+  { length: lineCount },
+  (_, lineIndex) => {
+    return tokenLines[lineIndex] ?? [];
+  },
+);
+
+const highlightSet = parseHighlightedLineNumbers(highlightedLines, lineCount);
+const encodedRaw = encodeURIComponent(raw);
+const collapsedLinesValue = collapsedLines.trim();
+const renderedCodeLinesHtml = normalizedTokenLines
+  .map((lineTokens, lineIndex) => {
+    const lineNumber = lineIndex + 1;
+    const isHighlighted = highlightSet.has(lineNumber);
+    const fallbackLineContent = normalizedRawLines[lineIndex] ?? "";
+
+    const tokenHtml =
+      lineTokens.length > 0
+        ? lineTokens
+            .map((token) => {
+              const tokenStyle = buildTokenStyle(token);
+              const tokenStyleAttribute = tokenStyle
+                ? ` style="${escapeAttribute(tokenStyle)}"`
+                : "";
+              return `<span${tokenStyleAttribute}>${escapeHtml(token.content)}</span>`;
+            })
+            .join("")
+        : fallbackLineContent.length > 0
+          ? escapeHtml(fallbackLineContent)
+          : "&nbsp;";
+
+    const lineNumberHtml = parsedShowLineNumbers
+      ? `<span class="w-10 shrink-0 select-none pl-4 pr-3 text-right tabular-nums text-neutral-400">${lineNumber}</span>`
+      : "";
+
+    const lineContentClass = parsedShowLineNumbers
+      ? "flex-1 whitespace-pre pr-4"
+      : "flex-1 whitespace-pre pr-4 pl-4";
+    const lineClass = isHighlighted
+      ? "flex min-w-full bg-neutral-100/80"
+      : "flex min-w-full";
+
+    return `<span class="${lineClass}">${lineNumberHtml}<span class="${lineContentClass}">${tokenHtml}</span></span>`;
+  })
+  .join("");
+---
+
+<div
+  class:list={[
+    "group/prose-code not-prose relative w-full max-w-full min-w-0",
+    parsedInCodeGroup ? "my-0" : "my-6",
+  ]}
+  data-rd-code-block-root="true"
+  data-rd-collapsed-lines={collapsedLinesValue}
+  data-rd-copy-content={encodedRaw}
+  data-rd-code-group-item={parsedInCodeGroup ? "true" : undefined}
+  data-rd-tab-filename={parsedInCodeGroup ? displayFilename : undefined}
+  data-rd-tab-language={parsedInCodeGroup ? normalizedLanguage : undefined}
+  data-rd-tab-hide-icon={parsedInCodeGroup && parsedHideLanguageIcon
+    ? "true"
+    : undefined}
+>
+  <div
+    class:list={[
+      "w-full max-w-full min-w-0 overflow-hidden border border-neutral-200 bg-white shadow-xs",
+      parsedInCodeGroup ? "rounded-t-none rounded-b-xl" : "rounded-xl",
+    ]}
+  >
+    {
+      !parsedInCodeGroup && parsedShowFilename ? (
+        <div class="flex items-center justify-between gap-2 border-b border-neutral-200 bg-neutral-50 inset-shadow-sm inset-shadow-neutral-100/80">
+          <div class="min-w-0 flex-1">
+            <div class="relative h-9 w-fit max-w-full rounded-tl-xl bg-white">
+              <div class="absolute inset-x-0 -bottom-px h-px bg-white" />
+              <CodeTabEdge className="pointer-events-none absolute -top-px left-full z-10 h-[calc(100%+2px)]" />
+              <div class="relative z-20 inline-flex h-9 max-w-full items-center gap-2 pl-5 py-1.5 text-xs font-medium text-neutral-700">
+                {shouldRenderLanguageIcon ? (
+                  <CodeLanguageIcon
+                    language={normalizedLanguage}
+                    fileName={displayFilename}
+                    className="size-3.5 shrink-0 self-center rounded-[4px]"
+                  />
+                ) : null}
+                <span class="truncate leading-none">{displayFilename}</span>
+              </div>
+            </div>
+          </div>
+          <div class="relative h-9 w-5 shrink-0 rounded-tr-xl bg-white">
+            <div class="absolute inset-x-0 -bottom-px h-px bg-white" />
+            <CodeTabEdge className="pointer-events-none absolute -top-px right-full z-10 h-[calc(100%+2px)] rotate-y-180" />
+            <button
+              type="button"
+              class="absolute right-2 top-1/2 z-20 inline-flex size-7 -translate-y-1/2 appearance-none items-center justify-center rounded-md border-0 bg-transparent text-neutral-500/80 shadow-none outline-none ring-0 transition-colors duration-150 hover:bg-neutral-50 hover:text-neutral-600 focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 cursor-pointer"
+              data-rd-copy-trigger="true"
+              data-rd-copy-content={encodedRaw}
+              aria-label="Copy code"
+            >
+              <Icon
+                name="lucide:copy"
+                class="size-3.5 origin-center scale-100 rotate-0 opacity-100 transition-all duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform motion-reduce:transition-none"
+                data-rd-copy-icon
+                aria-hidden="true"
+              />
+              <Icon
+                name="lucide:check"
+                class="absolute size-3.5 stroke-3 origin-center scale-25 rotate-6 opacity-0 text-green-700/80 transition-all duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform motion-reduce:transition-none"
+                data-rd-copy-check
+                aria-hidden="true"
+              />
+            </button>
+          </div>
+        </div>
+      ) : null
+    }
+
+    <div class="relative min-w-0">
+      {
+        !parsedInCodeGroup && !parsedShowFilename ? (
+          <div class="pointer-events-none absolute right-2 top-2 z-20">
+            <button
+              type="button"
+              class="pointer-events-auto inline-flex size-7 appearance-none items-center justify-center rounded-md border border-neutral-200/80 text-neutral-500/80 bg-white/80 backdrop-blur-xs outline-none ring-0 transition-colors duration-150 hover:bg-neutral-50 hover:text-neutral-600 focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 cursor-pointer"
+              data-rd-copy-trigger="true"
+              data-rd-copy-content={encodedRaw}
+              aria-label="Copy code"
+            >
+              <Icon
+                name="lucide:copy"
+                class="size-3.5 origin-center scale-100 rotate-0 opacity-100 transition-all duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform motion-reduce:transition-none"
+                data-rd-copy-icon
+                aria-hidden="true"
+              />
+              <Icon
+                name="lucide:check"
+                class="absolute size-3.5 stroke-3 origin-center scale-25 rotate-6 opacity-0 text-green-700/80 transition-all duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform motion-reduce:transition-none"
+                data-rd-copy-check
+                aria-hidden="true"
+              />
+            </button>
+          </div>
+        ) : null
+      }
+
+      {
+        parsedInCodeGroup ? (
+          <template data-rd-code-group-tab-icon>
+            {shouldRenderLanguageIcon ? (
+              <CodeLanguageIcon
+                language={normalizedLanguage}
+                fileName={displayFilename}
+                className="size-3.5 shrink-0 self-center rounded-[4px]"
+              />
+            ) : null}
+          </template>
+        ) : null
+      }
+
+      <div
+        data-rd-code-scroll-area
+        class="relative overflow-x-auto [scrollbar-width:thin] [scrollbar-color:var(--color-neutral-300)_transparent] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-neutral-300/70 hover:[&::-webkit-scrollbar-thumb]:bg-neutral-300/90"
+      >
+        <pre
+          class="relative m-0 min-w-full bg-white p-0 text-[13px] leading-6"><code class="block min-w-full py-2.5 font-mono text-neutral-800"><Fragment set:html={renderedCodeLinesHtml} /></code></pre>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script is:inline>
+  (() => {
+    const script = document.currentScript;
+    if (!(script instanceof HTMLScriptElement)) return;
+
+    const root = script.previousElementSibling;
+    if (!(root instanceof HTMLElement)) return;
+
+    const copyButtons = root.querySelectorAll("[data-rd-copy-trigger='true']");
+    if (copyButtons.length === 0) 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");
+
+        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");
+
+      checkIcon.classList.remove("scale-110", "opacity-100", "rotate-0");
+      checkIcon.classList.add("scale-50", "opacity-0", "rotate-6");
+    };
+
+    copyButtons.forEach((button) => {
+      let timeoutId = null;
+      button.addEventListener("click", async () => {
+        const encodedCopyValue =
+          button.getAttribute("data-rd-copy-content") ?? "";
+        const copyValue = decodeURIComponent(encodedCopyValue);
+
+        try {
+          await navigator.clipboard.writeText(copyValue);
+          setCopiedState(button, true);
+
+          if (timeoutId) window.clearTimeout(timeoutId);
+          timeoutId = window.setTimeout(() => {
+            setCopiedState(button, false);
+            timeoutId = null;
+          }, 1200);
+        } catch {
+          setCopiedState(button, false);
+        }
+      });
+    });
+  })();
+</script>

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

@@ -0,0 +1,225 @@
+---
+import { Icon } from "astro-icon/components";
+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"
+  data-rd-code-group-root="true"
+>
+  <div
+    class="relative z-10 overflow-visible rounded-t-xl border border-b-0 border-neutral-200 bg-neutral-50 inset-shadow-sm inset-shadow-neutral-100/80"
+  >
+    <div class="flex min-w-0 items-end justify-between gap-2">
+      <div class="min-w-0 flex-1 overflow-hidden rounded-t-xl">
+        <div
+          data-rd-code-group-tabs
+          class="relative flex min-w-0 items-end gap-1 overflow-x-auto pl-1 pr-8 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+        >
+          <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"
+          >
+          </div>
+        </div>
+      </div>
+
+      <div class="relative h-9 w-5 shrink-0 rounded-tr-xl bg-white">
+        <div class="absolute inset-x-0 -bottom-px h-px bg-white"></div>
+        <CodeTabEdge
+          className="pointer-events-none absolute -top-px right-full z-10 h-[calc(100%+2px)] rotate-y-180"
+        />
+        <button
+          type="button"
+          class="absolute right-2 top-1/2 z-20 inline-flex size-7 -translate-y-1/2 appearance-none items-center justify-center rounded-md border-0 bg-transparent text-neutral-500/80 shadow-none outline-none ring-0 transition-colors duration-150 hover:bg-neutral-50 hover:text-neutral-600 focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 cursor-pointer"
+          data-rd-copy-trigger="true"
+          aria-label="Copy code"
+        >
+          <Icon
+            name="lucide:copy"
+            class="size-3.5 origin-center scale-100 rotate-0 opacity-100 transition-all duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform motion-reduce:transition-none"
+            data-rd-copy-icon
+            aria-hidden="true"
+          />
+          <Icon
+            name="lucide:check"
+            class="absolute size-3.5 stroke-3 origin-center scale-25 rotate-6 opacity-0 text-green-700/80 transition-all duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform motion-reduce:transition-none"
+            data-rd-copy-check
+            aria-hidden="true"
+          />
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <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;
+
+    const root = script.previousElementSibling;
+    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']");
+
+    if (!contentElement || !tabsElement || !pillElement) return;
+
+    const codeItems = Array.from(
+      contentElement.querySelectorAll("[data-rd-code-group-item='true']"),
+    );
+    if (codeItems.length === 0) return;
+
+    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;
+
+      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;
+      }
+
+      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");
+    };
+
+    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 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 syncPill = () => {
+      const activeTab = tabs[activeIndex]?.tabWrapper;
+      if (!activeTab) {
+        pillElement.classList.add("opacity-0");
+        pillElement.classList.remove("opacity-100");
+        return;
+      }
+
+      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>

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

@@ -0,0 +1 @@
+<slot />