src/components/ImageCard.tsx

@@ -21,6 +21,7 @@ export function ImageCard({ key: itemKey, data: item }: ImageCard.ImageCardProps
 
   function updateLocalStorage(time?: number) {
     debounce(() => {
+      console.log(itemKey, "updated storage")
       localStorage.setItem("images", JSON.stringify(images.images.value))
     }, time)
   }
@@ -60,20 +61,23 @@ export function ImageCard({ key: itemKey, data: item }: ImageCard.ImageCardProps
       className="select-none transition flex flex-col justify-stretch shadow-lg rounded border border-[#3c3c3c] absolute"
       style={{
         zIndex: `${focusedItem.value == itemKey ? LayerEnum.CARD_ELEVATED : LayerEnum.CARD}`,
+        width: `${item.dimensions.w}px`,
+        height: `${item.dimensions.h}px`,
         top: `${item.position.y}px`,
         left: `${item.position.x}px`,
-        maxWidth: '300px',
         backgroundColor: '#181818'
       }}
     >
 
-      <button className="flex justify-center items-center hover:bg-blue-500 w-5 h-5 text-white text-md absolute right-0 top-0" onclick={(_e: Event) => {
+      <button className="text-md" onclick={(_e: Event) => {
         ImagesSignal.default.removeImage(item.id)
         ImagesSignal.default.images.notify()
         updateLocalStorage()
       }}>x</button>
       <img
         src={item.contents}
+        width={'100%'}
+        height={'100%'}
         alt={item.title}
       />
     </div >

src/components/InfinateCanvas.tsx

@@ -10,6 +10,7 @@ import images from "../signals/images"
 export default function InfiniteCanvas() {
   const containerRef = useRef<HTMLDivElement>(null)
 
+
   useEffect(() => {
     window.scrollTo({
       left: (canvasDimentsion.value.width / 2) - (window.innerWidth / 2),
@@ -34,6 +35,8 @@ export default function InfiniteCanvas() {
   }, [])
 
   return (
+    <>
+      <>
         <>
           <CardSelector />
           <MiniMap />
@@ -66,5 +69,7 @@ export default function InfiniteCanvas() {
             </div>
           </div>
         </>
+      </>
+    </>
   )
 }

vite.config.ts

@@ -1,9 +1,17 @@
-import { defineConfig } from "vite"
+import { defineConfig } from "vite";
-import kaioken from "vite-plugin-kaioken"
+import kaioken from "vite-plugin-kaioken";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [kaioken()],
+  esbuild: {
+    jsxInject: `import * as kaioken from "kaioken"`,
+    jsx: "transform",
+    jsxFactory: "kaioken.createElement",
+    jsxFragment: "kaioken.fragment",
+    loader: "tsx",
+    include: ["**/*.tsx", "**/*.ts", "**/*.jsx", "**/*.js"],
+  },
   // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
   //
   // 1. prevent vite from obscuring rust errors
@@ -17,4 +25,4 @@ export default defineConfig({
       ignored: ["**/src-tauri/**"],
     },
   },
-})
+});