Fix ASCII plugin zoom on hover

plugins/ascii/src/App.css

@@ -34,6 +34,10 @@ html * {
             height: 100% !important;
             transform: translate(0, 0) !important;
         }
+
+        canvas.zoom {
+            max-width: unset;
+        }
     }
 }
 
@@ -49,6 +53,10 @@ html * {
 }
 
 body[data-framer-theme="light"] {
+    .canvas-container {
+        background-color: rgba(0, 0, 0, 0.15);
+    }
+
     .canvas-container::after {
         box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
     }
@@ -324,14 +332,14 @@ body[data-framer-theme="dark"] .error-container {
 .submit {
     width: 100%;
     color: #000;
-    background-color: #fff;
+    background-color: #fff !important;
     font-weight: 600;
     cursor: pointer;
 }
 
 body[data-framer-theme="light"] {
     .submit {
-        background-color: #000;
+        background-color: #000 !important;
         color: #fff;
         font-weight: 500;
     }
@@ -340,9 +348,14 @@ body[data-framer-theme="light"] {
 .upload {
     .upload-cta {
         width: 100%;
+        background: var(--framer-color-bg-tertiary);
     }
 }
 
+.clear {
+    background: var(--framer-color-bg-tertiary) !important;
+}
+
 .asset-buttons {
     display: flex;
     grid-template-columns: repeat(2, minmax(0, 1fr));

plugins/ascii/src/App.tsx

@@ -54,7 +54,7 @@ function ASCIIPlugin({ framerCanvasImage }: { framerCanvasImage: ImageAsset | nu
     const { gl, toBytes, program, setProgram, setResolution } = useOGLPipeline()
 
     useEffect(() => {
-        asciiRef.current?.setPixelSize(exportSize * 0.02)
+        asciiRef.current?.setPixelSize(exportSize * 0.04)
     }, [exportSize])
 
     useImageTexture(
@@ -101,7 +101,7 @@ function ASCIIPlugin({ framerCanvasImage }: { framerCanvasImage: ImageAsset | nu
         canvasContainerRef.current.style.width = `${CANVAS_WIDTH}px`
         canvasContainerRef.current.style.height = `${CANVAS_WIDTH / aspect}px`
 
-        setExportSize(assetResolution[0])
+        setExportSize(Math.min(4000, assetResolution[0]))
     }, [assetResolution])
 
     useEffect(() => {
@@ -114,7 +114,15 @@ function ASCIIPlugin({ framerCanvasImage }: { framerCanvasImage: ImageAsset | nu
 
         setSavingInAction(true)
 
-        if (framerCanvasImage) {
+        if (droppedAsset || isPlaceholder) {
+            await framer.addImage({
+                image: {
+                    type: "bytes",
+                    bytes: bytes,
+                    mimeType: "image/png",
+                },
+            })
+        } else {
             const originalImage = await framerCanvasImage.getData()
 
             await framer.setImage({
@@ -123,18 +131,10 @@ function ASCIIPlugin({ framerCanvasImage }: { framerCanvasImage: ImageAsset | nu
                     mimeType: originalImage.mimeType,
                 },
             })
-        } else {
-            await framer.addImage({
-                image: {
-                    type: "bytes",
-                    bytes: bytes,
-                    mimeType: "image/png",
-                },
-            })
         }
 
         setSavingInAction(false)
-    }, [toBytes, framerCanvasImage])
+    }, [toBytes, framerCanvasImage, droppedAsset, isPlaceholder])
 
     // resize observer
     useEffect(() => {
@@ -225,7 +225,9 @@ function ASCIIPlugin({ framerCanvasImage }: { framerCanvasImage: ImageAsset | nu
                         <option value="500">500px</option>
                         <option value="1000">1000px</option>
                         <option value="2000">2000px</option>
-                        <option value={assetResolution[0]}>Source ({assetResolution[0]}px)</option>
+                        <option value={Math.min(4000, assetResolution[0])}>
+                            Source ({Math.min(4000, assetResolution[0])}px)
+                        </option>
                     </select>
                 </div>
             </div>