zudoku 0.0.0-ee328ec → 0.0.0-efc60ba6

package/src/lib/ui/Input.tsx

@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         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 focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "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 focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}

package/src/lib/ui/Popover.tsx

@@ -17,7 +17,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 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-72 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}

package/src/lib/ui/RadioGroup.tsx

@@ -26,7 +26,7 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}

package/src/lib/ui/Select.tsx

@@ -16,14 +16,14 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50",
       className,
     )}
     {...props}
   >
     <span className="truncate">{children}</span>
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="flex-shrink-0 h-4 w-4 opacity-50" />
+      <ChevronDown className="shrink-0 h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
@@ -115,7 +115,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "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",
+      "relative flex w-full cursor-default select-none items-center py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}

package/src/lib/ui/Slider.tsx

@@ -18,7 +18,7 @@ const Slider = React.forwardRef<
     <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
       <SliderPrimitive.Range className="absolute h-full bg-primary" />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
   </SliderPrimitive.Root>
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;

package/src/lib/ui/Switch.tsx

@@ -9,7 +9,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
       className,
     )}
     {...props}

package/src/lib/ui/SyntaxHighlight.tsx

@@ -1,186 +1,35 @@
-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;
+import { memo } from "react";
+import { useZudoku } from "../components/context/ZudokuContext.js";
+import { highlight } from "../shiki.js";
+import invariant from "../util/invariant.js";
+import { CodeBlock, type CodeBlockProps } from "./CodeBlock.js";
+import { EmbeddedCodeBlock } from "./EmbeddedCodeBlock.js";
+
+type SyntaxHighlightProps = CodeBlockProps &
+  (
+    | { code: string; embedded?: boolean; children?: never }
+    | { code?: never; children: string; embedded?: boolean }
+  );
 
-  // hardcoded values from the themes to avoid color flash in SSR
-  const themeColorClasses =
-    "bg-[#f6f8fa] text-[#393a34] dark:bg-[#1e1e1e] dark:text-[#9cdcfe]";
+export const SyntaxHighlight = memo(
+  ({ code, children, embedded, ...props }: SyntaxHighlightProps) => {
+    const { syntaxHighlighting } = useZudoku().options;
 
-  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 end-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 end-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>
-  );
+    invariant(syntaxHighlighting?.highlighter, "Highlighter not found");
 
-  if (disabled) {
-    return (
-      <ClientOnly fallback={<Wrapper>{code}</Wrapper>}>
-        <Wrapper>{code}</Wrapper>
-      </ClientOnly>
+    const highlightedCode = highlight(
+      syntaxHighlighting.highlighter,
+      code ?? children,
+      props.language,
+      syntaxHighlighting.themes,
     );
-  }
 
-  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);
+    return embedded ? (
+      <EmbeddedCodeBlock {...props}>{highlightedCode}</EmbeddedCodeBlock>
+    ) : (
+      <CodeBlock {...props}>{highlightedCode}</CodeBlock>
+    );
+  },
+);
 
 SyntaxHighlight.displayName = "SyntaxHighlight";

package/src/lib/ui/Tabs.tsx

@@ -26,7 +26,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
       className,
     )}
     {...props}
@@ -41,7 +41,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className,
     )}
     {...props}

package/src/lib/ui/Textarea.tsx

@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className,
         )}
         ref={ref}

package/src/lib/ui/Toggle.tsx

