zudoku 0.0.0-ee328ec → 0.0.0-efc60ba6

package/src/lib/shiki.ts

@@ -0,0 +1,134 @@
+import rehypeShikiFromHighlighter, {
+  type RehypeShikiCoreOptions,
+} from "@shikijs/rehype/core";
+import {
+  transformerMetaHighlight,
+  transformerMetaWordHighlight,
+} from "@shikijs/transformers";
+import type { Root } from "hast";
+import { toJsxRuntime } from "hast-util-to-jsx-runtime";
+import { Fragment, type JSX } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import type {
+  BundledLanguage,
+  BundledTheme,
+  CodeOptionsMultipleThemes,
+  HighlighterCore,
+} from "shiki";
+import { createHighlighterCore } from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+import type { Pluggable } from "unified";
+import { visit } from "unist-util-visit";
+import { cn } from "./util/cn.js";
+
+const engine = createJavaScriptRegexEngine({ forgiving: true });
+export const highlighter = await createHighlighterCore({
+  engine,
+  langAlias: {
+    markup: "html",
+    svg: "xml",
+    mathml: "xml",
+    atom: "xml",
+    ssml: "xml",
+    rss: "xml",
+    webmanifest: "json",
+  },
+});
+
+type ThemesRecord = CodeOptionsMultipleThemes<BundledTheme>["themes"];
+
+export const defaultHighlightOptions = {
+  themes: {
+    light: "github-light",
+    dark: "github-dark",
+  },
+  defaultColor: false,
+  defaultLanguage: "text",
+  fallbackLanguage: "text",
+  inline: "tailing-curly-colon",
+  addLanguageClass: true,
+  transformers: [transformerMetaHighlight(), transformerMetaWordHighlight()],
+  parseMetaString: (str) => {
+    // Matches key="value", key=value, or key attributes
+    const matches = str.matchAll(
+      /([a-z0-9]+)(?:=(["'])(.*?)\2|=(.*?)(?:\s|$)|(?:\s|$))/gi,
+    );
+    return Object.fromEntries(
+      Array.from(matches).map((match) => {
+        const key = match[1];
+        const value = match[3] || match[4] || true;
+        return [key, value];
+      }),
+    );
+  },
+} satisfies RehypeShikiCoreOptions;
+
+export const defaultLanguages: BundledLanguage[] = [
+  "shellscript",
+  "javascript",
+  "jsx",
+  "typescript",
+  "tsx",
+  "json",
+  "python",
+  "java",
+  "go",
+  "csharp",
+  "kotlin",
+  "objective-c",
+  "php",
+  "ruby",
+  "swift",
+  "css",
+  "html",
+  "xml",
+  "yaml",
+  "markdown",
+  "mdx",
+];
+
+const rehypeCodeBlockPlugin = () => (tree: Root) => {
+  visit(tree, "element", (node, _index, parent) => {
+    if (node.tagName !== "code") return;
+
+    const isCodeBlock = parent?.type === "element" && parent.tagName === "pre";
+    node.properties.inline = JSON.stringify(!isCodeBlock);
+
+    // Pass through properties from <pre> to <code> so we can handle it in `code` only
+    if (isCodeBlock) {
+      node.properties = {
+        ...node.properties,
+        ...structuredClone(parent.properties),
+        class: cn(node.properties.class, parent.properties.class),
+      };
+      parent.properties = {};
+    }
+  });
+};
+
+export const createConfiguredShikiRehypePlugins = (themes?: ThemesRecord) => [
+  [
+    rehypeShikiFromHighlighter,
+    highlighter,
+    {
+      ...defaultHighlightOptions,
+      themes: themes ?? defaultHighlightOptions.themes,
+    },
+  ] satisfies Pluggable,
+  rehypeCodeBlockPlugin,
+];
+
+export const highlight = (
+  highlighter: HighlighterCore,
+  code: string,
+  lang = "text",
+  themes: ThemesRecord = defaultHighlightOptions.themes,
+) => {
+  const value = highlighter.codeToHast(code, {
+    lang,
+    ...defaultHighlightOptions,
+    themes,
+  });
+
+  return toJsxRuntime(value, { Fragment, jsx, jsxs }) as JSX.Element;
+};

package/src/lib/ui/ActionButton.tsx

@@ -19,7 +19,9 @@ export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(
             <Spinner />
           </div>
         )}
-        <div className={cn(isPending && "invisible")}>{children}</div>
+        <span className={cn("block", isPending && "invisible")}>
+          {children}
+        </span>
       </Button>
     );
   },

package/src/lib/ui/Alert.tsx

@@ -1,16 +1,15 @@
 import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
+import type * as React from "react";
 import { cn } from "../util/cn.js";
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
   {
     variants: {
       variant: {
-        default: "bg-background text-foreground",
+        default: "bg-card text-card-foreground",
         destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
       },
     },
     defaultVariants: {
@@ -19,41 +18,48 @@ const alertVariants = cva(
   },
 );
 
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div
-    ref={ref}
-    role="alert"
-    className={cn(alertVariants({ variant }), className)}
-    {...props}
-  />
-));
-Alert.displayName = "Alert";
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
 
