zudoku 0.0.0-ec30b50 → 0.0.0-ed94abf

package/src/lib/ui/Callout.tsx

@@ -56,31 +56,50 @@ type CalloutProps = {
   title?: string;
   children: ReactNode;
   className?: string;
+  icon?: boolean;
 };
 
-export const Callout = ({ type, children, title, className }: CalloutProps) => {
+export const Callout = ({
+  type,
+  children,
+  title,
+  className,
+  icon = true,
+}: CalloutProps) => {
   const { border, bg, iconColor, titleColor, textColor, Icon } =
     stylesMap[type];
 
   return (
     <div
       className={cn(
-        "not-prose grid grid-cols-[min-content_1fr] grid-rows-[fit-content_1fr] gap-x-4 gap-y-2 text-md rounded-md border p-4",
+        "not-prose rounded-md border p-4 text-md my-2",
+        icon &&
+          "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 my-2",
-        title && "items-center",
+        "[&_code]:!bg-gray-50 [&_code]:dark:!bg-gray-800 [&_code]:!border-none",
+        "[&_ul]:list-disc [&_ol]:list-decimal [&_ul]:ps-4 [&_ul>li]:ps-1 [&_ul>li]:my-1",
+        icon && title && "items-center",
         border,
         bg,
         className,
       )}
     >
-      <Icon
-        className={cn(!title && "translate-y-px", iconColor)}
-        size={20}
-        aria-hidden="true"
-      />
+      {icon && (
+        <Icon
+          className={cn(!title ? "translate-y-1" : "align-middle", iconColor)}
+          size={20}
+          aria-hidden="true"
+        />
+      )}
       {title && <h3 className={cn("font-medium", titleColor)}>{title}</h3>}
-      <div className={cn("col-start-2", !title && "row-start-1", textColor)}>
+      <div
+        className={cn(
+          icon && "col-start-2",
+          !title && icon && "row-start-1",
+          textColor,
+        )}
+      >
         {children}
       </div>
     </div>

package/src/lib/ui/Checkbox.tsx

@@ -1,36 +1,20 @@
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { cva, type VariantProps } from "class-variance-authority";
 import { Check } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "../util/cn.js";
 
-const checkboxVariants = cva(
-  "peer h-4 w-4 shrink-0 rounded-sm 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",
-  {
-    variants: {
-      variant: {
-        default: "border border-primary data-[state=checked]:bg-primary",
-        outline: "border border-input data-[state=checked]:bg-accent",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-interface CheckboxProps
-  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
-    VariantProps<typeof checkboxVariants> {}
-
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
-  CheckboxProps
->(({ className, variant, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
   <CheckboxPrimitive.Root
     ref={ref}
-    className={cn(checkboxVariants({ variant, className }))}
+    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",
+      "border border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary",
+      className,
+    )}
     {...props}
   >
     <CheckboxPrimitive.Indicator
@@ -42,4 +26,4 @@ const Checkbox = React.forwardRef<
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-export { Checkbox, type CheckboxProps };
+export { Checkbox };

package/src/lib/ui/Command.tsx

@@ -2,6 +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 { Dialog, DialogContent } from "zudoku/ui/Dialog.js";
 import { cn } from "../util/cn.js";
 
@@ -20,11 +21,32 @@ const Command = React.forwardRef<
 ));
 Command.displayName = CommandPrimitive.displayName;
 
-const CommandDialog = ({ children, ...props }: DialogProps) => {
+const CommandDialog = ({
+  children,
+  command,
+  content,
+  ...props
+}: DialogProps & {
+  command?: ComponentPropsWithoutRef<typeof CommandPrimitive>;
+  content?: ComponentPropsWithoutRef<typeof DialogContent>;
+}) => {
   return (
     <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+      <DialogContent
+        {...content}
+        className={cn(
+          "overflow-hidden p-0 shadow-lg top-[15vh] translate-y-[0%]",
+          content?.className,
+        )}
+        aria-describedby={undefined}
+      >
+        <Command
+          {...command}
+          className={cn(
+            "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",
+            command?.className,
+          )}
+        >
           {children}
         </Command>
       </DialogContent>

package/src/lib/ui/Select.tsx

@@ -115,7 +115,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}

package/src/lib/ui/Stepper.tsx

@@ -0,0 +1,8 @@
+import type { PropsWithChildren } from "react";
+
+// "stepper" class is defined in main.css
+const Stepper = ({ children }: PropsWithChildren) => {
+  return <div className="stepper">{children}</div>;
+};
+
+export { Stepper };

package/src/lib/ui/SyntaxHighlight.tsx

@@ -0,0 +1,186 @@
+import {
+  Highlight,
+  Prism,
+  themes,
+  type HighlightProps,
+} from "prism-react-renderer";
+
+import { CheckIcon, CopyIcon } from "lucide-react";
+
+globalThis.Prism = Prism;
+// @ts-expect-error This is untyped
+void import("prismjs/components/prism-bash.min.js");
+// @ts-expect-error This is untyped
+void import("prismjs/components/prism-ruby.min.js");
+// @ts-expect-error This is untyped
+void import("prismjs/components/prism-markup.js");
+// @ts-expect-error This is untyped
+void import("prismjs/components/prism-json.min.js");
+// @ts-expect-error This is untyped
+void import("prismjs/components/prism-java.min.js");
+// @ts-expect-error This is untyped
+void import("prismjs/components/prism-csharp.min.js");
+// @ts-expect-error This is untyped
+void import("prismjs/components/prism-objectivec.min.js");
+// @ts-expect-error This is untyped
+void import("prismjs/components/prism-markdown.min.js");
+// @ts-expect-error This is untyped
+void import("prismjs/components/prism-javascript.min.js");
+// @ts-expect-error This is untyped
+void import("prismjs/components/prism-typescript.min.js");
+// @ts-expect-error This is untyped
+void import("prismjs/components/prism-jsstacktrace.min.js");
+
+import { useTheme } from "next-themes";
+import { memo, useState } from "react";
+import { ClientOnly } from "../components/ClientOnly.js";
+import { cn } from "../util/cn.js";
+
+export type SyntaxHighlightProps = {
+  className?: string;
+  noBackground?: boolean;
+  wrapLines?: boolean;
+  showLanguageIndicator?: boolean;
+  language?: string;
+  title?: string;
+  children?: string;
+  code?: string;
+  showCopy?: "hover" | "always" | "never";
+  showCopyText?: boolean;
+  disabled?: boolean;
+} & Omit<HighlightProps, "children" | "language">;
+
+const remapLang = {
+  mdx: "md",
+} as Record<string, string>;
+
+const SyntaxHighlightInner = ({
+  language = "plain",
+  showCopy = "hover",
+  showCopyText,
+  title,
+  children,
+  disabled,
+  ...props
+}: SyntaxHighlightProps) => {
+  const { resolvedTheme } = useTheme();
+  const [isCopied, setIsCopied] = useState(false);
+
+  const code = children ?? props.code;
+
+  if (!code) {
+    return null;
+  }
+
+  const highlightTheme =
+    resolvedTheme === "dark" ? themes.vsDark : themes.github;
+
+  // hardcoded values from the themes to avoid color flash in SSR
+  const themeColorClasses =
+    "bg-[#f6f8fa] text-[#393a34] dark:bg-[#1e1e1e] dark:text-[#9cdcfe]";
+
+  const Wrapper = ({
+    children,
+    className,
+    style,
+  }: {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+  }) => (
+    <div className="relative group">
+      {title && (
+        <div className="text-xs text-muted-foreground absolute top-2 font-mono border-b w-full pb-2 px-4 ">
+          {title}
+        </div>
+      )}
+      <pre
+        className={cn(
+          "relative scrollbar overflow-x-auto",
+          props.className,
+          props.noBackground ? "!bg-transparent" : themeColorClasses,
+          props.wrapLines && "whitespace-pre-wrap break-words",
+          title && "pt-10",
+          className,
+        )}
+        style={style}
+      >
+        {children}
+      </pre>
+      {props.showLanguageIndicator && (
+        <span className="absolute top-1.5 right-3 text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0">
+          {language}
+        </span>
+      )}
+      {showCopy !== "never" && (
+        <button
+          type="button"
+          aria-label="Copy code"
+          title="Copy code"
+          className={cn(
+            "absolute top-2 right-2 p-2  hover:outline hover:outline-border/75 dark:hover:outline-border rounded-md text-sm text-muted-foreground transition",
+            showCopy === "hover"
+              ? "opacity-0 group-hover:opacity-100 group-hover:bg-zinc-100 group-hover:dark:bg-zinc-700"
+              : "bg-zinc-100 dark:bg-zinc-700",
+            showCopyText && "flex gap-2 items-center font-medium",
+          )}
+          disabled={isCopied}
+          onClick={() => {
+            setIsCopied(true);
+            void navigator.clipboard.writeText(code);
+            setTimeout(() => setIsCopied(false), 2000);
+          }}
+        >
+          {isCopied ? (
+            <CheckIcon
+              className="text-emerald-600"
+              size={16}
+              strokeWidth={2.5}
+              absoluteStrokeWidth
+            />
+          ) : (
+            <CopyIcon size={16} />
+          )}
+          {showCopyText && "Copy"}
+        </button>
+      )}
+    </div>
+  );
+
+  if (disabled) {
+    return (
+      <ClientOnly fallback={<Wrapper>{code}</Wrapper>}>
+        <Wrapper>{code}</Wrapper>
+      </ClientOnly>
+    );
+  }
+
+  return (
+    <ClientOnly fallback={<Wrapper>{code}</Wrapper>}>
+      <Highlight
+        theme={highlightTheme}
+        language={remapLang[language] ?? language}
+        {...props}
+        code={code}
+      >
+        {({ className, style, tokens, getLineProps, getTokenProps }) => (
+          <Wrapper className={className} style={style}>
+            {tokens.map((line, i) => (
+              // eslint-disable-next-line react/no-array-index-key
+              <div key={i} {...getLineProps({ line })}>
+                {line.map((token, key) => (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <span key={key} {...getTokenProps({ token })} />
+                ))}
+              </div>
+            ))}
+          </Wrapper>
+        )}
+      </Highlight>
+    </ClientOnly>
+  );
+};
+
+export const SyntaxHighlight = memo(SyntaxHighlightInner);
+
+SyntaxHighlight.displayName = "SyntaxHighlight";

package/src/lib/ui/util.tsx

@@ -0,0 +1,3 @@
+import { cn as cnUtil } from "../util/cn.js";
+
+export const cn = cnUtil;

package/src/lib/util/MdxComponents.tsx

@@ -1,9 +1,11 @@
-import { MDXComponents } from "mdx/types.js";
-import { Link } from "react-router";
+import { type MDXComponents } from "mdx/types.js";
+import { AnchorLink } from "../components/AnchorLink.js";
 import { Heading } from "../components/Heading.js";
 import { InlineCode } from "../components/InlineCode.js";
-import { SyntaxHighlight } from "../components/SyntaxHighlight.js";
+import { Button } from "../ui/Button.js";
 import { Callout } from "../ui/Callout.js";
+import { Stepper } from "../ui/Stepper.js";
+import { SyntaxHighlight } from "../ui/SyntaxHighlight.js";
 
 export type MdxComponentsType = Readonly<MDXComponents> | null | undefined;
 
@@ -46,11 +48,14 @@ export const MdxComponents = {
   ),
   a: ({ href, node, ...props }) =>
     href && !href.startsWith("http") ? (
-      <Link to={href} relative="path" {...props} />
+      <AnchorLink to={href} relative="path" {...props} />
     ) : (
       <a href={href} target="_blank" {...props} rel="noreferrer" />
     ),
+  Button,
   Callout,
+  Stepper,
+  SyntaxHighlight,
   tip: (props) => <Callout type="tip" {...props} />,
   info: (props) => <Callout type="info" {...props} />,
   note: (props) => <Callout type="note" {...props} />,

package/src/lib/util/detectOS.ts

@@ -0,0 +1,9 @@
+export function detectOS() {
+  const userAgent = navigator.userAgent.toLowerCase();
+
+  if (userAgent.includes("win")) return "Windows";
+  if (userAgent.includes("mac")) return "macOS";
+  if (userAgent.includes("linux")) return "Linux";
+
+  return undefined;
+}

package/src/lib/util/joinPath.tsx

@@ -1,3 +1,6 @@
+/**
+ * @deprecated Use `joinUrl` instead.
+ */
 export const joinPath = (
   ...parts: Array<string | null | undefined | boolean>
 ) => {

package/src/lib/util/traverse.ts

@@ -1,10 +1,6 @@
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type RecordAny = Record<string, any>;
+import type { JsonValue, RecordAny } from "./types.js";
 
-type JsonPrimitive = string | number | boolean | null;
-type JsonArray = JsonValue[];
-type JsonObject = { [key: string]: JsonValue };
-type JsonValue = JsonPrimitive | JsonArray | JsonObject;
+export type { RecordAny };
 
 export const traverse = <T extends JsonValue = RecordAny>(
   specification: RecordAny,
@@ -20,11 +16,11 @@ export const traverse = <T extends JsonValue = RecordAny>(
   for (const [key, value] of Object.entries(transformed)) {
     if (Array.isArray(value)) {
       result[key] = value.map((item) =>
-        typeof item === "object" && item !== null
+        typeof item === "object" && item != null
           ? traverse(item, transform)
           : item,
       );
-    } else if (typeof value === "object" && value !== null) {
+    } else if (typeof value === "object" && value != null) {
       result[key] = traverse(value, transform);
     } else {
       result[key] = value;

package/src/lib/util/types.ts

@@ -0,0 +1,7 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type RecordAny = Record<string, any>;
+
+export type JsonPrimitive = string | number | boolean | null;
+export type JsonArray = JsonValue[];
+export type JsonObject = { [key: string]: JsonValue };
+export type JsonValue = JsonPrimitive | JsonArray | JsonObject;

package/src/lib/util/useLatest.ts

@@ -0,0 +1,18 @@
+import { useEffect, useRef } from "react";
+
+// This hook is useful when you need to store a reference to a variable that changes over time,
+// but you don't want to re-run any callbacks that depend on that variable every time it changes.
+// By using a reference to the latest value, you can ensure that any callbacks only run when necessary,
+// without any unnecessary re-renders.
+
+// Note: It's safe to put the return value of this hook in a dependency array, because it won't change!
+export const useLatest = <T>(current: T) => {
+  const valueRef = useRef(current);
+  valueRef.current = current;
+
+  useEffect(() => {
+    valueRef.current = current;
+  }, [current]);
+
+  return valueRef;
+};

package/src/lib/util/useOnScreen.ts

@@ -1,14 +1,16 @@
 import { useEffect, useRef, useState } from "react";
 
-export const useOnScreen = ({
+export const useOnScreen = <E extends Element = HTMLElement>({
   rootMargin = "0px",
   threshold,
+  root,
 }: {
   rootMargin?: string;
   threshold?: number;
+  root?: Element | null;
 } = {}) => {
   const [isVisible, setIsVisible] = useState(false);
-  const ref = useRef<HTMLElement | null>(null);
+  const ref = useRef<E | null>(null);
 
   useEffect(() => {
     const observer = new IntersectionObserver(
@@ -16,7 +18,7 @@ export const useOnScreen = ({
         if (!entry) return;
         setIsVisible(entry.isIntersecting);
       },
-      { rootMargin, threshold },
+      { rootMargin, threshold, root },
     );
 
     const currentElement = ref.current;
@@ -26,7 +28,7 @@ export const useOnScreen = ({
     observer.observe(currentElement);
 
     return () => observer.unobserve(currentElement);
-  }, [rootMargin, threshold]);
+  }, [root, rootMargin, threshold]);
 
   return [ref, isVisible] as const;
 };

package/src/lib/util/useScrollToAnchor.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { useLocation } from "react-router";
 import { useViewportAnchor } from "../components/context/ViewportAnchorContext.js";
 import { DATA_ANCHOR_ATTR } from "../components/navigation/SidebarItem.js";
@@ -9,21 +9,23 @@ export const useScrollToHash = () => {
 
   const scrollToHash = useCallback(
     (hash: string) => {
-      const cleanHash = hash
-        .replace(/^#/, "")
-        // Operation list items might have subdivisions that the sidebar doesn't show.
-        // The subdivisions are separated by a slash so we need to remove everything before the slash to get the sidebar correct item.
-        .split("/")
-        .at(0)!;
+      const cleanHash = hash.replace(/^#/, "");
+
+      // Operation list items might have subdivisions that the sidebar doesn't show.
+      // The subdivisions are separated by a slash so we need to remove everything before the slash to get the sidebar correct item.
+      const linkHash = cleanHash.split("/").at(0)!;
       const element = document.getElementById(decodeURIComponent(cleanHash));
+
       const link = document.querySelector(
-        `[${DATA_ANCHOR_ATTR}="${cleanHash}"]`,
+        `[${DATA_ANCHOR_ATTR}="${linkHash}"]`,
       );
 
       if (element) {
         element.scrollIntoView();
         scrollIntoViewIfNeeded(link);
-        requestIdleCallback(() => setActiveAnchor(cleanHash));
+        // Set the active anchor after the scroll has happened
+        // so the intersection observer doesn't trigger wrong items
+        requestIdleCallback(() => setActiveAnchor(linkHash));
         return true;
       }
 
@@ -38,21 +40,29 @@ export const useScrollToHash = () => {
 
 export const useScrollToAnchor = () => {
   const location = useLocation();
-  const { setActiveAnchor } = useViewportAnchor();
   const scrollToHash = useScrollToHash();
+  const initialScrolled = useRef(false);
 
   useEffect(() => {
-    if (!location.hash) return;
-
-    if (!scrollToHash(location.hash)) {
-      const observer = new MutationObserver((_, obs) => {
-        if (!scrollToHash(location.hash)) return;
-        obs.disconnect();
-      });
+    if (!location.hash || !initialScrolled.current) return;
 
-      observer.observe(document.body, { childList: true, subtree: true });
+    scrollToHash(location.hash);
+  }, [location.hash, scrollToHash]);
 
-      return () => observer.disconnect();
+  useEffect(() => {
+    if (!location.hash) {
+      initialScrolled.current = true;
+      return;
     }
-  }, [location.hash, scrollToHash, setActiveAnchor]);
+
+    const observer = new MutationObserver((_, obs) => {
+      if (!scrollToHash(location.hash)) return;
+      initialScrolled.current = true;
+      obs.disconnect();
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
+
+    return () => observer.disconnect();
+  }, [location.hash, scrollToHash]);
 };

package/client.d.ts

@@ -1,8 +0,0 @@
-/* eslint-disable no-var */
-/// <reference types="vite/client" />
-
-declare var process: {
-  env: {
-    [key: string]: string | undefined;
-  };
-};

package/dist/lib/components/SyntaxHighlight.d.ts

@@ -1,12 +0,0 @@
-import { type HighlightProps } from "prism-react-renderer";
-type SyntaxHighlightProps = {
-    className?: string;
-    noBackground?: boolean;
-    wrapLines?: boolean;
-    copyable?: boolean;
-    showLanguageIndicator?: boolean;
-    language?: string;
-    title?: string;
-} & Omit<HighlightProps, "children" | "language">;
-export declare const SyntaxHighlight: ({ copyable, language, title, ...props }: SyntaxHighlightProps) => import("react/jsx-runtime").JSX.Element | null;
-export {};

package/dist/lib/components/SyntaxHighlight.js

@@ -1,53 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Highlight, Prism, themes, } from "prism-react-renderer";
-import { CheckIcon, CopyIcon } from "lucide-react";
-globalThis.Prism = Prism;
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-bash.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-ruby.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-markup.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-json.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-java.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-csharp.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-objectivec.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-markdown.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-javascript.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-typescript.min.js");
-import { useTheme } from "next-themes";
-import { useState } from "react";
-import { cn } from "../util/cn.js";
-import { ClientOnly } from "./ClientOnly.js";
-const remapLang = {
-    mdx: "md",
-};
-export const SyntaxHighlight = ({ copyable = true, language = "plain", title, ...props }) => {
-    const { resolvedTheme } = useTheme();
-    const [isCopied, setIsCopied] = useState(false);
-    if (!props.code) {
-        return null;
-    }
-    const highlightTheme = resolvedTheme === "dark" ? themes.vsDark : themes.github;
-    // hardcoded values from the themes to avoid color flash in SSR
-    const themeColorClasses = "bg-[#f6f8fa] text-[#393a34] dark:bg-[#1e1e1e] dark:text-[#9cdcfe]";
-    return (_jsx(ClientOnly, { fallback: _jsxs("div", { className: "relative group", children: [title && (_jsx("div", { className: "text-xs text-muted-foreground absolute top-2 font-mono border-b w-full pb-2 px-4 ", children: title })), _jsx("pre", { className: cn("relative scrollbar overflow-x-auto", props.className, props.noBackground ? "!bg-transparent" : themeColorClasses, props.wrapLines && "whitespace-pre-wrap break-words", title && "pt-10"), children: props.code }), props.showLanguageIndicator && (_jsx("span", { className: "absolute top-1.5 right-3 text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0", children: language }))] }), children: _jsx(Highlight, { theme: highlightTheme, language: remapLang[language] ?? language, ...props, children: ({ className, style, tokens, getLineProps, getTokenProps }) => (_jsxs("div", { className: "relative group", children: [title && (_jsx("div", { className: "text-xs text-muted-foreground absolute top-2 font-mono border-b w-full pb-2 px-4 ", children: title })), _jsx("pre", { className: cn("relative scrollbar overflow-x-auto", className, props.className, props.noBackground && "!bg-transparent", props.wrapLines && "whitespace-pre-wrap break-words", title && "pt-10"), style: style, children: tokens.map((line, i) => (
-                        // eslint-disable-next-line react/no-array-index-key
-                        _jsx("div", { ...getLineProps({ line }), children: line.map((token, key) => (
-                            // eslint-disable-next-line react/no-array-index-key
-                            _jsx("span", { ...getTokenProps({ token }) }, key))) }, i))) }), props.showLanguageIndicator && (_jsx("span", { className: "absolute top-1.5 right-3 text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0", children: language })), copyable && (_jsx("button", { type: "button", "aria-label": "Copy code", title: "Copy code", className: "absolute top-2 right-2 p-2 opacity-0 group-hover:opacity-100 group-hover:bg-zinc-100 group-hover:dark:bg-zinc-700 hover:outline hover:outline-border/75 dark:hover:outline-border rounded-md text-sm text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-400 transition", disabled: isCopied, onClick: () => {
-                            setIsCopied(true);
-                            void navigator.clipboard.writeText(tokens
-                                .map((l) => l.map(({ content }) => content).join(""))
-                                .join("\n"));
-                            setTimeout(() => setIsCopied(false), 2000);
-                        }, children: isCopied ? (_jsx(CheckIcon, { className: "text-emerald-600", size: 16, strokeWidth: 2.5, absoluteStrokeWidth: true })) : (_jsx(CopyIcon, { size: 16 })) }))] })) }) }));
-};
-//# sourceMappingURL=SyntaxHighlight.js.map