radiant-docs 0.1.41 → 0.1.42

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

@@ -257,7 +257,7 @@ const renderedCodeLinesHtml = normalizedTokenLines
 <div
   class:list={[
     "group/prose-code not-prose relative w-full max-w-full min-w-0 rounded-xl",
-    parsedInCodeGroup ? "my-0" : "my-6 shadow-xs",
+    parsedInCodeGroup ? "my-0" : "rd-prose-block shadow-xs",
   ]}
   data-rd-code-block-root="true"
   data-rd-collapsed-lines={collapsedLinesValue}

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 shadow-xs rounded-xl"
+  class="rd-prose-block group/prose-code-group not-prose relative w-full max-w-full min-w-0 shadow-xs rounded-xl"
   data-rd-code-group-root="true"
 >
   <div

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

@@ -0,0 +1,25 @@
+---
+const columnProps = Astro.props as Record<string, unknown>;
+
+function getSourceFile(pathname: string): string {
+  const pagePath = pathname
+    .replace(/^\/documentation\//, "")
+    .replace(/\/$/, "");
+  return `${pagePath}.mdx`;
+}
+
+const unknownProps = Object.keys(columnProps);
+if (unknownProps.length > 0) {
+  const propLabel = unknownProps.length === 1 ? "prop" : "props";
+  const unknownLabel = unknownProps.map((name) => `"${name}"`).join(", ");
+  throw new Error(
+    `[USER_ERROR]: <Column>: Unsupported ${propLabel}: ${unknownLabel}. <Column> does not accept props; render another <Columns> block for a new row. (in ${getSourceFile(Astro.url.pathname)})`,
+  );
+}
+---
+
+<div data-rd-column class="min-w-0">
+  <div class="prose-rules max-w-none! *:max-w-none!">
+    <slot />
+  </div>
+</div>

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

@@ -0,0 +1,200 @@
+---
+import {
+  validateNoUnknownProps,
+  validateProps,
+} from "../../lib/component-error";
+
+interface Props {
+  columns?: 2 | 3;
+}
+
+const columnsProps = Astro.props as Record<string, unknown>;
+
+validateNoUnknownProps(
+  "Columns",
+  columnsProps,
+  ["columns"],
+  Astro.url.pathname,
+);
+
+validateProps(
+  "Columns",
+  columnsProps,
+  {
+    columns: { type: ["number", "string"] },
+  },
+  Astro.url.pathname,
+);
+
+function normalizeColumns(value: unknown): 2 | 3 {
+  if (value === undefined) return 2;
+
+  const normalizedValue =
+    typeof value === "number"
+      ? value
+      : typeof value === "string"
+        ? Number(value.trim())
+        : Number.NaN;
+
+  if (normalizedValue !== 2 && normalizedValue !== 3) {
+    throw new Error(
+      `[USER_ERROR]: <Columns>: Invalid prop "columns": expected 2 or 3 (in ${Astro.url.pathname})`,
+    );
+  }
+
+  return normalizedValue;
+}
+
+function getSourceFile(pathname: string): string {
+  const pagePath = pathname
+    .replace(/^\/documentation\//, "")
+    .replace(/\/$/, "");
+  return `${pagePath}.mdx`;
+}
+
+function createColumnsError(message: string): Error {
+  return new Error(
+    `[USER_ERROR]: <Columns>: ${message} (in ${getSourceFile(Astro.url.pathname)})`,
+  );
+}
+
+const VOID_ELEMENTS = new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr",
+]);
+
+function getTopLevelElements(html: string): Array<{
+  tagName: string;
+  attributes: string;
+}> {
+  const elements: Array<{ tagName: string; attributes: string }> = [];
+  let depth = 0;
+  let index = 0;
+
+  while (index < html.length) {
+    const nextTagStart = html.indexOf("<", index);
+    if (nextTagStart === -1) break;
+
+    if (html.startsWith("<!--", nextTagStart)) {
+      const commentEnd = html.indexOf("-->", nextTagStart + 4);
+      index = commentEnd === -1 ? html.length : commentEnd + 3;
+      continue;
+    }
+
+    const tagEnd = html.indexOf(">", nextTagStart + 1);
+    if (tagEnd === -1) break;
+
+    const rawTag = html.slice(nextTagStart + 1, tagEnd).trim();
+    index = tagEnd + 1;
+
+    if (!rawTag || rawTag.startsWith("!") || rawTag.startsWith("?")) {
+      continue;
+    }
+
+    if (rawTag.startsWith("/")) {
+      depth = Math.max(0, depth - 1);
+      continue;
+    }
+
+    const tagMatch = rawTag.match(/^([A-Za-z][\w:-]*)([\s\S]*)$/);
+    if (!tagMatch) continue;
+
+    const tagName = tagMatch[1].toLowerCase();
+    const attributes = tagMatch[2] ?? "";
+    const isSelfClosing = /\/\s*$/.test(rawTag);
+
+    if (depth === 0) {
+      elements.push({ tagName, attributes });
+    }
+
+    if (!isSelfClosing && !VOID_ELEMENTS.has(tagName)) {
+      depth += 1;
+    }
+  }
+
+  return elements;
+}
+
+function isColumnElement(element: { tagName: string; attributes: string }) {
+  return (
+    element.tagName === "div" &&
+    /(?:^|\s)data-rd-column(?:\s|=|$)/.test(element.attributes)
+  );
+}
+
+function validateColumnChildren(html: string, expectedColumns: 2 | 3): void {
+  const topLevelElements = getTopLevelElements(html);
+  const columnElements = topLevelElements.filter(isColumnElement);
+
+  if (topLevelElements.length === 0) {
+    throw createColumnsError(
+      `Must contain exactly ${expectedColumns} <Column> children.`,
+    );
+  }
+
+  if (columnElements.length !== topLevelElements.length) {
+    throw createColumnsError(
+      "Only direct <Column> children are allowed. Wrap each column's content in <Column>.",
+    );
+  }
+
+  if (columnElements.length !== expectedColumns) {
+    throw createColumnsError(
+      `Expected exactly ${expectedColumns} <Column> children for columns={${expectedColumns}}, but found ${columnElements.length}. Render another <Columns> block for a new row.`,
+    );
+  }
+}
+
+const columns = normalizeColumns(columnsProps.columns);
+const html = Astro.slots.has("default")
+  ? await Astro.slots.render("default")
+  : "";
+
+validateColumnChildren(html, columns);
+---
+
+<div class="rd-prose-block rd-columns-container w-full max-w-none!">
+  <div
+    class="rd-columns grid w-full max-w-none! gap-6"
+    data-rd-columns={columns}
+    set:html={html}
+  />
+</div>
+
+<style>
+  .rd-columns-container {
+    container: rd-columns / inline-size;
+  }
+
+  .rd-columns {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .rd-columns > :global(*) {
+    min-width: 0;
+  }
+
+  @container rd-columns (min-width: 36rem) {
+    .rd-columns[data-rd-columns="2"] {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @container rd-columns (min-width: 664px) {
+    .rd-columns[data-rd-columns="3"] {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+</style>

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

@@ -60,7 +60,7 @@ const isInitiallyExpanded = shouldShowAllCode || totalLineCount <= visibleLines;
 ---
 
 <div
-  class="rd-component-preview my-6 flex w-full max-w-full min-w-0 flex-col"
+  class="rd-prose-block rd-component-preview flex w-full max-w-full min-w-0 flex-col"
   data-rd-component-preview-root="true"
 >
   <div

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

@@ -91,7 +91,7 @@ const captionHtml =
 
 <figure
   class:list={[
-    "p-1.5 pb-1 xs:pb-1.5 group border border-neutral-200 dark:border-neutral-800 shadow-xs bg-neutral-50 dark:bg-(--rd-code-surface) rounded-2xl",
+    "rd-prose-block p-1.5 pb-1 xs:pb-1.5 group border border-neutral-200 dark:border-neutral-800 shadow-xs bg-neutral-50 dark:bg-(--rd-code-surface) rounded-2xl",
     hasCustomImageWidth ? "w-fit max-w-full mx-auto" : "w-full",
   ]}
   x-data="{ 

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

@@ -35,7 +35,7 @@ validateProps(
       {title}
     </h3>
   </div>
-  <div class="[&>p]:m-0 [&>p:not(:last-child)]:mb-2">
+  <div class="prose-rules max-w-none! *:max-w-none!">
     <slot />
   </div>
 </div>

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

@@ -2,6 +2,6 @@
 interface Props {}
 ---
 
-<div class="my-6 space-y-1.5">
+<div class="rd-prose-block space-y-1.5">
   <slot />
 </div>

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

@@ -19,7 +19,5 @@ validateProps(
 ---
 
 <section data-label={label} data-icon={icon || ""}>
-  <div class="*:first:mt-0! *:last:mb-0!">
-    <slot />
-  </div>
+  <slot />
 </section>

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

@@ -131,7 +131,7 @@ if (labels.length === 0) {
     });
   }
 }"
-class="my-5">
+class="rd-prose-block">
   <ul
     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"
   >
@@ -174,7 +174,7 @@ class="my-5">
       <div
         {...(index !== 0 ? { "x-cloak": true } : {})}
         x-ref={`content-${index}`}
-        class="w-full"
+        class="prose-rules w-full max-w-none! *:max-w-none!"
         :style={`getPanelStyle(${index})`}
         style={index === 0 ? 'position: relative;' : ''}
         set:html={content}

package/template/src/layouts/Layout.astro

@@ -292,7 +292,7 @@ const askAiEnabled = isDev || orgTier >= 3;
       class="bg-background mx-[5px] min-h-[calc(100vh-68px)] mt-17 fixed inset-0 lg:hidden z-50 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
       x-transition.opacity
     >
-      <Sidebar />
+      <Sidebar askAiEnabled={askAiEnabled} />
     </div>
 
     <!-- Main Content -->
@@ -300,9 +300,7 @@ const askAiEnabled = isDev || orgTier >= 3;
       class="mx-1 mt-1 px-4 sm:px-6 lg:pl-[calc(288px+32px)] pt-16 lg:pr-8 bg-background"
       data-vaul-scale-chrome
     >
-      <main
-        class="max-w-2xl xl:max-w-5xl mx-auto pt-16 pb-16 min-h-[calc(100vh-64px)]"
-      >
+      <main class="mx-auto pt-16 pb-16 min-h-[calc(100vh-64px)]">
         <slot />
       </main>
       <Footer askAiEnabled={askAiEnabled} />

package/template/src/lib/assistant-chrome-defaults.ts

@@ -10,6 +10,9 @@ export type AssistantChromeConfig = {
   launcherShadow: string;
   panelWidth: string;
   panelHeight: string;
+  panelExpandedWidth: string;
+  panelExpandedHeight: string;
+  panelViewportMargin: string;
   panelGap: string;
   panelRadius: string;
   panelBorder: string;
@@ -22,9 +25,12 @@ export type AssistantChromeConfig = {
   panelOpenScale: string;
   panelOpenDuration: string;
   panelOpenTiming: string;
+  panelSizeDuration: string;
+  panelSizeTiming: string;
   panelCloseDuration: string;
   panelCloseTiming: string;
   mobileBreakpoint: string;
+  panelFullscreenHeightBreakpoint: string;
 };
 
 const ASSISTANT_PANEL_DARK_NEUTRAL_800_MIX = "20%";
@@ -53,6 +59,9 @@ export const DEFAULT_ASSISTANT_CHROME_CONFIG: AssistantChromeConfig = {
   launcherShadow: "0 16px 32px -8px rgb(0 0 0 / 24%)",
   panelWidth: "420px",
   panelHeight: "640px",
+  panelExpandedWidth: "640px",
+  panelExpandedHeight: "760px",
+  panelViewportMargin: "16px",
   panelGap: "12px",
   panelRadius: "16px",
   panelBorder: "1px solid rgb(9 14 21 / 8%)",
@@ -68,7 +77,10 @@ export const DEFAULT_ASSISTANT_CHROME_CONFIG: AssistantChromeConfig = {
   panelOpenScale: ".9",
   panelOpenDuration: ".5s",
   panelOpenTiming: "cubic-bezier(.34, 1.56, .64, 1)",
+  panelSizeDuration: ".46s",
+  panelSizeTiming: "cubic-bezier(.22, 1.26, .36, 1)",
   panelCloseDuration: ".2s",
   panelCloseTiming: "cubic-bezier(.25, 1, .5, 1)",
   mobileBreakpoint: "640px",
+  panelFullscreenHeightBreakpoint: "560px",
 };