zudoku 0.0.0-f0602bf → 0.0.0-f0b4321

package/src/lib/ui/CodeBlock.tsx

@@ -1,7 +1,8 @@
 import { CheckIcon, CopyIcon } from "lucide-react";
 import type { ReactNode } from "react";
-import { useRef, useState } from "react";
+import { useRef } from "react";
 import { cn } from "../util/cn.js";
+import { useCopyToClipboard } from "../util/useCopyToClipboard.js";
 
 export type CodeBlockProps = {
   className?: string;
@@ -13,22 +14,20 @@ export type CodeBlockProps = {
   children?: ReactNode;
   code?: ReactNode;
   showCopy?: "hover" | "always" | "never";
-  showCopyText?: boolean;
   disabled?: boolean;
   showLineNumbers?: boolean;
 };
 
 export const CodeBlock = ({
   children,
-  title,
+  title = "Code",
   language,
   showCopy = "hover",
-  showCopyText,
-  showLanguageIndicator = true,
+  showLanguageIndicator = false,
   showLineNumbers,
   ...props
 }: CodeBlockProps) => {
-  const [isCopied, setIsCopied] = useState(false);
+  const [isCopied, copyToClipboard] = useCopyToClipboard();
   const ref = useRef<HTMLDivElement>(null);
 
   if (!children) return null;
@@ -36,15 +35,45 @@ export const CodeBlock = ({
   return (
     <div
       className={cn(
-        "code-block-wrapper relative group bg-muted/50 rounded-md",
+        "border code-block-wrapper relative group bg-muted/50 rounded-md overflow-hidden",
         showLineNumbers && "line-numbers",
       )}
     >
-      {title && (
-        <div className="text-xs text-muted-foreground top-2 font-mono border-b w-full py-2 px-4 ">
+      <div className="border-b flex items-center h-10 font-sans bg-black/2">
+        <div className="flex-1 text-sm w-full px-4">
           {title}
-        </div>
-      )}
+          {showLanguageIndicator && language && (
+            <span className="text-muted-foreground ml-2">({language})</span>
+          )}
+        </div>{" "}
+        {showCopy !== "never" && (
+          <button
+            type="button"
+            aria-label="Copy code"
+            title="Copy code"
+            className={cn(
+              "cursor:pointer h-full hover:border-l-border active:shadow-none active:inset-shadow-xs hover:inset-shadow-xs flex items-center gap-2 px-4 outline-border text-sm hover:bg-black/5 transition-all",
+            )}
+            disabled={isCopied}
+            onClick={() => {
+              if (!ref.current?.textContent) return;
+
+              copyToClipboard(ref.current.textContent);
+            }}
+          >
+            {isCopied ? (
+              <CheckIcon
+                className="text-emerald-600"
+                size={14}
+                strokeWidth={2.5}
+                absoluteStrokeWidth
+              />
+            ) : (
+              <CopyIcon size={14} />
+            )}
+          </button>
+        )}
+      </div>
       <div
         className={cn(
           "code-block text-sm not-prose scrollbar overflow-x-auto scrollbar p-4",
@@ -54,49 +83,6 @@ export const CodeBlock = ({
       >
         {children}
       </div>
-      {showLanguageIndicator && (
-        <span
-          className={cn(
-            "absolute top-1.5 end-3 !text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0",
-            title && "top-12",
-          )}
-        >
-          {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",
-            title && "top-10",
-            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/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-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">
-        <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/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 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/Select.tsx

@@ -16,7 +16,7 @@ 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-hidden 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}

package/src/lib/ui/SyntaxHighlight.tsx

@@ -3,12 +3,16 @@ 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; children?: never } | { code?: never; children: string });
+  (
+    | { code: string; embedded?: boolean; children?: never }
+    | { code?: never; children: string; embedded?: boolean }
+  );
 
 export const SyntaxHighlight = memo(
-  ({ code, children, ...props }: SyntaxHighlightProps) => {
+  ({ code, children, embedded, ...props }: SyntaxHighlightProps) => {
     const { syntaxHighlighting } = useZudoku().options;
 
     invariant(syntaxHighlighting?.highlighter, "Highlighter not found");
@@ -20,7 +24,11 @@ export const SyntaxHighlight = memo(
       syntaxHighlighting.themes,
     );
 
-    return <CodeBlock {...props}>{highlightedCode}</CodeBlock>;
+    return embedded ? (
+      <EmbeddedCodeBlock {...props}>{highlightedCode}</EmbeddedCodeBlock>
+    ) : (
+      <CodeBlock {...props}>{highlightedCode}</CodeBlock>
+    );
   },
 );
 

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,6 +1,7 @@
 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";
@@ -14,10 +15,20 @@ 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}

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/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/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));