zudoku 0.0.0-fdf886de → 0.0.0-fe92c9e1

package/src/lib/plugins/search-pagefind/PagefindSearch.tsx

@@ -63,7 +63,7 @@ const usePagefind = (options: PagefindOptions) => {
   });
 
   if (result.isError && result.error.message !== "NOT_BUILT_YET") {
-    // eslint-disable-next-line no-console
+    // biome-ignore lint/suspicious/noConsole: Logging allowed here
     console.error(result.error);
   }
 
@@ -141,9 +141,7 @@ export const PagefindSearch = ({
             <Callout type="info">
               Search is currently not available in development mode by default.
               <br />
-              To still use search in development, run <code>
-                zudoku build
-              </code>{" "}
+              To still use search in development, run <code>zudoku build</code>{" "}
               and copy the <code>dist/pagefind</code> directory to your{" "}
               <code>public</code> directory.
             </Callout>

package/src/lib/plugins/search-pagefind/ResultList.tsx

@@ -3,10 +3,7 @@ import { useLayoutEffect, useRef } from "react";
 import { Link, useNavigate } from "react-router";
 import { CommandGroup, CommandItem, CommandList } from "zudoku/ui/Command.js";
 import { joinUrl } from "../../util/joinUrl.js";
-import {
-  type PagefindSearchFragment,
-  type PagefindSubResult,
-} from "./types.js";
+import type { PagefindSearchFragment, PagefindSubResult } from "./types.js";
 
 const sortSubResults = (a: PagefindSubResult, b: PagefindSubResult) => {
   const aScore = a.weighted_locations.reduce(
@@ -38,6 +35,7 @@ export const ResultList = ({
   const navigate = useNavigate();
   const commandListRef = useRef<HTMLDivElement | null>(null);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Only scroll to top when search term changes
   useLayoutEffect(() => {
     requestIdleCallback(() => {
       commandListRef.current?.scrollTo({ top: 0 });
@@ -101,6 +99,7 @@ export const ResultList = ({
                       <span className="font-bold">{subResult.title}</span>
                       <span
                         className="text-[13px] [&_mark]:bg-primary [&_mark]:text-primary-foreground"
+                        // biome-ignore lint/security/noDangerouslySetInnerHtml: Pagefind provides sanitized HTML
                         dangerouslySetInnerHTML={{ __html: subResult.excerpt }}
                       />
                     </div>

package/src/lib/plugins/search-pagefind/get-results.tsx

@@ -62,7 +62,6 @@ async function* searchResultGenerator({
 
       if (transformed === false) {
         // Skip this result
-        continue;
       } else if (transformed === true || transformed == null) {
         // Keep the original result
         yield result;

package/src/lib/shiki.ts

@@ -7,7 +7,7 @@ import {
 } from "@shikijs/transformers";
 import type { Root } from "hast";
 import { toJsxRuntime } from "hast-util-to-jsx-runtime";
-import { Fragment, type JSX } from "react";
+import { createElement, Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import type {
   BundledLanguage,
@@ -21,6 +21,9 @@ import type { Pluggable } from "unified";
 import { visit } from "unist-util-visit";
 import { cn } from "./util/cn.js";
 
+export const HIGHLIGHT_CODE_BLOCK_CLASS =
+  "overflow-x-auto scrollbar not-inline";
+
 const engine = createJavaScriptRegexEngine({ forgiving: true });
 export const highlighter = await createHighlighterCore({
   engine,
@@ -69,6 +72,8 @@ export const defaultLanguages: BundledLanguage[] = [
   "jsx",
   "typescript",
   "tsx",
+  "graphql",
+  "jsonc",
   "json",
   "python",
   "java",
@@ -83,8 +88,19 @@ export const defaultLanguages: BundledLanguage[] = [
   "html",
   "xml",
   "yaml",
+  "toml",
+  "rust",
   "markdown",
   "mdx",
+  "zig",
+  "scala",
+  "dart",
+  "ocaml",
+  "c",
+  "cpp",
+  "common-lisp",
+  "elixir",
+  "powershell",
 ];
 
 const rehypeCodeBlockPlugin = () => (tree: Root) => {
@@ -106,14 +122,14 @@ const rehypeCodeBlockPlugin = () => (tree: Root) => {
   });
 };
 
-export const createConfiguredShikiRehypePlugins = (themes?: ThemesRecord) => [
+export const createConfiguredShikiRehypePlugins = (
+  themes: ThemesRecord = defaultHighlightOptions.themes,
+  highlighterInstance: HighlighterCore = highlighter,
+) => [
   [
     rehypeShikiFromHighlighter,
-    highlighter,
-    {
-      ...defaultHighlightOptions,
-      themes: themes ?? defaultHighlightOptions.themes,
-    },
+    highlighterInstance,
+    { ...defaultHighlightOptions, themes },
   ] satisfies Pluggable,
   rehypeCodeBlockPlugin,
 ];
@@ -130,5 +146,16 @@ export const highlight = (
     themes,
   });
 
-  return toJsxRuntime(value, { Fragment, jsx, jsxs }) as JSX.Element;
+  return toJsxRuntime(value, {
+    Fragment,
+    jsx,
+    jsxs,
+    components: {
+      code: (props) =>
+        createElement("code", {
+          ...props,
+          className: cn(props.className, HIGHLIGHT_CODE_BLOCK_CLASS),
+        }),
+    },
+  });
 };

package/src/lib/ui/Breadcrumb.tsx

@@ -67,6 +67,7 @@ const BreadcrumbPage = React.forwardRef<
     aria-disabled="true"
     aria-current="page"
     className={cn("font-normal text-foreground", className)}
+    tabIndex={props.tabIndex}
     {...props}
   />
 ));

package/src/lib/ui/Button.tsx

@@ -30,6 +30,7 @@ export const buttonVariants = cva(
         xl: "h-14 rounded-lg px-10 text-lg",
         icon: "size-9",
         "icon-xs": "size-7",
+        "icon-xxs": "size-5",
       },
     },
     defaultVariants: {

package/src/lib/ui/Callout.tsx

@@ -14,7 +14,8 @@ const stylesMap = {
     bg: "bg-gray-100 dark:bg-zinc-800/50",
     iconColor: "text-gray-600 dark:text-zinc-300",
     titleColor: "text-gray-600 dark:text-zinc-300",
-    textColor: "text-gray-600 dark:text-zinc-300",
+    textColor:
+      "text-gray-600 dark:text-zinc-300 [&_a]:hover:text-gray-700 [&_a]:dark:hover:text-zinc-400",
     Icon: InfoIcon as LucideIcon,
   },
   tip: {
@@ -22,7 +23,8 @@ const stylesMap = {
     bg: "bg-green-200/25 dark:bg-green-950/70",
     iconColor: "text-green-600 dark:text-green-200",
     titleColor: "text-green-700 dark:text-green-200",
-    textColor: "text-green-600 dark:text-green-50",
+    textColor:
+      "text-green-600 dark:text-green-50 [&_a]:hover:text-green-700 [&_a]:dark:hover:text-green-300",
     Icon: LightbulbIcon as LucideIcon,
   },
   info: {
@@ -30,7 +32,8 @@ const stylesMap = {
     bg: "bg-blue-50 dark:bg-blue-950/40",
     iconColor: "text-blue-400 dark:text-blue-200",
     titleColor: "text-blue-700 dark:text-blue-200",
-    textColor: "text-blue-600 dark:text-blue-100",
+    textColor:
+      "text-blue-600 dark:text-blue-100 [&_a]:hover:text-blue-800 [&_a]:dark:hover:text-blue-300",
     Icon: InfoIcon as LucideIcon,
   },
   caution: {
@@ -38,7 +41,8 @@ const stylesMap = {
     bg: "bg-yellow-100/60 dark:bg-yellow-400/10",
     iconColor: "text-yellow-500 dark:text-yellow-300",
     titleColor: "text-yellow-600 dark:text-yellow-300",
-    textColor: "text-yellow-700 dark:text-yellow-200",
+    textColor:
+      "text-yellow-700 dark:text-yellow-200 [&_a]:hover:text-yellow-800 [&_a]:dark:hover:text-yellow-300",
     Icon: AlertTriangleIcon as LucideIcon,
   },
   danger: {
@@ -46,7 +50,8 @@ const stylesMap = {
     bg: "bg-rose-50 dark:bg-rose-950/40",
     iconColor: "text-rose-400 dark:text-rose-300",
     titleColor: "text-rose-800 dark:text-rose-300",
-    textColor: "text-rose-700 dark:text-rose-100",
+    textColor:
+      "text-rose-700 dark:text-rose-100 [&_a]:hover:text-rose-800 [&_a]:dark:hover:text-rose-300",
     Icon: ShieldAlertIcon as LucideIcon,
   },
 } as const;

package/src/lib/ui/Checkbox.tsx

@@ -1,29 +1,28 @@
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react";
-import * as React from "react";
-
+import { CheckIcon } from "lucide-react";
+import type * as React from "react";
 import { cn } from "../util/cn.js";
 
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      "peer h-4 w-4 shrink-0 rounded-[min(6px,var(--radius)-4px)] ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-primary",
-      "border border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary",
-      className,
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
     >
-      <Check className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
 export { Checkbox };

package/src/lib/ui/CodeBlock.tsx

@@ -1,12 +1,11 @@
 import { CheckIcon, CopyIcon } from "lucide-react";
-import type { ReactNode } from "react";
-import { useRef } from "react";
+import { type ReactNode, useRef } from "react";
+import { LanguageIcon } from "../components/LanguageIcon.js";
 import { cn } from "../util/cn.js";
 import { useCopyToClipboard } from "../util/useCopyToClipboard.js";
 
 export type CodeBlockProps = {
   className?: string;
-  noBackground?: boolean;
   wrapLines?: boolean;
   showLanguageIndicator?: boolean;
   language?: string;
@@ -18,35 +17,6 @@ export type CodeBlockProps = {
   showLineNumbers?: boolean;
 };
 
-const IconToLanguageMap: Record<string, RegExp> = {
-  typescript: /(tsx?|typescript)/,
-  javascript: /(jsx?|javascript)/,
-  markdown: /(md|markdown)/,
-  mdx: /mdx/,
-  json: /json/,
-  yaml: /yaml/,
-  toml: /toml/,
-  gnubash: /(shell|bash|sh|zsh)/,
-  python: /(py|python)/,
-  dotnet: /(^cs$|csharp|vb)/,
-  rust: /(rs|rust)/,
-  ruby: /(rb|ruby)/,
-  php: /php/,
-  html5: /html?/,
-  css: /css/,
-};
-
-const getIconUrl = (language?: string) => {
-  if (!language) return undefined;
-
-  const icon = Object.entries(IconToLanguageMap).find(([_, regex]) =>
-    regex.test(language),
-  );
-  return icon
-    ? `https://cdn.simpleicons.org/${icon[0]}/000/fff?viewbox=auto`
-    : undefined;
-};
-
 export const CodeBlock = ({
   children,
   title = "Code",
@@ -61,18 +31,17 @@ export const CodeBlock = ({
 
   if (!children) return null;
 
-  const iconUrl = showLanguageIndicator ? getIconUrl(language) : undefined;
-
   return (
     <div
       className={cn(
-        "border code-block-wrapper relative group bg-muted/50 rounded-md overflow-hidden",
+        "border code-block-wrapper relative group rounded-md overflow-hidden",
         showLineNumbers && "line-numbers",
+        props.className,
       )}
     >
       <div className="border-b flex items-center h-10 font-sans bg-black/2">
-        <div className="flex items-center gap-2 flex-1 text-sm w-full px-3">
-          {iconUrl && <img src={iconUrl} className="h-3 max-w-4" />}
+        <div className="flex items-center gap-1.5 flex-1 text-sm w-full px-3">
+          <LanguageIcon language={language} />
           {title}
         </div>{" "}
         {showCopy !== "never" && (
@@ -100,10 +69,7 @@ export const CodeBlock = ({
         )}
       </div>
       <div
-        className={cn(
-          "code-block text-sm not-prose scrollbar overflow-x-auto scrollbar [&_code]:p-3 [&_code]:py-2",
-          props.className,
-        )}
+        className="code-block text-sm not-prose scrollbar [&_code]:px-3 [&_code]:py-2"
         ref={ref}
       >
         {children}

package/src/lib/ui/Command.tsx

@@ -1,8 +1,8 @@
-import { type DialogProps } from "@radix-ui/react-dialog";
+import type { DialogProps } from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
+import type { ComponentPropsWithoutRef } from "react";
 import * as React from "react";
-import { type ComponentPropsWithoutRef } from "react";
 import { Dialog, DialogContent } from "zudoku/ui/Dialog.js";
 import { cn } from "../util/cn.js";
 
@@ -58,7 +58,6 @@ const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-  // eslint-disable-next-line react/no-unknown-property
   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
     <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
@@ -78,7 +77,6 @@ const CommandInlineInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-  // eslint-disable-next-line react/no-unknown-property
   <div className="flex items-center" cmdk-input-wrapper="">
     <CommandPrimitive.Input
       ref={ref}

package/src/lib/ui/Dialog.tsx

@@ -1,123 +1,128 @@
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import * as React from "react";
-
 import { CircleIcon, XIcon } from "lucide-react";
+import type * as React from "react";
 import { cn } from "../util/cn.js";
 
-const Dialog = DialogPrimitive.Root;
-
-const DialogTrigger = DialogPrimitive.Trigger;
-
-const DialogPortal = DialogPrimitive.Portal;
-
-const DialogClose = DialogPrimitive.Close;
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className,
-    )}
-    {...props}
-  />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
-    showCloseButton?: boolean;
-  }
->(({ className, children, showCloseButton = true, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "backdrop-blur-xs transition-all",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/32",
         className,
       )}
       {...props}
-    >
-      {children}
-      {showCloseButton && (
-        <DialogPrimitive.Close className="absolute p-3 group -left-1.5 -top-1.5 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-          <CircleIcon
-            className="h-2 w-2 transition-all border border-transparent  group-hover:border-white/20 rounded-full group-hover:scale-180 group-hover:text-red-400"
-            strokeWidth={2}
-            fill="currentColor"
-          />
-          <XIcon
-            className="h-2 w-2 absolute top-3 left-3 text-transparent group-hover:text-red-800 transition-colors"
-            strokeWidth={2}
-            fill="currentColor"
-          />
-          <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
+    />
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-xl",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close className="absolute p-3 group -left-1.5 -top-1.5 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+            <CircleIcon
+              className="h-2 w-2 transition-all border border-transparent  group-hover:border-white/20 rounded-full group-hover:scale-180 group-hover:text-red-400"
+              strokeWidth={2}
+              fill="currentColor"
+            />
+            <XIcon
+              className="h-2 w-2 absolute top-3 left-3 text-transparent group-hover:text-red-800 transition-colors"
+              strokeWidth={2}
+              fill="currentColor"
+            />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
       )}
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-const DialogHeader = ({
+      {...props}
+    />
+  );
+}
+function DialogTitle({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className,
-    )}
-    {...props}
-  />
-);
-DialogHeader.displayName = "DialogHeader";
-
-const DialogFooter = ({
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+function DialogDescription({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className,
-    )}
-    {...props}
-  />
-);
-DialogFooter.displayName = "DialogFooter";
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className,
-    )}
-    {...props}
-  />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
 
 export {
   Dialog,

package/src/lib/ui/EmbeddedCodeBlock.tsx

@@ -5,7 +5,6 @@ import { cn } from "../util/cn.js";
 
 export type CodeBlockProps = {
   className?: string;
-  noBackground?: boolean;
   wrapLines?: boolean;
   showLanguageIndicator?: boolean;
   language?: string;
@@ -19,13 +18,14 @@ export type CodeBlockProps = {
 
 export const EmbeddedCodeBlock = ({
   children,
+  fullHeight,
   language,
   showCopy = "hover",
   showCopyText,
   showLanguageIndicator = true,
   showLineNumbers,
   ...props
-}: CodeBlockProps) => {
+}: CodeBlockProps & { fullHeight?: boolean }) => {
   const [isCopied, setIsCopied] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
 
@@ -36,11 +36,13 @@ export const EmbeddedCodeBlock = ({
       className={cn(
         "code-block-wrapper relative group bg-muted/50",
         showLineNumbers && "line-numbers",
+        fullHeight && "h-full",
       )}
     >
       <div
         className={cn(
-          "code-block text-sm not-prose scrollbar overflow-x-auto scrollbar [&>pre]:p-4",
+          "code-block text-sm not-prose scrollbar [&>pre]:overflow-x-auto [&_code]:p-2",
+          fullHeight && "h-full [&>pre]:h-full",
           props.className,
         )}
         ref={ref}
@@ -50,7 +52,7 @@ export const EmbeddedCodeBlock = ({
       {showLanguageIndicator && (
         <span
           className={cn(
-            "absolute top-1.5 end-3 !text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0",
+            "absolute top-1.5 end-3 text-[11px]! font-mono text-muted-foreground transition group-hover:opacity-0",
             showCopy === "always" && "hidden",
           )}
         >