-const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-    {...props}
-  />
-));
-AlertTitle.displayName = "AlertTitle";
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
 
-const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
-    {...props}
-  />
-));
-AlertDescription.displayName = "AlertDescription";
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
 
 export { Alert, AlertDescription, AlertTitle };

package/src/lib/ui/Badge.tsx

@@ -1,10 +1,10 @@
 import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "../util/cn.js";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {

package/src/lib/ui/Button.tsx

@@ -4,19 +4,21 @@ import * as React from "react";
 import { cn } from "../util/cn.js";
 
 export const buttonVariants = cva(
-  "not-prose inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  "not-prose inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+          "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
         destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+          "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
         outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
+        "ghost-destructive":
+          "text-destructive hover:bg-destructive hover:text-destructive-foreground",
         link: "text-primary underline-offset-4 hover:underline",
         expand:
           "flex gap-1.5 border bg-transparent rounded-xl text-muted-foreground hover:text-foreground",
@@ -26,7 +28,8 @@ export const buttonVariants = cva(
         sm: "h-8 rounded-md px-3 text-xs",
         lg: "h-10 rounded-md px-8",
         xl: "h-14 rounded-lg px-10 text-lg",
-        icon: "h-9 w-9",
+        icon: "size-9",
+        "icon-xs": "size-7",
       },
     },
     defaultVariants: {

package/src/lib/ui/Callout.tsx

@@ -77,7 +77,7 @@ export const Callout = ({
           "grid grid-cols-[min-content_1fr] items-baseline grid-rows-[fit-content_1fr] gap-x-4 gap-y-2",
         !icon && title && "flex flex-col gap-2",
         "[&_a]:underline [&_a]:decoration-current [&_a]:decoration-from-font [&_a]:underline-offset-4 hover:[&_a]:decoration-1",
-        "[&_code]:!bg-gray-50 [&_code]:dark:!bg-gray-800 [&_code]:!border-none",
+        "[&_.code-block-wrapper]:border",
         "[&_ul]:list-disc [&_ol]:list-decimal [&_ul]:ps-4 [&_ul>li]:ps-1 [&_ul>li]:my-1",
         icon && title && "items-center",
         border,
@@ -98,6 +98,7 @@ export const Callout = ({
           icon && "col-start-2",
           !title && icon && "row-start-1",
           textColor,
+          "overflow-x-auto",
         )}
       >
         {children}

package/src/lib/ui/Card.tsx

@@ -8,7 +8,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border bg-card text-card-foreground shadow-sm",
+      "rounded-xl border bg-card text-card-foreground shadow-xs",
       className,
     )}
     {...props}

package/src/lib/ui/Checkbox.tsx

@@ -11,7 +11,7 @@ const Checkbox = React.forwardRef<
   <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-none 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",
+      "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,
     )}

package/src/lib/ui/CodeBlock.tsx

@@ -0,0 +1,113 @@
+import { CheckIcon, CopyIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { useRef } from "react";
+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;
+  title?: string;
+  children?: ReactNode;
+  code?: ReactNode;
+  showCopy?: "hover" | "always" | "never";
+  disabled?: boolean;
+  showLineNumbers?: boolean;
+};
+
+const IconToLanguageMap: Record<string, RegExp> = {
+  typescript: /(tsx?|typescript)/,
+  javascript: /(jsx?|javascript)/,
+  markdown: /(md|markdown)/,
+  mdx: /(mdx)/,
+  json: /(json)/,
+  yaml: /(yaml)/,
+  toml: /(toml)/,
+  bash: /(shell|bash|sh|zsh)/,
+  python: /(py|python)/,
+  dotnet: /(cs|csharp|vb)/,
+  rust: /(rs|rust)/,
+  ruby: /(rb|ruby)/,
+  php: /php/,
+  html: /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",
+  language,
+  showCopy = "hover",
+  showLanguageIndicator,
+  showLineNumbers,
+  ...props
+}: CodeBlockProps) => {
+  const [isCopied, copyToClipboard] = useCopyToClipboard();
+  const ref = useRef<HTMLDivElement>(null);
+
+  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",
+        showLineNumbers && "line-numbers",
+      )}
+    >
+      <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" />}
+          {title}
+        </div>{" "}
+        {showCopy !== "never" && (
+          <button
+            type="button"
+            aria-label="Copy code"
+            title="Copy code"
+            className={cn(
+              "transition px-2 py-2 mx-1 rounded-sm",
+              !isCopied && "hover:bg-accent hover:brightness-95",
+            )}
+            disabled={isCopied}
+            onClick={() => {
+              if (!ref.current?.textContent) return;
+
+              copyToClipboard(ref.current.textContent);
+            }}
+          >
+            {isCopied ? (
+              <CheckIcon className="text-emerald-600" size={14} />
+            ) : (
+              <CopyIcon size={14} />
+            )}
+          </button>
+        )}
+      </div>
+      <div
+        className={cn(
+          "code-block text-sm not-prose scrollbar overflow-x-auto scrollbar [&>code]:p-3 [&>code]:py-2",
+          props.className,
+        )}
+        ref={ref}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/lib/ui/Command.tsx