@@ -5,7 +5,7 @@ import * as React from "react";
 import { cn } from "../util/cn.js";
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
   {
     variants: {
       variant: {

package/src/lib/ui/Tooltip.tsx

@@ -9,6 +9,15 @@ const Tooltip = TooltipPrimitive.Root;
 
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
+const TooltipArrow = (
+  props: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>,
+) => (
+  <TooltipPrimitive.Arrow
+    {...props}
+    className={cn(props.className, "fill-border")}
+  />
+);
+
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
@@ -25,4 +34,10 @@ const TooltipContent = React.forwardRef<
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+export {
+  Tooltip,
+  TooltipArrow,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+};

package/src/lib/util/MdxComponents.tsx

@@ -1,21 +1,34 @@
 import { type MDXComponents } from "mdx/types.js";
+import { CodeBlock } from "zudoku/ui/CodeBlock.js";
 import { AnchorLink } from "../components/AnchorLink.js";
+import { Framed } from "../components/Framed.js";
 import { Heading } from "../components/Heading.js";
 import { InlineCode } from "../components/InlineCode.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";
+import { cn } from "./cn.js";
 
 export type MdxComponentsType = Readonly<MDXComponents> | null | undefined;
 
 export const MdxComponents = {
   img: ({ node, ...props }) => {
     if (/\.(mp4|webm|mov|avi)$/.test(props.src ?? "")) {
-      return <video src={props.src} controls playsInline autoPlay loop />;
+      return (
+        <video
+          src={props.src}
+          controls
+          playsInline
+          autoPlay
+          loop
+          className={cn("rounded-lg", props.className)}
+        />
+      );
     }
-    return <img {...props} className="rounded-md" />;
+    return <img {...props} className={cn("rounded-lg", props.className)} />;
   },
+  Framed,
   h1: ({ children, id }) => (
     <Heading level={1} id={id}>
       {children}
@@ -62,26 +75,37 @@ export const MdxComponents = {
   caution: (props) => <Callout type="caution" {...props} />,
   warning: (props) => <Callout type="caution" {...props} />,
   danger: (props) => <Callout type="danger" {...props} />,
-  pre: ({ children }) => <>{children}</>,
-  code: ({ className, children, ...props }) => {
-    // `inline` provided by the rehype plugin, as react-markdown removed support for that
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const { inline, title } = props as Record<string, unknown>;
+  pre: (props) => (
+    <pre className={cn("not-prose my-4", props.className)} {...props} />
+  ),
+  code: ({
+    className,
+    node: _node,
+    children,
+    title,
+    inline,
+    showLineNumbers,
+    ...props
+  }) => {
+    const match = className?.match(/language?-(\w+)/);
 
-    if (inline === true || inline === "true") {
-      return <InlineCode className={className}>{children}</InlineCode>;
+    if (inline === "true" || inline === true) {
+      return (
+        <InlineCode className={cn(className, "inline")}>{children}</InlineCode>
+      );
     }
 
-    const match = className?.match(/language?-(\w+)/);
-
     return (
-      <SyntaxHighlight
+      <CodeBlock
         language={match?.[1]}
-        className="rounded-xl p-4 border dark:!bg-foreground/10 dark:border-transparent"
         showLanguageIndicator
-        code={String(children).trim()}
-        title={typeof title === "string" ? title : undefined}
-      />
+        showLineNumbers={showLineNumbers}
+        title={title}
+      >
+        <code className={cn(className, "not-inline")} {...props}>
+          {children}
+        </code>
+      </CodeBlock>
     );
   },
 } satisfies MdxComponentsType;

package/src/lib/util/humanFileSize.test.ts

@@ -0,0 +1,24 @@
+import { humanFileSize } from "./humanFileSize.js";
+
+describe("humanFileSize", () => {
+  it("should handle zero bytes", () => {
+    expect(humanFileSize(0)).toBe("0 B");
+    expect(humanFileSize()).toBe("0 B");
+  });
+
+  it("should handle undefined bytes", () => {
+    expect(humanFileSize(undefined)).toBe("0 B");
+  });
+
+  it("should handle positive bytes", () => {
+    expect(humanFileSize(200)).toBe("200 B");
+    expect(humanFileSize(1000)).toBe("1.00 kB");
+    expect(humanFileSize(1000000)).toBe("1.00 MB");
+    expect(humanFileSize(1000000000)).toBe("1.00 GB");
+    expect(humanFileSize(1000000000000)).toBe("1.00 TB");
+    expect(humanFileSize(1000000000000000)).toBe("1.00 PB");
+    expect(humanFileSize(1000000000000000000)).toBe("1.00 EB");
+    expect(humanFileSize(1000000000000000000000)).toBe("1.00 ZB");
+    expect(humanFileSize(1000000000000000000000000)).toBe("1.00 YB");
+  });
+});

package/src/lib/util/humanFileSize.ts

@@ -0,0 +1,16 @@
+/**
+ * Converts a number of bytes to a human-readable file size string
+ * @param bytes - The number of bytes (defaults to 0)
+ * @returns A formatted string like "1.23 MB" or "456 B"
+ */
+export const humanFileSize = (bytes = 0) => {
+  if (bytes === 0) {
+    return "0 B";
+  }
+
+  const exponent = Math.floor(Math.log(bytes) / Math.log(1000.0));
+  const decimal = (bytes / Math.pow(1000.0, exponent)).toFixed(
+    exponent ? 2 : 0,
+  );
+  return `${decimal} ${exponent ? `${"kMGTPEZY"[exponent - 1]}B` : "B"}`;
+};

package/src/lib/util/invariant.ts

@@ -18,17 +18,19 @@ export default function invariant(
   throw new ZudokuError(provided ?? "Invariant failed");
 }
 
+export type ZudokuErrorOptions = {
+  developerHint?: string;
+  title?: string;
+  cause?: Error;
+};
+
 export class ZudokuError extends Error {
   public developerHint: string | undefined;
   public title: string | undefined;
 
   constructor(
     message: string,
-    {
-      developerHint,
-      title,
-      cause,
-    }: { developerHint?: string; title?: string; cause?: Error } = {},
+    { developerHint, title, cause }: ZudokuErrorOptions = {},
   ) {
     super(message, { cause });
     this.name = "ZudokuError";

package/src/lib/util/os.ts

@@ -0,0 +1,18 @@
+export function getOS(): "apple" | "linux" | "unix" | "windows" | undefined {
+  const notFound = -1;
+  const userAgent = navigator.userAgent.toLowerCase();
+  if (userAgent.indexOf("win") !== notFound) {
+    return "windows";
+  } else if (userAgent.indexOf("mac") !== notFound) {
+    return "apple";
+  } else if (userAgent.indexOf("linux") !== notFound) {
+    return "linux";
+  } else if (userAgent.indexOf("x11") !== notFound) {
+    return "unix";
+  }
+  return;
+}
+
+export function isAppleDevice(): boolean {
+  return getOS() === "apple";
+}

package/src/lib/util/useCopyToClipboard.ts

@@ -0,0 +1,17 @@
+import { useCallback, useState } from "react";
+
+export const useCopyToClipboard = (timeout = 2000) => {
+  const [isCopied, setIsCopied] = useState(false);
+
+  const copyToClipboard = useCallback(
+    (text: string) => {
+      void navigator.clipboard.writeText(text);
+      setIsCopied(true);
+
+      setTimeout(() => setIsCopied(false), timeout);
+    },
+    [timeout],
+  );
+
+  return [isCopied, copyToClipboard] as const;
+};

package/src/lib/util/useExposedProps.tsx

@@ -1,10 +1,21 @@
 import {
+  type Location,
+  type NavigateFunction,
+  type Params,
+  type SetURLSearchParams,
   useLocation,
   useNavigate,
   useParams,
   useSearchParams,
 } from "react-router";
-import type { ExposedComponentProps } from "../components/SlotletProvider.js";
+
+export type ExposedComponentProps = {
+  location: Location;
+  navigate: NavigateFunction;
+  searchParams: URLSearchParams;
+  setSearchParams: SetURLSearchParams;
+  params: Params;
+};
 
 export const useExposedProps = (): ExposedComponentProps => {
   const location = useLocation();

package/src/lib/util/useScrollToAnchor.ts

@@ -1,7 +1,7 @@
 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";
+import { DATA_ANCHOR_ATTR } from "../components/navigation/NavigationItem.js";
 import { scrollIntoViewIfNeeded } from "./scrollIntoViewIfNeeded.js";
 
 export const useScrollToHash = () => {
@@ -11,8 +11,8 @@ export const useScrollToHash = () => {
     (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.
+      // Operation list items might have subdivisions that the navigation doesn't show.
+      // The subdivisions are separated by a slash so we need to remove everything before the slash to get the navigation correct item.
       const linkHash = cleanHash.split("/").at(0)!;
       const element = document.getElementById(decodeURIComponent(cleanHash));
 

package/src/shiki/langs/abap.js

@@ -0,0 +1 @@
+export { default } from "@shikijs/langs/abap";

package/src/shiki/langs/actionscript-3.js

@@ -0,0 +1 @@
+export { default } from "@shikijs/langs/actionscript-3";

package/src/shiki/langs/ada.js

@@ -0,0 +1 @@
+export { default } from "@shikijs/langs/ada";

package/src/shiki/langs/angular-expression.js

@@ -0,0 +1 @@
+export { default } from "@shikijs/langs/angular-expression";

package/src/shiki/langs/angular-html.js

@@ -0,0 +1 @@
+export { default } from "@shikijs/langs/angular-html";

package/src/shiki/langs/angular-inline-style.js

@@ -0,0 +1 @@
+export { default } from "@shikijs/langs/angular-inline-style";

package/src/shiki/langs/angular-inline-template.js

@@ -0,0 +1 @@
+export { default } from "@shikijs/langs/angular-inline-template";

package/src/shiki/langs/angular-let-declaration.js

@@ -0,0 +1 @@
+export { default } from "@shikijs/langs/angular-let-declaration";

package/src/shiki/langs/angular-template-blocks.js

@@ -0,0 +1 @@
+export { default } from "@shikijs/langs/angular-template-blocks";

package/src/shiki/langs/angular-template.js

@@ -0,0 +1 @@
+export { default } from "@shikijs/langs/angular-template";

package/src/shiki/langs/angular-ts.js

@@ -0,0 +1 @@
+export { default } from "@shikijs/langs/angular-ts";

package/src/shiki/langs/apache.js

@@ -0,0 +1 @@
+export { default } from "@shikijs/langs/apache";

package/src/shiki/langs/apex.js

@@ -0,0 +1 @@
+export { default } from "@shikijs/langs/apex";

package/src/shiki/langs/apl.js

@@ -0,0 +1 @@
+export { default } from "@shikijs/langs/apl";