fix(QRCode): guard against a non-positive size prop

src/components/QRCode.test.tsx

@@ -77,6 +77,54 @@ describe("QRCode", () => {
     expect(document.querySelector("canvas")).toBeInTheDocument();
   });
 
+  describe("size validation", () => {
+    it("warns and skips drawing when size is 0", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      const getContext = vi.spyOn(HTMLCanvasElement.prototype, "getContext");
+
+      render(<QRCode value={value} size={0} />);
+
+      expect(warn).toHaveBeenCalledWith("[QRCode] size must be > 0");
+      expect(getContext).not.toHaveBeenCalled();
+
+      warn.mockRestore();
+      getContext.mockRestore();
+    });
+
+    it("warns and skips drawing when size is negative", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      const getContext = vi.spyOn(HTMLCanvasElement.prototype, "getContext");
+
+      render(<QRCode value={value} size={-10} />);
+
+      expect(warn).toHaveBeenCalledWith("[QRCode] size must be > 0");
+      expect(getContext).not.toHaveBeenCalled();
+
+      warn.mockRestore();
+      getContext.mockRestore();
+    });
+
+    it("does not leave a loading spinner running for an invalid size", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+      const { container } = render(<QRCode value={value} size={0} />);
+
+      expect(container.querySelector(".animate-spin")).not.toBeInTheDocument();
+
+      warn.mockRestore();
+    });
+
+    it("does not warn for a valid size", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+      render(<QRCode value={value} size={120} />);
+
+      expect(warn).not.toHaveBeenCalledWith("[QRCode] size must be > 0");
+
+      warn.mockRestore();
+    });
+  });
+
   it("accepts a className on the outer wrapper", () => {
     const { container } = render(<QRCode value={value} className="my-qr" />);
     const wrapper = container.firstElementChild;

src/components/QRCode.tsx

@@ -46,6 +46,11 @@ export function QRCode({
   const [isLoading, setIsLoading] = useState(true);
   const [prevProps, setPrevProps] = useState({ value, size, canvasBackground, canvasForeground });
 
+  // A zero or negative size gives the canvas invalid dimensions and renders as
+  // a broken box. Derived rather than stored so the spinner doesn't sit
+  // running while waiting on a draw that will never be attempted.
+  const hasInvalidSize = !size || size <= 0;
+
   if (
     prevProps.value !== value ||
     prevProps.size !== size ||
@@ -59,6 +64,11 @@ export function QRCode({
   useEffect(() => {
     if (renderError || !value) return;
 
+    if (hasInvalidSize) {
+      console.warn("[QRCode] size must be > 0");
+      return;
+    }
+
     const canvas = canvasRef.current;
     if (!canvas) return;
 
@@ -100,7 +110,7 @@ export function QRCode({
     return () => {
       active = false;
     };
-  }, [value, size, canvasBackground, canvasForeground, renderError]);
+  }, [value, size, canvasBackground, canvasForeground, renderError, hasInvalidSize]);
 
   return (
     <figure className={cn("flex flex-col items-center gap-3", className)}>
@@ -122,7 +132,7 @@ export function QRCode({
           </div>
         ) : (
           <>
-            {isLoading && (
+            {isLoading && !hasInvalidSize && (
               <div
                 className="flex items-center justify-center"
                 style={{ width: size, height: size }}