@@ -2,7 +2,7 @@ import { type DialogProps } from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
 import * as React from "react";
-import { ComponentPropsWithoutRef } from "react";
+import { type ComponentPropsWithoutRef } from "react";
 import { Dialog, DialogContent } from "zudoku/ui/Dialog.js";
 import { cn } from "../util/cn.js";
 
@@ -64,7 +64,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
@@ -83,8 +83,8 @@ const CommandInlineInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
-        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+        "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring",
         className,
       )}
       {...props}
@@ -154,7 +154,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "relative flex cursor-default gap-2 select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       className,
     )}
     {...props}

package/src/lib/ui/Dialog.tsx

@@ -1,7 +1,7 @@
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
 import * as React from "react";
 
+import { XIcon } from "lucide-react";
 import { cn } from "../util/cn.js";
 
 const Dialog = DialogPrimitive.Root;
@@ -29,8 +29,10 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+  }
+>(({ className, children, showCloseButton = true, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
@@ -42,10 +44,12 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none 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">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
+      {showCloseButton && (
+        <DialogPrimitive.Close className="absolute left-1 top-1 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">
+          <XIcon className="h-3 w-3" strokeWidth={2} />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      )}
     </DialogPrimitive.Content>
   </DialogPortal>
 ));

package/src/lib/ui/DropdownMenu.tsx

@@ -25,7 +25,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      "flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent",
       inset && "pl-8",
       className,
     )}
@@ -82,7 +82,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className,
     )}
@@ -98,7 +98,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     checked={checked}
@@ -122,7 +122,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}

package/src/lib/ui/EmbeddedCodeBlock.tsx

@@ -0,0 +1,94 @@
+import { CheckIcon, CopyIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { useRef, useState } from "react";
+import { cn } from "../util/cn.js";
+
+export type CodeBlockProps = {
+  className?: string;
+  noBackground?: boolean;
+  wrapLines?: boolean;
+  showLanguageIndicator?: boolean;
+  language?: string;
+  children?: ReactNode;
+  code?: ReactNode;
+  showCopy?: "hover" | "always" | "never";
+  showCopyText?: boolean;
+  disabled?: boolean;
+  showLineNumbers?: boolean;
+};
+
+export const EmbeddedCodeBlock = ({
+  children,
+  language,
+  showCopy = "hover",
+  showCopyText,
+  showLanguageIndicator = true,
+  showLineNumbers,
+  ...props
+}: CodeBlockProps) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  if (!children) return null;
+
+  return (
+    <div
+      className={cn(
+        "code-block-wrapper relative group bg-muted/50",
+        showLineNumbers && "line-numbers",
+      )}
+    >
+      <div
+        className={cn(
+          "code-block text-sm not-prose scrollbar overflow-x-auto scrollbar [&>pre]:p-4",
+          props.className,
+        )}
+        ref={ref}
+      >
+        {children}
+      </div>
+      {showLanguageIndicator && (
+        <span
+          className={cn(
+            "absolute top-1.5 end-3 !text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0",
+            showCopy === "always" && "hidden",
+          )}
+        >
+          {language}
+        </span>
+      )}
+      {showCopy !== "never" && (
+        <button
+          type="button"
+          aria-label="Copy code"
+          title="Copy code"
+          className={cn(
+            "absolute top-2 end-2 p-2 transition hover:shadow-xs active:shadow-none active:inset-shadow-xs hover:outline outline-border rounded-md text-sm text-muted-foreground",
+            showCopy === "hover" && "opacity-0 group-hover:opacity-100",
+            showCopyText && "flex gap-2 items-center font-medium",
+          )}
+          disabled={isCopied}
+          onClick={() => {
+            if (!ref.current?.textContent) return;
+
+            setIsCopied(true);
+            void navigator.clipboard.writeText(ref.current.textContent);
+            setTimeout(() => setIsCopied(false), 2000);
+          }}
+        >
+          {isCopied ? (
+            <CheckIcon
+              className="text-emerald-600"
+              size={16}
+              strokeWidth={2.5}
+              absoluteStrokeWidth
+            />
+          ) : (
+            <CopyIcon size={16} />
+          )}
+          {showCopyText && "Copy"}
+        </button>
+      )}
+    </div>
+  );
+};

package/src/lib/ui/HoverCard.tsx

@@ -16,7 +16,7 @@ const HoverCardContent = React.forwardRef<
     align={align}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className,
     )}
     {...props}