radiant-docs 0.1.38 → 0.1.40

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/layouts/Layout.astro

@@ -7,11 +7,18 @@ import googleSansLatinExtWoff2 from "../assets/fonts/google-sans-flex/latin-ext.
 import geistMonoLatinWoff2 from "../assets/fonts/geist-mono/latin.woff2?url";
 import geistMonoLatinExtWoff2 from "../assets/fonts/geist-mono/latin-ext.woff2?url";
 import Sidebar from "../components/Sidebar.astro";
-import { getConfig } from "../lib/validation";
+import colors from "tailwindcss/colors";
+import {
+  DEFAULT_THEME_COLOR_DARK,
+  DEFAULT_THEME_COLOR_LIGHT,
+  getConfig,
+  type BaseColorOption,
+} from "../lib/validation";
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 import AskAiWidget from "../components/chat/AskAiWidget";
 import { ClientRouter } from "astro:transitions";
+import { prependBasePath, stripBasePath, withBasePath } from "../lib/base-path";
 import { resolveStaticAssetUrl } from "../lib/static-asset-url";
 
 interface Props {
@@ -36,6 +43,117 @@ function routePathToOgImagePath(routePath: string): string {
 
 const { pageTitle, pageDescription } = Astro.props as Props;
 const config = await getConfig();
+const themeBaseColor = config.theme?.baseColor ?? "neutral";
+const themeThemeColor = config.theme?.themeColor;
+const lightBaseColor: BaseColorOption =
+  typeof themeBaseColor === "string" ? themeBaseColor : themeBaseColor.light;
+const darkBaseColor: BaseColorOption =
+  typeof themeBaseColor === "string" ? themeBaseColor : themeBaseColor.dark;
+const lightThemeColor =
+  typeof themeThemeColor === "string"
+    ? themeThemeColor
+    : (themeThemeColor?.light ?? DEFAULT_THEME_COLOR_LIGHT);
+const darkThemeColor =
+  typeof themeThemeColor === "string"
+    ? themeThemeColor
+    : (themeThemeColor?.dark ?? DEFAULT_THEME_COLOR_DARK);
+const neutralColorShades = [
+  "50",
+  "100",
+  "200",
+  "300",
+  "400",
+  "500",
+  "600",
+  "700",
+  "800",
+  "900",
+  "950",
+] as const;
+const paletteColors = colors as unknown as Record<
+  string,
+  Record<(typeof neutralColorShades)[number], string>
+>;
+const getNeutralPaletteVariables = (baseColor: BaseColorOption): string[] => {
+  const palette = paletteColors[baseColor] ?? paletteColors.neutral;
+  return [
+    `--color-neutral: ${palette["500"]};`,
+    ...neutralColorShades.map(
+      (shade) => `--color-neutral-${shade}: ${palette[shade]};`,
+    ),
+  ];
+};
+function normalizeHexColorToRgb(
+  hexColor: string,
+): { r: number; g: number; b: number } | null {
+  const normalized = hexColor.replace("#", "").trim();
+  if (/^[a-fA-F0-9]{3,4}$/.test(normalized)) {
+    const [r, g, b] = normalized.split("");
+    if (!r || !g || !b) return null;
+    return {
+      r: Number.parseInt(`${r}${r}`, 16),
+      g: Number.parseInt(`${g}${g}`, 16),
+      b: Number.parseInt(`${b}${b}`, 16),
+    };
+  }
+
+  if (/^[a-fA-F0-9]{6,8}$/.test(normalized)) {
+    return {
+      r: Number.parseInt(normalized.slice(0, 2), 16),
+      g: Number.parseInt(normalized.slice(2, 4), 16),
+      b: Number.parseInt(normalized.slice(4, 6), 16),
+    };
+  }
+
+  return null;
+}
+
+function getThemeForegroundColor(hexColor: string): "#ffffff" | "#111827" {
+  const rgb = normalizeHexColorToRgb(hexColor);
+  if (!rgb) return "#ffffff";
+
+  const toLinear = (channel: number): number => {
+    const normalized = channel / 255;
+    return normalized <= 0.03928
+      ? normalized / 12.92
+      : ((normalized + 0.055) / 1.055) ** 2.4;
+  };
+
+  const luminance =
+    0.2126 * toLinear(rgb.r) +
+    0.7152 * toLinear(rgb.g) +
+    0.0722 * toLinear(rgb.b);
+  return luminance > 0.45 ? "#111827" : "#ffffff";
+}
+
+const getThemeColorVariables = (themeColor: string): string[] => {
+  const foreground = getThemeForegroundColor(themeColor);
+  const iconFilter = foreground === "#ffffff" ? "invert(1)" : "none";
+
+  return [
+    `--color-theme: ${themeColor};`,
+    `--color-theme-foreground: ${foreground};`,
+    `--color-theme-icon-filter: ${iconFilter};`,
+    "--color-theme-top: color-mix(in oklab, var(--color-theme) 88%, white);",
+    "--color-theme-bottom: color-mix(in oklab, var(--color-theme) 90%, black);",
+  ];
+};
+const lightNeutralVariables = getNeutralPaletteVariables(lightBaseColor);
+const darkNeutralVariables = getNeutralPaletteVariables(darkBaseColor);
+const lightThemeColorVariables = getThemeColorVariables(lightThemeColor);
+const darkThemeColorVariables = getThemeColorVariables(darkThemeColor);
+const neutralPaletteCss = [
+  "html[data-theme='light'], html:not(.dark):not([data-theme='dark']) {",
+  ...[...lightNeutralVariables, ...lightThemeColorVariables].map(
+    (declaration) => `  ${declaration.replace(/;$/, " !important;")}`,
+  ),
+  "}",
+  "html.dark, html[data-theme='dark'] {",
+  ...[...darkNeutralVariables, ...darkThemeColorVariables].map(
+    (declaration) => `  ${declaration.replace(/;$/, " !important;")}`,
+  ),
+  "}",
+].join("\n");
 const resolvedPageTitle = pageTitle?.trim();
 const resolvedPageDescription =
   typeof pageDescription === "string" && pageDescription.trim().length > 0
@@ -48,12 +166,13 @@ const resolvedMetaDescription = resolvedPageDescription ?? fallbackDescription;
 const documentTitle = resolvedPageTitle
   ? `${resolvedPageTitle} | ${config.title}`
   : `${config.title} Docs`;
+const routePathname = stripBasePath(Astro.url.pathname);
 const canonicalUrl = new URL(
-  Astro.url.pathname,
+  prependBasePath(routePathname),
   Astro.site ?? Astro.url,
 ).toString();
 const ogImageUrl = new URL(
-  resolveStaticAssetUrl(routePathToOgImagePath(Astro.url.pathname)),
+  resolveStaticAssetUrl(routePathToOgImagePath(routePathname)),
   Astro.site ?? Astro.url,
 );
 const ogImageHref = ogImageUrl.toString();
@@ -64,21 +183,21 @@ const parsedOrgTier = Number.parseInt(
 const orgTier =
   Number.isFinite(parsedOrgTier) && parsedOrgTier > 0 ? parsedOrgTier : 1;
 const isDev = import.meta.env.DEV;
-const askAiDevHost = (import.meta.env.ASK_AI_DEV_HOST ?? "").toString().trim();
-const askAiDevProxySecret = (import.meta.env.ASK_AI_DEV_PROXY_SECRET ?? "")
+const askAiDevHost = (import.meta.env.ASK_AI_DEV_HOST ?? "s").toString().trim();
+const askAiDevProxySecret = (import.meta.env.ASK_AI_DEV_PROXY_SECRET ?? "s")
   .toString()
   .trim();
 const hasAskAiDevConfig =
   askAiDevHost.length > 0 && askAiDevProxySecret.length > 0;
 const askAiEnabled = isDev || orgTier >= 3;
 const askAiChatAvailable = isDev ? hasAskAiDevConfig : orgTier >= 3;
-let askAiApiPath = "/_platform/ask-ai";
+let askAiApiPath = withBasePath("/_platform/ask-ai");
 
 if (isDev && hasAskAiDevConfig) {
   try {
     askAiApiPath = new URL("/_platform/ask-ai", askAiDevHost).toString();
   } catch {
-    askAiApiPath = "/_platform/ask-ai";
+    askAiApiPath = withBasePath("/_platform/ask-ai");
   }
 }
 ---
@@ -86,6 +205,7 @@ if (isDev && hasAskAiDevConfig) {
 <!doctype html>
 <html lang="en">
   <head>
+    <style is:inline is:global set:html={neutralPaletteCss}></style>
     <ClientRouter />
     <script is:inline>
       const applyTheme = () => {
@@ -115,6 +235,96 @@ if (isDev && hasAskAiDevConfig) {
       // Run on initial load
       applyTheme();
     </script>
+    <script is:inline>
+      (() => {
+        const isEmbedded = window.self !== window.top;
+        const isEmbedMode =
+          new URLSearchParams(window.location.search).get("embed") === "1";
+
+        if (!isEmbedMode || !isEmbedded) {
+          if (isEmbedMode && !isEmbedded) {
+            console.info("[iframe-ready] skipping: not embedded iframe");
+          }
+          return;
+        }
+
+        console.info("[iframe-ready] init", {
+          href: window.location.href,
+          embedded: isEmbedded,
+        });
+
+        const readySentSessionKey = "radiant_docs_iframe_ready_sent";
+        const hasSentReady = () => {
+          try {
+            const sent = sessionStorage.getItem(readySentSessionKey) === "1";
+            console.info("[iframe-ready] session flag read", {
+              key: readySentSessionKey,
+              sent,
+            });
+            return sent;
+          } catch {
+            console.warn(
+              "[iframe-ready] failed to read sessionStorage flag",
+              readySentSessionKey,
+            );
+            return false;
+          }
+        };
+        const markReadySent = () => {
+          try {
+            sessionStorage.setItem(readySentSessionKey, "1");
+            console.info("[iframe-ready] session flag set", {
+              key: readySentSessionKey,
+              value: "1",
+            });
+          } catch {
+            // Ignore storage failures (privacy mode, disabled storage, etc.)
+            console.warn(
+              "[iframe-ready] failed to set sessionStorage flag",
+              readySentSessionKey,
+            );
+          }
+        };
+
+        const notifyParentReady = () => {
+          const readyUrl = `${window.location.pathname}${window.location.search}${window.location.hash}`;
+          console.info("[iframe-ready] posting IFRAME_READY", { readyUrl });
+          window.parent.postMessage(
+            {
+              type: "IFRAME_READY",
+              url: readyUrl,
+            },
+            "*",
+          );
+        };
+
+        const handleReadyRequest = (event) => {
+          const payload = event.data;
+          if (!payload || typeof payload !== "object") return;
+
+          if (payload.type === "IFRAME_READY_REQUEST") {
+            console.info("[iframe-ready] received IFRAME_READY_REQUEST");
+            notifyParentReady();
+          }
+        };
+
+        window.addEventListener("message", handleReadyRequest);
+
+        if (!hasSentReady()) {
+          const notifyParentReadyOnce = () => {
+            if (hasSentReady()) return;
+            markReadySent();
+            notifyParentReady();
+          };
+
+          if (document.readyState === "complete") notifyParentReadyOnce();
+          else
+            window.addEventListener("load", notifyParentReadyOnce, {
+              once: true,
+            });
+        }
+      })();
+    </script>
     <link
       rel="preload"
       href={googleSansLatinWoff2}

package/template/src/lib/base-path.ts

@@ -0,0 +1,98 @@
+const EXTERNAL_PROTOCOL_REGEX = /^[a-zA-Z][a-zA-Z\d+\-.]*:/;
+
+declare global {
+  // Set by astro.config.mjs so build-time MDX remark plugins can see the
+  // configured base before Astro injects import.meta.env.BASE_URL.
+  var __RADIANT_DOCS_BASE_PATH__: string | undefined;
+}
+
+export function normalizeBasePath(value: string | null | undefined): string {
+  const trimmed = value?.trim() ?? "";
+  if (!trimmed || trimmed === "/") return "";
+
+  const pathname = trimmed.startsWith("/") ? trimmed : `/${trimmed}`;
+  const normalized = pathname.replace(/\/{2,}/g, "/").replace(/\/+$/, "");
+  return normalized === "/" ? "" : normalized;
+}
+
+export function getDocsBasePath(): string {
+  const astroBasePath = normalizeBasePath(import.meta.env.BASE_URL);
+  return (
+    astroBasePath ||
+    normalizeBasePath(globalThis.__RADIANT_DOCS_BASE_PATH__)
+  );
+}
+
+function splitPathSuffix(value: string): { pathname: string; suffix: string } {
+  const match = value.match(/^([^?#]*)(.*)$/);
+  return {
+    pathname: match?.[1] ?? value,
+    suffix: match?.[2] ?? "",
+  };
+}
+
+function isExternalOrDocumentLocalHref(value: string): boolean {
+  if (!value) return true;
+  if (value.startsWith("#") || value.startsWith("?")) return true;
+  if (value.startsWith("//")) return true;
+  if (value.startsWith("./") || value.startsWith("../")) return true;
+  return EXTERNAL_PROTOCOL_REGEX.test(value);
+}
+
+function applyBasePath(
+  href: string,
+  options: { preserveAlreadyPrefixed: boolean },
+): string {
+  const value = href.trim();
+  if (!value || isExternalOrDocumentLocalHref(value)) {
+    return href;
+  }
+
+  const basePath = getDocsBasePath();
+  if (!basePath) {
+    return value;
+  }
+
+  const { pathname, suffix } = splitPathSuffix(value);
+  const normalizedPathname = pathname.startsWith("/")
+    ? pathname
+    : `/${pathname}`;
+
+  if (
+    options.preserveAlreadyPrefixed &&
+    (normalizedPathname === basePath ||
+      normalizedPathname.startsWith(`${basePath}/`))
+  ) {
+    return `${normalizedPathname}${suffix}`;
+  }
+
+  if (normalizedPathname === "/") {
+    return `${basePath}${suffix}`;
+  }
+
+  return `${basePath}${normalizedPathname}${suffix}`;
+}
+
+export function withBasePath(href: string): string {
+  return applyBasePath(href, { preserveAlreadyPrefixed: true });
+}
+
+export function prependBasePath(href: string): string {
+  return applyBasePath(href, { preserveAlreadyPrefixed: false });
+}
+
+export function stripBasePath(pathname: string): string {
+  const value = pathname || "/";
+  const basePath = getDocsBasePath();
+  if (!basePath) return value;
+
+  if (value === basePath) {
+    return "/";
+  }
+
+  if (value.startsWith(`${basePath}/`)) {
+    return value.slice(basePath.length) || "/";
+  }
+
+  return value;
+}

package/template/src/lib/component-error.ts

@@ -85,27 +85,33 @@ export function validateType(
   componentName: string,
   propName: string,
   value: unknown,
-  expectedType: "string" | "number" | "boolean" | "object" | "array",
+  expectedType:
+    | "string"
+    | "number"
+    | "boolean"
+    | "object"
+    | "array"
+    | readonly ("string" | "number" | "boolean" | "object" | "array")[],
   pathname: string
 ): void {
   // Skip if undefined (optional props)
   if (value === undefined) return;
 
-  let isValid = false;
-
-  if (expectedType === "array") {
-    isValid = Array.isArray(value);
-  } else {
-    isValid = typeof value === expectedType;
-  }
+  const expectedTypes = Array.isArray(expectedType)
+    ? expectedType
+    : [expectedType];
+  const isValid = expectedTypes.some((type) =>
+    type === "array" ? Array.isArray(value) : typeof value === type
+  );
 
   if (!isValid) {
     const sourceFile = getSourceFile(pathname);
     const actualType = Array.isArray(value) ? "array" : typeof value;
+    const expectedTypeLabel = expectedTypes.join(" or ");
     throw new Error(
       formatError(
         componentName,
-        `Invalid prop "${propName}": expected ${expectedType}, got ${actualType}`,
+        `Invalid prop "${propName}": expected ${expectedTypeLabel}, got ${actualType}`,
         sourceFile
       )
     );
@@ -123,10 +129,43 @@ export function validateType(
  */
 export type PropSchema = {
   required?: boolean;
-  type?: "string" | "number" | "boolean" | "object" | "array";
+  type?:
+    | "string"
+    | "number"
+    | "boolean"
+    | "object"
+    | "array"
+    | readonly ("string" | "number" | "boolean" | "object" | "array")[];
   enum?: readonly string[];
 };
 
+/**
+ * Validates that no unsupported props are passed to a component.
+ */
+export function validateNoUnknownProps(
+  componentName: string,
+  props: Record<string, unknown>,
+  allowedProps: readonly string[],
+  pathname: string
+): void {
+  const allowed = new Set(allowedProps);
+  const unknownProps = Object.keys(props).filter((key) => !allowed.has(key));
+
+  if (unknownProps.length === 0) return;
+
+  const sourceFile = getSourceFile(pathname);
+  const unknownLabel = unknownProps.map((name) => `"${name}"`).join(", ");
+  const allowedLabel = allowedProps.map((name) => `"${name}"`).join(", ");
+  const propLabel = unknownProps.length === 1 ? "prop" : "props";
+  throw new Error(
+    formatError(
+      componentName,
+      `Unsupported ${propLabel}: ${unknownLabel}. Allowed props: ${allowedLabel}`,
+      sourceFile
+    )
+  );
+}
+
 export function validateProps(
   componentName: string,
   props: Record<string, unknown>,