Fix QR image not appearing for new codes; v1.1.4

Switch from toDataURL (which silently failed in browser) to toCanvas on
a real <canvas> ref — more reliable and renders immediately on mount.
Download PNG link appears once the canvas is drawn.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "siteforge",
   "private": true,
-  "version": "1.1.3",
+  "version": "1.1.4",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/AdminPage.tsx

@@ -1086,16 +1086,22 @@ function buildSiteContentForSave(siteContent: SiteContent): SiteContent {
 }
 
 function QrCodeImage({ url, label }: { url: string; label: string }) {
+  const canvasRef = React.useRef<HTMLCanvasElement>(null)
   const [dataUrl, setDataUrl] = React.useState<string>('')
+
   React.useEffect(() => {
-    QRCode.toDataURL(url, { width: 256, margin: 2, color: { dark: '#000000', light: '#ffffff' } })
+    const canvas = canvasRef.current
-      .then(setDataUrl)
+    if (!canvas) return
-      .catch(() => {})
+    QRCode.toCanvas(canvas, url, { width: 256, margin: 2, color: { dark: '#000000', light: '#ffffff' } }, (err: Error | null | undefined) => {
+      if (err) { console.error('[QR]', err); return }
+      setDataUrl(canvas.toDataURL('image/png'))
+    })
   }, [url])
-  if (!dataUrl) return null
+
   return (
     <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 6, marginTop: 10 }}>
-      <img src={dataUrl} alt={`QR code for ${label}`} style={{ width: 128, height: 128, imageRendering: 'pixelated', border: '1px solid var(--admin-border, #ddd)', borderRadius: 4 }} />
+      <canvas ref={canvasRef} style={{ width: 128, height: 128, border: '1px solid var(--admin-border, #ddd)', borderRadius: 4 }} />
+      {dataUrl && (
         <a
           href={dataUrl}
           download={`qr-${label.toLowerCase().replace(/[^a-z0-9]+/g, '-')}.png`}
@@ -1104,6 +1110,7 @@ function QrCodeImage({ url, label }: { url: string; label: string }) {
         >
           Download PNG
         </a>
+      )}
     </div>
   )
 }